/* ==========================================================
   PREMIUM CART PAGE
   Phase 1 - Page Layout Foundation
   ----------------------------------------------------------
   Contents
   1. Page Container
   2. Cart Wrapper
   3. Cart Block Layout
   4. Cart Items Column
   5. Cart Totals Column
   ========================================================== */


/* ==========================================================
   1. PAGE CONTAINER
   ========================================================== */

body.woocommerce-cart {

    background: var(--color-background);
}

body.woocommerce-cart .site-main,
body.woocommerce-cart main {

    width: 100%;
}

body.woocommerce-cart .wp-block-woocommerce-cart {

    max-width: 1320px;
    margin: 0 auto;
    padding: 40px 32px 80px; 
}


/* ==========================================================
   2. CART WRAPPER
   ========================================================== */

body.woocommerce-cart .wc-block-cart {

    display: flex;
    align-items: center;
    gap: 48px;
}


/* ==========================================================
   3. CART BLOCK LAYOUT
   ========================================================== */

body.woocommerce-cart .wc-block-cart__main {

    flex: 1 1 auto;
    min-width: 0;
}

body.woocommerce-cart .wc-block-cart__sidebar {

    width: 380px;
    flex-shrink: 0;
}


/* ==========================================================
   4. CART ITEMS COLUMN
   ========================================================== */

body.woocommerce-cart .wc-block-cart-items {

    background: #ffffff;

    border: 1px solid rgba(0,0,0,0.08);

    border-radius: 22px;

    overflow: hidden;

    box-shadow: 0 20px 60px rgba(0,0,0,0.05);
}


/* ==========================================================
   5. CART TOTALS COLUMN
   ========================================================== */

body.woocommerce-cart .wc-block-cart__sidebar .wc-block-components-sidebar {

    background: #ffffff;

    border: 1px solid rgba(0,0,0,0.08);

    border-radius: 22px;

    padding: 32px;

    box-shadow: 0 20px 60px rgba(0,0,0,0.05);

    position: sticky;

    top: 120px;
}


/* ==========================================================
   PREMIUM CART PAGE
   Phase 2 - Cart Item Card
   ----------------------------------------------------------
   Contents
   1. Cart Item Row
   2. Product Image
   3. Product Information
   4. Quantity & Actions
   ========================================================== */


/* ==========================================================
   1. CART ITEM ROW
   ========================================================== */

body.woocommerce-cart .wc-block-cart-items__row {

    padding: 28px;
    align-items: center;
    transition: all .3s ease;
}

body.woocommerce-cart .wc-block-cart-items__row:hover {

    background: #fcfcfc;
}


/* ==========================================================
   2. PRODUCT IMAGE
   ========================================================== */

body.woocommerce-cart .wc-block-cart-item__image {

    width: 96px;
    flex: 0 0 96px;
    margin-right: 28px;
}

body.woocommerce-cart .wc-block-cart-item__image img {

    display: block;

    width: 96px;
    height: 96px;

    object-fit: cover;
    object-position: center;

    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.08);
    background: #fff;

    transition: transform .30s ease;
}

body.woocommerce-cart
.wc-block-cart-items__row:hover
.wc-block-cart-item__image img {

    transform: scale(1.03);
}


/* ==========================================================
   3. PRODUCT INFORMATION
   ========================================================== */

body.woocommerce-cart .wc-block-components-product-name {

    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.4;

    margin-bottom: 10px;

    text-decoration: none;
}

body.woocommerce-cart .wc-block-components-product-name:hover {

    color: var(--color-primary);
}

body.woocommerce-cart .wc-block-cart-item__prices {

    margin-bottom: 12px;
}

body.woocommerce-cart .wc-block-components-product-price {

    font-size: 1.05rem;
    font-weight: 700;
}

body.woocommerce-cart .wc-block-components-product-metadata,
body.woocommerce-cart .wc-block-components-product-details {

    margin-top: 10px;

    font-size: .92rem;

    line-height: 1.6;

    color: #666;

}


/* ==========================================================
   4. QUANTITY & ACTIONS
   ========================================================== */

body.woocommerce-cart .wc-block-cart-item__quantity {

    margin-top: 18px;

    display: flex;

    align-items: center;

    gap: 18px;

    flex-wrap: wrap;
}

body.woocommerce-cart .wc-block-components-quantity-selector {

    border-radius: 999px;

    overflow: hidden;

    border: 1px solid rgba(0,0,0,.12);

    background: #fff;
}

body.woocommerce-cart .wc-block-cart-item__remove-link {

    color: #888;

    transition: color .25s ease;
}

