/* ==========================================================================
   Product detail — clean editorial layout
   --------------------------------------------------------------------------
   Page-level layout for product.php, modelled on the VATECH Europe product
   pages: big vertical air, a narrow text measure, no boxed cards on content,
   and wide/full-bleed imagery used as punctuation between bands.

   Deliberately a SEPARATE file from bento.css. That one is geometry-critical —
   a stray overflow/transform in it breaks the ScrollTrigger pin — so page
   furniture is kept out of its way. Loaded after it via $extra_css.

   Every rule is scoped to body.bento-page, so products.php and
   product-apple.php, which share some of this markup (.specs-table,
   .form-card, .faq-item, .product-card), are completely unaffected.

   Tokens come from custom.css and are theme-aware, so light/dark both work
   without a separate dark block here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Rhythm. main.css sets a flat `section { padding: 60px 0 }`; this is the
   whole difference between the old cramped page and the airy one. Scoped at
   (0,2,0) so it outranks that (0,0,1) rule without !important.
   -------------------------------------------------------------------------- */
body.bento-page .pb-sec {
  padding: clamp(72px, 9vw, 128px) 0;
  background: var(--bg);
}

/* Accent-tinted gradient rather than flat mist — the same idiom .page-hero uses
   in custom.css, so the bands read as part of the site rather than grey blocks.
   --accent-rgb is declared in both themes (red in light, mint in dark), so this
   follows the theme toggle with no dark-mode block of its own. */
body.bento-page .pb-sec.is-tint {
  background:
    radial-gradient(900px 340px at 85% -10%, rgba(var(--accent-rgb), .12), transparent 62%),
    linear-gradient(180deg, var(--bg), var(--mist));
  border-block: 1px solid var(--line);
}

/* Hairline instead of a background change, for bands that only need separating. */
body.bento-page .pb-sec.is-hairline { border-top: 1px solid var(--line); }

/* Tighter top when a band follows one of its own kind and the heading would
   otherwise float in too much space. */
body.bento-page .pb-sec.is-tight { padding-top: clamp(40px, 5vw, 64px); }

/* --------------------------------------------------------------------------
   2. Measure. Long-form copy is capped in ch, not px — the point is line
   length, which tracks font size rather than viewport.
   -------------------------------------------------------------------------- */
body.bento-page .pb-narrow {
  max-width: 68ch;
  margin-inline: auto;
}

body.bento-page .pb-narrow.is-start { margin-inline: 0; }

/* --------------------------------------------------------------------------
   3. Headings. Not .section-title — its h2 carries decorative ::before/::after
   rules from main.css that read as ornament, which is what we are removing.
   Not .eyebrow either: that one is a filled accent pill.
   -------------------------------------------------------------------------- */
body.bento-page .pb-eyebrow {
  display: block;
  margin: 0 0 14px;
  font-family: var(--nav-font);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

body.bento-page .pb-h1 {
  margin: 0 0 .35em;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
}

body.bento-page .pb-h2 {
  margin: 0 0 .4em;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.015em;
  text-wrap: balance;
}

body.bento-page .pb-h3 {
  margin: 0 0 .5em;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
}

body.bento-page .pb-lead {
  margin: 0;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-soft);
}

body.bento-page .pb-body {
  margin: 0 0 1em;
  line-height: 1.72;
  color: var(--ink-soft);
}

body.bento-page .pb-body:last-child { margin-bottom: 0; }

/* Section header block — centred by default, left-aligned with .is-start. */
body.bento-page .pb-head {
  max-width: 62ch;
  margin: 0 auto clamp(36px, 4.5vw, 64px);
  text-align: center;
}

body.bento-page .pb-head.is-start { margin-inline: 0; text-align: left; }

/* --------------------------------------------------------------------------
   4. Media. The opposite of .feature-media / .pd-media, which are bordered,
   rounded, mist-filled cards. Here the image is the content: no frame at all.
   The tinted ground only appears behind cut-out product renders, which need
   something to sit on.
   -------------------------------------------------------------------------- */
