/* ============================================================================
   Buy & Try microsite — Euronics skin (template stylesheet)
   ----------------------------------------------------------------------------
   BRANDING: every brand value lives in the :root block below. No raw hex or
   font-family appears anywhere else in this file (or in the HTML). To reskin
   for a future buy_and_try client, edit :root + the logo/motif markup only.
   Design source: Figma txRN1YtHdiqXhtvU1EQM3c (Euronics Buy & Try ENG).
   ========================================================================== */

/* --- Brand fonts (Dan supplies the woff2 files at assets/fonts/) ----------- */
/* Paths are relative to THIS stylesheet (assets/css/), so fonts one level up in
   assets/fonts/ must be ../fonts/ — NOT assets/fonts/ (which resolves to the
   non-existent assets/css/assets/fonts/ and 404s, masking the brand font behind
   the system fallback for anyone without Euronics installed locally). */
@font-face {
  font-family: "Euronics";
  src: url("../fonts/euronics-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Euronics";
  src: url("../fonts/euronics-heavy.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  /* Palette (exact Figma values) */
  --eur-yellow:      #ffcc01;   /* hero + track band + secondary button */
  --eur-star:        #ffed00;   /* decorative star motif (brighter than hero) */
  --eur-red:         #e21f26;   /* primary CTA + "Track your return" heading */
  --eur-red-ink:     #ea1817;   /* red text on light buttons */
  --eur-blue:        #0c438f;   /* headings, nav links */
  --eur-footer-from: #0072b6;   /* footer gradient start */
  --eur-footer-to:   #184388;   /* footer gradient end */
  --eur-footer-ink:  #f1ede4;
  --eur-ink:         #000000;   /* body text */
  --eur-muted:       #646464;   /* placeholders, hints */
  --eur-strip:       #f2f2f2;   /* disclaimer / customer-id strip */
  --eur-card-stroke: #ababab;
  --eur-nav-border:  #d4d0ca;
  --eur-white:       #ffffff;
  --eur-danger:      #c0202a;   /* form errors (kept within brand red family) */
  --eur-ok:          #1e7d46;

  /* Radius + shadow */
  --card-radius:  12px;
  --input-radius: 6px;
  --pill-radius:  50px;
  --shadow-card:  0 2px 10px rgba(12, 67, 143, 0.08);
  --shadow-pop:   0 8px 30px rgba(0, 0, 0, 0.14);

  /* Type — Euronics brand font only; system-font fallback (no webfonts).
     Body copy is REGULAR (400); only headings/CTAs use the heavy (800) cut.
     --text-body sized against the Figma body↔heading proportion (~14–15px body
     vs 24–42px headings) so body never reads bold next to the H1. */
  --font-brand: "Euronics", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --weight-body: 400;
  --weight-heavy: 800;
  --text-body: 15px;
  --leading-body: 1.5;

  /* Layout */
  --maxw-page:  1440px;
  --maxw-flow:  900px;   /* forms / content column */
  --gutter:     clamp(20px, 5vw, 80px);
  --section-gap: clamp(48px, 8vw, 117px);  /* the single seam rhythm — reused everywhere the section gap repeats */
  --nav-collapse: 1040px;                  /* nav → hamburger switch. Measured: the 6-link row wraps below the logo at ≤997px; +~40px headroom. (var() can't live inside a @media condition, so the literal below MUST match this token) */
}

/* --- Reset / base --------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Nav anchor links (#how-it-works etc.) smooth-scroll. The nav is static (not
   sticky), and each section carries an 8vw top padding, so the heading lands
   fully visible below the viewport top — no under-nav offset needed. */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-brand);
  font-weight: var(--weight-body);   /* explicit 400 → the regular cut; never the 800 face */
  font-size: var(--text-body);
  color: var(--eur-ink);
  background: var(--eur-white);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; min-height: 100vh;
}
img, svg { max-width: 100%; }
a { color: var(--eur-blue); }
h1, h2, h3, h4 { font-family: var(--font-brand); font-weight: 800; color: var(--eur-blue); margin: 0; }
p { margin: 0; }

