/* =========================================================
   UBUNTU LTD
   WOOCOMMERCE CART PAGE
========================================================= */


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

.u-cart-page {
    min-height: 70vh;

    background:
        var(--husk);

    color:
        var(--ink);
}


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

.u-cart-hero {
    padding:
        calc(
            130px +
            env(
                safe-area-inset-top,
                0px
            )
        )
        0
        58px;

    background:
        var(--bark);

    color:
        var(--husk);
}


.u-cart-hero-inner {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        40px;
}


.u-cart-hero .kicker {
    color:
        var(--amber-soft);
}


.u-cart-hero h1 {
    max-width:
        700px;

    margin-bottom:
        14px;

    font-size:
        clamp(
            2.5rem,
            6vw,
            4.6rem
        );

    font-weight:
        400;
}


.u-cart-hero p:not(.kicker) {
    max-width:
        540px;

    margin:
        0;

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


.u-cart-hero-count {
    flex:
        0 0 auto;

    min-width:
        112px;

    padding:
        17px 22px;

    border:
        1px solid
        rgba(
            235,
            237,
            228,
            .18
        );

    text-align:
        center;
}


.u-cart-hero-count strong {
    display:
        block;

    color:
        var(--amber);

    font-family:
        var(--serif);

    font-size:
        2rem;

    font-weight:
        500;

    line-height:
        1;
}


.u-cart-hero-count span {
    display:
        block;

    margin-top:
        6px;

    font-size:
        .75rem;

    font-weight:
        600;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;
}


/* =========================================================
   MAIN AREA
========================================================= */

.u-cart-main {
    padding:
        clamp(
            46px,
            7vw,
            90px
        )
        0
        clamp(
            70px,
            9vw,
            120px
        );
}


.u-cart-layout {
    display:
        grid;

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

    gap:
        clamp(
            32px,
            5vw,
            72px
        );

    align-items:
        start;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.u-cart-section-heading {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        24px;

    margin-bottom:
        26px;
}


.u-cart-section-heading h2,
.u-cart-summary h2 {
    font-size:
        clamp(
            1.7rem,
            3vw,
            2.25rem
        );

    font-weight:
        500;
}


.u-cart-eyebrow {
    margin:
        0 0 5px;

    color:
        var(--clay);

    font-size:
        .74rem;

    font-weight:
        700;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;
}


.u-cart-continue {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--bark);

    font-size:
        .86rem;

    font-weight:
        700;

    text-decoration:
        none;
}


.u-cart-continue span {
    transition:
        transform .25s ease;
}


.u-cart-continue:hover span {
    transform:
        translateX(4px);
}


/* =========================================================
   CART LIST
========================================================= */

.u-cart-list {
    border-top:
        1px solid
        var(--line);
}


.u-cart-columns {
    display:
        grid;

    grid-template-columns:
        minmax(
            250px,
            1fr
        )
        110px
        140px
        120px
        38px;

    gap:
        18px;

    padding:
        14px 0;

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

    color:
        var(--ink-60);

    font-size:
        .72rem;

    font-weight:
        700;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;
}


.u-cart-item {
    display:
        grid;

    grid-template-columns:
        minmax(
            250px,
            1fr
        )
        110px
        140px
        120px
        38px;

    gap:
        18px;

    align-items:
        center;

    padding:
        24px 0;

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


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

.u-cart-product {
    display:
        grid;

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

    gap:
        18px;

    align-items:
        center;
}


.u-cart-image {
    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        108px;

    aspect-ratio:
        1;

    padding:
        8px;

    overflow:
        hidden;

    background:
        var(--paper);

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

    text-decoration:
        none;
}


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

    width:
        100%;

    height:
        100%;

    object-fit:
        contain !important;

    object-position:
        center !important;
}


.u-cart-product-copy {
    min-width:
        0;
}


.u-cart-product-copy h3 {
    margin:
        0 0 7px;

    font-size:
        1.08rem;

    line-height:
        1.25;
}


.u-cart-product-copy h3 a {
    color:
        var(--ink);

    text-decoration:
        none;
}


.u-cart-product-copy h3 a:hover {
    color:
        var(--clay);
}


/* =========================================================
   ITEM META / VARIATIONS
========================================================= */

.u-cart-meta {
    color:
        var(--ink-60);

    font-size:
        .8rem;

    line-height:
        1.5;
}


.u-cart-meta dl {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        3px 7px;

    margin:
        0;
}


.u-cart-meta dt,
.u-cart-meta dd {
    margin:
        0;
}


.u-cart-meta dt {
    font-weight:
        700;
}


.u-cart-backorder {
    margin:
        6px 0 0;

    color:
        var(--clay);

    font-size:
        .78rem;

    font-weight:
        600;
}


/* =========================================================
   PRICES
========================================================= */

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

    font-size:
        1rem;

    font-weight:
        600;
}


