/*====================================================
=     WOOCOMMERCE — CART & CHECKOUT (BLOCKS VERSION) =
=     This site renders /cart/ and /checkout/ using   =
=     the WooCommerce Cart & Checkout BLOCKS (React), =
=     not the classic shortcode template. Confirmed   =
=     from page source: <div data-block-name=         =
=     "woocommerce/cart" class="wp-block-woocommerce-  =
=     cart ...">. Classic selectors like               =
=     table.shop_table / .cart_totals / .checkout-     =
=     button never match this markup — hence the       =
=     earlier CSS having no visible effect.             =
=     Uses the same tokens as main.css:                =
=     --primary, --accent, --border, --radius, etc.    =
====================================================*/

/* ---------- Shared page shell ---------- */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content{
    max-width:1200px;
    margin:0 auto;
    padding:56px 20px 64px;
}

body.woocommerce-cart .site-content,
body.woocommerce-checkout .site-content,
body.woocommerce-cart .content-area,
body.woocommerce-checkout .content-area,
body.woocommerce-cart article,
body.woocommerce-checkout article,
body.woocommerce-cart .entry-header,
body.woocommerce-checkout .entry-header{
    margin-top:0 !important;
    padding-top:0 !important;
}

/* Hide the page title ("Cart" / "Checkout") entirely */
.woocommerce-cart .entry-title,
.woocommerce-cart .page-title,
.woocommerce-cart h1.entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-checkout .page-title,
.woocommerce-checkout h1.entry-title{
    display:none;
}

/* Notices */
.wc-block-components-notice-banner{
    border-radius:8px;
    margin:0 0 20px;
}


/*====================================================
=            CART BLOCK — OVERALL LAYOUT              =
=  Block wrapper classes below come straight from the =
=  data-block-name attributes in the live page source. =
====================================================*/

.wp-block-woocommerce-cart{
    display:block;
}

.wp-block-woocommerce-filled-cart-block{
    display:grid;
    grid-template-columns:1fr 380px;
    gap:32px;
    align-items:start;
}

.wp-block-woocommerce-cart-items-block{
    grid-column:1;
}

.wp-block-woocommerce-cart-totals-block{
    grid-column:2;
    grid-row:1;
    position:sticky;
    top:24px;
    width:100%;
}


/*====================================================
=                 CART LINE ITEMS                     =
====================================================*/

/* Card wrapper the blocks render for the items table */
.wc-block-cart-items{
    width:100%;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:hidden;
    border-collapse:collapse;
}

.wc-block-cart-items thead th{
    text-align:left;
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--muted);
    padding:14px 16px;
    border-bottom:1px solid var(--border);
}

.wc-block-cart-items__row{
    border-bottom:1px solid var(--border);
    transition:background-color .15s;
}
.wc-block-cart-items__row:hover{
    background:var(--bg);
}
.wc-block-cart-items__row:last-child{
    border-bottom:0;
}
.wc-block-cart-items__row td{
    padding:20px 16px;
    vertical-align:top;
}

/* Thumbnail */
.wc-block-cart-item__image img,
.wc-block-cart-items__row img.wc-block-components-product-image{
    width:76px;
    height:76px;
    object-fit:contain;
    border:1px solid var(--border);
    border-radius:8px;
    background:#FFFFFF;
    padding:6px;
    box-shadow:0 2px 8px rgba(16,28,40,.05);
}

/* Product name link */
.wc-block-components-product-name{
    display:block;
    font-weight:700;
    color:var(--primary-dark);
    text-decoration:none;
    line-height:1.35;
    margin-bottom:6px;
    font-size:.95rem;
}
.wc-block-components-product-name:hover{
    color:var(--primary);
    text-decoration:underline;
}

/* Product metadata block — this is WHERE the short_description
   ("...LTO Ultrium 6ÿData Cartridge...") gets injected as a
   secondary summary under the title. The mojibake character
   inside it is bad source data on the product itself (see
   Short Description field in wp-admin), not something CSS can
   fix. Confirmed from the page's preloaded cart JSON that this
   content is literally wrapped in an <h4> tag, so we target
   that directly rather than guessing at wrapper class names. */
