/* Photo layout (owner, Oct 21 2026), only on heroes with .product-hero--cinema (Sun Gazebo with Sliding Doors first):
   full screen, edge to edge under the menu: the big photo fills two thirds, the buy panel sits beside it in dark green,
   and a row of labelled photos runs under both with the dark green reaching halfway down behind it.
   Approved from previews/product-page-layouts-3.html (1 · Cinema + photo row). */
/* no beige strip under the menu: the photo and panel start right at its bottom edge */
section.product-hero.product-hero--cinema { padding: 0 0 6px !important; margin-top: 0 !important; }
/* (owner, Oct 22 2026) under the photo row one plain white down to the tabs, the same as the page behind it
   (it was the hero's beige, then the page's white: two shades) */
section.product-hero.product-hero--cinema.bg-tertiary { background: #fff !important; }
.product-hero--cinema .product-hero__wrap { width: 100%; max-width: none; margin: 0; }
.product-hero--cinema .product-breadcrumbs { display: none; }
.product-hero--cinema .product-hero__grid { grid-template-columns: minmax(0, 2fr) minmax(380px, 1fr); gap: 0; align-items: stretch; background: #1E2B20; }

/* Cinema story (owner, Oct 21 2026, layout A of previews/product-page-layouts-4.html): the photo side and the panel fill
   the screen under the menu; the photos sit one under another, each whole (never cropped) with its caption, and scroll
   inside their column while the panel stays beside them. The single big photo with arrows is not used here. */
.product-hero--cinema { --pc-top: 84px; }
.product-hero--cinema .product-hero__grid { height: max(560px, calc(100vh - var(--pc-top))); }
.product-hero--cinema .product-gallery { position: relative; height: 100%; min-height: 0; }
.product-hero--cinema .product-gallery > .pg-side { height: 100%; display: grid !important; grid-template-columns: minmax(0, 1fr) 62px; gap: 0 !important; }
/* (owner, Oct 22 2026) the panel text sits close to the arrow strip, and the arrows are centered between the photo
   and the text: 14px on each side */
@media (min-width: 1024px) { .product-hero--cinema .product-hero__copy { padding-left: 0 !important; } }
.pc-story-nav { border-left: 0 !important; }
/* up / down buttons in a slim dark strip between the photos and the panel (never over a photo) */
.pc-story-nav { height: 100%; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: #1E2B20; border-left: 1px solid rgba(255, 255, 255, .08); }
.pc-story-nav button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #1F241D; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); transition: transform .15s, opacity .15s; }
.pc-story-nav button svg { width: 16px; height: 16px; }
.pc-story-nav button:hover:not(:disabled) { transform: scale(1.08); }
/* nothing above the first photo / below the last: the button turns the strip's darker green, no spinner */
.pc-story-nav button:disabled { background: #2C3D2F; color: #6E7F6F; box-shadow: none; cursor: default; }
.pc-story-nav button .fr-btn-spinner { display: none; }
/* one photo only: the strip keeps its place beside the panel, without buttons */
.pc-story-nav.is-single button { display: none; }
.pc-story-nav button:focus-visible { outline: 2px solid #A9C79A; outline-offset: 2px; }
.product-hero--cinema .pg-side > .flex:not(.fixed) { display: none !important; }
.pc-story { position: relative; height: 100%; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 4px; align-content: start; background: #151f17; scrollbar-width: none; }
/* no scrollbar (owner, Oct 21 2026): the up / down buttons beside it, the mouse wheel or the trackpad move it */
.pc-story::-webkit-scrollbar { display: none; }
.pc-shot { position: relative; margin: 0; }
.pc-shot > button { all: unset; display: block; width: 100%; cursor: zoom-in; }
.pc-shot img { display: block; width: 100%; height: auto; }
.pc-shot img.is-sizing { aspect-ratio: 4 / 3; background: #1E2B20; }
.pc-shot > button:focus-visible { outline: 3px solid #A9C79A; outline-offset: -3px; }
/* the panel scrolls on its own if it is taller than the screen */
.product-hero--cinema .product-hero__copy { overflow-y: auto; min-height: 0; scrollbar-width: none; justify-content: flex-start !important; }
/* centered when it fits, starts at the top (title in view) when it doesn't */
.product-hero--cinema .product-hero__copy > :first-child { margin-top: auto; }
.product-hero--cinema .product-hero__copy > :last-child { margin-bottom: auto; }
.product-hero--cinema .product-hero__copy::-webkit-scrollbar { display: none; }
/* which photo this is: a small, quiet tag in each photo's top-left corner */
.pc-shot__n { position: absolute; left: 12px; top: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, .5); color: rgba(255, 255, 255, .92); font: 500 11.5px/1.4 Figtree, system-ui, sans-serif; letter-spacing: .02em; pointer-events: none; }
/* (Oct 22 2026, speed) no frosted-glass blur on the counters: 119 live blurs made every click in the configurator slow */
/* (Oct 22 2026, speed) the browser skips the sections below the screen until they scroll near, and while the
   Configure & Price drawer is open the moving badge strip behind it rests */
main:has(.product-hero--cinema) section.pv-folder,
main:has(.product-hero--cinema) .pd-trust { content-visibility: auto; contain-intrinsic-size: auto 900px; }
body:has(.frcfg-layer.is-open) .pd-trust__track { animation-play-state: paused !important; }
/* zoom view (click a photo): above everything, almost full screen and centered */
body.is-gallery-modal-open .product-hero--cinema .product-gallery { z-index: 1000; }
.product-hero--cinema .product-gallery [x-ref="modalSlider"] { padding: 28px 76px; }
.product-hero--cinema .product-gallery [x-ref="modalSlider"] img { width: auto; height: auto; max-width: calc(100vw - 152px); max-height: calc(100vh - 56px); margin: auto; object-fit: contain; }
@media (max-width: 700px) {
  .product-hero--cinema .product-gallery [x-ref="modalSlider"] { padding: 56px 8px 16px; }
  .product-hero--cinema .product-gallery [x-ref="modalSlider"] img { max-width: calc(100vw - 16px); max-height: calc(100vh - 80px); }
}
.product-hero--cinema .product-gallery__counter { left: 16px; top: 16px; right: auto; bottom: auto; padding: 5px 12px; border-radius: 999px !important; background: rgba(0, 0, 0, .55); font-weight: 500; letter-spacing: 0; }

/* photo arrows (owner, Oct 21 2026): small solid white circles with a black arrow, not the see-through glass ones */
.product-hero--cinema .product-gallery--side .product-gallery__arrow { width: 32px; height: 32px; padding: 0 !important; border: 0 !important; background: #fff !important; opacity: 1; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.product-hero--cinema .product-gallery--side .product-gallery__arrow svg { width: 15px; height: 15px; color: #1F241D !important; filter: none; stroke-width: 2.2; }
.product-hero--cinema .product-gallery--side .product-gallery__hit:hover .product-gallery__arrow { background: #fff !important; transform: translateY(-50%) scale(1.08) !important; }

/* the buy panel: small heading, title, price, short text, check list, two buttons, deposit, ways to reach us */
.product-hero--cinema .product-hero__copy { background: #1E2B20; color: #D9E2D4; padding: 40px clamp(28px, 3vw, 56px); display: flex; flex-direction: column; justify-content: center; }
.pc-kick { margin: 0 0 8px; font: 600 11px Figtree, system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #A9C79A; }
.product-hero--cinema .product-hero-title { color: #fff; padding-right: 48px; font-size: clamp(32px, 2.6vw, 44px) !important; }
.product-hero--cinema .wish-btn--hero { top: 36px; right: clamp(24px, 2.6vw, 50px); }
.product-hero--cinema .pv3-price { margin: 10px 0 8px; }
.product-hero--cinema .pv3-price b { color: #fff; }
.product-hero--cinema .pv3-price span,
.product-hero--cinema .pv3-price__row small,
.product-hero--cinema .pv3-price__as { color: #B8C4B2; }
.product-hero--cinema .pv3-price__row { flex-wrap: wrap; row-gap: 2px; }
.product-hero--cinema .pv3-price__row span { margin-left: 4px; padding-left: 0; border: 0; font-size: 13px; }
.product-hero--cinema .pv3-price .pv3-price__as span:first-child { color: #fff; }
/* (owner, Oct 21 2026) only "From $X" here: no popular-options price, and free shipping moves into the ✓ list */
.product-hero--cinema .pv3-price__as,
.product-hero--cinema .pv3-price__row span { display: none !important; }
.pc-lead { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: #D9E2D4; }
/* Best of Houzz under the description, on the dark green (owner, Oct 21 2026) */
.product-hero--cinema .product-hero__copy .pv3-houzz { justify-content: flex-start; gap: 10px; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid rgba(255, 255, 255, .14); background: none; color: #fff; }
.product-hero--cinema .product-hero__copy .pv3-houzz__best { font-size: 17px; }
.product-hero--cinema .product-hero__copy .pv3-houzz__yrs { font-size: 14px; color: #B8C4B2; }
.product-hero--cinema .product-hero__copy .pv3-houzz__logo { color: #6FD13A; }
.pc-facts { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; font-size: 14px; line-height: 1.4; }
.pc-facts li { position: relative; padding-left: 24px; }
.pc-facts li::before { content: "✓"; position: absolute; left: 0; color: #A9C79A; }

/* buttons: white and outlined on the dark green, without the "made to order" line above them */
.product-hero--cinema .frcfg-cta-group { margin-top: 22px; }
.product-hero--cinema .frcfg-cta-group::before { display: none !important; }
.product-hero--cinema .frcfg-btn-green { background: #fff !important; border-color: #fff !important; color: #1E3A26 !important; }
.product-hero--cinema .frcfg-btn-green:hover:not(:disabled) { background: #EEF2E8 !important; }
.product-hero--cinema .frcfg .frcfg-cta-group .frcfg-btn-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.product-hero--cinema .frcfg .frcfg-cta-group .frcfg-btn-outline:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }
.product-hero--cinema .frcfg-cta-group .frcfg-btn { min-height: 50px; }

/* the deposit button, then the ways to reach us under it */
/* (owner, Oct 22 2026) the Contact & Help button's green (--green #53754B); a touch darker on hover */
.product-hero--cinema button.pv3-deposit { margin-top: 14px; padding: 12px 16px; gap: 12px; background: #53754B; max-width: 100%; }
.product-hero--cinema button.pv3-deposit:hover { background: #46653F; }
.product-hero--cinema .pv3-deposit__txt em { color: #fff; }
.product-hero--cinema .pv3-deposit svg { width: 26px; height: 26px; flex-basis: 26px; }
.product-hero--cinema .pv3-deposit b { font-size: 19px; }
.product-hero--cinema .pv3-deposit span { font-size: 13px; line-height: 1.4; }
.product-hero--cinema .pv3-deposit__txt em { font-size: 12.5px; margin-top: 2px; }
.product-hero--cinema .pv3-deposit__txt, .product-hero--cinema .pv3-deposit__txt * { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
/* ways to reach us: a 2 × 2 grid of small outlined boxes, icon + label + number */
.pc-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.pc-contact__title { grid-column: 1 / -1; margin: 0 0 2px; font: 700 11px Figtree, system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #A9C79A; }
.pc-contact > a, .pc-contact > button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; cursor: pointer; color: #fff; font-size: 14px; font-weight: 600; line-height: 1.25; transition: background .15s, border-color .15s; }
.pc-contact svg { flex: 0 0 20px; width: 20px; height: 20px; color: #A9C79A; }
.pc-contact span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-contact small { display: block; font-size: 11.5px; font-weight: 400; color: #B8C4B2; }
.pc-contact > a:hover, .pc-contact > button:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .35); }
.pc-contact > *:focus-visible { outline: 2px solid #A9C79A; outline-offset: 2px; }

/* the labelled photo row: dark green behind the top half of the photos, edge to edge */
/* (owner, Oct 22 2026) dark green only behind the heading; white from the top of the photo cards down */
.pc-band { background: #fff !important; padding: 0; }
/* (owner, Oct 22 2026) no empty white band under the photo row: the tabs section starts right below the cards */
section.product-hero.product-hero--cinema { padding-bottom: 0 !important; }
main:has(.product-hero--cinema) section.pv-folder { margin-top: 0 !important; padding-top: 22px !important; }
/* (owner, Oct 22 2026) tabs section: background in the site's darkest beige (--rule #D6D3C6); the tabs in the
   Contact & Help button's green (--green #53754B) with white text, the open one in the header's green
   (--green-deep #1E2B20); the tabs sit right on the content block, no gap */
main:has(.product-hero--cinema) section.pv-folder { background: #D6D3C6 !important; }
main:has(.product-hero--cinema) .pv-folder .pagenav__inner { padding-bottom: 0 !important; }
/* (owner, Oct 22 2026) closed tabs in the button's green, the open one in the dark green */
main:has(.product-hero--cinema) .pv-folder .pagenav__link { background: #53754B !important; color: #fff !important; }
main:has(.product-hero--cinema) .pv-folder .pagenav__link:hover { background: #1E2B20 !important; color: #fff !important; }
/* (owner, Oct 22 2026) colorway A "Forest frame" with a dark-beige surround (previews/product-details-colorways.html):
   the open tab in paper joins the plain paper block (no grid paper), At a glance in the button green, white fact boxes */
main:has(.product-hero--cinema) .pv-folder .pagenav__link.active { background: #F3F3ED !important; color: #1E2B20 !important; }
main:has(.product-hero--cinema) .pv-folder #content { background-color: #F3F3ED !important; background-image: none !important; }
main:has(.product-hero--cinema) .pv-folder .pd-glance { background: #53754B !important; color: #E6EDE0 !important; }
main:has(.product-hero--cinema) .pv-folder .pd-glance__kick,
main:has(.product-hero--cinema) .pv-folder .pd-glance__quote,
main:has(.product-hero--cinema) .pv-folder .pd-glance__nums strong { color: #fff !important; }
main:has(.product-hero--cinema) .pv-folder .pd-glance__nums span { color: #E6EDE0 !important; }
main:has(.product-hero--cinema) .pv-folder .pd-glance__nums div { border-top-color: rgba(255, 255, 255, .25) !important; }
main:has(.product-hero--cinema) .pv-folder .pd-glance__chip { background: #fff !important; color: #1E2B20 !important; }
main:has(.product-hero--cinema) .pv-folder .pd-about li { background: #fff !important; border: 1px solid #E6E4DA !important; }

/* (owner, Oct 22 2026) Product Details never leaves empty space, whatever each product holds (2 to 5 fact cards,
   videos or not), arranged by js/pd-fill.js: "At a glance" keeps its own thin height top left (videos under it),
   the About heading, intro and as many cards as fit sit beside it, the other cards follow below two per row (an
   odd last one full width); the shorter side's last block takes up the small difference. */
/* (owner, Oct 22) no !important: the tabs hide this panel with an inline display:none, which must still win */
#content > #product-panel-description.pdf-on { display: block; }
.pdf-on .pd-about__end, .pdf-on > br { display: none !important; }
.pdf-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; align-items: stretch; }
.pdf-top.pdf-measure { align-items: start; }
.pdf-left { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pdf-left > .pd-glance { justify-content: center !important; height: auto !important; }
.pdf-top.pdf-fill-left .pdf-left > .pd-glance { flex: 1 1 auto; }
.pdf-left > .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 !important; }
.pdf-left > .row > .col-md-6 { width: auto; max-width: none; padding: 0; margin: 0; }
.pdf-left > .row > .col-md-12 { grid-column: 1 / -1; width: auto; max-width: none; padding: 0; margin: 0; }
.pdf-left > .row > br { display: none; }
/* a press mention (magazine cover + one line): cover on the left, the line beside it, no empty space */
.pdf-left > .row > .col-md-12:has(> a > img) { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 0 20px; align-items: center; }
.pdf-left > .row > .col-md-12 > a:has(> img) { grid-area: 1 / 1; }
.pdf-left > .row > .col-md-12 > p { grid-area: 1 / 2; margin: 0; }
.pdf-left > .row > .col-md-12 > a > img { float: none !important; display: block; width: 100%; height: auto; margin: 0 !important; padding: 0; border: 0; border-radius: 10px; }
.pdf-left > .row .video-container { border-radius: 10px; overflow: hidden; margin: 0; }
.pd-about.pdf-right { display: flex; flex-direction: column; margin: 0 !important; min-width: 0; }
.pd-about.pdf-right > h2 { margin-top: 0 !important; }
.pd-about.pdf-right > ul { display: flex !important; flex-direction: column; gap: 12px; margin: 0 !important; flex: 1 1 auto; }
.pdf-top.pdf-fill-right .pd-about.pdf-right > ul > li:last-child { flex: 1 1 auto; }
.pd-about.pdf-bottom { margin: 12px 0 0 !important; }
.pd-about.pdf-bottom > ul { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; margin: 0 !important; }
.pd-about.pdf-bottom li.pdf-wide { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .pdf-top { grid-template-columns: 1fr; gap: 20px; }
  .pd-about.pdf-bottom { margin-top: 12px !important; }
}
@media (max-width: 600px) {
  .pd-about.pdf-bottom > ul { grid-template-columns: 1fr !important; }
  .pd-about.pdf-bottom li.pdf-wide { grid-column: auto; }
}
main:has(.product-hero--cinema) .pv-folder .product-details-nav__mobile { background: #53754B; }
main:has(.product-hero--cinema) .pv-folder .product-details-nav__mobile .product-details-nav__eyebrow,
main:has(.product-hero--cinema) .pv-folder .product-details-nav__mobile .product-details-nav__current { color: #fff; }
.pc-band__head { display: flex; align-items: center; gap: 18px; padding: 16px clamp(16px, 2.4vw, 40px) 16px; background: #1E2B20; }
/* same type as the product title, words capitalized, numbers at full height (owner, Oct 21 2026) */
.pc-band__head h2 { margin: 0; font: 500 clamp(26px, 2vw, 34px)/1.1 'Cormorant Garamond', Georgia, serif; letter-spacing: -.01em; font-variant-numeric: lining-nums; color: #fff; }
.pc-band__nav { display: flex; gap: 8px; margin-left: auto; }
.pc-band__nav button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); background: transparent; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.pc-band__nav button:hover { background: rgba(255, 255, 255, .1); }
.pc-reel { position: relative; display: flex; gap: 12px; margin: 0; padding: 4px clamp(16px, 2.4vw, 40px) 14px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 clamp(16px, 2.4vw, 40px); scrollbar-width: none; -ms-overflow-style: none; }
/* (owner, Oct 22 2026) white from right under the photos and panel: the heading strip is white too, its text and
   arrows in the dark green */
.pc-band__head { background: #fff !important; padding-top: 22px !important; }
.pc-band__head h2 { color: #1E2B20 !important; }
.pc-band__nav button { border-color: rgba(30, 43, 32, .35) !important; color: #1E2B20 !important; }
.pc-band__nav button:hover { background: rgba(30, 43, 32, .07) !important; }
/* no scrollbar under the row (owner, Oct 21 2026): the arrows above it, swiping or the trackpad move it */
.pc-reel::-webkit-scrollbar { display: none; }
.pc-reel > li { flex: none; scroll-snap-align: start; }
/* cards: no frame, caption on a dark fade, each the whole photo (never cropped) at one height; the photo sets the width */
.pc-card { position: relative; display: block; height: 250px; min-width: calc(250px * var(--r, 1.333)); padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: #2A362C; box-shadow: 0 8px 18px rgba(0, 0, 0, .2); cursor: pointer; }
.pc-card img { display: block; width: auto; height: 100%; max-width: none; transition: transform .3s; }
.pc-card:has(img[data-w]) { min-width: 0; }
.pc-card:hover img { transform: scale(1.04); }
.pc-card span { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 12px 10px; background: linear-gradient(transparent, rgba(0, 0, 0, .65)); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.25; text-align: left; }
.pc-card[aria-current="true"] { box-shadow: inset 0 0 0 3px #fff, 0 0 0 3px #53754B; }
.pc-card[aria-current="true"]::after { content: ""; position: absolute; inset: 0; border: 3px solid #fff; border-radius: 10px; pointer-events: none; }
.pc-card:focus-visible { outline: 3px solid #53754B; outline-offset: 2px; }

/* wood grades and the Houzz line under the row, inside the page's normal width */
.pc-trust { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px 28px; width: min(1256px, calc(100% - 40px)); margin: 6px auto 0; }
.pc-trust .pv3-grades { margin: 0; }
.pc-trust .pv3-houzz { margin: 0; padding: 12px 0; background: none; }

@media (max-width: 1023px) {
  .product-hero--cinema .product-hero__grid { grid-template-columns: 1fr; }
  /* phones and tablets: the photos swipe sideways, each whole at one height; the panel follows below */
  .product-hero--cinema .product-hero__grid { height: auto; }
  .product-hero--cinema .product-gallery { height: auto; }
  .product-hero--cinema .product-gallery > .pg-side { grid-template-columns: minmax(0, 1fr); }
  .pc-story-nav { display: none; }
  .product-hero--cinema .product-hero__copy { overflow: visible; }
  .pc-story { height: auto; display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .pc-story::-webkit-scrollbar { display: none; }
  .pc-shot { flex: none; scroll-snap-align: start; }
  .pc-shot > button { width: auto; }
  .pc-shot img { width: auto; height: min(62vw, 420px); max-width: 92vw; }
  .pc-shot img.is-sizing { width: calc(min(62vw, 420px) * 4 / 3); }
  .pc-shot__n { left: 8px; top: 8px; }
  .product-hero--cinema .product-hero__copy { padding: 24px 20px 22px; }
  .product-hero--cinema .wish-btn--hero { top: 22px; right: 18px; }
  .pc-contact > a, .pc-contact > button { padding: 9px 10px; gap: 8px; font-size: 13px; }
  .pc-card { height: 190px; min-width: calc(190px * var(--r, 1.333)); }
  .pc-trust { grid-template-columns: 1fr; width: calc(100% - 32px); }
  .pc-trust .pv3-houzz { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .pc-reel { scroll-behavior: auto; } }

/* (owner, Oct 22) "Tightened" buy panel: everything beside the photo fits on the screen, even a 1366x768 laptop, without
   scrolling - same order, less height: the check list in two columns, the two buttons side by side, the deposit as one
   short paragraph and the four ways to reach us as one row */
@media (min-width: 1024px) {
  .product-hero--cinema .product-hero__copy { padding-top: 20px; padding-bottom: 16px; }
  .product-hero--cinema .product-hero__copy .product-hero-title { margin-bottom: 0; }
  .product-hero--cinema .product-hero__copy .pv3-price { margin: 4px 0 4px; }
  .product-hero--cinema .product-hero__copy .pc-lead { font-size: 14.5px; line-height: 1.55; }
  .product-hero--cinema .product-hero__copy .pv3-houzz { margin-top: 10px; padding-top: 9px; }
  .product-hero--cinema .product-hero__copy .pv3-houzz__best { font-size: 15px; }
  .product-hero--cinema .product-hero__copy .pc-facts { grid-template-columns: 1fr 1fr; column-gap: 18px; row-gap: 6px; margin-top: 10px; font-size: 13.5px; line-height: 1.35; }
  .product-hero--cinema .product-hero__copy .pc-facts li { padding-left: 20px; }
  .product-hero--cinema .product-hero__copy .frcfg-cta-group { display: grid !important; grid-template-columns: 1.4fr 1fr !important; gap: 10px !important; }
  .product-hero--cinema .product-hero__copy .frcfg-cta-group .frcfg-btn { min-height: 46px; width: auto; margin: 0 !important; }
  .product-hero--cinema .product-hero__copy button.pv3-deposit { margin-top: 10px; padding: 9px 14px; gap: 12px; align-items: center; }
  .product-hero--cinema .product-hero__copy .pv3-deposit svg { width: 20px; height: 20px; flex-basis: 20px; }
  .product-hero--cinema .product-hero__copy .pv3-deposit__txt { display: block; font-size: 12.5px; line-height: 1.45; }
  .product-hero--cinema .product-hero__copy .pv3-deposit__txt > * { display: inline; margin: 0; }
  .product-hero--cinema .product-hero__copy .pv3-deposit__txt b { font: 700 12.5px/1.45 Figtree, system-ui, sans-serif; color: #fff; }
  .product-hero--cinema .product-hero__copy .pv3-deposit__txt b::after { content: ": "; }
  .product-hero--cinema .product-hero__copy .pv3-deposit__txt span { font-size: 12.5px; }
  .product-hero--cinema .product-hero__copy .pv3-deposit__txt em { font-size: 12.5px; margin: 0 0 0 4px; }
  .product-hero--cinema .product-hero__copy .pc-contact { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
  .product-hero--cinema .product-hero__copy .pc-contact > a, .product-hero--cinema .product-hero__copy .pc-contact > button { flex-direction: column; justify-content: center; gap: 3px; padding: 8px 4px 7px; text-align: center; font-size: 11.5px; }
  .product-hero--cinema .product-hero__copy .pc-contact svg { flex-basis: 18px; width: 18px; height: 18px; }
  .product-hero--cinema .product-hero__copy .pc-contact span { white-space: nowrap; text-overflow: clip; }
  .product-hero--cinema .product-hero__copy .pc-contact small { font-size: 12px; font-weight: 600; color: #fff; }
}

/* (owner, Oct 22) shorter browser windows (laptops with toolbars, display scaling): js/hero-fit.js adds .is-tight when
   the panel still doesn't fit, and only then shrinks its contents a little (never below 72%) - no scrolling */
@media (min-width: 1024px) {
  .product-hero--cinema .product-hero__copy.is-tight { padding-top: 14px; padding-bottom: 12px; }
  .product-hero--cinema .product-hero__copy.is-tight > * { flex-shrink: 0; }
  .product-hero--cinema .product-hero__copy.is-tight .product-hero-title { font-size: 32px !important; line-height: 1.08 !important; }
  .product-hero--cinema .product-hero__copy.is-tight .pc-lead { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: 14px; line-height: 1.5; }
  .product-hero--cinema .product-hero__copy.is-tight .pv3-houzz { margin-top: 8px; padding-top: 7px; }
  .product-hero--cinema .product-hero__copy.is-tight .pc-facts { margin-top: 8px; row-gap: 4px; font-size: 13px; line-height: 1.3; }
  .product-hero--cinema .product-hero__copy.is-tight .frcfg-from-note { margin: 0 0 4px; }
  .product-hero--cinema .product-hero__copy.is-tight .frcfg-cta-group { margin-top: 10px; }
  .product-hero--cinema .product-hero__copy.is-tight .frcfg-cta-group .frcfg-btn { min-height: 42px; }
  .product-hero--cinema .product-hero__copy.is-tight button.pv3-deposit { margin-top: 8px; padding: 7px 12px; }
  .product-hero--cinema .product-hero__copy.is-tight .pc-contact { margin-top: 8px; }
  .product-hero--cinema .product-hero__copy.is-tight .pc-contact > a, .product-hero--cinema .product-hero__copy.is-tight .pc-contact > button { padding: 6px 4px 5px; }
}

/* (owner, Oct 22) the panel starts at the top instead of being pushed down: its last child is a hidden script, so the
   "center it" margins put all the spare room above the content and squeezed the rest */
@media (min-width: 1024px) {
  .product-hero--cinema .product-hero__copy > :first-child { margin-top: 0 !important; }
  .product-hero--cinema .product-hero__copy { padding-top: 34px; }
  .product-hero--cinema .product-hero__copy.is-tight { padding-top: 18px; }
}

/* (owner, Oct 22) the buy panel in clear groups with even room between them (name + price / description / Houzz + checks /
   buttons + deposit / ways to reach us); the room grows with the window height and shrinks on short windows */
@media (min-width: 1024px) {
  .product-hero--cinema .product-hero__copy { --pc-g: clamp(14px, 2.4vh, 28px); }
  .product-hero--cinema .product-hero__copy.is-tight { --pc-g: clamp(9px, 1.5vh, 14px); }
  .product-hero--cinema .product-hero__copy > .pc-kick { margin: 0 0 8px !important; }
  .product-hero--cinema .product-hero__copy > .product-hero-title { margin: 0 !important; }
  .product-hero--cinema .product-hero__copy > .pv3-price { margin: 6px 0 0 !important; }
  .product-hero--cinema .product-hero__copy > .pc-lead { margin: calc(var(--pc-g) * .5) 0 0 !important; }
  .product-hero--cinema .product-hero__copy > .pv3-houzz { margin: var(--pc-g) 0 0 !important; padding-top: var(--pc-g) !important; }
  .product-hero--cinema .product-hero__copy > .pc-facts { grid-template-columns: 1fr !important; row-gap: 5px !important; margin: 10px 0 0 !important; font-size: 14px; line-height: 1.4; }
  .product-hero--cinema .product-hero__copy > .frcfg { margin: var(--pc-g) 0 0 !important; }
  .product-hero--cinema .product-hero__copy .frcfg-cta-group { margin: 0 !important; }
  .product-hero--cinema .product-hero__copy .frcfg-cta-group .frcfg-btn { height: 48px; min-height: 48px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
  .product-hero--cinema .product-hero__copy > button.pv3-deposit { margin: 12px 0 0 !important; padding: 12px 16px; }
  .product-hero--cinema .product-hero__copy .pv3-deposit__txt { line-height: 1.55; }
  .product-hero--cinema .product-hero__copy > .pc-contact { margin: var(--pc-g) 0 0 !important; gap: 8px; }
  .product-hero--cinema .product-hero__copy .pc-contact__title { margin: 0 0 2px; }
  .product-hero--cinema .product-hero__copy.is-tight .frcfg-cta-group .frcfg-btn { height: 44px; min-height: 44px; }
  .product-hero--cinema .product-hero__copy.is-tight > button.pv3-deposit { margin-top: 8px !important; padding: 8px 14px; }
  .product-hero--cinema .product-hero__copy.is-tight .pc-facts { row-gap: 3px !important; font-size: 13.5px; }
}

/* (owner, Oct 22) "Questions? We're here to help" in the "Photos of Real Builds" header on wide screens (between the title
   and the arrows), on the white band in dark green; the buy panel keeps them on phones and when there is no photo row */
.pc-contact--band { display: none; }
@media (min-width: 1024px) {
  .product-hero--cinema .product-hero__copy > .pc-contact--moves { display: none !important; }
  .pc-band__head .pc-contact--band { display: grid; grid-template-columns: auto repeat(4, minmax(0, 150px)); align-items: center; gap: 8px; margin: 0 0 0 auto; }
  .pc-band__head .pc-contact--band .pc-contact__title { grid-column: auto; margin: 0 8px 0 0; color: #53754B; text-align: right; line-height: 1.45; max-width: 190px; }
  .pc-band__head .pc-contact--band > a, .pc-band__head .pc-contact--band > button { flex-direction: column; justify-content: center; gap: 3px; padding: 8px 6px 7px; text-align: center; font-size: 12px; color: #1E2B20; border-color: rgba(30, 43, 32, .18); }
  .pc-band__head .pc-contact--band > a:hover, .pc-band__head .pc-contact--band > button:hover { background: #F1F4EE; border-color: rgba(30, 43, 32, .35); }
  .pc-band__head .pc-contact--band svg { flex-basis: 18px; width: 18px; height: 18px; color: #53754B; }
  .pc-band__head .pc-contact--band span { white-space: nowrap; text-overflow: clip; }
  .pc-band__head .pc-contact--band small { font-size: 12.5px; font-weight: 600; color: #1E2B20; }
  .pc-band__head .pc-contact--band + .pc-band__nav { margin-left: 16px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .pc-band__head .pc-contact--band .pc-contact__title { display: none; }
}

/* (owner, Oct 22) the photo row's arrows on its left and right edges, over the photos, centered on them */
.pc-reel-box { position: relative; }
.pc-reel-box > .pc-band__nav { position: absolute; inset: 4px 0 14px; margin: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(6px, 1vw, 16px); pointer-events: none; }
.pc-reel-box > .pc-band__nav button { pointer-events: auto; width: 44px; height: 44px; border-radius: 50%; border: 0 !important; background: rgba(255, 255, 255, .92) !important; color: #1E2B20 !important; font-size: 24px; line-height: 1; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); cursor: pointer; transition: background .15s, transform .15s; }
.pc-reel-box > .pc-band__nav button:hover { background: #fff !important; transform: scale(1.06); }
.pc-reel-box > .pc-band__nav button:focus-visible { outline: 2px solid #53754B; outline-offset: 2px; }
@media (max-width: 640px) { .pc-reel-box > .pc-band__nav button { width: 36px; height: 36px; font-size: 20px; } }