/* ============================================================
   VIJAYAPURA CRACKERS — "Namma Vijayapura" premium night-fireworks theme
   Tokens
   ============================================================ */
:root{
  --ink:        #0a0912;
  --ink-2:      #131020;
  --ink-3:      #1b1729;
  --line:       rgba(212,169,74,0.16);
  --line-soft:  rgba(243,237,227,0.08);
  --gold:       #d4a94a;
  --gold-soft:  #eccf8c;
  --ember:      #e4572e;
  --ember-soft: #ff8a5c;
  --ivory:      #f3ede3;
  --muted:      #9c93a8;
  --muted-2:    #6b6379;
  --good:       #6fae7c;
  --whatsapp:   #25d366;

  --radius-lg:  20px;
  --radius-md:  14px;
  --radius-sm:  9px;

  --display: 'Cinzel', serif;
  --script:  'Cormorant Garamond', serif;
  --sans:    'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

  --shadow-1: 0 1px 0 rgba(243,237,227,0.04) inset, 0 12px 30px -14px rgba(0,0,0,0.65);
  --shadow-2: 0 24px 60px -20px rgba(0,0,0,0.75);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ============================================================
   Scrollbars — hidden everywhere (page scroll, cart drawer,
   filter sheet). Scrolling itself still works fine via touch,
   trackpad or wheel; this just removes the default OS bar.
   ============================================================ */
html{
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* old Edge/IE */
}
*::-webkit-scrollbar{
  width: 0;
  height: 0;
}

/* "More below" cue for the cart drawer's item list. Lives as its
   own overlay element OUTSIDE the scrolling .cart-drawer-body (see
   .cart-drawer-scroll below) rather than a sticky pseudo-element
   glued to the scroll content — the old approach reserved space
   inside the scrollable area itself, which showed up as an odd
   extra offset/gap at the end of the list. This overlay never
   touches scroll height, just a bottom glow + gentle bounce arrow
   toggled by cart-drawer.js when there's more to scroll to. */
.cart-drawer-scroll{
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
}
.cart-drawer-scroll .cart-drawer-body{ flex: 1; }
.drawer-scroll-cue{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6px;
  border: none;
  background: radial-gradient(60% 100% at 50% 100%, rgba(212,169,74,0.28), transparent 70%);
  cursor: pointer;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.25s ease;
}
.drawer-scroll-cue svg{
  width: 16px;
  height: 16px;
  color: var(--gold-soft);
  animation: scrollCueBounce 1.6s ease-in-out infinite;
}
.cart-drawer-body.at-bottom + .drawer-scroll-cue{ opacity: 0; pointer-events: none; }
@keyframes scrollCueBounce{
  0%, 100%{ transform: translateY(0); opacity: 0.55; }
  50%{ transform: translateY(4px); opacity: 1; }
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background:
    radial-gradient(1400px 500px at 50% 0%, rgba(212,169,74,0.035), transparent 62%),
    radial-gradient(900px 700px at 100% 55%, rgba(228,87,46,0.028), transparent 60%),
    radial-gradient(900px 700px at 0% 70%, rgba(212,169,74,0.028), transparent 60%),
    var(--ink);
  background-attachment: fixed;
  color: var(--ivory);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 84px; /* room for sticky cart bar */
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font-family: inherit; }
::selection{ background: var(--gold); color: var(--ink); }

.container{
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 18px;
}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--gold-soft);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10,9,18,0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height: 66px;
  gap: 12px;
}
/* Horizontal overflow used to be clipped on html/body, which silently
   breaks position:sticky on the header in several browsers (notably
   Safari) — any ancestor with overflow other than visible stops being
   a no-op for sticky. Clipping now happens on .page-clip instead, a
   wrapper that sits *below* the header, so the header's sticky
   context is the real viewport again. */
.page-clip{ overflow-x: hidden; }

/* ============================================================
   Category pill bar — sticky right under the header, products
   page only. Replaces the old filter FAB + bottom sheet with a
   single always-visible, single-tap row (see products.html).
   Sibling of .site-header (not nested inside .page-clip) so it
   gets the same real-viewport sticky behaviour the header relies
   on, for the same reason noted above.
   ============================================================ */
