/**
 * Base front-office styles.
 * This file is only registered on category pages for which the rule resolver is active.
 */

body#category .product-miniature .thumbnail.product-thumbnail {
    min-width: 0;
}

body#category .product-miniature .thumbnail.product-thumbnail > a {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: var(--ctt-ratio-width, 7) / var(--ctt-ratio-height, 10);
    overflow: hidden;
    margin: var(--ctt-image-margin, 0);
    padding: var(--ctt-image-padding, 0);
    box-sizing: border-box;
}

body#category .product-miniature .thumbnail.product-thumbnail > a > picture,
body#category .product-miniature .thumbnail.product-thumbnail > a > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

body#category .product-miniature .thumbnail.product-thumbnail > a picture img,
body#category .product-miniature .thumbnail.product-thumbnail > a > img,
body#category .product-miniature img.cover-image {
    width: 100%;
    height: 100%;
    max-width: var(--ctt-max-width, none);
    max-height: var(--ctt-max-height, none);
    object-fit: var(--ctt-object-fit, cover);
    object-position: var(--ctt-object-position, center center);
}

/* Alysum multi-image hover layers must share the exact same frame. */
body#category .product-miniature .thumbnail.product-thumbnail > a.subimage-true > picture {
    position: absolute;
    inset: 0;
}

body#category .product-miniature .thumbnail.product-thumbnail .pmimage-switcher {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
}