/* ================================================================
   MAGIZHAM POO FIREWORKS 2026 — PREMIUM POLISHED CATALOG
   Polish pass: typography, spacing, cards, interactions, mobile
================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,600&family=Inter:wght@300;400;500;600;700&display=swap');

/* ── DESIGN TOKENS ── */
:root {
  --bg:        #09090d;
  --bg-s:      #0f0f15;
  --bg-c:      #131319;
  --bg-e:      #1a1a24;
  --bg-h:      #20202c;

  --border:    rgba(255,255,255,0.06);
  --border-m:  rgba(255,255,255,0.10);
  --border-s:  rgba(255,255,255,0.16);

  --gold:      #c8903a;
  --gold-l:    #ddb96a;
  --gold-xl:   #f0d090;
  --gold-d:    rgba(200,144,58,0.12);
  --gold-glow: rgba(200,144,58,0.25);

  --crimson:   #9b1414;
  --emerald:   #16a34a;
  --em-glow:   #4ade80;
  --violet:    #7c3aed;

  --wa:        #25d366;
  --wa-dk:     #1da851;
  --wa-glow:   rgba(37,211,102,0.2);

  --tx:        #eee8df;
  --tx-s:      #958d84;
  --tx-m:      #4e4a46;
  --tx-xs:     #302e2b;

  --font-d:    'Playfair Display', Georgia, serif;
  --font-b:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --r1: 3px;
  --r2: 6px;
  --r3: 10px;
  --r4: 14px;
  --rp: 100px;

  --sh0:  0 1px 2px rgba(0,0,0,0.5);
  --sh1:  0 2px 8px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.3);
  --sh2:  0 8px 24px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.3);
  --sh3:  0 20px 60px rgba(0,0,0,0.7), 0 8px 24px rgba(0,0,0,0.4);
  --sh-gold: 0 4px 20px rgba(200,144,58,0.3);
  --sh-wa:   0 4px 20px rgba(37,211,102,0.3);

  --t1: 140ms ease;
  --t2: 210ms ease;
  --t3: 340ms cubic-bezier(.25,.46,.45,.94);

  --mw:  1520px;
  --hh:  60px;
  --mhh: 54px;
  --msb: 50px;
  --mnh: 60px;
  --sw:  224px;
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-size:15px;-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent}
body{
  background:var(--bg);
  color:var(--tx);
  font-family:var(--font-b);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit;border:none;background:none;line-height:1}
ul{list-style:none}

/* Skip link for a11y */
.skip-link{
  position:absolute;top:-100%;left:16px;
  background:var(--gold);color:#1a0e00;
  padding:8px 16px;border-radius:0 0 var(--r2) var(--r2);
  font-weight:700;font-size:13px;z-index:9999;
  transition:top .15s;
}
.skip-link:focus{top:0}

/* ── UTILITY ── */
.sr-only{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden;white-space:nowrap}
.ambient-bg{display:none}
#fireworks-canvas{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.3}

/* ── FOCUS VISIBLE ── */
:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
  border-radius:var(--r1);
}

/* ======================================================
   ANNOUNCEMENT BAR
====================================================== */
.announcement-bar{
  position:relative;z-index:200;
  background:var(--gold);color:#1a0a00;
  text-align:center;font-size:11.5px;font-weight:600;
  letter-spacing:.045em;padding:7px 16px;
  display:flex;align-items:center;justify-content:center;
  gap:12px;flex-wrap:wrap;
  border-bottom:1px solid rgba(0,0,0,.15);
}
.announcement-bar .badge-pill{
  background:rgba(0,0,0,0.18);padding:2px 10px;
  border-radius:var(--rp);font-size:10.5px;
  font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;
}
.announcement-bar strong{font-weight:800}

/* ======================================================
   DESKTOP HEADER
====================================================== */
.site-header{
  position:sticky;top:0;z-index:300;
  height:var(--hh);
  background:rgba(9,9,13,.96);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--border);
  transition:background var(--t2);
}
.header-inner{
  max-width:var(--mw);margin:0 auto;
  height:100%;padding:0 28px;
  display:flex;align-items:center;gap:18px;
}
.brand-logo{
  display:flex;align-items:center;gap:10px;
  flex-shrink:0;text-decoration:none;
}
.brand-mark{
  display:block;flex-shrink:0;
  height:38px;width:auto;
  filter:drop-shadow(0 0 8px rgba(200,144,58,.35));
}
.brand-text h1{
  font-family:var(--font-d);
  font-size:16px;font-weight:700;
  color:var(--tx);line-height:1.08;
  letter-spacing:.03em;
}
/* "Fireworks" drops to its own line so the longer brand name
   does not crowd the header action buttons. */
.brand-text h1 span{color:var(--gold);display:block}
.brand-text .tag{
  display:block;font-size:9.5px;font-weight:500;
  color:var(--tx-m);letter-spacing:.1em;
  text-transform:uppercase;margin-top:1px;
}
.header-actions{
  margin-left:auto;
  display:flex;align-items:center;gap:6px;
}
.header-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 13px;border-radius:var(--r1);
  font-size:12.5px;font-weight:500;color:var(--tx-s);
  border:1px solid var(--border-m);white-space:nowrap;
  transition:color var(--t1),border-color var(--t1),background var(--t1);
}
.header-btn:hover{
  color:var(--tx);border-color:var(--border-s);
  background:var(--bg-e);
}
.btn-whatsapp-header{
  background:var(--wa);color:#fff!important;
  border-color:transparent!important;font-weight:600;
  box-shadow:var(--sh-wa);
}
.btn-whatsapp-header:hover{background:var(--wa-dk);transform:translateY(-1px)}

/* Call button */
.hdr-call-btn{
  display:flex;align-items:center;gap:5px;
  background:rgba(37,211,102,0.1);
  border:1px solid rgba(37,211,102,0.3);
  border-radius:var(--rp);
  color:var(--wa);
  font-size:11.5px;font-weight:700;
  padding:5px 12px;
  text-decoration:none;white-space:nowrap;
  transition:background var(--t1),box-shadow var(--t1);
}
.hdr-call-btn:hover{
  background:rgba(37,211,102,0.2);
  box-shadow:0 0 0 3px rgba(37,211,102,0.12);
}

/* Lang toggle */
.lang-toggle{
  display:flex;
  border:1px solid rgba(200,144,58,0.35);
  border-radius:var(--rp);overflow:hidden;
  flex-shrink:0;
}
.lang-btn{
  background:transparent;border:none;
  color:var(--tx-m);
  font-size:10.5px;font-weight:700;
  padding:5px 8px;
  cursor:pointer;
  transition:background var(--t1),color var(--t1);
  font-family:inherit;
}
.lang-btn.active{background:var(--gold);color:#1a0800;}
.lang-btn:hover:not(.active){color:var(--gold-l);}

/* ======================================================
   TOOLBAR — SEARCH + CATEGORIES
====================================================== */
.toolbar-wrap{
  position:sticky;top:var(--hh);z-index:250;
  background:rgba(9,9,13,.97);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.toolbar-inner{
  max-width:var(--mw);margin:0 auto;
  padding:10px 28px;
  display:flex;align-items:center;gap:14px;
}

/* Search */
.search-container{position:relative;flex:1;max-width:440px}
.search-icon{
  position:absolute;left:12px;top:50%;
  transform:translateY(-50%);
  font-size:13px;color:var(--tx-m);
  pointer-events:none;
  transition:color var(--t1);
}
.search-input{
  width:100%;background:var(--bg-e);
  border:1px solid var(--border-m);
  border-radius:var(--r2);
  padding:9px 34px 9px 36px;
  font-size:13px;font-family:var(--font-b);
  color:var(--tx);outline:none;
  transition:border-color var(--t1),box-shadow var(--t1),background var(--t1);
}
.search-input::placeholder{color:var(--tx-m)}
.search-input:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px var(--gold-d);
  background:var(--bg-h);
}
.search-container:focus-within .search-icon{color:var(--gold)}
.search-clear{
  position:absolute;right:8px;top:50%;
  transform:translateY(-50%);
  width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;color:var(--tx-m);
  opacity:0;transition:opacity var(--t1),color var(--t1);
  border-radius:50%;
}
.search-clear.visible{opacity:1}
.search-clear:hover{color:var(--tx);background:var(--bg-h)}
.toolbar-quick-actions{margin-left:auto;flex-shrink:0}

/* Category tabs */
.category-scroller{
  max-width:var(--mw);margin:0 auto;
  padding:0 28px 10px;
  display:flex;gap:3px;
  overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.category-scroller::-webkit-scrollbar{display:none}
.cat-tab{
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 13px;border-radius:var(--rp);
  font-size:12px;font-weight:500;
  color:var(--tx-s);border:1px solid transparent;
  white-space:nowrap;flex-shrink:0;
  text-decoration:none;
  transition:color var(--t1),background var(--t1),border-color var(--t1);
  user-select:none;
}
.cat-tab:hover{
  color:var(--tx);
  background:var(--bg-h);
  border-color:var(--border);
}
.cat-tab.active{
  color:var(--gold);
  background:var(--gold-d);
  border-color:rgba(200,144,58,0.25);
  font-weight:600;
}
.highlight-tab{
  color:var(--wa)!important;
  border-color:rgba(37,211,102,0.2)!important;
  background:rgba(37,211,102,0.06)!important;
}
.highlight-tab:hover,.highlight-tab.active{
  background:rgba(37,211,102,0.13)!important;
}

/* ======================================================
   MOBILE HEADER
====================================================== */
.mobile-header{
  display:none;
  position:sticky;top:0;z-index:300;
  height:var(--mhh);
  background:rgba(9,9,13,.98);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  align-items:center;padding:0 14px;gap:8px;
}
.m-brand{
  display:flex;align-items:center;gap:7px;flex:1;
  text-decoration:none;overflow:hidden;
}
.m-brand-icon{font-size:18px;line-height:1;flex-shrink:0}
.m-brand-name{
  font-family:var(--font-d);
  font-size:15px;font-weight:700;
  color:var(--tx);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.m-brand-name span{color:var(--gold)}
.m-header-actions{display:flex;align-items:center;gap:5px;flex-shrink:0}
.m-icon-btn{
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;border-radius:var(--r2);
  border:1px solid var(--border-m);
  color:var(--tx-s);
  transition:background var(--t1),color var(--t1);
  flex-shrink:0;
}
.m-icon-btn:hover{background:var(--bg-e);color:var(--tx)}
.m-wa-pill{
  display:flex;align-items:center;gap:4px;
  background:var(--wa);color:#fff;
  font-weight:700;font-size:11.5px;
  padding:7px 10px;border-radius:var(--r2);
  white-space:nowrap;
}

/* Mobile search bar */
.mobile-search-bar{
  display:none;
  padding:8px 12px;
  background:var(--bg-s);
  border-bottom:1px solid var(--border);
  position:sticky;top:var(--mhh);z-index:250;
}
.mobile-search-bar .search-container{max-width:none}

/* Mobile lang toggle */
.lang-toggle-mob .lang-btn{font-size:10px;padding:4px 7px;}
@media (max-width:1024px){.mob-header-actions{gap:4px}}

/* ======================================================
   PAGE LAYOUT
====================================================== */
.page-body{display:block}
.desktop-sidebar{
  display:none;
  width:var(--sw);min-width:var(--sw);
  flex-shrink:0;
}
.sidebar-label{
  font-size:9.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx-xs);padding:6px 12px 10px;
  border-bottom:1px solid var(--border);
  margin-bottom:4px;
}
.desktop-sidebar .cat-tab{
  display:flex;width:100%;border-radius:var(--r2);
  padding:7px 12px;font-size:12px;
  border:none!important;text-align:left;
}
.desktop-sidebar .cat-tab.active{
  background:var(--gold-d);color:var(--gold);
  font-weight:600;
}
.desktop-sidebar .cat-tab:hover{background:var(--bg-e)}
.main-content{flex:1;min-width:0}

/* ======================================================
   HERO
====================================================== */
.hero{
  position:relative;z-index:1;
  padding:56px 32px 40px;
  text-align:center;
  max-width:860px;margin:0 auto;
}
.hero-burst-svg{
  position:absolute;top:20px;right:6%;
  width:88px;height:88px;
  opacity:.08;pointer-events:none;
}
.hero-pill-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--gold-d);
  border:1px solid rgba(200,144,58,0.25);
  border-radius:var(--rp);
  padding:4px 16px;font-size:10.5px;
  font-weight:700;letter-spacing:.1em;
  color:var(--gold-l);text-transform:uppercase;
  margin-bottom:18px;
}
.hero-title{
  font-family:var(--font-d);
  font-size:clamp(24px,4vw,50px);
  font-weight:700;line-height:1.2;
  color:var(--tx);margin-bottom:12px;
  letter-spacing:-.015em;
}
.hero-title em{font-style:italic;color:var(--gold)}
.hero-desc{
  font-size:14.5px;color:var(--tx-s);
  max-width:520px;margin:0 auto 26px;
  line-height:1.75;font-weight:400;
}
.hero-cta-group{
  display:flex;align-items:center;
  justify-content:center;gap:10px;
  flex-wrap:wrap;margin-bottom:32px;
}
.btn-primary-hero{
  display:inline-flex;align-items:center;gap:7px;
  padding:12px 24px;
  background:var(--gold);color:#1a0e00;
  font-weight:700;font-size:13.5px;
  letter-spacing:.03em;border-radius:var(--r2);
  box-shadow:var(--sh-gold);
  transition:background var(--t1),transform var(--t1),box-shadow var(--t1);
}
.btn-primary-hero:hover{
  background:var(--gold-l);
  transform:translateY(-2px);
  box-shadow:0 6px 28px rgba(200,144,58,0.45);
}
.btn-primary-hero:active{transform:translateY(0)}
.btn-ghost-hero{
  display:inline-flex;align-items:center;gap:7px;
  padding:12px 18px;
  border:1px solid var(--border-s);color:var(--tx);
  font-weight:500;font-size:13.5px;
  border-radius:var(--r2);
  transition:border-color var(--t1),background var(--t1),transform var(--t1);
}
.btn-ghost-hero:hover{
  border-color:var(--gold);
  background:var(--gold-d);
  transform:translateY(-1px);
}

