/* ==========================================================================
   Dermateec — storefront theme
   Clean e-commerce layout: uppercase letterspaced navigation, mega-menu,
   compact product cards in carousels, gold accent from the brand mark.
   ========================================================================== */

:root{
  /* Brand */
  --gold:        #F5A800;
  --gold-dark:   #D18E00;
  --gold-soft:   #FFF6E0;
  --gold-line:   #F2DFAE;

  /* Neutrals */
  --ink:         #15171C;
  --ink-2:       #363B45;
  --muted:       #6E7480;
  --muted-2:     #9CA3AE;
  --line:        #E6E3DC;
  --line-2:      #F1EEE8;
  --bg:          #FFFFFF;
  --bg-2:        #FAF9F6;
  --bg-3:        #F4F1EA;

  --sale:        #C2410C;
  --ok:          #15805C;
  --wa:          #25D366;

  /* Type — geometric sans for headings, neutral sans for text */
  --head: "Jost", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --r-xs: 4px;
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;

  --shadow-s: 0 1px 2px rgba(21,23,28,.05);
  --shadow-m: 0 4px 16px rgba(21,23,28,.07);
  --shadow-l: 0 10px 40px rgba(21,23,28,.12);

  --wrap: 1320px;
  --gut: 22px;
  --bar-h: 38px;
  --nav-h: 76px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,picture,svg,video{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit }
input,select,textarea{ font:inherit; color:inherit }
h1,h2,h3,h4{ margin:0; font-family:var(--head); font-weight:500; line-height:1.2; letter-spacing:-.01em }
p{ margin:0 0 1em } p:last-child{ margin-bottom:0 }
ul{ margin:0; padding:0; list-style:none }
s{ text-decoration:line-through }
:focus-visible{ outline:2px solid var(--gold); outline-offset:2px }
::selection{ background:var(--gold); color:var(--ink) }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gut) }
.section{ padding:60px 0 }
.section--sm{ padding:40px 0 }
.section--alt{ background:var(--bg-2) }

/* ---------- Type ---------- */
.h1{ font-size:clamp(1.9rem,3.6vw,2.9rem); font-weight:500 }
.h2{ font-size:clamp(1.4rem,2.4vw,2rem); font-weight:500 }
.h3{ font-size:1.05rem; font-weight:500 }
.lead{ font-size:1.02rem; color:var(--muted); line-height:1.7 }
.small{ font-size:.82rem }
.muted{ color:var(--muted) }
.center{ text-align:center }

/* Section heading — centred, uppercase, with a short gold rule (reference pattern) */
.sec-head{ text-align:center; margin-bottom:34px }
.sec-head h2{
  font-size:clamp(1.25rem,2.2vw,1.75rem); font-weight:500; text-transform:uppercase;
  letter-spacing:.09em; margin-bottom:14px;
}
.sec-head .rule{ width:56px; height:2px; background:var(--gold); margin:0 auto 14px }
.sec-head p{ color:var(--muted); max-width:620px; margin:0 auto; font-size:.94rem }
.sec-head--row{ display:flex; align-items:flex-end; justify-content:space-between;
  text-align:left; gap:20px; flex-wrap:wrap }
