/* =========================================================
   HAMMER CRAFT
   PRODUCT CATALOGUE
   product-list.css
========================================================= */


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

.catalogue-page {

    background:
        var(--hc-bg);

    color:
        var(--hc-text);

}


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

.catalogue-hero {

    width:
        100%;

    min-height:
        72vh;

    padding:
        calc(
            var(--header-height)
            +
            85px
        )
        5vw
        75px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

}


.catalogue-hero-inner {

    position:
        relative;

    width:
        min(
            100%,
            var(--hc-max)
        );

    margin:
        0 auto;

}


.catalogue-hero-copy {

    position:
        relative;

    z-index:
        2;

    max-width:
        900px;

}


.catalogue-hero h1 {

    margin:
        18px
        0
        0;

    font-size:
        clamp(
            68px,
            8vw,
            132px
        );

    line-height:
        0.84;

    font-weight:
        500;

    letter-spacing:
        -0.067em;

}


.catalogue-hero h1 em {

    display:
        block;

    color:
        var(--hc-orange);

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

    font-style:
        italic;

    font-weight:
        400;

}


.catalogue-hero p {

    max-width:
        610px;

    margin:
        30px
        0
        0;

    color:
        var(--hc-muted);

    font-size:
        13px;

    line-height:
        1.8;

}


/* =========================================================
   HERO HC MARK
========================================================= */

.catalogue-hero-mark {

    position:
        absolute;

    z-index:
        1;

    right:
        -2vw;

    top:
        50%;

    transform:
        translateY(-50%);

    color:
        rgba(
            23,
            23,
            23,
            0.025
        );

    font-size:
        clamp(
            190px,
            27vw,
            500px
        );

    line-height:
        0.72;

    font-weight:
        800;

    letter-spacing:
        -0.10em;

    pointer-events:
        none;

}


/* =========================================================
   PRODUCT TYPES
========================================================= */

.catalogue-types {

    width:
        100%;

}


.catalogue-types-inner {

    width:
        min(
            calc(
                100% - 10vw
            ),
            var(--hc-max)
        );

    margin:
        0 auto;

    display:
        grid;

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

    border-top:
        1px solid
        var(--hc-line);

    border-bottom:
        1px solid
        var(--hc-line);

}


.catalogue-types article {

    min-height:
        190px;

    padding:
        24px;

    display:
        flex;

    flex-direction:
        column;

    border-right:
        1px solid
        var(--hc-line);

}


.catalogue-types article:last-child {

    border-right:
        0;

}


.catalogue-types article > span {

    color:
        var(--hc-orange);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        0.11em;

}


.catalogue-types h2 {

    margin:
        auto
        0
        8px;

    font-size:
        24px;

    line-height:
        1;

    font-weight:
        500;

    letter-spacing:
        -0.035em;

}


.catalogue-types p {

    margin:
        0;

    color:
        var(--hc-muted);

    font-size:
        11px;

    line-height:
        1.65;

}


/* =========================================================
   FILTERS
========================================================= */

.catalogue-filter-section {

    width:
        min(
            calc(
                100% - 10vw
            ),
            var(--hc-max)
        );

    margin:
        0 auto;

    padding:
        55px
        0
        25px;

}


.catalogue-filter-inner {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

}


.catalogue-filter-button {

    min-height:
        42px;

    padding:
        0
        15px;

    border:
        1px solid
        var(--hc-line-strong);

    border-radius:
        0;

    background:
        transparent;

    color:
        var(--hc-muted);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        0.11em;

    cursor:
        pointer;

    transition:
        background
        150ms ease,
        color
        150ms ease,
        border-color
        150ms ease;

}


.catalogue-filter-button:hover,
.catalogue-filter-button.active {

    border-color:
        var(--hc-text);

    background:
        var(--hc-text);

    color:
        var(--hc-bg);

}


/* =========================================================
   CATALOGUE
========================================================= */

.dynamic-catalogue-section {

    width:
        min(
            calc(
                100% - 10vw
            ),
            var(--hc-max)
        );

    margin:
        0 auto;

    padding:
        10px
        0
        120px;

}


