/* ============================================================
   CHECKOUT.CSS — Masazeri Child Theme
   Scope: cart, checkout and account pages (is_cart()/is_checkout()/
   is_account_page()) — also enqueued on My Account since its order
   tables/forms/buttons reuse these same generic .woocommerce rules.
   Covers: cart table, order summary, checkout form,
           payment methods, order confirmation
   ============================================================ */

/* ============================================================
   PAGE HEADER
   ============================================================ */
.maz-checkout-header {
    /* background-color: var(--maz-beige);
    padding: var(--maz-space-lg) var(--maz-space-md);
    border-bottom: 1px solid var(--maz-border);
    text-align: center; */
}

.woocommerce .woocommerce-error::before {
    color: white;
}

.woocommerce .woocommerce-error {
    background-color: #b81c23;
}

.woocommerce .woocommerce-error li a {
    color: white;
}


.maz-checkout-header__title {
    /* font-size: var(--maz-font-size-2xl);
    font-weight: 800;
    color: var(--maz-dark);
    letter-spacing: -0.02em; */
    font-size: 45px;
}

/* Step indicator */
.maz-checkout-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    max-width: 400px;
    margin: var(--maz-space-md) auto 0;
}

.maz-checkout-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--maz-font-size-sm);
    font-weight: 600;
    color: var(--maz-gray-400);
}

.maz-checkout-step__number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--maz-border);
    color: var(--maz-gray-400);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--maz-font-size-xs);
    font-weight: 700;
    flex-shrink: 0;
}

.maz-checkout-step--active .maz-checkout-step__number {
    background-color: var(--maz-orange);
    color: var(--maz-white);
}

.maz-checkout-step--active {
    color: var(--maz-orange);
}

.maz-checkout-step--done .maz-checkout-step__number {
    background-color: var(--maz-sage);
    color: var(--maz-white);
}

.maz-checkout-step-divider {
    width: 40px;
    height: 2px;
    background-color: var(--maz-border);
    flex-shrink: 0;
}

/* ============================================================
   SIDEBAR REMOVAL — cart & checkout (same pattern as shop/category/
   single-product: the woo sidebar only ever holds default/unrelated
   widgets, not worth a permanent column here either)
   ============================================================ */
.woocommerce-cart aside#sidebar,
.woocommerce-checkout aside#sidebar {
    display: none !important;
}

/* ============================================================
   CART LAYOUT — table + totals side by side (mirrors the checkout
   page's own #customer_details grid below). WooCommerce core floats
   .cart_totals at width:48% inside .cart-collaterals with nothing
   resetting it responsively — that's what was leaving a large empty
   gap next to a too-narrow totals box at every breakpoint.
   ============================================================ */
.woocommerce-cart .woocommerce {
    max-width: var(--maz-container);
    margin: 0 auto;
    padding: var(--maz-space-xl) var(--maz-space-md);
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--maz-space-lg);
    align-items: start;
}

/* Explicit grid placement — .woocommerce-notices-wrapper is a real sibling
   in this container (present/empty even with no messages to show) and would
   otherwise consume the first grid cell as an auto-placed item, pushing the
   form and totals into the wrong columns/rows. */
.woocommerce-cart .woocommerce-notices-wrapper {
    grid-column: 1 / -1;
}

.woocommerce-cart .woocommerce-cart-form {
    grid-column: 1;
    /* Grid items default to min-width:auto, which equals their content's
       min-content size — the cart table (~550px of columns) was forcing
       this whole 1fr track to grow to fit it instead of shrinking, which
       is what let the table overflow the viewport instead of scrolling
       inside itself. min-width:0 lets the track actually shrink. */
    min-width: 0;
}

.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cart_totals {
    /* !important needed — WC core's `.woocommerce-page .cart-collaterals
       .cart_totals { width:48%; float:right }` (3 classes) outranks this
       rule's specificity (2 classes). Same pattern as the gallery/card-width
       fixes in product.css/category.css. */
    grid-column: 2;
    width: 100% !important;
    float: none !important;
    margin: 0;
}

.woocommerce-cart .cart_totals {
    position: sticky;
    top: 100px;
}

/* ============================================================
   CART TABLE
   ============================================================ */
