) */
body.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items__table thead tr.wc-block-cart-items__header th:first-child{
border-top-left-radius: 14px !important;
border-bottom-left-radius: 14px !important;
}
body.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items__table thead tr.wc-block-cart-items__header th:last-child{
border-top-right-radius: 14px !important;
border-bottom-right-radius: 14px !important;
}
/* Some themes add borders that make the bar look grey */
body.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items__table thead tr.wc-block-cart-items__header th{
border: 0 !important;
}
/* marker: TSS: WC BLOCK CART HEADER BAR (FIX GREY PILL) */
/* =========================================================
TSS: WC BLOCK CART HEADER - MAKE THE "PILL" MAROON
(Fixes grey header bar with maroon text-chips)
========================================================= */
body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__table {
border-collapse: separate !important;
border-spacing: 0 !important;
}
/* Paint the whole header row/cells maroon */
body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__table thead,
body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__table thead tr,
body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__table thead th {
background: #7f174a !important;
background-color: #7f174a !important;
color: #fff !important;
border-color: #7f174a !important;
}
/* Remove any inner "chip" backgrounds so it becomes one solid bar */
body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__table thead th span {
background: transparent !important;
padding: 0 !important;
color: #fff !important;
}
/* Round the "pill" edges */
body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__table thead th:first-child {
border-top-left-radius: 14px !important;
}
body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__table thead th:last-child {
border-top-right-radius: 14px !important;
}
/* If blocks theme adds a wrapper/pseudo background, kill it */
body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__header-wrapper,
body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__header-wrapper::before,
body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__header-wrapper::after,
body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__header::before,
body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__header::after {
background: transparent !important;
box-shadow: none !important;
}
/* =========================================================
TSS: WC BLOCK CART - FIX GREY HEADER PILL (/basket)
Forces the WC Blocks cart header row + cells to maroon.
========================================================= */
body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__table thead,
body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__table thead tr,
body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__table thead tr.wc-block-cart-items__header,
body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__table thead th,
body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__table thead th.wc-block-cart-items__header-image,
body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__table thead th.wc-block-cart-items__header-product,
body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__table thead th.wc-block-cart-items__header-total{
background: #7f174a !important;
background-color: #7f174a !important;
color: #fff !important;
border-color: #7f174a !important;
}
/* If Blocks uses a pseudo element to paint the header, kill it */
body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__table thead::before,
body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__table thead tr::before,
body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__table thead th::before,
body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__table thead::after,
body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__table thead tr::after,
body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__table thead th::after{
background: transparent !important;
box-shadow: none !important;
}
/* Remove any inner span "chips" so it becomes one solid pill */
body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__table thead th span{
background: transparent !important;
padding: 0 !important;
color: #fff !important;
}
/* Pill rounding */
body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__table thead th:first-child{
border-top-left-radius: 14px !important;
}
body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__table thead th:last-child{
border-top-right-radius: 14px !important;
}
/* =========================================================
TSS: WC BLOCK CART HEADER PILL OVERRIDE
Fix grey | pills coming from woocommerce.css
========================================================= */
body.woocommerce-cart #page table.wc-block-cart-items thead tr.wc-block-cart-items__header th span{
background: #7f174a !important;
background-color: #7f174a !important;
color: #fff !important;
border: 0 !important;
box-shadow: none !important;
}
/* Optional: make the pill look intentional */
body.woocommerce-cart #page table.wc-block-cart-items thead tr.wc-block-cart-items__header th span{
display: inline-block !important;
padding: 10px 14px !important;
border-radius: 10px !important;
line-height: 1 !important;
}
/* Keep the row itself maroon too (in case) */
body.woocommerce-cart #page table.wc-block-cart-items thead tr.wc-block-cart-items__header,
body.woocommerce-cart #page table.wc-block-cart-items thead tr.wc-block-cart-items__header th{
background: #7f174a !important;
background-color: #7f174a !important;
color: #fff !important;
}
/* =========================================================
TSS: WC BLOCK CART DETAILS COLUMN CLEANUP
- Title -> Price -> Stock
- Align qty controls + remove button
========================================================= */
body.woocommerce-cart #page .wp-block-woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__product .wc-block-cart-item__wrap{
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 6px !important;
}
/* Title */
body.woocommerce-cart #page .wp-block-woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__product a.wc-block-components-product-name{
order: 1 !important;
margin: 0 !important;
line-height: 1.2 !important;
}
/* Price (force onto its own line) */
body.woocommerce-cart #page .wp-block-woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__product .wc-block-cart-item__prices,
body.woocommerce-cart #page .wp-block-woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__product .wc-block-formatted-money-amount{
order: 2 !important;
display: block !important;
margin: 0 !important;
}
/* Stock below price */
body.woocommerce-cart #page .wp-block-woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__product .wc-block-components-product-stock-indicator,
body.woocommerce-cart #page .wp-block-woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__product .wc-block-components-product-stock-indicator span{
order: 3 !important;
display: block !important;
margin: 0 !important;
opacity: .85;
}
/* Qty + remove row */
body.woocommerce-cart #page .wp-block-woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__product .wc-block-cart-item__quantity{
order: 4 !important;
display: flex !important;
align-items: center !important;
gap: 14px !important;
flex-wrap: wrap !important;
margin-top: 10px !important;
}
/* Quantity selector alignment */
body.woocommerce-cart #page .wp-block-woocommerce-cart .wc-block-components-quantity-selector{
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
padding: 10px 12px !important;
border-radius: 12px !important;
}
body.woocommerce-cart #page .wp-block-woocommerce-cart .wc-block-components-quantity-selector__input{
height: 34px !important;
line-height: 34px !important;
width: 44px !important;
text-align: center !important;
padding: 0 !important;
margin: 0 !important;
}
/* Buttons inside the WC Blocks qty selector */
body.woocommerce-cart #page .wp-block-woocommerce-cart .wc-block-components-quantity-selector__button{
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
min-height: 34px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
padding: 0 !important;
}
/* Remove button: vertically align with qty */
body.woocommerce-cart #page .wp-block-woocommerce-cart .wc-block-cart-item__remove-link,
body.woocommerce-cart #page .wp-block-woocommerce-cart .wc-block-components-product-remove-link{
margin: 0 !important;
align-self: center !important;
}
/* =========================================================
TSS: WC BLOCK CART STOCK BELOW PRICE
Force Details column to be a single flex stack so order works.
========================================================= */
body.woocommerce-cart #page .wp-block-woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__product{
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
}
/* Ensure all key elements are in the same ordering context */
body.woocommerce-cart #page .wp-block-woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__product a.wc-block-components-product-name{
order: 1 !important;
}
body.woocommerce-cart #page .wp-block-woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__product .wc-block-cart-item__prices,
body.woocommerce-cart #page .wp-block-woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__product .wc-block-formatted-money-amount{
order: 2 !important;
display: block !important;
}
body.woocommerce-cart #page .wp-block-woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__product .wc-block-components-product-stock-indicator{
order: 3 !important;
display: block !important;
margin: 2px 0 0 0 !important;
opacity: .85;
}
body.woocommerce-cart #page .wp-block-woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__product .wc-block-cart-item__quantity{
order: 4 !important;
}
/* =========================================================
TSS: WC BLOCK CART DETAILS STACK (TITLE > PRICE > STOCK > QTY)
Woo Blocks nests content inside wrap containers, so flex/order
must be applied to the wrap, not only the | .
========================================================= */
body.woocommerce-cart #page .wp-block-woocommerce-cart .wc-block-cart-item__product .wc-block-cart-item__wrap{
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
}
/* 1) Title */
body.woocommerce-cart #page .wp-block-woocommerce-cart .wc-block-cart-item__product
.wc-block-cart-item__wrap a.wc-block-components-product-name{
order: 1 !important;
display: block !important;
margin: 0 0 6px 0 !important;
}
/* 2) Price (Blocks usually uses cart-item__prices) */
body.woocommerce-cart #page .wp-block-woocommerce-cart .wc-block-cart-item__product
.wc-block-cart-item__wrap .wc-block-cart-item__prices{
order: 2 !important;
display: block !important;
margin: 0 0 4px 0 !important;
}
/* Some installs render the formatted amount differently; keep it blocky */
body.woocommerce-cart #page .wp-block-woocommerce-cart .wc-block-cart-item__product
.wc-block-cart-item__wrap .wc-block-cart-item__prices .wc-block-formatted-money-amount{
display: block !important;
}
/* 3) Stock: it commonly lives inside product metadata wrapper */
body.woocommerce-cart #page .wp-block-woocommerce-cart .wc-block-cart-item__product
.wc-block-cart-item__wrap .wc-block-components-product-metadata{
order: 3 !important;
margin: 0 !important;
}
/* Ensure the stock indicator itself is a clean line */
body.woocommerce-cart #page .wp-block-woocommerce-cart .wc-block-cart-item__product
.wc-block-cart-item__wrap .wc-block-components-product-stock-indicator{
display: block !important;
margin: 2px 0 8px 0 !important;
opacity: .85;
}
/* 4) Quantity row */
body.woocommerce-cart #page .wp-block-woocommerce-cart .wc-block-cart-item__product
.wc-block-cart-item__wrap .wc-block-cart-item__quantity{
order: 4 !important;
margin-top: 6px !important;
}
/* =========================================================
TSS: WC BLOCK CART STOCK BADGE ORDER (low-stock badge)
Your stock text is rendered as:
.wc-block-components-product-badge.wc-block-components-product-low-stock-badge
========================================================= */
body.woocommerce-cart #page .wp-block-woocommerce-cart .wc-block-cart-item__product .wc-block-cart-item__wrap{
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
}
/* Title */
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-cart-item__product .wc-block-cart-item__wrap a.wc-block-components-product-name{
order: 1 !important;
margin: 0 0 6px 0 !important;
}
/* Price */
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-cart-item__product .wc-block-cart-item__wrap .wc-block-cart-item__prices{
order: 2 !important;
margin: 0 0 4px 0 !important;
}
/* Stock badge (THIS is your “1 left in stock”) */
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-cart-item__product .wc-block-cart-item__wrap .wc-block-components-product-badge,
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-cart-item__product .wc-block-cart-item__wrap .wc-block-components-product-low-stock-badge{
order: 3 !important;
display: block !important;
margin: 0 0 10px 0 !important;
opacity: .85;
}
/* Any other metadata goes after stock */
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-cart-item__product .wc-block-cart-item__wrap .wc-block-components-product-metadata{
order: 4 !important;
margin: 0 0 10px 0 !important;
}
/* Quantity row last */
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-cart-item__product .wc-block-cart-item__wrap .wc-block-cart-item__quantity{
order: 5 !important;
margin-top: 0 !important;
}
/* =========================================================
TSS: WC BLOCK CART - DETAILS ORDER (PRICE ABOVE STOCK)
- Title -> Price -> Stock -> Quantity
- Tidy quantity alignment
========================================================= */
body.woocommerce-cart .wc-block-cart-item__wrap{
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 6px !important;
}
/* 1) Title first */
body.woocommerce-cart .wc-block-cart-item__wrap > a.wc-block-components-product-name{
order: 10 !important;
margin: 0 !important;
}
/* 2) Price second */
body.woocommerce-cart .wc-block-cart-item__wrap > .wc-block-cart-item__prices{
order: 20 !important;
margin: 2px 0 0 0 !important;
}
/* 3) Stock badge third (it appears above the price in DOM, so we force it after) */
body.woocommerce-cart .wc-block-cart-item__wrap > .wc-block-components-product-badge,
body.woocommerce-cart .wc-block-cart-item__wrap > .wc-block-components-product-low-stock-badge,
body.woocommerce-cart .wc-block-cart-item__wrap > .wc-block-components-product-stock-badge{
order: 30 !important;
margin: 0 !important;
}
/* 4) Any metadata next (if present) */
body.woocommerce-cart .wc-block-cart-item__wrap > .wc-block-cart-item__metadata{
order: 40 !important;
margin: 0 !important;
}
/* 5) Quantity row last + aligned */
body.woocommerce-cart .wc-block-cart-item__wrap > .wc-block-cart-item__quantity{
order: 50 !important;
margin-top: 10px !important;
display: flex !important;
align-items: center !important;
gap: 14px !important;
}
/* Quantity selector tidy (Woo blocks) */
body.woocommerce-cart .wc-block-components-quantity-selector{
display: inline-flex !important;
align-items: center !important;
border: 1px solid #7f174a !important;
border-radius: 12px !important;
overflow: hidden !important;
}
body.woocommerce-cart .wc-block-components-quantity-selector__button{
width: 38px !important;
height: 38px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: #fff !important;
color: #7f174a !important;
border: 0 !important;
font-weight: 800 !important;
font-size: 20px !important;
cursor: pointer !important;
}
body.woocommerce-cart .wc-block-components-quantity-selector__button:hover{
background: #7f174a !important;
color: #fff !important;
}
body.woocommerce-cart .wc-block-components-quantity-selector__input{
width: 48px !important;
height: 38px !important;
line-height: 38px !important;
border: 0 !important;
text-align: center !important;
padding: 0 !important;
}
/* Make sure the remove button stays nicely aligned */
body.woocommerce-cart .wc-block-cart-item__remove-link,
body.woocommerce-cart .wc-block-components-product-remove-link{
margin-left: 0 !important;
}
/* =========================================================
TSS: QTY NUMBER NOT TOUCHING BORDERS (cart + cards)
========================================================= */
/* WC Blocks cart quantity input */
body.woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input,
body.woocommerce-cart .wc-block-components-quantity-selector input[type="number"]{
box-sizing: border-box !important;
height: 28px !important;
min-height: 0 !important;
line-height: 1 !important;
padding: 0 10px !important;
font-size: 13px !important;
text-align: center !important;
/* remove UA quirks */
-moz-appearance: textfield !important;
}
/* remove spinners where they still exist */
body.woocommerce-cart .wc-block-components-quantity-selector input[type="number"]::-webkit-outer-spin-button,
body.woocommerce-cart .wc-block-components-quantity-selector input[type="number"]::-webkit-inner-spin-button{
-webkit-appearance: none !important;
margin: 0 !important;
}
/* make the whole qty control vertically centered */
body.woocommerce-cart .wc-block-components-quantity-selector{
align-items: center !important;
}
/* Product-card custom qty input (your grid cards) */
body.archive.woocommerce .tss-qty__input,
body.tax-product_cat.woocommerce .tss-qty__input,
body.search-results.woocommerce .tss-qty__input{
box-sizing: border-box !important;
height: 28px !important;
min-height: 0 !important;
line-height: 1 !important;
padding: 0 10px !important;
font-size: 13px !important;
text-align: center !important;
-moz-appearance: textfield !important;
}
body.archive.woocommerce .tss-qty__input::-webkit-outer-spin-button,
body.archive.woocommerce .tss-qty__input::-webkit-inner-spin-button,
body.tax-product_cat.woocommerce .tss-qty__input::-webkit-outer-spin-button,
body.tax-product_cat.woocommerce .tss-qty__input::-webkit-inner-spin-button,
body.search-results.woocommerce .tss-qty__input::-webkit-outer-spin-button,
body.search-results.woocommerce .tss-qty__input::-webkit-inner-spin-button{
-webkit-appearance: none !important;
margin: 0 !important;
}
/* =========================================================
TSS: WC BLOCK QTY INPUT - STOP NUMBER "KISSING" BORDERS
(targets: .wc-block-components-quantity-selector__input)
========================================================= */
body.woocommerce-cart .wc-block-components-quantity-selector__input{
box-sizing: border-box !important;
height: 32px !important;
min-height: 0 !important;
padding: 0 12px !important;
font-size: 12px !important;
line-height: 32px !important; /* key: centers the numeral */
text-align: center !important;
}
/* keep buttons aligned to the same height */
body.woocommerce-cart .wc-block-components-quantity-selector__button{
height: 32px !important;
width: 32px !important;
}
/* =========================================================
TSS: WC BLOCK QTY INPUT - STOP KISSING
========================================================= */
body.woocommerce-cart .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input{
box-sizing: border-box !important;
height: 34px !important; /* keep your current control height */
line-height: 32px !important; /* slightly smaller so glyphs don't touch */
padding: 1px 12px !important; /* 1px vertical breathing room */
font-size: 12px !important; /* down from computed 13px */
text-align: center !important;
}
/* keep +/- matched to the input height */
body.woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button{
height: 34px !important;
width: 34px !important;
line-height: 1 !important;
}
/* =========================================================
TSS: WC BLOCK QTY INPUT - VERTICAL PADDING FIX
(Stops number touching borders)
========================================================= */
body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input{
box-sizing: border-box !important;
height: 34px !important;
line-height: 30px !important; /* was 34 */
padding-top: 1px !important; /* was 0 */
padding-bottom: 1px !important; /* was 0 */
padding-left: 0 !important;
padding-right: 0 !important;
font-size: 11px !important; /* one notch smaller */
text-align: center !important;
}
/* =========================================================
TSS: WC BLOCK QTY INPUT - OVERRIDE PADDING ZERO RULE
(Overrides the earlier rule that sets padding:0 + line-height:34)
========================================================= */
body.woocommerce-cart #page .wp-block-woocommerce-cart .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input{
line-height: 30px !important;
padding: 1px 0 !important; /* shorthand beats padding:0 !important */
font-size: 11px !important;
}
/* =========================================================
TSS: WC BLOCK QTY INPUT - FINAL TWEAK (STOP KISSING)
========================================================= */
body.woocommerce-cart #page .wp-block-woocommerce-cart .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input{
font-size: 10px !important;
font-weight: 600 !important;
line-height: 28px !important;
padding: 2px 0 !important;
transform: translateY(-0.5px) !important;
}
/* =========================================================
TSS: WC BLOCK QTY INPUT - INNER SHRINK + WRAPPER PADDING
(fixes number 'kissing' the pill borders)
========================================================= */
body.woocommerce-cart #page .wp-block-woocommerce-cart .wc-block-components-quantity-selector{
/* create air inside the outer pill */
padding: 3px !important;
box-sizing: border-box !important;
align-items: center !important;
}
/* shrink the inner controls so they don't touch the outer border */
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input{
height: 28px !important;
line-height: 28px !important;
font-size: 10px !important;
font-weight: 600 !important;
padding: 0 8px !important; /* horizontal comfort */
box-sizing: border-box !important;
-moz-appearance: textfield !important;
appearance: textfield !important;
}
/* match +/- to the new inner height */
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button{
height: 28px !important;
width: 28px !important;
line-height: 28px !important;
box-sizing: border-box !important;
}
/* =========================================================
TSS: WC BLOCK QTY - REMOVE INNER INPUT PILL
(keeps outer pill, makes number look 'flat')
========================================================= */
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-components-quantity-selector{
align-items: center !important;
}
/* remove the input's own pill */
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input{
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
/* keep it nicely centred */
height: 32px !important;
line-height: 32px !important;
padding: 0 6px !important;
margin: 0 !important;
text-align: center !important;
/* keep it from looking chunky */
font-size: 11px !important;
font-weight: 700 !important;
-moz-appearance: textfield !important;
appearance: textfield !important;
}
/* stop focus ring/outline making it look like a box again */
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input:focus{
outline: none !important;
}
/* optional: a subtle divider between input and +/- (matches your current style) */
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input{
border-left: 1px solid rgba(127, 23, 74, 0.22) !important;
border-right: 1px solid rgba(127, 23, 74, 0.22) !important;
}
/* =========================================================
TSS: WC BLOCK QTY - REMOVE INNER INPUT PILL (NO LEFT DIVIDER)
========================================================= */
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input{
border-left: 0 !important; /* keep right divider, remove left */
}
/* =========================================================
TSS: WC BLOCK CART - STYLE PROCEED TO CHECKOUT
========================================================= */
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-cart__submit-container{
margin-top: 14px !important;
}
/* Primary CTA */
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-cart__submit-container a,
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-cart__submit-container .wc-block-components-button,
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-components-checkout-button{
background: var(--tss-maroon, #7f174a) !important;
color: #fff !important;
border: 1px solid var(--tss-maroon, #7f174a) !important;
border-radius: 12px !important;
padding: 14px 18px !important;
font-weight: 700 !important;
text-transform: none !important;
letter-spacing: 0 !important;
text-decoration: none !important;
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important; /* make it feel like a proper CTA */
box-shadow: 0 10px 24px rgba(0,0,0,.10) !important;
}
/* Hover/Focus */
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-cart__submit-container a:hover,
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-cart__submit-container .wc-block-components-button:hover,
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-components-checkout-button:hover{
filter: brightness(0.95) !important;
}
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-cart__submit-container a:focus,
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-cart__submit-container .wc-block-components-button:focus,
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-components-checkout-button:focus{
outline: 2px solid rgba(127,23,74,.35) !important;
outline-offset: 2px !important;
}
/* =========================================================
TSS: WC BLOCK CART - CHECKOUT CTA TEXT/BOX FIX
- force white text (incl children)
- remove inner square/box borders/outlines
========================================================= */
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-cart__submit-container a,
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-cart__submit-container .wc-block-components-button,
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-components-checkout-button{
color: #fff !important;
text-decoration: none !important;
border-color: var(--tss-maroon, #7f174a) !important;
outline: none !important;
}
/* Force any inner wrappers/spans/icons to be white and box-free */
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-cart__submit-container a *,
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-cart__submit-container .wc-block-components-button *,
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-components-checkout-button *{
color: #fff !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
text-shadow: none !important;
}
/* Kill any pseudo-element boxes drawn around the label */
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-cart__submit-container a::before,
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-cart__submit-container a::after,
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-cart__submit-container .wc-block-components-button::before,
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-cart__submit-container .wc-block-components-button::after,
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-components-checkout-button::before,
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-components-checkout-button::after{
content: none !important;
display: none !important;
}
/* Keep an accessible focus style, but not a random inner box */
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-cart__submit-container a:focus-visible,
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-cart__submit-container .wc-block-components-button:focus-visible,
body.woocommerce-cart #page .wp-block-woocommerce-cart
.wc-block-components-checkout-button:focus-visible{
outline: 2px solid rgba(255,255,255,.65) !important;
outline-offset: 2px !important;
}
/* =========================================================
TSS: CHECKOUT (/checkout) POLISH (Woo Blocks)
- widen layout + sensible spacing
- card styling for main/sidebar
- inputs + headings
- fix giant tick / checkbox styling clashes
- style Place order button
========================================================= */
body.woocommerce-checkout{
--tss-maroon: #7f174a;
}
/* Make the overall checkout area a sensible width */
body.woocommerce-checkout .wp-block-woocommerce-checkout,
body.woocommerce-checkout .wc-block-checkout,
body.woocommerce-checkout .wc-block-components-sidebar-layout{
max-width: 1100px !important;
margin: 32px auto !important;
padding: 0 16px !important;
}
/* Ensure main+sidebar actually sit nicely */
body.woocommerce-checkout .wc-block-components-sidebar-layout{
gap: 24px !important;
}
/* Card styling */
body.woocommerce-checkout .wc-block-components-main,
body.woocommerce-checkout .wc-block-components-sidebar{
background: #fff !important;
border: 1px solid rgba(127, 23, 74, 0.14) !important;
border-radius: 16px !important;
padding: 22px !important;
}
/* Desktop: keep order summary visible and stop everything collapsing into a skinny column */
@media (min-width: 992px){
body.woocommerce-checkout .wc-block-components-sidebar{
position: sticky !important;
top: 110px !important;
align-self: flex-start !important;
}
}
/* Titles/headings */
body.woocommerce-checkout .wc-block-components-title,
body.woocommerce-checkout .wc-block-checkout__title,
body.woocommerce-checkout .wc-block-components-checkout-step__title,
body.woocommerce-checkout h1,
body.woocommerce-checkout h2,
body.woocommerce-checkout h3{
color: var(--tss-maroon) !important;
font-weight: 800 !important;
}
/* Inputs (text/select) */
body.woocommerce-checkout .wc-block-components-text-input input,
body.woocommerce-checkout .wc-block-components-text-input textarea,
body.woocommerce-checkout .wc-block-components-select .wc-block-components-select__select,
body.woocommerce-checkout input[type="text"],
body.woocommerce-checkout input[type="email"],
body.woocommerce-checkout input[type="tel"],
body.woocommerce-checkout select,
body.woocommerce-checkout textarea{
border: 1px solid rgba(127, 23, 74, 0.22) !important;
border-radius: 10px !important;
padding: 10px 12px !important;
box-shadow: none !important;
}
body.woocommerce-checkout .wc-block-components-text-input input:focus,
body.woocommerce-checkout .wc-block-components-text-input textarea:focus,
body.woocommerce-checkout .wc-block-components-select .wc-block-components-select__select:focus,
body.woocommerce-checkout input:focus,
body.woocommerce-checkout select:focus,
body.woocommerce-checkout textarea:focus{
outline: none !important;
border-color: var(--tss-maroon) !important;
}
/* ---- GIANT TICK FIX ----
Force native checkbox/radio rendering inside checkout blocks.
This avoids theme pseudo-element rules blowing the mark up to stupid sizes.
*/
body.woocommerce-checkout .wc-block-components-checkbox__input,
body.woocommerce-checkout .wc-block-components-radio-control__input{
-webkit-appearance: auto !important;
appearance: auto !important;
width: 16px !important;
height: 16px !important;
margin: 0 8px 0 0 !important;
}
/* Also neutralise any label pseudo-elements that might be painting huge checks */
body.woocommerce-checkout .wc-block-components-checkbox label::before,
body.woocommerce-checkout .wc-block-components-checkbox label::after,
body.woocommerce-checkout .wc-block-components-radio-control label::before,
body.woocommerce-checkout .wc-block-components-radio-control label::after{
content: none !important;
display: none !important;
}
/* Buttons: general */
body.woocommerce-checkout .wc-block-components-button,
body.woocommerce-checkout button,
body.woocommerce-checkout .wp-element-button{
border-radius: 999px !important;
}
/* Place order button */
body.woocommerce-checkout .wc-block-components-checkout-place-order-button,
body.woocommerce-checkout button.wc-block-components-checkout-place-order-button,
body.woocommerce-checkout .wp-block-woocommerce-checkout-place-order-block button{
background: var(--tss-maroon) !important;
color: #fff !important;
border: none !important;
padding: 14px 22px !important;
font-weight: 800 !important;
box-shadow: none !important;
text-decoration: none !important;
}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover,
body.woocommerce-checkout .wp-block-woocommerce-checkout-place-order-block button:hover{
filter: brightness(0.95);
}
/* Make the order summary list less “stack of mush” */
body.woocommerce-checkout .wc-block-components-order-summary-item__description,
body.woocommerce-checkout .wc-block-components-order-summary-item__total-price{
font-size: 14px !important;
}
body.woocommerce-checkout .wc-block-components-order-summary-item{
padding: 10px 0 !important;
border-bottom: 1px solid rgba(127, 23, 74, 0.10) !important;
}
body.woocommerce-checkout .wc-block-components-order-summary-item:last-child{
border-bottom: none !important;
}
/* =========================================================
TSS: CHECKOUT (/checkout) REFINEMENT
- defeat theme bootstrap narrowing (col-md-10 offset-md-1)
- force 2-col layout on desktop
- fix giant checkbox tick (Blocks mark SVG)
========================================================= */
body.woocommerce-checkout{
--tss-maroon: #7f174a;
}
/* 0) Stop the theme/bootstrap grid from constraining checkout */
body.woocommerce-checkout .site-content .content-area.container,
body.woocommerce-checkout .site-content .content-area.container > .row,
body.woocommerce-checkout .site-content .content-area.container > .row > [class*="col-"]{
width: 100% !important;
max-width: none !important;
}
body.woocommerce-checkout .site-content .content-area.container > .row{
margin-left: 0 !important;
margin-right: 0 !important;
}
body.woocommerce-checkout .site-content .content-area.container > .row > [class*="col-"]{
flex: 0 0 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important; /* kills offset-md-* */
}
body.woocommerce-checkout .offset-md-1,
body.woocommerce-checkout [class*="offset-"]{
margin-left: 0 !important;
}
/* 1) Let the checkout block actually use a sensible width */
body.woocommerce-checkout .wp-block-woocommerce-checkout,
body.woocommerce-checkout .wc-block-checkout,
body.woocommerce-checkout .wc-block-components-sidebar-layout{
max-width: 1200px !important;
margin: 28px auto !important;
padding: 0 16px !important;
}
/* 2) Force 2-column layout on desktop */
@media (min-width: 992px){
body.woocommerce-checkout .wc-block-components-sidebar-layout{
display: grid !important;
grid-template-columns: minmax(0, 1fr) 380px !important;
gap: 24px !important;
align-items: start !important;
}
body.woocommerce-checkout .wc-block-components-main{
grid-column: 1 !important;
}
body.woocommerce-checkout .wc-block-components-sidebar{
grid-column: 2 !important;
position: sticky !important;
top: 110px !important;
align-self: start !important;
}
}
/* 3) Make the checkbox/radio marks behave (kills giant tick) */
body.woocommerce-checkout .wc-block-components-checkbox__mark,
body.woocommerce-checkout .wc-block-components-radio-control__mark{
width: 16px !important;
height: 16px !important;
flex: 0 0 16px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 8px 0 0 !important;
}
body.woocommerce-checkout .wc-block-components-checkbox__mark svg,
body.woocommerce-checkout .wc-block-components-radio-control__mark svg{
width: 16px !important;
height: 16px !important;
display: block !important;
}
body.woocommerce-checkout .wc-block-components-checkbox__mark path,
body.woocommerce-checkout .wc-block-components-radio-control__mark path{
stroke: var(--tss-maroon) !important;
}
/* As a backstop: prevent any pseudo-element “tick painters” */
body.woocommerce-checkout .wc-block-components-checkbox label::before,
body.woocommerce-checkout .wc-block-components-checkbox label::after,
body.woocommerce-checkout .wc-block-components-radio-control label::before,
body.woocommerce-checkout .wc-block-components-radio-control label::after{
content: none !important;
display: none !important;
}
/* =========================================================
TSS: CHECKOUT (/checkout) FINAL POLISH
- widen overall container + sidebar
- hide stray left search widget on checkout
- make Place Order a proper maroon pill (white text, no inner box)
========================================================= */
body.woocommerce-checkout{
--tss-maroon: #7f174a;
}
/* 1) Widen checkout layout a bit more */
body.woocommerce-checkout .wp-block-woocommerce-checkout,
body.woocommerce-checkout .wc-block-checkout,
body.woocommerce-checkout .wc-block-components-sidebar-layout{
max-width: 1320px !important;
margin: 22px auto !important;
padding: 0 18px !important;
}
@media (min-width: 992px){
body.woocommerce-checkout .wc-block-components-sidebar-layout{
grid-template-columns: minmax(0, 1fr) 420px !important;
gap: 28px !important;
}
}
/* 2) Give the main/summary panels a consistent “card” feel */
body.woocommerce-checkout .wc-block-components-main,
body.woocommerce-checkout .wc-block-components-sidebar{
background: #fff !important;
border: 1px solid rgba(127, 23, 74, 0.12) !important;
border-radius: 14px !important;
padding: 18px !important;
box-shadow: 0 10px 26px rgba(0,0,0,0.08) !important;
}
/* 3) Hide the stray left floating search box on checkout */
body.woocommerce-checkout .aws-container,
body.woocommerce-checkout .aws-search-form,
body.woocommerce-checkout .aws-search-result{
display: none !important;
}
/* 4) Style the Place Order button (Woo Blocks) */
body.woocommerce-checkout .wc-block-components-checkout-place-order-button,
body.woocommerce-checkout button.wc-block-components-checkout-place-order-button,
body.woocommerce-checkout .wc-block-components-button.wc-block-components-checkout-place-order-button{
background: var(--tss-maroon) !important;
color: #fff !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 999px !important;
padding: 14px 22px !important;
font-weight: 700 !important;
}
/* kill any inner outline/box */
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:before,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:after{
content: none !important;
display: none !important;
}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover{
filter: brightness(0.95) !important;
}
/* 5) Make the “Return to basket” look like a tidy link, not a boxed button */
body.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button,
body.woocommerce-checkout a.wc-block-components-checkout-return-to-cart-button{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: var(--tss-maroon) !important;
padding: 0 !important;
text-decoration: underline !important;
font-weight: 600 !important;
}
/* =========================================================
TSS: CHECKOUT ACTION BUTTONS POLISH
- remove inner black "text box" on Place Order
- make Return to Basket a clean secondary pill
- align actions neatly
========================================================= */
body.woocommerce-checkout{
--tss-maroon: #7f174a;
}
/* 1) Actions row layout (covers common Woo Blocks wrappers) */
body.woocommerce-checkout .wc-block-checkout__actions,
body.woocommerce-checkout .wc-block-components-checkout__actions,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button__container{
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 14px !important;
margin-top: 14px !important;
padding-top: 14px !important;
border-top: 1px solid rgba(127, 23, 74, 0.12) !important;
}
@media (max-width: 640px){
body.woocommerce-checkout .wc-block-checkout__actions,
body.woocommerce-checkout .wc-block-components-checkout__actions,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button__container{
flex-direction: column-reverse !important;
align-items: stretch !important;
}
}
/* 2) Return to Basket: tidy secondary pill */
body.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button,
body.woocommerce-checkout a.wc-block-components-checkout-return-to-cart-button{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 12px 16px !important;
border-radius: 999px !important;
background: #fff !important;
border: 1px solid rgba(127, 23, 74, 0.35) !important;
color: var(--tss-maroon) !important;
font-weight: 700 !important;
text-decoration: none !important;
box-shadow: none !important;
}
body.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button:hover,
body.woocommerce-checkout a.wc-block-components-checkout-return-to-cart-button:hover{
background: var(--tss-maroon) !important;
color: #fff !important;
border-color: var(--tss-maroon) !important;
}
/* 3) Place Order: clean primary pill (white text, no inner box) */
body.woocommerce-checkout .wc-block-components-checkout-place-order-button,
body.woocommerce-checkout button.wc-block-components-checkout-place-order-button,
body.woocommerce-checkout .wc-block-components-button.wc-block-components-checkout-place-order-button{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: var(--tss-maroon) !important;
color: #fff !important;
border: 0 !important;
border-radius: 999px !important;
padding: 12px 18px !important;
min-height: 44px !important;
font-weight: 800 !important;
letter-spacing: 0.2px !important;
box-shadow: none !important;
outline: none !important;
}
/* Kill the inner "black box" by forcing descendants to be transparent */
body.woocommerce-checkout .wc-block-components-checkout-place-order-button *,
body.woocommerce-checkout button.wc-block-components-checkout-place-order-button *{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
outline: none !important;
color: inherit !important;
}
/* Focus state: nice maroon ring, not a black rectangle */
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:focus,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:focus-visible{
box-shadow: 0 0 0 3px rgba(127, 23, 74, 0.25) !important;
}
/* =========================================================
TSS: CHECKOUT ACTIONS - LINE UP PILLS
========================================================= */
body.woocommerce-checkout .wc-block-checkout__actions,
body.woocommerce-checkout .wc-block-components-checkout__actions,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button__container{
align-items: center !important;
}
/* Make BOTH buttons the same height + vertically centered */
body.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button,
body.woocommerce-checkout a.wc-block-components-checkout-return-to-cart-button,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button,
body.woocommerce-checkout button.wc-block-components-checkout-place-order-button,
body.woocommerce-checkout .wc-block-components-button.wc-block-components-checkout-place-order-button{
min-height: 46px !important;
height: 46px !important;
padding: 0 18px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
font-size: 16px !important;
}
/* Nudge the "Return" arrow spacing so it doesn't feel off-centre */
body.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button::before,
body.woocommerce-checkout a.wc-block-components-checkout-return-to-cart-button::before{
margin-right: 8px !important;
}
/* =========================================================
TSS: CHECKOUT BUTTON ALIGN (Return to Basket + Place Order)
- forces perfect vertical alignment + consistent pill sizing
========================================================= */
body.woocommerce-checkout .wc-block-checkout__actions_row{
display: flex !important;
align-items: center !important;
gap: 16px !important;
flex-wrap: wrap !important;
}
/* Make BOTH controls identical box-model so they line up perfectly */
body.woocommerce-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-return-to-cart-button,
body.woocommerce-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button{
height: 48px !important;
min-height: 48px !important;
padding: 0 22px !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
vertical-align: middle !important;
border-radius: 999px !important;
}
/* SVG icon can create baseline weirdness unless it's block-level */
body.woocommerce-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-return-to-cart-button svg{
display: block !important;
margin-right: 10px !important;
}
/* Keep link styles tidy */
body.woocommerce-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-return-to-cart-button{
text-decoration: none !important;
}
/* Optional: nicer focus without a random square */
body.woocommerce-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-return-to-cart-button:focus,
body.woocommerce-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:focus{
outline: none !important;
}
body.woocommerce-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-return-to-cart-button:focus-visible,
body.woocommerce-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:focus-visible{
box-shadow: 0 0 0 3px rgba(127,23,74,.25) !important;
}
/* =========================================================
TSS: CHECKOUT ORDER SUMMARY TIDY
- title uses heading font + maroon
- product name smaller (not huge)
- quantity clearer (Qty: n)
- unit vs line total clearer
========================================================= */
body.woocommerce-checkout .wc-block-components-order-summary,
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block{
--tss-maroon: #7f174a;
}
/* Title */
body.woocommerce-checkout .wc-block-components-order-summary__title,
body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-order-summary__title,
body.woocommerce-checkout .wc-block-components-order-summary h2{
font-family: var(--heading-font, "Jost", sans-serif) !important;
color: var(--tss-maroon) !important;
font-weight: 800 !important;
letter-spacing: 0.2px !important;
font-size: 20px !important;
line-height: 1.2 !important;
margin-bottom: 12px !important;
}
/* Reduce the product name styling inside order summary only */
body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-product-name,
body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__name,
body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-product-name a,
body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__name a{
font-family: var(--heading-font, "Jost", sans-serif) !important;
font-size: 16px !important;
line-height: 1.2 !important;
font-weight: 800 !important;
color: var(--tss-maroon) !important;
text-decoration: none !important;
}
/* Item layout spacing (stops “everything stacked weirdly”) */
body.woocommerce-checkout .wc-block-components-order-summary-item{
padding: 14px 0 !important;
}
body.woocommerce-checkout .wc-block-components-order-summary-item__description{
display: grid !important;
grid-auto-rows: min-content !important;
row-gap: 6px !important;
}
/* Quantity: make it obvious and not “random 1 floating above the image” */
body.woocommerce-checkout .wc-block-components-order-summary-item__quantity{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 26px !important;
padding: 0 10px !important;
border-radius: 999px !important;
background: #fff !important;
border: 1px solid rgba(127, 23, 74, .30) !important;
color: var(--tss-maroon) !important;
font-weight: 800 !important;
font-size: 13px !important;
line-height: 1 !important;
margin-bottom: 8px !important;
}
body.woocommerce-checkout .wc-block-components-order-summary-item__quantity::before{
content: "Qty: " !important;
font-weight: 700 !important;
color: rgba(34,34,34,.70) !important;
}
/* Prices: make unit vs line total clearer.
Woo Blocks can render either “price + total” or “individual + total” with slightly different classnames,
so we cover both patterns. */
/* If there is a dedicated “total” element */
body.woocommerce-checkout .wc-block-components-order-summary-item__total-price,
body.woocommerce-checkout .wc-block-components-order-summary-item__total{
font-weight: 900 !important;
color: #222 !important;
font-size: 15px !important;
}
body.woocommerce-checkout .wc-block-components-order-summary-item__total-price::before,
body.woocommerce-checkout .wc-block-components-order-summary-item__total::before{
content: "Line: " !important;
font-weight: 700 !important;
color: rgba(34,34,34,.60) !important;
}
/* If there is a dedicated “unit/individual price” element */
body.woocommerce-checkout .wc-block-components-order-summary-item__individual-price,
body.woocommerce-checkout .wc-block-components-order-summary-item__price,
body.woocommerce-checkout .wc-block-components-order-summary-item__unit-price{
font-weight: 700 !important;
color: #222 !important;
font-size: 14px !important;
}
body.woocommerce-checkout .wc-block-components-order-summary-item__individual-price::before,
body.woocommerce-checkout .wc-block-components-order-summary-item__price::before,
body.woocommerce-checkout .wc-block-components-order-summary-item__unit-price::before{
content: "Unit: " !important;
font-weight: 700 !important;
color: rgba(34,34,34,.60) !important;
}
/* If prices are just stacked as two plain amounts inside a prices wrapper, label first/last */
body.woocommerce-checkout .wc-block-components-order-summary-item__prices{
display: grid !important;
row-gap: 4px !important;
}
body.woocommerce-checkout .wc-block-components-order-summary-item__prices > *{
margin: 0 !important;
}
/* Totals section readability */
body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-totals-wrapper,
body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-totals-item{
font-size: 14px !important;
}
body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-totals-item__label{
color: rgba(34,34,34,.70) !important;
font-weight: 700 !important;
}
body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-totals-item__value{
color: #222 !important;
font-weight: 900 !important;
}
/* =========================================================
TSS: CHECKOUT ORDER SUMMARY REFINEMENTS V2
- "Line" -> "Total"
- Order summary title: brand font + maroon
- Coupon + totals area: cleaner hierarchy
========================================================= */
body.woocommerce-checkout{
--tss-maroon: #7f174a;
}
/* 1) Replace "Line:" with "Total:" (override previous v1 rules) */
body.woocommerce-checkout .wc-block-components-order-summary-item__total-price::before,
body.woocommerce-checkout .wc-block-components-order-summary-item__total::before{
content: "Total: " !important;
}
/* 2) Order summary title (the one currently grey) */
body.woocommerce-checkout .wc-block-components-order-summary__title,
body.woocommerce-checkout .wc-block-components-order-summary__title-text,
body.woocommerce-checkout .wc-block-components-order-summary__header h2,
body.woocommerce-checkout .wc-block-components-order-summary__header .wc-block-components-order-summary__title{
font-family: var(--heading-font, "Jost", sans-serif) !important;
color: var(--tss-maroon) !important;
font-weight: 900 !important;
font-size: 20px !important;
line-height: 1.2 !important;
letter-spacing: 0.2px !important;
margin: 0 0 10px 0 !important;
}
/* Subtle divider below header area (keeps it “designed”) */
body.woocommerce-checkout .wc-block-components-order-summary__header{
padding-bottom: 10px !important;
border-bottom: 1px solid rgba(127, 23, 74, .15) !important;
margin-bottom: 12px !important;
}
/* 3) Coupon + totals section cleanup */
body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-totals-wrapper{
margin-top: 14px !important;
padding-top: 12px !important;
border-top: 1px solid rgba(127, 23, 74, .12) !important;
}
/* “Add coupons” row/button (Blocks uses panel styles) */
body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-totals-coupon,
body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-totals-coupon__form,
body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-panel{
margin: 0 0 10px 0 !important;
}
body.woocommerce-checkout .wc-block-components-order-summary button.wc-block-components-panel__button,
body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-totals-coupon__button{
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 10px 12px !important;
border-radius: 12px !important;
background: #fff !important;
border: 1px solid rgba(127, 23, 74, .22) !important;
color: #222 !important;
font-weight: 800 !important;
text-decoration: none !important;
box-shadow: none !important;
}
/* When coupon panel is open, give it a gentle fill */
body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-panel.is-open button.wc-block-components-panel__button{
background: rgba(127, 23, 74, .05) !important;
border-color: rgba(127, 23, 74, .30) !important;
}
/* Coupon input area spacing */
body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-panel__content,
body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-totals-coupon__content{
padding: 10px 2px 2px 2px !important;
}
/* Totals rows: align + improve hierarchy */
body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-totals-item{
display: flex !important;
align-items: baseline !important;
justify-content: space-between !important;
gap: 12px !important;
padding: 8px 0 !important;
border-top: 1px solid rgba(0,0,0,.06) !important;
}
body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-totals-item:first-child{
border-top: 0 !important;
}
body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-totals-item__label{
color: rgba(34,34,34,.70) !important;
font-weight: 800 !important;
}
body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-totals-item__value{
color: #222 !important;
font-weight: 900 !important;
}
/* Total row highlight */
body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-totals-item--total,
body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-totals-item.is-total{
padding: 12px 12px !important;
margin-top: 10px !important;
border-radius: 12px !important;
background: rgba(127, 23, 74, .06) !important;
border: 1px solid rgba(127, 23, 74, .18) !important;
}
body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-totals-item--total .wc-block-components-totals-item__label,
body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-totals-item--total .wc-block-components-totals-item__value{
color: var(--tss-maroon) !important;
font-weight: 950 !important;
font-size: 15px !important;
}
/* =========================================================
TSS: CHECKOUT ORDER SUMMARY TITLE FORCE
(Woo Blocks sometimes renders it as a button label)
========================================================= */
body.woocommerce-checkout{
--tss-maroon: #7f174a;
}
/* Hit every known “Order summary” title location */
body.woocommerce-checkout .wc-block-components-order-summary__title,
body.woocommerce-checkout .wc-block-components-order-summary__title-text,
body.woocommerce-checkout .wc-block-components-order-summary__header h2,
body.woocommerce-checkout .wc-block-components-order-summary__header h3,
body.woocommerce-checkout .wc-block-components-order-summary__button-text,
body.woocommerce-checkout button.wc-block-components-order-summary__button,
body.woocommerce-checkout button.wc-block-components-order-summary__button .wc-block-components-order-summary__button-text,
body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-panel__button,
body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-panel__button *{
font-family: var(--heading-font, "Jost", sans-serif) !important;
color: var(--tss-maroon) !important;
font-weight: 900 !important;
letter-spacing: .2px !important;
}
/* Size specifically for the “Order summary” label */
body.woocommerce-checkout .wc-block-components-order-summary__title,
body.woocommerce-checkout .wc-block-components-order-summary__button-text,
body.woocommerce-checkout .wc-block-components-order-summary__header h2,
body.woocommerce-checkout .wc-block-components-order-summary__header h3{
font-size: 20px !important;
line-height: 1.2 !important;
}
/* Ensure no grey background/box is making it look “wrong” */
body.woocommerce-checkout .wc-block-components-order-summary__header,
body.woocommerce-checkout button.wc-block-components-order-summary__button{
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* =========================================================
TSS: CHECKOUT ORDER SUMMARY TITLE (REAL SELECTOR)
========================================================= */
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title,
body.woocommerce-checkout p.wc-block-components-checkout-order-summary__title-text[role="heading"]{
font-family: var(--heading-font, "Jost", sans-serif) !important;
color: var(--tss-maroon, #7f174a) !important;
font-weight: 900 !important;
font-size: 20px !important;
line-height: 1.2 !important;
margin: 0 !important;
}
/* remove any “default grey label” look */
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 0 10px 0 !important;
}
/* =========================================================
TSS: CHECKOUT ORDER SUMMARY TOTALS POLISH
========================================================= */
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block{
margin-top: 14px !important;
padding-top: 12px !important;
border-top: 1px solid rgba(127, 23, 74, 0.14) !important;
}
/* Make each totals row a clear left/right pair */
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-item{
display: flex !important;
align-items: baseline !important;
justify-content: space-between !important;
gap: 14px !important;
padding: 8px 0 !important;
margin: 0 !important;
border-bottom: 1px solid rgba(127, 23, 74, 0.10) !important;
}
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-item:last-child{
border-bottom: 0 !important;
}
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-item__label{
color: rgba(0,0,0,0.62) !important;
font-weight: 600 !important;
font-size: 14px !important;
}
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-item__value{
color: #111 !important;
font-weight: 800 !important;
font-size: 14px !important;
text-align: right !important;
white-space: nowrap !important;
}
/* Coupons: make it look like an action row */
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-coupon-link,
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block button.wc-block-components-totals-coupon-link{
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 8px 12px !important;
border-radius: 999px !important;
border: 1px solid rgba(127, 23, 74, 0.28) !important;
background: #fff !important;
color: var(--tss-maroon, #7f174a) !important;
font-weight: 700 !important;
text-decoration: none !important;
}
/* Total: stronger emphasis */
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-item--total{
border-top: 1px solid rgba(127, 23, 74, 0.22) !important;
margin-top: 10px !important;
padding-top: 12px !important;
}
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-item--total .wc-block-components-totals-item__label{
color: var(--tss-maroon, #7f174a) !important;
font-weight: 900 !important;
font-size: 16px !important;
}
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-item--total .wc-block-components-totals-item__value{
color: var(--tss-maroon, #7f174a) !important;
font-weight: 900 !important;
font-size: 18px !important;
}
/* =========================================================
TSS: CHECKOUT ORDER SUMMARY TOTALS TIGHTEN
========================================================= */
/* Reduce vertical whitespace */
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block{
margin-top: 10px !important;
padding-top: 10px !important;
}
/* Tighter rows + force value to the far right */
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-item{
padding: 6px 0 !important;
gap: 10px !important;
}
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-item__label{
flex: 1 1 auto !important;
font-size: 13px !important;
line-height: 1.2 !important;
}
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-item__value{
flex: 0 0 auto !important;
margin-left: auto !important;
font-size: 13px !important;
line-height: 1.2 !important;
}
/* Coupons control: slightly smaller so it doesn’t dominate */
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-coupon-link,
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block button.wc-block-components-totals-coupon-link{
padding: 6px 10px !important;
font-size: 13px !important;
}
/* Total row: still prominent, but less tall */
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-item--total{
margin-top: 8px !important;
padding-top: 10px !important;
}
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-item--total .wc-block-components-totals-item__label{
font-size: 15px !important;
}
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-item--total .wc-block-components-totals-item__value{
font-size: 17px !important;
}
/* =========================================================
TSS: CHECKOUT COUPONS DIVIDERS (above + below Add coupons)
========================================================= */
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-coupon{
border-top: 1px solid #eee !important;
border-bottom: 1px solid #eee !important;
padding: 10px 0 !important;
margin: 10px 0 !important;
}
/* Fallback: if the wrapper class differs, apply to the link’s immediate container */
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-coupon-link{
position: relative;
}
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-coupon-link::before,
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-coupon-link::after{
content: "";
display: block;
border-top: 1px solid #eee;
margin: 10px 0;
}
/* =========================================================
TSS: CHECKOUT COUPONS THEME (Woo Blocks)
========================================================= */
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-coupon__content{
padding: 10px 0 2px 0 !important;
}
/* Layout: input + button on one line */
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-coupon__content form{
display: flex !important;
gap: 12px !important;
align-items: flex-end !important;
flex-wrap: nowrap !important;
}
/* Label ("Enter code") */
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-coupon__content
.wc-block-components-text-input label{
color: rgba(34,34,34,.75) !important;
font-weight: 600 !important;
margin-bottom: 6px !important;
}
/* Input */
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-coupon__content
.wc-block-components-text-input input,
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-coupon__content
input[type="text"]{
height: 46px !important;
border-radius: 14px !important;
border: 1px solid rgba(127, 23, 74, 0.30) !important;
padding: 0 14px !important;
font-size: 15px !important;
line-height: 46px !important;
box-shadow: none !important;
background: #fff !important;
}
/* Focus state */
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-coupon__content
.wc-block-components-text-input input:focus,
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-coupon__content
input[type="text"]:focus{
border-color: #7f174a !important;
box-shadow: 0 0 0 3px rgba(127, 23, 74, 0.14) !important;
outline: none !important;
}
/* Apply button -> maroon pill, white text, remove square border */
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-coupon__content
button,
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-coupon__content
.wc-block-components-button{
height: 46px !important;
border-radius: 999px !important;
padding: 0 22px !important;
background: #7f174a !important;
color: #fff !important;
border: 0 !important;
box-shadow: none !important;
font-weight: 700 !important;
line-height: 1 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
}
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-coupon__content
button:hover,
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-coupon__content
.wc-block-components-button:hover{
filter: brightness(1.05) !important;
}
/* Tiny screens: stack neatly */
@media (max-width: 420px){
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-coupon__content form{
flex-wrap: wrap !important;
}
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-coupon__content button,
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-coupon__content .wc-block-components-button{
width: 100% !important;
}
}
/* =========================================================
TSS: CHECKOUT COUPONS LABEL + APPLY FIX (Woo Blocks)
- Put "Enter code" label above input
- Remove inner rectangle inside Apply pill
- Force Apply text white
========================================================= */
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block
.wc-block-components-totals-coupon__content .wc-block-components-text-input{
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
}
/* Label is after the input in DOM - reorder it above */
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block
.wc-block-components-totals-coupon__content .wc-block-components-text-input label{
order: 0 !important;
position: static !important;
transform: none !important;
margin: 0 0 4px 2px !important;
padding: 0 !important;
line-height: 1.2 !important;
font-size: 14px !important;
font-weight: 700 !important;
color: rgba(34,34,34,.75) !important;
}
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block
.wc-block-components-totals-coupon__content .wc-block-components-text-input input{
order: 1 !important;
}
/* APPLY button: kill inner box + force white text everywhere */
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block
.wc-block-components-totals-coupon__content button,
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block
.wc-block-components-totals-coupon__content .wc-block-components-button{
color: #fff !important;
outline: none !important;
}
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block
.wc-block-components-totals-coupon__content button::before,
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block
.wc-block-components-totals-coupon__content button::after,
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block
.wc-block-components-totals-coupon__content .wc-block-components-button::before,
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block
.wc-block-components-totals-coupon__content .wc-block-components-button::after{
content: none !important;
}
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block
.wc-block-components-totals-coupon__content button *,
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block
.wc-block-components-totals-coupon__content .wc-block-components-button *{
color: #fff !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
/* Keep a clean accessible focus ring (outer), not a weird inner box */
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block
.wc-block-components-totals-coupon__content button:focus-visible,
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block
.wc-block-components-totals-coupon__content .wc-block-components-button:focus-visible{
box-shadow: 0 0 0 3px rgba(127, 23, 74, 0.18) !important;
}
/* =========================================================
TSS: CHECKOUT COUPONS ALIGNMENT
- label above input
- input + Apply aligned on one row
========================================================= */
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block
.wc-block-components-totals-coupon__content{
display: grid !important;
grid-template-columns: 1fr auto !important;
column-gap: 16px !important;
align-items: end !important; /* aligns Apply with the input field */
}
/* Ensure the text-input wrapper provides the "bottom" edge for alignment */
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block
.wc-block-components-totals-coupon__content .wc-block-components-text-input{
margin: 0 !important;
}
/* Nudge button to match input height exactly */
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block
.wc-block-components-totals-coupon__content button,
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block
.wc-block-components-totals-coupon__content .wc-block-components-button{
height: 46px !important;
min-height: 46px !important;
padding: 0 22px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
margin: 0 !important;
}
/* =========================================================
TSS: CHECKOUT COUPONS ALIGNMENT v2
- align Apply with INPUT (not label)
========================================================= */
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block
.wc-block-components-totals-coupon__content{
display: flex !important;
gap: 16px !important;
align-items: flex-end !important; /* align bottoms */
}
/* Make left side flexible */
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block
.wc-block-components-totals-coupon__content .wc-block-components-text-input{
flex: 1 1 auto !important;
margin: 0 !important;
position: relative !important;
/* create space for the label, but keep wrapper height governed by the input */
padding-top: 22px !important;
padding-bottom: 0 !important;
}
/* Pull the label out of layout flow so it doesn't push the button down */
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block
.wc-block-components-totals-coupon__content .wc-block-components-text-input label,
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block
.wc-block-components-totals-coupon__content .wc-block-components-text-input__label{
position: absolute !important;
top: 0 !important;
left: 0 !important;
margin: 0 !important;
line-height: 1.2 !important;
}
/* Ensure the input sits cleanly under the label */
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block
.wc-block-components-totals-coupon__content .wc-block-components-text-input input{
margin: 0 !important;
}
/* Button: match input height + sit on the same baseline */
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block
.wc-block-components-totals-coupon__content button,
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block
.wc-block-components-totals-coupon__content .wc-block-components-button{
height: 46px !important;
min-height: 46px !important;
padding: 0 22px !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
}
/* =========================================================
TSS: CHECKOUT HIDE COUNTRY FIELD (Blocks)
- Hide Country/Region selector (still submitted/used)
========================================================= */
/* Hide the actual country select wrapper */
body.woocommerce-checkout .wc-block-components-address-form
.wc-block-components-address-form__country,
body.woocommerce-checkout .wc-block-components-address-form
.wc-block-components-country-input{
display: none !important;
}
/* Remove any gap the grid may reserve for it (safety) */
body.woocommerce-checkout .wc-block-components-address-form{
row-gap: 14px; /* keep overall spacing tidy */
}
/* =========================================================
TSS: CHECKOUT FIELD LABELS ABOVE INPUTS (Woo Blocks)
========================================================= */
/* Text inputs */
body.woocommerce-checkout .wc-block-components-text-input{
display: flex !important;
flex-direction: column !important;
}
body.woocommerce-checkout .wc-block-components-text-input > label{
order: 1 !important;
margin: 0 0 8px 0 !important;
line-height: 1.2 !important;
}
body.woocommerce-checkout .wc-block-components-text-input > input{
order: 2 !important;
}
/* Selects */
body.woocommerce-checkout .wc-block-components-select{
display: flex !important;
flex-direction: column !important;
}
body.woocommerce-checkout .wc-block-components-select > label{
order: 1 !important;
margin: 0 0 8px 0 !important;
line-height: 1.2 !important;
}
body.woocommerce-checkout .wc-block-components-select > select{
order: 2 !important;
}
/* Textareas (notes etc.) */
body.woocommerce-checkout .wc-block-components-textarea{
display: flex !important;
flex-direction: column !important;
}
body.woocommerce-checkout .wc-block-components-textarea > label{
order: 1 !important;
margin: 0 0 8px 0 !important;
line-height: 1.2 !important;
}
body.woocommerce-checkout .wc-block-components-textarea > textarea{
order: 2 !important;
}
/* =========================================================
TSS: CHECKOUT - RESTORE ADDRESS LINE 2 TOGGLE (address_2)
========================================================= */
body.woocommerce-checkout .wc-block-components-text-input.wc-block-components-address-form__address_2{
display: revert !important;
flex-direction: revert !important;
}
body.woocommerce-checkout .wc-block-components-address-form__address_2-toggle{
background: none !important;
border: 0 !important;
padding: 8px 0 !important;
color: var(--tss-maroon) !important;
font-weight: 700 !important;
cursor: pointer !important;
text-decoration: none !important;
}
/* =========================================================
TSS: CHECKOUT - Address line 2 always visible + label above
========================================================= */
body.woocommerce-checkout .wc-block-components-address-form__address_2-toggle{
display: none !important;
}
body.woocommerce-checkout .wc-block-components-text-input.wc-block-components-address-form__address_2{
display: flex !important;
flex-direction: column-reverse !important;
gap: 8px !important;
}
body.woocommerce-checkout .wc-block-components-text-input.wc-block-components-address-form__address_2 label{
margin: 0 !important;
}
/* =========================================================
TSS: CHECKOUT - Always show billing form (hide summary + Edit)
========================================================= */
body.woocommerce-checkout #billing-fields .wc-block-components-address-card,
body.woocommerce-checkout #billing-fields .wc-block-components-address-card__address,
body.woocommerce-checkout #billing-fields .wc-block-components-address-card__edit,
body.woocommerce-checkout #billing-fields .wc-block-components-address-card__edit-button,
body.woocommerce-checkout #billing-fields .wc-block-components-address-card__edit-button-wrapper{
display: none !important;
}
body.woocommerce-checkout #billing-fields .wc-block-components-address-form,
body.woocommerce-checkout #billing-fields .wc-block-components-address-form-wrapper,
body.woocommerce-checkout #billing-fields .wc-block-components-address-form__fields{
display: block !important;
}
/* =========================================================
TSS: CHECKOUT - PAYMENT OPTIONS POLISH
- radio aligned inline with method title
- method description always visible
- remove stray check icon on "Add a note to your order"
========================================================= */
body.woocommerce-checkout .wc-block-checkout__payment-method
.wc-block-components-radio-control__option{
display: flex !important;
align-items: flex-start !important;
gap: 12px !important;
}
body.woocommerce-checkout .wc-block-checkout__payment-method
.wc-block-components-radio-control__input{
margin-top: 4px !important;
flex: 0 0 auto !important;
}
body.woocommerce-checkout .wc-block-checkout__payment-method
.wc-block-components-radio-control__label{
display: block !important;
flex: 1 1 auto !important;
}
body.woocommerce-checkout .wc-block-checkout__payment-method
.wc-block-components-radio-control__description,
body.woocommerce-checkout .wc-block-checkout__payment-method
.wc-block-components-radio-control__option .wc-block-components-radio-control__description{
display: block !important;
max-height: none !important;
height: auto !important;
opacity: 1 !important;
visibility: visible !important;
margin: 6px 0 0 0 !important;
}
body.woocommerce-checkout .wc-block-checkout__payment-method
.wc-block-components-radio-control__description.is-hidden,
body.woocommerce-checkout .wc-block-checkout__payment-method
.wc-block-components-radio-control__description[hidden]{
display: block !important;
}
body.woocommerce-checkout .wc-block-checkout__order-notes
.wc-block-components-checkbox__label svg,
body.woocommerce-checkout .wc-block-checkout__order-notes
.wc-block-components-checkbox__label .wc-block-components-checkbox__mark{
display: none !important;
}
body.woocommerce-checkout .wc-block-checkout__order-notes
.wc-block-components-checkbox__label::before{
content: none !important;
display: none !important;
}
/* =========================================================
TSS: CHECKOUT - FORCE PAYMENT DESCRIPTIONS ALWAYS VISIBLE
========================================================= */
/* The payment method descriptions can be collapsed via max-height/overflow/opacity */
body.woocommerce-checkout .wc-block-checkout__payment-method
.wc-block-components-radio-control__option .wc-block-components-radio-control__description{
display: block !important;
max-height: none !important;
height: auto !important;
overflow: visible !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
margin-top: 6px !important;
}
/* Some installs render it as a “secondary label” */
body.woocommerce-checkout .wc-block-checkout__payment-method
.wc-block-components-radio-control__option .wc-block-components-radio-control__secondary-label{
display: block !important;
max-height: none !important;
height: auto !important;
overflow: visible !important;
opacity: 1 !important;
visibility: visible !important;
margin-top: 6px !important;
}
/* Kill any hidden/collapsed variants */
body.woocommerce-checkout .wc-block-checkout__payment-method
.wc-block-components-radio-control__description[hidden],
body.woocommerce-checkout .wc-block-checkout__payment-method
.wc-block-components-radio-control__secondary-label[hidden],
body.woocommerce-checkout .wc-block-checkout__payment-method
.wc-block-components-radio-control__description.is-hidden,
body.woocommerce-checkout .wc-block-checkout__payment-method
.wc-block-components-radio-control__secondary-label.is-hidden{
display: block !important;
}
/* =========================================================
TSS: CHECKOUT - FORCE PAYMENT DESCRIPTIONS ALWAYS VISIBLE (V2)
========================================================= */
/* HIGH SPECIFICITY: payment method radio options */
body.woocommerce-checkout #page .wp-block-woocommerce-checkout .wc-block-checkout__payment-method
.wc-block-components-radio-control__option .wc-block-components-radio-control__description,
body.woocommerce-checkout #page .wp-block-woocommerce-checkout .wc-block-checkout__payment-method
.wc-block-components-radio-control__option .wc-block-components-radio-control__secondary-label{
display: block !important;
max-height: none !important;
height: auto !important;
overflow: visible !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
/* Explicitly defeat the common “unselected options hide description” rules */
body.woocommerce-checkout #page .wp-block-woocommerce-checkout .wc-block-checkout__payment-method
.wc-block-components-radio-control__option:not(.is-selected) .wc-block-components-radio-control__description,
body.woocommerce-checkout #page .wp-block-woocommerce-checkout .wc-block-checkout__payment-method
.wc-block-components-radio-control__option:not(.is-selected) .wc-block-components-radio-control__secondary-label,
body.woocommerce-checkout #page .wp-block-woocommerce-checkout .wc-block-checkout__payment-method
.wc-block-components-radio-control__option:not(.is-checked) .wc-block-components-radio-control__description,
body.woocommerce-checkout #page .wp-block-woocommerce-checkout .wc-block-checkout__payment-method
.wc-block-components-radio-control__option:not(.is-checked) .wc-block-components-radio-control__secondary-label{
display: block !important;
max-height: none !important;
height: auto !important;
overflow: visible !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
/* If Woo sets aria-hidden/hidden, override those too */
body.woocommerce-checkout #page .wp-block-woocommerce-checkout .wc-block-checkout__payment-method
.wc-block-components-radio-control__description[hidden],
body.woocommerce-checkout #page .wp-block-woocommerce-checkout .wc-block-checkout__payment-method
.wc-block-components-radio-control__secondary-label[hidden],
body.woocommerce-checkout #page .wp-block-woocommerce-checkout .wc-block-checkout__payment-method
.wc-block-components-radio-control__description[aria-hidden="true"],
body.woocommerce-checkout #page .wp-block-woocommerce-checkout .wc-block-checkout__payment-method
.wc-block-components-radio-control__secondary-label[aria-hidden="true"]{
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
TSS: CHECKOUT - PAYMENT DESC ALWAYS VISIBLE (JS SUPPORT)
/* =========================================================
TSS: CHECKOUT - PAYMENT DESC ALWAYS VISIBLE (JS SUPPORT)
========================================================= */
body.woocommerce-checkout .wp-block-woocommerce-checkout .tss-payment-desc{
display: block !important;
margin: 6px 0 0 0 !important;
opacity: .9;
font-size: 14px;
line-height: 1.4;
}
/* =========================================================
TSS: CHECKOUT PAYMENT DESCRIPTIONS (DE-DUPE)
- Keep descriptions visible in the option rows
- Hide duplicate descriptions inside the selected accordion panel
========================================================= */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control__option .wc-block-components-radio-control__description,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control__option .wc-block-components-radio-control__option-description,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control__option .wc-block-checkout-payment-method__description{
display: block !important;
}
/* The duplicate tends to live in the expanded/accordion content for the selected method */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control__accordion-content .wc-block-components-radio-control__description,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control__accordion-content .wc-block-components-radio-control__option-description,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control__accordion-content .wc-block-checkout-payment-method__description{
display: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
TSS: CHECKOUT PAYMENT DESCRIPTIONS (DE-DUPE v2)
- Keep description visible inside each option row
- Hide the duplicate description block rendered under the selected method
========================================================= */
/* 1) Always show the inline descriptions (the good ones) */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control__option
.wc-block-components-radio-control__description,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control__option
.wc-block-components-radio-control__option-description,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control__option
.wc-block-checkout-payment-method__description{
display: block !important;
}
/* 2) Hide the “loose” duplicate that appears below the selected method
(usually a direct child of the payment method wrapper) */
body.woocommerce-checkout .wc-block-checkout .wc-block-checkout-payment-method__payment-method
> .wc-block-components-radio-control__description,
body.woocommerce-checkout .wc-block-checkout .wc-block-checkout-payment-method__payment-method
> .wc-block-components-radio-control__option-description,
body.woocommerce-checkout .wc-block-checkout .wc-block-checkout-payment-method__payment-method
> .wc-block-checkout-payment-method__description{
display: none !important;
}
/* Some installs wrap that loose block in a single div */
body.woocommerce-checkout .wc-block-checkout .wc-block-checkout-payment-method__payment-method
> div > .wc-block-components-radio-control__description,
body.woocommerce-checkout .wc-block-checkout .wc-block-checkout-payment-method__payment-method
> div > .wc-block-components-radio-control__option-description,
body.woocommerce-checkout .wc-block-checkout .wc-block-checkout-payment-method__payment-method
> div > .wc-block-checkout-payment-method__description{
display: none !important;
}
/* =========================================================
TSS: CHECKOUT PAYMENT - KILL DUPLICATE ACCORDION CONTENT
(we show descriptions inline, so hide the block accordion body)
========================================================= */
body.woocommerce-checkout .wc-block-checkout
.wc-block-checkout-payment-method-block
.wc-block-components-radio-control-accordion-content{
display: none !important;
}
/* Extra safety: target Woo’s generated IDs for payment-method accordion bodies */
body.woocommerce-checkout .wc-block-checkout
[id^="radio-control-wc-payment-method-options-"][id$="__content"]{
display: none !important;
}
/* =========================================================
TSS: CHECKOUT - REMOVE STRAY CHECK ICON NEXT TO "Add a note to your order"
(keep the real checkbox, just remove the extra ✓ glyph)
========================================================= */
body.woocommerce-checkout .wc-block-checkout__order-notes input[type="checkbox"] + svg,
body.woocommerce-checkout .wc-block-checkout__order-notes input[type="checkbox"] + .wc-block-components-checkbox__mark,
body.woocommerce-checkout .wc-block-checkout__order-notes input[type="checkbox"] + span svg{
display: none !important;
}
/* If the tick was injected via pseudo-element */
body.woocommerce-checkout .wc-block-checkout__order-notes label::before,
body.woocommerce-checkout .wc-block-checkout__order-notes .wc-block-components-checkbox__label::before{
content: none !important;
display: none !important;
}
/* =========================================================
TSS: CHECKOUT MOBILE - PREVENT DUPLICATE ORDER SUMMARY
Keep sidebar summary, hide the mobile duplicate that Woo adds in the main column
========================================================= */
@media (max-width: 781px){
body.woocommerce-checkout .wc-block-checkout__main .wc-block-components-checkout-order-summary{
display: none !important;
}
}
/* =========================================================
TSS: CHECKOUT MOBILE - HIDE DUPLICATE SIDEBAR ORDER SUMMARY
Keep Woo's mobile order summary, remove the sidebar duplicate
========================================================= */
@media (max-width: 781px){
body.woocommerce-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block,
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-checkout__order-summary,
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary,
body.woocommerce-checkout .wc-block-checkout__sidebar [class*="order-summary"]{
display: none !important;
}
}
/* =========================================================
TSS: CHECKOUT MOBILE - KEEP SIDEBAR ORDER SUMMARY, HIDE DUPLICATE MAIN
========================================================= */
@media (max-width: 781px){
/* Re-show sidebar order summary (in case an earlier rule hid it) */
body.woocommerce-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block,
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-checkout__order-summary,
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary,
body.woocommerce-checkout .wc-block-checkout__sidebar [class*="order-summary"]{
display: block !important;
}
/* Hide the duplicate "main" order summary copy */
body.woocommerce-checkout .wc-block-checkout__main .wp-block-woocommerce-checkout-order-summary-block,
body.woocommerce-checkout .wc-block-checkout__main .wc-block-checkout__order-summary,
body.woocommerce-checkout .wc-block-checkout__main .wc-block-components-checkout-order-summary,
body.woocommerce-checkout .wc-block-checkout__main [class*="order-summary"]{
display: none !important;
}
}
/* =========================================================
TSS: CHECKOUT ORDER SUMMARY - QTY PILL MOBILE FIX
(prevent qty badge from stretching full-width)
========================================================= */
@media (max-width: 781px){
/* Most common WC Blocks qty element */
body.woocommerce-checkout .wc-block-components-order-summary-item__quantity,
body.woocommerce-checkout .wc-block-components-order-summary-item__quantity > span{
display: inline-flex !important;
width: auto !important;
max-width: max-content !important;
flex: 0 0 auto !important;
align-self: flex-start !important;
white-space: nowrap !important;
}
/* If our "Qty:" styling is applied via a custom class (belt + braces) */
body.woocommerce-checkout .tss-os-qty,
body.woocommerce-checkout .tss-qty-pill{
display: inline-flex !important;
width: auto !important;
max-width: max-content !important;
flex: 0 0 auto !important;
align-self: flex-start !important;
white-space: nowrap !important;
}
}
/* =========================================================
TSS: CHECKOUT MOBILE - REDUCE SIDE MARGINS (<600px)
========================================================= */
@media (max-width: 600px){
/* Reduce theme container padding on checkout only */
body.woocommerce-checkout #primary.content-area.container,
body.woocommerce-checkout #primary.content-area .container,
body.woocommerce-checkout .site-content > .container,
body.woocommerce-checkout .site-content .container{
padding-left: 10px !important;
padding-right: 10px !important;
}
/* If the theme uses a row/col wrapper, remove extra side padding there too */
body.woocommerce-checkout .site-content .row{
margin-left: 0 !important;
margin-right: 0 !important;
}
body.woocommerce-checkout .site-content .row > [class*="col-"]{
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Keep our checkout card spacing sensible */
body.woocommerce-checkout .wc-block-checkout,
body.woocommerce-checkout .wp-block-woocommerce-checkout{
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* =========================================================
TSS: CART + CHECKOUT MOBILE - REDUCE SIDE MARGINS (<600px)
Applies to: /basket + /checkout
========================================================= */
@media (max-width: 600px){
/* Reduce theme container padding on checkout + cart only */
body.woocommerce-checkout #primary.content-area.container,
body.woocommerce-cart #primary.content-area.container,
body.woocommerce-checkout #primary.content-area .container,
body.woocommerce-cart #primary.content-area .container,
body.woocommerce-checkout .site-content > .container,
body.woocommerce-cart .site-content > .container,
body.woocommerce-checkout .site-content .container,
body.woocommerce-cart .site-content .container{
padding-left: 10px !important;
padding-right: 10px !important;
}
/* If the theme uses a row/col wrapper, remove extra side padding there too */
body.woocommerce-checkout .site-content .row,
body.woocommerce-cart .site-content .row{
margin-left: 0 !important;
margin-right: 0 !important;
}
body.woocommerce-checkout .site-content .row > [class*="col-"],
body.woocommerce-cart .site-content .row > [class*="col-"]{
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Keep Woo Blocks wrappers from re-adding margins */
body.woocommerce-checkout .wc-block-checkout,
body.woocommerce-checkout .wp-block-woocommerce-checkout,
body.woocommerce-cart .wc-block-cart,
body.woocommerce-cart .wp-block-woocommerce-cart{
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* =========================================================
TSS: CART + CHECKOUT MOBILE - FORCE FULL-WIDTH WRAPPERS (<600px)
Fixes "narrow centered column" on mobile for /basket + /checkout
========================================================= */
@media (max-width: 600px){
/* Force any theme containers used around the main content to full width */
body.woocommerce-checkout .site-content,
body.woocommerce-cart .site-content,
body.woocommerce-checkout #primary,
body.woocommerce-cart #primary,
body.woocommerce-checkout #main,
body.woocommerce-cart #main,
body.woocommerce-checkout .content-area,
body.woocommerce-cart .content-area,
body.woocommerce-checkout .content-wrap,
body.woocommerce-cart .content-wrap,
body.woocommerce-checkout .post,
body.woocommerce-cart .post,
body.woocommerce-checkout .page-content,
body.woocommerce-cart .page-content{
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Theme containers: remove max-width constraints and keep small gutters */
body.woocommerce-checkout .container,
body.woocommerce-cart .container{
width: 100% !important;
max-width: 100% !important;
padding-left: 10px !important;
padding-right: 10px !important;
}
/* Bootstrap-ish row/cols sometimes introduce extra side gutters/offsets */
body.woocommerce-checkout .row,
body.woocommerce-cart .row{
margin-left: 0 !important;
margin-right: 0 !important;
}
body.woocommerce-checkout .row > [class*="col-"],
body.woocommerce-cart .row > [class*="col-"]{
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important; /* kills offset-* effects */
}
/* Woo Blocks wrappers: ensure they aren’t being given a max-width or centered */
body.woocommerce-checkout .wp-block-woocommerce-checkout,
body.woocommerce-checkout .wc-block-checkout,
body.woocommerce-cart .wp-block-woocommerce-cart,
body.woocommerce-cart .wc-block-cart{
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* =========================================================
TSS: CART + CHECKOUT MOBILE - REDUCE PAGE GUTTERS (<600px)
(fixes squashed Blocks layout on iPhone)
========================================================= */
@media (max-width: 600px){
/* Main theme wrappers that typically add big side padding */
body.woocommerce-cart .site-content,
body.woocommerce-checkout .site-content,
body.woocommerce-cart #content,
body.woocommerce-checkout #content,
body.woocommerce-cart .content-wrap,
body.woocommerce-checkout .content-wrap,
body.woocommerce-cart .page-content,
body.woocommerce-checkout .page-content{
padding-left: 10px !important;
padding-right: 10px !important;
}
/* Bootstrap containers */
body.woocommerce-cart .container,
body.woocommerce-checkout .container{
padding-left: 0 !important;
padding-right: 0 !important;
}
/* If the content is inside a bootstrap row/col, prevent extra nesting padding */
body.woocommerce-cart .row > [class*="col-"],
body.woocommerce-checkout .row > [class*="col-"]{
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Woo Blocks root: ensure it doesn't re-add side margins */
body.woocommerce-cart .wp-block-woocommerce-cart,
body.woocommerce-checkout .wp-block-woocommerce-checkout,
body.woocommerce-cart .wc-block-cart,
body.woocommerce-checkout .wc-block-checkout{
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* =========================================================
TSS: MOBILE GUTTERS FIX (<=600px)
Applies to /checkout + /basket
- remove theme side padding
- neutralise bootstrap row/col gutters
- make bcf-main-content fill width
========================================================= */
@media (max-width: 600px){
/* Theme wrappers (these are adding your big side margins) */
body.woocommerce-checkout .site-content,
body.woocommerce-cart .site-content,
body.woocommerce-checkout .content-wrap,
body.woocommerce-cart .content-wrap{
padding-left: 10px !important;
padding-right: 10px !important;
}
/* Bootstrap: remove row negative margins + column padding (gutters) */
body.woocommerce-checkout .row,
body.woocommerce-cart .row{
margin-left: 0 !important;
margin-right: 0 !important;
}
body.woocommerce-checkout .row > [class*="col-"],
body.woocommerce-cart .row > [class*="col-"]{
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Your actual main content column */
body.woocommerce-checkout .bcf-main-content,
body.woocommerce-cart .bcf-main-content{
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
/* reintroduce a small, controlled inner gutter */
padding-left: 10px !important;
padding-right: 10px !important;
}
}
/* =========================================================
TSS: MOBILE CONTAINER WIDTH FIX (<=600px)
Applies to /checkout + /basket
========================================================= */
@media (max-width: 600px){
/* The big culprit: main content container */
body.woocommerce-checkout .content-area.container,
body.woocommerce-cart .content-area.container{
max-width: none !important;
width: 100% !important;
padding-left: 10px !important;
padding-right: 10px !important;
}
/* Wrapper that often adds additional side padding */
body.woocommerce-checkout .container-wrap,
body.woocommerce-cart .container-wrap{
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Keep bootstrap gutters from adding extra squeeze inside the form area */
body.woocommerce-checkout .row,
body.woocommerce-cart .row{
margin-left: 0 !important;
margin-right: 0 !important;
}
body.woocommerce-checkout .row > [class*="col-"],
body.woocommerce-cart .row > [class*="col-"]{
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Ensure the actual main column truly fills on mobile */
body.woocommerce-checkout .bcf-main-content,
body.woocommerce-cart .bcf-main-content{
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* =========================================================
TSS: MOBILE MAIN COLUMN FULL WIDTH (<=600px)
Forces /checkout and /basket main content to use full width
========================================================= */
@media (max-width: 600px){
/* Kill any offset behaviour leaking into mobile */
body.woocommerce-checkout .offset-md-1,
body.woocommerce-cart .offset-md-1{
margin-left: 0 !important;
}
/* Force the main bootstrap column to be 100% */
body.woocommerce-checkout .col-md-10,
body.woocommerce-cart .col-md-10,
body.woocommerce-checkout .col-md-10.offset-md-1,
body.woocommerce-cart .col-md-10.offset-md-1,
body.woocommerce-checkout .col-md-10.offset-md-1.bcf-main-content,
body.woocommerce-cart .col-md-10.offset-md-1.bcf-main-content{
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Then give the inner container a smaller, nicer mobile gutter */
body.woocommerce-checkout .content-area.container,
body.woocommerce-cart .content-area.container{
max-width: none !important;
width: 100% !important;
padding-left: 10px !important;
padding-right: 10px !important;
}
}
/* =========================================================
TSS: MOBILE GUTTERS (/checkout + /basket)
- reduce side padding so the form isn't squashed
- force main content column to full width
========================================================= */
@media (max-width: 600px){
/* Make the primary content container truly full width */
body.woocommerce-checkout .site-content,
body.woocommerce-cart .site-content{
padding-left: 0 !important;
padding-right: 0 !important;
}
body.woocommerce-checkout #primary.content-area.container,
body.woocommerce-cart #primary.content-area.container{
max-width: none !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* This is the wrapper you showed on checkout: col-md-10 offset-md-1 bcf-main-content */
body.woocommerce-checkout .bcf-main-content,
body.woocommerce-cart .bcf-main-content{
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 10px !important;
padding-right: 10px !important;
}
/* content-wrap often adds extra padding/gutters */
body.woocommerce-checkout .bcf-main-content .content-wrap,
body.woocommerce-cart .bcf-main-content .content-wrap{
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Kill any offset leaking in via custom CSS (belt + braces) */
body.woocommerce-checkout .offset-md-1,
body.woocommerce-cart .offset-md-1{
margin-left: 0 !important;
}
/* Make sure inner containers inside the content area don't reintroduce max-width */
body.woocommerce-checkout .site-content .container,
body.woocommerce-cart .site-content .container{
max-width: none !important;
}
}
/* =========================================================
TSS: MOBILE OUTER WRAPPER GUTTERS (<=600px)
The "squash" is usually from container/container-wrap padding,
not the inner column. Scope to checkout + cart only.
========================================================= */
@media (max-width: 600px){
/* Remove any big side padding on outer wrappers */
body.woocommerce-checkout .container-wrap,
body.woocommerce-cart .container-wrap,
body.woocommerce-checkout #content.site-content,
body.woocommerce-cart #content.site-content,
body.woocommerce-checkout .site-content,
body.woocommerce-cart .site-content{
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Bootstrap .container padding is a common culprit */
body.woocommerce-checkout .site-content .container,
body.woocommerce-cart .site-content .container{
max-width: none !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Your actual content wrapper */
body.woocommerce-checkout #primary.content-area.container,
body.woocommerce-cart #primary.content-area.container{
max-width: none !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Put back a sensible mobile gutter on the main column only */
body.woocommerce-checkout .bcf-main-content,
body.woocommerce-cart .bcf-main-content{
padding-left: 10px !important;
padding-right: 10px !important;
}
/* content-wrap sometimes re-adds padding */
body.woocommerce-checkout .bcf-main-content .content-wrap,
body.woocommerce-cart .bcf-main-content .content-wrap{
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* =========================================================
TSS: MOBILE WIDTH FIX (<=768px) FOR /checkout + /basket
- kill Bootstrap container max-width + padding on the PRIMARY wrapper
- add a sane gutter on the main content column instead
========================================================= */
@media (max-width: 768px){
/* The actual page wrapper around checkout/cart content */
body.woocommerce-checkout #primary.content-area.container,
body.woocommerce-cart #primary.content-area.container{
max-width: none !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Remove any left offset/capping behaviour */
body.woocommerce-checkout .offset-md-1,
body.woocommerce-cart .offset-md-1{
margin-left: 0 !important;
}
/* Make the main column truly full width */
body.woocommerce-checkout .bcf-main-content,
body.woocommerce-cart .bcf-main-content{
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
/* ✅ this is the gutter you actually want on small screens */
padding-left: 10px !important;
padding-right: 10px !important;
}
/* Prevent row negative margins causing weird edge alignment */
body.woocommerce-checkout #primary.content-area.container > .row,
body.woocommerce-cart #primary.content-area.container > .row{
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* =========================================================
TSS: TABLET+MOBILE FULL WIDTH (<=991px) FOR /checkout + /basket
- fixes “squashed” layouts on iPhone landscape + tablets
- removes bootstrap container max-width + centered 10/1 column
========================================================= */
@media (max-width: 991px){
/* Kill container max-width + default gutters on the PRIMARY wrapper */
body.woocommerce-checkout #primary.content-area.container,
body.woocommerce-cart #primary.content-area.container{
max-width: none !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Remove the centered layout column (col-md-10 + offset-md-1) */
body.woocommerce-checkout .col-md-10.offset-md-1.bcf-main-content,
body.woocommerce-cart .col-md-10.offset-md-1.bcf-main-content,
body.woocommerce-checkout .col-md-10.offset-md-1,
body.woocommerce-cart .col-md-10.offset-md-1{
margin-left: 0 !important;
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
}
/* Add a sane mobile/tablet gutter on the actual content column */
body.woocommerce-checkout .bcf-main-content,
body.woocommerce-cart .bcf-main-content{
padding-left: 10px !important;
padding-right: 10px !important;
}
/* If the theme adds padding inside this wrapper, normalize it too */
body.woocommerce-checkout .bcf-main-content .content-wrap,
body.woocommerce-cart .bcf-main-content .content-wrap{
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Prevent row negative margins causing extra squeeze */
body.woocommerce-checkout #primary.content-area.container > .row,
body.woocommerce-cart #primary.content-area.container > .row{
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* =========================================================
TSS: MOBILE GUTTERS TARGET content-area.container (<=991px)
Make sure we hit the actual wrapper used by the theme:
========================================================= */
@media (max-width: 991px){
body.woocommerce-cart .site-content #primary.content-area.container,
body.woocommerce-checkout .site-content #primary.content-area.container{
max-width: none !important;
width: 100% !important;
padding-left: 10px !important;
padding-right: 10px !important;
}
/* Some themes also constrain the immediate .container inside .container-wrap */
body.woocommerce-cart .container-wrap > .container,
body.woocommerce-checkout .container-wrap > .container{
max-width: none !important;
width: 100% !important;
padding-left: 10px !important;
padding-right: 10px !important;
}
}
/* =========================================================
TSS: MOBILE GUTTERS HARD OVERRIDE (<=600px) /basket + /checkout
The theme adds padding inside inner wrappers (content-wrap/page-content/etc).
This forces clean mobile gutters without squashing the form.
========================================================= */
@media (max-width: 600px){
/* Make the page area use full width */
body.woocommerce-cart .site-content,
body.woocommerce-checkout .site-content{
padding-left: 0 !important;
padding-right: 0 !important;
}
/* The primary container: keep a tight, consistent gutter */
body.woocommerce-cart #primary.content-area.container,
body.woocommerce-checkout #primary.content-area.container{
max-width: none !important;
width: 100% !important;
padding-left: 10px !important;
padding-right: 10px !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Kill inner wrapper padding that usually causes the “big margins” */
body.woocommerce-cart .bcf-main-content,
body.woocommerce-checkout .bcf-main-content,
body.woocommerce-cart #main.site-main,
body.woocommerce-checkout #main.site-main,
body.woocommerce-cart .fastest-shop-blogwrap,
body.woocommerce-checkout .fastest-shop-blogwrap,
body.woocommerce-cart .post.page-content,
body.woocommerce-checkout .post.page-content,
body.woocommerce-cart .content-wrap,
body.woocommerce-checkout .content-wrap{
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: none !important;
width: 100% !important;
}
/* If any nested bootstrap container exists inside the content, neutralise it */
body.woocommerce-cart #primary .container,
body.woocommerce-checkout #primary .container{
max-width: none !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* ------------------------------------------------------------
* Mobile-only: widen Woo cart content (do NOT affect desktop)
* Target: /basket (body has .woocommerce-cart)
* ------------------------------------------------------------ */
@media (max-width: 767.98px) {
/* stop the container from adding big side gutters on mobile */
body.woocommerce-cart #primary.content-area.container {
max-width: 100%;
width: 100%;
padding-left: 10px;
padding-right: 10px;
}
/* neutralise Bootstrap row negative margins creating “double gutters” */
body.woocommerce-cart #primary.content-area.container > .row {
margin-left: 0;
margin-right: 0;
}
/* ensure the main column doesn’t re-add padding */
body.woocommerce-cart #primary.content-area.container > .row > .bcf-main-content {
padding-left: 0;
padding-right: 0;
}
/* Woo Blocks cart wrapper: let it go full-width on mobile */
body.woocommerce-cart .wp-block-woocommerce-cart.alignwide,
body.woocommerce-cart .wp-block-woocommerce-cart {
max-width: 100% !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* ------------------------------------------------------------
* Mobile-only basket width override (does not affect desktop)
* Applies to Woo cart pages; also catches basket slugs.
* ------------------------------------------------------------ */
@media (max-width: 767.98px) {
/* Make any Bootstrap-ish container go full width on basket/cart pages */
body.woocommerce-cart .container,
body.woocommerce-cart .container-sm,
body.woocommerce-cart .container-md,
body.woocommerce-cart .container-lg,
body.woocommerce-cart .container-xl,
body.woocommerce-cart .container-xxl,
body.woocommerce-cart #primary,
body.woocommerce-cart #content,
body.woocommerce-cart .site-content,
body.woocommerce-cart .content-area,
body.woocommerce-cart .site-main {
max-width: 100% !important;
width: 100% !important;
}
/* Kill side padding that often creates the “narrow column” feel */
body.woocommerce-cart .container,
body.woocommerce-cart #primary,
body.woocommerce-cart #content {
padding-left: 10px !important;
padding-right: 10px !important;
}
/* Remove negative margins / double gutters from grid rows */
body.woocommerce-cart .row {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Remove any offset/auto margins that push the column inward */
body.woocommerce-cart [class*="offset-"] {
margin-left: 0 !important;
}
body.woocommerce-cart .bcf-main-content,
body.woocommerce-cart .site-main > .woocommerce,
body.woocommerce-cart .woocommerce,
body.woocommerce-cart .entry-content {
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100% !important;
width: 100% !important;
}
/* Woo Blocks Cart wrapper: full width */
body.woocommerce-cart .wp-block-woocommerce-cart,
body.woocommerce-cart .wp-block-woocommerce-cart.alignwide,
body.woocommerce-cart .wp-block-woocommerce-cart.alignfull {
max-width: 100% !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* If the main content column is flex/grid constrained, force it to 100% */
body.woocommerce-cart .bcf-main-content {
flex: 0 0 100% !important;
}
}
/* ------------------------------------------------------------
* Cart page: stop Elementor/Block-editor boxed max-width squeezing on MOBILE only
* ------------------------------------------------------------ */
@media (max-width: 767.98px) {
/* Elementor boxed sections often cap width + center content */
body.woocommerce-cart .elementor-section.elementor-section-boxed > .elementor-container,
body.woocommerce-cart .elementor-section.elementor-section-boxed > .elementor-container > .elementor-row,
body.woocommerce-cart .elementor-container,
body.woocommerce-cart .elementor-widget-wrap {
max-width: 100% !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Block editor / theme rules that set a global narrow content width */
body.woocommerce-cart .entry-content > *,
body.woocommerce-cart .woocommerce > *,
body.woocommerce-cart .wp-block-group,
body.woocommerce-cart .wp-block-columns,
body.woocommerce-cart .wp-block-column {
max-width: 100% !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Some themes set centered “is-layout-constrained” widths */
body.woocommerce-cart .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* ------------------------------------------------------------
* Cart page MOBILE: break out of theme .container width constraint
* (desktop unaffected)
* ------------------------------------------------------------ */
@media (max-width: 767.98px) {
/* This is the wrapper from your HTML: */
body.woocommerce-cart #primary.content-area.container {
max-width: none !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
/* Ensure the cart block itself isn’t capped/centered */
body.woocommerce-cart .wp-block-woocommerce-cart.alignwide,
body.woocommerce-cart .wp-block-woocommerce-cart {
max-width: none !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* ------------------------------------------------------------
* Cart page MOBILE: disable WP "constrained layout" max-width squeeze
* (desktop unaffected)
* ------------------------------------------------------------ */
@media (max-width: 767.98px) {
/* Expand WP global content size variables on the cart area */
body.woocommerce-cart #primary,
body.woocommerce-cart #content,
body.woocommerce-cart .site-content,
body.woocommerce-cart .entry-content {
--wp--style--global--content-size: 100% !important;
--wp--style--global--wide-size: 100% !important;
}
/* Kill the constrained-layout max-width rule inside the cart page */
body.woocommerce-cart #primary :where(.is-layout-constrained > :not(.alignleft):not(.alignright):not(.alignfull)) {
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Keep alignwide from being capped too */
body.woocommerce-cart #primary :where(.is-layout-constrained > .alignwide) {
max-width: none !important;
}
}
/* canary removed: MAGENTA */
@media (max-width: 767.98px) {
body.woocommerce-cart .wp-block-woocommerce-cart {
/* canary removed: magenta */
}
}
/* --- CANARY (TEMP): MOBILE basket page - should force obvious visual change --- */
@media (max-width: 767.98px) {
/* canary removed: ff00ff */
}
/* ------------------------------------------------------------
* BASKET/CHECKOUT (page-id-12) MOBILE: remove max-width squeeze
* Desktop unaffected.
* ------------------------------------------------------------ */
@media (max-width: 767.98px) {
/* Break any centered/narrow wrapper on this page */
body.page-id-12 #content,
body.page-id-12 .site-content,
body.page-id-12 #primary,
body.page-id-12 #primary.content-area,
body.page-id-12 #primary.content-area.container,
body.page-id-12 .entry-content {
max-width: none !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
/* If the theme “container” padding is creating a fake narrow column, normalize it */
body.page-id-12 #primary.content-area.container {
padding-left: 12px !important;
padding-right: 12px !important;
}
/* Woo Blocks checkout/cart wrappers (covers both old/new classnames) */
body.page-id-12 .wp-block-woocommerce-checkout,
body.page-id-12 .wc-block-checkout,
body.page-id-12 .wc-block-checkout__main,
body.page-id-12 .wc-block-checkout__form,
body.page-id-12 .wc-block-components-main,
body.page-id-12 .wc-block-components-sidebar,
body.page-id-12 .woocommerce,
body.page-id-12 form.woocommerce-checkout,
body.page-id-12 .woocommerce-checkout {
max-width: none !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
}
/* ------------------------------------------------------------
* BASKET (page-id-12) + CHECKOUT (page-id-13) MOBILE: force full-width layout
* Desktop unaffected.
* ------------------------------------------------------------ */
@media (max-width: 767.98px) {
/* Break out of theme container constraints */
body.page-id-12.woocommerce-cart #primary.content-area.container,
body.page-id-13.woocommerce-checkout #primary.content-area.container {
max-width: none !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
/* Kill WP constrained-layout centering inside main content area */
body.page-id-12.woocommerce-cart #primary :where(.is-layout-constrained > :not(.alignleft):not(.alignright):not(.alignfull)),
body.page-id-13.woocommerce-checkout #primary :where(.is-layout-constrained > :not(.alignleft):not(.alignright):not(.alignfull)) {
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Woo Blocks Cart/Checkout containers sometimes self-cap width */
body.page-id-12.woocommerce-cart .wp-block-woocommerce-cart,
body.page-id-12.woocommerce-cart .wp-block-woocommerce-cart.alignwide,
body.page-id-13.woocommerce-checkout .wp-block-woocommerce-checkout,
body.page-id-13.woocommerce-checkout .wp-block-woocommerce-checkout.alignwide,
body.page-id-13.woocommerce-checkout .wc-block-checkout,
body.page-id-13.woocommerce-checkout .wc-block-checkout__main,
body.page-id-13.woocommerce-checkout .wc-block-checkout__sidebar,
body.page-id-13.woocommerce-checkout .wc-block-components-main,
body.page-id-13.woocommerce-checkout .wc-block-components-sidebar {
max-width: none !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Give a sane mobile gutter so it doesn't touch screen edges */
body.page-id-12.woocommerce-cart #content,
body.page-id-13.woocommerce-checkout #content {
padding-left: 12px !important;
padding-right: 12px !important;
box-sizing: border-box !important;
}
}
/* ------------------------------------------------------------
* BASKET (page-id-12) + CHECKOUT (page-id-13) MOBILE:
* nuke any 320px/fixed container widths causing "boxed" layout.
* Desktop unaffected.
* ------------------------------------------------------------ */
@media (max-width: 767.98px) {
/* Force the main content wrappers full-width */
body.page-id-12 #content,
body.page-id-12 #primary,
body.page-id-12 #primary.content-area.container,
body.page-id-12 .site-content,
body.page-id-12 .entry-content,
body.page-id-13 #content,
body.page-id-13 #primary,
body.page-id-13 #primary.content-area.container,
body.page-id-13 .site-content,
body.page-id-13 .entry-content {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
/* Many themes apply the squeeze on a nested .container */
body.page-id-12 #content .container,
body.page-id-12 #primary .container,
body.page-id-12 #content .container-wrap,
body.page-id-13 #content .container,
body.page-id-13 #primary .container,
body.page-id-13 #content .container-wrap {
width: 100% !important; /* defeats width:320px */
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
/* Add a small mobile gutter so it doesn't touch the screen edges */
body.page-id-12 #content,
body.page-id-13 #content {
padding-left: 12px !important;
padding-right: 12px !important;
}
}
/* ============================================================
TSS Basket totals — Title bar (Order Totals) maroon + white (v1)
Target: Woo Blocks cart totals title (.wc-block-cart__totals-title)
File: grid-actions-fix-v2.css loads AFTER custom-fixes.css, so it wins.
============================================================ */
body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__sidebar
.wp-block-woocommerce-cart-totals-block .wc-block-cart__totals-title{
background: #7f174a !important;
color: #fff !important;
display: block !important;
padding: 14px 18px !important;
border: 0 !important;
border-radius: 12px !important;
box-shadow: none !important;
background-image: none !important;
}
/* Ensure nested text/icons inherit white */
body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__sidebar
.wp-block-woocommerce-cart-totals-block .wc-block-cart__totals-title,
body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__sidebar
.wp-block-woocommerce-cart-totals-block .wc-block-cart__totals-title *{
color: #fff !important;
}
/* ============================================================
TSS Basket totals — Heading bar force (v2)
Goal: maroon background + white text for the totals title
Works whether Woo renders:
- h2.wc-block-cart__totals-title
- content inside .wp-block-woocommerce-cart-order-summary-heading-block
Scope: cart page only
============================================================ */
body.woocommerce-cart .wp-block-woocommerce-cart-totals-block .wc-block-cart__totals-title,
body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-heading-block {
background: #7f174a !important;
background-image: none !important;
color: #fff !important;
border: 0 !important;
border-radius: 12px !important;
padding: 12px 16px !important;
margin: 0 0 14px !important;
display: block !important;
}
/* Ensure any inner elements inherit white */
body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-heading-block *,
body.woocommerce-cart .wp-block-woocommerce-cart-totals-block .wc-block-cart__totals-title * {
color: #fff !important;
fill: #fff !important;
}
/* Prevent theme “white panel” styles overriding the bar */
body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-heading-block {
box-shadow: none !important;
}
/* ============================================================
TSS Basket totals — Title bar (maroon + white) FIX (v2)
Target: the actual H2 element (it carries the block class)
============================================================ */
body.woocommerce-cart h2.wc-block-cart__totals-title,
body.woocommerce-cart h2.wp-block-woocommerce-cart-order-summary-heading-block.wc-block-cart__totals-title{
background: #7f174a !important; /* maroon */
background-image: none !important;
color: #fff !important;
padding: 12px 16px !important;
margin: -16px -16px 14px !important; /* stretch to card edges */
border-radius: 12px 12px 0 0 !important;
line-height: 1.2 !important;
font-weight: 700 !important;
}
/* If any child spans inherit odd colors */
body.woocommerce-cart h2.wc-block-cart__totals-title *,
body.woocommerce-cart h2.wp-block-woocommerce-cart-order-summary-heading-block.wc-block-cart__totals-title *{
color: #fff !important;
}
/* ============================================================
TSS Basket totals — Title bar background override (v2)
Reason: custom-fixes.css forces background: transparent !important
on all descendants of the order summary block. This rule beats it.
============================================================ */
body.woocommerce-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block
h2.wp-block-woocommerce-cart-order-summary-heading-block.wc-block-cart__totals-title,
body.woocommerce-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block
h1.wp-block-woocommerce-cart-order-summary-heading-block.wc-block-cart__totals-title,
body.woocommerce-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block
h3.wp-block-woocommerce-cart-order-summary-heading-block.wc-block-cart__totals-title,
body.woocommerce-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block
.wc-block-cart__totals-title{
background: var(--tss-maroon, #7f174a) !important;
background-color: var(--tss-maroon, #7f174a) !important;
color: #fff !important;
}
/* ============================================================
TSS Basket totals — Title bar vertical alignment (v3)
Fix: stop the heading being bunched at the top
============================================================ */
body.woocommerce-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block
h2.wp-block-woocommerce-cart-order-summary-heading-block.wc-block-cart__totals-title,
body.woocommerce-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block
h1.wp-block-woocommerce-cart-order-summary-heading-block.wc-block-cart__totals-title,
body.woocommerce-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block
h3.wp-block-woocommerce-cart-order-summary-heading-block.wc-block-cart__totals-title,
body.woocommerce-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block
.wc-block-cart__totals-title{
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
min-height: 44px !important;
height: auto !important;
padding: 12px 16px !important;
padding-top: 12px !important;
padding-bottom: 12px !important;
line-height: 1.2 !important;
box-sizing: border-box !important;
/* keep the maroon/white enforced */
background: var(--tss-maroon, #7f174a) !important;
background-color: var(--tss-maroon, #7f174a) !important;
color: #fff !important;
}
/* ============================================================
TSS Basket totals — Title bar spacing fix (v4)
Reason: heading was being clipped by negative margin + rounded card.
Fix: reduce negative top margin slightly + set top radii.
============================================================ */
body.woocommerce-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block
h2.wp-block-woocommerce-cart-order-summary-heading-block.wc-block-cart__totals-title,
body.woocommerce-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block
h1.wp-block-woocommerce-cart-order-summary-heading-block.wc-block-cart__totals-title,
body.woocommerce-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block
h3.wp-block-woocommerce-cart-order-summary-heading-block.wc-block-cart__totals-title,
body.woocommerce-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block
.wc-block-cart__totals-title{
/* keep maroon bar */
background: var(--tss-maroon, #7f174a) !important;
background-color: var(--tss-maroon, #7f174a) !important;
color: #fff !important;
display: flex !important;
align-items: center !important;
/* IMPORTANT: stop clipping at the top edge */
margin: -14px -16px 14px !important; /* was -16px top; pull down 2px */
padding: 12px 16px !important;
/* match the card corners */
border-top-left-radius: 12px !important;
border-top-right-radius: 12px !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
height: auto !important;
min-height: 44px !important;
line-height: 1.2 !important;
box-sizing: border-box !important;
}
/* ============================================================
TSS Basket totals — Title bar FINAL override (v5)
Reason: custom-fixes.css has a high-specificity blanket rule that
forces background: transparent on almost everything in the block.
Solution: match that specificity and override it here (grid-actions
loads last), plus keep the border overlay behind the title.
============================================================ */
/* Make sure the "overlay border" can't sit on top of the title */
body.woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper{
position: relative !important;
}
body.woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper::after{
pointer-events: none !important;
z-index: 1 !important;
}
body.woocommerce-cart .wc-block-cart__sidebar .wc-block-cart__totals-title{
position: relative !important;
z-index: 2 !important;
}
/* High-specificity match of the blanket :not() rule — this is the key */
body.woocommerce-cart .wc-block-cart__sidebar
.wp-block-woocommerce-cart-order-summary-block
:not(input):not(button):not(select):not(textarea).wc-block-cart__totals-title,
body.woocommerce-cart .wc-block-cart__sidebar
.wp-block-woocommerce-cart-order-summary-block
h1.wp-block-woocommerce-cart-order-summary-heading-block.wc-block-cart__totals-title,
body.woocommerce-cart .wc-block-cart__sidebar
.wp-block-woocommerce-cart-order-summary-block
h2.wp-block-woocommerce-cart-order-summary-heading-block.wc-block-cart__totals-title,
body.woocommerce-cart .wc-block-cart__sidebar
.wp-block-woocommerce-cart-order-summary-block
h3.wp-block-woocommerce-cart-order-summary-heading-block.wc-block-cart__totals-title{
background: var(--tss-maroon, #7f174a) !important;
background-color: var(--tss-maroon, #7f174a) !important;
color: #fff !important;
display: flex !important;
align-items: center !important;
/* stop the “bunched/clipped” look */
margin: -12px -16px 14px !important; /* slightly less negative than before */
padding: 14px 16px !important;
border: 0 !important;
border-top-left-radius: 12px !important;
border-top-right-radius: 12px !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
min-height: 44px !important;
line-height: 1.2 !important;
box-shadow: none !important;
}
/* Ensure any spans inside the heading inherit white */
body.woocommerce-cart .wc-block-cart__sidebar .wc-block-cart__totals-title *{
color: #fff !important;
}
/* === TSS: single-product qty control === */
/* Minus should be left, plus should be right + remove border gap caused by inline-block whitespace */
body.single-product div.product .summary form.cart,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
gap: 0;
}
body.single-product div.product .summary form.cart > button.minus,
body.single-product div.product .summary form.cart > div.quantity,
body.single-product div.product .summary form.cart > button.plus,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > button.minus,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > div.quantity,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > button.plus {
margin: 0;
}
body.single-product div.product .summary form.cart > button.minus,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > button.minus { order: 1; }
body.single-product div.product .summary form.cart > div.quantity,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > div.quantity { order: 2; }
body.single-product div.product .summary form.cart > button.plus,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > button.plus { order: 3; }
/* Keep add-to-cart on the right */
body.single-product div.product .summary form.cart > button.single_add_to_cart_button,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > button.single_add_to_cart_button {
order: 4;
}
/* Ensure all three segments butt up cleanly (no visible gap) */
body.single-product div.product .summary form.cart > button.minus,
body.single-product div.product .summary form.cart > button.plus,
body.single-product div.product .summary form.cart > div.quantity,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > button.minus,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > button.plus,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > div.quantity {
display: flex;
align-items: center;
}
body.single-product div.product .summary form.cart > div.quantity input.qty,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > div.quantity input.qty {
margin: 0;
border-left: 0;
border-right: 0;
}
body.single-product div.product .summary form.cart > button.minus,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > button.minus {
border-right: 0;
}
body.single-product div.product .summary form.cart > button.plus,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > button.plus {
border-left: 0;
}
/* === /TSS: single-product qty control === */
/* TSS SINGLE PRODUCT CART RESPONSIVE FIX */
/* Keeps the theme button styling, but makes the cart row wrap cleanly on mobile. */
body.single-product div.product .summary form.cart:not(.variations_form),
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 10px !important;
}
body.single-product div.product .summary form.cart:not(.variations_form) > button.minus,
body.single-product div.product .summary form.cart:not(.variations_form) > button.plus,
body.single-product div.product .summary form.cart:not(.variations_form) > div.quantity,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > button.minus,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > button.plus,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > div.quantity {
flex: 0 0 auto !important;
}
body.single-product div.product .summary form.cart:not(.variations_form) > button.minus,
body.single-product div.product .summary form.cart:not(.variations_form) > button.plus,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > button.minus,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > button.plus {
width: 44px !important;
min-width: 44px !important;
height: 44px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
}
body.single-product div.product .summary form.cart:not(.variations_form) > div.quantity,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > div.quantity {
width: auto !important;
min-width: 0 !important;
}
body.single-product div.product .summary form.cart:not(.variations_form) > div.quantity input.qty,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > div.quantity input.qty {
width: 64px !important;
min-width: 64px !important;
max-width: 88px !important;
height: 44px !important;
text-align: center !important;
padding-left: 8px !important;
padding-right: 8px !important;
box-sizing: border-box !important;
}
body.single-product div.product .summary form.cart:not(.variations_form) > button.single_add_to_cart_button,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > button.single_add_to_cart_button {
flex: 1 1 240px !important; /* grows on desktop, wraps on mobile */
min-height: 44px !important;
max-width: 100% !important;
white-space: nowrap !important;
}
@media (max-width: 520px) {
body.single-product div.product .summary form.cart:not(.variations_form) > button.single_add_to_cart_button,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > button.single_add_to_cart_button {
flex-basis: 100% !important;
width: 100% !important;
}
}
@media (max-width: 360px) {
body.single-product div.product .summary form.cart:not(.variations_form) > button.minus,
body.single-product div.product .summary form.cart:not(.variations_form) > button.plus,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > button.minus,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > button.plus {
width: 40px !important;
min-width: 40px !important;
height: 40px !important;
}
body.single-product div.product .summary form.cart:not(.variations_form) > div.quantity input.qty,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > div.quantity input.qty {
width: 56px !important;
min-width: 56px !important;
height: 40px !important;
}
}
/* END TSS SINGLE PRODUCT CART RESPONSIVE FIX */
/* === TSS: single product qty + ATC responsive v3 ===
Fixes: removes shared “pill” wrapper, aligns qty + CTA cleanly,
desktop = row, mobile = qty row + full-width button.
===================================================== */
body.single-product div.product .summary form.cart:not(.variations_form),
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart{
--tss-qty-h: 46px;
--tss-qty-w: 54px;
--tss-qty-mid: 74px;
display: flex !important;
flex-wrap: wrap !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 12px !important;
width: auto !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 0 16px !important;
border: 0 !important;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Ensure the stepper parts align as a single pill */
body.single-product div.product .summary form.cart:not(.variations_form) > button.minus,
body.single-product div.product .summary form.cart:not(.variations_form) > div.quantity,
body.single-product div.product .summary form.cart:not(.variations_form) > button.plus,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > button.minus,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > div.quantity,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > button.plus{
height: var(--tss-qty-h) !important;
min-height: var(--tss-qty-h) !important;
margin: 0 !important;
box-shadow: none !important;
}
/* Minus / Plus buttons */
body.single-product div.product .summary form.cart:not(.variations_form) > button.minus,
body.single-product div.product .summary form.cart:not(.variations_form) > button.plus,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > button.minus,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > button.plus{
width: var(--tss-qty-w) !important;
min-width: var(--tss-qty-w) !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid rgba(0,0,0,.15) !important;
background: #f5f5f5 !important;
color: inherit !important;
cursor: pointer !important;
line-height: 1 !important;
}
body.single-product div.product .summary form.cart:not(.variations_form) > button.minus,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > button.minus{
border-radius: 999px 0 0 999px !important;
}
body.single-product div.product .summary form.cart:not(.variations_form) > button.plus,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > button.plus{
border-radius: 0 999px 999px 0 !important;
}
/* Middle quantity segment */
body.single-product div.product .summary form.cart:not(.variations_form) > div.quantity,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > div.quantity{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: var(--tss-qty-mid) !important;
padding: 0 !important;
border-top: 1px solid rgba(0,0,0,.15) !important;
border-bottom: 1px solid rgba(0,0,0,.15) !important;
border-left: 0 !important;
border-right: 0 !important;
background: #fff !important;
border-radius: 0 !important;
}
body.single-product div.product .summary form.cart:not(.variations_form) > div.quantity input.qty,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > div.quantity input.qty{
width: 100% !important;
min-width: 0 !important;
height: 100% !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
text-align: center !important;
padding: 0 10px !important;
line-height: var(--tss-qty-h) !important;
font-weight: 600 !important;
}
/* Hide number spinners */
body.single-product div.product .summary form.cart:not(.variations_form) > div.quantity input.qty::-webkit-outer-spin-button,
body.single-product div.product .summary form.cart:not(.variations_form) > div.quantity input.qty::-webkit-inner-spin-button,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > div.quantity input.qty::-webkit-outer-spin-button,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > div.quantity input.qty::-webkit-inner-spin-button{
-webkit-appearance: none !important;
margin: 0 !important;
}
body.single-product div.product .summary form.cart:not(.variations_form) > div.quantity input.qty,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > div.quantity input.qty{
-moz-appearance: textfield !important;
}
/* Add to cart button: same height, centered label */
body.single-product div.product .summary form.cart:not(.variations_form) > button.single_add_to_cart_button,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > button.single_add_to_cart_button{
height: var(--tss-qty-h) !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
flex: 1 1 240px !important;
min-width: 180px !important;
border-radius: 999px !important;
padding: 0 18px !important;
white-space: nowrap !important;
}
/* Mobile: keep qty pill on its own row (centered), CTA full width below */
@media (max-width: 520px){
body.single-product div.product .summary form.cart:not(.variations_form),
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart{
gap: 10px !important;
justify-content: center !important;
}
body.single-product div.product .summary form.cart:not(.variations_form) > button.single_add_to_cart_button,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > button.single_add_to_cart_button{
flex: 0 0 100% !important;
width: 100% !important;
}
}
/* Keyboard focus */
body.single-product div.product .summary form.cart:not(.variations_form) > button.minus:focus-visible,
body.single-product div.product .summary form.cart:not(.variations_form) > button.plus:focus-visible,
body.single-product div.product .summary form.cart:not(.variations_form) > div.quantity input.qty:focus-visible,
body.single-product div.product .summary form.cart:not(.variations_form) > button.single_add_to_cart_button:focus-visible,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > button.minus:focus-visible,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > button.plus:focus-visible,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > div.quantity input.qty:focus-visible,
body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart > button.single_add_to_cart_button:focus-visible{
outline: 2px solid currentColor !important;
outline-offset: 2px !important;
}
/* === /TSS: single product qty + ATC responsive v3 === */
|