/* ============================================================================
   SORA LIFE V2 — PRODUCT DETAIL
   PDP-only namespace. Existing commerce callbacks and data contracts remain in
   Product.jsx; this sheet supplies the approved cream / forest presentation.
   Geometry is the V2 0 / 2 / 4 system and all configurable colour touchpoints
   consume the existing Admin-to---slv2 bridge from v2-foundation.css.
   ========================================================================= */

.v2-pdp-root {
  min-height:100vh;
  background:var(--slv2-ivory);
  color:var(--slv2-ink);
  font-family:var(--slv2-sans);
  padding-bottom:18px;
}
.v2-pdp-loading {
  padding-block:32px 72px;
  background:var(--slv2-ivory);
}

/* --------------------------------------------------------------- page trail */
.v2-pdp-root .pdp-top {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-top:10px; padding-bottom:9px;
}
.v2-pdp-root .v2-crumbs {
  flex:1; min-width:0; margin:0;
  white-space:nowrap; overflow:hidden;
}
.v2-pdp-root .v2-crumbs span {
  min-width:0; overflow:hidden; text-overflow:ellipsis;
  color:var(--slv2-ink-2); font-weight:600;
}
.v2-pdp-root .pdp-back {
  min-width:44px; min-height:40px; padding:0 7px;
  border:1px solid var(--slv2-line); border-radius:var(--slv2-r-ui);
  color:var(--slv2-ink-2); background:var(--slv2-paper);
  font-family:var(--slv2-sans); font-size:11px; letter-spacing:.02em;
}

/* ---------------------------------------------------------- gallery + buy */
.v2-pdp-root .pdp.v2-wrap {
  display:grid; grid-template-columns:minmax(0, 1fr); gap:0;
  align-items:start; padding-block:0 24px;
}
.v2-pdp-root .pdp__gallery,
.v2-pdp-root .pdp__gallery--single {
  position:static; display:block; min-width:0;
  margin-inline:calc(-1 * var(--slv2-gutter));
}
.v2-pdp-root .pdp__main {
  position:relative; order:0; overflow:hidden; touch-action:pan-y;
  border:0; border-radius:0; box-shadow:none;
  background:var(--slv2-cream);
}
.v2-pdp-root .pdp__main .v2-pimg { border-radius:0; }
.v2-pdp-root .pdp__main .v2-pimg img { padding:0; }
.v2-pdp-root .pdp__frame-fade { animation:pdpV2FrameIn .34s ease; }
.v2-pdp-root .pdp__zoom-trigger {
  position:relative; display:block; width:100%; padding:0; overflow:hidden;
  color:inherit; text-align:inherit; border:0; border-radius:0; background:transparent;
  cursor:zoom-in;
}
.v2-pdp-root .pdp__zoom-trigger > .v2-pimg { width:100%; }
.v2-pdp-root .pdp__zoom-label {
  position:absolute; left:12px; bottom:12px; z-index:2;
  display:inline-flex; min-height:34px; align-items:center; gap:6px;
  padding:0 10px; color:var(--slv2-ink-2); background:rgba(255,253,248,.92);
  border:1px solid var(--slv2-line); border-radius:var(--slv2-r-ui);
  font:650 10.5px/1 var(--slv2-sans); letter-spacing:.02em;
}
.v2-pdp-root .pdp__zoom-label > span { font-size:15px; line-height:1; }
@keyframes pdpV2FrameIn { from { opacity:.5; } to { opacity:1; } }

.v2-pdp-root .pdp__galactions {
  position:absolute; top:12px; right:12px; z-index:3;
  display:flex; flex-direction:column; gap:8px;
}
.v2-pdp-root .pdp__galbtn {
  width:40px; height:40px; border-radius:var(--slv2-r-ui);
  background:rgba(255,253,248,.92); color:var(--slv2-ink-2);
  border:1px solid var(--slv2-line); box-shadow:none;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.v2-pdp-root .pdp__galbtn:hover { transform:none; color:var(--slv2-accent-primary-hover); }
.v2-pdp-root .pdp__galbtn:active { transform:scale(.98); }
.v2-pdp-root .pdp__galbtn.is-active {
  color:#A8443D; border-color:#E6CFC9; background:#FCF2F0;
}
.v2-pdp-root .pdp__dots {
  position:absolute; left:0; right:0; bottom:12px; z-index:2;
  display:flex; justify-content:center; gap:5px;
}
/* A position indicator, not a control (see ProductGallery.jsx). It carries no
   hit area on purpose: twelve to fifteen 44px targets cannot tile across a
   375px screen without overlapping, so selection lives on the thumbnail rail
   instead and these only show where you are. */
.v2-pdp-root .pdp__dot {
  width:14px; height:2px; padding:0; border:0; border-radius:0;
  background:rgba(22,33,27,.25); transition:background .16s ease, width .16s ease;
}
.v2-pdp-root .pdp__dot.active { width:24px; transform:none; background:var(--slv2-accent-primary); }
.v2-pdp-root .pdp__thumbs {
  order:1; display:flex; flex-direction:row; gap:8px; overflow-x:auto;
  padding:8px var(--slv2-gutter) 0; scrollbar-width:none;
}
.v2-pdp-root .pdp__thumbs::-webkit-scrollbar { display:none; }
.v2-pdp-root .pdp__thumb {
  flex:0 0 64px; width:64px; overflow:hidden;
  border:1px solid var(--slv2-line-2); border-radius:var(--slv2-r-ui);
  background:var(--slv2-cream); box-shadow:none;
}
.v2-pdp-root .pdp__thumb.active { border-color:var(--slv2-accent-primary); }
.v2-pdp-root .pdp__thumb .v2-pimg { border-radius:var(--slv2-r-ui); }

.v2-pdp-root .pdp__info { min-width:0; padding-top:22px; }
.v2-pdp-root .pdp__meta {
  display:inline-flex; align-items:center; gap:4px;
  margin:0 0 7px; font-size:9.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--slv2-gold-ink);
}
.v2-pdp-root .pdp__meta-sep { color:var(--slv2-ink-4); font-weight:600; }
/* Sans, like every other page heading in the storefront. The product name is
   commerce information a customer scans, not editorial display type — and the
   serif made the PDP read as a different site from the grid that opened it. */
.v2-pdp-root .pdp__title {
  margin:0; max-width:22ch;
  font-family:var(--slv2-sans);
  font-size:clamp(24px, 7vw, 30px); font-weight:700;
  line-height:1.18; letter-spacing:-.024em; text-wrap:balance;
  color:var(--slv2-ink);
}
.v2-pdp-root .pdp .pdp__lead {
  max-width:60ch; margin:12px 0 0;
  font-size:13px; line-height:1.65; color:var(--slv2-ink-3);
}

/* ------------------------------------------------------- rating + pricing */
.v2-pdp-root .pdp-rating {
  display:inline-flex; align-items:center; gap:7px;
  min-height:36px; padding:6px 9px; margin:14px 0 0;
  border:1px solid var(--slv2-line); border-radius:var(--slv2-r-ui);
  background:var(--slv2-paper); color:var(--slv2-ink-3); font-size:12px;
}
.v2-pdp-root .pdp-rating:hover { border-color:var(--slv2-stone-2); background:var(--slv2-cream); }
.v2-pdp-root .pdp-rating__score { color:var(--slv2-ink); font-size:13px; }
.v2-pdp-root .pdp-rating__stars .s-full { color:var(--slv2-star); }
.v2-pdp-root .pdp-rating__stars .s-empty { color:var(--slv2-line); }
.v2-pdp-root .pdp-rating__count::before { border-radius:0; background:var(--slv2-ink-4); }

