/* ==========================================================================
   EC Carpets · Rugs — RANGE PAGE CHROME (9B)
   ==========================================================================
   Source: Rugs Design Mockups/variations/v9b/range-bahamas.html + css/range.css
   §"1. BREADCRUMB + CONFIGURATOR SHELL" (mockup lines 41-100).

   SCOPE (DESIGN-SYNC parity rule 3 — section isolation):
   This part carries ONLY the theme-owned range-page TOP chrome that wraps the
   configurator — the breadcrumb, and the layout scaffold AROUND the embed
   (the `.cfg` section padding-block + the `.cfg__inner` two-column grid).

   It deliberately does NOT restyle the configurator's INTERNALS
   (`.cfg__stage`, `.stage`, `.cfg__head`, `.cfg__title`, `.cfg__romance`,
   `.cfg__edition`, `.cfg__from`, `.swatches`, `.step`, `.action`, the edge
   preview, …). Those ship from the plugin's own configurator CSS
   (pb-ec-commerce), which owns the whole `pb_ec_range_configurator()` markup.
   That plugin CSS is currently still 4B-flavoured; its 9B restyle is tracked
   as a follow-up in docs/DESIGN-SYNC.md ("configurator 9B restyle (plugin
   CSS)"). Do NOT copy the configurator-internal rules here.

   Markup parity (rule 2): classes reused verbatim from the mockup —
   `.breadcrumb.page-top`, `.cfg`, `.cfg__inner`. Tokens only (rule 1); no new
   colours or hard-coded sizes are introduced here.

   The theme's simple product-grid FALLBACK (rendered when a term has no
   configurator data) lives at the foot of this file: it reuses the mockup's
   `.rail` / `.product-tile` primitives from pb-shell.css, adding only the grid
   wrapper + page-header scaffold the fallback needs.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. BOX-SIZING RE-ASSERT (range scope) — now REDUNDANT, kept as a guard.
   HISTORY, corrected 2026-08-09: the symptom this was written for was real —
   `body` and `.container` computed `content-box`, so every `.container` rendered
   `100% + 2*gutter` and the product-zone right column overflowed. The CAUSE named
   here was not. No `*` rule from WP core or wc-blocks was clobbering the reset:
   pb-shell.css's own opening comment was closed early by a path glob, so the
   parser dropped the reset and it never existed on any page. Fixed at source in
   pb-shell.css; the reset now governs and this rule changes nothing. Retained only
   as a cheap guard. New page areas do NOT need to copy it — see DESIGN-SYNC.
   -------------------------------------------------------------------------- */
.pb-range,
.pb-range *,
.pb-range *::before,
.pb-range *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   1. BREADCRUMB
   The range-bahamas configurator page has NO banner, so the breadcrumb is the
   FIRST flow element and must clear the fixed floating-glass chrome. Mirrors
   css/range.css lines 41-59 verbatim (incl. the .page-top clearance override
   that beats the plain `.breadcrumb` padding-block rule — see that comment).
   -------------------------------------------------------------------------- */
.pb-range .breadcrumb { padding-block: var(--space-md) 0; }
/* Re-assert the top clearance at higher specificity (0,2,0) so the fixed
   floating chrome never overlaps the first flow element (mockup range.css L53). */
.pb-range .breadcrumb.page-top { padding-top: calc(var(--chrome-bottom) + var(--chrome-inset)); }
.pb-range .breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); font-size: var(--fs-sm); color: var(--text-muted); }
.pb-range .breadcrumb li { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.pb-range .breadcrumb li + li::before { content: "/"; color: var(--hairline-strong); }
.pb-range .breadcrumb a { color: var(--text-muted); }
.pb-range .breadcrumb a:hover { color: var(--text); }
.pb-range .breadcrumb [aria-current="page"] { color: var(--text); }

/* --------------------------------------------------------------------------
   2. CONFIGURATOR SHELL (layout scaffold AROUND the embed only)
   The two-column grid — rug stage ≈2/3 (dominant), controls ≈1/3 — is the
   page LAYOUT the theme owns; what fills each column is the plugin's markup.
   Mirrors css/range.css lines 64-100. `.cfg__inner` carries the standard
   `.container` in the plugin markup, so it spans the same content width as
   every other section.
   -------------------------------------------------------------------------- */
.pb-range .cfg {
  padding-block: var(--space-lg) var(--section-gap-s);
  /* Clip horizontal overflow only (axis-specific) so the rightmost swatch
     tooltip / contained rug stage never add page scroll width on mobile;
     vertical tooltips still show above their chip. */
  overflow-x: clip;
}
.pb-range .cfg__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
}
@media (min-width: 960px) {
  .pb-range .cfg__inner {
    /* Stage stays dominant; controls get a wider track (min 440px, ~1.42fr:1fr)
       so the range name clears the right-aligned trust marks and the steps have
       real room (mockup range.css L89). */
    grid-template-columns: minmax(0, 1.42fr) minmax(440px, 1fr);
    gap: var(--space-2xl);
  }
}

