/* =========================================
   ADAPTACCESSOIRES — PRODUCTS SECTION
   ========================================= */


/* =========================================
   SECTION
   ========================================= */

.aa-products {
    position: relative;

    overflow: hidden;

    background: var(--aa-background);
}


/* =========================================
   SUBTLE DECORATION
   ========================================= */

.aa-products::before {
    content: "";

    position: absolute;

    top: -180px;
    right: -180px;

    width: 420px;
    height: 420px;

    border: 1px solid rgba(37, 150, 190, 0.10);

    border-radius: 50%;

    pointer-events: none;
}


.aa-products::after {
    content: "";

    position: absolute;

    bottom: -220px;
    left: -180px;

    width: 420px;
    height: 420px;

    border: 1px solid rgba(255, 105, 0, 0.08);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================
   CONTAINER
   ========================================= */

.aa-products > .aa-container {
    position: relative;

    z-index: 2;
}


/* =========================================
   SECTION HEADER
   ========================================= */

.aa-products .aa-section-header {
    position: relative;

    z-index: 2;
}


/* =========================================
   EYEBROW
   ========================================= */

.aa-products .aa-section-header__eyebrow {
    color: var(--aa-secondary);
}


/* =========================================
   TITLE
   ========================================= */

.aa-products .aa-section-header__title {
    max-width: 800px;

    margin-inline: auto;
}


/* =========================================
   DESCRIPTION
   ========================================= */

.aa-products .aa-section-header__description {
    max-width: 650px;

    margin-inline: auto;
}


/* =========================================
   PRODUCTS GRID
   ========================================= */

.aa-products__grid {
    position: relative;

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 24px;

    align-items: stretch;
}


/* =========================================
   PRODUCT CARD ALIGNMENT
   ========================================= */

.aa-products__grid .aa-product-card {
    height: 100%;
}


/* =========================================
   SHOP BUTTON AREA
   ========================================= */

.aa-products__footer {
    display: flex;

    justify-content: center;

    margin-top: var(--aa-space-10);
}


/* =========================================
   SHOP BUTTON
   ========================================= */

.aa-products__footer .aa-button {
    min-width: 230px;
}


/* =========================================
   TABLET LARGE
   ========================================= */

@media (max-width: 1100px) {

    .aa-products__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 20px;
    }

}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 900px) {

    .aa-products__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 18px;
    }

}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 600px) {

    .aa-products__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 12px;
    }


    .aa-products__footer {
        margin-top: var(--aa-space-8);
    }


    .aa-products__footer .aa-button {
        width: 100%;

        max-width: 300px;
    }


    .aa-products::before {
        top: -120px;
        right: -160px;

        width: 300px;
        height: 300px;
    }


    .aa-products::after {
        bottom: -160px;
        left: -140px;

        width: 300px;
        height: 300px;
    }

}


/* =========================================
   VERY SMALL MOBILE
   ========================================= */

@media (max-width: 400px) {

    .aa-products__grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }

}


/* =========================================
   REDUCED MOTION
   ========================================= */

@media (prefers-reduced-motion: reduce) {

    .aa-products *,
    .aa-products::before,
    .aa-products::after {
        transition: none !important;

        animation: none !important;
    }

}