/* R76. Snow-white stationery, black ink, and the original product colours.
 * Load last. No image filters, recolouring, cropping, or texture overlays.
 * Paper is expressed through white space, fine rules, and restrained shadows.
 */
:root {
  --paper-white: #fff;
  --paper-ink: #151515;
  --paper-muted: #4b4b4b;
  --paper-line: #d6d6d6;
  --ink: var(--paper-ink);
  --muted: var(--paper-muted);
  --line: var(--paper-line);
  --soft: var(--paper-white);
  --paper: var(--paper-white);
  --r69-ink: var(--paper-ink);
  --r69-muted: var(--paper-muted);
  --r69-line: var(--paper-line);
  --r69-paper: var(--paper-white);
  color: var(--paper-ink);
  background: var(--paper-white);
}

body,
body[data-page="home"],
body[data-page="category"],
body[data-page="design-index"],
body[data-page="story"],
body[data-page="barrier"],
body[data-page="product"]:has(.model-overview),
.hl-studio,
.barrier-entry {
  --ink: var(--paper-ink);
  --muted: var(--paper-muted);
  --line: var(--paper-line);
  --soft: var(--paper-white);
  --paper: var(--paper-white);
  color: var(--paper-ink);
  background: var(--paper-white);
}

body[data-page] .header,
body[data-page] footer,
body[data-page] .header.navigation-enhanced > .primary-navigation,
#main,
.world-portal {
  background: var(--paper-white);
  color: var(--paper-ink);
}

.world-portal {
  --wp-ink: var(--paper-ink);
  --wp-muted: var(--paper-muted);
  --wp-line: var(--paper-line);
  --wp-paper: var(--paper-white);
  --wp-accent: var(--paper-white);
}

.brand-entry,
.brand-entry-reasons,
.brand-entry-service {
  --entry-ink: var(--paper-ink);
  --entry-muted: var(--paper-muted);
  --entry-stone: var(--paper-white);
  --entry-rule: var(--paper-line);
}

/* No tinted panel competes with the white product presentation. */
:is(.wp-finder, .world-guidance, .world-journey, .premium-world-visual,
    .r69-finder form, .r69-aqua-feature, .r69-configurator,
    .r71-scene-switch, .brand-entry, .brand-entry-service,
    .hl-story-entry, .hl-story-panel, .shared-service-note,
    .home-lifetime, .home-assistance, .fg-card, .fg-sample-check,
    .fg-sample-note, .colour-zone-figure, .hl-fabric-choice) {
  background: var(--paper-white);
  color: var(--paper-ink);
  border-color: var(--paper-line);
}

body[data-page="category"] #main > .premium-world-stage,
.world-guidance,
.world-journey {
  color: var(--paper-ink);
}

.wp-finder,
.world-journey,
.brand-entry-service,
.shared-service-note {
  border-block: 1px solid var(--paper-line);
}

body[data-page="story"] .header,
body[data-page="story"] .header.navigation-enhanced > .primary-navigation,
body[data-page="story"] .menu-toggle,
body[data-page="story"] #main > .idea-story-outlook,
body[data-page="story"] #main > .zip-development,
body[data-page="barrier"] #main > .barrier-principle,
body[data-page="barrier"] #main > .barrier-ziparound {
  --ink: var(--paper-ink);
  --muted: var(--paper-muted);
  --line: var(--paper-line);
  --soft: var(--paper-white);
  background: var(--paper-white);
  color: var(--paper-ink);
}

/* Transparent product art also sits on white. Actual image pixels are intact. */
:is(.wp-world-image, .world-guidance-choice figure, .r69-world-image,
    .r69-product-card figure, .r69-product-gallery .image-button,
    .hl-studio-image-wrap, .brand-entry-image, .image-button,
    .model-overview .image-button, .mc-frame, .mc-zoom) {
  background: var(--paper-white);
}

.wp-world-image {
  border: 1px solid var(--paper-line);
  box-shadow: 0 15px 25px -24px #15151560;
}