/* Trust strip */
.trust-strip{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--border);
  border:1px solid var(--border);
  border-radius:var(--r3);overflow:hidden;
  max-width:640px;margin:0 auto;
  gap:1px;
}
.trust-card{background:var(--bg-s);padding:16px 10px;text-align:center}
.trust-num{
  font-family:var(--font-d);
  font-size:22px;font-weight:700;
  color:var(--gold);line-height:1;margin-bottom:4px;
}
.trust-label{
  font-size:10px;font-weight:500;
  color:var(--tx-s);letter-spacing:.04em;
  text-transform:uppercase;line-height:1.4;
}

/* ======================================================
   SECTION HEADERS
====================================================== */
.collection-section{margin-bottom:52px}
.section-head{
  display:flex;align-items:center;gap:12px;
  margin-bottom:8px;padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.section-title-group{display:flex;align-items:center;gap:10px}
.section-title-group h3{
  font-family:var(--font-d);
  font-size:20px;font-weight:700;
  color:var(--tx);letter-spacing:-.01em;
}
.section-badge-count{
  font-size:10px;font-weight:600;
  color:var(--tx-m);background:var(--bg-e);
  border:1px solid var(--border);
  padding:2px 9px;border-radius:var(--rp);
  letter-spacing:.05em;text-transform:uppercase;
}
.section-desc{
  font-size:13px;color:var(--tx-s);
  margin-bottom:18px;line-height:1.6;
}

/* ======================================================
   PRODUCT GRID
====================================================== */
.products-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.collections-container{
  padding:28px 28px 110px;
}

/* ======================================================
   PRODUCT CARD — PREMIUM
====================================================== */
.product-card{
  display:flex;flex-direction:column;
  background:var(--bg-c);
  border:1px solid var(--border);
  border-radius:var(--r3);
  overflow:hidden;
  box-shadow:var(--sh0);
  transition:
    border-color var(--t2),
    box-shadow var(--t2),
    transform var(--t2);
  position:relative;
  will-change:transform;
}
.product-card:hover{
  border-color:rgba(200,144,58,0.22);
  box-shadow:var(--sh2),0 0 0 1px rgba(200,144,58,0.1);
  transform:translateY(-3px);
}
.product-card:active{transform:translateY(-1px)}

/* Card image */
.card-thumb{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--bg-e);
  cursor:pointer;
}
.card-thumb img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform .25s ease,filter .25s ease;
}

/* Fallback art */
.fallback-art{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:7px;color:var(--tx-m);
  font-size:10.5px;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;
}
.fallback-art .icon{font-size:24px;opacity:.35}

/* Discount badge */
.discount-tag{
  position:absolute;top:8px;left:8px;
  background:var(--gold);color:#1a0a00;
  font-size:9px;font-weight:800;
  letter-spacing:.08em;
  padding:3px 7px;border-radius:2px;
  text-transform:uppercase;z-index:2;
  box-shadow:0 1px 4px rgba(0,0,0,.4);
}

/* Card body */
.card-body{
  display:flex;flex-direction:column;
  gap:5px;padding:12px 12px 14px;
  flex:1;
}
.card-title{
  font-size:13px;font-weight:600;
  color:var(--tx);line-height:1.45;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.9em;
}
.card-packing{
  font-size:10.5px;color:var(--tx-m);
  font-weight:400;
}
.price-row{
  display:flex;align-items:baseline;
  gap:7px;flex-wrap:wrap;margin-top:3px;
}
.price-mrp{
  font-size:11px;color:var(--tx-m);
  text-decoration:line-through;
  font-weight:400;
}
.price-net{
  font-size:16px;font-weight:700;
  color:var(--gold);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.price-req{font-size:12px;font-weight:500;color:var(--gold);font-style:italic}

/* Qty control */
.qty-control{
  display:flex;align-items:center;
  border:1px solid var(--border-m);
  border-radius:var(--r2);
  overflow:hidden;
  margin-top:auto;padding-top:5px;
  background:var(--bg-e);
  transition:border-color var(--t1),background var(--t1);
}
.qty-control.has-qty{
  border-color:var(--gold);
  background:var(--gold-d);
}
.qty-btn{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:500;
  color:var(--tx-s);flex-shrink:0;
  transition:background var(--t1),color var(--t1);
  user-select:none;-webkit-user-select:none;
}
.qty-btn:hover{background:var(--bg-h);color:var(--tx)}
.qty-control.has-qty .qty-btn:hover{
  background:rgba(200,144,58,.18);
  color:var(--gold);
}
.qty-btn:active{background:var(--bg-h)}
.qty-display{
  flex:1;text-align:center;
  font-size:14px;font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--tx);
}
.qty-control.has-qty .qty-display{color:var(--gold)}

/* ======================================================
   EMPTY STATE
====================================================== */
.empty-state{
  display:none;flex-direction:column;
  align-items:center;justify-content:center;
  padding:64px 24px;
  text-align:center;
  grid-column:1/-1;
}
.empty-state.visible{display:flex}
.empty-icon{font-size:44px;margin-bottom:14px;opacity:.45}
.empty-title{
  font-family:var(--font-d);
  font-size:20px;font-weight:700;
  color:var(--tx);margin-bottom:8px;
}
.empty-desc{font-size:13.5px;color:var(--tx-s);max-width:340px;line-height:1.6}
.empty-clear{
  margin-top:18px;
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 18px;
  border:1px solid var(--border-s);
  border-radius:var(--r2);
  font-size:13px;font-weight:500;
  color:var(--tx-s);
  transition:color var(--t1),border-color var(--t1),background var(--t1);
}
.empty-clear:hover{color:var(--tx);border-color:var(--gold);background:var(--gold-d)}

/* ======================================================
   FLOATING ORDER BAR
====================================================== */
.floating-order-bar{
  position:fixed;bottom:0;left:0;right:0;
  z-index:400;
  background:rgba(15,15,21,0.97);
  backdrop-filter:blur(20px);
  border-top:1px solid var(--border-m);
  padding:12px 28px;
  display:flex;align-items:center;
  justify-content:space-between;gap:16px;
  transform:translateY(110%);
  transition:transform var(--t3);
  box-shadow:0 -8px 32px rgba(0,0,0,.6);
}
.floating-order-bar.visible{transform:translateY(0)}
.order-bar-stats{display:flex;flex-direction:column;gap:1px}
.order-bar-items-count{
  font-size:11px;font-weight:500;
  color:var(--tx-s);letter-spacing:.03em;
}
.order-bar-total-price{
  font-size:20px;font-weight:700;
  color:var(--tx);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.order-bar-total-price .savings{
  font-size:11px;font-weight:500;
  color:var(--em-glow);margin-left:6px;
}
.btn-checkout-trigger{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 22px;
  background:var(--wa);color:#fff;
  font-weight:700;font-size:14px;
  border-radius:var(--r2);
  box-shadow:var(--sh-wa);
  transition:background var(--t1),transform var(--t1),box-shadow var(--t1);
  flex-shrink:0;white-space:nowrap;
}
.btn-checkout-trigger:hover{
  background:var(--wa-dk);
  transform:translateY(-2px);
  box-shadow:0 6px 28px rgba(37,211,102,.45);
}
.btn-checkout-trigger:active{transform:translateY(0)}

/* ======================================================
   SITE FOOTER
====================================================== */
.site-footer{
  background:var(--bg-s);
  border-top:1px solid var(--border);
  padding:52px 28px 36px;
  position:relative;z-index:1;
}
.footer-inner{
  max-width:var(--mw);margin:0 auto;
  display:grid;grid-template-columns:1.2fr 1fr;
  gap:48px;margin-bottom:36px;
}
.footer-brand h3{
  font-family:var(--font-d);
  font-size:22px;font-weight:700;
  color:var(--tx);margin-bottom:12px;
  letter-spacing:.01em;
}
.footer-brand h3 span{color:var(--gold)}
.footer-brand p{
  font-size:13px;color:var(--tx-s);
  line-height:1.75;margin-bottom:20px;
  max-width:360px;
}
.footer-contact-list{display:flex;flex-direction:column;gap:20px}
.contact-item{display:flex;gap:12px;align-items:flex-start}
.contact-item .icon{font-size:16px;flex-shrink:0;margin-top:2px}
.contact-item .label{
  display:block;font-size:10px;
  font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--tx-m);
  margin-bottom:3px;
}
.contact-item .value{
  font-size:13px;color:var(--tx);
  line-height:1.6;
}

/* Safety box */
.safety-note-box{
  max-width:var(--mw);margin:0 auto;
  padding:14px 18px;
  background:var(--bg-e);
  border:1px solid var(--border);
  border-radius:var(--r2);
  font-size:11.5px;color:var(--tx-s);
  line-height:1.65;
}
.safety-note-box strong{color:var(--gold-l);font-weight:600}

/* Footer bottom */
.footer-bottom{
  max-width:var(--mw);margin:20px auto 0;
  border-top:1px solid var(--border);
  padding-top:16px;
  display:flex;align-items:center;
  justify-content:space-between;gap:12px;
  flex-wrap:wrap;
  font-size:11px;color:var(--tx-m);
}

/* ======================================================
   CHECKOUT MODAL
====================================================== */
.checkout-modal{
  position:fixed;inset:0;z-index:500;
  background:rgba(5,5,10,0.92);
  display:flex;align-items:center;justify-content:center;
  padding:16px;opacity:0;pointer-events:none;
  transition:opacity var(--t2);
}
.checkout-modal.open{opacity:1;pointer-events:auto}
.checkout-modal-content{
  background:var(--bg-s);
  border:1px solid var(--border-m);
  border-radius:var(--r4);
  width:100%;max-width:760px;
  max-height:92vh;overflow-y:auto;
  box-shadow:var(--sh3);
  display:flex;flex-direction:column;
}
.checkout-modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid var(--border);
  position:sticky;top:0;background:var(--bg-s);z-index:10;
}
.checkout-modal-header h3{
  font-family:var(--font-d);
  font-size:16px;font-weight:700;color:var(--tx);
}
.checkout-modal-close{
  width:30px;height:30px;border-radius:var(--r1);
  border:1px solid var(--border-m);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--tx-s);
  transition:color var(--t1),background var(--t1);
}
.checkout-modal-close:hover{color:var(--tx);background:var(--bg-e)}
.checkout-modal-body{padding:22px;display:flex;flex-direction:column;gap:20px}

/* Summary banner */
.checkout-summary-banner{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--border);
  border:1px solid var(--border);
  border-radius:var(--r2);overflow:hidden;
}
.checkout-summary-banner > div{
  background:var(--bg-e);padding:14px;text-align:center;
}
.item-stat-label{
  font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--tx-m);margin-bottom:5px;
}
.item-stat-val{
  font-size:18px;font-weight:700;
  color:var(--tx);font-variant-numeric:tabular-nums;
}

/* Form */
.checkout-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-group.full-width{grid-column:1/-1}
.form-label{
  font-size:10.5px;font-weight:600;
  color:var(--tx-s);letter-spacing:.05em;text-transform:uppercase;
}
.form-input,.form-select{
  background:var(--bg-e);
  border:1px solid var(--border-m);
  border-radius:var(--r2);
  padding:10px 13px;
  font-size:13.5px;font-family:var(--font-b);
  color:var(--tx);outline:none;width:100%;
  transition:border-color var(--t1),box-shadow var(--t1);
}
.form-input:focus,.form-select:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px var(--gold-d);
}
.form-select{appearance:none;cursor:pointer}
.form-input::placeholder{color:var(--tx-m)}

/* Notice box */
.checkout-notice-box{
  display:flex;gap:10px;padding:13px;
  background:var(--bg-e);
  border:1px solid var(--border);
  border-radius:var(--r2);
  font-size:12.5px;color:var(--tx-s);line-height:1.65;
}
.checkout-notice-box .notice-icon{font-size:15px;flex-shrink:0}
.checkout-notice-box strong{color:var(--tx)}

/* Invoice preview */
.invoice-image-preview-wrap{
  display:none;flex-direction:column;gap:10px;
  background:var(--bg-e);
  border:1px solid var(--border);
  border-radius:var(--r2);padding:16px;
}
.invoice-image-preview-wrap.visible{display:flex}
.invoice-preview-img{
  width:100%;border-radius:var(--r1);
  border:1px solid var(--border);
}

/* Cart preview table */
.cart-items-preview{
  border:1px solid var(--border);
  border-radius:var(--r2);overflow:hidden;
}
.cart-items-preview h5{
  font-size:11px;font-weight:700;color:var(--tx);
  padding:11px 16px;background:var(--bg-e);
  border-bottom:1px solid var(--border);
  letter-spacing:.06em;text-transform:uppercase;
}
.cart-preview-table{
  width:100%;border-collapse:collapse;font-size:12.5px;
}
.cart-preview-table th{
  padding:8px 14px;background:var(--bg-e);
  color:var(--tx-m);font-size:10px;
  font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;
  border-bottom:1px solid var(--border);
  text-align:left;
}
.cart-preview-table td{
  padding:9px 14px;
  border-bottom:1px solid var(--border);
  color:var(--tx);vertical-align:middle;
}
.cart-preview-table tr:last-child td{border-bottom:none}
.cart-preview-table tr:hover td{background:var(--bg-e)}

/* Modal footer */
.checkout-modal-footer{
  display:flex;align-items:center;
  justify-content:center!important;
  flex-direction:column;
  gap:10px;padding-top:14px;
  border-top:1px solid var(--border);
  flex-wrap:wrap;
}
.modal-actions-left{display:none!important}
.btn-inv-tool{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;
  border:1px solid var(--border-m);
  border-radius:var(--r2);font-size:12px;
  font-weight:600;color:var(--tx-s);
  transition:color var(--t1),border-color var(--t1),background var(--t1);
}
.btn-inv-tool:hover{color:var(--tx);border-color:var(--border-s);background:var(--bg-e)}
.btn-download-img{border-color:rgba(200,144,58,.28);color:var(--gold)}
.btn-download-img:hover{background:var(--gold-d);border-color:rgba(200,144,58,.45);color:var(--gold-l)}

