/*
* @author  Agence Dn'D <contact@dnd.fr>
* @license https://opensource.org/licenses/osl-3.0.php  Open Software License (OSL 3.0)
* @link    https://www.dnd.fr/
*/

.product-block {
    &.product-block__wide {
        height: 100%;

        @media (min-width: 768px) {
            grid-column: span 2;
        }

        .block-inner {
            height: 100%;

            .block-inner-inner {
                display: flex;
                flex-direction: column;
                height: 100%;
            }

            .image-cont,
            .product-link,
            .image-label-wrap,
            .image-label-wrap > div,
            .product-block__image,
            .product-block__image--desktop-only,
            .img-ar,
            .theme-img {
                height: 100%;
            }
        }

        .theme-img {
            aspect-ratio: 4/5;
            object-fit: cover;
            object-position: center;

            @media (min-width: 768px) {
                aspect-ratio: 16/9;
            }
        }
    }

    .product-block__image {
        margin-block-end: -2px;
    }

    .product-block__detail {
        margin-block: 12px 0;

        .product-link {
            display: flex;
            justify-content: space-between;
            gap: 24px;
            font-weight: var(--font-weight-500);

            @media (min-width: 768px) {
                gap: 12px;
            }
        }
    }

    .product-block__text {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-inline-start: 4px;
    }

    .product-block__title {
        color: var(--secondary-950);
    }

    .product-block__height {
        margin-block-end: 0;
        color: var(--secondary-600);
    }

    .product-price--block {
        margin-inline-end: 4px;
    }

    .price__default {
        flex-direction: row-reverse;
        gap: 6px;
    }

    .price__current,
    .price__was {
        margin: 0;
        color: var(--secondary-600);
        font-weight: var(--font-weight-400);
    }

    .price__was {
        opacity: 1;
        font-size: var(--base-text-size-xs);
    }
}