/* ==========================================================================
   BAD INFLUENCE™ PREMIUM
   SHOP / COLLECTION
   ========================================================================== */


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

.shop-main {
    overflow: clip;
}


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

.shop-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    min-height:
        calc(100svh - 5rem);

    color:
        var(--porcelain);

    background-color:
        #0b0a09;

    background-image:
        linear-gradient(
            90deg,
            rgba(8, 8, 8, 0.97) 0%,
            rgba(8, 8, 8, 0.93) 20%,
            rgba(8, 8, 8, 0.84) 38%,
            rgba(8, 8, 8, 0.54) 57%,
            rgba(8, 8, 8, 0.18) 78%,
            rgba(8, 8, 8, 0.08) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.08) 0%,
            rgba(0, 0, 0, 0.08) 66%,
            rgba(0, 0, 0, 0.55) 100%
        ),
        url("../images/shop-hero-background.webp");

    background-repeat:
        no-repeat;

    background-size:
        cover;

    background-position:
        62% center;
}


/* ==========================================================================
   BACKGROUND GHOST TYPE
   ========================================================================== */

.shop-hero__ghost {
    position:
        absolute;

    z-index:
        -1;

    top:
        clamp(2.5rem, 6vh, 5rem);

    left:
        clamp(2rem, 4vw, 5rem);

    pointer-events:
        none;

    font-family:
        var(--font-sans);

    font-size:
        clamp(8rem, 15vw, 18rem);

    font-weight:
        700;

    line-height:
        0.75;

    letter-spacing:
        -0.085em;

    white-space:
        nowrap;

    color:
        rgba(242, 240, 233, 0.035);
}


/* ==========================================================================
   MAIN HERO COMPOSITION
   ========================================================================== */

.shop-hero__inner {
    display:
        flex;

    align-items:
        center;

    width:
        min(
            calc(100% - clamp(4rem, 8vw, 10rem)),
            1760px
        );

    min-height:
        calc(100svh - 5rem);

    margin-inline:
        auto;

    padding-block:
        clamp(5rem, 10vh, 9rem);
}


.shop-hero__copy {
    position:
        relative;

    z-index:
        2;

    width:
        min(60%, 62rem);
}


/* ==========================================================================
   META
   ========================================================================== */

