/* Holiday season look (sites/fortunemade/season.py). Linked only while the build renders season markup; every visual change waits for
   <html class="holiday-on"> (set by the build inside Nov 1 - Dec 24 and kept right by /js/season.js).
   Palette: holly green, cranberry and the brand gold on cream. No blue anywhere (owner's rule: yellow and blue never adjacent). */
:root {
  --holly: #2F4A3A;
  --holly-2: #3D5C4A;
  --berry: #8E2C2A;
  --berry-2: #A63E35;
  --gold-soft: #E7C98F;
  --garland: repeating-linear-gradient(90deg, var(--holly) 0 30px, var(--gold) 30px 36px, var(--berry) 36px 66px, var(--gold) 66px 72px);
}
[hidden] { display: none !important; }
html:not(.holiday-on) .s-on { display: none !important; }
html.holiday-on .s-off { display: none !important; }

/* order-by strip: its dated phases show in any state; the colors turn festive in the season */
.holiday-strip { background: var(--night-2); color: var(--on-night); font-size: .9rem; }
.holiday-strip p { margin: 0; padding: 9px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; line-height: 1.35; }
.holiday-strip a { color: var(--on-night); font-weight: 600; text-underline-offset: 3px; }
.holiday-strip a:hover { color: var(--gold-soft); }
.hs-name { font-family: var(--serif); font-weight: 600; font-size: 1rem; letter-spacing: .01em; margin-right: 2px; }
.holiday-strip .chip { display: inline-block; border: 1px solid rgba(245, 239, 228, .35); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.holiday-strip .hs-link { margin-left: auto; }
@media (max-width: 759px) {
  .holiday-strip .chip { font-size: .84rem; padding: 1px 8px; }
  .holiday-strip .hs-link { margin-left: 0; }
}
html.holiday-on .holiday-strip { position: relative; background: var(--holly); padding-bottom: 4px; }
html.holiday-on .holiday-strip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--garland); }
html.holiday-on .holiday-strip .hs-name { color: var(--gold-soft); }
html.holiday-on .holiday-strip .chip { background: rgba(0, 0, 0, .16); border-color: rgba(231, 201, 143, .55); }
html.holiday-on .holiday-strip .chip b { color: var(--gold-soft); }

/* hero (home) and page head (/holiday-employee-gifts): warm light, a few gold flecks, a garland edge */
html.holiday-on .s-hero {
  position: relative;
  background:
    radial-gradient(circle, rgba(201, 138, 46, .22) 0 1.5px, transparent 2.5px) 0 0 / 52px 52px,
    radial-gradient(circle, rgba(142, 44, 42, .10) 0 1.5px, transparent 2.5px) 26px 26px / 52px 52px,
    linear-gradient(180deg, #F7EFE1 0%, #F1E5D1 100%);
}
html.holiday-on .s-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--garland); opacity: .9; }
html.holiday-on .s-hero .eyebrow { color: var(--berry); }
html.holiday-on .s-hero h1 { color: var(--ink); }
html.holiday-on .hero-art { position: relative; background: #F3E8D6; box-shadow: inset 0 0 0 2px rgba(201, 138, 46, .55); }
.hero-ribbon { position: absolute; top: 18px; left: -8px; z-index: 1; background: var(--berry); color: #FBF3E6; font: 700 .74rem/1 var(--sans);
  letter-spacing: .14em; text-transform: uppercase; padding: 9px 14px 9px 16px; border-radius: 0 6px 6px 0; box-shadow: 0 6px 14px -8px rgba(43, 36, 30, .6); }
.hero-ribbon::before { content: ""; position: absolute; left: 0; bottom: -8px; border-top: 8px solid #5E1C1A; border-left: 8px solid transparent; }

/* the three bundles as holiday gift boxes */
html.holiday-on .s-bundles { background: linear-gradient(180deg, #EFE2CC 0%, var(--sand) 220px); }
html.holiday-on .s-bundles .eyebrow { color: var(--berry); }
html.holiday-on .bundle.gift { border-color: #D8BF92; box-shadow: 0 14px 28px -22px rgba(43, 36, 30, .55); }
html.holiday-on .bundle.gift { position: relative; }
/* the ribbon bar sits on top of the card, out of the 7-row subgrid: as a grid item it pushed the photo into the last row over the dates (QA round 4) */
html.holiday-on .bundle.gift::before { content: ""; position: absolute; top: 0; left: 0; right: 0; z-index: 1; height: 7px; background: linear-gradient(90deg, var(--berry) 0 46%, var(--gold) 46% 54%, var(--berry) 54% 100%); }
html.holiday-on .bundle.gift .tag { color: var(--berry); }
html.holiday-on .bundle.gift .prices { border-color: #E3D2B4; }
html.holiday-on .bundle.gift .prices b { color: var(--holly); }
html.holiday-on .bundle.gift .when b { color: var(--holly); }
html.holiday-on .bundle.gift .when b a { color: var(--berry); }
.gift-label { position: absolute; left: 12px; bottom: 12px; background: var(--holly); color: #FBF3E6; font: 700 .7rem/1 var(--sans); letter-spacing: .12em;
  text-transform: uppercase; padding: 7px 12px 7px 28px; border-radius: 999px; box-shadow: 0 0 0 2px rgba(231, 201, 143, .85); }
.gift-label::before { content: ""; position: absolute; left: 11px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--gold-soft); box-shadow: 0 0 0 2px var(--berry); }

@media print {
  .holiday-strip, .hero-ribbon, .gift-label { display: none !important; }
  html.holiday-on .s-hero { background: none; }
}