/* ==========================================================================
   SINGLE PRODUCT — bespoke luxury DTC layout (Apple · Aesop · Stripe).
   Loaded only on single product pages. Consumes design tokens.
   ========================================================================== */

.ps-product { padding-bottom: 0; }

/* ===== 01 · HERO ======================================================= */
.ps-phero { padding-top: clamp(1.5rem, 1rem + 3vw, 3rem); padding-bottom: var(--space-3xl); }
.ps-phero__inner { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }

/* Gallery */
.ps-phero__stage { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/5; background:
  radial-gradient(120% 100% at 50% 6%, var(--c-plinth-1), var(--c-plinth-2) 72%, var(--c-plinth-3)); box-shadow: var(--shadow-lg); }
.ps-phero__stage::after { content:""; position:absolute; inset:0; box-shadow: inset 0 -90px 70px -70px rgba(10,37,64,0.26); pointer-events:none; }
.ps-phero__img { width: 100%; height: 100%; object-fit: contain; padding: clamp(1.5rem, 5vw, 3.5rem); transition: opacity var(--dur-base) var(--ease-out); }
.ps-phero__ph { position:absolute; inset:0; display:grid; place-items:center; color: var(--c-brand-300); }
.ps-phero__ph svg { width: 90px; height: 90px; opacity:.5; }
.ps-phero__flag { position:absolute; top: var(--space-md); left: var(--space-md); background: var(--c-ink); color:#fff; font-size: var(--fs-meta); letter-spacing:.04em; padding:6px 12px; border-radius: var(--radius-pill); }

.ps-phero__thumbs { list-style:none; margin: var(--space-md) 0 0; padding:0; display:flex; gap: var(--space-sm); flex-wrap: wrap; }
.ps-phero__thumb { width: 72px; height: 72px; border-radius: var(--radius-sm); overflow:hidden; border:1px solid var(--border); background: var(--surface); padding:0; cursor:pointer; transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.ps-phero__thumb img { width:100%; height:100%; object-fit:cover; }
.ps-phero__thumb:hover { transform: translateY(-2px); }
.ps-phero__thumb.is-active { border-color: var(--c-gold); box-shadow: 0 0 0 1px var(--c-gold); }

/* Sticky buy panel */
.ps-phero__panel { position: relative; }
.ps-buybox { display:flex; flex-direction:column; gap: var(--space-md); }
.ps-buybox__eyebrow { margin:0; }
.ps-buybox__title { font-size: var(--fs-h1); letter-spacing: var(--tracking-display); margin:0; }
.ps-buybox__tagline { color: var(--text-soft); font-size: var(--fs-lg); margin:0; }
.ps-buybox__price { display:flex; align-items:baseline; gap: var(--space-md); flex-wrap:wrap; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--weight-semibold); color: var(--text); }
.ps-buybox__price del { color: var(--text-muted); font-weight:400; font-size: var(--fs-xl); }
.ps-buybox__price ins { text-decoration:none; }
.ps-buybox__guarantee { display:inline-flex; align-items:center; gap:6px; font-family: var(--font-sans); font-size: var(--fs-meta); font-weight: var(--weight-medium); color: var(--c-brand); letter-spacing:0; }
.ps-buybox__guarantee svg { width:16px; height:16px; }

.ps-buybox__highlights { list-style:none; margin:0; padding: var(--space-sm) 0; display:flex; flex-direction:column; gap: var(--space-sm); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.ps-buybox__highlights li { display:flex; gap: var(--space-sm); align-items:flex-start; font-size: var(--fs-sm); color: var(--text-soft); }
.ps-buybox__hicon { width:18px; height:18px; color: var(--c-success); flex:none; margin-top:2px; }

/* Quantity stepper */
.ps-buybox__form { display:flex; flex-direction:column; gap: var(--space-sm); }
.ps-qty { display:inline-flex; align-items:center; align-self:flex-start; border:1px solid var(--c-line-strong); border-radius: var(--radius-sm); overflow:hidden; background: var(--surface); height: var(--btn-h); }
.ps-qty__btn { width:46px; height:100%; display:grid; place-items:center; font-size:1.2rem; color: var(--text); transition: background var(--dur-fast) var(--ease-out); }
.ps-qty__btn:hover { background: rgba(10,37,64,0.05); }
.ps-qty__input { width:52px; height:100%; text-align:center; border:0; border-inline:1px solid var(--border); background:transparent; -moz-appearance:textfield; font-weight: var(--weight-semibold); }
.ps-qty__input::-webkit-outer-spin-button, .ps-qty__input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.ps-buybox__actions { display:flex; flex-direction:column; gap: var(--space-sm); }
.ps-buybox__soldout { font-weight: var(--weight-semibold); color: var(--c-danger); }

.ps-buybox__trust { font-size: var(--fs-meta); margin:0; }
.ps-buybox__pay { display:flex; flex-direction:column; gap:2px; padding-top: var(--space-sm); border-top:1px solid var(--border); font-size: var(--fs-meta); }
.ps-buybox__paymarks { letter-spacing:.04em; color: var(--text-soft); }

/* Native add-to-cart fallback (variable products), restyled minimally */
.ps-buybox__native .button { width:100%; }

@media (min-width: 980px) {
  .ps-phero__inner { grid-template-columns: 1.25fr 1fr; gap: clamp(2rem, 5vw, 5rem); }
  .ps-buybox { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* ===== 02 · AUTHORITY ================================================== */
.ps-pauth { border-block:1px solid var(--border); padding-block: var(--space-lg); background: var(--bg); }
.ps-pauth__row { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap: 0; }
.ps-pauth__item { display:inline-flex; align-items:center; gap:8px; font-size: var(--fs-sm); color: var(--text-soft); padding: 6px var(--space-lg); position:relative; }
.ps-pauth__item + .ps-pauth__item { border-left:1px solid var(--border); }
.ps-pauth__icon { width:16px; height:16px; color: var(--c-gold); flex:none; }

/* ===== 03 · WHAT IS ==================================================== */
.ps-pwhatis__inner { display:grid; gap: clamp(2rem,5vw,4rem); align-items:center; }
.ps-pwhatis__copy { display:flex; flex-direction:column; gap: var(--space-md); }
.ps-pwhatis__title { font-size: var(--fs-h2); letter-spacing: var(--tracking-display); }
.ps-pwhatis__def { font-family: var(--font-display); font-size: var(--fs-xl); line-height: var(--lh-snug); max-width: 30ch; }
.ps-pwhatis__body { color: var(--text-soft); font-size: var(--fs-lg); line-height: var(--lh-relaxed); }
@media (min-width: 980px) { .ps-pwhatis__inner { grid-template-columns: 7fr 5fr; } }

/* ===== 04 · BENEFITS =================================================== */
.ps-pbenefits__list { display:grid; gap: var(--space-xl); margin-top: var(--space-2xl); }
.ps-pbenefit { display:grid; grid-template-columns:auto 1fr; gap: var(--space-lg); align-items:start; }
.ps-pbenefit__icon { width:52px; height:52px; display:grid; place-items:center; border:1px solid var(--border); border-radius: var(--radius-md); color: var(--c-brand); background: var(--surface); }
.ps-pbenefit__icon svg { width:26px; height:26px; }
.ps-pbenefit__title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--weight-semibold); }
.ps-pbenefit__text { margin-top:4px; max-width: 46ch; }
@media (min-width: 760px) { .ps-pbenefits__list { grid-template-columns:1fr 1fr; gap: var(--space-2xl) var(--space-3xl); } }

/* ===== 05 · RITUAL ==================================================== */
.ps-pritual__inner { display:grid; gap: clamp(2rem,5vw,4rem); align-items:center; }
.ps-pritual__copy { display:flex; flex-direction:column; gap: var(--space-lg); }
@media (min-width: 980px) { .ps-pritual__inner { grid-template-columns: 5fr 7fr; } .ps-pritual__media { position: sticky; top: calc(var(--header-h) + 24px); } }

/* ===== 06 · USAGE TIMELINE (track) ==================================== */
.ps-track { list-style:none; margin: var(--space-3xl) 0 0; padding:0; display:grid; gap: var(--space-2xl); position:relative; counter-reset: track; }
.ps-track__phase { text-align:center; display:flex; flex-direction:column; align-items:center; gap: var(--space-xs); max-width: 30rem; margin-inline:auto; position:relative; padding-top: var(--space-lg); }
.ps-track__node { width:16px; height:16px; border-radius:50%; background: var(--c-gold); box-shadow: 0 0 0 5px rgba(29,111,216,0.18); }
.ps-track__band { color: var(--c-brand); }
.ps-track__title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--weight-semibold); }
.ps-track__text { max-width: 34ch; }
@media (min-width: 820px) {
  .ps-track--3 { grid-template-columns: repeat(3,1fr); }
  .ps-track--4 { grid-template-columns: repeat(4,1fr); }
  .ps-track { gap: var(--space-lg); }
  .ps-track::before { content:""; position:absolute; top: calc(var(--space-lg) + 8px); left: 14%; right: 14%; height:1px;
    background: linear-gradient(90deg, transparent, var(--c-gold) 10%, var(--c-gold) 90%, transparent); opacity:.55; }
}

