/* ===========================================================
   Dhatterwal Suhag Bhandar — design tokens
   Palette named after the bazaar: cream paper, rani pink (bridal),
   marigold, indigo night, mehendi green.
   =========================================================== */
:root{
  --cream: #FFF6E9;
  --cream-2: #FFEFD8;
  --rani: #C81163;
  --rani-dark: #970D4B;
  --marigold: #F2A93B;
  --marigold-dark: #D68C1F;
  --indigo: #201B3D;
  --indigo-soft: #423B66;
  --mehendi: #3E7C59;
  --turmeric: #FFC93C;
  --line: rgba(32,27,61,0.10);
  --shadow: 0 6px 20px rgba(32,27,61,0.10);
  --radius: 14px;
  --font-display: 'Baloo 2', 'Hind', sans-serif;
  --font-body: 'Hind', sans-serif;
  --font-utility: 'Rajdhani', sans-serif;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--cream);
  color: var(--indigo);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 70px; /* room for bottom cart bar on small screens */
  animation: pageIn .45s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes pageIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

/* Smooth native crossfade between pages, where the browser supports it.
   No-op (silently ignored) everywhere else. */
@view-transition{
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root){
  animation-duration: .32s;
  animation-timing-function: cubic-bezier(.22,.61,.36,1);
}
img{ max-width:100%; display:block; }
button{ font-family: inherit; cursor:pointer; }
a{ color:inherit; }

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

/* ---------- Lehariya wave divider (signature element) ---------- */
.lehariya{
  width:100%;
  height:16px;
  display:block;
}

/* ---------- Sticky slim bar: search + cart only ---------- */
.stickybar{
  position: sticky;
  top:0;
  z-index: 60;
  display:flex;
  align-items:center;
  gap:8px;
  height:52px;
  padding: 0 10px;
  background: rgba(255,246,233,0.55);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.stickybar.solid{
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(32,27,61,0.06);
}
.stickybar .brandmark{
  display:flex;
  align-items:center;
  gap:6px;
  font-family: var(--font-display);
  font-weight:700;
  font-size:15px;
  color: var(--rani);
  white-space:nowrap;
  flex-shrink:0;
}
.stickybar .brandmark .glyph{
  width:26px; height:26px; border-radius:8px;
  background: linear-gradient(135deg, var(--rani), var(--marigold));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:14px; flex-shrink:0;
}
.searchwrap{
  flex:1;
  display:flex;
  align-items:center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  height:36px;
  padding: 0 12px;
  gap:8px;
}
.searchwrap input{
  border:none; outline:none; flex:1;
  font-family: var(--font-body);
  font-size:14px;
  background:transparent;
  color: var(--indigo);
}
.searchwrap svg{ flex-shrink:0; opacity:.65; }
.iconbtn{
  position:relative;
  width:36px; height:36px;
  border-radius:50%;
  border:none;
  background: transparent;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  color: var(--indigo);
}
.iconbtn .badge{
  position:absolute; top:-2px; right:-2px;
  min-width:16px; height:16px; padding:0 3px;
  border-radius:999px;
  background: var(--rani);
  color:#fff;
  font-family: var(--font-utility);
  font-weight:700;
  font-size:10px;
  display:flex; align-items:center; justify-content:center;
  line-height:1;
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding: 16px 18px 14px;
  background:
    radial-gradient(120% 90% at 15% -10%, rgba(242,169,59,0.35), transparent 55%),
    radial-gradient(120% 90% at 100% 0%, rgba(200,17,99,0.28), transparent 60%),
    var(--indigo);
  background-size: 200% 200%;
  animation: heroDrift 16s ease-in-out infinite;
  color: var(--cream);
  overflow:hidden;
}
@keyframes heroDrift{
  0%, 100%{ background-position: 20% 10%; }
  50%{ background-position: 62% 42%; }
}
.hero-title{
  font-family: var(--font-display);
  font-weight:700;
  font-size:16px;
  line-height:1.3;
  margin:0 0 14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hero-tiles{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:8px;
}
.hero-tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  padding:12px 4px 10px;
  border-radius:16px;
  background: rgba(255,246,233,0.09);
  border:1px solid rgba(255,246,233,0.16);
  color: var(--cream);
  text-decoration:none;
  font-family: var(--font-utility);
  font-weight:600;
  font-size:11px;
  text-align:center;
  transition: transform .14s cubic-bezier(.34,1.56,.64,1), background .14s ease;
}
.hero-tile-icon{
  width:36px; height:36px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--marigold), var(--rani));
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  box-shadow: 0 4px 10px rgba(200,17,99,0.35);
}
.hero-tile:active{
  transform: scale(.90);
  background: rgba(255,246,233,0.22);
}

/* ---------- Category rail ---------- */
.cat-rail-outer{ background: var(--cream); padding-top:12px; }
.cat-rail{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding: 4px 16px 12px;
  scrollbar-width:none;
}
.cat-rail::-webkit-scrollbar{ display:none; }
.chip{
  flex-shrink:0;
  border:1px solid var(--line);
  background:#fff;
  color: var(--indigo);
  padding: 7px 14px;
  border-radius:999px;
  font-family: var(--font-utility);
  font-weight:600;
  font-size:13px;
  white-space:nowrap;
}
.chip.active{
  background: var(--rani);
  border-color: var(--rani);
  color:#fff;
}
.subchip-row{
  display:flex; gap:8px; overflow-x:auto; padding: 0 16px 12px; scrollbar-width:none;
}
.subchip-row::-webkit-scrollbar{ display:none; }
.subchip{
  flex-shrink:0;
  border:1px dashed var(--indigo-soft);
  background:transparent;
  color: var(--indigo-soft);
  padding:5px 12px;
  border-radius:999px;
  font-size:12px;
  font-family: var(--font-utility);
  font-weight:600;
  white-space:nowrap;
}
.subchip.active{
  background: var(--marigold);
  border-color: var(--marigold);
  color: var(--indigo);
}

