/* =========================================================
   UBUNTU LTD
   WOOCOMMERCE SHOP
========================================================= */


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

.u-shop-head {
    position:
        relative;

    overflow:
        hidden;

    isolation:
        isolate;

    background:
        var(--bark);

    color:
        var(--husk);

    padding-block:
        calc(
            132px +
            env(
                safe-area-inset-top,
                0px
            )
        )
        76px;
}


.u-shop-head-art {
    position:
        absolute;

    inset:
        0;

    z-index:
        -2;

    overflow:
        hidden;

    background:
        linear-gradient(
            115deg,
            #13231A,
            #1D3426
        );
}


.u-shop-head::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    background:
        linear-gradient(
            95deg,
            rgba(
                19,
                35,
                26,
                .97
            )
            30%,
            rgba(
                19,
                35,
                26,
                .74
            )
            100%
        );
}


.u-shop-orb {
    position:
        absolute;

    width:
        430px;

    height:
        430px;

    border-radius:
        50%;

    top:
        -180px;

    right:
        5%;

    background:
        var(--amber);

    opacity:
        .2;
}


.u-shop-ring {
    position:
        absolute;

    width:
        520px;

    height:
        520px;

    border:
        1px solid
        rgba(
            227,
            166,
            44,
            .32
        );

    border-radius:
        50%;

    right:
        -120px;

    bottom:
        -390px;
}


.u-shop-crumbs {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin:
        0 0 1.1rem;

    font-size:
        .86rem;

    color:
        rgba(
            235,
            237,
            228,
            .62
        );
}


.u-shop-crumbs a {
    text-decoration:
        none;
}


.u-shop-crumbs a:hover {
    color:
        var(--amber);
}


.u-shop-head h1 {
    max-width:
        15ch;

    margin-bottom:
        1rem;
}


.u-shop-intro {
    max-width:
        55ch;

    color:
        rgba(
            235,
            237,
            228,
            .82
        );
}


.u-shop-intro p:last-child {
    margin-bottom:
        0;
}


.u-shop-assure {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        24px;

    margin-top:
        2rem;

    padding-top:
        1.4rem;

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

    font-size:
        .88rem;

    color:
        rgba(
            235,
            237,
            228,
            .72
        );
}


.u-shop-assure div {
    display:
        flex;

    align-items:
        center;

    gap:
        .55rem;
}