.u-cart-subtotal {
    color:
        var(--bark);

    font-size:
        1.08rem;
}


.u-cart-price del,
.u-cart-subtotal del {
    color:
        var(--ink-60);

    font-size:
        .82rem;
}


.u-cart-price ins,
.u-cart-subtotal ins {
    color:
        var(--clay);

    text-decoration:
        none;
}


/* =========================================================
   QUANTITY
========================================================= */

.u-cart-qty {
    display:
        inline-grid;

    grid-template-columns:
        36px
        48px
        36px;

    align-items:
        stretch;

    min-height:
        40px;

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

    background:
        var(--paper);
}


.u-cart-qty-btn {
    display:
        grid;

    place-items:
        center;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        var(--ink);

    font-size:
        1.1rem;

    cursor:
        pointer;

    transition:
        background-color .2s ease,
        color .2s ease;
}


.u-cart-qty-btn:hover {
    background:
        var(--bark);

    color:
        var(--husk);
}


.u-cart-qty .quantity {
    display:
        flex;

    align-items:
        stretch;
}


.u-cart-qty input.qty {
    width:
        48px !important;

    min-width:
        48px;

    height:
        100%;

    padding:
        0 !important;

    border:
        0 !important;

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

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

    border-radius:
        0 !important;

    outline:
        0;

    background:
        transparent !important;

    color:
        var(--ink);

    font:
        inherit;

    font-size:
        .9rem;

    font-weight:
        700;

    text-align:
        center;

    appearance:
        textfield;

    -moz-appearance:
        textfield;
}


.u-cart-qty input.qty::-webkit-inner-spin-button,
.u-cart-qty input.qty::-webkit-outer-spin-button {
    margin:
        0;

    -webkit-appearance:
        none;
}


.u-cart-single-qty {
    font-weight:
        700;
}


/* =========================================================
   REMOVE
========================================================= */

.u-cart-remove {
    display:
        flex;

    justify-content:
        flex-end;
}


