/* =============================================================================
   FAQ band (sections/bs-faq.liquid) — sits between the in-action rail and the
   Yotpo reviews.

   Its own file rather than the end of bs-product.css: the section is new and
   self-contained, and bs-product.css is long enough that a whole new component
   at the bottom of it is harder to find than a file named after the thing. It
   still loads bs-product.css alongside this — .bss-container and the
   [data-bss-reveal] transitions come from there.

   The component this borrows from is the spec table (.bss-specrow), one band up
   the page: hairline-ruled rows on native <details>, a chevron riding the first
   line, the answer opening in the right-hand column. Same shape, one fewer
   column. Nothing here invents a new pattern — the point is that the FAQ reads
   as a sibling of the specs, not as a bolted-on accordion.
   ============================================================================= */

.bsf {
  /* The wider step, same as .bsa and .bs-dcta: this is the third place the page
     changes voice (owner photos above, our own answers here). The story bands
     keep 120 between themselves — see the note on .bsa. */
  padding-top: 160px;
  font-family: var(--font-display);
  font-weight: 400;
}

/* the .bss-h2 ramp — a peer of "Specifications" and "Beyond 2 in action".
   Colour set explicitly: Dawn wires h2 to --color-foreground, which lands pure
   #000, a hair off the #0a0a0c the rest of the page's near-black uses. */
.bsf-title {
  margin: 0 0 40px;
  color: #0a0a0c;
  font-size: clamp(32px, 3.4vw, 48px);
  font-weight: 400;
  line-height: clamp(40px, 3.9vw, 56px);
  letter-spacing: -.01em;
}
.bsf-title:has(+ .bsf-lede) { margin-bottom: 16px; }
.bsf-lede {
  margin: 0 0 40px;
  font-size: 18px; line-height: 24px;   /* Body Small 18/24 */
  color: #70777A;
  max-width: 62ch;
}

/* --- the list ---------------------------------------------------------------
   One line metric for the whole list, held in a variable: the chevron is a box
   of exactly this height pinned to the top of the row, which is what puts it on
   the question's first baseline instead of floating in the middle of a
   two-line question. Change the question's leading and the mark follows. */
.bsf-list {
  --bsf-line: 28px;
  border-top: 1px solid var(--hairline);
}

.bsf-row {
  display: grid;
  /* the .bss-specrow proportions, minus its number column */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 24px;
  padding: 32px 0;
  border-bottom: 1px solid var(--hairline);
}

.bsf-head {
  grid-column: 1;
  position: relative;
  /* room for the chevron at the column's right edge — it sits in the trailing
     space the column already had, so it costs no width and pushes nothing */
  padding-right: 40px;
  /* The row's 32px of breathing room belongs to .bsf-row, so the only thing
     actually tappable was the 24px line box of the question itself — on a phone,
     a 24px target with 32px of dead space above and below it that looks like
     part of the same control. The padding is borrowed onto the summary and the
     same amount taken straight back off as margin, so the target grows to 48px
     and the row's geometry is unchanged to the pixel. */
  padding-block: 12px;
  margin-block: -12px;
  cursor: pointer;
  list-style: none;   /* kills the default disclosure triangle (Firefox) */
}
.bsf-head::-webkit-details-marker { display: none; }
/* the outline belongs to the row, not to the text node inside it */
.bsf-head:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }

.bsf-q {
  margin: 0;
  color: #0a0a0c;
  /* Body Large, 22. It was 20, which is not a step on the deck scale — it sat
     between Body Small (18, what the answer beside it uses) and Body Large.
     Rounding down to 18 would have matched the spec table this component copies
     but flattened the one element a 13-row list is scanned by, so it goes the
     other way onto the nearest real token. */
  font-size: 22px;
  font-weight: 400;
  line-height: var(--bsf-line);
  letter-spacing: -.01em;
}

/* explicit rather than relying on auto-placement: in browsers that support
   ::details-content the answer div is no longer a grid item (the pseudo is),
   and in browsers that don't, it is — so both are pinned to the same column */
.bsf-a,
.bsf-row::details-content { grid-column: 2; }

