/* Homepage finish, 14 October 2026.
   Loaded after existing home styles. The header and #collections are untouched.
   Scope requires body.home-approved on the six homepage documents only. */

body.home-approved #main > #collections ~ * {
  --ink: #252a30;
  --muted: #59616b;
  --paper: #fff;
  --white: #fff;
  --line: #e1e5e9;
  background: #fff !important;
  color: #252a30;
  border-color: #e1e5e9;
}

/* White surfaces, including the panels that previously had dark/warm fills. */
body.home-approved #main > #collections ~ * :is(
  .category-tile, .category-image, .category-label, .studio-collage,
  .product-card, .product-image, .product-card-body, .product-label,
  .doner-viewer, .viewer-poster, .range-story, .story-copy,
  .story-photo, .grill-photo, .specialist-card, .specialist-photo,
  .specialist-copy, .menu-guide, .learning-card, .mechanism-stage,
  .finder-result, .personal-media, .contact-form, .empty-results
) {
  background: #fff !important;
  border-color: #e1e5e9;
}

body.home-approved #main > #collections ~ * :is(
  h2, h3, h4, summary, .category-label, .product-card-body,
  .story-copy, .specialist-copy, .result-head, .personal-copy
) { color: #252a30; }

body.home-approved #main > #collections ~ * :is(
  p, .intro, .subtle, .family-intro, .story-intro, .story-note,
  .visual-foot, .format-tag, .material-label, .field-title,
  .finder-tip, .card-specs, .product-code, .catalog-note,
  .contact-links, .home-department-link, .results-line, .specs dt
) { color: #59616b; }

body.home-approved #main > #collections ~ * :is(.eyebrow, .feature-index) {
  color: #815131;
}

body.home-approved #main > #collections ~ * :is(.text-link, .home-department-link a) {
  color: #71462e;
}

/* Beat older, highly specific !important family-card rules without recolouring
   or replacing the photographs themselves. */
body.home-approved #main #product-families.category-rail,
body.home-approved #main #product-explorer.product-explorer {
  background: #fff !important;
  color: #252a30;
}
body.home-approved #main #product-families #family-track a.category-tile.studio-family-card,
body.home-approved #main #product-families #family-track a.category-tile.studio-family-card > .category-label,
body.home-approved #main #product-families #family-track a.category-tile.studio-family-card .studio-collage {
  background: #fff !important;
  color: #252a30 !important;
  border-color: #e1e5e9;
}
body.home-approved #main #product-families #family-track .category-tile span {
  color: #252a30 !important;
}
body.home-approved #main #product-families #family-track .category-tile .studio-arrow {
  color: #815131 !important;
}
body.home-approved #main #product-families #family-track .category-image img,
body.home-approved #main #product-families #family-track .studio-collage .studio-object img {
  background: transparent !important;
}
body.home-approved #main #product-families #family-track .studio-floor {
  background: transparent !important;
  box-shadow: none;
}
body.home-approved #main #product-families :is(h2, .eyebrow),
body.home-approved #main #product-explorer .eyebrow { color: #815131; }
body.home-approved #main #product-families .family-intro,
body.home-approved #main #product-explorer .explorer-heading > p { color: #59616b; }

/* Remove decorative dark veils. Keep photo pixels and dimensions intact. */
body.home-approved #main > #collections ~ * :is(.promo, .promo-guide, .story-photo)::after {
  background: none !important;
  box-shadow: none;
  pointer-events: none;
}
body.home-approved #main > #collections ~ * .personal-media::after {
  background: #e1e5e9;
}
body.home-approved #main > #collections ~ * :is(.story-photo, .grill-photo) > img,
body.home-approved #main > #collections ~ * .learning-card > img {
  background: #fff !important;
}
body.home-approved #main > #collections ~ * :is(.visual-label, .photo-tag) {
  color: #414952 !important;
  background: #fff !important;
  border-color: #e1e5e9;
}
body.home-approved #main > #collections ~ * .photo-tag {
  padding: 14px 20px;
  border-top: 1px solid #e1e5e9;
}

/* The promotion captions have their own white area, so removing the dark
   image overlay never leaves dark lettering over a dark photograph. */
body.home-approved #main > #collections ~ .promo-grid .promo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 180px auto;
  height: auto;
  min-height: 0;
  padding: 0;
  background: #fff !important;
  color: #252a30;
  border: 1px solid #e1e5e9;
}
body.home-approved #main > #collections ~ .promo-grid .promo > img {
  position: static;
  inset: auto;
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: 100%;
  height: 180px;
  object-fit: contain;
  opacity: 1;
  filter: none;
  transform: none;
  background: #fff;
}
body.home-approved #main > #collections ~ .promo-grid .promo > div {
  position: static;
  grid-column: 1;
  grid-row: 2;
  z-index: 1;
  padding: 16px 18px;
  background: #fff;
  color: #252a30;
}
body.home-approved #main > #collections ~ .promo-grid .promo :is(h2, span) {
  color: #252a30;
}

