/* V4: reference layout plus keyboard/touch access and explicit unavailable image. */
[hidden]{display:none!important}
.product-overlay{pointer-events:none;visibility:visible}
.product-card:hover .product-overlay{opacity:0}
.product-image:hover .product-overlay,.product-image:focus-within .product-overlay{opacity:1;visibility:visible;pointer-events:auto}
.product-overlay a{text-decoration:none}
.product-image img{display:block}
.missing-image{display:flex;height:100%;align-items:center;justify-content:center;flex-direction:column;gap:12px;background:#f8f9fa;color:#666;text-align:center}
.missing-image small{font-size:14px;font-weight:400}
#missing-detail{min-height:400px;border-radius:15px;background:#f8f9fa;display:flex;align-items:center;justify-content:center;color:#666}
.developer-credit{margin-top:10px;font-size:.85rem;color:#aaa}
:focus-visible{outline:3px solid #b89224;outline-offset:4px}
.route-enter>.container{animation:fadeInUp .3s ease}
@media(max-width:768px){section:not(.hero){scroll-margin-top:70px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}}
/* Reference uses a native button for this action: preserve its Arial/normal metrics. */
.product-overlay .detail-btn{font-family:Arial,sans-serif;line-height:normal}
.contact-item a{color:inherit;text-decoration:none}
.contact-item a:hover{text-decoration:underline}