.shop-hero__meta {
    display:
        flex;

    justify-content:
        space-between;

    width:
        min(100%, 34rem);

    padding-bottom:
        0.75rem;

    border-bottom:
        1px solid
        rgba(242, 240, 233, 0.32);

    font-family:
        var(--font-mono);

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.shop-hero__meta span:last-child {
    color:
        #4f73ff;
}


/* ==========================================================================
   HEADLINE
   ========================================================================== */

.shop-hero__eyebrow {
    margin:
        clamp(2.8rem, 5vh, 4.5rem)
        0
        1rem;

    color:
        rgba(242, 240, 233, 0.84);

    font-family:
        var(--font-mono);

    font-size:
        clamp(0.68rem, 0.75vw, 0.82rem);

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.shop-hero h1 {
    max-width:
        8ch;

    margin:
        0;

    color:
        var(--porcelain);

    font-family:
        var(--font-sans);

    font-size:
        clamp(5.6rem, 9vw, 10.5rem);

    font-weight:
        700;

    line-height:
        0.76;

    letter-spacing:
        -0.078em;

    text-transform:
        uppercase;

    text-shadow:
        0 2px 22px
        rgba(0, 0, 0, 0.25);
}


.shop-hero h1 span {
    display:
        block;
}


.shop-hero h1 span:last-child {
    margin-left:
        clamp(1rem, 4vw, 5rem);
}


/* ==========================================================================
   SCRIPT LINE
   ========================================================================== */

.shop-hero__scribble {
    width:
        fit-content;

    margin:
        clamp(0.8rem, 1.5vh, 1.2rem)
        0
        0
        clamp(8rem, 18vw, 20rem);

    color:
        var(--porcelain);

    font-family:
        var(--font-serif);

    font-size:
        clamp(1.9rem, 2.8vw, 3.5rem);

    font-style:
        italic;

    line-height:
        0.95;

    letter-spacing:
        -0.04em;

    white-space:
        nowrap;

    text-shadow:
        0 2px 18px
        rgba(0, 0, 0, 0.35);
}


.shop-hero__scribble em {
    color:
        #2f5eff;
}


/* ==========================================================================
   LEAD
   ========================================================================== */

.shop-hero__lead {
    max-width:
        31rem;

    margin:
        clamp(2rem, 3vh, 3rem)
        0
        0;

    color:
        rgba(242, 240, 233, 0.82);

    font-size:
        clamp(1rem, 1.05vw, 1.2rem);

    line-height:
        1.45;
}


/* ==========================================================================
   ACTIONS
   ========================================================================== */

.shop-hero__actions {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        0.7rem;

    margin-top:
        clamp(2rem, 3vh, 3rem);
}


.shop-hero__button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        2rem;

    min-width:
        14rem;

    padding:
        0.95rem
        1rem;

    border:
        1px solid
        rgba(242, 240, 233, 0.55);

    background:
        rgba(8, 8, 8, 0.18);

    color:
        var(--porcelain);

    font-family:
        var(--font-mono);

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        0.05em;

    text-decoration:
        none;

    text-transform:
        uppercase;

    backdrop-filter:
        blur(7px);

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


.shop-hero__button--primary {
    border-color:
        #2f5eff;

    background:
        #2f5eff;

    color:
        #ffffff;
}


.shop-hero__button:hover,
.shop-hero__button:focus-visible {
    transform:
        translateY(-2px);
}


.shop-hero__button:not(.shop-hero__button--primary):hover,
.shop-hero__button:not(.shop-hero__button--primary):focus-visible {
    border-color:
        var(--porcelain);

    background:
        var(--porcelain);

    color:
        var(--brown-black);
}


/* ==========================================================================
   SCROLL NOTE
   ========================================================================== */

.shop-hero__scroll-note {
    display:
        flex;

    align-items:
        center;

    gap:
        0.7rem;

    margin:
        clamp(3rem, 6vh, 5rem)
        0
        0;

    color:
        rgba(242, 240, 233, 0.52);

    font-family:
        var(--font-mono);

    font-size:
        0.62rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


/* ==========================================================================
   ULTRAWIDE
   ========================================================================== */

@media (min-width: 1800px) {

    .shop-hero {
        min-height:
            760px;

        height:
            min(
                calc(100svh - 5rem),
                940px
            );

        max-height:
            940px;

        background-position:
            center center;
    }


    .shop-hero__inner {
        min-height:
            100%;

        height:
            100%;
    }


    .shop-hero__copy {
        max-width:
            62rem;
    }


    .shop-hero h1 {
        font-size:
            clamp(
                7.5rem,
                7vw,
                9.6rem
            );
    }

}


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

@media (min-width: 701px) and (max-width: 1100px) {

    .shop-hero {
        min-height:
            720px;

        background-position:
            68% center;

        background-image:
            linear-gradient(
                90deg,
                rgba(8, 8, 8, 0.97) 0%,
                rgba(8, 8, 8, 0.93) 30%,
                rgba(8, 8, 8, 0.72) 58%,
                rgba(8, 8, 8, 0.24) 100%
            ),
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.08) 0%,
                rgba(0, 0, 0, 0.52) 100%
            ),
            url("../images/shop-hero-background.webp");
    }


    .shop-hero__inner {
        width:
            calc(100% - 4rem);

        min-height:
            720px;
    }


    .shop-hero__copy {
        width:
            min(72%, 48rem);
    }


    .shop-hero h1 {
        font-size:
            clamp(
                5rem,
                10vw,
                7.2rem
            );
    }


    .shop-hero__scribble {
        margin-left:
            clamp(
                5rem,
                15vw,
                11rem
            );
    }

}


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

@media (max-width: 700px) {

    .shop-main {
        width:
            100%;

        overflow-x:
            clip;
    }


    .shop-hero {
        min-height:
            100svh;

        background-position:
            70% center;

        background-image:
            linear-gradient(
                90deg,
                rgba(8, 8, 8, 0.96) 0%,
                rgba(8, 8, 8, 0.9) 48%,
                rgba(8, 8, 8, 0.6) 78%,
                rgba(8, 8, 8, 0.42) 100%
            ),
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.05) 0%,
                rgba(0, 0, 0, 0.18) 55%,
                rgba(0, 0, 0, 0.8) 100%
            ),
            url("../images/shop-hero-background.webp");
    }


    .shop-hero__ghost {
        display:
            none;
    }


    .shop-hero__inner {
        align-items:
            flex-end;

        width:
            100%;

        min-height:
            100svh;

        box-sizing:
            border-box;

        padding:
            7rem
            1rem
            3rem;
    }


    .shop-hero__copy {
        width:
            100%;
    }


    .shop-hero__meta {
        width:
            100%;

        font-size:
            0.6rem;
    }


    .shop-hero__eyebrow {
        margin:
            2rem
            0
            0.9rem;

        font-size:
            0.62rem;
    }


    .shop-hero h1 {
        width:
            100%;

        max-width:
            100%;

        font-size:
            clamp(
                3.5rem,
                14.5vw,
                4.7rem
            );

        line-height:
            0.82;

        letter-spacing:
            -0.068em;
    }


    .shop-hero h1 span:last-child {
        margin-left:
            0;
    }


    .shop-hero__scribble {
        margin:
            0.7rem
            0
            0
            14%;

        max-width:
            86%;

        font-size:
            clamp(
                1.65rem,
                7vw,
                2.3rem
            );

        white-space:
            normal;
    }


    .shop-hero__lead {
        max-width:
            25rem;

        margin-top:
            1.75rem;

        font-size:
            0.98rem;
    }


    .shop-hero__actions {
        display:
            grid;

        grid-template-columns:
            1fr;

        width:
            100%;

        gap:
            0.65rem;

        margin-top:
            1.75rem;
    }


    .shop-hero__button {
        width:
            100%;

        min-width:
            0;

        box-sizing:
            border-box;
    }


    .shop-hero__scroll-note {
        margin-top:
            2rem;
    }

}


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

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

    .shop-hero__button {
        transition:
            none;
    }

}

