@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-sm) 5%;
    }

    .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:not(.wishlist-button-add, .swiper-button-custom), picture, img) {
        inline-size: 100%;
    }

    .product-main-images img {
        border-radius: clamp(0rem, var(--border-radius), 6rem);
    }

    .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: flex;
        justify-content: space-between;
        inline-size: 100%;
        padding-inline: var(--spacing-2xs);
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        translate: -50% -50%;
        z-index: 50;
    }

    .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: clamp(0rem, var(--border-radius), 1.5rem);
        object-fit: cover;
        inline-size: 100%;
        block-size: 100%;
    }

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

    .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-gallery {
        border-radius: var(--border-radius);
        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-reference {
        font: var(--text-weight-medium) var(--text-size-small)/1.1 var(--font-text);
        margin-block-end: var(--spacing-2xs);
    }

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

    .product-variants ul:not(.colors) :where(span:hover, span:active, input:checked + span)  {
        border-color: transparent;
        color: var(--background-color);
    }

    @media only screen and (hover: hover) and (pointer: fine) {
        
        .product-variants ul:not(.colors) :where(span:hover, input:checked + span) {
            background: var(--title-color);
        }
    }

    .product-variants ul:not(.colors) :where(span:active, input:checked + span:hover) {
        background: var(--strong-color);
    }

    .product-variants ul:not(.colors) input:checked + span:active {
        background: var(--text-color);
    }

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

    .product-information :is(.product-prices, .product-price-current) {
        flex-flow: column;
        gap: var(--spacing-3xs);
    }

    .product-information .product-variants-labels {
        gap: var(--spacing-xs);
    }

    .product-information :is(.product-variants, .product-labels) {
        inline-size: 100%;
    }

    .product-information .product-labels {
        gap: var(--spacing-2xs);
    }

    .product-information .product-labels img {
        object-fit: contain;
    }

    .product-information .product-price-current {
        align-items: flex-start;
    }

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

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

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

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

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

    .product-information .product-prices .tax-label p {
        color: var(--title-color);
    }

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

    .has-discount .current-price-tax .price {
        color: var(--promo-color);
    }

    .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-xs);
    }
    
    .product-information .qty {
        max-inline-size: 5rem;
    }

    .product-information .input-custom-qty {
        inline-size: 100%;
    }
    
    .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 .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);
    }

    .product-out-of-stock {
        color: var(--alert-danger-color);
        font-weight: var(--text-weight-bold);
    }

    .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);
        padding: 0;
    }

    .product-availability .badge i {
        font-size: var(--text-size-small);
        margin-inline-end: var(--spacing-3xs);
    }

    .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);
    }

    .js-mailalert-modal-btn {
        padding: 0.6rem 1rem;
        font-size: inherit;
    }

    .main-feature-supplier-cooperl .block-title::before {
         content: "\e938" / "";
    }

    .main-feature-supplier-partner .block-title::before {
         content: "\e93e" / "";
    }

    .main-feature-variable-weight .block-title::before {
         content: "\e939" / "";
    }

    .main-feature-conservation .block-title::before {
         content: "\e937" / "";
    }

    .main-feature-origin .block-title::before {
        content: "\e92b" / "";
   }

   .main-feature-origin-france .block-title::before {
        content: "\e929" / "";
   }

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

    .product-details .ino-toggles-wrapper {
        display: flex;
        align-items: flex-start;
        gap: var(--spacing-xs) 9%;
    }

    .product-details .ino-toggles-wrapper > * {
        inline-size: 100%;
    }
    
    .product-details .features-title {
        color: var(--title-color);
        margin-block-end: var(--spacing-sm);
    }

    .product-details .data-sheet:has(.product-features) {
        container: features / inline-size;
    }

    .product-details .product-features {
        display: grid;
        gap: var(--spacing-3xs) var(--spacing-sm);
        padding-block: var(--spacing-3xs);
        padding-inline: var(--spacing-xs);
    }

    .product-details .product-features:nth-child(2n - 1) {
        background: hsl(from var(--dark-color) h s l / .05);
    }

    .product-details .product-features .name {
        font-weight: var(--text-weight-bold);
    }

    .product-details .product-features .value {
        font: var(--text-weight-normal) var(--text-size-normal)/1.3 var(--font-text);
    }
        
    @container features (inline-size > 40rem) {
        
        .product-details .product-features {
            grid-template-columns: 2fr 3fr;
            align-items: baseline;
        }
    }

    @container features (inline-size <= 25rem) {
        
        .product-details .product-features {
            padding: var(--spacing-2xs);
        }
    }

    .page-product .elementor-top-section:not(.fond):first-child {
        margin-block-start: var(--spacing-4xl);
    }

    .ino-widget-heading.h2 + .ino-widget {
        margin-block-start: var(--spacing-lg);
    } 

    .product_block_img{
        position: relative;
    }
    
    .js-product-main-images button .layer{
        display: none;
    }
    
    .js-product-main-images button {
        position: relative;
        overflow: hidden;
    }
    
    .js-product-main-images button img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        cursor: zoom-in;
    }
    
    .product-zoom-mouse-overlay {
        position: absolute;
        width: 20px;
        height: 20px;
        pointer-events: none;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
    }
    
    #product-zoom-container {
        background: #fff;
        top: 0;
        position: absolute;
        right: -430px;
        width: 410px;
        height: 410px;
        background-repeat: no-repeat;
        display: none;
        z-index: 5;
        overflow: hidden;
        background-size: 250%;
    }
    
    #product-zoom-container.show {
        display: block;
    }

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

        .product-main-images img {
            border-radius: clamp(0rem, var(--border-radius), 4.5rem);
        }
    }

    @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;
            block-size: 100%;
            inline-size: min(100%, 50rem);
            margin: auto;
            position: relative;
        }

        .product-block-img > div:not(.product-zoom-container) {
            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;
        }

        .product-zoom-container {
            border-radius: var(--border-radius);
        }
    }

    @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: clamp(0rem, var(--border-radius), clamp(3rem, 1.8rem + 6vw, 6rem));
        }

        .product-details .ino-toggles-wrapper {
            flex-flow: column;
        }
    }

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

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

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

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

        .product-information .product-variants-labels {
            align-items: flex-end;
        }

        .product-information .product-labels {
            justify-content: flex-end;
        }
    }

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

        .product-information .product-variants-labels {
            flex-flow: column-reverse;
            align-items: flex-start;
        }

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

    @container viewport (30rem < inline-size) {
        
        .product-information .product-add-to-cart .qty {
            min-inline-size: 9rem;
        }

        .product-information .product-add-to-cart .bootstrap-touchspin {
            padding-inline: var(--spacing-xs);
        }

        .product-information .product-add-to-cart .btn-touchspin::before {
            font-size: var(--text-size-normal);
        }
    }

    @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);
        }

        .product-information .product-add-to-cart .product-quantity {
            gap: var(--spacing-3xs);
        }
    }

    @container viewport (inline-size <= 24rem) {
                
        .product-block-img .miniatures .swiper-slide {
            max-inline-size: 5rem;
        }
    }
}