/* One stylesheet for both tenants. Everything that differs between them is a custom
   property set by the server in a nonce-signed <style> block, so this file is static,
   cacheable, and identical for every tenant. Class and token names follow
   packages/storefront-ui so a registry component drops in without re-theming. */
/* Self-hosted web fonts. Both families are variable fonts, so one file per family and
   subset carries every weight the tenants ask for; the `font-weight` range pins the wght
   axis. Splitting latin from latin-ext by `unicode-range` means a Danish page downloads
   only the latin file. Licences sit next to the files: public/fonts/*-OFL.txt.

   Nothing is fetched from a third party: no Google Fonts stylesheet, and no request to
   their file host. That is what lets every tenant's Content-Security-Policy stay
   `style-src 'self' 'nonce-…'` and `font-src 'self'`. A test asserts neither host
   appears in this file, in any manifest, or in any policy. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/assets/fonts/playfair-display-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/assets/fonts/playfair-display-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


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

:root {
  --lp-space-1: 4px; --lp-space-2: 8px; --lp-space-3: 12px; --lp-space-4: 16px;
  --lp-space-5: 24px; --lp-space-6: 32px; --lp-space-7: 40px; --lp-space-8: 56px;
  --lp-page-max: 1280px;
  --lp-color-focus: #005fcc;
  --lp-color-danger: #b00020;
  --lp-color-success: #1d7a3d;
  --lp-shadow-card: 0 1px 2px rgb(0 0 0 / 0.06);
}

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

body.lp-body {
  margin: 0;
  background: var(--lp-color-bg);
  color: var(--lp-color-text);
  font-family: var(--lp-font-body);
  font-size: 16px;
  line-height: 1.55;
}

img { max-width: 100%; }

a { color: inherit; text-decoration: none; }
/* Inline links only. `a:hover` is (0,1,1) and `.lp-button--primary` is (0,1,0), so an
   unscoped rule here wins the `color` property on every anchor styled as a button and
   repaints the label in the button's own background colour — the "Download gavekort"
   button on the thank-you page turned invisible under the pointer, for every partner.
   Buttons carry their own paired foreground; this rule must never reach one. */
a:not(.lp-button):hover { color: var(--lp-color-primary); }

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

.lp-skip {
  position: absolute;
  left: -9999px;
}
.lp-skip:focus {
  left: var(--lp-space-4);
  top: var(--lp-space-4);
  z-index: 10;
  background: var(--lp-color-surface);
  padding: var(--lp-space-2) var(--lp-space-4);
  border-radius: var(--lp-radius-control);
}

.lp-hidden { display: none !important; }

/* Readable by a screen reader, invisible on screen. */
.lp-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- header ---- */

.lp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lp-space-5);
  flex-wrap: wrap;
  padding: var(--lp-space-4) var(--lp-space-6);
  border-bottom: 1px solid var(--lp-color-border);
  background: var(--lp-color-bg);
  /* Sticky, as the artboards draw it: the buy button stays reachable down a long page. */
  position: sticky;
  top: 0;
  z-index: 20;
}
.lp-header__logo { height: var(--lp-logo-height); width: auto; display: block; }
/* A white mark on a light page: the script finds it and gives it a plate in the text
   colour, which the manifest guarantees reads against the page. Content-box, so the
   mark keeps its height and the plate grows around it. */
.lp-header__logo--light {
  box-sizing: content-box;
  padding: 6px 12px;
  background: var(--lp-color-text);
  border-radius: var(--lp-radius-control);
}
/* The stand-in for a partner who has uploaded no mark. Sized from the same
   token as the logo it replaces, so the header keeps its height either way. */
.lp-header__wordmark { display: block; font-family: var(--lp-font-heading);
  font-weight: var(--lp-heading-weight); letter-spacing: var(--lp-heading-tracking);
  color: var(--lp-color-primary); font-size: calc(var(--lp-logo-height) * 0.52);
  line-height: var(--lp-logo-height); white-space: nowrap; }

.lp-nav { display: flex; align-items: center; gap: var(--lp-space-5); flex-wrap: wrap; }
.lp-nav__link { font-size: 15px; font-weight: 600; }
.lp-nav__cta { font-size: 15px; }

/* The language switcher: each language by its own name, the current one unlinked. */
.lp-langs { display: flex; gap: var(--lp-space-3); font-size: 14px; }
.lp-langs__link { font-weight: 600; opacity: 0.75; }
.lp-langs__link--current { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* A preview of unsaved changes: said at the top of every page it draws. */
.lp-preview-banner { margin: 0; padding: var(--lp-space-2) var(--lp-space-4); text-align: center;
  font-size: 14px; font-weight: 700; background: #1d2430; color: #ffffff; }

/* The hamburger. Off-screen rather than `hidden`, so it keeps its keyboard focus. */
.lp-nav__checkbox { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.lp-nav__burger {
  display: none;
  align-items: center;
  cursor: pointer;
  padding: var(--lp-space-1);
  border-radius: var(--lp-radius-control);
}
.lp-burger {
  width: 26px; height: 26px;
  fill: none;
  stroke: var(--lp-color-text);
  stroke-width: 2.4;
  stroke-linecap: round;
}
.lp-nav__checkbox:focus-visible + .lp-nav__burger { outline: 3px solid var(--lp-color-focus); outline-offset: 2px; }

.lp-steps {
  display: flex;
  align-items: center;
  gap: var(--lp-space-3);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.lp-steps__item {
  display: flex;
  align-items: center;
  gap: var(--lp-space-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lp-color-muted);
}
.lp-steps__item[data-state="current"] { color: var(--lp-color-text); font-weight: 800; }
.lp-steps__item[data-state="done"] { color: var(--lp-color-highlight); }
.lp-steps__item[data-state="todo"] { opacity: 0.5; }
.lp-steps__link { display: flex; align-items: center; gap: var(--lp-space-2); color: inherit; }
.lp-steps__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  border: 2px solid currentColor;
  font-size: 11px;
}
.lp-steps__check {
  display: none;
  width: 14px; height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lp-steps__item[data-state="done"] .lp-steps__index { display: none; }
.lp-steps__item[data-state="done"] .lp-steps__check { display: inline-block; }

/* ---- layout ---- */

.lp-main { display: block; }

.lp-section {
  max-width: var(--lp-page-max);
  margin: 0 auto;
  padding: var(--lp-space-7) var(--lp-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--lp-space-4);
}
.lp-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lp-space-4);
  flex-wrap: wrap;
}

.lp-grid { display: grid; gap: var(--lp-space-5); }
.lp-grid--split { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.lp-grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-column { display: flex; flex-direction: column; gap: var(--lp-space-5); }
/* The order card follows the buyer down the amount card, so "Fortsæt til levering" is
   always in reach without scrolling back up. `align-self: start` is what lets it stick:
   a stretched grid item is as tall as the row and has nowhere to move. The offset clears
   the sticky header. */
.lp-grid--split > .lp-column { position: sticky; top: calc(var(--lp-logo-height) + var(--lp-space-6) + var(--lp-space-4)); align-self: start; }

.lp-eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lp-color-primary);
}
.lp-heading {
  margin: 0;
  font-family: var(--lp-font-heading);
  font-weight: var(--lp-heading-weight);
  letter-spacing: var(--lp-heading-tracking);
  font-size: clamp(26px, 3vw, 32px);
  line-height: 1.15;
}
.lp-subheading {
  margin: 0;
  font-family: var(--lp-font-heading);
  font-weight: var(--lp-heading-weight);
  font-size: 19px;
  line-height: 1.25;
}
.lp-body { margin: 0; color: var(--lp-color-muted); }
.lp-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.lp-help { margin: 0; font-size: 13px; color: var(--lp-color-muted); }
.lp-label { margin: 0; font-size: 13px; font-weight: 700; }
.lp-error { margin: 0; font-size: 13px; color: var(--lp-color-danger); font-weight: 600; }

.lp-tag {
  margin: 0;
  background: var(--lp-color-accent);
  color: var(--lp-color-on-accent);
  border-radius: var(--lp-radius-control);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
}
.lp-pill {
  display: inline-block;
  border: 1px solid var(--lp-color-border);
  border-radius: var(--lp-radius-pill);
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lp-color-muted);
}