/* ===== 10 · STICKY MOBILE BUY BAR ===================================== */
.ps-buybar { position: fixed; left:0; right:0; bottom:0; z-index: var(--z-overlay); background: rgba(255,255,255,0.92); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-top:1px solid var(--border); box-shadow: 0 -10px 30px -16px rgba(10,37,64,0.25); transform: translateY(110%); transition: transform var(--dur-base) var(--ease-out); padding: var(--space-sm) 0 calc(var(--space-sm) + env(safe-area-inset-bottom)); }
.ps-buybar[hidden] { display:block; } /* JS controls visibility via class */
.ps-buybar.is-visible { transform:none; }
.ps-buybar__inner { display:flex; align-items:center; justify-content:space-between; gap: var(--space-md); max-width: var(--container); margin-inline:auto; padding-inline: var(--gutter); }
.ps-buybar__info { display:flex; flex-direction:column; min-width:0; }
.ps-buybar__name { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: var(--weight-semibold); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 46vw; }
.ps-buybar__price { font-size: var(--fs-meta); color: var(--text-soft); }
.ps-buybar__price del { display:none; }
.ps-buybar__cta { min-height: 46px; padding-inline: var(--space-lg); white-space:nowrap; }

/* Show the bar only on mobile; never on desktop */
@media (min-width: 900px) { .ps-buybar { display:none !important; } }
/* Give content room so the bar never covers the footer end on mobile */
@media (max-width: 899px) { .ps-product { padding-bottom: 84px; } }