/* --- Nav ------------------------------------------------------------------ */
.site-nav {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 89px; padding: 0 var(--gutter);
  background: var(--eur-white);
  gap: 1rem; flex-wrap: wrap;
}
.site-nav__logo { display: inline-flex; align-items: center; }
.site-nav__logo img, .site-nav__logo svg { height: 26px; width: auto; display: block; }
.site-nav__links { display: flex; gap: 21px; list-style: none; margin: 0; padding: 0.5rem 0; flex-wrap: wrap; }
.site-nav__link {
  font-family: var(--font-brand); font-size: 16px; color: var(--eur-blue);
  text-decoration: none; white-space: nowrap; position: relative;
}
/* Animated underline (ported from the LG template): grows in from the left on
   hover; navy (--eur-blue), fully-rounded caps (border-radius = half-height).
   aria-current keeps the active link's line shown. */
.site-nav__link::after {
  content: ''; position: absolute; left: 0; bottom: -4px;
  width: 0; height: 2px; border-radius: 2px; background: var(--eur-blue);
  transition: width 300ms ease;
}
.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after { width: 100%; }

/* --- Page shell ----------------------------------------------------------- */
.container {
  width: 100%; max-width: var(--maxw-flow);
  margin: 0 auto; padding: clamp(32px, 6vw, 72px) var(--gutter);
  flex: 1 0 auto;
}
.container--wide { max-width: var(--maxw-page); }
.section-heading { margin-bottom: 1.25rem; }
.section-heading h1 { font-size: clamp(28px, 4vw, 42px); line-height: 1.02; }
.section-heading h2 { font-size: clamp(24px, 3.4vw, 42px); line-height: 1.02; }
.section-heading p { font-size: var(--text-body); line-height: 1.4; margin-top: 10px; color: var(--eur-ink); }

/* --- Hero (landing) — canonical stacked-grid pattern -----------------------
   A full-bleed <picture> field (the baked star+product+yellow image) and the
   HTML headline/sub/CTAs share one grid cell, layered via z-index. The yellow
   background is the interim/fallback field behind the picture. */
.hero {
  position: relative; display: grid; grid-template-areas: "stack";
  width: 100%; min-height: clamp(360px, 42vw, 540px);
  overflow: hidden; background: var(--eur-yellow);
}
.hero > * { grid-area: stack; }
.hero__image-wrapper { width: 100%; height: 100%; z-index: 0; }
.hero__image { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; }
.hero__content {
  z-index: 1; align-self: center; justify-self: start;
  max-width: min(600px, 100%);
  padding: clamp(28px, 5vw, 51px) var(--gutter);
  display: flex; flex-direction: column; gap: 20px; align-items: flex-start;
}
.hero__logo { width: min(410px, 80%); height: auto; }
/* Figma hero heading is 24px on both desktop and mobile — the old clamp scaled
   it up to 30px on wide desktop. Fixed 24px; mobile's 2-line wrap matches. */
.hero__title { font-size: 24px; line-height: 1.18; color: var(--eur-ink); max-width: 573px; }
.hero__body  { font-size: var(--text-body); line-height: 1.3; color: var(--eur-ink); max-width: 460px; }
.hero__cta   { display: flex; gap: 19px; flex-wrap: wrap; }
/* The star motif is an inline SVG placed as a backdrop; swappable per brand.
   fill="currentColor" on the path → colour comes from the token, no inline hex. */
.brand-star { position: absolute; z-index: 0; pointer-events: none; color: var(--eur-star); }

/* --- Disclaimer strip ----------------------------------------------------- */
.disclaimer {
  background: var(--eur-strip); padding: 14px var(--gutter);
  font-size: 12px; line-height: 1.3; color: var(--eur-ink);
}
/* Mirror the hero's full-bleed-with-gutter pattern: full-width grey strip, inner
   text flush-left at the same --gutter as the hero copy, capped by --maxw-page so
   it wraps within the container. margin:0 (not auto) keeps the left edge tracking
   the gutter at every width instead of centring on wide viewports. */
.disclaimer p { max-width: var(--maxw-page); margin: 0; text-align: left; }

/* --- Buttons -------------------------------------------------------------- */
.btn-primary, .btn-secondary, .btn-ghost {
  font-family: var(--font-brand); font-size: 16px; line-height: 1.22;
  border: 0; border-radius: var(--pill-radius); padding: 11px 22px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; text-decoration: none; white-space: nowrap; transition: filter .15s ease;
}
.btn-primary { background: var(--eur-red); color: var(--eur-white); }
.btn-secondary { background: var(--eur-yellow); color: var(--eur-ink); }
.btn-ghost { background: var(--eur-white); color: var(--eur-red-ink); border: 1px solid var(--eur-white); }
.btn-primary:hover, .btn-secondary:hover, .btn-ghost:hover { filter: brightness(0.94); }
.btn-primary:disabled, .btn-secondary:disabled { opacity: 0.55; cursor: not-allowed; filter: none; }