.bsf-a {
  color: #70777A;
  font-size: 18px;
  line-height: 28px;
  max-width: 68ch;
}
/* richtext ships <p> wrappers; the row's padding owns the outer rhythm, so only
   the space BETWEEN paragraphs is set here */
.bsf-a > :first-child { margin-top: 0; }
.bsf-a > :last-child { margin-bottom: 0; }
.bsf-a p { margin: 0 0 16px; }
.bsf-a a { color: var(--brand); text-underline-offset: 3px; }
.bsf-a ul, .bsf-a ol { margin: 0 0 16px; padding-left: 20px; }
.bsf-a li { margin-bottom: 8px; }
.bsf-a strong { font-weight: 400; color: #0a0a0c; }   /* the system has no bold */

/* a box of one line-height, pinned to the top of the row: the mark rides the
   question's first line rather than centring itself on a two-line question */
.bsf-mark {
  position: absolute; right: 0; top: 0;
  width: var(--bsf-line); height: var(--bsf-line);
  display: grid; place-items: center;
  color: #70777A;
  transition: transform 320ms var(--ease-signature), color var(--dur-fast) linear;
}
/* down = "expand me", up = "collapse me" */
.bsf-row[open] .bsf-mark { transform: rotate(180deg); }
.bsf-head:hover .bsf-mark { color: #0a0a0c; }

/* Height animation needs ::details-content, which Safari and Firefox don't have
   yet; there it degrades to an instant open/close, which is the same behaviour
   a plain <details> has always had. interpolate-size is scoped to the list
   rather than :root so nothing else on the page gains auto-height transitions.
   Verbatim from .bss-spectable — the two components open at the same speed. */
@supports selector(::details-content) {
  .bsf-list { interpolate-size: allow-keywords; }
  .bsf-row::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition: block-size 380ms var(--ease-signature),
                opacity 240ms var(--ease-signature),
                content-visibility 380ms allow-discrete;
  }
  .bsf-row[open]::details-content { block-size: auto; opacity: 1; }
}

/* --- closing hand-off to the customer Q&A ---------------------------------- */
.bsf-more {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0;
  padding-top: 32px;
  font-size: 18px;
  line-height: 24px;
}
.bsf-more-label { color: #70777A; }
/* the three destinations wrap as one unit, so a narrow window breaks between
   links rather than orphaning one under the label */
.bsf-more-links {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 12px;
}
/* violet on a text link, matching .yotpo-read-more in the widget below. Three
   of them on one line is more violet than this system usually spends, which is
   why the arrow glyph came off when the single link became a cluster: the
   colour is doing the work, and an arrow per link would turn a quiet line into
   a button row. */
.bsf-more-link {
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) linear;
}
.bsf-more-link:hover { border-bottom-color: var(--brand); }
/* the separator is punctuation, not a third colour: it stays in the label grey
   so the eye reads three links and not five marks */
.bsf-more-sep { color: #70777A; }

/* the anchor the link lands on — the Q&A heading is a custom-liquid section in
   the product template, so it carries this class rather than owning a rule.
   120px clears the floating pill + ticker (18 + 76 + 38 = 132, on-scale down
   to 120 since the heading has its own 80px of air above it). */
.bsf-anchor { scroll-margin-top: 120px; }

@media (max-width: 991.98px) {
  .bsf { padding-top: 120px; }       /* the 160 → 120 mobile compression */
  .bsf-list { --bsf-line: 24px; }
  .bsf-row {
    grid-template-columns: 1fr;
    row-gap: 16px;
    padding: 24px 0;
  }
  .bsf-head { grid-column: 1; }
  .bsf-a,
  .bsf-row::details-content { grid-column: 1 / -1; }
  .bsf-q { font-size: 18px; }
  .bsf-title { margin-bottom: 32px; }

  /* Each destination is wider than half this column, so the cluster resolves to
     one link per line whatever we do. Made explicit as a column, and the
     middots come off: as a separator between two links on a line they are
     punctuation, but at the end of a wrapped line they are just a mark hanging
     in the gutter. */
  .bsf-more { display: block; }
  .bsf-more-links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 8px; }
  .bsf-more-sep { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bsf-mark,
  .bsf-row::details-content { transition: none; }
}