/* Inter is self-hosted (no request to Google before consent, no
   render-blocking @import). One variable file per subset covers every weight
   the site uses (400-800); Greek is only fetched for α/β/μ in product names.
   "Inter Fallback" is Arial scaled to Inter's metrics so the swap does not
   shift layout. */
@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-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
  size-adjust: 107.4%;
}

:root {
  color-scheme: light;
  --font-brand: "Inter", "Inter Fallback", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-data: var(--font-brand);
  --font-description: var(--font-brand);
  /* Semantic theme tokens. Components should consume these, not palette values. */
  --color-page-background: #edf4f2;
  --color-page-background-soft: #dce8e5;
  --color-surface: rgba(249, 253, 252, 0.78);
  --color-surface-elevated: #f7fbfa;
  --color-heading: #14211f;
  --color-text: #24322f;
  --color-text-muted: #5d6f6b;
  --color-accent: #2f6d64;
  --color-accent-secondary: #9a6f3d;
  --color-accent-contrast: #f5fffc;
  --color-border: rgba(18, 33, 30, 0.18);
  --color-card: var(--color-surface);
  --color-button-primary-background: linear-gradient(115deg, #43877d 0%, #1b514b 100%);
  --color-button-primary-text: #f5fffc;
  --color-button-secondary-background: var(--color-surface-elevated);
  --color-button-secondary-hover: #ffffff;
  --color-button-secondary-text: var(--color-heading);
  --color-button-secondary-border: var(--color-border);
  --color-pill-background: var(--pill-metal-bg);
  --color-pill-text: var(--pill-metal-text);
  --color-hover-background: rgba(47, 109, 100, 0.08);
  --color-active-background: rgba(47, 109, 100, 0.16);
  --color-focus-ring: rgba(47, 109, 100, 0.26);
  /* Keyboard focus outline: solid so it clears 3:1 against white (WCAG 2.4.11). */
  --color-focus-outline: #2f6d64;
  --color-status-available-background: rgba(47, 109, 100, 0.12);
  --color-status-available-border: rgba(47, 109, 100, 0.32);
  --color-status-available-text: #245c54;
  --color-status-soldout-background: linear-gradient(115deg, #8f2f2f 0%, #8f2f2f 36%, #d75a5a 50%, #8f2f2f 64%, #8f2f2f 100%);
  --color-status-soldout-border: #b94444;
  --color-status-soldout-text: #fff5f3;
  --color-status-coming-background: linear-gradient(115deg, #6f3c0d 0%, #8c5116 100%);
  --color-status-coming-border: rgba(111, 60, 13, 0.46);
  --color-status-coming-text: #fff7ea;
  --color-status-coming-glow: rgba(111, 60, 13, 0.18);
  --color-warning-background: rgba(139, 94, 52, 0.08);
  --color-warning-border: rgba(139, 94, 52, 0.26);
  --color-warning-text: #7b4c2b;
  --color-page-gradient: radial-gradient(circle at top left, rgba(92, 165, 154, 0.18), transparent 34%), radial-gradient(circle at 80% 15%, rgba(181, 138, 84, 0.10), transparent 28%), linear-gradient(180deg, #f8fbfa 0%, var(--color-page-background) 44%, #d8e5e2 100%);

  /* Compatibility aliases keep existing components on the same source of truth. */
  --bg: var(--color-page-background);
  --bg-soft: var(--color-page-background-soft);
  --panel: var(--color-surface);
  --panel-strong: var(--color-surface-elevated);
  --ink: var(--color-heading);
  --muted: var(--color-text-muted);
  --line: var(--color-border);
  --accent: var(--color-accent);
  --accent-soft: var(--color-active-background);
  --accent-2: var(--color-accent-secondary);
  --accent-3: #334a45;
  --accent-gradient: var(--color-button-primary-background);
  --surface-soft: rgba(247, 252, 250, 0.72);
  --surface-strong: rgba(255, 255, 255, 0.86);
  --border-soft: rgba(18, 33, 30, 0.12);
  --focus-ring: rgba(47, 109, 100, 0.26);
  --lab-ice: #d9ebe8;
  --frost-glass: rgba(247, 253, 252, 0.72);
  --deep-vial: #0f2622;
  --instrument-teal: #5ca59a;
  --copper-seal: #b58a54;
  --spec-paper: #f8fbfa;
  --spec-rule: rgba(18, 33, 30, 0.14);
  --button-primary-bg: var(--color-button-primary-background);
  --button-primary-text: var(--color-button-primary-text);
  --button-primary-shadow: rgba(47, 109, 100, 0.22);
  --button-secondary-bg: var(--color-button-secondary-background);
  --button-secondary-bg-hover: var(--color-button-secondary-hover);
  --button-secondary-text: var(--color-button-secondary-text);
  --button-secondary-border: var(--color-button-secondary-border);
  --button-danger-bg: rgba(138, 63, 43, 0.08);
  --button-danger-bg-hover: rgba(138, 63, 43, 0.14);
  --button-danger-border: rgba(138, 63, 43, 0.28);
  --button-danger-text: #8a3f2b;
  --button-ghost-bg: transparent;
  --button-ghost-bg-hover: rgba(47, 109, 100, 0.08);
  --button-ghost-text: var(--accent);
  --button-disabled-opacity: 0.56;
  --badge-coming-bg: var(--color-status-coming-background);
  --badge-coming-border: var(--color-status-coming-border);
  --badge-coming-text: var(--color-status-coming-text);
  --badge-coming-glow: var(--color-status-coming-glow);
  --badge-soldout-bg: var(--color-status-soldout-background);
  --badge-soldout-border: var(--color-status-soldout-border);
  --badge-soldout-text: var(--color-status-soldout-text);
  --dose-bg: rgba(229, 238, 233, 0.88);
  --dose-border: var(--border-soft);
  --dose-text: var(--accent-3);
  --dose-active-bg: var(--accent-gradient);
  --dose-active-text: #f5fffc;
  --pill-metal-bg: linear-gradient(118deg, #f2f5f4 0%, #b8c3c1 38%, #ffffff 54%, #a6b2b0 100%);
  --pill-metal-border: rgba(91, 106, 103, 0.48);
  --pill-metal-text: #23322f;
  --pill-metal-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 5px 14px rgba(36, 54, 50, 0.14);
  --qty-color: #000000;
  --qty-trash-color: #c4a898;
  --shadow: 0 24px 70px rgba(14, 31, 28, 0.12);
  --warning: var(--color-warning-text);
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 12px;
}

* {
  box-sizing: border-box;
}

.market-currency-notice,
.research-disclaimer {
  display: grid;
  gap: 4px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid rgba(33, 77, 70, 0.2);
  border-radius: var(--radius-md);
  background: rgba(231, 244, 240, 0.72);
  color: var(--ink);
  line-height: 1.45;
}

.market-currency-notice strong { color: var(--accent); }
.market-currency-notice span { color: var(--muted); }
.market-currency-notice a { color: var(--accent); font-weight: 700; text-decoration: underline; }
.results .research-disclaimer { margin: 18px 0 0; font-size: 13px; }

/* Was only defined in index.html's own inline styles, so every other page
   using this class (e.g. the /produkter/ search label) rendered it fully
   visible instead of screen-reader-only. */
.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;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--color-page-gradient);
  font-family: var(--font-brand);
  min-height: 100vh;
  overflow-x: hidden;
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
  opacity: 0.28;
  filter: blur(8px);
}

body::before {
  width: 58vw;
  height: 34vw;
  top: -16vw;
  left: -12vw;
  border-radius: 67% 33% 54% 46% / 45% 58% 42% 55%;
  background: linear-gradient(135deg, rgba(47, 109, 100, 0.30), rgba(217, 235, 232, 0.10));
  transform: rotate(-12deg);
}

body::after {
  width: 54vw;
  height: 30vw;
  right: -14vw;
  bottom: -12vw;
  border-radius: 42% 58% 36% 64% / 55% 38% 62% 45%;
  background: linear-gradient(135deg, rgba(181, 138, 84, 0.10), rgba(47, 109, 100, 0.20));
  transform: rotate(16deg);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

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

.skip-link {
  position: fixed;
  z-index: 10000;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  transform: translateY(-180%);
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--ink, #14211f);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: transform 120ms ease;
}

.skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid #79c1b5;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}

.page {
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
  padding: 24px 0 56px;
  position: relative;
  z-index: 1;
}

/* Swedish-market English uses the shared Swedish shell before the browser
   translates its hydrated content. Keep that intermediate Norwegian frame
   hidden; edge-rendered Norwegian-English pages are visible immediately. */
html[data-language-pending="true"] body {
  visibility: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  min-width: 0;
  overflow-wrap: anywhere;
}

.section-head > * {
  min-width: 0;
}

.topbar,
.footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}

.topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  padding: 10px 0 22px;
}

.footer {
  margin-top: 24px;
  padding-top: 10px;
  font-size: 14px;
  flex-wrap: wrap;
  color: var(--muted);
}

.footer.site-footer {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
  gap: 28px 48px;
  margin-top: 42px;
  padding: 34px 0 8px;
  border-top: 1px solid rgba(31, 26, 23, 0.12);
  color: var(--muted);
}

.site-footer__brand {
  max-width: 360px;
}

.site-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.05em;
}

.site-footer__mark {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #f8e7b4;
  font-size: 15px;
}

.site-footer__brand p {
  margin: 14px 0 0;
  max-width: 34ch;
  line-height: 1.6;
}

.site-footer__links {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: end;
  gap: 12px 28px;
}

.site-footer__links a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(31, 26, 23, 0.34);
  text-underline-offset: 4px;
  font-family: var(--font-data);
  font-size: 13px;
  letter-spacing: 0.06em;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
  color: var(--accent);
  text-decoration-color: currentColor;
}

.site-footer__bottom {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(31, 26, 23, 0.08);
  font-family: var(--font-data);
  font-size: 13px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}

/* Two-line wordmark: "Auralis" on top, smaller letter-spaced "Nordic"
   underneath. Shared across every page (including admin, which sets its
   own colour via --admin-ink on the parent and lets these two spans
   inherit it) since only layout/size is set here. */
.brand-wordmark {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1;
}

.brand-wordmark__primary {
  font-family: var(--font-brand);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.brand-wordmark__secondary {
  font-family: var(--font-data, var(--font-brand));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  opacity: 0.62;
}

body:not([data-admin-page]) h1,
body:not([data-admin-page]) h2,
body:not([data-admin-page]) h3,
body:not([data-admin-page]) h4,
body:not([data-admin-page]) h5,
body:not([data-admin-page]) h6,
body:not([data-admin-page]) .product-card-link {
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(112deg, var(--ink) 0%, var(--ink) 38%, #b8d8cc 48%, #fff8df 52%, var(--ink) 64%, var(--ink) 100%);
  background-size: 240% 100%;
  background-position: 180% 0;
  -webkit-background-clip: text;
  background-clip: text;
  text-transform: uppercase;
  animation: brand-shine 5.5s linear infinite;
}

/* Catalog-aligned design system for information, form, legal, status, and checkout pages. */
.subpage h1,
.subpage h2,
.subpage h3,
.subpage h4,
.subpage h5,
.subpage h6 {
  font-family: var(--font-brand);
  text-transform: uppercase;
}

.subpage .hero,
.subpage .panel,
.subpage .contact-hero,
.subpage .contact-card,
.subpage .faq,
.subpage .result {
  border-color: var(--spec-rule);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.subpage .guide-step,
.subpage .faq-topic,
.subpage .terms section,
.subpage .grid > .card,
.subpage .checkout-items > .cart-item {
  border-color: var(--line);
  background: var(--panel-strong);
}

.subpage .guide-note,
.subpage .contact-note,
.subpage .note {
  border-color: var(--spec-rule);
  background: var(--surface-soft);
}

.subpage .posten-redirect-link,
.subpage .calculator-chip,
.subpage .contact-subject-pills span,
.subpage .delivery-chip {
  border-color: var(--pill-metal-border);
  background: var(--pill-metal-bg);
  color: var(--pill-metal-text);
  box-shadow: var(--pill-metal-shadow);
}

.subpage .posten-redirect-link:hover,
.subpage .posten-redirect-link:focus-visible,
.subpage .calculator-chip:hover,
.subpage .contact-subject-pills span:hover,
.subpage .contact-channel:hover,
.subpage .contact-channel:focus-visible {
  border-color: var(--button-secondary-border);
  background: var(--button-secondary-bg-hover);
  color: var(--button-secondary-text);
}

.subpage .calculator-chip.is-active,
.subpage .contact-subject-pills input:checked + span {
  border-color: transparent;
  background: var(--accent-gradient);
  color: var(--button-primary-text);
}

.contact-channel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid var(--button-secondary-border, var(--line));
  border-radius: 999px;
  background: var(--button-secondary-bg, rgba(255,255,255,.8));
  color: var(--button-secondary-text, var(--accent));
  font-weight: 800;
  text-decoration: none;
}

.contact-channel:hover,
.contact-channel:focus-visible {
  background: var(--button-secondary-bg-hover, #fff);
  color: var(--ink);
  outline: 3px solid var(--focus-ring, rgba(35,76,68,.16));
  outline-offset: 2px;
}

.subpage .contact-channel {
  border-color: var(--button-secondary-border);
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
}

.contact-channel.contact-channel--whatsapp,
.contact-channel.contact-channel--telegram {
  border-color: transparent;
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(18, 33, 30, 0.18);
}

.contact-channel.contact-channel--whatsapp {
  background: #147c40;
}

.contact-channel.contact-channel--telegram {
  background: #0d6f9f;
}

.contact-channel.contact-channel--whatsapp:hover,
.contact-channel.contact-channel--whatsapp:focus-visible {
  background: #0f6836;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(20, 124, 64, 0.32);
}

.contact-channel.contact-channel--telegram:hover,
.contact-channel.contact-channel--telegram:focus-visible {
  background: #095b84;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(13, 111, 159, 0.32);
}

.catalog-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.catalog-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: transform 180ms ease, border-color 180ms ease;
  background: linear-gradient(118deg, #f5faf7 0%, #d6e9e1 34%, #b7d7ca 52%, #e8f3ee 72%, #f5faf7 100%) !important;
  background-size: 240% 100%;
  animation: green-palette 8s ease-in-out infinite;
}

.catalog-tab.is-active {
  border-color: transparent;
  background: linear-gradient(118deg, #244f48 0%, #3f7567 36%, #79a997 52%, #315e54 70%, #244f48 100%) !important;
  background-size: 240% 100%;
  color: #fff9f1 !important;
  animation: green-palette 8s ease-in-out infinite;
}

/* Category filter row above the product grid (index + /produkter). Reuses the
   .catalog-tab chip look at a slightly smaller scale. */
.catalog-filter {
  margin: 4px 0 20px;
}
.catalog-filter .catalog-tab {
  min-height: 36px;
  padding: 7px 13px;
  font-size: 13px;
  letter-spacing: 0.01em;
}

/* The chip row only describes the peptide grid, so keep it out of the way
   on the other catalog tabs (Nesespray, Tilbehør) regardless of whether
   main.js currently has it populated — see views.js. */
body:not([data-catalog-view="vials"]) #catalog-filter {
  display: none !important;
}

/* The search field is peptide-only too, but hidden with `visibility`
   instead of `display: none` — collapsing its row entirely made the
   category tabs (and everything below) jump up whenever you switched to a
   tab without a search field. Keeping the row's height reserved holds the
   tabs at a stable position across every tab. */
body:not([data-catalog-view="vials"]) .catalog-search-control {
  visibility: hidden;
  pointer-events: none;
}

.catalog-tab:not(.is-active) {
  color: #20312b !important;
  opacity: 1 !important;
}

/* Give the selected tab/chip real visual weight instead of matching the
   unselected ones 1:1 — the sitewide monochrome pass flattens both states
   to the same white/black outline by default, so this is a scoped
   exception (same technique as the hero primary button). The extra type
   selector lifts specificity above `body :is(…, .catalog-tab.is-active)`.
   Sub-category chips (Alle/Metabolsk/…) keep this teal fill; the main
   category tabs below get their own marine-blue treatment so the two
   levels read as visually distinct. */
body .catalog-filter button.catalog-tab.is-active {
  border-color: transparent !important;
  background: linear-gradient(135deg, #3a8177 0%, #1f4a44 100%) !important;
  background-image: linear-gradient(135deg, #3a8177 0%, #1f4a44 100%) !important;
  color: #f5fffc !important;
  -webkit-text-fill-color: #f5fffc !important;
}

/* Main catalog tabs (Peptider / Nesespray / Penner / Tilbehør): the active
   one gets a marine-blue gradient with a soft glow behind it, distinct
   from the sub-category chips' teal fill. */
body .catalog-tools .catalog-tabs:not(.catalog-filter) button.catalog-tab.is-active {
  border-color: transparent !important;
  background: linear-gradient(135deg, #1c3f73 0%, #2f6fa8 55%, #1c3f73 100%) !important;
  background-image: linear-gradient(135deg, #1c3f73 0%, #2f6fa8 55%, #1c3f73 100%) !important;
  color: #eaf3ff !important;
  -webkit-text-fill-color: #eaf3ff !important;
  box-shadow:
    0 0 0 1px rgba(47, 111, 168, 0.25),
    0 0 26px rgba(89, 157, 220, 0.55),
    0 6px 16px rgba(27, 58, 107, 0.32) !important;
}

@keyframes brand-shine {
  from { background-position: 180% 0; }
  to { background-position: -45% 0; }
}

@keyframes green-palette {
  0%, 100% { background-position: 100% 0; }
  50% { background-position: 0% 0; }
}

.site-footer__logo > span:last-child {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(112deg, var(--ink) 0%, var(--ink) 38%, #b8d8cc 48%, #fff8df 52%, var(--ink) 64%, var(--ink) 100%);
  background-size: 240% 100%;
  background-position: 180% 0;
  -webkit-background-clip: text;
  background-clip: text;
  animation: brand-shine 5.5s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .brand-wordmark,
  .site-footer__logo > span:last-child,
  h1,
  h2,
  h3,
  .product-card-link,
  .catalog-tab,
  .catalog-tab.is-active {
    animation: none !important;
    background-position: 0 0 !important;
  }
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--surface-soft);
  color: var(--ink);
  font-weight: 700;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button-primary {
  color: var(--button-primary-text);
  background: var(--button-primary-bg);
  box-shadow: 0 12px 30px var(--button-primary-shadow);
}

.button-secondary {
  color: var(--button-secondary-text);
  border-color: var(--button-secondary-border);
  background: var(--button-secondary-bg);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  background: var(--button-secondary-bg-hover);
}

.button-danger {
  color: var(--button-danger-text);
  border-color: var(--button-danger-border);
  background: var(--button-danger-bg);
}

.button-danger:hover,
.button-danger:focus-visible {
  background: var(--button-danger-bg-hover);
}

.button-ghost {
  color: var(--button-ghost-text);
  border-color: transparent;
  background: var(--button-ghost-bg);
  box-shadow: none;
}

.button-ghost:hover,
.button-ghost:focus-visible {
  background: var(--button-ghost-bg-hover);
}

.button:disabled,
.button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: var(--button-disabled-opacity);
  transform: none;
  box-shadow: none;
}

.button-inline {
  min-height: 46px;
  padding-inline: 18px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 2px;
  border: 0;
  background: none;
  color: var(--accent);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
}

.back-link::before {
  content: "←";
  font-size: 1.05em;
  line-height: 1;
}

.back-link:hover,
.back-link:focus-visible {
  text-decoration: underline;
}

.nav {
  display: flex;
  gap: 12px clamp(20px, 2.4vw, 34px);
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

.nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.6);
  font-family: var(--font-data);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav a:hover {
  transform: translateY(-1px);
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.68);
}

/* The cart remains a compact, recognizable control in every navigation bar.
   Keep the text in the accessibility tree while presenting the icon and count
   visually, so changing this presentation does not alter the cart flow. */
.cart-toggle {
  position: relative !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  gap: 0 !important;
  border-radius: 14px !important;
}

.cart-toggle:hover,
.cart-toggle:focus-visible {
  z-index: 1;
  border-color: rgba(55, 128, 111, 0.58) !important;
  box-shadow:
    0 0 0 1px rgba(55, 128, 111, 0.28),
    0 0 24px rgba(91, 174, 149, 0.22),
    var(--shadow) !important;
}

.cart-toggle > span:first-child {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.cart-toggle::before {
  content: "";
  width: 19px;
  height: 19px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 4.5h2l2.1 11.2h9.8l3-8.2H6.8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='10' cy='19' r='1.2' fill='black'/%3E%3Ccircle cx='17' cy='19' r='1.2' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 4.5h2l2.1 11.2h9.8l3-8.2H6.8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='10' cy='19' r='1.2' fill='black'/%3E%3Ccircle cx='17' cy='19' r='1.2' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cart-toggle strong {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  transform: translate(35%, -35%) !important;
  min-width: 20px !important;
  width: auto !important;
  height: 20px !important;
  padding: 0 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  z-index: 1 !important;
}

.nav a.is-active {
  border-color: rgba(33, 77, 70, 0.22);
  background: var(--accent-gradient);
  color: #fff9f1;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--pill-metal-border);
  background: var(--pill-metal-bg);
  color: var(--pill-metal-text);
  box-shadow: var(--pill-metal-shadow);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #647572;
  box-shadow: 0 0 0 6px rgba(100, 117, 114, 0.14);
}

.panel,
.card,
.mini-card {
  border: 1px solid var(--spec-rule);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(90deg, rgba(18, 33, 30, 0.035) 1px, transparent 1px),
    var(--frost-glass);
  background-size: 42px 100%, auto;
  box-shadow: var(--shadow);
}

.card[data-product-slug] {
  position: relative;
  overflow: hidden;
}

.card[data-product-slug]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.36), transparent 42%);
}

.card[data-product-slug] > * {
  position: relative;
  z-index: 1;
}

/* A restrained lift keeps the selected product easy to spot without changing
   the grid's geometry or causing neighboring cards to jump. */
.card[data-product-slug] {
  position: relative;
  transform-origin: center;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.card[data-product-slug]:hover {
  z-index: 1;
  transform: scale(1.012);
  border-color: rgba(55, 128, 111, 0.58);
  box-shadow:
    0 0 0 1px rgba(55, 128, 111, 0.28),
    0 0 24px rgba(91, 174, 149, 0.22),
    var(--shadow);
}

@media (max-width: 760px) {
  .card[data-product-slug].is-mobile-highlight {
    z-index: 1;
    transform: scale(1.012);
    border-color: rgba(55, 128, 111, 0.58);
    box-shadow:
      0 0 0 1px rgba(55, 128, 111, 0.28),
      0 0 24px rgba(91, 174, 149, 0.22),
      var(--shadow);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card[data-product-slug] {
    transition: none;
  }

  .card[data-product-slug]:hover,
  .card[data-product-slug].is-mobile-highlight {
    transform: none;
  }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.landing-hero {
  position: relative;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Both rows share the same height so the four cells read as an actual
     2x2 grid of matching quadrants — an earlier version let the bottom
     row shrink to its own shorter content, which made it look uneven,
     like the delivery banner directly underneath was cutting it short.
     The floor is kept low enough that the products start about one screen
     down instead of two on a 1280×720 laptop. */
  grid-auto-rows: minmax(clamp(300px, 34vw, 480px), 1fr);
  margin: 0;
  overflow: hidden;
}

.landing-hero__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Vertically centered, matching the Amino Club reference: its hero text
     sits centered in a tall quadrant with generous, symmetric padding above
     and below rather than hugging the top. Combined with align-items:center
     below (and the row-height clamp on .landing-hero itself), this stays
     visually stable — not stretched or pinned to a corner — at any zoom
     level, including heavily zoomed-out. */
  justify-content: center;
  padding-block: clamp(28px, 4vw, 48px);
  padding-inline: clamp(28px, 4vw, 48px);
}

/* .landing-hero is full-bleed (100vw) so its colour backgrounds reach the
   screen edge, but the TEXT still needs to line up with the navbar/page
   content above it, like the Amino Club reference, instead of drifting away
   from it — a plain vw-based padding has no ceiling, while .page caps at
   min(1200px, 100% - 40px) centered, so the gap between "still growing" and
   "capped at 1200px" got large at a wide or zoomed-out viewport. This
   mirrors .page's own inset exactly: max(20px, (100vw - 1200px) / 2), with a
   slightly larger floor for breathing room below that container's own
   breakpoint. Only applied to each column's OUTER edge (left of the left
   column, right of the right column) — the inner seam between columns keeps
   the smaller default padding above, since that edge has nothing to line up
   with. */
.landing-hero__cell--brand,
.landing-hero__cell--offers {
  padding-left: max(28px, calc((100vw - 1200px) / 2));
}

.landing-hero__cell--stats {
  padding-right: max(28px, calc((100vw - 1200px) / 2));
}

.landing-hero__cell--brand {
  background: var(--color-surface-elevated);
  /* The heading forces a line break ("Auralis" / "Nordic"), so it's
     never actually wide — but the default align-items:stretch still
     inflates its box (and the paragraph/buttons below) to the cell's
     full width, leaving text pinned at the far left with a growing void
     next to it at very wide cells (e.g. a heavily zoomed-out browser).
     Center the whole text block within the cell instead, like the
     reference layout, so it stays balanced at any width. */
  align-items: center;
}

.landing-hero__cell--photos {
  padding: 0;
  overflow: hidden;
  /* The sitewide monochrome pass (`body * { background-image: none !important }`,
     `--accent: #000000`) flattens everything by default; this cell is the
     deliberate exception, so it opts back into real color with !important.
     A translucent wash (not solid fills) over white keeps it soft and
     keeps the white product labels readable against the dark end. */
  background:
    linear-gradient(135deg, rgba(217, 242, 223, 0) 0%, rgba(150, 202, 170, 0.45) 55%, rgba(18, 52, 74, 0.45) 100%),
    #ffffff !important;
}

.landing-hero__cell--offers {
  align-items: center;
  /* Same deliberate exception to the sitewide monochrome pass as the
     photos cell above — see the comment there. */
  background:
    linear-gradient(135deg, rgba(217, 242, 223, 0) 0%, rgba(150, 202, 170, 0.45) 55%, rgba(18, 52, 74, 0.45) 100%),
    #ffffff !important;
}

.landing-hero__cell--stats {
  background: var(--color-surface-elevated);
}

.landing-hero__logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 16px;
}

.landing-hero__logo::before {
  content: "";
  display: block;
  width: 84px;
  height: 6px;
  border-radius: 2px;
  margin-bottom: 12px;
  background: linear-gradient(90deg, #96caaa, #12344a);
}

.landing-hero__logo-word {
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 0.96;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.landing-hero__logo-sub {
  font-size: clamp(13px, 1.6vw, 20px);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}

.landing-hero__cell--brand > p {
  max-width: 42ch;
  margin: 0;
  color: var(--muted);
  font-family: var(--font-description);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
}

.landing-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* Shared sizing/shape for every hero CTA (brand-cell + offers-cell), so the
   four buttons read as one consistent system instead of mixing full-pill
   and rounded-rectangle shapes. Fluid with clamp() rather than fixed
   breakpoints so it scales smoothly across phone/tablet/desktop widths. */
.landing-hero__actions .button {
  min-height: clamp(46px, 5.2vw, 52px);
  padding-inline: clamp(16px, 3vw, 22px);
  border-radius: var(--radius-sm);
  font-size: clamp(14.5px, 1.6vw, 16px);
}

.landing-hero__actions .button:hover {
  box-shadow: 0 10px 24px rgba(14, 31, 28, 0.12);
}

/* Bulk ordre / Bygg din boks: two illustrated cards instead of plain
   pill buttons, each with a small looping animation, an emphasised
   discount badge, a short description and its own CTA. Same 260-320px
   card width as the old pill buttons on desktop, full width once the
   hero stacks to a single column. Must match the .landing-hero stacking
   breakpoint below. */
.landing-hero__offer-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(320px, 100%);
}

@media (max-width: 900px) {
  .landing-hero__offer-cards {
    width: 100%;
  }
}

.landing-hero__offer-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #ffffff;
  text-decoration: none;
  color: inherit;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.landing-hero__offer-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(14, 31, 28, 0.12);
  border-color: rgba(47, 109, 100, 0.35);
}

.landing-hero__offer-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.landing-hero__offer-discount {
  display: inline-block;
  margin-bottom: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #e0342c;
  color: #ffffff;
  font-family: var(--font-data);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 6px rgba(224, 52, 44, 0.35);
}

.landing-hero__offer-title {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
}

.landing-hero__offer-desc {
  margin: 3px 0 10px;
  color: var(--muted);
  font-family: var(--font-description);
  font-size: 12.5px;
  line-height: 1.4;
}

.landing-hero__offer-cta {
  display: inline-flex;
  min-height: 34px;
  padding-inline: 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
}

/* Shared illustration stage for both cards. */
.landing-hero__offer-kit,
.landing-hero__offer-build {
  position: relative;
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 14px;
  background: rgba(47, 109, 100, 0.06);
  overflow: hidden;
}

/* Bulk ordre: a small vial-kit tray — a grid of vials that gently pulse
   into focus in a staggered wave, like a kit being checked/assembled,
   rather than a one-shot "pack once and stop" animation. */
.landing-hero__offer-kit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 4px;
  padding: 9px;
}

.landing-hero__offer-vial {
  position: relative;
  border-radius: 3px;
  opacity: 0.55;
  transform: scale(0.82);
  animation: landing-hero-kit-pulse 2.4s ease-in-out infinite;
}

.landing-hero__offer-vial::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 15%;
  width: 70%;
  height: 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.35);
}

/* Same three-colour cycle as "Bygg din boks" below, so the two cards' vial
   placeholders read as the same visual language. */
.landing-hero__offer-vial:nth-child(1) { background: #6fa287; animation-delay: 0s; }
.landing-hero__offer-vial:nth-child(2) { background: #4c7fa8; animation-delay: 0.15s; }
.landing-hero__offer-vial:nth-child(3) { background: #b3852c; animation-delay: 0.3s; }
.landing-hero__offer-vial:nth-child(4) { background: #6fa287; animation-delay: 0.45s; }
.landing-hero__offer-vial:nth-child(5) { background: #4c7fa8; animation-delay: 0.6s; }
.landing-hero__offer-vial:nth-child(6) { background: #b3852c; animation-delay: 0.75s; }

@keyframes landing-hero-kit-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1); }
}

/* Bygg din boks: a deliberately different rhythm from the kit's uniform
   shimmer — up to 5 vials drop in one at a time (echoing the real "max 5
   per box" limit), hold together for a moment, then reset and repeat,
   reading as "building" a box rather than "checking" a finished kit. */
.landing-hero__offer-build {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  padding-bottom: 11px;
}

.landing-hero__offer-build-box {
  position: absolute;
  bottom: 7px;
  left: 50%;
  width: 34px;
  height: 34px;
  transform: translateX(-50%);
  fill: none;
  stroke: #9a6f3d;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.landing-hero__offer-slot {
  position: relative;
  z-index: 1;
  width: 6px;
  height: 16px;
  border-radius: 2px;
  opacity: 0;
  transform: translateY(-10px) scale(0.7);
  animation: landing-hero-build-drop 4s ease-in-out infinite;
}

.landing-hero__offer-slot:nth-child(1) { animation-delay: 0s; background: #6fa287; }
.landing-hero__offer-slot:nth-child(2) { animation-delay: 0.35s; background: #4c7fa8; }
.landing-hero__offer-slot:nth-child(3) { animation-delay: 0.7s; background: #b3852c; }
.landing-hero__offer-slot:nth-child(4) { animation-delay: 1.05s; background: #6fa287; }
.landing-hero__offer-slot:nth-child(5) { animation-delay: 1.4s; background: #4c7fa8; }

@keyframes landing-hero-build-drop {
  0% { opacity: 0; transform: translateY(-10px) scale(0.7); }
  6% { opacity: 1; transform: translateY(0) scale(1); }
  75% { opacity: 1; transform: translateY(0) scale(1); }
  85%, 100% { opacity: 0; transform: translateY(6px) scale(0.7); }
}

@media (prefers-reduced-motion: reduce) {
  .landing-hero__offer-vial,
  .landing-hero__offer-slot {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

body .discount-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background-color: #e0342c !important;
  background-image: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-family: var(--font-data, inherit);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(224, 52, 44, 0.35);
}

/* Give "Se alle produkter" real primary weight (solid brand-teal fill)
   instead of matching "Les anmeldelser" 1:1 — the sitewide monochrome pass
   flattens .button-primary to the same white pill as .button-secondary by
   default, so this is a deliberate, scoped exception like the other hero
   colour carve-outs above. */
body .landing-hero__cell--brand a.button-primary {
  background: linear-gradient(135deg, #3a8177 0%, #1f4a44 100%) !important;
  background-image: linear-gradient(135deg, #3a8177 0%, #1f4a44 100%) !important;
  border-color: transparent !important;
  color: #f5fffc !important;
  -webkit-text-fill-color: #f5fffc !important;
  box-shadow: 0 14px 30px rgba(31, 74, 68, 0.28) !important;
}

body .landing-hero__cell--brand a.button-primary:hover {
  box-shadow: 0 16px 34px rgba(31, 74, 68, 0.36) !important;
}

.landing-hero__stats-label {
  color: var(--accent);
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.landing-hero__stats-metric {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 10px 0 16px;
  color: var(--ink);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 900;
  line-height: 1;
}

.landing-hero__stats-plus {
  font-size: 0.5em;
  color: var(--accent);
}

/* Soft breathing glow behind the shipment count, so the live number reads
   as "alive" rather than a static label. Colour-only (text-shadow), so it
   isn't touched by the sitewide monochrome pass — no carve-out needed.
   Two earlier passes either sat too close/opaque against the bold black
   glyphs (read as a dark smudge) or were too pale against the light
   background (barely visible). This version keeps a saturated teal core
   close to the digits plus a warmer gold ring further out — checked side
   by side against alternatives to land on a mix that's visible as an
   actual colour glow at rest, not just at the animation's brighter peak. */
[data-completed-order-count] {
  text-shadow:
    0 0 10px rgba(35, 140, 120, 1),
    0 0 24px rgba(35, 140, 120, 0.7),
    0 0 44px rgba(214, 158, 50, 0.55),
    0 0 70px rgba(214, 158, 50, 0.3);
  animation: stats-count-glow 3.2s ease-in-out infinite;
}

@keyframes stats-count-glow {
  0%,
  100% {
    text-shadow:
      0 0 8px rgba(35, 140, 120, 0.8),
      0 0 20px rgba(35, 140, 120, 0.55),
      0 0 36px rgba(214, 158, 50, 0.4),
      0 0 58px rgba(214, 158, 50, 0.22);
  }
  50% {
    text-shadow:
      0 0 14px rgba(35, 140, 120, 1),
      0 0 30px rgba(35, 140, 120, 0.8),
      0 0 52px rgba(214, 158, 50, 0.6),
      0 0 80px rgba(214, 158, 50, 0.34);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-completed-order-count] {
    animation: none;
  }
}

/* Clickable, JS-driven 5-step "how your shipment moves" carousel (see
   scripts/site/shipping-flow.js), replacing the earlier static list of 3
   points and then a pure-CSS auto-only version. JS toggles a plain
   .is-active class on the current step/segment on a timer — and on a
   click, which restarts that timer — rather than relying on a CSS
   animation-delay loop, which can't be seeked or paused, and forces each
   step's own decoration (typewriter code, vials-into-box, driving truck,
   truck/mailbox drop-off) to restart from frame one every time by
   dropping the class for a frame before reapplying it (see the JS). */
.landing-hero__flow {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 22px;
}

.landing-hero__flow-stage {
  position: relative;
  height: 128px;
}

.landing-hero__flow-step {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.landing-hero__flow-step.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.landing-hero__flow-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(14, 31, 28, 0.08);
}

.landing-hero__flow-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.landing-hero__flow-copy h3 {
  margin: 2px 0 4px;
  font-size: 17px;
  line-height: 1.2;
}

.landing-hero__flow-copy p {
  margin: 0;
  max-width: 32ch;
  color: var(--muted);
  font-family: var(--font-description);
  font-size: 13px;
  line-height: 1.5;
}

.landing-hero__flow-step-label {
  font-family: var(--font-data);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* The LL-kode "typed in" effect on step 1 — a classic CSS typewriter
   (width animated with steps() so it reveals whole characters, plus a
   blinking caret border), started only once the step is actually active. */
.landing-hero__flow-code {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  font-family: var(--font-data);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  border-right: 2px solid transparent;
}

.landing-hero__flow-step.is-active .landing-hero__flow-code {
  animation:
    landing-hero-flow-type 1.3s steps(13, end) 0.4s forwards,
    landing-hero-flow-caret 0.6s step-end 0.4s infinite;
}

@keyframes landing-hero-flow-type {
  to {
    width: 13ch;
  }
}

@keyframes landing-hero-flow-caret {
  0%,
  100% {
    border-color: currentColor;
  }
  50% {
    border-color: transparent;
  }
}

/* Step 2's "3 small peptides fly into a box" scene needs more width than
   the plain circular icon, so it gets a soft rounded-rect shape instead. */
.landing-hero__flow-icon--scene {
  width: 60px;
  border-radius: 16px;
  overflow: visible;
}

.landing-hero__flow-vial {
  position: absolute;
  width: 6px;
  height: 15px;
  border-radius: 2px;
  opacity: 0;
}

.landing-hero__flow-vial--a { top: 4px; left: 4px; }
.landing-hero__flow-vial--b { top: -4px; left: 16px; }
.landing-hero__flow-vial--c { top: 8px; left: 16px; }

.landing-hero__flow-scene-box {
  position: absolute;
  right: 6px;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
}

.landing-hero__flow-step.is-active .landing-hero__flow-vial--a {
  animation: landing-hero-flow-vial-a 1.6s ease-in 0.3s forwards;
}

.landing-hero__flow-step.is-active .landing-hero__flow-vial--b {
  animation: landing-hero-flow-vial-b 1.6s ease-in 0.55s forwards;
}

.landing-hero__flow-step.is-active .landing-hero__flow-vial--c {
  animation: landing-hero-flow-vial-c 1.6s ease-in 0.8s forwards;
}

@keyframes landing-hero-flow-vial-a {
  0% { opacity: 1; transform: translate(0, 0) rotate(-12deg) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(26px, 2px) rotate(-12deg) scale(0.3); }
}

@keyframes landing-hero-flow-vial-b {
  0% { opacity: 1; transform: translate(0, 0) rotate(10deg) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(16px, 12px) rotate(10deg) scale(0.3); }
}

@keyframes landing-hero-flow-vial-c {
  0% { opacity: 1; transform: translate(0, 0) rotate(-6deg) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(16px, -6px) rotate(-6deg) scale(0.3); }
}

/* Step 5's "truck backs in, opens up, package flies into the mailbox"
   drop-off scene — same wider rounded-rect treatment as step 2's, just
   wider again to fit both vehicles. Built from small plain shapes (not a
   full illustration) since the whole scene renders at icon scale. */
.landing-hero__flow-icon--dropoff {
  width: 96px;
  border-radius: 16px;
  justify-content: space-between;
  padding-inline: 8px;
}

.landing-hero__flow-truck {
  position: relative;
  display: inline-flex;
  opacity: 0;
  transform: translateX(-24px);
}

.landing-hero__flow-truck svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.landing-hero__flow-trunk {
  position: absolute;
  right: -3px;
  top: 3px;
  width: 5px;
  height: 9px;
  border-radius: 1px;
  opacity: 0;
  transform-origin: bottom center;
}

.landing-hero__flow-package {
  position: absolute;
  left: 32px;
  top: 15px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  opacity: 0;
}

.landing-hero__flow-mailbox {
  position: relative;
  display: inline-flex;
}

.landing-hero__flow-mailbox svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.landing-hero__flow-mailbox-flap {
  position: absolute;
  left: 2px;
  top: 5px;
  width: 9px;
  height: 3px;
  border-radius: 1px;
  transform-origin: left center;
}

.landing-hero__flow-step.is-active .landing-hero__flow-truck {
  animation: landing-hero-flow-truck-in 0.7s ease-out forwards;
}

.landing-hero__flow-step.is-active .landing-hero__flow-trunk {
  animation: landing-hero-flow-trunk-open 0.4s ease-out 0.7s forwards;
}

.landing-hero__flow-step.is-active .landing-hero__flow-package {
  animation: landing-hero-flow-package-fly 1s ease-in-out 1.1s forwards;
}

.landing-hero__flow-step.is-active .landing-hero__flow-mailbox-flap {
  animation: landing-hero-flow-flap 1.3s ease-in-out 1.5s forwards;
}

@keyframes landing-hero-flow-truck-in {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes landing-hero-flow-trunk-open {
  0% { opacity: 0; transform: rotate(0deg); }
  100% { opacity: 1; transform: rotate(-35deg); }
}

@keyframes landing-hero-flow-package-fly {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  55% { opacity: 1; transform: translate(26px, -8px) rotate(90deg); }
  100% { opacity: 0; transform: translate(42px, 2px) rotate(160deg); }
}

@keyframes landing-hero-flow-flap {
  0%, 100% { transform: rotate(0deg); }
  40%, 70% { transform: rotate(-70deg); }
}

.landing-hero__flow-progress {
  display: flex;
  gap: 6px;
}

.landing-hero__flow-progress-seg {
  flex: 1 1 0;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(14, 31, 28, 0.1);
  overflow: hidden;
  cursor: pointer;
}

.landing-hero__flow-progress-seg:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.landing-hero__flow-progress-seg > span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  border-radius: inherit;
}

.landing-hero__flow-progress-seg.is-done > span {
  transform: scaleX(1);
}

.landing-hero__flow-progress-seg.is-active > span {
  animation: landing-hero-flow-fill var(--flow-step-duration, 4.9s) linear forwards;
}

/* scripts/site/shipping-flow.js sets data-paused while auto-advance is held
   (hover, focus or the Pause button) so the bar stops with the timer. */
.landing-hero__flow[data-paused] .landing-hero__flow-progress-seg.is-active > span {
  animation-play-state: paused;
}

.landing-hero__flow-progress {
  align-items: center;
}

@keyframes landing-hero-flow-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* Small, distinct motion cues reused from the earlier static points: a
   Chrome-dinosaur-style scrolling "road" under the stationary delivery
   truck, a location pin's radar ping, and a slow, gentle breathe for
   discreet packing rather than anything attention-grabbing. The road
   line's dashed stroke inherits its colour from the step's own `stroke`
   colour override below. A subtle vertical bob layers on top of the road
   scroll so the truck itself reads as "driving", not just idling. */
.landing-hero__stats-road {
  stroke-dasharray: 2.2 2.6;
  opacity: 0.6;
  animation: landing-hero-stats-road 0.7s linear infinite;
}

@keyframes landing-hero-stats-road {
  to {
    stroke-dashoffset: -4.8;
  }
}

.landing-hero__flow-step.is-active .landing-hero__flow-icon--road svg {
  animation: landing-hero-flow-drive 0.45s ease-in-out infinite;
}

@keyframes landing-hero-flow-drive {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.2px); }
}

.landing-hero__flow-icon--pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1.5px solid #3b6ea5;
  opacity: 0;
  animation: landing-hero-stats-pulse 2.2s ease-out infinite;
}

@keyframes landing-hero-stats-pulse {
  0% {
    transform: scale(0.8);
    opacity: 0.65;
  }
  70%,
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

.landing-hero__flow-icon--breathe svg {
  animation: landing-hero-stats-breathe 2.6s ease-in-out infinite;
  transform-origin: center;
}

@keyframes landing-hero-stats-breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-hero__flow-progress {
    display: none;
  }

  .landing-hero__flow-stage {
    height: auto;
  }

  .landing-hero__flow-step {
    transition: none;
    position: static;
    opacity: 1;
    transform: none;
    padding-bottom: 14px;
  }

  .landing-hero__flow-step:not(:last-child) {
    border-bottom: 1px solid var(--line);
    margin-bottom: 14px;
  }

  /* The typewriter/vial/truck-drop-off decorations all rely on .is-active
     for their visible resting state, but JS only ever adds .is-active to
     step 1 under reduced motion (autoplay is skipped, see
     shipping-flow.js) — so steps 2-5's versions would never trigger and
     .landing-hero__flow-truck would stay stuck invisible off to the left.
     Give the code its full static text, hide the purely-transient mid-
     motion pieces (a package frozen mid-flight means nothing on its own),
     and force the truck to its plain, visible resting position. */
  .landing-hero__flow-code {
    width: 13ch;
    border-right-color: transparent;
    animation: none;
  }

  .landing-hero__flow-vial,
  .landing-hero__flow-trunk,
  .landing-hero__flow-package {
    display: none;
  }

  .landing-hero__flow-truck {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .landing-hero__flow-mailbox-flap {
    animation: none;
  }

  .landing-hero__flow-icon--road svg,
  .landing-hero__stats-road,
  .landing-hero__flow-icon--pulse::after,
  .landing-hero__flow-icon--breathe svg {
    animation: none;
  }
}

.landing-hero__photos {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.landing-hero__photo {
  position: absolute;
  z-index: 1;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.28));
}

/* Smaller, further back, with a lighter/closer shadow so they read as
   sitting behind the main cluster instead of just "smaller bottles". */
.landing-hero__photo--back {
  z-index: 0;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.16));
}

.landing-hero__photo-float {
  animation: landing-hero-float 5s ease-in-out infinite;
}

/* Product photos are 3:4; reserving that shape stops the canvas jumping
   from its default 300x150 to full height once the photo is drawn (CLS). */
.landing-hero__photo canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
}

/* Front cluster: three overlapping bottles like a real product-shot pile,
   big enough to read the labels, instead of six small bottles scattered
   apart across the whole cell. */
.landing-hero__photo--ghk {
  left: 15%;
  bottom: 2%;
  width: clamp(155px, 30%, 280px);
  transform: rotate(-7deg);
}

.landing-hero__photo--bpc {
  left: 50%;
  bottom: 0;
  width: clamp(180px, 35%, 320px);
  transform: translateX(-50%) rotate(2deg);
}

.landing-hero__photo--bpc .landing-hero__photo-float {
  animation-name: landing-hero-float-soft;
  animation-duration: 6s;
  animation-delay: 0.6s;
}

.landing-hero__photo--reta {
  right: 13%;
  bottom: 4%;
  width: clamp(150px, 29%, 275px);
  transform: rotate(8deg);
}

.landing-hero__photo--reta .landing-hero__photo-float {
  animation-name: landing-hero-float-soft;
  animation-duration: 5.5s;
  animation-delay: 1.1s;
}

/* Back cluster: smaller, peeking out from behind the front three near the
   top of the pile. Sized up from an earlier, noticeably smaller pass — the
   source photos are the same resolution as the front row, but at ~17-18%
   width the fine print on the label (purity/usage line) didn't have enough
   pixels left to stay crisp and read as "low quality" rather than "small". */
.landing-hero__photo--semax {
  left: 10%;
  top: 6%;
  width: clamp(120px, 21%, 200px);
  transform: rotate(-11deg);
}

.landing-hero__photo--semax .landing-hero__photo-float {
  animation-name: landing-hero-float-soft;
  animation-duration: 6.5s;
  animation-delay: 0.2s;
}

.landing-hero__photo--ipa {
  left: 50%;
  top: 0%;
  width: clamp(126px, 22%, 205px);
  transform: translateX(-50%) rotate(4deg);
}

.landing-hero__photo--ipa .landing-hero__photo-float {
  animation-name: landing-hero-float;
  animation-duration: 4.5s;
  animation-delay: 0.9s;
}

.landing-hero__photo--klow {
  right: 9%;
  top: 7%;
  width: clamp(120px, 21%, 200px);
  transform: rotate(-6deg);
}

.landing-hero__photo--klow .landing-hero__photo-float {
  animation-name: landing-hero-float-soft;
  animation-duration: 5.8s;
  animation-delay: 1.4s;
}

/* The cell is ~480px tall on desktop while its width keeps growing, so
   width-only sizing let the front bottles fill ~90 % of the height on wide
   screens and hide the back row (only a cap peeked out behind BPC-157).
   Cap each bottle by the cell height as well, keeping the proportions of the
   ~800px layout where the back labels stay readable. */
@supports (width: 1cqh) {
  .landing-hero__photos { container-type: size; }

  @media (min-width: 901px) {
    .landing-hero__photo--ghk { width: clamp(155px, min(30%, 49cqh), 280px); }
    .landing-hero__photo--bpc { width: clamp(180px, min(35%, 57cqh), 320px); }
    .landing-hero__photo--reta { width: clamp(150px, min(29%, 47.5cqh), 275px); }
    .landing-hero__photo--semax { width: clamp(120px, min(21%, 34cqh), 200px); }
    .landing-hero__photo--ipa { width: clamp(126px, min(22%, 36cqh), 205px); }
    .landing-hero__photo--klow { width: clamp(120px, min(21%, 34cqh), 200px); }
  }
}

@keyframes landing-hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes landing-hero-float-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .landing-hero__photo-float {
    animation: none;
  }
}

/* Widened from the old 760px so the bottle cluster (and the hero text
   column) never has to render in an in-between ~380-450px-wide half-column
   — below this, everything stacks to full page width instead. */
@media (max-width: 900px) {
  .landing-hero {
    /* minmax(0, …): a wide child (the sale buttons) must not widen the
       column past a 320px screen. */
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }

  .landing-hero__cell--photos {
    order: -1;
    min-height: clamp(360px, 105vw, 480px);
  }

  /* Stacked layout: photos has no left neighbour any more (full width), so
     drop that fade and stretch the bottom-edge one much further — its
     cell is shorter here than on desktop, so the same percentage stops as
     the desktop rule cover far fewer pixels and read as a sudden cut
     rather than a fade. `scroll` (instead of `fixed`) also keeps the
     underlying aurora positioned relative to this cell's own (short) box
     consistently across mobile browsers, rather than the full viewport. */
  html body .landing-hero__cell--photos {
    background-attachment: scroll !important;
  }

  html body .landing-hero__cell--photos::before {
    background:
      linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0.85) 15%, rgba(255, 255, 255, 0.55) 35%, rgba(255, 255, 255, 0.22) 55%, rgba(255, 255, 255, 0) 78%) !important;
  }

  /* Stacked layout: the offers cell now also borders stats directly below
     it (not just to the side), so fade that edge to white here too. */
  html body .landing-hero__cell--offers::before {
    background:
      linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.7) 10%, rgba(255, 255, 255, 0.3) 22%, rgba(255, 255, 255, 0) 38%),
      linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0.7) 10%, rgba(255, 255, 255, 0.3) 22%, rgba(255, 255, 255, 0) 38%) !important;
  }

  /* Smaller minimum bounds so the cluster's own min-width floor doesn't
     push bottles past the narrower cell's edges (the desktop mins are
     sized for a ~600px+ wide cell). */
  .landing-hero__photo--ghk { left: 18%; width: clamp(110px, 30%, 280px); }
  .landing-hero__photo--bpc { width: clamp(125px, 35%, 320px); }
  .landing-hero__photo--reta { right: 16%; width: clamp(107px, 29%, 275px); }
  .landing-hero__photo--semax { left: 14%; width: clamp(85px, 21%, 200px); }
  .landing-hero__photo--ipa { width: clamp(90px, 22%, 205px); }
  .landing-hero__photo--klow { right: 13%; width: clamp(85px, 21%, 200px); }
}

@media (max-width: 440px) {
  .landing-hero__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .landing-hero__actions .button {
    width: 100%;
  }
}

h1,
h2,
h3 {
  font-family: var(--font-brand);
  font-weight: 700;
  letter-spacing: -0.04em;
}

h1,
h2,
h3,
h4,
h5,
h6,
.product-card-link {
  text-transform: uppercase;
}

.footer {
  margin-top: 24px;
  padding-top: 10px;
  font-size: 14px;
  color: var(--muted);
}

.site-nav {
  display: flex;
  gap: 12px clamp(20px, 2.4vw, 34px);
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  min-width: 0;
}

header .site-nav a {
  white-space: nowrap;
}

.site-nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.58);
  font-family: var(--font-data);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.site-nav a:hover {
  transform: translateY(-1px);
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.68);
}

.site-nav a.is-active {
  border-color: rgba(33, 77, 70, 0.22);
  background: var(--accent-gradient);
  color: #fff9f1;
}

.nav > a.market-switcher,
.site-nav > a.market-switcher {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 11px !important;
  border-radius: 999px;
  letter-spacing: 0.06em;
}

.market-switcher__flag {
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0;
}

.market-switcher__code {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-family: var(--font-data);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.nav-dropdown__button:hover,
.nav-dropdown.is-open .nav-dropdown__button,
.nav-dropdown.is-active .nav-dropdown__button {
  border-color: rgba(33, 77, 70, 0.22);
  background: rgba(215, 236, 228, 0.72);
  color: #214d46;
}

.nav-dropdown__button:hover {
  transform: translateY(-1px);
}

.nav-dropdown__chevron {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 220ms ease;
}

.nav-dropdown.is-open .nav-dropdown__chevron {
  transform: rotate(225deg) translate(-1px, -1px);
}

.nav-dropdown__panel {
  position: absolute;
  z-index: 10;
  top: calc(100% + 8px);
  left: 50%;
  display: grid;
  gap: 6px;
  width: max-content;
  min-width: 178px;
  max-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -6px);
  transform-origin: top center;
  transition: max-height 220ms ease, padding 220ms ease, opacity 180ms ease, transform 220ms ease, border-color 220ms ease;
}

.nav-dropdown.is-open .nav-dropdown__panel {
  max-height: 130px;
  padding: 0;
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav-dropdown__panel a {
  width: auto !important;
  padding: 10px 12px;
  border: 1px solid rgba(33, 77, 70, 0.2);
  border-radius: 999px;
  background: transparent;
}

.nav-dropdown__panel a:hover,
.nav-dropdown__panel a.is-active {
  transform: none;
  background: rgba(215, 236, 228, 0.72);
}

.site-nav-toggle {
  display: none;
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-family: var(--font-data);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.product-detail.product-hub {
  max-width: none;
  margin: 32px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.product-hub > #catalog.section {
  margin-top: 26px;
  padding: 28px 0 0;
}

.product-hub > #catalog .section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.product-hub > #catalog .section-head h1 {
  margin: 0;
  font-size: clamp(28px, 3.3vw, 42px);
  letter-spacing: -0.03em;
}

.checkout-page .layout,
.checkout-page .layout > * {
  min-width: 0;
}

.checkout-page .panel > * {
  min-width: 0;
}

.product-hub .catalog-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 12px;
}

.product-hub .catalog-tools input,
.product-hub .catalog-tools select {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-strong);
  color: var(--ink);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.product-hub .catalog-tools input {
  flex: 1 1 240px;
  min-width: 180px;
}

.product-hub .catalog-tools select {
  flex: 0 1 190px;
}

.product-hub .catalog-tools input:hover,
.product-hub .catalog-tools input:focus-visible,
.product-hub .catalog-tools select:hover,
.product-hub .catalog-tools select:focus-visible {
  border-color: rgba(55, 128, 111, 0.58);
  box-shadow:
    0 0 0 1px rgba(55, 128, 111, 0.28),
    0 0 24px rgba(91, 174, 149, 0.22),
    var(--shadow);
  transform: translateY(-1px);
}

.product-hub .catalog {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}

.product-hub .card {
  grid-column: span 4;
  min-height: 420px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(90deg, rgba(18, 33, 30, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(230, 241, 238, 0.82));
  background-size: 42px 100%, auto;
  box-shadow: 0 18px 46px rgba(14, 31, 28, 0.10);
}

.product-hub .card-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: auto;
}

@media (max-width: 980px) {
  .product-hub .catalog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-hub .card {
    grid-column: span 1;
  }
}

@media (max-width: 700px) {
  .product-hub .catalog {
    grid-template-columns: 1fr;
  }

  .product-hub .card-actions {
    flex-wrap: wrap;
  }
}

.product-detail {
  max-width: 980px;
  margin: 32px auto 0;
  padding: clamp(24px, 5vw, 56px);
  border: 1px solid rgba(31, 26, 23, 0.16);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow);
}

