/* ═══════════════════════════════════════════════════════════════════
   GEO-UAE — /peptides-uae page layer on top of pdp-system.css
   Design language v2 · dark-only · motion scoped html.enhance
   Owns: hero command header, geo catalog cards, verify ledger,
   delivery steps, FAQ physics on the .home-faq vocabulary.
   ═══════════════════════════════════════════════════════════════════ */

/* ── breadcrumb sits outside <main>, so it carries its own gutters ── */
.pdp-breadcrumb{padding-inline:clamp(20px,4vw,40px)}

/* ── motion: same-element .rv variants ────────────────────────────────────────
   pdp-system's tag-draw selector is `html.enhance .rv .section-tag::after`
   (descendant). This page puts .rv ON the tags themselves, so without these
   same-element twins the dash would simply never draw. */
html.enhance .section-tag.rv::after{transform:scaleX(0);transform-origin:left}
html.enhance .section-tag.rv.in::after{transform:scaleX(1);transition:transform var(--d-4) var(--ease-out) 120ms}
/* hero eyebrow dash draws with the H1 mask reveal (.hero-in set by geo-uae-motion) */
html.enhance .g-hero .hero-tag::before{transform:scaleX(0);transform-origin:left;transition:transform var(--d-4) var(--ease-out) 80ms}
html.enhance .g-hero.hero-in .hero-tag::before{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  html.enhance .section-tag.rv::after{transform:scaleX(1);transition:none}
  html.enhance .g-hero .hero-tag::before{transform:scaleX(1);transition:none}
}

