/**
 * Clara & Co - Cart & Checkout Styles
 * Shopify-inspired clean, conversion-focused design
 */

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

/* Cart Page Layout */
.woocommerce-cart .wp-block-woocommerce-cart,
.woocommerce-cart .wc-block-cart {
    max-width: none !important;
    padding: 0 !important;
}

/* Cart heading */
.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-cart-line-items-block,
.woocommerce-cart .wc-block-cart__main {
    padding-right: 40px;
}

/* Cart page title - centered */
.woocommerce-cart .entry-title,
.woocommerce-cart .wp-block-heading {
    font-family: var(--font-heading) !important;
    font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    text-align: center !important;
    margin-bottom: 32px !important;
}

/* Cart summary sidebar - clean card look */
.wc-block-cart .wc-block-cart__totals-title {
    font-family: var(--font-heading) !important;
    font-size: 1.25rem !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Product images in cart - bigger */
.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-image img,
.wc-block-cart .wc-block-components-product-image img {
    width: 100px !important;
    height: auto !important;
    min-height: 120px;
    object-fit: cover;
    object-position: center top;
    border: 1px solid var(--color-border);
}

.wc-block-cart .wc-block-components-product-image {
    width: 100px !important;
    flex-shrink: 0;
}

/* Product name in cart */
.wc-block-cart .wc-block-components-product-name {
    font-family: var(--font-heading) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--color-dark) !important;
    text-decoration: none !important;
}

.wc-block-cart .wc-block-components-product-name:hover {
    color: var(--color-olive) !important;
}

/* Product price */
.wc-block-cart .wc-block-components-product-price {
    font-weight: 500 !important;
    color: var(--color-dark) !important;
}

/* Product metadata (description) - hide or tone down */
.wc-block-cart .wc-block-components-product-metadata {
    font-size: 12px !important;
    color: var(--color-olive) !important;
    margin-top: 4px !important;
}

/* Quantity controls */
.wc-block-cart .wc-block-components-quantity-selector {
    border: 1.5px solid var(--color-border) !important;
    border-radius: 0 !important;
}

.wc-block-cart .wc-block-components-quantity-selector input {
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.wc-block-cart .wc-block-components-quantity-selector__button {
    color: var(--color-dark) !important;
    transition: background 0.2s !important;
}

.wc-block-cart .wc-block-components-quantity-selector__button:hover {
    background: var(--color-bg-warm) !important;
}

/* Remove item button */
.wc-block-cart .wc-block-cart-item__remove-link {
    font-family: var(--font-body) !important;
    font-size: 11px !important;
    color: var(--color-olive) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

.wc-block-cart .wc-block-cart-item__remove-link:hover {
    color: #c44 !important;
}

/* Cart totals sidebar - card container */
.wc-block-cart .wc-block-components-sidebar {
    background: #fff !important;
    border: 1px solid var(--color-border) !important;
    padding: 24px !important;
}

/* Proceed to Checkout button */
.wc-block-cart .wc-block-cart__submit-button,
.wc-block-cart .wc-block-components-checkout-step .wc-block-components-button,
.wc-block-cart .wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button {
    background-color: var(--color-dark) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding: 16px 24px !important;
    transition: all 0.3s !important;
    width: 100% !important;
}

.wc-block-cart .wc-block-cart__submit-button:hover,
.wc-block-cart .wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button:hover {
    background-color: #333 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Coupon toggle label */
.wc-block-cart .wc-block-components-totals-coupon-link,
.wc-block-cart .wc-block-components-totals-coupon__button-text {
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    color: var(--color-dark) !important;
}

/* Coupon section */
.wc-block-cart .wc-block-components-totals-coupon__button {
    background-color: var(--color-dark) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
}

.wc-block-cart .wc-block-components-totals-coupon .wc-block-components-text-input input {
    border-radius: 0 !important;
}

/* Totals styling */
.wc-block-cart .wc-block-components-totals-item__label {
    font-family: var(--font-body) !important;
    font-size: 13px !important;
}

.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-weight: 600 !important;
    font-size: 15px !important;
}

.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-family: var(--font-heading) !important;
    font-size: 1.3rem !important;
    font-weight: 500 !important;
}

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

/* Override page-content width constraint for cart & checkout */
.woocommerce-cart .page-content,
.woocommerce-checkout .page-content {
    max-width: 1200px !important;
    padding-left: var(--container-padding) !important;
    padding-right: var(--container-padding) !important;
}

/* Overall checkout layout */
.woocommerce-checkout .wp-block-woocommerce-checkout,
.woocommerce-checkout .wc-block-checkout {
    max-width: none !important;
    padding: 0 !important;
    container-type: inline-size !important;
}

/* Let WC use its native flex layout — we just control child widths */
.wc-block-components-sidebar-layout.wc-block-checkout {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 0 !important;
    max-width: none !important;
    padding: 0 !important;
}

/* Main form - left side: takes remaining space */
.wc-block-checkout .wc-block-components-main.wc-block-checkout__main {
    flex: 1 1 55% !important;
    min-width: 280px !important;
    padding-right: 48px !important;
    border-right: 1px solid var(--color-border) !important;
    box-sizing: border-box !important;
    order: 1 !important;
}

/* Order summary sidebar - right side */
.wc-block-checkout .wc-block-components-sidebar.wc-block-checkout__sidebar {
    flex: 0 1 38% !important;
    min-width: 280px !important;
    box-sizing: border-box !important;
    position: sticky !important;
    top: calc(var(--header-height) + 30px) !important;
    order: 2 !important;
}

/* Hide actions row from left column - we'll show it in right via JS */
.wc-block-checkout__main .wc-block-checkout__actions_row {
    display: none !important;
}

/* Place Order button when appended to sidebar */
.wc-block-checkout__sidebar .wc-block-checkout__actions_row {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 24px !important;
    border-top: 1px solid var(--color-border) !important;
    margin-top: 16px !important;
}

/* Section headings */
.wc-block-checkout .wc-block-components-checkout-step__title {
    font-family: var(--font-body) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--color-dark) !important;
    letter-spacing: 0.3px !important;
}