.product-detail__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.product-detail__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  align-items: start;
  gap: 24px;
  margin-top: 28px;
}

.product-detail h1 { margin: 28px 0 10px; font-size: clamp(36px, 6vw, 64px); }
.product-detail__purchase { width: min(320px, 100%); display: grid; align-content: start; gap: 18px; padding: 22px; border: 1px solid rgba(33, 77, 70, 0.18); border-radius: var(--radius-lg); background: rgba(255, 252, 247, 0.76); }
.product-detail .pill { display: inline-flex; align-items: center; padding: 8px 12px; border: 1px solid var(--pill-metal-border); border-radius: 999px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; background: var(--pill-metal-bg); color: var(--pill-metal-text); box-shadow: var(--pill-metal-shadow); }
.mg-pill {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  min-height: 38px;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 999px;
  background: rgba(247, 252, 250, 0.72);
  color: var(--accent-3);
  font-family: var(--font-data);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: none;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.mg-pill:hover,
.mg-pill:focus-visible,
.mg-pill:active {
  transform: translateY(-1px);
  border-color: rgba(55, 128, 111, 0.58);
  box-shadow:
    0 0 0 1px rgba(55, 128, 111, 0.28),
    0 0 24px rgba(91, 174, 149, 0.22),
    var(--shadow);
}

.mg-pill.is-active {
  background: var(--accent-gradient);
  border-color: transparent;
  color: var(--dose-active-text);
  box-shadow:
    0 0 0 1px rgba(92, 165, 154, 0.30),
    0 12px 24px rgba(27, 81, 75, 0.18);
}
.pill.status-available,
.product-detail .pill.status-available {
  background: var(--color-status-available-background);
  border-color: var(--color-status-available-border);
  color: var(--color-status-available-text);
  box-shadow: inset 0 0 0 1px var(--color-status-available-border);
}
.pill.status-coming-soon,
.product-detail .pill.status-coming-soon {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--badge-coming-bg);
  color: var(--badge-coming-text);
  box-shadow:
    inset 0 0 0 1px var(--badge-coming-border),
    0 0 18px var(--badge-coming-glow);
}
.product-detail .pill.status-soldout { background: var(--badge-soldout-bg); color: var(--badge-soldout-text); box-shadow: inset 0 0 0 1px var(--badge-soldout-border); }
.mg-pill.is-coming-soon,
.mg-pill.is-coming-soon:hover,
.mg-pill.is-coming-soon:focus-visible,
.mg-pill.is-coming-soon.is-active,
.product-quick-view__variant.is-coming-soon,
.product-quick-view__variant.is-coming-soon:hover,
.product-quick-view__variant.is-coming-soon.is-active,
.product-detail .product-variant.is-coming-soon,
.product-detail .product-variant.is-coming-soon:hover,
.product-detail .product-variant.is-coming-soon.is-active {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--badge-coming-bg) !important;
  border-color: var(--badge-coming-border) !important;
  color: var(--badge-coming-text) !important;
  box-shadow:
    inset 0 0 0 1px var(--badge-coming-border),
    0 0 18px var(--badge-coming-glow) !important;
}
.pill.status-coming-soon::after,
.product-detail .pill.status-coming-soon::after,
.mg-pill.is-coming-soon::after,
.product-quick-view__variant.is-coming-soon::after,
.product-detail .product-variant.is-coming-soon::after {
  content: "";
  position: absolute;
  inset: -120% auto -120% -46%;
  z-index: 0;
  width: 34%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 245, 210, 0.62), transparent);
  opacity: 0;
  transform: translateX(-260%) skewX(-18deg);
  animation: coming-soon-shine 3.6s cubic-bezier(0.42, 0, 0.28, 1) infinite;
}
.pill.status-soldout,
.mg-pill.is-soldout,
.product-detail .pill.status-soldout,
.product-detail .product-variant.is-soldout {
  background: var(--color-status-soldout-background) !important;
  background-size: 220% 100%;
  background-position: 0% 50%;
  border-color: var(--color-status-soldout-border) !important;
  color: var(--color-status-soldout-text) !important;
  animation: soldout-stripes 2.4s linear infinite;
}

@keyframes soldout-stripes {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@keyframes coming-soon-shine {
  0%, 18% {
    opacity: 0;
    transform: translateX(-260%) skewX(-18deg);
  }
  36%, 66% { opacity: 0.58; }
  82%, 100% {
    opacity: 0;
    transform: translateX(520%) skewX(-18deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pill.status-coming-soon,
  .mg-pill.is-coming-soon,
  .product-quick-view__variant.is-coming-soon,
  .product-detail .product-variant.is-coming-soon,
  .product-detail .pill.status-coming-soon {
    animation: none !important;
    background-position: 50% 50%;
  }

  .pill.status-coming-soon::after,
  .mg-pill.is-coming-soon::after,
  .product-quick-view__variant.is-coming-soon::after,
  .product-detail .product-variant.is-coming-soon::after {
    animation: none !important;
    opacity: 0 !important;
  }

  .pill.status-soldout,
  .mg-pill.is-soldout,
  .product-detail .pill.status-soldout,
  .product-detail .product-variant.is-soldout {
    animation: none;
    background-position: 50% 50%;
  }
}
.product-detail .variant-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 6px; }
.card > .variant-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  width: 100%;
  margin: 14px 0 8px;
  padding: 8px;
  border: 1px solid var(--spec-rule);
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, rgba(18, 33, 30, 0.16) 0 1px, transparent 1px 28px),
    linear-gradient(90deg, rgba(217, 235, 232, 0.82), rgba(248, 251, 250, 0.72));
}

.card > .variant-pills::before {
  content: "MG";
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  padding: 0 10px;
  border-right: 1px solid var(--spec-rule);
  color: var(--accent);
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.card-specline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 12px;
  align-items: center;
  margin: 16px 0 0;
  padding: 9px 0;
  border-top: 1px solid var(--spec-rule);
  border-bottom: 1px solid var(--spec-rule);
  color: var(--muted);
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card-specline strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-weight: 800;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-specline label {
  color: var(--muted);
}

.card-strength-select {
  min-width: 0;
  max-width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: right;
  text-transform: uppercase;
  cursor: pointer;
}

.card-strength-select:focus-visible {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: 3px;
  border-radius: 4px;
}

.card-strength-select option {
  background: var(--surface-strong);
  color: var(--ink);
}

.card-title-row {
  min-width: 0;
  margin-top: 16px;
}

.card-title-row h3 {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.product-card-image {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin: -4px -4px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(131, 185, 169, 0.08);
}
.media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--accent);
  font-size: clamp(20px, 6vw, 32px);
  line-height: 1;
}
.media-placeholder[hidden] { display: none; }
.product-card-image img,
.product-detail__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.product-card-image img[hidden],
.product-detail__image img[hidden] {
  display: none;
}
.product-card-image img {
  position: relative;
  z-index: 1;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transition: opacity 180ms ease;
}
.product-card-image img.is-loaded { opacity: 1; }
.product-card-image .media-placeholder { position: absolute; inset: 0; }
.product-card-image:has(img.is-loaded:not([hidden])) .media-placeholder { display: none; }
.product-detail__image img {
  object-fit: contain;
  object-position: center;
}
.product-detail__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin: 28px 0 0;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(131, 185, 169, 0.14), transparent 52%),
    rgba(27, 41, 37, 0.48);
}
.product-detail__hero .product-detail__image { margin-top: 0; }
.product-detail .product-variant { cursor: pointer; border-color: rgba(31, 26, 23, 0.08); background: rgba(255, 255, 255, 0.82); color: var(--accent-3); text-transform: none; letter-spacing: 0.02em; transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease; }
.product-detail .product-variant:hover,
.product-detail .product-variant:focus-visible,
.product-detail .product-variant:active {
  transform: translateY(-1px);
  border-color: rgba(55, 128, 111, 0.58);
  background: rgba(215, 236, 228, 0.72);
  color: var(--accent);
  box-shadow:
    0 0 0 1px rgba(55, 128, 111, 0.28),
    0 0 24px rgba(91, 174, 149, 0.22),
    var(--shadow);
}
.product-detail .product-variant.is-active {
  border-color: transparent;
  background: var(--accent-gradient);
  color: #fff9f1;
  box-shadow:
    0 0 0 1px rgba(55, 128, 111, 0.28),
    0 0 24px rgba(91, 174, 149, 0.22),
    var(--shadow);
}
.product-detail .product-variant.is-soldout { border-color: rgba(166, 69, 53, 0.38); color: #a64535; }
.product-detail .meta { display: grid; gap: 0; }
.product-detail .meta-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(31, 26, 23, 0.1); color: var(--muted); }
.product-detail .meta-row strong { color: var(--ink); text-align: right; }
.meta-row--strength,
.meta-row--stock { font-family: var(--font-data); text-transform: uppercase; }
.card-actions .button,
.product-quick-view__actions .button,
.product-detail__add { font-family: var(--font-data); text-transform: uppercase; }
.product-detail__meta { display: grid; gap: 0; }
.product-detail__add { width: 100%; }

.cart-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  max-width: min(420px, calc(100vw - 40px));
  padding: 12px 14px 12px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-strong);
  color: var(--ink);
  box-shadow: var(--shadow);
  animation: cart-toast-in 220ms ease-out both;
}

.cart-toast[hidden] { display: none; }
/* The sitewide `body *` rule strips backgrounds, which left the toast see-through
   over page text. A solid dark pill keeps it readable anywhere. */
body #cart-toast { background: #0b1f2e !important; border-color: #0b1f2e !important; box-shadow: 0 12px 30px rgba(11, 31, 46, 0.28) !important; }
body #cart-toast span { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
body #cart-toast button { min-height: 32px; background: transparent !important; border: 0 !important; box-shadow: none !important; color: #9fe0cf !important; -webkit-text-fill-color: #9fe0cf !important; }
.cart-toast button { border: 0; background: transparent; color: var(--accent); font: inherit; font-weight: 800; cursor: pointer; }

.catalog-extras { display: grid; gap: 18px; margin-top: 22px; }
.catalog-extra-panel { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow); }
.section-head--compact { margin-bottom: 16px; }
.section-head--compact h3 { margin: 8px 0 0; font-size: clamp(22px, 3vw, 30px); }
.catalog-extra-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.catalog-extra-card { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-strong); }
.catalog-extra-card h4 { margin: 0; font-size: 17px; }
.section-head p,
body p,
body li,
body small,
.note,
.card-more__list,
.bundle-builder__intro p,
.bundle-builder__summary p,
.accessory-card p,
.info p,
.info li {
  font-family: var(--font-description);
  letter-spacing: 0.01em;
}

.product-variants {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-variants li {
  position: relative;
  padding-left: 14px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

.product-variants li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent);
}

.product-variants {
  margin-top: 18px;
}

.catalog-extra-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.product-quick-view { width: min(620px, calc(100vw - 28px)); max-width: 620px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel-strong); color: var(--ink); box-shadow: var(--shadow); }
.product-quick-view::backdrop { background: rgba(16, 24, 22, 0.5); backdrop-filter: blur(3px); }
.product-quick-view__inner { display: grid; gap: 18px; padding: 26px; }
.product-quick-view__top { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.product-quick-view__top h2 { margin: 8px 0 0; font-size: clamp(28px, 5vw, 42px); }
.product-quick-view__close { flex: 0 0 auto; min-width: 42px; min-height: 42px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; font-size: 22px; }
.product-quick-view__meta { display: grid; gap: 0; }
.product-quick-view__actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 800px) {
  .catalog-extra-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .catalog-extra-grid { grid-template-columns: 1fr; }
  .catalog-extra-panel { padding: 17px; }
  .product-quick-view__inner { padding: 20px; }
}

@media (max-width: 430px) {
  .eyebrow,
  .pill {
    font-size: clamp(12px, 3.1vw, 13px);
    line-height: 1.25;
  }
}

@media (max-width: 430px) {
  .product-detail__top {
    flex-wrap: wrap;
    gap: 12px;
  }

  .product-detail .pill {
    max-width: 100%;
  }
}

@media (max-width: 320px) {
  .eyebrow {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@keyframes cart-toast-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.top-actions { position: relative; }
.cart-preview-backdrop {
  position: fixed;
  z-index: 80;
  inset: 0;
  border: 0;
  background: rgba(13, 25, 23, 0.68);
  backdrop-filter: blur(2px);
}
.cart-preview-backdrop[hidden] { display: none; }
.cart-preview-open { overflow: hidden; }
.cart-preview {
  position: fixed;
  z-index: 81;
  top: 0;
  right: 0;
  bottom: 0;
  /* 30rem matches the compact reference at 100% and follows browser zoom. */
  width: min(30rem, 100vw);
  padding: 22px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: var(--bg-soft);
  color: var(--ink);
  box-shadow: -24px 0 60px rgba(13, 25, 23, 0.28);
  animation: cart-preview-in 180ms ease-out both;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cart-preview[hidden] { display: none; }
.cart-preview.is-closing { animation: cart-preview-out 180ms ease-in both; }
.cart-preview__header,
.cart-preview__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cart-preview__header { flex: 0 0 auto; padding-bottom: 16px; border-bottom: 1px solid var(--line); font-size: 20px; }
.cart-preview__close { border: 0; background: transparent; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; }
.cart-preview__items { display: grid; align-content: start; gap: 14px; flex: 1 1 auto; min-height: 0; overflow: auto; padding: 18px 0 22px; }
.cart-preview .cart-item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-areas: "image main";
  gap: 18px;
  min-width: 0;
  padding: 16px 18px;
  align-items: stretch;
  border: 1px solid rgba(131, 185, 169, 0.24);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(131, 185, 169, 0.12), transparent 46%),
    rgba(35, 57, 51, 0.28);
  box-shadow: inset 0 0 0 1px rgba(131, 185, 169, 0.04);
}
.cart-preview .cart-item--preview { align-items: center; }
.cart-preview .cart-item__image { grid-area: image; align-self: center; display: grid; place-items: center; width: 96px; height: 96px; overflow: hidden; border: 1px solid rgba(131, 185, 169, 0.22); border-radius: 20px; background: rgba(255, 255, 255, 0.03); }
.cart-preview .cart-item--preview .cart-item__image { grid-column: 1; align-self: center; }
.cart-preview .cart-item__image img { display: block; width: auto; height: auto; max-width: 82%; max-height: 92%; object-fit: contain; object-position: center; transform: translateY(4%) scale(1.08); transform-origin: center; }
.cart-preview .cart-item__main { grid-area: main; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "summary" "deal" "controls"; gap: 10px; align-items: start; }
.cart-preview .cart-item--preview .cart-item__main { grid-column: auto; }
.cart-preview .cart-item__summary { grid-area: summary; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 12px; }
.cart-preview .cart-item--preview .cart-item__summary { display: grid; justify-content: start; gap: 8px; align-self: center; }
.cart-preview .cart-item__title { display: grid; gap: 3px; min-width: 0; }
.cart-preview .cart-item--preview .cart-item__title { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: nowrap; }
.cart-preview .cart-item__title strong { margin: 0; display: block; min-width: 0; flex: 0 1 auto; overflow: hidden; color: var(--ink); font-size: 19px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.cart-preview .cart-item__title span { color: var(--muted); font-size: 17px; line-height: 1.35; white-space: nowrap; }
.cart-preview .cart-item__separator { flex: 0 0 auto; color: var(--muted); }
.cart-preview .cart-item-price { color: var(--ink); font-size: 18px; white-space: nowrap; flex-shrink: 0; }
.cart-preview .cart-item__controls { grid-area: controls; display: grid; justify-items: end; gap: 6px; justify-self: end; min-width: 0; }
.cart-preview .cart-item__controls-price { display: flex; justify-content: flex-end; width: 100%; }
.cart-preview .cart-item--preview .cart-item__controls { align-self: center; justify-self: end; flex-wrap: nowrap; }
.cart-preview .cart-item--preview {
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  min-height: 60px;
  padding: 8px 12px;
  border-radius: 16px;
}
.cart-preview .cart-item--preview .cart-item__image { width: 44px; height: 44px; border-radius: 12px; }
.cart-preview .cart-item--preview .cart-item__main {
  display: grid;
  grid-template-columns: minmax(64px, 0.8fr) minmax(108px, 1fr) max-content;
  grid-template-areas: "summary deal controls";
  gap: 8px;
  align-items: center;
}
.cart-preview .cart-item--preview .cart-item__summary { gap: 0; min-width: 0; }
.cart-preview .cart-item--preview .cart-item__title { gap: 4px; }
.cart-preview .cart-item--preview .cart-item__title strong { font-size: 13px; line-height: 1.1; }
.cart-preview .cart-item--preview .cart-item__title span { font-size: 12px; line-height: 1.1; }
.cart-preview .cart-item--preview .cart-item__controls { display: flex; align-items: center; gap: 8px; }
.cart-preview .cart-item--preview .cart-item__controls-price { width: auto; }
.cart-preview .cart-item--preview .quantity-control { gap: 6px; min-height: 26px; }
.cart-preview .cart-item--preview .cart-icon-button { width: 22px; height: 22px; font-size: 18px; }
.cart-preview .cart-item--preview .cart-trash { width: 24px; height: 24px; }
.cart-preview .cart-item--preview .cart-trash svg { width: 14px; height: 14px; }
.cart-preview .cart-item--preview .quantity-value { width: 3ch; min-width: 3ch; height: 24px; min-height: 24px; font-size: 16px; line-height: 24px; }
.cart-preview .quantity-control { display: inline-flex; align-items: center; justify-content: flex-end; gap: clamp(18px, 3vw, 34px); min-height: 38px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--qty-color); }
.cart-preview .cart-icon-button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--qty-color); font: inherit; font-size: 22px; font-weight: 800; line-height: 1; }
.cart-preview .cart-icon-button:hover,
.cart-preview .cart-icon-button:focus-visible { color: #f0cec2; background: transparent; box-shadow: none; }
.cart-preview .cart-trash { width: 34px; height: 34px; border-color: transparent; background: transparent; color: var(--qty-trash-color); }
.cart-preview .cart-trash:hover,
.cart-preview .cart-trash:focus-visible { color: #ffc8c0; }
.cart-preview .quantity-value { width: 5ch; min-width: 5ch; height: 30px; min-height: 30px; box-sizing: content-box; flex: 0 0 auto; padding: 0; border: 0; background: transparent !important; color: var(--qty-color); font: inherit; font-size: 18px; font-weight: 800; line-height: 30px; text-align: center; appearance: textfield; -webkit-appearance: none; }
.cart-preview .quantity-value::-webkit-inner-spin-button,
.cart-preview .quantity-value::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.cart-preview .cart-trash svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.cart-preview__footer { padding-top: 12px; border-top: 1px solid var(--line); }
/* Keeps the drawer total's amount ("1 234 NOK") on one line. */
.cart-preview__footer strong span { white-space: nowrap; }
.cart-preview__footer .button-primary {
  border-color: transparent !important;
  background: var(--accent-gradient) !important;
  color: #fff9f1 !important;
  box-shadow: 0 12px 30px rgba(33, 77, 70, 0.2) !important;
}
.cart-preview__empty { align-self: center; margin: auto; color: var(--muted); text-align: center; }

@media (max-width: 520px) {
  .cart-preview .cart-item { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
  .cart-preview .cart-item__image { width: 76px; height: 76px; border-radius: 16px; }
  .cart-preview .cart-item__main { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cart-preview .cart-item__summary { grid-template-columns: minmax(0, 1fr); }
  .cart-preview .cart-item__controls { justify-self: end; }
  .cart-preview .cart-item--preview .cart-item__controls { justify-self: end; }
  .cart-preview .quantity-control { gap: 20px; }
}

@keyframes cart-preview-in {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes cart-preview-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(28px); }
}

@media (prefers-reduced-motion: reduce) {
  .cart-preview,
  .cart-preview.is-closing { animation: none; }
}

@media (max-width: 520px) {
  .cart-preview {
    width: min(420px, calc(100vw - 20px));
    padding: 18px;
  }

  .cart-preview .cart-item {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 14px;
    min-height: 112px;
    padding: 14px;
  }

  .cart-preview .cart-item__image {
    width: 74px;
    height: 74px;
  }

  .cart-preview .cart-item__main {
    gap: 6px;
  }

  .cart-preview .cart-item--preview .cart-item__summary {
    gap: 4px;
  }

  .cart-preview .cart-item__controls {
    gap: 2px;
  }

  .cart-preview .quantity-control {
    gap: 12px;
    min-height: 30px;
  }

  .cart-preview .cart-icon-button {
    width: 26px;
    height: 26px;
  }

  .cart-preview .quantity-value {
    height: 26px;
    min-height: 26px;
    font-size: 17px;
    line-height: 26px;
  }

}

@keyframes auralis-button-shine {
  0%, 70% { transform: translateX(-150%) skewX(-18deg); opacity: 0; }
  76% { opacity: 0.72; }
  88%, 100% { transform: translateX(430%) skewX(-18deg); opacity: 0; }
}

.cart-add:not(:disabled),
#bundle-builder-add:not(:disabled) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.cart-add:not(:disabled)::after,
#bundle-builder-add:not(:disabled)::after {
  content: "";
  position: absolute;
  inset: -60% auto -60% -28%;
  width: 24%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.62), transparent);
  animation: auralis-button-shine 6.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .cart-add:not(:disabled)::after,
  #bundle-builder-add:not(:disabled)::after { animation: none; display: none; }
  .cart-toast { animation: none; }
}
.state-message { margin: 0; color: var(--muted); }

.catalog-coming-soon {
  display: grid;
  justify-items: center;
  gap: 14px;
  max-width: 420px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 48px) 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  text-align: center;
}

.catalog-coming-soon__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: rgba(47, 109, 100, 0.1);
}

.catalog-coming-soon__icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #2f6d64;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.catalog-coming-soon p {
  margin: 0;
  max-width: 34ch;
  line-height: 1.6;
}
.product-card-link { color: inherit; text-decoration: none; }
.product-card-link:hover,
.product-card-link:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.card[data-product-slug] { cursor: pointer; }
@media (max-width: 800px) {
  .product-detail__hero { grid-template-columns: 1fr; }
  .product-detail__purchase { width: 100%; }
}

/* Switch to the compact menu before translated labels and region controls make
   the full desktop row wrap. */
/* The reading column is capped at 1200px, but the shared header carries
   translated labels plus market controls. Collapse it before that content can
   crowd the wordmark on compact laptop windows. */