/* ── hero ── */
.g-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(30px,4.5vw,64px);align-items:center;max-width:var(--max);margin:0 auto;padding:30px 0 52px}
.g-hero::before{content:'';position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(219,38,108,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(219,38,108,.04) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 78% 82% at 42% 44%,#000 18%,transparent 78%);mask-image:radial-gradient(ellipse 78% 82% at 42% 44%,#000 18%,transparent 78%)}
.g-hero::after{content:'';position:absolute;bottom:-140px;right:-120px;width:620px;height:620px;z-index:0;background:radial-gradient(circle,var(--pink-glow) 0%,transparent 68%);pointer-events:none;animation:orbDrift 26s var(--ease-io) infinite alternate}
.g-hero>*{position:relative;z-index:1;min-width:0}
#heroParticles{position:absolute;inset:0;z-index:0;pointer-events:none}
.g-hero .title{font-size:clamp(33px,4.4vw,54px);margin:14px 0 14px}
.g-hero .hero-subtitle{font-family:var(--sans);font-size:16px;font-weight:300;font-style:normal;letter-spacing:0;color:var(--gray-light);line-height:1.75;max-width:56ch;margin:0 0 16px}
.g-hero .hero-proof-chips{margin:0 0 18px}
.g-hero-proof{font-size:13.5px;line-height:1.75;color:var(--gray-dark);max-width:54ch;margin:18px 0 0}
/* ── button system ───────────────────────────────────────────────────────────
   One voice for every pill on the page: DM Mono 500, 12px/.12em uppercase,
   52px tall, 999px radius, lift -1px on hover, sit down 1px on :active.
   Tertiary (.btn-ghost) is deliberately shorter + quieter so the hero reads
   primary → commerce → contact → reference rather than four equal shouts. ── */
.g-hero .hero-actions,.g-final-actions{gap:10px}
.btn-primary,.btn-cart,.btn-contact,.btn-ghost,.card-add{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 24px;border-radius:999px;border:none;cursor:pointer;
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap;
  transition:transform var(--d-2) var(--ease-out),background var(--d-2),box-shadow var(--d-2),border-color var(--d-2)
}
.btn-primary:active,.btn-cart:active,.btn-contact:active,.btn-ghost:active,.card-add:active{transform:translateY(1px)}
/* the pink primary's stock glow is a floodlight at hero size — tame it, bloom on hover */
.btn-primary{box-shadow:0 10px 30px rgba(219,38,108,.22)}
.btn-primary:hover{box-shadow:0 14px 38px rgba(219,38,108,.34);transform:translateY(-1px)}
/* white commerce pill */
.btn-cart{background:#fff;color:#0a0a0a}
.btn-cart:hover{background:#f0f0f0;transform:translateY(-1px);box-shadow:0 12px 34px rgba(255,255,255,.13)}
/* tertiary: quieter, shorter, no fill */
.btn-ghost{min-height:46px;padding:0 20px;font-size:11.5px;font-weight:400;background:transparent;border:1px solid var(--border-2);color:var(--gray-light)}
.btn-ghost:hover{border-color:var(--border-strong);color:var(--white);transform:translateY(-1px)}
/* WhatsApp: WHITE ink (owner directive 2026-07-10). White can only sit on the deep
   green — #fff on the bright #25d366 is 1.98:1 and `tests/wa-cta-contrast.test.js`
   rejects that pairing. So the fill stays the site-wide #0b6f34 from
   responsive-fixes.css (#fff ≈ 6.3:1); we only correct the weight, because its
   `font-weight:700` faux-bolds DM Mono (the family tops out at 500). */
.btn-contact--whatsapp{font-weight:500}
.btn-contact--whatsapp svg{fill:currentColor}
.g-hero .btn-contact--whatsapp{flex:0 1 auto}
/* trailing arrow glyphs travel on hover (v2 .arr convention) */
.arr{display:inline-block;transition:transform var(--d-2) var(--ease-out)}
.btn-primary:hover .arr,.btn-ghost:hover .arr,.g-card-links a:hover .arr{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.arr{transition:none}}

/* showcase — full-bleed white specimen, same recipe as the PDP frames
   (80% × 1.3 ≈ 104% of the frame, so the studio shot's white edges clip clean) */
.g-show{position:relative}
.g-show .frame{aspect-ratio:1/1;--art-zoom:1.3}
.g-show .frame img{width:80%}
@media (max-width:940px){
  .g-hero{grid-template-columns:minmax(0,1fr);gap:30px;padding:22px 0 44px}
  .g-hero-proof{display:none}
  .g-show{max-width:420px}
}
@media (max-width:767px){#heroParticles{display:none}}
@media (prefers-reduced-motion:reduce){#heroParticles{display:none}.g-hero::after{animation:none}}

/* ── quick answer callout ── */
.quick-answer{max-width:var(--max);margin:0 auto;padding:6px 0 0}
.g-answer{position:relative;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--pink);border-radius:var(--r-lg);padding:22px 26px;font-size:15.5px;line-height:1.8;color:var(--gray-light);max-width:900px}
.g-answer strong{color:var(--white);font-weight:500}
.g-answer a{color:var(--pink-text);text-decoration:underline;text-underline-offset:2px}
.g-reviewed{max-width:var(--max);margin:0 auto;padding:12px 0 6px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-dark)}
.g-reviewed a{color:var(--pink-text);text-decoration:underline;text-underline-offset:2px}

/* ── buy-intent queries section (system .section supplies the shell) ── */
#buy-peptides-uae-queries .section-intro em{font-family:inherit;font-style:italic;color:var(--gray-light);font-weight:inherit}

/* ── trust bar: system grid, icon-tile interior ── */
.trust-bar{margin:26px auto 0}
.trust-item{display:flex;align-items:flex-start;gap:14px}
.trust-icon-svg{width:38px;height:38px;flex-shrink:0;border-radius:var(--r);background:var(--pink-dim);border:1px solid var(--border-pink);display:flex;align-items:center;justify-content:center;color:var(--pink-text)}
.trust-icon-svg svg{width:19px;height:19px}
.trust-label{font-size:12px;line-height:1.5;color:var(--gray-dark);font-family:var(--mono);letter-spacing:.02em}
.trust-label strong{display:block;font-family:var(--sans);font-size:14.5px;font-weight:500;letter-spacing:0;color:var(--white);margin-bottom:2px}
@media (max-width:600px){
  .trust-bar{grid-template-columns:1fr 1fr}
  .trust-item:last-child{grid-column:1/-1}
}

/* ── verify-before-ordering ledger ── */
.g-ledger{max-width:860px;margin-top:6px}
.g-ledger p{padding:18px 2px;border-top:1px solid var(--border);font-size:15px;line-height:1.8;color:var(--gray);margin:0}
.g-ledger p:last-child{border-bottom:1px solid var(--border)}
.g-ledger strong{display:block;font-size:16.5px;font-weight:500;color:var(--white);margin-bottom:5px}
.g-ledger a{color:var(--pink-text);text-decoration:underline;text-underline-offset:2px}

/* ── catalog cards ── */
.g-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:32px}
@media (max-width:1080px){.g-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g-cards{grid-template-columns:minmax(0,1fr)}}
.g-card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px 16px 18px;overflow:hidden;transition:transform var(--d-2) var(--ease-out),border-color var(--d-2)}
@media (hover:hover){.g-card:hover{transform:translateY(-4px);border-color:var(--border-pink)}}
.g-card--flag{border-color:var(--border-pink);background:linear-gradient(180deg,rgba(219,38,108,.05),transparent 42%),var(--surface)}
.g-card--flag::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--pink),transparent)}
/* white specimen tile — the /products + PDP cross-sell convention: the studio
   shots are white-bg, so a white well makes them read as one object, not a
   photo floating in a dark box. Shadows are baked into the photography. */
