/* ==========================================================================
   Northern Blinds — Design System (Blinds.ca-inspired retail theme)
   ========================================================================== */

:root {
  /* Colors — modeled on Blinds.ca's navy / royal-blue / gold / cream palette */
  --navy: #031f73;         /* promo bar, dark accents */
  --navy-deep: #001b44;    /* search bar, deepest accents */
  --blue: #3060af;         /* secondary nav, footer, links */
  --blue-dark: #234a87;    /* hover state for blue */
  --gold: #fcc300;         /* sale badges, stars */
  --rust: #c05717;         /* primary CTA buttons */
  --rust-dark: #a04710;    /* button hover */
  --red: #c02f1d;          /* sale copy, discounts */
  --cream: #fef5d7;        /* trust band / testimonial band bg */
  --ink: #1c2833;          /* body copy near-black */
  --ink-soft: #5b6472;     /* secondary text */
  --paper: #ffffff;        /* page background */
  --paper-alt: #f4f6f9;    /* light gray section bg */
  --line: #e2e5ea;         /* borders */
  --white: #ffffff;

  /* Type — Fraunces (editorial display serif) + Inter (refined neutral body) */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing */
  --gap-xs: 8px;
  --gap-sm: 16px;
  --gap-md: 24px;
  --gap-lg: 56px;
  --gap-xl: 112px;

  --radius: 8px;
  --radius-sm: 4px;
  --shadow-soft: 0 2px 12px rgba(3, 31, 115, 0.08);
  --shadow-med: 0 8px 28px rgba(3, 31, 115, 0.12);
  --container: 1200px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-sm: 0.2s;
  --dur-md: 0.4s;
  --dur-lg: 0.7s;
}

/* ---- Reset ---- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: 1rem;
  letter-spacing: -0.001em;
  -webkit-font-smoothing: antialiased;
  opacity: 0;
  animation: page-in 0.5s var(--ease) forwards;
  overflow-x: clip;
}
@keyframes page-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  body { opacity: 1; animation: none; }
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: 1rem; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--navy);
}
h1 { font-size: clamp(2.6rem, 5.2vw, 4.2rem); font-weight: 500; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
h3 { font-family: var(--font-body); font-size: 1.15rem; font-weight: 700; }
p { color: var(--ink-soft); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.container-wide {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: var(--gap-sm);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 3px;
  background: var(--gold);
  display: inline-block;
}

.section { padding-top: var(--gap-xl); padding-bottom: var(--gap-xl); }
.section-tight { padding-top: var(--gap-lg); padding-bottom: var(--gap-lg); }
.section-tight-top { padding-top: var(--gap-md); }
.section-tight-bottom { padding-bottom: var(--gap-md); }
.section-header {
  max-width: 640px;
  margin-bottom: var(--gap-lg);
}
.section-header.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-header.tight { margin-bottom: 28px; }
.section-header p { margin-top: var(--gap-sm); font-size: 1.08rem; }

.section-header-flex { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.section-header-flex .section-header { margin-bottom: 28px; }
.section-header-compare-btn { flex-shrink: 0; margin-bottom: 28px; }
@media (max-width: 640px) {
  .section-header-compare-btn { margin-bottom: 12px; }
}

.btn-advisor {
  position: relative;
  overflow: hidden;
  background: linear-gradient(100deg, var(--navy) 0%, var(--blue) 100%);
  color: var(--white);
  border: none;
  box-shadow: 0 4px 14px -2px rgba(3, 31, 115, 0.35);
  transition: background var(--dur-sm) var(--ease), transform var(--dur-sm) var(--ease), box-shadow var(--dur-sm) var(--ease);
}
.btn-advisor svg { width: 14px; height: 14px; color: var(--gold); transition: transform var(--dur-md) var(--ease); }
.btn-advisor:hover {
  background: linear-gradient(100deg, var(--navy-deep) 0%, var(--navy) 100%);
  transform: translateY(-2px) scale(1.035);
  box-shadow: 0 12px 24px -6px rgba(3, 31, 115, 0.48);
}
.btn-advisor:hover svg { transform: rotate(18deg) scale(1.2); }
.btn-advisor:active { transform: translateY(-1px) scale(1.01); }
/* Soft light sweep across the button on hover — a small "look at me"
   flourish for what's meant to be a standout feature, kept subtle by
   being hover-triggered only (nothing moving until the user engages). */
.btn-advisor::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 45%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s var(--ease);
}
.btn-advisor:hover::before { left: 125%; }
/* Gentle idle pulse ring — same restrained "sonar" pattern used on the
   watch-video and play-center buttons elsewhere on the site, so this reads
   as a highlighted feature without being a flashy, out-of-place animation.
   Pauses the moment the user hovers/focuses so it never fights their
   cursor, and is skipped entirely for reduced-motion users. */
@media (prefers-reduced-motion: no-preference) {
  .btn-advisor { animation: btnAdvisorPulse 3.2s ease-out infinite; }
  .btn-advisor:hover, .btn-advisor:focus-visible { animation-play-state: paused; }
}
@keyframes btnAdvisorPulse {
  0% { box-shadow: 0 4px 14px -2px rgba(3, 31, 115, 0.35), 0 0 0 0 rgba(48, 96, 175, 0.45); }
  65% { box-shadow: 0 4px 14px -2px rgba(3, 31, 115, 0.35), 0 0 0 11px rgba(48, 96, 175, 0); }
  100% { box-shadow: 0 4px 14px -2px rgba(3, 31, 115, 0.35), 0 0 0 0 rgba(48, 96, 175, 0); }
}

/* ---- Window Advisor nav entry (sitewide) ----
   Scoped as ".subnav-inner .nav-ai-link" (two classes) rather than just
   ".nav-ai-link" (one class) so it beats the generic ".subnav a" rule's
   specificity (one class + tag) — otherwise that rule's "display:block;
   padding:12px 0" wins the cascade and collapses this into an untidy,
   oversized block with no horizontal padding, which is what let the text
   spill past the rounded pill edges. */
.subnav-inner .nav-ai-link {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: linear-gradient(100deg, var(--navy) 0%, var(--blue) 100%);
  color: var(--white) !important;
  padding: 6px 13px;
  border: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.2;
  box-shadow: 0 3px 10px -2px rgba(3, 31, 115, 0.4);
  transition: background var(--dur-sm) var(--ease), transform var(--dur-sm) var(--ease), box-shadow var(--dur-sm) var(--ease);
}
.subnav-inner .nav-ai-link:hover,
.subnav-inner .nav-ai-link.active { border: none; }
.subnav-inner .nav-ai-link svg { width: 13px; height: 13px; color: var(--gold); flex-shrink: 0; transition: transform var(--dur-md) var(--ease); }
.subnav-inner .nav-ai-link:hover {
  background: linear-gradient(100deg, var(--navy-deep) 0%, var(--navy) 100%);
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 8px 18px -4px rgba(3, 31, 115, 0.5);
}
.subnav-inner .nav-ai-link:hover svg { transform: rotate(18deg) scale(1.2); }
.subnav-inner .nav-ai-link:active { transform: translateY(0) scale(1.01); }
/* Same light-sweep flourish as the homepage advisor button, scaled down
   to fit this smaller pill. */
.subnav-inner .nav-ai-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 45%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  transition: left 0.5s var(--ease);
}
.subnav-inner .nav-ai-link:hover::before { left: 125%; }
/* Same restrained idle "sonar" pulse used on the homepage advisor button
   and the site's other highlighted CTAs — pauses on hover/focus and is
   skipped for reduced-motion users. */
@media (prefers-reduced-motion: no-preference) {
  .subnav-inner .nav-ai-link { animation: navAdvisorPulse 3.2s ease-out infinite; }
  .subnav-inner .nav-ai-link:hover, .subnav-inner .nav-ai-link:focus-visible { animation-play-state: paused; }
}
@keyframes navAdvisorPulse {
  0% { box-shadow: 0 3px 10px -2px rgba(3, 31, 115, 0.4), 0 0 0 0 rgba(48, 96, 175, 0.45); }
  65% { box-shadow: 0 3px 10px -2px rgba(3, 31, 115, 0.4), 0 0 0 7px rgba(48, 96, 175, 0); }
  100% { box-shadow: 0 3px 10px -2px rgba(3, 31, 115, 0.4), 0 0 0 0 rgba(48, 96, 175, 0); }
}

/* ---- Window Advisor page ---- */
.advisor-hero { max-width: 760px; margin: 0 auto; padding-top: var(--gap-lg); padding-bottom: var(--gap-xl); text-align: center; }
.advisor-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  background: linear-gradient(100deg, var(--navy) 0%, var(--blue) 100%);
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: var(--gap-sm);
}
.advisor-eyebrow svg { width: 14px; height: 14px; color: var(--gold); }
.advisor-hero h1 { font-size: clamp(2rem, 4.5vw, 2.9rem); margin-bottom: 14px; }
.advisor-hero > p { max-width: 560px; margin: 0 auto var(--gap-lg); font-size: 1.05rem; color: var(--ink-soft); }

.advisor-card {
  text-align: left;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-soft);
  position: relative;
}
.advisor-card::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: calc(var(--radius) + 1.5px);
  padding: 1.5px;
  background: linear-gradient(120deg, var(--gold), var(--blue), var(--navy));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.5;
}
.advisor-label { display: block; font-weight: 700; color: var(--navy); margin-bottom: 10px; font-size: 0.95rem; }
.advisor-textarea {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  resize: vertical;
  min-height: 96px;
  transition: border-color var(--dur-sm) var(--ease);
}
.advisor-textarea:focus { outline: none; border-color: var(--blue); }
.advisor-input-error { border-color: var(--red) !important; animation: advisorShake 0.4s; }
@keyframes advisorShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.advisor-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.advisor-chips-label { font-size: 0.8rem; color: var(--ink-soft); font-weight: 700; margin-right: 4px; }
.advisor-chip {
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: border-color var(--dur-sm) var(--ease), background var(--dur-sm) var(--ease);
}
.advisor-chip:hover { border-color: var(--blue); background: var(--cream); }

.advisor-submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 20px;
  font-size: 1rem;
  padding: 15px;
}
.advisor-submit svg { width: 18px; height: 18px; }
.advisor-disclaimer { text-align: center; font-size: 0.78rem; color: var(--ink-soft); margin-top: 12px; }

.advisor-thinking {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--navy);
}
.advisor-thinking.visible { display: flex; }
.advisor-thinking-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  animation: advisorPulse 1s ease-in-out infinite;
}
.advisor-thinking-dot:nth-child(2) { animation-delay: 0.15s; }
.advisor-thinking-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes advisorPulse { 0%, 100% { opacity: 0.25; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } }

.advisor-results { display: none; margin-top: 32px; text-align: left; }
.advisor-results.visible { display: block; }
/* Only the standalone advisor.html page needs to offset scroll for the
   sticky site header — inside the popup modal there's no header to clear. */
.advisor-hero .advisor-results { scroll-margin-top: 184px; } /* header (148px) + promo bar (36px) */
.advisor-result-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-med);
}
.advisor-result-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(100deg, var(--navy) 0%, var(--blue) 100%);
  color: var(--white);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.advisor-result-badge svg { width: 13px; height: 13px; color: var(--gold); }
.advisor-result-main { display: flex; gap: 20px; align-items: center; margin-bottom: 22px; }
.advisor-result-img { width: 140px; height: 105px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; background: var(--paper-alt); }
.advisor-result-info h3 { font-size: 1.4rem; color: var(--navy); margin-bottom: 8px; }
.advisor-result-info p { color: var(--ink-soft); margin-bottom: 14px; line-height: 1.5; }
.advisor-result-info .btn svg { width: 15px; height: 15px; margin-left: 2px; }
.advisor-why { background: var(--paper-alt); border-radius: var(--radius-sm); padding: 18px 20px; margin-bottom: 16px; }
.advisor-why h4 { font-size: 0.92rem; color: var(--navy); margin-bottom: 10px; }
.advisor-why-reason { font-size: 0.92rem; line-height: 1.6; color: var(--ink); margin-bottom: 10px; }
.advisor-why ul:last-child { margin-bottom: 0; }
.advisor-why ul { margin: 0; padding-left: 20px; }
.advisor-why li { font-size: 0.9rem; line-height: 1.55; margin-bottom: 8px; color: var(--ink); }
.advisor-why li:last-child { margin-bottom: 0; }
.advisor-runner-up { font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 18px; }
.advisor-runner-up a { color: var(--blue); font-weight: 700; }
.advisor-start-over {
  background: none;
  border: none;
  color: var(--blue);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  padding: 0;
}
.advisor-start-over:hover { text-decoration: underline; }

/* ---- Mode toggle: "Describe It" (freeform) vs "Snap a Photo" ---- */
.advisor-mode-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  background: var(--paper-alt);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 22px;
  gap: 2px;
}
.advisor-mode-btn {
  border: none;
  background: none;
  padding: 9px 20px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background var(--dur-sm) var(--ease), color var(--dur-sm) var(--ease);
}
.advisor-mode-btn.active { background: var(--navy); color: var(--white); }
.advisor-mode-btn:not(.active):hover { color: var(--navy); }

/* ---- "You mentioned" breakdown — ties the customer's own words to the
   signal each one triggered, so the match never reads as a black box. ---- */
.advisor-mentions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.advisor-mentions-label { font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); margin-right: 2px; }
.advisor-mention-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--navy);
}
.advisor-mention-chip svg { width: 10px; height: 10px; color: var(--rust); flex-shrink: 0; }

/* ---- Refinement chips — re-bias the same typed text instead of asking
   the customer to describe their window again. ---- */
.advisor-refine { margin-bottom: 18px; }
.advisor-refine-label { display: block; font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 8px; }
.advisor-refine-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.advisor-refine-chip {
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: border-color var(--dur-sm) var(--ease), background var(--dur-sm) var(--ease), color var(--dur-sm) var(--ease);
}
.advisor-refine-chip:hover { border-color: var(--blue); }
.advisor-refine-chip.active { background: var(--navy); border-color: var(--navy); color: var(--white); }
.advisor-result-card.advisor-refining { opacity: 0.4; transition: opacity 0.14s var(--ease); }

/* ---- Quiz-option styling — the standalone multi-step "Quick Match" quiz
   that used to live here has been removed, but these classes are still in
   active use by the two quick-tap questions inside "Snap a Photo" (see
   .advisor-photo-q below), so they stay. ---- */
.advisor-quiz-q { font-size: 1.15rem; color: var(--navy); margin-bottom: 4px; text-align: center; }
.advisor-quiz-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 22px 0 6px;
}
.advisor-quiz-opt {
  background: var(--paper-alt);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-sm) var(--ease), background var(--dur-sm) var(--ease);
}
.advisor-quiz-opt:hover { border-color: var(--blue); }
.advisor-quiz-opt.active { border-color: var(--navy); background: var(--white); color: var(--navy); box-shadow: 0 0 0 1.5px var(--navy) inset; }

/* ---- Snap a Photo mode ---- */
.advisor-photo-intro {
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-bottom: 18px;
}
.advisor-photo-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.advisor-photo-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  padding: 40px 24px;
  cursor: pointer;
  transition: border-color var(--dur-sm) var(--ease), background var(--dur-sm) var(--ease);
}
.advisor-photo-dropzone:hover { border-color: var(--blue); background: var(--paper-alt); }
.advisor-photo-dropzone svg { color: var(--blue); }
.advisor-photo-dropzone-title { font-weight: 700; color: var(--navy); font-size: 0.98rem; }
.advisor-photo-dropzone-sub { font-size: 0.82rem; color: var(--ink-soft); max-width: 360px; }
.advisor-photo-input:focus-visible + .advisor-photo-dropzone { outline: 2px solid var(--blue); outline-offset: 2px; }

.advisor-photo-preview-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-alt);
  margin-bottom: 10px;
}
.advisor-photo-preview-frame img { display: block; width: 100%; max-height: 260px; object-fit: cover; }
.advisor-photo-detected {
  position: absolute;
  left: 12px; bottom: 12px;
  background: linear-gradient(100deg, var(--navy) 0%, var(--blue) 100%);
  color: var(--white);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
}
.advisor-photo-retake {
  display: block;
  background: none;
  border: none;
  color: var(--blue);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0;
  margin-bottom: 20px;
}
.advisor-photo-retake:hover { text-decoration: underline; }

.advisor-photo-questions { display: flex; flex-direction: column; gap: 22px; }
.advisor-photo-q .advisor-quiz-q { text-align: left; font-size: 1rem; margin-bottom: 12px; }
.advisor-photo-q .advisor-quiz-options { margin: 0; }
.advisor-photo-submit { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 24px; }
.advisor-photo-submit svg { width: 16px; height: 16px; }
.advisor-photo-submit[disabled] { opacity: 0.5; cursor: not-allowed; }
.advisor-photo-mode .advisor-disclaimer { margin-top: 12px; }

@media (max-width: 640px) {
  .advisor-card { padding: 20px; }
  .advisor-result-main { flex-direction: column; align-items: flex-start; }
  .advisor-result-img { width: 100%; height: 160px; }
  .advisor-photo-dropzone { padding: 28px 16px; }
  .advisor-quiz-options { grid-template-columns: 1fr; }
}

/* ---- Standalone advisor.html — flagship treatment ----
   The popup modal stays light/functional; the standalone page gets a full
   landing-page identity so it reads as a tool worth bookmarking, not a
   lead-gen popup that happens to also live at its own URL. ---- */
.advisor-hero-band {
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-deep) 55%, var(--blue-dark) 100%);
  padding: var(--gap-lg) 0 0;
  margin-bottom: var(--gap-xl);
}
.advisor-hero-band .breadcrumb { color: rgba(255,255,255,0.55); }
.advisor-hero-band .breadcrumb a { color: rgba(255,255,255,0.75); }
.advisor-hero-band .advisor-eyebrow { background: rgba(255,255,255,0.12); }
.advisor-hero-band .advisor-hero h1 { color: var(--white); }
.advisor-hero-band .advisor-hero > p { color: rgba(255,255,255,0.78); }

.advisor-trust-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--gap-lg);
  margin: var(--gap-md) 0 var(--gap-lg);
  padding-bottom: var(--gap-lg);
}
.advisor-trust-stat { text-align: center; }
.advisor-trust-stat strong { display: block; font-family: var(--font-display); font-size: 1.9rem; color: var(--white); }
.advisor-trust-stat span { font-size: 0.82rem; color: rgba(255,255,255,0.68); }

.advisor-card-wrap { max-width: 760px; margin: 0 auto; padding: 0 var(--gap-sm) var(--gap-xl); }
.advisor-hero-band .advisor-card { margin-top: -46px; position: relative; z-index: 2; }

.advisor-how {
  max-width: 900px;
  margin: 0 auto var(--gap-xl);
  padding: 0 var(--gap-sm);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-md);
}
.advisor-how-step { text-align: center; }
.advisor-how-num {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-weight: 800;
  font-family: var(--font-display);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
}
.advisor-how-step h3 { font-size: 1.02rem; color: var(--navy); margin-bottom: 6px; }
.advisor-how-step p { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.5; margin: 0; }

@media (max-width: 720px) {
  .advisor-how { grid-template-columns: 1fr; gap: var(--gap-sm); }
  .advisor-trust-stats { gap: var(--gap-md); }
}

.bg-alt { background: var(--cream); }
.bg-soft { background: var(--paper-alt); }
.bg-ink { background: var(--navy); color: var(--white); }
.bg-ink h2, .bg-ink h3, .bg-ink p { color: var(--white); }
.bg-ink .eyebrow { color: var(--gold); }
.bg-ink .eyebrow::before { background: var(--gold); }

/* Match eyebrow tag widths to "Shop Customer Favorites" for visual consistency */
.testimonials-tight .eyebrow { letter-spacing: 0.413em; }
.recently-viewed-section .eyebrow { letter-spacing: 0.344em; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.92rem;
  transition: all var(--dur-sm) var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--rust);
  color: var(--white);
}
.btn-primary:hover { background: var(--rust-dark); }
.btn:disabled,
.btn[disabled] {
  background: #c7c3ba;
  color: #857f72;
  cursor: not-allowed;
  pointer-events: none;
}
.btn:disabled:hover,
.btn[disabled]:hover { background: #c7c3ba; }
.btn-outline {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
}
.btn-outline:hover { background: var(--navy); color: var(--white); }
.btn-light {
  background: var(--white);
  color: var(--navy);
}
.btn-light:hover { background: #f0f2f6; }
.btn-outline-light {
  background: transparent;
  color: var(--white);
  border: 2px solid var(--white);
}
.btn-outline-light:hover { background: var(--white); color: var(--navy); }
.btn-sm { padding: 9px 18px; font-size: 0.85rem; }
.btn-block { width: 100%; }

/* ---- Homepage video hero banner ---- */
.hero-video-banner {
  position: relative;
  /* Full-bleed width. The box aspect-ratio matches the hero clip's native
     16:9 frame exactly, so object-fit: cover on .hero-video-bg has nothing
     to crop — the video shows edge-to-edge with no trimmed top/bottom and
     no letterbox bars. If a future hero clip isn't 16:9, cover will still
     crop it to fill this box, so keep new clips at 16:9 where possible. */
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--navy);
}
.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap-md);
}
.hero-video-panel {
  background: rgba(3, 31, 115, 0.86);
  color: var(--white);
  max-width: 560px;
  width: 100%;
  padding: 44px 48px;
  border-radius: var(--radius);
  text-align: center;
  box-shadow: var(--shadow-med);
}
.hero-video-eyebrow {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  margin: 0 0 8px;
  color: var(--white);
}
.hero-video-stat {
  font-family: var(--font-display);
  font-size: 4.4rem;
  line-height: 1;
  margin: 0 0 12px;
  font-weight: 600;
  color: var(--white);
}
.hero-video-stat-lead {
  display: block;
  font-style: italic;
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 2px;
  color: var(--white);
}
.hero-video-sub {
  font-size: 1.05rem;
  margin: 0 0 26px;
  font-weight: 500;
  color: var(--white);
}
.hero-video-script {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold);
  font-size: 1.1rem;
  margin: 0 0 26px;
}
.hero-video-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .hero-video-panel { padding: 30px 22px; max-width: 92%; }
  .hero-video-stat { font-size: 2.9rem; }
  .hero-video-eyebrow { font-size: 1.02rem; }
  .hero-video-sub { font-size: 0.92rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video-bg { display: none; }
  .hero-video-banner { background: linear-gradient(155deg, var(--navy) 0%, var(--blue) 100%); }
}

/* ---- Window Advisor strip — sits flush under the hero video, a plain
   full-width color band (no card, no border-radius, no shadow) so it reads
   as part of the page chrome rather than a floating element. ---- */
.advisor-strip { background: var(--paper-alt); border-bottom: 1px solid var(--line); }
.advisor-strip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 22px 0;
}
.advisor-strip-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--navy);
  margin: 0;
}
.advisor-strip-text em { font-style: italic; color: var(--rust); }
@media (max-width: 640px) {
  .advisor-strip-inner { justify-content: center; text-align: center; padding: 18px 0; }
  .advisor-strip-text { font-size: 1.02rem; }
}

/* ---- Top promo bar — rotates through category sale callouts sitewide
   (was a single static "Summer Install Special" line; now cycles the same
   deals previously shown in the homepage-only orange strip, so every page
   carries them, not just the homepage). Sits just below the header/nav,
   flush with the top of the hero.
   Grey/glass look on purpose -- NOTE: this bar lives inside .header-stack,
   which is permanently sticky (see comment above .header-stack), so it is
   composited over whatever scrolls underneath for the buyer's entire time
   on the page, exactly like .site-header. A real backdrop-filter blur here
   would reintroduce the same "fuzzy/stuck scroll" jank that was fixed on
   the header and the sticky add-to-cart bar (see those comments) -- so
   this fakes the frosted-glass look with a solid, opaque light-grey tint
   plus a soft inner highlight instead of an actual blur. */