@media (max-width: 1023px) {
  /* Icon-driven collapsed header: hamburger — centered logo — cart icon,
     all three always visible (the topbar itself is position:sticky), so
     the cart is reachable without opening the menu — this is what makes
     the old fixed bottom "X varer / Se handlekurv" bar redundant. */
  .topbar {
    /* Equal flexible side columns (not `auto`) so the logo sits at the
       header's true midpoint. The hamburger (col 1) and the icon cluster
       (col 2, cart + account) are different widths, so sizing each column
       to its own content shifted the middle logo column — and the logo
       inside it — visibly left of centre by however much wider the icon
       side was; matching 1fr columns absorb that difference equally on
       both sides instead. */
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 6px;
    /* When the menu is open, the toggle and logo both switch to
       position:absolute (to sit at the row's left/right edges) and the nav
       overlay switches to position:fixed — leaving the grid with no
       in-flow children to size itself against, so it collapsed from its
       normal ~66px down to just its own padding. That's what made opening
       look like the header "collapsed": the absolutely-positioned toggle
       and logo were then centering against that shrunken box instead of
       the row's real height. Locking the height keeps it stable either
       way. */
    height: 66px;
  }

  .brand {
    grid-column: 2;
    justify-self: center;
    text-align: center;
    /* Stays painted above the full-screen menu overlay (z-index: 70) so the
       logo is still visible — on the same row as the close button — while
       the menu is open, instead of getting covered by it. */
    position: relative;
    z-index: 75;
  }

  /* Open: pull the logo out of its centered grid cell to flush-left, same
     row as the X — matching the reference layout. `body.nav-open` /
     `.nav-closing` (toggled in navigation.js) drive this instead of
     `.site-nav-toggle.is-open` because .brand is a sibling, not a
     descendant, of the toggle. */
  body.nav-open .brand,
  body.nav-closing .brand {
    /* A grid item that's still assigned a grid-column resolves absolute
       offsets against that column's own area, not the whole grid — and
       since the toggle/nav columns collapse to 0 width once they leave
       flow too, that area ends up an unpredictable sliver instead of the
       full row (this rendered fine on the homepage by coincidence and
       badly everywhere else). grid-column: auto makes it resolve against
       the full .topbar box like a normal absolutely-positioned element. */
    grid-column: auto;
    grid-row: auto;
    position: absolute;
    top: 50%;
    left: 20px;
    justify-self: auto;
    text-align: left;
    transform: translateY(-50%);
  }

  body.nav-open .brand {
    animation: brand-slide-in 260ms ease forwards;
  }

  /* "closes to the left screen": the logo keeps travelling past its open
     position and off the left edge as the menu fades, instead of just
     sitting still while it fades like a plain opacity transition would. */
  body.nav-closing .brand {
    animation: brand-slide-out 280ms ease forwards;
  }

  @keyframes brand-slide-in {
    from { transform: translateY(-50%) translateX(26px); opacity: 0; }
    to { transform: translateY(-50%) translateX(0); opacity: 1; }
  }

  @keyframes brand-slide-out {
    from { transform: translateY(-50%) translateX(0); opacity: 1; }
    to { transform: translateY(-50%) translateX(-70px); opacity: 0; }
  }

  .site-nav-toggle {
    grid-column: 1;
    order: -1;
    position: relative;
    z-index: 80;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-width: 0;
    height: 42px;
    min-height: 0;
    padding: 0;
    border-radius: 12px;
    transition: right 240ms ease, left 240ms ease;
  }

  /* Open: leave its grid cell (the left side, next to the logo) and sit at
     the right edge instead, on the same row as the (still-visible) logo —
     the hamburger and the X it morphs into are the same element but don't
     share a position, per the requested layout. `.is-closing` keeps it
     pinned there for the full close-fade duration too, so it doesn't jump
     back to the left before the overlay behind it has finished fading. */
  .site-nav-toggle.is-open,
  .site-nav-toggle.is-closing {
    /* See the matching note on .brand above: without resetting the grid
       placement too, this resolves against its old grid-column's
       (unpredictable, page-dependent) area instead of the full .topbar. */
    grid-column: auto;
    order: 0;
    position: absolute;
    top: 50%;
    right: 20px;
    left: auto;
    transform: translateY(-50%);
  }

  .site-nav-toggle__icon,
  .site-nav-toggle__icon::before,
  .site-nav-toggle__icon::after {
    display: block;
    width: 19px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .site-nav-toggle__icon {
    position: relative;
  }

  .site-nav-toggle__icon::before,
  .site-nav-toggle__icon::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .site-nav-toggle__icon::before { top: -6px; }
  .site-nav-toggle__icon::after { top: 6px; }

  .site-nav-toggle.is-open .site-nav-toggle__icon,
  .site-nav-toggle.is-closing .site-nav-toggle__icon {
    background: transparent;
  }

  .site-nav-toggle.is-open .site-nav-toggle__icon::before,
  .site-nav-toggle.is-closing .site-nav-toggle__icon::before {
    top: 0;
    transform: rotate(45deg);
  }

  .site-nav-toggle.is-open .site-nav-toggle__icon::after,
  .site-nav-toggle.is-closing .site-nav-toggle__icon::after {
    top: 0;
    transform: rotate(-45deg);
  }

  /* Collapsed: the nav container itself stays put (in its own grid column,
     next to the toggle) but only the cart icon shows in it — the links
     live in the full-screen overlay below, opened by the toggle. */
  .site-nav {
    grid-column: 3;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    /* Only the account and cart icons show here; the base nav's link gap
       (up to 34px, sized for a row of text links) otherwise leaves them
       looking oddly far apart as a pair of icons. */
    gap: 4px;
    width: auto;
  }

  .site-nav > a,
  .site-nav > .nav-dropdown {
    display: none;
  }

  /* Keep region and language controls out of the compact header row. They
     belong in the opened navigation, where they cannot displace the logo or
     cart on narrow screens. */
  .site-nav > .market-switcher,
  .site-nav > .language-switcher {
    display: none !important;
  }

  .site-nav.is-open,
  .site-nav.is-closing {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    /* The closed-state row above is horizontal and right-aligns its one
       visible item (the cart icon) with flex-end — but flex-direction here
       is column, where flex-end means the *bottom*, not the right. Without
       resetting it, the whole link list gets pushed to the bottom of the
       screen instead of starting under the header. */
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    padding: 76px 22px 32px;
    /* !important: without it the sitewide `body * { background-color:
       transparent !important }` monochrome pass strips this, letting the
       page underneath show through the "opaque" overlay. */
    background: #ffffff !important;
    background-image: none !important;
    overflow-y: auto;
    /* Fade + slide instead of an instant cut. `.is-open` and `.is-closing`
       share the fixed/full-screen layout above so there's nothing for the
       transition to jump across but opacity/transform; navigation.js holds
       `.is-closing` on for one transition's length after removing
       `.is-open` so the close has something to animate too. */
    opacity: 0;
    transform: translateY(-14px);
    transition: opacity 240ms ease, transform 240ms ease;
    pointer-events: none;
  }

  .site-nav.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .site-nav.is-open > a:not(.cart-toggle),
  .site-nav.is-closing > a:not(.cart-toggle),
  .site-nav.is-open > .nav-dropdown,
  .site-nav.is-closing > .nav-dropdown {
    display: flex;
  }

  .site-nav.is-open > .market-switcher,
  .site-nav.is-closing > .market-switcher,
  .site-nav.is-open > .language-switcher,
  .site-nav.is-closing > .language-switcher {
    display: flex !important;
    align-self: flex-start;
    margin: 12px 0 0;
  }

  .site-nav.is-open > .language-switcher,
  .site-nav.is-closing > .language-switcher {
    width: 100%;
  }

  .site-nav.is-open .language-switcher__select,
  .site-nav.is-closing .language-switcher__select {
    width: 100%;
    min-height: 52px;
    border-radius: 10px;
    font-size: 15px;
  }

  .site-nav.is-open > a:not(.cart-toggle),
  .site-nav.is-closing > a:not(.cart-toggle),
  .site-nav.is-open > .nav-dropdown__button,
  .site-nav.is-closing > .nav-dropdown__button {
    display: flex;
    width: 100%;
    min-height: 58px;
    padding: 0 2px;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0;
    font-size: 16px;
  }

  .site-nav.is-open > a:not(.cart-toggle)::after {
    content: "→";
    flex: none;
    opacity: 0.5;
    /* justify-content: space-between (above) treats the label text, the
       "NY" badge, and this arrow as three separate flex items and spreads
       them evenly — pushing the badge away from its label into the middle
       of the row. An auto margin on the last item claims all the free
       space for itself, so the label and badge stay grouped together at
       the start and only the arrow moves to the end. */
    margin-left: auto;
  }

  .site-nav.is-open > a.is-active {
    background: transparent;
    color: var(--ink);
  }

  /* Already reachable via the always-visible header cart icon (that's what
     makes the old fixed bottom cart bar unnecessary), so it's left out of
     the link list rather than shown twice. */
  .site-nav.is-open > .cart-toggle,
  .site-nav.is-closing > .cart-toggle {
    display: none !important;
  }

  .nav-dropdown__button {
    width: 100%;
    justify-content: space-between;
  }

  .nav-dropdown__panel {
    position: static;
    width: 100%;
    transform: none;
    box-shadow: none;
  }

  .nav-dropdown.is-open .nav-dropdown__panel {
    transform: none;
  }

  .nav-dropdown__panel a {
    width: 100% !important;
  }

}

@media (max-width: 700px) {
  .footer.site-footer {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .site-footer__links {
    grid-template-columns: repeat(2, auto);
    justify-content: start;
  }

  .site-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .site-nav.is-open,
  .site-nav.is-closing,
  .site-nav-toggle,
  body.nav-open .brand,
  body.nav-closing .brand {
    transition: none;
    animation: none;
  }
}

body.nav-open {
  overflow: hidden;
}

@media (max-width: 700px) {
  .cart-toggle strong {
    min-width: 22px !important;
    height: 22px !important;
    padding-inline: 5px !important;
    font-size: 11px !important;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-page-background: #0d1d28 !important;
    --color-page-background-soft: #142a35 !important;
    --color-surface: rgba(19, 34, 43, 0.92) !important;
    --color-surface-elevated: #182735 !important;
    --color-heading: #edf7f4 !important;
    --color-text: #d7e7e2 !important;
    --color-text-muted: #a9bbb7 !important;
    --color-accent: #73b8ad !important;
    --color-accent-secondary: #c7a06a !important;
    --color-accent-contrast: #f7fbf8 !important;
    --color-border: rgba(177, 201, 224, 0.18) !important;
    --color-card: var(--color-surface) !important;
    --color-button-primary-background: linear-gradient(115deg, #79c1b5 0%, #4f9c98 56%, #496f9c 100%) !important;
    --color-button-primary-text: #f7fbf8 !important;
    --color-button-secondary-background: #182735 !important;
    --color-button-secondary-hover: #223748 !important;
    --color-button-secondary-text: var(--color-heading) !important;
    --color-button-secondary-border: var(--color-border) !important;
    --color-hover-background: rgba(121, 174, 193, 0.13) !important;
    --color-active-background: rgba(121, 193, 181, 0.20) !important;
    --color-focus-ring: rgba(126, 183, 208, 0.32) !important;
    --color-status-available-background: rgba(121, 193, 181, 0.18) !important;
    --color-status-available-border: rgba(121, 193, 181, 0.46) !important;
    --color-status-available-text: #b9eee3 !important;
    --color-status-soldout-background: rgba(215, 107, 107, 0.18) !important;
    --color-status-soldout-border: #e58b8b !important;
    --color-status-soldout-text: #ffb2aa !important;
    --color-status-coming-background: linear-gradient(115deg, #6f3c0d 0%, #8c5116 100%) !important;
    --color-status-coming-border: rgba(255, 214, 158, 0.34) !important;
    --color-status-coming-text: #fff7ea !important;
    --color-status-coming-glow: rgba(242, 177, 95, 0.16) !important;
    --color-warning-background: rgba(240, 162, 142, 0.12) !important;
    --color-warning-border: rgba(240, 162, 142, 0.34) !important;
    --color-warning-text: #f0a28e !important;
    --color-page-gradient: radial-gradient(circle at 8% 0%, rgba(121, 193, 181, 0.20), transparent 31%), radial-gradient(circle at 88% 18%, rgba(78, 119, 174, 0.20), transparent 35%), radial-gradient(circle at 52% 100%, rgba(3, 12, 24, 0.46), transparent 48%), linear-gradient(180deg, #12342f 0%, #102630 42%, #0a1624 72%, #07111d 100%) !important;
    --bg: var(--color-page-background) !important;
    --bg-soft: var(--color-page-background-soft) !important;
    --panel: var(--color-surface) !important;
    --panel-strong: var(--color-surface-elevated) !important;
    --ink: var(--color-heading) !important;
    --muted: var(--color-text-muted) !important;
    --line: var(--color-border) !important;
    --accent: var(--color-accent) !important;
    --accent-2: var(--color-accent-secondary) !important;
    --accent-3: #c6d8d4 !important;
    --accent-gradient: var(--color-button-primary-background) !important;
    --surface-soft: rgba(24, 48, 58, 0.62) !important;
    --surface-strong: #182735 !important;
    --border-soft: rgba(177, 201, 224, 0.12) !important;
    --focus-ring: rgba(126, 183, 208, 0.32) !important;
    --lab-ice: #203945 !important;
    --frost-glass: rgba(23, 46, 55, 0.72) !important;
    --deep-vial: #07141e !important;
    --instrument-teal: #79c1b5 !important;
    --copper-seal: #c7a06a !important;
    --spec-paper: #162635 !important;
    --spec-rule: rgba(190, 211, 231, 0.16) !important;
    --button-primary-bg: var(--color-button-primary-background) !important;
    --button-primary-text: var(--color-button-primary-text) !important;
    --button-primary-shadow: rgba(91, 165, 177, 0.24) !important;
    --button-secondary-bg: var(--color-button-secondary-background) !important;
    --button-secondary-bg-hover: var(--color-button-secondary-hover) !important;
    --button-secondary-text: var(--color-button-secondary-text) !important;
    --button-secondary-border: var(--color-button-secondary-border) !important;
    --button-danger-bg: rgba(240, 162, 142, 0.12) !important;
    --button-danger-bg-hover: rgba(240, 162, 142, 0.18) !important;
    --button-danger-border: rgba(240, 162, 142, 0.34) !important;
    --button-danger-text: #f0a28e !important;
    --button-ghost-bg: transparent !important;
    --button-ghost-bg-hover: rgba(121, 174, 193, 0.13) !important;
    --button-ghost-text: var(--accent) !important;
    --badge-coming-bg: var(--color-status-coming-background) !important;
    --badge-coming-border: var(--color-status-coming-border) !important;
    --badge-coming-text: var(--color-status-coming-text) !important;
    --badge-coming-glow: var(--color-status-coming-glow) !important;
    --badge-soldout-bg: var(--color-status-soldout-background) !important;
    --badge-soldout-border: var(--color-status-soldout-border) !important;
    --badge-soldout-text: var(--color-status-soldout-text) !important;
    --dose-bg: #1a2d38 !important;
    --dose-border: var(--line) !important;
    --dose-text: var(--ink) !important;
    --dose-active-bg: linear-gradient(135deg, #c79042 0%, #8a551a 100%) !important;
    --dose-active-text: #fff9ea !important;
    --qty-color: #ffffff !important;
    --qty-trash-color: #c4a898 !important;
    --shadow: 0 24px 70px rgba(0, 0, 0, 0.34) !important;
  }

  body {
    background: var(--color-page-gradient) !important;
    color: var(--ink) !important;
  }

  body::before { background: linear-gradient(135deg, rgba(131, 185, 169, 0.2), rgba(29, 68, 91, 0.08)); }
  body::after { background: linear-gradient(135deg, rgba(92, 132, 190, 0.12), rgba(131, 185, 169, 0.14)); }

  .card > .variant-pills {
    background:
      repeating-linear-gradient(90deg, rgba(237, 247, 244, 0.18) 0 1px, transparent 1px 25px),
      linear-gradient(90deg, rgba(12, 28, 25, 0.92), rgba(27, 50, 46, 0.88)) !important;
    border-color: rgba(221, 235, 232, 0.24) !important;
    box-shadow: inset 0 0 0 1px rgba(121, 193, 181, 0.08);
  }

  .card > .variant-pills::before {
    color: #9fe7dc !important;
    border-right-color: rgba(221, 235, 232, 0.24) !important;
  }

  .mg-pill.is-active {
    background: var(--dose-active-bg) !important;
    border-color: rgba(255, 214, 139, 0.58) !important;
    color: var(--dose-active-text) !important;
    box-shadow:
      0 0 0 1px rgba(255, 214, 139, 0.22),
      0 0 22px rgba(199, 144, 66, 0.24),
      var(--shadow) !important;
  }

  .hero,
  .panel,
  .card,
  .result,
  .tools-panel,
  .contact-hero,
  .contact-card,
  .calculator-result,
  .calculator-result__item,
  .checkout-items > *,
  .ll-preview,
  .ll-preview__group,
  .delivery-chip,
  .auralis-code,
  .auralis-code__group,
  .dose-section,
  .table-wrap,
  .dose-table,
  .dose-table th,
  .dose-table td,
  .delivery-card,
  .payment-option,
  .payment-confirmation,
  .checkout-step,
  .summary,
  .checkout-items,
  .info,
  .section,
  .shell,
  .header,
  .order-details,
  .note {
    background: var(--panel-strong) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
  }

  .calculator-presets__group,
  .syringe-visualizer,
  .delivery-banner,
  .form-card,
  .result-card {
    background: rgba(131, 185, 169, 0.1) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
  }

  .button,
  .button-secondary,
  .nav a,
  input,
  select,
  textarea,
  .panel,
  .card,
  .mini-card,
  .product-detail__purchase {
    background: var(--surface-strong);
    color: var(--ink);
    border-color: var(--line);
  }

  .nav-dropdown__button,
  .cart-toggle,
  .site-nav-toggle {
    background: var(--surface-strong) !important;
    color: var(--ink) !important;
    border-color: var(--line) !important;
  }

  .nav-dropdown__panel {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  .nav-dropdown__panel a {
    background: var(--surface-strong) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
  }

  .nav a.is-active,
  .product-detail .product-variant.is-active {
    background: rgba(131, 185, 169, 0.2);
    color: var(--ink);
  }

  .button-primary {
    color: #f7fbf8;
    background: var(--accent-gradient);
  }

  .eyebrow,
  .pill {
    background: var(--pill-metal-bg);
    border-color: var(--pill-metal-border);
    color: var(--pill-metal-text);
    box-shadow: var(--pill-metal-shadow);
  }

  .pill.status-coming-soon {
    background: var(--badge-coming-bg);
    color: var(--badge-coming-text);
    box-shadow:
      inset 0 0 0 1px var(--badge-coming-border),
      0 0 18px var(--badge-coming-glow);
  }

  .guide-step,
  .faq,
  .faq-topic,
  .note,
  .order-details,
  .payment-widget,
  .shell,
  .header {
    background: var(--panel-strong) !important;
    border-color: var(--line) !important;
    color: var(--ink);
  }

  .faq-topic,
  .guide-step {
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.2);
  }

  .faq-topic > summary,
  .faq-question > summary,
  .guide-step h2,
  .guide-step strong {
    color: var(--ink);
  }

  .faq-topic,
  .faq-question,
  .guide-step,
  .details {
    border-color: var(--line) !important;
  }

  .contact-channel,
  .delivery-card,
  .payment-option,
  .payment-confirmation,
  .checkout-step,
  .summary,
  .checkout-items,
  .info,
  .section {
    background: #1b2925 !important;
    border-color: var(--line) !important;
    color: var(--ink);
  }

  .button-primary {
    color: #f7fbf8 !important;
  }

  input,
  select,
  textarea {
    background: #15211e !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
  }

  .contact-channel,
  .contact-channel:hover,
  .contact-channel:focus-visible {
    background: var(--surface-strong) !important;
    color: var(--ink) !important;
    border-color: var(--line) !important;
  }

  .contact-channel.contact-channel--whatsapp,
  .contact-channel.contact-channel--whatsapp:hover,
  .contact-channel.contact-channel--whatsapp:focus-visible {
    background: #147c40 !important;
    border-color: transparent !important;
    color: #ffffff !important;
  }

  .contact-channel.contact-channel--telegram,
  .contact-channel.contact-channel--telegram:hover,
  .contact-channel.contact-channel--telegram:focus-visible {
    background: #0d6f9f !important;
    border-color: transparent !important;
    color: #ffffff !important;
  }

  .payment-widget iframe { background: #15211e !important; }

  /* Keep inactive homepage tabs readable against the dark page. */
  .catalog-tab:not(.is-active) {
    background: linear-gradient(118deg, #f5faf7 0%, #d6e9e1 34%, #b7d7ca 52%, #e8f3ee 72%, #f5faf7 100%) !important;
    background-size: 240% 100%;
    border-color: rgba(131, 185, 169, 0.4) !important;
    color: #20312b !important;
    animation: green-palette 8s ease-in-out infinite;
  }

  .catalog-tab.is-active,
  .catalog-tab.is-active:hover {
    background: linear-gradient(118deg, #244f48 0%, #3f7567 36%, #79a997 52%, #315e54 70%, #244f48 100%) !important;
    color: #fff9f1 !important;
  }

  .cart-toggle {
    background: rgba(239, 246, 242, 0.96) !important;
    border-color: rgba(131, 185, 169, 0.4) !important;
    color: #20312b !important;
  }

  .cart-toggle strong {
    background: var(--accent) !important;
    color: #fff9f1 !important;
  }

  .nav-dropdown__button {
    background: rgba(239, 246, 242, 0.96) !important;
    border-color: rgba(131, 185, 169, 0.4) !important;
    color: #20312b !important;
  }

  .nav-dropdown.is-open .nav-dropdown__button,
  .nav-dropdown.is-active .nav-dropdown__button {
    background: var(--accent-gradient) !important;
    border-color: transparent !important;
    color: #fff9f1 !important;
  }

  /* Keep all navigation pills on one visual surface in dark mode. */
  .site-nav a,
  .nav a,
  .cart-toggle,
  .nav-dropdown__button {
    background: #1d2a27 !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
  }

  .site-nav a:hover,
  .nav a:hover,
  .nav a.is-active,
  .site-nav a.is-active,
  .nav-dropdown.is-open .nav-dropdown__button,
  .nav-dropdown.is-active .nav-dropdown__button {
    background: var(--accent-gradient) !important;
    border-color: transparent !important;
    color: #fff9f1 !important;
  }

  .cart-toggle strong {
    background: var(--accent) !important;
    color: #fff9f1 !important;
  }

  /* Payment page: keep the layered homepage treatment instead of a flat card. */
  .shell {
    background:
      radial-gradient(circle at 12% 8%, rgba(131, 185, 169, 0.2), transparent 30%),
      radial-gradient(circle at 88% 92%, rgba(229, 189, 125, 0.1), transparent 34%),
      linear-gradient(145deg, #1d302b 0%, #15211e 54%, #203a33 100%) !important;
  }

  .checkout-payment .header,
  .header,
  .card.payment-card {
    background:
      linear-gradient(135deg, rgba(42, 73, 64, 0.96), rgba(24, 39, 35, 0.96)) !important;
    border-color: var(--line) !important;
  }

  .payment-widget,
  .order-details {
    background:
      linear-gradient(135deg, rgba(34, 61, 54, 0.98), rgba(21, 33, 30, 0.98)) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
  }

  .order-number,
  .payment-status,
  .tracking-note {
    background: linear-gradient(110deg, rgba(69, 127, 109, 0.72), rgba(35, 76, 68, 0.82)) !important;
    color: #eff8f3 !important;
  }

  .payment-widget__message,
  .order-details__row span,
  .payment-card p {
    color: var(--muted) !important;
  }

  .calculator-chip,
  .mg-pill,
  .status-pill,
  .checkout-step-indicator,
  .ll-preview__badge,
  .auralis-code__badge,
  .dose-table th {
    background: #243933 !important;
    color: var(--ink) !important;
    border-color: var(--line) !important;
  }

  .calculator-validation,
  .tools-note,
  .hint,
  .error,
  .checkout-error {
    color: #e3c995 !important;
  }

  .dose-table tr:nth-child(even) td,
  .result-row,
  .summary-row {
    border-color: var(--line) !important;
  }

  .dose-section {
    background: transparent !important;
  }

  .table-wrap {
    background: rgba(131, 185, 169, 0.08) !important;
  }

  .dose-table,
  .dose-table td {
    background: transparent !important;
  }

  .dose-table th {
    background: rgba(131, 185, 169, 0.14) !important;
  }

  .checkout-page .checkout-step {
    background: transparent !important;
  }

  .checkout-page .delivery-card {
    background: rgba(131, 185, 169, 0.08) !important;
  }

  .checkout-page .ll-preview__group,
  .checkout-page .checkout-step-indicator {
    background: rgba(131, 185, 169, 0.1) !important;
  }

  .checkout-page .delivery-chip {
    background: var(--pill-metal-bg) !important;
    border-color: var(--pill-metal-border) !important;
    color: var(--pill-metal-text) !important;
    box-shadow: var(--pill-metal-shadow) !important;
  }

  .checkout-page .ll-preview {
    background: transparent !important;
  }

  .checkout-page .checkout-step-indicator.is-active {
    background: rgba(131, 185, 169, 0.22) !important;
  }

  /* Storefront: let the original page gradient show through the section. */
  #catalog.section,
  #packages.section,
  .section[data-catalog-panel] {
    background: transparent !important;
    border-color: transparent !important;
  }

  #catalog .card,
  #packages .card,
  .catalog-extra-card {
    background:
      radial-gradient(circle at top right, rgba(131, 185, 169, 0.14), transparent 44%),
      linear-gradient(145deg, rgba(35, 57, 51, 0.82), rgba(21, 33, 30, 0.78)) !important;
    backdrop-filter: blur(12px);
  }

  #catalog .catalog-tools input,
  #catalog .catalog-tools select {
    background: rgba(26, 43, 38, 0.68) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  }

  #catalog .catalog-tools input:hover,
  #catalog .catalog-tools input:focus-visible,
  #catalog .catalog-tools select:hover,
  #catalog .catalog-tools select:focus-visible {
    border-color: rgba(131, 185, 169, 0.7) !important;
    box-shadow:
      0 0 0 1px rgba(131, 185, 169, 0.34),
      0 0 26px rgba(131, 185, 169, 0.24),
      var(--shadow) !important;
    transform: translateY(-1px);
  }

  #catalog .eyebrow,
  #packages .eyebrow,
  .delivery-banner {
    background: var(--pill-metal-bg) !important;
    border-color: var(--pill-metal-border) !important;
    color: var(--pill-metal-text) !important;
    box-shadow: var(--pill-metal-shadow) !important;
  }

  /* Product pages: keep the page background visible and use overlays for content cards. */
  .product-detail {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  .product-detail__purchase {
    background:
      radial-gradient(circle at top right, rgba(131, 185, 169, 0.16), transparent 46%),
      linear-gradient(145deg, rgba(35, 57, 51, 0.94), rgba(21, 33, 30, 0.94)) !important;
    border-color: var(--line) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28) !important;
  }

  .product-detail .product-variant {
    background: rgba(35, 57, 51, 0.72) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
  }

  .product-detail .product-variant.is-active {
    background: rgba(131, 185, 169, 0.25) !important;
    color: #eff8f3 !important;
  }

  .product-detail .product-variant.is-soldout {
    background: linear-gradient(115deg, #8f2f2f 0%, #8f2f2f 36%, #d75a5a 50%, #8f2f2f 64%, #8f2f2f 100%) !important;
    background-size: 220% 100% !important;
    background-position: 0% 50% !important;
    border-color: #b94444 !important;
    color: #fff5f3 !important;
    animation: soldout-stripes 2.4s linear infinite;
  }

  /* Checkout keeps the page gradient visible behind its focused cards.
     .header is deliberately left out: on this page it's also the sticky
     .topbar (nav/logo/cart), which needs to stay opaque — making it
     transparent here let whatever the page had scrolled to show through
     it instead of the topbar hiding it like it's supposed to. */
  .checkout-page .page,
  .checkout-page .shell,
  .checkout-page .layout,
  .checkout-page .hero,
  .checkout-page .footer {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  .checkout-page .ll-preview__group {
    background: rgba(131, 185, 169, 0.1) !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
    color: var(--ink) !important;
  }

  .checkout-page .ll-preview__digits input {
    background: transparent !important;
    color: inherit !important;
  }

  .checkout-page .ll-preview__badge {
    background: rgba(131, 185, 169, 0.18) !important;
    border-color: rgba(131, 185, 169, 0.5) !important;
    box-shadow: none !important;
    color: var(--ink) !important;
  }

  .checkout-page .ll-preview__group:focus-within {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(131, 185, 169, 0.14) !important;
  }

  .checkout-page .mini-card.panel,
  .checkout-page .delivery-card {
    background:
      radial-gradient(circle at top right, rgba(131, 185, 169, 0.14), transparent 52%),
      rgba(131, 185, 169, 0.08) !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
  }

  .checkout-page .checkout-items {
    background: transparent !important;
    border-color: transparent !important;
  }

  .checkout-page .checkout-items > * {
    background:
      radial-gradient(circle at top right, rgba(131, 185, 169, 0.12), transparent 52%),
      linear-gradient(145deg, rgba(35, 57, 51, 0.5), rgba(21, 33, 30, 0.36)) !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
  }

  .checkout-page .quantity-control,
  .checkout-page .bundle-cart-editor__quantity {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--qty-color) !important;
    box-shadow: none !important;
  }

  .checkout-page .quantity-control .cart-icon-button:not(.cart-trash),
  .checkout-page .bundle-cart-editor__quantity .cart-icon-button:not(.cart-trash) {
    color: var(--qty-color) !important;
  }

  .checkout-page .quantity-value,
  .checkout-page .bundle-cart-editor__quantity input {
    background: transparent !important;
    color: var(--qty-color) !important;
  }

  .checkout-page .button-secondary:not(.button-delivery-help) {
    background: rgba(35, 57, 51, 0.76) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
  }

  .checkout-page .checkout-step {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }


  .contact-subject-pills span {
    background: rgba(35, 57, 51, 0.34) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
  }

  .contact-subject-pills input:checked + span {
    background: var(--accent-gradient) !important;
    border-color: transparent !important;
    color: #fff9f1 !important;
  }

  .payment-widget {
    overflow: visible !important;
    background:
      radial-gradient(circle at top right, rgba(131, 185, 169, 0.1), transparent 52%),
      rgba(27, 41, 37, 0.28) !important;
    border-color: var(--line) !important;
  }

  .payment-widget > .button {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border-radius: 999px;
    background: var(--button-primary-bg) !important;
    border-color: transparent !important;
    color: var(--button-primary-text) !important;
  }

  .checkout-payment .shell,
  .checkout-payment .header,
  .checkout-payment .hero,
  .checkout-payment .footer {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  .checkout-payment .payment-card {
    background:
      radial-gradient(circle at top right, rgba(131, 185, 169, 0.1), transparent 52%),
      rgba(27, 41, 37, 0.3) !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
  }

  .checkout-payment .button-secondary {
    background: var(--button-secondary-bg) !important;
    border-color: var(--button-secondary-border) !important;
    color: var(--button-secondary-text) !important;
  }

  .checkout-payment .button-secondary:hover,
  .checkout-payment .button-secondary:focus-visible {
    background: rgba(69, 127, 109, 0.72) !important;
    border-color: var(--accent) !important;
    color: #fff9f1 !important;
  }

  .checkout-payment .tracking-note {
    background: rgba(69, 127, 109, 0.5) !important;
    border-color: rgba(131, 185, 169, 0.36) !important;
    color: #eff8f3 !important;
  }

  .checkout-payment .payment-widget iframe {
    display: block;
    width: min(100%, 420px) !important;
    margin-inline: auto;
  }

  /* Keep page sections as translucent overlays so the site gradient remains visible. */
  .section,
  .panel,
  .card.form,
  .card.results,
  .calculator-result,
  .calculator-result__item,
  .contact-hero,
  .contact-card {
    background:
      radial-gradient(circle at top right, rgba(121, 174, 193, 0.14), transparent 48%),
      linear-gradient(145deg, rgba(35, 57, 66, 0.68), rgba(16, 29, 41, 0.62)) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
    backdrop-filter: blur(12px);
  }

  .section > .section-head h2,
  .section > .section-head p,
  .panel h1,
  .panel > .lead,
  .calculator-result__summary,
  .calculator-result__item strong,
  .calculator-result__item span,
  .calculator-result__item small {
    color: var(--ink) !important;
  }

  .calculator-result__item span,
  .calculator-result__item small,
  .section > .section-head p,
  .panel > .lead {
    color: var(--muted) !important;
  }

  .calculator-presets__group {
    background: transparent !important;
  }

  .calculator-result {
    background:
      radial-gradient(circle at top right, rgba(131, 185, 169, 0.1), transparent 52%),
      rgba(27, 41, 37, 0.24) !important;
  }

  .calculator-result__item {
    background: rgba(35, 57, 51, 0.26) !important;
  }

  #catalog-panel-accessories .accessory-card,
  #catalog-panel-pens .accessory-card,
  #catalog-panel-soon .accessory-card,
  #catalog-panel-nasal .accessory-card,
  #packages .card {
    background:
      radial-gradient(circle at top right, rgba(131, 185, 169, 0.1), transparent 52%),
      rgba(27, 41, 37, 0.34) !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
    color: var(--ink) !important;
  }

  #catalog-panel-accessories .pill,
  #catalog-panel-pens .pill,
  #catalog-panel-soon .pill,
  #catalog-panel-nasal .pill,
  #packages .pill {
    background: var(--pill-metal-bg) !important;
    border-color: var(--pill-metal-border) !important;
    color: var(--pill-metal-text) !important;
    box-shadow: var(--pill-metal-shadow) !important;
  }

  #catalog-panel-accessories .status-soldout,
  #catalog-panel-pens .status-soldout,
  #catalog-panel-soon .status-soldout,
  #catalog-panel-nasal .status-soldout,
  #packages .status-soldout {
    background: var(--color-status-soldout-background) !important;
    border-color: var(--color-status-soldout-border) !important;
    color: var(--color-status-soldout-text) !important;
  }

  #faq .faq-list,
  #faq .faq-topic {
    background:
      radial-gradient(circle at top right, rgba(131, 185, 169, 0.1), transparent 52%),
      rgba(27, 41, 37, 0.3) !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
    color: var(--ink) !important;
  }

  #faq .faq-topic > summary {
    color: var(--ink) !important;
  }

  #faq .faq-item {
    border-top-color: var(--line) !important;
  }

  .faq-page .hero,
  .faq-page .faq,
  .faq-page .note,
  .faq-page .faq-topic {
    background:
      radial-gradient(circle at top right, rgba(131, 185, 169, 0.1), transparent 52%),
      rgba(27, 41, 37, 0.3) !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
    color: var(--ink) !important;
  }

  .faq-page details {
    border-top-color: var(--line) !important;
  }

  /* Bundle Kit: use the same layered catalog surface and contrast. */
  #packages .bundle-builder {
    background:
      radial-gradient(circle at top right, rgba(131, 185, 169, 0.14), transparent 44%),
      linear-gradient(145deg, rgba(35, 57, 51, 0.86), rgba(21, 33, 30, 0.82)) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28) !important;
    backdrop-filter: blur(12px);
  }

  #packages .bundle-builder__intro h3,
  #packages .bundle-builder__intro p,
  #packages .bundle-builder__progress-head,
  #packages .bundle-builder__progress-head strong,
  #packages .bundle-builder__summary,
  #packages .bundle-builder__summary p,
  #packages .bundle-builder__summary strong {
    color: var(--ink) !important;
  }

  #packages .bundle-builder__discount {
    background: rgba(131, 185, 169, 0.16) !important;
    border: 1px solid rgba(131, 185, 169, 0.35) !important;
    color: #bfe6d8 !important;
  }

  #packages .bundle-choice {
    background: rgba(27, 41, 37, 0.92) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
    box-shadow: none !important;
  }

  #packages .bundle-choice__top,
  #packages .bundle-choice__top span {
    color: var(--ink) !important;
  }

  #packages .bundle-choice__actions span {
    color: var(--muted) !important;
  }

  #packages .bundle-choice__variant {
    background: rgba(239, 246, 242, 0.1) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
  }

  #packages .bundle-choice__variant.is-selected {
    background: var(--accent-gradient) !important;
    border-color: transparent !important;
    color: #fff9f1 !important;
  }

  #packages .bundle-choice__actions button {
    background: rgba(131, 185, 169, 0.16) !important;
    border-color: rgba(131, 185, 169, 0.45) !important;
    color: var(--ink) !important;
  }

  #packages .bundle-choice__actions button:disabled {
    opacity: 0.42;
  }

  #packages .bundle-builder__progress-track {
    background: rgba(239, 246, 242, 0.12) !important;
  }

  #packages .bundle-builder__progress-fill {
    background: var(--accent-gradient) !important;
  }

  #packages .bundle-builder__summary {
    border-top-color: var(--line) !important;
  }

  .card[data-product-slug]:hover {
    border-color: rgba(131, 185, 169, 0.7);
    box-shadow:
      0 0 0 1px rgba(131, 185, 169, 0.34),
      0 0 26px rgba(131, 185, 169, 0.24),
      var(--shadow);
  }

  @media (max-width: 760px) {
    .card[data-product-slug].is-mobile-highlight {
      border-color: rgba(131, 185, 169, 0.7);
      box-shadow:
        0 0 0 1px rgba(131, 185, 169, 0.34),
        0 0 26px rgba(131, 185, 169, 0.24),
        var(--shadow);
    }
  }
}

/* Keep compact checkout, calculator, and reference data aligned with the catalog's mono language. */
.checkout-page .cart-item__title,
.checkout-page .cart-item__title-row span,
.checkout-page .cart-item-price,
.checkout-page .checkout-total-row,
.checkout-page .delivery-chip,
.checkout-page .checkout-step-indicator,
.checkout-page .button,
.checkout-page .summary-row,
.checkout-page .delivery-note,
.checkout-page .payment-option,
.checkout-page .payment-confirmation,
.checkout-page .cart-item__controls,
.checkout-page .quantity-control,
.checkout-page .quantity-value,
.checkout-page .cart-icon-button,
.cart-preview .cart-item__title,
.cart-preview .cart-item__title span,
.cart-preview .cart-item-price,
.cart-preview .cart-preview__header,
.cart-preview .cart-preview__footer,
.cart-preview .cart-item__controls,
.cart-preview .quantity-control,
.cart-preview .quantity-value,
.cart-preview .cart-icon-button,
.cart-preview .button {
  font-family: var(--font-data);
}

.checkout-page .cart-item strong,
.checkout-page .checkout-total-row strong,
.cart-preview .cart-item__title strong {
  font-family: var(--font-data);
}

.checkout-page #checkout-discount {
  color: var(--button-danger-text);
  font-family: var(--font-data);
}

.checkout-page .quantity-value,
.cart-preview .quantity-value {
  font-family: var(--font-brand);
}

.checkout-page .cart-icon-button[data-cart-action="increase"],
.checkout-page .cart-icon-button[data-cart-action="bundle-change"][data-delta="1"],
.cart-preview .cart-icon-button[data-cart-action="increase"],
.cart-preview .cart-icon-button[data-cart-action="bundle-change"][data-delta="1"] {
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 0;
  line-height: 1;
}