.category-pillbar{
  position: sticky;
  top: 67px; /* header height (66px) + its 1px border — the festive
                ticker above it is no longer sticky, so this bar now
                pins directly under the header, same offset the
                ticker used to sit at. */
  z-index: 48;
  background: rgba(10,9,18,0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
}
.category-pillbar-inner{
  display: flex;
  gap: 8px;
  padding: 10px 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Left/right edge fade + glowing arrow — hints there are more
   categories to scroll to in that direction. Sit outside
   .category-pillbar-inner (so they don't scroll away with the
   chips), each toggled independently by JS depending on whether
   the row overflows and which end it's currently scrolled to
   (see updatePillbarFade). Base rules here are shared by both
   sides; .pillbar-fade-left below flips the side-specific bits. */
.category-pillbar-fade{
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px;
  background: linear-gradient(to right, transparent, rgba(10,9,18,0.92) 60%);
  border: none;
  font: inherit;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.category-pillbar-fade.pillbar-fade-left{
  right: auto; left: 0;
  justify-content: flex-start;
  padding-right: 0;
  padding-left: 6px;
  background: linear-gradient(to left, transparent, rgba(10,9,18,0.92) 60%);
}
.category-pillbar-fade.show{ opacity: 1; pointer-events: auto; }
.category-pillbar-fade svg{
  width: 15px;
  height: 15px;
  color: var(--gold-soft);
  filter: drop-shadow(0 0 6px rgba(212,169,74,0.7));
  animation: pillbarHint 1.4s ease-in-out infinite;
}
.category-pillbar-fade.pillbar-fade-left svg{
  animation-name: pillbarHintLeft;
}
@keyframes pillbarHint{
  0%,100%{ transform: translateX(0); opacity: 0.55; }
  50%{ transform: translateX(3px); opacity: 1; }
}
@keyframes pillbarHintLeft{
  0%,100%{ transform: translateX(0); opacity: 0.55; }
  50%{ transform: translateX(-3px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
  .category-pillbar-fade svg{ animation: none; }
}
.brand{
  display:flex;
  flex-direction:column;
  line-height:1;
  gap:4px;
  text-decoration:none;
  transition: opacity 0.18s ease;
}
.brand:hover{ opacity: 0.85; }
.brand-mark{
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: 0.14em;
  color: var(--gold-soft);
  text-transform: uppercase;
  font-weight: 600;
}
.brand-tag{
  font-family: var(--script);
  font-style: italic;
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.header-actions{
  display:flex;
  align-items:center;
  gap: 14px;
}
.icon-btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ink-2);
  border: 1px solid var(--line);
  color: var(--ivory);
  cursor:pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.icon-btn:hover{ border-color: var(--gold); background: var(--ink-3); }
.icon-btn:active{ transform: scale(0.9); }
.icon-btn svg{ width: 19px; height: 19px; }

/* Catalogue download — built from the site's own vocabulary rather
   than a bolted-on badge: same thin gold hairline + translucent
   wash as .eyebrow, same gold-gradient text shimmer as the festive
   ticker (tickerShine, defined further down). Reads as a quiet,
   premium detail instead of a shouting CTA. */
.catalogue-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 42px;
  gap: 7px;
  padding: 0 15px 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(212,169,74,0.06);
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.12s ease;
}
.catalogue-btn:hover{ border-color: var(--gold); background: rgba(212,169,74,0.12); }
.catalogue-btn:active{ transform: scale(0.94); }
.catalogue-btn svg{
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--gold-soft);
  filter: drop-shadow(0 0 3px rgba(212,169,74,0.45));
}
.catalogue-btn-icon-wrap{
  position: relative;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.catalogue-btn-icon-wrap svg{ width: 16px; height: 16px; }

.catalogue-btn-spinner{
  display: none;
  position: absolute;
  inset: 0;
  border: 2px solid rgba(212,169,74,0.25);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: catalogueSpin 0.8s linear infinite;
}
@keyframes catalogueSpin{ to{ transform: rotate(360deg); } }

.catalogue-btn.is-loading{ opacity: 0.7; pointer-events: none; }
.catalogue-btn.is-loading .catalogue-btn-icon{ visibility: hidden; }
.catalogue-btn.is-loading .catalogue-btn-spinner{ display: block; }
.catalogue-btn-label{
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(90deg, var(--gold-soft), var(--ivory) 35%, var(--gold) 55%, var(--gold-soft));
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: tickerShine 5s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .catalogue-btn-label{ animation: tickerShine 5s linear infinite !important; }
}
@media (max-width: 420px){
  .catalogue-btn{ width: 42px; height: 42px; padding: 0; gap: 0; border-radius: 50%; }
  .catalogue-btn-label{ display: none; }
}
.lang-toggle-btn{
  width: auto;
  padding: 0 12px;
  border-radius: 20px;
  font-family: var(--sans, inherit);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.cart-badge{
  position:absolute;
  top: -4px;
  right: -4px;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--ember);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 0 0 2px var(--ink);
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1);
}
.cart-badge.bump{ animation: badgeBump 0.4s ease; }
@keyframes badgeBump{ 0%{transform:scale(1);} 35%{transform:scale(1.5);} 100%{transform:scale(1);} }
.cart-badge[data-empty="true"]{ display:none; }

/* ============================================================
   Hero — night sky, drifting embers, radial firework glow
   ============================================================ */
.hero{
  position: relative;
  padding: 56px 0 44px;
  overflow: hidden;
  background:
    radial-gradient(560px 360px at 18% -8%, rgba(228,87,46,0.20), transparent 62%),
    radial-gradient(620px 420px at 88% 4%, rgba(212,169,74,0.16), transparent 60%),
    radial-gradient(900px 600px at 50% 120%, rgba(212,169,74,0.08), transparent 70%),
    linear-gradient(180deg, #0a0912 0%, #0d0b17 60%, #0a0912 100%);
  border-bottom: 1px solid var(--line-soft);
}
.embers{ position:absolute; inset:0; pointer-events:none; }
.ember-dot{
  position:absolute;
  bottom:-10px;
  width: 3px; height:3px;
  border-radius:50%;
  background: var(--gold-soft);
  box-shadow: 0 0 6px 1px rgba(236,201,140,0.8);
  opacity:0;
  animation: emberRise linear infinite;
}
@keyframes emberRise{
  0%{ transform: translateY(0) translateX(0); opacity:0; }
  8%{ opacity: 0.9; }
  85%{ opacity: 0.5; }
  100%{ transform: translateY(-380px) translateX(var(--drift,14px)); opacity:0; }
}
.hero-inner{ position:relative; z-index:1; text-align:center; max-width: 640px; margin:0 auto; }
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-soft);
  border: 1px solid var(--line);
  background: rgba(212,169,74,0.06);
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
  white-space: nowrap;
  max-width: 100%;
}
.eyebrow .dot{ width:5px; height:5px; border-radius:50%; background: var(--ember); box-shadow: 0 0 6px 1px var(--ember); flex-shrink:0; }
@media (max-width: 420px){
  .eyebrow{ font-size: 9.5px; letter-spacing: 0.07em; gap: 6px; padding: 6px 10px; }
}
.hero h1{
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(30px, 7vw, 46px);
  line-height: 1.18;
  margin: 0 0 14px;
  color: var(--ivory);
  letter-spacing: 0.01em;
}
.hero h1 em{
  font-style: normal;
  background: linear-gradient(100deg, var(--gold-soft), var(--gold) 45%, var(--ember-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-kannada{
  font-family: var(--script);
  font-style: italic;
  font-size: 19px;
  color: var(--muted);
  margin: 0 0 26px;
}
.hero p.sub{
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 30px;
  padding: 0 6px;
}
.hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

.btn{
  --btn-fg: var(--ink);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
  text-decoration:none;
  white-space:nowrap;
}
.btn-primary{
  background: linear-gradient(100deg, var(--gold-soft), var(--gold));
  color: var(--ink);
  box-shadow: 0 10px 26px -10px rgba(212,169,74,0.55);
}
.btn-primary:hover{ filter: brightness(1.06); }
.btn-primary:active{ transform: scale(0.96); }
.btn-primary.loading{ cursor: not-allowed; filter: brightness(0.97); }
.btn-spinner{
  width: 15px; height: 15px;
  border: 2px solid rgba(10,9,18,0.3);
  border-top-color: var(--ink);
  border-radius: 50%;
  display: inline-block;
  animation: btnSpin 0.6s linear infinite;
}
@keyframes btnSpin{ to{ transform: rotate(360deg); } }
.btn-ghost{
  background: transparent;
  border-color: var(--line);
  color: var(--ivory);
}
.btn-ghost:hover{ border-color: var(--gold); color: var(--gold-soft); }
.btn-ghost:active{ transform: scale(0.96); }

.trust-row{
  display:flex;
  flex-wrap:wrap;
  gap: 18px;
  justify-content:center;
  margin-top: 30px;
  font-size: 11.5px;
  color: var(--muted-2);
  letter-spacing: 0.02em;
}
.trust-row span{ display:flex; align-items:center; gap:6px; }
.trust-row svg{ width:14px; height:14px; color: var(--gold); flex-shrink:0; }

/* ============================================================
   Category chips
   ============================================================ */
.chip{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.015em;
  padding: 9px 17px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(243,237,227,0.045), rgba(243,237,227,0.01));
  color: var(--muted);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.chip:hover{
  color: var(--ivory);
  border-color: var(--gold-soft);
  background: linear-gradient(180deg, rgba(228,87,46,0.10), rgba(212,169,74,0.05));
  transform: translateY(-1px);
}
.chip.active{
  background: linear-gradient(115deg, var(--gold-soft), var(--gold) 55%, #e4572e);
  color: var(--ink);
  font-weight: 700;
  border-color: transparent;
  box-shadow: 0 5px 16px -4px rgba(228,87,46,0.55), inset 0 1px 0 rgba(255,255,255,0.35);
  transform: translateY(0);
}
.chip.active:hover{ transform: translateY(0); }

/* ============================================================
   Section headings
   ============================================================ */
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 18px;
  padding: 26px 18px 4px;
  max-width: 1320px;
  margin: 0 auto;
}
.section-head h2{
  font-family: var(--display);
  font-size: 23px;
  font-weight: 600;
  color: var(--gold-soft);
  margin: 0 0 4px;
  letter-spacing: 0.02em;
}
.section-head p{ margin:0; font-size: 12.5px; color: var(--muted-2); }
.head-rule{
  flex: 1;
  height: 1px;
  min-width: 32px;
  align-self: center;
  background: linear-gradient(90deg, transparent, var(--line) 30%, var(--line) 70%, transparent);
}
@media (max-width: 560px){ .head-rule{ display:none; } }
.result-count{ font-size: 12px; color: var(--muted-2); white-space:nowrap; }

@media (max-width: 560px){
  .section-head{ padding-bottom: 2px; }
}

/* ============================================================
   Sticky search bar — products page. Sits pinned right under the
   category pill bar for the whole scroll of the grid, so search
   is always one tap away instead of needing a scroll back to the
   top first. The 121px offset is the header (67px, itself already
   hardcoded above for the same reason) plus the category pill bar's
   own rendered height (~54px) — update both together if either
   bar's height changes.
   ============================================================ */
.search-sticky-bar{
  position: sticky;
  top: 121px;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: rgba(10,9,18,0.85);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
}
.search-sticky-bar .search-box{
  flex: 1;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  border: 1px solid rgba(212,169,74,0.4);
  background: linear-gradient(180deg, #1f1a30, #191527);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 18px -8px rgba(212,169,74,0.5);
}
.search-sticky-bar .search-box:hover{ background: linear-gradient(180deg, #241e38, #1d1830); }
.search-sticky-bar .search-box:focus-within{
  border-color: var(--gold-soft);
  background: linear-gradient(180deg, #241e38, #1d1830);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 22px -4px rgba(212,169,74,0.65);
}
.search-sticky-bar .search-box svg{
  width: 26px;
  height: 26px;
  padding: 6px;
  border-radius: 50%;
  background: rgba(212,169,74,0.14);
  color: var(--gold-soft);
}
.search-sticky-bar .result-count{ flex-shrink: 0; }

/* ============================================================
   Product grid & cards
   ============================================================ */
.product-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding: 14px 18px 30px;
  max-width: 1320px;
  margin: 0 auto;
}
@media (min-width: 640px){ .product-grid{ grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 16px 24px 40px; } }
@media (min-width: 960px){ .product-grid{ grid-template-columns: repeat(4, 1fr); } }

/* ============================================================
   Category-grouped sections — Collection page, "All" view
   (see groupedSectionsHtml in products.html). #productGrid keeps
   its own .product-grid class from the static markup for the
   flat/single-category case; this ID-scoped override just turns
   that off when it's instead holding a stack of .cat-section
   blocks, each with its own nested .product-grid doing the real
   grid layout. The ID selector's specificity wins over the plain
   .product-grid rules above at every breakpoint, so no !important
   is needed.
   ============================================================ */
#productGrid.is-grouped{
  display: block;
  grid-template-columns: none;
  gap: 0;
  padding: 0;
  max-width: none;
  margin: 0;
}
.cat-section + .cat-section{ margin-top: 6px; }
.cat-section-head{
  display:flex;
  align-items:baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 22px 18px 0;
  max-width: 1320px;
  margin: 0 auto;
}
@media (min-width: 640px){ .cat-section-head{ padding: 26px 24px 0; } }
.cat-section-head h3{
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  color: var(--gold-soft);
  margin: 0;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.cat-section-count{ font-size: 12.5px; color: var(--muted-2); white-space:nowrap; }

.card{
  position: relative;
  background: linear-gradient(180deg, var(--ink-2), var(--ink-3));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  display:flex;
  flex-direction:column;
}
.card:hover{
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: var(--shadow-2), 0 0 0 1px rgba(212,169,74,0.4), 0 0 26px rgba(212,169,74,0.32);
}

.card-visual{
  position:relative;
  aspect-ratio: 4 / 3.1;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.card-visual svg{ width: 44%; height: 44%; position:relative; z-index:2; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.45)); }
.card-visual::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.10), transparent 60%);
  z-index:1;
}
.burst{ position:absolute; inset:0; opacity:0.55; }

.tag{
  position:absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.tag-popular{ background: rgba(228,87,46,0.85); color:#fff; }
.tag-best{    background: rgba(111,174,124,0.88); color:#0a0912; }
.tag-new{     background: rgba(243,237,227,0.9); color:#0a0912; }
.tag-premium{ background: linear-gradient(100deg, var(--gold-soft), var(--gold)); color:#0a0912; }

/* Text-row twin of .tag, for the mobile horizontal card layout —
   see .card-meta-row below and the mobile media query further
   down. Hidden by default (desktop keeps the badge on the photo);
   the mobile breakpoint swaps which one shows. Reuses the same
   .tag-popular/.tag-best/.tag-new/.tag-premium colour classes
   above (they're plain background/color rules, not scoped to
   .tag), just without the absolute-positioned, photo-overlay
   styling that .tag carries. */
.card-meta-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tag-inline{
  display: none;
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
}

.card-body{
  padding: 12px 13px 13px;
  display:flex;
  flex-direction:column;
  gap: 6px;
  flex:1;
}
.card-cat{ font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); }
.card-name{ font-family: var(--display); font-size: 14px; font-weight: 600; color: var(--ivory); line-height:1.35; }
.card-desc{ font-size: 11.5px; color: var(--muted); line-height:1.5; flex:1; }
.card-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap: wrap;
  margin-top: 6px;
  row-gap: 8px;
  column-gap: 8px;
}
.card-price{ display:flex; flex-direction:column; line-height:1.1; min-width:0; }
.card-price .price{ font-family: var(--sans); font-weight: 800; font-size: 15px; color: var(--gold-soft); }
.card-price .unit{ font-size: 10px; color: var(--muted-2); }
.control-slot{ flex-shrink: 0; margin-left: auto; }

/* Add-to-cart control */
.add-btn{
  position: relative;
  overflow: visible;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold-soft);
  font-size: 12px;
  font-weight: 700;
  cursor:pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.add-btn:hover{ background: rgba(212,169,74,0.12); }
.add-btn:active{ transform: scale(0.94); }

.qty-stepper{
  display:flex;
  align-items:center;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(100deg, var(--gold-soft), var(--gold));
  overflow:hidden;
}
.qty-stepper button{
  width: 30px; height: 100%;
  border:none; background:transparent;
  color: var(--ink);
  font-size: 15px; font-weight:800;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background 0.15s ease;
}
.qty-stepper button:active{ background: rgba(10,9,18,0.12); }
.qty-stepper .qty-val{
  min-width: 22px;
  text-align:center;
  font-weight: 800;
  color: var(--ink);
  font-size: 13px;
  display: inline-block;
}
.qty-stepper .qty-val.pulse{ animation: qtyPulse 0.32s cubic-bezier(.34,1.56,.64,1); }
@keyframes qtyPulse{
  0%{ transform: scale(1); }
  45%{ transform: scale(1.35); }
  100%{ transform: scale(1); }
}

/* Morph-in when the Add button first turns into a qty stepper —
   so that first tap isn't a hard jump-cut from one control to
   the other. */
.qty-stepper.morph-in{ animation: stepperMorphIn 0.32s cubic-bezier(.34,1.56,.64,1); }
@keyframes stepperMorphIn{
  0%{ transform: scale(0.6); opacity: 0; }
  100%{ transform: scale(1); opacity: 1; }
}

/* ============================================================
   Phone layout — horizontal product cards, one per row.
   Below 640px the 2-column grid of tall vertical cards forced a
   lot of scrolling for very little info per screen. Cards go
   single-column + horizontal (photo left, details right) so each
   row is compact and the list reads like a list, not a wall of
   tiles. Scoped to `.product-grid .card` only, so the home-page
   featured slider (`.slider-row .card`, a fixed-width horizontal-
   scroll carousel) is left untouched.
   ============================================================ */
@media (max-width: 639px){
  .product-grid{
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 14px 26px;
  }
  .product-grid .card{
    flex-direction: row;
    align-items: stretch;
  }
  .product-grid .card-visual{
    flex: 0 0 104px;
    width: 104px;
    aspect-ratio: 1 / 1;
  }
  .product-grid .card-visual svg{ width: 56%; height: 56%; }
  .product-grid .card-body{
    padding: 9px 12px;
    gap: 2px;
    justify-content: center; /* was relying on default browser margins to fill the row; now that those are stripped below, center the tighter block instead of pinning it to the top */
    min-width: 0; /* lets long names truncate instead of overflowing the row */
  }
  /* h3/p carry their own default top+bottom margin in every browser,
     which was stacking on top of .card-body's flex gap and reading
     as "too much space" between category, name, description and
     price. Stripping it here (mobile only — desktop's taller card
     had room to spare and wasn't the complaint). */
  .product-grid .card-name{
    margin: 0;
    font-size: 13.5px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .product-grid .card-desc{
    margin: 0;
    font-size: 11px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .product-grid .card-foot{
    margin-top: 5px;
    flex-wrap: nowrap;
  }
  /* Category "Premium/Popular/Best/New" tag moves off the photo and
     into the text row (see .card-meta-row / .tag-inline above) —
     stacking it with the discount badge on a 104px-wide photo read
     cluttered. The discount badge (a plain % figure, no long label)
     stays on the photo alone, back in its normal top-left corner. */
  .product-grid .card-visual .tag{ display: none; }
  .card-meta-row .tag-inline{ display: inline-flex; }
  .product-grid .discount-badge{ top: 6px; left: 6px; right: auto; padding: 3px 6px; font-size: 8.5px; }
  .product-grid .add-btn{ height: 30px; padding: 0 11px; font-size: 11px; }
  .product-grid .qty-stepper{ height: 30px; }
  .product-grid .qty-stepper button{ width: 26px; }
}

/* spark burst micro-interaction */
.spark-wrap{ position:absolute; inset:0; pointer-events:none; }
.spark{
  position:absolute;
  top:50%; left:50%;
  width:4px; height:4px;
  border-radius:50%;
  background: var(--gold-soft);
  box-shadow: 0 0 6px 1px var(--gold-soft);
  animation: sparkOut 0.55s ease-out forwards;
}
@keyframes sparkOut{
  0%{ transform: translate(-50%,-50%) scale(1); opacity:1; }
  100%{ transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(0); opacity:0; }
}

/* ============================================================
   About Us
   ============================================================ */
.about-section{
  padding: 40px 0 10px;
}
.about-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items:center;
}
@media (min-width: 760px){ .about-grid{ grid-template-columns: 1.1fr 0.9fr; gap: 40px; } }
.about-copy p{
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.85;
  margin: 0 0 18px;
}
.about-stats{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 6px;
}
.about-stat{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--gold-soft);
  background: rgba(212,169,74,0.05);
}
.about-stat svg{ width: 14px; height: 14px; flex-shrink:0; }
.about-visual{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Soft ambient glow behind the artwork instead of a hard-edged card —
   the old bordered box read as a second frame mismatched against the
   illustration's own edges once the image filled most of it. */
.about-visual::before{
  content: "";
  position: absolute;
  inset: 6%;
  background:
    radial-gradient(60% 60% at 25% 20%, rgba(228,87,46,0.28), transparent 60%),
    radial-gradient(60% 60% at 80% 85%, rgba(212,169,74,0.3), transparent 60%);
  filter: blur(36px);
  animation: aboutGlowPulse 4.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.about-visual-frame{
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* Slow diagonal shine — same technique as .btn-shine, stretched out
   and softened for an "unveiling a badge" feel rather than a button
   hover cue. Clipped to the frame so it tracks the image's own
   corners instead of a wider outer box. */
.about-visual-frame::after{
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 35%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.16), transparent);
  transform: skewX(-20deg);
  animation: aboutShine 5.5s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
}
.about-visual-img{
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,0.5));
  animation: aboutBadgeFloat 5s ease-in-out infinite;
}
@keyframes aboutGlowPulse{
  0%, 100%{ opacity: 0.7; }
  50%{ opacity: 1; }
}
@keyframes aboutBadgeFloat{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}
@keyframes aboutShine{
  0%{ left: -60%; }
  45%{ left: 130%; }
  100%{ left: 130%; }
}
@media (prefers-reduced-motion: reduce){
  .about-visual::before,
  .about-visual-frame::after,
  .about-visual-img{ animation: none; }
}

/* ============================================================
   Safety
   ============================================================ */
.safety-section{ padding: 10px 0 8px; }
.safety-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 14px 18px 6px;
  max-width: 1320px;
  margin: 0 auto;
}
@media (min-width: 640px){ .safety-grid{ grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 16px 24px 6px; } }
.safety-card{
  display:flex;
  flex-direction:column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--ink-2);
}
.safety-card .s-icon{
  width: 32px; height: 32px;
  border-radius: 9px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(228,87,46,0.1);
}
.safety-card .s-icon svg{ width: 17px; height: 17px; color: var(--ember-soft); }
.safety-card h4{ font-family: var(--display); font-size: 13px; font-weight: 600; color: var(--ivory); margin: 0; }
.safety-card p{ font-size: 11.5px; color: var(--muted); line-height: 1.6; margin: 0; }

/* ============================================================
   Contact
   ============================================================ */
.contact-section{ padding: 12px 0 8px; }
.contact-card{
  display:grid;
  grid-template-columns: 1fr;
  gap: 22px;
  padding: 24px;
  margin: 0 18px;
  max-width: calc(1320px - 36px);
  margin-left:auto; margin-right:auto;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, var(--ink-2), var(--ink-3));
}
@media (min-width: 760px){ .contact-card{ grid-template-columns: 1.1fr 0.9fr; padding: 30px; } }
.contact-info dl{ margin: 0; display:flex; flex-direction:column; gap: 14px; }
.contact-info dt{ font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-2); margin-bottom: 3px; }
.contact-info dd{ margin: 0; font-size: 13.5px; color: var(--ivory); line-height: 1.6; }
.contact-info .license-line{ font-size: 11px; color: var(--muted-2); margin-top: 4px; }
.contact-map{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 220px;
  border: 1px solid var(--line-soft);
}
.contact-map iframe{
  width: 100%;
  height: 100%;
  min-height: 220px;
  display: block;
  border: 0;
  filter: invert(92%) hue-rotate(180deg) brightness(0.95) contrast(0.88);
  background: var(--ink-2);
}
.contact-map-open{
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 999px;
  background: linear-gradient(100deg, var(--gold-soft), var(--gold));
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-2);
  transition: transform 0.18s ease;
}
.contact-map-open:hover{ transform: translateY(-2px); }
.contact-map-open svg{ width: 14px; height: 14px; flex-shrink: 0; }
@media (min-width: 760px){ .contact-map{ min-height: 100%; } }

.legal-notice{
  max-width: 720px;
  margin: 0 auto;
  padding: 18px 22px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  text-align: center;
}
.legal-notice p{
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--muted-2);
  margin: 0;
}
.legal-notice strong{ color: var(--muted); font-weight: 600; }

