/* Roofing interface palette. Product images, --swatch and finish render colours stay authentic. */
@media screen {
  body.roofing-site {
    --ink:#152d47; --forest:#152d47; --teal:#284b70;
    --muted:#50657b; --paper:#f7f9fc; --cream:#f2f5f9;
    --mint:#eaf0f7; --line:#ccd7e4; --white:#fff;
    --ui-surface:#eaf0f7; --ui-selected:#dce7f3; --ui-hover:#284b70;
    --shadow:0 22px 60px rgba(21,45,71,.12);
    color:var(--ink); background:var(--paper);
  }
  .roofing-site :is(.material-stage,.price-panel,.roof-price,.quote-summary,.contact-form,
    .cta-panel,.fact-strip,.category-feature,.project-inspiration,.request-file-section,
    .social-film,.testimonials blockquote,.quote-estimate-summary,.quote-undo-notice) {
    background:var(--ui-surface); color:var(--ink); border-color:var(--line);
  }
  body.roofing-site[data-collection="wpc"] .material-stage.enquiry-stage { background:var(--ui-surface); color:var(--ink); border-color:var(--line); }
  .roofing-site :is(.quote-line,.quote-mini,.customer-materials,.sales-table-wrap,.roof-order,
    .roof-accessories,.social-account,.mobile-finish-preview,.panel-finish-preview,.photo-dialog,
    .roof-master-dialog,.category-card) { background:#fff; color:var(--ink); border-color:var(--line); }
  .roofing-site :is(.tile figure,.product-image-pending,.catalog-panel-sample,.roof-sample-window,
    .category-card .category-image,.door-image-window) { background:var(--ui-surface); }
  .roofing-site :is(.product-photo,.product-photo img,.catalog-panel-sample img) { background:#fff; }
  .roofing-site #category-grid .product-framing figure { background:var(--ui-surface); }
  .roofing-site :is(.story,.company-faith,.beliefs-section,.parent-introduction) { background:var(--ui-surface); }
  .roofing-site .story .story-copy { background:var(--paper); box-shadow:0 12px 32px #152d471f; }
  .roofing-site .story .story-copy p:not(.eyebrow) { color:var(--muted); }
  .roofing-site :is(.site-bottom,.contact-block,.social-account-brand,.social-film-cover,
    .sales-table caption,.customer-materials-reference) { background:var(--prs-nav-navy); color:#edf3fa; }
  .roofing-site .social-film-cover::after { background:linear-gradient(transparent 45%,#152d47dd); }
  .roofing-site .contact-block p:not(.eyebrow) { color:#dce5ed; }
  .roofing-site :is(.branch-hero::after,.roofing-slash-panel::after) {
    background:linear-gradient(90deg,rgba(15,35,57,.73),rgba(15,35,57,.13)),linear-gradient(0deg,rgba(15,35,57,.4),transparent 70%);
  }
  .roofing-site .hero-controls { background:#152d47c9; }
  .roofing-site :is(.experience-note::before,.intro-photo figcaption) { background:var(--ui-selected); }

  /* Controls retain their existing geometry, focus behavior and selection semantics. */
  .roofing-site :is(.btn,.button-dark,.primary-button,.roofing-card .button) {
    background:var(--prs-nav-navy); border-color:var(--prs-nav-navy); color:#fff;
  }
  .roofing-site :is(.btn,.button-dark,.primary-button,.roofing-card .button):hover {
    background:var(--ui-hover); border-color:var(--ui-hover); color:#fff;
  }
  .roofing-site :is(.btn.light,.button-light,.option-btn,.finish-dropdown,
    .collection-options button,.selector-pills button,.material-gallery button,
    .quote-add-form input,.quote-add-form select,.quote-summary input,.quote-summary textarea,
    .quote-line input,.quote-line select,.quote-inline-editor input,.quote-inline-editor select,
    .inquiry-fields input,.inquiry-fields textarea,.contact-form input,.contact-form select,
    .contact-form textarea,.roof-accessories select,.roof-accessories input) {
    color:var(--ink); background:#fff; border-color:var(--line);
  }
  .roofing-site :is(.btn.outline,.button-outline) { background:transparent; color:inherit; border-color:currentColor; }
  .roofing-site :is(.collection-options button,.selector-pills button,.finish-options button)[aria-pressed="true"] {
    background:var(--prs-nav-navy); color:#fff; border-color:var(--prs-nav-navy);
  }
  .roofing-site :is(.material-gallery button,.option-btn)[aria-pressed="true"] {
    background:var(--ui-selected); border-color:var(--prs-nav-navy); color:var(--ink);
  }
  .roofing-site .material-gallery button[aria-pressed="true"] { box-shadow:inset 0 0 0 1px var(--prs-nav-navy); }
  .roofing-site :is(.finish-swatch,.color-option,.finish-options button,.gauge-options button) { color:var(--muted); border-color:var(--line); }
  .roofing-site :is(.finish-swatch,.color-option)[aria-pressed="true"] { color:var(--ink); }
  .roofing-site :is(.finish-swatch:hover,.category-card:hover,.btn.light:hover,.social-icon:hover) { background:var(--ui-selected); color:var(--ink); }
  .roofing-site .finish-swatch-circle { border-color:var(--line); box-shadow:0 0 0 3px var(--paper),0 0 0 4px transparent; }
  .roofing-site .finish-swatch[aria-pressed="true"] .finish-swatch-circle { box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--prs-nav-navy); }
  .roofing-site :is(.finish-swatch-later,.choice-text) { background:var(--ui-surface); color:var(--ink); }
  .roofing-site :is(.finish-options button:hover,.social-icon:hover) { border-color:var(--prs-nav-navy); }
  .roofing-site :is(.quote-add-form,.quote-inline-editor,.quote-block,.rule,.spec-table dt,
    .spec-table dd,.quote-mini,.quote-mini li,.customer-materials li,.sales-table td,
    .price-table th,.price-table td,.social-icon) { border-color:var(--line); }
  .roofing-site :is(.price-table th,.sales-table th,.quote-edit-items>summary span) { background:var(--ui-surface); color:var(--ink); }
  .roofing-site .price-band th { background:var(--ui-selected)!important; border-top-color:var(--paper); }
  .roofing-site .price-table tr:target { background:var(--ui-selected); }
  .roofing-site :is(.quote-line-title button,.quote-mini button,.table-option,.social-icon,.photo-dialog button) { color:var(--ink); }
  .roofing-site :is(.material-stage figcaption,.small-note,.choice-label,.price-panel small,.roof-price small,
    .quote-add-form label,.quote-summary label,.quote-line form>label,.length-fields legend,.length-fields label,
    .quote-mini small,.colour-reference-note,.mobile-finish-preview figcaption small,.color-option small,
    .page-intro>span,.intro-copy,.selection-note,.quote-block>div>p:last-child,.stage-heading p,
    .catalog-panel-sample figcaption,.customer-materials .small-note) { color:var(--muted); }
  .roofing-site .quote-add-form [role="status"] { color:var(--ui-hover); }
  .roofing-site #category-grid .spc-category figcaption { color:var(--muted); }
  .roofing-site #category-grid .category-preview-card h2 { color:var(--ink); }
  .roofing-site #category-grid :is(.category-primary-note,.category-preview-caption) { color:var(--muted); }
  .roofing-site #category-grid .category-preview-toggle { color:var(--ink); border-color:var(--line); }
  .roofing-site :is(#homepage-material-ranges,.material-range-group) { border-color:var(--line); }
  .roofing-site #homepage-material-ranges>p { color:var(--muted); }
  .roofing-site .material-range-group nav a { color:var(--ink); }
  .roofing-site .social-play { background:#fff; color:var(--ink); }
  .roofing-site .social-link { color:var(--ink); }
  .roofing-site :is(#result-count,#quote-review .small-note) { color:var(--muted); }
  .roofing-site #availability-note { color:var(--ink); background:var(--ui-surface); border-left-color:#6c87a3; }
  .roofing-site .quote-estimate-summary { color:var(--ink); border-color:var(--line); }
  .roofing-site .quote-undo-notice { color:var(--ink); border-color:var(--line); }

  /* Roofing is the owner's palette exception: its surroundings follow the selected finish. */
  .roofing-site .product-explorer { background:var(--finish-color,#185e87); border-color:var(--line); }
  .roofing-site .finish-stage { color:var(--finish-ink); }
  .roofing-site #finish-stage :is(.colour-reference-note,.stage-heading p) { color:var(--finish-ink); }
  .roofing-site .product-choices { background:color-mix(in srgb,var(--finish-color) 22%,var(--paper)); color:var(--ink); }
  .roofing-site .color-circle { box-shadow:0 0 0 3px #fff,0 0 0 4px transparent; }
  .roofing-site .color-option[aria-pressed="true"] .color-circle { box-shadow:0 0 0 3px #fff,0 0 0 5px var(--prs-nav-navy); }
  .roofing-site .gauge-options button[aria-pressed="true"] { background:var(--ui-selected); border-color:var(--prs-nav-navy); box-shadow:inset 0 0 0 1px var(--prs-nav-navy); color:var(--ink); }
  .roofing-site .gauge-options button:disabled { color:#718399; background:repeating-linear-gradient(135deg,#edf1f6,#edf1f6 6px,#e3e9f1 6px,#e3e9f1 7px); }
  .roofing-site :is(.detail-sample.project-sample img,.detail-sample.credited img) { background:var(--finish-color); }
  .roofing-site .photo-ripple { background:var(--finish-color); }
  .roofing-site .project-photo-link span { background:#152d47e8; }
  .roofing-site .project-photo-link:hover span { background:var(--ui-hover); }
  .roofing-site .replacement-notice { background:var(--ui-selected); color:var(--ink); }
  .roofing-site :is(.specifications>div>p:last-child,.specifications dt,.project-inspiration p:not(.eyebrow),
    .roof-accessory-photo figcaption,.roof-accessory-links small,legend span) { color:var(--muted); }
  .roofing-site .product-choices :is(.color-option small,.selection-note) { color:var(--muted); }
  .roofing-site .product-choices .eyebrow { color:#9a601e; }
  .roofing-site :is(.specifications,.project-inspiration) .eyebrow { color:var(--muted); }
  .roofing-site #roof-accessory-status { color:var(--ui-hover); }
  .roofing-site :is(.roof-accessory-photo,.roof-accessory-links a) { border-color:var(--line); }

  /* Catalog selectors and image dialogs have more specific legacy selectors. */
  .roofing-site.catalog-page .category-sidebar :is(summary,a,button) { color:var(--ink); }
  .roofing-site.catalog-page .category-sidebar details { background:var(--ui-surface); border-color:var(--line); }
  .roofing-site.catalog-page .category-sidebar nav button:hover { background:var(--ui-surface); }
  .roofing-site.catalog-page .category-sidebar nav button[aria-pressed="true"] { background:var(--ui-selected); border-color:var(--line); color:var(--ink); }
  .roofing-site.catalog-page :is(.results-bar h2,.results-bar button,.sort-label select) { color:var(--ink); }
  .roofing-site.catalog-page :is(.category-sidebar nav button span,.more-ranges p,.sort-label) { color:var(--muted); }
  .roofing-site.catalog-page .sort-label select { border-color:var(--line); }
  .roofing-site .catalog-controls label span { color:#dce5ed; }
  .roofing-site.catalog-page #product-grid :is(.product-card,.enlarge-mark,.product-thumb,.family-swatches img) { border-color:var(--line); }
  .roofing-site.catalog-page #product-grid .product-card:is(:hover,:focus-within) { border-color:#819ab5; box-shadow:0 8px 24px #152d4714; }
  .roofing-site.catalog-page #product-grid :is(h2,.product-price,.enlarge-mark) { color:var(--ink); }
  .roofing-site.catalog-page #product-grid :is(.product-category,.product-detail,.product-description,.product-price small) { color:var(--muted); }
  .roofing-site.catalog-page #product-grid .product-actions .button { background:var(--prs-nav-navy); border-color:var(--prs-nav-navy); color:#fff; }
  .roofing-site.catalog-page #product-grid .product-actions .button:hover { background:var(--ui-hover); }
  .roofing-site.catalog-page :is(#image-dialog,.image-dialog-close) { color:var(--ink); border-color:var(--line); }
  .roofing-site :is(.photo-dialog,#image-dialog)::backdrop { background:#10243cbb; }
  .roofing-site .roofing-view-switch { background:var(--ui-surface); }
  .roofing-site .roofing-view-switch button[aria-pressed="true"] { background:var(--prs-nav-navy); color:#fff; }
  .roofing-site .roofing-view-switch button:hover { background:var(--ui-selected); color:var(--ink); }
}