/* TressVita immersive layer: full-screen homepage film, one modern sans
   typeface, a lean navigation bar, a trust strip, value tiles and a
   "Text us" button. Loaded after tressvita-editorial.css. */
:root{--display:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;--ink-deep:#0b110f;--accent:#e07b3c;--accent-ink:#b6582c;--accent-soft:#fbeee4}

/* ---------- type: one modern sans ---------- */
h1,h2,h3,.serif,.sec-head :is(h1,h2),.offer-layout h2,.documentation-layout h2,.process-step h3,.documentation-notes h3{font-family:var(--sans);font-weight:700;letter-spacing:-.03em}
h1 em,h2 em,h3 em,.sec-head :is(h1,h2) em{font-style:normal;color:var(--accent-ink)}
.sec-head :is(h1,h2){font-size:clamp(2rem,3.4vw,3.2rem);line-height:1.06}
.offer-layout h2,.documentation-layout h2{font-size:clamp(2rem,3.4vw,3.1rem);line-height:1.06}
.process-step h3,.documentation-notes h3{font-size:1.15rem;letter-spacing:-.015em}
.pcard-name,.product-info-name,.product-info-modal .modal-title{font-family:var(--sans);font-weight:700;letter-spacing:-.02em}
.tv-brand .wordmark{font-family:'Cormorant Garamond',Georgia,serif}
.section-kicker{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.7rem;letter-spacing:.16em}
.btn-tv,.btn-ghost{border-radius:999px;text-transform:none;letter-spacing:0;font-weight:600}

/* ---------- trust strip ---------- */
.rio-band.trust-marquee{position:relative;overflow:hidden;padding:0;background:var(--ink-deep);border:0;color:#cdd5d0;text-align:left}
.marquee-track{display:flex;width:max-content;animation:tvMarquee 48s linear infinite}
.marquee-set{display:flex}
.marquee-set span{padding:9px 26px;font:600 .66rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;border-right:1px solid rgba(255,255,255,.12)}
.marquee-set strong{color:#f0a066;font-weight:700}
@keyframes tvMarquee{to{transform:translateX(-50%)}}

/* ---------- navigation ---------- */
.tv-nav{transition:background .3s,border-color .3s,box-shadow .3s}
.tv-nav .nav-link{font-size:.9rem!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important}
.tv-icons{gap:6px}
.tv-icons .inquiry-trigger{background:transparent;border:0;color:inherit;padding:10px!important;border-radius:999px}
.tv-icons .inquiry-trigger:hover{background:rgba(23,60,48,.08);color:inherit}
.tv-icons .inquiry-trigger .trigger-label{display:none}
#inquiryToggle:has(#inquiryBadge[hidden]){display:none!important}
.nav-signin{align-items:center;gap:8px;text-decoration:none;font-size:.9rem;font-weight:500;color:inherit}
.nav-signin .trigger-label{display:inline}
.nav-shop{align-items:center;min-height:42px;padding:9px 20px;border-radius:999px;background:var(--forest);color:#fff;font-size:.88rem;font-weight:600;text-decoration:none;margin-left:6px}
.nav-shop:hover{background:#295441;color:#fff}
.nav-menu{display:inline-flex;flex-direction:column;justify-content:center;gap:6px;width:44px;color:inherit}
.nav-menu span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s}
body.menu-open .nav-menu span:first-child{transform:translateY(4px) rotate(45deg)}
body.menu-open .nav-menu span:last-child{transform:translateY(-4px) rotate(-45deg)}
/* Clear over the homepage film until you scroll past it. */
body.nav-over-hero .tv-nav:not(.nav-solid){background:linear-gradient(180deg,rgba(5,8,7,.6),rgba(5,8,7,0))!important;border-color:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none;backdrop-filter:none}
body.nav-over-hero .tv-nav:not(.nav-solid) .wordmark,body.nav-over-hero .tv-nav:not(.nav-solid) .nav-link,body.nav-over-hero .tv-nav:not(.nav-solid) .tv-icon,body.nav-over-hero .tv-nav:not(.nav-solid) .nav-signin{color:#fff!important}
body.nav-over-hero .tv-nav:not(.nav-solid) .nav-link.active::after{background:#fff}
body.nav-over-hero .tv-nav:not(.nav-solid) .tv-brand .mark path:last-of-type{fill:#0b110f}
body.nav-over-hero .tv-nav:not(.nav-solid) .nav-shop{background:#fff;color:var(--ink-deep)}
body.nav-over-hero .tv-nav:not(.nav-solid) .inquiry-badge{box-shadow:none}
.tv-nav.nav-solid{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* ---------- phone menu: full-screen panel ---------- */
@media(max-width:991.98px){
  .mobile-nav{position:fixed!important;inset:0;top:0!important;z-index:1029;display:block;padding:calc(var(--nav-h,72px) + 44px) 0 32px;background:var(--ink-deep)!important;border:0;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .25s,transform .25s,visibility 0s .25s}
  body.menu-open{overflow:hidden}
  body.menu-open .mobile-nav{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .25s}
  .mobile-nav .inner{display:flex;flex-direction:column;gap:2px;padding:0 24px}
  .mobile-nav a{display:block;min-height:0;padding:14px 0!important;color:#fff!important;font-size:1.6rem!important;font-weight:600;letter-spacing:-.02em!important;border-bottom:1px solid rgba(255,255,255,.1);box-shadow:none!important}
  .mobile-nav a.active{color:#f0a066!important}
  body.menu-open .tv-nav{background:var(--ink-deep)!important;border-color:transparent!important}
  body.menu-open .tv-nav .wordmark,body.menu-open .tv-nav .tv-icon{color:#fff!important}
}

/* ---------- hero: full-screen film ---------- */
.hero.hero-immersive{position:relative;display:flex;align-items:flex-end;margin-top:calc(-1 * var(--nav-h,80px));height:calc(100svh - 34px);min-height:560px;max-height:1080px;background:#050807;color:#fff;overflow:hidden;isolation:isolate}
.hero-immersive .hero-film-backdrop{position:absolute;inset:0;aspect-ratio:auto;background:#050807}
.hero-immersive .hero-film-video{object-fit:cover}
.hero-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(5,8,7,.9) 0%,rgba(5,8,7,.6) 38%,rgba(5,8,7,.08) 72%),linear-gradient(0deg,rgba(5,8,7,.7) 0%,rgba(5,8,7,0) 40%)}
.hero-copy{position:relative;z-index:2;padding-top:calc(var(--nav-h,80px) + 24px);padding-bottom:clamp(64px,11vh,120px)}
.hero-eyebrow{margin:0 0 18px;font:600 .72rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;text-transform:uppercase;color:#f0a066}
.hero-copy h1{margin:0 0 20px;max-width:14ch;font-size:clamp(2.7rem,6.2vw,5.6rem);font-weight:700;line-height:1;letter-spacing:-.045em;color:#fff}
.hero-copy h1 em{color:#f0a066}
.hero-sub{max-width:50ch;margin:0 0 30px;color:rgba(255,255,255,.8);font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.6}
.hero-copy .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.hero-copy .btn-tv{background:#fff;background-image:none;color:var(--ink-deep);box-shadow:none}
.hero-copy .btn-tv:hover{background:#f0a066;color:var(--ink-deep)}
.hero-copy .hero-ghost{color:#fff!important;border-color:rgba(255,255,255,.45)!important;background:rgba(255,255,255,.04);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero-copy .hero-ghost:hover{background:rgba(255,255,255,.14)}
.hero-immersive .hero-film-toggle{z-index:3;background:rgba(5,8,7,.55);border-color:rgba(255,255,255,.25)}
@media(max-width:700px){
  .hero.hero-immersive{height:calc(100svh - 30px);min-height:600px}
  .hero-shade{background:linear-gradient(0deg,rgba(5,8,7,.95) 0%,rgba(5,8,7,.75) 34%,rgba(5,8,7,.1) 62%)}
  .hero-copy{padding-bottom:40px}
  .hero-copy h1{font-size:clamp(2.3rem,11vw,3.2rem)}
  .hero-sub{font-size:.98rem;margin-bottom:24px}
  .hero-copy .hero-actions{flex-direction:column}
  .hero-copy .hero-actions a{width:100%}
}

/* Laboratory turntable: full framing on desktop, an edge-to-edge background
   on smaller screens. The gradient keeps the copy readable over the film. */
.hero.hero-lab{height:auto;min-height:0;max-height:none;aspect-ratio:16/9}
.hero-lab .hero-film-video{object-fit:contain}
@media(max-width:991.98px){
  .hero.hero-lab{display:flex;aspect-ratio:auto;height:calc(100svh - 32px);min-height:700px;max-height:1000px;padding:0}
  .hero-lab .hero-film-backdrop{position:absolute;inset:0;aspect-ratio:auto}
  .hero-lab .hero-film-video{object-fit:cover;object-position:68% center}
  .hero-lab .hero-shade{display:block;background:linear-gradient(180deg,rgba(5,8,7,.45) 0%,rgba(5,8,7,.08) 24%,rgba(5,8,7,.35) 43%,rgba(5,8,7,.82) 67%,rgba(5,8,7,.96) 100%)}
  .hero-lab .hero-copy{padding-top:calc(var(--nav-h,80px) + 180px);padding-bottom:32px}
  .hero-lab .hero-copy h1{font-size:clamp(2.2rem,5.2vw,3.2rem)}
  .hero-lab .hero-sub{max-width:54ch}
  .hero-lab .hero-film-toggle{top:calc(var(--nav-h,80px) + 12px);right:20px;bottom:auto;border-radius:999px}
}
@media(max-width:700px){
  .hero-lab .hero-film-video{object-position:center}
  .hero-lab .hero-copy h1{font-size:clamp(2rem,8.8vw,3.2rem);line-height:1.06;margin-bottom:16px}
  .hero-lab .hero-sub{max-width:36ch;margin-bottom:20px}
  .hero-lab .hero-copy .hero-actions{gap:10px}
}

/* ---------- call strip under the hero ---------- */
.office-strip{background:var(--ink-deep);border-top:1px solid rgba(255,255,255,.08)}
.office-strip-inner{align-items:baseline}
.office-strip-line{flex-wrap:nowrap;align-items:baseline}
.office-strip-label,.office-strip-line span,.office-strip a{line-height:1.25}
.office-strip-label,.office-strip-line span{color:#f0a066}
@media(max-width:799px){
  .office-strip-inner{display:grid;grid-template-columns:max-content max-content;justify-content:center;column-gap:12px;row-gap:0;padding:18px 20px}
  .office-strip-label{grid-column:1/-1;justify-self:center;margin-bottom:8px}
  .office-strip-line{display:contents}
  .office-strip-line span{white-space:nowrap}
  .office-strip a{min-height:44px;padding-block:12px}
}

/* ---------- value tiles ---------- */
.value-tiles{padding:clamp(48px,6vw,84px) 0;background:var(--paper)}
.vt-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.vt{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px}
.vt-icon{display:grid;place-items:center;width:44px;height:44px;margin-bottom:16px;border-radius:12px;background:var(--accent-soft);color:var(--accent-ink);font-size:1.05rem}
.vt h3{margin:0 0 6px;font-size:1.05rem;color:var(--forest);letter-spacing:-.015em}
.vt p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55}
.vt a{color:var(--forest);font-weight:600;white-space:nowrap}
@media(max-width:991px){.vt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.vt-grid{grid-template-columns:1fr;gap:10px}.vt{display:grid;grid-template-columns:44px 1fr;column-gap:14px;padding:18px}.vt-icon{grid-row:span 2;margin:0}}

/* ---------- product cards: image, name, price, one button ---------- */
.pcard{border-radius:16px;overflow:hidden}
.pcard-unii{display:none}
.pcard-lead{font-weight:600;letter-spacing:0;text-transform:none}

/* ---------- entry notice: compact, film visible behind ---------- */
.consent-gate{background:rgba(5,8,7,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.consent-card{width:min(100%,470px);border-radius:20px}
.consent-card h1,.consent-card .consent-title{font-family:var(--sans);font-size:clamp(1.6rem,4vw,2rem);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.consent-copy{margin-bottom:12px}
.consent-more{margin:0 0 8px;font-size:.84rem}
.consent-more summary{cursor:pointer;color:var(--forest);font-weight:600;padding:4px 0 10px}
.consent-more .consent-notice{margin:0 0 10px;font-size:.8rem}
.consent-action{border-radius:999px}

/* ---------- Text us ---------- */
.text-bubble{position:fixed;right:18px;bottom:18px;z-index:1040;display:inline-flex;align-items:center;gap:9px;padding:12px 18px;border-radius:999px;background:var(--ink-deep);color:#fff;font-weight:600;font-size:.9rem;text-decoration:none;box-shadow:0 12px 30px rgba(0,0,0,.28)}
.text-bubble:hover{background:#1c2a24;color:#fff}
.text-bubble i{color:#f0a066;font-size:1.05rem}
body.consent-open .text-bubble,body.menu-open .text-bubble{display:none}
@media(max-width:575px){.text-bubble{width:54px;height:54px;padding:0;justify-content:center;right:14px;bottom:14px}.text-bubble span{display:none}.text-bubble i{font-size:1.25rem}}

@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* Keep the menu bar pinned while scrolling: overflow-x:hidden on html/body
   turned them into scroll containers, which silently disabled position:sticky. */
@supports (overflow:clip){html,body{overflow-x:clip!important;overflow-y:visible!important}}
.hero-immersive .hero-copy{padding-inline:clamp(20px,4.2vw,64px)}
/* On phones the Text us button waits until you scroll past the hero buttons. */
/* The Text us button waits until you scroll past the hero, so it never covers the hero buttons or the call strip. */
.text-bubble{transition:opacity .25s,transform .25s}
body.hero-in-view .text-bubble{opacity:0;pointer-events:none;transform:translateY(12px)}
@media(max-width:700px){.hero-eyebrow{display:none}.hero-shade{background:linear-gradient(0deg,rgba(5,8,7,.96) 0%,rgba(5,8,7,.85) 40%,rgba(5,8,7,.15) 66%)}}

/* Cart: subtotal, shipping and total lines */
.cart-line{display:flex;justify-content:space-between;font-size:.88rem;color:var(--muted);margin:0 0 4px}
.cart-line .ship-free{color:#137333;font-weight:700}
.cart-member-note a{font-weight:600}

/* Member perk (free 3-day shipping) shown to guests on every card */
.pcard-member{font-size:.78rem;color:var(--muted);margin:2px 0 4px}
.pcard-member span{color:var(--accent-ink);font-weight:700}
/* Guest free-shipping meter in the cart */
.ship-meter{font-size:.8rem;color:var(--muted);margin:2px 0 10px}
.ship-meter strong{color:var(--forest)}
.ship-bar{display:block;height:5px;margin-top:6px;border-radius:999px;background:rgba(27,65,52,.12);overflow:hidden}
.ship-bar span{display:block;height:100%;border-radius:999px;background:var(--accent);transition:width .3s}
.consent-card .consent-title{margin:0 0 14px;color:#173c30}

/* Cart drawer on phones and short screens: the totals and Checkout used to
   be pinned under a tiny item list, which squeezed the products and cut off
   Checkout once the phone-code field opened. Here the whole drawer scrolls
   as one page instead; the header stays at the top. dvh keeps the bottom
   above Safari's toolbar. */
@media (max-width:700px),(max-height:820px){
  .drawer{height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .drawer-h{position:sticky;top:0;z-index:2;background:inherit;flex-wrap:wrap}
  .drawer-b{flex:0 0 auto;overflow:visible}
  .drawer-f{flex:0 0 auto;margin-top:auto;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
}

/* Checkout bar under "Your cart" (shown on phones and short screens only) */
.cart-topbar{display:none;flex:0 0 100%;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.cart-topbar span{font-size:.9rem;color:var(--muted)}
.cart-topbar strong{color:var(--forest,#193d32);font-size:1.05rem;margin-left:4px}
.cart-topbar .btn-tv{padding:10px 26px;min-height:44px}
@media (max-width:700px),(max-height:820px){.cart-topbar{display:flex}}
.cart-topbar[hidden]{display:none!important}
.cart-step-flash{animation:cartStepFlash 1.6s ease-out}
@keyframes cartStepFlash{0%,40%{box-shadow:0 0 0 3px rgba(226,121,52,.55);border-radius:8px}100%{box-shadow:0 0 0 3px rgba(226,121,52,0);border-radius:8px}}
@media (prefers-reduced-motion:reduce){.cart-step-flash{animation:none;outline:3px solid rgba(226,121,52,.55);outline-offset:3px}}

/* Storefront routes: each address shows its own sections from the first paint
   (body[data-page] is set by the edge function or the first script in <body>),
   instead of drawing the homepage and then switching. */
body[data-page="home"] main [data-page]:not([data-page~="home"]){display:none!important}
body[data-page="catalog"] main [data-page]:not([data-page~="catalog"]){display:none!important}
body[data-page="peptides"] main [data-page]:not([data-page~="peptides"]){display:none!important}
body[data-page="handling"] main [data-page]:not([data-page~="handling"]){display:none!important}
body[data-page="testing"] main [data-page]:not([data-page~="testing"]){display:none!important}
body[data-page="contact"] main [data-page]:not([data-page~="contact"]){display:none!important}
body[data-page="process"] main [data-page]:not([data-page~="process"]){display:none!important}
.hero-title{margin:0}

/* Contrast (WCAG AA 4.5:1) */
.sec-sub{color:#56635c}
.sec-alt{--muted:#56635c}
#testing{--gold:#a64f26}
.section-kicker{color:#a64f26}
.first-order-offer .text-link{color:#f6efe1;border-color:rgba(246,239,225,.45)}
.first-order-offer .text-link:hover{color:#f2a676;border-color:#f2a676}

/* Links from catalog cards and the product popup to /products/<slug> */
.pcard-page{display:block;text-align:center;font-size:.8rem;font-weight:600;color:#2a664f;text-decoration:none;padding:9px 12px 11px;border-top:1px solid rgba(27,65,52,.1)}
.pcard-page:hover{color:#173c30;text-decoration:underline}
.pcard-page i{font-size:.7rem;margin-left:4px}
.product-page-link{margin:0 0 14px}
.product-page-link a{font-weight:700;color:#173c30}
