/* ==========================================================================
   XEBAYI DERMACEUTICALS — product page
   Loaded after style.css. Inherits every token from the main design system.
   ========================================================================== */

/* ------------------------------ shell ----------------------------------- */
.pdp{padding-top:34px}

.crumbs{
  max-width:var(--max-narrow);margin:0 auto;padding:0 var(--gutter);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:12.5px;letter-spacing:.06em;color:var(--muted-2);
}
.crumbs a{transition:color .3s var(--ease)}
.crumbs a:hover{color:var(--gold-deep)}
.crumbs i{font-style:normal;opacity:.45;font-size:10px}
.crumbs b{font-weight:500;color:var(--text)}

/* ------------------------------ hero ------------------------------------ */
.pdp__hero{
  max-width:var(--max-narrow);margin:0 auto;padding:34px var(--gutter) 0;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4.5vw,4rem);
  align-items:start;
}

/* gallery ---------------------------------------------------------------- */
.gallery{position:sticky;top:104px}
.gallery__main{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:1/1;background:var(--sand-3);border:1px solid var(--line);
}
.gallery__main .gallery__shot{
  position:absolute;inset:0;opacity:0;transform:scale(1.05);
  transition:opacity .6s var(--ease), transform 1.1s var(--ease-out);
}
.gallery__main .gallery__shot.is-active{opacity:1;transform:none}
.gallery__shot .img-slot{position:absolute;inset:0}

.gallery__save{
  position:absolute;top:18px;left:18px;z-index:3;
  background:var(--gold);color:var(--ink);
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:8px 14px;border-radius:30px;
}
.gallery__size{
  position:absolute;bottom:18px;right:18px;z-index:3;
  background:rgba(17,17,17,.84);backdrop-filter:blur(6px);color:#fff;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:8px 14px;border-radius:30px;
}

.gallery__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.gallery__thumb{
  position:relative;aspect-ratio:1/1;border-radius:var(--r-sm);overflow:hidden;
  border:1px solid var(--line);background:var(--sand-3);
  transition:border-color .3s var(--ease), transform .35s var(--ease-out);
}
.gallery__thumb .img-slot{position:absolute;inset:0}
.gallery__thumb .img-slot::after{font-size:9px;letter-spacing:.1em;padding:5px 9px}
.gallery__thumb:hover{transform:translateY(-3px)}
.gallery__thumb[aria-selected="true"]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}

/* buy column ------------------------------------------------------------- */
.buy__cat{font-size:11.5px;font-weight:600;letter-spacing:.18em;color:var(--gold-deep);text-transform:uppercase}
.buy__title{
  margin-top:12px;font-family:var(--display);font-weight:700;
  font-size:clamp(30px,4vw,44px);line-height:1.08;letter-spacing:-.01em;color:var(--ink);
}
.buy__tag{margin-top:8px;font-family:var(--display);font-style:italic;font-size:17px;color:var(--muted-2)}

.buy__rating{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:13.5px;color:var(--muted)}
.buy__rating a{border-bottom:1px solid var(--line-2);transition:color .3s,border-color .3s}
.buy__rating a:hover{color:var(--gold-deep);border-color:var(--gold)}

.buy__price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:22px}
.buy__now{font-family:var(--display);font-weight:700;font-size:34px;color:var(--ink);line-height:1}
.buy__was{font-size:17px;color:var(--muted-3)}
.buy__off{
  background:rgba(228,181,49,.16);border:1px solid rgba(228,181,49,.5);color:var(--gold-dark);
  font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 11px;border-radius:30px;
}

.buy__lede{margin-top:20px;font-size:15.5px;line-height:1.75;color:var(--muted)}

/* assurance badges -------------------------------------------------------- */
.assure{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:24px}
.assure div{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px 14px;font-size:13px;color:var(--text-2);
  transition:border-color .35s var(--ease), background-color .35s var(--ease);
}
.assure div:hover{border-color:var(--gold);background:rgba(228,181,49,.05)}
.assure svg{width:16px;height:16px;color:var(--gold-deep);flex-shrink:0}

