/* ============================================================
   DynaBind — Bio Lab Light Theme
   White background · baby-blue gradient · high-trust converting
   ============================================================ */

:root {
  color-scheme: only light !important;

  /* Core surfaces */
  --bg: #ffffff;
  --bg-soft: #f6faff;
  --bg-tint: #eef6ff;
  --panel: #ffffff;
  --panel-tint: #f4f9ff;
  --panel-soft: #eaf3ff;

  /* Lines & dividers */
  --line: #dceaf7;
  --line-strong: #b9d4ef;
  --line-soft: #e7f1fb;

  /* Text */
  --text: #0a2540;
  --text-strong: #061a30;
  --muted: #5b7290;
  --muted-soft: #8aa0bd;

  /* Brand blue family */
  --blue-50: #f0f7ff;
  --blue-100: #dceaf7;
  --blue-200: #b9d4ef;
  --blue-300: #8fd0ff;
  --blue-400: #5baeff;
  --blue-500: #2e8bff;
  --blue-600: #1a6fe0;
  --blue-700: #0e57b8;

  /* Trust accents */
  --green: #00b894;
  --green-soft: #e6f8f1;
  --warning: #f5a623;
  --warning-soft: #fef4e2;
  --danger: #e74c3c;
  --danger-soft: #fdecea;

  /* Gradient brand */
  --grad-brand: linear-gradient(135deg, #8fd0ff 0%, #2e8bff 55%, #1a6fe0 100%);
  --grad-soft: linear-gradient(135deg, #dceaf7 0%, #f4f9ff 100%);
  --grad-icon: linear-gradient(135deg, #8fd0ff 0%, #2e8bff 100%);
  --grad-icon-strong: linear-gradient(135deg, #5baeff 0%, #1a6fe0 100%);
  --grad-cta: linear-gradient(135deg, #5baeff 0%, #2e8bff 50%, #1a6fe0 100%);

  --shadow-sm: 0 2px 6px rgba(46, 139, 255, 0.06), 0 1px 2px rgba(10, 37, 64, 0.04);
  --shadow-md: 0 8px 24px rgba(46, 139, 255, 0.08), 0 2px 6px rgba(10, 37, 64, 0.04);
  --shadow-lg: 0 24px 60px rgba(46, 139, 255, 0.10), 0 8px 18px rgba(10, 37, 64, 0.06);
  --shadow-blue: 0 12px 32px rgba(46, 139, 255, 0.22);
  --radius: 12px;
  --radius-lg: 21px;
  --radius-xl: 23px;
  --button-radius: 9px;
  --max: 1280px;

  /* Updated at runtime so the dot texture keeps the same physical scale. */
  --dot-primary-core: 1.5px;
  --dot-primary-edge: 2px;
  --dot-primary-step: 40px;
  --dot-secondary-core: 1.25px;
  --dot-secondary-edge: 1.75px;
  --dot-secondary-step: 60px;
  --dot-secondary-offset: 20px;

  --font-body: "Inter", "Open Sans", "Roboto", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Inter", "Open Sans", ui-sans-serif, system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  color-scheme: only light !important;
  background: #ffffff;
  overflow-x: hidden;
}

body,
button,
input,
select,
textarea {
  color-scheme: only light;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 80% 8%, rgba(143, 208, 255, 0.22), transparent 32%),
    radial-gradient(circle at 8% 78%, rgba(91, 174, 255, 0.16), transparent 30%),
    radial-gradient(circle at 92% 90%, rgba(46, 139, 255, 0.10), transparent 28%),
    radial-gradient(
      circle at center,
      rgba(46, 139, 255, 0.085) var(--dot-primary-core),
      transparent var(--dot-primary-edge)
    ) 0 0 / var(--dot-primary-step) var(--dot-primary-step),
    radial-gradient(
      circle at center,
      rgba(143, 208, 255, 0.065) var(--dot-secondary-core),
      transparent var(--dot-secondary-edge)
    ) var(--dot-secondary-offset) var(--dot-secondary-offset) /
      var(--dot-secondary-step) var(--dot-secondary-step),
    linear-gradient(180deg, #ffffff 0%, #f6faff 50%, #ffffff 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Bio-lab background: ONLY dot grid (no lines) + soft blue blobs */
body::before {
  content: none;
}

body::after {
  content: none;
}

/* Subtle dot-only lab background (no lines) */
.lab-background {
  display: none;
}

a {
  color: var(--blue-600);
  text-decoration: none;
  transition: color 180ms ease;
}

a:hover {
  color: var(--blue-700);
}

button,
input,
select,
textarea {
  font: inherit;
  color: var(--text);
}

button {
  cursor: pointer;
}

img {
  max-width: 100%;
  display: block;
}

::placeholder {
  color: rgba(91, 114, 144, 0.6) !important;
}

/* ============================================================
   Skip link
   ============================================================ */
.skip-link {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 99;
  transform: translateY(-140%);
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--blue-500);
  color: #ffffff;
}
.skip-link:focus {
  transform: translateY(0);
}

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 249, 255, 0.88)),
    rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: 0 1px rgba(220, 234, 247, 0.5), 0 6px 24px rgba(46, 139, 255, 0.05);
}

.top-offer-bar {
  width: 100%;
  min-height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px clamp(18px, 3.8vw, 70px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  background: var(--grad-cta);
  font-family: "Open Sans", var(--font-body);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 1.4px;
  line-height: 1.35;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: #ffffff;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.32), 0 6px 18px rgba(46, 139, 255, 0.18);
}

.top-offer-bar .offer-desktop,
.top-offer-bar .offer-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.top-offer-bar .offer-mobile {
  display: none;
}

.top-offer-bar .offer-package {
  display: inline-block;
  margin-right: 3.2px;
  font-size: 1.1rem;
  line-height: 1;
}

.navbar {
  position: relative;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 14px clamp(18px, 3.8vw, 70px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand img {
  width: 48px;
  height: 48px;
  filter: drop-shadow(0 4px 14px rgba(46, 139, 255, 0.28));
}

.brand strong {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.1;
  color: var(--text-strong);
  letter-spacing: -0.3px;
  font-weight: 800;
}

.brand small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  transition: background 160ms ease, color 160ms ease;
}

.nav-links a:hover,
.nav-links a.active {
  background: var(--blue-50);
  color: var(--blue-600);
}

.ui-svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ui-svg {
  width: 22px;
  height: 22px;
  color: var(--blue-500);
  filter: drop-shadow(0 2px 6px rgba(46, 139, 255, 0.18));
}

.nav-toggle {
  display: none;
  position: relative;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0;
}

.nav-toggle span {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  flex: none;
  width: 22px;
  height: 2px;
  min-height: 2px;
  max-height: 2px;
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  border-radius: 2px;
  background: var(--text);
  transform: translate(-50%, -50%);
  transition: top 220ms ease, transform 220ms ease, opacity 160ms ease;
}

.nav-toggle span:nth-child(1) {
  top: calc(50% - 6px);
}

.nav-toggle span:nth-child(3) {
  top: calc(50% + 6px);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.cart-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 118px;
  justify-content: center;
  padding: 11px 18px;
  border: 1px solid var(--blue-200);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(143, 208, 255, 0.22), rgba(46, 139, 255, 0.10) 60%, rgba(91, 174, 255, 0.18)),
    #ffffff;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.6), 0 4px 14px rgba(46, 139, 255, 0.10);
  color: var(--text-strong);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.cart-pill:hover {
  transform: translateY(-2px);
  border-color: var(--blue-400);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.7), 0 10px 22px rgba(46, 139, 255, 0.18);
}

.cart-svg {
  display: inline-block;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  position: relative;
  color: var(--blue-600);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232e8bff'%3E%3Cpath d='M5.5875 21.4125C5.19583 21.0208 5 20.55 5 20C5 19.45 5.19583 18.9792 5.5875 18.5875C5.97917 18.1958 6.45 18 7 18C7.55 18 8.02083 18.1958 8.4125 18.5875C8.80417 18.9792 9 19.45 9 20C9 20.55 8.80417 21.0208 8.4125 21.4125C8.02083 21.8042 7.55 22 7 22C6.45 22 5.97917 21.8042 5.5875 21.4125ZM15.5875 21.4125C15.1958 21.0208 15 20.55 15 20C15 19.45 15.1958 18.9792 15.5875 18.5875C15.9792 18.1958 16.45 18 17 18C17.55 18 18.0208 18.1958 18.4125 18.5875C18.8042 18.9792 19 19.45 19 20C19 20.55 18.8042 21.0208 18.4125 21.4125C18.0208 21.8042 17.55 22 17 22C16.45 22 15.9792 21.8042 15.5875 21.4125ZM5.2 4H19.95C20.3333 4 20.625 4.17083 20.825 4.5125C21.025 4.85417 21.0333 5.2 20.85 5.55L17.3 11.95C17.1167 12.2833 16.8708 12.5417 16.5625 12.725C16.2542 12.9083 15.9167 13 15.55 13H8.1L7 15H18C18.2833 15 18.5208 15.0958 18.7125 15.2875C18.9042 15.4792 19 15.7167 19 16C19 16.2833 18.9042 16.5208 18.7125 16.7125C18.5208 16.9042 18.2833 17 18 17H7C6.25 17 5.68333 16.6708 5.3 16.0125C4.91667 15.3542 4.9 14.7 5.25 14.05L6.6 11.6L3 4H2C1.71667 4 1.47917 3.90417 1.2875 3.7125C1.09583 3.52083 1 3.28333 1 3C1 2.71667 1.09583 2.47917 1.2875 2.2875C1.47917 2.09583 1.71667 2 2 2H3.625C3.80833 2 3.98333 2.05 4.15 2.15C4.31667 2.25 4.44167 2.39167 4.525 2.575L5.2 4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cart-svg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-brand);
  -webkit-mask-image: url("assets/cart.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("assets/cart.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  pointer-events: none;
}

.cart-label {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.6px;
}

.cart-pill [data-cart-count] {
  min-width: 24px;
  min-height: 24px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--blue-200);
  border-radius: 999px;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 12px;
  font-weight: 800;
}

.header-search {
  position: relative;
  width: min(calc(100% - 44px), 1120px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  /* Equal padding above and below the divider line.
     The line sits at top:0, so padding-top = space below line,
     and navbar padding-bottom = space above line. Both 14px. */
  padding: 14px 0;
}

.search-autocomplete {
  position: relative;
  min-width: 0;
}

.search-suggestions {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  left: 0;
  z-index: 90;
  max-height: min(420px, 60vh);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 42px rgba(10, 37, 64, 0.16), 0 4px 12px rgba(46, 139, 255, 0.10);
}

.search-suggestion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 11px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
}

.search-suggestion:hover,
.search-suggestion:focus-visible {
  background: var(--blue-50);
  outline: none;
}

.search-suggestion > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.search-suggestion strong {
  overflow: hidden;
  color: var(--text-strong);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-suggestion small {
  color: var(--muted);
  font-size: 11px;
}

.search-suggestion b {
  color: var(--blue-700);
  font-size: 12px;
  white-space: nowrap;
}

.search-suggestion-empty {
  padding: 12px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.header-search::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(calc(100vw - 32%), 132%);
  min-width: min(100%, 1120px);
  height: 1px;
  transform: translateX(-50%);
  background: var(--line-soft);
}

.header-search input {
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  outline: none;
  box-shadow: inset 0 1px rgba(10, 37, 64, 0.04);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.header-search input:focus {
  border-color: var(--blue-400);
  box-shadow: inset 0 1px rgba(10, 37, 64, 0.04), 0 0 0 4px rgba(46, 139, 255, 0.14);
}

.header-search .btn {
  min-height: 44px;
  padding: 13px 32px;
}

main {
  min-height: 68vh;
}

/* ============================================================
   Section / hero scaffolding
   ============================================================ */
.section,
.hero {
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: 72px 22px;
}

.section-tight {
  padding-top: 32px;
  padding-bottom: 32px;
}

.hero {
  position: relative;
  min-height: auto;
  padding-top: 57px;
  padding-bottom: 32px;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  align-items: start;
  gap: 48px;
}

.hero-image-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  /* No box, no border, no background — just the image */
}

.hero-product-image {
  width: min(100%, 520px);
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  filter: drop-shadow(0 24px 60px rgba(46, 139, 255, 0.22));
}

.hero-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 9px;
  justify-content: center;
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-strong);
}

.trust-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 16px;
  line-height: 1;
  flex: 0 0 auto;
  color: var(--blue-600);
  font-weight: 800;
}

.hero-copy {
  position: relative;
  z-index: 1;
}

.hero-clean .hero-inner {
  grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.6fr);
}