.catalogue-status {

    min-height:
        150px;

    padding:
        28px;

    display:
        flex;

    align-items:
        center;

    border:
        1px solid
        var(--hc-line);

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

    color:
        var(--hc-muted);

    font-size:
        11px;

}


.catalogue-status[hidden] {

    display:
        none;

}


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

.dynamic-product-grid {

    display:
        grid;

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

    gap:
        16px;

}


/* =========================================================
   PRODUCT CARD
========================================================= */

.dynamic-product-card {

    min-width:
        0;

    overflow:
        hidden;

    display:
        grid;

    grid-template-rows:
        minmax(
            340px,
            1fr
        )
        auto;

    border:
        1px solid
        var(--hc-line);

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

    transition:
        transform
        170ms ease,
        border-color
        170ms ease,
        background
        170ms ease;

}


.dynamic-product-card:hover {

    transform:
        translateY(-3px);

    border-color:
        var(--hc-line-strong);

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

}


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

.dynamic-product-image {

    position:
        relative;

    min-height:
        340px;

    display:
        block;

    overflow:
        hidden;

    background:
        var(--hc-bg-soft);

    text-decoration:
        none;

}


.dynamic-product-image img {

    position:
        absolute;

    z-index:
        2;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform
        250ms ease;

}


.dynamic-product-card:hover
.dynamic-product-image img {

    transform:
        scale(1.015);

}


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

.dynamic-product-image-fallback {

    position:
        absolute;

    z-index:
        1;

    inset:
        0;

    padding:
        28px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        flex-end;

    background:

        radial-gradient(
            circle at 72% 30%,
            rgba(
                216,
                106,
                43,
                0.15
            ),
            transparent
            34%
        ),

        linear-gradient(
            145deg,
            var(--hc-bg-soft),
            var(--hc-bg-light)
        );

}


.dynamic-product-image-fallback::before {

    content:
        "HC";

    position:
        absolute;

    right:
        25px;

    top:
        20px;

    color:
        rgba(
            23,
            23,
            23,
            0.035
        );

    font-size:
        clamp(
            90px,
            11vw,
            180px
        );

    line-height:
        0.8;

    font-weight:
        800;

    letter-spacing:
        -0.10em;

}


.dynamic-product-image-fallback span {

    position:
        relative;

    z-index:
        2;

    color:
        var(--hc-orange);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        0.13em;

}


.dynamic-product-image-fallback strong {

    position:
        relative;

    z-index:
        2;

    max-width:
        80%;

    margin-top:
        10px;

    color:
        var(--hc-text);

    font-size:
        clamp(
            32px,
            3.3vw,
            50px
        );

    line-height:
        0.95;

    font-weight:
        500;

    letter-spacing:
        -0.045em;

}


/* =========================================================
   PRODUCT BODY
========================================================= */

.dynamic-product-body {

    min-height:
        300px;

    padding:
        26px;

    display:
        flex;

    flex-direction:
        column;

}


.dynamic-product-topline {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        16px;

    color:
        var(--hc-orange);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        0.11em;

}


.dynamic-product-topline span:last-child {

    color:
        var(--hc-muted);

}


.dynamic-product-body h2 {

    margin:
        30px
        0
        0;

    font-size:
        clamp(
            32px,
            3.3vw,
            50px
        );

    line-height:
        0.95;

    font-weight:
        500;

    letter-spacing:
        -0.045em;

}


.dynamic-product-body > p {

    max-width:
        600px;

    margin:
        15px
        0
        0;

    color:
        var(--hc-muted);

    font-size:
        12px;

    line-height:
        1.7;

}


/* =========================================================
   TAGS
========================================================= */

.dynamic-product-tags {

    margin-top:
        22px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

}


.dynamic-product-tags span {

    min-height:
        29px;

    padding:
        0
        9px;

    display:
        inline-flex;

    align-items:
        center;

    border:
        1px solid
        var(--hc-line);

    color:
        var(--hc-muted);

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        0.08em;

}


/* =========================================================
   PRODUCT FOOTER
========================================================= */

.dynamic-product-footer {

    margin-top:
        auto;

    padding-top:
        30px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

}


.dynamic-product-footer strong {

    font-size:
        25px;

    font-weight:
        500;

    letter-spacing:
        -0.035em;

}