body.bento-page .pb-media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
}

body.bento-page .pb-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Cut-out PNGs: contained on a tint, never cropped. */
body.bento-page .pb-media.is-product {
  background: var(--mist);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 3vw, 48px);
}

body.bento-page .pb-media.is-product img {
  width: auto;
  max-width: 100%;
  max-height: 460px;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   5. Two-column band. Generous gap is most of what makes it read as calm.
   -------------------------------------------------------------------------- */
body.bento-page .pb-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}

/* Media second in source order, first visually — keeps the reading order
   heading-then-image for screen readers on both variants. */
body.bento-page .pb-split.is-flip > :first-child { order: 2; }

body.bento-page .pb-split-copy { max-width: 54ch; }

/* --------------------------------------------------------------------------
   7. Trust chips + actions.
   -------------------------------------------------------------------------- */
body.bento-page .pb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 26px 0;
  padding: 0;
  list-style: none;
  font-size: .93rem;
  color: var(--ink-soft);
}

body.bento-page .pb-chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body.bento-page .pb-chips i { color: var(--accent); }

body.bento-page .pb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

body.bento-page .pb-head .pb-actions,
body.bento-page .pb-cta .pb-actions { justify-content: center; }

/* --------------------------------------------------------------------------
   8. CTA band. Repeated twice down the page, exactly as the reference does.
   -------------------------------------------------------------------------- */
body.bento-page .pb-cta {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
}

body.bento-page .pb-cta .pb-h2 { margin-bottom: .3em; }

/* --------------------------------------------------------------------------
   9. Specifications. Flat zebra table at full container width — no card, no
   sidebar. Scoped, so product.php's identical .specs-table is untouched.
   -------------------------------------------------------------------------- */
body.bento-page .pb-specs {
  width: 100%;
  border-collapse: collapse;
  font-size: .97rem;
}

body.bento-page .pb-specs td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

body.bento-page .pb-specs tr:first-child td { border-top: 1px solid var(--line); }

body.bento-page .pb-specs td:first-child {
  width: 38%;
  font-weight: 600;
  color: var(--ink);
}

body.bento-page .pb-specs td:last-child { color: var(--ink-soft); }

/* Zebra on the tint side so it still reads on both grounds. */
body.bento-page .pb-specs tr:nth-child(odd) { background: color-mix(in srgb, var(--mist), transparent 40%); }

/* Catalogue / downloads. Shown outright rather than behind a disclosure — two
   buttons don't earn a click to reveal them. Right-aligned so they settle
   against the end of the spec table above. */
body.bento-page .pb-downloads { margin-top: 28px; }

body.bento-page .pb-downloads-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

body.bento-page .pb-downloads .pb-cap {
  margin: 14px 0 0;
  text-align: right;
  font-size: .87rem;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   10. Gallery carousel. No swiper arrow styling exists anywhere in the repo,
   so untouched these render in raw Swiper blue (#007aff).
   -------------------------------------------------------------------------- */
/* Inline padding gives the arrows a gutter to sit in. They cannot simply be
   pushed outside the container: .swiper carries overflow:hidden, which would
   clip them. Bottom padding clears the pagination. */
body.bento-page .pb-gallery { padding: 0 clamp(0px, 5vw, 64px) 52px; }

body.bento-page .pb-gallery .swiper-slide {
  height: auto;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--mist);
}

body.bento-page .pb-gallery .swiper-slide a {
  display: block;
  aspect-ratio: 4 / 3;
}

body.bento-page .pb-gallery .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}

/* Product renders are cut-outs — contain them rather than cropping the device
   out of frame, same rule the bento tiles follow. */
body.bento-page .pb-gallery .swiper-slide.is-product img {
  object-fit: contain;
  padding: 22px;
}

body.bento-page .pb-gallery .swiper-slide a:hover img { transform: scale(1.03); }