/* BAD INFLUENCE PREMIUM SHOP DEPARTMENTS V3 START */


/* ==========================================================================
   DEPARTMENT INDEX
   ========================================================================== */

.shop-departments {
    position: relative;

    padding:
        clamp(6rem, 10vw, 11rem)
        clamp(2rem, 5vw, 6rem);

    overflow: hidden;

    background: var(--brown-black);
    color: var(--porcelain);
}


.shop-departments__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(18rem, 0.65fr);

    gap: clamp(3rem, 7vw, 8rem);

    align-items: end;

    width: min(100%, 1760px);

    margin:
        0
        auto
        clamp(4rem, 7vw, 7rem);
}


.shop-departments__eyebrow {
    margin: 0 0 1.35rem;

    color: var(--cobalt);

    font-family: var(--font-mono);

    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.shop-departments h2 {
    margin: 0;

    font-family: var(--font-sans);

    font-size:
        clamp(5.5rem, 9vw, 10rem);

    font-weight: 700;
    line-height: 0.78;
    letter-spacing: -0.075em;

    text-transform: uppercase;
}


.shop-departments h2 em {
    display: block;

    margin-left:
        clamp(4rem, 13vw, 14rem);

    color: var(--cobalt);

    font-family: var(--font-serif);

    font-size: 0.68em;
    font-weight: 400;
    line-height: 0.9;

    text-transform: none;
}


.shop-departments__intro {
    max-width: 29rem;

    margin: 0;

    color:
        rgba(242, 240, 233, 0.68);

    font-size:
        clamp(1rem, 1.1vw, 1.2rem);

    line-height: 1.5;
}


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

.shop-departments__grid {
    display: grid;

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

    grid-template-rows:
        minmax(25rem, 34vw)
        minmax(24rem, 31vw);

    gap:
        clamp(1rem, 1.5vw, 1.75rem);

    width: min(100%, 1760px);

    margin-inline: auto;
}


.shop-department-card {
    position: relative;

    isolation: isolate;

    min-width: 0;

    overflow: hidden;

    background: #181513;
}


.shop-department-card--rifles {
    grid-column: 1 / span 7;
    grid-row: 1;
}


.shop-department-card--handguns {
    grid-column: 8 / -1;
    grid-row: 1;
}


.shop-department-card--shotguns {
    grid-column: 1 / span 4;
    grid-row: 2;
}


.shop-department-card--ammo {
    grid-column: 5 / span 4;
    grid-row: 2;
}


.shop-department-card--gear {
    grid-column: 9 / -1;
    grid-row: 2;
}


/* ==========================================================================
   IMAGE
   ========================================================================== */

.shop-department-card__media {
    position: absolute;

    inset: 0;

    margin: 0;
}


.shop-department-card__media::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(10, 9, 8, 0.02) 18%,
            rgba(10, 9, 8, 0.12) 48%,
            rgba(10, 9, 8, 0.52) 72%,
            rgba(10, 9, 8, 0.97) 100%
        );
}


.shop-department-card img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1.01);

    filter:
        saturate(0.9)
        contrast(1.04);

    transition:
        transform 700ms cubic-bezier(.2,.7,.2,1),
        filter 350ms ease;
}


.shop-department-card:hover img {
    transform: scale(1.045);

    filter:
        saturate(1)
        contrast(1.06);
}