.wp-world-image figcaption {
  background: linear-gradient(transparent, #151515e6);
  color: #fff;
}

.r69-hero-visual img,
.world-catalogue-reference .image-button img,
.product-thumbs img,
.image-tabs img,
dialog figure > img,
.header .world-navigation .menu-previews img {
  background: var(--paper-white);
}

.premium-world-stage .premium-world-visual > figcaption,
.world-catalogue-reference figcaption,
.premium-world-stage .world-status,
.premium-world-stage .world-description,
.premium-world-stage .eyebrow,
.world-catalogue-reference > summary,
.world-guidance-heading > p:last-child,
.world-guidance-choice p,
.world-journey li > span,
.r75-style-detail,
.r75-style-status,
.r75-style-progress,
.r75-config-steps span,
.colour-zone-figure figcaption strong,
.hl-studio .colour-zone-figure figcaption,
.brand-entry-note,
.brand-entry-reason-list article > span {
  color: var(--paper-muted);
}

.world-portal em,
.r69-hero h1 em,
.r69-aqua-feature h2 em,
.r69-section h2 em,
.brand-entry-service h2,
.colour-zone-figure figcaption strong {
  color: var(--paper-ink);
}

.brand-entry-service .eyebrow,
.brand-entry-service-copy > p:not(.eyebrow),
.brand-entry-service-links > p,
body[data-page] footer p,
body[data-page] footer .footer-nav-group h2,
body[data-page] footer .footer-note {
  color: var(--paper-muted);
}

body[data-page="story"] footer .brand-switch > span {
  color: var(--paper-muted);
}

body[data-page] footer {
  border-top: 1px solid var(--paper-ink);
}

body[data-page] footer .footer-nav-group h2 {
  color: var(--paper-ink);
}

.r69-image-tag,
.hl-studio-badge,
.brand-entry-image-label {
  background: #fffffff2;
  color: var(--paper-ink);
  border: 1px solid var(--paper-line);
  backdrop-filter: none;
}

/* Black actions and fine underlines echo the seams of the white products. */
body[data-page] .button:not(.secondary),
body[data-page] .premium-world-stage .world-summary > .button,
body[data-page] .hl-studio .hl-studio-actions .button,
.wp-primary-link,
.r69-mobile-config {
  background: var(--paper-ink);
  border-color: var(--paper-ink);
  color: #fff;
  border-radius: 0;
}

body[data-page] .button:not(.secondary):hover,
body[data-page] .premium-world-stage .world-summary > .button:hover,
body[data-page] .hl-studio .hl-studio-actions .button:hover,
.wp-primary-link:hover {
  background: #333;
  border-color: #333;
  color: #fff;
}

body[data-page] .button.secondary,
body[data-page] .button.secondary:hover,
.wp-finder select,
.r69-configurator select,
.r69-finder select,
.r75-share input {
  background: var(--paper-white);
  color: var(--paper-ink);
  border-color: #858585;
}

/* This older rule has !important declarations; keep its text link legible. */
.model-overview .model-summary .model-secondary .button {
  color: var(--paper-ink) !important;
}

.wp-world-index > a:hover,
.wp-text-link:hover,
.hl-story-entry p:not(.eyebrow) {
  color: var(--paper-ink);
}

.wp-world-link:hover .wp-world-action,
.world-guidance-choice:hover,
.r75-style-starts button:hover,
.hl-fabric-choice:hover,
.fg-card.fg-current {
  border-color: var(--paper-ink);
}

.fg-card.fg-current {
  box-shadow: inset 0 0 0 1px var(--paper-ink);
}

/* Keep every palette and fabric swatch's own colour/texture declaration. */
.r75-style-starts button,
.r75-style-starts button:hover,
.r75-style-starts button[aria-pressed="true"],
.r72-colour-picks button:hover,
.r72-colour-picks button[aria-pressed="true"],
.hl-scene-control button:hover:not([aria-pressed="true"]),
.r71-scene-switch button[aria-pressed="false"]:hover,
.hl-studio .fg-choose:hover:not(:disabled):not([aria-pressed="true"]) {
  background: var(--paper-white);
  color: var(--paper-ink);
}

.r75-style-starts button {
  border-color: var(--paper-line);
}

.r75-style-starts button[aria-pressed="true"],
.r72-colour-picks button[aria-pressed="true"] {
  border-color: var(--paper-ink);
}

.r75-style-starts button[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px var(--paper-ink);
}

.colour-zone-buttons button {
  background: var(--paper-white);
  color: var(--paper-ink);
  border-color: #858585;
}

.r71-scene-switch button[aria-pressed="true"],
.colour-zone-buttons button[aria-pressed="true"],
.hl-studio .fg-choose[aria-pressed="true"] {
  background: var(--paper-ink);
  color: #fff;
  border-color: var(--paper-ink);
}

.hl-colour-choice input:checked + .hl-colour-chip {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--paper-ink);
}

