/* ==========================================================================
   widgets.css — the review widgets page. Loads after feature-v2/v3, show.css, pillars-lab.css and home.css,
   and before widgets-real.css, which carries the ported product widget CSS.

   This file holds only the page's own furniture: the hero's website fragment, the customiser's control rail and
   the neutral panel the widget sits on, and the booking page in a browser frame. Every widget inside them is the
   real one (see widgets-real.css and docs/pipeline/review-widgets/port-notes.md).
   Wave 2, 2026-09-04: the invented widget CSS (.wpv*, .wsite*, .brow-badge, .brow-toast, .m-badge) is gone.
   ========================================================================== */

/* ---------- hero: a fragment of Kerbside Auto's own website, with the widget in it ---------- */
.widgets-page .hero-moment { display: flex; justify-content: flex-end; padding: 12px 0; }
.widgets-page .hero-moment .moment { max-width: 430px; gap: 14px; }
.wfrag { border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(15, 13, 25, .06), 0 30px 60px -28px rgba(15, 13, 25, .45); overflow: hidden; }
.wfrag-bar { display: flex; align-items: center; gap: 16px; padding: 13px 18px; border-bottom: 1px solid rgba(15, 13, 25, .07); font: 500 13px/1.3 var(--font-display); color: var(--v2-body); }
.wfrag-bar b { font: 600 15px/1.2 var(--font-display); color: var(--ink); }
.wfrag-body { padding: 18px 18px 6px; }
.wfrag-body h4 { font: 500 21px/1.2 var(--font-serif); letter-spacing: -.01em; color: var(--ink); }
.wfrag-body p { margin-top: 5px; font: 400 14px/1.5 var(--font-body); color: var(--v2-body); }
/* the widget's box is this element, so the ported container queries measure it */
.wfrag-stage { container: widget / inline-size; }
@media (max-width: 991px) { .widgets-page .hero-moment { justify-content: center; } }

/* a left-aligned section head, to vary the rhythm from the centred ones */
.v2 .head--left { margin-left: 0; text-align: left; max-width: 720px; }
.v2 .head--left .sub { margin-inline: 0; }

