.roofing-site{--prs-nav-navy:#152d47}
.roofing-site .main-header{background:var(--prs-nav-navy);color:#fff}
/* Shared page-title banners use the same navy as the navigation. */
@media screen{
 .roofing-site .catalog-hero,.roofing-site .page-head{background:var(--prs-nav-navy);color:#fff}
 .roofing-site .page-head{box-shadow:0 0 0 100vmax var(--prs-nav-navy);clip-path:inset(0 -100vmax);margin-bottom:28px}
 .roofing-site .catalog-hero h1,.roofing-site .page-head h1{color:#fff}
 .roofing-site .catalog-hero>p:not(.eyebrow):not(.kicker),.roofing-site .catalog-hero label,.roofing-site .page-head>p:not(.kicker){color:#dce5ed}
 .roofing-site .catalog-hero .eyebrow,.roofing-site .page-head .kicker{color:#f0d9ae}
 .roofing-site .catalog-hero a,.roofing-site .page-head a{color:#dce5ed}
 .roofing-site .catalog-hero a:hover,.roofing-site .page-head a:hover{color:#fff}
 .roofing-site .catalog-hero a:focus-visible,.roofing-site .page-head a:focus-visible{outline:3px solid #f0d9ae;outline-offset:4px}
}
.roofing-site .site-bottom{background:var(--prs-nav-navy);color:#e4e8db}
.roofing-site:has(.roofing-opening) .contact-block{background:var(--prs-nav-navy)}
.roofing-site:has(.roofing-opening) .site-bottom{margin-top:0}
.story-nav>div{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.roofing-site .site-bottom a:hover{color:#f0d9ae;text-decoration:underline}
.roofing-site .site-bottom a:focus-visible{outline:3px solid #f0d9ae;outline-offset:4px}
/* Compact the panel introduction while retaining headings and all category controls. */
.roofing-site[data-collection="panels"] .panel-heading-row{display:grid;grid-template-columns:1.05fr 1fr;gap:6vw;align-items:center;padding:12px 0}
.roofing-site[data-collection="panels"] .panel-heading-row .crumbs{padding:0}
.roofing-site[data-collection="panels"] .panel-heading-row>.kicker{margin:0}
.roofing-site[data-collection="panels"] .detail-layout{padding-top:0}
.roofing-site[data-collection="panels"] .detail-choices>h1{margin-top:0}
@media(max-width:900px){.roofing-site[data-collection="panels"] .panel-heading-row{grid-template-columns:1fr;gap:4px;padding:10px 0}.roofing-site[data-collection="panels"] .panel-heading-row>.kicker{font-size:.7rem}}
.roofing-site .main-header nav a:hover,.roofing-site .main-header nav a[aria-current]{color:#f0d9ae}
.roofing-site .main-header .nav-cta{border-color:#b9c9da}
.roofing-site .main-header .nav-cta:hover{background:#28435e;color:#fff}
.roofing-site .main-header .quote-nav span{background:#344d68;color:#fff}
.roofing-site .main-header a:focus-visible{outline:3px solid #f0d9ae;outline-offset:4px}
/* Captions remain in image alternatives/lightbox metadata, without duplicate visible roofing copy. */
.roofing-site #sample-caption,.roofing-site #roof-photo-position{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important}
.roofing-site #roofing-product-preview>img[data-preview-main]{object-fit:contain!important;padding:4%!important;object-position:center!important;background:#fff}
.roofing-site .roof-master{position:relative;display:block;width:100%;height:100%;isolation:isolate}
.roofing-site .roof-master>img{object-fit:contain!important;width:100%!important;height:100%!important}

/* Local mobile usability study: compact navigation and an unobstructed finish preview. */
.mobile-header-actions,.mobile-finish-preview{display:none}
@media screen and (max-width:760px), screen and (max-width:1024px) and (max-height:500px){
 .roofing-site .main-header.mobile-nav-ready{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 4vw;min-height:58px}
 .roofing-site .main-header.mobile-nav-ready .main-logo{display:flex;align-items:center;flex:none;width:90px;height:44px;min-height:44px;margin:0}
 .roofing-site .main-header.mobile-nav-ready .main-logo img,.roofing-site .main-header.mobile-nav-ready .main-logo svg{display:block;width:90px;height:42px;object-fit:contain}
 .mobile-header-actions{display:flex;align-items:center;gap:8px}
 .roofing-site .mobile-header-actions a,.mobile-menu-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:44px;text-decoration:none;font:inherit;font-size:.875rem;line-height:1.25;color:inherit}
 .roofing-site .mobile-header-actions .quote-nav{gap:5px;white-space:nowrap;padding:6px 4px}
 .roofing-site .mobile-header-actions .quote-nav span{display:inline-grid;place-items:center;min-width:24px;height:24px;margin:0;padding:0 4px}
 .mobile-menu-toggle{min-width:58px;padding:8px 10px;border:1px solid #b9c9da;border-radius:4px;background:transparent;cursor:pointer}
 .mobile-menu-toggle:focus-visible{outline:3px solid #f0d9ae;outline-offset:2px}
 .roofing-site .main-header.mobile-nav-ready nav{display:none;position:absolute;inset:100% 0 auto;margin:0;padding:12px 4vw;background:var(--prs-nav-navy);border-top:1px solid #ffffff40;box-shadow:0 8px 16px #0002;max-height:calc(100svh - var(--roofing-header-height) - 16px);overflow:auto}
 .roofing-site .main-header.mobile-menu-open nav{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
 .roofing-site .main-header.mobile-nav-ready nav a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px;font-size:.9375rem}
 .roofing-site .main-header.mobile-nav-ready nav .quote-nav{display:none}
 html:has(.roofing-site .mobile-nav-ready){scroll-padding-top:calc(var(--roofing-header-height) + 12px)}
}
@media screen and (max-width:740px){
 .roofing-site #roof-explorer{overflow:clip}
 .roofing-site .product-choices{padding:24px 12px}
 .roof-color-selector{display:grid;grid-template-columns:minmax(96px,.72fr) minmax(0,1fr);gap:12px;align-items:start;margin-block:20px}
 .roof-color-selector>fieldset{min-width:0;margin:0;padding:0}
 .mobile-finish-preview{display:block;position:sticky;top:calc(var(--roofing-header-height) + 12px);align-self:start;min-width:0;margin:0;padding:8px;background:#fffdf7;border:1px solid #bdc8c0;border-radius:5px;color:#19352e}
 .mobile-preview-label{display:block;margin-bottom:6px;font-size:.625rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
 .mobile-preview-image{display:flex;align-items:center;aspect-ratio:4/3;overflow:hidden;background:#fff;border-radius:3px}
 .mobile-preview-image>img,.mobile-preview-image>svg{display:block;width:100%;height:100%;object-fit:contain}
 .mobile-finish-preview figcaption{margin:8px 0 0;font-size:.8125rem;line-height:1.35}
 .mobile-finish-preview figcaption strong,.mobile-finish-preview figcaption span,.mobile-finish-preview figcaption small{display:block}
 .mobile-finish-preview figcaption small{margin-top:6px;font-size:.625rem;line-height:1.4;color:#52645b}
 .roof-color-selector .color-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 6px;margin:0}
 .roof-color-selector .color-option{min-width:0;min-height:88px;padding:6px 1px;font-size:.8125rem;line-height:1.35;overflow-wrap:break-word;scroll-margin-top:calc(var(--roofing-header-height) + 12px)}
 .roof-color-selector .color-option .color-circle{width:44px;height:44px}
 .roof-color-selector .color-option small{font-size:.6875rem;line-height:1.4}
}

.roof-master-svg{display:block;width:100%;height:100%;overflow:visible}
#detail-sample .roof-master-svg{max-height:470px}
#roof-thumbnails .roof-master-svg{width:90px;height:65px;background:#fff}
.roof-master-dialog{width:min(1100px,94vw);border:0;border-radius:6px;padding:20px;background:#f8f6ef;color:#152d47}
.roof-master-dialog::backdrop{background:#102033cc}
.roof-master-dialog>button{display:block;margin-left:auto;padding:8px 16px;background:#152d47;color:#fff;border:0;border-radius:3px;cursor:pointer}
.roof-master-dialog .roof-master-svg{height:min(70vh,650px)}
.roof-master-dialog p{font-size:12px;line-height:1.5}

/* An unphotographed finish is a compact enquiry, never a substitute product image. */
body[data-collection="wpc"] .material-stage.enquiry-stage{min-height:0;height:auto;align-self:start;padding:24px;background:#f3f5f6;border:1px solid #d7dde1;border-radius:12px}
body[data-collection="wpc"] .enquiry-stage #selected-media[hidden]{display:none!important}
body[data-collection="wpc"] .enquiry-stage h2{margin:8px 0 12px}
body[data-collection="wpc"] .enquiry-stage figcaption{margin:0;max-width:32ch}
body[data-collection="wpc"] .finish-swatch.finish-text{min-height:44px;padding:10px 18px;border:1px solid #8d9ba7;border-radius:8px;width:auto;min-width:76px;display:inline-flex;align-items:center;justify-content:center}
body[data-collection="wpc"] .finish-text[aria-pressed="true"]{background:#152d47;color:white;border-color:#152d47}
body[data-collection="wpc"] section[hidden]{display:none!important}
/* Keep gauge group semantics and dynamic selection feedback without tutorial copy. */
.roofing-site #gauge-field>legend,.roofing-site #selection-note{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;margin:0!important;padding:0!important;border:0!important}

.roofing-site .colour-reference-note{font-size:12px;line-height:1.45;color:#405951;background:none;border:0;border-radius:0;padding:0;margin:8px 0 0;font-weight:400}
.roofing-site .finish-stage .colour-reference-note{color:var(--finish-ink)}
.roof-master-dialog .colour-reference-note{font-size:13px;margin-bottom:0}

/* Standalone controls retain their text styling with a usable touch area. */
.roofing-site .table-option,.roofing-site #source-link,.roofing-site .accessory-return,.roofing-site .site-bottom nav a,.roofing-site .site-bottom a[href^="tel:"]{display:inline-flex;align-items:center;min-height:44px;min-width:44px;box-sizing:border-box}
.roofing-site .table-option{padding:8px 4px}
.panel-finish-preview{display:none}
@media screen and (max-width:740px){
 .panel-finish-selector{display:grid;grid-template-columns:minmax(84px,.65fr) minmax(0,1.35fr);gap:12px;align-items:start}
 .panel-finish-selector .finish-swatches{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 6px}
 .panel-finish-selector .finish-swatch{font-size:.8125rem;scroll-margin-top:calc(var(--roofing-header-height) + 12px)}
 .panel-finish-preview{display:block;position:sticky;top:calc(var(--roofing-header-height) + 12px);align-self:start;min-width:0;margin:0;padding:8px;border:1px solid #bdc8c0;border-radius:5px;background:#fffdf7;color:#19352e}
 .panel-finish-preview[hidden]{display:none}
 .panel-preview-link{display:block;color:inherit;text-decoration:none;min-height:44px}
 .panel-preview-link img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#fff}
 .panel-preview-action{display:block;font-size:.6875rem;line-height:1.35;margin-top:6px;text-decoration:underline}
 .panel-finish-preview figcaption{font-size:.8125rem;font-weight:700;line-height:1.4;margin-top:8px;overflow-wrap:break-word}
 .panel-preview-link:focus-visible{outline:2px solid #a3651d;outline-offset:3px}
}

/* Cart-only actions: shared request summaries remain read-only. */
.quote-line-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.quote-line-actions button,.quote-inline-editor button,.quote-undo-notice button{min-height:44px;min-width:44px}
.quote-inline-editor{margin-top:16px;padding-top:16px;border-top:1px solid #cbd5ca;scroll-margin-top:calc(var(--roofing-header-height) + 12px)}
.quote-inline-editor[hidden]{display:none}
.quote-inline-editor label{display:block;font-size:14px;font-weight:600;margin:0 0 14px}
.quote-inline-editor input,.quote-inline-editor select{display:block;width:100%;box-sizing:border-box;min-height:44px;padding:10px;border:1px solid #a6b7a5;border-radius:3px;font:inherit;background:#fff;color:#1d392e;margin-top:5px}
.quote-inline-editor button:disabled{opacity:.55;cursor:not-allowed}
.quote-undo-notice{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:16px;margin:16px 0;border:1px solid #9bb9a6;background:#edf4ed;border-radius:4px}
.quote-undo-notice p{margin:0;font-size:14px;flex:1 1 220px}.quote-undo-notice small{display:block;margin-top:5px;line-height:1.5}
#quote-action-status:empty{display:none}
.customer-materials li[data-quote-line]{scroll-margin-top:calc(var(--roofing-header-height) + 12px)}

.quote-undo-notice,.quote-line-actions button{scroll-margin-top:calc(var(--roofing-header-height) + 12px)}

/* V2: explicit manual availability and compact, legible quote summaries. */
.roofing-site #availability-note{margin:10px 0 16px;padding:12px 14px;border-left:3px solid #496654;background:#edf1ea;color:#243c30;font-size:.9375rem;line-height:1.5}
.roofing-site .quote-estimate-summary{padding:18px;background:#edf1ea;border:1px solid #a8baad;border-radius:4px;margin:18px 0;color:#17372b}
.quote-estimate-summary strong{display:block;font-size:1.25rem;margin-bottom:8px}.quote-estimate-summary p{margin:6px 0;font-size:.9375rem;line-height:1.5}
.roofing-site #result-count,.roofing-site .customer-materials .small-note,.roofing-site #quote-review .small-note{color:#40534a}
.roofing-site .roofing-opening-content{padding-top:clamp(28px,5vw,64px)}
.customer-materials .quote-item-total{grid-column:1/-1}

/* E32: one readable quote list; editing is an explicit phase. */
.roofing-site .quote-clean-summary{background:#f6f8fb;color:#152d47}
.roofing-site .quote-clean-summary .quote-price-basis{padding:12px 20px;margin:0;font-size:14px;color:#40566e}
.quote-clean-summary .quote-column-head,.quote-clean-summary .quote-read-row{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(0,1.3fr) minmax(0,1fr) minmax(100px,1fr);gap:18px;align-items:start}
.quote-clean-summary .quote-column-head{padding:10px 20px;font-size:12px;font-weight:700;border-bottom:1px solid #cbd7e4;background:#e8eef5}
.quote-clean-summary .quote-column-head>span:last-child,.quote-clean-summary .quote-item-total{text-align:right}
.quote-clean-summary .quote-read-row>div,.quote-clean-summary .quote-item-total{min-width:0;overflow-wrap:anywhere}
.quote-clean-summary .quote-material h2{margin:0;font:600 16px/1.45 system-ui,sans-serif}
.quote-clean-summary .quote-material-details{font-size:13px;line-height:1.5;margin:5px 0 0;color:#40566e}
.quote-clean-summary .quote-line-warning{font-size:13px;line-height:1.5;color:#8b370d}
.quote-clean-summary .quote-row-quantity,.quote-clean-summary .quote-row-rate{font-size:14px;line-height:1.5}
.quote-clean-summary .quote-row-quantity small{display:block;font-size:13px;margin-top:4px}
.quote-clean-summary .quote-item-total{display:block;grid-column:auto;margin:0}
.quote-clean-summary .quote-item-total dt,.quote-clean-summary .quote-mobile-label{display:none}
.quote-clean-summary .quote-item-total dd{margin:0;font-size:16px;line-height:1.5;color:inherit}
.roofing-site .quote-clean-summary .quote-estimate-summary{margin:0;padding:18px 20px;border:0;border-radius:0;background:#e8eef5;color:#152d47}
.quote-clean-summary .quote-total-row{display:flex;justify-content:space-between;gap:20px;align-items:start}
.quote-clean-summary .quote-total-row strong{font-size:17px;line-height:1.45;margin:0}
.quote-clean-summary .quote-grand-amount{text-align:right;white-space:nowrap}
.quote-clean-summary .quote-total-note{font-size:12px;line-height:1.5;color:#40566e;margin:9px 0 0}
.quote-edit-mode-controls{margin:18px 0 26px}.quote-edit-mode-controls button{min-height:44px}.quote-edit-mode-controls p{margin:10px 0 0;max-width:65ch}
.quote-clean-summary .quote-select-line{border:0;background:transparent;color:#174f86;font:inherit;text-align:left;text-decoration:underline;padding:6px 8px;margin:-6px -8px;min-height:44px;cursor:pointer}
.quote-clean-summary .quote-select-line:focus-visible{outline:3px solid #326da5;outline-offset:3px}
.quote-clean-summary .quote-inline-editor{background:#fff;color:#152d47;padding:18px;border:1px solid #becddd;border-radius:5px}
@media(max-width:640px){
 .quote-clean-summary .quote-column-head{display:none}
 .quote-clean-summary .quote-read-row{grid-template-columns:minmax(0,1fr) minmax(94px,.42fr);gap:6px 12px}
 .quote-clean-summary .quote-material{grid-column:1;grid-row:1}.quote-clean-summary .quote-row-quantity{grid-column:1;grid-row:2}
 .quote-clean-summary .quote-row-rate{grid-column:1;grid-row:3;font-size:13px;color:#40566e}
 .quote-clean-summary .quote-item-total{grid-column:2;grid-row:1 / span 3}.quote-clean-summary .quote-item-total dt{display:block;font-size:11px;color:#40566e;margin:0 0 4px}
 .quote-clean-summary .quote-mobile-label{display:inline}
 .quote-clean-summary .quote-total-row strong{font-size:16px}.quote-clean-summary .quote-total-row{gap:12px}
 .quote-clean-summary .quote-inline-editor{padding:12px}
}
@media print{.quote-edit-mode-controls,.quote-inline-editor,#quote-undo,#quote-action-status{display:none!important}.quote-select-line{color:inherit!important;text-decoration:none!important}.quote-clean-summary li{break-inside:avoid}.quote-clean-summary .quote-price-basis{color:#222!important}}

/* Keep intrinsic image dimensions from stretching the approved five-house gallery. */
.roofing-site #featured-pletts-home img{height:auto;aspect-ratio:3/2;object-fit:cover}
/* A compact, usable fallback remains while scripts load or are unavailable. */
@media screen and (max-width:760px), screen and (max-width:1024px) and (max-height:500px){
 .roofing-site .main-header{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:7px 4vw;min-height:58px}
 .roofing-site .main-header .main-logo{display:flex;align-items:center;width:90px;height:44px;min-height:44px;margin:0;flex:none}
 .roofing-site .main-header .main-logo img,.roofing-site .main-header .main-logo svg{display:block;width:90px;height:42px;object-fit:contain}
 .roofing-site .main-header:not(.mobile-nav-ready) nav{display:flex;flex-wrap:nowrap;width:100%;gap:12px;margin:0;overflow-x:auto;align-items:center}
 .roofing-site .main-header:not(.mobile-nav-ready) nav a{flex:none;min-height:44px;display:inline-flex;align-items:center;font-size:14px;white-space:nowrap;padding:4px}
 .roofing-site .main-header.mobile-nav-ready{flex-wrap:nowrap}
 .roofing-site .main-header .division-switch img{display:none!important}
 .roofing-site .main-header .division-switch::after{content:"Home Builders"}
}
/* Enlarge the existing cladding hardware inside its option circle. */
.roofing-site .finish-swatch[data-variant="wpc-cladding-clip"] .finish-swatch-circle img,
.roofing-site .finish-swatch[data-variant="cladding-metal-start-clip-screw"] .finish-swatch-circle img{object-fit:cover;padding:0;transform:translate(7px,-2px) scale(2.4)}

/* Make the separate promotional/delivery confirmation clear at final review. */
.quote-clean-summary .quote-total-note strong{display:block;font-size:14px;font-weight:700;color:#193650;margin-bottom:3px}