/* ═══════════════════════════════════════════════════════════════════
   Family Sang Fireworks — Diwali store, v2 (2026-10-14)
   Layout follows the Sivakasi dealer pattern the owner pointed at
   (archanfireworks.in header/hero, kaliswari-fireworks.com category
   pages): announcement strip → white masthead with search → red nav
   bar → marigold ticker → banner hero → product rows.
   Colour hierarchy, strict:
     RED     #B5121B  primary: nav bar, primary buttons, prices, focus
     MARIGOLD #FFC233  highlight: name bars, ticker, badges, hero gold
     ORANGE  #E8590C  secondary: kickers, Coronation chip, hovers
   Everything else is warm ink on paper. No neon, no glow on text.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --red:#B5121B;
  --red-2:#93101A;          /* hover / pressed */
  --red-3:#7A0A12;          /* nav "categories" block, footer */
  --maroon:#4A0710;         /* top strip, hero night */
  --orange:#E8590C;
  --orange-2:#C2470A;       /* orange text on white: 4.9:1 */
  --gold:#FFC233;
  --gold-2:#F5A70E;
  --gold-soft:#FFF1C9;
  --cream:#FFF8EC;
  --paper:#FFFDF8;
  --ink:#24140E;
  --ink-2:#5A473D;
  --ink-3:#7B675C;          /* 5.2:1 on white */
  --hair:rgba(36,20,14,.13);
  --hair-soft:rgba(36,20,14,.07);
  --green-wa:#1FA855;
  --shadow-s:0 1px 2px rgba(36,20,14,.06), 0 4px 14px rgba(36,20,14,.06);
  --shadow-m:0 14px 36px rgba(36,20,14,.12), 0 2px 8px rgba(36,20,14,.06);
  --gut:16px;
  --nav-h:52px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --deva:'Noto Sans Devanagari','Poppins',system-ui,sans-serif;
  --disp:'Anton','Impact','Arial Narrow',sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:clip; scroll-padding-top:calc(var(--nav-h) + 12px);}
