/**
 * ALIBARBAR Commerce V4.1
 * Final refinement layer over existing Commerce V4.
 */

body.woocommerce-cart,
body.woocommerce-checkout{
    --abc41-ivory:#FAF8F2;
    --abc41-cream:#FFFDF8;
    --abc41-sand:#F3EBDD;
    --abc41-white:#FFFFFF;

    --abc41-dark:#211D17;
    --abc41-heading:#2A241A;
    --abc41-text:#4F4941;
    --abc41-muted:#71695F;

    --abc41-gold:#D4AF37;
    --abc41-gold-dark:#B88A20;

    --abc41-line:#E6DDD0;

    background:var(--abc41-ivory)!important;
}


/* =========================================================
   LIGHT COMMERCE CANVAS
   ========================================================= */

body.woocommerce-cart #content,
body.woocommerce-checkout #content,
body.woocommerce-cart .site-content,
body.woocommerce-checkout .site-content,
body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main,
body.woocommerce-cart #primary,
body.woocommerce-checkout #primary,
body.woocommerce-cart article,
body.woocommerce-checkout article,
body.woocommerce-cart .entry-content,
body.woocommerce-checkout .entry-content{
    background:var(--abc41-ivory)!important;
}


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

body.woocommerce-cart .ast-single-entry-banner,
body.woocommerce-checkout .ast-single-entry-banner{
    background:var(--abc41-ivory)!important;

    padding:
        30px
        0
        12px!important;
}

body.woocommerce-cart .ast-single-entry-banner .entry-title,
body.woocommerce-checkout .ast-single-entry-banner .entry-title,
body.woocommerce-cart h1.entry-title,
body.woocommerce-checkout h1.entry-title{
    color:var(--abc41-heading)!important;

    opacity:1!important;

    font-size:
        clamp(
            34px,
            4vw,
            50px
        )!important;

    line-height:1!important;
    letter-spacing:-.04em!important;

    text-transform:none!important;
}


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

body.woocommerce-cart .site-content > .ast-container{
    padding-top:18px!important;
}


/* selected flavours must never become dark */

body.woocommerce-cart
.woocommerce-cart-form
td.product-name
dl.variation,

body.woocommerce-cart
.woocommerce-cart-form
td.product-name
dl.variation dt,

body.woocommerce-cart
.woocommerce-cart-form
td.product-name
dl.variation dd,

body.woocommerce-cart
.woocommerce-cart-form
td.product-name
dl.variation p{
    position:static!important;

    width:auto!important;
    max-width:100%!important;

    margin:0!important;
    padding:0!important;

    background:transparent!important;

    border:0!important;
    border-radius:0!important;

    box-shadow:none!important;

    color:var(--abc41-muted)!important;

    transform:none!important;
}

body.woocommerce-cart
.woocommerce-cart-form
td.product-name
dl.variation{
    display:block!important;

    margin-top:7px!important;

    font-size:11px!important;
    line-height:1.55!important;
}

body.woocommerce-cart
.woocommerce-cart-form
td.product-name
dl.variation dt{
    display:inline!important;

    float:none!important;

    color:var(--abc41-heading)!important;

    font-weight:800!important;
}

body.woocommerce-cart
.woocommerce-cart-form
td.product-name
dl.variation dd{
    display:inline!important;

    float:none!important;

    margin-left:4px!important;
}

body.woocommerce-cart
.woocommerce-cart-form
td.product-name
dl.variation dd p{
    display:inline!important;
}


/* totals header */

body.woocommerce-cart .cart_totals h2{
    background:var(--abc41-sand)!important;

    color:var(--abc41-heading)!important;

    border-radius:9px!important;
}


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

body.woocommerce-checkout .site-content > .ast-container{
    padding-top:18px!important;
}

body.woocommerce-checkout #customer_details,
body.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout #order_review{
    background:#FFF!important;
}


/* payment outer shell only */

body.woocommerce-checkout #payment{
    background:var(--abc41-cream)!important;
}

body.woocommerce-checkout #payment iframe{
    max-width:100%!important;
}


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

