/* ============================================================
   BATHAE — Premium Bathroom Fittings
   Gold brand system · mobile-first · zero framework
   ============================================================ */

/* ---------- 1. Design tokens ---------- */
:root{
  /* Gold scale, sampled from the BATHAE logo */
  --gold-900:#6E4E06;
  --gold-800:#8B6914;
  --gold-700:#9C7A12;
  --gold-600:#B8860B;
  --gold-500:#D4AF37;   /* primary */
  --gold-400:#E4C55C;
  --gold-300:#F2DC8E;
  --gold-200:#F8EBBE;
  --gold-100:#FCF6E2;
  --gold-grad:linear-gradient(135deg,#9C7A12 0%,#C9A227 18%,#F3DF95 42%,#FBF3CF 52%,#E0BC45 64%,#B8860B 86%,#8B6914 100%);
  --gold-grad-soft:linear-gradient(135deg,#D4AF37 0%,#F0D97E 50%,#C39B1E 100%);

  /* Neutrals — warm, so gold never looks cold */
  --ink:#15171B;
  --ink-2:#22262D;
  --ink-3:#3A4049;
  --body:#555C66;
  --muted:#8A919C;
  --line:#E8E4DA;
  --line-2:#F1EEE7;
  --bg:#FFFFFF;
  --bg-2:#FAF8F3;
  --bg-3:#F4F1EA;
  --dark:#15171B;
  --dark-2:#1E2127;

  /* Status */
  --ok:#1E7F4F; --ok-bg:#E6F4ED;
  --warn:#9A6A00; --warn-bg:#FDF3DF;
  --bad:#B3261E; --bad-bg:#FBEAE9;
  --info:#1D5FA8; --info-bg:#E8F1FB;

  /* Type */
  --f-head:'Jost',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'DM Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* Space & shape */
  --wrap:1280px;
  --r-sm:6px; --r:12px; --r-lg:18px; --r-xl:26px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(21,23,27,.05),0 1px 3px rgba(21,23,27,.06);
  --sh-2:0 4px 12px rgba(21,23,27,.07),0 2px 4px rgba(21,23,27,.04);
  --sh-3:0 14px 40px rgba(21,23,27,.10),0 4px 12px rgba(21,23,27,.05);
  --sh-gold:0 10px 30px rgba(184,134,11,.22);
  --ease:cubic-bezier(.4,0,.2,1);
  --t:.25s var(--ease);
  --header-h:112px;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  font-family:var(--f-body);font-size:16px;line-height:1.65;color:var(--body);
  background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--gold-600);outline-offset:2px;border-radius:4px}
::selection{background:var(--gold-200);color:var(--ink)}

h1,h2,h3,h4,h5{font-family:var(--f-head);color:var(--ink);font-weight:600;line-height:1.18;letter-spacing:-.015em}
h1{font-size:clamp(2rem,4.6vw,3.6rem)}
h2{font-size:clamp(1.65rem,3.4vw,2.7rem)}
h3{font-size:clamp(1.2rem,2vw,1.6rem)}
h4{font-size:1.1rem}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}

/* ---------- 3. Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.section{padding:clamp(52px,7vw,96px) 0}
.section--tight{padding:clamp(36px,4.5vw,60px) 0}
.section--alt{background:var(--bg-2)}
.section--dark{background:var(--dark);color:#CFD3DA}
.section--dark h1,.section--dark h2,.section--dark h3{color:#fff}
.grid{display:grid;gap:22px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.flex{display:flex}
.between{display:flex;align-items:center;justify-content:space-between;gap:16px}
.center{display:flex;align-items:center;justify-content:center}
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}
.hide{display:none !important}
.mt-0{margin-top:0}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.txt-c{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- 4. Gold primitives ---------- */
.gold-text{
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gold-600);
}
.gold-rule{height:3px;width:64px;border-radius:2px;background:var(--gold-grad);border:0}
.gold-rule--center{margin-inline:auto}

/* ---------- 5. Buttons ---------- */
.btn{
  --btn-bg:var(--gold-grad);--btn-fg:#2A1F00;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 30px;border-radius:var(--r-pill);
  font-family:var(--f-head);font-weight:600;font-size:.87rem;letter-spacing:.08em;text-transform:uppercase;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform var(--t),box-shadow var(--t),background var(--t),color var(--t),border-color var(--t);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-gold)}