.sec-head--row .rule{ margin:0 0 12px }
.sec-head--row p{ margin:0 }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 26px; border-radius:var(--r-sm); font-weight:600; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.1em; transition:.2s; white-space:nowrap;
  font-family:var(--body);
}
.btn svg{ width:16px; height:16px; flex:none }
.btn--dark{ background:var(--ink); color:#fff }
.btn--dark:hover{ background:#000 }
.btn--gold{ background:var(--gold); color:var(--ink) }
.btn--gold:hover{ background:var(--gold-dark) }
.btn--wa{ background:var(--wa); color:#fff }
.btn--wa:hover{ background:#1CB955 }
.btn--outline{ border:1.5px solid var(--ink); color:var(--ink); background:transparent }
.btn--outline:hover{ background:var(--ink); color:#fff }
.btn--light{ border:1.5px solid rgba(255,255,255,.5); color:#fff; background:transparent }
.btn--light:hover{ background:#fff; color:var(--ink) }
.btn--sm{ padding:9px 16px; font-size:.7rem }
.btn--lg{ padding:16px 34px; font-size:.82rem }
.btn--block{ width:100% }

.link-more{
  font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.11em;
  border-bottom:1.5px solid var(--gold); padding-bottom:3px; white-space:nowrap;
}
.link-more:hover{ color:var(--gold-dark) }

/* ==========================================================================
   Announcement bar
   ========================================================================== */
.announce{
  background:var(--ink); color:rgba(255,255,255,.9); height:var(--bar-h);
  display:flex; align-items:center; font-size:.76rem;
}
.announce .wrap{ display:flex; align-items:center; gap:16px }
.announce-social{ display:flex; gap:14px; flex:none }
.announce-social a{ opacity:.75; transition:.2s }
.announce-social a:hover{ opacity:1; color:var(--gold) }
.announce-social svg{ width:15px; height:15px }
.announce-msg{ flex:1; text-align:center; letter-spacing:.03em }
.announce-msg a{ color:var(--gold); font-weight:600 }
.announce-right{ flex:none; display:flex; gap:16px; font-size:.73rem;
  text-transform:uppercase; letter-spacing:.08em }
.announce-right a{ opacity:.8 } .announce-right a:hover{ opacity:1; color:var(--gold) }

/* ==========================================================================
   Header + mega menu
   ========================================================================== */
.site-header{ position:sticky; top:0; z-index:100; background:#fff;
  border-bottom:1px solid var(--line-2); transition:box-shadow .2s }
.site-header.is-stuck{ box-shadow:0 2px 14px rgba(21,23,28,.08) }

.header-main{ height:var(--nav-h); display:flex; align-items:center; gap:24px }
.brand{ display:flex; align-items:center; gap:11px; flex:none }
.brand img{ height:46px; width:auto }
.brand-txt{ display:flex; flex-direction:column; line-height:1.05 }
.brand-name{ font-family:var(--head); font-size:1.5rem; font-weight:600; letter-spacing:.03em }
.brand-sub{ font-size:.55rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted-2); font-weight:600 }

.header-search{ flex:1; max-width:460px; position:relative }
.header-search input{
  width:100%; padding:11px 44px 11px 16px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--bg-2); font-size:.88rem;
}
.header-search input:focus{ outline:none; border-color:var(--gold); background:#fff }
.header-search button{ position:absolute; right:4px; top:4px; bottom:4px; width:38px;
  display:flex; align-items:center; justify-content:center; color:var(--muted) }
.header-search svg{ width:17px; height:17px }

.header-actions{ display:flex; align-items:center; gap:10px; flex:none; margin-left:auto }
.icon-btn{ width:42px; height:42px; border-radius:var(--r-sm); display:flex;
  align-items:center; justify-content:center; color:var(--ink-2); transition:.18s }
.icon-btn:hover{ background:var(--bg-3) }
.icon-btn svg{ width:20px; height:20px }

/* --- primary nav bar --- */
.navbar{ border-top:1px solid var(--line-2); background:#fff }
.nav-list{ display:flex; align-items:center; justify-content:center; gap:0;
  flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none }
.nav-list::-webkit-scrollbar{ display:none }
.nav-item{ flex:none }
.nav-item{ position:static }
.nav-link{
  display:flex; align-items:center; gap:5px; padding:14px 13px; white-space:nowrap;
  font-size:.735rem; font-weight:600; text-transform:uppercase; letter-spacing:.085em;
  color:var(--ink-2); transition:.18s; position:relative;
}
.nav-link:hover,.nav-item:hover>.nav-link{ color:var(--gold-dark) }
.nav-link.active{ color:var(--ink) }
.nav-link.active::after{ content:""; position:absolute; left:13px; right:13px; bottom:8px;
  height:2px; background:var(--gold) }
.nav-link .caret{ width:9px; height:9px; opacity:.55; transition:transform .2s }
.nav-item:hover .caret{ transform:rotate(180deg) }

/* --- mega panel --- */
.mega{
  position:absolute; left:0; right:0; top:100%; background:#fff;
  border-top:1px solid var(--line-2); box-shadow:0 18px 40px rgba(21,23,28,.13);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .2s, transform .2s, visibility .2s; z-index:90;
}
.nav-item:hover .mega,.nav-item:focus-within .mega{ opacity:1; visibility:visible; transform:none }
.mega-inner{ max-width:var(--wrap); margin:0 auto; padding:30px var(--gut) 34px;
  display:flex; align-items:flex-start; gap:26px 34px; flex-wrap:wrap }
.mega-col{ flex:1 1 150px; min-width:150px; max-width:230px }
.mega-feature{ flex:0 0 240px }
.mega-col h4{
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.13em;
  color:var(--gold-dark); margin-bottom:14px; padding-bottom:9px;
  border-bottom:1px solid var(--line-2); font-family:var(--body);
}
.mega-col li{ margin-bottom:2px }
.mega-col li a{ display:flex; align-items:baseline; gap:7px; padding:5px 0;
  font-size:.85rem; color:var(--ink-2); transition:.16s }
.mega-col li a:hover{ color:var(--gold-dark); transform:translateX(3px) }
.mega-col li a .n{ font-size:.68rem; color:var(--muted-2) }
.mega-feature{ background:var(--bg-2); border-radius:var(--r); padding:18px; text-align:center }
.mega-feature img{ width:100%; aspect-ratio:4/5; object-fit:contain; margin-bottom:12px }
.mega-feature .tag{ display:inline-block; font-size:.62rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold-dark); margin-bottom:6px }
.mega-feature b{ display:block; font-size:.86rem; line-height:1.35; margin-bottom:10px }

/* --- mobile drawer --- */
.nav-toggle{ display:none; width:42px; height:42px; align-items:center; justify-content:center;
  border-radius:var(--r-sm); border:1px solid var(--line) }
.nav-toggle svg{ width:20px; height:20px }
.drawer-backdrop{ position:fixed; inset:0; background:rgba(21,23,28,.5); z-index:110;
  opacity:0; visibility:hidden; transition:.25s }
.drawer-backdrop.open{ opacity:1; visibility:visible }
.drawer{
  position:fixed; top:0; left:0; bottom:0; width:min(88vw,380px); background:#fff; z-index:120;
  transform:translateX(-100%); transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
}
.drawer.open{ transform:none }
.drawer-head{ display:flex; align-items:center; gap:12px; padding:16px 18px;
  border-bottom:1px solid var(--line-2) }
.drawer-head img{ height:36px }
.drawer-head .close{ margin-left:auto; width:36px; height:36px; display:flex;
  align-items:center; justify-content:center }
.drawer-head .close svg{ width:18px; height:18px }
.drawer-body{ flex:1; overflow-y:auto; padding:8px 0 24px }
.acc-item{ border-bottom:1px solid var(--line-2) }
.acc-head{ width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:15px 18px; font-size:.8rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.09em; text-align:left }
.acc-head svg{ width:15px; height:15px; transition:transform .22s; flex:none; color:var(--muted) }
.acc-item.open .acc-head svg{ transform:rotate(180deg) }
.acc-item.open .acc-head{ color:var(--gold-dark) }
.acc-body{ max-height:0; overflow:hidden; transition:max-height .3s ease; background:var(--bg-2) }
.acc-body-in{ padding:6px 18px 14px }
.acc-body h5{ font-size:.64rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--gold-dark); margin:12px 0 6px }
.acc-body a{ display:block; padding:7px 0; font-size:.86rem; color:var(--ink-2) }
.drawer-foot{ padding:16px 18px; border-top:1px solid var(--line-2) }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{ position:relative; background:var(--bg-3); overflow:hidden }
.hero-slides{ display:flex; transition:transform .55s cubic-bezier(.4,0,.2,1) }
.hero-slide{ min-width:100%; }
.hero-grid{ display:grid; grid-template-columns:1.02fr .98fr; align-items:center;
  gap:40px; min-height:466px; padding:44px 0 }
.hero-eyebrow{ display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-dark); margin-bottom:16px }
.hero h1,.hero h2{ font-size:clamp(1.9rem,3.7vw,3.05rem); font-weight:500;
  line-height:1.12; margin-bottom:16px }
.hero p{ color:var(--muted); font-size:1rem; max-width:470px; margin-bottom:26px }
.hero-btns{ display:flex; gap:11px; flex-wrap:wrap }
.hero-img{ display:flex; align-items:center; justify-content:center }
.hero-img img{ max-height:420px; width:auto; object-fit:contain;
  filter:drop-shadow(0 24px 44px rgba(21,23,28,.16)) }
.hero-dots{ position:absolute; left:0; right:0; bottom:18px; display:flex;
  justify-content:center; gap:7px; z-index:3 }
.hero-dots button{ width:26px; height:3px; background:rgba(21,23,28,.2); border-radius:2px; transition:.2s }
.hero-dots button.active{ background:var(--gold); width:38px }
.hero-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px;
  border-radius:50%; background:rgba(255,255,255,.9); box-shadow:var(--shadow-m);
  display:flex; align-items:center; justify-content:center; z-index:3 }
.hero-arrow:hover{ background:#fff }
.hero-arrow svg{ width:17px; height:17px }
.hero-arrow.prev{ left:14px } .hero-arrow.next{ right:14px }

/* ==========================================================================
   USP strip
   ========================================================================== */
.usp{ border-bottom:1px solid var(--line-2); background:#fff }
.usp-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:0 }
.usp-item{ display:flex; align-items:center; gap:13px; padding:22px 20px;
  border-right:1px solid var(--line-2) }
.usp-item:last-child{ border-right:0 }
.usp-item svg{ width:26px; height:26px; color:var(--gold-dark); flex:none }
.usp-item b{ display:block; font-size:.83rem; font-weight:600; margin-bottom:1px }
.usp-item span{ font-size:.76rem; color:var(--muted) }

/* ==========================================================================
   Category tiles
   ========================================================================== */
.cat-row{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px }
.cat-tile{ text-align:center; padding:22px 12px; border:1px solid var(--line);
  border-radius:var(--r); background:#fff; transition:.22s }
.cat-tile:hover{ border-color:var(--gold); transform:translateY(-3px); box-shadow:var(--shadow-m) }
.cat-tile .ico{ width:50px; height:50px; margin:0 auto 12px; border-radius:50%;
  background:var(--gold-soft); display:flex; align-items:center; justify-content:center }
.cat-tile .ico svg{ width:23px; height:23px; color:var(--gold-dark) }
.cat-tile b{ display:block; font-size:.79rem; font-weight:600; line-height:1.35; margin-bottom:3px }
.cat-tile span{ font-size:.7rem; color:var(--muted) }

/* ==========================================================================
   Product card + carousel
   ========================================================================== */
.carousel{ position:relative }
.carousel-track{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 4*16px)/5);
  gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding-bottom:6px; scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{ display:none }
.carousel-track > *{ scroll-snap-align:start }
.car-btn{ position:absolute; top:38%; width:38px; height:38px; border-radius:50%;
  background:#fff; box-shadow:var(--shadow-m); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; z-index:4; transition:.18s }
.car-btn:hover{ background:var(--ink); color:#fff; border-color:var(--ink) }
.car-btn svg{ width:16px; height:16px }
.car-btn.prev{ left:-17px } .car-btn.next{ right:-17px }
.car-btn[disabled]{ opacity:0; pointer-events:none }
.car-count{ text-align:center; font-size:.76rem; color:var(--muted); margin-top:16px }

.pcard{ background:#fff; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column; transition:.22s; position:relative }
.pcard:hover{ box-shadow:var(--shadow-m); border-color:var(--gold-line) }
.pcard-media{ position:relative; display:block; background:#fff; overflow:hidden }
.pcard-media img{ width:100%; aspect-ratio:1/1; object-fit:contain; padding:12px;
  transition:opacity .35s ease, transform .5s ease }
.pcard-media .alt-img{ position:absolute; inset:0; opacity:0 }
.pcard:hover .alt-img{ opacity:1 }
.pcard:hover .main-img{ opacity:0 }
.pcard:hover .pcard-media img{ transform:scale(1.04) }
.pbadge{ position:absolute; top:9px; left:9px; z-index:2; font-size:.62rem; font-weight:800;
  letter-spacing:.06em; padding:4px 9px; border-radius:var(--r-xs); text-transform:uppercase }
.pbadge--sale{ background:var(--sale); color:#fff }
.pbadge--new{ background:var(--ink); color:#fff }
.pbadge--feat{ background:var(--gold); color:var(--ink) }
.pcard-body{ padding:14px 15px 16px; display:flex; flex-direction:column; flex:1 }
.pcard-cat{ font-size:.63rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted-2); margin-bottom:6px }
.pcard-body h3{ font-family:var(--body); font-size:.85rem; font-weight:600; line-height:1.42;
  margin-bottom:9px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:2.4em }
.pcard:hover h3{ color:var(--gold-dark) }
.pcard-body .price{ margin-bottom:12px; margin-top:auto }
.pcard-btn{ display:flex; align-items:center; justify-content:center; gap:7px;
  padding:9px; border-radius:var(--r-sm); background:var(--ink); color:#fff;
  font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; transition:.18s }
.pcard-btn:hover{ background:var(--wa) }
.pcard-btn svg{ width:14px; height:14px }

.price{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-family:var(--body) }
.price b{ font-size:.98rem; font-weight:700; color:var(--ink) }
.price s{ font-size:.8rem; color:var(--muted-2); font-weight:400 }
.price--ask{ font-size:.83rem; font-weight:600; color:var(--ink-2) }
.price--lg b{ font-size:1.55rem } .price--lg s{ font-size:1rem }

/* ==========================================================================
   Brand band
   ========================================================================== */
.brand-band{ background:var(--ink); color:#fff; padding:64px 0; text-align:center; position:relative;
  overflow:hidden }
.brand-band::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% -10%, rgba(245,168,0,.22), transparent 62%) }
.brand-band .wrap{ position:relative }
.brand-band h2{ font-size:clamp(1.4rem,2.9vw,2.3rem); font-weight:500; margin-bottom:16px;
  max-width:840px; margin-inline:auto }
.brand-band h2 em{ font-style:normal; color:var(--gold) }
.brand-band p{ color:rgba(255,255,255,.72); max-width:660px; margin:0 auto 28px; font-size:.98rem }
.brand-stats{ display:flex; justify-content:center; gap:56px; flex-wrap:wrap; margin-bottom:32px }
.brand-stats b{ display:block; font-family:var(--head); font-size:2.3rem; font-weight:500;
  color:var(--gold); line-height:1 }
.brand-stats span{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.55); margin-top:6px; display:block }

/* ==========================================================================
   Breadcrumbs / listing
   ========================================================================== */
.crumbs{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; font-size:.76rem;
  color:var(--muted); padding:16px 0 }
.crumbs a:hover{ color:var(--gold-dark) }
.crumbs [aria-current]{ color:var(--ink); font-weight:600 }

.page-head{ background:var(--bg-2); padding:30px 0; border-bottom:1px solid var(--line-2);
  text-align:center }
.page-head h1{ font-size:clamp(1.5rem,2.8vw,2.1rem); font-weight:500; text-transform:uppercase;
  letter-spacing:.06em; margin-bottom:8px }
.page-head p{ color:var(--muted); max-width:660px; margin:0 auto; font-size:.92rem }

.shop{ display:grid; grid-template-columns:238px 1fr; gap:32px; align-items:start }
.filters{ position:sticky; top:calc(var(--nav-h) + 12px) }
.fgroup{ border-bottom:1px solid var(--line-2); padding:16px 0 }
.fgroup:first-child{ padding-top:0 }
.fgroup h4{ font-size:.68rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  margin-bottom:11px; font-family:var(--body) }
.fgroup a{ display:flex; justify-content:space-between; gap:8px; padding:5px 0;
  font-size:.85rem; color:var(--ink-2) }
.fgroup a:hover{ color:var(--gold-dark) }
.fgroup a.on{ color:var(--gold-dark); font-weight:650 }
.fgroup a .n{ color:var(--muted-2); font-size:.75rem }
.filter-clear{ font-size:.75rem; color:var(--sale); font-weight:600 }

.shop-bar{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid var(--line-2) }
.shop-bar .count{ font-size:.84rem; color:var(--muted) }
.shop-bar select{ padding:9px 13px; border:1px solid var(--line); border-radius:var(--r-sm);
  font-size:.83rem; background:#fff }
.chips{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:18px }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px;
  background:var(--gold-soft); border:1px solid var(--gold-line); font-size:.76rem; font-weight:600 }
.chip svg{ width:11px; height:11px }

.pgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }

.filter-toggle{ display:none }

/* ==========================================================================
   Product detail
   ========================================================================== */
.pd{ display:grid; grid-template-columns:1.05fr 1fr; gap:44px; align-items:start; padding:26px 0 0 }
.pd-gallery{ position:sticky; top:calc(var(--nav-h) + 16px); display:grid;
  grid-template-columns:1fr; gap:12px }
.pd-gallery.has-thumbs{ grid-template-columns:78px 1fr }
.pd-thumbs{ display:flex; flex-direction:column; gap:9px }
.pd-thumb{ border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden;
  background:#fff; padding:0; transition:.18s }
.pd-thumb img{ width:100%; aspect-ratio:1/1; object-fit:contain; padding:5px }
.pd-thumb.active{ border-color:var(--gold); box-shadow:0 0 0 2px rgba(245,168,0,.18) }
.pd-main{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:#fff; position:relative }
.pd-main img{ width:100%; aspect-ratio:1/1; object-fit:contain; padding:22px }
.pd-zoom{ position:absolute; right:12px; bottom:12px; width:38px; height:38px; border-radius:50%;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-s);
  display:flex; align-items:center; justify-content:center }
.pd-zoom svg{ width:16px; height:16px }

.pd-cat{ font-size:.68rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--gold-dark); margin-bottom:10px }
.pd h1{ font-size:clamp(1.35rem,2.4vw,1.95rem); font-weight:500; line-height:1.28; margin-bottom:12px }
.pd-meta{ display:flex; gap:14px; align-items:center; font-size:.78rem; color:var(--muted);
  margin-bottom:16px; flex-wrap:wrap }
.pd-meta .instock{ color:var(--ok); font-weight:650; display:flex; align-items:center; gap:5px }
.pd-meta .instock::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--ok) }
.pd-priceblock{ padding:16px 0; border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2); margin-bottom:18px }
.pd-save{ display:inline-block; margin-left:8px; background:var(--sale); color:#fff;
  font-size:.66rem; font-weight:800; padding:3px 8px; border-radius:var(--r-xs);
  letter-spacing:.05em; vertical-align:middle }
.pd-tax{ font-size:.76rem; color:var(--muted); margin-top:6px }
.pd-short{ color:var(--muted); font-size:.93rem; line-height:1.72; margin-bottom:20px }

.opt-group{ margin-bottom:18px }
.opt-label{ display:block; font-size:.68rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-2); margin-bottom:9px }
.opt-values{ display:flex; gap:8px; flex-wrap:wrap }
.opt-btn{ padding:10px 16px; border:1.5px solid var(--line); border-radius:var(--r-sm);
  font-size:.83rem; font-weight:550; background:#fff; text-align:left; line-height:1.3; transition:.16s }
.opt-btn small{ display:block; font-size:.7rem; color:var(--muted-2); margin-top:2px }
.opt-btn:hover{ border-color:var(--gold-line) }
.opt-btn.active{ border-color:var(--gold); background:var(--gold-soft) }

.pd-cta{ display:flex; gap:10px; flex-wrap:wrap; margin:22px 0 18px }
.pd-cta .btn{ flex:1; min-width:180px }
.pd-assure{ display:grid; grid-template-columns:repeat(2,1fr); gap:11px; padding-top:18px;
  border-top:1px solid var(--line-2) }
.assure{ display:flex; gap:9px; align-items:flex-start; font-size:.8rem; color:var(--muted) }
.assure svg{ width:16px; height:16px; color:var(--gold-dark); flex:none; margin-top:2px }
.pd-terms{ display:flex; gap:7px; flex-wrap:wrap; margin-top:16px }
.pd-terms a{ font-size:.72rem; padding:5px 11px; border:1px solid var(--line);
  border-radius:999px; color:var(--muted); transition:.16s }
.pd-terms a:hover{ border-color:var(--gold); color:var(--gold-dark) }

/* Tabs */
.tabs{ margin-top:52px; border-top:1px solid var(--line-2) }
.tab-nav{ display:flex; gap:0; flex-wrap:wrap; border-bottom:1px solid var(--line-2) }
.tab-btn{ padding:16px 22px; font-size:.75rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px }
.tab-btn:hover{ color:var(--ink) }
.tab-btn.active{ color:var(--ink); border-bottom-color:var(--gold) }
.tab-panel{ display:none; padding:30px 0 }
.tab-panel.active{ display:block }
.rich{ max-width:820px; color:var(--ink-2); font-size:1.05rem }
.rich h3{ font-family:var(--head); font-size:1.35rem; font-weight:500; margin:26px 0 10px }
.rich h3:first-child{ margin-top:0 }
.rich p{ margin-bottom:1.05em; line-height:1.78 }
.rich strong{ font-weight:650; color:var(--ink) }
.note-block{ display:block; margin-top:14px; background:var(--gold-soft); border-left:3px solid var(--gold);
  padding:13px 17px; border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:.88rem }

.spec-table{ width:100%; border-collapse:collapse; max-width:880px; font-size:.89rem }
.spec-table tr{ border-bottom:1px solid var(--line-2) }
.spec-table tr:nth-child(odd){ background:var(--bg-2) }
.spec-table th{ text-align:left; padding:12px 18px; font-weight:600; color:var(--muted);
  width:36%; vertical-align:top }
.spec-table td{ padding:12px 18px; font-weight:500 }

.tick-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:11px 28px; max-width:880px }
.tick-list li{ position:relative; padding-left:26px; font-size:.89rem; color:var(--ink-2); line-height:1.55 }
.tick-list li::before{ content:""; position:absolute; left:0; top:5px; width:16px; height:16px;
  border-radius:50%; background:var(--gold-soft)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D18E00' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
  center/9px no-repeat }

/* ==========================================================================
   Contact / forms
   ========================================================================== */
.form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px }
.field{ display:flex; flex-direction:column; gap:6px }
.field.full{ grid-column:1/-1 }
.field label{ font-size:.75rem; font-weight:650; color:var(--ink-2);
  text-transform:uppercase; letter-spacing:.06em }
