/* Sangiovese.dk — "Varm premium". Design tokens and components extracted
   from design/*.html (desktop, 1440px) and design/Mobil-*.html (mobile,
   390px). Mobile-first: base rules match the mobile mockups, the single
   breakpoint at 900px lifts layout to the desktop mockups. */

/* Self-hosted variable fonts (latin subset only — covers æ/ø/å, U+0000-00FF).
   Two files total, well inside the "højst 4 filer i WOFF2" budget from
   docs/teknisk-brief.md; each covers the full 400-600 weight range used
   across the design, so no separate per-weight files are needed. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/fraunces-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/instrument-sans-variable.woff2') format('woff2');
}

:root {
  --bg: #f5f5f5;
  --surface: #FFFDF9;
  --text: #2A1E1C;
  --text-muted: #5E4E48;
  --text-faint: #6B5B55;
  --border: #E6DCCD;
  --border-soft: #EFE6D8;
  --border-dashed: #D2C4B0;
  --accent: #65252F;
  --accent-hover: #4A1320;
  --accent-soft: #F2E6E3;
  --brass: #A8834A;
  --ink: #2A1E1C;
  --ink-text: #F3EBDD;
  --ink-text-muted: #D9CCBF;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Instrument Sans', 'Helvetica Neue', Helvetica, sans-serif;

  --page-pad: clamp(20px, 6vw, 120px);
  --radius-lg: 12px;
  --radius-md: 8px;
  --radius-sm: 4px;
  --radius-pill: 999px;
  --radius-btn: 8px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.02 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { display: block; padding-bottom: 56px; }
@media (min-width: 900px) {
  main { padding-bottom: 96px; }
}

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

img { max-width: 100%; display: block; }

table { border-collapse: collapse; }

button, select, input { font: inherit; color: inherit; }

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--brass); outline-offset: 2px;
}

/* Layout ------------------------------------------------------------- */

.section {
  padding: 56px var(--page-pad) 0;
}
.section:first-of-type { padding-top: 32px; }

/* Header --------------------------------------------------------------- */

