/* Seasonal decoration layer — separate from the permanent brand (brand.css / shop.css).
   Chosen in Admin → Settings → "Seasonal decorations"; applied as <html data-season="…">.
   Rules: decoration only (pseudo-elements, no content, no layout space), never over product photos,
   never reduces contrast. To add a season, copy one block below and change the artwork. */

/* Shared mechanics */
.site-header::before, .site-header::after {
  content: none; position: absolute; pointer-events: none; z-index: -1;
}
.site-header::before { inset: 0; opacity: 0; transition: opacity .6s; }
.site-header::after { left: 0; right: 0; bottom: 0; height: 18px; background-repeat: repeat-x; background-position: center bottom; opacity: 0; transition: opacity .6s; }
.site-header::after { height: 12px; background-size: auto 12px; }
@media (prefers-reduced-motion: reduce) { .site-header::before, .site-header::after { transition: none; } }

/* ---------- Christmas ---------- */
/* faint gold snowfall + a string of tiny lights along the bottom of the header */
[data-season="christmas"] .site-header::before {
  content: ''; opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M30 20v20M21 25l18 10M21 35l18-10'/%3E%3Cpath d='M128 70v14M122 73.5l12 7M122 80.5l12-7'/%3E%3Cpath d='M70 128v18M62 132.5l16 9M62 141.5l16-9'/%3E%3C/g%3E%3Cg fill='%23D4AF37'%3E%3Ccircle cx='100' cy='24' r='1.6'/%3E%3Ccircle cx='160' cy='140' r='1.8'/%3E%3Ccircle cx='18' cy='98' r='1.4'/%3E%3Ccircle cx='150' cy='12' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
}
[data-season="christmas"] .site-header::after {
  content: ''; opacity: .9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='18' viewBox='0 0 96 18'%3E%3Cpath d='M0 3q12 6 24 0t24 0 24 0 24 0' fill='none' stroke='%23D4AF37' stroke-width='1' opacity='.8'/%3E%3Cg%3E%3Crect x='10.5' y='4' width='3' height='3' rx='.6' fill='%23B8921F'/%3E%3Cellipse cx='12' cy='10.5' rx='3' ry='4' fill='%2300A651'/%3E%3Crect x='34.5' y='4' width='3' height='3' rx='.6' fill='%23B8921F'/%3E%3Cellipse cx='36' cy='10.5' rx='3' ry='4' fill='%23F1D77A'/%3E%3Crect x='58.5' y='4' width='3' height='3' rx='.6' fill='%23B8921F'/%3E%3Cellipse cx='60' cy='10.5' rx='3' ry='4' fill='%23D61F3A'/%3E%3Crect x='82.5' y='4' width='3' height='3' rx='.6' fill='%23B8921F'/%3E%3Cellipse cx='84' cy='10.5' rx='3' ry='4' fill='%23B98AF0'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Mardi Gras ---------- */
/* faint diamond harlequin texture + a strand of purple/green/gold beads */
[data-season="mardi-gras"] .site-header::before {
  content: ''; opacity: .08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 2 58 30 30 58 2 30Z' fill='none' stroke='%23D4AF37' stroke-width='1.2'/%3E%3C/svg%3E");
}
[data-season="mardi-gras"] .site-header::after {
  content: ''; opacity: .9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='18' viewBox='0 0 42 18'%3E%3Cpath d='M0 6q10.5 6 21 0t21 0' fill='none' stroke='%23D4AF37' stroke-width='.8'/%3E%3Ccircle cx='7' cy='9' r='4' fill='%236A2BB8'/%3E%3Ccircle cx='21' cy='7' r='4' fill='%23D4AF37'/%3E%3Ccircle cx='35' cy='9' r='4' fill='%2300843D'/%3E%3C/svg%3E");
}

/* ---------- Easter / Spring ---------- pastel eggs, flowers, a butterfly */
[data-season="spring"] .site-header::before { content: ''; opacity: .13; background-image: url(/img/seasons/spring-pattern.svg); }
[data-season="spring"] .site-header::after { content: ''; opacity: .95; background-image: url(/img/seasons/spring-strip.svg); }

/* ---------- Fourth of July / Summer ---------- stars and red-white-blue bunting */
[data-season="summer"] .site-header::before { content: ''; opacity: .11; background-image: url(/img/seasons/summer-pattern.svg); }
[data-season="summer"] .site-header::after { content: ''; opacity: .95; background-image: url(/img/seasons/summer-strip.svg); }

/* ---------- Halloween ---------- pumpkins, bats, orange and purple */
[data-season="halloween"] .site-header::before { content: ''; opacity: .1; background-image: url(/img/seasons/halloween-pattern.svg); }
[data-season="halloween"] .site-header::after { content: ''; opacity: .95; background-image: url(/img/seasons/halloween-strip.svg); }

/* ---------- Thanksgiving / Fall ---------- autumn leaves, copper and gold */
[data-season="fall"] .site-header::before { content: ''; opacity: .14; background-image: url(/img/seasons/fall-pattern.svg); }
[data-season="fall"] .site-header::after { content: ''; opacity: .95; background-image: url(/img/seasons/fall-strip.svg); }

/* ---------- Coming Soon page (body.cs) ----------
   Christmas uses the page's own inline ornaments + holly. Every other theme fills the two top
   corners, the small accent under "Launching Soon", and swaps the faint background texture. */
.cs-corners { position: absolute; top: 0; left: 0; right: 0; height: 0; pointer-events: none; }
.cs-corner { position: absolute; top: 0; width: clamp(64px, 16vw, 150px); aspect-ratio: 150 / 190;
  background: no-repeat center top / contain; opacity: 0; transition: opacity .5s; }
.cs-corner.l { left: clamp(14px, 4vw, 60px); }
.cs-corner.r { right: clamp(14px, 4vw, 60px); transform: scaleX(-1); }
.cs-accent { background: no-repeat center / contain; }
@media (prefers-reduced-motion: reduce) { .cs-corner { transition: none; } }
[data-season="mardi-gras"] .cs-corner, [data-season="spring"] .cs-corner, [data-season="summer"] .cs-corner,
[data-season="halloween"] .cs-corner, [data-season="fall"] .cs-corner { opacity: 1; }
[data-season="mardi-gras"] .cs-corner { background-image: url(/img/seasons/mardi-gras-corner.svg); }
[data-season="spring"] .cs-corner { background-image: url(/img/seasons/spring-corner.svg); }
[data-season="summer"] .cs-corner { background-image: url(/img/seasons/summer-corner.svg); }
[data-season="halloween"] .cs-corner { background-image: url(/img/seasons/halloween-corner.svg); }
[data-season="fall"] .cs-corner { background-image: url(/img/seasons/fall-corner.svg); }
[data-season="mardi-gras"] .cs-accent { background-image: url(/img/seasons/mardi-gras-accent.svg); }
[data-season="spring"] .cs-accent { background-image: url(/img/seasons/spring-accent.svg); }
[data-season="summer"] .cs-accent { background-image: url(/img/seasons/summer-accent.svg); }
[data-season="halloween"] .cs-accent { background-image: url(/img/seasons/halloween-accent.svg); }
[data-season="fall"] .cs-accent { background-image: url(/img/seasons/fall-accent.svg); }
[data-season="mardi-gras"] body.cs::before { opacity: .08; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 2 58 30 30 58 2 30Z' fill='none' stroke='%23D4AF37' stroke-width='1.2'/%3E%3C/svg%3E"); }
[data-season="spring"] body.cs::before { opacity: .13; background-image: url(/img/seasons/spring-pattern.svg); }
[data-season="summer"] body.cs::before { opacity: .11; background-image: url(/img/seasons/summer-pattern.svg); }
[data-season="halloween"] body.cs::before { opacity: .1; background-image: url(/img/seasons/halloween-pattern.svg); }
[data-season="fall"] body.cs::before { opacity: .14; background-image: url(/img/seasons/fall-pattern.svg); }

/* ---------- None ---------- */
/* [data-season="none"]: permanent branding only — nothing to add (Coming Soon keeps its gold frame). */