body.bento-page .pb-gallery .swiper-button-next,
body.bento-page .pb-gallery .swiper-button-prev {
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: .2s;
}

/* Out to the edges of the padded box, clear of the slides. */
body.bento-page .pb-gallery .swiper-button-prev { left: 0; }
body.bento-page .pb-gallery .swiper-button-next { right: 0; }

body.bento-page .pb-gallery .swiper-button-next:hover,
body.bento-page .pb-gallery .swiper-button-prev:hover {
  border-color: var(--accent);
  color: var(--accent);
}

body.bento-page .pb-gallery .swiper-button-next::after,
body.bento-page .pb-gallery .swiper-button-prev::after { font-size: 15px; font-weight: 700; }

body.bento-page .pb-gallery .swiper-pagination { bottom: 0; }

body.bento-page .pb-gallery .swiper-pagination-bullet {
  width: 8px; height: 8px;
  background: var(--ink-soft);
  opacity: .3;
  transition: .2s;
}

body.bento-page .pb-gallery .swiper-pagination-bullet-active {
  width: 26px;
  border-radius: 4px;
  background: var(--accent);
  opacity: 1;
}

@media (max-width: 767.98px) {
  body.bento-page .pb-gallery .swiper-button-next,
  body.bento-page .pb-gallery .swiper-button-prev { display: none; }
  /* No arrows, so the gutter would just be dead space on a phone. */
  body.bento-page .pb-gallery { padding-inline: 0; }
}

/* --------------------------------------------------------------------------
   10b. Product viewer — the Highlights section.
   A close replication of Apple's "Take a closer look." (macbook-neo overview):
   full-bleed imagery filling a rounded stage, with frosted glass pills stacked
   down the left edge over it. The active pill expands in place into a wider
   panel carrying the copy; the rest stay collapsed behind a ringed "+".

   Numeric values are Apple's own, read out of their overview.built.css rather
   than eyeballed: 28px radius, 56px pill height, rgb(232 232 237 / .72) ground,
   20px blur, 14px/32px padding, 12px stack gap, 423px expanded panel, 17px
   labels at -0.022em. The typeface stays ours — their metrics, our brand font.

   Apple's glass reads because there is art-directed photography behind it. Our
   product art is transparent cut-outs on white, which would give the blur
   nothing to work with, so each layer is a photograph (cover) plus a scrim. The
   scrim is weighted left, where the pills sit, and is the only reason light
   glass stays legible over arbitrary imagery.

   Backdrop transitions stay in CSS: custom.css already forces
   transition-duration to ~0 under prefers-reduced-motion, so they degrade to an
   instant swap for free. The pill open/close is GSAP Flip instead — see
   product-viewer.js — because the pill is width:fit-content and the panel is a
   fixed width, so there is no from-value for CSS to transition.
   -------------------------------------------------------------------------- */

/* Breaks the stage out of the 1200px .container. A padded wrapper rather than
   the calc(50% - 50vw) idiom used elsewhere: 100vw includes the scrollbar, so
   that approach overhangs ~15px, and section{overflow:clip} would then trim the
   right edge and leave the two margins visibly unequal. */
body.bento-page .pb-viewer-wrap { padding-inline: 24px; }

body.bento-page .pb-viewer {
  --pb-fade: .45s cubic-bezier(.28, .11, .32, 1);
  --pb-slide: .62s cubic-bezier(.22, 1, .36, 1);
  --pb-pill-r: 28px;
  --pb-pill-h: 56px;
  --pb-pill-bg: rgba(232, 232, 237, .72);
  --pb-pill-ink: #1d1d1f;
  --pb-panel-w: 423px;
}

/* Apple ships a dark counterpart for the same component. */
[data-bs-theme="dark"] body.bento-page .pb-viewer {
  --pb-pill-bg: rgba(42, 42, 45, .72);
  --pb-pill-ink: #f5f5f7;
}