.wc-block-cart-item__product h4,
.wc-block-cart-items__row h4,
.wc-block-components-product-metadata,
.wc-block-components-product-metadata__description{
    display:none !important;
}

/* Price */
.wc-block-components-product-price{
    font-weight:700;
    color:var(--text);
    margin-top:8px;
    font-size:.9rem;
}
.wc-block-components-product-price .wc-block-components-product-price__value{
    font-weight:700;
}
.wc-block-components-formatted-money-amount{
    color:inherit;
}

/* Quantity stepper */
.wc-block-components-quantity-selector{
    display:inline-flex;
    align-items:center;
    border:1px solid var(--border);
    border-radius:8px;
    overflow:hidden;
    margin-top:10px;
}
.wc-block-components-quantity-selector__input{
    width:48px;
    border:0;
    text-align:center;
    padding:8px 4px;
    font-size:.9rem;
}
.wc-block-components-quantity-selector__button{
    background:transparent;
    border:0;
    width:32px;
    color:var(--muted);
    cursor:pointer;
}
.wc-block-components-quantity-selector__button:hover{
    background:var(--bg);
    color:var(--text);
}

/* Remove item link */
.wc-block-cart-item__remove-link{
    display:inline-flex;
    align-items:center;
    gap:4px;
    margin-top:10px;
    color:var(--muted) !important;
    text-decoration:none !important;
    font-size:.82rem;
}
.wc-block-cart-item__remove-link:hover{
    color:#9B1E22 !important;
}


/*====================================================
=               ORDER SUMMARY / TOTALS SIDEBAR        =
====================================================*/

.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block{
    background:var(--sidebar);
    color:#FFFFFF;
    border-radius:var(--radius);
    padding:16px 18px;
    width:100%;
    box-sizing:border-box;
    box-shadow:0 12px 32px rgba(16,28,40,.25);
}

/* WooCommerce sometimes inserts small helper notes here (e.g. a line
   about taxes/shipping being calculated at checkout). Without an
   explicit rule, that text inherits the theme's default dark body
   text color from main.css (element selectors like `p`/`div` beat
   inheritance), which is invisible on this black card — it just
   looks like empty space. Force any plain text here to be visible. */
.wp-block-woocommerce-cart-order-summary-block p,
.wp-block-woocommerce-cart-order-summary-block span,
.wp-block-woocommerce-cart-order-summary-block div,
.wp-block-woocommerce-checkout-order-summary-block p,
.wp-block-woocommerce-checkout-order-summary-block span,
.wp-block-woocommerce-checkout-order-summary-block div{
    color:rgba(255,255,255,.75);
}

/* Nuclear reset: WooCommerce ships default borders on several
   inner elements of this card (totals rows, order-summary
   items, the coupon panel...) and every time one gets patched
   another turns up. Instead of chasing each one, strip borders
   from every descendant of the card, then re-introduce only the
   3 dividers we actually want below (title underline, the line
   above the grand total, and the coupon input/button borders).
   Those specific rules use class selectors, so they out-rank
   this reset even though this comes first in the file. */
.wp-block-woocommerce-cart-order-summary-block *,
.wp-block-woocommerce-checkout-order-summary-block *{
    border:0 !important;
}

.wp-block-woocommerce-cart-order-summary-block .wc-block-cart__totals-title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper .wc-block-components-title{
    color:#FFFFFF;
    font-size:1.05rem;
    font-weight:800;
    margin:0 0 14px;
}

.wp-block-woocommerce-cart-order-summary-coupon-form-block.wc-block-components-totals-wrapper {
    padding: 0;
    padding-top: 5px;
}
.wc-block-components-totals-item{
    padding:6px 0;
}
.wc-block-components-totals-item__label{
    color:rgba(255,255,255,.85);
    font-size:.9rem;
}
.wc-block-components-totals-item__value{
    color:#FFFFFF;
    font-weight:700;
}
.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block{
    height:auto;
}
.wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-footer-item,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item{
    padding-top:14px !important;
    padding-bottom:4px;
    margin-top:8px;
    border-top:1px solid rgba(255,255,255,.16) !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
    font-size:1.15rem;
    font-weight:800;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
    color:var(--accent);
}