.promo-bar {
  background: var(--paper-alt);
  background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  border-bottom: 1px solid var(--line);
  color: var(--navy);
  text-align: center;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.015em;
  line-height: 1.4;
  position: relative;
  z-index: 1; /* stays below .site-header (z-index: 2) so the subnav dropdown,
                 which extends down past the header's edge, never gets
                 covered by the promo bar sitting directly beneath it */
  overflow: hidden;
  height: 42px;
}
.promo-bar strong { color: var(--rust); font-weight: 800; }
/* .promo-bar-slide is just the crossfade layout box (full width/height, so
   the fade-in/out positions correctly) -- it's a <div>, not a link, so the
   whole bar isn't one giant click target. The actual link lives at
   .promo-bar-slide-link, sized to its own content (inline-flex) so only
   the visible text/icon is clickable, not the empty space around it. */
.promo-bar-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}
.promo-bar-slide.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.promo-bar-slide-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--navy);
  text-decoration: none;
}
.promo-bar-slide-link::before {
  content: "";
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  background: var(--rust);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.6 2H4a2 2 0 0 0-2 2v8.6c0 .5.2 1 .6 1.4l9 9c.8.8 2 .8 2.8 0l7.6-7.6c.8-.8.8-2 0-2.8l-9-9c-.4-.4-.9-.6-1.4-.6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.6 2H4a2 2 0 0 0-2 2v8.6c0 .5.2 1 .6 1.4l9 9c.8.8 2 .8 2.8 0l7.6-7.6c.8-.8.8-2 0-2.8l-9-9c-.4-.4-.9-.6-1.4-.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.promo-bar-slide-link:hover { text-decoration: underline; }
.promo-bar-slide-link strong { color: var(--rust); }
@media (max-width: 480px) {
  .promo-bar { font-size: 0.76rem; height: 44px; }
  .promo-bar-slide { padding: 0 12px; }
  .promo-bar-slide-link { gap: 6px; }
  .promo-bar-slide-link::before { width: 12px; height: 12px; }
}

/* ---- Rotating promo strip (homepage, sits just below the header) ---- */
.promo-rotator {
  background: var(--rust);
  position: relative;
  overflow: hidden;
  height: 42px;
}
.promo-rotator-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 16px;
  color: var(--white);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}
.promo-rotator-slide.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.promo-rotator-slide:hover { text-decoration: underline; }
.promo-rotator-slide strong { color: var(--gold); font-weight: 800; }
@media (max-width: 480px) {
  .promo-rotator { height: 48px; }
  .promo-rotator-slide { font-size: 0.74rem; padding: 0 12px; }
}

/* ---- Header + promo bar dock together as one sticky unit ----
   Previously only .site-header was sticky, with the promo bar living in
   normal flow right underneath it. Once the promo bar moved to sit below
   the header (see .header-stack below), that created a glitchy scroll
   effect: the header is translucent/blurred (see "Glassy sticky header"
   further down), so the promo bar's animated slide carousel would scroll
   up and show/smear through the frosted glass as it passed underneath.
   Wrapping both in one sticky container keeps them pinned together so
   nothing ever slides behind the glass. */
.header-stack {
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header {
  position: relative;
  z-index: 2;
  /* Cheap layer promotion (not a blur) — kept so this still establishes the
     containing block the subnav dropdown's position:fixed math depends on
     (see positionSubnavDropdown() in js/script.js); removing backdrop-filter
     below dropped that side effect, so this replaces it without the cost. */
  transform: translateZ(0);
  background: var(--white);
  box-shadow: 0 1px 0 var(--line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  max-width: var(--container);
  margin: 0 auto;
}
.logo {
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.logo-mark { color: var(--gold); }
.logo-mark-img { height: 36px; width: auto; display: block; flex-shrink: 0; }
.logo-text { display: flex; flex-direction: column; justify-content: center; line-height: 1.1; }
.logo-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
/* Two-tone treatment matching the "Welcome home." hero headline —
   first word stays the inherited navy/white, second word picks up
   the same rust accent as .accent-word, same Fraunces display font. */
.logo-title-2 { color: var(--rust); }
.logo-tagline {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 2px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--gap-lg);
}
.nav-links a {
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--navy);
  transition: color var(--dur-sm) var(--ease);
  position: relative;
}
.nav-links a:hover { color: var(--rust); }
.nav-links a.active { color: var(--rust); }
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
}
.nav-phone {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  color: var(--ink-soft);
  text-align: right;
}
.nav-phone strong { font-size: 0.95rem; color: var(--navy); }
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 26px;
}
.nav-toggle span {
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
}

/* ---- Secondary category nav bar ---- */
.subnav {
  background: var(--blue);
}
.subnav-inner {
  display: flex;
  align-items: center;
  gap: var(--gap-lg);
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  overflow-x: auto;
}
/* Tighten the gap between items in steps as the window narrows, so the
   full set of links (now including Window Advisor) keeps fitting on one
   line without triggering the horizontal scrollbar on ordinary laptop-
   width windows. Every item, label and style stays identical — only the
   breathing room between them shrinks. Below ~820px there isn't enough
   room for any of this to help, so overflow-x:auto above remains as a
   fallback (this is the same horizontal-scroll behavior already used on
   mobile, not a new pattern). */
@media (max-width: 1150px) { .subnav-inner { gap: 34px; } }
@media (max-width: 1020px) { .subnav-inner { gap: 22px; } }
@media (max-width: 900px)  { .subnav-inner { gap: 12px; } }
@media (max-width: 820px)  { .subnav-inner { gap: 6px; } }
.subnav a {
  display: block;
  padding: 12px 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-sm) var(--ease);
}
.subnav a:hover, .subnav a.active { border-color: var(--gold); }

.subnav-item {
  position: relative;
  display: flex;
  align-items: center;
}
.subnav-label {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  cursor: default;
}
.subnav-caret { width: 10px; height: 10px; transition: transform var(--dur-sm) var(--ease); }
.subnav-item:hover .subnav-caret, .subnav-item:focus-within .subnav-caret { transform: rotate(180deg); }
.subnav-dropdown {
  position: fixed;
  top: 0;
  left: 0;
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-med);
  width: 260px;
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-sm) var(--ease), transform var(--dur-sm) var(--ease), visibility var(--dur-sm);
  z-index: 200;
}
.subnav-item:hover .subnav-dropdown,
.subnav-item:focus-within .subnav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.subnav-dropdown a {
  display: block;
  padding: 10px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  border-bottom: none;
  border-radius: var(--radius-sm);
  white-space: normal;
  line-height: 1.3;
}
.subnav-dropdown a:hover { background: var(--paper-alt); border-color: transparent; }
/* Groups a run of related links (e.g. Child Safety / Fire Retardent /
   GreenGuard) under a small label instead of leaving them as visually
   indistinguishable items in one long list. */
.subnav-dropdown-heading {
  display: block;
  padding: 12px 14px 4px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  margin-top: 6px;
}
.subnav-dropdown a:first-child + .subnav-dropdown-heading,
.subnav-dropdown-heading:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 6px;
}

/* ---- Hero ---- */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: var(--gap-xl);
  padding-top: var(--gap-xl);
  padding-bottom: var(--gap-md);
}
.hero p.lead {
  font-size: 1.1rem;
  margin: var(--gap-md) 0 var(--gap-lg);
  max-width: 480px;
}
.hero-cta { display: flex; gap: var(--gap-sm); flex-wrap: wrap; }
.hero-stats {
  display: flex;
  gap: var(--gap-lg);
  margin-top: var(--gap-lg);
  padding-top: var(--gap-lg);
  border-top: 1px solid var(--line);
}
.hero-stats div strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--navy);
}
.hero-stats div span { font-size: 0.85rem; color: var(--ink-soft); }

.hero-visual {
  position: relative;
  aspect-ratio: 3/2;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(155deg, var(--navy) 0%, var(--blue) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  isolation: isolate;
}
.hero-visual svg { width: 70%; height: auto; }

.hero-slideshow { position: absolute; inset: 0; }
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s var(--ease);
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: opacity;
}
.hero-slide.active { opacity: 1; pointer-events: auto; z-index: 1; }
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  image-rendering: auto;
  transition: transform 0.35s ease-out;
}
.hero-slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.85);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-sm) var(--ease), transform var(--dur-sm) var(--ease);
}
.hero-slide-arrow:hover { background: var(--white); transform: translateY(-50%) scale(1.08); }
.hero-slide-arrow.prev { left: 14px; }
.hero-slide-arrow.next { right: 14px; }
.hero-slide-dots {
  position: absolute;
  bottom: 76px;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 7px;
}
.hero-slide-dots button {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.55);
  cursor: pointer;
  padding: 0;
  transition: background var(--dur-sm) var(--ease), transform var(--dur-sm) var(--ease);
}
.hero-slide-dots button.active { background: var(--white); transform: scale(1.3); }

/* ---- Trust badges strip ---- */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-sm);
  padding: 14px 22px;
  background: var(--cream);
  border-radius: var(--radius);
  margin: 14px 0 var(--gap-md);
}
.trust-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 10px;
  padding: 4px 0;
}
.trust-item + .trust-item { border-left: 1px solid rgba(20,30,60,0.08); padding-left: var(--gap-sm); }
.trust-item .icon-circle { width: 30px; height: 30px; flex-shrink: 0; color: var(--navy); background: transparent; }
.trust-item strong { display: block; font-size: 0.8rem; color: var(--navy); line-height: 1.2; }
.trust-item span { font-size: 0.72rem; color: var(--ink-soft); }

/* ---- Icon circle (used across site) ---- */
.icon-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #eaf0fb;
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-circle svg { width: 60%; height: 60%; }
.icon-circle.sage { background: #fff6df; color: var(--gold); }

/* ---- Category grid (plain photo + caption, Blinds.ca style) ---- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-md);
}
.cat-card {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}
.cat-card .cat-visual {
  aspect-ratio: 4/3;
  border-radius: var(--radius-sm);
  background: var(--paper-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--line);
  transition: box-shadow var(--dur-md) var(--ease);
}
.cat-card:hover .cat-visual { box-shadow: var(--shadow-med); }
.cat-card .cat-visual svg { width: 46%; height: auto; }
.cat-card .cat-visual img { width: 100%; height: 100%; object-fit: cover; }
.cat-card h3 { font-size: 1.02rem; font-weight: 700; }
.cat-card .price-tag { font-size: 0.85rem; color: var(--red); font-weight: 700; }
.cat-card p { font-size: 0.88rem; display: none; }
.cat-card .cat-link {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--blue);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ---- Popular categories (4 big tiles) ---- */
.popular-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
}
.popular-cat-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: center;
  color: inherit;
  height: 100%;
}
.popular-cat-visual {
  aspect-ratio: 4/3;
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper-alt);
  box-shadow: var(--shadow-soft);
  transform: translateZ(0);
  transition: transform var(--dur-md) var(--ease), box-shadow var(--dur-md) var(--ease);
}
.popular-cat-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: translateZ(0) scale(1);
  transition: transform 0.5s var(--ease);
}
.popular-cat-card:hover .popular-cat-visual { transform: translateY(-8px); box-shadow: var(--shadow-med); }
.popular-cat-card:hover .popular-cat-visual img { transform: translateZ(0) scale(1.06); }
.popular-cat-card h3 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--navy);
  transition: color var(--dur-sm) var(--ease);
  margin-top: auto;
}
.popular-cat-card:hover h3 { color: var(--blue); }
.popular-cat-more { text-align: center; margin-top: var(--gap-md); }
.popular-cat-more a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--blue);
  font-size: 0.95rem;
}

/* ---- Shop by Colour (secondary nav for buyers who think in colour,
   not category — modelled on selectblindscanada.ca's "Shop by Colour"
   strip, which sits right where this section does: after the category
   grid, before Customer Favourites).
   Tried wrapping this in a raised panel with a gold accent bar first --
   read as too heavy/boxed-in for what's meant to be a quiet, secondary
   way to browse. Reverted to the original loose, discrete row and kept
   just a touch more richness on the dot itself (a faint inset rim for
   depth, a soft gold ring on hover instead of a flat scale-up). A thin
   hairline above (not a full boxed panel) separates it from the category
   grid above it, and the colour name underneath each dot uses the same
   quiet serif-italic treatment as other refined labels on the site. */
.colour-shop-section { border-top: 1px solid var(--line); padding-top: 48px; }
.colour-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px 22px;
}
.colour-swatch-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: inherit;
  width: 84px;
  text-align: center;
}
.colour-swatch-card span:last-child {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.015em;
  color: var(--ink-soft);
  transition: color var(--dur-sm) var(--ease);
}
.colour-swatch-card:hover span:last-child { color: var(--blue); }
.colour-dot {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  box-shadow: var(--shadow-soft), inset 0 0 0 1px rgba(3, 31, 115, 0.06);
  transition: transform var(--dur-sm) var(--ease), box-shadow var(--dur-sm) var(--ease);
}
/* A faint top-left highlight + bottom-right shade so each dot reads as a
   gently domed swatch rather than a flat vector fill -- subtle enough not
   to fight the colour underneath, on every hex value used here. */
.colour-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 55%),
    radial-gradient(circle at 72% 78%, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0) 60%);
  pointer-events: none;
}
.colour-swatch-card:hover .colour-dot {
  transform: translateY(-4px) scale(1.06);
  box-shadow: var(--shadow-med), 0 0 0 3px rgba(252, 195, 0, 0.28);
}
.colour-dot-multi {
  background: conic-gradient(from 180deg, #8f3229, #c96a2e, #d9c9ac, #4a6b4f, #2f4a7a, #5c4a72, #8f3229);
}

/* ---- Customer favorites (6-tile linear row) ---- */
.fav-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
}
.fav-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: inherit;
}
.fav-visual {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper-alt);
}
.fav-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.fav-card:hover .fav-visual img { transform: scale(1.06); }
.fav-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--gold);
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 4px 9px;
  border-radius: 3px;
  z-index: 2;
  text-transform: uppercase;
}
.fav-card h3 {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.3;
  margin-top: 6px;
  min-height: 2.4em;
}
.fav-fabric-name {
  font-size: 0.76rem;
  color: var(--ink-soft);
  margin: -2px 0 2px;
  line-height: 1.3;
}
.fav-stars {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--gold);
  font-size: 0.82rem;
  letter-spacing: 1px;
}
.fav-stars .count { color: var(--ink-soft); font-size: 0.76rem; letter-spacing: normal; }
.fav-save { color: var(--red); font-weight: 700; font-size: 0.8rem; }
.fav-price {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.fav-price .was {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: line-through;
}
.fav-more { text-align: center; margin-top: var(--gap-md); }
.fav-more a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--blue);
  font-size: 0.95rem;
}

/* ---- Pricing / product cards (Blinds.ca "customer favorites" style) ---- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-md);
}
.price-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--dur-md) var(--ease), transform var(--dur-md) var(--ease);
  position: relative;
}
.price-card:hover { box-shadow: var(--shadow-med); transform: translateY(-2px); }
.price-card.featured { border: 2px solid var(--blue); }
.price-card .sale-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--gold);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: 3px;
  z-index: 2;
  text-transform: uppercase;
}
.price-card .ribbon {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--navy);
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-radius: 3px;
  z-index: 2;
  text-transform: uppercase;
}
.price-visual {
  aspect-ratio: 16/10;
  background: var(--paper-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.price-visual svg { width: 42%; height: auto; }
.price-visual img { width: 100%; height: 100%; object-fit: cover; }
.price-card-body { padding: var(--gap-md); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.price-card-body h3 { font-size: 1.05rem; }
.price-stars {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--gold);
  font-size: 0.9rem;
  letter-spacing: 1px;
}
.price-stars .count { color: var(--ink-soft); font-size: 0.78rem; letter-spacing: normal; }
.price-save { color: var(--red); font-weight: 700; font-size: 0.85rem; }
.price-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.price-value .was {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: line-through;
}
.price-value .starting-label { font-size: 0.8rem; font-weight: 500; color: var(--ink-soft); }
.price-card p.desc { font-size: 0.88rem; }
.price-card ul.features { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 10px; }
.price-card ul.features li {
  font-size: 0.86rem;
  color: var(--ink-soft);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.price-card ul.features li svg { width: 15px; height: 15px; margin-top: 3px; color: var(--blue); flex-shrink: 0; }
.price-card .btn { margin-top: auto; }
.price-note {
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: var(--gap-md);
}
/* Big, hard-to-miss banner — buyers land here straight from a homepage
   colour click and need an immediate, unmissable confirmation that the
   filter actually applied (an earlier subtle version got missed on first
   glance). Navy background + gold top border matches the site's other
   high-emphasis banners (promo bar, hero) rather than blending into the
   page like a quiet notice would. */
.colour-filter-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  margin-bottom: var(--gap-sm);
  border-top: 4px solid var(--gold);
  box-shadow: var(--shadow-med);
}
.colour-filter-banner-dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 3px solid rgba(255,255,255,0.5);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.12);
}
.colour-filter-banner-text { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.colour-filter-banner-title { font-size: 1.15rem; font-weight: 800; font-family: var(--font-display); }
/* The "what to do next" line is the whole point of this banner (the
   confirmation half was already loud) — a gold, high-contrast badge with
   a bouncing arrow instead of quiet translucent-white subtext, so it
   reads as an instruction the buyer needs to act on, not a footnote. */
.colour-filter-banner-sub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  background: var(--gold);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 999px;
}
.colour-filter-banner-next {
  background: var(--navy);
  color: var(--white);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.colour-filter-banner-sub svg {
  flex-shrink: 0;
  animation: colourFilterBounce 1.4s ease-in-out infinite;
}
@keyframes colourFilterBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .colour-filter-banner-sub svg { animation: none; }
}
.colour-filter-banner-clear {
  flex-shrink: 0;
  color: var(--white);
  font-weight: 700;
  font-size: 0.85rem;
  border: 1.5px solid rgba(255,255,255,0.5);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  transition: all var(--dur-sm) var(--ease);
}
.colour-filter-banner-clear:hover { background: rgba(255,255,255,0.12); border-color: var(--white); }
.colour-filter-banner-clear span { margin-left: 3px; }

/* "1 Colour -> 2 Style" mini-stepper directly above the grid — makes the
   next action (clicking a product card) read as a continuation of the
   choice the buyer just made on the homepage, not a fresh decision. */
.colour-filter-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--gap-md);
  color: var(--ink-soft);
}
.colour-filter-steps svg { color: var(--line); flex-shrink: 0; }
.colour-filter-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 700;
}
.colour-filter-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  background: var(--line);
  color: var(--ink-soft);
  flex-shrink: 0;
}
.colour-filter-step.done { color: var(--navy); }
.colour-filter-step.done .colour-filter-step-num { background: var(--gold); color: var(--ink); }
.colour-filter-step.current { color: var(--blue); }
.colour-filter-step.current .colour-filter-step-num { background: var(--blue); color: var(--white); }
@media (max-width: 640px) {
  .colour-filter-banner { flex-wrap: wrap; }
  .colour-filter-banner-clear { margin-left: auto; }
}

/* Category filter pills (products page) */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--gap-lg);
}
.filter-pill {
  padding: 9px 20px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--navy);
  transition: all var(--dur-sm) var(--ease);
}
.filter-pill:hover, .filter-pill.active {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

/* ---- Instant size pricing widget (injected by pdp-engine.js above any
   .pricing-grid — Shop by Feature pages + Products & Pricing) ---- */
.pdp-size-quickfilter {
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin-bottom: var(--gap-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
}
.pdp-size-quickfilter-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--navy);
  font-size: 0.92rem;
}
.pdp-size-quickfilter-label svg { flex-shrink: 0; color: var(--blue); }
.pdp-size-quickfilter-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.pdp-size-quickfilter-fields label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.pdp-size-quickfilter-fields input {
  width: 64px;
  padding: 7px 8px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--ink);
}
.pdp-size-quickfilter-fields input:focus { border-color: var(--blue); outline: none; }
.pdp-size-quickfilter-fields .btn { padding: 9px 18px; font-size: 0.84rem; }
.pdp-size-quickfilter-reset {
  background: none;
  border: none;
  color: var(--blue);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}
.pdp-size-quickfilter-note {
  flex-basis: 100%;
  font-size: 0.82rem;
  color: var(--rust);
  font-weight: 600;
}
@media (max-width: 640px) {
  .pdp-size-quickfilter { flex-direction: column; align-items: stretch; }
  .pdp-size-quickfilter-fields { justify-content: space-between; }
}

/* ---- Feature split (motorized callout, mission, etc.) ---- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-xl);
  align-items: center;
}
.split-reverse .split-visual { order: 2; }
.split-visual {
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  background: var(--paper-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.split-visual svg { width: 55%; height: auto; }
.split-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split-visual-logo img { object-fit: contain; padding: 12%; box-sizing: border-box; }
.split-visual-link { display: block; width: 100%; height: 100%; overflow: hidden; }
.split-visual-link img { transition: transform 0.4s ease; }
.split-visual-link:hover img { transform: scale(1.05); }
.split-visual-stack { aspect-ratio: auto; overflow: visible; display: flex; flex-direction: column; gap: 14px; background: transparent; }
.split-visual-stack img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.split-visual-stack .video-btn-wrap { border-radius: var(--radius); overflow: hidden; }
.split-visual-stack .video-btn-wrap img { border-radius: 0; }

/* ---- Watch Video floating button + modal ---- */
.split-visual { position: relative; }
.video-btn-wrap { position: relative; }
.watch-video-btn {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  color: var(--navy);
  border: 1px solid rgba(3,31,115,0.08);
  border-radius: 999px;
  padding: 10px 18px 10px 14px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(3,31,115,0.2);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.watch-video-btn:hover { background: var(--navy); color: var(--white); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(3,31,115,0.3); }
.watch-video-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.watch-video-btn.pos-left {
  left: 12px;
  right: auto;
  bottom: 12px;
  padding: 6px 12px 6px 9px;
  font-size: 0.74rem;
  gap: 5px;
}
.watch-video-btn.pos-left svg { width: 12px; height: 12px; }

/* A quiet, breathing glow draws the eye to the video button on first
   load without resorting to a bounce or shake — a soft ring expands
   outward and fades, echoing the button's own shape rather than jumping
   around the page. Pauses on hover/focus so it never fights the user's
   own interaction, and is disabled entirely for reduced-motion users. */
@media (prefers-reduced-motion: no-preference) {
  .watch-video-btn {
    animation: watchVideoPulse 2.8s ease-out infinite;
  }
  .watch-video-btn:hover,
  .watch-video-btn:focus-visible {
    animation-play-state: paused;
  }
}
@keyframes watchVideoPulse {
  0% {
    box-shadow: 0 4px 14px rgba(3,31,115,0.2), 0 0 0 0 rgba(3,31,115,0.45);
  }
  65% {
    box-shadow: 0 4px 14px rgba(3,31,115,0.2), 0 0 0 12px rgba(3,31,115,0);
  }
  100% {
    box-shadow: 0 4px 14px rgba(3,31,115,0.2), 0 0 0 0 rgba(3,31,115,0);
  }
}
/* Centered play button — used when a video stands in for a section's
   whole visual (e.g. homepage Motorized Split) rather than sitting as a
   small corner badge over a product photo like .watch-video-btn does. */
.video-play-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: background 0.2s ease, transform 0.2s ease;
}
.video-play-center:hover { background: rgba(255, 255, 255, 0.34); transform: translate(-50%, -50%) scale(1.06); }
.video-play-center svg { width: 26px; height: 26px; margin-left: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .video-play-center { animation: videoPlayCenterPulse 2.8s ease-out infinite; }
  .video-play-center:hover, .video-play-center:focus-visible { animation-play-state: paused; }
}
@keyframes videoPlayCenterPulse {
  0% { box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 0 0 rgba(255,255,255,0.45); }
  65% { box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 0 16px rgba(255,255,255,0); }
  100% { box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 0 0 rgba(255,255,255,0); }
}
@media (max-width: 640px) {
  .video-play-center { width: 58px; height: 58px; }
  .video-play-center svg { width: 21px; height: 21px; margin-left: 2px; }
}

