/* Physical samples: dense 3D rack; browsing and applying are separate actions. */
.catalogue-card .effect-options{position:relative;gap:0;min-height:214px;overflow:hidden;padding:16px 0 20px;touch-action:pan-y;user-select:none;cursor:grab;isolation:auto}
.catalogue-card .effect-options button{width:132px;min-width:132px;flex:0 0 132px;border:0;padding:0;background:transparent;min-height:132px;align-items:center;cursor:pointer;transform-style:preserve-3d}
.catalogue-card .effect-options[data-ready=true] button{position:absolute;left:calc(50% - 66px);top:24px;transform-origin:50% 50%;backface-visibility:visible}
.catalogue-card .effect-options[data-dragging=true]{cursor:grabbing}
.catalogue-card .effect-options[data-dragging=true] button{transition:none;cursor:grabbing}
.catalogue-card .effect-options button img{display:block;flex:none;width:132px;max-width:none;height:132px;aspect-ratio:auto;object-fit:cover;border-radius:50%;margin:0;outline:0;pointer-events:none;transform:translateZ(2px)}
.catalogue-card .effect-options[data-ready=true] button:before{content:"";position:absolute;inset:0;background:#d7d2c8;transform:translateZ(-2px);backface-visibility:visible}
.catalogue-card .effect-options[data-ready=true] button:after{content:"";position:absolute;top:0;right:-2px;width:4px;height:222px;background:#b3ab9d;transform:rotateY(90deg);transform-origin:left center}
.catalogue-card .effect-options button[aria-pressed=true] img{outline:1px solid #ae3029;outline-offset:4px}
.catalogue-card .effect-options button:focus-visible{outline:2px solid #ae3029;outline-offset:6px}
.catalogue-card .effect-options[data-ready=true] button span{display:none}
.catalogue-card .effect-sample-caption{margin:3px 0 0;text-align:center;min-height:42px;font-size:14px;line-height:1.5;font-family:"Manrope Local",sans-serif;font-style:normal}
.catalogue-card .effect-demo-note{font:12px/1.5 "Manrope Local",sans-serif;text-align:center;color:#676762;margin:0 0 12px}
.catalogue-card .effect-view-link{display:block;text-align:center;font-size:13px;min-height:44px;padding:10px 0;text-decoration:underline;text-underline-offset:4px}
.catalogue-card .effect-view-link[hidden]{display:none}
.catalogue-card #effect-photo{transition:opacity 120ms ease}
.catalogue-card #effect-photo.effect-photo-changing{opacity:.25}
.catalogue-card #effect-photo[data-view=effect]{object-fit:contain;background:#f3f2ee}
.catalogue-card .effect-strip-heading button:disabled{opacity:.25;cursor:default}
.catalogue-card .photo-toolbar{flex-wrap:wrap;gap:10px}
.catalogue-card #back-interiors{font-size:12px;text-decoration:underline;text-underline-offset:4px}
@media(max-width:600px){.catalogue-card .effect-options{min-height:190px}.catalogue-card .effect-options button{width:112px;min-width:112px;min-height:112px}.catalogue-card .effect-options button img{width:112px;height:112px}.catalogue-card .effect-options[data-ready=true] button:after{height:190px}}
@media(prefers-reduced-motion:reduce){.catalogue-card .effect-options[data-ready=true] button,.catalogue-card #effect-photo{transition:none}}

/* Clipping stays outside the unflattened perspective scene. */
.catalogue-card .effect-sample-stage{position:absolute;inset:0;perspective:none;transform-style:preserve-3d;overflow:visible;isolation:auto}
.catalogue-card .effect-options button{transform-style:preserve-3d;overflow:visible;isolation:auto;will-change:transform;z-index:auto!important}
.catalogue-card .effect-options button img{transform:translateZ(3px);backface-visibility:hidden}
.catalogue-card .sample-shade{position:absolute;inset:0;display:block;background:#000;opacity:0;transform:translateZ(3.1px);pointer-events:none;backface-visibility:hidden}
.catalogue-card .effect-options[data-ready=true] button:before{transform:rotateY(180deg) translateZ(3px);background:#9e9789;backface-visibility:hidden}
.catalogue-card .effect-options[data-ready=true] button:after{right:-3px;width:6px;transform:rotateY(90deg);background:#837b6e}
@media(max-width:600px){.catalogue-card .effect-options[data-ready=true] button{left:calc(50% - 56px)}}

/* Circular sample disks remain larger and deeper than palette color chips. */
.catalogue-card .effect-options button{border-radius:50%;height:132px}
.catalogue-card .effect-options[data-ready=true] button:before,.catalogue-card .sample-shade{border-radius:50%}
.catalogue-card .effect-options[data-ready=true] button:after{display:none}
.catalogue-card .sample-rim{position:absolute;inset:0;display:block;border-radius:50%;background:#d5cfc1;pointer-events:none;backface-visibility:visible}
.catalogue-card .effect-options[data-ready=true] button:before{background:#d5cfc1}
@media(max-width:600px){.catalogue-card .effect-options button{height:112px}}

/* Caption space never takes the navigation column; sample rims carry their own texture. */
.catalogue-card .photo-toolbar{display:grid;grid-template-columns:minmax(0,1fr) 148px;align-items:start;gap:8px 12px;min-height:64px}
.catalogue-card #effect-caption{min-width:0;min-height:3em;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.catalogue-card .photo-toolbar #interior-navigation{width:148px;display:grid;grid-template-columns:44px 44px 44px;gap:8px;align-items:center;justify-self:end}
.catalogue-card #interior-counter{text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums}
.catalogue-card #back-interiors{grid-column:1/-1;justify-self:start}
.catalogue-card .sample-rim{background-color:transparent;background-size:cover;background-position:center}
.catalogue-card .sample-rim:first-child{box-shadow:0 8px 14px #0004,0 2px 4px #0003}
.catalogue-card .effect-options[data-ready=true] button:before{background:transparent}