/* Order Summary product rows (checkout sidebar) */
.wc-block-components-order-summary-item{
    padding:10px 0;
    gap:10px;
}
.wc-block-components-order-summary-item__image img{
    width:56px;
    height:56px;
}
/* Product name/meta in the cart items table is styled dark-red
   for the light card there; on this dark sidebar that's the
   near-unreadable red/underlined text you saw. Force it white
   here specifically, without touching the cart page styling. */
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-name,
.wp-block-woocommerce-cart-order-summary-block .wc-block-components-product-name{
    color:#FFFFFF !important;
    text-decoration:none !important;
}
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-name:hover,
.wp-block-woocommerce-cart-order-summary-block .wc-block-components-product-name:hover{
    color:rgba(255,255,255,.8) !important;
}
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__total-price,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-formatted-money-amount,
.wp-block-woocommerce-cart-order-summary-block .wc-block-components-formatted-money-amount{
    color:#FFFFFF;
}

/* ---------- Coupon form ----------
   The coupon accordion is nested markup (an outer
   .wc-block-components-totals-coupon wrapping an inner
   .wc-block-components-panel, plus WooCommerce's own default
   panel border), so giving borders to more than one of those
   layers is what caused the doubled hairlines. Simplest fix:
   no borders anywhere in this block — the card's own title
   divider and the footer-item divider are enough separation. */
.wc-block-components-totals-coupon,
.wc-block-components-totals-coupon .wc-block-components-panel,
.wc-block-components-totals-coupon *{
    border:0 !important;
}
.wc-block-components-totals-coupon{
    padding:2px 0;
}
.wc-block-components-totals-coupon .wc-block-components-panel{
    padding:4px 0;
}

.wc-block-components-panel__button{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    color:rgba(255,255,255,.9);
    font-weight:700;
    font-size:.92rem;
    padding:4px 0;
    transition:color .15s;
}
.wc-block-components-panel__button:hover{
    color:#FFFFFF;
}
.wc-block-components-panel__button-icon svg,
.wc-block-components-panel__button svg{
    fill:rgba(255,255,255,.7);
}

.wc-block-components-totals-coupon__content{
    display:flex;
    gap:10px;
    margin-top:14px;
    align-items:stretch;
}
.wc-block-components-totals-coupon__button{
    background:var(--accent);
    color:#FFFFFF;
    border:2px solid var(--accent);
    border-radius:8px;
    font-weight:700;
    padding:.6rem 1.2rem;
    white-space:nowrap;
    transition:background .15s,border-color .15s,color .15s;
}
.wc-block-components-totals-coupon__button:hover{
    background:var(--primary-dark);
    border-color:var(--primary-dark);
    color:#FFFFFF;
}
.wc-block-components-totals-coupon__button:disabled,
.wc-block-components-totals-coupon__button:disabled:hover{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.15);
    color:rgba(255,255,255,.4);
    opacity:1;
    cursor:not-allowed;
}
.wc-block-components-totals-coupon__input{
    flex:1;
}
.wc-block-components-totals-coupon__input input{
    width:100%;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.2);
    background:rgba(255,255,255,.06);
    color:#FFFFFF;
    padding:10px 14px;
    box-sizing:border-box;
}
.wc-block-components-totals-coupon__input input::placeholder{
    color:rgba(255,255,255,.45);
}
.wc-block-components-totals-coupon__input input:focus{
    outline:none;
    border-color:var(--accent);
    background:rgba(255,255,255,.1);
}
.wc-block-components-totals-coupon__input label{
    color:rgba(255,255,255,.55);
}


/*====================================================
=            PROCEED TO CHECKOUT / PLACE ORDER        =
====================================================*/

.wp-block-woocommerce-proceed-to-checkout-block{
    margin-top:16px;
}

/* Higher-specificity + !important: the Blocks button ships with
   its own wp-element-button / wc-block-components-button classes
   which otherwise carry theme default styling (dark bg, red
   underlined text) that no lower-specificity rule can beat. */