body.bento-page .pb-viewer-stage {
  position: relative;
  display: grid;
  aspect-ratio: 16 / 9;
  /* Aspect drives the height, but never past the viewport on an ultra-wide
     monitor — only engages above roughly 1766px. */
  max-height: 92vh;
  /* Load-bearing, not cosmetic: once max-height clamps, that constraint is
     transferred back through the aspect ratio and the box's own width shrinks
     below the wrapper. A block box narrower than its container sits flush left,
     so without this the stage drifts off-centre on wide screens. */
  margin-inline: auto;
  border-radius: var(--pb-pill-r);
  overflow: hidden;
  background: var(--deep);
  /* Horizontal drag is ours; vertical must still scroll the page. */
  touch-action: pan-y;
}

/* ---- Layers ----
   Direction-aware slide-and-pop. JS puts .is-fwd / .is-back on the stage before
   activating, and tags the outgoing layer .is-leaving so the two cross rather
   than both entering from the same side. */
body.bento-page .pb-viewer-layer {
  grid-area: 1 / 1;
  position: relative;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(7%) scale(1.06);
  transition: opacity var(--pb-slide), transform var(--pb-slide), visibility var(--pb-slide);
}

body.bento-page .pb-viewer-stage.is-back .pb-viewer-layer { transform: translateX(-7%) scale(1.06); }

/* The .pb-viewer-stage level is load-bearing, not decoration. Without it this
   selector scores below the .is-back rule above, so stepping BACKWARDS left the
   incoming layer parked at translateX(-7%) scale(1.06) instead of resting at
   none. On the desktop cover crop a 7% drift reads as framing; on the software
   screenshots, which are contained rather than cropped, the image visibly sits
   off-centre and loses its right edge. */
body.bento-page .pb-viewer-stage .pb-viewer-layer.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Outgoing: stays painted while it travels the opposite way. */
body.bento-page .pb-viewer-layer.is-leaving {
  opacity: 0;
  visibility: visible;
}

body.bento-page .pb-viewer-stage.is-fwd  .pb-viewer-layer.is-leaving { transform: translateX(-5%) scale(1.02); }
body.bento-page .pb-viewer-stage.is-back .pb-viewer-layer.is-leaving { transform: translateX(5%) scale(1.02); }

body.bento-page .pb-viewer-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Scrim: darkest on the left under the pills, clearing to the right. With no
   product render on top any more, this exists purely to keep the frosted glass
   legible over whatever the photograph happens to be. */
body.bento-page .pb-viewer-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .34) 46%, rgba(0, 0, 0, .12) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .16), rgba(0, 0, 0, .3));
}

/* ---- Rail: paddles + pill stack, overlaid on the left ---- */
body.bento-page .pb-viewer-rail {
  position: absolute;
  z-index: 2;
  inset-block: 0;
  inset-inline-start: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-inline-start: clamp(14px, 2.4vw, 34px);
  /* The rail spans the stage so the stack can centre, but only the controls
     themselves should take the pointer — the rest must reach the swipe handler. */
  pointer-events: none;
}

body.bento-page .pb-viewer-paddles {
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: auto;
}

body.bento-page .pb-viewer-paddle {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(210, 210, 215, .64);
  color: rgba(0, 0, 0, .56);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  transition: background 100ms linear, opacity 100ms linear;
}

body.bento-page .pb-viewer-paddle:hover:not(:disabled) { background: rgba(223, 223, 227, .7); }

body.bento-page .pb-viewer-paddle:disabled {
  opacity: .42;
  pointer-events: none;
}

/* ---- Pills ---- */
body.bento-page .pb-viewer-items {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  width: fit-content;
  max-height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: auto;
}

body.bento-page .pb-viewer-item {
  width: fit-content;
  border-radius: var(--pb-pill-r);
  background: var(--pb-pill-bg);
  box-shadow: inset 0 0 .5px 0 rgba(0, 0, 0, .11);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  transition: background var(--pb-fade);
}

/* Where backdrop-filter is unsupported the pill would be a washed-out
   rectangle over photography; opaque it instead so the label stays readable. */