@media (min-width: 961px) {
  .hero-clean .hero-inner {
    align-items: stretch;
  }

  .hero-clean .hero-image-wrap {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-self: stretch;
    min-width: 0;
    min-height: 0;
    height: 100%;
  }

  .hero-clean .hero-product-image {
    align-self: center;
    justify-self: center;
    width: min(137%, 680px);
    max-width: none;
    height: 100%;
    min-height: 0;
    object-fit: contain;
  }

  .hero-clean .hero-trust-badges {
    margin-top: 0;
    padding-top: 12px;
  }
}

.home-hero-title > span {
  display: block;
}

.home-title-desktop {
  white-space: nowrap;
}

.home-title-mobile {
  display: none !important;
  white-space: nowrap;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: var(--blue-600);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

/* Removed the Claude-style gradient stripe before eyebrow text */

h1, h2, h3, h4, p {
  margin-top: 0;
}

h1 {
  margin-bottom: 22px;
  font-family: var(--font-display);
  font-size: clamp(36px, 5.4vw, 60px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.5px;
  color: var(--text-strong);
}

.hero h1 {
  font-weight: 900;
}

h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.2px;
  color: var(--text-strong);
}

h3 {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.24;
  color: var(--text-strong);
}

p {
  color: var(--muted);
  line-height: 1.7;
}

.lead {
  font-size: 17px;
  color: var(--text);
  line-height: 1.65;
  max-width: 60ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}

.hero-actions .btn {
  min-height: 51px;
  height: 51px;
  max-height: 51px;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 44px;
  box-sizing: border-box;
  overflow: hidden;
  isolation: isolate;
  background-clip: border-box;
  background-origin: border-box;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.btn-primary {
  background: var(--grad-cta) !important;
  background-clip: border-box !important;
  background-origin: border-box;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  box-shadow: var(--shadow-blue);
}

.btn-primary:hover {
  transform: translateY(-2px);
  color: #ffffff;
  box-shadow: 0 18px 38px rgba(46, 139, 255, 0.32);
}

.btn-ghost {
  background: #ffffff;
  color: var(--blue-600);
  border-color: var(--blue-200);
  box-shadow: var(--shadow-sm);
}

.btn-ghost:hover {
  background: var(--blue-50);
  border-color: var(--blue-400);
  color: var(--blue-700);
}

.btn-full {
  width: 100%;
}

.btn.btn-ghost.btn-full {
  border-color: #d7dee8;
  background: linear-gradient(180deg, #eef2f6 0%, #e8edf3 100%) !important;
  color: #071b30;
  -webkit-text-fill-color: #071b30;
  box-shadow: 0 8px 20px rgba(10, 37, 64, 0.10), inset 0 1px rgba(255, 255, 255, 0.9);
}

.btn.btn-ghost.btn-full:hover {
  border-color: #b9c5d4;
  background: linear-gradient(180deg, #e9eef3 0%, #e1e7ee 100%) !important;
  color: #061a30;
  -webkit-text-fill-color: #061a30;
}

.btn.btn-ghost.btn-full.terms-button {
  border-color: transparent;
  background: var(--grad-cta) !important;
  background-image: var(--grad-cta) !important;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  box-shadow: var(--shadow-blue);
}

.btn.btn-ghost.btn-full.terms-button:hover {
  border-color: transparent;
  background: var(--grad-cta) !important;
  background-image: var(--grad-cta) !important;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  box-shadow: 0 18px 38px rgba(46, 139, 255, 0.32);
  transform: translateY(-2px);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* ============================================================
   Hero feature boxes
   ============================================================ */
.hero-feature-boxes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 32px;
}

.hero-feature-boxes article {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.hero-feature-boxes .feature-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--grad-icon);
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(46, 139, 255, 0.24);
}

.hero-feature-boxes .feature-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-feature-boxes strong {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--blue-700);
}

.hero-feature-boxes span {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}

/* ============================================================
   Hero packshot
   ============================================================ */
.hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  padding: 28px;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 50% 30%, rgba(143, 208, 255, 0.32), transparent 60%),
    linear-gradient(160deg, #f4f9ff 0%, #dceaf7 100%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  min-height: 480px;
  overflow: hidden;
}

.hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 18%, rgba(91, 174, 255, 0.28), transparent 30%),
    radial-gradient(circle at 82% 82%, rgba(46, 139, 255, 0.20), transparent 32%);
  pointer-events: none;
}

.hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(91, 174, 255, 0.14) 1.2px, transparent 1.7px);
  background-size: 28px 28px;
  mask-image: radial-gradient(circle at 50% 50%, black 0%, transparent 70%);
  pointer-events: none;
}

/* ============================================================
   Packshot
   ============================================================ */
.packshot {
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 18px;
  z-index: 1;
}

.packshot img {
  width: auto;
  height: auto;
  max-height: 320px;
  object-fit: contain;
  filter: drop-shadow(0 18px 38px rgba(46, 139, 255, 0.28));
}

.packshot-media {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
  vertical-align: middle;
  isolation: isolate;
}

.packshot-media .packshot-image {
  display: block;
  max-width: 100%;
}

.pack-label-svg {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.pack-label {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: min(82%, 260px);
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 249, 255, 0.94));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.pack-label strong {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--blue-700);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.pack-label span {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-strong);
}

.pack-label small {
  font-size: 11px;
  color: var(--muted);
}

.pack-label em {
  font-style: normal;
  font-size: 11px;
  color: var(--blue-600);
  font-weight: 600;
}

/* ============================================================
   Panels
   ============================================================ */
.panel {
  padding: 26px;
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.panel h2 + p,
.panel h3 + p {
  margin-top: 6px;
}

/* ============================================================
   Product grid
   ============================================================ */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.section-head h2 {
  margin: 0;
}

.section-head p {
  margin: 6px 0 0;
  max-width: 60ch;
}

.catalog-head h2 {
  font-size: clamp(24px, 2.6vw, 30px);
}

/* Home catalog section — title + description left-aligned, button below as gradient */
.catalog-head-centered {
  text-align: left;
  justify-content: flex-start;
  align-items: flex-start;
}

.catalog-head-centered h2 {
  margin: 0;
}

.catalog-head-centered p {
  margin: 8px 0 0;
  max-width: 70ch;
}

.catalog-head-centered .catalog-cta {
  margin: 18px 0 0;
}

.catalog-head-centered .btn-primary {
  background: var(--grad-cta);
  color: #ffffff;
  box-shadow: var(--shadow-blue);
}

.catalog-cta {
  border-radius: 999px !important;
  background-clip: border-box !important;
}

.catalog-cta-mobile {
  display: none;
}

.filter-row.home-filter-row {
  margin-bottom: 27px;
  gap: 9px;
  align-items: center;
  flex-wrap: wrap;
}

.filter-row.home-filter-row .chip {
  flex: 0 0 auto;
  white-space: nowrap;
}

.filter-row.home-filter-row .catalog-cta {
  margin-left: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}

.selector-panel {
  padding: 26px;
  border-radius: var(--radius-xl);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}

.product-section > .selector-panel {
  padding-right: 0;
  padding-left: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* The primary catalog selector is part of the first viewport. */
.selector-panel.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-right: 0;
  margin-bottom: 18px;
  margin-left: 0;
  padding: 6px 0 8px;
  overflow: visible;
}

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  background-clip: border-box;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: all 160ms ease;
}

.chip:hover {
  border-color: var(--blue-300);
  background: var(--blue-50);
  color: var(--blue-700);
}

.chip.active {
  background: var(--grad-cta);
  color: #ffffff;
  border-color: rgba(46, 139, 255, 0.20);
  box-shadow: 0 9px 24px rgba(46, 139, 255, 0.22);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.product-grid-dense {
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

@media (max-width: 960px) {
  .product-grid,
  .product-grid-dense {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .product-grid,
  .product-grid-dense {
    grid-template-columns: 1fr;
  }
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.product-card:hover {
  transform: translateY(-4px);
  border-color: var(--blue-300);
  box-shadow: var(--shadow-lg);
}

.product-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 35%, rgba(143, 208, 255, 0.28), transparent 65%),
    linear-gradient(160deg, #f4f9ff 0%, #e6f1fc 100%);
  overflow: hidden;
}

.product-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(91, 174, 255, 0.10) 1px, transparent 1.5px);
  background-size: 22px 22px;
  mask-image: radial-gradient(circle at 50% 50%, black 0%, transparent 75%);
  pointer-events: none;
}

.product-visual .packshot {
  position: relative;
  z-index: 1;
}

.product-visual .packshot img {
  max-height: 367px;
}

.product-card .product-visual {
  background: #ffffff;
  isolation: isolate;
}

.product-card .product-visual::after {
  z-index: 1;
  background:
    radial-gradient(
      ellipse at 50% 42%,
      rgba(143, 208, 255, 0.045) 0%,
      rgba(91, 174, 255, 0.018) 42%,
      transparent 72%
    );
  background-size: 100% 100%;
  mask-image: none;
}

.product-card .product-visual .packshot {
  width: 100%;
  height: 100%;
  padding: 0;
}

.product-card .product-visual .packshot-media {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 0;
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  background: #ffffff;
  box-shadow: none;
}

.product-card .product-visual .packshot-image {
  width: 100%;
  height: 100%;
  max-height: none;
  border-radius: calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0;
  object-fit: cover;
}

.product-card .product-visual.animated-scan::before,
.product-detail-visual.animated-scan::before {
  z-index: 2;
  background:
    linear-gradient(
      110deg,
      transparent 25%,
      rgba(143, 208, 255, 0.10) 45%,
      rgba(46, 139, 255, 0.045) 52%,
      transparent 72%
    );
  background-size: 240% 100%;
  animation: product-image-sheen 7.5s ease-in-out infinite;
}

@keyframes product-image-sheen {
  0%, 22% { background-position: 130% 0; }
  70%, 100% { background-position: -130% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .product-card .product-visual.animated-scan::before,
  .product-detail-visual.animated-scan::before {
    animation: none;
    background-position: 50% 0;
  }
}

.product-visual .pack-label {
  display: none !important;
}

.product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  max-width: calc(100% - 104px);
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line-strong);
  color: var(--blue-700);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.35px;
  line-height: 1.1;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Stock urgency badge (top-right of product image) */
.stock-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line-strong);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.product-detail-visual .stock-badge {
  font-size: 13px;
}

.stock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  animation: stock-pulse 1.8s ease-in-out infinite;
}

.stock-low .stock-dot { background: var(--danger); box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.18); }
.stock-low { color: var(--danger); }

.stock-fast .stock-dot { background: var(--blue-500); box-shadow: 0 0 0 3px rgba(46, 139, 255, 0.18); }
.stock-fast { color: var(--blue-600); }

.stock-ok .stock-dot { background: var(--green); box-shadow: 0 0 0 3px rgba(0, 184, 148, 0.18); animation: none; }
.stock-ok { color: var(--green); }

.stock-sold {
  color: #64748b;
  background: rgba(241, 245, 249, 0.96);
  border-color: #cbd5e1;
}

.stock-sold .stock-dot {
  background: #94a3b8;
  box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.14);
  animation: none;
}

@keyframes stock-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

.rating-count {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.product-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 16px 4px;
  flex: 1;
  color: inherit;
  text-decoration: none;
}

.product-body:hover {
  color: inherit;
}

.product-body h3 {
  margin: 0;
  font-size: 17px;
  color: var(--text-strong);
}

.product-body h3 a {
  color: inherit;
}

.product-body h3 a:hover {
  color: #ffffff;
  background-image: none;
}

.product-body > p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 39px;
}

.rating-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.rating-row strong {
  color: var(--text-strong);
}

/* SVG-based star rating (Gruns-style, gradient fill, partial last star) */
.stars-svg {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100px;
  height: 20px;
  flex: 0 0 auto;
}

.stars-svg .stars-bg,
.stars-svg .stars-fg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 20px;
  display: block;
}

.stars-svg .stars-bg path {
  fill: #dceaf7;
}

.stars-svg .stars-fg {
  clip-path: inset(0 calc(100% - var(--pct, 0%)) 0 0);
  -webkit-clip-path: inset(0 calc(100% - var(--pct, 0%)) 0 0);
}

/* Bigger stars on product detail page */
.purchase-rating .stars-svg {
  width: 140px;
  height: 28px;
}

.purchase-rating .stars-svg .stars-bg,
.purchase-rating .stars-svg .stars-fg {
  width: 140px;
  height: 28px;
}

/* Hide old text-based stars (kept for backward compat) */
.stars {
  position: relative;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 2px;
  color: var(--blue-100);
  display: none;
}

.card-price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  margin-top: 8px;
  padding-bottom: 0;
}

