/* Product discovery controls, shared by hero and collection. */
.product-cta,.hero-discover{display:inline-flex;align-items:center;gap:18px;min-height:44px;padding:6px 7px 6px 18px;border:1px solid rgba(249,249,245,.24);border-radius:999px;background:#2b2b2b;color:#f9f9f5;font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;box-shadow:0 4px 16px #00000012;transition:background .2s,color .2s}
.product-cta{bottom:16px;right:16px}
.cta-arrow{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#c8f000;color:#2b2b2b;flex-shrink:0;transition:transform .2s}
.cta-arrow svg{width:16px;height:16px}
.hero-caption{align-items:center;gap:16px}
.product-card:hover .product-cta,.hero-image:hover .hero-discover,.product-card:focus-visible .product-cta{background:#c8f000;color:#2b2b2b}
.product-card:hover .cta-arrow,.hero-image:hover .cta-arrow{transform:rotate(-35deg)}
@media(max-width:600px){.product-cta{bottom:10px;right:10px;gap:10px;padding-left:13px;font-size:11px}.hero-caption{left:16px;right:16px}.hero-caption>span:first-child{max-width:48%;line-height:1.5}}
@media(prefers-reduced-motion:reduce){.product-cta,.hero-discover,.cta-arrow{transition:none}}
/* The front remains visible until the back has decoded, preventing a blank hover. */
.product-card .product-image .img-front{opacity:1}
.product-card .product-image .img-back{opacity:0;transform:scale(1.045)}
.product-card .product-image img{transition:opacity .6s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.product-card.has-back.is-pointer-hover .product-image .img-back{opacity:1;transform:scale(1)}
.product-card.has-back.is-pointer-hover .product-image .img-front{opacity:0;transform:scale(1.025)}
.product-card.has-back:focus-visible .img-back{opacity:1;transform:scale(1)}
.product-card.has-back:focus-visible .img-front{opacity:0}
@media(prefers-reduced-motion:reduce){.product-card .product-image img{transition:none;transform:none!important}}