/* ---------- Product grid ---------- */
.section-title{
  font-family: var(--font-display);
  font-size:17px;
  margin: 4px 16px 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.section-title h2{
  font: inherit;
  margin:0;
}
.section-title > *:first-child{ position:relative; padding-bottom:8px; display:inline-block; }
.section-title > *:first-child::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:34px; height:3px; border-radius:2px;
  background: linear-gradient(90deg, var(--rani), var(--marigold), var(--turmeric));
}
.section-title small{
  font-family: var(--font-utility);
  font-weight:600;
  font-size:12px;
  color: var(--indigo-soft);
}
.grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:10px;
  padding: 0 12px 20px;
}
@media (min-width: 640px){
  .grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px){
  .grid{ grid-template-columns: repeat(4, 1fr); padding-left:24px; padding-right:24px; }
}
.card{
  background:#fff;
  border-radius: var(--radius);
  border:1px solid var(--line);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  position:relative;
  box-shadow: 0 3px 10px rgba(32,27,61,0.05);
  transition: box-shadow .25s ease, transform .25s ease;
}
.card:active{
  box-shadow: 0 10px 22px rgba(32,27,61,0.14);
  transform: translateY(-1px);
}
.card .imgwrap{
  position:relative;
  aspect-ratio: 1 / 1;
  background: var(--cream-2);
  overflow:hidden;
}
.card .imgwrap img{ transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.card:active .imgwrap img{ transform: scale(1.06); }
.card .imgwrap img{ width:100%; height:100%; object-fit:cover; }
.card-share{
  position:absolute; top:6px; right:6px; z-index:3;
  width:26px; height:26px; border-radius:50%;
  background: rgba(255,255,255,0.92); border:none;
  display:flex; align-items:center; justify-content:center;
  color: var(--indigo); box-shadow:0 2px 6px rgba(32,27,61,0.18);
  transition: transform .15s ease, background .15s ease;
}
.card-share:hover{ background:#fff; color: var(--rani); }
.card-share:active{ transform: scale(.88); }
/* Smooth, futuristic hover on pointer devices — untouched on mobile taps. */
@media (hover:hover) and (pointer:fine){
  .card{ transition: box-shadow .32s cubic-bezier(.22,.61,.36,1), transform .32s cubic-bezier(.22,.61,.36,1); }
  .card:hover{ box-shadow: 0 16px 32px rgba(32,27,61,0.16); transform: translateY(-5px); }
  .card:hover .imgwrap img{ transform: scale(1.08); }
}
.card .discount{
  position:absolute; top:6px; left:6px;
  background: var(--mehendi);
  color:#fff;
  font-family: var(--font-utility);
  font-weight:700;
  font-size:10.5px;
  padding:2px 6px;
  border-radius:6px;
}
.card .subtag{
  position:absolute; bottom:6px; left:6px;
  background: rgba(32,27,61,0.75);
  color: var(--cream);
  font-size:10px;
  font-family: var(--font-utility);
  padding:2px 6px;
  border-radius:6px;
}
.card .body{
  padding:8px 9px 9px;
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:1;
}
.card .name{
  font-size:12.5px;
  font-weight:600;
  line-height:1.3;
  min-height:2.6em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.card .name-hindi{
  font-family: var(--font-body);
  font-size:11.5px;
  color: var(--indigo-soft);
  margin-top:1px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.card-rating{
  display:flex; align-items:center; gap:4px;
  font-size:10.5px; color:#9b93b0;
  font-family: var(--font-utility);
}
.card-rating .stars{ font-size:11px; letter-spacing:0.5px; }
.card .prices{
  display:flex; align-items:baseline; gap:6px;
  font-family: var(--font-utility);
}
.card .price{ font-weight:700; font-size:15px; color: var(--indigo); }
.card .mrp{ font-size:11.5px; text-decoration:line-through; color:#9b93b0; }
.card .card-actions{
  margin-top:auto;
  display:flex;
  gap:5px;
  align-items:stretch;
}
.card .card-actions > *{ flex:1; min-width:0; }
.card .addbtn{
  border:1px solid var(--rani);
  background: transparent;
  color: var(--rani);
  border-radius:8px;
  padding:6px 4px;
  font-family: var(--font-utility);
  font-weight:700;
  font-size:11.5px;
  display:flex; align-items:center; justify-content:center; gap:4px;
}
.card .addbtn.in-cart{
  background: var(--rani);
  color:#fff;
}
.card .buynowbtn{
  border:none;
  background: linear-gradient(135deg, var(--rani), var(--rani-dark));
  color:#fff;
  border-radius:8px;
  padding:6px 4px;
  font-family: var(--font-utility);
  font-weight:700;
  font-size:11.5px;
  display:flex; align-items:center; justify-content:center;
}
.card .stepper{
  display:flex; align-items:center; justify-content:space-between;
  border:1px solid var(--rani);
  border-radius:8px;
  overflow:hidden;
}
.card .stepper button{
  border:none; background: var(--rani); color:#fff;
  width:26px; height:26px; font-size:15px; font-weight:700;
}
.card .stepper span{
  font-family: var(--font-utility); font-weight:700; font-size:13px;
}
.empty-state{
  grid-column: 1 / -1;
  text-align:center;
  padding: 36px 16px;
  color: var(--indigo-soft);
  font-family: var(--font-utility);
}

/* ---------- Overlays (cart drawer, search) ---------- */
.overlay{
  position:fixed; inset:0; z-index:100;
  background: rgba(32,27,61,0.45);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity .28s ease, visibility 0s linear .28s;
}
.overlay.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition: opacity .28s ease, visibility 0s linear 0s;
}
@media (min-width: 720px){
  .overlay{ align-items:center; }
}
.sheet{
  background: var(--cream);
  width:100%;
  max-width:480px;
  max-height: 88vh;
  overflow-y:auto;
  border-radius: 20px 20px 0 0;
  padding: 14px 16px 20px;
  position:relative;
  transform: translateY(24px);
  opacity:0;
  transition: transform .32s cubic-bezier(.22,.61,.36,1), opacity .28s ease;
}
.overlay.open .sheet{ transform: translateY(0); opacity:1; }
@media (min-width: 720px){
  .sheet{ border-radius:20px; }
}
.sheet .closebtn{
  position:absolute; top:10px; right:10px;
  width:32px; height:32px; border-radius:50%;
  background:#fff; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.sheet .pv-img{
  width:100%; aspect-ratio:1/1; border-radius:14px; overflow:hidden;
  background: var(--cream-2); margin-bottom:12px;
}
.sheet .pv-img img{ width:100%; height:100%; object-fit:cover; }
.sheet h2{ font-family: var(--font-display); font-size:19px; margin:0 0 4px; }
.sheet .pv-cat{ font-family: var(--font-utility); font-size:12px; color: var(--indigo-soft); margin-bottom:8px; }
.sheet .pv-prices{ display:flex; align-items:baseline; gap:8px; margin-bottom:10px; font-family: var(--font-utility); }
.sheet .pv-prices .price{ font-size:22px; font-weight:700; color: var(--rani); }
.sheet .pv-prices .mrp{ text-decoration:line-through; color:#9b93b0; font-size:14px; }
.sheet .pv-desc{ font-size:13.5px; color: var(--indigo); line-height:1.5; margin-bottom:6px; }
.sheet .pv-id{ font-family: var(--font-utility); font-size:11px; color:#9b93b0; margin-bottom:14px; }
.sheet .pv-actions{ display:flex; gap:10px; align-items:center; }
.sheet .pv-actions .stepper{ flex:1; height:44px; }
.sheet .pv-actions .stepper button{ width:44px; height:44px; font-size:18px; }
.sheet .primary-btn{ flex:2; }

/* ---------- Cart drawer ---------- */
.cart-drawer{
  background: var(--cream);
  width:100%;
  max-width:480px;
  max-height:85vh;
  overflow-y:auto;
  border-radius: 20px 20px 0 0;
  padding: 16px 16px 90px;
  position:relative;
  transform: translateY(24px);
  opacity:0;
  transition: transform .32s cubic-bezier(.22,.61,.36,1), opacity .28s ease;
}
.overlay.open .cart-drawer{ transform: translateY(0); opacity:1; }
@media (min-width:720px){ .cart-drawer{ border-radius:20px; padding-bottom:20px; } }
.cart-drawer h2{ font-family: var(--font-display); font-size:19px; margin:0 0 12px; }
.cart-item{
  display:flex; gap:10px; align-items:center;
  padding: 10px 0;
  border-bottom:1px solid var(--line);
}
.cart-item img{ width:52px; height:52px; border-radius:10px; object-fit:cover; background: var(--cream-2); }
.cart-item .ci-info{ flex:1; min-width:0; }
.cart-item .ci-name{ font-size:13px; font-weight:600; margin-bottom:2px; }
.cart-item .ci-id{ font-family: var(--font-utility); font-size:10.5px; color:#9b93b0; }
.cart-item .ci-price{ font-family: var(--font-utility); font-weight:700; font-size:13px; color: var(--rani); }
.cart-item .stepper{ height:30px; width:96px; }
.cart-item .stepper button{ width:30px; height:30px; font-size:15px; }
.cart-item .removebtn{
  border:none; background:transparent; color:#9b93b0; font-size:11px;
  font-family: var(--font-utility); text-decoration:underline;
}
.cart-summary{
  background: var(--cream);
  padding-top:12px;
  border-top:1px solid var(--line);
  margin-top:8px;
}
.cart-summary .row{ display:flex; justify-content:space-between; font-family: var(--font-utility); font-size:14px; margin-bottom:4px; }
.cart-summary .row.total{ font-size:18px; font-weight:700; color: var(--indigo); }
.cart-empty{ text-align:center; padding: 40px 10px; color: var(--indigo-soft); font-family: var(--font-utility); }

/* ---------- Buttons ---------- */
.primary-btn{
  background: linear-gradient(135deg, var(--rani), var(--rani-dark));
  color:#fff;
  border:none;
  border-radius:12px;
  padding:12px 16px;
  font-family: var(--font-utility);
  font-weight:700;
  font-size:15px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow: 0 8px 18px rgba(200,17,99,0.28);
}
.whatsapp-btn{ background: linear-gradient(135deg, #25D366, #1DA851); box-shadow: 0 8px 18px rgba(29,168,81,0.28); }
.ghost-btn{
  background:transparent;
  border:1px solid var(--indigo-soft);
  color: var(--indigo);
  border-radius:12px;
  padding:10px 14px;
  font-family: var(--font-utility);
  font-weight:600;
  font-size:14px;
}

/* ===========================================================
   Track your order
   =========================================================== */
.track-intro{
  font-size:13px; line-height:1.55; color: var(--indigo-soft);
  margin:2px 0 16px;
}
.track-error{
  font-size:12.5px; color:#C8395A; margin:2px 0 12px; display:none;
}
.track-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding:16px; box-shadow: var(--shadow);
}
.track-card-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--line);
}
.track-oid{ font-family: var(--font-display); font-weight:700; font-size:17px; color: var(--indigo); }
.track-odate{ font-family: var(--font-utility); font-size:11.5px; color:#9b93b0; margin-top:2px; }

.track-steps{ display:flex; align-items:flex-start; margin-bottom:16px; }
.track-step{
  flex:1; position:relative; text-align:center;
  font-family: var(--font-utility); font-weight:600; font-size:11.5px;
  color:#b3acc4;
}
.track-step::before{
  content:''; display:block; width:100%; height:3px;
  background:#eee7f5; margin-bottom:8px; position:relative; top:6px;
}
.track-step .dot{
  display:block; width:14px; height:14px; margin:0 auto 6px;
  border-radius:50%; background:#eee7f5; border:3px solid var(--cream);
  position:relative; z-index:1;
}
.track-step.done{ color: var(--mehendi); }
.track-step.done::before{ background: var(--mehendi); }
.track-step.done .dot{ background: var(--mehendi); }
.track-step.active{ color: var(--rani); }
.track-step.active .dot{ background: var(--rani); box-shadow:0 0 0 4px rgba(200,17,99,0.15); }
.track-step.cancel{ color:#C8395A; }
.track-step.cancel::before{ background:#C8395A; }
.track-step.cancel .dot{ background:#C8395A; }
.track-steps.cancelled .track-step:first-child::before{ background: var(--mehendi); }

.track-details .row{ display:flex; justify-content:space-between; gap:10px; font-size:13px; padding:5px 0; }
.track-details .row span:first-child{ color: var(--indigo-soft); }
.track-details .row.total{ font-weight:700; font-size:15px; color: var(--indigo); border-top:1px solid var(--line); margin-top:4px; padding-top:9px; }

/* ---------- Search results overlay ---------- */
.search-overlay{
  position:fixed; inset:0; z-index:90;
  background: var(--cream);
  display:flex;
  flex-direction:column;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform: translateY(-8px);
  transition: opacity .24s ease, transform .24s ease, visibility 0s linear .24s;
}
.search-overlay.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform: translateY(0);
  transition: opacity .24s ease, transform .24s ease, visibility 0s linear 0s;
}
.search-overlay .searchhead{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
}
.search-overlay .results{ flex:1; overflow-y:auto; }

/* ---------- Footer ---------- */
footer{
  background: var(--indigo);
  color: rgba(255,246,233,0.75);
  padding: 22px 16px 30px;
  font-size:12.5px;
  text-align:center;
  margin-top:10px;
}
footer .fname{ font-family: var(--font-display); color: var(--cream); font-size:16px; margin-bottom:6px; }
footer a{ color: var(--turmeric); text-decoration:none; }

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%) translateY(20px);
  background: var(--indigo); color: var(--cream);
  padding:10px 18px; border-radius:999px;
  font-family: var(--font-utility); font-size:13px;
  z-index:200; opacity:0; pointer-events:none;
  transition: opacity .25s ease, transform .25s ease;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- Infinite scroll sentinel ---------- */
.loadmore-sentinel{
  display:none;
  text-align:center;
  padding: 14px 0 26px;
  font-family: var(--font-utility);
  font-size:12.5px;
  color: var(--indigo-soft);
}

/* ---------- Loading skeleton ---------- */
.skeleton{ background: linear-gradient(90deg, var(--cream-2) 25%, #fff 37%, var(--cream-2) 63%); background-size:400% 100%; animation: shimmer 1.4s ease infinite; }
@keyframes shimmer{ 0%{background-position:100% 0;} 100%{background-position:0 0;} }

/* ===========================================================
   Product detail page (product.html)
   =========================================================== */
.card .imgwrap, .card .name{ text-decoration:none; color:inherit; }
a.imgwrap{ display:block; }
a.name{ display:-webkit-box; cursor:pointer; }

.pd-wrap{ padding: 14px 16px 6px; max-width:640px; margin:0 auto; }
.pd-breadcrumb{
  font-family: var(--font-utility);
  font-size:11.5px;
  color: var(--indigo-soft);
  margin-bottom:10px;
}
.pd-breadcrumb a{ color: var(--indigo-soft); text-decoration:none; }
.pd-breadcrumb a:hover{ text-decoration:underline; }
.pd-gallery{
  position:relative;
  width:100%;
  border-radius: var(--radius);
  overflow:hidden;
  margin-bottom:14px;
  background: var(--cream-2);
}
.pd-gallery-track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.pd-gallery-track::-webkit-scrollbar{ display:none; }
.pd-slide{ flex:0 0 100%; aspect-ratio:1/1; scroll-snap-align:start; }
.pd-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.pd-gallery .discount{
  position:absolute; top:10px; left:10px; z-index:1;
  background: var(--mehendi); color:#fff;
  font-family: var(--font-utility); font-weight:700; font-size:12px;
  padding:3px 8px; border-radius:8px;
}
.pd-dots{
  position:absolute; bottom:10px; left:0; right:0;
  display:flex; justify-content:center; gap:6px;
  pointer-events:none;
}
.pd-dot{
  width:6px; height:6px; border-radius:50%;
  background: rgba(255,255,255,0.55);
  transition: background .2s ease, width .2s ease;
}
.pd-dot.active{ background:#fff; width:16px; border-radius:3px; }
.pd-title{ font-family: var(--font-display); font-size:20px; margin:0 0 4px; line-height:1.3; }
.pd-title-hindi{ font-family: var(--font-body); font-size:14px; color: var(--indigo-soft); margin:0 0 8px; }
.pd-prices{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:6px; font-family: var(--font-utility); }
.pd-prices .price{ font-size:24px; font-weight:700; color: var(--rani); }
.pd-prices .mrp{ font-size:15px; text-decoration:line-through; color:#9b93b0; }
.pd-stock{ font-family: var(--font-utility); font-weight:700; font-size:12.5px; margin-bottom:10px; }
.pd-stock.in{ color: var(--mehendi); }
.pd-stock.out{ color:#C8395A; }
.pd-links{ display:flex; gap:10px; margin-bottom:12px; }
.pd-link-btn{
  display:flex; align-items:center; gap:5px;
  border:1px solid var(--line); background:#fff; color: var(--indigo-soft);
  border-radius:999px; padding:6px 12px;
  font-family: var(--font-utility); font-weight:700; font-size:12px;
  transition: transform .12s ease, border-color .18s ease, color .18s ease;
}
.pd-link-btn:hover{ border-color: var(--rani); color: var(--rani); }
.pd-link-btn:active{ transform: scale(.95); }
.size-table{ width:100%; border-collapse:collapse; font-size:13px; }
.size-table th, .size-table td{ padding:7px 6px; text-align:center; border-bottom:1px solid var(--line); }
.size-table th{ font-family: var(--font-utility); color: var(--indigo-soft); font-weight:700; font-size:11.5px; }
.size-table td:first-child, .size-table th:first-child{ text-align:left; font-weight:700; color: var(--indigo); }
.pd-desc{ font-size:14px; line-height:1.6; color: var(--indigo); margin-bottom:8px; }
.pd-id{ font-family: var(--font-utility); font-size:11px; color:#9b93b0; margin-bottom:16px; }
.pd-actions{ display:flex; gap:10px; align-items:center; margin-bottom:8px; }
.pd-actions .stepper{ flex:1; }
.pd-actions .stepper button{ width:44px; height:44px; font-size:18px; }

/* ---------- Related products rail (also powers the homepage
   Popular Picks / New Arrivals carousels — same rail, smooth snap scroll) ---------- */
.related-section, .carousel-section{ padding-top:10px; }
.related-rail{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding: 0 16px 20px;
  scrollbar-width:none;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
}
.related-rail::-webkit-scrollbar{ display:none; }
.related-rail .card{ flex-shrink:0; width:150px; scroll-snap-align:start; }

/* ---------- Reviews ---------- */
.reviews-section{ max-width:640px; margin:0 auto; padding: 10px 16px 30px; }
.review-summary{
  display:flex; align-items:center; gap:14px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; margin-bottom:16px;
}
.review-avg{ font-family: var(--font-display); font-size:32px; font-weight:700; color: var(--rani); }
.stars{ color:#D8D2E8; font-size:15px; letter-spacing:1px; }
.stars-lg{ font-size:18px; }
.stars .star.filled{ color: var(--marigold); }
.review-form{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; margin-bottom:18px;
}
.review-form h3{ font-family: var(--font-display); font-size:15px; margin:0 0 10px; }
.star-input{ display:flex; gap:4px; }
.star-btn{
  border:none; background:transparent; font-size:26px; line-height:1;
  color:#D8D2E8; padding:2px;
}
.star-btn.filled{ color: var(--marigold); }
.review-item{
  border-bottom:1px solid var(--line);
  padding: 12px 0;
}
.review-item-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:2px; }
.review-name{ font-weight:600; font-size:13.5px; }
.review-date{ font-family: var(--font-utility); font-size:11px; color:#9b93b0; margin-bottom:6px; }
.review-comment{ font-size:13.5px; line-height:1.5; margin:0; color: var(--indigo); }

/* ---------- Shared form field style (cart drawer, review form) ---------- */
.field{ margin-bottom:10px; }
.field label{
  display:block; font-family: var(--font-utility); font-size:12px; font-weight:600;
  color: var(--indigo-soft); margin-bottom:4px;
}
.field input, .field textarea{
  width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:8px;
  font-family: var(--font-body); font-size:14px; background: var(--cream);
  color: var(--indigo); box-sizing:border-box;
}
.field textarea{ resize:vertical; min-height:56px; }

/* ===========================================================
   Admin: Orders panel
   =========================================================== */
.order-controls{ display:flex; gap:8px; margin-bottom:10px; }
.order-controls select, .order-controls input{ flex:1; }
.orow{
  border:1px solid var(--line); border-radius:10px; padding:10px;
  background:#fff; margin-bottom:8px;
}
.orow .ohead{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:4px; }
.orow .oid{ font-family: var(--font-utility); font-weight:700; font-size:13px; color: var(--indigo); }
.orow .odate{ font-family: var(--font-utility); font-size:11px; color:#9b93b0; }
.orow .ocust{ font-size:13px; margin-bottom:2px; }
.orow .ophone{ font-family: var(--font-utility); font-size:12px; color: var(--indigo-soft); margin-bottom:2px; }
.orow .oaddress{ font-size:12.5px; color: var(--indigo); margin-bottom:6px; }
.orow .oitems{ font-size:12.5px; color: var(--indigo); background: var(--cream); border-radius:8px; padding:6px 8px; margin-bottom:6px; line-height:1.5; }
.orow .ofoot{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.orow .ototal{ font-family: var(--font-utility); font-weight:700; font-size:14px; }
.status-pill{
  font-family: var(--font-utility); font-weight:700; font-size:11px;
  padding:3px 9px; border-radius:999px; text-transform:uppercase;
}
.status-pill.pending{ background:#FFF1D6; color:#B4790A; }
.status-pill.fulfilled{ background:#DFF3E6; color: var(--mehendi); }
.status-pill.cancelled{ background:#FBE1E6; color:#C8395A; }

/* ===========================================================
   Motion: card entrances, tactile presses, cart badge bump,
   and loading skeletons. Respects prefers-reduced-motion via
   the global rule near the top of this file.
   =========================================================== */
.card{
  animation: cardIn .3s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes cardIn{
  from{ opacity:0; transform: translateY(10px) scale(.98); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

.primary-btn, .ghost-btn, .card .addbtn, .card .buynowbtn, .chip, .subchip, .iconbtn, .star-btn, .whatsapp-btn{
  transition: transform .12s ease;
}
.primary-btn:active, .ghost-btn:active, .card .addbtn:active, .card .buynowbtn:active,
.chip:active, .subchip:active, .iconbtn:active, .star-btn:active{
  transform: scale(.94);
}

.badge{ transition: transform .1s ease; }
@keyframes badgeBump{ 0%{ transform:scale(1); } 40%{ transform:scale(1.4); } 100%{ transform:scale(1); } }
.badge.bump{ animation: badgeBump .32s cubic-bezier(.34,1.56,.64,1); }

.fly-clone{
  position:fixed; z-index:300; pointer-events:none;
  border-radius:50%;
  overflow:hidden;
  box-shadow: 0 10px 24px rgba(32,27,61,0.28);
  will-change:transform,opacity;
}
@keyframes cartHit{
  0%{ transform: scale(1) rotate(0deg); }
  20%{ transform: scale(1.34) rotate(-6deg); }
  45%{ transform: scale(.8) rotate(4deg); }
  70%{ transform: scale(1.1) rotate(-2deg); }
  100%{ transform: scale(1) rotate(0deg); }
}
.iconbtn.cart-hit{ animation: cartHit .55s cubic-bezier(.34,1.56,.64,1); }

/* A quick, gentle pop whenever a card's Add button swaps to a stepper (or
   back), without re-animating the whole card. */
.card-actions > *, .pd-actions > *{ animation: actionsIn .2s ease both; }
@keyframes actionsIn{ from{ opacity:0; transform: scale(.92); } to{ opacity:1; transform: scale(1); } }

/* Sections (Popular Picks / New Arrivals) fade + rise into place as they
   scroll into view, via initScrollReveal() in utils.js. */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1); }
.reveal.in-view{ opacity:1; transform:none; }

/* ---------- Skeleton placeholders (initial load) ---------- */
.skel-img{ width:100%; aspect-ratio:1/1; border-radius: var(--radius) var(--radius) 0 0; }
.skel-line{ height:10px; border-radius:6px; margin:8px 9px; }
.skel-line.short{ width:55%; }
.skeleton-card .body{ padding:8px 0 9px; }

/* ===========================================================
   Checkout: promo codes, payment method, order confirmation
   =========================================================== */
.promo-row{ display:flex; gap:8px; }
.promo-row input{ flex:1; }
.promo-row .ghost-btn{ flex-shrink:0; padding:9px 14px; }

.pay-options{ display:flex; flex-direction:column; gap:8px; }
.pay-option{
  display:flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:600; color: var(--indigo);
  border:1px solid var(--line); border-radius:10px;
  padding:9px 10px; background:#fff; cursor:pointer;
}
.pay-option input{ width:auto; accent-color: var(--rani); }

.upi-box{
  margin-top:10px; padding:12px; text-align:center;
  background:#fff; border:1px solid var(--line); border-radius:10px;
}
.upi-box img{ border-radius:8px; margin:0 auto 8px; display:block; }
.upi-box .ghost-btn{ text-decoration:none; display:inline-block; }
.upi-box .hint{ margin:8px 0 0; }

.order-confirm{ text-align:center; padding: 30px 10px 10px; }
.confirm-icon{
  width:64px; height:64px; margin:0 auto 14px;
  border-radius:50%; background: var(--mehendi); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:32px; font-weight:700;
  animation: confirmPop .4s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes confirmPop{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:scale(1); } }
.order-confirm h2{ font-family: var(--font-display); font-size:20px; margin:0 0 6px; }
.order-confirm .confirm-id{ font-family: var(--font-utility); font-size:14px; margin:0 0 8px; }
.order-confirm .hint{ max-width:34ch; margin:0 auto; }

.card .low-stock{
  font-family: var(--font-utility);
  font-size:10.5px; font-weight:700;
  color:#B4790A;
  margin-bottom:4px;
}

/* ---------- Sort / in-stock filter row ---------- */
.sort-filter-row{
  display:flex; align-items:center; gap:10px;
  padding: 0 16px 10px;
  flex-wrap:wrap;
}
.sort-filter-row select{
  padding:7px 10px; border:1px solid var(--line); border-radius:8px;
  font-family: var(--font-utility); font-weight:600; font-size:12.5px;
  background:#fff; color: var(--indigo);
}
.instock-toggle{
  display:flex; align-items:center; gap:6px;
  font-family: var(--font-utility); font-weight:600; font-size:12.5px;
  color: var(--indigo-soft);
}
.instock-toggle input{ width:auto; accent-color: var(--rani); }

/* ---------- Shared status line (review submission, promo code, etc.) ---------- */
.statusline{ font-family: var(--font-utility); font-size:12.5px; margin-top:8px; }
.statusline.ok{ color: var(--mehendi); }
.statusline.err{ color:#C8395A; }

/* ===========================================================
   Static pages: About, Contact
   =========================================================== */
.static-page{ max-width:640px; margin:0 auto; padding: 18px 16px 30px; }
.static-breadcrumb{
  font-family: var(--font-utility); font-size:11.5px; color: var(--indigo-soft);
  margin-bottom:12px;
}
.static-breadcrumb a{ color: var(--indigo-soft); text-decoration:none; }
.static-breadcrumb a:hover{ text-decoration:underline; }
.static-page h1{ font-family: var(--font-display); font-size:23px; margin:0 0 12px; }
.static-page h2{ font-family: var(--font-display); font-size:17px; margin:22px 0 8px; }
.static-page p{ font-size:14px; line-height:1.65; color: var(--indigo); margin:0 0 12px; }
.static-page a{ color: var(--rani); font-weight:600; }

.about-cats{ display:flex; flex-wrap:wrap; gap:8px; margin: 6px 0 16px; }
.about-cats .chip{ cursor:default; }

.contact-cards{ display:flex; flex-direction:column; gap:10px; margin: 14px 0 22px; }
.contact-card{
  display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding:14px; text-decoration:none; color: var(--indigo);
  box-shadow: 0 3px 10px rgba(32,27,61,0.05);
}
.contact-card.whatsapp{ border-color: rgba(37,211,102,0.4); }
.contact-icon{ font-size:24px; flex-shrink:0; }
.contact-detail{ font-family: var(--font-utility); font-size:13px; color: var(--indigo-soft); }

.map-embed{
  border-radius: var(--radius); overflow:hidden; border:1px solid var(--line);
  box-shadow: 0 3px 10px rgba(32,27,61,0.05);
}
.map-embed iframe{ display:block; }

/* ===========================================================
   Floating WhatsApp contact button
   =========================================================== */
.wa-float{
  position:fixed;
  right:16px;
  bottom:20px;
  width:54px; height:54px;
  border-radius:50%;
  background: linear-gradient(135deg, #25D366, #1DA851);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 20px rgba(29,168,81,0.4);
  z-index:70;
  text-decoration:none;
  transition: transform .15s ease;
}
.wa-float:active{ transform: scale(.92); }


/* =========================================================
   V4 FUTURISTIC EXPERIENCE LAYER — frontend only
   Google Sheets / Apps Script logic remains completely unchanged.
   ========================================================= */
:root{--neon:#ff4f9a;--cyan:#63e6ff;--glass:rgba(255,255,255,.72);--dark:#101024}
body{background:linear-gradient(180deg,#fff8ef 0%,#fff4fb 48%,#f7f5ff 100%)}
.app-loader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;align-content:center;gap:14px;background:radial-gradient(circle at 50% 35%,#302659 0%,#151126 45%,#090812 100%);color:#fff;transition:opacity .55s ease,visibility .55s ease;font-family:var(--font-utility);letter-spacing:.08em}
.app-loader.hide{opacity:0;visibility:hidden;pointer-events:none}.loader-orbit{position:absolute;width:84px;height:84px;border-radius:50%;border:2px solid rgba(255,255,255,.12);border-top-color:var(--cyan);border-right-color:var(--neon);animation:spin 1.1s linear infinite}.loader-logo{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,var(--rani),#7d5cff);box-shadow:0 0 35px rgba(255,79,154,.55);font-weight:800;font-size:17px}@keyframes spin{to{transform:rotate(360deg)}}
.stickybar{height:62px;padding:0 16px;background:rgba(255,250,245,.66);border-bottom:1px solid rgba(255,255,255,.45);box-shadow:0 8px 28px rgba(36,25,70,.06)}.stickybar.solid{background:rgba(255,250,247,.9);box-shadow:0 12px 35px rgba(36,25,70,.1)}.stickybar .brandmark .glyph{width:34px;height:34px;border-radius:12px;box-shadow:0 7px 20px rgba(200,17,99,.3)}.searchwrap{height:42px;background:rgba(255,255,255,.72);box-shadow:inset 0 1px 0 #fff,0 4px 18px rgba(32,27,61,.05)}.iconbtn{width:42px;height:42px;border-radius:14px;transition:transform .25s,background .25s}.iconbtn:hover{transform:translateY(-2px);background:rgba(200,17,99,.08)}
.hero{min-height:420px;padding:54px clamp(20px,5vw,70px) 34px;background:radial-gradient(circle at 15% 20%,rgba(99,230,255,.24),transparent 25%),radial-gradient(circle at 82% 18%,rgba(255,79,154,.36),transparent 28%),linear-gradient(135deg,#15112d,#25184a 48%,#16122c);isolation:isolate}.hero:after{content:'';position:absolute;inset:0;z-index:-1;opacity:.25;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(to bottom,#000,transparent)}.hero-glow{position:absolute;border-radius:50%;filter:blur(20px);opacity:.45;pointer-events:none;animation:floatGlow 7s ease-in-out infinite}.glow-a{width:220px;height:220px;background:#ff2f86;right:-60px;top:45px}.glow-b{width:180px;height:180px;background:#4bdcff;left:-70px;bottom:-40px;animation-delay:-3s}@keyframes floatGlow{50%{transform:translate(20px,-16px) scale(1.08)}}.hero-kicker{display:inline-flex;align-items:center;gap:9px;padding:7px 12px;border:1px solid rgba(255,255,255,.15);border-radius:999px;background:rgba(255,255,255,.08);backdrop-filter:blur(12px);font-family:var(--font-utility);font-size:11px;letter-spacing:.13em}.live-dot{width:7px;height:7px;border-radius:50%;background:#6dffb0;box-shadow:0 0 14px #6dffb0}.hero-title{font-size:clamp(32px,6vw,62px);line-height:.98;white-space:normal;max-width:760px;margin:22px 0 14px;letter-spacing:-.035em}.hero-title span{background:linear-gradient(90deg,#ffd86b,#ff72b0,#78e8ff);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-subtitle{max-width:620px;margin:0 0 25px;color:rgba(255,255,255,.74);font-size:15px;line-height:1.65}.hero-stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}.hero-stats div{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.11);backdrop-filter:blur(14px)}.hero-stats strong{font-size:17px}.hero-stats span{font-size:12px;color:rgba(255,255,255,.85)}.hero-tiles{max-width:620px;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.hero-tile{border-radius:18px;background:rgba(255,255,255,.1);backdrop-filter:blur(18px);transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s,box-shadow .3s}.hero-tile:hover{transform:translateY(-6px);background:rgba(255,255,255,.17);box-shadow:0 18px 30px rgba(0,0,0,.18)}
.cat-rail-outer{position:sticky;top:62px;z-index:35;padding-top:12px;background:rgba(255,248,240,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(32,27,61,.06)}.chip,.subchip{border-radius:999px;transition:all .25s}.chip:hover,.subchip:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(32,27,61,.1)}
.section-title{margin-top:28px}.grid{padding-bottom:25px}.card{border:1px solid rgba(255,255,255,.75);background:rgba(255,255,255,.76);box-shadow:0 10px 28px rgba(40,28,76,.08);border-radius:22px;overflow:hidden}.card:hover{box-shadow:0 22px 45px rgba(40,28,76,.15);transform:translateY(-7px)}.card .imgwrap{background:linear-gradient(145deg,#fff,#f0eaff)}.card .addbtn{border-radius:12px;background:linear-gradient(135deg,var(--rani),#ff5798);box-shadow:0 8px 18px rgba(200,17,99,.2)}.carousel-section{position:relative}.related-rail{scroll-snap-type:x mandatory}.related-rail .card{scroll-snap-align:start}
.wa-float{width:58px!important;height:58px!important;right:20px!important;bottom:22px!important;border-radius:20px!important;background:linear-gradient(135deg,#22c55e,#13a86a)!important;box-shadow:0 16px 35px rgba(16,185,129,.35)!important;animation:waPulse 2.8s infinite}@keyframes waPulse{50%{transform:translateY(-5px);box-shadow:0 20px 45px rgba(16,185,129,.5)}}
@media(min-width:900px){.hero{min-height:500px;padding-top:80px}.hero-tiles{grid-template-columns:repeat(4,145px)}.stickybar{padding-left:clamp(24px,5vw,90px);padding-right:clamp(24px,5vw,90px)}.cat-rail,.subchip-row{padding-left:clamp(20px,5vw,90px)!important;padding-right:clamp(20px,5vw,90px)!important}}
@media(max-width:560px){.hero{min-height:0;padding:34px 16px 22px}.hero-title{font-size:35px}.hero-subtitle{font-size:13px}.hero-stats div{padding:8px 10px}.hero-tiles{gap:7px}.hero-tile{padding:9px 2px}.hero-tile-label{font-size:10px}.hero-tile-icon{width:32px;height:32px}.cat-rail-outer{top:62px}}

/* ================= V5 PREMIUM FUTURISTIC UI LAYER ================= */
:root{--neo:#7c3aed;--electric:#06b6d4;--glass:rgba(255,255,255,.72)}
body{background:radial-gradient(circle at 10% 10%,rgba(124,58,237,.05),transparent 28%),radial-gradient(circle at 90% 30%,rgba(6,182,212,.06),transparent 25%),var(--cream);}
.stickybar{backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid rgba(255,255,255,.35);}
.stickybar.solid{box-shadow:0 12px 35px rgba(42,25,66,.12)}
.hero{isolation:isolate;overflow:hidden;border-radius:0 0 32px 32px;min-height:420px;padding-top:90px;background:linear-gradient(135deg,#260735 0%,#7b1459 48%,#c81163 100%)}
.hero:before,.hero:after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(1px);animation:floatOrb 9s ease-in-out infinite alternate}.hero:before{width:260px;height:260px;right:-80px;top:40px;background:radial-gradient(circle,rgba(6,182,212,.42),transparent 70%)}.hero:after{width:330px;height:330px;left:-150px;bottom:-120px;background:radial-gradient(circle,rgba(255,201,60,.3),transparent 70%)}
@keyframes floatOrb{to{transform:translate3d(-20px,25px,0) scale(1.08)}}
.hero-title{letter-spacing:-.03em;text-shadow:0 12px 35px rgba(0,0,0,.2)}.hero-title span{background:linear-gradient(90deg,#fff,#ffd1e6,#a5f3fc);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-stats>div,.hero-tile{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.22);box-shadow:0 14px 35px rgba(0,0,0,.14)}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.section-title h2{letter-spacing:-.02em}
.carousel-section{position:relative}.carousel-controls{display:flex;gap:8px}.carousel-nav{width:38px;height:38px;border:0;border-radius:50%;background:#fff;color:var(--indigo);font-size:21px;box-shadow:0 8px 24px rgba(42,25,66,.12);cursor:pointer}.carousel-nav:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(124,58,237,.2)}
.related-rail{scroll-behavior:smooth;scroll-padding-left:16px;padding-bottom:12px}.related-rail:after{content:"";min-width:6px}
.card{border:1px solid rgba(124,58,237,.09);box-shadow:0 8px 26px rgba(42,25,66,.07);transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s,border-color .28s;background:linear-gradient(145deg,#fff,rgba(255,255,255,.78));overflow:hidden}.card:hover{transform:translateY(-7px);border-color:rgba(124,58,237,.25);box-shadow:0 20px 45px rgba(42,25,66,.15)}
.card img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}.card:hover img{transform:scale(1.055)}.addbtn{background:linear-gradient(135deg,var(--rani),#8b2be2);box-shadow:0 8px 18px rgba(200,17,99,.2)}.addbtn:hover{filter:brightness(1.08);transform:translateY(-1px)}
#productGrid .card{animation:cardIn .45s both}@keyframes cardIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.cart-drawer{box-shadow:0 -20px 70px rgba(20,10,35,.25);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.cart-summary{position:sticky;bottom:0;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);padding-top:14px;border-top:1px solid var(--line)}
.app-loader{background:radial-gradient(circle at center,#34114c,#120719)!important}.loader-logo{box-shadow:0 0 0 8px rgba(255,255,255,.05),0 0 50px rgba(200,17,99,.55)}
.toast-v5{position:fixed;left:50%;bottom:92px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:rgba(25,12,42,.92);color:#fff;padding:12px 18px;border-radius:999px;font-family:var(--font-utility);box-shadow:0 15px 40px rgba(0,0,0,.22);transition:.3s;z-index:9999}.toast-v5.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:640px){.hero{min-height:380px;padding:78px 18px 28px;border-radius:0 0 24px 24px}.hero-title{font-size:clamp(34px,10vw,48px)}.hero-stats{gap:7px}.hero-stats>div{padding:8px 9px}.carousel-controls{display:none}.card:hover{transform:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}


/* =========================================================
   V5.1 MOBILE OVERLAY + HEADER FIXES
   Keeps the page behind the cart completely locked and makes
   the compact home search bar single-line on narrow screens.
   ========================================================= */

/* Prevent the background page from scrolling while a modal drawer is open. */
html.modal-open,
body.modal-open{
  overflow:hidden !important;
  overscroll-behavior:none;
  touch-action:none;
}
body.modal-open{
  position:fixed;
  width:100%;
  left:0;
  right:0;
}

/* The overlay must absorb touch/scroll gestures instead of passing them to home. */
.overlay.open{
  overscroll-behavior:contain;
  touch-action:auto;
}
.cart-drawer{
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}

/* Proper cart close button: fixed inside the drawer header and never overlaps content. */
.cart-drawer .closebtn{
  position:absolute;
  top:12px;
  right:12px;
  z-index:5;
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid rgba(32,27,61,.12);
  background:rgba(255,255,255,.96);
  color:var(--indigo);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
  box-shadow:0 8px 22px rgba(32,27,61,.12);
}
.cart-drawer .closebtn:active{ transform:scale(.94); }
.cart-drawer > h2{
  padding-right:56px;
  min-height:38px;
  display:flex;
  align-items:center;
}

/* Home header search must stay a compact single line on phones. */
#searchTrigger{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
}
#searchTrigger > span{
  display:block;
  min-width:0;
  flex:1;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
@media (max-width:430px){
  .stickybar{
    gap:6px;
    padding-left:10px;
    padding-right:10px;
  }
  .stickybar .brandmark{ gap:5px; }
  .stickybar .brandmark .hide-sm{ display:none; }
  .stickybar .brandmark .glyph{ width:36px; height:36px; border-radius:12px; }
  #searchTrigger{ padding-left:11px; padding-right:11px; }
  #searchTrigger > span{ font-size:12px !important; }
  #trackOrderTrigger, #cartTrigger{ width:40px; height:40px; }
}

/* =========================================================
   V5.2 CART REGRESSION FIX
   The V5 sticky checkout panel could cover the cart line items on mobile.
   Keep one scroll container and let the cart items render in normal flow.
   ========================================================= */
.cart-drawer{
  display:block;
  max-height:92dvh;
  padding:16px 16px calc(20px + env(safe-area-inset-bottom));
  overflow-y:auto;
  overflow-x:hidden;
}

/* Critical: the checkout form must NOT overlay #cartItems. */
.cart-drawer .cart-summary{
  position:static !important;
  bottom:auto !important;
  z-index:auto;
  margin-top:14px;
  padding:14px 0 0;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

#cartItems{
  display:block;
  position:relative;
  z-index:1;
  margin:0 0 14px;
  min-height:1px;
}

.cart-item{
  position:relative;
  z-index:1;
  background:rgba(255,255,255,.58);
}

/* Reserve header space for the close button without covering the first item. */
.cart-drawer > h2{
  position:relative;
  z-index:2;
  padding-right:58px;
  margin-bottom:12px;
}

@media (max-width:640px){
  .cart-drawer{
    max-height:94dvh;
    border-radius:22px 22px 0 0;
  }
  .cart-item{
    padding:10px 0;
  }
}


/* =========================================================
   V6 CART — stable two-region layout
   Header never overlaps, items and checkout share one explicit scroll area,
   and the background page remains independently locked.
   ========================================================= */
.overlay.open{touch-action:auto;overscroll-behavior:contain;}
.cart-drawer{
  display:flex !important;
  flex-direction:column;
  height:min(92dvh,760px);
  max-height:92dvh;
  padding:0 !important;
  overflow:hidden !important;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,249,243,.98));
}
.cart-header{
  flex:0 0 auto;
  min-height:74px;
  padding:16px 72px 14px 18px;
  display:flex;
  align-items:center;
  border-bottom:1px solid rgba(32,27,61,.10);
  position:relative;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  z-index:3;
}
.cart-header h2{margin:2px 0 0 !important;padding:0 !important;min-height:0 !important;font-size:21px;line-height:1.15;}
.cart-eyebrow{font-family:var(--font-utility);font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--rani);}
.cart-drawer .closebtn{position:absolute !important;top:18px !important;right:16px !important;width:42px !important;height:42px !important;border-radius:14px !important;z-index:5;}
.cart-main{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 16px calc(24px + env(safe-area-inset-bottom));overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;}
.cart-items-section{padding:14px 0 8px;}
.cart-section-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-utility);font-size:11px;color:var(--indigo-soft);margin:0 2px 8px;text-transform:uppercase;letter-spacing:.04em;}
#cartItems{margin:0;display:flex;flex-direction:column;gap:9px;}
.cart-item{display:grid !important;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px !important;border:1px solid rgba(32,27,61,.09);border-radius:16px;background:rgba(255,255,255,.78);box-shadow:0 6px 20px rgba(32,27,61,.05);}
.cart-item img{width:58px !important;height:58px !important;border-radius:13px !important;}
.cart-item .ci-name{font-size:13px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cart-item .ci-id{margin-top:3px;font-size:10.5px;}
.cart-item .ci-price{margin-top:5px;font-size:13px;}
.cart-item-actions{display:flex;flex-direction:column;align-items:flex-end;gap:4px;}
.cart-item .stepper{width:92px;height:32px;border-radius:10px;}
.cart-item .stepper button{width:30px;height:30px;}
.cart-remove{border:0;background:transparent;color:#b13b5c;font-family:var(--font-utility);font-size:10px;padding:2px 4px;}
.cart-summary{position:static !important;margin:14px 0 0 !important;padding:18px 0 0 !important;border-top:1px solid rgba(32,27,61,.12);background:transparent !important;backdrop-filter:none !important;}
.cart-checkout-title h3{margin:2px 0 14px;font-family:var(--font-display);font-size:18px;color:var(--indigo);}
.cart-summary .field{margin-bottom:14px;}
.cart-summary input,.cart-summary textarea{background:#fff;border:1px solid rgba(32,27,61,.13);box-shadow:0 4px 14px rgba(32,27,61,.04);}
.cart-summary textarea{min-height:92px;}
.cart-summary .optional{font-weight:400;color:var(--indigo-soft);}
.pay-options{display:grid;gap:8px;}
.pay-option{min-height:58px;display:flex !important;align-items:center;gap:12px;border:1px solid rgba(32,27,61,.12);border-radius:15px;padding:0 16px;background:#fff;font-family:var(--font-utility);font-weight:700;}
.pay-option input{width:20px;height:20px;accent-color:var(--rani);}
.cart-total-box{border-radius:16px;padding:13px 14px;margin:16px 0 12px;background:linear-gradient(135deg,rgba(124,58,237,.06),rgba(200,17,99,.07));border:1px solid rgba(124,58,237,.10);}
.cart-summary .row{margin-bottom:7px;}
.cart-summary .row.total{padding-top:9px;margin-top:6px;border-top:1px dashed rgba(32,27,61,.16);font-size:20px;}
#orderWaBtn{min-height:58px;margin-top:0 !important;border-radius:16px;}
.cart-clear{width:100%;margin-top:9px !important;min-height:48px;border-radius:14px;}
.cart-empty{padding:72px 20px;text-align:center;line-height:1.7;}.cart-empty strong{display:block;font-family:var(--font-display);font-size:19px;color:var(--indigo);}.cart-empty-icon{font-size:38px;margin-bottom:10px;}
@media(max-width:640px){
  .cart-drawer{height:94dvh;max-height:94dvh;border-radius:24px 24px 0 0 !important;}
  .cart-header{padding-left:16px;}
  .cart-main{padding-left:14px;padding-right:14px;}
  .cart-item{grid-template-columns:52px minmax(0,1fr);}
  .cart-item img{width:52px !important;height:52px !important;}
  .cart-item-actions{grid-column:2;flex-direction:row;justify-content:space-between;width:100%;align-items:center;}
  .cart-item .stepper{order:2;}
  .cart-remove{order:1;padding-left:0;}
}


/* ================= V8.1 FAST BRANDED LOADER ================= */
.app-loader{background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.98) 0%,rgba(255,246,233,.98) 46%,rgba(255,239,216,.98) 100%)!important;color:var(--indigo);gap:12px;isolation:isolate}
.app-loader:before{content:'';position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(200,17,99,.10),rgba(242,169,59,.07) 42%,transparent 70%);z-index:-1;animation:loaderBreathe 1.8s ease-in-out infinite}
.loader-brand{position:relative;width:78px;height:78px;display:grid;place-items:center}
.loader-logo{position:relative;z-index:2;width:58px;height:58px;border-radius:18px;background:linear-gradient(135deg,var(--rani),var(--rani-dark));color:#fff;box-shadow:0 10px 28px rgba(200,17,99,.22)!important;font-family:var(--font-display);font-size:17px;letter-spacing:.04em}
.loader-ring,.loader-orbit{position:absolute!important;inset:0;width:auto!important;height:auto!important;border:2px solid rgba(200,17,99,.10)!important;border-top-color:var(--rani)!important;border-right-color:var(--marigold)!important;animation:loaderSpin .75s linear infinite}
.loader-copy{display:grid;gap:2px;text-align:center;font-family:var(--font-body);letter-spacing:0}.loader-copy strong{font-family:var(--font-display);font-size:17px;color:var(--indigo)}.loader-copy span{font-size:12px;color:var(--indigo-soft)}
.loader-progress{width:min(130px,36vw);height:3px;border-radius:999px;background:rgba(32,27,61,.08);overflow:hidden;margin-top:2px}.loader-progress i{display:block;width:45%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--rani),var(--marigold));animation:loaderSweep .75s ease-in-out infinite}
.app-loader.hide{transition:opacity .22s ease,visibility .22s ease;transform:translateZ(0)}
@keyframes loaderSpin{to{transform:rotate(360deg)}}@keyframes loaderSweep{from{transform:translateX(-120%)}to{transform:translateX(300%)}}@keyframes loaderBreathe{50%{transform:scale(1.08);opacity:.7}}
@media(prefers-reduced-motion:reduce){.loader-ring,.loader-progress i,.app-loader:before{animation:none!important}}