/*
 * TBY Storefront Control
 * Deliberately scoped. No font, typography, header, spacing, badge, button,
 * gallery-layout or product-card-layout rules are changed here.
 */

/*
 * Prevent the theme's featured image/colour label from flashing before the
 * admin-selected image and framing are ready. The card keeps its full layout;
 * only the temporary wrong media/colour line is concealed.
 */
html.tby-sfc-booting ul.products li.product img,
html.tby-sfc-booting .products .product img,
ul.products li.product.tby-sfc-pending img,
.products .product.tby-sfc-pending img {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: none !important;
}

html.tby-sfc-booting ul.products li.product .product-color,
html.tby-sfc-booting ul.products li.product .product-colour,
html.tby-sfc-booting ul.products li.product .product-colors,
html.tby-sfc-booting ul.products li.product .product-colours,
html.tby-sfc-booting ul.products li.product .color-count,
html.tby-sfc-booting ul.products li.product .colour-count,
html.tby-sfc-booting ul.products li.product .product-variation-count,
html.tby-sfc-booting ul.products li.product [class*="color-count"],
html.tby-sfc-booting ul.products li.product [class*="colour-count"],
ul.products li.product.tby-sfc-pending .product-color,
ul.products li.product.tby-sfc-pending .product-colour,
ul.products li.product.tby-sfc-pending .product-colors,
ul.products li.product.tby-sfc-pending .product-colours,
ul.products li.product.tby-sfc-pending .color-count,
ul.products li.product.tby-sfc-pending .colour-count,
ul.products li.product.tby-sfc-pending .product-variation-count,
ul.products li.product.tby-sfc-pending [class*="color-count"],
ul.products li.product.tby-sfc-pending [class*="colour-count"] {
    visibility: hidden !important;
}

.tby-sfc-initializing img.tby-sfc-framed-image {
    transition: none !important;
}

img.tby-sfc-framed-image {
    translate: var(--tby-sfc-x, 0%) var(--tby-sfc-y, 0%) !important;
    scale: var(--tby-sfc-scale, 1) !important;
    transform-origin: center center !important;
    transition: opacity .22s ease, filter .22s ease, scale .32s ease, translate .32s ease !important;
    will-change: opacity, scale, translate;
}

/* Compatibility fallback for browsers without individual transform properties. */
@supports not (scale: 1) {
    img.tby-sfc-framed-image {
        transform: translate(var(--tby-sfc-x, 0%), var(--tby-sfc-y, 0%)) scale(var(--tby-sfc-scale, 1)) !important;
    }

    @media (hover: hover) {
        .tby-sfc-card.tby-sfc-hover-zoom:hover img.tby-sfc-framed-image {
            transform: translate(var(--tby-sfc-x, 0%), var(--tby-sfc-y, 0%)) scale(var(--tby-sfc-hover-scale, var(--tby-sfc-scale, 1))) !important;
        }
    }
}

@media (hover: hover) {
    .tby-sfc-card.tby-sfc-hover-zoom:hover img.tby-sfc-framed-image {
        scale: var(--tby-sfc-hover-scale, var(--tby-sfc-scale, 1)) !important;
    }
}

.tby-sfc-card.tby-sfc-switching img.tby-sfc-framed-image,
.tby-sfc-card.tby-sfc-resetting img.tby-sfc-framed-image {
    opacity: .86 !important;
    filter: none !important;
}

.tby-size-unavailable,
.tby-colour-unavailable {
    opacity: .32 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
}

select option.tby-size-unavailable,
select option.tby-colour-unavailable {
    opacity: 1 !important;
}

body.tby-sfc-bfcache-repair ul.products,
body.tby-sfc-bfcache-repair .products {
    transform: translateZ(0);
}