@supports not ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  body.bento-page .pb-viewer { --pb-pill-bg: rgba(232, 232, 237, .94); }
  [data-bs-theme="dark"] body.bento-page .pb-viewer { --pb-pill-bg: rgba(42, 42, 45, .94); }
}

body.bento-page .pb-viewer-open {
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--pb-pill-h);
  padding-inline: 14px 32px;
  border: 0;
  background: none;
  color: var(--pb-pill-ink);
  font-family: var(--nav-font);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2353;
  letter-spacing: -.022em;
  white-space: nowrap;
  cursor: pointer;
  border-radius: var(--pb-pill-r);
}

/* Thin ring around the plus, as Apple draws it. */
body.bento-page .pb-viewer-ic {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, .46);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: transform var(--pb-fade);
}

/* Bootstrap Icons is a single-weight icon font, so font-weight does nothing to
   a glyph. text-stroke is the only way to thicken it without swapping in SVG;
   it degrades to the normal weight where unsupported rather than breaking. */
body.bento-page .pb-viewer-ic i,
body.bento-page .pb-viewer-paddle i {
  -webkit-text-stroke: .75px currentColor;
  text-stroke: .75px currentColor;
}

[data-bs-theme="dark"] body.bento-page .pb-viewer-ic { border-color: rgba(255, 255, 255, .42); }

body.bento-page .pb-viewer-item:hover .pb-viewer-ic { transform: rotate(90deg); }

/* ---- Expanded panel ---- */
body.bento-page .pb-viewer-panel {
  display: none;
  width: min(var(--pb-panel-w), 64vw);
  padding: 20px 24px;
  color: var(--pb-pill-ink);
  font-family: var(--nav-font);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.4706;
  letter-spacing: -.022em;
}

body.bento-page .pb-viewer-panel b { font-weight: 600; }

/* The active item swaps button for panel in place — same <li>, so the stack
   simply recentres and nothing outside the stage moves. */
body.bento-page .pb-viewer-item.is-active .pb-viewer-open { display: none; }
body.bento-page .pb-viewer-item.is-active .pb-viewer-panel { display: block; }

body.bento-page .pb-viewer-open:focus-visible,
body.bento-page .pb-viewer-paddle:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 1199.98px) {
  body.bento-page .pb-viewer { --pb-panel-w: 374px; }
}

/* ---- Below 1200px: Apple's horizontal row ----
   The overlay above cannot be made safe at these widths. The rail is absolutely
   positioned inside a fixed-ratio, overflow:hidden stage, so the moment the
   pills plus one expanded panel exceed the stage height the panel is clipped at
   the top and the paddles vanish below the bottom edge. Measured: five topics
   need 537px against a 426px stage at 820px wide; seven need 594px against
   541px at 1024px. A taller ratio (the old 3/4) only moves the threshold —
   panel height follows copy length, so no fixed ratio is ever safe.

   apple.com/mac uses the same component (theirs is literally .product-viewer,
   with one .control-item per topic carrying both a pill and its caption) and
   solves it by changing the layout rather than the box: below their small
   breakpoint the pill stack becomes a SINGLE horizontal row, transform-shifted
   to centre the active item, with the paddles flanking it at the stage edges.
   Height is then bounded by one pill plus one caption no matter how many topics
   there are — they ship eight. That is copied here.

   Two departures from Apple. The flip is at 1199.98px rather than their ~734px:
   VATECH's software pages carry seven topics with longer labels, and the
   vertical stack only fits once the 16:9 stage is about 1160px wide. And there
   is no close button — Apple has a collapsed state showing the bare product,
   while this viewer always has a topic active. */