/* ==========================================================================
   COPY
   ========================================================================== */

.shop-department-card__content {
    position: absolute;

    z-index: 2;

    right: 0;
    bottom: 0;
    left: 0;

    display: grid;

    grid-template-columns:
        auto
        1fr;

    gap:
        clamp(1.25rem, 2vw, 2.5rem);

    align-items: end;

    padding:
        clamp(1.75rem, 2.8vw, 3.15rem);

    padding-bottom:
        clamp(2.1rem, 3.25vw, 3.6rem);
}


.shop-department-card__number {
    align-self: start;

    padding-top: 0.2rem;

    color: var(--cobalt);

    font-family: var(--font-mono);

    font-size: 0.68rem;
    font-weight: 700;
}


.shop-department-card__label {
    margin: 0 0 0.65rem;

    color:
        rgba(242, 240, 233, 0.58);

    font-family: var(--font-mono);

    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.shop-department-card h3 {
    margin: 0;

    font-family: var(--font-sans);

    font-size:
        clamp(2.5rem, 4.5vw, 5.8rem);

    font-weight: 700;
    line-height: 0.85;
    letter-spacing: -0.065em;

    text-transform: uppercase;
}


.shop-department-card--shotguns h3 {
    font-size:
        clamp(2.4rem, 3.8vw, 4.8rem);
}


.shop-department-card--ammo h3 {
    font-size:
        clamp(2.2rem, 3.25vw, 4rem);
}


.shop-department-card--gear h3 {
    font-size:
        clamp(2.1rem, 3.15vw, 3.9rem);

    line-height: 0.88;
}


.shop-department-card__copy {
    max-width: 17rem;

    margin: 1rem 0 0;

    color:
        rgba(242, 240, 233, 0.72);

    font-family: var(--font-serif);

    font-size:
        clamp(1rem, 1.25vw, 1.35rem);

    font-style: italic;
    line-height: 1.1;
}


/* ==========================================================================
   GHOST COPY
   ========================================================================== */

.shop-departments__note {
    width: min(100%, 1760px);

    margin:
        clamp(4rem, 7vw, 7rem)
        auto
        0;

    overflow: hidden;

    font-family: var(--font-sans);

    font-size:
        clamp(2.75rem, 4.6vw, 5.5rem);

    font-weight: 700;
    line-height: 0.85;
    letter-spacing: -0.055em;

    color:
        rgba(242, 240, 233, 0.055);

    white-space: nowrap;
}


/* ==========================================================================
   ULTRAWIDE
   ========================================================================== */

@media (min-width: 1900px) {

    .shop-departments__grid {
        grid-template-rows:
            560px
            520px;
    }

}


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

@media (min-width: 701px) and (max-width: 1100px) {

    .shop-departments__header {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }


    .shop-departments h2 {
        font-size:
            clamp(5rem, 11vw, 7rem);
    }


    .shop-departments__grid {
        grid-template-columns:
            1fr
            1fr;

        grid-template-rows:
            repeat(3, minmax(25rem, 48vw));
    }


    .shop-department-card--rifles,
    .shop-department-card--handguns,
    .shop-department-card--shotguns,
    .shop-department-card--ammo {
        grid-column: auto;
        grid-row: auto;
    }


    .shop-department-card--gear {
        grid-column: 1 / -1;
        grid-row: auto;
    }


    .shop-department-card h3,
    .shop-department-card--ammo h3,
    .shop-department-card--gear h3 {
        font-size:
            clamp(2.7rem, 5.4vw, 4.3rem);
    }

}


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

@media (max-width: 700px) {

    .shop-departments {
        padding:
            5.5rem
            1rem;
    }


    .shop-departments__header {
        grid-template-columns: 1fr;

        gap: 2rem;

        margin-bottom: 3rem;
    }


    .shop-departments h2 {
        font-size:
            clamp(4rem, 18vw, 5.8rem);
    }


    .shop-departments h2 em {
        margin-left: 16%;
    }


    .shop-departments__grid {
        display: flex;

        flex-direction: column;

        gap: 1rem;
    }


    .shop-department-card {
        min-height:
            min(118vw, 32rem);
    }


    .shop-department-card__content {
        gap: 1rem;

        padding: 1.35rem;
    }


    .shop-department-card h3,
    .shop-department-card--ammo h3,
    .shop-department-card--gear h3 {
        font-size:
            clamp(2.8rem, 13vw, 4.3rem);
    }


    .shop-department-card__copy {
        font-size: 1.1rem;
    }


    .shop-departments__note {
        margin-top: 4rem;

        white-space: normal;
    }

}


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

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

    .shop-department-card img {
        transition: none;
    }

}