.g-card-media{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:5/4;border-radius:var(--r);overflow:hidden;background:#fff;border:1px solid var(--border);margin-bottom:14px}
.g-card-media::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04),inset 0 -22px 34px rgba(16,6,10,.07);pointer-events:none}
.g-card-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--d-3) var(--ease-out)}
/* the full-lineup group shot is wider than the window — anchor the crop on the
   lead carton so the composition exits the frame deliberately, not mid-face */
.g-card:last-child .g-card-media img{object-position:32% center}
@media (hover:hover){.g-card:hover .g-card-media img{transform:scale(1.04)}}
.g-card-h{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--pink-text)}
a.g-card-h{display:block;text-decoration:none}
.g-card-desc{font-size:13.5px;line-height:1.65;color:var(--gray);margin:8px 0 4px}
.g-card-desc a{color:var(--pink-text);text-decoration:underline;text-underline-offset:2px}
.g-card-links{list-style:none;margin:10px 0 0;padding:0}
.g-card-links li{border-top:1px solid var(--border)}
.g-card-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:9px 2px;font-size:13.5px;line-height:1.5;color:var(--gray-light);text-decoration:none;transition:color var(--d-1)}
/* .is-key anchors already end in a literal arrow inside their (SEO-pinned) link
   text — only the plain rows get a generated one, so no row shows two. */
.g-card-links a:not(.is-key)::after{content:'\2192';font-family:var(--mono);color:var(--pink-text);opacity:.45;flex-shrink:0;transition:opacity var(--d-2),transform var(--d-2) var(--ease-out)}
.g-card-links a:hover{color:var(--white)}
.g-card-links a:hover::after{opacity:1;transform:translateX(3px)}
.g-card-links a.is-key{color:var(--pink-text)}
.g-card-links a.is-key:hover{color:var(--glow-pink)}
/* price floor: the one number per card — mono, tabular, never uppercase-crushed */
.g-floor{margin-top:auto;padding-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--pink-text);font-variant-numeric:tabular-nums;line-height:1.5}
.g-card .card-add{width:100%;min-height:48px;margin-top:12px;padding:0 18px;font-size:11.5px;letter-spacing:.1em;background:var(--pink);color:#fff;box-shadow:none}
.g-card .card-add:hover{background:var(--pink-hover);transform:translateY(-1px);box-shadow:0 10px 28px rgba(219,38,108,.28)}
.g-card .btn-primary{width:100%;margin-top:auto;min-height:48px;font-size:11.5px}
.g-card-links+.btn-primary{margin-top:20px}

/* ── COA verification ── */
.g-coa-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.g-coa-actions svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;flex-shrink:0}

/* ── delivery steps ── */
.g-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:30px}
@media (max-width:940px){.g-steps{grid-template-columns:minmax(0,1fr)}}
.g-step{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px 22px;transition:transform var(--d-2) var(--ease-out),border-color var(--d-2)}
@media (hover:hover){.g-step:hover{transform:translateY(-3px);border-color:var(--border-pink)}}
.g-step-n{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.18em;color:var(--pink-text);margin-bottom:12px}
.g-step-n::after{content:'';display:block;width:26px;height:1px;background:var(--border-pink);margin-top:10px}
.g-step-t{font-size:16.5px;font-weight:500;color:var(--white);margin-bottom:8px}
.g-step-d{font-size:13.5px;line-height:1.7;color:var(--gray)}
.g-step-d a{color:var(--pink-text);text-decoration:underline;text-underline-offset:2px}
.g-stock-note{max-width:720px;margin:24px 0 0;font-size:13.5px;line-height:1.7;color:var(--gray-dark)}
.g-stock-note a{color:var(--pink-text);text-decoration:underline;text-underline-offset:2px}

