/* ============================================================
   Diwali Sale Theme — toggled via Admin → Settings → Diwali Sale
   Theme. Scoped entirely under .diwali-theme (added to <body>
   only while the toggle is on), so this file is fully inert
   whenever the sale is off — nothing here touches app.css
   itself, safe to leave in place year-round.
   ============================================================ */

.diwali-theme{
  --kesari:#C08A1E;
  --kesari-dark:#7A1F2B;
  --kesari-light:#E3B04B;
  --gold:#C9972C;
}

/* Announcement bar — warm shimmering gold/maroon gradient with diya flourishes either side of the message */
.diwali-theme .announce{
  background:linear-gradient(90deg,#7A1F2B,#C08A1E 50%,#7A1F2B);
  background-size:200% 100%;
  animation:diwaliShimmer 8s ease-in-out infinite;
}
.diwali-theme .announce-item::before{content:'🪔 ';}
.diwali-theme .announce-item::after{content:' 🪔';}
@keyframes diwaliShimmer{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}

/* Header — gold hairline instead of the neutral one */
.diwali-theme header.site{border-bottom:1px solid rgba(192,138,30,0.35);}

/* Primary buttons (Shop Now, Buy Now, etc.) — rich gold-to-maroon gradient instead of flat orange */
.diwali-theme .btn-primary{
  background:linear-gradient(135deg,#D4A017,#7A1F2B);
  box-shadow:0 8px 20px rgba(122,31,43,0.3);
}
.diwali-theme .btn-primary:hover{
  background:linear-gradient(135deg,#B8860B,#5E1521);
}

/* Product cards — festive gold edge + glow, plus a small diya in the corner.
   container-type:inline-size lets the price/badge/save-banner block below
   size itself off THIS CARD's actual width (via @container) rather than
   the viewport's — a card on the Shop page (which has a sidebar eating
   space) is meaningfully narrower than a same-row card on the Home page
   at the identical screen width, so sizing off viewport width alone was
   wrong regardless of how many breakpoints got added. */
.diwali-theme .product-card{
  container-type:inline-size;
  container-name:pdcard;
  border:1px solid rgba(192,138,30,0.28);
  box-shadow:0 4px 18px rgba(192,138,30,0.14);
  transition:box-shadow .25s ease, transform .25s ease;
}
.diwali-theme .product-card:hover{
  box-shadow:0 10px 32px rgba(192,138,30,0.3);
  transform:translateY(-2px);
}
.diwali-theme .product-media-wrap{position:relative;}
.diwali-theme .product-media-wrap::before{
  content:'🪔';
  position:absolute;
  top:10px;
  left:10px;
  font-size:18px;
  z-index:3;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3));
  pointer-events:none;
}

/* Prices — deep maroon instead of green, ties the "now" price into the festive palette */
.diwali-theme .price-row .now{color:#7A1F2B;}

/* Eyebrow labels / pills (e.g. "HANDCRAFTED ACROSS INDIA") pick up the new gold automatically via
   the --kesari-dark variable above; this just warms their pill background on light sections */
.diwali-theme .hero-copy .eyebrow{background:#FFF8E8;}

@media (prefers-reduced-motion: reduce){
  .diwali-theme .announce{animation:none;}
}

/* ---------- Product card: Sale Price + SAVE banner ----------
   The badge-slider's transform is driven by JS (initDiwaliBadgeSliders in
   app.js), which measures each badge's actual rendered height at runtime
   and animates to it with a bouncy spring transition — deliberately NOT a
   fixed-pixel @keyframes animation, since hand-syncing a height value
   across breakpoints is exactly what caused the slide-overlap bug earlier.
   This way any future size/padding/font tweak here just works. */
.pd-diwali-price-card{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:8px 0 2px;flex-wrap:nowrap;}
.pd-diwali-sale-col{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.pd-diwali-sale-label{font-size:9.5px;font-weight:700;color:#C43B30;white-space:nowrap;}
.pd-diwali-sale-now{font-family:'Fraunces',serif;font-size:16px;font-weight:700;color:#C43B30;line-height:1.15;white-space:nowrap;}
.pd-diwali-badge-slider{position:relative;height:21px;overflow:hidden;margin-top:5px;width:fit-content;max-width:100%;}
.pd-diwali-badge-track{display:flex;flex-direction:column;transition:transform .6s cubic-bezier(0.68,-0.55,0.265,1.55);}
.pd-diwali-badge{display:flex;align-items:center;gap:2px;height:21px;line-height:21px;padding:0 6px;border-radius:999px;font-size:10px;font-weight:700;color:#fff;white-space:nowrap;width:fit-content;box-sizing:border-box;}
.pd-diwali-badge svg{flex-shrink:0;width:8px;height:8px;}
.pd-diwali-badge.green{background:#2F8A4E;}
.pd-diwali-badge.blue{background:#2A66C4;}
@media (prefers-reduced-motion: reduce){
  .pd-diwali-badge-track{transition:none;}
}

.pd-diwali-save-badge{
  position:relative;
  flex-shrink:0;
  width:52px;
  aspect-ratio:16/8;
  background-image:url('/images/diwali/sale-badge.png');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}
.pd-diwali-save-badge span{
  position:absolute;
  left:50%;
  top:64%;
  transform:translate(-50%,-50%) rotate(-9deg);
  font-family:'Fraunces',serif;
  font-weight:800;
  font-size:11px;
  color:#FFE9A8;
  text-shadow:0 1px 1px rgba(0,0,0,0.6);
  white-space:nowrap;
}

/* Wider CARDS (not wider screens — see container-type above) get noticeably
   more breathing room, scaled off the card's own rendered width so a
   narrow sidebar-constrained card never gets sizing meant for a full-width
   one, regardless of how wide the browser window itself is. */
@container pdcard (min-width:270px){
  .pd-diwali-sale-label{font-size:12px;}
  .pd-diwali-sale-now{font-size:22px;}
  .pd-diwali-badge-slider{height:27px;margin-top:7px;}
  .pd-diwali-badge{gap:4px;height:27px;line-height:27px;padding:0 13px;font-size:13px;}
  .pd-diwali-badge svg{width:11px;height:11px;}
  .pd-diwali-save-badge{width:92px;}
  .pd-diwali-save-badge span{font-size:13px;}
}