/*
 * ZS Checkout Brand: classic cart + checkout styled to the ZE SPOKOJEM brand.
 * Palette and radii mirror the client's landing components (nav CTA, hero):
 * ink #080C14, copper #C8965A (hover #E8B878), white surfaces, 10px cards,
 * 40px pill buttons. Loaded only on the cart and checkout pages.
 */

body.woocommerce-cart,
body.woocommerce-checkout {
    --zs-ink: #080C14;
    --zs-paper: #FFFFFF;
    --zs-mist: #FAF8F5;
    --zs-copper: #C8965A;
    --zs-copper-bright: #E8B878;
    /* Second stop of the landing's .btn-gold gradient (--gold-bright there);
       lifted verbatim so the cart buttons match the hero CTA. */
    --zs-gold-bright: #E0B87E;
    --zs-copper-deep: #8A6531;
    --zs-line: rgba(8, 12, 20, 0.10);
    --zs-radius-card: 10px;
    --zs-radius-pill: 40px;
    background: var(--zs-paper);
    color: var(--zs-ink);
}

/* ---- Wordmark bar: the only navigation on cart/checkout ----------------- */

.zs-wordmark-bar {
    background: var(--zs-ink, #080C14);
    padding: 18px 20px;
}

/* 1080px = the .woocommerce container (1120px) minus its 20px side padding,
   so the wordmark's left edge lines up with the cart table below it. */
.zs-wordmark-bar a {
    display: block;
    max-width: 1080px;
    margin: 0 auto;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-decoration: none;
}

/* The Customizer workaround layer adds padding-top:100px to .post-47 for a
   fixed header that no longer renders here; the wordmark bar is static. */
body.woocommerce-cart #page .post-47 {
    padding-top: 24px;
}

/* ---- Cart heading + trust bar: the client's block-cart originals -------- */
/* Values lifted from his Customizer rules (2026-06-05): serif heading like
   the thank-you page, quiet grey reassurance line under the checkout CTA. */

.zs-cart-heading {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 34px;
    font-weight: 600;
    color: #1a1a1a;
    text-align: center;
    margin: 8px 0 22px;
}

.zs-trust-bar {
    font-size: 12px;
    color: #6b6b6b;
    text-align: center;
    margin-top: 14px;
}

/* His original stepped the heading down at this exact width. */
@media (max-width: 768px) {
    .zs-cart-heading {
        font-size: 28px;
    }
}

/* ---- Page container: the theme's content area is full-bleed ------------- */

body.woocommerce-cart .woocommerce,
body.woocommerce-checkout .woocommerce {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
}

body.woocommerce-cart .woocommerce td.actions .coupon input#coupon_code {
    min-width: 220px;
}

/* ---- Section headings: the landing "eyebrow" carried over --------------- */

body.woocommerce-cart .woocommerce h2,
body.woocommerce-checkout .woocommerce h3,
body.woocommerce-checkout #order_review_heading {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--zs-ink);
    margin: 32px 0 16px;
}

body.woocommerce-cart .woocommerce h2::before,
body.woocommerce-checkout .woocommerce h3::before,
body.woocommerce-checkout #order_review_heading::before {
    content: "\2022\00a0\00a0";
    color: var(--zs-copper);
}

/* ---- Buttons: gold pills, like the landing CTA -------------------------- */

body.woocommerce-cart .woocommerce a.button,
body.woocommerce-cart .woocommerce button.button,
body.woocommerce-checkout .woocommerce #place_order {
    /* Same 135deg gradient as the landing's .btn-gold, so the cart CTA and
       the hero CTA read as one component. */
    background: linear-gradient(135deg, var(--zs-copper), var(--zs-gold-bright));
    color: var(--zs-ink);
    border: none;
    border-radius: var(--zs-radius-pill);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 13px 26px;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

/* Landing hover = lift + copper glow, gradient unchanged; kept gentler here
   (checkout is a form, not a hero). */
body.woocommerce-cart .woocommerce a.button:hover,
body.woocommerce-cart .woocommerce button.button:hover,
body.woocommerce-checkout .woocommerce #place_order:hover {
    background: linear-gradient(135deg, var(--zs-copper), var(--zs-gold-bright));
    color: var(--zs-ink);
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(200, 150, 90, 0.45);
}