/* Viewer chrome is light; the renderer owns any opaque WebGL scene colour. */
body.home-approved #main #product-explorer .doner-viewer {
  border-color: #dce2e7;
  box-shadow: 0 12px 32px #17233108;
}
body.home-approved #main #product-explorer .viewer-launch { background: none; }
body.home-approved #main #product-explorer :is(.viewer-launch button, .viewer-controls button) {
  background: #fff;
  color: #333a42;
  border-color: #b9c1c9;
  box-shadow: 0 3px 12px #17233112;
}
body.home-approved #main #product-explorer .viewer-controls button[aria-pressed="true"] {
  background: #815131;
  color: #fff;
  border-color: #815131;
}
body.home-approved #main #product-explorer p.viewer-status {
  color: #4f5862;
  background: #fff;
  border-radius: 6px;
  padding: 5px 8px;
}

/* Original charcoal products: two equal, uncropped images on a white surface. */
body.home-approved #main > #collections ~ * .charcoal-original-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(6px, 1.3vw, 16px);
  align-items: center;
  width: 100%;
  min-width: 0;
  background: #fff !important;
}
body.home-approved #main > #collections ~ * .charcoal-original-pair > img {
  position: static;
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 300px;
  object-fit: contain;
  object-position: center;
  background: #fff !important;
  opacity: 1;
  filter: none;
  transform: none;
}

/* Clear contrast for controls, while preserving distinct selected states. */
body.home-approved #main > #collections ~ * :is(.btn, .btn.light) {
  background: #815131;
  color: #fff;
  border-color: #815131;
}
body.home-approved #main > #collections ~ * :is(.btn, .btn.light):hover {
  background: #633c26;
  border-color: #633c26;
}
body.home-approved #main > #collections ~ * :is(.btn, .btn.light) > span { color: inherit; }
body.home-approved #main > #collections ~ * .choice {
  background: #fff;
  color: #454d56;
  border-color: #bfc6cd;
}
body.home-approved #main > #collections ~ * .choice[aria-pressed="true"],
body.home-approved #main > #collections ~ * .add-quote[aria-pressed="true"] {
  background: #815131;
  color: #fff;
  border-color: #815131;
}
body.home-approved #main > #collections ~ * :is(a, button, input, select, textarea, summary):focus-visible,
body.home-approved > .footer a:focus-visible {
  outline: 2px solid #815131;
  outline-offset: 4px;
}

/* Final information sections share a comfortable reading width and size. */
body.home-approved #main > :is(.faq, .buying-support, .site-directory, .contact) {
  padding-block: 44px;
  border-color: #e1e5e9;
}
body.home-approved #main > :is(.faq, .buying-support, .site-directory, .contact) > .wrap,
body.home-approved > .footer > .wrap {
  width: calc(100% - 48px);
  max-width: 1180px;
  margin-inline: auto;
}
body.home-approved #main > :is(.faq, .buying-support, .site-directory, .contact) :is(
  p, .intro, .subtle, .text-link, .contact-links, .home-department-link,
  label, .support-footer > span, .directory-links a
) {
  font-size: 16px;
  line-height: 1.6;
  color: #4f5862;
}
body.home-approved #main > :is(.faq, .buying-support, .site-directory, .contact) h2 {
  font-size: clamp(28px, 2.8vw, 38px);
  line-height: 1.2;
  max-width: 720px;
  color: #252a30;
}
body.home-approved #main > :is(.faq, .buying-support, .site-directory, .contact) .eyebrow {
  font-size: 12px;
  color: #815131;
}
body.home-approved #main .faq-grid,
body.home-approved #main .contact-grid { gap: 40px; }
body.home-approved #main .questions summary {
  font-size: 18px;
  line-height: 1.4;
  min-height: 48px;
  padding-block: 16px;
  color: #252a30;
}
body.home-approved #main .questions details,
body.home-approved #main :is(.support-grid article, .support-footer, .directory-links a) {
  border-color: #e1e5e9;
}
body.home-approved #main .support-grid { gap: 28px; }
body.home-approved #main .support-grid h3 { font-size: 20px; line-height: 1.35; }
body.home-approved #main .support-grid p { max-width: none; }
body.home-approved #main .directory-links { gap: 0 24px; margin-top: 24px; }
body.home-approved #main .directory-links a { padding-block: 12px; }
body.home-approved #main .contact .intro { max-width: 50ch; margin-block: 18px 22px; }
body.home-approved #main .contact-form { gap: 16px; padding: 0; }
body.home-approved #main .contact-form :is(input, select, textarea) {
  font-size: 16px;
  line-height: 1.5;
  min-height: 46px;
  color: #252a30;
  background: #fff;
  border: 1px solid #c8cfd6;
  border-radius: 6px;
}
body.home-approved #main .contact-form :is(input, textarea)::placeholder { color: #69737e; }
body.home-approved #main .contact-form select option { background: #fff; color: #252a30; }
body.home-approved #main .home-department-link { gap: 16px; border-color: #e1e5e9; }