.field .req{ color:var(--sale) }
.field input,.field select,.field textarea{ padding:12px 14px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:#fff; font-size:.9rem; width:100% }
.field textarea{ resize:vertical; min-height:120px }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none;
  border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,168,0,.14) }
.form-note{ font-size:.76rem; color:var(--muted); margin-top:10px }
.alert{ padding:14px 18px; border-radius:var(--r-sm); font-size:.88rem; margin-bottom:18px }
.alert-ok{ background:#ECFDF5; border:1px solid #A7F3D0; color:#065F46 }
.alert-err{ background:#FEF2F2; border:1px solid #FECACA; color:#991B1B }

.info-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px }
.info-line{ display:flex; gap:13px; align-items:flex-start; padding:15px 0;
  border-bottom:1px solid var(--line-2) }
.info-line:last-child{ border-bottom:0 }
.info-line .ico{ width:38px; height:38px; border-radius:50%; background:var(--gold-soft);
  display:flex; align-items:center; justify-content:center; flex:none }
.info-line .ico svg{ width:17px; height:17px; color:var(--gold-dark) }
.info-line b{ display:block; font-size:.68rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); margin-bottom:2px; font-weight:700 }
.info-line a,.info-line span{ font-size:.94rem; font-weight:550 }
.info-line a:hover{ color:var(--gold-dark) }

