:root {
    --bg: #000000;
    --bg-2: #07070a;
    --bg-3: #0c0c10;
    --line: rgba(255,255,255,0.07);
    --line-strong: rgba(255,255,255,0.15);
    --text: #ffffff;
    --text-2: #a8b2c0;
    --text-3: #7a8496;
    --text-outline: #1a1d28;
    --accent: #5ec4e8;
    --accent-2: #82d3f0;
    --accent-deep: #3aa6ce;
    --gold: #c19654;
    --gold-2: #d4ab69;
    --danger: #ef4444;
    --display: 'Space Grotesk', system-ui, sans-serif;
    --serif: 'Playfair Display', Georgia, serif;
    --body: 'Inter', system-ui, sans-serif;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.6, 1);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html {
    scroll-behavior: smooth;
    background: #000;
    color-scheme: dark;
    -webkit-tap-highlight-color: transparent;
  }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--body);
    font-weight: 400;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
  img { display: block; max-width: 100%; }

  /* Hero background video / canvas */
  .hero-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }
  .hero-bg video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s var(--ease);
  }
  .hero-bg video.loaded { opacity: 0.38; }
  .hero-bg::after {
    content: '';
    position: absolute; inset: 0;
    background:
      linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.25) 65%, rgba(0,0,0,0.45) 100%),
      linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0.6) 80%, var(--bg) 100%),
      radial-gradient(ellipse at 70% 40%, rgba(94,196,232,0.08), transparent 55%);
  }

  /* Reveal animations */
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
  .reveal.in { opacity: 1; transform: none; }
  .reveal-d1 { transition-delay: 0.08s; }
  .reveal-d2 { transition-delay: 0.16s; }
  .reveal-d3 { transition-delay: 0.24s; }
  .reveal-d4 { transition-delay: 0.32s; }

  /* Promo bar — scrolling marquee */
  .promo {
    position: relative; z-index: 10;
    padding: 10px 0;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background: var(--bg-2);
    white-space: nowrap;
    mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
  }
  .marquee-track {
    display: inline-flex;
    gap: 56px;
    align-items: center;
    animation: marquee 40s linear infinite;
    padding-left: 56px;
  }
  .marquee-track .item {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-3);
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  .marquee-track .item strong { color: var(--accent); font-weight: 600; }
  .marquee-track .item .dot { width: 4px; height: 4px; background: var(--text-3); border-radius: 50%; }
  @keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  /* Header */
  header {
    position: sticky; top: 0;
    /* z-index above the mobile menu (8000) so the hamburger-X stays
       visible and tappable while the menu is open. */
    z-index: 8100;
    padding: 22px 56px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    background: rgba(8,8,10,0.96);
    /* backdrop-filter removed — was forcing GPU repaint on every scroll on Brave/desktop */
    border-bottom: 1px solid var(--line);
    transition: padding 0.4s var(--ease), background 0.4s var(--ease);
  }
  header.scrolled { padding: 16px 56px; background: rgba(0,0,0,0.85); }
  .logo {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 24px;
    letter-spacing: 0.04em;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .logo .accent { color: var(--accent); }
  nav.main { display: flex; gap: 40px; justify-content: center; }
  nav.main a {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-2);
    transition: color 0.3s var(--ease);
    position: relative;
  }
  nav.main a:hover, nav.main a.active { color: var(--text); }
  nav.main a.shop-all { color: var(--text); display: inline-flex; align-items: center; gap: 8px; }
  nav.main a.shop-all span { color: var(--accent); transition: transform 0.3s var(--ease); }
  nav.main a.shop-all:hover span { transform: translateX(4px); }

  .cart-link {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text);
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: color 0.3s var(--ease);
  }
  .cart-link:hover { color: var(--accent); }
  .cart-link .cart-n { color: var(--accent); margin-left: 4px; }
  .header-actions { display: flex; gap: 14px; align-items: center; justify-content: flex-end; }
  .icon-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    color: var(--text);
    display: inline-flex; align-items: center; justify-content: center;
    transition: color 0.3s var(--ease), background 0.3s var(--ease);
    position: relative;
  }
  .icon-btn:hover { background: rgba(255,255,255,0.06); }

  /* Hero */
  .hero {
    position: relative; z-index: 2;
    min-height: calc(66vh - 92px);
    padding: 80px 56px 100px;
    display: flex; flex-direction: column;
    justify-content: center;
    background: transparent;
  }
  .hero-inner { max-width: 1400px; margin: 0 auto; width: 100%; }
  .eyebrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 32px;
  }
  .hero h1 {
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(44px, 7.2vw, 120px);
    line-height: 0.88;
    letter-spacing: -0.04em;
    margin-bottom: 0;
  }
  .hero h1 .row { display: block; }
  .hero h1 .outline {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--text-outline);
    color: rgba(255,255,255,0.07);
  }
  .hero-sub {
    max-width: 520px;
    font-size: 16px;
    color: var(--text-2);
    margin: 44px 0 48px;
    line-height: 1.7;
  }
  .cta-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 32px;
    border-radius: 999px;
    font-family: var(--body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border: 1px solid transparent;
    transition: all 0.4s var(--ease);
    white-space: nowrap;
  }
  .btn-primary,
  .btn-primary:link,
  .btn-primary:visited,
  .btn-primary:focus,
  .btn-primary:active {
    background: var(--accent);
    background-color: var(--accent);
    color: #000000;
    box-shadow: 0 8px 24px rgba(94,196,232,0.15);
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  .btn-primary:hover { background: var(--accent-2); transform: translateY(-1px); box-shadow: 0 12px 32px rgba(94,196,232,0.3); }
  /* Final guard — when SHOP NOW is an <a> tag, higher specificity + !important
     so no a:visited / browser-default styling can override the cyan background. */
  a.btn-primary,
  a.btn-primary:link,
  a.btn-primary:visited,
  a.btn-primary:focus,
  a.btn-primary:active {
    background-color: var(--accent) !important;
    color: #000 !important;
  }
  a.btn-primary:hover { background-color: var(--accent-2) !important; }
  .btn-ghost,
  .btn-ghost:link,
  .btn-ghost:visited {
    color: var(--text);
    border-color: var(--line-strong);
  }
  .btn-ghost:hover { border-color: var(--text); }
  /* Site-wide: links never change color on :visited (overrides browser default purple) */
  a:visited { color: inherit; }
  .btn .arrow { transition: transform 0.4s var(--ease); }
  .btn:hover .arrow { transform: translateX(4px); }

  /* Hero stats */
  .hero-stats {
    display: inline-flex;
    margin-top: 56px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px;
    gap: 0;
  }
  .stat {
    padding: 14px 28px;
    border-right: 1px solid var(--line);
    display: flex;
    align-items: baseline;
    gap: 10px;
  }
  .stat:last-child { border-right: none; }
  .stat-value {
    font-family: var(--display);
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
    letter-spacing: -0.01em;
  }
  .stat-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-3);
  }

  /* Scroll indicator */
  .scroll-hint {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.3em;
    color: var(--text-3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 3;
  }
  .scroll-hint .bar {
    width: 1px;
    height: 36px;
    background: linear-gradient(180deg, var(--text-3), transparent);
    animation: scroll-fade 2.4s ease-in-out infinite;
  }
  @keyframes scroll-fade {
    0% { transform: scaleY(0); transform-origin: top; }
    50% { transform: scaleY(1); transform-origin: top; }
    51% { transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
  }

  /* Section */
  section { position: relative; z-index: 2; padding: 140px 56px; background: var(--bg); }
  .container { max-width: 1400px; margin: 0 auto; width: 100%; }

  /* Catalog */
  .grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  .pcard {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    background: var(--bg);
    transition: transform 0.5s var(--ease), border-color 0.4s var(--ease);
  }
  .pcard:hover { transform: translateY(-4px); border-color: var(--line-strong); }
  .pcard-media {
    position: relative;
    aspect-ratio: 3 / 4;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .pcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
  .pcard:hover .pcard-media img { transform: scale(1.03); }
  .pcard.is-coming-soon .pcard-media img { filter: grayscale(0.6) brightness(0.55); }
  .pcard.is-coming-soon .pcard-action { opacity: 0.7; }
  .pcard-tag {
    position: absolute;
    top: 14px; left: 14px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 6px 12px;
    background: rgba(0,0,0,0.7);
    color: var(--text);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    z-index: 2;
  }
  .pcard-tag.sale { background: rgba(0,0,0,0.7); color: #ef4444; }
  .pcard-tag.featured { background: rgba(0,0,0,0.7); color: var(--accent); }

  /* CSS Vial */
  .vial {
    width: 38%;
    aspect-ratio: 0.4 / 1;
    position: relative;
    margin-bottom: 8%;
    filter: drop-shadow(0 25px 35px rgba(0,0,0,0.25));
  }
  .vial-cap {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 8%;
    background: linear-gradient(180deg, #2a2a30 0%, #14141a 60%, #1f1f25 100%);
    border-radius: 4px 4px 2px 2px;
    box-shadow: inset 0 -2px 4px rgba(0,0,0,0.3);
    z-index: 3;
  }
  .vial-cap::after {
    content: '';
    position: absolute;
    bottom: -3px; left: 0; right: 0;
    height: 6px;
    background: #1a1a20;
    border-radius: 50% 50% 4px 4px / 8px;
  }
  .vial-neck {
    position: absolute;
    top: 7%;
    left: 50%;
    transform: translateX(-50%);
    width: 56%;
    height: 6%;
    background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(220,220,225,0.6));
    border-radius: 1px;
    z-index: 2;
  }
  .vial-body {
    position: absolute;
    top: 12%;
    left: 0;
    width: 100%;
    height: 86%;
    background: linear-gradient(
      90deg,
      rgba(255,255,255,0.15) 0%,
      rgba(255,255,255,0.55) 30%,
      rgba(255,255,255,0.3) 70%,
      rgba(255,255,255,0.1) 100%
    );
    border-radius: 4px 4px 6px 6px;
    border: 1px solid rgba(255,255,255,0.4);
    overflow: hidden;
    box-shadow:
      inset 1px 0 0 rgba(255,255,255,0.6),
      inset -1px 0 0 rgba(0,0,0,0.05);
  }
  .vial-body::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: 22%;
    width: 6%;
    background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.2));
  }
  .vial-stripe-top, .vial-stripe-bottom {
    position: absolute;
    left: 0; right: 0;
    height: 3px;
    background: var(--accent-deep);
    z-index: 2;
  }
  .vial-stripe-top { top: 22%; }
  .vial-stripe-bottom { bottom: 14%; }
  .vial-label {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 28%;
    bottom: 20%;
    background: #ffffff;
    color: #000;
    z-index: 2;
    padding: 6% 4%;
    text-align: center;
    font-family: var(--display);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 1px;
  }
  .vial-label .v-brand {
    font-weight: 800;
    font-size: clamp(10px, 1vw, 16px);
    letter-spacing: 0.08em;
    color: #000;
    line-height: 1;
  }
  .vial-label .v-brand-sub {
    font-weight: 500;
    font-size: clamp(7px, 0.6vw, 9px);
    letter-spacing: 0.3em;
    color: #000;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 2px 0;
    margin: 4px 0;
  }
  .vial-label .v-name {
    font-weight: 700;
    font-size: clamp(8px, 0.75vw, 11px);
    letter-spacing: 0.03em;
    color: #ffffff;
    line-height: 1.1;
    background: var(--accent-deep);
    margin: 6px -8px 0;
    padding: 5px 6px;
  }
  .vial-label .v-dose {
    margin-top: auto;
    border: 1px solid #000;
    border-radius: 999px;
    padding: 3px 8px;
    font-weight: 700;
    font-size: clamp(8px, 0.7vw, 10px);
    display: inline-block;
    align-self: center;
    margin-bottom: 0;
  }
  .vial-label .v-purity {
    font-size: clamp(5px, 0.5vw, 7px);
    letter-spacing: 0.1em;
    color: #444;
    margin-top: 2px;
  }

  .pcard-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1 1 auto; }
  .pcard-meta {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
  }
  .pcard-meta .dot { width: 3px; height: 3px; background: var(--text-3); border-radius: 50%; }
  .pcard h3 {
    font-family: var(--display);
    font-weight: 500;
    font-size: 17px;
    line-height: 1.25;
    color: var(--text);
    margin-bottom: 4px;
    letter-spacing: -0.005em;
  }
  .pcard .sub {
    font-size: 13px;
    color: var(--text-3);
    margin-bottom: 18px;
  }
  .pcard-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    margin-top: auto;
  }
  .price {
    font-family: var(--display);
    font-weight: 700;
    font-size: 19px;
    color: var(--text);
  }
  .price .from {
    font-size: 11px;
    color: var(--text-3);
    font-weight: 400;
    margin-right: 4px;
  }
  .price .strike {
    font-size: 14px;
    color: var(--text-3);
    text-decoration: line-through;
    margin-left: 8px;
    font-weight: 400;
  }

  .pcard-action {
    width: 100%;
    padding: 14px 24px;
    border-top: 1px solid var(--line);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transition: all 0.4s var(--ease);
    color: var(--text);
  }
  .pcard-action.solid {
    background: var(--text);
    color: #000;
    border: none;
  }
  .pcard-action.solid:hover { background: var(--accent); }
  .pcard-action.ghost {
    background: transparent;
    border: 1px solid var(--line-strong);
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }
  .pcard-action.ghost:hover { color: var(--accent); }

  .view-all-wrap { display: flex; justify-content: center; margin-top: 80px; }

  /* Trust features */
  .features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .feature {
    padding: 60px 44px;
    border-right: 1px solid var(--line);
    display: flex;
    gap: 24px;
    align-items: center;
  }
  .feature:last-child { border-right: none; }
  .feature-icon {
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    flex-shrink: 0;
  }
  .feature-text h4 {
    font-family: var(--body);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 6px;
    color: var(--text);
  }
  .feature-text p { font-size: 13px; color: var(--text-2); line-height: 1.5; max-width: 280px; }

  /* About */
  .about-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }
  .about-eyebrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 28px;
  }
  .about-h2 {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(40px, 5vw, 76px);
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 32px;
  }
  .about-h2 .o { color: transparent; -webkit-text-stroke: 1px var(--text-outline); color: rgba(255,255,255,0.08); }
  .about-text p { color: var(--text-2); margin-bottom: 18px; font-size: 15px; line-height: 1.7; }
  .about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin: 40px 0;
  }
  .about-stat {
    padding: 28px 24px 28px 0;
    border-right: 1px solid var(--line);
  }
  .about-stat:last-child { border-right: none; padding-left: 24px; padding-right: 0; }
  .about-stat:not(:first-child) { padding-left: 24px; }
  .about-stat .v {
    font-family: var(--display);
    font-size: 44px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .about-stat .l {
    margin-top: 10px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-3);
  }
  .about-visual {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #000;
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .about-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .about-visual .floor {
    position: absolute; inset: 0;
    background:
      repeating-linear-gradient(45deg, transparent, transparent 60px, rgba(255,255,255,0.02) 60px, rgba(255,255,255,0.02) 62px),
      repeating-linear-gradient(-45deg, transparent, transparent 60px, rgba(255,255,255,0.02) 60px, rgba(255,255,255,0.02) 62px);
    mask-image: radial-gradient(ellipse at 50% 100%, black 0%, transparent 70%);
  }
  .about-visual .big-vial { width: 28%; z-index: 2; transform: rotate(-6deg); }
  .about-visual .glint {
    position: absolute;
    width: 4px; height: 4px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 8px white;
  }
  .about-visual .glint.a { top: 20%; right: 20%; }
  .about-visual .glint.b { bottom: 25%; left: 18%; width: 3px; height: 3px; }
  .about-visual .glint.c { top: 60%; right: 30%; width: 2px; height: 2px; }
  .about-visual .badge-ring {
    position: absolute;
    bottom: 28px;
    right: 28px;
    width: 96px; height: 96px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
  }
  .badge-ring .v { font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--accent); }
  .badge-ring .l { font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); margin-top: 2px; }
  .badge-ring .c { display: flex; flex-direction: column; align-items: center; }

  /* FAQ */
  .faq-split {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 64px;
    align-items: center;
  }
  .faq-eyebrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 24px;
  }
  .faq-h2 {
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(40px, 5vw, 72px);
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin-bottom: 48px;
  }
  .faq-h2 .o { color: transparent; -webkit-text-stroke: 1px var(--text-outline); color: rgba(255,255,255,0.08); }
  .faq-list { display: flex; flex-direction: column; gap: 12px; }
  details.faq-item {
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg-2);
    transition: border-color 0.3s var(--ease);
  }
  details.faq-item[open] { border-color: var(--line-strong); }
  details.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 26px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--text);
    transition: color 0.3s var(--ease);
  }
  details.faq-item summary::-webkit-details-marker { display: none; }
  details.faq-item summary:hover { color: var(--accent); }
  .faq-toggle {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s var(--ease);
    flex-shrink: 0;
  }
  details.faq-item[open] .faq-toggle { transform: rotate(45deg); }
  details.faq-item .answer {
    padding: 0 26px 24px;
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.7;
    border-top: 1px solid var(--line);
    margin-top: -1px;
    padding-top: 20px;
  }
  .faq-visual {
    position: relative;
    aspect-ratio: 1 / 1;
    background: radial-gradient(ellipse at 50% 50%, #14141a 0%, #000 80%);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .faq-visual .shards {
    position: absolute; inset: 0;
  }
  .shard {
    position: absolute;
    background: linear-gradient(135deg, #1a1a22, #06060a);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 1px;
  }
  .shard.a { width: 35%; height: 15%; bottom: 30%; left: 8%; transform: rotate(-12deg); }
  .shard.b { width: 28%; height: 14%; top: 18%; right: 12%; transform: rotate(8deg); }
  .shard.c { width: 40%; height: 18%; bottom: 14%; right: 5%; transform: rotate(-6deg); }
  .shard.d { width: 22%; height: 12%; top: 35%; left: 12%; transform: rotate(20deg); }
  .shard.e { width: 18%; height: 10%; top: 8%; left: 35%; transform: rotate(-15deg); }
  .faq-visual .center-vial { width: 22%; z-index: 2; filter: drop-shadow(0 30px 60px rgba(0,0,0,0.8)); }
  .faq-visual .glint { position: absolute; background: white; border-radius: 50%; box-shadow: 0 0 6px white; }
  .faq-visual .glint.a { width: 3px; height: 3px; top: 15%; left: 28%; }
  .faq-visual .glint.b { width: 2px; height: 2px; top: 70%; left: 22%; }
  .faq-visual .glint.c { width: 4px; height: 4px; bottom: 18%; right: 18%; }
  .faq-visual .glint.d { width: 2px; height: 2px; top: 30%; right: 25%; }

  /* Footer */
  footer {
    position: relative;
    z-index: 2;
    background: var(--bg);
    padding: 80px 56px 32px;
    border-top: 1px solid var(--line);
  }
  .foot-grid {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 64px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--line);
  }
  .foot-brand .logo { margin-bottom: 6px; font-size: 28px; }
  .foot-brand .sub-logo {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3em;
    color: var(--text-2);
    margin-bottom: 28px;
  }
  .foot-brand p { color: var(--text-2); font-size: 14px; max-width: 280px; line-height: 1.7; }
  .foot-col h5 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 24px;
  }
  .foot-col a {
    display: block;
    color: var(--text-2);
    font-size: 14px;
    margin-bottom: 14px;
    transition: color 0.3s var(--ease);
  }
  .foot-col a:hover { color: var(--text); }
  .foot-contact-item {
    display: flex;
    gap: 10px;
    align-items: center;
    color: var(--text-2);
    font-size: 14px;
    margin-bottom: 14px;
  }
  .foot-contact-item svg { flex-shrink: 0; }

  .disclaimer-box {
    max-width: 1400px;
    margin: 32px auto 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 24px 28px;
  }
  .disclaimer-box .label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 12px;
  }
  .disclaimer-box p {
    color: var(--text-2);
    font-size: 12px;
    line-height: 1.7;
  }
  .foot-bottom {
    max-width: 1400px;
    margin: 32px auto 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-3);
    font-size: 12px;
  }
  .foot-bottom .right { color: var(--accent); font-weight: 500; letter-spacing: 0.1em; font-size: 11px; text-align: right; line-height: 1.6; }

  /* Age gate */
  .age-gate {
    position: fixed;
    inset: 0;
    z-index: 9999;
    /* Near-solid dark backdrop with the brand glow. NO backdrop-filter blur —
       it live-blurred the whole page on first load and caused jank, worst on mobile. */
    background: radial-gradient(ellipse at 50% 30%, rgba(94,196,232,0.12), transparent 60%), rgba(6,6,10,0.94);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s var(--ease);
  }
  .age-gate::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(94,196,232,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(94,196,232,0.04) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 70%);
    pointer-events: none;
  }
  .age-gate.show { opacity: 1; pointer-events: auto; }
  .age-gate-card {
    max-width: 520px;
    width: 100%;
    background: linear-gradient(180deg, #0a0a10 0%, #060608 100%);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    padding: 56px 48px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transform: translateY(16px) scale(0.98);
    transition: transform 0.6s var(--ease);
  }
  .age-gate.show .age-gate-card { transform: none; }
  .age-gate-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(94,196,232,0.12), transparent 60%);
    pointer-events: none;
  }
  .age-gate-logo {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
    position: relative;
  }
  .age-gate-logo::before {
    content: '';
    width: 5px; height: 5px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent);
  }
  .age-gate-logo .accent { color: var(--accent); }
  .age-gate-eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 16px;
    position: relative;
  }
  .age-gate-card h2 {
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(36px, 5vw, 52px);
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    position: relative;
  }
  .age-gate-card h2 .accent { color: var(--accent); }
  .age-gate-card .sub {
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.7;
    margin-bottom: 36px;
    position: relative;
  }
  .age-gate-remember {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    position: relative;
    font-size: 13px;
    color: var(--text-2);
    cursor: pointer;
    user-select: none;
  }
  .age-gate-remember input { display: none; }
  .age-gate-remember .checkbox {
    width: 18px;
    height: 18px;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    background: rgba(255,255,255,0.02);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s var(--ease);
    flex-shrink: 0;
  }
  .age-gate-remember .checkbox svg { opacity: 0; transition: opacity 0.2s; color: #000; }
  .age-gate-remember input:checked + .checkbox {
    background: var(--accent);
    border-color: var(--accent);
  }
  .age-gate-remember input:checked + .checkbox svg { opacity: 1; }
  .age-gate-remember:hover .checkbox { border-color: var(--accent); }
  .age-gate-remember strong { color: var(--text); font-weight: 600; }

  .age-gate-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
  }
  .age-gate-actions .btn { width: 100%; justify-content: center; }
  .age-gate-fine {
    font-size: 11px;
    color: var(--text-3);
    line-height: 1.6;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    position: relative;
  }

  /* Floating flask */
  .floating-flask {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99;
    cursor: pointer;
    box-shadow: 0 8px 32px rgba(94,196,232,0.35), inset 0 1px 0 rgba(255,255,255,0.3);
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  }
  .floating-flask:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 12px 40px rgba(94,196,232,0.55); }

  /* Cart count */
  .cart-count, .cart-bubble {
    position: absolute;
    top: -2px; right: -2px;
    width: 16px; height: 16px;
    background: var(--accent);
    color: #000;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
  }
  .header-actions { gap: 8px; }
  .header-actions .icon-btn { background: transparent; border: none; }
  .header-actions .icon-btn:hover { color: var(--accent); background: rgba(94,196,232,0.08); }

  /* Mobile */
  @media (max-width: 1100px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .about-split, .faq-split { grid-template-columns: 1fr; gap: 48px; }
    /* On mobile, flip FAQ so the headline + accordion text shows BEFORE the vial image.
       Otherwise the about-section image and FAQ image stack directly with no copy
       between them, leaving an awkward "two images touching" feel. */
    .faq-split > .faq-visual { order: 2; }
    .features { grid-template-columns: 1fr; }
    .feature { border-right: none; border-bottom: 1px solid var(--line); }
    .feature:last-child { border-bottom: none; }
    .foot-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  }
  @media (max-width: 640px) {
    header { padding: 14px 20px; grid-template-columns: auto auto; }
    header.scrolled { padding: 12px 20px; }
    nav.main { display: none; }
    .hero, section, footer { padding-left: 20px; padding-right: 20px; }
    .hero { padding-top: 60px; padding-bottom: 60px; }
    section { padding-top: 80px; padding-bottom: 80px; }
    .grid-4 { grid-template-columns: 1fr; }
    .hero-stats { flex-wrap: wrap; border-radius: 16px; }
    .stat { padding: 12px 18px; }
    .foot-bottom { flex-direction: column; gap: 16px; text-align: center; }
    .floating-flask { bottom: 20px; right: 20px; width: 52px; height: 52px; }
  }

/* ===========================================
   PAGE: ACCOUNT (Login / Register)
   =========================================== */
.page-hero {
  position: relative;
  z-index: 2;
  padding: 100px 56px 60px;
  text-align: center;
  background: transparent;
}
.page-hero .eyebrow { margin-bottom: 18px; display: inline-block; }
.page-hero h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(48px, 7vw, 84px);
  line-height: 1;
  letter-spacing: -0.03em;
}
.page-hero .sub {
  margin: 16px auto 0;
  max-width: 560px;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.7;
}

.account-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
}
.account-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
  padding: 40px;
  position: relative;
}
.account-card h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 8px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.field {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-2);
}
.field label .req { color: var(--danger); margin-left: 2px; }
/* ======================================
   Newsletter popup — free shipping incentive
   ====================================== */