/* --- Cards ---------------------------------------------------------------- */
.card {
  background: var(--eur-white); border: 1px solid var(--eur-card-stroke);
  border-radius: var(--card-radius); padding: clamp(24px, 4vw, 36px);
  margin-bottom: 1.25rem;
  /* Flat per Figma — 1px border, no elevation (session 13c). Floating chrome
     (cookie banner, language picker) keeps its own shadow. */
}

/* --- Forms ---------------------------------------------------------------- */
.form-row { margin-bottom: 1.1rem; }
.form-row > label { display: block; font-size: 15px; font-weight: 400; margin-bottom: 6px; color: var(--eur-ink); }
.required { color: var(--eur-red); }
.form-input {
  width: 100%; min-height: 56px; padding: 14px 16px;
  font-family: var(--font-brand); font-size: 16px; color: var(--eur-ink);
  background: var(--eur-white); border: 1px solid var(--eur-card-stroke);
  border-radius: var(--input-radius); appearance: none;
}
.form-input::placeholder { color: var(--eur-muted); }
.form-input:focus { outline: 2px solid var(--eur-blue); outline-offset: 1px; border-color: var(--eur-blue); }
select.form-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%230c438f' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px; }
.field-hint { font-size: 13px; color: var(--eur-muted); margin-top: 6px; }
.form-error { color: var(--eur-danger); font-size: 14px; margin-top: 8px; }
.form-error[hidden] { display: none; }
label input[type="checkbox"] { margin-right: 8px; }
.checkbox-label a { color: var(--eur-blue); }
.name-warning { color: var(--eur-danger); font-size: 14px; margin-top: 8px;
  background: color-mix(in srgb, var(--eur-red) 8%, white); border-radius: var(--input-radius); padding: 10px 12px; }
.name-warning[hidden] { display: none; }

/* Upload zone */
.upload-zone {
  border: 2px dashed var(--eur-card-stroke); border-radius: var(--input-radius);
  padding: 28px 16px; text-align: center; cursor: pointer; color: var(--eur-blue);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.upload-zone:hover { border-color: var(--eur-blue); }
.upload-zone input[type="file"] { display: none; }
.upload-zone p { color: var(--eur-muted); font-size: 14px; }
.upload-status { font-size: 14px; margin-top: 8px; }
.upload-status--success { color: var(--eur-ok); }
.upload-status--error { color: var(--eur-danger); }

/* --- Wizard --------------------------------------------------------------- */
.wizard-steps {
  display: flex; flex-wrap: wrap; gap: 10px 24px; list-style: none; margin: 0 0 1.5rem;
  padding: 0; counter-reset: step;
}
.wizard-steps li {
  counter-increment: step; font-size: 14px; color: var(--eur-muted);
  display: flex; align-items: center; gap: 8px;
}
.wizard-steps li::before {
  content: counter(step); display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: var(--eur-strip);
  color: var(--eur-muted); font-weight: 800; font-size: 13px;
}
.wizard-steps li.is-active { color: var(--eur-blue); font-weight: 800; }
.wizard-steps li.is-active::before { background: var(--eur-red); color: var(--eur-white); }
.wizard-panel[hidden] { display: none; }
.wizard-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 1.25rem; }
.wizard-nav > span { flex: 0 0 auto; }

/* --- OTP ------------------------------------------------------------------ */
.otp-inputs { display: flex; gap: 10px; justify-content: flex-start; margin: 1rem 0; flex-wrap: wrap; }
.otp-input {
  width: 48px; height: 56px; text-align: center; font-size: 22px; font-family: var(--font-brand);
  border: 1px solid var(--eur-card-stroke); border-radius: var(--input-radius); color: var(--eur-ink);
}
.otp-input:focus { outline: 2px solid var(--eur-blue); border-color: var(--eur-blue); }

/* --- How-it-works grid ---------------------------------------------------- */
.how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.how-card {
  background: var(--eur-white); border: 1px solid var(--eur-card-stroke);
  border-radius: var(--card-radius); padding: 40px 32px; display: flex; flex-direction: column; gap: 18px;
}
.how-card__icon { width: 76px; height: 76px; color: var(--eur-blue); }
.how-card h3 { font-size: 25px; line-height: 1.2; }
.how-card p { font-size: var(--text-body); line-height: 1.4; color: var(--eur-ink); }

