:root{
  /* Old-site branding: brand red + navy + orange accent */
  --maroon:#e5061c; --maroon-d:#b30414; --navy:#041e35; --navy-2:#003A6B;
  --gold:#ff8a00; --gold-d:#e67a00;
  --cream:#f7f4f0; --ink:#10202e; --muted:#6a7580; --line:#e6e3de;
  --green:#128c3e;
  --font:'Manrope','Helvetica Neue',Arial,sans-serif;
  --shadow:0 1px 2px rgba(16,32,46,.04), 0 1px 1px rgba(16,32,46,.06);
  --shadow-lift:0 10px 24px rgba(16,32,46,.10);
  --radius:6px; --rbtn:5px; --hdr:112px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 10px)}
/* accessibility helpers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:10px;top:-60px;background:#fff;color:var(--maroon);font-weight:700;padding:9px 16px;border-radius:8px;z-index:200;box-shadow:var(--shadow);transition:top .2s}
.skip-link:focus{top:10px}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--cream);line-height:1.55}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 18px}
h1,h2,h3,h4{font-family:var(--font);margin:0 0 .4em;line-height:1.15}

/* top + header */
.topbar{background:var(--maroon-d);color:#ffe9c7;font-size:13px}
.topbar-in{display:flex;justify-content:space-between;gap:12px;padding:7px 18px;flex-wrap:wrap}
.topbar a{color:#ffe9c7}
.header{position:sticky;top:0;z-index:50;background:#fff;box-shadow:var(--shadow)}
.header-in{display:flex;align-items:center;gap:16px;padding:10px 18px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:64px;width:auto}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-txt b{font-family:var(--font);color:var(--maroon);font-size:20px}
.brand-txt small{color:var(--gold-d);font-weight:700;letter-spacing:3px;font-size:12px}
.nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav a{padding:9px 14px;border-radius:10px;font-weight:600;font-size:15px;transition:.2s}
.nav a:hover{background:var(--cream);color:var(--maroon)}
.nav a.active{color:var(--maroon)}
.cart-link{background:var(--maroon);color:#fff!important;border-radius:var(--rbtn)}
.cart-link:hover{background:var(--maroon-d)!important}
.cart-badge{background:var(--gold);color:#3a1a00;border-radius:6px;padding:1px 8px;font-size:12px;font-weight:800;margin-left:4px}
.burger{display:none;font-size:26px;margin-left:auto;cursor:pointer;color:var(--maroon)}

/* hero */
.hero{background:linear-gradient(120deg,var(--maroon),var(--maroon-d));color:#fff;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(245,166,35,.35),transparent 45%)}
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;padding:56px 18px}
.hero h1{font-size:44px;color:#fff}
.hero h1 span{color:var(--gold)}
.hero p{font-size:18px;color:#ffe9c7;max-width:520px}
.hero-badges{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.hero-badges span{background:rgba(255,255,255,.14);padding:8px 14px;border-radius:7px;font-weight:600;font-size:14px}
.hero-art{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:24px;padding:26px;text-align:center;backdrop-filter:blur(4px)}
.hero-art .big{font-size:64px;font-family:var(--font);color:var(--gold);line-height:1}
.btn{display:inline-block;background:var(--maroon);color:#fff;font-weight:700;padding:12px 24px;border-radius:var(--rbtn);border:none;cursor:pointer;font-size:15px;letter-spacing:.2px;transition:.18s ease;box-shadow:0 2px 6px rgba(229,6,28,.22)}
.btn:hover{background:var(--maroon-d);transform:translateY(-1px);box-shadow:0 5px 14px rgba(229,6,28,.28)}
.btn:active{transform:translateY(0)}
.btn-ghost{background:transparent;border:2px solid #fff;color:#fff;box-shadow:none}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-sm{padding:8px 15px;font-size:13.5px}
.hero .btn{background:var(--gold);color:#3a1a00;box-shadow:0 3px 10px rgba(0,0,0,.2)}
.hero .btn:hover{background:var(--gold-d)}

/* sections */
section{padding:44px 0}
.sec-head{text-align:center;margin-bottom:28px}
.sec-head h2{font-size:34px;color:var(--maroon)}
.sec-head p{color:var(--muted);margin:0}
.eyebrow{color:var(--gold-d);font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:13px}

/* feature strip */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.feat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;text-align:center;box-shadow:var(--shadow)}
.feat .ic{font-size:34px}
.feat h4{margin:.4em 0 .2em;color:var(--maroon)}
.feat p{color:var(--muted);font-size:14px;margin:0}

/* category chips */
.chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.chip{background:#fff;border:1px solid var(--line);padding:8px 16px;border-radius:7px;font-weight:600;font-size:14px;cursor:pointer;transition:.2s}
.chip:hover,.chip.active{background:var(--maroon);color:#fff;border-color:var(--maroon)}

/* product grid */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:.2s}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(60,10,20,.16)}
.card .imgbox{aspect-ratio:1;background:#faf3e8;display:flex;align-items:center;justify-content:center;overflow:hidden}
.card .imgbox img{width:100%;height:100%;object-fit:cover}
.card .body{padding:12px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.card .cat{font-size:11px;color:var(--gold-d);font-weight:700;text-transform:uppercase;letter-spacing:1px}
.card .nm{font-weight:600;font-size:15px;min-height:42px}
.price-row{display:flex;align-items:baseline;gap:8px}
.price{color:var(--maroon);font-weight:800;font-size:20px;font-family:var(--font)}
.mrp{color:#8a7f86;text-decoration:line-through;font-size:14px}
.off{background:#eafaf0;color:var(--green);font-weight:700;font-size:12px;padding:1px 7px;border-radius:4px}
.card .act{margin-top:auto;display:flex;gap:8px;align-items:center}
.qtybox{display:flex;align-items:center;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.qtybox button{width:32px;height:36px;border:none;background:var(--cream);font-size:18px;cursor:pointer;color:var(--maroon)}
.qtybox input{width:42px;height:36px;border:none;text-align:center;font-size:15px;font-weight:600;-moz-appearance:textfield;appearance:textfield}
.qtybox input::-webkit-outer-spin-button,.qtybox input::-webkit-inner-spin-button{-webkit-appearance:none}
.add{flex:1;background:var(--maroon);color:#fff;border:none;border-radius:7px;height:38px;font-weight:700;cursor:pointer;transition:.2s}
.add:hover{background:var(--maroon-d)}
.add.added{background:var(--green)}

/* table view for cart */
.table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.table th,.table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
.table th{background:var(--maroon);color:#fff;font-family:var(--font)}
.table img{width:54px;height:54px;object-fit:cover;border-radius:8px}
.summary{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.summary .row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--line)}
.summary .row.total{border:none;font-size:22px;font-weight:800;color:var(--maroon);font-family:var(--font)}

/* forms */
.field{margin-bottom:14px}
.field label{display:block;font-weight:600;margin-bottom:5px;font-size:14px}
.field input,.field textarea,.field select{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff}
.field input:focus,.field textarea:focus{outline:2px solid var(--gold)}
.note{background:#fff6e6;border:1px solid #f3d9a3;color:#7a5a12;padding:12px 16px;border-radius:12px;font-size:14px}
.alert{background:#eafaf0;border:1px solid #b7e6c8;color:#0f6b31;padding:14px 18px;border-radius:12px;margin:14px 0}

/* footer */
.footer{background:var(--ink);color:#e9d9cf;margin-top:40px;padding:40px 0 0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr 1.6fr;gap:26px}
.footer h4{color:var(--gold);font-size:17px}
.footer a{display:block;color:#e9d9cf;padding:2px 0;font-size:14px}
.footer p{color:#c9b6ac;font-size:14px}
.disclaimer p{font-size:12.5px;line-height:1.6}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:26px;padding:16px;text-align:center;font-size:13px;color:#c9b6ac}
.foot-bottom a{color:var(--gold)}

/* whatsapp float */
.wa-float{position:fixed;right:18px;bottom:18px;width:56px;height:56px;background:#25d366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.3);z-index:60}


.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(120px);background:var(--ink);color:#fff;padding:12px 22px;border-radius:30px;font-weight:600;box-shadow:var(--shadow);z-index:100;transition:.3s;opacity:0}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

@media(max-width:900px){
  .hero-in,.foot-grid{grid-template-columns:1fr}
  .features{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:32px}
  .burger{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:6px}
  .nav{position:fixed;inset:0 0 0 auto;width:min(80vw,320px);background:#fff;flex-direction:column;align-items:stretch;padding:68px 18px 24px;transform:translateX(100%);transition:transform .25s ease;box-shadow:-8px 0 30px rgba(0,0,0,.2);overflow-y:auto;z-index:70}
  .nav.open{transform:translateX(0)}
  .nav a{padding:13px;border-radius:10px}
  .nav-close{display:flex}
}
@media(max-width:520px){
  .features,.grid{grid-template-columns:1fr 1fr;gap:12px}
  .card .nm{font-size:13.5px}
  .price{font-size:17px}
  .table thead{display:none}
  .table td{display:flex;justify-content:space-between;align-items:center;gap:12px;border:none;padding:6px 14px}
  .table td[data-label]::before{content:attr(data-label);font-weight:700;color:var(--muted);font-size:13px}
  .table tr{display:block;border-bottom:1px solid var(--line);padding:8px 0}
}

/* ===== Quick-order shop (table layout) ===== */
.shopsearch{max-width:520px;margin:0 auto 18px;display:flex;gap:8px}
.shopsearch input{flex:1;padding:11px 14px;border:1px solid var(--line);border-radius:10px;font:inherit}
.shop{display:grid;grid-template-columns:210px 1fr 300px;gap:18px;align-items:start}
.shop-cats{position:sticky;top:calc(var(--hdr) + 12px);background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);max-height:calc(100vh - var(--hdr) - 24px);overflow-y:auto}
.scat-head{background:var(--maroon);color:#fff;font-family:var(--font);padding:12px 16px;font-size:17px;position:sticky;top:0}
.scat{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);font-size:14px;font-weight:600;color:var(--ink)}
.scat span{background:var(--cream);color:var(--maroon);border-radius:20px;padding:1px 9px;font-size:12px;font-weight:700}
.scat:hover,.scat.active{background:var(--cream);color:var(--maroon)}

.shop-main{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.shop-table{width:100%;border-collapse:collapse}
.shop-table thead th{background:var(--maroon);color:#fff;font-family:var(--font);padding:11px 12px;text-align:left;font-size:14px}
.shop-table td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.shop-table tbody tr:not(.cat-band):hover{background:#fffaf0}
.cat-band td{background:linear-gradient(90deg,var(--gold),#ffcf6b);color:#5a2a06;font-family:var(--font);font-size:16px;text-align:center;letter-spacing:1px;padding:9px}
.c-img{width:62px}.c-img img{width:48px;height:48px;object-fit:cover;border-radius:8px;background:#faf3e8}
.c-num{white-space:nowrap;text-align:right;width:110px}
.shop-table .mrp{color:#8a7f86;text-decoration:line-through;font-size:13px}
.shop-table .price{color:var(--maroon);font-weight:800;font-family:var(--font);font-size:17px}
.shop-table .off{background:#eafaf0;color:var(--green);font-weight:700;font-size:11px;padding:1px 5px;border-radius:5px}
.c-qty{width:120px}.c-act{width:80px}
.pn{font-size:14.5px}
.shop-table .qtybox{width:fit-content}

.shop-cart{position:sticky;top:calc(var(--hdr) + 12px)}
.sc-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - var(--hdr) - 24px)}
.sc-head{background:var(--maroon);color:#fff;font-family:var(--font);padding:12px 16px;font-size:17px;display:flex;justify-content:space-between;align-items:center}
.sc-head .cart-badge{background:var(--gold)}
.sc-items{overflow-y:auto;padding:6px 0}
.sc-item{display:flex;gap:8px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--line)}
.sc-item img{width:38px;height:38px;object-fit:cover;border-radius:6px}
.sc-item .i-nm{font-size:12.5px;font-weight:600;line-height:1.2}
.sc-item .i-meta{font-size:11.5px;color:var(--muted)}
.sc-item .i-rm{margin-left:auto;color:#c33;cursor:pointer;font-size:18px;background:none;border:none}
.sc-empty{padding:24px 16px;text-align:center;color:var(--muted);font-size:13px}
.sc-foot{padding:12px 16px;border-top:1px solid var(--line);background:var(--cream)}
.sc-min{font-size:12px;color:#a11;margin-top:6px;text-align:center}

@media(max-width:1199px){ .shop{grid-template-columns:1fr} .shop-cats{display:none} .shop-cart{display:none} }
@media(max-width:560px){
  .shop-table thead{display:none}
  .shop-table,.shop-table tbody{display:block}
  .shop-table tr.cat-band{display:block}
  .cat-band td{display:block;text-align:center}
  /* clean flex row: image · (name+price) · control — all vertically centred, tight */
  .shop-table tr:not(.cat-band){
    display:flex;align-items:center;gap:12px;
    padding:10px 12px;border-bottom:1px solid var(--line)}
  .shop-table td{display:block;padding:0;border:none;width:auto}
  .c-img{flex:0 0 50px}
  .c-img img{width:50px;height:50px;object-fit:contain}
  .c-info{flex:1 1 auto;min-width:0}
  .c-info .pn{font-size:14px;line-height:1.25;font-weight:700;margin-bottom:4px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .c-info .c-price{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
  .c-info .c-price .price{font-size:15px}
  .c-info .c-price .mrp{font-size:11.5px}
  .c-info .c-price .off{font-size:9.5px;padding:1px 5px}
  .c-ctrl{flex:0 0 auto}
}

/* out of stock */
.oos-tag{position:absolute;top:8px;left:8px;background:var(--navy);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:5px}
.card.is-oos .imgbox{position:relative;filter:grayscale(.5) opacity(.85)}
.card.is-oos .add[disabled]{background:#c7ccd1;cursor:not-allowed;box-shadow:none}
.oos-pill{background:#fdecec;color:#c00516;font-size:11px;font-weight:700;padding:1px 7px;border-radius:5px;margin-left:6px;white-space:nowrap}
.shop-table tr.is-oos{opacity:.72}
.shop-table tr.is-oos .c-img img{filter:grayscale(.6)}

/* inline icons */
.ic{display:inline-block}
.topbar-in .tbi{display:inline-flex;align-items:center;gap:6px}
.cart-link,.nav a.cart-link{display:inline-flex;align-items:center;gap:6px}
.footer .ci,.summary .ci{display:flex;align-items:center;gap:8px}
.feat .ic svg{color:var(--maroon)}
.hero-badges span{display:inline-flex;align-items:center;gap:6px}
.sc-head,.scat-head{display:flex;align-items:center;gap:8px}

/* SEO: breadcrumbs, h1, footer link cloud */
.crumbs{background:#fff;border-bottom:1px solid var(--line);font-size:13px}
.crumbs .wrap{padding:9px 18px}
.crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--maroon)}
.crumbs span{color:var(--muted);margin:0 7px} .crumbs .cur{color:var(--ink);font-weight:600;margin:0}
.h1-seo{font-size:32px;color:var(--maroon)}
.seo-links{background:#fff;border-top:1px solid var(--line);padding:26px 0}
.seo-links h3{color:var(--maroon);font-size:18px;text-align:center;margin-bottom:14px}
.seo-linkgrid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:900px;margin:0 auto}
.seo-linkgrid a{font-size:13px;color:var(--muted);background:var(--cream);border:1px solid var(--line);padding:5px 12px;border-radius:6px}
.seo-linkgrid a:hover{color:#fff;background:var(--maroon);border-color:var(--maroon)}

/* ===== QA audit fixes: a11y, responsive grids, mobile nav ===== */
/* mobile nav overlay + close button */
.nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:opacity .25s;z-index:65}
body.nav-open{overflow:hidden}
body.nav-open .nav-overlay{opacity:1;visibility:visible}
.nav-close{display:none;position:absolute;top:14px;right:14px;width:40px;height:40px;border:none;background:var(--cream);border-radius:8px;font-size:22px;line-height:1;color:var(--maroon);cursor:pointer;align-items:center;justify-content:center}

/* two-column layouts that stack on smaller screens (cart, contact) */
.cart-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:24px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:820px){
  .cart-layout,.contact-grid{grid-template-columns:1fr}
}

/* hero CTA row wraps cleanly on small screens */
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.hero-cta .btn{margin:0}

/* fluid headings so nothing is oversized on phones / undersized on desktop */
.hero h1{font-size:clamp(28px,5.2vw,46px)}
.sec-head h2{font-size:clamp(24px,4vw,34px)}
.h1-seo{font-size:clamp(23px,4.4vw,32px)}

/* smaller phones: keep header compact + one-line topbar */
@media(max-width:560px){
  .brand img{height:48px}
  .topbar-in{justify-content:center;gap:0 16px}
  .topbar-in .tb-email{display:none}
  .header-in{gap:8px;padding:8px 14px}
}
@media(max-width:400px){
  .hero-badges span{font-size:13px;padding:7px 11px}
  .btn{padding:11px 18px}
}

/* comfortable touch targets on coarse pointers */
@media (pointer:coarse){
  .nav a,.footer a,.crumbs a,.seo-linkgrid a{min-height:40px;display:flex;align-items:center}
  .qtybox button{width:38px;height:40px}
  .qtybox input{height:40px}
}

/* ================= Premium refinement: one solid font, less curve ================= */
body{font-weight:400;letter-spacing:-.003em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.02em;line-height:1.1}
.hero h1,.h1-seo,.sec-head h2{letter-spacing:-.03em}
.eyebrow{letter-spacing:.16em;font-weight:700;font-size:12px}

/* sharpen radii site-wide */
.chip,.qtybox,.add,.field input,.field textarea,.field select,.shopsearch input,
.cart-badge,.off,.oos-tag,.oos-pill,.seo-linkgrid a,.scat span,.hero-badges span,.toast,
.table img,.sc-item img,.c-img img,.card .imgbox{border-radius:4px}
.btn,.cart-link,.nav a{border-radius:var(--rbtn)}
.card,.feat,.summary,.sc-box,.shop-cats,.shop-main,.table,.hero-art{border-radius:6px}

/* elevation: hairline borders + whisper shadow, real lift only on hover */
.feat,.card,.summary,.sc-box,.shop-cats,.shop-main,.table{box-shadow:var(--shadow)}
.card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);border-color:#d9d3c9}
.header{box-shadow:none;border-bottom:1px solid var(--line)}

/* buttons: solid and steady (no toy bounce) */
.btn{box-shadow:none;transition:background .15s ease,color .15s ease}
.btn:hover,.btn:active{transform:none;box-shadow:none}
.hero .btn{box-shadow:none}

/* category band: restrained premium navy, not a candy gradient */
.cat-band td{background:var(--navy);color:#fff;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12.5px;padding:11px}
.shop-table thead th{letter-spacing:.05em;text-transform:uppercase;font-size:12px;font-weight:700}
.scat-head,.sc-head{font-weight:800;letter-spacing:.01em}

/* weight, not novelty, carries price + totals */
.price,.shop-table .price,.summary .row.total{font-weight:800}

/* crisper field focus */
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--maroon);outline-offset:1px}

/* slightly calmer hero glow */
.hero:after{background:radial-gradient(circle at 82% 18%,rgba(255,138,0,.22),transparent 46%)}

/* ================= Sticky order bar + fast checkout popup ================= */
.orderbar{position:fixed;left:0;right:0;bottom:0;z-index:75;background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 20px rgba(16,32,46,.10)}
.orderbar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px}
.ob-summary{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ob-count{color:var(--muted);font-size:14px;font-weight:600}
.ob-total{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.ob-save{font-size:13px;color:var(--green);font-weight:700}
.ob-cta{font-size:16px;padding:12px 28px;white-space:nowrap}
body.has-orderbar{padding-bottom:74px}
body.has-orderbar .wa-float{bottom:86px}
@media(max-width:560px){
  .orderbar-in{padding:9px 14px;gap:10px}
  .ob-total{font-size:19px} .ob-count{font-size:12px} .ob-save{display:none}
  .ob-cta{padding:11px 18px;font-size:15px}
  body.has-orderbar{padding-bottom:66px} body.has-orderbar .wa-float{bottom:80px}
}

.co-overlay{position:fixed;inset:0;background:rgba(10,20,32,.55);opacity:0;visibility:hidden;transition:opacity .2s;z-index:90}
body.co-active .co-overlay{opacity:1;visibility:visible}
.co-modal{position:fixed;z-index:95;background:#fff;width:min(460px,calc(100vw - 32px));left:50%;top:50%;
  transform:translate(-50%,-46%);opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s ease;
  border-radius:8px;box-shadow:0 24px 64px rgba(10,20,32,.32);max-height:92vh;display:flex;flex-direction:column;overflow:hidden}
body.co-active .co-modal{opacity:1;visibility:visible;transform:translate(-50%,-50%)}
body.co-active{overflow:hidden}
.co-head{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;border-bottom:1px solid var(--line);flex:none}
.co-head h3{font-size:18px;font-weight:800}
.co-close{border:none;background:var(--cream);width:34px;height:34px;border-radius:5px;font-size:22px;line-height:1;color:var(--ink);cursor:pointer}
.co-body{padding:16px 20px;overflow-y:auto}
.co-order{background:var(--cream);border:1px solid var(--line);border-radius:6px;padding:12px 14px;margin-bottom:16px}
.co-items-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:none;font:inherit;font-weight:700;cursor:pointer;color:var(--ink);padding:0}
.co-chev{transition:transform .2s;color:var(--muted)}
.co-items-toggle[aria-expanded="true"] .co-chev{transform:rotate(180deg)}
.co-items{margin-top:10px;max-height:170px;overflow-y:auto;display:flex;flex-direction:column;gap:7px}
.co-line{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.co-line span{color:var(--muted)} .co-line b{white-space:nowrap}
.co-totals{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.co-save,.co-total{display:flex;justify-content:space-between;align-items:baseline}
.co-save{font-size:13px;color:var(--green);font-weight:700}
.co-total{font-size:20px;font-weight:800;margin-top:4px;letter-spacing:-.02em}
.co-min{margin-top:10px;background:#fff6e6;border:1px solid #f3d9a3;color:#7a5a12;font-size:13px;padding:8px 10px;border-radius:5px}
.co-row{display:flex;gap:10px}
.co-row .co-field{flex:1}
.co-field{margin-bottom:12px;display:flex;flex-direction:column}
.co-field label{font-size:13px;font-weight:600;margin-bottom:5px}
.co-opt{color:var(--muted);font-weight:400}
.co-field input{padding:11px 13px;border:1px solid var(--line);border-radius:5px;font:inherit;background:#fff}
.co-field input:focus{outline:2px solid var(--maroon);outline-offset:1px}
.co-error{background:#fdecec;border:1px solid #f3b3b3;color:#a11;font-size:13px;padding:9px 12px;border-radius:5px;margin-bottom:12px}
.co-place{width:100%;font-size:16px;padding:13px}
.co-place[disabled]{opacity:.55;cursor:not-allowed}
.co-trust{font-size:11.5px;color:var(--muted);text-align:center;margin:.7em 0 0}
.co-success{padding:32px 24px 26px;text-align:center}
.co-tick{width:64px;height:64px;border-radius:50%;background:#eafaf0;color:var(--green);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.co-success h3{font-size:22px;font-weight:800;margin-bottom:8px}
.co-success p{color:var(--muted);font-size:14px;max-width:34ch;margin:0 auto 16px}
.co-wa{background:#25d366;color:#fff;width:100%;margin-bottom:10px}
.co-wa:hover{background:#1eb257}
.co-continue{width:100%;background:none;color:var(--maroon);border:1px solid var(--line)}
.co-continue:hover{background:var(--cream)}
@media(max-width:560px){
  .co-modal{left:0;top:auto;bottom:0;transform:translateY(100%);width:100%;max-height:94vh;border-radius:12px 12px 0 0}
  body.co-active .co-modal{transform:translateY(0)}
}

/* ================= Compact, high-conversion product rows ================= */
.shop-table{table-layout:fixed}
.shop-table td{padding:8px 12px;vertical-align:middle}
.shop-table thead th{padding:9px 12px}
.shop-table th.c-img,.shop-table td.c-img{width:56px}
.c-img img{width:44px;height:44px}
.c-name{width:auto}
.c-name .pn{font-size:14.5px;font-weight:600;line-height:1.25;color:var(--ink)}
/* one clear price block: rate big, MRP struck, savings badge */
.c-price{width:176px;white-space:nowrap;text-align:left}
.c-price .price{font-size:18px;font-weight:800;color:var(--maroon);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.c-price .mrp{font-size:12.5px;margin-left:7px;color:#8a7f86}
.c-price .off{display:inline-block;margin-left:7px;background:#eafaf0;color:var(--green);font-size:10.5px;font-weight:700;letter-spacing:.02em;padding:2px 6px;border-radius:4px;vertical-align:middle}
/* compact qty stepper */
.c-qty{width:118px}
.shop-table .qtybox{width:fit-content}
.shop-table .qtybox button{width:30px;height:34px;font-size:17px}
.shop-table .qtybox input{width:38px;height:34px;font-size:14px}
/* prominent, proportional Add */
.c-act{width:88px;text-align:right}
.shop-table .add{width:100%;height:34px;padding:0 12px;font-size:14px;font-weight:700}
/* tighter row separators + clear hover affordance */
.shop-table tbody tr:not(.cat-band){border-bottom:1px solid var(--line)}
.shop-table tbody tr:not(.cat-band):hover{background:#fff7f2}

/* keep the compact structure legible when stacked on phones */
@media(max-width:560px){
  .c-price{white-space:normal}
  .c-price .price{font-size:17px}
  .c-name .pn{font-size:14px}
}

/* ===== Button hierarchy: Add = gold (secondary), Complete Order = red (final) ===== */
.add{background:var(--gold);color:#3a1a00}
.add:hover{background:var(--gold-d)}
.add.added{background:var(--green);color:#fff}
.card .add[disabled],.shop-table .add[disabled]{background:#c7ccd1;color:#fff}
/* bigger, centred Add + tidy column alignment in the price table */
.shop-table .add{height:40px;font-size:15px;font-weight:700;padding:0 16px}
.c-price{width:168px}
.c-qty{width:132px;text-align:center}
.c-act{width:112px;text-align:center}
.shop-table .c-qty .qtybox{margin:0 auto}
.shop-table .c-act .add{width:100%;max-width:100px}
.shop-table td{vertical-align:middle}

/* ================= Category scroller (two-row circular browser) ================= */
.catscroll-sec{background:#fff;padding:38px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.catscroll-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:20px}
.catscroll-head h2{font-size:clamp(22px,3.4vw,30px);color:var(--maroon);margin:0}
.catscroll-nav{display:flex;gap:8px;flex:none}
.cs-arrow{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s,border-color .15s}
.cs-arrow:hover{background:var(--maroon);color:#fff;border-color:var(--maroon)}
.cs-arrow[disabled]{opacity:.35;cursor:default;background:#fff;color:var(--muted);border-color:var(--line)}
.catscroll{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:128px;
  gap:22px 22px;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;
  padding-bottom:4px;-ms-overflow-style:none;scrollbar-width:none}
.catscroll::-webkit-scrollbar{display:none}
.cs-item{scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px}
.cs-thumb{width:108px;height:108px;border-radius:50%;overflow:hidden;background:var(--cream);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.cs-item:hover .cs-thumb{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--gold)}
.cs-thumb img{width:100%;height:100%;object-fit:cover}
.cs-name{font-weight:700;font-size:14px;color:var(--ink);line-height:1.2}
.cs-count{font-size:12px;color:var(--muted)}
@media(max-width:560px){
  .catscroll-sec{padding:28px 0}
  .catscroll{grid-auto-columns:100px;gap:16px}
  .cs-thumb{width:84px;height:84px}
  .cs-name{font-size:12.5px}.cs-count{font-size:11px}
}

/* ================= Modern product cards (Swiggy-style) ================= */
.card{border-radius:12px;border:1px solid var(--line)}
.card .imgbox{aspect-ratio:1;background:#fff;padding:12px;border-bottom:1px solid var(--line2)}
.card .imgbox img{object-fit:contain}
.card .body{padding:12px 14px 14px;gap:7px}
.card .cat{font-size:10.5px;letter-spacing:.06em}
.card .nm{font-weight:700;font-size:15px;line-height:1.25;min-height:38px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .price{font-size:19px}
.card .act{gap:8px;margin-top:2px}
.card .add{height:40px;font-size:14.5px}
.card:hover{border-color:#d9d3c9}

/* ================= Add -> stepper morph control ================= */
.qadd{display:inline-flex;align-items:center;justify-content:flex-end}
.qadd .add{background:var(--gold);color:#3a1a00;border:none;border-radius:6px;font-weight:700;cursor:pointer;height:38px;padding:0 22px;font-size:14.5px;transition:background .15s}
.qadd .add:hover{background:var(--gold-d)}
.qbox{display:inline-flex;align-items:center;border:1.5px solid var(--gold);border-radius:6px;overflow:hidden;background:#fff}
.qbox button{width:34px;height:38px;border:none;background:var(--gold);color:#3a1a00;font-size:19px;font-weight:700;cursor:pointer;line-height:1}
.qbox button:hover{background:var(--gold-d)}
.qbox .qv{min-width:38px;text-align:center;font-weight:800;font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.soldout{color:#c00516;font-weight:700;font-size:13px}
/* desktop table control column */
@media(min-width:561px){.shop-table .c-ctrl{width:132px;text-align:right;white-space:nowrap;vertical-align:middle}}
/* product card: full-width morph */
.card .qadd.wide{width:100%}
.card .qadd.wide .add{width:100%;height:40px}
.card .qadd.wide .qbox{width:100%;justify-content:space-between;height:40px}
.card .qadd.wide .qbox button{height:38px}
.card .qadd.wide .qbox .qv{flex:1}
/* mobile: compact morph */
@media(max-width:560px){
  .qadd .add{height:34px;padding:0 18px;font-size:13.5px}
  .qbox button{width:30px;height:34px;font-size:17px}
  .qbox .qv{min-width:30px;font-size:14px}
}

/* ============ Fixes: horizontal-overflow safety, modal fields, sidebar polish ============ */
html,body{overflow-x:clip}
/* modal form fields must shrink on narrow screens (fixes the "slides sideways") */
.co-row{min-width:0}
.co-row .co-field{flex:1 1 0;min-width:0}
.co-field input,.co-field textarea{width:100%;min-width:0}
.co-modal,.co-body{overflow-x:hidden}
@media(max-width:430px){ .co-row{flex-direction:column;gap:0} }

/* brighter, more alive category sidebar */
.shop-cats{border:1px solid var(--line)}
.scat{border-left:3px solid transparent;transition:background .12s,color .12s,border-color .12s}
.scat:hover{background:#fff4ea;color:var(--maroon)}
.scat.active{background:#fff4ea;color:var(--maroon);border-left-color:var(--gold);font-weight:700}
.scat.active span{background:var(--gold);color:#3a1a00}
.scat span{background:#f1ede7;color:var(--muted)}

/* ============ Cart+checkout sheet: 2-step layout ============ */
.co-modal{display:flex;flex-direction:column;max-height:92vh}
.co-head{position:relative}
.co-back{border:none;background:var(--cream);width:34px;height:34px;border-radius:6px;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transform:rotate(180deg)}
.co-step{padding:14px 18px;overflow-y:auto;flex:1 1 auto}
.co-foot{border-top:1px solid var(--line);background:#fff;padding:12px 18px 16px;flex:none}
.co-foot .co-totals{margin-bottom:8px}
.co-place{width:100%;font-size:16px;padding:13px}
/* editable cart list */
.co-cartlist{display:flex;flex-direction:column;gap:0}
.cc-item{display:grid;grid-template-columns:46px 1fr auto auto;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line2)}
.cc-item:last-child{border-bottom:none}
.cc-item img{width:46px;height:46px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:6px}
.cc-nm{font-weight:700;font-size:14px;line-height:1.25}
.cc-pr{font-size:12px;color:var(--muted)}
.cc-step{border-color:var(--gold)}
.cc-step button{width:30px;height:32px}
.cc-step .qv{min-width:26px;font-size:14px}
.cc-line{font-weight:800;font-size:14.5px;min-width:58px;text-align:right;font-variant-numeric:tabular-nums}
.co-empty2{padding:30px 10px;text-align:center;color:var(--muted)}
@media(max-width:430px){
  .cc-item{grid-template-columns:42px 1fr auto;grid-template-areas:"img info step" "img line line";row-gap:4px}
  .cc-item img{grid-area:img} .cc-info{grid-area:info} .cc-step{grid-area:step}
  .cc-line{grid-area:line;text-align:left;min-width:0}
}

/* cart icon + label alignment on the order bar */
.ob-cta{display:inline-flex;align-items:center;gap:8px}

/* ============ Mobile menu: professional redesign ============ */
@media(min-width:901px){ .nav-links{display:contents} .nav-ic,.nav-foot{display:none} }
@media(max-width:900px){
  .nav{padding:64px 16px 18px}
  .nav-links{display:flex;flex-direction:column;gap:2px}
  .nav a{display:flex;align-items:center;gap:12px;padding:14px 14px;border-radius:10px;font-size:16px;font-weight:600;color:var(--ink)}
  .nav-ic{display:inline-flex;color:var(--maroon);flex:none}
  .nav a.active{background:#fff4ea;color:var(--maroon)}
  .nav a.active .nav-ic{color:var(--maroon)}
  .nav a:not(.cart-link):active{background:var(--cream)}
  .nav .cart-link{margin-top:10px;justify-content:center;font-size:16px;padding:14px}
  .nav-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
  .nav-wa{display:flex;align-items:center;justify-content:center;gap:8px;background:#25d366;color:#fff;padding:13px;border-radius:9px;font-weight:700}
  .nav-phone{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:14px;margin:0;justify-content:center}
}

/* ============ Product row: unified Photo | Product(name+price) | Add ============ */
.shop-table td{vertical-align:middle}
.shop-table .c-img{width:64px}
.shop-table .c-img img{width:52px;height:52px;object-fit:contain}
@media(min-width:561px){
  .c-info{padding:2px 0}
  .c-info .pn{font-weight:700;font-size:15px;line-height:1.3;margin-bottom:5px;color:var(--ink)}
  .c-info .c-price{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
  .c-info .c-price .price{font-size:18px;font-weight:800;color:var(--maroon)}
  .c-info .c-price .mrp{font-size:13px}
  .c-info .c-price .off{font-size:11px}
}

/* hide floating WhatsApp when menu or checkout sheet is open (avoid overlap) */
body.nav-open .wa-float,body.co-active .wa-float{opacity:0;pointer-events:none;visibility:hidden}

/* ============ Table-only: outlined Add + stepper, equal size, tighter radius ============ */
.shop-table .qadd .add,
.shop-table .qbox{
  background:var(--cream);
  border:2px solid var(--gold);
  border-radius:3px;
  height:38px;
  box-sizing:border-box;
}
.shop-table .qadd .add{color:#3a1a00;width:112px;padding:0;font-weight:700}
.shop-table .qbox{width:112px;overflow:hidden}
.shop-table .qbox button{background:transparent;border:none;color:var(--gold-d);width:34px;height:100%;font-size:18px}
.shop-table .qbox .qv{background:transparent;flex:1;color:#3a1a00;font-weight:800;font-size:15px}
.shop-table .qadd .add:hover,.shop-table .qbox button:hover{background:#fbe9d3}
@media(max-width:560px){
  .shop-table .qadd .add,.shop-table .qbox{height:36px;width:104px}
  .shop-table .qbox button{width:32px}
}

/* ================= Instant search (sticky, modern) ================= */
.searchwrap{background:var(--cream);padding:4px 0 14px;margin-bottom:2px}
.livesearch{position:relative;max-width:none;margin:0}
.livesearch .ls-ic{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted);display:flex;pointer-events:none}
.livesearch input{width:100%;height:48px;padding:0 44px;border:1.5px solid var(--line);border-radius:10px;font:inherit;font-size:15px;background:#fff;box-shadow:var(--shadow);-webkit-appearance:none}
.livesearch input::-webkit-search-cancel-button{display:none}
.livesearch input:focus{outline:none;border-color:var(--maroon);box-shadow:0 0 0 3px rgba(229,6,28,.12)}
.ls-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:none;background:var(--cream);border-radius:6px;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.ls-clear:hover{color:var(--maroon);background:#efe7dc}
.ls-count{margin:8px 0 0;font-size:12.5px;color:var(--muted)}
.ls-empty{padding:44px 16px;text-align:center;color:var(--muted)}
.ls-empty svg{color:#d9d3c9;margin-bottom:10px}
.ls-empty p{margin:0 0 14px;font-size:15px}
/* header search icon (mobile + desktop) */
.hdr-search{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:8px;color:var(--maroon);margin-left:auto;flex:none}
.hdr-search:hover{background:var(--cream)}
.nav{margin-left:10px}
.burger{margin-left:6px}
@media(max-width:560px){
  .searchwrap{padding:8px 0 10px}
  .livesearch input{height:44px}
}

/* ================= Mobile bottom tab bar (mobile only) ================= */
.mtabbar{display:none}
@media(max-width:560px){
  .mtabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:72;
    background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(16px) saturate(1.35); backdrop-filter:blur(16px) saturate(1.35);
    border-top:1px solid rgba(230,227,222,.7);
    box-shadow:0 -6px 26px rgba(16,32,46,.10);
    padding-bottom:env(safe-area-inset-bottom,0px);
    transition:transform .25s ease;
  }
  .mtab{
    flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    min-height:56px; padding:8px 2px 7px; margin:0; border:0; background:none; cursor:pointer;
    font:inherit; font-weight:600; letter-spacing:.01em; line-height:1;
    color:var(--muted); text-decoration:none; -webkit-tap-highlight-color:transparent;
  }
  .mtab-ic{position:relative; display:flex; align-items:center; justify-content:center; line-height:0; color:#8a929b;
    padding:5px 18px; border-radius:16px; transition:background .2s ease,color .15s ease,transform .18s ease}
  .mtab-ic svg{width:24px; height:24px}
  .mtab-t{font-size:11px; transition:color .15s ease,font-weight .15s ease}
  /* premium active state: brand-tinted pill behind the icon */
  .mtab.active, body.cats-active .mtab-cats{color:var(--maroon)}
  .mtab.active .mtab-ic, body.cats-active .mtab-cats .mtab-ic{background:rgba(229,6,28,.10); color:var(--maroon)}
  .mtab.active .mtab-t, body.cats-active .mtab-cats .mtab-t{font-weight:800}
  .mtab:active .mtab-ic{transform:scale(.9)}
  .mtab-wa .mtab-ic{color:#1fae4d}
  .mtab-badge{
    position:absolute; top:-7px; left:13px; display:none; min-width:16px; height:16px; padding:0 4px;
    background:var(--maroon); color:#fff; font-size:10px; font-weight:800; line-height:16px; text-align:center;
    border-radius:9px; box-shadow:0 0 0 2px #fff;
  }
  body.has-cart .mtab-badge{display:block}
  /* keep content clear of the fixed bar (only when the bar exists) */
  body:has(#mtabbar){padding-bottom:calc(58px + env(safe-area-inset-bottom,0px))}
  /* the View Cart / place-order bar stacks directly ABOVE the tab bar */
  .orderbar{bottom:calc(58px + env(safe-area-inset-bottom,0px)); box-shadow:0 -2px 14px rgba(16,32,46,.10)}
  body.has-orderbar:has(#mtabbar){padding-bottom:calc(118px + env(safe-area-inset-bottom,0px))}
  /* WhatsApp now lives in the tab bar → drop the floating button on mobile */
  .wa-float{display:none}
  /* slide the tab bar out of the way while the side menu or checkout sheet is open */
  body.nav-open .mtabbar, body.co-active .mtabbar{transform:translateY(110%)}
  /* but the tab bar STAYS while the category sheet is open — lift it above the sheet + overlay so it's bright and tappable */
  body.cats-active .mtabbar{z-index:96}
}

/* ===== Side menu (drawer): slide in from the right, no dim/fade, links clickable ===== */
@media(max-width:900px){
  /* the header holds the drawer and is a z-index:50 stacking context — lift it above the
     overlay while open so the drawer paints on top and its links receive taps */
  body.nav-open .header{z-index:82}
  .nav{z-index:80}
  /* overlay stays only as an invisible tap-outside-to-close catcher: no grey dim, no fade */
  .nav-overlay{background:transparent;transition:none;z-index:78}
  /* hide the cart bar while the menu is open — instantly, no fade */
  body.nav-open .orderbar{display:none}
}

/* ================= Category picker bottom sheet (mobile) ================= */
.catsheet-overlay{position:fixed;inset:0;background:rgba(10,20,32,.5);opacity:0;visibility:hidden;transition:opacity .22s ease;z-index:92}
body.cats-active .catsheet-overlay{opacity:1;visibility:visible}
.catsheet{
  position:fixed;left:0;right:0;bottom:calc(58px + env(safe-area-inset-bottom,0px));z-index:94;background:#fff;
  border-radius:18px 18px 0 0;box-shadow:0 -12px 40px rgba(10,20,32,.24);
  max-height:74vh;display:flex;flex-direction:column;
  transform:translateY(120%);transition:transform .3s cubic-bezier(.32,.72,.29,1)}
body.cats-active .catsheet{transform:translateY(0)}
.catsheet-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px;flex:none;border-bottom:1px solid var(--line2)}
.catsheet-head::before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:40px;height:4px;border-radius:3px;background:var(--line)}
.catsheet-head h3{font-size:17px;font-weight:800;color:var(--maroon)}
.catsheet-close{border:none;background:var(--cream);width:34px;height:34px;border-radius:8px;font-size:22px;line-height:1;color:var(--ink);cursor:pointer;flex:none}
.cats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 10px;padding:18px 16px 22px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.cat-tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;background:none;border:none;padding:2px;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cat-tile .cs-thumb{width:88px;height:88px;box-shadow:0 3px 10px rgba(16,32,46,.12)}
.cat-tile:active .cs-thumb{transform:scale(.94);border-color:var(--gold)}
.cat-tile .cs-name{font-size:12.5px;font-weight:700}
.cat-tile .cs-count{font-size:11px}
@media(max-width:360px){ .cat-tile .cs-thumb{width:80px;height:80px} }
/* keep the sheet a mobile-only pattern */
@media(min-width:561px){ .catsheet,.catsheet-overlay{display:none} }

/* ================= Product image lightbox ================= */
.c-img img{cursor:zoom-in}
.imgpop{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;
  background:rgba(8,14,22,.88);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  padding:max(16px,env(safe-area-inset-top,0)) 16px max(16px,env(safe-area-inset-bottom,0))}
.imgpop.open{display:flex;animation:imgpopIn .18s ease}
@keyframes imgpopIn{from{opacity:0}to{opacity:1}}
.imgpop-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:100%;max-height:100%}
.imgpop-img{display:block;max-width:min(92vw,820px);max-height:82vh;width:auto;height:auto;object-fit:contain;
  border-radius:14px;background:#fff;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.imgpop-cap{color:#fff;font-size:15px;font-weight:600;text-align:center;max-width:92vw;line-height:1.3;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.imgpop-close{position:absolute;top:calc(12px + env(safe-area-inset-top,0));right:14px;
  width:46px;height:46px;border:none;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;
  font-size:30px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s ease;-webkit-tap-highlight-color:transparent}
.imgpop-close:hover,.imgpop-close:focus-visible{background:rgba(255,255,255,.3)}
body.imgpop-open{overflow:hidden}
@media(max-width:560px){
  .imgpop-img{max-width:94vw;max-height:76vh}
  .imgpop-cap{font-size:14px}
}