.nl-popup-bd {
  position: fixed;
  inset: 0;
  z-index: 9000;
  /* Solid translucent dark backdrop — NO backdrop-filter blur. The full-screen
     blur was re-rendering every frame over the hero video = severe lag, esp. mobile. */
  background: rgba(0,0,0,0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.nl-popup-bd.open { opacity: 1; }
.nl-popup {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 40px 32px 28px;
  transform: translateY(20px) scale(0.96);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.nl-popup-bd.open .nl-popup { transform: translateY(0) scale(1); }
.nl-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  color: var(--text-2);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.nl-close:hover { background: rgba(255,255,255,0.1); color: var(--text); }
.nl-eyebrow {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.nl-headline {
  font-family: var(--display);
  font-size: 30px;
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 14px;
}
.nl-headline .accent { color: var(--accent); }
.nl-sub {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 22px;
}
.nl-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.nl-email {
  width: 100%;
  padding: 14px 18px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.02);
  color: var(--text);
  font-family: var(--body);
  font-size: 14px;
  outline: none;
  text-align: center;
  transition: border-color 0.2s;
}
.nl-email:focus { border-color: var(--accent); }
.nl-submit {
  width: 100%;
  padding: 14px;
  border-radius: 999px;
  background: var(--accent);
  color: #000;
  border: 0;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.15s;
}
.nl-submit:hover { background: var(--accent-2); }
.nl-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.nl-dismiss {
  display: block;
  margin: 4px auto 0;
  background: transparent;
  border: 0;
  color: var(--text-3);
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 6px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.nl-dismiss:hover { color: var(--text-2); }
.nl-fine {
  margin-top: 14px;
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nl-success { padding: 8px 0; }
.nl-check {
  width: 64px; height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  display: flex; align-items: center; justify-content: center;
}
.nl-success h2 {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 12px;
  color: var(--text);
}
.nl-success p {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 22px;
}
.nl-shop {
  display: block;
  text-decoration: none;
  padding: 14px;
  border-radius: 999px;
  background: var(--accent);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: background 0.15s;
}
.nl-shop, .nl-shop:link, .nl-shop:visited { color: #000; }
.nl-shop:hover { background: var(--accent-2); }
@media (max-width: 480px) {
  .nl-popup { padding: 32px 22px 22px; border-radius: 16px; }
  .nl-headline { font-size: 24px; }
  .nl-sub { font-size: 13px; }
}

/* Inline validation error message under the input */
.field .field-error {
  font-size: 12px;
  color: var(--danger);
  margin-top: 4px;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 6px;
  animation: fieldErrorIn 0.2s ease;
}
.field .field-error::before {
  content: '⚠';
  font-size: 13px;
}
.field input.invalid {
  border-color: var(--danger) !important;
  background: rgba(239,68,68,0.04);
}
@keyframes fieldErrorIn {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}
.field input[type="email"],
.field input[type="text"],
.field input[type="tel"],
.field input[type="number"],
.field input[type="search"],
.field input[type="url"],
.field input[type="password"],
.field input:not([type]) {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--body);
  font-size: 14px;
  padding: 14px 16px;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(94,196,232,0.12);
}
/* Kill iOS Safari autofill yellow background */
.field input:-webkit-autofill,
.field input:-webkit-autofill:focus,
.field input:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
  caret-color: var(--text);
}
.form-actions {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.remember-me {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  cursor: pointer;
}
.remember-me input { display: none; }
.remember-me .box {
  width: 16px; height: 16px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s var(--ease);
}
.remember-me .box svg { opacity: 0; color: #000; }
.remember-me input:checked + .box { background: var(--accent); border-color: var(--accent); }
.remember-me input:checked + .box svg { opacity: 1; }
.form-link {
  font-size: 13px;
  color: var(--accent);
  border-bottom: 1px solid transparent;
}
.form-link:hover { border-color: var(--accent); }
.privacy-text {
  margin-top: 22px;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.7;
}
.privacy-text a { color: var(--accent); border-bottom: 1px solid currentColor; }

/* ===========================================
   PAGE: SHOP (Catalog)
   =========================================== */
.shop-hero { padding-bottom: 32px; }
.shop-search {
  max-width: 720px;
  margin: 32px auto 0;
  position: relative;
}
.shop-search input {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font-family: var(--body);
  font-size: 14px;
  padding: 16px 24px 16px 56px;
  transition: border-color 0.3s var(--ease);
}
.shop-search input:focus { outline: none; border-color: var(--accent); }
.shop-search svg {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  pointer-events: none;
}

.shop-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  max-width: 1500px;
  margin: 0 auto;
  padding: 40px 56px 120px;
  position: relative;
  z-index: 2;
}
.shop-sidebar { position: sticky; top: 100px; align-self: start; }
.shop-sidebar h5 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 16px;
  margin-top: 32px;
}
.shop-sidebar h5:first-child { margin-top: 0; }
.shop-sidebar .filter-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 6px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 4px;
  transition: all 0.3s var(--ease);
}
.shop-sidebar .filter-link:hover { color: var(--text); background: rgba(255,255,255,0.03); }
.shop-sidebar .filter-link.active {
  color: var(--accent);
  background: rgba(94,196,232,0.08);
}

.shop-results-bar {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 28px;
}

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

/* Shop-specific product cards (use real photos) */
.shop-card {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.4s var(--ease), transform 0.5s var(--ease);
}
.shop-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.shop-card .media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: linear-gradient(180deg, #1a1a22 0%, #0a0a10 100%);
  overflow: hidden;
}
.shop-card .media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6%;
  transition: transform 0.6s var(--ease);
}
.shop-card:hover .media img { transform: scale(1.05); }
.shop-card .body { padding: 24px 24px 8px; }
.shop-card .body h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: 0.01em;
  margin-bottom: 8px;
  color: var(--text);
  min-height: 42px;
}
.shop-card .body .desc {
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 22px;
  min-height: 36px;
}
.shop-card .body .price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 18px;
}
.shop-card .body .price .from {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 400;
}
.shop-card .body .price .amt {
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  color: var(--text);
}
.shop-card .select-btn {
  display: block;
  width: 100%;
  padding: 14px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--line);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  transition: all 0.3s var(--ease);
  cursor: pointer;
}
.shop-card .select-btn:hover { background: var(--accent); color: #000; }

/* Mobile shop */
@media (max-width: 1024px) {
  .shop-layout { grid-template-columns: 1fr; }
  .shop-sidebar { position: relative; top: auto; }
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .account-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .shop-layout { padding: 30px 20px 80px; gap: 32px; }
  .shop-grid { grid-template-columns: 1fr; }
  .account-card { padding: 28px 22px; }
}

/* ===========================================
   SHOP PAGE — VYLIX-STYLE REDESIGN
   =========================================== */
.vshop-hero {
  text-align: center;
  padding: 40px 56px 20px;
  position: relative;
  z-index: 2;
}
.vshop-hero .eyebrow {
  margin-bottom: 22px;
  display: inline-block;
}
.vshop-hero h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.vshop-hero .sub {
  margin: 20px auto 0;
  max-width: 540px;
  color: var(--text-2);
  font-size: 15px;
  letter-spacing: 0.02em;
}

.newsletter-bar {
  max-width: 1400px;
  margin: 0 auto 56px;
  padding: 36px 56px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(94,196,232,0.06) 0%, rgba(0,0,0,0) 60%);
}
.newsletter-bar .news-left .eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 8px;
}
.newsletter-bar .news-left h3 {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  color: var(--text);
}
.newsletter-bar .news-left p {
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.5;
}
.newsletter-bar .news-form {
  display: flex;
  gap: 0;
  min-width: 380px;
}
.newsletter-bar .news-form input {
  flex: 1;
  padding: 14px 16px;
  background: #000;
  border: 1px solid var(--line);
  border-right: 0;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  min-width: 0;
}
.newsletter-bar .news-form input:focus {
  outline: none;
  border-color: var(--accent);
}
.newsletter-bar .news-form button {
  padding: 14px 22px;
  background: var(--accent);
  color: #000;
  border: 1px solid var(--accent);
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  transition: background 0.15s;
}
.newsletter-bar .news-form button:hover { background: #7fd2f0; }
.newsletter-bar .news-form button:disabled { opacity: 0.5; cursor: not-allowed; }
.newsletter-bar .news-form.success {
  padding: 16px 20px;
  background: rgba(52,211,153,0.08);
  border: 1px solid rgba(52,211,153,0.3);
  color: #34d399;
  font-size: 13px;
  text-align: center;
  letter-spacing: 0.04em;
}
@media (max-width: 720px) {
  .newsletter-bar {
    grid-template-columns: 1fr;
    margin: 0 20px 40px;
    padding: 28px 22px;
    gap: 22px;
  }
  .newsletter-bar .news-form { min-width: 0; }
}

.trust-strip {
  max-width: 1400px;
  margin: 36px auto 8px;
  padding: 20px 56px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0;
}
.trust-item svg {
  color: var(--accent);
  flex-shrink: 0;
}
.trust-item > div {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.trust-item strong {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.trust-item span {
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}
@media (max-width: 900px) {
  .trust-strip {
    grid-template-columns: repeat(2, 1fr);
    padding: 18px 20px;
    gap: 10px;
  }
  .trust-item strong { font-size: 13px; }
  .trust-item span { font-size: 10px; }
}
@media (max-width: 480px) {
  .trust-strip { grid-template-columns: 1fr; }
}

.vol-banner {
  max-width: 1400px;
  margin: 24px auto 16px;
  padding: 0 56px;
}
.vol-banner-inner {
  background: linear-gradient(135deg, rgba(94,196,232,0.08) 0%, rgba(94,196,232,0.02) 100%);
  border: 1px solid rgba(94,196,232,0.25);
  border-radius: 10px;
  padding: 18px 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
}
.vol-banner-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}
.vol-banner-tiers {
  display: flex;
  gap: 28px;
  justify-content: center;
  align-items: center;
}
.vol-tier {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.vol-tier .tier-pct {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}
.vol-tier .tier-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
}
.vol-banner-note {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-3);
  text-align: right;
}
@media (max-width: 900px) {
  .vol-banner { padding: 0 20px; }
  .vol-banner-inner { grid-template-columns: 1fr; gap: 12px; text-align: center; padding: 16px; }
  .vol-banner-tiers { gap: 20px; }
  .vol-banner-note { text-align: center; }
}

/* ============== Trust badges row (above product grid on /shop) ============== */
.trust-strip {
  max-width: 1400px;
  margin: 28px auto 36px;
  padding: 0 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.trust-item:hover {
  border-color: rgba(94,196,232,0.35);
  background: rgba(94,196,232,0.04);
}
.trust-item svg {
  color: var(--accent);
  flex-shrink: 0;
}
.trust-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text);
  line-height: 1.2;
}
.trust-sub {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 3px;
  letter-spacing: 0.02em;
}
@media (max-width: 900px) {
  .trust-strip { grid-template-columns: repeat(2, 1fr); padding: 0 20px; gap: 10px; }
  .trust-item { padding: 14px; }
}
/* Phone-only: hide trust badges entirely — too much vertical space when
   wrapped, redundant with the marquee at the top of every page. */
@media (max-width: 640px) {
  .trust-strip { display: none; }
}

/* Shop promo cards — volume discounts + same-day shipping */
.shop-promos {
  max-width: 1400px;
  margin: 28px auto 36px;
  padding: 0 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.sp-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  background: linear-gradient(135deg, rgba(94,196,232,0.07) 0%, rgba(94,196,232,0.015) 100%);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.sp-card:hover {
  border-color: rgba(94,196,232,0.42);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
}
.sp-badge {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  background: radial-gradient(circle at 32% 26%, rgba(94,196,232,0.30) 0%, rgba(94,196,232,0.07) 100%);
  border: 1px solid rgba(94,196,232,0.42);
}
.sp-pct { font-family: var(--display); font-weight: 800; font-size: 17.5px; color: var(--accent); letter-spacing: -0.01em; }
.sp-off { font-size: 8.5px; font-weight: 700; letter-spacing: 0.16em; color: var(--accent); opacity: .8; margin-top: 3px; }
.sp-badge--icon svg { width: 27px; height: 27px; color: var(--accent); }
.sp-title { font-family: var(--display); font-weight: 700; font-size: 15.5px; letter-spacing: 0.01em; color: var(--text); line-height: 1.2; }
.sp-desc { font-size: 12.5px; color: var(--text-2); margin-top: 5px; line-height: 1.46; }
@media (max-width: 760px) {
  .shop-promos {
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    gap: 11px;
    padding: 0 20px 2px;
    margin: 8px auto 18px;
  }
  .shop-promos::-webkit-scrollbar { display: none; }
  .sp-card {
    flex: 0 0 84%;
    scroll-snap-align: start;
    padding: 14px 15px;
    gap: 13px;
    border-radius: 14px;
  }
  .sp-badge { width: 52px; height: 52px; }
  .sp-pct { font-size: 15.5px; }
  .sp-title { font-size: 14.5px; }
  .sp-desc { font-size: 12px; margin-top: 4px; }
}

/* Phone: tighten the top of /shop so products are visible above the fold.
   Hero "Our Collection", volume banner, and toolbar all collapse vertically. */
@media (max-width: 640px) {
  .vshop-hero { padding: 8px 20px 2px; }
  .vshop-hero .eyebrow { margin-bottom: 6px; font-size: 9px; }
  .vshop-hero h1 { font-size: clamp(22px, 6.5vw, 28px); line-height: 1.05; }
  .vshop-hero .sub { margin: 4px auto 0; font-size: 12px; }
  .vol-banner { padding: 0 18px; margin-top: 8px; }
  .vol-banner-inner { padding: 12px 12px; gap: 6px; }
  .shop-toolbar { margin: 10px auto 8px; padding: 0 18px; }
  .shop-filters { padding: 0 18px; margin-bottom: 4px; }
}

/* Phone: center the checkout stepper "1 Shipping ——— 2 Payment" under
   the "Complete your order" heading, with a tight connector instead of
   stretching across the full card width. */
@media (max-width: 640px) {
  .checkout-steps {
    justify-content: center;
    margin-bottom: 16px;
  }
  .checkout-step { flex: 0 0 auto; }
  .checkout-step::after {
    flex: 0 0 50px;
    margin: 0 14px;
  }
  /* Tighten the entire top of /checkout so payment options aren't a scroll away */
  .page-hero { padding: 28px 20px 14px; }
  .page-hero .eyebrow { margin-bottom: 8px; font-size: 9px; }
  .page-hero h1 { font-size: clamp(26px, 7vw, 34px); }
  .page-hero .sub { margin-top: 8px; font-size: 13px; }
  .checkout-layout { padding: 14px 20px 80px !important; }
  .checkout-card { padding: 16px !important; }
  .checkout-card h3 { font-size: 14px; margin-bottom: 14px; }
  .field { margin-top: 12px; }
  .field label { font-size: 10px; }
  .checkout-fields { gap: 0; }
}

.shop-toolbar {
  max-width: 1400px;
  margin: 40px auto 24px;
  padding: 0 56px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
}
.shop-toolbar .search {
  position: relative;
}
.shop-toolbar .search input {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font-family: var(--body);
  font-size: 14px;
  padding: 16px 24px 16px 52px;
  transition: border-color 0.3s var(--ease);
}
.shop-toolbar .search input:focus { outline: none; border-color: var(--accent); }
.shop-toolbar .search svg {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
}
.shop-toolbar .sort {
  position: relative;
  min-width: 180px;
}
.shop-toolbar .sort select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: #fff;
  border: none;
  border-radius: 999px;
  color: #000;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 16px 44px 16px 24px;
  cursor: pointer;
  transition: background 0.3s var(--ease), transform 0.2s var(--ease);
}
.shop-toolbar .sort select:hover { background: #f0f0f0; transform: translateY(-1px); }
.shop-toolbar .sort select:focus { outline: none; background: #f0f0f0; }
.shop-toolbar .sort select option { background: var(--bg-2); color: var(--text); }
.shop-toolbar .sort::after {
  content: '';
  position: absolute;
  right: 22px;
  top: 50%;
  width: 8px; height: 8px;
  border-right: 1.5px solid #000;
  border-bottom: 1.5px solid #000;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.shop-filters {
  max-width: 1400px;
  margin: 0 auto;
  padding: 4px 56px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.shop-filters .pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.shop-filters .pill {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 12px 22px;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.shop-filters .pill:hover { color: var(--text); border-color: var(--text-2); }
.shop-filters .pill.active {
  background: var(--text);
  color: #000;
  border-color: var(--text);
}
.shop-filters .count {
  font-size: 13px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}
.shop-filters .count strong { color: var(--text); font-weight: 600; }

.vshop-grid {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 56px 120px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  position: relative;
  z-index: 2;
}

.vshop-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-2);
  transition: border-color 0.4s var(--ease), transform 0.5s var(--ease);
  display: flex;
  flex-direction: column;
}
.vshop-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.vshop-card .media {
  position: relative;
  aspect-ratio: 3 / 4;
  background: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vshop-card .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.vshop-card:hover .media img { transform: scale(1.03); }
.vshop-card .v-tag {
  position: absolute;
  top: 14px; left: 14px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 7px 12px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  z-index: 2;
}
.vshop-card .v-tag.sale { color: #fbbf24; }
.vshop-card .v-tag.featured { color: var(--accent); }
.vshop-card .v-tag.new { color: #06210f; background: #34d399; letter-spacing: 0.14em; }
.vshop-card .v-tag.backorder { color: #fb923c; background: rgba(0,0,0,0.85); letter-spacing: 0.16em; }
.vshop-card .v-tag.soldout { color: var(--accent); background: rgba(0,0,0,0.85); letter-spacing: 0.14em; }

/* Product page status banner (backorder / sold-out / pre-order) */
.product-status {
  margin: 16px 0 4px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid;
}
.product-status.backorder {
  background: rgba(251,146,60,0.08);
  border-color: rgba(251,146,60,0.4);
}
.product-status.soldout {
  background: rgba(0,209,232,0.06);
  border-color: rgba(0,209,232,0.35);
}
.product-status .ps-title {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.product-status.backorder .ps-title { color: #fb923c; }
.product-status.soldout   .ps-title { color: var(--accent); }
.product-status .ps-desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-2);
  margin-top: 4px;
  letter-spacing: 0;
}

.vshop-card .body { padding: 22px 22px 20px; flex: 1; display: flex; flex-direction: column; }
.vshop-card .body .meta {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 10px;
  display: flex; gap: 10px; align-items: center;
}
.vshop-card .body .meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-3); }
.vshop-card .body .name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 4px;
}
.vshop-card .body .dose { font-size: 13px; color: var(--text-3); margin-bottom: 16px; }
.vshop-card .body .price {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 16px;
}
.vshop-card .body .price .from {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 400;
}
.vshop-card .body .price .amt {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  color: var(--text);
}
.vshop-card .body .price .strike {
  font-size: 13px;
  color: var(--text-3);
  text-decoration: line-through;
}
.vshop-card .body .price .save-pill {
  display: inline-block;
  background: #ff3b30;
  color: #fff;
  font-family: var(--display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 3px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Mobile: wrap the price line so 'From $X $Y SAVE 25%' doesn't overflow card */
@media (max-width: 640px) {
  .vshop-card .body .price {
    flex-wrap: wrap;
    gap: 4px 6px;
    row-gap: 4px;
  }
  .vshop-card .body .price .from { display: none; }
  .vshop-card .body .price .amt { font-size: 18px; }
  .vshop-card .body .price .strike { font-size: 12px; }
  .vshop-card .body .price .save-pill {
    font-size: 8px;
    padding: 2px 6px;
    letter-spacing: 0.1em;
  }
}

.vshop-card .pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: calc(100% - 44px);
  margin: 0 22px 22px;
  padding: 13px 16px;
  border-radius: 999px;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.vshop-card .pill-btn:hover { border-color: var(--text); background: rgba(255,255,255,0.04); }
.vshop-card .pill-btn.solid {
  background: var(--text);
  color: #000;
  border-color: var(--text);
}
.vshop-card .pill-btn.solid:hover { background: var(--accent); border-color: var(--accent); }
/* ADD TO CART variant — cyan brand accent (matches the hero CTA color) */
.vshop-card .pill-btn.cart-cta {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}
.vshop-card .pill-btn.cart-cta:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
}

/* Homepage featured cards — ADD TO CART buttons (cyan, matches shop page) */
.pcard-action.cart-cta {
  background: var(--accent) !important;
  color: #000 !important;
  border: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.pcard-action.cart-cta:hover { background: var(--accent-2) !important; }
.pcard-action.cart-cta svg { stroke: #000; }
.vshop-card .pill-btn.backorder-btn {
  background: #f97316;
  color: #000;
  border-color: #f97316;
}
.vshop-card .pill-btn.backorder-btn:hover { background: #fb923c; }

@media (max-width: 1200px) {
  .vshop-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 880px) {
  .vshop-grid { grid-template-columns: repeat(2, 1fr); padding: 0 20px 80px; }
  .shop-toolbar, .shop-filters { padding-left: 20px; padding-right: 20px; }
  .shop-toolbar { grid-template-columns: 1fr; }
  .vshop-hero { padding: 60px 20px 24px; }
}
@media (max-width: 480px) {
  .vshop-grid { grid-template-columns: 1fr; }
}

/* ===========================================
   PAGE: ABOUT
   =========================================== */
.about-hero {
  text-align: center;
  padding: 100px 56px 60px;
  position: relative;
  z-index: 2;
}
.about-hero .eyebrow { display: inline-block; margin-bottom: 24px; }
.about-hero h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(48px, 7.5vw, 108px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 28px;
}
.about-hero h1 .o {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line-strong);
}
.about-hero .sub {
  margin: 0 auto;
  max-width: 620px;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.7;
}

.mission-split {
  max-width: 1300px;
  margin: 0 auto;
  padding: 40px 56px 80px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  position: relative;
  z-index: 2;
}
.year-card {
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-3) 100%);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 60px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 360px;
}
.year-circle {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: radial-gradient(circle at 50% 30%, rgba(94,196,232,0.12), transparent 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
}
.year-circle .y {
  font-family: var(--display);
  font-weight: 600;
  font-size: 48px;
  color: var(--text);
  letter-spacing: -0.02em;
}
.year-card .label {
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--text);
  margin-bottom: 6px;
}
.year-card .sub-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-3);
}

.mission-text h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 32px;
  letter-spacing: 0.02em;
  margin-bottom: 24px;
}
.mission-text p {
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.75;
  margin-bottom: 18px;
}
.mission-text .mini-stats {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.mission-text .mini-stat {
  display: flex;
  flex-direction: column;
}
.mission-text .mini-stat .v {
  font-family: var(--display);
  font-weight: 600;
  font-size: 28px;
  color: var(--text);
}
.mission-text .mini-stat .l {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 6px;
}

.about-stats-row {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 56px 80px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  position: relative;
  z-index: 2;
}
.about-stat-box {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 36px 28px;
  text-align: center;
}
.about-stat-box .v {
  font-family: var(--display);
  font-weight: 600;
  font-size: 38px;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
}
.about-stat-box .l {
  margin-top: 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
}
.about-stat-box p {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}

.quality-promise {
  max-width: 1300px;
  margin: 0 auto 80px;
  padding: 50px 56px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
  position: relative;
  z-index: 2;
}
.quality-promise h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 32px;
  letter-spacing: 0.02em;
  margin-bottom: 36px;
}
.qp-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.qp-item:first-of-type { border-top: none; padding-top: 0; }
.qp-num {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  color: var(--accent);
}
.qp-item h4 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--text);
  margin-bottom: 8px;
}
.qp-item p {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.65;
  max-width: 760px;
}

.use-only-callout {
  max-width: 1300px;
  margin: 0 auto 80px;
  padding: 28px 32px;
  border: 1px solid rgba(94,196,232,0.2);
  background: rgba(94,196,232,0.04);
  border-radius: 12px;
  position: relative;
  z-index: 2;
}
.use-only-callout .label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.use-only-callout p {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.7;
}

.bottom-cta {
  text-align: center;
  padding: 80px 56px 120px;
  position: relative;
  z-index: 2;
}
.bottom-cta h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.bottom-cta p {
  color: var(--text-2);
  margin-bottom: 32px;
}

/* ===========================================
   PAGE: RESEARCH PARTNERS
   =========================================== */
.partner-hero {
  text-align: center;
  padding: 100px 56px 80px;
  position: relative;
  z-index: 2;
}
.partner-hero .eyebrow {
  color: var(--gold);
  display: inline-block;
  margin-bottom: 26px;
}
.partner-hero h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(48px, 7vw, 100px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: 28px;
}
.partner-hero h1 .row { display: block; }
.partner-hero h1 .gold {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 60%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.partner-hero .sub {
  margin: 0 auto;
  max-width: 620px;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 40px;
}
.partner-hero .sub strong { color: var(--gold); font-weight: 600; }

.btn-gold {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
  color: #1a1409;
  box-shadow: 0 8px 28px rgba(193,150,84,0.25);
}
.btn-gold:hover {
  background: linear-gradient(135deg, var(--gold-2) 0%, var(--gold) 100%);
  transform: translateY(-1px);
  box-shadow: 0 12px 36px rgba(193,150,84,0.4);
}

.partner-stats {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 56px 100px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.partner-stat {
  background: var(--bg);
  padding: 36px 24px;
  text-align: center;
}
.partner-stat .v {
  font-family: var(--display);
  font-weight: 600;
  font-size: 42px;
  line-height: 1;
  color: var(--gold);
  letter-spacing: -0.02em;
}
.partner-stat .l {
  margin-top: 12px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-3);
}

.how-it-works {
  text-align: center;
  padding: 0 56px 100px;
  position: relative;
  z-index: 2;
}
.how-it-works h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(40px, 5.5vw, 64px);
  letter-spacing: -0.02em;
  margin-bottom: 60px;
}
.how-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: left;
}
.how-step {
  position: relative;
}
.how-step .num-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.how-step .num {
  font-family: var(--display);
  font-weight: 600;
  font-size: 56px;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.04em;
}
.how-step .icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(193,150,84,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}
.how-step h4 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--text);
  margin-bottom: 10px;
}
.how-step p { font-size: 14px; color: var(--text-2); line-height: 1.65; }

.benefits-grid {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 56px 100px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  position: relative;
  z-index: 2;
}
.benefit-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 32px 30px;
  background: var(--bg-2);
  transition: border-color 0.3s var(--ease);
}
.benefit-card:hover { border-color: rgba(193,150,84,0.25); }
.benefit-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(193,150,84,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  margin-bottom: 22px;
}
.benefit-card h4 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--text);
  margin-bottom: 10px;
}
.benefit-card p { font-size: 14px; color: var(--text-2); line-height: 1.65; }

.partner-faq-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 56px 120px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.partner-faq-section h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(40px, 5.5vw, 64px);
  letter-spacing: -0.02em;
  margin-bottom: 48px;
}
.partner-faq-list {
  display: flex;
  flex-direction: column;
  text-align: left;
}
details.partner-faq {
  border-bottom: 1px solid var(--line);
}
details.partner-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--text);
  transition: color 0.3s var(--ease);
}
details.partner-faq summary::-webkit-details-marker { display: none; }
details.partner-faq summary:hover { color: var(--gold); }
details.partner-faq summary::before {
  content: '';
  width: 10px; height: 10px;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(-45deg);
  transition: transform 0.3s var(--ease);
  flex-shrink: 0;
}
details.partner-faq[open] summary::before { transform: rotate(45deg); }
details.partner-faq .answer {
  padding: 0 0 22px 26px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.7;
}

@media (max-width: 1024px) {
  .mission-split { grid-template-columns: 1fr; }
  .about-stats-row { grid-template-columns: repeat(2, 1fr); }
  .partner-stats { grid-template-columns: repeat(2, 1fr); }
  .how-grid { grid-template-columns: repeat(2, 1fr); }
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .mission-split, .quality-promise, .about-stats-row, .partner-hero, .about-hero, .how-it-works, .benefits-grid, .partner-faq-section { padding-left: 20px; padding-right: 20px; }
  .quality-promise { padding: 32px 24px; }
  .about-stats-row { grid-template-columns: 1fr; }
  .partner-stats { grid-template-columns: 1fr; }
  .how-grid { grid-template-columns: 1fr; }
  .benefits-grid { grid-template-columns: 1fr; }
  .mission-text .mini-stats { grid-template-columns: 1fr; }
}

/* ===========================================
   PAGE: SOCIALS
   =========================================== */
.socials-hero {
  text-align: center;
  padding: 100px 56px 40px;
  position: relative;
  z-index: 2;
}
.socials-hero .eyebrow { display: inline-block; margin-bottom: 22px; }
.socials-hero h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(48px, 7vw, 100px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 22px;
}
.socials-hero .sub {
  margin: 0 auto;
  max-width: 600px;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.7;
}

.socials-grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 56px 120px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  position: relative;
  z-index: 2;
}
.social-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-3) 100%);
  padding: 40px 36px;
  overflow: hidden;
  transition: border-color 0.4s var(--ease), transform 0.5s var(--ease);
  text-decoration: none;
  color: inherit;
  display: block;
}
.social-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--card-glow, radial-gradient(ellipse at 50% 0%, rgba(94,196,232,0.06), transparent 60%));
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.social-card:hover { transform: translateY(-4px); border-color: var(--card-color, var(--accent)); }
.social-card:hover::before { opacity: 1; }
.social-card-top {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
  position: relative;
}
.social-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  background: var(--card-color, var(--accent));
}
.social-card .platform {
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
  color: var(--text);
}
.social-card .handle {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 13px;
  color: var(--text-3);
  letter-spacing: 0.02em;
}
.social-card .desc {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.65;
  margin-bottom: 28px;
  position: relative;
}
.social-card .cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--card-color, var(--accent));
  color: #000;
  border: none;
  transition: all 0.3s var(--ease);
  position: relative;
}
.social-card:hover .cta { transform: translateX(4px); filter: brightness(1.1); }

/* Per-platform colors */
.social-card.tg {
  --card-color: #2aabee;
  --card-glow: radial-gradient(ellipse at 50% 0%, rgba(42,171,238,0.12), transparent 60%);
}
.social-card.tg .cta { color: #fff; }
.social-card.ig {
  --card-color: #d62976;
  --card-glow: radial-gradient(ellipse at 50% 0%, rgba(214,41,118,0.12), transparent 60%);
}
.social-card.ig .social-icon {
  background: linear-gradient(135deg, #f58529 0%, #dd2a7b 50%, #515bd4 100%);
}
.social-card.ig .cta { color: #fff; }
.social-card.fb {
  --card-color: #1877f2;
  --card-glow: radial-gradient(ellipse at 50% 0%, rgba(24,119,242,0.12), transparent 60%);
}
.social-card.fb .cta { color: #fff; }
.social-card.tt {
  --card-color: #ff0050;
  --card-glow: radial-gradient(ellipse at 50% 0%, rgba(255,0,80,0.12), transparent 60%);
}
.social-card.tt .social-icon {
  background: #000;
}
.social-card.tt .cta { color: #fff; }
.social-card.dc {
  --card-color: #5865f2;
  --card-glow: radial-gradient(ellipse at 50% 0%, rgba(88,101,242,0.14), transparent 60%);
}
.social-card.dc .social-icon {
  background: linear-gradient(135deg, #5865f2 0%, #404eed 100%);
}
.social-card.dc .cta { color: #fff; }

.socials-cta {
  text-align: center;
  padding: 0 56px 120px;
  position: relative;
  z-index: 2;
}
.socials-cta .label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
}
.socials-cta p { color: var(--text-2); max-width: 540px; margin: 0 auto; }

@media (max-width: 700px) {
  .socials-grid { grid-template-columns: 1fr; padding: 40px 20px 80px; }
  .socials-hero { padding: 60px 20px 24px; }
}

/* ===========================================
   PAGE: SPECIALS / DEALS
   =========================================== */
.specials-hero {
  text-align: center;
  padding: 100px 56px 40px;
  position: relative;
  z-index: 2;
}
.specials-hero .badge-pulse {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.25);
  color: #ef4444;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.specials-hero .badge-pulse::before {
  content: '';
  width: 8px; height: 8px;
  background: #ef4444;
  border-radius: 50%;
  box-shadow: 0 0 10px #ef4444;
  animation: pulse-red 1.6s ease-in-out infinite;
}
@keyframes pulse-red {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}
.specials-hero h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(48px, 7vw, 100px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 22px;
}
.specials-hero h1 .accent { color: var(--accent); }
.specials-hero .sub {
  margin: 0 auto;
  max-width: 600px;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.7;
}

.promo-cards {
  max-width: 1300px;
  margin: 60px auto 80px;
  padding: 0 56px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 18px;
  position: relative;
  z-index: 2;
}
.promo-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 36px 32px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  transition: border-color 0.4s var(--ease), transform 0.5s var(--ease);
}
.promo-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.promo-card.featured {
  background:
    radial-gradient(ellipse at 80% 0%, rgba(94,196,232,0.18), transparent 60%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg-3) 100%);
  border-color: rgba(94,196,232,0.25);
}
.promo-card.featured:hover { border-color: var(--accent); }
.promo-card.gold {
  background:
    radial-gradient(ellipse at 80% 0%, rgba(193,150,84,0.16), transparent 60%),
    var(--bg-2);
  border-color: rgba(193,150,84,0.18);
}
.promo-card .tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.promo-card.gold .tag { color: var(--gold); }
.promo-card h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  color: var(--text);
}
.promo-card.featured h3 { font-size: 36px; }
.promo-card p {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 22px;
}
.promo-code {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border: 1px dashed var(--accent);
  color: var(--accent);
  padding: 10px 16px;
  border-radius: 8px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.promo-code:hover { background: rgba(94,196,232,0.06); }
.promo-card.gold .promo-code {
  border-color: var(--gold);
  color: var(--gold);
}
.promo-card.gold .promo-code:hover { background: rgba(193,150,84,0.06); }

.specials-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 56px 80px;
  position: relative;
  z-index: 2;
}
.specials-section .section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 20px;
  flex-wrap: wrap;
}
.specials-section .section-head h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -0.02em;
}
.specials-section .section-head .count-pill {
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}
.specials-section .section-head .count-pill strong { color: var(--text); font-weight: 600; }