/* --- FAQ accordion -------------------------------------------------------- */
.faq { display: flex; flex-direction: column; gap: 13px; }
.faq details {
  background: var(--eur-white); border: 1px solid var(--eur-card-stroke);
  border-radius: var(--card-radius); padding: 24px 38px;
}
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; font-family: var(--font-brand); font-weight: 800; font-size: 20px; color: var(--eur-blue);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 21px; height: 12px; flex: 0 0 auto; transition: transform .2s ease;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='12' fill='none'%3E%3Cpath d='M1 1l9.5 9.5L20 1' stroke='%230c438f' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq p { font-size: var(--text-body); line-height: 1.4; color: var(--eur-ink); margin-top: 18px; }

/* --- Full-bleed sections (how-it-works / FAQ / track) --------------------- */
/* Section rhythm (Dan's rule): each section carries its full vertical gap on TOP
   only + zero bottom, so every seam is a single ~8vw (no summing/doubling).
   The track band — the last in-flow section — restores a matching bottom below,
   so its content isn't flush against the footer. */
.section { width: 100%; padding: var(--section-gap) var(--gutter) 0; }
.section__inner { max-width: var(--maxw-flow); margin: 0 auto; display: flex; flex-direction: column; gap: 36px; }
/* The track band is a COLOURED section, so its seam gap must sit OUTSIDE the
   colour: a top margin (white, = --section-gap) gives the 8vw seam before the
   yellow, while its top padding remains the band's internal spacing. This fixes
   the flush "See all FAQ's" (index/ended/registration-closed) AND the contact →
   track seam (support) in one rule — without the doubling a per-CTA bottom
   margin would cause where a CTA is instead followed by a white section. */
.section--track {
  position: relative; overflow: hidden;
  background-color: var(--eur-yellow);            /* fallback UNDER the bake: a failed image load degrades to the flat yellow, not white */
  background-image: url("../img/track-headers/track-mobile-390px.jpg");   /* 1x fallback for no-image-set browsers */
  background-image: image-set(
      url("../img/track-headers/track-mobile-390px.jpg") 1x,
      url("../img/track-headers/track-mobile-720px.jpg") 2x);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  margin-top: var(--section-gap); padding-bottom: var(--section-gap);
}
/* Bake switches at the SAME seams as the hero (769 / 1041 / 1440 / 1920) so the
   whole page changes composition at one width (1041 = the --nav-collapse seam).
   Tablet/desktop tiers are single 2x exports, so plain url() per tier. */
@media (min-width: 769px)  { .section--track { background-image: url("../img/track-headers/track-tablet-1280px.jpg"); } }
@media (min-width: 1041px) { .section--track { background-image: url("../img/track-headers/track-desktop-1440px.jpg"); } }
@media (min-width: 1440px) { .section--track { background-image: url("../img/track-headers/track-desktop-1920px.jpg"); } }
@media (min-width: 1920px) { .section--track { background-image: url("../img/track-headers/track-desktop-2560px.jpg"); } }
.section--track .section__inner { align-items: center; text-align: center; gap: 24px; }
.section--track h2 { color: var(--eur-red); font-size: clamp(28px, 3.4vw, 42px); }
.track-form { display: flex; flex-direction: column; gap: 20px; align-items: center; width: min(374px, 100%); }
.track-form .form-input { background: var(--eur-white); border: 0; }

/* --- Reason blocks (return-unavailable) -----------------------------------
   Visibility is driven by the `hidden` ATTRIBUTE (the IIFE sets block.hidden =
   false to reveal). Only style the revealed block via :not([hidden]) so author
   CSS never overrides the UA `[hidden]` default and un-hides every state. */