body.woocommerce-cart .woocommerce button.button:disabled,
body.woocommerce-cart .woocommerce button.button:disabled[disabled] {
    background: var(--zs-mist);
    color: rgba(8, 12, 20, 0.45);
    padding: 13px 26px;
}

body.woocommerce-cart .woocommerce a.checkout-button,
body.woocommerce-checkout .woocommerce #place_order {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 15px;
    padding: 16px 28px;
}

/* ---- Cards: cart table, totals, order review, payment ------------------- */

body.woocommerce-cart .woocommerce table.shop_table,
body.woocommerce-checkout .woocommerce table.shop_table,
body.woocommerce-checkout #payment {
    border: 1px solid var(--zs-line);
    border-radius: var(--zs-radius-card);
    background: var(--zs-paper);
}

body.woocommerce-cart .woocommerce table.shop_table th,
body.woocommerce-cart .woocommerce table.shop_table td,
body.woocommerce-checkout .woocommerce table.shop_table th,
body.woocommerce-checkout .woocommerce table.shop_table td {
    border-color: var(--zs-line);
    padding: 14px 16px;
    background: transparent;
}

body.woocommerce-cart .woocommerce table.shop_table thead th {
    background: var(--zs-mist);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.woocommerce-cart .woocommerce td.product-name a {
    color: var(--zs-ink);
    font-weight: 600;
    text-decoration: none;
}

/* The theme kit paints bare links pink; the shipping-calculator toggle is the
   one visible in the totals card. */
body.woocommerce-cart .woocommerce a.shipping-calculator-button {
    color: var(--zs-copper-deep);
    font-weight: 600;
}

body.woocommerce-cart .woocommerce a.remove {
    width: 30px;
    height: 30px;
    line-height: 26px;
    border: 1px solid var(--zs-line);
    border-radius: 50%;
    color: var(--zs-ink) !important;
    background: var(--zs-paper);
    font-weight: 400;
}

body.woocommerce-cart .woocommerce a.remove:hover {
    background: var(--zs-copper);
    border-color: var(--zs-copper);
    color: var(--zs-ink) !important;
}

/* ---- Forms: inputs, selects, labels ------------------------------------- */

body.woocommerce-cart .woocommerce input.input-text,
body.woocommerce-cart .woocommerce input#coupon_code,
body.woocommerce-checkout .woocommerce input.input-text,
body.woocommerce-checkout .woocommerce select,
body.woocommerce-checkout .woocommerce textarea {
    font-family: inherit;
    font-size: 15px;
    color: var(--zs-ink);
    background: var(--zs-paper);
    border: 1px solid rgba(8, 12, 20, 0.22);
    border-radius: var(--zs-radius-card);
    padding: 12px 14px;
}

body.woocommerce-cart .woocommerce input.input-text:focus,
body.woocommerce-cart .woocommerce input#coupon_code:focus,
body.woocommerce-checkout .woocommerce input.input-text:focus,
body.woocommerce-checkout .woocommerce select:focus,
body.woocommerce-checkout .woocommerce textarea:focus {
    outline: none;
    border-color: var(--zs-copper);
    box-shadow: 0 0 0 3px rgba(200, 150, 90, 0.20);
}

body.woocommerce-checkout .woocommerce form .form-row label {
    font-size: 13px;
    font-weight: 600;
    color: var(--zs-ink);
}

body.woocommerce-checkout .woocommerce form .form-row .required {
    color: var(--zs-copper-deep);
    text-decoration: none;
}

/* ---- Quantity input on the cart ----------------------------------------- */

body.woocommerce-cart .woocommerce .quantity .qty {
    font-family: inherit;
    font-size: 15px;
    border: 1px solid rgba(8, 12, 20, 0.22);
    border-radius: var(--zs-radius-card);
    padding: 10px 6px;
}

/* ---- Notices: coupon toggle, messages ----------------------------------- */

body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
    border-top: none;
    border: 1px solid var(--zs-line);
    border-left: 3px solid var(--zs-copper);
    border-radius: var(--zs-radius-card);
    background: var(--zs-mist);
    color: var(--zs-ink);
}

body.woocommerce-cart .woocommerce-message::before,
body.woocommerce-cart .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-message::before,
body.woocommerce-checkout .woocommerce-info::before {
    color: var(--zs-copper);
}