.bundle-strip {
  max-width: 1300px;
  margin: 0 auto 80px;
  padding: 36px 48px;
  background: linear-gradient(135deg, rgba(94,196,232,0.05) 0%, rgba(193,150,84,0.05) 100%);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 24px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.bundle-strip .bundle-title {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bundle-strip .bundle-title .small {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
}
.bundle-strip .bundle-title .big {
  font-family: var(--display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.1;
  color: var(--text);
}
.bundle-tier {
  text-align: center;
  padding: 0 8px;
  border-left: 1px solid var(--line);
}
.bundle-tier:first-of-type { border-left: none; }
.bundle-tier .qty {
  font-family: var(--display);
  font-weight: 600;
  font-size: 28px;
  color: var(--text);
  letter-spacing: -0.02em;
}
.bundle-tier .save {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}

@media (max-width: 900px) {
  .promo-cards { grid-template-columns: 1fr; }
  .promo-card.featured h3 { font-size: 28px; }
  .bundle-strip { grid-template-columns: 1fr; gap: 18px; padding: 28px; }
  .bundle-tier { border-left: none; padding: 14px 0; border-top: 1px solid var(--line); }
  .bundle-tier:first-of-type { border-top: none; }
}

/* ===========================================
   FAQ PAGE GROUPS
   =========================================== */
.faq-group { margin-bottom: 40px; }
.faq-group-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

/* ===========================================
   SOCIALS — follower counts + tweaks
   =========================================== */
.social-card .followers {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-2);
}
.social-card .followers strong { color: var(--text); font-weight: 600; }
.social-card .followers .ico {
  width: 14px; height: 14px;
  color: var(--card-color, var(--accent));
}

/* ===========================================
   CART DRAWER
   =========================================== */
/* ===========================================
   CART TOAST (Vylix-style "Added to cart" popup)
   =========================================== */
.cart-toast {
  position: fixed;
  top: 88px;
  right: 24px;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: rgba(10, 10, 12, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(94, 196, 232, 0.25);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03);
  padding: 14px 14px 12px;
  z-index: 9500;
  transform: translate3d(0, -16px, 0);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform, opacity;
}
.cart-toast.show {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  pointer-events: auto;
}
.cart-toast-icon {
  position: absolute;
  top: -10px;
  left: 14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(94, 196, 232, 0.5);
}
.cart-toast-body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0 12px;
}
.cart-toast-thumb {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: #000;
  overflow: hidden;
  flex-shrink: 0;
}
.cart-toast-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-toast-info { flex: 1; min-width: 0; }
.cart-toast-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.cart-toast-name {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cart-toast-actions {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 10px;
}
.cart-toast-view {
  width: 100%;
  padding: 10px;
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 8px;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.cart-toast-view:hover { transform: scale(1.02); }
.cart-toast-view:active { transform: scale(0.98); }

@media (max-width: 480px) {
  .cart-toast { top: 76px; right: 12px; left: 12px; width: auto; }
}

.cart-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 8500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: opacity;
}
.cart-backdrop.open { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed;
  top: 0; right: 0;
  width: 420px;
  max-width: 100vw;
  /* iOS Safari fix: 100vh includes the URL bar area, clips the CHECKOUT button.
     100svh = small viewport, 100dvh = dynamic. Stacked for cross-browser support. */
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  background: var(--bg-2);
  border-left: 1px solid var(--line-strong);
  z-index: 8600;
  transform: translate3d(100%, 0, 0);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -20px 0 60px rgba(0,0,0,0.5);
  will-change: transform;
  backface-visibility: hidden;
  /* Prevent scroll-chaining: when the cart items list reaches its end,
     don't continue scrolling the page underneath. */
  overscroll-behavior: contain;
}
.cart-drawer.open { transform: translate3d(0, 0, 0); }

.cart-drawer-header {
  /* Safe-area top inset so the header doesn't sit under iPhone notches */
  padding: max(22px, calc(env(safe-area-inset-top) + 12px)) 24px 22px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-2);
}
.cart-drawer-header h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
}
.cart-drawer-header h3 .qty-pill {
  background: var(--accent);
  color: #000;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.cart-drawer-header .close {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.cart-drawer-header .close:hover { color: var(--text); border-color: var(--line-strong); }

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  /* iOS momentum scrolling + prevent scroll-chain to the page underneath */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.cart-items::-webkit-scrollbar { width: 6px; }
.cart-items::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }

.cart-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-3);
}
.cart-empty svg { color: var(--text-3); margin-bottom: 18px; }
.cart-empty .btn svg { color: inherit; }
.cart-empty h4 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  color: var(--text);
  margin-bottom: 8px;
}
.cart-empty p { font-size: 14px; margin-bottom: 24px; }

.cart-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.cart-item:last-child { border-bottom: none; }
.cart-item .thumb {
  width: 56px; height: 56px;
  border-radius: 8px;
  background: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cart-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-item .info { display: flex; flex-direction: column; gap: 3px; }
.cart-item .info .name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  line-height: 1.25;
}
.cart-item .info .dose { font-size: 12px; color: var(--text-3); }
.cart-item .info .price { display: none; }
.cart-item .qty-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  width: fit-content;
}
.cart-item .qty-row button {
  width: 28px; height: 28px;
  background: transparent;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  font-size: 14px;
}
.cart-item .qty-row button:hover { color: var(--accent); }
.cart-item .qty-row .q {
  min-width: 24px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.cart-item .remove {
  background: transparent;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s var(--ease);
}
.cart-item .remove:hover { color: var(--danger); }
.cart-item .line-total {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  text-align: right;
  margin-top: 8px;
}

.cart-footer {
  border-top: 1px solid var(--line);
  /* Safe-area bottom inset so the CHECKOUT button clears the iPhone home indicator */
  padding: 20px 24px max(24px, calc(env(safe-area-inset-bottom) + 14px));
  background: var(--bg-2);
}
.cart-footer .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  color: var(--text-2);
  font-size: 13px;
}
.cart-footer .row.subtotal {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  font-family: var(--display);
}
.cart-footer .row.subtotal .amount { color: var(--accent); font-size: 22px; }
.cart-footer .shipping-note {
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}
.cart-footer .checkout-btn {
  width: 100%;
  padding: 18px;
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 999px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: all 0.3s var(--ease);
  margin-bottom: 8px;
}
.cart-footer .checkout-btn:hover { background: var(--accent-2); transform: translateY(-1px); }
.cart-footer .keep-shopping {
  width: 100%;
  padding: 12px;
  background: transparent;
  border: none;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
}
.cart-footer .keep-shopping:hover { color: var(--text); }

/* Mobile drawer */
@media (max-width: 480px) {
  .cart-drawer { width: 100vw; }
}

/* ===========================================
   MOBILE NAV — hamburger menu
   =========================================== */
.hamburger {
  display: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  position: relative;
  z-index: 200;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2.5px;
  background: currentColor;
  border-radius: 2px;
  margin: 5px auto;
  transition: all 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  max-height: 100svh;
  background: rgba(8,8,12,0.985);
  backdrop-filter: saturate(150%) blur(28px);
  -webkit-backdrop-filter: saturate(150%) blur(28px);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  box-shadow: 0 18px 60px rgba(0,0,0,0.7);
  z-index: 8000;
  padding: 12px 0 env(safe-area-inset-bottom, 0px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-100%, 0, 0);
  transition: opacity 0.26s cubic-bezier(0.32, 0.72, 0, 1), transform 0.34s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@supports (padding: env(safe-area-inset-top)) {
  .mobile-menu { top: 0; }
}
.hamburger { z-index: 8100; position: relative; }
.mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}

/* Header row in the menu — label + close X */
.mobile-menu .mm-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 16px 22px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
  position: sticky;
  top: 0;
  background: inherit;
  z-index: 2;
}
.mobile-menu .mm-title {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}
.mobile-menu .mm-close {
  width: 38px; height: 38px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text);
  font-size: 20px;
  font-weight: 300;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition: background 0.15s, transform 0.15s;
}
.mobile-menu .mm-close:active {
  background: rgba(255,255,255,0.14);
  transform: scale(0.92);
}

/* Nav links inside menu */
.mobile-menu a {
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: var(--display);
  padding: 18px 22px;
  text-align: left;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: color 0.2s var(--ease), background 0.15s;
}
.mobile-menu a::after {
  content: '›';
  font-size: 22px;
  font-weight: 400;
  color: var(--text-3);
  letter-spacing: 0;
  transition: transform 0.18s, color 0.18s;
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a:active {
  background: rgba(94,196,232,0.06);
  color: var(--accent);
}
.mobile-menu a:active::after { transform: translateX(3px); color: var(--accent); }
.mobile-menu a.active { color: var(--accent); }
.mobile-menu a.active::after { color: var(--accent); }

@media (max-width: 1024px) {
  .hamburger {
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
  }
  .hamburger span {
    display: block !important;
    margin: 2.5px 0 !important;
  }
  nav.main { display: none; }
  header { grid-template-columns: 1fr auto; padding: 18px 24px; }
  header.scrolled { padding: 14px 24px; }
}
@media (min-width: 1025px) {
  .mobile-menu { display: none !important; }
}

/* Smaller hero on mobile */
@media (max-width: 640px) {
  .hero { padding: 50px 20px 60px; min-height: auto; }
  .hero-stats { flex-direction: column; border-radius: 16px; padding: 8px; }
  /* No dividers on mobile — the 760px override forces horizontal layout,
     and the stubby border lines look broken against the taller pill padding. */
  .hero-stats .stat { border-right: none; border-bottom: none; width: 100%; padding: 12px 18px; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { justify-content: center; }
  .features { grid-template-columns: 1fr; }
  .feature { border-right: none; border-bottom: 1px solid var(--line); padding: 40px 20px; }
  .feature:last-child { border-bottom: none; }
  .about-split { grid-template-columns: 1fr; gap: 40px; padding: 0 20px; }
  .faq-split { grid-template-columns: 1fr; gap: 40px; }
  section { padding: 60px 20px; }
  footer { padding: 60px 20px 24px; }
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }
  .foot-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .foot-bottom .right { text-align: center; }
  .disclaimer-box { padding: 18px 20px; }
  .promo-cards { padding: 0 20px; }
  .specials-hero, .page-hero, .partner-hero, .about-hero, .vshop-hero { padding-left: 20px; padding-right: 20px; }
  .specials-section { padding: 0 20px 60px; }
}

/* ===========================================
   RESEARCH PARTNERS — REPAINTED BLUE
   =========================================== */
.partner-hero .eyebrow { color: var(--accent); }
.partner-hero h1 .gold {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 60%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.partner-hero .sub strong { color: var(--accent); }

.btn-gold {
  background: var(--accent);
  color: #000;
  box-shadow: 0 8px 28px rgba(94,196,232,0.25);
}
.btn-gold:hover {
  background: var(--accent-2);
  transform: translateY(-1px);
  box-shadow: 0 12px 36px rgba(94,196,232,0.4);
}

.partner-stat .v { color: var(--accent); }
.how-it-works .eyebrow { color: var(--accent) !important; }
.how-step .num { color: var(--accent); }
.how-step .icon {
  color: var(--accent);
  background: rgba(94,196,232,0.08);
}

.benefit-card:hover { border-color: rgba(94,196,232,0.3); }
.benefit-icon {
  color: var(--accent);
  background: rgba(94,196,232,0.08);
}

.partner-faq-section .eyebrow { color: var(--accent) !important; }
details.partner-faq summary:hover { color: var(--accent); }
details.partner-faq summary::before {
  border-right-color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ===========================================
   COA / LAB RESULTS PAGE
   =========================================== */
.coa-toolbar {
  max-width: 1300px;
  margin: 0 auto 32px;
  padding: 0 56px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  position: relative;
  z-index: 2;
}
.coa-toolbar .search {
  position: relative;
}
.coa-toolbar .search input {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font-family: var(--body);
  font-size: 14px;
  padding: 16px 24px 16px 52px;
}
.coa-toolbar .search input:focus { outline: none; border-color: var(--accent); }
.coa-toolbar .search svg {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
}
.coa-toolbar .pills {
  display: flex;
  gap: 6px;
}
.coa-toolbar .pill {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text-2);
  border-radius: 999px;
  padding: 14px 20px;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.coa-toolbar .pill:hover { color: var(--text); border-color: var(--text-2); }
.coa-toolbar .pill.active { background: var(--text); color: #000; border-color: var(--text); }

.coa-table-wrap {
  max-width: 1300px;
  margin: 0 auto 80px;
  padding: 0 56px;
  position: relative;
  z-index: 2;
}
.coa-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-2);
}
.coa-table thead { background: var(--bg-3); }
.coa-table th {
  text-align: left;
  padding: 16px 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--line);
}
.coa-table td {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 14px;
  vertical-align: middle;
}
.coa-table tbody tr:last-child td { border-bottom: none; }
.coa-table tbody tr { transition: background 0.2s var(--ease); }
.coa-table tbody tr:hover { background: rgba(94,196,232,0.04); }
.coa-table .compound-cell {
  display: flex;
  align-items: center;
  gap: 14px;
}
.coa-table .compound-cell .thumb {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: linear-gradient(180deg, #d8d8dd, #f0f0f3);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.coa-table .compound-cell .thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.coa-table .compound-cell .info .name {
  font-weight: 600;
  font-family: var(--display);
}
.coa-table .compound-cell .info .dose {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}
.coa-table .purity-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
  background: rgba(94,196,232,0.1);
  padding: 4px 10px;
  border-radius: 999px;
}
.coa-table .download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s var(--ease);
  text-decoration: none;
}
.coa-table .download-btn:hover { background: var(--accent-2); }

/* Pending COA badge — for products without uploaded PDFs yet */
.coa-table .pending-coa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(251,191,36,0.05);
  border: 1px solid rgba(251,191,36,0.2);
  border-radius: 999px;
  cursor: help;
  white-space: nowrap;
}
.coa-table .pending-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #fbbf24;
  text-transform: uppercase;
}
.coa-table .pending-bar {
  width: 50px;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}
.coa-table .pending-bar-fill {
  width: 75%;
  height: 100%;
  background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
  border-radius: 2px;
  animation: pending-pulse 2.2s ease-in-out infinite;
}
@keyframes pending-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.coa-table .method-cell {
  font-family: var(--body);
  font-size: 12.5px;
  color: var(--text-2);
  letter-spacing: 0;
  line-height: 1.5;
}
.coa-table .date-cell {
  font-size: 12px;
  color: var(--text-3);
}

@media (max-width: 880px) {
  .coa-toolbar { grid-template-columns: 1fr; padding: 0 20px; }
  .coa-table-wrap { padding: 0 20px; }
  .coa-table thead { display: none; }
  .coa-table tr {
    display: block;
    padding: 16px;
    border-bottom: 1px solid var(--line);
  }
  .coa-table td {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border: none;
  }
  .coa-table td::before {
    content: attr(data-label);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--text-3);
    font-weight: 600;
  }
}

/* ===========================================
   FULL-PAGE CART
   =========================================== */
.cart-page-layout {
  max-width: 1300px;
  margin: 0 auto;
  padding: 40px 56px 120px;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 48px;
  position: relative;
  z-index: 2;
}
.cart-page-items {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
  overflow: hidden;
}
.cart-page-item {
  display: grid;
  grid-template-columns: 100px 1fr auto auto;
  gap: 20px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.cart-page-item:last-child { border-bottom: none; }
.cart-page-item .thumb {
  width: 100px; height: 100px;
  border-radius: 10px;
  background: #000;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cart-page-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-page-item .info .name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  color: var(--text);
  margin-bottom: 4px;
}
.cart-page-item .info .dose { font-size: 13px; color: var(--text-3); }
.cart-page-item .info .price { font-family: var(--display); font-weight: 600; color: var(--text); margin-top: 8px; }
.cart-page-item .qty-row {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
}
.cart-page-item .qty-row button {
  width: 36px; height: 36px;
  background: transparent;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  font-size: 16px;
}
.cart-page-item .qty-row button:hover { color: var(--accent); }
.cart-page-item .qty-row .q { min-width: 32px; text-align: center; line-height: 36px; color: var(--text); font-weight: 600; }
.cart-page-item .line {
  text-align: right;
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  color: var(--text);
}
.cart-page-item .remove-btn {
  display: block;
  margin-top: 6px;
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
.cart-page-item .remove-btn:hover { color: var(--danger); }

.cart-page-summary {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
  padding: 28px;
  align-self: start;
  position: sticky;
  top: 100px;
}
.cart-page-summary h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.06em;
  margin-bottom: 22px;
  color: var(--text);
}
.cart-page-summary .row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  color: var(--text-2);
  font-size: 14px;
}
.cart-page-summary .row.total {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-top: 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  color: var(--text);
}
.cart-page-summary .row.total .amount { color: var(--accent); font-size: 22px; }
.cart-page-summary .promo-input {
  display: flex;
  gap: 8px;
  margin: 18px 0;
}
.cart-page-summary .promo-input input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 6px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.cart-page-summary .promo-input input:focus { outline: none; border-color: var(--accent); }
.cart-page-summary .promo-input button {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text);
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
.cart-page-summary .promo-input button:hover { border-color: var(--accent); color: var(--accent); }
.cart-page-summary .ship-note {
  font-size: 12px;
  color: var(--text-3);
  margin: 14px 0 20px;
}
.cart-page-summary .checkout-big {
  display: block;
  width: 100%;
  padding: 18px;
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 999px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  margin-bottom: 10px;
  transition: background 0.2s var(--ease);
}
.cart-page-summary .checkout-big:hover { background: var(--accent-2); }

@media (max-width: 900px) {
  .cart-page-layout { grid-template-columns: 1fr; padding: 30px 20px 80px; }
  .cart-page-summary { position: relative; top: 0; }
  .cart-page-item {
    grid-template-columns: 60px 1fr auto;
    grid-template-areas: "thumb info line" "thumb qty line";
    gap: 4px 12px; padding: 12px 14px; align-items: center;
  }
  .cart-page-item .thumb { width: 60px; height: 60px; grid-area: thumb; align-self: center; }
  .cart-page-item .info { grid-area: info; }
  .cart-page-item .info .name { font-size: 15px; margin-bottom: 2px; }
  .cart-page-item .info .dose { font-size: 12px; }
  .cart-page-item .info .price { display: none; }
  .cart-page-item > div:nth-of-type(3) { grid-area: qty; }
  .cart-page-item > div:nth-of-type(4) { grid-area: line; text-align: right; align-self: center; }
  .cart-page-item .line { font-size: 15px; margin-bottom: 4px; }
  .cart-page-item .qty-row button { width: 32px; height: 32px; }
  .cart-page-item .qty-row .q { line-height: 32px; min-width: 26px; }
}

/* ===========================================
   LEGAL PAGES (Terms, Privacy, Refund, Shipping)
   =========================================== */
.legal-layout {
  max-width: 920px;
  margin: 0 auto;
  padding: 40px 56px 120px;
  position: relative;
  z-index: 2;
}
.legal-layout .updated {
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 32px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.legal-layout h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--text);
  margin-top: 40px;
  margin-bottom: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.legal-layout h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.legal-layout p, .legal-layout li {
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 16px;
}
.legal-layout ul, .legal-layout ol { padding-left: 24px; margin-bottom: 20px; }
.legal-layout li { margin-bottom: 8px; }
.legal-layout a { color: var(--accent); border-bottom: 1px solid currentColor; }
.legal-layout strong { color: var(--text); }

@media (max-width: 640px) {
  .legal-layout { padding: 30px 20px 80px; }
}

/* ===========================================
   PRODUCT DETAIL PAGE
   =========================================== */
.product-page {
  max-width: 1300px;
  margin: 0 auto;
  padding: 30px 56px 100px;
  position: relative;
  z-index: 2;
}
.breadcrumbs {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 32px;
}
.breadcrumbs a { color: var(--text-2); }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs .sep { margin: 0 10px; color: var(--text-3); }
.breadcrumbs .current { color: var(--text); }

.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.product-media {
  position: sticky;
  top: 100px;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vol-box {
  margin: 20px 0 28px;
  border: 1px solid rgba(94,196,232,0.25);
  background: linear-gradient(135deg, rgba(94,196,232,0.06) 0%, rgba(94,196,232,0.01) 100%);
  border-radius: 12px;
  padding: 16px 20px;
}
.vol-box-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.vol-box-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.vol-box-tiers .vbt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 6px;
  border-radius: 8px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(94,196,232,0.18);
  transition: all 0.2s var(--ease);
}
.vol-box-tiers .vbt:hover {
  border-color: var(--accent);
  background: rgba(94,196,232,0.08);
}
.vol-box-tiers .pct {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
}
.vol-box-tiers .lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
}
.vol-box-foot {
  margin-top: 12px;
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
  letter-spacing: 0.06em;
}

.product-info .meta {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.product-info .meta .pill {
  background: rgba(94,196,232,0.1);
  color: var(--accent);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
}
.product-info h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(36px, 4.5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.product-info .tagline {
  font-size: 16px;
  color: var(--text-2);
  margin-bottom: 28px;
  line-height: 1.6;
}
.product-info .price-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.product-info .price-row .amt {
  font-family: var(--display);
  font-weight: 600;
  font-size: 36px;
  color: var(--text);
}
.product-info .price-row .strike {
  font-size: 20px;
  color: var(--text-3);
  text-decoration: line-through;
}
.product-info .price-row .save-pill {
  background: rgba(239,68,68,0.12);
  color: #ef4444;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 5px 10px;
  border-radius: 6px;
  text-transform: uppercase;
}

.dose-selector {
  margin-bottom: 24px;
}
.dose-selector .label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 12px;
}
.dose-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dose-options button {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text);
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.dose-options button:hover { border-color: #fff; color: #fff; }
.dose-options button.active {
  background: #fff;
  border-color: #fff;
  color: #000;
}

.qty-and-buy {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  margin-bottom: 28px;
}
.qty-stepper {
  display: flex;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  overflow: hidden;
  align-items: center;
}
.qty-stepper button {
  width: 40px; height: 50px;
  background: transparent;
  border: none;
  color: var(--text-2);
  font-size: 18px;
  cursor: pointer;
}
.qty-stepper button:hover { color: var(--accent); }
.qty-stepper .qty {
  flex: 1;
  text-align: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
}
.buy-btn {
  background: #fff;
  color: #000;
  border: none;
  border-radius: 999px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: all 0.3s var(--ease);
}
.buy-btn:hover { background: #f0f0f0; transform: translateY(-1px); }

.product-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 18px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 32px;
}
.product-trust .item {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-2);
}
.product-trust .item svg { color: var(--accent); margin-bottom: 6px; }
.product-trust .item strong { display: block; color: var(--text); font-weight: 600; font-size: 12px; }

.product-tabs {
  margin-top: 16px;
}
.product-tabs .tab-headers {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.product-tabs .tab-h {
  padding: 14px 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s var(--ease);
  margin-bottom: -1px;
}
.product-tabs .tab-h:hover { color: var(--text); }
.product-tabs .tab-h.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
/* Phone: all four tabs fit one row from 360px up. If they don't, they wrap instead of losing the last one off the edge. */
@media (max-width: 480px) {
  .product-tabs .tab-headers { gap: 12px; flex-wrap: wrap; }
  .product-tabs .tab-h { letter-spacing: 0.07em; }
}
.product-tabs .tab-body { display: none; color: var(--text-2); font-size: 14px; line-height: 1.7; }
.product-tabs .tab-body.active { display: block; }
.product-tabs .tab-body p { margin-bottom: 12px; }
.product-tabs .spec-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.product-tabs .spec-row:last-child { border-bottom: none; }
.product-tabs .spec-row .k {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.product-tabs .spec-row .v { color: var(--text); }

.related-section {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 56px 100px;
  position: relative;
  z-index: 2;
}
.related-section h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: 0.04em;
  margin-bottom: 28px;
}

@media (max-width: 900px) {
  .product-page { padding: 20px 20px 80px; }
  .product-grid { grid-template-columns: 1fr; gap: 32px; }
  .product-media { position: relative; top: 0; }
  .related-section { padding: 0 20px 80px; }
}

/* ===========================================
   TRACK ORDER PAGE
   =========================================== */
.track-form {
  max-width: 540px;
  margin: 40px auto 120px;
  padding: 40px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-2);
  position: relative;
  z-index: 2;
}
.track-form .field { margin-top: 22px; }
.track-form .field:first-child { margin-top: 0; }
.track-form button {
  width: 100%;
  margin-top: 28px;
  padding: 16px;
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
}
.track-form button:hover { background: var(--accent-2); }
.track-form .helper {
  margin-top: 24px;
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}
.track-form .helper a { color: var(--accent); }

@media (max-width: 640px) {
  .track-form { margin: 20px 20px 80px; padding: 28px 24px; }
}

/* ===========================================
   CHECKOUT PAGE
   =========================================== */
.checkout-layout {
  max-width: 1280px;
  margin: 0 auto;
  padding: 30px 56px 120px;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  position: relative;
  z-index: 2;
}

.checkout-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 36px;
}
.checkout-step {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  position: relative;
}
.checkout-step .num {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
  color: var(--text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  transition: all 0.3s var(--ease);
}
.checkout-step .label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
  transition: color 0.3s var(--ease);
}
.checkout-step::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
  margin-left: 12px;
}
.checkout-step:last-child::after { display: none; }
.checkout-step.active .num { background: var(--accent); color: #000; border-color: var(--accent); }
.checkout-step.active .label { color: var(--text); }
.checkout-step.done .num { background: var(--accent); color: #000; border-color: var(--accent); }
.checkout-step.done .label { color: var(--text-2); }

.checkout-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 32px;
  margin-bottom: 16px;
}
.checkout-card h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.04em;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.checkout-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.checkout-fields .full { grid-column: 1 / -1; }
.checkout-fields .field { margin-top: 0; }

.pay-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 24px;
}
.pay-option {
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 24px;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s var(--ease);
  background: transparent;
  color: inherit;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.pay-option:hover { border-color: var(--accent); background: rgba(94,196,232,0.04); }
.pay-option.selected {
  border-color: var(--accent);
  background: rgba(94,196,232,0.08);
}
.pay-option.selected::after {
  content: '✓';
  position: absolute;
  top: 12px; right: 14px;
  width: 22px; height: 22px;
  background: var(--accent);
  color: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}
.pay-logo {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pay-logo.venmo {
  background: #3D95CE;
  color: #fff;
  padding: 8px 18px;
  border-radius: 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  font-style: italic;
}
.pay-logo.zelle {
  background: #6D1ED4;
  color: #fff;
  padding: 8px 22px;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.pay-logo.btc {
  background: linear-gradient(135deg, #F7931A, #ffaa3c);
  color: #fff;
  padding: 8px 22px;
  border-radius: 8px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.04em;
}
.pay-logo.crypto {
  background: linear-gradient(135deg, #F7931A 0%, #E07512 100%);
  color: #fff;
  padding: 8px 22px;
  border-radius: 8px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.04em;
}
.pay-logo.card {
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  color: #fff;
  padding: 8px 22px;
  border-radius: 8px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255,255,255,0.08);
}
.pay-logo.paypal {
  background: linear-gradient(135deg, #003087 0%, #009cde 100%);
  color: #fff;
  padding: 8px 22px;
  border-radius: 8px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.02em;
  border: 1px solid rgba(255,255,255,0.10);
}
/* Coming-soon PayPal spans the full row beneath the 2x2 grid */
.pay-option[data-pay="paypal"] { grid-column: 1 / -1; }
/* Pending payment options — visible but not selectable until enabled */
.pay-option.pending {
  position: relative;
  opacity: 0.62;
  cursor: not-allowed;
}
.pay-option.pending:hover {
  border-color: var(--line) !important;
  background: transparent !important;
  transform: none !important;
}
.pay-option .pending-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: var(--display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: #fbbf24;
  color: #000;
  padding: 4px 9px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
}
.pay-option .name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  color: var(--text);
}
.pay-option .desc {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
}

.pay-instructions {
  border: 1px dashed var(--accent);
  background: rgba(94,196,232,0.04);
  border-radius: 12px;
  padding: 22px;
  margin-bottom: 8px;
  display: none;
}
.pay-instructions.show { display: block; }
.pay-instructions .head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.pay-instructions .handle {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg);
  padding: 12px 16px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  cursor: pointer;
  border: 1px solid var(--line-strong);
}
.pay-instructions .handle:hover { border-color: var(--accent); }
.pay-instructions ol { padding-left: 22px; color: var(--text-2); font-size: 13px; line-height: 1.7; }
.pay-instructions ol li { margin-bottom: 6px; }
.pay-instructions strong { color: var(--text); }

.review-items {
  margin-bottom: 16px;
}
.review-row {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.review-row:last-child { border-bottom: none; }
.review-row .thumb {
  width: 60px; height: 60px;
  border-radius: 8px;
  background: #000;
  overflow: hidden;
  flex-shrink: 0;
}
.review-row .thumb img { width: 100%; height: 100%; object-fit: cover; }
.review-row .info .name { font-family: var(--display); font-weight: 600; color: var(--text); }
.review-row .info .dose { font-size: 12px; color: var(--text-3); }
.review-row .info .qty { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.review-row .line { font-family: var(--display); font-weight: 600; color: var(--text); }

.checkout-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  gap: 12px;
}
.checkout-nav .back {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text-2);
  padding: 14px 24px;
  border-radius: 999px;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.checkout-nav .back:hover { color: var(--text); border-color: var(--text-2); }
.checkout-nav .next {
  background: var(--accent);
  color: #000;
  border: none;
  padding: 16px 36px;
  border-radius: 999px;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s var(--ease);
}
.checkout-nav .next:hover { background: var(--accent-2); transform: translateY(-1px); }

.checkout-summary {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
  padding: 24px;
  position: sticky;
  top: 100px;
  align-self: start;
}
.checkout-summary h4 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 18px;
  color: var(--text);
}
.checkout-summary .sum-items {
  margin-bottom: 16px;
}
.checkout-summary .sum-item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 10px;
  padding: 8px 0;
  font-size: 12px;
  color: var(--text-2);
  align-items: center;
}
.checkout-summary .sum-item .t {
  width: 48px; height: 48px;
  border-radius: 6px;
  background: #000;
  overflow: hidden;
}
.checkout-summary .sum-item .t img { width: 100%; height: 100%; object-fit: cover; padding: 0; }
.checkout-summary .sum-item .n { font-weight: 600; color: var(--text); font-size: 13px; }
.checkout-summary .sum-item .q { font-size: 11px; color: var(--text-3); }
.checkout-summary .sum-item .p { font-family: var(--display); font-weight: 600; color: var(--text); font-size: 13px; }
.checkout-summary .row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  color: var(--text-2);
  font-size: 13px;
  border-top: 1px solid var(--line);
}
.checkout-summary .row.total {
  padding-top: 14px;
  margin-top: 4px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  color: var(--text);
}
.checkout-summary .row.total .a { color: var(--accent); font-size: 22px; }

@media (max-width: 900px) {
  .checkout-layout { grid-template-columns: 1fr; padding: 30px 20px 80px; }
  .checkout-card { padding: 22px; }
  .checkout-fields { grid-template-columns: 1fr; }
  .checkout-summary { position: relative; top: 0; }
}
/* Phone: payment options in a tight 2-column grid (Venmo|Zelle, Crypto|Card).
   Smaller padding + smaller fonts so they fit. */
@media (max-width: 640px) {
  .pay-options { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pay-option { padding: 14px 10px; gap: 8px; }
  .pay-option .pay-logo { padding: 6px 14px; font-size: 13px; }
  .pay-option .name { font-size: 13px; }
  .pay-option .desc { font-size: 10px; line-height: 1.35; letter-spacing: 0.02em; }
  /* Card sits in the grid like the rest — Venmo|Zelle, Crypto|Card */
  .pay-option .pending-badge { font-size: 8px; padding: 3px 7px; top: 8px; right: 8px; }
}

/* ===========================================
   ORDER CONFIRMATION PAGE
   =========================================== */
.confirmed-page {
  max-width: 740px;
  margin: 0 auto;
  padding: 60px 56px 120px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.confirmed-page .check {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(94,196,232,0.18), transparent 70%);
  border: 1px solid var(--accent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
}
.confirmed-page h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.confirmed-page .sub {
  color: var(--text-2);
  font-size: 16px;
  margin-bottom: 36px;
}
.order-detail-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-2);
  padding: 32px;
  margin-bottom: 24px;
  text-align: left;
}
.order-detail-card .row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.order-detail-card .row:last-child { border-bottom: none; }
.order-detail-card .row .k { color: var(--text-3); letter-spacing: 0.04em; }
.order-detail-card .row .v { color: var(--text); font-weight: 600; font-family: var(--display); }
.order-detail-card .row .v.mono { font-family: var(--mono, ui-monospace, monospace); font-weight: 500; letter-spacing: 0.08em; }
.order-detail-card .row .v.amt { color: var(--accent); font-size: 18px; }

.payment-instructions {
  border: 1px solid var(--accent);
  background: rgba(94,196,232,0.06);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 24px;
  text-align: left;
}
.payment-instructions h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
  color: var(--accent);
}
.payment-instructions p { color: var(--text-2); font-size: 14px; margin-bottom: 18px; }

