/* =========================================================
   AURELIA JEWELLERY
   SHOP PAGE

   File:
   assets/css/asareh-shop.css
========================================================= */


/* =========================================================
   01. SHOP PAGE ROOT
========================================================= */

.asareh-shop-page {

    --asareh-shop-bg:
        #f7f2ec;

    --asareh-shop-surface:
        #fbf8f4;

    --asareh-shop-surface-soft:
        #eee4da;

    --asareh-shop-dark:
        #1c130d;

    --asareh-shop-brown:
        #4d3622;

    --asareh-shop-bronze:
        #906f56;

    --asareh-shop-champagne:
        #ccb299;

    --asareh-shop-cream:
        #e7dcd0;

    --asareh-shop-border:
        rgba(77, 54, 34, 0.13);

    --asareh-shop-border-dark:
        rgba(255, 255, 255, 0.14);

    --asareh-shop-shadow:
        0 24px 70px rgba(28, 19, 13, 0.10);

    --asareh-shop-shadow-strong:
        0 34px 90px rgba(28, 19, 13, 0.16);

    background:
        var(--asareh-shop-bg);

    color:
        var(--asareh-shop-dark);
}


/* =========================================================
   02. SHOP HERO
========================================================= */

.asareh-shop-hero {

    position:
        relative;

    display:
        flex;

    min-height:
        min(760px, 78vh);

    align-items:
        flex-end;

    overflow:
        hidden;

    color:
        #fff;

    background:
        linear-gradient(
            135deg,
            #1c130d 0%,
            #4d3622 50%,
            #906f56 100%
        );
}


.asareh-shop-hero__media {

    position:
        absolute;

    inset:
        0;
}


.asareh-shop-hero__media picture {

    display:
        block;

    width:
        100%;

    height:
        100%;
}


.asareh-shop-hero__image {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;

    transform:
        scale(1.02);
}


.asareh-shop-hero__overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(18, 12, 8, 0.88) 0%,
            rgba(18, 12, 8, 0.62) 34%,
            rgba(18, 12, 8, 0.18) 68%,
            rgba(18, 12, 8, 0.28) 100%
        );
}


.asareh-shop-hero__content {

    position:
        relative;

    z-index:
        2;

    width:
        min(1440px, calc(100% - 96px));

    margin:
        0 auto;

    padding:
        190px 0 92px;
}


.asareh-shop-hero__content
.asareh-eyebrow {

    color:
        rgba(255, 255, 255, 0.72);
}


.asareh-shop-hero__title {

    max-width:
        760px;

    margin:
        20px 0 24px;

    color:
        #fff;

    font-size:
        clamp(48px, 5.2vw, 86px);

    line-height:
        1.12;

    letter-spacing:
        -0.025em;
}


.asareh-shop-hero__title span {

    display:
        block;

    color:
        var(--asareh-shop-champagne);
}


.asareh-shop-hero__description {

    max-width:
        580px;

    margin:
        0;

    color:
        rgba(255, 255, 255, 0.76);

    font-size:
        17px;

    line-height:
        2;
}


/* =========================================================
   03. BREADCRUMB
========================================================= */

.asareh-breadcrumb {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        34px;

    color:
        rgba(255, 255, 255, 0.55);

    font-size:
        12px;
}


.asareh-breadcrumb a {

    color:
        rgba(255, 255, 255, 0.58);

    transition:
        color 220ms ease;
}


.asareh-breadcrumb a:hover {

    color:
        #fff;
}


.asareh-breadcrumb
[aria-current="page"] {

    color:
        var(--asareh-shop-champagne);
}


/* =========================================================
   04. SHOP CATEGORY NAV
========================================================= */

.asareh-shop-categories {

    position:
        relative;

    z-index:
        20;

    background:
        var(--asareh-shop-dark);

    border-top:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.08);
}