/* ---------- the customiser: three controls on the left, the real widget on a plain panel ---------- */
/* No card around it: the panel is the page the widget is embedded in, sitting on the section's white ground. */
.wcfg { display: grid; grid-template-columns: 272px minmax(0, 1fr); grid-template-rows: auto auto; gap: 20px 28px; }
.wcfg-rail { grid-column: 1; grid-row: 1; display: grid; gap: 24px; align-content: start; }
.wcfg-row { display: grid; gap: 9px; }
.wcfg-label { font: 600 13.5px/1.3 var(--font-display); color: var(--ink); }
.wcfg-label em { margin-left: 6px; font-style: normal; font-weight: 500; color: var(--v2-body); }
.wcfg-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.wcfg-opts button { padding: 9px 14px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(15, 13, 25, .12); font: 500 14px/1.3 var(--font-display); color: var(--v2-body); cursor: pointer; transition: color .2s, background-color .25s var(--ease-out), box-shadow .2s; }
.wcfg-opts button:hover { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(15, 13, 25, .3); }
.wcfg-opts button.is-on { background: var(--ink); color: #fff; box-shadow: none; }
.wcfg-opts button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.wcfg-opts--stack { display: grid; grid-template-columns: 1fr; gap: 6px; }
.wcfg-opts--stack button { text-align: left; padding: 10px 14px; border-radius: 12px; }
/* the product's own one-line description of the layout in view */
.wcfg-desc { margin: 3px 0 0; font: 400 13px/1.45 var(--font-body); color: var(--v2-body); }
/* accent swatches: the four the product offers */
.wcfg-swatches { gap: 10px; align-items: center; }
.wcfg-swatches button { width: 30px; height: 30px; padding: 0; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(15, 13, 25, .12); }
.wcfg-swatches button:hover { box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(15, 13, 25, .4); }
.wcfg-swatches button.is-on { background: var(--sw); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }

/* the neutral panel: a plain page with one line of its own text, and the widget on it */
.wstage { grid-column: 2; grid-row: 1; position: relative; container: widget / inline-size; min-height: 470px; padding: 16px 16px 20px; border-radius: 16px; background: var(--v2-card); box-shadow: inset 0 0 0 1px var(--v2-line); overflow: hidden; }
.wstage-line { margin: 0; font: 500 13.5px/1.4 var(--font-display); color: var(--v2-body); text-align: center; }
/* badge and toast are floating corner widgets: the loader pins them 16px from the bottom and the side, in a box of
   min(420px, 100vw - 32px), which is what caps the toast at its 384px. Neither needs a tall page under it. */
.cw2-corner { position: absolute; left: 16px; bottom: 16px; width: min(404px, calc(100% - 32px)); }
.wstage.is-float { min-height: 380px; }

/* the embed line under both columns */
.wcfg-embed { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
.wcfg-embed code { display: block; padding: 12px 14px; border-radius: 10px; background: var(--ink); color: #dfe6ff; font: 400 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.wcfg-note, .brow-note { font-size: 13px; }
.wcfg-note { max-width: none; margin-top: 14px; }

@media (max-width: 991px) {
  /* one column, and the panel stays in view under the nav so a tap on any control changes something you can see */
  .wcfg { grid-template-columns: 1fr; gap: 18px; }
  .wcfg-rail, .wstage, .wcfg-embed { grid-column: 1; grid-row: auto; }
  .wstage { order: -1; position: sticky; top: calc(var(--nav-h) + 8px); z-index: 2; min-height: 240px; max-height: min(60vh, 520px); }
  .wcfg-rail { order: 0; gap: 20px; }
  .wcfg-embed { order: 1; grid-template-columns: 1fr; gap: 8px; }
  .wcfg-opts--stack { display: flex; }
  .wcfg-opts--stack button { text-align: center; padding: 9px 14px; border-radius: 999px; }
}

/* ---------- where people hesitate: the highest-stakes page on a workshop's site, a used car enquiry ----------
   The mock's own button is deliberately muted and square: nothing in a mock may read as one of this site's CTAs. */
.brow { position: relative; max-width: 900px; margin: 0 auto; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--v2-line), var(--v2-shadow); overflow: hidden; font-family: var(--font-body); }
.brow-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--v2-line); background: var(--v2-card); }
.brow-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d9dce8; }
.brow-bar span { margin-left: 10px; padding: 5px 12px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--v2-line); font: 400 13px/1.3 var(--font-body); color: var(--v2-body); }
.brow-page { position: relative; container: widget / inline-size; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 28px; padding: 30px 34px 34px; }
/* the listing: a photo area, the car, the price, the specs */
.brow-photo { position: relative; height: 176px; border-radius: 12px; background: linear-gradient(160deg, #eff1f7, #dfe4f0); box-shadow: inset 0 0 0 1px rgba(15, 13, 25, .06); }
.brow-photo span { position: absolute; left: 12px; bottom: 12px; padding: 4px 9px; border-radius: 999px; background: rgba(15, 13, 25, .55); color: #fff; font: 500 13px/1.3 var(--font-display); }
.brow-listing h4 { margin-top: 18px; font: 500 25px/1.15 var(--font-serif); letter-spacing: -.01em; color: var(--ink); }
.brow-price { margin-top: 6px; font: 600 19px/1.3 var(--font-display); color: var(--ink); }
.brow-price small { font: 400 14px/1.3 var(--font-body); color: var(--v2-body); }
.brow-specs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.brow-specs li { padding: 6px 11px; border-radius: 8px; background: var(--v2-card); font: 500 13px/1.3 var(--font-display); color: var(--v2-body); }
.brow-blurb { margin-top: 14px; max-width: 42ch; font: 400 14px/1.55 var(--font-body); color: var(--v2-body); }
/* the enquiry card: two fields, one muted button, and the widget under it */
.brow-enq { align-self: start; padding: 18px 20px 20px; border-radius: 14px; background: var(--v2-card); }
.brow-enq > b { display: block; margin-bottom: 12px; font: 600 15px/1.3 var(--font-display); color: var(--ink); }
.brow-field { display: grid; gap: 3px; padding: 9px 13px; margin-bottom: 9px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px rgba(15, 13, 25, .14); }
.brow-field small { font: 500 13px/1.3 var(--font-display); color: var(--v2-body); }
.brow-field b { font: 500 14px/1.35 var(--font-body); color: var(--ink); }
.brow-field b.ph { font-weight: 400; color: #6b7088; }
.brow-btn { display: inline-block; margin-top: 4px; padding: 9px 15px; border-radius: 8px; background: #e7eaf2; box-shadow: inset 0 0 0 1px rgba(15, 13, 25, .12); font: 500 14px/1.3 var(--font-display); color: #3c4257; }
/* Testimonial Avatars, inline where the product puts it: directly under the button. The widget keeps its own
   white surface, as a real embed does on a tinted section. */
.brow-strip { margin-top: 2px; border-radius: 10px; }
.brow-note { max-width: 900px; margin: 14px auto 0; }
@media (max-width: 767px) {
  .brow-page { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
  .brow-photo { height: 140px; }
}
@media (max-width: 479px) {
  .brow-bar span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------- how it works, card 2: the AggregateRating the widget injects.
   Never a Google result with stars under the business's own page (claims.md §A4: self-serving rich results ended in 2019) ---------- */
.shot--schema { display: grid; align-content: start; font-size: 13px; }
.shot--schema .shot-h { font-size: 13px; }
.schema-code { margin: 0; padding: 14px 16px; border-radius: 10px; background: var(--ink); overflow-x: auto; }
.schema-code code { display: block; font: 400 13px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #dfe6ff; white-space: pre; }
.schema-code i { font-style: normal; color: #9fb4ff; }
.schema-code em { font-style: normal; color: #fff; }