/* ============================================================
   Step-by-step configurator - TEST SANDBOX (EZ Door Plus 2 only)
   Loaded only for slug ez-door-plus-2 via inc/test-product-template.php
   v2: Brick-Anew branding (white / #b01733 red / Manrope), glass tiles,
   mesh step cards, swatch hover preview, measuring-guide link.
   ============================================================ */

.cfg {
  position: relative;
  border: 1.5px solid #e8e8e8;
  background: #fff;
  border-radius: 12px;
  padding: 24px 24px 20px;
  margin: 6px 0 10px;
}
.cfg-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b01733;
  margin-bottom: 4px;
}
.cfg-title {
  font-family: 'Manrope', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: #111;
  margin: 0 0 14px;
}
.cfg-progress { text-align: right; font-size: 12px; color: #888; margin-bottom: 6px; }
.cfg-progress b { color: #111; }

/* Stepper */
.cfg-stepper {
  list-style: none;
  display: flex;
  margin: 0 0 22px;
  padding: 0;
  counter-reset: cfgstep;
}
.cfg-stepper li {
  counter-increment: cfgstep;
  flex: 1;
  position: relative;
  text-align: center;
  cursor: pointer;
  padding-top: 2px;
  min-width: 0;
}
.cfg-stepper li::before {
  content: '';
  position: absolute;
  top: 15px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: #ececec;
}
.cfg-stepper li:first-child::before { display: none; }
.cfg-dot {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #ddd;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  color: #999;
}
.cfg-dot::before { content: counter(cfgstep); }
/* Completed steps go GREEN (client 2026-07-30); the current/unfinished step
   keeps the red ring below. */
.cfg-stepper li.is-done .cfg-dot { background: #1f9d57; border-color: #1f9d57; color: #fff; }
.cfg-stepper li.is-done .cfg-dot::before { content: '\2713'; }
.cfg-stepper li.is-current .cfg-dot { border-color: #b01733; color: #b01733; box-shadow: 0 0 0 3px rgba(176,23,51,0.1); }
.cfg-stepper li.is-locked { cursor: default; opacity: 0.4; }
.cfg-step-name { display: block; font-size: 11px; font-weight: 600; color: #555; margin-top: 5px; }
.cfg-step-value {
  display: block;
  font-size: 10px;
  color: #999;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
}

/* Step panels */
.cfg-step { display: none; }
.cfg-step.is-active { display: block; animation: cfgFade 0.18s ease; }
@keyframes cfgFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.cfg-step-title {
  font-family: 'Manrope', sans-serif;
  font-size: 19px;
  font-weight: 800;
  color: #111;
  margin: 0 0 14px;
}
/* Sub-line under a step title (Mount, Confirm): sits close to the title, with
   room before the first option so the label below it isn't crowded. */
.cfg-step-sub {
  margin: -4px 0 20px;
  font-size: 14px;
  line-height: 1.5;
  color: #6f675f;
}
.cfg-shake { animation: cfgShake 0.3s ease; }
@keyframes cfgShake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* Hints follow the theme's existing prompt style */
.cfg-hint {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #fff7f8;
  border: 1px dashed #e6b8c2;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  color: #8a5560;
  margin: 14px 0 0;
}
.cfg-hint .fas { color: #b01733; margin-top: 2px; }

.cfg-guide-link {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 13px 14px;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: #111;
  text-decoration: none;
  transition: border-color 0.15s;
}
.cfg-guide-link:hover { border-color: #b01733; color: #b01733; }
.cfg-guide-link .fa-ruler-combined { color: #b01733; }
.cfg-guide-link .fa-chevron-right { margin-left: auto; font-size: 11px; color: #999; }

/* Step 1: brand (partial's own label is redundant under the step title) */
.cfg .ez-brand-group .product-option-label { display: none; }
.cfg .ez-brand-group { margin-bottom: 0; }

/* Step 3: measurements */
.cfg-diagram { display: flex; justify-content: center; margin: 4px 0 16px; }
.cfg-diagram svg { width: 100%; max-width: 320px; height: auto; }
.cfg-measure-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
.cfg-measure-grid .wc-pao-addon-container { margin-bottom: 10px; }

/* Add-on fields inside the configurator */
.cfg .wc-pao-addon-container { margin-bottom: 16px; }
.cfg .wc-pao-addon-name { font-weight: 600; font-size: 14px; color: #333; }
.cfg .wc-pao-addon-description { font-size: 12px; color: #888; }
.cfg .wc-pao-addon-container input[type="text"],
.cfg .wc-pao-addon-container input[type="number"],
.cfg .wc-pao-addon-container select {
  width: 100%;
  padding: 11px 12px;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  font-family: 'Manrope', sans-serif;
  background: #fff;
}
.cfg .wc-pao-addon-container input:focus,
.cfg .wc-pao-addon-container select:focus { outline: none; border-color: #b01733; }
/* Our totals panel replaces the plugin's inline totals line */
.cfg #product-addons-total { display: none; }

/* Swatch hover preview */
.cfg-swatch-preview {
  position: absolute;
  z-index: 40;
  width: 140px;
  pointer-events: none;
  background: #fff;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #333;
}
.cfg-swatch-preview-chip {
  display: block;
  width: 100%;
  height: 96px;
  border-radius: 7px;
  margin-bottom: 6px;
  border: 1px solid rgba(0,0,0,0.08);
}

/* Step 5: glass tiles (JS-built; the original dot row gets hidden) */
.cfg-glass-group .color-swatches { display: none; }
.cfg-glass-group > .product-option-label { display: none; }
.cfg-glass-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cfg-glass-tile {
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  background: #fff;
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cfg-glass-tile:hover { border-color: #b01733; }
.cfg-glass-tile.is-selected { border-color: #b01733; box-shadow: 0 0 0 3px rgba(176,23,51,0.1); }
.cfg-glass-chip {
  display: block;
  width: 100%;
  height: 64px;
  border-radius: 7px;
  border: 1px solid rgba(0,0,0,0.08);
  margin-bottom: 10px;
}
.cfg-glass-name { display: block; font-size: 14px; font-weight: 700; color: #111; }
.cfg-glass-desc { display: block; font-size: 11px; color: #888; margin-top: 3px; line-height: 1.4; }

/* Step 6: mesh cards (JS-built; the raw select gets hidden) */
.cfg-mesh-skinned select.wc-pao-addon-select { display: none; }
.cfg-mesh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.cfg-mesh-card {
  position: relative;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  background: #fff;
  padding: 14px 10px 12px;
  text-align: center;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cfg-mesh-card:hover { border-color: #b01733; }
.cfg-mesh-card.is-selected { border-color: #b01733; box-shadow: 0 0 0 3px rgba(176,23,51,0.1); }

/* Confirmation step: the plugin's required question, tidied up. The stored
   add-on description is mismatched (it talks about measurement photos), so it's
   hidden here; the step's own subtitle carries the context instead. */
.cfg-confirm-fields .wc-pao-addon-description { display: none; }
.cfg-confirm-fields .wc-pao-addon-container { margin: 0; }
.cfg-confirm-fields .wc-pao-addon-name { font-weight: 700; font-size: 15px; color: #1c1611; margin-bottom: 12px; }
.cfg-confirm-fields ul.wc-pao-addon-options,
.cfg-confirm-fields .wc-pao-addon-wrap { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cfg-confirm-fields label {
  display: flex; align-items: flex-start; gap: 10px;
  border: 1.5px solid #e0e0e0; border-radius: 10px; padding: 14px 16px;
  cursor: pointer; font-size: 14.5px; line-height: 1.4; transition: border-color 0.15s, box-shadow 0.15s;
}
.cfg-confirm-fields label:hover { border-color: #b01733; }
.cfg-confirm-fields input[type="radio"]:checked + label,
.cfg-confirm-fields label:has(input:checked) { border-color: #b01733; box-shadow: 0 0 0 3px rgba(176,23,51,0.1); }
.cfg-confirm-fields input[type="radio"] { margin-top: 2px; accent-color: #b01733; }

/* Handle picker: two silhouette cards, mirrors the mesh-card treatment. */
.cfg-handle-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 10px; }
.cfg-handle-card {
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  background: #fff;
  padding: 12px 10px 14px;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cfg-handle-card:hover { border-color: #b01733; }
.cfg-handle-card.active { border-color: #b01733; box-shadow: 0 0 0 3px rgba(176,23,51,0.1); }
.cfg-handle-fig {
  display: block;
  width: 78px;
  background: #faf7f2;
  border: 1px solid #ece4d9;
  border-radius: 8px;
  padding: 8px;
}
.cfg-handle-fig svg { display: block; width: 100%; height: auto; }
.cfg-handle-fig.has-photo { background: #fff; padding: 6px; }
.cfg-handle-fig.has-photo img { display: block; width: 100%; height: auto; max-height: 96px; object-fit: contain; }
.cfg-handle-name { font-size: 13.5px; font-weight: 600; color: #1c1611; text-align: center; line-height: 1.25; }
/* Door style (Cabinet vs Bi-fold): whole-door illustrations, shown larger. */
.cfg-style-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Fixed-size image box so both door-style photos render identically even when
   their source aspect ratios differ (client 2026-08-24). */
.cfg-style-fig { width: 132px; max-width: 100%; height: 116px; display: flex; align-items: center; justify-content: center; background: #fff; padding: 6px; box-sizing: border-box; }
.cfg-style-fig.has-photo { padding: 6px; }
.cfg-style-fig.has-photo img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
@media (max-width: 480px) { .cfg-style-fig { width: 108px; height: 96px; } }
.cfg-mesh-icon {
  display: block;
  height: 56px;
  border-radius: 7px;
  margin-bottom: 10px;
  border: 1px solid rgba(0,0,0,0.06);
  background:
    repeating-linear-gradient(45deg, #6a6a6a 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-45deg, #6a6a6a 0 1px, transparent 1px 6px),
    #f2f2f2;
}
/* Real mesh photo (client-supplied) replaces the crosshatch when present. */
.cfg-mesh-icon.has-photo {
  height: auto;
  background: #fff;
  padding: 4px;
  overflow: hidden;
}
.cfg-mesh-icon.has-photo img {
  display: block;
  width: 100%;
  height: 90px;
  object-fit: cover;
  border-radius: 5px;
}
.cfg-mesh-icon.is-none {
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bbb;
  font-size: 22px;
}
.cfg-mesh-name { display: block; font-size: 13px; font-weight: 700; color: #111; }
.cfg-mesh-desc { display: block; font-size: 11px; color: #888; margin-top: 2px; }
.cfg-mesh-price {
  display: inline-block;
  margin-top: 6px;
  background: #b01733;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 10px;
}

/* Frame Fit: strip the plugin's fieldset chrome + raw radio list, show cards. */
.cfg-fit-skinned fieldset.wc-pao-fieldset { border: 0; margin: 0; padding: 0; }
.cfg-fit-skinned .wc-pao-addon-wrap { padding: 0; margin: 0; }
.cfg-fit-skinned .wc-pao-addon-wrap > div[class*="wc-pao-addon-"] { display: none; }
.cfg-fit-skinned .wc-pao-addon-name { font-weight: 700; font-size: 15px; color: #1c1611; margin-bottom: 2px; padding: 0; }
.cfg-fit-intro { font-family: 'Manrope', sans-serif; font-size: 13px; line-height: 1.5; color: #6a6258; margin: 8px 0 12px; }
.cfg-fit-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.cfg-fit-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  background: #fff;
  padding: 12px 12px 14px;
  text-align: left;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.cfg-fit-card:hover { border-color: #d98a99; }
.cfg-fit-card:focus { outline: none; }
.cfg-fit-card:focus-visible { outline: 2px solid #b01733; outline-offset: 2px; }
.cfg-fit-card.is-selected {
  border-color: #b01733;
  background: #fdf5f6;
  box-shadow: 0 0 0 4px rgba(176,23,51,0.16);
}
.cfg-fit-card.is-selected .cfg-fit-fig { background: #fff; border-color: #f0d6dc; }
/* Tick badge so the chosen fit reads at a glance. */
.cfg-fit-card::after {
  content: "\2713";
  position: absolute;
  top: 10px; right: 10px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #b01733; color: #fff;
  font-size: 13px; font-weight: 700; line-height: 22px; text-align: center;
  opacity: 0; transform: scale(0.6);
  transition: opacity 0.15s, transform 0.15s;
}
.cfg-fit-card.is-selected::after { opacity: 1; transform: scale(1); }
.cfg-fit-fig {
  display: block;
  background: #faf7f2;
  border: 1px solid #ece4d9;
  border-radius: 8px;
  padding: 8px;
}
.cfg-fit-fig svg { display: block; width: 100%; height: auto; max-height: 84px; }
.cfg-fit-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cfg-fit-name { font-size: 14px; font-weight: 700; color: #1c1611; }
.cfg-fit-price {
  flex: none;
  background: #b01733;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.cfg-fit-price.is-free { background: #ece4d9; color: #6a6258; }
.cfg-fit-desc { font-size: 12px; line-height: 1.45; color: #6a6258; }
@media (max-width: 480px) { .cfg-fit-cards { grid-template-columns: 1fr; } }

/* Step 7: review */
.cfg-summary { list-style: none; margin: 0 0 16px; padding: 0; border: 1px solid #eee; border-radius: 10px; background: #fff; }
.cfg-summary li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  font-size: 13px;
  color: #666;
  border-bottom: 1px solid #f2f2f2;
}
.cfg-summary li:last-child { border-bottom: none; }
.cfg-summary li b { color: #111; font-weight: 600; text-align: right; }
.cfg-notes-label { display: block; font-size: 13px; font-weight: 600; color: #555; margin: 0 0 6px; }
.cfg-notes {
  width: 100%;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  padding: 11px 12px;
  font-size: 13px;
  font-family: 'Manrope', sans-serif;
  resize: vertical;
  margin-bottom: 14px;
  background: #fff;
}
.cfg-notes:focus { outline: none; border-color: #b01733; }

/* Totals panel */
.cfg-totals {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 6px 14px;
  margin: 18px 0 14px;
}
.cfg-total-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; color: #444; }
.cfg-total-adj { color: #b01733; font-size: 13px; }
.cfg-total-grand { border-top: 1px solid #eee; font-weight: 800; font-size: 17px; color: #111; }

/* Nav */
.cfg-nav { display: flex; gap: 12px; margin-top: 20px; }
.cfg-btn-back {
  flex: 0 0 auto;
  padding: 13px 22px;
  border: 1.5px solid #ddd;
  background: #fff;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: #444;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
}
.cfg-btn-back:hover { border-color: #aaa; }
.cfg-btn-next {
  flex: 1;
  padding: 13px 22px;
  border: none;
  background: #b01733;
  color: #fff;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  transition: background 0.15s;
}
.cfg-btn-next:hover { background: #8f122a; }

@media (max-width: 640px) {
  .cfg { padding: 18px 14px 16px; }
  .cfg-step-value { display: none; }
  .cfg-step-name { font-size: 9px; }
  .cfg-measure-grid { grid-template-columns: 1fr; }
  .cfg-glass-tiles, .cfg-mesh-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- v2.1: font unification + popular-choice flags ---- */
/* Form controls don't inherit the page font by default; force the site font
   on everything inside the configurator so it matches the product body. */
.cfg, .cfg button, .cfg input, .cfg select, .cfg textarea { font-family: 'Manrope', sans-serif; }
.cfg .wc-pao-addon-description { font-style: normal; }
.cfg-diagram svg text { font-family: 'Manrope', sans-serif; }

.cfg .color-swatch { position: relative; }
.cfg .color-swatch.is-popular::after {
  content: '\2605';
  position: absolute;
  right: -5px;
  top: -7px;
  font-size: 9px;
  color: #b01733;
  background: #fff;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.cfg-popular-note { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #777; margin: 8px 0 0; }
.cfg-popular-note .fa-star { color: #b01733; font-size: 10px; }

.cfg-glass-tile { position: relative; }
.cfg-tile-badge {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  background: #b01733;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.cfg-glass-tiles { padding-top: 8px; }

/* ---- Post-add success state ---- */
.cfg-success { text-align: center; padding: 8px 6px 4px; }
.cfg-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #22a06b;
  color: #fff;
  font-size: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.cfg-success-title { font-family: 'Manrope', sans-serif; font-size: 22px; font-weight: 800; color: #111; margin: 0 0 8px; }
.cfg-success-text { font-size: 14px; color: #555; margin: 0 0 18px; }
.cfg-success-actions { display: flex; gap: 12px; }
.cfg-success-actions a { text-decoration: none; display: flex; align-items: center; justify-content: center; }
.cfg-success-actions .cfg-btn-next { flex: 1.4; }
.cfg-success-actions .cfg-btn-back { flex: 1; }
.cfg-success-note { font-size: 12px; color: #999; margin: 14px 0 0; }

/* ---- Post-add banner (success summary above a fresh configurator) ---- */
.cfg-added-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f1faf6;
  border: 1.5px solid #bfe5d4;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.cfg-added-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #22a06b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex: 0 0 auto;
}
.cfg-added-body { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: #3f6654; min-width: 0; }
.cfg-added-body strong { font-size: 14px; color: #14503a; }
.cfg-added-cta {
  margin-left: auto;
  flex: 0 0 auto;
  background: #22a06b;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 12.5px;
  padding: 10px 14px;
  border-radius: 8px;
  white-space: nowrap;
}
.cfg-added-cta:hover { background: #188556; }
.cfg-added-note { font-size: 12px; color: #888; margin: 0 0 14px; text-align: center; }
.cfg-added-note a { color: #b01733; }
@media (max-width: 640px) {
  .cfg-added-banner { flex-wrap: wrap; }
  .cfg-added-cta { margin-left: 46px; }
}

/* ---- Key selling points: chip row above the configurator ---- */
.cfg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 6px; }
.cfg-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1.5px solid #e8e8e8;
  background: #fafafa;
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 600;
  color: #444;
}
.cfg-chip .fas { color: #22a06b; font-size: 12px; }

/* Reassurance echo at the point of purchase (review step) */
.cfg-reassure { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; font-size: 12px; color: #777; margin: 12px 0 0; }
.cfg-reassure span { display: inline-flex; align-items: center; gap: 6px; }
.cfg-reassure .fas { color: #22a06b; font-size: 11px; }
/* Card badges sit directly under the three trust chips (2026-08-18). */
.cfg-cards { display: flex; justify-content: center; gap: 6px; margin: 10px 0 0; }
.cfg-cards .payment-badge svg { width: 30px; height: 19px; display: block; }
/* 2026-08-19: Add-to-Cart shares the row with the qty stepper (green base price dropped). */
.cfg-cart-row { display: flex; align-items: stretch; gap: 12px; margin: 4px 0 0; }
.cfg-cart-row .btn-add-to-cart { flex: 1 1 auto; margin: 0; }
.cfg-cart-row .product-qty { flex: 0 0 auto; }
/* Frequently-bought-together now sits OUTSIDE the configurator card (2026-08-19). */
.cfg-fbt-outside { margin: 4px 0 10px; }
/* New measurement image (A4, 2026-08-20). */
.cfg-measure-img { display: block; max-width: 100%; height: auto; margin: 0 auto 4px; border-radius: 8px; }
/* Edit button (review share row) replaces the bottom Back/Next nav on the review step. */
.cfg-edit-btn .fas { color: #b01733; }
.cfg-step[data-key="review"].is-active ~ .cfg-nav { display: none; }

/* ---- Help card (below the gallery): invite unsure buyers to get in touch ---- */
.cfg-help-card {
  border: 1.5px solid #e8e8e8;
  border-radius: 12px;
  background: #fff;
  padding: 16px;
  margin-top: 8px;
}
.cfg-help-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.cfg-help-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff0f3;
  color: #b01733;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex: 0 0 auto;
}
.cfg-help-copy { display: flex; flex-direction: column; gap: 2px; }
.cfg-help-copy strong { font-size: 15px; font-weight: 800; color: #111; font-family: 'Manrope', sans-serif; }
.cfg-help-copy span { font-size: 13px; color: #666; }
.cfg-help-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cfg-help-action {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  padding: 10px 12px;
  text-decoration: none;
  transition: border-color 0.15s;
  min-width: 0;
}
.cfg-help-action:hover { border-color: #b01733; }
.cfg-help-action > .fas:first-child { color: #b01733; font-size: 14px; flex: 0 0 auto; }
.cfg-help-action .fa-chevron-right { margin-left: auto; color: #bbb; font-size: 10px; flex: 0 0 auto; }
.cfg-help-action-text { display: flex; flex-direction: column; min-width: 0; }
.cfg-help-action-text b { font-size: 13px; color: #111; }
.cfg-help-action-text em {
  font-style: normal;
  font-size: 12px;
  color: #777;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Support hours sit under the phone number, quieter than it. */
.cfg-help-action-text em.cfg-help-hours { font-size: 11px; color: #999; }

/* Contextual help nudge on the measurements step */
.cfg-help-inline { font-size: 12.5px; color: #777; margin: 10px 0 0; text-align: center; }
.cfg-help-inline a { color: #b01733; font-weight: 600; text-decoration: none; }
.cfg-help-inline a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .cfg-help-actions { grid-template-columns: 1fr; }
}

/* ============================================================
   Product info sections (tabs-test.php): sticky jump-nav +
   always-visible block-based sections
   ============================================================ */
.pinfo { padding: 10px 0 48px; background: #fff; }
.pinfo-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(4px);
  border-bottom: 1.5px solid #eee;
  padding: 10px 0;
  margin-bottom: 10px;
}
.pinfo-nav a {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  text-decoration: none;
  white-space: nowrap;
  font-family: 'Manrope', sans-serif;
}
.pinfo-nav a:hover { color: #b01733; }
.pinfo-nav a.is-active { background: #fff0f3; color: #b01733; }

.pinfo-section { padding: 30px 0 6px; scroll-margin-top: 70px; max-width: 860px; }
.pinfo-title {
  font-family: 'Manrope', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #111;
  margin: 0 0 6px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid #f3dfe3;
}
.pinfo-lead { font-size: 15.5px; line-height: 1.7; color: #444; margin: 14px 0 16px; }
.pinfo-subtitle { font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 700; color: #111; margin: 14px 0 8px; }
.pinfo-note { font-size: 13px; color: #888; margin: 14px 0 0; }

/* Stat chips */
.pinfo-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.pinfo-stat {
  border: 1.5px solid #e8e8e8;
  background: #fafafa;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  color: #555;
}
.pinfo-stat b { color: #b01733; }

/* Icon feature cards */
.pinfo-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.pinfo-card {
  border: 1.5px solid #eee;
  border-radius: 12px;
  background: #fff;
  padding: 18px 14px;
  text-align: center;
}
.pinfo-card .fas { font-size: 26px; color: #b01733; margin-bottom: 10px; }
.pinfo-card h3 { font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #111; margin: 0 0 6px; }
.pinfo-card p { font-size: 12.5px; color: #777; line-height: 1.5; margin: 0; }

/* Spec table */
.pinfo-table { width: 100%; border-collapse: collapse; margin-top: 14px; }
.pinfo-table th, .pinfo-table td { text-align: left; padding: 11px 12px; font-size: 14px; border-bottom: 1px solid #f0f0f0; }
.pinfo-table th { width: 220px; color: #111; font-weight: 700; background: #fafafa; }
.pinfo-table td { color: #555; }

/* Link rows + two-column policy layout */
.pinfo-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; max-width: 720px; }
.pinfo-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.pinfo-list { list-style: none; margin: 6px 0 0; padding: 0; }
.pinfo-list li { position: relative; padding: 7px 0 7px 24px; font-size: 14px; color: #555; line-height: 1.55; }
.pinfo-list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 7px;
  color: #22a06b;
  font-weight: 700;
}
.pinfo-list li b { color: #111; }
.pinfo-list a { color: #b01733; }

/* Legal fine print: the one place a collapse is right */
.pinfo-legal { margin-top: 14px; border: 1.5px solid #eee; border-radius: 10px; background: #fafafa; }
.pinfo-legal summary {
  cursor: pointer;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  font-family: 'Manrope', sans-serif;
}
.pinfo-legal[open] summary { border-bottom: 1px solid #eee; }
.pinfo-legal p { font-size: 13px; color: #777; line-height: 1.65; margin: 10px 14px; }

/* Reviews */
.pinfo-review-summary { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #555; margin: 14px 0 6px; }
.pinfo-review-stars .fa-star { color: #e2e2e2; font-size: 13px; }
.pinfo-review-stars .fa-star.is-on { color: #f5a623; }
.pinfo-reviews { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.pinfo-review { border: 1.5px solid #eee; border-radius: 10px; padding: 14px 16px; }
.pinfo-review-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.pinfo-review-head b { font-size: 14px; color: #111; }
.pinfo-review-head time { margin-left: auto; font-size: 12px; color: #999; }
.pinfo-review p { font-size: 14px; color: #555; line-height: 1.6; margin: 0; }

@media (max-width: 800px) {
  .pinfo-cards { grid-template-columns: repeat(2, 1fr); }
  .pinfo-cols, .pinfo-links { grid-template-columns: 1fr; }
  .pinfo-table th { width: 130px; }
}

/* ---- Info layout: content column + sticky mini buy-card sidebar ---- */
.pinfo-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0 44px; align-items: start; }
.pinfo-aside { position: sticky; top: 66px; }
.pinfo-buycard {
  border: 1.5px solid #e8e8e8;
  border-radius: 12px;
  background: #fff;
  padding: 16px;
  margin-top: 30px;
  text-align: center;
}
.pinfo-buycard-img img { width: 100%; height: 160px; object-fit: contain; border-radius: 8px; background: #fafafa; }
.pinfo-buycard-name { font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 800; color: #111; margin: 10px 0 6px; }
.pinfo-buycard-meta { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12.5px; color: #777; margin-bottom: 8px; }
.pinfo-buycard-meta a { color: #777; }
.pinfo-buycard-price { font-size: 20px; font-weight: 800; color: #b01733; margin-bottom: 12px; font-family: 'Manrope', sans-serif; }
.pinfo-buycard-btn { width: 100%; }
.pinfo-buycard-form { margin: 0; }
.pinfo-buycard-trust { display: flex; justify-content: center; gap: 6px; align-items: center; font-size: 11.5px; color: #888; margin: 10px 0 0; flex-wrap: wrap; }
.pinfo-buycard-trust .fas { color: #22a06b; font-size: 10px; }

@media (max-width: 900px) {
  .pinfo-body { grid-template-columns: 1fr; }
  .pinfo-aside { display: none; }
}

/* ---- Financing teaser (in the totals panel) + secure checkout strip ---- */
.cfg-total-financing {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 0 10px;
  font-size: 12.5px;
  color: #666;
  border-top: 1px dashed #eee;
}
.cfg-total-financing img { height: 16px; }
.cfg-total-financing b { color: #111; }
.cfg-financing-monthly { color: #888; }

.cfg-paystrip {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #f0f0f0;
}
.cfg-paystrip-secure { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: #555; }
.cfg-paystrip-secure .fa-lock { color: #22a06b; font-size: 12px; }
.cfg-paystrip .payment-badges { display: flex; gap: 6px; margin-left: auto; }
.cfg-paystrip .payment-badge svg { width: 30px; height: 19px; display: block; }

/* ---- v3: CRO-review additions ---- */
.cfg-from-price { font-size: 17px; color: #555; margin: -8px 0 4px; }
.cfg-from-price b { color: #b01733; font-size: 21px; font-weight: 800; font-family: 'Manrope', sans-serif; }

.cfg-total-lead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 9px;
  font-size: 12.5px;
  color: #666;
  border-top: 1px dashed #eee;
}
.cfg-total-lead .fa-clock { color: #b01733; font-size: 12px; }

.cfg-opening-line { font-size: 13px; color: #555; background: #fafafa; border: 1.5px solid #eee; border-radius: 8px; padding: 9px 12px; margin: 0 0 4px; }

.cfg-mesh-card.is-closest { border-color: #22a06b; }
.cfg-mesh-closest {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  background: #22a06b;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.cfg-field-warn { font-size: 12px; color: #b06a17; margin: 6px 0 0; }
.cfg-step-error { font-size: 13px; font-weight: 600; color: #b01733; margin: 12px 0 0; }

.cfg-summary li[data-goto] { cursor: pointer; }
.cfg-summary li[data-goto]:hover span { color: #b01733; }

.cfg-share { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.cfg-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid #e0e0e0;
  background: #fff;
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  text-decoration: none;
  font-family: 'Manrope', sans-serif;
  transition: border-color 0.15s;
}
.cfg-share-btn:hover { border-color: #b01733; color: #b01733; }
.cfg-share-btn .fas { color: #b01733; font-size: 12px; }

/* ---- v3.1 refinements ---- */
.cfg-qualifier { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #777; margin: 10px 2px 0; }
.cfg-qualifier .fa-fire { color: #b01733; font-size: 11px; }
.cfg-qualifier a { color: #b01733; font-weight: 600; text-decoration: none; white-space: nowrap; }
.cfg-qualifier a:hover { text-decoration: underline; }

/* Info tooltip (lead time etc.) */
.cfg-tip { position: relative; display: inline-flex; color: #aaa; cursor: help; }
.cfg-tip .fa-info-circle { font-size: 12px; }
.cfg-tip:hover, .cfg-tip:focus { color: #b01733; outline: none; }
.cfg-tip:hover::after, .cfg-tip:focus::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 140%;
  left: 50%;
  transform: translateX(-50%);
  width: 250px;
  background: #1c1c1c;
  color: #fff;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.55;
  padding: 10px 12px;
  border-radius: 8px;
  z-index: 60;
  text-align: left;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}
.cfg-tip:hover::before, .cfg-tip:focus::before {
  content: '';
  position: absolute;
  bottom: calc(140% - 5px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1c1c1c;
  z-index: 60;
}

/* Financing teaser: more presence (client asked for it to be more obvious) */
.cfg-total-financing {
  background: #fff7f8;
  border: 1px solid #f3dfe3;
  border-top: 1px solid #f3dfe3;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 8px 0 4px;
  font-size: 13.5px;
  color: #444;
}
.cfg-total-financing b { font-size: 14.5px; }

/* Lead-time line: single always-visible home under the stepper */
.cfg-leadline {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  text-align: left;
  font-size: 12.5px;
  color: #666;
  background: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 9px 13px;
  margin: -6px 0 18px;
}
.cfg-leadline-icon { flex: none; }
.cfg-leadline-text { flex: 1 1 auto; line-height: 1.4; }
.cfg-leadline .fa-clock { color: #b01733; font-size: 12px; }
.cfg-leadline em { font-style: normal; color: #999; }

/* Financing line under the From-price */
.cfg-from-fin { font-size: 13px; color: #666; margin: 2px 0 6px; }

/* Price block: keep From-price + financing line tight as one unit
   (.product-details is a 20px-gap flex column; separate children drift apart) */
.cfg-price-block { display: flex; flex-direction: column; gap: 4px; margin: -6px 0 0; }
.cfg-price-block .cfg-from-price { margin: 0; }
.cfg-price-block .cfg-from-fin { display: flex; align-items: center; gap: 7px; margin: 0; }
.cfg-price-block .cfg-from-fin img { height: 15px; }

/* Model-step heading (the brand-specific attribute label acts as the title) */
.cfg-model-title { display: block; margin: 0 0 14px; }

/* WooCommerce notices surfaced inside the configurator (failure safety net) */
.cfg-notices ul, .cfg-notices .woocommerce-error, .cfg-notices .woocommerce-message, .cfg-notices .woocommerce-info {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}
.cfg-notices .woocommerce-error li, .cfg-notices .woocommerce-message li, .cfg-notices .woocommerce-info li,
.cfg-notices .woocommerce-error:not(:has(li)), .cfg-notices .woocommerce-message:not(:has(li)) {
  padding: 11px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 6px;
}
.cfg-notices .woocommerce-error li { background: #fff0f3; border: 1px solid #e6b8c2; color: #8a2233; }
.cfg-notices .woocommerce-message li, .cfg-notices .woocommerce-info li { background: #f1faf6; border: 1px solid #bfe5d4; color: #3f6654; }

/* ============================================================
   MOBILE PASS (test page)
   ============================================================ */
@media (max-width: 768px) {
  /* Stack the hero columns. product.css already tries this at 768px but its
     own desktop rule (.woocommerce-prefixed + !important) defeats it, so ALL
     product pages currently squeeze on mobile; same fix belongs in
     product.css at productionisation. */
  .woocommerce .product-hero-inner,
  .woocommerce-page .product-hero-inner,
  .product-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .product-gallery { position: static; }

  /* Qualifier: natural inline flow so multi-line wrapping reads normally */
  .cfg-qualifier { display: block; line-height: 1.6; }
  .cfg-qualifier .fa-fire { margin-right: 5px; }

  /* Lead line: left-aligned tidy wrapping */
  .cfg-leadline { justify-content: flex-start; text-align: left; font-size: 12px; }

  /* Stepper: smaller furniture so all 7 steps fit a phone width */
  .cfg-dot { width: 26px; height: 26px; font-size: 11px; }
  .cfg-stepper li::before { top: 13px; }
  .cfg-step-name { font-size: 9px; letter-spacing: 0; }

  /* Help card relocated below the configurator by JS */
  .cfg-help-card--mobile { margin-top: 4px; }
}

/* Section pill-nav: hide the scrollbar but keep it swipeable */
.pinfo-nav { scrollbar-width: none; }
.pinfo-nav::-webkit-scrollbar { display: none; }

/* ---- Mobile stepper replacement: bold progress bar ---- */
.cfg-mprog { display: none; margin: 0 0 18px; }
.cfg-mprog-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.cfg-mprog-head b { font-family: 'Manrope', sans-serif; font-size: 16px; font-weight: 800; color: #111; }
.cfg-mprog-head span { font-size: 12px; color: #888; }
.cfg-mprog-track { height: 6px; background: #f0e6e8; border-radius: 999px; overflow: hidden; }
.cfg-mprog-fill { height: 100%; width: 14%; background: #b01733; border-radius: 999px; transition: width 0.25s ease; }

@media (max-width: 640px) {
  .cfg-stepper { display: none; }
  .cfg-mprog { display: block; }
  .cfg-progress { display: none; }
}

/* ---- Section pill-nav: sticky wrapper + right-edge "more" fade ---- */
.pinfo-nav-wrap { position: sticky; top: 0; z-index: 30; }
.pinfo-nav-wrap .pinfo-nav { position: static; }
.pinfo-nav-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 56px;
  background: linear-gradient(to right, rgba(255,255,255,0), #fff 78%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.pinfo-nav-wrap.has-more::after { opacity: 1; }

/* ---- Mobile: info sections as accordions ---- */
@media (max-width: 768px) {
  .pinfo-nav-wrap { display: none; }
  .pinfo-section { padding: 0; margin-bottom: 10px; max-width: none; }
  .pinfo-acc .pinfo-title {
    position: relative;
    margin: 0;
    padding: 15px 40px 15px 14px;
    border: 1.5px solid #eee;
    border-radius: 10px;
    background: #fff;
    font-size: 16px;
    cursor: pointer;
    user-select: none;
  }
  .pinfo-acc.is-open .pinfo-title { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .pinfo-acc .pinfo-title::after {
    content: '';
    position: absolute;
    right: 18px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid #999;
    border-bottom: 2px solid #999;
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.2s;
  }
  .pinfo-acc.is-open .pinfo-title::after { transform: translateY(-30%) rotate(225deg); }
  .pinfo-acc-body { display: none; }
  .pinfo-acc.is-open .pinfo-acc-body {
    display: block;
    border: 1.5px solid #eee;
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 4px 14px 16px;
    background: #fff;
  }
  .pinfo { padding-top: 4px; }
}

/* Mobile: reviews list first, "Your review" form below it
   (the stacked grid otherwise puts the form on top) */
@media (max-width: 768px) {
  .reviews-layout .review-form-col { order: 2; }
  .reviews-layout .all-reviews-col { order: 1; }
}

/* Help card: desktop copy under the gallery, mobile copy below the
   configurator; CSS picks exactly one */
.cfg-help-card--mobile { display: none; }
@media (max-width: 768px) {
  .cfg-help-card--desktop { display: none; }
  .cfg-help-card--mobile { display: block; margin-top: 14px; }
}

/* ============================================================
   Measuring guide page (template-measure-guide-test.php)
   ============================================================ */
.mg { padding: 36px 0 56px; background: #fff; }
.mg .container { max-width: 860px; }
.mg-head { margin-bottom: 22px; }
.mg-title { font-family: 'Manrope', sans-serif; font-size: 30px; font-weight: 800; color: #111; margin: 4px 0 10px; }
.mg-lead { font-size: 15px; color: #555; line-height: 1.65; margin: 0; }

.mg-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.mg-toggle-btn {
  border: 1.5px solid #e0e0e0;
  border-radius: 12px;
  background: #fff;
  padding: 14px;
  text-align: center;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mg-toggle-btn b { display: block; font-size: 15px; color: #111; }
.mg-toggle-btn span { display: block; font-size: 12px; color: #888; margin-top: 3px; }
.mg-toggle-btn.is-active { border-color: #b01733; box-shadow: 0 0 0 3px rgba(176,23,51,0.1); }

.mg-panel { display: none; }
.mg-panel.is-active { display: block; animation: cfgFade 0.18s ease; }
.mg-grid { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; }
.mg-diagram svg { width: 100%; height: auto; border: 1.5px solid #eee; border-radius: 12px; padding: 12px; background: #fafafa; }

.mg-steps { list-style: none; margin: 0 0 16px; padding: 0; counter-reset: mgstep; }
.mg-steps li {
  counter-increment: mgstep;
  position: relative;
  padding: 6px 0 6px 38px;
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}
.mg-steps li::before {
  content: counter(mgstep);
  position: absolute;
  left: 0;
  top: 7px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #b01733;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mg-steps li b { color: #111; }

.mg-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mg-inputs label { font-size: 13px; font-weight: 600; color: #555; font-family: 'Manrope', sans-serif; }
.mg-input-wrap { position: relative; display: block; margin-top: 6px; }
.mg-input-wrap input {
  width: 100%;
  padding: 11px 36px 11px 12px;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  font-family: 'Manrope', sans-serif;
}
.mg-input-wrap input:focus { outline: none; border-color: #b01733; }
.mg-input-wrap em { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 12px; color: #999; }
.mg-photo-tip { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: #888; margin: 14px 0 0; }
.mg-photo-tip .fa-camera { color: #b01733; margin-top: 2px; }

.mg-result {
  margin-top: 24px;
  border: 1.5px solid #bfe5d4;
  background: #f1faf6;
  border-radius: 12px;
  padding: 18px;
  text-align: center;
}
.mg-result-line { font-size: 15px; color: #3f6654; margin-bottom: 12px; }
.mg-result-line .fa-check-circle { color: #22a06b; }
.mg-result-line b { color: #14503a; }
.mg-cta { display: inline-block; text-decoration: none; padding: 13px 22px; }
.mg-result-note { font-size: 12px; color: #6b8d7c; margin: 10px 0 0; }
.mg-call { max-width: 420px; margin: 22px auto 0; }

@media (max-width: 700px) {
  .mg-grid { grid-template-columns: 1fr; }
  .mg-inputs { grid-template-columns: 1fr 1fr; }
  .mg-title { font-size: 24px; }
}

/* Measuring guide: before-you-start strip + quick answers */
.mg-before { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 20px; }
.mg-before span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1.5px solid #e8e8e8;
  background: #fafafa;
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 600;
  color: #555;
}
.mg-before .fas { color: #b01733; font-size: 12px; }
.mg-trouble { margin-top: 26px; }
.mg-trouble-title { font-family: 'Manrope', sans-serif; font-size: 18px; font-weight: 800; color: #111; margin: 0 0 6px; padding-bottom: 8px; border-bottom: 1.5px solid #f3dfe3; }

/* Measuring guide: annotated photo (numbered callouts match the steps) */
.mg-photo { position: relative; margin: 0; border: 1.5px solid #eee; border-radius: 12px; overflow: hidden; background: #fafafa; }
.mg-photo img { display: block; width: 100%; height: auto; }
.mg-photo-lines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.mg-photo-lines line {
  stroke: #fff;
  stroke-width: 2.5px;
  stroke-dasharray: 7 5;
  opacity: 0.95;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.8));
}
.mg-callout {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #b01733;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Manrope', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2.5px #fff, 0 2px 8px rgba(0,0,0,0.45);
}
.mg-photo figcaption {
  position: relative;
  padding: 9px 12px;
  font-size: 11.5px;
  color: #777;
  background: #fff;
  border-top: 1px solid #f0f0f0;
}

/* Measuring guide: one-step-at-a-time flows with photo closeups */
.mg-flow-prog { text-align: right; font-size: 12px; color: #888; margin-bottom: 8px; }
.mg-flow-prog b { color: #111; }
.mg-step { display: none; }
.mg-step.is-active { display: block; animation: cfgFade 0.18s ease; }
.mg-step-h { font-family: 'Manrope', sans-serif; font-size: 18px; font-weight: 800; color: #111; margin: 0 0 8px; }
.mg-step-body p { font-size: 14px; color: #555; line-height: 1.6; margin: 0 0 14px; }
.mg-flow-label { display: block; font-size: 13px; font-weight: 600; color: #555; font-family: 'Manrope', sans-serif; max-width: 240px; }
.mg-flow-nav { display: flex; gap: 10px; margin-top: 16px; }
.mg-flow-nav .cfg-btn-next { flex: 0 1 auto; padding: 12px 20px; font-size: 13px; }
.mg-flow-nav .cfg-btn-back { padding: 12px 18px; font-size: 13px; }

/* Photo closeups: crop into regions of the same base photo */
.mg-photo--zoom { aspect-ratio: 4 / 3; }
.mg-photo-canvas { position: absolute; width: 190%; }
.mg-photo-canvas img { display: block; width: 100%; height: auto; }
.mg-zoom-track  { left: -45%; top: -10%; }
.mg-zoom-width  { left: -45%; top: -58%; }
.mg-zoom-height { left: -88%; top: -32%; }

/* Guide v5: all steps visible, numbered headers (stepped reveal scrapped) */
.mg-flow { counter-reset: mgflow; }
.mg-step { display: block !important; animation: none; padding: 20px 0; border-top: 1px solid #f0f0f0; counter-increment: mgflow; }
.mg-flow .mg-step:first-child { border-top: none; padding-top: 4px; }
.mg-step-h::before {
  content: counter(mgflow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #b01733;
  color: #fff;
  font-size: 12px;
  margin-right: 9px;
  vertical-align: -4px;
}

/* Guide v6: inputs live inside their numbered steps (v3 layout restored) */
.mg-steps-inputs .mg-flow-label, .mg-steps-inputs .mg-inputs { margin-top: 10px; }
.mg-steps-inputs li { padding-bottom: 12px; }

/* "About this kit" section: tame the product's own rich description content */
.pinfo-rich { font-size: 14.5px; color: #555; line-height: 1.7; }
.pinfo-rich img { max-width: 100%; height: auto; border-radius: 10px; }
.pinfo-rich h2, .pinfo-rich h3 { font-family: 'Manrope', sans-serif; color: #111; margin: 22px 0 8px; }
.pinfo-rich h2 { font-size: 19px; }
.pinfo-rich h3 { font-size: 16px; }

/* Non-configurator products: no card chrome around the purchase area */
.cfg--plain {
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 0;
}
@media (max-width: 640px) {
  .cfg--plain { padding: 0; }
}

/* Plain products: add-on fields pair up two per row; descriptions live in
   the label tooltips (JS folds them in) */
.cfg--plain .wc-pao-addons-container .wc-pao-addon { grid-column: auto / span 1; }
.cfg--plain .wc-pao-addon-name .cfg-tip { margin-left: 7px; vertical-align: -1px; }
@media (max-width: 640px) {
  .cfg--plain .wc-pao-addons-container .wc-pao-addon { grid-column: 1 / -1; }
}

/* Plain-product spacing pass (colour selector, reassure, order bump) */
.cfg--plain .product-option-group { margin-bottom: 20px; }
.cfg--plain .wc-pao-addons-container { margin: 4px 0 14px; }
.cfg--plain .product-purchase-row { margin-top: 6px; }
.cfg--plain .product-upsells { margin: 16px 0 18px; }
.cfg--plain .cfg-reassure { margin: 14px 0 6px; }
.cfg--plain .cfg-totals { margin-top: 22px; }

/* Mobile breadcrumbs: single swipeable line instead of awkward wrapping */
@media (max-width: 768px) {
  .breadcrumb {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .breadcrumb::-webkit-scrollbar { display: none; }
  .breadcrumb a, .breadcrumb span { white-space: nowrap; flex: 0 0 auto; }
}

/* ============================================================
   Hero test page (template-hero-test.php): full-bleed scene with
   live brick-colour preview
   ============================================================ */
.htest {
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #17120f;
}
.htest-media, .htest-media .htest-img, .htest-scrim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.htest-img {
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.htest-img.is-active { opacity: 1; }
/* <picture> wraps each hero still to serve a fire-baked variant on mobile; it must
   not generate a box, so the <img> stays absolutely positioned within .htest-media. */
.htest-media .htest-pic { display: contents; }
.htest-scrim {
  background: linear-gradient(90deg, rgba(18,13,10,0.85) 0%, rgba(18,13,10,0.55) 42%, rgba(18,13,10,0.12) 75%, rgba(18,13,10,0.05) 100%);
}
.htest-content {
  position: relative;
  z-index: 2;
  max-width: 560px;
  margin: 0 0 0 max(6vw, 24px);
  padding: 72px 24px 72px 0;
  color: #fff;
  font-family: 'Manrope', sans-serif;
}
.htest-kicker {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffd9df;
  background: rgba(176,23,51,0.35);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 7px 14px;
  margin-bottom: 20px;
}
.htest-title {
  font-size: clamp(34px, 4.6vw, 58px);
  font-weight: 800;
  line-height: 1.06;
  margin: 0 0 14px;
  color: #fff;
}
.htest-title em {
  font-style: normal;
  color: #fff;
  box-shadow: inset 0 -0.18em 0 rgba(224, 74, 99, 0.85);
}
.htest-previewing { font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.75); margin: 0 0 14px; }
.htest-previewing b { color: #ffd9a8; }
.htest-previewing span { text-transform: none; letter-spacing: 0; color: rgba(255,255,255,0.55); }
.htest-sub { font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,0.85); margin: 0 0 24px; }
.htest-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.htest-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 26px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  font-family: 'Manrope', sans-serif;
  transition: transform 0.15s, background 0.15s;
}
.htest-btn:hover { transform: translateY(-1px); }
.htest-btn--primary { background: #b01733; color: #fff; }
.htest-btn--primary:hover { background: #8f122a; }
.htest-btn--ghost { background: #fff; color: #1c1c1c; }
.htest-preview { margin-bottom: 26px; }
.htest-preview-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 9px;
}
.htest-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.htest-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(20,15,12,0.55);
  border: 1px solid rgba(255,255,255,0.28);
  color: #fff;
  border-radius: 999px;
  padding: 9px 15px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  backdrop-filter: blur(3px);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.htest-pill:hover { border-color: #fff; }
.htest-pill.is-active { background: #fff; color: #1c1c1c; border-color: #fff; }
.htest-chip {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
  flex: 0 0 auto;
}
.htest-trust { font-size: 13.5px; color: rgba(255,255,255,0.8); margin: 0; }
.htest-stars { color: #f5a623; letter-spacing: 2px; margin-right: 6px; }

@media (max-width: 700px) {
  .htest { min-height: 92vh; align-items: flex-end; }
  .htest-scrim { background: linear-gradient(180deg, rgba(18,13,10,0.25) 0%, rgba(18,13,10,0.55) 45%, rgba(18,13,10,0.88) 100%); }
  .htest-content { margin: 0; padding: 40vh 20px 40px; max-width: none; }
  .htest-ctas .htest-btn { flex: 1 1 100%; }
}

/* Hero test v2: paint-chip preview controls + linked trust line */
.htest-chipcard {
  display: flex;
  flex-direction: column;
  width: 20px;
  height: 26px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.14);
  flex: 0 0 auto;
}
.htest-chipcard i { flex: 1; display: block; }
.htest-trust { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: rgba(255,255,255,0.85); text-decoration: none; }
.htest-trust:hover { color: #fff; }
.htest-trust:hover .htest-trust-more { text-decoration: underline; }
.htest-trust-more { color: rgba(255,255,255,0.6); }

/* ============================================================
   Hero Test v3 (client design), scoped to .htest--v3 so the
   original dark hero can live side-by-side on /hero-test-2/.
   LIGHT scrim: keeps the room bright, matches the white header.
   ============================================================ */
.htest--v3 { background: #efe9e2; }
.htest--v3 .htest-scrim {
  background: linear-gradient(90deg,
    rgba(250,248,244,0.95) 0%,
    rgba(250,248,244,0.82) 30%,
    rgba(250,248,244,0.38) 56%,
    rgba(250,248,244,0.00) 80%);
}
.htest--v3 .htest-content { color: #241c17; }
.htest--v3 .htest-title, .htest--v3 .htest-title em { color: #1c1611; }
.htest--v3 .htest-kicker { color: #fff; background: #b01733; border-color: transparent; }
.htest--v3 .htest-previewing { color: #6b5f54; }
.htest--v3 .htest-previewing b { color: #b01733; }
.htest--v3 .htest-previewing span { color: #8a7d70; }
.htest--v3 .htest-sub { color: #4a3f36; }
.htest--v3 .htest-preview-label { color: #6b5f54; }
.htest--v3 .htest-pill { background: rgba(255,255,255,0.78); border-color: rgba(0,0,0,0.16); color: #2b241e; }
.htest--v3 .htest-pill:hover { border-color: #b01733; }
.htest--v3 .htest-pill.is-active { background: #241c17; color: #fff; border-color: #241c17; }
.htest--v3 .htest-btn--ghost { background: #fff; color: #1c1c1c; border: 1px solid rgba(0,0,0,0.18); }
.htest--v3 .htest-trust { color: #6b5f54; }
.htest--v3 .htest-trust-more { color: #8a7d70; }

@media (max-width: 700px) {
  .htest--v3 .htest-scrim {
    background: linear-gradient(180deg,
      rgba(250,248,244,0) 0%,
      rgba(250,248,244,0.62) 42%,
      rgba(250,248,244,0.96) 100%);
  }
  .htest--v3 .htest-content { color: #241c17; }
}

/* Hero Test v3: CTA block larger + shifted right onto the open wall. */
.htest--v3 .htest-content { margin-left: max(10vw, 40px); max-width: 620px; }
.htest--v3 .htest-kicker { font-size: 12.5px; padding: 8px 16px; }
.htest--v3 .htest-title { font-size: clamp(40px, 5.4vw, 68px); line-height: 1.05; }
.htest--v3 .htest-previewing { font-size: 13.5px; }
.htest--v3 .htest-sub { font-size: 18px; }
.htest--v3 .htest-ctas { gap: 14px; }
.htest--v3 .htest-btn { padding: 17px 32px; font-size: 15.5px; }
.htest--v3 .htest-preview-label { font-size: 11.5px; }
.htest--v3 .htest-pill { font-size: 13.5px; padding: 10px 17px; }
.htest--v3 .htest-trust { font-size: 14.5px; }

@media (min-width: 1100px) {
  .htest--v3 .htest-content { margin-left: max(12vw, 60px); }
}

/* ============================================================
   Hero Test 3 (.htest--big): the ORIGINAL dark hero with the
   client's sizing/spacing layer only (bigger type, wider content
   block shifted right, larger CTAs/pills). No colour changes.
   This is the working version going forward.
   ============================================================ */
.htest--big .htest-content { margin-left: max(10vw, 40px); max-width: 620px; }
.htest--big .htest-kicker { font-size: 12.5px; padding: 8px 16px; }
.htest--big .htest-title { font-size: clamp(40px, 5.4vw, 68px); line-height: 1.05; }
.htest--big .htest-previewing { font-size: 13.5px; }
.htest--big .htest-sub { font-size: 18px; }
.htest--big .htest-ctas { gap: 14px; }
.htest--big .htest-btn { padding: 17px 32px; font-size: 15.5px; }
.htest--big .htest-preview-label { font-size: 11.5px; }
.htest--big .htest-pill { font-size: 13.5px; padding: 10px 17px; }
.htest--big .htest-trust { font-size: 14.5px; }

@media (min-width: 1100px) {
  .htest--big .htest-content { margin-left: max(12vw, 60px); }
}

/* Hero Test 3: "EZ Door Plus" in the previewing line links to the product. */
.htest-previewing a { color: rgba(255,255,255,0.85); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,0.35); }
.htest-previewing a:hover { color: #fff; text-decoration-color: #fff; }

/* Hero archive page (/hero-test/): label bars between stacked versions. */
.htest-archive-head { max-width: 1100px; margin: 0 auto; padding: 44px 24px 18px; }
.htest-archive-head h2 { font-size: 22px; font-weight: 800; color: #1c1611; margin: 0 0 6px; }
.htest-archive-head p { font-size: 14px; color: #6b5f54; margin: 0; }
.htest-archive-head a { color: #b01733; }

/* Working version: let the heading set as TWO lines ("Give Your Fireplace" /
   "A New Life.") instead of a cramped three-line stack. The content block
   widens so the first line fits at the 68px cap; body copy keeps a readable
   measure at its old width. Mobile is unaffected (block is full-width there
   and the heading wraps naturally). */
.htest--big .htest-content { max-width: 820px; }
.htest--big .htest-sub { max-width: 620px; }

/* Working version: more air between the heading's red underline and the
   previewing line (base margin is 14px). */
.htest--big .htest-title { margin-bottom: 26px; }

/* Working version, mobile: content raised (base pushes it 40vh down a 92vh
   hero, leaving the heading ~60% down and the CTA below the fold). svh keeps
   phone address bars from inflating the height; the vh lines are fallbacks.
   Scrim darkens from higher up since the text now sits over the paler
   mid-photo, and the kicker pill steps down so the heading leads. */
@media (max-width: 700px) {
  .htest--big { min-height: 88vh; min-height: 88svh; }
  .htest--big .htest-scrim {
    background: linear-gradient(180deg,
      rgba(18,13,10,0.30) 0%,
      rgba(18,13,10,0.60) 22%,
      rgba(18,13,10,0.85) 55%,
      rgba(18,13,10,0.90) 100%);
  }
  .htest--big .htest-content { padding: 14vh 20px 36px; padding-top: 14svh; }
  .htest--big .htest-kicker { font-size: 10.5px; padding: 6px 12px; margin-bottom: 16px; }
}

/* Working version, mobile fixes round 2:
   1. Kill the desktop margin-left leaking through (higher specificity than
      the base mobile reset), which right-shifted the whole content block.
   2. Crop the photo toward the fireplace (it sits right-of-centre in the
      render) so the brick that changes colour is actually on screen. */
@media (max-width: 700px) {
  .htest--big .htest-content { margin-left: 0; }
  .htest--big .htest-img { object-position: 72% center; }
}

/* Working version, mobile round 3: calmer, shorter hero.
   object-fit: cover magnifies MORE the taller the box is, so the shorter
   hero also zooms the photo out (more fireplace context on screen).
   Top reveal drops to a fixed strip instead of 14% of the screen, and the
   CTAs go 50/50 on one row at a quieter size instead of two full-width
   stacked bars. */
@media (max-width: 700px) {
  .htest--big { min-height: 74vh; min-height: 74svh; }
  .htest--big .htest-content { padding-top: 48px; padding-bottom: 30px; }
  .htest--big .htest-ctas { gap: 10px; }
  .htest--big .htest-ctas .htest-btn { flex: 1 1 0; padding: 14px 12px; font-size: 14.5px; }
}

/* Working version, mobile: lighter scrim (previous stops 0.30/0.60/0.85/0.90
   read too heavy at the shorter height; the photo should show through). */
@media (max-width: 700px) {
  .htest--big .htest-scrim {
    background: linear-gradient(180deg,
      rgba(18,13,10,0.18) 0%,
      rgba(18,13,10,0.45) 22%,
      rgba(18,13,10,0.72) 55%,
      rgba(18,13,10,0.80) 100%);
  }
}

/* ============================================================
   Measure guide v7: photo-led step rows (client's real annotated
   photos), exceptionalfire-inspired rhythm without the length.
   ============================================================ */
.mg-steprow {
  display: grid; grid-template-columns: 5fr 6fr; gap: 32px; align-items: center;
  padding: 26px 0; border-bottom: 1px solid #eee7de;
}
.mg-steprow--flip .mg-stepimg { order: 2; }
.mg-steprow--flip .mg-stepbody { order: 1; }
.mg-stepimg { margin: 0; }
.mg-stepimg img { width: 100%; border-radius: 14px; box-shadow: 0 10px 26px rgba(28,22,17,0.12); display: block; }
.mg-stepnum {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%;
  background: #b01733; color: #fff; font-size: 15.5px; font-weight: 800; margin-bottom: 10px;
}
.mg-steptitle { font-size: 21px; font-weight: 800; color: #1c1611; margin: 0 0 8px; }
.mg-steptext { font-size: 15px; line-height: 1.6; color: #4a3f36; margin: 0 0 14px; }
.mg-stepcallout {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.5; color: #7a5c22;
  background: #fdf6e7; border: 1px solid #f0e2c0; border-radius: 10px; padding: 10px 13px; margin: 0 0 14px;
}
.mg-stepcallout i { margin-top: 2px; }
.mg-inputs--single { grid-template-columns: minmax(0, 280px); }

.mg-photos { padding: 26px 0 6px; }
.mg-photos-copy { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.mg-photos-copy .mg-stepnum { margin-bottom: 0; margin-top: 2px; }
.mg-photos-copy .mg-steptext { margin-bottom: 0; }
.mg-photos-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mg-photo-card { margin: 0; background: #fff; border: 1px solid #eee7de; border-radius: 12px; overflow: hidden; }
.mg-photo-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.mg-photo-card figcaption { font-size: 12.5px; font-weight: 700; color: #6b5f54; padding: 9px 12px; }

@media (max-width: 768px) {
  .mg-steprow { grid-template-columns: 1fr; gap: 16px; padding: 20px 0; }
  .mg-steprow--flip .mg-stepimg { order: 0; }
  .mg-steprow--flip .mg-stepbody { order: 0; }
  .mg-inputs--single { grid-template-columns: 1fr; }
  .mg-photos-row { grid-template-columns: 1fr; }
  .mg-photo-card img { aspect-ratio: 16 / 9; }
}

/* ============================================================
   ANIMATED FIRE OVERLAY (client asset, 2026-07-21)
   Trial only: /hero-fire-test/. The homepage hero does not use these.

   The flame WebM is the hero still re-rendered at 1920x1071, so it lines up
   with the brick photo for free PROVIDED both are cropped identically. The
   variants below differ only in how faithfully the video copies .htest-img.
   ============================================================ */
.htest-fire {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  /* Above the stills but BELOW .htest-content (z-index 2), so the headline
     never competes with the flames. */
  z-index: 1;
}

/* A. As shipped: crop origin hard-coded, so it desyncs from the stills
      wherever they move (i.e. mobile). Kept verbatim for comparison. */
.htest-fire--asis { object-position: 50% 50%; }

/* B + C. Mirror .htest-img exactly. Any future change to the stills' crop
   must be repeated here, which is why both selectors sit together. */
.htest-fire--track,
.htest-fire--blend { object-position: center; }

/* C. Screen blend drops black to transparent with no alpha channel involved,
      which is the fallback path for Safari (WebM alpha is ignored there). */
.htest-fire--blend { mix-blend-mode: screen; }

@media (max-width: 700px) {
  /* Matches configurator-test.css:1506 (.htest--big .htest-img). */
  .htest--big .htest-fire--track,
  .htest--big .htest-fire--blend { object-position: 72% center; }
}

/* D. The asset's masked layer does not stop at the door: it carries a rendered
      light-spill onto the hearth that runs ~60px past the door's bottom frame
      and then stops dead, drawing a straight line across the ledge. The still
      already has its own hearth, so we mask that strip off.

      The matte is an SVG sized 1920x1071 -- the video's own dimensions -- so
      mask-size:cover lands it on exactly the same geometry as
      object-fit:cover. That is what makes it track the door instead of
      drifting, and it is why mask-position has to mirror object-position
      wherever object-position changes. Fade runs y795 -> y860 in video px:
      below the firebox, above where the spill is cut off. */
.htest-fire--mask {
  --fire-matte: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1920' height='1071'><defs><linearGradient id='f' x1='0' y1='795' x2='0' y2='860' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%23fff' stop-opacity='1'/><stop offset='1' stop-color='%23fff' stop-opacity='0'/></linearGradient></defs><rect width='1920' height='795' fill='%23fff'/><rect y='795' width='1920' height='65' fill='url(%23f)'/></svg>");
  -webkit-mask-image: var(--fire-matte);
          mask-image: var(--fire-matte);
  -webkit-mask-size: cover;
          mask-size: cover;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

@media (max-width: 700px) {
  /* Mirrors the object-position shift above; the matte must move with it. */
  .htest--big .htest-fire--mask {
    -webkit-mask-position: 72% center;
            mask-position: 72% center;
  }
}

/* Anyone who has asked for less motion gets the still photo. */
@media (prefers-reduced-motion: reduce) {
  .htest-fire { display: none; }
}

/* Cross-channel aggregate review line (reviews section header). Client sets
   the count/wording in Theme Settings; hidden until then. */
.reviews-aggregate {
  margin: 4px 0 18px;
  font-size: 15px;
  color: #4a4a4a;
  font-family: 'Manrope', sans-serif;
}
.reviews-aggregate i { color: #e8a13a; margin-right: 4px; }
.reviews-aggregate strong { color: #1c1611; font-weight: 700; }

/* Finished (received) door size shown after a model is picked. */
.cfg-finished-size {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 0 0;
  padding: 10px 12px;
  background: #f2f8f4; border: 1px solid #cfe6d8; border-radius: 8px;
  font-size: 14px; color: #1c1611; font-family: 'Manrope', sans-serif;
}
.cfg-finished-size i { color: #1f9d57; }
.cfg-finished-size strong { font-weight: 700; white-space: nowrap; }
/* The display:flex above beats the [hidden] attribute, so restore hiding
   until JS fills the line (else an empty green bar shows). */
.cfg-finished-size[hidden], .cfg-size-msg[hidden] { display: none !important; }
/* 2026-08-18 per Shane on the walkthrough call: hold off showing a definitive
   "your door will be made to X" on the model step (sizes still being confirmed).
   Blanket-hide across all doors; remove this rule to restore. */
.cfg-finished-size { display: none !important; }

/* Box-door size step (Peachtree/Camellia/Forsythia/Mercadonia). */
.cfg-size-intro { font-size: 14px; color: #4a4a4a; margin: 0 0 12px; font-family: 'Manrope', sans-serif; }
.cfg-size-inputs { display: flex; gap: 12px; margin-bottom: 12px; }
.cfg-size-inputs label { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: #1c1611; font-family: 'Manrope', sans-serif; }
.cfg-size-inputs input { padding: 10px 12px; border: 1.5px solid #d8d1c7; border-radius: 8px; font-size: 15px; font-family: 'Manrope', sans-serif; }
.cfg-size-inputs input:focus { outline: none; border-color: #b01733; }
.cfg-size-msg { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; font-size: 14px; font-family: 'Manrope', sans-serif; }
.cfg-size-msg--ok { background: #f2f8f4; border: 1px solid #cfe6d8; color: #1c1611; }
.cfg-size-msg--ok i { color: #1f9d57; }
.cfg-size-msg--warn { background: #fdf4e7; border: 1px solid #f0d9b0; color: #6b4e1c; }
.cfg-size-msg--warn i { color: #c98a1e; }
.cfg-size-cards { grid-template-columns: repeat(3, 1fr); }
.cfg-size-card { gap: 4px; text-align: center; padding: 14px 10px; }
.cfg-size-name { font-size: 15px; font-weight: 700; color: #1c1611; }
.cfg-size-dims { font-size: 13px; color: #1c1611; }
.cfg-size-fits { font-size: 11.5px; color: #7a7266; line-height: 1.3; }
.cfg-size-price { font-size: 16px; font-weight: 700; color: #b01733; margin-top: 4px; }
@media (max-width: 480px) { .cfg-size-inputs { flex-direction: column; } .cfg-size-cards { grid-template-columns: 1fr; } }

/* Per-product model routing note (e.g. Lennox LBC/LBR -> EZ Door Steel). */
.cfg-route-note {
  display: flex; gap: 8px; align-items: flex-start;
  margin: 10px 0 0; padding: 10px 12px;
  background: #fdf4e7; border: 1px solid #f0d9b0; border-radius: 8px;
  font-size: 13.5px; color: #6b4e1c; font-family: 'Manrope', sans-serif; line-height: 1.4;
}
.cfg-route-note i { color: #c98a1e; margin-top: 2px; }
.cfg-route-note a { color: #b01733; font-weight: 600; }

/* Built-to-order variant of the size line (no fixed finished size). */
.cfg-finished-size--open { background: #eef4fb; border-color: #cfe0f2; }
.cfg-finished-size--open i { color: #2f6fb0; }

/* ===== Brand-first step (combined multi-brand Replacement Glass Doors) ===== */
.cfg-brand-gated { display: none !important; }
.cfg-brand-dropdown {
  display: block;
  width: 100%;
  margin: 0 0 20px;
  padding: 13px 44px 13px 14px;
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #222;
  background-color: #fff;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b01733' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
}
.cfg-brand-dropdown:focus {
  outline: none;
  border-color: #b01733;
  box-shadow: 0 0 0 3px rgba(176,23,51,.12);
}

/* ===== Buckhead frame-size dropdown ===== */
.cfg-framesize-group { margin-top: 4px; }
.cfg-framesize-select {
  display: block;
  width: 100%;
  margin: 4px 0 0;
  padding: 13px 44px 13px 14px;
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #222;
  background-color: #fff;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b01733' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
}
.cfg-framesize-select:focus {
  outline: none;
  border-color: #b01733;
  box-shadow: 0 0 0 3px rgba(176,23,51,.12);
}

/* Box doors: hide the size cards, keep the typed-opening auto-match (client 2026-08-22) */
.cfg-size-hidecards .cfg-size-cards { display: none; }
.cfg-size-hidecards .cfg-size-msg { margin-top: 4px; }
.cfg-size-hidecards .cfg-size-msg--ok { font-size: 15px; font-weight: 700; }
.cfg-size-hidecards .product-option-label { display: none; }

/* Automatic suspension bar: the hearth question shown on Overlap Fit
   (drives the SB-1). Client 2026-08-23. */
.cfg-hearth { margin-top: 18px; }
.cfg-hearth-label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 4px; color: #1c1611; }
.cfg-hearth-sub { font-size: 13px; color: #6b6459; margin: 0 0 8px; }
.cfg-hearth-select { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1.5px solid #d8d1c7; border-radius: 10px; font-size: 15px; background: #fff; color: #1c1611; }
.cfg-hearth-select:focus { outline: none; border-color: #b01733; }
.cfg-hearth-note { margin: 10px 0 0; padding: 10px 12px; background: #faf6f0; border: 1px solid #ecdfce; border-radius: 8px; font-size: 13.5px; line-height: 1.45; color: #5a4a2f; }

/* Automatic oversize surcharge note (EZ Door Plus). Client 2026-08-23. */
.cfg-oversize-note { margin: 12px 0 0; padding: 10px 12px; background: #faf6f0; border: 1px solid #ecdfce; border-radius: 8px; font-size: 13.5px; line-height: 1.45; color: #5a4a2f; }

/* Fixed-finish display for single-finish doors (Buckhead, EZ Door Steel: Textured Black). 2026-08-23. */
.cfg-fixed-finish { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 10px 12px; border: 1px solid #e4ddd2; border-radius: 10px; background: #faf8f6; font-size: 14.5px; color: #4a423a; }
.cfg-fixed-finish-swatch { width: 26px; height: 26px; border-radius: 6px; background-size: cover; background-position: center; border: 1px solid rgba(0,0,0,.12); flex: none; }
.cfg-fixed-finish-label strong { color: #1c1611; }

/* ===== Oversize quote gate (EZ Door Plus & other built-to-order sizes) ===== */
.cfg-quote-gate { display: none; }
.cfg.is-oversize .cfg-quote-gate { display: block; }
/* When the opening is oversize, the door has no self-serve price — hide the buy area. */
.cfg.is-oversize .product-purchase-row,
.cfg.is-oversize .cfg-price-block,
.cfg.is-oversize .cfg-from-fin,
.cfg.is-oversize #productPrice,
.cfg.is-oversize .btn-add-to-cart,
.cfg.is-oversize .cfg-qty-row { display: none !important; }
body.cfg-oversize .mbuybar { display: none !important; }

.cfg-quote-gate { border: 1px solid #e4ddd2; border-radius: 12px; background: #fbf7f3; padding: 18px 18px 16px; margin: 6px 0 4px; }
.cfg-quote-head { font-size: 16px; font-weight: 800; color: #b01733; display: flex; align-items: center; gap: 8px; }
.cfg-quote-lead { font-size: 13.5px; color: #5a5148; line-height: 1.5; margin: 8px 0 14px; }
.cfg-quote-summary { border: 1px solid #ece5da; border-radius: 9px; background: #fff; padding: 4px 12px; margin-bottom: 14px; }
.cfg-qs-row { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f0ebe3; font-size: 13.5px; }
.cfg-qs-row:last-child { border-bottom: 0; }
.cfg-qs-row b { flex: none; width: 72px; color: #8a7f70; font-weight: 700; }
.cfg-qs-row span { color: #1c1611; font-weight: 600; }
.cfg-qs-opt span { font-weight: 500; color: #4a423a; }
.cfg-qs-opt { padding-left: 0; }
.cfg-quote-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cfg-quote-fields label:first-child { grid-column: 1 / -1; }
.cfg-quote-form label, .cfg-quote-note-l { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 700; color: #6d6459; margin-top: 10px; }
.cfg-quote-form input, .cfg-quote-form textarea { font: inherit; font-weight: 500; padding: 10px 12px; border: 1.5px solid #d8d1c7; border-radius: 8px; background: #fff; color: #1c1611; }
.cfg-quote-form input:focus, .cfg-quote-form textarea:focus { outline: none; border-color: #b01733; }
.cfg-quote-submit { margin-top: 14px; width: 100%; justify-content: center; }
.cfg-quote-err { color: #b01733; font-size: 13px; font-weight: 600; margin: 10px 0 0; }
.cfg-quote-call { font-size: 13.5px; color: #5a5148; margin: 12px 0 0; text-align: center; }
.cfg-quote-call a { color: #b01733; font-weight: 700; text-decoration: none; }
.cfg-quote-done { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: #1f6f4d; background: #e7f2ec; border: 1px solid #bfe0cd; border-radius: 10px; padding: 14px 16px; margin-top: 12px; }
.cfg-quote-done[hidden] { display: none; }
.cfg-quote-done i { font-size: 18px; }
@media (max-width: 520px) { .cfg-quote-fields { grid-template-columns: 1fr; } }

/* Mobile hero tweaks (2026-08-31):
   - selected colour pill reveals its name via a clean width slide (no opacity fade,
     which read as a "loading" effect); the highlight transitions smoothly with it
   - "Previewing ... EZ Door Plus" line hidden for now
   - large space above the CTAs so the full door is visible */
@media (max-width: 700px) {
  /* Fire is baked into the mobile still (hero-*-fire.jpg, served via <picture>):
     iOS/WebKit can't render mix-blend-mode:screen on a <video>, so it drew the
     firebox as an opaque box. Drop the video on mobile; the still carries the fire. */
  .htest-fire { display: none; }
  .htest-pills { flex-wrap: nowrap; align-items: center; }
  .htest--big .htest-pill { padding: 9px 12px; gap: 0; }
  .htest-pill-label {
    display: inline-block;
    max-width: 0;
    margin-left: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.3s ease, margin-left 0.3s ease;
  }
  .htest-pill.is-active .htest-pill-label {
    max-width: 180px;
    margin-left: 7px;
  }
  .htest-previewing { display: none; }
  .htest--big .htest-sub { margin-bottom: 230px; }
}