body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a,
body.woocommerce-cart .woocommerce-info a,
body.woocommerce-checkout .woocommerce-privacy-policy-text a {
    color: var(--zs-copper-deep);
    font-weight: 600;
}

/* ---- Checkout payment section ------------------------------------------- */

body.woocommerce-checkout #payment {
    background: var(--zs-paper);
}

body.woocommerce-checkout #payment ul.payment_methods {
    border-bottom: 1px solid var(--zs-line);
    padding: 16px;
}

body.woocommerce-checkout #payment div.payment_box {
    background: var(--zs-mist);
    border-radius: var(--zs-radius-card);
    color: var(--zs-ink);
}

body.woocommerce-checkout #payment div.payment_box::before {
    display: none;
}

body.woocommerce-checkout .woocommerce-privacy-policy-text p {
    font-size: 13px;
    color: rgba(8, 12, 20, 0.65);
}

/* ---- Empty cart: centered, calm, one way forward ------------------------ */

body.woocommerce-cart .woocommerce .cart-empty.woocommerce-info {
    background: none;
    border: none;
    padding: 110px 20px 12px;
    margin: 0;
    text-align: center;
    font-size: 21px;
    font-weight: 600;
    color: var(--zs-ink);
}

body.woocommerce-cart .woocommerce .cart-empty.woocommerce-info::before {
    display: none;
}

body.woocommerce-cart .woocommerce .return-to-shop {
    text-align: center;
    margin: 0;
    padding: 8px 20px 130px;
}

body.woocommerce-cart .woocommerce-message a,
body.woocommerce-checkout .woocommerce-message a {
    color: var(--zs-copper-deep);
    font-weight: 600;
}

/* ---- Order totals emphasis ---------------------------------------------- */

body.woocommerce-cart .cart_totals .order-total td,
body.woocommerce-cart .cart_totals .order-total th,
body.woocommerce-checkout .woocommerce table.shop_table tfoot .order-total th,
body.woocommerce-checkout .woocommerce table.shop_table tfoot .order-total td {
    font-size: 17px;
    font-weight: 700;
}

/* ---- Mobile ------------------------------------------------------------- */

@media (max-width: 560px) {
    body.woocommerce-cart .woocommerce table.shop_table td,
    body.woocommerce-checkout .woocommerce table.shop_table td {
        padding: 12px 14px;
    }

    body.woocommerce-cart .woocommerce a.checkout-button {
        font-size: 14px;
    }

    /* WooCommerce's smallscreen sheet targets these through #content, so the
       ID has to appear here too or its 48% split wins the cascade. */
    body.woocommerce-cart #content table.cart td.actions .coupon input#coupon_code,
    body.woocommerce-cart #content table.cart td.actions .coupon button.button {
        float: none;
        display: block;
        width: 100%;
        margin: 0 0 10px;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.woocommerce-cart .woocommerce a.button,
    body.woocommerce-cart .woocommerce button.button,
    body.woocommerce-checkout .woocommerce #place_order,
    body.woocommerce-cart .woocommerce a.button:hover,
    body.woocommerce-cart .woocommerce button.button:hover,
    body.woocommerce-checkout .woocommerce #place_order:hover {
        transition: none;
        transform: none;
    }
}

/* ---- Order-received: one consolidated details block ---------------------- */
/*
 * WooCommerce splits the thank-you page into a top overview strip (order no.,
 * date, email, total, payment) AND a details table that repeats the total and
 * payment method. The client asked for one block, so the strip is hidden and
 * its only unique fields, the order number and date, are re-added above the
 * details table by render_order_meta_line() in the plugin. Email stays in the
 * customer address block; total, shipping and payment stay in the table.
 */
body.woocommerce-order-received .woocommerce-order-overview {
    display: none;
}

body.woocommerce-order-received .zs-order-meta {
    margin: 0 0 22px;
    font-size: 14px;
    color: #6b6b6b;
}

body.woocommerce-order-received .zs-order-meta strong {
    color: var(--zs-ink, #080C14);
    font-weight: 600;
}

/* ---- Cart layout v2: item cards + side summary panel --------------------- */
/*
 * The old block cart (React) read as cards with big covers, +/- steppers and
 * a side summary; this rebuilds the same reading on the classic markup with
 * CSS + zs-cart.js only. :has() gates the grid so the empty-cart page keeps
 * its centered single-column flow (and older browsers simply fall back to the
 * stacked layout).
 */

body.woocommerce-cart .woocommerce:has(form.woocommerce-cart-form) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    column-gap: 44px;
    align-items: start;
}