@media (max-width: 1199.98px) {
  body.bento-page .pb-viewer-wrap { padding-inline: 0; }   /* full-bleed, as Apple */
  body.bento-page .pb-viewer      { --pb-pill-h: 48px; --pb-pill-r: 24px; }

  /* Two rows — media, then controls in normal flow. The rail is a grid item
     rather than an overlay, so it contributes to the row height and vertical
     clipping becomes structurally impossible at any copy length. That is the
     guarantee the aspect-ratio approach could never give. */
  body.bento-page .pb-viewer-stage {
    aspect-ratio: auto;
    max-height: none;
    border-radius: 0;
    grid-template-rows: auto auto;
    background: var(--mist);
  }

  body.bento-page .pb-viewer-layer { grid-area: 1 / 1; aspect-ratio: 4 / 3; }

  /* The heavy left-dark scrim existed to keep frosted pills legible over
     photography. Nothing sits on the image now, so it only muddies it. */
  body.bento-page .pb-viewer-layer::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .16));
  }

  body.bento-page .pb-viewer-rail {
    position: relative;
    grid-area: 2 / 1;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px 0 20px;
    /* Clips the row on X. The rail's own height stays auto, so the caption
       still grows the stage instead of being cut. */
    overflow: hidden;
  }

  /* Deliberately NOT a native overflow-x:auto scroller: per CSS Overflow 3, an
     `auto` on one axis forces a `visible` on the other to compute to `auto`
     too, which would reintroduce exactly the vertical clipping being fixed.
     The row overflows freely and the rail clips it, as Apple's does. */
  body.bento-page .pb-viewer-items {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: flex-start;
    width: max-content;
    max-height: none;
    gap: 8px;
    padding-inline: 52px;        /* keeps copy clear of the flanking paddles */
    overflow: visible;
    transition: transform var(--pb-slide);
  }

  body.bento-page .pb-viewer-item  { flex: 0 0 auto; }
  body.bento-page .pb-viewer-open  { font-size: 15px; padding-inline: 12px 22px; gap: 10px; }
  body.bento-page .pb-viewer-ic    { width: 24px; height: 24px; font-size: 11px; }
  body.bento-page .pb-viewer-panel {
    width: min(calc(100vw - 104px), 400px);
    font-size: 15px;
    padding: 16px 18px;
  }

  /* Bare chevrons flush to the stage edges, vertically centred on the caption,
     as Apple draws them. No pill: the frosted circle on the desktop rail exists
     to keep a control legible ON TOP of a photograph, and down here the rail is
     its own band on the page ground, so the disc is chrome with nothing to do.
     Measured against apple.com/mac — their .paddlenav-button is transparent,
     radius 0, no shadow, no backdrop-filter and no pseudo-element, and its SVG
     is a lone chevron path. The light discs either side of their caption are
     the neighbouring pills peeking in, not button chrome. */
  body.bento-page .pb-viewer-paddles {
    position: absolute;
    /* Spans the rail's content box, which is the row, which is as tall as the
       expanded panel — so centring here centres on the caption. The values are
       the rail's own padding. Must stay a single inset-block: a `bottom`
       longhand after it cancels the bottom edge, the box collapses to the
       buttons' height and align-items silently stops centring anything. */
    inset-block: 16px 20px;
    inset-inline: 0;
    z-index: 3;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
  }

  /* :hover is folded in so the base rule cannot put the pill back on tap-hold. */
  body.bento-page .pb-viewer-paddle,
  body.bento-page .pb-viewer-paddle:hover:not(:disabled) {
    width: 44px;              /* Apple's is 40; 44 is the touch-target floor */
    height: 88px;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    /* Already #1d1d1f — rgb(29,29,31), the exact ink Apple fills the chevron
       with — and already carries an #f5f5f7 dark-theme counterpart. */
    color: var(--pb-pill-ink);
    font-size: 26px;
    pointer-events: auto;
  }

  /* chevron-up/down serve the vertical desktop rail; rotate rather than
     re-author the markup, since both layouts share these two buttons. The
     .75px stroke gives a 13px glyph presence inside a 36px pill — at 26px on
     bare ground it only thickens the chevron into a smudge. */
  body.bento-page .pb-viewer-paddle i {
    display: block;
    transform: rotate(-90deg);
    -webkit-text-stroke: 0;
    text-stroke: 0;
  }
}