.site-footer{
  border-top: 1px solid var(--line-soft);
  padding: 34px 18px 40px;
  text-align:center;
  color: var(--muted-2);
  font-size: 12px;
  line-height: 1.9;
}
.site-footer .footer-brand{ font-family: var(--display); color: var(--gold-soft); font-size: 14px; letter-spacing:0.06em; }
.site-footer .kannada{ font-family: var(--script); font-style: italic; color: var(--muted); font-size: 13px; }
.footer-links{
  display:flex;
  justify-content:center;
  gap: 18px;
  flex-wrap:wrap;
  margin: 14px 0 4px;
}
.footer-links a{
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.footer-links a:hover{ color: var(--gold-soft); border-color: var(--gold-soft); }

/* ============================================================
   Toast
   ============================================================ */
.toast{
  position: fixed;
  left: 50%;
  bottom: 100px;
  transform: translateX(-50%) translateY(10px);
  background: var(--ink-3);
  border: 1px solid var(--line);
  color: var(--ivory);
  font-size: 12.5px;
  padding: 10px 14px 10px 16px;
  border-radius: 999px;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 80;
  display:flex; align-items:center; gap:8px;
  max-width: min(420px, calc(100vw - 32px));
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.toast svg{ width:14px; height:14px; color: var(--good); flex-shrink:0; }
.toast [data-toast-text]{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.toast-action{
  margin-left: 2px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold-soft);
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, transform 0.12s ease;
}
.toast-action:hover{ background: rgba(212,169,74,0.14); }
.toast-action:active{ transform: scale(0.94); }

/* ============================================================
   Confetti (order-placed celebration)
   ============================================================ */
.confetti-field{
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  overflow: hidden;
}
.confetti-piece{
  position: absolute;
  top: -14px;
  opacity: 0.95;
  animation-name: confettiFall;
  animation-timing-function: cubic-bezier(.25,.46,.45,.94);
  animation-fill-mode: forwards;
}
@keyframes confettiFall{
  0%{ transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; }
  100%{ transform: translateY(100vh) translateX(var(--drift,0)) rotate(var(--rot,540deg)); opacity: 0; }
}

/* ============================================================
   Ambient firework pulses (restrained, looping, low opacity)
   ============================================================ */
.amb-burst{
  position: absolute;
  z-index: 0;
  width: 220px; height: 220px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  animation: ambPulse 7s ease-in-out infinite;
}
.amb-burst.gold{
  top: 6%; left: 8%;
  background: radial-gradient(circle, rgba(212,169,74,0.35), transparent 68%);
  animation-delay: 0.4s;
}
.amb-burst.ember{
  top: 14%; right: 6%;
  background: radial-gradient(circle, rgba(228,87,46,0.30), transparent 68%);
  animation-delay: 3.4s;
}
@keyframes ambPulse{
  0%{ transform: scale(0.6); opacity: 0; }
  18%{ opacity: 0.9; }
  45%{ transform: scale(1.15); opacity: 0.35; }
  70%{ opacity: 0; }
  100%{ transform: scale(0.6); opacity: 0; }
}

/* ============================================================
   Rangoli-dot divider — small decorative rhythm between sections
   ============================================================ */
.divider-diya{
  height: 26px;
  margin: 4px 0;
  opacity: 0.4;
  background-image: radial-gradient(circle, var(--gold) 1.4px, transparent 1.6px);
  background-size: 22px 100%;
  background-position: center;
  background-repeat: repeat-x;
}

/* ============================================================
   Trust strip — fills the gap between hero and catalogue
   ============================================================ */
.trust-strip{
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  padding: 34px 0 30px;
}
.trust-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 720px){ .trust-grid{ grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.trust-card{
  display:flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: rgba(212,169,74,0.03);
}
.trust-card .t-icon{
  width: 34px; height: 34px;
  border-radius: 10px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(212,169,74,0.1);
  margin-bottom: 4px;
}
.trust-card .t-icon svg{ width: 18px; height: 18px; color: var(--gold-soft); }
.trust-card h4{ font-family: var(--display); font-size: 14.5px; font-weight: 600; color: var(--ivory); margin: 0; }
.trust-card .t-kannada{ font-family: var(--script); font-style: italic; font-size: 12.5px; color: var(--gold-soft); margin: -4px 0 0; }
.trust-card p{ font-size: 12px; color: var(--muted); line-height: 1.6; margin: 0; }

/* ============================================================
   Cart page
   ============================================================ */
.cart-list{ display:flex; flex-direction:column; gap: 12px; margin-bottom: 24px; }
.cart-item{
  display:flex;
  align-items:center;
  gap: 12px;
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: 12px;
}
.cart-item-visual{
  width: 54px; height: 54px;
  border-radius: 12px;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  overflow:hidden;
}
.cart-item-visual svg{ width: 50%; height:50%; position:relative; z-index:1; }
.cart-item-photo{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.cart-item-info{ flex:1; min-width:0; }
.cart-item-info .name{ font-family: var(--display); font-size: 13.5px; color: var(--ivory); margin-bottom:2px; }
.cart-item-info .unit-price{ font-size: 11px; color: var(--muted-2); }
.cart-item-right{ display:flex; flex-direction:column; align-items:flex-end; gap: 8px; }
.line-total{ font-weight:800; color: var(--gold-soft); font-size: 13px; }
.line-total.pulse{ animation: lineTotalPulse 0.32s cubic-bezier(.34,1.56,.64,1); display: inline-block; }
@keyframes lineTotalPulse{
  0%{ transform: scale(1); }
  45%{ transform: scale(1.18); }
  100%{ transform: scale(1); }
}
.empty-state{
  text-align:center;
  padding: 60px 20px;
  color: var(--muted);
}
.empty-state svg{ width:52px; height:52px; margin: 0 auto 16px; color: var(--muted-2); }
.empty-state h3{ font-family: var(--display); color: var(--ivory); font-size:18px; margin: 0 0 8px; }
.empty-state p{ font-size:13px; margin: 0 0 22px; }

.form-card{
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: 18px;
}
.form-card h3{ font-family: var(--display); font-size: 15px; color: var(--gold-soft); margin: 0 0 14px; }
.field{ margin-bottom: 14px; }
.field label{ display:block; font-size: 11.5px; color: var(--muted); margin-bottom: 6px; letter-spacing:0.03em; }
.field input, .field textarea{
  width:100%;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 13px;
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 13.5px;
  transition: border-color 0.18s ease;
}
.field input::placeholder, .field textarea::placeholder{ color: var(--muted-2); }
.field input:focus, .field textarea:focus{ border-color: var(--gold); outline:none; }
.field textarea{ resize: vertical; min-height: 74px; }
.field-error{ font-size: 11px; color: var(--ember-soft); margin-top: 5px; display:none; }
.field.error input, .field.error textarea{ border-color: var(--ember); }
.field.error .field-error{ display:block; }

.place-order-btn{ width:100%; padding: 15px; font-size: 14px; margin-top: 4px; }
.wa-note{ display:flex; align-items:center; gap:8px; justify-content:center; margin-top: 12px; font-size: 11px; color: var(--muted-2); }
.wa-note svg{ width:14px; height:14px; color:#4ade80; }

/* ============================================================
   Micro-interactions & scroll reveals
   ============================================================ */

/* Scroll-triggered fade-up (About/Safety/Contact cards, headings) */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in-view{ opacity: 1; transform: translateY(0); }

.trust-grid .reveal:nth-child(1){ transition-delay: 0s; }
.trust-grid .reveal:nth-child(2){ transition-delay: 0.1s; }
.trust-grid .reveal:nth-child(3){ transition-delay: 0.2s; }

.safety-grid .reveal:nth-child(1){ transition-delay: 0s; }
.safety-grid .reveal:nth-child(2){ transition-delay: 0.06s; }
.safety-grid .reveal:nth-child(3){ transition-delay: 0.12s; }
.safety-grid .reveal:nth-child(4){ transition-delay: 0.18s; }
.safety-grid .reveal:nth-child(5){ transition-delay: 0.24s; }
.safety-grid .reveal:nth-child(6){ transition-delay: 0.3s; }

.about-grid .reveal:nth-child(2){ transition-delay: 0.15s; }

/* Hover lift for cards that were previously static */
.trust-card, .safety-card{
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.trust-card:hover, .safety-card:hover{
  transform: translateY(-3px);
  border-color: var(--line);
  box-shadow: var(--shadow-1);
}
.contact-card{ transition: border-color 0.22s ease; }

/* Hero entrance — plays once on load, no scroll trigger needed */
.hero-anim{
  opacity: 0;
  animation: heroFadeUp 0.7s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes heroFadeUp{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* Chip press feedback */
.chip{ transition: all 0.18s ease, transform 0.12s ease; }
.chip:active{ transform: scale(0.93); }

/* Divider twinkle — very subtle breathing opacity */
.divider-diya{ animation: dividerTwinkle 5s ease-in-out infinite; }
@keyframes dividerTwinkle{
  0%, 100%{ opacity: 0.28; }
  50%{ opacity: 0.48; }
}

/* Qty stepper button press */
.qty-stepper button{ transition: background 0.15s ease, transform 0.12s ease; }
.qty-stepper button:active{ transform: scale(0.85); }

/* Footer link underline slide-in */
.footer-links a{ position: relative; }
.footer-links a::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--gold-soft);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.footer-links a:hover::after{ transform: scaleX(1); }

/* Cart item row entrance (plays on every render since rows are re-created) */
.cart-item{
  animation: cartItemIn 0.4s cubic-bezier(.22,1,.36,1) both;
}
.cart-item:nth-child(1){ animation-delay: 0s; }
.cart-item:nth-child(2){ animation-delay: 0.05s; }
.cart-item:nth-child(3){ animation-delay: 0.1s; }
.cart-item:nth-child(4){ animation-delay: 0.15s; }
.cart-item:nth-child(5){ animation-delay: 0.2s; }
.cart-item:nth-child(6){ animation-delay: 0.25s; }
@keyframes cartItemIn{
  from{ opacity: 0; transform: translateX(-10px); }
  to{ opacity: 1; transform: translateX(0); }
}

/* Form card fades in on cart render */
.form-card{
  animation: fadeUpSoft 0.5s ease both;
  animation-delay: 0.18s;
}
@keyframes fadeUpSoft{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* Empty cart state — gentle breathing icon */
.empty-state svg{ animation: breathe 3s ease-in-out infinite; }
@keyframes breathe{
  0%, 100%{ transform: scale(1); opacity: 0.7; }
  50%{ transform: scale(1.08); opacity: 1; }
}

/* No-results state (product search/category with zero matches) —
   reuses .empty-state, spans the full grid width, and gets its own
   fade-in so it doesn't just pop in when the grid re-renders. */
.no-results-state{
  grid-column: 1 / -1;
  animation: fadeUpSoft 0.35s ease both;
}
.no-results-state h3{ font-family: var(--display); }
.no-results-state .btn-ghost{ margin: 0 auto; }

/* ============================================================
   Delivery timing notice — checkout page
   ============================================================ */
.delivery-notice{
  display:flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  margin-bottom: 18px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(212,169,74,0.35);
  background: linear-gradient(100deg, rgba(212,169,74,0.11), rgba(228,87,46,0.05));
  position: relative;
  overflow: hidden;
}
.delivery-notice::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--gold-soft), var(--ember));
}
.delivery-notice .dn-icon{
  width: 38px; height: 38px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(212,169,74,0.16);
  animation: breathe 3s ease-in-out infinite;
}
.delivery-notice .dn-icon svg{ width: 19px; height: 19px; color: var(--gold-soft); }
.delivery-notice h4{
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gold-soft);
  margin: 0 0 4px;
  letter-spacing: 0.01em;
}
.delivery-notice p{ font-size: 12px; color: var(--muted); line-height: 1.65; margin: 0; }
.delivery-notice p strong{ color: var(--ivory); font-weight: 700; }

/* ============================================================
   Minimum order progress — framed as a friendly nudge, not a wall
   ============================================================ */
.min-order-card{
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: 15px 17px;
  margin-bottom: 18px;
  transition: border-color 0.3s ease;
}
.min-order-card.met{ border-color: rgba(111,174,124,0.35); }
.mo-row{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 9px;
  gap: 10px;
}
.mo-label{ font-size: 12px; color: var(--muted); }
.mo-value{ font-size: 12.5px; font-weight: 800; color: var(--gold-soft); white-space: nowrap; }
.min-order-card.met .mo-value{ color: var(--good); }
.min-order-track{
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.min-order-fill{
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-soft), var(--gold));
  transition: width 0.4s cubic-bezier(.22,1,.36,1), background 0.3s ease;
}
.min-order-card.met .min-order-fill{ background: linear-gradient(90deg, var(--good), #8fd19e); }
.min-order-msg{ margin-top: 9px; font-size: 11.5px; color: var(--muted); line-height: 1.55; }
.min-order-msg strong{ color: var(--ivory); font-weight: 700; }
.min-order-card.met .min-order-msg{ color: var(--good); }
.min-order-card.shake{ animation: moShake 0.4s ease; }
@keyframes moShake{
  0%, 100%{ transform: translateX(0); }
  25%{ transform: translateX(-4px); }
  75%{ transform: translateX(4px); }
}

/* ============================================================
   Checkout notice entrance + threshold-crossing pop
   ============================================================ */
.delivery-notice{ animation: fadeUpSoft 0.5s ease both; }
.min-order-card{ animation: fadeUpSoft 0.5s ease both 0.08s; }

.min-order-card.pop{ animation: moPop 0.55s cubic-bezier(.34,1.56,.64,1); }
@keyframes moPop{
  0%{ transform: scale(1); }
  35%{ transform: scale(1.035); box-shadow: 0 0 0 1px rgba(111,174,124,0.4), 0 14px 30px -14px rgba(111,174,124,0.35); }
  100%{ transform: scale(1); }
}

/* ============================================================
   Cart header row + Clear Cart (two-tap confirm, no browser popup)
   ============================================================ */
.cart-header-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.clear-cart-btn{
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--ink-2);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--sans);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.12s ease;
}
.clear-cart-btn svg{ width: 14px; height: 14px; flex-shrink: 0; }
.clear-cart-btn:hover{ border-color: var(--ember); color: var(--ember-soft); background: rgba(228,87,46,0.08); }
.clear-cart-btn:active{ transform: scale(0.94); }
.clear-cart-btn.confirming{
  border-color: var(--ember);
  color: #fff;
  background: linear-gradient(100deg, var(--ember), var(--ember-soft));
  animation: ccPulse 1s ease-in-out infinite;
}
@keyframes ccPulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(228,87,46,0.45); }
  50%{ box-shadow: 0 0 0 7px rgba(228,87,46,0); }
}

/* ============================================================
   "Top up to minimum" quick-add suggestions
   ============================================================ */
.mo-suggestions{ margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.mo-suggest-label{ display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-2); margin-bottom: 8px; }
.mo-suggest-list{ display: flex; gap: 8px; flex-wrap: wrap; }
.mo-suggest-item{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 7px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--ink);
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.12s ease;
}
.mo-suggest-item:hover{ border-color: var(--gold); }
.mo-suggest-item:active{ transform: scale(0.96); }
.mo-suggest-icon{
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(212,169,74,0.12);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.mo-suggest-icon svg{ width: 13px; height: 13px; }
.mo-suggest-icon img{ width: 100%; height: 100%; object-fit: cover; }
.mo-suggest-info{ display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; }
.mo-suggest-name{ font-size: 11px; color: var(--ivory); }
.mo-suggest-price{ font-size: 10.5px; color: var(--gold-soft); font-weight: 700; }

/* ============================================================
   Live catalogue: loading state + out-of-stock treatment
   ============================================================ */
.catalog-status{
  grid-column: 1 / -1;
  text-align: center;
  padding: 50px 20px;
  color: var(--muted);
  font-size: 13px;
}

/* Skeleton loading cards — shown while the catalogue fetches, shaped
   like a real product card so the layout doesn't jump once data
   arrives. A soft gold sweep stands in for a spinner, matching the
   site's ember/spark palette instead of a generic grey shimmer. */
.skeleton-card{
  background: linear-gradient(180deg, var(--ink-2), var(--ink-3));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display:flex;
  flex-direction:column;
}
.skeleton-visual{ aspect-ratio: 4 / 3.1; position:relative; overflow:hidden; background: var(--ink-3); }
.skeleton-body{ padding: 12px 13px 13px; display:flex; flex-direction:column; gap: 8px; flex:1; }
.skeleton-line{ height: 9px; border-radius: 4px; background: var(--ink-3); position:relative; overflow:hidden; }
.skeleton-foot{ display:flex; align-items:center; justify-content:space-between; margin-top: auto; padding-top: 6px; }
.skeleton-pill{ width: 64px; height: 30px; border-radius: 999px; background: var(--ink-3); position:relative; overflow:hidden; }
.skeleton-visual::after,
.skeleton-line::after,
.skeleton-pill::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(212,169,74,0.16), transparent);
  animation: shimmerSweep 1.7s ease-in-out infinite;
}
@keyframes shimmerSweep{
  0%{ transform: translateX(-120%); }
  100%{ transform: translateX(120%); }
}
.slider-row .skeleton-card{ flex: 0 0 208px; }
@media (min-width: 640px){ .slider-row .skeleton-card{ flex: 0 0 236px; } }

