/*
 * Seasonal skin — Q4 / jul.
 *
 * Loaded only while the season is on (see inc/season.php), so a normal request
 * carries none of these bytes.
 *
 * The look is "Frost", picked by the owner on 15.10.2026 out of three drafts:
 * today's DreamPage, tidied. A white page, a frost-blue hero, gold as the one
 * Christmas colour, and the brand purple exactly where it is all year.
 *
 * THREE RULES THIS FILE FOLLOWS
 * ----------------------------
 * 1. The brand colours are NOT touched. --dp-accent stays purple, so every CTA,
 *    link and button on the site keeps the colour it has all year. The season
 *    is carried by the frost ground and a little gold, never by repainting the
 *    buttons.
 * 2. The season adds its own tokens only (--dp-q4-*). They are listed in one
 *    block at the top so the whole look can be retuned from there.
 * 3. The conversion flows keep their normal chrome. The personalizer, the cart
 *    and the checkout are excluded outright; the preview page gets the waiting
 *    card and the snow falling behind it, and nothing else.
 */

body.dp-season-q4 {
  /* The drawn snowflake tiles: every flake is stroked twice, pale blue
     underneath and thinner white on top, so it shows on a white page. Used by
     the snowfall behind the preview page and, one tile of it, by the near
     snow on the preview stage. */
  --dp-q4-flakes:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20211%20293%22%3E%3Cpath%20d%3D%22M46%2062L56%2063M50%2063L52%2065M50%2063L53%2061M53%2063L55%2064M53%2063L55%2062M46%2062L50%2071M48%2066L47%2069M48%2066L50%2067M49%2069L48%2071M49%2069L51%2070M46%2062L40%2070M43%2065L41%2066M43%2065L44%2068M42%2068L40%2068M42%2068L42%2070M46%2062L36%2061M42%2061L40%2059M42%2061L39%2063M39%2061L37%2060M39%2061L37%2062M46%2062L42%2053M44%2058L45%2055M44%2058L42%2057M43%2055L44%2053M43%2055L41%2054M46%2062L52%2054M49%2059L51%2058M49%2059L48%2056M50%2056L52%2056M50%2056L50%2054M158%20214L164%20217M161%20215L162%20217M161%20215L163%20215M163%20216L163%20217M163%20216L164%20216M158%20214L159%20221M158%20217L157%20219M158%20217L160%20218M159%20219L158%20220M159%20219L160%20220M158%20214L152%20218M156%20216L154%20216M156%20216L155%20218M154%20217L152%20217M154%20217L154%20219M158%20214L152%20211M155%20213L154%20211M155%20213L153%20213M153%20212L153%20211M153%20212L152%20212M158%20214L157%20207M158%20211L159%20209M158%20211L156%20210M157%20209L158%20208M157%20209L156%20208M158%20214L164%20210M160%20212L162%20212M160%20212L161%20210M162%20211L164%20211M162%20211L162%20209%22%20fill%3D%22none%22%20stroke%3D%22%2399c6e6%22%20stroke-width%3D%222.8%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M46%2062L56%2063M50%2063L52%2065M50%2063L53%2061M53%2063L55%2064M53%2063L55%2062M46%2062L50%2071M48%2066L47%2069M48%2066L50%2067M49%2069L48%2071M49%2069L51%2070M46%2062L40%2070M43%2065L41%2066M43%2065L44%2068M42%2068L40%2068M42%2068L42%2070M46%2062L36%2061M42%2061L40%2059M42%2061L39%2063M39%2061L37%2060M39%2061L37%2062M46%2062L42%2053M44%2058L45%2055M44%2058L42%2057M43%2055L44%2053M43%2055L41%2054M46%2062L52%2054M49%2059L51%2058M49%2059L48%2056M50%2056L52%2056M50%2056L50%2054M158%20214L164%20217M161%20215L162%20217M161%20215L163%20215M163%20216L163%20217M163%20216L164%20216M158%20214L159%20221M158%20217L157%20219M158%20217L160%20218M159%20219L158%20220M159%20219L160%20220M158%20214L152%20218M156%20216L154%20216M156%20216L155%20218M154%20217L152%20217M154%20217L154%20219M158%20214L152%20211M155%20213L154%20211M155%20213L153%20213M153%20212L153%20211M153%20212L152%20212M158%20214L157%20207M158%20211L159%20209M158%20211L156%20210M157%20209L158%20208M157%20209L156%20208M158%20214L164%20210M160%20212L162%20212M160%20212L161%20210M162%20211L164%20211M162%20211L162%20209%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20173%20241%22%3E%3Cpath%20d%3D%22M126%2044L134%2046M129%2045L131%2047M129%2045L131%2044M132%2045L133%2047M132%2045L133%2045M126%2044L128%2052M127%2047L126%2049M127%2047L129%2049M127%2050L127%2051M127%2050L129%2051M126%2044L120%2050M124%2046L121%2047M124%2046L123%2049M122%2048L120%2048M122%2048L122%2050M126%2044L118%2042M123%2043L121%2041M123%2043L121%2044M120%2043L119%2041M120%2043L119%2043M126%2044L124%2036M125%2041L126%2039M125%2041L123%2039M125%2038L125%2037M125%2038L123%2037M126%2044L132%2038M128%2042L131%2041M128%2042L129%2039M130%2040L132%2040M130%2040L130%2038M40%20170L45%20169M42%20170L44%20170M42%20170L43%20168M44%20169L45%20170M44%20169L45%20168M40%20170L43%20174M41%20172L41%20173M41%20172L43%20172M42%20173L43%20174M42%20173L44%20173M40%20170L38%20175M39%20172L38%20173M39%20172L40%20174M39%20174L38%20174M39%20174L39%20175M40%20170L35%20171M38%20170L36%20170M38%20170L37%20172M36%20171L35%20170M36%20171L35%20172M40%20170L37%20166M39%20168L39%20167M39%20168L37%20168M38%20167L37%20166M38%20167L36%20167M40%20170L42%20165M41%20168L42%20167M41%20168L40%20166M41%20166L42%20166M41%20166L41%20165%22%20fill%3D%22none%22%20stroke%3D%22%2399c6e6%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M126%2044L134%2046M129%2045L131%2047M129%2045L131%2044M132%2045L133%2047M132%2045L133%2045M126%2044L128%2052M127%2047L126%2049M127%2047L129%2049M127%2050L127%2051M127%2050L129%2051M126%2044L120%2050M124%2046L121%2047M124%2046L123%2049M122%2048L120%2048M122%2048L122%2050M126%2044L118%2042M123%2043L121%2041M123%2043L121%2044M120%2043L119%2041M120%2043L119%2043M126%2044L124%2036M125%2041L126%2039M125%2041L123%2039M125%2038L125%2037M125%2038L123%2037M126%2044L132%2038M128%2042L131%2041M128%2042L129%2039M130%2040L132%2040M130%2040L130%2038M40%20170L45%20169M42%20170L44%20170M42%20170L43%20168M44%20169L45%20170M44%20169L45%20168M40%20170L43%20174M41%20172L41%20173M41%20172L43%20172M42%20173L43%20174M42%20173L44%20173M40%20170L38%20175M39%20172L38%20173M39%20172L40%20174M39%20174L38%20174M39%20174L39%20175M40%20170L35%20171M38%20170L36%20170M38%20170L37%20172M36%20171L35%20170M36%20171L35%20172M40%20170L37%20166M39%20168L39%20167M39%20168L37%20168M38%20167L37%20166M38%20167L36%20167M40%20170L42%20165M41%20168L42%20167M41%20168L40%20166M41%20166L42%20166M41%20166L41%20165%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20127%20199%22%3E%3Cpath%20d%3D%22M70%20120L75%20120M72%20120L73%20121M72%20120L73%20119M74%20120L74%20121M74%20120L75%20120M70%20120L72%20124M71%20122L71%20123M71%20122L72%20123M72%20123L71%20124M72%20123L73%20124M70%20120L67%20124M69%20122L67%20122M69%20122L69%20123M68%20123L67%20123M68%20123L68%20124M70%20120L65%20120M68%20120L67%20119M68%20120L67%20121M66%20120L66%20119M66%20120L65%20120M70%20120L68%20116M69%20118L69%20117M69%20118L68%20117M68%20117L69%20116M68%20117L67%20116M70%20120L73%20116M71%20118L73%20118M71%20118L71%20117M72%20117L73%20117M72%20117L72%20116%22%20fill%3D%22none%22%20stroke%3D%22%2399c6e6%22%20stroke-width%3D%222.3%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M70%20120L75%20120M72%20120L73%20121M72%20120L73%20119M74%20120L74%20121M74%20120L75%20120M70%20120L72%20124M71%20122L71%20123M71%20122L72%20123M72%20123L71%20124M72%20123L73%20124M70%20120L67%20124M69%20122L67%20122M69%20122L69%20123M68%20123L67%20123M68%20123L68%20124M70%20120L65%20120M68%20120L67%20119M68%20120L67%20121M66%20120L66%20119M66%20120L65%20120M70%20120L68%20116M69%20118L69%20117M69%20118L68%20117M68%20117L69%20116M68%20117L67%20116M70%20120L73%20116M71%20118L73%20118M71%20118L71%20117M72%20117L73%20117M72%20117L72%20116%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");

  /* Frost: one blue-white family for every seasonal surface, from the
     faintest band to the hero sky. Gold is the only Christmas colour laid on
     top of it. */
  --dp-q4-frost: #eef1ff;
  --dp-q4-frost-soft: #f3f5ff;
  --dp-q4-frost-faint: #f8f9fe;
  --dp-q4-sky: linear-gradient(180deg, #f7f8ff 0%, #e7ecff 100%);
  --dp-q4-gold: #e2b13c;
  --dp-q4-ink: #132440;
  --dp-q4-violet: #5b3fd6;

  /* Snow as soft dots. White alone disappears against the top of the frost
     sky, so every dot has a faint blue rim — that rim is the part you see.
     Two tiles: small and far, fewer and nearer. */
  --dp-q4-dots:
    radial-gradient(circle at 14% 18%, #fff 0 1.7px, rgba(160, 174, 230, 0.5) 2.3px, rgba(160, 174, 230, 0) 3px),
    radial-gradient(circle at 63% 44%, #fff 0 1.4px, rgba(160, 174, 230, 0.45) 2px, rgba(160, 174, 230, 0) 2.6px),
    radial-gradient(circle at 34% 84%, #fff 0 1.2px, rgba(160, 174, 230, 0.4) 1.8px, rgba(160, 174, 230, 0) 2.4px),
    radial-gradient(circle at 88% 70%, #fff 0 1.6px, rgba(160, 174, 230, 0.45) 2.2px, rgba(160, 174, 230, 0) 2.9px);
  --dp-q4-dots-near:
    radial-gradient(circle at 28% 24%, #fff 0 2.5px, rgba(150, 166, 226, 0.45) 3.2px, rgba(150, 166, 226, 0) 4.1px),
    radial-gradient(circle at 76% 70%, #fff 0 2.1px, rgba(150, 166, 226, 0.4) 2.8px, rgba(150, 166, 226, 0) 3.7px);
}

/* ══════════════════════════════════════════════════════════════════════════
 * Topbar
 *
 * Frost instead of the everyday sky blue: the bar is the first Christmas
 * thing on every page, so it carries the season's ground. A drawn snowflake,
 * the deadline, the days left in a white chip, and a slow sheen crossing the
 * bar.
 * ══════════════════════════════════════════════════════════════════════════ */

.dp-topbar--q4 {
  position: relative;
  overflow: hidden;
  background: var(--dp-q4-frost);
  color: var(--dp-q4-ink);
}

/* Slow highlight sweep. Purely decorative and pointer-transparent. */
.dp-topbar--q4::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 38%,
    rgba(255, 255, 255, 0.7) 50%,
    transparent 62%
  );
  transform: translateX(-100%);
  animation: dp-q4-sheen 7s ease-in-out infinite;
}

@keyframes dp-q4-sheen {
  0%, 55% { transform: translateX(-100%); }
  100%    { transform: translateX(100%); }
}

.dp-topbar__q4 {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  width: var(--dp-width);
  margin: 0 auto;
  padding: 9px 0;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
}

.dp-topbar__q4-icon {
  display: inline-flex;
  color: var(--dp-accent);
  animation: dp-q4-turn 6s ease-in-out infinite;
}

.dp-topbar__q4-icon svg {
  display: block;
  width: 15px;
  height: 15px;
}

/* A sixth of a turn and back. The flake has six arms, so both ends of the
   swing look the same and it only seems to catch the light. */
@keyframes dp-q4-turn {
  0%, 100% { transform: rotate(0deg); opacity: 1; }
  50%      { transform: rotate(60deg); opacity: 0.6; }
}

.dp-topbar__q4-text {
  letter-spacing: 0.01em;
}

.dp-topbar__q4-text strong {
  font-weight: 700;
}

.dp-topbar__q4-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(19, 36, 64, 0.24);
}

.dp-topbar__q4-timer {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(57, 44, 115, 0.06);
  color: var(--dp-q4-violet);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .dp-topbar__q4 {
    gap: 4px 8px;
    padding: 8px 12px;
    font-size: 12px;
  }

  .dp-topbar__q4-sep {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
 * Header logo
 *
 * The Christmas wordmark is a different shape from the everyday one, so the
 * shared caps in site.css (160x58 desktop, 126x40 mobile) render it smaller
 * even though the file is bigger. Measured:
 *
 *   everyday   canvas 2203x489 (4.51:1), letters fill 74.6% of the height
 *   Christmas  canvas 1200x400 (3.00:1), letters fill 46.0% — the hat needs
 *              headroom above and the canvas has 25% dead space below
 *
 * At the shared caps that puts the Christmas letters at 18.4px on mobile
 * against 20.9px for the everyday logo: 12% smaller. These caps size the
 * seasonal letters ~12% LARGER than the everyday ones instead, which is what
 * the extra dead space needs to read as the same weight in the bar.
 *
 * Selectors are qualified as `.dp-brand img.…` on purpose: site.css sets
 * `.dp-brand img`, and a bare class loses that specificity contest.
 *
 * If the artwork is ever re-exported with the bottom padding trimmed, these
 * numbers need redoing — they are tied to that 46% figure, not to the file.
 * ══════════════════════════════════════════════════════════════════════════ */

/* The winter wordmark is wider than the everyday one, and the season adds a
   "Julegaver" item to the menu. On a full-width header the menu tightens a
   little so its items stay on one line; narrower desktops keep the everyday
   wrapping rather than overflow. */
.dp-brand img.dp-brand__img--q4 {
  max-width: clamp(170px, 15vw, 218px);
  max-height: 76px;
}

@media (min-width: 1200px) {
  .dp-header__inner:has(.dp-brand__img--q4) {
    gap: 20px;
  }

  .dp-header__inner:has(.dp-brand__img--q4) .dp-nav__list {
    gap: 18px;
  }

  .dp-header__inner:has(.dp-brand__img--q4) .dp-nav__list a {
    font-size: 13px;
    white-space: nowrap;
  }
}

@media (max-width: 989px) {
  .dp-brand img.dp-brand__img--q4 {
    max-width: 180px;
    max-height: 62px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
 * Christmas front page and /julegaver/
 *
 * Both pages are <main class="dp-q4">. White all the way down, and the frost
 * ground in exactly three places — the hero, the "Pakk inn" band and the
 * closing band — so the page reads as one surface with three Christmas
 * moments instead of a new background in every section.
 * ══════════════════════════════════════════════════════════════════════════ */

.dp-q4 {
  background: #fff;
}

/* ── Hero ───────────────────────────────────────────────────────────────────
 * The everyday hero — same layout, same proof card, same buttons — on a frost
 * sky instead of the grey paper. The photo is the "jul-hero" upload, shot on
 * the same frost colours so it sits in the sky rather than on it.
 * ────────────────────────────────────────────────────────────────────────── */

.dp-q4 .dp-hero-section,
.dp-q4-landing__hero {
  isolation: isolate;
  background-color: var(--dp-q4-frost);
  background-image: var(--dp-q4-sky);
}

/* Snow, falling. Two layers of the soft dots, each a tile with a few flakes
 * in it. A layer starts one tile above the hero and slides down exactly one
 * tile per loop, so the loop is seamless and the only thing that animates is
 * a transform: nothing repaints. z-index -1 inside the isolated hero puts the
 * snow above the sky and behind every word and button. */
.dp-q4 .dp-hero-section::before,
.dp-q4 .dp-hero-section::after,
.dp-q4-landing__hero::before,
.dp-q4-landing__hero::after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--dp-q4-fall));
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: repeat;
  animation: dp-q4-fall var(--dp-q4-fall-time) linear infinite;
  will-change: transform;
}

.dp-q4 .dp-hero-section::before,
.dp-q4-landing__hero::before {
  --dp-q4-fall: 260px;
  --dp-q4-fall-time: 46s;
  background-image: var(--dp-q4-dots);
  background-size: 230px 260px;
}

.dp-q4 .dp-hero-section::after,
.dp-q4-landing__hero::after {
  --dp-q4-fall: 320px;
  --dp-q4-fall-time: 30s;
  background-image: var(--dp-q4-dots-near);
  background-size: 290px 320px;
  background-position: 120px 0;
  opacity: 0.85;
}

@keyframes dp-q4-fall {
  to { transform: translate3d(0, var(--dp-q4-fall), 0); }
}

.dp-q4 .dp-hero-video-shell {
  border-radius: 24px;
  box-shadow: 0 30px 60px -28px rgba(70, 80, 180, 0.5), 0 2px 8px rgba(19, 36, 64, 0.06);
}

.dp-q4 .dp-hero-tag {
  border-color: rgba(19, 36, 64, 0.1);
  background: #fff;
  color: var(--dp-q4-ink);
  letter-spacing: 0.14em;
}

.dp-q4 .dp-hero-headline {
  color: var(--dp-q4-ink);
}

.dp-q4 .dp-hero-subtitle,
.dp-q4 .dp-hero-rating__text {
  color: rgba(19, 36, 64, 0.74);
}

.dp-q4 .dp-hero-rating__stars {
  color: var(--dp-q4-gold);
}

/* Solid white rather than the everyday frosted glass: on a pale sky the glass
   disappears into it. */
.dp-q4 .dp-hero-btn-secondary,
.dp-q4 .dp-hero-btn-secondary:hover {
  border-color: rgba(19, 36, 64, 0.08);
  background: #fff;
  color: var(--dp-q4-ink);
}

/* ── Deadline line ──────────────────────────────────────────────────────────
 * The date that stops a Christmas order, said once and quietly: one line
 * under the hero, with the days left beside it. The topbar already counts
 * down; a second, louder clock here pushed the books below the fold two
 * months before anyone needed to hurry.
 * ────────────────────────────────────────────────────────────────────────── */

.dp-q4-deadline {
  padding: 15px 1rem;
  border-top: 1px solid rgba(19, 36, 64, 0.06);
  border-bottom: 1px solid rgba(19, 36, 64, 0.08);
  background: #fff;
  color: var(--dp-q4-ink);
}

.dp-q4-deadline__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
  max-width: var(--dp-width);
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
}

.dp-q4-deadline__icon {
  display: inline-flex;
  color: var(--dp-accent);
}

.dp-q4-deadline__icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

.dp-q4-deadline__date {
  color: var(--dp-q4-violet);
  font-weight: 700;
  white-space: nowrap;
}

.dp-q4-deadline__left {
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--dp-q4-frost);
  color: var(--dp-q4-violet);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .dp-q4-deadline {
    padding: 12px 16px;
  }

  .dp-q4-deadline__inner {
    font-size: 14px;
  }
}

/* ── Christmas gifts: the everyday product grid, on white ───────────────── */

.dp-q4 .dp-q4-gifts {
  background: #fff;
}

.dp-q4 .dp-q4-gifts .dp-product-collection__eyebrow {
  color: var(--dp-accent);
}

/* ── "Under treet": three reasons, each under a small frost icon ────────── */

.dp-q4-why {
  width: 100%;
  padding: 24px 1rem 84px;
  background: #fff;
}

.dp-q4-why__header {
  width: var(--dp-width);
  margin: 0 auto 40px;
  text-align: center;
}

.dp-q4-why__eyebrow {
  margin: 0 0 10px;
  color: var(--dp-accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.dp-q4-why__title {
  margin: 0 auto;
  max-width: 22ch;
  color: var(--dp-text);
  font-family: "Playfair Display", serif;
  font-size: clamp(27px, 4vw, 42px);
  font-weight: 700;
  line-height: 1.16;
  text-wrap: balance;
}

.dp-q4-why__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 48px);
  width: var(--dp-width);
  max-width: 1040px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.dp-q4-why__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.dp-q4-why__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--dp-q4-frost);
  color: var(--dp-accent);
}

.dp-q4-why__icon svg {
  display: block;
  width: 26px;
  height: 26px;
}

.dp-q4-why__item-title {
  margin: 0;
  color: var(--dp-text);
  font-size: 18px;
  font-weight: 600;
}

.dp-q4-why__item-text {
  max-width: 32ch;
  margin: 0;
  color: var(--dp-text-soft);
  font-size: 15px;
  line-height: 1.62;
}

@media (max-width: 720px) {
  .dp-q4-why {
    padding-bottom: 64px;
  }

  .dp-q4-why__list {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ── "Pakk inn et helt eventyr i år": the first frost band ──────────────── */

.dp-q4 .dp-q4-feature {
  background: var(--dp-q4-frost-soft);
}

/* Playfair like every other section heading on the page; the everyday
   feature block is the one place that sets its title in heavy Poppins. */
.dp-q4 .dp-q4-feature .dp-feature-title {
  color: var(--dp-q4-ink);
  font-family: "Playfair Display", serif;
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.dp-q4 .dp-q4-highlight {
  background: none;
  color: var(--dp-q4-violet);
}

@media (max-width: 989px) {
  .dp-q4 .dp-q4-feature .dp-feature-title {
    font-size: 30px;
  }
}

/* ── Steps: the everyday editorial row, on the page's white ─────────────── */

.dp-q4 .dp-q4-steps {
  background: #fff;
}

/* ── Reviews: the photo wall, standing straight ─────────────────────────────
 * The everyday wall tilts every card and floats sticker labels around them.
 * Here the cards stand straight and still, on the faintest frost.
 * ────────────────────────────────────────────────────────────────────────── */

.dp-q4 .fdb-reviews {
  background: var(--dp-q4-frost-faint);
}

.dp-q4 .fdb-reviews__ambient {
  display: none;
}

.dp-q4 .fdb-reviews__card {
  --fdb-rev-rot: 0deg;
  margin-top: 0;
  animation: none;
}

.dp-q4 .fdb-reviews__card .fdb-reviews__quote {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

.dp-q4 .fdb-reviews__stars {
  color: var(--dp-q4-gold);
}

/* ── FAQ: five questions, the deadline one open on top ──────────────────── */

.dp-q4 .dp-q4-faq .dp-faq__kicker {
  padding: 0;
  border: 0;
  background: none;
  color: var(--dp-accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
}

.dp-q4 .dp-q4-faq .dp-faq__card::before {
  background: linear-gradient(90deg, rgba(106, 90, 224, 0.7), rgba(106, 90, 224, 0.22), rgba(19, 36, 64, 0.06));
}

.dp-q4 .dp-q4-faq .dp-faq__arrow {
  border-color: rgba(106, 90, 224, 0.16);
  background: var(--dp-q4-frost);
  box-shadow: none;
  color: var(--dp-q4-violet);
}

/* "Se alle spørsmål" under a shortened list (template-parts/faq-section.php,
   'more_url'). */
.dp-faq__more {
  margin: 26px 0 0;
  text-align: center;
}

.dp-faq__more-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding-bottom: 0.18rem;
  border-bottom: 1px solid rgba(19, 36, 64, 0.18);
  color: var(--dp-text);
  font-size: 0.96rem;
  font-weight: 600;
  text-decoration: none;
}

.dp-faq__more-link:hover {
  border-bottom-color: currentColor;
}

/* ── Closing band: the last frost moment ────────────────────────────────── */

.dp-q4-cta {
  position: relative;
  width: 100%;
  padding: clamp(56px, 8vw, 96px) 1rem;
  background: var(--dp-q4-frost);
  text-align: center;
}

.dp-q4-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 640px;
  margin: 0 auto;
}

.dp-q4-cta__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 0 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 12px 26px -14px rgba(91, 63, 214, 0.45);
  color: var(--dp-accent);
}

.dp-q4-cta__icon svg {
  display: block;
  width: 30px;
  height: 30px;
}

.dp-q4-cta__title {
  margin: 0 0 10px;
  color: var(--dp-text);
  font-family: "Playfair Display", serif;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.16;
}

.dp-q4-cta__text {
  max-width: 44ch;
  margin: 0 auto 24px;
  color: var(--dp-text-soft);
  font-size: 16px;
  line-height: 1.6;
}

/* Same purple pill as the everyday CTAs — deliberately not restyled. */
.dp-q4-cta__button {
  display: inline-block;
  padding: 15px 38px;
  border-radius: 999px;
  background: var(--dp-accent);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.dp-q4-cta__button:hover {
  background: var(--dp-accent-strong);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(91, 63, 214, 0.28);
}

.dp-q4-cta__note {
  margin: 16px 0 0;
  color: var(--dp-text-muted);
  font-size: 13px;
  line-height: 1.55;
}

/* ══════════════════════════════════════════════════════════════════════════
 * /julegaver/ landing page
 *
 * The same pieces as the Christmas front page, plus the two things only the
 * landing page has: a written introduction for someone who searched for a
 * Christmas gift, and a short gift guide. Its hero shares the front page's
 * frost sky and snow (see the hero block above).
 * ══════════════════════════════════════════════════════════════════════════ */

.dp-q4-landing__hero {
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 7vw, 64px) 1rem 40px;
  text-align: center;
}

.dp-q4-landing__hero-inner {
  max-width: 760px;
  margin: 0 auto;
}

.dp-q4-landing__eyebrow {
  margin: 0 0 10px;
  color: var(--dp-accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.dp-q4-landing__title {
  margin: 0 auto;
  max-width: 16ch;
  color: var(--dp-q4-ink);
  font-family: "Playfair Display", serif;
  font-size: clamp(36px, 6.4vw, 64px);
  font-weight: 700;
  line-height: 1.04;
  text-wrap: balance;
}

.dp-q4-landing__lead {
  max-width: 58ch;
  margin: 18px auto 0;
  color: var(--dp-text-soft);
  font-size: 16.5px;
  line-height: 1.7;
}

.dp-q4-landing__covers {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: 30px auto 0;
  padding: 0;
  list-style: none;
}

.dp-q4-landing__covers li {
  width: clamp(116px, 26vw, 210px);
  margin: 0 -14px;
  filter: drop-shadow(0 18px 26px rgba(19, 36, 64, 0.22));
}

.dp-q4-landing__covers li:nth-child(1) { transform: rotate(-6deg); }
.dp-q4-landing__covers li:nth-child(2) { z-index: 1; transform: translateY(-10px); }
.dp-q4-landing__covers li:nth-child(3) { transform: rotate(6deg); }
.dp-q4-landing__covers--2 li:nth-child(2) { transform: rotate(5deg); }

.dp-q4-landing__covers img {
  display: block;
  width: 100%;
  height: auto;
}

.dp-q4-landing__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

@media (max-width: 620px) {
  .dp-q4-landing__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ── Gift guide: three columns of words, no boxes ───────────────────────── */

.dp-q4-guide {
  width: 100%;
  padding: 56px 1rem 18px;
}

.dp-q4-guide__header {
  margin: 0 auto 26px;
  text-align: center;
}

.dp-q4-guide__eyebrow {
  margin: 0 0 8px;
  color: var(--dp-accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dp-q4-guide__title {
  margin: 0;
  color: var(--dp-text);
  font-family: "Playfair Display", serif;
  font-size: clamp(27px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.16;
}

.dp-q4-guide__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: var(--dp-width);
  max-width: 1040px;
  margin: 0 auto;
}

.dp-q4-guide__item {
  padding: 8px 28px 10px;
  text-align: center;
}

.dp-q4-guide__item + .dp-q4-guide__item {
  border-left: 1px solid rgba(19, 36, 64, 0.1);
}

.dp-q4-guide__item-title {
  margin: 0 0 8px;
  color: var(--dp-text);
  font-size: 18px;
  font-weight: 600;
}

.dp-q4-guide__item-text {
  margin: 0 0 12px;
  color: var(--dp-text-soft);
  font-size: 15px;
  line-height: 1.62;
}

.dp-q4-guide__link {
  color: var(--dp-accent);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.dp-q4-guide__link:hover {
  text-decoration: underline;
}

@media (max-width: 720px) {
  .dp-q4-guide__grid {
    grid-template-columns: 1fr;
  }

  .dp-q4-guide__item {
    padding: 18px 4px;
  }

  .dp-q4-guide__item + .dp-q4-guide__item {
    border-top: 1px solid rgba(19, 36, 64, 0.1);
    border-left: 0;
  }
}

/* ── /julegaver/ while the Christmas books cannot be ordered ─────────────
   Their covers with a gold label instead of a price and a button: before
   they are finished ("Kommer snart") and between Christmases ("Tilbake til
   jul"). The bestseller grid follows right under it. */

.dp-q4-waiting {
  width: 100%;
  padding: 56px 1rem 8px;
}

.dp-q4-waiting__header {
  max-width: 640px;
  margin: 0 auto 28px;
  text-align: center;
}

.dp-q4-waiting__eyebrow {
  margin: 0 0 8px;
  color: var(--dp-accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dp-q4-waiting__title {
  margin: 0 0 12px;
  color: var(--dp-text);
  font-family: "Playfair Display", serif;
  font-size: clamp(27px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.16;
  text-wrap: balance;
}

.dp-q4-waiting__text {
  margin: 0;
  color: var(--dp-text-soft);
  font-size: 16px;
  line-height: 1.65;
}

.dp-q4-waiting__books {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  width: var(--dp-width);
  max-width: 1040px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.dp-q4-waiting__book {
  text-align: center;
}

.dp-q4-waiting__cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 14px 28px rgba(19, 36, 64, 0.16);
}

.dp-q4-waiting__name {
  margin: 14px 0 6px;
  color: var(--dp-text);
  font-size: 17px;
  font-weight: 600;
}

.dp-q4-waiting__badge {
  display: inline-block;
  margin: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: #fbf3dc;
  color: #7a5a12;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

@media (max-width: 720px) {
  .dp-q4-waiting__books {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 16px;
  }
}

/* The seasonal menu item, a quiet nudge in the brand purple. */
.dp-season-menu-item--q4 > a {
  color: var(--dp-accent-strong);
}

/* ══════════════════════════════════════════════════════════════════════════
 * Preview stage — the frost ride
 *
 * While the book is being made the stage becomes a frosty winter morning in
 * the front page's colours: snow falling in two depths, pale hills, a cabin
 * with the lights on, and a reindeer pulling the sleigh with the customer's
 * book towards it. The sleigh is the progress bar — preview.js publishes the
 * bar's 0–1 fraction as --dp-progress on the shell, and the sleigh and its
 * tracks in the snow are placed with it. Queue states leave the reindeer
 * standing at the start; it gallops for as long as the countdown runs.
 *
 * Everything here is layered UNDER the existing markup. The pill, title, copy,
 * countdown, error text and retry button are the elements preview.js has
 * always driven; only their colours and the panel's geometry change.
 * ══════════════════════════════════════════════════════════════════════════ */

body.dp-season-q4.dreampage-preview-request .dp-preview-shell {
  /* Shared by the sleigh and its tracks, so the tracks always end under the
     sleigh. Percentages here resolve against the stage, which is square. */
  --dp-q4-runner-w: clamp(104px, 35%, 210px);
}

/* Sky under the scene as well, so nothing lilac shows while it paints. */
body.dp-season-q4.dreampage-preview-request .dp-preview-shell:not(.is-ready) .dp-preview-shell__media {
  background: var(--dp-q4-frost);
}

body.dp-season-q4.dreampage-preview-request .dp-preview-shell__ambient {
  background: radial-gradient(circle, rgba(190, 202, 255, 0.95) 0%, rgba(206, 198, 255, 0.35) 42%, rgba(206, 198, 255, 0) 76%);
}

/* The blurred flat cover that fades in under the everyday card would sit on
   top of the sky as a grey smear. The sleigh already says "nearly". */
body.dp-season-q4.dreampage-preview-request #dp-flat-cover-proxy {
  display: none;
}

/* The panel stops being a floating card and becomes the whole stage. Both the
   desktop (pinned to the bottom) and the phone (centred) geometry are undone.
   The sky warms towards the cabin, low on the right, where the sleigh is
   heading. */
body.dp-season-q4.dreampage-preview-request .dp-preview-shell__processing {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8% 9% 0;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
  background:
    radial-gradient(46% 32% at 84% 66%, rgba(255, 214, 140, 0.34), rgba(255, 214, 140, 0) 70%),
    linear-gradient(180deg, #f8f9ff 0%, #eef1ff 50%, #e2e8ff 100%);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  text-align: center;
  transform: none;
}

/* Everything the state machine writes into sits above the scene. */
body.dp-season-q4.dreampage-preview-request .dp-preview-shell__processing > *:not(.dp-q4-scene) {
  position: relative;
  z-index: 2;
}

body.dp-season-q4.dreampage-preview-request .dp-preview-shell__pill {
  border: 1px solid rgba(106, 90, 224, 0.16);
  background: #fff;
  box-shadow: 0 6px 14px -8px rgba(91, 63, 214, 0.4);
  color: var(--dp-q4-violet);
}

body.dp-season-q4.dreampage-preview-request .dp-preview-shell__title {
  max-width: 22ch;
  text-wrap: balance;
  color: var(--dp-q4-ink);
}

body.dp-season-q4.dreampage-preview-request .dp-preview-shell__copy {
  max-width: 34ch;
  text-wrap: balance;
  color: rgba(19, 36, 64, 0.66);
}

body.dp-season-q4.dreampage-preview-request .dp-preview-shell__timer {
  justify-content: center;
  color: var(--dp-q4-violet);
}

/* The seconds in the hero's blue-to-purple, the one gradient the brand has. */
body.dp-season-q4.dreampage-preview-request #dp-processing-countdown {
  padding-right: 0.04em;
  background: linear-gradient(135deg, #5eccff 0%, #5537ff 52%, #6f00ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

body.dp-season-q4.dreampage-preview-request .dp-preview-shell__timer-suffix {
  color: rgba(91, 63, 214, 0.55);
}

/* The sleigh is the bar now. */
body.dp-season-q4.dreampage-preview-request .dp-preview-shell__progress-track {
  display: none;
}

/* …and the standing reindeer is the "still working" signal in the queue, so
   the spinner would only be a second, competing one. */
body.dp-season-q4.dreampage-preview-request .dp-preview-shell.has-spinner-ui .dp-loading-spinner {
  display: none;
}

body.dp-season-q4.dreampage-preview-request .dp-preview-processing__error {
  color: #b3352f;
}

body.dp-season-q4.dreampage-preview-request .dp-preview-restart-link {
  color: var(--dp-q4-violet);
}

/* ── The scene ──────────────────────────────────────────────────────────── */

.dp-q4-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

/* Snow in two depths: small dots far back, bigger ones up close. Each
 * layer is a span that sways a few pixels side to side, and inside it a tile
 * strip that starts one tile above the stage and falls exactly one tile per
 * loop — seamless, and only transforms animate. The near snow fades in below
 * the words so it never crosses the countdown. */
.dp-q4-scene__snow {
  position: absolute;
  inset: 0 -12px;
  overflow: hidden;
  animation: dp-q4-sway 7s ease-in-out infinite alternate;
}

.dp-q4-scene__snow::before,
.dp-q4-scene__snow--far::after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--dp-q4-fall));
  right: 0;
  bottom: 0;
  left: 0;
  background-repeat: repeat;
  animation: dp-q4-fall var(--dp-q4-fall-time) linear infinite;
  will-change: transform;
}

.dp-q4-scene__snow--far {
  --dp-q4-fall: 190px;
  --dp-q4-fall-time: 14s;
}

/* A second far tile in a different size, so the dots never line up in rows. */
.dp-q4-scene__snow--far::after {
  --dp-q4-fall: 260px;
  --dp-q4-fall-time: 17s;
  background-image: var(--dp-q4-dots);
  background-size: 230px 260px;
  background-position: 90px 40px;
}

.dp-q4-scene__snow--far::before {
  background-image:
    radial-gradient(circle at 14% 18%, #fff 0 1.9px, rgba(150, 166, 226, 0.6) 2.6px, rgba(150, 166, 226, 0) 3.3px),
    radial-gradient(circle at 63% 44%, #fff 0 1.5px, rgba(150, 166, 226, 0.55) 2.2px, rgba(150, 166, 226, 0) 2.8px),
    radial-gradient(circle at 34% 84%, #fff 0 1.3px, rgba(150, 166, 226, 0.5) 2px, rgba(150, 166, 226, 0) 2.6px),
    radial-gradient(circle at 88% 70%, #fff 0 1.7px, rgba(150, 166, 226, 0.55) 2.4px, rgba(150, 166, 226, 0) 3.1px);
  background-size: 170px 190px;
}

.dp-q4-scene__snow--near {
  z-index: 1;
  --dp-q4-fall: 270px;
  --dp-q4-fall-time: 8s;
  animation-duration: 4.6s;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 44%, #000 68%);
  mask-image: linear-gradient(180deg, transparent 0%, transparent 44%, #000 68%);
}

.dp-q4-scene__snow--near::before {
  background-image:
    radial-gradient(circle at 18% 22%, #fff 0 3px, rgba(150, 166, 226, 0.5) 3.8px, rgba(150, 166, 226, 0) 4.8px),
    radial-gradient(circle at 64% 58%, #fff 0 2.4px, rgba(150, 166, 226, 0.45) 3.1px, rgba(150, 166, 226, 0) 4px),
    radial-gradient(circle at 87% 12%, #fff 0 2px, rgba(150, 166, 226, 0.45) 2.7px, rgba(150, 166, 226, 0) 3.5px);
  background-size: 230px 270px;
}

@keyframes dp-q4-sway {
  from { transform: translateX(-8px); }
  to   { transform: translateX(8px); }
}

/* Mountains, hills, trees, the cabin and the snow bank: one SVG, scaled as
   one piece. */
.dp-q4-scene__land {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 43.4%;
}

.dp-q4-scene__smoke circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: dp-q4-smoke 3.6s ease-out infinite;
}

.dp-q4-scene__smoke circle:nth-child(2) { animation-delay: -1.2s; }
.dp-q4-scene__smoke circle:nth-child(3) { animation-delay: -2.4s; }

@keyframes dp-q4-smoke {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.5); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(8px, -26px) scale(2.6); }
}

.dp-q4-scene__light {
  animation: dp-q4-light 1.8s ease-in-out infinite;
  animation-delay: var(--dp-light-delay, 0s);
}

@keyframes dp-q4-light {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* ── The sleigh = the progress bar ──────────────────────────────────────── */

/* Travels from the left edge to just short of the cabin. calc() multiplies the
   free distance by the published fraction; the transition smooths the 250 ms
   ticks into a continuous ride. */
.dp-q4-scene__runner {
  position: absolute;
  bottom: 6%;
  left: calc(2% + (100% - 28% - var(--dp-q4-runner-w)) * var(--dp-progress, 0.08));
  z-index: 1;
  width: var(--dp-q4-runner-w);
  transition: left 0.6s linear;
}

.dp-q4-scene__runner-bob {
  position: relative;
  display: block;
}

.dp-q4-scene__runner svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 6px 8px rgba(70, 80, 160, 0.2));
}

.dp-q4-scene__runner-shadow {
  position: absolute;
  right: 6%;
  bottom: -9%;
  left: 4%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(91, 63, 214, 0.16), rgba(91, 63, 214, 0));
}

/* Powder kicked up behind the runners while the sleigh moves. White with a
   blue rim, for the same reason as the snow: white alone vanishes on snow. */
.dp-q4-scene__puffs {
  position: absolute;
  bottom: -1%;
  left: 0;
  width: 22%;
  aspect-ratio: 1;
}

.dp-q4-scene__puffs span {
  position: absolute;
  bottom: 0;
  left: 30%;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 40%, #fff 0 46%, rgba(190, 200, 240, 0.85) 66%, rgba(190, 200, 240, 0) 72%);
  opacity: 0;
}

/* Tracks in the snow from the start line to the back of the sleigh: two
   thin runner lines, fading in from the left edge. */
.dp-q4-scene__tracks {
  position: absolute;
  bottom: calc(6% + var(--dp-q4-runner-w) * 0.04 - 3px);
  left: 2%;
  width: calc((100% - 28% - var(--dp-q4-runner-w)) * var(--dp-progress, 0.08) + var(--dp-q4-runner-w) * 0.12);
  height: 6px;
  background:
    linear-gradient(rgba(118, 130, 198, 0.42), rgba(118, 130, 198, 0.42)) 0 0 / 100% 1.5px no-repeat,
    linear-gradient(rgba(118, 130, 198, 0.3), rgba(118, 130, 198, 0.3)) 0 100% / 100% 1.5px no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px);
  mask-image: linear-gradient(90deg, transparent 0, #000 64px);
  transition: width 0.6s linear;
}

/* A little gold dust over the tracks: the only magic in the picture. */
.dp-q4-scene__tracks::after {
  content: "";
  position: absolute;
  inset: -16px 0 4px;
  background-image:
    radial-gradient(2.2px 2.2px at 12% 30%, #e9b93f, transparent),
    radial-gradient(1.6px 1.6px at 33% 72%, #e2b13c, transparent),
    radial-gradient(2.4px 2.4px at 55% 18%, #f0c45a, transparent),
    radial-gradient(1.6px 1.6px at 74% 58%, #e2b13c, transparent),
    radial-gradient(2.2px 2.2px at 91% 36%, #e9b93f, transparent);
  background-size: 80px 100%;
  animation: dp-q4-glitter 1.6s ease-in-out infinite alternate;
}

@keyframes dp-q4-glitter {
  from { opacity: 0.3; }
  to   { opacity: 1; }
}

/* Legs swing from the hip. transform-box keeps the origin on each leg's own
   box — without it SVG transforms rotate around the viewBox corner. */
.dp-q4-leg {
  transform-box: fill-box;
  transform-origin: 50% 0;
}

/* Gallop while the countdown runs (and through "nesten ferdig"). */
body.dp-season-q4 .dp-preview-shell.has-countdown-ui .dp-q4-scene__runner-bob,
body.dp-season-q4 .dp-preview-shell.is-delayed .dp-q4-scene__runner-bob {
  animation: dp-q4-bob 0.5s ease-in-out infinite;
}

body.dp-season-q4 .dp-preview-shell.has-countdown-ui .dp-q4-leg--front,
body.dp-season-q4 .dp-preview-shell.is-delayed .dp-q4-leg--front {
  animation: dp-q4-leg-front 0.5s linear infinite;
}

body.dp-season-q4 .dp-preview-shell.has-countdown-ui .dp-q4-leg--hind,
body.dp-season-q4 .dp-preview-shell.is-delayed .dp-q4-leg--hind {
  animation: dp-q4-leg-hind 0.5s linear infinite;
}

body.dp-season-q4 .dp-preview-shell .dp-q4-leg--far {
  animation-delay: -0.07s;
}

body.dp-season-q4 .dp-preview-shell.has-countdown-ui .dp-q4-scene__puffs span,
body.dp-season-q4 .dp-preview-shell.is-delayed .dp-q4-scene__puffs span {
  animation: dp-q4-puff 0.9s ease-out infinite;
}

body.dp-season-q4 .dp-preview-shell .dp-q4-scene__puffs span:nth-child(2) { animation-delay: -0.3s; }
body.dp-season-q4 .dp-preview-shell .dp-q4-scene__puffs span:nth-child(3) { animation-delay: -0.6s; }

@keyframes dp-q4-leg-front {
  0%, 100% { transform: rotate(-34deg); }
  50%      { transform: rotate(26deg); }
}

@keyframes dp-q4-leg-hind {
  0%, 100% { transform: rotate(26deg); }
  50%      { transform: rotate(-30deg); }
}

@keyframes dp-q4-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-4%) rotate(-1.2deg); }
  75%      { transform: translateY(-1%) rotate(0.6deg); }
}

@keyframes dp-q4-puff {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.4); }
  25%  { opacity: 0.95; }
  100% { opacity: 0; transform: translate(-150%, -55%) scale(1.25); }
}

/* In the queue the reindeer stands and breathes. */
body.dp-season-q4 .dp-preview-shell.has-spinner-ui:not(.is-delayed) .dp-q4-scene__runner-bob {
  animation: dp-q4-idle 2.8s ease-in-out infinite;
}

@keyframes dp-q4-idle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.5%); }
}

.dp-q4-scene__nose-glow {
  animation: dp-q4-nose 1.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes dp-q4-nose {
  0%, 100% { opacity: 0.65; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.15); }
}

/* A stalled or failed job stops the ride rather than galloping on. */
body.dp-season-q4 .dp-preview-shell.is-error .dp-q4-scene__runner {
  opacity: 0.4;
  filter: grayscale(0.6);
}

body.dp-season-q4 .dp-preview-shell.is-error .dp-q4-scene__tracks {
  opacity: 0;
}

/* ── Arrival ────────────────────────────────────────────────────────────── */

.dp-q4-finale {
  position: absolute;
  inset: -4%;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cpath%20fill%3D%22%23ffe6ad%22%20d%3D%22M14%2016.5C14.99%2021.01%2014.99%2021.01%2019.5%2022C14.99%2022.99%2014.99%2022.99%2014%2027.5C13.01%2022.99%2013.01%2022.99%208.5%2022C13.01%2021.01%2013.01%2021.01%2014%2016.5Z%22%2F%3E%3Cpath%20fill%3D%22%238f7dff%22%20d%3D%22M30%205.5C30.63%208.37%2030.63%208.37%2033.5%209C30.63%209.63%2030.63%209.63%2030%2012.5C29.37%209.63%2029.37%209.63%2026.5%209C29.37%208.37%2029.37%208.37%2030%205.5Z%22%2F%3E%3Cpath%20fill%3D%22%23ffd98a%22%20d%3D%22M50%209.5C51.17%2014.83%2051.17%2014.83%2056.5%2016C51.17%2017.17%2051.17%2017.17%2050%2022.5C48.83%2017.17%2048.83%2017.17%2043.5%2016C48.83%2014.83%2048.83%2014.83%2050%209.5Z%22%2F%3E%3Cpath%20fill%3D%22%238f7dff%22%20d%3D%22M70%204.2C70.684%207.316%2070.684%207.316%2073.8%208C70.684%208.684%2070.684%208.684%2070%2011.8C69.316%208.684%2069.316%208.684%2066.2%208C69.316%207.316%2069.316%207.316%2070%204.2Z%22%2F%3E%3Cpath%20fill%3D%22%23ffe6ad%22%20d%3D%22M86%2018.2C87.044%2022.956%2087.044%2022.956%2091.8%2024C87.044%2025.044%2087.044%2025.044%2086%2029.8C84.956%2025.044%2084.956%2025.044%2080.2%2024C84.956%2022.956%2084.956%2022.956%2086%2018.2Z%22%2F%3E%3Cpath%20fill%3D%22%238f7dff%22%20d%3D%22M92%2046.4C92.648%2049.352%2092.648%2049.352%2095.6%2050C92.648%2050.648%2092.648%2050.648%2092%2053.6C91.352%2050.648%2091.352%2050.648%2088.4%2050C91.352%2049.352%2091.352%2049.352%2092%2046.4Z%22%2F%3E%3Cpath%20fill%3D%22%23ffd98a%22%20d%3D%22M84%2072C85.08%2076.92%2085.08%2076.92%2090%2078C85.08%2079.08%2085.08%2079.08%2084%2084C82.92%2079.08%2082.92%2079.08%2078%2078C82.92%2076.92%2082.92%2076.92%2084%2072Z%22%2F%3E%3Cpath%20fill%3D%22%238f7dff%22%20d%3D%22M62%2086C62.72%2089.28%2062.72%2089.28%2066%2090C62.72%2090.72%2062.72%2090.72%2062%2094C61.28%2090.72%2061.28%2090.72%2058%2090C61.28%2089.28%2061.28%2089.28%2062%2086Z%22%2F%3E%3Cpath%20fill%3D%22%23ffe6ad%22%20d%3D%22M36%2082.4C37.008%2086.992%2037.008%2086.992%2041.6%2088C37.008%2089.008%2037.008%2089.008%2036%2093.6C34.992%2089.008%2034.992%2089.008%2030.4%2088C34.992%2086.992%2034.992%2086.992%2036%2082.4Z%22%2F%3E%3Cpath%20fill%3D%22%238f7dff%22%20d%3D%22M12%2065.8C12.756%2069.244%2012.756%2069.244%2016.2%2070C12.756%2070.756%2012.756%2070.756%2012%2074.2C11.244%2070.756%2011.244%2070.756%207.8%2070C11.244%2069.244%2011.244%2069.244%2012%2065.8Z%22%2F%3E%3Cpath%20fill%3D%22%23ffd98a%22%20d%3D%22M8%2040.8C8.576%2043.424%208.576%2043.424%2011.2%2044C8.576%2044.576%208.576%2044.576%208%2047.2C7.424%2044.576%207.424%2044.576%204.8%2044C7.424%2043.424%207.424%2043.424%208%2040.8Z%22%2F%3E%3Cpath%20fill%3D%22%238f7dff%22%20d%3D%22M24%2049.4C24.468%2051.532%2024.468%2051.532%2026.6%2052C24.468%2052.468%2024.468%2052.468%2024%2054.6C23.532%2052.468%2023.532%2052.468%2021.4%2052C23.532%2051.532%2023.532%2051.532%2024%2049.4Z%22%2F%3E%3Cpath%20fill%3D%22%238f7dff%22%20d%3D%22M78%2037.2C78.504%2039.496%2078.504%2039.496%2080.8%2040C78.504%2040.504%2078.504%2040.504%2078%2042.8C77.496%2040.504%2077.496%2040.504%2075.2%2040C77.496%2039.496%2077.496%2039.496%2078%2037.2Z%22%2F%3E%3C%2Fsvg%3E") center / cover no-repeat,
    radial-gradient(55% 45% at 50% 45%, rgba(255, 217, 138, 0.28), transparent 72%);
  filter: drop-shadow(0 0 6px rgba(255, 210, 122, 0.8));
}

body.dp-season-q4 .dp-preview-shell.is-ready .dp-q4-finale {
  animation: dp-q4-finale 1.7s ease-out 0.25s 1 both;
}

@keyframes dp-q4-finale {
  0%   { opacity: 0; transform: scale(0.55) rotate(-6deg); }
  30%  { opacity: 1; }
  70%  { opacity: 0.9; }
  100% { opacity: 0; transform: scale(1.12) rotate(4deg); }
}

/* ── Gentle snowfall behind the whole preview page ──────────────────────── */

/* Painted between the page background and the content, so it shows in the
   white space around the stage and never over a button or the price bar. The
   template's own white is lifted so the body's white shows through instead —
   the same colour, with the snow in front of it. */
body.dp-season-q4.dreampage-preview-request .dp-preview-template {
  background: transparent;
}

body.dp-season-q4.dreampage-preview-request::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--dp-q4-flakes);
  background-size: 211px 293px, 173px 241px, 127px 199px;
  opacity: 0.5;
  animation: dp-q4-snow 26s linear infinite;
}

/* Each layer travels a whole number of its own tiles in both axes, so each
   loops seamlessly and the three distances give three fall speeds. */
@keyframes dp-q4-snow {
  to {
    background-position:
      211px 586px,
      -112px 723px,
      264px 398px;
  }
}

/* Wide screens: the stage is ~570 px square, so the words can be bigger. */
@media (min-width: 990px) {
  body.dp-season-q4.dreampage-preview-request .dp-preview-shell__title {
    font-size: 30px;
  }

  body.dp-season-q4.dreampage-preview-request .dp-preview-shell__copy {
    font-size: 15px;
  }

  body.dp-season-q4.dreampage-preview-request .dp-preview-shell__timer {
    margin-top: 18px;
    font-size: 54px;
  }

  body.dp-season-q4.dreampage-preview-request .dp-preview-shell__timer-suffix {
    font-size: 22px;
  }
}

@media (max-width: 620px) {
  body.dp-season-q4.dreampage-preview-request .dp-preview-shell__processing {
    padding-top: 9%;
  }

  body.dp-season-q4.dreampage-preview-request .dp-preview-shell__title {
    font-size: 19px;
  }

  body.dp-season-q4.dreampage-preview-request .dp-preview-shell__copy {
    font-size: 12.5px;
  }

  body.dp-season-q4.dreampage-preview-request .dp-preview-shell__timer {
    margin-top: 6px;
    font-size: 28px;
  }
}

/* Motion is decoration everywhere in this file, so all of it goes. The sleigh
   still moves with the real progress — that movement is information — but
   nothing gallops, falls or twinkles. */
@media (prefers-reduced-motion: reduce) {
  .dp-topbar--q4::after,
  .dp-topbar__q4-icon,
  .dp-q4 .dp-hero-section::before,
  .dp-q4 .dp-hero-section::after,
  .dp-q4-landing__hero::before,
  .dp-q4-landing__hero::after,
  .dp-q4-scene__snow,
  .dp-q4-scene__snow::before,
  .dp-q4-scene__snow--far::after,
  .dp-q4-scene__smoke circle,
  .dp-q4-scene__light,
  .dp-q4-scene__nose-glow,
  .dp-q4-scene__tracks::after,
  body.dp-season-q4 .dp-preview-shell.has-countdown-ui .dp-q4-scene__runner-bob,
  body.dp-season-q4 .dp-preview-shell.is-delayed .dp-q4-scene__runner-bob,
  body.dp-season-q4 .dp-preview-shell.has-spinner-ui:not(.is-delayed) .dp-q4-scene__runner-bob,
  body.dp-season-q4 .dp-preview-shell.has-countdown-ui .dp-q4-leg--front,
  body.dp-season-q4 .dp-preview-shell.has-countdown-ui .dp-q4-leg--hind,
  body.dp-season-q4 .dp-preview-shell.is-delayed .dp-q4-leg--front,
  body.dp-season-q4 .dp-preview-shell.is-delayed .dp-q4-leg--hind,
  body.dp-season-q4 .dp-preview-shell.has-countdown-ui .dp-q4-scene__puffs span,
  body.dp-season-q4 .dp-preview-shell.is-delayed .dp-q4-scene__puffs span,
  body.dp-season-q4 .dp-preview-shell.is-ready .dp-q4-finale,
  body.dp-season-q4.dreampage-preview-request::before {
    animation: none;
  }

  .dp-q4-scene__smoke,
  .dp-q4-scene__puffs {
    display: none;
  }

  .dp-q4-cta__button:hover {
    transform: none;
  }
}