/* --------------------------------------------------------------------------
   3. SIMPLE PRODUCT-GRID FALLBACK (no configurator data)
   Rendered by taxonomy-product_cat.php only when pb_ec_range_products() is
   empty. Reuses the mockup's `.product-tile` primitive (pb-shell.css) inside a
   plain responsive grid + a lightweight page header, so a non-configurable
   term still reads as a clean, on-brand range archive. Tokens only.
   -------------------------------------------------------------------------- */
.pb-range-fallback { padding-block: var(--space-lg) var(--section-gap-s); }
.pb-range-fallback__head { margin-bottom: var(--space-xl); }
.pb-range-fallback__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); }
.pb-range-fallback__intro { color: var(--text-muted); margin-top: var(--space-sm); max-width: 60ch; }
.pb-range-fallback__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 640px) {
  .pb-range-fallback__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .pb-range-fallback__grid { grid-template-columns: repeat(3, 1fr); }
}
.pb-range-fallback__empty { color: var(--text-muted); padding-block: var(--space-xl); }

/* --- THE TILE'S MEDIA WELL, WHICH IS A LAYOUT-STABILITY FIX AND NOT A
   TREATMENT (2026-09-05).

   WHAT WAS WRONG. This grid renders WooCommerce's own content-product.php, so
   its picture comes from WC_Product::get_image(), which the plugin's
   ProductImagery substitutes for a CDN tag. That tag carries width and height
   ONLY when the asset row knows them, and today every externally hosted asset
   has width 0 and height 0 recorded, so the tag is dimensionless
   (src/Product/ProductImagery.php: "an externally hosted asset has width 0 and
   height 0 recorded, so today every tag this emits is dimensionless and the
   stylesheet supplies the box"). The stylesheet did not supply one. So the
   browser reserved nothing, laid the grid out at zero height, and reflowed it
   once each photograph decoded: layout shift, on the one grid on the site that
   had it. The image-less tile was worse in a quieter way — the theme's `.ph`
   placeholder is `width: 100%` with no height at all, so it collapsed to
   nothing and the tile read as a title with no picture above it.

   WHY CSS AND NOT DIMENSIONS ON THE TAG. Real width and height cannot be
   emitted until ec_asset.width and ec_asset.height are populated, which is
   MP-3's job in the media pipeline and is not this wave. Copying
   wc_get_image_size()'s numbers onto an uncropped file instead would ASSERT a
   crop that was never made, which is the squashed-rug defect ProductImagery
   §6.2 exists to avoid. A well in CSS reserves the box without claiming
   anything about the file, so it is correct both before and after MP-3 lands:
   when the tag gains its own dimensions, `aspect-ratio` still governs the box
   and `object-fit: cover` still crops rather than distorts.

   1 / 1 because that is what this grid's pictures already are. Woo's
   `woocommerce_thumbnail` size is square-cropped on this install
   (woocommerce_thumbnail_image_width 300, no cropping option set, so the 1:1
   default), and the range card next door uses the same square well. The
   shell's own .product-tile__media is 4/5, which is deliberately NOT copied
   here: that primitive is not what this grid renders.

   Scoped by descent rather than by child, so it survives the loop link being
   hooked back on. Nothing else in this grid carries an image. --- */
.pb-range-fallback__grid img,
.pb-range-fallback__grid .ph {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-media);
}

/* ==========================================================================
   4. BELOW-CONFIGURATOR SECTIONS (9B range-bahamas)
   ==========================================================================
   Ported VERBATIM (tokens only) from the v9b mockup css/range.css §6 + §6b and
   css/rails.css. Scoped under `.pb-range` so these page-level rules never leak.
   The shared primitives (.section, .section-head, .link-underline, .product-tile,
   .ph) already ship from pb-shell.css; this part adds ONLY what the range page's
   below-configurator sections need on top of them: the product-zone two-column
   composition + its detail accordions + care slider, the .home-faq replica, the
   product-tile category chips, the .rail wrapper + arrows + --slider track, and
   the Recently-Viewed tail trim.
   -------------------------------------------------------------------------- */

