/* Byneset Eplehage storefront. Mobile first (390 px), desktop from 900 px.
   No inline styles anywhere: the CSP has no 'unsafe-inline'. */

@font-face {
  font-family: "Fraunces";
  src: url("/static/fonts/Fraunces[SOFT,WONK,opsz,wght].woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/static/fonts/Fraunces-Italic[SOFT,WONK,opsz,wght].woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/static/fonts/InstrumentSans[wdth,wght].woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/static/fonts/InstrumentSans-Italic[wdth,wght].woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: italic;
  font-display: swap;
}

:root {
  --green: #022320;
  --cream: #F5F1E8;
  --gold: #D4A373;
  --gold-light: #E9CFAE;
  --gold-hover: #DDB287;
  --ink: #1E2420;
  --muted: #55605A;
  --error: #B3463A;
  --line: #D9D3C5;
  --line-soft: #E2DCCD;
  --sand: #E6E0D2;
  --paper: #EFE9DC;
  --paper-deep: #EDE6D6;
  --map: #EAE4D6;
  --footer: #122218;
  --night: #0F1A13;
  --legal: #A9A396;
  --muted-line: #C9C3B6;
  --paper-light: #FBF8F2;
  --paper-hover: #F2EDE2;
  --field: #FFFDF9;
  --field-line: #857F72;
  --error-hover: #8F3329;
  --vipps: #FF5B24;
  --vipps-hover: #EB4D17;
  --cream-88: rgba(245, 241, 232, .88);
  --cream-rule: rgba(245, 241, 232, .15);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: 16px;
  --edge: clamp(16px, 5vw, 64px);
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--gold); }
h1, h2, h3, h4 { margin: 0; font-weight: inherit; text-wrap: balance; }
p, figure, dl, dd { margin: 0; }
button, input { font: inherit; }
/* Green reaches 3:1 on the light backgrounds; dark sections switch to gold-light below. */
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
::selection { background: var(--gold-light); color: var(--green); }

.site-header :focus-visible, .m-menu :focus-visible, .site-footer :focus-visible,
.hero :focus-visible, .garden :focus-visible, .cta :focus-visible, .tp-band :focus-visible {
  outline-color: var(--gold-light);
  outline-offset: 3px;
}

.main { flex: 1 0 auto; display: block; }
.wrap { width: 100%; margin: 0 auto; padding: 0 var(--gutter); }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
/* The hidden attribute must win over the display set by component classes. */
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -200px; z-index: 40;
  padding: 12px 18px; border-radius: 999px;
  background: var(--gold); color: var(--green); font-weight: 600;
}
.skip-link:focus { top: 12px; color: var(--green); }

@media (max-width: 899.98px) { .only-desktop { display: none !important; } }
@media (min-width: 900px) { .only-mobile { display: none !important; } }

/* ---------- Type ---------- */

.h1 {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: 46px; line-height: 1.04; letter-spacing: -.015em; color: var(--green);
}
.h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: 36px; line-height: 1.05; letter-spacing: -.01em; color: var(--green);
}
.lead { color: var(--muted); font-size: 16px; line-height: 1.5; }
.ingress { font-size: 19px; line-height: 1.5; }
.price {
  font-size: 20px; font-weight: 600; color: var(--green);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

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

.btn-gold, .btn-ghost, .btn-outline, .btn-muted {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 999px; font-family: var(--sans); line-height: 1.2; text-align: center;
  cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.btn-gold {
  min-height: 48px; padding: 16px 30px; border: 0;
  background: var(--gold); color: var(--green); font-size: 16px; font-weight: 600;
}
.btn-gold:hover { background: var(--gold-hover); color: var(--green); }
.btn-ghost {
  min-height: 48px; padding: 15px 28px; border: 1px solid rgba(245, 241, 232, .7);
  background: transparent; color: var(--cream); font-size: 16px; font-weight: 500;
}
.btn-ghost:hover { background: rgba(245, 241, 232, .12); color: var(--cream); }
.btn-outline {
  min-height: 44px; padding: 12px 22px; border: 1.5px solid var(--green);
  background: transparent; color: var(--green); font-size: 15px; font-weight: 600;
}
.btn-outline:hover { background: var(--green); color: var(--cream); }
.btn-muted {
  min-height: 44px; padding: 12px 22px; border: 1.5px solid var(--muted-line);
  background: transparent; color: var(--muted); font-size: 15px; font-weight: 600; cursor: default;
}
.btn-block { display: flex; width: 100%; }

.m-textlink {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 15px; font-weight: 600; color: var(--green);
}
.m-textlink--underline {
  align-self: flex-start; margin-top: 4px;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}

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

.site-header { position: relative; z-index: 3; background: var(--green); color: var(--cream); }
.site-header__bar {
  height: 64px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 6px 0 16px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--cream); }
.brand:hover { color: var(--gold-light); }
.brand img { width: 44px; height: 44px; }
.brand span { font-family: var(--serif); font-weight: 500; font-size: 18px; letter-spacing: .01em; }
.nav-desktop { display: none; }
.m-actions { display: flex; align-items: center; }
.m-icon-btn {
  position: relative; width: 44px; height: 44px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--cream);
}
.m-icon-btn:hover { color: var(--gold-light); background: rgba(245, 241, 232, .08); }
.m-icon-btn--on { background: rgba(245, 241, 232, .12); }
.m-badge {
  position: absolute; top: 3px; right: 1px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--gold); color: var(--green);
  font-size: 12px; font-weight: 600; line-height: 20px; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Mobile menu: opened by the #meny fragment, closed with href="#". No JavaScript. */
.m-menu { display: none; }
.m-menu:target {
  position: fixed; inset: 0; z-index: 20; overflow-y: auto;
  display: flex; flex-direction: column; background: var(--green); color: var(--cream);
}
.m-top {
  height: 64px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 0 6px 0 16px;
}
.m-menu__top { border-bottom: 1px solid var(--cream-rule); }
.m-menu__nav { display: flex; flex-direction: column; padding: 12px 16px 0; }
.m-menu-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px;
  border-bottom: 1px solid var(--cream-rule);
  font-family: var(--serif); font-weight: 300; font-size: 30px; color: var(--cream);
}
.m-menu-link:hover { color: var(--gold-light); }
.m-menu-link span { font-family: var(--sans); font-weight: 500; font-size: 15px; color: var(--gold-light); }
.m-menu__info { padding: 28px 16px 0; }
.m-menu__text { margin-bottom: 8px; font-size: 15px; line-height: 1.6; color: var(--cream-88); }
.m-menu__foot {
  margin-top: auto; display: flex; flex-direction: column; gap: 12px;
  padding: 28px 16px calc(24px + env(safe-area-inset-bottom, 0px));
}
.m-menu__links { display: flex; flex-wrap: wrap; column-gap: 18px; }
.m-menu__links .m-foot-row { font-size: 14px; }
.m-menu .btn-gold { min-height: 52px; font-size: 17px; }

.m-foot-row {
  display: flex; align-items: center; gap: 12px; min-height: 44px;
  color: var(--line); font-size: 15px; line-height: 1.4;
}
a.m-foot-row:hover { color: var(--gold-light); }
.m-foot-row svg { flex-shrink: 0; color: var(--gold-light); }
.m-foot-row--light { color: var(--cream); }

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

