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

    .product-variants {
        order: -1;
    }

    .fiche-produit {
        position: relative;
    }

    .fiche-produit:before, .fiche-produit:after {
        content: "";
        display: block;
        background: url('../img/nenuphar.webp');
        background-size: contain;
        background-repeat: no-repeat;
        aspect-ratio: 403 / 352;
        width: 20%;
        height: auto;
        position: absolute;
        pointer-events: none;
        z-index: 1;
    }

    .fiche-produit:before {
        bottom: 0;
        left: -230px;
        pointer-events: none;
        z-index: 1;
    }

    .fiche-produit:after {
        top: 0;
        right: -270px;
        pointer-events: none;
        z-index: 1;
    }

    .fiche-produit :is(h1, .product-description-short, .product-variants, .product-add-to-cart) {
        max-width: 430px;
        width: 100%;
    }

    .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 {
        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: 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;
    }

    :is(.product-block-txt, .product-title) {
        background: var(--background-grey);
        padding-inline: var(--spacing-lg);
        margin-inline-start: var(--spacing-sm);
    }

    .product-block-txt {
        padding-block: var(--spacing-sm) var(--spacing-lg);
    }

    .product-title {
        padding-block: var(--spacing-lg) var(--spacing-sm);
        padding-block-end: 0;
    }

    #product section:not(.accessoires, .section-cta) .fond {
        padding: var(--spacing-lg);
        border-radius: var(--border-radius);
    }

    #product :is(.saison, .tab, .accessoires) .feature-cercle-collection {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--spacing-md);
    }

    #product :is(.tab, .accessoires) .feature-cercle-collection {
        gap: var(--spacing-4xs);
        margin-block-start: var(--spacing-sm);
        justify-content: flex-start;
    }

    #product :is(.accessoires) .feature-cercle-collection {
        gap: var(--spacing-3xs);
    }

    #ino-modal-video[open] {
        width: 100%;
        height: 100%;
        display: grid;
        place-content: center;
        background: var(--outline-color);
    }

    .feature-cercle{
        display:block;
        aspect-ratio: 1 / 1;
        width: 3rem;
        height: auto;
        border-radius: 100%;
        background: var(--shadow-color);
        opacity: .5;
    }

    :is(.tab, .accessoires) .feature-cercle{
        width: 2rem;
    }

    .feature-cercle-wrapper{
        text-align: center;
        gap: var(--spacing-2xs);
        display: flex;
        flex-flow: column;
        justify-content: center;
    }
    .feature-cercle.active{
        background: var(--primary-color);
        opacity: 1;
    }

    :is(.tab, .accessoires) .feature-cercle.active{
        background: var(--secondary-color);
    }

    .feature-cercle-color{
        -webkit-box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.16);
        box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.16);
    }

    .feature-cercle-color.blanc{ background: var(--light-color)}
    .feature-cercle-color.noir{ background: var(--dark-color)}
    .feature-cercle-color.bleu{ background: var(--secondary-color)}
    .feature-cercle-color.vert{ background: var(--primary-color)}

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

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

    h1 {
        margin: 0;
    }

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

    .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) {
        display: flex;
    }

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

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

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

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

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

    .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 .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: 1ch;
        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-xl);
    }

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

    .details.ino-grid {
        display: grid;
        grid-template-columns: repeat(6, minmax(auto, 1fr));
        gap: var(--spacing-sm);
    }

    .details.ino-grid .container_feature  {
        text-align: center;
        padding: var(--spacing-md);
        border: 1px solid var(--outline-color);
        border-radius: var(--border-radius);
    }

    .details.ino-grid .container_feature p.title  {
        font: var(--text-weight-medium) var(--text-size-normal)/1 var(--font-text);
        margin-block-start: var(--spacing-sm);
    }

    .details.ino-grid .container_feature span  {
        color: var(--muted-color);
    }

    .product-features > .container {
        display: grid;
        grid-template-columns: repeat(2, minmax(auto, 1fr));
    }

    .product-features .col-description {
        display: flex;
        flex-flow: column;
        gap: var(--spacing-md);
    }

    .product-features .conseils {
        border: 1px solid var(--outline-color);
        border-radius: var(--border-radius);
    }

    #product :is(.conseils, .accessoire) .inodia-icons:is(.astuce, .comment, .quand) {
        font-size: var(--text-size-h2);
    }

    #product .inodia-icons:is(.astuce, .comment, .quand) + p.h3 {
        margin-block-start: var(--spacing-sm);
    }

    #product .inodia-icons:is(.quand) {
        color: var(--primary-hover-color);
    }

    #product .ino-toggle .ino-toggle-head {
        margin-block-end: 0;
        padding-block: var(--spacing-xs);
        border-bottom: 1px solid var(--outline-color);
    }

    #product .ino-toggle .ino-toggle-content {
        margin-block-start: var(--spacing-sm);
    }

    #product .ino-toggle .tab {
        display: grid;
        grid-template-columns: minmax(auto, .5fr) 1fr;
        padding: var(--spacing-2xs) var(--spacing-sm);
    }

    #product .ino-toggle .tab:has(.feature-cercle-collection) {
        grid-template-columns: 1fr;
    }

    #product .ino-toggle .tab:has(.feature-cercle-collection) {
        flex-flow: column;
    }

    #product .ino-toggle .tab p {
        margin: 0;
    }

    #product .ino-toggle .tab span:not(.feature-label) {
        margin-inline-start: var(--spacing-3xs);
        font-weight: var(--text-weight-medium);
    }

    #product :is(.tab, .accessoires) span:is(.feature-label),
    #product .ino-toggle :is(.tab) span:is(.feature-label) {
        font-size: var(--text-size-small);
    }

    #product .ino-toggle .tab:nth-child(2n-1) {
        background: var(--background-grey);
    }

    #product .accessoires p:not(.h3) {
        font-size: var(--text-size-big);
    }

    #product p + p.h3 {
        margin-block-start: var(--spacing-lg);
    }

    #product section:is(.accessoires) .fond-gris {
        position: relative;
    }

    #product section:is(.accessoires) .fond-gris::before {
        content: "";
        display: block;
        background: url(../img/grenouille.svg);
        background-size: contain;
        background-repeat: no-repeat;
        aspect-ratio: 236 / 108;
        width: 20%;
        height: auto;
        position: absolute;
        top: 5%;
        right: 5%;
        pointer-events: none;
        z-index: 1;
    }

    @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 (inline-size <= 80rem) {

        .details.ino-grid {
            grid-template-columns: repeat(3, minmax(auto, 1fr));
        }
    }

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

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

        :is(.product-title) {
            background: initial;
            padding-inline: initial;
            padding-block: initial;
            margin-inline-start: initial;
        }

        :is(.product-block-txt) {
            padding: var(--spacing-lg);
            margin-inline-start: initial;
            margin-block-start: var(--spacing-xl);
        }

        .fiche-produit :is(h1, .product-description-short, .product-variants, .product-add-to-cart) {
            max-width: initial;
        }

        .product-features > .container {
            grid-template-columns: 1fr;
        }

    }

    @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 (inline-size <= 45rem) {

        .details.ino-grid {
            grid-template-columns: repeat(2, minmax(auto, 1fr));
            gap: var(--spacing-lg) var(--spacing-sm);
        }

        .details.ino-grid .container_feature {
            padding: 0;
            border: none;
        }

        #product section:not(.accessoires, .section-cta) .fond:is(.ino-toggles) {
            padding: var(--spacing-lg) 0;
        }

        #product .ino-toggle .tab {
            display: flex;
            flex-wrap: wrap;
        }

    }

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

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

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

        :is(.product-block-txt) {
            padding: var(--spacing-lg) 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);
        }
    }

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