.video-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(242,239,232,0.8);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: none;
  z-index: 2200;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.video-modal-overlay.open { display: flex; }
.video-modal-box { position: relative; width: min(900px, 92vw); pointer-events: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.35); border-radius: var(--radius-sm); }
.video-modal-box video { width: 100%; max-height: 82vh; border-radius: var(--radius-sm); display: block; background: #000; }
.video-modal-close {
  position: absolute;
  top: -40px;
  right: 0;
  color: var(--navy);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  background: var(--white);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
/* ---- Window Advisor popup modal ----
   Reuses .advisor-card / .advisor-textarea / .advisor-chip / .advisor-results
   etc. verbatim from advisor.html so the popup matches the standalone page
   exactly; this block only styles the overlay/box/close chrome around it. */
body.advisor-modal-lock { overflow: hidden; }
.advisor-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(242,239,232,0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 2300;
  overflow-y: auto;
  padding: 64px 20px;
}
.advisor-modal-overlay.open { display: flex; align-items: flex-start; justify-content: center; }
.advisor-modal-box { position: relative; width: min(640px, 94vw); margin: auto; }
.advisor-modal-close {
  position: fixed;
  top: 22px;
  right: 22px;
  color: var(--navy);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  background: var(--white);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 2310;
  transition: transform var(--dur-sm) var(--ease), background var(--dur-sm) var(--ease);
}
.advisor-modal-close:hover { transform: scale(1.08); background: var(--paper-alt); }
.advisor-modal-head { text-align: center; margin-bottom: 20px; }
.advisor-modal-title {
  font-size: clamp(1.5rem, 3.4vw, 1.9rem);
  margin: 12px 0 8px;
  color: var(--navy);
  text-shadow: 0 1px 16px rgba(242,239,232,0.9), 0 1px 3px rgba(242,239,232,0.9);
}
.advisor-modal-intro {
  max-width: 440px;
  margin: 0 auto;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
  text-shadow: 0 1px 12px rgba(242,239,232,0.9), 0 1px 2px rgba(242,239,232,0.9);
}
@media (max-width: 600px) {
  .advisor-modal-overlay { padding: 50px 14px; }
  .advisor-modal-close { top: 14px; right: 14px; }
}

.split-content ul.checklist { margin: var(--gap-md) 0; display: flex; flex-direction: column; gap: 18px; padding: 0; list-style: none; }
.split-content ul.checklist > li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.98rem; line-height: 1.6; }
.split-content ul.checklist > li > svg { width: 20px; height: 20px; color: var(--rust); flex-shrink: 0; margin-top: 3px; }
.split-content .feature-body { display: flex; flex-direction: column; gap: 4px; }
.split-content .feature-title { font-weight: 700; color: var(--ink); }
.split-content .feature-desc { color: var(--ink-soft); }
.split-content ul.checklist-sub { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.split-content ul.checklist-sub li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; line-height: 1.55; }
.split-content ul.checklist-sub li svg { width: 16px; height: 16px; color: var(--rust); flex-shrink: 0; margin-top: 3px; }
.split-content h3 { margin-top: 8px; }
.split-content .feature-group + h3 { margin-top: var(--gap-md); }

/* ---- Testimonials ----
   Brought up to the same visual bar as the Customer Favorites price
   cards and the Editorial Spotlight panel: a resting shadow + hover
   lift instead of a flat bordered box, a subtle decorative quote mark,
   and a navy/gold avatar treatment that echoes the Editorial Spotlight
   panel's palette instead of a plain flat-blue circle.

   The band itself is intentionally tighter than the default --gap-xl
   section rhythm (128px) — testimonials are a quick trust signal, not
   a full content section, so it gets its own compact padding.

   The reviews scroll continuously in a single row (marquee), the
   set duplicated once so the loop is seamless; hovering pauses it so
   a review can actually be read. Animation duration scales with the
   number of cards so the scroll speed (px/sec) stays constant. ---- */
.testimonials-tight { padding-top: 56px; padding-bottom: 56px; }

.testimonial-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.testimonial-track {
  display: flex;
  gap: var(--gap-md);
  width: max-content;
  animation: testimonialScroll 60s linear infinite;
}
.testimonial-marquee:hover .testimonial-track { animation-play-state: paused; }
@keyframes testimonialScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .testimonial-track { animation: none; }
}
.testimonial-card {
  position: relative;
  width: 320px;
  flex-shrink: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--gap-md);
  box-shadow: var(--shadow-soft);
  transition: box-shadow var(--dur-sm) var(--ease), transform var(--dur-sm) var(--ease);
  overflow: hidden;
}
.testimonial-card:hover { box-shadow: var(--shadow-med); transform: translateY(-3px); }
.testimonial-card::before {
  content: "\201C";
  position: absolute;
  top: -6px;
  right: 16px;
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.18;
  pointer-events: none;
}
.stars { color: var(--gold); font-size: 0.95rem; letter-spacing: 2px; margin-bottom: 10px; }
.testimonial-card p { position: relative; font-size: 0.95rem; margin-bottom: var(--gap-sm); }
.testimonial-who { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(155deg, var(--navy-deep) 0%, var(--navy) 100%);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  box-shadow: 0 0 0 3px rgba(252, 195, 0, 0.16);
  flex-shrink: 0;
}
.testimonial-who strong { display: block; font-size: 0.9rem; color: var(--navy); }
.testimonial-who span { font-size: 0.78rem; color: var(--ink-soft); display: flex; align-items: center; gap: 4px; }

/* ---- CTA banner ---- */
.cta-banner {
  background: linear-gradient(120deg, var(--navy) 0%, var(--blue) 100%);
  color: var(--white);
  border-radius: var(--radius);
  padding: var(--gap-xl) var(--gap-lg);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner h2 { color: var(--white); max-width: 620px; margin: 0 auto var(--gap-sm); }
.cta-banner p { color: #d7e0f2; max-width: 520px; margin: 0 auto var(--gap-lg); }
.cta-actions { display: flex; gap: var(--gap-sm); justify-content: center; flex-wrap: wrap; }
.cta-stats {
  display: flex;
  justify-content: center;
  gap: var(--gap-xl);
  flex-wrap: wrap;
  margin: 0 auto var(--gap-lg);
  padding-bottom: var(--gap-lg);
  border-bottom: 1px solid rgba(255,255,255,0.16);
  max-width: 560px;
}
.cta-stats div { text-align: center; }
.cta-stats strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--gold);
}
.cta-stats span { font-size: 0.78rem; color: #d7e0f2; }

/* ---- Steps (process) ---- */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-md);
  counter-reset: step;
}
.step-card { position: relative; padding-top: 8px; }
.step-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: var(--gap-sm);
  display: block;
}
.step-card h3 { font-size: 1.05rem; margin-bottom: 6px; color: var(--navy); }
.step-card p { font-size: 0.9rem; }

/* ---- Values grid (about page) ---- */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-md);
}
.value-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--gap-md);
  text-align: center;
}
.value-card .icon-circle { margin: 0 auto var(--gap-sm); }
.value-card h3 { color: var(--navy); margin-bottom: 10px; }
.value-card p { line-height: 1.6; }

/* ---- Stat row ---- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-md);
  text-align: center;
}
.stat-row strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--gold);
}
.stat-row > div > span { font-size: 0.88rem; color: #d7e0f2; }

/* ---- Contact page ---- */
.contact-wrap {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--gap-xl);
}
.contact-info-card {
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius);
  padding: var(--gap-lg);
  height: fit-content;
}
.contact-info-card h3 { color: var(--white); margin-bottom: var(--gap-md); }
.contact-row { display: flex; gap: 14px; margin-bottom: var(--gap-md); align-items: flex-start; }
.contact-row .icon-circle { background: rgba(255,255,255,0.12); color: var(--gold); }
.contact-row strong { display: block; margin-bottom: 2px; }
.contact-row span, .contact-row a { font-size: 0.9rem; color: #cdd8ef; }
.contact-form {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--gap-lg);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-sm); }
.form-group { margin-bottom: var(--gap-md); }
.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  transition: border-color var(--dur-sm) var(--ease);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--blue);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-success {
  display: none;
  background: #e7f4ea;
  color: #235c33;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  margin-top: var(--gap-sm);
}

/* ---- FAQ accordion ---- */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 4px;
  text-align: left;
  font-weight: 700;
  font-size: 1.0rem;
  color: var(--navy);
}
.faq-question .plus {
  width: 22px; height: 22px;
  flex-shrink: 0;
  position: relative;
}
.faq-question .plus::before, .faq-question .plus::after {
  content: "";
  position: absolute;
  background: var(--blue);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  transition: transform var(--dur-sm) var(--ease);
}
.faq-question .plus::before { width: 14px; height: 2px; }
.faq-question .plus::after { width: 2px; height: 14px; }
.faq-item.open .plus::after { transform: translate(-50%,-50%) rotate(90deg) scale(0); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-md) var(--ease);
}
.faq-answer p { padding: 0 4px 22px; font-size: 0.95rem; max-width: 680px; }

/* ---- Footer ----
   Kept intentionally slim — a typical site footer band, not another
   full section: much less top/bottom padding than the old --gap-xl
   (112px) version, tighter column gap, and tighter vertical rhythm
   between links so the whole thing reads as a compact closing strip. */
.site-footer {
  background: linear-gradient(155deg, var(--navy-deep) 0%, var(--navy) 100%);
  color: #dbe4f5;
  padding: 48px 0 18px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
  gap: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.footer-brand .logo { color: var(--white); margin-bottom: 10px; }
.footer-brand .logo .logo-mark { color: var(--gold); }
.footer-brand .logo .logo-tagline { color: #c3d0ea; }
.footer-brand .logo .logo-title-2 { color: var(--white); }
/* The logo artwork is dark (green trees, black blinds) and disappears
   against the navy footer, so it gets a small cream backing chip —
   same cream used for the trust band — instead of floating unreadably
   on navy. */
.site-footer .logo-mark-img {
  background: var(--cream);
  border-radius: 8px;
  padding: 3px 4px;
  box-sizing: border-box;
}
.footer-brand p { font-size: 0.86rem; color: #c3d0ea; max-width: 260px; line-height: 1.5; }
.footer-col h4 {
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.footer-col a, .footer-col span {
  display: block;
  font-size: 0.87rem;
  color: #c3d0ea;
  margin-bottom: 8px;
  transition: color var(--dur-sm) var(--ease);
}
.footer-col a:hover { color: var(--white); }
.footer-social { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.footer-social a {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.5);
  display: flex; align-items: center; justify-content: center;
}
.footer-social svg { width: 13px; height: 13px; }
.newsletter-form { display: flex; margin-top: 12px; gap: 8px; }
.newsletter-form input {
  flex: 1;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.08);
  color: var(--white);
  font-size: 0.83rem;
}
.newsletter-form input::placeholder { color: #c3d0ea; }
.newsletter-form button {
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  background: var(--rust);
  color: var(--white);
  font-size: 0.83rem;
  font-weight: 700;
  flex-shrink: 0;
}
.newsletter-form button:hover { background: var(--rust-dark); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  font-size: 0.8rem;
  color: #b6c4e2;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-bottom .legal-links { display: flex; gap: 18px; }

@media (max-width: 640px) {
  .site-footer { padding: 36px 0 16px; }
  .footer-top { gap: 26px; padding-bottom: 22px; }
}

/* ---- Page hero (inner pages) ---- */
.page-hero {
  padding-top: var(--gap-lg);
  padding-bottom: var(--gap-md);
  text-align: center;
}
.page-hero .eyebrow { justify-content: center; }
.page-hero p { max-width: 600px; margin: var(--gap-sm) auto 0; font-size: 1.05rem; }

/* ---- Simple text-only resource/info pages (GreenGuard, Warranty, How to
   Measure, etc.): the shared .page-hero + .section padding stack was
   leaving a huge empty gap before the first heading. Tighten just that
   transition without touching .page-hero or .section anywhere else. ---- */
.resource-doc-hero { padding-bottom: var(--gap-sm); }
.resource-doc-body { padding-top: var(--gap-sm); }
.resource-doc-body h2 { font-size: 1.4rem; margin-bottom: 12px; }
.resource-doc-body h2:not(:first-child) { margin-top: var(--gap-md); }
.resource-doc-body p { line-height: 1.7; }

/* ---- Checkout progress (Cart -> Checkout -> Confirmation) ---- */
.checkout-progress { display: flex; align-items: flex-start; justify-content: center; max-width: 560px; margin: 4px auto 0; }
.checkout-progress-step { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; width: 150px; }
.checkout-progress-num {
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.95rem; background: var(--paper-alt); color: var(--ink-soft);
  border: 2px solid var(--line); margin-bottom: 8px; flex-shrink: 0;
}
.checkout-progress-num svg { width: 15px; height: 15px; }
.checkout-progress-step.done .checkout-progress-num,
.checkout-progress-step.active .checkout-progress-num {
  background: var(--navy); border-color: var(--navy); color: var(--white);
}
.checkout-progress-label {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-soft); text-align: center;
}
.checkout-progress-step.done .checkout-progress-label,
.checkout-progress-step.active .checkout-progress-label { color: var(--navy); }
.checkout-progress-line { flex: 1 1 auto; height: 2px; background: var(--line); margin-top: 17px; }
.checkout-progress-line.done { background: var(--navy); }
@media (max-width: 560px) {
  .checkout-progress-step { width: 90px; }
  .checkout-progress-label { font-size: 0.6rem; }
}

/* ---- Order status lookup page ---- */
.order-lookup-wrap { max-width: 640px; margin: 0 auto; }
.order-lookup-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--gap-lg);
  margin-bottom: var(--gap-lg);
}
.order-lookup-card h3 { margin-bottom: 10px; }
.order-status-result {
  display: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--gap-lg);
}
.order-status-result.visible { display: block; }
.order-status-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-sm);
  flex-wrap: wrap;
  margin-bottom: var(--gap-lg);
  padding-bottom: var(--gap-sm);
  border-bottom: 1px solid var(--line);
}
.order-status-label { display: block; font-size: 1.05rem; font-weight: 800; color: var(--navy); }
.order-status-label strong { color: var(--rust); }
.order-status-placed { display: block; font-size: 0.85rem; color: var(--ink-soft); margin-top: 2px; }
.order-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--rust);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}
.order-status-note {
  text-align: center;
  max-width: 440px;
  margin: var(--gap-lg) auto 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.order-status-help {
  text-align: center;
  margin-top: var(--gap-md);
  padding-top: var(--gap-md);
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* ---- Schedule a consultation (Calendly embed) ---- */
.schedule-wrap { max-width: 900px; margin: 0 auto; }
.schedule-perks {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--gap-lg);
  margin-bottom: var(--gap-lg);
  padding-bottom: var(--gap-lg);
  border-bottom: 1px solid var(--line);
}
.schedule-perk {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy);
}
.schedule-perk svg { width: 20px; height: 20px; color: var(--rust); flex-shrink: 0; }
.calendar-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--gap-lg);
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.calendar-card:hover, .calendar-card:focus-visible {
  box-shadow: var(--shadow-med);
  transform: translateY(-2px);
  border-color: var(--rust);
  outline: none;
}
.calendar-card-head {
  background: var(--navy);
  color: var(--white);
  border-radius: calc(var(--radius) - 2px);
  padding: 14px 20px;
  text-align: center;
  margin-bottom: var(--gap-md);
}
.calendar-card-month {
  font-family: 'Fraunces', serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.calendar-card-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: var(--gap-lg);
}
.calendar-dow {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 6px;
}
.calendar-day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}
.calendar-day.is-blank { visibility: hidden; }
.calendar-day.has-slot::after {
  content: '';
  position: absolute;
  bottom: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--rust);
}
.calendar-day.is-today {
  background: var(--rust);
  color: var(--white);
}
.calendar-day.is-today::after { background: var(--white); }
.calendar-card-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  padding-top: var(--gap-md);
  border-top: 1px solid var(--line);
}
.calendar-card-cta-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.calendar-card-cta-text svg { width: 18px; height: 18px; color: var(--rust); flex-shrink: 0; }
.calendar-card-cta .btn { pointer-events: none; }
@media (max-width: 480px) {
  .calendar-day { font-size: 0.78rem; }
  .calendar-card-cta { justify-content: center; text-align: center; }
}
@media (max-width: 640px) {
  .schedule-perks { flex-direction: column; align-items: flex-start; gap: var(--gap-sm); }
}

.breadcrumb {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: var(--gap-sm);
  display: flex;
  justify-content: center;
  gap: 6px;
}
.breadcrumb a { color: var(--blue); font-weight: 700; }

/* ---- Utility ---- */
.text-center { text-align: center; }
.mt-lg { margin-top: var(--gap-lg); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md); }

/* ==========================================================================
   Order-status utility bar
   ========================================================================== */
.util-bar {
  background: var(--paper-alt);
  border-bottom: 1px solid var(--line);
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-soft);
  padding: 8px 16px;
}
.util-bar a { color: var(--blue); font-weight: 700; text-decoration: underline; }

/* ==========================================================================
   Product Detail Page
   ========================================================================== */
.pdp-wrap {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 64px;
  align-items: start;
}
.pdp-gallery { position: sticky; top: var(--pdp-gallery-top, 168px); min-width: 0; } /* --pdp-gallery-top is measured live off the real header+promo bar height in roller.html (see syncPdpGalleryStickyOffset), plus a buffer, so the preview image always clears the sticky header with breathing room instead of being tight/cut off; 168px is just a pre-JS fallback */
.pdp-main-image {
  /* Site-wide standard box shape (July 30 2026): every preview box on every
     product page - the default hero photo state included - uses this same
     43:24 aspect ratio, so no page's box ever renders smaller/more
     "compressed" than another's. This was previously 4/3.4 (a squarer
     shape used e.g. on Wood Blinds' default hero); unified to 43:24 to
     match the wide shape already used by every fabric-preview swap class
     below, so switching between the default hero and a swapped-in fabric
     preview never changes the box's size or shape, only its contents. */
  aspect-ratio: 43/24;
  min-width: 0;
  width: 100%;
  background: var(--paper-alt);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
}
.pdp-main-image svg { width: 56%; height: auto; }
.pdp-main-image img { width: 100%; height: 100%; object-fit: cover; }
/* Light Filtering fabric swatches swap in a full, un-cropped photorealistic
   render (see lightFilteringLiveImages below). Those renders are a fixed
   2752x1536 px (43:24) photo, wider than this box's default aspect ratio.
   Rather than letterboxing them inside the default box shape, reshape the
   box itself to the render's exact aspect ratio so the image fills it
   completely edge-to-edge with no grey bars top or bottom. */
.pdp-main-image.pdp-main-image--full { aspect-ratio: 43/24; }
.pdp-main-image.pdp-main-image--full img { object-fit: cover; }
/* 1% and 5% Opacity screen fabric renders (see opacity1LiveImages /
   opacity5LiveImages below) were originally a different native shape
   (2304x1856, 36:29) from the Light Filtering renders above (43:24).
   Site-wide rule (July 30 2026): standardized to the same 43:24 box as
   every other fabric preview box on the site, so the preview box is a
   consistent size across every opacity option and every product page.
   The 2304x1856 source files are unchanged and still full resolution -
   this now crops a bit off the top/bottom of those renders (object-fit:
   cover) rather than showing them letterboxed edge-to-edge, but the box
   size matches everywhere. */
.pdp-main-image.pdp-main-image--full-54 { aspect-ratio: 43/24; }
.pdp-main-image.pdp-main-image--full-54 img { object-fit: cover; }
/* Site-wide rule (July 30 2026): every fabric-swatch preview box across
   every product page (Dual, Sunset, Cellular, Dream, and Roller's own
   --full box above) is standardized to this SAME 43:24 (2752x1536) box
   shape, so the preview box is a consistent size everywhere on the site.
   Dual Shades / Sunset Shades / Cellular 3/4" Light Filtering renders were
   originally supplied at 2528x1696 (~3:2, taller/narrower than 43:24) -
   those source files are unchanged and still full native resolution, but
   forcing them into the wider 43:24 box now crops a bit off the top/bottom
   of each photo (object-fit: cover) rather than showing letterboxed bars,
   so the box matches Roller's size exactly. No upscaling occurs - the crop
   still renders at full source resolution, just a tighter frame. */
.pdp-main-image.pdp-main-image--zebra-preview { aspect-ratio: 43/24; }
.pdp-main-image.pdp-main-image--zebra-preview img { object-fit: cover; }
.pdp-main-image.pdp-main-image--sunset-preview { aspect-ratio: 43/24; }
.pdp-main-image.pdp-main-image--sunset-preview img { object-fit: cover; }
.pdp-main-image.pdp-main-image--cellular-preview { aspect-ratio: 43/24; }
.pdp-main-image.pdp-main-image--cellular-preview img { object-fit: cover; }
/* Cellular Shades 3/8" Light Filtering renders were supplied at a
   different native resolution (2752x1536, ~16:9) than the 3/4" Light
   Filtering batch above (2528x1696, ~3:2), so this group gets its own
   aspect-ratio box rather than reusing --cellular-preview. */
.pdp-main-image.pdp-main-image--cellular-preview-38 { aspect-ratio: 2752/1536; }
.pdp-main-image.pdp-main-image--cellular-preview-38 img { object-fit: cover; }
/* Cellular Shades 3/4" Room Darkening renders were also supplied at
   2752x1536 (same as the 3/8" Light Filtering batch), but kept as its
   own class rather than reusing --cellular-preview-38 so each opacity
   group's box sizing stays independently tunable. */
.pdp-main-image.pdp-main-image--cellular-preview-34rd { aspect-ratio: 2752/1536; }
.pdp-main-image.pdp-main-image--cellular-preview-34rd img { object-fit: cover; }
/* Cellular Shades 3/8" Room Darkening renders, also 2752x1536 - own class
   for independent tunability, same reasoning as the other cellular groups. */
.pdp-main-image.pdp-main-image--cellular-preview-38rd { aspect-ratio: 2752/1536; }
.pdp-main-image.pdp-main-image--cellular-preview-38rd img { object-fit: cover; }
/* Cellular Shades 3/8" Cell Top/Down Bottom/Up - Blackout (BetterFit
   channel system) renders, also 2752x1536 - own class for independent
   tunability, same reasoning as the other cellular groups. */
.pdp-main-image.pdp-main-image--cellular-preview-38bo { aspect-ratio: 2752/1536; }
.pdp-main-image.pdp-main-image--cellular-preview-38bo img { object-fit: cover; }
/* Dream Shades (dream.html) fabric-swatch renders, also 2752x1536 - first
   click-to-preview-box wiring added to this page. */
.pdp-main-image.pdp-main-image--dream-preview { aspect-ratio: 2752/1536; }
.pdp-main-image.pdp-main-image--dream-preview img { object-fit: cover; }
/* Panel Tracks (paneltrack.html) Light Filtering fabric-swatch renders,
   also 2752x1536 (43:24) - matches Roller's box size, first click-to-
   preview-box wiring added to this page. */