.lp-card {
  background: var(--lp-color-surface);
  border-radius: var(--lp-radius-card);
  box-shadow: var(--lp-shadow-card);
}
.lp-card--pad { padding: var(--lp-space-6); display: flex; flex-direction: column; gap: var(--lp-space-4); }
.lp-card__image { width: 100%; height: 130px; object-fit: cover; border-radius: var(--lp-radius-control); display: block; }

/* ---- hero ---- */

.lp-hero {
  max-width: var(--lp-page-max);
  margin: 0 auto;
  padding: var(--lp-space-8) var(--lp-space-6) var(--lp-space-6);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lp-space-8);
  align-items: center;
}
.lp-hero__copy { display: flex; flex-direction: column; gap: var(--lp-space-4); }
.lp-hero__title {
  margin: 0;
  font-family: var(--lp-font-heading);
  font-weight: var(--lp-heading-weight);
  letter-spacing: var(--lp-heading-tracking);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
}
.lp-hero__body { margin: 0; font-size: 18px; color: var(--lp-color-muted); max-width: 34em; }
.lp-hero__actions { display: flex; gap: var(--lp-space-3); flex-wrap: wrap; margin: var(--lp-space-2) 0 0; }
.lp-hero__figure { margin: 0; position: relative; }
.lp-hero__image { width: 100%; height: 400px; object-fit: cover; border-radius: var(--lp-radius-card); display: block; }
.lp-hero__caption {
  position: absolute;
  left: var(--lp-space-5);
  bottom: var(--lp-space-5);
  background: var(--lp-color-surface);
  border-radius: var(--lp-radius-pill);
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
}

/* The partner's legacy full-page photo, kept as the hero backdrop behind a brand wash.
   Three stops, as drawn: opaque behind the heading, half-open at the fold, nearly clear at
   the right edge. Each stop is the tenant's own surface colour at a fixed alpha, so the
   wash re-themes itself with no extra token. */
.lp-hero--backdrop {
  position: relative;
  max-width: none;
  grid-template-columns: minmax(0, 1fr);
  padding-inline: max(var(--lp-space-6), calc((100vw - var(--lp-page-max)) / 2 + var(--lp-space-6)));
  background-image:
    linear-gradient(90deg,
      color-mix(in srgb, var(--lp-color-bg) 95%, transparent) 0%,
      color-mix(in srgb, var(--lp-color-bg) 72%, transparent) 48%,
      color-mix(in srgb, var(--lp-color-bg) 28%, transparent) 100%),
    var(--lp-hero-backdrop);
  background-size: cover, cover;
  background-position: center, center;
}
.lp-hero--backdrop .lp-hero__copy { max-width: 640px; }

.lp-badges { list-style: none; display: flex; gap: var(--lp-space-2); flex-wrap: wrap; margin: 0; padding: 0; }
.lp-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--lp-space-2);
  background: var(--lp-color-surface);
  border-radius: var(--lp-radius-pill);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
}
.lp-icon { width: 16px; height: 16px; fill: none; stroke: var(--lp-color-primary); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lp-icon--inherit { stroke: currentColor; }
.lp-note { margin: 0; }
.lp-note--muted { font-size: 14px; color: var(--lp-color-muted); }

/* The two-restaurant banner: a white card with a rule in the partner's warm colour and
   the two marks side by side. Each mark is a crop of one hosted lockup, so the frame is a
   fixed window and the image inside it is anchored left or right. */
.lp-notice-wrap {
  max-width: var(--lp-page-max);
  margin: 0 auto;
  padding: 0 var(--lp-space-6);
}
.lp-notice {
  display: flex;
  align-items: center;
  gap: var(--lp-space-6);
  flex-wrap: wrap;
  padding: var(--lp-space-5) var(--lp-space-6);
  border-left: 6px solid var(--lp-color-highlight);
}
.lp-notice__logos { display: flex; align-items: center; gap: var(--lp-space-3); flex-shrink: 0; }
.lp-notice__plus { font-family: var(--lp-font-heading); font-size: 20px; font-weight: var(--lp-heading-weight); }
.lp-notice__logo { display: block; width: 52px; height: 78px; overflow: hidden; }
.lp-notice__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The window is a 2:3 box, narrower than half the lockup, so `cover` scales the artwork
   by height and each mark is framed by anchoring the image sideways. The two percentages
   are measured off this asset: the marks sit at 26% and 75% of its width. Keep the 2:3
   ratio if the box is resized, or the crop lands between them. */
.lp-notice__logo--left img { object-position: 7% center; }
.lp-notice__logo--right img { object-position: 95% center; }
.lp-notice__logo--none { width: auto; height: 44px; }
.lp-notice__logo--none img { width: auto; object-fit: contain; }
.lp-notice__copy { display: flex; flex-direction: column; gap: var(--lp-space-1); min-width: 0; }
.lp-notice__title,
.lp-notice__body { margin: 0; }
.lp-notice__title { font-size: 16px; font-weight: 700; }
.lp-notice__body { font-size: 13px; color: var(--lp-color-muted); }

/* The buyer location switcher: the other buying locations of a partner group, as links
   to each location's own shop. Drawn as a quiet card so it reads as navigation rather
   than as an order step. */
.lp-locations {
  max-width: var(--lp-page-max);
  margin: 0 auto var(--lp-space-4);
}
.lp-locations .lp-label { margin-top: 0; }
.lp-locations__list {
  list-style: none;
  margin: var(--lp-space-3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--lp-space-3);
}
.lp-locations__link {
  display: inline-flex;
  align-items: center;
  gap: var(--lp-space-2);
  padding: var(--lp-space-2) var(--lp-space-3);
  border: 1px solid var(--lp-color-border);
  border-radius: var(--lp-radius-pill);
  color: var(--lp-color-text);
  text-decoration: none;
}
.lp-locations__link:hover,
.lp-locations__link:focus-visible {
  border-color: var(--lp-color-primary);
}
.lp-locations__mark {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}
.lp-locations__mark--wordmark {
  width: auto;
  height: auto;
  font-family: var(--lp-font-heading);
  font-weight: var(--lp-heading-weight);
  font-size: 14px;
}
.lp-locations__name { font-size: 14px; }

/* ---- buttons ---- */

.lp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lp-space-2);
  border-radius: var(--lp-radius-pill);
  border: 2px solid transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 24px;
  cursor: pointer;
  text-align: center;
}
.lp-button--primary { background: var(--lp-color-primary); color: var(--lp-color-on-primary); }
.lp-button--primary:hover, .lp-button--primary:focus-visible { color: var(--lp-color-on-primary); }
.lp-button--outline { background: transparent; color: var(--lp-color-text); border-color: var(--lp-color-control-border); }
.lp-button--outline:hover, .lp-button--outline:focus-visible { color: var(--lp-color-text); }
.lp-button--lg { font-size: 16px; padding: 15px 30px; }
.lp-button--sm { font-size: 13px; padding: 8px 18px; align-self: flex-start; }
.lp-button:hover { filter: brightness(1.06); }
.lp-button[disabled] { opacity: 0.45; cursor: not-allowed; filter: none; }