.state-page {
  max-width: 640px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.state-page > svg { color: var(--eur-red); width: 48px; height: 48px; }
.state-page h1 { font-size: clamp(26px, 3.6vw, 34px); }
.state-page p { font-size: 16px; line-height: 1.5; color: var(--eur-ink); }
.state-page #reference-value { color: var(--eur-blue); }
.reason-block { max-width: 620px; margin: 1rem auto; text-align: center; }
.reason-block:not([hidden]) { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.reason-block h1 { font-size: clamp(26px, 3.6vw, 34px); }
.reason-block p { font-size: 16px; line-height: 1.5; color: var(--eur-ink); }
.reason-support { margin-top: 1.5rem; }

/* --- State / confirmation panels ------------------------------------------ */
.state {
  max-width: 640px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.state__icon { width: 72px; height: 72px; color: var(--eur-red); }
.state h1 { font-size: clamp(26px, 3.6vw, 34px); }
.state p { font-size: 16px; line-height: 1.5; color: var(--eur-ink); }
.reference-badge {
  display: inline-block; background: var(--eur-strip); border-radius: var(--input-radius);
  padding: 10px 18px; font-weight: 800; font-size: 18px; color: var(--eur-blue); letter-spacing: 0.5px;
}
.state-card { /* landing state variant (closed/ended/full) */
  max-width: var(--maxw-flow); margin: clamp(32px,6vw,64px) auto; text-align: center;
}

/* --- Support / chat (reply.js builds .msg/.msg-staff/.msg-entrant) --------- */
.reply-state { text-align: center; padding: 1.5rem 0; }
.brand-line { font-size: 14px; color: var(--eur-muted); margin-bottom: 1rem; }
.reply-success { color: var(--eur-ok); font-size: 14px; margin-top: 8px; }
.footer-small { font-size: 12px; line-height: 1.3; color: var(--eur-footer-ink); }
.thread { display: flex; flex-direction: column; gap: 12px; margin: 1rem 0 1.5rem; max-height: 420px; overflow-y: auto; }
.thread-empty { color: var(--eur-muted); font-size: 14px; text-align: center; padding: 1rem 0; }
.msg { max-width: 80%; padding: 12px 16px; border-radius: 14px; }
.msg-meta { font-size: 12px; color: var(--eur-muted); margin-bottom: 4px; }
.msg-body { font-size: 15px; line-height: 1.45; }
.msg-staff { background: var(--eur-strip); color: var(--eur-ink); align-self: flex-start; }
.msg-entrant { background: var(--eur-blue); color: var(--eur-white); align-self: flex-end; }
.msg-entrant .msg-meta { color: rgba(255,255,255,0.75); }

/* --- Products list -------------------------------------------------------- */
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.product-item { border: 1px solid var(--eur-card-stroke); border-radius: var(--card-radius); padding: 16px; }
.products-empty { color: var(--eur-muted); }

/* --- Footer --------------------------------------------------------------- */
.site-footer {
  background: linear-gradient(to right, var(--eur-footer-from), var(--eur-footer-to));
  color: var(--eur-footer-ink); padding: clamp(40px, 6vw, 65px) var(--gutter);
  display: flex; flex-direction: column; gap: 19px; margin-top: auto;
}
/* align-self stops the flex-column's default stretch: without it the auto-width
   <img> stretched to the full footer width and the SVG (preserveAspectRatio
   xMidYMid) rendered the lockup CENTRED. flex-start keeps it left, intrinsic. */
.site-footer__logo { height: 56px; width: auto; align-self: flex-start; } /* 3-line member-of-group lockup */
.site-footer p { font-size: 12px; line-height: 1.3; color: var(--eur-footer-ink); }
.site-footer a { color: var(--eur-footer-ink); font-size: 12px; text-decoration: underline; margin-right: 10px; }

/* --- Cookie banner -------------------------------------------------------- */
#cookie-consent {
  display: none; position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 40; width: min(680px, calc(100% - 24px)); background: var(--eur-white);
  border: 1px solid var(--eur-card-stroke); border-radius: var(--card-radius);
  box-shadow: var(--shadow-pop); padding: 14px 18px;
  display: none; align-items: center; justify-content: space-between; gap: 14px;
}
#cookie-consent[style*="block"] { display: flex; }
#cookie-consent span { font-size: 14px; color: var(--eur-ink); }

/* --- Language picker (created by lang-picker.js) -------------------------- */
#language-picker {
  position: fixed; right: 16px; bottom: 16px; z-index: 30;
  background: var(--eur-white); border: 1px solid var(--eur-card-stroke);
  border-radius: var(--pill-radius); padding: 6px 10px; box-shadow: var(--shadow-card);
}
#language-picker select { border: 0; background: transparent; font-family: var(--font-brand); color: var(--eur-blue); }

/* --- Legal (terms / privacy) ---------------------------------------------- */
.legal { max-width: var(--maxw-flow); }
.legal h2 { font-size: 22px; margin: 1.5rem 0 0.5rem; }
.legal h3 { font-size: 18px; margin: 1.25rem 0 0.5rem; }
.legal p, .legal li { font-size: 15px; line-height: 1.6; color: var(--eur-ink); }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 720px) {
  .site-nav { min-height: 64px; }
  .wizard-nav { flex-direction: column-reverse; }
  .wizard-nav .btn-primary, .wizard-nav .btn-secondary { width: 100%; }
  .otp-input { width: 42px; height: 50px; font-size: 20px; }
}