/* WhatsApp submit */
.btn-whatsapp-submit{
  display:flex!important;
  align-items:center;justify-content:center!important;
  gap:8px;
  padding:13px 24px;
  background:var(--wa);color:#fff;
  font-weight:700;font-size:14px;
  border-radius:var(--r2);border:none;
  cursor:pointer;font-family:var(--font-b);
  width:auto!important;
  min-width:280px;
  margin:0 auto!important;
  box-shadow:var(--sh-wa);
  transition:background var(--t1),transform var(--t1),box-shadow var(--t1);
}
.btn-whatsapp-submit:hover{
  background:var(--wa-dk);
  transform:translateY(-2px);
  box-shadow:0 6px 28px rgba(37,211,102,.45);
}
.btn-whatsapp-submit:active{transform:translateY(0)}

/* Invoice print container */
.invoice-print-container{display:none}
@media print{
  .invoice-print-container{display:block}
  body > *:not(.invoice-print-container){display:none}
}
.invoice-paper{background:#fff;color:#111;padding:32px;font-size:12px;font-family:var(--font-b)}
.invoice-header-row{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid #1e293b}
.invoice-brand-title{font-size:20px;font-weight:800;color:#991b1b;letter-spacing:.03em}
.invoice-brand-sub{font-size:11px;color:#64748b;margin-top:3px}
.invoice-meta{text-align:right}
.invoice-meta-num{font-size:14px;font-weight:700;color:#1e293b}
.invoice-meta-date{font-size:11px;color:#64748b;margin-top:4px}
.invoice-parties-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
.party-box{background:#f8fafc;border:1px solid #e2e8f0;border-radius:4px;padding:12px 16px}
.party-box h5{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#64748b;margin-bottom:8px}
.party-name{font-size:14px;font-weight:700;color:#0f172a;margin-bottom:4px}
.party-desc{font-size:11px;color:#475569;margin-bottom:2px}
.invoice-table-wrap{margin-bottom:16px}
.invoice-table{width:100%;border-collapse:collapse;font-size:11px}
.invoice-table th{background:#1e293b;color:#fff;padding:8px 10px;text-align:left;font-size:10px;font-weight:600;letter-spacing:.04em}
.invoice-table td{padding:7px 10px;border-bottom:1px solid #f1f5f9;color:#334155}
.invoice-summary-grid{display:flex;justify-content:flex-end;margin-bottom:16px}
.invoice-summary-table{margin-left:auto;border-collapse:collapse}
.invoice-summary-table td{padding:5px 12px;font-size:12px;border-bottom:1px solid #f1f5f9}
.grand-total td{background:#fef3c7;font-weight:800;font-size:14px;color:#92400e;border-top:2px solid #f59e0b}
.invoice-paper-footer{display:flex;justify-content:space-between;padding-top:16px;border-top:1px solid #e2e8f0;font-size:11px;color:#64748b;margin-top:16px}
.text-right{text-align:right}.text-center{text-align:center}

/* ======================================================
   MOBILE BOTTOM NAV
====================================================== */
.mobile-bottom-nav{display:none}

/* ======================================================
   SCROLLBAR
====================================================== */
/* ======================================================
   SCROLLBAR — fully hidden (user request).
   Scrolling still works everywhere via wheel/touch/keyboard.
====================================================== */
::-webkit-scrollbar{width:0;height:0;display:none}
*{scrollbar-width:none}

/* ======================================================
   SCROLL REVEAL
====================================================== */
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity 0.5s ease, transform 0.5s ease;
}
.reveal.revealed{
  opacity:1;
  transform:translateY(0);
}

/* ================================================================
   DESKTOP >= 1025px
================================================================ */
@media (min-width:1025px){
  .mobile-header,.mobile-search-bar,.mobile-bottom-nav{display:none!important}
  .site-header,.toolbar-wrap{display:block}

  .page-body{
    display:flex;max-width:var(--mw);
    margin:0 auto;gap:0;
    border-top:1px solid var(--border);
  }
  .desktop-sidebar{
    display:flex;flex-direction:column;
    width:var(--sw);min-width:var(--sw);
    position:sticky;
    top:calc(var(--hh) + 90px);
    height:calc(100vh - var(--hh) - 90px);
    overflow-y:auto;
    padding:14px 10px;
    border-right:1px solid var(--border);
    background:var(--bg-s);
    gap:2px;flex-shrink:0;
    align-self:flex-start;
  }
  .main-content{flex:1;min-width:0}
  .collections-container{padding:28px 32px 110px}
  .products-grid{grid-template-columns:repeat(4,1fr);gap:16px}
  .hero{padding:56px 40px 40px;max-width:none}
  .floating-order-bar{padding:12px 36px}

  .collection-section#giftboxes .products-grid{
    grid-template-columns:repeat(auto-fill,minmax(380px,1fr));
    gap:20px;
  }
}

@media (min-width:1280px){
  .products-grid{grid-template-columns:repeat(5,1fr)}
}
@media (min-width:1600px){
  .products-grid{grid-template-columns:repeat(5,1fr);gap:18px}
  .card-title{font-size:13.5px}
}

/* ================================================================
   TABLET 768–1024px
================================================================ */
@media (min-width:768px) and (max-width:1024px){
  .site-header,.toolbar-wrap,.desktop-sidebar{display:none!important}
  .mobile-header{display:flex}
  .mobile-search-bar{display:block}

  .mobile-bottom-nav{
    display:flex;
    position:fixed;bottom:0;left:0;right:0;
    z-index:350;
    background:rgba(9,9,13,.98);
    backdrop-filter:blur(16px);
    border-top:1px solid var(--border-m);
    height:var(--mnh);
    overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;gap:0;align-items:stretch;
  }
  .mobile-bottom-nav::-webkit-scrollbar{display:none}

  .page-body{display:block}
  .hero{padding:32px 20px 28px}
  .trust-strip{grid-template-columns:repeat(4,1fr)}
  .collections-container{padding:16px 16px calc(var(--mnh)+80px)}
  .products-grid{grid-template-columns:repeat(3,1fr);gap:12px}
  .card-thumb{aspect-ratio:1/1}
  .floating-order-bar{bottom:var(--mnh);padding:10px 16px}
  .footer-inner{grid-template-columns:1fr;gap:32px}
  .site-footer{padding:36px 16px 20px;padding-bottom:calc(var(--mnh)+20px)}
  .collection-section#giftboxes .products-grid{grid-template-columns:repeat(2,1fr)}
}

/* ================================================================
   MOBILE <= 767px
================================================================ */
@media (max-width:767px){
  .site-header,.toolbar-wrap,.desktop-sidebar{display:none!important}
  .hero-burst-svg{display:none}

  .mobile-header{display:flex}
  .mobile-search-bar{display:block}

  .mobile-bottom-nav{
    display:flex;
    position:fixed;bottom:0;left:0;right:0;
    z-index:350;
    background:rgba(9,9,13,.98);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-top:1px solid var(--border-m);
    height:var(--mnh);
    overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;gap:0;align-items:stretch;
  }
  .mobile-bottom-nav::-webkit-scrollbar{display:none}
  .m-nav-tab{
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    gap:3px;padding:4px 10px;
    height:100%;flex-shrink:0;
    min-width:56px;color:var(--tx-m);
    border-top:2px solid transparent;
    text-decoration:none;
    transition:color var(--t1),border-top-color var(--t1),background var(--t1);
    border-right:1px solid var(--border);
  }
  .m-nav-tab.active{
    color:var(--gold);border-top-color:var(--gold);
    background:var(--gold-d);
  }
  .m-nav-tab:hover{color:var(--tx-s);background:var(--bg-e)}
  .m-nav-icon{font-size:17px;line-height:1}
  .m-nav-label{font-size:9px;font-weight:500;letter-spacing:.01em;white-space:nowrap}
  .m-nav-gift{color:var(--wa)}
  .m-nav-gift.active{color:var(--wa);border-top-color:var(--wa);background:rgba(37,211,102,.07)}

  .page-body{display:block}
  .hero{padding:22px 14px 18px;max-width:100%}
  .hero-pill-badge{font-size:10px;padding:4px 12px;margin-bottom:12px}
  .hero-title{font-size:22px;margin-bottom:10px}
  .hero-desc{font-size:13px;margin-bottom:16px}
  .hero-cta-group{gap:8px;margin-bottom:20px}
  .btn-primary-hero{padding:11px 17px;font-size:13px}
  .btn-ghost-hero{padding:11px 13px;font-size:13px}

  .trust-strip{grid-template-columns:repeat(2,1fr)}
  .trust-num{font-size:20px}
  .trust-card{padding:12px 8px}
  .trust-label{font-size:9.5px}

  .collections-container{padding:12px 10px calc(var(--mnh) + 82px)}
  .products-grid{grid-template-columns:repeat(2,1fr);gap:8px}

  .card-thumb{aspect-ratio:1/1}
  .card-body{padding:9px 9px 11px;gap:4px}
  .card-title{font-size:12.5px;min-height:unset}
  .card-packing{font-size:10px}
  .price-mrp{font-size:10.5px}
  .price-net{font-size:15px}
  .discount-tag{font-size:9px;padding:2px 6px;top:6px;left:6px}
  .product-card{border-radius:var(--r3)}

  .qty-btn{width:38px;height:38px;font-size:19px}
  .qty-display{font-size:13px}

  .floating-order-bar{
    bottom:var(--mnh);
    padding:10px 14px;
  }
  .btn-checkout-trigger{padding:11px 14px;font-size:13px}
  .order-bar-total-price{font-size:17px}

  .collection-section{margin-bottom:28px}
  .section-title-group h3{font-size:17px}
  .section-desc{font-size:12.5px}

  .footer-inner{grid-template-columns:1fr;gap:26px}
  .site-footer{
    padding:32px 14px 20px;
    padding-bottom:calc(var(--mnh) + 20px);
  }

  .checkout-modal{padding:0;align-items:flex-end}
  .checkout-modal-content{
    max-width:100%;max-height:95vh;
    border-radius:var(--r4) var(--r4) 0 0;
    border-left:none;border-right:none;border-bottom:none;
  }
  .checkout-form-grid{grid-template-columns:1fr}
  .checkout-summary-banner{grid-template-columns:1fr}
  .checkout-modal-body{padding:14px;gap:14px}

  .collection-section#giftboxes .products-grid{grid-template-columns:1fr;gap:12px}
}

@media (max-width:360px){
  .products-grid{gap:6px}
  .card-body{padding:7px 7px 9px}
  .card-title{font-size:12px}
  .m-nav-tab{min-width:50px;padding:4px 7px}
}

/* ======================================================
   LIGHT MODE
====================================================== */
body.light-mode{
  --bg:#f5f4f1; --bg-s:#ffffff; --bg-c:#ffffff;
  --bg-e:#eeece8; --bg-h:#e6e4df;
  --border:rgba(0,0,0,.07); --border-m:rgba(0,0,0,.11);
  --border-s:rgba(0,0,0,.17);
  --tx:#1a1714; --tx-s:#6a6460;
  --tx-m:#aca9a5; --tx-xs:#d0cdc9;
  --sh0:0 1px 3px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04);
  --sh1:0 2px 8px rgba(0,0,0,.09),0 1px 3px rgba(0,0,0,.05);
  --sh2:0 8px 24px rgba(0,0,0,.1),0 2px 8px rgba(0,0,0,.05);
}
body.light-mode .site-header,
body.light-mode .mobile-header{background:rgba(245,244,241,.98)}
body.light-mode .toolbar-wrap{background:rgba(245,244,241,.98)}
body.light-mode .mobile-search-bar{background:#fff;border-bottom-color:rgba(0,0,0,.09)}
body.light-mode .mobile-bottom-nav{background:rgba(245,244,241,.98)}
body.light-mode .announcement-bar{background:#7f1d1d;color:#fff}
body.light-mode .announcement-bar .badge-pill{background:rgba(255,255,255,.2)}
body.light-mode .search-input{background:#fff}
body.light-mode .desktop-sidebar{background:#fff;border-right-color:rgba(0,0,0,.07)}
body.light-mode .floating-order-bar{background:rgba(240,238,234,.97)}

/* ======================================================
   REDUCED MOTION
====================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .product-card:hover,.btn-primary-hero:hover,
  .btn-checkout-trigger:hover,.btn-whatsapp-submit:hover,
  .giftbox-premium-card:hover{transform:none!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* ======================================================
   GIFT BOX SECTION — PREMIUM
====================================================== */
.giftbox-section{
  background:linear-gradient(160deg,#0c0400 0%,#180900 55%,#0c0600 100%);
  border:1px solid rgba(200,144,58,.2);
  border-radius:14px;
  padding:36px 24px 24px;
  margin-bottom:24px;
  position:relative;overflow:hidden;
}
.giftbox-section::before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 70% 0%,rgba(200,144,58,.07) 0%,transparent 65%);
  pointer-events:none;
}
.giftbox-section-head{
  display:flex;align-items:flex-start;
  justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:28px;
}
.giftbox-eyebrow{
  display:block;font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);margin-bottom:7px;
}
.giftbox-main-title{
  font-size:clamp(20px,3.5vw,32px);
  font-weight:800;color:#f5d07a;
  margin-bottom:7px;line-height:1.2;
}
.giftbox-desc{font-size:13px;color:#9a7a50;max-width:460px;line-height:1.7}
.giftbox-badges{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-start;padding-top:4px}
.gb-meta-badge{
  background:rgba(200,144,58,.1);
  border:1px solid rgba(200,144,58,.28);
  border-radius:20px;padding:3px 10px;
  font-size:10.5px;font-weight:600;color:var(--gold);white-space:nowrap;
}

/* Grid */
.giftbox-cards-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
@media(max-width:900px){.giftbox-cards-grid{grid-template-columns:1fr;gap:14px}}
@media(min-width:901px) and (max-width:1100px){.giftbox-cards-grid{grid-template-columns:repeat(2,1fr)}}

/* Premium card */
.giftbox-premium-card{
  background:#0e0500;
  border:1px solid rgba(200,144,58,.25);
  border-radius:12px;
  overflow:hidden;position:relative;
  display:flex;flex-direction:column;
  transition:transform var(--t2),box-shadow var(--t2),border-color var(--t2);
}
.giftbox-premium-card:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 40px rgba(200,144,58,.18);
  border-color:rgba(200,144,58,.5);
}
.giftbox-premium-card.featured{
  border-color:rgba(200,144,58,.5);
  box-shadow:0 0 0 1px rgba(200,144,58,.2),0 8px 28px rgba(200,144,58,.12);
}

/* Ribbon */
.giftbox-ribbon{
  position:absolute;top:14px;left:-2px;z-index:3;
  background:#c0392b;color:#fff;
  font-size:9.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;
  padding:4px 11px 4px 10px;
  border-radius:0 3px 3px 0;
  box-shadow:2px 2px 6px rgba(0,0,0,.4);
}
.featured-ribbon{background:var(--gold);color:#1a0800}
.grand-ribbon{background:#27ae60}

/* Image */
.giftbox-img-wrap{position:relative;overflow:hidden;cursor:pointer}
.giftbox-img{
  width:100%;height:185px;
  object-fit:cover;display:block;
}
.giftbox-img-overlay{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(0,0,0,.72));
  padding:18px 12px 8px;
  display:flex;justify-content:flex-end;
}
.giftbox-count-pill{
  background:rgba(200,144,58,.92);
  color:#1a0800;font-size:10px;font-weight:800;
  padding:3px 8px;border-radius:20px;
}

/* Card body */
.giftbox-card-body{
  padding:15px 16px 18px;
  display:flex;flex-direction:column;gap:8px;
  flex:1;
}
.giftbox-card-title{font-size:17px;font-weight:800;color:#f5d07a;line-height:1.2}
.giftbox-card-sub{font-size:11.5px;color:#8a7050;margin-top:-3px}
.giftbox-price-placeholder{
  font-size:12.5px;font-weight:700;
  color:var(--gold);
  border:1px dashed rgba(200,144,58,.35);
  border-radius:5px;
  padding:6px 12px;
  text-align:center;
  letter-spacing:.04em;
}
.giftbox-highlights{display:flex;flex-direction:column;gap:3px}
.giftbox-highlights li{font-size:11.5px;color:#9a8060;line-height:1.5}
.giftbox-item-pills{display:flex;flex-wrap:wrap;gap:4px}
.giftbox-item-pills span{
  background:rgba(200,144,58,.09);
  border:1px solid rgba(200,144,58,.2);
  color:var(--gold);font-size:10px;font-weight:600;
  padding:2px 7px;border-radius:20px;
}

/* Gift box order button */
.giftbox-order-btn{
  display:flex;align-items:center;justify-content:center;gap:7px;
  background:var(--wa);color:#fff;
  font-size:13px;font-weight:700;
  padding:12px 14px;border-radius:8px;
  text-decoration:none;
  transition:background var(--t1),transform var(--t1),box-shadow var(--t1);
  box-shadow:var(--sh-wa);
}
.giftbox-order-btn:hover{background:var(--wa-dk);transform:translateY(-1px)}
.featured-btn{
  background:var(--gold);color:#1a0800;
  box-shadow:var(--sh-gold);
}
.featured-btn:hover{background:var(--gold-l)}

.giftbox-footer-note{
  margin-top:18px;text-align:center;
  font-size:11.5px;color:#5a4a30;
  padding:10px;
  border-top:1px solid rgba(200,144,58,.12);
}

/* ======================================================
   ACCORDION
====================================================== */
.gb-accordion-btn{
  width:100%;
  background:rgba(200,144,58,.07);
  border:1px solid rgba(200,144,58,.25);
  border-radius:7px;
  color:var(--gold);
  font-size:12.5px;font-weight:700;
  padding:9px 14px;
  text-align:left;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;
  transition:background var(--t1),border-color var(--t1);
  letter-spacing:.02em;
}
.gb-accordion-btn:hover{
  background:rgba(200,144,58,.14);
  border-color:rgba(200,144,58,.5);
}
.gb-accordion-btn .gb-acc-arrow{
  font-style:normal;
  transition:transform var(--t2);
  font-size:10px;
}
.gb-accordion-btn.open .gb-acc-arrow{transform:rotate(180deg)}
.gb-accordion-body{
  max-height:0;overflow:hidden auto;
  transition:max-height .4s ease,padding .3s ease;
  background:rgba(8,3,0,0.6);
  border:1px solid rgba(200,144,58,.12);
  border-top:none;
  border-radius:0 0 7px 7px;
  padding:0 14px;
}
.gb-accordion-body.open{max-height:260px!important;padding:12px 14px!important}
.gb-accordion-body ul{
  display:grid;grid-template-columns:1fr 1fr;
  gap:3px 10px;
}
.gb-accordion-body ul li{
  font-size:11px;color:#9a8060;
  padding:3px 0;
  border-bottom:1px solid rgba(200,144,58,.07);
  display:flex;align-items:center;gap:5px;
}
.gb-accordion-body ul li::before{
  content:'✦';color:rgba(200,144,58,.4);
  font-size:7px;flex-shrink:0;
}
.gb-acc-note{
  font-size:10.5px;color:#5a4030;
  margin-top:8px;text-align:center;
  font-style:italic;
}

/* Gift box section container */
.gift-box-card{
  background:var(--bg-c);
  border:1px solid var(--border-m);
  border-radius:var(--r3);overflow:hidden;
}
.gift-box-head{
  display:flex;align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--border);
  gap:12px;background:var(--bg-e);
}
.gift-box-head h4{
  font-family:var(--font-d);
  font-size:16px;font-weight:700;color:var(--tx);
}
.gift-box-badge{
  background:var(--gold-d);
  border:1px solid rgba(200,144,58,.28);
  color:var(--gold);font-size:10px;
  font-weight:700;padding:3px 11px;
  border-radius:var(--rp);
  white-space:nowrap;letter-spacing:.04em;text-transform:uppercase;
}
.gift-box-items-list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:0;padding:14px 18px;
}
.gift-box-items-list li{
  display:flex;align-items:center;gap:8px;
  padding:5px 0;
  border-bottom:1px solid var(--border);
  font-size:12px;
}
.gift-box-items-list li:last-child{border-bottom:none}
.item-num{font-size:10px;font-weight:600;color:var(--tx-m);min-width:20px}
.item-name{flex:1;color:var(--tx)}
.item-quantity{
  font-size:10px;font-weight:600;
  color:var(--gold);background:var(--gold-d);
  padding:1px 7px;border-radius:2px;flex-shrink:0;
}
.collection-section#giftboxes .products-grid{grid-template-columns:1fr;gap:18px}

/* ======================================================
   BACK TO TOP
====================================================== */
.back-to-top{
  position:fixed;
  bottom:88px;right:16px;z-index:660;
  width:42px;height:42px;
  border-radius:50%;
  background:var(--bg-e);
  color:var(--gold);
  border:1px solid rgba(200,144,58,.35);
  font-size:20px;font-weight:900;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;
  transform:translateY(10px);
  transition:opacity .2s,transform .2s,background .15s,box-shadow .15s;
}
.back-to-top.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.back-to-top:hover{
  background:var(--gold);
  color:#1a0800;
  box-shadow:var(--sh-gold);
}
@media (min-width:1025px){
  .back-to-top{bottom:110px;right:28px}
}

/* ================================================================
   MAGIZHAM POO FIREWORKS — CART DRAWER  (scoped, uses existing variables)
   Appended — does NOT override any existing styles.
================================================================ */

/* --- Cart trigger button in header --- */
.mt-cart-trigger {
  position: relative;
  overflow: visible !important; /* badge must not be clipped */
}
/* Icon + badge wrapper */
.mt-ci-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
/* Top-right overlay badge */
.mt-cart-badge {
  position: absolute;
  top: -8px;
  right: -10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  background: var(--gold);
  color: #1a0a00;
  font-size: 9.5px;
  font-weight: 900;
  border-radius: 999px;
  line-height: 1;
  font-family: var(--font-b);
  white-space: nowrap;
  border: 2px solid var(--bg-s);
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
  transition: transform 220ms cubic-bezier(.34,1.56,.64,1), opacity 140ms;
}
.mt-cart-badge[data-count="0"] { opacity:0; transform:scale(0); pointer-events:none; }
.mt-cart-badge:not([data-count="0"]) { opacity:1; transform:scale(1); }
.mt-badge-pop {
  animation: mtBadgePop 380ms cubic-bezier(.34,1.56,.64,1);
}
@keyframes mtBadgePop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.6); }
  100% { transform: scale(1); }
}

/* --- Backdrop --- */
.mt-cart-backdrop {
  position: fixed;
  inset: 0;
  z-index: 450;
  background: rgba(5,5,10,.75);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t3);
}
.mt-cart-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* --- Drawer shell --- */
.mt-cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 460;
  width: 420px;
  max-width: 100vw;
  background: var(--bg-s);
  border-left: 1px solid var(--border-m);
  box-shadow: var(--sh3);
  display: flex;
  flex-direction: column;
  transform: translateX(105%);
  transition: transform var(--t3);
  will-change: transform;
  overflow: hidden;
}
.mt-cart-drawer.open { transform: translateX(0); }

/* Mobile: bottom sheet */
@media (max-width: 767px) {
  .mt-cart-drawer {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 88vh;
    border-left: none;
    border-top: 1px solid var(--border-m);
    border-radius: var(--r4) var(--r4) 0 0;
    transform: translateY(105%);
  }
  .mt-cart-drawer.open { transform: translateY(0); }
}

/* --- Header --- */
.mt-cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-c);
}
.mt-cart-title {
  font-family: var(--font-d);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tx);
  margin: 0;
}
.mt-cart-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mt-cart-clear {
  font-size: 11px;
  font-weight: 600;
  color: var(--tx-s);
  padding: 4px 10px;
  border: 1px solid var(--border-m);
  border-radius: var(--r1);
  background: transparent;
  font-family: var(--font-b);
  transition: color var(--t1), border-color var(--t1), background var(--t1);
  cursor: pointer;
}
.mt-cart-clear:hover {
  color: #e05353;
  border-color: #e05353;
  background: rgba(224,83,83,.09);
}
.mt-cart-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r2);
  color: var(--tx-s);
  font-size: 18px;
  line-height: 1;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background var(--t1), color var(--t1);
}
.mt-cart-close:hover { background: var(--bg-e); color: var(--tx); }
.mt-cart-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* --- Empty state --- */
.mt-cart-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 28px;
  text-align: center;
  gap: 10px;
}
.mt-cart-empty-icon { font-size: 2.8rem; opacity: .45; line-height: 1; }
.mt-cart-empty-title {
  font-family: var(--font-d);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--tx);
}
.mt-cart-empty-desc { font-size: 12.5px; color: var(--tx-s); max-width: 230px; line-height: 1.55; }
.mt-cart-continue-btn {
  margin-top: 10px;
  padding: 10px 22px;
  border: 1px solid var(--border-m);
  border-radius: var(--r2);
  font-size: 13px;
  font-weight: 600;
  color: var(--tx-s);
  background: var(--bg-e);
  font-family: var(--font-b);
  cursor: pointer;
  transition: background var(--t1), color var(--t1), border-color var(--t1);
}
.mt-cart-continue-btn:hover { background: var(--bg-h); color: var(--tx); border-color: var(--border-s); }

/* --- Items scroll area --- */
.mt-cart-items {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 4px 0;
}
/* Cart items scroll cleanly — no scrollbar bar */

/* --- Cart item row --- */
.mt-cart-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border);
  transition: background var(--t1), opacity var(--t2), transform var(--t2);
}
.mt-cart-item:last-child { border-bottom: none; }
.mt-cart-item:hover { background: var(--bg-e); }
.mt-cart-item.mt-removing {
  opacity: 0;
  transform: translateX(28px);
  pointer-events: none;
}

/* Thumbnail */
.mt-ci-thumb {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border-radius: var(--r2);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-e);
}
.mt-ci-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.mt-ci-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
}

