/* ==========================================================================
   Osevaro product page (mockup) - page-only styles on top of ds/osevaro.css
   Rules kept: text never on paint or photos; one shell width; pets never
   touch text (room reserved above and inside every host); no wash wrapper
   gets transform/opacity/filter/isolation/z-index.
   Gallery, lightbox, bottom sheet, buy bar, doorway art and nest are DS
   components now; only page composition and PDP-specific parts live here.
   ========================================================================== */

/* --------------------------------------------------------------- hero grid */
.pdp-hero {
  display: grid;
  grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  gap: clamp(32px, 4.4vw, 72px);
  align-items: start;
  padding-top: clamp(14px, 1.8vw, 28px);
}
@media (max-width: 999.98px) {
  .pdp-hero { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: 28px; }
}
@media (max-width: 767.98px) {
  .pdp-hero { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 6px; }
}
/* tablets: the buy box is much taller than the photos, so the gallery stays in
   view beside it. Sticky makes its own stacking context, so it carries a paper
   backdrop for anything that multiplies inside it (the product photos do). */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .pdp-hero__media { position: sticky; top: calc(var(--header-h) + 28px); background: var(--paper); }
}

/* ----------------------------------------------------------------- gallery
   The product photo is the main selling element: rounded corners, no painted
   frame (retired 10 Oct, round 2), in both watercolour modes. The thumbnails
   line up with the photo's edges. */
/* the keyboard ring is drawn inside the track (DS), so give it the stage's corners */
.gallery__track { border-radius: inherit; }
/* selected thumbnail: an ink ring outside the thumb with a paper gap, so it
   reads in dark mode too (the DS inset ring is fixed ink) */
.gallery__thumb[aria-current="true"] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }

/* ----------------------------------------------------------------- buy box */
.buy { display: flex; flex-direction: column; min-width: 0; padding-top: 2px; }
.buy__crumbs { margin-bottom: 16px; }
.buy__crumbs .crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.buy__crumbs [aria-current="page"] { color: var(--ink-soft); }
/* phones: the main way back, so a real 44px target in plain words */
.buy__back {
  display: none; align-self: flex-start; align-items: center; gap: 6px;
  min-height: 44px; margin: -4px 0 2px;
  font-size: 15px; font-weight: 600; line-height: 1.3; text-transform: none; letter-spacing: 0;
  color: var(--ink); text-decoration: none;
}
.buy__back .ic { --ic-size: 20px; margin-left: -4px; }
.buy__back .eyebrow__dot { width: 14px; height: 14px; flex: none; }
@media (hover: hover) and (pointer: fine) { .buy__back:hover > span[data-when-product] { text-decoration: underline; text-underline-offset: .2em; } }
.buy__title { max-width: 18em; }
.buy__tagline { margin-top: 10px; max-width: 40ch; }
.buy__price { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.buy__swatches { margin-top: 22px; }
.buy__fit { margin-top: 20px; }
.buy__fit .ic { --ic-size: 20px; }
.buy__cta { margin-top: 22px; container-type: inline-size; }
/* after a sign-up the thank-you replaces the "opens soon" note */
.buy__notify:has(> [data-notify-done]:not([hidden])) > .note { display: none; }
.buy__open .btn--cta { flex: 1 1 auto; }
/* delivery and returns: the buy box pet SITS ON the card's top edge, in front of it
   (app fix round 2; no peeking pet here). .pet-room keeps room above the card for
   all of the pet plus a 16px gap, so it never touches the action above:
   pet height x (1 - sink) - 4px rest + 16px. --buy-pet-w is the pet's width (the
   pet reads it), --buy-pet-ar its height / width: groomed dog 320/296, kitten 260/320,
   --buy-pet-sink 1 - its --pet-sink. */
.buy__assure { --buy-pet-w: clamp(56px, 6vw, 72px); --buy-pet-ar: 1.081; --buy-pet-sink: .975; --pet-room: calc(var(--buy-pet-w) * var(--buy-pet-ar) * var(--buy-pet-sink) + 12px); }
/* the kitten lies on its back, so it is drawn wider to stand about as tall as the dog */
html:is([data-product="814"], [data-product="815"]) .buy__assure { --buy-pet-w: clamp(68px, 7.5vw, 88px); --buy-pet-ar: .8125; --buy-pet-sink: .97; }
.buy__assure .assure { position: relative; }
@media (max-width: 767.98px) {
  .buy__crumbs { display: none; }
  .buy__back { display: inline-flex; }
  .buy__price { margin-top: 12px; }
  .buy__tagline { margin-top: 6px; }
  .buy__swatches { margin-top: 16px; }
  .buy__fit { margin-top: 16px; }
}

/* closed: the email field and its coral submit are the action from the start
   (one step, one main button). Phones stack them; the error sits under the
   field, above the button. */
.buy__notify .notify__form { padding: 16px; container-type: inline-size; }
/* narrow buy box (phones, and the 45% column on small tablets): stack them,
   so the field keeps a usable width */
@container (min-width: 340px) {
  .buy__notify .notify__row { flex-direction: row; }
}
@container (max-width: 339.98px) {
  .buy__notify .notify__row { display: contents; }
  .buy__notify .field__error { order: 2; }
  .buy__notify .notify__row .btn { order: 3; margin-top: 4px; }
}

/* open: Woo-shaped form.cart, a real number input inside the stepper */
.qty__input {
  width: 40px; height: 100%; padding: 0; border: 0; background: none; color: var(--ink);
  text-align: center; font: inherit; font-weight: 700; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty__input:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: 8px; }
/* the price is right above: narrow buy boxes keep the button to "Add to basket" */
@container (max-width: 399.98px) {
  .buy__addprice { display: none; }
}
@media (max-width: 339.98px) {
  .buy__open { flex-wrap: wrap; }
  .buy__open .btn--cta { flex-basis: 100%; }
}

/* ------------------------------------------------------------- At a glance */
.pdp-glance { padding-top: clamp(32px, 4vw, 56px); }
.pdp-glance__card {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
  padding: 20px clamp(20px, 2.4vw, 32px) 22px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
}
.pdp-glance__title { margin: 0; }
.pdp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0; }
.pdp-fact { padding: 2px clamp(14px, 1.6vw, 24px); border-left: 1px solid var(--line); min-width: 0; }
.pdp-fact:first-child { border-left: 0; padding-left: 0; }
.nw { white-space: nowrap; }
.pdp-fact dt { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.3; }
.pdp-fact dd { margin: 4px 0 0; font-size: 17px; font-weight: 650; line-height: 1.35; }
.pdp-fact__sub { display: block; margin-top: 2px; font-size: 15px; font-weight: 400; color: var(--ink-soft); }
@media (max-width: 899.98px) {
  .pdp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .pdp-fact { border-left: 0; border-top: 1px solid var(--line); padding: 12px 0; }
  .pdp-fact:first-child { padding-left: 0; }
}
@media (min-width: 600px) and (max-width: 899.98px) {
  .pdp-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ------------------------------------------------------ Why they'll love it */
.pdp-love__room { height: max(0px, var(--room, 0px) - var(--section)); }
.pdp-love__card .sec-head { margin-bottom: clamp(24px, 3vw, 36px); }
.pdp-features { --grid-gap: clamp(24px, 3vw, 40px); }
html[data-product="814"] .pdp-love__card { padding-top: clamp(52px, 4.6vw, 64px); }
/* tablets: three features never fall into a 2 + 1 grid; they use the phone
   layout (icon left, words right) in one column */
@media (min-width: 600px) and (max-width: 899.98px) {
  .pdp-features.grid--3 { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .pdp-features .feature { flex-direction: row; gap: 18px; align-items: center; }
  .pdp-features .feature .wash-icon { --wash-size: 72px; }
  .pdp-features .feature__text { max-width: var(--measure); }
}
@media (max-width: 599.98px) {
  .pdp-features { gap: 20px; }
  .pdp-features .feature .wash-icon { --wash-size: 56px; }
}

/* ------------------------------------------- split sections (details, FAQ) */
.pdp-split {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(32px, 5vw, 96px); align-items: start;
}
.pdp-split > .acc, .pdp-split__main { min-width: 0; }
.pdp-split__aside { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.pdp-split__aside .sec-head { margin-bottom: 4px; }
@media (min-width: 900px) {
  /* sticky = its own stacking context: paper behind the nest's multiply paint */
  .pdp-split__aside { position: sticky; top: calc(var(--header-h) + 40px); background: var(--paper); }
}
@media (max-width: 899.98px) {
  .pdp-split { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pdp-split__aside { gap: 14px; }
  .pdp-split__aside .nest { display: none; }
}
.pdp-helpcard {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 20px; border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--card);
}
.pdp-helpcard .btn { margin-top: 6px; }
.pdp-split__aside .nest { margin-top: 12px; }
#details .pdp-helpcard { max-width: 380px; }
@media (max-width: 899.98px) { #details .pdp-helpcard { display: none; } }

/* reviews while there are none: one quiet row under the details */
.pdp-reviewrow {
  display: flex; align-items: center; gap: 18px; margin-top: 28px;
  padding: 14px 20px 14px 14px; border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--card);
}
.pdp-reviewrow__pet { flex: none; width: 84px; }
.pdp-reviewrow__pet img { width: 100%; height: auto; }
.pdp-reviewrow__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pdp-reviewrow__text p { color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
@media (max-width: 599.98px) {
  .pdp-reviewrow { gap: 14px; padding-right: 16px; }
  .pdp-reviewrow__pet { width: 64px; }
}

/* accordion contents (the DS keeps panel text to --measure) */
.pdp-steps { counter-reset: step; display: grid; gap: 10px; }
.pdp-steps li { counter-increment: step; display: flex; gap: 12px; align-items: flex-start; }
.pdp-steps li::before {
  content: counter(step); flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%; margin-top: -1px;
  background: var(--linen); color: var(--ink); font-size: 14px; font-weight: 700;
}
.pdp-panel-imgs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.pdp-panel-img { margin: 0; flex: 1 1 220px; max-width: 360px; border-radius: 16px; overflow: hidden; background: var(--well); }
.pdp-panel-img img { width: 100%; height: auto; mix-blend-mode: multiply; }
.pdp-tbc-list { display: grid; gap: 14px; }
.pdp-tbc-list li { display: flex; gap: 12px; align-items: flex-start; }
.pdp-tbc-list .ic { --ic-size: 22px; margin-top: 2px; color: var(--accent-text); }
.pdp-tbc-list strong { display: block; font-weight: 650; }

/* Size and fit partial (accordion on desktop, bottom sheet on phones).
   Every pet stays at full ink and colour; the state is said in words. */
.pdp-size { display: flex; flex-direction: column; gap: 18px; }
.pdp-size > * + * { margin-top: 0; }
.pdp-scale-wrap { padding: 14px 14px 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.pdp-scale__title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.pdp-scale { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pdp-scale__item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 6px 12px; border-radius: 14px; text-align: center; }
.pdp-scale__item.is-fit { background: var(--linen); }
.pdp-scale__art { display: flex; align-items: flex-end; justify-content: center; height: 96px; }
.pdp-scale__art img { height: var(--h, 60px); width: auto; max-width: none; }
.pdp-scale__label { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.3; }
.pdp-scale__name { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 15px; font-weight: 600; color: var(--ink); }
.pdp-scale__item.is-fit .pdp-scale__name { font-weight: 700; }
.pdp-scale__name .ic { --ic-size: 16px; color: var(--accent-text); }
.pdp-scale__state { font-size: 14px; color: var(--ink-soft); }
.pdp-scale__item.is-fit .pdp-scale__state { color: var(--accent-text); font-weight: 600; }
.pdp-size .table .unit { display: none; }
@media (max-width: 599.98px) {
  /* size table as stacked rows: measure, then cm and inches side by side */
  .pdp-size .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pdp-size .table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .pdp-size .table th, .pdp-size .table td { padding: 0; border: 0; }
  .pdp-size .table th[scope="row"] { grid-column: 1 / -1; }
  .pdp-size .table .unit { display: inline; }
}
/* small phones (and the size sheet): a 2 x 2 scale, so labels never collide */
@media (max-width: 420px) {
  .pdp-scale { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdp-scale__art { height: 92px; }
}

/* -------------------------------------------- Chosen with them in mind */
.pdp-story__grid {
  display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  gap: clamp(32px, 7vw, 120px); align-items: center;
}
.pdp-story__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.pdp-story__copy .h2 { font-size: clamp(24px, 1.4vw + 14px, 36px); max-width: 16em; }
.pdp-story__copy .prose { max-width: 46ch; font-size: var(--fs-lead); color: var(--ink-soft); }
.pdp-credit { font-size: 13px; color: var(--ink-soft); }
.pdp-story__photo { min-width: 0; }
html[data-wash="rich"] .pdp-story__photo { margin-top: var(--story-room, 120px); }   /* the whole perched pet shows above the photo */
/* chosen.json: the duvet photo is slightly cool; warm it a touch here, never in the file */
.pdp-story__grid[data-when-product="815"] .framed__photo { filter: sepia(.1) saturate(1.04); }
@media (max-width: 899.98px) {
  .pdp-story__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pdp-story__photo { max-width: 460px; }
}

/* ------------------------------------------------------------------ related
   Desktop: the heading takes the first of four columns, then two product
   cards and the doorway, all the size of a shop card. */
.pdp-related__grid { margin-top: 28px; }
@media (min-width: 700px) {
  .pdp-related__grid.grid--products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  .pdp-related {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    gap: var(--grid-gap, 24px); align-items: start;
  }
  .pdp-related__head { margin: 0; padding-top: 8px; }
  .pdp-related__grid { margin-top: 0; }
}
@media (max-width: 699.98px) {
  .pdp-related__door { grid-column: 1 / -1; }
}
/* the doorway: art on top, filling the card's height, words at the foot */
@media (min-width: 700px) {
  .pdp-related__door .door--art { flex-direction: column; align-items: stretch; }
  .pdp-related__door .door--art .door__art { width: 100%; flex: 1 1 auto; aspect-ratio: auto; min-height: 200px; }
  /* the name gets the full width; the arrow sits beside the last line */
  .pdp-related__door .door--art .door__body {
    flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end;
    gap: 6px 16px; padding: 16px 8px 6px;
  }
  .pdp-related__door .door__words { display: contents; }
  .pdp-related__door .door__words > * { grid-column: 1 / -1; }
  .pdp-related__door .door__words > .small { grid-column: 1; }
  .pdp-related__door .door__arrow { grid-column: 2; grid-row: 3; }
  .pdp-related__door .door__name { font-size: clamp(22px, 1vw + 14px, 28px); }
}
/* phones: one compact row, art beside the words */
@media (max-width: 699.98px) {
  .pdp-related__door .door--art { flex-direction: row; align-items: center; }
  .pdp-related__door .door--art .door__art { width: 40%; flex: none; aspect-ratio: 4 / 3; min-height: 0; }
  .pdp-related__door .door--art .door__body { flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; padding: 6px 4px 6px 16px; }
  .pdp-related__door .door__name { font-size: 22px; }
  .pdp-related__door .door__arrow { width: 44px; height: 44px; }
}

/* ------------------------------------------------- product colour identity */
html[data-product="814"] .notify__done { background: var(--sky-tint); }
html[data-product="815"] .notify__done { background: var(--coral-tint); }
html[data-product="814"] .buybar { --buybar-ring: var(--sky); }
html[data-product="815"] .buybar { --buybar-ring: var(--coral); }

/* ---------------------------------------------- bottom bars (phones only)
   Website (768-899px): until the first scroll the PDP shows neither the tab
   bar nor the buy bar, so the colour swatches are clear on the first screen;
   pages/pdp.js then swaps them with Osevaro.bottomBar().
   App: the product action bar is docked for the whole screen, from the first
   paint (no swap and no slide at load; the tab bar never comes back here, as
   in ASOS, Zara and Chewy). pages/pdp.js calls Osevaro.bottomBar(true); these
   two rules only keep the first paint still. The keyboard still hides it (ds). */
@media (max-width: 899.98px) {
  body.pdp-bars-wait .tabbar { transform: translateY(calc(100% + 24px + var(--safe-b))); visibility: hidden; }
}
html[data-shell="app"] body.pdp-page:not(.kb-open) .buybar { transform: none; visibility: visible; }
html[data-shell="app"] body.pdp-page .tabbar:not(.tabbar--demo) { transform: translateY(100%); visibility: hidden; }
.buybar__colour { font-family: var(--font-body); font-variation-settings: normal; font-size: 15px; font-weight: 600; color: var(--ink-soft); }

/* ==========================================================================
   App shell (phones and the installed app; APP-SPEC 10.4, ds/README 19).
   Everything below is scoped to html[data-shell="app"], so desktop and
   tablets in a browser stay exactly as approved. The DS draws the overlay
   app bar, the docked tab bar / action bar, the sheets and the end cap;
   this is only how the product screen is composed inside them:
   full-bleed gallery with dots, a compact buy box (its one coral action is
   the docked action bar's, the heart is in the app bar), the email form in
   the notify sheet (one capture per page), size help in a sheet, card-style
   accordions and a related rail that snaps.
   ========================================================================== */
.buy__eyebrow, .buy__help, .gallery__dots { display: none; }

/* ------------------------------------------------- gallery, full bleed */
html[data-shell="app"] .pdp-hero { display: block; width: 100%; padding-top: 0; }
html[data-shell="app"] .pdp-hero__media { position: relative; top: auto; background: none; }   /* not the tablet sticky offset (a phone held sideways is 768px+ wide) */
/* the overlay app bar turns solid once the PHOTOS' bottom edge is within 56px of the
   bar's bottom edge (not when 70% of photos + dots row has gone: that was late, and the
   photo's corner slid up under the bar's round buttons). ds/app.js watches the first
   [data-app-gallery]: this 1px mark, placed (bar height + 56px) above the photos' bottom
   edge (the dots row is under the photos, so it is measured from the media's foot past
   that row), leaves the top of the screen at exactly that moment and ds/app.js turns the
   bar solid. First child of .pdp-hero__media, so it comes before every .gallery. */
.pdp-barmark { display: none; }
html[data-shell="app"] .pdp-barmark {
  display: block; position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none;
  bottom: calc(var(--pdp-dots-h) + var(--appbar-h) + var(--safe-t) + 56px);
}
html[data-shell="app"] .pdp-hero { --pdp-dots-h: 44px; }
html[data-shell="app"] .gallery { gap: 0; }
/* full bleed at the top (the app bar sits on it), the rounded corners the owner likes at the foot */
html[data-shell="app"] .gallery__stage { border-radius: 0 0 var(--r-card) var(--r-card); }
html[data-shell="app"] .gallery__slide { cursor: zoom-in; }
html[data-shell="app"] :is(.gallery__thumbs, .gallery__count, .gallery__nav) { display: none; }
/* a tap on the photo opens the larger photos (as in native apps), so no second round
   button on the photo: it slid up under the overlay bar's heart. The button stays for
   keyboards and screen readers, shown only while it has keyboard focus (bottom right,
   a solid round button, never text on the photo). */
html[data-shell="app"] .gallery__expand { top: auto; right: max(12px, var(--safe-x)); bottom: 12px; background: var(--card); box-shadow: var(--shadow); }
html[data-shell="app"] .gallery__expand:not(:focus-visible) { clip-path: inset(50%); pointer-events: none; box-shadow: none; }
html[data-shell="app"] .gallery__dots { display: flex; justify-content: center; height: var(--pdp-dots-h); margin: 0; }
/* a phone held sideways (or a wide installed window): the photo keeps a sensible
   height and sits centred with its rounded corners, under the app bar */
@media (min-aspect-ratio: 1 / 1) {
  html[data-shell="app"] .gallery__frame { width: min(100%, 72dvh); margin: calc(var(--appbar-h) + var(--safe-t)) auto 0; }
  html[data-shell="app"] .gallery__stage { border-radius: var(--r-tile); }
}

/* ------------------------------------------------------ compact buy box */
html[data-shell="app"] .buy { width: var(--shell); margin-inline: auto; padding-top: 2px; }
html[data-shell="app"] :is(.buy__crumbs, .buy__back) { display: none; }
html[data-shell="app"] .buy__eyebrow { display: inline-flex; gap: 6px; align-self: flex-start; }
html[data-shell="app"] .buy__eyebrow .eyebrow__dot { width: 14px; height: 14px; margin-left: 0; }
html[data-shell="app"] .buy__title { margin-top: 6px; font-size: 26px; line-height: 1.15; }
html[data-shell="app"] .buy__tagline { margin-top: 6px; max-width: none; font-size: 16px; line-height: 1.5; }
html[data-shell="app"] .buy__price { margin-top: 10px; }
html[data-shell="app"] .buy__price .price { font-size: 24px; }
html[data-shell="app"] .buy__price .btn-heart { display: none; }            /* the heart moves next to the main button */
html[data-shell="app"] .buy__swatches { margin-top: 16px; }
html[data-shell="app"] .buy__fit { margin-top: 14px; }
/* Size and fit: a 44px button under the fit line, its ruler in line with the fit icon */
.buy__sizebtn { align-self: flex-start; gap: 8px; margin: 4px 0 0 -12px; padding-inline: 12px 8px; }
.buy__sizebtn .ic { --ic-size: 20px; color: var(--accent-text); }
.buy__sizebtn .buy__sizego { --ic-size: 18px; margin-left: -2px; color: var(--ink-soft); }
html[data-shell="app"] .buy__cta { margin-top: 10px; }   /* the 44px Size and fit button above brings its own space */
/* the email form lives in the notify sheet here (one capture per page), opened from
   the docked action bar's Notify me: the linen note stays as the action note */
html[data-shell="app"] .buy__notify > :not(.note):not([data-notify-done]) { display: none !important; }   /* after a sign-up in the sheet the thank-you replaces the note */
html[data-shell="app"][data-order="open"] .buy__cta { display: none; }
html[data-shell="app"] .buy__help {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding-inline: 2px;
  font-size: 15px; line-height: 1.5; color: var(--ink-soft);
}
html[data-shell="app"] .buy__help .ic { --ic-size: 20px; margin-top: 1px; color: var(--accent-text); }
html[data-shell="app"] .buy__help a { color: var(--ink); font-weight: 650; }

/* ------------------------------------------- sections below the buy box */
html[data-shell="app"] :is(.pdp-split, .pdp-story__grid) { grid-template-columns: minmax(0, 1fr); gap: 14px; }
html[data-shell="app"] .pdp-split__aside { position: static; gap: 12px; background: none; }
html[data-shell="app"] :is(.pdp-split__aside .nest, #details .pdp-helpcard) { display: none; }
html[data-shell="app"] .pdp-split .sec-head { margin-bottom: 4px; }
html[data-shell="app"] .pdp-story__grid { gap: 22px; }
html[data-shell="app"] .pdp-story__photo { max-width: none; }

/* accordions as one rounded card of rows, like a settings list in an app:
   56px+ rows, the panel opens inside the card */
html[data-shell="app"] :is(.pdp-acc, #faq .acc) {
  padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--card);
}
html[data-shell="app"] :is(.pdp-acc, #faq .acc) > .acc__item:last-child { border-bottom: 0; }
html[data-shell="app"] :is(.pdp-acc, #faq .acc) .acc__item > summary { min-height: 58px; padding: 10px 0; font-size: 17px; }
html[data-shell="app"] :is(.pdp-acc, #faq .acc) .acc__panel { padding: 0 0 20px; }
html[data-shell="app"] :is(.pdp-acc, #faq .acc) .acc__icon { width: 32px; height: 32px; }
html[data-shell="app"] .pdp-reviewrow { margin-top: 16px; }

/* related: a rail that swipes and snaps (pages/pdp.js gives the list the DS
   .rail.rail--products classes in the app); the doorway becomes a card the
   same size as the product cards, art on top */
html[data-shell="app"] .pdp-related { display: block; }
html[data-shell="app"] .pdp-related__head { margin-bottom: 18px; }
html[data-shell="app"] .pdp-related__grid { margin-top: 0; }
html[data-shell="app"] .pdp-related__door { grid-column: auto; }
html[data-shell="app"] .pdp-related__door .door.door--art {
  flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding: 6px 6px 12px; border-radius: 20px;
}
html[data-shell="app"] .pdp-related__door .door--art .door__art { flex: none; width: 100%; aspect-ratio: 1; min-height: 0; border-radius: 15px; }
html[data-shell="app"] .pdp-related__door .door--art .door__body {
  display: flex; flex: 1; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 10px 4px 0;
}
/* the name and its arrow only: the card stays the height of a product card */
html[data-shell="app"] .pdp-related__door .door__words { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
html[data-shell="app"] .pdp-related__door .door__words :is(.eyebrow, .small) { display: none; }
html[data-shell="app"] .pdp-related__door .door__name { font-size: 20px; }
html[data-shell="app"] .pdp-related__door .door__arrow { width: 44px; height: 44px; }

/* ------------------------------------- larger photos: full screen in the app
   swipe sideways for the next photo, down to close; double-tap (or pinch)
   to look closer. Instant under reduced motion. */
html[data-shell="app"] .lightbox {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0;
  border: 0; border-radius: 0; box-shadow: none; background: var(--well);
}
html[data-shell="app"] .lightbox[open] { display: flex; flex-direction: column; }
html[data-shell="app"] .lightbox::backdrop { background: var(--well); }
html[data-shell="app"] .lightbox__bar {
  order: -1; flex: none; min-height: calc(60px + var(--safe-t)); padding: var(--safe-t) max(12px, var(--safe-x)) 0 max(16px, var(--safe-x));
  background: var(--card); border-bottom: 1px solid var(--line);
}
html[data-shell="app"] .lightbox__nav { gap: 4px; }
html[data-shell="app"] .lightbox__nav .btn-icon { border-color: transparent; background: transparent; }
html[data-shell="app"] .lightbox__stage {
  position: relative; flex: 1; min-height: 0; display: flex; overflow: hidden;
  touch-action: pinch-zoom; -webkit-user-select: none; user-select: none;
}
html[data-shell="app"] .lightbox__stage img {
  flex: none; width: 100%; height: 100%; max-height: none; margin: auto; object-fit: contain; cursor: zoom-in;
  padding-bottom: var(--safe-b);
}
html.motion-ok[data-shell="app"] .lightbox__stage img { transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out); }
html[data-shell="app"] .lightbox__stage.is-dragging img { transition: none; }
html[data-shell="app"] .lightbox__stage.is-zoomed { overflow: auto; touch-action: pan-x pan-y pinch-zoom; overscroll-behavior: contain; scrollbar-width: none; }
html[data-shell="app"] .lightbox__stage.is-zoomed img { max-width: none; height: auto; cursor: zoom-out; padding-bottom: 0; }   /* width: twice the shown size, set by pages/pdp.js */
@media (hover: none) { html[data-shell="app"] :is([data-lb-prev], [data-lb-next]) { display: none; } }
html.motion-ok[data-shell="app"] .lightbox[open]:not(.is-settled):not(.is-closing) { animation: ov-fade-in 180ms var(--ease-out) both; }
html.motion-ok[data-shell="app"] .lightbox[open].is-closing { animation: ov-fade-out 160ms linear forwards; }
html.is-automated .lightbox { animation: none !important; }
/* dark mode: the viewer is dark around the photo (a light well that fills the
   phone glares); the photo is drawn as it is, not multiplied into the well */
html[data-theme="dark"][data-shell="app"] :is(.lightbox, .lightbox::backdrop, .lightbox__stage) { background: var(--paper); }
html[data-theme="dark"][data-shell="app"] .lightbox__stage img { mix-blend-mode: normal; }