/* ============================================================================================
   Jól (ljóst) — the Christmas skin. Loaded ONLY when SKIN=jol (src/lib/season.ts); every rule is
   scoped under html[data-skin="jol"], so off-season this file is not even requested.
   Source: Einar's design handoff 25.10.2026 (reference at /jol-ref/ on dr-dev). Ported onto the
   storefront's existing classes rather than forked components — the species "baubles" ARE the
   normal .cat / .cat-pod / .cat-pill / .cat-mascot circles, re-dressed, so they keep the real
   category links and the phone carousel for free.

   Performance notes, because this codebase documents a scroll-jank history:
   - The header's glass is blur(60px) as the brief specifies (Einar 26.10.2026: "make the header
     blur 60 like the design" — I had capped it at 32px). It is the largest blur on the site and the
     header is sticky, so it recomposites on every scroll frame; if a real phone stutters, 32px is
     the fallback that was measured fine.
   - Only `transform`/`opacity` animate. The hero's smoke + snowfall PAUSE when the hero is off
     screen (index.astro observer); the ground snow is one composited layer, as the brief asks.
   ============================================================================================ */

@font-face {
  font-family: "Playfair Display"; font-style: normal; font-weight: 700 800; font-display: swap;
  src: url("/fonts/playfair/playfair-display-latin.woff2") format("woff2");
}

/* ---- Tokens: Christmas red replaces brand pink SITE-WIDE (brief §tokens). One block to revert. ---- */
html[data-skin="jol"] {
  --brand: #c8102e;
  --brand-deep: #8f0b20;
  --brand-tint: rgba(200, 16, 46, 0.08);
  --brand-cta-bg: rgba(255, 242, 242, 0.92);
  --jol-gold: #c9a064; --jol-gold-hi: #ecd29b; --jol-gold-lo: #b88a3e; --jol-pine: #1f4a44;
}

