/* ybace PDP — The Back Seat Platform (preview). Uses v3 tokens only; spec §4.6 / §6.2. */
.tag{justify-self:start;display:inline-block;font:600 11px/1 var(--font-text);letter-spacing:.12em;text-transform:uppercase;color:var(--color-pine);background:var(--color-pine-100);padding:6px 8px;border-radius:var(--radius-xs)}
.center{text-align:center}

/* Diagram frames */
.frame.is-diagram{background:var(--color-sand);display:grid;place-items:center}
.frame.is-white{background:var(--surface-raised);border:var(--border-hairline)}
.section--white .frame.is-diagram.is-white{background:var(--surface-page)}
.frame .diagram{width:100%;height:100%}

/* Breadcrumb */
.crumbs{display:flex;flex-wrap:wrap;gap:var(--space-2);padding-block:var(--space-4);font-size:var(--fs-body-sm);color:var(--color-muted)}
.crumbs a{color:inherit;text-underline-offset:3px}
.crumbs a:hover{color:var(--color-ink)}

/* PDP grid */
.pdp{padding-block:var(--space-2) var(--section-y)}
.pdp__gallery,.buybox{grid-column:1/-1;min-width:0}
@media (min-width:1024px){
  .pdp__gallery{grid-column:1/8}
  .buybox{grid-column:9/13}
}

/* Gallery: desktop = 4:5 + 2-up 1:1; mobile = full-bleed scroll-snap carousel */
.gallery{position:relative}
.gallery__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);margin-top:var(--space-2)}
.gallery__count{display:none}
.gallery__note{margin-top:var(--space-4)}
@media (max-width:1023.98px){
  .gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--space-2);margin-inline:calc(-1*var(--page-margin));padding-inline:var(--page-margin);scroll-padding-inline:var(--page-margin);scrollbar-width:none}
  .gallery::-webkit-scrollbar{display:none}
  .gallery__grid{display:contents}
  .gallery>figure,.gallery__grid>figure{flex:0 0 86%;scroll-snap-align:start;aspect-ratio:4/5;margin:0}
  .pdp__gallery{position:relative}
  .gallery__count{display:block;position:absolute;top:var(--space-3);right:var(--space-3);margin:0;min-width:56px;text-align:center;padding:4px 10px;border-radius:var(--radius-pill);background:rgb(28 31 27/.72);color:var(--color-on-dark);font:500 13px/1.3 var(--font-text);font-variant-numeric:tabular-nums;pointer-events:none}
}
@media (min-width:768px) and (max-width:1023.98px){.gallery>figure,.gallery__grid>figure{flex-basis:56%}}

/* Buy box */
.buybox{display:grid;gap:var(--space-6);align-content:start;margin-top:var(--space-8)}
@media (min-width:1024px){.buybox{position:sticky;top:calc(var(--header-h) + var(--space-6));margin-top:0}}
.buybox h1{margin-top:calc(-1*var(--space-3))}
.buybox__price{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);padding-bottom:var(--space-5);border-bottom:var(--border-hairline);margin-top:calc(-1*var(--space-2))}
.price{margin:0;font:500 var(--fs-price)/1 var(--font-text);letter-spacing:-.01em;font-variant-numeric:tabular-nums lining-nums}
.buybox__desc{color:var(--color-ink-2)}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;margin:0;padding:0}
.chips li{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border:var(--border-hairline);border-radius:var(--radius-pill);font:500 14px/1 var(--font-text);background:var(--surface-raised)}

/* Option cards */
.opts{border:0;margin:0;padding:0;display:grid;gap:var(--space-3);min-width:0}
.opts legend{font:600 15px/1.2 var(--font-text);margin-bottom:var(--space-3);padding:0}
.opt{position:relative;display:block;cursor:pointer}
.opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.opt__card{display:grid;gap:var(--space-1);padding:var(--space-4) var(--space-5);border:var(--border-control);border-radius:var(--radius-md);background:var(--surface-raised);transition:border-color var(--dur-base) var(--ease-standard),background-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
.opt:hover .opt__card{border-color:var(--color-ink)}
.opt input:checked+.opt__card{background:var(--color-pine-100);border-color:var(--color-pine);box-shadow:inset 0 0 0 1px var(--color-pine)}
.opt input:focus-visible+.opt__card{outline:2px solid var(--focus-ring);outline-offset:3px}
.opt__top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4)}
.opt__top b{font:600 16px/1.3 var(--font-text)}
.opt__price{font:500 17px/1 var(--font-text);font-variant-numeric:tabular-nums}