.site-header {
  height: 64px;
  box-sizing: border-box;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.site-header__logo { display: block; }
.site-header__logo svg { height: 34px; width: auto; display: block; }
.site-header__icons { display: flex; gap: 4px; }
.site-header__icon-btn {
  width: 44px; height: 44px; border: 0; background: transparent;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.site-nav {
  display: none;
  gap: clamp(14px, 2.2vw - 6px, 36px);
  align-items: center;
  font-size: 16px;
  white-space: nowrap;
  font-weight: 500;
}
.site-nav a { color: var(--text); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--accent); }
/* Dropdown (Dessertvin -> portvin, sherry, ...; Mousserende -> champagne, cava, ...). CSS only: opens on hover
   and when keyboard focus is inside, so every link stays reachable by Tab.
   The top padding is an invisible bridge so the menu doesn't close while
   the pointer moves down from the parent link. */
.site-nav__item { position: relative; }
.site-nav__sub {
  display: none;
  position: absolute; top: 100%; left: -16px; z-index: 20;
  margin: 0; padding: 12px 0 0; list-style: none;
  min-width: 200px;
}
.site-nav__sub::before {
  content: ""; position: absolute; inset: 12px 0 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(42, 30, 28, .10); z-index: -1;
}
.site-nav__sub li:first-child { padding-top: 8px; }
.site-nav__sub li:last-child { padding-bottom: 8px; }
.site-nav__sub a { display: block; padding: 8px 16px; font-weight: 400; }
.site-nav__sub a:hover { color: var(--accent); background: var(--accent-soft); }
.site-nav__item:hover .site-nav__sub,
.site-nav__item:focus-within .site-nav__sub { display: block; }

@media (min-width: 900px) {
  .site-header { height: 88px; padding: 0 var(--page-pad); }
  .site-header__logo svg { height: 50px; }
}

/* Eight links since the wine types replaced "Find vin" - they only fit on
   one line from ~1100px, so below that the header keeps the icon buttons. */
@media (min-width: 1100px) {
  .site-header__icons { display: none; }
  .site-nav { display: flex; }
}

/* Forside (desktop): header floats transparent over the hero video. The
   dropdown keeps its light surface, so its links stay dark. */
@media (min-width: 900px) {
  .site-header--overlay {
    position: absolute; top: 0; left: 0; right: 0; z-index: 10;
    background: transparent; border-bottom: 0;
  }
  .site-header--overlay .site-header__logo .cls-1 { fill: #fff; }
  .site-header--overlay .site-header__icon-btn,
  .site-header--overlay .site-nav > a,
  .site-header--overlay .site-nav__item > a { color: #fff; }
  .site-header--overlay .site-nav > a:hover,
  .site-header--overlay .site-nav__item > a:hover { color: rgba(255, 255, 255, .8); }
}

/* Breadcrumbs ------------------------------------------------------------ */

.breadcrumbs {
  padding: 14px 20px 0;
  font-size: 13px;
  color: var(--text-faint);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.breadcrumbs a { text-decoration: none; }
@media (min-width: 900px) {
  .breadcrumbs { padding: 32px var(--page-pad) 0; font-size: 14px; gap: 8px; }
}

/* Buttons ----------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px; border-radius: var(--radius-btn);
  font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.btn-outline { background: transparent; border: 1.5px solid var(--accent); color: var(--accent); }
.btn-lg { height: 56px; padding: 0 20px; font-size: 16px; }
.btn-block { width: 100%; }

/* Badges / pills ------------------------------------------------------ */

.badge {
  display: inline-flex; align-items: center;
  padding: 5px 11px; border-radius: var(--radius-btn);
  font-size: 12px; font-weight: 600; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
}
.badge-accent { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.badge-soft { background: var(--accent-soft); color: var(--accent); border: none; }

.grape-pill {
  display: inline-flex; align-items: center;
  padding: 5px 11px; border-radius: var(--radius-btn);
  font-size: 12px; font-weight: 600; text-decoration: none;
  background: var(--accent-soft); color: var(--accent);
}
@media (min-width: 900px) { .grape-pill { font-size: 16px; } }
.grape-pill[aria-current="page"] { background: var(--accent); color: var(--surface); }
.subcategory-nav { display: flex; flex-wrap: wrap; gap: 8px; }

/* Trust band ------------------------------------------------------------- */

.trust-band {
  margin: 40px 16px 0;
  padding: 18px 20px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
  font-size: 14px; color: var(--text-muted);
}
.trust-band strong { color: var(--text); }
.trust-band__facts { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 900px) {
  .trust-band {
    margin: 0 var(--page-pad); padding: 22px 32px;
    flex-direction: row; justify-content: space-between; align-items: center;
    font-size: 15px;
  }
  .trust-band__facts { flex-direction: row; gap: 40px; }
}

/* Section headings ------------------------------------------------------- */

.section-heading {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; margin: 0 4px 14px;
}
.section-heading h2 {
  margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: 26px; letter-spacing: -0.015em;
}
.section-heading a { font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.section-intro { margin: -6px 4px 16px; font-size: 15px; color: var(--text-muted); }
@media (min-width: 900px) {
  .section-heading { margin: 0 0 36px; }
  .section-heading h2 { font-size: 44px; }
  .section-heading a { font-size: 16px; }
  .section-intro { margin: -20px 0 24px; font-size: 16px; }
}

/* Card grids --------------------------------------------------------------- */

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.grid-3 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) {
  .grid-2 { gap: 24px; }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
/* Producer overview: 5 cards per row on desktop. */
.producer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .producer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 1200px) { .producer-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.producer-grid .occasion-card { min-height: 0; }
@media (min-width: 900px) {
  .producer-grid .occasion-card { padding: 24px 22px; gap: 10px; }
  .producer-grid .occasion-card__title { font-size: 22px; }
  .producer-grid .occasion-card__desc { font-size: 14px; }
}

/* Wine grid: follows its container's width (so the category sidebar just
   means fewer columns), capped at 5 columns. */
.wine-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
@media (min-width: 900px) {
  .wine-grid {
    grid-template-columns: repeat(auto-fill, minmax(max(200px, calc((100% - 4 * 24px) / 5)), 1fr));
    gap: 40px 24px;
  }
}

/* Wine card (catalog / home / similar-wines grids) ------------------------ */

.wine-card { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--text-muted); }
.wine-card__image {
  aspect-ratio: 1; margin-bottom: 10px; border-radius: var(--radius-lg); background: var(--border-soft);
  display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
}
.wine-card__image svg { height: 70%; width: auto; }
.wine-card__image img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.wine-card__badge { position: absolute; top: 10px; left: 10px; }
.wine-card__badge-secondary { position: absolute; top: 10px; right: 10px; }
.wine-card__name { font-family: var(--font-display); font-size: 14px; font-weight: 500; line-height: 1.25; margin: 0; }
.wine-card__price { font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.2; margin: 2px 0 4px; }
.wine-card__attr { font-size: 10px; line-height: 1.4; color: var(--text-faint); }

@media (min-width: 900px) {
  .wine-card__name { font-size: 14px; }
  .wine-card__price { font-size: 18px; }
  .wine-card__attr { font-size: 10px; }
}

/* Row card (mobile home list, "Lignende vine" horizontal scroll) ---------- */

.row-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 12px; display: flex; gap: 14px; text-decoration: none; color: var(--text);
}
.row-card__image {
  width: 76px; height: 104px; flex-shrink: 0; border-radius: var(--radius-sm);
  background: var(--border-soft); display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.row-card__image img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.row-card__body { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.row-card__producer { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-faint); }
.row-card__name { font-family: var(--font-display); font-size: 17px; line-height: 1.25; }
.row-card__meta { font-size: 13px; color: var(--text-muted); }
.row-card__footer { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.row-card__badge { align-self: flex-start; }
.row-card__price { font-family: var(--font-display); font-size: 19px; font-weight: 500; }
.row-card__attrs {
  min-width: 0; font-size: 12px; color: var(--text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.meta-icon { width: 12px; height: 12px; flex-shrink: 0; vertical-align: -1px; margin-right: 4px; }

/* Empty state -------------------------------------------------------------- */

.empty-state {
  background: var(--surface); border: 1px dashed var(--border-dashed); border-radius: var(--radius-md);
  padding: 32px 24px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.empty-state h3 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 22px; }
.empty-state p { margin: 0; font-size: 15px; color: var(--text-muted); }

/* Hero (forside) ----------------------------------------------------------- */

.hero { padding: 32px 20px 0; display: flex; flex-direction: column; gap: 14px; }
.hero__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.hero h1 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 36px; line-height: 1.05; letter-spacing: -0.02em; }
.hero p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-muted); max-width: 60ch; }

@media (min-width: 900px) {
  .hero {
    padding: 30px var(--page-pad) 80px; flex-direction: row; gap: 80px; align-items: center;
  }
  .hero__intro { flex-grow: 1; display: flex; flex-direction: column; gap: 28px; max-width: 520px; }
  .hero h1 { font-size: 64px; }
  .hero p { font-size: 14px; }
}

/* Desktop: full-bleed vineyard video behind the transparent header (see
   .site-header--overlay), white text on a darkening gradient. Mobile keeps
   the plain text hero and never loads the video. */
.hero__video { display: none; }
@media (min-width: 900px) {
  .hero {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: min(76vh, 720px); box-sizing: border-box;
    padding: 150px var(--page-pad) 80px; align-items: center;
    background: #2A1E1C url(/images/hero-vinmark.webp) center / cover;
  }
  .hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
      linear-gradient(to bottom, rgba(20, 14, 12, .55), rgba(20, 14, 12, 0) 180px),
      linear-gradient(to right, rgba(20, 14, 12, .55), rgba(20, 14, 12, .15) 70%);
  }
  .hero__video {
    display: block; position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%; object-fit: cover;
  }
  .hero__intro { max-width: 860px; gap: 32px; }
  .hero__eyebrow { display: none; }
  .hero h1 { font-size: clamp(64px, 6.4vw, 104px); font-weight: 600; line-height: 1.1; letter-spacing: 0; color: #fff; max-width: 9em; }
  .hero p { font-size: 22px; line-height: 1.4; color: #fff; max-width: 34em; }
  .hero .disclosure { font-size: 14px; color: rgba(255, 255, 255, .75); max-width: 40em; margin-top: 16px; }
  .hero .disclosure svg { display: none; }
  .hero .disclosure a { color: inherit; }
}

.disclosure {
  display: flex; gap: 10px; align-items: flex-start; font-size: 11px; color: var(--text-muted);
  padding: 0 20px; margin-top: 4px;
}
.disclosure svg { flex-shrink: 0; margin-top: 2px; }
@media (min-width: 900px) { .disclosure { padding: 0; } }

/* Quick picker (hurtigvælger) ----------------------------------------------- */

.quick-picker {
  margin: 20px 16px 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 20px; display: flex; flex-direction: column; gap: 22px;
  box-shadow: 0 2px 6px rgba(42, 30, 28, .08);
}
.quick-picker__group { display: flex; flex-direction: column; gap: 10px; }
.quick-picker__label { font-size: 15px; font-weight: 600; }

/* Budget-slider chips/track/presets: not wired up yet (fase 5 JS), so left
   out until a template needs them — see the filters comment above. */

@media (min-width: 900px) {
  .quick-picker { width: 600px; flex-shrink: 0; margin: 0; padding: 36px; gap: 28px; }
}

/* Forside: slider as a sidebar left of the good-deals grid (desktop). */
.deals-layout .quick-picker { margin: 0 0 24px; }
@media (min-width: 900px) {
  .deals-layout { display: flex; gap: 48px; align-items: flex-start; }
  .deals-layout .quick-picker { width: 300px; margin: 0; padding: 28px; gap: 24px; position: sticky; top: 24px; }
  .deals-layout__main { flex: 1; min-width: 0; }
  .deals-layout .wine-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Forside: image left of "Populære druer" (desktop). */
.grapes-layout__image { display: none; }
@media (min-width: 900px) {
  .grapes-layout { display: flex; gap: 64px; align-items: center; }
  .grapes-layout__image {
    display: block; width: 45%; max-width: 560px; flex-shrink: 0;
    aspect-ratio: 856 / 639; height: auto; object-fit: cover; border-radius: var(--radius-lg);
  }
  .grapes-layout__content { flex: 1; min-width: 0; }
}

/* Occasion / guide cards ---------------------------------------------------- */

.occasion-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 18px 16px; text-decoration: none; color: var(--text);
  display: flex; flex-direction: column; gap: 6px; min-height: 104px; box-sizing: border-box;
}
.occasion-card__title { font-family: var(--font-display); font-size: 19px; }
.occasion-card__desc { font-size: 13px; color: var(--text-muted); line-height: 1.4; }
@media (min-width: 900px) {
  .occasion-card { padding: 32px 28px; gap: 16px; min-height: 230px; }
  .occasion-card__title { font-size: 26px; }
  .occasion-card__desc { font-size: 15px; }
}

/* Anledningsside: lead paragraph, tip box, "Se også" links. */
.occasion-intro .occasion-intro__lead { color: var(--text); }
.occasion-tip {
  margin: 24px 20px 0; padding: 18px 20px; border-radius: var(--radius-md);
  background: var(--accent-soft); border-left: 3px solid var(--accent);
}
.occasion-tip h2 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 500; font-size: 20px; }
.occasion-tip ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.5; }
.occasion-more { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 15px; color: var(--text-muted); }
@media (min-width: 900px) {
  .occasion-tip { margin: 40px var(--page-pad) 0; padding: 28px 32px; max-width: 70ch; }
  .occasion-tip h2 { font-size: 24px; }
  .occasion-tip ul { font-size: 16px; }
}

.guide-card { display: flex; gap: 14px; align-items: center; text-decoration: none; color: var(--text); }
.guide-card__thumb { width: 88px; height: 72px; flex-shrink: 0; border-radius: var(--radius-sm); }
.guide-card__title { font-family: var(--font-display); font-size: 18px; line-height: 1.3; }
@media (min-width: 900px) {
  .guide-card { flex-direction: column; align-items: stretch; gap: 14px; }
  .guide-card__thumb { width: auto; height: 220px; border-radius: var(--radius-md); }
  .guide-card__title { font-size: 24px; }
}

/* Editorial pick card -------------------------------------------------------- */

.pick-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; }
.pick-card__image { height: 220px; background: var(--border-soft); display: flex; align-items: center; justify-content: center; position: relative; }
.pick-card__body { padding: 20px 20px 24px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.pick-card__producer { font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-faint); }
.pick-card__name { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 22px; }
.pick-card__meta { font-size: 14px; color: var(--text-muted); }
.pick-card__note { margin: 4px 0 0; font-size: 14px; line-height: 1.55; }
.pick-card__footer { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border-soft); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pick-card__price { font-family: var(--font-display); font-size: 24px; font-weight: 500; }
.pick-card__shop { font-size: 13px; color: var(--text-faint); }

/* Producer spotlight ---------------------------------------------------------- */

.producer-spotlight {
  margin: 40px 16px 0; border-radius: var(--radius-lg); background: var(--ink); color: var(--ink-text);
  padding: 32px; display: flex; flex-direction: column; gap: 18px;
}
.producer-spotlight__eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass); }
.producer-spotlight h1, .producer-spotlight h2 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 28px; line-height: 1.15; }
.producer-spotlight p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-text-muted); max-width: 620px; }
.producer-spotlight__body { display: flex; flex-direction: column; gap: 14px; }
.producer-spotlight a { color: var(--ink-text); font-weight: 600; }
@media (min-width: 900px) {
  .producer-spotlight { margin: 96px var(--page-pad) 0; flex-direction: row; gap: 64px; align-items: center; padding: 64px; }
}

