/**
* TBH Kitchen — WooCommerce cart, checkout and account.
*
* The native WooCommerce templates are untouched; this only restyles them so
* they stop looking like default WooCommerce. Keeping the markup native means
* payment gateways and WooCommerce updates continue to work normally.
*/
/* ---------------------------------------------------------------
* Block cart & checkout shell
*
* Three separate width caps stack on this page and every one of them
* needs overriding, or the widest of the three still wins:
*
* 1. Hello Elementor's own `body:not([class*=elementor-page-]) .site-main`
* caps at 800px, rising to 1140px only above 1200px viewport width.
* That selector's specificity (0,2,1 — a class, a negated attribute
* selector, a class) beats a plain `.woocommerce-cart .site-main`
* (0,2,0), so the parent theme's rule silently won even with an
* override present. Matched here with an equal-or-greater selector.
* 2. The block editor's own `alignwide` cap (--wp--style--global--wide-size,
* 1200px in Global Styles).
* 3. `is-layout-constrained` capping each direct child at content-size
* (800px) unless it also carries `alignwide`/`alignfull`.
*
* This is what produced the narrow column with wide empty side margins.
* ------------------------------------------------------------- */
.woocommerce-cart .tbh-main,
.woocommerce-checkout .tbh-main,
.woocommerce-account .tbh-main {
padding: 44px 0 76px;
}
/* Match the menu page's rhythm on a phone: less top space, since there is
no page header here to sit beneath. */
@media (max-width: 781px) {
.woocommerce-cart .tbh-main,
.woocommerce-checkout .tbh-main,
.woocommerce-account .tbh-main {
padding: 24px 0 56px;
}
}
/* Matches the header's own container (--tbh-wide), not the narrower
* --tbh-mid. A cart inset 180px narrower than the header above it reads
* as a floating box rather than part of the page. */
/* 1040px matches .tbh-menu, so the cart, checkout and the menu all sit on
* the same measure. The header and footer keep their wider 1320px
* container, which is what makes the chrome read as one continuous frame
* around content of a consistent width. */
body.woocommerce-cart:not([class*="elementor-page-"]) .site-main,
body.woocommerce-checkout:not([class*="elementor-page-"]) .site-main,
body.woocommerce-account:not([class*="elementor-page-"]) .site-main {
max-width: 1040px !important;
margin-inline: auto;
padding-inline: var(--tbh-gutter, 28px);
width: 100%;
}
/* Release only the outermost block from the editor's width cap.
*
* Scoped to the direct child of .page-content deliberately. An earlier
* blanket `.is-layout-constrained > *` matched all eight nested instances
* of that class inside the cart, forcing max-width onto the coupon panel
* and the checkout button — which is what collapsed them into a narrow
* column and a circle. Only the top-level wrapper needs releasing; every
* descendant should keep WooCommerce's own layout intact. */
.woocommerce-cart .page-content > .wp-block-woocommerce-cart,
.woocommerce-checkout .page-content > .wp-block-woocommerce-checkout {
max-width: 100%;
margin-inline: 0;
}
/* ---------------------------------------------------------------
* Shell
* ------------------------------------------------------------- */
/* `.woocommerce-page` is a class WooCommerce puts on , not on a
* content wrapper. Capping it at 1140px therefore constrained the entire
* document — header, footer and all — which is why cart and checkout
* rendered 236px narrower than every other page and read as a boxed
* layout. Width now belongs solely to .site-main above; this rule keeps
* only the typeface. */
.woocommerce,
.woocommerce-page {
font-family: var(--tbh-sans, sans-serif);
}
.woocommerce h1,
.woocommerce h2,
.woocommerce h3 {
font-family: var(--tbh-serif, serif);
color: var(--tbh-green, #4B1612);
}
/* ---------------------------------------------------------------
* Block cart & checkout components
*
* These carry wc-block-* class names and are untouched by the classic
* WooCommerce selectors further down, so they need styling in their own
* right or they render as unbranded defaults.
* ------------------------------------------------------------- */
/* WooCommerce already ships a responsive two-column cart layout and
* hydrates it client-side. Replacing that with our own grid fought its
* internal width assumptions, so we keep its layout and add only the one
* thing it lacks: a summary that stays in view while the list scrolls. */
@media (min-width: 782px) {
.wc-block-cart__sidebar {
position: sticky;
top: calc(var(--tbh-header-h, 76px) + 20px);
}
}
/* The summary reads as a kitchen docket: one card, hairline rules, and
* figures in a column the eye can run straight down. Drawn from the
* printed menu's own vernacular rather than a generic totals box.
*
* Desktop only. Below 782px WooCommerce turns this element into a
* collapsible summary panel with its own chrome, and wrapping that in a
* bordered card clipped its top edge and fought the expand/collapse. */
@media (min-width: 782px) {
.wc-block-cart__sidebar,
.wc-block-components-sidebar {
background: var(--tbh-white, #fff);
border: 1px solid var(--tbh-line, #EFDEC0);
border-radius: var(--tbh-radius-lg, 16px);
padding: 8px 24px 24px;
box-shadow: 0 1px 2px rgba(75, 22, 18, .04);
}
}
@media (min-width: 782px) {
.wc-block-cart__sidebar .wc-block-components-totals-wrapper,
.wc-block-components-sidebar .wc-block-components-totals-wrapper {
padding-block: 14px;
border-top: 1px solid var(--tbh-line, #EFDEC0);
}
.wc-block-cart__sidebar .wc-block-components-totals-wrapper:first-child,
.wc-block-components-sidebar .wc-block-components-totals-wrapper:first-child {
border-top: none;
}
}
/* Below 782px WooCommerce renders the order summary twice: a collapsed
* bar at the top of the form, and the full itemised list again further
* down the page. Both are the same information, and the second one buries
* the Place Order button under a long scroll. Keep the collapsible bar —
* it is reachable immediately and expands on demand — and drop the
* duplicate. The fill-wrapper class only exists on the injected copy. */
@media (max-width: 781px) {
.checkout-order-summary-block-fill-wrapper {
display: none;
}
}
/* Prices align in a true column — the one detail that makes a list of
* numbers feel considered rather than typeset by accident. */
.wc-block-components-totals-item__value,
.wc-block-components-formatted-money-amount,
.wc-block-components-product-price {
font-variant-numeric: tabular-nums;
}
/* Headings */
.wc-block-cart__main .wc-block-cart-items__header,
.wc-block-components-title,
.wp-block-woocommerce-cart-order-summary-heading-block {
font-family: var(--tbh-serif, serif) !important;
color: var(--tbh-green, #4B1612) !important;
letter-spacing: .01em;
}
.wc-block-cart-items__header {
border-bottom: 1px solid var(--tbh-line, #EFDEC0);
font-size: .72rem !important;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--tbh-gray, #826863) !important;
}
/* Line items */
.wc-block-cart-items__row {
border-bottom: 1px solid var(--tbh-line, #EFDEC0);
padding: 20px 0;
}
.wc-block-components-product-name {
font-family: var(--tbh-sans, sans-serif) !important;
font-weight: 600 !important;
font-size: 1rem !important;
color: var(--tbh-charcoal, #2D1411) !important;
text-decoration: none !important;
}
.wc-block-components-product-name:hover {
color: var(--tbh-green, #4B1612) !important;
}
.wc-block-components-product-price__value,
.wc-block-components-formatted-money-amount {
font-weight: 700;
color: var(--tbh-green, #4B1612);
}
/* Quantity stepper — match the menu control. */
.wc-block-components-quantity-selector {
border: 1.5px solid var(--tbh-line, #EFDEC0) !important;
border-radius: 999px !important;
overflow: hidden;
min-height: 44px;
max-width: 132px;
}
.wc-block-components-quantity-selector__button {
color: var(--tbh-green, #4B1612) !important;
font-size: 1.15rem !important;
font-weight: 500;
transition: background .15s ease;
}
.wc-block-components-quantity-selector__button:hover {
background: var(--tbh-cream-warm, #F9F3E9) !important;
}
.wc-block-components-quantity-selector__input {
font-weight: 700;
color: var(--tbh-charcoal, #2D1411);
font-variant-numeric: tabular-nums;
}
/* Totals */
.wc-block-components-totals-item__label {
color: var(--tbh-gray, #826863);
}
.wc-block-components-totals-footer-item {
border-top: 1px solid var(--tbh-line, #EFDEC0);
padding-top: 14px;
margin-top: 6px;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-formatted-money-amount {
font-size: 1.16rem;
font-weight: 700;
color: var(--tbh-green, #4B1612);
}
/* The primary action.
*
* display and width matter here: without them the anchor shrink-wraps to
* its text, and a 999px radius on a near-square box renders as a circle.
* A full-width block is also the right call — this is the one action on
* the page and it should read as a bar, not a chip. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-proceed-to-checkout-block a,
a.wc-block-cart__submit-button {
display: flex !important;
align-items: center;
justify-content: center;
width: 100%;
min-height: 54px;
box-sizing: border-box;
background: var(--tbh-green, #4B1612) !important;
color: var(--tbh-gold-light, #DCB674) !important;
border: none !important;
border-radius: 10px !important;
font-family: var(--tbh-sans, sans-serif) !important;
font-weight: 700 !important;
font-size: 1rem !important;
letter-spacing: .03em;
padding: 16px 28px !important;
text-decoration: none !important;
text-align: center;
white-space: nowrap;
transition: background .18s ease;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block a:hover,
.wc-block-cart__submit-button:focus-visible,
.wc-block-components-checkout-place-order-button:focus-visible {
background: var(--tbh-green-mid, #6E2A21) !important;
color: var(--tbh-gold-light, #DCB674) !important;
}
/* ---------------------------------------------------------------
* Empty cart
*
* WooCommerce's default empty state renders underlined product links and
* dark pill buttons that belong to no part of this design. It is also the
* first thing a customer sees if they open the basket before ordering, so
* it should read as an invitation to the menu rather than an apology.
* ------------------------------------------------------------- */
.wc-block-cart__empty-cart__title {
font-family: var(--tbh-serif, serif) !important;
color: var(--tbh-green, #4B1612) !important;
font-size: clamp(1.4rem, 4vw, 1.9rem) !important;
}
/* The default sad-face icon undercuts a premium tone. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
display: none !important;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link {
text-decoration: none !important;
color: var(--tbh-charcoal, #2D1411) !important;
font-weight: 600;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link:hover
.wc-block-grid__product-title {
color: var(--tbh-green, #4B1612) !important;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
color: var(--tbh-green, #4B1612);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.wp-block-woocommerce-empty-cart-block .wp-block-button__link {
background: transparent !important;
border: 1.5px solid var(--tbh-green, #4B1612) !important;
color: var(--tbh-green, #4B1612) !important;
border-radius: 999px !important;
text-decoration: none !important;
font-weight: 600 !important;
font-size: .85rem !important;
padding: 10px 22px !important;
transition: background .16s ease, color .16s ease;
}
.wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover {
background: var(--tbh-green, #4B1612) !important;
color: var(--tbh-gold-light, #DCB674) !important;
}
/* Separator dots read as debris at this size. */
.wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots {
display: none;
}
/* ---------------------------------------------------------------
* Shipping options
*
* The two choices carry different prices, so they should read as a real
* decision rather than two identical radio rows. The selected one is
* outlined in brand green; the saving on collection is the one piece of
* colour, because it is the reason to choose it.
* ------------------------------------------------------------- */
.wc-block-components-radio-control__option {
border-radius: var(--tbh-radius, 10px);
transition: border-color .16s ease, background .16s ease;
}
.wc-block-components-radio-control-accordion-option--checked-option,
.wc-block-components-radio-control__option--checked-option {
border-color: var(--tbh-green, #4B1612) !important;
background: rgba(75, 22, 18, .03);
}
/* "FREE" and the collection saving read as good news, not as grey data. */
.wc-block-components-radio-control__option .wc-block-components-radio-control__secondary-label,
.wc-block-components-radio-control__option .wc-block-components-radio-control__option-layout
.wc-block-components-radio-control__secondary-label {
color: var(--tbh-veg, #4A7C39);
font-weight: 700;
}
.wc-block-components-radio-control__label {
font-weight: 600;
color: var(--tbh-charcoal, #2D1411);
}
/* ---------------------------------------------------------------
* Mobile checkout: keep the amount and the action in view
*
* On a phone the Place Order button sits below the payment fields, well
* past the fold, and the total is collapsed into the summary at the very
* top. A customer part-way down the form can see neither what they are
* paying nor how to pay it. Pinning the button to the bottom of the
* viewport with the total printed on it solves both: the amount is always
* visible, and the action is always one tap away.
* ------------------------------------------------------------- */
@media (max-width: 781px) {
.woocommerce-checkout .wc-block-checkout__actions {
position: sticky;
bottom: 0;
z-index: 30;
margin-inline: calc(var(--tbh-gutter, 20px) * -1);
padding: 12px var(--tbh-gutter, 20px)
calc(12px + env(safe-area-inset-bottom, 0px));
background: var(--tbh-white, #fff);
border-top: 1px solid var(--tbh-line, #EFDEC0);
box-shadow: 0 -6px 24px rgba(49, 14, 12, .1);
}
.woocommerce-checkout .wc-block-checkout__actions_row {
margin: 0;
padding: 0;
}
/* The terms line above the button is reference text, not something to
read on every scroll — keep it, but quietly. */
.woocommerce-checkout .wc-block-checkout__terms {
font-size: .74rem;
line-height: 1.4;
margin-bottom: 10px;
}
/* Room so the sticky bar never covers the last field. */
.woocommerce-checkout .wc-block-checkout__form {
padding-bottom: 8px;
}
}
/* Coupon disclosure. `white-space: nowrap` guards the label against being
* broken mid-word ("Add coupo / ns") if a parent ever narrows again. */
.wc-block-components-panel__button {
color: var(--tbh-green, #4B1612) !important;
font-weight: 600 !important;
white-space: nowrap;
width: 100%;
text-align: left;
}
/* Checkout form fields */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox input,
.wc-block-components-select__container {
border-radius: var(--tbh-radius, 10px) !important;
border-color: var(--tbh-line, #EFDEC0) !important;
font-family: var(--tbh-sans, sans-serif) !important;
font-size: 16px !important; /* prevents iOS zoom on focus */
}
.wc-block-components-text-input input:focus,
.wc-block-components-combobox input:focus {
outline: 2px solid var(--tbh-gold, #C7891E) !important;
outline-offset: 1px;
box-shadow: none !important;
}
.wc-block-checkout__form .wc-block-components-checkout-step__title {
font-family: var(--tbh-serif, serif) !important;
color: var(--tbh-green, #4B1612) !important;
}
/* Checkout sidebar summary */
.wc-block-checkout__sidebar .wc-block-components-order-summary,
.wc-block-checkout__sidebar {
border-radius: var(--tbh-radius-lg, 16px);
}
@media (min-width: 782px) {
.wc-block-checkout__sidebar {
position: sticky;
top: calc(var(--tbh-header-h, 76px) + 20px);
}
}
/* ---------------------------------------------------------------
* Missing product images
*
* This is a text-led menu: dishes are deliberately listed without
* photography, so most products have no featured image. WooCommerce still
* renders an ![]()
for them, which browsers show as a broken-image icon.
* Hide those elements rather than shipping a grey placeholder, which would
* only add visual noise to the order summary.
*
* Scoped to the cart/checkout summary so that genuine product photography,
* if it is added later, is unaffected — an ![]()
with a real src keeps its
* natural dimensions and is never matched by the [src=""] selectors below.
* ------------------------------------------------------------- */
/* Hide only genuinely empty ![]()
elements, and only inside the cart and
* checkout summaries.
*
* A previous version used bare `img[src=""]` and `img.woocommerce-placeholder`
* with !important, which applied site-wide and also hid the branded
* placeholder set as the WooCommerce fallback image. Products now carry a
* real placeholder, so the only thing worth suppressing is an ![]()
that
* resolved to nothing. Layout is left to WooCommerce. */
.wc-block-components-order-summary-item__image img[src=""],
.wc-block-cart-item__image img[src=""],
.woocommerce-cart-form__cart-item .product-thumbnail img[src=""] {
display: none;
}
/* ---------------------------------------------------------------
* Notices
* ------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
border-top: none;
border-radius: var(--tbh-radius, 10px);
padding: 15px 20px 15px 48px;
font-size: .9rem;
background: var(--tbh-white, #fff);
box-shadow: var(--tbh-shadow, 0 2px 8px rgba(75, 22, 18, .06));
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
top: 16px;
left: 18px;
}
.woocommerce-message {
border-left: 3px solid var(--tbh-green, #4B1612);
}
.woocommerce-message::before {
color: var(--tbh-green, #4B1612);
}
.woocommerce-info {
border-left: 3px solid var(--tbh-gold, #C7891E);
}
.woocommerce-info::before {
color: var(--tbh-gold, #C7891E);
}
.woocommerce-error {
border-left: 3px solid var(--tbh-chilli, #B23A22);
}
/* ---------------------------------------------------------------
* Buttons
* ------------------------------------------------------------- */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
background: var(--tbh-green, #4B1612);
color: var(--tbh-gold-light, #DCB674);
border-radius: 999px;
padding: 14px 28px;
font-family: var(--tbh-sans, sans-serif);
font-size: .9rem;
font-weight: 700;
letter-spacing: .02em;
line-height: 1.2;
transition: background .18s ease;
border: none;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
background: var(--tbh-green-mid, #6E2A21);
color: var(--tbh-gold-light, #DCB674);
}
/* Place order is the money button — make it gold. */
.woocommerce #place_order,
.woocommerce .checkout-button.button {
background: var(--tbh-gold, #C7891E);
color: var(--tbh-green-deep, #310E0C);
width: 100%;
padding: 17px 28px;
font-size: 1rem;
}
.woocommerce #place_order:hover,
.woocommerce .checkout-button.button:hover {
background: var(--tbh-gold-light, #DCB674);
color: var(--tbh-green-deep, #310E0C);
}
/* ---------------------------------------------------------------
* Cart table
* ------------------------------------------------------------- */
.woocommerce table.shop_table {
border: 1px solid var(--tbh-line, #EFDEC0);
border-radius: var(--tbh-radius-lg, 16px);
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
background: var(--tbh-white, #fff);
}
.woocommerce table.shop_table th {
background: var(--tbh-cream-warm, #F9F3E9);
color: var(--tbh-green, #4B1612);
font-size: .74rem;
letter-spacing: .12em;
text-transform: uppercase;
padding: 15px 16px;
font-weight: 700;
}
.woocommerce table.shop_table td {
padding: 18px 16px;
border-top: 1px solid var(--tbh-line, #EFDEC0);
vertical-align: middle;
}
.woocommerce table.shop_table .product-name a {
color: var(--tbh-charcoal, #2D1411);
font-weight: 600;
text-decoration: none;
}
.woocommerce table.shop_table img {
width: 56px;
border-radius: 8px;
}
/* Quantity input */
.woocommerce .quantity .qty {
width: 68px;
padding: 9px 6px;
border: 1px solid var(--tbh-line, #EFDEC0);
border-radius: 999px;
text-align: center;
font-family: inherit;
font-size: .92rem;
font-weight: 600;
color: var(--tbh-charcoal, #2D1411);
}
.woocommerce a.remove {
color: var(--tbh-chilli, #B23A22) !important;
font-size: 1.4rem;
line-height: 1;
}
.woocommerce a.remove:hover {
background: var(--tbh-chilli, #B23A22);
color: #fff !important;
}
/* Totals */
.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading {
font-size: 1.3rem;
margin-bottom: 14px;
}
.woocommerce-cart .cart-collaterals .cart_totals table {
border-radius: var(--tbh-radius-lg, 16px);
overflow: hidden;
}
.woocommerce .order-total .amount,
.woocommerce .cart-subtotal .amount {
color: var(--tbh-green, #4B1612);
font-weight: 700;
}
.woocommerce .order-total .amount {
font-size: 1.24rem;
}
/* ---------------------------------------------------------------
* Checkout form
* ------------------------------------------------------------- */
.woocommerce form .form-row {
margin-bottom: 16px;
padding: 0;
}
.woocommerce form .form-row label {
font-size: .82rem;
font-weight: 600;
color: var(--tbh-charcoal, #2D1411);
margin-bottom: 6px;
display: block;
}
.woocommerce form .form-row .required {
color: var(--tbh-chilli, #B23A22);
text-decoration: none;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
width: 100%;
padding: 13px 16px;
border: 1px solid var(--tbh-line, #EFDEC0);
border-radius: var(--tbh-radius, 10px);
background: var(--tbh-white, #fff);
font-family: inherit;
font-size: 16px; /* 16px prevents iOS zoom on focus. */
color: var(--tbh-charcoal, #2D1411);
line-height: 1.4;
height: auto;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
outline: 2px solid var(--tbh-gold, #C7891E);
outline-offset: 1px;
border-color: transparent;
}
.woocommerce form .form-row textarea {
min-height: 100px;
resize: vertical;
}
/* Normalise select2 to match the other fields. */
.woocommerce .select2-container .select2-selection--single {
height: 48px;
display: flex;
align-items: center;
}
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
padding: 0;
line-height: 1.4;
color: var(--tbh-charcoal, #2D1411);
}
.woocommerce .select2-container .select2-selection--single .select2-selection__arrow {
top: 50%;
transform: translateY(-50%);
right: 10px;
}
/* Checkout layout */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
width: 100%;
float: none;
}
.woocommerce-checkout #customer_details {
margin-bottom: 34px;
}
.woocommerce-checkout #order_review {
background: var(--tbh-white, #fff);
border: 1px solid var(--tbh-line, #EFDEC0);
border-radius: var(--tbh-radius-lg, 16px);
padding: 26px 24px;
}
.woocommerce-checkout #order_review table.shop_table {
border: none;
background: transparent;
}
.woocommerce-checkout #order_review table.shop_table th {
background: transparent;
padding-inline: 0;
}
.woocommerce-checkout #order_review table.shop_table td {
padding-inline: 0;
}
/* Payment box */
.woocommerce-checkout #payment {
background: transparent;
border-radius: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
border: none;
padding: 0 0 14px;
}
.woocommerce-checkout #payment ul.payment_methods li {
padding: 14px 16px;
border: 1px solid var(--tbh-line, #EFDEC0);
border-radius: var(--tbh-radius, 10px);
margin-bottom: 10px;
background: var(--tbh-cream, #FCFAF5);
list-style: none;
}
.woocommerce-checkout #payment div.payment_box {
background: var(--tbh-cream-warm, #F9F3E9);
border-radius: var(--tbh-radius, 10px);
font-size: .86rem;
color: var(--tbh-gray, #826863);
}
.woocommerce-checkout #payment div.payment_box::before {
border-bottom-color: var(--tbh-cream-warm, #F9F3E9);
}
.woocommerce-checkout #payment div.form-row {
padding: 0;
}
/* Coupon */
.woocommerce-form-coupon-toggle .woocommerce-info {
font-size: .86rem;
}
.woocommerce .checkout_coupon {
border: 1px solid var(--tbh-line, #EFDEC0);
border-radius: var(--tbh-radius-lg, 16px);
padding: 20px;
background: var(--tbh-white, #fff);
}
/* ---------------------------------------------------------------
* Empty cart
* ------------------------------------------------------------- */
.woocommerce .cart-empty {
font-family: var(--tbh-serif, serif);
font-size: 1.5rem;
color: var(--tbh-green, #4B1612);
text-align: center;
padding: 40px 0 10px;
}
.woocommerce .return-to-shop {
text-align: center;
padding-bottom: 40px;
}
/* ---------------------------------------------------------------
* Account
* ------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
list-style: none;
margin: 0 0 24px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
display: block;
padding: 9px 16px;
border: 1px solid var(--tbh-line, #EFDEC0);
border-radius: 999px;
background: var(--tbh-white, #fff);
color: var(--tbh-green, #4B1612);
font-size: .84rem;
font-weight: 600;
text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
background: var(--tbh-green, #4B1612);
border-color: var(--tbh-green, #4B1612);
color: var(--tbh-gold-light, #DCB674);
}
/* ---------------------------------------------------------------
* Desktop
* ------------------------------------------------------------- */
@media (min-width: 900px) {
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
width: 48%;
float: left;
}
.woocommerce-checkout .col2-set .col-2 {
float: right;
}
.woocommerce-cart .cart-collaterals .cart_totals {
width: 42%;
}
.woocommerce #place_order {
width: auto;
min-width: 260px;
}
}
/* ---------------------------------------------------------------
* Mobile cart table — stack rows into cards
* ------------------------------------------------------------- */
@media (max-width: 767px) {
.woocommerce table.shop_table_responsive tr td {
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
text-align: right;
padding: 12px 16px;
}
.woocommerce table.shop_table_responsive tr td::before {
font-weight: 700;
font-size: .76rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--tbh-gray, #826863);
}
.woocommerce table.shop_table_responsive tr td.product-remove {
justify-content: flex-end;
}
.woocommerce .quantity .qty {
width: 72px;
}
/* No padding on .woocommerce-page here. It is a class WooCommerce puts
on , so padding it inset the entire document — header and
footer included — leaving cart and checkout 32px narrower than every
other page on a phone. Spacing belongs to .site-main, which is set
above and applies at every width. */
}