.product-presentation { position: relative; }
#raised-garden-beds .catalog-photo, #raised-garden-beds .product-lens { background-color: #f5f7f6; }
:is(#garden-trellis, #umbrella-stands, #garden-screen-fence, #garden-obelisks, #landscape-fencing, #raised-garden-beds, #greenhouses, #gardening-accessories) .catalog-card { display: flex; flex-direction: column; }
:is(#garden-trellis, #umbrella-stands, #garden-screen-fence, #garden-obelisks, #landscape-fencing, #raised-garden-beds, #greenhouses, #gardening-accessories) .product-presentation { flex: none; }
:is(#garden-trellis, #umbrella-stands, #garden-screen-fence, #garden-obelisks, #landscape-fencing, #raised-garden-beds, #greenhouses, #gardening-accessories) .catalog-card-copy { display: flex; flex-direction: column; flex: 1; }
:is(#garden-trellis, #umbrella-stands, #garden-screen-fence, #garden-obelisks, #landscape-fencing, #raised-garden-beds, #greenhouses, #gardening-accessories) .card-bottom { margin-top: auto; }
.product-presentation.is-catalog-source .product-scene,
.product-presentation.is-catalog-source .scene-toggle { display: none; }
.card-source-select { display: grid; gap: 6px; margin: 12px 0; font-size: 12px; color: #536b60; }
.card-source-select select { width: 100%; min-width: 0; padding: 10px 28px 10px 10px; border: 1px solid #cbd5cf; border-radius: 4px; background: #fff; color: #252b2a; font: inherit; }
.product-image-note { font-size: 11px; line-height: 1.5; color: #626d68; margin: 0 0 12px; }
@media (max-width: 560px) {
  :is(#garden-arches, #garden-trellis, #plant-saucers-caddies, #umbrella-stands, #garden-screen-fence, #garden-obelisks, #landscape-fencing, #raised-garden-beds, #greenhouses, #gardening-accessories) .catalog-grid { grid-template-columns: minmax(0, 1fr); }
}
:is(.catalog-section, .home-featured) .catalog-photo.is-magnifying { cursor: none; }
:is(.catalog-section, .home-featured) .catalog-photo:hover img { transform: none; }
.product-lens { position: absolute; width: 105px; height: 105px; border-radius: 50%; border: 2px solid #fff; box-sizing: border-box; box-shadow: 0 3px 16px #0005; pointer-events: none; z-index: 5; background-repeat: no-repeat; background-color: #e2e7e5; display: none; }
.is-magnifying > .product-lens { display: block; }
.product-presentation .catalog-photo { aspect-ratio: 1; padding: 0; background: #e2e7e5; }
.product-presentation .catalog-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: normal; transform: none; transition: opacity 350ms ease; }
.product-presentation .catalog-photo .product-scene { opacity: 0; background: #e2e7e5; }
.product-presentation .catalog-photo.has-packaging { background: #f5f6f4; }
.product-presentation .has-packaging .product-studio { height: 74%; }
.product-presentation .catalog-photo .product-packaging { inset: auto 4% 3% auto; width: 62%; height: 26%; mix-blend-mode: multiply; }
.dialog-image-stage.has-packaging { position: relative; background: #f5f6f4; }
.dialog-image-stage.has-packaging #dialog-image { position: absolute; top: 0; left: 0; height: 74%; }
.dialog-image-stage.has-packaging #dialog-packaging { position: absolute; right: 4%; bottom: 3%; width: 62%; height: 26%; object-fit: contain; mix-blend-mode: multiply; }
#dialog-packaging[hidden] { display: none; }
.product-presentation.scene-ready.is-scene .product-scene { opacity: 1; }
@media (hover: hover) {
  .product-presentation.scene-ready:has(.catalog-photo:hover) .product-scene { opacity: 1; }
}
.product-presentation.scene-ready:has(.catalog-photo:focus-visible) .product-scene { opacity: 1; }
:is(.home-featured, #garden-arches, #garden-trellis, #umbrella-stands, #garden-screen-fence, #garden-obelisks, #landscape-fencing, #raised-garden-beds, #greenhouses, #gardening-accessories) .product-presentation.scene-ready .product-scene { opacity: 1; }
:is(.home-featured, #garden-arches, #garden-trellis, #umbrella-stands, #garden-screen-fence, #garden-obelisks, #landscape-fencing, #raised-garden-beds, #greenhouses, #gardening-accessories) .product-presentation.scene-ready.is-scene .product-scene,
:is(.home-featured, #garden-arches, #garden-trellis, #umbrella-stands, #garden-screen-fence, #garden-obelisks, #landscape-fencing, #raised-garden-beds, #greenhouses, #gardening-accessories) .product-presentation.scene-ready:has(.catalog-photo:focus-visible) .product-scene { opacity: 0; }
@media (hover: hover) {
  :is(.home-featured, #garden-arches, #garden-trellis, #umbrella-stands, #garden-screen-fence, #garden-obelisks, #landscape-fencing, #raised-garden-beds, #greenhouses, #gardening-accessories) .product-presentation.scene-ready:has(.catalog-photo:hover) .product-scene { opacity: 0; }
}
.scene-toggle { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #d3dbd7; border-radius: 50%; background: #fff; color: #536b60; cursor: pointer; z-index: 2; }
#plant-saucers-caddies .product-presentation.scene-ready .product-scene { opacity: 1; }
#plant-saucers-caddies .product-presentation.scene-ready.is-scene .product-scene,
#plant-saucers-caddies .product-presentation.scene-ready:has(.catalog-photo:focus-visible) .product-scene { opacity: 0; }
@media (hover: hover) {
  #plant-saucers-caddies .product-presentation.scene-ready:has(.catalog-photo:hover) .product-scene { opacity: 0; }
}
.scene-toggle[aria-pressed="true"] { background: #536b60; color: #fff; }
.scene-toggle:focus-visible { outline: 2px solid #536b60; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .product-presentation .catalog-photo img { transition: none; } }