body.woocommerce-cart .woocommerce:has(form.woocommerce-cart-form) > .woocommerce-notices-wrapper,
body.woocommerce-cart .woocommerce:has(form.woocommerce-cart-form) > .zs-cart-heading {
    grid-column: 1 / -1;
}

body.woocommerce-cart .woocommerce form.woocommerce-cart-form {
    grid-column: 1;
    min-width: 0;
}

body.woocommerce-cart .woocommerce .cart-collaterals {
    grid-column: 2;
    position: sticky;
    top: 24px;
}

/* ---- Items: borderless cards instead of the bordered table --------------- */

body.woocommerce-cart .woocommerce table.shop_table.cart {
    display: block;
    border: none;
    border-radius: 0;
}

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

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

body.woocommerce-cart .woocommerce table.shop_table.cart tr.cart_item {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr) auto;
    column-gap: 20px;
    row-gap: 6px;
    padding: 22px 0;
    border-bottom: 1px solid var(--zs-line);
}

body.woocommerce-cart .woocommerce table.shop_table.cart tr.cart_item td {
    display: block;
    border: none;
    padding: 0;
    background: transparent;
}

/* Woo's smallscreen sheet prints data-title labels into every cell. */
body.woocommerce-cart .woocommerce table.shop_table.cart tr.cart_item td::before {
    display: none;
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-thumbnail {
    grid-row: 1 / 4;
    grid-column: 1;
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-thumbnail img {
    display: block;
    width: 140px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(8, 12, 20, 0.14);
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-name {
    grid-row: 1;
    grid-column: 2;
    font-size: 17px;
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-subtotal {
    grid-row: 1;
    grid-column: 3;
    justify-self: end;
    font-size: 17px;
    font-weight: 700;
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-price {
    grid-row: 2;
    grid-column: 2;
    font-size: 14px;
    color: var(--zs-copper-deep);
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-quantity {
    grid-row: 3;
    grid-column: 2;
    align-self: center;
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-remove {
    grid-row: 3;
    grid-column: 3;
    justify-self: end;
    align-self: center;
}

/* ---- Remove: trash glyph in the existing circle -------------------------- */

body.woocommerce-cart .woocommerce table.shop_table.cart a.remove {
    font-size: 0;
    background: var(--zs-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23080C14' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/%3E%3Cpath d='M6.5 7l1 13h9l1-13'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
}

body.woocommerce-cart .woocommerce table.shop_table.cart a.remove:hover {
    background: var(--zs-mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23080C14' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/%3E%3Cpath d='M6.5 7l1 13h9l1-13'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
    border-color: rgba(8, 12, 20, 0.35);
}

/* ---- Quantity stepper (zs-cart.js wraps the input) ----------------------- */

body.woocommerce-cart .woocommerce .quantity.zs-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(8, 12, 20, 0.22);
    border-radius: var(--zs-radius-card);
    background: var(--zs-paper);
    overflow: hidden;
}

body.woocommerce-cart .woocommerce .quantity.zs-qty:focus-within {
    border-color: var(--zs-copper);
    box-shadow: 0 0 0 3px rgba(200, 150, 90, 0.20);
}

body.woocommerce-cart .woocommerce .quantity.zs-qty .qty {
    border: none;
    border-radius: 0;
    width: 52px;
    padding: 10px 0;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}

body.woocommerce-cart .woocommerce .quantity.zs-qty .qty:focus {
    outline: none;
    box-shadow: none;
}

body.woocommerce-cart .woocommerce .quantity.zs-qty .qty::-webkit-outer-spin-button,
body.woocommerce-cart .woocommerce .quantity.zs-qty .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

body.woocommerce-cart .woocommerce .zs-qty-step {
    width: 38px;
    padding: 10px 0;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    color: var(--zs-ink);
    cursor: pointer;
}

body.woocommerce-cart .woocommerce .zs-qty-step:hover {
    background: var(--zs-mist);
}

/* ---- Actions row: quiet coupon reveal, update button handled by JS ------- */

body.woocommerce-cart .woocommerce table.shop_table.cart tr:not(.cart_item) {
    display: block;
}

/* Woo's legacy `#content table.cart td.actions` rules out-rank any class
   selector, so the row stays right-aligned, which happens to sit the coupon
   toggle next to the summary panel; kept on purpose. */
body.woocommerce-cart .woocommerce table.shop_table.cart td.actions {
    display: block;
    border: none;
    padding: 18px 0 0;
}

/* Hidden only when zs-cart.js runs: without JS the classic coupon fields and
   update button stay visible and the cart remains fully usable. */
body.woocommerce-cart form.woocommerce-cart-form.zs-enhanced td.actions .coupon {
    display: none;
}

body.woocommerce-cart form.woocommerce-cart-form.zs-enhanced td.actions.zs-coupon-open .coupon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

body.woocommerce-cart form.woocommerce-cart-form.zs-enhanced td.actions > button.button[name="update_cart"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
}

body.woocommerce-cart .woocommerce .zs-coupon-toggle {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--zs-copper-deep);
    cursor: pointer;
}

body.woocommerce-cart .woocommerce .zs-coupon-toggle:hover {
    text-decoration: underline;
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.actions button.button[name="apply_coupon"] {
    background: var(--zs-paper);
    border: 1px solid rgba(8, 12, 20, 0.35);
    color: var(--zs-ink);
    box-shadow: none;
}

/* ---- Summary panel: one card, rows as hairlines -------------------------- */

body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals {
    float: none;
    width: 100%;
    border: 1px solid var(--zs-line);
    border-radius: var(--zs-radius-card);
    background: var(--zs-paper);
    padding: 24px;
    box-shadow: 0 14px 40px rgba(8, 12, 20, 0.06);
}

body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals h2 {
    margin: 0 0 10px;
}

/* The panel drops table layout entirely: a display:block tr inside a live
   table shrink-wraps to its content, so rows become flex lines instead:
   label left, value right, hairline separators carried by the rows. */
body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals table.shop_table {
    display: block;
    border: none;
    margin: 0;
}

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

body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals table.shop_table tr {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--zs-line);
    padding: 13px 0;
}

body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals table.shop_table tr:first-child {
    border-top: none;
}

body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals table.shop_table th,
body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals table.shop_table td {
    display: block;
    border: none;
    background: none;
    padding: 0;
    font-size: 14px;
}

/* width:auto beats Woo's legacy percentage th width, which squeezed
   "Zapakuj na prezent" into a two-line label. */
body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals table.shop_table th {
    text-align: left;
    font-weight: 500;
    color: rgba(8, 12, 20, 0.75);
    width: auto;
}

body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals table.shop_table td {
    text-align: right;
}

body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals table.shop_table td::before {
    display: none;
}

body.woocommerce-cart .woocommerce .cart_totals ul#shipping_method {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.woocommerce-cart .woocommerce .cart_totals ul#shipping_method li {
    margin: 0 0 8px;
}

body.woocommerce-cart .woocommerce .cart_totals .woocommerce-shipping-destination {
    font-size: 12.5px;
    color: #6b6b6b;
}

body.woocommerce-cart .woocommerce .cart_totals .order-total th {
    font-size: 15px;
    font-weight: 700;
    color: var(--zs-ink);
}

body.woocommerce-cart .woocommerce .cart_totals .order-total td {
    font-size: 18px;
    font-weight: 700;
}

body.woocommerce-cart .woocommerce .cart_totals .order-total td .includes_tax {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #6b6b6b;
}

body.woocommerce-cart .woocommerce .cart_totals .wc-proceed-to-checkout {
    margin: 0;
    padding: 18px 0 0;
}

/* ---- Summary panel: shipping methods as clean rows ----------------------- */
/*
 * The InPost plugin appends its yellow logo <img> after each method label;
 * inside a 330px panel they landed centered under the text and the price
 * wrapped to its own line. The old block cart showed no carrier logos in the
 * summary, so they are hidden here and each method becomes one flex line:
 * radio + name left, price right.
 */

body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals table.shop_table tr.woocommerce-shipping-totals {
    display: block;
}

body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals table.shop_table tr.woocommerce-shipping-totals th,
body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals table.shop_table tr.woocommerce-shipping-totals td {
    display: block;
    width: 100%;
    text-align: left;
}

body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals table.shop_table tr.woocommerce-shipping-totals th {
    padding: 13px 0 8px;
}

body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals table.shop_table tr.woocommerce-shipping-totals td {
    padding: 0 0 13px;
}

body.woocommerce-cart .woocommerce .cart_totals ul#shipping_method li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
}

body.woocommerce-cart .woocommerce .cart_totals ul#shipping_method li input[type="radio"] {
    margin: 0;
    flex: none;
    accent-color: var(--zs-copper-deep);
}

/* zs-cart.js moves the carrier logo INTO the label, so one flex line reads
   radio, name, logo, price. margin-left:auto docks the price instead of
   space-between, which would strand the logo mid-row. */
body.woocommerce-cart .woocommerce .cart_totals ul#shipping_method li label {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin: 0;
    font-size: 14px;
}

body.woocommerce-cart .woocommerce .cart_totals ul#shipping_method li label .woocommerce-Price-amount {
    margin-left: auto;
}

body.woocommerce-cart .woocommerce .cart_totals ul#shipping_method .inpost_pl-shipping-method-meta-wrap img {
    display: block;
    height: 20px;
    width: auto;
    border-radius: 4px;
}

/* The carrier gets picked once, at the checkout: the cart hides the native
   radio row and shows the zs-shipping-summary row rendered by the plugin.
   Adjacent-sibling on purpose: with no rates the summary is not rendered,
   and the native row must stay visible to explain why. */
body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals table.shop_table tr.zs-shipping-summary + tr.woocommerce-shipping-totals {
    display: none;
}

body.woocommerce-cart .woocommerce .cart_totals .zs-shipping-note {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #6b6b6b;
}

body.woocommerce-cart .woocommerce .cart_totals .woocommerce-shipping-destination,
body.woocommerce-cart .woocommerce .cart_totals p.woocommerce-shipping-contents {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: #6b6b6b;
    text-align: left;
}

/* ---- Checkout: shipping methods as one flex line (mirrors the cart) ------ */

body.woocommerce-checkout table.woocommerce-checkout-review-order-table ul#shipping_method {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table ul#shipping_method li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table ul#shipping_method li input[type="radio"] {
    margin: 0;
    flex: none;
    accent-color: var(--zs-copper-deep);
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table ul#shipping_method li label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table ul#shipping_method li label .woocommerce-Price-amount {
    margin-left: auto;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table ul#shipping_method .inpost_pl-shipping-method-meta-wrap img {
    display: block;
    height: 20px;
    width: auto;
    border-radius: 4px;
}