/* ============================================================================
   PG-parity chrome (session 13b) — mobile nav drawer, how-it-works carousel,
   animated FAQ, footer lockup, rich cookie banner. Ported from the
   LG PG microsite, re-tokenised to the Euronics :root (no raw hex outside :root).
   ========================================================================== */

/* --- Mobile nav: hamburger + overlay + drawer ----------------------------- */
.site-nav__hamburger {
  display: none; background: none; border: 0; cursor: pointer; padding: 4px;
  position: relative; width: 31px; height: 24px; flex-shrink: 0; color: var(--eur-blue);
}
.site-nav__hamburger span {
  display: block; height: 2px; background: currentColor; border-radius: 15px;
  position: absolute; transition: transform 300ms ease, opacity 200ms ease;
}
.site-nav__hamburger span:nth-child(1) { width: 31px; top: 0;    left: 0; }
.site-nav__hamburger span:nth-child(2) { width: 25px; top: 11px; left: 6px; }
.site-nav__hamburger span:nth-child(3) { width: 31px; top: 22px; left: 0; }
.site-nav__hamburger.is-active span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.site-nav__hamburger.is-active span:nth-child(2) { opacity: 0; }
.site-nav__hamburger.is-active span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

.nav-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.3);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  z-index: 200; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 300ms ease, visibility 300ms ease; display: none;
}
.nav-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.nav-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 85vw; max-width: 400px;
  background: var(--eur-white); z-index: 300; transform: translateX(100%);
  transition: transform 300ms ease; overflow-y: auto; display: none;
}
.nav-drawer.is-open { transform: translateX(0); }
.nav-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 89px; padding-inline: var(--gutter);
  border-bottom: 1px solid var(--eur-nav-border); flex-shrink: 0;
}
.nav-drawer__close { background: none; border: 0; cursor: pointer; color: var(--eur-blue); padding: 4px; display: flex; }
.nav-drawer__links { list-style: none; margin: 0; padding: 8px 0; display: flex; flex-direction: column; }
.nav-drawer__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px var(--gutter); font-family: var(--font-brand); font-weight: 800;
  font-size: 16px; color: var(--eur-blue); text-decoration: none; transition: opacity .15s ease;
}
.nav-drawer__link::after {
  content: ''; display: block; width: 8px; height: 8px;
  border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
  transform: rotate(45deg); flex-shrink: 0;
}
.nav-drawer__link:hover { opacity: 0.7; }

/* --- How-it-works carousel (reuses the .how-card visual as snap items) ----- */
.steps__rail-wrap { position: relative; width: 100%; }
/* The how-it-works RAIL breaks out of the 900px content column toward the right
   page edge (up to --maxw-page) so more of the next card peeks — the JPEG's wider
   rail signals scrollability. Heading + FAQ + track stay in the 900px column.
   The negative right margin exactly consumes section__inner's right auto-margin
   (capped at the --maxw-page case), so it never causes horizontal page scroll. */
#how-it-works .steps__rail-wrap {
  margin-right: min(0px, calc((var(--maxw-flow) + 2 * var(--gutter) - min(100vw, var(--maxw-page))) / 2));
}
.steps__rail-wrap::before, .steps__rail-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 60px;
  pointer-events: none; z-index: 2; opacity: 0; transition: opacity .2s ease;
}
.steps__rail-wrap::before { left: 0;  background: linear-gradient(to left,  transparent, var(--eur-white)); }
.steps__rail-wrap::after  { right: 0; background: linear-gradient(to right, transparent, var(--eur-white)); }
.steps__rail-wrap.steps__rail-wrap--scrolled::before { opacity: 1; }
.steps__rail-wrap.steps__rail-wrap--more::after { opacity: 1; }
.steps__track {
  display: flex; gap: 18px; width: 100%; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none;
}
.steps__track::-webkit-scrollbar { display: none; }
/* Card width capped at 414px so the wider (broken-out) rail shows ~2.5 cards
   (card 3 peeking) rather than fewer, wider cards — matches the JPEG. */