/* BAD INFLUENCE PREMIUM SHOP DEPARTMENTS V3 END */

/* BAD INFLUENCE PREMIUM SHOP EXPLORER V1 START */


/* ==========================================================================
   BUTTON RESET
   ========================================================================== */

.shop-department-card {
    display: block;

    width: auto;

    padding: 0;

    border: 0;

    appearance: none;

    color: inherit;

    font: inherit;

    text-align: left;

    cursor: pointer;
}


/* ==========================================================================
   INITIAL SCROLL REVEAL
   ========================================================================== */

[data-shop-explorer]
.shop-department-card {
    opacity: 0;

    transform:
        translateY(2.5rem)
        scale(0.965);

    transition:
        opacity 600ms ease,
        transform 700ms cubic-bezier(.2,.7,.2,1);
}


[data-shop-explorer].is-revealed
.shop-department-card {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


[data-shop-explorer].is-revealed
.shop-department-card:nth-child(1) {
    transition-delay: 80ms;
}

[data-shop-explorer].is-revealed
.shop-department-card:nth-child(2) {
    transition-delay: 150ms;
}

[data-shop-explorer].is-revealed
.shop-department-card:nth-child(3) {
    transition-delay: 220ms;
}

[data-shop-explorer].is-revealed
.shop-department-card:nth-child(4) {
    transition-delay: 290ms;
}

[data-shop-explorer].is-revealed
.shop-department-card:nth-child(5) {
    transition-delay: 360ms;
}


/* ==========================================================================
   DEPARTMENT EXIT
   ========================================================================== */

.shop-explorer__departments {
    transition:
        opacity 300ms ease,
        transform 360ms cubic-bezier(.4,0,.2,1);
}


.shop-explorer.is-switching
.shop-explorer__departments {
    opacity: 0;

    transform:
        scale(0.88);
}


/* ==========================================================================
   PRODUCT MODE
   ========================================================================== */

.shop-explorer__products {
    width:
        min(100%, 1760px);

    margin-inline:
        auto;
}


.shop-explorer__products[hidden] {
    display: none;
}


.shop-explorer__product-header {
    display: flex;

    justify-content:
        space-between;

    gap:
        2rem;

    align-items:
        end;

    margin-bottom:
        clamp(2rem, 4vw, 4rem);
}


.shop-explorer__back {
    padding:
        0.8rem
        1rem;

    border:
        1px solid
        rgba(242, 240, 233, 0.34);

    background:
        transparent;

    color:
        var(--porcelain);

    font-family:
        var(--font-mono);

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        0.055em;

    text-transform:
        uppercase;

    cursor:
        pointer;

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


.shop-explorer__back:hover,
.shop-explorer__back:focus-visible {
    border-color:
        var(--porcelain);

    background:
        var(--porcelain);

    color:
        var(--brown-black);
}


.shop-explorer__product-eyebrow {
    margin:
        0
        0
        0.65rem;

    color:
        var(--cobalt);

    font-family:
        var(--font-mono);

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


.shop-explorer__product-header h3 {
    margin:
        0;

    font-family:
        var(--font-sans);

    font-size:
        clamp(
            3.5rem,
            7vw,
            7rem
        );

    line-height:
        0.82;

    letter-spacing:
        -0.065em;

    text-transform:
        uppercase;
}


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

.shop-explorer__product-grid {
    display:
        grid;

    grid-template-columns:
        1.15fr
        0.85fr
        1fr;

    gap:
        clamp(1rem, 1.5vw, 1.75rem);
}


.shop-product-card {
    position:
        relative;

    min-height:
        clamp(
            28rem,
            42vw,
            42rem
        );

    overflow:
        hidden;

    opacity:
        0;

    transform:
        translateY(2rem)
        scale(0.92);

    background:
        #181513;

    transition:
        opacity 500ms ease,
        transform 600ms cubic-bezier(.2,.7,.2,1);
}


.shop-product-card.is-visible {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


.shop-product-card:nth-child(2) {
    margin-top:
        clamp(2rem, 5vw, 5rem);
}


.shop-product-card__link {
    position:
        absolute;

    inset:
        0;

    display:
        block;

    color:
        var(--porcelain);

    text-decoration:
        none;
}


.shop-product-card__media {
    position:
        absolute;

    inset:
        0;

    margin:
        0;
}


.shop-product-card__media::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            rgba(10, 9, 8, 0.02) 20%,
            rgba(10, 9, 8, 0.18) 54%,
            rgba(10, 9, 8, 0.96) 100%
        );
}


.shop-product-card img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transform:
        scale(1.015);

    transition:
        transform 700ms cubic-bezier(.2,.7,.2,1);
}


.shop-product-card:hover img {
    transform:
        scale(1.055);
}


.shop-product-card__content {
    position:
        absolute;

    z-index:
        2;

    right:
        0;

    bottom:
        0;

    left:
        0;

    padding:
        clamp(1.4rem, 2.3vw, 2.5rem);
}


.shop-product-card__meta {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        1rem;

    margin-bottom:
        0.75rem;

    color:
        var(--cobalt);

    font-family:
        var(--font-mono);

    font-size:
        0.62rem;

    font-weight:
        700;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}


.shop-product-card h4 {
    margin:
        0;

    font-family:
        var(--font-sans);

    font-size:
        clamp(
            2rem,
            3vw,
            3.7rem
        );

    line-height:
        0.86;

    letter-spacing:
        -0.055em;

    text-transform:
        uppercase;
}


.shop-product-card__price {
    margin:
        0.9rem
        0
        0;

    font-family:
        var(--font-serif);

    font-size:
        clamp(
            1.35rem,
            1.8vw,
            1.9rem
        );

    font-style:
        italic;
}


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

@media (min-width: 701px) and (max-width: 1100px) {

    .shop-explorer__product-grid {
        grid-template-columns:
            1fr
            1fr;
    }


    .shop-product-card:nth-child(2) {
        margin-top:
            0;
    }


    .shop-product-card:nth-child(3) {
        grid-column:
            1 / -1;

        width:
            70%;

        justify-self:
            center;
    }

}


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

@media (max-width: 700px) {

    .shop-explorer__product-header {
        display:
            flex;

        flex-direction:
            column-reverse;

        align-items:
            flex-start;
    }


    .shop-explorer__product-grid {
        display:
            flex;

        flex-direction:
            column;
    }


    .shop-product-card,
    .shop-product-card:nth-child(2) {
        width:
            100%;

        min-height:
            min(125vw, 34rem);

        margin-top:
            0;
    }

}


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

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

    [data-shop-explorer]
    .shop-department-card,

    .shop-explorer__departments,

    .shop-product-card,

    .shop-product-card img {
        transition:
            none;
    }

}


