/* Black Week-siden (black-week.html, js/black-week.js). Farvereglen: al tekst er hvid; guld er kun streger,
   omrids, gnister og den fyldte knap. Bevægelse slås fra ved "reducer bevægelse" (nederst). */

.bw { background: #000; }

/* ---- Toppen ---- */
.bw-hero { position: relative; overflow: hidden; isolation: isolate; min-height: min(100svh, 920px); display: grid; place-items: center;
  padding: 150px 16px 72px; text-align: center; background:
    radial-gradient(120% 70% at 50% 108%, rgba(212, 175, 55, 0.22), rgba(212, 175, 55, 0) 60%),
    radial-gradient(60% 40% at 50% 0%, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 70%), #000; }
.bw-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-bright) 50%, var(--gold) 80%, transparent); }
.bw-hero__gnister { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.bw-hero__inner { position: relative; max-width: 1000px; width: 100%; }

.bw-hero__eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 22px; font: 500 12px/1 var(--font-sans);
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink); }
.bw-hero__eyebrow::before, .bw-hero__eyebrow::after { content: ""; width: 34px; height: 1px; background: var(--gold); }

.bw-hero__titel { margin: 0; font: 600 clamp(64px, 17vw, 196px)/0.84 var(--font-sans); letter-spacing: -0.04em; text-transform: uppercase; }
.bw-hero__ord { display: block; }
.bw-hero__ord--fyld { color: var(--ink);
  background: linear-gradient(100deg, #f4f2ec 0%, #f4f2ec 38%, #fffaf0 47%, #ffffff 50%, #fffaf0 53%, #f4f2ec 62%, #f4f2ec 100%);
  background-size: 260% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; animation: bw-glans 5.5s var(--ease) infinite 1.2s; }
.bw-hero__ord--kontur { color: #030303; -webkit-text-stroke: 3px var(--gold); paint-order: stroke fill; text-shadow: 0 0 40px rgba(212, 175, 55, 0.25); }
@keyframes bw-glans { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0% 0; } }

.bw-hero__fase { margin: 30px 0 18px; font: 400 clamp(18px, 2.4vw, 24px)/1.35 var(--font-display); color: var(--ink); }
.bw-hero__fase strong { font-weight: 600; }
.bw-hero__dag { display: inline-block; margin: 0 0 10px; padding: 7px 16px; border: 1px solid var(--gold); border-radius: 999px;
  font: 600 12px/1 var(--font-sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink);
  box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.6); animation: bw-puls 1.8s ease-out infinite; }
@keyframes bw-puls { 0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.55); } 100% { box-shadow: 0 0 0 16px rgba(212, 175, 55, 0); } }

/* ---- Uret: fire felter, der vippes, når tallet skifter ---- */
.bw-ur { display: flex; justify-content: center; align-items: flex-start; gap: clamp(6px, 1.6vw, 18px); margin: 0 auto; }
.bw-ur__del { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bw-ur__felt { position: relative; perspective: 500px; width: clamp(62px, 17vw, 132px); height: clamp(74px, 20vw, 150px);
  border-radius: 12px; background: linear-gradient(180deg, #141414 0%, #0b0b0b 50%, #070707 50%, #0d0d0d 100%);
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.45), 0 18px 40px rgba(0, 0, 0, 0.6), 0 0 34px rgba(212, 175, 55, 0.08); }
.bw-ur__felt::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, 0.9);
  box-shadow: 0 1px 0 rgba(212, 175, 55, 0.18); z-index: 2; }
.bw-ur__tal { position: absolute; inset: 0; display: grid; place-items: center; font: 600 clamp(36px, 10.5vw, 88px)/1 var(--font-sans);
  letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; backface-visibility: hidden; transform-origin: 50% 50%; }
.bw-ur__tal.er-skift { animation: bw-vip 0.55s cubic-bezier(0.3, 1.4, 0.5, 1); }
@keyframes bw-vip { 0% { transform: rotateX(-90deg); filter: brightness(1.8); } 60% { filter: brightness(1.15); } 100% { transform: rotateX(0); filter: none; } }
.bw-ur__navn { font: 500 11px/1 var(--font-sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink); }
.bw-ur__kolon { align-self: center; margin-top: -26px; font: 300 clamp(26px, 6vw, 60px)/1 var(--font-sans); color: var(--gold); opacity: 0.8; animation: bw-blink 1s steps(2, start) infinite; }
@keyframes bw-blink { to { opacity: 0.25; } }