/* ---- forms ---- */

.lp-amount-form { display: flex; flex-direction: column; gap: var(--lp-space-4); }
.lp-field { display: flex; flex-direction: column; gap: var(--lp-space-2); border: 0; margin: 0; padding: 0; min-width: 0; }
.lp-field--narrow { max-width: 160px; }
.lp-field--check { gap: var(--lp-space-1); }

.lp-input, .lp-select {
  font-family: inherit;
  font-size: 15px;
  color: var(--lp-color-text);
  background: var(--lp-color-surface);
  border: 2px solid var(--lp-color-control-border);
  border-radius: var(--lp-radius-control);
  padding: 13px 15px;
  width: 100%;
}
.lp-input[aria-invalid="true"], .lp-select[aria-invalid="true"] { border-color: var(--lp-color-danger); }

.lp-chips { display: flex; gap: var(--lp-space-2); flex-wrap: wrap; }
/* Only groups the greeting cards for the yes/no question; the panel's own spacing applies. */
.lp-greeting-fields { display: contents; }
.lp-category-filter { border: 0; padding: 0; margin: 0 0 var(--lp-space-4); min-width: 0; }
.lp-chip { position: relative; }
.lp-chip__input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.lp-chip__label {
  display: inline-block;
  border: 2px solid var(--lp-color-control-border);
  border-radius: var(--lp-radius-control);
  padding: 11px 19px;
  font-size: 16px;
  font-weight: 700;
}
.lp-chip__input:checked + .lp-chip__label {
  background: var(--lp-color-accent);
  border-color: var(--lp-color-accent);
  color: var(--lp-color-on-accent);
}
.lp-chip__input:focus-visible + .lp-chip__label { outline: 3px solid var(--lp-color-focus); outline-offset: 2px; }

.lp-check { display: flex; align-items: flex-start; gap: var(--lp-space-2); font-size: 13px; color: var(--lp-color-muted); }
.lp-check__input { margin-top: 3px; }

.lp-alert {
  margin: 0;
  border-radius: var(--lp-radius-control);
  padding: var(--lp-space-3) var(--lp-space-4);
  font-size: 14px;
  border: 1px solid var(--lp-color-border);
  background: var(--lp-color-surface);
}
.lp-alert[data-tone="error"] { border-color: var(--lp-color-danger); color: var(--lp-color-danger); }

/* ---- designs, summary ---- */

.lp-designs { display: flex; flex-direction: column; gap: var(--lp-space-2); }
/* Three across, at every width: the artboards draw one row of designs, and a fixed
   thumbnail width wraps the third one as soon as the card is a little narrower. */
.lp-designs__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lp-space-3);
  margin: 0;
  padding: 0;
}
.lp-designs__item { border: 3px solid transparent; border-radius: var(--lp-radius-control); padding: 3px; }
.lp-designs__item--current { border-color: var(--lp-color-highlight); }
.lp-designs__image { width: 100%; height: 102px; object-fit: cover; border-radius: var(--lp-radius-control); display: block; }

.lp-summary {
  background: var(--lp-color-footer-bg);
  color: var(--lp-color-footer-text);
  border-radius: var(--lp-radius-card);
  padding: var(--lp-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--lp-space-3);
}
.lp-summary__label { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; opacity: 0.75; }
.lp-summary__lines { margin: 0; display: flex; flex-direction: column; gap: var(--lp-space-2); }
.lp-summary__line { display: flex; justify-content: space-between; gap: var(--lp-space-4); font-size: 16px; }
.lp-summary__line dt, .lp-summary__line dd { margin: 0; }
.lp-summary__line dd { font-weight: 700; }
.lp-summary__line--muted { font-size: 14px; opacity: 0.8; }
.lp-summary__line--total {
  border-top: 1px solid currentColor;
  padding-top: var(--lp-space-3);
  font-size: 20px;
  font-weight: 800;
}
.lp-summary__note { margin: 0; font-size: 12px; opacity: 0.75; }

/* The continue button sits under the amount fields, in the buyer's line of travel. */
.lp-amount-form__cta { width: 100%; margin-top: var(--lp-space-2); }
.lp-amount-form__secure {
  margin: 0;
  font-size: 12px;
  color: var(--lp-color-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--lp-space-2);
}
.lp-amount-form__secure .lp-icon { width: 14px; height: 14px; stroke-width: 2; }
/* The narrow label carries the live price, as the 390 px artboards draw it. */
.lp-amount-form__cta-narrow { display: none; }

/* ---- experiences ---- */

