@layer components {

    .product-variants ul:not(.colors) label:has(input:focus-visible),
    .product-main-images > button:focus-visible {
        outline-color: var(--title-color);
    }

    main > .container {
        inline-size: 100%;
        max-inline-size: initial;
    }

    .fiche-produit > .container {
        gap: var(--spacing-md) var(--columns-gap);
    }

    .product-main-images {
        display: flex;
        inline-size: 100%;
        block-size: auto;
        position: relative;
    }

    :is(.no-miniatures > .product-main-images, .product-main-images__list) :is(button, picture, img) {
        inline-size: 100%;
    }

    .product-main-images img,
    .product-block-img .missing-img {
        border-radius: var(--radius-combinaison);
    }

    .product-main-images .swiper-slide button:focus-visible {
        opacity: .66;
    }

    .product-main-images button img,
    .product-block-img .miniatures .swiper-slide {
        block-size: auto;
        transition: var(--transition-default);
    }
        
    .product-main-images .swiper-button-wrapper {
        display: none;
    }

    .product-block-img .miniatures .swiper-wrapper {
        gap: var(--spacing-3xs);
    }

    .product-block-img .miniatures .swiper-slide {
        aspect-ratio: var(--product-img-ratio);
        display: flex;
    }

    .product-block-img .miniatures .swiper-slide:not(.swiper-slide-thumb-active) {
        cursor: pointer;
        opacity: .3;
    }

    @media only screen and (hover: hover) and (pointer: fine) {
        
        .product-main-images button:hover img,
        .product-block-img .miniatures .swiper-slide:not(.swiper-slide-thumb-active):hover {
            opacity: .66;
        }
    }

    .product-block-img .miniatures .swiper-slide img {
        border-radius: var(--radius-combinaison-small);
        object-fit: cover;
        inline-size: 100%;
        block-size: 100%;
    }

    .product-block-img .product-flags {
        pointer-events: none;
    }

    .product-information .promo-flag {
        background: var(--primary-color);
        display: table;
        padding-block: var(--spacing-4xs);
        padding-inline: var(--spacing-2xs);
        margin-block: var(--spacing-2xs) var(--spacing-sm);
        margin-inline: 0;
    }

    .product-information .promo-flag p {
        color: var(--light-color);
        font: var(--text-weight-medium) var(--text-size-small)/1 var(--font-text);
        letter-spacing: var(--letter-spacing);
    }

    .js-product-images-modal {
        max-block-size: 100svh;
        max-block-size: fill-available;
        max-block-size: -webkit-fill-available;
        max-inline-size: calc(100% - (var(--spacing-2xs) * 2));
        margin: var(--spacing-2xs);
        inset: 0;
    }

    .js-product-images-modal .modal-body {
        padding: 0;
    }

    .js-product-images-modal .modal-content {
        border-radius: var(--radius-combinaison);
        overflow: clip;
    }

    .js-product-images-modal .modal-gallery {
        aspect-ratio: var(--product-img-ratio);
        display: flex;
        justify-content: center;
    }

    .js-product-images-modal .modal-gallery :is(picture, img) {
        inline-size: 100%;
        block-size: 100%;
    }

    .js-product-images-modal .modal-gallery picture {
        pointer-events: initial;
    }

    .js-product-images-modal .modal-gallery .swiper-button-custom {
        position: absolute;
        inset-block-start: 50%;
        translate: 0 -50%;
        z-index: 10;
    }

    .js-product-images-modal .modal-gallery .swiper-button-disabled {
        cursor: default;
        opacity: .35;
    }

    .js-product-images-modal .modal-gallery .swiper-button-prev {
        inset-inline-start: var(--spacing-2xs);
    }

    .js-product-images-modal .modal-gallery .swiper-button-next {
        inset-inline-end: var(--spacing-2xs);
    }

    .product-latin-name {
        color: var(--secondary-color);
    }

    :where(.product-information, .product-actions > form) {
        display: flex;
        flex-flow: column;
        gap: var(--spacing-md);
    }

    .product-information :is(.product-prices, .current-price, .current-price-tax) {
        display: flex;
    }

    .product-information .product-prices {
        flex-flow: column;
    }

    .product-information :is(.current-price, .current-price-tax) {
        align-items: baseline;
    }

    .product-information .current-price {
        gap: var(--spacing-3xs) var(--spacing-sm);
    }

    .product-information .current-price-tax {
        gap: var(--spacing-3xs);
    }

    .product-information .current-price .price {
        font-size: var(--text-size-h3);
    }

    .product-information .current-price .price--regular {
        font-size: var(--text-size-h4);
    }

    .product-information:is(.price-ecotax, .product-unit-price) {
        color: var(--title-color);
        font-size: var(--text-size-small);
        line-height: 1.3;
    }

    .product-information .current-price-tax p {
        font-size: var(--text-size-small);
    }

    .product-variants-item label {
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--border-radius-field);
        position: relative;
        padding-block: var(--spacing-3xs);
        padding-inline: var(--spacing-xs);
        margin: 0;
    }

    .product-variants-item .attribute-radio__input {
        position: absolute;
        inset: 0;
    }

    .product-variants-item label {
        border: var(--border-width) solid var(--shadow-color);
        border-radius: var(--border-radius-field);
        color: var(--muted-color);
        position: relative;
        padding-block: var(--spacing-3xs);
        padding-inline: var(--spacing-xs);
        margin: 0;
        transition: var(--transition-default);
    }
    
    @media only screen and (hover: hover) and (pointer: fine) {

        .product-variants-item label:hover {
            background: oklch(from var(--title-color) l c h / .05);
            border-color: var(--muted-color);
            color: var(--title-color);
        }
    }

    .product-variants-item label:has(.attribute-radio__input:checked) {
        background: oklch(from var(--primary-color) l c h / .05);
        border-color: var(--primary-color);
        color: var(--primary-color);
    }
    
    .product-variants-item .attribute-radio-text {
        color: inherit;
        font-weight: var(--text-weight-bold);
    }

    .product-information .prices-add-cart {
        margin-block-start: var(--spacing-md);
    }

    .product-information .product-add-to-cart .product-quantity {
        display: flex;
        align-items: stretch;
        gap: var(--spacing-3xs);
    }

    .product-information .product-add-to-cart .qty {
        min-inline-size: 5rem;
    }
    
    .product-information .product-add-to-cart :is(.add, button) {
        inline-size: 100%;
    }

    .product-information .product-add-to-cart .add {
        display: flex;
        max-inline-size: 25rem;
    }

    .product-information .product-add-to-cart .alert {
        margin-block-start: var(--spacing-xs);
    }
    
    .product-information .prices-availability {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }

    .product-information .availability {
        display: flex;
        flex-flow: row wrap;
        align-items: baseline;
        line-height: 1.1;
    }

    .product-information .availability .value {
        font-size: var(--text-size-small);
        letter-spacing: var(--letter-spacing);
    }

    .availability {
        margin-block-start: var(--spacing-2xs);
    }

    .product-availability {
        display: flex;
        margin-block-start: var(--spacing-sm);
    }

    .product-availability .badge {
        font-size: var(--text-size-small);
        font-weight: var(--text-weight-medium);
        gap: .5ch;
        padding: 0;
    }

    .product-availability .badge-info {
        color: var(--alert-info-color);
    }

    .product-availability .badge-success {
        color: var(--alert-success-color);
    }

    .product-availability .badge-warning {
        color: var(--alert-warning-color);
    }

    .product-availability .badge-danger {
        color: var(--alert-danger-color);
    }

    :is(.product-details, .featured-products) {
        margin-block-start: var(--spacing-4xl);
    }

    .product-details.fond {
        padding-block: var(--spacing-3xl);
    }

    .product-details > .container {
        display: grid;
        gap: var(--spacing-lg);
    }

    .highlighted-features {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
        gap: var(--spacing-lg) 5%;
    }

    .highlighted-features__item {
        display: grid;
        justify-items: center;
    }

    .highlighted-features__icon {
        color: var(--primary-color);
        font-size: var(--text-size-h2);
        margin-block-end: var(--spacing-xs);
    }

    :is(.highlighted-features__name, .highlighted-features__value) {
        line-height: 1.1;
        text-align: center;
    }

    .highlighted-features__name {
        margin-block-end: var(--spacing-3xs);
    }

    .product-feature {
        border-block-start: var(--border-width) solid var(--shadow-color);
        container: product-feature / inline-size;
    }

    .product-feature__wrapper {
        display: grid;
        gap: var(--spacing-3xs) var(--spacing-sm);
    }

    @container product-feature (24rem < inline-size) {

        .product-feature__wrapper {
            grid-template-columns: repeat(2, minmax(0,1fr));
            padding-block: var(--spacing-2xs);
        }        
    }

    @container product-feature (inline-size <= 24rem) {

        .product-feature__wrapper {
            padding-block: var(--spacing-xs);
        }        
    }

    :is(.product-feature__name, .product-feature__value) {
        font-size: var(--text-size-small);
        margin: 0;
    }

    @container viewport (80rem < inline-size) {
        
        .js-product-images:not(.no-miniatures) {
            grid-template-columns: 144px auto;
        }
    }

    @container viewport (80rem < inline-size <= 90rem) {    
        
        .js-product-images {
            grid-template-columns: 96px auto;
        }
        
        .product-main-images .swiper-button-wrapper :is(.swiper-button-prev, .swiper-button-next) {
            block-size: 2.5rem;
        }
    }

    @container viewport (70rem < inline-size) {
        
        .fiche-produit {
            position: relative;
        }

        .fiche-produit > .container {
            display: grid;
            grid-template: auto 1fr / repeat(2, minmax(0, 1fr));
        }

        .product-block-img {
            grid-area: 1 / 1 / 3 / 2;
            inline-size: min(100%, 50rem);
            block-size: 100%;
            margin: auto;
        }

        :is(.product-block-img > div, .product-block-txt > .product-information) {
            position: sticky;
            inset-block-start: var(--spacing-sm);
        }
        
        .js-product-images:not(.no-miniatures) {
            display: grid;
            column-gap: var(--spacing-3xs);
        }
        
        .js-product-images:not(.no-miniatures) .product-main-images {
            grid-area: 1 / 2 / 2 / 3;
        }
        
        .js-product-images:not(.no-miniatures) .miniatures {
            grid-area: 1 / 1 / 2 / 2;
            position: relative;
            overflow: hidden;
        }
        
        .js-product-images:not(.no-miniatures) :is(.product-main-images__list > .swiper-slide, .product-thumbs__elem) {
            inline-size: 100% !important;
        }
        
        .js-product-images:not(.no-miniatures) .miniatures .product-thumbs {
            overflow-y: auto;
            overscroll-behavior: contain;
            max-block-size: 100%;
            position: absolute;
        }
        
        @-moz-document url-prefix() {

            .js-product-images:not(.no-miniatures) .miniatures .product-thumbs {
                scrollbar-color: transparent transparent;
                scrollbar-width: none;
            }
        }

        .js-product-images:not(.no-miniatures) .miniatures .product-thumbs::-webkit-scrollbar {
            background: transparent;
            inline-size: 0;
        }

        .js-product-images:not(.no-miniatures) .miniatures .product-thumbs::-webkit-scrollbar-thumb {
            background: transparent;
            inline-size: 0;
        }
        
        .js-product-images:not(.no-miniatures) .miniatures .product-thumbs__list {
            flex-flow: column;
            transform: initial !important;
        }
    }

    @container viewport (70rem < inline-size <= 80rem) {

        .js-product-images:not(.no-miniatures) {
            grid-template-columns: 96px auto;
        }
    }

    @container viewport (70rem < inline-size <= 90rem) {

        .product-information .prices-availability .availability {
            flex-flow: column;
        }
        
        .product-information .product-variants ul.colors .control-input-hover {
            inset-inline: auto 0;
            translate: 0 calc(-100% - .5rem);
        }
    }

    @container viewport (inline-size <= 70rem) {

        .fiche-produit > .container {
            display: flex;
            flex-flow: column;
        }

        .product-main-images + .miniatures {
            margin-block-start: var(--spacing-xs);
        }
        
        .product-block-img .miniatures .swiper-wrapper {
            gap: var(--spacing-xs);
        }
        
        .product-block-img .miniatures .swiper-slide {
            max-inline-size: fit-content;
        }
        
        .product-main-images img {
            border-radius: var(--radius-combinaison-small);
        }    
    }

    @container viewport (45rem < inline-size) {

        .featured-products > .container {
            inline-size: min(var(--wrapper-size-mobile), var(--wrapper-size));
        }

        .product-features {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            column-gap: 5%;
        }
    }

    @container viewport (36rem < inline-size <= 45rem) {    
          
        .product-information .prices-availability .availability {
            flex-flow: column;
        }
    }

    @container viewport (inline-size <= 36rem) {

        .product-information .prices-availability {
            flex-flow: column;
        }
        
        .product-information .prices-availability .availability {
            margin-block-start: var(--spacing-sm);
        }
    }

    @container viewport (inline-size <= 30rem) {

        main > .container {
            inline-size: 100%;
            max-inline-size: 100%;
        }
        
        .product-block-img .miniatures .swiper-slide {
            max-inline-size: 128px;
        }
        
        .swiper-button-prev {
            inset-inline-start: 0;
        } 
        
        .swiper-button-next {
            inset-inline-end: 0;
        }
        
        .product-information .current-price {
            flex-flow: column;
        }
        
        .product-information .current-price .price {
            font-size: var(--text-size-h4);
        }
        
        .product-information .current-price .price.price--regular {
            font-size: var(--text-size-normal);
        }
        
        .highlighted-features {
            grid-template-columns: repeat(2, minmax(0,1fr));
        }

        :is(.highlighted-features__name, .highlighted-features__value) {
            font-size: var(--text-size-small);
        }
    }

    @container viewport (24rem < inline-size) {
    
        .product-information .qty {
            max-inline-size: 5rem;
        }
    
        .product-information .input-custom-qty {
            inline-size: 100%;
        }
    }

    @container viewport (inline-size <= 24rem) {
                
        .product-block-img .miniatures .swiper-slide {
            max-inline-size: 5rem;
        }
        
        .product-information .product-add-to-cart .qty {
            min-inline-size: 4rem;
        }
    }
}