.seasonal-banner {
  --banner-bg: #594362;
  --banner-text: #fff8ec;
  --banner-accent: #e4d0ac;
  --banner-shade: .72;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: 350px;
  padding: 32px max(28px, calc((100vw - 1200px) / 2));
  box-sizing: border-box;
  background: var(--banner-bg);
  color: var(--banner-text);
  border-block: 1px solid var(--banner-accent);
}
.seasonal-banner[hidden] { display: none; }
/* One continuous artwork fills the cover behind both the text and the goddess. */
.seasonal-banner-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
}
.seasonal-banner-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg, #0009 0%, #0003 34%, transparent 64%);
  opacity: var(--banner-shade);
}
.seasonal-banner-content {
  position: relative;
  width: 44%;
  max-width: 520px;
  max-height: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
  text-shadow: 0 1px 12px #0005;
}
.seasonal-banner .seasonal-banner-eyebrow {
  margin: 0 0 11px;
  color: var(--banner-accent);
  font: 800 10px/1.5 'Nunito', sans-serif;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.seasonal-banner h2 {
  margin: 0 0 10px;
  color: var(--banner-text);
  font: 400 clamp(28px, 3vw, 42px)/1.15 'Playfair Display', serif;
}
.seasonal-banner .seasonal-banner-discount {
  margin: 0 0 10px;
  color: var(--banner-text);
  font: 400 20px/1.35 'Nunito', sans-serif;
}
.seasonal-banner-discount strong { color: var(--banner-accent); font-weight: 900; }
.seasonal-banner .seasonal-banner-subtitle {
  max-width: 400px;
  margin: 0 0 16px;
  color: var(--banner-text);
  font: 400 12px/1.6 'Nunito', sans-serif;
}
.seasonal-banner-code-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  font: 400 10px 'Nunito', sans-serif;
}
.seasonal-banner .seasonal-banner-code {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 9px 14px;
  border: 1px dashed var(--banner-accent);
  background: #0003;
  color: var(--banner-text);
  cursor: pointer;
  text-shadow: none;
  font-family: 'Nunito', sans-serif;
}
.seasonal-banner-code span { font-size: 10px; }
.seasonal-banner-code strong { font-size: 14px; letter-spacing: 1.2px; color: var(--banner-accent); }
.seasonal-banner-code small { font-size: 9px; }
.seasonal-banner-countdown { margin: 0 0 17px; }
.seasonal-banner-countdown > p { margin: 0 0 6px; color: var(--banner-text); font: 400 10px/1.5 'Nunito', sans-serif; }
.seasonal-banner-clock { display: flex; gap: 7px; }
.seasonal-banner-clock > div { min-width: 56px; padding: 8px 6px 6px; border: 1px solid #ffffff50; background: #0003; text-align: center; }
.seasonal-banner-clock strong { display: block; color: var(--banner-accent); font: 700 23px/1.1 'Nunito', sans-serif; font-variant-numeric: tabular-nums; }
.seasonal-banner-clock span { display: block; margin-top: 4px; color: var(--banner-text); font: 700 8px 'Nunito', sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.seasonal-banner-links { display: flex; flex-wrap: wrap; gap: 10px; }
.seasonal-banner .seasonal-banner-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 40px;
  padding: 9px 16px;
  box-sizing: border-box;
  border: 1px solid var(--banner-text);
  background: var(--banner-text);
  color: var(--banner-bg);
  font: 800 10px/1.3 'Nunito', sans-serif;
  letter-spacing: .1px;
  text-decoration: none;
  text-shadow: none;
}
.seasonal-banner-links a span { display: grid; place-items: center; min-width: 18px; font-size: 18px; line-height: 1; }
.seasonal-banner .seasonal-banner-links a:hover { filter: brightness(1.08); transform: translateY(-2px); }
.seasonal-banner .seasonal-banner-terms { max-width: 450px; margin: 11px 0 0; color: var(--banner-text); font: 400 9px/1.5 'Nunito', sans-serif; }
.seasonal-banner :is(a, button):focus-visible { outline: 3px solid var(--banner-text); outline-offset: 4px; }

@media (min-width: 761px) and (max-width: 1050px) {
  .seasonal-banner-art { object-position: 70% center !important; }
  .seasonal-banner-content { width: 47%; }
  .seasonal-banner h2 { font-size: 34px; }
  .seasonal-banner .seasonal-banner-links a { padding: 8px 12px; gap: 8px; font-size: 10px; }
}
@media (max-width: 760px) {
  .seasonal-banner { padding: 24px; align-items: flex-end; }
  /* One photograph fills the phone cover; all text sits directly over it. */
  .seasonal-banner-art { inset: 0; width: 100%; transform: none; object-fit: cover; object-position: 76% top !important; }
  .seasonal-banner-shade {
    opacity: 1;
    background: linear-gradient(0deg, #000b 0%, #0008 36%, #0002 66%, transparent 85%);
  }
  .seasonal-banner-content {
    width: 100%;
    max-width: 470px;
    max-height: 100%;
    background: transparent;
  }
  .seasonal-banner .seasonal-banner-eyebrow { margin-bottom: 6px; font-size: 8px; letter-spacing: 1.3px; }
  .seasonal-banner h2 { margin-bottom: 6px; font-size: 29px; line-height: 1.12; }
  .seasonal-banner .seasonal-banner-discount { margin-bottom: 6px; font-size: 18px; line-height: 1.3; }
  .seasonal-banner .seasonal-banner-subtitle { margin-bottom: 10px; max-width: 350px; font-size: 11px; line-height: 1.45; }
  .seasonal-banner-code-row { margin-bottom: 10px; gap: 8px; }
  .seasonal-banner .seasonal-banner-code { min-height: 36px; padding: 7px 11px; }
  .seasonal-banner-countdown { margin-bottom: 12px; }
  .seasonal-banner-countdown > p { margin-bottom: 4px; font-size: 9px; line-height: 1.4; }
  .seasonal-banner-clock { gap: 6px; }
  .seasonal-banner-clock > div { min-width: 48px; padding: 6px 5px 5px; }
  .seasonal-banner-clock strong { font-size: 21px; }
  .seasonal-banner-clock span { margin-top: 3px; font-size: 7px; }
  .seasonal-banner-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .seasonal-banner .seasonal-banner-links a { min-height: 36px; padding: 7px 8px; gap: 6px; font-size: 9.5px; }
  .seasonal-banner-links a span { min-width: 14px; font-size: 16px; }
  .seasonal-banner .seasonal-banner-terms { margin-top: 8px; max-width: 350px; font-size: 9px; line-height: 1.4; }
}
@media (max-width: 600px) and (max-height: 700px) {
  .seasonal-banner { padding: 16px; }
  .seasonal-banner h2 { font-size: 26px; margin-bottom: 4px; }
  .seasonal-banner .seasonal-banner-eyebrow { font-size: 7px; margin-bottom: 4px; }
  .seasonal-banner .seasonal-banner-discount { font-size: 17px; margin-bottom: 4px; }
  .seasonal-banner .seasonal-banner-subtitle { font-size: 10px; margin-bottom: 8px; }
  .seasonal-banner-code-row { margin-bottom: 8px; }
  .seasonal-banner-countdown { margin-bottom: 10px; }
  .seasonal-banner-clock strong { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .seasonal-banner .seasonal-banner-links a:hover { transform: none; }
}

/* Admin text controls apply the same settings to the homepage and live preview. */
.seasonal-banner .seasonal-banner-content [data-banner-text="eyebrow"] { font-size: var(--banner-eyebrow-size, 10px); color: var(--banner-eyebrow-color, inherit); }
.seasonal-banner .seasonal-banner-content [data-banner-text="headline"] { font-size: var(--banner-headline-size, 42px); color: var(--banner-headline-color, inherit); }
.seasonal-banner .seasonal-banner-content [data-banner-text="subtitle"] { font-size: var(--banner-subtitle-size, 12px); color: var(--banner-subtitle-color, inherit); }
.seasonal-banner .seasonal-banner-content [data-banner-text="discount_prefix"] { font-size: var(--banner-discount-prefix-size, 20px); color: var(--banner-discount-prefix-color, inherit); }
.seasonal-banner .seasonal-banner-content [data-banner-text="discount_value"] { font-size: var(--banner-discount-value-size, 20px); color: var(--banner-discount-value-color, inherit); }
.seasonal-banner .seasonal-banner-content [data-banner-text="coupon_code"] { font-size: var(--banner-coupon-code-size, 14px); color: var(--banner-coupon-code-color, inherit); }
.seasonal-banner .seasonal-banner-content [data-banner-text="coupon_intro"] { font-size: var(--banner-coupon-intro-size, 10px); color: var(--banner-coupon-intro-color, inherit); }
.seasonal-banner .seasonal-banner-content [data-banner-text="coupon_hint"] { font-size: var(--banner-coupon-hint-size, 9px); color: var(--banner-coupon-hint-color, inherit); }
.seasonal-banner .seasonal-banner-content [data-banner-text="eligibility"] { font-size: var(--banner-eligibility-size, 10px); color: var(--banner-eligibility-color, inherit); }
.seasonal-banner .seasonal-banner-content [data-banner-text="countdown_label"] { font-size: var(--banner-countdown-label-size, 10px); color: var(--banner-countdown-label-color, inherit); }
.seasonal-banner .seasonal-banner-content [data-banner-text="countdown_numbers"] { font-size: var(--banner-countdown-numbers-size, 23px); color: var(--banner-countdown-numbers-color, inherit); }
.seasonal-banner .seasonal-banner-content [data-banner-text="countdown_units"] { font-size: var(--banner-countdown-units-size, 8px); color: var(--banner-countdown-units-color, inherit); }
.seasonal-banner .seasonal-banner-content [data-banner-text="outfits_label"] { font-size: var(--banner-outfits-label-size, 10px); color: var(--banner-outfits-label-color, inherit); }
.seasonal-banner .seasonal-banner-content [data-banner-text="sarees_label"] { font-size: var(--banner-sarees-label-size, 10px); color: var(--banner-sarees-label-color, inherit); }
.seasonal-banner .seasonal-banner-content [data-banner-text="terms"] { font-size: var(--banner-terms-size, 9px); color: var(--banner-terms-color, inherit); }
@media (max-width: 760px) {
  .seasonal-banner .seasonal-banner-content [data-banner-text="eyebrow"] { font-size: var(--banner-eyebrow-phone-size, 8px); }
  .seasonal-banner .seasonal-banner-content [data-banner-text="headline"] { font-size: var(--banner-headline-phone-size, 29px); }
  .seasonal-banner .seasonal-banner-content [data-banner-text="subtitle"] { font-size: var(--banner-subtitle-phone-size, 11px); }
  .seasonal-banner .seasonal-banner-content [data-banner-text="discount_prefix"] { font-size: var(--banner-discount-prefix-phone-size, 18px); }
  .seasonal-banner .seasonal-banner-content [data-banner-text="discount_value"] { font-size: var(--banner-discount-value-phone-size, 18px); }
  .seasonal-banner .seasonal-banner-content [data-banner-text="coupon_code"] { font-size: var(--banner-coupon-code-phone-size, 14px); }
  .seasonal-banner .seasonal-banner-content [data-banner-text="coupon_intro"] { font-size: var(--banner-coupon-intro-phone-size, 10px); }
  .seasonal-banner .seasonal-banner-content [data-banner-text="coupon_hint"] { font-size: var(--banner-coupon-hint-phone-size, 9px); }
  .seasonal-banner .seasonal-banner-content [data-banner-text="eligibility"] { font-size: var(--banner-eligibility-phone-size, 10px); }
  .seasonal-banner .seasonal-banner-content [data-banner-text="countdown_label"] { font-size: var(--banner-countdown-label-phone-size, 9px); }
  .seasonal-banner .seasonal-banner-content [data-banner-text="countdown_numbers"] { font-size: var(--banner-countdown-numbers-phone-size, 21px); }
  .seasonal-banner .seasonal-banner-content [data-banner-text="countdown_units"] { font-size: var(--banner-countdown-units-phone-size, 7px); }
  .seasonal-banner .seasonal-banner-content [data-banner-text="outfits_label"] { font-size: var(--banner-outfits-label-phone-size, 9.5px); }
  .seasonal-banner .seasonal-banner-content [data-banner-text="sarees_label"] { font-size: var(--banner-sarees-label-phone-size, 9.5px); }
  .seasonal-banner .seasonal-banner-content [data-banner-text="terms"] { font-size: var(--banner-terms-phone-size, 9px); }
}