/* 4:3 is right on a phone, where a 16:9 band is only ~220px and the media loses
   to the caption. By tablet the stage is the full viewport width, so the same
   ratio would run to 768px of image before a single pill — back to widescreen. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  body.bento-page .pb-viewer-layer { aspect-ratio: 16 / 9; }
}

@media (max-width: 1199.98px) and (prefers-reduced-motion: reduce) {
  body.bento-page .pb-viewer-items { transition: none; }
}

/* --------------------------------------------------------------------------
   10b. Related track (#related on both detail pages).

   The equal-height recipe is the one custom.css already uses for .productsSwiper
   — a flex slide with height:auto and a card at width:100% — because a Swiper
   slide is height-fitted to its content otherwise and the three cards end up
   ragged. The nav cluster follows product-store.css's .ps-promo-nav, redrawn
   with bento-page tokens since product-store.css is not loaded on these pages.
   -------------------------------------------------------------------------- */
body.bento-page .pb-related .swiper-wrapper { align-items: stretch; }
body.bento-page .pb-related .swiper-slide { height: auto; display: flex; }
body.bento-page .pb-related .swiper-slide .product-card { width: 100%; }

/* The card lifts on hover; without the gutter the lift is cropped by
   .swiper's own overflow. */
body.bento-page .pb-related { padding-top: 6px; }

body.bento-page .pb-related-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}

body.bento-page .pb-related-prev,
body.bento-page .pb-related-next {
  position: static;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-soft);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .18s linear, color .18s linear, opacity .18s linear;
}

body.bento-page .pb-related-prev:hover,
body.bento-page .pb-related-next:hover { background: var(--mist); color: var(--accent); }

body.bento-page .pb-related-prev > i,
body.bento-page .pb-related-next > i { font-size: 14px; line-height: 1; }

body.bento-page .pb-related-prev:focus-visible,
body.bento-page .pb-related-next:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

body.bento-page .pb-related .swiper-button-disabled { opacity: .4; pointer-events: none; }

body.bento-page .pb-related-dots {
  position: static;
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 999px;
  background: var(--mist);
}

body.bento-page .pb-related-dots .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  margin: 0 !important;
  border-radius: 50%;
  background: var(--ink-soft);
  opacity: .35;
  transition: opacity .2s linear, background .2s linear;
}

body.bento-page .pb-related-dots .swiper-pagination-bullet-active {
  background: var(--accent);
  opacity: 1;
}

/* At 992px slidesPerView is 3 and there are never more than 3 cards, so the
   track is the static row it replaced and the cluster would be inert. */
@media (min-width: 992px) {
  body.bento-page .pb-related-nav { display: none; }
}

/* --------------------------------------------------------------------------
   11. FAQ. main.css renders each item as a bordered, rounded card and fills the
   whole open item with accent — flattened here to hairline rows where only the
   heading takes the accent. Selectors carry the extra body.bento-page level so
   they outrank `.faq .faq-container .faq-item` without !important.
   -------------------------------------------------------------------------- */
body.bento-page .pb-faq .faq-container .faq-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  margin-bottom: 0;
  padding: 24px 44px 24px 0;
}

body.bento-page .pb-faq .faq-container .faq-item:first-child { border-top: 1px solid var(--line); }

body.bento-page .pb-faq .faq-container .faq-item h3 {
  margin: 0;
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--ink);
}

body.bento-page .pb-faq .faq-container .faq-item .faq-toggle {
  top: 28px;
  right: 4px;
  color: var(--ink-soft);
}

body.bento-page .pb-faq .faq-container .faq-active {
  background: transparent;
  border-color: var(--line);
  color: inherit;
}

body.bento-page .pb-faq .faq-container .faq-active h3,
body.bento-page .pb-faq .faq-container .faq-active h3:hover { color: var(--accent); }

