/* Grundlag */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

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

h1,
h2,
h3 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-2xl);
  letter-spacing: -0.02em;
}
h2 {
  margin-bottom: var(--space-3);
  font-size: var(--fs-xl);
  letter-spacing: -0.01em;
}
h3 { font-size: var(--fs-lg); }

p,
ul,
ol,
dl {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--accent);
  text-underline-offset: 0.15em;
}

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

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

a,
button,
select,
summary,
label {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

html {
  scroll-padding-top: var(--header-offset);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.lead {
  font-size: var(--fs-md);
}

.muted {
  color: var(--text-muted);
}

.eyebrow {
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 20;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--bg-accent);
  color: var(--text-on-accent);
}

.skip-link:focus {
  top: var(--space-4);
  color: var(--text-on-accent);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-page);
  border-bottom: var(--border-width) solid var(--border);
}

.header-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-5);
  padding-block: var(--space-2);
}

.logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-size);
  font-family: var(--font-logo);
  font-size: var(--fs-logo);
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
  text-decoration: none;
}

.logo:hover {
  color: var(--accent-hover);
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-size);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
}

.menu-btn {
  display: none;
}

@media (max-width: 47.99em) {
  .has-menu .header-inner {
    flex-wrap: nowrap;
  }

  .has-menu .menu-btn {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-size);
    padding: 0 var(--space-5);
    border: 2px solid var(--accent);
    border-radius: var(--radius-pill);
    background: var(--bg-surface);
    color: var(--accent);
    font: inherit;
    font-weight: var(--fw-bold);
    cursor: pointer;
  }

  .has-menu.menu-open .menu-btn {
    background: var(--accent);
    color: var(--text-on-accent);
  }

  .has-menu .nav-list {
    display: none;
  }

  .has-menu.menu-open .nav-list {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    padding: var(--space-2) var(--gutter) var(--space-4);
    border-bottom: var(--border-width) solid var(--border);
    background: var(--bg-page);
    box-shadow: var(--shadow);
  }

  .has-menu .nav-list li + li {
    border-top: var(--border-width) solid var(--border);
  }

  .has-menu .nav-list a {
    display: flex;
    min-height: 3.25rem;
    font-size: var(--fs-md);
  }
}

.nav-list a:hover,
.nav-list a[aria-current="page"],
.nav-list a[aria-current="true"] {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

@media (min-width: 48em) {
  .nav-list {
    gap: 0 var(--space-5);
  }

  .nav-list a {
    font-size: var(--fs-base);
  }
}

/* Sektioner */
.section {
  padding-block: var(--space-7);
}

@media (min-width: 48em) {
  .section {
    padding-block: var(--space-9);
  }
}

.section--surface { background: var(--bg-surface); }
.section--tint { background: var(--bg-tint); }

.section--accent {
  background: var(--bg-accent);
  color: var(--text-on-accent);
}

.section--accent a:not(.btn) {
  color: var(--text-on-accent);
}

.section--accent :focus-visible {
  outline-color: var(--focus-on-accent);
}

.section-intro {
  max-width: var(--measure);
  margin-bottom: var(--space-5);
}

.section-intro > :last-child {
  margin-bottom: 0;
}

/* Knapper */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-size);
  padding: var(--space-3) var(--space-5);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

@media (max-width: 29.99em) {
  .btn-row .btn {
    flex: 1 1 100%;
  }
}

.btn--primary {
  background: var(--accent);
  color: var(--text-on-accent);
}

.btn--primary:hover {
  background: var(--accent-hover);
  color: var(--text-on-accent);
}

.btn--secondary {
  border-color: currentColor;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: var(--fw-bold);
  cursor: pointer;
}

.btn--secondary:hover {
  background: var(--bg-surface);
}

.section--accent .btn--primary {
  background: var(--btn-on-accent-bg);
  color: var(--btn-on-accent-text);
}

.section--accent .btn--primary:hover {
  background: var(--btn-on-accent-hover-bg);
}

.section--accent .btn--secondary {
  color: var(--text-on-accent);
}