.card-price strong {
  font-size: 18px;
  color: var(--blue-700);
  font-weight: 800;
  line-height: 1.2;
}

.card-price span {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
}

.card-price small {
  font-size: 11px;
  color: var(--blue-600);
  font-weight: 700;
  line-height: 1.25;
}

.product-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
  margin-bottom: 14px;
  padding: 0 16px !important;
}

.product-actions .btn {
  padding: 10px 8px;
  font-size: 11px;
  letter-spacing: 0.6px;
  min-height: 42px;
  border-radius: 15px;
  line-height: 1.2;
}

/* ============================================================
   Hero product preview / animated scan
   ============================================================ */
.animated-scan::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 0%, rgba(143, 208, 255, 0.18) 50%, transparent 100%);
  background-size: 100% 200%;
  animation: scan 4.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

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

/* ============================================================
   Brand benchmark strip
   ============================================================ */
.brand-benchmark {
  padding: 36px 22px;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(160deg, #f4f9ff 0%, #eaf3ff 100%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.brand-benchmark h2 {
  text-align: center;
  margin: 0 auto 8px;
}

.brand-benchmark .lead {
  text-align: center;
  margin: 0 auto 28px;
  max-width: 70ch;
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.brand-card {
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.brand-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.brand-card .brand-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--blue-700);
  font-weight: 600;
  letter-spacing: 0.3px;
}

.brand-card .brand-name::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--grad-brand);
  box-shadow: 0 0 0 4px rgba(46, 139, 255, 0.10);
}

.brand-card .brand-product {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-strong);
}

.brand-card .brand-note {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}

.brand-card .brand-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--blue-50);
  color: var(--blue-700);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* ============================================================
   SEO/trust panels
   ============================================================ */
.seo-trust-panel {
  padding: 32px;
  border-radius: var(--radius-xl);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.seo-trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.seo-trust-grid article {
  padding: 20px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #ffffff 0%, var(--panel-tint) 100%);
  border: 1px solid var(--line-soft);
  transition: border-color 180ms ease, transform 180ms ease;
}

.seo-trust-grid article:hover {
  border-color: var(--blue-200);
  transform: translateY(-2px);
}

.seo-trust-grid h3 {
  margin: 0 0 6px;
  font-size: 16px;
  color: var(--blue-700);
}

.seo-trust-grid p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
}

/* ============================================================
   Process strip (how to choose)
   ============================================================ */
.process-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.process-strip > div {
  display: grid;
  gap: 8px;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.process-strip .step-number {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--grad-cta);
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 6px 14px rgba(46, 139, 255, 0.28);
  margin-bottom: 4px;
}

.process-strip strong {
  display: block;
  color: var(--text-strong);
  font-size: 16px;
  font-weight: 800;
}

.process-strip span {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.65;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.faq-item {
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: border-color 180ms ease;
}

.faq-item[open] {
  border-color: var(--blue-300);
  box-shadow: var(--shadow-md);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-strong);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  font-size: 20px;
  font-weight: 600;
  color: var(--blue-500);
  transition: transform 200ms ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.seo-trust-panel .faq-item summary::after {
  flex: 0 0 auto;
  font-size: 29px;
  line-height: 1;
}

.faq-item p {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
}

/* ============================================================
   Disclaimer panel
   ============================================================ */
.disclaimer-panel {
  padding: 22px 26px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--blue-50) 0%, #ffffff 100%);
  border: 1px solid var(--blue-100);
  box-shadow: var(--shadow-sm);
}

.disclaimer-panel strong {
  display: block;
  margin-bottom: 6px;
  color: var(--blue-700);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.disclaimer-panel p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.65;
}

/* ============================================================
   Page hero (non-home)
   ============================================================ */
.page-hero {
  padding-top: 38px;
  padding-bottom: 8px;
}

.slim-page {
  max-width: none;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 14px;
}

.shop-title-mobile,
.comparison-title-mobile {
  display: none;
}

.breadcrumb a {
  color: var(--blue-600);
}

.breadcrumb span {
  color: var(--muted-soft);
}

/* ============================================================
   Shop tools
   ============================================================ */
.shop-tools {
  position: relative;
  z-index: 40;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}

.shop-search-autocomplete {
  flex: 1 1 420px;
  min-width: 240px;
}

.shop-search-autocomplete .search-field {
  width: 100%;
  min-width: 0;
}

.shop-cart-button {
  flex: 0 0 auto;
  min-height: 44px;
  height: 44px;
  border-color: transparent;
  border-radius: var(--radius);
  background: var(--grad-cta) !important;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  box-shadow: var(--shadow-blue);
}

.shop-cart-button .shop-cart-svg {
  width: 22px;
  height: 22px;
  color: #ffffff;
  filter: brightness(0) invert(1);
}

.shop-cart-button .shop-cart-svg::before {
  background: #ffffff;
}

.shop-cart-label {
  font-size: 13px;
}

.shop-cart-count {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

.shop-cart-count::before {
  content: "(";
}

.shop-cart-count::after {
  content: ")";
}

.search-field {
  min-width: 240px;
  min-height: 44px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.search-field:focus {
  border-color: var(--blue-400);
  box-shadow: 0 0 0 4px rgba(46, 139, 255, 0.12);
}

/* ============================================================
   Product detail
   ============================================================ */
.product-detail-section {
  padding-top: 36px;
}

.product-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.product-page > *,
.product-gallery,
.purchase-panel {
  min-width: 0;
}

.product-gallery {
  display: grid;
  gap: 18px;
  position: sticky;
  top: 96px;
}

.product-detail-visual {
  aspect-ratio: 1 / 1;
  padding: 0px;
  min-height: 0;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-detail-visual .packshot img {
  max-height: 1080px;
  width: auto;
}

.product-detail-visual .packshot {
  padding: 8.64px;
}

.product-detail-visual .packshot-media,
.product-detail-visual .packshot-image {
  border-radius: 18px;
}

.product-detail-visual .packshot-media {
  overflow: hidden;
  border: 0;
  background: #ffffff;
  box-shadow: none;
}

.purchase-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  border-radius: var(--radius-xl);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}

.purchase-panel h1 {
  font-size: 32px;
  margin-bottom: 6px;
}

.purchase-panel .eyebrow {
  margin-bottom: 0;
}

.purchase-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--panel-tint);
  border: 1px solid var(--line-soft);
  font-size: 13px;
  color: var(--muted);
}

.purchase-rating strong {
  color: var(--text-strong);
  font-size: 15px;
}

/* Gruns-style gift banner: dashed border, rotating spoon icon, no side lines */
.gift-offer-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: 9px;
  background: linear-gradient(135deg, #f4f9ff 0%, #ffffff 50%, #eaf3ff 100%);
  border: 1.5px dashed var(--blue-400);
  color: var(--blue-700);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 4px 14px rgba(46, 139, 255, 0.08);
  overflow: hidden;
}

.gift-text-mobile { display: none; }

.gift-offer-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(143, 208, 255, 0.18), transparent);
  transform: translateX(-100%);
  animation: gift-shimmer 3.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes gift-shimmer {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}

.gift-offer-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 17px;
  animation: gift-spoon-rotate 3.6s ease-in-out infinite;
  transform-origin: 50% 55%;
  filter: drop-shadow(0 2px 4px rgba(46, 139, 255, 0.25));
}

@keyframes gift-spoon-rotate {
  0%, 100% { transform: rotate(-12deg); }
  25% { transform: rotate(8deg); }
  50% { transform: rotate(18deg); }
  75% { transform: rotate(-4deg); }
}

/* Side decorative dashes (kept subtle, like Gruns) */
.gift-offer-line {
  display: none;
}

.compound-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.compound-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text);
  line-height: 1.35;
  min-width: 0;
}

.compound-benefits li span:last-child {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.benefit-check {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--grad-icon);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(46, 139, 255, 0.24);
}

.purchase-subhead {
  margin: 6px 0 8px;
  font-size: 12px;
  color: var(--blue-700);
  letter-spacing: 1.2px;
  font-weight: 800;
  text-transform: uppercase;
}

.size-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.size-picker button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 2px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel);
  text-align: left;
  transition: all 160ms ease;
  min-width: 0;
}

.size-picker button:hover {
  border-color: var(--blue-300);
  background: var(--blue-50);
}

.size-picker button.active {
  border-color: var(--blue-500);
  background: var(--blue-50);
  box-shadow: none;
}

.choice-radio {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  display: grid;
  place-items: center;
  position: relative;
  flex: 0 0 18px;
  box-sizing: border-box;
  line-height: 0;
}

.size-picker button.active .choice-radio {
  border-color: var(--blue-500);
  background: radial-gradient(circle at 50% 50%, var(--blue-500) 0 4.5px, #ffffff 4.75px 100%);
}

.size-picker button.active .choice-radio::after {
  content: none;
}

.choice-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: left;
}

.choice-copy strong {
  font-size: 14px;
  color: var(--text-strong);
}

.choice-copy span {
  font-size: 12px;
  color: var(--blue-600);
  font-weight: 700;
}

.choice-meta {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  white-space: nowrap;
}

.choice-meta del {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  color: var(--muted-soft);
  font-size: 11px;
  font-weight: 500;
  position: relative;
  text-decoration: none;
}

.choice-meta del::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: calc(50% - 0.5px);
  height: 1.5px;
  background: currentColor;
  transform: translateY(-50%);
  pointer-events: none;
}

.ingredient-breakdown {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
  gap: 0;
  margin: 18px 0 22px;
  padding: 0;
  border-top: 1px solid var(--line-soft);
}

.ingredient-line {
  display: block;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

.ingredient-breakdown strong {
  color: var(--blue-700);
  font-size: 14px;
  margin-right: 7px;
}

.ingredient-breakdown span {
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 560px) {
  .ingredient-breakdown {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
}

.supply-note {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 3.27px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
}

.supply-note strong {
  color: var(--blue-700);
  font-size: 13px;
}

.supply-note span {
  font-size: 12px;
  color: var(--muted);
}

.selected-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  padding: 14px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--blue-50) 0%, #ffffff 100%);
  border: 1px solid var(--blue-100);
}

.selected-price span {
  font-size: 12px;
  color: var(--muted);
}

.selected-price strong {
  font-size: 26px;
  color: var(--blue-700);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.selected-price-values {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.selected-price-values del {
  color: var(--muted-soft);
  font-size: 21px;
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  position: relative;
  text-decoration: none;
}

.selected-price-values del::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  /* Inter's euro glyph sits optically above the line box midpoint. */
  top: calc(50% - 1px);
  height: 2px;
  background: currentColor;
  transform: translateY(-50%);
  pointer-events: none;
}

.selected-price small {
  font-size: 13px;
  color: var(--muted-soft);
}

.button-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* In cart context, both buttons share equal min-height for visual balance */
.button-row .btn,
.cart .btn,
.checkout-grid .btn {
  min-height: 48px;
  padding: 12px 18px;
  font-size: 12px;
  letter-spacing: 0.8px;
}

.button-row.purchase-actions .btn {
  border-radius: 15px;
}

/* Crypto discount gradient text */
.crypto-discount {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 800;
  margin-left: 6px;
  letter-spacing: 0.4px;
}

.summary-row.crypto-discount-row {
  padding: 6px 0;
  font-size: 13.5px;
}

.summary-row.crypto-discount-row span {
  color: var(--blue-600);
  font-weight: 700;
}

.summary-row.crypto-discount-row strong {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 800;
}

.payment-option .crypto-discount {
  display: inline;
  font-size: inherit;
  margin: 0;
  line-height: inherit;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--blue-600);
  font-weight: 800;
}

.limited-note {
  font-size: 12px;
  color: var(--muted-soft);
  font-style: italic;
}

/* Guarantee row — conversion booster */
.guarantee-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--green-soft) 0%, #ffffff 100%);
  border: 1px solid rgba(0, 184, 148, 0.25);
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.55;
}

.guarantee-row .trust-check,
.guarantee-row .guarantee-check {
  flex: 0 0 auto;
  margin-top: 1px;
  width: 22px;
  height: 22px;
  font-size: 18px;
  color: var(--green);
}

.guarantee-row strong {
  color: var(--green);
  font-weight: 800;
}

.product-trust-list {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.product-trust-list span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.product-trust-list .trust-svg {
  width: 22px;
  height: 22px;
  min-width: 22px;
}

.proof-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 18px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #ffffff 0%, var(--panel-tint) 100%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.proof-row > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--blue-700);
  text-transform: uppercase;
  line-height: 1.3;
}

.proof-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--grad-icon);
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(46, 139, 255, 0.28);
  flex: 0 0 auto;
  margin: 0 auto;
}

