/* Diwali season theme. Everything is scoped to .diwali (set on <html> in the head, and on <body>) or the #diwali*
   sections, so switching the season off (diwali.js) leaves the normal home
   page exactly as it was. */

:root {
  --dw-night: #2a0b3a;
  --dw-plum: #5a1240;
  --dw-maroon: #7a1530;
  --dw-gold: #ffcb5c;
  --dw-gold-2: #f59e0b;
  --dw-cream: #fff7e6;
}

/* The Diwali hero takes the place of the normal slider for the season. */
html.diwali #heroSlider { display: none !important; }
html.diwali #diwaliHero[hidden] { display: block; }

html.diwali .announcement-bar {
  background: linear-gradient(90deg, var(--dw-maroon), var(--dw-plum) 50%, var(--dw-maroon));
  color: var(--dw-cream);
}

/* ── hero ─────────────────────────────────────────────── */
.dw-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(255, 170, 60, .45), transparent 55%),
    radial-gradient(circle at 15% 20%, rgba(255, 203, 92, .18), transparent 30%),
    radial-gradient(circle at 85% 30%, rgba(255, 120, 80, .16), transparent 30%),
    linear-gradient(160deg, var(--dw-night) 0%, var(--dw-plum) 55%, var(--dw-maroon) 100%);
  color: var(--dw-cream);
  padding: 3.2rem 0 2.2rem;
  text-align: center;
}
.dw-hero-inner { position: relative; z-index: 2; }
.dw-tag {
  display: inline-block; padding: .35rem .9rem; border-radius: 999px;
  background: rgba(255, 203, 92, .14); border: 1px solid rgba(255, 203, 92, .45);
  color: var(--dw-gold); font-weight: 700; letter-spacing: .02em; font-size: .9rem;
}
.dw-title {
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(1.9rem, 5.5vw, 3.4rem); line-height: 1.1;
  margin: .8rem auto .6rem; max-width: 18ch; color: #fff;
}
.dw-title em {
  font-style: normal;
  background: linear-gradient(90deg, #ffe39a, var(--dw-gold), var(--dw-gold-2), #ffe39a);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: dwShine 6s linear infinite;
}
.dw-sub { max-width: 40rem; margin: 0 auto 1.1rem; font-size: 1.05rem; opacity: .92; }

.dw-count { min-height: 3.3rem; display: flex; gap: .5rem; justify-content: center; align-items: center; flex-wrap: wrap; margin-bottom: 1.2rem; }
.dw-count-lbl { font-size: .9rem; opacity: .85; margin-right: .2rem; }
.dw-cell {
  display: inline-flex; flex-direction: column; align-items: center; min-width: 3.6rem;
  padding: .35rem .5rem; border-radius: 10px; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 203, 92, .35);
}
.dw-cell b { font-size: 1.45rem; color: var(--dw-gold); line-height: 1.1; }
.dw-today { font-weight: 700; color: var(--dw-gold); font-size: 1.1rem; }

