/* ================================================================
   OPTIMA LABS — Premium refinement layer
   Presentation-only polish on top of the existing design system.
   Loaded AFTER optima.css on customer-facing pages. Adds nothing
   functional and changes no markup; fully respects reduced motion.
   ================================================================ */
:root{ --ease-out:cubic-bezier(.22,.61,.36,1); }

/* ---- text selection + smooth in-page scroll ---- */
::selection{ background:rgba(192,141,128,.26); color:var(--espresso); }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

/* ---- refined scrollbar (desktop pointers only) ---- */
@media (pointer:fine){
  html{ scrollbar-width:thin; scrollbar-color:rgba(169,106,88,.3) transparent; }
  ::-webkit-scrollbar{ width:12px; height:12px; }
  ::-webkit-scrollbar-thumb{ background:rgba(169,106,88,.26); border-radius:99px; border:3px solid transparent; background-clip:content-box; }
  ::-webkit-scrollbar-thumb:hover{ background:rgba(169,106,88,.46); background-clip:content-box; }
}

/* ---- one elegant focus ring everywhere ---- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
.coa-view:focus-visible, .dose-opt:focus-visible, .pill:focus-visible{
  outline:2px solid var(--clay); outline-offset:3px; border-radius:10px;
}

/* ---- gentle page-enter (opacity only → safe with fixed/sticky UI) ---- */
@keyframes optimaEnter{ from{ opacity:0 } to{ opacity:1 } }
main{ animation:optimaEnter .5s ease both; }

/* ---- buttons: refined motion + a luxe sheen sweep on primary ---- */
.btn{ transition:background .28s ease, transform .26s var(--ease-out), box-shadow .32s var(--ease-out), color .22s ease, filter .24s ease; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn-primary{ position:relative; overflow:hidden; }
.btn-primary:hover{ box-shadow:0 20px 42px -16px rgba(169,106,88,.62); filter:brightness(1.03); }
.btn-primary::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg, transparent 33%, rgba(255,255,255,.24) 50%, transparent 67%);
  transform:translateX(-130%); transition:transform .8s var(--ease-out); }
.btn-primary:hover::after{ transform:translateX(130%); }
.btn-ghost{ transition:background .28s ease, transform .26s var(--ease-out), box-shadow .32s var(--ease-out), border-color .28s ease; }
.btn-ghost:hover{ border-color:rgba(169,106,88,.7); box-shadow:0 14px 30px -18px rgba(58,46,41,.36); }

/* ---- cards: consistent, buttery lift ---- */
.card, .coa-card, .lp-card, .product, .sum-card, .oc-card{
  transition:transform .42s var(--ease-out), box-shadow .42s var(--ease-out), border-color .3s ease;
}
.lp-card:hover{ transform:translateY(-5px); box-shadow:0 36px 70px -34px rgba(58,46,41,.42); border-color:rgba(183,154,107,.42); }

/* ---- inputs: calmer, smoother focus ---- */
input, select, textarea{ transition:border-color .22s ease, box-shadow .22s ease, background .22s ease; }

/* ---- header (storefront): hairline elevation + animated nav underline ---- */
.site-header{ box-shadow:0 1px 0 rgba(183,154,107,.14); }
.site-header .nav-links a{ position:relative; }
.site-header .nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:-7px; height:2px; border-radius:2px;
  background:var(--clay); transform:scaleX(0); transform-origin:left center; transition:transform .32s var(--ease-out); }
.site-header .nav-links a:hover::after, .site-header .nav-links a.active::after{ transform:scaleX(1); }

/* ---- badges: a touch more refinement ---- */
.badge{ letter-spacing:.04em; box-shadow:0 2px 8px -4px rgba(58,46,41,.2); }

/* ---- skeleton loaders (premium shimmer) ---- */
.skeleton, .sk-line{ position:relative; overflow:hidden; background:rgba(183,154,107,.13); border-radius:12px; }
.skeleton::after, .sk-line::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform:translateX(-100%); animation:skShimmer 1.4s ease-in-out infinite; }
@keyframes skShimmer{ to{ transform:translateX(100%); } }
.detail-art.skeleton{ min-height:340px; border-radius:18px; }
.sk-line{ height:16px; margin:14px 0; }
.sk-line.short{ width:38%; height:30px; margin-top:0; }
.sk-line.mid{ width:66%; }
.sk-line.long{ width:100%; }
@media (prefers-reduced-motion:reduce){ .skeleton::after, .sk-line::after{ animation:none; } }

/* ================================================================
   MOBILE — navigation menu + polish
   ================================================================ */
