/* GW FAQ — Figma 32:839 (desktop 1440) / 32:1801 (mobile 390); open state and
   answer copy from 32:1185.
   Mobile-first: base = mobile 390 exact, >=1025 desktop 1440 exact. Only three
   things change across the breakpoint — section padding (64/16 -> 96/64), the
   content cap (fluid -> 1312px) and the heading (40px -> 48px). Item geometry,
   the 16px item gap and the 24px item padding are invariant in the frames, so
   they are declared once and never overridden.
   NO font-family is declared: the section uses semantic tags and inherits the
   merchant's type settings, which are ebgaramond_n4 for both header and body —
   the design's only family. The gw-why-us precedent.
   line-height is `normal` throughout: every Figma text node emits
   leading-[normal], NOT the lineHeight:100 carried in the style definitions.
   Measured: 23px at 18px, 52px/line at 40px, 63px at 48px (~1.30).
   Border-radius is 0 everywhere — 19 of 19 item instances emit none.
   The 1px #F2EAD8 item border is an INSET box-shadow, not a border: Figma
   strokes do not add to auto-layout size, so a real 1px border would make the
   item 82px instead of the frame's 80px (24 + 32 + 24). box-shadow draws
   inside with zero layout impact and leaves `outline` free for the focus ring.
   Item height is deliberately NOT set. 24px padding + the 32px chevron gives
   exactly 80px, and a question that wraps to two lines grows the item to 94px
   rather than clipping — which is what the mobile frame's hard h-[80px] does.
   Colours reach CSS as --gw-faq-* from the section's scoped <style>; every one
   carries its Figma value as the var() fallback, so the section renders
   correctly with all colour settings blank. */
.gw-faq{padding:64px 16px;background-color:var(--gw-faq-bg,transparent)}
.gw-faq__wrap{display:flex;flex-direction:column;gap:40px;width:100%;margin-inline:auto}
.gw-faq__heading{margin:0;font-size:40px;font-weight:400;line-height:normal;letter-spacing:0;text-align:left;color:var(--gw-faq-heading-color,#191a1a)}
.gw-faq__list{display:flex;flex-direction:column;gap:16px;width:100%}
.gw-faq__item{border-radius:0;background-color:transparent;box-shadow:inset 0 0 0 1px var(--gw-faq-border-color,#f2ead8)}
.gw-faq__summary{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;padding:24px;cursor:pointer;list-style:none}
.gw-faq__summary::-webkit-details-marker{display:none}
.gw-faq__summary::marker{content:""}
.gw-faq__summary:focus-visible{outline:2px solid var(--gw-faq-question-color,#242424);outline-offset:-2px}
.gw-faq__summary--static{cursor:default;box-sizing:border-box;min-height:80px}
.gw-faq__item[open] .gw-faq__summary{padding-bottom:0}
.gw-faq__question{flex:1 1 auto;min-width:1px;margin:0;font-size:18px;font-weight:400;line-height:normal;letter-spacing:0;text-align:left;color:var(--gw-faq-question-color,#242424)}
.gw-faq__icon{flex:0 0 32px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--gw-faq-question-color,#242424);transform:rotate(90deg);transition:transform .2s ease}
.gw-faq__icon svg{display:block;width:32px;height:32px}
.gw-faq__item[open] .gw-faq__icon{transform:rotate(-90deg)}
.gw-faq__answer{margin:10px 0 0;padding:0 24px 24px;font-size:18px;font-weight:400;line-height:normal;letter-spacing:0;text-align:left;color:var(--gw-faq-answer-color,#242424)}
.gw-faq__answer>*{margin:0}
.gw-faq__answer>*+*{margin-top:10px}
.gw-faq__answer a{color:inherit}
.gw-faq__placeholder{width:100%;padding:24px;font-size:14px;line-height:21px;text-align:center;color:#6a5632;background-color:#fdfaf4;outline:1px dashed #a88e57;outline-offset:-1px}
@supports selector(::details-content){.gw-faq__list{interpolate-size:allow-keywords}.gw-faq__item::details-content{block-size:0;overflow:hidden;content-visibility:hidden;transition:block-size .25s ease,content-visibility .25s allow-discrete}.gw-faq__item[open]::details-content{block-size:auto;content-visibility:visible}}
@media screen and (min-width:1025px){.gw-faq{padding:96px 64px}.gw-faq__wrap{max-width:1312px}.gw-faq__heading{font-size:48px}}
@media (prefers-reduced-motion:reduce){.gw-faq__icon{transition:none}.gw-faq__item::details-content{transition:none}}

/* ── Two-column variant — Figma 29:1127 / 30:11534, open state 29:1233 ──────
   Appended, never edited into the rules above: every declaration here is
   scoped to .gw-faq--2up except the list rules, which the single-column
   instance cannot match because none of its answers contain a list.
   Desktop grid: (1312 - 48) / 2 = 632, the frame's item width exactly.
   align-items:start so an open item grows alone instead of stretching its
   row sibling; Figma's overflow:hidden on the container is NOT reproduced,
   it would clip the expanding answer.
   Answer 16px / #3c3c3c: the SIZE is this variant's (29:1233 Body M against
   32:1185's 18px); the COLOUR travels through the existing gw_answer_color
   setting, so it stays a per-instance value and no default moves here.
   Paragraph gap 16px, not the base 10px: 29:1233 draws the break as an empty
   zero-width-space paragraph, which carries no numeric margin to copy — a
   full blank line is what it renders as.
   The two li declarations are load-bearing, not tidy-up: assets/theme.min.css
   gives every li a margin-bottom:4.5px that a flex/grid parent ADDS to its
   height, and a bare li measures 29px against a 21px line box until
   line-height is set on the ITEM. Both are on record from the gw-footer run. */
.gw-faq__answer ul{margin:0;padding-inline-start:24px;list-style:disc}
.gw-faq__answer ul li{margin:0;line-height:normal}
.gw-faq__answer ul li+li{margin-top:0}
.gw-faq--2up .gw-faq__heading{text-transform:capitalize}
.gw-faq--2up .gw-faq__answer{font-size:16px}
.gw-faq--2up .gw-faq__answer>*+*{margin-top:16px}
@media screen and (min-width:1025px){.gw-faq--2up .gw-faq__heading{text-transform:none}.gw-faq--2up .gw-faq__list{display:grid;grid-template-columns:repeat(2,1fr);align-items:start;gap:16px 48px}}

/* ── Two-column variant: independent columns (BugHerd #12) ────────────────
   The section renders the 2-up items into two .gw-faq__col wrappers — odd
   items left, even right — so on desktop each column stacks on its own and an
   open item no longer grows a grid row the other column shares (that pushed
   the next right-hand question down to line up with the left one). Below 1025
   the wrappers are display:contents and --gw-faq-i puts the single list back
   in 1, 2, 3… order. */
.gw-faq--2up .gw-faq__col{display:contents}
.gw-faq--2up .gw-faq__item,.gw-faq--2up .gw-faq__placeholder{order:var(--gw-faq-i)}
@media screen and (min-width:1025px){.gw-faq--2up .gw-faq__col{display:flex;flex-direction:column;gap:16px;min-width:0}}