/* Footer ----------------------------------------------------------------------- */

.site-footer {
  margin-top: auto; background: var(--surface); border-top: 1px solid var(--border);
  padding: 28px 20px; display: flex; flex-direction: column; gap: 12px;
  font-size: 14px; color: var(--text-muted);
}
.site-footer__logo svg { height: 24px; width: auto; }
.site-footer__nav { display: flex; gap: 16px; flex-wrap: wrap; }
.site-footer__nav-col { display: contents; }
@media (min-width: 900px) {
  .site-footer {
    padding: 56px var(--page-pad); flex-direction: row; justify-content: space-between; gap: 48px;
  }
  .site-footer__about { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
  .site-footer__nav { display: flex; gap: 64px; font-size: 15px; }
  .site-footer__nav-col { display: flex; flex-direction: column; gap: 10px; }
}

/* Kategoriside: filters, results meta, sort ------------------------------------- */

.category-intro { padding: 20px 20px 0; display: flex; flex-direction: column; gap: 12px; }
.category-intro h1 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 34px; letter-spacing: -0.02em; }
.category-intro p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-muted); max-width: 70ch; }
@media (min-width: 900px) {
  .category-intro { padding: 40px var(--page-pad) 0; gap: 20px; }
  .category-intro h1 { font-size: 56px; }
  .category-intro p { font-size: 19px; }
}