.v2-pdp-root .pdp__price {
  display:grid; justify-items:start; gap:3px;
  margin:17px 0 16px; padding:15px 0;
  border-top:1px solid var(--slv2-line-2); border-bottom:1px solid var(--slv2-line-2);
}
.v2-pdp-root .pdp__price .v2-price { gap:8px; }
.v2-pdp-root .pdp__price .v2-price__now { font-size:29px; }
.v2-pdp-root .v2-price__off {
  padding:3px 6px; border-radius:var(--slv2-r-ui);
  background:var(--slv2-discount-bg); color:var(--slv2-discount-text);
}
.v2-pdp-root .pdp__tax {
  font-size:10px; color:var(--slv2-ink-4); letter-spacing:.025em;
}

/* --------------------------------------------------------------- offers */
.v2-pdp-root .pdp-offers {
  margin:0 0 17px; overflow:hidden;
  border:1px solid var(--slv2-stone); border-radius:var(--slv2-r-ui);
  background:var(--slv2-gold-50);
}
.v2-pdp-root .pdp-offers__bar {
  width:100%; min-height:55px; padding:10px 12px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  text-align:left;
}
.v2-pdp-root .pdp-offers__lead { gap:9px; }
.v2-pdp-root .pdp-offers__lead > svg,
.v2-pdp-root .pdp-offers__row > svg { color:var(--slv2-gold-ink); }
.v2-pdp-root .pdp-offers__lead strong,
.v2-pdp-root .pdp-offers__row strong { color:var(--slv2-ink); font-size:12px; }
.v2-pdp-root .pdp-offers__lead em,
.v2-pdp-root .pdp-offers__row em { color:var(--slv2-ink-3); font-size:10.5px; }
.v2-pdp-root .pdp-offers__toggle { color:var(--slv2-gold-ink); font-size:11px; }
.v2-pdp-root .pdp-offers__panel { padding:0 12px 10px; }
.v2-pdp-root .pdp-offers__row {
  gap:9px; padding:10px 0; border-top:1px solid var(--slv2-stone);
}
.v2-pdp-root .pdp-offers .promo-code__row,
.v2-pdp-root .pdp-offers .promo-code__copy { border-radius:var(--slv2-r-ui); }

/* ----------------------------------------------------------- pack + stock */
.v2-pdp-root .pdp__block { margin:0 0 16px; }
.v2-pdp-root .pdp__block > .label {
  font-family:var(--slv2-sans); font-size:10.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--slv2-ink-3);
}
.v2-pdp-root .variantlist { gap:8px; }
.v2-pdp-root .variantchip {
  min-width:104px; min-height:54px; padding:9px 11px; gap:2px;
  border:1px solid var(--slv2-line); border-radius:var(--slv2-r-ui);
  background:var(--slv2-paper); box-shadow:none; transform:none;
}
.v2-pdp-root .variantchip:hover:not(:disabled) { border-color:var(--slv2-accent-primary); transform:none; }
.v2-pdp-root .variantchip.active {
  border-color:var(--slv2-accent-primary); background:var(--slv2-f50);
  box-shadow:inset 3px 0 0 var(--slv2-accent-primary);
}
.v2-pdp-root .variantchip__label { color:var(--slv2-ink); font-size:12px; }
.v2-pdp-root .variantchip__price { color:var(--slv2-price); font-size:11.5px; }
.v2-pdp-root .variantchip__price s { color:var(--slv2-price-mrp); }
.v2-pdp-root .variantchip__out { color:var(--slv2-alert); }
.v2-pdp-root .pdp__stock { margin:0 0 12px; }
.v2-pdp-root .pdp__stock .v2-badge { gap:4px; height:22px; padding-inline:7px; }

/* --------------------------------------------------------------- purchase */
.v2-pdp-root .pdp__buy { display:flex; gap:8px; margin:0 0 8px; }
.v2-pdp-root .qty {
  flex:0 0 auto; display:inline-flex; align-items:center; overflow:hidden;
  height:44px; border:1px solid var(--slv2-line); border-radius:var(--slv2-r-ui);
  background:var(--slv2-paper);
}
.v2-pdp-root .qty button {
  width:40px; height:42px; color:var(--slv2-ink-2);
  border-radius:0; background:transparent;
}
.v2-pdp-root .qty button:first-child { border-right:1px solid var(--slv2-line-2); }
.v2-pdp-root .qty button:last-child { border-left:1px solid var(--slv2-line-2); }
.v2-pdp-root .qty button:hover { background:var(--slv2-cream); }
.v2-pdp-root .qty button:active { transform:scale(.98); }
/* Minus is disabled at qty 1 rather than silently doing nothing. Kept subtle:
   the control still reads as part of the stepper, just clearly inactive. */
.v2-pdp-root .qty button:disabled { color:var(--slv2-ink-4); cursor:not-allowed; }
.v2-pdp-root .qty button:disabled:hover { background:transparent; }
.v2-pdp-root .qty button:disabled:active { transform:none; }
.v2-pdp-root .qty span { min-width:34px; color:var(--slv2-ink); font-size:13px; }
.v2-pdp-root .pdp__addbtn { flex:1; min-width:0; }
.v2-pdp-root .pdp__addbtn.is-added {
  background:var(--slv2-save); border-color:var(--slv2-save); color:#FBF8F1;
}
.v2-pdp-root .pdp__buynow {
  margin:0 0 18px;
  border-color:var(--slv2-accent-primary);
}
.v2-pdp-root .v2-btn--ghost:hover {
  background:var(--slv2-cta-secondary-bg); color:var(--slv2-cta-secondary-text);
  border-color:var(--slv2-accent-primary-hover); filter:brightness(.985);
}

/* --------------------------------------------------------------- delivery */
.v2-pdp-root .pdp-deliver {
  display:flex; flex-direction:column; gap:0;
  margin:0; padding:0;
  border:0; border-top:1px solid var(--slv2-line); border-bottom:1px solid var(--slv2-line);
  border-radius:0; background:transparent;
}
.v2-pdp-root .pdp-deliver__row {
  display:flex; align-items:flex-start; gap:10px;
  padding:11px 2px; color:var(--slv2-ink-2); font-size:11.5px;
}
.v2-pdp-root .pdp-deliver__row + .pdp-deliver__row { border-top:1px solid var(--slv2-line-2); }
.v2-pdp-root .pdp-deliver__row > svg {
  flex:0 0 auto; margin-top:1px; color:var(--slv2-accent-primary);
}
.v2-pdp-root .pdp-deliver__row strong { color:var(--slv2-ink); font-size:11.5px; }
.v2-pdp-root .pdp-deliver__row em {
  display:block; margin-top:1px; color:var(--slv2-ink-4); font-size:10.5px; line-height:1.45;
}