.woocommerce .woocommerce-cart-form,
.maz-cart-wrapper {
    padding: 0;
}

.woocommerce table.shop_table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--maz-font);
    border: 1px solid var(--maz-border);
    border-radius: var(--maz-radius-lg);
    overflow: hidden;
    background: var(--maz-white);
}

.woocommerce table.shop_table thead {
    background-color: var(--maz-white);
}

.woocommerce table.shop_table tfoot .order-total th {
    border-bottom: none;
}

.woocommerce table.shop_table th {
    font-size: var(--maz-font-size-xs);
    font-weight: 700;
    color: var(--maz-dark);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: var(--maz-space-md);
    border-bottom: 1px solid var(--maz-border);
    text-align: left;
}

.woocommerce table.shop_table td {
    padding: var(--maz-space-md);
    border-bottom: 1px solid var(--maz-border);
    vertical-align: middle;
    font-size: var(--maz-font-size-sm);
    color: var(--maz-charcoal);
}

.woocommerce table.shop_table tr:last-child td {
    border-bottom: none;
}

/* Product image in cart */
.woocommerce table.cart td.product-thumbnail {
    width: 90px;
    padding-right: 0;
}

.woocommerce table.cart td.product-thumbnail img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: var(--maz-radius-md);
    background-color: var(--maz-beige);
    border: 1px solid var(--maz-border);
}

/* Product name */
.woocommerce table.cart td.product-name a {
    font-weight: 600;
    color: var(--maz-dark);
    text-decoration: none;
    font-size: var(--maz-font-size-sm);
    transition: color var(--maz-transition);
}

.woocommerce table.cart td.product-name a:hover {
    color: var(--maz-orange);
}

/* Remove item button */
.woocommerce table.cart td.product-remove a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--maz-beige);
    color: var(--maz-gray-400);
    font-size: 18px;
    font-weight: 400;
    text-decoration: none;
    transition: all var(--maz-transition);
    line-height: 1;
}

.woocommerce table.cart td.product-remove a:hover {
    background-color: var(--maz-red-light);
    color: var(--maz-red);
}

/* Quantity in cart */
.woocommerce table.cart td.product-quantity .quantity {
    display: flex;
    align-items: center;
    width: fit-content;
}

/* JS-created wrapper around minus/input/plus (added via footer script,
   see functions.php — border moves here from .quantity so it wraps the
   whole stepper instead of just the bare number input). */
.woocommerce table.cart td.product-quantity .qty-controls {
    display: flex;
    align-items: center;
    border: 1px solid var(--maz-border);
    border-radius: var(--maz-radius-md);
    overflow: hidden;
    background: var(--maz-white);
}

.woocommerce table.cart td.product-quantity input.qty {
    width: 40px;
    text-align: center;
    border: none;
    font-family: var(--maz-font);
    font-size: var(--maz-font-size-sm);
    font-weight: 600;
    color: var(--maz-dark);
    padding: 8px 0;
    outline: none;
    background: transparent;
    -moz-appearance: textfield;
}

.woocommerce table.cart td.product-quantity input.qty::-webkit-inner-spin-button,
.woocommerce table.cart td.product-quantity input.qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.woocommerce table.cart td.product-quantity .plus,
.woocommerce table.cart td.product-quantity .minus {
    width: 32px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--maz-beige);
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    color: var(--maz-dark);
    transition: background .2s ease, color .2s ease;
    flex-shrink: 0;
    line-height: 1;
    padding: 0;
}

.woocommerce table.cart td.product-quantity .plus:hover,
.woocommerce table.cart td.product-quantity .minus:hover {
    background: var(--maz-orange-light);
    color: var(--maz-orange);
}

/* Price */
.woocommerce table.cart td.product-price,
.woocommerce table.cart td.product-subtotal {
    font-weight: 700;
    color: var(--maz-dark);
}

/* Cart actions row */
.woocommerce .cart-collaterals,
.woocommerce .wc-proceed-to-checkout {
    margin-top: 0;
}