.wp-block-woocommerce-proceed-to-checkout-block a,
.wc-block-cart__submit-button,
a.wc-block-components-checkout-place-order-button,
.wc-block-checkout__actions .wc-block-components-checkout-place-order-button{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100% !important;
    background:var(--primary) !important;
    color:#FFFFFF !important;
    border:2px solid var(--primary) !important;
    border-radius:8px !important;
    padding:.9rem 1.4rem !important;
    font-size:.95rem !important;
    font-weight:700 !important;
    text-decoration:none !important;
    box-shadow:none !important;
    cursor:pointer;
    transition:background .15s,border-color .15s,transform .15s,box-shadow .15s;
}
.wp-block-woocommerce-proceed-to-checkout-block a:hover,
.wp-block-woocommerce-proceed-to-checkout-block a:focus,
.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-button:focus,
a.wc-block-components-checkout-place-order-button:hover,
a.wc-block-components-checkout-place-order-button:focus{
    background:var(--primary-dark) !important;
    border-color:var(--primary-dark) !important;
    color:#FFFFFF !important;
    text-decoration:none !important;
    transform:translateY(-1px);
    box-shadow:0 8px 20px rgba(155,30,34,.3) !important;
}
.wp-block-woocommerce-proceed-to-checkout-block a:focus-visible,
.wc-block-cart__submit-button:focus-visible,
a.wc-block-components-checkout-place-order-button:focus-visible{
    outline:none;
    box-shadow:0 0 0 3px rgba(206,0,0,.35) !important;
}

/* Loading / submitting state: WooCommerce collapses the button to a
   bare spinner/check icon with no readable label while the order is
   being placed. Hide whatever it renders inside and overlay a plain
   "Processing…" label instead, so shoppers always see text. */
.wc-block-checkout__actions .wc-block-components-checkout-place-order-button.wc-block-components-button--loading,
.wc-block-checkout__actions .wc-block-components-checkout-place-order-button:disabled{
    position:relative;
    color:transparent !important;
    opacity:1 !important;
    pointer-events:none;
}
.wc-block-checkout__actions .wc-block-components-checkout-place-order-button.wc-block-components-button--loading *,
.wc-block-checkout__actions .wc-block-components-checkout-place-order-button:disabled svg,
.wc-block-checkout__actions .wc-block-components-checkout-place-order-button:disabled .wc-block-components-spinner{
    visibility:hidden !important;
}
.wc-block-checkout__actions .wc-block-components-checkout-place-order-button.wc-block-components-button--loading::after,
.wc-block-checkout__actions .wc-block-components-checkout-place-order-button:disabled::after{
    content:"Processing…";
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#FFFFFF;
    font-weight:700;
    font-size:.95rem;
    visibility:visible;
}


/*====================================================
=               CHECKOUT BLOCK — LAYOUT               =
====================================================*/

.wp-block-woocommerce-checkout{
    display:grid;
    grid-template-columns:1fr 400px;
    gap:24px;
    align-items:start;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
}

/* Fallback: if the fields block and order-summary block aren't
   both direct children of .wp-block-woocommerce-checkout (e.g.
   there's an extra wrapper div, or they're actually siblings
   further up under .entry-content), the grid above never gets
   a chance to apply and the summary stacks full-width below
   the form instead of sitting beside it.
   Fix: turn .entry-content itself into the grid container, and
   make every element between it and our two target blocks
   "disappear" from the layout via display:contents — regardless
   of how many wrapper divs are in between. This only touches
   wrapper elements; the two target blocks themselves and
   everything inside them keep their own styling untouched. */
.woocommerce-checkout:not(.woocommerce-order-received) .entry-content{
    display:grid;
    grid-template-columns:1fr 400px;
    gap:52px;
    align-items:start;
}
/* :not(.woocommerce-order-received) guard added above and below —
   WooCommerce keeps the .woocommerce-checkout body class on the
   order-received ("Thank you") page too, since it's rendered from the
   same Checkout page template. Without this guard, every element in
   the order summary (which isn't one of the checkout block wrappers
   below) collapses to display:contents and the whole page loses its
   box model, rendering as a flat run of unstyled text. */