/* FAQ */
.faq{ max-width:840px; margin:0 auto }
.faq-item{ border:1px solid var(--line); border-radius:var(--r); margin-bottom:10px; background:#fff }
.faq-q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:17px 20px; text-align:left; font-size:.93rem; font-weight:600 }
.faq-q .pm{ width:22px; height:22px; flex:none; display:flex; align-items:center;
  justify-content:center; color:var(--gold-dark); transition:.25s }
.faq-q .pm svg{ width:13px; height:13px }
.faq-item.open .pm{ transform:rotate(45deg) }
.faq-item.open{ border-color:var(--gold-line) }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease }
.faq-a-inner{ padding:0 20px 18px; color:var(--muted); font-size:.89rem; line-height:1.72 }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.66); padding:56px 0 0; font-size:.86rem }
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr; gap:34px; padding-bottom:44px }
.foot-brand img{ height:52px; margin-bottom:16px }
.foot-brand p{ line-height:1.7; max-width:290px; font-size:.84rem }
.foot h4{ color:#fff; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:16px; font-weight:700; font-family:var(--body) }
.foot li{ margin-bottom:9px }
.foot a{ transition:.16s; font-size:.84rem }
.foot a:hover{ color:var(--gold) }
.foot-social{ display:flex; gap:9px; margin-top:18px }
.foot-social a{ width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; transition:.2s }
.foot-social a:hover{ background:var(--gold); color:var(--ink) }
.foot-social svg{ width:15px; height:15px }
.foot-bottom{ border-top:1px solid rgba(255,255,255,.1); padding:20px 0; display:flex;
  justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.78rem }

/* ==========================================================================
   Floating actions + chatbot
   ========================================================================== */
.wa-float{ position:fixed; right:18px; bottom:18px; z-index:90; width:54px; height:54px;
  border-radius:50%; background:var(--wa); color:#fff; display:flex; align-items:center;
  justify-content:center; box-shadow:0 5px 20px rgba(37,211,102,.4); transition:.2s }
.wa-float:hover{ transform:scale(1.07) }
.wa-float svg{ width:27px; height:27px }

.cb-toggle{ position:fixed; right:18px; bottom:84px; z-index:91; width:54px; height:54px;
  border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center;
  justify-content:center; box-shadow:var(--shadow-m); transition:.2s }
.cb-toggle:hover{ transform:scale(1.07) }
.cb-toggle svg{ width:24px; height:24px }
.cb-toggle .badge{ position:absolute; top:-2px; right:-2px; width:17px; height:17px;
  border-radius:50%; background:var(--gold); color:var(--ink); font-size:.6rem; font-weight:800;
  display:flex; align-items:center; justify-content:center; border:2px solid #fff }

.cb-panel{ position:fixed; right:18px; bottom:84px; z-index:95; width:372px;
  max-width:calc(100vw - 28px); height:534px; max-height:calc(100vh - 124px); background:#fff;
  border-radius:var(--r-lg); box-shadow:var(--shadow-l); display:none; flex-direction:column;
  overflow:hidden; border:1px solid var(--line) }
.cb-panel.open{ display:flex }
.cb-head{ background:var(--ink); color:#fff; padding:14px 16px; display:flex;
  align-items:center; gap:11px; flex:none }
.cb-head img{ width:36px; height:36px; border-radius:50%; background:#fff; padding:3px; flex:none }

/* Title block — allowed to shrink and truncate so it can never push the
   close button out of the header. */
.cb-title{ flex:1 1 auto; min-width:0; overflow:hidden }
.cb-title b{ display:block; font-size:.9rem; line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.cb-title span{ font-size:.72rem; color:rgba(255,255,255,.6); display:flex;
  align-items:center; gap:5px; white-space:nowrap; overflow:hidden }
.cb-title span::before{ content:""; width:6px; height:6px; border-radius:50%;
  background:var(--wa); flex:none }

/* Close button — never shrinks, always the last item, comfortable tap target. */
.cb-close{ flex:0 0 32px; width:32px; height:32px; margin-left:auto; padding:0;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; opacity:.75; transition:.16s }
.cb-close:hover{ background:rgba(255,255,255,.15); opacity:1 }
.cb-close svg{ width:16px; height:16px; display:block }
.cb-body{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:18px; background:var(--bg-2); display:flex;
  flex-direction:column; gap:11px }
.cb-msg{ max-width:85%; padding:11px 15px; border-radius:var(--r); font-size:.85rem; line-height:1.6 }
.cb-msg.bot{ background:#fff; border:1px solid var(--line-2); align-self:flex-start }
.cb-msg.user{ background:var(--ink); color:#fff; align-self:flex-end }
.cb-msg a{ color:var(--gold-dark); font-weight:600; text-decoration:underline }
.cb-msg.user a{ color:var(--gold) }
.cb-cards{ display:flex; flex-direction:column; gap:7px; align-self:flex-start; max-width:88% }
.cb-card{ display:flex; gap:10px; align-items:center; background:#fff; border:1px solid var(--line-2);
  border-radius:var(--r-sm); padding:8px 11px; transition:.18s }
.cb-card:hover{ border-color:var(--gold) }
.cb-card img{ width:40px; height:44px; object-fit:contain; border-radius:var(--r-xs);
  background:var(--bg-2); flex:none }
.cb-card b{ font-size:.79rem; display:block; line-height:1.3 }
.cb-card span{ font-size:.7rem; color:var(--muted) }
.cb-chips{ display:flex; gap:6px; flex-wrap:wrap; padding:0 18px 11px;
  background:var(--bg-2); flex:none }
.cb-chip{ font-size:.75rem; padding:6px 12px; border-radius:999px; border:1px solid var(--line);
  background:#fff; transition:.18s }
.cb-chip:hover{ border-color:var(--gold); background:var(--gold-soft) }
.cb-foot{ padding:12px 13px; border-top:1px solid var(--line); display:flex; gap:8px;
  background:#fff; flex:none }
.cb-foot input{ flex:1; padding:10px 15px; border:1px solid var(--line); border-radius:999px;
  font-size:.85rem; background:var(--bg-2) }
.cb-foot input:focus{ outline:none; border-color:var(--gold); background:#fff }
.cb-send{ flex:0 0 40px; width:40px; height:40px; border-radius:50%; background:var(--gold); color:var(--ink);
  display:flex; align-items:center; justify-content:center; flex:none }
.cb-send:hover{ background:var(--gold-dark) }
.cb-send svg{ width:17px; height:17px }
.cb-typing{ display:flex; gap:4px; padding:13px 16px; background:#fff; border:1px solid var(--line-2);
  border-radius:var(--r); align-self:flex-start; width:fit-content }
.cb-typing i{ width:6px; height:6px; border-radius:50%; background:var(--muted-2);
  animation:blink 1.3s infinite }
.cb-typing i:nth-child(2){ animation-delay:.18s } .cb-typing i:nth-child(3){ animation-delay:.36s }
@keyframes blink{ 0%,60%,100%{ opacity:.28 } 30%{ opacity:1 } }

/* Lightbox */
.lb{ position:fixed; inset:0; z-index:200; background:rgba(16,17,20,.94); display:none;
  align-items:center; justify-content:center; padding:34px }
.lb.open{ display:flex }
.lb img{ max-width:min(92vw,1000px); max-height:88vh; object-fit:contain; border-radius:var(--r) }
.lb-close{ position:absolute; top:20px; right:22px; width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; display:flex; align-items:center; justify-content:center }
.lb-close svg{ width:19px; height:19px }

/* Misc */
.empty{ text-align:center; padding:64px 20px }
.empty svg{ width:46px; height:46px; color:var(--muted-2); margin:0 auto 16px }
.pagination{ display:flex; gap:6px; justify-content:center; margin-top:38px; flex-wrap:wrap }
.pagination a,.pagination span{ min-width:38px; height:38px; display:flex; align-items:center;
  justify-content:center; border-radius:var(--r-sm); border:1px solid var(--line);
  font-size:.85rem; padding:0 12px }
.pagination a:hover{ border-color:var(--ink) }
.pagination .current{ background:var(--ink); border-color:var(--ink); color:#fff }
.skip{ position:absolute; left:-9999px; background:var(--ink); color:#fff; padding:11px 18px; z-index:999 }
.skip:focus{ left:0 }
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s, transform .6s }
.reveal.in{ opacity:1; transform:none }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1200px){
  .carousel-track{ grid-auto-columns:calc((100% - 3*16px)/4) }
  .pgrid{ grid-template-columns:repeat(3,1fr) }
  .cat-row{ grid-template-columns:repeat(3,1fr) }
  .mega-feature{ display:none }
  .car-btn.prev{ left:-8px } .car-btn.next{ right:-8px }
}

@media (max-width:1024px){
  .navbar{ display:none }
  .nav-toggle{ display:flex }
  .header-search{ display:none }
  .foot-grid{ grid-template-columns:repeat(2,1fr) }
  .shop{ grid-template-columns:1fr }
  .filters{ position:static; display:none; border:1px solid var(--line);
    border-radius:var(--r); padding:16px; margin-bottom:20px }
  .filters.open{ display:block }
  .filter-toggle{ display:inline-flex }
  .usp-row{ grid-template-columns:repeat(2,1fr) }
  .usp-item:nth-child(2){ border-right:0 }
  .usp-item:nth-child(1),.usp-item:nth-child(2){ border-bottom:1px solid var(--line-2) }
}

@media (max-width:860px){
  .hero-grid{ grid-template-columns:1fr; text-align:center; min-height:0; gap:26px; padding:34px 0 44px }
  .hero p{ margin-inline:auto } .hero-btns{ justify-content:center }
  .hero-img{ order:-1 } .hero-img img{ max-height:270px }
  .hero-arrow{ display:none }
  .pd{ grid-template-columns:1fr; gap:26px }
  .pd-gallery,.pd-gallery.has-thumbs{ position:static; grid-template-columns:1fr }
  .pd-thumbs{ flex-direction:row; overflow-x:auto; order:2 }
  .pd-thumb{ width:66px; flex:none }
  .carousel-track{ grid-auto-columns:calc((100% - 16px)/2.2) }
  .pgrid{ grid-template-columns:repeat(2,1fr) }
  .tick-list{ grid-template-columns:1fr }
  .pd-assure{ grid-template-columns:1fr }
  .form-grid{ grid-template-columns:1fr }
  .announce-right{ display:none }
  .announce-msg{ text-align:left }
}

@media (max-width:560px){
  :root{ --gut:15px; --nav-h:64px }
  .section{ padding:42px 0 }
  .cat-row{ grid-template-columns:repeat(2,1fr) }
  .carousel-track{ grid-auto-columns:calc((100% - 12px)/1.7); gap:12px }
  .pgrid{ gap:12px }
  .foot-grid{ grid-template-columns:1fr; gap:26px }
  .brand-stats{ gap:30px } .brand-stats b{ font-size:1.8rem }
  .brand-band{ padding:44px 0 }
  .car-btn{ display:none }
  .announce-social{ display:none }
  .announce-msg{ text-align:center; font-size:.72rem }
  .brand img{ height:38px } .brand-name{ font-size:1.25rem }
  .cb-panel{ right:10px; left:10px; width:auto; bottom:78px }
  .tab-btn{ padding:13px 15px; font-size:.68rem }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important }
  .reveal{ opacity:1; transform:none }
}

@media print{
  .announce,.site-header,.site-footer,.wa-float,.cb-toggle,.cb-panel,.pd-cta,.filters{ display:none !important }
}

/* ==========================================================================
   Shop — plain grid (no sidebar)
   ========================================================================== */
.shop-plain{ display:block }
.cat-bar{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:26px }
.cat-pill{ padding:9px 18px; border:1px solid var(--line); border-radius:999px; font-size:.76rem;
  font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);
  background:#fff; transition:.18s }
.cat-pill:hover{ border-color:var(--ink); color:var(--ink) }
.cat-pill.on{ background:var(--ink); border-color:var(--ink); color:#fff }


/* ==========================================================================
   Product detail — single flowing body (reference layout)
   ========================================================================== */
.pd-detail{ margin-top:46px; padding-top:36px; border-top:1px solid var(--line) }
.pd-detail .rich{ max-width:none }
.pd-detail .rich h3{
  font-family:var(--body); font-size:1.1rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.09em; margin:32px 0 14px; padding-bottom:9px;
  border-bottom:2px solid var(--gold); display:inline-block;
}
.pd-detail .rich ul{ list-style:none; margin:0 0 18px; padding:0 }
.pd-detail .rich ul li{ position:relative; padding-left:24px; margin-bottom:9px;
  font-size:1.02rem; line-height:1.65; color:var(--ink-2) }
.pd-detail .rich ul li::before{
  content:""; position:absolute; left:2px; top:9px; width:7px; height:7px;
  border-radius:50%; background:var(--gold);
}
.pd-detail .rich ul ul{ margin:8px 0 0 }
.pd-detail .rich ul ul li::before{ background:var(--muted-2); width:5px; height:5px; top:10px }
.pd-detail .rich p{ font-size:1.05rem }
.pd-detail-cta{
  margin-top:34px; padding:26px 30px; background:var(--gold-soft);
  border:1px solid var(--gold-line); border-radius:var(--r-lg);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.pd-detail-cta p{ margin:0; font-weight:600; font-size:.98rem }

/* ==========================================================================
   Footer brand lockup — matches the header
   ========================================================================== */
.foot-lockup{ display:flex; align-items:center; gap:11px; margin-bottom:16px }
.foot-lockup img{ height:48px; width:auto; margin:0 }
.foot-lockup .brand-name{ color:#fff; font-family:var(--head); font-size:1.4rem;
  font-weight:600; letter-spacing:.03em; display:block; line-height:1.05 }
.foot-lockup .brand-sub{ font-size:.55rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.45); font-weight:600; display:block }

@media (max-width:1024px){ .pgrid{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:860px){
  .pgrid{ grid-template-columns:repeat(2,1fr) }
  .pd-detail-cta{ flex-direction:column; align-items:flex-start }
  .cat-bar{ overflow-x:auto; flex-wrap:nowrap; justify-content:flex-start; padding-bottom:4px }
  .cat-pill{ flex:none }
}