@charset "UTF-8";
/* =============================================================
   Boiler Quote — Summary Layout - 2608251746
   -------------------------------------------------------------
   REPLACES boiler-quote-summary-layout-2608240026.scss — delete that one
   first.

   CHANGE IN THIS VERSION
     Rules for the expired view. Its heading and paragraphs had none, so
     they fell back to browser defaults inside a container that strips
     margins — everything ran together as one block.

   EARLIER CHANGE
     'What you told us' is a plain list rather than a collapsed <details>,
     so the toggle, the rotating marker and the count are gone. Fewer rules
     for the same result.

   PAIRED WITH: boiler-quote-summary-2608251723.php, which outputs the
   markup this styles.

   LAYOUT AND STRUCTURE ONLY. Automatic.css owns how things LOOK — the
   colour palette, the type scale, radii, the button's own appearance.
   This file only does what ACSS cannot: the arrangement of a set of
   classes it has never heard of.

     ACSS      — colour, type scale, radius, button appearance
     This file — the price block, the trust row, the boiler strip, the
                 line list, the CTA panel, the collapsible answers

   If something here starts fighting ACSS, this file is the one to cut.

   EVERY COLOUR AND SIZE IS A var() WITH A FALLBACK. The variable is the
   intended source; the fallback is a safety net so a site that has not
   set a token still lays out rather than collapsing. Point them at your
   own ACSS tokens per site — the names below are the common ACSS ones.

   WHY THE PRICE IS THE FIRST THING
     The old page led with a full-height photograph and put the total at
     the bottom of a table. The price is what the customer came for.

   Written as SCSS in WPCodeBox, so // comments are valid.

   Run: Site wide, or limited to the summary page.
   ============================================================= */