.woocommerce-checkout:not(.woocommerce-order-received) .entry-content *:not(.wp-block-woocommerce-checkout-fields-block):not(.wp-block-woocommerce-checkout-totals-block):not(.wp-block-woocommerce-checkout-order-summary-block):not(.wp-block-woocommerce-checkout-fields-block *):not(.wp-block-woocommerce-checkout-totals-block *):not(.wp-block-woocommerce-checkout-order-summary-block *):not(.wc-block-components-notices):not(.wc-block-components-notices *){
    display:contents;
}

/* Validation/error notices (e.g. "Sorry, this order requires a shipping
   option") were getting swallowed by the display:contents reset above —
   losing their box AND landing alone in grid-column:1, leaving a gap the
   height of whatever taller item sat in column 2 that same row.
   Confirmed actual markup from devtools: the whole notice lives inside
   a ".wc-block-components-notices" wrapper — excluding that one wrapper
   (and everything inside it, via the second ":not(...)" above) covers
   the banner, its icon, and its text in one shot. Spanning the full
   grid width then gives it its own row instead of sharing one. */
.woocommerce-checkout:not(.woocommerce-order-received) .entry-content .wc-block-components-notices{
    grid-column: 1 / -1;
    grid-row: 1;
}
/* Pin the form and order-summary columns to row 2 explicitly. Without
   this, the totals block's hardcoded "grid-row:1" (below) competes with
   the notice for row 1, and auto-placement bounces the notice around
   unpredictably instead of always sitting cleanly above both columns. */
.woocommerce-checkout:not(.woocommerce-order-received) .entry-content .wp-block-woocommerce-checkout-fields-block{
    grid-row: 2;
}
.woocommerce-checkout:not(.woocommerce-order-received) .entry-content .wp-block-woocommerce-checkout-totals-block{
    grid-row: 2;
}
/* WooCommerce keeps this wrapper mounted in the DOM at all times, ready
   to inject a notice — even with nothing inside it, it was still
   claiming a full grid row (and the row-gap above/below it), which is
   why the space stayed even with no visible error. Drop it out of the
   grid entirely whenever it's genuinely empty. */
.woocommerce-checkout:not(.woocommerce-order-received) .entry-content .wc-block-components-notices:empty{
    display:none;
}

.wp-block-woocommerce-checkout-fields-block{
    grid-column:1;
    /* min-width:0 overrides the grid item default of min-width:auto,
       which otherwise lets long form content (addresses, error text)
       stretch this column past its share of the grid and force the
       whole page wider than intended. */
    min-width:0;
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:24px;
}
/* The visible card above was narrower than its actual grid
   column (a big dead gap before the sidebar) because something
   inside caps its own width. Force full width through whatever
   wrapper WooCommerce puts directly inside the card. */
.wp-block-woocommerce-checkout-fields-block > *{
    max-width:none !important;
    width:100% !important;
    box-sizing:border-box;
}

.wp-block-woocommerce-checkout-totals-block{
    grid-column:2;
    grid-row:1;
    min-width:0;
    width:100%;
    box-sizing:border-box;
    position:sticky;
    top:24px;
}

/* Two-up fields (First name / Last name, City / Postcode, etc.) use
   their own inner grid — same min-width fix applies there. */
.wc-block-components-address-form,
.wc-block-components-checkout-form{
    width:100%;
    box-sizing:border-box;
}
.wc-block-components-address-form > *{
    min-width:0;
}

.wc-block-components-checkout-step__title{
    font-size:1.1rem;
    font-weight:800;
    color:var(--text);
}

.wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-block-components-address-form select,
.wc-block-components-select .wc-block-components-select__select{
    width:100%;
    box-sizing:border-box;
    border-radius:8px;
    border:1px solid var(--border);
    padding:11px 14px;
}
.wc-block-components-text-input input:focus,
.wc-block-components-address-form input:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(206,0,0,.12);
}


.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity
{
    background: rgb(193 28 28);
    }
    .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity span{
        color: white;
    /* padding: 0 .4em; */
    font-weight: bold;

    }