/* Compact white footer: readable type, shared width, no oversized empty gaps. */
body.home-approved > .footer {
  background: #fff !important;
  color: #4f5862;
  border-top: 1px solid #e1e5e9;
  padding: 32px 0 24px;
  font-size: 16px;
  line-height: 1.55;
}
body.home-approved > .footer :is(a, p, .footer-bottom, .back-top) {
  font-size: 16px;
  line-height: 1.55;
  color: #4f5862;
}
body.home-approved > .footer a { overflow-wrap: anywhere; }
body.home-approved > .footer a:hover { color: #71462e; }
body.home-approved > .footer .main-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4px 28px;
  padding-block: 0 20px;
  border-bottom: 1px solid #e1e5e9;
}
body.home-approved > .footer .main-links a {
  font-weight: 600;
  color: #252a30;
}
body.home-approved > .footer .footer-shortcuts {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
  gap: 28px;
  padding-block: 24px;
}
body.home-approved > .footer .footer-shortcuts h3 {
  font-size: 18px;
  line-height: 1.35;
  color: #252a30;
  margin-bottom: 10px;
}
body.home-approved > .footer .footer-shortcuts a {
  display: flex;
  align-items: flex-start;
  min-height: 44px;
  margin: 0;
  padding-block: 5px;
  line-height: 1.45;
}
body.home-approved > .footer .footer-shortcuts > div:first-child {
  column-gap: 24px;
  align-content: start;
}
body.home-approved > .footer .footer-top {
  display: grid;
  grid-template-columns: 160px minmax(0, 1.2fr) minmax(0, 1fr) auto;
  align-items: start;
  gap: 24px;
  padding-block: 24px;
  border-color: #e1e5e9;
}
body.home-approved > .footer .brand { width: 160px; max-width: 100%; }
body.home-approved > .footer .brand img {
  filter: none;
  mix-blend-mode: normal;
}
body.home-approved > .footer p { margin: 0; max-width: 38ch; }
body.home-approved > .footer .footer-bottom {
  padding-top: 18px;
  gap: 12px;
  border-color: #e1e5e9;
}

@media (max-width: 900px) {
  body.home-approved > .footer .footer-top {
    grid-template-columns: 160px minmax(0, 1fr);
  }
  body.home-approved > .footer .footer-shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
  body.home-approved > .footer .footer-shortcuts > div:first-child { grid-column: 1 / -1; }
  body.home-approved > .footer .footer-shortcuts > div:last-child { grid-column: auto; }
}

@media (max-width: 650px) {
  body.home-approved #main > :is(.faq, .buying-support, .site-directory, .contact) { padding-block: 32px; }
  body.home-approved #main > :is(.faq, .buying-support, .site-directory, .contact) > .wrap,
  body.home-approved > .footer > .wrap { width: calc(100% - 32px); }
  body.home-approved #main .faq-grid,
  body.home-approved #main .contact-grid { gap: 24px; }
  body.home-approved #main .support-grid { gap: 22px; }
  body.home-approved #main > #collections ~ .promo-grid .promo { grid-template-rows: 160px auto; }
  body.home-approved #main > #collections ~ .promo-grid .promo > img { height: 160px; }
  body.home-approved > .footer { padding-block: 26px 22px; }
  body.home-approved > .footer .main-links { gap: 2px 20px; padding-bottom: 18px; }
  body.home-approved > .footer .footer-shortcuts { column-gap: 20px; }
  body.home-approved > .footer .footer-shortcuts > div:first-child { column-gap: 20px; }
  body.home-approved > .footer .footer-top { grid-template-columns: minmax(0, 1fr) auto; gap: 18px; }
  body.home-approved > .footer .footer-top p { grid-column: 1 / -1; max-width: none; }
  body.home-approved > .footer .footer-top .back-top { grid-column: 2; grid-row: 1; }
  body.home-approved > .footer .brand { width: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  body.home-approved #main > #collections ~ * :is(.promo > img, .charcoal-original-pair > img) {
    transition: none;
  }
}