.plant-preview[hidden],.plant-preview [hidden]{display:none!important}
.plant-preview{position:fixed;top:var(--preview-top,162px);right:16px;bottom:16px;width:clamp(340px,28vw,640px);z-index:45;background:#fcfcf7;color:#244a32;border:1px solid #dce2d5;border-radius:20px;box-shadow:0 12px 44px #183c2c15;display:flex;flex-direction:column;overflow:hidden}
.plant-preview-head{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:18px 22px 12px}
.plant-preview-eyebrow{font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:#74816c}
.plant-preview-head h2{font:400 1.45rem/1.25 Georgia,serif;margin:4px 0 0}
.plant-preview-head button{width:36px;height:36px;border:1px solid #dce2d5;border-radius:50%;background:transparent;color:inherit;flex:none;font:24px/1 Arial;cursor:pointer}
.plant-preview-tools{display:flex;align-items:center;gap:15px;padding:0 22px 14px;border-bottom:1px solid #dce2d5;font-size:.75rem}
.plant-preview-tools button{border:0;padding:5px 0;background:none;color:inherit;font:inherit;cursor:pointer}.plant-preview-tools button:disabled{opacity:.4;cursor:default}.plant-preview-tools a{margin-left:auto;text-underline-offset:3px}
.plant-preview-content{min-height:0;flex:1;display:flex}.plant-preview iframe{border:0;width:100%;height:100%;flex:1;background:#fcfcf7}
.plant-preview-status{padding:24px;margin:0;font-size:.9rem;color:#64765b}.plant-preview-retry{align-self:flex-start;margin:0 24px 24px;border:1px solid #cdd7c7;border-radius:20px;padding:9px 18px;background:#edf0e4;color:#244a32;cursor:pointer}
.plant-preview :is(button,a):focus-visible{outline:2px solid #587c49;outline-offset:3px}
/* Keep the filter column fixed while the three-column catalogue contracts. */
@media(min-width:1280px){
 main.catalogue,body>.footer{margin-right:0;transition:margin-right .32s cubic-bezier(.22,.61,.36,1),padding-right .32s cubic-bezier(.22,.61,.36,1)}
 .has-plant-preview main.catalogue,.has-plant-preview>.footer{margin-right:calc(clamp(340px,28vw,640px) + 32px)}
 .has-plant-preview main.catalogue{padding-right:32px}
 .has-plant-preview .plant-finder{grid-template-columns:300px minmax(0,1fr)}
 .has-plant-preview .plant-finder-results>.plant-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .catalogue .plant-card{min-width:0}
 .catalogue .plant-heading{flex-wrap:wrap;gap:4px 10px}
 .catalogue .plant-heading h3{min-width:0;overflow-wrap:anywhere}
 .catalogue .plant-card>p{overflow-wrap:anywhere}
 .catalogue .plant-meta{flex-wrap:wrap;gap:4px 8px}
 .catalogue .badge{max-width:calc(100% - 20px);left:10px;top:10px;overflow-wrap:anywhere}
 .has-plant-preview .catalogue-toolbar{flex-wrap:wrap}
 .has-plant-preview .plant-card.is-previewed .plant-image{outline:2px solid #587c49;outline-offset:4px}
 main.catalogue.is-panel-transitioning{overflow-anchor:none}
}
.plant-preview{opacity:1;transform:translateX(0);transition:opacity .32s ease,transform .32s cubic-bezier(.22,.61,.36,1),display .32s allow-discrete}
.plant-preview[hidden]{opacity:0;transform:translateX(32px);pointer-events:none}
@starting-style{.plant-preview:not([hidden]){opacity:0;transform:translateX(32px)}}
@media(prefers-reduced-motion:reduce){main.catalogue,body>.footer,.plant-preview{transition:none!important}}
/* The same plant template adapts to the detail panel's own viewport. */
html[data-plant-panel] .announcement,html[data-plant-panel] .site-header,html[data-plant-panel] .breadcrumbs,html[data-plant-panel] body>.footer,html[data-plant-panel] body>.skip{display:none}
html[data-plant-panel] .section{padding:28px 22px}html[data-plant-panel] .plant-product-section{padding-top:12px}html[data-plant-panel] .vxp-card{margin:0;grid-template-columns:1fr;padding:14px;gap:20px}
html[data-plant-panel] .vxp-gallery-frame{width:100%;height:clamp(280px,65vw,420px);aspect-ratio:auto}html[data-plant-panel] .vxp-product-heading h1{font-size:30px}
html[data-plant-panel] .plant-details,html[data-plant-panel] .care-details{grid-template-columns:1fr;gap:24px}html[data-plant-panel] .section h2{font-size:2rem}html[data-plant-panel] .plant-details-facts{grid-template-columns:repeat(2,minmax(0,1fr))}html[data-plant-panel] .plant-season-months{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px 6px}