.asareh-shop-categories__inner {

    display:
        grid;

    width:
        min(1440px, calc(100% - 96px));

    margin:
        0 auto;

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


.asareh-shop-category {

    position:
        relative;

    display:
        flex;

    min-height:
        110px;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    color:
        rgba(255, 255, 255, 0.54);

    border-inline-start:
        1px solid
        rgba(255, 255, 255, 0.07);

    transition:
        color 260ms ease,
        background-color 260ms ease;
}


.asareh-shop-category:last-child {

    border-inline-end:
        1px solid
        rgba(255, 255, 255, 0.07);
}


.asareh-shop-category::after {

    position:
        absolute;

    right:
        50%;

    bottom:
        0;

    width:
        0;

    height:
        2px;

    content:
        "";

    background:
        var(--asareh-shop-champagne);

    transform:
        translateX(50%);

    transition:
        width 280ms ease;
}


.asareh-shop-category:hover,
.asareh-shop-category.is-active {

    color:
        #fff;

    background:
        rgba(255, 255, 255, 0.035);
}


.asareh-shop-category:hover::after,
.asareh-shop-category.is-active::after {

    width:
        48px;
}


.asareh-shop-category__number {

    color:
        var(--asareh-shop-bronze);

    font-size:
        10px;

    letter-spacing:
        0.16em;
}


.asareh-shop-category__title {

    font-size:
        14px;

    font-weight:
        500;
}


/* =========================================================
   05. SHOP SECTION
========================================================= */

.asareh-shop {

    padding:
        110px 0 130px;

    background:
        var(--asareh-shop-bg);
}


.asareh-shop__container {

    width:
        min(1440px, calc(100% - 96px));

    margin:
        0 auto;
}


/* =========================================================
   06. SHOP HEADER
========================================================= */

.asareh-shop__header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        40px;

    margin-bottom:
        58px;

    padding-bottom:
        30px;

    border-bottom:
        1px solid
        var(--asareh-shop-border);
}


.asareh-shop__heading {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        7px;
}


.asareh-shop__title {

    margin:
        0;

    color:
        var(--asareh-shop-dark);

    font-size:
        clamp(34px, 3.3vw, 52px);

    line-height:
        1.2;
}


.asareh-shop__count {

    color:
        rgba(28, 19, 13, 0.48);

    font-size:
        12px;
}


/* =========================================================
   07. TOOLBAR
========================================================= */

.asareh-shop-toolbar {

    display:
        flex;

    align-items:
        center;

    gap:
        28px;
}


.asareh-shop-toolbar__filter {

    display:
        none;

    min-height:
        46px;

    padding:
        0 18px;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    color:
        var(--asareh-shop-dark);

    border:
        1px solid
        var(--asareh-shop-border);

    background:
        transparent;

    cursor:
        pointer;
}


.asareh-shop-toolbar__sort {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        rgba(28, 19, 13, 0.57);

    font-size:
        12px;
}


.asareh-shop-toolbar__sort select {

    min-width:
        180px;

    height:
        48px;

    padding:
        0 14px;

    color:
        var(--asareh-shop-dark);

    border:
        1px solid
        var(--asareh-shop-border);

    border-radius:
        0;

    outline:
        0;

    background:
        var(--asareh-shop-surface);

    cursor:
        pointer;
}


/* =========================================================
   08. MAIN SHOP LAYOUT
========================================================= */

.asareh-shop__layout {

    display:
        grid;

    grid-template-columns:
        255px minmax(0, 1fr);

    gap:
        54px;

    align-items:
        start;
}


/* =========================================================
   09. DESKTOP FILTER
========================================================= */

.asareh-shop-filter {

    position:
        sticky;

    top:
        110px;

    min-width:
        0;
}


.asareh-shop-filter__mobile-header {

    display:
        none;
}


.asareh-shop-filter__form {

    display:
        flex;

    flex-direction:
        column;
}


.asareh-filter-group {

    margin:
        0;

    padding:
        0 0 30px;

    border:
        0;

    border-bottom:
        1px solid
        var(--asareh-shop-border);
}


.asareh-filter-group
+
.asareh-filter-group {

    padding-top:
        30px;
}