.category-layout { padding: 16px 0 0; display: flex; flex-direction: column; }
@media (min-width: 900px) {
  .category-layout { padding: 40px var(--page-pad) 0; flex-direction: row; gap: 48px; align-items: flex-start; }
}
.category-main { display: flex; flex-direction: column; gap: 16px; flex-grow: 1; min-width: 0; padding: 0 16px 40px; }
@media (min-width: 900px) { .category-main { gap: 24px; padding: 0; } }
/* Standalone .category-main (producer pages, no sidebar layout) aligns
   with the header/logo and breadcrumbs. */
.producer-main { padding: 24px 16px 40px; }
@media (min-width: 900px) { .producer-main { padding: 40px var(--page-pad) 64px; } }

/* Filter sidebar (fase 5, assets/js/filters.js) ---------------------------- */

.filter-sidebar { display: flex; flex-direction: column; gap: 16px; padding: 0 16px; order: -1; }
@media (min-width: 900px) { .filter-sidebar { width: 300px; flex-shrink: 0; padding: 0; order: 0; } }

.filter-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 20px; display: flex; flex-direction: column; gap: 14px;
}
.filter-panel__label { font-size: 15px; font-weight: 600; }
.filter-panel__range-label { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--accent); }
.filter-panel__bounds { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-faint); }
.filter-panel__counter { font-size: 14px; color: var(--text-muted); }
.filter-panel__counter strong { color: var(--text); }