/* Pladsholdere */
.placeholder {
  padding: var(--space-5);
  border: var(--placeholder-border) var(--accent);
  border-radius: var(--radius);
  background: var(--placeholder-bg);
  color: var(--text);
  font-style: italic;
}

.placeholder > :last-child {
  margin-bottom: 0;
}

.ph-inline {
  font-style: italic;
}

.ph-image {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: var(--space-5);
  border: var(--placeholder-border) currentColor;
  border-radius: var(--radius);
  background: var(--placeholder-bg);
  font-size: var(--fs-sm);
  font-style: italic;
  text-align: center;
}

.section--accent .ph-image {
  background: var(--placeholder-on-accent-bg);
}

.ph-image--portrait {
  aspect-ratio: 4 / 5;
}

/* Kort og grids */
.grid {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40em) {
  .grid--2,
  .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.card {
  padding: var(--space-5);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  box-shadow: var(--shadow);
}

.card > :last-child {
  margin-bottom: 0;
}

.card h3 {
  margin-bottom: var(--space-2);
}

.tag {
  display: inline-block;
  padding: 0.125rem var(--space-3);
  border: 2px solid var(--accent);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1.5;
}

.tag--rod {
  background: var(--accent);
  color: var(--text-on-accent);
}

.tag--hvid {
  border-color: var(--hvid-accent);
  background: var(--hvid-bg);
  color: var(--hvid-text);
}

/* Hero */
.hero {
  padding-block: var(--space-6) var(--space-7);
}

.hero-grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.hero h1 {
  margin-bottom: var(--space-4);
}

.hero .lead {
  max-width: var(--measure);
}

.hero .btn-row {
  margin-top: var(--space-5);
}

@media (min-width: 48em) {
  .hero {
    padding-block: var(--space-8);
  }

  .hero-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-7);
  }
}

@media (min-width: 64em) {
  .hero {
    padding-block: var(--space-9);
  }
}

/* To kolonner */
.split {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 48em) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
  }

  .split--media-first > .ph-image {
    order: -1;
  }
}

/* Produktet */
.facts {
  margin: 0 0 var(--space-6);
  border-top: var(--border-width) solid var(--border);
}

.facts > div {
  display: grid;
  grid-template-columns: minmax(7rem, 35%) 1fr;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: var(--border-width) solid var(--border);
}

.facts dt {
  color: var(--text-muted);
}

.facts dd {
  margin: 0;
  font-weight: var(--fw-medium);
}

.variant-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.swatch {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 3px solid var(--accent);
  border-radius: 50%;
}

.swatch--rod { background: var(--accent); }
.swatch--hvid {
  border-color: var(--hvid-accent);
  background: var(--hvid-bg);
}

.variant-head h3 {
  margin: 0;
}

.sizes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.sizes li {
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-page);
  font-weight: var(--fw-bold);
}

/* Linkkort */
.link-cards {
  margin-bottom: var(--space-5);
}

.link-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  height: 100%;
  padding: var(--space-5);
  border: var(--border-width) solid var(--border-on-accent);
  border-radius: var(--radius);
  background: var(--card-on-accent-bg);
  text-decoration: none;
}

.link-card strong {
  font-size: var(--fs-md);
}

.link-card span {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.link-card:hover strong {
  text-decoration: underline;
}

/* Kontakt */
.contact-mail {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}

/* Footer */
.site-footer {
  padding-block: var(--space-7);
  background: var(--bg-accent-dark);
  color: var(--text-on-accent);
}

.site-footer a {
  color: var(--text-on-accent);
}

.site-footer :focus-visible {
  outline-color: var(--focus-on-accent);
}

.footer-inner {
  display: grid;
  gap: var(--space-5);
}

.site-footer .logo {
  justify-self: start;
  font-size: var(--fs-logo-footer);
  color: var(--text-on-accent);
}

.footer-nav ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-size);
}

.footer-note {
  margin: 0;
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--border-on-accent);
  font-size: var(--fs-sm);
}