/* ---- Ground: warm snow-cream, pine + gold glows (replaces the pink/blue/amber ambient) ---- */
html[data-skin="jol"] body::before {
  background:
    radial-gradient(70% 38% at 50% 0%, #ffffff 0%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(45% 40% at 100% 55%, rgba(200, 16, 46, 0.06), transparent 65%),
    radial-gradient(45% 40% at 0% 60%, rgba(47, 107, 85, 0.09), transparent 65%),
    radial-gradient(60% 40% at 50% 104%, rgba(201, 163, 90, 0.12), transparent 66%),
    linear-gradient(180deg, #ffffff 0%, #fdfcfa 30%, #f7f5f1 70%, #f2efe9 100%);
}
/* No page-wide snow layer: Einar 05.11.2026, "skip the big blue animations and only have the tiny
   white ones" — the only snowfall is the small white one over the hero (.jol-hero::before). */

/* ---- Header: "frame" glass tier — brighter fill, four-sided white rim, navy shadow ---- */
html[data-skin="jol"] .head-card.glass {
  background: linear-gradient(160deg, rgba(255,255,255,0.90), rgba(255,255,255,0.42));
  backdrop-filter: blur(60px) saturate(185%); -webkit-backdrop-filter: blur(60px) saturate(185%);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 34px 74px -16px rgba(40,45,70,0.30), inset 0 2px 2px rgba(255,255,255,0.95), inset 0 -2px 3px rgba(255,255,255,0.5), inset 2px 0 3px rgba(255,255,255,0.45), inset -2px 0 3px rgba(255,255,255,0.45), inset 0 0 60px rgba(255,255,255,0.35);
}
html[data-skin="jol"] .foot-card.glass, html[data-skin="jol"] .home-search.glass {
  background: linear-gradient(160deg, rgba(255,255,255,0.78), rgba(255,255,255,0.60));
  border: 1px solid rgba(255,255,255,0.70);
  box-shadow: 0 10px 26px -10px rgba(40,45,70,0.28), inset 0 2px 2px rgba(255,255,255,0.95), inset 0 -2px 3px rgba(255,255,255,0.5), inset 2px 0 3px rgba(255,255,255,0.45), inset -2px 0 3px rgba(255,255,255,0.45);
}

/* ---- Hero: a plain banner slot, same as the banner it replaces ----
   Einar 05.11.2026: "remove all edits on the hero banner area" — so no crop, no scaling, no edge
   fade, no header-width stretch. The art sits in the normal 1430px banner column under the header,
   drawn whole at its own aspect ratio. Desktop art: Einar's 2172x724 PNG from Desktop/st1, encoded
   once at WebP q96. Phones get his portrait art (1122x1402). */
html[data-skin="jol"] .jol-hero { position: relative; margin: 24px auto 12px; max-width: 1430px; overflow: hidden; pointer-events: none; }
html[data-skin="jol"] .jol-hero-art { position: relative; width: 100%; aspect-ratio: 2172 / 724; }
html[data-skin="jol"] .jol-hero-img { position: relative; width: 100%; aspect-ratio: 2172 / 724; }
html[data-skin="jol"] .jol-hero-art img { display: block; width: 100%; height: 100%; }
/* light snowfall over the hero only */
@keyframes jol-snow { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 1320px, 0); } }
html[data-skin="jol"] .jol-hero::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1320px; bottom: 0; z-index: 1; pointer-events: none; opacity: 0.85; will-change: transform;
  background-image:
    radial-gradient(2px 2px at 30px 40px, #fff 50%, transparent 51%), radial-gradient(1.6px 1.6px at 140px 160px, #fff 50%, transparent 51%),
    radial-gradient(2.6px 2.6px at 90px 300px, rgba(255,255,255,0.9) 50%, transparent 51%), radial-gradient(1.8px 1.8px at 200px 380px, #fff 50%, transparent 51%);
  background-size: 220px 440px, 330px 660px;
  animation: jol-snow 60s linear infinite;
}
/* paused by index.astro when the hero is scrolled out of view */
html[data-skin="jol"] .jol-hero.is-off::before { animation-play-state: paused; }

/* ---- Species row → gift mascots in frosted baubles with a gold cap ---- */
html[data-skin="jol"] .circles { gap: 36px; padding-top: 40px; }
html[data-skin="jol"] .cat { width: 232px; gap: 20px; }
html[data-skin="jol"] .cat-pod { width: 232px; height: 262px; }
/* cap + ring hang above the ball */
html[data-skin="jol"] .cat-pod::before { content: ""; position: absolute; left: 50%; bottom: 216px; width: 42px; height: 20px; margin-left: -21px; z-index: 3; border-radius: 5px 5px 3px 3px; background: linear-gradient(90deg, var(--jol-gold-lo), var(--jol-gold-hi) 45%, var(--jol-gold-lo)); box-shadow: 0 2px 4px rgba(26,28,54,0.25); }
html[data-skin="jol"] .cat-pod::after  { content: ""; position: absolute; left: 50%; bottom: 233px; width: 18px; height: 18px; margin-left: -9px; z-index: 3; border-radius: 50%; border: 2.5px solid var(--jol-gold); box-sizing: border-box; }
html[data-skin="jol"] .cat-pill {
  inset: auto; left: 50%; bottom: 0; width: 224px; height: 224px; margin-left: -112px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,0.98), rgba(255,255,255,0.7) 40%, rgba(226,231,238,0.75) 100%);
  backdrop-filter: none; -webkit-backdrop-filter: none;      /* the ball is opaque enough; one blur less per bauble */
  border: 1.5px solid rgba(255,255,255,0.85);
  box-shadow: 0 20px 36px -14px rgba(26,28,54,0.32), inset 0 2px 2px rgba(255,255,255,0.95), inset 0 -10px 24px rgba(160,175,195,0.35);
}
/* the species colour glows up from the bottom of the ball, masked so it never reaches the top */
html[data-skin="jol"] .cat-pill::before { opacity: 0.9; -webkit-mask: radial-gradient(60% 45% at 50% 100%, #000, transparent 75%); mask: radial-gradient(60% 45% at 50% 100%, #000, transparent 75%); }
html[data-skin="jol"] .cat-mascot {
  bottom: 20px; height: 188px; width: 188px; object-fit: contain; object-position: center bottom; z-index: 2;
  filter: drop-shadow(0 10px 12px rgba(26,28,54,0.22));
  animation: jol-arrive 0.7s var(--ease-spring) both;
}
/* these three fill more of their frame */
html[data-skin="jol"] .cat[data-species="fuglar"] .cat-mascot, html[data-skin="jol"] .cat[data-species="hundar"] .cat-mascot, html[data-skin="jol"] .cat[data-species="fiskar"] .cat-mascot { height: 164px; width: 164px; bottom: 26px; }
@keyframes jol-arrive { 0% { opacity: 0; transform: translateX(-50%) translateY(18px); } 60% { opacity: 1; transform: translateX(-50%) translateY(-6px); } 100% { transform: translateX(-50%) translateY(0); } }
@keyframes jol-hop { 0%, 100% { transform: translateX(-50%) translateY(0); } 35% { transform: translateX(-50%) translateY(-16px) rotate(-2deg); } 60% { transform: translateX(-50%) translateY(0); } 78% { transform: translateX(-50%) translateY(-5px); } }
html[data-skin="jol"] .cat:nth-child(2) .cat-mascot { animation-delay: 0.08s; }
html[data-skin="jol"] .cat:nth-child(3) .cat-mascot { animation-delay: 0.16s; }
html[data-skin="jol"] .cat:nth-child(4) .cat-mascot { animation-delay: 0.24s; }
html[data-skin="jol"] .cat:nth-child(5) .cat-mascot { animation-delay: 0.32s; }
html[data-skin="jol"] .cat:hover .cat-mascot { transform: translateX(-50%); animation: jol-hop 0.6s var(--ease-spring); }
html[data-skin="jol"] .cat:hover .cat-pill { transform: none; box-shadow: 0 26px 40px -14px rgba(26,28,54,0.38), inset 0 2px 2px rgba(255,255,255,0.95), inset 0 -10px 24px rgba(160,175,195,0.35); }
html[data-skin="jol"] .clabel {
  padding: 12px 30px; border-radius: 999px; font-size: 15px; letter-spacing: 0.5px;
  background: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.9);
  box-shadow: 0 8px 18px rgba(26,28,54,0.12), inset 0 2px 1px rgba(255,255,255,0.95);
  transition: transform 0.3s var(--ease-spring);
}
html[data-skin="jol"] .cat:hover .clabel { transform: translateY(-2px) scale(1.03); }

/* December pieces wait for JOL_DECEMBER_FROM (season.ts); the skin's own display rules must not beat [hidden] */
html[data-skin="jol"] [data-jol-dec][hidden] { display: none !important; }

/* ---- Delivery deadline pill ---- */
html[data-skin="jol"] .jol-notice { display: flex; justify-content: center; margin: 4px 0 8px; }
html[data-skin="jol"] .jol-notice-pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px 11px 16px; border-radius: 999px;
  font-size: 14.5px; font-weight: 600; color: var(--ink);
  background: linear-gradient(150deg, rgba(255,255,255,0.75), rgba(255,255,255,0.45));
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.60);
  box-shadow: 0 8px 18px -6px rgba(40,45,70,0.26), inset 0 1px 1px rgba(255,255,255,0.95);
}
html[data-skin="jol"] .jol-notice-pill svg { flex: none; color: var(--brand); }
html[data-skin="jol"] .jol-notice-pill b { color: var(--brand-deep); font-weight: 800; }