.card-oos{
  opacity: 0.55;
  filter: grayscale(0.4);
}
.card-oos:hover{ transform: none; box-shadow: var(--shadow-1); }
.out-of-stock-label{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--muted-2);
  text-transform: uppercase;
}

/* ============================================================
   Product photos (optional, via Sheet "image" column) + MRP/discount
   ============================================================ */
.card-photo{
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.card-photo.is-loaded{ opacity: 1; }
@media (prefers-reduced-motion: reduce){
  .card-photo{ transition: none; }
}
/* Shimmering placeholder shown on .card-visual while its photo is
   still loading (lazy-loaded images can sit blank for a moment
   otherwise, which reads as broken rather than "loading"). Removed
   once fadeInImg() marks the visual as loaded. */
.card-visual.has-photo{
  background: linear-gradient(100deg,
    rgba(255,255,255,0.03) 30%,
    rgba(255,255,255,0.09) 50%,
    rgba(255,255,255,0.03) 70%);
  background-size: 200% 100%;
  animation: card-photo-shimmer 1.5s ease-in-out infinite;
}
.card-visual.has-photo.is-loaded{
  animation: none;
  background: none;
}
@keyframes card-photo-shimmer{
  0%{ background-position: 150% 0; }
  100%{ background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce){
  .card-visual.has-photo{ animation: none; }
}
.discount-badge{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 5px 8px;
  border-radius: 999px;
  background: linear-gradient(100deg, var(--ember), var(--ember-soft));
  color: #fff;
}
.card-price .mrp{
  font-size: 11px;
  color: var(--muted-2);
  text-decoration: line-through;
}
.price-row{ display: flex; align-items: baseline; gap: 6px; }

/* ============================================================
   Floating action buttons — filter (products page), call +
   WhatsApp (home page). Shared circular base, page-specific
   position/behaviour via modifier classes.
   ============================================================ */
.fab{
  position: fixed;
  right: 18px;
  z-index: 65;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: linear-gradient(100deg, var(--gold-soft), var(--gold));
  color: var(--ink);
  box-shadow: var(--shadow-2);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.18s ease, bottom 0.32s cubic-bezier(.22,1,.36,1);
}
.fab:hover{ transform: translateY(-2px); }
.fab:active{ transform: scale(0.95); }
.fab svg{ width: 20px; height: 20px; }

/* Cart FAB — products page. */
.fab-cart{ bottom: calc(22px + env(safe-area-inset-bottom)); }

/* Back-to-top button (products page) — a quiet glass chip rather
   than another solid gold circle, so it doesn't compete visually
   with the cart FAB across the screen. Bouncing double chevrons
   instead of a pulsing glow — motion draws the eye without the
   gaudier glow of the earlier version. */
.fab-scrolltop{
  position: fixed;
  left: 18px;
  right: auto;
  bottom: calc(22px + env(safe-area-inset-bottom));
  z-index: 65;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(212,169,74,0.55);
  border-radius: 50%;
  background: rgba(20,17,31,0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--gold-soft);
  box-shadow: var(--shadow-2);
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.22s ease, bottom 0.32s cubic-bezier(.22,1,.36,1);
}
.fab-scrolltop:hover{ transform: translateY(-2px); border-color: var(--gold-soft); }
.fab-scrolltop:active{ transform: scale(0.95); }
.fab-scrolltop[hidden]{ display: none; }
.scrolltop-chevrons{
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0;
}
.scrolltop-chevrons svg{ width: 15px; height: 15px; }
.scrolltop-chevrons svg:first-child{ animation: chevBounce 1.6s ease-in-out infinite; }
.scrolltop-chevrons svg:last-child{ margin-top: -7px; animation: chevBounce 1.6s ease-in-out infinite 0.15s; }
@keyframes chevBounce{
  0%, 100%{ opacity: 0.35; transform: translateY(1px); }
  50%{ opacity: 1; transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce){
  .scrolltop-chevrons svg{ animation: none !important; opacity: 0.85; }
}
.fab-cart::before,
.fab-cart::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--gold-soft);
  opacity: 0;
  pointer-events: none;
  animation: callRipple 2.6s ease-out infinite;
}
.fab-cart::after{ animation-delay: 1.3s; }
.fab-cart .cart-badge{ box-shadow: 0 0 0 2px var(--ink); }
@keyframes callRipple{
  0%{ transform: scale(1); opacity: 0.65; }
  100%{ transform: scale(1.7); opacity: 0; }
}

/* Brief highlight when landing on a card deep-linked from the
   index page carousel's "View" button. */
.card.deep-link-highlight{
  animation: cardDeepLinkPulse 1.6s ease-out;
}
@keyframes cardDeepLinkPulse{
  0%{ box-shadow: 0 0 0 3px var(--gold); }
  100%{ box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}

/* Home page — WhatsApp + Call, both moved to the right edge and
   stacked above the Order Now badge (left edge now stays clear).
   Each gets its own brand color so they read apart at a glance —
   WhatsApp in its real green, Call in the site gold — and both
   share the same double-ring "circular wave" pulse so the pair
   still feels like one consistent unit rather than two different
   treatments bolted together. */
.fab-whatsapp{
  right: 16px;
  bottom: calc(190px + env(safe-area-inset-bottom));
  background: var(--whatsapp);
  color: #0a2b16;
}
.fab-call{
  right: 16px;
  bottom: calc(128px + env(safe-area-inset-bottom));
  background: linear-gradient(100deg, var(--gold-soft), var(--gold));
  color: var(--ink);
}
.fab-whatsapp::before,
.fab-whatsapp::after,
.fab-call::before,
.fab-call::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  opacity: 0;
  pointer-events: none;
  animation: callRipple 2.6s ease-out infinite;
}
.fab-whatsapp::before,
.fab-whatsapp::after{ border-color: var(--whatsapp); }
.fab-call::before,
.fab-call::after{ border-color: var(--gold-soft); }
.fab-whatsapp::after,
.fab-call::after{ animation-delay: 1.3s; }
@media (max-width: 380px){
  .fab-whatsapp{ right: 12px; bottom: calc(156px + env(safe-area-inset-bottom)); width: 46px; height: 46px; }
  .fab-call{ right: 12px; bottom: calc(100px + env(safe-area-inset-bottom)); width: 46px; height: 46px; }
}

/* Order Now — the chosen AI-generated badge graphic. Instead of a
   flat on/off blink, it does a quiet "breathe in" pulse followed by
   a light sheen sweeping across the graphic (masked to the image's
   own silhouette, so the sweep only lights up the badge shape, not
   its transparent padding), then rests for a couple seconds before
   repeating — reads as premium/alive rather than distracting. */
.order-badge{
  position: fixed;
  right: 14px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 65;
  width: clamp(104px, 26vw, 136px);
  display: block;
  text-decoration: none;
  cursor: pointer;
}
.order-badge::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.9) 50%, transparent 65%);
  background-size: 250% 100%;
  background-position: 150% 0;
  -webkit-mask-image: url('assets/order-now.png');
  mask-image: url('assets/order-now.png');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mix-blend-mode: overlay;
  pointer-events: none;
  animation: orderBadgeSheen 4s ease-in-out infinite;
}
.order-badge-img{
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.5));
  animation: orderBadgePulse 4s ease-in-out infinite;
}
@keyframes orderBadgePulse{
  0%, 45%, 100%{ transform: scale(1); }
  15%{ transform: scale(1.06); }
  25%{ transform: scale(1); }
}
@keyframes orderBadgeSheen{
  0%, 40%{ background-position: 150% 0; }
  70%{ background-position: -50% 0; }
  100%{ background-position: -50% 0; }
}
.order-badge.pop .order-badge-img{ animation: fabOrderPop 0.32s ease; }
@keyframes fabOrderPop{
  0%{ transform: scale(1); }
  40%{ transform: scale(0.88); }
  70%{ transform: scale(1.06); }
  100%{ transform: scale(1); }
}
@media (max-width: 380px){
  .order-badge{ right: 10px; bottom: calc(14px + env(safe-area-inset-bottom)); }
}

