/* ==========================================================================
   Shabbir Husain Trading LLC — Core Stylesheet
   Brand: warm near-black (#161412) + bronze gold (#A9813F), taken from the business card
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* Palette taken directly from the company business card:
     warm near-black + bronze gold + white. */
  --ink-900:#0C0B0A;
  --ink-800:#161412;
  --ink-700:#221F1B;
  --ink-600:#332E27;
  --ink-100:#E9E4DC;

  /* Dark SURFACES are separate from dark TEXT. The big bands, the navbar, the
     page head, the CTA and the footer read from these three, so re-colouring
     the dark areas from Theme settings never touches headings or icons. */
  --surface-dark:#161412;
  --surface-dark-2:#332E27;
  --surface-deep:#0C0B0A;

  /* What sits ON those surfaces. Change these together with the surface and a
     dark band becomes a light one without a single line of markup changing. */
  --on-dark:#D6D0C6;                    /* body text          */
  --on-dark-2:#B8B1A5;                  /* muted / lead text  */
  --on-dark-h:#FFFFFF;                  /* headings           */
  --on-dark-eyebrow:var(--gold-400);    /* small label above a heading */
  --on-dark-fill:rgba(255,255,255,.05); /* card fill          */
  --on-dark-fill-2:rgba(255,255,255,.08);
  --on-dark-line:rgba(255,255,255,.11); /* card border        */
  --on-dark-grid:rgba(255,255,255,.05); /* decorative grid    */
  --on-dark-chip:var(--ink-900);        /* text on a gold chip */

  --gold-600:#8A6A2F;
  --gold-500:#A9813F;
  --gold-400:#C9A66B;
  --gold-100:#F4EBDA;

  --ink:#14120F;
  --body:#4B453E;
  --muted:#8A8177;
  --line:#E6E0D7;
  --surface:#FFFFFF;
  --surface-2:#F9F7F3;
  --surface-3:#F0ECE5;

  --radius-sm:8px;
  --radius:14px;
  --radius-lg:22px;

  --shadow-sm:0 1px 2px rgba(20,16,12,.06), 0 2px 8px rgba(20,16,12,.05);
  --shadow:0 10px 30px -12px rgba(20,16,12,.18);
  --shadow-lg:0 30px 60px -25px rgba(20,16,12,.32);

  --ease:cubic-bezier(.22,1,.36,1);
  /* The site fills a wide monitor instead of sitting in a narrow column.
     Wide screens get more COLUMNS (see the min-width rules further down),
     not fatter cards — a 380px-wide product tile just looks empty. */
  --container:1800px;

  --font-sans:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  --header-h:76px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:100px}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.65;
  color:var(--body);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{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,h5{color:var(--ink); margin:0 0 .5em; font-weight:800; line-height:1.15; letter-spacing:-.02em}
p{margin:0 0 1em}
ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:2px solid var(--gold-500); outline-offset:3px; border-radius:4px}

/* ---------- Layout ---------- */
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px}
@media (min-width:1500px){ .container{padding-inline:40px} }
.section{padding:96px 0}
.section--tight{padding:68px 0}
.section--alt{background:var(--surface-2)}
.section--dark{background:var(--surface-dark); color:var(--on-dark)}
.section--dark h2,.section--dark h3,.section--dark h4{color:var(--on-dark-h)}

.grid{display:grid; gap:24px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}

/* ---------- Typography helpers ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-600); margin-bottom:16px;
}
.eyebrow::before{content:''; width:26px; height:2px; background:var(--gold-500); border-radius:2px}
.section--dark .eyebrow{color:var(--on-dark-eyebrow)}

.h-display{font-size:clamp(2.3rem,5.2vw,4rem); line-height:1.06; letter-spacing:-.035em}
.h-section{font-size:clamp(1.85rem,3.4vw,2.75rem); letter-spacing:-.03em}
.serif{font-family:var(--font-serif); font-style:italic; font-weight:500; letter-spacing:-.01em}
.gold{color:var(--gold-500)}
.lead{font-size:clamp(1rem,1.35vw,1.125rem); color:var(--body); max-width:62ch}
.section--dark .lead{color:var(--on-dark-2)}
.center{text-align:center}
.center .lead{margin-inline:auto}
.sec-head{max-width:720px; margin-bottom:52px}
.sec-head.center{margin-inline:auto}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border-radius:10px;
  font-size:14.5px; font-weight:700; letter-spacing:.01em;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  white-space:nowrap;
}
.btn svg{width:17px; height:17px; flex:none}
.btn:hover{transform:translateY(-2px)}
.btn--gold{background:var(--gold-500); color:var(--ink-900); box-shadow:0 8px 20px -8px rgba(169,129,63,.6)}
.btn--gold:hover{background:var(--gold-400); box-shadow:0 14px 28px -10px rgba(169,129,63,.65)}
.btn--navy{background:var(--ink-800); color:#fff}
.btn--navy:hover{background:var(--ink-700)}
.btn--ghost{border:1.5px solid rgba(255,255,255,.32); color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.6)}
.btn--outline{border:1.5px solid var(--line); color:var(--ink); background:#fff}
.btn--outline:hover{border-color:var(--ink-800); background:var(--ink-800); color:#fff}
.btn--sm{padding:10px 18px; font-size:13.5px}
.btn--block{width:100%}

/* ---------- Header ---------- */
.header{
  position:sticky; top:0; z-index:100;
  background:#fff; border-bottom:1px solid var(--line);
}
.topbar{background:var(--ink-900); color:#ABA298; font-size:12.5px}
.topbar .container{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:38px; flex-wrap:wrap}
/* every top-bar item is an icon + label on one line, icon vertically centred */
.topbar-l > *,.topbar-r > *{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap; transition:color .25s;
}
.topbar a:hover{color:var(--gold-400)}
.topbar svg{width:14px; height:14px; flex:none; color:var(--gold-500)}
.topbar-l,.topbar-r{display:flex; align-items:center; gap:22px; flex-wrap:wrap}

.header-main{background:#fff}
.hrow{display:flex; align-items:center; gap:26px; min-height:88px}
.brand{display:flex; align-items:center; gap:12px; flex:none}
.brand img{height:50px; width:auto}
.brand-txt{display:flex; flex-direction:column; line-height:1.05}
.brand-name{font-size:16.5px; font-weight:800; color:var(--ink-800); letter-spacing:-.02em}
.brand-sub{font-size:9.5px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-600)}

/* ---------- Search ---------- */
.searchbar{
  position:relative; flex:1 1 auto; min-width:0; display:flex; align-items:center;
  height:50px; border:1.5px solid var(--line); border-radius:11px; background:var(--surface-2);
  transition:border-color .25s, box-shadow .25s, background-color .25s;
}
.searchbar:focus-within{background:#fff; border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(169,129,63,.14)}
.searchbar__ico{position:absolute; left:15px; display:grid; place-items:center; pointer-events:none}
.searchbar__ico svg{width:17px; height:17px; color:var(--muted)}
.searchbar__input{
  flex:1 1 auto; min-width:0; height:100%; padding:0 12px 0 42px;
  border:0; background:transparent; font-size:14.5px; color:var(--ink);
}
.searchbar__input::placeholder{color:var(--muted)}
.searchbar__input:focus{outline:none}
.searchbar__input::-webkit-search-cancel-button{-webkit-appearance:none}
.searchbar__btn{
  flex:none; display:inline-flex; align-items:center; gap:8px; height:38px; margin-right:6px;
  padding:0 18px; border-radius:8px; background:var(--ink-800); color:#fff;
  font-size:13.5px; font-weight:700; transition:background-color .25s;
}
.searchbar__btn:hover{background:var(--gold-500); color:var(--ink-900)}
.searchbar__btn svg{width:16px; height:16px}

.search-sug{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:120;
  background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg);
  overflow:hidden; max-height:60vh; overflow-y:auto;
}
.search-sug__head{padding:10px 16px; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); font-weight:700; background:var(--surface-2); border-bottom:1px solid var(--line)}
.search-sug a{display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid var(--line)}
.search-sug a:last-child{border-bottom:0}
.search-sug a:hover,.search-sug a.is-cursor{background:var(--surface-2)}
.search-sug img{width:40px; height:40px; padding:4px; object-fit:contain; border:1px solid var(--line);
  border-radius:8px; background:var(--surface-2); flex:none}