.dw-actions { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }
.dw-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: .7rem 1.4rem; border-radius: 999px; font-weight: 700; text-decoration: none;
}
.dw-btn-gold {
  background: linear-gradient(180deg, #ffd978, var(--dw-gold-2)); color: #3a1300;
  box-shadow: 0 6px 24px rgba(245, 158, 11, .45);
}
.dw-btn-gold:hover { filter: brightness(1.05); }
.dw-btn-ghost { border: 1.5px solid rgba(255, 247, 230, .6); color: var(--dw-cream); }
.dw-btn-ghost:hover { background: rgba(255, 255, 255, .08); }

/* String of fairy lights along the top */
.dw-lights {
  position: absolute; top: 0; left: 0; right: 0; height: 26px; z-index: 1;
  display: flex; justify-content: space-between; padding: 0 1%;
  background: radial-gradient(ellipse at 50% -40%, rgba(0, 0, 0, .35), transparent 70%);
}
.dw-lights i {
  width: 9px; height: 13px; margin-top: 8px; border-radius: 50% 50% 45% 45%;
  background: var(--dw-gold); box-shadow: 0 0 10px 3px rgba(255, 203, 92, .75);
  animation: dwTwinkle 2.4s ease-in-out infinite;
}
.dw-lights i:nth-child(3n+1) { background: #ff7a59; box-shadow: 0 0 10px 3px rgba(255, 122, 89, .7); animation-delay: .4s; }
.dw-lights i:nth-child(3n+2) { background: #ffe9a8; animation-delay: .9s; }
.dw-lights i:nth-child(4n) { margin-top: 12px; }

/* A rangoli drawn in CSS: rings of petals, faint, behind the text */
.dw-rangoli {
  position: absolute; z-index: 0; width: min(560px, 120vw); aspect-ratio: 1;
  left: 50%; bottom: -55%; transform: translateX(-50%);
  background:
    repeating-conic-gradient(from 0deg, rgba(255, 203, 92, .14) 0 6deg, transparent 6deg 15deg),
    radial-gradient(circle, transparent 0 22%, rgba(255, 122, 89, .16) 22.5% 24%, transparent 24.5% 40%,
                    rgba(255, 203, 92, .18) 40.5% 42%, transparent 42.5% 60%, rgba(255, 203, 92, .12) 60.5% 62%, transparent 62.5%);
  border-radius: 50%;
  animation: dwSpin 120s linear infinite;
  -webkit-mask: radial-gradient(circle, #000 60%, transparent 71%); mask: radial-gradient(circle, #000 60%, transparent 71%);
}

/* Diyas with flickering flames */
.dw-diyas { display: flex; justify-content: center; gap: clamp(.8rem, 4vw, 2.2rem); margin-top: 1.6rem; }
.dw-diya {
  position: relative; width: 46px; height: 20px;
  background: linear-gradient(180deg, #e0782a, #a5401a);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  box-shadow: inset 0 3px 0 rgba(255, 210, 140, .5), 0 4px 10px rgba(0, 0, 0, .35);
}
.dw-flame {
  position: absolute; left: 50%; top: -22px; width: 12px; height: 22px; transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 70%, #fff7c2 0 25%, #ffcb5c 45%, #ff7a1a 75%, transparent 76%);
  border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%;
  filter: drop-shadow(0 0 8px rgba(255, 170, 60, .9));
  transform-origin: 50% 100%;
  animation: dwFlicker 1.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.37s);
}

@keyframes dwFlicker {
  0%, 100% { transform: translateX(-50%) scale(1, 1) rotate(-2deg); opacity: 1; }
  40% { transform: translateX(-50%) scale(.92, 1.08) rotate(2deg); opacity: .9; }
  70% { transform: translateX(-50%) scale(1.05, .95) rotate(-1deg); opacity: 1; }
}
@keyframes dwTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes dwShine { to { background-position: 200% center; } }
@keyframes dwSpin { to { transform: translateX(-50%) rotate(360deg); } }

/* ── perks, shopping list, product rows ────────────────── */
.dw-shop { background: linear-gradient(180deg, #fff3dd, var(--dw-cream) 220px, transparent 520px); padding-top: 1rem; }
.dw-perks {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem;
  margin-top: -2.2rem; position: relative; z-index: 3;
}
.dw-perk {
  display: flex; align-items: center; gap: .55rem; padding: .7rem .8rem; border-radius: 14px;
  background: #fff; border: 1px solid #f3d9a4; box-shadow: 0 6px 18px rgba(122, 21, 48, .1);
}
.dw-perk-ico { font-size: 1.5rem; }
.dw-perk b { display: block; font-size: .9rem; color: var(--dw-maroon); }
.dw-perk small { display: block; font-size: .78rem; color: #6b5a52; }

.dw-list { padding: 1.8rem 0 .4rem; }
.dw-list-h, .dw-row-h { font-family: var(--font-heading, Georgia, serif); color: var(--dw-maroon); margin: 0; }
.dw-list-h { font-size: clamp(1.35rem, 3.5vw, 1.8rem); text-align: center; }
.dw-list-sub, .dw-row-sub { color: #6b5a52; font-size: .9rem; }
.dw-list-sub { text-align: center; margin: .3rem 0 1rem; }
.dw-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; }
.dw-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: .25rem; padding: 1rem .5rem; min-height: 124px; border-radius: 16px; text-decoration: none;
  background: radial-gradient(circle at 50% 0%, #fff8e6, #fff 70%);
  border: 1px solid #f0d49a; color: var(--dw-maroon);
  transition: transform .15s ease, box-shadow .15s ease;
}
.dw-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(122, 21, 48, .14); }
.dw-tile-ico { font-size: 2rem; }
.dw-tile-label { font-weight: 700; font-size: .9rem; line-height: 1.2; }
.dw-tile-n { font-size: .75rem; color: #8a6d3b; }

.dw-row { padding-top: 1.6rem; overflow-x: clip; } /* the shared slider bleeds 1.5rem past the container; on a phone that is 8px of sideways scroll */
.dw-row-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: .9rem; }
.dw-more {
  flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: .4rem 1rem; border-radius: 999px;
  border: 1.5px solid var(--dw-maroon); color: var(--dw-maroon); font-weight: 700; font-size: .85rem; text-decoration: none;
}
.dw-more:hover { background: var(--dw-maroon); color: #fff; }
.dw-row-h { font-size: clamp(1.2rem, 3vw, 1.5rem); }

@media (max-width: 900px) {
  .dw-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dw-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .dw-hero { padding: 2.6rem 0 1.8rem; }
  .dw-sub { font-size: .95rem; padding: 0 .4rem; }
  .dw-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dw-tile { min-height: 108px; }
  .dw-perk { padding: .6rem; }
  .dw-perk-ico { font-size: 1.25rem; }
  .dw-diya { width: 36px; height: 16px; }
  .dw-lights i:nth-child(n+17) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dw-flame, .dw-lights i, .dw-title em, .dw-rangoli { animation: none; }
}

html.diwali .dw-strip{display:flex;gap:.8rem;align-items:center;justify-content:center;flex-wrap:wrap;background:#14224f;color:#fff;font-weight:700;padding:.55rem 1rem;text-align:center}
html.diwali .dw-strip[hidden]{display:none}
.dw-strip-btn{background:#f5b21a;color:#14224f;border-radius:999px;padding:.3rem .9rem;font-size:.8rem;text-decoration:none}
.dw-tile{position:relative}
.dw-tile-pct{position:absolute;top:.5rem;right:.5rem;background:#f5b21a;color:#14224f;font-weight:800;font-size:.8rem;border-radius:6px;padding:.1rem .4rem}

.dw-tile-card{background:linear-gradient(160deg,#14224f,#1d3270);color:#fff;border:0;min-height:170px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:.8rem .6rem .6rem;overflow:hidden}
.dw-tile-card .dw-tile-label{color:#fff;text-transform:uppercase;letter-spacing:.04em;font-size:.78rem;text-align:center;z-index:2}
.dw-tile-card .dw-tile-n{color:#cfd8f5;z-index:2}
.dw-tile-pics{display:flex;align-items:flex-end;justify-content:center;gap:.2rem;height:84px;width:100%}
.dw-tile-pics img{height:100%;max-width:33%;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(0,0,0,.35))}
.dw-tile-card .dw-tile-pct{top:auto;bottom:2rem;right:.4rem;background:#f5b21a;color:#14224f;font-size:1.15rem;font-weight:900;border-radius:8px;padding:.15rem .5rem;line-height:1;transform:rotate(-4deg);box-shadow:0 3px 8px rgba(0,0,0,.35);z-index:3;display:flex;flex-direction:column;align-items:center}
.dw-tile-pct small{font-size:.55rem;font-weight:800;letter-spacing:.06em}

/* Coming in the sale: savings under each card, full grid on "View all" */
.dw-soon-card{display:flex;flex-direction:column;flex:0 0 auto}
.dw-save{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem;padding:.4rem .5rem;margin-top:.25rem;background:#fff4d6;border:1px solid #e8c766;border-radius:8px;font-size:.8rem}
.dw-save-pct{background:#b3261e;color:#fff;font-weight:800;border-radius:6px;padding:.1rem .4rem}
.dw-save-now del{opacity:.6}
.dw-save-amt{font-weight:700;color:#1b6e3a;margin-left:auto}
.dw-row-all .scrolling-slider{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem;overflow:visible}
.dw-row-all .dw-soon-card{min-width:0}
button.dw-more{cursor:pointer;border:0;font:inherit}

.dw-feature{display:flex;align-items:center;gap:1rem;margin:1rem 0;padding:.9rem 1rem;border-radius:14px;background:linear-gradient(135deg,#1c2a5a,#2b3f86);color:#fff;text-decoration:none;border:2px solid #f0c04a;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.dw-feature-img{flex:0 0 96px;height:96px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.dw-feature-img img{max-width:100%;max-height:100%;object-fit:contain}
.dw-feature-body{flex:1;display:flex;flex-direction:column;gap:.2rem;min-width:0}
.dw-feature-body small{color:#f0c04a;font-weight:800;letter-spacing:.03em}
.dw-feature-body b{font-size:1.05rem}
.dw-feature-price del{opacity:.65}
.dw-feature-price strong{font-size:1.5rem;color:#ffd75e}
.dw-feature-save{font-weight:700;color:#9be7a8}
.dw-feature-btn{background:#f0c04a;color:#1c2a5a;font-weight:800;padding:.6rem 1rem;border-radius:999px;white-space:nowrap}
@media (max-width:560px){.dw-feature{flex-wrap:wrap}.dw-feature-img{flex-basis:72px;height:72px}.dw-feature-btn{width:100%;text-align:center}}

.dw-feature-wrap{position:relative;margin:1rem 0;display:grid}
.dw-feature-wrap .dw-feature{margin:0;grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .5s}
.dw-feature-wrap .dw-feature.on{opacity:1;visibility:visible}
.dw-feature-dots{position:absolute;left:0;right:0;bottom:6px;display:flex;justify-content:center;gap:6px;z-index:2}
.dw-feature-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer}
.dw-feature-dots i.on{background:#f0c04a}

.dw-feature-note{display:inline-block;align-self:flex-start;background:#f0c04a;color:#1c2a5a;font-weight:800;font-size:.85rem;padding:.2rem .6rem;border-radius:6px}
.dw-feature-wrap{touch-action:pan-y}
.dw-feature-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.85);color:#1d2a4d;font-size:22px;line-height:1;cursor:pointer}
.dw-feature-arrow.prev{left:6px}.dw-feature-arrow.next{right:6px}
@media (hover:none){.dw-feature-arrow{display:none}}

/* Coming in the sale: compact grid */
.dw-soon{margin:1rem 0}
.dw-soon>.container{background:linear-gradient(135deg,#14224f,#2b3f86);border-radius:16px;padding:.9rem .7rem 1rem;border:2px solid #f0c04a;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.dw-soon-title{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem}
.dw-soon-eyes{font-size:2rem}
.dw-soon h2{margin:0;color:#ffd75e;font-family:var(--font-heading,Georgia,serif);font-size:clamp(1.25rem,4.5vw,1.7rem);line-height:1.1}
.dw-soon-sub{color:#e6ebff;font-size:.9rem;margin-top:.15rem}
.dw-soon-sub b{color:#ffd75e}
.dw-soon-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem}
@media(min-width:620px){.dw-soon-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:900px){.dw-soon-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:.6rem}}
.dw-mini{position:relative;background:#fff;border-radius:10px;padding:.35rem .35rem .4rem;display:flex;flex-direction:column;gap:.15rem;cursor:pointer;min-width:0;overflow:hidden}
.dw-mini-pct{position:absolute;top:.3rem;left:.3rem;z-index:2;background:#b3261e;color:#fff;font-weight:800;font-size:.72rem;border-radius:6px;padding:.05rem .3rem;line-height:1.3}
.dw-mini-img{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;max-height:110px}
.dw-mini-img img{max-width:100%;max-height:100%;object-fit:contain}
.dw-mini-name{font-size:.72rem;line-height:1.2;color:#2b2320;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em}
.dw-mini-price{font-size:.8rem;line-height:1.2}
.dw-mini-price b{color:#b3261e;font-size:.95rem}
.dw-mini-price del{color:#8a7d76;font-size:.7rem}
.dw-mini-save{font-size:.68rem;font-weight:700;color:#1b6e3a}
.dw-mini-add{position:absolute;right:.3rem;bottom:.3rem;width:28px;height:28px;border-radius:50%;border:0;background:#e8732a;color:#fff;font-size:1.2rem;line-height:1;cursor:pointer}
.dw-soon-foot{text-align:center;margin-top:.8rem}
.dw-soon .dw-more{background:#ffd75e;color:#14224f;border-radius:999px;padding:.55rem 1.4rem;font-weight:800}