.sheet-backdrop{
  position: fixed;
  inset: 0;
  z-index: 68;
  background: rgba(6,5,12,0.6);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.sheet-backdrop.show{ opacity: 1; pointer-events: auto; }

.chip.active{ box-shadow: 0 5px 16px -4px rgba(228,87,46,0.55), inset 0 1px 0 rgba(255,255,255,0.35); }

/* Close button — reused by the cart drawer. */
.sheet-close{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--ink-2);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.18s ease;
}
.sheet-close:hover{ color: var(--ivory); border-color: var(--gold); }
.sheet-close svg{ width: 14px; height: 14px; }

/* ---- Cart drawer (slide-in panel, replaces the old cart.html page) --- */
.cart-drawer{
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 69;
  width: min(420px, 100vw);
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--ink-2), var(--ink-3));
  border-left: 1px solid var(--line);
  box-shadow: -20px 0 50px -12px rgba(0,0,0,0.75);
  transform: translateX(105%);
  transition: transform 0.34s cubic-bezier(.22,1,.36,1);
  will-change: transform;
  padding-top: env(safe-area-inset-top);
}
.cart-drawer.show{ transform: translateX(0); }
.cart-drawer-head{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
}
.cart-drawer-head h3{ font-family: var(--display); font-size: 16px; color: var(--gold-soft); margin: 0; flex: 1; }
.drawer-back{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--ink-2);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.18s ease;
  flex-shrink: 0;
}
.drawer-back[hidden]{ display: none; }
.drawer-back:hover{ color: var(--ivory); border-color: var(--gold); }
.drawer-back svg{ width: 14px; height: 14px; }

