@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  color-scheme: light;
  --font-brand: "Inter", "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);
  --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;
}

/* 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-ring);
  outline-offset: 2px;
}

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

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. */
  grid-auto-rows: minmax(clamp(320px, 44vw, 620px), auto);
  margin: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.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__cell--brand h2 {
  max-width: 100%;
  margin: 0 0 14px;
  color: var(--ink);
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 0.96;
  letter-spacing: -0.04em;
  text-transform: none;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.landing-hero__cell--brand h2 span {
  color: var(--accent);
}

.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;
  background: #ffffff;
  border: 1px solid #3b6ea5;
  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: #3b6ea5;
}

.landing-hero__offer-vial:nth-child(1) { animation-delay: 0s; }
.landing-hero__offer-vial:nth-child(2) { animation-delay: 0.15s; }
.landing-hero__offer-vial:nth-child(3) { animation-delay: 0.3s; }
.landing-hero__offer-vial:nth-child(4) { animation-delay: 0.45s; }
.landing-hero__offer-vial:nth-child(5) { animation-delay: 0.6s; }
.landing-hero__offer-vial:nth-child(6) { 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 h4 {
  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;
}

@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;
}

.landing-hero__photo canvas {
  display: block;
  width: 100%;
  height: auto;
}

/* 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;
}

@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 {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .landing-hero__cell:not(:last-child) {
    border-bottom: 1px solid var(--line);
  }

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

  /* 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-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-ring);
  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 {
  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 {
  object-fit: contain;
  object-position: center;
}
.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; }
.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); }
.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%; }
}

@media (max-width: 700px) {
  /* 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 {
    grid-template-columns: auto minmax(0, 1fr) auto;
    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; }
  }

  .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;
  }

  .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;
    width: auto;
  }

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

  .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 > 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) 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-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-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-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: 0;
  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: 48px 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: 48px !important;
  height: 48px !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-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-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-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-nasal.section,
body #reviews.section,
body #packages.section {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body .product-detail.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-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;
}

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-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 the .page container's own 1200px-max, 20px-minimum gutter. 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);
  padding: 12px max(20px, calc((100vw - 1200px) / 2));
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
}

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;
}

/* 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: #8f8a9c !important;
  -webkit-text-fill-color: #8f8a9c !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-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-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-nasal .accessories-grid {
    grid-template-columns: 1fr !important;
  }
}

body #catalog-panel-accessories .accessory-card,
body #catalog-panel-pens .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-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-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-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-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-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-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-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-nasal .accessory-card p {
  margin: 3px 0 0 !important;
  color: #8f8a9c !important;
  -webkit-text-fill-color: #8f8a9c !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-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-nasal .accessory-card__price + .button,
body #catalog-panel-accessories .accessory-card .cart-add,
body #catalog-panel-pens .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-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-nasal .accessory-card:has(.cart-add:disabled) :is(h3, p, strong, .accessory-card__price) {
  color: #9a9a9a !important;
  -webkit-text-fill-color: #9a9a9a !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-nasal .accessory-card:has(.cart-add:disabled) .pill {
  color: #9a9a9a !important;
  -webkit-text-fill-color: #9a9a9a !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-nasal .accessory-card .cart-add:disabled {
  background: #e6e6e6 !important;
  color: #9a9a9a !important;
  -webkit-text-fill-color: #9a9a9a !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: #9a9a9a !important;
  -webkit-text-fill-color: #9a9a9a !important;
}

body #catalog .card .cart-add:disabled {
  background: #e6e6e6 !important;
  color: #9a9a9a !important;
  -webkit-text-fill-color: #9a9a9a !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-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: #9a9a9a !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: #8a8a8a !important;
  -webkit-text-fill-color: #8a8a8a !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: 2px !important;
  width: fit-content !important;
  min-height: 30px !important;
  margin-top: 6px !important;
  padding: 0 4px !important;
  border: 1px solid #dcdcdc !important;
  border-radius: 999px !important;
  background: #ffffff !important;
}

body #cart-preview .cartlite-item__qty .cart-icon-button {
  width: 24px !important;
  height: 24px !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 {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #b0b0b0 !important;
  -webkit-text-fill-color: #b0b0b0 !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-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 0 0 10px !important;
}

body #cart-preview .cart-preview__upsell-head .cart-preview__upsell-title {
  margin: 0 !important;
}

body #cart-preview .cart-preview__discount-pill {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  background: #e0342c !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
}

body #cart-preview .cart-preview__box-progress-track {
  height: 6px !important;
  margin: 0 0 10px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: #ececec !important;
}

body #cart-preview .cart-preview__box-progress-fill {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  transition: width 240ms ease, background-color 240ms ease !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: #b0b0b0 !important;
  -webkit-text-fill-color: #b0b0b0 !important;
  cursor: not-allowed !important;
}

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

body #cart-preview .cart-preview__upsell-note {
  margin: 0 0 10px !important;
  color: #5c5c5c !important;
  -webkit-text-fill-color: #5c5c5c !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  background: transparent !important;
}

body #cart-preview .cart-preview__upsell + .cart-preview__upsell {
  margin-top: 10px !important;
}

body #cart-preview .cart-preview__upsell-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !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: #8a8a8a !important;
  -webkit-text-fill-color: #8a8a8a !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: #8a8a8a !important;
  -webkit-text-fill-color: #8a8a8a !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: #8a8a8a !important;
  -webkit-text-fill-color: #8a8a8a !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.                     *
 * ================================================================= */
body .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: #8a8a8a !important;
  -webkit-text-fill-color: #8a8a8a !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: #b0b0b0 !important;
  -webkit-text-fill-color: #b0b0b0 !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: #8a8a8a !important;
  -webkit-text-fill-color: #8a8a8a !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: #9a9a9a !important;
  -webkit-text-fill-color: #9a9a9a !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: 92px minmax(0, 1fr) auto !important;
}
body #cart-preview .cartlite-item__thumb {
  width: 92px !important;
  height: 92px !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  padding: 6px !important;
}
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;
  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 {
  color: #b3852c !important;
  -webkit-text-fill-color: #b3852c !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; }

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 {
  border-color: #3b6ea5 !important;
}

body .landing-hero__offer-vial::before {
  background: #3b6ea5 !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;
}
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;
}

@media (max-width: 480px) {
  #cookie-consent .cookie-consent__actions {
    flex-direction: column;
  }
}