@media(max-width:600px){

    body.woocommerce-cart .ast-single-entry-banner,
    body.woocommerce-checkout .ast-single-entry-banner{
        padding:
            18px
            0
            8px!important;
    }

    body.woocommerce-cart .ast-single-entry-banner .entry-title,
    body.woocommerce-checkout .ast-single-entry-banner .entry-title,
    body.woocommerce-cart h1.entry-title,
    body.woocommerce-checkout h1.entry-title{
        color:var(--abc41-heading)!important;

        font-size:30px!important;
    }


    /* ---------------------------------------------
       CART PRODUCT CARD
       --------------------------------------------- */

    body.woocommerce-cart
    .woocommerce-cart-form
    table.shop_table
    tr.cart_item{
        display:grid!important;

        grid-template-columns:
            88px
            minmax(0,1fr)!important;

        grid-template-areas:
            "image name"
            "image price"
            "image qty"
            "image subtotal"!important;

        column-gap:14px!important;
        row-gap:9px!important;

        padding:16px!important;

        background:#FFF!important;

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

        border-radius:14px!important;
    }


    body.woocommerce-cart
    .woocommerce-cart-form
    td.product-thumbnail{
        grid-area:image!important;
        align-self:start!important;
    }


    body.woocommerce-cart
    .woocommerce-cart-form
    td.product-name{
        grid-area:name!important;

        min-width:0!important;

        padding:
            0
            32px
            0
            0!important;
    }


    body.woocommerce-cart
    .woocommerce-cart-form
    td.product-price{
        grid-area:price!important;
    }


    body.woocommerce-cart
    .woocommerce-cart-form
    td.product-quantity{
        grid-area:qty!important;
    }


    body.woocommerce-cart
    .woocommerce-cart-form
    td.product-subtotal{
        grid-area:subtotal!important;
    }


    body.woocommerce-cart
    .woocommerce-cart-form
    td.product-name > a{
        display:block!important;

        color:var(--abc41-heading)!important;

        font-size:14px!important;
        line-height:1.35!important;
        font-weight:700!important;
    }


    /* variation block */

    body.woocommerce-cart
    .woocommerce-cart-form
    td.product-name
    dl.variation{
        display:block!important;

        margin-top:7px!important;

        background:transparent!important;

        color:var(--abc41-muted)!important;

        font-size:11px!important;
        line-height:1.5!important;
    }


    body.woocommerce-cart
    .woocommerce-cart-form
    td.product-name
    dl.variation dt{
        display:inline!important;

        color:var(--abc41-heading)!important;
    }


    body.woocommerce-cart
    .woocommerce-cart-form
    td.product-name
    dl.variation dd{
        display:inline!important;

        margin-left:4px!important;
    }


    /* labels */

    body.woocommerce-cart
    .woocommerce-cart-form
    td.product-price::before,

    body.woocommerce-cart
    .woocommerce-cart-form
    td.product-quantity::before,

    body.woocommerce-cart
    .woocommerce-cart-form
    td.product-subtotal::before{
        display:block!important;

        width:auto!important;

        margin:
            0
            0
            4px!important;

        color:var(--abc41-muted)!important;

        font-size:9px!important;
        font-weight:800!important;

        letter-spacing:.04em!important;
        text-transform:uppercase!important;
    }


    body.woocommerce-cart
    .woocommerce-cart-form
    td.product-price::before{
        content:"Price"!important;
    }

    body.woocommerce-cart
    .woocommerce-cart-form
    td.product-quantity::before{
        content:"Quantity"!important;
    }

    body.woocommerce-cart
    .woocommerce-cart-form
    td.product-subtotal::before{
        content:"Subtotal"!important;
    }


    /* actual price */

    body.woocommerce-cart
    .woocommerce-cart-form
    td.product-price,
    body.woocommerce-cart
    .woocommerce-cart-form
    td.product-price .amount,
    body.woocommerce-cart
    .woocommerce-cart-form
    td.product-price .amount bdi{
        display:block!important;

        color:var(--abc41-heading)!important;

        font-size:14px!important;
        font-weight:700!important;

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


    /* subtotal */

    body.woocommerce-cart
    .woocommerce-cart-form
    td.product-subtotal,
    body.woocommerce-cart
    .woocommerce-cart-form
    td.product-subtotal .amount,
    body.woocommerce-cart
    .woocommerce-cart-form
    td.product-subtotal .amount bdi{
        color:var(--abc41-gold-dark)!important;

        font-size:17px!important;
        font-weight:900!important;

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


    body.woocommerce-cart
    .woocommerce-cart-form
    td.product-quantity
    .quantity{
        display:inline-flex!important;
    }


    body.woocommerce-cart
    .woocommerce-cart-form
    td.product-remove{
        top:14px!important;
        right:14px!important;
    }


    /* actions */

    body.woocommerce-cart
    .woocommerce-cart-form
    table.shop_table
    tr:last-child:not(.cart_item){
        background:#FFF!important;

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

        border-radius:14px!important;
    }


    /* totals */

    body.woocommerce-cart
    .cart-collaterals
    .cart_totals{
        background:#FFF!important;

        border-radius:14px!important;
    }


    /* checkout */

    body.woocommerce-checkout #customer_details{
        background:#FFF!important;

        border-radius:14px!important;
    }

    body.woocommerce-checkout #order_review_heading{
        background:#FFF!important;

        border-radius:
            14px
            14px
            0
            0!important;
    }

    body.woocommerce-checkout #order_review{
        background:#FFF!important;

        border-radius:
            0
            0
            14px
            14px!important;
    }

}