/* ═══════════════════════════════════════════════════════════════
   SIRAA — style.css  (shared across all pages)
   ═══════════════════════════════════════════════════════════════

   Design tokens are NOT defined here any more.

   Every colour, font, radius and shadow now comes from the `settings` table
   and is printed as CSS custom properties by render_theme_css() in an inline
   <style id="siraa-theme"> block that includes/header.php emits *before* this
   file. That is what makes Admin → Appearance able to restyle the whole shop.

   Two consequences worth knowing before editing:
     1. Do not add a :root{} block here. It would load after the theme block
        and silently win, freezing the palette back to hard-coded values.
     2. The old pre-Phase-6 names (--teal, --navy, --cream, --dark, --gray,
        --red, --fd, --fb) still work — render_theme_css() aliases them onto
        the new tokens — so rules written before the theme engine existed did
        not have to be rewritten.

   The Google Fonts @import that used to sit at the top of this file was
   removed as well: an @import inside a stylesheet blocks rendering until a
   second, chained request finishes. render_font_links() now loads the fonts
   the owner actually chose, without blocking.
   ═══════════════════════════════════════════════════════════════ */

/* ── RESET ────────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; width:100%; max-width:100%; }
body { font-family:var(--fb); color:var(--dark); background:var(--bg); overflow-x:hidden; width:100%; max-width:100%; position:relative; }

/* ── UTILITIES ────────────────────────────────────────────────── */
.sp { padding:72px 80px; }
.sp-sm { padding:48px 80px; }
.tc { text-align:center; }

.eyebrow {
  display:inline-block; font-size:11px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--teal); margin-bottom:10px;
}
h2.sh {
  font-family:var(--fd); font-size:clamp(28px,3.5vw,44px);
  font-weight:700; color:var(--dark); line-height:1.15; margin-bottom:8px;
}
.sub { color:var(--gray); font-size:15px; margin-bottom:40px; }

/* ── BUTTONS ──────────────────────────────────────────────────── */
.btn,
.btn:link,
.btn:visited,
.btn:hover,
.btn:active {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 28px; border-radius:40px;
  font-size:14px; font-weight:600;
  border:none; outline:none; cursor:pointer;
  transition:var(--tr);
  text-decoration:none !important;
}
.btn-p  { background:linear-gradient(135deg,var(--gold-soft),var(--teal)); color:var(--navy); font-weight:700; letter-spacing:.02em; }
.btn-p:hover { background:var(--teal); transform:translateY(-2px); box-shadow:var(--shadow-gold); }
.btn-o  { background:transparent; color:var(--dark); border:1.5px solid rgba(217,170,85,.5); }
.btn-o:hover { background:var(--teal); color:var(--navy); border-color:var(--teal); }
.btn-g  { background:transparent; color:var(--teal); border:1.5px solid var(--border); }
.btn-g:hover { background:var(--teal); color:var(--navy); border-color:var(--teal); }
.btn-d  { background:var(--surface-2); color:var(--dark); border:1px solid var(--border); }
.btn-d:hover { background:var(--teal); color:var(--navy); transform:translateY(-2px); }

/* ── PAGE LOADER ──────────────────────────────────────────────── */
#page-loader {
  position:fixed; inset:0; background:var(--navy);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:16px; z-index:9999;
  transition:opacity .25s ease, visibility .25s ease;
  width:100vw; box-sizing:border-box;
}
#page-loader.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.ll { font-family:var(--fd); font-size:40px; color:#fff; letter-spacing:.2em; }
.ll-logo { width:96px; height:96px; border-radius:50%; animation:pulse-logo 1.4s ease-in-out infinite; }
@keyframes pulse-logo { 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.06); opacity:.85; } }
.lb { width:160px; height:2px; background:rgba(255,255,255,.12); border-radius:2px; overflow:hidden; }
.lb::after { content:''; display:block; height:100%; width:0; background:var(--gold); animation:lb 1.2s ease forwards; }
@keyframes lb { to { width:100%; } }

/* ── ANNOUNCEMENT BAR ─────────────────────────────────────────── */
#announce {
  background:var(--grad-gold); color:var(--on-gold);
  font-size:12.5px; font-weight:600; letter-spacing:.04em;
  text-align:center; padding:8px 20px;
  position:relative; z-index:901;
}
#announce a, #announce span { color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:8px; justify-content:center; }
#announce a:hover .ann-go { transform:translateX(3px); }
#announce .ann-go { transition:var(--tr-fast); font-size:11px; }

/* ── HEADER ───────────────────────────────────────────────────── */
#header {
  position:sticky; top:0; left:0; z-index:900;
  /* Three columns with flexible, equal sides: the nav then sits on the real
     centre line of the page. With flex + space-between it was pushed left,
     because the actions cluster on the right is wider than the wordmark. */
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center; gap:18px;
  padding:0 80px; height:72px;
  background:rgba(var(--bg-rgb),.85); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  transition:var(--tr);
}
#header > .logo { justify-self:start; }
#header > #navbar { justify-self:center; }
#header > .h-actions { justify-self:end; }
#header.scrolled { box-shadow:var(--shadow-md); }
/* A gold hairline under the bar — the one ornament the Dark Luxe look leans on. */
#header::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--hairline); }

.logo { display:flex; align-items:center; gap:10px; font-family:var(--fd); font-size:28px; font-weight:700; color:var(--dark); letter-spacing:.05em; white-space:nowrap; }
.logo img { width:54px; height:54px; border-radius:50%; display:block; }
.logo-txt span, .logo > span:not(.logo-txt) { color:var(--teal); }
footer .logo, .contact-info .logo { color:var(--dark); }

#navbar { display:flex; align-items:center; gap:4px; white-space:nowrap; }
#navbar li { list-style:none; }
#navbar li::marker { content:''; }
#navbar li a,
#navbar li a:link,
#navbar li a:visited,
#navbar li a:hover,
#navbar li a:active,
#navbar li a.active {
  font-size:14px; font-weight:500; color:var(--dark);
  padding:8px 14px; border-radius:8px; transition:var(--tr);
  text-decoration:none !important;
  border-bottom:none !important;
}
#navbar li a:hover, #navbar li a.active { color:var(--teal); background:var(--teal-light); }

.h-actions { display:flex; align-items:center; gap:10px; }
.ib {
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--dark); background:transparent; border:none;
  font-size:16px; position:relative; transition:var(--tr);
}
.ib:hover { background:var(--teal-light); color:var(--teal); }

.cbadge {
  position:absolute; top:-2px; right:-2px;
  width:17px; height:17px; border-radius:50%;
  background:var(--red); color:#fff;
  font-size:9px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

/* search dropdown */
.sw { position:relative; }
.sb {
  position:absolute; right:0; top:48px;
  width:0; overflow:hidden; background:var(--surface);
  border-radius:40px; box-shadow:var(--shadow-md); border:1px solid var(--border);
  transition:width .35s ease; display:flex; align-items:center;
  border:1px solid var(--border);
}
.sb.open { width:270px; }
.sb input { border:none; outline:none; font-size:14px; padding:11px 18px; width:100%; background:transparent; }
.sb button { background:none; border:none; color:var(--teal); padding:11px 14px; font-size:14px; }

#mobile { display:none; align-items:center; gap:8px; }
#close  { display:none; position:absolute; top:22px; right:22px; font-size:22px; cursor:pointer; color:var(--dark); }
.nav-close-li { list-style:none; }

/* text wordmark, used when no logo image is uploaded */
.logo-word { font-family:var(--fd); font-size:27px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.logo-word .lg-accent { color:var(--gold); }
.ll-word { font-family:var(--fd); font-size:40px; letter-spacing:.22em; color:var(--gold); text-transform:uppercase; }

/* small pill an admin can hang off any nav item ("New", "Sale") */
.nav-badge {
  display:inline-block; font-style:normal; font-size:9px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; vertical-align:2px;
  background:var(--gold); color:var(--on-gold);
  padding:2px 6px; border-radius:var(--radius-pill); margin-left:5px;
}

/* language switch: a text pill rather than an icon, because "EN"/"বাং" is
   self-explanatory in a way that a globe glyph is not */
.lang-toggle { width:auto; min-width:40px; padding:0 11px; border-radius:var(--radius-pill); border:1px solid var(--border); }
.lang-toggle span { font-size:11.5px; font-weight:700; letter-spacing:.06em; }
.lang-toggle:hover { border-color:var(--gold); }

.hdr-cta { padding:9px 20px; font-size:13px; }

/* ── HERO SLIDER ──────────────────────────────────────────────── */
#hero-slider { position:relative; height:92vh; min-height:560px; overflow:hidden; background:var(--bg); }
.hs-slide {
  position:absolute; inset:0; opacity:0; visibility:hidden; z-index:1;
  background-size:cover; background-position:center;
  display:flex; align-items:center;
  transition:opacity 1s ease;
}
.hs-slide.active { opacity:1; visibility:visible; z-index:2; }
.hs-slide::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg,rgba(5,4,3,.86) 0%,rgba(5,4,3,.45) 52%,rgba(5,4,3,.18) 100%);
}
.hc { position:relative; z-index:2; padding:0 80px; max-width:640px; }
.htag {
  display:inline-block; background:var(--gold); color:var(--navy);
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 16px; border-radius:40px; margin-bottom:20px;
}
.hc h1 {
  font-family:var(--fd); font-size:clamp(40px,6.5vw,72px);
  font-weight:700; color:#fff; line-height:1.08; margin-bottom:18px;
}
.hc h1 em { font-style:italic; color:var(--gold); }
.hc p { color:rgba(255,255,255,.82); font-size:16px; line-height:1.75; margin-bottom:34px; max-width:520px; }
.hbtns { display:flex; gap:14px; flex-wrap:wrap; }
.live-badge {
  display:inline-flex; align-items:center; gap:8px; margin-top:22px;
  font-size:12.5px; color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.06); backdrop-filter:blur(6px);
  border:1px solid rgba(217,170,85,.3);
  padding:8px 16px; border-radius:40px;
}
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.35} }
.live-badge i { animation:pulse-dot 1.6s ease-in-out infinite; }
.hs-slide.active .hc > * { animation:fu .7s ease both; }
.hs-slide.active .hc > *:nth-child(2) { animation-delay:.08s; }
.hs-slide.active .hc > *:nth-child(3) { animation-delay:.16s; }
.hs-slide.active .hc > *:nth-child(4) { animation-delay:.24s; }
@keyframes fu { from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)} }

.hs-arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:48px; height:48px; border-radius:50%;
  background:rgba(10,9,8,.4); backdrop-filter:blur(6px);
  border:1px solid rgba(217,170,85,.35); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; cursor:pointer; transition:var(--tr);
}
.hs-arrow:hover { background:var(--gold); color:var(--navy); border-color:var(--gold); }
.hs-prev { left:28px; }
.hs-next { right:28px; }

.hs-dots {
  position:absolute; bottom:28px; left:0; right:0; z-index:5;
  display:flex; justify-content:center; gap:10px;
}
.hs-dot {
  width:9px; height:9px; border-radius:50%;
  background:rgba(255,255,255,.35); border:1px solid rgba(217,170,85,.5);
  cursor:pointer; transition:var(--tr); padding:0;
}
.hs-dot.active { background:var(--gold); width:26px; border-radius:6px; }