body.bento-page .pb-faq .faq-container .faq-active .faq-toggle { color: var(--accent); }

body.bento-page .pb-faq .faq-container .faq-item .faq-content p {
  color: var(--ink-soft);
  line-height: 1.72;
}

/* --------------------------------------------------------------------------
   12. Enquiry form. custom.css gives .form-card a border, radius and shadow;
   on a tinted band that reads as a floating box, so it is flattened to sit
   directly on the ground.
   -------------------------------------------------------------------------- */
body.bento-page .pb-form .form-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

body.bento-page .pb-form .form-control {
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
}

body.bento-page .pb-form .form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15);
}

body.bento-page .pb-form .form-label {
  font-size: .88rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   13. Related products + back link. .product-card is reused as-is from
   custom.css; only the row spacing belongs here.
   -------------------------------------------------------------------------- */
body.bento-page .pb-back {
  margin-top: clamp(40px, 5vw, 64px);
  text-align: center;
}

body.bento-page .pb-back a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
}

body.bento-page .pb-back a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   14. Breadcrumbs. custom.css only styles .breadcrumbs nested inside
   .page-hero / .story-hero, and this page has neither.
   -------------------------------------------------------------------------- */
body.bento-page .pb-crumbs {
  padding: 22px 0 0;
  font-size: .87rem;
  color: var(--ink-soft);
}

body.bento-page .pb-crumbs a {
  color: var(--ink-soft);
  text-decoration: none;
}

body.bento-page .pb-crumbs a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   15. Responsive. The splits collapse first, then the measure relaxes — a
   68ch cap is wider than a phone, so it stops doing anything on its own.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  body.bento-page .pb-split { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 40px); }
  /* Stacked, the visual flip is meaningless and would put the image below the
     copy on alternating rows only — inconsistent. Reset to source order. */
  body.bento-page .pb-split.is-flip > :first-child { order: 0; }
  body.bento-page .pb-split-copy { max-width: none; }
  body.bento-page .pb-specs td:first-child { width: 42%; }
}

@media (max-width: 575.98px) {
  /* Right-aligned buttons crowd the screen edge on a phone. */
  body.bento-page .pb-downloads-actions { justify-content: flex-start; }
  body.bento-page .pb-downloads .pb-cap { text-align: left; }
  body.bento-page .pb-specs td { padding: 13px 14px; }
  body.bento-page .pb-specs td:first-child { width: 46%; }
  body.bento-page .pb-media.is-product img { max-height: 300px; }
}

/* ==========================================================================
   MOBILE PASS — touch targets on the viewer and gallery controls.
   max-width scoped; desktop sizing untouched.
   ========================================================================== */
/* Desktop-only: below 1200px the paddles are already 44x88 bare chevrons, and
   this rule would clobber that height back to 44px. It sits after the mobile
   block at equal specificity, so the damage would only ever show on a real
   touch device — never in a desktop browser at a narrow window. */
@media (pointer: coarse) and (min-width: 1200px) {
  /* Highlight paddles were 36px. */
  body.bento-page .pb-viewer-paddle { width: 44px; height: 44px; }
}

@media (pointer: coarse) {
  /* Same for the related track's arrows. */
  body.bento-page .pb-related-prev,
  body.bento-page .pb-related-next { width: 44px; height: 44px; }

  body.bento-page .pb-related-dots .swiper-pagination-bullet { position: relative; }
  body.bento-page .pb-related-dots .swiper-pagination-bullet::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 24px; height: 24px;
  }

  /* Gallery dots stay 8px — an 11-bullet row at that pitch cannot carry 44px
     targets without them overlapping — but the row is spaced out and each
     bullet gets a larger transparent hit area. */
  body.bento-page .pb-gallery .swiper-pagination-bullet { position: relative; }
  body.bento-page .pb-gallery .swiper-pagination-bullet::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 22px; height: 26px;
  }
  body.bento-page .pb-gallery .swiper-pagination-bullet { margin: 0 7px !important; }
}