.u-shop-assure svg {
    width:
        18px;

    height:
        18px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* =========================================================
   SHOP LAYOUT
========================================================= */

.u-shop {
    padding-block:
        clamp(
            44px,
            6vw,
            76px
        )
        clamp(
            70px,
            9vw,
            116px
        );
}


.u-shop-grid {
    display:
        grid;

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

    gap:
        clamp(
            30px,
            4vw,
            58px
        );

    align-items:
        start;
}


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

.u-filters {
    position:
        sticky;

    top:
        calc(
            100px +
            env(
                safe-area-inset-top,
                0px
            )
        );

    display:
        grid;

    gap:
        26px;
}


.u-fgroup {
    padding-bottom:
        22px;

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


.u-fgroup h4 {
    margin:
        0 0 .95rem;

    font-family:
        var(--sans);

    font-size:
        .82rem;

    font-weight:
        700;

    letter-spacing:
        .14em;
}


.u-fopt {
    display:
        flex;

    align-items:
        center;

    gap:
        .7rem;

    padding:
        .34rem 0;

    color:
        var(--ink-60);

    font-size:
        .94rem;

    cursor:
        pointer;

    transition:
        color .3s ease;
}


.u-fopt:hover {
    color:
        var(--ink);
}


.u-fopt input {
    appearance:
        none;

    width:
        19px;

    height:
        19px;

    flex:
        0 0 19px;

    display:
        grid;

    place-items:
        center;

    margin:
        0;

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

    border-radius:
        6px;

    background:
        var(--paper);

    cursor:
        pointer;

    transition:
        background .3s,
        border-color .3s;
}


.u-fopt input:checked {
    background:
        var(--leaf);

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


.u-fopt input:checked::after {
    content:
        "";

    width:
        9px;

    height:
        5px;

    border-left:
        2px solid #fff;

    border-bottom:
        2px solid #fff;

    transform:
        rotate(-45deg)
        translate(
            1px,
            -1px
        );
}


.u-fopt em {
    margin-left:
        auto;

    font-style:
        normal;

    font-size:
        .8rem;

    opacity:
        .55;
}


.u-fcount {
    margin:
        0;

    font-size:
        .88rem;

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


.u-price-row {
    display:
        flex;

    align-items:
        center;

    margin-top:
        .6rem;
}


.u-price-row input {
    width:
        100%;

    accent-color:
        var(--leaf);

    cursor:
        pointer;
}


.u-filter-actions {
    display:
        grid;

    gap:
        12px;
}


.u-clearbtn {
    width:
        fit-content;

    color:
        var(--clay);

    font-size:
        .86rem;

    text-decoration:
        underline;

    text-underline-offset:
        3px;
}


/* =========================================================
   TOOLBAR
========================================================= */

.u-toolbar {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    margin-bottom:
        28px;

    padding-bottom:
        18px;

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


.u-toolbar-left {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        14px;
}


.u-filter-toggle {
    display:
        none;
}


.u-filter-toggle svg {
    width:
        17px;

    height:
        17px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;
}


.u-sortwrap {
    display:
        flex;

    align-items:
        center;

    gap:
        .6rem;

    color:
        var(--ink-60);

    font-size:
        .88rem;
}


.u-sortwrap select {
    appearance:
        none;

    min-width:
        185px;

    padding:
        .58rem 2.4rem
        .58rem .9rem;

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

    border-radius:
        99px;

    background:
        var(--paper)
        url(
            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2316201A' stroke-width='1.6' fill='none'/%3E%3C/svg%3E"
        )
        no-repeat
        right .9rem center;

    color:
        var(--ink);

    font:
        inherit;

    font-size:
        .9rem;

    cursor:
        pointer;
}


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

.u-pgrid {
    display:
        grid;

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

    gap:
        clamp(
            18px,
            2.2vw,
            28px
        );
}


.u-card {
    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    margin:
        0 !important;

    width:
        auto !important;

    background:
        var(--paper);

    border-radius:
        var(--r);

    transition:
        transform .5s
        cubic-bezier(
            .2,
            .8,
            .3,
            1
        ),
        box-shadow .5s;
}


.u-card:hover {
    transform:
        translateY(-8px);

    box-shadow:
        0 24px 44px
        rgba(
            19,
            35,
            26,
            .15
        );
}


.u-card-art {
    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    aspect-ratio:
        1;

    overflow:
        hidden;

    background:
        linear-gradient(
            145deg,
            #20382A,
            #13231A
        );
}


.u-product-image {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    height:
        100%;

    padding:
        clamp(
            18px,
            2vw,
            30px
        );
}


.u-product-image img {
    display:
        block;

    width:
        100% !important;

    height:
        100% !important;

    margin:
        0 !important;

    object-fit:
        contain;

    transition:
        transform .8s
        cubic-bezier(
            .2,
            .8,
            .3,
            1
        );
}


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


.u-flag {
    position:
        absolute;

    z-index:
        4;

    top:
        14px;

    left:
        14px;

    padding:
        .38rem .75rem;

    border-radius:
        99px;

    background:
        var(--clay);

    color:
        #fff;

    font-size:
        .7rem;

    font-weight:
        700;

    letter-spacing:
        .07em;
}


.u-flag-sale {
    background:
        var(--leaf);
}


.u-flag-out {
    background:
        rgba(
            19,
            35,
            26,
            .86
        );
}


.u-quick {
    position:
        absolute;

    z-index:
        4;

    left:
        14px;

    right:
        14px;

    bottom:
        14px;

    display:
        flex;

    opacity:
        0;

    transform:
        translateY(12px);

    transition:
        opacity .4s,
        transform .4s;
}


.u-card:hover
.u-quick,
.u-card:focus-within
.u-quick {
    opacity:
        1;

    transform:
        none;
}


.u-quick .btn {
    width:
        100%;

    color:
        #fff;

    background:
        rgba(
            19,
            35,
            26,
            .72
        );

    backdrop-filter:
        blur(7px);
}


.u-quick .btn:hover {
    background:
        var(--husk);

    color:
        var(--bark);
}


.u-card-body {
    display:
        flex;

    flex:
        1;

    flex-direction:
        column;

    padding:
        21px 22px 24px;
}


.u-card-cat {
    margin:
        0 0 .5rem;

    color:
        var(--leaf);

    font-size:
        .74rem;

    font-weight:
        700;

    letter-spacing:
        .1em;
}


.u-card h3 {
    margin-bottom:
        .45rem;

    font-size:
        1.12rem;
}


.u-card h3 a {
    text-decoration:
        none;
}


.u-card h3 a:hover {
    color:
        var(--clay);
}


.u-rate {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        .45rem;

    margin-bottom:
        .75rem;

    color:
        var(--ink-60);

    font-size:
        .8rem;
}


.u-rate
.star-rating {
    float:
        none;

    margin:
        0;

    color:
        var(--amber);

    font-size:
        .85rem;
}


.u-desc {
    margin:
        0 0 1.1rem;

    color:
        var(--ink-60);

    font-size:
        .9rem;
}


.u-card-foot {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    margin-top:
        auto;
}


.u-price {
    font-family:
        var(--serif);

    font-size:
        1.35rem;

    font-weight:
        600;
}


.u-price
del {
    margin-left:
        .35rem;

    color:
        var(--ink-60);

    font-family:
        var(--sans);

    font-size:
        .8rem;

    font-weight:
        400;
}


.u-price
ins {
    text-decoration:
        none;
}


.u-card-action
.button {
    margin:
        0 !important;

    white-space:
        nowrap;
}


.u-card-action
.added_to_cart {
    display:
        block;

    margin-top:
        6px;

    color:
        var(--leaf);

    font-size:
        .78rem;
}


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

.u-empty {
    padding:
        80px 22px;

    border:
        1.5px dashed
        var(--line);

    border-radius:
        var(--r);

    text-align:
        center;
}


.u-empty h3 {
    margin-bottom:
        .5rem;

    font-size:
        1.5rem;
}


.u-empty p {
    margin-bottom:
        1.2rem;

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


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

.u-pagination {
    margin-top:
        54px;
}


.u-pagination
.woocommerce-pagination {
    margin:
        0;
}


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

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    margin:
        0;

    padding:
        0;

    border:
        0;

    list-style:
        none;
}


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


.u-pagination
.page-numbers
a,
.u-pagination
.page-numbers
span {
    width:
        44px;

    height:
        44px;

    display:
        grid !important;

    place-items:
        center;

    padding:
        0 !important;

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

    border-radius:
        99px;

    background:
        var(--paper);

    color:
        var(--ink);

    text-decoration:
        none;

    font-weight:
        600;

    transition:
        transform .3s,
        background .3s,
        color .3s;
}


.u-pagination
.page-numbers
a:hover {
    transform:
        translateY(-3px);
}


.u-pagination
.page-numbers
.current {
    background:
        var(--bark);

    border-color:
        var(--bark);

    color:
        var(--husk);
}


/* =========================================================
   BULK BAND
========================================================= */

.u-bulk {
    padding-block:
        clamp(
            60px,
            7vw,
            94px
        );

    background:
        var(--bark);

    color:
        var(--husk);
}


.u-bulk-grid {
    display:
        grid;

    grid-template-columns:
        1.15fr
        .85fr;

    gap:
        clamp(
            30px,
            5vw,
            66px
        );

    align-items:
        center;
}


.u-bulk h2 {
    max-width:
        17ch;

    font-weight:
        400;
}


.u-bulk p:not(.kicker) {
    max-width:
        50ch;

    color:
        rgba(
            235,
            237,
            228,
            .78
        );
}


.u-bulk-actions {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        14px;

    margin-top:
        1.4rem;
}


.u-bulk-list {
    display:
        grid;

    gap:
        2px;

    overflow:
        hidden;

    border-radius:
        var(--r);

    background:
        var(--line-dark);
}


.u-bulk-row {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    padding:
        18px 22px;

    background:
        var(--bark);

    font-size:
        .94rem;

    transition:
        background .35s;
}


.u-bulk-row:hover {
    background:
        var(--bark-2);
}


.u-bulk-row b {
    color:
        var(--amber);

    font-family:
        var(--serif);

    white-space:
        nowrap;
}


/* =========================================================
   FILTER SCRIM
========================================================= */

.u-filter-scrim {
    position:
        fixed;

    z-index:
        65;

    inset:
        0;

    visibility:
        hidden;

    opacity:
        0;

    background:
        rgba(
            19,
            35,
            26,
            .52
        );

    transition:
        opacity .4s;
}


.u-filter-scrim.show {
    visibility:
        visible;

    opacity:
        1;
}


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

@media (max-width: 1120px) {

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

}


@media (max-width: 980px) {

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


    .u-filters {
        position:
            fixed;

        z-index:
            70;

        inset:
            0 auto
            0 0;

        width:
            min(
                86vw,
                340px
            );

        padding:
            calc(
                env(
                    safe-area-inset-top,
                    0px
                ) +
                74px
            )
            26px
            40px;

        overflow-y:
            auto;

        align-content:
            start;

        background:
            var(--paper);

        transform:
            translateX(-103%);

        transition:
            transform .5s
            cubic-bezier(
                .2,
                .8,
                .3,
                1
            );

        box-shadow:
            0 0 60px
            rgba(
                0,
                0,
                0,
                .2
            );
    }


    .u-filters.open {
        transform:
            none;
    }


    .u-filter-toggle {
        display:
            inline-flex;
    }


    .u-bulk-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 680px) {

    .u-shop-head {
        padding-bottom:
            58px;
    }


    .u-shop-assure {
        display:
            grid;

        gap:
            12px;
    }


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

        flex-direction:
            column;
    }


    .u-sortwrap {
        width:
            100%;

        justify-content:
            space-between;
    }


    .u-sortwrap select {
        flex:
            1;

        min-width:
            0;
    }


    .u-pgrid {
        grid-template-columns:
            1fr;
    }


    .u-card-foot {
        align-items:
            flex-end;
    }

}





/* =========================================================
   PRODUCT IMAGES — NATURAL PROPORTIONS
   No forced square size, no cropping
========================================================= */

.u-card-art {
    aspect-ratio: auto !important;

    height: auto !important;
    min-height: 0 !important;

    display: block !important;

    overflow: hidden;
}


.u-product-image {
    display: block !important;

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

    padding: 0 !important;
}


.u-product-image img {
    display: block !important;

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

    max-width: 100% !important;
    max-height: none !important;

    object-fit: initial !important;
    object-position: initial !important;

    aspect-ratio: auto !important;

    margin: 0 !important;
}


/* Keep hover subtle without cropping */

.u-card:hover .u-product-image img {
    transform: scale(1.015);
}




/* =========================================================
   FINAL SHOP PRODUCT IMAGE + TWO COLUMN FIX
========================================================= */


/* =========================================================
   TWO PRODUCTS PER ROW
========================================================= */

.ubuntu-shop-page .u-pgrid {
    display: grid !important;

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

    gap:
        clamp(
            20px,
            2.5vw,
            32px
        ) !important;
}


/* =========================================================
   PRODUCT IMAGE CONTAINER
   Absolutely no fixed aspect ratio.
========================================================= */

.ubuntu-shop-page .u-card-art {
    position: relative !important;

    display: block !important;

    width: 100% !important;

    height: auto !important;

    min-height: 0 !important;

    max-height: none !important;

    aspect-ratio: auto !important;

    padding: 0 !important;

    margin: 0 !important;

    overflow: visible !important;

    background: #ffffff !important;
}


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

.ubuntu-shop-page .u-product-image {
    position: relative !important;

    display: block !important;

    width: 100% !important;

    height: auto !important;

    min-height: 0 !important;

    max-height: none !important;

    aspect-ratio: auto !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: visible !important;

    background: #ffffff !important;
}


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

.ubuntu-shop-page
.ubuntu-original-product-image {

    position: static !important;

    display: block !important;

    width: 100% !important;

    height: auto !important;

    min-width: 0 !important;

    min-height: 0 !important;

    max-width: 100% !important;

    max-height: none !important;

    margin: 0 !important;

    padding: 0 !important;

    aspect-ratio: auto !important;

    object-fit: contain !important;

    object-position: center !important;

    transform: none !important;

    clip: auto !important;

    clip-path: none !important;
}


/* =========================================================
   OVERRIDE ANY WOOCOMMERCE IMAGE RULES
========================================================= */

.woocommerce
.ubuntu-shop-page
.u-card
img,

.woocommerce-page
.ubuntu-shop-page
.u-card
img,

.ubuntu-shop-page
.u-card-art
img,

.ubuntu-shop-page
.u-product-image
img {

    position: static !important;

    display: block !important;

    width: 100% !important;

    height: auto !important;

    min-width: 0 !important;

    min-height: 0 !important;

    max-width: 100% !important;

    max-height: none !important;

    margin: 0 !important;

    padding: 0 !important;

    aspect-ratio: auto !important;

    object-fit: contain !important;

    object-position: center !important;

    transform: none !important;
}


/* =========================================================
   NO PRODUCT IMAGE ZOOM
========================================================= */

.ubuntu-shop-page
.u-card:hover
.u-product-image
img,

.ubuntu-shop-page
.u-card:hover
.u-card-art
img {

    transform: none !important;
}


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

.ubuntu-shop-page .u-card {
    height: auto !important;

    align-self: start !important;
}


/* =========================================================
   OVERLAY ELEMENTS
========================================================= */

.ubuntu-shop-page .u-flag {
    position: absolute !important;

    z-index: 5 !important;
}


.ubuntu-shop-page .u-quick {
    position: absolute !important;

    z-index: 5 !important;
}


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

@media (max-width: 800px) {

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

}


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

@media (max-width: 580px) {

    .ubuntu-shop-page .u-pgrid {
        grid-template-columns:
            1fr !important;
    }

}



/* =========================================================
   SHOP PRODUCT GRID — 3 COLUMNS
========================================================= */

.ubuntu-shop-page .u-pgrid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(18px, 2.2vw, 28px) !important;
}


/* Tablet */

@media (max-width: 980px) {

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

}


/* Mobile */

@media (max-width: 580px) {

    .ubuntu-shop-page .u-pgrid {
        grid-template-columns: 1fr !important;
    }

}




/* =========================================================
   FINAL PRODUCT CARD DESIGN
   Equal card heights
   Full image visible
   Image + name + description only
========================================================= */


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

.ubuntu-shop-page .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;
}


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

.ubuntu-shop-page .u-card {
    display: flex !important;

    flex-direction: column !important;

    width: 100% !important;

    height: 100% !important;

    min-height: 0 !important;

    margin: 0 !important;

    overflow: hidden !important;

    background:
        var(--paper) !important;

    border-radius:
        var(--r) !important;

    transition:
        transform .45s
        cubic-bezier(.2,.8,.3,1),
        box-shadow .45s ease !important;
}


.ubuntu-shop-page .u-card:hover {
    transform:
        translateY(-6px) !important;

    box-shadow:
        0 20px 40px
        rgba(19,35,26,.12) !important;
}


/* =========================================================
   CONSISTENT IMAGE CANVAS
========================================================= */

.ubuntu-shop-page .u-card-art {
    position: relative !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 100% !important;

    height: 310px !important;

    min-height: 310px !important;

    max-height: 310px !important;

    aspect-ratio: auto !important;

    padding: 22px !important;

    margin: 0 !important;

    overflow: hidden !important;

    background:
        #ffffff !important;
}


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

.ubuntu-shop-page .u-product-image {
    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 100% !important;

    height: 100% !important;

    padding: 0 !important;

    margin: 0 !important;

    overflow: visible !important;
}


/* =========================================================
   PRODUCT IMAGE
   COMPLETE IMAGE ALWAYS VISIBLE
========================================================= */

.ubuntu-shop-page .ubuntu-original-product-image,

.woocommerce
.ubuntu-shop-page
.u-card
.ubuntu-original-product-image,

.woocommerce-page
.ubuntu-shop-page
.u-card
.ubuntu-original-product-image {

    position: static !important;

    display: block !important;

    width: auto !important;

    height: auto !important;

    max-width: 100% !important;

    max-height: 100% !important;

    min-width: 0 !important;

    min-height: 0 !important;

    aspect-ratio: auto !important;

    object-fit: contain !important;

    object-position: center !important;

    margin: auto !important;

    padding: 0 !important;

    transform: none !important;

    clip: auto !important;

    clip-path: none !important;
}


/* Never zoom or crop images */

.ubuntu-shop-page
.u-card:hover
.ubuntu-original-product-image {

    transform:
        none !important;
}


/* =========================================================
   CARD TEXT
========================================================= */

.ubuntu-shop-page .u-card-body {
    display: flex !important;

    flex: 1 1 auto !important;

    flex-direction: column !important;

    padding:
        22px 22px 26px !important;
}


/* Product name */

.ubuntu-shop-page .u-card h3 {
    margin:
        0 0 .75rem !important;

    font-size:
        1.2rem !important;

    line-height:
        1.2 !important;
}


.ubuntu-shop-page .u-card h3 a {
    color:
        var(--ink) !important;

    text-decoration:
        none !important;

    transition:
        color .3s ease !important;
}


.ubuntu-shop-page .u-card h3 a:hover {
    color:
        var(--clay) !important;
}


/* Description */

.ubuntu-shop-page .u-desc {
    margin:
        0 !important;

    color:
        var(--ink-60) !important;

    font-size:
        .91rem !important;

    line-height:
        1.65 !important;
}


/* =========================================================
   REMOVE OLD CARD ELEMENTS
========================================================= */

.ubuntu-shop-page .u-card-cat,
.ubuntu-shop-page .u-rate,
.ubuntu-shop-page .u-price,
.ubuntu-shop-page .u-card-foot,
.ubuntu-shop-page .u-card-action,
.ubuntu-shop-page .u-quick,
.ubuntu-shop-page .u-flag {

    display:
        none !important;
}


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

@media (max-width: 980px) {

    .ubuntu-shop-page .u-pgrid {

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


    .ubuntu-shop-page .u-card-art {

        height:
            300px !important;

        min-height:
            300px !important;

        max-height:
            300px !important;
    }

}


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

@media (max-width: 580px) {

    .ubuntu-shop-page .u-pgrid {

        grid-template-columns:
            1fr !important;
    }


    .ubuntu-shop-page .u-card-art {

        height:
            320px !important;

        min-height:
            320px !important;

        max-height:
            320px !important;
    }

}




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

.u-shop-hero {
    position: relative;

    min-height: 520px;

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    background-image:
        url("../img/shop-hero.jpeg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
}


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

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(19,35,26,.10) 0%,
            rgba(19,35,26,.28) 45%,
            rgba(19,35,26,.82) 100%
        );
}


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

    z-index: 2;

    width: 100%;

    padding-top: 180px;

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


.u-shop-hero h1 {
    max-width: 900px;

    margin: 0;

    color: #ffffff;

    font-family: var(--serif);

    font-size:
        clamp(
            2.7rem,
            6vw,
            5.8rem
        );

    font-weight: 500;

    line-height: .98;

    letter-spacing: -.035em;

    text-shadow:
        0 3px 24px
        rgba(0,0,0,.2);
}


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

@media (max-width: 768px) {

    .u-shop-hero {
        min-height: 440px;

        background-position: center;
    }


    .u-shop-hero-inner {
        padding-top: 150px;

        padding-bottom: 48px;
    }


    .u-shop-hero h1 {
        max-width: 12ch;

        font-size:
            clamp(
                2.4rem,
                11vw,
                4rem
            );
    }

}




/* =========================================================
   PRODUCT CARD CART BUTTON
========================================================= */

.u-card-body {
    display: flex;
    flex-direction: column;

    flex: 1 1 auto;
}


.u-card-body .u-desc {
    flex: 0 0 auto;
}


.u-card-cart-wrap {
    margin-top: auto;

    padding-top: 24px;
}


.u-card-cart {
    width: 100%;

    min-height: 50px;

    display: flex !important;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding:
        .8rem
        1.05rem;

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

    border-radius: 0;

    background:
        var(--bark);

    color:
        var(--husk) !important;

    font-family:
        var(--sans);

    font-size:
        .79rem;

    font-weight:
        700;

    letter-spacing:
        .035em;

    text-decoration:
        none !important;

    cursor:
        pointer;

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


.u-card-cart svg {
    width: 18px;
    height: 18px;

    flex:
        0 0 18px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.u-card-cart:hover {
    border-color:
        var(--amber);

    background:
        var(--amber);

    color:
        var(--bark) !important;

    transform:
        translateY(-2px);
}


/* WooCommerce AJAX loading */

.u-card-cart.loading {
    position:
        relative;

    opacity:
        .62;

    pointer-events:
        none;
}


.u-card-cart.loading::after {
    content:
        "";

    width:
        13px;

    height:
        13px;

    border:
        2px solid
        currentColor;

    border-right-color:
        transparent;

    border-radius:
        50%;

    animation:
        ubuntu-cart-spin
        .65s
        linear
        infinite;
}


@keyframes ubuntu-cart-spin {

    to {
        transform:
            rotate(360deg);
    }

}


/* WooCommerce adds this class after successful AJAX add */

.u-card-cart.added {
    border-color:
        var(--leaf);

    background:
        var(--leaf);

    color:
        #fff !important;
}


/*
 * WooCommerce may inject a separate "View cart" link
 * immediately after the button.
 */

.u-card-cart-wrap
.added_to_cart {
    display:
        inline-block;

    margin-top:
        10px;

    color:
        var(--clay);

    font-size:
        .77rem;

    font-weight:
        700;

    text-decoration:
        none;
}


.u-card-cart-disabled {
    opacity:
        .48;
}


/* Keep all cards matching in height */

.u-pgrid .u-card {
    height:
        100%;
}


.u-pgrid .u-card-body {
    height:
        100%;
}


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

@media (max-width: 580px) {

    .u-card-cart {
        min-height:
            48px;
    }

}




/* =========================================================
   ADD TO CART BUTTON - BORDER RADIUS
========================================================= */

.u-card-cart,
.woocommerce .u-card-cart,
.woocommerce .u-card-cart.button {
    border-radius: 10px !important;
}


.u-card-cart-wrap .added_to_cart {
    border-radius: 10px;
}



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

.u-card-price {
    display: flex;

    align-items: baseline;

    flex-wrap: wrap;

    gap: 8px;

    margin:
        14px 0 18px;

    color:
        var(--bark);

    font-family:
        var(--serif);

    font-size:
        1.25rem;

    font-weight:
        700;

    line-height:
        1.2;
}


.u-card-price .amount {
    color:
        var(--bark);

    font: inherit;
}


.u-card-price del {
    color:
        var(--ink-60);

    font-family:
        var(--sans);

    font-size:
        .86rem;

    font-weight:
        500;

    opacity:
        .65;
}


.u-card-price ins {
    color:
        var(--clay);

    text-decoration:
        none;
}


/* Variable products can output a price range */

.u-card-price .woocommerce-Price-amount {
    white-space:
        nowrap;
}


@media (max-width: 640px) {

    .u-card-price {
        margin:
            12px 0 16px;

        font-size:
            1.15rem;
    }

}