/* Products-only finish layer; other pages/versions retain their approved theme. */
html:has(.products-page){scroll-padding-top:0;--products-header-height:84px;--products-scroll-offset:164px}
.products-page{--product-photo:#e7dfcf}
.products-page .brand img{filter:url(#cream-mark);object-fit:contain}
.products-page footer p{color:rgb(247 242 232 / .78)}
.products-page .button.dark{background:#dfc38e;color:#20362b;border:1px solid #ead5ae;box-shadow:0 6px 18px #0e211f35;font-weight:700;border-radius:8px;min-height:48px;padding:16px 22px}
.products-page .button.dark:hover{background:#eddbb8}
.products-page .category-bar{top:var(--products-header-height);scroll-margin-top:var(--products-header-height)}
.product-collection,.product-explorer,.options-section{scroll-margin-top:var(--products-scroll-offset)}
.product-collection{min-width:0}
.products-page .studio-layout{align-items:stretch}
.products-page .studio-picture{overflow:hidden;background:#d5c9b3}
.products-page .studio-picture img,.products-page .studio-picture canvas{object-fit:contain;object-position:center}
.products-page #studio-previous{z-index:0}.products-page #studio-canvas{z-index:1}
.products-page #studio-canvas.swapping{animation:material-fade .25s ease-out}
@keyframes material-fade{from{opacity:0}to{opacity:1}}
#studio-status{z-index:4}
.products-page .material-stage{padding:60px 24px;min-height:0;align-self:start}
.product-photo{display:block;position:relative;overflow:hidden;aspect-ratio:1;background:var(--product-photo);border-radius:7px;isolation:isolate}
.products-page .product-photo img{position:absolute;inset:0;display:block;width:100%;height:100%;max-height:none;aspect-ratio:1;object-fit:contain;background:transparent;margin:0;border-radius:0;opacity:0;transition:opacity .25s;box-shadow:none}
.products-page .product-photo img.loaded{opacity:1}
.products-page .hero-photo{width:100%;max-width:510px;margin:auto}
.products-page .product-photo[data-kind=rock] img,.products-page .product-photo[data-kind=travertine] img{object-fit:cover}
/* One warm card surface; multiply softens the manufacturer's baked-in gray. */
.products-page .product-photo[data-kind=pavers]{padding:0;background:inherit;box-shadow:none}
.products-page .product-photo[data-kind=pavers] img{mix-blend-mode:multiply}
.products-page .product-photo[data-kind=pergolas] img{object-fit:contain;object-position:center}
.products-page .product-photo[data-kind=pergolas][data-style="0"] img.fallback-photo{height:100%;max-height:none;object-fit:contain;object-position:center}
.product-photo.is-loading:after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,#fff8 50%,transparent 80%);background-size:200% 100%;animation:photo-shimmer 1.3s linear infinite;z-index:2}
@keyframes photo-shimmer{to{background-position:-200% 0}}
.product-photo img.failed{opacity:1;color:#53614d;font-size:12px;padding:24px}
.products-page .option-grid{align-items:stretch}
.products-page .option-card{display:flex;flex-direction:column;align-items:stretch;height:100%}
.products-page .option-card h3{line-height:1.3;height:2.6em;min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:14px 0 8px}
.products-page .option-card p{margin:0}
.products-page .option-card:disabled{opacity:.5;cursor:not-allowed}
.products-page .swatch:disabled{opacity:.4;cursor:not-allowed}
.speckled>span,.studio-swatches .color-chip{position:relative;overflow:hidden;background-image:none!important}
.speckled>span:after,.studio-swatches .color-chip:after{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23888' filter='url(%23n)' d='M0 0h100v100H0z'/%3E%3C/svg%3E");opacity:.32;mix-blend-mode:soft-light}

.products-page .stage-bottom{font-size:11px}
.products-page .studio-caption p{overflow-wrap:anywhere}
@media(max-width:650px){
 .products-page main,.products-page .yard-studio,.product-collection{min-width:0;max-width:100%}
 .products-page .studio-layout{height:auto;min-height:0;display:flex;flex-direction:column}
 .products-page .studio-preview{position:relative;top:0;width:100%}
 .products-page .studio-picture{height:auto;max-height:none;aspect-ratio:4/3}
 .products-page .studio-chooser{height:auto;min-height:0;flex:none}
 .products-page .studio-options{height:300px;max-height:48svh;flex:auto}
 .products-page .studio-caption{height:auto;min-height:56px}
 .products-page .studio-caption p{font-size:10px}
 .products-page .studio-bottom .button{min-height:48px;padding:16px 22px}
 .products-page .category-bar>div{max-width:100%;overflow-x:auto}
 .products-page .paver-grid{display:grid;grid-auto-flow:column;grid-auto-columns:72%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:1px;padding:2px 2px 14px;overscroll-behavior-x:contain}
 .products-page .paver-grid .option-card{scroll-snap-align:start}
 .products-page .rock-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .products-page .product-photo{width:100%;flex-shrink:0}
 .products-page .material-stage{padding:56px 18px}
 .products-page .options-heading h2{font-size:29px}
 .products-page footer{gap:20px}.products-page footer p{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.products-page .studio-picture canvas,.products-page .product-photo img{transition:none}.products-page #studio-canvas.swapping,.product-photo.is-loading:after{animation:none}}

/* Products only: deterministic navigation and lightweight, stable image frames. */
html:has(.products-page){scroll-behavior:auto}
.products-page .site-header,.products-page .category-bar{backdrop-filter:none}
.products-page .site-header{background:#1d352d}
.products-page .category-bar{background:#e3dac9}
.products-page [data-reveal]{opacity:1;transform:none}
.products-page .product-photo{flex-shrink:0}
.products-page .size-choice{border-radius:7px}
.products-page .pergola-finish{grid-column:1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:-40px;font-size:12px}
.products-page .pergola-finish small{width:100%;font-size:11px;color:var(--muted)}
.products-page .finish-chip{display:inline-block;width:28px;height:28px;border:1px solid #b7af9b;border-radius:50%;flex-shrink:0}
.products-page #collection-pergolas .material-details{grid-column:2;grid-row:1 / span 2}
@media(max-width:650px){.products-page #collection-pergolas .material-details{grid-column:1;grid-row:auto}.products-page .pergola-finish{margin-top:-16px}}

/* Stable products-page paint and natural-height controls. */
.products-page .site-header{background:#1d352d;opacity:1;visibility:visible;transform:translateZ(0);backface-visibility:hidden;isolation:isolate;transition:none}
.products-page .category-bar{background:#e3dac9;transform:translateZ(0);backface-visibility:hidden;z-index:29}
.products-page .mobile-cta{background:#1e362e;backdrop-filter:none;transform:translateZ(0)}
.products-page{padding-bottom:var(--products-bottom-height,0px)}
.products-page .studio-layout{height:calc(100svh - 112px);min-height:440px;max-height:820px;grid-template-rows:minmax(0,1fr);align-items:stretch}
.products-page .studio-chooser{height:100%;min-height:0;overflow:hidden}
.products-page .studio-options{height:auto;max-height:none;min-height:0;overflow-y:auto;flex:1}
.products-page .studio-preview{height:100%;min-height:0;align-self:stretch}
.products-page .studio-picture{min-height:0}
.products-page .product-photo.is-loading:after{animation:none;background:linear-gradient(110deg,#e2dccd,#eee8da,#e2dccd);opacity:.6}
.products-page .product-photo[data-kind=pavers] img{mix-blend-mode:normal}
.products-page .speckled>span:after,.products-page .studio-swatches .color-chip:after{background-image:url('/images/products/cards/concrete-noise.png');opacity:.8;mix-blend-mode:normal}
.products-page .product-photo[data-kind=pergolas]{aspect-ratio:1.9}
.products-page .product-photo[data-kind=pergolas] img,.products-page .product-photo[data-kind=pergolas][data-style="0"] img.fallback-photo{object-fit:cover;object-position:var(--pergola-focus,50% 0%);height:100%;aspect-ratio:auto}
@media(max-width:900px){
 .products-page .studio-layout{display:flex;flex-direction:column;height:auto;min-height:0;max-height:none}
 .products-page .studio-preview{position:relative;top:auto;width:100%;height:auto}
 .products-page .studio-picture{min-height:0;height:auto;max-height:none;flex:none;aspect-ratio:3/2}
 .products-page .studio-chooser{width:100%;height:auto;overflow:visible;border-left:0;border-top:1px solid var(--line)}
 .products-page .studio-options{height:auto;overflow:visible;flex:0 0 auto;padding:20px}
 .products-page .studio-bottom .button.dark{background:transparent;color:var(--ink);border:1px solid #50614f;box-shadow:none}
 .products-page .mobile-cta{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:40;padding:10px 5% max(10px,env(safe-area-inset-bottom));gap:12px}
 .products-page .mobile-cta a{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px}
}
@media(max-width:650px){.products-page .studio-picture{aspect-ratio:4/3}.products-page .studio-options{padding:16px}}

/* Reserve the tallest material panel so tab switches cannot resize the yard,
   move the controls, or trigger browser scroll anchoring. No inner scrolling. */
.products-page .studio-options{display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
.products-page .studio-options>[role=tabpanel]{grid-area:1 / 1;min-width:0}
.products-page .studio-options>[role=tabpanel][hidden]{display:block!important;visibility:hidden;pointer-events:none}

.products-page .product-photo[data-kind=turf]{width:100%;aspect-ratio:4/3}
/* Give the yard most of the width as the desktop workspace narrows. */
@media(min-width:901px){
 .products-page .studio-layout{grid-template-columns:minmax(0,1fr) clamp(240px,23vw,340px)}
 .products-page .studio-options{padding:clamp(12px,1.5vw,24px)}
 .products-page .studio-swatches{gap:6px}
 .products-page .studio-swatches button{padding:6px;font-size:clamp(10px,.8vw,12px);gap:6px;min-height:46px}
 .products-page .studio-swatches img,.products-page .studio-swatches .color-chip{width:clamp(22px,2vw,30px);height:clamp(22px,2vw,30px)}
 .products-page .studio-patterns{gap:6px}
 .products-page .studio-patterns button{padding:6px;font-size:clamp(10px,.8vw,12px)}
 .products-page .studio-patterns img{height:clamp(42px,4vw,60px)}
}