.woocommerce a.checkout-button,
.woocommerce .wc-proceed-to-checkout a.checkout-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 80%;
    margin: 0 auto;
    background-color: var(--maz-orange);
    color: var(--maz-white);
    border: 2px solid var(--maz-orange);
    border-radius: 5px !important;
    font-family: var(--maz-font);
    font-size: var(--maz-font-size-md);
    font-weight: 700;
    padding: 18px 40px;
    text-decoration: none;
    transition: all var(--maz-transition);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.woocommerce a.checkout-button:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
    background-color: var(--maz-orange-hover);
    border-color: var(--maz-orange-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 164, 50, 0.35);
}

/* Coupon section */
.woocommerce .coupon {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.woocommerce .coupon input.input-text {
    font-family: var(--maz-font);
    font-size: var(--maz-font-size-sm);
    border: 1px solid var(--maz-border);
    border-radius: var(--maz-radius-md);
    padding: 10px 16px;
    outline: none;
    transition: border-color var(--maz-transition);
    background: var(--maz-white);
    color: var(--maz-charcoal);
    height: 38px;
}

/* Overrides WooCommerce core's woocommerce-layout.css `td.actions
   .input-text { width: 80px }` — too narrow to show a coupon code
   placeholder. Same selector list (and thus specificity) as core so the
   later cascade position here (checkout.css loads after WC core CSS)
   decides the winner instead of needing !important. */
.woocommerce #content table.cart td.actions .input-text,
.woocommerce table.cart td.actions .input-text,
.woocommerce-page #content table.cart td.actions .input-text,
.woocommerce-page table.cart td.actions .input-text {
    width: 130px;
    height: 38px;
}

.woocommerce .coupon input.input-text:focus {
    border-color: var(--maz-orange);
}

.woocommerce .coupon button[name="apply_coupon"] {
    background-color: transparent;
    color: var(--maz-charcoal);
    border: 2px solid var(--maz-border);
    border-radius: 5px !important;
    font-family: var(--maz-font);
    font-size: var(--maz-font-size-sm);
    font-weight: 600;
    padding: 10px 20px;
    cursor: pointer;
    transition: all var(--maz-transition);
}

.woocommerce .coupon button[name="apply_coupon"]:hover {
    border-color: var(--maz-orange);
    color: var(--maz-orange);
}

/* ============================================================
   CART TOTALS
   ============================================================ */
.woocommerce .cart_totals,
.maz-cart-totals {
    background: var(--maz-white);
    border: 1px solid var(--maz-border);
    border-radius: var(--maz-radius-xl);
    overflow: hidden;
}

.woocommerce .cart_totals h2 {
    font-size: var(--maz-font-size-lg);
    font-weight: 700;
    color: var(--maz-dark);
    padding: var(--maz-space-md);
    border-bottom: 1px solid var(--maz-border);
    margin: 0;
    background-color: var(--maz-white);
}

.woocommerce .cart_totals table {
    width: 100%;
    border-collapse: collapse;
    border: 0;
}

.woocommerce .cart_totals table th,
.woocommerce .cart_totals table td {
    padding: 14px var(--maz-space-md);
    border-bottom: 1px solid var(--maz-border);
    font-size: var(--maz-font-size-sm);
}

.woocommerce .cart_totals table th {
    font-weight: 600;
    color: var(--maz-charcoal);
    width: 40%;
}

.woocommerce .cart_totals table td {
    font-weight: 600;
    color: var(--maz-dark);
    text-align: right;
}

.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td {
    font-size: var(--maz-font-size-lg);
    font-weight: 700;
    border-bottom: none;
}

.woocommerce .cart_totals .order-total td {
    color: var(--maz-orange);
}

/* ============================================================
   CHECKOUT LAYOUT
   ============================================================ */
/* Real DOM: form.checkout (display:contents below) sits directly inside
   this .woocommerce div, so THIS is the true common ancestor of
   #customer_details and #order_review — not #customer_details itself.
   (.maz-checkout-layout doesn't exist in the actual markup; kept as a
   selector in case a future template adds it.) */
.woocommerce-checkout .woocommerce,
.maz-checkout-layout {
    max-width: var(--maz-container);
    margin: 0 auto;
    padding: var(--maz-space-xl) var(--maz-space-md);
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--maz-space-lg);
    align-items: start;
}

