/* =========================================================
   ECHTLEDERJACKEN
   Homepage
   Complete replacement stylesheet
   ========================================================= */


/* ---------------------------------------------------------
   1. HOMEPAGE FOUNDATION
   --------------------------------------------------------- */

.home-page {
    width: 100%;
    max-width: none;

    margin: 0;

    overflow-x: clip;
}


.home-page > section {
    width: 100%;
    max-width: none;
}


/*
 * Homepage sections use the full browser width.
 * Internal padding creates breathing room instead
 * of wrapping the page inside a boxed container.
 */

.home-page .container {
    width: 100%;
    max-width: none;

    margin-inline: 0;

    padding-left:
        clamp(1.5rem, 4.5vw, 5.5rem);

    padding-right:
        clamp(1.5rem, 4.5vw, 5.5rem);
}


/*
 * Long-form editorial copy stays readable.
 */

.home-page .container-narrow {
    width: 100%;
    max-width: 1100px;

    margin-inline: auto;

    padding-left:
        1.5rem;

    padding-right:
        1.5rem;
}


/* ---------------------------------------------------------
   2. SHARED HOMEPAGE TYPOGRAPHY
   --------------------------------------------------------- */

.home-page em {
    font-weight: 400;
}


.home-page h1 em,
.home-page h2 em {
    color:
        var(--color-accent-gold);

    font-style: italic;
}


/* ---------------------------------------------------------
   3. HERO
   --------------------------------------------------------- */

.home-hero {
    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    width: 100%;

    min-height:
        calc(100svh - 122px);

    background-color:
        var(--color-secondary);
}


.home-hero__content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;

    padding:
        clamp(4rem, 7vw, 7rem)
        clamp(1.5rem, 4.75vw, 5.5rem);
}


.home-hero h1 {
    max-width: 900px;

    margin-bottom:
        var(--space-6);

    font-size:
        clamp(3rem, 4.7vw, 5.7rem);

    line-height: 0.96;

    letter-spacing:
        -0.052em;
}


.home-hero h1 em {
    display: block;
}


.home-hero__statement {
    max-width: 680px;

    margin-bottom:
        var(--space-5);

    color:
        var(--color-primary);

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

    font-size:
        clamp(1.15rem, 1.45vw, 1.5rem);

    line-height: 1.4;
}


.home-hero__description {
    max-width: 660px;

    color:
        var(--color-text-muted);

    font-size:
        clamp(0.95rem, 0.95vw, 1.05rem);
}


.home-hero__actions {
    margin-top:
        var(--space-5);
}


.home-hero__visual {
    position: relative;

    min-height: 680px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #27363b,
            var(--color-primary)
        );
}


.home-hero__image {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.home-hero__placeholder {
    position: absolute;

    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 2rem;

    overflow: hidden;

    color:
        rgba(249, 254, 252, 0.15);

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

    font-size:
        clamp(3rem, 6.5vw, 7.5rem);

    letter-spacing:
        -0.06em;
}


.home-hero__placeholder em {
    color:
        rgba(205, 145, 60, 0.34);
}


.home-hero__visual::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(12, 17, 19, 0.35),
            transparent 38%
        );

    pointer-events: none;
}


.home-hero__visual-label {
    position: absolute;

    right: 2rem;
    bottom: 2rem;

    z-index: 2;

    color:
        rgba(249, 254, 252, 0.85);

    font-size: 0.58rem;
    font-weight: 600;

    letter-spacing:
        0.2em;

    text-transform:
        uppercase;
}


/* ---------------------------------------------------------
   4. INTRODUCTION
   --------------------------------------------------------- */

.home-intro {
    border-bottom:
        1px solid var(--color-border);
}


.home-intro__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(360px, 0.75fr);

    gap:
        clamp(3.5rem, 8vw, 10rem);

    align-items: start;
}


.home-intro h2 {
    max-width: 850px;

    margin-bottom: 0;

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

    line-height: 1;
}


.home-intro__copy {
    max-width: 720px;

    padding-top:
        var(--space-4);

    color:
        var(--color-text-muted);
}