.site-footer { background: var(--footer); color: var(--cream); padding: 36px 16px 24px; }
.site-footer__inner { max-width: 1240px; margin: 0 auto; }
.site-footer__grid { display: flex; flex-direction: column; }
.brand--foot { gap: 12px; }
.brand--foot img { width: 44px; height: 44px; box-shadow: none; }
.brand--foot span { font-size: 21px; }
.foot-tagline, .foot-heading { display: none; }
.foot-col { display: flex; flex-direction: column; margin-top: 20px; }
.foot-links {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px;
  margin-top: 16px; padding-top: 8px; border-top: 1px solid var(--cream-rule);
}
.foot-links a {
  display: flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--line); font-size: 15px;
}
.foot-links a:hover { color: var(--gold-light); }
.foot-links svg { flex-shrink: 0; color: var(--gold-light); }
.foot-link { color: var(--line); font-size: 15px; }
a.foot-link:hover { color: var(--gold-light); }
.foot-legal {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--cream-rule);
  color: var(--legal); font-size: 13px; line-height: 20px;
}

/* ---------- Front page: hero ---------- */

.hero {
  position: relative; height: 470px; overflow: hidden;
  display: flex; align-items: flex-end; background: var(--night); color: var(--cream);
}
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.hero__shade {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(2, 35, 32, .38) 0%, rgba(2, 35, 32, .10) 24%,
    rgba(2, 35, 32, .45) 48%, rgba(2, 35, 32, .92) 100%);
}
.hero__content {
  position: relative; width: 100%; display: flex; flex-direction: column; gap: 16px;
  padding: 0 16px 32px;
}
.hero__title {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: 60px; line-height: 1; letter-spacing: -.015em; color: var(--cream);
  text-shadow: 0 2px 28px rgba(2, 35, 32, .75), 0 1px 3px rgba(2, 35, 32, .6);
}
.hero__text {
  font-size: 17px; line-height: 1.5; color: var(--cream);
  text-shadow: 0 1px 18px rgba(2, 35, 32, .8), 0 1px 2px rgba(2, 35, 32, .7);
}
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.hero .btn-ghost { padding: 15px 22px; }
.m-hero-link {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 10px;
  color: var(--cream); font-size: 16px; font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.m-hero-link:hover { color: var(--gold-light); }

/* ---------- Front page: shop and product cards ---------- */

.shop { padding: 40px 16px; scroll-margin-top: 16px; }
.shop__inner { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.shop__head .lead { margin-top: 8px; }
.shop__grid { display: flex; flex-direction: column; gap: 32px; }

.card__media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 6px; background: var(--sand);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.card__caption { margin-top: 8px; font-size: 13px; color: var(--muted); }
.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 16px; }
.card__title { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.15; color: var(--green); }
.card__desc { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.card__form { margin-top: 16px; }
.qty {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.qty__label { font-size: 15px; font-weight: 600; }
.qty__input {
  width: 104px; height: 48px; padding: 0 12px; border: 1.5px solid var(--green); border-radius: 999px;
  background: transparent; color: var(--green); text-align: center;
  font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.card__add { margin-top: 16px; min-height: 52px; padding: 14px 24px; font-size: 17px; }
.btn-muted.card__add { font-size: 16px; }
.trust { display: flex; gap: 10px; margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.trust svg { flex-shrink: 0; color: var(--green); }
.follow {
  display: flex; flex-direction: column; margin-top: 16px; padding: 18px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper);
}
.follow__title { font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.2; color: var(--green); }
.follow__text { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--muted); }

.badge {
  position: absolute; display: inline-flex; align-items: center; border-radius: 999px;
  font-weight: 600; line-height: 1; letter-spacing: .1em; text-transform: uppercase;
}
.badge--sold-out { top: 12px; left: 12px; padding: 8px 12px; background: var(--error); color: var(--cream); font-size: 12px; }
.badge--soon { left: 8px; bottom: 8px; padding: 6px 10px; background: var(--green); color: var(--cream); font-size: 11px; }
.card--sold-out .card__media img { filter: saturate(.6); }
.card--sold-out .price { color: var(--muted); }

.card--soon {
  display: flex; gap: 16px; padding: 14px;
  border: 1px solid var(--line); border-radius: 8px;
}
.card__media--soon { flex: 0 0 112px; width: 112px; height: 112px; aspect-ratio: auto; }
.card__media--soon img { filter: saturate(.85); }
.card__body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.card--soon .card__title { font-size: 21px; }
.card--soon .card__desc { margin-top: 4px; }
.card__soon { font-size: 18px; font-weight: 600; color: var(--muted); }

/* ---------- Front page: facts, garden, mood band, gallery ---------- */

.facts-strip { padding: 8px 16px; border-top: 1px solid var(--line); }
.facts-strip__list { max-width: 1240px; margin: 0 auto; padding: 0; list-style: none; }
.fact { display: flex; gap: 14px; padding: 16px 0; }
.fact + .fact { border-top: 1px solid var(--line); }
.fact svg { flex-shrink: 0; width: 26px; height: 26px; color: var(--green); }
.fact__t { margin-bottom: 2px; font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1.25; color: var(--green); }
.fact__d { font-size: 15px; line-height: 1.5; color: var(--muted); }

.garden { background: var(--green); color: var(--cream); }
.garden__media img { width: 100%; height: 300px; object-fit: cover; object-position: center 35%; }
.garden__body { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 36px 16px 44px; }
.garden__title {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: 34px; line-height: 1.08; letter-spacing: -.01em; color: var(--cream);
}
.garden__text { font-size: 17px; line-height: 1.6; color: var(--cream-88); }
.garden .btn-ghost { margin-top: 4px; padding: 15px 24px; }

.mood {
  position: relative; height: 420px; overflow: hidden;
  display: flex; align-items: flex-end; background: var(--night); color: var(--cream);
}
.mood__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.mood__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(2, 35, 32, .55) 0%, rgba(2, 35, 32, .35) 50%, rgba(2, 35, 32, .25) 100%),
    linear-gradient(to top, rgba(2, 35, 32, .92) 0%, rgba(2, 35, 32, .55) 45%, rgba(2, 35, 32, .15) 85%);
}
.mood__content { position: relative; width: 100%; display: flex; flex-direction: column; gap: 12px; padding: 0 16px 32px; }
.mood__big {
  max-width: 14ch; font-family: var(--serif); font-weight: 300; font-style: italic; font-size: 30px; line-height: 1.1;
  text-shadow: 0 2px 20px rgba(2, 35, 32, .8);
}
.mood__small { font-size: 15px; line-height: 1.5; color: var(--cream); text-shadow: 0 1px 14px rgba(2, 35, 32, .85); }

.ig { padding: 40px 16px; }
.ig__inner { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; }
.ig__head .h2 { font-size: 30px; }
.ig__head .lead { margin-top: 8px; }
.ig__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 20px; }
.ig-tile { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--sand); }
.ig-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.ig-tile:hover img { transform: scale(1.04); }
.ig__link { align-self: stretch; justify-content: center; margin-top: 20px; min-height: 48px; }

/* Sticky order bar, mobile only. */
.m-bar {
  position: sticky; bottom: 0; z-index: 5; display: flex; flex-direction: column;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line); background: var(--cream);
  box-shadow: 0 -6px 20px rgba(18, 34, 24, .08);
}
.m-bar .btn-gold, .m-bar .btn-outline { min-height: 52px; padding: 14px 24px; font-size: 17px; }
.m-bar__note { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 15px; font-weight: 600; color: var(--muted); }
.m-bar__note svg { flex-shrink: 0; }
.m-bar__note--sold-out { color: var(--error); }

/* ---------- About the farm ---------- */