.lp-experiences {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lp-space-5);
}
.lp-experience { display: flex; gap: var(--lp-space-5); padding: var(--lp-space-5); }
.lp-experience__image { width: 128px; height: 128px; object-fit: cover; border-radius: var(--lp-radius-control); display: block; flex-shrink: 0; }
.lp-experience__body { display: flex; flex-direction: column; gap: var(--lp-space-2); flex-grow: 1; min-width: 0; }
.lp-experience__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--lp-space-3); }
.lp-experience__price { margin: 0; font-size: 16px; font-weight: 800; color: var(--lp-color-accent); white-space: nowrap; }
.lp-experience__form { display: flex; flex-direction: column; gap: var(--lp-space-2); margin-top: auto; }
.lp-experience__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--lp-space-3); }
/* The validity line keeps a readable width; the actions wrap below it instead. */
.lp-experience__foot > .lp-help { min-width: 9em; }
.lp-experience__actions { display: flex; align-items: center; gap: var(--lp-space-4); flex-shrink: 0; }
.lp-quantity-field { display: flex; align-items: center; gap: var(--lp-space-2); font-size: 13px; color: var(--lp-color-muted); }
.lp-quantity { width: 4.5em; padding: 8px 10px; }

/* ---- "Se eksempel" ---- */

/* A link, not a button: it opens a document rather than advancing the order, and
   the primary action beside it must stay the one that does. */
.lp-example {
  display: inline-flex;
  align-items: center;
  gap: var(--lp-space-2);
  font-size: 13px;
  font-weight: 700;
  color: var(--lp-color-muted);
  text-decoration: none;
  white-space: nowrap;
}
.lp-example:hover { color: var(--lp-color-text); text-decoration: underline; text-underline-offset: 3px; }

/* On the value card it carries a button's weight: it is the only thing on the
   page that shows the buyer the card they are about to buy, and the partner
   attributes real conversion to it.
 
   It is TINTED rather than filled. A second filled button would compete with
   "Fortsæt til levering" for the eye, and the buyer would have to work out which
   one takes their money. A wash of the brand colour makes it obviously a thing
   to press while leaving the order of the two unmistakable.
 
   color-mix keeps the tint derived from whatever the tenant's own primary is, so
   one rule themes every partner and no palette needs a second token. Browsers
   without it fall back to the flat background declared first. */
.lp-example--button {
  color: var(--lp-color-primary);
  background: var(--lp-color-surface);
  background: color-mix(in srgb, var(--lp-color-primary) 7%, transparent);
  border-color: color-mix(in srgb, var(--lp-color-primary) 35%, transparent);
  font-size: 14px;
  padding: 11px 20px;
  gap: var(--lp-space-3);
}
.lp-example--button:hover {
  text-decoration: none;
  background: color-mix(in srgb, var(--lp-color-primary) 13%, transparent);
  border-color: var(--lp-color-primary);
  filter: none;
}
.lp-example--button .lp-example__icon { width: 18px; height: 18px; stroke-width: 2; }
.lp-example__icon {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
/* The card is a flex column, so the button sizes to its text instead of the column. */
.lp-example--button { align-self: flex-start; }

@media (max-width: 560px) {
  .lp-experience__foot { flex-wrap: wrap; }
  .lp-experience__actions { width: 100%; justify-content: space-between; }
}
.lp-practical { padding: var(--lp-space-5) var(--lp-space-6); }
.lp-practical .lp-body { font-size: 13px; }
.lp-practical__lead { color: var(--lp-color-text); font-weight: 700; }

/* ---- delivery ---- */

.lp-delivery {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lp-space-5);
  margin: 0;
}
.lp-delivery__item { display: flex; gap: var(--lp-space-3); align-items: flex-start; }
.lp-delivery__icon {
  width: 28px; height: 28px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--lp-color-highlight);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lp-delivery__text { display: flex; flex-direction: column; gap: var(--lp-space-1); min-width: 0; }
.lp-delivery__label { margin: 0; font-size: 15px; font-weight: 700; }

/* ---- events ---- */

/* The date and the venue sit directly under the title, before any prose, because they
   are what a ticket buyer scans for. */
.lp-event-when { margin: 0; font-size: 15px; font-weight: 700; }
.lp-event-where { margin: 0; font-size: 14px; opacity: 0.8; }
.lp-event .lp-badges { margin-top: var(--lp-space-2); }
.lp-ticket { display: flex; flex-direction: column; gap: var(--lp-space-4); }

/* ---- special offers ---- */

/* The before-price sits beside what the buyer pays, struck and quieter, so the pair reads
   as one price rather than as two. */
.lp-offer__was { opacity: 0.6; font-weight: 400; }
.lp-offer__saving {
  margin: 0;
  align-self: flex-start;
  border-radius: var(--lp-radius-pill);
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 700;
  background: var(--lp-color-highlight);
  color: var(--lp-color-on-highlight);
}

/* ---- the buyer's own company ---- */

.lp-company { display: flex; flex-direction: column; gap: var(--lp-space-4); }

/* ---- the discount code ---- */

/* The box and its button share a row and the button keeps its own width, so a long code
   still fits on a phone. Applied, the same slot holds the chip and the remove control. */
.lp-discount { display: flex; align-items: flex-start; gap: var(--lp-space-2); flex-wrap: wrap; }
.lp-discount .lp-input { flex: 1 1 180px; min-width: 0; text-transform: uppercase; }
.lp-discount__applied {
  display: flex;
  align-items: center;
  gap: var(--lp-space-3);
  flex-wrap: wrap;
  margin: 0;
}
.lp-discount__code {
  border: 2px solid var(--lp-color-highlight);
  border-radius: var(--lp-radius-pill);
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 700;
}

/* ---- greeting, its picture, and the postal form ---- */

.lp-textarea { min-height: 110px; resize: vertical; font-family: inherit; line-height: 1.5; }
.lp-counter { display: flex; justify-content: space-between; gap: var(--lp-space-3); flex-wrap: wrap; }

.lp-designs__choice { display: block; cursor: pointer; }
.lp-designs__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.lp-designs__item:has(.lp-designs__input:checked) { border-color: var(--lp-color-highlight); }
.lp-designs__input:focus-visible + .lp-designs__image,
.lp-designs__input:focus-visible + .lp-designs__none { outline: 3px solid var(--lp-color-focus); outline-offset: 2px; }
.lp-designs__choice--none { display: flex; align-items: center; justify-content: center; height: 102px; }
.lp-designs__none {
  display: block;
  border: 2px dashed var(--lp-color-border);
  border-radius: var(--lp-radius-control);
  padding: var(--lp-space-3);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  width: 100%;
}