.proof-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Keep product proof icons white; .proof-row span otherwise wins on specificity. */
.proof-row .proof-icon,
.proof-row .proof-icon svg {
  color: #ffffff;
  stroke: #ffffff;
}

/* ============================================================
   Paper section
   ============================================================ */
.paper-section {
  padding: 22px;
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.paper-section h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  margin: 0 0 6px;
}

.paper-section p {
  font-size: 13px;
  margin: 0 0 12px;
}

.paper-grid {
  display: grid;
  gap: 10px;
}

.proof-evidence-mobile {
  display: none;
}

.paper-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--panel-tint);
  border: 1px solid var(--line-soft);
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease;
}

.paper-card:hover {
  border-color: var(--blue-300);
  transform: translateX(2px);
}

.paper-card strong {
  font-size: 14px;
  color: var(--text-strong);
  font-weight: 700;
}

.paper-card span {
  font-size: 12px;
  color: var(--blue-600);
}

/* ============================================================
   Product info grid (description + disclaimer)
   ============================================================ */
.product-info-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 24px;
  margin-top: 36px;
}

.product-description-panel {
  padding: 28px;
  border-radius: var(--radius-xl);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.product-description-title-mobile {
  display: none;
}

.detail-list {
  list-style: none;
  margin: 14px 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.detail-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
}

.detail-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-brand);
}

.spec-table {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "name supply"
    "active net"
    "category testing";
  gap: 14px 22px;
  margin-top: 20px;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--panel-tint);
  border: 1px solid var(--line-soft);
}

.storage-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 22px;
  padding: 12px 14px;
  border: 1px solid var(--blue-100);
  border-radius: var(--radius);
  background: var(--blue-50);
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
}

.storage-notice > span:first-child {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1.2;
}

.supplement-facts-title {
  margin: 20px 0 0;
  color: var(--text-strong);
  font-size: 20px;
}

.spec-table .spec-row {
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 2px;
}

.spec-name { grid-area: name; }
.spec-active { grid-area: active; }
.spec-supply { grid-area: supply; }
.spec-net { grid-area: net; }
.spec-category { grid-area: category; }
.spec-testing { grid-area: testing; }

.spec-table strong {
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.spec-table span {
  font-size: 14px;
  color: var(--text-strong);
  font-weight: 600;
}

.product-disclaimer-card {
  padding: 24px;
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, #ffffff 0%, var(--panel-tint) 100%);
  border: 1px solid var(--blue-100);
  box-shadow: var(--shadow-sm);
}

.product-disclaimer-card h2 {
  font-size: 18px;
  margin: 0 0 10px;
  color: var(--blue-700);
}

.product-disclaimer-card p {
  font-size: 13px;
  margin: 0 0 10px;
}

/* ============================================================
   Cart
   ============================================================ */
.checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(360px, 1fr);
  gap: 24px;
  align-items: start;
}

.checkout-summary-panel {
  position: sticky;
  top: 96px;
  min-height: 100%;
}

.checkout-summary-panel .summary-row.total strong {
  font-size: 22px;
}

.cart-summary-panel .checkout-item-actions {
  display: none;
}

.cart-list {
  display: grid;
  gap: 14px;
}

.cart-item {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--panel-tint);
  border: 1px solid var(--line-soft);
}

.cart-thumb {
  width: 88px;
  height: 88px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, #f4f9ff 0%, #dceaf7 100%);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.cart-thumb .packshot {
  padding: 4px;
}

.cart-thumb .packshot img {
  max-height: 80px;
}

.cart-thumb .pack-label {
  display: none;
}

.cart-item h3 {
  margin: 0 0 4px;
  font-size: 15px;
}

.cart-item p {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--muted);
}

.cart-item strong {
  color: var(--blue-700);
  font-size: 16px;
}

.cart-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.qty-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: var(--panel);
}

.qty-control button {
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--blue-600);
  transition: background 160ms ease;
}

.qty-glyph {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
}

.qty-glyph::before,
.qty-plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.qty-plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.qty-control button:hover {
  background: var(--blue-50);
}

.qty-control > span:not(.qty-glyph) {
  min-width: 32px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-strong);
}

.remove-btn {
  border: none;
  background: transparent;
  color: var(--danger);
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.remove-btn:hover {
  color: #c0392b;
}

.prose h2 {
  margin-bottom: 8px;
}

.prose p {
  margin-bottom: 14px;
}

/* ============================================================
   Checkout summary
   ============================================================ */
.checkout-summary-list {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.checkout-summary-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--panel-tint);
  border: 1px solid var(--line-soft);
}

/* When no thumbnail is shown (checkout summary), use full-width 2-column layout */
.checkout-summary-item.summary-no-thumb {
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
}

.checkout-summary-item.summary-editable .summary-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

.checkout-summary-item.summary-editable .summary-copy strong {
  font-size: 15px;
}

.checkout-summary-item.summary-editable .summary-copy > span {
  font-size: 12.5px;
  color: var(--muted);
}

.checkout-item-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
  width: 100%;
}

.amount-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.summary-thumb {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: linear-gradient(160deg, #f4f9ff 0%, #dceaf7 100%);
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: pointer;
  transition: transform 160ms ease;
}

.summary-thumb:hover {
  transform: scale(1.04);
}

.summary-thumb .packshot {
  padding: 2px;
}

.summary-thumb .packshot img {
  max-height: 60px;
}

.summary-thumb .pack-label {
  display: none;
}

.summary-copy strong {
  display: block;
  font-size: 14px;
  color: var(--text-strong);
}

.summary-copy strong a {
  color: var(--text-strong);
}

.summary-copy strong a:hover {
  color: var(--blue-600);
}

.summary-copy span {
  font-size: 12px;
  color: var(--muted);
}

.checkout-summary-item > b {
  color: var(--blue-700);
  font-size: 15px;
  white-space: nowrap;
}

.summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
  color: var(--muted);
}

.summary-row strong {
  color: var(--text-strong);
}

.summary-row.total {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 16px;
}

.summary-row.total strong {
  color: var(--blue-700);
  font-size: 20px;
  font-weight: 800;
}

.muted {
  color: var(--muted);
  font-size: 12px;
}

/* ============================================================
   Checkout form
   ============================================================ */
.checkout-form h2 {
  font-size: 18px;
  margin: 18px 0 10px;
}

.checkout-form h2:first-child {
  margin-top: 0;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.field {
  display: grid;
  gap: 4px;
}

.field.full {
  grid-column: 1 / -1;
}

.field > span:first-child {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.3px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.country-select-shell {
  position: relative;
  display: block;
}

.field select.country-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px !important;
  background-image: none !important;
}

.country-select-arrow {
  position: absolute;
  top: 50%;
  right: 9px;
  width: 16px;
  height: 16px;
  pointer-events: none;
  transform: translateY(-50%);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--blue-400);
  box-shadow: 0 0 0 3px rgba(46, 139, 255, 0.14);
}

.field textarea {
  min-height: 110px;
  resize: vertical;
}

.payment-note {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 10px;
}

.payment-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
  padding: 1px;
}

.payment-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  cursor: pointer;
  transition: all 160ms ease;
  min-height: 56px;
  min-width: 0;
  overflow: visible;
}

.payment-option:hover {
  border-color: var(--blue-300);
  background: var(--blue-50);
}

.payment-option input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  flex: 0 0 auto;
  margin: 0;
  box-shadow: inset 0 0 0 1px var(--blue-300);
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.payment-option input:checked {
  background:
    radial-gradient(circle at center, #ffffff 0 27%, transparent 29%),
    var(--grad-cta);
  box-shadow: none;
}

.payment-option-label {
  font-weight: 700;
  color: var(--text);
  font-size: 14px;
  line-height: 1.2;
  min-width: 0;
}

.payment-option:has(input:checked) {
  border-color: var(--blue-500);
  background: var(--blue-50);
  box-shadow: inset 0 0 0 2px rgba(46, 139, 255, 0.12);
}

.payment-option input:checked + .payment-option-label {
  color: var(--text);
  font-weight: 800;
}

.payment-panel {
  position: relative;
  margin-top: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.payment-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--blue-200);
  background: #dceeff;
  box-shadow: none;
  min-height: 56px;
}

.payment-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #ffffff 0 27%, transparent 29%),
    var(--grad-cta);
  flex: 0 0 auto;
}

.payment-card-head strong {
  color: var(--text-strong);
  font-size: 14px;
  font-weight: 900;
}

.card-brands {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  flex: 0 0 auto;
}

.card-brands img {
  width: auto;
  height: 19px;
  max-width: 42px;
  display: block;
  object-fit: contain;
}

.crypto-brand-icons {
  gap: 6px;
}

.crypto-brand-icons img {
  width: 19px;
  height: 19px;
}

.card-brands span {
  padding: 4px 7px;
  border-radius: 4px;
  background: var(--panel);
  border: 1px solid var(--line);
  font-weight: 800;
  color: var(--text-strong);
  font-size: 10px;
}

.card-entry-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.card-input-shell {
  display: grid;
  gap: 4px;
}

.card-input-shell.card-number {
  grid-column: 1 / -1;
}

.card-input-shell span {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
}

.card-input-shell input,
.card-input-shell select {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
}

.payment-panel-icons {
  align-self: center;
  justify-content: flex-end;
  justify-self: end;
  margin: 0;
}

.payment-panel-icons img {
  width: auto;
  height: 19px;
  max-width: 42px;
  object-fit: contain;
}

.payment-panel-icons .card-more {
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
}

.hosted-payment-note {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 1px solid var(--blue-500);
  border-radius: 12px;
  background: var(--blue-50);
  overflow: hidden;
}

.hosted-payment-copy,
.payment-note-copy {
  display: grid;
  gap: 5px;
  padding: 14px 18px;
  background: transparent;
}

.hosted-payment-copy strong,
.hosted-payment-note > strong {
  display: inline-flex;
  align-items: center;
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 900;
}

.hosted-payment-copy span,
.payment-note-copy span,
.provider-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.provider-note {
  margin: 0;
}

.purchase-submit {
  border-radius: var(--button-radius);
  overflow: hidden;
  isolation: isolate;
}

.purchase-submit:not(:disabled)::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -70%;
  width: 26%;
  height: 220%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.18) 35%, rgba(255, 255, 255, 0.58) 50%, rgba(255, 255, 255, 0.18) 65%, transparent 100%);
  transform: rotate(33deg);
  animation: checkout-shine 3.3s ease-in-out infinite;
  z-index: 1;
}

@keyframes checkout-shine {
  0%, 52% {
    left: -70%;
    opacity: 0;
  }
  62% {
    opacity: 1;
  }
  100% {
    left: 128%;
    opacity: 0;
  }
}

.checkout-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0;
  font-size: 13px;
  color: var(--muted);
}

.checkout-consent input {
  margin-top: 3px;
  accent-color: var(--blue-500);
}

.checkout-consent a {
  color: var(--blue-600);
  text-decoration: underline;
}

.purchase-submit {
  margin-top: 6px;
}

.notice {
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--blue-50);
  color: var(--blue-700);
  font-size: 13px;
  font-weight: 600;
}

.notice.success {
  background: var(--green-soft);
  color: var(--green);
}

/* ============================================================
   Text/policy pages — single continuous document (Gruns-style)
   ============================================================ */
.policy-grid,
.resource-grid,
.contact-grid,
.faq-page-grid {
  display: grid;
  gap: 16px;
}

/* All policy/resource/about/quality/etc pages = ONE document panel */
.policy-grid,
.resource-grid {
  grid-template-columns: 1fr;
}

/* Contact page keeps 2 columns (info + form) */
.contact-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}

.faq-page-grid {
  grid-template-columns: 1fr;
}