.buybox__cta{display:grid;gap:var(--space-3)}
.trust-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3);font-size:var(--fs-body-sm)}
.trust-list li{display:flex;gap:var(--space-3);align-items:center}
.trust-list li::before{content:"";width:18px;height:18px;flex:none;border-radius:50%;background:var(--color-pine-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322392F' stroke-width='2.4'%3E%3Cpath d='M7 12.5l3 3 7-7'/%3E%3C/svg%3E") center/12px no-repeat}
.buybox__acc .faq__item summary{min-height:56px;padding-block:var(--space-4);font-size:16px;font-weight:600}
.buybox__acc .faq__a{font-size:var(--fs-body-sm);padding-bottom:var(--space-5)}
.inbox{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-1)}
.inbox li::before{content:"— ";color:var(--color-muted)}

/* How it works */
.how{align-items:center}
.how__media,.how__copy{grid-column:1/-1}
@media (min-width:1024px){.how__media{grid-column:1/7}.how__copy{grid-column:8/13}}
.keylist{list-style:none;margin:var(--space-10) 0 0;padding:0;display:grid}
.keylist li{display:grid;grid-template-columns:28px 1fr;gap:var(--space-4);padding-block:var(--space-5);border-top:var(--border-hairline)}
.keylist li:last-child{border-bottom:var(--border-hairline)}
.keylist b{font:600 16px/1.3 var(--font-text);display:block;margin-bottom:var(--space-1)}
.keylist__n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--color-clay);color:#fff;font:600 13px/1 var(--font-text)}

/* Sets */
.sets{display:grid;gap:var(--gutter);grid-template-columns:1fr}
@media (min-width:768px){.sets{grid-template-columns:1fr 1fr}}
.set{display:grid;grid-template-rows:auto auto 1fr auto;gap:var(--space-4);padding:var(--space-8);background:var(--surface-raised);border:var(--border-hairline);border-radius:var(--radius-md)}
.set--kit{border-color:var(--color-pine);box-shadow:inset 0 0 0 1px var(--color-pine)}
.set__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);padding-bottom:var(--space-4);border-bottom:var(--border-hairline)}
.set__price{font:500 var(--fs-price)/1 var(--font-text);font-variant-numeric:tabular-nums}
.set__list{list-style:none;margin:0 0 var(--space-4);padding:0;display:grid;gap:var(--space-4);align-content:start}
.set__list li{display:grid;grid-template-columns:24px 1fr;gap:var(--space-3);align-items:start;font-weight:500}
.set__list svg{width:24px;height:24px;color:var(--color-pine)}
.set__list small{display:block;font-weight:400;margin-top:2px}

/* Fit */
.fit{align-items:center}
.fit__copy,.fit__media{grid-column:1/-1}
@media (min-width:1024px){.fit__copy{grid-column:1/6}.fit__media{grid-column:7/13}}
.steps{list-style:none;margin:var(--space-8) 0 0;padding:0;display:grid}
.steps li{display:grid;gap:var(--space-1);padding-block:var(--space-4);border-top:1px solid rgb(28 31 27/.12)}
.steps li:last-child{border-bottom:1px solid rgb(28 31 27/.12)}
.steps b{font:600 15px/1.3 var(--font-text);color:var(--color-clay)}
.steps span{color:var(--color-ink-2)}

/* Specs */
.specs__head,.specs__list{grid-column:1/-1}
@media (min-width:1024px){.specs__head{grid-column:1/5}.specs__list{grid-column:6/13}}
.specs__list{margin:0;display:grid}
.specs__list div{display:grid;grid-template-columns:1fr;gap:var(--space-1);padding-block:var(--space-4);border-bottom:var(--border-hairline);min-height:56px;align-items:center}
.specs__list div:first-child{border-top:var(--border-hairline)}
@media (min-width:768px){.specs__list div{grid-template-columns:2fr 3fr;gap:var(--space-6)}}
.specs__list dt{font:500 15px/1.4 var(--font-text)}
.specs__list dd{margin:0;font-size:15px;color:var(--color-ink-2)}

/* Safety */
.safety__head,.safety__copy{grid-column:1/-1}
@media (min-width:1024px){.safety__head{grid-column:1/6}.safety__copy{grid-column:7/13;align-self:end}}
.safety .lead{max-width:none}

/* PDP FAQ */
.pdp-faq__head,.pdp-faq__list{grid-column:1/-1}
@media (min-width:1024px){.pdp-faq__head{grid-column:1/5;align-self:start}.pdp-faq__list{grid-column:6/13}}

.end-cta{display:flex;flex-wrap:wrap;gap:var(--space-3)}
@media (max-width:479.98px){.end-cta .btn{width:100%}}

/* Mobile sticky buy bar */
.buybar{position:fixed;inset:auto 0 0;z-index:var(--z-sticky-buy);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) var(--page-margin) calc(var(--space-3) + env(safe-area-inset-bottom));background:var(--surface-raised);box-shadow:var(--shadow-2);transform:translateY(110%);transition:transform var(--dur-base) var(--ease-out)}
.buybar.is-visible{transform:none}
.buybar__txt{display:grid;gap:2px;font-size:15px}
.buybar__txt .meta{font-size:13px}
@media (min-width:1024px){.buybar{display:none}}

/* Home spotlight (preview) */
.spot__grid{align-items:center}
.spot__media,.spot__copy{grid-column:1/-1}
.spot__copy{display:grid;gap:var(--space-5);justify-items:start}
@media (min-width:1024px){.spot__media{grid-column:1/7}.spot__copy{grid-column:8/13}}
.spot__price{font:500 var(--fs-title)/1.3 var(--font-text);font-variant-numeric:tabular-nums}
.spot__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-6);margin-top:var(--space-2)}