/* ------------------------------------------------------ information flow */
.v2-pdp-root .pdp-flow { max-width:920px; }
.v2-pdp-root .pdp-sec {
  padding-block:24px; border-top:1px solid var(--slv2-line-2);
}
.v2-pdp-root .pdp-flow > .pdp-sec:first-child { border-top:0; padding-top:10px; }
.v2-pdp-root .pdp-sec__head { gap:8px; margin-bottom:11px; }
.v2-pdp-root .pdp-sec__title {
  margin:0 0 13px;
  font-family:var(--slv2-disp); font-variation-settings:'opsz' 144, 'SOFT' 0, 'WONK' 0;
  font-size:21px; font-weight:500; line-height:1.15; letter-spacing:-.01em;
  color:var(--slv2-ink);
}
.v2-pdp-root .pdp-preview-tag {
  padding:3px 6px; border:1px solid var(--slv2-stone);
  border-radius:var(--slv2-r-ui); background:var(--slv2-gold-50);
  color:var(--slv2-gold-ink); font-size:9px;
}

.v2-pdp-root .pdp-benefits__grid { gap:8px; }
.v2-pdp-root .pdp-benefits__card,
.v2-pdp-root .pdp-ingredients__card,
.v2-pdp-root .pdp-howto__body {
  border:1px solid var(--slv2-line); border-radius:var(--slv2-r-ui);
  background:var(--slv2-paper); box-shadow:none;
}
.v2-pdp-root .pdp-benefits__card { padding:12px; }
.v2-pdp-root .pdp-benefits__ic,
.v2-pdp-root .pdp-ingredients__ic,
.v2-pdp-root .pdp-howto__ic {
  border-radius:var(--slv2-r-ui); background:var(--slv2-f50); color:var(--slv2-accent-primary);
}
.v2-pdp-root .pdp-benefits__card strong,
.v2-pdp-root .pdp-ingredients__body strong { color:var(--slv2-ink); }
.v2-pdp-root .pdp-benefits__card span,
.v2-pdp-root .pdp-ingredients__body p,
.v2-pdp-root .pdp-howto__text { color:var(--slv2-ink-3); }

/* Divider-led accordion: no marketplace card shell. */
.v2-pdp-root .pdp-acc {
  overflow:visible; border:0; border-top:1px solid var(--slv2-line);
  border-bottom:1px solid var(--slv2-line); border-radius:0; background:transparent;
}
.v2-pdp-root .pdp-acc__item + .pdp-acc__item { border-top:1px solid var(--slv2-line-2); }
.v2-pdp-root .pdp-acc__btn {
  min-height:56px; padding:14px 2px;
  font-family:var(--slv2-sans); font-size:13px; font-weight:600;
  color:var(--slv2-ink); letter-spacing:.005em;
}
.v2-pdp-root .pdp-acc__title { gap:9px; }
.v2-pdp-root .pdp-acc__title svg { color:var(--slv2-accent-primary); }
.v2-pdp-root .pdp-acc__sign {
  width:27px; height:27px; border:1px solid var(--slv2-line);
  border-radius:var(--slv2-r-ui); color:var(--slv2-accent-primary);
}
.v2-pdp-root .pdp-acc__item.is-open .pdp-acc__sign {
  background:var(--slv2-accent-primary); border-color:var(--slv2-accent-primary); color:#FBF8F1;
}
.v2-pdp-root .pdp-acc__panel { padding:0 2px 17px; }
.v2-pdp-root .pdp-acc__p,
.v2-pdp-root .pdp-faq dd { color:var(--slv2-ink-3); font-size:12.5px; line-height:1.7; }
.v2-pdp-root .pdp-faq dt { color:var(--slv2-ink); font-size:12.5px; }
.v2-pdp-root .pdp-acc__tags { gap:6px; }
.v2-pdp-root .pdp-acc__tags .v2-chip { height:29px; padding-inline:9px; font-size:11px; }
.v2-pdp-root .pdp-acc .ticklist { gap:8px; }
.v2-pdp-root .pdp-acc .ticklist li { color:var(--slv2-ink-3); font-size:12px; }
.v2-pdp-root .pdp-acc .ticklist svg { color:var(--slv2-accent-primary); }

.v2-pdp-root .pdp-trust__list {
  display:grid; grid-template-columns:1fr; gap:0;
  border-top:1px solid var(--slv2-line); border-bottom:1px solid var(--slv2-line);
}
.v2-pdp-root .pdp-trust__item { gap:11px; padding:12px 2px; }
.v2-pdp-root .pdp-trust__item + .pdp-trust__item { border-top:1px solid var(--slv2-line-2); }
.v2-pdp-root .pdp-trust__ic {
  width:30px; height:30px; border-radius:var(--slv2-r-ui);
  background:var(--slv2-f50); color:var(--slv2-accent-primary);
}
.v2-pdp-root .pdp-trust__txt strong { color:var(--slv2-ink); font-size:12px; }
.v2-pdp-root .pdp-trust__txt em { color:var(--slv2-ink-4); font-size:10.5px; }

/* ------------------------------------------------ real catalogue imagery */
.v2-pdp-root .pdp-catalogue { padding-block:30px 6px; }
.v2-pdp-root .pdp-catalogue__head { margin-bottom:14px; }
.v2-pdp-root .pdp-catalogue__head .pdp-sec__title { margin-bottom:0; }
.v2-pdp-root .pdp-catalogue__grid {
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:10px;
}
.v2-pdp-root .pdp-catalogue__image {
  width:100%;
  aspect-ratio:1 / 1;
  border:1px solid var(--slv2-line-2);
  border-radius:var(--slv2-r-art);
  background:var(--slv2-cream);
}
.v2-pdp-root .pdp-catalogue__image img { object-fit:contain; padding:0; }

/* --------------------------------------------------------- image lightbox */
.pdp-lightbox {
  position:fixed; inset:0; z-index:180; display:grid; grid-template-rows:auto minmax(0, 1fr) auto;
  padding:max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  color:#FFFFFF; background:rgba(8, 15, 12, .96); overscroll-behavior:contain;
}
.pdp-lightbox__topbar { display:flex; min-height:44px; align-items:center; justify-content:flex-end; gap:16px; }
.pdp-lightbox__topbar > span { color:rgba(255,255,255,.72); font:650 11px/1 var(--slv2-sans); letter-spacing:.08em; }
.pdp-lightbox__close,
.pdp-lightbox__nav {
  display:grid; width:44px; height:44px; place-items:center; flex:0 0 44px;
  color:#FFFFFF; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.3); border-radius:2px;
}
.pdp-lightbox__close:hover,
.pdp-lightbox__nav:hover { background:rgba(255,255,255,.15); }
.pdp-lightbox__stage { display:grid; min-width:0; min-height:0; grid-template-columns:44px minmax(0, 1fr) 44px; align-items:center; gap:12px; }
.pdp-lightbox__image { width:100%; height:100%; max-height:calc(100vh - 116px); border:0; background:transparent; }
.pdp-lightbox__image img { width:100%; height:100%; object-fit:contain; padding:0; }
.pdp-lightbox__hint { margin:8px 0 0; color:rgba(255,255,255,.6); text-align:center; font:500 10px/1.3 var(--slv2-sans); }