.lp-upload { display: flex; flex-direction: column; gap: var(--lp-space-2); }
.lp-upload__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lp-space-2);
  border: 2px dashed var(--lp-color-control-border);
  border-radius: var(--lp-radius-control);
  padding: var(--lp-space-6);
  cursor: pointer;
  text-align: center;
}
.lp-upload__drop--over { border-color: var(--lp-color-highlight); }
.lp-upload__icon {
  width: 28px; height: 28px;
  fill: none;
  stroke: var(--lp-color-highlight);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lp-upload__title { font-size: 14px; font-weight: 700; }

.lp-chips--inline { display: flex; flex-wrap: wrap; }
.lp-postal { display: flex; flex-direction: column; gap: var(--lp-space-4); }
.lp-pickup__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--lp-space-2); max-height: 320px; overflow-y: auto; }
.lp-pickup__item { border: 1px solid var(--lp-color-border); border-radius: var(--lp-radius-control); }
.lp-pickup__choice { display: flex; align-items: flex-start; gap: var(--lp-space-3); padding: var(--lp-space-3); cursor: pointer; }
.lp-pickup__choice .lp-chip__input { position: static; opacity: 1; inset: auto; margin-top: 3px; }
.lp-pickup__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lp-pickup__name { font-size: 14px; font-weight: 700; }
.lp-pickup__item:has(input:checked) { border-color: var(--lp-color-highlight); border-left-width: 4px; }

/* The company's terms, when they exist only as text. */
.lp-legal__button {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.lp-dialog { border: 0; border-radius: var(--lp-radius-card); padding: 0; max-width: 820px; width: calc(100% - 2 * var(--lp-space-4)); }
.lp-dialog::backdrop { background: rgb(0 0 0 / 0.5); }
.lp-dialog__body { display: flex; flex-direction: column; gap: var(--lp-space-4); padding: var(--lp-space-6); background: var(--lp-color-surface); color: var(--lp-color-text); }
.lp-dialog__actions { display: flex; justify-content: flex-end; }
.lp-terms { max-height: 60vh; overflow-y: auto; font-size: 14px; line-height: 1.6; }
.lp-terms :where(h1, h2, h3, h4) { font-family: var(--lp-font-heading); font-size: 17px; margin: var(--lp-space-4) 0 var(--lp-space-2); }
.lp-terms p { margin: 0 0 var(--lp-space-3); }
.lp-terms :where(ul, ol) { margin: 0 0 var(--lp-space-3); padding-left: var(--lp-space-5); }
.lp-terms a { text-decoration: underline; }

/* ---- checkout ---- */

.lp-checkout {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--lp-space-7) var(--lp-space-6) var(--lp-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--lp-space-5);
}
.lp-panel { display: flex; flex-direction: column; gap: var(--lp-space-4); }
.lp-panel--single { max-width: 760px; margin: 0 auto; padding: var(--lp-space-8) var(--lp-space-6); }
.lp-panel__actions { display: flex; justify-content: space-between; gap: var(--lp-space-3); flex-wrap: wrap; }

.lp-selection { flex-direction: row; align-items: center; gap: var(--lp-space-4); padding: var(--lp-space-4) var(--lp-space-5); }
.lp-selection__image { width: 96px; height: 58px; object-fit: cover; border-radius: var(--lp-radius-control); display: block; flex-shrink: 0; }
.lp-selection__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lp-selection__title { margin: 0; font-size: 15px; font-weight: 700; }

/* The basket: the lines set aside, each with its own count and a remove button. */
.lp-basket, .lp-addons { display: flex; flex-direction: column; gap: var(--lp-space-3); padding: var(--lp-space-4) var(--lp-space-5); }
.lp-basket__lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--lp-space-3); }
.lp-basket__line { display: flex; align-items: center; gap: var(--lp-space-3); flex-wrap: wrap; }
.lp-basket__text { flex: 1 1 12rem; min-width: 0; margin: 0; }
.lp-basket__quantity { min-width: 2ch; text-align: center; font-weight: 700; }
.lp-basket__own { flex: 1 1 100%; display: flex; flex-direction: column; gap: var(--lp-space-3); }
.lp-basket__own > summary { cursor: pointer; align-self: flex-start; }
.lp-link-button {
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  padding: 4px 0;
  cursor: pointer;
  align-self: flex-start;
}
.lp-stepper__button:disabled { opacity: 0.4; cursor: not-allowed; }

/* The quantity control: minus, the number, plus, right-aligned in the selection card. */
.lp-stepper { margin-left: auto; display: flex; align-items: center; gap: var(--lp-space-3); }
.lp-stepper__control {
  display: flex;
  align-items: center;
  gap: var(--lp-space-2);
  border: 2px solid var(--lp-color-control-border);
  border-radius: var(--lp-radius-pill);
  padding: 4px 10px;
}
.lp-stepper__button {
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  padding: 6px 8px;
  cursor: pointer;
}
.lp-stepper__input {
  width: 44px;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  padding: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}
.lp-stepper__input::-webkit-outer-spin-button,
.lp-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.lp-methods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--lp-space-3); }
.lp-method { padding: var(--lp-space-4) var(--lp-space-5); display: flex; flex-direction: column; gap: var(--lp-space-2); }
.lp-method__head { display: flex; align-items: center; gap: var(--lp-space-3); font-size: 16px; font-weight: 700; cursor: pointer; }
.lp-method__price { margin-left: auto; font-size: 14px; font-weight: 400; color: var(--lp-color-muted); }
.lp-method--disabled { opacity: 0.65; }
.lp-method--disabled .lp-method__head { cursor: not-allowed; }
/* The chosen method carries the partner's warm rule and holds the buyer's own fields. */
.lp-method--selected { border-left: 5px solid var(--lp-color-highlight); }
.lp-method__fields { display: flex; flex-direction: column; gap: var(--lp-space-4); padding-top: var(--lp-space-2); }
.lp-deferred { opacity: 0.75; }

/* The payment step: totals beside the recap cards, as drawn. */
.lp-grid--payment { grid-template-columns: 1.2fr 1fr; align-items: start; }
.lp-recap { gap: var(--lp-space-1); padding: var(--lp-space-4) var(--lp-space-5); }
/* The greeting recap: the picture the buyer picked, beside what it is. */
.lp-recap__picture { margin: 0; display: flex; align-items: center; gap: var(--lp-space-2); }
.lp-recap__thumb {
  width: 64px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--lp-radius-control);
  display: block;
}