.home-text-link {
    display: inline-flex;
    align-items: center;

    gap: 0.7rem;

    margin-top:
        var(--space-5);

    color:
        var(--color-primary);

    font-size: 0.75rem;
    font-weight: 600;

    letter-spacing:
        0.08em;

    text-decoration: none;

    text-transform: uppercase;
}


.home-text-link span {
    color:
        var(--color-accent-gold);

    transition:
        transform var(--transition-fast);
}


.home-text-link:hover span {
    transform:
        translateX(4px);
}


/* ---------------------------------------------------------
   5. MEN AND WOMEN FEATURE SECTIONS
   --------------------------------------------------------- */

.home-gender-feature {
    display: grid;

    grid-template-columns:
        minmax(0, 1.06fr)
        minmax(0, 0.94fr);

    width: 100%;

    min-height: 720px;

    background-color:
        var(--color-secondary);

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


.home-gender-feature--reverse {
    grid-template-columns:
        minmax(0, 0.94fr)
        minmax(0, 1.06fr);

    background-color:
        var(--color-background-alt);
}


.home-gender-feature--reverse
.home-gender-feature__media {
    order: 2;
}


.home-gender-feature__media {
    position: relative;

    min-height: 720px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #dfe5e2,
            #c7cfcb
        );
}


.home-gender-feature__media::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(23, 35, 40, 0.11),
            transparent 42%
        );

    pointer-events: none;
}


.home-gender-feature__image {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform var(--transition-slow);
}


.home-gender-feature:hover
.home-gender-feature__image {
    transform:
        scale(1.015);
}


.home-gender-feature__placeholder {
    position: absolute;

    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    color:
        rgba(23, 35, 40, 0.085);

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

    font-size:
        clamp(6rem, 13vw, 15rem);

    font-style: italic;

    letter-spacing:
        -0.06em;
}


.home-gender-feature__content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;

    padding:
        clamp(4rem, 7vw, 7rem)
        clamp(2rem, 5.5vw, 6.5rem);
}


.home-gender-feature__content h2 {
    max-width: 760px;

    font-size:
        clamp(2.5rem, 3.8vw, 4.4rem);

    line-height: 1;
}


.home-gender-feature__content p {
    max-width: 650px;

    color:
        var(--color-text-muted);
}


.home-gender-feature__content .button {
    align-self: flex-start;

    margin-top:
        var(--space-5);
}


/* ---------------------------------------------------------
   6. SHARED SECTION HEADING
   --------------------------------------------------------- */

.home-section-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(340px, 0.65fr);

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

    align-items: end;

    margin-bottom:
        clamp(3rem, 5vw, 4.5rem);
}


.home-section-heading h2 {
    margin-bottom: 0;

    font-size:
        clamp(2.5rem, 3.8vw, 4.3rem);

    line-height: 1;
}


.home-section-heading__copy {
    max-width: 650px;

    color:
        var(--color-text-muted);
}


/* ---------------------------------------------------------
   7. NEW ARRIVALS
   --------------------------------------------------------- */