.checkout-page .cart-icon-button[data-cart-action="increase"]::before,
.checkout-page .cart-icon-button[data-cart-action="bundle-change"][data-delta="1"]::before,
.cart-preview .cart-icon-button[data-cart-action="increase"]::before,
.cart-preview .cart-icon-button[data-cart-action="bundle-change"][data-delta="1"]::before {
  content: "+";
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: currentColor;
  font-family: var(--font-brand);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.calculator-page .calculator-presets__label,
.calculator-page .calculator-chip,
.calculator-page .calculator-actions__note,
.calculator-page .calculator-result,
.calculator-page .calculator-result__item,
.calculator-page .calculator-validation,
.calculator-page .syringe-visualizer,
.calculator-page .note,
.dosage-page .tools-lead,
.dosage-page .dose-table,
.dosage-page .tools-note {
  font-family: var(--font-data);
}

/* Keep checkout cards and deal controls readable when the OS uses dark mode. */
/* The storefront uses one green palette regardless of the visitor's OS theme. */
@media (prefers-color-scheme: dark) {
  /* Keep hero headings readable against the dark green landing surface. */
  body .hero h1 {
    color: #edf7f4 !important;
    -webkit-text-fill-color: #edf7f4 !important;
    background: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    text-shadow: 0 4px 22px rgba(0, 0, 0, 0.24);
  }

  .cart-preview {
    background:
      radial-gradient(circle at top right, rgba(120, 184, 171, 0.12), transparent 46%),
      rgba(18, 34, 30, 0.94) !important;
    color: #e7f1ed !important;
  }

  .cart-preview .cart-item,
  .checkout-page .checkout-items > *,
  .checkout-page .mini-card.panel,
  .checkout-page .delivery-card,
  .checkout-page .payment-option,
  .checkout-page .payment-confirmation {
    background:
      radial-gradient(circle at top right, rgba(120, 184, 171, 0.12), transparent 46%),
      rgba(27, 49, 44, 0.88) !important;
    border-color: rgba(174, 211, 200, 0.24) !important;
    color: #e7f1ed !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16) !important;
  }

  .cart-preview .cart-item__image {
    background: rgba(27, 49, 44, 0.88) !important;
    border-color: rgba(174, 211, 200, 0.24) !important;
  }

  .cart-preview .cart-item__title strong,
  .cart-preview .cart-item-price,
  .checkout-page .cart-item strong,
  .checkout-page .cart-item-price,
  .checkout-page .payment-option strong,
  .checkout-page .payment-confirmation strong {
    color: #e7f1ed !important;
  }

  .cart-preview .cart-item__title span,
  .checkout-page .cart-item span,
  .checkout-page .cart-item p,
  .checkout-page .payment-option span,
  .checkout-page .payment-confirmation span {
    color: #a8bdb6 !important;
  }

  .cart-preview .quantity-control,
  .cart-preview .quantity-value,
  .cart-preview .cart-icon-button,
  .checkout-page .quantity-control,
  .checkout-page .quantity-value,
  .checkout-page .cart-icon-button {
    color: #e7f1ed !important;
  }

  .checkout-page .bundle-cart-editor__pill,
  .checkout-page .payment-option__chips span,
  .checkout-page .checkout-step-indicator,
  .checkout-page .delivery-chip {
    background: rgba(255, 255, 255, 0.78) !important;
    border-color: rgba(18, 33, 30, 0.18) !important;
    color: #2f6d64 !important;
    box-shadow: none !important;
  }

  .checkout-page .bundle-cart-editor__pill.is-selected {
    background: var(--accent-gradient) !important;
    border-color: transparent !important;
    color: #fff9f1 !important;
  }

  .checkout-page .checkout-step-indicator.is-active {
    background: #d7ece4 !important;
    color: #2f6d64 !important;
  }

  /* Checkout follows the dark lab palette instead of the legacy light card fallback. */
  .checkout-page .cart-preview,
  .checkout-page .checkout-items > *,
  .checkout-page .mini-card.panel,
  .checkout-page .panel,
  .checkout-page .delivery-card,
  .checkout-page .payment-option,
  .checkout-page .payment-confirmation {
    background:
      radial-gradient(circle at top right, rgba(120, 184, 171, 0.12), transparent 46%),
      rgba(18, 34, 30, 0.94) !important;
    border-color: rgba(174, 211, 200, 0.24) !important;
    color: #e7f1ed !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34) !important;
  }

  .checkout-page .cart-preview .cart-item__image,
  .checkout-page .cart-item__image {
    background: rgba(27, 49, 44, 0.88) !important;
    border-color: rgba(174, 211, 200, 0.24) !important;
  }

  .checkout-page .cart-preview .cart-item__title strong,
  .checkout-page .cart-preview .cart-item-price,
  .checkout-page .cart-item strong,
  .checkout-page .cart-item-price,
  .checkout-page .payment-option strong,
  .checkout-page .payment-confirmation strong,
  .checkout-page .quantity-value,
  .checkout-page .cart-icon-button {
    color: #e7f1ed !important;
  }

  .checkout-page .cart-preview .cart-item__title span,
  .checkout-page .cart-item span,
  .checkout-page .cart-item p,
  .checkout-page .payment-option span,
  .checkout-page .payment-confirmation span {
    color: #a8bdb6 !important;
  }

  .checkout-page .bundle-cart-editor__pill,
  .checkout-page .payment-option__chips span,
  .checkout-page .checkout-step-indicator,
  .checkout-page .delivery-chip {
    background: rgba(27, 49, 44, 0.88) !important;
    border-color: rgba(174, 211, 200, 0.24) !important;
    color: #78b8ab !important;
  }

  .checkout-page .checkout-step-indicator.is-active,
  .checkout-page .bundle-cart-editor__pill.is-selected {
    background: #78b8ab !important;
    color: #071411 !important;
  }
}

.calculator-page .calculator-presets__label {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.calculator-page .calculator-chip {
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.calculator-page .card {
  border: 0;
}

.calculator-page #calculator-reset {
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-family: var(--font-data);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.calculator-page #calculator-reset:hover,
.calculator-page #calculator-reset:focus-visible {
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  transform: none;
}

/* Keep cart rows compact and readable at every drawer and viewport width. */
.cart-preview__items {
  overflow-x: hidden;
}

.checkout-page .cart-item,
.cart-preview .cart-item--preview {
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) auto !important;
  grid-template-areas: "image main actions" !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 12px !important;
}

.checkout-page .cart-item__image,
.cart-preview .cart-item--preview .cart-item__image {
  grid-area: image !important;
  align-self: center !important;
  width: 64px !important;
  height: 64px !important;
  border-radius: 6px !important;
}

.checkout-page .cart-item__image img,
.cart-preview .cart-item--preview .cart-item__image img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  transform: none !important;
}

.checkout-page .cart-item-main,
.cart-preview .cart-item--preview .cart-item-main {
  grid-area: main !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
}

.checkout-page .cart-item__summary,
.cart-preview .cart-item--preview .cart-item__summary {
  display: block !important;
  min-width: 0 !important;
}

.checkout-page .cart-item__title,
.cart-preview .cart-item--preview .cart-item__title {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
}

.checkout-page .cart-item__title-row,
.cart-preview .cart-item--preview .cart-item__title-row {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 3px 8px !important;
  min-width: 0 !important;
}

.checkout-page .cart-item strong,
.cart-preview .cart-item--preview .cart-item__title strong {
  display: block !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  overflow: visible !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.checkout-page .cart-item__title-row span,
.cart-preview .cart-item--preview .cart-item__title-row span {
  flex: 0 0 auto !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}

.checkout-page .cart-item__dose,
.cart-preview .cart-item--preview .cart-item__dose {
  display: block !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}

.cart-item__bundle-warning {
  margin: 6px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-md, 12px);
  background: var(--color-warning-background);
  color: var(--color-warning-text);
  font-size: 12px;
  line-height: 1.4;
}

.checkout-page .cart-item-actions,
.cart-preview .cart-item--preview .cart-item-actions {
  grid-area: actions !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.checkout-page .cart-item-actions__price,
.cart-preview .cart-item--preview .cart-item-actions__price {
  display: flex !important;
  justify-content: flex-end !important;
  width: auto !important;
  min-width: 0 !important;
}

.checkout-page .cart-item-actions__row,
.cart-preview .cart-item--preview .cart-item-actions__row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  min-width: 0 !important;
  width: auto !important;
}

.checkout-page .quantity-control,
.cart-preview .cart-item--preview .quantity-control {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.checkout-page .cart-item--preview .cart-icon-button,
.cart-preview .cart-item--preview .cart-icon-button {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 24px !important;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

.checkout-page .cart-item--preview .cart-icon-button[data-cart-action="increase"],
.cart-preview .cart-item--preview .cart-icon-button[data-cart-action="increase"] {
  font-size: 0 !important;
}

.checkout-page .cart-item--preview .cart-trash,
.cart-preview .cart-item--preview .cart-trash {
  color: var(--qty-trash-color) !important;
}

.checkout-page .cart-item--preview .cart-trash svg,
.cart-preview .cart-item--preview .cart-trash svg {
  width: 14px !important;
  height: 14px !important;
}

.checkout-page .cart-item--preview .quantity-value,
.cart-preview .cart-item--preview .quantity-value {
  flex: 0 0 auto !important;
  width: 3ch !important;
  min-width: 3ch !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 14px !important;
  line-height: 24px !important;
  text-align: center !important;
}

/* Unified Nordic blue theme for every page surface. Keep this at the end so
   legacy inline page styles cannot leave checkout and secondary pages green. */
:root {
  --global-page-background:
    linear-gradient(rgba(151, 197, 204, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(151, 197, 204, 0.055) 1px, transparent 1px),
    radial-gradient(circle at 8% 0%, rgba(121, 193, 181, 0.2), transparent 31%),
    radial-gradient(circle at 88% 18%, rgba(78, 119, 174, 0.2), transparent 35%),
    radial-gradient(circle at 52% 100%, rgba(3, 12, 24, 0.46), transparent 48%),
    linear-gradient(180deg, #12342f 0%, #102630 42%, #0a1624 72%, #07111d 100%);
  --global-surface:
    radial-gradient(circle at 100% 0%, rgba(111, 174, 194, 0.1), transparent 42%),
    linear-gradient(135deg, rgba(20, 48, 64, 0.76), rgba(10, 29, 44, 0.84) 58%, rgba(17, 42, 56, 0.72));
  --global-surface-strong:
    radial-gradient(circle at 100% 0%, rgba(111, 174, 194, 0.12), transparent 44%),
    linear-gradient(135deg, rgba(28, 56, 72, 0.84), rgba(14, 36, 52, 0.9));
  --global-surface-soft:
    linear-gradient(90deg, rgba(32, 62, 78, 0.52), rgba(16, 39, 54, 0.34) 72%, rgba(16, 39, 54, 0));
  --global-field:
    linear-gradient(135deg, rgba(7, 23, 37, 0.74), rgba(13, 34, 50, 0.62));
  --global-border: rgba(164, 196, 218, 0.24);
  --global-active: rgba(91, 145, 178, 0.24);
  --color-surface: var(--global-surface) !important;
  --color-surface-elevated: var(--global-surface-strong) !important;
  --color-card: var(--global-surface) !important;
  --color-button-secondary-background: var(--global-surface-strong) !important;
  --color-button-secondary-hover: #203b50 !important;
  --color-active-background: var(--global-active) !important;
  --color-hover-background: rgba(91, 145, 178, 0.16) !important;
  --color-border: var(--global-border) !important;
  --panel: var(--global-surface) !important;
  --panel-strong: var(--global-surface-strong) !important;
  --surface-soft: var(--global-surface-soft) !important;
  --surface-strong: var(--global-surface-strong) !important;
  --line: var(--global-border) !important;
  --border-soft: rgba(164, 196, 218, 0.16) !important;
  --spec-rule: var(--global-border) !important;
  --frost-glass: #ffffff !important;
}

body {
  background-color: #07111d !important;
  background-image: var(--global-page-background) !important;
  background-position: 0 0, 0 0, 8% 0, 88% 18%, 52% 100%, 0 0 !important;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
  background-size: 42px 42px, 42px 42px, auto, auto, auto, auto !important;
  color: var(--ink) !important;
}

body :is(
  .section,
  .panel,
  .mini-card,
  .hero,
  .card,
  .result,
  .tools-panel,
  .form-card,
  .result-card,
  .calculator-result,
  .calculator-result__item,
  .checkout-items,
  .checkout-items > *,
  .summary,
  .info,
  .shell,
  .header,
  .order-details,
  .payment-option,
  .payment-confirmation,
  .checkout-step,
  .delivery-card,
  .contact-payment,
  .contact-payment__choice,
  .nowpayments-payment,
  .btcpay-contact-fallback,
  .contact-hero,
  .contact-card,
  .faq,
  .faq-topic,
  .guide-panel,
  .dose-section,
  .table-wrap,
  .product-detail,
  .product-detail__purchase,
  .catalog-extra-panel,
  .catalog-extra-card,
  .accessory-card,
  .bundle-choice,
  .bundle-choice__variant,
  .bundle-builder__discount,
  .note,
  .contact-note,
  .admin-shell,
  .admin-sidebar,
  .admin-workspace,
  .admin-section,
  .admin-search
) {
  background: var(--global-surface) !important;
  border-color: var(--global-border) !important;
  color: var(--ink) !important;
}

body :is(
  .checkout-intro-banner,
  .delivery-banner,
  .calculator-presets__group,
  .syringe-visualizer,
  .ll-preview,
  .ll-preview__group,
  .auralis-code,
  .auralis-code__group,
  .payment-status,
  .tracking-note,
  .guide-note,
  .contact-note,
  .calculator-validation
) {
  background: var(--global-surface-soft) !important;
  border-color: var(--global-border) !important;
  color: var(--ink) !important;
}

body :is(input, select, textarea, .delivery-chip, .calculator-chip, .contact-subject-pills span, .payment-option__selector, .tracking-widget__group) {
  background: var(--global-field) !important;
  border-color: var(--global-border) !important;
  color: var(--ink) !important;
}

body :is(.checkout-step-indicator.is-active, .calculator-chip.is-active, .contact-subject-pills input:checked + span, .product-detail .product-variant.is-active) {
  background: var(--global-active) !important;
  border-color: rgba(121, 193, 181, 0.56) !important;
  color: var(--ink) !important;
}

body :is(.cart-toggle, .nav-dropdown__button, .tracking-widget__trigger, .contact-widget) {
  background: var(--global-surface-strong) !important;
  border-color: var(--global-border) !important;
  color: var(--ink) !important;
}

body button.site-nav-toggle {
  background: none !important;
  border-color: transparent !important;
  color: var(--ink) !important;
}

/* The sitewide `body * { background-color: transparent !important }` pass
   (below) matches the icon's middle bar (a real element) but not its
   ::before/::after bars (a bare `*` doesn't reach pseudo-elements), so
   without this the hamburger only ever showed two of its three stripes. */
body .site-nav-toggle:not(.is-open):not(.is-closing) .site-nav-toggle__icon {
  background: currentColor !important;
}

/* Keep the reviews section on the same blue surface as the other sections. */
#reviews.section {
  background: var(--global-surface) !important;
  border-color: var(--global-border) !important;
}

/* Checkout has older, more-specific dark-green rules; give its panels the
   same blue surface as the rest of the site. */
body.checkout-page :is(
  .cart-preview,
  .checkout-items > *,
  .mini-card.panel,
  .panel,
  .summary,
  .delivery-card,
  .payment-option,
  .payment-confirmation
) {
  background: var(--global-surface) !important;
  border-color: var(--global-border) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow) !important;
}

body.checkout-page :is(.checkout-step-indicator, .delivery-chip, .payment-option__chips span) {
  background: var(--global-field) !important;
  border-color: var(--global-border) !important;
  color: var(--ink) !important;
}

body.checkout-page .checkout-step-indicator.is-active {
  background: var(--global-active) !important;
  color: var(--ink) !important;
}

/* The storefront catalog uses ID-scoped legacy rules, so mirror the same
   surface explicitly for its sections and product/accessory cards. */
body #catalog.section,
body #packages.section,
body .section[data-catalog-panel] {
  background: var(--global-surface) !important;
  border-color: var(--global-border) !important;
}

body #catalog .card,
body #packages .card,
body .catalog-extra-card,
body #catalog-panel-accessories .accessory-card,
body #catalog-panel-pens .accessory-card,
body #catalog-panel-soon .accessory-card,
body #catalog-panel-nasal .accessory-card,
body #packages .bundle-builder {
  background: var(--global-surface) !important;
  border-color: var(--global-border) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow) !important;
}

body #catalog .catalog-tools input,
body #catalog .catalog-tools select {
  background: var(--global-field) !important;
  border-color: var(--global-border) !important;
  color: var(--ink) !important;
}

/* Final surface-coherence pass. A few legacy page rules use two-class
   selectors or !important declarations, so they need explicit global owners
   here to keep every section connected to the same Nordic background. */
body :is(
  .section,
  .panel,
  .hero,
  .content,
  .result,
  .contact-hero,
  .contact-card,
  .product-detail,
  .cart-preview
) {
  background: var(--global-surface) !important;
  border-color: var(--global-border) !important;
  color: var(--ink) !important;
  backdrop-filter: blur(12px);
}

body :is(
  .card,
  .mini-card,
  .faq-topic,
  .guide-step,
  .terms > section,
  .dose-section,
  .table-wrap,
  .catalog-extra-panel,
  .catalog-extra-card,
  .calculator-result__item,
  .cart-preview .cart-item
) {
  background: var(--global-surface-strong) !important;
  border-color: var(--global-border) !important;
  color: var(--ink) !important;
}

body :is(
  .section > .section-head,
  .calculator-presets__group,
  .syringe-visualizer,
  .checkout-intro-banner,
  .delivery-banner,
  .calculator-validation,
  .note,
  .contact-note
) {
  background: var(--global-surface-soft) !important;
  border-color: var(--global-border) !important;
  color: var(--ink) !important;
}

/* Beat the old calculator card and result selectors without changing their
   layout or the existing input/interaction ownership. */
body .card.form,
body .card.results {
  background: var(--global-surface) !important;
  border-color: var(--global-border) !important;
  color: var(--ink) !important;
  backdrop-filter: blur(12px);
}

body .calculator-page .calculator-presets__group {
  background: transparent !important;
  border-color: rgba(164, 196, 218, 0.18) !important;
  box-shadow: none !important;
}

/* Section headings are part of the page flow, not separate panels. Keep the
   global grid visible behind them so the section title does not become a hard
   rectangular strip. */
body .section > .section-head {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body .calculator-page .calculator-result {
  background: var(--global-surface-soft) !important;
  border-color: var(--global-border) !important;
}

body .calculator-page .calculator-result__item {
  background: var(--global-surface-strong) !important;
  border-color: var(--global-border) !important;
}

/* Keep the full FAQ page's accordion transparent and let its topic cards carry
   the readable surface. */
body.faq-page .hero,
body.faq-page .faq,
body.faq-page .note {
  background: var(--global-surface) !important;
  border-color: var(--global-border) !important;
}

body #faq .faq-list,
body #faq .faq-topic,
body.faq-page .faq-topic {
  background: var(--global-surface-strong) !important;
  border-color: var(--global-border) !important;
  box-shadow: none !important;
}

body #faq .mini-card,
body #faq .faq-item,
body.faq-page .faq-question {
  background: transparent !important;
  border-color: var(--global-border) !important;
}

/* Legal/about content sections should read as nested blue spec cards, not
   as isolated solid strips inside the page panel. */
body .subpage .terms > section {
  background: var(--global-surface-strong) !important;
  border-color: var(--global-border) !important;
  box-shadow: none !important;
}

/* The drawer appears over the homepage as well as checkout, so it cannot be
   scoped only to body.checkout-page. */
body .cart-preview {
  background: var(--global-surface) !important;
  border-left-color: var(--global-border) !important;
  box-shadow: -24px 0 60px rgba(3, 13, 24, 0.42) !important;
}

body .cart-preview .cart-item {
  background: var(--global-surface-strong) !important;
  border-color: var(--global-border) !important;
  box-shadow: inset 0 0 0 1px rgba(164, 196, 218, 0.05) !important;
}

body .cart-preview .cart-item__image {
  background: var(--global-field) !important;
  border-color: var(--global-border) !important;
}

/* Preserve a little breathing room between the background grid and large
   storefront sections instead of painting a single opaque rectangle. */
body #catalog.section,
body #catalog-panel-accessories.section,
body #catalog-panel-pens.section,
body #catalog-panel-soon.section,
body #catalog-panel-nasal.section,
body #reviews.section,
body #packages.section {
  box-shadow: 0 20px 54px rgba(3, 13, 24, 0.12) !important;
}

body .dose-table th {
  background: rgba(44, 82, 104, 0.34) !important;
  border-color: var(--global-border) !important;
  color: var(--ink) !important;
}

body .button-secondary,
body .button-secondary:hover,
body .button-secondary:focus-visible {
  background: var(--global-surface-strong) !important;
  border-color: var(--global-border) !important;
  color: var(--ink) !important;
}

body.checkout-page .button-secondary:not(.button-delivery-help),
body.checkout-page .button-secondary:not(.button-delivery-help):hover,
body.checkout-page .button-secondary:not(.button-delivery-help):focus-visible,
body.checkout-payment .button-secondary,
body.checkout-payment .button-secondary:hover,
body.checkout-payment .button-secondary:focus-visible {
  background: var(--global-surface-strong) !important;
  border-color: var(--global-border) !important;
  color: var(--ink) !important;
}

/* Let the page grid occupy the gaps between surfaces. Large sections and
   cards keep their geometry and soft depth, but lose the hard one-pixel frame
   that made each area look like a separate box. Interactive controls keep
   their own focus/border treatment below this surface-only rule. */
body :is(
  .section,
  .panel,
  .hero,
  .content,
  .result,
  .contact-hero,
  .contact-card,
  .product-detail,
  .cart-preview,
  .card,
  .mini-card,
  .faq-topic,
  .guide-step,
  .terms > section,
  .dose-section,
  .table-wrap,
  .catalog-extra-panel,
  .catalog-extra-card,
  .calculator-result,
  .calculator-result__item,
  .checkout-items > *,
  .summary,
  .delivery-card,
  .payment-option,
  .payment-confirmation,
  .accessory-card,
  .bundle-choice,
  .bundle-choice__variant,
  .cart-preview .cart-item
) {
  border-color: transparent !important;
}

/* Explicitly cover the ID- and page-scoped legacy rules that previously
   restored visible borders after the shared surface pass. */
body #catalog .card,
body #catalog-panel-accessories .accessory-card,
body #catalog-panel-pens .accessory-card,
body #catalog-panel-soon .accessory-card,
body #catalog-panel-nasal .accessory-card,
body #faq .mini-card,
body #faq .faq-topic,
body.faq-page .faq-topic,
body .subpage .terms > section,
body .card.form,
body .card.results,
body .product-detail,
body .product-detail__purchase,
body .dose-section,
body .table-wrap,
body .cart-preview,
body .cart-preview .cart-item {
  border-color: transparent !important;
}

body #faq .faq-item,
body.faq-page .faq-question {
  border-top-color: rgba(164, 196, 218, 0.1) !important;
}

body .product-detail.product-detail .product-detail__purchase {
  border: 1px solid transparent !important;
}

body.checkout-page :is(
  #cart-summary,
  #checkout-form,
  .checkout-items > *,
  .mini-card.panel,
  .panel,
  .summary,
  .delivery-card,
  .payment-option,
  .payment-confirmation
) {
  border-color: transparent !important;
}

/* Checkout has several ID- and page-scoped legacy surfaces.  Give every
   checkout stage the same soft, borderless treatment as the storefront while
   leaving its inputs, chips, buttons, and focus states interactive.
   .header is deliberately excluded: on this page it's also the sticky
   .topbar (nav/logo/cart) and needs to stay opaque, not see-through to
   whatever's scrolled underneath it. */
body.checkout-page :is(
  .page,
  .shell,
  .hero,
  .footer,
  .layout,
  #cart-summary,
  #checkout-form,
  .checkout-items,
  .checkout-items > *,
  .delivery-card,
  .payment-option,
  .payment-confirmation,
  .checkout-step
) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body.checkout-page :is(
  #cart-summary,
  #checkout-form,
  .checkout-items > *,
  .delivery-card,
  .payment-option,
  .payment-confirmation
) {
  background: #f4f4f5 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body.checkout-payment :is(
  .page,
  .shell,
  .header,
  .hero,
  .footer
) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body.checkout-payment :is(
  .payment-card,
  .payment-status,
  .tutorial-widget,
  .nowpayments-payment,
  .contact-payment,
  .contact-payment__choice,
  .order-details,
  .tracking-note,
  .btcpay-contact-fallback
) {
  background: #f4f4f5 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body.checkout-complete :is(
  .page,
  .shell,
  .header,
  .hero,
  .footer
) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body.checkout-complete .details {
  background: #f4f4f5 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* The public error page shares the same background and surface system as the
   rest of the site instead of shipping a separate framed light/dark card. */
body.error-page .error-panel {
  background: #f4f4f5 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Transparent parents must not blur the page behind their gaps.  The cards
   keep their own surface treatment; only the section/container backdrop is
   cleared so the sharp global grid remains visible between them. */
body :is(
  .section,
  .content,
  .product-hub,
  .product-detail.product-hub,
  .contact-hero,
  .contact-card,
  .hero
) {
  backdrop-filter: none !important;
}

/* The borderless surfaces must also blend visually with the page.  Their
   borders are transparent above, but the old dark fill and large shadow still
   created a hard silhouette around every card.  Keep the rounded geometry and
   spacing while using lighter translucent layers and no surface shadow. */
body :is(
  .section,
  .hero,
  .content,
  .result,
  .contact-hero,
  .contact-card,
  .product-detail,
  .cart-preview
) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body :is(
  .checkout-intro-banner,
  .delivery-banner,
  .calculator-presets__group,
  .syringe-visualizer,
  .calculator-validation,
  .note,
  .contact-note
) {
  background: #f4f4f5 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Section headings are part of the page flow, not separate panels. Keep the
   global grid visible behind them so the section title does not become a hard
   rectangular strip. */
body .section > .section-head {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* The full FAQ page has legacy page-scoped surfaces with higher specificity;
   its parent sections should blend into the same global background too. */
body.faq-page :is(.hero, .faq, .note) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body :is(
  .panel,
  .card,
  .mini-card,
  .faq-topic,
  .guide-step,
  .terms > section,
  .dose-section,
  .table-wrap,
  .catalog-extra-panel,
  .catalog-extra-card,
  .calculator-result,
  .calculator-result__item,
  .checkout-items > *,
  .summary,
  .delivery-card,
  .payment-option,
  .payment-confirmation,
  .accessory-card,
  .bundle-choice,
  .bundle-choice__variant,
  .cart-preview .cart-item
) {
  background: #f4f4f5 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body #catalog.section,
body #catalog-panel-accessories.section,
body #catalog-panel-pens.section,
body #catalog-panel-soon.section,
body #catalog-panel-nasal.section,
body #reviews.section,
body #packages.section {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Class doubled (matches the same element either way) to outrank the later
   sitewide monochrome "restore white" rule at an equal-specificity tie —
   its own selector list includes a two-class compound (`.cart-preview
   .cart-item`), which pushes its specificity up to match a plain two-class
   selector like the one below; without the extra class here, that rule
   wins the tie by coming later in the file and repaints this solid white. */
body .product-detail.product-hub.product-hub {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body #catalog .card,
body #packages .card,
body #catalog-panel-accessories .accessory-card,
body #catalog-panel-pens .accessory-card,
body #catalog-panel-soon .accessory-card,
body #catalog-panel-nasal .accessory-card {
  background: #f4f4f5 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body .cart-preview {
  background: #ffffff !important;
  box-shadow: -18px 0 42px rgba(3, 13, 24, 0.22) !important;
}

body .cart-preview .cart-item {
  background: #f4f4f5 !important;
}

/* Status is a page section, so its hero must reveal the global grid instead
   of restoring the older opaque subpage surface. The Auralis-LL markers use
   the same blue-teal accent as the active navigation and primary actions. */
body.status-page .hero {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.status-page .panel > .eyebrow,
body.status-page .auralis-code__badge {
  background: var(--accent-gradient) !important;
  border-color: transparent !important;
  color: var(--button-primary-text) !important;
  box-shadow: 0 10px 26px rgba(91, 165, 177, 0.2) !important;
}

/* The code row is part of the panel surface, not a nested framed section.
   Leave the inputs transparent at rest; focus-within remains the only visual
   state indicator so keyboard users can still see the active field. */
body.status-page .auralis-code,
body.status-page .auralis-code__group,
body.status-page .auralis-code__digits input {
  background: transparent !important;
}

body.status-page .auralis-code__group {
  border-color: transparent !important;
  box-shadow: none !important;
}

body.status-page .auralis-code__group:focus-within {
  border-color: transparent !important;
  box-shadow: 0 0 0 3px rgba(121, 193, 181, 0.28) !important;
}

/* Dosage headings sit inside one large legacy panel. Make that wrapper and
   each section transparent while leaving the table wrappers as readable blue
   surfaces of their own. */
body.dosage-page .tools-panel,
body.dosage-page .dose-section {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Final card-content pass: keep copy areas on the card's own surface. */
body :is(
  .card .card-top,
  .card .card-specline,
  .card .card-title-row,
  .card .note,
  .card .meta,
  .card .meta-row,
  .card .card-actions
) {
  background: transparent !important;
  box-shadow: none !important;
}

/* Product cards follow the compact reference layout without COA badges or
   peptide descriptions. Product images remain optional until uploaded. */
body #catalog .card {
  min-height: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: stretch;
  border: 1px solid rgba(170, 184, 195, 0.58) !important;
  border-radius: 18px;
  background: #f8fafc !important;
  color: #14202a !important;
  box-shadow: 0 12px 28px rgba(3, 16, 28, 0.12) !important;
}

body #catalog .card::before,
body #catalog .card::after,
body #catalog .card .card-top {
  display: none !important;
}

body #catalog .card .product-card-image {
  aspect-ratio: 1.42;
  margin: -12px -12px 12px;
  border: 0;
  border-radius: 17px 17px 0 0;
  background:
    linear-gradient(135deg, rgba(215, 222, 238, 0.92), rgba(238, 222, 231, 0.84));
}

body #catalog .card .product-card-image img {
  padding: 10px 20px;
}

body #catalog .card .card-title-row {
  margin-top: 0;
}

body #catalog .card .card-title-row h3 {
  margin: 0;
  color: #14202a !important;
  -webkit-text-fill-color: #14202a !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  animation: none !important;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

body #catalog .card .product-card-link {
  color: #101820 !important;
  -webkit-text-fill-color: #101820 !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  text-shadow: 0 0 0 rgba(190, 204, 211, 0);
  animation: product-name-shine 5.5s ease-in-out infinite;
  text-decoration: none;
}

@keyframes product-name-shine {
  0%, 68%, 100% {
    text-shadow: 0 0 0 rgba(190, 204, 211, 0);
  }
  78%, 86% {
    text-shadow: 0 0 6px rgba(190, 204, 211, 0.72), 0 1px 0 rgba(255, 255, 255, 0.72);
  }
}

body #catalog .card .card-specline {
  display: block;
  margin: 12px 0 0;
  padding: 0;
  border: 1px solid #5362ff;
  border-radius: 9px;
  background: #eef1ff !important;
  color: #17203b;
}

body #catalog .card .card-specline label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body #catalog .card .card-strength-select {
  display: block;
  width: 100%;
  min-height: 32px;
  padding: 0 10px;
  background: #eef1ff !important;
  color: #17203b;
  font-size: 12px;
  letter-spacing: 0.01em;
  text-align: left;
  text-transform: none;
}

body #catalog .card .card-strength-select,
body #catalog .card .card-strength-select option {
  color: #111820 !important;
}

body #catalog .card .meta {
  margin-top: auto;
  padding-top: 12px;
}

body #catalog .card .meta-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  padding: 0;
  border-top: 0;
}

body #catalog .card .meta-row strong {
  color: #101820 !important;
  font-size: 16px;
  font-weight: 800;
}

body #catalog .card .card-actions {
  width: 100%;
  margin-top: auto !important;
  padding-top: 12px;
}

body #catalog .card .card-toggle {
  display: none !important;
}

body #catalog .card .cart-add {
  width: 100%;
  min-height: 40px;
  border: 0;
  border-radius: 11px;
  background: #121518 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body #catalog .card .cart-add:hover:not(:disabled),
body #catalog .card .cart-add:focus-visible:not(:disabled) {
  background: #28313a !important;
}

/* Final user-requested light surface pass: keep every public page white with
   black readable copy, while product names retain their separate black shine. */
:root {
  color-scheme: light;
  --color-page-background: #ffffff;
  --color-page-background-soft: #ffffff;
  --color-surface: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-heading: #000000;
  --color-text: #000000;
  --color-text-muted: #000000;
  --color-accent: #000000;
  --color-accent-contrast: #000000;
  --color-border: rgba(0, 0, 0, 0.18);
  --color-card: #ffffff;
  --color-button-primary-background: #ffffff;
  --color-button-primary-text: #000000;
  --color-button-secondary-background: #ffffff;
  --color-button-secondary-hover: #f2f2f2;
  --color-button-secondary-text: #000000;
  --color-button-secondary-border: rgba(0, 0, 0, 0.22);
  --color-hover-background: #f2f2f2;
  --color-active-background: #eeeeee;
  --color-focus-ring: rgba(0, 0, 0, 0.35);
  --bg: #ffffff;
  --bg-soft: #ffffff;
  --panel: #ffffff;
  --panel-strong: #ffffff;
  --ink: #000000;
  --muted: #000000;
  --line: rgba(0, 0, 0, 0.18);
  --accent: #000000;
  --accent-3: #000000;
  --accent-gradient: #ffffff;
  --surface-soft: #ffffff;
  --surface-strong: #ffffff;
  --border-soft: rgba(0, 0, 0, 0.16);
  --frost-glass: #ffffff;
  --global-page-background: #ffffff;
  --global-surface: #ffffff;
  --global-surface-strong: #ffffff;
  --global-surface-soft: #ffffff;
  --global-field: #ffffff;
  --global-border: rgba(0, 0, 0, 0.18);
  --global-active: #eeeeee;
}

html,
body {
  background: #ffffff !important;
  background-image: none !important;
  color: #000000 !important;
}

body::before,
body::after {
  display: none !important;
}

body * {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  /* Transparent by default so text never sits on a white box that mismatches
     its card surface. Real surfaces (page, cards, inputs, buttons, pills)
     opt back in via the explicit rules below and per-page overrides. */
  background-color: transparent !important;
  background-image: none !important;
}

body :is(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .brand-wordmark,
  .site-footer__logo > span:last-child
) {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  background: none !important;
  background-image: none !important;
  text-shadow: none !important;
  animation: none !important;
}

body :is(a, a:visited, button, input, select, textarea, option, label, strong, small, p, span, li, dt, dd, th, td) {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

body :is(input, select, textarea, option, button, .button) {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.24) !important;
  color: #000000 !important;
  box-shadow: none !important;
}

/* Text fields get a solid grey edge: >=3:1 against white (#8a8a8a = 3.45:1,
   WCAG 1.4.11). `:not(.button)` lifts this just above the rule before it. */
body :is(input, select, textarea):not(.button) {
  border-color: #8a8a8a !important;
}

body :is(
  .topbar,
  .header,
  .footer,
  .section,
  .panel,
  .hero,
  .landing-hero,
  .delivery-banner,
  .card,
  .mini-card,
  .product-detail,
  .product-detail__purchase,
  .catalog-extra-panel,
  .catalog-extra-card,
  .accessory-card,
  .bundle-choice,
  .bundle-builder,
  .form-card,
  .result-card,
  .calculator-result,
  .checkout-items,
  .summary,
  .info,
  .contact-hero,
  .contact-card,
  .faq,
  .faq-topic,
  .guide-panel,
  .dose-section,
  .table-wrap,
  .cart-preview,
  .cart-preview .cart-item
) {
  background: #ffffff !important;
  background-image: none !important;
  border-color: rgba(0, 0, 0, 0.18) !important;
  box-shadow: none !important;
  color: #000000 !important;
}

body #catalog .card,
body #packages .card,
body #catalog-panel-accessories .accessory-card,
body #catalog-panel-pens .accessory-card,
body #catalog-panel-soon .accessory-card,
body #catalog-panel-nasal .accessory-card {
  background: #ffffff !important;
  background-image: none !important;
  border-color: rgba(0, 0, 0, 0.18) !important;
  color: #000000 !important;
}

body #catalog .card .card-title-row h3 {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  background: none !important;
  background-image: none !important;
  animation: none !important;
}

body #catalog .card .product-card-link {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  background: none !important;
  background-image: none !important;
  text-shadow: 0 0 0 rgba(190, 204, 211, 0);
  animation: product-name-shine 5.5s ease-in-out infinite !important;
}

body #catalog .card .card-strength-select,
body #catalog .card .card-strength-select option,
body #catalog .card .meta-row strong,
body #catalog .card .cart-add {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

body #catalog .card .cart-add,
body #catalog .card .cart-add:hover:not(:disabled),
body #catalog .card .cart-add:focus-visible:not(:disabled) {
  background: #ffffff !important;
  border: 1px solid #000000 !important;
  color: #000000 !important;
  box-shadow: none !important;
}

body :is(.button-primary, .button-secondary, .catalog-tab, .catalog-tab.is-active) {
  background: #ffffff !important;
  border-color: #000000 !important;
  color: #000000 !important;
  box-shadow: none !important;
}

body ::placeholder {
  color: #000000 !important;
  opacity: 1 !important;
}

/* Top navigation banner: light green into marine, inspired by the supplied
   reference while keeping the sitewide black-on-white readability rule. */
body .topbar {
  background: linear-gradient(112deg, #d9f2df 0%, #96caaa 42%, #12344b 100%) !important;
  background-image: linear-gradient(112deg, #d9f2df 0%, #96caaa 42%, #12344b 100%) !important;
  border: 1px solid rgba(18, 52, 75, 0.28) !important;
  border-radius: 22px;
  padding: 14px 18px;
  box-shadow: 0 12px 28px rgba(18, 52, 75, 0.14) !important;
}

body .topbar .brand-wordmark {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  background: none !important;
  background-image: none !important;
  animation: none !important;
}

body .topbar .nav a,
body .topbar .nav-dropdown__button,
body .topbar .cart-toggle {
  background: rgba(255, 255, 255, 0.86) !important;
  border-color: rgba(0, 0, 0, 0.22) !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  box-shadow: none !important;
}

body .topbar .nav a:hover,
body .topbar .nav a:focus-visible,
body .topbar .nav-dropdown__button:hover,
body .topbar .nav-dropdown__button:focus-visible,
body .topbar .nav-dropdown.is-open .nav-dropdown__button,
body .topbar .cart-toggle:hover,
body .topbar .cart-toggle:focus-visible {
  background: #ffffff !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

/* Keep the navigation as a flat header. The green-to-marine treatment is only
   a straight separator between the menu and the page content.

   Full-bleed + sticky: the topbar used to sit inline inside the 1200px
   .page container, so it scrolled away with the rest of the content. Pull
   it out to the full viewport width (same left:50%/100vw/translateX(-50%)
   technique as the hero and delivery banner) and pin it to the top of the
   viewport, with padding-inline calculated to line its content back up
   with a deliberately wider header content area. Reading content still uses
   the page container's 1200px maximum; navigation needs room for translated
   labels and the market controls. Skipped on admin pages, which have their
   own simpler topbar. */
body:not([data-admin-page]) .topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  /* Full-bleed via negative margins rather than left:50%/transform: the
     `left` offset in that usual trick is read by position:sticky as its
     horizontal stick-threshold, not a plain positional shift like it is
     for position:relative — combined with top:0 it sent the whole bar
     off-screen. Margins don't have that conflict. */
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* .page's own padding-top (24px) otherwise shows as blank space above
     the header until the page is scrolled past it, since a sticky element
     only catches at `top: 0` once scrolling moves its static position
     there — it doesn't remove that gap at rest. Cancel it here so the
     header sits flush with the viewport top from the very first paint. */
  margin-top: -24px;
  padding: 12px max(20px, calc((100vw - 1400px) / 2));
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
}

@media (min-width: 1024px) {
  body:not([data-admin-page]) .topbar {
    /* Reserve a stable desktop header height before the navigation module
       runs, matching the actual rendered height (measured: 72px) so the
       reservation doesn't itself add dead space above/below the nav row. */
    min-height: 72px;
  }
}

body[data-admin-page] .topbar {
  position: relative;
  padding: 14px 0 18px;
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
}

body .topbar::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100vw;
  height: 4px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #d9f2df 0%, #96caaa 42%, #12344b 100%) !important;
  pointer-events: none;
}

/* Keep primary navigation as clean text links without pill borders or fills. */
body .topbar .nav a,
body .topbar .site-nav a,
body .topbar .nav-dropdown__button {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding-inline: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

body .topbar .nav a:hover,
body .topbar .nav a:focus-visible,
body .topbar .site-nav a:hover,
body .topbar .site-nav a:focus-visible,
body .topbar .nav-dropdown__button:hover,
body .topbar .nav-dropdown__button:focus-visible,
body .topbar .nav-dropdown.is-open .nav-dropdown__button {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Show every product strength at once, ordered by mg, instead of hiding them
   inside a select control. */
body #catalog .card .card-specline {
  display: grid;
  /* The base .card-specline rule sets a two-column template
     (auto minmax(0, 1fr)) for the old label/value spec layout. Left
     unchecked it drops the strength list into the content-sized `auto`
     column, so the mg rows collapse to their text width while the add
     button still stretches. Force a single full-width column. */
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  gap: 7px;
  width: 100% !important;
  inline-size: 100% !important;
  max-width: none !important;
  min-width: 0;
  align-self: stretch;
  justify-self: stretch;
  margin: 12px 0 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
}

body #catalog .card .card-strength-list {
  display: grid;
  gap: 6px;
  width: 100% !important;
  inline-size: 100% !important;
  max-width: none !important;
  min-width: 0;
  align-self: stretch;
  justify-self: stretch;
}

body #catalog .card .card-strength-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  align-items: center;
  width: 100% !important;
  inline-size: 100% !important;
  max-width: none !important;
  min-width: 0;
  justify-self: stretch;
  box-sizing: border-box;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(0, 0, 0, 0.18) !important;
  border-radius: 11px !important;
  background: #ffffff !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  box-shadow: none !important;
  transform: none !important;
}