/* --- 4a. PRODUCT ZONE (mockup range.css §6) — two columns: image mosaic (left)
   beside the sticky detail column (right); stacks to one column below 960px with
   the DETAILS first. --- */
.pb-range .product-zone {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
}
@media (min-width: 960px) {
  .pb-range .product-zone {
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
    gap: var(--space-2xl);
  }
  .pb-range .product-zone__details { position: sticky; top: calc(var(--chrome-inset) + var(--header-h) + var(--space-lg)); }
}

/* LEFT — the image mosaic: a two-column grid; a --full shot spans both columns,
   a --half takes one, so rows read full · (half half) · full · (half half) · full. */
.pb-range .product-zone__gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}
/* `position: relative` is the containing block for the pinned .pz-shot__cap
   below, and is here for no other reason (mockup range.css :1828). */
.pb-range .pz-shot { margin: 0; position: relative; }
.pb-range .pz-shot--full { grid-column: 1 / -1; }
.pb-range .pz-shot--half { grid-column: span 1; }
.pb-range .pz-shot .ph { width: 100%; border-radius: var(--radius-media); }
.pb-range .pz-shot--full .ph { aspect-ratio: 16 / 10; }
.pb-range .pz-shot--half .ph { aspect-ratio: 4 / 5; }
/* Real-photography drop-in for the mosaic shots. Same reason the block sheets
   each carry their own: the theme ships no global `.ph > img` rule, and this is a
   template sheet rather than a block, so nothing else reaches these. Measured
   before: object-fit `fill`, position `static`, a square 1800x1800 source laid out
   763x763 inside the 16 by 10 well (763x477) and 374x374 inside the 4 by 5 one
   (374x467), so the aspect the well declares was ignored and .ph's overflow
   clipped whatever fell past it. v9b renders these boxes at exactly those sizes. */
.pb-range .pz-shot .ph > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 560px) {
  .pb-range .product-zone__gallery { grid-template-columns: 1fr; }
  .pb-range .pz-shot--half { grid-column: 1 / -1; }
  .pb-range .pz-shot--half .ph { aspect-ratio: 16 / 10; }
}

/* GALLERY SHOT CAPTIONS (audit F5; mockup range.css :1784-1846). A micro-label
   pinned bottom-right on each shot. It cannot move the mosaic: --full/--half
   still span what they spanned, the aspect-ratios still live on the .ph, and an
   absolutely positioned child contributes nothing to its grid item's size.

   THE GROUND IS A NEAR-OPAQUE BONE CHIP, not a gradient scrim and not a backdrop
   blur, and that is the load-bearing decision. The photography behind these
   slots is unpredictable: a pale flat-lay, a dark stair well, a sunlit sofa. A
   scrim or a blur inherits whatever is underneath, so it is only ever as legible
   as the pixel it happens to land on. At 90% the chip's own colour dominates and
   the worst case is bounded by construction rather than by luck. Bone rather
   than ink because a dark block on this warm, light photography reads as a
   badge and a paper-coloured label reads as a caption. The hairline is not
   decoration: on the cream flat-lay shots the chip and the photo sit within a
   few percent of each other, and the rule is what stops the label dissolving
   into the image.

   The ground is written as color-mix off --bone rather than as the mockup's
   literal `rgba(245, 244, 241, 0.9)`. It resolves to that exact value today; the
   difference is that it keeps following --bone if the surface ever moves, and
   this file's opening rule is tokens only. A mechanical diff against the mockup
   reports it as a delta and it is not one.

   Type is .ph__cap's (pb-shell.css) so the label speaks in the voice this system
   already has for "what this image is" rather than inventing a second one. Ink
   is --text, not --text-strong: a caption, not a badge. The 4px/3px padding is
   v9b's and is deliberately off the 8px grid, an optical adjustment for
   uppercase type, whose cap-height sits high in the line box.

   Parented to the FIGURE and not the .ph, because the .ph clips on its media
   radius exactly where the caption wants to sit. ARIA-HIDDEN in the markup,
   because each <img> already carries a fuller alt that says everything the
   caption says and more, and a <figcaption> is what AT uses to NAME its
   <figure>: exposing both makes a screen reader read the short label and then
   the long alt, once per shot. */
.pb-range .pz-shot__cap {
  position: absolute;
  right: var(--space-2xs);
  bottom: var(--space-2xs);
  max-width: calc(100% - var(--space-lg));
  padding: 4px var(--space-2xs) 3px;
  border: var(--rule);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bone) 90%, transparent);
  color: var(--text);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  text-align: right;
  text-wrap: balance;
  pointer-events: none;                   /* a label, never a hit target */
}

