/* =============================================================================
   WOOCOMMERCE — Cart & Checkout pages
   Uses Tailwind CSS variables from the compiled app.css (inlined before this file).
   ============================================================================= */


/* -----------------------------------------------------------------------------
   Cart & checkout — main content container
   page.php renders the_content() with no wrapper div, so these blocks sit
   directly in <article> with no padding of their own.
   ----------------------------------------------------------------------------- */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
    padding: calc(var(--spacing) * 8);
}
@media screen and (max-width: 782px) {
    .wp-block-woocommerce-cart,
    .wp-block-woocommerce-checkout {
        padding: calc(var(--spacing) * 4);
    }
}


/* -----------------------------------------------------------------------------
   Shared table — used on both cart and checkout review
   ----------------------------------------------------------------------------- */
.woocommerce table.shop_table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--color-zinc-800);
}
.woocommerce table.shop_table th {
    font-weight: var(--font-weight-bold);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-zinc-600);
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
    border-bottom: 2px solid var(--color-zinc-200);
    text-align: left;
}
.woocommerce table.shop_table td {
    padding: calc(var(--spacing) * 4);
    border-bottom: 1px solid var(--color-zinc-200);
    vertical-align: middle;
}
.woocommerce table.shop_table .woocommerce-Price-amount {
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-blue);
}


/* -----------------------------------------------------------------------------
   Cart & checkout — product thumbnail
   This site uses the WooCommerce Cart/Checkout blocks (wp:woocommerce/cart,
   wp:woocommerce/checkout), not the legacy shortcode templates — so these
   target the block markup, not .woocommerce-cart-form / #order_review classes.
   ----------------------------------------------------------------------------- */
.wc-block-cart-item__image img {
    display: block;
    width: calc(var(--spacing) * 16) !important;
    height: calc(var(--spacing) * 16) !important;
    max-width: none !important;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-zinc-200);
}
.wc-block-components-order-summary-item__image img {
    display: block;
    width: calc(var(--spacing) * 12) !important;
    height: calc(var(--spacing) * 12) !important;
    max-width: none !important;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-zinc-200);
}


/* -----------------------------------------------------------------------------
   Cart — product rows
   ----------------------------------------------------------------------------- */
.woocommerce-cart-form__cart-item td.product-name {
    font-weight: var(--font-weight-bold);
}
.woocommerce-cart-form__cart-item td.product-name a {
    color: var(--color-zinc-900);
    text-decoration: none;
}
.woocommerce-cart-form__cart-item td.product-name a:hover {
    color: var(--color-primary-blue);
}
.woocommerce-cart-form__cart-item td.product-remove a.remove {
    color: var(--color-zinc-400) !important;
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
}
.woocommerce-cart-form__cart-item td.product-remove a.remove:hover {
    color: var(--color-primary-red) !important;
    background: transparent;
}


/* -----------------------------------------------------------------------------
   Cart — quantity input
   ----------------------------------------------------------------------------- */
.woocommerce-cart-form .quantity input.qty {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    width: calc(var(--spacing) * 20);
    border: 1px solid var(--color-zinc-300);
    border-radius: var(--radius-md);
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
    color: var(--color-zinc-800);
    text-align: center;
}


/* -----------------------------------------------------------------------------
   Cart — coupon & update row
   ----------------------------------------------------------------------------- */
.woocommerce-cart-form .actions {
    padding: calc(var(--spacing) * 4) 0;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    flex-wrap: wrap;
}
.woocommerce-cart-form .coupon {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
}
.woocommerce-cart-form .coupon input#coupon_code {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    border: 1px solid var(--color-zinc-300);
    border-radius: var(--radius-md);
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
    color: var(--color-zinc-800);
    outline: none;
}
.woocommerce-cart-form .coupon input#coupon_code:focus {
    border-color: var(--color-primary-blue);
    box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-primary-blue) 20%, transparent);
}
.woocommerce-cart-form .coupon .button,
.woocommerce-cart-form .actions .button {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 5);
    border-radius: var(--radius-md);
    border: 2px solid var(--color-primary-blue);
    background: transparent;
    color: var(--color-primary-blue);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.woocommerce-cart-form .coupon .button:hover,
.woocommerce-cart-form .actions .button:hover {
    background-color: var(--color-primary-blue);
    color: var(--color-white);
}


/* -----------------------------------------------------------------------------
   Cart totals
   ----------------------------------------------------------------------------- */