.lp-outcome { align-items: center; text-align: center; }
.lp-outcome__check {
  width: 40px; height: 40px;
  fill: none;
  stroke: var(--lp-color-success);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- footer ---- */

.lp-footer {
  background: var(--lp-color-footer-bg);
  color: var(--lp-color-footer-text);
  padding: var(--lp-space-7) var(--lp-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--lp-space-4);
}
.lp-footer__top, .lp-footer__bottom {
  max-width: var(--lp-page-max);
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: var(--lp-space-5);
  flex-wrap: wrap;
  align-items: center;
}
.lp-footer__name { margin: 0; font-family: var(--lp-font-heading); font-size: 20px; font-weight: var(--lp-heading-weight); }
.lp-footer__payments { list-style: none; display: flex; gap: var(--lp-space-2); margin: 0; padding: 0; flex-wrap: wrap; }
.lp-footer__payment { border: 1px solid currentColor; border-radius: var(--lp-radius-control); padding: 6px 12px; font-size: 12px; font-weight: 600; }
.lp-footer__bottom { font-size: 13px; opacity: 0.85; }
/* A document the partner can actually open reads as a link; one with no page stays text. */
.lp-legal__link { text-decoration: underline; }
.lp-footer a:not(.lp-button):hover { color: inherit; opacity: 1; text-decoration: underline; }
.lp-footer__bottom p { margin: 0; }
.lp-footer__powered { max-width: var(--lp-page-max); width: 100%; margin: 0 auto; font-size: 12px; opacity: 0.6; }

/* ---- responsive ---- */

@media (max-width: 900px) {
  .lp-header { padding: var(--lp-space-3) var(--lp-space-4); }
  .lp-hero { grid-template-columns: minmax(0, 1fr); gap: var(--lp-space-5); padding: var(--lp-space-6) var(--lp-space-4); }
  .lp-hero__image { height: 240px; }
  .lp-section, .lp-notice { padding-inline: var(--lp-space-4); }
  .lp-section { padding-block: var(--lp-space-5); }
  .lp-grid--split, .lp-grid--pair, .lp-grid--payment, .lp-experiences, .lp-delivery { grid-template-columns: minmax(0, 1fr); }
  /* One column: the order card sits right under the form, so nothing needs to stick. */
  .lp-grid--split > .lp-column { position: static; }
  .lp-notice-wrap { padding-inline: var(--lp-space-4); }
  .lp-experience { flex-direction: column; }
  .lp-experience__image { width: 100%; height: 180px; }
  .lp-card--pad { padding: var(--lp-space-5); }
  .lp-checkout { padding: var(--lp-space-5) var(--lp-space-4) var(--lp-space-7); }
  .lp-nav { gap: var(--lp-space-3); font-size: 14px; }
  .lp-steps__label { display: none; }
}

/* The phone layout the 390 px artboards draw. The 900 px rule above is the tablet step;
   everything below is what changes again once a hand is holding the page. */
@media (max-width: 600px) {

  /* Nav collapses to a hamburger and a stacked disclosure panel. */
  .lp-nav__burger { display: inline-flex; }
  .lp-nav { display: none; }
  .lp-nav__checkbox:checked ~ .lp-nav {
    display: flex;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--lp-space-3);
    padding-top: var(--lp-space-3);
  }
  .lp-nav__cta { justify-content: center; }

  /* Hero: copy, photo, then two full-width buttons, then one line of badges.
     `display: contents` lifts the copy's children into the hero's own flex column, which
     is what lets the photo sit between the lead paragraph and the buttons. */
  .lp-hero { display: flex; flex-direction: column; gap: var(--lp-space-3); padding: var(--lp-space-5) var(--lp-space-4); }
  .lp-hero__copy { display: contents; }
  .lp-hero .lp-eyebrow { order: 1; }
  .lp-hero__title { order: 2; font-size: 32px; }
  .lp-hero__body { order: 3; font-size: 15px; }
  .lp-hero__figure { order: 4; }
  .lp-hero__actions { order: 5; flex-direction: column; align-items: stretch; gap: var(--lp-space-2); }
  .lp-hero__actions .lp-button { width: 100%; }
  .lp-hero .lp-badges { order: 6; justify-content: center; gap: var(--lp-space-1); }
  .lp-hero__image { height: 210px; }

  /* Badges lose their pill chrome and read as one centred line, separated by a dot. */
  .lp-hero .lp-badge { background: none; padding: 0; font-size: 12px; font-weight: 400; color: var(--lp-color-muted); }
  .lp-hero .lp-badge .lp-icon { display: none; }
  .lp-hero .lp-badge + .lp-badge::before { content: "· "; }

  /* Amount chips as an explicit 2 x 2 grid. */
  .lp-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lp-space-2); }
  .lp-chip__label { display: block; text-align: center; padding-inline: 0; }

  /* Three designs on one row, ~100 px each. */
  .lp-designs__list { gap: var(--lp-space-2); }
  .lp-designs__item { padding: 2px; }
  .lp-designs__image { height: 62px; }

  /* The experience photo stays beside the text at 84 px square, as drawn. */
  .lp-experience { flex-direction: row; gap: var(--lp-space-3); padding: var(--lp-space-4); }
  .lp-experience__image { width: 84px; height: 84px; }
  .lp-experience__head { flex-direction: column; align-items: flex-start; gap: var(--lp-space-1); }
  .lp-experience__price { white-space: normal; }

  /* Delivery rows: icon, then a bold lead-in with its sentence running on. */
  .lp-delivery { gap: var(--lp-space-4); }
  .lp-delivery__item { flex-direction: row; gap: var(--lp-space-3); align-items: flex-start; }
  .lp-delivery__text { display: inline; }
  .lp-delivery__label { display: inline; font-size: 14px; }
  .lp-delivery__item .lp-help { display: inline; font-size: 14px; color: inherit; }

  /* The wash goes flat on a narrow screen: a 90-degree gradient leaves the right edge of
     a wrapped heading sitting on unwashed photo. */
  .lp-hero--backdrop {
    padding-inline: var(--lp-space-4);
    background-image:
      linear-gradient(
        color-mix(in srgb, var(--lp-color-bg) 82%, transparent),
        color-mix(in srgb, var(--lp-color-bg) 82%, transparent)),
      var(--lp-hero-backdrop);
  }

  .lp-tag { display: block; text-align: center; }
  .lp-note--muted { text-align: center; }
  .lp-selection { flex-wrap: wrap; }
  .lp-stepper { margin-left: 0; width: 100%; justify-content: space-between; }
  .lp-designs__choice--none { height: 62px; }
  .lp-upload__drop { padding: var(--lp-space-4); }
  .lp-counter { flex-direction: column; gap: var(--lp-space-1); }
  .lp-footer { padding: var(--lp-space-6) var(--lp-space-4); }

  /* The banner stacks: the two marks on their own row above the sentence. */
  .lp-notice-wrap { padding-inline: var(--lp-space-4); }
  .lp-notice { flex-direction: column; align-items: flex-start; gap: var(--lp-space-3); padding: var(--lp-space-4); border-left-width: 5px; }
  .lp-notice__logo { width: 40px; height: 60px; }

  /* The continue button swaps to the short label that carries the price. */
  .lp-amount-form__cta-wide { display: none; }
  .lp-amount-form__cta-narrow { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---- required fields ---- */

/* The mark beside a label the buyer has to fill in. `abbr` carries the title and the
   accessible name, so a screen reader says "påkrævet" rather than reading the character;
   the default dotted underline browsers give `abbr[title]` would look like an error, so
   it is removed. */
.lp-required {
  color: var(--lp-color-danger);
  font-weight: 800;
  text-decoration: none;
  border-bottom: 0;
  cursor: help;
  margin-left: 1px;
}
/* Explains the symbol once, at the top of the step that uses it. */
.lp-required-note { margin-top: calc(var(--lp-space-2) * -1); }

/* ---- a partner with nothing to sell ---- */

/* Not a 404 and not an error: 76 of production's 937 active companies are in
   this state, and the page is still theirs. Centred, generous, and quiet — it
   reads as "not yet" rather than "broken". */
.lp-empty {
  align-items: center;
  text-align: center;
  padding: var(--lp-space-8) var(--lp-space-6);
  gap: var(--lp-space-4);
}
.lp-empty__icon {
  width: 56px;
  height: 56px;
  fill: none;
  stroke: var(--lp-color-primary);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
}
.lp-empty__body { max-width: 46ch; }
.lp-empty__contact {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--lp-color-text);
}