.pdp-main-image.pdp-main-image--paneltrack-preview { aspect-ratio: 43/24; }
.pdp-main-image.pdp-main-image--paneltrack-preview img { object-fit: cover; }
/* PVC Verticals (vertical.html) Classic + Designer fabric-swatch renders,
   also 2752x1536 (43:24) - matches the site-wide box standard, first
   click-to-preview-box wiring added to this page. */
.pdp-main-image.pdp-main-image--vertical-preview { aspect-ratio: 43/24; }
.pdp-main-image.pdp-main-image--vertical-preview img { object-fit: cover; }
/* 2" Wood Blinds (wood.html) Classic fabric-swatch renders, also 2752x1536
   (43:24) - matches the site-wide box standard, first click-to-preview-box
   wiring added to this page. */
.pdp-main-image.pdp-main-image--wood-preview { aspect-ratio: 43/24; }
.pdp-main-image.pdp-main-image--wood-preview img { object-fit: cover; }
/* 2" Faux Wood Blinds (fauxwood.html) Classic fabric-swatch renders, also
   2752x1536 (43:24) - matches the site-wide box standard, first
   click-to-preview-box wiring added to this page. */
.pdp-main-image.pdp-main-image--fauxwood-preview { aspect-ratio: 43/24; }
.pdp-main-image.pdp-main-image--fauxwood-preview img { object-fit: cover; }
/* Roman Shades (roman.html) Hobbled Fold Light Filtering fabric-swatch
   renders, also 2752x1536 (43:24) - matches the site-wide box standard,
   first click-to-preview-box wiring added to this page. Only applies when
   Hobbled Fold is the active liner pick - see the isRomanPreviewGroup gate
   in the fabricCards click handler. */
.pdp-main-image.pdp-main-image--roman-preview { aspect-ratio: 43/24; }
.pdp-main-image.pdp-main-image--roman-preview img { object-fit: cover; }
/* These overlay controls sit directly on top of the product photo. A
   frosted-glass look (translucent white + backdrop-filter, a soft inner
   highlight border, gold on hover instead of a flat solid-navy invert)
   reads as a lot more boutique/considered than a flat opaque white pill —
   and unlike the header/sticky-bar blur removed elsewhere on this site,
   this is safe performance-wise: it's a small, local blur sitting over a
   static photo that only changes when the buyer picks a new fabric, not
   a full-width bar over continuously-scrolling or autoplaying content, so
   there's no per-frame recompute cost to worry about. */
.pdp-zoom-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.38);
  backdrop-filter: blur(9px) saturate(160%);
  -webkit-backdrop-filter: blur(9px) saturate(160%);
  color: var(--navy);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 6px 12px 6px 9px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 4px 18px rgba(3, 31, 115, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.55);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.pdp-zoom-badge:hover {
  background: rgba(255, 255, 255, 0.55);
  border-color: var(--gold);
}
.pdp-zoom-badge svg { width: 12px; height: 12px; }
.pdp-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.38);
  backdrop-filter: blur(9px) saturate(160%);
  -webkit-backdrop-filter: blur(9px) saturate(160%);
  color: var(--navy);
  border: 1px solid rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  padding: 0;
  box-shadow: 0 4px 18px rgba(3, 31, 115, 0.16);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.pdp-gallery-arrow svg { width: 18px; height: 18px; }
.pdp-gallery-arrow:hover {
  background: rgba(255, 255, 255, 0.6);
  border-color: var(--gold);
  transform: translateY(-50%) scale(1.07);
  box-shadow: 0 6px 20px rgba(3, 31, 115, 0.22);
}
.pdp-gallery-arrow:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.pdp-gallery-arrow.prev { left: 12px; }
.pdp-gallery-arrow.prev svg { transform: rotate(180deg); }
.pdp-gallery-arrow.next { right: 12px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pdp-zoom-badge, .pdp-gallery-arrow { background: rgba(255, 255, 255, 0.92); }
}
.pdp-thumbs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.pdp-thumb {
  aspect-ratio: 1/1;
  min-width: 0;
  background: var(--paper-alt);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--dur-sm) var(--ease);
}
.pdp-thumb:hover, .pdp-thumb.active { border-color: var(--blue); }
.pdp-thumb svg { width: 55%; height: auto; color: var(--navy); opacity: 0.7; }
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--radius-sm) - 2px); }
.pdp-thumb.more-thumb { overflow: hidden; position: relative; }
.pdp-thumb.more-thumb img { position: absolute; inset: 0; opacity: 0.35; }
.pdp-thumb.more-thumb span { position: relative; z-index: 1; }
.pdp-thumb.more-thumb {
  background: rgba(3,31,115,0.85);
  color: var(--white);
  font-weight: 800;
  font-size: 0.95rem;
}
.pdp-thumb.pdp-thumb-video { overflow: hidden; position: relative; }
.pdp-thumb.pdp-thumb-video img { opacity: 0.55; }
.pdp-thumb.pdp-thumb-video:hover img { opacity: 0.7; }
.pdp-thumb.pdp-thumb-video .pdp-thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  pointer-events: none;
}
.pdp-thumb.pdp-thumb-video .pdp-thumb-play svg { width: 42%; height: auto; opacity: 1; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.45)); }

/* Opt-in modifier: for galleries with more than 6 thumbs (e.g. Cellular
   Shades' 6 photos + video card), scroll horizontally in a single row
   instead of wrapping to a second row. Thumbs keep the same visual size
   as the standard 6-column grid; only the overflow behaviour changes.
   Wrapped in .pdp-thumbs-wrap so we can add edge fades + small nav
   arrows instead of a bare scrollbar. */
.pdp-thumbs-wrap { position: relative; margin-top: 10px; }
.pdp-thumbs-wrap .pdp-thumbs.pdp-thumbs--scroll { margin-top: 0; }

.pdp-thumbs.pdp-thumbs--scroll {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pdp-thumbs.pdp-thumbs--scroll::-webkit-scrollbar { display: none; height: 0; }
.pdp-thumbs.pdp-thumbs--scroll .pdp-thumb {
  flex: 0 0 calc((100% - 40px) / 6);
}

/* Soft edge fades hint that the strip scrolls, without a visible scrollbar. */
.pdp-thumbs-wrap::before, .pdp-thumbs-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.pdp-thumbs-wrap::before { left: 0; background: linear-gradient(to right, var(--white), rgba(255, 255, 255, 0)); }
.pdp-thumbs-wrap::after { right: 0; background: linear-gradient(to left, var(--white), rgba(255, 255, 255, 0)); }
.pdp-thumbs-wrap.can-scroll-left::before { opacity: 1; }
.pdp-thumbs-wrap.can-scroll-right::after { opacity: 1; }

/* Small round nav arrows, styled like the main image's gallery arrows but
   scaled down; only appear on the side(s) there's more to scroll. */
.pdp-thumb-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  padding: 0;
  box-shadow: 0 2px 10px rgba(3, 31, 115, 0.16);
  transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  opacity: 0;
  pointer-events: none;
}
.pdp-thumb-scroll-btn svg { width: 12px; height: 12px; }
.pdp-thumb-scroll-btn.prev { left: -8px; }
.pdp-thumb-scroll-btn.prev svg { transform: rotate(180deg); }
.pdp-thumb-scroll-btn.next { right: -8px; }
.pdp-thumb-scroll-btn:hover { border-color: var(--gold); transform: translateY(-50%) scale(1.1); box-shadow: 0 4px 14px rgba(3, 31, 115, 0.22); }
.pdp-thumb-scroll-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.pdp-thumbs-wrap.can-scroll-left .pdp-thumb-scroll-btn.prev,
.pdp-thumbs-wrap.can-scroll-right .pdp-thumb-scroll-btn.next {
  opacity: 1;
  pointer-events: auto;
}

.pdp-info h1 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: 8px; }
.pdp-brand { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 10px; }
.pdp-brand a { color: var(--blue); font-weight: 700; }
.pdp-rating-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.9rem;
  margin-bottom: 14px;
  color: var(--ink-soft);
}
.pdp-rating-row .stars { color: var(--gold); font-size: 1rem; letter-spacing: 1px; margin: 0; }
.pdp-rating-row a { color: var(--blue); font-weight: 600; }
.pdp-rating-row .sep { color: var(--line); }
.pdp-desc { font-size: 0.98rem; margin-bottom: 6px; }
.pdp-readmore { color: var(--blue); font-weight: 700; font-size: 0.9rem; display: inline-block; margin-bottom: 18px; }

.pdp-trust-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.pdp-trust-list div { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; }
.pdp-trust-list svg { width: 19px; height: 19px; color: var(--gold); flex-shrink: 0; }
.pdp-trust-list a { color: var(--blue); font-weight: 600; }
.pdp-trust-list strong { color: var(--ink); }

.pdp-promo {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 20px;
}
.pdp-promo svg { width: 18px; height: 18px; color: var(--blue); flex-shrink: 0; }
.pdp-promo code { background: rgba(3,31,115,0.08); padding: 2px 6px; border-radius: 3px; }

.pdp-quote-box {
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--gap-md);
}
.pdp-dim-row {
  display: grid;
  grid-template-columns: 90px 1fr 1fr;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.pdp-dim-row label { font-weight: 700; font-size: 0.9rem; color: var(--navy); }
.pdp-dim-row select {
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: 0.92rem;
}
.pdp-price-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px dashed var(--line);
}
.pdp-price-left .was { text-decoration: line-through; color: var(--ink-soft); font-size: 0.95rem; margin-right: 8px; }
.pdp-price-left .save { color: var(--red); font-weight: 800; font-size: 0.85rem; display: block; margin-bottom: 2px; }
.pdp-price-left .now { font-size: 1.8rem; font-weight: 800; color: var(--ink); }
.pdp-cta-btn { min-width: 200px; }
.pdp-finance { font-size: 0.82rem; color: var(--ink-soft); margin-top: 12px; display: flex; align-items: center; gap: 8px; }
.pdp-finance a { color: var(--blue); font-weight: 600; }

.pdp-specs {
  margin-top: var(--gap-xl);
  padding-top: var(--gap-lg);
  border-top: 1px solid var(--line);
}
.pdp-specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 40px;
  margin-top: var(--gap-md);
}
.pdp-specs-grid div {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
.pdp-specs-grid div span:first-child { color: var(--ink-soft); }
.pdp-specs-grid div span:last-child { font-weight: 700; color: var(--navy); }

/* ---- Boxed promo card ---- */
.pdp-promo-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fffbf0;
  border: 1.5px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 20px;
  line-height: 1.55;
}
.pdp-promo-box svg { width: 18px; height: 18px; color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.pdp-promo-box span { flex: 1 1 auto; min-width: 0; }
.pdp-promo-box code { background: rgba(3,31,115,0.08); padding: 2px 7px; border-radius: 3px; white-space: nowrap; }

/* ---- Live-calculated data cue (estimated ship date, etc.) ---- */
.live-calc-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3c8c5a;
  margin-left: 6px;
  vertical-align: middle;
}
@media (prefers-reduced-motion: no-preference) {
  .live-calc-dot { animation: liveCalcPulse 2s ease-in-out infinite; }
}
@keyframes liveCalcPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(60,140,90,0.5); }
  50% { box-shadow: 0 0 0 4px rgba(60,140,90,0); }
}

/* ---- Resume your configuration (sitewide slide-down bar) ---- */
.resume-config-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 480;
  background: var(--navy);
  box-shadow: 0 -8px 24px rgba(3, 31, 115, 0.18);
  transform: translateY(100%);
  transition: transform var(--dur-md) var(--ease);
}
.resume-config-bar.visible { transform: translateY(0); }
.resume-config-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 24px;
}
.resume-config-img { width: 42px; height: 42px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.resume-config-text { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--white); line-height: 1.4; }
.resume-config-text svg { width: 15px; height: 15px; color: var(--gold); flex-shrink: 0; }
.resume-config-text strong { color: var(--white); }
.resume-config-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0 2px;
}
.resume-config-close:hover { color: var(--white); }
@media (max-width: 640px) {
  .resume-config-img { display: none; }
  .resume-config-text { font-size: 0.8rem; }
  .resume-config-inner { padding: 10px 16px; gap: 10px; }
}
body.has-resume-config-bar .samples-widget,
body.has-resume-config-bar .samples-widget.samples-widget-raised { bottom: 100px; }
body.has-resume-config-bar .help-bubble-btn { bottom: 90px; }

/* ---- Measurement confidence check (PDP size step) ---- */
.pdp-measure-confidence:empty { display: none; }
.pdp-confidence-warn,
.pdp-confidence-ok,
.pdp-confidence-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  font-size: 0.84rem;
  line-height: 1.5;
  margin-top: 14px;
}
.pdp-confidence-warn { background: var(--cream); border: 1px solid rgba(192,47,29,0.25); color: var(--ink); }
.pdp-confidence-warn svg { width: 17px; height: 17px; color: var(--rust); flex-shrink: 0; margin-top: 1px; }
.pdp-confidence-ok { background: rgba(60,140,90,0.08); border: 1px solid rgba(60,140,90,0.3); color: var(--ink); align-items: center; }
.pdp-confidence-ok svg { width: 16px; height: 16px; color: #3c8c5a; flex-shrink: 0; }
.pdp-confidence-ok span { flex: 1; }
.pdp-confidence-undo { background: none; border: none; color: var(--ink-soft); font-size: 0.78rem; font-weight: 700; text-decoration: underline; cursor: pointer; flex-shrink: 0; }
.pdp-confidence-check { flex-direction: column; align-items: stretch; background: var(--paper-alt); border: 1px solid var(--line); }
.pdp-confidence-check-head { display: flex; align-items: center; gap: 7px; font-weight: 700; color: var(--navy); font-size: 0.85rem; }
.pdp-confidence-check-head svg { width: 14px; height: 14px; color: var(--gold); flex-shrink: 0; }
.pdp-confidence-check p { margin: 2px 0 0; color: var(--ink); }
.pdp-confidence-check .btn { align-self: flex-start; margin-top: 2px; }

/* ---- Room-type quick-select + smart-default reasoning banner (PDP) ---- */
.pdp-room-presets {
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 20px;
}
.pdp-room-presets-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
}
.pdp-room-presets-label svg { width: 14px; height: 14px; color: var(--gold); flex-shrink: 0; }
.pdp-room-presets-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pdp-room-chip {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: border-color var(--dur-sm) var(--ease), background var(--dur-sm) var(--ease);
}
.pdp-room-chip:hover { border-color: var(--blue); }
.pdp-room-chip.active { background: linear-gradient(100deg, var(--navy) 0%, var(--blue) 100%); border-color: var(--navy); color: var(--white); }

.pdp-smart-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: linear-gradient(100deg, rgba(3,31,115,0.06) 0%, rgba(48,96,175,0.08) 100%);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  margin-bottom: 20px;
  font-size: 0.86rem;
  color: var(--ink);
  line-height: 1.5;
}
.pdp-smart-banner svg { width: 16px; height: 16px; color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.pdp-smart-banner-text { flex: 1; }
.pdp-smart-banner-text a { color: var(--blue); font-weight: 700; }
.pdp-smart-banner-close {
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0 2px;
}
.pdp-smart-banner-close:hover { color: var(--rust); }

/* ---- Tabbed PDP reference block (Measure / Install / Warranty / Shipping / Reviews) ---- */
.pdp-ref-tabs {
  margin-top: var(--gap-xl);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.pdp-ref-tabs-nav {
  display: flex;
  overflow-x: auto;
  background: var(--paper-alt);
  border-bottom: 1px solid var(--line);
}
.pdp-ref-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 auto;
  justify-content: center;
  white-space: nowrap;
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  cursor: pointer;
  padding: 16px 14px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink-soft);
  transition: color var(--dur-sm) var(--ease), border-color var(--dur-sm) var(--ease);
}
.pdp-ref-tab svg { width: 16px; height: 16px; flex-shrink: 0; }
.pdp-ref-tab:hover { color: var(--navy); }
.pdp-ref-tab.active { color: var(--navy); border-bottom-color: var(--rust); background: var(--white); }
.pdp-ref-tab-panels { padding: 26px 24px; }
.pdp-ref-panel { display: none; font-size: 0.95rem; line-height: 1.65; color: var(--ink); }
.pdp-ref-panel.active { display: block; }
.pdp-ref-panel h3 { font-family: var(--font-display); font-size: 1.15rem; color: var(--navy); margin-bottom: 12px; }
.pdp-ref-panel h4 { font-size: 1rem; color: var(--navy); margin-bottom: 8px; }
.pdp-ref-panel p { margin-bottom: 14px; }
.pdp-ref-panel p:last-child { margin-bottom: 0; }
.pdp-ref-panel-link { color: var(--blue); font-weight: 700; }
.pdp-ref-ship-date { display: flex; align-items: center; gap: 8px; color: var(--navy); }
.pdp-ref-ship-date svg { width: 18px; height: 18px; color: var(--blue); flex-shrink: 0; }
.pdp-ref-panel .warranty-modal-list { margin: 0 0 14px; padding-left: 20px; }
.pdp-ref-panel .warranty-modal-list li { margin-bottom: 6px; }
@media (max-width: 640px) {
  .pdp-ref-tab { font-size: 0.78rem; padding: 13px 8px; }
  .pdp-ref-tab-panels { padding: 20px 16px; }
}

/* ---- PDP accordion sections ---- */
.pdp-accordion { margin-top: var(--gap-md); border-top: 1px solid var(--line); }
.pdp-accordion-item { border-bottom: 1px solid var(--line); scroll-margin-top: 136px; } /* header (100px) + promo bar (36px) */
.pdp-accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 22px 4px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--navy);
  text-align: left;
}
.pdp-accordion-header svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--navy);
  transition: transform var(--dur-md) var(--ease);
}
.pdp-accordion-item.open .pdp-accordion-header svg { transform: rotate(180deg); }
.pdp-accordion-body {
  display: none;
  padding: 0 4px 28px;
}
.pdp-accordion-item.open .pdp-accordion-body { display: block; }
.pdp-feature-list { display: flex; flex-direction: column; gap: 12px; }
.pdp-feature-list li {
  position: relative;
  padding-left: 24px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.pdp-feature-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rust);
}
.pdp-feature-list li strong { color: var(--navy); font-weight: 700; }

/* ---- Available colors ---- */
.avail-colors-wrap { display: grid; grid-template-columns: 280px 1fr; gap: var(--gap-lg); align-items: start; }
.avail-preview-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--gap-md);
  position: sticky;
  top: 136px; /* header (100px) + promo bar (36px), now permanently docked together */
}
.avail-preview-card h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin-bottom: 12px; }
.avail-preview-image {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--paper-alt);
  margin-bottom: 14px;
}
.avail-preview-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avail-preview-tint {
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  opacity: 0.85;
  pointer-events: none;
  transition: background-color 0.35s ease;
}
.avail-preview-selected { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.avail-preview-selected .chip { width: 32px; height: 32px; border-radius: 6px; flex-shrink: 0; border: 1px solid var(--line); }
.avail-preview-selected strong { display: block; font-size: 0.92rem; color: var(--navy); }
.avail-preview-selected span { font-size: 0.8rem; color: var(--ink-soft); }
.avail-preview-price { border-top: 1px dashed var(--line); padding-top: 12px; margin-bottom: 14px; }
.avail-preview-price .was { text-decoration: line-through; color: var(--ink-soft); font-size: 0.85rem; margin-right: 8px; }
.avail-preview-price .save { color: var(--red); font-weight: 800; font-size: 0.8rem; display: block; margin-bottom: 2px; }
.avail-preview-price .now { font-size: 1.3rem; font-weight: 800; color: var(--ink); }

/* ---- Colour groups inline in Step 1 (no side preview panel) ---- */
.pdp-colour-groups .avail-swatch-grid { grid-template-columns: repeat(5, 1fr); gap: 16px 14px; }
.pdp-colour-groups .avail-swatch-grid .avail-swatch-card-center { grid-column: 1 / -1; justify-self: center; width: calc(20% - 11.2px); }
@media (max-width: 1100px) {
  .pdp-colour-groups .avail-swatch-grid { grid-template-columns: repeat(4, 1fr); }
  .pdp-colour-groups .avail-swatch-grid .avail-swatch-card-center { width: calc(25% - 10.5px); }
}
@media (max-width: 900px) {
  .pdp-colour-groups .avail-swatch-grid { grid-template-columns: repeat(3, 1fr); }
  .pdp-colour-groups .avail-swatch-grid .avail-swatch-card-center { width: calc(33.333% - 9.33px); }
}
@media (max-width: 560px) {
  .pdp-colour-groups .avail-swatch-grid { grid-template-columns: repeat(2, 1fr); }
  .pdp-colour-groups .avail-swatch-grid .avail-swatch-card-center { width: calc(50% - 7px); }
}

/* ---- PROTOTYPE (used across most product config pages, see
   .pdp-accordion-proto): the fabric list runs inside its own scrollable
   panel — with 100+ swatches possible under one opacity, scrolling
   through them shouldn't feel like it hijacks the whole page — and cards
   run slightly smaller with a colour-family heading (Whites/Greys/
   Neutrals & Beiges/Browns & Taupes/Blacks & Charcoals) per section
   instead of one long flat grid.
   overscroll-behavior was set to "contain" here, which stops scroll
   chaining at the top/bottom edge of this inner panel -- so once a buyer
   scrolled this fabric list to its end and kept scrolling with their
   cursor still over it, NOTHING happened: the gesture didn't hand off to
   the page underneath. That's the "won't let me scroll up or down while
   in the fabrics section" bug. Removed so scrolling past this panel's own
   limit falls through to scroll the page normally, like every other
   scrollable area on the site. */
.pdp-accordion-proto .pdp-colour-groups {
  max-height: 640px;
  overflow-y: auto;
  background: var(--paper-alt);
  border-radius: var(--radius);
  padding: 0 10px 18px 18px;
  margin-right: -2px;
}
/* The full colour-family grid now uses the exact same fixed-size, flex-wrap
   card as the Customer Favourites tiles above it (see .favourite-tile),
   instead of a fluid CSS-grid that stretched cards to fill each column and
   gave them a plainer, thin-line border. Same width, same white-bordered
   swatch frame, same gold hover — so nothing changes visually as a customer
   scrolls from favourites into the full list. */
.pdp-accordion-proto .pdp-colour-groups .avail-swatch-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.pdp-accordion-proto .pdp-colour-groups .avail-swatch-card {
  width: 92px;
  flex: 0 0 auto;
}
.pdp-accordion-proto .pdp-colour-groups .fabric-subgroup-heading { width: 100%; }
.pdp-accordion-proto .pdp-colour-groups .avail-swatch-visual {
  border: 2px solid var(--white);
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.14);
}
.pdp-accordion-proto .pdp-colour-groups .avail-swatch-card:hover .avail-swatch-visual { border-color: var(--gold); }
/* Scale the check badge and zoom control down to the same proportions used
   on the Customer Favourites tiles, since the swatch square is now the
   same 92px size in both places. */
.pdp-accordion-proto .pdp-colour-groups .avail-swatch-check { top: 4px; right: 4px; width: 16px; height: 16px; }
.pdp-accordion-proto .pdp-colour-groups .avail-swatch-check svg { width: 9px; height: 9px; }
.pdp-accordion-proto .pdp-colour-groups .avail-swatch-zoom { bottom: 4px; right: 4px; width: 19px; height: 19px; }
.pdp-accordion-proto .pdp-colour-groups .avail-swatch-zoom svg { width: 10px; height: 10px; }
/* "Customer Favourites" — a curated shortlist shown at the top of the
   Fabric step (before the full colour-family breakdown), filtered to the
   active opacity same as everything else in this panel. */
