/*====================================================
=     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);
}

/* 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 8px;
    padding-bottom:12px;
    border-bottom:1px solid rgba(255,255,255,.12) !important;
}

.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 .wc-block-components-totals-footer-item,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item{
    padding-top:10px !important;
    margin-top:2px;
    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;
}


/*====================================================
=               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 .entry-content{
    display:grid;
    grid-template-columns:1fr 400px;
    gap:52px;
    align-items:start;
}
.woocommerce-checkout .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 *){
    display:contents;
}

.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;

    }


/*====================================================
=               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;
    }
}

@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;
    }
    .woocommerce-checkout .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;

    }
}