/* Form inputs */
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-text-input textarea,
.wc-block-checkout .wc-block-components-combobox .components-combobox-control input,
.wc-block-checkout select {
    border: 1.5px solid var(--color-border) !important;
    border-radius: 0 !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    padding: 12px 14px !important;
    transition: border-color 0.2s !important;
}

.wc-block-checkout .wc-block-components-text-input input:focus,
.wc-block-checkout .wc-block-components-text-input textarea:focus {
    border-color: var(--color-dark) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Input labels */
.wc-block-checkout .wc-block-components-text-input label {
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    color: var(--color-olive) !important;
}

/* Order summary sidebar - clean seamless look */
.wc-block-checkout .wc-block-components-order-summary {
    border: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Order summary product list - add inner padding */
.wc-block-checkout .wc-block-components-order-summary .wc-block-components-panel__content {
    padding: 0 8px !important;
}

/* Wrap the entire right sidebar in a styled container */
.wc-block-checkout .wc-block-components-sidebar.wc-block-checkout__sidebar {
    background: var(--color-bg-warm) !important;
    border: 1px solid var(--color-border) !important;
    padding: 28px 36px !important;
    margin-left: 40px !important;
    overflow: hidden !important;
}

/* Fix snackbar blowout */
.wc-block-checkout__sidebar .wc-block-components-notices__snackbar {
    width: 100% !important;
    max-width: 100% !important;
}

/* All direct children of sidebar need to respect padding */
.wc-block-checkout__sidebar > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Force order summary always expanded on desktop */
.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__content {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Remove the collapse toggle behaviour on desktop */
.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title {
    cursor: default !important;
    pointer-events: none !important;
}

/* Hide the expand/collapse chevron */
.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__button-toggle,
.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title svg {
    display: none !important;
}

/* Style the order summary heading */
.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title-text {
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

/* Hide the price next to "Order summary" heading since it shows in totals */
.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title .wc-block-formatted-money-amount {
    display: none !important;
}

/* Hide the duplicate order summary that appears in the main column */
.wc-block-checkout__main .wp-block-woocommerce-checkout-order-summary-block {
    display: none !important;
}

.wc-block-checkout .wc-block-components-order-summary .wc-block-components-product-name {
    font-family: var(--font-heading) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    color: var(--color-dark) !important;
}

/* Order summary product images */
.wc-block-checkout .wc-block-components-order-summary .wc-block-components-product-image {
    width: 56px !important;
    flex-shrink: 0 !important;
}

.wc-block-checkout .wc-block-components-order-summary .wc-block-components-product-image img {
    border: 1px solid var(--color-border) !important;
    border-radius: 0 !important;
    width: 56px !important;
}

/* Order summary product name - single line with ellipsis */
.wc-block-checkout .wc-block-components-order-summary .wc-block-components-product-name {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
}

/* Hide long descriptions in order summary */
.wc-block-checkout .wc-block-components-order-summary .wc-block-components-product-metadata {
    display: none !important;
}

/* Order summary product rows spacing */
.wc-block-checkout .wc-block-components-order-summary-item {
    padding: 12px 0 !important;
}

/* Summary totals section - keep inside the card */
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper {
    padding: 4px 0 !important;
    margin: 0 !important;
}

/* Ensure totals don't overflow */
.wc-block-checkout__sidebar .wc-block-components-totals-item {
    padding: 6px 0 !important;
}

/* Order summary items - breathing room */
.wc-block-checkout__sidebar .wc-block-components-order-summary-item {
    padding: 14px 0 !important;
    margin: 0 !important;
}

/* Prevent any negative margins from WC blocks */
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
    margin: 0 !important;
}

.wc-block-checkout__sidebar .wc-block-components-totals-coupon {
    padding: 8px 0 !important;
}

/* Order summary totals */
.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
}

.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-family: var(--font-heading) !important;
    font-size: 1.4rem !important;
    font-weight: 500 !important;
}

/* Place Order button */
.wc-block-checkout .wc-block-components-checkout-place-order-button,
.wc-block-checkout .wc-block-checkout__actions_row .wc-block-components-button {
    background-color: var(--color-dark) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding: 18px 32px !important;
    transition: all 0.3s !important;
    min-height: 52px !important;
}

.wc-block-checkout .wc-block-components-checkout-place-order-button:hover,
.wc-block-checkout .wc-block-checkout__actions_row .wc-block-components-button:hover {
    background-color: #333 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Return to cart link */
.wc-block-checkout .wc-block-components-checkout-return-to-cart-button {
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    color: var(--color-olive) !important;
    text-decoration: none !important;
}

.wc-block-checkout .wc-block-components-checkout-return-to-cart-button:hover {
    color: var(--color-dark) !important;
}

/* Terms text */
.wc-block-checkout .wc-block-checkout__terms {
    font-size: 12px !important;
    color: var(--color-olive) !important;
}

/* Payment options */
.wc-block-checkout .wc-block-components-radio-control__label {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
}

/* Error message styling */
.wc-block-checkout .wc-block-components-notice-banner.is-error {
    border-radius: 0 !important;
    border-left: 3px solid #c44 !important;
}

/* Checkout step dividers */
.wc-block-checkout .wc-block-components-checkout-step {
    border-bottom: 1px solid var(--color-border) !important;
    padding-bottom: 24px !important;
    margin-bottom: 24px !important;
}

/* ================================================================
   EMPTY CART / BAG — hide sad face icon
   ================================================================ */
.wc-block-cart .wc-block-cart__empty-cart__image,
.wc-block-cart .wc-block-cart-items__empty-cart-icon,
.wc-block-cart .wc-block-components-notice-banner__icon,
.wc-block-cart svg.wc-block-cart__empty-cart__image,
.woocommerce-cart .empty-cart-icon,
.wc-block-cart .wc-block-cart__empty-cart__image svg {
    display: none !important;
}

/* ================================================================
   SHARED - BOTH PAGES
   ================================================================ */

/* Page titles */
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-cart .wp-block-heading,
.woocommerce-checkout .wp-block-heading {
    font-family: var(--font-heading) !important;
    font-style: italic;
    font-weight: 400 !important;
    text-align: center !important;
}

/* General text refinements */
.wc-block-cart .wc-block-components-product-details li,
.wc-block-checkout .wc-block-components-product-details li {
    font-size: 12px !important;
    color: var(--color-olive) !important;
}

/* Shipping notice */
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__label {
    font-family: var(--font-body) !important;
}

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

/* ================================================================
   RESPONSIVE — Container queries + media queries
   WC Blocks uses CSS container queries on the checkout wrapper.
   We use the same approach so both systems work together.
   ================================================================ */

/* Mobile: single column, form first then order summary */
@container (max-width: 699px) {
    .wc-block-checkout__main {
        flex: 0 0 100% !important;
        min-width: 0 !important;
        padding-right: 0 !important;
        border-right: none !important;
        padding-bottom: 32px !important;
        border-bottom: 1px solid var(--color-border) !important;
        order: 0 !important;
    }

    .wc-block-checkout__sidebar {
        flex: 0 0 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        position: static !important;
        padding: 20px !important;
        order: 1 !important;
    }

    /* Stack first/last name on separate rows */
    .wc-block-components-address-form {
        flex-wrap: wrap !important;
    }

    .wc-block-components-address-form > div {
        flex: 1 0 100% !important;
        min-width: 0 !important;
    }

    /* Place Order button — full width */
    .wc-block-checkout__actions_row {
        flex-direction: column-reverse !important;
        gap: 12px !important;
    }

    .wc-block-components-checkout-place-order-button {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .wc-block-components-checkout-return-to-cart-button {
        text-align: center !important;
        width: 100% !important;
    }

    /* Snackbar fix */
    .wc-block-components-notices__snackbar {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Reduce step spacing */
    .wc-block-components-checkout-step {
        padding-bottom: 16px !important;
        margin-bottom: 16px !important;
    }
}

@media (max-width: 768px) {
    /* Cart page */
    .wc-block-cart .wc-block-cart__main {
        padding-right: 0 !important;
    }

    .wc-block-cart .wc-block-components-product-image img {
        width: 80px !important;
        min-height: 100px !important;
    }

    .wc-block-cart .wc-block-components-product-image {
        width: 80px !important;
    }

    /* Checkout fallback for browsers without container query support */
    .wc-block-components-sidebar-layout.wc-block-checkout {
        flex-direction: column !important;
    }

    .wc-block-checkout .wc-block-components-main.wc-block-checkout__main {
        flex: 0 0 100% !important;
        padding-right: 0 !important;
        border-right: none !important;
        padding-bottom: 32px !important;
        border-bottom: 1px solid var(--color-border) !important;
        order: 0 !important;
    }

    .wc-block-checkout .wc-block-components-sidebar.wc-block-checkout__sidebar {
        flex: 0 0 100% !important;
        padding: 20px !important;
        margin-left: 0 !important;
        position: static !important;
        order: 1 !important;
    }

    /* Page title */
    .woocommerce-checkout .entry-title,
    .woocommerce-checkout .wp-block-heading {
        font-size: 2rem !important;
        margin-bottom: 24px !important;
    }
}