.home-products {
    background-color:
        var(--color-secondary);

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


.home-product-grid {
    display: grid;

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

    width: 100%;

    gap: 1px;

    background-color:
        var(--color-border);
}


.home-product-card {
    min-width: 0;

    background-color:
        var(--color-secondary);
}


.home-product-card__image-link {
    display: block;

    overflow: hidden;

    background-color:
        var(--color-background-alt);
}


.home-product-card__image {
    width: 100%;

    aspect-ratio: 4 / 5;

    object-fit: cover;

    transition:
        transform var(--transition-slow);
}


.home-product-card:hover
.home-product-card__image {
    transform:
        scale(1.025);
}


.home-product-card__body {
    padding:
        1.25rem
        1.1rem
        1.5rem;
}


.home-product-card h3 {
    margin-bottom:
        0.5rem;

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

    font-size: 0.88rem;
    font-weight: 500;

    line-height: 1.4;
}


.home-product-card h3 a {
    color:
        var(--color-primary);

    text-decoration: none;
}


.home-product-card h3 a:hover {
    color:
        var(--color-accent-gold);
}


.home-product-card__price {
    color:
        var(--color-text-muted);

    font-size: 0.8rem;
}


.home-product-card__price ins {
    color:
        var(--color-accent-red-dark);

    text-decoration: none;
}


.home-product-card__price del {
    margin-right:
        0.4rem;

    opacity: 0.55;
}


.home-products__footer {
    display: flex;
    justify-content: center;

    margin-top:
        var(--space-7);
}


/* ---------------------------------------------------------
   8. SALE
   --------------------------------------------------------- */

.home-sale {
    display: grid;

    grid-template-columns:
        minmax(360px, 0.76fr)
        minmax(0, 1.24fr);

    width: 100%;

    min-height: 700px;

    background-color:
        var(--color-primary);
}


.home-sale__intro {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;

    padding:
        clamp(4rem, 7vw, 7rem)
        clamp(1.5rem, 4.75vw, 5.5rem);

    color:
        var(--color-secondary);
}


.home-sale__intro h2 {
    max-width: 720px;

    color:
        var(--color-secondary);

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

    line-height: 1;
}


.home-sale__intro p {
    max-width: 560px;

    color:
        rgba(249, 254, 252, 0.65);
}


.home-sale__intro .button {
    align-self: flex-start;

    margin-top:
        var(--space-5);
}


.home-sale__products {
    display: grid;

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

    gap: 1px;

    background-color:
        rgba(249, 254, 252, 0.15);
}


.home-sale-product {
    min-width: 0;

    background-color:
        var(--color-secondary);
}


.home-sale-product > a {
    display: block;

    height: 100%;

    color:
        var(--color-primary);

    text-decoration: none;
}


.home-sale-product__image {
    width: 100%;

    aspect-ratio: 4 / 4.5;

    object-fit: cover;
}


.home-sale-product__body {
    padding:
        1.2rem;
}


.home-sale-product h3 {
    margin-bottom:
        0.5rem;

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

    font-size: 0.85rem;
    font-weight: 500;

    line-height: 1.4;
}


.home-sale-product__price {
    color:
        var(--color-text-muted);

    font-size: 0.8rem;
}


.home-sale-product__price ins {
    color:
        var(--color-accent-red-dark);

    text-decoration: none;
}


.home-sale-product__price del {
    margin-right:
        0.4rem;

    opacity: 0.55;
}


.home-sale__graphic {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 700px;

    overflow: hidden;

    background-color:
        var(--color-accent-red-dark);
}


.home-sale__graphic span {
    color:
        rgba(249, 254, 252, 0.13);

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

    font-size:
        clamp(9rem, 22vw, 26rem);

    font-style: italic;

    letter-spacing:
        -0.08em;
}


/* ---------------------------------------------------------
   9. BRAND VALUES
   --------------------------------------------------------- */

.home-values {
    border-top:
        1px solid
        rgba(249, 254, 252, 0.12);
}


.home-values .container {
    padding-top:
        0;

    padding-bottom:
        0;
}


.home-values__heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(340px, 0.65fr);

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

    align-items: end;

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


.home-values__heading h2 {
    max-width: 820px;

    margin-bottom: 0;

    font-size:
        clamp(2.6rem, 4vw, 4.5rem);

    line-height: 0.98;
}


.home-values__intro {
    max-width: 650px;

    color:
        rgba(249, 254, 252, 0.62);
}


.home-values__grid {
    display: grid;

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

    width: 100%;

    border-top:
        1px solid
        rgba(249, 254, 252, 0.13);
}


.home-values__grid article {
    padding:
        2.25rem
        clamp(1.25rem, 2vw, 2.25rem);

    border-right:
        1px solid
        rgba(249, 254, 252, 0.13);
}


.home-values__grid article:last-child {
    border-right: 0;
}


.home-values__grid article > span {
    display: block;

    margin-bottom:
        2.5rem;

    color:
        var(--color-accent-gold);

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

    font-size: 0.8rem;

    font-style: italic;
}


.home-values__grid h3 {
    color:
        var(--color-secondary);

    font-size:
        clamp(1.2rem, 1.5vw, 1.6rem);

    line-height: 1.2;
}


.home-values__grid p {
    color:
        rgba(249, 254, 252, 0.58);

    font-size: 0.87rem;
}


/* ---------------------------------------------------------
   10. SIZE AND FIT GUIDE
   --------------------------------------------------------- */

.home-fit-guide {
    display: grid;

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

    width: 100%;

    background-color:
        var(--color-background-alt);

    border-top:
        1px solid var(--color-border);

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


.home-fit-guide__label {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    min-height: 620px;

    padding:
        clamp(2rem, 3vw, 3.5rem);

    border-right:
        1px solid var(--color-border);

    color:
        var(--color-text-muted);

    font-size: 0.62rem;
    font-weight: 600;

    letter-spacing:
        0.16em;

    text-transform: uppercase;
}


.home-fit-guide__label span {
    color:
        var(--color-accent-gold);

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

    font-size: 1rem;

    font-style: italic;
}


.home-fit-guide__content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 100%;
    max-width: 1180px;

    min-height: 620px;

    padding:
        clamp(4rem, 7vw, 7rem)
        clamp(2rem, 6vw, 7rem);
}


.home-fit-guide__content h2 {
    max-width: 900px;

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

    line-height: 1;
}


.home-fit-guide__content p {
    max-width: 720px;

    color:
        var(--color-text-muted);
}


.home-fit-guide__content .button {
    align-self: flex-start;

    margin-top:
        var(--space-5);
}


/* ---------------------------------------------------------
   11. EDITORIAL CONTENT
   --------------------------------------------------------- */

.home-editorial {
    background-color:
        var(--color-secondary);
}


.home-editorial h2 {
    max-width: 1000px;

    font-size:
        clamp(2.5rem, 3.8vw, 4.3rem);

    line-height: 1.02;
}


.home-editorial__copy {
    max-width: 900px;

    margin-top:
        var(--space-7);

    color:
        var(--color-text-muted);

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

    line-height: 1.85;
}


/* ---------------------------------------------------------
   12. FINAL CTA
   --------------------------------------------------------- */

.home-final-cta {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    min-height: 650px;

    padding:
        clamp(4rem, 7vw, 7rem)
        clamp(1.5rem, 4.5vw, 5rem);

    background-color:
        var(--color-primary);

    text-align: center;
}


.home-final-cta__inner {
    width: 100%;
    max-width: 1050px;
}


.home-final-cta h2 {
    color:
        var(--color-secondary);

    font-size:
        clamp(2.75rem, 4.7vw, 5.2rem);

    line-height: 0.98;
}


.home-final-cta p {
    max-width: 720px;

    margin-left: auto;
    margin-right: auto;

    color:
        rgba(249, 254, 252, 0.65);
}


.home-final-cta__statement {
    color:
        var(--color-secondary) !important;

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

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


.home-final-cta .button-group {
    justify-content: center;

    margin-top:
        var(--space-6);
}


.home-final-cta__secondary {
    background-color:
        transparent;

    border-color:
        rgba(249, 254, 252, 0.5);

    color:
        var(--color-secondary);
}


.home-final-cta__secondary:hover {
    background-color:
        var(--color-accent-gold);

    border-color:
        var(--color-accent-gold);

    color:
        var(--color-primary);
}


/* =========================================================
   LARGE TABLET AND SMALL DESKTOP
   ========================================================= */

@media (max-width: 1100px) {

    .home-hero {
        grid-template-columns:
            minmax(0, 0.95fr)
            minmax(0, 1.05fr);
    }


    .home-hero h1 {
        font-size:
            clamp(2.8rem, 5vw, 4.7rem);
    }


    .home-intro__grid,
    .home-section-heading,
    .home-values__heading {
        grid-template-columns:
            1fr;

        gap:
            var(--space-7);
    }


    .home-intro__copy,
    .home-section-heading__copy,
    .home-values__intro {
        max-width: 760px;
    }


    .home-gender-feature,
    .home-gender-feature--reverse {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


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


    .home-sale {
        grid-template-columns:
            minmax(320px, 0.8fr)
            minmax(0, 1.2fr);
    }


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


    .home-values__grid article:nth-child(2) {
        border-right: 0;
    }


    .home-values__grid article:nth-child(n + 3) {
        border-top:
            1px solid
            rgba(249, 254, 252, 0.13);
    }

}


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

@media (max-width: 900px) {

    .home-hero {
        grid-template-columns:
            1fr;

        min-height: 0;
    }


    .home-hero__visual {
        order: -1;

        min-height:
            min(72vh, 720px);
    }


    .home-hero__content {
        padding:
            4.5rem
            clamp(1.5rem, 6vw, 4rem);
    }


    .home-gender-feature,
    .home-gender-feature--reverse {
        grid-template-columns:
            1fr;

        min-height: 0;
    }


    .home-gender-feature__media,
    .home-gender-feature--reverse
    .home-gender-feature__media {
        order: 0;

        min-height:
            min(72vh, 720px);
    }


    .home-gender-feature__content {
        padding:
            4.5rem
            clamp(1.5rem, 6vw, 4rem);
    }


    .home-sale {
        grid-template-columns:
            1fr;

        min-height: 0;
    }


    .home-sale__intro {
        min-height: 520px;
    }


    .home-sale__products {
        min-height: 650px;
    }


    .home-sale__graphic {
        min-height: 580px;
    }


    .home-fit-guide {
        grid-template-columns:
            minmax(120px, 0.2fr)
            minmax(0, 1fr);
    }


    .home-fit-guide__content {
        padding:
            4.5rem
            clamp(2rem, 6vw, 4rem);
    }

}


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

@media (max-width: 680px) {

    .home-page .container,
    .home-page .container-narrow {
        padding-left:
            1.25rem;

        padding-right:
            1.25rem;
    }


    .home-hero__visual {
        min-height:
            60vh;
    }


    .home-hero__content {
        padding:
            3.5rem
            1.25rem
            4.25rem;
    }


    .home-hero h1 {
        font-size:
            clamp(2.8rem, 13vw, 4.25rem);
    }


    .home-hero__statement {
        font-size:
            1.15rem;
    }


    .home-hero__actions {
        align-items: stretch;
    }


    .home-hero__actions .button {
        width: 100%;
    }


    .home-intro h2,
    .home-section-heading h2,
    .home-values__heading h2,
    .home-fit-guide__content h2,
    .home-editorial h2 {
        font-size:
            clamp(2.25rem, 10vw, 3.35rem);
    }


    .home-gender-feature__media,
    .home-gender-feature--reverse
    .home-gender-feature__media {
        min-height:
            58vh;
    }


    .home-gender-feature__content {
        padding:
            3.75rem
            1.25rem
            4.25rem;
    }


    .home-gender-feature__content h2 {
        font-size:
            clamp(2.35rem, 10.5vw, 3.5rem);
    }


    .home-gender-feature__content .button {
        width: 100%;
    }


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


    .home-product-card__body {
        padding:
            1rem
            0.8rem
            1.25rem;
    }


    .home-product-card h3 {
        font-size:
            0.82rem;
    }


    .home-products__footer .button {
        width: 100%;
    }


    .home-sale__intro {
        min-height: 0;

        padding:
            4rem
            1.25rem;
    }


    .home-sale__intro h2 {
        font-size:
            clamp(2.4rem, 10vw, 3.5rem);
    }


    .home-sale__intro .button {
        width: 100%;
    }


    .home-sale__products {
        grid-template-columns:
            1fr;

        min-height: 0;
    }


    .home-sale__graphic {
        min-height: 430px;
    }


    .home-values__grid {
        grid-template-columns:
            1fr;
    }


    .home-values__grid article,
    .home-values__grid article:nth-child(2) {
        border-right: 0;
    }


    .home-values__grid article
    + article {
        border-top:
            1px solid
            rgba(249, 254, 252, 0.13);
    }


    .home-fit-guide {
        grid-template-columns:
            1fr;
    }


    .home-fit-guide__label {
        flex-direction: row;

        min-height: 0;

        padding:
            1.25rem;

        border-right: 0;

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


    .home-fit-guide__content {
        min-height: 0;

        padding:
            4rem
            1.25rem;
    }


    .home-fit-guide__content .button {
        width: 100%;
    }


    .home-editorial__copy {
        margin-top:
            var(--space-6);
    }


    .home-final-cta {
        min-height: 600px;

        padding:
            4.5rem
            1.25rem;
    }


    .home-final-cta h2 {
        font-size:
            clamp(2.5rem, 11vw, 4rem);
    }


    .home-final-cta .button-group {
        align-items: stretch;
    }


    .home-final-cta .button {
        width: 100%;
    }

}


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

@media (max-width: 420px) {

    .home-product-grid {
        grid-template-columns:
            1fr;
    }


    .home-hero__visual,
    .home-gender-feature__media,
    .home-gender-feature--reverse
    .home-gender-feature__media {
        min-height:
            54vh;
    }

}


/* =========================================================
   HELLO ELEMENTOR HOMEPAGE WIDTH OVERRIDE
   ========================================================= */

/*
 * Hello Elementor adds max-width constraints to .site-main
 * on pages that are not built with Elementor.
 *
 * Our homepage is completely custom coded, so remove those
 * constraints and allow the main element to span the full
 * browser width.
 */

body:not([class*="elementor-page-"])
#main-content.site-main.home-page,
body.home
#main-content.site-main.home-page {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}


/*
 * Ensure every direct homepage section can also span
 * the complete available width.
 */

#main-content.home-page > section {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* =========================================================
   HOMEPAGE MOTION
   Subtle premium interactions
   ========================================================= */


/* ---------------------------------------------------------
   SCROLL REVEAL
   --------------------------------------------------------- */

.reveal-on-scroll {
    opacity: 0;

    transform:
        translate3d(0, 18px, 0);

    transition:
        opacity 650ms cubic-bezier(0.2, 0.65, 0.3, 1),
        transform 650ms cubic-bezier(0.2, 0.65, 0.3, 1);

    transition-delay:
        var(--reveal-delay, 0ms);
}


.reveal-on-scroll.is-revealed {
    opacity: 1;

    transform:
        translate3d(0, 0, 0);
}


/* ---------------------------------------------------------
   IMAGE / MEDIA REVEAL
   --------------------------------------------------------- */

.reveal-media {
    opacity: 0;

    transform:
        scale(1.012);

    transition:
        opacity 800ms cubic-bezier(0.2, 0.65, 0.3, 1),
        transform 900ms cubic-bezier(0.2, 0.65, 0.3, 1);

    transition-delay:
        var(--reveal-delay, 0ms);
}


.reveal-media.is-revealed {
    opacity: 1;

    transform:
        scale(1);
}


/* ---------------------------------------------------------
   BUTTON MICRO INTERACTION
   Desktop pointer devices only
   --------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {

    .home-page .button {
        transition:
            background-color var(--transition-fast),
            border-color var(--transition-fast),
            color var(--transition-fast),
            transform 180ms ease;
    }


    .home-page .button:hover {
        transform:
            translateY(-2px);
    }


    .home-page .button:active {
        transform:
            translateY(0);
    }

}


/* ---------------------------------------------------------
   TEXT LINK MICRO INTERACTION
   --------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {

    .home-text-link {
        transition:
            color var(--transition-fast);
    }


    .home-text-link span {
        display: inline-block;

        transition:
            transform 200ms ease;
    }


    .home-text-link:hover span {
        transform:
            translateX(5px);
    }

}


/* ---------------------------------------------------------
   PRODUCT CARD POLISH
   --------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {

    .home-product-card__image,
    .home-sale-product__image {
        transition:
            transform 500ms cubic-bezier(0.2, 0.65, 0.3, 1);
    }


    .home-product-card:hover
    .home-product-card__image,
    .home-sale-product:hover
    .home-sale-product__image {
        transform:
            scale(1.018);
    }

}


/* ---------------------------------------------------------
   ACCESSIBILITY
   --------------------------------------------------------- */

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

    .reveal-on-scroll,
    .reveal-media {
        opacity: 1 !important;

        transform: none !important;

        transition: none !important;
    }


    .home-page *,
    .home-page *::before,
    .home-page *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;
    }

}

/* =========================================================
   SALE CATEGORY IMAGE
   ========================================================= */

.home-sale__media {
    position: relative;

    display: block;

    min-width: 0;
    min-height: 700px;

    overflow: hidden;

    background-color:
        var(--color-background-alt);
}


.home-sale__media::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(12, 17, 19, 0.18),
            transparent 42%
        );

    pointer-events: none;
}