.policy-grid article,
.resource-grid article,
.contact-grid article,
.faq-page-panel {
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

/* Make all policy/resource articles look like one continuous document
   by merging them into a single visual panel (no per-card borders) */
.policy-grid article,
.resource-grid article {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.policy-grid,
.resource-grid {
  /* The wrapper itself becomes the single document panel */
  padding: 36px 40px;
  border-radius: var(--radius-xl);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}

.policy-grid article,
.resource-grid article {
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
}

.policy-grid article:last-child,
.resource-grid article:last-child {
  border-bottom: none;
}

.policy-grid article h2,
.resource-grid article h2,
.contact-grid article h2,
.faq-page-panel h2 {
  font-size: 18px;
  margin: 0 0 10px;
  color: var(--blue-700);
  font-weight: 800;
}

.policy-grid article p,
.resource-grid article p,
.contact-grid article p {
  font-size: 14px;
  color: var(--text);
  line-height: 1.75;
  margin: 0;
}

/* Legal pages use a conventional document layout instead of content cards. */
.legal-page {
  min-height: 70vh;
  padding: 34px 24px 84px;
  background: transparent;
  border-top: 1px solid var(--line-soft);
}

.legal-page.information-page {
  background: transparent;
}

.legal-shell {
  width: min(1120px, 100%);
  margin: 0 auto;
}

.legal-breadcrumb {
  margin-bottom: 36px;
  font-size: 13px;
}

.legal-header {
  max-width: 820px;
  padding-bottom: 38px;
  border-bottom: 1px solid var(--line);
}

.legal-kicker {
  margin: 0 0 12px;
  color: var(--blue-600);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.legal-header h1 {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1.08;
  letter-spacing: 0;
}

.legal-effective {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.legal-intro {
  margin: 22px 0 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.7;
}

.legal-notice {
  margin: 24px 0 0;
  padding: 15px 18px;
  border-left: 3px solid var(--blue-500);
  background: var(--blue-50);
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.65;
}

.legal-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 760px);
  gap: 64px;
  align-items: start;
  margin-top: 42px;
}

.legal-toc {
  position: sticky;
  top: 112px;
  padding-left: 18px;
  border-left: 2px solid var(--line);
}

.legal-toc summary {
  display: block;
  margin-bottom: 12px;
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  cursor: default;
  list-style: none;
}

.legal-toc summary::-webkit-details-marker {
  display: none;
}

.legal-toc nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.legal-toc a {
  display: block;
  padding: 6px 10px 6px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}

.legal-toc a:hover,
.legal-toc a:focus-visible {
  color: var(--blue-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-document {
  min-width: 0;
}

.legal-section {
  scroll-margin-top: 110px;
  padding: 0 0 30px;
  border-bottom: 1px solid var(--line-soft);
}

.legal-section + .legal-section {
  padding-top: 30px;
}

.legal-section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.legal-section h2 {
  margin: 0 0 12px;
  color: var(--text-strong);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.35;
}

.legal-section p {
  margin: 0;
  color: #324d6b;
  font-size: 15px;
  line-height: 1.78;
}

@media (max-width: 1024px) {
  .legal-page {
    padding: 26px 20px 64px;
  }

  .legal-breadcrumb {
    margin-bottom: 28px;
  }

  .legal-header {
    max-width: none;
    padding-bottom: 30px;
  }

  .legal-header h1 {
    font-size: 38px;
  }

  .legal-layout {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 32px;
  }

  .legal-toc {
    position: static;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg-soft);
  }

  .legal-toc summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    cursor: pointer;
  }

  .legal-toc summary::after {
    color: var(--blue-600);
    content: "+";
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
  }

  .legal-toc[open] summary {
    margin-bottom: 12px;
  }

  .legal-toc[open] summary::after {
    content: "\2212";
  }

  .legal-toc nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 18px;
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 560px) {
  .legal-page {
    padding: 22px 16px 52px;
  }

  .legal-header h1 {
    font-size: 33px;
  }

  .legal-intro {
    font-size: 15px;
  }

  .legal-toc nav {
    grid-template-columns: 1fr;
  }

  .legal-section,
  .legal-section + .legal-section {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .legal-section:first-child {
    padding-top: 0;
  }

  .legal-section h2 {
    font-size: 18px;
  }

  .legal-section p {
    font-size: 14px;
    line-height: 1.72;
  }
}

.contact-form-compact {
  margin-top: 16px;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.contact-form-compact h2 {
  font-size: 18px;
  margin: 0 0 16px;
  color: var(--blue-700);
  font-weight: 800;
}

.contact-form-compact .btn {
  margin-top: 18px;
  min-height: 48px;
  padding: 12px 22px;
}

.contact-form-compact .field {
  margin-bottom: 4px;
}

/* Contact info panel — proper padding */
.contact-grid article {
  padding: 28px;
}

.home-guide-section {
  scroll-margin-top: 24px;
}

/* Product standards comparison */
/* On the product page, the comparison box should match the width of the
   product-info-grid above it (full width of the product-detail-section). */
.comparison-section-product {
  padding-left: 0;
  padding-right: 0;
  padding-top: 16px;
  padding-bottom: 16px;
}

.comparison-section-product .comparison-box {
  margin-top: 0;
}

.comparison-box {
  padding: 32px;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(160deg, #f4f9ff 0%, #ffffff 100%);
  border: 1px solid var(--blue-200);
  box-shadow: var(--shadow-md);
  margin-top: 28px;
}

.comparison-box h2,
.comparison-box .comparison-title {
  text-align: center;
  margin: 0 0 8px;
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 900;
  color: var(--text-strong);
  letter-spacing: -0.5px;
}

.comparison-box .comparison-sub {
  text-align: center;
  margin: 0 auto 24px;
  font-size: 15px;
  color: var(--muted);
  max-width: 70ch;
  line-height: 1.6;
}

.comparison-table {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}

.comparison-table-scroll {
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
}

.comparison-table > div {
  padding: 14px 16px;
  background: var(--panel);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
}

.comparison-table > div.ct-head {
  background: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-600) 100%);
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 12px;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.comparison-table > div.ct-head.dynabind-head {
  background: var(--grad-cta);
  color: #ffffff;
}

.comparison-table > div.ct-row-label {
  background: var(--panel-tint);
  font-weight: 700;
  color: var(--text-strong);
}

.comparison-table > div.ct-dynabind {
  background: linear-gradient(135deg, rgba(143, 208, 255, 0.18) 0%, rgba(46, 139, 255, 0.08) 100%);
  font-weight: 700;
  color: var(--blue-700);
}

/* iOS-style checkmark/cross icons — inline, left of text */
.comparison-table .ct-icon {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1.4;
  width: 20px;
  text-align: center;
}

.comparison-table .ct-yes {
  color: var(--green);
  font-size: 21px;
  line-height: 1;
}

.comparison-table .ct-no {
  color: var(--danger);
}

/* Legacy classes (kept for backward compat, no longer used) */
.comparison-table .check {
  color: var(--green);
  font-weight: 800;
  font-size: 16px;
}

.comparison-table .cross {
  color: var(--muted-soft);
  font-weight: 800;
  font-size: 16px;
}

.comparison-foot {
  margin-top: 20px;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--blue-50);
  border: 1px dashed var(--blue-300);
  font-size: 13.5px;
  color: var(--blue-700);
  line-height: 1.6;
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  margin-top: 60px;
  border-top: 1px solid var(--line);
  background:
    linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 100%);
  padding: 50px 22px 28px;
}

.footer-grid {
  width: min(100%, var(--max));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 36px;
}

.footer-grid .footer-brand {
  display: inline-grid;
  grid-template-columns: 38px minmax(0, auto);
  align-items: center;
  column-gap: 10px;
  padding: 0;
  margin-bottom: 14px;
}

.footer-brand img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.footer-brand > span {
  display: grid;
  align-content: center;
  min-width: 0;
}

.footer-brand strong {
  font-size: 16px;
  color: var(--text-strong);
}

.footer-brand small {
  font-size: 11px;
  color: var(--muted);
}

.footer-grid p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.65;
  max-width: 38ch;
}

.footer-grid h2 {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--blue-700);
  margin: 0 0 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 800;
}

.footer-grid a {
  display: block;
  padding: 4px 0;
  font-size: 13px;
  color: var(--text);
  transition: color 160ms ease;
}

.footer-grid a:hover {
  color: var(--blue-600);
}

.footer-bottom {
  width: min(100%, var(--max));
  margin: 30px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 8px;
}

.footer-fda {
  font-size: 11px;
  color: var(--muted-soft);
  line-height: 1.55;
  max-width: 90ch;
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: var(--muted);
}

.footer-meta a {
  color: var(--blue-600);
}

/* ============================================================
   Science section (full-width blue gradient, Gruns third_party_science style)
   ============================================================ */