/* ── FAQ — system physics on the .home-faq vocabulary ── */
.home-faq .g-faq{max-width:860px;margin-top:6px}
.home-faq-item{border-bottom:1px solid var(--border)}
.home-faq-item:first-child{border-top:1px solid var(--border)}
.home-faq-item summary{list-style:none;cursor:pointer;position:relative;display:block;padding:20px 52px 20px 2px;font-size:16.5px;font-weight:400;color:var(--white);line-height:1.5}
.home-faq-item summary::-webkit-details-marker{display:none}
.home-faq-item summary::after{content:'+';position:absolute;right:4px;top:50%;translate:0 -50%;width:26px;height:26px;border-radius:50%;border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center;font-size:17px;color:var(--gray);transition:transform var(--d-3) var(--ease-out),background var(--d-2),color var(--d-2),border-color var(--d-2)}
@media (hover:hover){.home-faq-item:not([open]) summary:hover::after{border-color:var(--pink-text);color:var(--pink-text)}}
.home-faq-item[open] summary::after{transform:rotate(45deg);background:var(--pink);color:#fff;border-color:var(--pink)}
.home-faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--d-3) var(--ease-out)}
.home-faq-item[open] .home-faq-answer{grid-template-rows:1fr}
.home-faq-answer>div{overflow:hidden;min-height:0;padding:0 2px;font-size:14.5px;color:var(--gray);line-height:1.8;font-weight:300;max-width:76ch}
.home-faq-item[open] .home-faq-answer>div{padding-bottom:22px}
.home-faq-answer a{color:var(--pink-text)}
@media (prefers-reduced-motion:reduce){.home-faq-answer{transition:none}}

/* ── final CTA band ── */
.g-final{position:relative;max-width:var(--max);margin:0 auto;padding:clamp(56px,8vw,104px) 0 clamp(46px,6vw,72px);border-top:1px solid var(--border);text-align:center;overflow:hidden}
.g-final::before{content:'';position:absolute;top:-160px;left:50%;transform:translateX(-50%);width:680px;height:420px;background:radial-gradient(ellipse,var(--pink-glow) 0%,transparent 70%);pointer-events:none}
.g-final>*{position:relative}
.g-final-title{font-family:var(--serif);font-size:clamp(30px,3.6vw,46px);font-weight:600;line-height:1.08;letter-spacing:-.02em;margin-bottom:24px}
.g-final-actions{display:flex;justify-content:center;flex-wrap:wrap;align-items:center}
.g-final-signals{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.g-final-signals span{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--gray-light);background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:8px 14px}
.g-final-signals svg{width:14px;height:14px;color:var(--pink-text);flex-shrink:0}
/* a full sentence of legal copy is unreadable in mono — set it in the body face */
.g-final-disclaimer{margin:24px auto 0;max-width:52ch;font-family:var(--sans);font-size:12.5px;font-weight:300;letter-spacing:0;line-height:1.7;color:var(--gray-dark)}

/* ── prose emphasis ──────────────────────────────────────────────────────────
   pdp-system's `main em` paints EVERY <em> as a pink serif italic. That is the
   display-heading accent; inside running text it turns ordinary emphasis (and
   the FAQ's keyword phrases) into pink confetti. Body copy gets plain italics. */
.section-intro em,.g-ledger em,.g-card-desc em,.home-faq-answer em,.g-answer em{
  font-family:inherit;font-style:italic;color:inherit;font-weight:inherit
}

/* ── mobile ── */
@media (max-width:640px){
  /* Hero CTAs stack by rank: primary full-width, the two commerce/contact pills
     share a row, reference pill full-width underneath. Everything stays one line,
     so no pill wraps its label. Row-axis flex-basis is reset explicitly — a bare
     `flex:1 1 …` here would become a HEIGHT once the row wraps. */
  .g-hero .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .g-hero .hero-actions>.btn-primary{grid-column:1/-1}
  .g-hero .hero-actions>.btn-ghost{grid-column:1/-1}
  .g-hero .hero-actions>*{flex:0 0 auto;min-width:0;padding-inline:12px;font-size:11px;letter-spacing:.08em}
  .g-hero .btn-contact--whatsapp{flex:0 0 auto}
  .g-hero .btn-contact svg{width:16px;height:16px}

  .g-answer{padding:18px}
  .g-ledger p{padding:16px 0}
  .g-floor{font-size:10.5px;letter-spacing:.06em}

  /* Floor of the page: full-width CTAs, chips centred in a single column so the
     row never breaks 1 + 2, and the disclaimer measured for reading. */
  .g-final-actions{display:grid;grid-template-columns:1fr;gap:10px}
  .g-final-actions>a{width:100%}
  /* equal-width chips in one centred column — variable widths read as a staircase */
  .g-final-signals{flex-direction:column;align-items:center;gap:8px}
  .g-final-signals span{width:100%;max-width:250px;justify-content:center}
  .g-final-disclaimer{max-width:38ch}
}