/* Info */
.mt-ci-info { flex: 1; min-width: 0; }
.mt-ci-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tx);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
.mt-ci-unit { font-size: 11px; color: var(--tx-s); }

/* Controls column */
.mt-ci-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
}
.mt-ci-qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-m);
  border-radius: var(--r2);
  overflow: hidden;
  background: var(--bg-e);
}
.mt-qbtn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 500;
  color: var(--tx-s);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background var(--t1), color var(--t1);
  user-select: none;
  -webkit-user-select: none;
}
.mt-qbtn:hover { background: var(--bg-h); color: var(--gold); }
.mt-qbtn:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.mt-qval {
  min-width: 26px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--tx);
  font-variant-numeric: tabular-nums;
  padding: 0 2px;
}
.mt-ci-sub {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mt-ci-remove {
  font-size: 11px;
  font-weight: 500;
  color: var(--tx-m);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: var(--r1);
  font-family: var(--font-b);
  transition: color var(--t1), background var(--t1);
}
.mt-ci-remove:hover { color: #e05353; background: rgba(224,83,83,.09); }
.mt-ci-remove:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* --- Footer --- */
.mt-cart-footer {
  border-top: 1px solid var(--border-m);
  padding: 14px 18px 18px;
  flex-shrink: 0;
  background: var(--bg-c);
}
.mt-cart-totals { margin-bottom: 13px; }
.mt-cart-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tx);
}
.mt-cart-total-price {
  font-family: var(--font-d);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
}
.mt-cart-savings {
  font-size: 11.5px;
  color: #4ade80;
  margin-top: 3px;
  font-weight: 600;
  min-height: 16px;
}

