/* =========================================================
   UBUNTU LTD
   WOOCOMMERCE CATEGORY ARCHIVE
========================================================= */


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

.u-category-hero {
    position: relative;

    min-height: 590px;

    display: flex;

    align-items:
        flex-end;

    overflow:
        hidden;

    background:
        var(--bark);

    background-position:
        center;

    background-size:
        cover;

    background-repeat:
        no-repeat;
}


.u-category-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(19,35,26,.12) 0%,
            rgba(19,35,26,.30) 42%,
            rgba(19,35,26,.92) 100%
        );
}


.u-category-hero.no-category-image
.u-category-hero-overlay {
    background:
        linear-gradient(
            135deg,
            var(--bark-2),
            var(--bark)
        );
}


.u-category-hero-inner {
    position: relative;

    z-index: 2;

    width: 100%;

    padding-top:
        160px;

    padding-bottom:
        clamp(
            54px,
            7vw,
            90px
        );

    color:
        #fff;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.u-category-breadcrumb {
    display: flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        clamp(
            38px,
            5vw,
            65px
        );

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

    font-size:
        .79rem;
}


.u-category-breadcrumb a {
    color:
        inherit;

    text-decoration:
        none;
}


.u-category-breadcrumb a:hover {
    color:
        var(--amber-soft);
}


/* =========================================================
   CATEGORY HEADING
========================================================= */

.u-category-heading {
    max-width:
        900px;
}


.u-category-eyebrow {
    margin:
        0 0 1rem;

    color:
        var(--amber-soft);

    font-size:
        .7rem;

    font-weight:
        700;

    letter-spacing:
        .18em;
}


.u-category-heading h1 {
    max-width:
        14ch;

    margin:
        0;

    color:
        #fff;

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

    font-weight:
        400;

    line-height:
        .96;

    letter-spacing:
        -.045em;
}


.u-category-description {
    max-width:
        650px;

    margin-top:
        1.4rem;

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

    font-size:
        1rem;

    line-height:
        1.72;
}


.u-category-description p {
    margin: 0;
}


.u-category-count {
    margin:
        1.4rem
        0 0;

    color:
        var(--amber-soft);

    font-size:
        .78rem;

    font-weight:
        600;

    letter-spacing:
        .06em;
}


/* =========================================================
   CATEGORY NAVIGATION
========================================================= */

.u-category-nav {
    position:
        sticky;

    top:
        72px;

    z-index:
        20;

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

    background:
        var(--paper);
}


.u-category-nav-inner {
    display: flex;

    align-items:
        center;

    gap:
        6px;

    overflow-x:
        auto;

    padding-top:
        13px;

    padding-bottom:
        13px;

    scrollbar-width:
        none;
}


.u-category-nav-inner::-webkit-scrollbar {
    display: none;
}


.u-category-nav-link {
    flex:
        0 0 auto;

    padding:
        .58rem
        .95rem;

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

    border-radius:
        99px;

    color:
        var(--ink);

    font-size:
        .8rem;

    font-weight:
        600;

    text-decoration:
        none;

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


.u-category-nav-link:hover,
.u-category-nav-link.active {
    border-color:
        var(--bark);

    background:
        var(--bark);

    color:
        var(--husk);
}


/* =========================================================
   PRODUCTS
========================================================= */

.u-category-products {
    padding-block:
        clamp(
            70px,
            9vw,
            130px
        );

    background:
        var(--husk);
}


.u-category-toolbar {
    display: flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        30px;

    margin-bottom:
        clamp(
            32px,
            5vw,
            55px
        );
}


.u-category-toolbar h2 {
    margin: 0;

    font-size:
        clamp(
            2.2rem,
            4vw,
            3.7rem
        );
}


.u-category-ordering
.woocommerce-ordering {
    float: none !important;

    margin: 0 !important;
}


.u-category-ordering select {
    min-width:
        210px;

    min-height:
        45px;

    padding:
        0
        42px
        0
        15px;

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

    border-radius:
        0;

    background-color:
        var(--paper);

    color:
        var(--ink);

    font:
        inherit;

    font-size:
        .82rem;
}


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

.u-category-products
.u-pgrid {
    display: grid !important;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        ) !important;

    gap:
        clamp(
            20px,
            2.2vw,
            30px
        ) !important;

    align-items:
        stretch !important;
}


/* =========================================================
   PAGINATION
========================================================= */

.u-category-pagination {
    margin-top:
        clamp(
            45px,
            6vw,
            75px
        );
}


.u-category-pagination
.woocommerce-pagination
ul.page-numbers {
    display: flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;
}


.u-category-pagination
.page-numbers li {
    border:
        0 !important;
}


.u-category-pagination
.page-numbers a,
.u-category-pagination
.page-numbers span {
    min-width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    padding:
        0 12px !important;

    border:
        1px solid
        var(--line) !important;

    border-radius:
        99px;

    background:
        var(--paper);

    color:
        var(--ink);

    font-size:
        .8rem;

    text-decoration:
        none;
}


.u-category-pagination
.page-numbers .current,
.u-category-pagination
.page-numbers a:hover {
    border-color:
        var(--bark) !important;

    background:
        var(--bark);

    color:
        var(--husk);
}


/* =========================================================
   EMPTY
========================================================= */

.u-category-empty {
    max-width:
        680px;

    padding:
        clamp(
            45px,
            6vw,
            75px
        );

    background:
        var(--paper);
}


.u-category-empty h2 {
    margin-bottom:
        1rem;

    font-size:
        clamp(
            2.1rem,
            4vw,
            3.5rem
        );
}


.u-category-empty > p:not(.kicker) {
    margin-bottom:
        2rem;

    color:
        var(--ink-60);
}


/* =========================================================
   CTA
   SEPARATE COLOUR FROM FOOTER
========================================================= */

.u-category-cta {
    padding-block:
        clamp(
            70px,
            8vw,
            115px
        );

    background:
        var(--leaf);

    color:
        #fff;
}


.u-category-cta-inner {
    display: flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        50px;
}


.u-category-cta
.kicker {
    color:
        var(--amber-soft);
}


.u-category-cta h2 {
    max-width:
        12ch;

    margin-bottom:
        .8rem;

    color:
        #fff;

    font-size:
        clamp(
            2.5rem,
            5vw,
            4.8rem
        );
}


.u-category-cta p:not(.kicker) {
    max-width:
        55ch;

    margin:
        0;

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


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 980px) {

    .u-category-products
    .u-pgrid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;
    }


    .u-category-cta-inner {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

}


@media (max-width: 700px) {

    .u-category-toolbar {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .u-category-ordering,
    .u-category-ordering
    .woocommerce-ordering,
    .u-category-ordering
    select {
        width:
            100%;
    }

}


@media (max-width: 580px) {

    .u-category-hero {
        min-height:
            520px;
    }


    .u-category-heading h1 {
        font-size:
            clamp(
                2.9rem,
                14vw,
                4.5rem
            );
    }


    .u-category-nav {
        top:
            62px;
    }


    .u-category-products
    .u-pgrid {
        grid-template-columns:
            1fr !important;
    }

}