.steps__track .how-card { flex: 0 0 min(414px, calc(46% - 9px)); scroll-snap-align: start; min-height: 289px; }
.step-card__title { font-size: 25px; line-height: 1.2; color: var(--eur-blue); }
.step-card__body  { font-size: var(--text-body); line-height: 1.4; color: var(--eur-ink); }
/* Plain blue chevrons, centered under the cards — no roundel (matches Figma). */
.steps__nav { display: flex; gap: 28px; justify-content: right; width: 100%; }
.steps__nav-btn {
  background: transparent; border: 0; padding: 6px; cursor: pointer; color: var(--eur-blue);
  display: inline-flex; align-items: center; justify-content: center; transition: opacity .15s ease;
}
.steps__nav-btn:hover { opacity: 0.7; }
.steps__nav-btn:disabled, .steps__nav-btn:disabled:hover { opacity: 0.3; cursor: not-allowed; }
.steps__nav-btn svg { width: 26px; height: 26px; display: block; }

/* --- FAQ animated accordion ----------------------------------------------- */
.faq__list { display: flex; flex-direction: column; gap: 13px; }
.faq-item { background: var(--eur-white); border: 1px solid var(--eur-card-stroke); border-radius: var(--card-radius); overflow: hidden; }
.faq-question {
  width: 100%; background: none; border: 0; cursor: pointer; padding: 24px 38px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--font-brand); font-weight: 800; font-size: 20px; line-height: 1.15;
  color: var(--eur-blue); text-align: left;
}
.faq-icon { position: relative; width: 24px; height: 24px; flex-shrink: 0; color: var(--eur-blue); display: inline-block; }
.faq-icon__plus, .faq-icon__minus { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity 200ms ease; }
.faq-icon__minus { opacity: 0; }
.faq-item.is-open .faq-icon__plus { opacity: 0; }
.faq-item.is-open .faq-icon__minus { opacity: 1; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 420ms ease; }
.faq-answer > p { padding: 0 38px 24px; font-size: var(--text-body); line-height: 1.4; color: var(--eur-ink); margin: 0; }
.faq__cta { align-self: center; margin-top: 8px; }

/* --- Footer: links list (the member-of-group lockup is baked into the SVG) - */
.site-footer__links { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.site-footer .site-footer__link { color: var(--eur-footer-ink); font-size: 12px; text-decoration: underline; margin-right: 0; }

/* --- Cookie banner: rich variant ------------------------------------------ */
.cookie-consent__inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; }
.cookie-consent__text { font-size: 14px; line-height: 1.4; color: var(--eur-ink); }
.cookie-consent__text a { color: var(--eur-blue); }
.cookie-consent__btn {
  flex-shrink: 0; font-family: var(--font-brand); font-size: 16px; font-weight: 800;
  border: 0; border-radius: var(--pill-radius); padding: 11px 22px; cursor: pointer;
  background: var(--eur-yellow); color: var(--eur-ink);
}
.cookie-consent__btn:hover { filter: brightness(0.94); }

/* (back-to-top removed batch-wide, session 13b desktop tweak 4) */

/* --- Responsive: reveal the drawer + collapse desktop links (drawer pages
   only, scoped via :has so pages without a hamburger keep their inline nav
   until the batch adds their drawer) ---------------------------------------- */
/* Nav → hamburger. Literal MUST equal --nav-collapse (1040px) — var() is not
   allowed in a @media condition. Both the hide-links and show-hamburger rules
   live in this one block so they can never disagree. */
@media (max-width: 1040px) {
  .site-nav:has(.site-nav__hamburger) .site-nav__links { display: none; }
  .site-nav__hamburger { display: flex; align-items: center; }
  .nav-overlay { display: block; }
  .nav-drawer { display: flex; flex-direction: column; }
}

@media (max-width: 900px) {
  .steps__track .how-card { flex: 0 0 calc(88% - 9px); } /* 1-up + peek on phones */
}

/* ============================================================================
   Recipe components (session 13b batch) — reference bar, acknowledgement
   checklist, consent checkboxes, terminal-card sub-heading, product summary
   inset, mobile action stacks. Shared → every page inherits.
   ========================================================================== */