.bw-hero__tekst { max-width: 620px; margin: 30px auto 0; font-size: 1rem; line-height: 1.6; color: var(--ink); }
.bw-hero__knapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.bw-hero__knapper .btn--solid { box-shadow: 0 0 28px rgba(212, 175, 55, 0.35); }

/* ---- Datoerne ---- */
.bw-tidslinje { padding: 56px 16px 0; }
.bw-tid { list-style: none; margin: 0 auto; padding: 0; max-width: 900px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; position: relative; }
.bw-tid li { position: relative; padding: 20px 12px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); text-align: center; background: #070707; transition: border-color 0.4s, box-shadow 0.4s; }
.bw-tid li.er-nu { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-dim), 0 0 32px rgba(212, 175, 55, 0.18); }
.bw-tid li.er-forbi { opacity: 0.55; }
.bw-tid__navn { display: block; font: 600 13px/1.2 var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.bw-tid__dato { display: block; margin-top: 8px; font: 400 17px/1.3 var(--font-display); color: var(--ink); }
.bw-tid__nu { display: none; margin-top: 10px; font: 600 10px/1 var(--font-sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); }
.bw-tid li.er-nu .bw-tid__nu { display: inline-block; padding: 5px 9px; border: 1px solid var(--gold); border-radius: 999px; }
@media (max-width: 540px) { .bw-tid { gap: 8px; } .bw-tid li { padding: 16px 6px 14px; } .bw-tid__navn { font-size: 11px; letter-spacing: 0.1em; } .bw-tid__dato { font-size: 15px; } }

/* ---- Varerne ---- */
.bw-varer { padding: 72px 16px 24px; scroll-margin-top: 90px; }
.bw-varer__inner { max-width: var(--maxw); margin: 0 auto; }
.bw-varer__top { text-align: center; margin-bottom: 28px; }
.bw-varer__titel { margin: 0; font: 400 clamp(30px, 5vw, 48px)/1.1 var(--font-display); color: var(--ink); }
.bw-varer__antal { margin: 10px 0 0; color: var(--ink); font-size: 0.95rem; }
.bw-filtre { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 18px; margin: 0 0 8px; scrollbar-width: none; justify-content: safe center; }
.bw-filtre::-webkit-scrollbar { display: none; }
.bw-filter { flex: none; min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink);
  font: 500 13px/1 var(--font-sans); cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.bw-filter:hover { border-color: var(--gold-dim); }
.bw-filter[aria-pressed="true"] { border-color: var(--gold); background: rgba(212, 175, 55, 0.12); }
.bw-filter:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.bw-grid .pcard { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.bw-grid .pcard.er-inde { opacity: 1; transform: none; }
.bw-grid .pcard__frame { box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.18); }
.bw-grid .pcard:hover .pcard__frame { box-shadow: inset 0 0 0 1px var(--gold-dim), 0 0 28px rgba(212, 175, 55, 0.12); }
.bw-flere { display: block; margin: 36px auto 0; }
.bw-note { max-width: 680px; margin: 26px auto 0; text-align: center; font-size: 0.85rem; line-height: 1.6; color: var(--ink); }

/* ---- Trygheden ---- */
.bw-tryg { padding: 64px 16px 96px; }
.bw-tryg__liste { list-style: none; margin: 0 auto; padding: 0; max-width: 1000px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.bw-tryg__liste li { padding: 22px 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #070707; color: var(--ink); font-size: 0.92rem; line-height: 1.55; }
.bw-tryg__liste svg { display: block; width: 26px; height: 26px; margin-bottom: 12px; color: var(--gold); }
.bw-tryg__liste strong { display: block; margin-bottom: 4px; font-weight: 600; }
.bw-tryg__liste a { color: inherit; text-decoration: underline; text-decoration-color: var(--gold-dim); text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .bw-hero__ord--fyld, .bw-hero__dag, .bw-ur__kolon, .bw-ur__tal.er-skift { animation: none; }
  .bw-grid .pcard { opacity: 1; transform: none; transition: none; }
}