@media (max-width:599px) {
  .pdp-lightbox { padding-inline:8px; }
  .pdp-lightbox__stage { grid-template-columns:1fr; position:relative; }
  .pdp-lightbox__nav { position:absolute; top:50%; z-index:2; transform:translateY(-50%); background:rgba(8,15,12,.58); }
  .pdp-lightbox__nav--prev { left:0; }
  .pdp-lightbox__nav--next { right:0; }
  .pdp-lightbox__image { max-height:calc(100dvh - 118px); }
}

/* --------------------------------------------------------- configured promos */
.v2-pdp-root .v2-pdp__promos { margin-top:10px; }
.v2-pdp-root .v2-pdp__promos .promo-section { padding-block:26px; }
.v2-pdp-root .v2-pdp__promos .promo-section .container {
  max-width:var(--slv2-container); padding-inline:var(--slv2-gutter);
}
.v2-pdp-root .v2-pdp__promos .promo-poster { border-radius:var(--slv2-r-art); }
.v2-pdp-root .v2-pdp__promos .promo-offer,
.v2-pdp-root .v2-pdp__promos .promo-offer__ic,
.v2-pdp-root .v2-pdp__promos .promo-code__row,
.v2-pdp-root .v2-pdp__promos .promo-code__copy,
.v2-pdp-root .v2-pdp__promos .promo-offer__cta,
.v2-pdp-root .v2-pdp__promos .promo-poster__badge,
.v2-pdp-root .v2-pdp__promos .promo-poster__cta { border-radius:var(--slv2-r-ui); }

/* ------------------------------------------------ frequently bought together */
.v2-pdp-root .v2-pdp__fbt-section { margin-top:28px; }
.v2-pdp-root .v2-pdp__fbt-section .v2-h2 { margin-bottom:0; }
.v2-pdp-root .fbt {
  display:grid; grid-template-columns:minmax(0, 1fr); gap:18px;
  align-items:center; margin-top:14px; padding:18px 0 0;
  background:transparent; border:0; border-top:1px solid var(--slv2-line);
  border-radius:0;
}
.v2-pdp-root .fbt__items {
  display:flex; align-items:flex-start; flex-wrap:nowrap; gap:9px;
  overflow-x:auto; padding:0 1px 5px; scrollbar-width:none;
  scroll-snap-type:x proximity;
}
.v2-pdp-root .fbt__items::-webkit-scrollbar { display:none; }
.v2-pdp-root .fbt__item {
  flex:0 0 104px; width:104px; text-align:left; scroll-snap-align:start;
  color:var(--slv2-ink); text-decoration:none;
}
.v2-pdp-root .fbt__item .v2-pimg {
  margin:0 0 7px; border:1px solid var(--slv2-line-2);
  border-radius:var(--slv2-r-art); box-shadow:none;
}
.v2-pdp-root .fbt__name {
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:31px; font-size:11.5px; font-weight:600; line-height:1.35;
}
.v2-pdp-root .fbt__price {
  display:block; margin-top:3px; color:var(--slv2-price); font-size:11.5px; font-weight:700;
}
.v2-pdp-root .fbt__plus { flex:0 0 16px; align-self:42px; color:var(--slv2-ink-4); }
.v2-pdp-root .fbt__buy {
  padding:14px; text-align:left;
  border:1px solid var(--slv2-line); border-radius:var(--slv2-r-ui);
  background:var(--slv2-cream);
}
.v2-pdp-root .fbt__label {
  display:block; color:var(--slv2-ink-3); font-size:10.5px; letter-spacing:.03em;
}
.v2-pdp-root .fbt__total {
  display:block; margin:3px 0 12px; color:var(--slv2-ink); font-size:24px; font-weight:500;
}

/* ---------------------------------------------------------------- reviews */
.v2-pdp-root #reviews.section-sm { padding-block:0; margin-top:34px; }
.v2-pdp-root #reviews > .container {
  max-width:var(--slv2-container); padding-inline:var(--slv2-gutter);
}
.v2-pdp-root .pdp-reviews-soon {
  gap:11px; padding:14px 2px;
  border:0; border-top:1px solid var(--slv2-line); border-bottom:1px solid var(--slv2-line);
  border-radius:0; background:transparent;
}
.v2-pdp-root .pdp-reviews-soon__ic {
  width:34px; height:34px; border-radius:var(--slv2-r-ui);
  background:var(--slv2-f50); color:var(--slv2-accent-primary);
}
.v2-pdp-root .pdp-reviews-soon p { color:var(--slv2-ink-3); font-size:12px; line-height:1.6; }
.v2-pdp-root .pdp-reviews__summary,
.v2-pdp-root .pdp-reviewcard {
  border:1px solid var(--slv2-line); border-radius:var(--slv2-r-ui);
  background:var(--slv2-paper); box-shadow:none;
}
.v2-pdp-root .pdp-reviewcard__avatar { border-radius:var(--slv2-r-ui); }
.v2-pdp-root .pdp-reviews__cta { border-radius:var(--slv2-r-ui); }
.v2-pdp-root .pdp-reviews__all { color:var(--slv2-accent-primary); }

/* PDP recommendations are a vertical shopping grid, never a mobile rail. */
.v2-pdp-root > .v2-sec { margin-top:34px; }
.v2-pdp-root .pdp-recommendations__grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