.asareh-filter-group__title {

    width:
        100%;

    margin:
        0 0 20px;

    padding:
        0;

    color:
        var(--asareh-shop-dark);

    font-size:
        17px;

    font-weight:
        400;
}


.asareh-filter-group__content {

    display:
        flex;

    flex-direction:
        column;

    gap:
        15px;
}


/* =========================================================
   10. FILTER CHECKBOX
========================================================= */

.asareh-filter-check {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        20px minmax(0, 1fr) auto;

    align-items:
        center;

    gap:
        10px;

    color:
        rgba(28, 19, 13, 0.66);

    cursor:
        pointer;

    user-select:
        none;
}


.asareh-filter-check input {

    position:
        absolute;

    width:
        1px;

    height:
        1px;

    opacity:
        0;

    pointer-events:
        none;
}


.asareh-filter-check__box {

    position:
        relative;

    display:
        block;

    width:
        18px;

    height:
        18px;

    border:
        1px solid
        rgba(77, 54, 34, 0.28);

    background:
        transparent;

    transition:
        border-color 220ms ease,
        background-color 220ms ease;
}


.asareh-filter-check__box::after {

    position:
        absolute;

    top:
        3px;

    right:
        5px;

    width:
        5px;

    height:
        9px;

    content:
        "";

    opacity:
        0;

    border:
        solid #fff;

    border-width:
        0 0 1.5px 1.5px;

    transform:
        rotate(-45deg)
        scale(0.7);

    transition:
        opacity 160ms ease,
        transform 160ms ease;
}


.asareh-filter-check
input:checked
+
.asareh-filter-check__box {

    border-color:
        var(--asareh-shop-brown);

    background:
        var(--asareh-shop-brown);
}


.asareh-filter-check
input:checked
+
.asareh-filter-check__box::after {

    opacity:
        1;

    transform:
        rotate(-45deg)
        scale(1);
}


.asareh-filter-check__label {

    min-width:
        0;

    font-size:
        13px;
}


.asareh-filter-check__count {

    color:
        rgba(28, 19, 13, 0.35);

    font-size:
        10px;
}


/* =========================================================
   11. PRICE FILTER
========================================================= */

.asareh-filter-price {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;
}


.asareh-filter-price__fields {

    display:
        grid;

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

    gap:
        10px;
}


.asareh-filter-price__fields label {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

    color:
        rgba(28, 19, 13, 0.45);

    font-size:
        10px;
}


.asareh-filter-price__fields input {

    width:
        100%;

    min-width:
        0;

    height:
        44px;

    padding:
        0 10px;

    border:
        1px solid
        var(--asareh-shop-border);

    outline:
        0;

    background:
        var(--asareh-shop-surface);

    color:
        var(--asareh-shop-dark);
}


.asareh-filter-price__fields input:focus {

    border-color:
        var(--asareh-shop-bronze);
}


.asareh-filter-price__currency {

    color:
        rgba(28, 19, 13, 0.43);

    font-size:
        10px;
}


/* =========================================================
   12. FILTER ACTIONS
========================================================= */

.asareh-shop-filter__actions {

    display:
        flex;

    flex-direction:
        column;

    gap:
        14px;

    padding-top:
        30px;
}


.asareh-shop-filter__actions
.asareh-button {

    width:
        100%;
}


.asareh-shop-filter__reset {

    align-self:
        center;

    color:
        rgba(28, 19, 13, 0.48);

    font-size:
        11px;

    text-decoration:
        underline;

    text-decoration-color:
        rgba(28, 19, 13, 0.20);

    text-underline-offset:
        5px;
}


/* =========================================================
   13. PRODUCT AREA
========================================================= */

.asareh-shop-products {

    min-width:
        0;
}


.asareh-shop-products__grid {

    display:
        grid;

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

    gap:
        54px 26px;
}


/* =========================================================
   14. SHOP PRODUCT CARD
========================================================= */

.asareh-shop-page
.asareh-product-card {

    min-width:
        0;
}