.science-section {
  width: auto;
  margin-left: 0;
  padding: 56px 22px;
  background:
    linear-gradient(90deg, #1a6fe0 0%, #2e8bff 48%, #5baeff 100%),
    #1a6fe0;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.28), 0 12px 30px rgba(0, 116, 255, 0.18);
  color: #ffffff;
}

.science-section-inner {
  width: min(100%, var(--max));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

.science-copy h2 {
  color: #ffffff;
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 900;
  margin: 0 0 12px;
  line-height: 1.1;
}

.science-copy p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 16px;
  line-height: 1.65;
  max-width: 50ch;
  margin: 0;
}

.science-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.science-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.science-feature img {
  width: 87px;
  height: 87px;
  filter: brightness(0) invert(1);
  color: #ffffff;
  drop-shadow(0 4px 12px rgba(255, 255, 255, 0.25));
}

.science-feature strong {
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .science-section-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .science-features {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .science-feature svg {
    width: 36px;
    height: 36px;
  }
  .science-feature strong {
    font-size: 10px;
  }
}

/* ============================================================
   Mailing list section
   ============================================================ */
.mailing-list-section {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mailing-list-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  padding: 36px 40px;
  border-radius: var(--radius-xl);
  background: var(--grad-cta);
  border: 1px solid var(--blue-200);
  box-shadow: var(--shadow-md);
}

.mailing-list-box,
.mailing-list-copy h2,
.mailing-list-copy p {
  color: #ffffff;
}

.mailing-list-copy h2 {
  font-size: clamp(22px, 2.6vw, 28px);
  margin: 0 0 8px;
}

.mailing-list-copy p {
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0;
}

.mailing-list-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.mailing-list-form input {
  flex: 1;
  min-width: 200px;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--blue-200);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--blue-50) 0%, #ffffff 100%);
  color: var(--text);
  outline: none;
  font-size: 14px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.mailing-list-form input::placeholder {
  color: rgba(57, 82, 116, 0.82) !important;
  opacity: 1;
}

.mailing-list-form input:focus {
  border-color: var(--blue-400);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(46, 139, 255, 0.14);
}

.mailing-list-form .btn {
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 999px;
  background: #ffffff !important;
  color: var(--blue-700);
  -webkit-text-fill-color: var(--blue-700);
  box-shadow: 0 10px 24px rgba(6, 26, 48, 0.14);
}

@media (max-width: 768px) {
  .mailing-list-box {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 28px 24px;
  }

  .mailing-list-copy {
    width: 100%;
    max-width: 430px;
    margin-inline: auto;
    text-align: center;
  }

  .mailing-list-form {
    width: 100%;
    max-width: 430px;
    margin-inline: auto;
    align-items: center;
  }

  .mailing-list-form input {
    width: 100%;
    margin-inline: auto;
    text-align: center;
  }
}
.cookie-panel {
  position: fixed;
  bottom: 22px;
  left: 22px;
  z-index: 60;
  width: 380px;
  max-width: calc(100vw - 44px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: 1px solid var(--blue-200);
  box-shadow: var(--shadow-lg);
}

.cookie-panel strong {
  display: block;
  font-size: 15px;
  color: var(--text-strong);
  margin-bottom: 6px;
  font-weight: 800;
}

.cookie-panel p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

.cookie-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cookie-actions .btn {
  flex: 1;
  min-height: 40px;
}

.cookie-panel.success {
  background: linear-gradient(135deg, var(--green-soft) 0%, #ffffff 100%);
  border-color: var(--green);
}

.cookie-panel.success p {
  color: var(--green);
  font-weight: 700;
  font-size: 13px;
}

/* ============================================================
   WhatsApp sticky
   ============================================================ */
.whatsapp-sticky {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 50;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--grad-cta);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 26px rgba(46, 139, 255, 0.34);
  transition: transform 180ms ease;
  visibility: visible;
}

.whatsapp-sticky:hover {
  transform: scale(1.06);
}

.whatsapp-sticky svg {
  width: 34px;
  height: 34px;
  fill: #ffffff;
}

/* ============================================================
   Reveal animation
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Noscript
   ============================================================ */
.noscript-content {
  max-width: 720px;
  margin: 60px auto;
  padding: 30px;
  text-align: center;
  color: var(--text);
}

.noscript-content h1 {
  color: var(--text-strong);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 32px;
    min-height: auto;
    padding-top: 32px;
  }

  .hero-product-image {
    width: 100%;
    max-width: 100%;
  }

  .product-page {
    grid-template-columns: 1fr;
  }

  .product-gallery {
    position: static;
  }

  .checkout-grid {
    grid-template-columns: 1fr;
  }

.product-info-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .policy-grid,
  .resource-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

.mobile-product-paper-section {
  display: none;
}

/* Keep the complete purchase path visible on shorter laptop and desktop screens. */
@media (min-width: 961px) and (max-height: 900px) {
  .top-offer-bar {
    min-height: 30px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 0.7rem;
  }

  .navbar {
    gap: 18px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .brand {
    gap: 9px;
  }

  .brand img {
    width: 40px;
    height: 40px;
  }

  .brand strong {
    font-size: 17px;
  }

  .brand small {
    margin-top: 2px;
    font-size: 9px;
  }

  .nav-links a {
    padding: 7px 10px;
    font-size: 12px;
  }

  .cart-pill {
    min-width: 104px;
    gap: 7px;
    padding: 8px 13px;
  }

  .cart-svg {
    width: 20px;
    height: 20px;
  }

  .cart-pill [data-cart-count] {
    min-width: 20px;
    min-height: 20px;
  }

  .header-search {
    gap: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .header-search input,
  .header-search .btn {
    min-height: 40px;
  }

  .header-search input {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .header-search .btn {
    padding: 9px 24px;
  }

  .product-detail-section {
    padding-top: 20px;
  }

  .product-page {
    gap: 24px;
  }

  .product-gallery {
    gap: 12px;
    top: 80px;
  }

  .purchase-panel {
    gap: 8px;
    padding: 20px 22px;
  }

  .gift-offer-banner {
    gap: 7px;
    padding: 6px 14px;
    font-size: 12.5px;
  }

  .gift-offer-emoji {
    width: 18px;
    height: 18px;
    font-size: 15px;
  }

  .purchase-rating {
    gap: 7px;
    padding: 7px 11px;
    font-size: 12px;
  }

  .purchase-rating strong {
    font-size: 14px;
  }

  .purchase-panel h1 {
    margin: 0;
    font-size: 28px;
    line-height: 1.1;
  }

  .purchase-panel .lead {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
  }

  .compound-benefits {
    gap: 5px;
  }

  .compound-benefits li {
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.25;
  }

  .benefit-check {
    width: 16px;
    height: 16px;
    margin-top: 0;
    font-size: 10px;
  }

  .purchase-subhead {
    margin: 1px 0 3px;
    font-size: 11px;
  }

  .size-picker {
    gap: 7px;
  }

  .size-picker button {
    gap: 7px;
    padding: 8px;
  }

  .choice-copy strong {
    font-size: 12.5px;
  }

  .choice-copy span {
    font-size: 11px;
  }

  .supply-note {
    padding: 7px 10px;
  }

  .supply-note strong {
    font-size: 12px;
  }

  .supply-note span {
    font-size: 11px;
  }

  .selected-price {
    padding: 9px 11px;
  }

  .selected-price strong {
    font-size: 22px;
    line-height: 1.05;
  }

  .selected-price small {
    font-size: 11.5px;
  }

  .button-row.purchase-actions .btn {
    min-height: 42px;
    padding: 8px 12px;
  }

  .guarantee-row {
    gap: 8px;
    padding: 9px 11px;
    font-size: 11.5px;
    line-height: 1.4;
  }
}

@media (min-width: 961px) and (max-height: 700px) {
  .top-offer-bar {
    min-height: 26px;
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 0.64rem;
    line-height: 1.2;
  }

  .navbar {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .brand img {
    width: 34px;
    height: 34px;
  }

  .brand strong {
    font-size: 15px;
  }

  .brand small {
    font-size: 8px;
  }

  .nav-links a {
    padding: 6px 9px;
    font-size: 11.5px;
  }

  .cart-pill {
    min-width: 96px;
    padding: 6px 11px;
  }

  .header-search {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .header-search input,
  .header-search .btn {
    min-height: 36px;
  }

  .header-search .btn {
    padding: 7px 22px;
  }

  .product-detail-section {
    padding-top: 12px;
  }

  .purchase-panel {
    gap: 6px;
    padding: 16px 18px;
  }

  .gift-offer-banner {
    padding: 4px 12px;
    font-size: 11.5px;
  }

  .gift-offer-emoji {
    width: 16px;
    height: 16px;
    font-size: 14px;
  }

  .purchase-rating {
    padding: 5px 9px;
    font-size: 11px;
  }

  .purchase-rating strong {
    font-size: 13px;
  }

  .purchase-panel h1 {
    font-size: 25px;
  }

  .purchase-panel .lead {
    font-size: 13px;
    line-height: 1.32;
  }

  .compound-benefits {
    gap: 4px;
  }

  .compound-benefits li {
    font-size: 11.5px;
    line-height: 1.2;
  }

  .benefit-check {
    width: 14px;
    height: 14px;
    font-size: 9px;
  }

  .purchase-subhead {
    margin: 0 0 2px;
    font-size: 10px;
  }

  .size-picker {
    gap: 5px;
  }

  .size-picker button {
    gap: 6px;
    padding: 6px;
  }

  .choice-radio {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    flex-basis: 18px;
  }

  .choice-copy strong {
    font-size: 11.5px;
  }

  .choice-copy span {
    font-size: 10px;
  }

  .supply-note {
    padding: 6px 8px;
  }

  .supply-note strong {
    font-size: 11px;
  }

  .supply-note span {
    font-size: 10.5px;
  }

  .selected-price {
    padding: 7px 9px;
  }

  .selected-price strong {
    font-size: 20px;
  }

  .selected-price small {
    font-size: 10.5px;
  }

  .button-row.purchase-actions .btn {
    min-height: 38px;
    padding: 6px 10px;
  }
}

/* Tablet navigation changes before the six-link desktop menu can collide with the brand. */
@media (min-width: 721px) and (max-width: 960px) {
  .navbar {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    padding: 12px 22px;
  }

  .brand { gap: 10px; }
  .brand img { width: 42px; height: 42px; }
  .brand strong { font-size: 18px; white-space: nowrap; }
  .brand small { font-size: 10px; }

  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 22px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    z-index: 45;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 16px; font-size: 15px; }

  .cart-pill { min-width: auto; padding: 9px 11px; gap: 6px; }
  .cart-label { display: none; }
  .cart-svg { width: 20px; height: 20px; }

  .header-search { width: min(calc(100% - 44px), 900px); }

  .product-page {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-gallery {
    position: static;
  }
}

@media (max-width: 720px) {
  /* ---- Header ---- */
  .site-header {
    position: sticky;
    top: 0;
  }

  .top-offer-bar {
    font-size: clamp(0.63rem, 3.16vw, 0.71rem);
    font-weight: 700;
    letter-spacing: 0;
    padding: 7px 2px;
    min-height: 32px;
    text-align: center;
    justify-content: center;
    align-items: center;
  }
  .top-offer-bar .offer-desktop { display: none; }
  .top-offer-bar .offer-mobile { display: inline-flex; }
  .top-offer-bar .offer-package { font-size: 0.97rem; }

  .navbar {
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: 10px;
    gap: 8px;
  }
  .brand { gap: 8px; overflow: hidden; }
  .brand img { width: 40px; height: 40px; }
  .brand strong { font-size: 15px; white-space: nowrap; }
  .brand small { font-size: 10px; }

  .header-search { display: none; }

  .nav-links {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    padding: 0 12px;
    border-top: 3px solid #d1d5db;
    border-bottom: 1px solid var(--line);
    border-radius: 0 0 18px 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%);
    box-shadow: var(--shadow-md);
    isolation: isolate;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: max-height 280ms ease, padding 280ms ease, opacity 180ms ease, visibility 0s linear 280ms;
    z-index: 45;
  }
  .nav-links.open {
    max-height: 420px;
    padding-top: 8px;
    padding-bottom: 12px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: max-height 280ms ease, padding 280ms ease, opacity 180ms ease, visibility 0s;
  }
  .nav-links a { padding: 14px 16px; border-radius: var(--radius); font-size: 15px; }
  .nav-toggle { display: flex; width: 40px; height: 40px; }
  .cart-pill { min-width: auto; padding: 8px 10px; gap: 6px; }
  .cart-label { display: none; }
  .cart-svg { width: 20px; height: 20px; }

  /* ---- Hero ---- */
  .hero { padding-top: 32px; padding-bottom: 27px; }
  .hero-inner { display: flex; flex-direction: column; gap: 20px; }
  .hero-image-wrap { order: -1; display: flex; flex-direction: column; align-items: center; gap: 9px; }
  .hero-product-image { width: 100%; height: 397px; max-height: 397px; object-fit: contain; }
  .hero-copy { text-align: center; order: 1; }
  .hero-actions { justify-content: center; gap: 10px; }
  .hero-actions .btn { flex: 1; min-height: 51px; height: 51px; max-height: 51px; font-size: 11px; padding: 10px 14px; }
  .hero-feature-boxes { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
  .hero-feature-boxes article { flex-direction: row; align-items: center; text-align: left; gap: 14px; padding: 14px 16px; }
  .hero-feature-boxes .feature-icon { width: 40px; height: 40px; flex: 0 0 auto; }
  .hero-feature-boxes .feature-icon svg { width: 22px; height: 22px; }
  .hero-feature-boxes strong { flex: 0 0 94px; margin-top: 0; font-size: 11px; }
  .hero-feature-boxes span { flex: 1 1 0; min-width: 0; font-size: 12px; }
  .hero-image-wrap { order: -1; }
  .hero-product-image { height: 397px; max-height: 397px; }
  .hero-trust-badges { display: none; }

  /* ---- Sections ---- */
  .section, .hero { padding-left: 16px; padding-right: 16px; padding-top: 32px; padding-bottom: 32px; }
  .section-tight { padding-top: 20px; padding-bottom: 20px; }
  .hero.hero-clean { padding-top: 32px; padding-bottom: 27px; }
  .section.section-tight.product-section { padding-top: 0; padding-bottom: 32px; }
  .section.section-tight.comparison-section { padding-top: 20px; padding-bottom: 0 !important; }
  .page-hero.slim-page { padding-bottom: 0; }

  /* ---- Selector panel ---- */
  .selector-panel { padding: 18px 16px; border-radius: var(--radius-lg); }
  .catalog-head-centered { text-align: left; }
  .filter-row.home-filter-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 20px;
    width: 100%;
  }
  .filter-row.home-filter-row .chip {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 8px 6px;
    text-align: center;
  }
  .filter-row.home-filter-row .chip[data-home-category="Skin"] {
    display: none;
  }
  .chip { padding: 7px 12px; font-size: 12px; }
  .filter-row.home-filter-row .catalog-cta-desktop {
    display: none;
  }
  .catalog-cta-mobile {
    display: flex;
    width: 100%;
    min-height: 44px;
    margin: 18px 0 0;
    font-size: 12px;
  }

  /* ---- Product grid: 2 columns ---- */
  .product-grid, .product-grid-dense { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .product-card { border-radius: var(--radius); }
  .product-visual { aspect-ratio: 1 / 1; }
  .product-visual .packshot img { max-height: 140px; }
  .product-badge { max-width: calc(100% - 16px); font-size: 0; padding: 3px 7px; top: 8px; left: 8px; }
  .product-badge::after { content: attr(data-mobile-label); font-size: 9px; }
  .stock-badge { font-size: 9px; padding: 3px 7px; top: 8px; right: 8px; }
  .stock-dot { width: 6px; height: 6px; }

  .product-body { padding: 10px 10px 2px; gap: 4px; }
  .home-product-grid .product-body {
    padding-right: 10px;
    padding-left: 10px;
  }
  .product-body h3 { font-size: 14px; }
  .product-body > p {
    font-size: 11.5px; line-height: 1.4;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 32px;
  }
  .rating-row { font-size: 12px; gap: 5px; }
  .stars-svg { width: 72px; height: 14px; }
  .stars-svg .stars-bg, .stars-svg .stars-fg { width: 72px; height: 14px; }
  .rating-count { font-size: 10px; }
  .card-price { gap: 2px; margin-top: 4px; padding-bottom: 0; }
  .card-price strong { font-size: 15px; }
  .card-price span { font-size: 10px; }
  .card-price small { font-size: 9.5px; }

  .product-actions {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 6px;
    margin-bottom: 10px;
    padding: 0 10px !important;
  }
  .home-product-grid .product-actions {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }
  .product-actions .btn {
    font-size: 9px;
    padding: 7px 4px;
    min-height: 34px;
    letter-spacing: 0.3px;
    line-height: 1.1;
  }

  /* ---- Comparison ---- */
  .comparison-box { padding: 20px 16px; border-radius: var(--radius-lg); width: 100%; box-sizing: border-box; }
  .comparison-title { font-size: 24px !important; }
  .comparison-sub { font-size: 13px; }
  .comparison-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .comparison-table { display: grid; grid-template-columns: 140px repeat(3, 190px); min-width: 710px; overflow: hidden; width: 100%; }
  .comparison-table > div { padding: 10px 12px; font-size: 12px; white-space: normal; }
  .comparison-table > div.ct-head.dynabind-head { background: var(--grad-cta) !important; color: #ffffff !important; }
  .comparison-foot { font-size: 12px; padding: 12px 14px; white-space: normal; }

  /* ---- Science ---- */
  .science-section { padding: 36px 16px; }
  .science-section-inner { display: flex; flex-direction: column; gap: 24px; text-align: center; align-items: center; }
  .science-copy { order: 2; width: 100%; text-align: center; }
  .science-features { order: 1; width: 100%; }
  .science-copy h2 { font-size: 26px; text-align: center; }
  .science-copy p { font-size: 14px; text-align: center; margin: 0 auto; }
  .science-features { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .science-feature img { width: 67px; height: 67px; filter: brightness(0) invert(1); }
  .science-feature strong { font-size: 9px; line-height: 1.35; letter-spacing: 0.5px; }
  .science-feature-first-line { display: block; }

  /* ---- How to choose ---- */
  .process-strip { grid-template-columns: 1fr; gap: 12px; }
  .process-strip > div { padding: 18px 16px; }
  .step-number { width: 32px; height: 32px; font-size: 14px; }
  .process-strip strong { font-size: 15px; }
  .process-strip span { font-size: 13px; }

  /* ---- FAQ ---- */
  .faq-item { padding: 12px 14px; }
  .faq-item summary { font-size: 14px; }
  .faq-item p { font-size: 13px; }

  /* ---- Mailing list ---- */
  .mailing-list-box { grid-template-columns: 1fr; gap: 18px; padding: 24px 20px; border-radius: var(--radius-lg); }
  .mailing-list-copy h2 { font-size: 22px; }
  .mailing-list-copy p { font-size: 13px; }
  .mailing-list-form { flex-direction: column; }
  .mailing-list-form input { width: 100%; min-height: 48px; border-radius: 12px; }
  .mailing-list-form .btn { width: 100%; border-radius: 999px; }

  /* ---- Disclaimer ---- */
  .disclaimer-panel { padding: 16px 18px; }
  .disclaimer-panel p { font-size: 12px; }

  /* ---- Product detail ---- */
  .product-detail-visual { aspect-ratio: 1 / 1; padding: 0; min-height: auto; border-radius: var(--radius-lg); }
  .product-detail-visual .packshot { width: 100%; height: 100%; padding: 3.97px; }
  .product-detail-visual .packshot-media { display: block; width: 100%; height: 100%; }
  .product-detail-visual .packshot img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
  .purchase-panel { padding: 18px 16px; border-radius: var(--radius-lg); gap: 11px; }
  .purchase-panel h1 { margin: 0; font-size: 26px; line-height: 1.15; }
  .purchase-panel .lead { margin-bottom: 2px; font-size: 15px; }
  .purchase-rating { flex-wrap: nowrap; gap: 6px; padding: 8px 10px; font-size: 11px; white-space: nowrap; }
  .purchase-rating strong { font-size: 13px; }
  .purchase-rating .stars-svg,
  .purchase-rating .stars-svg .stars-bg,
  .purchase-rating .stars-svg .stars-fg { width: 82px; height: 16px; }
  .size-picker { gap: 5px; }
  .size-picker button { gap: 8px; padding: 10px 8px; }
  .size-picker .choice-radio { width: 17px; height: 17px; }
  .choice-copy strong { font-size: 12px; white-space: nowrap; }
  .choice-copy span { font-size: 10px; }
  .supply-note { gap: 3.27px; }
  .selected-price strong { font-size: 22px; }
  .selected-price-values { gap: 7px; }
  .selected-price-values del { font-size: 18px; }
  .button-row { grid-template-columns: 1fr; gap: 8px; }
  .proof-row { gap: 9px; padding: 12px 10px; }
  .proof-icon { width: 36px; height: 36px; border-radius: 10px; }
  .proof-icon svg { width: 18px; height: 18px; }
  .proof-row > span { font-size: 9px; gap: 9px; }
  .proof-evidence-desktop { display: none; }
  .proof-evidence-mobile { display: inline; }
  .spec-table {
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "active"
      "category"
      "supply"
      "net"
      "testing";
    gap: 10px;
    padding: 14px;
  }
  .product-description-title-desktop { display: none; }
  .product-description-title-mobile { display: inline; }
  .product-description-panel .product-description-title {
    margin-bottom: 12px;
    color: #071b30;
    font-weight: 800;
  }

  /* ---- Product page: research papers under purchase panel ---- */
  .product-page { display: flex; flex-direction: column; }
  .product-gallery { order: 1; display: flex; flex-direction: column; }
  .product-gallery .product-detail-visual { order: 1; }
  .product-gallery .proof-row { order: 2; }
  .panel.purchase-panel { order: 3; }
  .desktop-product-paper-section { display: none; }
  .mobile-product-paper-section { display: block; order: 4; }
  .product-info-grid { order: 5; }

  /* ---- Checkout ---- */
  .checkout-grid { display: flex; flex-direction: column; }
  .checkout-grid > .checkout-summary-panel { order: -1; }
  .checkout-grid > .checkout-form { order: 1; }
  .cart-products-panel { display: none; }
  .cart-summary-panel { width: 100%; }
  .cart-summary-panel .checkout-item-actions { display: flex; }
  .checkout-form { padding: 20px 16px; border-radius: var(--radius-lg); }
  .form-grid { grid-template-columns: 1fr; gap: 10px; }
  .card-entry-box { grid-template-columns: 1fr; gap: 8px; padding: 14px; }
  .field input, .field select { min-height: 48px; font-size: 16px; }
  .payment-tabs { grid-template-columns: 1fr; gap: 8px; }
  .payment-option { min-height: 52px; padding: 12px 14px; gap: 10px; }
  .payment-option input { width: 18px; height: 18px; }
  .payment-option-label { font-size: 14px; }
  .payment-option .crypto-discount { font-size: inherit; }
  .card-brands img,
  .crypto-brand-icons img,
  .payment-panel-icons img {
    height: 19px;
  }
  .crypto-brand-icons img {
    width: 19px;
  }
  .payment-panel-icons .card-more {
    min-width: 22px;
    height: 22px;
  }
  .crypto-brand-icons .card-more { font-size: 9px; }
  .checkout-summary-panel { position: static; }
  .checkout-summary-item { padding: 10px 12px; }
  .summary-copy strong { font-size: 13px; }
  .summary-copy span { font-size: 12px; }
  .checkout-summary-item.summary-editable .summary-copy > span { font-size: 12px; }
  .checkout-consent { gap: 7px; }
  .checkout-consent input { margin-top: 5px; }

  /* ---- Cart ---- */
  .cart-item { grid-template-columns: 56px 1fr; gap: 10px; padding: 12px; }
  .cart-thumb { width: 56px; height: 56px; }
  .cart-thumb .packshot img { max-height: 50px; }
  .cart-item h3 { font-size: 14px; }
  .cart-item p { font-size: 11px; }
  .cart-item strong { font-size: 14px; }
  .cart-actions { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 4px; }
  .qty-control { height: 36px; }
  .qty-control button { width: 36px; height: 36px; }

  /* ---- Footer ---- */
  .site-footer { padding: 32px 16px 20px; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-grid > div:first-child { text-align: left; }
  .footer-brand { justify-content: flex-start; }
  .footer-grid h2 { font-size: 11px; margin-bottom: 8px; }
  .footer-grid a { font-size: 13px; padding: 3px 0; }
  .footer-fda { font-size: 10px; }
  .footer-meta { flex-direction: column; gap: 6px; text-align: center; font-size: 11px; }

  /* ---- Cookie panel ---- */
  .cookie-panel { left: 10px; right: 10px; width: auto; max-width: none; padding: 16px 18px; bottom: 14px; }
  .cookie-panel strong { font-size: 14px; }
  .cookie-panel p { font-size: 12px; }

  /* ---- WhatsApp ---- */
  .whatsapp-sticky { width: 48px; height: 48px; bottom: 16px; right: 16px; }
  .whatsapp-sticky svg { width: 31px; height: 31px; }

  /* ---- Buttons ---- */
  .btn { min-height: 44px; font-size: 12px; padding: 10px 16px; line-height: 1.2; }
  .btn-primary { min-height: 44px; }
  .btn-full { width: 100%; }
  .button-row .btn, .purchase-actions .btn { min-height: 42px; font-size: 12.7px; padding: 8px 10px; letter-spacing: 0.5px; }
  .product-card .product-actions .btn { border-radius: 9px; }
  .purchase-actions .btn { border-radius: 15px; }
  .header-search .btn, .catalog-cta { min-height: 44px; }
  .contact-form-compact .btn { width: 100%; min-height: 48px; }

  /* ---- Gift banner ---- */
  .gift-offer-banner { font-size: 13px; font-weight: 500; padding: 7px 14px; gap: 8px; text-align: center; justify-content: center; }
  .gift-offer-emoji { width: 18px; height: 18px; font-size: 15px; }
  .gift-text-desktop { display: none; }
  .gift-text-mobile { display: block; }

  /* ---- Policy/contact pages ---- */
  .policy-grid, .resource-grid { padding: 22px 18px; border-radius: var(--radius-lg); }
  .policy-grid article, .resource-grid article { padding: 14px 0; }
  .policy-grid article h2, .resource-grid article h2 { font-size: 16px; }
  .policy-grid article p, .resource-grid article p { font-size: 13px; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-grid article { padding: 20px 18px; }
  .contact-form-compact { padding: 20px 18px; }

  /* ---- Paper section ---- */
  .paper-section { padding: 16px; }
  .paper-card { padding: 12px 14px; }
  .paper-card strong { font-size: 13px; }
  .paper-card span { font-size: 11px; }

  /* ---- Proof icons white on mobile ---- */
  .proof-icon svg { fill: none; stroke: #ffffff; }

  /* ---- Typography ---- */
  h1 { font-size: clamp(26px, 8vw, 34px); margin-bottom: 14px; }
  h2 { font-size: 22px; }
  h3 { font-size: 17px; }
  .lead { font-size: 15px; }
  .eyebrow { font-size: 11px; letter-spacing: 1px; margin-bottom: 12px; }

  /* ---- Card price on mobile: no padding-bottom ---- */
  .card-price { padding-bottom: 0; }

  /* ---- Comparison section padding-bottom 0 ---- */
  .comparison-section { padding-bottom: 0 !important; }
}

/* ============================================================
   Small mobile (≤380px) — 1 column
   ============================================================ */
@media (max-width: 380px) {
  .product-grid, .product-grid-dense { grid-template-columns: 1fr; }
  .hero-actions .btn { font-size: 11px; }
  .top-offer-bar { font-size: clamp(0.60rem, 3.16vw, 0.71rem); letter-spacing: 0; }
  .brand small { display: none; }
}

@media (max-width: 960px) {
  .nav-links {
    top: calc(100% + 8px);
    right: 10px;
    left: 10px;
    padding: 10px;
    border: 1px solid var(--blue-200);
    border-radius: var(--radius-lg);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 249, 255, 0.94)),
      rgba(255, 255, 255, 0.82);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(24px) saturate(1.6);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
  }
}

/* Keep authored brand gradients unchanged when the device requests dark mode. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: only light;
    --bg: #ffffff;
    --bg-soft: #f6faff;
    --bg-tint: #eef6ff;
    --panel: #ffffff;
    --panel-tint: #f4f9ff;
    --panel-soft: #eaf3ff;
    --line: #dceaf7;
    --line-strong: #b9d4ef;
    --line-soft: #e7f1fb;
    --text: #0a2540;
    --text-strong: #061a30;
    --muted: #5b7290;
    --muted-soft: #8aa0bd;
    --grad-brand: linear-gradient(135deg, #8fd0ff 0%, #2e8bff 55%, #1a6fe0 100%);
    --grad-soft: linear-gradient(135deg, #dceaf7 0%, #f4f9ff 100%);
    --grad-icon: linear-gradient(135deg, #8fd0ff 0%, #2e8bff 100%);
    --grad-icon-strong: linear-gradient(135deg, #5baeff 0%, #1a6fe0 100%);
    --grad-cta: linear-gradient(135deg, #5baeff 0%, #2e8bff 50%, #1a6fe0 100%);
  }

  html,
  body {
    background-color: #ffffff;
    color: var(--text);
  }

  .site-header,
  .panel,
  .selector-panel,
  .product-card,
  .checkout-form,
  .checkout-summary-panel,
  .payment-option,
  .hosted-payment-note,
  .card-input-shell select,
  .field input,
  .field select,
  .field textarea,
  .header-search input {
    background-color: #ffffff;
    color: var(--text);
  }

  .top-offer-bar,
  .btn-primary,
  .chip.active,
  .catalog-cta,
  .header-search .btn,
  .purchase-submit,
  .mailing-list-box,
  .hero-feature-boxes .feature-icon,
  .proof-icon,
  .whatsapp-sticky,
  .comparison-table > div.ct-head.dynabind-head {
    background: var(--grad-cta) !important;
    background-image: var(--grad-cta) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
  }

  .payment-option input:checked,
  .payment-dot {
    background:
      radial-gradient(circle at center, #ffffff 0 27%, transparent 29%),
      var(--grad-cta) !important;
    background-image:
      radial-gradient(circle at center, #ffffff 0 27%, transparent 29%),
      var(--grad-cta) !important;
  }

  .cart-pill {
    background:
      linear-gradient(135deg, rgba(143, 208, 255, 0.22), rgba(46, 139, 255, 0.10) 60%, rgba(91, 174, 255, 0.18)),
      #ffffff !important;
    border-color: var(--blue-200) !important;
    color: var(--text-strong) !important;
  }

  .cart-svg {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232e8bff'%3E%3Cpath d='M5.5875 21.4125C5.19583 21.0208 5 20.55 5 20C5 19.45 5.19583 18.9792 5.5875 18.5875C5.97917 18.1958 6.45 18 7 18C7.55 18 8.02083 18.1958 8.4125 18.5875C8.80417 18.9792 9 19.45 9 20C9 20.55 8.80417 21.0208 8.4125 21.4125C8.02083 21.8042 7.55 22 7 22C6.45 22 5.97917 21.8042 5.5875 21.4125ZM15.5875 21.4125C15.1958 21.0208 15 20.55 15 20C15 19.45 15.1958 18.9792 15.5875 18.5875C15.9792 18.1958 16.45 18 17 18C17.55 18 18.0208 18.1958 18.4125 18.5875C18.8042 18.9792 19 19.45 19 20C19 20.55 18.8042 21.0208 18.4125 21.4125C18.0208 21.8042 17.55 22 17 22C16.45 22 15.9792 21.8042 15.5875 21.4125ZM5.2 4H19.95C20.3333 4 20.625 4.17083 20.825 4.5125C21.025 4.85417 21.0333 5.2 20.85 5.55L17.3 11.95C17.1167 12.2833 16.8708 12.5417 16.5625 12.725C16.2542 12.9083 15.9167 13 15.55 13H8.1L7 15H18C18.2833 15 18.5208 15.0958 18.7125 15.2875C18.9042 15.4792 19 15.7167 19 16C19 16.2833 18.9042 16.5208 18.7125 16.7125C18.5208 16.9042 18.2833 17 18 17H7C6.25 17 5.68333 16.6708 5.3 16.0125C4.91667 15.3542 4.9 14.7 5.25 14.05L6.6 11.6L3 4H2C1.71667 4 1.47917 3.90417 1.2875 3.7125C1.09583 3.52083 1 3.28333 1 3C1 2.71667 1.09583 2.47917 1.2875 2.2875C1.47917 2.09583 1.71667 2 2 2H3.625C3.80833 2 3.98333 2.05 4.15 2.15C4.31667 2.25 4.44167 2.39167 4.525 2.575L5.2 4Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  .crypto-discount,
  .summary-row.crypto-discount-row strong {
    background: var(--grad-brand) !important;
    background-image: var(--grad-brand) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: var(--blue-600) !important;
  }

  .cart-label,
  .cart-pill [data-cart-count] {
    background: var(--grad-brand) !important;
    background-image: var(--grad-brand) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: var(--blue-600) !important;
    -webkit-text-fill-color: transparent !important;
  }

  .cart-pill [data-cart-count] {
    border-color: var(--blue-200) !important;
  }

  .shop-cart-button {
    background: var(--grad-cta) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  .shop-cart-button .shop-cart-svg {
    color: #ffffff !important;
    filter: brightness(0) invert(1) !important;
  }

  .shop-cart-button .shop-cart-svg::before {
    background: #ffffff !important;
  }

  .payment-panel {
    background: transparent !important;
  }

  .hosted-payment-note {
    background: var(--blue-50) !important;
  }

  .payment-card-head {
    background: #dceeff !important;
  }

  .hosted-payment-note {
    border-color: var(--blue-500) !important;
  }

  .payment-card-head {
    border-bottom-color: var(--blue-200) !important;
  }

  .mailing-list-copy h2,
  .mailing-list-copy p {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
  }

  .mailing-list-form .btn {
    background: #ffffff !important;
    color: var(--blue-700) !important;
    -webkit-text-fill-color: var(--blue-700) !important;
  }

  .mailing-list-form input {
    background: linear-gradient(135deg, var(--blue-50) 0%, #ffffff 100%) !important;
    border-color: var(--blue-200) !important;
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
  }

  .mailing-list-form input::placeholder {
    color: rgba(57, 82, 116, 0.82) !important;
    -webkit-text-fill-color: rgba(57, 82, 116, 0.82) !important;
    opacity: 1;
  }
}

@media (max-width: 520px) {
  .size-picker {
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
    margin-inline: auto;
  }

  .size-picker button {
    justify-content: flex-start;
    min-height: auto;
    padding: 12px;
  }

  .size-picker .choice-radio {
    width: 17px;
    height: 17px;
    min-width: 17px;
    min-height: 17px;
    flex-basis: 17px;
  }

  .country-select-arrow {
    width: 16px;
    height: 16px;
    right: 10px;
  }

  .field select.country-select {
    padding-right: 40px !important;
  }

  .choice-copy {
    align-items: flex-start;
    padding: 0;
    text-align: left;
  }

  .choice-copy strong {
    font-size: 13px;
  }

  .choice-copy span {
    font-size: 11px;
  }

  .supply-note {
    grid-template-columns: 1fr;
    gap: 3.27px;
  }

  .ingredient-line {
    line-height: 1.45;
  }
}

/* ============================================================
   Tablet and phone refinements
   ============================================================ */
@media (min-width: 1025px) {
  .product-actions {
    margin-top: 13px;
    margin-bottom: 21px;
    padding-right: 17px !important;
    padding-left: 17px !important;
  }

  .breadcrumb,
  .legal-breadcrumb {
    gap: 9px;
    margin-bottom: 17px;
    font-size: 15px;
  }
}

@media (min-width: 721px) and (max-width: 1024px) {
  .site-header {
    position: sticky;
    top: 0;
  }

  .navbar {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    padding: 11px 22px;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-links {
    display: flex;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    width: 100%;
    max-height: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow: hidden;
    padding: 0 22px;
    border: 0;
    border-top: 3px solid #d1d5db;
    border-bottom: 1px solid var(--line);
    border-radius: 0 0 9px 9px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%);
    box-shadow: 0 16px 24px -14px rgba(10, 37, 64, 0.42);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: max-height 280ms ease, padding 280ms ease, opacity 180ms ease, visibility 0s linear 280ms;
    z-index: 45;
  }

  .nav-links.open {
    display: flex;
    max-height: 420px;
    padding-top: 8px;
    padding-bottom: 12px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: max-height 280ms ease, padding 280ms ease, opacity 180ms ease, visibility 0s;
  }

  .nav-links a {
    padding: 13px 16px;
    border-radius: var(--radius);
    font-size: 15px;
  }

  .header-search {
    display: none;
  }

  .cart-pill {
    min-width: auto;
    gap: 6px;
    padding: 9px 11px;
  }

  .cart-label {
    display: none;
  }

  .hero {
    min-height: auto;
    padding: 38px 22px 42px;
  }

  .hero-inner {
    display: flex;
    width: min(100%, 820px);
    margin-right: auto;
    margin-left: auto;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .hero-image-wrap {
    order: -1;
    width: 100%;
    align-items: center;
  }

  .hero-product-image {
    width: 100%;
    height: 380px;
    max-height: 380px;
    object-fit: contain;
  }

  .hero-trust-badges {
    display: none;
  }

  .hero-copy {
    width: 100%;
    text-align: center;
  }

  .hero-copy .lead {
    max-width: 680px;
    margin-right: auto;
    margin-left: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-feature-boxes {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 26px;
  }

  .hero-feature-boxes article {
    padding: 18px 16px;
  }

  .product-grid,
  .product-grid-dense {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .product-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .product-gallery {
    position: static;
    width: min(100%, 640px);
    margin-right: auto;
    margin-left: auto;
  }

  .product-detail-visual {
    width: 100%;
    min-height: 0;
    aspect-ratio: 1 / 1;
  }

  .product-info-grid {
    grid-template-columns: 1fr;
  }

  .comparison-box {
    padding: 26px 22px;
  }

  .comparison-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .comparison-table {
    grid-template-columns: 140px repeat(3, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
  }

  .science-section {
    padding: 44px 22px;
  }

  .science-section-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
  }

  .science-copy {
    display: contents;
  }

  .science-copy h2 {
    order: 1;
    width: 100%;
    margin: 0;
    font-size: 32px;
    text-align: center;
  }

  .science-features {
    order: 2;
    width: min(100%, 680px);
  }

  .science-copy p {
    order: 3;
    width: min(100%, 680px);
    margin: 0 auto;
    text-align: center;
  }

  .science-feature-first-line {
    display: block;
  }

  .mailing-list-box {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .shop-page-hero h1 {
    font-size: 36px;
  }

  .shop-catalog-section > .filter-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    width: 100%;
  }

  .shop-catalog-section > .filter-row .chip {
    width: 100%;
    min-width: 0;
  }

  .breadcrumb,
  .legal-breadcrumb {
    gap: 9px;
    margin-bottom: 17px;
  }
}

@media (max-width: 720px) {
  .site-header .nav-links {
    top: 100%;
    right: 0;
    left: 0;
    width: 100%;
    margin: 0;
    border: 0;
    border-top: 3px solid #d1d5db;
    border-bottom: 1px solid var(--line);
    border-radius: 0 0 18px 18px;
    background: #ffffff;
    box-shadow: 0 16px 24px -14px rgba(10, 37, 64, 0.42);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 1;
  }

  .comparison-title-desktop,
  .shop-title-desktop {
    display: none;
  }

  .comparison-title-mobile,
  .shop-title-mobile {
    display: inline;
  }

  .science-section-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .science-copy {
    display: contents;
  }

  .science-copy h2 {
    order: 1;
    width: 100%;
    margin: 0;
  }

  .science-features {
    order: 2;
    width: 100%;
  }

  .science-copy p {
    order: 3;
    width: 100%;
    margin: 0 auto;
  }

  .science-feature-first-line {
    display: block;
  }

  .mailing-list-form .btn {
    border-radius: 12px;
  }

  .product-card .product-actions .btn {
    border-radius: 9px;
  }

  .breadcrumb,
  .legal-breadcrumb {
    gap: 9px;
    margin-bottom: 17px;
  }

  .legal-page {
    padding-bottom: 0;
  }

  .product-detail-visual {
    border: 3.97px solid transparent;
    background:
      linear-gradient(#ffffff, #ffffff) padding-box,
      linear-gradient(135deg, rgba(143, 208, 255, 0.48), rgba(46, 139, 255, 0.22), rgba(91, 174, 255, 0.42)) border-box;
    box-shadow: 0 0 0 1px rgba(91, 174, 255, 0.12), 0 0 18px rgba(46, 139, 255, 0.10);
  }

  .product-detail-visual .packshot {
    padding: 0;
  }

  .size-picker .choice-radio {
    width: 17px;
    height: 17px;
    min-width: 17px;
    min-height: 17px;
    flex-basis: 17px;
  }

  .choice-copy {
    gap: 1.97px;
  }

  .choice-copy strong,
  .choice-copy span {
    font-size: 13.72px;
  }

  .storage-notice > span:last-child {
    white-space: pre-line;
  }

  .shop-page-hero .lead {
    margin-bottom: 7.35px;
  }

  .shop-catalog-section {
    padding-top: 9.8px;
  }

  .shop-tools {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .shop-search-autocomplete {
    flex: 1 1 auto;
    min-width: 0;
  }

  .shop-tools .search-field {
    min-width: 0;
  }

  .shop-cart-button {
    gap: 5px;
    padding-right: 11px;
    padding-left: 11px;
  }

  .shop-cart-button .shop-cart-svg {
    width: 20px;
    height: 20px;
  }

  .shop-cart-count {
    font-size: 13px;
  }

  .shop-catalog-section > .filter-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  .shop-catalog-section > .filter-row .chip {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 8px 6px;
    text-align: center;
  }

  .shop-catalog-section > .filter-row .chip:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 721px) {
  .purchase-rating > span {
    font-size: 13.72px;
  }
}

/* ============================================================
   Utility: hidden
   ============================================================ */
.header-search .btn {
  padding: 13px 32px;
}

[hidden] {
  display: none !important;
}

@media (max-width: 720px) {
  .home-title-desktop {
    display: none !important;
  }

  .home-title-mobile {
    display: block !important;
  }
}