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

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

  /* 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: 18px;
  --radius-xl: 24px;
  --button-radius: 9px;
  --max: 1280px;

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

body {
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  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: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(circle at 16px 16px, rgba(46, 139, 255, 0.07) 1.2px, transparent 1.6px) 0 0 / 32px 32px,
    radial-gradient(circle at 24px 24px, rgba(143, 208, 255, 0.06) 1px, transparent 1.4px) 16px 16px / 48px 48px,
    linear-gradient(180deg, #ffffff 0%, #f6faff 50%, #ffffff 100%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  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%);
}

/* Subtle dot-only lab background (no lines) */
.lab-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(91, 174, 255, 0.08) 1.1px, transparent 1.6px);
  background-size: 28px 28px;
  background-position: 0 0;
  mask-image: radial-gradient(ellipse at 50% 30%, black 0%, transparent 75%);
}

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:
    linear-gradient(90deg, #1a6fe0 0%, #2e8bff 48%, #5baeff 100%),
    #1a6fe0;
  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 {
  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;
  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: 4px;
}

.nav-toggle span {
  display: block;
  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);
}

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

.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 {
  max-width: 100%;
  max-height: 520px;
  width: auto;
  height: auto;
  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;
}

.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: 57px;
}

/* ============================================================
   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: padding-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;
  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: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));
}

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

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

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.chip {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  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: transparent;
  box-shadow: var(--shadow-blue);
}

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

.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(--warning); box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.18); }
.stock-fast { color: #c47e0a; }

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

@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: var(--blue-600);
}

.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: 13px;
  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);
}

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

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

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

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

.search-field {
  flex: 1;
  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-gallery {
  display: grid;
  gap: 18px;
  position: sticky;
  top: 96px;
}

.product-detail-visual {
  aspect-ratio: 4 / 5;
  padding: 0px;
  min-height: 540px;
  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;
}

.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: 999px;
  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: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  text-align: left;
  transition: all 160ms ease;
}

.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: 0 0 0 3px rgba(46, 139, 255, 0.14);
}

.choice-radio {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  display: inline-block;
  position: relative;
}

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

.choice-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

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

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

.supply-note {
  display: flex;
  align-items: center;
  gap: 10px;
  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;
  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;
}

.selected-price small {
  font-size: 11px;
  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: 13px;
}

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

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

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

.info-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 12px;
}

.info-tabs span {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--blue-50);
  color: var(--blue-700);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.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);
  gap: 14px 22px;
  margin-top: 20px;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--panel-tint);
  border: 1px solid var(--line-soft);
}

.spec-table > div {
  display: grid;
  gap: 2px;
}

.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-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 {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--blue-600);
  font-size: 16px;
  font-weight: 800;
  transition: background 160ms ease;
}

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

.qty-control span {
  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 {
  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);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.country-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231a6fe0' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
}

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

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

.contact-form-compact {
  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;
}

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

/* ============================================================
   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-brand {
  margin-bottom: 14px;
}

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

.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: 100vw;
  margin-left: calc(50% - 50vw);
  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;
  }
}
.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;
  }

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

@media (max-width: 720px) {
  /* ---- Header ---- */
  .top-offer-bar {
    font-size: 0.82rem;
    letter-spacing: 0.1px;
    padding: 7px 8px;
    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; }

  .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: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 12px;
    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: 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 { max-height: 260px; }
  .hero-copy { text-align: center; order: 1; }
  .hero-actions { justify-content: center; gap: 10px; }
  .hero-actions .btn { flex: 1; min-height: 57px; 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 { margin-top: 0; font-size: 11px; }
  .hero-feature-boxes span { font-size: 12px; }
  .hero-image-wrap { order: -1; }
  .hero-product-image { max-height: 280px; }
  .hero-trust-badges { gap: 6px 14px; margin-top: 8px; }
  .trust-badge { font-size: 11px; }

  /* ---- 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: 20px; padding-bottom: 47px; }
  .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 { gap: 7px; margin-bottom: 20px; }
  .chip { padding: 7px 12px; font-size: 12px; }
  .filter-row.home-filter-row .catalog-cta {
    margin-left: 0; margin-top: 4px; width: 100%;
    min-height: 44px; 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 { font-size: 9px; padding: 3px 7px; top: 8px; left: 8px; }
  .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; }
  .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;
  }
  .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.nrna-head { background: var(--grad-cta) !important; color: #ffffff !important; }
  .comparison-foot { font-size: 12px; padding: 12px 14px; }

  /* ---- 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: 1; width: 100%; text-align: center; }
  .science-features { order: 2; 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; letter-spacing: 0.5px; }

  /* ---- 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: 20px; min-height: auto; border-radius: var(--radius-lg); }
  .product-detail-visual .packshot img { max-height: 300px; }
  .purchase-panel { padding: 20px 18px; border-radius: var(--radius-lg); gap: 14px; }
  .purchase-panel h1 { font-size: 26px; }
  .purchase-panel .lead { font-size: 15px; }
  .size-picker { gap: 8px; }
  .size-picker button { padding: 10px 8px; }
  .choice-copy strong { font-size: 13px; }
  .choice-copy span { font-size: 11px; }
  .selected-price strong { font-size: 22px; }
  .button-row { grid-template-columns: 1fr; gap: 8px; }
  .proof-row { gap: 8px; 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: 6px; }
  .spec-table { grid-template-columns: 1fr; gap: 10px; padding: 14px; }
  .info-tabs { flex-wrap: wrap; gap: 6px; padding-bottom: 8px; }
  .info-tabs span { padding: 4px 10px; font-size: 10px; letter-spacing: 0.2px; line-height: 1.2; white-space: nowrap; }

  /* ---- 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; }
  .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: 11px; }

  /* ---- 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: 11px; padding: 8px 10px; letter-spacing: 0.5px; }
  .product-actions .btn, .purchase-actions .btn { border-radius: 13px; }
  .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: 0.62rem; letter-spacing: 0; }
  .brand small { display: none; }
}

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

  .cart-label,
  .cart-pill [data-cart-count],
  .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;
  }

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

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

[hidden] {
  display: none !important;
}