@media (min-width: 48em) {
  .footer-inner {
    grid-template-columns: auto 1fr;
    align-items: center;
  }

  .footer-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-5);
  }

  .footer-note {
    grid-column: 1 / -1;
  }
}

/* Filter */
.filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-5);
}

.filter-label {
  font-weight: var(--fw-bold);
}

.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.filter-btn {
  min-height: var(--tap-size);
  padding: var(--space-2) var(--space-5);
  border: 2px solid var(--accent);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--accent);
  font: inherit;
  font-weight: var(--fw-bold);
  cursor: pointer;
}

.filter-btn:hover {
  background: var(--bg-page);
}

.filter-btn[aria-pressed="true"] {
  background: var(--accent);
  color: var(--text-on-accent);
}

.filter-status {
  flex-basis: 100%;
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* Kort med opskrift og teknik */
.techniques {
  align-items: start;
}

.technique {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.technique > * {
  margin: 0;
}

.technique-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.technique-head h3 {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.technique-head .tags {
  flex: none;
}

.tags {
  display: flex;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.technique-facts {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--bg-page);
  font-size: var(--fs-sm);
}

.technique-facts > div {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--space-2);
}

.technique-facts dt {
  color: var(--text-muted);
}

.technique-facts dd {
  font-weight: var(--fw-medium);
}

.technique-facts dd {
  margin: 0;
}

.technique details {
  border-top: var(--border-width) solid var(--border);
}

.technique summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--tap-size);
  color: var(--accent);
  font-weight: var(--fw-bold);
  cursor: pointer;
  list-style: none;
}

.technique summary::-webkit-details-marker {
  display: none;
}

.technique summary::after {
  content: "+";
  content: "+" / "";
  font-size: var(--fs-lg);
  line-height: 1;
}

.technique details[open] summary::after {
  content: "−";
  content: "−" / "";
}

.technique details ol {
  margin: 0;
  padding-left: 1.25rem;
}

.technique details li + li {
  margin-top: var(--space-2);
}

.technique:target {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Vinene */
.wines {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 48em) {
  .wines {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.wine {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  align-content: start;
  align-items: start;
  gap: var(--space-2) var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius);
}

.wine > * {
  grid-column: 2;
  margin: 0;
}

.wine .carton {
  grid-row: 1 / span 4;
  grid-column: 1;
  width: 100%;
}

@media (min-width: 64em) {
  .wine {
    grid-template-columns: 7rem minmax(0, 1fr);
  }
}

.wine-size {
  font-weight: var(--fw-bold);
}

.wine .btn {
  justify-self: start;
  margin-top: var(--space-2);
}

.wine--rod {
  background: var(--rod-bg);
  color: var(--rod-text);
}

.wine--rod .btn {
  background: var(--rod-btn-bg);
  color: var(--rod-btn-text);
}

.wine--rod .btn:hover {
  background: var(--btn-on-accent-hover-bg);
  color: var(--rod-btn-text);
}

.wine--rod :focus-visible {
  outline-color: var(--focus-on-accent);
}

.wine--hvid {
  background: var(--hvid-bg);
  color: var(--hvid-text);
}

.wine--hvid .btn {
  background: var(--hvid-btn-bg);
  color: var(--hvid-btn-text);
}

.wine--hvid .btn:hover {
  background: var(--hvid-btn-hover-bg);
  color: var(--hvid-btn-text);
}

.wine--hvid :focus-visible {
  outline-color: var(--hvid-accent);
}

/* Opskrifter */
.recipe .ph-image {
  aspect-ratio: 3 / 2;
}

.recipe[data-wine="hvid"] .ph-image {
  color: var(--hvid-text);
}

.recipe details h4 {
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--fs-base);
}

.recipe details ul {
  margin: 0 0 var(--space-3);
  padding-left: 1.25rem;
}

/* Tekstside */
.prose {
  max-width: var(--measure);
}

.prose h2 {
  margin-top: var(--space-7);
  font-size: var(--fs-lg);
}

.prose h2:first-child {
  margin-top: 0;
}

/* Linkknap */
.link-button {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-size);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

/* Cookiebanner */
.cookie-banner {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  max-height: 80vh;
  overflow-y: auto;
  padding: var(--space-5) 0;
  border-top: 3px solid var(--banner-border);
  background: var(--banner-bg);
  box-shadow: var(--banner-shadow);
}

.cookie-banner h2 {
  margin-bottom: var(--space-2);
  font-size: var(--fs-lg);
}

.cookie-banner p {
  max-width: var(--measure);
}

.cookie-choices {
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
}

.cookie-choices label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--tap-size);
  padding-block: var(--space-2);
}