.hl-fabric-choice input:checked + .hl-fabric-swatch {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--paper-ink);
}

.hl-fabric-detail,
.r69-mode-feedback {
  border-left-color: var(--paper-ink);
}

.brand-entry-service-links > a,
.brand-entry-service-links > a:last-child,
.world-guidance-choice,
.world-journey li,
.world-catalogue-reference,
.r75-config-steps a,
.r69-saved-summary,
.r69-saved-summary > div {
  border-color: var(--paper-line);
}

.r69-saved-summary dd {
  color: var(--paper-ink);
}

.r69-saved-summary dt {
  color: var(--paper-muted);
}

.barrier-image-wrap,
.barrier-zip-detail img,
.barrier-option,
.barrier-option input:checked ~ span,
.barrier-arrangement > span,
.barrier-arrangement input:checked + span,
.barrier-plan,
.barrier-plan [data-barrier-plan-drawing],
.barrier-controls .field :is(input, select, textarea),
.barrier-scene-control button:hover:not([aria-pressed="true"]) {
  background: var(--paper-white);
}

.barrier-badge {
  background: #fffffff2;
  color: var(--paper-ink);
  border: 1px solid var(--paper-line);
}

.r69-mode-feedback {
  background: var(--paper-white);
  color: var(--paper-ink);
}

.world-portal :is(a, button, select):focus-visible,
.world-guidance :is(a, button):focus-visible,
.world-journey a:focus-visible,
.premium-world-stage :is(a, button, summary):focus-visible,
:is(.r69-hero, .r69-section, .r69-aqua-feature, .r69-product-layout)
  :is(a, button, select, input, summary):focus-visible,
.r71-scene-switch button:focus-visible,
.r72-colour-picks button:focus-visible,
.r72-colour-preview:focus-visible,
.r75-style-starts button:focus-visible,
.r75-share button:focus-visible,
.r75-config-steps a:focus-visible,
.brand-entry-service a:focus-visible {
  outline: 3px solid var(--paper-ink);
  outline-offset: 5px;
}

@media (max-width: 760px) {
  /* Main descriptions and form fields remain comfortable at arm's length. */
  .wp-intro-guide > p,
  .wp-world-copy > p:not(.wp-kicker),
  .wp-starting-points article > p:not(.wp-kicker),
  .wp-finder-copy > p:not(.wp-kicker),
  .wp-journey li p,
  .world-guidance-choice p,
  .world-journey li p,
  .premium-world-stage .world-description,
  .r69-product-intro > p:last-child,
  .r69-product-facts p,
  .r69-configurator > p:not(.eyebrow),
  .r70-canopy-info > p:not(.eyebrow),
  .r70-canopy-feature > div > p:not(.eyebrow),
  .r69-lifetime > div > p:not(.eyebrow),
  .r69-product-ending > div > p:not(.eyebrow),
  .r69-config-group > legend,
  .r69-extra,
  .hl-studio .hl-studio-heading > p,
  .hl-studio .hl-material-intro > p:not(.eyebrow),
  .hl-studio .hl-colour-description,
  .hl-studio .hl-fabric-detail p,
  .hl-studio .hl-material-details details > p,
  .hl-studio .hl-layer-stack p,
  .r75-share p,
  .r75-share input,
  .wp-finder select,
  .r69-configurator select,
  .r69-finder select {
    font-size: 1rem;
    line-height: 1.7;
  }

  .wp-world-copy > p:not(.wp-kicker),
  .r69-extra,
  .r75-share input {
    overflow-wrap: anywhere;
  }

  .wp-intro,
  .wp-world-copy,
  .wp-finder form,
  .r69-configurator,
  .world-guidance-choice > div {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wp-world-image,
  .r75-style-starts button {
    transition: none;
  }
}

@media print {
  .wp-world-image {
    box-shadow: none;
  }
}

/* Six round-lounge palettes, including the explicit white preference. */
.r72-colour-picks{grid-template-columns:repeat(6,minmax(0,1fr));max-width:600px}
.r72-colour-picks button:hover,.r72-colour-picks button[aria-pressed="true"],.r75-style-starts button:hover,.r75-style-starts button[aria-pressed="true"]{background:#fff;border-color:#151515;color:#151515}
.r72-colour-picks button:focus-visible,.r72-colour-preview:focus-visible{outline:3px solid #151515;outline-offset:4px}
@media(max-width:600px){.r72-colour-picks{grid-template-columns:repeat(3,minmax(0,1fr))}}