.home-sale__image {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 650ms cubic-bezier(0.2, 0.65, 0.3, 1);
}


@media (hover: hover) and (pointer: fine) {

    .home-sale__media:hover
    .home-sale__image {
        transform:
            scale(1.018);
    }

}


@media (max-width: 900px) {

    .home-sale__media {
        min-height:
            min(70vh, 680px);
    }

}


@media (max-width: 680px) {

    .home-sale__media {
        min-height:
            55vh;
    }

}

/* =========================================================
   SALE CATEGORY IMAGE
   MOBILE FIX
   ========================================================= */

.home-sale__media {
    position: relative;

    display: block;

    width: 100%;

    overflow: hidden;
}


.home-sale__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* Tablet */

@media (max-width: 900px) {

    .home-sale__media {
        width: 100%;

        height: 680px;
        min-height: 0;
    }


    .home-sale__image {
        position: absolute;

        inset: 0;

        width: 100%;
        height: 100%;

        object-fit: cover;
    }

}


/* Mobile */

@media (max-width: 680px) {

    .home-sale__media {
        display: block !important;

        width: 100% !important;

        height: 62vh;
        min-height: 430px;
        max-height: 620px;

        visibility: visible !important;
        opacity: 1 !important;
    }


    .home-sale__image {
        position: absolute;

        inset: 0;

        display: block !important;

        width: 100% !important;
        height: 100% !important;

        visibility: visible !important;
        opacity: 1 !important;

        object-fit: cover;
        object-position: center;
    }

}