/* Scan-to-pay QR block */
.payment-instructions .pay-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 20px 4px;
  margin-bottom: 22px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}
.payment-instructions .pay-qr-label {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #000;
}
.payment-instructions #pay-qr-img {
  display: block;
  width: 220px;
  height: 220px;
  border-radius: 8px;
}
.payment-instructions .pay-qr-note {
  font-size: 12px;
  color: #444;
  text-align: center;
  max-width: 280px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.payment-instructions .pay-qr-divider {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
  padding: 14px 0 8px;
}
.payment-instructions .pay-qr-divider::before,
.payment-instructions .pay-qr-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(0,0,0,0.12);
}
.payment-instructions .pay-qr-divider span {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #777;
}

/* Mobile-only "OPEN VENMO" deep-link button (replaces the QR
   on phones, since you can't scan your own screen). */
.payment-instructions .pay-app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 320px;
  padding: 18px 24px;
  background: var(--accent);
  color: #000;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.15s, transform 0.15s;
  box-shadow: 0 6px 24px rgba(94,196,232,0.3);
}
.payment-instructions .pay-app-btn:hover { background: var(--accent-2); }
.payment-instructions .pay-app-btn:active { transform: scale(0.98); }
.payment-instructions .pay-app-btn,
.payment-instructions .pay-app-btn:link,
.payment-instructions .pay-app-btn:visited { color: #000; }

/* Phone-only: tighten up the order-confirmed page so the order summary and
   payment instructions fit closer together — less scrolling, less wasted space */
@media (max-width: 640px) {
  /* Tighten the header so payment instructions are visible above the fold */
  .confirmed-page { padding: 20px 18px 60px; }
  .confirmed-page .check { width: 48px; height: 48px; margin-bottom: 12px; }
  .confirmed-page .check svg { width: 22px; height: 22px; }
  .confirmed-page h1 { font-size: clamp(24px, 7vw, 30px); margin-bottom: 8px; }
  .confirmed-page .sub { font-size: 13px; margin-bottom: 16px; line-height: 1.45; }
  .order-detail-card { padding: 18px 20px; margin-bottom: 16px; border-radius: 12px; margin-top: 16px; }
  .order-detail-card .row { padding: 8px 0; font-size: 13px; }
  .payment-instructions { padding: 22px 18px; border-radius: 12px; }
  .payment-instructions h3 { font-size: 14px; margin-bottom: 12px; }
  .payment-instructions p { font-size: 13px; margin-bottom: 14px; line-height: 1.5; }
  .payment-instructions .pay-qr { padding: 18px 14px 4px; margin-bottom: 16px; }
  .payment-instructions .pay-qr-label { font-size: 10px; }
  .payment-instructions .pay-handle { padding: 12px 14px; }
}

.payment-instructions .pay-handle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 14px;
}
.payment-instructions .pay-handle .k {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 4px;
}
.payment-instructions .pay-handle .v {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.04em;
}
.payment-instructions .pay-handle .copy {
  background: var(--accent);
  color: #000;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
.payment-instructions .pay-handle .copy:hover { background: var(--accent-2); }
.payment-instructions ol { padding-left: 22px; color: var(--text-2); font-size: 14px; line-height: 1.7; }
.payment-instructions ol li { margin-bottom: 6px; }
.payment-instructions ol strong { color: var(--text); }

.confirmed-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 16px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .confirmed-page { padding: 40px 20px 80px; }
  .order-detail-card, .payment-instructions { padding: 22px; }
}

/* ===========================================
   📱 VYLIX-STYLE MOBILE POLISH (iPhone-first)
   =========================================== */

/* iOS notch + home-indicator safe areas */
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  header#site-header {
    padding-top: max(20px, env(safe-area-inset-top));
  }
  footer {
    padding-bottom: max(40px, calc(env(safe-area-inset-bottom) + 30px));
  }
}

/* Prevent iOS auto-zoom on form focus (fires when input font < 16px) */
@media (max-width: 760px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* Bigger tap targets — Apple HIG min 44px */
@media (max-width: 760px) {
  .btn, .pcard-action, .pill-btn, .pill, .filter-pill,
  .qty-stepper button, .pay-option, button.next, button.back,
  .icon-btn, header nav.main a {
    min-height: 44px;
  }
  .qty-stepper button { min-width: 44px; }
  .icon-btn { width: 44px; height: 44px; }
}

/* Kill stuck :hover on touch devices */
@media (hover: none) {
  .pcard:hover, .vshop-card:hover, .pcard:hover .pcard-media img,
  .vshop-card:hover .media img { transform: none; }
  .btn:hover, .pill-btn:hover { background: inherit; }
}

/* Desktop/tablet hides the phone-only MOTS-c card (Ipamorelin shows instead) */
@media (min-width: 761px) {
  #shop .home-mobile-only { display: none !important; }
}

/* Home product cards: sale layout — discounted price + strike-through original + SAVE % badge */
#shop .pcard .price .strike {
  font-size: 13px;
  color: var(--text-3);
  text-decoration: line-through;
  margin-left: 8px;
  font-weight: 400;
}
#shop .pcard .price .save-pill {
  display: inline-block;
  vertical-align: middle;
  background: rgba(239,68,68,0.12);
  color: #ef4444;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 7px;
  border-radius: 5px;
  text-transform: uppercase;
  margin-left: 8px;
  white-space: nowrap;
}
@media (max-width: 760px) {
  #shop .pcard .price .from { display: none; }
  #shop .pcard .price .strike { font-size: 12px; margin-left: 6px; }
  #shop .pcard .price .save-pill { font-size: 9px; padding: 2px 6px; margin-left: 6px; }
}

/* Mobile shop: 2-column grid (matches Vylix) */
@media (max-width: 760px) {
  .vshop-grid, .grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 0 16px 60px !important;
  }
  /* Homepage featured grid: 8 cards on desktop, 6 on mobile — hide the last 2 */
  #shop .home-extra { display: none !important; }
  /* Phone shows MOTS-c instead of Ipamorelin */
  #shop .home-desktop-only { display: none !important; }
  .vshop-card .body,
  .pcard-body { padding: 14px 14px 14px !important; }
  .vshop-card .name, .pcard h3 { font-size: 14px !important; }
  .vshop-card .price .amt, .pcard .price { font-size: 16px !important; }
  .pcard-action, .vshop-card .pill-btn { padding: 12px !important; font-size: 11px !important; }
}

/* Mobile hero polish — Vylix-style FULL CENTER */
@media (max-width: 760px) {
  .hero {
    min-height: calc(100svh - 80px);
    padding: 30px 20px 80px !important;
    text-align: center;
    align-items: center;
    justify-content: center;
  }
  .hero-inner {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero .eyebrow {
    margin: 0 auto 24px !important;
    text-align: center;
  }
  .hero h1 {
    font-size: clamp(44px, 14vw, 72px) !important;
    line-height: 1 !important;
    text-align: center;
  }
  .hero h1 .row { text-align: center; }
  .hero-sub {
    margin: 24px auto 32px !important;
    font-size: 14px !important;
    text-align: center;
    max-width: 380px;
  }
  .cta-row {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    gap: 12px;
    align-items: stretch;
  }
  .cta-row .btn {
    justify-content: center;
    width: 100%;
  }

  /* Vylix-style rounded stats pill with vertical dividers */
  .hero-stats {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    margin: 36px auto 0 !important;
    padding: 14px 8px !important;
    border-radius: 999px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
    width: fit-content;
    justify-content: center;
  }
  .hero-stats .stat {
    padding: 4px 18px !important;
    /* Mobile: drop the stubby right-border divider — looked weird because .stat
       padding (4px) is much shorter than the pill padding (14px), so the line
       only covered the middle ~30% of the pill height. Bubble + spacing reads cleaner. */
    border-right: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .hero-stats .stat-value {
    font-family: var(--display);
    font-size: 18px !important;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
  }
  .hero-stats .stat-label {
    font-size: 9px !important;
    letter-spacing: 0.14em !important;
    color: var(--text-3);
    text-transform: uppercase;
    white-space: nowrap;
  }
}

/* Shop filter pills — single-row horizontal scroll on phones */
@media (max-width: 760px) {
  .shop-filters .pills {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    gap: 8px !important;
  }
  .shop-filters .pills::-webkit-scrollbar { display: none; }
  .shop-filters .pill {
    flex-shrink: 0;
    padding: 10px 18px !important;
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    white-space: nowrap;
  }
  .shop-filters {
    flex-direction: column;
    align-items: stretch !important;
    padding-bottom: 6px;
  }
  .shop-filters .count {
    text-align: right;
    padding-top: 4px;
    font-size: 11px;
  }
}

/* Section eyebrows: cyan + bullet alignment match Vylix */
@media (max-width: 760px) {
  .about-eyebrow, .faq-eyebrow, .vshop-hero .eyebrow,
  section .eyebrow {
    color: var(--accent) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3em !important;
    margin-bottom: 14px !important;
  }
}

/* Mobile cart drawer = full screen slide-up (Vylix style) */
@media (max-width: 480px) {
  .cart-drawer {
    width: 100vw;
    max-width: 100vw;
    height: 100svh;
    border-left: none;
    border-radius: 0;
  }
  .cart-toast {
    top: max(12px, env(safe-area-inset-top));
    right: 12px;
    left: 12px;
    width: auto;
  }
}

/* Sticky bottom Add-to-Cart on product detail page */
@media (max-width: 760px) {
  .product-page .qty-and-buy {
    position: sticky;
    bottom: 0;
    background: linear-gradient(to top, var(--bg) 70%, transparent);
    padding: 16px 0 calc(env(safe-area-inset-bottom, 0) + 16px);
    margin: 0 -20px;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 50;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.6);
  }
  .product-page .buy-btn {
    flex: 1;
    min-height: 52px;
    font-size: 13px;
  }
}

/* Bigger checkout buttons on mobile */
@media (max-width: 600px) {
  .checkout-nav .next, #place-order {
    min-height: 52px;
    width: 100%;
    justify-content: center;
  }
  .checkout-nav {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  .checkout-nav .back { text-align: center; padding: 12px; }
}

/* Footer cleanup on mobile */
@media (max-width: 600px) {
  .newsletter-bar {
    flex-direction: column;
    text-align: center;
    gap: 20px;
    padding: 28px 20px;
  }
  .news-form { width: 100%; max-width: 360px; margin: 0 auto; }
}

/* Marquee speed bump (looks better at narrow widths) */
@media (max-width: 600px) {
  .marquee-track {
    animation-duration: 28s !important;
  }
  .marquee-track .item { font-size: 11px !important; padding: 0 14px !important; }
}

/* Disable text selection on UI chrome (feels native) */
@media (max-width: 760px) {
  header, .promo, .hero-stats, .pcard-meta, .vshop-card .meta,
  .pcard-action, .pill-btn, .btn, .filter-pill {
    -webkit-user-select: none;
    user-select: none;
  }
}

/* Use 100svh (small-viewport) where possible — fixes iOS Safari URL bar overlap */
@supports (height: 100svh) {
  .age-gate, .cart-drawer {
    height: 100svh;
  }
}

/* ===========================================
   📱 VYLIX-STYLE — extra mobile polish
   =========================================== */

/* Floating cart/help button — REMOVED (user prefers header cart only) */
.fab-quickcart {
  display: none !important;
}
.fab-quickcart-disabled {
  position: fixed;
  bottom: max(20px, calc(env(safe-area-inset-bottom, 0) + 16px));
  right: 18px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(94, 196, 232, 0.4), 0 0 0 4px rgba(94, 196, 232, 0.12);
  z-index: 7500;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
  -webkit-tap-highlight-color: transparent;
}
.fab-quickcart:hover { transform: scale(1.08); }
.fab-quickcart:active { transform: scale(0.94); }
.fab-quickcart .fab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: #fff;
  color: #000;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
}
@media (min-width: 900px) {
  .fab-quickcart { display: none; }
}

/* Trust icons row (3 cyan circles — for footer/home) */
.trust-icons-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 600px;
  margin: 40px auto 0;
  padding: 28px 20px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust-icons-row .tic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.trust-icons-row .tic-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(94, 196, 232, 0.1);
  border: 1px solid rgba(94, 196, 232, 0.35);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.trust-icons-row .tic-label {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* H2 with second word outlined-gray (Vylix's signature treatment) */
.h2-outline-2 {
  display: block;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,0.15);
  font-family: var(--display);
}

/* Polished sticky bottom Add-to-Cart bar on product detail */
@media (max-width: 760px) {
  .product-page .product-info {
    padding-bottom: 90px;
  }
  .pdp-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(10,10,12,0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line-strong);
    padding: 12px 16px max(12px, env(safe-area-inset-bottom, 12px));
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 7000;
  }
  .pdp-sticky-bar .info {
    flex: 1;
    min-width: 0;
  }
  .pdp-sticky-bar .info .nm {
    font-family: var(--display);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pdp-sticky-bar .info .pr {
    font-size: 12px;
    color: var(--text-3);
  }
  .pdp-sticky-bar .info .pr strong { color: var(--accent); font-size: 14px; }
  .pdp-sticky-bar .add-btn {
    background: #fff;
    color: #000;
    border: none;
    padding: 12px 22px;
    border-radius: 999px;
    font-family: var(--display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.15s ease;
  }
  .pdp-sticky-bar .add-btn:active { transform: scale(0.95); }
}
@media (min-width: 761px) {
  .pdp-sticky-bar { display: none; }
}

/* Empty cart screen polish (matches Vylix's centered icon + "CONTINUE SHOPPING") */
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
}
.cart-empty .empty-icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  color: var(--text-3);
}
.cart-empty h4 {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  color: #fff;
}
.cart-empty p {
  color: var(--text-3);
  font-size: 14px;
  max-width: 320px;
  margin: 0 auto 28px;
  line-height: 1.6;
}

/* Reduce hero video opacity further on mobile (less distracting) */
@media (max-width: 760px) {
  .hero-bg video.loaded { opacity: 0.22; }
}

/* Hide volume discount banner on mobile shop page (keep per-product .vol-box) */
@media (max-width: 760px) {
  .vol-banner { display: none; }
}

/* Fix About section stats overflow on phones (99%+ | SAME DAY | LAB CERT didn't fit) */
@media (max-width: 760px) {
  .about-stats {
    flex-wrap: nowrap;
    gap: 0 !important;
    width: 100%;
    overflow: hidden;
  }
  .about-stat {
    flex: 1 1 0;
    padding: 4px 8px !important;
    text-align: center;
    min-width: 0;
  }
  .about-stat:first-child { padding-left: 4px !important; }
  .about-stat:last-child { padding-right: 4px !important; padding-left: 8px !important; }
  .about-stat:not(:first-child) { padding-left: 8px !important; }
  .about-stat .v {
    font-size: clamp(22px, 6.5vw, 32px) !important;
    line-height: 1;
    white-space: nowrap;
  }
  .about-stat .l {
    font-size: 9px !important;
    letter-spacing: 0.12em !important;
    margin-top: 6px;
    line-height: 1.2;
  }
}

/* ============================================
   Sitewide discount banner (above the marquee)
   ============================================ */
.discount-banner {
  background: linear-gradient(90deg, #ff3b30 0%, #ff6b1a 50%, #ff3b30 100%);
  background-size: 200% 100%;
  animation: db-shimmer 6s linear infinite;
  color: #fff;
  text-align: center;
  padding: 9px 16px;
  position: relative;
  z-index: 90;
}
.db-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.08em;
}
.db-spark { font-size: 14px; }
.db-headline strong {
  font-weight: 900;
  letter-spacing: 0.14em;
  font-size: 14px;
}
.db-dot { opacity: 0.7; }
.db-sub {
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0.95;
  text-transform: uppercase;
}
@keyframes db-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@media (max-width: 640px) {
  .discount-banner { padding: 8px 14px; }
  .db-inner { gap: 6px; flex-wrap: wrap; justify-content: center; }
  .db-dot { display: none; }
  .db-sub { font-size: 10px; letter-spacing: 0.06em; width: 100%; }
}

/* ============================================
   Strike-through pricing — sitewide discount display
   ============================================ */
.price-strike {
  text-decoration: line-through;
  color: var(--text-3);
  font-weight: 500;
  margin-right: 8px;
  opacity: 0.7;
}
.price-save-pill {
  display: inline-block;
  background: #ff3b30;
  color: #fff;
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 3px 8px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ============================================
   Social proof — "X people viewing now" pill
   ============================================ */
.watching-now {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 14px 0 4px;
  padding: 9px 16px;
  background: rgba(0,209,232,0.08);
  border: 1px solid rgba(0,209,232,0.22);
  border-radius: 999px;
  color: var(--text);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  max-width: 100%;
}
.watching-now svg {
  color: var(--accent);
  flex-shrink: 0;
}
.watching-now strong {
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-right: 2px;
}

/* ============================================
   Restock waitlist form (shown when sold-out)
   ============================================ */
.restock-form {
  margin: 16px 0 4px;
}
.restock-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.restock-form input[type="email"] {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.15s, background 0.15s;
}
.restock-form input[type="email"]:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255,255,255,0.06);
}
.restock-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 22px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #000;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
  white-space: nowrap;
}
.restock-submit:hover { filter: brightness(1.08); }
.restock-submit:active { transform: scale(0.97); }
.restock-submit:disabled { opacity: 0.7; cursor: not-allowed; }
.restock-msg {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
}
.restock-msg.error {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.35);
  color: #f87171;
}
.restock-success {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.4);
  border-radius: 10px;
  color: var(--text);
}
.restock-success svg {
  flex-shrink: 0;
  color: #22c55e;
  margin-top: 2px;
}
.restock-success strong { font-size: 14px; display: block; margin-bottom: 4px; }
.restock-success div div { color: var(--text-2); font-size: 13px; line-height: 1.5; }

@media (max-width: 480px) {
  .restock-row { flex-direction: column; }
  .restock-submit { width: 100%; justify-content: center; padding: 14px; }
}

/* ============================================
   Frequently Researched Together (bundle widget)
   ============================================ */
.freq-bundle {
  margin: 22px 0 4px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px 16px;
}
.fb-head {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-2);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.fb-items {
  display: flex;
  flex-direction: column;
}
.fb-item {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.fb-item:last-child { border-bottom: 0; }
.fb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  justify-self: center;
}
.fb-item.is-current .fb-dot {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(0,209,232,0.14);
}
.fb-name {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.fb-item.is-current .fb-name { font-weight: 700; }
.fb-cat {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}
.fb-price {
  font-size: 14px;
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fb-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
}
.fb-total-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--text-3);
  margin-bottom: 4px;
}
.fb-total-amt {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
/* Struck-through original price next to the sale price in the bundle box */
.fb-strike {
  color: var(--text-3);
  text-decoration: line-through;
  font-weight: 600;
}
.fb-price .fb-strike { font-size: 12px; margin-left: 6px; }
.fb-total-amt .fb-strike { font-size: 13px; margin-left: 8px; }
.fb-add-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #000;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s, filter 0.15s;
  box-shadow: 0 6px 16px rgba(0,209,232,0.18);
}
.fb-add-all:hover { filter: brightness(1.08); box-shadow: 0 8px 22px rgba(0,209,232,0.28); }
.fb-add-all:active { transform: scale(0.97); }

@media (max-width: 640px) {
  .freq-bundle { padding: 16px 16px 14px; }
  .fb-head { font-size: 10px; letter-spacing: 0.16em; }
  .fb-name { font-size: 13px; }
  .fb-foot { flex-direction: column; align-items: stretch; gap: 12px; }
  .fb-total { display: flex; align-items: baseline; gap: 10px; }
  .fb-total-label { margin-bottom: 0; }
  .fb-add-all { justify-content: center; width: 100%; }
}
/* vc-bundle-v2: the widget heading is typed "Complete your order"; shown upper-case like the
   old typed-in-capitals heading and the BUNDLE TOTAL / ADD BUNDLE labels */
.fb-head { text-transform: uppercase; }
/* vc-bundle-v2: quantity on the current-product line of the bundle widget ("× 2") */
.fb-qty { color: var(--text-2); font-weight: 600; white-space: nowrap; }
/* vc-bundle-v2: "Bundle & Save -$X.XX" row above BUNDLE TOTAL (shown only when the cart's own
   Bundle & Save applies to the lines). Theme vars only: --accent-ink exists in light mode
   (light/global.css), dark mode falls back to --accent, as the drawer's Bundle & Save row. */
.fb-save {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0 12px 32px;
  border-top: 1px dashed var(--line);
  font-size: 13px;
}
.fb-save-label { color: var(--text-2); font-weight: 600; letter-spacing: 0.01em; }
.fb-save-amt {
  color: var(--accent-ink, var(--accent));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Phone: product.html moves the bundle block below the trust grid so the trust tiles follow
   Add to Cart. Even spacing around both boxes. Desktop (>760px) order and spacing unchanged;
   LP / ad-lander pages (html.vc-lp) hide the block and keep their spacing. */
@media (max-width: 760px) {
  html:not(.vc-lp) .product-info .product-trust { margin-top: 24px; }
  html:not(.vc-lp) .product-info .freq-bundle { margin: 0 0 32px; }
}

/* ============================================
   COA View Button + Inline Viewer Modal
   ============================================ */
.coa-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: rgba(0,209,232,0.08);
  color: var(--accent);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.coa-view-btn:hover { background: rgba(0,209,232,0.16); }
.coa-view-btn:active { transform: scale(0.97); }
.coa-view-btn svg { flex-shrink: 0; }

.coa-viewer {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(0,0,0,0.85);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.coa-viewer.open { display: flex; }
.coa-viewer-card {
  width: 100%;
  max-width: 960px;
  height: 90vh;
  height: 90svh;
  background: #0e0e12;
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.6);
}
.coa-viewer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
}
.coa-viewer-eyebrow {
  font-size: 10px;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 4px;
}
.coa-viewer-head h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--text);
}
.coa-viewer-close {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.coa-viewer-close:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text);
}
.coa-viewer-body {
  flex: 1;
  background: #1a1a1f;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  gap: 14px;
}
#coa-viewer-img {
  width: 100%;
  max-width: 820px;
  height: auto;
  display: block;
  border-radius: 6px;
  box-shadow: 0 4px 24px rgba(0,0,0,.4);
}
.coa-dl-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border: 1px solid #5ec4e8;
  border-radius: 999px;
  color: #5ec4e8;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  margin-bottom: 6px;
}
.coa-dl-btn:hover { background: #5ec4e8; color: #04121a; }

@media (max-width: 640px) {
  .coa-viewer { padding: 0; }
  .coa-viewer-card {
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    max-width: 100%;
    border-radius: 0;
    border: 0;
  }
  .coa-viewer-head { padding: 14px 16px; }
  .coa-viewer-head h3 { font-size: 14px; }
}

/* ============================================
   Research Partner Application Form
   ============================================ */
.partner-apply-form {
  padding: 100px 28px 80px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(255,215,0,0.03) 100%);
  scroll-margin-top: 80px;
}
.paf-wrap {
  max-width: 720px;
  margin: 0 auto;
}
.partner-apply-form h2 {
  font-family: var(--display);
  font-size: clamp(32px, 5vw, 48px);
  letter-spacing: 0.06em;
  margin: 0 0 18px;
  color: var(--text);
}
.partner-apply-form .eyebrow {
  font-size: 11px;
  letter-spacing: 0.24em;
  font-weight: 700;
  text-transform: uppercase;
}
.paf-sub {
  font-size: 15px;
  color: var(--text-2);
  margin: 0 0 44px;
  line-height: 1.6;
}
.paf-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.paf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.paf-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.paf-field > span {
  font-size: 11px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--text-3);
}
.paf-field input,
.paf-field select,
.paf-field textarea {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.15s, background 0.15s;
}
.paf-field input:focus,
.paf-field select:focus,
.paf-field textarea:focus {
  outline: none;
  border-color: var(--gold, #d4af37);
  background: rgba(255,255,255,0.06);
}
.paf-field textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.5;
  font-family: inherit;
}
.paf-field select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
.paf-submit {
  align-self: flex-start;
  margin-top: 10px;
  padding: 16px 36px;
  font-size: 13px;
  letter-spacing: 0.16em;
}
.paf-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.paf-msg {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
}
.paf-msg.error {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.35);
  color: #f87171;
}
.paf-success {
  text-align: center;
  padding: 40px 20px;
}
.paf-check {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(34,197,94,0.12);
  border: 2px solid #22c55e;
  color: #22c55e;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.paf-success h3 {
  font-family: var(--display);
  font-size: 24px;
  letter-spacing: 0.08em;
  margin: 0 0 12px;
  color: var(--text);
}
.paf-success p {
  color: var(--text-2);
  font-size: 15px;
  max-width: 380px;
  margin: 0 auto;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .partner-apply-form { padding: 60px 18px 60px; }
  .paf-row { grid-template-columns: 1fr; gap: 22px; }
  .partner-apply-form h2 { font-size: 28px; }
  .paf-submit { width: 100%; justify-content: center; }
}

/* Shop page — tighten the top so products appear without a long scroll on phones.
   Appended last so it reliably wins over the earlier .vshop-hero (60px) and
   base .shop-toolbar (40px) rules that were overriding the intended tight spacing. */
@media (max-width: 640px) {
  .vshop-hero { padding: 14px 20px 10px; }
  .shop-toolbar { margin: 8px auto 10px; }
}

