/* =========================================================
   AURELIA JEWELLERY
   SEARCH PAGE

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


/* =========================================================
   01. ROOT
========================================================= */

.asareh-search-page {
    --asareh-search-dark: #1c130d;
    --asareh-search-brown: #4d3622;
    --asareh-search-bronze: #906f56;
    --asareh-search-champagne: #ccb299;
    --asareh-search-cream: #e7dcd0;
    --asareh-search-ivory: #f7f2ec;
    --asareh-search-surface: #fbf8f4;

    --asareh-search-border:
        rgba(77, 54, 34, 0.14);

    --asareh-search-muted:
        rgba(28, 19, 13, 0.56);

    background:
        var(--asareh-search-ivory);

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


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

.asareh-search-hero {
    padding:
        165px 0 92px;

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

    color:
        #fff;
}


.asareh-search-hero__inner {
    width:
        min(1100px, calc(100% - 96px));

    margin:
        0 auto;

    text-align:
        center;
}


.asareh-search-hero
.asareh-breadcrumb {
    display:
        flex;

    margin-bottom:
        34px;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

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

    font-size:
        10px;
}


.asareh-search-hero
.asareh-breadcrumb a {
    color:
        rgba(255, 255, 255, 0.58);
}


.asareh-search-hero
.asareh-breadcrumb
[aria-current="page"] {
    color:
        var(--asareh-search-champagne);
}


.asareh-search-hero
.asareh-eyebrow {
    color:
        var(--asareh-search-champagne);
}


.asareh-search-hero__title {
    margin:
        18px 0 20px;

    color:
        #fff;

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

    font-weight:
        400;

    line-height:
        1.12;
}


.asareh-search-hero__description {
    max-width:
        580px;

    margin:
        0 auto;

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

    font-size:
        12px;

    line-height:
        2;
}


/* =========================================================
   03. SEARCH FORM SECTION
========================================================= */

.asareh-search-main {
    padding:
        90px 0 140px;

    background:
        var(--asareh-search-ivory);
}


.asareh-search-main__inner {
    width:
        min(1440px, calc(100% - 96px));

    margin:
        0 auto;
}


.asareh-search-page-form {
    position:
        relative;

    display:
        grid;

    width:
        min(920px, 100%);

    margin:
        0 auto 54px;

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

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

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


.asareh-search-page-form__input {
    width:
        100%;

    min-width:
        0;

    min-height:
        64px;

    padding:
        0 24px;

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

    background:
        transparent;

    border:
        0;

    outline:
        none;

    font-size:
        15px;
}


.asareh-search-page-form__input::placeholder {
    color:
        rgba(28, 19, 13, 0.38);
}


.asareh-search-page-form__submit {
    min-width:
        130px;

    min-height:
        64px;

    padding:
        0 24px;

    color:
        #fff;

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

    font-size:
        11px;
}


.asareh-search-page-form__clear {
    position:
        absolute;

    top:
        50%;

    left:
        142px;

    display:
        none;

    width:
        38px;

    height:
        38px;

    padding:
        0;

    place-items:
        center;

    color:
        var(--asareh-search-muted);

    transform:
        translateY(-50%);

    border-radius:
        50%;

    font-size:
        18px;
}


.asareh-search-page-form__clear.is-visible {
    display:
        grid;
}


/* =========================================================
   04. RESULT HEADER
========================================================= */

.asareh-search-results__header {
    display:
        flex;

    margin-bottom:
        38px;

    padding-bottom:
        24px;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        24px;

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


.asareh-search-results__header h2 {
    margin:
        0;

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

    font-size:
        30px;

    font-weight:
        400;
}


.asareh-search-results__meta {
    display:
        block;

    margin-top:
        8px;

    color:
        var(--asareh-search-muted);

    font-size:
        10px;
}


.asareh-search-results__query {
    color:
        var(--asareh-search-bronze);
}


.asareh-search-results__count {
    color:
        var(--asareh-search-muted);

    font-size:
        10px;
}


/* =========================================================
   05. SUGGESTIONS
========================================================= */

.asareh-search-suggestions {
    display:
        flex;

    width:
        min(920px, 100%);

    margin:
        -28px auto 62px;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        8px;
}


.asareh-search-suggestions__label {
    margin-inline-end:
        6px;

    color:
        var(--asareh-search-muted);

    font-size:
        9px;
}


.asareh-search-suggestion {
    min-height:
        38px;

    padding:
        0 15px;

    color:
        var(--asareh-search-muted);

    background:
        transparent;

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

    font-size:
        9px;
}


.asareh-search-suggestion:hover {
    color:
        #fff;

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

    border-color:
        var(--asareh-search-dark);
}


/* =========================================================
   06. RESULTS GRID
========================================================= */

.asareh-search-results__grid {
    display:
        grid;

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

    gap:
        48px 22px;
}


/* =========================================================
   07. RESULT CARD
========================================================= */

.asareh-search-card {
    min-width:
        0;
}


.asareh-search-card[hidden] {
    display:
        none;
}


.asareh-search-card__media {
    position:
        relative;

    aspect-ratio:
        4 / 5;

    overflow:
        hidden;

    background:
        var(--asareh-search-cream);
}


.asareh-search-card__media > a {
    display:
        block;

    width:
        100%;

    height:
        100%;
}


.asareh-search-card__media img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

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


.asareh-search-card__badge {
    position:
        absolute;

    top:
        12px;

    right:
        12px;

    padding:
        7px 10px;

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

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

    font-size:
        8px;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}


.asareh-search-card__content {
    padding:
        18px 2px 0;
}


.asareh-search-card__content h3 {
    margin:
        0 0 7px;

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

    font-size:
        17px;

    font-weight:
        400;
}


.asareh-search-card__content h3 a {
    color:
        inherit;
}


.asareh-search-card__meta {
    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--asareh-search-muted);

    font-size:
        9px;
}


.asareh-search-card__price {
    color:
        var(--asareh-search-brown);

    font-size:
        11px;
}


/* =========================================================
   08. INITIAL STATE
========================================================= */

.asareh-search-initial {
    display:
        none;

    padding:
        80px 20px;

    text-align:
        center;
}


.asareh-search-initial.is-visible {
    display:
        block;
}


.asareh-search-initial__icon {
    display:
        grid;

    width:
        78px;

    height:
        78px;

    margin:
        0 auto 26px;

    place-items:
        center;

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

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

    border-radius:
        50%;

    font-size:
        28px;
}


.asareh-search-initial h2 {
    margin:
        0 0 12px;

    font-size:
        32px;

    font-weight:
        400;
}


.asareh-search-initial p {
    max-width:
        520px;

    margin:
        0 auto;

    color:
        var(--asareh-search-muted);

    font-size:
        10px;

    line-height:
        2;
}


/* =========================================================
   09. EMPTY STATE
========================================================= */

.asareh-search-empty {
    display:
        none;

    padding:
        90px 20px;

    text-align:
        center;

    border-top:
        1px solid
        var(--asareh-search-border);

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


.asareh-search-empty.is-visible {
    display:
        block;
}


.asareh-search-empty__icon {
    display:
        grid;

    width:
        76px;

    height:
        76px;

    margin:
        0 auto 24px;

    place-items:
        center;

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

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

    border-radius:
        50%;

    font-size:
        24px;
}


.asareh-search-empty h2 {
    margin:
        0 0 12px;

    font-size:
        30px;

    font-weight:
        400;
}


.asareh-search-empty p {
    max-width:
        500px;

    margin:
        0 auto 28px;

    color:
        var(--asareh-search-muted);

    font-size:
        10px;

    line-height:
        2;
}


/* =========================================================
   10. HOVER
========================================================= */

@media (hover: hover) {

    .asareh-search-card:hover
    .asareh-search-card__media img {
        transform:
            scale(1.045);
    }

}


/* =========================================================
   11. TABLET
========================================================= */

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

    .asareh-search-hero__inner,
    .asareh-search-main__inner {
        width:
            calc(100% - 48px);
    }


    .asareh-search-results__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   12. MOBILE
========================================================= */

@media (max-width: 768px) {

    .asareh-search-hero {
        padding:
            calc(
                108px +
                env(safe-area-inset-top)
            )
            0
            54px;
    }


    .asareh-search-hero__inner {
        width:
            100%;

        padding:
            0 18px;
    }


    .asareh-search-hero__title {
        font-size:
            clamp(42px, 12vw, 58px);
    }


    .asareh-search-main {
        padding:
            58px 0 105px;
    }


    .asareh-search-main__inner {
        width:
            100%;

        padding:
            0 12px;
    }


    .asareh-search-page-form {
        margin-bottom:
            44px;

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


    .asareh-search-page-form__input {
        min-height:
            56px;

        padding:
            0 14px;

        font-size:
            16px;
    }


    .asareh-search-page-form__submit {
        min-width:
            92px;

        min-height:
            56px;

        padding:
            0 12px;
    }


    .asareh-search-page-form__clear {
        left:
            98px;
    }


    .asareh-search-suggestions {
        margin:
            -20px auto 48px;

        justify-content:
            flex-start;
    }


    .asareh-search-suggestions__label {
        width:
            100%;
    }


    .asareh-search-results__header {
        padding:
            0 4px 20px;

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            10px;
    }


    .asareh-search-results__header h2 {
        font-size:
            25px;
    }


    .asareh-search-results__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            34px 9px;
    }


    .asareh-search-card__content h3 {
        font-size:
            14px;
    }


    .asareh-search-card__meta {
        min-height:
            30px;

        font-size:
            8px;
    }


    .asareh-search-card__price {
        font-size:
            10px;
    }


    .asareh-search-card__badge {
        top:
            7px;

        right:
            7px;
    }

}


/* =========================================================
   13. SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

    .asareh-search-main__inner {
        padding:
            0 8px;
    }


    .asareh-search-results__grid {
        gap:
            30px 7px;
    }

}


/* =========================================================
   14. REDUCED MOTION
========================================================= */

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

    .asareh-search-card__media img {
        transition:
            none !important;
    }

}


/* =========================================================
   15. PRINT
========================================================= */

@media print {

    .asareh-search-hero,
    .asareh-header,
    .asareh-footer,
    .asareh-app-nav,
    .asareh-search-page-form,
    .asareh-search-suggestions {
        display:
            none !important;
    }


    .asareh-search-main {
        padding:
            20px 0;
    }


    .asareh-search-main__inner {
        width:
            100%;
    }

}