.pdp-accordion-proto .fabric-favourites {
  margin: 18px 0 22px;
  background: rgba(252,195,0,0.10);
  border: 1px solid rgba(252,195,0,0.35);
  border-radius: var(--radius);
  padding: 14px 16px 16px;
}
.pdp-accordion-proto .fabric-favourites-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 12px;
}
.pdp-accordion-proto .fabric-favourites-title svg { width: 14px; height: 14px; color: var(--gold); flex-shrink: 0; }
/* Flagged when this page was reached via the Window Advisor's deep link
   (?rec=1&...) — ties the fabric shortlist back to the answers the buyer
   just gave, right where they're actually about to pick a swatch. */
.fabric-favourites-rec-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(100deg, var(--navy) 0%, var(--blue) 100%);
  color: var(--white);
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin-left: 10px;
  vertical-align: middle;
}
.fabric-favourites-rec-badge svg { width: 10px; height: 10px; color: var(--gold); }
.pdp-accordion-proto .fabric-favourites-row { display: flex; flex-wrap: wrap; gap: 14px; }
.pdp-accordion-proto .favourite-tile {
  /* Buttons get a browser-default "centre my content" layout behaviour
     that plain divs don't — with flex-wrap: stretch on the row, a tile
     whose name fits on one line vs. one that wraps to two lines ended up
     vertically centered by different amounts, throwing the swatch images
     out of alignment with each other. Forcing our own column flex here
     (top-aligned, not centered) overrides that native behaviour so every
     tile's image lines up regardless of how its name wraps. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  flex: 0 0 auto;
  width: 92px;
  -webkit-appearance: none;
  appearance: none;
  border: 2px solid transparent;
  border-radius: 8px;
  background: none;
  padding: 4px;
  margin: 0;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  box-sizing: border-box;
  vertical-align: top;
  transition: border-color var(--dur-sm, 0.2s) var(--ease, ease), box-shadow var(--dur-sm, 0.2s) var(--ease, ease), transform var(--dur-sm, 0.2s) var(--ease, ease);
}
.pdp-accordion-proto .favourite-tile-visual {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid var(--white);
  box-shadow: 0 1px 4px rgba(0,0,0,0.14);
  margin-bottom: 6px;
  transition: border-color var(--dur-sm, 0.2s) var(--ease, ease);
}
.pdp-accordion-proto .favourite-tile-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-accordion-proto .favourite-tile:hover .favourite-tile-visual { border-color: var(--gold); }
/* Match the same "soft glow + slight scale" selected treatment used on the
   full colour-family swatch cards (.avail-swatch-card.active .avail-swatch-frame)
   instead of a plain solid ring, so a selected fabric looks selected the
   same way whether it's shown here or down in the family grid. The frame
   now wraps the whole tile (image + name) instead of just the image, same
   as the full swatch cards wrap their image + name together. */
.pdp-accordion-proto .favourite-tile.active {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(3, 31, 115, 0.14);
  transform: scale(1.02);
}
.pdp-accordion-proto .favourite-tile-check {
  display: none;
  position: absolute;
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--green, #1a9c56);
  color: var(--white);
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  z-index: 2;
}
.pdp-accordion-proto .favourite-tile-check svg { width: 9px; height: 9px; }
.pdp-accordion-proto .favourite-tile.active .favourite-tile-check { display: flex; }
/* Same zoom-to-enlarge affordance as the full colour-family swatch cards,
   just scaled down to fit the smaller favourite tile. */
.pdp-accordion-proto .favourite-tile-visual .avail-swatch-zoom { width: 19px; height: 19px; bottom: 4px; right: 4px; }
.pdp-accordion-proto .favourite-tile-visual .avail-swatch-zoom svg { width: 10px; height: 10px; }
.pdp-accordion-proto .favourite-tile:hover .avail-swatch-zoom { opacity: 1; transform: scale(1.05); }
.pdp-accordion-proto .favourite-tile-name { font-size: 0.7rem; font-weight: 600; color: var(--ink); line-height: 1.25; display: block; }
@media (max-width: 560px) {
  .pdp-accordion-proto .favourite-tile { width: 78px; }
}
.pdp-accordion-proto .pdp-colour-groups .avail-swatch-card h5 { font-size: 0.7rem; font-weight: 600; line-height: 1.25; min-height: 2.2em; margin-top: 6px; }
.pdp-accordion-proto .pdp-colour-groups .order-sample-btn { font-size: 0.7rem; padding: 5px 6px; margin-top: 6px; }
/* "Customer Favourite" is longer than the original "Favourite" label —
   it wraps onto a second line (icon pinned to the top) instead of
   overflowing past the smaller prototype swatch cards. */
.pdp-accordion-proto .pdp-colour-groups .avail-swatch-favourite {
  align-items: flex-start;
  max-width: calc(100% - 4px);
  font-size: 0.53rem;
  line-height: 1.25;
  padding: 4px 6px;
  letter-spacing: 0.01em;
}
.pdp-accordion-proto .pdp-colour-groups .avail-swatch-favourite svg { width: 7px; height: 7px; margin-top: 1px; }
.pdp-accordion-proto .avail-color-group h4 {
  position: sticky;
  top: 0;
  background: var(--paper-alt);
  padding: 18px 0 10px;
  margin: 0 0 14px;
  border-bottom: none;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.01em;
  z-index: 1;
}
@media (max-width: 560px) {
  .pdp-accordion-proto .pdp-colour-groups { max-height: 480px; padding: 14px 8px 14px 12px; }
  .pdp-accordion-proto .pdp-colour-groups .avail-swatch-card { width: 78px; }
}

.avail-color-group + .avail-color-group { margin-top: 26px; }
.avail-color-group h4 {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.avail-color-group h4 .add-price { font-weight: 500; color: var(--ink-soft); }
.avail-swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
/* Colour-pin category (injected by pdp-engine.js when the buyer arrived
   via a Shop by Colour link). NOTE: .avail-swatch-grid is a CSS Grid by
   default, but every live PDP scopes it under .pdp-accordion-proto
   .pdp-colour-groups, which overrides it to display:flex (see the
   "PROTOTYPE" block above) -- grid-column:1/-1 does nothing there, so
   this needs width:100% (same fix .fabric-subgroup-heading already
   uses) to actually span the row instead of stretching into a tall
   square tile the height of a swatch card. Styled as a quiet editorial
   label (matches the italic serif "Fabrics" section headings elsewhere
   on this step) rather than a solid colour block, to stay on brand. */
.colour-pin-heading {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin: 0 0 16px;
  background: var(--cream);
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
}
.colour-pin-heading::before {
  content: "";
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='8' height='8' rx='1.5'/%3E%3Crect x='13' y='3' width='8' height='8' rx='1.5' opacity='.5'/%3E%3Crect x='3' y='13' width='8' height='8' rx='1.5' opacity='.5'/%3E%3Crect x='13' y='13' width='8' height='8' rx='1.5'/%3E%3C/svg%3E") center / 55% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='8' height='8' rx='1.5'/%3E%3Crect x='13' y='3' width='8' height='8' rx='1.5' opacity='.5'/%3E%3Crect x='3' y='13' width='8' height='8' rx='1.5' opacity='.5'/%3E%3Crect x='13' y='13' width='8' height='8' rx='1.5'/%3E%3C/svg%3E") center / 55% no-repeat;
}
.colour-pin-heading-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.colour-pin-heading-note {
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-weight: 600;
}
@media (max-width: 480px) {
  .colour-pin-heading { flex-wrap: wrap; padding: 10px 12px; }
  .colour-pin-heading-note { flex-basis: 100%; }
}
.fabric-subgroup-heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
  margin-top: 4px;
}
.fabric-subgroup-heading[data-opacity-subheading="opera-pick"] {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.fabric-subgroup-heading-stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.fabric-subgroup-title-row { display: flex; align-items: center; gap: 8px; }
.fabric-subgroup-heading .pdp-select-dropdown { min-width: 150px; }
.required-badge {
  display: inline-block;
  background: var(--rust);
  color: var(--white);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}
.opera-panel-label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 20px;
  padding-bottom: 12px;
}
.opera-panel-label::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 3px;
  border-radius: 999px;
  background: var(--gold);
}
.opera-panel-label .required-badge { font-style: normal; font-size: 0.6rem; }
.opera-fabric-panel + .opera-fabric-panel .opera-panel-label {
  margin-top: 30px;
}
/* Elevated so it reads as a clear instruction the buyer needs to act on
   (pick an opacity/style/collection first) rather than a quiet caption
   easy to miss in an otherwise-empty fabric area -- warm gold/cream
   banner (site's existing --gold/--cream sale-badge palette) so it reads
   as an unmistakable "do this first" flag, placed right under the step
   title where the buyer's eye lands first. */
.fabric-required-note {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  padding: 9px 13px;
  background: var(--cream);
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
}
.fabric-required-note::before {
  content: "";
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  background: #8a6a00;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12 9v4M12 17h.01M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3C/svg%3E") center / 80% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12 9v4M12 17h.01M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3C/svg%3E") center / 80% no-repeat;
}
/* Size-limit warning reuses .fabric-required-note's gold/cream banner
   look (same "do this first" visual language) but in red, since this one
   blocks checkout rather than just prompting a next step. */
.size-limit-warning {
  background: #fdecea;
  border-left-color: var(--red);
  color: #7a1c10;
}
.size-limit-warning::before {
  background: var(--red);
}
#addToCartBtn:disabled,
#addToCartBtn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

.pdp-step-locked {
  position: relative;
  opacity: 0.42;
  pointer-events: none;
  user-select: none;
  filter: grayscale(0.3);
}
.avail-swatch-card { border: none; background: none; text-align: left; cursor: pointer; padding: 0; font-family: inherit; min-width: 0; width: 100%; }
.avail-swatch-frame {
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  padding: 4px;
  transition: border-color var(--dur-sm) var(--ease);
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.avail-swatch-card.active .avail-swatch-frame { border-color: var(--navy); }
.avail-swatch-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  flex: 0 0 auto;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-alt);
}
.avail-swatch-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avail-swatch-card:hover .avail-swatch-visual { border-color: var(--blue); }
.avail-swatch-check {
  display: none;
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green, #1a9c56);
  color: var(--white);
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  z-index: 2;
}
.avail-swatch-check svg { width: 11px; height: 11px; }
.avail-swatch-card.active .avail-swatch-check { display: flex; }
.avail-swatch-zoom {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: var(--navy);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
  box-shadow: 0 1px 4px rgba(3,31,115,0.35);
  opacity: 0;
  transition: opacity var(--dur-sm) var(--ease), transform var(--dur-sm) var(--ease);
  z-index: 2;
}
.avail-swatch-card:hover .avail-swatch-zoom { opacity: 1; transform: scale(1.05); }
.avail-swatch-zoom svg { width: 12px; height: 12px; }
/* Extra-savings ribbon for the two curated ~20% slices of fabrics per
   opacity group that get an additional 5% or 10% off on top of the
   sitewide sale (see js/pdp-engine.js, data-fab-tier="1"/"2"). Bottom-left
   is the one corner of the swatch visual nothing else claims -- top-left
   is Designer/Favourite, top-right is the selected check, bottom-right is
   the hover-only zoom control. Shared by both the full colour-family grid
   card and its Customer Favourites tile twin, so the same fabric reads
   consistently wherever it's shown. Tier 1 (the Customer Favourites slice,
   +5%) reads gold to match the star/favourite language already used
   elsewhere; tier 2 (+10%, grid-only) reads red like every other "off"
   badge on the site -- the deeper color for the deeper discount. */
.fab-extra-badge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  color: var(--white);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  padding: 2px 5px;
  border-radius: 999px;
  line-height: 1.3;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  pointer-events: none;
}
.fab-extra-badge-5 { background: var(--rust); }
.fab-extra-badge-10 { background: var(--red); }

/* ---- Swatch zoom lightbox ---- */
.swatch-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20,22,28,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1100;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.swatch-lightbox.open { display: flex; }
.swatch-lightbox-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 560px;
  width: 100%;
}
.swatch-lightbox-visual {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  box-shadow: 0 30px 60px rgba(0,0,0,0.35);
  position: relative;
  overflow: hidden;
}
.swatch-lightbox-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 28% 18%, rgba(255,255,255,0.22), transparent 60%);
  pointer-events: none;
}
.swatch-lightbox-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(180deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 2px, rgba(0,0,0,0.04) 2px, rgba(0,0,0,0.04) 4px);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.swatch-lightbox-img {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.swatch-lightbox-visual.has-photo::before,
.swatch-lightbox-visual.has-photo::after { display: none; }
.swatch-lightbox-visual.has-photo .swatch-lightbox-img { display: block; }
.swatch-lightbox-designer-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--gold);
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
  z-index: 2;
}
.swatch-lightbox-info { text-align: center; margin-top: var(--gap-md); color: var(--white); }
.swatch-lightbox-info h3 { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 4px; }
.swatch-lightbox-info .code { font-size: 0.85rem; color: #c9d4ee; letter-spacing: 0.03em; }
.swatch-lightbox-actions { margin-top: var(--gap-md); }
.swatch-lightbox-counter { margin-top: var(--gap-sm); font-size: 0.8rem; color: #c9d4ee; }
.swatch-lightbox-close {
  position: absolute;
  top: 24px;
  right: 32px;
  color: var(--white);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
}
.swatch-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-sm) var(--ease);
}
.swatch-lightbox-nav:hover { background: rgba(255,255,255,0.24); }
.swatch-lightbox-nav.prev { left: 24px; }
.swatch-lightbox-nav.next { right: 24px; }
.swatch-lightbox-nav svg { width: 20px; height: 20px; }
@media (max-width: 640px) {
  .swatch-lightbox { padding: 20px; }
  .swatch-lightbox-nav { width: 38px; height: 38px; }
  .swatch-lightbox-nav.prev { left: 8px; }
  .swatch-lightbox-nav.next { right: 8px; }
  .swatch-lightbox-close { top: 12px; right: 16px; }
}
.avail-swatch-price {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(3,31,115,0.82);
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 3px;
}
.avail-swatch-designer {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--navy);
  color: var(--white);
  font-size: 0.6rem;
  font-weight: 800;
  padding: 3px 8px 3px 6px;
  border-radius: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  z-index: 2;
}
.avail-swatch-favourite {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  background: var(--gold);
  color: var(--ink);
  font-size: 0.6rem;
  font-weight: 800;
  padding: 3px 8px 3px 6px;
  border-radius: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.avail-swatch-favourite svg { width: 9px; height: 9px; fill: var(--ink); flex-shrink: 0; }
.avail-swatch-card { display: flex; flex-direction: column; }
.avail-swatch-card h5 { font-size: 0.85rem; font-weight: 600; color: var(--ink); line-height: 1.3; margin-top: 8px; min-height: 2.6em; text-wrap: balance; overflow-wrap: break-word; word-break: break-word; }
.avail-swatch-card .order-sample-btn { margin-top: auto; }
.avail-swatch-card .order-sample-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--rust);
  background: none;
  border: 1px solid var(--rust);
  border-radius: 4px;
  padding: 7px 8px;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur-sm) var(--ease), color var(--dur-sm) var(--ease);
}
.avail-swatch-card .order-sample-btn:hover { background: var(--rust); color: var(--white); }
.avail-swatch-card .order-sample-btn:disabled { border-color: var(--line); color: var(--ink-soft); cursor: not-allowed; opacity: 0.6; }
.avail-swatch-card .order-sample-btn:disabled:hover { background: none; color: var(--ink-soft); }
/* Already in the samples cart — greyed out so the same fabric can't be
   added again, but tinted green (not just grey) to read as "done" rather
   than "blocked", distinct from the limit-reached state above. */
.avail-swatch-card .order-sample-btn.sample-already-added:disabled {
  border-color: var(--green, #1a9c56);
  color: var(--green, #1a9c56);
  background: rgba(26, 156, 86, 0.08);
  opacity: 1;
}
.avail-swatch-card .order-sample-btn.sample-already-added:disabled:hover {
  background: rgba(26, 156, 86, 0.08);
  color: var(--green, #1a9c56);
}

/* ---- "See It On Your Window" visualizer trigger button ---- */
.see-on-window-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
  padding: 13px 16px;
  background: var(--navy);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--dur-sm) var(--ease), transform var(--dur-sm) var(--ease);
}
.see-on-window-btn:hover { background: var(--navy-deep); }
.see-on-window-btn:active { transform: scale(0.98); }
.see-on-window-btn svg { width: 17px; height: 17px; flex-shrink: 0; }

/* ---- Window Visualizer modal — upload a photo, drag 4 corner handles
   onto the window, the selected fabric warps to fit in real time.
   Entirely client-side: the photo never leaves the browser. ---- */
.visualizer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(242,239,232,0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 2300;
  align-items: center;
  justify-content: center;
  padding: 30px;
}
.visualizer-overlay.open { display: flex; }
.visualizer-box {
  position: relative;
  width: min(760px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.visualizer-close {
  position: absolute;
  top: -40px;
  right: 0;
  color: var(--navy);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  background: var(--white);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.visualizer-title { font-size: 1.25rem; color: var(--navy); margin-bottom: 8px; padding-right: 20px; }
.visualizer-sub { font-size: 0.88rem; line-height: 1.55; color: var(--ink-soft); margin-bottom: 22px; }
.visualizer-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 56px 24px;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: var(--paper-alt);
  text-align: center;
}
.visualizer-upload-hint { font-size: 0.82rem; color: var(--ink-soft); }
.visualizer-upload-btn-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.visualizer-upload-btn-row .btn { min-width: 160px; }
.visualizer-upload-btn-row .btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.visualizer-stage { display: flex; flex-direction: column; gap: 18px; }
.visualizer-canvas-wrap {
  position: relative;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: #111;
  touch-action: none;
  user-select: none;
  line-height: 0;
}
.visualizer-canvas-wrap canvas { display: block; width: 100%; height: auto; }
.visualizer-handle {
  position: absolute;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--white);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  cursor: grab;
  touch-action: none;
}
.visualizer-handle:active { cursor: grabbing; transform: scale(1.15); }
.visualizer-controls { display: flex; flex-direction: column; gap: 14px; }
.visualizer-fabric-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 7px 14px;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.visualizer-fabric-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(0,0,0,0.15);
  flex-shrink: 0;
}
.visualizer-fabric-chip strong { color: var(--navy); }
.visualizer-suggest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.visualizer-suggest:empty { display: none; }
.visualizer-suggest svg { width: 15px; height: 15px; color: var(--gold); flex-shrink: 0; }
.visualizer-suggest span { flex: 1 1 220px; font-size: 0.82rem; line-height: 1.5; color: var(--ink); }
.visualizer-suggest-btn {
  background: linear-gradient(100deg, var(--navy) 0%, var(--blue) 100%);
  color: var(--white);
  border: none;
  border-radius: 999px;
  padding: 8px 15px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}
.visualizer-suggest-btn:hover { opacity: 0.9; }
.visualizer-opacity-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
}
.visualizer-opacity-row input[type="range"] { flex: 1; accent-color: var(--rust); }
.visualizer-btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.visualizer-btn-row .btn { flex: 1; min-width: 160px; }
.visualizer-hint { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.5; }
@media (max-width: 640px) {
  .visualizer-box { padding: 22px; }
  .visualizer-upload { padding: 40px 18px; }
  .visualizer-btn-row .btn { min-width: 130px; }
}

/* ---- Questions & Answers ---- */
.qa-list { display: flex; flex-direction: column; gap: 18px; }
.qa-item { border-bottom: 1px solid var(--line); padding-bottom: 18px; }
.qa-item .q { display: flex; gap: 10px; font-weight: 700; color: var(--navy); font-size: 0.95rem; margin-bottom: 8px; }
.qa-item .q span.tag { flex-shrink: 0; background: var(--paper-alt); color: var(--navy); font-size: 0.72rem; font-weight: 800; padding: 2px 7px; border-radius: 3px; }
.qa-item .a { display: flex; gap: 10px; font-size: 0.92rem; color: var(--ink-soft); padding-left: 30px; }
.qa-item .a span.tag { flex-shrink: 0; background: var(--cream); color: var(--rust); font-size: 0.72rem; font-weight: 800; padding: 2px 7px; border-radius: 3px; }
.qa-ask { margin-top: 20px; font-size: 0.9rem; }
.qa-ask a { color: var(--blue); font-weight: 700; }

/* ---- Product Details "Read More" popup ----
   Same overlay/box/close pattern as the video and advisor modals — a
   summarized version of the product's Description/Child Safety/Warranty
   copy plus a condensed "Key Features" chip list, populated from each
   PDP's own hidden <template id="productDetailsTemplate">. */
.details-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(242,239,232,0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 2300;
  overflow-y: auto;
  padding: 64px 20px;
}
.details-modal-overlay.open { display: flex; align-items: flex-start; justify-content: center; }
.details-modal-box {
  position: relative;
  width: min(600px, 94vw);
  margin: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-soft);
  text-align: left;
}
.details-modal-box h3 { margin-bottom: 16px; color: var(--navy); font-size: 1.3rem; }
.details-modal-box p, .details-modal-box h4 { font-size: 0.92rem; }
.details-modal-close {
  position: fixed;
  top: 22px;
  right: 22px;
  color: var(--navy);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  background: var(--white);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 2310;
  transition: transform var(--dur-sm) var(--ease), background var(--dur-sm) var(--ease);
}
.details-modal-close:hover { transform: scale(1.08); background: var(--paper-alt); }
.details-modal-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.details-modal-chips span {
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy);
}
@media (max-width: 600px) {
  .details-modal-overlay { padding: 50px 14px; }
  .details-modal-close { top: 14px; right: 14px; }
  .details-modal-box { padding: 24px; }
}

/* ---- Floating help bubble ---- */
.help-bubble-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--navy);
  color: var(--white);
  border: none;
  border-radius: 999px;
  padding: 13px 20px 13px 16px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-med);
  transition: transform var(--dur-sm) var(--ease), background var(--dur-sm) var(--ease);
}
.help-bubble-btn:hover { transform: translateY(-2px); background: var(--blue); }
.help-bubble-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.help-bubble-panel {
  position: fixed;
  bottom: 84px;
  right: 24px;
  z-index: 500;
  width: 300px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-med);
  border: 1px solid var(--line);
  padding: var(--gap-md);
  display: none;
}
.help-bubble-panel.open { display: block; }
.help-bubble-panel h4 { font-size: 1rem; color: var(--navy); margin-bottom: 6px; }
.help-bubble-panel p { font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 14px; }

@media (max-width: 980px) {
  .avail-colors-wrap { grid-template-columns: 1fr; }
  .avail-preview-card { position: static; }
}
@media (max-width: 640px) {
  .avail-swatch-grid { grid-template-columns: repeat(2, 1fr); }
  .pdp-accordion-header { font-size: 1.1rem; }
}

/* Lightbox */
.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(242,239,232,0.8);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 40px;
  cursor: zoom-out;
}
.lightbox-overlay.open { display: flex; }
.lightbox-overlay svg { width: min(60vh, 500px); height: auto; }
.lightbox-overlay img { max-width: min(90vw, 900px); max-height: 85vh; width: auto; height: auto; border-radius: var(--radius-sm); }
.lightbox-close {
  position: absolute;
  top: 24px;
  right: 32px;
  color: var(--white);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
}