/* BAD INFLUENCE PREMIUM SHOP EXPLORER V1 END */

/* BAD INFLUENCE PREMIUM SHOP COUNTER V1 START */


/* ==========================================================================
   SECTION 03 / THE COUNTER
   ========================================================================== */

.shop-counter {
    position: relative;

    overflow: hidden;

    border-top:
        1px solid
        rgba(20, 18, 16, 0.18);

    background:
        var(--porcelain);

    color:
        var(--brown-black);
}


.shop-counter::before {
    content: "03";

    position: absolute;

    top:
        -0.22em;

    right:
        -0.03em;

    pointer-events: none;

    font-family:
        var(--font-sans);

    font-size:
        clamp(15rem, 31vw, 37rem);

    font-weight:
        700;

    line-height:
        0.8;

    letter-spacing:
        -0.09em;

    color:
        rgba(20, 18, 16, 0.035);
}


.shop-counter__shell {
    position: relative;

    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(28rem, 1.1fr);

    gap:
        clamp(4rem, 10vw, 11rem);

    width:
        min(
            calc(100% - clamp(4rem, 10vw, 12rem)),
            1760px
        );

    margin-inline:
        auto;

    padding-block:
        clamp(7rem, 11vw, 12rem);
}


/* ==========================================================================
   HEADLINE
   ========================================================================== */

.shop-counter__headline {
    position: relative;
}


