.shop-reference-layout .archive-empty-state[hidden],
.shop-reference-layout [data-product-card][hidden],
.product-page [role="tabpanel"][hidden],
.product-page [data-config-addon-summary][hidden] { display: none !important; }

.shop-reference-layout main > section > .container,
.product-page main .container { width: min(100% - calc(var(--layout-gutter) * 2), var(--container)); }
.shop-reference-layout .shop-catalog-heading { padding-bottom: 0; }
.shop-reference-layout .shop-catalog-heading .product-toolbar {
 display: flex; align-items: center; justify-content: space-between;
 gap: var(--space-6); margin: 0; padding: var(--space-3) 0 var(--space-5); border-bottom: 2px solid var(--accent-alt);
}
.shop-reference-layout .product-toolbar h2 { margin: 0; font-size: var(--text-4xl); text-align: left; }
.shop-reference-layout .product-toolbar [data-results-title] { margin: var(--space-1) 0 0; font-size: var(--text-sm); }
.shop-reference-layout .shop-section { padding-top: var(--space-7); }
.shop-reference-layout .product-body { position: relative; text-align: center; padding: var(--space-4) var(--space-4) var(--space-5); }
.shop-reference-layout .product-body .badge-row { justify-content: center; }
.shop-reference-layout .product-body h3,
.product-page .addon-info h3 {
 padding: var(--space-2) var(--space-2); margin: var(--space-2) 0; background: var(--accent-4);
 color: var(--text-on-dark); font-size: var(--text-sm); text-align: center; text-transform: uppercase;
}
.shop-reference-layout .product-body h3 a { color: inherit; }
.shop-reference-layout .product-body > p { text-align: center; }
.shop-reference-layout .product-body .price-row { display: grid; padding-right: var(--space-12); text-align: left; }
.shop-reference-layout .product-body .price-row strong,
.product-page .pdp-buy-col .pdp-price,
.product-page .pdp-config-price-row strong,
.product-page .addon-price { color: var(--accent-alt); }
.shop-reference-layout .product-body .price-row strong { font-size: clamp(var(--text-xl), 1.7vw, var(--text-3xl)); }
.product-card-action {
 position: absolute; right: 14px; bottom: 24px; display: grid; width: 44px; height: 44px;
 place-items: center; border: 1px solid var(--accent); border-radius: var(--radius-round); color: var(--accent-4);
}
.product-card-action:hover { background: var(--surface); }
.product-photo-pending {
 display: grid; place-items: center; padding: var(--space-6); background: var(--surface) !important;
 color: var(--color-bluegray-600); font-size: var(--text-sm); text-align: center;
}
.product-page .pdp-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(var(--space-8), 4vw, var(--space-16)); }
.product-page .pdp-gallery-col,
.product-page .pdp-buy-col { position: static; }
.product-page .pdp-buy-col { padding: 0; border: 0; border-radius: 0; box-shadow: none; }
.product-page .pdp-gallery-main { aspect-ratio: 4 / 3; }
.product-page .pdp-gallery-col .pdp-secondary-block { margin-top: var(--space-7); padding: var(--space-5) 0 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none; }
.product-page .pdp-gallery-col .pdp-secondary-block h2 { font-size: var(--text-xl); text-align: left; }
.product-page .pdp-compact-fields { margin: var(--space-1) 0; background: var(--color-white); }
.pdp-additional-options { min-width: 0; margin: 0; padding: var(--space-4) 0 0; border: 0; }
.pdp-additional-options legend { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--accent); text-transform: uppercase; }
.pdp-additional-options .checkbox-card { margin: 0; padding: var(--space-3) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color var(--duration-normal) ease, background-color var(--duration-normal) ease; }
.pdp-additional-options .checkbox-card:has(input:checked) { border-color: var(--accent-alt); background: var(--color-orange-50); }
.pdp-additional-options .checkbox-card > span { min-width: 0; }
.pdp-additional-options small { display: block; font-size: var(--text-xs); }
.pdp-additional-options .checkbox-card small b { color: var(--accent-alt); }
.pdp-additional-options .pdp-additional-disclaimer { margin-top: var(--space-1); padding-left: var(--space-1); color: var(--color-bluegray-600); line-height: var(--leading-body); }
.pdp-additional-options .pdp-additional-disclaimer strong { color: var(--accent-4); }
.pdp-additional-summary { margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-3); border-left: 3px solid var(--accent-alt); background: var(--color-orange-50); font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--accent-4); }
.pdp-config-price-row[hidden] { display: none; }
.pdp-config-price-row--installation strong { color: var(--accent-alt) !important; font-size: var(--text-xl) !important; }
.pdp-config-price-row--installation span small { display: block; margin-top: var(--space-1); color: var(--text-secondary); font-size: var(--text-2xs); font-weight: var(--font-medium); }
.pdp-config-price-row--total { margin-top: var(--space-3) !important; border-top-color: var(--accent-alt) !important; }
.pdp-config-price-row--total span { color: var(--accent-4) !important; }
.pdp-payments { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.pdp-payments h3 { margin: 0; padding: var(--space-3) var(--space-4); background: var(--accent); color: var(--text-on-accent); font-size: var(--text-base); }
.pdp-payment-options { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; gap: var(--space-4); padding: var(--space-5) var(--space-3) var(--space-2); font-size: var(--text-sm); font-weight: var(--font-semibold); }
.payment-webpay { display: flex; width: min(180px, 100%); align-items: center; justify-content: center; }
.payment-webpay img { display: block; width: 100%; height: auto; }
.pdp-payments > p { margin: var(--space-3) var(--space-4) var(--space-4); font-size: var(--text-xs); color: var(--color-bluegray-600); }
.pdp-information { padding-top: var(--space-7); }
.pdp-tab-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pdp-tab-list button {
 min-height: 56px; padding: var(--space-3) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-2) var(--radius-2) 0 0;
 background: var(--color-white); color: var(--accent-4); font-size: var(--text-sm); font-weight: var(--font-semibold); cursor: pointer;
}
.pdp-tab-list button[aria-selected="true"] { border-color: var(--accent-alt); background: var(--accent-alt); color: var(--text-on-accent-alt); }
.pdp-information > [role="tabpanel"] { min-height: 180px; padding: var(--space-7); border: 1px solid var(--border); border-radius: 0 0 var(--radius-2) var(--radius-2); font-size: var(--text-sm); }
.pdp-information [role="tabpanel"] > :first-child { margin-top: 0; }
.pdp-information [role="tabpanel"] > :last-child { margin-bottom: 0; }
.pdp-policy-links { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.product-page .pdp-addon-sidebar { margin-top: var(--space-5); }
.product-page .pdp-addon-sidebar .addon-item { text-align: center; }
.product-page .addon-info { margin-bottom: var(--space-4); }
.product-page .addon-price { font-size: var(--text-2xl); font-weight: var(--font-bold); }
.product-page .addon-actions .btn { width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid var(--accent); border-radius: var(--radius-round); background: var(--color-white); color: var(--accent-4); font-size: 0; }
.product-page .addon-actions .btn::after { content: "+"; font-size: var(--text-2xl); }
.product-page .related-solutions { padding: clamp(var(--space-22), 9vw, var(--space-33)) 0 clamp(var(--space-24), 10vw, var(--space-36)); }
.product-page .related-solutions h2 { max-width: 920px; margin: 0 0 var(--space-18); color: var(--accent-4); font-size: var(--section-title-size); line-height: var(--leading-display); text-align: left; text-wrap: balance; }
.related-tabs { justify-content: flex-start; margin-bottom: var(--space-16); gap: clamp(var(--space-5), 3vw, var(--space-11)); }
.related-tabs button { padding: var(--space-3) var(--space-2); border: 0; border-bottom: 4px solid transparent; background: var(--color-white); color: var(--color-bluegray-400); font-size: clamp(var(--text-sm), 1.4vw, var(--text-xl)); font-weight: var(--font-semibold); line-height: var(--leading-heading); text-transform: uppercase; cursor: pointer; }
.related-tabs button[aria-selected="true"] { border-bottom-color: var(--accent-alt); color: var(--accent-4); }
#related-windows { position: relative; padding-inline: var(--space-10); }
.related-carousel-controls { position: absolute; inset: 30% -12px auto; display: flex; justify-content: space-between; pointer-events: none; }
.related-carousel-controls button { pointer-events: auto; }
.related-carousel-controls button { width: 44px; height: 44px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-round); background: var(--color-white); color: var(--accent-4); cursor: pointer; }
.related-advisory { min-height: 280px; padding: var(--space-10); background: var(--background-alt); text-align: center; }
/* Crop only the three product illustrations from the exact exported Figma raster.
   Labels, category navigation and buttons are real HTML, never a screenshot UI. */
