/* =================================================
   2929 CART PAGE — cart.css
   Targets WooCommerce Blocks cart
   Author: Clinton Osunbor (clintonosunbor.com)
   ================================================= */

/* =================================================
   FONTS
   ================================================= */

.wc-block-cart,
.wc-block-cart *,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-cart * {
    font-family: "Outfit", sans-serif;
}

.wc-block-cart__main h1,
.wc-block-cart__main h2,
.wc-block-cart__main h3,
.wc-block-components-order-summary__title,
.wp-block-woocommerce-filled-cart-block h1,
.wp-block-woocommerce-filled-cart-block h2 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.woocommerce-cart .entry-title,
.woocommerce-cart h1.entry-title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 400;
    letter-spacing: 0.02em;
    color: #000000;
    text-transform: none;
    margin-bottom: 8px;
}

/* =================================================
   CONTAINER
   ================================================= */

.woocommerce-cart .entry-content,
.woocommerce-cart .ast-container,
.woocommerce-cart #primary {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}

.wp-block-woocommerce-cart {
    padding: 0 40px;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* =================================================
   PRODUCT NAMES IN CART
   ================================================= */

.wc-block-cart-items__row .wc-block-components-product-name,
.wc-block-cart-item__wrap .wc-block-components-product-name {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: #000000;
}

/* =================================================
   BUTTONS
   ================================================= */

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
    font-family: "Outfit", sans-serif !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    background: #000000 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 16px !important;
    width: 100% !important;
}

.wc-block-cart__submit-button:hover {
    background: #333333 !important;
}

.wc-block-cart-item__remove-link {
    font-family: "Outfit", sans-serif;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #a8a8a8;
}

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

.wc-block-components-totals-wrapper,
.wc-block-cart__totals-title {
    font-family: "Outfit", sans-serif;
}

.wc-block-cart__totals-title {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
}

.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
    font-family: "Outfit", sans-serif;
    font-size: 13px;
    color: #000000;
}

/* =================================================
   COUPON
   ================================================= */

.wc-block-components-totals-coupon__input input,
.wc-block-components-totals-coupon__button {
    font-family: "Outfit", sans-serif;
    border-radius: 0;
}

.wc-block-components-totals-coupon__button {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: none;
    color: #000000;
    border: 1px solid #000000;
}

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

.wp-block-woocommerce-empty-cart-block {
    padding: 20px 0 40px;
    max-width: 100%;
    margin: 0;
}

.wc-block-cart__empty-cart__title,
.wc-block-cart__empty-cart__title.with-empty-cart-icon {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: #000000;
    text-align: center;
    margin: 0 0 40px;
    padding: 0;
    background: none !important;
    background-image: none !important;
    text-transform: none;
}

.wc-block-cart__empty-cart__title::before,
.wc-block-cart__empty-cart__title::after,
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before,
.wc-block-cart__empty-cart__title.with-empty-cart-icon::after {
    display: none !important;
    content: none !important;
}

.wp-block-woocommerce-empty-cart-block .wp-block-separator,
.wp-block-woocommerce-empty-cart-block hr {
    display: none;
}

.wp-block-woocommerce-empty-cart-block h2 {
    font-family: "Outfit", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
    color: #000000;
    margin: 0 0 24px;
    padding: 0;
}

.wc-block-grid__product-add-to-cart {
    display: none;
}

.wc-block-grid__product-image {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

.wc-block-grid__product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    max-width: none;
}

.wc-block-grid__product-title {
    font-family: "Outfit", sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #000000;
    padding: 10px 0 4px;
    display: block;
    text-decoration: none;
}

.wc-block-grid__product-price {
    font-family: "Outfit", sans-serif;
    font-size: 13px;
    color: #6b6b6b;
    padding: 0 0 12px;
    display: block;
}

/* =================================================
   EMPTY CART — DESKTOP GRID
   ================================================= */

ul.wc-block-grid__products.twoninetwo-empty-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 2px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

ul.wc-block-grid__products.twoninetwo-empty-grid li.wc-block-grid__product {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

ul.wc-block-grid__products.twoninetwo-empty-grid li.wc-block-grid__product img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* =================================================
   EMPTY CART — MOBILE CSS CAROUSEL
   Pure CSS scroll snap — no JS required
   ================================================= */

@media ( max-width: 768px ) {

    ul.wc-block-grid__products.twoninetwo-css-carousel,
    .wp-block-woocommerce-empty-cart-block ul.wc-block-grid__products.twoninetwo-css-carousel {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: scroll !important;
        overflow-y: visible !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 2px !important;
        list-style: none !important;
        padding: 0 0 12px !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        scrollbar-width: none !important;
        grid-template-columns: unset !important;
    }

    ul.wc-block-grid__products.twoninetwo-css-carousel::-webkit-scrollbar,
    .wp-block-woocommerce-empty-cart-block ul.wc-block-grid__products.twoninetwo-css-carousel::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    ul.wc-block-grid__products.twoninetwo-css-carousel li.wc-block-grid__product,
    .wp-block-woocommerce-empty-cart-block ul.wc-block-grid__products.twoninetwo-css-carousel li.wc-block-grid__product {
        flex: 0 0 48% !important;
        width: 48% !important;
        min-width: 48% !important;
        max-width: 48% !important;
        scroll-snap-align: start !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    ul.wc-block-grid__products.twoninetwo-css-carousel li.wc-block-grid__product img,
    .wp-block-woocommerce-empty-cart-block ul.wc-block-grid__products.twoninetwo-css-carousel li.wc-block-grid__product img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        max-width: 100% !important;
    }
}

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

@media ( max-width: 768px ) {

    .wp-block-woocommerce-cart {
        padding: 0 16px;
    }

    .wc-block-components-sidebar-layout {
        flex-direction: column;
    }

    .wc-block-cart__main,
    .wc-block-cart__sidebar {
        width: 100%;
        max-width: 100%;
    }

    .wp-block-woocommerce-empty-cart-block {
        padding: 20px 0 40px;
    }
}

@media ( max-width: 768px ) {
    body .wp-block-woocommerce-empty-cart-block ul.wc-block-grid__products.twoninetwo-css-carousel li.wc-block-grid__product {
        display: block !important;
        flex-shrink: 0 !important;
    }
}

ul.wc-block-grid__products.twoninetwo-css-carousel li.wc-block-grid__product,
.wp-block-woocommerce-empty-cart-block ul.wc-block-grid__products.twoninetwo-css-carousel li.wc-block-grid__product {
    display: block !important;
}

.twoninetwo-css-carousel {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    width: 100%;
    padding-bottom: 12px;
}

.twoninetwo-carousel-slide {
    flex: 0 0 48%;
    scroll-snap-align: start;
    min-width: 0;
}

.twoninetwo-carousel-slide .wc-block-grid__product {
    width: 100%;
}