.m-nav-toggle{ display:none; }
.m-nav-overlay{ display:none; }
/* homepage transparent nav → light hamburger; ivory-scrolled → dark ink */
header:not(.site-header) .m-nav-toggle{ color:#F3E7DD; }
header.scrolled:not(.site-header) .m-nav-toggle{ color:var(--espresso); }

@media (max-width:719px){
  .m-nav-toggle{ display:inline-flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
    width:44px; height:44px; margin-left:8px; padding:0; background:none; border:0; cursor:pointer; color:var(--espresso); flex:none; }
  .m-nav-toggle span{ display:block; width:22px; height:2px; border-radius:2px; background:currentColor; transition:transform .3s var(--ease-out), opacity .2s ease; }
  .m-nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .m-nav-toggle.open span:nth-child(2){ opacity:0; }
  .m-nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  /* keep account + cart + toggle right-aligned once the desktop links hide */
  .site-header .nav-auth, header .nav-auth{ margin-left:auto; }

  .m-nav-overlay{ display:block; position:fixed; inset:0; z-index:300;
    background:rgba(30,22,18,.42); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    opacity:0; pointer-events:none; transition:opacity .3s ease; }
  .m-nav-overlay[hidden]{ display:none; }          /* fully out of the way when closed */
  .m-nav-overlay.open{ opacity:1; pointer-events:auto; }  /* only intercepts taps while open */
  .m-nav-panel{ position:absolute; top:0; right:0; height:100%; width:min(86vw,360px); background:var(--porcelain);
    box-shadow:-30px 0 80px -30px rgba(58,46,41,.5); display:flex; flex-direction:column;
    padding:calc(env(safe-area-inset-top) + 24px) 28px calc(env(safe-area-inset-bottom) + 26px);
    transform:translateX(100%); transition:transform .38s var(--ease-out); }
  .m-nav-overlay.open .m-nav-panel{ transform:none; }
  .m-nav-close{ align-self:flex-end; background:none; border:0; font-size:30px; line-height:1; color:var(--ink-soft); width:44px; height:44px; cursor:pointer; }
  .m-nav-close:hover{ color:var(--clay-deep); }
  .m-nav-links{ display:flex; flex-direction:column; gap:2px; margin-top:12px; }
  .m-nav-links a{ font-family:var(--serif); font-size:23px; color:var(--espresso); text-decoration:none; padding:14px 4px;
    border-bottom:1px solid rgba(183,154,107,.18); opacity:0; transform:translateY(10px); }
  .m-nav-overlay.open .m-nav-links a{ animation:mNavIn .45s var(--ease-out) forwards; animation-delay:calc(.08s + var(--i) * .06s); }
  .m-nav-links a.active{ color:var(--clay-deep); }
  .m-nav-cta{ margin-top:auto; width:100%; }
  @keyframes mNavIn{ to{ opacity:1; transform:none; } }
}

/* stop iOS auto-zoom on input focus (needs >=16px) + cleaner taps */
@media (max-width:640px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select{ font-size:16px !important; }
}
@media (hover:none){ a, button, .btn, input, select, textarea{ -webkit-tap-highlight-color:rgba(169,106,88,.14); } }

/* ---- respect reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  main{ animation:none; }
  .btn:hover, .btn:active{ transform:none; }
  .btn-primary::after{ display:none; }
  .lp-card:hover{ transform:none; }
  .site-header .nav-links a::after{ transition:none; }
  .m-nav-overlay, .m-nav-panel, .m-nav-toggle span{ transition:none; }
  .m-nav-overlay.open .m-nav-links a{ animation:none; opacity:1; transform:none; }
}

/* ================================================================
   PREMIUM MOBILE EXPERIENCE  (≤719px — desktop is never touched)
   A dedicated luxury phone layer: calmer rhythm, editorial spacing,
   generous touch targets, full-width CTAs, elevated cards. Every rule
   is scoped to a mobile breakpoint, so the desktop design is byte-for
   -byte identical. Brand tokens, fonts, colours and pill geometry are
   preserved — only scale, spacing and touch ergonomics change.
   ================================================================ */
@media (max-width:719px){

  /* ---- Sticky top bar: glass, soft shadow, softly rounded underside ---- */
  header.site-header{
    border-radius:0 0 22px 22px;
    box-shadow:0 12px 34px -20px rgba(58,46,41,.5);
    -webkit-backdrop-filter:blur(20px) saturate(1.06); backdrop-filter:blur(20px) saturate(1.06);
  }
  header.site-header .nav{ padding:13px 0; }

  /* ---- Buttons: luxury one-thumb ergonomics (pill geometry preserved) ---- */
  .btn{ min-height:54px; padding:16px 26px; font-size:15.5px; }
  .btn-sm{ min-height:48px; }
  .btn-block, .card-cta{ width:100%; }

  /* ---- HERO: editorial stack, full-width CTAs, breathing room ---- */
  .hero-inner{ padding:104px 0 66px; }
  .hero-badge{ letter-spacing:.14em; font-size:11.5px; }
  .hero h1{ margin-top:24px; letter-spacing:-.015em; }
  .hero-sub{ margin-top:20px; font-size:16.5px; line-height:1.7; }
  .hero-ctas{ flex-direction:column; align-items:stretch; gap:12px; margin-top:34px; }
  .hero-ctas .btn{ width:100%; }
  .hero-trust{ gap:11px 22px; margin-top:34px; font-size:13.5px; }

  /* ---- Section headings: a touch more editorial presence ---- */
  .lab-hero p, .lab-coa-head p{ font-size:15.5px; }

  /* ---- PRODUCT COLLECTION: elevated, near-full-width cards ---- */
  .grid{ gap:22px; margin:22px 0 76px; }
  .card{ border-radius:24px; }
  .card:active{ transform:scale(.99); }
  .card-art{ aspect-ratio:5/4; }
  .card-body{ padding:24px 22px 26px; }
  .card-name{ font-size:26px; margin-top:9px; }
  .card-desc{ font-size:14.5px; -webkit-line-clamp:3; margin-top:11px; }
  .card-dose-row{ margin-top:16px; }
  .card-foot{ margin-top:20px; padding-top:18px; }
  .price{ font-size:25px; }
  .card-cta{ margin-top:18px; }
  .result-count{ margin-top:18px; }

  /* ---- PRODUCT DETAIL: image-first, editorial, calm ---- */
  .detail{ padding:26px 0 84px; }
  .detail-grid{ gap:30px; }
  .detail-art{ aspect-ratio:4/5; border-radius:24px; }
  .detail-info h1{ font-size:clamp(30px,8.4vw,42px); }
  .detail-price{ font-size:30px; margin-top:14px; }
  .detail-desc{ font-size:15.5px; margin-top:16px; }
  .detail-actions .btn{ width:100%; }

  /* ---- CALCULATOR: guided flow, large controls, zero horizontal scroll ---- */
  .calc-panel{ padding:26px 20px; border-radius:26px; margin-top:30px; }
  .calc-cols{ gap:30px; }
  .calc-group h3{ font-size:18px; }
  .calc-field input{ min-height:58px; font-size:16px; padding:24px 46px 10px 18px; border-radius:16px; }
  .calc-field label{ top:19px; font-size:16px; }
  .pill{ min-height:48px; font-size:15px; padding:12px 18px; }
  .calc-summary{ gap:14px; }
  .sum-card{ padding:20px 22px; border-radius:20px; }
  .sum-val{ font-size:30px; }
  /* Syringe diagram scales to fit the viewport — never forces a scroll */
  .syringe-wrap{ padding:20px 14px; overflow-x:visible; }
  .syringe-wrap svg{ min-width:0; }
  .calc-actions, .calc .btn-primary{ width:100%; }

  /* ---- LAB VERIFICATION: vertical, stacked, readable ---- */
  .lab-hero .btn{ width:100%; max-width:340px; }
  .lab-item .lt-h{ font-size:23px; }
  .coa-card{ padding:18px; border-radius:20px; }
  .coa-view{ width:100%; min-height:48px; }
  .lab-cta .btn{ width:100%; }
  /* COA PDF viewer opens tall & comfortable on phones */
  .coa-modal{ max-height:94vh; border-radius:22px; }
  .coa-mpreview iframe{ height:64vh; }
  .coa-mactions .btn{ flex:1 1 100%; }

  /* ---- SHOPPING CART: each item a luxury card, sticky checkout foot ---- */
  .drawer{ width:100%; }
  .drawer-head{ padding:20px; }
  .drawer-body{ padding:16px 16px 8px; }
  .cart-item{
    padding:16px; margin-bottom:14px; border:1px solid rgba(183,154,107,.2);
    border-radius:20px; background:var(--surface); box-shadow:0 14px 34px -24px rgba(58,46,41,.4);
  }
  .cart-item:last-child{ margin-bottom:0; }
  .cart-item-img{ width:78px; height:78px; border-radius:16px; }
  .cart-item-name{ font-size:16px; }
  .cart-item-controls{ margin-top:12px; gap:10px; }
  .cart-item-controls button{ width:36px; height:36px; border-radius:11px; font-size:17px; }
  .drawer-foot{ padding:18px 16px calc(18px + env(safe-area-inset-bottom)); }
  .drawer-foot .btn{ width:100%; min-height:54px; }
  .drawer-total b{ font-size:23px; }

  /* ---- CHECKOUT: Apple-calm step flow, large fields & targets ---- */
  .co-head{ padding:22px 20px; }
  .co-body{ padding:24px 20px 28px; }
  .co-field label{ font-size:13.5px; }
  .co-field input, .co-field textarea{ min-height:54px; font-size:16px; padding:15px 16px; border-radius:14px; }
  .co-dcard{ padding:18px; }
  .co-dcard .co-dtitle{ font-size:15.5px; }
  .co-btn{ min-height:56px; font-size:17px; }
  .co-google{ min-height:54px; width:100%; justify-content:center; }
  .oc-mi{ flex:1 1 46%; }
}

/* ---- Product grid: true 2×2 layout on phones (≤600px) ----
   The ≤719 block above tunes cards for a near-full-width single column;
   this override shrinks every card element proportionally so two sit
   comfortably side by side, without changing the design language. */
@media (max-width:600px){
  .grid{ gap:12px; margin:16px 0 56px; }
  .card{ border-radius:18px; }
  .card-art{ aspect-ratio:1/1; }
  .card-badges{ top:8px; left:8px; gap:5px; }
  .badge{ padding:3px 7px; font-size:9px; }
  .card-body{ padding:13px 13px 15px; }
  .card-cat{ font-size:9.5px; letter-spacing:.07em; }
  .card-name{ font-size:15px; margin-top:4px; line-height:1.25; }
  .card-desc{ font-size:11.5px; margin-top:5px; -webkit-line-clamp:2; }
  .card-dose-row{ margin-top:8px; gap:4px; }
  .dose-tag{ font-size:9px; padding:3px 7px; }
  .card-foot{ margin-top:10px; padding-top:10px; }
  .price{ font-size:16px; }
  .price .from{ font-size:9.5px; }
  .card-cta{ margin-top:10px; min-height:38px; padding:9px 10px; font-size:12px; }
}

/* ---- Finer phones (≤430px): calmest single-column rhythm ---- */
@media (max-width:430px){
  .wrap{ width:min(1160px, calc(100% - 34px)); }
  .calc-summary{ grid-template-columns:1fr; }
  .lab-trust-grid{ grid-template-columns:1fr 1fr; gap:22px 12px; }
  .hero h1{ font-size:clamp(31px,8.6vw,40px); }
  .oc-mi{ flex:1 1 100%; max-width:none; }
}

/* ---- Reduced-motion: keep the premium layer calm ---- */
@media (max-width:719px) and (prefers-reduced-motion:reduce){
  .card:active{ transform:none; }
}

/* ================================================================
   LUXURY INTERACTION LAYER  (paired with js/lux.js)
   Presentation-only. States are only active once js/lux.js has added
   the classes, so with JS off nothing is ever hidden. transform+opacity
   only; fully disabled under prefers-reduced-motion.
   ================================================================ */

/* crisper text rendering site-wide (no type redesign) */
html.lux body{ text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* --- scroll reveals: soft fade + gentle rise, once on enter --- */
.lux-reveal{
  opacity:0; transform:translate3d(0,18px,0);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  will-change:opacity, transform;
}
.lux-reveal.lux-in{ opacity:1; transform:none; }

/* --- images: quiet fade-in over the placeholder tint --- */
.lux-img{ opacity:0; }
.lux-img.lux-loaded{ opacity:1; transition:opacity .6s ease; }

/* --- page transition: brief fade so navigations never white-flash --- */
html.lux-leaving body{ opacity:0; transition:opacity .17s ease; }

/* --- refined micro-interactions (no redesign, just smoother) --- */
/* product image breathes on card hover (catalog cards) */
.card .card-art{ overflow:hidden; }
.card .card-art img{ transition:transform .6s cubic-bezier(.22,1,.36,1); backface-visibility:hidden; }
.card:hover .card-art img{ transform:scale(1.045); }
/* homepage feature card art gets the same quiet zoom */
.product .product-art img{ transition:transform .6s cubic-bezier(.22,1,.36,1); }
.product:hover .product-art img{ transform:scale(1.04); }
/* inputs: calmer, premium focus transition */
input, select, textarea{ transition:border-color .25s ease, box-shadow .28s ease, background .25s ease; }

@media (prefers-reduced-motion:reduce){
  html.lux body{ text-rendering:auto; }
  .lux-reveal{ opacity:1 !important; transform:none !important; transition:none; }
  .lux-img{ opacity:1 !important; transition:none; }
  html.lux-leaving body{ opacity:1 !important; transition:none; }
  .card .card-art img, .product .product-art img{ transition:none; }
  .card:hover .card-art img, .product:hover .product-art img{ transform:none; }
}