.hs-live-badge {
  position:absolute; left:80px; bottom:74px; z-index:5;
  margin-top:0 !important;
}

@media(max-width:799px) {
  #hero-slider { height:78vh; }
  .hs-arrow { width:38px; height:38px; font-size:12px; }
  .hs-prev { left:14px; } .hs-next { right:14px; }
  .hs-live-badge { left:24px; bottom:56px; font-size:11px; padding:6px 12px; }
}

/* ── SECTION HEADER ───────────────────────────────────────────── */
.sec-hd { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:36px; }

/* ── PRODUCT CARD ─────────────────────────────────────────────── */
.pro-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.pro {
  background:var(--surface); border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--border); transition:var(--tr); position:relative;
}
.pro:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--teal); }
.pro-img { display:block; position:relative; overflow:hidden; aspect-ratio:3/4; }
.pro-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.pro:hover .pro-img img { transform:scale(1.07); }
.pro-badge {
  position:absolute; top:12px; left:12px;
  background:var(--red); color:#fff;
  font-size:10px; font-weight:700; padding:4px 10px; border-radius:40px;
}
.pro-badge.new { background:var(--teal); color:var(--navy); }
.pro-badge.sale { background:var(--gold); color:var(--navy); }
.pro-badge.discount { top:44px; background:var(--red); z-index:3; }
.pro-badge.low-stock { top:76px; background:var(--surface-2); color:var(--gold-soft); border:1px solid rgba(217,170,85,.4); z-index:3; }
.pro-oos-ribbon {
  position:absolute; top:10px; right:10px; z-index:4;
  background:var(--red); color:#fff; font-size:10px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  padding:5px 10px; border-radius:4px;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
  white-space:nowrap;
}

/* premium hover overlay: name + price + quick view / view details */
.pro-hover-overlay {
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:18px 16px 16px;
  background:linear-gradient(to top, rgba(5,4,3,.96) 10%, rgba(5,4,3,.75) 55%, transparent 100%);
  transform:translateY(14px); opacity:0;
  transition:transform .35s ease, opacity .35s ease;
}
.pro:hover .pro-hover-overlay { transform:translateY(0); opacity:1; }
.pro-hover-overlay h5 { font-family:var(--fd); font-size:16px; font-weight:700; color:#fff; margin-bottom:4px; }
.pro-hover-overlay, .pro-hover-overlay * { text-decoration:none !important; }
.pro-hover-price { font-family:var(--fd); font-size:15px; color:var(--gold); margin-bottom:12px; }
.pro-hover-btns { display:flex; gap:8px; flex-wrap:wrap; }
.qv-btn, .vd-btn {
  flex:1; min-width:110px; text-align:center;
  padding:9px 10px; border-radius:8px; font-size:11.5px; font-weight:600;
  letter-spacing:.02em; cursor:pointer; transition:var(--tr); white-space:nowrap;
}
.qv-btn { background:rgba(255,255,255,.08); border:1px solid rgba(217,170,85,.4); color:#fff; }
.qv-btn:hover { background:rgba(217,170,85,.15); border-color:var(--gold); }
.vd-btn { background:var(--gold); border:1px solid var(--gold); color:var(--navy); display:flex; align-items:center; justify-content:center; font-weight:700; }
.vd-btn:hover { background:var(--gold-soft); color:var(--navy); }

.pro-acts {
  position:absolute; top:12px; right:12px;
  display:flex; flex-direction:column; gap:6px;
  transform:translateX(52px); transition:var(--tr);
}
.pro:hover .pro-acts { transform:translateX(0); }
.pab {
  width:36px; height:36px; border-radius:50%;
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; color:var(--dark); cursor:pointer; transition:var(--tr);
}
.pab:hover { background:var(--teal); color:var(--navy); border-color:var(--teal); }
.pab.wishlisted { background:var(--red); color:#fff; }

.pro-info { padding:16px; }
.pro-cat { font-size:11px; color:var(--gray); letter-spacing:.06em; text-transform:uppercase; margin-bottom:4px; }
.pro-info h5 { font-size:15px; font-weight:600; color:var(--dark); margin-bottom:8px; }
.stars { color:#f4b530; font-size:11px; margin-bottom:10px; }
.stars span { color:var(--gray); font-size:11px; margin-left:4px; }
.pro-ft { display:flex; justify-content:space-between; align-items:center; }
.pro-price { font-family:var(--fb); font-size:20px; font-weight:800; letter-spacing:.01em; color:var(--price-clr); text-shadow:0 0 18px rgba(255,207,107,.35); }
.pro-price del { font-size:13px; color:var(--gray); font-weight:400; margin-right:4px; }
.cb {
  width:36px; height:36px; border-radius:50%;
  background:var(--teal-light); border:1px solid var(--border);
  color:var(--teal); display:flex; align-items:center; justify-content:center;
  font-size:15px; cursor:pointer; transition:var(--tr);
}
.cb:hover { background:var(--teal); color:var(--navy); }

/* ── BANNERS ──────────────────────────────────────────────────── */
#banner {
  position:relative; height:44vh; min-height:280px;
  background:url("img/banner/b2.jpeg") center/cover no-repeat;
  display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden;
}
#banner::before { content:''; position:absolute; inset:0; background:rgba(4,30,66,.60); }
.bnc { position:relative; z-index:1; }
#banner h4 { color:rgba(255,255,255,.8); font-size:14px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:8px; }
#banner h2 { font-family:var(--fd); font-size:clamp(28px,5vw,52px); color:#fff; margin-bottom:22px; }
#banner h2 span { color:var(--gold); font-style:italic; }

#sm-banner { display:grid; grid-template-columns:1fr 1fr; }
.bx {
  position:relative; min-height:40vh;
  background:url("img/banner/b17.jpg") center/cover no-repeat;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:40px; overflow:hidden;
}
.bx2 { background-image:url("img/banner/b10.jpg"); }
.bx::before { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(4,30,66,.8) 0%,transparent 65%); }
.bx > * { position:relative; z-index:1; }
.bx h4 { color:rgba(255,255,255,.7); font-size:13px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:4px; }
.bx h2 { font-family:var(--fd); color:#fff; font-size:clamp(22px,3vw,34px); font-weight:700; margin-bottom:8px; }
.bx p { color:rgba(255,255,255,.72); font-size:13px; margin-bottom:18px; }

#banner3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:48px 80px; }
.bc {
  position:relative; height:220px; border-radius:var(--radius); overflow:hidden; cursor:pointer;
}
.bc::before { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.65) 0%,transparent 55%); transition:var(--tr); }
.bc:hover::before { background:rgba(0,0,0,.5); }
.bc img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.bc:hover img { transform:scale(1.06); }
.bc-txt { position:absolute; bottom:18px; left:20px; z-index:1; }
.bc-txt h2 { font-family:var(--fd); color:#fff; font-size:22px; font-weight:700; }
.bc-txt h3 { color:var(--gold); font-size:13px; font-weight:600; margin-top:2px; }

/* ── NEWSLETTER ───────────────────────────────────────────────── */
#newsletter {
  background:var(--navy); display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:28px; padding:52px 80px;
  position:relative; overflow:hidden;
}
#newsletter::before { content:''; position:absolute; right:-80px; top:-80px; width:340px; height:340px; border-radius:50%; background:rgba(217,170,85,.08); }
.nt h4 { font-family:var(--fd); font-size:30px; font-weight:700; color:#fff; margin-bottom:6px; }
.nt p { font-size:14px; color:rgba(255,255,255,.5); }
.nt p span { color:var(--gold); }
.nlf { display:flex; position:relative; z-index:1; }
.nlf input {
  height:50px; padding:0 22px; font-size:14px; width:290px;
  border:none; outline:none; border-radius:40px 0 0 40px;
  background:rgba(255,255,255,.10); color:#fff; font-family:var(--fb);
  border:1px solid rgba(255,255,255,.12); border-right:none;
}
.nlf input::placeholder { color:rgba(255,255,255,.35); }
.nlf button {
  height:50px; padding:0 26px;
  background:var(--teal); color:var(--navy); font-weight:700; font-size:13px;
  border:none; outline:none; border-radius:0 40px 40px 0;
  cursor:pointer; transition:var(--tr); white-space:nowrap;
}
.nlf button:hover { background:var(--teal-dark); }

/* ── FOOTER ───────────────────────────────────────────────────── */
footer { background:var(--surface); border-top:1px solid var(--border); padding:64px 80px 0; }
.fg { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:48px; padding-bottom:48px; }
.fb-brand .logo { margin-bottom:16px; }
.fb-brand p { font-size:13px; color:var(--gray); line-height:1.85; margin-bottom:22px; }
.socials { display:flex; gap:10px; flex-wrap:wrap; }
.sl-icon {
  width:36px; height:36px; border-radius:50%; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; color:var(--gray); transition:var(--tr);
}
.sl-icon:hover { background:var(--teal); border-color:var(--teal); color:var(--navy); }

.fc h4 {
  font-size:12px; font-weight:700; color:var(--dark);
  letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:20px; padding-bottom:10px;
  border-bottom:2px solid var(--teal); display:inline-block;
}
.fc a { display:block; font-size:13px; color:var(--gray); margin-bottom:10px; transition:var(--tr); }
.fc a:hover { color:var(--teal); padding-left:4px; }
.ci { display:flex; gap:10px; align-items:flex-start; margin-bottom:10px; }
.ci i { color:var(--teal); font-size:13px; margin-top:2px; flex-shrink:0; }
.ci span, .ci a { font-size:13px; color:var(--gray); line-height:1.6; transition:var(--tr); }
.ci a:hover { color:var(--teal); }
.pay-logos { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; align-items:center; }
.pay-label { display:block; width:100%; font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
/* Chips were a light grey block dropped on a black footer. Now they read as
   quiet outlined badges, which is also how the payment logos are drawn. */
.pay-logo { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:5px 12px; font-size:11px; font-weight:700; color:var(--text); }

.fb { border-top:1px solid var(--border); padding:22px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.fb p { font-size:12px; color:var(--gray); }
.fb nav { display:flex; gap:20px; }
.fb nav a { font-size:12px; color:var(--gray); transition:var(--tr); }
.fb nav a:hover { color:var(--teal); }

/* ── BACK TO TOP ──────────────────────────────────────────────── */
#btt {
  position:fixed; bottom:28px; right:28px; z-index:800;
  width:44px; height:44px; border-radius:50%;
  background:var(--teal); color:var(--navy); border:none;
  display:flex; align-items:center; justify-content:center; font-size:16px;
  box-shadow:var(--shadow-md); opacity:0; transform:translateY(20px);
  transition:var(--tr); cursor:pointer;
}
#btt.show { opacity:1; transform:translateY(0); }
#btt:hover { background:var(--teal-dark); }

/* ── TOAST ────────────────────────────────────────────────────── */
#toast {
  position:fixed; bottom:32px; left:50%; z-index:9900;
  transform:translateX(-50%) translateY(80px);
  background:var(--navy); color:#fff;
  padding:13px 26px; border-radius:40px; font-size:14px; font-weight:500;
  display:flex; align-items:center; gap:10px;
  box-shadow:var(--shadow-lg); transition:.35s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none; white-space:nowrap;
}
#toast.show { transform:translateX(-50%) translateY(0); }
#toast i { color:var(--gold); }

/* ── SHOP PAGE ────────────────────────────────────────────────── */
.page-hero {
  background:linear-gradient(135deg,var(--navy) 0%,var(--surface-2) 100%);
  padding:56px 80px; color:#fff; position:relative; overflow:hidden;
}
.page-hero::after { content:''; position:absolute; right:-60px; top:-60px; width:300px; height:300px; border-radius:50%; background:rgba(217,170,85,.10); }
.page-hero h1 { font-family:var(--fd); font-size:clamp(32px,4vw,52px); margin-bottom:8px; }
.breadcrumb { display:flex; gap:8px; align-items:center; font-size:13px; color:rgba(255,255,255,.55); }
.breadcrumb a { color:rgba(255,255,255,.55); transition:var(--tr); }
.breadcrumb a:hover { color:#fff; }
.breadcrumb span { color:rgba(255,255,255,.3); }

.shop-layout { display:grid; grid-template-columns:260px 1fr; gap:32px; padding:48px 80px; }

/* sidebar */
.sidebar { position:sticky; top:88px; height:fit-content; }
.sf-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px; margin-bottom:20px; }
.sf-box h5 { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--dark); margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid var(--border); }

/* sidebar search + price inputs (plain GET form: works with JS off) */
.sf-search { display:flex; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--surface-2); }
.sf-search input { flex:1; min-width:0; border:none; outline:none; background:transparent; color:var(--text); padding:11px 14px; font-size:13px; font-family:var(--fb); }
.sf-search button { border:none; cursor:pointer; padding:0 14px; background:var(--grad-gold); color:var(--on-gold); font-weight:700; }
.sf-price { display:flex; align-items:center; gap:8px; }
.sf-price input { width:100%; min-width:0; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; color:var(--text); padding:9px 10px; font-size:13px; font-family:var(--fb); outline:none; }
.sf-price input:focus { border-color:var(--gold); }
.sf-price span { color:var(--muted); }
.sf-apply { margin-top:12px; width:100%; padding:9px 14px; font-size:12px; }
.sf-reset { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--gold-soft); }
.sf-reset:hover { color:var(--gold); }