/* === VCF footer (Ascend-style, VC theme) === */
footer.vcf{position:relative;font-family:var(--body);background:#000;color:var(--text-2);padding:64px 32px 28px;overflow:visible;z-index:2}
footer.vcf .vcf-inner{max-width:1220px;margin:0 auto}
footer.vcf .vcf-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;gap:38px}
footer.vcf .vcf-brand .logo{font-family:var(--display);font-weight:700;font-size:27px;letter-spacing:0.16em;color:var(--text);line-height:1}
footer.vcf .vcf-brand .sub{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:0.42em;color:var(--accent);margin:7px 0 16px;padding-left:0.42em}
footer.vcf .vcf-brand p.tag{font-size:13.5px;line-height:1.65;color:var(--text-2);max-width:34ch}
footer.vcf .vcf-contact{margin-top:16px;display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12px}
footer.vcf .vcf-contact a{color:var(--text-2);text-decoration:none;white-space:nowrap}
footer.vcf .vcf-contact a:hover{color:var(--accent)}
footer.vcf .vcf-contact .sep{color:var(--text-3)}
footer.vcf .vcf-col h5{font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:0.13em;color:var(--text);margin-bottom:16px;text-transform:uppercase}
footer.vcf .vcf-col a{display:block;font-size:13.5px;color:var(--text-2);text-decoration:none;margin-bottom:11px;transition:color .18s,padding-left .18s}
footer.vcf .vcf-col a:hover{color:var(--accent);padding-left:3px}
footer.vcf .vcf-mid{max-width:1220px;margin:56px auto 0;padding-top:28px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer.vcf .vcf-badges{display:flex;gap:26px;flex-wrap:wrap}
footer.vcf .vcf-badge{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-3);font-weight:500}
footer.vcf .vcf-badge svg{color:var(--accent);width:15px;height:15px}
footer.vcf .vcf-social{display:flex;gap:12px;justify-content:center}
footer.vcf .vcf-social a{width:36px;height:36px;border-radius:50%;border:none;display:grid;place-items:center;color:#fff;box-shadow:0 1px 4px rgba(0,0,0,0.25);transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}
footer.vcf .vcf-social a:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 5px 14px rgba(0,0,0,0.35)}
footer.vcf .vcf-social svg{width:17px;height:17px;fill:#fff}
footer.vcf .vcf-social a.tt{background:#010101;box-shadow:0 2px 8px rgba(0,0,0,0.35),inset 0 0 0 1px rgba(255,255,255,0.16)}
footer.vcf .vcf-social a.dc{background:#5865F2}
footer.vcf .vcf-social a.tg{background:linear-gradient(180deg,#2AABEE,#229ED9)}
footer.vcf .vcf-pay{max-width:1220px;margin:34px auto 0;display:flex;align-items:center;justify-content:center;gap:11px;flex-wrap:wrap}
footer.vcf .vcf-pay .lbl{font-size:11px;letter-spacing:0.14em;color:var(--text-3);text-transform:uppercase;font-weight:600}
footer.vcf .pay-ic{display:inline-flex;width:38px;height:25px;border-radius:5px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.3);flex-shrink:0}
footer.vcf .pay-ic svg{width:100%;height:100%;display:block}
footer.vcf .vcf-disc{display:flex;gap:15px;align-items:flex-start;max-width:1220px;margin:30px auto 0;border:1px solid rgba(94,196,232,0.30);border-left:4px solid var(--accent);border-radius:12px;padding:18px 22px;background:rgba(94,196,232,0.05)}
footer.vcf .vcf-disc .disc-ic{width:22px;height:22px;flex:0 0 auto;color:var(--accent);margin-top:2px}
footer.vcf .vcf-disc .l{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:0.14em;color:var(--accent);margin-bottom:7px}
footer.vcf .vcf-disc p{font-size:12px;line-height:1.7;color:var(--text-2);margin:0}
footer.vcf .vcf-disc b{color:var(--text);font-weight:700}
footer.vcf .vcf-disc a{color:var(--accent);text-decoration:none;font-weight:600}
footer.vcf .vcf-disc a:hover{text-decoration:underline}
footer.vcf .vcf-bottom{max-width:1220px;margin:44px auto 0;padding-top:22px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
footer.vcf .vcf-bl{display:flex;flex-direction:column;gap:5px}
footer.vcf .vcf-bottom .vcf-badges{gap:22px}
footer.vcf .vcf-brand .vcf-social{margin-top:22px;justify-content:flex-start;gap:11px}
footer.vcf .vcf-bottom .cr{font-size:12px;color:var(--text-3);letter-spacing:0.02em}
footer.vcf .vcf-bottom .ruo{font-size:10px;color:var(--text-3);letter-spacing:0.1em;text-align:left;line-height:1.6;font-weight:600}
@media (max-width:860px){
 footer.vcf{padding:48px 20px 24px}
 footer.vcf .vcf-grid{grid-template-columns:1fr 1fr;gap:30px}
 footer.vcf .vcf-brand{grid-column:1 / -1}
 footer.vcf .vcf-mid{flex-direction:column;align-items:flex-start;gap:18px}
 footer.vcf .vcf-social{align-self:center}
 footer.vcf .vcf-bottom{flex-direction:column;align-items:flex-start}
 footer.vcf .vcf-bottom .ruo{text-align:left}
}



/* ===== Bundle & Save — interactive per-product volume tiles ===== */
.bundle-save { margin: 6px 0 18px; }
.bs-head { display:flex; align-items:center; gap:7px; font-family:var(--display); font-weight:700; font-size:11px; color:var(--accent); letter-spacing:.2em; text-transform:uppercase; margin-bottom:11px; }
.bs-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.bs-tile { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:0; min-height:72px; padding:17px 6px 12px; border-radius:12px; background:rgba(0,0,0,0.35); border:1.5px solid rgba(255,255,255,0.12); color:var(--text); cursor:pointer; transition:border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease); font-family:inherit; }
.bs-tile:hover { border-color:rgba(94,196,232,0.55); }
.bs-tile.active { border-color:var(--accent); background:rgba(94,196,232,0.10); box-shadow:0 0 0 1px var(--accent), 0 6px 20px -8px rgba(94,196,232,0.55); }
.bs-tile:disabled { opacity:.4; pointer-events:none; }
.bs-qty { font-family:var(--display); font-size:15px; font-weight:700; letter-spacing:-0.01em; color:#fff; }
.bs-off { font-size:11px; font-weight:700; color:var(--accent); letter-spacing:0.03em; }
.bs-sub { font-size:10px; font-weight:600; color:var(--text-3); letter-spacing:0.1em; text-transform:uppercase; }
.bs-price { font-size:13px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; letter-spacing:-0.01em; white-space:nowrap; }
.bs-each { font-size:10px; font-weight:600; color:var(--text-2); letter-spacing:0.02em; }
.bs-badge { position:absolute; top:-9px; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:8.5px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; padding:3px 8px; border-radius:999px; color:#04121a; }
.bs-badge.pop { background:#5ec4e8; }
.bs-badge.best { background:#f5a623; }
.bs-foot { margin-top:10px; font-size:11px; color:var(--text-3); text-align:center; letter-spacing:0.04em; }
@media (min-width:320px) and (max-width:370px){ .product-page .buy-btn.has-qty{ gap:8px; letter-spacing:0.08em; white-space:nowrap; transition-property:background, transform; } }
@media (max-width:480px){ .bs-tile{ min-height:66px; padding:16px 4px 10px; } .bs-qty{ font-size:13.5px; } .bs-off{ font-size:10.5px; } .bs-price{ font-size:12.5px; } .bs-each{ font-size:9.5px; } .bs-badge{ font-size:8px; padding:2px 6px; top:-8px; } }

/* Mobile fix: product grid columns were forced to ~405px on a 390px screen because
   grid items default to min-width:auto (min-content) and won't shrink below the image's
   intrinsic width. min-width:0 lets the shared column collapse to the container. */
.product-media, .product-info { min-width: 0; }
.product-media img { max-width: 100%; }

/* Belt-and-suspenders: never allow horizontal page scroll (a reveal/transform element
   leaves a phantom ~35px). overflow-x:clip clips without creating a scroll container,
   so position:sticky and inner overflow-x:auto scrollers keep working. */
html, body { overflow-x: clip; }


/* Sold-out homepage cards: inline "Notify me" restock capture (replaces dead SOLD OUT) */
.pcard-notify { width: 100%; }
.pcard-notify .pn-trigger { width: 100%; cursor: pointer; }
.pn-form { display: flex; width: 100%; border-top: 1px solid var(--line); }
.pn-form input { flex: 1 1 auto; min-width: 0; border: none; background: #16161c; color: var(--text); font-family: inherit; font-size: 12.5px; letter-spacing: .02em; padding: 14px 16px; outline: none; }
.pn-form input::placeholder { color: var(--text-3); letter-spacing: normal; }
.pn-form button { flex: 0 0 auto; width: 54px; border: none; background: var(--accent); color: #04121a; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s var(--ease); }
.pn-form button:hover { background: #7ad2ef; }
.pn-form button:disabled { opacity: .5; cursor: default; }
.pn-msg { display: none; }
.pn-msg.err { display: block; font-size: 11px; color: #f87171; padding: 7px 16px; text-align: center; letter-spacing: .04em; }
.pn-done { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px 24px; border-top: 1px solid var(--line); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--good); background: rgba(74,222,128,0.08); }


/* "Don't forget BAC Water" — cart attach-upsell */
.bac-nudge { padding: 0 20px 4px; }
.bacn-card { display: flex; align-items: center; gap: 14px; padding: 14px 15px; background: linear-gradient(180deg, rgba(94,196,232,0.13), rgba(94,196,232,0.05)); border: 1.5px solid rgba(94,196,232,0.45); border-radius: 16px; animation: bacn-pulse 2.6s ease-in-out infinite; }
@keyframes bacn-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(94,196,232,0); } 50% { box-shadow: 0 0 16px 1px rgba(94,196,232,0.22); } }
@media (prefers-reduced-motion: reduce) { .bacn-card { animation: none; } }
.bacn-eyebrow { font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; }
.bacn-img { width: 58px; height: 58px; object-fit: contain; border-radius: 11px; background: #000; flex-shrink: 0; }
.bacn-meta { flex: 1 1 auto; min-width: 0; }
.bacn-title { font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.2; }
.bacn-sub { font-size: 12.5px; color: var(--text-2); margin-top: 3px; }
.bacn-add { flex: 0 0 auto; border: none; cursor: pointer; background: var(--accent); color: #04121a; font-family: var(--display); font-weight: 800; font-size: 13.5px; letter-spacing: .04em; padding: 12px 20px; border-radius: 999px; transition: background .18s, transform .12s; }
.bacn-add:hover { background: #7ad4f0; }
.bacn-add:active { transform: scale(.94); }
.bacn-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .bac-nudge { padding: 4px 14px 6px; } .bacn-card { gap: 11px; padding: 12px 12px; } .bacn-img { width: 50px; height: 50px; } .bacn-title { font-size: 14.5px; } .bacn-sub { font-size: 11.5px; } .bacn-add { padding: 11px 15px; font-size: 12.5px; } }


/* Product page: "Don't forget BAC Water" solvent recommendation */
.bac-rec { display: flex; align-items: center; gap: 12px; margin: 13px 0 0; padding: 11px 13px; background: rgba(94,196,232,0.05); border: 1px solid rgba(94,196,232,0.22); border-radius: 14px; }
.bacr-img { width: 42px; height: 42px; object-fit: contain; border-radius: 9px; background: #000; flex-shrink: 0; }
.bacr-meta { flex: 1 1 auto; min-width: 0; }
.bacr-title { font-family: var(--display); font-size: 14.5px; font-weight: 700; color: var(--text); line-height: 1.25; }
.bacr-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.bacr-add { flex: 0 0 auto; border: none; cursor: pointer; background: var(--text); color: #000; font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .03em; padding: 10px 18px; border-radius: 999px; transition: background .18s, transform .12s, opacity .18s; }
.bacr-add:hover { background: var(--accent); }
.bacr-add:active { transform: scale(.94); }
.bacr-add.is-added { background: var(--good); color: #04140a; cursor: default; }
@media (max-width: 480px) { .bac-rec { padding: 10px 11px; gap: 10px; } .bacr-title { font-size: 13.5px; } .bacr-sub { font-size: 11.5px; } .bacr-add { padding: 9px 14px; font-size: 12.5px; } }


/* Phone/in-app-browser hero: a plain image replaces the <video> so no WebView can force
   fullscreen playback (TikTok/IG). Mirrors the video's look. */
.hero-bg img.hero-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s var(--ease)}
.hero-bg img.hero-still.loaded{opacity:.22}

/* ===== Iconify payment marks (real brand logos, cached here not inlined per page) ===== */
footer.vcf .pay-ic{background-color:#fff;background-repeat:no-repeat;background-position:center;box-sizing:border-box}
footer.vcf .pay-ic.pi-visa{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzLjA5ZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjU2IDgzIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9IlNWR1NkZDQzZGFRIiB4MT0iNDUuOTc0JSIgeDI9IjU0Ljg3NyUiIHkxPSItMi4wMDYlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIyMjM1NyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI1NGFhNSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxwYXRoIGZpbGw9InVybCgjU1ZHU2RkNDNkYVEpIiBkPSJNMTMyLjM5NyA1Ni4yNGMtLjE0Ni0xMS41MTYgMTAuMjYzLTE3Ljk0MiAxOC4xMDQtMjEuNzYzYzguMDU2LTMuOTIgMTAuNzYyLTYuNDM0IDEwLjczLTkuOTRjLS4wNi01LjM2NS02LjQyNi03LjczMy0xMi4zODMtNy44MjVjLTEwLjM5My0uMTYxLTE2LjQzNiAyLjgwNi0yMS4yNCA1LjA1bC0zLjc0NC0xNy41MTljNC44Mi0yLjIyMSAxMy43NDUtNC4xNTggMjMtNC4yNDNjMjEuNzI1IDAgMzUuOTM4IDEwLjcyNCAzNi4wMTUgMjcuMzUxYy4wODUgMjEuMTAyLTI5LjE4OCAyMi4yNy0yOC45ODggMzEuNzAyYy4wNjkgMi44NiAyLjc5OCA1LjkxMiA4Ljc3OCA2LjY4OGMyLjk2LjM5MiAxMS4xMzEuNjkyIDIwLjM5NS0zLjU3NGwzLjYzNiAxNi45NWMtNC45ODIgMS44MTQtMTEuMzg1IDMuNTUxLTE5LjM1NyAzLjU1MWMtMjAuNDQ4IDAtMzQuODMtMTAuODctMzQuOTQ2LTI2LjQyOG04OS4yNDEgMjQuOTY4Yy0zLjk2NyAwLTcuMzEtMi4zMTQtOC44MDItNS44NjVMMTgxLjgwMyAxLjI0NWgyMS43MDlsNC4zMiAxMS45MzloMjYuNTI4bDIuNTA2LTExLjkzOUgyNTZsLTE2LjY5NyA3OS45NjN6bTMuMDM3LTIxLjYwMWw2LjI2NS0zMC4wMjdoLTE3LjE1OHptLTExOC41OTkgMjEuNkw4OC45NjQgMS4yNDZoMjAuNjg3bDE3LjEwNCA3OS45NjN6bS0zMC42MDMgMEw1My45NDEgMjYuNzgybC04LjcxIDQ2LjI3N2MtMS4wMjIgNS4xNjYtNS4wNTggOC4xNDktOS41NCA4LjE0OUguNDkzTDAgNzguODg2YzcuMjI2LTEuNTY4IDE1LjQzNi00LjA5NyAyMC40MS02LjgwM2MzLjA0NC0xLjY1MyAzLjkxMi0zLjA5OCA0LjkxMi03LjAyNkw0MS44MTkgMS4yNDVINjMuNjhsMzMuNTE2IDc5Ljk2M3oiIHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIC0xIDAgODIuNjY4KSIvPjwvc3ZnPg==");background-size:86% auto}
footer.vcf .pay-ic.pi-mastercard{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxLjI5ZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjU2IDE5OSI+PHBhdGggZD0iTTQ2LjU0IDE5OC4wMTFWMTg0Ljg0YzAtNS4wNS0zLjA3NC04LjM0Mi04LjM0My04LjM0MmMtMi42MzQgMC01LjQ4OC44NzgtNy40NjQgMy43MzJjLTEuNTM2LTIuNDE1LTMuNzMxLTMuNzMyLTcuMDI0LTMuNzMyYy0yLjE5NiAwLTQuMzkuNjU4LTYuMTQ3IDMuMDczdi0yLjYzNGgtNC42MXYyMS4wNzRoNC42MXYtMTEuNjM1YzAtMy43MzEgMS45NzYtNS40ODggNS4wNS01LjQ4OGMzLjA3MiAwIDQuNjEgMS45NzYgNC42MSA1LjQ4OHYxMS42MzVoNC42MXYtMTEuNjM1YzAtMy43MzEgMi4xOTQtNS40ODggNS4wNDgtNS40ODhjMy4wNzQgMCA0LjYxIDEuOTc2IDQuNjEgNS40ODh2MTEuNjM1em02OC4yNzEtMjEuMDc0aC03LjQ2M3YtNi4zNjZoLTQuNjF2Ni4zNjZoLTQuMTcxdjQuMTdoNC4xN3Y5LjY2YzAgNC44MyAxLjk3NiA3LjY4MyA3LjI0NSA3LjY4M2MxLjk3NiAwIDQuMTctLjY1OCA1LjcwOC0xLjUzNmwtMS4zMTgtMy45NTJjLTEuMzE3Ljg3OC0yLjg1MyAxLjA5OC0zLjk1MSAxLjA5OGMtMi4xOTUgMC0zLjA3My0xLjMxNy0zLjA3My0zLjUxM3YtOS40NGg3LjQ2M3ptMzkuMDc2LS40NGMtMi42MzQgMC00LjM5IDEuMzE4LTUuNDg4IDMuMDc0di0yLjYzNGgtNC42MXYyMS4wNzRoNC42MXYtMTEuODU0YzAtMy41MTIgMS41MzYtNS40ODggNC4zOS01LjQ4OGMuODc4IDAgMS45NzYuMjIgMi44NTQuNDM5bDEuMzE3LTQuMzljLS44NzgtLjIyLTIuMTk1LS4yMi0zLjA3My0uMjJtLTU5LjA1MiAyLjE5NmMtMi4xOTYtMS41MzctNS4yNjktMi4xOTUtOC41NjItMi4xOTVjLTUuMjY4IDAtOC43OCAyLjYzNC04Ljc4IDYuODA1YzAgMy41MTMgMi42MzQgNS40ODggNy4yNDQgNi4xNDdsMi4xOTUuMjJjMi40MTUuNDM4IDMuNzMyIDEuMDk3IDMuNzMyIDIuMTk1YzAgMS41MzYtMS43NTYgMi42MzQtNC44MyAyLjYzNHMtNS40ODgtMS4wOTgtNy4wMjUtMi4xOTVsLTIuMTk1IDMuNTEyYzIuNDE1IDEuNzU2IDUuNzA4IDIuNjM0IDkgMi42MzRjNi4xNDcgMCA5LjY2LTIuODUzIDkuNjYtNi44MDVjMC0zLjczMi0yLjg1NC01LjcwOC03LjI0NS02LjM2NmwtMi4xOTUtLjIyYy0xLjk3Ni0uMjItMy41MTItLjY1OC0zLjUxMi0xLjk3NWMwLTEuNTM3IDEuNTM2LTIuNDE1IDMuOTUxLTIuNDE1YzIuNjM1IDAgNS4yNjkgMS4wOTcgNi41ODYgMS43NTZ6bTEyMi40OTUtMi4xOTVjLTIuNjM1IDAtNC4zOTEgMS4zMTctNS40ODkgMy4wNzN2LTIuNjM0aC00LjYxdjIxLjA3NGg0LjYxdi0xMS44NTRjMC0zLjUxMiAxLjUzNy01LjQ4OCA0LjM5LTUuNDg4Yy44NzkgMCAxLjk3Ny4yMiAyLjg1NS40MzlsMS4zMTctNC4zOWMtLjg3OC0uMjItMi4xOTUtLjIyLTMuMDczLS4yMm0tNTguODMzIDEwLjk3NmMwIDYuMzY2IDQuMzkgMTAuOTc2IDExLjE5NiAxMC45NzZjMy4wNzMgMCA1LjI2OC0uNjU4IDcuNDYzLTIuNDE0bC0yLjE5NS0zLjczMmMtMS43NTYgMS4zMTctMy41MTIgMS45NzUtNS40ODggMS45NzVjLTMuNzMyIDAtNi4zNjYtMi42MzQtNi4zNjYtNi44MDVjMC0zLjk1MSAyLjYzNC02LjU4NiA2LjM2Ni02LjgwNWMxLjk3NiAwIDMuNzMyLjY1OCA1LjQ4OCAxLjk3NmwyLjE5NS0zLjczMmMtMi4xOTUtMS43NTctNC4zOS0yLjQxNS03LjQ2My0yLjQxNWMtNi44MDYgMC0xMS4xOTYgNC42MS0xMS4xOTYgMTAuOTc2bTQyLjU4OCAwdi0xMC41MzdoLTQuNjF2Mi42MzRjLTEuNTM3LTEuOTc1LTMuNzMyLTMuMDczLTYuNTg2LTMuMDczYy01LjkyNyAwLTEwLjUzNyA0LjYxLTEwLjUzNyAxMC45NzZzNC42MSAxMC45NzYgMTAuNTM3IDEwLjk3NmMzLjA3MyAwIDUuMjY5LTEuMDk3IDYuNTg2LTMuMDczdjIuNjM0aDQuNjF6bS0xNi45MDQgMGMwLTMuNzMyIDIuNDE1LTYuODA1IDYuMzY2LTYuODA1YzMuNzMyIDAgNi4zNjcgMi44NTQgNi4zNjcgNi44MDVjMCAzLjczMi0yLjYzNSA2LjgwNS02LjM2NyA2LjgwNWMtMy45NTEtLjIyLTYuMzY2LTMuMDczLTYuMzY2LTYuODA1bS01NS4xLTEwLjk3NmMtNi4xNDcgMC0xMC41MzggNC4zOS0xMC41MzggMTAuOTc2czQuMzkgMTAuOTc2IDEwLjc1NyAxMC45NzZjMy4wNzMgMCA2LjE0Ny0uODc4IDguNTYyLTIuODUzbC0yLjE5Ni0zLjI5M2MtMS43NTYgMS4zMTctMy45NTEgMi4xOTUtNi4xNDYgMi4xOTVjLTIuODU0IDAtNS43MDgtMS4zMTctNi4zNjctNS4wNWgxNS41ODd2LTEuNzU1Yy4yMi02LjgwNi0zLjczMi0xMS4xOTYtOS42Ni0xMS4xOTZtMCAzLjk1MWMyLjg1MyAwIDQuODMgMS43NTcgNS4yNjggNS4wNWgtMTAuOTc2Yy40MzktMi44NTQgMi40MTUtNS4wNSA1LjcwOC01LjA1bTExNC4zNzIgNy4wMjV2LTE4Ljg3OWgtNC42MXYxMC45NzZjLTEuNTM3LTEuOTc1LTMuNzMyLTMuMDczLTYuNTg2LTMuMDczYy01LjkyNyAwLTEwLjUzNyA0LjYxLTEwLjUzNyAxMC45NzZzNC42MSAxMC45NzYgMTAuNTM3IDEwLjk3NmMzLjA3NCAwIDUuMjY5LTEuMDk3IDYuNTg2LTMuMDczdjIuNjM0aDQuNjF6bS0xNi45MDMgMGMwLTMuNzMyIDIuNDE0LTYuODA1IDYuMzY2LTYuODA1YzMuNzMyIDAgNi4zNjYgMi44NTQgNi4zNjYgNi44MDVjMCAzLjczMi0yLjYzNCA2LjgwNS02LjM2NiA2LjgwNWMtMy45NTItLjIyLTYuMzY2LTMuMDczLTYuMzY2LTYuODA1bS0xNTQuMTA3IDB2LTEwLjUzN2gtNC42MXYyLjYzNGMtMS41MzctMS45NzUtMy43MzItMy4wNzMtNi41ODYtMy4wNzNjLTUuOTI3IDAtMTAuNTM3IDQuNjEtMTAuNTM3IDEwLjk3NnM0LjYxIDEwLjk3NiAxMC41MzcgMTAuOTc2YzMuMDc0IDAgNS4yNjktMS4wOTcgNi41ODYtMy4wNzN2Mi42MzRoNC42MXptLTE3LjEyMyAwYzAtMy43MzIgMi40MTUtNi44MDUgNi4zNjYtNi44MDVjMy43MzIgMCA2LjM2NyAyLjg1NCA2LjM2NyA2LjgwNWMwIDMuNzMyLTIuNjM1IDYuODA1LTYuMzY3IDYuODA1Yy0zLjk1MS0uMjItNi4zNjYtMy4wNzMtNi4zNjYtNi44MDUiLz48cGF0aCBmaWxsPSIjZmY1ZjAwIiBkPSJNOTMuMjk4IDE2LjkwM2g2OS4xNXYxMjQuMjUxaC02OS4xNXoiLz48cGF0aCBmaWxsPSIjZWIwMDFiIiBkPSJNOTcuNjg5IDc5LjAyOWMwLTI1LjI0NSAxMS44NTQtNDcuNjM3IDMwLjA3NC02Mi4xMjZDMTE0LjM3MyA2LjM2NiA5Ny40NyAwIDc5LjAzIDBDMzUuMzQzIDAgMCAzNS4zNDMgMCA3OS4wMjlzMzUuMzQzIDc5LjAyOSA3OS4wMjkgNzkuMDI5YzE4LjQ0IDAgMzUuMzQzLTYuMzY2IDQ4LjczNC0xNi45MDRjLTE4LjIyLTE0LjI2OS0zMC4wNzQtMzYuODgtMzAuMDc0LTYyLjEyNSIvPjxwYXRoIGZpbGw9IiNmNzllMWIiIGQ9Ik0yNTUuNzQ2IDc5LjAyOWMwIDQzLjY4NS0zNS4zNDMgNzkuMDI5LTc5LjAyOSA3OS4wMjljLTE4LjQ0IDAtMzUuMzQzLTYuMzY2LTQ4LjczNC0xNi45MDRjMTguNDQtMTQuNDg4IDMwLjA3NS0zNi44OCAzMC4wNzUtNjIuMTI1cy0xMS44NTUtNDcuNjM3LTMwLjA3NS02Mi4xMjZDMTQxLjM3MyA2LjM2NiAxNTguMjc3IDAgMTc2LjcxNyAwYzQzLjY4NiAwIDc5LjAzIDM1LjU2MyA3OS4wMyA3OS4wMjkiLz48L3N2Zz4=");background-size:70% auto}
footer.vcf .pay-ic.pi-amex{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjU2IDI1NiI+PHBhdGggZmlsbD0iIzAwNmZjZiIgZD0iTTI1NiAxMzguNTQ4VjBIMHYyNTZoMjU2di03NC42OWMtLjU3IDAgMC00Mi43NjIgMC00Mi43NjIiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMjI0LjY0MSAxMjQuMjk0aDE5LjM4NlY3OS4yNTJIMjIyLjkzdjYuMjcxbC0zLjk5MS02LjI3MWgtMTguMjQ1djcuOTgybC0zLjQyMS03Ljk4MmgtMzMuNjRjLTEuMTQgMC0yLjI4LjU3LTMuNDIuNTdzLTEuNzEuNTctMi44NTEgMS4xNGMtMS4xNC41Ny0xLjcxLjU3LTIuODUgMS4xNHYtMi44NUg1OC4xNTVsLTIuODUgNy40MTJsLTIuODUyLTcuNDEySDI5LjY0OHY3Ljk4MmwtMy40Mi03Ljk4Mkg3Ljk4MUwwIDk4LjYzN3YyNS42NTdoMTMuMTE0bDIuMjgtNi4yNzJoNC41NjFsMi4yODEgNi4yNzJoMTAwLjM0OHYtNS43MDJsMy45OSA1LjcwMmgyNy45Mzh2LTMuNDJjLjU3LjU3IDEuNzEuNTcgMi4yOCAxLjE0Yy41NzEuNTcgMS43MTEuNTcgMi4yODEgMS4xNGMxLjE0LjU3IDIuMjgxLjU3IDMuNDIxLjU3aDIwLjUyNmwyLjI4LTYuMjcyaDQuNTYybDIuMjggNi4yNzJoMjcuOTM4di01LjcwMnpNMjU2IDE4MS4zMXYtNDIuMTkySDk5LjIwN2wtMy45OTEgNS43MDJsLTMuOTkxLTUuNzAySDQ1LjYxMnY0NS4wNDJoNDUuNjEzbDMuOTkxLTUuNzAxbDMuOTkxIDUuNzAxaDI4LjUwOHYtOS42OTJoLTEuMTRxNS45ODYgMCAxMC4yNjItMS43MXYxMS45NzNoMjAuNTI2di01LjcwMmwzLjk5MSA1LjcwMmg4NC45NTNjMy40MjEtMS4xNCA2Ljg0Mi0xLjcxMSA5LjY5My0zLjQyMSIvPjxwYXRoIGZpbGw9IiMwMDZmY2YiIGQ9Ik0yNDYuMzA3IDE3MC40NzdoLTE1LjM5NHY2LjI3MWgxNC44MjRjNi4yNzIgMCAxMC4yNjMtMy45OSAxMC4yNjMtOS42OTJzLTMuNDItOC41NTMtOS4xMjItOC41NTNoLTYuODQyYy0xLjcxIDAtMi44NTEtMS4xNC0yLjg1MS0yLjg1czEuMTQtMi44NTEgMi44NS0yLjg1MWgxMy4xMTRMMjU2IDE0Ni41M2gtMTUuMzk0Yy02LjI3MiAwLTEwLjI2MyAzLjk5MS0xMC4yNjMgOS4xMjNjMCA1LjcwMSAzLjQyIDguNTUyIDkuMTIyIDguNTUyaDYuODQyYzEuNzEgMCAyLjg1MSAxLjE0IDIuODUxIDIuODVjLjU3IDIuMjgxLS41NyAzLjQyMi0yLjg1IDMuNDIybS0yNy45MzcgMGgtMTUuMzk0djYuMjcxSDIxNy44YzYuMjcxIDAgMTAuMjYyLTMuOTkgMTAuMjYyLTkuNjkycy0zLjQyLTguNTUzLTkuMTIyLTguNTUzaC02Ljg0MmMtMS43MSAwLTIuODUtMS4xNC0yLjg1LTIuODVzMS4xNC0yLjg1MSAyLjg1LTIuODUxaDEzLjExNGwyLjg1LTYuMjcyaC0xNS4zOTRjLTYuMjcyIDAtMTAuMjYzIDMuOTkxLTEwLjI2MyA5LjEyM2MwIDUuNzAxIDMuNDIxIDguNTUyIDkuMTIzIDguNTUyaDYuODQyYzEuNzEgMCAyLjg1IDEuMTQgMi44NSAyLjg1Yy41NyAyLjI4MS0xLjE0IDMuNDIyLTIuODUgMy40MjJtLTE5Ljk1Ni0xOC4yNDV2LTYuMjcyaC0yMy45NDZ2MzAuMjE4aDIzLjk0NnYtNi4yNzJIMTgxLjMxdi02LjI3MWgxNi41MzR2LTYuMjcySDE4MS4zMXYtNS43MDJoMTcuMTA0em0tMzguNzcgMGMyLjg1IDAgMy45OSAxLjcxIDMuOTkgMy40MmMwIDEuNzExLTEuMTQgMy40MjEtMy45OSAzLjQyMWgtOC41NTN2LTcuNDEyem0tOC41NTMgMTMuMTEzaDMuNDIxbDkuMTIzIDEwLjgzM2g4LjU1MmwtMTAuMjYzLTExLjQwM2M1LjEzMi0xLjE0IDcuOTgyLTQuNTYxIDcuOTgyLTkuMTIyYzAtNS43MDItMy45OS05LjY5My0xMC4yNjItOS42OTNoLTE1Ljk2NXYzMC4yMThoNi44NDJ6bS0xOC4yNDUtOS4xMjJjMCAyLjI4LTEuMTQgMy45OS0zLjk5IDMuOTloLTkuMTIzdi03Ljk4MWg4LjU1MmMyLjg1IDAgNC41NjEgMS43MSA0LjU2MSAzLjk5bS0xOS45NTUtMTAuMjYzdjMwLjIxOGg2Ljg0MnYtMTAuMjYzaDkuMTIyYzYuMjcyIDAgMTAuODMzLTMuOTkgMTAuODMzLTEwLjI2MmMwLTUuNzAyLTMuOTktMTAuMjYzLTEwLjI2My0xMC4yNjN6bS0xMC4yNjMgMzAuMjE4aDguNTUybC0xMS45NzMtMTUuMzk0bDExLjk3My0xNC44MjRoLTguNTUybC03LjQxMiA5LjY5M2wtNy40MTItOS42OTNoLTguNTUybDExLjk3MyAxNC44MjRsLTExLjk3MyAxNC44MjRoOC41NTJsNy40MTItOS42OTN6bS0yNS42NTctMjMuOTQ2di02LjI3Mkg1My4wMjR2MzAuMjE4aDIzLjk0N3YtNi4yNzJINTkuODY2di02LjI3MWgxNi41MzV2LTYuMjcySDU5Ljg2NnYtNS43MDJoMTcuMTA1em0xMzguNTQ4LTUzLjU5NWwxMS45NzMgMTguMjQ1aDguNTUzVjg2LjY2NGgtNi44NDJ2MTkuOTU1bC0xLjcxLTIuODVsLTEwLjgzNC0xNy4xMDVoLTkuMTIydjMwLjIxOGg2Ljg0MlY5Ni4zNTZ6bS0yOS42NDgtLjU3bDIuMjgtNi4yNzJsMi4yODEgNi4yNzJsMi44NSA2Ljg0MkgxODMuMDJ6bTExLjk3MyAxOC44MTVoNy40MTJsLTEzLjExMy0zMC4yMThoLTkuMTIzbC0xMy4xMTQgMzAuMjE4aDcuNDEybDIuODUxLTYuMjcyaDE0LjgyNHptLTMxLjkyOSAwbDIuODUxLTYuMjcyaC0xLjcxYy01LjEzMiAwLTcuOTgzLTMuNDItNy45ODMtOC41NTJ2LS41N2MwLTUuMTMyIDIuODUxLTguNTUzIDcuOTgzLTguNTUzaDcuNDEydi02LjI3MWgtNy45ODJjLTkuMTIzIDAtMTQuMjU0IDYuMjcxLTE0LjI1NCAxNC44MjR2LjU3YzAgOS4xMjIgNS4xMzEgMTQuODI0IDEzLjY4MyAxNC44MjRtLTI1LjY1NyAwaDYuODQyVjg3LjIzNGgtNi44NDJ6bS0xNC44MjQtMjMuOTQ3YzIuODUxIDAgMy45OTEgMS43MSAzLjk5MSAzLjQyMXMtMS4xNCAzLjQyMS0zLjk5IDMuNDIxaC04LjU1M3YtNy40MTJ6bS04LjU1MiAxMy4xMTRoMy40Mmw5LjEyMyAxMC44MzNoOC41NTNsLTEwLjI2My0xMS40MDNjNS4xMzEtMS4xNCA3Ljk4Mi00LjU2MSA3Ljk4Mi05LjEyM2MwLTUuNzAxLTMuOTkxLTkuNjkyLTEwLjI2My05LjY5MkgxMDkuNDd2MzAuMjE4aDYuODQyem0tMTIuNTQzLTEzLjExNHYtNi4yNzFIODAuMzkydjMwLjIxOGgyMy45NDd2LTYuMjcySDg3LjIzNHYtNi4yNzFoMTYuNTM0di02LjI3Mkg4Ny4yMzR2LTUuNzAyaDE3LjEwNXptLTUxLjg4NSAyMy45NDdoNi4yNzJsOC41NTItMjQuNTE3djI0LjUxN2g2Ljg0MlY4Ni42NjRINjIuNzE3bC02Ljg0MiAyMC41MjVsLTYuODQyLTIwLjUyNUgzNy42M3YzMC4yMThoNi44NDJWOTIuMzY1em0tMzcuMDYtMTguODE1bDIuMjgtNi4yNzJsMi4yODEgNi4yNzJsMi44NTEgNi44NDJIMTIuNTQzem0xMS45NzMgMTguODE1aDcuNDEzTDIxLjY2NiA4Ni42NjRoLTguNTUyTDAgMTE2Ljg4Mmg3LjQxMmwyLjg1LTYuMjcyaDE0LjgyNXoiLz48L3N2Zz4=");background-size:70% auto}
footer.vcf .pay-ic.pi-venmo{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSItMC4zIDkuNDMgMjQuNiA1LjE1Ij48cGF0aCBmaWxsPSIjMDA4Q0ZGIiBkPSJNMjEuNzcyIDEzLjExOWMtLjI2NyAwLS4zODEtLjI1MS0uMzgtLjY1NWMwLS41MzMuMTIxLTEuNTc1LjcxMi0xLjU3NWMuMjY3IDAgLjM1Ny4yNDMuMzU3LjU5OGMwIC41MzMtLjEzIDEuNjMyLS42ODkgMS42MzJtLjUwMi0zLjM3N2MtMS42NzcgMC0yLjQwNSAxLjI4NS0yLjQwNSAyLjY1OGMwIDEuMDQyLjQyMSAxLjg3NCAxLjY5MyAxLjg3NGMxLjcxNyAwIDIuNDM4LTEuNDA2IDIuNDM4LTIuNzYzYzAtMS4wMjUtLjQ2Mi0xLjc2OS0xLjcyNi0xLjc2OW0tMy44MzMgMGMtLjU1OCAwLS45NjQuMTctMS4zOTMuNDc3Yy0uMTU0LS4yNzUtLjQ2Mi0uNDc3LS45MzItLjQ3N2MtLjU0MiAwLS45NDcuMjE5LTEuMjQ3LjQzN2wtLjA0LS4zNjRIMTMuNTRsLS42ODggNC4zNTRoMS41MDZsLjQ3OS0zLjA1M2MuMTI5LS4wNjUuMzIzLS4xNTQuNTE4LS4xNTRjLjE0NSAwIC4yNjcuMDQ5LjI2Ny4yNjdjMCAuMDU2LS4wMTYuMTQ1LS4wMjQuMjE4bC0uNDI5IDIuNzIyaDEuNDk4bC40NzgtMy4wNTNjLjEzOC0uMDczLjMyNC0uMTU0LjUxLS4xNTRjLjE0NiAwIC4yNjguMDQ5LjI2OC4yNjdjMCAuMDU2LS4wMTcuMTQ1LS4wMjUuMjE4bC0uNDI5IDIuNzIyaDEuNDk5bC40NjEtMi45MDhjLjAyNS0uMTUzLjA0OS0uMzg4LjA0OS0uNTQ5YzAtLjU4Mi0uMjY3LS45Ny0xLjAzNy0uOTdtLTYuODcxIDBjLS41NzUgMC0uOTguMjE5LTEuMjg3LjQyMWwtLjAxNy0uMzQ4SDguOTYybC0uNjg5IDQuMzU0SDkuNzhsLjQ3OC0zLjA1M2MuMTMtLjA2NS4zMjQtLjE1NC41MTgtLjE1NGMuMTQ3IDAgLjI2OC4wNDkuMjY4LjI0MmMwIC4wODEtLjAyNC4yMjctLjAzMi4yOTlsLS40MjIgMi42NjZoMS40OTlsLjQ2Mi0yLjkwOGMuMDI0LS4xNTMuMDQ5LS4zODguMDQ5LS41NDljMC0uNTgyLS4yNjgtLjk3LTEuMDMtLjk3bS01LjYzMSAxLjgzNGMuMDQxLS40ODUuNDEzLS44MjQuNjk3LS44MjRjLjE2MiAwIC4yOTkuMDk3LjI5OS4yOTFjMCAuNDA0LS43MTMuNTMzLS45OTYuNTMzbS44NDMtMS44MzRjLTEuNjA0IDAtMi4zODIgMS4zOS0yLjM4MiAyLjY5OGMwIDEuMDEuNDc4IDEuODE3IDEuODE0IDEuODE3Yy41MjcgMCAxLjA3LS4xMTMgMS40MTgtLjI4MmwuMTg2LTEuMjZjLS40OTQuMjUtLjg3NC4zNDctMS4yNzEuMzQ3Yy0uMzY1IDAtLjY0LS4xOTQtLjY0LS42ODdjLjgyNi0uMDA4IDIuMjUyLS4zNDcgMi4yNTItMS40NTNjMC0uNjg3LS40OTQtMS4xOC0xLjM3Ny0xLjE4bS00LjIzOS4yNjdjLjA4OS4xODYuMTQ2LjQxMi4xNDYuNzQzYzAgLjYwNi0uNDI5IDEuNDk0LS43NzcgMi4wNmwtLjM3My0yLjk4OUwwIDkuOTY5bC43MDUgNC4yaDEuNzU3Yy43Ny0xLjAxIDEuNzE4LTIuNDQ4IDEuNzE4LTMuNTU0YzAtLjM0Ny0uMDczLS42MjItLjIzNS0uODg5eiIvPjwvc3ZnPg==");background-size:82% auto}
footer.vcf .pay-ic.pi-applepay{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyLjQzZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgNTEyIDIxMSI+PHBhdGggZD0iTTkzLjU1MiAyNy4xMDNjLTYgNy4xLTE1LjYwMiAxMi43MDItMjUuMjAzIDExLjkwMWMtMS4yLTkuNiAzLjUtMTkuODAyIDkuMDAxLTI2LjEwM0M4My4zNSA1LjYwMSA5My44NTIuNCAxMDIuMzUzIDBjMSAxMC4wMDEtMi45IDE5LjgwMi04LjggMjcuMTAzbTguNzAxIDEzLjgwMmMtMTMuOTAyLS44LTI1LjgwMyA3LjktMzIuNDA0IDcuOWMtNi43IDAtMTYuODAyLTcuNS0yNy44MDMtNy4zYy0xNC4zMDEuMi0yNy42MDMgOC4zLTM0LjkwNCAyMS4yMDJjLTE1LjAwMiAyNS44MDMtMy45IDY0LjAwOCAxMC42MDEgODUuMDFjNy4xMDEgMTAuNDAxIDE1LjYwMiAyMS44MDIgMjYuODAzIDIxLjQwMmMxMC42MDItLjQgMTQuODAyLTYuOSAyNy42MDQtNi45YzEyLjkwMSAwIDE2LjYwMiA2LjkgMjcuODAzIDYuN2MxMS42MDEtLjIgMTguOTAyLTEwLjQgMjYuMDAzLTIwLjgwMmM4LjEtMTEuODAxIDExLjQwMS0yMy4zMDMgMTEuNjAxLTIzLjkwM2MtLjItLjItMjIuNDAyLTguNy0yMi42MDItMzQuMzA0Yy0uMi0yMS40MDIgMTcuNTAyLTMxLjYwMyAxOC4zMDItMzIuMjAzYy0xMC4wMDItMTQuODAyLTI1LjYwMy0xNi40MDItMzEuMDA0LTE2LjgwMm04MC4zMS0yOS4wMDRWMTY3LjgyaDI0LjIwMnYtNTMuMzA2aDMzLjUwNGMzMC42MDMgMCA1Mi4xMDYtMjEuMDAyIDUyLjEwNi01MS40MDZjMC0zMC40MDMtMjEuMTAzLTUxLjIwNi01MS4zMDYtNTEuMjA2em0yNC4yMDIgMjAuNDAzaDI3LjkwM2MyMS4wMDMgMCAzMy4wMDQgMTEuMjAxIDMzLjAwNCAzMC45MDNzLTEyLjAwMSAzMS4wMDQtMzMuMTA0IDMxLjAwNGgtMjcuODAzek0zMzYuNTggMTY5LjAxOWMxNS4yMDIgMCAyOS4zMDMtNy43IDM1LjcwNC0xOS45MDJoLjV2MTguNzAyaDIyLjQwM1Y5MC4yMWMwLTIyLjUwMi0xOC4wMDItMzcuMDA0LTQ1LjcwNi0zNy4wMDRjLTI1LjcwMyAwLTQ0LjcwNSAxNC43MDItNDUuNDA1IDM0LjkwNGgyMS44MDNjMS44LTkuNjAxIDEwLjctMTUuOTAyIDIyLjkwMi0xNS45MDJjMTQuODAyIDAgMjMuMTAzIDYuOTAxIDIzLjEwMyAxOS42MDN2OC42bC0zMC4yMDQgMS44Yy0yOC4xMDMgMS43LTQzLjMwNCAxMy4yMDItNDMuMzA0IDMzLjIwNWMwIDIwLjIwMiAxNS43MDEgMzMuNjAzIDM4LjIwNCAzMy42MDNtNi41LTE4LjUwMmMtMTIuOSAwLTIxLjEwMi02LjItMjEuMTAyLTE1LjcwMmMwLTkuOCA3LjkwMS0xNS41MDEgMjMuMDAzLTE2LjQwMWwyNi45MDMtMS43djguOGMwIDE0LjYwMi0xMi40MDEgMjUuMDAzLTI4LjgwMyAyNS4wMDNtODIuMDEgNTkuNzA3YzIzLjYwMyAwIDM0LjcwNC05IDQ0LjQwNS0zNi4zMDRMNTEyIDU0LjcwNmgtMjQuNjAzbC0yOC41MDMgOTIuMTFoLS41bC0yOC41MDMtOTIuMTFoLTI1LjMwM2w0MS4wMDQgMTEzLjUxM2wtMi4yIDYuOTAxYy0zLjcgMTEuNzAxLTkuNzAxIDE2LjIwMi0yMC40MDIgMTYuMjAyYy0xLjkgMC01LjYtLjItNy4xMDEtLjR2MTguNzAyYzEuNC40IDcuNC42IDkuMjAxLjYiLz48L3N2Zz4=");background-size:77% auto}
footer.vcf .pay-ic.pi-paypal{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIwLjg1ZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjU2IDMwMiI+PHBhdGggZmlsbD0iIzI3MzQ2YSIgZD0iTTIxNy4xNjggMjMuNTA3QzIwMy4yMzQgNy42MjUgMTc4LjA0Ni44MTYgMTQ1LjgyMy44MTZoLTkzLjUyQTEzLjM5IDEzLjM5IDAgMCAwIDM5LjA3NiAxMi4xMUwuMTM2IDI1OS4wNzdjLS43NzQgNC44NyAyLjk5NyA5LjI4IDcuOTMzIDkuMjhoNTcuNzM2bDE0LjUtOTEuOTcxbC0uNDUgMi44OGMxLjAzMy02LjUwMSA2LjU5My0xMS4yOTYgMTMuMTc3LTExLjI5NmgyNy40MzZjNTMuODk4IDAgOTYuMTAxLTIxLjg5MiAxMDguNDI5LTg1LjIyMWMuMzY2LTEuODczLjY4My0zLjY5Ni45NTctNS40NzdxLTIuMzM0LTEuMjM2IDAgMGMzLjY3MS0yMy40MDctLjAyNS0zOS4zNC0xMi42ODYtNTMuNzY1Ii8+PHBhdGggZmlsbD0iIzI3MzQ2YSIgZD0iTTEwMi4zOTcgNjguODRhMTEuNyAxMS43IDAgMCAxIDUuMDUzLTEuMTRoNzMuMzE4YzguNjgyIDAgMTYuNzguNTY1IDI0LjE4IDEuNzU2YTEwMiAxMDIgMCAwIDEgNi4xNzcgMS4xODJhOTAgOTAgMCAwIDEgOC41OSAyLjM0N2MzLjYzOCAxLjIxNSA3LjAyNiAyLjYzIDEwLjE0IDQuMjg3YzMuNjctMjMuNDE2LS4wMjYtMzkuMzQtMTIuNjg3LTUzLjc2NUMyMDMuMjI2IDcuNjI1IDE3OC4wNDYuODE2IDE0NS44MjMuODE2SDUyLjI5NUM0NS43MS44MTYgNDAuMTA4IDUuNjEgMzkuMDc2IDEyLjExTC4xMzYgMjU5LjA2OGMtLjc3NCA0Ljg3OCAyLjk5NyA5LjI4MiA3LjkyNSA5LjI4Mmg1Ny43NDRMOTUuODg4IDc3LjU4YTExLjcyIDExLjcyIDAgMCAxIDYuNTA5LTguNzQiLz48cGF0aCBmaWxsPSIjMjc5MGMzIiBkPSJNMjI4Ljg5NyA4Mi43NDljLTEyLjMyOCA2My4zMi01NC41MyA4NS4yMjEtMTA4LjQyOSA4NS4yMjFIOTMuMDI0Yy02LjU4NCAwLTEyLjE0NSA0Ljc5NS0xMy4xNjggMTEuMjk2TDYxLjgxNyAyOTMuNjIxYy0uNjc0IDQuMjYyIDIuNjIyIDguMTI0IDYuOTM0IDguMTI0aDQ4LjY3YTExLjcxIDExLjcxIDAgMCAwIDExLjU2My05Ljg4bC40NzQtMi40OGw5LjE3My01OC4xMzZsLjU5MS0zLjIxM2ExMS43MSAxMS43MSAwIDAgMSAxMS41NjItOS44OGg3LjI4NGM0Ny4xNDcgMCA4NC4wNjQtMTkuMTU0IDk0Ljg1Mi03NC41NWM0LjUwMy0yMy4xNSAyLjE3My00Mi40NzgtOS43MzktNTYuMDU0Yy0zLjYxMy00LjExMi04LjEtNy41MDgtMTMuMzI3LTEwLjI4Yy0uMjgzIDEuNzktLjU5IDMuNjA0LS45NTcgNS40NzciLz48cGF0aCBmaWxsPSIjMWYyNjRmIiBkPSJNMjE2Ljk1MiA3Mi4xMjhhOTAgOTAgMCAwIDAtNS44MTgtMS40OWExMTAgMTEwIDAgMCAwLTYuMTc3LTEuMTc0Yy03LjQwOC0xLjE5OS0xNS41LTEuNzY1LTI0LjE5LTEuNzY1aC03My4zMDlhMTEuNiAxMS42IDAgMCAwLTUuMDUzIDEuMTQ5YTExLjY4IDExLjY4IDAgMCAwLTYuNTEgOC43NGwtMTUuNTgyIDk4Ljc5OGwtLjQ1IDIuODhjMS4wMjUtNi41MDEgNi41ODUtMTEuMjk2IDEzLjE3LTExLjI5NmgyNy40NDRjNTMuODk4IDAgOTYuMS0yMS44OTIgMTA4LjQyOC04NS4yMjFjLjM2Ny0xLjg3My42NzUtMy42ODguOTU4LTUuNDc3cS00LjY4Mi0yLjQ3LTEwLjE0LTQuMjc5YTgzIDgzIDAgMCAwLTIuNzctLjg2NSIvPjwvc3ZnPg==");background-size:37% auto}
footer.vcf .pay-ic.pi-zelle{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzOCIgaGVpZ2h0PSIyNSIgdmlld0JveD0iMCAwIDM4IDI1Ij48cmVjdCB3aWR0aD0iMzgiIGhlaWdodD0iMjUiIHJ4PSI0IiBmaWxsPSIjNkQxRUQ0Ii8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE4LjEgMy4yaDIuNXYyLjZoMy45djIuNGwtNy40IDguOWg3LjZ2Mi41aC00LjF2Mi42aC0yLjV2LTIuNmgtNC42di0yLjRsNy40LTguOWgtNy4xVjYuMGg0LjN6Ii8+PC9zdmc+");background-size:100% 100%}
.pay-option .pay-logo.venmo,.pay-option .pay-logo.card,.pay-option .pay-logo.paypal{
background:#fff;border:1px solid rgba(0,0,0,.10);padding:7px 16px;border-radius:9px;gap:7px;min-width:104px}
.pay-option .pay-logo svg{display:block}
.pay-option .pay-logo.card{gap:6px;min-width:0;flex-wrap:nowrap}
.pay-option .pay-logo.venmo svg path{fill:#008CFF}
/* ===== end Iconify ===== */

/* COA table: in-house batch QC (NOT a third-party lab report) */
.coa-table .inhouse-qc{display:inline-flex;align-items:center;padding:8px 14px;background:rgba(94,196,232,0.06);border:1px solid rgba(94,196,232,0.28);border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.14em;color:#5ec4e8;white-space:nowrap;cursor:help}

/* COA table: lab report / access code under the dose */
.coa-table .coa-code{margin-top:3px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;letter-spacing:.06em;color:var(--text-3);opacity:.85;white-space:nowrap}


/* ===== Homepage social proof — rotating store reviews (/api/reviews/store) ===== */
#home-reviews { padding: 96px 0 44px; }
#home-reviews .hr-head { text-align: center; margin-bottom: 40px; }
#home-reviews .hr-eyebrow { font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .3em; color: var(--accent); margin-bottom: 14px; }
#home-reviews .hr-h2 { font-family: var(--display); font-size: clamp(30px, 4.6vw, 52px); font-weight: 700; letter-spacing: -.02em; color: var(--text); margin: 0 0 16px; line-height: 1.05; }
#home-reviews .hr-summary { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
#home-reviews .hr-stars { color: #f5a623; font-size: 17px; letter-spacing: 2px; }
#home-reviews .hr-stars .off, #home-reviews .hr-cstars .off { color: rgba(255,255,255,.18); }
#home-reviews .hr-avg { font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--text); }
#home-reviews .hr-count { font-size: 13px; color: var(--text-3); }

#home-reviews .hr-carousel { position: relative; }
#home-reviews .hr-viewport { overflow: hidden; padding: 4px 2px; }
#home-reviews .hr-rail { display: flex; gap: 18px; transition: transform .55s cubic-bezier(.4,.02,.2,1); will-change: transform; }
#home-reviews .hr-card { flex: 0 0 calc((100% - 72px) / 5); margin: 0; background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: 16px; padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 10px; transition: border-color .2s var(--ease), transform .2s var(--ease); }
#home-reviews .hr-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
#home-reviews .hr-cstars { color: #f5a623; font-size: 13px; letter-spacing: 1.5px; }
#home-reviews .hr-title { font-family: var(--display); font-size: 15.5px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
#home-reviews .hr-body { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--text-2); flex: 1 1 auto; }
#home-reviews .hr-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
#home-reviews .hr-name { font-size: 12.5px; font-weight: 600; color: var(--text); }
#home-reviews .hr-date { font-size: 11.5px; color: var(--text-3); }

#home-reviews .hr-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center; cursor: pointer; background: rgba(12,12,17,.92); border: 1px solid var(--line-2); color: var(--text); backdrop-filter: blur(6px); transition: background .18s, border-color .18s, opacity .18s; }
#home-reviews .hr-arrow:hover { background: var(--accent); border-color: var(--accent); color: #04121a; }
#home-reviews .hr-arrow.prev { left: -18px; }
#home-reviews .hr-arrow.next { right: -18px; }

#home-reviews .hr-dots { display: flex; justify-content: center; gap: 8px; margin-top: 26px; }
#home-reviews .hr-dot { width: 7px; height: 7px; border-radius: 999px; border: none; padding: 0; cursor: pointer; background: rgba(255,255,255,.22); transition: background .2s, width .2s; }
#home-reviews .hr-dot.on { background: var(--accent); width: 22px; }

@media (max-width: 1500px) { #home-reviews .hr-card { flex: 0 0 calc((100% - 54px) / 4); } }
@media (max-width: 1200px) { #home-reviews .hr-card { flex: 0 0 calc((100% - 36px) / 3); } }
@media (max-width: 980px) { #home-reviews .hr-card { flex: 0 0 calc((100% - 18px) / 2); } #home-reviews .hr-arrow { display: none; } }
@media (max-width: 640px) { #home-reviews { padding: 40px 0 28px; } #home-reviews .hr-head { margin-bottom: 22px; } #home-reviews .hr-card { flex: 0 0 90%; padding: 18px 18px 15px; } #home-reviews .hr-dots { margin-top: 18px; } }
@media (max-width: 480px) { footer.vcf .vcf-pay .lbl { flex-basis: 100%; text-align: center; margin-bottom: 6px; } footer.vcf .vcf-pay { gap: 10px; } }


/* ===== COA page: 7x analytical methods panel (collapsible hook) ===== */
.coa-methods { max-width: 900px; margin: -22px auto 30px; padding: 0 22px; }
.cm-details { border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,0.02); overflow: hidden; transition: border-color .18s var(--ease); }
.cm-details[open] { border-color: var(--line-strong); }
.cm-summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; user-select: none; transition: background .18s var(--ease); }
.cm-summary::-webkit-details-marker { display: none; }
.cm-summary:hover { background: rgba(94,196,232,0.045); }
.cm-summary-txt { display: flex; flex-direction: column; gap: 3px; text-align: left; min-width: 0; }
.cm-eyebrow { font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.cm-title { font-family: var(--display); font-size: clamp(17px, 2.4vw, 22px); font-weight: 700; letter-spacing: -0.02em; color: var(--text); line-height: 1.1; }
.cm-toggle { display: inline-flex; align-items: center; gap: 8px; color: var(--text-3); font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: 0.03em; flex: 0 0 auto; }
.cm-txt-open { display: none; }
.cm-details[open] .cm-txt-closed { display: none; }
.cm-details[open] .cm-txt-open { display: inline; }
.cm-chevron { transition: transform .25s var(--ease); flex: 0 0 auto; }
.cm-details[open] .cm-chevron { transform: rotate(180deg); }
.cm-body { padding: 4px 20px 20px; }
.cm-sub { margin: 0 0 16px; color: var(--text-2); font-size: 13.5px; line-height: 1.6; max-width: 640px; }
.cm-table-wrap { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.cm-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cm-table thead th { text-align: left; font-family: var(--display); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); padding: 13px 18px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.015); }
.cm-table tbody td { padding: 13px 18px; border-bottom: 1px solid var(--line); color: var(--text-2); vertical-align: middle; }
.cm-table tbody tr:last-child td { border-bottom: none; }
.cm-table tbody tr:hover td { background: rgba(94,196,232,0.04); }
.cm-table .cm-name { color: var(--text); font-weight: 600; }
.cm-table .cm-std { display: inline-block; font-family: var(--display); font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--accent); background: rgba(94,196,232,0.08); border: 1px solid rgba(94,196,232,0.22); border-radius: 999px; padding: 3px 10px; }
@media (max-width: 720px) {
  .coa-methods { margin: -6px auto 26px; }
  .cm-toggle .cm-txt { display: none; }
  .cm-details[open] .cm-txt-open { display: none; }
  .cm-table thead { display: none; }
  .cm-table, .cm-table tbody, .cm-table tr, .cm-table td { display: block; width: 100%; }
  .cm-table tbody tr { border-bottom: 1px solid var(--line); padding: 6px 0; }
  .cm-table tbody tr:last-child { border-bottom: none; }
  .cm-table tbody td { border: none; padding: 6px 16px; display: flex; justify-content: space-between; align-items: center; gap: 14px; text-align: right; }
  .cm-table tbody td::before { content: attr(data-label); font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); flex: 0 0 auto; }
}


/* ---- Product media gallery: vial photo -> COA(s) + thumbnail strip ---- */
.product-media-col{position:sticky;top:100px}
.product-media{position:relative;top:0}
.pm-track{position:relative;width:100%;height:100%;display:flex;transition:transform .4s cubic-bezier(.4,0,.2,1);will-change:transform}
.pm-slide{flex:0 0 100%;width:100%;height:100%}
.pm-coa img{width:100%;height:100%;object-fit:contain;background:#04070d}
.pm-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:42px;height:42px;border-radius:50%;border:1px solid rgba(94,196,232,.5);background:rgba(4,10,18,.72);color:#dff3fb;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .18s,border-color .18s;padding:0}
.pm-arrow:hover{background:#5ec4e8;border-color:#5ec4e8;color:#04121b}
.pm-arrow.pm-next{right:12px}
.pm-arrow.pm-prev{left:12px}
.pm-arrow[hidden]{display:none}
.pm-badge{position:absolute;top:12px;left:12px;z-index:6;font-family:var(--display,inherit);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#bfeaf7;background:rgba(4,10,18,.72);border:1px solid rgba(94,196,232,.4);border-radius:999px;padding:5px 11px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pm-badge[hidden]{display:none}
.pm-thumbs{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.pm-thumbs[hidden]{display:none}
.pm-thumb{width:62px;height:62px;border-radius:9px;overflow:hidden;border:1px solid var(--line);background:#000;cursor:pointer;padding:0;flex:0 0 auto;position:relative;opacity:.55;transition:opacity .18s,border-color .18s}
.pm-thumb:hover{opacity:.85}
.pm-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pm-thumb.is-active{opacity:1;border-color:#5ec4e8}
.pm-thumb-tag{position:absolute;bottom:0;left:0;right:0;font-size:8px;line-height:1.6;text-align:center;background:rgba(4,10,18,.82);color:#bfeaf7;letter-spacing:.04em;text-transform:uppercase}
@media (max-width:900px){.product-media-col{position:relative;top:0}}

/* Mini-cart drawer: slimmer chrome so more line-items are visible (2026-08-08). Revertible block. */
.cart-drawer-header { padding: max(15px, calc(env(safe-area-inset-top) + 9px)) 24px 15px; }
.cart-footer { padding-top: 14px; }
.cart-footer .row { margin-bottom: 5px; }
.cart-footer .row:first-child { display: none; }            /* Items count -- redundant with header qty pill */
.cart-footer .row.subtotal { margin-top: 6px; padding-top: 12px; }
.cart-footer .shipping-note { margin-bottom: 10px; }
.cart-footer .checkout-btn { padding: 14px; margin-bottom: 6px; }
.cart-footer .keep-shopping { display: none; }              /* redundant with the header X close */

/* C (2026-08-08): compact BAC-water nudge strip + drop 2 low-value footer lines -> ~3 line-items visible */
.bacn-card { gap: 10px; padding: 9px 11px; }
.bacn-img { width: 38px; height: 38px; }
.bacn-eyebrow { display: none; }
.bacn-title { font-size: 13.5px; }
.bacn-sub { font-size: 11px; margin-top: 1px; }
.bacn-add { padding: 9px 14px; font-size: 12px; }
.cart-footer .row:has(#cart-shipping) { display: none; }   /* 'Calculated at checkout' - low value in the preview */
.cart-footer #cart-vol-upsell { display: none !important; }   /* +1 vial upsell removed (Sean 2026-08-08) */
/* "Also available: BPC-157 + TB-500" swap row under a solo BPC-157 line in the cart drawer
   (2026-09-28). Same accent language as the BAC nudge but quieter (no pulse, outline button) so
   BAC stays the primary CTA. The price never splits: on a narrow phone it drops to its own line. */
.cart-item .bxs { grid-column: 1 / -1; }
.bxs { display: flex; align-items: center; gap: 10px; margin-top: -2px; padding: 8px 10px; background: rgba(94,196,232,0.06); border: 1px solid rgba(94,196,232,0.28); border-radius: 12px; }
.bxs-img { width: 30px; height: 30px; object-fit: contain; border-radius: 7px; background: #000; flex-shrink: 0; }
.bxs-meta { flex: 1 1 auto; min-width: 0; }
.bxs-title { font-family: var(--display); font-size: 12.5px; font-weight: 700; color: var(--text); line-height: 1.25; }
.bxs-title span { white-space: nowrap; }
.bxs-sub { font-size: 11px; color: var(--text-2); margin-top: 1px; line-height: 1.35; }
.bxs-price { white-space: nowrap; }
.bxs-sub s { color: #8a8a92; font-weight: 400; }
.bxs-btn { flex: 0 0 auto; cursor: pointer; background: transparent; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .04em; padding: 9px 16px; transition: background .18s, color .18s, transform .12s; }
.bxs-btn:hover { background: var(--accent); color: #04121a; }
.bxs-btn:active { transform: scale(.94); }

/* Mobile reviews: native scroll-snap carousel -- first card centers, adjacent cards peek (obvious swipe), momentum scroll. (2026-08-08) */
@media (max-width: 640px) {
  #home-reviews .hr-viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #home-reviews .hr-viewport::-webkit-scrollbar { display: none; }
  #home-reviews .hr-rail { transform: none !important; padding-inline: 10vw; gap: 14px; }
  #home-reviews .hr-card { flex: 0 0 80vw; scroll-snap-align: center; }
  #home-reviews .hr-dots { display: none; }
  #home-reviews .hr-carousel::after { content: '\2039  swipe for more  \203A'; display: block; text-align: center; margin-top: 16px; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); }
}

/* ---- Phone footer: Amino-style compact (2-col links, tighter rows) ---- */
@media (max-width:640px){
  footer.vcf{padding:36px 20px 22px}
  footer.vcf .vcf-grid{grid-template-columns:1fr 1fr;gap:26px 18px}
  footer.vcf .vcf-brand{grid-column:1 / -1}
  footer.vcf .vcf-brand .logo{font-size:23px}
  footer.vcf .vcf-brand p.tag{font-size:12.5px;line-height:1.55;max-width:100%}
  footer.vcf .vcf-contact{margin-top:12px;font-size:12px}
  footer.vcf .vcf-brand .vcf-social{margin-top:16px;gap:10px}
  footer.vcf .vcf-col h5{font-size:11px;letter-spacing:0.12em;margin-bottom:10px}
  footer.vcf .vcf-col a{font-size:12.5px;margin-bottom:8px}
  /* disclaimer: shorter, calmer on a phone */
  footer.vcf .vcf-disc{margin-top:26px;padding:14px 15px;font-size:11.5px;line-height:1.55}
  footer.vcf .vcf-disc h6{font-size:10.5px;margin-bottom:6px}
  footer.vcf .disc-more{display:none}
  /* payment row + bottom bar */
  footer.vcf .vcf-pay{margin-top:22px;gap:8px}
  footer.vcf .pay-ic{width:34px;height:22px}
  footer.vcf .vcf-bottom{margin-top:24px;padding-top:16px;flex-direction:column;align-items:flex-start;gap:12px}
  footer.vcf .vcf-bottom .vcf-badges{gap:14px;flex-wrap:wrap}
  footer.vcf .vcf-badge{font-size:11px}
}


/* ---- Partner program: example value card + commission tiers ---- */
.ex-value{
  max-width:640px;margin:56px auto 0;padding:28px 30px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:14px;
}
.ex-title{
  font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--text);text-align:center;margin-bottom:20px;
}
.ex-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--line);
  font-size:13.5px;color:var(--text-2);
}
.ex-amt{font-variant-numeric:tabular-nums;font-weight:600;color:var(--text);white-space:nowrap}
.ex-amt.gold{color:var(--gold)}
.ex-row.ex-total{
  border-bottom:none;margin-top:6px;padding-top:16px;border-top:1px solid var(--line);
  font-family:var(--display);font-weight:700;font-size:15px;color:var(--text);
}
.ex-row.ex-total .ex-amt{font-size:20px}
.ex-note{margin-top:14px;font-size:11px;line-height:1.6;color:var(--text-3);text-align:center}

.tier-sub{
  max-width:620px;margin:0 auto;font-size:14.5px;line-height:1.7;
  color:var(--text-2);text-align:center;
}
.tier-cards{
  max-width:900px;margin:40px auto 0;display:grid;grid-template-columns:repeat(2,1fr);gap:18px;
}
.tier-card{
  background:var(--bg-2);border:1px solid var(--line);border-radius:14px;
  padding:34px 30px;text-align:center;transition:border-color .3s var(--ease);
}
.tier-card:hover{border-color:rgba(193,150,84,0.3)}
.tier-pct{
  font-family:var(--display);font-weight:700;font-size:44px;line-height:1;
  color:var(--gold);letter-spacing:-0.02em;
}
.tier-name{
  font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--text);margin-top:12px;
}
.tier-desc{font-size:13px;line-height:1.65;color:var(--text-2);margin-top:12px}
.tier-list{list-style:none;margin:20px 0 0;padding:0;text-align:left;display:grid;gap:9px}
.tier-list li{
  position:relative;padding-left:24px;font-size:12.5px;line-height:1.55;color:var(--text-2);
}
.tier-list li::before{
  content:"";position:absolute;left:0;top:3px;width:15px;height:15px;border-radius:50%;
  border:1px solid rgba(193,150,84,0.5);
  background-color:rgba(193,150,84,0.10);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c19654' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:9px 9px;background-position:center;background-repeat:no-repeat;
}
.tier-trust{
  max-width:900px;margin:28px auto 0;display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:26px;
}
.tier-trust span{
  display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-3);
}
.tier-trust svg{color:var(--gold);flex-shrink:0}
.tier-fineprint{
  max-width:760px;margin:22px auto 0;font-size:11.5px;line-height:1.7;
  color:var(--text-3);text-align:center;
}
@media (max-width:760px){
  .ex-value{margin:34px 20px 0;padding:20px 18px}
  .ex-row{font-size:12.5px;padding:11px 0;gap:12px}
  .ex-row.ex-total .ex-amt{font-size:18px}
  .tier-cards{grid-template-columns:1fr;gap:14px;margin:28px 20px 0}
  .tier-card{padding:26px 22px}
  .tier-pct{font-size:36px}
  .tier-trust{gap:14px;margin-top:22px}
  .tier-sub,.tier-fineprint{padding:0 20px}
}


/* ---- Partner hero: two-column with floating vial cutouts ---- */
.partner-hero .ph-inner{
  max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 0.9fr;
  align-items:center;gap:40px;text-align:left;
}
/* grid children default to min-width:auto and refuse to shrink below their
   content width -- without this the copy column overflows the phone viewport */
.partner-hero .ph-copy,
.partner-hero .ph-visual{min-width:0;max-width:100%}
.partner-hero .ph-copy .eyebrow,
.partner-hero .ph-copy h1,
.partner-hero .ph-copy .sub{text-align:left;margin-left:0;margin-right:0}
.partner-hero .ph-copy .sub{max-width:46ch}

.ph-visual{
  position:relative;width:100%;aspect-ratio:1/0.92;min-height:330px;
}
.ph-vial{
  position:absolute;width:auto;object-fit:contain;pointer-events:none;user-select:none;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,0.55));
}
.ph-v1{height:30%;right:12%;top:6%;transform:rotate(-8deg);animation:phFloat 5.4s ease-in-out infinite}
.ph-v2{height:35%;left:6%;top:16%;transform:rotate(11deg);animation:phFloat 6.2s ease-in-out infinite .8s}
.ph-v3{height:26%;right:16%;bottom:8%;transform:rotate(-5deg);animation:phFloat 5.8s ease-in-out infinite 1.6s}
@keyframes phFloat{
  0%,100%{translate:0 0}
  50%{translate:0 -16px}
}

.ph-card{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(70%,255px);z-index:5;
  background:rgba(12,12,14,0.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(193,150,84,0.32);border-radius:16px;
  padding:18px 20px;box-shadow:0 24px 60px rgba(0,0,0,0.62);
  animation:phFloat 6.6s ease-in-out infinite .4s;
}
.ph-card-l{font-size:11px;color:var(--text-3);letter-spacing:0.02em}
.ph-card-v{
  font-family:var(--display);font-weight:700;font-size:32px;line-height:1.1;
  color:var(--gold);margin-top:4px;letter-spacing:-0.01em;
}
.ph-card-rows{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);display:grid;gap:7px}
.ph-cr{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:var(--text-3)}
.ph-pos{font-weight:600;color:#4ade80;font-variant-numeric:tabular-nums}
.ph-pos.alt{color:var(--accent)}

@media (prefers-reduced-motion: reduce){
  .ph-vial,.ph-card{animation:none}
}
@media (max-width:900px){
  .partner-hero .ph-inner{grid-template-columns:1fr;gap:26px;text-align:center}
  .partner-hero .ph-copy .eyebrow,
  .partner-hero .ph-copy h1,
  .partner-hero .ph-copy .sub{text-align:center}
  .partner-hero .ph-copy .sub{max-width:100%;margin-left:auto;margin-right:auto}
  .ph-visual{aspect-ratio:1/0.62;min-height:250px;max-width:460px;margin:0 auto}
  .ph-card{width:min(72%,230px);padding:15px 16px}
  .ph-card-v{font-size:27px}
  /* keep only two vials on a phone so the card stays readable */
  .ph-v3{display:none}
  .ph-v1{height:30%;right:7%;top:3%}
  .ph-v2{height:33%;left:4%;top:16%}
}


/* Two-column hero: scale the headline down from the old full-width centered size */
.partner-hero .ph-copy h1{
  font-size:clamp(34px,3.6vw,58px);
  margin-bottom:22px;
}
.partner-hero .ph-copy .sub{font-size:15.5px;margin-bottom:30px}
@media (max-width:900px){
  .partner-hero .ph-copy h1{font-size:clamp(30px,7vw,44px)}
}


/* Hero stat pairs (Amino formatting: 2x2, left-aligned, inside the copy column) */
.ph-stats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px 28px;margin:0 0 34px;max-width:430px;
}
.ph-stat .v{
  font-family:var(--display);font-weight:700;font-size:26px;line-height:1.1;
  color:var(--text);letter-spacing:-0.01em;
}
.ph-stat .l{
  font-size:11.5px;color:var(--text-3);margin-top:3px;line-height:1.4;
}
@media (max-width:900px){
  .ph-stats{max-width:340px;margin-left:auto;margin-right:auto;gap:16px 22px;text-align:left}
  .ph-stat .v{font-size:22px}
}

/* ---- "Built for research referrals" band ---- */
.built-for{max-width:1180px;margin:0 auto;padding:20px 56px 90px;text-align:center}
.built-for h2{
  font-family:var(--display);font-weight:600;font-size:clamp(26px,3.2vw,40px);
  letter-spacing:-0.01em;color:var(--text);line-height:1.1;
}
.bf-sub{
  max-width:560px;margin:14px auto 0;font-size:14.5px;line-height:1.7;color:var(--text-2);
}
.bf-stats{
  margin-top:54px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;
}
.bf-stat .v{
  font-family:var(--display);font-weight:700;font-size:clamp(30px,3.4vw,42px);line-height:1;
  color:var(--gold);letter-spacing:-0.02em;
}
.bf-stat .n{
  font-family:var(--display);font-weight:700;font-size:13.5px;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--text);margin-top:12px;
}
.bf-stat .l{font-size:11.5px;color:var(--text-3);margin-top:6px;line-height:1.5}
.bf-feats{
  margin:58px auto 0;max-width:960px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px;text-align:left;
}
.bf-feat h4{
  font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:0.04em;color:var(--text);
}
.bf-feat p{margin-top:9px;font-size:12.5px;line-height:1.65;color:var(--text-2)}
@media (max-width:900px){
  .built-for{padding:10px 20px 60px}
  .bf-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px;margin-top:34px}
  .bf-feats{grid-template-columns:1fr;gap:22px;margin-top:38px;max-width:420px}
}


/* HOW IT WORKS reformat: sub-line + ghosted number stacked above each title */
.how-it-works h2{margin-bottom:0}
.hiw-sub{
  max-width:600px;margin:14px auto 0;font-size:14.5px;line-height:1.7;
  color:var(--text-2);text-align:center;
}
.how-it-works .how-grid{margin-top:58px}
.how-step .num{
  display:block;margin-bottom:14px;
  font-family:var(--display);font-weight:700;font-size:52px;line-height:1;
  letter-spacing:-0.04em;color:rgba(255,255,255,0.10);
}
.how-step h4{font-size:15.5px;letter-spacing:0.04em;margin-bottom:10px}
@media (max-width:900px){
  .hiw-sub{font-size:13.5px;padding:0 4px}
  .how-it-works .how-grid{margin-top:34px;gap:26px}
  .how-step .num{font-size:40px;margin-bottom:10px}
}


/* Hero tighten: no eyebrow, so pull the headline up toward the header */
.partner-hero{padding-top:44px;padding-bottom:56px}
@media (max-width:900px){
  .partner-hero{padding-top:28px;padding-bottom:36px}
}


/* Why refer: borderless */
.benefits-grid{max-width:1180px;gap:44px 40px;padding-top:14px}
.benefit-card{
  background:none;border:none;border-radius:0;padding:0;
}
.benefit-card:hover{border:none;background:none}
.benefit-card h4{
  font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:0.03em;
  color:var(--text);margin-bottom:10px;
}
.benefit-card p{font-size:13px;line-height:1.7;color:var(--text-2)}
@media (max-width:900px){
  .benefits-grid{gap:30px;padding-left:20px;padding-right:20px;max-width:460px}
}


/* ================= COA page hero (Amino layout, VC dark theme) ============= */
.coa-hero{
  position:relative;overflow:hidden;
  padding:64px 24px 74px;text-align:center;
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(94,196,232,0.10) 0%, rgba(94,196,232,0) 60%),
    #000;
  border-bottom:1px solid var(--line);
}
.coa-vials{position:absolute;inset:0;pointer-events:none}
.coa-vial{
  position:absolute;height:auto;object-fit:contain;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,0.6));
  animation:coaFloat 3.4s ease-in-out infinite;
}
@keyframes coaFloat{0%,100%{translate:0 0}50%{translate:0 -26px}}
/* scattered, small, and dimmed so the copy always wins */
.coa-vial.cv1{height:128px;left:3%;top:8%;rotate:-12deg;opacity:.34;animation-delay:0s;animation-duration:3.0s}
.coa-vial.cv2{height:44px;left:14%;top:62%;rotate:9deg;opacity:.20;animation-delay:.9s;animation-duration:4.1s}
.coa-vial.cv3{height:30px;left:25%;top:20%;rotate:-6deg;opacity:.14;animation-delay:1.7s;animation-duration:2.7s}
.coa-vial.cv4{height:112px;right:4%;top:14%;rotate:11deg;opacity:.32;animation-delay:.4s;animation-duration:3.6s}
.coa-vial.cv5{height:36px;right:15%;top:64%;rotate:-9deg;opacity:.18;animation-delay:1.2s;animation-duration:2.9s}
.coa-vial.cv6{height:28px;right:27%;top:8%;rotate:7deg;opacity:.12;animation-delay:2.1s;animation-duration:4.3s}
.coa-vial.cv7{height:32px;left:36%;bottom:6%;rotate:-14deg;opacity:.12;animation-delay:1.5s;animation-duration:3.2s}
.coa-vial.cv8{height:86px;right:37%;bottom:8%;rotate:10deg;opacity:.16;animation-delay:.7s;animation-duration:3.8s}
.coa-vial.cv9{height:26px;left:47%;top:4%;rotate:-5deg;opacity:.10;animation-delay:2.4s;animation-duration:2.6s}
.coa-vial.cv10{height:98px;left:8%;bottom:4%;rotate:8deg;opacity:.28;animation-delay:.3s;animation-duration:3.3s}
.coa-vial.cv11{height:34px;left:20%;top:44%;rotate:-11deg;opacity:.15;animation-delay:1.1s;animation-duration:4.0s}
.coa-vial.cv12{height:30px;left:31%;bottom:14%;rotate:6deg;opacity:.12;animation-delay:2.2s;animation-duration:2.8s}
.coa-vial.cv13{height:118px;right:7%;bottom:2%;rotate:-8deg;opacity:.30;animation-delay:.6s;animation-duration:3.5s}
.coa-vial.cv14{height:40px;right:21%;top:40%;rotate:10deg;opacity:.16;animation-delay:1.5s;animation-duration:3.1s}
.coa-vial.cv15{height:28px;right:32%;bottom:16%;rotate:-6deg;opacity:.11;animation-delay:2.6s;animation-duration:4.2s}
.coa-vial.cv16{height:78px;left:41%;bottom:1%;rotate:12deg;opacity:.13;animation-delay:1.9s;animation-duration:3.7s}
.coa-vial.cv17{height:46px;left:1%;top:46%;rotate:-13deg;opacity:.20;animation-delay:.9s;animation-duration:2.9s}
.coa-vial.cv18{height:52px;right:1%;top:44%;rotate:9deg;opacity:.20;animation-delay:1.7s;animation-duration:3.4s}

.coa-hero-inner{position:relative;z-index:2;max-width:940px;margin:0 auto}
.coa-hero h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(27px,3.5vw,45px);line-height:1.14;letter-spacing:-0.02em;
  color:var(--text);text-wrap:balance;
}
.coa-hero .sub{
  max-width:600px;margin:18px auto 0;font-size:14.5px;line-height:1.75;color:var(--text-2);
}
.coa-cta{
  margin-top:30px;display:flex;align-items:center;justify-content:center;
  gap:20px;flex-wrap:wrap;
}
.coa-cta-alt{
  font-size:13px;color:var(--text-3);text-decoration:none;transition:color .2s ease;
}
.coa-cta-alt:hover{color:var(--accent)}
.coa-cta-alt span{display:inline-block;margin-left:2px}

.coa-lib-head{max-width:1180px;margin:0 auto;padding:26px 24px 6px;text-align:center}
.coa-lib-head h2{
  font-family:var(--display);font-weight:700;font-size:clamp(22px,2.8vw,32px);
  letter-spacing:-0.01em;color:var(--text);
}
.coa-lib-head p{margin-top:10px;font-size:13.5px;color:var(--text-2)}

@media (prefers-reduced-motion: reduce){ .coa-vial{animation:none} }
@media (max-width:760px){
  .coa-hero{padding:38px 20px 46px}
  .coa-hero .sub{font-size:13.5px;margin-top:14px}
  .coa-cta{margin-top:24px;gap:14px;flex-direction:column}
  .coa-lib-head{padding:18px 20px 4px}
  /* thin the scatter on phones so it never crowds the headline */
  .coa-vial.cv3,.coa-vial.cv6,.coa-vial.cv7,.coa-vial.cv8,.coa-vial.cv9,
  .coa-vial.cv11,.coa-vial.cv12,.coa-vial.cv15,.coa-vial.cv16,
  .coa-vial.cv17,.coa-vial.cv18{display:none}
  .coa-vial.cv10{height:46px;left:2%;bottom:4%;opacity:.18}
  .coa-vial.cv13{height:48px;right:2%;bottom:3%;opacity:.18}
  .coa-vial.cv14{height:38px;right:12%;top:46%;opacity:.12}
  .coa-vial.cv1{height:54px;left:1%;top:8%;opacity:.24}
  .coa-vial.cv2{height:44px;left:6%;bottom:5%;top:auto;opacity:.18}
  .coa-vial.cv4{height:50px;right:1%;top:10%;opacity:.24}
  .coa-vial.cv5{height:42px;right:6%;bottom:6%;top:auto;opacity:.18}
}


/* ---- Pre-footer sales CTA (Amino layout, VC dark theme) ---- */
.shop-cta{
  position:relative;overflow:visible;z-index:3;
  max-width:none;margin:0 -32px;padding:78px 24px 128px;text-align:center;
  /* slightly lifted off pure black so the band reads as its own box */
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(94,196,232,0.07) 0%, rgba(94,196,232,0) 55%),
    #0b0b0f;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.shop-cta > :not(.sc-vials){position:relative;z-index:2;max-width:820px;margin-left:auto;margin-right:auto}
.sc-vials{position:absolute;inset:0;pointer-events:none;z-index:4}
.sc-vial{
  position:absolute;height:auto;object-fit:contain;
  filter:drop-shadow(0 16px 30px rgba(0,0,0,0.65));
  animation:scFloat 5.6s ease-in-out infinite;
}
@keyframes scFloat{0%,100%{translate:0 0}50%{translate:0 -16px}}
.sc-v1{height:196px;left:3%;top:-64px;rotate:-14deg;opacity:1}
.sc-v2{height:182px;right:56px;bottom:-76px;top:auto;rotate:12deg;opacity:1;animation-delay:1.3s}
@media (prefers-reduced-motion: reduce){ .sc-vial{animation:none} }
.shop-cta h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(23px,3vw,36px);line-height:1.24;letter-spacing:-0.015em;
  color:var(--text);text-wrap:balance;
}
.shop-cta h2 .hl{
  position:relative;white-space:nowrap;
}
.shop-cta h2 .hl::after{
  content:"";position:absolute;left:-2px;right:-2px;bottom:.06em;height:.34em;
  background:rgba(94,196,232,0.28);border-radius:3px;z-index:-1;
}
.shop-cta .btn{margin-top:30px}
.shop-cta-note{margin-top:26px;font-size:12.5px;color:var(--text-3)}
.shop-cta-note a{color:var(--accent);text-decoration:none}
.shop-cta-note a:hover{text-decoration:underline}

/* ---- Newsletter card: rounded, softer, pill input (sitewide) ---- */
.newsletter-bar{
  position:relative;z-index:5;
  max-width:920px;margin:-78px auto 60px;padding:32px 34px;
  border:1px solid var(--line);border-radius:26px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  /* solid base under the tint -- without it the band's border line shows through */
  background:
    linear-gradient(120deg, rgba(94,196,232,0.10) 0%, rgba(193,150,84,0.055) 55%, rgba(255,255,255,0) 100%),
    #101016;
  gap:26px;
}
.newsletter-bar .news-left h3{font-size:19px;font-weight:700;margin-bottom:5px}
.newsletter-bar .news-left p{font-size:12.5px;line-height:1.55}
.newsletter-bar .news-form{
  min-width:340px;background:rgba(0,0,0,0.5);border:1px solid var(--line);
  border-radius:999px;padding:5px 5px 5px 6px;align-items:center;
}
.newsletter-bar .news-form input{
  background:transparent;border:none;border-radius:999px;padding:11px 14px;font-size:13.5px;
}
.newsletter-bar .news-form input:focus{outline:none;border:none}
.newsletter-bar .news-form button{
  border-radius:999px;padding:11px 20px;font-size:11px;letter-spacing:0.1em;border:none;
}
@media (max-width:760px){
  .shop-cta{padding:44px 20px 92px;margin:0 -20px}
  /* phone: both vials, sized so each sits FULLY on screen (no slicing at the
     viewport edge) and clears the headline/button vertically */
  .sc-v1{height:80px;left:10px;top:-40px;opacity:.9}
  .sc-v2{height:76px;right:32px;bottom:66px;top:auto;display:block;opacity:.9}
  .shop-cta .btn{margin-top:22px}
  .newsletter-bar{
    margin:-58px 20px 42px;padding:24px 20px;border-radius:20px;
    grid-template-columns:1fr;gap:18px;
  }
  .newsletter-bar .news-form{min-width:0;width:100%}
  .newsletter-bar .news-form input{min-width:0}
}

/* COA card: verified line + side-by-side CTAs */
.coa-verified{
  display:flex;align-items:center;gap:8px;margin:2px 0 10px;
  padding:9px 12px;border-radius:10px;
  background:rgba(52,211,153,0.07);border:1px solid rgba(52,211,153,0.22);
  font-size:11.5px;font-weight:600;color:#34d399;letter-spacing:0.01em;
}
.coa-verified svg{width:14px;height:14px;flex-shrink:0}
.coa-btn-row{display:flex;align-items:stretch;gap:8px}
.coa-buy-btn{
  flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 10px;border-radius:999px;
  background:#000;color:#fff;border:1px solid rgba(255,255,255,.16);text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:0.01em;
  white-space:nowrap;transition:filter .18s ease,transform .18s ease;
}
.coa-buy-btn:hover{filter:brightness(1.08)}
.coa-buy-btn .cb-price{font-weight:600;opacity:.66;letter-spacing:0;color:#fff}
/* secondary CoA button: compact, outlined, sits beside the buy CTA */
.coa-btn-row .coa-view-btn{
  flex:0 0 auto;width:auto;min-width:0;margin:0;gap:5px;padding:11px 12px;border-radius:999px;
  font-size:11px;letter-spacing:0.02em;white-space:nowrap;
}
@media (max-width:760px){
  .coa-btn-row{gap:7px}
  .coa-buy-btn{padding:11px 12px;font-size:11px}
  .coa-btn-row .coa-view-btn{padding:11px 13px}
}


/* mobile header: hamburger | logo | actions */
@media (max-width: 760px){
  header#site-header{
    grid-template-columns:auto 1fr auto !important;
    column-gap:12px;
  }
  header#site-header #hamburger{justify-self:start;margin:0}
  header#site-header .logo{justify-self:start}
  header#site-header .header-actions{justify-self:end}
}


/* ===== Homepage featured-products carousel (Amino-style row) ===== */
.fp-head{
  max-width:none;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding:0 104px 22px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.fp-head h2{
  font-family:var(--display);font-weight:700;font-size:clamp(24px,2.6vw,34px);
  letter-spacing:-0.015em;color:var(--text);line-height:1.1;
}
.fp-head p{margin-top:8px;font-size:13.5px;color:var(--text-2)}
.fp-viewall{
  flex:0 0 auto;display:inline-flex;align-items:center;padding:14px 30px;
  border:none;border-radius:999px;
  background:var(--accent);color:#000;
  font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:0.09em;
  text-transform:uppercase;text-decoration:none;
  transition:filter .2s ease;
}
.fp-viewall:hover{filter:brightness(1.08)}

/* full-bleed: the rail runs to both screen edges, cards bleed off rather than
   stopping inside a centred container */
.fp-wrap{position:relative;max-width:none;padding:0 0 110px;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.fp-rail{margin-left:104px;margin-right:104px}
.fp-rail{
  display:flex;flex-wrap:nowrap;gap:18px;
  overflow-x:auto;overflow-y:hidden;min-width:0;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding-bottom:4px;
}
.fp-rail::-webkit-scrollbar{display:none}
/* narrower cards so more fit per screen - the density Amino gets */
.fp-rail .pcard{flex:0 0 310px;scroll-snap-align:start;min-width:0}

.fp-arrow{
  position:absolute;top:38%;z-index:6;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(12,12,16,0.92);border:1px solid var(--line-strong);color:var(--text);
  transition:opacity .2s ease,border-color .2s ease,background .2s ease;
}
.fp-arrow svg{width:19px;height:19px}
.fp-arrow:hover{border-color:var(--accent);color:var(--accent)}
.fp-prev{left:34px}
.fp-next{right:34px}
.fp-arrow.is-off{opacity:0;pointer-events:none}

@media (max-width:900px){
  .fp-head{padding:0 20px 16px}
  .fp-wrap{padding:0 0 70px}
  .fp-rail{margin-left:20px;margin-right:20px}
  .fp-rail{gap:12px}
  .fp-rail .pcard{flex:0 0 248px}
  .fp-arrow{display:none}   /* phones swipe instead */
}

/* ===== Amino-style card pricing: -X% top-right, struck original above a bold red sale price ===== */
.pcard-off{
  position:absolute;top:12px;right:22px;z-index:3;
  background:#ff4d5e;color:#000;
  font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.02em;
  padding:5px 10px;border-radius:999px;line-height:1;
}
.pcard-media,.vshop-card .media{position:relative}

/* stack: struck original on top, sale price beneath */
.pcard .price,
.vshop-card .body .price{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
}
.pcard .price .strike,
.vshop-card .body .price .strike{
  font-size:13px;color:var(--text-3);text-decoration:line-through;
  font-variant-numeric:tabular-nums;
}
.pcard .price .amt,
.vshop-card .body .price .amt{
  font-family:var(--display);font-weight:700;font-size:23px;letter-spacing:-0.01em;
  color:var(--text);line-height:1.1;font-variant-numeric:tabular-nums;
}
.pcard .price .amt.sale,
.vshop-card .body .price .amt.sale{color:#ff3b4e}
/* the old inline bits are no longer emitted, but hide them if any linger */
.pcard .price .from,.vshop-card .body .price .from,
.pcard .price .save-pill,.vshop-card .body .price .save-pill{display:none}

@media (max-width:760px){
  .pcard-off{top:10px;right:18px;font-size:10px;padding:4px 9px}
  .pcard .price .amt,.vshop-card .body .price .amt{font-size:20px}
}

/* name on the left, price on the right, description underneath */
.pcard-titlerow{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
}
.pcard-titlerow h3{margin-bottom:0;flex:1 1 auto;min-width:0}
.pcard-titlerow .price{flex:0 0 auto;align-items:flex-end;text-align:right}
.pcard .sub{margin-top:5px;margin-bottom:0}
.pcard .pcard-foot{display:none}

/* Amino-style: bold product name + COA trust pill on the image */
.pcard-titlerow h3{font-family:var(--body) !important;font-weight:700 !important;letter-spacing:-0.005em;font-size:16px}
.pcard-coa{
  position:absolute;left:12px;bottom:12px;z-index:3;
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;color:#111;border-radius:999px;
  padding:6px 12px;font-family:var(--body);font-size:11.5px;font-weight:600;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.pcard-coa svg{width:12px;height:12px;color:#16a34a;flex-shrink:0}
.pcard-coa b{font-weight:600;text-decoration:underline;text-underline-offset:2px}
@media (max-width:760px){ .pcard-coa{left:10px;bottom:10px;font-size:10.5px;padding:5px 10px} }

/* ===== COA summary modal ===== */
.coa-modal[hidden]{display:none}
.coa-modal{position:fixed;inset:0;z-index:9500;display:grid;place-items:center;padding:20px}
.coa-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(3px)}
.coa-modal-card{
  position:relative;z-index:2;width:min(420px,100%);max-height:88vh;overflow:auto;
  background:#101016;border:1px solid var(--line);border-radius:20px;padding:26px 24px 20px;
  box-shadow:0 30px 80px rgba(0,0,0,.7);
}
.coa-modal-x{
  position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;
  background:transparent;border:none;color:var(--text-3);cursor:pointer;display:grid;place-items:center;
}
.coa-modal-x svg{width:17px;height:17px}
.coa-modal-x:hover{color:var(--text)}
.cm-name{font-family:var(--display);font-weight:700;font-size:16px;color:var(--text);letter-spacing:.02em}
.cm-dose{display:inline-block;margin-top:8px;padding:5px 12px;border:1px solid var(--line);
  border-radius:999px;font-size:11.5px;color:var(--text-2)}
.cm-hero{
  margin-top:16px;padding:18px;border-radius:14px;background:#08080c;border:1px solid var(--line);
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
}
.cm-purity{font-family:var(--display);font-weight:700;font-size:32px;line-height:1;color:var(--text)}
.cm-purity-l{font-size:11.5px;color:var(--text-3);margin-top:6px}
.cm-lot{text-align:right;font-size:11px;color:var(--text-3);line-height:1.7}
.cm-lab{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:12px;color:var(--text-2)}
.cm-lab svg{width:15px;height:15px;color:#34d399;flex-shrink:0}
.cm-table{width:100%;border-collapse:collapse;margin-top:14px}
.cm-table[hidden]{display:none}
.cm-table td{padding:10px 0;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--text-2)}
.cm-table td.cm-v{text-align:right;color:var(--text);font-weight:600;white-space:nowrap}
.cm-table td:last-child{width:52px;text-align:right}
.cm-pass{font-size:9.5px;font-weight:700;letter-spacing:.1em;color:#34d399;
  background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.3);border-radius:999px;padding:3px 7px}
.cm-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;
  padding:13px;border-radius:999px;text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.06em;
}
.cm-btn svg{width:15px;height:15px}
.cm-primary{background:var(--accent);color:#000}
.cm-primary:hover{filter:brightness(1.08)}
.cm-ghost{background:transparent;border:1px solid var(--line-strong);color:var(--text)}
.cm-ghost:hover{border-color:var(--accent);color:var(--accent)}
.cm-note{margin-top:14px;font-size:10.5px;color:var(--text-3);text-align:center;line-height:1.6}
/* the pill is now interactive */
.pcard-coa{cursor:pointer;border:none}
.pcard-coa{border:1px solid transparent;transition:border-color .15s ease,background .15s ease}
.pcard-coa:hover{background:#fff;border-color:#111}
.pcard-coa:focus-visible{outline:none;border-color:#111;box-shadow:0 0 0 3px rgba(255,255,255,.35)}

/* card body spacing + inset pill button */
.fp-rail .pcard-body{padding:16px 16px 10px !important}
.fp-rail .pcard-titlerow{align-items:flex-start}
.fp-rail .pcard-titlerow h3{font-size:15.5px;line-height:1.25}
.fp-rail .pcard .sub{margin-top:6px;font-size:12.5px;line-height:1.4}
.fp-rail .pcard .price .strike{font-size:12px}
.fp-rail .pcard .price .amt{font-size:20px}

/* button reads as a button: inset from the card edges + fully rounded */
.fp-rail .pcard-action{
  /* base rule sets width:100%; with side margins that overflowed the card */
  width:auto !important;box-sizing:border-box;
  margin:6px 16px 16px;border-radius:999px;padding:13px 18px;
  font-size:12px;letter-spacing:.08em;
}
/* keep the price block compact so the description sits close under the name */
.fp-rail .pcard .price{gap:0;line-height:1.15}
.fp-rail .pcard .price .strike{line-height:1.2}
.fp-rail .pcard .price .amt{line-height:1.15}
@media (max-width:760px){
  .fp-rail .pcard-body{padding:14px 13px 8px !important}
  .fp-rail .pcard-action{margin:4px 13px 13px;padding:12px 14px}
}

/* shop cards: match the carousel */
.vshop-card .body .pcard-titlerow{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.vshop-card .body .pcard-titlerow .name{flex:1 1 auto;min-width:0;font-family:var(--body);font-weight:700;font-size:16px;letter-spacing:-0.005em}
.vshop-card .body .pcard-titlerow .price{flex:0 0 auto;align-items:flex-end;text-align:right;gap:0;line-height:1.15}
.vshop-card .body .dose{margin-top:6px;font-size:12.5px;color:var(--text-3)}
.vshop-card .media{position:relative}

/* FAQ typography: body font, sentence case, no wide tracking */
#faq .faq-h2{
  font-family:var(--body) !important;font-weight:700;
  font-size:clamp(28px,3.4vw,42px);line-height:1.15;letter-spacing:-0.02em;
  margin-bottom:34px;
}
#faq details.faq-item summary{
  font-family:var(--body);font-size:15px;font-weight:600;
  letter-spacing:0;text-transform:none;padding:20px 22px;
}
#faq details.faq-item .answer{font-size:14.5px;padding-left:22px;padding-right:22px}
@media (max-width:760px){
  #faq details.faq-item summary{font-size:14px;padding:17px 18px}
}

/* mobile-only swipe hint (arrows are hidden on phones, so give an affordance) */
.fp-actions{display:flex;align-items:center;gap:14px}
/* phone: push the swipe hint to the right edge, View all stays left */
@media (max-width:900px){.fp-actions{width:100%;justify-content:space-between}}
.fp-swipe{display:none}
@media (max-width:900px){
  .fp-swipe{
    display:inline-flex;align-items:center;gap:7px;
    font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--accent);
  }
  .fp-swipe svg{width:20px;height:20px;animation:fpNudge 1.6s ease-in-out infinite}
  @keyframes fpNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
}
@media (prefers-reduced-motion: reduce){ .fp-swipe svg{animation:none} }

/* FAQ rows: borderless, divided by hairlines, chevron in a soft circle */
#faq .faq-list{gap:0}
#faq details.faq-item{
  border:none !important;background:transparent !important;border-radius:0 !important;
  border-bottom:1px solid var(--line) !important;
}
#faq details.faq-item:first-child{border-top:1px solid var(--line) !important}
#faq details.faq-item[open]{border-color:var(--line) !important}
#faq details.faq-item summary{padding:22px 4px}
#faq details.faq-item .answer{border-top:none;margin-top:0;padding:0 4px 22px}
#faq .faq-toggle{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  color:var(--text-2);transition:transform .25s var(--ease),color .2s ease;
}
#faq details.faq-item[open] .faq-toggle{transform:rotate(180deg);color:var(--accent)}
#faq details.faq-item summary:hover .faq-toggle{color:var(--accent)}

/* ===== animated trust strip ===== */
/* each scene: the vial drifts, an arrow nudges toward the payoff (COA pages / truck) */
.ts-scene{position:relative;flex:0 0 138px;width:138px;height:104px;overflow:visible}
.ts-vial{
  position:absolute;left:0;bottom:-6px;height:92px;width:auto;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.6));
  animation:tsFloat 3.6s ease-in-out infinite;
}
@keyframes tsFloat{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-11px) rotate(-6deg)}}
.ts-arrow{position:absolute;left:46px;bottom:36px;color:var(--accent);opacity:.5;
  animation:tsSlide 2.4s ease-in-out infinite}
.ts-arrow svg{width:22px;height:22px;display:block}
@keyframes tsSlide{0%,100%{transform:translateX(0);opacity:.32}50%{transform:translateX(7px);opacity:.8}}
.ts-truck{position:absolute;right:-4px;bottom:16px;animation:tsDrive 3.4s ease-in-out infinite}
.ts-truck-svg{width:64px;height:auto;display:block;filter:drop-shadow(0 8px 16px rgba(0,0,0,.55))}
@keyframes tsDrive{
  0%,100%{transform:translateX(-6px)}
  50%{transform:translateX(6px)}
}
.ts-doc{position:absolute;right:2px;bottom:2px;width:66px;border-radius:5px;
  border:1px solid rgba(255,255,255,.18);box-shadow:0 10px 22px rgba(0,0,0,.6);
  animation:tsRise 3.8s ease-in-out infinite}
.ts-doc.two{right:20px;bottom:14px;width:60px;opacity:.45;animation-delay:.5s}
@keyframes tsRise{0%,100%{transform:translateY(5px)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion: reduce){
  .ts-vial,.ts-arrow,.ts-truck,.ts-doc{animation:none}
  .ts-truck{transform:none;opacity:1}
}
@media (max-width:760px){
  /* phone: the row stacks, so shrink the scene and keep it beside the text */
  .ts-scene{flex:0 0 104px;width:104px;height:78px}
  .ts-vial{height:68px}
  .ts-arrow{left:34px;bottom:27px}
  .ts-arrow svg{width:17px;height:17px}
  .ts-truck{right:-2px;bottom:12px}
  .ts-truck-svg{width:48px}
  .ts-doc{width:50px}
  .ts-doc.two{right:15px;bottom:11px;width:45px}
}

/* trust strip: no dividers, no rules, and it scales with the screen rather than
   stopping at .container's 1400px cap */
.trust-sec{padding:20px 40px 0}
.trust-sec .container{max-width:none}
.features{border-top:none;border-bottom:none}
.features .feature{
  padding:clamp(48px,4.4vw,76px) 14px;
  gap:clamp(18px,1.7vw,30px);
  border-right:none;border-bottom:none;
}
.features .ts-scene{
  flex:0 0 clamp(150px,13vw,240px);
  width:clamp(150px,13vw,240px);
  height:clamp(118px,10vw,180px);
}
.features .ts-vial{height:clamp(106px,9vw,164px);bottom:-4px}
.features .ts-arrow{left:52%;bottom:34%}
.features .ts-arrow svg{width:clamp(24px,2vw,34px);height:clamp(24px,2vw,34px)}
.features .ts-truck{right:0;bottom:14%}
.features .ts-truck-svg{width:clamp(78px,6.6vw,122px)}
.features .ts-doc{width:clamp(80px,6.8vw,126px);right:0}
.features .ts-doc.two{right:14%;bottom:14%;width:clamp(72px,6.1vw,113px)}
.features .feature-text h4{font-size:clamp(15px,1.15vw,19px);margin-bottom:9px}
.features .feature-text p{font-size:clamp(14px,1.05vw,17px);line-height:1.55;max-width:none}

@media (max-width:760px){
  .trust-sec{padding:14px 14px 0}
  .trust-sec .container{max-width:none}
  .features .feature{padding:30px 10px;gap:16px}
  .features .ts-scene{flex:0 0 132px;width:132px;height:104px}
  .features .ts-vial{height:94px}
  .features .ts-arrow{left:50%;bottom:32%}
  .features .ts-arrow svg{width:21px;height:21px}
  .features .ts-truck{bottom:12%}
  .features .ts-truck-svg{width:66px}
  .features .ts-doc{width:68px}
  .features .ts-doc.two{right:15%;bottom:12%;width:61px}
  .features .feature-text h4{font-size:15px}
  .features .feature-text p{font-size:14.5px}
}

/* purity scene: the chromatogram trace draws itself, then the area under the
   main peak glows in -- the COA paper belongs to scene 3 only */
.ts-hplc{position:absolute;right:0;bottom:12%;width:clamp(92px,7.8vw,146px)}
.ts-hplc svg{width:100%;height:auto;display:block;overflow:visible}
.ts-axis{stroke:var(--line-strong);stroke-width:1.5}
.ts-trace{
  stroke:var(--accent);stroke-width:3;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:100;
  filter:drop-shadow(0 0 5px rgba(94,196,232,.5));
  animation:tsTrace 4.2s ease-in-out infinite;
}
@keyframes tsTrace{
  0%{stroke-dashoffset:100;opacity:.9}
  50%{stroke-dashoffset:0;opacity:1}
  86%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:0;opacity:0}
}
.ts-fill{fill:var(--accent);opacity:0;animation:tsFill 4.2s ease-in-out infinite}
@keyframes tsFill{0%,42%{opacity:0}62%,86%{opacity:.14}100%{opacity:0}}
@media (prefers-reduced-motion: reduce){
  .ts-trace{animation:none;stroke-dashoffset:0}
  .ts-fill{animation:none;opacity:.14}
}
@media (max-width:760px){ .ts-hplc{width:80px;bottom:10%} }

/* scenes laid out as a row so the payoff can never cover the arrow */
.ts-scene{
  display:flex;align-items:center;justify-content:flex-start;
  gap:clamp(4px,.5vw,9px);overflow:visible;
}
.features .ts-scene{
  flex:0 0 clamp(160px,13vw,240px);
  width:clamp(160px,13vw,240px);
  height:auto;
}
.ts-scene .ts-vial{
  position:static;flex:0 0 auto;
  height:clamp(100px,8.2vw,152px);width:auto;
}
.features .ts-vial{height:clamp(100px,8.2vw,152px);bottom:auto}
.ts-scene .ts-arrow{
  position:static;flex:0 0 auto;display:flex;align-items:center;
}
.ts-scene .ts-arrow svg,
.features .ts-scene .ts-arrow svg{
  width:clamp(18px,1.5vw,26px);height:clamp(18px,1.5vw,26px);
}
.ts-pay{
  position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:clamp(80px,6.6vw,120px);height:clamp(64px,5.4vw,98px);
}
/* payoffs now fill their wrapper instead of being pinned to the scene */
.ts-pay .ts-truck,
.features .ts-pay .ts-truck{position:static;right:auto;bottom:auto;width:100%}
.ts-pay .ts-truck-svg,
.features .ts-pay .ts-truck-svg{width:100%}
.ts-pay .ts-hplc,
.features .ts-pay .ts-hplc{position:static;right:auto;bottom:auto;width:100%}
.ts-pay .ts-doc,
.features .ts-pay .ts-doc{position:absolute;right:0;bottom:0;width:88%}
.ts-pay .ts-doc.two,
.features .ts-pay .ts-doc.two{right:20%;bottom:16%;width:80%}

/* headings stay on one line on desktop -- "SHIPS OUT SAME DAY" was breaking */
.features .feature-text h4{letter-spacing:.13em;white-space:nowrap}

@media (max-width:760px){
  .features .ts-scene{flex:0 0 142px;width:142px;gap:10px}
  .ts-scene .ts-vial,.features .ts-vial{height:82px}
  .ts-scene .ts-arrow svg,.features .ts-scene .ts-arrow svg{width:16px;height:16px}
  .ts-pay{width:60px;height:50px}
  /* phone has no room to force one line */
  .features .feature-text h4{white-space:normal;letter-spacing:.11em;font-size:14px}
}

/* HPLC instrument: screen trace redraws, status LED breathes */
.ts-hplc .ts-trace{stroke-width:2.2;filter:none}
.ts-hplc .ts-fill{display:none}
.ts-led{animation:tsLed 2.2s ease-in-out infinite;transform-origin:center}
@keyframes tsLed{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){ .ts-led{animation:none;opacity:1} }

/* close the dead space around the trust strip (scoped: #shop is homepage-only) */
#shop{padding-top:96px;padding-bottom:0}
#shop .fp-wrap{padding-bottom:18px}
.features .feature{padding:clamp(18px,1.5vw,26px) 14px}
#home-reviews{padding-top:38px}
@media (max-width:760px){
  #shop{padding-top:44px;padding-bottom:0}
  #shop .fp-wrap{padding-bottom:14px}
  .features .feature{padding:16px 10px}
  #home-reviews{padding-top:26px}
}

/* reviews: full-bleed so 5 cards keep a sane width instead of going skinny+tall.
   The heading stays centred on the normal container width. */
#home-reviews .container{max-width:none;padding-left:40px;padding-right:40px}
#home-reviews .hr-head{max-width:1400px;margin-left:auto;margin-right:auto}
@media (max-width:760px){
  #home-reviews .container{padding-left:0;padding-right:0}
}

/* reviews: cap card height. Cards stretch to the tallest of all 32, so once they
   narrowed for 5-up the whole row grew. Clamp the quote and tighten the padding. */
#home-reviews .hr-card{padding:18px 18px 14px;gap:8px}
#home-reviews .hr-body{
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;
  overflow:hidden;
}
#home-reviews .hr-title{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
@media (max-width:760px){
  /* phone shows one card at a time - no need to truncate there */
  #home-reviews .hr-body{-webkit-line-clamp:none;display:block;overflow:visible}
  #home-reviews .hr-card{padding:18px 18px 15px}
}

/* ===== quality you can verify ===== */
#about.qv{padding:96px 24px}
.qv-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.qv-left{min-width:0}
.qv-h2{
  font-family:var(--body);font-weight:700;letter-spacing:-.02em;line-height:1.15;
  font-size:clamp(30px,3vw,46px);color:var(--text);margin:14px 0 0;text-wrap:balance;
}
.qv-sub{margin:16px 0 0;font-size:16.5px;line-height:1.65;color:var(--text-2);max-width:52ch}

.qv-stats{display:flex;align-items:flex-start;gap:26px;margin-top:26px;flex-wrap:wrap}
.qv-stat{display:flex;align-items:baseline;gap:9px;padding-right:26px;border-right:1px solid var(--line)}
.qv-stat:last-child{border-right:none;padding-right:0}
.qv-stat b{font-family:var(--body);font-weight:700;font-size:26px;letter-spacing:-.02em;color:var(--text);line-height:1}
.qv-stat span{font-size:12.5px;line-height:1.35;color:var(--text-3)}

.qv-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.qv-tab{
  font-family:var(--body);font-size:13.5px;font-weight:600;letter-spacing:.02em;
  padding:10px 17px;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid var(--line-strong);color:var(--text-2);
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.qv-tab:hover{border-color:var(--accent);color:var(--text)}
.qv-tab.is-on{background:var(--accent);border-color:var(--accent);color:#000}

.qv-panel{
  margin-top:18px;padding:20px 20px 18px;border:1px solid var(--line);border-radius:16px;
  background:rgba(255,255,255,.025);
}
.qv-p-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.qv-p-head h3{font-family:var(--body);font-weight:700;font-size:17.5px;color:var(--text);margin:0}
.qv-method{
  font-size:11.5px;font-weight:600;letter-spacing:.05em;color:var(--accent);
  border:1px solid rgba(94,196,232,.35);background:rgba(94,196,232,.1);
  border-radius:999px;padding:4px 10px;white-space:nowrap;
}
.qv-p-body{margin:12px 0 0;font-size:15.5px;line-height:1.6;color:var(--text-2)}
.qv-why{
  margin-top:14px;padding:12px 14px;border-radius:0 10px 10px 0;
  border-left:3px solid #34d399;background:rgba(52,211,153,.07);
  font-size:14.5px;line-height:1.6;color:var(--text-2);
}
.qv-why b{color:var(--text)}

.qv-cta{display:flex;align-items:center;gap:18px;margin-top:26px;flex-wrap:wrap}
.qv-note{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--text-3)}
.qv-note svg{width:13px;height:13px;color:#34d399;flex-shrink:0}

/* proof column: light product-render card (deliberately light against the
   dark page, like the reference) */
.qv-right{min-width:0;position:sticky;top:96px}
.qv-card{
  position:relative;border-radius:24px;overflow:hidden;
  aspect-ratio:1/.92;min-height:380px;
  background:linear-gradient(158deg,#F2F6FB 0%,#E2EBF6 52%,#D4E1F1 100%);
  display:grid;place-items:center;
}
.qv-halo{
  position:absolute;top:6%;left:50%;transform:translateX(-50%);
  width:64%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 70%);
}
.qv-vial{
  position:relative;z-index:2;width:auto;
  height:clamp(215px,19.5vw,315px);
  transform:translateY(-14px);
  filter:drop-shadow(0 26px 40px rgba(28,52,84,.34));
}
.qv-badge{
  position:absolute;z-index:3;top:20px;right:20px;
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:14px;background:#fff;
  box-shadow:0 10px 26px rgba(28,52,84,.16);
}
.qv-badge-ic{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:#d7f5e6;color:#12a866;
}
.qv-badge-ic svg{width:14px;height:14px}
.qv-badge b{display:block;font-size:13px;font-weight:700;color:#0d1520;line-height:1.2}
.qv-badge i{display:block;font-style:normal;font-size:11px;color:#64748b;margin-top:2px}

.qv-proof{
  position:absolute;z-index:3;left:20px;right:20px;bottom:20px;
  display:flex;align-items:center;gap:13px;padding:14px 16px;
  border-radius:16px;background:#fff;text-decoration:none;
  box-shadow:0 12px 30px rgba(28,52,84,.16);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.qv-proof:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(28,52,84,.24)}
.qv-proof-ic{
  width:38px;height:38px;border-radius:11px;flex-shrink:0;display:grid;place-items:center;
  background:#eef2f7;color:#475569;
}
.qv-proof-ic svg{width:17px;height:17px}
.qv-proof-t{flex:1 1 auto;min-width:0}
.qv-proof-t b{display:block;font-size:14px;font-weight:700;color:#0d1520}
.qv-proof-t i{display:block;font-style:normal;font-size:12px;color:#64748b;margin-top:2px}
.qv-proof-x{width:17px;height:17px;color:#94a3b8;flex-shrink:0}

@media (max-width:980px){
  .qv-grid{grid-template-columns:1fr;gap:34px}
  .qv-right{position:static}
}
@media (max-width:760px){
  #about.qv{padding:52px 18px}
  /* narrow phones: stack figure above label so all 3 stats fit one row */
  .qv-stats{gap:14px}
  .qv-stat{padding-right:14px;flex-direction:column;align-items:flex-start;gap:3px}
  .qv-stat b{font-size:19px}
  .qv-stat span{font-size:10.5px;line-height:1.3}
  .qv-stats{gap:16px}
  .qv-stat{padding-right:16px}
  .qv-stat b{font-size:22px}
  .qv-tab{font-size:13px;padding:9px 14px}
  .qv-card{min-height:300px;aspect-ratio:1/.95}
  .qv-badge{top:14px;right:14px;padding:9px 12px}
  .qv-proof{left:14px;right:14px;bottom:14px;padding:12px 14px}
  .qv-vial{height:172px;transform:translateY(-10px)}
  .qv-cta{gap:12px}
}

/* FAQ: single centred column (visual removed) */
#faq .faq-split{grid-template-columns:1fr;gap:0;justify-items:center}
#faq .faq-split > div{width:100%;max-width:820px}
#faq .faq-head,#faq .faq-eyebrow,#faq .faq-h2{text-align:center}
#faq .faq-h2{margin-left:auto;margin-right:auto}
#faq .faq-list{margin-top:34px}

/* VIEW ALL: lock the text colour so nothing downstream can lighten it */
a.fp-viewall,a.fp-viewall:link,a.fp-viewall:visited,a.fp-viewall:hover,a.fp-viewall:active{
  color:#000 !important;-webkit-text-fill-color:#000 !important;
}

/* Safari: .ts-truck/.ts-hplc are spans, i.e. display:inline, so the width:100%
   set on them was ignored and Safari fell back to the SVG intrinsic width -
   the truck rendered oversized and covered the copy. Make them block so the
   width applies, and hard-cap every payoff child to its wrapper. */
.ts-pay{overflow:visible;box-sizing:border-box}
.ts-pay > *{max-width:100%}
.ts-truck,.ts-hplc,
.features .ts-truck,.features .ts-hplc{
  display:block;width:100%;max-width:100%;
}
.ts-truck-svg,.ts-hplc svg,
.features .ts-truck-svg,.features .ts-hplc svg{
  display:block;width:100%;height:auto;max-width:100%;
}

/* social card mascot - fills the empty right side of the card. Sits behind the
   copy and is hidden once the card narrows, so it can never crowd the text. */
.social-card { position: relative; overflow: hidden; }
.social-card > *:not(.card-mascot) { position: relative; z-index: 2; }
.card-mascot {
  position: absolute; right: 14px; bottom: -6px;
  width: auto; height: 200px; z-index: 1; pointer-events: none;
  opacity: .95;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.55));
  transition: transform .35s var(--ease, ease);
}
.social-card:hover .card-mascot { transform: translateY(-6px) rotate(-2deg); }
/* keep the copy clear of the mascot rather than letting it run underneath */
@media (min-width: 861px) {
  .social-card.dc .desc,
  .social-card.dc .social-card-top { padding-right: 132px; }
}
@media (max-width: 1100px) {
  .card-mascot { height: 168px; right: 6px; }
  .social-card.dc .desc,
  .social-card.dc .social-card-top { padding-right: 112px; }
}
@media (max-width: 860px) {
  .card-mascot { height: 132px; right: 4px; bottom: -4px; opacity: .92; }
  .social-card.dc .desc,
  .social-card.dc .social-card-top { padding-right: 84px; }
}
@media (max-width: 400px) {
  .card-mascot { height: 116px; }
  .social-card.dc .desc,
  .social-card.dc .social-card-top { padding-right: 72px; }
}

/* TikTok mascot is a much wider render than the Discord one */
.social-card.tt .card-mascot { height: 176px; right: 8px; bottom: 6px; }
@media (min-width: 861px) {
  .social-card.tt .desc,
  .social-card.tt .social-card-top { padding-right: 158px; }
}
@media (max-width: 1100px) {
  .social-card.tt .card-mascot { height: 150px; }
  .social-card.tt .desc,
  .social-card.tt .social-card-top { padding-right: 136px; }
}
@media (max-width: 860px) {
  .social-card.tt .card-mascot { height: 118px; right: 2px; bottom: 4px; }
  .social-card.tt .desc,
  .social-card.tt .social-card-top { padding-right: 104px; }
}
@media (max-width: 400px) {
  .social-card.tt .card-mascot { height: 104px; }
  .social-card.tt .desc,
  .social-card.tt .social-card-top { padding-right: 92px; }
}

/* Telegram mascot */
.social-card.tg .card-mascot { height: 196px; right: 10px; bottom: -4px; }
@media (min-width: 861px) {
  .social-card.tg .desc,
  .social-card.tg .social-card-top { padding-right: 132px; }
}
@media (max-width: 1100px) {
  .social-card.tg .card-mascot { height: 168px; }
  .social-card.tg .desc,
  .social-card.tg .social-card-top { padding-right: 114px; }
}
@media (max-width: 860px) {
  .social-card.tg .card-mascot { height: 124px; right: 2px; }
  .social-card.tg .desc,
  .social-card.tg .social-card-top { padding-right: 74px; }
}
@media (max-width: 400px) {
  .social-card.tg .card-mascot { height: 112px; }
  .social-card.tg .desc,
  .social-card.tg .social-card-top { padding-right: 84px; }
}

/* ---- ambient vial field (matches /membership) ----
   Cutouts are 396x900: ALWAYS size by height, never width. */
.acct-vials{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.acct-vials img{position:absolute;width:auto;display:block;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.75));
  will-change:transform;
  animation:acctFloat var(--d,18s) ease-in-out var(--t,0s) infinite}
@keyframes acctFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(var(--r,0deg))}
  33%{transform:translate3d(9px,-24px,0) rotate(calc(var(--r,0deg) + 4deg))}
  66%{transform:translate3d(-7px,-38px,0) rotate(calc(var(--r,0deg) - 3deg))}
}
.acct-vials img.alt{animation-name:acctDrift}
@keyframes acctDrift{
  0%,100%{transform:translate3d(0,0,0) rotate(var(--r,0deg))}
  40%{transform:translate3d(-13px,-28px,0) rotate(calc(var(--r,0deg) - 5deg))}
  75%{transform:translate3d(8px,-13px,0) rotate(calc(var(--r,0deg) + 3deg))}
}
@media (prefers-reduced-motion: reduce){ .acct-vials img{animation:none} }
/* Content rides above the field. Scoped with the sibling combinator so these
   rules are inert on every page that has no .acct-vials, and so they never
   touch #site-header (position:sticky) or .age-gate (position:fixed) - giving
   either of those position:relative would break them outright. */
.acct-vials ~ section,
.acct-vials ~ .page-hero,
.acct-vials ~ .dash-layout,
.acct-vials ~ .shop-cta,
.acct-vials ~ footer{position:relative;z-index:1}
@media (max-width:900px){
  /* Single column, so there is no side gutter to hide in. Keep four, drop the
     blur (a dozen blurred animated layers is real work on a phone), and re-pin
     them to the only bands that are actually empty: the hero strip above the
     first card, and below the last one. The inline coords are desktop gutter
     positions, hence !important. */
  .acct-vials img{display:none}
  .acct-vials img.keep{display:block;height:124px !important;opacity:.15 !important;
    filter:drop-shadow(0 10px 18px rgba(0,0,0,.7)) !important}
  .acct-vials img.keep:nth-of-type(1){left:-7% !important;right:auto !important;top:19% !important}
  .acct-vials img.keep:nth-of-type(2){right:-7% !important;left:auto !important;top:26% !important}
  .acct-vials img.keep:nth-of-type(3){left:-5% !important;right:auto !important;top:76% !important}
  .acct-vials img.keep:nth-of-type(4){right:-5% !important;left:auto !important;top:84% !important}
}
@media (max-width:620px){
  /* three is plenty at this width - a fourth starts crowding the cards */
  .acct-vials img.keep{height:104px !important;opacity:.13 !important}
  .acct-vials img.keep:nth-of-type(n+4){display:none}
  .acct-vials img.keep:nth-of-type(1){top:20% !important}
  .acct-vials img.keep:nth-of-type(2){top:27% !important}
  .acct-vials img.keep:nth-of-type(3){top:80% !important}
}

/* ---- "NEW" badge on the Send an Invoice nav item (moved off Membership 11/7) ----
   Pseudo-elements on purpose: the mobile menu clones nav.main using
   a.textContent, so a real <span> would flatten into the label text.
   Remove this whole block to retire the badge. */
nav.main a[href="/send-an-invoice"]::after {
  content: "NEW";
  display: inline-block;
  margin-left: 8px;
  padding: 3px 6px 2px;
  border-radius: 999px;
  background: var(--accent);
  color: #04121a;
  font-family: var(--body);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
  vertical-align: 2px;
}
/* .mobile-menu a::after is the chevron, so the badge goes on ::before and is
   re-ordered after the label; margin-right:auto keeps the chevron on the right */
.mobile-menu a[href="/send-an-invoice"]::before {
  content: "NEW";
  order: 1;
  margin-left: 10px;
  margin-right: auto;
  padding: 4px 7px 3px;
  border-radius: 999px;
  background: var(--accent);
  color: #04121a;
  font-family: var(--body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
}
.mobile-menu a[href="/send-an-invoice"]::after { order: 2; }

/* Vault/deal badge - hotter than the standing sitewide badge */
.pcard-off.pcard-off-deal{background:#ff3b4e;color:#fff;font-weight:800}

/* ---- Sold out: the card should read as unavailable at a glance ---- */
.pcard-off.pcard-off-out{background:#3a3a42;color:#c9cdd6;font-weight:800;letter-spacing:.06em}
/* dim the shot so the eye skips it in a grid of buyable products */
.vshop-card.is-soldout .media img{filter:grayscale(.75) brightness(.55);transition:filter .2s}
.vshop-card.is-soldout:hover .media img{filter:grayscale(.5) brightness(.7)}
.vshop-card.is-soldout .price{opacity:.45}
.vshop-card.is-soldout .name{color:#9aa4b2}
/* the state tag carries the message, so give it weight */
.v-tag.soldout{background:#3a3a42;color:#e9edf2;font-weight:800;letter-spacing:.06em;
}
/* the price is informational once it can't be bought, not a sale */
.vshop-card.is-soldout .price .amt{color:var(--muted,#9aa4b2)}


/* narrow phones: name owns its row, price drops beneath */
@media (max-width: 560px) {
  .vshop-card .body .pcard-titlerow {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .vshop-card .body .pcard-titlerow .price {
    flex-direction: row;
    align-items: baseline;
    text-align: left;
    gap: 7px;
  }
}


/* modal COA table: opt out of the /coa page mobile stacking */
@media (max-width: 720px) {
  .coa-modal .cm-table { display: table; width: 100%; }
  .coa-modal .cm-table tbody { display: table-row-group; }
  .coa-modal .cm-table tr { display: table-row; padding: 0; }
  .coa-modal .cm-table td {
    display: table-cell;
    width: auto;
    padding: 9px 0;
    text-align: left;
    vertical-align: middle;
    font-size: 12px;
  }
  .coa-modal .cm-table td::before { content: none; }
  .coa-modal .cm-table td.cm-v { text-align: right; white-space: normal; }
  .coa-modal .cm-table td:last-child { width: 46px; text-align: right; }
}


/* [hidden] must beat .cm-btn display:flex */
.coa-modal .cm-btn[hidden] { display: none; }


/* homepage cards: same sold-out treatment as the shop grid */
.pcard.is-soldout .pcard-media img { filter: grayscale(.75) brightness(.55); transition: filter .2s; }
.pcard.is-soldout:hover .pcard-media img { filter: grayscale(.5) brightness(.7); }
.pcard.is-soldout .price { opacity: .45; }
.pcard.is-soldout .pcard-titlerow h3 { color: #9aa4b2; }

/* Cart lines at sale price (2026-10): drawer, /cart and checkout show each line after the sale /
   Vault deal, with its list amount struck under it, instead of one big "Sale discount" row.
   Colours come from theme variables (light mode remaps them); the strike matches the site's own
   .strike (var(--text-3), full opacity); the one fixed sale colour has its light-mode
   counterpart in light/global.css. */
.vc-now { white-space: nowrap; }
.vc-was {
  display: block;
  margin-top: 2px;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--text-3);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* words for screen readers only ("original price") */
.vc-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.cart-item .line-total .vc-was { margin-top: 1px; }
.cart-item .info .price .vc-was { display: inline; margin-left: 6px; }
/* /cart: the strike under the line amount, with air before REMOVE */
.cart-page-item .line .vc-was { font-size: 12.5px; margin-top: 3px; padding-bottom: 4px; }
/* /cart desktop "each" price: a sale line of 2+ shows only the struck list price each */
.cart-page-item .info .price.vc-each {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-3);
}
.cart-page-item .info .price.vc-each .vc-was { display: inline; margin: 0 2px 0 0; font-size: 13px; }
.checkout-summary .sum-item .p,
.co-sumbar-item .p { text-align: right; }
.checkout-summary .sum-item .p .vc-was,
.co-sumbar-item .p .vc-was { font-size: 11px; font-weight: 400; }
/* "You're saving $X" under the cart's money line, in the sale colour */
.vc-saving {
  color: #ff6b1a;
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cart-footer .vc-saving { margin: -1px 0 8px; }
.cart-page-summary .vc-saving { margin: -4px 0 12px; font-size: 13px; }
.checkout-summary .vc-saving { margin: -2px 0 0; padding-bottom: 2px; font-size: 13px; }
.co-sumbar-body .vc-saving { padding: 0 0 2px; margin-top: -3px; }