.photo { width: 100%; object-fit: cover; background: var(--sand); }
.cap { margin-top: 10px; font-size: 14px; color: var(--muted); }
.prose p { margin: 0 0 18px; font-size: 17px; line-height: 1.6; }
.prose p:last-child { margin-bottom: 0; }
.prose a {
  color: var(--green); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.prose a:hover { color: var(--gold); text-decoration-thickness: 2px; }

.og-intro { padding-top: 40px; }
.og-intro__ingress { margin-top: 20px; }
.og-intro__figure { margin-top: 32px; }
.og-photo--rows { height: 320px; object-position: center 45%; }
.og-section { padding-top: 64px; }
.og-families__text { margin-top: 16px; }
.og-photo--blossom { height: 460px; }
.og-blossom__figure .cap { padding: 0 var(--gutter); }
.og-blossom__text { margin-top: 28px; padding: 0 var(--gutter); }
.og-blossom__text .prose, .og-picking__text .prose { margin-top: 16px; }
.og-photo--picking { height: 448px; border-radius: 6px; }
.og-picking__text { margin-top: 28px; }
.og-pressing { padding-bottom: 64px; }
.og-photo--crates { height: 300px; }
.og-pressing__body { margin-top: 28px; }
.og-pressing__text { margin-top: 16px; }

.og-map { padding-bottom: 64px; scroll-margin-top: 16px; }
.og-map__lead { margin-top: 16px; font-size: 17px; line-height: 1.6; }
.og-map__figure {
  position: relative; height: 280px; margin-top: 24px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 6px; background: var(--map);
}
.og-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.og-map__caption {
  position: absolute; left: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--cream);
}
.og-map__address { font-size: 14px; font-weight: 600; color: var(--green); }
.og-map__note { font-size: 13px; color: var(--muted); }
.facts { margin-top: 24px; border-bottom: 1px solid var(--line); }
.facts div { padding: 14px 0; border-top: 1px solid var(--line); }
.facts dt { margin-bottom: 4px; font-size: 14px; font-weight: 600; color: var(--green); }
.facts dd { font-size: 17px; line-height: 1.55; }
.og-map__btn { margin-top: 24px; min-height: 48px; }

.og-contact { padding-bottom: 64px; scroll-margin-top: 16px; }
.og-contact__grid { padding-top: 56px; border-top: 1px solid var(--line); }
.og-contact__lead { margin-top: 16px; font-size: 17px; line-height: 1.6; }
.og-contact__hint { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--muted); }

.contact-list { margin: 24px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.contact-row {
  display: grid; grid-template-columns: 22px 1fr 18px; align-items: center; column-gap: 16px;
  min-height: 68px; padding: 0 4px; border-bottom: 1px solid var(--line); color: var(--green);
}
.contact-row:hover { background: var(--paper); color: var(--green); }
.cr-text { display: flex; flex-direction: column; min-width: 0; }
.cr-label { font-size: 14px; color: var(--muted); }
.cr-value { font-size: 17px; font-weight: 500; color: var(--green); overflow-wrap: anywhere; }

.cta {
  position: relative; min-height: 540px; overflow: hidden;
  display: flex; align-items: flex-end; background: var(--night); color: var(--cream);
}
.cta__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; }
.cta__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(2, 35, 32, .65) 0%, rgba(2, 35, 32, .35) 50%, rgba(2, 35, 32, .15) 100%),
    linear-gradient(to top, rgba(2, 35, 32, .92) 0%, rgba(2, 35, 32, .6) 45%, rgba(2, 35, 32, .2) 85%);
}
.cta__content { position: relative; width: 100%; display: flex; flex-direction: column; gap: 12px; padding: 0 16px 32px; }
.cta__text { display: flex; flex-direction: column; gap: 12px; }
.cta__title {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: 36px; line-height: 1.08; letter-spacing: -.01em; color: var(--cream);
  text-shadow: 0 2px 24px rgba(2, 35, 32, .8);
}
.cta__lead { font-size: 17px; line-height: 1.55; color: var(--cream); text-shadow: 0 1px 14px rgba(2, 35, 32, .85); }
.cta__btn { width: 100%; min-height: 52px; margin-top: 12px; }

/* ---------- Text pages (terms, privacy) ---------- */