/* Explicit row+column placement for every real (non display:none) direct
   child of .woocommerce on the checkout page. This grid has more siblings
   than just #customer_details/#order_review — WooCommerce also renders
   .woocommerce-notices-wrapper (×2, always present even empty) and the
   "Imate kupon?" toggle/form before form.checkout (which is display:contents,
   promoting its own children up to this same grid). Leaving any of them to
   auto-place breaks the #customer_details/#order_review alignment: CSS
   grid's auto-placement cursor only moves forward, so once an empty
   notices-wrapper "uses up" a row in column 1, #order_review_heading and
   #customer_details end up sharing one row (heading auto-placed wherever
   column 2 is next free) — and because #customer_details is tall, that
   shared row becomes tall too, pushing #order_review down into the row
   after it and leaving a large empty gap under the heading. Pinning every
   item to an explicit row avoids that entirely:
     row 1 (col 1 only) — notices wrappers
     row 2 (col 2 only) — "Vaša narudžbina" heading
     row 3              — #customer_details (col 1) + #order_review (col 2),
                           same row so they start at the same top edge
     row 4 (full width) — coupon toggle/form, moved below everything else */
.woocommerce-checkout .woocommerce-notices-wrapper {
    grid-column: 1;
    grid-row: 1;
}

.woocommerce-checkout #order_review_heading {
    grid-column: 2;
    grid-row: 2;
}

.woocommerce-checkout #customer_details {
    grid-column: 1;
    grid-row: 3;
    min-width: 0;
}

.woocommerce-checkout #order_review {
    grid-column: 2;
    grid-row: 3;
    min-width: 0;
}

/* Coupon field hidden site-wide on checkout — !important needed since the
   "Imate kupon?" toggle link normally flips .checkout_coupon's inline
   style="display:none" to "block" via WooCommerce's own JS. */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .checkout_coupon.woocommerce-form-coupon {
    display: none !important;
}

.woocommerce-checkout .checkout .woocommerce-shipping-fields {
    display: none !important;
}

/* ============================================================
   CHECKOUT FORM
   ============================================================ */
.woocommerce form.checkout,
.maz-checkout-form {
    display: contents;
}

/* Overrides WooCommerce core's woocommerce-layout.css `.col2-set .col-1/
   .col-2 { float: left/right; width: 48% }` on desktop too — billing and
   shipping fields stack full-width in #customer_details's single column
   instead of sitting side by side. Same selector list as core so this
   wins on cascade order (checkout.css loads after WC core CSS) without
   needing !important. */
.woocommerce .col2-set .col-1,
.woocommerce-page .col2-set .col-1 {
    float: left;
    width: 100%;
}

.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-2 {
    float: right;
    width: 100%;
}

.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields {
    background: var(--maz-white);
    border: 1px solid var(--maz-border);
    border-radius: var(--maz-radius-xl);
    padding: var(--maz-space-lg);
    margin-bottom: var(--maz-space-md);
}

.woocommerce h3,
.woocommerce-checkout h3 {
    font-size: var(--maz-font-size-lg);
    font-weight: 700;
    color: var(--maz-dark);
    /* margin-bottom: var(--maz-space-md);
    padding-bottom: var(--maz-space-sm);
    border-bottom: 1px solid var(--maz-border); */
    font-size: 25px;
}

/* Form fields */
.woocommerce form .form-row {
    margin-bottom: var(--maz-space-sm);
}

.woocommerce form .form-row label {
    font-family: var(--maz-font);
    font-size: var(--maz-font-size-sm);
    font-weight: 600;
    color: var(--maz-charcoal);
    display: block;
    margin-bottom: 6px;
}

.woocommerce form .form-row label .required {
    color: var(--maz-red);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
    font-family: var(--maz-font);
    font-size: var(--maz-font-size-sm);
    color: var(--maz-charcoal);
    background-color: var(--maz-surface);
    border: 1.5px solid var(--maz-border);
    border-radius: var(--maz-radius-md);
    padding: 12px 16px;
    width: 100%;
    outline: none;
    transition: border-color var(--maz-transition), box-shadow var(--maz-transition);
    line-height: 1.4;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
    border-color: var(--maz-orange);
    box-shadow: 0 0 0 3px rgba(255, 164, 50, 0.15);
    background-color: var(--maz-white);
}

