/*
Theme Name: alopeptides
Theme URI: https://alopeptides.com
Author: alopeptides
Description: Custom theme for alopeptides - research-grade peptides (Canada). Ported pixel-for-pixel from the approved homepage design; integrates with WooCommerce.
Version: 1.3.1
Requires at least: 6.0
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: alopeptides
*/

  :root{
    /* Brand palette derived from the alopeptides logo (blue #5082FF -> violet #7E4AF4) */
    --pink-600:#6B5CF6;          /* primary brand violet (token name kept for reuse) */
    --pink-700:#5942D6;          /* darker violet, hover */
    --pink-50:#F3F2FF;           /* lavender hero/section bg */
    --pink-100:#ECE9FF;          /* badges, soft fills */
    --pink-25:#F8F7FF;
    --brand-blue:#5B86FF;        /* logo gradient blue end */
    --brand-violet:#8257F6;      /* logo gradient violet end */
    --brand-grad:linear-gradient(135deg,#5B86FF 0%,#8257F6 100%);
    --ink-900:#111118;
    --ink-700:#2A2A33;
    --ink-500:#6B7280;
    --ink-400:#9AA0A6;
    --line:#E5E2F7;
    --line-2:#ECEAF4;
    --green-50:#E8F7EE; --green-700:#229A56;
    --teal-50:#E2F4F0; --teal-700:#1F8F87;
    --blue-50:#E6EEFB; --blue-700:#2A6FDB;
    --grey-50:#EFEFF2; --grey-700:#5C5C66;
    --violet-50:#F0EEFF; --violet-700:#5B43D6;
    --radius-card:16px;
    --radius-btn:8px;
    --shadow-sm:0 1px 2px rgba(17,17,24,.04);
    --shadow-card:0 1px 0 rgba(17,17,24,.02), 0 1px 2px rgba(17,17,24,.04);
  }
  .lw-alo{ background:var(--brand-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .tag-violet{ background:var(--violet-50); color:var(--violet-700); }
  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  body{ font-family:'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:var(--ink-900); background:#fff; -webkit-font-smoothing:antialiased; }
  a{ color:inherit; text-decoration:none; }
  img{ display:block; max-width:100%; }
  button{ font-family:inherit; cursor:pointer; }

  .container{ max-width:1200px; margin:0 auto; padding:0 24px; }

  /* ---------- Top trust bar ---------- */
  .topbar{ background:var(--pink-50); border-bottom:1px solid #E7E3FA; }
  .topbar .row{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding:10px 0; align-items:center; font-size:13px; color:var(--ink-700); }
  .topbar .item{ display:flex; align-items:center; gap:8px; justify-content:center; }
  .topbar .item:first-child{ justify-content:flex-start; }
  .topbar .item:last-child{ justify-content:flex-end; }
  .topbar svg{ color:var(--pink-600); }

  /* ---------- Header ---------- */
  .header{ background:#fff; position:sticky; top:0; z-index:50; border-bottom:1px solid #ECEAF6; }
  .header .row{ display:flex; align-items:center; justify-content:space-between; padding:18px 0; gap:24px; }
  .brand{ display:flex; align-items:center; gap:10px; font-size:22px; font-weight:700; color:var(--ink-900); letter-spacing:-.01em; }
  .brand .logo-mark{ width:36px; height:36px; }
  .brand .brand-logo{ height:54px; width:auto; display:block; }
  footer .brand .brand-logo{ height:44px; }
  .nav{ display:flex; align-items:center; gap:32px; font-size:15px; color:var(--ink-700); font-weight:500; }
  .nav a{ display:inline-flex; align-items:center; gap:4px; }
  .nav a:hover{ color:var(--pink-600); }
  .nav .caret{ width:14px; height:14px; opacity:.6; }
  .header-actions{ display:flex; align-items:center; gap:18px; color:var(--ink-700); }
  .header-actions button, .header-actions .act{ background:transparent; border:0; padding:6px; color:inherit; position:relative; display:inline-flex; align-items:center; }
  .header-actions .act:hover{ color:var(--pink-600); }
  .cart-badge{ position:absolute; top:-2px; right:-2px; background:var(--pink-600); color:#fff; font-size:10px; min-width:16px; height:16px; border-radius:8px; padding:0 4px; display:inline-flex; align-items:center; justify-content:center; font-weight:600; }

  /* ---------- Hero ---------- */
  .hero{ position:relative; background:#FFFFFF; overflow:hidden; }
  .hero .grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; padding:64px 0 72px; position:relative; }
  .hero .badge{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); color:var(--ink-900); font-size:13px; font-weight:500; padding:8px 14px; border-radius:999px; box-shadow:var(--shadow-sm); }
  .hero h1{ font-size:56px; line-height:1.05; font-weight:800; margin:24px 0 20px; letter-spacing:-.02em; color:var(--ink-900); }
  .hero h1 em{ font-style:normal; display:block; background:var(--brand-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .hero p.lede{ color:var(--ink-500); font-size:16px; line-height:1.65; max-width:460px; margin:0 0 28px; }
  .hero .cta{ display:flex; gap:12px; margin-bottom:36px; }
  .btn{ display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border-radius:var(--radius-btn); font-weight:600; font-size:15px; border:1.5px solid transparent; transition:transform .1s ease; }
  .btn:hover{ transform:translateY(-1px); }
  .btn-primary{ background:var(--brand-grad); color:#fff; box-shadow:0 8px 20px rgba(107,92,246,.28); }
  .btn-primary:hover{ filter:brightness(1.05) saturate(1.05); }
  .btn-outline{ background:transparent; color:var(--ink-900); border-color:#E2DFF2; }

  .trust-row{ display:grid; grid-template-columns:repeat(3,auto); gap:36px; align-items:flex-start; }
  .trust-row .ti{ display:flex; align-items:flex-start; gap:10px; }
  .trust-row .ti .ic{ width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; color:var(--pink-600); flex-shrink:0; background:transparent; border:0; padding:0; }
  .trust-row .ti b{ display:block; font-size:14px; color:var(--ink-900); }
  .trust-row .ti small{ display:block; font-size:12px; color:var(--ink-500); margin-top:2px; }

  .hero-vials{ position:relative; min-height:560px; display:flex; align-items:center; justify-content:center; background:transparent; isolation:isolate; }
  .hero-vials::before{ content:""; position:absolute; inset:4% -8% 8%; z-index:0; pointer-events:none;
    background:radial-gradient(ellipse at 50% 52%, rgba(255,255,255,.92) 0%, rgba(250,249,255,.76) 45%, rgba(236,231,255,0) 76%);
    filter:blur(2px);
  }
  .hero-vials img{ position:relative; z-index:1; max-width:680px; width:110%; height:auto; background:transparent;
    /* TEMP: shifts the old pink-capped PNG toward the violet/blue brand until the real 3D render is supplied */
    filter: hue-rotate(285deg) saturate(1.05);
    /* Feather all image edges into the hero background. */
    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, #000 14%, #000 76%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image:
        linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, #000 14%, #000 76%, transparent 100%);
            mask-composite: intersect;
  }

  /* ---------- Stats bar ---------- */
  .section{ padding:56px 0; }
  .section.tight{ padding:24px 0; }
  .stats{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-card); padding:28px 24px; }
  .stats-track{ display:grid; grid-template-columns:repeat(4,1fr); align-items:center; }
  .stat.is-dup{ display:none; }   /* duplicate set only used for the mobile marquee */
  .stat{ display:flex; align-items:center; gap:14px; padding:0 16px; border-right:1px solid var(--line); justify-content:flex-start; }
  .stat:last-child{ border-right:0; }
  .stat .ic{ width:42px; height:42px; border-radius:10px; background:var(--pink-100); color:var(--pink-600); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
  .stat b{ font-size:20px; font-weight:700; line-height:1.1; color:var(--ink-900); display:block; }
  .stat small{ font-size:13px; color:var(--ink-500); display:block; margin-top:2px; }
  /* Marquee loop for the mobile stats row (two identical sets → -50% is seamless) */
  @keyframes alo-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

  /* ---------- Section heads ---------- */
  .sec-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:28px; gap:24px; }
  .sec-head h2{ font-size:32px; margin:0 0 6px; font-weight:700; letter-spacing:-.01em; }
  .sec-head p{ margin:0; color:var(--ink-500); font-size:15px; }
  .link-arrow{ display:inline-flex; align-items:center; gap:8px; color:var(--pink-600); font-weight:600; font-size:14px; }

  /* ---------- Product cards ---------- */
  .prod-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
  .prod-card{ background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-card); padding:18px; position:relative; }
  .prod-img{ height:200px; display:flex; align-items:center; justify-content:center; }
  .prod-tag{ display:inline-block; font-size:11px; font-weight:600; padding:4px 10px; border-radius:6px; margin:0 0 10px; letter-spacing:.02em; }
  .tag-green{ background:var(--green-50); color:var(--green-700); }
  .tag-teal{ background:var(--teal-50); color:var(--teal-700); }
  .tag-blue{ background:var(--blue-50); color:var(--blue-700); }
  .tag-grey{ background:var(--grey-50); color:var(--grey-700); }
  .prod-name{ font-size:16px; font-weight:700; margin:0 0 4px; color:var(--ink-900); }
  .prod-mg{ color:var(--ink-500); font-size:13px; margin:0 0 10px; min-height:18px; }
  .prod-rating{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-500); margin-bottom:14px; }
  .stars{ color:#F5B400; letter-spacing:1px; font-size:13px; }
  .prod-foot{ display:flex; align-items:center; justify-content:space-between; }
  .prod-price{ font-size:13px; color:var(--ink-500); }
  .prod-price b{ color:var(--ink-900); font-size:14px; font-weight:700; }
  .icon-btn-pink{ width:36px; height:36px; border-radius:8px; background:var(--brand-grad); color:#fff; border:0; display:inline-flex; align-items:center; justify-content:center; }
  .icon-btn-pink:hover{ filter:brightness(1.05) saturate(1.05); }

  /* ---------- Vial illustration (CSS in product cards) ---------- */
  .vial{ width:96px; height:170px; position:relative; filter:drop-shadow(0 8px 14px rgba(107,92,246,.18)); }
  .vial .cap{ width:78px; height:18px; background:var(--pink-600); border-radius:6px 6px 3px 3px; margin:0 auto 0; position:relative; z-index:2; }
  .vial .cap::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:6px; background:linear-gradient(180deg,#bdbdc4,#8b8b94); border-radius:1px; }
  .vial .neck{ width:60px; height:8px; background:#cfcfd6; margin:0 auto; }
  .vial .body{ width:90px; height:130px; margin:0 auto; background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,235,242,.92)); border:1.5px solid #DCD6F4; border-radius:6px; position:relative; overflow:hidden; }
  .vial .body::before{ content:""; position:absolute; left:6px; top:6px; width:14px; height:60%; background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0)); border-radius:6px; }
  .vial .label{ position:absolute; top:18px; left:6px; right:6px; text-align:center; }
  .vial .brand-mini{ display:inline-flex; align-items:center; gap:3px; font-size:8px; font-weight:600; color:var(--ink-900); }
  .vial .brand-mini svg{ width:10px; height:10px; }
  .vial .pname{ color:var(--pink-600); font-weight:700; font-size:14px; margin-top:4px; line-height:1; }
  .vial .pmg{ color:var(--ink-500); font-size:9px; margin-top:2px; }
  .vial .ruse{ position:absolute; left:-2px; right:-2px; bottom:14px; background:#E8334D; color:#fff; font-size:7px; font-weight:700; text-align:center; padding:2px 0; transform:skewY(-2deg); letter-spacing:.04em; }

  /* ---------- Quality banner (replaces Science section) ---------- */
  .quality-banner{ position:relative; background:linear-gradient(135deg, #1B1542 0%, #241A5E 55%, #160F38 100%); border-radius:20px; padding:88px 64px; overflow:hidden; display:grid; grid-template-columns:1.05fr 1fr; gap:32px; align-items:center; box-shadow:0 30px 60px rgba(20,15,55,0.25); }
  .qb-grid-bg{ position:absolute; inset:0; background-image: radial-gradient(rgba(107,92,246,0.13) 1px, transparent 1.4px); background-size:22px 22px; opacity:0.45; pointer-events:none; mask-image:radial-gradient(ellipse at 50% 60%, #000 30%, rgba(0,0,0,0.4) 70%, transparent 100%); -webkit-mask-image:radial-gradient(ellipse at 50% 60%, #000 30%, rgba(0,0,0,0.4) 70%, transparent 100%); }
  .qb-glow{ position:absolute; right:-10%; top:50%; transform:translateY(-50%); width:780px; height:780px; background:radial-gradient(circle at center, rgba(107,92,246,0.22) 0%, rgba(107,92,246,0.08) 35%, rgba(107,92,246,0) 65%); pointer-events:none; }
  .qb-copy{ position:relative; z-index:2; max-width:540px; }
  .qb-label{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.18em; color:#B9C4FF; text-transform:uppercase; margin-bottom:18px; }
  .qb-h2{ font-size:54px; line-height:1.05; font-weight:800; color:#FFFFFF; margin:0 0 22px; letter-spacing:-.02em; }
  .qb-h2 .qb-pink{ color:#7E4AF4; display:block; }
  .qb-p{ font-size:16px; line-height:1.7; color:rgba(255,255,255,0.72); margin:0 0 32px; max-width:520px; }
  .qb-trust{ display:flex; gap:28px; flex-wrap:wrap; margin-bottom:36px; }
  .qb-t{ display:inline-flex; align-items:center; gap:10px; color:#FFFFFF; font-size:14px; font-weight:600; }
  .qb-ic{ width:32px; height:32px; border-radius:8px; background:rgba(107,92,246,0.15); border:1px solid rgba(107,92,246,0.35); color:#A9B6FF; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
  .qb-btn{ display:inline-flex; align-items:center; gap:10px; padding:14px 28px; border:1.5px solid rgba(255,255,255,0.9); color:#FFFFFF; border-radius:999px; font-weight:600; font-size:15px; background:transparent; transition:background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease; }
  .qb-btn:hover{ background:#FFFFFF; color:#1B1542; border-color:#FFFFFF; transform:translateY(-1px); }
  .qb-visual{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; min-height:440px; }
  .qb-molecule{ width:100%; max-width:520px; filter: drop-shadow(0 20px 40px rgba(107,92,246,0.25)); animation: qb-spin 60s linear infinite; transform-origin: 50% 50%; }
  @keyframes qb-spin{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
  @media (max-width: 900px){
    .quality-banner{ grid-template-columns:1fr; padding:64px 32px; }
    .qb-h2{ font-size:40px; }
    .qb-visual{ min-height:340px; }
  }

  .science{ background:#F3F2FF; border-radius:24px; overflow:hidden; display:grid; grid-template-columns:1fr 1.1fr; align-items:stretch; }
  .science-copy{ padding:56px 48px; }
  .eyebrow{ font-size:11px; font-weight:700; color:var(--pink-600); letter-spacing:.12em; }
  .science-copy h2{ font-size:40px; line-height:1.1; margin:14px 0 18px; font-weight:700; letter-spacing:-.01em; }
  .science-copy h2 em{ font-style:normal; color:var(--pink-600); display:block; }
  .science-copy p{ color:var(--ink-700); font-size:15px; line-height:1.6; max-width:380px; margin:0 0 28px; }
  .science-feats{ display:flex; gap:32px; margin-bottom:28px; }
  .science-feats .f{ display:flex; flex-direction:column; gap:8px; max-width:120px; }
  .science-feats .ic{ width:36px; height:36px; border-radius:8px; background:#fff; color:var(--pink-600); display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); }
  .science-feats b{ font-size:13px; color:var(--ink-900); display:block; }
  .science-feats small{ font-size:12px; color:var(--ink-500); display:block; }
  .science-image{ background-size:cover; background-position:center; min-height:460px; }

  /* ---------- Bottom feature row ---------- */
  .features{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-card); padding:22px; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
  .feat{ display:flex; align-items:flex-start; gap:14px; padding:8px 18px; border-right:1px solid var(--line); }
  .feat:last-child{ border-right:0; }
  .feat .ic{ width:42px; height:42px; border-radius:10px; background:var(--pink-100); color:var(--pink-600); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
  .feat b{ display:block; font-size:14px; color:var(--ink-900); margin-bottom:4px; }
  .feat small{ display:block; font-size:12px; color:var(--ink-500); line-height:1.45; }

  /* ---------- Newsletter ---------- */
  .news{ background:var(--pink-50); border-radius:var(--radius-card); padding:36px 40px; display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; position:relative; overflow:hidden; }
  .news h3{ font-size:22px; margin:0 0 6px; font-weight:700; }
  .news p{ margin:0; color:var(--ink-500); font-size:14px; }
  .news-form{ display:flex; gap:10px; align-items:center; justify-content:flex-end; }
  .news-form input{ flex:1; max-width:340px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-btn); font-size:14px; font-family:inherit; background:#fff; color:var(--ink-900); }
  .news-form input::placeholder{ color:var(--ink-400); }
  .news .molecule-deco{ position:absolute; right:0; bottom:-30px; width:280px; opacity:.4; pointer-events:none; }

  /* ---------- Mega menu ---------- */
  .nav-drop{ position:relative; }
  .nav-drop .mega{ position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(6px); background:#fff; border:1.5px solid var(--line); border-radius:16px; padding:28px 32px; display:grid; grid-template-columns:repeat(3,160px); gap:32px; box-shadow:0 8px 40px rgba(107,92,246,0.15); opacity:0; visibility:hidden; transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s; z-index:60; }
  .nav-drop:hover .mega, .nav-drop:focus-within .mega{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); transition:opacity .2s ease, transform .2s ease, visibility 0s; }
  .nav-drop .mega::before{ content:""; position:absolute; top:-14px; left:0; right:0; height:14px; }
  .mega-col{ display:flex; flex-direction:column; gap:10px; }
  .mega-col h5{ font-size:11px; font-weight:700; color:var(--pink-600); letter-spacing:.12em; text-transform:uppercase; margin:0 0 4px; }
  .mega-col a{ font-size:15px; font-weight:500; color:var(--ink-900); padding:2px 0; }
  .mega-col a:hover{ color:var(--pink-600); }
  .mega.mega-help{ grid-template-columns:210px; left:auto; right:0; transform:translateX(0) translateY(6px); }
  .nav-drop:hover .mega.mega-help, .nav-drop:focus-within .mega.mega-help{ transform:translateX(0) translateY(0); }

  /* ---------- Product cards (landing "Popular Peptides") ---------- */
  .prod-card{ cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
  .prod-card:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(107,92,246,0.12); border-color:#C9C2F4; }

  footer{ padding:56px 0 24px; }
  .foot-grid{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:40px 64px; padding-bottom:40px; border-bottom:1px solid var(--line-2); }
  .foot-brand{ flex:1 1 300px; max-width:360px; }
  .foot-col{ flex:0 1 auto; min-width:150px; }
  .foot-brand p{ color:var(--ink-500); font-size:13px; line-height:1.6; max-width:300px; margin:14px 0 18px; }
  .foot-socials{ display:flex; gap:14px; color:var(--ink-700); }
  .foot-socials a{ display:inline-flex; }
  .foot-col h4{ font-size:14px; margin:0 0 14px; font-weight:700; color:var(--ink-900); }
  .foot-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
  .foot-col a{ color:var(--ink-500); font-size:13px; }
  .foot-col a:hover{ color:var(--pink-600); }
  .foot-help p{ color:var(--ink-500); font-size:13px; margin:0 0 14px; line-height:1.6; max-width:220px; }
  .foot-bottom{ display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--ink-500); padding-top:24px; gap:24px; }
  .foot-bottom .links{ display:flex; gap:18px; }

/* ---------- Generic WP content pages (About/FAQ/legal/etc.) ---------- */
.page-hero-min{ background:linear-gradient(180deg,#F8F7FF,#ECE9FF); border-bottom:1px solid #E7E3FA; padding:48px 0 40px; }
.page-hero-min .crumbs{ font-size:13px; color:var(--ink-500); margin-bottom:10px; }
.page-hero-min h1{ font-size:42px; font-weight:800; letter-spacing:-.02em; margin:0; }
.page-body{ padding:48px 0 72px; }
.page-body .entry{ max-width:760px; font-size:16px; line-height:1.75; color:var(--ink-700); }
.page-body .entry h2{ font-size:26px; font-weight:700; color:var(--ink-900); margin:32px 0 12px; letter-spacing:-.01em; }
.page-body .entry h3{ font-size:19px; font-weight:700; color:var(--ink-900); margin:24px 0 8px; }
.page-body .entry p{ margin:0 0 16px; }
.page-body .entry a{ color:var(--pink-600); font-weight:600; }
.page-body .entry ul,.page-body .entry ol{ margin:0 0 16px; padding-left:22px; }
.page-body .entry li{ margin:6px 0; }


  /* ---------- Quality banner: light style + flask image ---------- */
  .quality-banner{ background:linear-gradient(135deg,#F5F3FF 0%,#ECE9FF 60%,#F5F3FF 100%); border:1px solid var(--line); box-shadow:0 24px 50px rgba(107,92,246,0.15); }
  .qb-label{ color:var(--pink-600); }
  .qb-h2{ color:var(--ink-900); }
  .qb-p{ color:var(--ink-500); }
  .qb-t{ color:var(--ink-900); }
  .qb-ic{ background:var(--pink-100); border:1px solid var(--line); color:var(--pink-600); }
  .qb-btn{ border-color:var(--pink-600); color:var(--pink-600); }
  .qb-btn:hover{ background:var(--pink-600); color:#fff; border-color:var(--pink-600); }
  .quality-banner{ padding:56px 56px; }
  .qb-visual{ min-height:auto; }
  .qb-flask{ width:100%; height:auto; max-width:560px; max-height:none; margin:-10px auto; filter:drop-shadow(0 14px 44px rgba(124,108,255,0.45)); animation:qb-float 6s ease-in-out infinite; }
  @keyframes qb-float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px);} }
  /* ---------- Hero: lavender backdrop to match reference ---------- */
  .hero{ background:linear-gradient(160deg, #ECE7FF 0%, #F6F4FF 40%, #FFFFFF 78%); }
  .hero .grid{ position:relative; z-index:1; }
  .hero::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:radial-gradient(rgba(124,108,255,0.12) 1px, transparent 1.5px); background-size:24px 24px;
    -webkit-mask-image:radial-gradient(ellipse 55% 65% at 100% 0%, #000, rgba(0,0,0,0) 70%);
            mask-image:radial-gradient(ellipse 55% 65% at 100% 0%, #000, rgba(0,0,0,0) 70%); }

/* =======================================================================
 * Research-Use-Only notices, newsletter, product photos
 * ===================================================================== */
.alo-ruo{ margin:14px 0; padding:10px 14px; background:#F5F3FF; border:1px solid #E5E2F7; border-left:3px solid #6B5CF6; border-radius:8px; color:#4B5563; font-size:13px; line-height:1.5; }
.woocommerce .alo-ruo{ clear:both; }
.alo-ruo-ack, .alo-ruo-ack label{ font-size:13px; color:#4B5563; }
.news-msg{ margin:0 0 10px; font-size:13px; font-weight:600; }
.news-msg.ok{ color:#1a7f37; } .news-msg.err{ color:#b3261e; }
.news-consent{ grid-column:1 / -1; margin:10px 0 0; font-size:11px; color:#9CA3AF; }
.news-consent a{ color:var(--pink-600); }
/* Product photo sits in a rounded card image box, cover-fills without distortion,
   with breathing room before the category tag. */
.prod-img{ aspect-ratio:1/1; height:auto; overflow:hidden; border-radius:14px; background:#E4DFE1; margin-bottom:14px; padding:14px; box-sizing:border-box; }
.prod-photo{ width:100%; height:100%; object-fit:contain; display:block; }

.prod-card .prod-img{ align-items:center; }
.prod-card .prod-photo{ width:100%; height:100%; object-fit:contain; display:block; }
.alo-gallery-extra{ width:100%; height:auto; display:block; border-radius:12px; margin-top:10px; }
.alo-gallery-extra{ margin-top:10px; }

/* =======================================================================
 * Mobile navigation toggle (hidden on desktop)
 * ===================================================================== */
.nav-toggle{ display:none; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid var(--line); background:#fff; border-radius:10px; color:var(--ink-900); cursor:pointer; flex-shrink:0; }
.nav-toggle svg{ width:24px; height:24px; }
.nav-toggle .nt-close{ display:none; }
.nav-toggle[aria-expanded="true"] .nt-open{ display:none; }
.nav-toggle[aria-expanded="true"] .nt-close{ display:block; }

/* =======================================================================
 * Responsive — tablet & mobile
 * ===================================================================== */
@media (max-width: 980px){
  /* Header: logo left; account/cart + hamburger grouped on the right */
  .nav-toggle{ display:inline-flex; order:4; }
  .header .row{ flex-wrap:wrap; gap:12px; }
  .header-actions{ order:3; margin-left:auto; gap:16px; }
  .header .nav{ display:none; }
  body.alo-nav-open .header .nav{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    order:5; flex:1 0 100%; width:100%; margin-top:6px; padding-top:6px; border-top:1px solid var(--line);
  }
  body.alo-nav-open .header .nav > a,
  body.alo-nav-open .header .nav .nav-drop > .nav-drop-trigger{
    display:flex; align-items:center; gap:6px; padding:13px 2px; font-size:16px; border-bottom:1px solid var(--line);
  }
  /* Dropdown panels hidden on mobile; top-level links navigate (Shop → /shop, Help → /faq) */
  .header .nav .nav-drop{ position:static; }
  .header .nav .mega{ display:none !important; }
  .header .nav .nav-drop .caret{ margin-left:auto; }

  /* Hero — note the specific .hero h1 selector so it actually overrides */
  .hero .grid{ grid-template-columns:1fr; gap:24px; padding:40px 0 44px; }
  .hero h1{ font-size:40px; }
  .hero p.lede{ max-width:none; }
  .hero .cta{ flex-wrap:wrap; }
  .hero-vials{ min-height:auto; }
  .hero-vials img{ width:100%; max-width:440px; }
  .trust-row{ grid-template-columns:repeat(3,1fr); gap:16px; }

  /* Stats become a single auto-scrolling marquee row (saves vertical space) */
  .stats{ padding:0; overflow:hidden; }
  .stats-track{ display:flex; width:max-content; align-items:stretch; animation:alo-marquee 26s linear infinite; }
  .stats-track:hover{ animation-play-state:paused; }
  .stat{ flex:0 0 auto; gap:10px; padding:18px 26px; border-right:1px solid var(--line); white-space:nowrap; }
  .stat.is-dup{ display:flex; }
  .stat b{ font-size:16px; }
  @media (prefers-reduced-motion: reduce){ .stats-track{ animation:none; } }
  .prod-grid{ grid-template-columns:repeat(2,1fr); }
  .features{ grid-template-columns:repeat(2,1fr); }
  .feat{ border-right:0; }
  .news{ grid-template-columns:1fr; gap:18px; }
  .news-form{ justify-content:flex-start; }
  .foot-grid{ justify-content:flex-start; gap:32px 56px; }
  .foot-brand{ flex:1 1 100%; max-width:none; }
  .science{ grid-template-columns:1fr; }
  .science-image{ min-height:260px; }
}

@media (max-width: 600px){
  /* .section uses `padding: N 0` which zeroes horizontal padding, so target the
     combined selector (higher specificity) to guarantee edge spacing on mobile. */
  .container,
  .container.section,
  .section.container,
  section.container{ padding-left:24px; padding-right:24px; }
  /* Topbar: single tidy centered line, drop the middle item */
  .topbar .row{ grid-template-columns:1fr; gap:6px; }
  .topbar .item{ justify-content:center !important; font-size:12px; }
  .topbar .item:nth-child(2){ display:none; }

  /* Mobile hero: clean centered text on the soft gradient, with the vials
     showcased below (full, uncropped). The light, detailed vials image reads
     badly as a full-bleed backdrop behind text, so we stack instead of overlay.
     Trust row hidden here — the stats marquee right below carries the signals. */
  .hero .grid{ display:block; text-align:center; padding:18px 0 8px; position:relative; }
  /* Text/button forced on top (z-index:3) and fully opaque; vials forced behind
     (z-index:0). Guarantees no wash-out/overlap regardless of source order. */
  .hero .grid > div:first-child{ padding:0 4px; position:relative; z-index:3; }
  .hero .grid > div:first-child *{ opacity:1; }
  .hero .badge{ margin:0 auto; }
  .hero h1{ font-size:30px; line-height:1.16; margin:16px 0 12px; opacity:1; }
  .hero p.lede{ font-size:15px; margin:0 auto 22px; max-width:330px; opacity:1; }
  .hero .cta{ flex-direction:row; justify-content:center; align-items:center; margin-bottom:4px; position:relative; z-index:3; }
  .hero .cta .btn{ justify-content:center; width:auto; min-width:210px; opacity:1; }
  .hero .trust-row{ display:none; }

  .hero-vials{ position:relative; z-index:0; min-height:auto; margin-top:6px; }
  .hero-vials img{ position:static; width:100%; max-width:340px; height:auto; object-fit:contain; margin:0 auto; }

  .section{ padding:36px 0; }
  .sec-head{ flex-direction:column; align-items:flex-start; gap:10px; }
  .sec-head h2{ font-size:24px; }
  .stats{ grid-template-columns:1fr 1fr; gap:10px; }
  /* Popular Peptides becomes a swipeable carousel on mobile (shows ~1¼ cards
     to hint the swipe); full list is one tap away via "View All Products". */
  .prod-grid{ display:flex; grid-template-columns:none; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:4px 0 14px; scrollbar-width:none; }
  .prod-grid::-webkit-scrollbar{ display:none; }
  .prod-grid > .prod-card{ flex:0 0 80%; scroll-snap-align:start; }
  .features{ grid-template-columns:1fr; }
  .foot-grid{ flex-direction:column; gap:26px; }
  .foot-col{ min-width:0; }
  .foot-bottom{ flex-direction:column; align-items:flex-start; gap:10px; }
  .foot-bottom .links{ flex-wrap:wrap; gap:14px; }
  .qb-h2{ font-size:28px; }
  .quality-banner{ padding:36px 20px; }
  .news{ padding:26px 22px; }
  .news-form{ flex-direction:column; align-items:stretch; }
  .news-form input{ max-width:none; }
  .news-form .btn{ width:100%; justify-content:center; }
}

@media (max-width: 400px){
  .hero h1{ font-size:26px; }
  .stats{ grid-template-columns:1fr; }
  .prod-grid{ grid-template-columns:1fr; }
  .trust-row{ grid-template-columns:1fr; }
}

/* preview cache-bust 1782252360 */