.range-slider { position: relative; height: 44px; }
.range-slider__track { position: absolute; left: 11px; right: 11px; top: 20px; height: 4px; border-radius: 2px; background: var(--border); }
.range-slider__fill { position: absolute; top: 20px; height: 4px; border-radius: 2px; background: var(--accent); }
.range-slider input[type="range"] {
  -webkit-appearance: none; appearance: none; position: absolute; inset: 0;
  width: 100%; height: 44px; margin: 0; background: none; pointer-events: none;
}
.range-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,.3);
  cursor: pointer; margin-top: 11px;
}
.range-slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,.3); cursor: pointer;
}
.range-slider input[type="range"]::-webkit-slider-runnable-track { background: transparent; }
.range-slider input[type="range"]::-moz-range-track { background: transparent; }
.range-slider input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--brass); outline-offset: 2px; }

.filter-fieldset { margin: 0; border: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.filter-fieldset legend { font-size: 15px; font-weight: 600; padding: 0; margin-bottom: 2px; }
.filter-checkbox { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.filter-checkbox input { width: 18px; height: 18px; accent-color: var(--accent); }

.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip input { position: absolute; opacity: 0; pointer-events: none; }
.filter-chip span {
  display: inline-flex; height: 36px; padding: 0 14px; align-items: center; border-radius: var(--radius-btn);
  border: 1.5px solid var(--border); font-size: 13px; cursor: pointer; user-select: none;
}
.filter-chip input:checked + span { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.filter-chip input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: 2px; }

.filter-reset {
  align-self: flex-start; background: none; border: none; color: var(--accent);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; padding: 0;
}

.results-meta {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: 14px; color: var(--text-muted); flex-wrap: wrap;
}

/* Vertical row-card list (forside mobile good-deals, produkt similar-wines
   fallback). Not used together with a .grid-* class - see .category-main
   for the grid case, which needs plain block/grid display instead. */
.results { flex-grow: 1; display: flex; flex-direction: column; gap: 20px; padding: 12px 16px 40px; }
.results--flush { padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0; }
@media (min-width: 900px) { .results { padding: 0; gap: 24px; } }

/* Produktside ------------------------------------------------------------------- */

.product-gallery {
  margin: 14px 16px 0; height: 320px; border-radius: var(--radius-lg);
  background: var(--border-soft); display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.product-gallery svg { height: 78%; width: auto; }
.product-gallery img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
@media (min-width: 900px) {
  .product-hero { padding: 32px var(--page-pad) 0; display: flex; gap: 72px; align-items: flex-start; }
  .product-gallery { margin: 0; width: 460px; height: 560px; flex-shrink: 0; }
}

.product-info { padding: 20px 20px 0; display: flex; flex-direction: column; gap: 18px; }
.product-info__badges { display: flex; gap: 8px; flex-wrap: wrap; }
.product-info__brand { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); text-decoration: none; display: block; }
.product-info h1 { margin: 6px 0 0; font-family: var(--font-display); font-weight: 500; font-size: 34px; line-height: 1.05; letter-spacing: -0.02em; }
.product-info__meta { font-size: 15px; color: var(--text-muted); margin-top: 4px; }
@media (min-width: 900px) {
  .product-info { flex-grow: 1; padding: 0; padding-top: 12px; gap: 22px; }
  .product-info h1 { font-size: 52px; }
  .product-info__meta { font-size: 17px; }
}

.offer-box {
  margin: 18px 16px 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 20px; display: flex; flex-direction: column; gap: 14px;
}
.offer-box__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.offer-box__price { font-family: var(--font-display); font-size: 36px; font-weight: 500; line-height: 1; }
.offer-box__list-price { font-size: 12px; color: var(--text-faint); }
.offer-box__delivery { text-align: right; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.offer-box__foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-faint); }
@media (min-width: 900px) {
  .offer-box { margin: 0; padding: 28px; gap: 18px; }
  .offer-box__price { font-size: 48px; }
}

.savings-callout {
  margin: 12px 16px 0; padding: 14px 16px; border-radius: var(--radius-md); background: var(--accent-soft);
  font-size: 14px; line-height: 1.5; display: flex; gap: 12px; align-items: flex-start;
}
.savings-callout svg { flex-shrink: 0; margin-top: 2px; }
@media (min-width: 900px) { .savings-callout { margin: 0; padding: 18px 22px; } }

.secondary-actions { margin: 12px 16px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .secondary-actions { margin: 0; display: flex; gap: 12px; } }

.offer-table-wrap {
  margin: 18px 16px 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden;
}
.offer-table-wrap__head { padding: 16px 20px; display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--border-soft); gap: 12px; }
.offer-table-wrap__head h2 { margin: 0; font-size: 16px; font-weight: 600; }
.offer-table-wrap__foot { padding: 14px 20px; border-top: 1px solid var(--border-soft); font-size: 13px; color: var(--text-faint); }