.asareh-shop-page
.asareh-product-card__media {

    position:
        relative;

    aspect-ratio:
        0.82;

    overflow:
        hidden;

    background:
        linear-gradient(
            145deg,
            #e9ddd1 0%,
            #f7f0e9 52%,
            #ded0c3 100%
        );
}


.asareh-shop-page
.asareh-product-card__media a {

    display:
        block;

    width:
        100%;

    height:
        100%;
}


.asareh-shop-page
.asareh-product-card__image,
.asareh-shop-page
.asareh-product-card__media img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform
        750ms
        cubic-bezier(.16, 1, .3, 1);
}


@media (hover: hover) {

    .asareh-shop-page
    .asareh-product-card:hover
    .asareh-product-card__media img {

        transform:
            scale(1.045);
    }

}


.asareh-shop-page
.asareh-product-card__badge {

    position:
        absolute;

    z-index:
        3;

    top:
        16px;

    right:
        16px;

    padding:
        7px 10px 6px;

    color:
        var(--asareh-shop-dark);

    background:
        rgba(248, 244, 239, 0.88);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    font-size:
        9px;

    font-weight:
        500;
}


.asareh-shop-page
.asareh-product-card__wishlist {

    position:
        absolute;

    z-index:
        4;

    top:
        14px;

    left:
        14px;

    display:
        flex;

    width:
        42px;

    height:
        42px;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    color:
        var(--asareh-shop-dark);

    border:
        1px solid
        rgba(255, 255, 255, 0.40);

    border-radius:
        50%;

    background:
        rgba(255, 255, 255, 0.78);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    cursor:
        pointer;

    font-size:
        20px;

    line-height:
        1;

    transition:
        transform 200ms ease,
        background-color 200ms ease;
}


.asareh-shop-page
.asareh-product-card__wishlist:hover {

    transform:
        scale(1.06);

    background:
        #fff;
}


.asareh-shop-page
.asareh-product-card__wishlist.is-active {

    color:
        #fff;

    background:
        var(--asareh-shop-brown);

    border-color:
        var(--asareh-shop-brown);
}


.asareh-shop-page
.asareh-product-card__content {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        7px;

    padding-top:
        18px;
}


.asareh-shop-page
.asareh-product-card__title {

    margin:
        0;

    color:
        var(--asareh-shop-dark);

    font-size:
        21px;

    font-weight:
        400;

    line-height:
        1.3;
}


.asareh-shop-page
.asareh-product-card__title a {

    color:
        inherit;
}


.asareh-shop-page
.asareh-product-card__meta {

    color:
        rgba(28, 19, 13, 0.47);

    font-size:
        11px;
}


.asareh-shop-page
.asareh-product-card__price {

    margin-top:
        3px;

    color:
        var(--asareh-shop-brown);

    font-size:
        13px;

    font-weight:
        500;
}


/* =========================================================
   15. PAGINATION
========================================================= */

.asareh-pagination {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    margin-top:
        88px;
}


.asareh-pagination__item {

    display:
        flex;

    width:
        44px;

    height:
        44px;

    align-items:
        center;

    justify-content:
        center;

    color:
        rgba(28, 19, 13, 0.56);

    border:
        1px solid
        transparent;

    transition:
        color 220ms ease,
        border-color 220ms ease,
        background-color 220ms ease;
}


.asareh-pagination__item:hover {

    color:
        var(--asareh-shop-dark);

    border-color:
        var(--asareh-shop-border);
}


.asareh-pagination__item.is-active {

    color:
        #fff;

    border-color:
        var(--asareh-shop-brown);

    background:
        var(--asareh-shop-brown);
}


.asareh-pagination__dots {

    display:
        flex;

    width:
        30px;

    height:
        44px;

    align-items:
        center;

    justify-content:
        center;

    color:
        rgba(28, 19, 13, 0.34);
}