/* ==========================================================================
   Motion — scroll reveal, counters, toasts
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-lg) var(--ease), transform var(--dur-lg) var(--ease);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-group] > * { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-lg) var(--ease), transform var(--dur-lg) var(--ease); }
[data-reveal-group].is-visible > * { opacity: 1; transform: translateY(0); }
[data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0.02s; }
[data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 0.09s; }
[data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 0.16s; }
[data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 0.23s; }
[data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 0.30s; }
[data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 0.37s; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-group] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

.btn-primary, .btn-outline, .btn-light { transition: all var(--dur-sm) var(--ease); }
.btn:active { transform: scale(0.97); }

/* Toast notifications */
.toast-stack {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.toast {
  background: var(--navy);
  color: var(--white);
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-med);
  font-size: 0.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-md) var(--ease), transform var(--dur-md) var(--ease);
  max-width: 320px;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast svg { width: 18px; height: 18px; color: var(--gold); flex-shrink: 0; }

/* ---- Header shadow on scroll ----
   Used to also shrink .nav's padding on scroll via a `transition: padding`
   rule. Animating `padding` forces a full layout recalculation (not just
   paint) on every single frame of the transition -- and since the header
   sits directly above the homepage's autoplaying hero video, that per-
   frame reflow was competing with video decode/composite AND scroll
   handling all at once, right at the exact scroll position (the top of
   the page) where this class toggles on and off. That's what was actually
   behind the "stuck / fuzzy" glitch at the top of the homepage: a real,
   continuous layout-thrashing animation, not a one-off visual bug. Kept
   only the box-shadow feedback (a paint-only property, effectively free
   to animate) and dropped the padding shrink + its transition entirely. */
.site-header { transition: box-shadow var(--dur-sm) var(--ease); }