/* ---------- Tokens ---------- */
.bq-summary {
  --bq-s-gap: 1.5rem;
  --bq-s-radius: var(--radius-m, .5rem);
  --bq-s-border: 1px solid var(--neutral-ultra-light, #e8e8e8);
  --bq-s-muted: var(--neutral-medium, #6b6b6b);
  --bq-s-tint: var(--neutral-ultra-light, #f6f6f6);
  --bq-s-accent: var(--action, #2b7a4b);
  max-inline-size: 46rem;
  margin-inline: auto;
}
/* ---------- Reference line ---------- */
.bq-summary-ref {
  margin-block: 0 var(--bq-s-gap);
  font-size: var(--text-xs, 0.8rem);
  color: var(--bq-s-muted);
}
.bq-summary-ref-sep {
  margin-inline: 0.25em;
}
/* ---------- The price, as the headline ---------- */
/* Deliberately the largest thing on the page. Everything else is
   supporting evidence for this number. */
.bq-summary-headline {
  margin-block-end: 1rem;
}
.bq-summary-headline-label {
  margin-block: 0;
  font-size: var(--text-s, 0.9rem);
  color: var(--bq-s-muted);
}
.bq-summary-headline-price {
  margin-block: 0.1rem 0;
  font-size: var(--h1, 2.6rem);
  font-weight: 500;
  line-height: 1.05;
}
/* ---------- Trust row ---------- */
/* Sits directly under the price, because that is the moment the customer
   is deciding whether the number is believable.

   auto-fit rather than three fixed columns, so it becomes one column on a
   narrow screen with no breakpoint to maintain. */
.bq-summary-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.5rem;
  margin-block: 0 var(--bq-s-gap);
  padding: 0;
  list-style: none;
}
.bq-summary-trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--bq-s-radius);
  background: var(--bq-s-tint);
  font-size: var(--text-xs, 0.8rem);
}
/* The icon span is empty markup for whatever icon font the site uses.
   With no icon set it collapses to nothing rather than leaving a gap. */
.bq-summary-trust-icon:empty {
  display: none;
}
/* ---------- The boiler strip ---------- */
/* Thumbnail plus specs. The photograph identifies the boiler and ties the
   page back to the results card that was clicked — it does not need to be
   the tallest element on the page, which is what it was before. */
.bq-summary-boiler {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem;
  margin-block-end: 2rem;
  border-radius: var(--bq-s-radius);
  background: var(--bq-s-tint);
}
.bq-summary-boiler-image {
  flex: none;
  inline-size: 5rem;
  block-size: 6.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  border-radius: calc(var(--bq-s-radius) - 2px);
  overflow: hidden;
  /* The brand tint, if the results page set one on an ancestor. Falls back
     to white, which is correct for a cut-out boiler on a pale panel. */
  background: var(--bq-tint, #fff);
}
/* Same rule as the results card: a definite block-size on the wrapper, and
   the image constrained to it. max-block-size alone caps a height without
   creating one, so the image would overflow. */
.bq-summary-boiler-image img {
  max-inline-size: 100%;
  max-block-size: 100%;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
}
.bq-summary-boiler-detail {
  min-inline-size: 0;
}
.bq-summary-boiler-name {
  margin-block: 0;
  font-size: var(--text-m, 1rem);
  font-weight: 500;
}
.bq-summary-boiler-specs, .bq-summary-boiler-dims {
  margin-block: 0.2rem 0;
  font-size: var(--text-s, 0.875rem);
  color: var(--bq-s-muted);
}
.bq-summary-change {
  margin-block: 0.6rem 0;
  font-size: var(--text-s, 0.875rem);
}
/* ---------- Section heading ---------- */
.bq-summary-heading {
  margin-block: 0 0.5rem;
  font-size: var(--h4, 1.15rem);
}
/* ---------- What's included ---------- */
/* A list with hairline rules, not a two-column table. The old table
   right-aligned labels against left-aligned values, leaving a gutter down
   the middle that the eye had to cross on every row. */
.bq-summary-lines {
  margin-block: 0 var(--bq-s-gap);
  padding: 0;
  list-style: none;
  font-size: var(--text-s, 0.9rem);
}
.bq-summary-line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.7rem;
  border-block-end: var(--bq-s-border);
}
.bq-summary-line-value {
  font-weight: 500;
  white-space: nowrap;
}
/* 'Included' carries the same weight as a price, so bundled value reads as
   value rather than as an absence of one. */
.bq-summary-line.is-included .bq-summary-line-value {
  color: var(--bq-s-accent);
}
.bq-summary-line.is-total {
  border-block-end: 0;
  padding-block-start: 0.9rem;
  font-size: var(--text-m, 1.05rem);
}
.bq-summary-line.is-total .bq-summary-line-label {
  font-weight: 500;
}
/* ---------- Save my quote ---------- */
/* A panel, not a link. Previously this and the change-boiler link were
   both plain green text — the primary action and the escape hatch looked
   identical. */
.bq-summary-cta {
  padding: 1rem;
  margin-block-end: var(--bq-s-gap);
  border-radius: var(--bq-s-radius);
  background: var(--bq-s-tint);
}
.bq-summary-cta-text {
  margin-block: 0 0.75rem;
  font-size: var(--text-s, 0.875rem);
  color: var(--bq-s-muted);
}
/* Structure only — ACSS owns the button's colour, radius and type. Add an
   ACSS button class to the link in the PHP if you would rather it inherit
   the site's button styling wholesale. */
.bq-summary-cta-link {
  display: block;
  padding: 0.85rem 1rem;
  border-radius: var(--bq-s-radius);
  background: var(--bq-s-accent);
  color: #fff;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
}
.bq-summary-saved {
  padding: 1rem;
  margin-block-end: var(--bq-s-gap);
  border-radius: var(--bq-s-radius);
  background: var(--bq-s-tint);
  font-size: var(--text-s, 0.9rem);
}
/* ---------- What you told us ---------- */
/* Shown in full. It was collapsed behind a <details> and is not any more:
   the information is useful, it sits below the offer where it cannot
   compete with it, and a toggle made the customer decide whether to bother.

   The rule above it separates it from the CTA panel — this is reference
   material rather than part of the offer. */
.bq-summary-answers {
  border-block-start: var(--bq-s-border);
  padding-block-start: 1.5rem;
}
.bq-summary-answer-list {
  margin-block: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-s, 0.875rem);
}
.bq-summary-answer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.5rem;
  border-block-end: var(--bq-s-border);
}
.bq-summary-answer:last-child {
  border-block-end: 0;
}
.bq-summary-answer-label {
  color: var(--bq-s-muted);
}
/* ---------- Expired quote ---------- */
/* The customer came back ready to buy and found a closed door. The page's
   job is to get them to a fresh quote or onto the phone, so it is spaced
   for reading rather than packed like the quote itself. */
.bq-summary-expired-heading {
  margin-block: 0 0.75rem;
  font-size: var(--h2, 1.75rem);
}
.bq-summary-expired-intro {
  margin-block: 0 1rem;
  line-height: 1.6;
}
/* The CTA panel is reused from the live summary, so it only needs its
   spacing adjusting for a page with no line-item list above it. */
.bq-summary-expired .bq-summary-cta {
  margin-block: 1.5rem 0;
}
.bq-summary-expired-call {
  margin-block: 1.25rem 0;
  line-height: 1.6;
  color: var(--bq-s-muted);
}
/* ---------- Missing quote ---------- */
.bq-summary-missing {
  max-inline-size: 46rem;
  margin-inline: auto;
  padding: 1.5rem;
  border-radius: var(--bq-s-radius);
  background: var(--bq-s-tint);
}
/* ---------- Narrow screens ---------- */
/* The two-column rows become stacked pairs. A label and a value pushed to
   opposite edges of a 340px screen are two separate things to read, not
   one row. */
@media (max-width: 30rem) {
  .bq-summary-line, .bq-summary-answer {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.25rem 1rem;
  }
  .bq-summary-boiler {
    gap: 0.75rem;
  }
  .bq-summary-boiler-image {
    inline-size: 4rem;
    block-size: 5.25rem;
  }
}