/* Smaller phones */

@media (max-width: 420px) {

    .home-sale__media {
        height: 56vh;
        min-height: 390px;
    }

}


/* =========================================================
   SALE CATEGORY IMAGE
   FINAL RESPONSIVE SIZING
   ========================================================= */


/* ---------------------------------------------------------
   DESKTOP
   --------------------------------------------------------- */

@media (min-width: 901px) {

    .home-sale {
        min-height: 0;

        height:
            clamp(540px, 40vw, 620px);
    }


    .home-sale__media {
        position: relative;

        display: block;

        width: 100%;
        height: 100%;

        min-width: 0;
        min-height: 0;

        overflow: hidden;

        background-color:
            var(--color-background-alt);
    }


    .home-sale__image {
        position: absolute;

        inset: 0;

        display: block;

        width: 100%;
        height: 100%;

        max-width: none;

        object-fit: cover;
        object-position: center;

        opacity: 1;
        visibility: visible;

        transition:
            transform 650ms
            cubic-bezier(0.2, 0.65, 0.3, 1);
    }


    .home-sale__media::after {
        content: "";

        position: absolute;

        inset: 0;

        z-index: 1;

        background:
            linear-gradient(
                to top,
                rgba(12, 17, 19, 0.14),
                transparent 42%
            );

        pointer-events: none;
    }

}