.product-page .reference-sf { position: relative; min-height: 0; aspect-ratio: 640 / 530; overflow: hidden; background: var(--color-white); }
.reference-sf img { position: absolute; width: 446.5625%; height: auto; max-width: none; top: -35.85%; }
.reference-sf.sf20 img { left: -43.75%; }
.reference-sf.sf25 img { left: -173.44%; }
.reference-sf.sf35 img { left: -301.56%; }
.product-page .related-products-grid h3 { min-height: 0; margin: var(--space-5) 0 var(--space-3); font-size: clamp(var(--text-2xl), 2.1vw, var(--text-4xl)); line-height: var(--leading-heading); text-wrap: balance; }
.product-page .related-products-grid p { min-height: 0; max-width: 34ch; margin-bottom: var(--space-6); font-size: var(--text-base); line-height: var(--leading-body); }
.product-page .related-products-grid .btn { min-width: 166px; font-size: var(--text-xs); }
.product-page .related-product-media--illustration { display: grid; min-height: 0; aspect-ratio: 1 / .82; place-items: center; background: var(--color-white); }
.product-page .related-product-media--illustration img { width: 100%; height: 100%; object-fit: contain; }
.pdp-tab-list button:focus-visible,
.related-tabs button:focus-visible,
.related-carousel-controls button:focus-visible,
.product-card-action:focus-visible { outline: 3px solid var(--accent-4); outline-offset: 3px; }
@media (max-width: 900px) {
 .shop-reference-layout main > section > .container,
 .product-page main .container { width: calc(100% - 40px); }
 .product-page .pdp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
 .pdp-tab-list { display: flex; overflow-x: auto; padding: var(--space-1) var(--space-1); }
 .pdp-tab-list button { flex: 0 0 170px; }
 .product-page .pdp-buy-col { grid-row: 2; }
 .product-page .pdp-gallery-main { max-height: 620px; }
 .shop-reference-layout .product-toolbar .sort-control { flex-wrap: wrap; }
 .related-tabs { gap: var(--space-2) var(--space-5); }
}
@media (max-width: 600px) {
 .shop-reference-layout .shop-catalog-heading .product-toolbar { align-items: flex-start; flex-direction: column; gap: var(--space-3); }
 .shop-reference-layout .product-toolbar h2 { font-size: var(--text-3xl); }
 .pdp-information > [role="tabpanel"] { padding: var(--space-5); }
 .product-page .pdp-compact-row { grid-template-columns: minmax(0, 1fr); }
 .product-page .related-advisory { padding: var(--space-7) var(--space-5); }
 #related-windows { padding-inline: 0; padding-top: var(--space-15); }
 .related-carousel-controls { inset: 0 0 auto; }
 .shop-reference-layout .product-inspiration .container { grid-template-columns: 1fr; }
 .product-page .addon-price { font-size: var(--text-2xl); }
}