/* Two-step progress indicator — cart review, then delivery details.
   Pill gives the explicit "Step X of 2" text; the thin bar underneath
   gives the same thing at a glance and animates when the step
   changes, instead of just snapping to the new width. */
.drawer-step-pill{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
  background: linear-gradient(100deg, var(--gold-soft), var(--gold));
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.drawer-step-pill[hidden]{ display: none; }
.drawer-progress{
  height: 3px;
  flex-shrink: 0;
  background: var(--line-soft);
  position: relative;
  overflow: hidden;
}
.drawer-progress[hidden]{ display: none; }
.drawer-progress-fill{
  position: absolute;
  inset: 0;
  width: 50%;
  background: linear-gradient(90deg, var(--gold-soft), var(--gold));
  transition: width 0.4s cubic-bezier(.22,1,.36,1);
}
.drawer-progress-fill.step-2{ width: 100%; }
.cart-drawer-body{
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 18px 20px;
  -webkit-overflow-scrolling: touch;
}
.cart-drawer-body .empty-state{ padding: 40px 4px; }
.cart-drawer-footer{
  flex-shrink: 0;
}
.cart-drawer-footer:not(:empty){
  padding: 14px 18px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(19,16,32,0.4), var(--ink-3));
}
.cart-drawer-total-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.cart-drawer-total-row .cdt-label{ font-size: 12.5px; color: var(--muted); }
.cart-drawer-total-row .cdt-amt{ font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--gold-soft); }