.woocommerce form .form-row input.input-text::placeholder {
    color: var(--maz-gray-300);
}

/* Inline fields (first + last name) */
.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
    display: inline-block;
    width: calc(50% - 8px);
}

.woocommerce form .form-row-first {
    margin-right: 16px;
}

/* ============================================================
   ORDER SUMMARY (right column)
   ============================================================ */
.woocommerce-checkout-review-order,
.maz-order-summary {
    background: var(--maz-white);
    border: 1px solid var(--maz-border);
    border-radius: var(--maz-radius-xl);
    overflow: hidden;
    position: sticky;
    top: 100px;
}

.woocommerce-checkout-review-order h3 {
    background-color: var(--maz-beige);
    margin: 0;
    padding: var(--maz-space-md);
    border-bottom: 1px solid var(--maz-border);
    font-size: var(--maz-font-size-md);
    border-radius: 0;
}

.woocommerce-checkout-review-order-table {
    width: 100%;
    border-collapse: collapse;
    padding: var(--maz-space-md);
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    padding: 10px var(--maz-space-md);
    font-size: var(--maz-font-size-sm);
    border-bottom: 1px solid var(--maz-border);
}

.woocommerce-checkout-review-order-table .cart-subtotal th,
.woocommerce-checkout-review-order-table .cart-subtotal td,
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
    font-weight: 700;
}

.woocommerce-checkout-review-order-table .order-total td {
    color: var(--maz-orange);
    font-size: var(--maz-font-size-lg);
}

/* ============================================================
   PAYMENT METHODS
   ============================================================ */
.woocommerce-checkout #payment {
    padding: var(--maz-space-md);
}

.woocommerce-checkout #payment ul.payment_methods {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--maz-space-md);
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-bottom: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
    border: 1.5px solid var(--maz-border);
    border-radius: var(--maz-radius-md);
    overflow: hidden;
    transition: border-color var(--maz-transition);
}

.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
    border-color: var(--maz-orange);
    background-color: var(--maz-orange-light);
}

.woocommerce-checkout #payment ul.payment_methods li label {
    display: flex;
    align-items: center;
    gap: var(--maz-space-sm);
    padding: var(--maz-space-sm) var(--maz-space-md);
    font-family: var(--maz-font);
    font-size: var(--maz-font-size-sm);
    font-weight: 600;
    color: var(--maz-charcoal);
    cursor: pointer;
}

.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
    accent-color: var(--maz-orange);
    width: 18px;
    height: 18px;
}

/* Payment method description box (e.g. "Placanje gotovinom prilikom
   isporuke") — WC core renders this with a hardcoded gray background and
   a speech-bubble ::before triangle, neither of which exist in the theme
   palette. Blend it into the same orange-light surface as the checked
   li instead of leaving WC's default gray/lavender box floating inside it. */
.woocommerce-checkout #payment ul.payment_methods li .payment_box {
    background-color: var(--maz-orange-light);
    border-top: 1px solid var(--maz-orange-border);
    margin: 0;
    padding: var(--maz-space-sm) var(--maz-space-md) var(--maz-space-md);
    font-family: var(--maz-font);
    font-size: var(--maz-font-size-sm);
    color: var(--maz-charcoal);
    border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods li .payment_box::before {
    display: none;
}

/* Terms & conditions checkbox — unstyled WC core checkbox has no spacing
   from its own label text, so the box edge overlaps the first letter. */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
    margin-right: 8px;
    vertical-align: middle;
    accent-color: var(--maz-orange);
    position: relative;
}

/* Place order button */
.woocommerce-checkout #payment #place_order {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: var(--maz-orange);
    color: var(--maz-white);
    border: 2px solid var(--maz-orange);
    border-radius: 5px !important;
    font-family: var(--maz-font);
    font-size: var(--maz-font-size-md);
    font-weight: 700;
    padding: 18px 40px;
    cursor: pointer;
    transition: all var(--maz-transition);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.woocommerce-checkout #payment #place_order:hover {
    background-color: var(--maz-orange-hover);
    border-color: var(--maz-orange-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 164, 50, 0.35);
}