body #catalog .card .card-strength-option > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body #catalog .card .card-strength-option__price {
  min-width: 0;
  max-width: 48%;
  overflow: hidden;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  font-variant-numeric: tabular-nums;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body #catalog .card .card-strength-option:hover:not(:disabled),
body #catalog .card .card-strength-option:focus-visible,
body #catalog .card .card-strength-option.is-active {
  border-color: #000000 !important;
  background: #121416 !important;
  color: #000000 !important;
  box-shadow: none !important;
  transform: none !important;
}

body #catalog .card .card-strength-option.is-active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body #catalog .card .card-strength-option.is-active .card-strength-option__price {
  color: #d6e3ec !important;
  -webkit-text-fill-color: #d6e3ec !important;
}

body #catalog .card .card-strength-option:hover:not(:disabled):not(.is-active),
body #catalog .card .card-strength-option:focus-visible:not(.is-active) {
  background: #f2f2f2 !important;
  color: #000000 !important;
}

body #catalog .card .card-strength-option:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

/* Keep the product-card surface visibly light gray against the white page. */
body #catalog .card {
  background: #f2f2f2 !important;
  background-image: none !important;
}

/* Variant choices and the cart action use the same full-card control rules.
   Keeping these declarations together prevents the mg controls from falling
   back to their content width while the add button stretches to the card. */
body #catalog .card .card-strength-option,
body #catalog .card .cart-add {
  box-sizing: border-box;
  width: 100% !important;
  min-height: 40px !important;
  border: 1px solid #000000 !important;
  border-radius: 11px !important;
  font-size: 13px;
  font-weight: 700;
}

/* Keep the catalog search controls compact instead of letting the search
   field span nearly the entire page. They still wrap cleanly on narrow views. */
body .catalog-tools .catalog-search-control {
  flex: 1 1 480px;
  width: min(100%, 720px);
  max-width: 720px;
  min-width: 180px;
}

body .catalog-tools #catalog-search {
  display: block;
  width: 100%;
  min-height: 38px;
  padding-inline: 12px;
}

/* Place the single available category action where the removed status filter
   used to sit, aligned to the right of the search field. */
body .catalog-tools .catalog-tabs {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  margin: 0 0 0 auto;
  justify-content: flex-end;
}

body .catalog-tools .catalog-tab {
  min-height: clamp(34px, 8vw, 40px);
  padding: 0 clamp(10px, 3vw, 16px);
  font-size: clamp(12.5px, 3.4vw, 14px);
}

/* Below ~1000px, four always-visible category tabs no longer reliably fit
   next to the search field on one row. Between ~700-950px specifically,
   the search field's flex-basis was wide enough that the tabs wrapped onto
   their own row anyway but stayed right-aligned (the desktop
   justify-content:flex-end), leaving them stranded in the corner with a
   large empty gap — give the search field its own full-width row and
   center the tabs on the next one instead, with enough margin above the
   width where they naturally share one row that there's no dead zone. */
@media (max-width: 1000px) {
  body .catalog-tools {
    flex-wrap: wrap;
  }

  body .catalog-tools .catalog-search-control {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }

  body .catalog-tools #catalog-search {
    min-width: 0;
  }

  body .catalog-tools .catalog-tabs {
    flex: 1 1 100%;
    margin-left: 0;
    justify-content: center;
  }
}

/* Final dose-row fix: both states share one full-width flex row. The broad
   sitewide surface rule above must not paint white boxes behind the row's
   inline text, and the price must never be ellipsized. */
body #catalog .card .card-strength-option {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100% !important;
  inline-size: 100% !important;
  max-width: none !important;
  min-width: 0;
  min-height: 40px !important;
  box-sizing: border-box;
  padding: 0 14px;
  overflow: visible !important;
  border-radius: 10px !important;
}

body #catalog .card .card-strength-option > span {
  display: block;
  min-width: 0;
  overflow: visible !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  text-overflow: clip !important;
  white-space: nowrap;
}

body #catalog .card .card-strength-option > span:first-child {
  flex: 1 1 auto;
  text-align: left;
}

body #catalog .card .card-strength-option > .card-strength-option__price {
  flex: 0 0 auto;
  max-width: none !important;
  overflow: visible !important;
  text-align: right;
  text-overflow: clip !important;
  white-space: nowrap;
}

body #catalog .card .card-strength-option.is-active > span {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body #catalog .card .card-strength-option.is-active > .card-strength-option__price {
  color: #d6e3ec !important;
  -webkit-text-fill-color: #d6e3ec !important;
}

/* A variant with a COA gets a small button squeezed onto its own row,
   sharing space with the price pill instead of growing the row. A variant
   without one has no sibling here, so its pill still fills the row exactly
   as before — nothing about other rows shifts or resizes. */
.card-strength-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

body #catalog .card .card-strength-row .card-strength-option {
  width: auto !important;
  flex: 1 1 auto !important;
}

.card-strength-coa {
  flex: 0 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0;
  border: 1px solid #000000 !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
}

.card-strength-coa:hover,
.card-strength-coa:focus-visible {
  background: #f2f2f2 !important;
}

/* Accessory cards (BAC-vann, Sprøyter & injeksjonstørk) reuse the peptide
   card's .card-strength-list/-option markup for their size pickers, but live
   outside #catalog so none of the rules above reach them — mirror the final
   cascade-resolved peptide pill styling here, scoped to .accessory-card. */
body .accessory-card .card-strength-list {
  display: grid;
  gap: 6px;
  width: 100%;
}

body .accessory-card .card-strength-option {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100% !important;
  min-height: 40px !important;
  box-sizing: border-box;
  padding: 0 14px;
  border: 1px solid #000000 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  box-shadow: none !important;
}

body .accessory-card .card-strength-option > span {
  display: block;
  min-width: 0;
  background: transparent !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  white-space: nowrap;
}

body .accessory-card .card-strength-option > span:first-child {
  flex: 1 1 auto;
  text-align: left;
}

body .accessory-card .card-strength-option__price {
  flex: 0 0 auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

body .accessory-card .card-strength-option:hover:not(:disabled):not(.is-active),
body .accessory-card .card-strength-option:focus-visible:not(.is-active) {
  background: #f2f2f2 !important;
  color: #000000 !important;
}

body .accessory-card .card-strength-option.is-active {
  border-color: #000000 !important;
  background: #121416 !important;
}

body .accessory-card .card-strength-option.is-active > span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body .accessory-card .card-strength-option.is-active > .card-strength-option__price {
  color: #d6e3ec !important;
  -webkit-text-fill-color: #d6e3ec !important;
}

body .accessory-card .card-strength-option:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

/* ------------------------------------------------------------------ *
 * Clean catalog card: borderless light surface, seamless image head, *
 * short peptide subtitle, solid pill "add" button. Matches the       *
 * reference layout without COA badges or discount pricing.           *
 * ------------------------------------------------------------------ */
body #catalog .card {
  padding: 14px !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body #catalog .card:hover {
  background: #fafafa !important;
  box-shadow: none !important;
}

body #catalog .card .product-card-image {
  margin: -14px -14px 14px !important;
  border-radius: 16px 16px 0 0 !important;
}

body #catalog .card .card-title-row h3 {
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

body #catalog .card .card-subtitle {
  margin: 3px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  color: #6e6a7c !important;
  -webkit-text-fill-color: #6e6a7c !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
}

body #catalog .card .card-specline {
  margin-top: 14px !important;
}

body #catalog .card .card-actions {
  display: flex !important;
  gap: 8px !important;
  margin-top: auto !important;
  padding-top: 14px !important;
}

body #catalog .card .card-actions > .button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

body #catalog .card .cart-add {
  width: 100% !important;
  min-height: 44px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #0e0e0e !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}

/* "Detaljer" link — outline pill next to "Legg til" on the catalog hub */
body #catalog .card .card-details-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  border: 1px solid #0e0e0e !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #0e0e0e !important;
  -webkit-text-fill-color: #0e0e0e !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

body #catalog .card .card-details-link:hover,
body #catalog .card .card-details-link:focus-visible {
  background: #f2f2f2 !important;
}

body #catalog .card .cart-add:hover:not(:disabled),
body #catalog .card .cart-add:focus-visible:not(:disabled) {
  background: #26262a !important;
}

body #catalog .card .cart-add:disabled {
  opacity: 0.45 !important;
}

/* ------------------------------------------------------------------ *
 * Tilbehør panel: same layout + card system as the product catalog  *
 * on the home page.                                                  *
 * ------------------------------------------------------------------ */
body #catalog-panel-accessories .accessories-grid,
body #catalog-panel-pens .accessories-grid,
body #catalog-panel-soon .accessories-grid,
body #catalog-panel-nasal .accessories-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

@media (max-width: 980px) {
  body #catalog-panel-accessories .accessories-grid,
  body #catalog-panel-pens .accessories-grid,
  body #catalog-panel-soon .accessories-grid,
  body #catalog-panel-nasal .accessories-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 700px) {
  body #catalog-panel-accessories .accessories-grid,
  body #catalog-panel-pens .accessories-grid,
  body #catalog-panel-soon .accessories-grid,
  body #catalog-panel-nasal .accessories-grid {
    grid-template-columns: 1fr !important;
  }
}

body #catalog-panel-accessories .accessory-card,
body #catalog-panel-pens .accessory-card,
body #catalog-panel-soon .accessory-card,
body #catalog-panel-nasal .accessory-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 14px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: #f4f4f5 !important;
  background-image: none !important;
  box-shadow: none !important;
}

body #catalog-panel-accessories .accessory-card:hover,
body #catalog-panel-pens .accessory-card:hover,
body #catalog-panel-soon .accessory-card:hover,
body #catalog-panel-nasal .accessory-card:hover {
  box-shadow: 0 8px 24px rgba(15, 20, 30, 0.08) !important;
}

/* Product photos here (nesespray flasker especially) have a lot of blank
   margin baked into the source shot, so contain left visible white bars on
   either side inside the card's own frame. Cover fills the box edge to
   edge instead — seamless with the rest of the card. The "Kommer snart"
   pill used to sit above the photo (see the hidden rule below) eating into
   its height and making the crop tighter than it needed to be; with that
   pill gone the box goes taller so the bottle photo needs barely any zoom. */
body #catalog-panel-accessories .product-card-image,
body #catalog-panel-pens .product-card-image,
body #catalog-panel-soon .product-card-image,
body #catalog-panel-nasal .product-card-image {
  margin: -14px -14px 14px !important;
  border-radius: 16px 16px 0 0 !important;
}
body #catalog-panel-pens .product-card-image img,
body #catalog-panel-soon .product-card-image img,
body #catalog-panel-nasal .product-card-image img {
  object-fit: cover !important;
  transform: scale(1.02);
}
/* Tilbehør mixes portrait bottles (BAC-vann) with landscape shots (the
   syringe/wipes box) in the same square box — cover cropped the portrait
   ones hard top and bottom (the cap and base ran off the edge). contain
   never crops either shape, just letterboxes into the card's own tinted
   background instead, which already reads as an intentional surface (see
   the radial-gradient rule below), not empty dead space. */
body #catalog-panel-accessories .product-card-image img {
  object-fit: contain !important;
}
/* Pens/nesespray photos are all the same portrait bottle/pen shape, so a
   taller box crops them cleanly. Tilbehør mixes that with landscape shots
   (the syringe/wipes box), which a portrait box would crop hard on the
   sides — square is the safer middle ground when orientation varies. */
body #catalog-panel-pens .product-card-image,
body #catalog-panel-soon .product-card-image,
body #catalog-panel-nasal .product-card-image {
  aspect-ratio: 3 / 4 !important;
}
body #catalog-panel-accessories .product-card-image {
  aspect-ratio: 1 / 1 !important;
}

/* The "Kommer snart" / "På lager" status pill used to float above the photo,
   overlapping it and eating into its space. Removed here per request — the
   Lagerstatus and "Pris ikke satt" text already say the same thing below the
   photo, so the pill was redundant as well as cramped. */
body #catalog-panel-accessories .accessory-card .pill,
body #catalog-panel-pens .accessory-card .pill,
body #catalog-panel-soon .accessory-card .pill,
body #catalog-panel-nasal .accessory-card .pill {
  display: none !important;
}

/* kill the white boxes the sitewide `body * { background:#fff }` rule paints
   behind text on the grey card (the status pill keeps its white background) */
body #catalog-panel-accessories .accessory-card :is(h3, p, strong, .accessory-card__price),
body #catalog-panel-pens .accessory-card :is(h3, p, strong, .accessory-card__price),
body #catalog-panel-soon .accessory-card :is(h3, p, strong, .accessory-card__price),
body #catalog-panel-nasal .accessory-card :is(h3, p, strong, .accessory-card__price) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

body #catalog-panel-accessories .accessory-card h3,
body #catalog-panel-pens .accessory-card h3,
body #catalog-panel-soon .accessory-card h3,
body #catalog-panel-nasal .accessory-card h3 {
  margin: 0 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

body #catalog-panel-accessories .accessory-card p,
body #catalog-panel-pens .accessory-card p,
body #catalog-panel-soon .accessory-card p,
body #catalog-panel-nasal .accessory-card p {
  margin: 3px 0 0 !important;
  color: #6e6a7c !important;
  -webkit-text-fill-color: #6e6a7c !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}

/* price + button anchor to the bottom, same as the catalog card actions */
body #catalog-panel-accessories .accessory-card__price,
body #catalog-panel-pens .accessory-card__price,
body #catalog-panel-soon .accessory-card__price,
body #catalog-panel-nasal .accessory-card__price {
  margin: auto 0 0 !important;
  padding-top: 14px !important;
  color: #0e0e0e !important;
  -webkit-text-fill-color: #0e0e0e !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

body #catalog-panel-accessories .accessory-card__price + .button,
body #catalog-panel-pens .accessory-card__price + .button,
body #catalog-panel-soon .accessory-card__price + .button,
body #catalog-panel-nasal .accessory-card__price + .button,
body #catalog-panel-accessories .accessory-card .cart-add,
body #catalog-panel-pens .accessory-card .cart-add,
body #catalog-panel-soon .accessory-card .cart-add,
body #catalog-panel-nasal .accessory-card .cart-add {
  width: 100% !important;
  min-height: 44px !important;
  margin-top: 10px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #0e0e0e !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}

body #catalog-panel-accessories .accessory-card .cart-add:hover:not(:disabled),
body #catalog-panel-pens .accessory-card .cart-add:hover:not(:disabled),
body #catalog-panel-soon .accessory-card .cart-add:hover:not(:disabled),
body #catalog-panel-nasal .accessory-card .cart-add:hover:not(:disabled) {
  background: #26262a !important;
}

/* ---- Utsolgt / utilgjengelig ------------------------------------- *
 * The button carries `disabled` and its label reads "Utsolgt" (set   *
 * by loadServerAccessories when available === false). Grey the whole  *
 * card's text and turn the action into a plainly dead pill.          *
 * ---------------------------------------------------------------- */
body #catalog-panel-accessories .accessory-card:has(.cart-add:disabled) :is(h3, p, strong, .accessory-card__price),
body #catalog-panel-pens .accessory-card:has(.cart-add:disabled) :is(h3, p, strong, .accessory-card__price),
body #catalog-panel-soon .accessory-card:has(.cart-add:disabled) :is(h3, p, strong, .accessory-card__price),
body #catalog-panel-nasal .accessory-card:has(.cart-add:disabled) :is(h3, p, strong, .accessory-card__price) {
  color: #666666 !important;
  -webkit-text-fill-color: #666666 !important;
}

body #catalog-panel-accessories .accessory-card:has(.cart-add:disabled) .pill,
body #catalog-panel-pens .accessory-card:has(.cart-add:disabled) .pill,
body #catalog-panel-soon .accessory-card:has(.cart-add:disabled) .pill,
body #catalog-panel-nasal .accessory-card:has(.cart-add:disabled) .pill {
  color: #666666 !important;
  -webkit-text-fill-color: #666666 !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

body #catalog-panel-accessories .accessory-card .cart-add:disabled,
body #catalog-panel-pens .accessory-card .cart-add:disabled,
body #catalog-panel-soon .accessory-card .cart-add:disabled,
body #catalog-panel-nasal .accessory-card .cart-add:disabled {
  background: #e6e6e6 !important;
  color: #666666 !important;
  -webkit-text-fill-color: #666666 !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

/* Same treatment for a sold-out product card in the main catalog. */
body #catalog .card:has(.cart-add:disabled) :is(.card-title-row h3, .card-subtitle) {
  color: #666666 !important;
  -webkit-text-fill-color: #666666 !important;
}

body #catalog .card .cart-add:disabled {
  background: #e6e6e6 !important;
  color: #666666 !important;
  -webkit-text-fill-color: #666666 !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

/* keep the panel heading parallel with "Produkter": drop the eyebrow pill */
body #catalog-panel-accessories .section-head .eyebrow,
body #catalog-panel-pens .section-head .eyebrow,
body #catalog-panel-soon .section-head .eyebrow,
body #catalog-panel-nasal .section-head .eyebrow {
  display: none !important;
}


/* The hero heading is one continuous wordmark. Do not let the sitewide white
   surface rule paint a separate box behind the second line. */
body #landing-title,
body #landing-title span {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* ================================================================= *
 * Cart drawer (#cart-preview): clean "image 2" layout. ID-scoped so  *
 * it wins over the older .cart-preview class rules further up.        *
 * Only Total + "Gå til betaling" in the footer — no shipping copy,   *
 * discounts, promo codes or protection add-ons.                      *
 * ================================================================= */
body #cart-preview {
  padding: 20px !important;
  background: #ffffff !important;
  border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: -20px 0 50px rgba(15, 20, 30, 0.18) !important;
  color: #0e0e0e !important;
}

body #cart-preview .cart-preview__header {
  padding-bottom: 14px !important;
  border-bottom: 1px solid #ececec !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}

body #cart-preview .cart-preview__header strong {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: transparent !important;
}

body #cart-preview .cart-preview__count {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: #e8f3ee !important;
  color: #2f7d5f !important;
  -webkit-text-fill-color: #2f7d5f !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

body #cart-preview .cart-preview__close {
  color: #666666 !important;
  font-size: 22px !important;
}

body #cart-preview .cart-preview__items {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  gap: 0 !important;
  padding: 4px 0 12px !important;
}

body #cart-preview .cartlite-item {
  display: grid !important;
  grid-template-columns: 68px minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: start !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid #efefef !important;
  background: transparent !important;
}

body #cart-preview .cartlite-item:last-child {
  border-bottom: 0 !important;
}

body #cart-preview .cartlite-item__thumb {
  width: 68px !important;
  height: 68px !important;
  align-self: center !important;
  border: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #f4f4f5 !important;
}

body #cart-preview .cartlite-item__thumb img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: none !important;
}

body #cart-preview .cartlite-item__info {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
}

body #cart-preview .cartlite-item__name {
  max-width: 100% !important;
  overflow: hidden !important;
  color: #0e0e0e !important;
  -webkit-text-fill-color: #0e0e0e !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  background: transparent !important;
}

body #cart-preview .cartlite-item__dose {
  color: #6b6b6b !important;
  -webkit-text-fill-color: #6b6b6b !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  background: transparent !important;
}

body #cart-preview .cartlite-item__qty {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  width: fit-content !important;
  min-height: 40px !important;
  margin-top: 2px !important;
  margin-left: -8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* 40×40 tap targets; the glyph stays small. */
body #cart-preview .cartlite-item__qty .cart-icon-button {
  width: 40px !important;
  height: 40px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #333333 !important;
  -webkit-text-fill-color: #333333 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* The old cart CSS hides the "+" glyph on the increase button (font-size:0)
   and re-adds it via ::before. Our rule restores font-size, which brought the
   literal "+" back — so now drop the pseudo to avoid a doubled "+". */
body #cart-preview .cartlite-item__qty .cart-icon-button[data-cart-action="increase"]::before {
  content: none !important;
  display: none !important;
}

body #cart-preview .cartlite-item__qty .cart-icon-button:hover,
body #cart-preview .cartlite-item__qty .cart-icon-button:focus-visible {
  background: #f2f2f2 !important;
  color: #0e0e0e !important;
  -webkit-text-fill-color: #0e0e0e !important;
}

body #cart-preview .cartlite-item__qty .quantity-value {
  width: 2ch !important;
  min-width: 2ch !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #0e0e0e !important;
  -webkit-text-fill-color: #0e0e0e !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 24px !important;
  text-align: center !important;
}

body #cart-preview .cartlite-item__end {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 14px !important;
  min-width: 0 !important;
}

body #cart-preview .cartlite-item__remove {
  min-width: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #767676 !important;
  -webkit-text-fill-color: #767676 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

body #cart-preview .cartlite-item__remove:hover,
body #cart-preview .cartlite-item__remove:focus-visible {
  color: #0e0e0e !important;
  -webkit-text-fill-color: #0e0e0e !important;
}

body #cart-preview .cartlite-item__price {
  color: #0e0e0e !important;
  -webkit-text-fill-color: #0e0e0e !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  background: transparent !important;
}

body #cart-preview .cart-preview__footer {
  padding-top: 14px !important;
  border-top: 1px solid #ececec !important;
}

body #cart-preview .cart-preview__footer > strong {
  color: #0e0e0e !important;
  -webkit-text-fill-color: #0e0e0e !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  background: transparent !important;
}

body #cart-preview .cart-preview__footer .button-primary {
  min-height: 46px !important;
  padding: 0 22px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #0e0e0e !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: none !important;
}

body #cart-preview .cart-preview__footer .button-primary:hover {
  background: #26262a !important;
}

/* "Har du glemt noe?" BAC-vann cross-sell, shown between the item list and
   the total when the cart doesn't already contain BAC-vann. */
body #cart-preview .cart-preview__upsell {
  margin: 4px 0 0 !important;
  padding: 14px !important;
  border: 1px solid #ececec !important;
  border-radius: 14px !important;
  background: #fafafa !important;
}

body #cart-preview .cart-preview__upsell-title {
  display: block !important;
  margin: 0 0 10px !important;
  color: #0e0e0e !important;
  -webkit-text-fill-color: #0e0e0e !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  background: transparent !important;
}

body #cart-preview .cart-preview__upsell-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

body #cart-preview .cart-preview__upsell-pill {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  border: 1px solid #dcdcdc !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #0e0e0e !important;
  -webkit-text-fill-color: #0e0e0e !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

body #cart-preview .cart-preview__upsell-pill:hover:not(:disabled) {
  border-color: #0e0e0e !important;
}

body #cart-preview .cart-preview__upsell-pill:disabled {
  color: #767676 !important;
  -webkit-text-fill-color: #767676 !important;
  cursor: not-allowed !important;
}

body #cart-preview .cart-preview__upsell-pill s {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

/* Tilbehør/peptid-veksleren på katalog-huben (/produkter/) — panelet som
   ikke er valgt skal være skjult, uansett .section-regler. */
body [data-catalog-panel][hidden] {
  display: none !important;
}

/* ================================================================= *
 * Produktside — "Om forbindelsen": kort beskrivelse + compound-info  *
 * (ingen COA). Inspirert av aminoclub sine produktsider.            *
 * ================================================================= */
body .product-detail__eyebrow {
  margin: 0 0 6px !important;
  color: #6b6b6b !important;
  -webkit-text-fill-color: #6b6b6b !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  background: transparent !important;
}

body .product-detail__info {
  margin-top: 32px !important;
  padding-top: 28px !important;
  border-top: 1px solid #ececec !important;
}

body .product-detail__info h2 {
  margin: 0 0 14px !important;
  font-size: clamp(18px, 2.4vw, 22px) !important;
  font-weight: 700 !important;
  color: #0e0e0e !important;
  -webkit-text-fill-color: #0e0e0e !important;
  background: transparent !important;
}

body .product-detail__aliases {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 16px !important;
}

body .product-detail__aliases .pill {
  min-height: 26px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.14) !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #4a4a4a !important;
  -webkit-text-fill-color: #4a4a4a !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  box-shadow: none !important;
  animation: none !important;
}

/* Delivery-format tag (Penn/Nesespray) on a product page borrowing its vial
   counterpart's copy — filled instead of outlined so it reads as a distinct
   fact about the product, not just another alias in the same row. */
body .product-detail__aliases .pill-format {
  border-color: transparent !important;
  background: #12344a !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body .product-detail__overview {
  max-width: 68ch !important;
  margin: 0 0 20px !important;
  color: #3a3a3a !important;
  -webkit-text-fill-color: #3a3a3a !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  background: transparent !important;
}

body .product-detail__facts {
  margin: 0 !important;
  max-width: 560px !important;
}

