/* ==========================================================================
   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;

  --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);
  --container:1240px;

  --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}
.section{padding:96px 0}
.section--tight{padding:68px 0}
.section--alt{background:var(--surface-2)}
.section--dark{background:var(--ink-800); color:#D6D0C6}
.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}

.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(--gold-400)}

.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:#B8B1A5}
.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}
.topbar a{display:inline-flex; align-items:center; gap:7px; transition:color .25s}
.topbar a:hover{color:var(--gold-400)}
.topbar svg{width:14px; height:14px; 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(--ink-800)}
.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:#D6D0C6;
  transition:color .25s, background-color .25s;
}
.nav a:hover{color:#fff; background:rgba(255,255,255,.06)}
.nav a.is-active{color:var(--gold-400)}
.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;
  background-size:cover; background-position:center;
  opacity:0; visibility:hidden; transform:scale(1.04);
  transition:opacity .9s var(--ease), transform 7s linear, visibility 0s linear .9s;
}
.slide.is-active{opacity:1; visibility:visible; transform:scale(1); transition:opacity .9s var(--ease), transform 7s linear, visibility 0s}
.slide::before{
  content:''; position:absolute; inset:0;
  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:1}
.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}
.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(--ink-800), var(--ink-600));
}
.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:rgba(255,255,255,.05); border-color:rgba(255,255,255,.11)}
.section--dark .feat:hover{background:rgba(255,255,255,.08); border-color:rgba(169,129,63,.35); box-shadow:none}
.section--dark .feat p{color:#B8B1A5}
.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:linear-gradient(150deg,#161412,#332E27); aspect-ratio:4/3;
  display:grid; place-items:center; box-shadow:var(--shadow-lg);
}
.media-frame::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 img{position:relative; z-index:1; width:46%; max-width:210px; opacity:.95}
.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{font-size:11.5px; color:var(--muted); font-weight:600; letter-spacing:.05em; text-transform:uppercase}

.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:#B8B1A5}

/* ---------- Page head ---------- */
.pagehead{position:relative; background:var(--ink-800); color:#fff; 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(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 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:#fff; font-size:clamp(2rem,4vw,3rem); margin-bottom:12px; letter-spacing:-.035em}
.pagehead p{color:#B8B1A5; max-width:58ch; margin:0; font-size:1.02rem}
.crumb{display:flex; align-items:center; gap:9px; font-size:12.5px; color:#8F877C; margin-bottom:18px; flex-wrap:wrap}
.crumb a:hover{color:var(--gold-400)}
.crumb span{color:#5E574F}
.crumb b{color:#fff; 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}
.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(--ink-800); color:#C2BAAE; 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:#fff; font-size:19px; margin-bottom:6px}
.info-card > p{font-size:13.5px; color:#A39B8E; margin-bottom:26px}
.info-item{display:flex; gap:15px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.1)}
.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(--gold-400)}
.info-item b{display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#8C847A; font-weight:700; margin-bottom:3px}
.info-item a,.info-item p{color:#EDE8E0; 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(--ink-800); color:#fff; 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(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 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:#fff; font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:10px}
.cta p{color:#B8B1A5; margin:0; max-width:52ch}
.cta-act{display:flex; gap:13px; flex-wrap:wrap}

/* ---------- Footer ---------- */
.footer{background:var(--ink-900); 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)}
.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--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}

/* ---------- 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}
}

/* ---------- 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:1024px){
  .navbar2,.topbar-r,.quote-cta{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}
}
@media (max-width:760px){
  .g-3,.g-2{grid-template-columns:1fr}
  .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}
  .slider{height:470px}
  .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:430px){
  .prod-grid{grid-template-columns:1fr}
  .g-4{grid-template-columns:1fr}
  .container{padding-inline:18px}
  .slider{height:460px}
  .slide__cta{flex-direction:column; align-items:stretch}
  .slide__cta .btn{width:100%}
}