@layer components {

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


    :where(.westgaming-configurator, .obsidian-app, .obsidian-app > iframe) {
        display: flex;
        inline-size: 100% !important;
        block-size: 100% !important;
    }

    #obsidian-app{
        opacity: 0;
        transition: opacity 0.5s ease-in;
    }

    #obsidian-app.show{
        opacity: 1;
    }

    .westgaming-configurator .spinner {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: radial-gradient(farthest-side,#1100ff 94%,#0000) top/9px 9px no-repeat,
        conic-gradient(#0000 30%,#1100ff);
        -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 9px),#000 0);
        animation: spinner-c7wet2 1s infinite linear;
        position: absolute;
        z-index: 1;
        top:45%;
        left: 48%;
    }

    @keyframes spinner-c7wet2 {
        100% {
            transform: rotate(1turn);
        }
    }

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

    #ps_checkout-payment-method-logo-block-container{
        display: none;
    }

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

    @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 {
        font-size: clamp(2.5rem, 1.919rem + 2.907vw, 5rem);
    }

    :where(.product-information, .product-actions > form, .product-customization-item, .product-customization > form) {
        display: flex;
        flex-flow: column;
    }

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

    :where(.product-customization-item, .product-customization > form) {
        align-items: flex-start;
    }

    .product-customization {
        inline-size: min(40rem, 100%);
        padding: var(--spacing-md);
    }

    .product-customization form {
        gap: var(--spacing-3xs);
    }

    .product-customization-item {
        inline-size: 100%;
    }

    .customization-message,
    .customization-message strong {
        font-size: var(--text-size-small);
        line-height: 1;
    }

    .customization-message {
        display: flex;
        flex-flow: row wrap;
        align-items: baseline;
        gap: 1ch;
        margin-block-start: var(--spacing-xs);
    }

    .product-variants {
        display: flex;
        flex-flow: row wrap;
        gap: var(--spacing-md) 9%;
        border-block: var(--border-width) solid var(--primary-color);
        padding-block: var(--spacing-sm);
    }

    .product-variants li {
        display: flex;
        position: relative;
    }

    .product-variants .radio-color label {
        outline: var(--outline-width) solid transparent;
        outline-offset: calc(var(--border-width) * 2);
        transition: var(--transition-default);
    }

    .product-variants-item {
        display: flex;
        flex-flow: column;
        gap: var(--spacing-2xs);
    }

    .product-variants-item .form-wrapper {
        display: flex;
        align-items: baseline;
        gap: 1ch;
    }

    .product-variants-item :is(.variant-label, .variant-value) {
        letter-spacing: var(--letter-spacing);
        margin: 0;
    }

    .product-variants-item .variant-label {
        color: var(--text-color);
        font-weight: var(--text-weight-normal);
    }

    .product-variants-item .variant-value {
        color: var(--title-color);
        font: var(--text-weight-bold) var(--text-size-small)/1 var(--font-text);
    }

    .product-variants .input-radio {
        opacity: 0;
        position: absolute;
        inset: 0;
    }

    .product-variants-item ul:has(input:focus-visible) {
        outline: var(--outline-width) solid var(--title-color);
        outline-offset: calc(var(--outline-width) * 2);
    }

    .product-variants label:has(.custom-control-input-color:checked)  {
        outline-color: var(--secondary-color);
    }

    .product-variants .attribute-radio label {
        border: var(--border-width) solid transparent;
        border-radius: var(--border-radius);
        margin: 0;
        padding-block: var(--spacing-3xs);
        padding-inline: var(--spacing-xs);
        transition: var(--transition-default);
    }

    .product-variants .attribute-radio label:not(:has(.attribute-radio__input:checked)) {
        border-color: var(--border-color);
        color: var(--muted-color);
    }

    .product-variants .attribute-radio label:has(.attribute-radio__input:checked) {
        background: var(--primary-color);
    }

    @media only screen and (hover: hover) and (pointer: fine) {
        
        .product-variants .attribute-radio label:not(:has(.attribute-radio__input:checked)):hover {
            border-color: var(--text-color);
            color: var(--title-color);
        }
    }

    .product-variants .attribute-radio label:not(:has(.attribute-radio__input:checked)):active {
        background: oklch(from var(--primary-color) l c h / .15);
        border-color: oklch(from var(--primary-color) l c h / .3);
        color: var(--primary-color);
    }

    .product-variants .attribute-radio .attribute-radio-text {
        color: inherit;
        font: inherit;
    }

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

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

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

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

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

    .configurator-modal-btn-open,
    .product-information .product-add-to-cart .add {
        display: flex;
        max-inline-size: 20rem;
    }
    
    .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);
        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);
    }

    .ino-configurator .ino-modal-close {
        inset-block-start: var(--spacing-md);
        inset-inline-end: var(--spacing-md);
        translate: 0;
    }

    .product-reassurances {
        display: flex;
        flex-flow: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }

    .product-reassurance {
        color: var(--title-color);
        display: flex;
        align-items: center;
        gap: 2ch;
    }

    .product-reassurance i {
        font-size: var(--h4-font-size);
    }

    .section-custom-controller + .fond {
        margin-block-start: 0;
    }

    .section-custom-controller .ino-col-txt {
        padding-block: var(--spacing-lg);
    }

    .section-custom-controller .ino-col-txt {
        padding-block: var(--spacing-lg);
    }

    .section-custom-controller .halo-before::before {
        inline-size: 69%;
        inset-block-start: 0;
        inset-inline-start: 0;
        translate: -6% -30%;
    }

    .section-features-desc .ino-row {
        align-items: flex-start;
        gap: var(--spacing-2xl) var(--columns-gap);
    }

    .section-features-desc .ino-col-txt {
        justify-content: flex-start;
    }

    .section-features-desc .features {
        display: flex;
        flex-flow: column;
        inline-size: 100%;
    }

    .section-features-desc :is(.feature, .product-description) {
        border-block-end: var(--border-width) solid var(--title-color);
        padding-block-end: var(--spacing-sm);
    }

    .section-features-desc .feature {
        color: var(--title-color);
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        font: var(--text-weight-normal) var(--text-size-big)/1.3 var(--font-text);
        padding-inline: var(--spacing-sm);
    }

    .section-features-desc .feature:not(:first-child) {
        margin-block-start: var(--spacing-sm);
    }

    .section-features-desc .feature::before {
        color: inherit;
        font: var(--font-icon);
        font-size: var(--h3-font-size);
        letter-spacing: 0;
        text-transform: uppercase;
        aspect-ratio: 1 / 1;
        inline-size: auto;
        block-size: var(--h3-font-size);
    }

    .section-img-custom-controllers {
        inline-size: min(120rem, 100%);
        margin-inline: auto;
        position: relative;
        padding-block: var(--spacing-xl);
    }

    .section-img-custom-controllers img {
        position: relative;
        z-index: 1;
    }

    .section-img-custom-controllers::before {
        inline-size: 30.5%;
        inset-block-end: 50%;
        inset-inline-start: 50%;
        translate: -88% 50%;
    }

    .section-img-custom-controllers::after {
        inline-size: 30.5%;
        inset-block-start: 50%;
        inset-inline-end: 0;
        translate: -43% -68%;
    }

    .section-img-custom-controllers .ino-container::before {
        content: "";
        background: var(--background-color);
        display: flex;
        inline-size: 100%;
        block-size: 100%;
        mask: linear-gradient(90deg, #000 0%, transparent 25%, transparent 75%, #000 100%);
        position: absolute;
        inset: 0;
        z-index: 2;
    }

    @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: 120px 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-columns: 1.35fr 1fr;
            grid-template-rows: auto 1fr;
        }

        .product-block-img {
            grid-column: 1;
            grid-row: 1 / 3;
            block-size: 100%;
            inline-size: 100%;
            margin: auto;
        }

        :is(.product-block-img:not(:has(.missing-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-xl);
        }
        
        .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;
            mask: linear-gradient(0deg, transparent 0%, #000 30%);
        }
        
        .js-product-images:not(.no-miniatures) :is(.product-main-images__list > .swiper-slide, .product-thumbs__elem, picture) {
            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;
        }

        .no-miniatures .product-main-images {
            inline-size: min(100%, 50rem);
        }

        .section-features-desc .ino-row {
            grid-template-columns: repeat(2,minmax(0, 1fr));
        }
    }

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

    @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 <= 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(--h4-font-size);
        }
        
        .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);
        }

        .product-customization {
            padding: var(--spacing-sm);
        }
    }

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