/*
 * Recently Viewed
 * Lincs Lootcave
 *
 * Owns the Recently Viewed page composition only.
 * Product-card presentation remains owned by modules/shop-card.
 */


/* ==========================================================
   PAGE SHELL
   ========================================================== */

body.ll-recently-viewed-page:not(.wp-admin)
.wp-site-blocks > main {
    margin-top: 0 !important;
    background:
        radial-gradient(
            circle at 14% 10%,
            rgba(103, 47, 184, .12),
            transparent 31%
        ),
        radial-gradient(
            circle at 88% 23%,
            rgba(94, 207, 89, .055),
            transparent 30%
        ),
        #03050a;
}

body.ll-recently-viewed-page:not(.wp-admin)
.entry-title,

body.ll-recently-viewed-page:not(.wp-admin)
.page-title,

body.ll-recently-viewed-page:not(.wp-admin)
.wp-block-post-title,

body.ll-recently-viewed-page:not(.wp-admin)
header.entry-header {
    display: none !important;
}


/* ==========================================================
   MAIN COMPONENT
   ========================================================== */

.ll-recently-viewed {
    width:
        min(
            calc(100% - 48px),
            1180px
        );

    margin:
        0
        auto;

    padding:
        clamp(82px, 9vw, 132px)
        0
        clamp(96px, 10vw, 148px);

    color:
        rgba(255, 255, 255, .94);
}


/* ==========================================================
   HERO
   ========================================================== */

.ll-recently-viewed__hero {
    position:
        relative;

    overflow:
        hidden;

    padding:
        clamp(48px, 7vw, 78px)
        clamp(28px, 6vw, 74px);

    margin-bottom:
        38px;

    border:
        1px solid
        rgba(231, 197, 103, .25);

    border-radius:
        30px;

    text-align:
        center;

    background:
        radial-gradient(
            circle at 28% 0%,
            rgba(111, 50, 202, .30),
            transparent 48%
        ),
        radial-gradient(
            circle at 88% 82%,
            rgba(88, 196, 90, .08),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            rgba(18, 15, 35, .98),
            rgba(5, 8, 14, .98)
        );

    box-shadow:
        0 32px 74px rgba(0, 0, 0, .36),
        inset 0 1px 0 rgba(255, 255, 255, .035);
}

.ll-recently-viewed__hero::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        10%;

    right:
        10%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(138, 255, 0, .72),
            rgba(231, 197, 103, .85),
            transparent
        );
}

.ll-recently-viewed__kicker {
    display:
        block;

    margin-bottom:
        18px;

    color:
        #9cff35;

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        .19em;

    text-transform:
        uppercase;
}

.ll-recently-viewed__hero h1 {
    margin:
        0;

    color:
        #f7d779;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(48px, 7vw, 82px);

    font-weight:
        700;

    line-height:
        .98;

    letter-spacing:
        -.035em;
}

.ll-recently-viewed__hero > p {
    max-width:
        700px;

    margin:
        26px
        auto
        0;

    color:
        rgba(226, 226, 232, .78);

    font-size:
        clamp(15px, 1.5vw, 18px);

    font-weight:
        650;

    line-height:
        1.7;
}

.ll-recently-viewed__meta {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        30px;
}

.ll-recently-viewed__count {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        38px;

    padding:
        8px
        14px;

    border:
        1px solid
        rgba(231, 197, 103, .20);

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, .025);

    color:
        rgba(255, 255, 255, .70);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        .02em;
}

.ll-recently-viewed__clear {
    appearance:
        none;

    min-height:
        38px;

    padding:
        8px
        14px;

    border:
        1px solid
        rgba(255, 255, 255, .10);

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, .025);

    color:
        rgba(255, 255, 255, .64);

    font:
        inherit;

    font-size:
        12px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        border-color .18s ease,
        color .18s ease,
        background .18s ease;
}

.ll-recently-viewed__clear:hover {
    border-color:
        rgba(231, 197, 103, .34);

    background:
        rgba(231, 197, 103, .055);

    color:
        #f7d779;
}


/* ==========================================================
   PRODUCT GRID
   ========================================================== */