/* price range */
.price-range { display:flex; flex-direction:column; gap:10px; }
.price-range input[type=range] { -webkit-appearance:none; width:100%; height:4px; background:var(--border); border-radius:2px; outline:none; }
.price-range input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--teal); cursor:pointer; }
.price-labels { display:flex; justify-content:space-between; font-size:13px; color:var(--gray); }

/* category checkboxes */
.cf-item { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--hairline); cursor:pointer; }
.cf-item:last-child { border:none; }
.cf-item label { font-size:14px; color:var(--dark); cursor:pointer; display:flex; align-items:center; gap:10px; }
.cf-item input[type=checkbox] { width:16px; height:16px; accent-color:var(--teal); }
.cf-item .cnt { font-size:11px; color:var(--muted); background:var(--surface-2); border:1px solid var(--border); padding:2px 8px; border-radius:20px; }

/* color swatches */
.color-swatches { display:flex; flex-wrap:wrap; gap:8px; }
.csw { width:28px; height:28px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:var(--tr); }
.csw:hover, .csw.active { border-color:var(--teal); transform:scale(1.15); }

/* shop toolbar */
.shop-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
.result-count { font-size:14px; color:var(--gray); }
.toolbar-right { display:flex; align-items:center; gap:12px; }
.sort-label { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.sort-select { padding:9px 16px; border:1px solid var(--border); border-radius:8px; font-size:13px; font-family:var(--fb); color:var(--dark); outline:none; background:var(--surface); cursor:pointer; max-width:220px; }
.view-btns button { width:36px; height:36px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--gray); font-size:14px; cursor:pointer; transition:var(--tr); }
.view-btns button.active, .view-btns button:hover { background:var(--teal); border-color:var(--teal); color:var(--navy); }
.shop-empty { grid-column:1/-1; text-align:center; color:var(--muted); padding:56px 0; font-size:15px; }
.ph-sub { color:var(--muted); font-size:14px; margin-top:6px; }

/* pagination */
.pager { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px; margin-top:44px; }
.pager .pg { min-width:40px; height:40px; padding:0 14px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:14px; font-weight:500; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:var(--tr); }
.pager a.pg:hover { border-color:var(--gold); color:var(--gold-soft); }
.pager .pg.cur { background:var(--grad-gold); border-color:transparent; color:var(--on-gold); font-weight:700; }
.pg-gap { color:var(--muted); padding:0 2px; }
.pagination { display:flex; justify-content:center; gap:8px; margin-top:40px; }
.pag-btn { width:40px; height:40px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--dark); font-size:14px; font-weight:500; cursor:pointer; transition:var(--tr); display:flex; align-items:center; justify-content:center; }
.pag-btn:hover, .pag-btn.active { background:var(--teal); border-color:var(--teal); color:var(--navy); }

/* ── CART PAGE ────────────────────────────────────────────────── */
.cart-layout { display:grid; grid-template-columns:1fr 360px; gap:32px; padding:48px 80px; align-items:start; }

.cart-table { width:100%; border-collapse:collapse; }
.cart-table thead tr { border-bottom:2px solid var(--border); }
.cart-table th { padding:12px 16px; font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--gray); text-align:left; font-weight:600; }
.cart-table tbody tr { border-bottom:1px solid var(--border); transition:var(--tr); }
.cart-table tbody tr:hover { background:var(--cream); }
.cart-table td { padding:20px 16px; vertical-align:middle; }

.cart-item-img { width:80px; height:80px; border-radius:10px; object-fit:cover; }
.cart-item-name { font-weight:600; font-size:14px; margin-bottom:4px; }
.cart-item-meta { font-size:12px; color:var(--gray); }

.qty-ctrl { display:flex; align-items:center; gap:0; }
.qty-ctrl button { width:32px; height:32px; border:1px solid var(--border); background:var(--surface); color:var(--dark); font-size:16px; cursor:pointer; transition:var(--tr); }
.qty-ctrl button:first-child { border-radius:8px 0 0 8px; }
.qty-ctrl button:last-child  { border-radius:0 8px 8px 0; }
.qty-ctrl button:hover { background:var(--teal); border-color:var(--teal); color:var(--navy); }
.qty-ctrl input { width:48px; height:32px; border:1px solid var(--border); border-left:none; border-right:none; text-align:center; font-size:14px; font-family:var(--fb); outline:none; }

.remove-btn { background:none; border:none; color:#ccc; font-size:18px; cursor:pointer; transition:var(--tr); }
.remove-btn:hover { color:var(--red); }

.order-summary { background:var(--cream); border-radius:var(--radius-lg); padding:28px; position:sticky; top:88px; }
.order-summary h3 { font-family:var(--fd); font-size:22px; font-weight:700; color:var(--dark); margin-bottom:22px; padding-bottom:16px; border-bottom:1px solid var(--border); }
.sum-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; font-size:14px; color:var(--gray); border-bottom:1px solid rgba(0,0,0,.05); }
.sum-row:last-of-type { border:none; }
.sum-row.total { font-size:17px; font-weight:700; color:var(--dark); padding-top:16px; }
.sum-row.total span:last-child { color:var(--price-clr); font-weight:800; }

.coupon-row { display:flex; gap:0; margin:16px 0; }
.coupon-row input { flex:1; height:44px; border:1px solid var(--border); border-radius:8px 0 0 8px; padding:0 14px; font-size:13px; outline:none; }
.coupon-row button { height:44px; padding:0 18px; background:var(--navy); color:#fff; border:none; border-radius:0 8px 8px 0; font-size:13px; font-weight:600; cursor:pointer; transition:var(--tr); }
.coupon-row button:hover { background:var(--teal); }

.empty-cart { text-align:center; padding:80px 20px; grid-column:1/-1; }
.empty-cart i { font-size:64px; color:var(--border); margin-bottom:20px; }
.empty-cart h3 { font-family:var(--fd); font-size:28px; color:var(--dark); margin-bottom:10px; }
.empty-cart p { color:var(--gray); margin-bottom:28px; }

/* ── CONTACT PAGE ─────────────────────────────────────────────── */
.contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:0; min-height:70vh; }
.contact-info {
  background:var(--navy); padding:64px; color:#fff;
  display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden;
}
.contact-info::before { content:''; position:absolute; bottom:-80px; left:-80px; width:300px; height:300px; border-radius:50%; background:rgba(217,170,85,.08); }
.contact-info h2 { font-family:var(--fd); font-size:clamp(28px,3vw,42px); margin-bottom:12px; }
.contact-info p { color:rgba(255,255,255,.6); font-size:15px; line-height:1.8; margin-bottom:36px; }
.cinfo-item { display:flex; gap:16px; align-items:flex-start; margin-bottom:24px; }
.cinfo-ico { width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--gold); flex-shrink:0; }
.cinfo-txt strong { display:block; font-size:14px; color:#fff; margin-bottom:2px; }
.cinfo-txt span { font-size:13px; color:rgba(255,255,255,.55); }

.contact-form-wrap { background:var(--surface); padding:64px; display:flex; flex-direction:column; justify-content:center; }
.contact-form-wrap h2 { font-family:var(--fd); font-size:clamp(24px,3vw,38px); color:var(--dark); margin-bottom:8px; }
.contact-form-wrap p { color:var(--gray); font-size:14px; margin-bottom:36px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.form-group label { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--dark); }
.form-group input,
.form-group textarea,
.form-group select {
  padding:13px 16px; border:1.5px solid var(--border); border-radius:10px;
  font-size:14px; font-family:var(--fb); color:var(--dark); outline:none;
  transition:var(--tr); background:var(--surface-2); resize:none;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(217,170,85,.15); }
.form-group textarea { min-height:130px; }

/* map embed box */
.map-section { padding:0 80px 64px; }
.map-box { border-radius:var(--radius-lg); overflow:hidden; height:380px; background:var(--cream); display:flex; align-items:center; justify-content:center; border:1px solid var(--border); }
.map-box iframe { width:100%; height:100%; border:none; }

/* ── QUICK VIEW MODAL ─────────────────────────────────────────── */
.qv-overlay {
  position:fixed; inset:0; z-index:9500;
  background:rgba(5,4,3,.82); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
  width:100vw; box-sizing:border-box;
}
.qv-overlay.open { opacity:1; visibility:visible; }
.qv-box {
  position:relative; width:100%; max-width:820px; max-height:88vh; overflow:auto;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); transform:translateY(18px); transition:transform .3s ease;
  display:grid; grid-template-columns:1fr 1fr;
  box-sizing:border-box;
}
.qv-overlay.open .qv-box { transform:translateY(0); }
.qv-close {
  position:absolute; top:14px; right:14px; z-index:2;
  width:36px; height:36px; border-radius:50%; border:1px solid var(--border);
  background:var(--surface-2); color:var(--dark); font-size:14px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:var(--tr);
}
.qv-close:hover { background:var(--gold); color:var(--navy); border-color:var(--gold); }
.qv-img { background:var(--bg); }
.qv-img img { width:100%; height:100%; object-fit:cover; min-height:320px; }
.qv-info { padding:36px 32px; display:flex; flex-direction:column; }
.qv-info .pro-cat { margin-bottom:6px; }
.qv-info h3 { font-family:var(--fd); font-size:26px; color:var(--dark); margin-bottom:10px; }
.qv-price { font-family:var(--fb); font-size:24px; color:var(--price-clr); font-weight:800; letter-spacing:.01em; text-shadow:0 0 18px rgba(255,207,107,.35); margin-bottom:14px; }
.qv-price del { font-size:15px; color:var(--gray); font-weight:400; margin-right:6px; }
.qv-desc { font-size:14px; color:var(--gray); line-height:1.75; margin-bottom:22px; }
.qv-size-label { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--dark); margin-bottom:8px; }
.qv-size-pill { display:inline-block; padding:8px 20px; border:1.5px solid var(--gold); border-radius:8px; color:var(--gold); font-size:13px; font-weight:600; margin-bottom:24px; }
.qv-size-options { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.qv-size-options .qv-size-pill { margin-bottom:0; background:none; cursor:pointer; font-family:inherit; transition:var(--tr); }
.qv-size-options .qv-size-pill:hover { background:rgba(217,170,85,.08); }
.qv-size-options .qv-size-pill.active { background:var(--gold); color:var(--navy); }
.qv-actions { display:flex; gap:12px; margin-top:auto; flex-wrap:wrap; }
.qv-actions .btn { flex:1; justify-content:center; min-width:150px; }
@media(max-width:700px) {
  .qv-box { grid-template-columns:1fr; }
  .qv-img img { min-height:220px; }
  .qv-info { padding:28px 22px; }
}

/* ── PRODUCT DETAILS PAGE ─────────────────────────────────────── */
.pd-layout { display:grid; grid-template-columns:1fr 1fr; gap:56px; max-width:1200px; margin:50px auto; padding:0 24px; }
.pd-main-img { position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:3/4; background:var(--surface); cursor:zoom-in; }
.pd-main-img img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.pd-main-img:hover img { transform:scale(1.9); }
.pd-zoom-hint {
  position:absolute; bottom:12px; right:12px; z-index:2;
  background:rgba(5,4,3,.6); color:rgba(255,255,255,.8); font-size:11px;
  padding:6px 12px; border-radius:20px; pointer-events:none; opacity:0; transition:var(--tr);
}
.pd-gal-arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:40px; height:40px; border-radius:50%;
  background:rgba(10,9,8,.45); backdrop-filter:blur(6px);
  border:1px solid rgba(217,170,85,.35); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; cursor:pointer; transition:var(--tr);
}
.pd-gal-arrow:hover { background:var(--gold); color:var(--navy); border-color:var(--gold); }
.pd-gal-prev { left:14px; }
.pd-gal-next { right:14px; }