/* scarcity ---------------------------------------------------------------- */
.scarce{margin-top:26px;border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px;background:var(--sand)}
.scarce__row{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:13px}
.scarce__key{letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);font-size:11.5px;font-weight:600}
.scarce__val{font-weight:600;color:var(--ink)}
.scarce__bar{height:6px;background:#e6e4dc;border-radius:6px;overflow:hidden;margin-top:12px}
.scarce__bar i{
  display:block;height:100%;width:0;border-radius:6px;
  background:linear-gradient(90deg,var(--gold),var(--gold-lit));
  transition:width 1.6s var(--ease-out) .2s;
}
.scarce__note{
  display:flex;align-items:center;gap:9px;margin-top:14px;
  font-size:13px;color:var(--muted);
}
.scarce__note svg{width:15px;height:15px;color:var(--gold);flex-shrink:0}
.scarce__note strong{color:var(--ink);font-weight:600}
.scarce__pulse{
  width:7px;height:7px;border-radius:50%;background:#3fae6a;flex-shrink:0;
  box-shadow:0 0 0 0 rgba(63,174,106,.55);animation:livePulse 2.2s infinite;
}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(63,174,106,.5)}
  70%{box-shadow:0 0 0 8px rgba(63,174,106,0)}
  100%{box-shadow:0 0 0 0 rgba(63,174,106,0)}
}