/* ---- seasonal dress ---- */

/* Every colour below arrives as a custom property in the page's one nonce-signed
   <style> block. The policy is `style-src 'self' 'nonce-…'` with no
   `unsafe-inline`: a nonce authorises a <style> BLOCK and never a `style=`
   attribute, so colouring these from an attribute would silently do nothing. */

/* B — the decorated band above the header. */
.lp-garland { height: 22px; overflow: hidden; line-height: 0; background: var(--lp-garland-bg, transparent); }
.lp-garland__svg { width: 100%; height: 22px; display: block; }
.lp-garland__rope { fill: none; stroke: var(--lp-garland-rope, transparent); stroke-width: 7; stroke-linecap: round; }
.lp-garland__bead--a { fill: var(--lp-garland-bead-a, transparent); }
.lp-garland__bead--b { fill: var(--lp-garland-bead-b, transparent); }

/* D — the posting deadline. A real message, not decoration: normal contrast,
   readable at the top of the page on a phone. */
.lp-season-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--lp-space-2);
  margin: 0;
  padding: 9px var(--lp-space-6);
  background: var(--lp-color-primary);
  color: var(--lp-color-on-primary);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.lp-season-notice__icon {
  width: 15px; height: 15px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* C — the weather behind the hero.
   Plain elements rather than an SVG: a 100x100 SVG stretched across a wide hero
   turns every circle into an oval. These are sized in pixels, so they stay round
   at any width. Positions and delays are constants, so they live here rather
   than arriving per request. */
.lp-hero--ambient { position: relative; isolation: isolate; }
.lp-ambient {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--lp-ambient-tint, transparent) 0%, transparent 72%);
  pointer-events: none;
}
.lp-ambient__dot {
  position: absolute;
  border-radius: 50%;
  background: var(--lp-ambient-particle, transparent);
  animation: lp-drift 9s ease-in-out infinite alternate;
}
.lp-ambient__dot:nth-child(1) { left: 6%; top: 12%; width: 5px; height: 5px; opacity: 0.85; animation-delay: -0s; }
.lp-ambient__dot:nth-child(2) { left: 19%; top: 34%; width: 4px; height: 4px; opacity: 0.6; animation-delay: -3s; }
.lp-ambient__dot:nth-child(3) { left: 31%; top: 8%; width: 4px; height: 4px; opacity: 0.7; animation-delay: -6s; }
.lp-ambient__dot:nth-child(4) { left: 42%; top: 46%; width: 6px; height: 6px; opacity: 0.8; animation-delay: -1s; }
.lp-ambient__dot:nth-child(5) { left: 54%; top: 20%; width: 3px; height: 3px; opacity: 0.55; animation-delay: -8s; }
.lp-ambient__dot:nth-child(6) { left: 65%; top: 54%; width: 5px; height: 5px; opacity: 0.75; animation-delay: -4s; }
.lp-ambient__dot:nth-child(7) { left: 77%; top: 13%; width: 4px; height: 4px; opacity: 0.65; animation-delay: -2s; }
.lp-ambient__dot:nth-child(8) { left: 88%; top: 42%; width: 6px; height: 6px; opacity: 0.85; animation-delay: -7s; }
.lp-ambient__dot:nth-child(9) { left: 14%; top: 66%; width: 4px; height: 4px; opacity: 0.5; animation-delay: -5s; }
.lp-ambient__dot:nth-child(10) { left: 38%; top: 74%; width: 5px; height: 5px; opacity: 0.6; animation-delay: -9s; }
.lp-ambient__dot:nth-child(11) { left: 72%; top: 78%; width: 3px; height: 3px; opacity: 0.5; animation-delay: -2s; }
.lp-ambient__dot:nth-child(12) { left: 94%; top: 68%; width: 4px; height: 4px; opacity: 0.6; animation-delay: -6s; }
.lp-ambient__dot:nth-child(13) { left: 26%; top: 90%; width: 5px; height: 5px; opacity: 0.5; animation-delay: -3s; }
.lp-ambient__dot:nth-child(14) { left: 60%; top: 94%; width: 4px; height: 4px; opacity: 0.45; animation-delay: -8s; }
.lp-ambient__dot:nth-child(15) { left: 83%; top: 88%; width: 5px; height: 5px; opacity: 0.5; animation-delay: -1s; }

@keyframes lp-drift {
  from { transform: translate(-3px, -4px); }
  to   { transform: translate(3px, 5px); }
}

/* Motion is decoration here and nothing is lost by stopping it. A buyer who has
   asked their system for less motion still gets the tint and the flakes, held still. */
@media (prefers-reduced-motion: reduce) {
  .lp-ambient__dot { animation: none; }
}