@media (min-width: 901px)
and (hover: hover)
and (pointer: fine) {

    .home-sale__media:hover
    .home-sale__image {
        transform:
            scale(1.015);
    }

}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (min-width: 681px)
and (max-width: 900px) {

    .home-sale {
        height: auto;
        min-height: 0;
    }


    .home-sale__media {
        position: relative;

        display: block;

        width: 100%;

        min-height: 0;

        aspect-ratio: 4 / 3;

        overflow: hidden;
    }


    .home-sale__image {
        position: absolute;

        inset: 0;

        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;
    }

}


/* ---------------------------------------------------------
   MOBILE / IPHONE
   --------------------------------------------------------- */

@media (max-width: 680px) {

    .home-sale {
        height: auto;
        min-height: 0;
    }


    .home-sale__media {
        position: relative;

        display: block !important;

        width: 100% !important;
        height: auto !important;

        min-height: 0 !important;
        max-height: none !important;

        aspect-ratio: 4 / 5;

        overflow: hidden;

        opacity: 1 !important;
        visibility: visible !important;
    }


    .home-sale__image {
        position: static !important;

        display: block !important;

        width: 100% !important;
        height: 100% !important;

        max-width: none !important;

        aspect-ratio: 4 / 5;

        object-fit: cover;
        object-position: center;

        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;
    }

}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

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

    .home-sale__image {
        transition: none !important;
        transform: none !important;
    }

}