.checkout-summary-collapsed{
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.02);
  padding: 12px 14px;
  margin-bottom: 18px;
}
.cs-row{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cs-row > span:first-child{ font-size: 12.5px; color: var(--muted); }
.cs-total{ font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--gold-soft); }

@media (max-width: 460px){
  .cart-drawer{ width: 100vw; border-left: none; }
}

#collection{ scroll-margin-top: 76px; }

/* Search box (products page) */
.search-box{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--ink-2);
  flex: 0 1 220px;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.search-box:hover{ background: var(--ink-3); }
.search-box:focus-within{
  border-color: var(--gold);
  background: var(--ink-3);
  box-shadow: 0 0 0 3px rgba(212,169,74,0.14), 0 0 16px -4px rgba(212,169,74,0.35);
}
.search-box svg{ width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; transition: color 0.22s ease; }
.search-box:focus-within svg{ color: var(--gold-soft); }
.search-box input{
  border: none;
  background: none;
  outline: none;
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 13px;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
/* Hide the browser's own built-in "clear" (x) button on type="search" —
   we already render our own .search-clear button, so without this
   two cross icons show up stacked on Chrome/Safari/Edge. */
.search-box input::-webkit-search-cancel-button,
.search-box input::-webkit-search-decoration{
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.search-box input[type="search"]::-ms-clear{ display: none; width: 0; height: 0; }
.search-box input::placeholder{ color: var(--muted-2); transition: color 0.22s ease; }
.search-box:focus-within input::placeholder{ color: var(--muted); }
.search-clear{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: var(--line);
  color: var(--ivory);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.18s ease;
}
.search-clear[hidden]{ display: none; }
.search-clear svg{ width: 9px; height: 9px; }
.search-clear:hover{ background: var(--gold); }

/* ============================================================
   Image lightbox (products page) — tap a photo to view full size
   ============================================================ */
.card-photo{ cursor: zoom-in; }
.lightbox-backdrop{
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6,5,12,0.9);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.lightbox-backdrop.show{ opacity: 1; pointer-events: auto; }
.lightbox-frame{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  width: 100%;
  padding: 24px 24px 28px;
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow:
    0 0 60px 6px rgba(212,169,74,0.08),
    0 24px 70px -14px rgba(0,0,0,0.85);
  transform: scale(0.94) translateY(6px);
  transition: transform 0.25s ease;
}
.lightbox-backdrop.show .lightbox-frame{ transform: scale(1) translateY(0); }
.lightbox-title{
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold-soft);
  text-align: center;
  margin: 2px 8px 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  width: 100%;
}
.lightbox-image-wrap{
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--ink);
  border: 1px solid var(--line-soft);
}
.lightbox-img{
  display: block;
  width: 100%;
  max-height: 62vh;
  object-fit: contain;
}
.lightbox-close{
  position: absolute;
  top: -16px;
  right: -16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--ink-2);
  color: var(--ivory);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 20px -6px rgba(0,0,0,0.6);
  transition: all 0.18s ease;
}
.lightbox-close:hover{ border-color: var(--gold); color: var(--gold-soft); }
.lightbox-close svg{ width: 15px; height: 15px; }

/* ============================================================
   Home page — featured product carousel
   ============================================================ */
.slider-wrap{
  position: relative;
  padding: 0 6px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.slider-row{
  display: flex;
  align-items: stretch;
  gap: 16px;
  width: max-content;
  padding: 14px 44px 22px;
  will-change: transform;
  backface-visibility: hidden;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}
.slider-row.dragging{ cursor: grabbing; }
.slider-row .card{
  flex: 0 0 208px;
  transform-origin: center center;
}
.slider-row .card:hover{
  transform: translateY(-3px) scale(1.045);
  z-index: 4;
}
@media (min-width: 640px){ .slider-row .card{ flex: 0 0 236px; } }

.view-all-wrap{
  display: flex;
  justify-content: center;
  padding: 4px 18px 30px;
}
.btn-shine{
  position: relative;
  overflow: hidden;
}
.btn-shine svg{ transition: transform 0.25s ease; }
.btn-shine:hover svg{ transform: translateX(4px); }
.btn-shine::after{
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-20deg);
  animation: btnShine 3.4s ease-in-out infinite;
}
@keyframes btnShine{
  0%{ left: -60%; }
  45%{ left: 130%; }
  100%{ left: 130%; }
}
.order-confirm-overlay{
  position:fixed; inset:0;
  background: rgba(10,9,18,0.82);
  backdrop-filter: blur(3px);
  display:flex; align-items:center; justify-content:center;
  z-index:999; padding:20px;
  overflow-y: auto;
  opacity:0; animation: ocFadeIn 0.25s ease forwards;
}
@keyframes ocFadeIn{ to{ opacity:1; } }

.order-confirm-card{
  position: relative;
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2), 0 0 60px -10px rgba(212,169,74,0.35);
  padding: 32px 24px 24px;
  max-width: 360px;
  width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  margin: auto;
  text-align: center;
  transform: scale(0.9) translateY(10px);
  opacity: 0;
  animation:
    ocPopIn 0.4s cubic-bezier(.2,.9,.3,1.3) 0.05s forwards,
    ocSway 3.2s ease-in-out 0.6s infinite;
}
@keyframes ocPopIn{ to{ transform: scale(1) translateY(0); opacity:1; } }
@keyframes ocSway{
  0%, 100%{ transform: rotate(0deg) translateY(0); }
  25%{ transform: rotate(-0.6deg) translateY(-2px); }
  75%{ transform: rotate(0.6deg) translateY(-2px); }
}

/* soft breathing gold glow behind the card */
.order-confirm-card::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius: inherit;
  background: radial-gradient(60% 60% at 50% 0%, rgba(212,169,74,0.25), transparent 70%);
  z-index:-1;
  animation: ocGlow 2.6s ease-in-out infinite;
}
@keyframes ocGlow{
  0%, 100%{ opacity:0.6; }
  50%{ opacity:1; }
}