body .product-detail__fact {
  display: grid !important;
  grid-template-columns: 150px minmax(0, 1fr) !important;
  gap: 14px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

body .product-detail__fact:last-child {
  border-bottom: 0 !important;
}

body .product-detail__fact dt {
  margin: 0 !important;
  color: #6b6b6b !important;
  -webkit-text-fill-color: #6b6b6b !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

body .product-detail__fact dd {
  margin: 0 !important;
  color: #0e0e0e !important;
  -webkit-text-fill-color: #0e0e0e !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  background: transparent !important;
}

@media (max-width: 560px) {
  body .product-detail__fact {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
  }
}

body .product-detail__blend-list {
  display: grid !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body .product-detail__blend-list li {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

body .product-detail__blend-list li span:last-child {
  color: #6b6b6b !important;
  -webkit-text-fill-color: #6b6b6b !important;
  font-weight: 700 !important;
}

/* ================================================================= *
 * Produktside — to-kolonners oppsett (bilde + kjøpspanel), rene     *
 * styrke-knapper, tittel/beskrivelse i panelet. Inspirert av        *
 * aminoclub. Ingen COA / rabatt / leveringstid.                     *
 * ================================================================= */
/* Class doubled for the same reason as the .product-hub rule above: this
   selector's specificity (one class) is otherwise beaten by the sitewide
   monochrome "restore white" rule, whose `.cart-preview .cart-item`
   argument gives it an effective two-class specificity. */
body .product-detail.product-detail {
  max-width: 1080px !important;
  margin: 24px auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body .product-detail__top {
  display: flex !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
}

body .product-detail__hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 30px !important;
  align-items: start !important;
  margin: 0 !important;
}

@media (max-width: 860px) {
  body .product-detail__hero { grid-template-columns: 1fr !important; gap: 22px !important; }
}

/* Was capped at 62%/78% of the box, floating in a sea of empty gradient —
   the photo itself has a lot of blank margin baked in already (see the
   card-grid fix above), so shrinking it further left the hero looking
   sparse instead of reaching the surrounding layout's own edges (the back
   link's rule on the left, the eyebrow text's top). Cover now fills the box
   completely, matching the treatment already used for the grid cards. */
body .product-detail__image {
  display: block !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: radial-gradient(circle at 50% 42%, #ffffff, #eef0f2) !important;
}

body .product-detail__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transform: none !important;
}

body .product-detail__purchase {
  width: 100% !important;
  min-width: 0 !important;
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body .product-detail__purchase .product-detail__eyebrow {
  margin: 0 0 6px !important;
}

body .product-detail__purchase h1 {
  margin: 0 0 12px !important;
  font-size: clamp(28px, 3.6vw, 40px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
}

body .product-detail__purchase .product-detail__aliases {
  margin: 0 0 14px !important;
}

body .product-detail__purchase .product-detail__overview {
  max-width: none !important;
  margin: 0 0 4px !important;
}

body .product-detail__rule {
  height: 0 !important;
  margin: 18px 0 !important;
  border: 0 !important;
  border-top: 1px solid #ececec !important;
}

body .product-detail__pick {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 14px !important;
  margin: 0 0 16px !important;
}

body .product-detail__pick-label {
  color: #6b6b6b !important;
  -webkit-text-fill-color: #6b6b6b !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

body .product-detail .variant-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
}

body .product-detail .product-variant {
  min-height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid #d8d8d8 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #0e0e0e !important;
  -webkit-text-fill-color: #0e0e0e !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  transform: none !important;
}

body .product-detail .product-variant:hover:not(.is-active) {
  border-color: #0e0e0e !important;
  background: #ffffff !important;
}

body .product-detail .product-variant.is-active {
  background: #0e0e0e !important;
  background-image: none !important;
  border-color: #0e0e0e !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: none !important;
}

body .product-detail .product-variant.is-soldout:not(.is-active),
body .product-detail .product-variant.is-soldout:not(.is-active):hover,
body .product-detail .product-variant.is-soldout:not(.is-active):focus-visible {
  border: 1px dashed #cfcfcf !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #767676 !important;
  -webkit-text-fill-color: #767676 !important;
  text-decoration: line-through !important;
  animation: none !important;
  box-shadow: none !important;
  transform: none !important;
}

body .product-detail .product-variant.is-soldout::after {
  content: none !important;
}

body .product-detail__pricerow {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 14px !important;
}

body .product-detail__price {
  color: #0e0e0e !important;
  -webkit-text-fill-color: #0e0e0e !important;
  font-size: 22px !important;
  font-weight: 800 !important;
}

body .product-detail__stock {
  color: #6b6b6b !important;
  -webkit-text-fill-color: #6b6b6b !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* Scoped as `.product-detail .product-detail__add` (0,0,2,1) so it beats the
   sitewide `body :is(.button-primary, …)` white-button rule. */
body .product-detail .product-detail__add {
  width: 100% !important;
  min-height: 54px !important;
  margin: 4px 0 10px !important;
  padding: 0 22px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #0e0e0e !important;
  background-image: none !important;
  transition: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  box-shadow: 0 10px 24px rgba(14, 14, 14, 0.18) !important;
}

body .product-detail .product-detail__add:hover:not(:disabled),
body .product-detail .product-detail__add:focus-visible:not(:disabled) {
  background: #26262a !important;
}

body .product-detail .product-detail__add:disabled {
  background: #e6e6e6 !important;
  background-image: none !important;
  color: #666666 !important;
  -webkit-text-fill-color: #666666 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}

body .product-detail__calculator {
  width: 100% !important;
  min-height: 46px !important;
  border: 1px solid #0e0e0e !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #0e0e0e !important;
  -webkit-text-fill-color: #0e0e0e !important;
  text-transform: none !important;
  box-shadow: none !important;
}

body .product-detail__info {
  max-width: 1080px !important;
  margin: 34px auto 0 !important;
}

/* Floating contact widget: only the pills should show — kill the white box
   the sitewide `body * { background:#fff }` paints behind the aside. */
body .tracking-widget {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Ambient animated gradient. The public pages are forced flat white
   (`html,body{background:#fff!important}` + `body *{background-image:none!important}`),
   so a layer *behind* the content is never seen. Instead this is a fixed
   full-viewport overlay that sits ON TOP of everything with
   `mix-blend-mode: multiply`: over white surfaces it leaves a soft drifting
   tint, while black text/keylines stay black (x*white = x). pointer-events
   are off so it never intercepts clicks. */
body .bg-flow {
  position: fixed !important;
  inset: -28vmax !important;
  z-index: 2147483000 !important;
  pointer-events: none !important;
  mix-blend-mode: multiply;
  background-color: transparent !important;
  background-image:
    radial-gradient(38vmax 30vmax at 22% 26%, rgba(47, 109, 100, 0.20), transparent 60%),
    radial-gradient(34vmax 32vmax at 82% 16%, rgba(181, 138, 84, 0.17), transparent 60%),
    radial-gradient(42vmax 36vmax at 70% 84%, rgba(92, 165, 154, 0.20), transparent 62%),
    radial-gradient(32vmax 34vmax at 26% 80%, rgba(120, 150, 190, 0.14), transparent 60%) !important;
  filter: blur(64px) saturate(115%);
  opacity: 0.5;
  will-change: transform;
  animation: bg-flow-drift 46s ease-in-out infinite alternate;
}

@keyframes bg-flow-drift {
  0%   { transform: translate3d(-2%, -1.5%, 0) scale(1.05) rotate(0deg); }
  50%  { transform: translate3d(2.5%, 2%, 0)  scale(1.13) rotate(3deg); }
  100% { transform: translate3d(1.5%, -2.5%, 0) scale(1.08) rotate(-2.5deg); }
}

@media (prefers-reduced-motion: reduce) {
  body .bg-flow { animation: none !important; }
}

/* Let the ambient gradient flow through the delivery banner strip and its
   inner segments — the sitewide white pass fills them with #fff, which
   hides the drift. Keep the banner's 1px border; only the fills go. The
   `#fff` opt-in rule is `body :is(… .cart-preview .cart-item)`, whose
   two-class argument lifts the whole :is() to (0,2,1); `main.page
   .delivery-banner` (0,2,2) outranks it. */
main.page .delivery-banner,
body .page .delivery-banner,
main.page .delivery-banner__track,
main.page .delivery-banner__group,
main.page .delivery-banner__track span {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Same treatment for the LL-code field wrappers on checkout — drop the white
   fill, keep the outline (and the filled / focus-within border states). */
main.page .ll-preview,
main.page .ll-preview__group,
main.page .ll-preview__digits,
main.page .ll-preview__digits input {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Faint coloured glow behind product shots. The sitewide white pass
   (`body * { background-image: none !important }`) strips the card image
   backgrounds, leaving the vials floating on flat white; this puts a soft
   brand-teal radial back in, fading out well before the rounded corners so
   the frame stays clean. */
body .card .product-card-image,
body .accessory-card .product-card-image,
body .product-detail__image,
body .cart-item .cart-item__image {
  background-color: #ffffff !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-image:
    radial-gradient(46% 58% at 50% 57%,
      rgba(92, 165, 154, 0.26) 0%,
      rgba(92, 165, 154, 0.10) 42%,
      rgba(92, 165, 154, 0) 70%) !important;
}

/* Larger, sharper product thumbnail in the cart drawer (Handlekurv). The
   earlier override boxed it at 68px and used object-fit:cover, which crops
   the vial; this enlarges the box and shows the whole vial with a clean
   white backdrop. */
body #cart-preview .cartlite-item {
  grid-template-columns: 112px minmax(0, 1fr) auto !important;
}
body #cart-preview .cartlite-item__thumb {
  width: 112px !important;
  height: 112px !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  padding: 8px !important;
  box-sizing: border-box !important;
}

/* The checkout list needs a little more breathing room around each photo,
   not a larger vial inside the photo. Keep the inner image area at the old
   size with padding while enlarging only the outer frame. */
.checkout-page .cart-item {
  grid-template-columns: 76px minmax(0, 1fr) auto !important;
}

.checkout-page .cart-item__image {
  width: 76px !important;
  height: 76px !important;
  padding: 6px !important;
  box-sizing: border-box !important;
  border-radius: 10px !important;
}

.checkout-page .cart-item__image img {
  transform: none !important;
}

/* Region flags and language choice are separate controls: the former changes
   market routes/checkout rules, while the latter changes only interface copy. */
/* R asked explicitly for this control without its old wrapper-pill
   background/border (2026-09-20); a later "Balance desktop navigation
   spacing" commit on main re-added a similar wrapper for layout-balance
   reasons, but the fixed-width options below keep the row's width stable
   without it, so this keeps the no-wrapper look rather than reverting it. */
body .topbar .market-switcher {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

/* Specificity note: the plain ".topbar .market-switcher__option" chain used
   to lose border-radius/color to the general "clean nav links"
   reset (body .topbar .site-nav a { border-radius: 0 !important; ... }
   below) because that reset selector has more selector parts at the same
   class-count tier. Routing every rule through the ".market-switcher"
   ancestor class keeps these rules ahead of it. */
body .topbar .market-switcher .market-switcher__option {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 36px;
  min-width: 36px;
  height: 26px;
  min-height: 26px;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #12344a !important;
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1;
  opacity: 1;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

body .topbar .market-switcher .market-switcher__option:hover,
body .topbar .market-switcher .market-switcher__option:focus-visible {
  border-color: transparent !important;
  background: rgba(18, 52, 75, 0.08) !important;
}

body .topbar .market-switcher .market-switcher__option:focus-visible {
  outline: 2px solid #2f6d64;
  outline-offset: -2px;
}

body .topbar .market-switcher .market-switcher__option.is-current {
  border-color: transparent !important;
  background: #12344a !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* The sitewide monochrome pass force-colors every <span> independently of
   its parent's color (body :is(... span ...) { color: #000 !important }),
   so the market-switcher__code label needs its own explicit color here
   rather than relying on inheritance. */
body .topbar .market-switcher .market-switcher__option .market-switcher__code {
  color: #12344a !important;
  -webkit-text-fill-color: #12344a !important;
  font: inherit;
  line-height: 1;
}

body .topbar .market-switcher .market-switcher__option.is-current .market-switcher__code {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body .topbar .language-switcher {
  display: inline-flex;
  align-items: center;
  flex: none;
  position: relative;
  margin-left: 2px;
}

body .topbar .language-switcher__select {
  min-width: 0;
  min-height: 30px;
  padding: 0 18px 0 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  background: transparent;
  color: #111;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

body .topbar .language-switcher::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 3px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

body .topbar .language-switcher__select:focus-visible {
  outline: 2px solid #2f6d64;
  outline-offset: 2px;
}

@media (min-width: 1024px) {
  body:not([data-admin-page]) .topbar {
    /* The wordmark needs a stable visual column. Without it, the flex-end
       navigation leaves all spare width between the logo and its first link,
       which makes the left side feel much lighter than the controls at right. */
    grid-template-columns: clamp(150px, 14vw, 240px) minmax(0, 1fr);
    column-gap: clamp(20px, 2vw, 36px);
  }

  body:not([data-admin-page]) .topbar .site-nav {
    /* Keep the language control beside the market flags instead of wrapping
       it onto a second line after the cart, while sharing the remaining
       header width across the complete navigation row. */
    flex-wrap: nowrap;
    gap: 10px clamp(8px, 1vw, 18px);
    justify-content: space-between;
  }

  body:not([data-admin-page]) .topbar .site-nav > a:not(.cart-toggle) {
    font-size: 13px;
    letter-spacing: 0.055em;
  }

  body:not([data-admin-page]) .topbar .site-nav > .market-switcher,
  body:not([data-admin-page]) .topbar .site-nav > .language-switcher {
    flex-shrink: 0;
  }
}

/* Keep the basket icon and its item count on one baseline with the language
   controls instead of placing the count above the header row. */
@media (min-width: 1024px) {
  body:not([data-admin-page]) .topbar .cart-toggle {
    width: auto !important;
    min-width: 48px !important;
    height: 40px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px !important;
  }

  body:not([data-admin-page]) .topbar .cart-toggle strong {
    position: static !important;
    transform: none !important;
    min-width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 5px !important;
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
}

/* Cart count badge fill at every width. The sitewide `body *` pass makes
   backgrounds transparent, which left the count as a bare floating digit
   below the desktop breakpoint above. */
body:not([data-admin-page]) .cart-toggle strong {
  background: #111111 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

@media (min-width: 1101px) and (max-width: 1280px) {
  body:not([data-admin-page]) .topbar .site-nav > a {
    font-size: 12px;
    letter-spacing: 0.05em;
  }
}

@media (min-width: 1000px) and (max-width: 1100px) {
  body:not([data-admin-page]) .topbar .site-nav {
    flex-wrap: nowrap;
    column-gap: 8px;
  }

  body:not([data-admin-page]) .topbar .site-nav > a:not(.cart-toggle) {
    font-size: 11px;
    letter-spacing: 0.035em;
  }
}

@media (max-width: 1100px) and (min-width: 701px) {
  body:not([data-admin-page]) .topbar {
    padding-inline: 20px;
  }

  .site-nav {
    gap: 8px clamp(12px, 1.6vw, 18px);
  }

  .site-nav a {
    font-size: 12px;
    letter-spacing: 0.055em;
  }
}
body #cart-preview .cartlite-item__thumb img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  /* Portrait accessories and nasal sprays must stay fully inside the frame.
     A scale transform made caps/bases disappear even with object-fit:contain. */
  transform: none !important;
}

/* Keep the legacy/checkout cart image treatment uncropped as well. */
body #cart-preview .cart-item__image {
  padding: 8px !important;
  box-sizing: border-box !important;
}
body #cart-preview .cart-item__image img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

/* ------------------------------------------------------------------ *
 * Hero stats cell ("Fullførte forsendelser"): colour-coded points,   *
 * inspired by the Amino Club guarantee box (icon badge + colour       *
 * tint per row) but in Auralis Nordic's own teal/fjord-blue/copper    *
 * palette. Scoped with `body` and matched to the specificity of the   *
 * sitewide monochrome pass above so the colours actually render —     *
 * the same carve-out already used for the hero photos/offers cells    *
 * and the discount badge earlier in this file. */
body span.landing-hero__stats-label {
  color: #2f6d64 !important;
  -webkit-text-fill-color: #2f6d64 !important;
}

body span.landing-hero__stats-plus {
  /* Darker gold than the vial accents: >=4.5:1 on the hero's mint/white. */
  color: #7a5712 !important;
  -webkit-text-fill-color: #7a5712 !important;
}

body .landing-hero__flow-step--navy .landing-hero__flow-icon {
  background: rgba(18, 52, 74, 0.1) !important;
}

body .landing-hero__flow-step--teal .landing-hero__flow-icon {
  background: rgba(47, 109, 100, 0.1) !important;
}

body .landing-hero__flow-step--blue .landing-hero__flow-icon {
  background: rgba(59, 110, 165, 0.1) !important;
}

body .landing-hero__flow-step--copper .landing-hero__flow-icon {
  background: rgba(154, 111, 61, 0.12) !important;
}

body .landing-hero__flow-step--navy .landing-hero__flow-icon svg {
  stroke: #12344a !important;
}

body .landing-hero__flow-step--teal .landing-hero__flow-icon svg {
  stroke: #2f6d64 !important;
}

body .landing-hero__flow-step--blue .landing-hero__flow-icon svg {
  stroke: #3b6ea5 !important;
}

body .landing-hero__flow-step--copper .landing-hero__flow-icon svg {
  stroke: #9a6f3d !important;
}

body .landing-hero__flow-progress-seg:nth-child(1) > span { background: #12344a !important; }
body .landing-hero__flow-progress-seg:nth-child(2) > span { background: #2f6d64 !important; }
body .landing-hero__flow-progress-seg:nth-child(3) > span { background: #9a6f3d !important; }
body .landing-hero__flow-progress-seg:nth-child(4) > span { background: #2f6d64 !important; }
body .landing-hero__flow-progress-seg:nth-child(5) > span { background: #3b6ea5 !important; }

/* Step buttons: a 24px tap area around the thin 4px bar, and a visible track
   for steps not yet reached (the sitewide button/background passes painted
   the track white, so only the active and finished steps showed). */
body .landing-hero__flow-progress-seg {
  position: relative;
  height: 24px;
  overflow: visible;
  background: transparent !important;
}
body .landing-hero__flow-progress-seg::before,
body .landing-hero__flow-progress-seg > span {
  position: absolute;
  inset: 10px 0 auto;
  height: 4px;
  border-radius: 999px;
}
body .landing-hero__flow-progress-seg::before {
  content: "";
  background: rgba(14, 31, 28, 0.12);
}

body .landing-hero__flow-code {
  color: #12344a !important;
  -webkit-text-fill-color: #12344a !important;
}

body .landing-hero__flow-vial--a { background: #6fa287 !important; }
body .landing-hero__flow-vial--b { background: #b3852c !important; }
body .landing-hero__flow-vial--c { background: #4c7fa8 !important; }

body .landing-hero__flow-trunk { background: #2f6d64 !important; }
body .landing-hero__flow-package { background: #9a6f3d !important; }
body .landing-hero__flow-mailbox-flap { background: #3b6ea5 !important; }

body .landing-hero__offer-card {
  background: #ffffff !important;
}

body .landing-hero__offer-discount {
  background: #e0342c !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body .landing-hero__offer-vial::before {
  background: rgba(0, 0, 0, 0.35) !important;
}

body .landing-hero__offer-vial:nth-child(1) { background: #6fa287 !important; }
body .landing-hero__offer-vial:nth-child(2) { background: #4c7fa8 !important; }
body .landing-hero__offer-vial:nth-child(3) { background: #b3852c !important; }
body .landing-hero__offer-vial:nth-child(4) { background: #6fa287 !important; }
body .landing-hero__offer-vial:nth-child(5) { background: #4c7fa8 !important; }
body .landing-hero__offer-vial:nth-child(6) { background: #b3852c !important; }

body .landing-hero__offer-build-box {
  stroke: #9a6f3d !important;
}

body .landing-hero__offer-slot:nth-child(1) { background: #6fa287 !important; }
body .landing-hero__offer-slot:nth-child(2) { background: #4c7fa8 !important; }
body .landing-hero__offer-slot:nth-child(3) { background: #b3852c !important; }
body .landing-hero__offer-slot:nth-child(4) { background: #6fa287 !important; }

/* Full-page loader: shown by navigation.js until the page's above-the-fold
   photos (hero canvases, the main product image) are loaded, so visitors
   don't see broken/half-loaded images. Inline widgets like the cart drawer
   never call this — they fade their own images in instead (see
   .cart-item__image below). */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: #ffffff !important;
  transition: opacity 260ms ease;
}

#page-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.page-loader__spin {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid rgba(18, 52, 75, 0.14);
  border-top-color: #12344b;
  animation: page-loader-spin 0.7s linear infinite;
}

@keyframes page-loader-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .page-loader__spin { animation: none; }
}

/* Cart drawer thumbnails: fade in once loaded instead of a full loading
   screen — the drawer is a lightweight, already-open panel, not a page
   load. The placeholder star stays put underneath until the real photo
   (usually already cached from browsing) is ready. */
.cart-item__image img[data-cart-image],
.cartlite-item__thumb img[data-cart-image] {
  opacity: 0;
  transition: opacity 200ms ease;
}

.cart-item__image img[data-cart-image].is-loaded,
.cartlite-item__thumb img[data-cart-image].is-loaded {
  opacity: 1;
}

.cart-item__image:has(img[data-cart-image].is-loaded) .media-placeholder,
.cartlite-item__thumb:has(img[data-cart-image].is-loaded) .media-placeholder {
  display: none;
}

/* No photo: the same drawn vial as the product cards, scaled to the thumb. */
.cart-item__image .media-placeholder--vial,
.cartlite-item__thumb .media-placeholder--vial {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.cart-item__image .placeholder-vial,
.cartlite-item__thumb .placeholder-vial {
  width: 100px;
  zoom: 0.58;
  filter: drop-shadow(0 8px 10px rgba(11, 31, 46, 0.16));
}
/* Smaller thumbs (checkout, phone drawer) get a smaller vial. */
.cart-item__image,
.cartlite-item__thumb { container-type: size; }
.cart-item__image > .media-placeholder--vial,
.cartlite-item__thumb > .media-placeholder--vial { grid-area: 1 / 1; min-width: 0; }
/* A failed photo is hidden; checkout's img rules must not keep it in layout. */
.cart-item__image img[hidden],
.cartlite-item__thumb img[hidden] { display: none !important; }
/* Checkout's `.cart-item span` sizing would otherwise blow up the label text. */
.cart-item__image .placeholder-vial__brand { font-size: 5.5px; line-height: 1.15; }
.cart-item__image .placeholder-vial__name { font-size: 9px; line-height: 1.15; }
@container (max-height: 100px) {
  .cart-item__image .placeholder-vial,
  .cartlite-item__thumb .placeholder-vial { zoom: 0.42; }
}
body .landing-hero__offer-slot:nth-child(5) { background: #4c7fa8 !important; }

/* Calculator page: drop the outer card border and the "← Katalog" /
   "Doseringstabell" pill borders the sitewide monochrome pass adds back.
   Appended last so it wins the equal-specificity tie against the big
   `body :is(...)` monochrome rule (its list includes a two-class selector,
   ".cart-preview .cart-item", which pushes its effective specificity up to
   match a single class+class selector like this one — so source order,
   not just specificity, decides the winner here). */
body.calculator-page .panel {
  border-color: transparent !important;
}

body.calculator-page .hero-actions .button {
  border-color: transparent !important;
}

/* Cookie consent banner. Reuses .panel for the card look (background,
   border, shadow already handled by the sitewide monochrome pass) and only
   adds the fixed positioning here. */
#cookie-consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  max-width: 640px;
  margin: 0 auto;
  padding: 20px;
}

#cookie-consent p {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.6;
}

#cookie-consent .cookie-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#cookie-consent .button {
  min-height: 40px;
  padding: 0 16px;
  font-size: 13px;
  flex: 1 1 auto;
}

#cookie-consent .cookie-consent__short {
  display: none;
}

/* Phones: a compact one-line notice with the three buttons in one row, so it
   stays low and doesn't hide the price / add-to-cart on product pages. */
@media (max-width: 640px) {
  #cookie-consent {
    left: 8px;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    padding: 10px 12px;
  }

  #cookie-consent [data-consent-copy] {
    display: none;
  }

  #cookie-consent .cookie-consent__short {
    display: block;
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.35;
  }

  #cookie-consent .cookie-consent__actions {
    flex-wrap: nowrap;
    gap: 6px;
  }

  #cookie-consent .button {
    min-height: 40px;
    padding: 0 8px;
    font-size: 12px;
    line-height: 1.15;
    white-space: normal;
    flex: 1 1 0;
    min-width: 0;
  }
}

/* Product detail: small "COA" button to the left of "Legg til i handlekurv".
   Higher specificity than `body .product-detail .product-detail__add` (which
   forces width:100%) so the add button can flex instead of filling the row. */
.product-detail__actions {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin: 4px 0 10px;
}

body .product-detail .product-detail__actions .product-detail__add {
  width: auto !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
}

.product-detail__coa {
  flex: 0 0 auto;
  min-height: 54px;
  padding: 0 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.product-detail__coa[hidden] { display: none; }

/* COA preview: a small, fixed-size glance card — not a viewer. No zoom, no
   pan, no download affordance (no <a>/<img> to right-click-save; the image
   is a CSS background and the PDF's browser toolbar is suppressed). */
.coa-preview-open { overflow: hidden; }

.coa-preview-backdrop {
  position: fixed;
  z-index: 90;
  inset: 0;
  border: 0;
  /* !important: the sitewide `body * { background-color: transparent
     !important }` monochrome pass otherwise wins and the backdrop never
     paints, letting the page behind bleed straight through. */
  /* Keep the page clearly behind the dialog without tinting its white and
     green surfaces blue-green. This still wins over the global monochrome
     override that previously made the backdrop fully transparent. */
  background: rgba(0, 0, 0, 0.28) !important;
  background-image: none !important;
}
.coa-preview-backdrop[hidden] { display: none; }

.coa-preview {
  position: fixed;
  z-index: 91;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  height: 560px;
  display: flex;
  flex-direction: column;
  /* Keep the certificate frame as white as the document and close control.
     The explicit value still wins over the global monochrome override. */
  background: #ffffff !important;
  background-image: none !important;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(13, 25, 23, 0.35);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  /* The counter-scale (applyZoomLock in shared/coa-preview.js) updates
     `transform` on every zoom change — animate it instead of snapping, so
     the card visibly resists the zoom (dolly-zoom feel) rather than jumping. */
  transition: transform 220ms ease-out;
}
.coa-preview[hidden] { display: none; }

.coa-preview__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.coa-preview__close {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .coa-preview,
  .coa-preview__body,
  .coa-preview__close {
    transition: none !important;
  }
}

/* AA contrast floor for small supporting copy and product metadata. */
body :is(.card-subtitle, .product-detail dt, .product-detail__meta dt) {
  color: #5d6362 !important;
  -webkit-text-fill-color: #5d6362 !important;
}

body s {
  color: #5d6362 !important;
  -webkit-text-fill-color: #5d6362 !important;
}

.coa-preview__body {
  flex: 1 1 auto;
  background: #ffffff !important;
  background-image: none !important;
}

.coa-preview__image {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  /* Fixed size, no zoom: the certificate is scaled to fit and stays that way. */
  background-size: contain;
  user-select: none;
}

.coa-preview__body iframe {
  width: 100%;
  height: 100%;
  border: 0;
  /* The PDF is only for a glance — block interaction so it can't be
     scrolled/zoomed via the embedded viewer's own controls. */
  pointer-events: none;
}

/* Give checkout thumbnails a little more presence without squeezing the
   product details and actions on narrow phones. */
@media (max-width: 520px) {
  .checkout-page .cart-item {
    grid-template-columns: 68px minmax(0, 1fr) auto !important;
  }

  .checkout-page .cart-item__image {
    width: 68px !important;
    height: 68px !important;
  }
}

/* Reviews: a calm editorial layout keeps the trust signal visible without
   turning the section into a moving wall of cards. */
body #reviews.section .review-section-head {
  align-items: end;
  gap: 24px;
}

body #reviews.section .review-section-head__copy {
  display: grid;
  gap: 6px;
}

body #reviews.section .review-section-head__copy > .eyebrow {
  align-self: start;
  width: max-content;
  gap: 0;
  padding: 7px 11px;
  border-radius: 10px;
}

body #reviews.section .review-section-head__copy > .eyebrow::before {
  display: none;
}

body #reviews.section .review-section-head__copy p {
  margin: 0;
  max-width: 520px;
  color: var(--muted) !important;
  font-size: 14px;
}

body #reviews.section .review-section-head__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

body #reviews.section #review-submit-toggle {
  flex: 0 0 196px;
  width: 196px;
  justify-content: center;
  text-align: center;
}

body #reviews.section :is(#review-submit-toggle, .review-submit-form button[type="submit"]) {
  border-radius: 14px !important;
}

body #reviews.section .review-submit-identity__row {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

body #reviews.section .review-submit-identity__row > input {
  flex: 1 1 auto;
  min-width: 0;
}

body #reviews.section .review-submit-anonymous {
  flex: 0 0 auto;
  min-height: 50px;
  padding-inline: 16px;
  border-radius: 14px !important;
  white-space: nowrap;
}

body #reviews.section .review-count {
  color: var(--muted) !important;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

body #reviews.section .review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  overflow: visible;
  padding: 2px;
  margin: 0;
  -webkit-mask-image: none;
  mask-image: none;
}

body #reviews.section .review-card {
  display: grid;
  align-content: start;
  gap: 16px;
  min-height: 174px;
  padding: 18px;
  border: 1px solid var(--global-border) !important;
  border-radius: 18px;
  background: var(--global-surface-strong) !important;
  box-shadow: none !important;
}

body #reviews.section .review-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body #reviews.section .review-card__identity {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

body #reviews.section .review-card__avatar {
  display: inline-grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--global-active) !important;
  color: var(--ink) !important;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

body #reviews.section .review-card__author {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body #reviews.section .review-card__author-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

body #reviews.section .review-card__author strong {
  overflow: hidden;
  color: var(--ink) !important;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body #reviews.section .review-card__verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border: 1px solid rgba(47, 133, 111, 0.28);
  border-radius: 999px;
  background: rgba(47, 133, 111, 0.1);
  color: #276f5e !important;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

body #reviews.section .review-card__verified::before {
  content: "✓";
  font-size: 10px;
  font-weight: 900;
}

body #reviews.section .review-card__source {
  flex: 0 0 auto;
  color: var(--muted) !important;
  font-size: 11px;
}

body #reviews.section .review-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

body #reviews.section .review-card__rating {
  color: #b97900 !important;
  font-size: 14px;
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
}

body #reviews.section .review-card__rating .is-empty {
  color: var(--global-border) !important;
}

body #reviews.section .review-card__body {
  margin: 0;
  color: var(--ink) !important;
  font-size: 14px;
  line-height: 1.6;
}

body #reviews.section .review-submit-form :is(input, textarea)::placeholder {
  color: #595959 !important;
  opacity: 1;
}

body.review-modal-open {
  overflow: hidden;
}

body #reviews.section .review-modal[hidden] {
  display: none;
}

body #reviews.section .review-modal {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(10, 17, 24, 0.72) !important;
  backdrop-filter: blur(9px);
}

body #reviews.section .review-modal__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: default;
}

body #reviews.section .review-modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 540px);
  max-height: min(720px, calc(100dvh - 40px));
  overflow: auto;
  padding: 26px;
  border: 1px solid #cbd5dc !important;
  border-radius: 22px;
  background: var(--global-surface) !important;
  box-shadow: 0 24px 70px rgba(9, 20, 30, 0.28) !important;
  outline: none;
}

body #reviews.section .review-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

body #reviews.section .review-modal__eyebrow {
  margin: 0 0 5px;
  color: var(--muted) !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body #reviews.section .review-modal__panel h3 {
  margin: 0;
  color: var(--ink) !important;
  font-size: clamp(22px, 4vw, 30px);
}

body #reviews.section .review-modal__close {
  display: inline-grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--global-border);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 25px;
  line-height: 1;
}

body #reviews.section .review-modal .review-submit-form {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

body #reviews.section .review-rating-field {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}

body #reviews.section .review-rating-field legend {
  margin-bottom: 11px;
  color: var(--ink) !important;
  font-size: 16px;
  font-weight: 800;
}

body #reviews.section .review-rating {
  display: flex;
  gap: 8px;
}

body #reviews.section .review-rating__option {
  position: relative;
  display: inline-grid;
  width: 45px;
  height: 45px;
  place-items: center;
  cursor: pointer;
}

body #reviews.section .review-rating__option:nth-child(1) { --star-index: 0; }
body #reviews.section .review-rating__option:nth-child(2) { --star-index: 1; }
body #reviews.section .review-rating__option:nth-child(3) { --star-index: 2; }
body #reviews.section .review-rating__option:nth-child(4) { --star-index: 3; }
body #reviews.section .review-rating__option:nth-child(5) { --star-index: 4; }

body #reviews.section .review-rating__option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

body #reviews.section .review-rating__option span[aria-hidden="true"] {
  color: #b3bec7 !important;
  font-size: 34px;
  line-height: 1;
  text-shadow: 0 0 0 rgba(47, 133, 111, 0);
  animation: review-star-shine 2.8s ease-in-out infinite;
  animation-delay: calc(var(--star-index) * 140ms);
  transition: color 160ms ease, transform 160ms ease, text-shadow 160ms ease;
}

body #reviews.section .review-rating__option:hover span[aria-hidden="true"],
body #reviews.section .review-rating__option.is-selected span[aria-hidden="true"] {
  color: #2f856f !important;
  text-shadow: 0 0 9px rgba(47, 133, 111, 0.48), 0 0 2px rgba(47, 133, 111, 0.65);
  transform: translateY(-1px);
}

@keyframes review-star-shine {
  0%, 100% {
    filter: brightness(0.96);
    transform: scale(1);
  }
  45% {
    filter: brightness(1.22);
    transform: scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  body #reviews.section .review-rating__option span[aria-hidden="true"] {
    animation: none;
  }
}

body #reviews.section .review-rating__option input:focus-visible + span[aria-hidden="true"] {
  outline: 3px solid var(--color-focus-outline);
  outline-offset: 4px;
  border-radius: 4px;
}

@media (max-width: 900px) {
  body #reviews.section .review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  body #reviews.section .review-section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  body #reviews.section .review-section-head__actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  body #reviews.section .review-section-head {
    align-items: start;
  }

  body #reviews.section .review-section-head__actions {
    justify-content: flex-start;
  }

  body #reviews.section #review-submit-toggle {
    flex-basis: min(196px, 100%);
    width: min(196px, 100%);
  }

  body #reviews.section .review-grid {
    grid-template-columns: 1fr;
  }

  body #reviews.section .review-modal {
    align-items: end;
    padding: 12px;
  }

  body #reviews.section .review-modal__panel {
    max-height: calc(100dvh - 24px);
    padding: 22px 18px;
    border-radius: 20px;
  }

  body #reviews.section .review-rating {
    justify-content: space-between;
  }
}
/* Legal information uses a calm reading column instead of nested cards.  Keep
   the sections separated by rules so the long-form copy stays scannable
   without the boxed treatment used by interactive panels. */