/* ----------------------------------------------------------- sticky mobile */
.v2-pdp-root .buybar {
  position:fixed; inset:auto 0 0; z-index:96;
  display:flex; align-items:center; gap:7px;
  min-height:68px; padding:9px var(--slv2-gutter) calc(9px + env(safe-area-inset-bottom));
  background:rgba(251,248,241,.97); border-top:1px solid var(--slv2-line);
  box-shadow:var(--slv2-sh-up); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.v2-pdp-root .buybar__price { flex:1 1 auto; min-width:0; }
.v2-pdp-root .buybar__price .v2-price { display:flex; flex-direction:column; gap:0; }
.v2-pdp-root .buybar__price .v2-price__now { font-size:15px; white-space:nowrap; }
.v2-pdp-root .buybar__price .v2-price__mrp { font-size:9.5px; white-space:nowrap; }
.v2-pdp-root .buybar .v2-btn {
  flex:0 0 auto; height:44px; min-height:44px; padding:0 13px; font-size:12px;
}
.v2-pdp-root .buybar__add {
  background:var(--slv2-cta-primary-bg); color:var(--slv2-cta-primary-text);
  border-color:var(--slv2-cta-primary-bg);
}
.v2-pdp-root .buybar__buy { border-color:var(--slv2-accent-primary); }
body:has(.v2-pdp-root .buybar) .page-main {
  padding-bottom:calc(70px + env(safe-area-inset-bottom));
}
@media (max-width:900px) {
  /* Keep the final footer row scrollable above the fixed purchase bar. The
     margin is exactly the bar reserve; it adds no blank PDP section. */
  body:has(.v2-pdp-root .buybar) .ftr {
    margin-bottom:calc(68px + env(safe-area-inset-bottom));
  }
}

@media (max-width:359px) {
  .v2-pdp-root .pdp__title { font-size:24px; }
  .v2-pdp-root .pdp__galactions { top:10px; right:10px; }
  .v2-pdp-root .pdp__galbtn { width:38px; height:38px; }
  .v2-pdp-root .buybar { gap:5px; }
  .v2-pdp-root .buybar .v2-btn { padding-inline:10px; font-size:11.5px; }
  .v2-pdp-root .buybar__price .v2-price__mrp { display:none; }
}

/* ========================================================================== 
   DESKTOP — dominant gallery + calm purchase column
   ========================================================================== */
@media (min-width:901px) {
  .v2-pdp-root { padding-bottom:48px; }
  .v2-pdp-root .pdp-top { padding-top:17px; padding-bottom:13px; }
  .v2-pdp-root .pdp-back { display:none; }
  .v2-pdp-root .pdp.v2-wrap {
    grid-template-columns:minmax(0, 1.18fr) minmax(390px, .82fr);
    gap:64px; padding-block:0 44px;
  }
  .v2-pdp-root .pdp__gallery,
  .v2-pdp-root .pdp__gallery--single {
    position:sticky; top:136px; margin-inline:0;
  }
  .v2-pdp-root .pdp__gallery:not(.pdp__gallery--single) {
    display:grid; grid-template-columns:72px minmax(0, 1fr); gap:12px;
  }
  .v2-pdp-root .pdp__main {
    order:2; border:1px solid var(--slv2-line-2); border-radius:var(--slv2-r-art);
  }
  .v2-pdp-root .pdp__main .v2-pimg { border-radius:var(--slv2-r-art); }
  .v2-pdp-root .pdp__thumbs {
    order:1; display:flex; flex-direction:column; gap:9px; overflow-y:auto;
    max-height:620px; padding:0; scrollbar-width:none;
  }
  .v2-pdp-root .pdp__thumb { flex:0 0 72px; width:72px; }
  .v2-pdp-root .pdp__dots { display:none; }
  .v2-pdp-root .pdp__galactions { top:14px; right:14px; }
  .v2-pdp-root .pdp__info {
    padding-top:20px; border-top:2px solid var(--slv2-accent-gold);
  }
  .v2-pdp-root .pdp__meta { margin-bottom:10px; font-size:10.5px; }
  .v2-pdp-root .pdp__title { max-width:17ch; font-size:36px; line-height:1.12; }
  .v2-pdp-root .pdp .pdp__lead { font-size:14px; }
  .v2-pdp-root .pdp__price { margin-top:20px; padding-block:17px; }
  .v2-pdp-root .pdp__price .v2-price__now { font-size:32px; }
  .v2-pdp-root .pdp__buy { gap:10px; }
  .v2-pdp-root .qty { height:52px; }
  .v2-pdp-root .qty button { width:43px; height:50px; }
  .v2-pdp-root .qty span { min-width:38px; font-size:14px; }
  .v2-pdp-root .pdp__buynow { margin-bottom:20px; }
  .v2-pdp-root .pdp-flow { padding-top:12px; }
  .v2-pdp-root .pdp-sec { padding-block:32px; }
  .v2-pdp-root .pdp-sec__title { font-size:26px; }
  .v2-pdp-root .pdp-benefits__grid { grid-template-columns:repeat(4, minmax(0,1fr)); }
  .v2-pdp-root .pdp-trust__list { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .v2-pdp-root .pdp-trust__item { padding:15px 13px; }
  .v2-pdp-root .pdp-trust__item + .pdp-trust__item {
    border-top:0; border-left:1px solid var(--slv2-line-2);
  }
  .v2-pdp-root .pdp-catalogue { padding-block:48px 8px; }
  .v2-pdp-root .pdp-catalogue__grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
  .v2-pdp-root .pdp-catalogue__grid--single { grid-template-columns:minmax(0, 620px); }
  .v2-pdp-root .pdp-recommendations__grid { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:24px; }
  .v2-pdp-root .v2-pdp__fbt-section { margin-top:48px; }
  .v2-pdp-root .fbt {
    grid-template-columns:minmax(0, 1fr) 260px; gap:36px; padding-top:24px;
  }
  .v2-pdp-root .fbt__items { overflow:visible; gap:14px; }
  .v2-pdp-root .fbt__item { flex-basis:136px; width:136px; }
  .v2-pdp-root .fbt__plus { flex-basis:20px; align-self:center; }
  .v2-pdp-root .fbt__name { font-size:12.5px; min-height:34px; }
  .v2-pdp-root .fbt__price { font-size:13px; }
  .v2-pdp-root .fbt__buy { padding:20px; }
  .v2-pdp-root #reviews.section-sm,
  .v2-pdp-root > .v2-sec { margin-top:48px; }
  .v2-pdp-root .buybar { display:none; }
}

@media (min-width:600px) and (max-width:900px) {
  .v2-pdp-root .pdp-catalogue__grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
  .v2-pdp-root .pdp-recommendations__grid { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; }
}

@media (min-width:1200px) {
  .v2-pdp-root .pdp.v2-wrap { grid-template-columns:minmax(0, 1.25fr) minmax(420px, .75fr); gap:76px; }
  .v2-pdp-root .pdp__title { font-size:40px; }
}

@media (prefers-reduced-motion:reduce) {
  .v2-pdp-root .pdp__frame-fade { animation:none; }
  .v2-pdp-root .pdp__dot { transition:none; }
}
/* PDP lead description: compact by default, expandable on demand */
.v2-pdp-root .pdp__leadwrap {
  margin-top:12px;
}

.v2-pdp-root .pdp__leadwrap .pdp__lead {
  margin:0;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}

.v2-pdp-root .pdp__leadwrap.is-open .pdp__lead {
  display:block;
  overflow:visible;
}

.v2-pdp-root .pdp__leadmore {
  margin-top:5px;
  padding:0;
  border:0;
  background:none;
  color:var(--slv2-accent-primary);
  font-family:var(--slv2-sans);
  font-size:11.5px;
  font-weight:600;
  cursor:pointer;
}

.v2-pdp-root .pdp__leadmore:hover {
  text-decoration:underline;
}
/* Buy Now — muted honey brown */
.v2-pdp-root .pdp__buynow {
  background:#B8893B;
  border-color:#B8893B;
  color:#fff;
  font-weight:600;
}

.v2-pdp-root .pdp__buynow:hover {
  background:#9F742F;
  border-color:#9F742F;
  color:#fff;
}

/* ==========================================================================
   RUN 1 — PREMIUM PDP
   Carries the shipped CategorySpotlight's language onto the product page:
   the same curved ground, the same display serif for a product's name, the
   same flat surfaces. Overrides sit at the end of the sheet so the rules they
   replace stay readable above rather than being deleted piecemeal.
   ========================================================================== */

.v2-pdp-root {
  /* The media frame's ground. Set per product from its category tone in
     Product.jsx, with the neutral cream as the fallback for a product whose
     category has no tone. */
  --pdp-ground: var(--slv2-cream);
  /* Vertical radius of the frame's bottom edge, as a % of its height. The
     spotlight gets its gentle arc by drawing the field wider than the screen
     and showing only the shallow middle; a frame cannot exceed its own box, so
     the same softness comes from a much smaller radius instead. */
  --pdp-arc: 12%;
  /* Purchase-bar reserve. Every rule that keeps content clear of the bar
     measures from here, so the bar's height is stated once.

     The bar sits at bottom:0 and the bottom navigation is not under it: an
     existing rule in pages.css hides .tabbar on any page carrying a .buybar,
     so the PDP deliberately swaps global navigation for buy actions while you
     are looking at a product. Stacking the bar above a nav that is not there
     was measured and only produced a 55px band of empty page. */
  --pdp-buybar-h: 66px;
}

/* ----------------------------------------------------------- media frame */
/* The product sits on its category's colour and the ground curves away
   beneath it. The catalogue's photography is not cut out — most shots carry
   their own white ground — so the curve is applied to the FRAME rather than
   to a colour field behind a transparent packshot, which is what the
   spotlight does with its processed art. Same shape, honest about the assets. */
.v2-pdp-root .pdp__main {
  background:var(--pdp-ground);
  border-radius:0 0 50% 50% / 0 0 var(--pdp-arc) var(--pdp-arc);
}
.v2-pdp-root .pdp__main .v2-pimg { background:transparent; }
/* Centred, not in the bottom-left corner.
   The frame's bottom edge is an ellipse, so its LOWEST point is the horizontal
   centre and its highest are the two corners — which is exactly where a
   corner-anchored label ends up being clipped. At 768px the arc's vertical
   radius is 92px and the label was cut in half. Centred, it sits in the one
   place on that edge that never rises, at every width. */
.v2-pdp-root .pdp__zoom-label {
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
}

/* -------------------------------------------------------------- brand line */
/* First in the reading order because Sora Life is a marketplace: whose
   product this is comes before what it is. It is a link, and it looks like
   one — a customer who reads a brand name here will try to tap it. */
.v2-pdp-root .pdp__brand {
  display:inline-flex; align-items:center; gap:3px;
  margin:0 0 6px; padding:0;
  color:var(--slv2-accent-primary); text-decoration:none;
  font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.v2-pdp-root .pdp__brand > svg { margin-top:1px; opacity:.7; }
.v2-pdp-root .pdp__brand:hover { text-decoration:underline; text-underline-offset:3px; }
.v2-pdp-root .pdp__brand:focus-visible {
  outline:2px solid var(--slv2-accent-primary); outline-offset:3px;
}

/* ------------------------------------------------------------------ title */
/* Fraunces, matching the shipped spotlight. This sheet previously argued for
   sans, because at the time the serif made the PDP read as a different site
   from the grid that opened it. That grid changed: CategorySpotlight now sets
   the product's name in the display serif, so a customer arriving from the
   category hero sees the same string twice — and sans here is now the
   inconsistency the original note was trying to avoid. The PDP's own section
   headings have been Fraunces all along. */
.v2-pdp-root .pdp__title {
  margin:0; max-width:20ch;
  font-family:var(--slv2-disp);
  font-variation-settings:'opsz' 144, 'SOFT' 0, 'WONK' 0;
  font-size:clamp(25px, 7.2vw, 31px); font-weight:600;
  line-height:1.14; letter-spacing:-.014em; text-wrap:balance;
  color:var(--slv2-ink);
}

/* ------------------------------------------------------------- price line */
/* One line. Price, struck MRP and the discount used to stack into three
   competing weights with the tax note under them; they are one fact about
   one product and they read as one row. */
.v2-pdp-root .pdp__price {
  display:flex; align-items:baseline; flex-wrap:wrap; gap:9px;
  margin:13px 0 0; padding:0; border:0; background:none;
}
.v2-pdp-root .pdp__price .v2-price {
  display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:9px;
}
.v2-pdp-root .pdp__price .v2-price__now {
  font-size:28px; font-weight:700; letter-spacing:-.02em; line-height:1.1;
}
.v2-pdp-root .pdp__price .v2-price__mrp { font-size:14px; }
.v2-pdp-root .pdp__price .v2-price__off {
  padding:2px 7px; border-radius:var(--slv2-r-ui);
  background:var(--slv2-discount-bg); color:var(--slv2-discount-text);
  font-size:11.5px; font-weight:700; letter-spacing:.01em;
}
.v2-pdp-root .pdp__tax {
  flex:0 0 100%; margin:0; color:var(--slv2-ink-4); font-size:11px;
}

/* ------------------------------------------------------------- facts row */
/* Rating and net quantity share one quiet line under the price. Both are
   optional; the row collapses completely when neither exists, rather than
   leaving the gap a missing rating used to leave. */
.v2-pdp-root .pdp__facts {
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px;
  margin:11px 0 0;
}
.v2-pdp-root .pdp__facts:empty { display:none; }
.v2-pdp-root .pdp__size {
  padding:3px 9px;
  border:1px solid var(--slv2-line); border-radius:var(--slv2-r-ui);
  color:var(--slv2-ink-2); font-size:11.5px; font-weight:600;
  letter-spacing:.03em;
}
.v2-pdp-root .pdp__facts .pdp-rating { margin:0; }
.v2-pdp-root .pdp__leadwrap { margin-top:14px; }

/* --------------------------------------------------------------- delivery */
/* The three methods a customer can actually pick, each with the fee it
   actually costs. Flat at every basket size — there is no threshold, and no
   row here may imply one. */
.v2-pdp-root .pdp-deliver {
  margin:0; padding:0;
  border:0; border-top:1px solid var(--slv2-line);
  border-radius:0; background:transparent;
}
.v2-pdp-root .pdp-deliver__head {
  display:flex; align-items:flex-start; gap:9px; padding:13px 0 10px;
}
.v2-pdp-root .pdp-deliver__head > svg { flex:0 0 auto; margin-top:2px; color:var(--slv2-accent-primary); }
.v2-pdp-root .pdp-deliver__head strong {
  display:block; color:var(--slv2-ink); font-size:12.5px; font-weight:700;
}
.v2-pdp-root .pdp-deliver__head em {
  display:block; margin-top:2px;
  color:var(--slv2-ink-4); font-size:11px; font-style:normal; line-height:1.45;
}
.v2-pdp-root .pdp-deliver__methods {
  margin:0; padding:0 0 14px; list-style:none;
  display:grid; gap:7px;
}
.v2-pdp-root .pdp-deliver__method {
  display:grid; grid-template-columns:minmax(72px, auto) minmax(0, 1fr) auto;
  align-items:baseline; gap:10px;
}
.v2-pdp-root .pdp-deliver__label { color:var(--slv2-ink); font-size:12px; font-weight:600; }
.v2-pdp-root .pdp-deliver__eta { color:var(--slv2-ink-4); font-size:11px; }
.v2-pdp-root .pdp-deliver__fee {
  color:var(--slv2-ink-2); font-size:12px; font-weight:600;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.v2-pdp-root .pdp-deliver__fee.is-free {
  color:var(--slv2-save); letter-spacing:.04em; text-transform:uppercase; font-size:11px;
}

/* --------------------------------------------------------- purchase bar */
/* Above the bottom navigation, not on top of it. The tab bar owns the very
   bottom of the screen and its own safe-area padding; this bar stacks on it. */
@media (max-width:900px) {
  .v2-pdp-root .buybar {
    inset:auto 0 0 0;
    min-height:var(--pdp-buybar-h);
    padding:8px var(--slv2-gutter) calc(8px + env(safe-area-inset-bottom));
    /* No blur. The bar is an opaque shelf; a translucent one over moving
       product photography is the glassmorphism this design does not use. */
    background:var(--slv2-paper);
    -webkit-backdrop-filter:none; backdrop-filter:none;
    border-top:1px solid var(--slv2-line);
    box-shadow:var(--slv2-sh-up);
  }
  /* Reserve the bar's full height so the last content block scrolls clear of
     it rather than ending underneath.

     The reserve sits on the PDP root itself, not on a body:has(...) rule
     targeting .page-main. Three sheets already aim overlapping :has() rules at
     that one shared element — layout.css, pdp.css and v2-mobile-cart.css each
     set a different padding-bottom on it — and the measured result on this
     page was 0px from all of them. The PDP owns its own bottom spacing here,
     which is one rule, local, and verifiable by looking at the page. */
  .v2-pdp-root {
    padding-bottom:calc(var(--pdp-buybar-h) + env(safe-area-inset-bottom));
  }
  body:has(.v2-pdp-root .buybar) .ftr {
    padding-bottom:calc(var(--pdp-buybar-h) + env(safe-area-inset-bottom) + var(--sp-4, 16px));
    margin-bottom:0;
  }
  html:has(.v2-pdp-root .buybar) {
    scroll-padding-bottom:calc(var(--pdp-buybar-h) + env(safe-area-inset-bottom));
  }
}

/* ------------------------------------------------------------- desktop */
@media (min-width:901px) {
  .v2-pdp-root { --pdp-arc:8%; }
  /* The gold rule over the buying column was the only thing separating it
     from the gallery, and it read as a divider looking for a section. The
     column is separated by space now. */
  .v2-pdp-root .pdp__info { padding-top:6px; border-top:0; }
  .v2-pdp-root .pdp__title { max-width:16ch; font-size:38px; }
  .v2-pdp-root .pdp__price { margin-top:16px; padding-block:0; }
  .v2-pdp-root .pdp__price .v2-price__now { font-size:33px; }
  .v2-pdp-root .pdp__main { border:0; }
}

@media (prefers-reduced-motion:reduce) {
  .v2-pdp-root .pdp__frame-fade { animation:none; }
}

/* ---------------------------------------------------- buy-action hierarchy */
/* Add to cart is the primary action and must look like it. "Buy it now" was
   rendering as a filled gold block — the storefront theme maps the secondary
   button background to the brand accent — so the secondary action was the
   loudest thing in the buying column and the two read as equals competing.
   Scoped to the PDP: the filled treatment is right elsewhere, where it is the
   only button on screen. */
.v2-pdp-root .pdp__buynow,
.v2-pdp-root .pdp__buynow:hover {
  background:transparent;
  color:var(--slv2-accent-primary);
  border:1px solid var(--slv2-accent-primary);
  filter:none;
}
.v2-pdp-root .pdp__buynow:hover { background:var(--slv2-f50); }
.v2-pdp-root .buybar__buy,
.v2-pdp-root .buybar__buy:hover {
  background:transparent;
  color:var(--slv2-accent-primary);
  border:1px solid var(--slv2-accent-primary);
}

/* -------------------------------------------------- cross-sell row at 390 */
/* Three items plus their two separators came to ~389px inside a 358px content
   width, so the first card was always cut off at the left edge and the row
   read as broken rather than as scrollable. */
@media (max-width:430px) {
  .v2-pdp-root .fbt__item { flex:0 0 92px; width:92px; }
  .v2-pdp-root .fbt__items { gap:7px; }
}

/* --------------------------------------------------------- desktop flow */
@media (min-width:901px) {
  /* The information column was centred in the 1240px wrap while the hero above
     it started at the wrap's left edge, so the page stepped inwards halfway
     down for no reason.

     Zeroing the inline margin fixed the symptom and introduced a worse one:
     .pdp-flow IS a .v2-wrap, so removing its auto margins dropped it to the
     container's padding edge at x=24 while the hero stayed at x=100 — it now
     stepped OUT instead of in. The right fix is to stop narrowing it at all
     and let it be the same wrap the hero is; the reading measure is capped on
     the text itself, which is where a measure belongs. */
  .v2-pdp-root .pdp-flow { max-width:var(--slv2-container); margin-inline:auto; }
}

/* ==========================================================================
   RUN A — content-led PDP
   The page finally has benefits, ingredients, directions and specifications
   to show. These rules are about making that content readable, and about
   keeping it out of bordered boxes: spacing, rules and type weight do the
   separating.
   ========================================================================== */

/* --------------------------------------------------------------- title */
.v2-pdp-root .pdp__net {
  color: var(--slv2-ink-4);
  font-family: var(--slv2-sans);
  font-size: .52em;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
}

/* Stars, score, count — one quiet line under the name. Four of 164 products
   have a rating, so this is absent far more often than present and must not
   leave a gap behind. */
.v2-pdp-root .pdp-rating {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 9px 0 0; padding: 0;
  border: 0; background: none;
  color: var(--slv2-ink-2); text-decoration: none; font-size: 12.5px;
}
.v2-pdp-root .pdp-rating__stars { display: inline-flex; gap: 1px; }
.v2-pdp-root .pdp-rating__stars .s-full { color: var(--slv2-star); }
.v2-pdp-root .pdp-rating__stars .s-empty { color: var(--slv2-line); }
.v2-pdp-root .pdp-rating__score { color: var(--slv2-ink); font-weight: 700; }
.v2-pdp-root .pdp-rating__score span { color: var(--slv2-ink-4); font-weight: 500; }
.v2-pdp-root .pdp-rating__count { color: var(--slv2-ink-4); }
.v2-pdp-root .pdp-rating__count::before { content: none; }
.v2-pdp-root .pdp-rating:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The discount reads as a saving, so it is the one green thing in the row. */
.v2-pdp-root .pdp__price .v2-price__off {
  background: var(--slv2-f100);
  color: var(--slv2-save);
}

/* ------------------------------------------------------------- claims */
.v2-pdp-root .pdp-claims {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 12px 0 0; padding: 0; list-style: none;
}
.v2-pdp-root .pdp-claims__pill {
  padding: 4px 9px;
  border: 1px solid var(--slv2-line);
  border-radius: 999px;
  background: var(--slv2-paper);
  color: var(--slv2-ink-2);
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
}

/* ------------------------------------------------------ variant cards */
.v2-pdp-root .variantlist {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  margin-top: 8px;
}
.v2-pdp-root .variantchip {
  position: relative;
  display: grid; gap: 2px; justify-items: start;
  padding: 10px 11px 10px 30px;
  border: 1px solid var(--slv2-line);
  border-radius: var(--slv2-r-art);
  background: var(--slv2-paper);
  text-align: left;
  transition: border-color .16s ease, background .16s ease;
}
.v2-pdp-root .variantchip.active {
  border-color: var(--slv2-accent-primary);
  box-shadow: inset 0 0 0 1px var(--slv2-accent-primary);
  background: var(--slv2-f50);
}
/* The tick is always in the layout, empty when unselected, so choosing a pack
   cannot shift the card's text sideways. */
.v2-pdp-root .variantchip__tick {
  position: absolute; left: 10px; top: 11px;
  display: grid; place-items: center;
  width: 14px; height: 14px;
  border: 1px solid var(--slv2-line-2); border-radius: 999px;
  color: #FBF8F1;
}
.v2-pdp-root .variantchip.active .variantchip__tick {
  border-color: var(--slv2-accent-primary);
  background: var(--slv2-accent-primary);
}
.v2-pdp-root .variantchip__label { color: var(--slv2-ink); font-size: 12.5px; font-weight: 700; }
.v2-pdp-root .variantchip__price {
  display: flex; align-items: baseline; gap: 5px;
  color: var(--slv2-price); font-size: 13px; font-weight: 600;
}
.v2-pdp-root .variantchip__price s { color: var(--slv2-price-mrp); font-size: 11px; font-weight: 500; }
.v2-pdp-root .variantchip__off { color: var(--slv2-save); font-size: 10.5px; font-weight: 700; }
.v2-pdp-root .variantchip__unit { color: var(--slv2-ink-4); font-size: 10.5px; font-variant-numeric: tabular-nums; }
/* Out of stock stays visible and readable — greying it into illegibility hides
   the fact that the pack exists at all, which is information. */
.v2-pdp-root .variantchip.is-out {
  border-style: dashed; background: transparent; cursor: not-allowed;
}
.v2-pdp-root .variantchip.is-out .variantchip__label,
.v2-pdp-root .variantchip.is-out .variantchip__price { color: var(--slv2-ink-4); }
.v2-pdp-root .variantchip.is-out .variantchip__price s { text-decoration-color: var(--slv2-ink-4); }
.v2-pdp-root .variantchip__out {
  color: var(--slv2-alert); font-size: 10px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}

/* ------------------------------------------------------------ pincode */
.v2-pdp-root .pdp-deliver__pin { display: flex; gap: 8px; margin: 0 0 10px; }
.v2-pdp-root .pdp-deliver__pininput {
  flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 11px;
  border: 1px solid var(--slv2-line); border-radius: var(--slv2-r-ui);
  background: var(--slv2-paper);
  color: var(--slv2-ink); font-family: var(--slv2-sans); font-size: 13px;
  letter-spacing: .06em;
}
.v2-pdp-root .pdp-deliver__pininput:focus-visible {
  outline: 2px solid var(--slv2-accent-primary); outline-offset: 1px;
}
.v2-pdp-root .pdp-deliver__pinbtn {
  flex: 0 0 auto; height: 40px; padding: 0 16px;
  border: 1px solid var(--slv2-accent-primary); border-radius: var(--slv2-r-ui);
  background: transparent; color: var(--slv2-accent-primary);
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  cursor: pointer;
}
.v2-pdp-root .pdp-deliver__pinbtn:disabled { opacity: .45; cursor: not-allowed; }
.v2-pdp-root .pdp-deliver__pinmsg { margin: 0 0 10px; font-size: 11.5px; line-height: 1.5; }
.v2-pdp-root .pdp-deliver__pinmsg.is-ok { color: var(--slv2-save); }
.v2-pdp-root .pdp-deliver__pinmsg.is-bad { color: var(--slv2-alert); }

/* -------------------------------------------------------------- about */
.v2-pdp-root .pdp-about__text {
  max-width: 68ch; margin: 0;
  color: var(--slv2-ink-2); font-size: 14px; line-height: 1.72;
  /* The ingest stores the description with its paragraph breaks intact as
     blank lines. Without pre-line a thousand-character description arrives as
     one unbroken slab. */
  white-space: pre-line;
}

/* ----------------------------------------------------------- benefits */
/* A list with hairlines, not a grid of bordered cards. */
.v2-pdp-root .pdp-benefits__list { margin: 0; padding: 0; list-style: none; }
.v2-pdp-root .pdp-benefits__row {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px;
  padding: 12px 0;
}
.v2-pdp-root .pdp-benefits__row + .pdp-benefits__row { border-top: 1px solid var(--slv2-line-2); }
.v2-pdp-root .pdp-benefits__ic {
  display: grid; place-items: center;
  width: 22px; height: 22px; margin-top: 1px;
  border-radius: 999px; background: var(--slv2-f50); color: var(--slv2-accent-primary);
}
.v2-pdp-root .pdp-benefits__body strong {
  display: block; color: var(--slv2-ink); font-size: 13px; font-weight: 700; line-height: 1.35;
}
.v2-pdp-root .pdp-benefits__body p {
  margin: 3px 0 0; color: var(--slv2-ink-3); font-size: 12.5px; line-height: 1.6;
}

/* -------------------------------------------------------- ingredients */
.v2-pdp-root .pdp-ingredients__list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
.v2-pdp-root .pdp-ingredients__list.is-single { grid-template-columns: minmax(0, 1fr); }
.v2-pdp-root .pdp-ingredients__card {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 9px; align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--slv2-line-2); border-radius: var(--slv2-r-art);
  background: var(--slv2-paper);
}
.v2-pdp-root .pdp-ingredients__ic {
  display: grid; place-items: center; overflow: hidden;
  width: 34px; height: 34px;
  border-radius: 999px; background: var(--slv2-f50); color: var(--slv2-accent-primary);
}
.v2-pdp-root .pdp-ingredients__ic img { width: 100%; height: 100%; object-fit: cover; }
.v2-pdp-root .pdp-ingredients__body strong {
  display: block; color: var(--slv2-ink); font-size: 12px; font-weight: 600; line-height: 1.3;
}
.v2-pdp-root .pdp-ingredients__body p {
  margin: 2px 0 0; color: var(--slv2-ink-4); font-size: 11px; line-height: 1.45;
}

/* --------------------------------------------------------- how to use */
.v2-pdp-root .pdp-howto__steps {
  margin: 0; padding: 0; list-style: none;
  counter-reset: pdp-step;
}
.v2-pdp-root .pdp-howto__step {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 11px;
  padding: 11px 0;
}
.v2-pdp-root .pdp-howto__step + .pdp-howto__step { border-top: 1px solid var(--slv2-line-2); }
.v2-pdp-root .pdp-howto__num {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 999px;
  background: var(--slv2-accent-primary); color: #FBF8F1;
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.v2-pdp-root .pdp-howto__step p {
  margin: 2px 0 0; color: var(--slv2-ink-2); font-size: 13px; line-height: 1.6;
}

/* ----------------------------------------------------- specifications */
/* Two columns and a hairline. No panel, no border around the block. */
.v2-pdp-root .pdp-specs__table { margin: 0; }
.v2-pdp-root .pdp-specs__row {
  display: grid; grid-template-columns: minmax(90px, 38%) minmax(0, 1fr); gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--slv2-line-2);
}
.v2-pdp-root .pdp-specs__row:first-child { border-top: 0; }
.v2-pdp-root .pdp-specs__table dt { color: var(--slv2-ink-4); font-size: 12px; }
.v2-pdp-root .pdp-specs__table dd {
  margin: 0; color: var(--slv2-ink); font-size: 12.5px; font-weight: 600;
}

/* ------------------------------------------------------------ desktop */
@media (min-width: 901px) {
  .v2-pdp-root .pdp-about__text { font-size: 15px; }
  .v2-pdp-root .pdp-ingredients__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .v2-pdp-root .variantlist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v2-pdp-root .pdp-specs__row { grid-template-columns: minmax(140px, 26%) minmax(0, 1fr); }
}