.cookie-choices input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2rem;
  accent-color: var(--accent);
}

.cookie-banner .btn-row .btn {
  flex: 1 1 10rem;
  border-color: var(--accent);
  background: var(--accent);
  color: var(--text-on-accent);
}

.cookie-banner .btn-row .btn:hover {
  background: var(--accent-hover);
}

/* Footer: kontakt */
.footer-contact p {
  margin: 0;
}

.footer-contact a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-size);
  font-weight: var(--fw-bold);
}

@media (min-width: 48em) {
  .footer-contact {
    grid-column: 1 / -1;
  }
}

/* Vinsider */
.wine-hero--rod {
  background: var(--rod-bg);
  color: var(--rod-text);
}

.wine-hero--rod .btn--primary {
  background: var(--rod-btn-bg);
  color: var(--rod-btn-text);
}

.wine-hero--rod .btn--primary:hover {
  background: var(--btn-on-accent-hover-bg);
  color: var(--rod-btn-text);
}

.wine-hero--rod :focus-visible {
  outline-color: var(--focus-on-accent);
}

.wine-hero--hvid {
  background: var(--hvid-bg);
  color: var(--hvid-text);
}

.wine-hero--hvid .btn--primary {
  background: var(--hvid-btn-bg);
  color: var(--hvid-btn-text);
}

.wine-hero--hvid .btn--primary:hover {
  background: var(--hvid-btn-hover-bg);
  color: var(--hvid-btn-text);
}

.wine-hero--hvid :focus-visible {
  outline-color: var(--hvid-accent);
}

.carton {
  justify-self: start;
  width: min(40%, 10rem);
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-carton);
}

@media (min-width: 48em) {
  .carton {
    justify-self: center;
    width: min(70%, 14rem);
  }
}

/* Spørgsmål og svar */
.faq details {
  border-bottom: var(--border-width) solid var(--border);
}

.faq h2 + details {
  border-top: var(--border-width) solid var(--border);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--tap-size);
  padding-block: var(--space-3);
  font-weight: var(--fw-bold);
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  content: "+" / "";
  flex: none;
  color: var(--accent);
  font-size: var(--fs-lg);
  line-height: 1;
}

.faq details[open] summary::after {
  content: "−";
  content: "−" / "";
}

.faq details > p {
  margin-bottom: var(--space-4);
}

/* Kartoner i toppen */
.hero-cartons {
  display: flex;
  justify-content: flex-start;
  gap: var(--space-4);
}

.hero-cartons .carton {
  width: 6.5rem;
}

@media (min-width: 48em) {
  .hero-cartons {
    justify-content: center;
    gap: var(--space-5);
  }

  .hero-cartons .carton {
    width: min(42%, 11rem);
  }
}

.cookie-status {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* Tabel */
.table-wrap {
  margin-bottom: var(--space-4);
  overflow-x: auto;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.prose th,
.prose td {
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-width) solid var(--border);
  text-align: left;
  vertical-align: top;
}

.prose th {
  font-weight: var(--fw-bold);
}

@media (max-width: 29.99em) {
  .table-stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .table-stack tr {
    display: block;
    padding-block: var(--space-2);
    border-bottom: var(--border-width) solid var(--border);
  }

  .table-stack td {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-1) 0;
    border: 0;
  }

  .table-stack td::before {
    content: attr(data-label);
    color: var(--text-muted);
  }
}