.offer-rows { display: flex; flex-direction: column; }
.offer-row {
  padding: 16px 20px; border-top: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: 8px;
}
.offer-row:first-child { border-top: 0; }
.offer-row__shop { font-weight: 600; }
.offer-row__price { font-family: var(--font-display); font-size: 22px; }
.offer-row__facts { font-size: 13px; color: var(--text-muted); display: flex; gap: 12px; flex-wrap: wrap; }

.offer-table { display: none; width: 100%; font-size: 15px; }
@media (min-width: 900px) {
  .offer-rows { display: none; }
  .offer-table { display: table; }
  .offer-table th { padding: 12px; font-weight: 600; font-size: 13px; color: var(--text-faint); text-align: left; background: var(--bg); }
  .offer-table th:first-child, .offer-table td:first-child { padding-left: 24px; }
  .offer-table th:last-child, .offer-table td:last-child { padding-right: 24px; }
  .offer-table td { padding: 18px 12px; border-top: 1px solid var(--border-soft); }
  .offer-table__price { font-family: var(--font-display); font-size: 24px; }
}

.review-layout { padding: 36px 20px 0; display: flex; flex-direction: column; gap: 32px; }
.review-body { display: flex; flex-direction: column; gap: 12px; }
.review-body h1 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 32px; letter-spacing: -0.02em; }
.review-body h2 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 26px; }
.review-body p { margin: 0; font-size: 16px; line-height: 1.65; }
.review-byline { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-faint); margin-top: 4px; }
.review-byline__avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
@media (min-width: 900px) {
  .review-layout { padding: 80px var(--page-pad) 0; flex-direction: row; gap: 72px; }
  .review-body { flex-grow: 1; gap: 20px; }
  .review-body h1 { font-size: 48px; }
  .review-body h2 { font-size: 36px; }
  .review-body p { font-size: 18px; }
}