.pd-gal-dots {
  position:absolute; bottom:14px; left:0; right:0; z-index:5;
  display:flex; justify-content:center; gap:8px;
}
.pd-gal-dot {
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.4); border:1px solid rgba(217,170,85,.5);
  cursor:pointer; transition:var(--tr); padding:0;
}
.pd-gal-dot.active { background:var(--gold); width:22px; border-radius:5px; }

@media(max-width:799px) {
  .pd-gal-arrow { width:34px; height:34px; font-size:12px; }
  .pd-gal-prev { left:10px; } .pd-gal-next { right:10px; }
}
.pd-main-img:hover .pd-zoom-hint { opacity:1; }
.pd-thumbs { display:flex; gap:12px; margin-top:14px; flex-wrap:wrap; }
.pd-thumb { width:76px; height:96px; border-radius:10px; overflow:hidden; border:2px solid var(--border); padding:0; cursor:pointer; opacity:.6; transition:var(--tr); background:none; }
.pd-thumb img { width:100%; height:100%; object-fit:cover; }
.pd-thumb:hover { opacity:.9; }
.pd-thumb.active { border-color:var(--gold); opacity:1; }

.pd-title { font-family:var(--fd); font-size:clamp(26px,3vw,34px); color:var(--dark); margin:6px 0 10px; }
.pro-price { font-family:var(--fb); font-size:20px; font-weight:800; letter-spacing:.01em; color:var(--price-clr); text-shadow:0 0 18px rgba(255,207,107,.35); }
.pd-price del { color:var(--gray); font-size:16px; font-weight:400; margin-right:10px; }
.pd-meta-row { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.live-badge.sm { margin:0; padding:6px 14px; font-size:11.5px; }
.pd-view-count { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--gray); background:var(--surface-2); border:1px solid var(--border); padding:6px 14px; border-radius:40px; }
.pd-desc { color:var(--gray); line-height:1.8; margin-bottom:16px; }
.pd-attr { font-size:14px; color:var(--dark); margin-bottom:8px; }
.pd-attr strong { color:var(--gold-soft); font-weight:600; margin-right:6px; }

.pd-size-row, .pd-qty-row { display:flex; align-items:center; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.pd-size-row label, .pd-qty-row label { font-size:13px; font-weight:600; color:var(--dark); min-width:60px; }
.pd-size-row select { padding:10px 14px; border-radius:8px; border:1.5px solid var(--border); font-family:var(--fb); background:var(--surface-2); color:var(--dark); }
.pd-size-guide-btn {
  background:none; border:none; color:var(--gold); font-size:12.5px; font-weight:600;
  cursor:pointer; text-decoration:underline; text-underline-offset:3px;
}
.pd-stock-note { font-size:12px; color:var(--gray); }
.pd-actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; }
.pd-actions .btn { padding:14px 30px; }

.pd-trust { margin-top:28px; border-top:1px solid var(--border); padding-top:22px; display:flex; flex-direction:column; gap:16px; }
.pd-trust-item { display:flex; gap:14px; align-items:flex-start; }
.pd-trust-item i { font-size:17px; color:var(--gold); margin-top:2px; width:20px; text-align:center; }
.pd-trust-item strong { display:block; font-size:13.5px; color:var(--dark); margin-bottom:2px; }
.pd-trust-item span { font-size:12.5px; color:var(--gray); line-height:1.6; }

.pd-share { display:flex; align-items:center; gap:10px; margin-top:24px; }
.pd-share span { font-size:12.5px; color:var(--gray); font-weight:600; }
.share-btn {
  width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:14px; transition:var(--tr);
}
.share-btn.fb { background:#1877f2; } .share-btn.msg { background:#0084ff; } .share-btn.wa { background:#25d366; }
.share-btn:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }

.size-guide-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.size-guide-table th, .size-guide-table td { padding:10px 14px; text-align:center; border-bottom:1px solid var(--border); }
.size-guide-table th { color:var(--gold); font-weight:700; background:var(--surface-2); }
.size-guide-table td:first-child, .size-guide-table th:first-child { font-weight:700; color:var(--dark); }

@media(max-width:900px) {
  .pd-layout { grid-template-columns:1fr; gap:28px; margin:30px auto; }
  .pd-main-img:hover img { transform:none; }
}

/* ── ABOUT PAGE ───────────────────────────────────────────────── */
.ab-intro {
  max-width:1200px; margin:60px auto; padding:0 24px;
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}
.ab-intro-text p { color:var(--gray); line-height:1.85; margin-bottom:16px; font-size:15px; }
.ab-intro-img { border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow-lg); }
.ab-intro-img img { width:100%; height:100%; object-fit:cover; }

.ab-values-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.ab-value-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:32px 24px; text-align:center; transition:var(--tr);
}
.ab-value-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--gold); }
.ab-value-ico {
  width:60px; height:60px; border-radius:50%; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(217,170,85,.1); color:var(--gold); font-size:22px;
}
.ab-value-card h4 { font-family:var(--fd); font-size:18px; color:var(--dark); margin-bottom:10px; }
.ab-value-card p { color:var(--gray); font-size:13.5px; line-height:1.7; }

.ab-stats {
  display:flex; justify-content:center; flex-wrap:wrap; gap:0;
  max-width:900px; margin:70px auto; padding:0 24px;
}
.ab-stat { text-align:center; padding:0 48px; border-right:1px solid var(--border); }
.ab-stat:last-child { border-right:none; }
.ab-stat strong { display:block; font-family:var(--fd); font-size:34px; color:var(--gold); margin-bottom:4px; }
.ab-stat span { font-size:12.5px; color:var(--gray); letter-spacing:.04em; text-transform:uppercase; }

.ab-cta {
  text-align:center; max-width:640px; margin:0 auto 80px; padding:64px 24px;
  background:linear-gradient(135deg,var(--navy) 0%,var(--surface-2) 100%);
  border-radius:var(--radius-lg);
}
.ab-cta h2 { font-family:var(--fd); font-size:32px; color:#fff; margin-bottom:10px; }
.ab-cta p { color:rgba(255,255,255,.7); margin-bottom:26px; }

.ab-credit {
  text-align:center; padding:50px 24px 70px; border-top:1px solid var(--border);
  max-width:400px; margin:0 auto;
}
.ab-credit-photo {
  width:88px; height:88px; border-radius:50%; object-fit:cover;
  border:2px solid var(--gold); margin-bottom:14px; box-shadow:var(--shadow-gold);
}
.ab-credit-inner {
  display:flex;
  flex-direction:column;
  align-items:center;
}
.ab-credit-image-wrap {
  margin-bottom:14px;
}
.ab-credit-label {
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--gray);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:6px;
}
.ab-credit-name { font-size:14px; color:var(--dark); margin-bottom:2px; }
.ab-credit-name strong { color:var(--gold); }
.ab-credit-role { font-size:12px; color:var(--gray); }

@media(max-width:900px) {
  .ab-intro { grid-template-columns:1fr; gap:32px; margin:36px auto; }
  .ab-values-grid { grid-template-columns:1fr 1fr; }
  .ab-stat { padding:0 20px 20px; border-right:none; border-bottom:1px solid var(--border); flex:1 1 40%; }
}
@media(max-width:560px) {
  .ab-values-grid { grid-template-columns:1fr; }
}