.shop-counter__eyebrow {
    margin:
        0
        0
        clamp(2rem, 4vw, 4rem);

    color:
        var(--cobalt);

    font-family:
        var(--font-mono);

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


.shop-counter h2 {
    max-width:
        8ch;

    margin:
        0;

    font-family:
        var(--font-sans);

    font-size:
        clamp(5.8rem, 10vw, 11rem);

    font-weight:
        700;

    line-height:
        0.76;

    letter-spacing:
        -0.075em;

    text-transform:
        uppercase;
}


.shop-counter h2 em {
    display:
        block;

    margin-left:
        clamp(2rem, 7vw, 8rem);

    color:
        var(--cobalt);

    font-family:
        var(--font-serif);

    font-size:
        0.68em;

    font-weight:
        400;

    line-height:
        0.9;

    letter-spacing:
        -0.045em;

    text-transform:
        none;
}


.shop-counter__aside {
    max-width:
        15rem;

    margin:
        clamp(3rem, 6vw, 6rem)
        0
        0
        auto;

    font-family:
        var(--font-serif);

    font-size:
        clamp(1.25rem, 1.7vw, 1.8rem);

    font-style:
        italic;

    line-height:
        1.05;
}


/* ==========================================================================
   RIGHT COLUMN
   ========================================================================== */

.shop-counter__content {
    align-self:
        end;
}


.shop-counter__kicker {
    margin:
        0
        0
        1.4rem;

    color:
        var(--cobalt);

    font-family:
        var(--font-mono);

    font-size:
        0.7rem;

    font-weight:
        700;

    letter-spacing:
        0.085em;

    text-transform:
        uppercase;
}


.shop-counter__intro {
    max-width:
        37rem;

    margin:
        0
        0
        clamp(3rem, 5vw, 5rem);

    font-size:
        clamp(1.2rem, 1.65vw, 1.75rem);

    line-height:
        1.42;
}


/* ==========================================================================
   ROUTES
   ========================================================================== */

.shop-counter__routes {
    border-top:
        1px solid
        rgba(20, 18, 16, 0.5);
}


.shop-counter__route {
    position:
        relative;

    display:
        grid;

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

    gap:
        clamp(1rem, 2vw, 2rem);

    align-items:
        center;

    min-height:
        clamp(9rem, 12vw, 12rem);

    padding:
        clamp(1.5rem, 2.5vw, 2.5rem)
        0;

    overflow:
        hidden;

    border-bottom:
        1px solid
        rgba(20, 18, 16, 0.5);

    color:
        inherit;

    text-decoration:
        none;
}


.shop-counter__route::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    background:
        var(--cobalt);

    transform:
        translateX(-101%);

    transition:
        transform
        430ms
        cubic-bezier(.2,.7,.2,1);
}


.shop-counter__route:hover::before,
.shop-counter__route:focus-visible::before {
    transform:
        translateX(0);
}


.shop-counter__route:hover,
.shop-counter__route:focus-visible {
    color:
        var(--porcelain);

    outline:
        none;
}


.shop-counter__route-number {
    align-self:
        start;

    padding-top:
        0.18rem;

    color:
        var(--cobalt);

    font-family:
        var(--font-mono);

    font-size:
        0.68rem;

    font-weight:
        700;

    transition:
        color
        200ms
        ease;
}


.shop-counter__route:hover
.shop-counter__route-number,

.shop-counter__route:focus-visible
.shop-counter__route-number {
    color:
        var(--porcelain);
}


.shop-counter__route-copy {
    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;
}