/* Om os: text and portrait left, vineyard image right (desktop). */
.about { padding: 36px 20px 0; }
.about__title { margin: 0 0 20px; font-family: var(--font-display); font-weight: 500; font-size: 32px; letter-spacing: -0.02em; }
.about__layout { display: flex; flex-direction: column; gap: 32px; }
.about__text { display: flex; flex-direction: column; gap: 16px; }
.about__text p { margin: 0; font-size: 16px; line-height: 1.65; }
.about__portrait { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; margin-top: 16px; }
.about__image { width: 100%; height: auto; aspect-ratio: 856 / 639; object-fit: cover; border-radius: var(--radius-lg); }
@media (min-width: 900px) {
  .about { padding: 56px var(--page-pad) 0; }
  .about__title { font-size: 48px; margin-bottom: 48px; }
  .about__layout { flex-direction: row; gap: 72px; align-items: flex-start; }
  .about__text { flex: 1; min-width: 0; gap: 22px; }
  .about__text p { font-size: 18px; }
  .about__portrait { width: 230px; height: 230px; margin-top: 40px; }
  .about__image { width: 48%; max-width: 860px; flex-shrink: 0; }
}

.taste-panel {
  margin: 28px 16px 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 20px; display: flex; flex-direction: column; gap: 14px;
}
.taste-panel h2 { margin: 0; font-size: 16px; font-weight: 600; }
.taste-row { display: flex; flex-direction: column; gap: 6px; }
.taste-row__labels { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-muted); }
.taste-row__track { height: 8px; border-radius: 4px; background: var(--border-soft); position: relative; }
.taste-row__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--accent); }
.taste-panel__note { font-size: 13px; color: var(--text-faint); line-height: 1.5; }
@media (min-width: 900px) { .taste-panel { margin: 0; width: 460px; flex-shrink: 0; padding: 28px; } }