.dynamic-product-footer a {

    color:
        var(--hc-text);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        0.11em;

    text-decoration:
        none;

}


.dynamic-product-footer a:hover {

    color:
        var(--hc-orange);

}


/* =========================================================
   FIND YOUR SOUND CTA
========================================================= */

.catalogue-tuning-cta {

    width:
        100%;

    padding:
        110px
        5vw;

    display:
        grid;

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

    gap:
        80px;

    align-items:
        end;

    background:
        var(--hc-orange);

    color:
        var(--hc-text);

}


.catalogue-tuning-copy {

    max-width:
        950px;

}


.catalogue-tuning-cta
.eyebrow {

    color:
        rgba(
            23,
            23,
            23,
            0.60
        );

}


.catalogue-tuning-cta h2 {

    margin:
        17px
        0
        0;

    font-size:
        clamp(
            55px,
            6.5vw,
            100px
        );

    line-height:
        0.9;

    font-weight:
        500;

    letter-spacing:
        -0.06em;

}


.catalogue-tuning-cta h2 em {

    display:
        block;

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

    font-style:
        italic;

    font-weight:
        400;

}


.catalogue-tuning-cta p {

    max-width:
        650px;

    margin:
        25px
        0
        0;

    color:
        rgba(
            23,
            23,
            23,
            0.72
        );

    font-size:
        13px;

    line-height:
        1.8;

}


.catalogue-dark-button {

    min-height:
        52px;

    padding:
        0
        22px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        var(--hc-text);

    background:
        var(--hc-text);

    color:
        var(--hc-bg);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-decoration:
        none;

    transition:
        background
        150ms ease,
        color
        150ms ease,
        border-color
        150ms ease;

}


.catalogue-dark-button:hover {

    border-color:
        var(--hc-bg);

    background:
        var(--hc-bg);

    color:
        var(--hc-text);

}


/* =========================================================
   FOOTER SAFETY

   Prevents the large logo issue even if markup changes.
========================================================= */

.site-footer
.footer-logo
img,
.site-footer img {

    width:
        66px;

    height:
        66px;

    max-width:
        66px;

    object-fit:
        contain;

}


/* =========================================================
   RESPONSIVE — 1050
========================================================= */

@media
(max-width: 1050px) {

    .catalogue-types-inner {

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

    }


    .catalogue-types article:nth-child(2) {

        border-right:
            0;

    }


    .catalogue-types article:nth-child(-n+2) {

        border-bottom:
            1px solid
            var(--hc-line);

    }


    .dynamic-product-grid {

        grid-template-columns:
            1fr;

    }

}


/* =========================================================
   RESPONSIVE — 760
========================================================= */

@media
(max-width: 760px) {

    .catalogue-hero {

        min-height:
            620px;

        padding:
            125px
            20px
            70px;

    }


    .catalogue-hero-mark {

        right:
            -22vw;

        font-size:
            80vw;

    }


    .catalogue-types-inner,
    .catalogue-filter-section,
    .dynamic-catalogue-section {

        width:
            calc(
                100% - 40px
            );

    }


    .catalogue-types-inner {

        grid-template-columns:
            1fr;

    }


    .catalogue-types article {

        border-right:
            0;

        border-bottom:
            1px solid
            var(--hc-line);

    }


    .catalogue-types article:last-child {

        border-bottom:
            0;

    }


    .catalogue-filter-button {

        flex:
            1 1
            calc(
                50% - 8px
            );

    }


    .dynamic-product-card {

        grid-template-rows:
            300px
            auto;

    }


    .dynamic-product-image {

        min-height:
            300px;

    }


    .catalogue-tuning-cta {

        grid-template-columns:
            1fr;

        padding:
            80px
            20px;

        gap:
            40px;

    }


    .catalogue-dark-button {

        width:
            100%;

    }

}


/* =========================================================
   RESPONSIVE — 430
========================================================= */

@media
(max-width: 430px) {

    .catalogue-filter-button {

        flex-basis:
            100%;

    }


    .dynamic-product-body {

        padding:
            22px;

    }


    .dynamic-product-footer {

        align-items:
            flex-start;

        flex-direction:
            column;

    }

}