.cart-collaterals {
    margin-top: calc(var(--spacing) * 10);
}
.cart_totals h2,
.cross-sells h2 {
    font-family: var(--font-sans);
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: calc(var(--spacing) * 4);
    color: var(--color-zinc-900);
}
.cart_totals .shop_table tr.order-total td .woocommerce-Price-amount {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-blue);
}
.cart_totals .shop_table tr.order-total th {
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-zinc-900);
}

/* Proceed to checkout button */
.wc-proceed-to-checkout {
    margin-top: calc(var(--spacing) * 4);
}
.wc-proceed-to-checkout .checkout-button {
    display: block;
    width: 100%;
    text-align: center;
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
    background-color: var(--color-primary-blue);
    color: var(--color-white) !important;
    border-radius: var(--radius-md);
    padding: calc(var(--spacing) * 4) calc(var(--spacing) * 8);
    text-decoration: none;
    transition: opacity 0.2s ease;
    border: none;
}
.wc-proceed-to-checkout .checkout-button:hover {
    opacity: 0.85;
    color: var(--color-white) !important;
}


/* -----------------------------------------------------------------------------
   Checkout — layout
   ----------------------------------------------------------------------------- */
.woocommerce-checkout #customer_details,
.woocommerce-checkout .col2-set {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--spacing) * 10);
}

.woocommerce-checkout h3 {
    font-family: var(--font-sans);
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-zinc-900);
    margin-bottom: calc(var(--spacing) * 5);
    padding-bottom: calc(var(--spacing) * 3);
    border-bottom: 2px solid var(--color-zinc-200);
}


/* -----------------------------------------------------------------------------
   Checkout — form fields
   ----------------------------------------------------------------------------- */
.woocommerce form .form-row {
    margin-bottom: calc(var(--spacing) * 4);
}
.woocommerce form .form-row label {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-zinc-700);
    display: block;
    margin-bottom: calc(var(--spacing) * 1);
}
.woocommerce form .form-row .required {
    color: var(--color-primary-red);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    width: 100%;
    border: 1px solid var(--color-zinc-300);
    border-radius: var(--radius-md);
    padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 4);
    color: var(--color-zinc-900);
    background-color: var(--color-white);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    border-color: var(--color-primary-blue);
    box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-primary-blue) 20%, transparent);
}
.woocommerce form .form-row.woocommerce-invalid input.input-text {
    border-color: var(--color-primary-red);
}
.woocommerce form .form-row.woocommerce-validated input.input-text {
    border-color: var(--color-green-500, #22c55e);
}


/* -----------------------------------------------------------------------------
   Checkout — order review
   ----------------------------------------------------------------------------- */
#order_review_heading {
    font-family: var(--font-sans);
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-zinc-900);
    margin-bottom: calc(var(--spacing) * 5);
    padding-bottom: calc(var(--spacing) * 3);
    border-bottom: 2px solid var(--color-zinc-200);
}
.woocommerce-checkout-review-order-table .product-name {
    font-weight: var(--font-weight-bold);
}
.woocommerce-checkout-review-order-table tfoot tr.order-total td {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-blue);
}


/* -----------------------------------------------------------------------------
   Checkout — payment section
   ----------------------------------------------------------------------------- */
#payment {
    background-color: var(--color-zinc-50);
    border: 1px solid var(--color-zinc-200);
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 6);
    margin-top: calc(var(--spacing) * 6);
}
#payment ul.payment_methods {
    list-style: none;
    padding: 0;
    margin: 0 0 calc(var(--spacing) * 5) 0;
    border-bottom: 1px solid var(--color-zinc-200);
    padding-bottom: calc(var(--spacing) * 5);
}
#payment ul.payment_methods li {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    padding: calc(var(--spacing) * 2) 0;
    color: var(--color-zinc-800);
}
#payment .payment_box {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-zinc-600);
    background-color: var(--color-zinc-100);
    border-radius: var(--radius-md);
    padding: calc(var(--spacing) * 4);
    margin-top: calc(var(--spacing) * 2);
}

/* Place order button */
#place_order {
    display: block;
    width: 100%;
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
    background-color: var(--color-primary-blue);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    padding: calc(var(--spacing) * 4) calc(var(--spacing) * 8);
    cursor: pointer;
    transition: opacity 0.2s ease;
}
#place_order:hover {
    opacity: 0.85;
}


/* -----------------------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------------------- */
@media screen and (max-width: 782px) {
    .woocommerce-checkout #customer_details,
    .woocommerce-checkout .col2-set {
        grid-template-columns: 1fr;
        gap: calc(var(--spacing) * 6);
    }
    .woocommerce table.shop_table th,
    .woocommerce table.shop_table td {
        padding: calc(var(--spacing) * 3);
    }
}