/* Cart icon + badge */
.cart-link { position: relative; display: flex; align-items: center; }
.cart-link svg { width: 22px; height: 22px; color: var(--navy); }
.cart-badge {
  position: absolute;
  top: -8px;
  right: -10px;
  background: var(--rust);
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* ==========================================================================
   Configurator (product pages)
   ========================================================================== */
.configurator-group { margin-bottom: 20px; }
.configurator-label {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
}
.configurator-label .selected-value { color: var(--ink-soft); font-weight: 500; margin-left: auto; padding-left: 12px; }
.configurator-label-tight { margin-bottom: 6px; flex-wrap: wrap; row-gap: 4px; }
.swatch-row { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--line);
  cursor: pointer;
  position: relative;
  transition: all var(--dur-sm) var(--ease);
  padding: 0;
}
.swatch:hover { transform: scale(1.08); }
.swatch.active { border-color: var(--navy); box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--navy); }
.swatch.premium::after {
  content: "+";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 15px;
  height: 15px;
  background: var(--gold);
  color: var(--ink);
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.option-row { display: flex; gap: 10px; flex-wrap: wrap; }
.option-pill {
  padding: 10px 18px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  transition: all var(--dur-sm) var(--ease);
  background: var(--white);
}
.option-pill:hover { border-color: var(--blue); }
.option-pill.active { background: var(--navy); border-color: var(--navy); color: var(--white); }
.option-pill .addon-cost { display: block; font-size: 0.72rem; font-weight: 500; opacity: 0.8; }
.option-pill .addon-cost .opt-price-was { text-decoration: line-through; opacity: 0.75; margin: 0 4px; }
.option-pill .addon-cost .opt-price-now { font-weight: 800; }
.option-pill.active .addon-cost { opacity: 1; }

/* ---- Illustrated option cards (mount, lift, headrail, valance, liner) ---- */
.illus-card-row { display: flex; gap: 14px; flex-wrap: wrap; }
.illus-card-row.opacity-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.illus-card-row.opacity-grid .opacity-card-center { grid-column: 1 / -1; justify-self: center; width: calc(50% - 7px); }
/* Lead card that spans the full row above grouped band/opacity clusters
   (e.g. "Opera - Double Shade" sitting above the 3"/4" Band groups). */
.illus-card-row.opacity-grid .opacity-full-row { grid-column: 1 / -1; width: 100%; max-width: none; }
/* Bunches a band/cell-size's opacity choices into one bordered card with a
   shared heading, instead of every combination getting its own separate
   pill — much easier to scan than a flat wall of options. */
.opacity-band-group {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  padding: 12px;
}
.opacity-band-heading {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ink-soft);
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.opacity-band-list { display: flex; flex-direction: column; gap: 8px; }
.opacity-band-list .illus-card-lift { width: 100%; max-width: none; min-width: 0; }
@media (max-width: 420px) {
  .illus-card-row.opacity-grid { grid-template-columns: 1fr; }
  .illus-card-row.opacity-grid .opacity-card-center { width: 100%; }
}
/* Keep the "?" tooltip glued to the right of the title on these title-only
   opacity/louver cards instead of wrapping onto its own line below. */
.illus-card-row.opacity-grid .illus-label .name {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.illus-card-row.opacity-grid .illus-label .name .opt-tip-title { flex: 1; }
.illus-card-row.opacity-grid .illus-label .name .opt-tip { flex-shrink: 0; margin-top: 1px; }
.illus-card {
  width: 140px;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  overflow: hidden;
  background: var(--white);
  transition: border-color var(--dur-sm) var(--ease), background var(--dur-sm) var(--ease);
  text-align: left;
  padding: 0;
  font-family: inherit;
}
.illus-card:hover { border-color: var(--blue); }
/* A card that's temporarily off-limits given another selection made
   elsewhere (e.g. a bottom rail that isn't offered with a motorized lift
   style) — greyed out and inert rather than removed, so the buyer can see
   why it disappeared from consideration and what to change to get it back. */
.illus-card.card-disabled { opacity: 0.4; pointer-events: none; }
.illus-card.active { border-color: var(--navy); background: rgba(3,31,115,0.05); }
.illus-card .illus-visual {
  aspect-ratio: 1/1;
  background: var(--paper-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.illus-card .illus-visual svg { width: 68%; height: 68%; color: var(--navy); opacity: 0.85; }
.illus-card.active .illus-visual svg { opacity: 1; }
/* Selected-state checkmark badge: force white icon on green circle everywhere,
   overriding the generic navy icon-color rule above (equal/lower specificity
   would otherwise leak through and turn every checkmark navy/black). */
.illus-card .illus-visual .illus-check svg { color: var(--white) !important; opacity: 1 !important; }
.opt-off-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: var(--red);
  color: var(--white);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 2px 6px;
  border-radius: 999px;
  line-height: 1.4;
  z-index: 2;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
/* Inline variant for flat option-pills with no illustration to anchor to
   (warranty tiers, etc.) — sits before the price instead of floating. */
.opt-off-badge-inline {
  position: static;
  display: inline-block;
  margin-right: 4px;
  box-shadow: none;
}
/* Small ribbon on the 4" Fascia Valance card, shown only while it's
   revealed (see js/pdp-engine.js size-limit engine) so the buyer
   understands why an extra headrail option suddenly appeared. */
.fascia-recommended-tag {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--gold);
  color: var(--navy);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  padding: 3px 3px;
  line-height: 1.25;
}
/* Cards that can't fit the buyer's current fabric + size — dimmed and
   inert rather than removed, so the option's still visible for context
   (e.g. "this would work at a smaller size") without being pickable. */
.illus-card.size-unavailable,
.avail-swatch-card.size-unavailable {
  opacity: 0.38;
  filter: grayscale(0.5);
  pointer-events: none;
}
.illus-card .illus-label { padding: 8px 10px 10px; border-top: 1px solid var(--line); }
.illus-card .illus-label .name { font-size: 0.8rem; font-weight: 700; color: var(--navy); display: block; margin-bottom: 2px; }
.illus-card .illus-label .price { font-size: 0.74rem; color: var(--ink-soft); font-weight: 600; }
.illus-card .illus-label .price .opt-price-was { text-decoration: line-through; opacity: 0.7; margin-right: 4px; }
.illus-card .illus-label .price .opt-price-now { color: var(--red); font-weight: 800; }
.illus-card.active .illus-label { background: var(--navy); }
.illus-card.active .illus-label .name,
.illus-card.active .illus-label .price { color: var(--white); }
/* Some active-card variants (e.g. Lift Style cards further down) override
   this navy-background/white-text look back to a white-background/navy-text
   look with their own !important rule — inherit rather than hardcode so
   the discounted price stays legible (not white-on-white) in either case. */
.illus-card.active .illus-label .price .opt-price-now { color: inherit; }

/* ---- Mount Type — large illustrated cards + side note ---- */
.mount-row { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.illus-card-mount {
  width: 190px;
  border-color: #96342a;
  border-radius: 5px;
  padding: 10px 10px 0;
}
.illus-card-mount:hover { border-color: #7d2b23; }
.illus-card-mount.active {
  border-color: #7d2b23;
  background: #fdf1ee;
  /* border-width + box-shadow centralized in the shared .illus-card.active
     "site polish" rule further down so every card subtype matches exactly. */
}
.illus-card-mount .illus-check {
  display: none;
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green, #1a9c56);
  color: var(--white);
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  z-index: 2;
}
.illus-card-mount .illus-check svg { width: 11px; height: 11px; }
.illus-card-mount.active .illus-check { display: flex; }
.mount-note .opt-tip { margin-left: 0; margin-right: 6px; }
.opt-tip-static { cursor: default; }

.configurator-label-tight .hd-inline-select { margin-left: auto; min-width: 130px; }
.hd-note-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.hd-note-text {
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.4;
  flex: 0 1 auto;
}
.see-picture-btn {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--blue);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.see-picture-btn svg { width: 11px; height: 11px; color: var(--blue); flex-shrink: 0; }
.see-picture-btn:hover { background: rgba(26,86,219,0.08); border-color: var(--blue); }

.measure-heading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
  margin: 4px 0 14px;
}
.measure-tip-badge {
  width: 34px;
  height: 15px;
  color: var(--rust);
  flex-shrink: 0;
}
.measure-link {
  display: inline-flex;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
}
.measure-link:hover { text-decoration: underline; }

/* ---- How to Measure modal ---- */
.measure-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(242,239,232,0.8);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 2200;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.measure-modal-overlay.open { display: flex; }
.measure-modal-box {
  position: relative;
  width: min(520px, 92vw);
  background: var(--white);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.measure-modal-box h3 { font-size: 1.15rem; color: var(--navy); margin-bottom: 14px; padding-right: 20px; }
.measure-modal-box p { font-size: 0.92rem; line-height: 1.65; color: var(--ink-soft); margin-bottom: 14px; }
.measure-modal-box p:last-of-type { margin-bottom: 0; }
.measure-modal-box ul.warranty-modal-list { margin: 0 0 14px; padding-left: 20px; font-size: 0.92rem; line-height: 1.65; color: var(--ink-soft); }
.measure-modal-box ul.warranty-modal-list li { margin-bottom: 4px; }
.measure-modal-box ul.warranty-modal-list strong { color: var(--ink); }
.measure-modal-link { display: inline-block; margin-top: 4px; font-size: 0.86rem; font-weight: 700; color: var(--blue); text-decoration: underline; }
.add-more-modal-box { text-align: center; }
.add-more-modal-check {
  width: 48px; height: 48px; padding: 12px; margin: 0 auto 14px; display: block;
  color: var(--white); background: var(--green, #1a9c56); border-radius: 50%;
}
.add-more-modal-box h3 { margin-bottom: 10px; }
.add-more-modal-box p,
.add-more-modal-box p:last-of-type { font-size: 0.98rem; line-height: 1.5; margin-bottom: 26px; }
.add-more-modal-actions { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 480px) {
  .add-more-modal-box { padding: 26px 22px; }
}
.measure-modal-close {
  position: absolute;
  top: -40px;
  right: 0;
  color: var(--navy);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  background: var(--white);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.image-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(242,239,232,0.8);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 2200;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.image-modal-overlay.open { display: flex; }
.image-modal-box {
  position: relative;
  /* Framed (non-frameless) mode is used exclusively by the option-card
     "magnifying glass" zoom buttons (bottom rail/valance/headrail/mount
     illustrated cards) — sized large so the highest-resolution source
     photo reads crisp and zoomed-in instead of a small postage stamp. */
  width: min(1400px, 94vw);
  background: transparent;
  border-radius: var(--radius);
  padding: 0;
  box-shadow: none;
}
.image-modal-frame {
  background: var(--paper-alt);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.image-modal-frame img { width: 100%; max-height: 85vh; object-fit: contain; display: block; image-rendering: -webkit-optimize-contrast; }
/* Frameless mode: used for fabric-swatch zoom — no card/background/padding,
   just the photo itself shown as large as possible. */
.image-modal-box.frameless {
  width: min(680px, 88vw);
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.image-modal-frame.frameless {
  background: none;
  padding: 0;
  border-radius: 0;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 86vh;
  overflow: hidden;
  display: block;
}
.image-modal-frame.frameless img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  border: none;
  outline: none;
  box-shadow: none;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}
.image-modal-box.frameless .image-modal-close {
  top: -44px;
}
.image-modal-close {
  position: absolute;
  top: -40px;
  right: 0;
  color: var(--navy);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  background: var(--white);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.illus-card-mount .illus-visual {
  aspect-ratio: 1/1;
  background: var(--paper-alt);
  box-sizing: border-box;
}
.illus-card-mount .illus-visual svg { width: 100%; height: 100%; opacity: 1; display: block; }
.illus-card-mount .illus-label {
  border-top: none;
  background: transparent !important;
  padding: 8px 4px 16px;
  text-align: center;
}
.illus-card-mount .illus-label .name {
  color: var(--rust) !important;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0;
}
.illus-card-mount.active .illus-label .name { color: #7d2b23 !important; }
.mount-note { flex: 1; min-width: 240px; font-size: 0.87rem; color: var(--ink-soft); line-height: 1.65; margin-top: 8px; }
.mount-important-note { flex: 1 1 100%; margin-top: 10px; font-size: 0.85rem; line-height: 1.55; color: var(--red); }
.mount-important-note strong { display: block; font-weight: 800; margin-bottom: 2px; }
.mount-important-note p { margin: 0; }
@media (max-width: 640px) {
  .illus-card-mount { width: 150px; }
}

/* ---- Lift Styles — media-card layout, all options selectable ---- */
.lift-style-row { flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.illus-card-lift {
  flex: 1 1 0;
  width: auto;
  min-width: 140px;
  max-width: 210px;
  border-color: var(--line);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  overflow: visible;
}
/* Lift Styles cards specifically: fixed, uniform width so a lone card on a
   wrapped last row never grows wider than the cards above it. */
.lift-style-row .illus-card-lift { flex: 0 0 170px; width: 170px; max-width: 170px; }
.illus-card-lift .illus-visual { overflow: hidden; border-radius: inherit; }
.illus-card-lift:hover { border-color: var(--blue); }
.illus-card-lift.active {
  border-color: var(--navy);
  background: rgba(3,31,115,0.05);
  /* border-width + box-shadow centralized in the shared .illus-card.active
     "site polish" rule further down so every card subtype matches exactly. */
}
.illus-card-lift .illus-visual { aspect-ratio: 4/3; }
.illus-card-lift .illus-visual svg:first-child { width: 62%; height: 62%; opacity: 0.85; }
.illus-card-lift .illus-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
  box-sizing: border-box;
  display: block;
}
.illus-card-lift.active .illus-visual svg:first-child { opacity: 1; }
.illus-card-lift .illus-check {
  display: none;
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green, #1a9c56);
  color: var(--white);
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  z-index: 2;
}
.illus-card-lift .illus-check svg { width: 11px; height: 11px; }
.illus-card-lift.active .illus-check { display: flex; }
.lift-watch-video-btn {
  position: absolute;
  left: 5px;
  bottom: 5px;
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(3,31,115,0.88);
  color: var(--white);
  border: none;
  border-radius: 999px;
  padding: 3px 7px 3px 5px;
  font-family: inherit;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 2;
}
.lift-watch-video-btn:hover { background: var(--navy); transform: translateY(-1px); }
.illus-card-lift .illus-visual .lift-watch-video-btn svg {
  width: 8px !important;
  height: 8px !important;
  opacity: 1 !important;
  color: var(--white) !important;
  flex-shrink: 0;
}
.valance-zoom-btn {
  position: absolute;
  right: 5px;
  bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: rgba(3,31,115,0.88);
  color: var(--white);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 2;
}
.valance-zoom-btn:hover { background: var(--navy); transform: translateY(-1px); }
.illus-card-lift .illus-visual .valance-zoom-btn svg {
  width: 11px !important;
  height: 11px !important;
  opacity: 1 !important;
  color: var(--white) !important;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .valance-zoom-btn { width: 16px; height: 16px; }
  .illus-card-lift .illus-visual .valance-zoom-btn svg { width: 9px !important; height: 9px !important; }
}
/* Mirage Finish Headrail card — colour picker lives inside the card itself,
   right under the "Free" price, instead of floating outside the card row */
.illus-card-lift[role="button"] { outline: none; }
.illus-card-lift[role="button"]:focus-visible { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(48,96,175,0.25); }
.valance-colour-picker {
  margin: 0 12px 12px;
  padding: 0;
  background: none;
  border: none;
  max-width: none;
}
.valance-colour-picker select {
  width: 100%;
  font-size: 0.78rem;
  padding: 7px 8px;
  min-width: 0;
}
/* A colour picker nested inside a finish picker (Square/Round Cassette's
   "Matte Finish" sub-choice) shouldn't stack the outer wrapper's own
   margin on top of its own — collapse it to a small top gap only. */
.valance-colour-picker .valance-colour-picker {
  margin: 8px 0 0;
}
.valance-required-note {
  margin: 6px 12px 12px;
  max-width: none;
  padding: 6px 8px;
  background: #fdf1e0;
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  color: #6e4a10;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.4;
}
.illus-card-lift .illus-label {
  padding: 10px 12px 8px;
  flex: 1;
}
.illus-card-lift .illus-label .name { font-size: 0.85rem; color: var(--navy) !important; }
.illus-card-lift .illus-label .price {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  color: var(--ink-soft) !important;
}
.illus-card-lift.active .illus-label { background: transparent !important; }
.illus-card-lift.active .illus-label .name,
.illus-card-lift.active .illus-label .price { color: var(--navy) !important; }
/* The navy override above is for the card's plain label text — but it was
   also flattening the discounted "now" price back to navy once a card was
   selected, since .opt-price-now just inherits its parent .price's color.
   Re-assert red directly on the price span itself so the sale price stays
   visually distinct (matches the unselected-card look) even when active. */
.illus-card-lift.active .illus-label .price .opt-price-now { color: var(--red) !important; }
@media (max-width: 640px) {
  .illus-card-lift { max-width: 120px; min-width: 108px; }
  .lift-style-row .illus-card-lift { flex: 0 0 108px; width: 108px; max-width: 120px; }
  .lift-watch-video-btn { font-size: 0.44rem; padding: 2px 5px 2px 4px; }
  .illus-card-lift .illus-visual .lift-watch-video-btn svg { width: 6px !important; height: 6px !important; }
}

/* ---- Headrail Options — 3 cards side by side (2 selectable + 1 static config) ---- */
.headrail-row { flex-wrap: nowrap; gap: 12px; align-items: stretch; }
.illus-card-headrail {
  flex: 1 1 0;
  width: auto;
  min-width: 140px;
  max-width: 210px;
  border-color: var(--line);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.illus-card-headrail .illus-visual { overflow: hidden; border-radius: inherit; aspect-ratio: 4/3; }
.illus-card-headrail:hover { border-color: var(--blue); }
.illus-card-headrail.active {
  border-color: var(--navy);
  background: rgba(3,31,115,0.05);
  /* border-width + box-shadow centralized in the shared .illus-card.active
     "site polish" rule further down so every card subtype matches exactly. */
}
.illus-card-headrail .illus-visual svg:first-child { width: 100%; height: 100%; opacity: 1; display: block; }
.illus-card-headrail .illus-check {
  display: none;
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green, #1a9c56);
  color: var(--white);
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  z-index: 2;
}
.illus-card-headrail .illus-check svg { width: 11px; height: 11px; }
.illus-card-headrail.active .illus-check { display: flex; }
.illus-card-headrail .illus-label { padding: 10px 12px 12px; flex: 1; }
.illus-card-headrail .illus-label .name { font-size: 0.85rem; color: var(--navy) !important; display: block; margin-bottom: 2px; }
.illus-card-headrail .illus-label .price { font-size: 0.78rem; color: var(--ink-soft) !important; }
.illus-card-headrail.active .illus-label { background: transparent !important; }
.illus-card-headrail.active .illus-label .name,
.illus-card-headrail.active .illus-label .price { color: var(--navy) !important; }
/* Same fix as Lift Style cards above: keep the discounted "now" price red
   once the headrail card is selected, instead of inheriting the navy
   forced onto its .price parent. */
.illus-card-headrail.active .illus-label .price .opt-price-now { color: var(--red) !important; }
.lift-location-note {
  display: none;
  align-items: center;
  gap: 6px;
  background: #fdf1e0;
  border: 1px solid var(--gold);
  color: #8a5a12;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}
.lift-location-note.show { display: flex; }
.illus-card-headrail-lift { cursor: default; }
.illus-card-headrail-lift:hover { border-color: var(--line); }
.illus-card-headrail-lift.needs-attention {
  border-color: var(--gold);
  border-width: 2px;
  box-shadow: 0 0 0 3px rgba(212,160,23,0.18);
}
.illus-card-headrail-lift .headrail-lift-select {
  display: block;
  margin-top: 6px;
  width: 100%;
  max-width: 100%;
  min-width: 0 !important;
  box-sizing: border-box;
  padding: 6px 6px !important;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: 0.76rem !important;
  font-family: inherit;
}
@media (max-width: 640px) {
  .illus-card-headrail { max-width: 120px; min-width: 108px; }
}

/* ---- Tooltip hint ---- */
.opt-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.4px solid var(--gold);
  color: var(--rust);
  font-size: 0.66rem;
  font-weight: 800;
  margin-left: 5px;
  cursor: help;
  vertical-align: middle;
}
/* The tooltip itself is no longer a CSS ::after popup — a card near the
   left/right edge of its row has overflow:hidden (for its rounded image
   corners) that clipped the popup whenever it tried to render outside the
   card's box. It's now a single shared element appended to <body> and
   positioned in fixed/viewport coordinates by the script below, so it can
   never be clipped by an ancestor and always stays inside the viewport. */
.opt-tip-popover {
  position: fixed;
  z-index: 4000;
  width: max-content;
  max-width: 300px;
  background: var(--navy);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  white-space: pre-line;
  padding: 10px 12px;
  border-radius: 6px;
  box-shadow: var(--shadow-med);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-sm) var(--ease);
}
.opt-tip-popover.visible { opacity: 1; visibility: visible; }
@media (max-width: 480px) {
  .opt-tip-popover { max-width: 220px; }
}

/* ---- Measurement diagram icon ---- */
.pdp-dim-row .dim-icon-wrap {
  width: 108px;
  height: 108px;
  flex-shrink: 0;
  color: var(--navy);
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pdp-dim-row.with-icon { grid-template-columns: 108px 90px 1fr 1fr; }

/* ---- Warranty radio list ---- */
.warranty-list { display: flex; flex-direction: column; gap: 2px; }
.warranty-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-size: 0.88rem;
}
.warranty-option:last-child { border-bottom: none; }
.warranty-option input[type="radio"] { width: 16px; height: 16px; accent-color: var(--navy); flex-shrink: 0; }
.warranty-option .w-name { flex: 1; font-weight: 600; color: var(--navy); }
.warranty-option .w-price { font-weight: 700; color: var(--ink-soft); }
.warranty-option.active .w-price { color: var(--green, #1a7a4c); }
.warranty-option-static { cursor: default; }
.warranty-badge { width: 40px; height: 40px; flex-shrink: 0; color: var(--gold); }

/* ---- Share link ---- */
.pdp-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pdp-share-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--blue);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  white-space: nowrap;
}
.pdp-share-btn svg { width: 15px; height: 15px; }

@media (max-width: 640px) {
  .illus-card { width: 120px; }
}

/* ==========================================================================
   Numbered step configurator (matches step-by-step buy flow)
   ========================================================================== */
.pdp-step { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--line); scroll-margin-top: 184px; } /* header (148px) + promo bar (36px) */
.pdp-step:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.pdp-step-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--navy);
  border-radius: 999px;
  padding: 13px 22px 13px 42px;
  margin: 0 0 18px 4px;
  box-shadow: 0 3px 0 rgba(3,31,115,0.3);
}
.pdp-step-num {
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  border: 1px solid var(--line);
  box-shadow: 0 2px 5px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
}
.pdp-step-title { font-size: 1rem; font-weight: 800; color: var(--white); display: flex; align-items: center; gap: 8px; }
.pdp-step-title .step-hint { display: block; font-size: 0.78rem; font-weight: 500; color: var(--ink-soft); margin-top: 2px; }
.pdp-step-title-icon { width: 16px; height: 16px; color: var(--gold); flex-shrink: 0; }
/* Live selection summary — what you've picked in this step so far,
   still visible once the step is scrolled past or collapsed. */
.pdp-step-summary {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: auto;
  padding-left: 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gold);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pdp-step-body { padding-left: 0; }
.warranty-details-link { margin-left: auto; font-size: 0.82rem; font-weight: 700; color: var(--white); text-decoration: underline; }

/* ---- Accordion behaviour layered onto the numbered step system ----
   PROTOTYPE, scoped to <body class="pdp-accordion-proto"> (currently just
   roller.html) so it doesn't touch the other PDP pages' plain always-open
   steps until the pattern is approved and rolled out everywhere. Each
   .pdp-step-head becomes a clickable toggle; .pdp-step-body collapses via
   the CSS-grid 0fr/1fr trick so it animates to its true content height
   with no JS measurement needed. Multiple steps may stay open at once. */
.pdp-accordion-proto .pdp-step-head[data-step-toggle] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pdp-accordion-proto .pdp-step-head[data-step-toggle]:hover { box-shadow: 0 3px 0 rgba(3,31,115,0.3), 0 0 0 2px rgba(252,195,0,0.35); }
.pdp-accordion-proto .pdp-step-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--gold);
  margin-left: 6px;
  transition: transform var(--dur-md, 0.3s) var(--ease, ease);
}
.pdp-accordion-proto .pdp-step.pdp-step-open .pdp-step-chevron { transform: rotate(180deg); }
.pdp-accordion-proto .pdp-step-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.4s var(--ease, ease);
}
.pdp-accordion-proto .pdp-step-body-inner { overflow: hidden; min-height: 0; transition: opacity 0.25s ease; }
.pdp-accordion-proto .pdp-step.pdp-step-collapsed .pdp-step-body { grid-template-rows: 0fr; }
.pdp-accordion-proto .pdp-step.pdp-step-collapsed .pdp-step-body-inner { opacity: 0; }
.pdp-accordion-proto .pdp-step-num { transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.pdp-accordion-proto .pdp-step.pdp-step-complete .pdp-step-num { background: var(--green, #1a9c56); color: var(--white); font-size: 0; }
.pdp-accordion-proto .pdp-step.pdp-step-complete .pdp-step-num::after {
  content: "\2713";
  font-size: 1rem;
  font-weight: 800;
}

/* ---- Refined step-header treatment ----
   The stock pill (full 999px radius + hard offset "sticker" shadow +
   grayscale-filtered locked state) reads more like a mobile-app button
   than a premium retail flow. This keeps the same navy/gold/green system
   but swaps to a quieter rounded-rect card, a flush inline step badge,
   and a genuinely distinct (not just faded) upcoming-step treatment. */
.pdp-accordion-proto .pdp-step-head {
  border-radius: 12px;
  padding: 15px 20px;
  margin-left: 0;
  box-shadow: none;
  border: 1px solid rgba(255,255,255,0.08);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.pdp-accordion-proto .pdp-step-head[data-step-toggle]:hover {
  box-shadow: 0 4px 16px rgba(3,31,115,0.18);
  border-color: rgba(252,195,0,0.4);
}
.pdp-accordion-proto .pdp-step-num {
  position: static;
  transform: none;
  width: 30px;
  height: 30px;
  font-size: 0.85rem;
  border: none;
  box-shadow: none;
  background: rgba(255,255,255,0.14);
  color: var(--white);
}
.pdp-accordion-proto .pdp-step.pdp-step-complete .pdp-step-num { box-shadow: none; }
.pdp-accordion-proto .pdp-step-title { letter-spacing: 0.01em; }

/* Upcoming (locked) steps get a genuinely quieter card instead of a
   grayscale-filtered copy of the active navy pill. */
.pdp-accordion-proto .pdp-step-locked {
  opacity: 1;
  filter: none;
}
.pdp-accordion-proto .pdp-step-locked .pdp-step-head {
  background: var(--paper);
  border: 1px solid var(--line);
}
.pdp-accordion-proto .pdp-step-locked .pdp-step-title,
.pdp-accordion-proto .pdp-step-locked .warranty-details-link { color: var(--ink-soft); }
.pdp-accordion-proto .pdp-step-locked .pdp-step-num {
  background: var(--paper-alt);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.pdp-accordion-proto .pdp-step-locked .pdp-step-title-icon,
.pdp-accordion-proto .pdp-step-locked .pdp-step-chevron { color: var(--ink-soft); opacity: 0.6; }
.pdp-select-note { font-size: 0.78rem; color: var(--ink-soft); margin-top: 8px; }
.pdp-select-dropdown {
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: 0.9rem;
  min-width: 160px;
}
.pdp-room-name { padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--white); font-size: 0.9rem; width: 100%; max-width: 280px; }

/* Two-column top row: description/trust text on the left, price ladder
   sidebar card on the right — sits above the customization panel */
.pdp-info-top {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 20px;
}
.pdp-info-text { flex: 1 1 0; min-width: 0; }
.pdp-info-top .pdp-price-ladder {
  flex: 0 0 280px;
  width: 280px;
  margin: 0;
  padding: 24px 22px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  box-shadow: var(--shadow-soft);
}
.pdp-info-top .pdp-price-ladder .pdp-cta-btn {
  margin-top: 16px !important;
  width: 100%;
  border-radius: 8px;
  font-size: 0.95rem;
  padding: 13px 20px;
  box-shadow: 0 4px 14px rgba(192,87,23,0.28);
}
.pdp-info-top .pdp-price-ladder .pdp-cta-btn:hover {
  box-shadow: 0 6px 18px rgba(192,87,23,0.36);
  transform: translateY(-1px);
}
.pdp-info-top .pdp-price-ladder .pdp-finance {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  justify-content: center;
  text-align: center;
}
@media (max-width: 720px) {
  .pdp-info-top { flex-direction: column; }
  .pdp-info-top .pdp-price-ladder { width: 100%; flex-basis: auto; }
}

/* Price ladder — mirrors a stacked unit price / savings / shipping / sale price breakdown */
.pdp-price-ladder {
  padding-top: 14px;
  margin-top: 4px;
  margin-bottom: 26px;
  border-top: 1px dashed var(--line);
}
.ladder-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.87rem; padding: 6px 0; color: var(--ink-soft); }
.ladder-row .val { font-weight: 700; color: var(--ink); }
.ladder-row-unit .val { text-decoration: line-through; }
.ladder-row-save .val { color: var(--red); font-weight: 800; }
.ladder-row-ship .val { color: var(--green, #1a7a4c); font-weight: 800; }
.ladder-row-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.ladder-row-total .label { font-size: 0.78rem; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: 0.04em; }
.ladder-row-total .now { font-size: 2rem; font-weight: 800; color: var(--ink); }

/* Samples cart mini-widget */
.pdp-samples-cart {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-alt);
  margin-bottom: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.pdp-samples-cart:hover { border-color: var(--blue); background: var(--cream); }
.pdp-samples-cart svg { width: 16px; height: 16px; color: var(--blue); flex-shrink: 0; }
.pdp-samples-cart .count-badge {
  background: var(--rust);
  color: var(--white);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
}
.pdp-selected-colour { font-size: 0.85rem; color: var(--ink-soft); margin-top: 10px; text-align: center; }
.pdp-selected-colour strong { color: var(--navy); }

/* ---- Persistent samples-cart widget (floating, sitewide) ---- */
.samples-widget {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 495;
  display: none;
}
.samples-widget.has-samples { display: block; }
.samples-widget.samples-widget-raised { bottom: 96px; }
.samples-widget-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  color: var(--navy);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 12px 18px 12px 16px;
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-med);
  transition: transform var(--dur-sm) var(--ease), border-color var(--dur-sm) var(--ease);
}
.samples-widget-btn:hover { transform: translateY(-2px); border-color: var(--gold); }
.samples-widget-btn svg { width: 18px; height: 18px; color: var(--blue); flex-shrink: 0; }
.samples-widget-count {
  background: var(--rust);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 800;
  border-radius: 50%;
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.samples-widget-panel {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 0;
  width: 300px;
  max-width: calc(100vw - 48px);
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-med);
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity var(--dur-sm) var(--ease), transform var(--dur-sm) var(--ease), visibility var(--dur-sm);
}
.samples-widget.open .samples-widget-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.samples-widget-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 800;
  color: var(--navy);
  font-size: 0.92rem;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.samples-widget-limit { font-size: 0.76rem; font-weight: 700; color: var(--ink-soft); }
.samples-widget-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 260px;
  overflow-y: auto;
  margin-bottom: 12px;
}
.samples-widget-empty {
  font-size: 0.82rem;
  color: var(--ink-soft);
  padding: 6px 2px 10px;
  line-height: 1.5;
}
.samples-widget-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.samples-widget-item-swatch {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--paper-alt);
  display: inline-block;
}
.samples-widget-item-info { flex: 1; min-width: 0; }
.samples-widget-item-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.samples-widget-item-sub {
  font-size: 0.74rem;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.samples-widget-item-remove {
  background: none;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
}
.samples-widget-item-remove:hover { color: var(--rust); }
.samples-widget-cart-link { display: block; width: 100%; text-align: center; }
@media (max-width: 640px) {
  .samples-widget { left: 16px; bottom: 16px; }
  .samples-widget.samples-widget-raised { bottom: 88px; }
  .samples-widget-btn .samples-widget-label { display: none; }
  .samples-widget-btn { padding: 12px; }
  .samples-widget-panel { width: 260px; }
}

/* Related products row */
.pdp-related { margin-top: var(--gap-md); padding-top: var(--gap-md); border-top: 1px solid var(--line); }
.pdp-related h3 { font-size: 1.2rem; font-weight: 800; color: var(--navy); margin-bottom: 18px; }
.pdp-related-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.pdp-related-card { display: block; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; transition: box-shadow var(--dur-sm) var(--ease); }
.pdp-related-card:hover { box-shadow: var(--shadow-med); }
.pdp-related-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.pdp-related-card .info { padding: 10px 12px; }
.pdp-related-card h4 { font-size: 0.85rem; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.pdp-related-card .from { font-size: 0.8rem; color: var(--ink-soft); }
@media (max-width: 900px) {
  .pdp-step-body { padding-left: 0; }
  .pdp-related-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Reviews — rating breakdown + filter/sort
   ========================================================================== */
.rating-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--gap-xl);
  align-items: center;
  margin-bottom: var(--gap-lg);
}
.rating-summary-score { text-align: center; }
.rating-summary-score .big { font-family: var(--font-display); font-size: 3.2rem; font-weight: 600; color: var(--navy); line-height: 1; }
.rating-summary-score .stars { color: var(--gold); margin: 8px 0; }
.rating-summary-score .count { font-size: 0.85rem; color: var(--ink-soft); }
.rating-bars { display: flex; flex-direction: column; gap: 8px; }
.rating-bar-row { display: grid; grid-template-columns: 50px 1fr 40px; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--ink-soft); }
.rating-bar-track { height: 8px; background: var(--paper-alt); border-radius: 999px; overflow: hidden; }
.rating-bar-fill { height: 100%; background: var(--gold); border-radius: 999px; }

.review-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: var(--gap-md);
  margin-bottom: var(--gap-md);
  border-bottom: 1px solid var(--line);
}
.review-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.review-filters button {
  padding: 7px 14px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-soft);
  transition: all var(--dur-sm) var(--ease);
}
.review-filters button.active, .review-filters button:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
.review-sort select {
  padding: 8px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  background: var(--white);
}
.review-item { padding: 20px 0; border-bottom: 1px solid var(--line); }
.review-item-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.review-item .stars { color: var(--gold); font-size: 0.9rem; }
.review-item .review-date { font-size: 0.8rem; color: var(--ink-soft); }
.review-item h4 { font-size: 0.98rem; margin-bottom: 6px; color: var(--navy); }
.review-item p { font-size: 0.92rem; margin-bottom: 10px; }
.review-item-foot { display: flex; align-items: center; gap: 14px; font-size: 0.82rem; color: var(--ink-soft); }
.review-verified { color: var(--blue); font-weight: 700; display: flex; align-items: center; gap: 4px; }
.helpful-btn { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.helpful-btn svg { width: 14px; height: 14px; }
.helpful-btn:hover { color: var(--navy); }

/* Trust / security badges */
.security-row {
  display: flex;
  justify-content: center;
  gap: var(--gap-lg);
  flex-wrap: wrap;
  padding: var(--gap-md) 0;
}
.security-badge { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); }
.security-badge svg { width: 20px; height: 20px; color: var(--blue); }

/* ==========================================================================
   Cart & Checkout
   ========================================================================== */
.cart-table { width: 100%; border-collapse: collapse; }
.cart-row { display: grid; grid-template-columns: 90px 1fr auto auto auto; gap: var(--gap-md); align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
.cart-row-img { width: 84px; height: 74px; background: var(--paper-alt); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); overflow: hidden; gap: 2px; }
.cart-row-img svg { width: 60%; height: auto; color: var(--navy); }
.cart-row-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-row-img.dual img,
.cart-row-img.dual .cart-row-img-swatch { width: 50%; }
.cart-row-img-swatch { display: block; width: 100%; height: 100%; }
.cart-row-name { font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.cart-row-room { font-weight: 600; color: var(--ink-soft); }
.cart-row-editable { cursor: pointer; border-radius: var(--radius-sm); transition: opacity 0.15s ease; }
.cart-row-editable:hover { opacity: 0.72; }
.cart-row-editable:hover .cart-row-name { text-decoration: underline; }
.cart-row-config { font-size: 0.82rem; color: var(--ink-soft); }
.qty-stepper { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--radius-sm); }
.qty-stepper button { width: 30px; height: 30px; font-weight: 700; color: var(--navy); }
.qty-stepper span { width: 30px; text-align: center; font-weight: 700; }
.cart-row-price { font-weight: 800; color: var(--ink); white-space: nowrap; }
.cart-row-remove { color: var(--red); font-size: 0.8rem; font-weight: 700; }
.cart-row-notes { grid-column: 1 / -1; margin-top: 4px; }
.cart-row-notes-label { display: flex; align-items: center; gap: 5px; font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 6px; }
.cart-row-notes-input {
  width: 100%; min-height: 48px; padding: 8px 10px; font-family: inherit; font-size: 0.85rem;
  color: var(--ink); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  resize: vertical; background: var(--white);
}
.cart-row-notes-input:focus { outline: none; border-color: var(--navy); }
.cart-empty { text-align: center; padding: var(--gap-xl) 0; }
.cart-empty svg { width: 64px; height: 64px; color: var(--line); margin: 0 auto 20px; }

.summary-card { background: var(--paper-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--gap-md); position: sticky; top: 136px; } /* header (100px) + promo bar (36px) */
.summary-row { display: flex; justify-content: space-between; font-size: 0.92rem; padding: 8px 0; }
.summary-row.total { font-size: 1.15rem; font-weight: 800; color: var(--navy); border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 14px; }
.promo-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.promo-label { font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 8px; display: block; }
.promo-input-row { display: flex; gap: 8px; margin: 0; }
.promo-input-row input { flex: 1; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); }
.promo-msg { font-size: 0.82rem; margin: 8px 0 0; }

.checkout-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--gap-xl); align-items: start; }
.checkout-section { margin-bottom: var(--gap-lg); }
.checkout-section h3 { margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.checkout-step-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--navy); color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 800; flex-shrink: 0;
}
.payment-method-row { display: flex; flex-direction: column; gap: 10px; }
.payment-method {
  display: flex; align-items: center; gap: 12px;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px 16px; cursor: pointer; transition: all var(--dur-sm) var(--ease);
}
.payment-method.active { border-color: var(--navy); background: var(--paper-alt); }
.payment-method input { accent-color: var(--navy); }
.payment-note { font-size: 0.85rem; color: var(--ink-soft); padding: 12px 16px; background: var(--paper-alt); border-radius: var(--radius-sm); margin-top: 8px; }
.order-confirm-icon { width: 72px; height: 72px; border-radius: 50%; background: #e7f4ea; color: #2f8f4e; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; }
.order-confirm-icon svg { width: 36px; height: 36px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .hero-visual { width: 100%; max-width: 420px; margin: 0 auto; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .popular-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .fav-grid { grid-template-columns: repeat(3, 1fr); }
  .pricing-grid, .values-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-card { width: 300px; }
  .trust-strip { grid-template-columns: repeat(2, 1fr); }
  .trust-item:nth-child(odd) { border-left: none; padding-left: 0; }
  .trust-item:nth-child(-n+2) { border-top: none; }
  .trust-item:nth-child(n+3) { border-top: 1px solid rgba(20,30,60,0.08); padding-top: 8px; }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: var(--gap-lg); }
  .split-reverse .split-visual { order: 0; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .contact-wrap { grid-template-columns: 1fr; }
  .pdp-wrap { grid-template-columns: minmax(0, 1fr); }
  .pdp-gallery { position: static; }
  .pdp-specs-grid { grid-template-columns: 1fr; }
  .rating-summary { grid-template-columns: 1fr; text-align: center; }
  .checkout-grid { grid-template-columns: 1fr; }
  .summary-card { position: static; }
  .cart-row { grid-template-columns: 60px 1fr; grid-template-areas: "img name" "img price"; }
  .cart-row-notes { grid-column: 1 / -1; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 24px 20px;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-med);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 0; width: 100%; border-bottom: 1px solid var(--line); }
  .nav-toggle { display: flex; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (max-width: 640px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .popular-cat-grid { grid-template-columns: repeat(2, 1fr); gap: var(--gap-md); }
  .fav-grid { grid-template-columns: repeat(2, 1fr); gap: var(--gap-md); }
  .pricing-grid, .values-grid, .steps-grid, .stat-row { grid-template-columns: 1fr; }
  .testimonial-card { width: 260px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .nav-phone { display: none; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .pdp-dim-row { grid-template-columns: 1fr 1fr; }
  .pdp-dim-row label { grid-column: 1 / -1; }
  .pdp-thumbs { grid-template-columns: repeat(4, 1fr); }
  .pdp-thumbs.pdp-thumbs--scroll .pdp-thumb { flex: 0 0 calc((100% - 24px) / 4); }
}

/* ---- Warranty page: coverage table + safety callout ---- */
.warranty-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.warranty-table th, .warranty-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.warranty-table th { background: var(--paper-alt); color: var(--navy); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.02em; }
.warranty-table td:last-child, .warranty-table th:last-child { font-weight: 700; color: var(--ink); white-space: nowrap; }
.warranty-table tr:last-child td { border-bottom: none; }
.warranty-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fdf1e0;
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
}
.warranty-callout svg { color: #8a5a12; flex-shrink: 0; margin-top: 2px; }
.warranty-callout p { font-size: 0.9rem; line-height: 1.6; color: #6e4a10; }
@media (max-width: 640px) {
  .warranty-table { font-size: 0.82rem; }
  .warranty-table th, .warranty-table td { padding: 8px 10px; }
}

/* ==========================================================================
   RICH / MODERN MOCKUP — additive layer on top of the existing bright
   navy / gold / rust palette. Nothing here changes a color token; it adds
   depth (shadows, glass, gradients), motion (hover lift, button bloom),
   and editorial typography treatment (serif pricing, gold accent rules).
   ========================================================================== */

/* ---- More breathing room between sections ---- */
:root {
  --gap-xl: 128px;
  --gap-lg: 64px;
}

/* ---- Sticky header ---- */
/* Was a translucent "frosted glass" header (background: rgba + backdrop-
   filter: blur). Removed the blur — backdrop-filter forces the browser to
   continuously re-blur whatever is behind the header (the autoplay hero
   video, in particular) every single frame, and with the header now
   permanently sticky for the entire scroll session (see .header-stack
   above), that constant re-blur was heavy enough to cause real scroll
   jank: fuzzy rendering, stalled scrolling, and the page appearing to
   "catch up"/snap once the browser's render queue cleared. Solid
   background removes that cost entirely with no loss other than the
   see-through effect. */
.site-header {
  background: var(--white);
  box-shadow: 0 1px 0 var(--line), 0 16px 30px -22px rgba(3, 31, 115, 0.28);
}
.site-header.scrolled {
  background: var(--white);
}

/* ---- Editorial gold accent rule under section headlines ---- */
.section-header h2,
.split-content h2 {
  position: relative;
  padding-bottom: 20px;
}
.section-header h2::after,
.split-content h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--rust));
}
.section-header.center h2::after {
  left: 50%;
  transform: translateX(-50%);
}
.bg-ink .section-header h2::after,
.bg-ink .split-content h2::after {
  background: linear-gradient(90deg, var(--gold), #ffe27a);
}

/* ---- Split sections: restore breathing room between the accent rule,
   copy, and CTA — the h2's padding-bottom put the underline flush against
   the paragraph with no gap. ---- */
.split-content p {
  margin: 18px 0 28px;
  line-height: 1.7;
}
.split-content ul.checklist {
  margin-top: 0;
}

/* ---- Hero: deeper gradient, diagonal sheen, bottom vignette on photos ---- */
.hero-visual {
  background: linear-gradient(155deg, var(--navy-deep) 0%, var(--navy) 45%, var(--blue) 100%);
  box-shadow: var(--shadow-med), 0 34px 70px -26px rgba(3, 31, 115, 0.4);
}
.hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 38%);
}
.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 31, 115, 0) 58%, rgba(3, 20, 66, 0.4) 100%);
}

/* ---- Buttons: hover lift + shadow bloom ---- */
.btn {
  transition: background var(--dur-sm) var(--ease), color var(--dur-sm) var(--ease),
    transform var(--dur-sm) var(--ease), box-shadow var(--dur-sm) var(--ease);
}
.btn-primary {
  box-shadow: 0 4px 14px rgba(192, 87, 23, 0.28);
}
.btn-primary:hover {
  background: var(--rust-dark);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -6px rgba(192, 87, 23, 0.42);
}
.btn-outline:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
.btn-light:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -6px rgba(3, 31, 115, 0.25);
}

/* ---- Popular category cards: deeper hover elevation ---- */
.popular-cat-visual {
  box-shadow: 0 2px 14px rgba(3, 31, 115, 0.07);
}
.popular-cat-card:hover .popular-cat-visual {
  transform: translateY(-10px);
  box-shadow: 0 26px 50px -18px rgba(3, 31, 115, 0.32);
}