/* ── SCROLL REVEAL ────────────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .55s ease, transform .55s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media(max-width:1100px) {
  /* Narrower gutters so the centred nav keeps its distance from the logo and
     the actions cluster instead of colliding with them. */
  #header { padding:0 32px; gap:10px; }
  .pro-grid { grid-template-columns:repeat(3,1fr); }
  .shop-layout { grid-template-columns:220px 1fr; }
}
@media(max-width:960px) {
  .hdr-cta { display:none; }   /* the nav needs the room more than a second Shop button does */
  .sp, .sp-sm, #newsletter, footer, #banner3, .shop-layout, .cart-layout, .map-section { padding-left:40px; padding-right:40px; }
  .fg { grid-template-columns:1fr 1fr; gap:32px; }
  #feature { grid-template-columns:repeat(3,1fr); }
  .hstats { display:none; }
  .contact-layout { grid-template-columns:1fr; }
  .contact-info, .contact-form-wrap { padding:48px; }
  .cart-layout { grid-template-columns:1fr; padding:24px 16px; }
  .cart-table { display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .order-summary { width:100%; box-sizing:border-box; position:static; }
}
@media(max-width:799px) {
  /* The centred 3-column grid is a desktop idea only. Here #navbar becomes a
     fixed drawer and .h-actions is hidden, so the grid would be left holding
     the logo and the burger — back to a simple two-end row. */
  #header { display:flex; justify-content:space-between; padding:0 24px; }
  #navbar {
    position:fixed; top:0; right:-100%; height:100vh; width:290px;
    flex-direction:column; align-items:flex-start; white-space:normal;
    background:var(--surface); padding:80px 28px 28px; gap:4px; border-left:1px solid var(--border);
    box-shadow:var(--shadow-lg); transition:.35s ease; z-index:1000;
  }
  @media (max-width:960px) {
  .checkout-form { padding-bottom:90px; }
  .co-submit {
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:950;
    width:100%;
    margin:0;
    border-radius:0;
    justify-content:center;
    padding:16px 20px;
    box-shadow:0 -8px 24px rgba(0,0,0,.35);
  }
}
  #navbar.active { right:0; }
  #navbar li a { font-size:16px; padding:12px 0; border-radius:0; display:block; }
  #close { display:block; }
  #mobile { display:flex; }
  .h-actions { display:none; }
  #hero { min-height:75vh; }
  .hc { padding:0 24px; }
  .si { display:none; }
  #feature { grid-template-columns:repeat(2,1fr); }
  .pro-grid { grid-template-columns:repeat(2,1fr); gap:16px; }
  #sm-banner { grid-template-columns:1fr; }
  #banner3 { grid-template-columns:1fr; padding:24px; gap:16px; }
  .fg { grid-template-columns:1fr; }
  #newsletter { flex-direction:column; text-align:center; padding:40px 24px; }
  .nlf { width:100%; }
  .nlf input { width:100%; }
  .shop-layout { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .contact-info, .contact-form-wrap { padding:36px 24px; }
  .page-hero { padding:40px 24px; }
  footer { padding-left:24px; padding-right:24px; }
  .map-section { padding:0 24px 48px; }
}
@media(max-width:480px) {
  .sp { padding:40px 20px; }
  .pro-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  #banner3 { padding:20px; }
  .cart-layout { padding:24px 20px; }
}

/* Grid children shouldn't force overflow on mobile */
.cart-layout, .cart-layout > * {
  min-width:0;
}

/* ── FLOATING CHAT ICONS (WhatsApp + Messenger) ─────────────── */
.float-chat {
  position:fixed; right:24px; bottom:96px; z-index:850;
  display:flex; flex-direction:column; gap:14px;
  align-items:flex-end;
}
.float-chat a {
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  transition:var(--tr);
  position:relative;
}
.float-chat a:hover { transform:translateY(-4px) scale(1.06); }
.float-wa  { background:#25d366; animation:chat-pulse-green 2.4s infinite; }
.float-msg { background:linear-gradient(135deg,#00c6ff,#0078ff); animation:chat-pulse-blue 2.4s infinite; animation-delay:.6s; }

@keyframes chat-pulse-green {
  0%   { box-shadow:0 0 0 0 rgba(37,211,102,.5); }
  70%  { box-shadow:0 0 0 14px rgba(37,211,102,0); }
  100% { box-shadow:0 0 0 0 rgba(37,211,102,0); }
}
@keyframes chat-pulse-blue {
  0%   { box-shadow:0 0 0 0 rgba(0,120,255,.5); }
  70%  { box-shadow:0 0 0 14px rgba(0,120,255,0); }
  100% { box-shadow:0 0 0 0 rgba(0,120,255,0); }
}

/* Always-visible helper bubble */
.float-bubble {
  position:relative;
  background:#fff; color:var(--navy);
  font-size:12.5px; font-weight:600;
  padding:10px 16px; border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  max-width:190px; line-height:1.4;
  animation:bubble-in .4s ease .8s both;
}
.float-bubble::after {
  content:''; position:absolute; right:20px; bottom:-6px;
  width:12px; height:12px; background:#fff;
  transform:rotate(45deg);
}
.float-bubble-close {
  position:absolute; top:-8px; right:-8px;
  width:20px; height:20px; border-radius:50%;
  background:var(--navy); color:#fff; font-size:11px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; border:none;
}
@keyframes bubble-in { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }
.float-chat.bubble-hidden .float-bubble { display:none; }

.float-tip {
  position:absolute; right:66px; top:50%; transform:translateY(-50%);
  background:var(--navy); color:#fff; font-size:12.5px; font-weight:500;
  padding:7px 14px; border-radius:8px; white-space:nowrap;
  opacity:0; visibility:hidden; transition:var(--tr);
}
.float-chat a:hover .float-tip { opacity:1; visibility:visible; }

@media(max-width:799px) {
  .float-chat { right:16px; bottom:86px; gap:12px; }
  .float-chat a { width:50px; height:50px; font-size:22px; }
  .float-tip { display:none; }
  .float-bubble { max-width:160px; font-size:12px; }
}
/* ── FLOATING CART BUTTON (draggable) ────────────────────────── */
.float-cart {
  position:fixed; right:24px; top:50%; z-index:850;
  width:58px; height:58px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold-soft),var(--teal));
  color:var(--navy); display:flex; align-items:center; justify-content:center;
  font-size:24px; box-shadow:var(--shadow-gold); transition:box-shadow var(--tr), scale var(--tr);
  cursor:grab; touch-action:none; user-select:none;
}
.float-cart:active { cursor:grabbing; }
.float-cart.dragging { transition:none; box-shadow:0 14px 34px rgba(0,0,0,.4); }
.float-cart-badge {
  position:absolute; top:-4px; right:-4px;
  min-width:22px; height:22px; padding:0 5px; border-radius:50%;
  background:var(--red); color:#fff; font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--bg); pointer-events:none;
}
.float-cart-badge.hide { display:none; }
.float-cart.bump { animation:cart-bump .45s ease; }
@keyframes cart-bump {
  0%   { transform:scale(1); }
  30%  { transform:scale(1.25) rotate(-8deg); }
  60%  { transform:scale(0.94) rotate(4deg); }
  100% { transform:scale(1); }
}
@media(max-width:799px) {
  .float-cart { right:16px; top:60%; width:50px; height:50px; font-size:20px; }
  .float-cart-badge { font-size:10px; min-width:18px; height:18px; }
}
/* ── CART DRAWER ─────────────────────────────────────────────── */
.cd-overlay {
  position:fixed; inset:0; z-index:9600;
  background:rgba(5,4,3,.6);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.cd-overlay.open { opacity:1; visibility:visible; }

.cart-drawer {
  position:fixed; top:0; right:0; height:100vh; height:100dvh; z-index:9601;
  width:min(440px, 92vw);
  background:var(--surface); border-left:1px solid var(--border);
  box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.cd-overlay.open .cart-drawer { transform:translateX(0); }

.cd-head { display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--border); }
.cd-head h3 { font-family:var(--fd); font-size:20px; color:var(--dark); display:flex; align-items:center; gap:10px; }
.cd-close { width:36px; height:36px; border-radius:50%; border:1px solid var(--border); background:var(--surface-2); color:var(--dark); font-size:14px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.cd-close:hover { background:var(--gold); color:var(--navy); border-color:var(--gold); }

.cd-body { flex:1; overflow-y:auto; padding:16px 22px; }
.cd-empty { text-align:center; padding:60px 20px; color:var(--gray); }
.cd-empty i { font-size:48px; color:var(--border); margin-bottom:14px; display:block; }

.cd-item { display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--border); }
.cd-item img { width:64px; height:64px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.cd-item-info { flex:1; min-width:0; }
.cd-item-name { font-size:13.5px; font-weight:600; color:var(--dark); margin-bottom:2px; }
.cd-item-meta { font-size:11.5px; color:var(--gray); margin-bottom:8px; }
.cd-item-row { display:flex; justify-content:space-between; align-items:center; }
.cd-qty { display:flex; align-items:center; gap:0; }
.cd-qty button { width:26px; height:26px; border:1px solid var(--border); background:var(--surface-2); color:var(--dark); font-size:13px; cursor:pointer; }
.cd-qty button:first-child { border-radius:6px 0 0 6px; }
.cd-qty button:last-child { border-radius:0 6px 6px 0; }
.cd-qty span { width:32px; height:26px; display:flex; align-items:center; justify-content:center; border-top:1px solid var(--border); border-bottom:1px solid var(--border); font-size:12.5px; }
.cd-item-price { font-family:var(--fb); font-size:14px; font-weight:800; color:var(--price-clr); }
.cd-remove { background:none; border:none; color:#ccc; font-size:14px; cursor:pointer; margin-left:10px; }
.cd-remove:hover { color:var(--red); }

.cd-foot { border-top:1px solid var(--border); padding:18px 22px; }
.cd-sub-row { display:flex; justify-content:space-between; font-size:14px; color:var(--gray); margin-bottom:14px; }
.cd-sub-row strong { color:var(--dark); font-size:16px; }
.cd-foot .btn { width:100%; justify-content:center; }

@media(max-width:480px) {
  .cart-drawer { width:100vw; }
}
/* ── GLOBAL UNDERLINE FIX (buttons + product hover) ──────────── */
.btn, .btn:link, .btn:visited, .btn:hover, .btn:active,
.pro-hover-overlay, .pro-hover-overlay * {
  text-decoration: none !important;
}
/* ── SCROLL DOWN BUTTON (homepage hero) ──────────────────────── */
.scroll-down-btn {
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  z-index:5; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.1); backdrop-filter:blur(6px);
  border:1.5px solid rgba(217,170,85,.5); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; cursor:pointer;
  animation:scroll-bounce 1.8s ease-in-out infinite;
}
.scroll-down-btn:hover { background:var(--gold); color:var(--navy); border-color:var(--gold); }
@keyframes scroll-bounce {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50% { transform:translateX(-50%) translateY(10px); }
}
@media(max-width:799px) {
  .scroll-down-btn { bottom:16px; width:38px; height:38px; font-size:14px; }
}
/* Ensure strikethrough always shows on old price, even inside links */
.pro-price del,
.pd-price del,
.qv-price del,
.cart-item del {
  text-decoration: line-through !important;
}

/* ══════════════════════════════════════════════════════════════════
   HOMEPAGE BANDS (admin-ordered — see includes/home_sections.php)
   Every band here is optional and self-contained, so the owner can
   reorder or switch any of them off without leaving a gap behind.
   ══════════════════════════════════════════════════════════════════ */
.sp-alt { background:var(--surface); }
.sec-hd-c { justify-content:center; text-align:center; }
.dot-live { font-size:6px; color:var(--success); vertical-align:middle; }
.hs-fallback { background:linear-gradient(135deg,var(--bg) 0%,var(--surface-2) 100%); }

/* USP strip — the four promises, straight from Settings */
.usp-strip {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--hairline); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.usp { display:flex; align-items:center; gap:14px; padding:22px 28px; background:var(--bg); }
.usp i { font-size:20px; color:var(--gold); flex:none; }
.usp strong { display:block; font-size:13.5px; color:var(--text); margin-bottom:2px; }
.usp span { font-size:12px; color:var(--muted); }

/* Category grid */
.cat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.cat-card {
  position:relative; display:block; overflow:hidden; aspect-ratio:4/5;
  border:1px solid var(--border); border-radius:var(--radius-lg);
  background:var(--surface-2); transition:var(--tr);
}
.cat-card:hover { transform:translateY(-6px); border-color:var(--gold); box-shadow:var(--shadow-lg); }
.cat-card img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.cat-card:hover img { transform:scale(1.06); }
.cat-card::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(5,4,3,.9) 0%,rgba(5,4,3,.15) 55%,transparent 100%);
}
.cat-ico { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:44px; color:var(--gold-dark); }
.cat-meta { position:absolute; left:18px; right:18px; bottom:16px; z-index:2; }
.cat-meta strong { display:block; font-family:var(--fd); font-size:20px; color:#fff; }
.cat-meta em { font-style:normal; font-size:11.5px; color:var(--gold-soft); letter-spacing:.04em; }

/* Horizontal product rail — scroll-snap, no JS */
.pro-rail {
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(240px,1fr);
  gap:24px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:10px; scrollbar-width:thin;
}
.pro-rail > .pro { scroll-snap-align:start; }
.pro-rail::-webkit-scrollbar { height:6px; }
.pro-rail::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }

/* Offer countdown */
.countdown { text-align:right; }
.ct-label { display:block; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.ct-clock { font-family:var(--fb); font-size:22px; font-weight:800; color:var(--gold-soft); letter-spacing:.04em; }
.ct-clock b { background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:4px 8px; display:inline-block; min-width:42px; text-align:center; }

/* Promo tiles */
.promo-split { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }

/* Testimonials / customer-review ribbon
   The ribbon clips a track that holds the cards twice; the animation slides it
   left by exactly one copy (-50%), so the seam never shows. Hover or keyboard
   focus pauses it. Without the .is-live class — few reviews, the owner turned
   drift off, or a reduced-motion request — it degrades to a swipeable row. */
.rev-ribbon {
  position:relative; overflow:hidden; padding:6px 0 10px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
/* The spacing is a margin on each card rather than `gap`, so the track's width
   is an exact multiple of one card-plus-space. Half of that is precisely one
   copy, which is what keeps -50% a seamless loop instead of a half-gap jump. */
.rev-track { display:flex; width:max-content; }
.rev-ribbon.is-live .rev-track { animation:rev-drift var(--rev-dur,48s) linear infinite; will-change:transform; }
.rev-ribbon.is-live:hover .rev-track,
.rev-ribbon.is-live:focus-within .rev-track { animation-play-state:paused; }
@keyframes rev-drift { from { transform:translate3d(0,0,0); } to { transform:translate3d(-50%,0,0); } }
.rev-ribbon:not(.is-live) { overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.rev-track .testi { flex:0 0 min(340px,80vw); margin-right:20px; }
/* Clamped so one very long review cannot make the whole ribbon tall. */
.rev-track .testi blockquote {
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical;
  overflow:hidden; font-size:16px;
}
.rev-vf { color:var(--gold); font-size:11px; margin-left:6px; }
.testi figcaption em a { color:var(--gold-soft); text-decoration:none; }
.testi figcaption em a:hover { text-decoration:underline; }
@media (prefers-reduced-motion:reduce) {
  .rev-ribbon.is-live .rev-track { animation:none; }
  .rev-ribbon.is-live { overflow-x:auto; }
}
.testi {
  scroll-snap-align:start; background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:26px; margin:0;
  display:flex; flex-direction:column; gap:14px;
}
.testi-stars { color:var(--gold); font-size:12px; letter-spacing:2px; }
.testi blockquote { margin:0; font-family:var(--fd); font-size:17px; line-height:1.7; color:var(--text); }
.testi figcaption { display:flex; align-items:center; gap:12px; margin-top:auto; }
.testi figcaption img { width:40px; height:40px; border-radius:50%; object-fit:cover; border:1px solid var(--border); }
.testi figcaption strong { display:block; font-size:13px; color:var(--text); }
.testi figcaption em { font-style:normal; font-size:11.5px; color:var(--muted); }

/* Trust strip */
.trust-strip {
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
  padding:34px 80px; background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.trust-item {
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--border); border-radius:40px; padding:10px 20px;
  background:var(--surface-2); font-size:13px; color:var(--text);
}
.trust-item i { color:var(--gold); font-size:14px; }

/* FAQ accordion — built on <details>, so it works without JavaScript */
.faq-list { max-width:820px; margin:0 auto; }
.faq-item { border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); margin-bottom:12px; overflow:hidden; }
.faq-item summary {
  cursor:pointer; list-style:none; padding:18px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:15px; font-weight:600; color:var(--text);
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary i { color:var(--gold); font-size:12px; transition:transform .25s ease; flex:none; }
.faq-item[open] summary { color:var(--gold-soft); }
.faq-item[open] summary i { transform:rotate(45deg); }
.faq-a { padding:0 22px 20px; color:var(--muted); font-size:14px; line-height:1.85; }

@media(max-width:1100px) {
  .usp-strip { grid-template-columns:repeat(2,1fr); }
  .cat-grid  { grid-template-columns:repeat(3,1fr); }
}
@media(max-width:900px) {
  .countdown { text-align:left; }
}
@media(max-width:799px) {
  .cat-grid { grid-template-columns:repeat(2,1fr); gap:14px; }
  .trust-strip { padding:26px 20px; }
  .usp { padding:18px 20px; }
  .ct-clock { font-size:18px; }
  .ct-clock b { min-width:34px; padding:3px 6px; }
}
@media(max-width:480px) {
  .usp-strip { grid-template-columns:1fr; }
  .cat-meta strong { font-size:16px; }
}

/* ══════════════════════════════════════════════════════════════════
   PRODUCT PAGE — options, bundle, reviews, sticky buy bar
   ══════════════════════════════════════════════════════════════════ */
.pd-hero { padding-bottom:0; }
.pd-price { display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; font-family:var(--fb); font-size:26px; font-weight:800; color:var(--gold-soft); margin:4px 0 14px; }
.pd-save { font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--on-gold); background:var(--grad-gold); padding:4px 10px; border-radius:var(--radius-pill); }
.pd-lbl { display:block; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }

.pd-option-row { margin:20px 0; }
.pd-options { display:flex; flex-direction:column; gap:8px; }
.pd-opt {
  display:flex; align-items:center; gap:10px; cursor:pointer;
  padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); transition:var(--tr-fast);
}
.pd-opt:hover { border-color:var(--hairline); background:var(--surface-2); }
.pd-opt span { flex:1; font-size:14px; color:var(--text); }
.pd-opt b { font-family:var(--fb); color:var(--gold-soft); font-size:14.5px; }
.pd-opt input { accent-color:var(--gold); }
.pd-opt:has(input:checked) { border-color:var(--gold); background:var(--gold-tint); }

.pd-stock-note.urgent { color:var(--danger); font-weight:700; }
.pd-oos-note {
  background:rgba(193,57,74,.12); color:#e46b7a; border:1px solid rgba(193,57,74,.35);
  padding:12px 16px; border-radius:var(--radius-sm); font-weight:600; margin:18px 0;
}

/* ── Frequently bought together ─────────────────────────────── */
.bundle-box {
  max-width:1000px; margin:0 auto; padding:26px; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between; gap:26px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
}
.bundle-items { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.bundle-item { width:120px; }
.bundle-item img { width:120px; height:150px; object-fit:cover; border-radius:var(--radius-sm); border:1px solid var(--border); }
.bundle-item-txt { margin-top:8px; }
.bundle-item-txt a { display:block; font-size:12.5px; color:var(--text); line-height:1.4; margin-bottom:4px; }
.bundle-item-txt a:hover { color:var(--gold); }
.bundle-item-txt b { font-family:var(--fb); font-size:13px; color:var(--gold-soft); }
.bundle-plus { font-size:20px; color:var(--gold); font-weight:300; }
.bundle-total { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.bundle-was { text-decoration:line-through; color:var(--muted); font-size:14px; }
.bundle-now { font-family:var(--fb); font-size:24px; font-weight:800; color:var(--gold-soft); }
.bundle-badge {
  font-size:11.5px; font-weight:700; letter-spacing:.05em; color:var(--success);
  border:1px solid var(--success); border-radius:var(--radius-pill); padding:3px 10px;
}
.bundle-total .btn { margin-top:4px; }

/* ── Reviews ────────────────────────────────────────────────── */
.reviews-wrap { max-width:900px; margin:0 auto; padding:0 24px; }
.review-list { display:flex; flex-direction:column; gap:14px; margin-bottom:30px; }
.review-item { border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px 18px; background:var(--surface); }
.review-top { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
.review-top strong { color:var(--text); font-size:14.5px; }
.review-verified { font-size:11.5px; color:var(--success); font-weight:600; }
.review-stars { margin-bottom:8px; font-size:13px; color:var(--gold-soft); }
.review-stars i.off { color:var(--border); }
.review-item p { margin:0 0 8px; color:var(--text); line-height:1.7; font-size:14px; }
.review-date { font-size:12px; color:var(--muted); }

.review-form-box { border-top:1px solid var(--border); padding-top:26px; }
.review-form-box h3 { font-family:var(--fd); font-size:22px; color:var(--text); margin-bottom:16px; }
.review-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; }
.review-form-box input[type=text], .review-form-box input[type=tel], .review-form-box textarea {
  width:100%; padding:12px 14px; border-radius:var(--radius-sm); border:1px solid var(--border);
  background:var(--surface-2); color:var(--text); font-family:var(--fb); font-size:14px;
}
.review-form-box input:focus, .review-form-box textarea:focus { outline:none; border-color:var(--gold); }
.review-form-box textarea { resize:vertical; margin-bottom:16px; }
.review-star-input { display:flex; gap:8px; font-size:22px; color:var(--gold-soft); cursor:pointer; margin-bottom:16px; }
#review-msg { font-size:12.5px; margin-top:10px; }
#review-msg.bad { color:#e46b7a; }
#review-msg.good { color:var(--success); }

/* ── Sticky buy bar (small screens only) ────────────────────── */
.pd-sticky { display:none; }
@media(max-width:900px) {
  .bundle-box { padding:20px; }
  .bundle-total { width:100%; }
  .bundle-total .btn { width:100%; justify-content:center; }
  .review-grid { grid-template-columns:1fr; }

  .pd-sticky {
    display:flex; align-items:center; gap:12px; position:fixed; left:0; right:0; bottom:0; z-index:60;
    padding:10px 14px; background:rgba(var(--bg-rgb), .96); border-top:1px solid var(--hairline);
    backdrop-filter:blur(10px); transform:translateY(105%); transition:transform var(--tr);
  }
  .pd-sticky.show { transform:translateY(0); }
  .pd-sticky-info { flex:1; min-width:0; }
  .pd-sticky-info strong { display:block; font-size:13px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pd-sticky-info span { font-family:var(--fb); font-size:14px; font-weight:800; color:var(--gold-soft); }
  .pd-sticky .btn { padding:11px 18px; font-size:13px; white-space:nowrap; }
}
@media(max-width:480px) {
  .bundle-item, .bundle-item img { width:96px; }
  .bundle-item img { height:120px; }
}

/* ══════════════════════════════════════════════════════════════════
   CART & CHECKOUT — dark-luxe pass, free-delivery bar, upsell rail
   ══════════════════════════════════════════════════════════════════ */
.ph-count { font-size:16px; color:var(--muted); font-family:var(--fb); font-weight:500; }
.cart-err-wrap { max-width:1200px; margin:20px auto 0; padding:0 24px; }
.cart-err {
  background:rgba(193,57,74,.12); color:#e46b7a; border:1px solid rgba(193,57,74,.35);
  padding:14px 18px; border-radius:var(--radius-sm); font-weight:600;
}

/* Free-delivery progress. The single strongest lever on average order value,
   so it sits above the table where it cannot be missed. */
.fsb { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px 18px; margin-bottom:20px; }
.fsb.won { border-color:var(--success); }
.fsb-top { display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--text); margin-bottom:10px; }
.fsb-top i { color:var(--gold); }
.fsb.won .fsb-top i { color:var(--success); }
.fsb-track { height:6px; border-radius:99px; background:var(--surface-3); overflow:hidden; }
.fsb-fill { display:block; height:100%; border-radius:99px; background:var(--grad-gold); transition:width var(--tr); }
.fsb.won .fsb-fill { background:var(--success); }

.cart-item-cell { display:flex; align-items:center; gap:14px; }
.cart-item-img { width:64px; height:80px; border-radius:var(--radius-sm); object-fit:cover; border:1px solid var(--border); }
a.cart-item-name { display:block; color:var(--text); }
a.cart-item-name:hover { color:var(--gold); }
.cart-price, .line-total { font-family:var(--fb); font-weight:700; }
.cart-price { color:var(--gold-soft); }
.line-total { color:var(--text); }
.sum-row { border-bottom:1px solid var(--border-soft); color:var(--muted); }
.sum-row.discount { color:var(--success); }
.qty-ctrl input { background:var(--surface-2); color:var(--text); }
.cart-actions { display:flex; justify-content:space-between; align-items:center; margin-top:24px; flex-wrap:wrap; gap:12px; }

/* Cart upsell rail */
.cart-upsell { grid-column: 1 / -1; }
.cart-upsell { margin-top:38px; border-top:1px solid var(--border); padding-top:24px; }
.cart-upsell h3 { font-family:var(--fd); font-size:20px; color:var(--text); margin-bottom:16px; }
.cu-rail { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.cu-item { text-align:center; }
.cu-item img { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--radius-sm); border:1px solid var(--border); }
.cu-name { display:block; font-size:12.5px; color:var(--text); margin:8px 0 4px; line-height:1.4; }
.cu-name:hover { color:var(--gold); }
.cu-item b { font-family:var(--fb); font-size:13px; color:var(--gold-soft); }
.cu-add { width:100%; justify-content:center; margin-top:8px; padding:8px 10px; font-size:12px; }

/* Coupon + checkout form */
.coupon-box { margin:14px 0; padding-top:14px; border-top:1px solid var(--border); }
.coupon-form { display:flex; gap:8px; }
.coupon-form input {
  flex:1; padding:11px 12px; border-radius:var(--radius-sm); border:1px solid var(--border);
  background:var(--surface-2); color:var(--text); font-family:var(--fb); text-transform:uppercase;
}
.coupon-form .btn { padding:10px 16px; white-space:nowrap; }
.coupon-applied {
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:var(--gold-tint); border:1px solid var(--hairline); padding:10px 14px; border-radius:var(--radius-sm);
}
.coupon-applied span { font-weight:600; color:var(--gold-soft); font-size:13px; }
.coupon-applied button { background:none; border:none; color:var(--muted); cursor:pointer; font-size:12.5px; text-decoration:underline; }
#coupon-msg { font-size:12px; margin-top:6px; }

.checkout-form { margin-top:20px; border-top:1px solid var(--border); padding-top:18px; }
.cf-row { margin-bottom:14px; }
.cf-row input, .cf-row select, .cf-row textarea {
  width:100%; padding:11px 14px; border-radius:var(--radius-sm); border:1px solid var(--border);
  background:var(--surface-2); color:var(--text); font-family:var(--fb); font-size:14px;
}
.cf-row textarea { resize:vertical; }
.cf-row input:focus, .cf-row select:focus, .cf-row textarea:focus { outline:none; border-color:var(--gold); }
.cf-note {
  background:var(--gold-tint); color:var(--gold-soft); border:1px solid var(--hairline);
  padding:12px 14px; border-radius:var(--radius-sm); font-size:13px; margin-bottom:14px; line-height:1.6;
}

/* Advance delivery-charge panel — shown the moment "Outside Dhaka" is picked.
   This is the one condition of the order a customer must understand before
   they pay, so it is deliberately the loudest thing in the checkout form. */
.adv-note {
  background:linear-gradient(180deg,var(--gold-tint),rgba(0,0,0,0));
  border:1px solid var(--gold-soft); border-left:3px solid var(--gold);
  border-radius:var(--radius); padding:16px 18px; margin:0 0 16px;
  animation:adv-in .28s ease both;
}
@keyframes adv-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.adv-head { display:flex; align-items:flex-start; gap:12px; }
.adv-ico {
  flex:0 0 34px; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--gold); color:#12100d; font-size:14px;
}
.adv-txt { min-width:0; }
.adv-txt strong { display:block; font-family:var(--fd); font-size:15.5px; color:var(--text); }
.adv-txt em { display:block; font-style:normal; font-size:12.5px; color:var(--muted); line-height:1.6; margin-top:3px; }
.adv-amt {
  margin-left:auto; text-align:center; white-space:nowrap; background:var(--gold); color:#12100d;
  font-weight:800; font-size:14px; padding:6px 12px; border-radius:999px;
}
.adv-amt small { display:block; font-size:9.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; opacity:.72; }
.adv-steps { margin:14px 0 0; padding-left:20px; display:grid; gap:9px; font-size:13px; color:var(--text); line-height:1.7; }
.adv-steps li::marker { color:var(--gold); font-weight:700; }
.adv-num { display:inline-flex; align-items:center; gap:7px; flex-wrap:wrap; margin-right:8px; }
.adv-num b { font-family:var(--fb); letter-spacing:.05em; color:var(--gold-soft); }
.adv-copy {
  background:transparent; border:1px solid var(--border); color:var(--muted);
  border-radius:999px; font-size:11px; padding:3px 10px; cursor:pointer; transition:var(--tr);
}
.adv-copy:hover { color:var(--gold); border-color:var(--gold-soft); }
.adv-copy.is-copied { color:var(--gold); border-color:var(--gold); }
.adv-foot { display:flex; gap:8px; align-items:flex-start; margin:13px 0 0; font-size:12px; color:var(--muted); line-height:1.65; }
.adv-foot i { color:var(--gold); margin-top:3px; }
@media(max-width:420px) {
  .adv-head { flex-wrap:wrap; }
  .adv-amt { margin-left:46px; }
}
.co-submit { width:100%; justify-content:center; font-size:15px; padding:15px; }
.co-safe { font-size:11.5px; color:var(--muted); text-align:center; margin-top:10px; }
.cart-pays { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:18px; }

@media(max-width:900px) {
  .cu-rail { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:600px) {
  /* The table collapses into stacked cards: five columns cannot work at 360px. */
  .cart-table thead { display:none; }
  .cart-table tbody tr { display:grid; grid-template-columns:1fr auto; gap:8px; padding:14px 0; position:relative; }
  .cart-table td { padding:0; }
  .cart-table td:first-child { grid-column:1/-1; }
  .cart-table td:last-child { position:absolute; top:12px; right:0; }
}
/* ==========================================================================
   ORDER TRACKING, ACCOUNT & CMS PAGES
   ==========================================================================
   Three pages that all show "your stuff" rather than product marketing, so they
   share one calm layout: a narrow column, generous line height, gold used only
   to mark progress and never for decoration.
   ========================================================================== */

.trk-wrap, .acc-wrap { max-width: 900px; margin: 0 auto 64px; padding: 0 20px; }
.cms-body { max-width: 820px; margin: 0 auto 40px; padding: 0 20px; color: var(--text);
  font-size: 1.02rem; line-height: 1.9; }
.cms-body h2, .cms-body h3 { font-family: var(--font-display, inherit); color: var(--gold);
  margin: 32px 0 12px; line-height: 1.3; }
.cms-body h2 { font-size: 1.5rem; }
.cms-body h3 { font-size: 1.2rem; }
.cms-body p { margin: 0 0 16px; color: var(--muted); }
.cms-body ul, .cms-body ol { margin: 0 0 18px 20px; color: var(--muted); }
.cms-body li { margin-bottom: 8px; }
.cms-body a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.cms-body table { width: 100%; border-collapse: collapse; margin: 0 0 20px; }
.cms-body th, .cms-body td { padding: 10px 12px; border: 1px solid var(--border-soft);
  text-align: left; color: var(--muted); }
.cms-body th { background: var(--surface-2); color: var(--text); }
.cms-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.cms-foot { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  padding: 0 20px 72px; }

/* --- lookup / sign-in form ---------------------------------------------- */
.trk-form { background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); padding: 24px; margin-bottom: 24px; }
.trk-form .btn { width: 100%; margin-top: 6px; }
.acc-addr-form { margin-top: 8px; }

/* --- one order ---------------------------------------------------------- */
.trk-card { background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); padding: 24px; margin-bottom: 24px;
  box-shadow: var(--shadow-lg); }
.trk-head { display: flex; flex-wrap: wrap; gap: 20px 40px; padding-bottom: 20px;
  border-bottom: 1px solid var(--hairline); margin-bottom: 26px; }
.trk-head > div { display: flex; flex-direction: column; gap: 4px; }
.trk-k { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.trk-no { font-size: 1.05rem; color: var(--gold); letter-spacing: .04em; }
.trk-badge { display: inline-block; padding: 4px 12px; border-radius: var(--radius-pill);
  font-size: .78rem; border: 1px solid var(--hairline); color: var(--text);
  background: var(--surface-2); width: max-content; }
.trk-badge.s-delivered { background: var(--gold-tint); color: var(--gold); border-color: var(--gold); }
.trk-badge.s-cancelled { background: rgba(200,60,60,.12); color: #e07070; border-color: rgba(200,60,60,.4); }

/* Progress rail: a horizontal row on desktop, a vertical list on phones,
   because five labels never fit across a 360px screen. */
.trk-rail { list-style: none; display: flex; margin: 0 0 24px; padding: 0; }
.trk-rail li { flex: 1; display: flex; flex-direction: column; align-items: center;
  text-align: center; position: relative; gap: 6px; }
.trk-rail li::before { content: ''; position: absolute; top: 17px; left: 0; right: 50%;
  height: 2px; background: var(--border-soft); }
.trk-rail li::after { content: ''; position: absolute; top: 17px; left: 50%; right: 0;
  height: 2px; background: var(--border-soft); }
.trk-rail li:first-child::before, .trk-rail li:last-child::after { display: none; }
.trk-rail li.done::before, .trk-rail li.done::after,
.trk-rail li.now::before { background: var(--gold); }
.trk-dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--border-soft); background: var(--surface-2); color: var(--muted);
  position: relative; z-index: 1; font-size: .85rem; }
.trk-rail li.done .trk-dot { background: var(--gold-tint); border-color: var(--gold); color: var(--gold); }
.trk-rail li.now .trk-dot { background: var(--grad-gold); border-color: var(--gold);
  color: var(--on-gold); box-shadow: 0 0 0 6px var(--gold-glow, rgba(200,162,74,.15)); }
.trk-lbl { font-size: .8rem; color: var(--text); }
.trk-rail li.todo .trk-lbl { color: var(--muted); }
.trk-at { font-size: .7rem; color: var(--muted); }
.trk-cancelled { display: flex; gap: 14px; align-items: flex-start; padding: 16px;
  border-radius: var(--radius-sm); background: rgba(200,60,60,.08);
  border: 1px solid rgba(200,60,60,.3); margin-bottom: 22px; color: #e59a9a; }
.trk-cancelled p { margin: 4px 0 0; font-size: .9rem; }
.trk-courier { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text);
  margin-bottom: 20px; font-size: .92rem; }
.trk-courier i { color: var(--gold); }

.trk-items { list-style: none; margin: 0 0 20px; padding: 0; }
.trk-items li { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px;
  padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.trk-items li a { color: var(--text); }
.trk-items li a:hover { color: var(--gold); }
.trk-items li b { grid-row: span 2; align-self: center; color: var(--gold); white-space: nowrap; }
.trk-meta { font-size: .82rem; color: var(--muted); }
.trk-sum { margin-bottom: 20px; }
.trk-ship, .trk-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px;
  border-radius: var(--radius-sm); background: var(--surface-2); color: var(--muted);
  font-size: .9rem; line-height: 1.7; }
.trk-ship { margin-bottom: 12px; }
.trk-ship i, .trk-note i { color: var(--gold); margin-top: 4px; }
.trk-ship b { color: var(--text); }
.trk-cta, .trk-help { display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  justify-content: center; margin-bottom: 20px; }
.trk-help { padding: 18px; border: 1px dashed var(--border-soft);
  border-radius: var(--radius-lg); color: var(--muted); font-size: .92rem; }

/* --- account ------------------------------------------------------------ */
.acc-top { display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); padding: 20px 24px; margin-bottom: 8px; }
.acc-stat { display: flex; flex-direction: column; gap: 2px; min-width: 110px; }
.acc-stat b { color: var(--gold); font-size: 1.1rem; }
.acc-stat span { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.acc-logout { margin-left: auto; }
.acc-h { font-family: var(--font-display, inherit); font-size: 1.35rem; color: var(--text);
  margin: 34px 0 14px; }
.acc-orders { display: flex; flex-direction: column; gap: 10px; }
.acc-order { display: grid; grid-template-columns: 1.1fr 1fr auto auto 16px; gap: 12px;
  align-items: center; padding: 14px 18px; background: var(--surface);
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm); color: var(--text);
  transition: border-color .2s, transform .2s; }
.acc-order:hover { border-color: var(--gold); transform: translateX(3px); }
.ao-no { color: var(--gold); letter-spacing: .03em; }
.ao-date { font-size: .85rem; color: var(--muted); }
.ao-total { font-weight: 600; }
.acc-order i { color: var(--muted); font-size: .75rem; }
.acc-addrs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.acc-addr { display: flex; flex-direction: column; gap: 4px; padding: 16px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); font-size: .9rem; color: var(--muted); }
.acc-addr b { color: var(--gold); }
.acc-addr-del { align-self: flex-start; margin-top: 8px; background: none; border: none;
  color: var(--muted); cursor: pointer; font-size: .8rem; padding: 0; }
.acc-addr-del:hover { color: #e07070; }

@media (max-width: 700px) {
  .trk-rail { flex-direction: column; align-items: flex-start; gap: 4px; }
  .trk-rail li { flex-direction: row; align-items: center; gap: 12px; text-align: left;
    width: 100%; padding: 6px 0; }
  .trk-rail li::before { top: 0; bottom: 50%; left: 17px; right: auto; width: 2px; height: auto; }
  .trk-rail li::after { top: 50%; bottom: 0; left: 17px; right: auto; width: 2px; height: auto; }
  .trk-at { margin-left: auto; }
  .acc-order { grid-template-columns: 1fr auto; }
  .acc-order i { display: none; }
  .acc-logout { margin-left: 0; width: 100%; }
  .acc-logout .btn { width: 100%; }
}

/* --- thank-you page ------------------------------------------------------ */
.os-hero { text-align: center; padding: 28px 20px 34px; margin-bottom: 24px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); }
.os-hero > i { font-size: 54px; color: var(--gold); margin-bottom: 14px; display: block; }
.os-hero h2 { font-family: var(--font-display, inherit); font-size: 1.6rem; color: var(--text);
  margin: 0 0 10px; }
.os-hero p { color: var(--muted); margin: 0 auto 20px; max-width: 460px; line-height: 1.8; }
.os-ref { display: inline-flex; flex-direction: column; gap: 4px; align-items: center;
  padding: 14px 26px; border: 1px dashed var(--gold); border-radius: var(--radius-sm);
  background: var(--gold-tint); }
.os-ref .trk-no { font-size: 1.25rem; letter-spacing: .06em; }
.os-ref small { color: var(--muted); font-size: .76rem; }

.ib.is-on { color: var(--gold); }

/* ==========================================================================
   RECENT-ORDER SOCIAL PROOF
   ==========================================================================
   Bottom-left, opposite the chat and cart buttons so nothing overlaps. Slides
   in, sits for six seconds, slides out; the whole thing is off-screen (not
   display:none) so it never affects layout or scroll height.
   ========================================================================== */
#sproof {
  position: fixed; left: 20px; bottom: 24px; z-index: 840;
  display: flex; align-items: center; gap: 12px;
  max-width: min(340px, calc(100vw - 40px));
  padding: 10px 38px 10px 10px;
  background: var(--surface, #14120F);
  border: 1px solid var(--line, rgba(200,162,74,.22));
  border-radius: var(--radius-sm, 10px);
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
  transform: translateY(140%); opacity: 0; pointer-events: none;
  transition: transform .5s cubic-bezier(.2,.7,.3,1), opacity .4s ease;
}
#sproof.on { transform: translateY(0); opacity: 1; pointer-events: auto; }
#sproof img {
  width: 46px; height: 58px; object-fit: cover; flex: 0 0 auto;
  border-radius: 6px; background: rgba(255,255,255,.04);
}
#sproof .sp-txt { min-width: 0; line-height: 1.35; }
#sproof .sp-txt b {
  display: block; font-size: .78rem; font-weight: 600; letter-spacing: .01em;
  color: var(--text, #F5F1E8);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#sproof .sp-txt span {
  display: block; font-size: .72rem; color: var(--muted, #9C948A); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#sproof #sproof-x {
  position: absolute; top: 6px; right: 8px;
  background: none; border: none; cursor: pointer; padding: 4px;
  font-size: .7rem; line-height: 1; color: var(--muted, #9C948A);
}
#sproof #sproof-x:hover { color: var(--gold, #C8A24A); }
@media (max-width: 560px) {
  /* Above the mobile bottom bar, and narrow enough to leave the cart button
     reachable — proof must never block the buy button. */
  #sproof { left: 12px; bottom: 80px; max-width: calc(100vw - 96px); }
  #sproof img { width: 38px; height: 48px; }
}

/* ── Filled star for review rating (solid, not outline) ─────────
   icons.css only ships an outline .fa-star (fill:none). This adds a
   second, solid-fill version of the exact same star shape, activated
   only when .star-filled is also present — so it doesn't touch or
   override the generated icons.css file. */
.fa-star.star-filled{
  --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='m12 3.6 2.55 5.3 5.65.8-4.1 4 .98 5.7L12 16.7l-5.08 2.7.98-5.7-4.1-4 5.65-.8L12 3.6Z'/></svg>");
}
#review-star-input i.fa-star {
  color: #4a453c; /* dim, unfilled state */
  cursor: pointer;
  transition: color .15s ease;
}
#review-star-input i.fa-star.star-filled {
  color: var(--gold);
}
#review-star-input i.fa-star:hover {
  color: var(--gold-soft);
}
/* ── MOBILE FILTER DRAWER ─────────────────────────────────── */
.mf-mobile-btns { display:none; gap:8px; }
.mf-drawer-head { display:none; }