.search-sug b{display:block; font-size:14px; font-weight:700; color:var(--ink); line-height:1.3}
.search-sug span{font-size:12px; color:var(--muted)}
.search-sug__all{display:block; padding:12px 16px; text-align:center; font-size:13px; font-weight:700;
  color:var(--ink-800); background:var(--surface-2)}
.search-sug__none{padding:18px 16px; font-size:13.5px; color:var(--muted)}

.hrow-actions{display:flex; align-items:center; gap:12px; flex:none}
.cart-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:11px; border:1px solid var(--line); background:#fff;
  transition:border-color .25s, transform .25s var(--ease);
}
.cart-btn:hover{border-color:var(--ink-800); transform:translateY(-2px)}
.cart-btn svg{width:19px; height:19px; color:var(--ink-800)}
.cart-count{
  position:absolute; top:-7px; right:-7px; min-width:20px; height:20px; padding:0 5px;
  display:grid; place-items:center; border-radius:10px;
  background:var(--gold-500); color:#fff;
  font-size:11px; font-weight:800; border:2px solid #fff;
}
.cart-count[data-empty="1"]{display:none}

/* main nav bar */
.navbar2{background:var(--surface-dark)}
.nav{display:flex; align-items:center; gap:2px}
.nav a{
  position:relative; padding:14px 18px;
  font-size:14px; font-weight:600; letter-spacing:.01em; color:var(--on-dark);
  transition:color .25s, background-color .25s;
}
.nav a:hover{color:var(--on-dark-h); background:var(--on-dark-fill)}
.nav a.is-active{color:var(--on-dark-eyebrow)}
.nav a.is-active::after{
  content:''; position:absolute; left:18px; right:18px; bottom:0; height:2px;
  background:var(--gold-500);
}

.burger{display:none; width:46px; height:46px; border-radius:11px; border:1px solid var(--line); place-items:center}
.burger span{display:block; width:18px; height:2px; background:var(--ink-800); border-radius:2px; position:relative; transition:.3s var(--ease)}
.burger span::before,.burger span::after{content:''; position:absolute; left:0; width:18px; height:2px; background:var(--ink-800); border-radius:2px; transition:.3s var(--ease)}
.burger span::before{top:-6px} .burger span::after{top:6px}
.burger.is-open span{background:transparent}
.burger.is-open span::before{top:0; transform:rotate(45deg)}
.burger.is-open span::after{top:0; transform:rotate(-45deg)}

/* ---------- Slider ---------- */
.slider{position:relative; height:450px; overflow:hidden; background:var(--ink-900)}
.slider-track{position:absolute; inset:0}
.slide{
  position:absolute; inset:0; display:flex; align-items:center;
  opacity:0; visibility:hidden;
  transition:opacity .9s var(--ease), visibility 0s linear .9s;
}
.slide.is-active{opacity:1; visibility:visible; transition:opacity .9s var(--ease), visibility 0s}
.slide__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
  transform:scale(1.05); transition:transform 8s linear; z-index:0;
}
.slide.is-active .slide__bg{transform:scale(1)}
.slide::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(12,11,10,.92) 0%, rgba(12,11,10,.78) 42%, rgba(12,11,10,.35) 72%, rgba(12,11,10,.15) 100%);
}
.slide .container{position:relative; z-index:2}
.slide__copy{max-width:620px; color:#fff}
.slide__eyebrow{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:14px;
  font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-400);
}
.slide__eyebrow::before{content:''; width:26px; height:2px; background:var(--gold-500); border-radius:2px}
.slide__title{
  color:#fff; font-size:clamp(1.7rem,3.4vw,2.7rem); line-height:1.12; letter-spacing:-.03em; margin-bottom:14px;
}
.slide__text{color:#C4BCAF; font-size:1rem; max-width:52ch; margin-bottom:26px}
.slide__cta{display:flex; gap:13px; flex-wrap:wrap}

.slider-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24); color:#fff;
  backdrop-filter:blur(6px); transition:background-color .25s, border-color .25s;
}
.slider-arrow:hover{background:var(--gold-500); border-color:var(--gold-500); color:var(--ink-900)}
.slider-arrow svg{width:20px; height:20px}
.slider-arrow--prev{left:20px} .slider-arrow--next{right:20px}
.slider-dots{position:absolute; left:0; right:0; bottom:20px; z-index:3; display:flex; justify-content:center; gap:9px}
.slider-dot{width:26px; height:4px; border-radius:3px; background:rgba(255,255,255,.32); transition:background-color .3s, width .3s var(--ease)}
.slider-dot.is-active{background:var(--gold-500); width:40px}