/* RIGHT — the detail groups; tight group rhythm (round 18), the first carries H2. */
.pb-range .product-zone__details { display: flex; flex-direction: column; gap: var(--space-xs); }
.pb-range .product-zone__details > .pz-detail:not(.pz-detail--acc) { margin-bottom: var(--space-sm); }
.pb-range .pz-detail h2 { font-size: var(--fs-h2); }
.pb-range .pz-detail h3 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h4); margin-bottom: var(--space-md); }
.pb-range .pz-detail > p { color: var(--text); margin-top: var(--space-md); }
.pb-range .pz-detail .link-underline { margin-top: var(--space-md); }

/* DETAIL ACCORDIONS — native <details>/<summary>; a +/- marker that drops its bar
   on open (same vocabulary as the FAQ rows). */
.pb-range .pz-detail--acc { margin: 0; }
.pb-range .pz-detail__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  cursor: pointer;
  list-style: none;
  min-height: var(--tap-min);
}
.pb-range .pz-detail__summary::-webkit-details-marker { display: none; }
.pb-range .pz-detail__summary h3 { margin-bottom: 0; }
.pb-range .pz-detail__summary:hover h3 { color: var(--text-accent); }
.pb-range .pz-detail__summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; border-radius: var(--radius-xs); }
.pb-range .pz-detail__marker { position: relative; flex: 0 0 auto; width: 20px; height: 20px; color: var(--text-accent); }
.pb-range .pz-detail__marker::before,
.pb-range .pz-detail__marker::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: var(--hairline-width);
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast);
}
.pb-range .pz-detail__marker::after { transform: translate(-50%, -50%) rotate(90deg); }
.pb-range .pz-detail--acc[open] .pz-detail__marker::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
.pb-range .pz-detail__panel { margin-top: var(--space-md); }
.pb-range .pz-detail__panel > p { color: var(--text); }
.pb-range .pz-detail__panel > p + p { margin-top: var(--space-sm); }
.pb-range .pz-detail__panel .link-underline { margin-top: var(--space-md); }
.pb-range .pz-detail--acc[open] .pz-detail__panel { padding-bottom: var(--space-lg); }
@media (prefers-reduced-motion: no-preference) {
  .pb-range .pz-detail--acc[open] .pz-detail__panel { animation: pb-pz-reveal var(--dur-base) var(--ease-out); }
  @keyframes pb-pz-reveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* Features list — plain neutral bullets, tight rhythm. */
.pb-range .ticklist { display: flex; flex-direction: column; }
.pb-range .ticklist li {
  position: relative;
  padding: var(--space-3xs) 0 var(--space-3xs) var(--space-md);
  font-size: var(--fs-sm);
  color: var(--text);
}
.pb-range .ticklist li::before {
  content: ""; position: absolute; left: 2px; top: 0.72em;
  width: 5px; height: 5px;
  border-radius: var(--radius-circle);
  background: var(--text);
}

/* Spec sheet — dt/dd rows on hairlines. */
.pb-range .specsheet { display: flex; flex-direction: column; }
.pb-range .specsheet > div { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) 0; border-top: var(--rule); }
.pb-range .specsheet > div:last-child { border-bottom: var(--rule); }
.pb-range .specsheet dt { font-size: var(--fs-sm); color: var(--text-muted); }
.pb-range .specsheet dd { font-size: var(--fs-sm); color: var(--text); text-align: right; }

/* Care mini slider — three narrow portrait photos in view; scroll + snap; dots
   only (no arrows). Sage-accent dots. */
.pb-range .care-slider { margin-top: var(--space-md); }
.pb-range .care-slider__track {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--space-2xs);
}
.pb-range .care-slider__track::-webkit-scrollbar { display: none; }
.pb-range .care-slide {
  flex: 0 0 calc((100% - 2 * var(--gap)) / 3);
  margin: 0;
  scroll-snap-align: start;
}
.pb-range .care-slide .ph { width: 100%; aspect-ratio: 3 / 4; border-radius: var(--radius-media); }
/* Real-photography drop-in for the care slides; see the .pz-shot note above for
   why this sheet declares its own. Measured before: 158x158 inside a 158x210 well. */