.asareh-pagination__next {

    display:
        flex;

    min-height:
        44px;

    margin-right:
        18px;

    padding:
        0 16px;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--asareh-shop-dark);

    border-bottom:
        1px solid
        rgba(28, 19, 13, 0.26);
}


/* =========================================================
   16. SHOP EDITORIAL
========================================================= */

.asareh-shop-editorial {

    position:
        relative;

    display:
        flex;

    min-height:
        720px;

    align-items:
        center;

    overflow:
        hidden;

    color:
        #fff;

    background:
        var(--asareh-shop-dark);
}


.asareh-shop-editorial__media {

    position:
        absolute;

    inset:
        0;
}


.asareh-shop-editorial__media img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.asareh-shop-editorial__overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(18, 12, 8, 0.90) 0%,
            rgba(18, 12, 8, 0.68) 37%,
            rgba(18, 12, 8, 0.22) 70%,
            rgba(18, 12, 8, 0.34) 100%
        );
}


.asareh-shop-editorial__content {

    position:
        relative;

    z-index:
        2;

    width:
        min(1440px, calc(100% - 96px));

    margin:
        0 auto;
}


.asareh-shop-editorial__title {

    max-width:
        670px;

    margin:
        22px 0 24px;

    color:
        #fff;

    font-size:
        clamp(44px, 4.8vw, 78px);

    font-weight:
        400;

    line-height:
        1.15;
}


.asareh-shop-editorial__title span {

    display:
        block;

    color:
        var(--asareh-shop-champagne);
}


.asareh-shop-editorial__content p {

    max-width:
        520px;

    margin:
        0 0 34px;

    color:
        rgba(255, 255, 255, 0.67);

    font-size:
        15px;

    line-height:
        2;
}


/* =========================================================
   17. TRUST STRIP
========================================================= */

.asareh-shop-trust {

    display:
        grid;

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

    background:
        var(--asareh-shop-surface);
}


.asareh-shop-trust__item {

    display:
        grid;

    min-height:
        200px;

    padding:
        42px 38px;

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

    align-items:
        start;

    gap:
        20px;

    border-inline-start:
        1px solid
        var(--asareh-shop-border);
}


.asareh-shop-trust__item:first-child {

    border-inline-start:
        0;
}


.asareh-shop-trust__number {

    color:
        var(--asareh-shop-bronze);

    font-size:
        10px;
}


.asareh-shop-trust__item h3 {

    margin:
        0 0 9px;

    color:
        var(--asareh-shop-dark);

    font-size:
        19px;

    font-weight:
        400;
}


.asareh-shop-trust__item p {

    margin:
        0;

    color:
        rgba(28, 19, 13, 0.48);

    font-size:
        12px;

    line-height:
        1.8;
}


/* =========================================================
   18. FILTER BACKDROP DESKTOP
========================================================= */

@media (min-width: 1201px) {

    .asareh-filter-backdrop {

        display:
            none !important;
    }

}


/* =========================================================
   19. TABLET
========================================================= */