/* ---------- Brand rail ---------- */
.rail{padding:34px 0; background:#fff; border-bottom:1px solid var(--line); overflow:hidden}
.rail-label{text-align:center; font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:24px}
.marquee{position:relative; overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);}
.marquee-track{display:flex; align-items:center; gap:66px; width:max-content; animation:marquee 40s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{display:flex; align-items:center; height:52px; flex:none}
.marquee-item img{
  height:100%; width:auto; max-width:180px; object-fit:contain;
  transition:transform .35s var(--ease);
}
.marquee-item:hover img{transform:scale(1.06)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Cards ---------- */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.card:hover{transform:translateY(-5px); box-shadow:var(--shadow); border-color:#DCD5CA}

/* Category card */
.cat-card{overflow:hidden; display:flex; flex-direction:column}
.cat-card__media{
  position:relative; aspect-ratio:16/10; overflow:hidden; padding:16px;
  background:linear-gradient(150deg,#FBFCFD 0%,#EFEAE2 100%);
  border-bottom:1px solid var(--line);
}
.cat-card__media img{width:100%; height:100%; object-fit:contain; transition:transform .6s var(--ease)}
.cat-card:hover .cat-card__media img{transform:scale(1.06)}
.cat-card__n{
  position:absolute; top:12px; left:12px; z-index:3;
  font-size:11px; font-weight:800; letter-spacing:.08em; color:var(--gold-600);
  background:#fff; border:1px solid var(--line); border-radius:6px; padding:3px 8px;
}
.cat-card__body{padding:20px 22px 22px; display:flex; flex-direction:column; flex:1}
.cat-card__body h3{font-size:16.5px; margin-bottom:6px; letter-spacing:-.02em}
.cat-card__body p{font-size:13.5px; color:var(--muted); margin-bottom:16px; line-height:1.55}
.cat-card__foot{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; border-top:1px solid var(--line);
  font-size:12.5px; font-weight:700; color:var(--ink-800);
}
.cat-card__foot .n{color:var(--muted); font-weight:600}
.cat-card__foot .go{display:inline-flex; align-items:center; gap:6px; transition:gap .3s var(--ease)}
.cat-card:hover .cat-card__foot .go{gap:11px; color:var(--gold-600)}
.cat-card__foot svg{width:15px; height:15px}

/* Product card */
.prod-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}

/* Wide monitors get an extra column rather than fatter cards — a 350px-wide
   product tile is mostly empty space. This keeps the tile at its designed size
   and fills the screen with more stock instead. */
@media (min-width:1700px){
  .prod-grid{grid-template-columns:repeat(5,1fr)}
  .g-3{grid-template-columns:repeat(4,1fr)}
  .ind-grid{grid-template-columns:repeat(5,1fr)}
}
.prod-card{overflow:hidden; display:flex; flex-direction:column; background:#fff}
.prod-card__media{
  position:relative; aspect-ratio:4/3; overflow:hidden; padding:14px;
  background:linear-gradient(150deg,#FCFAF7 0%,#F1ECE4 100%); border-bottom:1px solid var(--line);
}
.prod-card__media img{width:100%; height:100%; object-fit:contain; transition:transform .6s var(--ease)}
.prod-card:hover .prod-card__media img{transform:scale(1.06)}
.prod-card__tag{
  position:absolute; z-index:2; top:10px; left:10px; font-size:10.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-700); background:rgba(255,255,255,.92);
  border:1px solid var(--line); border-radius:5px; padding:3px 7px;
}
.prod-card__body{padding:16px 18px 18px; display:flex; flex-direction:column; flex:1}
.prod-card__cat{font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--gold-600); margin-bottom:6px}
.prod-card__body h3{font-size:15px; font-weight:700; margin-bottom:8px; letter-spacing:-.015em; line-height:1.3}
.prod-card__body h3 a:hover{color:var(--ink-600)}
.prod-card__meta{font-size:12.5px; color:var(--muted); margin-bottom:14px; line-height:1.5}
.prod-card__act{margin-top:auto; display:grid; gap:10px; justify-items:stretch}
.prod-card__act .btn{width:100%; padding:11px 10px; font-size:13px; white-space:normal}
.prod-card__link{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-size:12.5px; font-weight:700; color:var(--muted);
  transition:color .25s, gap .3s var(--ease);
}
.prod-card__link svg{width:14px; height:14px}
.prod-card__link:hover{color:var(--ink-800); gap:10px}

/* Feature / value cards */
.feat{padding:30px 26px; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease)}
.feat:hover{transform:translateY(-5px); box-shadow:var(--shadow); border-color:#DCD5CA}
.feat__ico{
  width:52px; height:52px; border-radius:13px; display:grid; place-items:center; margin-bottom:20px;
  background:linear-gradient(140deg, var(--surface-dark), var(--surface-dark-2));
}
.feat__ico svg{width:24px; height:24px; color:var(--gold-400)}
.feat h3{font-size:17px; margin-bottom:9px}
.feat p{font-size:14px; color:var(--body); margin:0; line-height:1.65}

/* Dark feature variant */
.section--dark .feat{background:var(--on-dark-fill); border-color:var(--on-dark-line)}
.section--dark .feat:hover{background:var(--on-dark-fill-2); border-color:rgba(169,129,63,.35); box-shadow:none}
.section--dark .feat p{color:var(--on-dark-2)}
.section--dark .feat__ico{background:rgba(169,129,63,.15); border:1px solid rgba(169,129,63,.3)}

/* ---------- Stats band ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.stat{background:#fff; padding:34px 24px; text-align:center}
.stat b{display:block; font-size:clamp(1.9rem,3.4vw,2.6rem); font-weight:800; color:var(--ink-800); letter-spacing:-.035em; line-height:1.05}
.stat b .u{color:var(--gold-500)}
.stat span{font-size:13px; color:var(--muted); font-weight:600; letter-spacing:.02em}

/* ---------- Split section ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.split--rev .split__media{order:2}
.media-frame{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  background:var(--surface-3); aspect-ratio:4/3; box-shadow:var(--shadow-lg);
  border:1px solid var(--line);
}
/* a real product shot fills the frame — no watermark, no letterboxing */
.media-frame img{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; max-width:none; object-fit:cover; object-position:center;
  transition:transform 1.2s var(--ease);
}
.media-frame:hover img{transform:scale(1.03)}

/* variant: dark card with the brand mark centred, instead of a photo */
.media-frame--logo{
  background:linear-gradient(150deg,#161412,#332E27); border-color:transparent;
  display:grid; place-items:center;
}
.media-frame--logo::after{
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:40px 40px;
}
.media-frame--logo img{
  position:relative; inset:auto; z-index:1;
  width:auto; height:auto; max-width:190px; max-height:62%; object-fit:contain; opacity:.95;
}
.media-frame--logo:hover img{transform:scale(1.04)}
.media-badge{
  position:absolute; z-index:2; right:-16px; bottom:24px;
  background:#fff; border-radius:14px; padding:16px 20px; box-shadow:var(--shadow-lg); text-align:center;
}
.media-badge b{display:block; font-size:24px; font-weight:800; color:var(--ink-800); letter-spacing:-.03em}
.media-badge span{display:block; font-size:11.5px; color:var(--muted); font-weight:600; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap}

.checklist{margin:26px 0 0}
.checklist li{position:relative; padding-left:32px; margin-bottom:13px; font-size:14.5px; color:var(--body)}
.checklist li::before{
  content:''; position:absolute; left:0; top:5px; width:19px; height:19px; border-radius:50%;
  background:var(--gold-100);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A6A2F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:12px; background-position:center; background-repeat:no-repeat;
}
.section--dark .checklist li{color:var(--on-dark-2)}

/* ---------- Page head ---------- */
.pagehead{position:relative; background:var(--surface-dark); color:var(--on-dark-h); padding:64px 0 68px; overflow:hidden}
.pagehead::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(760px 320px at 82% 0%, rgba(169,129,63,.22), transparent 60%);
}
.pagehead::after{
  content:''; position:absolute; inset:0; opacity:.4;
  background-image:linear-gradient(var(--on-dark-grid) 1px,transparent 1px),linear-gradient(90deg,var(--on-dark-grid) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(700px 300px at 15% 60%, #000, transparent 75%);
  -webkit-mask-image:radial-gradient(700px 300px at 15% 60%, #000, transparent 75%);
}
.pagehead .container{position:relative; z-index:1}
.pagehead h1{color:var(--on-dark-h); font-size:clamp(2rem,4vw,3rem); margin-bottom:12px; letter-spacing:-.035em}
.pagehead p{color:var(--on-dark-2); max-width:58ch; margin:0; font-size:1.02rem}
.crumb{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--on-dark-2); margin-bottom:18px; flex-wrap:wrap}
.crumb a:hover{color:var(--on-dark-eyebrow)}
.crumb span{color:var(--on-dark-2); opacity:.6}
.crumb b{color:var(--on-dark-h); font-weight:600}

/* ---------- Toolbar / filters ---------- */
.toolbar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:16px 20px; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  margin-bottom:30px; box-shadow:var(--shadow-sm);
}
.toolbar .count{font-size:13.5px; color:var(--muted); margin-right:auto}
.toolbar .count b{color:var(--ink)}
.field{position:relative; display:flex; align-items:center}
.field svg{position:absolute; left:13px; width:16px; height:16px; color:var(--muted); pointer-events:none}
.input,.select{
  height:44px; padding:0 14px; border:1px solid var(--line); border-radius:10px; background:#fff;
  font-size:14px; color:var(--ink); transition:border-color .25s, box-shadow .25s; width:100%;
}
.field .input{padding-left:38px; min-width:250px}
/* toolbar with no count beside it: let the search box take the free space */
.field--grow{flex:1 1 auto; min-width:0}
.field--grow .input{width:100%; min-width:0}
.input:focus,.select:focus,textarea.input:focus{outline:none; border-color:var(--ink-600); box-shadow:0 0 0 3px rgba(169,129,63,.18)}
.select{appearance:none; padding-right:36px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8177' stroke-width='2.4' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:15px}
textarea.input{height:auto; padding:12px 14px; min-height:130px; resize:vertical; line-height:1.6}

/* Sidebar filter */
.shop{display:grid; grid-template-columns:264px 1fr; gap:34px; align-items:start}
.side{position:sticky; top:112px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.side h4{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding:18px 20px 12px; margin:0; border-bottom:1px solid var(--line)}
.side-list{padding:8px}
.side-list a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 12px; border-radius:8px; font-size:13.5px; font-weight:600; color:var(--body);
  transition:background-color .25s, color .25s;
}
.side-list a:hover{background:var(--surface-2); color:var(--ink-800)}
.side-list a.is-active{background:var(--ink-800); color:#fff}
.side-list a.is-active .n{color:var(--gold-400)}
.side-list .n{font-size:11.5px; font-weight:700; color:var(--muted)}

/* ---------- Product detail ---------- */
.pd{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}
.pd-media{
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; padding:34px;
  background:linear-gradient(150deg,#FCFAF7 0%,#EFEAE2 100%); aspect-ratio:1/1;
}
.pd-media img{width:100%; height:100%; object-fit:contain}
.pd h1{font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:14px}
.pd-cat{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-600); margin-bottom:10px}
.pd-note{
  display:flex; gap:12px; padding:16px 18px; border-radius:12px;
  background:var(--gold-100); border:1px solid #E8DCC0; margin:24px 0;
}
.pd-note svg{width:20px; height:20px; color:var(--gold-600); flex:none; margin-top:2px}
.pd-note p{margin:0; font-size:13.5px; color:#6B5324; line-height:1.55}
.spec-table{width:100%; border-collapse:collapse; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-top:8px}
.spec-table th,.spec-table td{padding:12px 16px; font-size:13.5px; text-align:left; border-bottom:1px solid var(--line)}
.spec-table th{width:40%; background:var(--surface-2); font-weight:700; color:var(--ink)}
.spec-table td{color:var(--body)}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}
.qty{display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:10px; overflow:hidden; height:48px}
.qty button{width:44px; height:100%; display:grid; place-items:center; font-size:19px; color:var(--ink-800); transition:background-color .25s}
.qty button:hover{background:var(--surface-2)}
.qty input{width:56px; height:100%; border:0; text-align:center; font-weight:700; font-size:15px; color:var(--ink)}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.pd-trust{display:flex; gap:26px; flex-wrap:wrap; margin-top:28px; padding-top:24px; border-top:1px solid var(--line); font-size:13.5px; color:var(--muted)}
.pd-trust span{display:inline-flex; align-items:center; gap:9px; white-space:nowrap}
.pd-trust svg{width:18px; height:18px; color:var(--gold-600); flex:none}
.pd-act{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:26px}
.pd-act .btn{height:48px}

/* Tabs */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:26px; overflow-x:auto}
.tab{padding:13px 20px; font-size:14px; font-weight:700; color:var(--muted); border-bottom:2px solid transparent; white-space:nowrap; transition:color .25s, border-color .25s}
.tab:hover{color:var(--ink-800)}
.tab.is-active{color:var(--ink-800); border-bottom-color:var(--gold-500)}
.tabpane{display:none} .tabpane.is-active{display:block}

/* ---------- Cart table ---------- */
.cart-wrap{display:grid; grid-template-columns:1fr 348px; gap:32px; align-items:start}
.cart-table{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.cart-table th{padding:14px 18px; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-align:left; background:var(--surface-2); border-bottom:1px solid var(--line); font-weight:700}
.cart-table td{padding:16px 18px; border-bottom:1px solid var(--line); vertical-align:middle}
.cart-table tr:last-child td{border-bottom:0}
.cart-item{display:flex; align-items:center; gap:14px}
.cart-item img{width:58px; height:58px; padding:6px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); object-fit:contain; flex:none}
.cart-item b{display:block; font-size:14.5px; color:var(--ink); font-weight:700; line-height:1.3}
.cart-item span{font-size:12px; color:var(--muted)}
.icon-btn{width:36px; height:36px; border-radius:9px; border:1px solid var(--line); display:grid; place-items:center; transition:.25s}
.icon-btn:hover{border-color:#E05252; background:#FEF2F2}
.icon-btn svg{width:16px; height:16px; color:var(--muted)}
.icon-btn:hover svg{color:#E05252}
.summary{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; position:sticky; top:112px}
.summary h3{font-size:17px; margin-bottom:18px}
.summary-row{display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px dashed var(--line); font-size:14px}
.summary-row:last-of-type{border-bottom:0}
.summary-row span{color:var(--muted)} .summary-row b{color:var(--ink)}

.empty{text-align:center; padding:72px 24px; background:#fff; border:1px solid var(--line); border-radius:var(--radius)}
.empty svg{width:56px; height:56px; color:#D3CCC2; margin:0 auto 18px}
.empty h3{font-size:19px; margin-bottom:8px}
.empty p{color:var(--muted); font-size:14.5px; max-width:42ch; margin:0 auto 22px}

/* ---------- Quote page: selected products ---------- */
.qlist{display:grid; gap:10px}
.qitem{
  display:flex; align-items:center; gap:14px;
  padding:10px 12px; border:1px solid var(--line); border-radius:11px; background:var(--surface-2);
}
.qitem img{width:44px; height:44px; padding:4px; flex:none; object-fit:contain;
  border:1px solid var(--line); border-radius:8px; background:#fff}
.qitem__txt{flex:1; min-width:0}
.qitem__txt b{display:block; font-size:14px; font-weight:700; color:var(--ink); line-height:1.3}
.qitem__txt span{font-size:12px; color:var(--muted)}
.qty--sm{height:38px; flex:none; background:#fff}
.qty--sm button{width:32px; font-size:16px}
.qty--sm input{width:42px; font-size:14px; background:transparent}
.qlist__foot{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:14px; font-size:13px; color:var(--muted);
}
.qlist__foot span:last-child{display:flex; gap:16px}
.qlist__foot a,.qlist__foot button{font-weight:700; color:var(--ink-800); transition:color .25s}
.qlist__foot a:hover{color:var(--gold-600)}
.qlist__foot button:hover{color:#E05252}

/* ---------- Forms ---------- */
.form-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:36px; box-shadow:var(--shadow-sm)}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.form-row{display:flex; flex-direction:column; gap:7px}
.form-row.full{grid-column:1/-1}
.form-row label{font-size:13px; font-weight:700; color:var(--ink); letter-spacing:.01em}
.form-row label .req{color:#D9534F}
.form-hint{font-size:12px; color:var(--muted)}
.fieldset-title{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-600); font-weight:800; margin:8px 0 2px; grid-column:1/-1}
.check{display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--body); grid-column:1/-1}
.check input{width:17px; height:17px; margin-top:2px; accent-color:var(--ink-800); flex:none}

/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 400px; gap:34px; align-items:start}
.info-card{background:var(--surface-dark); color:var(--on-dark); border-radius:var(--radius-lg); padding:32px; position:relative; overflow:hidden}
.info-card::before{content:''; position:absolute; inset:0; background:radial-gradient(500px 260px at 100% 0%, rgba(169,129,63,.2), transparent 62%)}
.info-card > *{position:relative}
.info-card h3{color:var(--on-dark-h); font-size:19px; margin-bottom:6px}
.info-card > p{font-size:13.5px; color:var(--on-dark-2); margin-bottom:26px}
.info-item{display:flex; gap:15px; padding:16px 0; border-bottom:1px solid var(--on-dark-line)}
.info-item:last-child{border-bottom:0}
.info-item .ic{width:42px; height:42px; border-radius:11px; background:rgba(169,129,63,.15); border:1px solid rgba(169,129,63,.3); display:grid; place-items:center; flex:none}
.info-item .ic svg{width:18px; height:18px; color:var(--on-dark-eyebrow)}
.info-item b{display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-2); font-weight:700; margin-bottom:3px}
.info-item a,.info-item p{color:var(--on-dark-h); font-size:14.5px; margin:0; font-weight:600; line-height:1.5}
.info-item a:hover{color:var(--gold-400)}
.map{border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); height:400px; background:var(--surface-3)}
.map iframe{width:100%; height:100%; border:0; display:block}

/* ---------- CTA band ---------- */
.cta{position:relative; overflow:hidden; background:var(--surface-dark); color:var(--on-dark-h); border-radius:var(--radius-lg); padding:60px 56px}
.cta::before{content:''; position:absolute; inset:0; background:radial-gradient(680px 340px at 88% 10%, rgba(169,129,63,.26), transparent 62%)}
.cta::after{content:''; position:absolute; inset:0; opacity:.35;
  background-image:linear-gradient(var(--on-dark-grid) 1px,transparent 1px),linear-gradient(90deg,var(--on-dark-grid) 1px,transparent 1px);
  background-size:48px 48px}
.cta-inner{position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap}
.cta h2{color:var(--on-dark-h); font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:10px}
.cta p{color:var(--on-dark-2); margin:0; max-width:52ch}
.cta-act{display:flex; gap:13px; flex-wrap:wrap}

/* ---------- Footer ---------- */
.footer{background:var(--surface-deep); color:#9E958A; padding:72px 0 0; font-size:14px}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:44px; padding-bottom:52px}
.footer h4{color:#fff; font-size:13px; letter-spacing:.13em; text-transform:uppercase; margin-bottom:20px; font-weight:700}
.footer a{transition:color .25s}
.footer a:hover{color:var(--gold-400)}
.footer-brand img{height:52px; margin-bottom:18px}
.footer-brand p{font-size:13.5px; line-height:1.7; max-width:34ch; color:#8F877C}
.footer-links li{margin-bottom:11px; font-size:13.5px}
.foot-contact li{display:flex; gap:12px; margin-bottom:15px; font-size:13.5px; line-height:1.6}
.foot-contact svg{width:16px; height:16px; color:var(--gold-500); flex:none; margin-top:3px}
.socials{display:flex; gap:10px; margin-top:22px}
.socials a{width:38px; height:38px; border-radius:10px; border:1px solid rgba(255,255,255,.14); display:grid; place-items:center; transition:.28s var(--ease)}
.socials a:hover{background:var(--gold-500); border-color:var(--gold-500); transform:translateY(-3px)}
.socials svg{width:16px; height:16px}
.socials a:hover svg{color:var(--ink-900)}

/* ---------- Instagram in its own brand colours ----------
   Two treatments, because one size does not fit both places it appears:
   · the footer square gets the real gradient TILE with a white glyph — that
     is the mark people actually recognise at a glance;
   · every inline glyph (top bar, the @handle chip, the Video Tour reel)
     takes the gradient on the STROKE instead, via the #igGrad definition
     emitted once at the top of <body> in templates/header.php.
   The gradient is declared userSpaceOnUse there on purpose — see the note
   beside it — otherwise the flat lines inside these icons disappear. */
.ig-brand{stroke:url(#igGrad)}

.socials a[aria-label="Instagram"],
.socials a[aria-label="Instagram"]:hover{
  background:linear-gradient(45deg,#FFD521 0%,#F50000 26%,#B900B4 62%,#4D00E4 100%);
  border-color:transparent;
}
/* On the filled tile the gradient stroke would fight the gradient behind it,
   so the glyph goes back to plain white. */
.socials a[aria-label="Instagram"] .ig-brand,
.socials a[aria-label="Instagram"]:hover .ig-brand{stroke:#fff; color:#fff}
.socials a[aria-label="Instagram"]:hover{filter:saturate(1.12) brightness(1.06)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.09); padding:22px 0; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:12.5px; color:#7A736A}
.footer-bottom .fb-links{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.footer-bottom .credit{display:inline-flex; align-items:center; gap:5px}
.footer-bottom .credit b{color:var(--gold-500); font-weight:700; transition:color .25s}
.footer-bottom .credit:hover b{color:var(--gold-400)}

/* ---------- Floating actions ---------- */
.floaters{position:fixed; right:20px; bottom:20px; z-index:90; display:flex; flex-direction:column; gap:11px}
.fab{width:52px; height:52px; border-radius:15px; display:grid; place-items:center; box-shadow:var(--shadow-lg); transition:transform .3s var(--ease)}
.fab:hover{transform:translateY(-3px) scale(1.04)}
.fab svg{width:24px; height:24px}
.fab--wa{background:#25D366} .fab--wa svg{color:#fff}
.fab--call{background:var(--gold-500)} .fab--call svg{color:var(--ink-900)}
.fab--call:hover{background:var(--gold-400)}
.fab--top{background:#fff; border:1px solid var(--line); opacity:0; pointer-events:none; transition:opacity .3s, transform .3s var(--ease)}
.fab--top.show{opacity:1; pointer-events:auto}
.fab--top svg{color:var(--ink-800); width:20px; height:20px}

/* ---------- Video tour: left floater + player ---------- */
.floaters--left{left:20px; right:auto; align-items:flex-start}

/* A bare play icon says nothing, so this one carries its label and collapses
   back to a square on small screens where there is no room for words. */
.fab--tour{
  width:auto; padding:0 18px 0 15px; gap:10px; display:flex; align-items:center;
  background:var(--ink-800); color:#fff; border:1px solid rgba(255,255,255,.14);
  font:inherit; font-size:13.5px; font-weight:700; letter-spacing:-.01em; cursor:pointer;
}
/* The Reels mark, in Instagram's own gradient. It is drawn with strokes only,
   so fill stays off and the gradient is painted on the stroke. */
.fab--tour svg{width:18px; height:18px; fill:none; stroke-width:1.9; flex:none}
.fab--tour:hover{background:var(--ink-700)}

.vmodal{position:fixed; inset:0; z-index:200; background:rgba(10,9,8,.86); display:grid; place-items:center; padding:22px}
.vmodal[hidden]{display:none}
.vmodal__box{position:relative; max-width:min(460px,92vw); width:100%}
.vmodal video{
  width:100%; max-height:86vh; display:block; border-radius:16px;
  background:#000; box-shadow:0 30px 80px -20px rgba(0,0,0,.8);
}
/* Sits ON the video's corner, the way a reel does. Outside the frame it either
   overlapped the picture or fell off a short screen, and the video element
   paints over a plain absolute button — hence the z-index. */
.vmodal__x{
  position:absolute; top:10px; right:10px; z-index:2; width:38px; height:38px; border-radius:50%;
  background:rgba(12,11,10,.62); border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(6px);
  display:grid; place-items:center; cursor:pointer; transition:background-color .2s, transform .2s var(--ease);
}
.vmodal__x:hover{background:rgba(12,11,10,.85); transform:scale(1.06)}
.vmodal__x svg{width:18px; height:18px; color:#fff}
body.vmodal-open{overflow:hidden}

/* ---------- WhatsApp chat card ---------- */
.fab--wa{position:relative; border:0; cursor:pointer; padding:0}
.fab__dot{
  position:absolute; top:-5px; right:-5px; min-width:19px; height:19px; padding:0 5px;
  border-radius:99px; background:#E5484D; color:#fff; font-size:11px; font-weight:800;
  display:grid; place-items:center; box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.fab--wa.is-open .fab__dot{display:none}

.wachat{
  position:fixed; right:20px; bottom:86px; z-index:95; width:min(320px, calc(100vw - 40px));
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 26px 60px -14px rgba(0,0,0,.42), 0 0 0 1px rgba(0,0,0,.06);
  transform-origin:bottom right;
  animation:waPop .22s var(--ease) both;
}
.wachat[hidden]{display:none}
@keyframes waPop{from{opacity:0; transform:translateY(10px) scale(.96)} to{opacity:1; transform:none}}

.wachat__head{display:flex; align-items:center; gap:12px; padding:15px 16px; background:#075E54; color:#fff}
.wachat__ava{position:relative; flex:none}
.wachat__ava img{width:44px; height:44px; border-radius:50%; object-fit:contain; background:#fff; padding:3px}
.wachat__on{
  position:absolute; right:0; bottom:1px; width:12px; height:12px; border-radius:50%;
  background:#25D366; border:2px solid #075E54;
}
.wachat__who{min-width:0; line-height:1.35}
.wachat__who b{display:block; font-size:14.5px; font-weight:700}
.wachat__who span{display:block; font-size:12px; opacity:.82}
.wachat__who em{display:block; font-size:11px; font-style:italic; opacity:.7; margin-top:2px}
.wachat__x{
  margin-left:auto; flex:none; width:28px; height:28px; border:0; border-radius:50%;
  background:transparent; display:grid; place-items:center; cursor:pointer; transition:background-color .2s;
}
.wachat__x:hover{background:rgba(255,255,255,.16)}
.wachat__x svg{width:16px; height:16px; color:#fff}

.wachat__body{
  padding:20px 16px; min-height:96px;
  background:#ECE5DD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='8' cy='8' r='1' fill='%23000' opacity='.04'/%3E%3Ccircle cx='28' cy='24' r='1' fill='%23000' opacity='.04'/%3E%3C/svg%3E");
}
.wachat__bubble{
  position:relative; background:#fff; border-radius:0 10px 10px 10px; padding:11px 13px;
  font-size:13.5px; line-height:1.6; color:#111; margin:0; max-width:94%;
  box-shadow:0 1px 2px rgba(0,0,0,.14);
}
.wachat__bubble::before{
  content:''; position:absolute; left:-7px; top:0; border:7px solid transparent;
  border-top-color:#fff; border-right:0;
}

.wachat__foot{padding:14px 16px 16px; background:#fff; text-align:center}
.wachat__cta{
  display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  padding:12px 16px; border-radius:11px; background:#25D366; color:#fff;
  font-size:14px; font-weight:700; transition:background-color .2s, transform .2s var(--ease);
}
.wachat__cta:hover{background:#1FBE59; transform:translateY(-1px)}
.wachat__cta svg{width:19px; height:19px; flex:none}
.wachat__note{display:block; margin-top:9px; font-size:11px; color:var(--muted); line-height:1.5}

@media (max-width:600px){
  .wachat{right:14px; left:14px; width:auto; bottom:142px}
}

@media (max-width:600px){
  .fab--tour{width:52px; padding:0; justify-content:center}
  .fab--tour span{display:none}
  .fab--tour svg{width:20px; height:20px}
  .vmodal__x{width:34px; height:34px}
}

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,26px);
  display:flex; align-items:center; gap:11px; padding:13px 20px; border-radius:12px;
  background:var(--ink-800); color:#fff; font-size:14px; font-weight:600;
  box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:.35s var(--ease); z-index:200;
}
.toast.show{opacity:1; transform:translate(-50%,0)}
.toast svg{width:18px; height:18px; color:#C9A66B}

/* ---------- Reveal ----------
   Content is visible by default. Only once main.js has confirmed it is running
   (html.js-reveal) do we hide sections for the scroll-in animation, so a JS
   error or a stalled observer can never leave the page blank. */
.rv{opacity:1; transform:none}
.js-reveal .rv{opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.js-reveal .rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  .js-reveal .rv{opacity:1; transform:none}
}

/* ================================================================
   Conversion components (header CTAs, WhatsApp, mobile bar)
   ================================================================ */

/* WhatsApp buttons */
.btn--wa{background:#25D366; color:#0A2E17; box-shadow:0 8px 20px -10px rgba(37,211,102,.7)}
.btn--wa:hover{background:#1FBE5B; color:#062B13; box-shadow:0 14px 26px -12px rgba(37,211,102,.75)}
.btn--wa svg{width:18px; height:18px}

/* Top bar e-mail highlight */
.topbar-mail b{color:var(--gold-400); font-weight:800; letter-spacing:.01em}
.topbar-mail:hover b{color:#E4C892}

/* Header click-to-call block */
.hcall{display:flex; align-items:center; gap:10px; padding-right:14px; margin-right:2px;
  border-right:1px solid var(--line)}
.hcall svg{width:20px; height:20px; color:var(--gold-600); flex:none}
.hcall > span{display:flex; flex-direction:column; line-height:1.2}
.hcall b{font-size:14.5px; font-weight:800; color:var(--ink-800); letter-spacing:-.01em; white-space:nowrap}
.hcall > span > span{font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.hcall:hover b{color:var(--gold-600)}

/* Sticky mobile action bar */
.mobile-bar{display:none}
@media (max-width:760px){
  .mobile-bar{
    display:grid; grid-template-columns:repeat(2,1fr); position:fixed; left:0; right:0; bottom:0; z-index:95;
    background:var(--ink-900); border-top:1px solid rgba(255,255,255,.1);
    box-shadow:0 -8px 26px -14px rgba(0,0,0,.6);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .mobile-bar a{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    padding:10px 4px 11px; font-size:11.5px; font-weight:700; color:#E4DED4; letter-spacing:.02em;
  }
  .mobile-bar a + a{border-left:1px solid rgba(255,255,255,.1)}
  .mobile-bar svg{width:20px; height:20px; color:var(--gold-400)}
  .mobile-bar__quote{background:var(--gold-500); color:var(--ink-900)}
  .mobile-bar__quote svg{color:var(--ink-900)}
  body{padding-bottom:64px}
  .floaters{bottom:76px; right:14px}
  .floaters--left{left:14px; right:auto}
}

/* ---------- Trust strip ---------- */
.strip{background:var(--ink-900); color:#CDC5B9; padding:20px 0}
.strip-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.09)}
.strip-item{
  background:var(--ink-900); display:flex; align-items:center; gap:13px; padding:8px 20px;
}
.strip-item:first-child{padding-left:0}
.strip-item svg{width:22px; height:22px; color:var(--gold-500); flex:none}
.strip-item b{display:block; font-size:13.5px; font-weight:700; color:#fff; line-height:1.35}
.strip-item span{font-size:12px; color:#8F877C}

/* ---------- Industries served ---------- */
.ind-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.ind-item{
  display:flex; align-items:center; gap:13px; padding:16px 18px; background:#fff;
  border:1px solid var(--line); border-radius:14px; font-size:14px; font-weight:600; color:var(--ink);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.ind-item:hover{transform:translateY(-3px); box-shadow:var(--shadow-sm); border-color:#DCD5CA}
.ind-ico{
  width:40px; height:40px; border-radius:11px; flex:none; display:grid; place-items:center;
  background:var(--gold-100); border:1px solid #E8DCC3;
}
.ind-ico svg{width:19px; height:19px; color:var(--gold-600)}
.section--dark .ind-item{background:var(--on-dark-fill); border-color:var(--on-dark-line); color:var(--on-dark-h)}
.section--dark .ind-item:hover{background:var(--on-dark-fill-2); border-color:rgba(169,129,63,.35); box-shadow:none}
.section--dark .ind-ico{background:rgba(169,129,63,.16); border-color:rgba(169,129,63,.3)}
.section--dark .ind-ico svg{color:var(--on-dark-eyebrow)}

/* ---------- Process steps ---------- */
.step-n{
  width:44px; height:44px; border-radius:13px; display:grid; place-items:center; margin-bottom:18px;
  background:var(--ink-800); color:var(--gold-400); font-size:16px; font-weight:800; letter-spacing:-.02em;
}
.section--dark .step-n{background:rgba(169,129,63,.18); border:1px solid rgba(169,129,63,.34); color:var(--on-dark-eyebrow)}

/* ---------- Instagram ---------- */
.ig-section{background:var(--surface-2)}
.ig-head{display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:34px}
.ig-head h2{margin-bottom:8px}
.ig-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:14px}
.ig-tile{
  position:relative; display:block; aspect-ratio:1/1; border-radius:14px; overflow:hidden;
  background:#fff; border:1px solid var(--line);
}
.ig-tile img{width:100%; height:100%; object-fit:contain; padding:14px; transition:transform .5s var(--ease)}
.ig-tile:hover img{transform:scale(1.07)}
.ig-tile__ico{
  position:absolute; inset:0; display:grid; place-items:center; opacity:0; transition:opacity .3s;
  background:linear-gradient(135deg, rgba(131,58,180,.82), rgba(225,48,108,.82) 55%, rgba(252,176,69,.82));
}
.ig-tile__ico svg{width:26px; height:26px; color:#fff}
.ig-tile:hover .ig-tile__ico{opacity:1}
.ig-chip{
  display:inline-flex; align-items:center; gap:9px; margin-top:18px; padding:9px 15px; border-radius:999px;
  border:1px solid rgba(255,255,255,.16); font-size:13px; transition:.28s var(--ease);
}
.ig-chip svg{width:16px; height:16px; color:var(--gold-500)}
.ig-chip b{color:#EDE8E0; font-weight:700}
.ig-chip:hover{border-color:var(--gold-500); background:rgba(169,129,63,.14)}
.ig-chip:hover b{color:var(--gold-400)}

/* ---------- Chips ---------- */
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chips.center{justify-content:center}
.chip{
  display:inline-flex; align-items:center; padding:10px 17px; border-radius:999px;
  border:1px solid var(--line); background:#fff; font-size:13.5px; font-weight:600; color:var(--ink);
  transition:.26s var(--ease);
}
a.chip:hover{background:var(--ink-800); border-color:var(--ink-800); color:#fff; transform:translateY(-2px)}
.chip--plain{background:var(--surface-2); color:var(--body); font-weight:600}
.section--dark .chip{background:var(--on-dark-fill); border-color:var(--on-dark-line); color:var(--on-dark-h)}
.section--dark a.chip:hover{background:var(--gold-500); border-color:var(--gold-500); color:var(--on-dark-chip)}

/* ---------- Large checklist ---------- */
.checklist--lg li{padding-left:38px; margin-bottom:16px; font-size:15.5px; font-weight:600; color:var(--ink)}
.checklist--lg li::before{width:24px; height:24px}
.section--dark .checklist--lg li{color:var(--on-dark-h)}

/* ---------- FAQ ---------- */
.faq > div{padding:22px 0; border-bottom:1px solid var(--line)}
.faq > div:first-child{padding-top:0}
.faq > div:last-child{border-bottom:0}
.faq h3{font-size:16px; margin-bottom:8px; letter-spacing:-.015em}
.faq p{margin:0; font-size:14.5px; color:var(--body); line-height:1.7}

/* ---------- Numbered steps list ---------- */
.steps-list{list-style:none; display:grid; gap:14px}
.steps-list li{display:flex; gap:13px; align-items:flex-start; font-size:13.5px; color:var(--body); line-height:1.6}
.steps-list b{
  width:24px; height:24px; border-radius:8px; flex:none; display:grid; place-items:center;
  background:var(--gold-100); color:var(--gold-600); font-size:12px; font-weight:800;
}

/* ---------- Forms: success, actions, file ---------- */
.form-ok{
  display:none; align-items:flex-start; gap:10px; margin-bottom:26px; padding:16px 18px;
  border-radius:12px; background:#EFF8F1; border:1px solid #BFE3C9; color:#1E6B37;
  font-size:14px; font-weight:600; line-height:1.6;
}
.form-ok.show{display:block}
.form-ok .dim{display:block; margin-top:4px; font-weight:500}

/* The panel shown INSTEAD of the form once an enquiry is accepted. */
.form-done{text-align:center; padding:22px 8px 8px}
.form-done__tick{
  display:grid; place-items:center; width:62px; height:62px; margin:0 auto 20px;
  border-radius:50%; background:#EFF8F1; border:1px solid #BFE3C9; color:#1E6B37;
}
.form-done__tick svg{width:30px; height:30px; stroke-width:3}
.form-done h2{font-size:clamp(1.4rem,2.6vw,1.9rem); margin-bottom:10px; letter-spacing:-.03em}
.form-done > p{font-size:15px; color:var(--body); max-width:46ch; margin:0 auto 8px; line-height:1.7}
.form-done__note{font-size:13.5px; color:var(--muted); max-width:46ch; margin:14px auto 0}
.form-done__note a{color:var(--gold-600); font-weight:700}
.form-done__act{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px}
@media (max-width:560px){
  .form-done__act{flex-direction:column}
  .form-done__act .btn{width:100%}
}
.form-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; align-items:center}
.form-actions .btn{height:50px}
.input--file{
  padding:11px 14px; height:auto; font-size:13.5px; color:var(--body); cursor:pointer; background:var(--surface-2);
}
.input--file::file-selector-button{
  margin-right:14px; padding:8px 15px; border:0; border-radius:9px; cursor:pointer;
  background:var(--ink-800); color:#fff; font:inherit; font-size:13px; font-weight:700;
}
.input--file::file-selector-button:hover{background:var(--gold-500); color:var(--ink-900)}

/* ---------- Contact extras ---------- */
.contact-cta{display:grid; gap:11px; margin-top:22px}
.mail-link b{font-weight:800; color:var(--gold-400)}
.mail-link:hover b{color:#E4C892}
/* the label <b> inside .info-item is uppercase — the e-mail <b> must not be */
.info-item a b{
  font-size:14.5px; font-weight:800; letter-spacing:0; text-transform:none;
  margin:0; display:inline; color:var(--gold-400);
}
.info-item a:hover b{color:#E4C892}
.foot-contact .mail-link b{font-size:13.5px}
.dim{color:var(--muted); font-weight:500}
.req{color:#D9534F}

/* ---------- Footer brand lines ---------- */
.fb-name{font-size:13px; font-weight:800; letter-spacing:.04em; color:#fff; margin-bottom:4px}
.fb-tag{font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-500); margin-bottom:14px}

/* ---------- Responsive ---------- */
@media (max-width:1140px){
  .prod-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr; gap:36px}
  .cart-wrap{grid-template-columns:1fr}
  .summary{position:static}
}
@media (max-width:1200px){
  .strip-grid{grid-template-columns:repeat(2,1fr); gap:1px}
  .strip-item{padding-left:20px}
  .ind-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1024px){
  .navbar2,.topbar-r,.hcall{display:none}
  .burger{display:grid}
  .navbar2.is-open{display:block}
  .navbar2.is-open .nav{flex-direction:column; align-items:stretch; padding:6px 0 12px}
  .navbar2.is-open .nav a{padding:13px 4px; font-size:15px}
  .navbar2.is-open .nav a.is-active::after{display:none}
  .hrow{flex-wrap:wrap; gap:14px 18px; padding:14px 0; min-height:0}
  .brand{margin-right:auto}
  .searchbar{order:3; flex-basis:100%; height:46px}
  .searchbar__btn span{display:none}
  .searchbar__btn{padding:0 14px}
  .slider{height:420px}
  .split,.pd,.contact-grid{grid-template-columns:1fr; gap:40px}
  .split--rev .split__media{order:0}
  .shop{grid-template-columns:1fr}
  .side{position:static}
  .side-list{display:flex; flex-wrap:wrap; gap:6px}
  .side-list a{flex:none}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .section{padding:76px 0}
  .ig-grid{grid-template-columns:repeat(3,1fr)}
  .ig-head{align-items:flex-start}
}
@media (max-width:900px){
  /* keep both conversion buttons, shorten the labels so they still fit */
  .header-main .btn--wa,.header-main .quote-cta{font-size:0; gap:0; padding:10px 14px}
  .header-main .btn--wa::after{content:'Chat'; font-size:13px; margin-left:7px}
  .header-main .quote-cta::after{content:'Quote'; font-size:13px}
  .hrow-actions{gap:8px}
}
@media (max-width:760px){
  .g-3,.g-2{grid-template-columns:1fr}
  .header-main .btn--wa,.header-main .quote-cta{display:none}
  .topbar-l{gap:14px; font-size:11.5px; justify-content:center; width:100%}
  .topbar .container{justify-content:center}
  .ind-grid{grid-template-columns:repeat(2,1fr); gap:10px}
  .ind-item{padding:13px 14px; font-size:13px; gap:11px}
  .ind-ico{width:34px; height:34px; border-radius:10px}
  .ind-ico svg{width:17px; height:17px}
  .strip-grid{gap:1px}
  .strip-item{padding:12px 16px}
  .ig-head .btn{width:100%; justify-content:center}
  .form-actions .btn{width:100%; justify-content:center}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .cta{padding:40px 26px}
  .form-grid{grid-template-columns:1fr}
  .form-card{padding:26px 20px}
  .section{padding:62px 0}
  /* stacked CTAs need real room — the dots must never sit on a button */
  .slider{height:auto; min-height:520px}
  .slide{position:relative; padding:38px 0 62px}
  .slide:not(.is-active){position:absolute}
  .slider-track{position:relative; inset:auto}
  .slider-dots{bottom:24px}
  .slider-arrow{display:none}
  .slide__copy{max-width:none}
  .slide__text{margin-bottom:22px}
  .slide::before{background:linear-gradient(90deg, rgba(12,11,10,.94) 0%, rgba(12,11,10,.82) 60%, rgba(12,11,10,.6) 100%)}
  .footer-grid{grid-template-columns:1fr; gap:34px; padding-bottom:40px}
  .toolbar{padding:14px}
  .field .input{min-width:0}
  .cart-table thead{display:none}
  .cart-table,.cart-table tbody,.cart-table tr,.cart-table td{display:block; width:100%}
  .cart-table tr{border-bottom:1px solid var(--line); padding:6px 0}
  .cart-table td{border-bottom:0; padding:8px 16px}
  .cart-table td[data-l]::before{content:attr(data-l); display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; font-weight:700}
}
@media (max-width:520px){
  .strip-grid{grid-template-columns:1fr}
  .ig-grid{grid-template-columns:repeat(2,1fr); gap:10px}
}
@media (max-width:430px){
  .prod-grid{grid-template-columns:1fr}
  .g-4{grid-template-columns:1fr}
  .container{padding-inline:18px}
  .ind-grid{grid-template-columns:1fr}
  .topbar-mail{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .slide__cta{flex-direction:column; align-items:stretch}
  .slide__cta .btn{width:100%}
}

/* ==========================================================================
   CMS build — components added when the site became database-driven
   ========================================================================== */

/* ---------- product gallery thumbnails ---------- */
.pd-thumbs{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap}
.pd-thumb{
  width:74px; height:74px; padding:6px; border-radius:12px; background:#fff;
  border:1.5px solid var(--line); display:grid; place-items:center; cursor:pointer;
  transition:border-color .25s, transform .25s var(--ease);
}
.pd-thumb img{width:100%; height:100%; object-fit:contain}
.pd-thumb:hover{transform:translateY(-2px)}
.pd-thumb.is-active{border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(169,129,63,.14)}

/* ---------- new / featured flags ---------- */
.prod-card__flag{
  position:absolute; z-index:2; top:12px; right:12px;
  background:var(--gold-500); color:var(--ink-900);
  font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px;
}
.pill-new{
  display:inline-block; margin-bottom:14px; padding:6px 14px; border-radius:999px;
  background:var(--gold-100); border:1px solid #E8DCC3; color:var(--gold-600);
  font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
}

/* ---------- pagination ---------- */
.pager{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:44px}
.pager__a{
  min-width:44px; height:44px; padding:0 14px; border-radius:11px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:#fff; font-size:14px; font-weight:700; color:var(--ink);
  transition:.25s var(--ease);
}
.pager__a:hover{border-color:var(--ink-800); background:var(--ink-800); color:#fff}
.pager__a.is-current{background:var(--gold-500); border-color:var(--gold-500); color:var(--ink-900)}
.pager__gap{display:inline-flex; align-items:center; padding:0 4px; color:var(--muted)}

/* ---------- page loader (optional, Theme settings) ---------- */
.page-loader{
  position:fixed; inset:0; z-index:9999; display:grid; place-items:center;
  background:var(--ink-900); transition:opacity .5s var(--ease), visibility .5s;
}
.page-loader.is-done{opacity:0; visibility:hidden; pointer-events:none}
.page-loader__dot{
  width:38px; height:38px; border-radius:50%;
  border:3px solid rgba(255,255,255,.16); border-top-color:var(--gold-500);
  animation:pl-spin .9s linear infinite;
}
@keyframes pl-spin{to{transform:rotate(360deg)}}

/* ---------- form feedback ---------- */
.form-err{
  display:block; margin-bottom:22px; padding:15px 18px; border-radius:12px;
  background:#FEF2F2; border:1px solid #F3C7C7; color:#9B2C2C;
  font-size:14px; font-weight:600; line-height:1.6;
}
.field-err{border-color:#E05252 !important}
.field-msg{display:block; font-size:12px; color:#C24242; margin-top:4px}

/* ---------- catalogue landing tweaks ---------- */
.pagehead--compact h1{display:none}
.prod-card__media{position:relative}
.cat-card__media{position:relative}

@media (max-width:760px){
  .pd-thumb{width:64px; height:64px}
  .pager__a{min-width:40px; height:40px; font-size:13px}
}
.map-caption{margin:14px 0 0; font-size:13.5px; color:var(--muted); text-align:center}

/* ---------- blog post body ---------- */
.post-body{font-size:16.5px;line-height:1.8;color:var(--body)}
.post-body h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin:38px 0 14px}
.post-body h3{font-size:1.25rem;margin:30px 0 12px}
.post-body p{margin:0 0 1.2em}
.post-body img{border-radius:var(--radius);margin:24px 0}
.post-body ul,.post-body ol{margin:0 0 1.2em;padding-left:22px;list-style:revert}
.post-body li{margin-bottom:8px}
.post-body a{color:var(--gold-600);text-decoration:underline;text-underline-offset:3px}
.post-body blockquote{margin:24px 0;padding:18px 24px;border-left:3px solid var(--gold-500);
  background:var(--surface-2);border-radius:0 var(--radius) var(--radius) 0;font-style:italic}