.pairing-grid { margin: 12px 16px 0; display: flex; flex-direction: column; gap: 12px; }
.pairing-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.pairing-card h2 { margin: 0; font-size: 15px; font-weight: 600; }
.pairing-card ul { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.7; }
@media (min-width: 900px) {
  .pairing-grid { margin: 0; padding: 56px var(--page-pad) 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .pairing-card h2 { font-size: 17px; }
}

.fact-panel {
  margin: 12px 16px 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px;
}
.fact-panel h2 { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.fact-table { width: 100%; font-size: 14px; }
.fact-table th { text-align: left; padding: 9px 0; font-weight: 500; color: var(--text-faint); }
.fact-table td { padding: 9px 0; text-align: right; }
.fact-table tr { border-bottom: 1px solid var(--border-soft); }
.fact-table tr:last-child { border-bottom: 0; }
@media (min-width: 900px) {
  .fact-panel { margin: 0; flex-grow: 1; padding: 28px; }
  .fact-table td { text-align: left; }
}

.price-history-panel {
  margin: 12px 16px 0; border: 1px dashed var(--border-dashed); border-radius: var(--radius-md); padding: 24px;
  display: flex; flex-direction: column; gap: 10px; justify-content: center;
}
.price-history-panel h2 { margin: 0; font-size: 15px; font-weight: 600; }
.price-history-panel p { margin: 0; font-size: 14px; color: var(--text-muted); }
@media (min-width: 900px) { .price-history-panel { margin: 0; width: 460px; flex-shrink: 0; } }

.similar-wines { padding: 36px 0 0; display: flex; flex-direction: column; gap: 12px; }
.similar-wines__heading { margin: 0 20px; font-family: var(--font-display); font-weight: 500; font-size: 24px; }
.similar-wines__intro { margin: 0 20px; font-size: 14px; color: var(--text-muted); }
.similar-scroll { display: flex; gap: 10px; overflow-x: auto; padding: 0 16px 4px; }
.similar-scroll .row-card { width: 150px; flex-shrink: 0; flex-direction: column; padding: 0; overflow: hidden; }
.similar-scroll .row-card__image { width: auto; height: 120px; border-radius: 0; }
.similar-scroll .row-card__body { padding: 10px; }
@media (min-width: 900px) {
  .similar-wines { padding: 80px var(--page-pad) 0; }
  .similar-wines__heading { margin: 0; font-size: 36px; }
  .similar-wines__intro { margin: 0; font-size: 16px; }
  .similar-scroll { overflow: visible; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .similar-scroll .row-card { width: auto; flex-direction: row; padding: 20px; align-items: center; }
  .similar-scroll .row-card__image { width: 80px; height: 120px; border-radius: var(--radius-sm); }
}

.faq { padding: 36px 20px 40px; display: flex; flex-direction: column; gap: 4px; max-width: 900px; }
.faq h2 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 500; font-size: 24px; }
.faq-item { border-top: 1px solid var(--border); padding: 16px 0; display: flex; flex-direction: column; gap: 6px; }
.faq-item h3 { margin: 0; font-size: 16px; font-weight: 600; }
.faq-item p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-muted); }
@media (min-width: 900px) { .faq { padding: 80px var(--page-pad) 0; } }

.grape-panel {
  margin: 12px 16px 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 20px; display: flex; flex-direction: column; gap: 16px;
}
.grape-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; }
.grape-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; font-size: 14px; }
@media (min-width: 900px) { .grape-panel { margin: 0; width: 460px; flex-shrink: 0; padding: 28px; } }

/* Responsive show/hide toggles ---------------------------------------------
   Kept last and written as compound selectors (class combined with itself)
   so these always win the cascade against whatever layout classes
   (.results, .wine-grid, ...) a toggled element also carries, regardless of
   where those are defined above. */
.good-deals-desktop.good-deals-desktop { display: none; }
@media (min-width: 900px) {
  .good-deals-mobile.good-deals-mobile { display: none; }
  .good-deals-desktop.good-deals-desktop { display: grid; }
}

/* Hover lift: klikbare kort og knapper løfter sig let ved hover/fokus -------- */

.wine-card, .row-card, .occasion-card, .guide-card, .pick-card,
.btn, .site-header__icon-btn {
  transition: transform 0.2s ease;
}
.wine-card:hover, .row-card:hover, .occasion-card:hover,
.guide-card:hover, .pick-card:hover, .btn:hover,
.site-header__icon-btn:hover,
.wine-card:focus-visible, .row-card:focus-visible,
.occasion-card:focus-visible, .guide-card:focus-visible,
.pick-card:focus-visible, .btn:focus-visible,
.site-header__icon-btn:focus-visible {
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
  .wine-card, .row-card, .occasion-card, .guide-card, .pick-card,
  .btn, .site-header__icon-btn { transition: none; }
}