.btn:active{transform:translateY(0)}
.btn[disabled],.btn.is-disabled{opacity:.5;pointer-events:none}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--gold-500);color:var(--gold-700);box-shadow:none}
.btn--outline-gold{--btn-bg:transparent;--btn-fg:var(--gold-700);border-color:var(--gold-500)}
.btn--outline-gold:hover{background:var(--gold-100);box-shadow:none}
.btn--dark{--btn-bg:var(--ink);--btn-fg:#fff}
.btn--dark:hover{--btn-bg:var(--ink-2);box-shadow:var(--sh-2)}
.btn--light{--btn-bg:#fff;--btn-fg:var(--ink);border-color:rgba(255,255,255,.7)}
.btn--wa{--btn-bg:#20BA5A;--btn-fg:#fff}
/* Outlined button that sits on a dark photo — white text, glassy fill.
   (btn--light + btn--ghost used to collide and render white on white.) */
.btn--on-dark{--btn-bg:rgba(255,255,255,.10);--btn-fg:#fff;border-color:rgba(255,255,255,.55);backdrop-filter:blur(4px)}
.btn--on-dark:hover{--btn-bg:#fff;--btn-fg:var(--ink);border-color:#fff;box-shadow:var(--sh-2)}
.btn--sm{padding:9px 18px;font-size:.76rem}
.btn--lg{padding:17px 40px;font-size:.93rem}
.btn--block{display:flex;width:100%}
.btn--icon{padding:12px;border-radius:50%;gap:0}

/* ---------- 6. Header ---------- */
.topbar{
  background:var(--dark);color:#B9BEC7;font-size:.8rem;
  padding:9px 0;letter-spacing:.02em;
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px}
.topbar a{transition:color var(--t)}
.topbar a:hover{color:var(--gold-400)}
.topbar__news{
  display:flex;align-items:center;gap:8px;min-width:0;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.topbar__news b{color:var(--gold-400);font-weight:600}
.topbar__links{display:flex;align-items:center;gap:18px;flex-shrink:0}

.header{position:sticky;top:0;z-index:100;background:#fff;box-shadow:0 1px 0 var(--line);transition:box-shadow var(--t)}
.header.is-stuck{box-shadow:var(--sh-2)}
.header__main{display:flex;align-items:center;gap:26px;padding:16px 0}
.logo{flex-shrink:0;display:block}
.logo img{height:46px;width:auto}
.logo__fallback{
  font-family:var(--f-head);font-size:1.9rem;font-weight:700;letter-spacing:.22em;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

.searchbar{flex:1;max-width:560px;position:relative}
.searchbar input{
  width:100%;padding:13px 52px 13px 22px;border:1px solid var(--line);
  border-radius:var(--r-pill);background:var(--bg-2);font-size:.93rem;
  transition:border-color var(--t),background var(--t),box-shadow var(--t);
}
.searchbar input:focus{outline:0;border-color:var(--gold-500);background:#fff;box-shadow:0 0 0 4px var(--gold-100)}
.searchbar button{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;background:var(--gold-grad);
  display:grid;place-items:center;color:#2A1F00;transition:transform var(--t)
}
.searchbar button:hover{transform:translateY(-50%) scale(1.06)}
.suggest{
  position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-3);
  max-height:400px;overflow-y:auto;z-index:60;display:none
}
.suggest.is-open{display:block}
.suggest a{display:flex;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line-2);transition:background var(--t)}
.suggest a:last-child{border-bottom:0}
.suggest a:hover,.suggest a.is-active{background:var(--gold-100)}
.suggest img{width:44px;height:44px;object-fit:contain;background:var(--bg-2);border-radius:var(--r-sm);flex-shrink:0}
.suggest__n{font-size:.87rem;color:var(--ink);font-weight:500;line-height:1.3}
.suggest__p{font-size:.8rem;color:var(--gold-700);font-weight:600}
.suggest__empty{padding:16px;text-align:center;color:var(--muted);font-size:.87rem}

.header__actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.iconbtn{
  position:relative;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;color:var(--ink-2);transition:background var(--t),color var(--t)
}
.iconbtn:hover{background:var(--gold-100);color:var(--gold-700)}
.iconbtn__badge{
  position:absolute;top:2px;right:2px;min-width:19px;height:19px;padding:0 5px;
  border-radius:var(--r-pill);background:var(--gold-grad);color:#2A1F00;
  font-size:.66rem;font-weight:700;display:grid;place-items:center;font-family:var(--f-head)
}
.burger{display:none}

/* ---------- 7. Nav + mega menu ---------- */
.nav{background:var(--dark);position:relative}
.nav__list{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}
/* The <li> is deliberately NOT a positioning context: the mega menu below
   resolves against .nav (full page width) so it centres on the page, not on
   the link, which would push it off the left edge on most screens. */
.nav__list>li{position:static}
.nav__link{
  display:flex;align-items:center;gap:6px;padding:15px 20px;
  font-family:var(--f-head);font-size:.83rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  color:#E3E6EA;position:relative;transition:color var(--t)
}
.nav__link::after{
  content:'';position:absolute;left:20px;right:20px;bottom:9px;height:2px;
  background:var(--gold-grad);transform:scaleX(0);transform-origin:left;transition:transform var(--t)
}
.nav__link:hover,.nav__link.is-active{color:var(--gold-300)}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}
.nav__caret{width:9px;height:9px;transition:transform var(--t)}
.nav__list>li:hover .nav__caret{transform:rotate(180deg)}

.mega{
  position:absolute;top:100%;left:50%;transform:translate(-50%,10px);
  width:min(1100px,calc(100vw - 32px));background:#fff;border-radius:0 0 var(--r-lg) var(--r-lg);
  box-shadow:var(--sh-3);padding:30px;z-index:90;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--t),transform var(--t),visibility var(--t);
  border-top:3px solid transparent;border-image:var(--gold-grad) 1;
}
.nav__list>li:hover .mega,.nav__list>li:focus-within .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.mega__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
/* Each heading owns the links under it: tight above, roomy below,
   so a "view all" line never reads as part of the next category. */
.mega__group + .mega__group{margin-top:20px}
.mega__col h4{
  display:flex;align-items:center;gap:8px;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-700);
  margin-bottom:6px;padding-bottom:8px;border-bottom:1px solid var(--line)
}
.mega__col h4 a{padding:0;color:inherit}
.mega__n{
  margin-left:auto;font-size:.7rem;letter-spacing:.02em;font-weight:600;
  color:var(--muted);background:var(--bg-2);border-radius:var(--r-pill);padding:1px 8px
}
.mega__col a{
  display:block;padding:5px 0;font-size:.9rem;color:var(--body);
  transition:color var(--t),padding-left var(--t)
}
.mega__all{font-weight:500;color:var(--gold-700) !important}
.mega__col a:hover{color:var(--gold-700);padding-left:6px}
.mega__promo{
  grid-column:span 1;background:var(--bg-2) var(--gold-grad-soft);border-radius:var(--r);
  padding:22px;color:#2A1F00;display:flex;flex-direction:column;justify-content:flex-end;min-height:180px
}
.mega__promo h5{font-family:var(--f-head);font-size:1.15rem;margin-bottom:6px;color:#2A1F00}
.mega__promo p{font-size:.82rem;margin-bottom:12px}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0 auto 0 0;width:min(340px,86vw);background:#fff;z-index:210;
  transform:translateX(-102%);transition:transform .32s var(--ease);
  display:flex;flex-direction:column;box-shadow:var(--sh-3)
}
.drawer.is-open{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.drawer__body{flex:1;overflow-y:auto;padding:10px 0 30px;-webkit-overflow-scrolling:touch}
.drawer__body a,.drawer__acc>button{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:13px 20px;font-family:var(--f-head);font-size:.93rem;font-weight:500;
  color:var(--ink);border-bottom:1px solid var(--line-2);text-align:left
}
.drawer__acc>button svg{transition:transform var(--t)}
.drawer__acc.is-open>button svg{transform:rotate(180deg)}
.drawer__sub{max-height:0;overflow:hidden;background:var(--bg-2);transition:max-height .3s var(--ease)}
.drawer__acc.is-open .drawer__sub{max-height:800px}
.drawer__sub a{padding-left:36px;font-size:.87rem;font-weight:400;color:var(--body)}
.drawer__foot{padding:18px 20px;border-top:1px solid var(--line);background:var(--bg-2)}
.overlay{position:fixed;inset:0;background:rgba(21,23,27,.5);z-index:200;opacity:0;visibility:hidden;transition:opacity var(--t),visibility var(--t);backdrop-filter:blur(2px)}
.overlay.is-open{opacity:1;visibility:visible}

/* ---------- 8. Hero ---------- */
.hero{position:relative;background:var(--bg-3);overflow:hidden}
.hero__track{display:flex;transition:transform .7s var(--ease)}
.hero__slide{
  min-width:100%;position:relative;min-height:clamp(420px,66vh,660px);
  display:flex;align-items:center;
}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__slide::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(10,11,13,.82) 0%,rgba(10,11,13,.6) 42%,rgba(10,11,13,.12) 76%,transparent 100%)
}
.hero__inner{position:relative;z-index:2;max-width:620px;color:#fff;padding-block:40px}
.hero__eyebrow{
  display:inline-block;font-family:var(--f-head);font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-300);margin-bottom:14px
}
.hero h1{color:#fff;margin-bottom:16px;font-style:italic;font-weight:600}
.hero h1 .gold-text{-webkit-text-fill-color:transparent}
.hero p{font-size:clamp(1rem,1.5vw,1.16rem);color:#DDE0E5;margin-bottom:28px;max-width:52ch}
.hero__dots{position:absolute;bottom:26px;left:0;right:0;display:flex;justify-content:center;gap:9px;z-index:3}
.hero__dots button{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.4);transition:all var(--t)}
.hero__dots button.is-active{width:30px;border-radius:var(--r-pill);background:var(--gold-grad)}
.hero__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.14);
  color:#fff;display:grid;place-items:center;backdrop-filter:blur(6px);transition:background var(--t)
}
.hero__arrow:hover{background:var(--gold-500);color:#2A1F00}
.hero__arrow--prev{left:16px}
.hero__arrow--next{right:16px}

/* ---------- 9. Trust strip ---------- */
.trust{background:var(--dark);color:#fff;padding:26px 0}
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.trust__item{display:flex;align-items:center;gap:13px}
.trust__ic{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:rgba(212,175,55,.14);color:var(--gold-400)
}
.trust__t{font-family:var(--f-head);font-size:.94rem;font-weight:600;color:#fff;line-height:1.25}
.trust__s{font-size:.79rem;color:#9AA1AC}

/* ---------- 10. Section head ---------- */
.shead{margin-bottom:38px}
.shead--center{text-align:center}
.shead__eyebrow{
  font-family:var(--f-head);font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-700);display:block;margin-bottom:10px;font-weight:600
}
.shead h2{font-style:italic;margin-bottom:12px}
.shead p{color:var(--body);max-width:62ch}
.shead--center p{margin-inline:auto}

/* ---------- 11. Category tiles ---------- */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cat{
  position:relative;display:block;aspect-ratio:1/1;border-radius:var(--r-lg);
  overflow:hidden;background:var(--bg-3);box-shadow:var(--sh-1);
  transition:transform var(--t),box-shadow var(--t)
}
.cat:hover{transform:translateY(-5px);box-shadow:var(--sh-3)}
.cat img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.cat:hover img{transform:scale(1.07)}
.cat::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(10,11,13,.8) 0%,rgba(10,11,13,.18) 48%,transparent 72%)}
.cat__body{position:absolute;left:0;right:0;bottom:0;padding:20px;z-index:2;text-align:center}
.cat__name{
  font-family:var(--f-head);font-size:1.12rem;font-weight:600;color:#fff;line-height:1.25;
  transition:color var(--t)
}
.cat:hover .cat__name{color:var(--gold-300)}
.cat__count{font-size:.78rem;color:#C7CBD2;margin-top:3px}

/* ---------- 12. Product card ---------- */
.products{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.pcard{
  position:relative;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t)
}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:var(--gold-200)}
.pcard__media{position:relative;aspect-ratio:1/1;background:var(--bg-2);overflow:hidden;display:block}
.pcard__media img{width:100%;height:100%;object-fit:contain;padding:14px;transition:transform .5s var(--ease)}
.pcard:hover .pcard__media img{transform:scale(1.06)}
.pcard__tags{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:5px;z-index:2}
.tag{
  font-family:var(--f-head);font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 9px;border-radius:var(--r-pill);background:var(--ink);color:#fff
}
.tag--sale{background:var(--gold-grad);color:#2A1F00}
.tag--new{background:var(--ok);color:#fff}
.tag--out{background:var(--muted);color:#fff}
.pcard__quick{
  position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:6px;z-index:2;
  opacity:0;transform:translateX(8px);transition:opacity var(--t),transform var(--t)
}
.pcard:hover .pcard__quick,.pcard:focus-within .pcard__quick{opacity:1;transform:none}
.pcard__quick button,.pcard__quick a{
  width:36px;height:36px;border-radius:50%;background:#fff;box-shadow:var(--sh-2);
  display:grid;place-items:center;color:var(--ink-2);transition:background var(--t),color var(--t)
}
.pcard__quick button:hover,.pcard__quick a:hover{background:var(--gold-grad);color:#2A1F00}
.pcard__quick button.is-on{background:var(--gold-grad);color:#2A1F00}
.pcard__body{padding:16px;display:flex;flex-direction:column;gap:7px;flex:1}
.pcard__cat{font-size:.71rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:500}
.pcard__name{
  font-family:var(--f-head);font-size:.99rem;font-weight:500;color:var(--ink);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color var(--t)
}
.pcard:hover .pcard__name{color:var(--gold-700)}
.pcard__finish{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--body)}
.swatch{width:13px;height:13px;border-radius:50%;border:1px solid rgba(0,0,0,.14);flex-shrink:0}
.pcard__price{display:flex;align-items:baseline;gap:9px;margin-top:auto;padding-top:5px}
.price{font-family:var(--f-head);font-size:1.12rem;font-weight:700;color:var(--ink)}
.price--old{font-size:.86rem;color:var(--muted);text-decoration:line-through;font-weight:400}
.price--off{font-size:.74rem;font-weight:700;color:var(--gold-700);background:var(--gold-100);padding:2px 7px;border-radius:var(--r-pill)}
.pcard__foot{padding:0 16px 16px}
.stars{display:inline-flex;gap:1px;color:var(--gold-500);font-size:.8rem}

/* ---------- 13. Finish swatch colours ---------- */
.sw-chrome{background:linear-gradient(135deg,#E9ECEF,#B7BEC6 45%,#F4F6F8 60%,#98A0A9)}
.sw-black{background:linear-gradient(135deg,#3A3A3A,#111 60%)}
.sw-gold{background:var(--gold-grad)}
.sw-rose{background:linear-gradient(135deg,#C48A70,#E8B49B 45%,#F6DACB 60%,#B57A62)}
.sw-gun{background:linear-gradient(135deg,#5A5F66,#2E3238 55%,#71777F)}
.sw-white{background:linear-gradient(135deg,#fff,#E6E6E6)}
.sw-steel{background:linear-gradient(135deg,#D7DBDF,#A8AEB5)}
.sw-grey{background:linear-gradient(135deg,#9AA0A6,#6E747A)}

/* ---------- 14. Banner / CTA ---------- */
.cta{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  background:var(--dark);color:#fff;padding:clamp(34px,5vw,64px);
}
.cta__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32}
.cta__in{position:relative;z-index:2;max-width:620px}
.cta h2{color:#fff;font-style:italic;margin-bottom:12px}
.cta p{color:#C9CDD4;margin-bottom:24px}

.splitbox{display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch;gap:0;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-2)}
.splitbox__img{position:relative;min-height:420px;background:var(--bg-3)}
.splitbox__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.splitbox__body{background:#fff;padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:center}

/* ---------- 15. Finish showcase ---------- */
.finishes{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.finish{
  text-align:center;padding:26px 14px;border-radius:var(--r-lg);background:#fff;
  border:1px solid var(--line-2);transition:transform var(--t),box-shadow var(--t),border-color var(--t)
}
.finish:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:var(--gold-200)}
.finish__dot{width:66px;height:66px;border-radius:50%;margin:0 auto 14px;box-shadow:inset 0 2px 8px rgba(0,0,0,.2),0 4px 14px rgba(0,0,0,.09)}
.finish__n{font-family:var(--f-head);font-size:.96rem;font-weight:600;color:var(--ink)}
.finish__d{font-size:.78rem;color:var(--muted);margin-top:3px}

/* ---------- 16. Testimonials ---------- */
.tcard{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:28px;height:100%;display:flex;flex-direction:column;gap:14px}
.tcard__q{font-size:2.4rem;line-height:1;color:var(--gold-300);font-family:var(--f-head)}
.tcard p{color:var(--ink-3);font-size:.96rem;flex:1}
.tcard__who{display:flex;align-items:center;gap:12px;padding-top:12px;border-top:1px solid var(--line-2)}
.tcard__av{width:42px;height:42px;border-radius:50%;background:var(--gold-grad);display:grid;place-items:center;font-family:var(--f-head);font-weight:700;color:#2A1F00;flex-shrink:0}
.tcard__n{font-family:var(--f-head);font-weight:600;color:var(--ink);font-size:.93rem;line-height:1.3}
.tcard__r{font-size:.78rem;color:var(--muted)}

/* ---------- 17. Footer ---------- */
.footer{background:var(--dark);color:#9DA4AE;padding-top:64px;font-size:.9rem}
.footer h4{
  color:#fff;font-size:.83rem;letter-spacing:.15em;text-transform:uppercase;
  margin-bottom:18px;position:relative;padding-bottom:11px
}
.footer h4::after{content:'';position:absolute;left:0;bottom:0;width:36px;height:2px;background:var(--gold-grad)}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:38px;padding-bottom:48px}
.footer__logo{margin-bottom:18px}
.footer__logo img{height:44px}
.footer a{transition:color var(--t),padding-left var(--t)}
.footer li a{display:inline-block;padding:5px 0}
.footer li a:hover{color:var(--gold-400);padding-left:5px}
.footer__contact li{display:flex;gap:11px;padding:7px 0;align-items:flex-start}
.footer__contact svg{flex-shrink:0;margin-top:3px;color:var(--gold-500)}
.footer__social{display:flex;gap:10px;margin-top:20px}
.footer__social a{
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.07);
  display:grid;place-items:center;color:#C6CBD3;transition:background var(--t),color var(--t),transform var(--t)
}
.footer__social a:hover{background:var(--gold-grad);color:#2A1F00;transform:translateY(-3px)}
.newsletter{display:flex;gap:8px;margin-top:16px}
.newsletter input{
  flex:1;min-width:0;padding:12px 16px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);color:#fff;font-size:.87rem
}
.newsletter input::placeholder{color:#79808A}
.newsletter input:focus{outline:0;border-color:var(--gold-500)}
.footer__bar{border-top:1px solid rgba(255,255,255,.08);padding:20px 0;font-size:.82rem}
.footer__bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer__seo{
  border-top:1px solid rgba(255,255,255,.08);padding:26px 0;font-size:.79rem;color:#6E757F;line-height:1.75
}
.footer__seo b{color:#9DA4AE;font-weight:600}

/* ---------- 18. Floating actions ---------- */
.fab{position:fixed;right:18px;bottom:18px;z-index:120;display:flex;flex-direction:column;gap:11px}
.fab a,.fab button{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  box-shadow:var(--sh-3);transition:transform var(--t)
}
.fab a:hover,.fab button:hover{transform:scale(1.08)}
.fab__wa{background:#20BA5A;color:#fff}
.fab__call{background:var(--gold-grad);color:#2A1F00}
.fab__top{background:var(--ink);color:#fff;opacity:0;visibility:hidden}
.fab__top.is-on{opacity:1;visibility:visible}

/* ---------- 19. Breadcrumbs ---------- */
.crumbs{background:var(--bg-2);border-bottom:1px solid var(--line-2);padding:14px 0;font-size:.84rem}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--muted)}
.crumbs a{color:var(--body);transition:color var(--t)}
.crumbs a:hover{color:var(--gold-700)}
.crumbs li:not(:last-child)::after{content:'/';margin-left:8px;color:var(--line)}
.crumbs li[aria-current]{color:var(--ink);font-weight:500}

/* ---------- 20. Page head ---------- */
.phead{background:var(--dark);color:#fff;padding:clamp(40px,6vw,74px) 0;position:relative;overflow:hidden}
.phead::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(900px 340px at 82% 12%,rgba(212,175,55,.2),transparent 62%)
}
.phead .wrap{position:relative;z-index:2}
.phead h1{color:#fff;font-style:italic}
.phead p{color:#B7BDC6;margin-top:10px;max-width:66ch}

/* ---------- 21. Shop layout ---------- */
.shop{display:grid;grid-template-columns:270px 1fr;gap:34px;align-items:start}
.filters{position:sticky;top:calc(var(--header-h) + 16px);background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:22px;max-height:calc(100vh - var(--header-h) - 34px);overflow-y:auto}
.fgroup{padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line-2)}
.fgroup:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.fgroup h4{font-size:.79rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);margin-bottom:13px}
.fgroup label{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:.88rem;cursor:pointer;color:var(--body);transition:color var(--t)}
.fgroup label:hover{color:var(--gold-700)}
.fgroup input[type=checkbox],.fgroup input[type=radio]{width:16px;height:16px;accent-color:var(--gold-600);cursor:pointer;flex-shrink:0}
.fgroup label span.n{margin-left:auto;font-size:.76rem;color:var(--muted)}
.price-inputs{display:flex;align-items:center;gap:8px}
.price-inputs input{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:.85rem}
.price-inputs input:focus{outline:0;border-color:var(--gold-500)}
.shop__bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--line-2)}
.shop__count{font-size:.88rem;color:var(--muted)}
.select{
  padding:10px 34px 10px 14px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 13px center;
  font-size:.87rem;appearance:none;cursor:pointer
}
.select:focus{outline:0;border-color:var(--gold-500)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chip{
  display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:var(--r-pill);
  background:var(--gold-100);color:var(--gold-800);font-size:.8rem;font-weight:500;border:1px solid var(--gold-200)
}
.chip a{display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:rgba(0,0,0,.09);font-size:.68rem;line-height:1}
.chip a:hover{background:var(--gold-600);color:#fff}
.filter-toggle{display:none}

/* ---------- 22. Product detail ---------- */
.pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:start}
.gallery__main{
  position:relative;aspect-ratio:1/1;background:var(--bg-2);border-radius:var(--r-lg);
  overflow:hidden;border:1px solid var(--line-2)
}
.gallery__main img{width:100%;height:100%;object-fit:contain;padding:26px}
.gallery__thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px}
.gallery__thumbs button{
  aspect-ratio:1/1;background:var(--bg-2);border:2px solid transparent;border-radius:var(--r);
  overflow:hidden;transition:border-color var(--t)
}
.gallery__thumbs button.is-active{border-color:var(--gold-500)}
.gallery__thumbs img{width:100%;height:100%;object-fit:contain;padding:6px}
.pdp__sku{font-size:.8rem;color:var(--muted);letter-spacing:.06em}
.pdp h1{font-size:clamp(1.5rem,2.7vw,2.2rem);margin:8px 0 12px;font-weight:600}
.pdp__price{display:flex;align-items:baseline;gap:12px;margin:18px 0}
.pdp__price .price{font-size:1.9rem}
.pdp__short{color:var(--ink-3);padding:16px 0;border-block:1px solid var(--line-2);margin-bottom:18px}
.pdp__row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden}
.qty button{width:42px;height:46px;display:grid;place-items:center;font-size:1.15rem;color:var(--ink);transition:background var(--t)}
.qty button:hover{background:var(--gold-100)}
.qty input{width:52px;height:46px;text-align:center;border:0;font-weight:600;font-family:var(--f-head);-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stock{display:inline-flex;align-items:center;gap:7px;font-size:.87rem;font-weight:500}
.stock--in{color:var(--ok)}
.stock--out{color:var(--bad)}
.stock__dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.usp{display:grid;gap:11px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line-2)}
.usp li{display:flex;gap:11px;align-items:flex-start;font-size:.89rem}
.usp svg{flex-shrink:0;color:var(--gold-600);margin-top:2px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:26px;overflow-x:auto}
.tabs button{
  padding:13px 22px;font-family:var(--f-head);font-size:.87rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;transition:color var(--t),border-color var(--t)
}
.tabs button.is-active{color:var(--ink);border-bottom-color:var(--gold-500)}
.tabpanel{display:none;animation:fade .3s var(--ease)}
.tabpanel.is-active{display:block}
.prose{color:var(--ink-3);line-height:1.8;max-width:78ch}
.prose h2,.prose h3{margin:26px 0 12px}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose ul{list-style:none;margin:0 0 16px}
.prose ul li{position:relative;padding-left:24px;margin-bottom:9px}
.prose ul li::before{content:'';position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--gold-grad)}
.prose ol{margin:0 0 16px 20px;list-style:decimal}
.prose ol li{margin-bottom:9px;padding-left:5px}
.prose a{color:var(--gold-700);text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--ink);font-weight:600}
.spec-table tr{border-bottom:1px solid var(--line-2)}
.spec-table th{text-align:left;padding:13px 16px 13px 0;font-weight:500;color:var(--muted);font-size:.87rem;width:38%;vertical-align:top}
.spec-table td{padding:13px 0;color:var(--ink);font-weight:500;font-size:.92rem}

/* ---------- 23. Forms ---------- */
.field{margin-bottom:17px}
.field label{display:block;font-size:.83rem;font-weight:500;color:var(--ink-2);margin-bottom:7px}
.field label .req{color:var(--bad)}
.field input,.field select,.field textarea{
  width:100%;padding:12px 15px;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;font-size:.93rem;transition:border-color var(--t),box-shadow var(--t)
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--gold-500);box-shadow:0 0 0 3px var(--gold-100)
}
.field textarea{min-height:120px;resize:vertical}
.field .hint{font-size:.78rem;color:var(--muted);margin-top:5px}
.field .err{font-size:.78rem;color:var(--bad);margin-top:5px}
.field.has-err input,.field.has-err textarea,.field.has-err select{border-color:var(--bad)}
.card{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:26px}
.card--pad-sm{padding:18px}
.card__head{padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--line-2)}
.card__head h3{font-size:1.12rem}

/* ---------- 24. Alerts / badges / toast ---------- */
.alert{display:flex;gap:11px;padding:14px 17px;border-radius:var(--r);font-size:.89rem;margin-bottom:18px;align-items:flex-start}
.alert svg{flex-shrink:0;margin-top:2px}
.alert-ok{background:var(--ok-bg);color:var(--ok)}
.alert-bad{background:var(--bad-bg);color:var(--bad)}
.alert-warn{background:var(--warn-bg);color:var(--warn)}
.alert-info{background:var(--info-bg);color:var(--info)}
.badge{display:inline-block;padding:3px 11px;border-radius:var(--r-pill);font-size:.74rem;font-weight:600;font-family:var(--f-head);letter-spacing:.04em}
.badge-ok{background:var(--ok-bg);color:var(--ok)}
.badge-bad{background:var(--bad-bg);color:var(--bad)}
.badge-warn{background:var(--warn-bg);color:var(--warn)}
.badge-info{background:var(--info-bg);color:var(--info)}
.badge-accent{background:var(--gold-100);color:var(--gold-800)}
.badge-muted{background:var(--bg-3);color:var(--muted)}
.toast-wrap{position:fixed;top:18px;right:18px;z-index:300;display:flex;flex-direction:column;gap:9px;pointer-events:none}
.toast{
  display:flex;align-items:center;gap:11px;background:var(--ink);color:#fff;
  padding:13px 19px;border-radius:var(--r);box-shadow:var(--sh-3);font-size:.89rem;
  animation:slideIn .3s var(--ease);max-width:340px;pointer-events:auto
}
.toast--ok{border-left:3px solid var(--gold-500)}
.toast--bad{border-left:3px solid var(--bad)}
@keyframes slideIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- 25. Cart / checkout ---------- */
.cart-layout{display:grid;grid-template-columns:1fr 370px;gap:30px;align-items:start}
.citem{display:grid;grid-template-columns:96px 1fr auto;gap:16px;padding:18px 0;border-bottom:1px solid var(--line-2);align-items:center}
.citem:last-child{border-bottom:0}
.citem__img{width:96px;height:96px;background:var(--bg-2);border-radius:var(--r);overflow:hidden}
.citem__img img{width:100%;height:100%;object-fit:contain;padding:8px}
.citem__n{font-family:var(--f-head);font-weight:500;color:var(--ink);font-size:.96rem;line-height:1.35;margin-bottom:5px;display:block}
.citem__n:hover{color:var(--gold-700)}
.citem__meta{font-size:.79rem;color:var(--muted)}
.citem__right{text-align:right;display:flex;flex-direction:column;gap:9px;align-items:flex-end}
.summary{position:sticky;top:calc(var(--header-h) + 16px)}
.srow{display:flex;justify-content:space-between;gap:14px;padding:9px 0;font-size:.92rem}
.srow--total{border-top:1px solid var(--line);margin-top:9px;padding-top:15px;font-family:var(--f-head);font-size:1.22rem;font-weight:700;color:var(--ink)}
.srow .free{color:var(--ok);font-weight:600}
.coupon-row{display:flex;gap:8px;margin:14px 0}
.coupon-row input{flex:1;min-width:0;padding:11px 14px;border:1px solid var(--line);border-radius:var(--r);font-size:.88rem;text-transform:uppercase}
.steps{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:34px}
.step{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:.85rem;font-weight:500}
.step__n{width:30px;height:30px;border-radius:50%;background:var(--bg-3);display:grid;place-items:center;font-family:var(--f-head);font-weight:700;font-size:.83rem}
.step.is-on{color:var(--ink)}
.step.is-on .step__n{background:var(--gold-grad);color:#2A1F00}
.step__line{width:clamp(28px,7vw,80px);height:2px;background:var(--line);margin-inline:14px}
.pay{display:grid;gap:11px}
.pay label{
  display:flex;gap:13px;align-items:flex-start;padding:16px;border:1.5px solid var(--line);
  border-radius:var(--r);cursor:pointer;transition:border-color var(--t),background var(--t)
}
.pay label:has(input:checked){border-color:var(--gold-500);background:var(--gold-100)}
.pay input{margin-top:3px;width:17px;height:17px;accent-color:var(--gold-600);flex-shrink:0}
.pay__t{font-family:var(--f-head);font-weight:600;color:var(--ink);font-size:.95rem}
.pay__d{font-size:.82rem;color:var(--muted);margin-top:3px}

/* ---------- 26. Empty state / misc ---------- */
.empty{text-align:center;padding:64px 20px}
.empty svg{color:var(--line);margin:0 auto 20px}
.empty h3{margin-bottom:9px}
.empty p{color:var(--muted);margin-bottom:22px}
.pagination{display:flex;justify-content:center;gap:6px;margin-top:40px;flex-wrap:wrap}
.pagination a,.pagination span{
  min-width:40px;height:40px;padding:0 12px;border-radius:var(--r-sm);
  display:grid;place-items:center;font-size:.89rem;font-weight:500;
  border:1px solid var(--line);color:var(--body);transition:all var(--t)
}
.pagination a:hover{border-color:var(--gold-500);color:var(--gold-700);background:var(--gold-100)}
.pagination .current{background:var(--gold-grad);border-color:transparent;color:#2A1F00;font-weight:700}
.pagination .dots{border:0}
.skeleton{background:linear-gradient(90deg,var(--bg-3) 25%,var(--line-2) 37%,var(--bg-3) 63%);background-size:400% 100%;animation:shimmer 1.4s infinite;border-radius:var(--r)}
@keyframes shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
.map-wrap{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2);line-height:0}
.map-wrap iframe{width:100%;height:380px;border:0}

/* ---------- 27. Account ---------- */
.acct{display:grid;grid-template-columns:250px 1fr;gap:30px;align-items:start}
.acct__nav{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden}
.acct__nav a{display:flex;align-items:center;gap:11px;padding:14px 18px;font-size:.91rem;border-bottom:1px solid var(--line-2);transition:background var(--t),color var(--t)}
.acct__nav a:last-child{border-bottom:0}
.acct__nav a:hover{background:var(--gold-100);color:var(--gold-800)}
.acct__nav a.is-active{background:var(--gold-100);color:var(--gold-800);font-weight:600;box-shadow:inset 3px 0 0 var(--gold-500)}
.auth-wrap{max-width:440px;margin-inline:auto}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.data-table{min-width:560px;font-size:.89rem}
.data-table th{text-align:left;padding:12px 14px;background:var(--bg-2);font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600;white-space:nowrap}
.data-table td{padding:14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.data-table tbody tr:hover{background:var(--bg-2)}

/* ---------- 28. Responsive ---------- */
@media (max-width:1100px){
  .mega__grid{grid-template-columns:repeat(3,1fr)}
  .mega__promo{display:none}
  .footer__grid{grid-template-columns:1fr 1fr}
  .shop{grid-template-columns:1fr}
  .filters{position:static;max-height:none;display:none}
  .filters.is-open{display:block;margin-bottom:22px}
  .filter-toggle{display:inline-flex}
}
@media (max-width:980px){
  :root{--header-h:78px}
  .nav{display:none}
  .burger{display:grid}
  .products,.cats{grid-template-columns:repeat(3,1fr)}
  .finishes{grid-template-columns:repeat(3,1fr)}
  .trust__grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .pdp{grid-template-columns:1fr;gap:30px}
  .cart-layout{grid-template-columns:1fr}
  .summary{position:static}
  .acct{grid-template-columns:1fr}
  .splitbox{grid-template-columns:1fr}
  .splitbox__img{min-height:280px}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .header__main{gap:12px;padding:12px 0}
  .logo img{height:36px}
  .searchbar{order:3;flex:0 0 100%;max-width:none}
  .header__main{flex-wrap:wrap}
  .topbar__links{display:none}
  .topbar .wrap{justify-content:center}
  .products,.cats{grid-template-columns:repeat(2,1fr);gap:14px}
  .hero__slide{min-height:clamp(380px,60vh,480px)}
  .hero__arrow{display:none}
  .citem{grid-template-columns:76px 1fr;gap:12px}
  .citem__img{width:76px;height:76px}
  .citem__right{grid-column:2;align-items:flex-start;flex-direction:row;justify-content:space-between;width:100%}
  .gallery__thumbs{grid-template-columns:repeat(4,1fr)}
  .section{padding:44px 0}
  .fab a,.fab button{width:47px;height:47px}
  .step__line{margin-inline:7px}
  .step span:not(.step__n){display:none}
}
@media (max-width:520px){
  .wrap{padding-inline:16px}
  .finishes{grid-template-columns:repeat(2,1fr)}
  .g-4,.g-3,.g-2{grid-template-columns:1fr}
  .trust__grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr;gap:28px}
  .pcard__body{padding:12px}
  .pcard__name{font-size:.9rem}
  .price{font-size:1rem}
  .btn{padding:12px 24px;font-size:.8rem}
  .card{padding:18px}
}

/* ---------- 29. Motion & print ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}
@media print{
  .topbar,.header,.nav,.footer,.fab,.btn,.crumbs{display:none !important}
  body{font-size:12pt;color:#000}
  .wrap{max-width:none;padding:0}
}

/* ---------- 30. Reveal-on-scroll safety ----------
   Elements are visible by default; main.js opts them into the animation.
   If JavaScript fails or is disabled, nothing is ever hidden. */
[data-reveal]{opacity:1;transform:none}

/* Rating stars render solid, not outlined */
.stars .ico,.stars svg{fill:currentColor;stroke-width:0}

/* Grid children must be allowed to shrink below their content width */
.grid > *,.products > *,.cats > *,.finishes > *,.shop > *,.cart-layout > *,.acct > *,.pdp > *{min-width:0}
.card,.tablewrap,.table-wrap{min-width:0;max-width:100%}

/* ---------- 31. Colour swatch picker (product page) ---------- */
.swatches{margin:18px 0;padding:16px 0;border-block:1px solid var(--line-2)}
.swatches__head{font-size:.86rem;color:var(--body);margin-bottom:11px}
.swatches__head strong{color:var(--ink);font-weight:600}
.swatches__head span{color:var(--gold-700);font-weight:600}
.swatches__row{display:flex;flex-wrap:wrap;gap:9px}
.swatchbtn{
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;
  border:1.5px solid var(--line);border-radius:var(--r-pill);background:#fff;
  font-size:.83rem;color:var(--body);cursor:pointer;
  transition:border-color var(--t),color var(--t),box-shadow var(--t),background var(--t)
}
.swatchbtn .swatch{width:20px;height:20px;flex-shrink:0;box-shadow:inset 0 1px 3px rgba(0,0,0,.22)}
.swatchbtn:hover{border-color:var(--gold-400);color:var(--ink)}
.swatchbtn.is-on{border-color:var(--gold-600);background:var(--gold-100);color:var(--gold-800);font-weight:600;
  box-shadow:0 0 0 3px var(--gold-100)}
.price--old[hidden],.price--off[hidden]{display:none}

/* Mini swatches on a product card */
.pcard__swatches{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.pcard__swatches .swatch{width:14px;height:14px;box-shadow:inset 0 1px 2px rgba(0,0,0,.2)}
.pcard__swatches .more{font-size:.74rem;color:var(--muted)}
.price--from{font-size:.72rem;color:var(--muted);font-weight:500;letter-spacing:.04em;text-transform:uppercase;margin-right:2px}