.order-confirm-card .oc-check{
  width:56px; height:56px; margin:0 auto 14px;
  border-radius:50%;
  background: rgba(212,169,74,0.12);
  border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.order-confirm-card .oc-check svg{
  width:26px; height:26px;
  color: var(--gold);
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: ocCheckDraw 0.5s ease 0.35s forwards;
}
@keyframes ocCheckDraw{ to{ stroke-dashoffset: 0; } }

.order-confirm-card h2{
  margin:0 0 8px; font-family: var(--display); font-weight:600;
  letter-spacing:0.5px; color: var(--ivory); font-size:22px;
}
.order-confirm-card .oc-order-id{
  display:inline-block; margin:0 0 16px;
  font-family: var(--sans); font-size:12.5px; font-weight:600;
  letter-spacing:0.6px; color: var(--gold);
  background: rgba(212,169,74,0.1); border: 1px solid var(--line);
  padding: 5px 14px; border-radius: 20px;
}
.order-confirm-card .oc-items{
  text-align:left;
  margin:0 0 12px; padding:12px 14px;
  background: rgba(0,0,0,0.18); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.order-confirm-card .oc-item-row{
  display:flex; justify-content:space-between; gap:12px;
  font-family: var(--sans); font-size:13px; color: var(--ivory);
  padding:5px 0;
}
.order-confirm-card .oc-item-row + .oc-item-row{ border-top: 1px solid var(--line-soft); }
.order-confirm-card .oc-item-qty{ color: var(--muted); font-size:12px; }
.order-confirm-card .oc-item-total{ color: var(--muted); white-space:nowrap; }
.order-confirm-card .oc-item-more{
  justify-content:flex-start; color: var(--gold); font-size:12.5px;
  font-weight:600; letter-spacing:0.2px;
}
.order-confirm-card .oc-summary-row{
  display:flex; justify-content:space-between; align-items:center;
  margin:0 0 20px; padding-top:12px; border-top: 1px dashed var(--line);
  font-family: var(--sans); font-size:13px; color: var(--muted);
  font-weight:600;
}
.order-confirm-card .oc-summary-row .oc-total{
  color: var(--gold); font-size:17px; font-weight:700;
}
.order-confirm-card p{
  margin:0 0 18px; color: var(--muted); font-family: var(--sans);
  font-size:14px; line-height:1.55;
}

/* top-right icon close — replaces the old full-width "Done" button/row */
.order-confirm-card .oc-close{
  position:absolute; top:12px; right:12px;
  width:30px; height:30px; padding:0; border-radius:50%;
  background: rgba(255,255,255,0.05); border:1px solid var(--line);
  color: var(--muted); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease;
}
.order-confirm-card .oc-close svg{ width:15px; height:15px; }
.order-confirm-card .oc-close:hover{ color: var(--ivory); background: rgba(255,255,255,0.1); border-color: var(--line-soft, var(--line)); }
.order-confirm-card .oc-close:active{ transform: scale(0.9); }

/* compact icon-only invoice download — replaces the old full-width pill button */
.order-confirm-card .oc-download-icon-btn{
  width:44px; height:44px; padding:0; margin:0 auto; border-radius:50%;
  background: transparent; color: var(--gold); border: 1px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; isolation:isolate; cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.order-confirm-card .oc-download-icon-btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(212,169,74,0.5); }
.order-confirm-card .oc-download-icon-btn:active{ transform: scale(0.92); }
/* gold fill sweeps up from the bottom instead of a flat color swap */
.order-confirm-card .oc-download-icon-btn::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:50%;
  background: var(--gold); transform: scale(0); transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.order-confirm-card .oc-download-icon-btn.is-done::before{ transform: scale(1); }
.order-confirm-card .oc-download-icon-btn.is-done{ color: var(--ink); animation: ocDlPop .35s ease; }
@keyframes ocDlPop{
  0%{ transform: scale(1); }
  45%{ transform: scale(1.08); }
  100%{ transform: scale(1); }
}
.order-confirm-card .oc-dl-caption{
  margin-top:8px; font-family: var(--sans); font-size:11.5px;
  color: var(--muted); letter-spacing:0.2px;
}
.order-confirm-card .oc-dl-icon-wrap{ position:relative; width:17px; height:17px; flex:none; }
.order-confirm-card .oc-dl-icon{
  position:absolute; inset:0; width:17px; height:17px;
  transition: transform .35s cubic-bezier(.2,.9,.3,1.3), opacity .25s ease;
}
.order-confirm-card .oc-dl-icon--download{ opacity:1; transform: translateY(0) scale(1); }
.order-confirm-card .oc-dl-icon--check{ opacity:0; transform: translateY(4px) scale(0.6); }
.order-confirm-card .oc-download-icon-btn.is-done .oc-dl-icon--download{
  opacity:0; transform: translateY(-7px) scale(0.6);
}
.order-confirm-card .oc-download-icon-btn.is-done .oc-dl-icon--check{
  opacity:1; transform: translateY(0) scale(1);
  stroke-dasharray:24; stroke-dashoffset:24;
  animation: ocDlCheckDraw .35s ease .06s forwards;
}
@keyframes ocDlCheckDraw{ to{ stroke-dashoffset:0; } }
/* small "press" dip on the download icon itself while the button is still idle */
.order-confirm-card .oc-download-icon-btn:not(.is-done):active .oc-dl-icon--download{
  transform: translateY(2px) scale(0.9);
}
/* ============================================================
   Festive ticker — ONE continuous flowing strip of icon + text,
   separated only by a small gold diamond mark. Deliberately NOT
   boxed pills any more: individual chips each had their own
   background/border, so the space between one chip's rounded edge
   and the next chip's rounded edge read as a visible dead gap in
   the motion — the opposite of the "keep moving, no gap" feel this
   banner is meant to have. Dropping the per-item box and using a
   plain inline separator instead removes that dead space entirely;
   what's left is one uninterrupted ribbon of content.
   Index page only now — removed from products.html, where the
   category pillbar right underneath made it feel redundant.
   Content is duplicated once in the track so the loop is seamless
   (translateX(-50%) lands exactly back on the first copy) — and it
   keeps scrolling even with "reduce motion" turned on (see the
   media query at the bottom of this block), since it's read-only
   decorative content, not something that should ever look frozen.
   ============================================================ */
.festive-ticker{
  position: relative;
  height: 38px;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(228,87,46,0.10), rgba(212,169,74,0.10), rgba(228,87,46,0.10));
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.festive-ticker::before,
.festive-ticker::after{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 34px;
  z-index: 2;
  pointer-events: none;
}
.festive-ticker::before{ left: 0; background: linear-gradient(to right, var(--ink), transparent); }
.festive-ticker::after{ right: 0; background: linear-gradient(to left, var(--ink), transparent); }
.festive-ticker-track{
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  display: flex;
  align-items: center;
  width: max-content;
  animation: tickerScroll 28s linear infinite;
  will-change: transform;
}
/* Every item — including the very last one of each duplicated set —
   reserves the SAME trailing width (28px) for its separator, with
   zero padding/margin anywhere else on the track. That symmetry is
   what makes translateX(-50%) land exactly back on the first copy
   with zero seam/jump: the two halves of the track are byte-for-
   byte the same width. Do not add a track-level gap or padding-left
   without redoing that math — either one breaks the 50/50 split and
   shows up as a hitch once per loop. */
.ticker-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.015em;
  color: var(--ivory);
  margin-right: 28px;
}
.ticker-item::after{
  content: "";
  position: absolute;
  right: -14px;
  top: 50%;
  width: 5px;
  height: 5px;
  transform: translate(50%, -50%) rotate(45deg);
  background: var(--gold-soft);
  opacity: 0.7;
  border-radius: 1px;
}
/* Custom line-icons in the brand's gold gradient, replacing the old
   plain emoji (🪔✨🚚💬) — those read as generic/stock rather than
   part of this site's visual language. Same thin-stroke style as
   the category icons in catalog.js. */
.ticker-icon{
  display: inline-flex;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  color: var(--gold-soft);
  filter: drop-shadow(0 0 3px rgba(212,169,74,0.45));
}
.ticker-icon svg{ width: 100%; height: 100%; display: block; }
.ticker-shine{
  background: linear-gradient(90deg, var(--gold-soft), var(--ivory) 35%, var(--gold) 55%, var(--gold-soft));
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: tickerShine 4s linear infinite;
}
/* 8 copies of the item set are duplicated into the track (see
   index.html) so the total track is comfortably wider than any
   realistic viewport, including large desktop monitors — with
   only 2 copies, a wide screen could show almost the whole track
   at once, making the reset point visible as a jump/gap. Moving
   by 1/8th of the (8x) track width is the same physical distance
   as moving by one copy's width, which is what keeps the loop
   seamless: swap in more/fewer copies in the HTML and this
   percentage must change to 100 / (number of copies). */
@keyframes tickerScroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-12.5%); }
}
@keyframes tickerShine{
  to{ background-position: -220% center; }
}
/* The site-wide reduced-motion rule (top of this file) would
   otherwise collapse this to a single near-instant frame, which
   reads as the banner having stopped/broken. These three
   selectors are more specific than that universal rule, so the
   marquee and its shimmer keep running regardless of the user's
   motion setting. */
@media (prefers-reduced-motion: reduce){
  .festive-ticker-track{ animation: tickerScroll 28s linear infinite !important; }
  .ticker-shine{ animation: tickerShine 4s linear infinite !important; }
}