/* quantity + tiers -------------------------------------------------------- */
.buy__controls{display:flex;align-items:stretch;gap:12px;margin-top:24px;flex-wrap:wrap}
.stepper{
  display:flex;align-items:center;gap:4px;
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:5px;
}
.stepper button{
  width:38px;height:38px;border-radius:9px;font-size:17px;line-height:1;color:var(--ink);
  display:grid;place-items:center;
  transition:background-color .25s var(--ease), color .25s var(--ease);
}
.stepper button:hover{background:var(--ink);color:#fff}
.stepper input{
  width:44px;text-align:center;border:none;outline:none;background:none;
  font-size:16px;font-weight:600;color:var(--ink);
  -moz-appearance:textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.buy__actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.buy__actions .btn{padding:17px}

.deliver{margin-top:20px;display:flex;flex-direction:column;gap:11px}
.deliver div{display:flex;align-items:center;gap:11px;font-size:13.5px;color:var(--muted)}
.deliver svg{width:16px;height:16px;color:var(--ink);flex-shrink:0}

/* --------------------------- sticky buy bar ------------------------------ */
.buybar{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-top:1px solid var(--line);
  box-shadow:0 -14px 40px -24px rgba(0,0,0,.3);
  transform:translateY(102%);
  transition:transform .5s var(--ease-out);
}
.buybar.is-on{transform:none}
.buybar__inner{
  max-width:var(--max-narrow);margin:0 auto;padding:12px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.buybar__id{display:flex;align-items:center;gap:14px;min-width:0}
.buybar__thumb{
  width:46px;height:46px;border-radius:10px;overflow:hidden;flex-shrink:0;
  border:1px solid var(--line);position:relative;background:var(--sand-3);
}
.buybar__thumb .img-slot{position:absolute;inset:0}
.buybar__thumb .img-slot::after{display:none}
.buybar__meta{min-width:0}
.buybar__name{font-size:14.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar__price{font-size:13px;color:var(--muted);margin-top:2px}
.buybar__price s{color:var(--muted-3);margin-left:6px}
.buybar__cta{display:flex;align-items:center;gap:12px;flex-shrink:0}

/* --------------------------- inside the formula -------------------------- */
.formula{background:var(--ink-2);color:#fff;padding:88px var(--gutter) 92px;margin-top:90px}
.formula__inner{max-width:var(--max-narrow);margin:0 auto}
.formula__head{text-align:center;max-width:640px;margin:0 auto}
.formula__head h2{font-family:var(--display);font-weight:700;font-size:clamp(30px,4.2vw,46px);color:#fff;margin-top:12px;line-height:1.1}
.formula__head p{margin-top:14px;font-size:16px;color:var(--on-dark-3);line-height:1.65}

.actives{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.active{
  border:1px solid #232323;border-radius:var(--r-md);padding:28px 24px;background:var(--surface);
  transition:transform .5s var(--ease-out), border-color .4s, background-color .4s;
}
.active:hover{transform:translateY(-5px);border-color:rgba(228,181,49,.42);background:#1d1d1d}
.active__pc{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:56px;height:31px;padding:0 13px;border-radius:30px;
  background:rgba(228,181,49,.12);border:1px solid rgba(228,181,49,.35);
  color:var(--gold);font-size:13px;font-weight:600;letter-spacing:.04em;
}
.active h3{margin-top:16px;font-family:var(--display);font-weight:700;font-size:20px;color:#fff;line-height:1.25}
.active p{margin-top:10px;font-size:14px;color:#a8a8a8;line-height:1.65}

/* --------------------------- benefits ------------------------------------ */
.pdp-benefits{max-width:var(--max-narrow);margin:0 auto;padding:88px var(--gutter) 0}
.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px}
.benefit{
  border:1px solid var(--line);border-radius:var(--r-md);padding:28px 26px;background:#fff;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s;
}
.benefit:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:#e0dcc9}
.benefit__no{
  font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.14em;
  color:var(--gold-deep);
}
.benefit p{margin-top:12px;font-size:15.5px;line-height:1.65;color:var(--text-2)}

/* --------------------------- transformation cycle ------------------------ */
.cycle{background:var(--sand);padding:92px var(--gutter) 96px;margin-top:90px}
.cycle__inner{max-width:var(--max-narrow);margin:0 auto}
.cycle__head{text-align:center;max-width:640px;margin:0 auto}
.cycle__head h2{font-family:var(--display);font-weight:700;font-size:clamp(30px,4.2vw,46px);margin-top:12px;line-height:1.1;color:var(--ink)}
.cycle__head p{margin-top:14px;font-size:16.5px;color:var(--muted);line-height:1.7}

.cycle__track{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:64px}
.cycle__rail{
  position:absolute;left:16%;right:16%;top:31px;height:2px;
  background:rgba(17,17,17,.10);z-index:0;
}
.cycle__rail i{
  display:block;height:100%;width:100%;background:var(--gold);
  transform:scaleX(0);transform-origin:left;
  transition:transform 2s var(--ease-out) .25s;
}
.cycle__rail.is-in i{transform:scaleX(1)}

.phase{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center}
.phase__dot{
  width:64px;height:64px;border-radius:50%;
  background:#fff;border:2px solid var(--ink);
  display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:19px;color:var(--ink);
  transition:background-color .5s var(--ease), color .5s var(--ease),
             border-color .5s var(--ease), transform .5s var(--ease-out);
}
.phase:hover .phase__dot{transform:translateY(-5px)}
.phase.is-lit .phase__dot{background:var(--gold);border-color:var(--gold)}
.phase__when{
  margin-top:20px;font-size:11.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-deep);
}
.phase h3{margin-top:10px;font-family:var(--display);font-weight:700;font-size:24px;color:var(--ink)}
.phase p{margin-top:12px;font-size:15px;line-height:1.7;color:var(--muted);max-width:300px}

/* --------------------------- how to use ---------------------------------- */
.howto{max-width:var(--max-narrow);margin:0 auto;padding:90px var(--gutter) 0}
.howto__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start;margin-top:8px}
.howto__lead h2{font-family:var(--display);font-weight:700;font-size:clamp(30px,4.2vw,44px);margin-top:12px;line-height:1.1}
.howto__lead p{margin-top:18px;font-size:16px;color:var(--muted);line-height:1.7;max-width:360px}
.howto__note{
  margin-top:24px;border-left:2px solid var(--gold);padding:4px 0 4px 18px;
  font-family:var(--display);font-style:italic;font-size:16px;color:var(--text-2);line-height:1.65;
}

.steps{counter-reset:hs;display:flex;flex-direction:column}
.steps li{
  counter-increment:hs;position:relative;
  padding:22px 0 22px 62px;border-bottom:1px solid var(--line);
  font-size:16px;line-height:1.65;color:var(--text-2);
}
.steps li:first-child{border-top:1px solid var(--line)}
.steps li::before{
  content:counter(hs,decimal-leading-zero);
  position:absolute;left:0;top:22px;
  font-family:var(--display);font-weight:700;font-size:17px;color:var(--gold-deep);
  letter-spacing:.04em;
}

/* --------------------------- reviews ------------------------------------- */
.pdp-reviews{background:var(--ink);color:#fff;padding:90px var(--gutter) 96px;margin-top:92px}
.pdp-reviews__inner{max-width:var(--max-narrow);margin:0 auto}
.rv-top{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}

.rv-score{border:1px solid var(--line-dark);border-radius:var(--r-lg);padding:34px 30px;background:var(--surface-2)}
.rv-score__num{font-family:var(--display);font-weight:700;font-size:64px;line-height:1;color:var(--gold)}
.rv-score .stars{margin-top:14px}
.rv-score__count{margin-top:12px;font-size:14px;color:var(--on-dark-3)}
.rv-bars{margin-top:26px;display:flex;flex-direction:column;gap:10px}
.rv-bar{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--on-dark-3)}
.rv-bar span:first-child{width:34px;flex-shrink:0}
.rv-bar__track{flex:1;height:5px;background:#2a2a2a;border-radius:5px;overflow:hidden}
.rv-bar__track i{display:block;height:100%;background:var(--gold);border-radius:5px;width:0;transition:width 1.4s var(--ease-out) .3s}
.rv-bar span:last-child{width:34px;text-align:right;flex-shrink:0}

.rv-list{display:flex;flex-direction:column;gap:16px}

/* Date, brand reply and the empty state — all three come from the database
   now, so they need styling that did not exist when the reviews were typed
   into the page by hand. */
.rv__date{margin:12px 0 0;font-size:12px;color:var(--muted-3);letter-spacing:.02em}
.rv__reply{
  margin-top:14px;padding:12px 14px;border-left:2px solid var(--gold);
  background:rgba(228,181,49,.06);border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:13.5px;color:var(--on-dark-2);line-height:1.7;
}
.rv__reply b{display:block;margin-bottom:4px;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold)}
.rv-empty{
  padding:40px 20px;text-align:center;font-size:14.5px;color:var(--on-dark-3);
  border:1px dashed var(--line-dark);border-radius:var(--r-lg);
}
.rv{
  border:1px solid var(--line-dark);border-radius:var(--r-md);padding:26px 26px 24px;background:var(--surface-2);
  transition:border-color .4s var(--ease), background-color .4s var(--ease);
}
.rv:hover{border-color:rgba(228,181,49,.35);background:#191919}
.rv__head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rv__ini{
  width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--gold);
  display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:15px;flex-shrink:0;
  border:1px solid var(--line-dark);
}
.rv__who{display:flex;flex-direction:column;gap:2px}
.rv__who strong{font-size:15px;font-weight:600;color:#f0f0f0}
.rv__who em{font-style:normal;font-size:12.5px;color:var(--muted-3)}
.rv__verified{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6fbf8b;
}
.rv__verified svg{width:13px;height:13px}
.rv blockquote{margin-top:16px;font-family:var(--display);font-style:italic;font-size:17px;line-height:1.65;color:#c9c9c9}
.rv .stars{margin-top:14px}

/* write a review ---------------------------------------------------------- */
.rv-form{margin-top:56px;border:1px solid var(--line-dark);border-radius:var(--r-lg);padding:38px 36px;background:var(--surface-2)}
.rv-form h3{font-family:var(--display);font-weight:700;font-size:26px;color:#fff}
.rv-form > p{margin-top:8px;font-size:14.5px;color:var(--on-dark-3);line-height:1.6}
.rv-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.field{display:flex;flex-direction:column;gap:8px}
.field--wide{grid-column:1/-1}
.field label{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-3)}
.field input,.field select,.field textarea{
  background:#131313;border:1px solid #303030;border-radius:var(--r-sm);
  padding:13px 15px;font-size:14.5px;color:#eee;outline:none;font-family:var(--body);
  transition:border-color .3s var(--ease);
}
.field textarea{resize:vertical;min-height:110px;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:#5f5f5f}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold)}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23888' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:38px;
}

.rate{display:flex;gap:6px}
.rate button{
  width:34px;height:34px;display:grid;place-items:center;
  color:#3d3d3d;transition:color .25s var(--ease), transform .25s var(--ease-out);
}
.rate button svg{width:24px;height:24px;fill:currentColor}
.rate button:hover{transform:scale(1.14)}
.rate button.is-on{color:var(--gold)}

.rv-form__foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:26px}
.rv-form__foot p{font-size:12.5px;color:#6f6f6f;max-width:380px;line-height:1.55}
.rv-done{
  margin-top:20px;display:none;align-items:center;gap:12px;
  border:1px solid rgba(111,191,139,.4);background:rgba(111,191,139,.08);
  border-radius:var(--r-sm);padding:16px 18px;font-size:14.5px;color:#9fd8b4;
}
.rv-done.is-on{display:flex;animation:slideIn .5s var(--ease-out) both}
.rv-done svg{width:18px;height:18px;flex-shrink:0}

/* --------------------------- cross sell ---------------------------------- */
.xsell{max-width:var(--max-narrow);margin:0 auto;padding:90px var(--gutter) 0}
.xsell__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px}
.xs{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;
  box-shadow:var(--shadow-md);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s;
}
.xs:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:#e0dcc9}
.xs__media{display:block;position:relative;aspect-ratio:1/1;background:var(--sand-3);overflow:hidden}
.xs__name a{transition:color .3s var(--ease)}
.xs__name a:hover{color:var(--gold-deep)}
.xs__media .img-slot{position:absolute;inset:0;transition:transform 1.1s var(--ease-out)}
.xs:hover .xs__media .img-slot{transform:scale(1.05)}
.xs__body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.xs__cat{font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--gold-deep);text-transform:uppercase}
.xs__name{margin-top:10px;font-family:var(--display);font-weight:700;font-size:21px;color:var(--text);line-height:1.2}
.xs__price{margin-top:auto;padding-top:16px;display:flex;align-items:baseline;gap:9px}
.xs__price b{font-family:var(--display);font-weight:700;font-size:22px}
.xs__price s{font-size:14px;color:var(--muted-3)}
.xs .btn{margin-top:14px}

/* --------------------------- pdp faq ------------------------------------- */
.pdp-faq{max-width:var(--max-narrow);margin:0 auto;padding:90px var(--gutter) 100px}
.pdp-faq__head{text-align:center;max-width:620px;margin:0 auto}
.pdp-faq__head h2{font-family:var(--display);font-weight:700;font-size:clamp(30px,4.2vw,44px);margin-top:12px;line-height:1.1}
.pdp-faq__head p{margin-top:14px;font-size:16px;color:var(--muted);line-height:1.65}
.pdp-faq .faq__list{max-width:840px;margin:46px auto 0}
.pdp-faq .qa{background:#fff;border-color:var(--line)}
.pdp-faq .qa:hover{border-color:#d8d4c4}
.pdp-faq .qa.is-open{background:var(--sand);border-color:var(--gold)}
.pdp-faq .qa__q{color:var(--text)}
.pdp-faq .qa__q:hover{color:var(--ink)}
.pdp-faq .qa__a p{color:var(--muted)}

/* --------------------------- responsive ---------------------------------- */
/* laptop — keep the two-column buy layout, just tighten the grids */
@media (max-width:1180px){
  .pdp__hero{gap:2.4rem}
  .actives{grid-template-columns:repeat(2,1fr)}
  .benefit-grid{grid-template-columns:repeat(2,1fr)}
  .xsell__grid{grid-template-columns:repeat(2,1fr)}
  .buy__now{font-size:31px}
}

/* small laptop / tablet landscape — gallery stacks above the buy column */
@media (max-width:980px){
  .pdp__hero{grid-template-columns:1fr;gap:40px}
  .gallery{position:static}
  .gallery__main{max-width:520px;margin:0 auto}
  .gallery__thumbs{max-width:520px;margin-left:auto;margin-right:auto}
  .howto__grid{grid-template-columns:1fr;gap:34px}
  .rv-top{grid-template-columns:1fr;gap:34px}

  /* ---------------------------------------------------------------------
     Buy buttons move up to sit under the price.

     On desktop the gallery and this column sit side by side, so the buttons
     are on screen from the start. The moment the gallery stacks ON TOP, the
     source order pushes them below the description, four assurance badges
     and the stock panel — close to a full screen of scrolling before anyone
     can actually buy, which is where orders get lost.

     Flex `order` fixes it in CSS alone: the HTML is untouched, so desktop
     keeps its layout and screen readers still follow the DOM.

     `.buy > *` sets a high default FIRST, so any block added later falls to
     the bottom in source order instead of silently jumping to the top —
     which is what an un-ordered flex child (order:0) would do. */
  .buy{display:flex;flex-direction:column;max-width:640px;margin:0 auto}
  .buy > *      {order:20}
  .buy__cat     {order:1}
  .buy__title   {order:2}
  .buy__tag     {order:3}
  .buy__rating  {order:4}
  .buy__price   {order:5}
  .buy__controls{order:6}
  .buy__actions {order:7}
  .deliver      {order:8}   /* free delivery / COD reassurance, right under the CTA */
  .scarce       {order:9}   /* urgency stays near the button, where it works */
  /* .buy__lede and .assure keep order:20 and follow in source order */
}

/* tablet portrait */
@media (max-width:760px){
  .actives,.benefit-grid,.xsell__grid{grid-template-columns:1fr}
  .assure{grid-template-columns:1fr}
  .cycle__track{grid-template-columns:1fr;gap:38px}
  .cycle__rail{display:none}
  .rv-form__grid{grid-template-columns:1fr}
  .rv-form{padding:28px 22px}
  .buy__actions{grid-template-columns:1fr}
  .buybar__price{display:none}
  .buybar__inner{padding:10px var(--gutter)}
  .buybar__thumb{display:none}
  .formula,.cycle,.pdp-reviews{margin-top:70px}
  .pdp-benefits,.howto,.xsell,.pdp-faq{padding-top:70px}

  /* the fixed buy bar covers the end of the page — give it room.
     Scoped with :has so About/FAQ/Contact (no buy bar) are unaffected. */
  body:has(.buybar){padding-bottom:76px}
}

/* phone */
@media (max-width:560px){
  .pdp{padding-top:22px}
  .pdp__hero{padding-top:24px}
  .gallery__main{max-width:none;border-radius:var(--r-md)}
  .gallery__thumbs{max-width:none;gap:8px}
  .gallery__save,.gallery__size{font-size:10px;padding:6px 11px;letter-spacing:.1em}
  .gallery__save{top:12px;left:12px}
  .gallery__size{bottom:12px;right:12px}
  .buy{max-width:none}
  .buy__now{font-size:28px}
  .buy__price{gap:10px;margin-top:18px}
  .scarce{padding:16px 16px;margin-top:22px}
  .scarce__row{font-size:12.5px}
  .rv-form{padding:24px 18px}
  .rv-form h3{font-size:22px}
  .buybar__cta{gap:8px;flex:1;justify-content:flex-end}
  .buybar__name{font-size:13.5px}
}

/* small phone */
@media (max-width:380px){
  .gallery__thumbs{gap:6px}
  .buy__actions .btn{padding:15px}
  .buybar__id{display:none}
  .buybar__cta{width:100%}
  .buybar__cta .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .gallery__main .gallery__shot{transform:none}
  .cycle__rail i{transform:scaleX(1)}
  .buybar{transition:none}
  .scarce__pulse{animation:none}
}