/* WhatsApp CTA in drawer */
.mt-cart-wa-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 13px 18px;
  background: var(--wa);
  color: #fff;
  font-weight: 700;
  font-size: 14.5px;
  border-radius: var(--r2);
  box-shadow: var(--sh-wa);
  border: none;
  cursor: pointer;
  font-family: var(--font-b);
  transition: background var(--t1), transform var(--t1), box-shadow var(--t1);
}
.mt-cart-wa-btn:hover {
  background: var(--wa-dk);
  transform: translateY(-1px);
  box-shadow: 0 6px 28px rgba(37,211,102,.45);
}
.mt-cart-wa-btn:active { transform: translateY(0); }
.mt-cart-wa-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Checkout button reuse */
.mt-cart-checkout-btn {
  width: 100%;
  margin-top: 8px;
  text-align: center;
  justify-content: center;
  display: flex;
  align-items: center;
}

/* Continue link */
.mt-cart-continue-small {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
  color: var(--tx-s);
  font-weight: 500;
  padding: 6px;
  border-radius: var(--r1);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-b);
  transition: color var(--t1), background var(--t1);
}
.mt-cart-continue-small:hover { color: var(--tx); background: var(--bg-e); }

/* Mobile tweaks */
@media (max-width: 767px) {
  .mt-cart-drawer { width: 100%; }
  .mt-cart-item   { padding: 10px 14px; }
  .mt-cart-header { padding: 13px 14px; }
  .mt-cart-footer { padding: 12px 14px 16px; }
  .mt-ci-name     { font-size: 12px; }
  .mt-ci-sub      { font-size: 12.5px; }
  .mt-cart-wa-btn { font-size: 13.5px; padding: 12px 14px; }
}


/* ==============================================
   ADD-TO-CART BUTTON
   Uses existing site tokens: --gold, --r2, --t2,
   --tx, --border so it feels native to the design.
=============================================== */
.atc-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 9px 14px;
  background: var(--gold);
  color: #fff;
  border: none;
  border-radius: var(--r2, 8px);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  letter-spacing: .35px;
  box-shadow: 0 2px 8px rgba(0,0,0,.13);
  transition: background .16s ease, transform .12s ease, box-shadow .16s ease;
}
.atc-btn:hover {
  background: #b45309;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
.atc-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.atc-btn.atc-added {
  background: #059669 !important;
  transform: none !important;
  box-shadow: 0 2px 8px rgba(5,150,105,.3) !important;
}

/* ==============================================
   ADD-TO-CART TOAST NOTIFICATION
=============================================== */
.mt-atc-toast {
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%) translateY(18px);
  background: #1e293b;
  color: #fff;
  padding: 10px 24px;
  border-radius: 24px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .2px;
  opacity: 0;
  pointer-events: none;
  z-index: 9998;
  white-space: nowrap;
  max-width: 90vw;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  transition: opacity .22s ease, transform .22s ease;
}
.mt-atc-toast.mt-toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (max-width: 767px) {
  .mt-atc-toast { bottom: 76px; font-size: 13px; padding: 9px 18px; }
  .atc-btn { font-size: 12.5px; padding: 9px 10px; }
}

/* ================================================================
   MAGIZHAM POO FIREWORKS — SHARE + CATEGORY SCROLL CONTROLS
   Uses the existing design tokens; no new visual system.
================================================================ */
/* Premium catalog share button — intentionally placed beside Call Us */
.hdr-share-btn{
  cursor:pointer;
  background:rgba(245,158,11,0.11);
  border:1px solid rgba(245,158,11,0.34);
  border-radius:var(--rp);
  color:var(--gold);
  font-size:11.5px;
  font-weight:700;
  padding:5px 12px;
  white-space:nowrap;
  box-shadow:0 2px 10px rgba(245,158,11,0.06);
  transition:background var(--t1),box-shadow var(--t1),transform var(--t1),border-color var(--t1);
}
.hdr-share-btn:hover{
  background:rgba(245,158,11,0.19);
  border-color:rgba(245,158,11,0.52);
  box-shadow:0 0 0 3px rgba(245,158,11,0.10);
  transform:translateY(-1px);
}
.hdr-share-btn:active{transform:translateY(0);}
#shareCatalogBtn { cursor: pointer; }

.category-scroll-wrap {
  position: relative;
  max-width: var(--mw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  min-width: 0;
}
.category-scroll-wrap .category-scroller {
  max-width: none;
  width: 100%;
  min-width: 0;
  padding-left: 28px;
  padding-right: 28px;
}
.category-scroll-arrow {
  position: absolute;
  z-index: 4;
  top: 50%;
  transform: translateY(-60%);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg);
  color: var(--gold);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.12));
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t1), background var(--t1), color var(--t1), transform var(--t1);
}
.category-scroll-arrow.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.category-scroll-arrow:hover {
  background: var(--gold-d);
  color: var(--tx);
  transform: translateY(-60%) scale(1.04);
}
.category-scroll-arrow:disabled {
  opacity: 0;
  pointer-events: none;
}
.category-scroll-arrow-left { left: 5px; }
.category-scroll-arrow-right { right: 5px; }

@media (max-width: 700px) {
  .category-scroll-arrow {
    width: 28px;
    height: 28px;
    font-size: 23px;
  }
  .category-scroll-wrap .category-scroller {
    padding-left: 28px;
    padding-right: 28px;
  }
}

/* ===== Premium Promo Input Row ===== */
#mtPromoInputRow {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
}
#mtPromoInputRow #mtPromoInput {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  box-sizing: border-box;
}
#mtPromoInputRow #mtPromoApply {
  flex: 0 0 auto;
  width: 92px;
  min-width: 92px;
  height: 46px;
  margin: 0;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r2);
  font-weight: 800;
  letter-spacing: .3px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--t1), box-shadow var(--t1), filter var(--t1);
}
#mtPromoInputRow #mtPromoApply:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 6px 20px rgba(0,0,0,.16);
}
#mtPromoInputRow #mtPromoApply:active { transform: translateY(0); }

@media (max-width: 420px) {
  #mtPromoInputRow { gap: 8px; }
  #mtPromoInputRow #mtPromoApply {
    width: 82px;
    min-width: 82px;
    padding: 0 12px;
  }
}

/* ===== FINAL PROMO BUTTON — PREMIUM YELLOW/GOLD ===== */
#mtCartPromoBtn{
  background:linear-gradient(135deg,#facc15 0%,#f59e0b 52%,#eab308 100%) !important;
  color:#2b1600 !important;
  border:1px solid rgba(180,83,9,.55) !important;
  box-shadow:0 8px 24px rgba(245,158,11,.24), inset 0 1px 0 rgba(255,255,255,.32) !important;
  font-weight:800;
}
#mtCartPromoBtn:hover{
  filter:brightness(1.06) saturate(1.05);
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(245,158,11,.34), inset 0 1px 0 rgba(255,255,255,.4) !important;
}
#mtCartPromoBtn:active{transform:translateY(0);}
#mtCartPromoBtn:focus-visible{outline:3px solid rgba(250,204,21,.35);outline-offset:2px;}
#mtPromoApply{
  background:linear-gradient(135deg,#facc15,#f59e0b) !important;
  color:#2b1600 !important;
  border-color:rgba(180,83,9,.55) !important;
}

/* ===== FINAL CATEGORY SCROLLER ARROWS ===== */
.cat-nav-wrap{position:relative;display:flex;align-items:center;max-width:var(--mw);margin:0 auto;}
.cat-nav-arrow{position:absolute;z-index:5;width:34px;height:34px;border:1px solid var(--border);border-radius:50%;background:var(--bg);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:25px;line-height:1;cursor:pointer;box-shadow:0 5px 16px rgba(0,0,0,.16);opacity:.0;pointer-events:none;transition:opacity .2s,transform .2s,background .2s;}
.cat-nav-arrow.visible{opacity:1;pointer-events:auto;}
.cat-nav-arrow:hover{background:var(--gold-d);transform:scale(1.06);}
#catNavL{left:4px;}
#catNavR{right:4px;}

/* ================================================================
   MAGIZHAM POO FIREWORKS — FINAL SIGNATURE POLISH
   Visual-only refinement layer. Existing layout, content and logic
   remain untouched.
================================================================ */
:root{
  --mt-gold-bright:#f4c95d;
  --mt-gold-soft:#ffe8a3;
  --mt-glass:rgba(255,255,255,.045);
  --mt-shadow:0 18px 55px rgba(0,0,0,.28);
}

html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* Premium selection (scrollbar hidden globally) */
::selection{background:rgba(244,201,93,.28);color:#fff}

/* Header glass refinement */
header,.site-header,.main-header{
  backdrop-filter:blur(18px) saturate(125%);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
}
.header-btn{
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease!important;
}
.header-btn:hover{transform:translateY(-2px)}

/* Share button: refined companion to Call Us */
#shareCatalogBtn{
  background:linear-gradient(135deg,rgba(244,201,93,.16),rgba(244,201,93,.07))!important;
  border-color:rgba(244,201,93,.42)!important;
  color:#ffe7a0!important;
  box-shadow:0 7px 24px rgba(244,201,93,.08),inset 0 1px 0 rgba(255,255,255,.08);
}
#shareCatalogBtn:hover{box-shadow:0 10px 30px rgba(244,201,93,.16),inset 0 1px 0 rgba(255,255,255,.1)}

/* Category rail */
.category-scroll-wrap{position:relative;isolation:isolate}
.category-scroll-wrap:before,.category-scroll-wrap:after{
  content:"";position:absolute;top:0;bottom:0;width:46px;z-index:2;pointer-events:none;
}
.category-scroll-wrap:before{left:0;background:linear-gradient(90deg,var(--bg, #09090d),transparent)}
.category-scroll-wrap:after{right:0;background:linear-gradient(270deg,var(--bg, #09090d),transparent)}
.category-scroll-wrap .category-scroller{scrollbar-width:none}
.category-scroll-wrap .category-scroller::-webkit-scrollbar{display:none}

/* Product cards: depth without changing dimensions */
.product-card,.product-item,.card{
  transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease,border-color .28s ease!important;
}
.product-card:hover,.product-item:hover,.card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 42px rgba(0,0,0,.30),0 0 0 1px rgba(244,201,93,.07);
}
.product-card img,.product-item img,.card img{transition:transform .45s cubic-bezier(.2,.7,.2,1),filter .35s ease}
.product-card:hover img,.product-item:hover img,.card:hover img{filter:saturate(1.05) contrast(1.02)}

/* Buttons: unified premium tactile feel */
button,.btn,[role="button"]{transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
button:active,.btn:active,[role="button"]:active{transform:translateY(1px)}

/* Promo — signature yellow, intentionally distinct from WhatsApp */
#mtCartPromoBtn{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate;
  background:linear-gradient(135deg,#ffe07a 0%,#f4c542 48%,#dca62d 100%)!important;
  color:#201600!important;
  border:1px solid rgba(255,232,163,.8)!important;
  border-radius:13px!important;
  box-shadow:0 9px 26px rgba(244,197,66,.20),inset 0 1px 0 rgba(255,255,255,.62)!important;
  font-weight:800!important;
  text-shadow:0 1px 0 rgba(255,255,255,.25);
}
#mtCartPromoBtn:before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.35) 48%,transparent 66%);
  transform:translateX(-120%);transition:transform .6s ease;
}
#mtCartPromoBtn:hover{transform:translateY(-2px)!important;filter:saturate(1.08);box-shadow:0 13px 32px rgba(244,197,66,.30),inset 0 1px 0 rgba(255,255,255,.7)!important}
#mtCartPromoBtn:hover:before{transform:translateX(120%)}
#mtCartPromoBtn:focus-visible{outline:3px solid rgba(255,224,122,.42)!important;outline-offset:3px}

#mtPromoInputRow{align-items:stretch!important}
#mtPromoInputRow #mtPromoInput{
  min-height:46px;
  border-color:rgba(244,201,93,.20)!important;
  background:rgba(255,255,255,.035)!important;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease!important;
}
#mtPromoInputRow #mtPromoInput:focus{
  border-color:rgba(244,201,93,.62)!important;
  background:rgba(244,201,93,.045)!important;
  box-shadow:0 0 0 4px rgba(244,201,93,.09)!important;
  outline:none!important;
}
#mtPromoInputRow #mtPromoApply{
  min-height:46px;
  background:linear-gradient(135deg,#ffe07a,#e8b735)!important;
  color:#211800!important;
  border:1px solid rgba(255,232,163,.7)!important;
  font-weight:800!important;
  box-shadow:0 7px 20px rgba(232,183,53,.18),inset 0 1px 0 rgba(255,255,255,.55)!important;
}
#mtPromoInputRow #mtPromoApply:hover{transform:translateY(-1px)!important;filter:brightness(1.05)}

/* Checkout CTA hierarchy */
#mtCartCheckout{
  box-shadow:0 12px 32px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.12);
}

/* Modal depth */
.modal,.modal-content,.checkout-modal{
  box-shadow:var(--mt-shadow),0 0 0 1px rgba(255,255,255,.035);
}

/* Focus accessibility */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid rgba(244,201,93,.78);outline-offset:3px;
}

/* Respect reduced-motion preferences */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

@media(max-width:640px){
  #mtCartPromoBtn{min-height:44px}
  #mtPromoInputRow #mtPromoApply{min-width:82px}
  .category-scroll-wrap:before,.category-scroll-wrap:after{width:24px}
}




/* ======================================================
   PRODUCT IMAGE CLICK AFFORDANCE — POINTER ONLY
   Pointer-only image affordance.
====================================================== */
.card-thumb img,
.giftbox-img-wrap img,
.giftbox-img {
  cursor: pointer;
}





/* ===== PREMIUM PRODUCT IMAGE HOVER (pre-click preview only) =====
   Subtle: scale 1.02 + faint brightness, 220ms. Hover NEVER opens the
   lightbox — that is click/tap/keyboard only. Applied only on devices
   with real hover so it never sticks after a touch tap. */
.card-thumb,
.giftbox-img-wrap{
  overflow: hidden;
  transition: box-shadow .22s ease;
}
.card-thumb img,
.giftbox-img-wrap img,
.giftbox-img{
  cursor: zoom-in !important;
  transform: scale(1);
  transform-origin: center center;
  transition: transform .25s ease, filter .25s ease;
  will-change: transform;
  backface-visibility: hidden;
  outline-offset: 2px;
}
@media (hover:hover) and (pointer:fine){
  .card-thumb:hover,
  .giftbox-img-wrap:hover{
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
  }
  .card-thumb:hover img,
  .giftbox-img-wrap:hover img,
  .giftbox-img:hover{
    transform: scale(1.08);
    filter: brightness(1.05);
  }
}