/* --- Reference bar: grey strip under nav on post-lookup / terminal pages --- */
.reference-bar { background: var(--eur-strip); padding: 12px var(--gutter); }
.reference-bar__inner {
  max-width: var(--maxw-page); margin: 0 auto; text-align: right;
  font-size: var(--text-body); color: var(--eur-ink);
}
.reference-bar__inner strong { color: var(--eur-blue); }
@media (max-width: 720px) { .reference-bar__inner { text-align: center; } }

/* --- Terminal-page card sub-heading ("Next steps…") ----------------------- */
.card__subheading { font-size: 18px; color: var(--eur-blue); font-weight: var(--weight-heavy); margin-bottom: 8px; }

/* --- Acknowledgement checklist (return-checklist: all-must-tick) ----------- */
.checklist { display: flex; flex-direction: column; gap: 16px; }
.checklist-item { display: flex; gap: 14px; align-items: flex-start; }
.checklist-item input[type="checkbox"] { width: 22px; height: 22px; margin-top: 2px; flex-shrink: 0; accent-color: var(--eur-blue); }
.checklist-item__text h3 { font-size: 18px; color: var(--eur-blue); margin-bottom: 4px; }
.checklist-item__text p { font-size: var(--text-body); line-height: 1.4; color: var(--eur-ink); }
@media (max-width: 720px) {
  .checklist-item { flex-direction: column; border: 1px solid var(--eur-card-stroke); border-radius: var(--card-radius); padding: 16px; }
  .checklist-item input[type="checkbox"] { order: 2; margin-top: 8px; }
}

/* --- Consent checkboxes (return-form, reupload, support, register) --------- */
.consent-list { display: flex; flex-direction: column; gap: 14px; }
.consent-item {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: var(--text-body); line-height: 1.4; color: var(--eur-ink);
}
.consent-item input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--eur-blue); }
.consent-item a { color: var(--eur-blue); }

/* --- Product summary inset (return-form) ---------------------------------- */
.summary-inset { background: var(--eur-strip); border-radius: var(--input-radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.summary-inset__row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--text-body); }
.summary-inset__row strong { color: var(--eur-blue); }

/* --- Mobile action stack: T&C / Privacy link-buttons + primary (LG pattern) - */
.consent-mobile-actions { display: none; }
@media (max-width: 720px) {
  .consent-mobile-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
  .consent-mobile-actions .btn-primary,
  .consent-mobile-actions .btn-secondary,
  .consent-mobile-actions .btn-ghost { width: 100%; }
}

/* return-unavailable: reason blocks sit LEFT-aligned inside the card (not the
   centered state-page default) to match the Figma. */
.card .reason-block:not([hidden]) { text-align: left; align-items: stretch; margin: 0; }

/* --- Mobile hero reflow (≤768px, session 13b item 3+5) ---------------------
   The baked mobile hero export (hero-mobile-390px/-720px.jpg) already contains
   the BUY&TRY lockup AND the product art. So on mobile the image becomes its own
   stacked block at the top (natural aspect — never cover-cropped, so the baked
   lockup+product stay fully visible), the HTML lockup is hidden (it's in the
   image — rendering both would duplicate it), and heading→body→buttons stack
   below on the yellow field with full-width buttons. Desktop is unchanged. */
/* COMPACT layout — the single switch, tied to --nav-collapse (1040px). At/below
   it: hamburger nav AND the stacked hero (image block above, text below,
   full-width buttons) together, so the copy never overlaps the baked product
   art. Above it: full nav AND the overlay hero. One threshold, two layouts —
   no half-state. (Literal MUST equal --nav-collapse; var() can't sit in a
   @media condition.) */
@media (max-width: 1040px) {
  .hero { display: flex; flex-direction: column; min-height: 0; }
  .hero__image-wrapper { height: auto; }
  .hero__image { height: auto; object-fit: contain; }
  .hero__logo { display: none; }                 /* both stacked bakes (mobile ≤768 and the recomposed tablet 769–1040) now carry the BUY&TRY lockup */
  .hero__content { max-width: 100%; align-self: stretch; padding-top: 24px; }
  .hero__cta { flex-direction: column; align-items: stretch; width: 100%; }
  .hero__cta .btn-primary, .hero__cta .btn-ghost, .hero__cta .btn-secondary { width: 100%; }
}