body.legal-page .panel {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.legal-page .terms > section {
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.legal-page .contact-note {
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ==========================================================================
   Motion refresh: signature gradient + scroll-driven motion.
   Every effect here is CSS-only and progressive. Without scroll-timeline
   support (or with reduced motion) content renders in its normal resting
   state, so nothing ever waits on JavaScript or an observer to be visible.
   ========================================================================== */

:root {
  /* The brand ramp: white on the left, deep marine on the right. Reserved for
     the header line, primary buttons, offer tags, and the page-end footer. */
  --signature: linear-gradient(90deg, #ffffff 0%, #e4f0ec 22%, #9cc1ba 48%, #2f6d64 70%, #17404c 86%, #0b1f2e 100%);
  --signature-dark: linear-gradient(100deg, #2f6d64 0%, #17404c 55%, #0b1f2e 100%);
  --marine: #0b1f2e;
  --color-button-primary-background: var(--signature-dark);
}

/* Brand-coloured actions (hero CTA, active category tabs/chips): the dark
   half of the ramp, sliding toward marine on hover. "Legg til" and other
   primary buttons keep the sitewide monochrome treatment. */
body .landing-hero__cell--brand a.button-primary,
body .catalog-filter button.catalog-tab.is-active,
body .catalog-tools .catalog-tabs:not(.catalog-filter) button.catalog-tab.is-active {
  background: var(--signature-dark) !important;
  background-size: 170% 100% !important;
  background-position: 0 0 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 12px 26px -12px rgba(11, 31, 46, 0.55) !important;
  transition: background-position 0.5s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
body .landing-hero__cell--brand a.button-primary:hover,
body .landing-hero__cell--brand a.button-primary:focus-visible {
  background-position: 100% 0 !important;
}

/* Hero backdrops: the opaque brand ramp instead of a translucent marine
   wash over white (which read as muddy grey). The photo cell runs white to
   deep marine with a soft light behind the vials; the offers cell echoes the
   same marine-to-white ramp but anchored at the opposite (bottom-left)
   corner, turning white well before the far corner so the white cards stay
   the focus. */
body .landing-hero__cell--offers {
  background: linear-gradient(45deg, #0b1f2e 0%, #2f6d64 30%, #d6e8e2 65%, #ffffff 88%) !important;
}

/* The offers cell sits under the (flat white) brand cell and beside the
   (flat white) stats cell, so — like the photo cell's own ::before above —
   fade its top and right edges to white too. Without this, its gradient
   meets those flat-white neighbours head-on and reads as a hard seam
   instead of one continuous field. (Its bottom edge is handled separately
   for the stacked mobile layout below, where it also borders stats — kept
   out of this base rule so the bottom-left corner colour isn't washed out
   on desktop, where that edge is just the hero's own outer boundary.) */
html body .landing-hero__cell--offers::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.7) 10%, rgba(255, 255, 255, 0.3) 22%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(270deg, #ffffff 0%, rgba(255, 255, 255, 0.7) 10%, rgba(255, 255, 255, 0.3) 22%, rgba(255, 255, 255, 0) 38%) !important;
}
/* Offer tags are good news, not errors: brand gradient instead of red. */
/* `span.` matches the specificity of the sitewide `body :is(…, span)` black
   text rule so the white label wins. */
body span.landing-hero__offer-discount {
  background: var(--signature-dark) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 4px 12px -4px rgba(11, 31, 46, 0.45) !important;
}

/* Shipping-flow steps: fade the outgoing step out before the incoming step
   fades in, so two steps never overlap mid-switch. */
.landing-hero__flow-step {
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.landing-hero__flow-step.is-active {
  transition: opacity 0.38s ease 0.24s, transform 0.38s ease 0.24s;
}

/* Header line: a faint full ramp at rest, filled left-to-right as reading
   progress. The floating pill behind the menu appears once scrolling starts. */
/* The bar itself is transparent; its white surface lives on ::before so it
   can animate into the pill (animations can't override !important rules). */
body:not([data-admin-page]) .topbar {
  background: transparent !important;
  background-image: none !important;
}
body:not([data-admin-page]) .topbar::after {
  left: 0;
  right: 0;
  width: auto;
  transform: none;
  /* Starts at light green rather than white so progress shows on the pill. */
  background: linear-gradient(90deg, #cfe9d8 0%, #96caaa 30%, #2f6d64 62%, #17404c 82%, #0b1f2e 100%) !important;
}
body:not([data-admin-page]) .topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid transparent;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(217, 242, 223, 0.9) 0%, rgba(156, 193, 186, 0.55) 48%, rgba(18, 52, 75, 0.35) 100%) left bottom / 100% 4px no-repeat,
    #ffffff;
  pointer-events: none;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* Product cards without a photo: a CSS-drawn Auralis vial with the product
   name on its label, instead of a lone star. Backgrounds are !important to
   beat the sitewide `body *` background reset. */
.media-placeholder--vial {
  font-size: inherit;
  color: #0f1113;
}
.placeholder-vial {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: clamp(72px, 28%, 104px);
  filter: drop-shadow(0 14px 18px rgba(11, 31, 46, 0.2));
}
.placeholder-vial__cap {
  width: 78%;
  height: 14px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #2a2d31, #0f1113) !important;
}
.placeholder-vial__crimp {
  width: 74%;
  height: 20px;
  border-radius: 2px;
  background: linear-gradient(90deg, #8d9398, #eef1f3 35%, #b3b9be 60%, #e3e7ea 80%, #7f868c) !important;
}
.placeholder-vial__body {
  width: 100%;
  aspect-ratio: 5 / 6;
  padding: 16% 8% 0;
  border: 1px solid rgba(16, 32, 31, 0.14);
  border-radius: 8px 8px 12px 12px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.95) 30%, rgba(255, 255, 255, 0.7) 70%, rgba(220, 232, 229, 0.85)) !important;
}
.placeholder-vial__label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px 6px 0;
  border-radius: 2px;
  background: #ffffff !important;
  box-shadow: 0 0 0 1px rgba(16, 32, 31, 0.06);
  text-align: left;
  overflow: hidden;
}
.placeholder-vial__brand {
  font: 900 5.5px/1.15 var(--font-brand);
  letter-spacing: 0.14em;
}
.placeholder-vial__name {
  font: 600 9px/1.15 var(--font-brand);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.placeholder-vial__label::after {
  content: "";
  height: 5px;
  margin: 2px -6px 0;
  background: #0f1113 !important;
}

/* Mobile: category rows become single swipeable lines instead of wrapping
   into several rows, and small controls get a 44px touch target. */
@media (max-width: 767px) {
  body .catalog-tools .catalog-tabs,
  body .catalog-filter.catalog-tabs {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding: 4px 16px 6px 4px;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  body .catalog-tools .catalog-tabs::-webkit-scrollbar,
  body .catalog-filter.catalog-tabs::-webkit-scrollbar {
    display: none;
  }
  body .catalog-tabs .catalog-tab {
    flex: 0 0 auto !important;
    min-height: 44px;
    scroll-snap-align: start;
    white-space: nowrap;
  }
  .card-strength-coa {
    flex-basis: 44px !important;
    min-height: 44px;
    min-width: 44px;
  }
  .site-footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Page-to-page morph: product vials glide from the catalog into their
   product page (and back). Browsers without support navigate normally. */
@view-transition {
  navigation: auto;
}

/* Scroll-driven motion. */
@keyframes auralis-rise {
  from { opacity: 0.2; translate: 0 32px; }
}
@keyframes auralis-progress {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
/* Scrolled header: a floating island inset from the edges. Fully opaque
   white, so page text never shows through behind the labels. */
@keyframes auralis-pill {
  to {
    inset: 6px max(10px, calc((100vw - 1440px) / 2));
    border-color: rgba(16, 32, 31, 0.1);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 14px 34px -18px rgba(11, 31, 46, 0.4);
  }
}
@keyframes auralis-line-in {
  to {
    left: max(24px, calc((100vw - 1440px) / 2 + 18px));
    right: max(24px, calc((100vw - 1440px) / 2 + 18px));
    bottom: 6px;
    height: 3px;
    border-radius: 3px;
  }
}
@keyframes auralis-drift-up {
  to { translate: 0 -70px; }
}
@keyframes auralis-drift-down {
  to { translate: 0 36px; }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    body:not([data-admin-page]) .topbar::before {
      animation: auralis-pill linear both;
      animation-timeline: scroll(root);
      animation-range: 0 140px;
    }
    body:not([data-admin-page]) .topbar::after {
      animation: auralis-progress linear both, auralis-line-in linear both;
      animation-timeline: scroll(root), scroll(root);
      animation-range: normal, 0 140px;
    }

    .section-head,
    .landing-hero__offer,
    #catalog-grid > .card,
    .review-card {
      animation: auralis-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    @media (min-width: 1024px) {
      #catalog-grid > .card:nth-child(3n + 2) { animation-range: entry 6% entry 76%; }
      #catalog-grid > .card:nth-child(3n + 3) { animation-range: entry 12% entry 82%; }
    }

    /* Hero vials drift at different speeds as the hero scrolls away. */
    .landing-hero__photo--back {
      animation: auralis-drift-up linear both;
      animation-timeline: view();
      animation-range: exit-crossing;
    }
    .landing-hero__photo--bpc {
      animation: auralis-drift-down linear both;
      animation-timeline: view();
      animation-range: exit-crossing;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* ==========================================================================
   Subpage system: gives calculator, Kjøp frakt, Bulk, Bygg din boks,
   Kontakt, FAQ (and every other non-home page) the same brand language as
   the homepage: one title treatment, mint "frost" surfaces instead of grey,
   brand-ramp markers and highlights instead of black/red, and the same
   scroll-driven rise-in. Scoped to pages without the homepage hero.
   ========================================================================== */

:root {
  --frost-surface: #f3f8f6;
  --frost-border: rgba(47, 109, 100, 0.14);
  --frost-radius: 18px;
}

/* Soft brand wash behind the top of every subpage: mint from the left,
   a faint marine glow from the right, fading into white. */
body:not([data-admin-page]):not(:has(.landing-hero)) main.page {
  position: relative;
  isolation: isolate;
}
body:not([data-admin-page]):not(:has(.landing-hero)) main.page::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 560px;
  transform: translateX(-50%);
  background:
    radial-gradient(65% 95% at 0% 0%, rgba(156, 193, 186, 0.65) 0%, rgba(156, 193, 186, 0) 70%),
    radial-gradient(50% 85% at 100% 0%, rgba(23, 64, 76, 0.4) 0%, rgba(23, 64, 76, 0) 72%) !important;
  pointer-events: none;
}

/* One title treatment: same size everywhere, with the short brand bar that
   sits above the AURALIS wordmark on the homepage. */
body:not(:has(.landing-hero)) main.page > section > h1 {
  font-size: clamp(36px, 5.2vw, 64px) !important;
  line-height: 1 !important;
  letter-spacing: -0.035em !important;
  text-wrap: balance;
}
body:not(:has(.landing-hero)) main.page > section > h1::before {
  content: "";
  display: block;
  width: 64px;
  height: 5px;
  margin-bottom: 18px;
  border-radius: 3px;
  background: var(--signature-dark) !important;
}

/* Page title blocks are open, not boxed (FAQ and Kontakt used to box them). */
body main.page > section.hero:has(> h1) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-inline: 0 !important;
}

/* Grey info boxes become mint frost surfaces. Classes are doubled to
   outrank the pages' own inline rules (e.g. body.guide-page .guide-panel
   .guide-step), which load after this file. */
body main.page .guide-step.guide-step,
body main.page .bulk-pick.bulk-pick,
body main.page .calculator-result__item.calculator-result__item,
body main.page .syringe-visualizer.syringe-visualizer,
body main.page .faq-topic.faq-topic {
  background: var(--frost-surface) !important;
  border: 1px solid var(--frost-border) !important;
  border-radius: var(--frost-radius) !important;
  box-shadow: none !important;
}
body main.page .faq-topic[open] {
  background: #ffffff !important;
  box-shadow: 0 18px 40px -28px rgba(11, 31, 46, 0.35) !important;
}

/* Numbered steps and bullets: brand-ramp markers instead of plain black. */
body main.page span.guide-step__number {
  display: inline-grid !important;
  place-items: center;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: var(--signature-dark) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 800;
  box-shadow: 0 8px 18px -10px rgba(11, 31, 46, 0.6);
}
/* Progress fills: brand ramp instead of red. */
body main.page span.build-box__progress-fill {
  background: var(--signature-dark) !important;
}

/* Chips and toggles: selected state matches the homepage category tabs. */
body main.page button.calculator-chip,
body main.page .dose-unit-toggle button,
body main.page .bulk-filter__pills button {
  min-height: 40px;
  border: 1px solid var(--frost-border) !important;
  background: #ffffff !important;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
body main.page button.calculator-chip[aria-pressed="true"],
body main.page .dose-unit-toggle button[aria-pressed="true"],
body main.page .dose-unit-toggle button.is-active,
body main.page .bulk-filter__pills button[aria-pressed="true"],
body main.page .bulk-filter__pills button.is-active {
  border-color: transparent !important;
  background: var(--signature-dark) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Back links ("← Katalog") and secondary page actions share one outlined
   pill, like "Les anmeldelser" on the homepage. */
body main.page a.calculator-back,
body main.page a.faq-back,
body main.page a.bulk-back,
body main.page .hero-actions > a.button:not(.button-primary) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px !important;
  border: 1px solid rgba(16, 32, 31, 0.8) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

/* Kontakt: an open title block like the other pages, not a boxed card. */
body main.page section.contact-hero {
  padding-inline: 0 !important;
  padding-bottom: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}
body main.page section.contact-hero::after {
  content: none !important;
}

/* Subpage content rises in on scroll, same motion as the homepage. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    body main.page .guide-step,
    body main.page .offer-tile,
    body main.page .faq-topic,
    body main.page .calculator-result__item,
    body main.page .build-box__products > .card,
    body main.page #bulk-pick-list > .bulk-pick,
    body main.page .contact-quick__link {
      animation: auralis-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }
}

/* Calculator syringe: brand ramp for the drawn volume; the red overflow
   warning state is left untouched. */
body.calculator-page .syringe-visualizer:not([data-state="overflow"]) .syringe-visualizer__track-fill {
  background: var(--signature-dark) !important;
}
body.calculator-page .syringe-visualizer:not([data-state="overflow"]) .syringe-visualizer__track-marker {
  background: #0b1f2e !important;
}

/* Build-your-box prices: brand teal/mint for the discounted price instead of
   red. One level more specific than the page's own inline
   #catalog rules, which load after this file. */
body main.page #catalog .build-box__products .card-strength-option__price {
  color: #2f6d64 !important;
  -webkit-text-fill-color: #2f6d64 !important;
}
body main.page #catalog .build-box__products .card-strength-option.is-active .card-strength-option__price {
  color: #9cc1ba !important;
  -webkit-text-fill-color: #9cc1ba !important;
}

/* Kontakt channels: the site's white pill buttons, with a small dot in each
   service's colour instead of full green/blue fills. */
body main.page a.contact-channel.contact-channel--whatsapp,
body main.page a.contact-channel.contact-channel--telegram {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  border: 1px solid rgba(16, 32, 31, 0.8) !important;
  background: #ffffff !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}
body main.page a.contact-channel::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #25d366 !important;
}
body main.page a.contact-channel--telegram::before {
  background: #229ed9 !important;
}

/* ==========================================================================
   Checkout flow (Utsjekk -> Betaling -> Fullført): same brand language as
   the storefront. Presentation only; no checkout logic depends on it.
   Classes are doubled where the pages' own inline rules (which load after
   this file) would otherwise win.
   ========================================================================== */

body:is(.checkout-page, .checkout-payment, .checkout-complete) {
  background: #f7faf9 !important;
}

/* Header: the storefront's gradient line under the slim checkout bar. */
body:is(.checkout-page, .checkout-payment, .checkout-complete) .checkout-flow-header.checkout-flow-header {
  position: relative;
  border-bottom: 0 !important;
}
body:is(.checkout-page, .checkout-payment, .checkout-complete) .checkout-flow-header.checkout-flow-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #cfe9d8 0%, #96caaa 30%, #2f6d64 62%, #17404c 82%, #0b1f2e 100%) !important;
}
body:is(.checkout-page, .checkout-payment, .checkout-complete) span.checkout-flow-security {
  border: 1px solid var(--frost-border) !important;
  background: var(--frost-surface) !important;
}

/* Title: same size and brand bar as every other page. */
body:is(.checkout-page, .checkout-payment, .checkout-complete) .hero.hero > h1 {
  font-size: clamp(34px, 4.6vw, 56px) !important;
  line-height: 1 !important;
  letter-spacing: -0.035em !important;
  text-wrap: balance;
}
body:is(.checkout-page, .checkout-payment, .checkout-complete) .hero.hero > h1::before {
  content: "";
  display: block;
  width: 64px;
  height: 5px;
  margin-bottom: 16px;
  border-radius: 3px;
  background: var(--signature-dark) !important;
}

/* Cards: white on the frost ground, thin teal border, soft marine shadow. */
body:is(.checkout-page, .checkout-payment, .checkout-complete) :is(.mini-card.mini-card, .card.card) {
  border: 1px solid var(--frost-border) !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  box-shadow: 0 24px 50px -36px rgba(11, 31, 46, 0.45) !important;
}

/* Step indicators: the active step in the brand ramp. */
body.checkout-page span.checkout-step-indicator.checkout-step-indicator {
  border: 1px solid var(--frost-border) !important;
  background: var(--frost-surface) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}
body.checkout-page span.checkout-step-indicator.checkout-step-indicator.is-active {
  border-color: transparent !important;
  background: var(--signature-dark) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Delivery and LL-code block. The doubled #checkout-form id outranks the
   page's own `:is(#cart-summary, #checkout-form) *:not(...)` transparent
   background reset in checkout/index.html. */
body.checkout-page #checkout-form#checkout-form .delivery-card {
  padding: 20px !important;
  border: 1px solid var(--frost-border) !important;
  border-radius: 18px !important;
  background: var(--frost-surface) !important;
}
body.checkout-page span.ll-preview__badge.ll-preview__badge {
  border: 0 !important;
  background: var(--signature-dark) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
body:is(.checkout-page, .checkout-payment) main.page input:focus-visible {
  border-color: #2f6d64 !important;
  box-shadow: 0 0 0 3px rgba(47, 109, 100, 0.18) !important;
  outline: none;
}

/* Primary actions ("Gå videre til betaling", "Spor ordre", ...): the brand
   ramp when enabled; the disabled state keeps its muted grey. */
body:is(.checkout-page, .checkout-payment, .checkout-complete) main.page .button.button-primary:not(:disabled) {
  border-color: transparent !important;
  background: var(--signature-dark) !important;
  background-size: 170% 100% !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 14px 28px -16px rgba(11, 31, 46, 0.6) !important;
  transition: background-position 0.5s ease, transform 0.2s ease;
}
body:is(.checkout-page, .checkout-payment, .checkout-complete) main.page .button.button-primary:not(:disabled):hover {
  background-position: 100% 0 !important;
  transform: translateY(-1px);
}

/* Payment options: the chosen method gets a teal outline and frost fill. */
body.checkout-page label.payment-option.payment-option {
  border: 1px solid var(--frost-border) !important;
  border-radius: 16px !important;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
body.checkout-page #checkout-form#checkout-form label.payment-option:has(input:checked) {
  border-color: #2f6d64 !important;
  background: var(--frost-surface) !important;
  box-shadow: 0 0 0 1px #2f6d64, 0 14px 30px -22px rgba(11, 31, 46, 0.5) !important;
}

/* Totals and order rows. */
body.checkout-page .checkout-total-row.checkout-total-row strong {
  color: #0b1f2e !important;
  -webkit-text-fill-color: #0b1f2e !important;
}
body:is(.checkout-payment, .checkout-complete) :is(.order-number, .row, .tracking) {
  border-color: var(--frost-border) !important;
}
body.checkout-complete .tracking.tracking {
  border-radius: 16px !important;
  background: var(--frost-surface) !important;
}

/* Confirmation: a brand check that pops in beside the success message. */
body.checkout-complete p.success.success {
  display: flex;
  align-items: center;
  gap: 12px;
}
body.checkout-complete p.success.success::before {
  content: "";
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 18px no-repeat,
    var(--signature-dark) !important;
}

/* Motion: cards settle in on load, each checkout step slides in when shown,
   and the confirmation check pops. All off under reduced motion. */
@keyframes auralis-card-in {
  from { opacity: 0; translate: 0 18px; }
}
@keyframes auralis-step-in {
  from { opacity: 0; translate: 16px 0; }
}
@keyframes auralis-check-pop {
  0% { scale: 0.4; opacity: 0; }
  70% { scale: 1.12; opacity: 1; }
  100% { scale: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  body:is(.checkout-page, .checkout-payment, .checkout-complete) :is(.mini-card, .card) {
    animation: auralis-card-in 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  body.checkout-page .layout > :nth-child(2) {
    animation-delay: 0.08s;
  }
  body.checkout-page .checkout-step:not([hidden]) {
    animation: auralis-step-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  body.checkout-page label.payment-option:not([hidden]) {
    animation: auralis-card-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  body.checkout-page label.payment-option:nth-child(2) { animation-delay: 0.05s; }
  body.checkout-page label.payment-option:nth-child(3) { animation-delay: 0.1s; }
  body.checkout-page label.payment-option:nth-child(4) { animation-delay: 0.15s; }
  body.checkout-page label.payment-option:nth-child(5) { animation-delay: 0.2s; }
  body.checkout-complete p.success.success::before {
    animation: auralis-check-pop 0.5s 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
}

/* Studio backdrop behind product photos and drawn vials: one light grey
   photo backdrop with a reflective floor (assets/backdrop-mirror.webp, ~8 KB,
   cached by the CDN), anchored to the bottom so the floor sits under the
   product. */
html body .landing-hero__cell--photos,
html body .card .product-card-image,
html body .accessory-card .product-card-image,
html body .product-detail__image,
html body .bulk-pick div.bulk-pick__media {
  background-color: #d3d4d8 !important;
  background-image: url("assets/backdrop-mirror.webp") !important;
  background-attachment: scroll !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center bottom !important;
}

/* The hero photo cell sits between white cells (text to the left, stats
   below); fade its backdrop into white along those edges so it blends in. */
html body .landing-hero__cell--photos::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.82) 10%, rgba(255, 255, 255, 0.5) 24%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0.7) 10%, rgba(255, 255, 255, 0.25) 24%, rgba(255, 255, 255, 0) 38%) !important;
}

/* Min side: a person icon beside the cart at every width (it stays in the
   collapsed header row like the cart does); inside the opened mobile menu it
   becomes a normal labelled row. */
body .topbar .site-nav > a.account-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
}
.account-toggle svg { width: 21px; height: 21px; flex: none; }
@media (min-width: 1024px) {
  /* Market and language controls sit between the links and the cart; keep
     the account icon right beside the cart instead. */
  body .topbar .site-nav > a.account-toggle { order: 1; }
  body .topbar .site-nav > .cart-toggle { order: 2; }
}
.account-toggle__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (max-width: 1023px) {
  body .topbar .site-nav.is-open > a.account-toggle,
  body .topbar .site-nav.is-closing > a.account-toggle {
    display: flex;
    justify-content: flex-start;
    height: auto;
    min-height: 58px;
    padding: 0 2px;
  }
  .site-nav.is-open > a.account-toggle .account-toggle__label,
  .site-nav.is-closing > a.account-toggle .account-toggle__label {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
  }
}

/* Referral progress in the cart drawer (referred account holders only). */
body .cart-referral { display: grid; gap: 8px; padding: 12px 14px; margin: 0 0 12px; border-radius: 14px; font-size: 13px; font-weight: 600; }
body .cart-referral { background: #e8f3ef !important; }
body .cart-referral__bar { display: block; height: 6px; border-radius: 999px; overflow: hidden; background: #cfe0da !important; }
body .cart-referral__bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2f6d64, #0b1f2e) !important; transition: width 240ms ease; }

.checkout-credit-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.checkout-credit-toggle input { width: 18px; height: 18px; margin: 0; accent-color: #0b1f2e; color-scheme: light; }

/* Product page: favourite / restock (scripts/products/member.js) and reviews. */
.product-member { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
body .product-member__button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border: 1px solid rgba(0, 0, 0, 0.18) !important; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  background: #ffffff !important;
}
body .product-member__button[aria-pressed="true"] { border-color: #2f6d64 !important; background: #e8f3ef !important; }
.product-member__link { font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.product-member__status { font-size: 13px; }

/* Shop split: product list left, sticky "your box / your order" tray right.
   Shared by Bygg din boks and Bulk ordre so both pickers use one layout.
   Grid areas keep the tray on the right whatever its DOM position. Below
   1024px the tray falls back into normal flow; pages decide where. */
.shop-split { display: grid; gap: 24px; }
.shop-split__main { min-width: 0; }
body main.page .shop-split__tray {
  padding: 20px;
  border: 1px solid var(--frost-border) !important;
  border-radius: var(--frost-radius);
  background: #ffffff !important;
  box-shadow: 0 18px 40px -30px rgba(11, 31, 46, 0.45);
}
@media (min-width: 1024px) {
  .shop-split {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    grid-template-areas: "main tray";
    align-items: start;
    gap: 32px;
  }
  .shop-split__main { grid-area: main; }
  .shop-split__tray {
    grid-area: tray;
    position: sticky;
    top: calc(var(--auralis-topbar-height, 68px) + 16px);
    max-height: calc(100vh - var(--auralis-topbar-height, 68px) - 32px);
    overflow-y: auto;
  }
}

/* Offer page title: small label carrying the short brand bar, a headline
   and one lead paragraph (Bulk ordre, Bygg din boks). The label replaces the
   shared bar above the h1. */
body main.page .page-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-data);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
body main.page .page-kicker::before {
  content: "";
  width: 28px;
  height: 4px;
  border-radius: 2px;
  background: var(--signature-dark, #0b1f2e) !important;
}
body main.page > section:has(> .page-kicker) > h1::before { content: none; }
body main.page > section:has(> .page-kicker) > h1 { max-width: 22ch; }
body main.page .page-lead {
  max-width: 72ch;
  margin: 0;
  color: #4a4a4a !important;
  -webkit-text-fill-color: #4a4a4a !important;
  font-size: 16px;
  line-height: 1.65;
}

/* Offer tiles: a big figure, a short heading and one line of detail on a
   soft tint. Optional chips mark which tier a tile is. From 1024px every
   tile gets an equal column, however many there are. */
body main.page .offer-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 4px 0 0;
}
@media (min-width: 560px) {
  body main.page .offer-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  body main.page .offer-tiles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
body main.page .offer-tile {
  display: flex;
  flex-direction: column;
  min-height: 200px;
  padding: 18px 20px 20px;
  border-radius: 20px;
}
body main.page .offer-tile--rose { background: #fbe9e6 !important; }
body main.page .offer-tile--cream { background: #f5eee3 !important; }
body main.page .offer-tile--mint { background: #e2f2e8 !important; }
body main.page .offer-tile--cool { background: #e7edf5 !important; }
body main.page .offer-tile__steps { display: flex; gap: 6px; }
body main.page .offer-tile__steps i,
body main.page .offer-tile__tag {
  padding: 4px 10px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 999px;
  font-family: var(--font-data);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 600;
}
body main.page .offer-tile__steps i:not(.is-on) {
  color: #6a6a6a !important;
  -webkit-text-fill-color: #6a6a6a !important;
}
body main.page .offer-tile__steps i.is-on {
  border-color: #0e0e0e;
  background: #0e0e0e !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
body main.page .offer-tile__tag { align-self: flex-start; border: 0; border-radius: 6px; background: #ffffff !important; }
body main.page .offer-tile__big {
  margin-top: auto;
  padding-top: 22px;
  font-size: clamp(40px, 4.4vw, 54px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
body main.page .offer-tile__h { margin-top: 10px; font-size: 15px; }
body main.page .offer-tile__s {
  margin-top: 4px;
  color: #5a5a5a !important;
  -webkit-text-fill-color: #5a5a5a !important;
  font-size: 13.5px;
  line-height: 1.45;
}

/* Compact catalog card: name, the strengths as one monospace line, a
   "from" price and two equal buttons (Detaljer / + Legg til). */
body .card.card--compact .card-body { display: grid; gap: 4px; padding-top: 14px; }
body .card--compact .card-name { margin: 0; font-size: 17px; line-height: 1.25; }
body .card--compact .card-strengths {
  margin: 0;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: #6a6a6a !important;
  -webkit-text-fill-color: #6a6a6a !important;
}
body .card--compact .card-price { margin: 6px 0 0; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
body .card--compact .card-price s {
  font-size: 13px;
  font-weight: 500;
  color: #6a6a6a !important;
  -webkit-text-fill-color: #6a6a6a !important;
}
body .card--compact .card-actions { display: grid; grid-template-columns: 1fr 1fr; margin-top: auto; }
body .card--compact .card-actions .button { width: 100%; min-width: 0; padding-inline: 10px; }
body .card--compact .card-coa-badge {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 2;
  min-height: 30px;
  padding: 0 12px;
  border: 0 !important;
  border-radius: 999px;
  background: #ffffff !important;
  box-shadow: 0 6px 16px -8px rgba(11, 31, 46, 0.5);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* Product hub filters, kept quiet: product types as underline tabs with the
   search on the same line, and the categories as light chips below. */
body main.page .product-hub .catalog-tools {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 24px;
  margin: 8px 0 0;
  padding: 0;
  border-bottom: 1px solid rgba(16, 32, 31, 0.12);
}
body main.page .product-hub .catalog-tools .catalog-tabs:not(.catalog-filter) {
  order: -1;
  flex: 0 0 auto;
  gap: 28px;
  margin: 0;
  padding: 0;
  justify-content: flex-start;
  -webkit-mask-image: none;
  mask-image: none;
}
body main.page .product-hub .catalog-tools .catalog-tabs:not(.catalog-filter) button.catalog-tab {
  min-height: 46px;
  margin-bottom: -1px;
  padding: 0 2px;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  animation: none;
  color: #6a6a6a !important;
  -webkit-text-fill-color: #6a6a6a !important;
  font-size: 15px;
  font-weight: 700;
  transition: color 160ms ease, border-color 160ms ease;
}
body main.page .product-hub .catalog-tools .catalog-tabs:not(.catalog-filter) button.catalog-tab:hover,
body main.page .product-hub .catalog-tools .catalog-tabs:not(.catalog-filter) button.catalog-tab.is-active {
  color: #0b1f2e !important;
  -webkit-text-fill-color: #0b1f2e !important;
}
body main.page .product-hub .catalog-tools .catalog-tabs:not(.catalog-filter) button.catalog-tab.is-active {
  border-bottom-color: #0b1f2e !important;
}
body main.page .product-hub .catalog-tools .catalog-search-control {
  flex: 0 1 300px;
  width: auto;
  max-width: 300px;
  min-width: 0;
  margin: 0 0 7px auto;
}
body main.page .product-hub .catalog-tools #catalog-search {
  min-height: 40px;
  padding: 0 16px 0 40px;
  border: 1px solid rgba(16, 32, 31, 0.16) !important;
  border-radius: 999px !important;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a6a6a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 15px center / 16px no-repeat !important;
  box-shadow: none !important;
  font-size: 14px;
}
body main.page .product-hub .catalog-tools #catalog-search:focus-visible {
  border-color: #0b1f2e !important;
  outline: 2px solid #2f6d64;
  outline-offset: 1px;
}
body main.page .product-hub #catalog-search::placeholder {
  color: #6b6b6b !important;
  -webkit-text-fill-color: #6b6b6b !important;
}
body main.page .product-hub .catalog-filter {
  gap: 8px;
  margin: 16px 0 28px;
  padding: 0;
  -webkit-mask-image: none;
  mask-image: none;
}
body main.page .product-hub .catalog-filter button.catalog-tab {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(16, 32, 31, 0.14) !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
  animation: none;
  color: #3a3a3a !important;
  -webkit-text-fill-color: #3a3a3a !important;
  font-size: 13px;
  font-weight: 600;
}
body main.page .product-hub .catalog-filter button.catalog-tab:hover { border-color: rgba(16, 32, 31, 0.4) !important; }
body main.page .product-hub .catalog-filter button.catalog-tab.is-active {
  border-color: #0b1f2e !important;
  background: #0b1f2e !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
/* Narrow screens: the tabs scroll sideways on their own line and the search
   takes the full width below them. */
@media (max-width: 767px) {
  body main.page .product-hub .catalog-tools { flex-wrap: wrap; gap: 12px; border-bottom: 0; }
  body main.page .product-hub .catalog-tools .catalog-tabs:not(.catalog-filter) {
    flex: 1 1 100%;
    gap: 22px;
    overflow-x: auto;
    border-bottom: 1px solid rgba(16, 32, 31, 0.12);
  }
  body main.page .product-hub .catalog-tools .catalog-search-control { flex: 1 1 100%; max-width: none; margin: 0; }
  body main.page .product-hub .catalog-filter { flex-wrap: nowrap; overflow-x: auto; margin-top: 12px; }
}

/* Homepage Bestselgere: link cards without buttons; the whole card opens
   the product, with a light body and a soft lift on hover. */
body .card.card--link {
  overflow: hidden;
  border: 1px solid rgba(16, 32, 31, 0.1) !important;
  border-radius: 14px !important;
  background: #fbfbfb !important;
  cursor: pointer;
  transition: box-shadow 200ms ease, transform 200ms ease;
}
body .card.card--link:hover { box-shadow: 0 14px 30px -18px rgba(11, 31, 46, 0.35) !important; transform: translateY(-2px); }
body .card.card--link .card-body { padding-bottom: 6px; }
body .card--link .card-name .product-card-link { color: inherit !important; text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
  body .card.card--link, body .card.card--link:hover { transform: none; transition: none; }
}
body .catalog-more { display: flex; justify-content: center; margin: 32px 0 8px; }
body .catalog-more .button { min-width: 220px; }

/* Catalog cards: a thin warm-grey frame, and the price in a darker shade of
   the same grey so the two read as one colour. */
body {
  --card-frame: #d7d3d5;
  --card-price: #4f4a4c;
}
html body #catalog-grid .card.card--compact {
  overflow: hidden;
  border: 1px solid var(--card-frame) !important;
  border-radius: 16px !important;
  background: #fcfbfb !important;
  box-shadow: none;
}
body .card.card--compact .card-price {
  color: var(--card-price) !important;
  -webkit-text-fill-color: var(--card-price) !important;
}
html body #catalog-grid .card.card--link:hover { border-color: #bfb9bc !important; }

/* Product page buy area: big price, a purity trust row, strength chips,
   a quantity stepper, one add button with the running total, then the
   «Spar mer» shortcuts to Bygg din boks and Bulk. */
body .product-detail .product-detail__pricerow {
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 4px 0 12px !important;
}
body .product-detail .product-detail__price { font-size: clamp(26px, 3vw, 32px) !important; letter-spacing: -0.02em !important; }
body .product-detail__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body .product-detail__trust li {
  padding: 5px 12px;
  border: 1px solid var(--card-frame);
  border-radius: 999px;
  background: #fcfbfb !important;
  color: var(--card-price) !important;
  -webkit-text-fill-color: var(--card-price) !important;
  font-family: var(--font-data);
  font-size: 12px;
  font-weight: 600;
}
body .product-detail__qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid #d8d8d8;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff !important;
}
body .product-detail__qty button {
  width: 44px;
  min-height: 42px;
  border: 0;
  background: transparent !important;
  font-size: 18px;
  cursor: pointer;
}
body .product-detail__qty button:hover { background: #f3f1f2 !important; }
body .product-detail__qty input {
  width: 48px;
  border: 0;
  border-inline: 1px solid #ececec;
  background: transparent !important;
  font: 600 15px/1 var(--font-data);
  text-align: center;
  -moz-appearance: textfield;
}
body .product-detail__qty input::-webkit-inner-spin-button,
body .product-detail__qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
body .product-detail__save { display: grid; gap: 10px; margin-top: 22px; }
body .product-detail__save-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body .product-detail__save-tile {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border-radius: 14px;
  text-decoration: none;
  transition: transform 180ms ease;
}
body .product-detail__save-tile:first-child { background: #fbe9e6 !important; }
body .product-detail__save-tile:last-child { background: #e2f2e8 !important; }
body .product-detail__save-tile:hover { transform: translateY(-2px); }
body .product-detail__save-tile b { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
body .product-detail__save-tile strong { font-size: 14px; }
body .product-detail__save-tile span { color: #5a5a5a !important; -webkit-text-fill-color: #5a5a5a !important; font-size: 12.5px; line-height: 1.4; }
@media (max-width: 380px) {
  body .product-detail__save-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  body .product-detail__save-tile, body .product-detail__save-tile:hover { transform: none; transition: none; }
}
html body .product-detail .product-detail__bestsellers {
  margin: 48px 0 0 !important;
  padding: 32px 0 0 !important;
  border-top: 1px solid #ececec !important;
}
body .product-detail__bestsellers h2 { margin: 0 0 18px; font-size: clamp(20px, 2.4vw, 26px); }
html body .product-detail__bestsellers #catalog-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
  gap: 16px !important;
}

/* Catalog card photo: square, like the product page image, so the vial
   has the same framing on the card and on its page. */
html body .card.card--compact .product-card-image { aspect-ratio: 1 / 1 !important; }

/* Product hub title block: "Katalog" kicker over "Produkter", with the
   same breathing room under the nav as Bygg din boks and Bulk. */
body .product-detail.product-hub.product-hub { margin-top: 0 !important; padding-top: clamp(24px, 5vh, 56px) !important; }
body .product-hub .page-kicker + #catalog-heading { margin-top: 14px !important; }

/* Catalog and product pages use the same 1200px content width as every
   other page (main.page), instead of their own narrower 1080px column. */
body .product-detail.product-detail,
body .product-detail .product-detail__info { max-width: none !important; }

/* Nav edges line up with the page content: the bar bleeds out by
   calc(50% - 50vw) and pads back in by the same amount, so the logo and
   the cart sit exactly above the content edges on both sides, whatever
   the scrollbar width. */
@media (min-width: 1024px) {
  body:not([data-admin-page]) .topbar { padding-inline: max(20px, calc(50vw - 50%)) !important; grid-template-columns: auto minmax(0, 1fr) !important; }
}

/* Page title block: every page puts its kicker the same distance under the
   nav, with the same gap to an equally sized heading, so moving between
   pages does not make the title jump. The stable scrollbar gutter keeps
   short pages (no scrollbar) from shifting sideways too. */
html { scrollbar-gutter: stable; }
html body main.page > section:has(> .page-kicker) { margin-top: 0 !important; padding-top: clamp(24px, 5vh, 56px) !important; }
html body main.page .page-kicker { display: flex !important; width: fit-content; margin: 0 !important; }
html body main.page .page-kicker + h1:not(#_) { margin: 14px 0 12px !important; font-size: clamp(38px, 5vw, 64px) !important; line-height: 1 !important; }
/* Bulk and Kjøp frakt lay their title block out as a grid; take the grid
   gap back so the kicker-to-heading gap matches the other pages. */
html body main.page > section.bulk-panel > .page-kicker { margin-bottom: -18px !important; }
html body main.page > section.guide-panel > .page-kicker { margin-bottom: -20px !important; }
/* Phone gutter: the same 12px on every page (most pages already set it
   inline; Bulk, Kjøp frakt and the catalog did not). */
@media (max-width: 700px) {
  body main.page { width: min(100% - 24px, 1100px); }
}

/* Homepage hero: one continuous CSS gradient behind all four cells, instead
   of each cell painting its own background and fading into its neighbours.
   Deep marine on the right fading to white towards the middle, plus a faint
   mint wash starting from the left edge. Pure CSS, so it stays sharp at any
   resolution. Stacked (narrow) layout runs top to bottom instead, dark
   behind the vials and white behind the text. */
html body .landing-hero:not(#_):not(#__) {
  background:
    radial-gradient(ellipse 16% 75% at 102% 50%, rgba(11, 31, 46, 0.35) 0%, rgba(11, 31, 46, 0) 75%),
    radial-gradient(ellipse 30% 60% at 0% 100%, rgba(150, 202, 170, 0.28) 0%, rgba(150, 202, 170, 0) 70%),
    linear-gradient(90deg,
      #e6f2eb 0%,
      #eef6f1 8%,
      #f4f9f6 18%,
      #f5faf7 50%,
      #f1f8f4 58%,
      #eaf4ee 66%,
      #e0efe6 74%,
      #cfe6d9 81%,
      #b3d7c3 87%,
      #86bba3 92%,
      #4f8f82 96%,
      #1f5560 100%) !important;
}
@media (max-width: 900px) {
  html body .landing-hero:not(#_):not(#__) {
    background:
      linear-gradient(180deg,
        #1f5560 0%,
        #4f8f82 7%,
        #86bba3 13%,
        #b3d7c3 19%,
        #d5eadd 26%,
        #e8f3ec 33%,
        #f5faf7 42%,
        #f5faf7 85%,
        #eaf4ee 100%) !important;
  }
}
html body .landing-hero > .landing-hero__cell {
  background: transparent !important;
  background-image: none !important;
}
html body .landing-hero > .landing-hero__cell::before { content: none !important; }

/* Page-to-page transition, the same on every page: the nav bar stays put
   (its own transition group, so it does not fade out and back in) while
   the page content cross-fades with a short upward settle. */
body:not([data-admin-page]) .topbar { view-transition-name: site-header; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: 220ms ease both auralis-page-out; }
  ::view-transition-new(root) { animation: 320ms cubic-bezier(0.2, 0.7, 0.2, 1) both auralis-page-in; }
}
@keyframes auralis-page-out { to { opacity: 0; } }
@keyframes auralis-page-in { from { opacity: 0; translate: 0 10px; } }

/* Product buy row: add button, then (sold out) "Varsle meg" with a bell and
   the favourite heart as a round icon button. A sold-out add button shrinks
   to its label so the notify button gets the room. */
body .product-detail .product-detail__actions { flex-wrap: nowrap; align-items: stretch; }
body .product-detail .product-detail__actions .product-detail__add:disabled {
  flex: 0 1 auto !important;
  min-width: 108px;
  padding-inline: 22px !important;
  box-shadow: none !important;
}
body .product-detail .product-member__button {
  justify-content: center;
  min-height: 54px;
  margin: 0;
  color: #0e0e0e !important;
  -webkit-text-fill-color: #0e0e0e !important;
  transition: border-color 160ms ease, background 160ms ease;
}
body .product-detail .product-member__button:hover:not(:disabled) { border-color: #0e0e0e !important; }
body .product-detail .product-member__button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}
body .product-detail .product-member__heart { flex: 0 0 54px; width: 54px; padding: 0; }
body .product-detail .product-member__heart[aria-pressed="true"] { border-color: #d6455d !important; background: #fdecef !important; }
body .product-detail .product-member__heart[aria-pressed="true"] svg { fill: #d6455d; stroke: #d6455d; }
body .product-detail .product-member__notify { flex: 1 1 auto; gap: 8px; padding: 0 18px; white-space: nowrap; }
/* The narrowest phones (under ~360px) cannot fit "Utsolgt", "Varsle meg"
   and the heart in one row: the add button takes its own row. */
@media (max-width: 359px) {
  body .product-detail .product-detail__actions { flex-wrap: wrap; }
  body .product-detail .product-detail__actions .product-detail__add:disabled { flex: 1 1 100% !important; }
}
body .product-detail .product-member__status { margin: 8px 0 0; font-size: 13px; }
body .product-detail .product-member__status:empty { display: none; }

/* ==========================================================================
   Footer: full-bleed deep marine, faded in from the page with a soft
   gradient (like the page-to-footer fade on Rebirth), light text on dark:
   brand + note, then Butikk / Informasjon / Kontakt columns, then the
   copyright row. Built by setupFooter in scripts/site/navigation-v37.js.
   ========================================================================== */
html body footer.footer.site-footer {
  display: block;
  margin: max(clamp(56px, 8vw, 104px), var(--footer-push, 0px)) calc(50% - 50vw) -56px;
  padding: 150px max(20px, calc(50vw - 50%)) 0 !important;
  border: 0 !important;
  background: linear-gradient(180deg,
    rgba(47, 109, 100, 0) 0,
    rgba(47, 109, 100, 0.45) 40px,
    #1f5560 110px,
    #0f252e 200px,
    #0b161c 100%) !important;
  color: #c9d6da !important;
}
html body footer.site-footer * {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}
html body footer.site-footer .site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
  gap: 40px 56px;
  padding-bottom: 48px;
}
html body footer.site-footer .site-footer__brand { max-width: 360px; }
html body footer.site-footer .site-footer__logo { color: #ffffff !important; font-size: 24px; text-decoration: none; }
html body footer.site-footer .site-footer__mark {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #cfe9d8 !important;
}
html body footer.site-footer .site-footer__brand p { margin: 16px 0 0; font-size: 14.5px; line-height: 1.6; color: #b9c9ce !important; }
html body footer.site-footer .site-footer__note { margin-top: 10px !important; font-size: 13px !important; color: #9fb3b9 !important; }
html body footer.site-footer .site-footer__links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: stretch;
  gap: 32px;
}
html body footer.site-footer .site-footer__col { display: grid; align-content: start; gap: 12px; }
html body footer.site-footer .site-footer__col h2 {
  margin: 0 0 6px;
  color: #ffffff !important;
  font-family: var(--font-data);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
html body footer.site-footer .site-footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  color: #c9d6da !important;
  font-family: inherit;
  font-size: 14.5px;
  letter-spacing: 0;
  text-decoration: none;
  transition: color 160ms ease;
}
html body footer.site-footer .site-footer__links a:hover,
html body footer.site-footer .site-footer__links a:focus-visible { color: #ffffff !important; text-decoration: underline; text-underline-offset: 4px; }
html body footer.site-footer .site-footer__app img { width: 18px; height: 18px; }
html body footer.site-footer .site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 18px 0 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #9fb3b9 !important;
  font-size: 13px;
}
@media (max-width: 860px) {
  html body footer.site-footer .site-footer__inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  html body footer.site-footer .site-footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  html body footer.site-footer .site-footer__col:last-child { grid-column: 1 / -1; }
}

/* Spor ordre (status/): same title block as the other pages, then one clean
   white card: e-mail and LL code side by side with the button, the LL code
   as the same small "LL" badge + three boxes the checkout uses. */
html body.status-page main.page > section.status-hero { padding-top: clamp(24px, 5vh, 56px); }
html body.status-page .status-hero .page-lead { max-width: 64ch; }
html body.status-page .content { margin-top: 32px; }
html body.status-page .panel {
  padding: 26px 28px !important;
  border: 1px solid var(--frost-border, rgba(47, 109, 100, 0.14)) !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}
html body.status-page .panel h2 { margin: 0; font-size: 18px; }
html body.status-page .form {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 14px;
  margin-top: 18px;
}
html body.status-page .tracking-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
html body.status-page .tracking-label { font-size: 13px; font-weight: 600; color: #4a4a4a !important; }
html body.status-page .tracking-email,
html body.status-page .auralis-code { display: grid; gap: 8px; }
html body.status-page .tracking-email input { min-height: 48px; border-radius: 12px; box-shadow: none; border-color: #d8d8d8 !important; background: #ffffff !important; }
html body.status-page .auralis-code__row { grid-template-columns: 48px 2fr 4fr 3fr; gap: 8px; }
html body.status-page .auralis-code__badge {
  min-height: 48px;
  padding: 0;
  border-radius: 12px;
  background: var(--signature-dark, #0b1f2e) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: none !important;
  font-size: 14px;
}
html body.status-page .auralis-code__group {
  min-height: 48px;
  border: 1px solid #d8d8d8 !important;
  border-radius: 12px;
  background: #ffffff !important;
  box-shadow: none !important;
}
html body.status-page .auralis-code__group:focus-within,
html body.status-page .tracking-email input:focus-visible {
  border-color: #0e0e0e !important;
  box-shadow: 0 0 0 3px rgba(47, 109, 100, 0.18) !important;
  outline: none;
}
html body.status-page .auralis-code__digits { color: #0e0e0e !important; font-size: 16px; }
html body.status-page .auralis-code__digits input::placeholder { color: #b5b5b5 !important; -webkit-text-fill-color: #b5b5b5 !important; }
html body.status-page #tracking-submit { min-height: 48px; padding: 0 26px; }
html body.status-page .hint { margin-top: 14px; font-size: 13.5px; }
html body.status-page .status-empty { display: none !important; }
@media (max-width: 900px) {
  html body.status-page .form,
  html body.status-page .tracking-fields { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  html body.status-page .auralis-code__row { grid-template-columns: 48px 2fr 4fr 3fr; }
  html body.status-page .auralis-code__badge,
  html body.status-page .auralis-code__group { width: auto; }
  html body.status-page .panel { padding: 20px !important; }
}

/* Offer tiles: every tile reserves two lines for its detail text, so the big
   figures and headings of tiles in one row sit on the same lines whether
   the detail wraps or not. */
body main.page .offer-tile__s { min-height: calc(2 * 1.45em); }

/* Footer with the "Handle nå" band: Auralis teal on top, darkening to the
   near-black footer (the Rebirth-style page-to-footer transition). */
html body footer.footer.site-footer.site-footer--cta {
  padding-top: 0 !important;
  background: linear-gradient(180deg,
    rgba(58, 122, 112, 0) 0,
    rgba(58, 122, 112, 0.35) 50px,
    #4a857b 120px,
    #3a7a70 190px,
    #2f6d64 260px,
    #1f5560 370px,
    #11303a 470px,
    #0b161c 570px,
    #0b161c 100%) !important;
}
html body footer.site-footer .site-footer__cta {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: clamp(130px, 13vw, 180px) 0 clamp(88px, 10vw, 128px);
  text-align: center;
}
html body footer.site-footer .site-footer__cta h2 {
  margin: 0;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
html body footer.site-footer .site-footer__cta p {
  max-width: 52ch;
  margin: 0;
  color: #e3efe9 !important;
  -webkit-text-fill-color: #e3efe9 !important;
  font-size: 15.5px;
  line-height: 1.55;
}
html body footer.site-footer .site-footer__cta-button {
  margin-top: 10px;
  padding: 13px 28px;
  border-radius: 999px;
  background: #ffffff !important;
  color: #0e0e0e !important;
  -webkit-text-fill-color: #0e0e0e !important;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.5);
  transition: transform 160ms ease;
}
html body footer.site-footer .site-footer__cta-button:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  html body footer.site-footer .site-footer__cta-button:hover { transform: none; }
}
/* Readable on the dark footer: the brand wordmark and column headings are
   otherwise caught by the sitewide black-text and text-gradient rules. */
html body footer.site-footer .site-footer__logo > span:last-child,
html body footer.site-footer .site-footer__col h2 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  animation: none !important;
}
html body footer.site-footer .site-footer__links a { color: #d7e2e5 !important; -webkit-text-fill-color: #d7e2e5 !important; }
html body footer.site-footer .site-footer__links a:hover,
html body footer.site-footer .site-footer__links a:focus-visible { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
html body footer.site-footer .site-footer__brand p:not(.site-footer__note) { color: #c3d2d6 !important; -webkit-text-fill-color: #c3d2d6 !important; }
html body footer.site-footer .site-footer__note,
html body footer.site-footer .site-footer__bottom,
html body footer.site-footer .site-footer__bottom * { color: #9fb3b9 !important; -webkit-text-fill-color: #9fb3b9 !important; }

/* ==========================================================================
   Motion system. One set of durations and one easing for page motion, so
   every page moves at the same pace (audit: Rebirth uses 160/320/560/900ms).
   Everything here is CSS-only and content-safe: without animation support,
   or with reduced motion, content is simply shown.
   ========================================================================== */
:root {
  --motion-fast: 160ms;
  --motion-base: 320ms;
  --motion-slow: 560ms;
  --motion-xslow: 900ms;
  --motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --motion-stagger: 70ms;
}

@keyframes auralis-line-reveal {
  from { opacity: 0; translate: 0 0.45em; clip-path: inset(0 0 100% 0); }
  to { opacity: 1; translate: 0 0; clip-path: inset(0 0 0 0); }
}
@keyframes auralis-fade-up {
  from { opacity: 0; translate: 0 18px; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Homepage hero, line by line: wordmark, sub-brand, text, buttons, then the
     offer cards and the shipping panel. Starts when the entry screen closes
     (html[data-entry] is removed), or at once when there is none. */
  html:not([data-entry="open"]) .landing-hero__logo-word,
  html:not([data-entry="open"]) .landing-hero__logo-sub,
  html:not([data-entry="open"]) .landing-hero__cell--brand > p,
  html:not([data-entry="open"]) .landing-hero__actions {
    animation: auralis-line-reveal var(--motion-xslow) var(--motion-ease) both;
  }
  html:not([data-entry="open"]) .landing-hero__logo-sub { animation-delay: calc(var(--motion-stagger) * 2); }
  html:not([data-entry="open"]) .landing-hero__cell--brand > p { animation-delay: calc(var(--motion-stagger) * 4); }
  html:not([data-entry="open"]) .landing-hero__actions { animation-delay: calc(var(--motion-stagger) * 6); }
  html:not([data-entry="open"]) .landing-hero__cell--offers,
  html:not([data-entry="open"]) .landing-hero__cell--stats {
    animation: auralis-fade-up var(--motion-slow) var(--motion-ease) both;
    animation-delay: calc(var(--motion-stagger) * 8);
  }
  html:not([data-entry="open"]) .landing-hero__cell--stats { animation-delay: calc(var(--motion-stagger) * 10); }

  /* Subpage title block: kicker, heading and lead settle in one after
     another on page load (the page-to-page cross-fade carries into it). */
  body main.page .page-kicker,
  body main.page .page-kicker ~ .page-lead {
    animation: auralis-line-reveal var(--motion-slow) var(--motion-ease) both;
  }
  /* :not(#_) and !important: headings are otherwise frozen by the sitewide
     black-text rule (animation: none !important). */
  html body main.page .page-kicker + h1:not(#_) {
    animation: auralis-line-reveal var(--motion-slow) var(--motion-ease) var(--motion-stagger) both !important;
  }
  body main.page .page-kicker ~ .page-lead { animation-delay: calc(var(--motion-stagger) * 2); }

  @supports (animation-timeline: view()) {
    /* Scroll fade-in, now on every card grid and section, not only the
       catalogue: each card rises as it enters the screen. */
    body main.page .contact-app,
    body main.page .product-detail__info,
    body main.page .product-detail__bestsellers > h2,
    body.status-page main.page .panel,
    body main.page #tracking-result,
    footer.site-footer .site-footer__cta > *,
    footer.site-footer .site-footer__col,
    footer.site-footer .site-footer__brand {
      animation: auralis-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    /* Stagger: in a row of cards, each next column starts a little later,
       so a row fans in left to right instead of popping in as one block. */
    @media (min-width: 1024px) {
      body main.page .contact-quick__grid > :nth-child(3n + 2),
      body main.page .offer-tiles > :nth-child(2),
      body main.page .contact-apps > :nth-child(2),
      body footer.site-footer .site-footer__links > :nth-child(2) { animation-range: entry 6% entry 76%; }
      body main.page .contact-quick__grid > :nth-child(3n + 3),
      body main.page .offer-tiles > :nth-child(3),
      body footer.site-footer .site-footer__links > :nth-child(3) { animation-range: entry 12% entry 82%; }
      body main.page .offer-tiles > :nth-child(4) { animation-range: entry 18% entry 88%; }
    }
  }
}

/* Full menu from 1024px (audit: laptops and small windows should not get the
   hamburger). Between 1024 and 1260px the row is compacted: slightly smaller
   labels, tighter gaps and no "NY" badges, so every locale fits on one line. */
.nav-new-badge { display: inline-block; }
@media (min-width: 1024px) and (max-width: 1260px) {
  body:not([data-admin-page]) .topbar .site-nav { column-gap: 10px !important; }
  body:not([data-admin-page]) .topbar .site-nav > a:not(.cart-toggle):not(.account-toggle) {
    font-size: 11.5px !important;
    letter-spacing: 0.04em !important;
  }
  body:not([data-admin-page]) .topbar .nav-new-badge { display: none !important; }
}

/* Product cards on the catalogue, Bygg din boks and Bulk arrive once as they
   scroll into view (scripts/site/reveal.js adds .reveal / .is-in): fade in
   and rise 10px over 560ms, like the Rebirth shop. The hover shadow/lift
   transitions are kept alongside. Scroll-linked animations are switched off
   for these cards so the two never fight. */
html body main.page .reveal {
  animation: none !important;
  transition:
    opacity 560ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
    translate 560ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
    box-shadow 200ms ease,
    transform 200ms ease,
    border-color 160ms ease;
}
html body main.page .reveal:not(.is-in) { opacity: 0; translate: 0 10px; }
html body main.page .reveal.is-instant { transition: box-shadow 200ms ease, transform 200ms ease, border-color 160ms ease; }
@media print { html body main.page .reveal { opacity: 1 !important; translate: none !important; } }

/* "Kommer snart" catalogue tab in orange (a deep amber, readable on white). */
body main.page .product-hub .catalog-tools .catalog-tabs:not(.catalog-filter) button.catalog-tab.catalog-tab--soon,
body main.page .product-hub .catalog-tools .catalog-tabs:not(.catalog-filter) button.catalog-tab.catalog-tab--soon:hover {
  color: #b45309 !important;
  -webkit-text-fill-color: #b45309 !important;
}
body main.page .product-hub .catalog-tools .catalog-tabs:not(.catalog-filter) button.catalog-tab.catalog-tab--soon.is-active {
  border-bottom-color: #d97706 !important;
}

/* Product card photos everywhere (catalog, homepage, pens, nasal sprays,
   "Kommer snart", accessories, Bygg din boks): a square frame with the whole
   product standing in it, never cropped. */
html body :is(#catalog, #catalog-panel-nasal, #catalog-panel-pens, #catalog-panel-soon, #catalog-panel-accessories) .product-card-image {
  aspect-ratio: 1 / 1 !important;
}
html body :is(#catalog, #catalog-panel-nasal, #catalog-panel-pens, #catalog-panel-soon, #catalog-panel-accessories) .product-card-image img {
  object-fit: contain !important;
  transform: none !important;
}

/* Phones: two product cards per row so the catalog reads as a shop grid
   instead of one tall card per screen. */
@media (max-width: 599px) {
  html body #catalog-grid,
  html body :is(#catalog-panel-nasal, #catalog-panel-pens, #catalog-panel-soon, #catalog-panel-accessories) .accessories-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  html body #catalog-grid .card.card--compact,
  html body :is(#catalog-panel-nasal, #catalog-panel-pens, #catalog-panel-soon, #catalog-panel-accessories) .accessory-card {
    padding: 10px !important;
    grid-column: auto !important;
  }
  html body #catalog-grid .card .product-card-image,
  html body :is(#catalog-panel-nasal, #catalog-panel-pens, #catalog-panel-soon, #catalog-panel-accessories) .product-card-image {
    margin: -10px -10px 10px !important;
  }
  html body #catalog-grid .card .product-card-image img { padding: 6px 10px !important; }
  html body #catalog-grid .card .card-title-row h3,
  html body :is(#catalog-panel-nasal, #catalog-panel-pens, #catalog-panel-soon, #catalog-panel-accessories) .accessory-card h3 { font-size: 15px !important; }
  html body #catalog-grid .card .card-actions,
  html body :is(#catalog-panel-nasal, #catalog-panel-pens, #catalog-panel-soon, #catalog-panel-accessories) .accessory-card .card-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }
  html body #catalog-grid .card .card-actions > *,
  html body :is(#catalog-panel-nasal, #catalog-panel-pens, #catalog-panel-soon, #catalog-panel-accessories) .accessory-card .card-actions > * {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Offer tiles (Bygg din boks, Bulk): compact two-up tiles on phones so the
   picker starts sooner. */
@media (max-width: 559px) {
  body main.page .offer-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body main.page .offer-tiles > .offer-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  body main.page .offer-tile { min-height: 0; padding: 14px 14px 16px; border-radius: 16px; }
  body main.page .offer-tile__steps { flex-wrap: wrap; gap: 4px; }
  body main.page .offer-tile__steps i, body main.page .offer-tile__tag { padding: 3px 8px; font-size: 10.5px; }
  body main.page .offer-tile__big { padding-top: 12px; font-size: 32px; }
  body main.page .offer-tile__h { margin-top: 6px; font-size: 14px; }
  body main.page .offer-tile__s { min-height: 0; font-size: 12.5px; }
}

/* Homepage hero: the intro line sits centred like the logo and buttons. */
@media (max-width: 767px) {
  html body .landing-hero__cell--brand > p { text-align: center; margin-inline: auto; }
}

/* Catalog tabs: every panel starts at the same height as Peptider, so
   switching tabs doesn't make the grid jump. The chip row keeps its space
   (invisible, like the search field) and the other panels get the same
   top spacing as #catalog. */
html body:not([data-catalog-view="vials"]) #catalog-filter:not([hidden]) {
  display: flex !important;
  visibility: hidden !important;
}
html body .product-hub > .section[data-catalog-panel]:not(#catalog) {
  margin-top: 26px !important;
  padding-top: 28px !important;
}

/* Card corners: one radius for every product card, and the card clips its
   photo, so the photo's corners always follow the card's edge exactly. */
html body :is(#catalog, #catalog-panel-nasal, #catalog-panel-pens, #catalog-panel-soon, #catalog-panel-accessories) :is(.card, .accessory-card) {
  border-radius: 16px !important;
  overflow: hidden !important;
}
html body :is(#catalog, #catalog-panel-nasal, #catalog-panel-pens, #catalog-panel-soon, #catalog-panel-accessories) :is(.card, .accessory-card) .product-card-image {
  border-radius: 0 !important;
}

/* Catalog tabs: keyboard focus shown as a tint and underline that fits the
   tab row, instead of a box around the label. */
html body .catalog-tabs .catalog-tab:focus-visible {
  outline: none !important;
  border-radius: 8px 8px 0 0;
  background: rgba(47, 109, 100, 0.1) !important;
  box-shadow: inset 0 -2px 0 #2f6d64 !important;
}

/* Cart drawer and checkout thumbnails: the same grey studio backdrop as the
   product cards, so the cut-out vials don't float on white. */
html body :is(#cart-preview .cartlite-item__thumb, .cart-item .cart-item__image) {
  background-color: #d3d4d8 !important;
  background-image: url("assets/backdrop-mirror.webp") !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center bottom !important;
}

/* Product guide (shared/product-guides.js): readable long-form copy under
   "Om forbindelsen", then questions and sources. */
body .product-guide .product-guide__body,
body .product-guide .product-guide__faq,
body .product-guide .product-guide__sources { max-width: 72ch; }
body .product-guide h3 { margin: 26px 0 8px !important; font-size: 17px !important; font-weight: 700 !important; }
body .product-guide p { margin: 0 0 12px !important; font-size: 15.5px; line-height: 1.7 !important; color: #333333 !important; -webkit-text-fill-color: #333333 !important; }
body .product-guide .product-guide__body > p:first-child { font-size: 16.5px; }
body .product-guide .product-guide__links { display: flex; flex-wrap: wrap; gap: 8px; }
body .product-guide .product-guide__links a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid #d9d9d9 !important; font-size: 14px; font-weight: 700; text-decoration: none;
}
body .product-guide .product-guide__links a:hover { border-color: #0e0e0e !important; }
body .product-guide .product-guide__question { border-top: 1px solid #ececec; }
body .product-guide .product-guide__question:last-child { border-bottom: 1px solid #ececec; }
body .product-guide .product-guide__question summary { padding: 14px 0; font-size: 15.5px; font-weight: 700; cursor: pointer; }
body .product-guide .product-guide__question p { margin: 0 0 14px !important; }
body .product-guide .product-guide__sources { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; line-height: 1.5; }

/* Logo shine: a green-white sheen sweeps across "Auralis" every few seconds
   (header + homepage hero), and the hero accent bar grows in and glints.
   Needs !important + html prefix to beat the global `body *` solid-black
   text rule above. */
@property --auralis-sheen {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@keyframes auralis-logo-sheen {
  0% { --auralis-sheen: 100%; }
  28%, 100% { --auralis-sheen: 0%; }
}
@keyframes auralis-logo-bar-in {
  from { transform: scaleX(0); }
}
@keyframes auralis-logo-bar-glint {
  0% { background-position: 160% 0, 0 0; }
  35%, 100% { background-position: -60% 0, 0 0; }
}

@media (prefers-reduced-motion: no-preference) {
  html body:not([data-admin-page]) .brand-wordmark__primary,
  html body #landing-title .landing-hero__logo-word {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    background-image: linear-gradient(110deg, #000 0%, #000 40%, #2f7a5c 45%, #d9f3e6 50%, #2f7a5c 55%, #000 60%, #000 100%) !important;
    background-size: 250% 100% !important;
    background-position: var(--auralis-sheen) 0 !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    animation: auralis-logo-sheen 6s ease-in-out 0.8s infinite;
    transition: filter 0.3s ease;
  }
  html:not([data-entry="open"]) body #landing-title .landing-hero__logo-word {
    animation: 
      auralis-line-reveal var(--motion-xslow) var(--motion-ease) both,
      auralis-logo-sheen 6s ease-in-out 1.4s infinite;
  }
  html body .brand:hover .brand-wordmark__primary,
  html body .brand:focus-visible .brand-wordmark__primary,
  html body .landing-hero__logo:hover .landing-hero__logo-word {
    filter: drop-shadow(0 0 10px rgba(150, 202, 170, 0.75));
    animation-duration: 1.6s;
  }

  .landing-hero__logo::before {
    transform-origin: left center;
    background:
      linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.9) 50%, transparent 65%) 160% 0 / 250% 100% no-repeat,
      linear-gradient(90deg, #96caaa, #12344a);
    animation: 
      auralis-logo-bar-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both,
      auralis-logo-bar-glint 6s ease-in-out 1.2s infinite;
  }
}

/* Footer "Klar til å bestille?" glow: a soft mint light breathes behind the
   heading and the button sends out a ring. Paused unless the band is on
   screen (scripts/site/reveal.js toggles .is-looping). */
html body footer.site-footer .site-footer__cta {
  position: relative;
  isolation: isolate;
}
html body footer.site-footer .site-footer__cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(820px, 92vw);
  height: 320px;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(170, 225, 195, 0.5), rgba(170, 225, 195, 0) 100%);
  opacity: 0.55;
  pointer-events: none;
}
html body footer.site-footer .site-footer__cta h2 {
  text-shadow: 0 0 28px rgba(190, 240, 212, 0.45) !important;
}
html body footer.site-footer .site-footer__cta-button {
  position: relative;
}
html body footer.site-footer .site-footer__cta-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}
@keyframes cta-glow-breathe {
  0%, 100% { opacity: 0.4; scale: 0.88; }
  50% { opacity: 0.95; scale: 1.08; }
}
@keyframes cta-button-ring {
  0% { opacity: 0.8; scale: 1; }
  70%, 100% { opacity: 0; scale: 1.18 1.5; }
}
@media (prefers-reduced-motion: no-preference) {
  html body footer.site-footer .site-footer__cta::before {
    animation: cta-glow-breathe 5s ease-in-out infinite paused;
  }
  html body footer.site-footer .site-footer__cta-button::after {
    animation: cta-button-ring 2.6s ease-out infinite paused;
  }
  html body footer.site-footer .site-footer__cta.is-looping::before,
  html body footer.site-footer .site-footer__cta.is-looping .site-footer__cta-button::after {
    animation-play-state: running;
  }
}

/* Footer newsletter sign-up (scripts/site/navigation-v37.js), between the
   "Klar til å bestille?" band and the footer columns. */
html body footer.site-footer .site-footer__newsletter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: center;
  gap: 20px 56px;
  margin-bottom: 48px;
  padding: 32px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
html body footer.site-footer .site-footer__newsletter h2 {
  margin: 0;
  padding: 0;
  border: 0 !important;
  box-shadow: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.02em;
}
html body footer.site-footer .site-footer__newsletter p {
  margin: 6px 0 0;
  color: #b9c9ce !important;
  font-size: 14.5px;
  line-height: 1.55;
}
html body footer.site-footer .site-footer__newsletter-row {
  display: flex;
  gap: 10px;
}
html body footer.site-footer .site-footer__newsletter input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
  font: inherit;
  font-size: 15px;
}
html body footer.site-footer .site-footer__newsletter input::placeholder { color: #8fa3a9; -webkit-text-fill-color: #8fa3a9; }
html body footer.site-footer .site-footer__newsletter input:focus-visible {
  outline: 2px solid #96caaa;
  outline-offset: 2px;
}
html body footer.site-footer .site-footer__newsletter button {
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background-color: #ffffff !important;
  color: #0e0e0e !important;
  -webkit-text-fill-color: #0e0e0e !important;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
html body footer.site-footer .site-footer__newsletter button:disabled { opacity: 0.6; cursor: wait; }
html body footer.site-footer .site-footer__newsletter-note { font-size: 13px !important; color: #9fb3b9 !important; }
html body footer.site-footer .site-footer__newsletter-note :is(a, button) { text-decoration: underline; text-underline-offset: 3px; }
html body footer.site-footer .site-footer__newsletter-note button {
  min-height: 0;
  padding: 0;
  border: 0;
  background-color: transparent !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  font: inherit;
  font-weight: 400;
  cursor: pointer;
}
@media (max-width: 860px) {
  html body footer.site-footer .site-footer__newsletter { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  html body footer.site-footer .site-footer__newsletter-row { flex-direction: column; }
}

/* "Utforsk katalogen" under the bestsellers: the brand gradient pill from the
   hero button, with a light sweep on hover only (no idle loop). */
html body .catalog-more .button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-width: 240px;
  min-height: 54px;
  padding: 0 30px;
  border: 0 !important;
  border-radius: 999px;
  background-color: #17404c !important;
  background-image: linear-gradient(100deg, #2f6d64 0%, #17404c 55%, #0b1f2e 100%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 14px 30px -14px rgba(11, 31, 46, 0.6) !important;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
html body .catalog-more .button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
}
html body .catalog-more .button:hover,
html body .catalog-more .button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 20px 36px -16px rgba(11, 31, 46, 0.7) !important;
}
html body .catalog-more .button:focus-visible { outline: 2px solid #96caaa; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  html body .catalog-more .button:hover::before {
    transform: translateX(320%) skewX(-18deg);
    transition: transform 700ms ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body .catalog-more .button { transition: none; }
  html body .catalog-more .button:hover { transform: none; }
}

/* Footer logo: the same wordmark as the header/hero (accent bar, AURALIS,
   letter-spaced NORDIC), in white on the dark footer, with the logo sheen
   while the footer is on screen (data-loop / .is-looping, reveal.js). */
html body footer.site-footer .site-footer__logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  text-decoration: none;
}
html body footer.site-footer .site-footer__logo::before {
  content: "";
  width: 52px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #96caaa, #eaf7f0);
}
html body footer.site-footer .site-footer__wordmark {
  display: flex;
  flex-direction: column;
  gap: 5px;
  line-height: 1;
}
html body footer.site-footer .site-footer__wordmark-primary {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background-image: linear-gradient(110deg, #ffffff 0%, #ffffff 40%, #b9e6cf 46%, #ffffff 50%, #d6f1e3 55%, #ffffff 60%, #ffffff 100%) !important;
  background-size: 250% 100% !important;
  background-position: var(--auralis-sheen) 0 !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
html body footer.site-footer .site-footer__wordmark-secondary {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #b9c9ce !important;
  -webkit-text-fill-color: #b9c9ce !important;
}
@media (prefers-reduced-motion: no-preference) {
  html body footer.site-footer .site-footer__wordmark-primary { animation: auralis-logo-sheen 6s ease-in-out 0.8s infinite paused; }
  html body footer.site-footer .site-footer__logo.is-looping .site-footer__wordmark-primary { animation-play-state: running; }
}

/* Reduced motion, sitewide catch-all: every animation (including the
   infinite loops) runs once, instantly, and stops on a still frame;
   transitions and smooth scrolling are off. Page-specific reduced-motion
   rules above still pick which frame a loop shows. The product-name shine
   is listed by hand because its own !important rule outranks `*`. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  body #catalog .card .product-card-link {
    animation: none !important;
  }
}

/* Fire sale "Gulldager" (scripts/site/fire-sale.js, admin switch). Marine
   surfaces, ember buttons, gold sale numbers. Everything needs !important to
   beat the sitewide `body *` colour/background reset, and selectors carry
   enough classes to beat its `:is(a:visited, ...)` and heading variants.
   Removing html[data-fire-sale] (switch off) restores the normal page. */

/* The normal hero stays (logo, floating vials, LL code animation); only the
   tagline and buttons under the logo give way to the sale card. */
html[data-fire-sale] .landing-hero__cell--brand > p,
html[data-fire-sale] .landing-hero__cell--brand > .landing-hero__actions {
  display: none !important;
}

/* Hero background: marine and ember from the left, fading to light on the
   right behind the vials. The stacked (narrow) layout keeps the normal
   top-to-bottom direction: dark behind the vials, light behind the logo. */
html[data-fire-sale] body .landing-hero:not(#_):not(#__) {
  background:
    radial-gradient(ellipse 45% 70% at 0% 0%, rgba(242, 107, 29, 0.32) 0%, rgba(242, 107, 29, 0) 70%),
    linear-gradient(90deg, #0b1f2e 0%, #0f2a38 20%, #17404c 32%, #3d5f6a 40%, #7d979e 46%, #b4c5c9 51%, #e3e9ea 57%, #f6f7f7 68%, #f6f7f7 100%) !important;
}

/* On the dark left side the black logo turns white, its sheen gold. */
@media (min-width: 901px) {
  html[data-fire-sale] body #landing-title .landing-hero__logo-word,
  html[data-fire-sale] body #landing-title .landing-hero__logo-sub {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  html[data-fire-sale] body #landing-title .landing-hero__logo-word {
    background-image: linear-gradient(110deg, #fff 0%, #fff 40%, #c8961e 45%, #fff8dc 50%, #c8961e 55%, #fff 60%, #fff 100%) !important;
  }

  @media (prefers-reduced-motion: no-preference) {
    html[data-fire-sale] body #landing-title .landing-hero__logo-word {
      color: transparent !important;
      -webkit-text-fill-color: transparent !important;
    }
  }

  /* Keeps the card's edge visible against the dark side. */
  html[data-fire-sale] body .fire-sale-hero {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 30px 60px -30px rgba(0, 0, 0, 0.7);
  }
}

@media (max-width: 900px) {
  html[data-fire-sale] body .landing-hero:not(#_):not(#__) {
    background:
      radial-gradient(ellipse 90% 30% at 100% 0%, rgba(242, 107, 29, 0.38) 0%, rgba(242, 107, 29, 0) 70%),
      linear-gradient(180deg, #0b1f2e 0%, #17404c 7%, #3d5f6a 13%, #7d979e 19%, #b4c5c9 26%, #e3e9ea 33%, #f6f7f7 42%, #f6f7f7 85%, #eef2f3 100%) !important;
  }
}

/* ---- Banner -------------------------------------------------------- */

html body .fire-sale-banner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 22px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 11px 16px 12px;
  background: #0b1f2e !important;
  font-size: clamp(0.8rem, 0.76rem + 0.2vw, 0.92rem);
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
}

/* A thin gold light runs along the bottom edge. */
html body .fire-sale-banner::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(247, 215, 116, 0) 0%, rgba(247, 215, 116, 0) 35%, #f7d774 50%, rgba(247, 215, 116, 0) 65%, rgba(247, 215, 116, 0) 100%) !important;
  background-size: 200% 100% !important;
  opacity: 0.85;
}

html body .fire-sale-banner,
html body .fire-sale-banner * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body .fire-sale-banner__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

html body .fire-sale-banner__item + .fire-sale-banner__item::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 18px 0 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35) !important;
  vertical-align: middle;
}

html body .fire-sale-banner__link {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 4px;
}

html body .fire-sale-banner__link span {
  display: inline-block;
  transition: transform 0.2s ease;
}

html body .fire-sale-banner:hover .fire-sale-banner__link span {
  transform: translateX(3px);
}

html body .fire-sale-banner:focus-visible {
  outline: 2px solid #f7d774;
  outline-offset: -4px;
}

/* Inside the menu bar: the bar's bottom edge, positioned against the bar
   like the bar's own background (.topbar::before). At the top it spans the
   full width; on scroll it moves in with the floating pill (same insets and
   0–140px scroll range as auralis-pill) and becomes the pill's rounded
   bottom. The bar reserves the banner's height in its bottom padding. */
html body .topbar.has-fire-sale-banner {
  --fire-sale-banner-height: 32px;
  padding-bottom: calc(12px + var(--fire-sale-banner-height)) !important;
}

/* The reading-progress line would cross the banner. */
html body .topbar.has-fire-sale-banner::after {
  display: none !important;
}

html body .topbar > .fire-sale-banner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: var(--fire-sale-banner-height);
  margin: 0;
  padding: 0 16px;
  flex-wrap: nowrap;
  gap: 18px;
  overflow: hidden;
  border-radius: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

html body .topbar > .fire-sale-banner .fire-sale-banner__label {
  font-size: inherit;
  letter-spacing: 0.14em;
}

@keyframes fire-sale-banner-pill {
  to {
    left: max(10px, calc((100vw - 1440px) / 2));
    right: max(10px, calc((100vw - 1440px) / 2));
    bottom: 6px;
    border-radius: 0 0 18px 18px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    body:not([data-admin-page]) .topbar > .fire-sale-banner {
      animation: fire-sale-banner-pill linear both !important;
      animation-timeline: scroll(root) !important;
      animation-range: 0 140px !important;
    }
  }
}

/* Countdown to a planned start (teaser banner). */
html body .fire-sale-banner .fire-sale-countdown {
  display: inline-block;
  margin-left: 6px;
  padding: 0 8px;
  border: 1px solid rgba(247, 215, 116, 0.5);
  border-radius: 999px;
  color: #f7d774 !important;
  -webkit-text-fill-color: #f7d774 !important;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* Countdown: "GULLDAGER OM 1 DAG …" reads as one phrase. */
html body .fire-sale-banner--teaser .fire-sale-banner__label + .fire-sale-banner__item {
  margin-left: -10px;
}

/* Short one-line offer for narrow screens (live banner). */
html body .fire-sale-banner__short {
  display: none;
}

/* Under 1024px the menu bar has a fixed height; with the banner it grows. */
@media (max-width: 1023px) {
  html body .topbar.has-fire-sale-banner {
    height: auto;
  }
}

/* One line at every width: medium screens drop the two slogans. */
@media (max-width: 1100px) {
  html body .fire-sale-banner:not(.fire-sale-banner--teaser) .fire-sale-banner__item:nth-of-type(-n + 2) {
    display: none;
  }
}

/* Phones. Live banner: dot + short offer. Countdown: label, "om", timer. */
@media (max-width: 640px) {
  html body .fire-sale-banner:not(.fire-sale-banner--teaser) :is(.fire-sale-banner__item, .fire-sale-banner__link, .fire-sale-banner__label > .fire-sale-shine),
  html body .fire-sale-banner--teaser .fire-sale-banner__item--offer,
  html body .fire-sale-banner__item + .fire-sale-banner__item::before {
    display: none;
  }

  html body .fire-sale-banner:not(.fire-sale-banner--teaser) .fire-sale-banner__short {
    display: inline;
  }

  html body .topbar > .fire-sale-banner {
    gap: 8px;
  }

  html body .fire-sale-banner--teaser .fire-sale-banner__label + .fire-sale-banner__item {
    margin-left: 0;
  }
}

/* ---- Sale card in the homepage hero ------------------------------- */

html body .fire-sale-hero {
  display: grid;
  justify-items: start;
  gap: 12px;
  width: min(100%, 600px);
  margin-top: 20px;
  padding: clamp(22px, 3vw, 34px);
  border-radius: 28px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(242, 107, 29, 0.32) 0%, rgba(242, 107, 29, 0) 55%),
    linear-gradient(140deg, #17404c 0%, #0b1f2e 72%) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 60px -30px rgba(11, 31, 46, 0.6);
  text-align: start;
}

html body .fire-sale-hero,
html body .fire-sale-hero :is(p, span, b, li, a) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body .fire-sale-hero p {
  margin: 0;
}

html body .fire-sale-hero .fire-sale-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ffb98c !important;
  -webkit-text-fill-color: #ffb98c !important;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

html body .fire-sale-hero .fire-sale-hero__title {
  font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

html body .fire-sale-hero .fire-sale-hero__lead {
  max-width: 44ch;
  font-size: 0.98rem;
  line-height: 1.55;
  opacity: 0.82;
}

html body .fire-sale-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

html body .fire-sale-hero .fire-sale-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

html body .fire-sale-hero .fire-sale-button--primary {
  /* Burnt orange so the white label clears 4.5:1 (5.4:1; hover 7.0:1). */
  background: #b8460a !important;
  box-shadow: 0 10px 24px -12px rgba(242, 107, 29, 0.9);
}

html body .fire-sale-hero .fire-sale-button--primary:hover {
  background: #9a3a08 !important;
  transform: translateY(-1px);
}

html body .fire-sale-hero .fire-sale-button--ghost {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06) !important;
}

html body .fire-sale-hero .fire-sale-button--ghost:hover {
  border-color: rgba(247, 215, 116, 0.6);
  background: rgba(255, 255, 255, 0.1) !important;
}

html body .fire-sale-hero .fire-sale-button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

/* Flex, not grid: three cards share a row when they fit, and when only two
   do, the third stretches across the full width instead of sitting alone. */
html body .fire-sale-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

html body .fire-sale-hero__stats li {
  flex: 1 1 120px;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05) !important;
  text-align: start;
}

html body .fire-sale-hero__stats b {
  font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

html body .fire-sale-hero .fire-sale-hero__stats li > span {
  font-size: 0.86rem;
  line-height: 1.35;
  opacity: 0.75;
}

html body .fire-sale-hero .fire-sale-hero__ends {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  font-size: 1rem;
  font-weight: 700;
}

html body .fire-sale-hero .fire-sale-red {
  color: #ff5a4f !important;
  -webkit-text-fill-color: #ff5a4f !important;
}

html body .fire-sale-hero .fire-sale-hero__fine {
  max-width: 60ch;
  font-size: 0.76rem;
  line-height: 1.5;
  opacity: 0.55;
}

/* Centred like the hero's own intro line on narrow screens. */
@media (max-width: 767px) {
  html body .fire-sale-hero .fire-sale-hero__kicker {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
  }

  html body .fire-sale-hero {
    justify-items: center;
    text-align: center;
  }

  html body .fire-sale-hero__actions {
    justify-content: center;
  }
}

@media (max-width: 420px) {
  html body .fire-sale-hero .fire-sale-button {
    flex: 1 1 100%;
    /* Full-width buttons may wrap their label on the narrowest phones. */
    flex-wrap: wrap;
    row-gap: 2px;
    padding-block: 10px;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
  }
}

/* ---- Bulk ordre / Bygg din boks cards in the hero ----------------- */

/* Same marine surface and buttons as the sale card while the sale runs. */
html[data-fire-sale] body a.landing-hero__offer-card {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(242, 107, 29, 0.22) 0%, rgba(242, 107, 29, 0) 60%),
    linear-gradient(140deg, #17404c 0%, #0b1f2e 75%) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 20px 40px -24px rgba(0, 0, 0, 0.6);
}

html[data-fire-sale] body a.landing-hero__offer-card:hover {
  border-color: rgba(247, 215, 116, 0.45);
  box-shadow: 0 24px 44px -24px rgba(0, 0, 0, 0.7);
}

html[data-fire-sale] body .landing-hero__offer-card :is(.landing-hero__offer-title, .landing-hero__offer-desc, .landing-hero__offer-cta) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-fire-sale] body .landing-hero__offer-card .landing-hero__offer-desc {
  opacity: 0.75;
}

html[data-fire-sale] body .landing-hero__offer-card span.landing-hero__offer-discount {
  border: 1px solid rgba(247, 215, 116, 0.45);
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

html[data-fire-sale] body .landing-hero__offer-card span.landing-hero__offer-cta {
  min-height: 38px;
  padding-inline: 18px;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

html[data-fire-sale] body a.landing-hero__offer-card:hover span.landing-hero__offer-cta {
  border-color: rgba(247, 215, 116, 0.6) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

html[data-fire-sale] body a.landing-hero__offer-card:focus-visible {
  outline: 2px solid #f7d774;
  outline-offset: 3px;
}

/* The shipments counter and LL code steps sit where the hero gradient turns
   from dark to light; a frosted panel keeps them readable at every width. */
html[data-fire-sale] body .landing-hero__cell.landing-hero__cell--stats {
  position: relative;
}

html[data-fire-sale] body .landing-hero__cell.landing-hero__cell--stats::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 14px;
  width: min(calc(100% - 28px), 500px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 24px 50px -30px rgba(11, 31, 46, 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  pointer-events: none;
}

html[data-fire-sale] body .landing-hero__cell.landing-hero__cell--stats > * {
  position: relative;
  z-index: 1;
}

/* ---- Menu bar ------------------------------------------------------ */

/* Dark marine bar with a gold line, white text and icons, and the
   "Auralis" wordmark in white with a gold sheen (same as the hero logo).
   Only the bar's own row is recoloured; dropdowns keep their own panels. */
html[data-fire-sale] body .topbar.topbar::before {
  background-color: #0b1f2e !important;
}

html[data-fire-sale] body .topbar.topbar::after {
  background: linear-gradient(90deg, rgba(200, 150, 30, 0.2) 0%, #c8961e 30%, #f7d774 55%, #c8961e 80%, rgba(200, 150, 30, 0.2) 100%) !important;
}

html[data-fire-sale] body .topbar :is(.brand, .brand *, .site-nav-toggle, .account-toggle, .account-toggle *, .cart-toggle, .cart-toggle > :not(strong), .cart-toggle svg *) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-fire-sale] body .topbar .site-nav-toggle:not([aria-expanded="true"]) .site-nav-toggle__icon,
html[data-fire-sale] body .topbar .site-nav-toggle:not([aria-expanded="true"]) .site-nav-toggle__icon::before,
html[data-fire-sale] body .topbar .site-nav-toggle:not([aria-expanded="true"]) .site-nav-toggle__icon::after {
  background: #ffffff !important;
}

html[data-fire-sale] body .topbar .cart-toggle strong {
  background: #f7d774 !important;
  color: #0b1f2e !important;
  -webkit-text-fill-color: #0b1f2e !important;
}

html[data-fire-sale] body .topbar .brand-wordmark__primary {
  background-image: linear-gradient(110deg, #fff 0%, #fff 40%, #c8961e 45%, #fff8dc 50%, #c8961e 55%, #fff 60%, #fff 100%) !important;
}

@media (prefers-reduced-motion: no-preference) {
  html[data-fire-sale] body .topbar .brand-wordmark__primary {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
  }
}

/* From 1024px (where the menu button goes away) the links sit in the bar. */
@media (min-width: 1024px) {
  html[data-fire-sale] body .topbar .site-nav > :is(a, .market-switcher, .language-switcher),
  html[data-fire-sale] body .topbar .site-nav > :is(a, .market-switcher, .language-switcher) :not(option, .nav-new-badge) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  html[data-fire-sale] body .topbar .language-switcher__select {
    border-color: rgba(255, 255, 255, 0.3) !important;
    background-color: transparent !important;
  }

  html[data-fire-sale] body .topbar .language-switcher__select option {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
  }

  html[data-fire-sale] body .topbar .market-switcher__option.is-current {
    background: rgba(255, 255, 255, 0.18) !important;
  }
}

/* ---- Live dot ------------------------------------------------------ */

html body .fire-sale-pulse {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f7d774 !important;
  box-shadow: 0 0 0 0 rgba(247, 215, 116, 0.6);
}

html body .fire-sale-pulse.fire-sale-pulse--red {
  background: #ff5a4f !important;
  box-shadow: 0 0 0 0 rgba(255, 90, 79, 0.6);
}

/* ---- Struck ordinary discount + shining gold sale value ------------- */

html body .fire-sale-old.fire-sale-old {
  position: relative;
  display: inline-block;
  font-size: 0.82em;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.6) !important;
  text-decoration: none !important;
}

html body .fire-sale-old.fire-sale-old::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: 52%;
  height: 0.1em;
  min-height: 1.5px;
  border-radius: 2px;
  background: currentColor !important;
  transform-origin: left center;
}

html body .fire-sale-shine.fire-sale-shine {
  display: inline-block;
  background-color: transparent !important;
  background-image: linear-gradient(110deg, #c8961e 0%, #f7d774 38%, #fff8dc 50%, #f7d774 62%, #c8961e 100%) !important;
  background-size: 250% 100% !important;
  background-position: 50% 0;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 800;
}

/* On the orange button a cream shimmer instead of gold, for contrast. */
html body .fire-sale-button--primary .fire-sale-shine.fire-sale-shine {
  background-image: linear-gradient(110deg, #ffffff 0%, #ffffff 38%, #ffecb3 50%, #ffffff 62%, #ffffff 100%) !important;
}

/* Light surfaces (Bygg din boks panel, product page "Spar mer" tile):
   deeper gold and a dark strike for contrast. */
html body :is(.panel, .product-detail__save-tile) .fire-sale-shine.fire-sale-shine {
  background-image: linear-gradient(110deg, #7a5200 0%, #b8860b 38%, #e8b923 50%, #b8860b 62%, #7a5200 100%) !important;
}

html body :is(.panel, .product-detail__save-tile) .fire-sale-old.fire-sale-old {
  color: #595959 !important;
  -webkit-text-fill-color: #595959 !important;
}

/* The tile styles its own small print as `span`; the sale value keeps the
   tile's big number size. */
html body .product-detail__save-tile b .fire-sale-shine.fire-sale-shine {
  font-size: inherit;
  line-height: inherit;
}

/* ---- Motion (only for visitors who haven't asked for less) --------- */

@media (prefers-reduced-motion: no-preference) {
  html body .fire-sale-shine.fire-sale-shine {
    animation: fire-sale-shine 3.2s linear infinite !important;
  }

  /* The line draws through the old percent, then the new one pops in. */
  html body .fire-sale-old.fire-sale-old::after {
    animation: fire-sale-strike 0.45s 0.5s cubic-bezier(0.6, 0, 0.3, 1) both !important;
  }

  html body .fire-sale-old + .fire-sale-shine.fire-sale-shine {
    animation: fire-sale-pop 0.5s 0.9s cubic-bezier(0.2, 1.4, 0.4, 1) both, fire-sale-shine 3.2s 1.4s linear infinite !important;
  }

  html body .fire-sale-pulse {
    animation: fire-sale-pulse 1.8s ease-out infinite !important;
  }

  html body .fire-sale-pulse.fire-sale-pulse--red {
    animation-name: fire-sale-pulse-red !important;
  }

  html body .fire-sale-banner::after {
    animation: fire-sale-sweep 4s linear infinite !important;
  }

  html body .fire-sale-hero {
    animation: fire-sale-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
  }
}

@keyframes fire-sale-shine {
  from { background-position: 100% 0; }
  to { background-position: -150% 0; }
}

@keyframes fire-sale-strike {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes fire-sale-pop {
  from { opacity: 0; transform: translateY(4px) scale(0.8); }
  to { opacity: 1; transform: none; }
}

@keyframes fire-sale-pulse {
  0% { box-shadow: 0 0 0 0 rgba(247, 215, 116, 0.6); }
  80%, 100% { box-shadow: 0 0 0 9px rgba(247, 215, 116, 0); }
}

@keyframes fire-sale-pulse-red {
  0% { box-shadow: 0 0 0 0 rgba(255, 90, 79, 0.6); }
  80%, 100% { box-shadow: 0 0 0 9px rgba(255, 90, 79, 0); }
}

@keyframes fire-sale-sweep {
  from { background-position: 200% 0; }
  to { background-position: -100% 0; }
}

@keyframes fire-sale-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ---- Prices elsewhere ---------------------------------------------- */

html body .sale-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 9px;
  border: 1px solid rgba(247, 215, 116, 0.55);
  border-radius: 999px;
  background: #0b1f2e !important;
  font-size: 0.75em;
  font-weight: 800;
  line-height: 1.4;
  vertical-align: 0.12em;
}

html body .sale-badge[hidden] {
  display: none;
}

html body .product-detail__compare {
  margin-left: 10px;
  opacity: 0.55;
}

/* Cart drawer and checkout lines on sale: ordinary price struck through,
   stacked above the price paid. */
html body .cart-line-price {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 2px !important;
  background: transparent !important;
}

/* The discount in red beside the price paid; the struck ordinary price sits
   above on its own line. */
html body .cart-line-price__now {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  background: transparent !important;
}

html body .cart-line-price__percent {
  color: #c62828 !important;
  -webkit-text-fill-color: #c62828 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  background: transparent !important;
}

html body .cart-line-price__was {
  color: #767676 !important;
  -webkit-text-fill-color: #767676 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-decoration: line-through !important;
  white-space: nowrap !important;
  background: transparent !important;
}

@media (prefers-color-scheme: dark) {
  html body .checkout-page .cart-line-price__was {
    color: rgba(231, 241, 237, 0.6) !important;
    -webkit-text-fill-color: rgba(231, 241, 237, 0.6) !important;
  }
}

html body main.page .offer-tile--rose.offer-tile--fire-sale {
  background: #ffe9cf !important;
}

/* Stacked homepage hero: the front vials sat on the photo cell's bottom edge,
   so the cell's overflow cut their drop shadow off in a hard grey line. A
   little room underneath lets the shadow fade out (vials are placed in %,
   so the whole group just moves up). */
@media (max-width: 900px) {
  html body .landing-hero .landing-hero__cell--photos > .landing-hero__photos {
    bottom: 48px;
  }
}

/* Pen and nasal-spray thumbs (cart drawer + checkout): their photos are full
   square studio shots with their own backdrop, so the white padding meant for
   vial cut-outs only framed a small thin product. Fill the thumb instead and
   zoom slightly — the products span ~5–90% of the photo's height, so 1.15x
   around that centre still keeps cap and base in frame. */
html body :is(#cart-preview .cartlite-item__thumb, .cart-item .cart-item__image)[data-thumb="photo"] {
  padding: 0 !important;
}
html body :is(#cart-preview .cartlite-item__thumb, .cart-item .cart-item__image)[data-thumb="photo"] img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  transform: scale(1.15) !important;
  transform-origin: 50% 47% !important;
}

/* ---- Accessibility and small-screen fixes ------------------------------ */

/* Focused and fragment-targeted elements scroll clear of the sticky header
   (navigation measures it, fire-sale banner included). */
html {
  scroll-padding-top: calc(var(--auralis-topbar-height, 72px) + 16px);
}

/* The sitewide `body *` pass would strip the skip link's dark fill. */
html body a.skip-link {
  background: #0b1f2e !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Fire-sale banner on the narrowest phones: smaller type so the one-line
   offer fits instead of being clipped at both edges. */
@media (max-width: 360px) {
  html body .topbar > .fire-sale-banner {
    gap: 6px;
    padding: 0 8px;
    font-size: 0.64rem;
    letter-spacing: 0.04em;
  }

  html body .topbar > .fire-sale-banner .fire-sale-banner__label {
    letter-spacing: 0.08em;
  }
}

/* Short screens (phones in landscape): a sticky header with the sale banner
   took over a quarter of the height. It scrolls away with the page instead. */
@media (max-height: 480px) {
  html {
    scroll-padding-top: 16px;
  }

  body:not([data-admin-page]) .topbar {
    position: relative;
  }
}

/* Cart drawer. Short screens keep the item list usable by dropping the
   optional "Har du glemt noe?" suggestion. */
@media (max-height: 520px) {
  body #cart-preview .cart-preview__upsell {
    display: none !important;
  }
}

/* html keeps a stable scrollbar gutter; let the backdrop reach under it so no
   undimmed strip is left at the right edge while the page is locked. */
.cart-preview-backdrop {
  right: -32px;
}

/* 44px close target without changing the header's height. */
body #cart-preview .cart-preview__close {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  margin: -10px -12px -10px 0;
  padding: 0;
}

body #cart-preview .cart-preview__footer > strong {
  white-space: nowrap;
}

/* Footer "Meld deg av" text button: at least a 24px-tall target. */
html body footer.site-footer .site-footer__newsletter-note button {
  min-height: 24px;
  padding-block: 2px;
}

/* iOS Safari zooms the page when a form field under 16px gets focus (cart
   quantity, language picker, newsletter...). Many field rules use !important,
   so this lives in a layer: layered !important outranks unlayered !important. */
@layer touch-field-zoom {
  @media (pointer: coarse) {
    input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"]),
    select,
    textarea {
      font-size: 16px !important;
    }
  }
}