/* Privacy policy notice */
.woocommerce-checkout .woocommerce-privacy-policy-text {
    font-size: var(--maz-font-size-xs);
    color: var(--maz-gray-400);
    text-align: center;
    margin: var(--maz-space-sm) 0 0;
    text-align: left;
}

/* ============================================================
   ORDER CONFIRMATION (Thank you page)
   ============================================================ */
.woocommerce-order {
    max-width: var(--maz-container-sm);
    margin: 0 auto;
    padding: var(--maz-space-xl) var(--maz-space-md);
    text-align: center;
}

.woocommerce-order .woocommerce-thankyou-order-received {
    font-size: var(--maz-font-size-3xl);
    font-weight: 800;
    color: var(--maz-dark);
    margin-bottom: var(--maz-space-sm);
}

.woocommerce-order ul.order_details {
    display: flex;
    gap: var(--maz-space-md);
    justify-content: center;
    list-style: none;
    padding: var(--maz-space-md);
    margin: var(--maz-space-md) 0;
    background: var(--maz-beige);
    border-radius: var(--maz-radius-xl);
    flex-wrap: wrap;
}

.woocommerce-order ul.order_details li {
    font-size: var(--maz-font-size-sm);
    color: var(--maz-gray-500);
    font-weight: 500;
}

.woocommerce-order ul.order_details li strong {
    display: block;
    font-size: var(--maz-font-size-lg);
    font-weight: 700;
    color: var(--maz-dark);
    margin-top: 4px;
}

/* ============================================================
   CHECKOUT RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {

    .woocommerce-checkout .woocommerce,
    .maz-checkout-layout {
        grid-template-columns: 1fr 340px;
    }

    .woocommerce-cart .woocommerce {
        grid-template-columns: 1fr 340px;
    }

    /* At this width the cart table's natural content (~550-570px for
       product/price/qty/total columns) is wider than the 1fr column next
       to the 340px totals box — table.shop_table's own `overflow:hidden`
       (used elsewhere to clip content to its rounded corners) was clipping
       the excess instead of scrolling it, cutting off the qty/total
       columns entirely. Same overflow-x:auto treatment as the mobile
       breakpoint below, just starting earlier. */
    .woocommerce table.shop_table {
        display: block;
        overflow-x: auto;
        width: 100%;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
        /* Scrolling here has no scrollbar or other hint that columns
           continue off-screen (confirmed via user testing — the table
           reads as "cut off" rather than "scrollable"). A persistent fade
           at the right edge signals there's more without needing JS to
           detect actual overflow: background-attachment's default value
           keeps it pinned to the table's own scrollport instead of
           scrolling away with the content inside. */
        /* background-image: linear-gradient(to left, rgba(31, 31, 31, .12), rgba(31, 31, 31, 0) 28px); */
        background-repeat: no-repeat;
        background-position: right center;
        background-size: 28px 100%;
    }

    /* Same WC core 48%/48% .col-1/.col-2 collision as the 768px fix below —
       at this breakpoint #customer_details is only ~280-300px wide (1fr
       column next to the 340px order summary), so the floated halves
       collapse form fields to unusable widths. Stack them full-width here
       too, same as mobile. */
    .woocommerce-checkout .col2-set .col-1,
    .woocommerce-checkout .col2-set .col-2 {
        float: none;
        width: 100%;
    }
}