body{
  margin:0; background:#fff; color:var(--ink);
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
body.locked{overflow:hidden;}
a{color:inherit; text-decoration:none;}
button,input,select,textarea{font:inherit; color:inherit;}
img,svg{display:block;}
h1,h2,h3,h4{margin:0; line-height:1.2;}
:focus-visible{outline:2px solid var(--red); outline-offset:3px; border-radius:6px;}
.hi{font-family:var(--deva); font-weight:500;}
[hidden]{display:none !important;}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.skip{position:absolute; left:-9999px; top:12px; z-index:300; background:var(--ink); color:#fff; padding:10px 16px; border-radius:8px;}
.skip:focus{left:12px;}
.wrap{width:min(1240px, 100% - 2*var(--gut)); margin-inline:auto;}
.wrap.narrow{width:min(860px, 100% - 2*var(--gut));}
@media (min-width:700px){:root{--gut:24px;}}

/* ── buttons ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:10px; font-weight:600; white-space:nowrap; cursor:pointer;
  border:1px solid transparent; font-size:14.5px; padding:11px 20px; line-height:1.2;
  transition:background .18s var(--ease), border-color .18s, color .18s, transform .18s var(--ease), box-shadow .2s;
}
.btn svg{width:16px; height:16px;}
.btn:active{transform:translateY(1px);}
.btn-red{background:var(--red); color:#fff;}
.btn-red:hover{background:var(--red-2);}
.btn-gold{background:var(--gold); color:#3B0A0A; box-shadow:0 2px 0 var(--gold-2);}
.btn-gold:hover{background:#FFCF52;}
.btn-glass{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,226,160,.45);}
.btn-glass:hover{background:rgba(255,255,255,.16);}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--hair);}
.btn-ghost:hover{border-color:var(--ink-3);}
.btn-wa{background:var(--green-wa); color:#fff;}
.btn-wa:hover{background:#178E47;}

/* ── marquees ── */
.mq{overflow:hidden; white-space:nowrap; mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);}
.mq-track{display:inline-flex; gap:0; animation:mq 60s linear infinite; will-change:transform;}
.mq-track span{display:inline-block; padding:0 22px; position:relative;}
.mq-track span::after{content:"✦"; position:absolute; right:-6px; opacity:.75;}
@keyframes mq{to{transform:translateX(-50%);}}

/* 1 · announcement strip */
.topbar{background:var(--maroon); color:#FFE3A6; font-size:12.5px; font-weight:500; letter-spacing:.01em; padding:8px 0;}
.topbar b{color:#fff; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-right:4px;}

/* 2 · masthead */
.mast{background:#fff; border-bottom:1px solid var(--hair-soft);}
.mast-in{display:flex; align-items:center; gap:28px; padding:14px 0;}
.logo{display:flex; align-items:center; gap:12px; flex:0 0 auto;}
.logo-mark{width:62px; height:62px; filter:drop-shadow(0 3px 6px rgba(122,10,18,.25));}
.logo-t b{display:block; font-size:21px; font-weight:800; letter-spacing:-.02em; color:var(--red); line-height:1.05; text-transform:uppercase;}
.logo-t i{display:block; font-style:normal; font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--orange-2); margin-top:3px;}
.hsearch{flex:1; display:flex; align-items:center; max-width:620px; margin:0 auto; border:1.5px solid #E4D9CF; border-radius:999px; background:#fff; transition:border-color .18s, box-shadow .18s;}
.hsearch:focus-within{border-color:var(--gold-2); box-shadow:0 0 0 4px rgba(255,194,51,.22);}
.hsearch input{flex:1; min-width:0; border:0; outline:0; background:none; padding:12px 6px 12px 22px; font-size:14.5px;}
.hsearch input::placeholder{color:#9A877C;}
.hsearch button{width:46px; height:46px; display:grid; place-items:center; border:0; background:none; color:var(--ink-2); cursor:pointer;}
.hsearch button svg{width:21px; height:21px;}
.mast-act{display:flex; align-items:center; gap:8px; flex:0 0 auto;}
.mact{display:flex; align-items:center; gap:9px; padding:8px 12px; border-radius:12px; border:0; background:none; cursor:pointer; font-size:14px; font-weight:600; color:var(--ink);}
.mact:hover{background:var(--cream);}
.mact > svg{width:24px; height:24px; color:var(--green-wa);}
.cartbtn .ic{position:relative; width:42px; height:42px; border-radius:50%; background:var(--cream); display:grid; place-items:center; border:1px solid #F1E3D0;}
.cartbtn .ic svg{width:22px; height:22px; color:var(--red);}
.cartbtn .n{position:absolute; top:-5px; right:-5px; min-width:20px; height:20px; padding:0 5px; border-radius:10px; background:var(--red); color:#fff; font-size:11px; font-weight:700; display:grid; place-items:center; border:2px solid #fff;}
.cartbtn .n[data-zero]{background:#B7A89E;}
.cartbtn.bump .ic{animation:bump .45s var(--ease);}
@keyframes bump{40%{transform:scale(1.14);}}

/* 3 · red nav bar */
.navbar{position:sticky; top:0; z-index:90; background:var(--red); color:#fff; box-shadow:0 6px 18px rgba(122,10,18,.18);}
.nav-in{display:flex; align-items:stretch; min-height:var(--nav-h);}
.catmenu{position:relative; flex:0 0 auto;}
.catbtn{height:100%; display:flex; align-items:center; gap:10px; padding:0 20px; background:var(--red-3); border:0; color:#fff; cursor:pointer; font-size:15.5px;}
.catbtn svg{width:20px; height:20px;}
.catbtn .see{font-size:13px; opacity:.85; font-weight:500;}
.catbtn .dn{width:18px; height:18px; transition:transform .2s;}
.catbtn[aria-expanded="true"] .dn{transform:rotate(180deg);}
.catpanel{
  position:absolute; left:0; top:100%; width:min(640px, 100vw - 2*var(--gut)); z-index:95;
  background:#fff; color:var(--ink); border-radius:0 0 14px 14px; box-shadow:var(--shadow-m);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px; padding:10px;
}
.catpanel[hidden]{display:none;}
.catpanel a{display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:10px;}
.catpanel a:hover{background:var(--cream);}
.catpanel img{width:44px; height:44px; border-radius:8px; border:1px solid var(--hair-soft); object-fit:contain; background:#fff;}
.catpanel b{display:block; font-size:14px; font-weight:600;}
.catpanel small{display:block; font-size:12px; color:var(--ink-3);}
.navlinks{display:flex; align-items:center; gap:2px; padding-left:14px; overflow-x:auto; scrollbar-width:none;}
.navlinks::-webkit-scrollbar{display:none;}
.navlinks a{padding:8px 13px; border-radius:8px; font-size:14.5px; font-weight:600; white-space:nowrap; transition:background .15s;}
.navlinks a:hover,.navlinks a[aria-current]{background:rgba(255,255,255,.14);}

/* 4 · marigold ticker */
.ticker{background:linear-gradient(90deg,var(--gold-2),var(--gold) 30%,var(--gold) 70%,var(--gold-2)); color:#4A0710; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:9px 0; border-bottom:1px solid #E89A0C;}
.ticker .mq-track{animation-duration:44s;}

/* ── reveal ── */
.r-in{opacity:0; transform:translateY(14px); animation:rin .8s var(--ease) forwards;}
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.28s}.d4{animation-delay:.4s}.d5{animation-delay:.52s}
@keyframes rin{to{opacity:1; transform:none;}}

/* 5 · hero banner */
.hero-wrap{padding:22px 0 0; background:linear-gradient(#fff, var(--paper));}
.hero{
  position:relative; overflow:hidden; border-radius:20px; isolation:isolate;
  min-height:540px; display:grid; place-items:center; padding:64px 24px 72px;
  background:radial-gradient(120% 90% at 50% 30%, #6B0C16 0%, #3A0710 45%, #1C0408 100%);
  border:1px solid #5B0A12; box-shadow:0 24px 60px rgba(74,7,16,.28);
}
#sky{position:absolute; inset:0; width:100%; height:100%; z-index:-2;}
.hero-glow{position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(50% 42% at 50% 46%, rgba(255,170,60,.22), transparent 70%),
    linear-gradient(0deg, rgba(28,4,8,.85), transparent 38%);}
.lights{position:absolute; top:0; left:0; width:100%; height:110px; z-index:1; pointer-events:none;}
.bulbs{position:absolute; inset:0 0 auto 0; height:110px; z-index:2; pointer-events:none;}
.bulbs i{position:absolute; width:9px; height:12px; margin:-2px 0 0 -4.5px; border-radius:50% 50% 45% 45%; background:#FFD25A;
  box-shadow:0 0 6px 2px rgba(255,190,70,.75), 0 0 18px 6px rgba(255,160,40,.25); animation:twinkle 2.4s ease-in-out infinite;}
.bulbs i:nth-child(3n){background:#FF8A3D; animation-delay:.8s;}
.bulbs i:nth-child(4n){background:#FFF0C2; animation-delay:1.5s;}
@keyframes twinkle{50%{opacity:.55;}}

.hero-c{position:relative; z-index:3; text-align:center; max-width:820px;}
.hero-mark{width:118px; height:118px; margin:0 auto 10px; filter:drop-shadow(0 8px 22px rgba(0,0,0,.45));}
.hero h1{font-family:var(--disp); font-weight:400; text-transform:uppercase; line-height:.92; letter-spacing:.01em;}
.hero h1 span{
  display:inline-block;
  background:linear-gradient(180deg,#FFFFFF 0%,#FFF6DE 38%,#F7D58A 62%,#E6B04B 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 0 #9E0B1C) drop-shadow(0 3px 0 #7A0A12) drop-shadow(0 4px 0 #5B0710) drop-shadow(0 14px 18px rgba(0,0,0,.55));
}
.hero h1 .l1{font-size:clamp(46px, 8.4vw, 104px);}
.hero h1 .l2{font-size:clamp(46px, 8.4vw, 104px);}
.ribbon{position:relative; display:inline-block; margin:22px 0 0; padding:0 26px;}
.ribbon span{position:relative; z-index:1; display:block; padding:9px 26px; background:linear-gradient(#D21E2A,#9E0B1C); color:#FFF3CF; font-weight:700; font-size:clamp(13px,1.6vw,17px); letter-spacing:.14em; text-transform:uppercase; border-top:2px solid #FFD25A; border-bottom:2px solid #FFD25A; box-shadow:0 8px 18px rgba(0,0,0,.35);}
.ribbon::before,.ribbon::after{content:""; position:absolute; top:9px; bottom:-9px; width:44px; background:#7A0A12; z-index:0;}
.ribbon::before{left:0; clip-path:polygon(0 0,100% 0,100% 100%,0 100%,22% 50%);}
.ribbon::after{right:0; clip-path:polygon(0 0,100% 0,78% 50%,100% 100%,0 100%);}
.hero-sub{margin:20px auto 0; max-width:560px; color:#FBE6C7; font-size:16px; line-height:1.6;}
.hero-sub b{color:var(--gold); font-weight:600;}
.hero-cta{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:24px;}
.hero-cta .btn{padding:13px 24px; font-size:15px;}

.pennant{position:absolute; z-index:3; left:28px; top:0; width:132px; padding:18px 10px 34px; text-align:center;
  background:linear-gradient(#FFD25A,#F5A70E); color:#6A0910; clip-path:polygon(0 0,100% 0,100% 100%,50% 86%,0 100%);
  box-shadow:inset 0 0 0 3px rgba(122,10,18,.18);}
.pennant b{display:block; font-family:var(--disp); font-weight:400; font-size:21px; line-height:1; text-transform:uppercase;}
.pennant strong{display:block; font-family:var(--disp); font-weight:400; font-size:31px; line-height:1.05; text-transform:uppercase; color:var(--red);}
.pennant span{display:block; margin-top:4px; font-size:12.5px; font-weight:700; line-height:1.25; text-transform:uppercase;}
.seal{position:absolute; z-index:3; right:30px; top:26px; width:132px; height:132px; display:grid; place-items:center;}
.seal svg{position:absolute; inset:0; width:100%; height:100%; filter:drop-shadow(0 8px 16px rgba(0,0,0,.4)); animation:spin 60s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.seal span{position:relative; text-align:center; color:#FFF3CF; line-height:1.05;}
.seal i{display:block; font-style:normal; font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold);}
.seal b{display:block; font-family:var(--disp); font-weight:400; font-size:19px; text-transform:uppercase;}
.seal em{display:block; font-style:normal; font-size:11px; color:var(--gold);}

.boxes{position:absolute; z-index:2; bottom:22px; width:250px; height:220px; pointer-events:none;}
.boxes-l{left:22px;} .boxes-r{right:22px;}
.bx{position:absolute; width:128px; height:128px; border-radius:14px; background:#fff; padding:6px; object-fit:contain;
  box-shadow:0 14px 30px rgba(0,0,0,.45), 0 0 0 3px rgba(255,210,90,.55);}
.boxes-l .b1{left:0; bottom:0; transform:rotate(-8deg);}
.boxes-l .b2{left:104px; bottom:14px; transform:rotate(5deg); width:118px; height:118px;}
.boxes-l .b3{left:44px; bottom:112px; transform:rotate(-2deg); width:96px; height:96px;}
.boxes-r .b1{right:0; bottom:0; transform:rotate(8deg);}
.boxes-r .b2{right:104px; bottom:14px; transform:rotate(-5deg); width:118px; height:118px;}
.boxes-r .b3{right:44px; bottom:112px; transform:rotate(3deg); width:96px; height:96px;}

.promise{list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;}
.promise li{display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:12px; align-items:center; padding:14px 16px; background:#fff; border:1px solid #F1E3D0; border-radius:14px; box-shadow:var(--shadow-s);}
.promise .pi{grid-row:1 / span 2; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--gold-soft); color:var(--red);}
.promise .pi svg{width:20px; height:20px;}
.promise b{font-size:15px; font-weight:700; color:var(--ink); line-height:1.25;}
.promise li > span:last-child{font-size:12.5px; color:var(--ink-3); line-height:1.35;}

/* ── sections ── */
.sec{padding:56px 0;}
.sec-tight{padding:8px 0 24px;}
.sec-cream{background:var(--cream);}
.sec-h{margin-bottom:24px;}
.sec-h.center{text-align:center;}
.sec-h.center .lede{margin-inline:auto;}
.row-h{display:flex; align-items:flex-end; justify-content:space-between; gap:20px;}
.kicker{margin:0 0 6px; font-size:12.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--orange-2);}
.kicker::before{content:""; display:inline-block; width:22px; height:3px; border-radius:2px; background:var(--gold-2); vertical-align:middle; margin:-2px 10px 0 0;}
.sec-h.center .kicker::after{content:""; display:inline-block; width:22px; height:3px; border-radius:2px; background:var(--gold-2); vertical-align:middle; margin:-2px 0 0 10px;}
.sec h2{font-size:clamp(25px, 3.2vw, 34px); font-weight:700; letter-spacing:-.02em; color:var(--ink);}
.lede{margin:8px 0 0; max-width:620px; color:var(--ink-2); font-size:15px;}

/* 6 · the rail (popular picks) */
.arrows{display:flex; gap:8px; flex:0 0 auto;}
.arr{width:42px; height:42px; border-radius:50%; border:1px solid var(--hair); background:#fff; display:grid; place-items:center; cursor:pointer; color:var(--ink-2); transition:background .15s, color .15s, border-color .15s;}
.arr:hover{background:var(--red); color:#fff; border-color:var(--red);}
.arr svg{width:18px; height:18px;}
.rail{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(208px, 1fr); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 16px; scrollbar-width:thin; scrollbar-color:#E2C9B4 transparent;}
@media (min-width:1100px){.rail{grid-auto-columns:calc((100% - 4*16px) / 5);}}
.rail > *{scroll-snap-align:start;}

/* product card, shared by the rail and the catalogue */
.pc{position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid #EFE3D6; border-radius:14px; overflow:hidden; transition:box-shadow .22s var(--ease), border-color .2s, transform .22s var(--ease);}
.pc:hover{box-shadow:var(--shadow-m); border-color:#E6CDB5; transform:translateY(-2px);}
.pc.inlist{border-color:var(--red); box-shadow:0 0 0 1px var(--red);}
.pimg{position:relative; aspect-ratio:1/1; background:#fff; display:grid; place-items:center; overflow:hidden;}
.pimg img{width:100%; height:100%; object-fit:contain; padding:6px; transition:transform .35s var(--ease);}
.pc:hover .pimg img{transform:scale(1.04);}
.chip{position:absolute; left:10px; top:10px; z-index:1; padding:3px 9px; border-radius:6px; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; line-height:1.5;}
.chip-COCK{background:var(--red); color:#FFE9A8;}
.chip-CORO{background:var(--orange); color:#fff;}
.chip-OTHER{background:#4A3A32; color:#fff;}
.ours{position:absolute; right:0; top:10px; z-index:1; padding:3px 10px 3px 12px; background:var(--gold); color:#4A0710; font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; clip-path:polygon(8px 0,100% 0,100% 100%,8px 100%,0 50%);}
.sim{position:absolute; left:8px; bottom:8px; z-index:1; padding:2px 8px; border-radius:5px; background:rgba(255,255,255,.92); border:1px solid var(--hair); font-size:10.5px; font-weight:500; font-style:italic; color:var(--ink-3);}
.inl{position:absolute; right:8px; bottom:8px; z-index:1; padding:3px 9px; border-radius:999px; background:var(--red); color:#fff; font-size:11px; font-weight:700; opacity:0; transform:scale(.9); transition:opacity .2s, transform .2s;}
.pc.inlist .inl{opacity:1; transform:none;}
.pname{background:var(--gold); padding:10px 12px; min-height:58px; display:flex; flex-direction:column; justify-content:center; border-top:1px solid #F0B11F;}
.pname h3{font-size:14px; font-weight:700; line-height:1.3; color:#2A0A08;}
.pname .code{display:block; margin-top:2px; font-size:10.5px; font-weight:600; letter-spacing:.03em; color:#7A3A0A; font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;}
.pbody{padding:10px 12px 12px; display:flex; flex-direction:column; gap:9px; flex:1;}
.pmeta{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12.5px; color:var(--ink-3);}
.price b{font-size:17px; font-weight:700; color:var(--red);}
.price s{font-size:12.5px; color:var(--ink-3); margin-left:5px;}
.price small{font-size:11.5px; color:var(--ink-3); margin-left:3px;}
.price .ask{font-size:12.5px; font-weight:600; color:var(--red);}
.pdesc{margin:0; font-size:12px; color:var(--ink-3); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.buy{display:flex; gap:8px; margin-top:auto;}
.qty{display:flex; align-items:center; border:1px solid var(--hair); border-radius:9px; overflow:hidden; flex:0 0 auto; background:#fff;}
.qty button{width:32px; height:38px; border:0; background:var(--cream); cursor:pointer; font-size:17px; font-weight:600; color:var(--ink-2);}
.qty button:hover{background:var(--gold-soft); color:var(--red);}
.qty input{width:38px; height:38px; border:0; text-align:center; font-weight:600; font-size:14px; -moz-appearance:textfield; appearance:textfield; outline:none;}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.buy .btn{flex:1; padding:9px 10px; font-size:13.5px; border-radius:9px;}
.buy .btn-ghost{border-color:var(--red); color:var(--red);}

/* 7 · brand cards */
.brands{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.bcard{position:relative; display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center; padding:22px; border-radius:18px; overflow:hidden; color:#fff; min-height:190px;}
.bcard-COCK{background:linear-gradient(120deg,#9E0B1C,#C8141F 60%,#E2381E);}
.bcard-CORO{background:linear-gradient(120deg,#C2470A,#E8590C 55%,#F5A70E);}
.bcard .bk{font-size:11.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#FFE3A6;}
.bcard h3{font-family:var(--disp); font-weight:400; font-size:clamp(30px,3.6vw,42px); text-transform:uppercase; letter-spacing:.01em; margin:4px 0 2px;}
.bcard p{margin:0 0 14px; font-size:13.5px; color:rgba(255,255,255,.9); max-width:320px;}
.bcard .btn{background:#fff; color:var(--ink); padding:10px 18px; font-size:14px;}
.bcard .btn:hover{background:var(--gold);}
.bthumbs{display:grid; grid-template-columns:repeat(2,84px); gap:8px; transform:rotate(-3deg);}
.bthumbs img{width:84px; height:84px; border-radius:10px; background:#fff; object-fit:contain; padding:3px; box-shadow:0 8px 18px rgba(0,0,0,.25);}

/* 8 · catalogue */
.sec-cat{background:var(--paper); border-top:1px solid #F3E7D8;}
.cat-layout{display:grid; grid-template-columns:250px minmax(0,1fr); gap:28px; align-items:start;}
.side{position:sticky; top:calc(var(--nav-h) + 16px);}
.side-box{background:#fff; border:1px solid #EFE3D6; border-radius:14px; padding:18px 14px; box-shadow:var(--shadow-s); max-height:calc(100vh - var(--nav-h) - 40px); overflow:auto;}
.side-box h3{font-size:14px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--red); padding:0 6px 12px; margin-bottom:8px; border-bottom:2px solid var(--gold);}
.side ul{list-style:none; margin:0; padding:0; display:grid; gap:4px;}
.side a{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-radius:8px; background:#FBF6EF; font-size:13.5px; font-weight:500; transition:background .15s, color .15s;}
.side a:hover{background:var(--gold-soft);}
.side a[aria-current]{background:var(--red); color:#fff;}
.side a span{font-size:11.5px; font-weight:600; color:var(--ink-3); background:#fff; border-radius:999px; padding:1px 8px;}
.side a[aria-current] span{color:var(--red);}
.side a.empty{opacity:.45;}

.cat-main{min-width:0;}
.toolbar{display:flex; flex-wrap:wrap; align-items:center; gap:12px; justify-content:space-between; margin-bottom:10px;}
.brandseg{display:flex; flex-wrap:wrap; gap:6px;}
.brandseg button{padding:8px 15px; border-radius:999px; border:1px solid var(--hair); background:#fff; cursor:pointer; font-size:13.5px; font-weight:600; color:var(--ink-2); transition:all .15s;}
.brandseg button:hover{border-color:var(--orange); color:var(--orange-2);}
.brandseg button[aria-pressed="true"]{background:var(--red); border-color:var(--red); color:#fff;}
.search{display:flex; align-items:center; gap:8px; padding:0 14px; border:1px solid var(--hair); border-radius:999px; background:#fff; min-width:260px;}
.search:focus-within{border-color:var(--gold-2); box-shadow:0 0 0 4px rgba(255,194,51,.2);}
.search svg{width:17px; height:17px; color:var(--ink-3); flex:0 0 auto;}
.search input{border:0; outline:0; background:none; padding:10px 0; width:100%; font-size:14px;}
.chiprail{display:none;}
.shown{margin:4px 0 8px; font-size:13px; color:var(--ink-3);}
.csec{padding:22px 0 8px; scroll-margin-top:calc(var(--nav-h) + 14px);}
.csec[hidden]{display:none;}
.csec-h{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 14px; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid #EFE3D6;}
.csec-h h3{font-size:21px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:var(--ink);}
.csec-h h3::before{content:""; display:inline-block; width:6px; height:20px; border-radius:3px; background:var(--red); margin:0 10px -2px 0; box-shadow:4px 0 0 var(--gold);}
.csec-h .hi{font-size:15px; color:var(--orange-2);}
.csec-h p{margin:0 0 0 auto; font-size:13px; color:var(--ink-3);}
.pgrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;}
.pc[hidden]{display:none;}
.photo-note{margin:26px 0 0; padding:12px 16px; border-radius:12px; background:#fff; border:1px dashed #E6CDB5; font-size:12.5px; color:var(--ink-3);}
.empty{grid-column:1/-1; text-align:center; padding:40px 10px; color:var(--ink-2);}
.empty b{display:block; font-size:17px; color:var(--ink); margin-bottom:4px;}

/* 9 · how to order */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; counter-reset:s;}
.steps li{position:relative; background:#fff; border-radius:16px; padding:22px 20px 20px; border:1px solid #F1E3D0; box-shadow:var(--shadow-s);}
.steps li::after{content:""; position:absolute; left:20px; right:20px; top:0; height:4px; border-radius:0 0 4px 4px; background:linear-gradient(90deg,var(--red),var(--orange),var(--gold));}
.sn{display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--red); color:#fff; font-weight:800; font-size:17px; margin-bottom:12px; box-shadow:0 0 0 4px var(--gold-soft);}
.steps h3{font-size:16.5px; font-weight:700; margin-bottom:6px;}
.steps p{margin:0; font-size:14px; color:var(--ink-2);}
.law{margin-top:18px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 22px; border-radius:16px; background:#fff; border-left:5px solid var(--gold-2); box-shadow:var(--shadow-s);}
.law b{display:block; font-size:15.5px; margin-bottom:2px;}
.law p{margin:0; font-size:14px; color:var(--ink-2); max-width:760px;}

/* 10 · safety */
.safe{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;}
.tip{position:relative; padding:20px 20px 18px; border-radius:16px; background:#fff; border:1px solid #F1E3D0;}
.tip .n{font-family:var(--disp); font-size:28px; color:var(--gold-2); line-height:1;}
.tip h3{font-size:16px; font-weight:700; margin:8px 0 6px;}
.tip p{margin:0 0 8px; font-size:14px; color:var(--ink-2);}
.tip .hi{display:block; font-size:13.5px; color:var(--red);}
.tip.key{background:linear-gradient(140deg,#9E0B1C,#C8141F); border-color:transparent; color:#fff;}
.tip.key .n{color:var(--gold);} .tip.key p{color:rgba(255,255,255,.88);} .tip.key .hi{color:#FFE3A6;}

/* 11 · faq */
.faq{display:grid; gap:10px;}
.faq details{background:#fff; border:1px solid #F1E3D0; border-radius:14px; padding:0 20px;}
.faq summary{list-style:none; cursor:pointer; padding:17px 30px 17px 0; font-weight:600; font-size:15.5px; position:relative;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%); width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--gold-soft); color:var(--red); font-weight:700;}
.faq details[open] summary::after{content:"−"; background:var(--red); color:#fff;}
.faq p{margin:0 0 18px; color:var(--ink-2); font-size:14.5px;}

/* 12 · contact */
.contact{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px;}
.cc{padding:20px; border-radius:16px; background:var(--cream); border:1px solid #F1E3D0;}
.cc .k{display:block; font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--orange-2); margin-bottom:6px;}
.cc .v{font-size:17px; font-weight:600; word-break:break-word;}
.cc a.v{color:var(--red);}
.cc-wait{grid-column:1/-1; margin:0; padding:16px 20px; border-radius:14px; background:var(--gold-soft); color:var(--ink-2); font-size:14px;}
.cc-wait b{color:var(--ink);}

/* footer */
.ftr{background:
  radial-gradient(circle at 12% 30%, rgba(255,194,51,.10) 0 2px, transparent 3px) 0 0/46px 46px,
  linear-gradient(160deg,#5B0912,#3A0610); color:#F8DDBF; margin-top:0;}
.ftr-in{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:32px; padding:48px 0 36px;}
.logo-inv .logo-t b{color:#fff;} .logo-inv .logo-t i{color:var(--gold);}
.fabout p{margin:14px 0 18px; font-size:14px; color:#EBC9A8; max-width:340px;}
.ftr h4{font-size:17px; font-weight:700; color:#fff; margin-bottom:12px;}
.ftr ul{list-style:none; margin:0; padding:0; display:grid; gap:8px;}
.ftr li a{font-size:14px; font-weight:500; color:#F8DDBF; display:inline-flex; gap:8px; align-items:center;}
.ftr li a::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--gold);}
.ftr li a:hover{color:var(--gold);}
.ftr-base{background:#2A040B; font-size:12.5px; color:#D9B595; padding:14px 0;}
.ftr-base .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 20px;}

/* floating WhatsApp */
.wa-float{position:fixed; right:18px; bottom:22px; z-index:85; width:56px; height:56px; border-radius:50%; background:var(--green-wa); color:#fff; display:grid; place-items:center; box-shadow:0 10px 26px rgba(31,168,85,.45);}
.wa-float svg{width:30px; height:30px;}
.wa-float[hidden]{display:none;}

/* ── order list drawer ── */
.veil{position:fixed; inset:0; z-index:150; background:rgba(36,8,8,.45); opacity:0; visibility:hidden; transition:opacity .25s var(--ease), visibility .25s;}
.drawer{position:fixed; top:0; right:0; bottom:0; z-index:160; width:min(460px,100%); background:#fff; display:flex; flex-direction:column; box-shadow:-20px 0 60px rgba(36,8,8,.2); transform:translateX(102%); transition:transform .32s var(--ease); visibility:hidden;}
body.cart-open .veil{opacity:1; visibility:visible;}
body.cart-open .drawer{transform:none; visibility:visible;}
.dr-h{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; background:var(--red); color:#fff;}
.dr-h h2{font-size:19px; font-weight:700;}
.dr-h h2 small{display:block; font-size:12.5px; font-weight:500; color:#FFE3A6; margin-top:2px;}
.x{width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:transparent; color:#fff; cursor:pointer; display:grid; place-items:center;}
.x svg{width:16px; height:16px;}
.dr-b{flex:1; overflow-y:auto; overscroll-behavior:contain; padding:6px 22px 22px;}
.lines{list-style:none; margin:0; padding:0;}
.line{display:grid; grid-template-columns:52px 1fr auto; gap:4px 12px; padding:14px 0; border-bottom:1px solid var(--hair-soft); align-items:center;}
.line img{grid-row:1 / span 3; width:52px; height:52px; border-radius:8px; border:1px solid var(--hair-soft); object-fit:contain; background:#fff;}
.line b{font-size:14.5px; font-weight:600;}
.line .code{grid-column:2; font-size:11px; color:var(--ink-3); font-family:ui-monospace,Menlo,Consolas,monospace;}
.line .qty{grid-row:1 / span 2; grid-column:3;}
.line .qty button,.line .qty input{height:34px;}
.line .rm{grid-column:2; justify-self:start; background:none; border:0; padding:0; font-size:12.5px; color:var(--ink-3); cursor:pointer; text-decoration:underline; text-underline-offset:3px;}
.line .rm:hover{color:var(--red);}
.line .lp{grid-column:3; justify-self:end; font-size:13px; font-weight:600;}
.dr-empty{text-align:center; padding:56px 10px; color:var(--ink-2); line-height:1.6;}
.dr-empty svg{width:56px; height:56px; margin:0 auto 14px; color:var(--gold-2);}
.dr-empty b{display:block; color:var(--ink); font-size:17px;}
.sum{display:flex; justify-content:space-between; align-items:baseline; padding:16px 0 4px; font-size:14px; color:var(--ink-2);}
.sum b{color:var(--ink); font-size:17px;}
.form{display:grid; gap:12px; margin-top:18px;}
.form h3{margin:8px 0 0; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--orange-2); font-weight:700;}
.form label{display:grid; gap:6px; font-size:13px; font-weight:500; color:var(--ink-2);}
.form input,.form textarea{width:100%; padding:11px 13px; border:1px solid var(--hair); border-radius:10px; background:#fff; font-size:15px; outline:none; transition:border-color .18s, box-shadow .18s;}
.form textarea{resize:vertical; min-height:70px;}
.form input:focus,.form textarea:focus{border-color:var(--gold-2); box-shadow:0 0 0 4px rgba(255,194,51,.2);}
.seg{display:flex; gap:8px;}
.seg label{flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:11px; border:1px solid var(--hair); border-radius:10px; cursor:pointer; font-size:14px; color:var(--ink);}
.seg input{width:auto; accent-color:var(--red); margin:0;}
.seg label:has(input:checked){border-color:var(--red); background:#FFF5F3;}
.dr-f{padding:16px 22px 20px; border-top:1px solid var(--hair-soft); display:grid; gap:10px; background:#fff;}
.dr-f .btn{width:100%; padding:14px;}
.dr-f .btn svg{width:20px; height:20px;}
.dr-f .row2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.dr-f .row2 .btn{padding:11px;}
.dr-f .fine{margin:0; font-size:12.5px; color:var(--ink-3); line-height:1.5; text-align:center;}
.listbar{position:fixed; left:12px; right:12px; bottom:12px; z-index:80; display:none; align-items:center; justify-content:space-between; gap:12px; padding:9px 9px 9px 18px; background:var(--red); color:#fff; border-radius:14px; box-shadow:0 14px 40px rgba(122,10,18,.35); transform:translateY(140%); transition:transform .3s var(--ease);}
.listbar.on{transform:none;}
.listbar span{font-size:14px; font-weight:600;}
.listbar .btn{padding:10px 18px; font-size:14px;}
.toast{position:fixed; left:50%; bottom:26px; z-index:200; transform:translate(-50%,30px); opacity:0; background:var(--ink); color:#fff; padding:12px 18px; border-radius:12px; font-size:14px; font-weight:500; box-shadow:0 12px 34px rgba(36,8,8,.3); transition:opacity .25s, transform .25s var(--ease); pointer-events:none; max-width:calc(100% - 32px); text-align:center;}
.toast.on{opacity:1; transform:translate(-50%,0);}

/* ── responsive ── */
@media (max-width:1180px){
  .pgrid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .boxes{transform:scale(.8); transform-origin:bottom left;}
  .boxes-r{transform-origin:bottom right;}
}
@media (max-width:1000px){
  .cat-layout{grid-template-columns:minmax(0,1fr);}
  .side{display:none;}
  .chiprail{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; position:sticky; top:var(--nav-h); z-index:20; margin:0 calc(-1*var(--gut)); padding:10px var(--gut); background:rgba(255,253,248,.96); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid #F3E7D8;}
  .chiprail::-webkit-scrollbar{display:none;}
  .chiprail a{flex:0 0 auto; display:flex; align-items:center; gap:7px; padding:5px 12px 5px 5px; border-radius:999px; background:#fff; border:1px solid #EFE3D6; font-size:13px; font-weight:600; white-space:nowrap;}
  .chiprail a[aria-current]{background:var(--red); color:#fff; border-color:var(--red);}
  .chiprail img{width:26px; height:26px; border-radius:50%; object-fit:contain; background:#fff;}
  .csec{scroll-margin-top:calc(var(--nav-h) + 64px);}
  html{scroll-padding-top:calc(var(--nav-h) + 64px);}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));}
  .safe{grid-template-columns:repeat(2,minmax(0,1fr));}
  .promise{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ftr-in{grid-template-columns:1fr 1fr;}
  .fabout{grid-column:1/-1;}
  .pennant{left:14px; width:104px; padding:14px 8px 28px;}
  .pennant b{font-size:16px;} .pennant strong{font-size:24px;} .pennant span{font-size:10.5px;}
  .seal{right:14px; top:16px; width:104px; height:104px;}
  .seal b{font-size:15px;}
  .boxes{display:none;}
  .hero{min-height:500px;}
}
@media (max-width:800px){
  .mast-in{flex-wrap:wrap; gap:10px 14px; padding:10px 0 12px;}
  .logo-mark{width:48px; height:48px;}
  .logo-t b{font-size:18px;}
  .logo-t i{font-size:10px;}
  .mast-act{margin-left:auto;}
  .mact span:not(.ic):not(.n){display:none;}
  .hsearch{order:3; flex:1 1 100%; max-width:none;}
  .hsearch input{padding:10px 6px 10px 18px;}
  .hsearch button{width:42px; height:42px;}
  .catbtn{padding:0 14px; font-size:14.5px;}
  .catbtn .see{display:none;}
  .catpanel{grid-template-columns:1fr; position:fixed; left:var(--gut); right:var(--gut); top:auto; width:auto; max-height:70vh; overflow:auto; border-radius:14px; margin-top:6px;}
  .navlinks{padding-left:6px;}
  .navlinks a{padding:8px 10px; font-size:14px;}
  .brands{grid-template-columns:1fr;}
  .listbar{display:flex;}
  .toast{bottom:84px;}
  .wa-float{bottom:84px;}
  .law{flex-direction:column; align-items:flex-start;}
}
@media (max-width:640px){
  .topbar{font-size:11.5px; padding:6px 0;}
  .ticker{font-size:11.5px; padding:7px 0;}
  .hero-wrap{padding-top:12px;}
  .hero{min-height:0; padding:150px 16px 34px; border-radius:16px;}
  .hero-mark{width:84px; height:84px;}
  .hero h1 .l1,.hero h1 .l2{display:block;}
  .ribbon{margin-top:16px; padding:0 16px;}
  .ribbon span{padding:8px 14px; letter-spacing:.08em;}
  .ribbon::before,.ribbon::after{width:30px;}
  .hero-sub{font-size:14.5px;}
  .hero-cta .btn{flex:1 1 100%;}
  .pennant{left:10px; width:92px;}
  .seal{right:10px; top:12px; width:92px; height:92px;}
  .seal b{font-size:13px;} .seal i{font-size:8.5px;}
  .promise{gap:8px;}
  .promise li{padding:12px; column-gap:10px;}
  .promise .pi{width:34px; height:34px;}
  .promise b{font-size:13.5px;}
  .promise li > span:last-child{font-size:11.5px;}
  .sec{padding:40px 0;}
  .sec-tight{padding:4px 0 18px;}
  .row-h{align-items:flex-start;}
  .arrows{display:none;}
  .rail{grid-auto-columns:minmax(168px, 46%); gap:10px;}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
  .pname{padding:8px 10px; min-height:52px;}
  .pname h3{font-size:13px;}
  .pbody{padding:8px 10px 10px; gap:8px;}
  .pdesc{display:none;}
  .pmeta{flex-direction:column; align-items:flex-start; gap:0;}
  .chip{left:6px; top:6px; font-size:9.5px; padding:2px 6px;}
  .ours{top:6px; font-size:9.5px;}
  .buy{flex-direction:column;}
  .qty{width:100%; justify-content:space-between;}
  .qty input{flex:1;}
  .search{min-width:0; flex:1 1 100%;}
  .brandseg{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; width:100%;}
  .brandseg button{flex:0 0 auto;}
  .csec-h h3{font-size:17px;}
  .csec-h p{margin-left:0; flex-basis:100%;}
  .bcard{grid-template-columns:1fr; padding:20px;}
  .bthumbs{display:none;}
  .steps,.safe{grid-template-columns:1fr;}
  .ftr-in{grid-template-columns:1fr 1fr; gap:24px; padding:36px 0 28px;}
}
@media (max-width:380px){
  .navlinks a:nth-child(n+6){display:none;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
  .r-in{opacity:1; transform:none;}
  .mq-track{animation:none;}
}

/* ── print = the estimate ── */
.estimate{display:none;}
@media print{
  body > *:not(.estimate){display:none !important;}
  .estimate{display:block; font-family:'Poppins',sans-serif; color:#000; padding:0 6mm;}
  .estimate h1{font-size:22pt; margin:0;}
  .estimate .s{font-size:10pt; color:#444; margin:2pt 0 14pt;}
  .estimate table{width:100%; border-collapse:collapse; font-size:10.5pt;}
  .estimate th,.estimate td{border:1px solid #999; padding:5pt 7pt; text-align:left;}
  .estimate th{background:#f1f1f1;}
  .estimate td.r,.estimate th.r{text-align:right;}
  .estimate .who{margin-top:14pt; font-size:10.5pt; line-height:1.6;}
  .estimate .fine{margin-top:16pt; font-size:9pt; color:#555;}
}