/*====================================================
=       ORDER-RECEIVED / THANK YOU PAGE (CLASSIC)     =
=  Confirmed from live markup: this page keeps the     =
=  classic .woocommerce / .woocommerce-order shortcode =
=  template even though it shares the Checkout page's  =
=  .woocommerce-checkout body class (see guard above). =
====================================================*/

body.woocommerce-order-received .entry-content{
    max-width:1200px;
}

body.woocommerce-order-received .entry-content{
    max-width:1000px;
}
.woocommerce-order{
    display:flex;
    flex-direction:column;
    gap:36px;
}

/* "Thank you, your order has been received" — hero success state with
   a checkmark badge, centered, like a modern order-confirmation page
   rather than a plain inline notice. */
.woocommerce-order .woocommerce-notice.woocommerce-thankyou-order-received{
    position:relative;
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:0 4px 20px rgba(16,28,40,.06);
    color:var(--text);
    padding:44px 24px 36px;
    margin:8px 0 0;
    font-size:1.35rem;
    font-weight:800;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
}
.woocommerce-order .woocommerce-notice.woocommerce-thankyou-order-received::before{
    content:"\2713";
    display:flex;
    align-items:center;
    justify-content:center;
    width:56px;
    height:56px;
    margin-bottom:16px;
    border-radius:50%;
    background:#2E7D32;
    color:#FFFFFF;
    font-size:1.6rem;
    font-weight:900;
    box-shadow:0 6px 16px rgba(46,125,50,.35);
}

/* Order number / date / total / payment-method meta grid */
.woocommerce-order-overview{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
    list-style:none;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:0 4px 16px rgba(16,28,40,.05);
    margin:0;
    padding:0;
    overflow:hidden;
}
.woocommerce-order-overview li{
    padding:20px 24px;
    border-right:1px solid var(--border);
    border-bottom:1px solid var(--border);
    font-size:.75rem;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.05em;
    font-weight:700;
}
.woocommerce-order-overview li:last-child{ border-right:none; }
.woocommerce-order-overview li strong{
    display:block;
    margin-top:6px;
    font-size:1rem;
    font-weight:800;
    color:var(--text);
    text-transform:none;
    letter-spacing:normal;
}

/* "Order details" heading + line-items table */
.woocommerce-order-details__title,
.woocommerce-column__title{
    font-size:1.2rem;
    font-weight:800;
    color:var(--text);
    margin:0 0 16px;
}
.woocommerce-table.shop_table{
    width:100%;
    border-collapse:collapse;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:0 4px 16px rgba(16,28,40,.05);
    overflow:hidden;
    margin:0;
    font-size:.9rem;
}
.woocommerce-table.shop_table th,
.woocommerce-table.shop_table td{
    padding:16px 20px;
    text-align:left;
    border-bottom:1px solid var(--border);
}
.woocommerce-table.shop_table th:last-child,
.woocommerce-table.shop_table td:last-child{
    text-align:right;
}
.woocommerce-table.shop_table thead th{
    background:var(--sidebar);
    color:#FFFFFF;
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.06em;
    font-weight:800;
    border-bottom:none;
}
.woocommerce-table.shop_table tbody tr:hover{ background:var(--bg); }
.woocommerce-table.shop_table tbody td{ color:var(--text); }
.woocommerce-table.shop_table .product-name{ font-weight:700; }
.woocommerce-table.shop_table .product-name a{ color:var(--text); }
.woocommerce-table.shop_table .product-name a:hover{ color:var(--primary); }
.woocommerce-table.shop_table tfoot th,
.woocommerce-table.shop_table tfoot td{
    font-weight:600;
    color:var(--text);
    background:var(--bg);
    text-transform:none;
}
.woocommerce-table.shop_table tfoot th{ text-align:left; }
.woocommerce-table.shop_table tfoot tr:last-child th,
.woocommerce-table.shop_table tfoot tr:last-child td{
    font-size:1.05rem;
    font-weight:800;
    color:var(--primary);
    border-bottom:none;
    border-top:2px solid var(--border);
}