@media (max-width: 768px) {

    .woocommerce-checkout .woocommerce,
    .maz-checkout-layout {
        grid-template-columns: 1fr;
    }

    /* Single column now, so re-order into natural reading order: fill in
       details first, then review the order (row numbers from the desktop
       3-row layout above would otherwise put the "Vaša narudžbina" heading
       before the billing form). */
    .woocommerce-checkout #customer_details {
        grid-column: 1;
        grid-row: 2;
    }

    .woocommerce-checkout #order_review_heading {
        grid-column: 1;
        grid-row: 3;
    }

    .woocommerce-checkout #order_review {
        grid-column: 1;
        grid-row: 4;
    }

    .woocommerce-checkout-review-order {
        position: static;
    }

    .woocommerce-cart .woocommerce {
        grid-template-columns: 1fr;
        padding: 0;
    }

    .woocommerce-cart .woocommerce .cart-collaterals {
        margin-bottom: 5rem;
    }

    .woocommerce-checkout .woocommerce {
        padding: 0;
        padding-bottom: 5rem;
        gap: 10px;
    }

    .woocommerce form .form-row.place-order {
        padding: 0;
    }

    .woocommerce-cart .woocommerce-cart-form,
    .woocommerce-cart .cart-collaterals,
    .woocommerce-cart .cart_totals {
        grid-column: 1;
    }

    .maz-checkout-header__title {
        font-size: 35px;
    }

    .woocommerce-cart .cart_totals {
        position: static;
        padding: 10px;
    }

    .woocommerce-cart .cart_totals .wc-proceed-to-checkout {
        padding-bottom: 4rem;
    }

    .woocommerce-cart .woocommerce .coupon {
        width: 100%;
        justify-content: space-between;
            flex-wrap: nowrap;
    }

    .woocommerce-cart .woocommerce .coupon #coupon_code {
        width: 48%;
    }

    .woocommerce-cart .woocommerce .coupon .button {
        width: 48%;
    }

    .woocommerce-billing-fields,
    .woocommerce-shipping-fields,
    .woocommerce-additional-fields {
        padding: 30px 15px 30px 15px;
    }

    .woocommerce-checkout .checkout .col-2 h3#ship-to-different-address .woocommerce-form__input-checkbox {
        position: relative;
        margin-left: 0;
        margin-right: 10px;
    }

    .woocommerce-checkout .checkout .woocommerce-additional-fields .woocommerce-additional-fields__field-wrapper label {
        font-size: 18px;
    }

    .woocommerce table.shop_table {
        display: block;
        overflow-x: auto;
        /* Without a width cap, a block-level table sizes itself to its
           content (its columns need ~550px) instead of respecting the
           viewport — the overflow then escapes to the whole page instead
           of scrolling inside the table. width:100% forces the table's
           own box to the available width so overflow-x:auto has something
           to actually scroll. */
        width: 100%;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
        border: none;
    }

    .woocommerce table.shop_table thead td,
    .woocommerce table.shop_table thead th {
        padding: 10px;
    }

    .woocommerce table.shop_table tbody td {
        padding: 10px;
        border: none;

    }

    .woocommerce table.shop_table tbody th {
        padding: 10px;
        border: none;
    }

    .woocommerce table.shop_table tfoot td,
    .woocommerce table.shop_table tfoot th {
        padding: 10px;
        border: none;

    }


    .woocommerce-checkout h3 .woocommerce-form__label {
        font-size: 18px;
    }

    /* ============================================================
       CART ITEMS — cards instead of a scrollable table on mobile.
       Scoped to table.shop_table.cart specifically (the cart page's own
       extra class) so this doesn't touch the my-account orders table or
       the checkout review-order table, which share the generic
       .woocommerce table.shop_table rule above and keep the
       horizontal-scroll treatment. Higher specificity here (3 classes vs
       2) wins over the generic block/overflow-x rule without needing
       !important.
       ============================================================ */
    .woocommerce-cart table.shop_table.cart {
        display: block;
        overflow-x: visible;
        border: none;
        background: none;
    }

    .woocommerce-cart table.shop_table.cart thead {
        display: none;
    }

    .woocommerce-cart table.shop_table.cart tbody {
        display: block;
    }

    .woocommerce-cart table.shop_table.cart tr.cart_item {
        display: grid;
        grid-template-columns: 72px 1fr auto;
        grid-template-areas:
            "thumb name   remove"
            "thumb price  price"
            "thumb qty    subtotal";
        column-gap: var(--maz-space-md);
        row-gap: 6px;
        align-items: center;
        background: var(--maz-white);
        border: 1px solid var(--maz-border);
        border-radius: var(--maz-radius-lg);
        padding: var(--maz-space-md);
        margin-bottom: var(--maz-space-md);
    }

    .woocommerce-cart table.shop_table.cart tr.cart_item:last-child {
        margin-bottom: 0;
    }

    .woocommerce-cart table.shop_table.cart td {
        display: block;
        padding: 0;
        border: none;
    }

    .woocommerce-cart table.shop_table.cart .product-thumbnail {
        grid-area: thumb;
        align-self: start;
    }

    .woocommerce-cart table.shop_table.cart .product-thumbnail img {
        width: 100%;
        height: auto;
        border-radius: var(--maz-radius-md);
        background: var(--maz-beige);
    }

    .woocommerce-cart table.shop_table.cart .product-name {
        grid-area: name;
        font-family: var(--maz-font);
        font-weight: 600;
        color: var(--maz-dark);
        align-self: start;
    }

    .woocommerce-cart table.shop_table.cart .product-name a {
        color: var(--maz-dark);
        text-decoration: none;
    }

    .woocommerce-cart table.shop_table.cart .product-remove {
        grid-area: remove;
        justify-self: end;
        align-self: start;
    }

    .woocommerce-cart table.shop_table.cart .product-remove a.remove {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--maz-beige);
        color: var(--maz-gray-400) !important;
        font-size: 15px;
    }

    /* Mini uppercase label (from the cell's own data-title attribute,
       already output by the WooCommerce cart template for this exact
       responsive-table purpose) in front of price/qty/subtotal — with
       the <thead> hidden there's otherwise no indication of which
       number is the unit price vs. the line total. */
    /* Label stacked ABOVE the value (not beside it) — with three cells
       ("Cena" / "Količina" / "Ukupno") sharing the row's two remaining
       grid columns after the 72px thumbnail, there isn't room for
       "KOLIČINA" next to a 56px input on the same line; that combination
       was overflowing its column and overlapping the subtotal cell next
       to it. Stacking means each cell only needs to be as wide as the
       WIDER of its label or its value, not their sum. */
    .woocommerce-cart table.shop_table.cart .product-price,
    .woocommerce-cart table.shop_table.cart .product-quantity,
    .woocommerce-cart table.shop_table.cart .product-subtotal {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
    }

    .woocommerce-cart table.shop_table.cart .product-price::before,
    .woocommerce-cart table.shop_table.cart .product-quantity::before,
    .woocommerce-cart table.shop_table.cart .product-subtotal::before {
        content: attr(data-title);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--maz-gray-400);
        font-weight: 600;
    }

    .woocommerce-cart table.shop_table.cart .product-price {
        grid-area: price;
        font-size: var(--maz-font-size-sm);
        color: var(--maz-gray-500);
    }

    .woocommerce-cart table.shop_table.cart .product-quantity {
        grid-area: qty;
    }

    .woocommerce-cart table.shop_table.cart .product-quantity .quantity {
        display: inline-flex;
    }

    .woocommerce-cart table.shop_table.cart .product-quantity .qty-controls {
        border: 1.5px solid var(--maz-border);
        border-radius: var(--maz-radius-md);
    }

    .woocommerce-cart table.shop_table.cart .product-quantity input.qty {
        width: 40px;
        padding: 8px 0;
        border: none;
        font-family: var(--maz-font);
        text-align: center;
        background: var(--maz-surface);
    }

    .woocommerce-cart table.shop_table.cart .product-quantity .plus,
    .woocommerce-cart table.shop_table.cart .product-quantity .minus {
        width: 28px;
        height: 32px;
        font-size: 14px;
    }

    .woocommerce-cart table.shop_table.cart .product-subtotal {
        grid-area: subtotal;
        justify-self: end;
        font-weight: 700;
        color: var(--maz-dark);
    }

    .woocommerce form .form-row-first,
    .woocommerce form .form-row-last {
        width: 100%;
        display: block;
    }

    .woocommerce form .form-row-first {
        margin-right: 0;
    }

    /* WC core floats .col-1 (billing) / .col-2 (shipping toggle) at 48%
       each inside #customer_details — stack them full-width on mobile. */
    .woocommerce-checkout .col2-set .col-1,
    .woocommerce-checkout .col2-set .col-2 {
        float: none;
        width: 100%;
    }
}


@media (min-width: 768px) {
    .woocommerce-checkout .woocommerce {
        padding-top: 3rem;
    }

    .woocommerce-checkout .woocommerce #order_review_heading {
        position: absolute;
        font-size: 45px;
    }

    .woocommerce-checkout .woocommerce .woocommerce-NoticeGroup-checkout {
        position: fixed;
        right: 20px;
        max-width: 40%;
        z-index: 9;
    }
}