@media (
    min-width: 769px
) and (
    max-width: 1200px
) {

    .asareh-shop-hero {

        min-height:
            680px;
    }


    .asareh-shop-hero__content,
    .asareh-shop-editorial__content {

        width:
            min(
                100% - 48px,
                1120px
            );
    }


    .asareh-shop-categories__inner,
    .asareh-shop__container {

        width:
            calc(100% - 48px);
    }


    .asareh-shop-categories__inner {

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


    .asareh-shop-category {

        border-bottom:
            1px solid
            rgba(255, 255, 255, 0.07);
    }


    .asareh-shop__layout {

        grid-template-columns:
            220px minmax(0, 1fr);

        gap:
            34px;
    }


    .asareh-shop-products__grid {

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


    .asareh-shop-trust {

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


    .asareh-shop-trust__item {

        border-bottom:
            1px solid
            var(--asareh-shop-border);
    }

}


/* =========================================================
   20. MOBILE WEB APP
========================================================= */

@media (max-width: 768px) {

    .asareh-shop-page {

        background:
            var(--asareh-shop-bg);
    }


    /* HERO */

    .asareh-shop-hero {

        min-height:
            76svh;

        min-height:
            76dvh;

        align-items:
            flex-end;
    }


    .asareh-shop-hero__overlay {

        background:
            linear-gradient(
                0deg,
                rgba(18, 12, 8, 0.94) 0%,
                rgba(18, 12, 8, 0.55) 46%,
                rgba(18, 12, 8, 0.18) 100%
            );
    }


    .asareh-shop-hero__content {

        width:
            100%;

        padding:
            calc(
                var(--asareh-app-header-height)
                +
                var(--asareh-safe-top)
                +
                80px
            )
            var(--asareh-app-page-padding)
            46px;
    }


    .asareh-breadcrumb {

        margin-bottom:
            24px;

        font-size:
            10px;
    }


    .asareh-shop-hero__title {

        max-width:
            94%;

        margin:
            13px 0 18px;

        font-size:
            clamp(38px, 11.5vw, 58px);

        line-height:
            1.15;
    }


    .asareh-shop-hero__description {

        max-width:
            92%;

        font-size:
            13px;

        line-height:
            1.9;
    }


    /* CATEGORY NAV */

    .asareh-shop-categories__inner {

        width:
            100%;
    }


    .asareh-shop-category {

        min-width:
            132px;

        min-height:
            86px;

        border-inline-start:
            1px solid
            rgba(255, 255, 255, 0.06);
    }


    .asareh-shop-category__title {

        font-size:
            12px;
    }


    /* MAIN */

    .asareh-shop {

        padding:
            62px 0 84px;
    }


    .asareh-shop__container {

        width:
            100%;

        padding:
            0
            var(--asareh-app-page-padding);
    }


    .asareh-shop__header {

        display:
            block;

        margin-bottom:
            26px;

        padding-bottom:
            0;

        border-bottom:
            0;
    }


    .asareh-shop__heading {

        margin-bottom:
            24px;
    }


    .asareh-shop__title {

        font-size:
            34px;
    }


    /* TOOLBAR */

    .asareh-shop-toolbar {

        display:
            grid;

        grid-template-columns:
            1fr 1fr;

        gap:
            10px;
    }


    .asareh-shop-toolbar__filter {

        display:
            flex;

        width:
            100%;
    }


    .asareh-shop-toolbar__sort {

        display:
            block;
    }


    .asareh-shop-toolbar__sort label {

        position:
            absolute;

        width:
            1px;

        height:
            1px;

        overflow:
            hidden;

        clip:
            rect(0, 0, 0, 0);
    }


    .asareh-shop-toolbar__sort select {

        width:
            100%;

        min-width:
            0;

        padding:
            0 10px;

        font-size:
            12px !important;
    }


    /* LAYOUT */

    .asareh-shop__layout {

        display:
            block;
    }


    /* FILTER SHEET */

    .asareh-shop-filter {

        top:
            auto;
    }


    .asareh-shop-filter__mobile-header {

        display:
            flex;
    }


    .asareh-shop-filter__form {

        padding-top:
            18px;
    }


    .asareh-filter-group {

        padding-bottom:
            24px;
    }


    .asareh-filter-group
    +
    .asareh-filter-group {

        padding-top:
            24px;
    }


    .asareh-filter-check {

        min-height:
            38px;
    }


    /* PRODUCTS */

    .asareh-shop-products__grid {

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

        gap:
            34px 10px;
    }


    .asareh-shop-page
    .asareh-product-card__media {

        aspect-ratio:
            0.80;
    }


    .asareh-shop-page
    .asareh-product-card__badge {

        top:
            9px;

        right:
            9px;

        padding:
            5px 7px;

        font-size:
            8px;
    }


    .asareh-shop-page
    .asareh-product-card__wishlist {

        top:
            8px;

        left:
            8px;

        width:
            38px;

        height:
            38px;

        min-width:
            38px;

        min-height:
            38px;

        font-size:
            18px;
    }


    .asareh-shop-page
    .asareh-product-card__content {

        min-height:
            105px;

        gap:
            5px;

        padding-top:
            12px;
    }


    .asareh-shop-page
    .asareh-product-card__title {

        font-size:
            16px;
    }


    .asareh-shop-page
    .asareh-product-card__meta {

        min-height:
            30px;

        font-size:
            9px;

        line-height:
            1.6;
    }


    .asareh-shop-page
    .asareh-product-card__price {

        font-size:
            11px;
    }


    /* PAGINATION */

    .asareh-pagination {

        gap:
            2px;

        margin-top:
            60px;
    }


    .asareh-pagination__item {

        width:
            38px;

        height:
            38px;
    }


    .asareh-pagination__next {

        min-height:
            38px;

        margin-right:
            6px;

        padding:
            0 8px;

        font-size:
            10px;
    }


    /* EDITORIAL */

    .asareh-shop-editorial {

        min-height:
            72svh;

        min-height:
            72dvh;

        align-items:
            flex-end;
    }


    .asareh-shop-editorial__overlay {

        background:
            linear-gradient(
                0deg,
                rgba(18, 12, 8, 0.94) 0%,
                rgba(18, 12, 8, 0.65) 46%,
                rgba(18, 12, 8, 0.16) 100%
            );
    }


    .asareh-shop-editorial__content {

        width:
            100%;

        padding:
            50px
            var(--asareh-app-page-padding)
            60px;
    }


    .asareh-shop-editorial__title {

        margin:
            14px 0 18px;

        font-size:
            clamp(36px, 11vw, 54px);
    }


    .asareh-shop-editorial__content p {

        margin-bottom:
            26px;

        font-size:
            13px;
    }


    /* TRUST */

    .asareh-shop-trust {

        grid-template-columns:
            1fr;
    }


    .asareh-shop-trust__item {

        min-height:
            auto;

        padding:
            28px
            var(--asareh-app-page-padding);

        border-inline-start:
            0;

        border-bottom:
            1px solid
            var(--asareh-shop-border);
    }

}


/* =========================================================
   21. SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .asareh-shop-products__grid {

        gap:
            30px 8px;
    }


    .asareh-shop-page
    .asareh-product-card__title {

        font-size:
            15px;
    }


    .asareh-shop-page
    .asareh-product-card__price {

        font-size:
            10px;
    }


    .asareh-shop-category {

        min-width:
            122px;
    }

}


/* =========================================================
   22. VERY SMALL MOBILE
========================================================= */

@media (max-width: 350px) {

    .asareh-shop-products__grid {

        grid-template-columns:
            1fr;
    }


    .asareh-shop-page
    .asareh-product-card__media {

        aspect-ratio:
            0.9;
    }


    .asareh-shop-page
    .asareh-product-card__title {

        font-size:
            18px;
    }


    .asareh-shop-page
    .asareh-product-card__price {

        font-size:
            12px;
    }

}


/* =========================================================
   23. TOUCH DEVICES
========================================================= */

@media (
    hover: none
) and (
    pointer: coarse
) {

    .asareh-shop-page
    .asareh-product-card__wishlist {

        opacity:
            1;

        visibility:
            visible;
    }


    .asareh-shop-category:hover {

        background:
            transparent;
    }

}


/* =========================================================
   24. REDUCED MOTION
========================================================= */

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

    .asareh-shop-page
    .asareh-product-card__media img,

    .asareh-shop-category,

    .asareh-shop-category::after {

        transition:
            none !important;
    }

}


/* =========================================================
   25. PRINT
========================================================= */

@media print {

    .asareh-shop-hero,
    .asareh-shop-categories,
    .asareh-shop-toolbar,
    .asareh-shop-filter,
    .asareh-shop-editorial,
    .asareh-shop-trust {

        display:
            none !important;
    }


    .asareh-shop {

        padding:
            0;
    }


    .asareh-shop-products__grid {

        grid-template-columns:
            repeat(3, 1fr);
    }

}