.u-cart-remove a {
    display:
        grid;

    place-items:
        center;

    width:
        36px;

    height:
        36px;

    border:
        1px solid
        transparent;

    color:
        var(--ink-60);

    text-decoration:
        none;

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


.u-cart-remove a:hover {
    border-color:
        var(--clay);

    background:
        rgba(
            169,
            65,
            42,
            .07
        );

    color:
        var(--clay);
}


.u-cart-remove svg {
    width:
        19px;

    height:
        19px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.6;
}


/* =========================================================
   MOBILE-ONLY ELEMENTS
========================================================= */

.u-cart-mobile-price,
.u-cart-mobile-remove,
.u-cart-mobile-label {
    display:
        none;
}


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

.u-cart-actions {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    margin-top:
        24px;
}


.u-cart-coupon {
    display:
        flex;

    min-width:
        min(
            100%,
            350px
        );

    border-bottom:
        1.5px solid
        var(--bark);
}


.u-cart-coupon input {
    flex:
        1;

    min-width:
        0;

    padding:
        11px 4px;

    border:
        0 !important;

    outline:
        0;

    background:
        transparent;

    color:
        var(--ink);

    font:
        inherit;

    font-size:
        .88rem;
}


.u-cart-coupon-button {
    padding:
        10px 5px
        10px 16px;

    border:
        0;

    background:
        transparent;

    color:
        var(--bark);

    font-size:
        .78rem;

    font-weight:
        800;

    letter-spacing:
        .06em;

    text-transform:
        uppercase;

    cursor:
        pointer;
}


.u-cart-update {
    padding:
        11px 20px;

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

    border-radius:
        999px;

    background:
        transparent;

    color:
        var(--bark);

    font:
        inherit;

    font-size:
        .83rem;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        background-color .2s ease,
        color .2s ease,
        opacity .2s ease;
}


.u-cart-update:hover:not(:disabled) {
    background:
        var(--bark);

    color:
        var(--husk);
}


.u-cart-update:disabled {
    opacity:
        .4;

    cursor:
        not-allowed;
}


/* =========================================================
   ORDER SUMMARY
========================================================= */

.u-cart-summary {
    position:
        sticky;

    top:
        120px;
}


.u-cart-summary-card {
    padding:
        clamp(
            25px,
            3vw,
            34px
        );

    background:
        var(--paper);

    border-top:
        4px solid
        var(--amber);
}


.u-cart-summary h2 {
    margin-bottom:
        25px;
}


/* =========================================================
   DEFAULT WOOCOMMERCE TOTALS
========================================================= */

.u-cart-totals .cart_totals {
    float:
        none !important;

    width:
        100% !important;
}


.u-cart-totals .cart_totals h2 {
    display:
        none;
}


.u-cart-totals table {
    width:
        100%;

    margin:
        0;

    border-collapse:
        collapse;
}


.u-cart-totals th,
.u-cart-totals td {
    padding:
        14px 0;

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

    vertical-align:
        top;
}


.u-cart-totals th {
    width:
        42%;

    color:
        var(--ink-60);

    font-size:
        .8rem;

    font-weight:
        600;

    text-align:
        left;
}


.u-cart-totals td {
    color:
        var(--ink);

    font-size:
        .9rem;

    font-weight:
        600;

    text-align:
        right;
}


.u-cart-totals .order-total th,
.u-cart-totals .order-total td {
    padding-top:
        20px;

    color:
        var(--bark);

    font-family:
        var(--serif);

    font-size:
        1.25rem;

    font-weight:
        700;
}


.u-cart-totals .order-total strong {
    font-weight:
        inherit;
}


/* =========================================================
   SHIPPING
========================================================= */

.u-cart-totals ul#shipping_method {
    margin:
        0;

    padding:
        0;

    list-style:
        none;
}


.u-cart-totals ul#shipping_method li {
    margin:
        0 0 7px;
}


.u-cart-totals ul#shipping_method label {
    font-weight:
        500;
}


.u-cart-totals .woocommerce-shipping-destination {
    margin:
        8px 0;

    color:
        var(--ink-60);

    font-size:
        .78rem;
}


.u-cart-totals .shipping-calculator-button {
    color:
        var(--clay);

    font-size:
        .8rem;

    font-weight:
        700;

    text-decoration:
        none;
}


/* =========================================================
   CHECKOUT BUTTON
========================================================= */

.u-cart-totals .wc-proceed-to-checkout {
    padding:
        0;

    margin-top:
        24px;
}