/* ---- Checkout: quiet route back to the cart ------------------------------ */

body.woocommerce-checkout .woocommerce .zs-back-to-cart {
    margin: -4px 0 14px;
    font-size: 13px;
}

body.woocommerce-checkout .woocommerce .zs-back-to-cart a {
    color: var(--zs-copper-deep);
    font-weight: 600;
    text-decoration: none;
}

body.woocommerce-checkout .woocommerce .zs-back-to-cart a:hover {
    text-decoration: underline;
}

/* ---- Cart v2: narrow screens --------------------------------------------- */

@media (max-width: 920px) {
    body.woocommerce-cart .woocommerce:has(form.woocommerce-cart-form) {
        display: block;
    }

    body.woocommerce-cart .woocommerce .cart-collaterals {
        position: static;
        margin-top: 30px;
    }

    body.woocommerce-cart .woocommerce table.shop_table.cart tr.cart_item {
        grid-template-columns: 96px minmax(0, 1fr) auto;
        column-gap: 14px;
    }

    /* Smallscreen sheets hide the thumbnail cell and force text right with
       !important; the card grid needs both back. */
    body.woocommerce-cart .woocommerce table.shop_table.cart tr.cart_item td.product-thumbnail {
        display: block !important;
    }

    body.woocommerce-cart .woocommerce table.shop_table.cart tr.cart_item td {
        text-align: left !important;
    }

    body.woocommerce-cart .woocommerce table.shop_table.cart tr.cart_item td.product-subtotal {
        text-align: right !important;
    }

    body.woocommerce-cart .woocommerce table.shop_table.cart td.product-thumbnail img {
        width: 96px;
    }

    body.woocommerce-cart .woocommerce table.shop_table.cart td.product-name {
        font-size: 15px;
    }

    body.woocommerce-cart .woocommerce table.shop_table.cart td.product-subtotal {
        font-size: 15px;
    }

    body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals {
        padding: 20px 18px;
    }
}