/* Fejlside */
.link-list a {
  display: flex;
  align-items: center;
  min-height: var(--tap-size);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}

/* Filter: menuer */
.filter--menus {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2);
}

.filter-menu {
  display: grid;
  flex: 1 1 0;
  min-width: 0;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.filter-menu select,
.servings select {
  min-height: var(--tap-size);
  padding: 0 var(--space-3);
  border: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-base);
  font-weight: 400;
}

.filter-menu select {
  width: 100%;
  padding: 0 var(--space-1) 0 var(--space-2);
}

@media (min-width: 48em) {
  .filter-menu {
    flex: 0 1 13rem;
  }

  .filter--menus {
    gap: var(--space-3);
  }

  .filter-menu select {
    padding: 0 var(--space-3);
  }
}

.filter-empty {
  flex-basis: 100%;
  margin: 0;
}

/* Opskrifter: værktøjer */
.labels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.labels li + li::before {
  content: "·";
  content: "·" / "";
  margin-right: var(--space-2);
}

.recipe-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-2) 0 var(--space-3);
}

.servings {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--fw-bold);
}

.print-btn {
  display: none;
}

@media (min-width: 48em) {
  .print-btn {
    display: inline-flex;
  }
}

.ingredients .qty {
  font-weight: var(--fw-bold);
}

/* Udskrift */
@media print {
  .skip-link,
  .site-header,
  .site-footer,
  .cookie-banner,
  .filter,
  .recipe-tools,
  .btn,
  .btn-row,
  summary {
    display: none !important;
  }

  body {
    background: none;
    color: #000;
    font-size: 11pt;
  }

  .section,
  .hero {
    padding: 0;
    background: none !important;
    color: #000 !important;
  }

  .card {
    border: 0;
    box-shadow: none;
    break-inside: avoid-page;
  }

  .grid {
    display: block;
  }

  details > * {
    display: block;
  }

  a {
    color: #000;
  }

  .breadcrumbs,
  .recipe-more {
    display: none !important;
  }

  .recipe-cols {
    display: block;
  }
}

/* Opskrift: side */
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
}

.breadcrumbs li + li::before {
  content: "›";
  content: "›" / "";
  margin-right: var(--space-2);
}

.breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-size);
  color: inherit;
}

.recipe-hero + .section {
  padding-top: var(--space-6);
}

.recipe-hero .labels {
  margin-bottom: var(--space-5);
  color: inherit;
}

.recipe-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  max-width: 40rem;
  margin: 0;
  padding-top: var(--space-4);
  border-top: var(--border-width) solid currentColor;
}

@media (min-width: 40em) {
  .recipe-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.recipe-facts dt {
  font-size: var(--fs-sm);
}

.recipe-facts dd {
  margin: 0;
  font-weight: var(--fw-bold);
}

.recipe-cols {
  display: grid;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}

@media (min-width: 48em) {
  .recipe-cols {
    grid-template-columns: minmax(16rem, 1fr) 2fr;
    gap: var(--space-8);
  }
}

.recipe-cols h2,
.recipe-notes h2 {
  font-size: var(--fs-lg);
}

.ingredients {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ingredients li {
  padding-block: var(--space-2);
  border-bottom: var(--border-width) solid var(--border);
}

.steps {
  margin: 0;
  padding-left: 1.5rem;
}

.steps li {
  padding-left: var(--space-2);
}

.steps li + li {
  margin-top: var(--space-4);
}

.recipe-notes > section {
  padding-top: var(--space-4);
  border-top: 3px solid var(--accent);
}

.recipe-notes p:last-child {
  margin-bottom: 0;
}

/* Opskrifter: oversigt */
.recipe-card {
  position: relative;
  height: 100%;
}

.recipe-card h3 a {
  color: inherit;
  text-decoration: none;
}

.recipe-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.recipe-card:hover h3 a {
  color: var(--accent);
  text-decoration: underline;
}

.card-link {
  margin-top: auto;
  font-weight: var(--fw-bold);
}