.u-cart-totals .checkout-button,
.u-cart-totals .checkout-button.button,
.u-cart-totals .checkout-button.button.alt {
    display:
        flex !important;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    min-height:
        54px;

    margin:
        0 !important;

    padding:
        14px 20px !important;

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

    border-radius:
        10px !important;

    background:
        var(--amber) !important;

    color:
        var(--bark) !important;

    font-family:
        var(--sans);

    font-size:
        .92rem;

    font-weight:
        800;

    line-height:
        1.2;

    text-align:
        center;

    text-decoration:
        none;

    box-shadow:
        none !important;

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


.u-cart-totals .checkout-button:hover {
    border-color:
        var(--amber-soft) !important;

    background:
        var(--amber-soft) !important;

    color:
        var(--bark) !important;

    transform:
        translateY(-2px);
}


/* =========================================================
   SECURITY
========================================================= */

.u-cart-security {
    display:
        grid;

    grid-template-columns:
        32px
        1fr;

    gap:
        12px;

    align-items:
        center;

    margin-top:
        21px;

    padding-top:
        20px;

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


.u-cart-security svg {
    width:
        27px;

    height:
        27px;

    fill:
        none;

    stroke:
        var(--leaf);

    stroke-width:
        1.5;
}


.u-cart-security strong {
    display:
        block;

    font-size:
        .8rem;
}


.u-cart-security span {
    display:
        block;

    margin-top:
        2px;

    color:
        var(--ink-60);

    font-size:
        .72rem;
}


/* =========================================================
   WOOCOMMERCE MESSAGES
========================================================= */

.u-cart-page .woocommerce-message,
.u-cart-page .woocommerce-info,
.u-cart-page .woocommerce-error {
    margin:
        0 0 24px !important;

    padding:
        16px 18px !important;

    border:
        0 !important;

    border-left:
        4px solid
        var(--amber) !important;

    border-radius:
        0 !important;

    background:
        var(--paper) !important;

    color:
        var(--ink) !important;

    list-style:
        none;
}


.u-cart-page .woocommerce-error {
    border-left-color:
        var(--clay) !important;
}


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

.u-empty-cart {
    max-width:
        620px;

    margin:
        0 auto;

    padding:
        clamp(
            50px,
            9vw,
            100px
        )
        0;

    text-align:
        center;
}


.u-empty-cart-icon {
    display:
        grid;

    place-items:
        center;

    width:
        90px;

    height:
        90px;

    margin:
        0 auto
        25px;

    background:
        var(--paper);

    color:
        var(--bark);
}


.u-empty-cart-icon svg {
    width:
        42px;

    height:
        42px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.5;
}


.u-empty-cart h2 {
    margin-bottom:
        12px;

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


.u-empty-cart > p:not(.kicker) {
    max-width:
        430px;

    margin:
        0 auto
        25px;

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


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

@media (max-width: 1050px) {

    .u-cart-layout {
        grid-template-columns:
            minmax(
                0,
                1fr
            )
            320px;

        gap:
            32px;
    }


    .u-cart-columns,
    .u-cart-item {
        grid-template-columns:
            minmax(
                210px,
                1fr
            )
            90px
            125px
            105px
            32px;

        gap:
            12px;
    }


    .u-cart-product {
        grid-template-columns:
            86px
            minmax(
                0,
                1fr
            );

        gap:
            13px;
    }


    .u-cart-image {
        width:
            86px;
    }

}


@media (max-width: 860px) {

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


    .u-cart-summary {
        position:
            relative;

        top:
            auto;
    }


    .u-cart-columns {
        display:
            none;
    }


    .u-cart-item {
        display:
            grid;

        grid-template-columns:
            1fr 1fr;

        gap:
            18px;

        padding:
            22px 0;
    }


    .u-cart-product {
        grid-column:
            1 / -1;
    }


    .u-cart-price {
        display:
            none;
    }


    .u-cart-mobile-price {
        display:
            block;

        margin-top:
            7px;

        color:
            var(--clay);

        font-family:
            var(--serif);

        font-size:
            1rem;

        font-weight:
            700;
    }


    .u-cart-mobile-label {
        display:
            block;

        margin-bottom:
            6px;

        color:
            var(--ink-60);

        font-family:
            var(--sans);

        font-size:
            .68rem;

        font-weight:
            700;

        letter-spacing:
            .08em;

        text-transform:
            uppercase;
    }


    .u-cart-subtotal {
        text-align:
            right;
    }


    .u-cart-remove {
        display:
            none;
    }


    .u-cart-mobile-remove {
        display:
            inline-block;

        margin-top:
            8px;

        color:
            var(--clay);

        font-size:
            .74rem;

        font-weight:
            700;

        text-decoration:
            underline;

        text-underline-offset:
            3px;
    }

}


@media (max-width: 640px) {

    .u-cart-hero {
        padding-top:
            calc(
                110px +
                env(
                    safe-area-inset-top,
                    0px
                )
            );

        padding-bottom:
            40px;
    }


    .u-cart-hero-inner {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .u-cart-hero-count {
        min-width:
            90px;
    }


    .u-cart-section-heading {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            12px;
    }


    .u-cart-product {
        grid-template-columns:
            92px
            minmax(
                0,
                1fr
            );
    }


    .u-cart-image {
        width:
            92px;
    }


    .u-cart-actions {
        align-items:
            stretch;

        flex-direction:
            column;
    }


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

        min-width:
            0;
    }


    .u-cart-update {
        width:
            100%;
    }


    .u-cart-summary-card {
        padding:
            24px 20px;
    }

}