/* ============================================================ PHREE SKIN — /serum PDP (light system) AG1-modeled: sticky gallery (left) + load-bearing buy module (right), then de-risking sections. Sky-blue reserved for price. No teal/green. Reuses shared primitives (.hcard .quote .science .stars .chip .btn). ============================================================ */ /* ---------- shared section helpers reused from home ---------- */ .how__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; } .hcard{ padding:2rem 1.7rem; border-top:2px solid var(--sky); background:var(--paper); border-radius:0 0 var(--r-card) var(--r-card); box-shadow:var(--sh-sm); } .section--alt .hcard{ background:var(--paper); } .hcard__n{ font-size:.8rem; color:var(--sky-deep); font-weight:var(--fw-med); letter-spacing:.1em; } .hcard h3{ font-size:var(--t-h3); margin:.6rem 0 .5rem; font-weight:var(--fw-med); } .hcard p{ color:var(--ink-2); } .proof__quotes{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.3rem; } .quote{ padding:1.7rem; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--sh-sm); display:flex; flex-direction:column; gap:.7rem; } .quote__stars{ color:var(--sky-deep); letter-spacing:.1em; font-size:.9rem; } .quote blockquote{ font-size:1rem; line-height:1.5; color:var(--ink); flex:1; } .quote figcaption{ font-size:.78rem; color:var(--muted); } .quote__ver{ color:var(--sky-deep); font-weight:var(--fw-med); } .stars{ display:flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--ink-2); } .stars span{ color:var(--sky-deep); letter-spacing:.1em; } /* first section clears the fixed nav */ .pdp{ padding-top:clamp(1.4rem,3.5vw,2.6rem); padding-bottom:var(--sp-section); background:var(--paper); } .pdp__wrap{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(2rem,4.5vw,5rem); align-items:start; } /* ============================================================ LEFT — sticky auto-slideshow (single large image, no thumb strip) ============================================================ */ .gallery{ position:sticky; top:clamp(5.5rem,8vw,7rem); display:flex; flex-direction:column; gap:1rem; } /* cap the stage so the sticky image ALWAYS fits the viewport (no bottom clip) */ .gallery__stage{ position:relative; border-radius:var(--r-2xl); overflow:hidden; aspect-ratio:4/5; max-height:calc(100svh - clamp(7rem,10vw,8.5rem)); background:var(--stone); box-shadow:var(--sh-lg); } /* AG1-style coloured prev/next chevrons */ .gnav{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; background:rgba(255,255,255,.82); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.7); color:var(--sky-deep); box-shadow:0 8px 20px -10px rgba(20,40,55,.45); opacity:0; transition:background .3s, color .3s, opacity .3s var(--e-out); } .gallery__stage:hover .gnav{ opacity:1; } .gnav:hover{ background:#fff; color:var(--charcoal); } .gnav svg{ width:20px; height:20px; } .gnav--prev{ left:.85rem; } .gnav--next{ right:.85rem; } @media (hover:none){ .gnav{ opacity:1; background:rgba(255,255,255,.74); } } /* cross-fade: all slides stacked, only .is-active shows */ .gallery__stage .slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.03); transition:opacity .9s var(--e-seed), transform 5s linear; pointer-events:none; } .gallery__stage .slide.is-active{ opacity:1; transform:scale(1); } .gallery__badge{ position:absolute; top:1rem; left:1rem; z-index:3; } /* dot indicators — brand dots (not a strip of thumbnails) */ .gallery__dots{ position:absolute; left:0; right:0; bottom:1rem; z-index:3; display:flex; justify-content:center; gap:.55rem; } .gallery__dots .gdot{ width:8px; height:8px; padding:0; border:none; border-radius:50%; cursor:pointer; background:rgba(255,255,255,.55); box-shadow:0 1px 3px rgba(20,40,55,.35); transition:width .4s var(--e-out), background .3s; } .gallery__dots .gdot:hover{ background:rgba(255,255,255,.85); } .gallery__dots .gdot.is-active{ width:22px; border-radius:var(--r-pill); background:#fff; } .gallery__assure{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; margin-top:.3rem; font-size:.78rem; color:var(--ink-2); } .gallery__assure li{ position:relative; padding-left:1.25rem; } .gallery__assure li::before{ content:"✓"; position:absolute; left:0; color:var(--sky-deep); font-weight:var(--fw-bold); } /* ============================================================ RIGHT — buy module (load-bearing) — the buy decision sits at the TOP ============================================================ */ .buybox{ display:flex; flex-direction:column; } .buybox__flag{ align-self:flex-start; margin-bottom:.6rem; } /* AG1 PDP H1 is compact (32px) — the price + selector must clear the fold, so the name is set at a considered heading scale, not the hero display size. */ .buybox__title{ font-size:clamp(1.7rem,1.3rem + 1.6vw,2.3rem); line-height:1.02; color:var(--ink); margin-bottom:.45rem; } .buybox__stars{ margin-bottom:.7rem; } .buybox__sub{ font-size:1.02rem; line-height:1.45; color:var(--ink-2); max-width:44ch; margin-bottom:1.25rem; } /* the pinned-high buy decision (price → plan → CTA) as one considered block */ .buybox__buy{ display:flex; flex-direction:column; } .buybox__priceline{ display:flex; align-items:baseline; flex-wrap:wrap; gap:.7rem; } .buybox__price{ font-size:clamp(2rem,1.5rem + 1.8vw,2.7rem); line-height:1; } .buybox__priceline .strike{ font-size:1.15rem; } .buybox__save{ align-self:center; } .buybox__perday{ font-size:.85rem; color:var(--muted); margin:.45rem 0 1.15rem; } /* free-gift banner — now BELOW the CTA (still charcoal, still on-brand) */ .buybox__disc{ display:flex; align-items:center; gap:.55em; background:var(--charcoal); color:#fff; font-size:.82rem; line-height:1.4; padding:.75em 1em; border-radius:var(--r-sm); margin:2rem 0 1.4rem; } /* purchase-type radiogroup */ .opts{ display:flex; flex-direction:column; gap:.8rem; } .opt{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:1rem; border:1.5px solid var(--line-2); border-radius:var(--r-card); padding:1.05rem 1.15rem; background:var(--paper); cursor:pointer; transition:border-color .3s var(--e-out), box-shadow .3s var(--e-out), background .3s; } .opt input{ position:absolute; opacity:0; pointer-events:none; } .opt:hover{ border-color:var(--sky-light); } .opt.is-selected{ border-color:var(--sky); box-shadow:0 0 0 1.5px var(--sky) inset; background:var(--sky-soft); } .opt__tag{ position:absolute; top:-.62rem; left:1.1rem; font-size:.62rem; text-transform:uppercase; letter-spacing:.12em; background:var(--sky); color:#0b2531; padding:.28em .7em; border-radius:var(--r-pill); font-weight:var(--fw-med); } .opt__main{ display:flex; align-items:center; gap:.85rem; min-width:0; } .opt__radio{ width:20px; height:20px; border-radius:50%; border:2px solid var(--line-2); flex:none; position:relative; transition:border-color .3s; } .opt.is-selected .opt__radio{ border-color:var(--sky-deep); } .opt.is-selected .opt__radio::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--sky-deep); } .opt__text{ display:flex; flex-direction:column; gap:.15rem; min-width:0; } .opt__text b{ font-weight:var(--fw-med); font-size:1rem; } .opt__text small{ font-size:.78rem; color:var(--muted); line-height:1.35; } .opt__price{ display:flex; flex-direction:column; align-items:flex-end; gap:.1rem; flex:none; } .opt__price .price{ font-size:1.15rem; } .opt__price .strike{ font-size:.82rem; } .opts__nudge{ display:flex; gap:.5em; align-items:flex-start; font-size:.82rem; color:var(--ink-2); background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:.75em 1em; margin:.9rem 0 1.1rem; } /* quantity */ .qtyrow{ display:flex; align-items:center; flex-wrap:wrap; gap:.7rem 1rem; margin-bottom:1.1rem; } .qtyrow__lbl{ font-weight:var(--fw-med); font-size:.9rem; } .qtystep{ display:inline-flex; align-items:center; border:1px solid var(--line-2); border-radius:var(--r-pill); overflow:hidden; } .qtystep button{ width:2.4rem; height:2.4rem; background:var(--paper); border:none; cursor:pointer; font-size:1.15rem; color:var(--ink); line-height:1; transition:background .25s; } .qtystep button:hover{ background:var(--paper-2); } .qtystep span{ min-width:2rem; text-align:center; font-variant-numeric:tabular-nums; font-weight:var(--fw-med); } .qtyrow__hint{ font-size:.78rem; color:var(--muted); flex:1; min-width:12ch; } /* what you get */ .getlist{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:.55rem 1.2rem; margin-bottom:1.6rem; font-size:.85rem; color:var(--ink-2); } .getlist li{ position:relative; padding-left:1.4rem; line-height:1.35; } .getlist li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--sky-deep); font-weight:var(--fw-bold); } /* primary CTA */ .buybox__cta{ font-size:1.02rem; margin-top:.3rem; } .buybox__reassure{ display:flex; align-items:center; justify-content:center; gap:.45em; font-size:.8rem; color:var(--muted); margin:.9rem 0 0; } .paytrust{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; } .paytrust li{ font-size:.68rem; letter-spacing:.02em; color:var(--muted); border:1px solid var(--line); border-radius:var(--r-xs); padding:.35em .6em; background:var(--paper-2); } /* benefit trio — stacked in the right column so the sticky image travels beside it (AG1) */ .buybox__benefits{ margin-top:clamp(2.5rem,4vw,3.5rem); padding-top:clamp(2rem,3vw,2.6rem); border-top:1px solid var(--line); } .buybox__benefits .eyebrow{ margin-bottom:.9rem; } .buybox__benefits-h{ font-size:var(--t-h3); font-weight:var(--fw-reg); letter-spacing:var(--track-tight); max-width:22ch; margin-bottom:1.4rem; text-wrap:balance; } .buybox__benefits-grid{ display:flex; flex-direction:column; gap:1rem; } .buybox__benefits-grid .hcard{ padding:1.4rem 1.5rem; } /* ============================================================ INGREDIENT TRANSPARENCY — expandable rows ============================================================ */ .ing__wrap{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,4vw,4rem); align-items:start; } .ing__head{ display:flex; flex-direction:column; gap:1rem; position:sticky; top:clamp(6rem,8vw,7.5rem); } .ing__title{ font-size:var(--t-h2); font-weight:var(--fw-reg); letter-spacing:var(--track-tight); max-width:16ch; } .ing__lead{ color:var(--ink-2); max-width:40ch; } .ing__list{ display:flex; flex-direction:column; } .ingrow{ border-bottom:1px solid var(--line); } .ingrow:first-child{ border-top:1px solid var(--line); } .ingrow summary{ display:flex; align-items:center; gap:1rem; padding:1.3rem .2rem; cursor:pointer; list-style:none; } .ingrow summary::-webkit-details-marker{ display:none; } .ingrow__mark{ width:26px; height:20px; color:var(--sky); flex:none; } .ingrow__name{ font-weight:var(--fw-med); font-size:1.08rem; } .ingrow__role{ margin-left:auto; font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); text-align:right; } .ingrow__pl{ position:relative; width:16px; height:16px; flex:none; } .ingrow__pl::before,.ingrow__pl::after{ content:""; position:absolute; background:var(--sky-deep); border-radius:2px; transition:transform .35s var(--e-out), opacity .35s; } .ingrow__pl::before{ top:7px; left:0; width:16px; height:2px; } .ingrow__pl::after{ left:7px; top:0; width:2px; height:16px; } .ingrow[open] .ingrow__pl::after{ transform:rotate(90deg); opacity:0; } .ingrow p{ padding:0 0 1.4rem calc(26px + 1rem); color:var(--ink-2); font-size:.95rem; max-width:56ch; } /* ============================================================ SCIENCE (lab-window) — mirrors home .science ============================================================ */ .science{ position:relative; min-height:78svh; display:flex; align-items:center; overflow:hidden; background:var(--charcoal); } .science__media{ position:absolute; inset:0; z-index:0; } .science__video{ width:100%; height:100%; object-fit:cover; object-position:center 40%; } .science__tint{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(14,29,41,.66), rgba(14,29,41,.24) 66%), linear-gradient(0deg, rgba(10,14,18,.5), transparent 55%); } @media (max-width:680px){ .science__tint{ background:linear-gradient(180deg, rgba(10,17,24,.5), rgba(10,17,24,.3) 32%, rgba(10,17,24,.68)); } } .science__in{ position:relative; z-index:2; width:100%; } .science__card{ max-width:min(560px,100%); padding:clamp(1.8rem,4vw,3rem); } .science__card h2{ font-size:var(--t-h2); color:#fff; margin:1.1rem 0 1.1rem; } .science__card p{ color:rgba(255,255,255,.85); font-size:var(--t-lead); margin-bottom:1.4rem; } /* ============================================================ JOURNEY — 30-day timeline ============================================================ */ .journey{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; counter-reset:jstep; } .jstep{ position:relative; padding:2rem 1.7rem; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--sh-sm); } .jstep::before{ content:""; position:absolute; top:0; left:1.7rem; right:1.7rem; height:2px; background:var(--sky); transform:scaleX(.32); transform-origin:left; border-radius:2px; } .jstep:nth-child(2)::before{ transform:scaleX(.66); } .jstep:nth-child(3)::before{ transform:scaleX(1); } .jstep__k{ font-size:.76rem; text-transform:uppercase; letter-spacing:.1em; color:var(--sky-deep); font-weight:var(--fw-med); } .jstep h3{ font-size:var(--t-h3); margin:.6rem 0 .55rem; font-weight:var(--fw-med); } .jstep p{ color:var(--ink-2); font-size:.95rem; } .journey__foot{ margin-top:1.6rem; text-align:center; font-size:.74rem; color:var(--muted); } .reviews__head h2{ max-width:24ch; } /* ============================================================ FAQ accordion ============================================================ */ .faq__wrap{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(2rem,4vw,4rem); align-items:start; } .faq__head{ display:flex; flex-direction:column; gap:1rem; position:sticky; top:clamp(6rem,8vw,7.5rem); } .faq__title{ font-size:var(--t-h2); font-weight:var(--fw-reg); letter-spacing:var(--track-tight); max-width:14ch; } .faq__list{ display:flex; flex-direction:column; } .faqrow{ border-bottom:1px solid var(--line); } .faqrow:first-child{ border-top:1px solid var(--line); } .faqrow summary{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.4rem .1rem; cursor:pointer; list-style:none; font-size:1.1rem; font-weight:var(--fw-med); color:var(--ink); } .faqrow summary::-webkit-details-marker{ display:none; } .faqrow__pl{ position:relative; width:16px; height:16px; flex:none; } .faqrow__pl::before,.faqrow__pl::after{ content:""; position:absolute; background:var(--sky-deep); border-radius:2px; transition:transform .35s var(--e-out), opacity .35s; } .faqrow__pl::before{ top:7px; left:0; width:16px; height:2px; } .faqrow__pl::after{ left:7px; top:0; width:2px; height:16px; } .faqrow[open] .faqrow__pl::after{ transform:rotate(90deg); opacity:0; } .faqrow p{ padding:0 0 1.5rem; color:var(--ink-2); max-width:64ch; } /* ============================================================ CROSS-SELL teaser ============================================================ */ .xsell{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; } .xsell__media{ position:relative; border-radius:var(--r-panel); overflow:hidden; aspect-ratio:4/5; background:var(--stone); box-shadow:var(--sh-lg); } .xsell__media .lift__media{ width:100%; height:100%; } .xsell__media img{ width:100%; height:100%; object-fit:cover; } .xsell__text h2{ font-size:var(--t-h2); margin:1.1rem 0 1.2rem; } .xsell__text > p{ color:var(--ink-2); font-size:var(--t-lead); max-width:46ch; margin-bottom:1.7rem; } .xsell__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem; } /* ============================================================ STICKY MINI ADD-TO-CART BAR ============================================================ */ .stickybar{ position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--glass-bg); backdrop-filter:blur(var(--glass-blur)); -webkit-backdrop-filter:blur(var(--glass-blur)); border-top:1px solid var(--line); box-shadow:0 -14px 40px -30px rgba(20,40,55,.5); transform:translateY(110%); transition:transform .5s var(--e-out); } .stickybar.is-on{ transform:translateY(0); } .stickybar__row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem var(--gutter); } .stickybar__info{ display:flex; align-items:center; gap:.85rem; min-width:0; } .stickybar__info img{ width:44px; height:44px; border-radius:var(--r-sm); object-fit:cover; flex:none; } .stickybar__meta{ display:flex; flex-direction:column; min-width:0; } .stickybar__meta b{ font-weight:var(--fw-med); font-size:.92rem; white-space:nowrap; } .stickybar__meta span{ font-size:.74rem; color:var(--muted); white-space:nowrap; } .stickybar__price{ font-size:1.05rem; margin-left:.4rem; } .stickybar__strike{ font-size:.8rem; } .stickybar__btn{ flex:none; white-space:nowrap; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:960px){ .pdp__wrap{ grid-template-columns:1fr; gap:2rem; } .gallery{ position:static; top:auto; } .gallery__stage{ aspect-ratio:1/1; } .ing__wrap, .faq__wrap{ grid-template-columns:1fr; } .ing__head, .faq__head{ position:static; top:auto; } .how__grid{ grid-template-columns:1fr; } .proof__quotes{ grid-template-columns:1fr 1fr; } .journey{ grid-template-columns:1fr; } .jstep::before{ top:0; left:1.7rem; width:auto; } .xsell{ grid-template-columns:1fr; } .xsell__media{ aspect-ratio:16/10; max-height:60vh; } } @media (max-width:560px){ .pdp{ padding-top:1rem; } .buybox__disc{ font-size:.78rem; } .getlist{ grid-template-columns:1fr; } .proof__quotes{ grid-template-columns:1fr; } .gallery__stage{ aspect-ratio:4/5; } .gallery__dots{ bottom:.9rem; gap:.7rem; } .opt{ padding:.95rem 1rem; } .opt__price .price{ font-size:1.05rem; } /* mobile sticky bar: drop the thumb + secondary text, truncate the name, shorten the button so it never cramps */ .stickybar__info img{ display:none; } .stickybar__meta span{ display:none; } .stickybar__strike{ display:none; } .stickybar__meta b{ font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:38vw; } .stickybar__price{ font-size:1.02rem; margin-left:.2rem; } .stickybar__info{ gap:.5rem; min-width:0; flex:1; } .stickybar__row{ padding:.55rem var(--gutter); gap:.6rem; } .stickybar__btn{ padding:.75em 1.1em; font-size:.85rem; } .xsell__cta{ gap:1rem; } /* --- mobile tap-target + fit hardening (44px min, no clipped headline) --- */ /* cross-sell display headline: at 31px the long BG first line kisses the right gutter and "Цял" visibly clips — ease it down + let it balance. */ .xsell__text h2{ font-size:clamp(1.55rem,1.15rem + 3vw,1.85rem); line-height:1.08; text-wrap:balance; margin:.9rem 0 1.1rem; } /* gallery carousel dots: visible dot stays small, but the