/* Photo wall (owner, Nov 1 2026): layout A of previews/product-page-layouts.html. Colours (owner, Nov 1 2026, second
   pass): forest green at the top, sage for the tabs in the middle, forest green again at the bottom; no brown letters.
   (owner, Nov 3 2026: "too dark" - the White colourway at the end of this file now paints the page light.)
   On top of the photo layout (product-cinema.css), only on heroes with .product-hero--wall: the first photo big and whole,
   every other photo whole in rows that end flush on both sides (js/product-wall.js sizes them: never cropped, no gaps),
   and the buy panel beside them in cream, always in view while the photos scroll by. */

/* ── top: forest ── */
section.product-hero.product-hero--cinema.product-hero--wall.bg-tertiary { background: #1E2B20 !important; }
section.product-hero--wall { --pw-gap: 8px; --pw-ink: #1E2B20; --pw-muted: #4D5C50; --pw-line: #C0CCB4; --pw-card: #F3F3ED; --pw-soft: #CDD8C2; --pw-label: #53754B; }
section.product-hero--wall .product-hero__wrap { max-width: 1320px; margin: 0 auto; padding: 28px 24px 64px; }
section.product-hero--wall .product-hero__grid { height: auto !important; grid-template-columns: minmax(0, 1.7fr) minmax(360px, 1fr) !important; gap: 0 44px; align-items: start; background: none; }
section.product-hero--wall .product-gallery { height: auto; }
section.product-hero--wall .product-gallery > .pg-side { height: auto; grid-template-columns: minmax(0, 1fr) !important; }
section.product-hero--wall .pc-story-nav,
section.product-hero--wall .pc-shot__n { display: none !important; }

/* the photos: flush rows. Until the script has sized them, each row already fills by the photos' shapes (--ir): one height
   per row, every photo whole. Rows never stretch a photo's box taller than the photo (align-items: flex-start). */
section.product-hero--wall .pc-story { height: auto; overflow: visible; display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--pw-gap); align-content: flex-start; background: none; scroll-snap-type: none; }
section.product-hero--wall .pc-shot,
section.product-hero--wall .pc-shot[style*="--ir"],
section.product-hero--wall .pc-shot:not(:first-child) { flex: var(--ir, 1.3333) 1 calc(var(--ir, 1.3333) * 230px); width: auto; max-width: none; min-width: 0; border-radius: 8px; overflow: hidden; background: #283A2C; scroll-snap-align: none; }
section.product-hero--wall .pc-shot:first-child,
section.product-hero--wall .pc-shot[style*="--ir"]:first-child { flex: 1 1 100%; width: 100%; border-radius: 12px; }
section.product-hero--wall .pc-story.is-sized .pc-shot:not(:first-child) { flex: none; }
/* (Nov 2 2026, speed) the smaller photos stay invisible for the moment until their rows are final, so nothing jumps while
   the page loads (they took the browser's first guess, then moved); the big first photo shows at once. If the script
   never runs they appear anyway after 1.5 s. */
section.product-hero--wall .pc-story:not(.is-sized) .pc-shot:not(:first-child) { visibility: hidden; animation: pw-show 0s 1.5s forwards; }
@keyframes pw-show { to { visibility: visible; } }
section.product-hero--wall .pc-shot > a, section.product-hero--wall .pc-shot > button { width: 100%; }
section.product-hero--wall .pc-shot img,
section.product-hero--wall .pc-shot[style*="--ir"] img,
section.product-hero--wall .pc-shot:not(:first-child) img { width: 100%; height: auto; max-width: none; max-height: none; transition: transform .35s ease; }
section.product-hero--wall .pc-shot img.is-sizing { aspect-ratio: 4 / 3; width: 100%; }
section.product-hero--wall .pc-shot:not(:first-child):hover img { transform: scale(1.03); }
/* "See all 44 photos": the rest wait (and don't load) until asked for */
section.product-hero--wall .pc-shot.is-later { display: none; }
.pw-all { flex: 1 1 100%; display: flex; justify-content: center; padding-top: 10px; }
.pw-all button { padding: 12px 26px; border: 1.5px solid rgba(243, 243, 237, .7); border-radius: 999px; background: transparent; color: #F3F3ED; font: 700 14.5px/1.2 Figtree, system-ui, sans-serif; cursor: pointer; transition: background .15s, border-color .15s; }
.pw-all button:hover { background: rgba(243, 243, 237, .08); border-color: #F3F3ED; }
.pw-all button:focus-visible { outline: 2px solid #A9C79A; outline-offset: 2px; }

/* the buy panel: a cream card that is always in view. js/product-wall.js sets its sticky top: just under the menu, or,
   when the panel is taller than the window, low enough that it scrolls to its last line and then stays */
section.product-hero--wall .product-hero__copy { position: sticky; top: calc(var(--pc-top, 84px) + 18px); align-self: start; height: auto; min-height: 0; overflow: visible !important; padding: 32px !important; border-radius: 16px; background: var(--pw-card); color: var(--pw-ink); box-shadow: 0 18px 40px rgba(0, 0, 0, .25); --pc-g: 18px; }
section.product-hero--wall .product-hero__copy > :first-child { margin-top: 0 !important; }
section.product-hero--wall .pc-kick { color: var(--pw-label); }
section.product-hero--wall .product-hero__copy .product-hero-title { color: var(--pw-ink) !important; }
section.product-hero--wall .wish-btn--hero { top: 28px; right: 26px; }
section.product-hero--wall .pv3-price b { color: var(--pw-ink); }
section.product-hero--wall .pv3-price__row small { color: var(--pw-muted); }
section.product-hero--wall .pc-lead { color: var(--pw-muted); }
section.product-hero--wall .product-hero__copy .pv3-houzz { border-top-color: var(--pw-line); color: var(--pw-ink); }
section.product-hero--wall .product-hero__copy .pv3-houzz__yrs { color: var(--pw-muted); }
section.product-hero--wall .product-hero__copy .pv3-houzz__logo { color: #4DA02D; }
section.product-hero--wall .pc-facts li::before { color: #53754B; }
/* Configure & Price in the button green, Discuss Project outlined in the dark green, each on one line */
section.product-hero--wall .frcfg-btn-green { background: #53754B !important; border-color: #53754B !important; color: #fff !important; }
section.product-hero--wall .frcfg-btn-green:hover:not(:disabled) { background: #46653F !important; border-color: #46653F !important; }
section.product-hero--wall .frcfg .frcfg-cta-group .frcfg-btn { white-space: nowrap; }
section.product-hero--wall .frcfg .frcfg-cta-group .frcfg-btn-outline { background: transparent; color: var(--pw-ink); border-color: var(--pw-ink); }
section.product-hero--wall .frcfg .frcfg-cta-group .frcfg-btn-outline:hover { background: rgba(30, 43, 32, .06); border-color: var(--pw-ink); }
/* the deposit line on a soft sage */
section.product-hero--wall .product-hero__copy button.pv3-deposit { background: var(--pw-soft) !important; color: var(--pw-ink) !important; }
section.product-hero--wall .product-hero__copy button.pv3-deposit:hover { background: #C2CFB5 !important; }
section.product-hero--wall .product-hero__copy .pv3-deposit svg { color: var(--pw-ink); }
section.product-hero--wall .product-hero__copy .pv3-deposit__txt b,
section.product-hero--wall .product-hero__copy .pv3-deposit__txt span,
section.product-hero--wall .product-hero__copy .pv3-deposit__txt em { color: var(--pw-ink) !important; }
section.product-hero--wall .product-hero__copy .pv3-deposit__txt b { font-weight: 700 !important; }
/* the ways to reach us stay in the panel (there is no photo row to move them to), 2 x 2 */
section.product-hero--wall .product-hero__copy > .pc-contact--moves { display: grid !important; }
section.product-hero--wall .product-hero__copy .pc-contact { grid-template-columns: 1fr 1fr !important; gap: 8px; }
section.product-hero--wall .product-hero__copy .pc-contact__title { color: var(--pw-label); }
section.product-hero--wall .product-hero__copy .pc-contact > a,
section.product-hero--wall .product-hero__copy .pc-contact > button { flex-direction: column; justify-content: center; gap: 3px; padding: 11px 6px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--pw-ink); background: #fff; border-color: var(--pw-line); }
section.product-hero--wall .product-hero__copy .pc-contact > a:hover,
section.product-hero--wall .product-hero__copy .pc-contact > button:hover { background: #EEF2E8; border-color: #9FB092; }
section.product-hero--wall .product-hero__copy .pc-contact svg { color: #53754B; }
section.product-hero--wall .product-hero__copy .pc-contact span { white-space: normal; }
section.product-hero--wall .product-hero__copy .pc-contact small { display: block; font-size: 11.5px; font-weight: 400; color: var(--pw-muted); }

/* laptop-height windows: the same panel with less room between its parts, so all of it fits under the menu */
@media (min-width: 1024px) and (max-height: 960px) {
  section.product-hero--wall .product-hero__copy { padding: 24px 28px !important; --pc-g: 12px; }
  section.product-hero--wall .product-hero__copy .product-hero-title { font-size: clamp(30px, 2.3vw, 40px) !important; }
  section.product-hero--wall .product-hero__copy .pc-contact > a,
  section.product-hero--wall .product-hero__copy .pc-contact > button { padding: 8px 6px; }
  section.product-hero--wall .wish-btn--hero { top: 20px; }
}

/* phones and tablets: the first photo, then the panel, then the rest of the photos */
@media (max-width: 1023px) {
  section.product-hero--wall .product-hero__wrap { padding: 12px 12px 40px; }
  section.product-hero--wall .product-hero__grid { display: flex !important; flex-wrap: wrap; align-items: flex-start; gap: 6px; }
  section.product-hero--wall .product-gallery,
  section.product-hero--wall .product-gallery > .pg-side,
  section.product-hero--wall .pc-story { display: contents !important; }
  section.product-hero--wall { --pw-gap: 6px; }
  section.product-hero--wall .pc-shot:first-child { order: 0; }
  section.product-hero--wall .product-hero__copy { order: 1; flex: 1 1 100%; position: relative; top: 0 !important; margin: 8px 0 10px; padding: 24px 20px !important; }
  section.product-hero--wall .pc-shot:not(:first-child), section.product-hero--wall .pw-all { order: 2; }
  section.product-hero--wall .pc-shot img { height: auto !important; }
  section.product-hero--wall .wish-btn--hero { top: 20px; right: 16px; }
}

/* ── middle: sage (the four tabs), cream pages with dark words ── */
main:has(.product-hero--wall) section.pv-folder { background: #DDE4D4 !important; }
main:has(.product-hero--wall) .pv-folder .pagenav__link { background: #C2CFB5 !important; color: #1E2B20 !important; }
main:has(.product-hero--wall) .pv-folder .pagenav__link:hover { background: #53754B !important; color: #fff !important; }
main:has(.product-hero--wall) .pv-folder .pagenav__link.active { background: #F3F3ED !important; color: #1E2B20 !important; }
main:has(.product-hero--wall) .pv-folder #content { background-color: #F3F3ED !important; background-image: none !important; }
main:has(.product-hero--wall) .pv-folder .pd-about li { background: #fff !important; border: 1px solid #DCE2D3 !important; }
main:has(.product-hero--wall) .pv-folder .product-details-nav__mobile { background: #F3F3ED; }
main:has(.product-hero--wall) .pv-folder .product-details-nav__mobile .product-details-nav__eyebrow { color: #53754B; }
main:has(.product-hero--wall) .pv-folder .product-details-nav__mobile .product-details-nav__current { color: #1E2B20; }
/* phones: the tab picker spans the width, so its name never runs under the arrow button */
@media (max-width: 1023px) { main:has(.product-hero--wall) .pv-folder .product-details-nav .pagenav__inner { flex: 1 1 100%; } }
/* no brown letters: the store's section links carry their own inline green and brown, and configurator-steps.css styles
   them by id (same id here); the PDF kind line was brown too */
main:has(.product-hero--wall) #product-panel-specifications .product-spec-grid__main a[href] span,
main:has(.product-hero--wall) #product-panel-specifications .product-spec-grid__main a[href] strong { color: inherit !important; }
main:has(.product-hero--wall) #product-panel-specifications .product-spec-grid__main > .main-sliding-div > p > a.popup-link { color: #1E2B20 !important; }
main:has(.product-hero--wall) .pv-folder .product-docs small,
main:has(.product-hero--wall) .pv-folder .pvf-eyebrow,
main:has(.product-hero--wall) .pv-folder .product-spec-heading__eyebrow { color: #53754B !important; }

/* ── bottom: forest ── */
/* More Pergolas: whole photos side by side at one height (each card as wide as its photo's shape) */
main:has(.product-hero--wall) .pmore { max-width: none; padding: 26px max(24px, calc((100% - 1272px) / 2)) 28px; background: #1E2B20; }
/* (owner, Nov 2: option B) homepage look: "Keep exploring", serif capitals, square tiles, the kind under each name, and
   an "All ..." tile closing the row instead of the underlined link */
main:has(.product-hero--wall) .pmore__head { display: block; margin-bottom: 16px; }
main:has(.product-hero--wall) .pmore__eyebrow { display: block; margin-bottom: 10px; font: 700 11px/1.2 'Figtree', system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #A9C79A; }
main:has(.product-hero--wall) .pmore__head h2 { color: #fff; font: 500 clamp(30px, 3vw, 42px)/1.05 'Cormorant Garamond', Georgia, serif; letter-spacing: .04em; text-transform: uppercase; }
main:has(.product-hero--wall) .pmore__head > a { display: none; }
main:has(.product-hero--wall) .pmore__grid { display: flex; align-items: stretch; gap: 4px; }
main:has(.product-hero--wall) .pmore__card { flex: var(--ir, 1.3333) 1 0; min-width: 0; position: relative; border-radius: 0; overflow: hidden; background: #283A2C; color: #fff; }
main:has(.product-hero--wall) .pmore__card img { width: 100%; height: auto; aspect-ratio: auto; object-fit: initial; border-radius: 0; background: none; transition: transform .35s ease; }
main:has(.product-hero--wall) .pmore__card:hover img { transform: scale(1.03); }
/* (Nov 2, speed) the photo's shape comes with the page (--ir): the card and its photo have their final size before it loads */
main:has(.product-hero--wall) .pmore__card[style*="--ir"] img { aspect-ratio: var(--ir); }
main:has(.product-hero--wall) .pmore__card:hover span { text-decoration: none; }
main:has(.product-hero--wall) .pmore__card span { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 70px 20px 18px; background: linear-gradient(180deg, rgba(14, 20, 16, 0), rgba(14, 20, 16, .7)); font: 500 20px/1.15 'Cormorant Garamond', Georgia, serif; letter-spacing: .06em; text-transform: uppercase; }
main:has(.product-hero--wall) .pmore__card small { display: block; margin-top: 6px; font: 700 10px/1.2 'Figtree', system-ui, sans-serif; letter-spacing: .2em; opacity: .85; }
main:has(.product-hero--wall) .pmore__all { flex: .9 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 18px; padding: 24px; background: #2A3B2D; color: #fff; text-decoration: none; border: 1px solid rgba(169, 199, 154, .35); transition: background-color .2s; }
main:has(.product-hero--wall) .pmore__all:hover { background: #33493A; }
main:has(.product-hero--wall) .pmore__all b { font: 500 24px/1.1 'Cormorant Garamond', Georgia, serif; letter-spacing: .06em; text-transform: uppercase; }
main:has(.product-hero--wall) .pmore__all i { display: inline-flex; align-items: center; gap: 10px; font: 700 11px/1.2 'Figtree', system-ui, sans-serif; font-style: normal; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; color: #A9C79A; }
main:has(.product-hero--wall) .pmore__all svg { width: 16px; height: 16px; transition: transform .2s; }
main:has(.product-hero--wall) .pmore__all:hover svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { main:has(.product-hero--wall) .pmore__all svg { transition: none; } }
@media (max-width: 900px) {
  main:has(.product-hero--wall) .pmore { padding: 22px 0 24px; }
  main:has(.product-hero--wall) .pmore__head { padding: 0 16px; }
  main:has(.product-hero--wall) .pmore__grid { overflow-x: auto; padding: 0 16px; scrollbar-width: none; }
  main:has(.product-hero--wall) .pmore__card { flex: none; height: 210px; }
  main:has(.product-hero--wall) .pmore__card img { width: auto; height: 100%; }
  main:has(.product-hero--wall) .pmore__card[style*="--ir"] { width: calc(210px * var(--ir)); }
  main:has(.product-hero--wall) .pmore__card[style*="--ir"] img { width: 100%; }
  main:has(.product-hero--wall) .pmore__all { flex: none; width: 200px; height: 210px; }
}
main:has(.product-hero--wall) .pd-trust { background: #1E2B20; border-color: #314536; }

/* ── (owner, Nov 3 2026) the White colourway, chosen from previews/product-page-light-colors.html: white behind the photos,
   a soft cream buy panel, the tabs on cream with white pages, "Keep exploring" and the badge strip on cream; the site
   menu stays forest green. Only colours change; it comes last so it paints over the forest colours above. ── */
section.product-hero.product-hero--cinema.product-hero--wall.bg-tertiary { background: #fff !important; }
section.product-hero--wall .product-hero__copy { background: #F3F3ED; border: 1px solid #E4E6DE; box-shadow: 0 1px 0 #E4E6DE, 0 14px 34px rgba(30, 43, 32, .1); }
section.product-hero--wall .pc-shot, section.product-hero--wall .pc-shot[style*="--ir"], section.product-hero--wall .pc-shot:not(:first-child) { background: #EEF0E9; }
.pw-all button { border-color: #1E2B20; color: #1E2B20; }
.pw-all button:hover { background: rgba(30, 43, 32, .07); border-color: #1E2B20; }
.pw-all button:focus-visible { outline-color: #53754B; }
main:has(.product-hero--wall) section.pv-folder { background: #F3F3ED !important; }
main:has(.product-hero--wall) .pv-folder .pagenav__link { background: #E4E8DC !important; color: #1E2B20 !important; }
main:has(.product-hero--wall) .pv-folder .pagenav__link:hover { background: #53754B !important; color: #fff !important; }
main:has(.product-hero--wall) .pv-folder .pagenav__link.active { background: #fff !important; color: #1E2B20 !important; }
main:has(.product-hero--wall) .pv-folder #content { background-color: #fff !important; }
main:has(.product-hero--wall) .pv-folder .product-details-nav__mobile { background: #fff; }
main:has(.product-hero--wall) .pmore { background: #F3F3ED; }
main:has(.product-hero--wall) .pmore__head h2 { color: #1E2B20; }
main:has(.product-hero--wall) .pmore__eyebrow { color: #53754B; }
main:has(.product-hero--wall) .pmore__all { background: #fff; color: #1E2B20; border-color: #D9DCCF; }
main:has(.product-hero--wall) .pmore__all:hover { background: #F7F8F3; }
main:has(.product-hero--wall) .pmore__all i { color: #53754B; }
main:has(.product-hero--wall) .pd-trust { background: #fff; border-color: #E4E6DE; }