/* ============ Design tokens ============ */
  :root {
    --fjord:  #1B2A32;  /* ink — headings, header/footer, primary text */
    --birch:  #F4F1E9;  /* warm paper background */
    --snow:   #FFFFFF;  /* card surfaces */
    --alder:  #E3DDCE;  /* borders, dividers */
    --basalt: #5C6B72;  /* secondary text */
    --krona:  #0E8A5B;  /* accent — LOWEST PRICE & SAVINGS ONLY */
    --krona-tint: #E5F2EC;

    --font-display: "Archivo", sans-serif;
    --font-body: "Instrument Sans", sans-serif;

    --radius: 10px;
    --radius-sm: 6px;
    --shadow: 0 1px 2px rgba(27,42,50,.06), 0 4px 16px rgba(27,42,50,.05);

    /* Motion tokens — strong custom curves (built-in CSS easings are too weak).
       ease-out for anything entering or responding to the user; ease-in-out for
       elements already on screen moving between states. UI stays under 300ms. */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  /* Reduced motion = gentler, not zero: keep the short opacity/color fades that aid
     comprehension, drop every transform-based movement and one-shot animation. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation: none !important;
      transition-property: opacity, color, background-color, border-color, box-shadow !important;
      transition-duration: 120ms !important;
    }
  }

  body {
    font-family: var(--font-body);
    background: var(--birch);
    color: var(--fjord);
    font-size: 15px;
    line-height: 1.55;
    overflow-x: hidden; /* wide content scrolls inside its own container, never the page */
    -webkit-tap-highlight-color: transparent; /* we provide our own press feedback */
  }

  a { color: inherit; }

  :is(a, button, input, select, [tabindex]):focus-visible {
    outline: 3px solid var(--fjord);
    outline-offset: 2px;
    border-radius: 2px;
  }
  /* dark chrome (header, footer, hero) — a fjord outline is invisible there */
  :is(header, footer, .hero) :is(a, button, input, select, [tabindex]):focus-visible {
    outline-color: #FFFFFF;
  }

  h1, h2, h3, .display {
    font-family: var(--font-display);
    font-stretch: 110%;
    letter-spacing: -0.01em;
    line-height: 1.2; /* headings want tighter leading than the 1.55 body */
  }
  h1, h2 { text-wrap: balance; }

  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

  .price-num { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-stretch: 110%; }

  /* ============ Strength dots — signature element ============ */
  .dots { display: inline-flex; gap: 4px; align-items: center; }
  .dots i {
    width: 9px; height: 9px; border-radius: 50%;
    border: 1.5px solid var(--fjord);
    background: transparent;
  }
  .dots i.on { background: var(--fjord); }
  .dots.lg i { width: 12px; height: 12px; }

  /* ============ Header ============ */
  header.site { background: var(--fjord); color: var(--birch); }
  .header-in { display: flex; align-items: center; gap: 28px; padding-top: 16px; padding-bottom: 16px; flex-wrap: wrap; }
  .logo {
    font-family: "Poppins", sans-serif;
    font-weight: 400; font-size: 22px;
    text-decoration: none; letter-spacing: 0.01em; text-transform: lowercase;
    display: flex; align-items: center; gap: 9px;
  }
  .logo svg { display: block; }
  nav.main { display: flex; gap: 22px; margin-left: auto; flex-wrap: wrap; }
  nav.main a {
    text-decoration: none; font-size: 14px; font-weight: 500;
    color: rgba(244,241,233,.85); padding: 2px 0;
  }
  nav.main a:hover { color: #fff; }
  nav.main a.active { color: #fff; box-shadow: 0 2px 0 var(--birch); }
  .age-badge {
    font-family: var(--font-display); font-weight: 700; font-size: 12px;
    border: 1.5px solid rgba(244,241,233,.4); border-radius: 4px;
    padding: 2px 7px; color: rgba(244,241,233,.85);
  }
  #langSwitch {
    background: transparent; color: rgba(244,241,233,.85);
    border: 1.5px solid rgba(244,241,233,.4); border-radius: 4px;
    padding: 3px 6px; font-family: var(--font-display); font-weight: 700;
    font-size: 12px; cursor: pointer;
  }
  #langSwitch option { color: var(--fjord); }

  /* ============ Mobile header ============ */
  @media (max-width: 720px) {
    .header-in { gap: 10px; padding-top: 12px; padding-bottom: 12px; }
    .header-in .logo { margin-right: auto; font-size: 19px; }
    .header-in .logo svg { width: 22px; height: 22px; }
    nav.main {
      order: 5; width: 100%; margin-left: 0;
      justify-content: space-between; gap: 4px;
      border-top: 1px solid rgba(244,241,233,.15); padding-top: 10px;
    }
    nav.main a { font-size: 13px; padding: 4px 6px; }
    #langSwitch { padding: 4px 5px; font-size: 11px; }
    .age-badge { font-size: 11px; padding: 2px 6px; }
    .offer-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .offer-card table.offers { min-width: 620px; }
  }

  /* ============ Hero / search ============ */
  .hero { background: var(--fjord); color: var(--birch); padding: 40px 0 56px; }
  .hero h1 { font-size: clamp(26px, 4vw, 40px); font-weight: 700; max-width: 620px; letter-spacing: -0.02em; line-height: 1.15; }
  .hero p.sub { margin-top: 10px; color: rgba(244,241,233,.7); font-size: 15px; }

  /* ============ Neutral country selector ============ */
  .selector-hero { background: var(--fjord); color: var(--birch); padding: 58px 0 68px; }
  .selector-hero .kicker { color: rgba(244,241,233,.62); }
  .selector-hero h1 {
    max-width: 760px; margin-top: 8px; font-size: clamp(34px, 5vw, 58px);
    line-height: 1.04; letter-spacing: -.035em;
  }
  .selector-hero .lead { max-width: 680px; margin-top: 18px; color: rgba(244,241,233,.76); font-size: 17px; }
  .country-choice-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 34px;
  }
  .country-choice {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
    min-height: 92px; padding: 18px; color: var(--fjord); background: var(--snow);
    border: 1px solid rgba(244,241,233,.2); border-radius: var(--radius); text-decoration: none;
    box-shadow: var(--shadow); transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
  }
  .country-choice .flag { font-size: 28px; line-height: 1; }
  .country-choice strong { display: block; font-family: var(--font-display); font-size: 15px; }
  .country-choice small { display: block; margin-top: 2px; color: var(--basalt); font-size: 12px; }
  .country-choice .arrow { color: var(--basalt); font-size: 18px; }
  @media (hover: hover) and (pointer: fine) {
    .country-choice:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
  }
  .selector-note { padding: 28px 0 34px; color: var(--basalt); }
  .selector-note strong { color: var(--fjord); }
  @media (max-width: 900px) { .country-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 520px) {
    .selector-hero { padding: 38px 0 48px; }
    .country-choice-grid { grid-template-columns: 1fr; gap: 10px; }
    .country-choice { min-height: 76px; padding: 14px 16px; }
  }

  /* ============ Country SEO / local market guide ============ */
  .country-seo { margin-top: 54px; padding: 66px 0 72px; background: var(--fjord); color: var(--birch); }
  .country-seo .kicker { color: var(--krona-soft); }
  .country-seo-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr); gap: 48px; align-items: start; }
  .country-seo-copy h2, .city-panel h2 { max-width: 760px; margin-top: 8px; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.08; letter-spacing: -.025em; }
  .country-seo-copy .lead { max-width: 760px; margin-top: 18px; color: rgba(244,241,233,.86); font-size: 17px; line-height: 1.7; }
  .country-seo-copy p:not(.lead) { max-width: 760px; margin-top: 14px; color: rgba(244,241,233,.72); line-height: 1.72; }
  .country-seo-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
  .country-seo-actions a { display: inline-flex; align-items: center; min-height: 42px; padding: 10px 15px; border: 1px solid rgba(244,241,233,.24); border-radius: 999px; color: var(--birch); font-family: var(--font-display); font-size: 13px; font-weight: 700; text-decoration: none; }
  .country-seo-actions a:first-child { background: var(--birch); color: var(--fjord); border-color: var(--birch); }
  .country-seo-facts { padding: 24px; background: rgba(244,241,233,.07); border: 1px solid rgba(244,241,233,.14); border-radius: var(--radius); }
  .country-seo-facts h3 { font-size: 17px; line-height: 1.3; }
  .seo-fact-list { display: grid; gap: 16px; margin-top: 20px; }
  .seo-fact { padding-top: 16px; border-top: 1px solid rgba(244,241,233,.13); }
  .seo-fact:first-child { padding-top: 0; border-top: 0; }
  .seo-fact strong { display: block; color: var(--krona-soft); font-family: var(--font-display); font-size: 24px; line-height: 1.1; }
  .seo-fact span { display: block; margin-top: 5px; color: rgba(244,241,233,.67); font-size: 12px; line-height: 1.4; }
  .city-panel { margin-top: 48px; padding-top: 42px; border-top: 1px solid rgba(244,241,233,.15); }
  .city-panel h2 { font-size: clamp(23px, 3vw, 34px); }
  .city-panel > p { max-width: 850px; margin-top: 13px; color: rgba(244,241,233,.72); line-height: 1.7; }
  .city-list { display: flex; flex-wrap: wrap; gap: 9px; margin: 22px 0 0; padding: 0; list-style: none; }
  .city-list li { padding: 9px 13px; border-radius: 999px; background: rgba(244,241,233,.09); border: 1px solid rgba(244,241,233,.15); color: var(--birch); font-family: var(--font-display); font-size: 13px; font-weight: 600; }
  .city-panel .city-note { margin-top: 18px; color: rgba(244,241,233,.54); font-size: 12px; }
  @media (hover:hover) and (pointer:fine) { .country-seo-actions a:hover { border-color: var(--krona-soft); } }
  @media (max-width: 820px) {
    .country-seo { padding: 48px 0 54px; }
    .country-seo-grid { grid-template-columns: 1fr; gap: 30px; }
    .country-seo-facts { display: grid; grid-template-columns: 1fr; }
  }
  @media (max-width: 520px) {
    .country-seo { margin-top: 40px; }
    .country-seo-copy .lead { font-size: 15px; }
    .country-seo-facts { padding: 20px; }
    .city-list { gap: 7px; }
    .city-list li { padding: 8px 10px; font-size: 12px; }
  }
  .smart-search { position: relative; max-width: 640px; margin-top: 26px; z-index: 20; }
  .searchbar {
    display: flex; width: 100%;
    background: var(--snow); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow);
  }
  .searchbar input {
    flex: 1; border: 0; padding: 16px 18px; font-size: 16px;
    font-family: var(--font-body); color: var(--fjord); background: transparent;
    min-width: 0;
  }
  .searchbar input::placeholder { color: var(--basalt); }
  .searchbar button {
    border: 0; background: var(--fjord); color: var(--birch);
    font-family: var(--font-display); font-weight: 700; font-size: 15px;
    padding: 0 26px; cursor: pointer; margin: 6px; border-radius: var(--radius-sm);
  }
  .searchbar:focus-within { box-shadow: 0 0 0 3px rgba(244,241,233,.24), var(--shadow); }
  .search-results {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    background: var(--snow); color: var(--fjord); border: 1px solid var(--alder);
    border-radius: var(--radius); box-shadow: 0 18px 45px rgba(10,24,31,.24);
    overflow: hidden; max-height: min(510px, 65vh); overflow-y: auto;
  }
  .search-results[hidden] { display: none; }
  .search-group-label {
    display: block; padding: 11px 14px 6px; color: var(--basalt);
    font-family: var(--font-display); font-size: 10px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
  }
  .search-result {
    display: flex; align-items: center; gap: 12px; padding: 9px 14px;
    text-decoration: none; border-top: 1px solid rgba(227,221,206,.7);
  }
  .search-result:first-of-type { border-top: 0; }
  .search-result:hover, .search-result.active { background: var(--krona-tint); }
  .search-result .search-img { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; }
  .search-result .search-copy { min-width: 0; flex: 1; }
  .search-result .search-name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 1.25; }
  .search-result .search-meta { display: block; color: var(--basalt); font-size: 12px; margin-top: 2px; }
  .search-result .search-price { margin-left: auto; text-align: right; white-space: nowrap; font-size: 13px; }
  .search-result .search-price strong { display: block; font-family: var(--font-display); color: var(--krona); font-size: 15px; }
  .search-result.search-brand { padding-block: 11px; }
  .search-result.search-all { justify-content: space-between; font-family: var(--font-display); font-weight: 700; background: var(--birch); }
  .search-empty { padding: 20px 16px; color: var(--basalt); font-size: 14px; }
  @media (max-width: 540px) {
    .smart-search { margin-top: 22px; }
    .searchbar button { padding: 0 16px; }
    .search-result .search-price { display: none; }
  }

  /* ============ Sections ============ */
  section.block { padding: 44px 0 8px; }
  .sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; gap: 16px; flex-wrap: wrap; }
  .sec-head h2 { font-size: 20px; font-weight: 700; }
  .sec-head a.more { font-size: 13px; font-weight: 600; color: var(--basalt); text-decoration: none; }
  .sec-head a.more:hover { text-decoration: underline; }
  .kicker {
    display: block; font-family: var(--font-display); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .14em; color: var(--basalt); margin-bottom: 4px;
  }
  .page-title { padding: 34px 0 6px; }
  .page-title h1 { font-size: clamp(24px, 3.4vw, 32px); }
  .page-title p { color: var(--basalt); margin-top: 6px; max-width: 640px; }

  /* ============ Product cards ============ */
  .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  @media (max-width: 900px) { .grid4 { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .grid4 { grid-template-columns: 1fr; } }

  .card {
    background: var(--snow); border: 1px solid var(--alder); border-radius: var(--radius);
    padding: 16px; position: relative; display: flex; flex-direction: column;
    text-decoration: none; transition: box-shadow 150ms var(--ease-out), transform 150ms var(--ease-out);
  }
  /* hover lifts only for real pointers — touch devices trigger sticky false hovers */
  @media (hover: hover) and (pointer: fine) {
    .card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
  }
  .card:active { transform: scale(0.99); }
  .card .img { display: flex; justify-content: center; padding: 10px 0 14px; }
  .card .brand { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--basalt); }
  .card .name { font-family: var(--font-display); font-weight: 600; font-size: 15px; margin: 2px 0 8px; line-height: 1.3; }
  .card .meta { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
  .card .meta .mg { font-size: 12px; color: var(--basalt); font-weight: 500; }
  .card .pricing { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
  .card .from { font-size: 11px; color: var(--basalt); display: block; }
  .card .price { font-size: 22px; font-weight: 800; line-height: 1.1; }
  .card .price.saving { color: var(--krona); }
  .card .ppp { font-size: 12px; color: var(--basalt); text-align: right; }
  .card .oos-note { font-size: 12px; color: var(--basalt); font-weight: 600; }

  .drop-badge {
    position: absolute; top: 12px; left: 12px;
    background: var(--krona); color: #fff;
    font-family: var(--font-display); font-weight: 700; font-size: 12px;
    padding: 3px 8px; border-radius: 4px; z-index: 2;
  }
  .compare-btn {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    width: 30px; height: 30px; border-radius: var(--radius-sm);
    border: 1px solid var(--alder); background: var(--snow); color: var(--basalt);
    font-size: 16px; line-height: 1; cursor: pointer; font-weight: 600;
  }
  .compare-btn:hover { border-color: var(--basalt); color: var(--fjord); }
  .compare-btn[aria-pressed="true"] { background: var(--fjord); color: var(--birch); border-color: var(--fjord); }

  /* ============ Strength tiles ============ */
  .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  @media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
  .tile {
    background: var(--snow); border: 1px solid var(--alder); border-radius: var(--radius);
    padding: 20px 18px; text-decoration: none; transition: box-shadow 150ms var(--ease-out), transform 150ms var(--ease-out);
  }
  @media (hover: hover) and (pointer: fine) {
    .tile:hover { box-shadow: var(--shadow); }
  }
  .tile:active { transform: scale(0.99); }
  .tile .t-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin: 10px 0 2px; }
  .tile .t-range { font-size: 13px; color: var(--basalt); }

  /* ============ Brand strip & brand cards ============ */
  .brand-strip { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 10px; }
  .brand-chip {
    font-family: var(--font-display); font-weight: 700; font-size: 14px;
    background: var(--snow); border: 1px solid var(--alder); border-radius: 99px;
    padding: 9px 18px; text-decoration: none; transition: border-color .15s ease;
  }
  .brand-chip:hover { border-color: var(--fjord); }

  .list-card {
    background: var(--snow); border: 1px solid var(--alder); border-radius: var(--radius);
    padding: 18px; text-decoration: none; display: flex; gap: 14px; align-items: center;
    transition: box-shadow .15s ease;
  }
  .list-card:hover { box-shadow: var(--shadow); }
  .list-card .lc-body h3 { font-size: 16px; }
  .list-card .lc-body p { font-size: 13px; color: var(--basalt); }
  .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  @media (max-width: 860px) { .grid3 { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 540px) { .grid3 { grid-template-columns: 1fr; } }

  /* ============ Filter bar ============ */
  .filterbar {
    background: var(--snow); border: 1px solid var(--alder); border-radius: var(--radius);
    padding: 14px 16px; margin: 18px 0 22px;
    display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end;
  }
  .filterbar label.f { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--basalt); font-family: var(--font-display); }
  .filterbar select, .filterbar input[type="number"], .filterbar input[type="search"] {
    font-family: var(--font-body); font-size: 14px; color: var(--fjord);
    border: 1px solid var(--alder); border-radius: var(--radius-sm);
    padding: 8px 10px; background: var(--birch); min-width: 120px;
  }
  .filterbar input[type="search"] { min-width: 170px; }
  .filterbar .chk { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--fjord); padding: 9px 0; }
  .filterbar .chk input { width: 16px; height: 16px; accent-color: var(--fjord); }
  .filterbar .reset {
    font-size: 13px; font-weight: 600; color: var(--basalt);
    background: none; border: 0; cursor: pointer; text-decoration: underline; padding: 9px 2px;
  }
  .result-count { font-size: 13px; color: var(--basalt); margin: -8px 0 16px; }

  .empty {
    background: var(--snow); border: 1px dashed var(--alder); border-radius: var(--radius);
    padding: 40px; text-align: center; color: var(--basalt);
  }
  .empty a { font-weight: 600; }

  /* ============ Breadcrumbs ============ */
  .crumbs { padding: 18px 0 0; font-size: 13px; color: var(--basalt); }
  .crumbs a { color: var(--basalt); text-decoration: none; }
  .crumbs a:hover { text-decoration: underline; }
  .crumbs span.sep { margin: 0 6px; color: var(--alder); }

  /* ============ Product header ============ */
  .prod-head {
    display: grid; grid-template-columns: 280px 1fr; gap: 36px;
    padding: 28px 0 36px; align-items: start;
  }
  @media (max-width: 720px) { .prod-head { grid-template-columns: 1fr; } }
  .prod-img {
    background: var(--snow); border: 1px solid var(--alder); border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center; padding: 34px;
  }
  .prod-info .brand-link { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--basalt); text-decoration: none; }
  .prod-info h1 { font-size: clamp(24px, 3.4vw, 34px); font-weight: 700; margin: 4px 0 14px; }
  .spec-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
  .spec-badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--snow); border: 1px solid var(--alder); border-radius: 99px;
    font-size: 13px; font-weight: 500; padding: 6px 13px;
  }
  button.spec-badge { cursor: pointer; font-family: var(--font-body); }
  button.spec-badge[aria-pressed="true"] { background: var(--fjord); color: var(--birch); border-color: var(--fjord); }
  a.spec-badge { text-decoration: none; }
  a.spec-badge:hover { border-color: var(--basalt); }

  /* ============ FAQ (citation-ready Q&A) ============ */
  .faq { max-width: 680px; }
  .faq h3 { font-size: 15px; margin: 16px 0 4px; }
  .faq p { font-size: 14px; color: var(--basalt); }
  .best-line {
    background: var(--krona-tint); border: 1px solid var(--krona);
    border-radius: var(--radius); padding: 16px 18px;
    display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 16px;
  }
  .best-line .lbl { grid-column: 1 / -1; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--krona); }
  .best-line .big { font-size: 32px; font-weight: 800; color: var(--krona); line-height: 1; white-space: nowrap; }
  .best-line .per { font-size: 14px; color: var(--fjord); line-height: 1.45; }
  .best-line .per strong { font-weight: 700; }
  .best-line .saving-note { display: block; color: var(--krona); font-weight: 600; font-size: 12px; margin-top: 2px; }
  .best-line.none { background: var(--snow); border-color: var(--alder); }
  .best-line.none .lbl, .best-line.none .big { color: var(--basalt); }

  .offer-controls {
    display: flex; justify-content: space-between; align-items: end; gap: 18px;
    margin-bottom: 14px; flex-wrap: wrap;
  }
  .offer-controls h2 { font-size: 20px; }
  .offer-controls p { color: var(--basalt); font-size: 13px; margin-top: 2px; }
  .qty-control { display: flex; flex-direction: column; gap: 5px; }
  .qty-control .qty-label {
    color: var(--basalt); font-family: var(--font-display); font-size: 10px;
    font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  }
  .qty-toggle {
    display: inline-flex; padding: 3px; background: var(--snow);
    border: 1px solid var(--alder); border-radius: 8px;
  }
  .qty-toggle button {
    min-width: 78px; padding: 8px 12px; border: 0; border-radius: 5px;
    background: transparent; color: var(--basalt); cursor: pointer;
    font-family: var(--font-display); font-weight: 700; font-size: 13px;
  }
  .qty-toggle button:hover { color: var(--fjord); }
  .qty-toggle button[aria-pressed="true"] { background: var(--fjord); color: var(--birch); }
  .old-price { color: var(--basalt); text-decoration: line-through; font-size: 11px; display: block; }
  .discount-note { color: var(--krona); font-size: 11px; font-weight: 600; display: block; }

  /* ============ Offer table — THE HERO ============ */
  .offer-card { background: var(--snow); border: 1px solid var(--alder); border-radius: var(--radius); overflow: hidden; }
  table.offers { width: 100%; border-collapse: collapse; }
  table.offers th {
    font-family: var(--font-display); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em; color: var(--basalt);
    text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--alder);
  }
  table.offers td { padding: 16px; border-bottom: 1px solid var(--alder); vertical-align: middle; }
  table.offers tr:last-child td { border-bottom: 0; }
  table.offers .num { text-align: right; }
  table.offers th.num { text-align: right; }

  .retailer-cell { display: flex; align-items: center; gap: 10px; font-weight: 600; }
  .retailer-cell a { text-decoration: none; }
  .retailer-cell a:hover { text-decoration: underline; }
  .retailer-logo {
    width: 34px; height: 34px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 800; font-size: 14px;
    color: #fff; flex-shrink: 0;
  }
  .ship { font-size: 13px; color: var(--basalt); }
  .total { font-size: 20px; font-weight: 800; }
  .stock { font-size: 12px; font-weight: 600; }
  .stock.in { color: var(--basalt); }
  .stock.in::before { content: "●"; color: var(--krona); margin-right: 5px; font-size: 10px; }
  .stock.out { color: var(--basalt); }
  .stock.out::before { content: "●"; color: var(--alder); margin-right: 5px; font-size: 10px; }

  .to-store {
    display: inline-block; text-decoration: none; border: 0; cursor: pointer;
    font-family: var(--font-display); font-weight: 700; font-size: 13px;
    background: var(--fjord); color: var(--birch);
    padding: 9px 16px; border-radius: var(--radius-sm); white-space: nowrap;
  }
  @media (hover: hover) and (pointer: fine) {
    .to-store:hover { background: #2A3E49; }
  }

  tr.lowest { background: var(--krona-tint); box-shadow: inset 4px 0 0 var(--krona); }
  tr.lowest .total, tr.lowest .unit-price { color: var(--krona); }
  .unit-price { font-size: 17px; font-weight: 800; }
  .lowest-tag {
    display: inline-block; background: var(--krona); color: #fff;
    font-family: var(--font-display); font-weight: 700; font-size: 10px;
    text-transform: uppercase; letter-spacing: .08em;
    padding: 2px 7px; border-radius: 3px; margin-left: 8px; vertical-align: 2px;
  }
  tr.oos { opacity: .65; } /* .45 dropped text below readable contrast */
  tr.oos .to-store { background: var(--alder); color: var(--basalt); pointer-events: none; }

  .table-note { font-size: 12px; color: var(--basalt); padding: 12px 16px; border-top: 1px solid var(--alder); background: var(--birch); }

  /* Offer table → stacked cards on mobile */
  @media (max-width: 640px) {
    .best-line { grid-template-columns: 1fr; }
    .best-line .lbl { grid-column: auto; }
    .offer-controls { align-items: stretch; }
    .qty-control, .qty-toggle { width: 100%; }
    .qty-toggle button { flex: 1; min-width: 0; }
    /* cancel the 720px scroll-table rules: stacked cards must fit the screen */
    .offer-card { overflow-x: visible; }
    .offer-card table.offers { min-width: 0; }
    table.offers, table.offers tbody { display: block; }
    table.offers thead { display: none; }
    table.offers tr {
      display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
      padding: 14px 16px; border-bottom: 1px solid var(--alder);
    }
    table.offers tr.lowest { box-shadow: inset 4px 0 0 var(--krona); }
    table.offers td { display: block; padding: 0; border: 0; }
    table.offers td.c-retailer { grid-column: 1 / -1; margin-bottom: 4px; }
    table.offers td.c-price { grid-column: 1; }
    table.offers td.c-price::before { content: "Price per can"; display: block; color: var(--basalt); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
    table.offers td.c-ship { grid-column: 1; align-self: end; }
    table.offers td.c-total { grid-column: 1; }
    table.offers td.c-total::before { content: "Order total"; display: block; color: var(--basalt); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
    table.offers td.c-stock { grid-column: 1; }
    table.offers td.c-cta { grid-column: 2; grid-row: 2 / span 4; align-self: center; }
    table.offers .num { text-align: left; }
  }

  /* ============ Price chart ============ */
  .chart-card { background: var(--snow); border: 1px solid var(--alder); border-radius: var(--radius); padding: 20px; }
  .chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; flex-wrap: wrap; gap: 10px; }
  .chart-head h3 { font-size: 16px; }
  .range-toggle { display: inline-flex; background: var(--birch); border: 1px solid var(--alder); border-radius: var(--radius-sm); padding: 3px; }
  .range-toggle button {
    border: 0; background: transparent; cursor: pointer;
    font-family: var(--font-display); font-weight: 700; font-size: 12px;
    padding: 5px 14px; border-radius: 4px; color: var(--basalt);
  }
  .range-toggle button[aria-pressed="true"] { background: var(--fjord); color: var(--birch); }
  .chart-stats { display: flex; gap: 28px; margin-top: 14px; flex-wrap: wrap; }
  .chart-stat .v { font-size: 20px; font-weight: 800; }
  .chart-stat .v.saving { color: var(--krona); }
  .chart-stat .k { font-size: 12px; color: var(--basalt); }

  .two-col { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }
  @media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

  /* ============ Spec / info tables ============ */
  .spec-card { background: var(--snow); border: 1px solid var(--alder); border-radius: var(--radius); overflow: hidden; }
  .spec-card h3 { font-size: 15px; padding: 16px 18px 0; }
  table.specs { width: 100%; border-collapse: collapse; margin-top: 10px; }
  table.specs td { padding: 10px 18px; border-top: 1px solid var(--alder); font-size: 14px; }
  table.specs td:first-child { color: var(--basalt); width: 45%; }
  table.specs td:last-child { font-weight: 500; }

  /* ============ Compare page ============ */
  .compare-wrap { overflow-x: auto; }
  table.compare {
    width: 100%; border-collapse: collapse; background: var(--snow);
    border: 1px solid var(--alder); border-radius: var(--radius); overflow: hidden; min-width: 640px;
  }
  table.compare th, table.compare td { padding: 13px 16px; border-bottom: 1px solid var(--alder); text-align: left; vertical-align: top; font-size: 14px; }
  table.compare tr:last-child :is(td,th) { border-bottom: 0; }
  table.compare th.rowlab {
    font-family: var(--font-display); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em; color: var(--basalt); width: 150px;
  }
  table.compare td .best { color: var(--krona); font-weight: 800; }
  table.compare .remove { font-size: 12px; color: var(--basalt); background: none; border: 0; cursor: pointer; text-decoration: underline; }

  /* ============ Prose (info pages) ============ */
  .prose { max-width: 680px; padding-bottom: 20px; }
  .prose p { margin: 12px 0; }
  .prose h2 { font-size: 18px; margin-top: 26px; }
  .prose h3 { font-size: 15px; margin-top: 18px; }
  .prose ul { margin: 12px 0 12px 22px; }

  /* ============ Footer ============ */
  footer.site {
    background: var(--fjord); color: rgba(244,241,233,.75);
    margin-top: 64px; padding: 40px 0 32px; font-size: 13px;
  }
  footer.site .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
  @media (max-width: 720px) { footer.site .cols { grid-template-columns: 1fr; } }
  footer.site h4 { font-family: var(--font-display); color: var(--birch); font-size: 13px; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .1em; }
  footer.site a { color: rgba(244,241,233,.75); text-decoration: none; display: block; margin-bottom: 6px; }
  footer.site a:hover { color: #fff; }
  .disclaimer {
    border-top: 1px solid rgba(244,241,233,.15); margin-top: 28px; padding-top: 20px;
    font-size: 12px; line-height: 1.7; color: rgba(244,241,233,.55);
  }
  .disclaimer strong { color: rgba(244,241,233,.8); }

  /* ============ Compare tray ============ */
  .compare-tray {
    position: fixed; bottom: 16px; right: 16px; z-index: 40;
    background: var(--fjord); color: var(--birch);
    border-radius: var(--radius); box-shadow: 0 8px 30px rgba(27,42,50,.35);
    padding: 12px 16px; display: flex; align-items: center; gap: 14px;
    font-size: 13px;
  }
  .compare-tray .cans { display: flex; }
  .compare-tray .cans svg { margin-left: -8px; border-radius: 50%; box-shadow: 0 0 0 2px var(--fjord); }
  .compare-tray .cans svg:first-child { margin-left: 0; }
  .compare-tray a.go {
    font-family: var(--font-display); font-weight: 700; text-decoration: none;
    background: var(--birch); color: var(--fjord); border-radius: var(--radius-sm);
    padding: 7px 14px; font-size: 13px;
  }
  .compare-tray button.clear { background: none; border: 0; color: rgba(244,241,233,.6); cursor: pointer; font-size: 12px; text-decoration: underline; }

  /* ============ Modal (outbound + age gate) ============ */
  .overlay {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(27,42,50,.72); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; padding: 20px;
  }
  .overlay[hidden] { display: none; }
  .modal-box {
    background: var(--snow); border-radius: var(--radius);
    max-width: 440px; width: 100%; padding: 34px 32px; text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
  }
  .modal-box .badge18 {
    font-family: var(--font-display); font-weight: 800; font-size: 22px;
    border: 3px solid var(--fjord); border-radius: 50%;
    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;
    margin: 0 auto 18px;
  }
  .modal-box h2 { font-size: 20px; margin-bottom: 8px; }
  .modal-box p { font-size: 14px; color: var(--basalt); margin-bottom: 22px; }
  .modal-box .actions { display: flex; flex-direction: column; gap: 10px; }
  .modal-box .primary {
    font-family: var(--font-display); font-weight: 700; font-size: 15px;
    background: var(--fjord); color: var(--birch); border: 0; cursor: pointer;
    padding: 14px; border-radius: var(--radius-sm); text-decoration: none; display: block;
  }
  .modal-box .secondary { font-size: 13px; color: var(--basalt); text-decoration: underline; background: none; border: 0; cursor: pointer; padding: 8px; }

  /* ============ Initial route content (SEO + no-JS fallback) ============ */
  .prerender-hero { padding: 58px 0; background: var(--fjord); color: var(--birch); }
  .prerender-hero h1 { max-width: 820px; margin-top: 10px; font-size: clamp(34px, 5vw, 58px); line-height: 1.06; letter-spacing: -.035em; }
  .prerender-hero p { max-width: 760px; margin-top: 16px; color: rgba(244,241,233,.78); font-size: 17px; line-height: 1.65; }
  .prerender-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
  .prerender-actions a { padding: 11px 16px; border: 1px solid rgba(244,241,233,.25); border-radius: 999px; color: var(--birch); font-family: var(--font-display); font-size: 13px; font-weight: 700; text-decoration: none; }
  .prerender-actions a:first-child { background: var(--birch); color: var(--fjord); }
  .prerender-country-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-top: 30px; }
  .prerender-country { display: flex; justify-content: space-between; gap: 12px; padding: 16px; border: 1px solid rgba(244,241,233,.2); border-radius: var(--radius-sm); color: var(--birch); text-decoration: none; }
  .prerender-country span { color: rgba(244,241,233,.62); font-size: 12px; }
  .prerender-breadcrumbs { padding-top: 22px; color: var(--basalt); font-size: 12px; }
  .prerender-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 7px; padding: 0; list-style: none; }
  .prerender-breadcrumbs li + li::before { content: '/'; margin-right: 7px; color: var(--stone); }
  .prerender-breadcrumbs a { color: inherit; text-decoration: none; }
  .prerender-section { padding: 34px 0; }
  .prerender-section > h2, .prerender-section .wrap > h2 { margin-bottom: 18px; font-size: clamp(23px,3vw,32px); }
  .prerender-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
  .prerender-card { min-width: 0; border: 1px solid var(--stone); border-radius: var(--radius-sm); background: var(--snow); }
  .prerender-card > a { display: flex; align-items: center; gap: 13px; min-height: 100%; padding: 13px; color: var(--fjord); text-decoration: none; }
  .prerender-card img { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 8px; object-fit: contain; background: #fff; }
  .prerender-card-body { display: grid; gap: 5px; min-width: 0; }
  .prerender-card-body strong { line-height: 1.25; }
  .prerender-card-body small { color: var(--basalt); line-height: 1.35; }
  .prerender-product-detail { display: grid; grid-template-columns: minmax(260px,.75fr) minmax(0,1.4fr); gap: 48px; padding: 34px 0; align-items: start; }
  .prerender-product-image { display: grid; place-items: center; min-height: 340px; border: 1px solid var(--stone); border-radius: var(--radius); background: var(--snow); }
  .prerender-product-image img { max-width: 88%; height: auto; object-fit: contain; }
  .prerender-product-detail h1, .prerender-entity-heading h1 { margin-top: 7px; font-size: clamp(30px,4vw,46px); line-height: 1.08; }
  .prerender-product-detail p, .prerender-entity-heading p { max-width: 720px; margin-top: 13px; color: var(--basalt); line-height: 1.65; }
  .prerender-product-detail h2 { margin-top: 28px; font-size: 21px; }
  .prerender-specs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 22px; margin-top: 10px; }
  .prerender-specs div { display: flex; justify-content: space-between; gap: 15px; padding: 10px 0; border-bottom: 1px solid var(--stone); }
  .prerender-specs dt { color: var(--basalt); }
  .prerender-specs dd { font-weight: 650; text-align: right; }
  .prerender-entity-heading { display: flex; align-items: center; gap: 22px; padding: 36px 0 18px; }
  .prerender-entity-heading > img { width: 88px; height: 88px; padding: 8px; border: 1px solid var(--stone); border-radius: var(--radius-sm); background: #fff; object-fit: contain; }
  .prerender-prose { max-width: 780px; padding-bottom: 42px; line-height: 1.7; }
  .prerender-prose > * + * { margin-top: 15px; }
  @media (max-width: 850px) {
    .prerender-country-grid, .prerender-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .prerender-product-detail { grid-template-columns: 1fr; gap: 25px; }
  }
  @media (max-width: 520px) {
    .prerender-hero { padding: 42px 0; }
    .prerender-country-grid, .prerender-grid, .prerender-specs { grid-template-columns: 1fr; }
    .prerender-entity-heading { align-items: flex-start; }
  }

  /* ============ Micro-interactions & polish ============ */
  /* Press feedback: the interface responds the instant it's touched. Subtle scale,
     strong ease-out, GPU-only properties. Applies to every pressable element. */
  .searchbar button, .compare-btn, .qty-toggle button,
  .to-store, .modal-box .primary, .compare-tray a.go, .brand-chip, .compare-tray button.clear {
    transition: transform 150ms var(--ease-out), background-color 150ms var(--ease-out),
                border-color 150ms var(--ease-out), color 150ms var(--ease-out);
  }
  :is(.searchbar button, .compare-btn, .qty-toggle button,
      .to-store, .modal-box .primary, .compare-tray a.go, .brand-chip):active { transform: scale(0.97); }

  /* Numbers that don't jiggle: fixed-width digits wherever prices sit in columns
     or update in place (quantity toggle re-prices the whole table). */
  table.offers .num, table.compare td, .search-price strong, .card .price, .best-line .per,
  .compare-tray span { font-variant-numeric: tabular-nums; }

  /* Scrollable dropdown must not chain-scroll the page behind it */
  .search-results { overscroll-behavior: contain; }

  /* Modal & age gate: scrim fades, sheet arrives from scale(0.96) — never scale(0).
     Enter is animated (220ms, one-shot keyframes — they restart reliably when the
     hidden attribute flips display back on); exit stays instant, because dismissing
     is a system response and should snap. Modals keep transform-origin center
     (exempt from origin-aware rule — they anchor to the viewport, not a trigger). */
  @keyframes overlayIn { from { opacity: 0; } }
  @keyframes modalIn { from { opacity: 0; transform: scale(0.96) translateY(8px); } }
  .overlay:not([hidden]) { animation: overlayIn 200ms var(--ease-out); }
  .overlay:not([hidden]) .modal-box { animation: modalIn 220ms var(--ease-out) backwards; }

  /* Compare tray: animates only on the 0→1 add (feedback for a deliberate action) —
     renderTray() re-creates it on every navigation, and replaying an entrance
     tens of times a day would fail the frequency gate. */
  @keyframes trayIn { from { transform: translateY(12px); opacity: 0; } }
  .compare-tray.tray-in { animation: trayIn 220ms var(--ease-out) backwards; }

  /* First-paint stagger: one cascade on initial page load only (body.boot is removed
     right after) — SPA navigations re-render this grid far too often to animate. */
  @keyframes cardIn { from { opacity: 0; transform: translateY(6px); } }
  body.boot .grid4 > .card { animation: cardIn 240ms var(--ease-out) backwards; }
  body.boot .grid4 > .card:nth-child(2) { animation-delay: 45ms; }
  body.boot .grid4 > .card:nth-child(3) { animation-delay: 90ms; }
  body.boot .grid4 > .card:nth-child(4) { animation-delay: 135ms; }

  /* System preference fallbacks */
  @media (prefers-reduced-transparency: reduce) {
    .overlay { backdrop-filter: none; background: rgba(27,42,50,.88); }
  }
  @media (prefers-contrast: more) {
    .card, .tile, .list-card, .brand-chip { border-color: var(--basalt); }
  }