/* ---- Customer favorites: elevation + ribbon badge + serif pricing ---- */
.fav-visual {
  transition: box-shadow var(--dur-md) var(--ease), transform var(--dur-md) var(--ease);
}
.fav-card:hover .fav-visual {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px -16px rgba(3, 31, 115, 0.3);
}
.fav-badge {
  background: linear-gradient(135deg, #ffdb52, var(--gold));
  color: var(--navy-deep);
  box-shadow: 0 4px 10px rgba(252, 195, 0, 0.45);
  border-radius: 3px 3px 3px 0;
}
.fav-badge::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 5px 8px;
  border-color: transparent transparent transparent #a87c00;
}
.fav-price {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--navy);
}
.fav-price .was {
  font-family: var(--font-body);
  font-size: 0.85rem;
}

/* ---- Category grid (cat-card) elevation to match ---- */
.cat-card:hover .cat-visual {
  box-shadow: 0 20px 40px -16px rgba(3, 31, 115, 0.28);
  transform: translateY(-4px);
}
.cat-card .cat-visual {
  transition: box-shadow var(--dur-md) var(--ease), transform var(--dur-md) var(--ease);
}

/* ---- Trust strip: subtle card lift instead of flat cream band ---- */
.trust-strip {
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(3, 31, 115, 0.06);
}

/* ---- Dark editorial spotlight section — a compact, centered card
   rather than a full-bleed navy bar, so it reads as a curated
   highlight instead of a heavy horizontal slab with empty space
   trailing off to the right. ---- */
.editorial-spotlight { background: none; }
/* Narrow banner spacing — this section exists to divide the homepage
   between the Customer Favorites grid above and Motorized Split below,
   not to act as another full-height hero moment, so it uses far less
   vertical breathing room than the default .section (--gap-xl = 112px). */
/* Grid matches the 6-column .fav-grid above exactly, so the panel's
   edges (grid-column 2/6) land precisely on the seam between card 1/2
   (Roller Shades) and card 5/6 (PVC Verticals) — same column tracks,
   same gap, same container. */
.editorial-spotlight .container-wide.section {
  padding: 40px 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
}
.editorial-spotlight-panel {
  grid-column: 2 / 6;
  position: relative;
  text-align: center;
  background: linear-gradient(155deg, var(--navy-deep) 0%, var(--navy) 100%);
  color: var(--white);
  border-radius: 16px;
  padding: 26px 44px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(3, 31, 115, 0.18);
}
.editorial-spotlight-panel::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -12%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(252, 195, 0, 0.16) 0%, rgba(252, 195, 0, 0) 70%);
  pointer-events: none;
}
.editorial-spotlight .eyebrow { color: var(--gold); }
.editorial-spotlight .eyebrow::before { background: var(--gold); }
.editorial-spotlight h2 {
  color: var(--white);
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  margin-bottom: 8px;
}
.editorial-spotlight h2::after { background: linear-gradient(90deg, var(--gold), #ffe27a); }
.editorial-spotlight p { color: rgba(255, 255, 255, 0.78); }
.editorial-spotlight-quote {
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 1.05vw, 1rem);
  font-weight: 500;
  line-height: 1.5;
  max-width: 540px;
  margin: 8px auto 18px;
}
.editorial-spotlight-quote span { color: var(--gold); }
.editorial-stats {
  display: flex;
  justify-content: center;
  gap: var(--gap-md);
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.editorial-stats div strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--gold);
}
.editorial-stats div span { font-size: 0.74rem; color: rgba(255, 255, 255, 0.7); }

/* Trust strip, re-homed inside the navy Editorial Spotlight panel (was its
   own cream-background section above the fold). Sized like a proper trust
   badge — a long, skinny single-row bar — rather than tall stacked cards:
   icon sits beside its text (not above it), padding is tight, and the row
   stays wide/full-span so it reads as one slim strip instead of a block. */
.editorial-spotlight-panel .trust-strip {
  background: none;
  border-radius: 0;
  margin: 0;
  padding: 0;
  gap: 10px;
}
.editorial-spotlight-panel .trust-strip-divided {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 20px;
  margin-top: 16px;
}
.editorial-spotlight-panel .trust-item {
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 12px;
  padding: 4px 0;
}
.editorial-spotlight-panel .trust-item + .trust-item {
  border-left: none;
  padding-left: 12px;
}
.editorial-spotlight-panel .trust-item .icon-circle {
  width: 40px;
  height: 40px;
  color: var(--gold);
  background: rgba(252, 195, 0, 0.12);
  border: 1px solid rgba(252, 195, 0, 0.28);
}
.editorial-spotlight-panel .trust-item .icon-circle svg { width: 46%; height: 46%; }
.editorial-spotlight-panel .trust-item strong {
  display: block;
  font-size: 0.88rem;
  color: var(--white);
  line-height: 1.2;
}
.editorial-spotlight-panel .trust-item span {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.3;
}

@media (max-width: 780px) {
  .editorial-spotlight .container-wide.section { padding: 28px 0; }
  .editorial-spotlight-panel { padding: 24px 20px; border-radius: 14px; }
  .editorial-stats { gap: var(--gap-sm); }
}
@media (max-width: 560px) {
  .editorial-spotlight-panel .trust-item span { max-width: 150px; }
}
@media (max-width: 560px) {
  .editorial-spotlight-panel .trust-strip { grid-template-columns: repeat(2, 1fr); row-gap: var(--gap-md); }
  .editorial-spotlight-panel .trust-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }
  .editorial-spotlight-panel .trust-item + .trust-item { border-left: none; padding-left: 0; }
}

/* ---- Hero headline: editorial refinement (fixes awkward line-wrap,
   tightens rhythm, adds a bespoke accent word) ---- */
.hero .eyebrow { margin-bottom: 22px; }
.hero h1 {
  font-size: clamp(2.9rem, 5.6vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 30px;
  max-width: 620px;
}
.hero h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--rust);
}
.hero h1 .accent-word {
  color: var(--rust);
}
.hero p.lead {
  margin-top: 0;
  line-height: 1.7;
}

/* ---- Popular categories: inline "More Categories" expand ---- */
.popular-cat-grid-extra {
  margin-top: var(--gap-md);
}
.popular-cat-grid-extra[hidden] {
  display: none;
}

/* ---- Products & Pricing page: match the rich card treatment ---- */
.price-card {
  transition: box-shadow var(--dur-md) var(--ease), transform var(--dur-md) var(--ease);
}
.price-card:hover {
  box-shadow: 0 24px 46px -18px rgba(3, 31, 115, 0.28);
  transform: translateY(-6px);
}
.price-visual { overflow: hidden; }
.price-visual img { transition: transform 0.5s var(--ease); }
.price-card:hover .price-visual img { transform: scale(1.06); }
.price-card .sale-badge {
  background: linear-gradient(135deg, #ffdb52, var(--gold));
  color: var(--navy-deep);
  box-shadow: 0 4px 10px rgba(252, 195, 0, 0.45);
  border-radius: 3px 3px 3px 0;
}
.price-card .sale-badge::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 5px 8px;
  border-color: transparent transparent transparent #a87c00;
}
.price-value {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 600;
  color: var(--navy);
}
.price-value .was { font-family: var(--font-body); }
.filter-pill { transition: all var(--dur-sm) var(--ease), transform var(--dur-sm) var(--ease); }
.filter-pill:hover, .filter-pill.active {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -8px rgba(48, 96, 175, 0.45);
}
.popular-cat-more button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--blue);
  font-size: 0.95rem;
  font-family: inherit;
  cursor: pointer;
}
.popular-cat-more button svg {
  transition: transform var(--dur-sm) var(--ease);
}
.popular-cat-more button[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* ==========================================================================
   Header refinement: collapse the promo bar / nav / subnav / utility bar
   from four stacked solid-color bands into one cohesive glass panel, with
   a lighter-weight header CTA. (The promo bar itself was made deliberately
   QUIET here in an earlier pass -- that's since been reversed back to a
   bold, attention-grabbing sale banner up in its main ".promo-bar" rule;
   nothing here should re-mute it.)
   ========================================================================== */

/* Subnav merges into the same glass surface as the header instead of a
   separate solid blue band — one continuous panel, two rows. */
.subnav {
  background: transparent;
  border-top: 1px solid var(--line);
}
.subnav a,
.subnav-label {
  color: var(--navy);
}
.subnav a:hover,
.subnav a.active,
.subnav-item:hover .subnav-label,
.subnav-item:focus-within .subnav-label {
  color: var(--rust);
  border-color: var(--rust);
}
.subnav-caret { color: var(--navy); }
.subnav-item:hover .subnav-label .subnav-caret,
.subnav-item:focus-within .subnav-label .subnav-caret {
  color: var(--rust);
}

/* Header CTA: ghost/outline in rust rather than a second solid block
   competing with primary buttons elsewhere on the page. */
.btn-outline-rust {
  background: transparent;
  border: 1.5px solid var(--rust);
  color: var(--rust);
}
.btn-outline-rust:hover {
  background: var(--rust);
  color: var(--white);
}

/* Order-status button — sits beside the cart icon since both are
   "your order" actions. Built to later open an order-lookup modal
   (enter order number, see live status) in place of the contact link. */
.nav-order-status-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  transition: border-color var(--dur-sm) var(--ease), color var(--dur-sm) var(--ease), background var(--dur-sm) var(--ease);
}
.nav-order-status-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.nav-order-status-btn:hover {
  border-color: var(--rust);
  color: var(--rust);
  background: var(--cream);
}
@media (max-width: 980px) {
  .nav-order-status-btn span { display: none; }
  .nav-order-status-btn { padding: 8px; }
}
@media (max-width: 640px) {
  .nav-order-status-btn { display: none; }
}

/* ---- Nav CTA: full label on desktop, short label once space is tight ---- */
.nav-cta-short { display: none; }
@media (max-width: 640px) {
  .nav { gap: 8px; padding: 14px 16px; flex-wrap: nowrap; }
  .logo-tagline { display: none; }
  .logo-mark-img { height: 28px; }
  .logo-title { font-size: 1.05rem; }
  .nav-actions { gap: 8px; }
  .nav-cta-full { display: none; }
  .nav-cta-short { display: inline; }
  .nav-actions .btn-primary.btn-sm { padding: 9px 12px; font-size: 0.8rem; white-space: nowrap; }
}

/* ==========================================================================
   Site polish — motion, glow states, gradients, fly-to-cart, shimmer,
   recently-viewed strip, compare slider. All additive / scoped to new or
   already-shared classes so nothing above this block is touched.
   ========================================================================== */

/* ---- Hero slideshow: subtle parallax handled by JS setting a transform
   on the active slide's image; this just declares the property so the
   browser promotes it to its own layer instead of janking on scroll. ---- */
.hero-slide img { will-change: transform; }

/* ---- Configurator: fade instead of snap when a step unlocks ---- */
.pdp-step-locked { transition: opacity 0.35s ease, filter 0.35s ease; }

/* ---- PDP gallery: cross-fade the hero photo on thumbnail/arrow click
   instead of an instant src swap ---- */
#pdpMainImg { transition: opacity 0.16s ease; }
.pdp-img-fading { opacity: 0; }

/* ---- Swatch / option selected states: soft glow + scale instead of a
   flat border-color swap ---- */
.swatch.active {
  transform: scale(1.1);
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--navy), 0 0 14px rgba(3, 31, 115, 0.35);
}
.avail-swatch-frame { transition: border-color var(--dur-sm) var(--ease), box-shadow var(--dur-sm) var(--ease), transform var(--dur-sm) var(--ease); }
.avail-swatch-card.active .avail-swatch-frame {
  box-shadow: 0 0 0 3px rgba(3, 31, 115, 0.14);
  transform: scale(1.02);
}
.illus-card {
  transition: border-color var(--dur-sm) var(--ease), border-width var(--dur-sm) var(--ease),
    background var(--dur-sm) var(--ease), box-shadow var(--dur-sm) var(--ease), transform var(--dur-sm) var(--ease);
}
/* Single, unified "this card is selected" treatment — applies identically to
   every illustrated option card on every product page (lift-style, mount,
   headrail, valance, opacity, liner, etc.), regardless of which subtype
   class it also carries. Only the border/tint COLOR is allowed to vary per
   subtype (set above) so themed sections like Mount Type can keep their own
   accent color; the weight/prominence is always the same. Same-specificity
   rules cascade by source order, and this is deliberately the LAST such rule
   in the file so it always wins the shared properties below. */
.illus-card.active {
  border-width: 3px;
  box-shadow: 0 0 0 4px rgba(3, 31, 115, 0.16), 0 10px 22px -8px rgba(3, 31, 115, 0.45);
  transform: translateY(-2px);
}
.illus-card-mount.active {
  box-shadow: 0 0 0 4px rgba(150, 52, 42, 0.16), 0 10px 22px -8px rgba(150, 52, 42, 0.4);
}

/* ---- Buttons: gradient sweep on hover instead of a flat color swap ---- */
.btn-primary {
  background: linear-gradient(135deg, var(--rust) 0%, var(--rust-dark) 100%);
  background-size: 165% 165%;
  background-position: 0% 0%;
  transition: background-position 0.35s ease, transform var(--dur-sm) var(--ease), box-shadow var(--dur-sm) var(--ease);
}
.btn-primary:hover { background-position: 100% 100%; }

/* ---- Fly-to-cart animation ---- */
.fly-to-cart {
  position: fixed;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  z-index: 9999;
  pointer-events: none;
  background: var(--white);
  box-shadow: var(--shadow-med);
  border: 2px solid var(--white);
  transition: transform 0.55s cubic-bezier(0.28, 0.85, 0.35, 1), opacity 0.55s ease;
}
.fly-to-cart img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fly-to-cart .fly-dot { width: 100%; height: 100%; background: var(--rust); }
@keyframes cartBump {
  0% { transform: scale(1); }
  35% { transform: scale(1.3); }
  65% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.cart-link.cart-bump svg,
.cart-link.cart-bump .cart-badge { animation: cartBump 0.4s ease; }

/* ---- Sticky mini add-to-cart bar (built by JS on PDP pages) ----
   Was a translucent (0.82 alpha) bar with backdrop-filter: blur(14px).
   This bar sits fixed to the bottom of every PDP and slides in/out with an
   animated `transform` as the buyer scrolls past the price panel — pairing
   a per-frame transform ANIMATION with a backdrop blur is one of the most
   expensive combinations in the browser's compositor, since it forces a
   fresh blur of everything scrolling underneath on every single frame of
   the slide-in AND for as long as it stays visible while the page scrolls.
   That's what caused the reported "fuzzy / stuck / jumps to the bottom"
   scroll glitch on product config pages specifically. Switched to a solid
   background so the slide/scroll compositing stays cheap — same fix
   applied earlier to .site-header for the same reason. */
.pdp-sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(3, 31, 115, 0.12);
  padding: 12px 24px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.pdp-sticky-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--blue), var(--navy));
  opacity: 0.7;
}
.pdp-sticky-bar.visible { transform: translateY(0); }
.pdp-sticky-bar-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.pdp-sticky-thumb {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--paper-alt);
}
.pdp-sticky-info { flex: 1; min-width: 0; }
.pdp-sticky-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.pdp-sticky-price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pdp-sticky-price { font-weight: 800; font-size: 1rem; color: var(--rust); }
.pdp-sticky-was { font-size: 0.82rem; color: var(--ink-soft); text-decoration: line-through; opacity: 0.75; }
.pdp-sticky-save {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--white);
  background: var(--red);
  border-radius: 999px;
  padding: 2px 8px;
  letter-spacing: 0.02em;
}
.pdp-sticky-bar .btn { flex-shrink: 0; }
@media (max-width: 640px) {
  .pdp-sticky-name { display: none; }
  .pdp-sticky-bar { padding: 10px 16px; }
  .pdp-sticky-was { display: none !important; }
}

/* ---- Floating running-total widget (built by JS on PDP pages) ----
   Small card pinned to the bottom-right corner for the buyer's ENTIRE time
   on the page — unlike .pdp-sticky-bar above, this is never scroll-gated,
   so the current total is always visible while clicking through options
   without needing to scroll up to the price ladder or down to the bar.
   Sits ABOVE the "Need some help?" chat bubble (also bottom-right, see
   .help-bubble-btn) rather than sharing its exact spot, and picks up a
   warm white-card look (gold-ringed icon, rust price) instead of a flat
   solid-colour pill so it feels like part of the site rather than a
   generic notification chip. */
.pdp-floating-total {
  position: fixed;
  right: 20px;
  bottom: 84px;
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  color: var(--navy);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 18px 8px 8px;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(3, 31, 115, 0.3);
  transition: bottom 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  animation: pdpFloatingTotalIn 0.4s ease;
}
.pdp-floating-total:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 14px 28px -10px rgba(3, 31, 115, 0.4);
}
.pdp-floating-total-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--rust);
}
.pdp-floating-total-icon svg { width: 15px; height: 15px; }
.pdp-floating-total-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.pdp-floating-total-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}
.pdp-floating-total-price { font-size: 1.1rem; font-weight: 800; color: var(--rust); }
/* Shift up further out of the way once the full-width sticky add-to-cart
   bar is also visible (buyer scrolled past the main price panel), or the
   sitewide "Resume your configuration" bar is up (which also pushes the
   chat bubble itself higher) -- so nothing ever overlaps. */
body:has(.pdp-sticky-bar.visible) .pdp-floating-total { bottom: 154px; }
body.has-resume-config-bar .pdp-floating-total { bottom: 150px; }
body.has-resume-config-bar:has(.pdp-sticky-bar.visible) .pdp-floating-total { bottom: 200px; }
@keyframes pdpFloatingTotalIn {
  from { opacity: 0; transform: translateY(14px) scale(0.9); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 640px) {
  .pdp-floating-total { right: 14px; bottom: 76px; padding: 6px 14px 6px 6px; gap: 8px; }
  .pdp-floating-total-icon { width: 26px; height: 26px; }
  .pdp-floating-total-icon svg { width: 13px; height: 13px; }
  .pdp-floating-total-price { font-size: 0.92rem; }
  body:has(.pdp-sticky-bar.visible) .pdp-floating-total { bottom: 138px; }
  body.has-resume-config-bar .pdp-floating-total { bottom: 134px; }
  body.has-resume-config-bar:has(.pdp-sticky-bar.visible) .pdp-floating-total { bottom: 180px; }
}

/* ---- Price shimmer pulse on recalculation ---- */
@keyframes pricePulse {
  0% { background-position: -150% 0; }
  100% { background-position: 250% 0; }
}
.price-pulse {
  background-image: linear-gradient(90deg, transparent 0%, rgba(192, 87, 23, 0.25) 45%, rgba(192, 87, 23, 0.25) 55%, transparent 100%);
  background-size: 250% 100%;
  animation: pricePulse 0.6s ease;
  border-radius: 4px;
}

/* ---- Testimonial avatars: cycle navy/rust/gold gradients instead of
   every avatar being the same flat navy circle ---- */
.testimonial-card:nth-child(3n+2) .avatar {
  background: linear-gradient(155deg, var(--rust-dark) 0%, var(--rust) 100%);
  box-shadow: 0 0 0 3px rgba(192, 87, 23, 0.16);
}
.testimonial-card:nth-child(3n) .avatar {
  background: linear-gradient(155deg, #8a6d00 0%, var(--gold) 100%);
  box-shadow: 0 0 0 3px rgba(252, 195, 0, 0.22);
  color: var(--navy);
}

/* ---- Cart empty state: icon badge instead of a bare line-icon ---- */
.cart-empty-icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--paper-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
}
.cart-empty-icon svg { width: 40px; height: 40px; color: var(--navy); margin: 0; }
.cart-empty .btn-outline { margin-left: 10px; }
@media (max-width: 480px) {
  .cart-empty .btn-outline { margin-left: 0; margin-top: 10px; }
}

/* ---- Recently viewed strip (section injected by JS above the footer) ---- */
.recently-viewed-section { border-top: 1px solid var(--line); }
.recently-viewed-track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-md);
}
.rv-card { display: block; text-decoration: none; color: inherit; flex: 0 0 240px; width: 240px; }
.rv-card-img {
  aspect-ratio: 4/3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--paper-alt);
  margin-bottom: 8px;
  box-shadow: var(--shadow-soft);
}
.rv-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; display: block; }
.rv-card:hover .rv-card-img img { transform: scale(1.06); }
.rv-card-name { font-size: 0.88rem; font-weight: 700; color: var(--navy); }
@media (max-width: 640px) {
  .rv-card { flex-basis: 42%; width: 42%; }
}

/* ---- Compare slider (real before/after footage only — see opera.html) ---- */
.compare-slider {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16/9;
  user-select: none;
  box-shadow: var(--shadow-soft);
  touch-action: pan-y;
}
.compare-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.compare-slider .compare-after { clip-path: inset(0 0 0 50%); }
.compare-slider .compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: var(--white);
  transform: translateX(-50%);
  cursor: ew-resize;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.compare-slider .compare-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-med);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M8 7l-4 5 4 5M16 7l4 5-4 5' stroke='%23031f73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}
.compare-slider-label {
  position: absolute;
  bottom: 14px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(3, 31, 115, 0.72);
  padding: 5px 12px;
  border-radius: 999px;
}
.compare-slider-label.before { left: 14px; }
.compare-slider-label.after { right: 14px; }

/* ---- Product line comparison table (compare.html) ---- */
.compare-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  -webkit-overflow-scrolling: touch;
}
.compare-table { width: 100%; border-collapse: collapse; min-width: 1040px; table-layout: fixed; font-size: 0.9rem; }
.compare-table th, .compare-table td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: break-word; }
.compare-table thead th {
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  position: sticky;
  top: 0;
  white-space: normal;
  line-height: 1.25;
}
.compare-table tbody tr:nth-child(even) { background: var(--paper-alt); }
.compare-table tbody tr:hover { background: #eef1f7; }
.compare-table td:first-child, .compare-table th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--white);
  min-width: 190px;
}
.compare-table thead th:first-child { background: var(--navy); z-index: 2; }
.compare-table tbody tr:nth-child(even) td:first-child { background: var(--paper-alt); }
.compare-table-name { font-family: var(--font-display); font-weight: 700; color: var(--navy); font-size: 1rem; display: block; margin-bottom: 2px; }
.compare-table-price { color: var(--rust); font-weight: 800; font-size: 1.05rem; display: block; }
.compare-table-was { color: var(--ink-soft); font-weight: 500; font-size: 0.8rem; text-decoration: line-through; display: block; margin-top: 2px; }
.compare-table-starting { color: var(--ink-soft); font-weight: 500; font-size: 0.8rem; display: block; margin-top: 2px; }
.compare-table td ul { margin: 0; padding-left: 16px; }
.compare-table td ul li { margin-bottom: 4px; }
.compare-table .btn-sm { white-space: nowrap; }
.compare-table-options { margin: 0; color: var(--ink); }
.compare-table-options .sep { color: var(--ink-soft); }
.section-title-center {
  text-align: center;
  position: relative;
  padding-bottom: 20px;
  margin-bottom: var(--gap-lg);
}
.section-title-center::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 52px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--rust));
}
.compare-table-name-link { text-decoration: none; }
.compare-table-name-link:hover .compare-table-name,
.compare-table-name-link:focus-visible .compare-table-name { color: var(--rust); text-decoration: underline; }
.btn-glow-rust:hover {
  background: var(--rust);
  color: var(--white);
  border-color: var(--rust);
  box-shadow: 0 14px 28px -6px rgba(192, 87, 23, 0.42);
}

@media (prefers-reduced-motion: reduce) {
  .fly-to-cart, .cart-link.cart-bump svg, .cart-link.cart-bump .cart-badge,
  .price-pulse, .rv-card-img img, .btn-primary { animation: none !important; transition: none !important; }
}