.ll-recently-viewed__grid {
    display:
        grid;

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

    gap:
        18px;

    padding:
        clamp(24px, 3vw, 34px);

    border:
        1px solid
        rgba(231, 197, 103, .14);

    border-radius:
        28px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .025),
            rgba(255, 255, 255, .008)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .025);
}

.ll-recently-viewed__grid[hidden] {
    display:
        none !important;
}

.ll-recently-viewed__grid
> .product.ll-v3-product-card {
    display:
        block;

    min-width:
        0;

    margin:
        0 !important;

    padding:
        0 !important;

    list-style:
        none !important;
}


/* ==========================================================
   EMPTY / LOADING / ERROR
   ========================================================== */

.ll-recently-viewed__state {
    grid-column:
        1 / -1;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        220px;

    gap:
        7px;

    color:
        rgba(255, 255, 255, .66);

    text-align:
        center;
}

.ll-recently-viewed__state strong {
    color:
        rgba(255, 255, 255, .90);

    font-size:
        15px;
}

.ll-recently-viewed__state span {
    font-size:
        13px;
}

.ll-recently-viewed__state--error strong {
    color:
        #f7d779;
}

.ll-recently-viewed__empty {
    position:
        relative;

    overflow:
        hidden;

    padding:
        clamp(54px, 7vw, 82px)
        clamp(26px, 6vw, 70px);

    border:
        1px solid
        rgba(231, 197, 103, .22);

    border-radius:
        28px;

    text-align:
        center;

    background:
        radial-gradient(
            circle at 20% 10%,
            rgba(103, 47, 184, .20),
            transparent 42%
        ),
        radial-gradient(
            circle at 88% 82%,
            rgba(93, 197, 94, .07),
            transparent 35%
        ),
        rgba(7, 9, 16, .88);
}

.ll-recently-viewed__empty[hidden] {
    display:
        none !important;
}

.ll-recently-viewed__empty-kicker {
    display:
        block;

    margin-bottom:
        14px;

    color:
        #9cff35;

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;
}

.ll-recently-viewed__empty h2 {
    margin:
        0;

    color:
        #f7d779;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

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

    line-height:
        1.05;
}

.ll-recently-viewed__empty p {
    max-width:
        620px;

    margin:
        20px
        auto
        0;

    color:
        rgba(225, 225, 232, .72);

    font-size:
        15px;

    font-weight:
        600;

    line-height:
        1.7;
}

.ll-recently-viewed__shop-button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        46px;

    margin-top:
        28px;

    padding:
        10px
        22px;

    border:
        1px solid
        rgba(255, 221, 117, .56);

    border-radius:
        999px;

    background:
        linear-gradient(
            180deg,
            #f7d779,
            #dcb650
        );

    box-shadow:
        0 12px 30px rgba(222, 181, 76, .16);

    color:
        #080a0e !important;

    font-size:
        13px;

    font-weight:
        900;

    text-decoration:
        none !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.ll-recently-viewed__shop-button:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 16px 34px rgba(222, 181, 76, .23);
}


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

@media (max-width: 980px) {

    .ll-recently-viewed__grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }
}


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

@media (max-width: 700px) {

    .ll-recently-viewed {
        width:
            min(
                calc(100% - 28px),
                1180px
            );

        padding:
            54px
            0
            88px;
    }

    .ll-recently-viewed__hero {
        padding:
            40px
            20px;

        margin-bottom:
            20px;

        border-radius:
            22px;
    }

    .ll-recently-viewed__hero h1 {
        font-size:
            clamp(42px, 13vw, 58px);
    }

    .ll-recently-viewed__hero > p {
        margin-top:
            20px;

        font-size:
            14px;
    }

    .ll-recently-viewed__meta {
        margin-top:
            24px;
    }

    .ll-recently-viewed__grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            11px;

        padding:
            12px;

        border-radius:
            20px;
    }

    .ll-recently-viewed__empty {
        padding:
            46px
            20px;

        border-radius:
            22px;
    }

    .ll-recently-viewed__empty h2 {
        font-size:
            36px;
    }
}


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

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

    .ll-recently-viewed__clear,

    .ll-recently-viewed__shop-button {
        transition:
            none;
    }
}