body.woocommerce-cart .wc-block-cart-item__remove-link:hover {

    color: #d63638;
}


/* ==========================================================
   PREMIUM CART PAGE
   Phase 3 - Cart Totals Card
   ----------------------------------------------------------
   Contents
   1. Sidebar Card
   2. Card Heading
   3. Coupon Section
   4. Totals Rows
   5. Checkout Button
   ========================================================== */


/* ==========================================================
   1. SIDEBAR CARD
   ========================================================== */

body.woocommerce-cart .wc-block-components-sidebar {

    background: #ffffff;

    border: 1px solid rgba(0,0,0,.08);

    border-radius: 20px;

    padding: 32px;

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


/* ==========================================================
   2. CARD HEADING
   ========================================================== */

body.woocommerce-cart .wc-block-components-sidebar h2,
body.woocommerce-cart .wc-block-components-totals-wrapper h2 {

    margin: 0 0 24px;

    font-size: 1.35rem;

    font-weight: 600;

    color: var(--color-heading);

    letter-spacing: -.02em;
}


/* ==========================================================
   3. COUPON SECTION
   ========================================================== */

body.woocommerce-cart .wc-block-components-panel {

    margin-bottom: 28px;

    border-top: 1px solid rgba(0,0,0,.08);

    border-bottom: 1px solid rgba(0,0,0,.08);

    padding: 12px 0;
}

body.woocommerce-cart .wc-block-components-panel__button {

    padding: 12px 0;

    font-weight: 500;

    transition: color .25s ease;
}

body.woocommerce-cart .wc-block-components-panel__button:hover {

    color: var(--color-primary);
}


/* ==========================================================
   4. TOTALS
   ========================================================== */

body.woocommerce-cart .wc-block-components-totals-item {

    padding: 16px 0;

    border-bottom: 1px solid rgba(0,0,0,.08);
}

body.woocommerce-cart .wc-block-components-totals-item__label {

    font-size: 1rem;

    font-weight: 500;

    color: #555;
}

body.woocommerce-cart .wc-block-components-totals-item__value {

    font-size: 1.2rem;

    font-weight: 700;

    color: var(--color-heading);
}


/* ==========================================================
   5. CHECKOUT BUTTON
   ========================================================== */

body.woocommerce-cart .wc-block-cart__submit-button,
body.woocommerce-cart .wc-block-components-checkout-place-order-button {

    width: 100%;

    min-height: 56px;

    border: none;

    border-radius: 14px;

    font-size: 1rem;

    font-weight: 600;

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

body.woocommerce-cart .wc-block-cart__submit-button:hover,
body.woocommerce-cart .wc-block-components-checkout-place-order-button:hover {

    transform: translateY(-2px);

    box-shadow: 0 14px 30px rgba(0,0,0,.15);
}

/* ==========================================================
   PUTUSHART PREMIUM COUPON
   ========================================================== */

.putushart-coupon {

    margin-top: 18px;

    padding: 18px 20px;

    border-radius: 16px;

    background: #F8F8F8;

    border: 1px solid #ECECEC;

}

.putushart-coupon__title{

    font-size:.78rem;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#888;

    margin-bottom:8px;

    font-weight:700;

}

.putushart-coupon__code{

    font-size:1rem;

    font-weight:700;

    color:#111;

    margin-bottom:6px;

}

.putushart-coupon__description{

    color:#666;

    line-height:1.6;

    margin-bottom:8px;

}

.putushart-coupon__saving{

    color:#22C55E;

    font-weight:700;

}

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

.putushart-empty-cart{

    padding:100px 20px;

}

.empty-cart-wrapper{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.empty-cart-illustration{

    display:flex;

    justify-content:center;

    align-items:center;

}

.empty-cart-icon{

    width:260px;

    height:260px;

    border-radius:50%;

    background:#f8f8f8;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:110px;

    box-shadow:0 20px 60px rgba(0,0,0,.08);

}

.empty-cart-content span{

    display:inline-block;

    letter-spacing:4px;

    font-size:13px;

    font-weight:700;

    color:#b88b4a;

    margin-bottom:20px;

}

.empty-cart-content h1{

    font-size:54px;

    line-height:1.15;

    margin-bottom:25px;

    color:#222;

}

.empty-cart-content p{

    font-size:18px;

    line-height:1.9;

    color:#666;

    margin-bottom:40px;

    max-width:520px;

}

.empty-cart-btn{

    padding:18px 42px;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

}

.empty-cart-btn:hover{

    transform:translateY(-4px);

}

/* Hide WooCommerce default empty cart notice */
.woocommerce .woocommerce-info {
    display: none !important;
}