/* ---- Section headings: Playfair Display 800 + a short pine-to-gold line ---- */
html[data-skin="jol"] :is(.sec-head h2, .prods h2, .brands h2, .frodleikur h2, .rw-head h2, .cat-title) {
  font-family: "Playfair Display", Georgia, serif; font-weight: 800; letter-spacing: -0.3px;
  padding-bottom: 10px; background: linear-gradient(90deg, var(--jol-pine), var(--jol-gold)) left bottom / 56px 3px no-repeat;
}
/* h2.cat-title, not .cat-title: the :is() list above carries the specificity of its MOST specific
   argument (.sec-head h2), so a plain .cat-title override loses and the line sat at the far left
   under a centred heading (measured on dev 26.10). */
html[data-skin="jol"] h2.cat-title { background-position: center bottom; }

/* ---- Product cards: festive hover glow + the pale-red CTA (price amber unchanged, by design) ---- */
html[data-skin="jol"] .card:hover { box-shadow: 0 22px 50px -16px rgba(143,11,32,0.28), 0 0 0 1px rgba(201,160,100,0.35), 0 1px 0 rgba(255,255,255,0.85) inset; }
html[data-skin="jol"] .card-add:not([disabled]) {
  background: var(--brand-cta-bg); color: var(--brand-deep); font-weight: 800;
  border: 1px solid rgba(200,16,46,0.25); box-shadow: 0 6px 16px -5px rgba(200,16,46,0.40);
}
html[data-skin="jol"] .card-add:not([disabled]):hover { background: #ffe4e6; }

/* ---- Jólavörur grid: a plain 4-up row, same cards as every other section. The brief's featured
   2×2 card and gift-tag prices were tried and dropped (Einar 26.10.2026: "looks strange") — the
   big card had a 500px photo and a gap between price and button, and the tag's punched hole read
   as a stray dot before the price. ---- */

/* ---- Footer: Christmas opening hours ---- */
html[data-skin="jol"] .jol-hours { margin-top: 10px; }
html[data-skin="jol"] .jol-hours .fh-title { color: var(--brand-deep); }
html[data-skin="jol"] .jol-row { display: flex; gap: 7px; }
html[data-skin="jol"] .jol-row strong { margin-left: auto; color: var(--ink); }

/* ---- Phones ---- */
@media (max-width: 720px) {
  html[data-skin="jol"] .jol-hero { margin: 8px 0 12px; } /* phones: search, the art, then the baubles — the live site's order since 06.11.2026 */
  /* phones: Einar's portrait art (1122x1402 PNG from Desktop/st1, WebP q96), full column, drawn whole */
  html[data-skin="jol"] .jol-hero-art { aspect-ratio: 1122 / 1402; width: 100%; }
  html[data-skin="jol"] .jol-hero-img { aspect-ratio: 1122 / 1402; transform: none; }
  /* baubles at the normal phone size (126px wide, same as the live species row — Einar 05.11.2026:
     "I need them as big as they are on mobile now"); everything inside scaled with the ball */
  html[data-skin="jol"] .circles { gap: 12px; padding-top: 24px; }
  html[data-skin="jol"] .cat { width: 150px; gap: 12px; }                      /* 09.11.2026: "make the bubbles bigger" — 126 → 150 */
  html[data-skin="jol"] .cat-pod { width: 150px; height: 178px; }
  html[data-skin="jol"] .cat-pill { width: 146px; height: 146px; margin-left: -73px; }
  html[data-skin="jol"] .cat-pod::before { bottom: 139px; width: 31px; height: 15px; margin-left: -15.5px; }
  html[data-skin="jol"] .cat-pod::after  { bottom: 152px; width: 14px; height: 14px; margin-left: -7px; border-width: 2px; }
  html[data-skin="jol"] .cat-mascot { height: 120px; width: 120px; bottom: 13px; }
  html[data-skin="jol"] .cat[data-species="fuglar"] .cat-mascot, html[data-skin="jol"] .cat[data-species="hundar"] .cat-mascot, html[data-skin="jol"] .cat[data-species="fiskar"] .cat-mascot { height: 105px; width: 105px; bottom: 19px; }
  html[data-skin="jol"] .clabel { padding: 9px 18px; font-size: 14px; }
  html[data-skin="jol"] .jol-notice-pill { font-size: 13.5px; padding: 10px 16px 10px 14px; text-align: left; }
  html[data-skin="jol"] :is(.sec-head h2, .prods h2, .brands h2, .frodleikur h2, .rw-head h2, .cat-title) { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-skin="jol"] .jol-hero::before, html[data-skin="jol"] .cat-mascot { animation: none; }
}

/* ============ Jóladagatal — the advent garland (JolDagatal.astro) ============================
   Second handoff, 26.10.2026: baubles on red ribbons hanging from an evergreen garland with gold
   beads. State classes come from the client script: .is-locked (frosted, 70%), .is-today (red,
   10% larger, pulsing golden halo + "Í dag" tag), .is-gone (opened: matte gold, stays on the
   garland, a gift peeks out), .is-star (day 24, gold, 20% larger). .is-off on the section pauses
   every animation while the garland is scrolled out of view. */
html[data-skin="jol"] .jd { margin: 44px auto 0; max-width: 1340px; display: flex; flex-direction: column; gap: 18px; }
html[data-skin="jol"] .jd .sec-head { margin-bottom: 0; }
html[data-skin="jol"] .jd-note { font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; }
html[data-skin="jol"] .jd-panel {
  position: relative; border-radius: 26px; padding: 26px 24px 30px; display: flex; flex-direction: column; gap: 18px;
  background: linear-gradient(160deg, rgba(255,255,255,0.78), rgba(255,255,255,0.60));
  border: 1px solid rgba(255,255,255,0.70);
  box-shadow: 0 10px 26px -10px rgba(40,45,70,0.28), inset 0 2px 2px rgba(255,255,255,0.95), inset 0 -2px 3px rgba(255,255,255,0.5), inset 2px 0 3px rgba(255,255,255,0.45), inset -2px 0 3px rgba(255,255,255,0.45);
}
html[data-skin="jol"] .jd-lead { display: flex; flex-direction: column; gap: 4px; padding: 0 6px; }
html[data-skin="jol"] .jd-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--brand-deep); }
html[data-skin="jol"] .jd-title { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; color: var(--ink); }
html[data-skin="jol"] .jd-garland { position: relative; width: 100%; height: 390px; }
html[data-skin="jol"] .jd-stage { position: absolute; inset: 0; }
html[data-skin="jol"] .jd.is-ready .jd-stage { transition: transform 0.45s var(--ease-spring); } /* no slide on load, only on the toggle */
html[data-skin="jol"] .jd-more { display: none; }
/* evergreen garland: base, needles, highlights — one static drop-shadow on each SVG */
html[data-skin="jol"] .jd-str { position: absolute; left: 0; width: 100%; height: 40px; overflow: visible; filter: drop-shadow(0 4px 4px rgba(26,28,54,0.18)); }
html[data-skin="jol"] .jd-str path { fill: none; vector-effect: non-scaling-stroke; }
html[data-skin="jol"] .jd-g1 { stroke: #2c5638; stroke-width: 9px; stroke-linecap: round; }
html[data-skin="jol"] .jd-g2 { stroke: #3d7449; stroke-width: 14px; stroke-dasharray: 1.6 4; }
html[data-skin="jol"] .jd-g3 { stroke: #6aa06c; stroke-width: 5px; stroke-dasharray: 1 7; }
html[data-skin="jol"] .jd-str-p, html[data-skin="jol"] .jd-bead-p { display: none; }
html[data-skin="jol"] .jd-bead { position: absolute; border-radius: 50%; pointer-events: none; z-index: 1; background: radial-gradient(circle at 34% 28%, #fff6dc 0, #ecd29b 30%, #b88a3e 85%); box-shadow: 0 2px 3px rgba(26,28,54,0.3); }

@keyframes jd-sway { 0%, 100% { transform: rotate(-3.5deg); } 50% { transform: rotate(3.5deg); } }
@keyframes jd-jiggle { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes jd-halo { 0%, 100% { transform: scale(1); opacity: 0.55; } 50% { transform: scale(1.28); opacity: 1; } }
html[data-skin="jol"] .jd-b {
  position: absolute; width: 80px; margin-left: -40px; padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer; z-index: 2;
  display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0;
  animation: jd-sway var(--dur) ease-in-out var(--delay) infinite;
}
html[data-skin="jol"] .jd-b.is-gone { cursor: default; }
/* inner wrapper: the hover jiggle rides on top of the sway, pivoting at the top of the ribbon */
html[data-skin="jol"] .jd-in { display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0; }
html[data-skin="jol"] .jd-b:not(.is-gone):hover .jd-in { animation: jd-jiggle 0.7s ease-in-out infinite; }
html[data-skin="jol"] .jd-ribbon { width: 3px; height: var(--len); border-radius: 2px; background: linear-gradient(90deg, #8f0b20, #e23a4f 50%, #8f0b20); box-shadow: 0 1px 1px rgba(26,28,54,0.15); }
html[data-skin="jol"] .jd-cap { width: 16px; height: 9px; border-radius: 4px 4px 2px 2px; background: linear-gradient(90deg, var(--jol-gold-lo), var(--jol-gold-hi) 45%, var(--jol-gold-lo)); box-shadow: 0 1px 2px rgba(26,28,54,0.25); }
html[data-skin="jol"] .jd-star { width: 22px; height: 22px; fill: var(--jol-gold); filter: drop-shadow(0 1px 2px rgba(26,28,54,0.25)); margin: -2px 0 -3px; }
html[data-skin="jol"] .jd-ball { position: relative; display: block; width: var(--s); height: var(--s); margin-top: -2px; transition: transform 0.32s var(--ease-spring), opacity 0.22s ease; }
html[data-skin="jol"] .jd-b.is-locked .jd-ball { opacity: 0.7; }
html[data-skin="jol"] .jd-b.is-locked.is-star .jd-ball { opacity: 0.85; }
html[data-skin="jol"] .jd-b.is-today .jd-ball { transform: scale(1.1); }
html[data-skin="jol"] .jd-b.is-gone .jd-ball { transform: scale(0.9); }
html[data-skin="jol"] .jd-b.is-popping .jd-ball { transform: scale(1.45); opacity: 0; }
/* today's golden halo + tag, shown only in that state */
html[data-skin="jol"] .jd-halo { display: none; position: absolute; inset: -22%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(246,205,110,0.85) 0%, rgba(236,190,90,0.4) 45%, rgba(236,190,90,0) 70%); animation: jd-halo 2.4s ease-in-out infinite; }
html[data-skin="jol"] .jd-b.is-today .jd-halo { display: block; }
html[data-skin="jol"] .jd-tag { display: none; position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; background: #fffaf0; border: 1.5px solid #d6ac5c; box-shadow: 0 4px 10px -4px rgba(150,105,35,0.5); font-size: 11px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: #6b4f1d; white-space: nowrap; }
html[data-skin="jol"] .jd-b.is-today .jd-tag { display: block; }
/* the opened gift, top-right, tilted */
html[data-skin="jol"] .jd-gift { display: none; position: absolute; width: 24px; height: 24px; right: -8px; top: -8px; transform: rotate(14deg); filter: drop-shadow(0 2px 3px rgba(26,28,54,0.25)); }
html[data-skin="jol"] .jd-b.is-gone .jd-gift { display: block; }
html[data-skin="jol"] .jd-face {
  position: absolute; inset: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 800; letter-spacing: -0.4px; color: var(--ink);
  background: radial-gradient(circle at 32% 26%, #fff 0, rgba(255,255,255,0.72) 30%, rgba(226,231,238,0.78) 100%);
  border: 1.5px solid rgba(255,255,255,0.85);
  box-shadow: inset 0 2px 2px rgba(255,255,255,0.95), inset 0 -8px 16px rgba(160,175,195,0.3), 0 14px 24px -12px rgba(26,28,54,0.34);
  transition: transform 0.28s var(--ease-spring), filter 0.15s ease;
}
html[data-skin="jol"] .jd-b:not(.is-gone):hover .jd-face { filter: brightness(1.05); transform: scale(1.06); }
html[data-skin="jol"] .jd-b.is-today .jd-face { color: #fff; border: 1px solid rgba(255,255,255,0.35); background: radial-gradient(circle at 32% 26%, rgba(255,255,255,0.7) 0, rgba(255,255,255,0) 32%), linear-gradient(145deg, #e23a4f, #c8102e 55%, #8f0b20); box-shadow: inset 0 1px 2px rgba(255,255,255,0.6), 0 12px 26px -6px rgba(200,16,46,0.55); }
html[data-skin="jol"] .jd-b.is-star .jd-face { color: #3a2a0e; border: 1px solid rgba(255,255,255,0.5); background: radial-gradient(circle at 32% 26%, rgba(255,255,255,0.85) 0, rgba(255,255,255,0) 30%), linear-gradient(145deg, #f1dca6, #d6ac5c 55%, #a97b32); box-shadow: inset 0 1px 2px rgba(255,255,255,0.7), inset 0 -8px 16px rgba(120,80,20,0.25), 0 14px 26px -10px rgba(150,105,35,0.55); }
html[data-skin="jol"] .jd-b.is-star.is-today .jd-face { color: #fff; background: radial-gradient(circle at 32% 26%, rgba(255,255,255,0.7) 0, rgba(255,255,255,0) 32%), linear-gradient(145deg, #e23a4f, #c8102e 55%, #8f0b20); }
html[data-skin="jol"] .jd-b.is-gone .jd-face { color: #6b5a33; background: linear-gradient(160deg, #f1e8d8, #dccaa6); border: 1px solid rgba(255,255,255,0.6); box-shadow: 0 8px 16px -10px rgba(26,28,54,0.28); }
html[data-skin="jol"] .jd.is-off .jd-b, html[data-skin="jol"] .jd.is-off .jd-halo, html[data-skin="jol"] .jd.is-off .jd-in { animation-play-state: paused; }

/* burst: a flash + 18 shards from the ball's centre */
@keyframes jd-flash { 0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0.9; } 100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; } }
@keyframes jd-shard { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.25) rotate(var(--rot)); opacity: 0; } }
html[data-skin="jol"] .jd-burst { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 5; }
html[data-skin="jol"] .jd-flash { position: absolute; left: 0; top: 0; width: 76px; height: 76px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(200,16,46,0.3) 45%, rgba(200,16,46,0) 70%); animation: jd-flash 0.55s ease-out forwards; }
html[data-skin="jol"] .jd-shard { position: absolute; left: 0; top: 0; width: var(--sz); height: var(--sz); border-radius: 50%; animation: jd-shard var(--t) ease-out forwards; }
html[data-skin="jol"] .jd-shard.sq { border-radius: 30%; }
html[data-skin="jol"] .jd-shard.k0 { background: linear-gradient(145deg, #e23a4f, #8f0b20); }
html[data-skin="jol"] .jd-shard.k1 { background: linear-gradient(90deg, #b88a3e, #ecd29b, #b88a3e); }
html[data-skin="jol"] .jd-shard.k2 { background: radial-gradient(circle at 35% 30%, #fff, rgba(226,231,238,0.9)); box-shadow: 0 1px 3px rgba(26,28,54,0.2); }

/* the bottom sheet */
@keyframes jd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes jd-sheet { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
html[data-skin="jol"] .jd-sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; padding: 20px; background: rgba(26,28,54,0.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: jd-fade 0.3s ease; }
html[data-skin="jol"] .jd-sheet[hidden] { display: none; }
html[data-skin="jol"] .jd-dialog {
  position: relative; width: 100%; max-width: 540px; padding: 30px; border-radius: 26px; display: flex; flex-direction: column; gap: 14px;
  background: rgba(255,255,255,0.94); border: 1px solid var(--glass-brd); box-shadow: var(--sh-lg, 0 24px 54px rgba(26,28,54,0.22)), var(--hi);
  animation: jd-sheet 0.36s var(--ease-sheet);
}
html[data-skin="jol"] .jd-dhead { display: flex; align-items: center; gap: 14px; }
html[data-skin="jol"] .jd-disc { flex: none; width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 21px; font-weight: 800; background: radial-gradient(circle at 32% 26%, rgba(255,255,255,0.7) 0, rgba(255,255,255,0) 32%), linear-gradient(145deg, #e23a4f, #c8102e 55%, #8f0b20); box-shadow: 0 10px 24px -6px rgba(200,16,46,0.55); }
html[data-skin="jol"] .jd-dtitles { display: flex; flex-direction: column; gap: 3px; padding-right: 44px; }
html[data-skin="jol"] .jd-deyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--brand-deep); }
html[data-skin="jol"] .jd-dtitle { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; color: var(--ink); }
html[data-skin="jol"] .jd-dbody { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
html[data-skin="jol"] .jd-form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
html[data-skin="jol"] .jd-form[hidden] { display: none; }
html[data-skin="jol"] .jd-field { display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 18px; border-radius: 999px; background: rgba(255,255,255,0.7); border: 1px solid rgba(26,28,54,0.1); box-shadow: inset 0 2px 4px rgba(26,28,54,0.06); }
html[data-skin="jol"] .jd-field input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font: inherit; font-size: 15px; color: var(--ink); }
html[data-skin="jol"] .jd-field button { flex: none; height: 42px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(200,16,46,0.25); background: var(--brand-cta-bg); color: var(--brand-deep); font: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer; transition: transform 0.28s var(--ease-spring); }
html[data-skin="jol"] .jd-field button:hover { transform: translateY(-2px) scale(1.03); }
html[data-skin="jol"] .jd-field button[disabled] { opacity: 0.6; cursor: wait; transform: none; }
html[data-skin="jol"] .jd-hint { font-size: 12.5px; line-height: 1.45; padding: 0 6px; color: var(--muted); }
html[data-skin="jol"] .jd-hint.is-err { color: var(--brand-deep); }
html[data-skin="jol"] .jd-sent { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: rgba(47,143,58,0.08); border: 1px solid rgba(47,143,58,0.2); color: #2f8f3a; font-size: 14px; line-height: 1.45; }
html[data-skin="jol"] .jd-sent[hidden] { display: none; }
html[data-skin="jol"] .jd-sent span { color: var(--muted); }
html[data-skin="jol"] .jd-sent strong { font-weight: 700; color: var(--ink); }
html[data-skin="jol"] .jd-close { position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.8); background: rgba(255,255,255,0.9); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(26,28,54,0.12); }
html[data-skin="jol"] .jd-close:hover { color: var(--brand); }

@media (max-width: 720px) {
  /* (full-width phone sections: index.astro's `main.home > *` rule from master, 06.11.2026, covers the Jól sections too) */
  html[data-skin="jol"] .jd { margin-top: 32px; }
  html[data-skin="jol"] .jd .sec-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  html[data-skin="jol"] .jd-note { white-space: normal; }
  html[data-skin="jol"] .jd-panel { padding: 20px 14px 24px; }
  html[data-skin="jol"] .jd-garland { height: 990px; }
  html[data-skin="jol"] .jd-str-d, html[data-skin="jol"] .jd-bead-d { display: none; }
  html[data-skin="jol"] .jd-str-p { display: block; }
  html[data-skin="jol"] .jd-bead-p { display: block; }
  html[data-skin="jol"] .jd-b { left: var(--pl) !important; top: var(--py) !important; }
  html[data-skin="jol"] .jd-ball { width: var(--sp); height: var(--sp); }
  html[data-skin="jol"] .jd-ribbon { height: var(--lenp); }
  /* Collapsed (default): one 165px row — today's four baubles — slid into view; the other rows are
     hidden outright (not clipped, so the pop shards and the "Í dag" tag still overflow freely).
     .is-open (the "Sjá allt dagatalið" button) restores the full six rows. */
  html[data-skin="jol"] .jd:not(.is-open) .jd-garland { height: 150px; }
  html[data-skin="jol"] .jd:not(.is-open) .jd-stage { transform: translateY(calc(var(--jd-row, 0) * -165px)); }
  html[data-skin="jol"] .jd[data-row="0"]:not(.is-open) .jd-stage > [data-row]:not([data-row="0"]) { display: none; }
  html[data-skin="jol"] .jd[data-row="1"]:not(.is-open) .jd-stage > [data-row]:not([data-row="1"]) { display: none; }
  html[data-skin="jol"] .jd[data-row="2"]:not(.is-open) .jd-stage > [data-row]:not([data-row="2"]) { display: none; }
  html[data-skin="jol"] .jd[data-row="3"]:not(.is-open) .jd-stage > [data-row]:not([data-row="3"]) { display: none; }
  html[data-skin="jol"] .jd[data-row="4"]:not(.is-open) .jd-stage > [data-row]:not([data-row="4"]) { display: none; }
  html[data-skin="jol"] .jd[data-row="5"]:not(.is-open) .jd-stage > [data-row]:not([data-row="5"]) { display: none; }
  html[data-skin="jol"] .jd-more {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; align-self: center; margin-top: -4px;
    padding: 11px 22px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 800; letter-spacing: 0.2px; cursor: pointer;
    color: var(--brand-deep); background: rgba(255,255,255,0.9); border: 1px solid rgba(200,16,46,0.25);
    box-shadow: 0 8px 18px -8px rgba(200,16,46,0.35), inset 0 1px 1px rgba(255,255,255,0.95);
  }
  html[data-skin="jol"] .jd-more svg { transition: transform 0.3s var(--ease-spring); }
  html[data-skin="jol"] .jd.is-open .jd-more svg { transform: rotate(180deg); }
  html[data-skin="jol"] .jd-sheet { padding: 0; }
  html[data-skin="jol"] .jd-dialog { border-radius: 26px 26px 0 0; padding: 26px 20px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-skin="jol"] .jd-b, html[data-skin="jol"] .jd-in, html[data-skin="jol"] .jd-halo, html[data-skin="jol"] .jd-sheet, html[data-skin="jol"] .jd-dialog { animation: none; }
}