/* ======================================================
   LIGHTBOX VIEWER (sample implementation)
====================================================== */
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 20000;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.image-lightbox.open {
  display: flex;
}

.lightbox-stage {
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.lightbox-image {
  max-width: 86vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius-md, 14px);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.7);
  transition: transform 0.2s ease;
  user-select: none;
  -webkit-user-drag: none;
}

.lightbox-close {
  position: fixed;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(16, 20, 54, 0.85);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20002;
}

.lightbox-caption {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(16, 20, 54, 0.85);
  color: #fff;
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  z-index: 20001;
  max-width: 60vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media(max-width:640px){
  .image-lightbox{padding:12px;}
  .lightbox-image{max-width:95vw;max-height:80vh;}
  .lightbox-close{top:12px;right:14px;width:42px;height:42px;font-size:22px;}
  .lightbox-caption{top:12px;max-width:62vw;font-size:.78rem;}
}

/* ==========================================================
   MOBILE PREMIUM UI LAYER (≤767px only — desktop untouched)
   Reuses existing search (#searchInput), categories
   (.cat-tab), cart state and lightbox. No duplicate systems.
   ========================================================== */

/* --- New chrome: hidden on desktop/tablet --- */
.mobile-header,.mobile-menu,.mobile-menu-backdrop,.mobile-sticky-cart-bar{display:none}
.mm-link{display:flex}

@media (max-width:767px){
  /* Chrome visibility: hide desktop header (keep search toolbar, restyled).
     Floating order bar is replaced by the mobile sticky cart bar (no duplicates). */
  .site-header{display:none!important}
  .floating-order-bar{display:none!important}
  .mobile-header{display:flex}
  .mobile-sticky-cart-bar.visible{display:flex}

  /* ---------- 1. MOBILE HEADER (sticky, compact) ---------- */
  .mobile-header{
    position:sticky;top:0;z-index:400;
    height:56px;align-items:center;
    gap:8px;padding:0 10px;
    background:rgba(9,9,13,.96);
    -webkit-backdrop-filter:blur(18px) saturate(180%);
    backdrop-filter:blur(18px) saturate(180%);
    border-bottom:1px solid var(--border);
  }
  .mh-btn{
    min-width:44px;min-height:44px;
    display:flex;align-items:center;justify-content:center;
    border-radius:12px;font-size:20px;line-height:1;
    color:var(--tx);background:transparent;
    transition:background var(--t1),transform var(--t1);
    position:relative;flex-shrink:0;
  }
  .mh-btn:active{background:var(--bg-e);transform:scale(.94)}
  .mh-logo{
    display:flex;align-items:center;gap:8px;
    text-decoration:none;min-width:0;flex:1;
  }
  .mh-logo-mark{
    display:block;flex-shrink:0;
    height:29px;width:auto;
    filter:drop-shadow(0 0 6px rgba(200,144,58,.35));
  }
  .mh-logo-text{display:flex;flex-direction:column;min-width:0}
  .mh-logo-text strong{
    font-family:var(--font-d);font-size:14.5px;letter-spacing:.04em;
    color:var(--tx);white-space:nowrap;
  }
  .mh-logo-text strong em{color:var(--gold);font-style:normal}
  .mh-logo-text small{
    font-size:9px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--tx-m);white-space:nowrap;
  }
  .mh-cart-badge{
    position:absolute;top:2px;right:2px;
    min-width:17px;height:17px;padding:0 4px;
    border-radius:999px;background:var(--gold);color:#14112b;
    font-size:10px;font-weight:800;line-height:17px;text-align:center;
    box-shadow:0 2px 6px rgba(0,0,0,.4);
  }
  .mh-cart-badge[data-count="0"]{display:none}

  /* ---------- 2+3. SEARCH + CATEGORIES (existing elements, restyled) ---------- */
  .toolbar-wrap{
    display:block!important;
    position:sticky;top:56px;z-index:390;
    background:rgba(9,9,13,.97);
    border-bottom:1px solid var(--border);
  }
  .toolbar-inner{padding:10px 12px 6px;gap:8px}
  .toolbar-quick-actions{display:none}
  .search-container{max-width:100%}
  .search-input{
    padding:12px 38px 12px 38px;
    font-size:15px;min-height:46px;
    border-radius:14px;
  }
  .search-icon{left:14px;font-size:15px}
  .search-clear{width:26px;height:26px;right:9px}
  .cat-nav-wrap{padding:0 8px}
  .category-scroller{
    padding:2px 8px 10px;gap:6px;
    scrollbar-width:none;
  }
  .cat-tab{
    padding:8px 15px;min-height:36px;
    font-size:12.5px;font-weight:600;
    border-radius:999px;
    border:1px solid var(--border-m);
    background:var(--bg-e);
  }
  .cat-tab.active{
    background:var(--gold-d);border-color:var(--gold);
    box-shadow:0 2px 10px rgba(200,144,58,.25);
  }

  /* ---------- 4+5+6. PRODUCT GRID (2-column premium cards) ---------- */
  .collections-container{padding:14px 10px calc(var(--mnh) + 120px)}
  .products-grid{gap:10px}
  .product-card{
    border-radius:16px;
    background:var(--bg-c);
    box-shadow:0 2px 10px rgba(0,0,0,.28);
    transition:transform var(--t1),box-shadow var(--t1);
  }
  .product-card:active{transform:scale(.985)}
  .card-thumb{border-radius:12px 12px 0 0}
  .card-thumb img{border-radius:12px 12px 0 0}
  .card-body{padding:10px 10px 12px;gap:5px}
  .card-title{font-size:12.5px;line-height:1.35}
  .price-net{font-size:16px;font-weight:800}
  .discount-tag{font-size:9.5px;padding:3px 8px}
  /* Touch-friendly quantity + Add to Cart (all existing buttons kept) */
  .qty-control{gap:6px}
  .qty-btn{width:40px;height:40px;font-size:20px;border-radius:10px}
  .qty-display{font-size:14px;min-width:30px}
  .atc-btn{
    min-height:42px;font-size:13px;font-weight:700;border-radius:11px;
  }

  /* ---------- 6. Lightbox stays as-is (premium already) ---------- */

  /* ---------- 9b. BACK-TO-TOP ARROW (mobile only) ----------
     Moved slightly down, below the sticky cart bar, so it never
     overlays the View Cart button. Hidden while the cart drawer
     or another fullscreen surface is open. PC/tablet unchanged. */
  .back-to-top{
    bottom:16px;
    right:14px;
    z-index:370;
  }
  body:has(.mt-cart-drawer.open) .back-to-top,
  body:has(.mobile-menu.open) .back-to-top,
  body:has(.checkout-modal.open) .back-to-top,
  body:has(#imageLightbox.open) .back-to-top{
    opacity:0;
    pointer-events:none;
    transform:translateY(10px);
  }

  /* ---------- 9. STICKY CART BAR (visible only with items) ---------- */
  .mobile-sticky-cart-bar{
    position:fixed;left:10px;right:10px;
    bottom:calc(var(--mnh) + 10px);
    z-index:380;
    display:none;
    align-items:center;gap:10px;
    padding:12px 14px;
    border-radius:16px;
    background:rgba(20,17,43,.97);
    border:1px solid rgba(200,144,58,.35);
    box-shadow:0 12px 34px rgba(0,0,0,.55);
    text-decoration:none;
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
    transform:translateY(140%);
    opacity:0;
    transition:transform .28s ease,opacity .28s ease;
  }
  .mobile-sticky-cart-bar.visible{
    transform:translateY(0);opacity:1;
  }
  .mscb-icon{font-size:20px;line-height:1}
  .mscb-count{font-size:12px;font-weight:600;color:var(--tx-s);white-space:nowrap}
  .mscb-total{font-size:16px;font-weight:800;color:var(--gold);margin-left:auto;white-space:nowrap}
  .mscb-cta{
    font-size:12.5px;font-weight:700;color:#14112b;
    background:var(--gold);border-radius:10px;
    padding:9px 14px;white-space:nowrap;
  }
  /* Menu drawer opens over the bar — keep page padding clear of bar+nav */
  body.mm-open{overflow:hidden}
  .collections-container{padding-bottom:calc(var(--mnh) + 132px)}

  /* ---------- 13. MOBILE MENU DRAWER ---------- */
  .mobile-menu{
    display:flex;flex-direction:column;
    position:fixed;top:0;left:0;bottom:0;
    width:min(82vw,330px);z-index:600;
    background:#0c0c12;
    border-right:1px solid var(--border);
    box-shadow:14px 0 44px rgba(0,0,0,.55);
    transform:translateX(-105%);
    transition:transform .28s cubic-bezier(.22,.8,.3,1);
    padding:14px 12px calc(18px + var(--mnh));
    overflow-y:auto;overscroll-behavior:contain;
  }
  .mobile-menu.open{transform:translateX(0)}
  .mobile-menu-backdrop{
    position:fixed;inset:0;z-index:590;
    background:rgba(0,0,0,.55);
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  }
  .mobile-menu-backdrop[hidden]{display:none}
  .mm-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:4px 6px 12px;
    border-bottom:1px solid var(--border);margin-bottom:10px;
  }
  .mm-title{font-family:var(--font-d);font-size:15px;font-weight:700;color:var(--tx);letter-spacing:.03em}
  .mm-close{
    width:42px;height:42px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    font-size:22px;color:var(--tx-s);background:transparent;
    transition:background var(--t1),color var(--t1);
  }
  .mm-close:active{background:var(--bg-e);color:var(--tx)}
  .mm-link{
    align-items:center;gap:12px;
    min-height:50px;padding:10px 12px;
    border-radius:12px;
    font-size:14.5px;font-weight:600;color:var(--tx-s);
    text-decoration:none;width:100%;text-align:left;
    background:transparent;border:none;
    transition:background var(--t1),color var(--t1);
  }
  .mm-link span:first-child{font-size:18px;width:24px;text-align:center}
  .mm-link:active{background:var(--bg-e);color:var(--tx)}
  .mm-lang{margin-top:auto;padding:14px 6px 0;border-top:1px solid var(--border)}
  .mm-lang-label{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-m);margin-bottom:9px}
  .mm-lang-btns{display:flex;gap:7px}
  .mm-lang-btns .lang-btn{
    flex:1;min-height:42px;
    border-radius:11px;border:1px solid var(--border-m);
    background:var(--bg-e);color:var(--tx-s);
    font-size:13px;font-weight:700;
    transition:all var(--t1);
  }
  .mm-lang-btns .lang-btn.active{
    background:var(--gold-d);border-color:var(--gold);color:var(--gold);
  }

  /* ---------- 8. CART DRAWER (bottom sheet, touch-friendly) ---------- */
  .mt-cart-drawer{max-height:92vh}
  .mt-cart-item{padding:12px 14px}
  .mt-qbtn{
    min-width:44px;min-height:44px;
  }
  .mt-ci-remove{min-width:40px;min-height:40px}
  .mt-cart-checkout-btn{min-height:50px;font-size:14px}
  .btn-whatsapp-submit{min-height:50px;font-size:14px}

  /* ---------- 10-12. CHECKOUT MODAL (full-width fields) ---------- */
  .checkout-modal-content{max-height:94vh}
  .checkout-modal-body{padding:14px}

  /* FIX: sections were flex-shrinking to fit the viewport — the invoice
     preview squashed to ~75px, banner values clipped, notice box cut off.
     Children keep natural size; the modal content scrolls instead. */
  .checkout-modal-body > *{flex-shrink:0}
  .checkout-modal-body{overflow:visible}
  .invoice-preview-img{
    width:100%;height:auto;
    object-fit:contain;
    border-radius:10px;
  }
  .invoice-image-preview-wrap{overflow:visible}
  .invoice-image-preview-wrap.visible{display:flex}

  /* Order items breakdown: scroll the 8-col table sideways instead of crushing */
  .cart-items-preview{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cart-preview-table{min-width:430px}
  .cart-preview-table th,.cart-preview-table td{padding:8px 10px;font-size:12px;white-space:nowrap}

  /* Bigger, comfier close button */
  .checkout-modal-close{width:40px;height:40px;font-size:16px;flex:0 0 40px}
  .checkout-modal-header{padding:14px 16px}
  .checkout-modal-header h3{font-size:15px;line-height:1.35}

  .form-input,.form-select{
    min-height:48px;font-size:15px;border-radius:12px;width:100%;
  }
  .form-label{font-size:12px;margin-bottom:6px;display:block}
  .checkout-form-grid{gap:12px}
  .btn-whatsapp-submit,.btn-download-invoice{
    min-height:52px;font-size:14.5px;font-weight:700;border-radius:13px;width:100%;
  }

  /* ---------- 14. FOOTER (stacked, compact) ---------- */
  .site-footer{padding:26px 14px 18px}
  .footer-inner{gap:20px}
  .footer-bottom{flex-direction:column;gap:8px;align-items:flex-start}

  /* ---------- 15/16. NO horizontal overflow anywhere ----------
     overflow-x:hidden on ancestors breaks position:sticky (header/toolbar
     stopped sticking) — 'clip' prevents h-overflow WITHOUT creating a scroll
     container, so sticky keeps working. 'hidden' kept as legacy fallback. */
  html,body{max-width:100%;overflow-x:hidden;overflow-x:clip}
  .hero-title{font-size:21px}
  .hero-cta-group{flex-direction:column}
  .btn-primary-hero,.btn-ghost-hero{text-align:center}
  .trust-strip{grid-template-columns:repeat(2,1fr)}
}

/* Desktop/tablet safety: never show mobile chrome above 767px */
@media (min-width:768px){
  .mobile-menu,.mobile-menu-backdrop,.mobile-sticky-cart-bar{display:none!important}
  .mobile-header{display:none!important}
}

/* ============================================================
   PREMIUM MOBILE MENU — CSS-ONLY VISUAL UPGRADE (≤767px)
   Restyles EXISTING selectors only. No HTML/JS changes.
   Midnight navy + luxury gold + subtle glass.
   ============================================================ */
