/*
 * Kismetál Sátor R23 – Restore the original interactive card states.
 * The source of truth is the unmodified public/css/style.css:
 *   product-box / category-box hover -> yellow background, white type, zoomed image
 *   figure-box hover -> image zoom only.
 * R7/R11 and the R8 catalog added white backgrounds and coloured price text with
 * higher specificity; without these overrides the type becomes white-on-white.
 */

/* Keep the old card transition and image zoom rather than introducing a new effect. */
.product-box,
.category-box,
.sator-category-tile {
    transition: background-color .3s ease, color .3s ease;
}

/* Product cards in recommendations, the featured slider, category/search grids,
   references and related products all need the SAME yellow hover background.
   Specificity is deliberate: R7/R11 and R8 set background: #fff more specifically. */
.product-box:is(:hover, :focus-visible),
.sator-original-home #sator-quiz-result-cards .product-box:is(:hover, :focus-visible),
.sator-original-home .sator-home-featured .sator-featured-card:is(:hover, :focus-visible),
.sator-catalog .sator-catalog-card:is(:hover, :focus-visible),
.sator-catalog-grid .sator-catalog-card:is(:hover, :focus-visible),
.sator-original-references .sator-reference-card:is(:hover, :focus-visible) {
    background-color: #d8c53a;
    color: #fff;
}

/* The card's titles and SKU must not keep the R8 explicit navy text colour. */
.product-box:is(:hover, :focus-visible) .product-box__title,
.product-box:is(:hover, :focus-visible) .product-box__content p,
.sator-catalog .sator-catalog-card:is(:hover, :focus-visible) .product-box__title,
.sator-catalog-grid .sator-catalog-card:is(:hover, :focus-visible) .product-box__title,
.sator-catalog-grid .sator-catalog-card:is(:hover, :focus-visible) .sator-catalog-card-sku {
    color: #fff;
}

/* R11/R18/R21 introduce independently coloured gross/net amounts. Original
   hover made those white too. Preserve strikethrough on previous prices. */
.product-box:is(:hover, :focus-visible) .product-box__price,
.product-box:is(:hover, :focus-visible) .product_gross,
.product-box:is(:hover, :focus-visible) .product_net,
.product-box:is(:hover, :focus-visible) .sator-catalog-price,
.product-box:is(:hover, :focus-visible) .sator-catalog-net,
.sator-original-home #sator-quiz-result-cards .product-box:is(:hover, :focus-visible) .product-box__price,
.sator-original-home .sator-home-featured .sator-featured-card:is(:hover, :focus-visible) .sator-price-block .product_gross,
.sator-original-home .sator-home-featured .sator-featured-card:is(:hover, :focus-visible) .sator-price-block .product_net,
.sator-catalog-grid .sator-catalog-card:is(:hover, :focus-visible) .sator-price-block .product_gross,
.sator-catalog-grid .sator-catalog-card:is(:hover, :focus-visible) .sator-price-block .product_net {
    color: #fff;
}

.product-box:is(:hover, :focus-visible) .sator-old-price,
.product-box:is(:hover, :focus-visible) .sator-old-price *,
.product-box:is(:hover, :focus-visible) .product_oldgross,
.product-box:is(:hover, :focus-visible) .product_oldnet {
    color: rgba(255,255,255,.86);
}

/* R8 fallback category tiles should behave like the original category-box. */
.category-box:is(:hover, :focus-visible),
.sator-category-tile:is(:hover, :focus-visible) {
    background-color: #d8c53a;
    color: #fff;
}
.category-box:is(:hover, :focus-visible) .category-box__title,
.sator-category-tile:is(:hover, :focus-visible) h2 {
    color: #fff;
}
.sator-category-tile img {
    transition: transform .3s ease;
}
.sator-category-tile:is(:hover, :focus-visible) img {
    transform: scale(1.05);
}

/* The original figure-box (references) uses image zoom, not background colour
   changes. Do not override its original hover effect. */

/* The legacy stylesheet suppresses all focus outlines with !important.
   Restore a visible focus ring for keyboard navigation. */
a.product-box:focus-visible,
a.category-box:focus-visible,
a.figure-box:focus-visible,
a.sator-category-tile:focus-visible {
    outline: 3px solid #1b1d3c !important;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .product-box, .category-box, .sator-category-tile,
    .product-box figure img, .category-box figure img,
    .sator-category-tile img {
        transition-duration: 0s;
    }
}