/* Shared Roofing navigation; product-card presentation is limited to the landing. */
@media screen {
  html:has(body.roofing-site) {
    --roofing-header-height: 96px;
    scroll-padding-top: calc(var(--roofing-header-height) + 16px);
  }
  .roofing-site .main-header { position:sticky; top:0; z-index:80; }
  .roofing-site .category-sidebar, .roofing-site .material-stage,
  .roofing-site .quote-summary, .roofing-site .finish-stage .sample-figure {
    top:calc(var(--roofing-header-height) + 16px);
  }
  .roofing-site #products { padding-top:36px; }
  .roofing-site #products .section-heading { margin-bottom:28px; gap:24px; }
  .roofing-site #products .section-heading > p { max-width:460px; }
  /* The frame owns the layout; intrinsic HTML dimensions must not set card height. */
  .roofing-site #category-grid .tile figure {
    position:relative; overflow:hidden; aspect-ratio:16 / 10;
  }
  .roofing-site #category-grid .tile figure > img {
    position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto;
  }
  .roofing-site #category-grid .white-background figure { background:#fff; }
  .roofing-site #category-grid .white-background img { object-fit:contain; padding:0; transform:none; }
  .roofing-site #category-grid .spc-category img { object-fit:contain; padding:12px 16px 32px; transform:none; }
  .roofing-site #category-grid .spc-category figcaption {
    position:absolute; bottom:8px; left:0; right:0; padding:0 12px;
    color:#596950; font-size:13px; text-align:center;
  }
  .roofing-site #category-grid .product-framing figure { background:#f4f5ef; }
  .roofing-site #category-grid .product-framing img {
    object-fit:contain; padding:26px; transform:none;
  }
  .roofing-site #category-grid .tile-hover-photo {
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; opacity:0; pointer-events:none; transition:opacity .3s ease;
  }
  .roofing-site #category-grid .roofing-photo-swap:focus-visible .tile-hover-photo { opacity:1; }
  .roofing-site .roofing-hero:not([data-gallery]) {
    height:auto; min-height:calc(100svh - var(--roofing-header-height)); max-height:none;
  }
}
@media screen and (hover:hover) and (pointer:fine) {
  .roofing-site #category-grid .roofing-photo-swap:hover .tile-hover-photo { opacity:1; }
}
@media screen and (max-width:760px) {
  html:has(body.roofing-site) { --roofing-header-height:170px; }
  .roofing-site #products { padding-top:24px; }
  .roofing-site #products .section-heading > p { margin-top:12px; }
  .roofing-site #category-grid .product-framing img { padding:20px; }
}
@media screen and (min-height:540px) and (prefers-reduced-motion:no-preference) {
  .roofing-site .slash-ready .roofing-opening-stage { top:var(--roofing-header-height); }
  .roofing-site .slash-ready .roofing-hero:not([data-gallery]) {
    height:calc(100svh - var(--roofing-header-height)); min-height:0;
  }
}
@media (prefers-reduced-motion:reduce) {
  .roofing-site #category-grid .tile-hover-photo { transition:none; }
}

/* All material options use named circles; panel finishes retain their grain crops. */
.finish-swatches {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(5.25rem,1fr));
  gap:12px 8px;
}
.finish-swatch {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  min-width:0; min-height:88px; padding:8px 3px;
  border:0; border-radius:5px; background:transparent; color:#435d50;
  font:inherit; font-size:14px; line-height:1.4; text-align:center; cursor:pointer;
  text-decoration:none; overflow-wrap:break-word;
}
.finish-swatch-circle {
  display:block; width:48px; height:48px; flex-shrink:0; overflow:hidden;
  border-radius:50%; border:1px solid #00000026; background:#fff;
  box-shadow:0 0 0 3px #fbfaf5,0 0 0 4px transparent;
}
.finish-swatch-circle img {
  display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.15);
}
/* Fill the small sample with the material face rather than the photo backdrop. */
.finish-swatches[data-family="wall-panels"] .finish-swatch-circle img { transform:scale(3); }
.finish-swatch[data-variant="wall-panel-white-wp"] .finish-swatch-circle img { transform:scale(1.15); }
.finish-swatches[data-family="interior-cladding"] .finish-swatch-circle img { transform:scale(2); }
.finish-swatch[aria-pressed="true"] { color:#173b30; font-weight:700; }
.finish-swatch[aria-pressed="true"] .finish-swatch-circle {
  box-shadow:0 0 0 3px #fbfaf5,0 0 0 5px #294f3e;
}
.finish-swatch:focus-visible { outline:2px solid #a3651d; outline-offset:2px; }
.finish-swatches[data-finish-kind="profile"] .finish-swatch-circle { width:72px; height:72px; }
.finish-swatches[data-finish-kind="profile"] .finish-swatch-circle img { object-fit:contain; transform:none; }
/* Product/profile previews show the entire item, including narrow doors and trims. */
.finish-swatches[data-finish-kind="product"],.finish-swatches[data-finish-kind="profile"] {
  grid-template-columns:repeat(auto-fill,minmax(5.75rem,1fr));
}
.finish-swatches[data-finish-kind="product"] .finish-swatch-circle { width:72px; height:72px; }
.finish-swatches[data-finish-kind="product"] .finish-swatch-circle img {
  box-sizing:border-box; object-fit:contain; padding:10px; transform:none;
}
.finish-swatches[data-finish-kind="profile"] .finish-swatch-circle img { padding:8px; box-sizing:border-box; }
.finish-swatch-circle.finish-swatch-later,.finish-swatch-circle.choice-text {
  display:grid; place-items:center; font-size:18px; color:#234838; background:#f1f3ed;
}
.roof-accessories .choice-label { margin:12px 0 6px; }
.finish-swatch:disabled { cursor:default; opacity:.45; }
@media (hover:hover) {
  .finish-swatch:hover { background:#e9eee4; }
}

/* Online browsing remains primary; the printable catalog is a secondary link. */
.roofing-site .catalog-callout-actions { display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.roofing-site .catalog-callout-actions .button { margin-top:0; }
.roofing-site .catalog-pdf-link {
  display:inline-flex; align-items:center; gap:6px; min-height:44px;
  color:inherit; font-size:16px; line-height:1.5; text-decoration:underline;
  text-underline-offset:.2em;
}
.roofing-site .catalog-pdf-link:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
@media(max-width:560px) {
  .roofing-site .catalog-callout-actions { margin-top:20px; }
}