@media (max-width:767px){

  /* ---------- 1+2. HAMBURGER BUTTON (premium circular control) ---------- */
  .mh-menu-btn{
    width:46px;height:46px;border-radius:50%;
    background:linear-gradient(160deg,#171630 0%,#0d0d18 100%);
    border:1px solid rgba(200,144,58,.42);
    color:var(--gold);
    font-size:19px;
    box-shadow:
      0 3px 12px rgba(0,0,0,.45),
      inset 0 1px 0 rgba(255,255,255,.06);
    transition:transform .24s cubic-bezier(.22,.8,.3,1),box-shadow .26s ease,border-color .26s ease,color .26s ease;
  }
  @media (hover:hover){
    .mh-menu-btn:hover{
      transform:scale(1.05);
      border-color:rgba(200,144,58,.65);
      box-shadow:0 4px 16px rgba(0,0,0,.5),0 0 14px rgba(200,144,58,.18);
    }
  }
  .mh-menu-btn:active{transform:scale(.92)}
  /* Open state (JS already toggles body.mm-open): smooth rotate while ☰↔✕ swaps */
  body.mm-open .mh-menu-btn{
    transform:rotate(90deg);
    border-color:rgba(200,144,58,.7);
    color:var(--mt-gold-bright,#f4c95d);
    box-shadow:0 0 16px rgba(200,144,58,.2),0 3px 12px rgba(0,0,0,.45);
  }
  /* 9. Button in light mode: cream face, navy-gold border, clear glyph */
  body.light-mode .mh-menu-btn{
    background:linear-gradient(160deg,#ffffff 0%,#f1efe9 100%);
    border-color:rgba(150,110,40,.45);
    color:#8d692c;
    box-shadow:0 2px 10px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.8);
  }
  @media (hover:hover){
    body.light-mode .mh-menu-btn:hover{
      border-color:rgba(150,110,40,.7);
      box-shadow:0 3px 14px rgba(0,0,0,.16),0 0 12px rgba(200,144,58,.14);
    }
  }

  /* ---------- 3+4. MENU PANEL (midnight navy, glass, slide+fade) ---------- */
  .mobile-menu{
    width:min(84vw,340px);
    background:
      radial-gradient(circle at 88% -6%, rgba(200,144,58,.10), transparent 42%),
      radial-gradient(circle at -18% 108%, rgba(244,201,93,.05), transparent 38%),
      linear-gradient(168deg,#10101c 0%,#0b0b12 52%,#0d0c15 100%);
    border-right:1px solid rgba(200,144,58,.22);
    box-shadow:18px 0 60px rgba(0,0,0,.6);
    -webkit-backdrop-filter:blur(22px) saturate(140%);
    backdrop-filter:blur(22px) saturate(140%);
    opacity:0;visibility:hidden;
    transition:
      transform .32s cubic-bezier(.22,.8,.3,1),
      opacity .28s ease,
      visibility .32s;
    padding:16px 12px calc(20px + var(--mnh));
  }
  .mobile-menu.open{transform:translateX(0);opacity:1;visibility:visible}

  /* ---------- 5. BACKDROP (deep navy overlay, fade-in) ---------- */
  .mobile-menu-backdrop{
    background:rgba(6,7,12,.62);
    -webkit-backdrop-filter:blur(3px) saturate(120%);
    backdrop-filter:blur(3px) saturate(120%);
  }
  .mobile-menu-backdrop:not([hidden]){animation:mmFadeIn .3s ease both}
  @keyframes mmFadeIn{from{opacity:0}to{opacity:1}}
  body.light-mode .mobile-menu-backdrop{background:rgba(28,26,22,.38)}

  /* ---------- Menu head + close ---------- */
  .mm-head{
    padding:6px 6px 14px;
    background:linear-gradient(90deg,rgba(200,144,58,.5),rgba(200,144,58,.06) 70%,transparent) left bottom/100% 1px no-repeat;
    border-bottom:none;
    margin-bottom:12px;
  }
  .mm-title{
    font-size:15.5px;letter-spacing:.07em;
    color:var(--tx);
  }
  .mm-close{
    width:42px;height:42px;border-radius:50%;
    border:1px solid rgba(200,144,58,.25);
    transition:background .22s ease,color .22s ease,transform .24s ease,border-color .22s ease;
  }
  .mm-close:active{
    background:rgba(200,144,58,.12);color:var(--mt-gold-bright,#f4c95d);
    border-color:rgba(200,144,58,.5);transform:rotate(90deg);
  }

  /* ---------- 6+7. MENU ITEMS (touch height, gold accent) ---------- */
  .mm-link{
    min-height:52px;padding:12px 14px;
    border-radius:13px;
    font-size:14.5px;font-weight:600;letter-spacing:.012em;
    position:relative;
    transition:background .22s ease,color .22s ease,transform .22s ease;
  }
  .mm-link span:first-child{
    font-size:18px;width:26px;text-align:center;
    filter:drop-shadow(0 0 6px rgba(200,144,58,.22));
    transition:filter .22s ease;
  }
  @media (hover:hover){
    .mm-link:hover{background:rgba(200,144,58,.09);color:var(--tx)}
    .mm-link:hover span:first-child{filter:drop-shadow(0 0 8px rgba(200,144,58,.4))}
  }
  .mm-link:active{
    background:rgba(200,144,58,.14);
    color:var(--mt-gold-bright,#f4c95d);
    transform:translateX(2px);
  }
  /* Subtle gold accent bar on press */
  .mm-link::before{
    content:"";position:absolute;left:2px;top:50%;
    translate:0 -50%;width:3px;height:0;border-radius:2px;
    background:linear-gradient(180deg,var(--mt-gold-bright,#f4c95d),#8d692c);
    opacity:0;transition:height .22s ease,opacity .22s ease;
  }
  .mm-link:active::before{height:55%;opacity:1}

  /* ---------- Language section (gold active, glass chips) ---------- */
  .mm-lang{padding-top:16px}
  .mm-lang-btns .lang-btn{
    min-height:44px;border-radius:12px;
    background:rgba(255,255,255,.04);
    border:1px solid var(--border-m);
    color:var(--tx-s);font-size:13px;font-weight:700;letter-spacing:.03em;
    transition:background .22s ease,color .22s ease,border-color .22s ease,box-shadow .22s ease;
  }
  .mm-lang-btns .lang-btn.active{
    background:linear-gradient(150deg,rgba(200,144,58,.18),rgba(200,144,58,.06));
    border-color:var(--gold);
    color:var(--mt-gold-bright,#f4c95d);
    box-shadow:0 0 12px rgba(200,144,58,.15);
  }

  /* ---------- 8. MENU in light mode (cream panel, navy text) ---------- */
  body.light-mode .mobile-menu{
    background:
      radial-gradient(circle at 88% -6%, rgba(200,144,58,.08), transparent 42%),
      linear-gradient(168deg,#ffffff 0%,#faf8f4 55%,#f5f2ec 100%);
    border-right:1px solid rgba(150,110,40,.28);
    box-shadow:18px 0 60px rgba(30,25,15,.22);
  }
  body.light-mode .mm-title{color:#1a1714}
  body.light-mode .mm-link{color:#4a443e}
  body.light-mode .mm-link:active{color:#8d692c;background:rgba(200,144,58,.12)}
  body.light-mode .mm-lang-btns .lang-btn{background:#fff;color:#4a443e}
  body.light-mode .mm-lang-btns .lang-btn.active{
    background:linear-gradient(150deg,rgba(200,144,58,.16),rgba(200,144,58,.05));
    color:#8d692c;border-color:#b98b38;
  }
  body.light-mode .mm-close{border-color:rgba(150,110,40,.3);color:#6a6460}
  body.light-mode .mm-close:active{color:#8d692c;background:rgba(200,144,58,.1)}

  /* ---------- 10. Small-phone polish (≤360px) ---------- */
  @media (max-width:360px){
    .mobile-menu{width:min(88vw,320px);padding:14px 10px calc(18px + var(--mnh))}
    .mm-link{min-height:50px;padding:11px 12px;font-size:14px}
    .mm-title{font-size:14.5px}
    .mh-menu-btn{width:44px;height:44px}
  }

  /* ---------- Scroll-lock self-healing ----------
     If body ever keeps a stale lock class/style while NO surface that
     legitimately locks scrolling is actually open (e.g. interrupted close,
     bfcache page restore), release the page so gift boxes/footer are
     reachable. Pure CSS; never fires while menu/drawer/modal/lightbox is open. */
  body.mm-open:not(:has(.mobile-menu.open)){overflow:auto!important}
  body[style*="overflow: hidden"]:not(:has(.mobile-menu.open))
        :not(:has(.mt-cart-drawer.open))
        :not(:has(.checkout-modal.open))
        :not(:has(#imageLightbox.open)){overflow:auto!important}
}

/* =========================================
   MAGIZHAM POO FIREWORKS — PREMIUM UI ENHANCEMENTS
   Additive-only layer. Extends existing
   tokens/components; renames nothing.
   ========================================= */

/* --- 1. Extended design tokens (additive) --- */
:root {
  --champagne:   #f4c95d;
  --gold-soft:   rgba(200,144,58,0.08);
  --gold-ring:   rgba(200,144,58,0.28);
  --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.55);
  --shadow-lift: 0 2px 6px rgba(0,0,0,.4), 0 18px 40px -16px rgba(0,0,0,.6);
  --ease-prem:   cubic-bezier(.2,.7,.2,1);
}

/* --- 2. Refined base typography & texture --- */
body{
  letter-spacing:.01em;
}
h1,h2,h3,h4{
  letter-spacing:.005em;
}
::selection{background:rgba(244,201,93,.24)}

/* --- 3. Focus visibility (a11y) --- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
  border-radius:4px;
}

/* --- 4. Header: quiet storefront polish --- */
header,.site-header,.main-header{
  border-bottom:1px solid var(--border);
}
.header-btn:hover{transform:translateY(-1px)}

/* --- 5. Hero: premium first impression --- */
.hero-title em{
  background:linear-gradient(105deg,var(--gold) 0%,var(--champagne) 50%,var(--gold) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-pill-badge{
  border:1px solid var(--gold-ring);
  background:var(--gold-soft);
  letter-spacing:.12em;
}
.btn-primary-hero{
  position:relative;
  overflow:hidden;
  box-shadow:0 6px 22px -8px var(--gold-glow);
}
.btn-primary-hero::after{
  content:"";
  position:absolute;top:0;left:-70%;
  width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg);
  transition:left .55s var(--ease-prem);
  pointer-events:none;
}
.btn-primary-hero:hover::after{left:130%}
.btn-primary-hero:hover{transform:translateY(-2px)}

/* --- 6. Section titles: gold rule accent --- */
.section-title-group h3{
  position:relative;
  padding-left:14px;
}
.section-title-group h3::before{
  content:"";
  position:absolute;left:0;top:50%;
  transform:translateY(-50%);
  width:4px;height:70%;
  border-radius:4px;
  background:linear-gradient(180deg,var(--gold-l),var(--gold));
}

/* --- 7. Product cards: showroom treatment --- */
.product-card{
  box-shadow:var(--shadow-card);
}
.product-card:hover{
  transform:translateY(-4px);
  border-color:var(--gold-ring);
  box-shadow:var(--shadow-lift),0 0 0 1px var(--gold-soft);
}
.card-title{
  letter-spacing:.005em;
}
.price-net{
  letter-spacing:.01em;
}
.discount-tag{
  border-radius:6px;
  letter-spacing:.1em;
  box-shadow:0 2px 8px rgba(0,0,0,.45);
}

/* Image hover: gentle, premium scale (spec: 1.02–1.05) */
@media (hover:hover) and (pointer:fine){
  .card-thumb img,
  .giftbox-img-wrap img,
  .giftbox-img{
    transition:transform .32s var(--ease-prem),filter .32s var(--ease-prem);
  }
  .card-thumb:hover img,
  .giftbox-img-wrap:hover img,
  .giftbox-img:hover{
    transform:scale(1.045);
    filter:brightness(1.04) saturate(1.03);
  }
  .card-thumb{
    transition:box-shadow .3s var(--ease-prem);
  }
  .card-thumb:hover{
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  }
}

/* --- 8. Buttons: consistent micro-rise --- */
.atc-btn{
  transition:transform 220ms var(--ease-prem),box-shadow 220ms var(--ease-prem),filter 220ms var(--ease-prem),background-color 220ms var(--ease-prem);
}
.atc-btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
}
.atc-btn:active{transform:translateY(0)}
.qty-btn{
  transition:background-color 220ms var(--ease-prem),transform 220ms var(--ease-prem),color 220ms var(--ease-prem);
}
.qty-btn:hover{transform:scale(1.05)}

/* --- 9. WhatsApp CTAs: trustworthy presence --- */
.btn-whatsapp-submit,.mt-cart-checkout-btn{
  transition:transform 220ms var(--ease-prem),box-shadow 220ms var(--ease-prem),filter 220ms var(--ease-prem);
}
.btn-whatsapp-submit:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 26px -10px var(--wa-glow),0 4px 14px -6px rgba(0,0,0,.5);
}
.mt-cart-checkout-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px -10px var(--gold-glow),0 4px 14px -6px rgba(0,0,0,.5);
}

/* --- 10. Cart drawer: mini-cart elegance --- */
.mt-cart-item{
  transition:background-color 220ms var(--ease-prem),opacity 220ms var(--ease-prem),transform 220ms var(--ease-prem);
}
.mt-qbtn{
  border-radius:8px;
  transition:background-color 220ms var(--ease-prem),transform 220ms var(--ease-prem);
}
.mt-qbtn:hover{transform:scale(1.06)}

/* --- 11. Checkout modal: premium inputs --- */
.form-input,.form-select{
  transition:border-color 220ms var(--ease-prem),box-shadow 220ms var(--ease-prem),background-color 220ms var(--ease-prem);
}
.form-input:focus,.form-select:focus{
  box-shadow:0 0 0 3px var(--gold-soft);
  border-color:var(--gold);
}
.checkout-modal-content{
  animation:mtModalIn .26s var(--ease-prem);
}
@keyframes mtModalIn{
  from{opacity:0;transform:translateY(10px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* --- 12. Lightbox: smooth fade + scale entry --- */
.image-lightbox.open{
  animation:mtLbIn .26s var(--ease-prem);
}
.image-lightbox.open .lightbox-image{
  animation:mtLbImgIn .3s var(--ease-prem);
}
@keyframes mtLbIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes mtLbImgIn{
  from{opacity:0;transform:scale(.96)}
  to{opacity:1;transform:scale(1)}
}
.lightbox-close{
  transition:transform 220ms var(--ease-prem),background-color 220ms var(--ease-prem);
}
.lightbox-close:hover{transform:scale(1.08)}

/* --- 13. Mobile chrome: consistent motion language --- */
.mobile-sticky-cart-bar{
  transition:transform .3s var(--ease-prem),opacity .3s var(--ease-prem);
}
.mobile-sticky-cart-bar .mscb-cta{
  transition:filter 220ms var(--ease-prem);
}

/* --- 14. Reduced motion (a11y requirement) --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ======================================================
   FIND OUR SHOP — STATIC LOCATION IMAGE
   ====================================================== */
.shop-map-section{
  margin:4px 0;
}
.shop-map-inner{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  align-items:start;
}
.shop-map-heading{
  font-family:var(--font-d);
  font-size:18px;font-weight:700;color:var(--tx);
  margin:0;letter-spacing:.01em;
}
.shop-map-blurb{
  font-size:13px;color:var(--tx-s);
  line-height:1.7;margin:0;
}

/* --- static map image ------------------------------------------- */
.shop-map-figure{
  margin:0;
  border:1px solid var(--border);
  border-radius:var(--rp);
  overflow:hidden;
  background:var(--bg-e);
  line-height:0;                 /* kill the inline-image gap */
}
.shop-map-image{
  display:block;
  width:100%;
  height:auto;
  /* deliberately NOT a link — no cursor:pointer, no hover state */
}


.shop-map-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px}
.btn-map-primary,.btn-map-ghost{
  display:inline-flex;align-items:center;gap:7px;
  padding:11px 18px;border-radius:999px;
  font-size:13px;font-weight:700;letter-spacing:.02em;
  text-decoration:none;transition:transform var(--t1),background var(--t1),box-shadow var(--t1);
}
.btn-map-primary{
  background:var(--gold);color:#1a0e00;
  box-shadow:var(--sh-gold);
}
.btn-map-primary:hover{background:var(--gold-l);transform:translateY(-2px)}
.btn-map-ghost{
  background:transparent;color:var(--tx);
  border:1px solid var(--border);
}
.btn-map-ghost:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.shop-map-note{
  font-size:11.5px;color:var(--tx-m);
  line-height:1.65;margin:0;
}

/* --- responsive --- */
@media (max-width:560px){
  .shop-map-heading{font-size:16px}
  .shop-map-actions .btn-map-primary,
  .shop-map-actions .btn-map-ghost{flex:1 1 100%;justify-content:center}
}
/* Respect users who ask for less motion. */
@media (prefers-reduced-motion:reduce){
  .btn-map-primary:hover,.btn-map-ghost:hover{transform:none}
}
/* OpenStreetMap attribution — required by the ODbL / tile usage policy.
   Rendered in the page footer rather than under the map image. */
.footer-map-credit{
  font-size:10.5px;color:var(--tx-m);opacity:.85;
}
.footer-map-credit a{color:var(--tx-m);text-decoration:underline;text-underline-offset:2px}
.footer-map-credit a:hover{color:var(--gold)}

/* --- map thumbnail: mirrors the product-card image treatment --- */
.shop-map-thumb{
  position:relative;display:block;width:100%;
  padding:0;margin:0;border:0;background:none;
  cursor:zoom-in;font:inherit;color:inherit;
  overflow:hidden;
}
.shop-map-thumb:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;
}
.shop-map-thumb .shop-map-image{
  transition:transform .3s var(--ease-prem),filter .3s var(--ease-prem);
}
/* same rule the product cards and gift boxes use */
@media (hover:hover) and (pointer:fine){
  .shop-map-thumb:hover{
    box-shadow:0 6px 18px rgba(0,0,0,.35);
  }
  .shop-map-thumb:hover .shop-map-image{
    transform:scale(1.08);
    filter:brightness(1.05);
  }
}
.shop-map-zoom-hint{
  position:absolute;right:10px;bottom:10px;
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;line-height:1;
  background:rgba(9,9,13,.78);
  border:1px solid var(--border);
  color:var(--gold);
  pointer-events:none;
  transition:background .3s var(--ease-prem),color .3s var(--ease-prem);
}
.shop-map-thumb:hover .shop-map-zoom-hint{background:var(--gold);color:#1a0e00;border-color:var(--gold)}
@media (prefers-reduced-motion:reduce){
  .shop-map-thumb .shop-map-image,
  .shop-map-zoom-hint{transition:none}
}
/* ======================================================
   HEADER ICONS — share + theme toggle
   Inline SVGs, stroke:currentColor, so they inherit the
   button's text colour in both dark and light modes.
   ====================================================== */
.header-btn svg,
.hdr-call-btn svg,
.mh-btn svg{
  width:16px;height:16px;
  flex:0 0 auto;
  display:block;
}

/* --- theme toggle: sun <-> moon crossfade --- */
.theme-ico{
  position:relative;
  width:16px;height:16px;
  display:inline-block;
  flex:0 0 auto;
}
.theme-ico .ico-sun,
.theme-ico .ico-moon{
  position:absolute;inset:0;
  width:16px;height:16px;
  transition:opacity .28s ease,transform .38s cubic-bezier(.22,.8,.3,1);
}
.theme-ico .ico-moon{opacity:0;transform:rotate(-70deg) scale(.6)}
body:not(.light-mode) .theme-ico .ico-sun{opacity:1;transform:none}
body:not(.light-mode) .theme-ico .ico-moon{opacity:0;transform:rotate(-70deg) scale(.6)}
body.light-mode .theme-ico .ico-sun{opacity:0;transform:rotate(70deg) scale(.6)}
body.light-mode .theme-ico .ico-moon{opacity:1;transform:none}

/* --- share button: the nodes glyph lifts on hover --- */
.ico-share{
  transition:transform .28s cubic-bezier(.22,.8,.3,1),opacity .2s ease;
  transform-origin:center;
}
.hdr-share-btn:hover .ico-share{transform:translateY(-1px) scale(1.06)}
.hdr-share-btn:active .ico-share{transform:translateY(0) scale(.94)}

/* keep the label from squashing next to the new icons */
.hdr-share-btn,#themeToggle,.hdr-call-btn{
  display:inline-flex;align-items:center;gap:7px;
  white-space:nowrap;
}

/* Light mode: strokes need a touch more contrast */
body.light-mode .theme-ico .ico-moon,
body.light-mode .ico-share{color:var(--gold)}

@media (prefers-reduced-motion:reduce){
  .theme-ico .ico-sun,.theme-ico .ico-moon,.ico-share{transition:none}
}
/* ======================================================
   SHARE BUTTON — fireworks-yellow text, readable in BOTH themes
   The base rule hard-codes a pale cream (#ffe7a0) with !important,
   which is invisible against the near-white light header. Override
   the TEXT colour only; leave background/border untouched.
   ====================================================== */
#shareCatalogBtn,
#shareCatalogBtn:hover{
  background:linear-gradient(135deg,rgba(244,201,93,.16),rgba(244,201,93,.07))!important;
  border-color:rgba(244,201,93,.42)!important;
  color:#ffe7a0!important;                 /* fireworks yellow on dark */
  box-shadow:0 7px 24px rgba(244,201,93,.08),inset 0 1px 0 rgba(255,255,255,.08);
}
body.light-mode #shareCatalogBtn,
body.light-mode #shareCatalogBtn:hover{
  color:#a86b12!important;                 /* deeper fireworks amber on light */
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}
/* ======================================================
   SHARE MENU - explicit per-app targets
   The Web Share API opens the OS sheet on phones. Most
   desktop browsers have no navigator.share, so this menu
   is the fallback that still reaches the same apps.
   ====================================================== */
.hdr-share-wrap{position:relative;display:inline-flex}

.share-menu{
  /* Fixed, not absolute: this menu lives at body level so both the desktop
     header button and the mobile menu button can open it. JS sets left/top
     from the button's measured position, and clamps it to the viewport. */
  position:fixed;
  z-index:120;
  min-width:214px;
  max-width:calc(100vw - 24px);
  padding:6px;
  background:var(--bg-c);
  border:1px solid var(--border-m);
  border-radius:var(--r3);
  box-shadow:var(--sh2);
  font-family:var(--font-b);
  transform-origin:top right;
  animation:shareMenuIn .18s cubic-bezier(.22,.8,.3,1);
}
.share-menu[hidden]{display:none}
@keyframes shareMenuIn{
  from{opacity:0;transform:translateY(-6px) scale(.97)}
  to{opacity:1;transform:none}
}
.share-menu-head{
  padding:7px 10px 8px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--tx-s);
  border-bottom:1px solid var(--border);
  margin-bottom:5px;
}
.share-opt{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:9px 10px;
  border:0;
  border-radius:var(--r2);
  background:transparent;
  color:var(--tx);
  font-family:var(--font-b);
  font-size:13px;
  font-weight:600;
  text-align:left;
  cursor:pointer;
  transition:background var(--t1),color var(--t1);
}
.share-opt:hover,.share-opt:focus-visible{
  background:var(--bg-h);
  color:var(--gold-l);
  outline:none;
}
.share-opt:focus-visible{box-shadow:inset 0 0 0 2px var(--gold)}
.share-ico{
  flex:0 0 auto;
  width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r2);
  font-size:13px;line-height:1;
  color:var(--si,var(--gold));
  background:color-mix(in srgb, var(--si,#c8903a) 15%, transparent);
}
/* Brand glyphs are inline SVG so they inherit currentColor and stay crisp
   at any size, unlike the emoji they replaced. */
.share-ico svg{
  width:15px;height:15px;
  display:block;
  fill:currentColor;
}
.share-menu-sep{
  height:1px;
  margin:5px 8px;
  background:var(--border);
}

/* Light mode: raise the surface contrast, it sits on a pale header */
body.light-mode .share-menu{
  background:#ffffff;
  border-color:rgba(0,0,0,.12);
  box-shadow:0 12px 34px rgba(0,0,0,.16);
}
body.light-mode .share-menu-head{color:#6b6560}
body.light-mode .share-opt{color:#2a2724}
body.light-mode .share-opt:hover{background:#f5f2ee;color:#8a5a10}
body.light-mode .share-menu-sep{background:rgba(0,0,0,.09)}
/* X's glyph is near-white on the dark chip, so flip it in light mode */
body.light-mode .share-ico[style*="e7e9ea"]{color:#0f1419}

@media (prefers-reduced-motion:reduce){
  .share-menu{animation:none}
}


/* --- mobile menu: icon glyphs are now inline SVG, not emoji --- */
.mm-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;flex:0 0 24px;
}
.mm-ico svg{
  width:17px;height:17px;
  display:block;
  fill:currentColor;
}
/* --- "More Apps" row: the broadest option, sits above the direct links --- */
.share-opt-more{
  margin-bottom:5px;
  padding-bottom:11px;
  border-bottom:1px solid var(--border);
  border-radius:var(--r2) var(--r2) 0 0;
  color:var(--gold-l);
}
.share-opt-more:hover,.share-opt-more:focus-visible{color:var(--gold-xl)}
.share-opt-more[hidden]{display:none}
body.light-mode .share-opt-more{color:#8a5a10}
/* ======================================================
   FAIL-CLOSED VALIDATION STATE
   Shown in the enquiry modal when /api/validate-order is
   unreachable or returns an unusable response. Totals stay
   visible so the customer can still prepare an enquiry, but
   they are explicitly labelled as unverified estimates.
   ====================================================== */
.validation-unavailable{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0 0 14px;
  padding:12px 14px;
  border:1px solid rgba(220,120,60,.55);
  border-left-width:4px;
  border-radius:var(--r2);
  background:rgba(220,120,60,.12);
  color:#e8b98a;
  font-family:var(--font-b);
}
.validation-unavailable[hidden]{display:none}
.validation-unavailable .vw-icon{font-size:16px;line-height:1.4;flex:0 0 auto}
.validation-unavailable .vw-text{display:flex;flex-direction:column;gap:3px}
.validation-unavailable strong{font-size:13px;font-weight:700;color:#ffc48f}
.validation-unavailable span[data-vw-body]{font-size:12px;line-height:1.55}
.validation-unavailable em{font-style:italic;font-weight:700}
/* Unverified state: dim + mark the total so it can't be mistaken for
   a server-confirmed figure. */
.checkout-summary-banner.is-unverified{
  opacity:.72;
  border-style:dashed;
}
.checkout-summary-banner.is-unverified .item-stat-val{
  color:#ffc48f;
}
body.light-mode .validation-unavailable{
  background:#fff4e8;
  border-color:#d9822b;
  color:#6b3a00;
}
body.light-mode .validation-unavailable strong{color:#8a4b00}
body.light-mode .checkout-summary-banner.is-unverified .item-stat-val{color:#8a4b00}
@media (prefers-reduced-motion:reduce){
  .checkout-summary-banner.is-unverified{transition:none}
}
/* Provisional invoice reference notice — shown only when the server could not
   allocate a unique number. Uses the same tone as the validation warning. */
.invoice-provisional-note{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:0 0 10px;
  padding:10px 12px;
  border:1px solid rgba(220,120,60,.5);
  border-left-width:4px;
  border-radius:var(--r2);
  background:rgba(220,120,60,.1);
  color:#e8b98a;
  font-family:var(--font-b);
  font-size:12px;
  line-height:1.55;
}
.invoice-provisional-note[hidden]{display:none}
body.light-mode .invoice-provisional-note{
  background:#fff4e8;
  border-color:#d9822b;
  color:#6b3a00;
}