/* Billing / shipping address card(s). WooCommerce's markup differs
   depending on whether both billing and shipping addresses are shown
   (wrapped in .woocommerce-column per address) or just billing alone
   (no .woocommerce-column wrapper at all) — cover both shapes so the
   address is never left unboxed. */
.woocommerce-customer-details{
    display:flex;
    flex-wrap:wrap;
    gap:24px;
}
.woocommerce-customer-details .woocommerce-column{
    flex:1 1 280px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:0 4px 16px rgba(16,28,40,.05);
    padding:24px 26px;
}
/* Fallback: no .woocommerce-column present (billing-only order) — box
   the whole section instead so the address still sits in a card.
   display:block overrides the flex-row behavior above (which is meant
   for laying out multiple .woocommerce-column cards side by side) —
   without it, this single card's own children (the "Billing address"
   heading and the <address> block) were being laid out as flex-row
   items next to each other instead of stacking top-to-bottom. */
.woocommerce-customer-details:not(:has(.woocommerce-column)){
    display:block;
    width:100%;
    max-width:380px;
    margin:0;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:0 4px 16px rgba(16,28,40,.05);
    padding:24px 26px;
}
.woocommerce-customer-details h2{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:.78rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--muted);
    margin:0 0 16px;
    padding-bottom:12px;
    border-bottom:1px solid var(--border);
}
.woocommerce-customer-details address{
    font-style:normal;
    color:var(--text);
    line-height:1.8;
    font-size:.95rem;
}
.woocommerce-customer-details .woocommerce-customer-details--phone,
.woocommerce-customer-details .woocommerce-customer-details--email{
    display:block;
    margin-top:8px;
    color:var(--muted);
}


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

@media (max-width:1024px){
    .wp-block-woocommerce-filled-cart-block,
    .wp-block-woocommerce-checkout{
        grid-template-columns:1fr;
    }
    .wp-block-woocommerce-cart-totals-block,
    .wp-block-woocommerce-checkout-totals-block{
        grid-column:1;
        grid-row:auto;
        position:static;
    }

    /* The desktop-only rules further down pin both the form
       (.wp-block-woocommerce-checkout-fields-block) and the order
       summary (.wp-block-woocommerce-checkout-totals-block) to
       grid-row:2 using a higher-specificity selector
       (".woocommerce-checkout:not(...) .entry-content .block"),
       which beats the plain-class reset above. On a single-column
       mobile grid that puts both blocks in the same cell, so they
       render stacked on top of each other. !important forces this
       reset to win without having to duplicate that long selector. */
    .wp-block-woocommerce-checkout-fields-block,
    .wp-block-woocommerce-checkout-totals-block{
        grid-row:auto !important;
    }
}

@media (max-width:640px){
    .wc-block-cart-items thead{
        display:none;
    }
    .wc-block-cart-items__row{
        display:grid;
        grid-template-columns:76px 1fr;
        gap:0 14px;
    }
    /* Selector specificity must match (or exceed) the desktop rule at
       ".woocommerce-checkout:not(.woocommerce-order-received) .entry-content"
       (line ~540), otherwise that higher-specificity rule keeps winning
       even inside this media query, and the 2-column "1fr 400px" grid
       gets squeezed into the mobile viewport — which truncates every
       field. Matching ":not(.woocommerce-order-received)" here fixes it. */
    .woocommerce-checkout:not(.woocommerce-order-received) .entry-content{
        grid-template-columns: 1fr;
        gap: 25px;

    }
    .wc-block-components-sidebar {

        padding-left: 0;
    }

    .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity
{
    background: rgb(193 28 28);
    }
    .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity span{
        color: white;
    /* padding: 0 .4em; */
    font-weight: bold;

    }

    .woocommerce-order-overview{
        grid-template-columns:1fr 1fr;
    }
    .woocommerce-order-overview li{
        border-right:none;
        border-bottom:1px solid var(--border);
    }
    .woocommerce-order .woocommerce-notice.woocommerce-thankyou-order-received{
        padding:32px 20px 28px;
        font-size:1.1rem;
    }
    .woocommerce-table.shop_table{ font-size:.82rem; }
    .woocommerce-table.shop_table th,
    .woocommerce-table.shop_table td{ padding:10px 12px; }
}