/* ---- product page ---- */
.lp-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lp-experience__media { display: block; flex-shrink: 0; }
.lp-experience__link { color: inherit; text-decoration: none; }
.lp-experience__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.lp-details-link {
  align-self: flex-start;
  font-size: 14px;
  font-weight: 700;
  color: var(--lp-color-primary);
  text-underline-offset: 3px;
}
.lp-product__back { padding-bottom: 0; margin: 0 auto; }
.lp-product { display: flex; flex-direction: column; gap: var(--lp-space-6); }
.lp-product__figure { margin: 0; }
.lp-product__image,
.lp-product__placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--lp-radius-card);
  display: block;
}
.lp-product__image { object-fit: cover; }
.lp-product__placeholder {
  display: grid;
  place-items: center;
  background: var(--lp-color-surface);
  border: 1px solid var(--lp-color-border);
}
.lp-product__buy { display: flex; flex-direction: column; gap: var(--lp-space-3); align-self: start; }
.lp-product__price { margin: 0; font-size: 20px; font-weight: 800; color: var(--lp-color-accent); }
.lp-product__facts { margin: 0; display: flex; flex-direction: column; gap: var(--lp-space-1); }
.lp-product__fact { display: flex; gap: var(--lp-space-2); }
.lp-product__fact dt { font-weight: 700; }
.lp-product__fact dd { margin: 0; }
.lp-product__section { display: flex; flex-direction: column; gap: var(--lp-space-2); max-width: 70ch; }
.lp-product__section .lp-body { margin: 0; }
.lp-product__options { list-style: none; margin: 0; display: flex; flex-direction: column; gap: var(--lp-space-3); }
.lp-product__option { display: flex; flex-direction: column; gap: var(--lp-space-1); }
.lp-product__option + .lp-product__option { border-top: 1px solid var(--lp-color-border); padding-top: var(--lp-space-3); }
.lp-product__option-head { display: flex; justify-content: space-between; gap: var(--lp-space-3); font-weight: 700; }
.lp-product__option .lp-badge { align-self: flex-start; margin: 0; }

/* ---- staff mode ---- */
.lp-staff-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lp-space-2) var(--lp-space-4); padding: var(--lp-space-3) var(--lp-space-4); background: var(--lp-color-primary); color: var(--lp-color-on-primary); font-size: 14px; }
.lp-staff-banner form { margin: 0 0 0 auto; }
.lp-staff-banner .lp-link-button { color: inherit; }
.lp-staff-line { display: flex; flex-direction: column; gap: var(--lp-space-3); margin-bottom: var(--lp-space-4); }
.lp-staff-voucher { display: flex; flex-direction: column; gap: var(--lp-space-3); }
.lp-staff-actions { display: flex; flex-wrap: wrap; gap: var(--lp-space-3); margin-top: var(--lp-space-5); }
@media (max-width: 640px) {
  .lp-staff-banner form { margin-left: 0; }
  .lp-staff-actions .lp-button { width: 100%; }
}

/* Configured shop copy keeps the line and paragraph breaks from Shop & Brand. */
.lp-shop-text { white-space: pre-line; }
.lp-product-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--lp-space-4);
  max-width: var(--lp-page-max);
  margin: var(--lp-space-6) auto;
  padding: 0 var(--lp-space-4);
}
.lp-product-types__choice { overflow: hidden; color: var(--lp-color-text); text-decoration: none; }
.lp-product-types__choice img { width: 100%; height: 140px; object-fit: cover; display: block; }
.lp-product-types__choice span { display: block; padding: var(--lp-space-4); font-weight: 600; }
.lp-product-types__choice:hover { border-color: var(--lp-color-primary); }

/* ---- membership: join, the e-mail screens and the member's card ---- */

/* A join hero with no backdrop photo: the copy alone, full width. */
.lp-hero--solo { grid-template-columns: minmax(0, 1fr); }
.lp-membership .lp-summary__label { text-transform: uppercase; }
.lp-membership-form { display: flex; flex-direction: column; gap: var(--lp-space-4); }
.lp-membership-form--narrow { width: 100%; max-width: 420px; text-align: left; }
.lp-membership-form__submit { width: 100%; margin-top: var(--lp-space-2); }
.lp-terms--box {
  max-height: 220px;
  padding: var(--lp-space-3) var(--lp-space-4);
  border: 1px solid var(--lp-color-border);
  border-radius: var(--lp-radius-control);
  background: var(--lp-color-bg);
  color: var(--lp-color-muted);
}
.lp-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--lp-space-3); }
.lp-perks__venue { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.lp-perks__venue + .lp-perks__venue { border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); padding-top: var(--lp-space-3); }
.lp-perks__venue strong { font-size: 16px; }
.lp-perks__venue span { opacity: 0.8; }
.lp-membership-back { align-self: center; }

/* The card wears the partner's brand colour, the way the wallet pass does. */
.lp-member-card {
  background: var(--lp-color-primary);
  color: var(--lp-color-on-primary);
  border-radius: var(--lp-radius-card);
  padding: var(--lp-space-6);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: var(--lp-space-2);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.18);
}
.lp-member-card__top { display: flex; justify-content: space-between; align-items: center; gap: var(--lp-space-3); margin-bottom: auto; }
.lp-member-card__company { font-family: var(--lp-font-heading); font-weight: var(--lp-heading-weight); font-size: 20px; }
.lp-member-card__status {
  border-radius: var(--lp-radius-pill);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: color-mix(in srgb, currentColor 18%, transparent);
}
.lp-member-card__status[data-tone="off"] { opacity: 0.75; }
.lp-member-card__program { margin: var(--lp-space-5) 0 0; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }
.lp-member-card__name {
  margin: 0;
  font-family: var(--lp-font-heading);
  font-weight: var(--lp-heading-weight);
  font-size: clamp(24px, 4vw, 32px);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.lp-member-card__meta { margin: 0; display: flex; gap: var(--lp-space-2); font-size: 14px; }
.lp-member-card__meta dt { opacity: 0.8; }
.lp-member-card__meta dd { margin: 0; font-weight: 700; }
.lp-wallets { display: flex; flex-wrap: wrap; gap: var(--lp-space-3); }
.lp-wallets form { margin: 0; }
/* The official badge is the whole button, whatever the partner's colours. */
.lp-wallet-badge { display: block; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 10px; }
.lp-wallet-badge img { display: block; height: 48px; width: auto; }
.lp-wallet-badge:focus-visible { outline: 2px solid var(--lp-color-text); outline-offset: 3px; }
.lp-membership-privacy summary { cursor: pointer; }
.lp-membership-privacy__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--lp-space-4); margin-top: var(--lp-space-4); }
/* A short screen still pushes the footer to the bottom of the window. */
.lp-membership--centred { min-height: 70vh; }

@media (max-width: 600px) {
  .lp-membership.lp-panel--single { padding: var(--lp-space-5) var(--lp-space-4); }
  /* The shared hero centres short lines on a phone; the join copy reads left, like its title. */
  .lp-membership-hero { align-items: stretch; }
  .lp-membership-hero .lp-badges { justify-content: flex-start; }
  .lp-member-card { padding: var(--lp-space-5); min-height: 190px; }
  .lp-wallets { justify-content: center; }
}