/**
 * SHUTTER PROS — PHASE 4: Component CSSLayer (Revised — Directive Compliant)
 * shutter-pros-components.css
 */

:root {
  --sp-color-ink:     var(--color-foreground,    #15202B);
  --sp-color-paper:   var(--color-background,    #FFFFFF);
  --sp-color-mist:    var(--color-background-2,  #F4F5F7);
  --sp-color-accent:  var(--color-accent,        #8C2F2F);
  --sp-color-line:    var(--color-border,        #D8DCE1);
  --sp-color-muted:   var(--color-foreground-75, #5B6470);
  --sp-font-display:  var(--font-heading-family, Georgia, serif);
  --sp-font-body:     var(--font-body-family, Inter, system-ui, sans-serif);
  --sp-space-section-y:    var(--section-padding-top, 6rem);
  --sp-space-section-y-sm: var(--section-padding-bottom, 3rem);
}
.shutter-pros { font-family: var(--sp-font-body); color: var(--sp-color-ink); }
.sp-hero { position: relative; background-color: var(--sp-color-ink); background-size: cover; background-position: center; color: var(--sp-color-paper); padding-block: var(--sp-space-section-y); }
.sp-hero__inner { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; padding-inline: 1.5rem; max-width: 1200px; margin-inline: auto; width: 100%; }
.sp-hero__kicker { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; }
.sp-hero__headline { font-family: var(--sp-font-display); font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.1; max-width: 36rem; }
.sp-hero__subheadline { font-size: 1.125rem; line-height: 1.6; opacity: 0.85; max-width: 32rem; }
.sp-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem; }
.sp-cta { display: inline-flex; align-items: center; justify-content: center; padding: 0.875rem 1.75rem; font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.02em; text-decoration: none; border-radius: 2px; transition: opacity 0.15s ease, border-color 0.15s ease; cursor: pointer; }
.sp-cta--primary { background-color: var(--sp-color-accent); color: var(--sp-color-paper); border: 1px solid var(--sp-color-accent); }
.sp-cta--primary:hover { opacity: 0.88; }
.sp-cta--secondary { background-color: transparent; color: var(--sp-color-ink); border: 1px solid var(--sp-color-line); }
.sp-cta--secondary:hover { border-color: var(--sp-color-ink); }
.sp-hero .sp-cta--secondary { color: var(--sp-color-paper); border-color: rgba(255,255,255,0.4); }
.sp-hero .sp-cta--secondary:hover { border-color: var(--sp-color-paper); }
.sp-trust-ribbon { background-color: var(--sp-color-mist); border-top: 1px solid var(--sp-color-line); border-bottom: 1px solid var(--sp-color-line); padding-block: 1.25rem; }
.sp-trust-ribbon__list { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: center; list-style: none; margin: 0; padding-inline: 1.5rem; font-size: 0.8125rem; color: var(--sp-color-muted); }
.sp-trust-ribbon__item { display: flex; align-items: center; gap: 0.5rem; }
.sp-trust-ribbon__icon { color: var(--sp-color-accent); font-weight: 700; }
.sp-ecosystem-heritage { background-color: var(--sp-color-paper); padding-block: var(--sp-space-section-y); }
.sp-ecosystem-heritage__inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; padding-inline: 1.5rem; max-width: 1200px; margin-inline: auto; }
.sp-ecosystem-heritage__headline { font-family: var(--sp-font-display); font-size: clamp(1.5rem, 3vw, 2.25rem); }
.sp-ecosystem-heritage__body { max-width: 44rem; color: var(--sp-color-muted); line-height: 1.7; }
.sp-ecosystem-footnote__text { font-size: 0.8125rem; color: var(--sp-color-muted); font-style: italic; margin-top: 0.5rem; }
.sp-architectural-impact { background-color: var(--sp-color-mist); padding-block: var(--sp-space-section-y); }
.sp-architectural-impact__inner { max-width: 48rem; margin-inline: auto; text-align: center; display: flex; flex-direction: column; gap: 1rem; padding-inline: 1.5rem; }
.sp-architectural-impact__headline { font-family: var(--sp-font-display); font-size: clamp(1.5rem, 3vw, 2rem); }
.sp-architectural-impact__body { color: var(--sp-color-muted); line-height: 1.7; }
.sp-material-guide { padding-block: var(--sp-space-section-y); padding-inline: 1.5rem; max-width: 1200px; margin-inline: auto; }
.sp-material-guide__header { text-align: center; margin-bottom: 3rem; }
.sp-material-guide__headline { font-family: var(--sp-font-display); font-size: clamp(1.5rem, 3vw, 2.25rem); }
.sp-material-guide__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 640px) { .sp-material-guide__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sp-material-guide__grid { grid-template-columns: repeat(4, 1fr); } }
.sp-material-guide__card { border: 1px solid var(--sp-color-line); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.sp-material-guide__card-title { font-family: var(--sp-font-display); font-size: 1.125rem; font-weight: 600; }
.sp-material-guide__card-body { font-size: 0.875rem; color: var(--sp-color-muted); line-height: 1.6; }
.sp-bay-window { display: grid; grid-template-columns: 1fr; align-items: center; gap: 2.5rem; padding-block: var(--sp-space-section-y); padding-inline: 1.5rem; max-width: 1200px; margin-inline: auto; }
@media (min-width: 1024px) { .sp-bay-window { grid-template-columns: repeat(2, 1fr); } }
.sp-bay-window__media img { width: 100%; height: 100%; object-fit: cover; }
.sp-bay-window__content { display: flex; flex-direction: column; gap: 1rem; }
.sp-bay-window__headline { font-family: var(--sp-font-display); font-size: clamp(1.5rem, 3vw, 2rem); }
.sp-bay-window__body { color: var(--sp-color-muted); line-height: 1.7; }
@media (max-width: 639px) { .sp-hero, .sp-ecosystem-heritage, .sp-architectural-impact, .sp-material-guide, .sp-bay-window { padding-block: var(--sp-space-section-y-sm); } }
.sp-cta:focus-visible { outline: 2px solid var(--sp-color-accent); outline-offset: 3px; }

/* ===== Shared style-page system (hero, feature strip, benefits, spec explorer, gallery, collections, FAQ, final CTA) — used by all shutter-pros-style-*.liquid sections ===== */
/* RC1-005 (flagship master): Style Page on the FP5 visual language.
   Base .sp-cta, .sp-material-guide__* and .sp-hero__kicker come from
   assets/shutter-pros-components.css (global on shutter-pros templates).
   New below: hero, the "where it works" feature strip, numbered benefits,
   the grouped specification explorer, the editorial gallery, collections
   CTA, the FAQ accordion, and the final CTA. */

.sp-style-page { font-family: var(--font-primary); }
.sp-style-page section { scroll-margin-top: 80px; }
.sp-style-page .sp-material-guide__header { margin-bottom: 2.75rem; }
.sp-style-page .sp-material-guide__subheadline { max-width: 40rem; margin-left: auto; margin-right: auto; }
.sp-style-page .sp-material-guide { padding-block: 4.5rem; }
@media (max-width: 639px) { .sp-style-page .sp-material-guide { padding-block: 3rem; } }

/* 1. Hero */
.sp-style-hero { background: var(--sp-color-ink, #15202B); color: #fff; padding: 96px 24px 84px; text-align: center; }
.sp-style-hero__inner { max-width: 680px; margin: 0 auto; }
.sp-style-hero .sp-hero__kicker { color: var(--sp-color-accent, #8C2F2F); }
.sp-style-hero__headline { font-family: var(--sp-font-display); color: #fff; font-size: clamp(2.25rem, 4.5vw, 3.5rem); line-height: 1.12; margin: 14px 0 20px; font-weight: 400; }
.sp-style-hero__intro { font-size: 1.0625rem; line-height: 1.7; color: rgba(255,255,255,0.78); max-width: 540px; margin: 0 auto 32px; }

/* 2. Where it works — feature strip */
.sp-style-suited__feature { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 1080px; margin: 0 auto; }
@media (min-width: 640px) { .sp-style-suited__feature { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sp-style-suited__feature { grid-template-columns: repeat(5, 1fr); gap: 1.25rem; } }
.sp-style-suited__cell { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.85rem; padding: 2rem 1rem; background: #fff; border: 1px solid var(--sp-color-line, #D8DCE1); border-radius: 6px; transition: border-color 0.2s, transform 0.2s; }
.sp-style-suited__cell:hover { border-color: var(--sp-color-accent, #8C2F2F); transform: translateY(-2px); }
.sp-style-suited__icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; color: var(--sp-color-accent, #8C2F2F); }
.sp-style-suited__icon svg { width: 100%; height: 100%; }
.sp-style-suited__label { font-size: 0.9375rem; font-weight: 500; color: var(--sp-color-ink, #15202B); }
.sp-style-suited__note { text-align: center; font-size: 0.8125rem; color: var(--sp-color-muted, #5B6470); font-style: italic; margin: 1.75rem auto 0; max-width: 620px; }

/* 3. Why choose — numbered, aspirational */
.sp-style-benefits__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem 2rem; max-width: 1000px; margin: 0 auto; }
@media (min-width: 768px) { .sp-style-benefits__grid { grid-template-columns: repeat(2, 1fr); } }
.sp-style-benefit { padding-top: 1.25rem; border-top: 2px solid var(--sp-color-accent, #8C2F2F); }
.sp-style-benefit__num { font-family: var(--sp-font-display); font-size: 0.875rem; letter-spacing: 0.08em; color: var(--sp-color-accent, #8C2F2F); }
.sp-style-benefit__title { font-family: var(--sp-font-display); font-size: 1.375rem; font-weight: 400; margin: 0.65rem 0 0.5rem; color: var(--sp-color-ink, #15202B); }
.sp-style-benefit__body { font-size: 0.9375rem; line-height: 1.65; color: var(--sp-color-muted, #5B6470); margin: 0; }

/* 4. Specification explorer — grouped */
.sp-style-spec { display: grid; grid-template-columns: 1fr; gap: 1.25rem; max-width: 1100px; margin: 0 auto; }
@media (min-width: 900px) { .sp-style-spec { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.sp-style-spec__group { background: #fff; border: 1px solid var(--sp-color-line, #D8DCE1); border-radius: 8px; padding: 1.75rem 1.5rem; }
.sp-style-spec__grouphead { display: flex; align-items: baseline; gap: 0.75rem; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--sp-color-line, #e2e5e9); }
.sp-style-spec__groupnum { font-family: var(--sp-font-display); font-size: 0.8125rem; color: var(--sp-color-accent, #8C2F2F); letter-spacing: 0.08em; }
.sp-style-spec__grouptitle { font-family: var(--sp-font-display); font-size: 1.1875rem; font-weight: 400; margin: 0; color: var(--sp-color-ink, #15202B); }
.sp-style-spec__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.sp-style-spec__item { display: flex; flex-direction: column; gap: 0.15rem; }
.sp-style-spec__term { font-size: 0.9375rem; font-weight: 600; color: var(--sp-color-ink, #15202B); }
.sp-style-spec__desc { font-size: 0.8125rem; line-height: 1.5; color: var(--sp-color-muted, #5B6470); }
.sp-style-flex__note { text-align: center; font-size: 0.8125rem; color: var(--sp-color-muted, #5B6470); margin: 2rem auto 0; max-width: 660px; line-height: 1.6; }

/* 5. Gallery — editorial highlight (curated on mobile too) */
.sp-style-gallery__editorial { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; gap: 0.75rem; max-width: 1180px; margin: 0 auto; }
.sp-style-gallery__item { margin: 0; border-radius: 8px; overflow: hidden; background: #f0f2f5; }
.sp-style-gallery__item--1 { grid-column: span 2; grid-row: span 2; }
.sp-style-gallery__item--2 { grid-column: span 2; grid-row: span 1; }
.sp-style-gallery__item--3 { grid-column: span 1; grid-row: span 1; }
.sp-style-gallery__item--4 { grid-column: span 1; grid-row: span 1; }
.sp-style-gallery__item--5 { grid-column: span 2; grid-row: span 1; }
@media (min-width: 760px) {
  .sp-style-gallery__editorial { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 1.5rem; }
  .sp-style-gallery__item--1 { grid-column: span 2; grid-row: span 2; }
  .sp-style-gallery__item--2 { grid-column: span 2; grid-row: span 1; }
  .sp-style-gallery__item--3 { grid-column: span 1; grid-row: span 1; }
  .sp-style-gallery__item--4 { grid-column: span 1; grid-row: span 1; }
  .sp-style-gallery__item--5 { grid-column: span 2; grid-row: span 1; }
}
.sp-style-gallery__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-style-gallery__placeholder { width: 100%; height: 100%; min-height: 100%; background: linear-gradient(135deg, #f4f6f8 0%, #eceff2 100%); border: 1px solid var(--sp-color-line, #D8DCE1); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; text-align: center; }
.sp-style-gallery__placeholder .sp-placeholder__icon { font-size: 30px; color: #c2c8cf; }
.sp-style-gallery__placeholder .sp-placeholder__label { font-family: var(--font-primary); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: #9aa1a9; text-transform: uppercase; }

/* 6. Collections + centered quote CTA */
@media (min-width: 1024px) {
  .sp-material-guide__grid--five { grid-template-columns: repeat(5, 1fr); gap: 1.25rem; }
  .sp-material-guide__grid--five .sp-material-guide__card { padding: 1.5rem 1.25rem; }
}
.sp-style-collection { text-align: center; }
.sp-style-collections__cta-wrap { text-align: center; margin-top: 2.75rem; }

/* 7. FAQ accordion — mirrors shutter-pros-faq.liquid */
.sp-style-faq__list { max-width: 760px; margin: 0 auto; }
.sp-style-faq .sp-faq-item { border-bottom: 1px solid var(--sp-color-line, #e2e5e9); }
.sp-style-faq .sp-faq-item:last-child { border-bottom: none; }
.sp-style-faq .sp-faq-item__trigger { width: 100%; background: none; border: none; padding: 18px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 1rem; font-weight: 500; color: var(--sp-color-ink, #15202B); cursor: pointer; text-align: left; font-family: var(--font-primary); transition: color 0.2s; }
.sp-style-faq .sp-faq-item__trigger:hover,
.sp-style-faq .sp-faq-item--open .sp-faq-item__trigger { color: var(--sp-color-accent, #8C2F2F); }
.sp-style-faq .sp-faq-item__chevron { flex-shrink: 0; transition: transform 0.25s ease; color: var(--sp-color-accent, #8C2F2F); }
.sp-style-faq .sp-faq-item--open .sp-faq-item__chevron { transform: rotate(180deg); }
.sp-style-faq .sp-faq-item__body { padding: 0 0 24px; }
.sp-style-faq .sp-faq-item__body p { color: var(--sp-color-muted, #4b5563); line-height: 1.75; margin: 0; font-size: 0.9375rem; }

/* 8. Final CTA */
.sp-style-final-cta { background: var(--sp-color-ink, #15202B); padding: 96px 24px 80px; text-align: center; }
.sp-style-final-cta__inner { max-width: 600px; margin: 0 auto; }
.sp-style-final-cta__headline { font-family: var(--sp-font-display); font-size: clamp(1.75rem, 3.5vw, 2.5rem); color: #fff; font-weight: 400; margin-bottom: 14px; }
.sp-style-final-cta__intro { color: rgba(255,255,255,0.78); line-height: 1.7; margin-bottom: 30px; font-size: 1rem; }

/* ===== Shared shutter configurator (Full Height / Cafe / Tier-on-Tier / Solid Panel) =====
   Extracted so Cafe/Tier/Solid configurator sections can reference this
   stylesheet instead of re-pasting the same ~250 lines inline (see Task #14). */
.sp-fh-configurator{font-family:var(--sp-font-body);color:var(--sp-color-ink);padding-block:var(--sp-space-section-y);padding-inline:1.5rem;max-width:1200px;margin-inline:auto}
.sp-fh-intro{text-align:center;margin-bottom:2rem}
.sp-fh-heading{font-family:var(--sp-font-display);font-size:clamp(1.5rem,3vw,2.25rem);margin:0 0 .5rem}
.sp-fh-subheading{color:var(--sp-color-muted);max-width:60ch;margin:0 auto}
.sp-fh-ranges{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:2rem}
@media(min-width:760px){.sp-fh-ranges{grid-template-columns:repeat(5,1fr)}}
.sp-fh-rcard{background:var(--sp-color-paper);border:1px solid var(--sp-color-line);border-radius:4px;padding:18px 16px 16px;display:flex;flex-direction:column;gap:6px;cursor:pointer;text-align:left;font-family:inherit;transition:border-color .15s}
.sp-fh-rcard:hover{border-color:var(--sp-color-accent)}
.sp-fh-rcard.is-sel{border-color:var(--sp-color-accent);box-shadow:0 0 0 2px rgba(140,47,47,.12)}
.sp-fh-rcard__name{font-family:var(--sp-font-display);font-size:18px}
.sp-fh-rcard__char{font-size:12px;color:var(--sp-color-muted);min-height:32px;line-height:1.4}
.sp-fh-rcard__from{margin-top:6px;font-size:12px;color:var(--sp-color-muted)}
.sp-fh-rcard__price{font-family:var(--sp-font-display);font-size:20px;color:var(--sp-color-accent)}
.sp-fh-rcard__price small{font-size:12px;color:var(--sp-color-muted);font-family:inherit}
.sp-fh-layout{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:900px){.sp-fh-layout{grid-template-columns:1.15fr .85fr;align-items:start}}
.sp-fh-panel{background:var(--sp-color-paper);border:1px solid var(--sp-color-line);border-radius:4px}
.sp-fh-panel__hd{padding:18px 22px 6px}
.sp-fh-panel__hd h3{margin:0;font-family:var(--sp-font-display);font-size:20px}
.sp-fh-panel__hd p{margin:4px 0 0;color:var(--sp-color-muted);font-size:13px}
.sp-fh-panel__bd{padding:14px 22px 22px}
.sp-fh-field{margin-top:18px}
.sp-fh-field:first-child{margin-top:6px}
.sp-fh-field>label{display:block;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--sp-color-muted);margin-bottom:8px}
.sp-fh-dims{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sp-fh-dim{position:relative}
.sp-fh-dim .sp-fh-dimlab{position:absolute;left:14px;top:9px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--sp-color-muted);pointer-events:none}
.sp-fh-dim input{width:100%;padding:26px 46px 12px 14px;font-size:17px;font-family:inherit;color:var(--sp-color-ink);border:1px solid var(--sp-color-line);border-radius:6px;background:var(--sp-color-paper)}
.sp-fh-dim .sp-fh-unit{position:absolute;right:12px;bottom:14px;color:var(--sp-color-muted);font-size:13px}
select.sp-fh-slat,select.sp-fh-colour,select.sp-fh-tilt,select.sp-fh-hinges{width:100%;padding:12px 14px;font-size:15px;font-family:inherit;border:1px solid var(--sp-color-line);border-radius:6px;background:var(--sp-color-paper);color:var(--sp-color-ink)}
.sp-fh-dim.sp-fh-split-input input{width:100%;padding:12px 46px 12px 14px;font-size:15px;font-family:inherit;color:var(--sp-color-ink);border:1px solid var(--sp-color-line);border-radius:6px;background:var(--sp-color-paper)}
.sp-fh-hint{font-size:12.5px;color:var(--sp-color-muted);margin-top:8px}
.sp-fh-hint.warn{color:#9B4B24}
.sp-fh-hint.ok{color:var(--sp-color-accent)}
.sp-fh-cross-range{color:var(--sp-color-accent);background:var(--sp-color-mist);border:1px solid var(--sp-color-line);border-radius:6px;padding:9px 11px;margin-top:8px}
.sp-fh-opt-grid{display:grid;grid-template-columns:1fr;gap:10px}
.sp-fh-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--sp-color-line);border-radius:6px;padding:12px 14px;cursor:pointer;background:var(--sp-color-paper);position:relative;font-family:inherit;text-align:left}
.sp-fh-opt input{position:absolute;opacity:0;pointer-events:none}
.sp-fh-opt b{font-weight:600;font-size:14px;display:block}
.sp-fh-opt span span{font-size:12px;color:var(--sp-color-muted)}
.sp-fh-opt.is-on{border-color:var(--sp-color-accent);background:var(--sp-color-mist)}
.sp-fh-cill-price{font-size:13px;color:var(--sp-color-accent);font-weight:600;white-space:nowrap}
.sp-fh-contact-note{margin-top:16px;font-size:13px;color:var(--sp-color-muted);background:var(--sp-color-mist);border:1px solid var(--sp-color-line);border-radius:6px;padding:12px 14px}
.sp-fh-contact-note a{color:var(--sp-color-accent);font-weight:600}
.sp-fh-rail{position:sticky;top:18px}
.sp-fh-basket{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--sp-color-line)}
.sp-fh-basket__title{margin:0 0 10px;font-family:var(--sp-font-display);font-size:16px;font-weight:400}
.sp-fh-basket-item{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:8px 0;font-size:13px;border-top:1px solid var(--sp-color-line)}
.sp-fh-basket-item:first-child{border-top:none}
.sp-fh-basket-item__desc{color:var(--sp-color-ink);line-height:1.5}
.sp-fh-basket-item__price{display:flex;align-items:center;gap:8px;white-space:nowrap;font-weight:600}
.sp-fh-basket-item__remove{border:none;background:none;color:var(--sp-color-muted);font-size:18px;line-height:1;cursor:pointer;padding:0 2px}
.sp-fh-basket-item__remove:hover{color:var(--sp-color-accent)}
.sp-fh-basket-total{margin-top:8px;padding-top:8px;border-top:1px dashed var(--sp-color-line);font-size:14px;font-weight:600;text-align:right}
.sp-fh-price-main{font-family:var(--sp-font-display);font-size:40px;line-height:1}
.sp-fh-price-main small{font-size:14px;color:var(--sp-color-muted);font-family:inherit}
.sp-fh-price-main.is-blocked{color:var(--sp-color-muted);font-size:22px}
.sp-fh-breakdown{margin:16px 0 0;border-top:1px solid var(--sp-color-line);padding-top:14px;font-size:13.5px}
.sp-fh-brk-row{display:flex;justify-content:space-between;gap:12px;padding:5px 0;color:var(--sp-color-muted)}
.sp-fh-brk-row b{color:var(--sp-color-ink);font-weight:600}
.sp-fh-brk-row.total{border-top:1px dashed var(--sp-color-line);margin-top:8px;padding-top:11px;font-size:15px;color:var(--sp-color-ink)}
.sp-fh-spec-note{margin-top:14px;font-size:12.5px;color:var(--sp-color-muted);background:var(--sp-color-mist);border-radius:6px;padding:10px 12px;line-height:1.6}
.sp-fh-cta{display:block;width:100%;margin-top:16px}
.sp-fh-cta.is-quote{background:var(--sp-color-accent);opacity:.85}
.sp-fh-add-another{display:block;width:100%;margin-top:16px}
.sp-fh-fine{font-size:12px;color:var(--sp-color-muted);margin-top:12px;text-align:center}
.sp-fh-contact{margin-top:18px;border-top:1px solid var(--sp-color-line);padding-top:16px}
.sp-fh-contact input{width:100%;padding:10px 12px;font-size:16px;font-family:inherit;border:1px solid var(--sp-color-line);border-radius:6px}
.sp-fh-submit{width:100%;margin-top:6px}
.sp-fh-submit-status{font-size:12.5px;color:var(--sp-color-muted);margin-top:8px}

/* Task F #31: contextual measuring-help link, shown next to the width/height
   inputs in every configurator (FH/Cafe/Tier/Solid) so "how are they
   measured?" is answered at the exact point a customer is likely to ask it. */
.sp-fh-measure-link{display:inline-flex;align-items:center;gap:4px;margin-top:8px;font-size:12.5px;font-weight:600;color:var(--sp-color-accent);text-decoration:none}
.sp-fh-measure-link:hover{text-decoration:underline}

/* Pre-publish verification: privacy statement above the submit button in
   the contact fields of every configurator (Cafe/Tier/Solid use this shared
   stylesheet; Full Height has its own inline copy of this rule). */
.sp-fh-gdpr{display:flex;align-items:flex-start;gap:10px;background:var(--sp-color-mist);border:1px solid var(--sp-color-line);border-radius:6px;padding:12px 14px;margin-top:16px}
.sp-fh-gdpr svg{flex-shrink:0;margin-top:2px;color:var(--sp-color-muted)}
.sp-fh-gdpr p{font-size:12px;color:var(--sp-color-muted);line-height:1.5;margin:0}
.sp-fh-gdpr a{color:var(--sp-color-accent);text-decoration:underline}

/* Pre-publish mobile pass: select.sp-fh-slat/colour/tilt/hinges and the
   tier split-position input were at 15px, below the 16px threshold that
   stops iOS Safari auto-zooming the viewport on focus. Bumped both to 16px. */

/* RC4 Task 3 (Part 1): honest from-price signal in the style-page hero,
   shown above the Design & Order CTA so a price is visible before scrolling. */
.sp-style-hero__price { display: inline-block; font-size: 0.9375rem; font-weight: 600; color: #fff; line-height: 1.5; padding: 8px 16px; border: 1px solid rgba(255,255,255,0.28); border-left: 3px solid var(--sp-color-accent, #8C2F2F); border-radius: 4px; background: rgba(255,255,255,0.06); margin: 0 auto 28px; }

/* RC11 Phase 3 (10 Jul 2026): Mid Rail & Split Louvre — minor spacing/status
   styling for the new position-input stacks and the "required" status tag.
   Source: manufacturer portal capture (Google Drive doc "Shutter Pros —
   Mid Rail & Split Louvre Constraints"). Field structure/logic lives in
   assets/shutter-pros-full-height-engine.js — this is presentation only. */
.sp-fh-midrail-pos-item,
.sp-fh-lsplit-pos-item { margin-top: 12px; }
.sp-fh-midrail-positions > .sp-fh-midrail-pos-item:first-child,
.sp-fh-lsplit-positions > .sp-fh-lsplit-pos-item:first-child { margin-top: 12px; }
.sp-fh-lsplit-status { font-size: 11px; font-weight: 700; color: var(--sp-color-accent); text-transform: uppercase; letter-spacing: 0.04em; }

/* Slogan Tier 1 (RC16): small muted tagline directly beneath the price on
   every configurator's "Your price" panel. Loaded globally on shutter_pros
   templates via theme.liquid, so this single rule covers all four styles
   (Full Height/Cafe/Solid/Tier) — no per-section duplicate needed. */
.sp-fh-slogan { font-size: 11.5px; color: var(--sp-color-muted); font-style: italic; margin: 6px 0 0; }