@media(max-width:799px) {
  .mf-mobile-btns { display:flex; }
  .mf-mobile-btns button {
    width:40px; height:40px; border-radius:10px;
    border:1px solid var(--border); background:var(--surface);
    color:var(--dark); font-size:15px; cursor:pointer;
  }
  .mf-mobile-btns button:hover { background:var(--teal); color:var(--navy); }
    .mf-search-wrap { position:relative; display:flex; align-items:center; }
  .mf-search-form {
    position:absolute; right:0; top:48px;
    width:0; overflow:hidden;
    background:var(--surface); border:1px solid var(--border); border-radius:10px;
    box-shadow:var(--shadow-md);
    transition:width .3s ease;
    z-index:10;
  }
  .mf-search-form.open { width:210px; }
  .mf-search-form input {
    width:100%; border:none; outline:none; background:transparent;
    padding:10px 14px; font-size:13px; color:var(--dark); font-family:var(--fb);
  }

    .sidebar {
    position:fixed; inset:0 0 0 auto; right:-100%;
    width:78%; max-width:260px; height:100vh;
    background:var(--surface); z-index:2000;
    overflow-y:auto; padding:16px;
    transition:right .35s ease;
    box-shadow:var(--shadow-lg);
  }
  .sidebar .sf-box { padding:16px; margin-bottom:14px; }
  .sidebar.open { right:0; }
  .mf-drawer-head {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:16px; padding-bottom:14px;
    border-bottom:1px solid var(--border);
  }
  .mf-drawer-head h4 { font-family:var(--fd); font-size:20px; color:var(--dark); }
  .mf-drawer-head button {
    width:34px; height:34px; border-radius:50%; border:none;
    background:var(--surface-2); color:var(--dark); font-size:14px; cursor:pointer;
  }

  #mf-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.5);
    z-index:1999; opacity:0; visibility:hidden;
    transition:opacity .3s ease, visibility .3s ease;
  }
  #mf-overlay.open { opacity:1; visibility:visible; }
}