/* Three photographic keyframes per product, all in a single preloaded sheet. */
.product-menu-card.photo-card{padding:0;gap:0;overflow:hidden;border-radius:12px;position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}
.product-menu-card .photo-scene{display:block;position:relative;width:100%;max-width:none;aspect-ratio:2/1;overflow:hidden;background:#edf2f7;isolation:isolate}
.photo-scene .photo-frame{position:absolute;inset:0;display:block;width:100%;max-width:none;background-image:var(--photo-sheet);background-size:100% 300%;background-repeat:no-repeat;transform-origin:center;will-change:auto}
.photo-frame.frame-1{background-position:center top;z-index:1}
.photo-frame.frame-2{background-position:center center;z-index:2;opacity:0}
.photo-frame.frame-3{background-position:center bottom;z-index:3;opacity:0}
.product-menu-card.photo-card>.product-menu-label{display:flex;align-items:center;min-height:66px;max-width:none;padding:16px 18px;color:#003781;line-height:1.4}
.photo-card.is-activating .frame-1{animation:photo-first 1800ms both}
.photo-card.is-activating .frame-2{animation:photo-second 1800ms both}
.photo-card.is-activating .frame-3{animation:photo-third 1800ms both}
.photo-card.is-activating .photo-scene::after{content:'';position:absolute;bottom:0;left:0;height:3px;width:100%;background:#007ab3;transform-origin:left;z-index:5;animation:photo-progress 1800ms linear both}
@keyframes photo-first{0%{transform:scale(1)}100%{transform:scale(1.055)}}
@keyframes photo-second{0%,18%{opacity:0;transform:scale(1)}40%,67%{opacity:1}100%{opacity:1;transform:scale(1.035)}}
@keyframes photo-third{0%,55%{opacity:0;transform:scale(1)}80%,100%{opacity:1;transform:scale(1.025)}}
@keyframes photo-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:540px){.product-menu-card.photo-card>.product-menu-label{padding:12px;min-height:64px;font-size:12px}.product-menu-grid{gap:12px}}
@media(prefers-reduced-motion:reduce){.photo-card .photo-frame,.photo-card.is-activating .photo-scene::after{animation:none!important}}

.product-menu-card.photo-card>.product-menu-label{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:6px;flex:1;min-height:108px}
.product-menu-label>strong{font:inherit;font-weight:650}
.product-menu-label>.product-menu-subtitle{display:block;font-size:12px;font-weight:400;line-height:1.5;color:#61738a;overflow-wrap:anywhere}
@media(max-width:540px){.product-menu-card.photo-card>.product-menu-label{min-height:116px}.product-menu-label>.product-menu-subtitle{font-size:11px}}
.product-menu-label>strong{display:flex;align-items:flex-start;gap:8px;width:100%}
.product-menu-card .product-menu-label .product-title-icon{width:18px;height:18px;flex:0 0 18px;margin-top:1px;color:inherit}
.product-menu-card .product-menu-label .product-title-text{font:inherit;line-height:inherit;max-width:none;min-width:0}

/* Mouse previews never navigate; touch animation starts only after a tap. */
@media (hover:hover) and (pointer:fine) {
 .photo-card:hover .frame-1{animation:photo-first 1800ms both}
 .photo-card:hover .frame-2{animation:photo-second 1800ms both}
 .photo-card:hover .frame-3{animation:photo-third 1800ms both}
}