.tp-band { padding: 4px 0 36px; background: var(--green); color: var(--cream); }
.back-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-right: 8px;
  color: var(--gold-light); font-size: 15px; font-weight: 500;
}
.back-link:hover { color: var(--cream); }
.tp-title {
  margin-top: 12px; font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: 46px; line-height: 1.02; letter-spacing: -.015em; color: var(--cream);
}
.tp-lead { margin-top: 16px; font-size: 17px; line-height: 1.55; color: rgba(245, 241, 232, .9); }
.tp-meta { margin-top: 16px; font-size: 14px; color: var(--line); }
.tp-grid { padding-top: 24px; padding-bottom: 56px; }
.tp-prose h2 {
  margin: 0 0 16px; font-family: var(--serif); font-weight: 500;
  font-size: 27px; line-height: 1.15; letter-spacing: -.005em; color: var(--green);
}
.tp-prose h2:not(:first-child) { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.tp-prose h3 { margin: 28px 0 6px; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--green); }
.tp-prose h2 + h3 { margin-top: 0; }
.tp-prose p { line-height: 1.65; }
.tp-prose ul, .tp-prose ol { margin: 0 0 18px; padding-left: 1.3em; font-size: 17px; line-height: 1.65; }
.tp-prose li { margin-bottom: 6px; }
.tp-prose li::marker { color: var(--gold); }
.tp-prose strong { font-weight: 600; }
.tp-prose a { text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.notice {
  margin-top: 32px; padding: 20px;
  border-left: 3px solid var(--gold); border-radius: 0 6px 6px 0; background: var(--paper-deep);
}
.notice p { font-size: 16px; line-height: 1.55; }
.tp-aside { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.tp-aside__title { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.2; color: var(--green); }
.tp-aside__text { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.tp-aside__text + .toc-contact { margin-top: 8px; }
.toc-contact {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  font-size: 16px; font-weight: 500; color: var(--green); overflow-wrap: anywhere;
}
.toc-contact svg { flex: none; }
.toc-contact:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }

/* ---------- Cart ---------- */

.cart { padding-top: 24px; padding-bottom: 40px; }
.cart__title {
  font-family: var(--serif); font-weight: 400;
  font-size: 36px; line-height: 1.1; letter-spacing: -.01em; color: var(--green);
}
.cart__sub { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.cart__layout { display: flex; flex-direction: column; }

.lines { margin: 20px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.line {
  display: grid; grid-template-columns: 88px minmax(0, 1fr) auto;
  grid-template-areas: "media info info" "qty qty total";
  gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line);
}
.line__media { grid-area: media; width: 88px; height: 88px; overflow: hidden; border-radius: 6px; background: var(--sand); }
.line__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.line__info { grid-area: info; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.line__name { font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.25; color: var(--green); }
.line__unit { margin-top: 4px; font-size: 16px; line-height: 1.5; }
.line__caption { margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.line__remove { margin-top: 2px; }
.line__qty { grid-area: qty; align-self: center; }
.line__total { grid-area: total; align-self: center; text-align: right; }
.line__sum { font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--green); }
.line__calc { margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--muted); }

/* Quantity stepper: 52 px tall. The ± buttons stay hidden until cart.js shows them. */
.stepper {
  display: inline-flex; align-items: center; padding: 1px;
  border: 1.5px solid var(--green); border-radius: 999px; background: var(--paper-light);
}
.qty-btn {
  width: 48px; height: 48px; padding: 0; border: 0; border-radius: 999px;
  display: grid; place-items: center; background: transparent; color: var(--green);
  cursor: pointer; transition: background-color .15s ease-out;
}
.qty-btn:hover { background: rgba(28, 51, 36, .08); }
.qty-btn:active { background: rgba(28, 51, 36, .15); }
.qty-btn:disabled { background: transparent; color: var(--legal); cursor: not-allowed; }
.qty-val {
  width: 52px; height: 48px; padding: 0; border: 0; border-radius: 999px; background: transparent;
  color: var(--ink); text-align: center; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.qty-val::-webkit-inner-spin-button, .qty-val::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.link-remove {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-left: -8px; padding: 0 8px;
  border: 0; background: transparent; color: var(--muted); font-size: 15px; font-weight: 500; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--muted-line); text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: color .15s ease-out;
}
.link-remove:hover { color: var(--error); text-decoration-color: currentColor; }
/* Shown only without JavaScript; cart.js submits on change instead. */
.cart__update .btn-outline { margin-top: 16px; }

.summary {
  margin-top: 24px; padding: 20px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper-light);
}
.summary__title { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.2; color: var(--green); }
.summary__list { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; font-size: 16px; line-height: 1.5; }
.sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.summary__note { margin-top: 2px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.summary__total { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.summary__total-label { font-size: 17px; font-weight: 600; color: var(--green); }
.summary__amount { font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.1; color: var(--green); }
.summary__vat { margin-top: 2px; text-align: right; font-size: 14px; line-height: 1.5; color: var(--muted); }
.summary__actions { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.summary__vipps { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.summary__vipps svg { flex-shrink: 0; color: var(--green); }
.summary__vipps p { font-size: 14px; line-height: 1.55; color: var(--muted); }
.summary__vipps strong { font-weight: 600; color: var(--ink); }
.cart__continue { margin-top: 16px; min-height: 48px; }

.how { margin-top: 40px; }
.how__title { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.2; color: var(--green); }
.how__options { min-width: 0; margin: 12px 0 0; padding: 0; border: 0; }
.how__option {
  display: flex; align-items: flex-start; gap: 14px; min-height: 44px; padding: 16px 0;
  border-bottom: 1px solid var(--line); cursor: pointer;
}
/* Shipping the store offers but this cart cannot use: text where the radio would be. */
.how__option--off { cursor: default; }
.how__option--off .how__text { padding-left: 36px; }
.how__radio { flex-shrink: 0; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--green); cursor: pointer; }
.how__text { display: flex; flex-direction: column; }
.how__name { font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--green); }
.how__desc { margin-top: 2px; font-size: 15px; line-height: 1.6; color: var(--muted); }
/* Shown only without JavaScript, like «Oppdater kurven». */
.how__save { margin-top: 16px; }

.cart-empty { padding-top: 24px; padding-bottom: 40px; }
.cart-empty__media { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 8px; background: var(--sand); }
.cart-empty__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.cart-empty__title {
  margin-top: 24px; font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: 40px; line-height: 1.05; letter-spacing: -.01em; color: var(--green);
}
.cart-empty__text { max-width: 65ch; margin-top: 12px; font-size: 17px; line-height: 1.6; }
.cart-empty__actions { display: flex; gap: 10px; margin-top: 24px; }
.cart-empty__actions .btn-outline { flex: 1; min-height: 48px; padding: 12px 14px; }
.cart-empty__help { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.cart-empty__help-title { font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--green); }
.cart-empty__help-title + p { margin-top: 4px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.cart-empty__help a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* ---------- Notices (cart and checkout) ---------- */

.stock-notice {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px; padding: 16px 20px;
  border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 8px; background: var(--paper-light);
}
.stock-notice:focus { outline: 2px solid var(--green); outline-offset: 3px; }
.stock-notice svg { flex-shrink: 0; margin-top: 1px; color: var(--green); }
.stock-notice__list { margin: 0; padding: 0; list-style: none; font-size: 16px; font-weight: 600; line-height: 1.5; }
.stock-notice__text { margin-top: 2px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.cart-empty .stock-notice { margin-bottom: 24px; }

/* ---------- Checkout ---------- */

/* Order summary that folds open under the header, mobile only. */
.co-sum { border-bottom: 1px solid var(--line); background: var(--paper-light); }
.co-sum__bar {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px;
  list-style: none; cursor: pointer; font-size: 16px; font-weight: 600; line-height: 1.4;
  transition: background-color .15s ease-out;
}
.co-sum__bar::-webkit-details-marker { display: none; }
.co-sum__bar::marker { content: ""; }
.co-sum__bar:hover { background: var(--paper-hover); }
.co-sum__bar:focus-visible { outline-offset: -2px; }
.co-sum__bar img { flex-shrink: 0; width: 36px; height: 36px; border-radius: 4px; object-fit: cover; background: var(--sand); }
.co-sum__text { flex: 1; min-width: 0; }
.co-sum__toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; color: var(--green); }
.co-sum__toggle svg { transition: transform .15s ease-out; }
.co-sum__hide, .co-sum[open] .co-sum__show { display: none; }
.co-sum[open] .co-sum__hide { display: inline; }
.co-sum[open] .co-sum__toggle svg { transform: rotate(180deg); }
.co-sum__body { padding: 16px; border-top: 1px solid var(--line); }
.co-sum__total { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-weight: 600; }
.co-sum__fee { margin-top: 16px; }
.co-sum__edit { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-size: 15px; font-weight: 600; }

.co-lines { margin: 0; padding: 0; list-style: none; }
.co-line { display: flex; align-items: center; gap: 16px; }
.co-line + .co-line { margin-top: 16px; }
.co-line img { flex-shrink: 0; width: 64px; height: 64px; border-radius: 4px; object-fit: cover; background: var(--sand); }
.co-line--small img { width: 56px; height: 56px; }
.co-line__info { flex: 1; min-width: 0; }
.co-line__name { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--green); }
.co-line__calc { margin-top: 2px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.co-line__sum { font-weight: 600; }
.co-vat { margin-top: 2px; text-align: right; font-size: 14px; line-height: 1.5; color: var(--muted); }

.co { padding-top: 16px; padding-bottom: 40px; }
.co-back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-size: 15px; font-weight: 600; color: var(--green);
}
.co-back:hover { color: var(--green); text-decoration: underline; text-underline-offset: 4px; }
.err-sum + .co-back { margin-top: 8px; }
.co-title {
  margin-top: 8px; font-family: var(--serif); font-weight: 400; font-size: 36px;
  line-height: 1.1; letter-spacing: -.01em; color: var(--green);
}
.co-ingress { max-width: 60ch; margin: 6px 0 32px; font-size: 16px; line-height: 1.6; color: var(--muted); }

.co-main { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.co-sec { min-width: 0; margin: 0; padding: 0; border: 0; scroll-margin-top: 16px; }
.co-sec:focus-visible { outline: 2px solid var(--green); outline-offset: 8px; border-radius: 4px; }
/* A floated legend lays out like a heading inside the fieldset. */
.co-sec__h {
  float: left; width: 100%; margin: 0 0 18px; padding: 0;
  font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.2; color: var(--green);
}
.co-sec__h + * { clear: both; }
.co-fields, .co-pair { display: flex; flex-direction: column; gap: 20px; }
.co-field { display: flex; flex-direction: column; min-width: 0; }
.co-lbl { margin: 0 0 8px; font-size: 15px; font-weight: 600; line-height: 1.4; }
.co-opt { font-weight: 400; color: var(--muted); }
.co-hint { margin: -4px 0 10px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.co-sec > .co-hint { margin: 0 0 12px; }

.co-inp, .co-tel {
  width: 100%; height: 52px; border: 1.5px solid var(--field-line); border-radius: 8px;
  background: var(--field); color: var(--ink); font: inherit; font-size: 16px;
  transition: border-color .15s ease-out;
}
.co-inp { padding: 0 16px; }
.co-inp:hover, .co-tel:hover { border-color: var(--muted); }
.co-inp:focus-visible, .co-tel:focus-within { outline: 2px solid var(--green); outline-offset: 3px; }
textarea.co-inp { height: auto; min-height: 112px; padding: 13px 16px; line-height: 1.5; resize: vertical; }
.co-tel { display: flex; align-items: stretch; overflow: hidden; }
.co-tel__pre {
  display: flex; align-items: center; padding: 0 12px 0 16px;
  border-right: 1px solid var(--line); background: var(--cream); color: var(--muted);
}
.co-tel input {
  flex: 1; min-width: 0; padding: 0 14px; border: 0; background: transparent;
  color: var(--ink); font-size: 16px;
}
.co-tel input:focus-visible { outline: none; }

.co-choices { display: grid; gap: 12px; }
.co-choice {
  display: flex; align-items: flex-start; gap: 14px; padding: 20px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 8px; background: var(--field);
  transition: border-color .15s ease-out;
}
.co-choice:hover { border-color: var(--field-line); }
.co-choice:focus-within { outline: 2px solid var(--green); outline-offset: 3px; }
.co-radio {
  position: relative; flex-shrink: 0; width: 24px; height: 24px; margin-top: 2px;
  border: 2px solid var(--field-line); border-radius: 50%; background: #fff;
}
.co-choice input:checked + .co-radio { border-color: var(--green); }
.co-choice input:checked + .co-radio::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--green);
}
.co-choice__text { display: flex; flex-direction: column; min-width: 0; }
.co-choice__t { font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.25; color: var(--green); }
.co-choice__l { margin-top: 6px; font-size: 15px; line-height: 1.5; }
.co-choice__m { font-size: 15px; line-height: 1.5; color: var(--muted); }
.co-choice:has(input:checked) { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); background: #fff; }
/* Delivery and its address panel share one box. */
.co-choice-group {
  border: 1.5px solid var(--line); border-radius: 8px; background: var(--field);
  transition: border-color .15s ease-out;
}
.co-choice-group:hover { border-color: var(--field-line); }
.co-choice-group > .co-choice,
.co-choice-group > .co-choice:has(input:checked) { border: 0; border-radius: 8px 8px 0 0; box-shadow: none; background: transparent; }
.co-choice-group > .co-choice:focus-within { outline-offset: -2px; }
.co-choice-group:has(input:checked) { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); background: #fff; }
/* Without :has() the address field simply stays visible. */
.co-choice-group:has(input[type="radio"]:not(:checked)) .co-reveal { display: none; }
.co-reveal { margin: 0 20px; padding: 20px 0 22px; border-top: 1px solid var(--line); }
.co-panel__h { font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.25; color: var(--green); }
.co-panel__p { margin: 4px 0 20px; font-size: 15px; line-height: 1.5; color: var(--muted); }
/* With shipping one choice of several every amount is on the page with and
   without the fee, and the checked radio decides which shows: the totals
   follow the choice without a post. Without :has() the choice the server
   rendered decides (body.co--shipping, kept in step by checkout.js), for the
   amounts and for which address panel shows. */
.co-amount-sep { display: none; }
.page--checkout:has(#fulfilment-shipping:checked) .co-if-free,
.page--checkout:not(:has(#fulfilment-shipping:checked)) .co-if-shipping { display: none; }
@supports not selector(:has(a)) {
  .co--shipping .co-if-free,
  body:not(.co--shipping) .co-if-shipping,
  .co--shipping #delivery-panel,
  body:not(.co--shipping) #shipping-panel { display: none; }
}

.co-pay-note { display: flex; align-items: flex-start; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.co-main > .co-pay-note { margin-top: -8px; }
.co-pay-note svg { flex-shrink: 0; color: var(--green); }
.co-pay-note p { font-size: 14px; line-height: 1.55; color: var(--muted); }
.co-pay-note strong { font-weight: 600; color: var(--ink); }

.co-link { color: var(--green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.co-link:hover { color: var(--green); text-decoration-thickness: 2px; }

.btn-vipps {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px;
  padding: 0 24px; border: 0; border-radius: 999px; background: var(--vipps); color: #fff;
  font-size: 20px; font-weight: 600; line-height: 1; cursor: pointer;
  transition: background-color .15s ease-out;
}
.btn-vipps:hover { background: var(--vipps-hover); }
.btn-vipps:focus-visible { outline-offset: 3px; }
.vipps-badge {
  display: inline-flex; align-items: center; height: 30px; padding: 0 10px 1px; border-radius: 8px;
  background: #fff; color: var(--vipps); font-size: 18px; font-weight: 600;
}
.co-bar__note { margin: 0 0 10px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--muted); }
/* The pay bar always shows on mobile; it is the only pay button there. Scroll
   padding keeps a field the browser scrolls to (tab, error link) clear of it. */
html:has(> body.page--checkout) { scroll-padding-bottom: calc(144px + env(safe-area-inset-bottom, 0px)); }

.co-summary { padding: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-light); }
.co-summary__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.co-summary__title { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.2; color: var(--green); }
.co-summary__edit { font-size: 15px; font-weight: 600; }
.co-summary .co-lines { margin-top: 16px; }
.co-summary__list {
  display: flex; flex-direction: column; gap: 12px; margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--line); font-size: 16px; line-height: 1.5;
}
.co-summary__total { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.co-summary__label { font-size: 18px; font-weight: 600; color: var(--green); }
.co-summary__amount { font-family: var(--serif); font-weight: 500; font-size: 36px; line-height: 1.1; color: var(--green); }
.co-summary .co-vat { margin-top: 4px; }
.co-terms { margin: 28px 0 12px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.co-summary .co-pay-note { margin-top: 24px; }

/* Errors: the summary at the top links to each field. */
.err-sum { padding: 20px; border: 2px solid var(--error); border-radius: 8px; background: var(--field); }
.err-sum:focus { outline: 2px solid var(--green); outline-offset: 3px; }
.err-sum__head { display: flex; align-items: center; gap: 10px; color: var(--error); }
.err-sum__head svg { flex-shrink: 0; }
.err-sum__title { font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.err-sum__text { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.err-sum__list { margin: 8px 0 0; padding: 0; list-style: none; }
.err-sum__list li { display: flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--error); }
.err-sum__list a {
  display: flex; align-items: center; min-height: 44px; color: var(--error);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.err-sum__list a:hover { color: var(--error-hover); text-decoration-thickness: 2px; }
.co-field.has-err, .co-sec.has-err { padding-left: 14px; border-left: 4px solid var(--error); }
.co-err { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--error); }
.co-err svg { flex-shrink: 0; margin-top: 1px; }
.co-inp.is-err, .co-tel.is-err { border: 2px solid var(--error); }

/* Links inside the checkout's Vipps error: inline in a sentence. */
.err-sum__link {
  color: var(--green); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.err-sum__link:hover { color: var(--green); text-decoration-thickness: 2px; }

/* ---------- Order page (/ordre/{token}) ---------- */

.od { padding-top: 36px; padding-bottom: 48px; }
.od-title { font-size: 40px; }
.od-lead { max-width: 44ch; margin-top: 14px; font-size: 18px; line-height: 1.5; color: var(--ink); }
.od-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 18px;
  font-size: 15px; line-height: 28px; color: var(--muted);
}
.od-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .1em; text-transform: uppercase;
}
.od-chip--ok { background: var(--green); color: var(--cream); }
.od-chip--err { border: 1.5px solid var(--error); color: var(--error); }

.od-panel { margin-top: 32px; padding: 28px 20px; border-radius: 8px; background: var(--green); color: var(--cream); }
.od-panel :focus-visible { outline-color: var(--gold-light); outline-offset: 3px; }
.od-panel__title { font-size: 24px; color: var(--cream); }
.od-steps { margin: 22px 0 0; padding: 0; list-style: none; }
.od-step {
  position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 16px;
  padding-bottom: 22px;
}
.od-step:last-child { padding-bottom: 0; }
.od-step::before {
  content: ""; position: absolute; left: 13.25px; top: 32px; bottom: 4px; width: 1.5px; border-radius: 1px;
  background: rgba(245, 241, 232, .22);
}
.od-step:last-child::before { display: none; }
.od-step--done::before { background: var(--gold); }
.od-dot {
  display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid rgba(245, 241, 232, .45); color: var(--green);
}
.od-step--done .od-dot { border-color: var(--gold); background: var(--gold); }
.od-step--now .od-dot { border-color: var(--gold-light); }
.od-dot__core { width: 10px; height: 10px; border-radius: 50%; background: var(--gold-light); }
.od-step__body { min-width: 0; }
.od-step__title { margin: 2px 0 4px; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--cream); }
.od-step__text { font-size: 15px; line-height: 1.55; color: rgba(245, 241, 232, .84); overflow-wrap: anywhere; }
.od-step__text strong { font-weight: 600; color: var(--cream); }
.od-step__btn { display: flex; width: 100%; margin-top: 16px; }
.od-dark-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px;
  font-size: 15px; font-weight: 600; color: var(--cream);
  text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1.5px; text-underline-offset: 5px;
}
.od-dark-link:hover { color: var(--gold-light); }
.od-dark-link svg { flex-shrink: 0; }

.od-side { margin-top: 32px; }
.od-side > * + * { margin-top: 40px; }
.od-side > .od-again { margin-top: 20px; }
.od-side > .od-ig { margin-top: 32px; }
.od--completed .od-side > .od-help { margin-top: 24px; }
.od--expired .od-side, .od--cancelled .od-side { margin-top: 40px; }

.od-card { padding: 24px 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-light); }
.od-card--compact { padding: 20px; }
.od-card__title { font-size: 24px; }
.od-items { margin: 18px 0 0; padding: 0; list-style: none; }
.od-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding-bottom: 16px; }
.od-item img { width: 64px; height: 64px; border-radius: 6px; object-fit: cover; background: var(--sand); }
.od-item__info { min-width: 0; }
.od-item__name { font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.od-item__qty { font-size: 15px; line-height: 1.55; color: var(--muted); }
.od-item__price { font-size: 17px; font-weight: 600; color: var(--green); }
.od-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0;
  border-top: 1px solid var(--line); font-size: 16px; line-height: 1.5;
}
.od-row--total { padding: 16px 0 0; }
.od-free { font-weight: 600; color: var(--green); }
.od-total__label { font-size: 17px; font-weight: 600; }
.od-total__value { font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--green); }
.od-vat { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.od-receipt {
  display: flex; align-items: flex-start; gap: 12px; margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--line); font-size: 15px; line-height: 1.55;
}
.od-receipt svg { flex-shrink: 0; margin-top: 2px; color: var(--green); }
.od-receipt p { min-width: 0; }
.od-receipt strong { font-weight: 600; overflow-wrap: anywhere; }
.od-card--compact .od-receipt { margin-top: 16px; padding-top: 16px; }
.od-receipt-line {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  font-size: 17px; font-weight: 600; line-height: 1.4;
}
.od-receipt-line + .od-receipt-line { margin-top: 8px; }
.od-receipt-line > :last-child { color: var(--green); }
.od-muted { color: var(--muted); }

.od-body { max-width: 60ch; font-size: 16px; line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; }
.od-card .od-body { margin-top: 10px; }
.od-card .od-body + .od-body { margin-top: 12px; }
.od-help__title { font-size: 22px; }
.od-help__title + .od-body { margin-top: 10px; }
.od-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.od-pair--one { grid-template-columns: 1fr; }
.od-pair .btn-outline { gap: 8px; padding: 12px 14px; }
.od-pair svg { flex-shrink: 0; }
.od-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.od-actions__note { margin-top: 4px; text-align: center; font-size: 15px; line-height: 1.6; color: var(--muted); }
.od-again { min-height: 52px; font-size: 17px; }

.od-ig {
  display: flex; align-items: center; gap: 14px; padding: 20px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--green);
}
.od-ig:hover { color: var(--green); }
.od-ig:hover .od-ig__title { text-decoration: underline; text-underline-offset: 3px; }
.od-ig img { flex-shrink: 0; width: 56px; height: 56px; border-radius: 6px; object-fit: cover; background: var(--sand); }
.od-ig__text { flex: 1; min-width: 0; }
.od-ig__title { display: block; font-size: 16px; font-weight: 600; line-height: 1.4; }
.od-ig__sub { display: block; font-size: 15px; line-height: 1.4; color: var(--muted); }
.od-ig svg { flex-shrink: 0; }

/* Waiting for Vipps: the pending order's page, reloaded every five seconds. */
.od-waiting {
  display: flex; flex-direction: column; justify-content: center;
  min-height: min(calc(100svh - 64px), 780px); padding-top: 32px; padding-bottom: 40px;
}
.od-waiting__status { display: flex; flex-direction: column; align-items: center; text-align: center; }
.od-waiting__title { font-size: 40px; }
.od-waiting__lead { margin-top: 16px; font-size: 17px; }
.od-wait {
  position: relative; width: 180px; height: 3px; margin-top: 36px; overflow: hidden;
  border-radius: 999px; background: var(--line);
}
.od-wait span {
  position: absolute; top: 0; bottom: 0; left: 0; width: 60px; border-radius: 999px; background: var(--green);
  animation: od-wait 1.6s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}
@keyframes od-wait { from { transform: translateX(0); } to { transform: translateX(120px); } }
.od-waiting__order { margin-top: 36px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.od-waiting__note { max-width: 52ch; margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; }
.od-slow {
  display: flex; flex-direction: column; align-items: center; margin-top: 32px; padding-top: 24px;
  border-top: 1px solid var(--line); text-align: center;
}
.od-slow__title { font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.od-slow__actions { display: flex; flex-direction: column; gap: 10px; align-self: stretch; margin-top: 14px; }
.od-slow__actions .btn-outline { min-height: 48px; }
.od-slow__call {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px;
  font-size: 15px; line-height: 1.6; color: var(--muted);
}
.od-txt-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 16px; font-weight: 600; color: var(--green);
  text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1.5px; text-underline-offset: 5px;
}
.od-txt-link:hover { color: var(--green); text-decoration-color: var(--green); }
.od-txt-link--small { font-size: 15px; }

/* ---------- Error pages ---------- */

.error-page { padding: 64px 0 96px; }
.error-page__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.error-page__code { font-size: 15px; color: var(--muted); }

/* ---------- Desktop ---------- */

@media (min-width: 900px) {
  :root { --gutter: 40px; }

  .wrap { max-width: 1280px; }
  .g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 40px; }
  .h1 { font-size: 96px; line-height: 1; }
  .h2 { font-size: 56px; }
  .ingress { font-size: 20px; }

  /* Header */
  .site-header__bar { height: 84px; padding: 0 var(--edge); gap: 16px; }
  .site-header--overlay { position: absolute; top: 0; left: 0; right: 0; background: transparent; }
  .brand { gap: 12px; }
  .brand img { width: 60px; height: 60px; }
  .brand span { font-size: 22px; }
  .nav-desktop { display: flex; align-items: center; gap: 28px; }
  .m-actions, .m-menu, .m-menu:target, .m-bar { display: none; }
  .nav-link { padding: 10px 4px; color: var(--cream); font-size: 15px; font-weight: 500; letter-spacing: .02em; }
  .nav-link:hover, .nav-link[aria-current="page"] { color: var(--gold-light); }
  .nav-cart {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px;
    border: 1px solid rgba(245, 241, 232, .45); border-radius: 999px;
  }

  /* Footer */
  .site-footer { padding: 80px var(--edge) 40px; }
  .site-footer__inner { display: flex; flex-direction: column; gap: 56px; }
  .site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; }
  .brand--foot img { width: 56px; height: 56px; }
  .brand--foot span { font-size: 24px; }
  .foot-tagline { display: block; max-width: 32ch; margin-top: 16px; font-size: 15px; line-height: 1.6; color: var(--line); }
  .foot-heading {
    display: block; margin-bottom: 12px; font-family: var(--sans); font-size: 13px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light);
  }
  .foot-col { margin-top: 0; }
  .foot-col .m-foot-row { min-height: 0; padding: 6px 0; }
  .foot-col .m-foot-row svg { display: none; }
  .foot-links { display: flex; flex-direction: column; margin-top: 0; padding-top: 0; border-top: 0; }
  .foot-links a, .foot-link { display: block; min-height: 0; padding: 6px 0; }
  .foot-legal { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 0; padding-top: 24px; }

  /* Front page: header over the hero; facts above the shop as on the desktop canvas */
  .main--front { display: flex; flex-direction: column; }
  .main--front .hero { order: 0; }
  .main--front .facts-strip { order: 1; }
  .main--front .shop { order: 2; }
  .main--front .garden { order: 3; }
  .main--front .mood { order: 4; }
  .main--front .ig { order: 5; }

  .hero { height: auto; min-height: 820px; }
  .hero__shade {
    background:
      linear-gradient(to right, rgba(2, 35, 32, .72) 0%, rgba(2, 35, 32, .45) 42%, rgba(2, 35, 32, .08) 72%, rgba(2, 35, 32, 0) 100%),
      linear-gradient(to bottom, rgba(2, 35, 32, .50) 0%, rgba(2, 35, 32, .08) 30%,
        rgba(2, 35, 32, .30) 58%, rgba(2, 35, 32, .86) 100%);
  }
  .hero__content { max-width: 1240px; margin: 0 auto; gap: 24px; padding: 0 var(--edge) 72px; }
  .hero__title { font-size: clamp(48px, 7vw, 104px); }
  .hero__text { max-width: 540px; font-size: 20px; }
  .hero__actions { gap: 14px; }
  .hero .btn-ghost { padding: 15px 28px; }

  .facts-strip { padding: 40px var(--edge); border-top: 0; border-bottom: 1px solid var(--line-soft); }
  .facts-strip__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }
  .fact { padding: 0; }
  .fact + .fact { border-top: 0; }
  .fact svg { width: 28px; height: 28px; }
  .fact__t { font-size: 22px; }

  .shop { padding: 96px var(--edge); }
  .shop__inner { gap: 48px; }
  .shop__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 48px; }
  .shop__head .h2 { font-size: clamp(36px, 4vw, 56px); }
  .shop__head .lead { max-width: 40ch; margin-top: 0; font-size: 17px; }
  .shop__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 40px; align-items: start; }
  .card__media--soon { flex: none; width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .card--soon { flex-direction: column; gap: 16px; padding: 0; border: 0; border-radius: 0; }
  .card--soon .card__title { font-size: 26px; }
  .card--soon .card__desc { margin-top: 8px; }
  .card__body { align-items: stretch; }
  .card__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
  .badge--soon { top: 16px; left: 16px; bottom: auto; padding: 8px 12px; font-size: 12px; }
  .badge--sold-out { top: 16px; left: 16px; }

  .garden { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
  .garden__media img { height: 100%; min-height: 560px; }
  .garden__body { justify-content: center; gap: 24px; padding: clamp(48px, 6vw, 96px) clamp(24px, 5vw, 80px); }
  .garden__title { max-width: 16ch; font-size: clamp(36px, 4vw, 60px); }
  .garden__text { max-width: 48ch; font-size: 18px; }

  .mood { height: auto; min-height: 520px; }
  .mood__shade {
    background:
      linear-gradient(to right, rgba(2, 35, 32, .6) 0%, rgba(2, 35, 32, .35) 55%, rgba(2, 35, 32, .25) 100%),
      linear-gradient(to top, rgba(2, 35, 32, .85) 0%, rgba(2, 35, 32, .45) 45%, rgba(2, 35, 32, .1) 85%);
  }
  .mood__content {
    max-width: 1240px; margin: 0 auto; flex-direction: row; flex-wrap: wrap;
    align-items: flex-end; justify-content: space-between; gap: 24px; padding: 0 var(--edge) 64px;
  }
  .mood__big { max-width: 20ch; font-size: clamp(30px, 3.4vw, 48px); }
  .mood__small { max-width: 36ch; font-size: 16px; }

  .ig { padding: 96px var(--edge); }
  .ig__inner { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 36px 24px; }
  .ig__head .h2 { font-size: clamp(32px, 3.6vw, 48px); }
  .ig__link { grid-column: 2; grid-row: 1; align-self: end; margin-top: 0; padding: 10px 0; border-color: transparent; font-size: 16px; }
  .ig__link:hover { background: transparent; color: var(--gold); }
  .ig__grid { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 0; }

  /* About the farm */
  .photo { border-radius: 6px; }
  .og-intro .photo { border-radius: 0; }
  .cap { margin-top: 12px; }
  .prose p { max-width: 62ch; margin-bottom: 22px; font-size: 18px; line-height: 1.65; }
  .og-intro { padding-top: 112px; }
  .og-intro__head { align-items: end; }
  .og-intro__title { grid-column: 1 / span 7; }
  .og-intro__ingress { grid-column: 9 / span 4; margin-top: 0; }
  .og-intro__figure { margin-top: 72px; }
  .og-photo--rows { height: 640px; }
  .og-section { padding-top: 128px; }
  .og-families__title { grid-column: 1 / span 4; }
  .og-families__text { grid-column: 6 / span 6; margin-top: 0; }
  .og-blossom__grid {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 40px; align-items: center;
    max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter);
  }
  .og-blossom__figure { grid-column: 1 / span 7; }
  .og-blossom__figure .cap { padding: 0; }
  .og-blossom__text { grid-column: 9 / span 4; margin-top: 0; padding: 0; }
  .og-photo--blossom { height: 760px; }
  .og-picking__grid { align-items: end; }
  .og-picking__figure { grid-column: 7 / span 6; grid-row: 1; }
  .og-picking__text { grid-column: 1 / span 5; grid-row: 1; margin-top: 0; padding-bottom: 72px; }
  .og-photo--picking { height: 720px; }
  .og-pressing { padding-bottom: 128px; }
  .og-pressing__figure { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }
  .og-pressing__figure .cap { padding: 0; }
  .og-photo--crates { height: 600px; }
  .og-pressing__body { margin-top: 64px; }
  .og-pressing__title { grid-column: 1 / span 4; }
  .og-pressing__text { grid-column: 6 / span 6; margin-top: 0; }

  .og-map { padding-bottom: 96px; }
  .og-map__grid { grid-template-rows: auto 1fr; }
  .og-map__figure { grid-column: 1 / span 6; grid-row: 1 / span 2; height: auto; min-height: 600px; margin-top: 0; }
  .og-map__head { grid-column: 8 / span 5; grid-row: 1; }
  .og-map__info { grid-column: 8 / span 5; grid-row: 2; }
  .og-map__lead { margin-top: 20px; font-size: 18px; }
  .og-map__caption { left: 20px; bottom: 20px; padding: 12px 16px; }
  .facts { margin-top: 32px; }
  .facts div { display: grid; grid-template-columns: 112px 1fr; gap: 24px; padding: 16px 0; }
  .facts dt { margin: 0; font-size: 15px; }
  .og-map__btn { display: inline-flex; width: auto; margin-top: 32px; }

  .og-contact { padding-bottom: 128px; }
  .og-contact__grid { padding-top: 96px; }
  .og-contact__text { grid-column: 1 / span 5; }
  .og-contact .contact-list { grid-column: 7 / span 6; margin-top: 0; }
  .og-contact__lead { max-width: 44ch; font-size: 18px; }
  .contact-row { grid-template-columns: 24px 1fr 20px; column-gap: 20px; min-height: 84px; padding: 0 12px; }
  .cr-value { font-size: 19px; }

  .cta { min-height: 640px; }
  .cta__shade {
    background: linear-gradient(to top, rgba(10, 20, 14, .84) 0%, rgba(10, 20, 14, .4) 45%, rgba(10, 20, 14, 0) 78%);
  }
  .cta__content {
    max-width: 1280px; margin: 0 auto; flex-direction: row; align-items: flex-end; justify-content: space-between;
    gap: 40px; padding: 0 var(--gutter) 88px;
  }
  .cta__title { font-size: 64px; }
  .cta__lead { max-width: 48ch; font-size: 20px; }
  .cta__btn {
    width: auto; margin-top: 0; padding: 16px 30px; border-color: transparent;
    background: var(--gold); color: var(--green); font-weight: 600;
  }
  .cta__btn:hover { background: var(--gold-hover); color: var(--green); }

  /* Text pages */
  .tp-band { padding: 40px 0 72px; }
  .tp-band__inner, .tp-grid { max-width: 1200px; }
  .tp-band__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
  .back-link {
    gap: 8px; font-size: 16px; text-decoration: underline;
    text-decoration-color: rgba(232, 207, 138, .45); text-underline-offset: 4px;
  }
  .tp-title { margin-top: 0; font-size: 76px; line-height: 1; }
  .tp-lead { max-width: 56ch; margin-top: 0; font-size: 20px; }
  .tp-meta { margin-top: 0; font-size: 15px; }
  .tp-grid { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 96px; padding-top: 64px; padding-bottom: 120px; }
  .tp-prose { grid-column: 2; grid-row: 1; max-width: 680px; }
  .tp-prose h2 { margin-bottom: 20px; font-size: 32px; }
  .tp-prose h3 { font-size: 18px; }
  .tp-prose p, .tp-prose ul, .tp-prose ol { max-width: 65ch; font-size: 18px; }
  .tp-aside { grid-column: 1; grid-row: 1; align-self: start; position: sticky; top: 32px; margin-top: 0; }
  .tp-aside__title { font-size: 20px; }

  /* Cart */
  .cart { padding-top: 56px; padding-bottom: 120px; }
  .cart__head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 40px; }
  .cart__title { font-size: 52px; line-height: 1.05; }
  .cart__sub { margin-top: 0; font-size: 16px; line-height: 1.6; }
  .cart__layout {
    display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: auto 1fr;
    grid-template-areas: "lines summary" "how summary"; column-gap: 64px; align-items: start;
  }
  .cart__lines { grid-area: lines; }
  .line-grid { display: grid; grid-template-columns: 120px minmax(0, 1fr) 140px 110px; column-gap: 24px; }
  .line-grid--head {
    padding-bottom: 12px; border-bottom: 1px solid var(--line);
    color: var(--muted); font-size: 14px; font-weight: 500; line-height: 1.5;
  }
  .line-grid__item { grid-column: 1 / 3; }
  .line-grid__sum { text-align: right; }
  .lines { margin-top: 0; border-top: 0; }
  .line { grid-template-areas: "media info qty total"; row-gap: 0; padding: 28px 0; align-items: start; }
  .line__media { width: 120px; height: 120px; }
  .line__name { font-size: 24px; line-height: 1.2; }
  .line__unit { margin-top: 6px; }
  .line__caption { margin-top: 2px; line-height: 1.5; }
  .line__remove { margin-top: 10px; }
  .line__qty, .line__total { align-self: start; }
  .line__calc { margin-top: 4px; font-size: 14px; line-height: 1.5; }
  .summary { grid-area: summary; position: sticky; top: 32px; margin-top: 0; padding: 32px; }
  .summary__title { font-size: 26px; }
  .summary__list { margin-top: 24px; }
  .summary__note { margin-top: 4px; }
  .summary__total { margin-top: 24px; padding-top: 24px; }
  .summary__total-label { font-size: 18px; }
  .summary__amount { font-size: 36px; }
  .summary__vat { margin-top: 4px; }
  .summary__vipps { gap: 12px; margin-top: 24px; padding-top: 20px; }
  .how { grid-area: how; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
  .how__title { font-size: 26px; }
  .how__options { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 20px; }
  .how__option { padding: 0; border-bottom: 0; }
  .how__name { font-size: 17px; }
  .how__desc { margin-top: 4px; }
  .how__save { grid-column: 1 / -1; justify-self: start; margin-top: 0; }
  .cart-empty { max-width: 720px; padding-top: 72px; padding-bottom: 120px; }
  .cart-empty__title { margin-top: 40px; font-size: 56px; }
  .cart-empty__text { font-size: 18px; }
  .cart-empty__actions .btn-outline { flex: 0 1 auto; padding: 12px 22px; }

  .stock-notice { margin-bottom: 32px; }
  .co { padding-top: 40px; padding-bottom: 120px; }
  .co-head { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 48px; }
  .co-title { margin-top: 0; font-size: 52px; line-height: 1.05; }
  .co-ingress { margin: 0; font-size: 17px; }
  .co-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 64px; align-items: start; }
  .co-main { gap: 56px; max-width: 680px; }
  .co-sec__h { font-size: 26px; }
  .co-fields { gap: 24px; }
  /* Side by side, with labels, hints, errors and inputs on shared rows. */
  .co-pair { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 0; }
  .co-pair > .co-field { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
  .co-pair > .co-field > .co-lbl { grid-row: 1; }
  .co-pair > .co-field > .co-hint { grid-row: 2; }
  .co-pair > .co-field > .co-err { grid-row: 3; }
  .co-pair > .co-field > .co-inp, .co-pair > .co-field > .co-tel { grid-row: 4; align-self: end; }
  .co-summary { position: sticky; top: 32px; }
  html:has(> body.page--checkout) { scroll-padding-bottom: 0; }

  .error-page { padding: 112px 0 128px; }

  .od {
    display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 80px; align-items: start;
    padding-top: 72px; padding-bottom: 104px;
  }
  .od-title { font-size: 88px; line-height: 1.02; }
  .od-lead { margin-top: 20px; font-size: 20px; }
  .od-meta { margin-top: 24px; }
  .od-panel { margin-top: 48px; padding: 40px 44px; }
  .od-panel__title { font-size: 30px; }
  .od-steps { margin-top: 28px; }
  .od-step__btn { display: inline-flex; width: auto; }
  .od-step__btn + .od-dark-link { margin-left: 24px; }
  .od-side, .od--expired .od-side, .od--cancelled .od-side { margin-top: 0; }
  .od-card { padding: 32px; }
  .od-card--compact { padding: 24px; }
  .od-card__title { font-size: 26px; }
  .od-items { margin-top: 20px; }
  .od-help__title { font-size: 24px; }
  .od-pair { margin-top: 18px; }
  .od-actions { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 12px; margin-top: 40px; }
  .od-actions .btn-block { display: inline-flex; width: auto; }
  .od-actions__note { flex-basis: 100%; margin-top: 0; text-align: left; }
  .od-waiting { max-width: 720px; min-height: 0; padding-top: 112px; padding-bottom: 128px; }
  .od-waiting__title { font-size: 56px; line-height: 1.08; }
  .od-waiting__lead { max-width: 42ch; margin-top: 20px; }
  .od-wait { margin-top: 40px; }
  .od-slow__actions { flex-direction: row; justify-content: center; }
  .od-slow__actions .btn-block { display: inline-flex; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .od-wait span { animation: none; transform: translateX(60px); }
}