.shop-counter__route-copy small {
    margin-bottom:
        0.55rem;

    font-family:
        var(--font-mono);

    font-size:
        0.62rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


.shop-counter__route-copy strong {
    font-family:
        var(--font-sans);

    font-size:
        clamp(1.9rem, 3vw, 3.4rem);

    font-weight:
        700;

    line-height:
        0.92;

    letter-spacing:
        -0.045em;

    text-transform:
        uppercase;
}


.shop-counter__route-copy > span {
    max-width:
        25rem;

    margin-top:
        0.8rem;

    font-family:
        var(--font-serif);

    font-size:
        clamp(1rem, 1.15vw, 1.2rem);

    font-style:
        italic;

    line-height:
        1.15;
}


.shop-counter__route-arrow {
    padding-right:
        0.25rem;

    font-family:
        var(--font-sans);

    font-size:
        clamp(2rem, 3vw, 3.5rem);

    line-height:
        1;

    transition:
        transform
        300ms
        cubic-bezier(.2,.7,.2,1);
}


.shop-counter__route:hover
.shop-counter__route-arrow,

.shop-counter__route:focus-visible
.shop-counter__route-arrow {
    transform:
        translate(
            0.3rem,
            -0.3rem
        );
}


/* ==========================================================================
   FOOT NOTE
   ========================================================================== */

.shop-counter__footer {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        0.75rem
        1.8rem;

    margin-top:
        2rem;

    color:
        rgba(20, 18, 16, 0.5);

    font-family:
        var(--font-mono);

    font-size:
        0.61rem;

    font-weight:
        700;

    letter-spacing:
        0.075em;
}


/* ==========================================================================
   ULTRAWIDE
   ========================================================================== */

@media (min-width: 1900px) {

    .shop-counter__shell {
        max-width:
            1760px;
    }


    .shop-counter h2 {
        font-size:
            10.75rem;
    }

}


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

@media (min-width: 701px) and (max-width: 1100px) {

    .shop-counter__shell {
        grid-template-columns:
            minmax(0, 0.85fr)
            minmax(22rem, 1.15fr);

        gap:
            clamp(2.5rem, 6vw, 4.5rem);

        width:
            calc(100% - 4rem);
    }


    .shop-counter h2 {
        font-size:
            clamp(4.6rem, 10vw, 7rem);
    }


    .shop-counter h2 em {
        margin-left:
            1.5rem;
    }


    .shop-counter__aside {
        margin-left:
            0;
    }


    .shop-counter__route {
        grid-template-columns:
            2.25rem
            minmax(0, 1fr)
            auto;
    }


    .shop-counter__route-copy strong {
        font-size:
            clamp(1.7rem, 3.8vw, 2.7rem);
    }

}


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

@media (max-width: 700px) {

    .shop-counter::before {
        top:
            1rem;

        right:
            -0.08em;

        font-size:
            18rem;
    }


    .shop-counter__shell {
        display:
            block;

        width:
            auto;

        margin:
            0;

        padding:
            5.5rem
            1rem;
    }


    .shop-counter__eyebrow {
        margin-bottom:
            2rem;
    }


    .shop-counter h2 {
        max-width:
            none;

        font-size:
            clamp(4.5rem, 21vw, 6.5rem);
    }


    .shop-counter h2 em {
        margin-left:
            15%;
    }


    .shop-counter__aside {
        max-width:
            13rem;

        margin:
            2.5rem
            0
            4rem
            auto;

        font-size:
            1.25rem;
    }


    .shop-counter__intro {
        font-size:
            1.15rem;
    }


    .shop-counter__route {
        grid-template-columns:
            2rem
            minmax(0, 1fr)
            auto;

        gap:
            0.75rem;

        min-height:
            9rem;

        padding-block:
            1.5rem;
    }


    .shop-counter__route-copy strong {
        font-size:
            clamp(1.7rem, 8vw, 2.5rem);
    }


    .shop-counter__route-copy > span {
        font-size:
            1rem;
    }


    .shop-counter__route-arrow {
        font-size:
            2rem;
    }


    .shop-counter__footer {
        display:
            grid;

        gap:
            0.45rem;

        margin-top:
            1.5rem;
    }

}


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

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

    .shop-counter__route::before,

    .shop-counter__route-arrow,

    .shop-counter__route-number {
        transition:
            none;
    }

}


/* BAD INFLUENCE PREMIUM SHOP COUNTER V1 END */


/* ==========================================================================
   COLLECTION RETURN FLOW V1
   Reverse Product -> Department transition
   ========================================================================== */


/* Fragment landing stays below the fixed premium header. */

#shop-departments {
    scroll-margin-top:
        6rem;
}


/* Product-result stage exit. */

.shop-explorer__products {
    transition:
        opacity 300ms ease,
        transform 360ms cubic-bezier(.4,0,.2,1);
}


.shop-explorer.is-returning-departments
.shop-explorer__products {
    opacity:
        0;

    transform:
        scale(0.96);
}


/*
 * Controlled department re-entry.
 *
 * This intentionally overrides the normal IntersectionObserver
 * state while returning from Product mode.
 */

[data-shop-explorer].is-return-landing
.shop-department-card {
    opacity:
        0;

    transform:
        translateY(1.5rem)
        scale(0.975);

    transition:
        opacity 650ms ease,
        transform 760ms cubic-bezier(.2,.7,.2,1);
}


[data-shop-explorer].is-return-landing.is-return-ready
.shop-department-card {
    opacity:
        1;

    transform:
        translateY(0)
        scale(1);
}


[data-shop-explorer].is-return-landing.is-return-ready
.shop-department-card:nth-child(1) {
    transition-delay:
        70ms;
}


[data-shop-explorer].is-return-landing.is-return-ready
.shop-department-card:nth-child(2) {
    transition-delay:
        140ms;
}


[data-shop-explorer].is-return-landing.is-return-ready
.shop-department-card:nth-child(3) {
    transition-delay:
        210ms;
}


[data-shop-explorer].is-return-landing.is-return-ready
.shop-department-card:nth-child(4) {
    transition-delay:
        280ms;
}


[data-shop-explorer].is-return-landing.is-return-ready
.shop-department-card:nth-child(5) {
    transition-delay:
        350ms;
}


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

    .shop-explorer__products,

    [data-shop-explorer].is-return-landing
    .shop-department-card {
        transition:
            none;
    }

}


/* COLLECTION RETURN FLOW V1 END */