.pb-range .care-slide .ph > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pb-range .care-slider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}
.pb-range .care-slider__dots { display: flex; gap: 8px; }
.pb-range .care-slider__dot {
  width: 11px; height: 11px;
  padding: 0;
  border-radius: var(--radius-circle);
  border: 1px solid var(--woodland-sage-deep);
  background: transparent;
  cursor: pointer;
}
.pb-range .care-slider__dot[aria-current="true"] { background: var(--woodland-sage); border-color: var(--woodland-sage); }

/* --- 4b/4d. PRODUCT-RAIL wrapper + arrows + --slider track (mockup rails.css).
   The shared .product-rail / .product-tile ship from pb-shell.css; these add the
   working-slider track (exactly four across at >=1024, arrows the affordance) plus
   the .rail positioning wrapper + gutter arrows the range rails use. --- */
@media (min-width: 1024px) {
  .pb-range .product-rail--slider {
    grid-auto-columns: calc((100% - 3 * var(--space-md)) / 4);
    overflow-x: auto;
  }
}
.pb-range .product-rail--slider {
  scroll-padding-inline: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pb-range .product-rail--slider::-webkit-scrollbar { width: 0; height: 0; display: none; }

.pb-range .rail { position: relative; }
.pb-range .rail__arrow {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--radius-circle);
  border: var(--rule-strong);
  background: var(--surface);
  color: var(--slate-deep);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.pb-range .rail__arrow svg { width: 24px; height: 24px; }
.pb-range .rail__arrow:hover,
.pb-range .rail__arrow:focus-visible { background: var(--bone-deep); color: var(--slate-deep); }
.pb-range .rail__arrow:disabled { opacity: 0.4; cursor: default; }
.pb-range .rail__arrow[hidden] { display: none; }
/* Desktop: the arrows ride above the rail as a right-aligned cluster. */
.pb-range .rail__arrow--prev { right: calc(var(--tap-min) + var(--space-2xs)); top: calc(-1 * var(--tap-min)); }
.pb-range .rail__arrow--next { right: 0; top: calc(-1 * var(--tap-min)); }
@media (max-width: 640px) {
  .pb-range .rail__arrow { display: none; }
}

/* Product-tile category chips — quiet hairline text chips under the name. */
.pb-range .tile-chips { display: flex; flex-wrap: wrap; gap: var(--space-3xs); margin-top: var(--space-3xs); }
.pb-range .tile-chips span {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 1px var(--space-2xs);
  border: var(--rule);
  border-radius: var(--radius-xs);
}
.pb-range .product-tile__price .from { margin-right: 0; }

/* --- 4c. FAQs MODULE — minimal replica of the mockup's .home-faq (native
   <details>/<summary>; space + hairlines, never boxes; zero JS). --- */
.pb-range .home-faq { padding-block: var(--section-gap-s); }
.pb-range .home-faq__rows { max-width: var(--measure); }
.pb-range .home-faq .faq-item { border-top: var(--rule); }
.pb-range .home-faq__rows > .faq-item:last-child { border-bottom: var(--rule); }
.pb-range .home-faq .faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  min-height: var(--tap-min);
  padding-block: var(--space-md);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: var(--fs-h4);
  color: var(--text-strong);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-snug);
  transition: color var(--dur-fast) var(--ease-standard);
}
.pb-range .home-faq .faq-item__q::-webkit-details-marker { display: none; }
.pb-range .home-faq .faq-item__q:hover { color: var(--text-accent); }
.pb-range .home-faq .faq-item__marker { position: relative; flex: 0 0 auto; width: 20px; height: 20px; color: var(--text-accent); }
.pb-range .home-faq .faq-item__marker::before,
.pb-range .home-faq .faq-item__marker::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: var(--hairline-width);
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast);
}
.pb-range .home-faq .faq-item__marker::after { transform: translate(-50%, -50%) rotate(90deg); }
.pb-range .home-faq .faq-item[open] .faq-item__marker::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
.pb-range .home-faq .faq-item__a { padding-bottom: var(--space-md); max-width: var(--measure); }
.pb-range .home-faq .faq-item__a p { color: var(--text); }
.pb-range .home-faq .faq-item__a p + p { margin-top: var(--space-sm); }
@media (prefers-reduced-motion: no-preference) {
  .pb-range .home-faq .faq-item[open] .faq-item__a { animation: pb-faq-reveal var(--dur-base) var(--ease-out); }
  @keyframes pb-faq-reveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* Recently-Viewed tail — trim the last section's bottom so the footer's own top
   air carries the (single, small) separation (mockup AE10a). */
.pb-range .section--recent { padding-bottom: var(--space-sm); }