/** * Shop archive, single product, cart and checkout — anywhere WooCommerce's * own blocks render product/cart/checkout data. Targets WooCommerce * Blocks' documented, stable class names; nothing here re-implements * coupon, shipping-rate or tax logic that the blocks already handle * against real store data. */ /* ---------- Price display toggle (Ex VAT / Inc VAT) ---------- */ /* See inc/class-price-display.php: every product price renders both tax-mode variants unconditionally (wrapped in .tb-price-excl/-incl), and this is the only thing that decides which one is visible — driven by the data-price-mode attribute on , set from localStorage by a pre-paint script, never read server-side. One rule, applies everywhere a price appears (shop grid, PDP, cross-sells, home page rows), rather than repeating it per card design. */ .tb-price-mode { display: none; } html[data-price-mode="excl"] .tb-price-excl, html[data-price-mode="incl"] .tb-price-incl { display: inline; } /* ---------- Shared page head / breadcrumb ---------- */ .tb-page-head { text-align: center; padding: 3rem 1.5rem 0.5rem; max-width: none; } .tb-page-head h1 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 500; } .tb-breadcrumb { font-size: 0.75rem; color: var(--wp--preset--color--juniper-soft); margin: 1.4rem auto 0; } .tb-breadcrumb a { text-decoration: underline; } /* ---------- Shop toolbar: filters + sort ---------- */ /* No border-bottom of its own — .tb-shop-sort directly below already carries one (it needs it regardless, being sticky-positioned), and the two sat close enough together to read as one doubled-up line. */ .tb-shop-toolbar { max-width: 1200px; margin: 1.8rem auto 0; padding: 0 clamp(1.2rem, 4vw, 3rem); display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding-bottom: 1rem; } .tb-shop-filters { display: flex; flex-wrap: wrap; gap: 1.6rem; flex: 1; } .tb-shop-filters .wp-block-woocommerce-product-filter-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; } .tb-shop-filters .wc-block-product-filter-chips__item { font-size: 0.74rem; letter-spacing: 0.04em; padding: 0.5rem 1rem; border: 1px solid var(--wp--preset--color--juniper-line); border-radius: 20px; background: transparent; color: var(--wp--preset--color--juniper); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .tb-shop-filters .wc-block-product-filter-chips__item:hover { border-color: var(--wp--preset--color--juniper); } .tb-shop-filters .wc-block-product-filter-chips__item[aria-checked="true"] { background: var(--wp--preset--color--juniper); color: var(--wp--preset--color--oatmilk); border-color: var(--wp--preset--color--juniper); } .tb-shop-filters .wc-block-product-filter-chips__count { opacity: 0.75; margin-left: 0.15rem; } .tb-shop-sort { flex-shrink: 0; max-width: 1200px; margin: 0 auto; padding: 0.7rem clamp(1.2rem, 4vw, 3rem); display: flex; align-items: center; gap: 0.9rem; justify-content: flex-end; /* The page background is already oatmilk, so this only needs to paint over content scrolling past underneath it — nothing outside the 1200px-wide bar needs its own background to avoid a visible seam. --tb-header-h is kept live by chrome.js (assets/js/chrome.js), since the sticky header's real height changes once the announce bar, which sits above the nav, gets dismissed. */ position: sticky; top: var(--tb-header-h, 0px); z-index: 90; background: var(--wp--preset--color--oatmilk); border-bottom: 1px solid var(--wp--preset--color--juniper-line); } .tb-shop-sort .wc-block-product-results-count { font-size: 0.74rem; letter-spacing: 0.03em; color: var(--wp--preset--color--juniper-soft); white-space: nowrap; } .tb-shop-sort .orderby { border: 1px solid var(--wp--preset--color--juniper-line); background: transparent; font-family: var(--wp--preset--font-family--body); font-size: 0.82rem; padding: 0.5rem 0.7rem; } /* Price sort toggle (see assets/js/price-sort-toggle.js) — same visual language as the header's .tb-price-toggle (base.css): bordered, uppercase, apricot fill once engaged. Empty until the JS sets its label, so nothing shows for the rare visitor without JS rather than an inert control with no text. */ .tb-price-sort-toggle { border: 1px solid var(--wp--preset--color--juniper-line); background: none; padding: 0.5rem 0.7rem; cursor: pointer; font-family: var(--wp--preset--font-family--body); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; color: var(--wp--preset--color--juniper); white-space: nowrap; } .tb-price-sort-toggle:empty { display: none; } .tb-price-sort-toggle:hover { border-color: var(--wp--preset--color--juniper); } .tb-price-sort-toggle[aria-pressed="true"] { background: var(--wp--preset--color--apricot); border-color: var(--wp--preset--color--apricot); } .tb-price-sort-toggle[data-direction="asc"]::after { content: ' \2191'; } .tb-price-sort-toggle[data-direction="desc"]::after { content: ' \2193'; } /* ---------- Shop / archive grid ---------- */ /* .tb-shop-grid is a direct child of
, a "constrained" layout group, so WordPress's own global styles cap it to the default content-width and centre it — same class of bug fixed on the header today. That silently capped this whole block to ~720px, which is why .tb-shop-sort's own max-width:1200px never had room to apply and it looked "lonely" instead of lining up with the toolbar/grid above and below it. */ .tb-shop-grid { max-width: none; } .tb-shop-grid .wc-block-product-template { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem 1.1rem; max-width: 1200px; margin: 2.6rem auto 0; list-style: none; padding: 0 clamp(1.2rem, 4vw, 3rem); } .tb-shop-grid .wc-block-product-template > li { /* WordPress's block-gap default gives every list item but the first a margin-top, on top of (and misaligned against) the grid's own gap above — that's what was shifting every card but the first down within its row instead of all four sharing one row-start edge. */ margin-top: 0 !important; } /* The shop archive applies .tb-shop-card to a
(a real product block wraps it in its own link). assets/js/members-product-grid.js instead renders one whole-card directly, since it's plain JS-rendered markup with no separate link block — needs its own display/colour reset an anchor doesn't get for free. Both variants are flex columns stretched to the grid row's height (CSS Grid already stretches the
  • , but nothing below it was flexed to fill that height) so that .wp-block-woocommerce-product-price can be pinned to the bottom below variable-length titles — see the margin-top:auto rule further down. */ .tb-shop-card { display: flex; flex-direction: column; height: 100%; } a.tb-shop-card { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; } .tb-shop-card-media { position: relative; aspect-ratio: 3 / 3.9; overflow: hidden; background: var(--wp--preset--color--oatmilk-dim); border: 1px solid var(--wp--preset--color--juniper-line); } /* The image block renders
    — only ever styling the img itself left its two ancestors at their default shrink-to-fit height, so the img's own height:100% just resolved against a box no taller than the img, and the real .tb-shop-card-media (sized via aspect-ratio) showed its own background above/below as empty space. Both ancestors need to be stretched to full height before the img's 100% means anything. */ .tb-shop-card-media .wc-block-components-product-image, .tb-shop-card-media .wc-block-components-product-image a { display: block; height: 100%; /* .tb-shop-card-media is a flow-layout group, which gives every child but the first a default block-gap margin-top based purely on DOM sibling order — it doesn't know .tb-shop-tag before this is position:absolute (and so visually takes no space), so this still got pushed down as if a real preceding element were there. */ margin-top: 0; } .tb-shop-card-media img { /* Chromium gives loading="lazy" images its own internal placeholder containment (contain:size + a generic contain-intrinsic-size) reserved space before decode — that's what was overriding width/height:100% and locking the box to an unrelated placeholder ratio. */ contain: none !important; width: 100% !important; height: 100% !important; object-fit: cover; transition: transform 0.5s ease; } .tb-shop-card:hover .tb-shop-card-media img { transform: scale(1.035); } .tb-shop-card-media .tb-shop-tag { position: absolute; top: 0.7rem; left: 0.7rem; z-index: 1; margin: 0; background: var(--wp--preset--color--apricot); color: var(--wp--preset--color--juniper); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; padding: 0.28rem 0.55rem; border-radius: 1px; } .tb-shop-card-media .tb-shop-tag:empty { display: none; } /* "Sold Out" (see product_badge() in inc/block-bindings.php, which returns that text ahead of any tag/Sale badge for an out-of-stock product) is deliberately a different colour from the apricot used for every other badge, so it reads as a distinct status rather than just another tag. WooCommerce's own product wrapper already carries an "outofstock" class on every out-of-stock product card — no theme code needs to add it. */ li.outofstock .tb-shop-card-media .tb-shop-tag { background: #3F6B4E; color: var(--wp--preset--color--oatmilk); } .tb-shop-card-media .wp-block-woocommerce-product-button { position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0.7rem; opacity: 0; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.2s ease; } .tb-shop-card-media .wp-block-woocommerce-product-button button { /* WC's own inline style (.wp-block-button.wc-block-components-product- button .wp-block-button__link) is 3 classes deep and beats this selector on specificity alone, regardless of load order. */ width: 100% !important; padding: 0.65rem 1.4rem; } .tb-shop-card:hover .wp-block-woocommerce-product-button { opacity: 1; transform: translateY(0); } .tb-shop-card .tb-product-name { margin: 0.7rem 0 0; font-size: 1rem; font-weight: 500; line-height: 1.3; } .tb-shop-card .tb-product-name a { color: inherit; text-decoration: none; } .tb-shop-card .tb-product-spec { margin: 0.2rem 0 0; font-family: var(--wp--preset--font-family--body); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--juniper-soft); } .tb-shop-card .tb-product-spec:empty { display: none; } .tb-shop-card .wc-block-components-product-price { margin-top: 0.35rem; font-size: 0.82rem; font-weight: 600; color: var(--wp--preset--color--apricot-deep); } /* The price block renders as an outer
    wrapping an inner
    . The outer div is the real flex item of .tb-shop-card, so margin-top:auto has to go there, not on the inner div styled above — confirmed the hard way on the "You May Also Like" cards, where the same mistake (auto-margin on the inner div) silently never worked. */ .tb-shop-card .wp-block-woocommerce-product-price { margin-top: auto; } /* ---------- Pagination ---------- */ .tb-shop-pagination { max-width: none; gap: 0.6rem; margin: 3rem 0 4rem; } .tb-shop-pagination .wp-block-query-pagination-numbers { display: flex; align-items: center; gap: 0.6rem; } .tb-shop-pagination .page-numbers { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--wp--preset--color--juniper-line); background: transparent; color: var(--wp--preset--color--juniper); font-size: 0.8rem; } .tb-shop-pagination .page-numbers.current { background: var(--wp--preset--color--juniper); color: var(--wp--preset--color--oatmilk); border-color: var(--wp--preset--color--juniper); } .tb-shop-pagination .page-numbers.dots { border: none; width: auto; } .tb-shop-pagination .wp-block-query-pagination-previous, .tb-shop-pagination .wp-block-query-pagination-next { font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--juniper-soft); } .tb-shop-pagination .wp-block-query-pagination-previous:hover, .tb-shop-pagination .wp-block-query-pagination-next:hover { color: var(--wp--preset--color--apricot-deep); } @media (max-width: 960px) { .tb-shop-grid .wc-block-product-template { grid-template-columns: repeat(2, 1fr); } } /* ---------- Single product (PDP) ---------- */ .tb-pdp { max-width: 1140px; margin: 1.2rem auto 4rem; padding: 0 clamp(1.2rem, 4vw, 3rem); gap: 3.2rem; align-items: start; } .tb-pdp > * { /* Grid items default to min-width:auto, which lets content (the * gallery's native-sized images) refuse to shrink below its intrinsic * width and overflow into the next column instead of respecting the * track width. */ min-width: 0; } /* Product gallery: WooCommerce renders the classic gallery markup here * (not the block-native wc-block-product-gallery-* classes), because * inc/woocommerce.php only declares lightbox support — see that file's * comment for why slider/zoom support were deliberately left off. */ .tb-pdp .woocommerce-product-gallery { position: relative; } .tb-pdp .woocommerce-product-gallery__wrapper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; } .tb-pdp .woocommerce-product-gallery__image { border: 1px solid var(--wp--preset--color--juniper-line); overflow: hidden; } .tb-pdp .woocommerce-product-gallery__image:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 5; } .tb-pdp .woocommerce-product-gallery__image:not(:first-child) { aspect-ratio: 1 / 1; } .tb-pdp .woocommerce-product-gallery__image img { width: 100%; height: 100%; object-fit: cover; } .tb-pdp-spec { margin-top: 0.5rem; font-size: 0.82rem; letter-spacing: 0.03em; color: var(--wp--preset--color--juniper-soft); } .tb-pdp-region-notice { margin-top: 0.6rem; font-size: 0.78rem; font-weight: 600; color: var(--wp--preset--color--apricot-deep); } .tb-pdp-region-notice:empty { display: none; } .tb-pdp-spec-line { text-transform: uppercase; } .tb-pdp-spec-line > * + *::before { content: "\00b7"; margin-right: 0.4em; } .tb-pdp-spec-line a { text-decoration: none; color: inherit; } /* The price block renders as two nested divs — .wp-block-woocommerce- product-price (the actual direct child of .tb-pdp-info, and so the one WordPress's block-gap margin-top applies to) wrapping .wc-block-components-product-price (which only carries the block's own styling). The empty (display:none) region-notice paragraph before it still counts as a DOM sibling for block-gap purposes, same class of issue as the shop-card image gap above. */ .tb-pdp-info .wp-block-woocommerce-product-price { margin-top: 0 !important; } .tb-pdp-info .wc-block-components-product-price { font-size: 1.35rem; font-weight: 600; } .tb-pdp-info .wc-block-components-product-stock-indicator { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.8rem; font-size: 0.8rem; color: var(--wp--preset--color--juniper-soft); } .tb-pdp-info .wc-block-components-product-stock-indicator::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #4a7a5e; } /* Add to Cart Form: a simple product renders WooCommerce's classic * form.cart markup inside the block wrapper, not the block-native * quantity selector — the block's job here is just placement/context, * not reimplementing the classic template. */ .tb-pdp-info .wc-block-add-to-cart-form > p.stock { display: none; /* the Product Stock Indicator block above already shows this */ } .tb-pdp-info .wc-block-add-to-cart-form form.cart { display: flex; align-items: center; gap: 0.8rem; margin-top: 1.6rem; } .tb-pdp-info .wc-block-add-to-cart-form .quantity { display: flex; align-items: center; margin: 0; border: 1px solid var(--wp--preset--color--juniper-line); } .tb-pdp-info .wc-block-add-to-cart-form .qty { width: 44px; border: none; background: transparent; text-align: center; font-family: var(--wp--preset--font-family--body); font-size: 0.9rem; padding: 0; } /* This form renders as WooCommerce's "stepper" layout (minus/plus on their own row above the number, not a single inline row) — confirmed via the wc-block-add-to-cart-form--stepper class on the real page. The button's actual height there is set by its own grid row, not by us; a hardcoded height:44px here forced it taller than that row, so the button box itself — not just the glyph inside it — no longer matched where the row visually sat, which is what centering the glyph alone couldn't fix. Letting height size naturally, plus flex + line-height:1 to keep the glyph itself centred within whatever that natural height turns out to be, fixes both problems together. */ .tb-pdp-info .wc-block-components-quantity-selector__button { width: 34px; border: none; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; font-size: 1.2rem; color: var(--wp--preset--color--juniper); } .tb-pdp-info .wc-block-add-to-cart-form .single_add_to_cart_button { flex: 1; padding: 0.95rem 0; font-size: 0.82rem; text-align: center; } .tb-pdp-note { margin-top: 1rem; font-size: 0.78rem; color: var(--wp--preset--color--juniper-soft); } /* Replaces the add-to-cart form for a Whisky Club members-only product when the visitor isn't a member — see the render_block filter in inc/woocommerce.php. */ .tb-pdp-members-only { border: 1px solid var(--wp--preset--color--juniper-line); background: var(--wp--preset--color--oatmilk-dim); padding: 1rem 1.2rem; font-size: 0.88rem; line-height: 1.6; color: var(--wp--preset--color--juniper-soft); } .tb-pdp-members-only a { color: var(--wp--preset--color--apricot-deep); font-weight: 600; text-decoration: underline; } .tb-pdp-summary-title { margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--wp--preset--color--juniper-line); font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: 1rem; } .tb-pdp-summary { margin-top: 0.8rem; font-size: 0.88rem; color: var(--wp--preset--color--juniper-soft); line-height: 1.65; } .tb-pdp-summary p { margin: 0 0 1em; } .tb-pdp-summary p:last-child { margin-bottom: 0; } .tb-pdp-summary strong, .tb-pdp-summary b { color: var(--wp--preset--color--juniper); font-weight: 600; } .tb-pdp-summary a { color: var(--wp--preset--color--juniper); text-decoration: underline; } /* Native
    / — toggling, keyboard support and the disclosure state all come free from the browser, no JS needed. */ .tb-pdp-toggle { margin-top: 2.2rem; border-top: 1px solid var(--wp--preset--color--juniper-line); } .tb-pdp-toggle summary { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 0; font-size: 0.9rem; font-weight: 600; cursor: pointer; list-style: none; } .tb-pdp-toggle summary::-webkit-details-marker { display: none; } .tb-pdp-toggle-icon { font-size: 1rem; color: var(--wp--preset--color--juniper-soft); transition: transform 0.2s ease; } .tb-pdp-toggle-icon::before { content: "+"; } .tb-pdp-toggle[open] .tb-pdp-toggle-icon { transform: rotate(45deg); } .tb-pdp-toggle-body { padding: 0 0 1.2rem; font-size: 0.88rem; color: var(--wp--preset--color--juniper-soft); line-height: 1.65; } .tb-pdp-toggle-body p { margin-bottom: 0.6rem; } .tb-pdp-toggle-body a { color: var(--wp--preset--color--juniper); text-decoration: underline; } .tb-cross-sell { margin: 2rem auto 4rem; max-width: 1140px; padding: 0 clamp(1.2rem, 4vw, 3rem); } /* Fixed at 3 products (see the perPage:3 query in single-product.html), so a plain 3-column wrapping grid replaces the old horizontal-scroll row — there's never enough items to need scrolling. */ .tb-cross-sell-grid .wc-block-product-template { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; list-style: none; } .tb-cross-sell-grid .wc-block-product-template > li { /* Same block-gap-margin-on-every-child-but-the-first quirk fixed on the main shop grid — see the comment there. */ margin-top: 0 !important; /* WooCommerce's own leftover flex-era rule (.is-flex-container. columns-3 > li { width: calc(33.33% - .83333em) }) still applies a width here, and now that this is a grid item instead of a flex item that percentage resolves against its own already-⅓-width grid cell — shrinking each card to a third of a third. */ width: 100% !important; } /* Bottom-align the VIEW button across all three cards regardless of how many lines a given product's title wraps to — the grid row already stretches every
  • to the tallest card's height (CSS Grid's own default align-items:stretch), this just makes the card itself fill that height and pushes the button to the end of it rather than sitting wherever the title/price happened to end. */ .tb-cross-sell-card { display: flex; flex-direction: column; height: 100%; } .tb-cross-sell-card .wc-block-components-product-image { aspect-ratio: 3 / 3.6; background: var(--wp--preset--color--oatmilk-dim); border: 1px solid var(--wp--preset--color--juniper-line); overflow: hidden; margin-bottom: 0.6rem; } .tb-cross-sell-card .wc-block-components-product-image a { display: block; height: 100%; } .tb-cross-sell-card .wc-block-components-product-image img { width: 100%; height: 100%; object-fit: contain; padding: 0.8rem; } .tb-cross-sell-card .wp-block-post-title { font-family: var(--wp--preset--font-family--display); margin: 0 0 0.2rem; line-height: 1.3; } .tb-cross-sell-card .wc-block-components-product-price { color: var(--wp--preset--color--apricot-deep); font-weight: 600; } /* The flex column's one auto-margin — price and the VIEW button below it move down together as a pair to sit flush with the bottom of the card, so both line up across all three cards regardless of how many lines a given title wraps to, rather than just the button lining up while price stays wherever the title left it. Set on .wp-block-woocommerce-product-price, not .wc-block-components-product-price above — confirmed via a real render that WooCommerce wraps the price block in that extra outer div, which is the actual direct child of the flex column (.tb-cross-sell-card); auto margins only do anything on a direct flex item, so putting it on the inner, non-flex-item div silently computed to 0 instead of erroring. */ .tb-cross-sell-card .wp-block-woocommerce-product-price { margin-top: auto; } .tb-cross-sell-view { margin: 0.6rem 0 0; width: 100%; } .tb-cross-sell-view a { display: block; width: 100%; background: var(--wp--preset--color--juniper); color: var(--wp--preset--color--oatmilk); border: none; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; text-align: center; text-decoration: none; padding: 0.55rem 0; } .tb-cross-sell-view a:hover { background: var(--wp--preset--color--apricot-deep); color: var(--wp--preset--color--juniper); } @media (max-width: 860px) { .tb-pdp { grid-template-columns: 1fr !important; } } /* ---------- Shipping destination label (cart) ---------- */ .tb-fulfilment-label { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--wp--preset--color--juniper-soft); margin-bottom: 0.7rem; } /* ---------- Cart ---------- */ .tb-cart { max-width: 1140px; margin: 2.6rem auto 5rem; padding: 0 clamp(1.2rem, 4vw, 3rem); } /* Two-column layout: items + cross-sells on the left, summary sidebar on the right — overriding the block's own default (a single-column flex stack with the sidebar's order controlled by `.wc-block-cart__sidebar`, which this theme's explicit inner-block tree in templates/cart.html doesn't use the class name of) to the design's 1.5fr/1fr split. */ .tb-cart .wp-block-woocommerce-filled-cart-block { display: grid !important; grid-template-columns: 1.5fr 1fr; gap: 3rem; align-items: start; } /* The block's own `.wc-block-cart__main` / `.wc-block-cart__sidebar` classes carry a fixed width tuned for its native (non-grid) two-column layout; confirmed via a real render that this stops the grid's own stretch behaviour from taking effect, leaving both columns far narrower than their track and a large gap between them. Forcing width back to 100% makes each fill the grid cell it's actually placed in. */ .tb-cart .wp-block-woocommerce-cart-items-block, .tb-cart .tb-cart-summary { width: 100% !important; max-width: none !important; } /* The block's own cart-items-block always renders its Cross-Sells child before the line-items table, regardless of the order they're written in templates/cart.html (confirmed via a real render — this isn't a templating mistake, WooCommerce's own render callback does this). Flex + explicit `order` corrects the *visual* order without fighting that render callback. */ .tb-cart .wp-block-woocommerce-cart-items-block { display: flex !important; flex-direction: column; } .tb-cart .wc-block-cart-items { order: 1; } .tb-cart .tb-cart-addons { order: 2; } /* ---------- Cart item rows ---------- */ .tb-cart .wc-block-cart-items__header { display: none; } .tb-cart .wc-block-cart-items__row { display: grid !important; grid-template-columns: 88px 1fr auto !important; column-gap: 1.1rem; align-items: center; padding: 1.2rem 0; border-bottom: 1px solid var(--wp--preset--color--juniper-line); } /* Every also carries its own border-top from WooCommerce's own generic ".wc-block-cart__main .wc-block-cart-items td" rule (harmless while the row is a real , since adjacent cells/rows share the line) — once the row above is switched to display:grid each cell's border renders as its own independent line, right on top of the row divider above, i.e. the "double borders". One line per row, from the row itself, is the only one wanted. Needs the extra .wc-block-cart-items__row qualifier: WC's own selector matches two classes + td (specificity 0,2,1), so a plain ".tb-cart .wc-block-cart-item__image" (0,2,0) loses regardless of stylesheet order — confirmed via the browser's own matched-rules inspector, not just reasoned about. */ .tb-cart .wc-block-cart-items__row .wc-block-cart-item__image, .tb-cart .wc-block-cart-items__row .wc-block-cart-item__product, .tb-cart .wc-block-cart-items__row .wc-block-cart-item__total { border-top: 0; } .tb-cart .wc-block-cart-item__image { grid-column: 1; grid-row: 1; } .tb-cart .wc-block-cart-item__image img { aspect-ratio: 3 / 3.6; object-fit: cover; border: 1px solid var(--wp--preset--color--juniper-line); } .tb-cart .wc-block-cart-item__product { grid-column: 2; grid-row: 1; } .tb-cart .wc-block-components-product-name { font-family: var(--wp--preset--font-family--display); font-size: 1rem; font-weight: 500; } .tb-cart .wc-block-cart-item__remove-link { font-size: 0.72rem; color: var(--wp--preset--color--apricot-deep); margin-top: 0.5rem; } .tb-cart .wc-block-cart-item__quantity, .tb-cart .wc-block-cart-item__total { grid-column: 3; justify-self: end; } .tb-cart .wc-block-cart-item__quantity { grid-row: 1; } .tb-cart .wc-block-cart-item__total { grid-row: 2; font-weight: 600; font-size: 0.92rem; color: var(--wp--preset--color--juniper); } .tb-cart .wc-block-components-quantity-selector { border: 1px solid var(--wp--preset--color--juniper-line); height: auto; } .tb-cart .wc-block-components-quantity-selector__button { width: 28px; height: 28px; } /* ---------- Cross-sells: "You might also like" ---------- */ .tb-cart-addons { margin-top: 2.8rem; } .tb-cart-addons .wp-block-heading { font-family: var(--wp--preset--font-family--display); font-size: 1.05rem; font-weight: 500; margin-bottom: 1.1rem !important; } /* The products wrapper WooCommerce renders here has no class of its own (confirmed via a real render — it's a plain
    , not the `.wp-block-woocommerce-cart-cross-sells-products-block` its block name would suggest), so it's targeted by position: the one
    among `.tb-cart-addons`'s two direct children (the other being the "You might also like" heading). */ .tb-cart-addons > div { display: flex !important; flex-wrap: wrap; gap: 1rem; list-style: none; } .tb-cart-addons .cross-sells-product { flex: 1 1 160px !important; max-width: 160px !important; display: block !important; padding: 0 0 0.8rem !important; margin-bottom: 0 !important; text-align: left !important; border: 1px solid var(--wp--preset--color--juniper-line); } .tb-cart-addons .cross-sells-product .wc-block-components-product-image { aspect-ratio: 3 / 3.6; overflow: hidden; background: var(--wp--preset--color--oatmilk-dim); margin-bottom: 0.6rem !important; } .tb-cart-addons .cross-sells-product .wc-block-components-product-name { font-size: 0.85rem; font-weight: 400 !important; padding: 0 0.7rem; line-height: 1.3; } .tb-cart-addons .cross-sells-product .wc-block-components-product-price { font-size: 0.78rem; color: var(--wp--preset--color--apricot-deep); font-weight: 600; padding: 0.3rem 0.7rem 0; } .tb-cart-addons .cross-sells-product .wc-block-components-product-button__button { margin: 0.6rem 0.7rem 0 !important; width: calc(100% - 1.4rem); background: var(--wp--preset--color--juniper); color: var(--wp--preset--color--oatmilk); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; padding: 0.55rem 0; } .tb-cart-addons .cross-sells-product .wc-block-components-product-button__button:hover { background: var(--wp--preset--color--apricot-deep); color: var(--wp--preset--color--juniper); } /* Mini Cart drawer's own cross-sells (markup hand-built by assets/js/minicart-cross-sells.js into parts/mini-cart.html's static container — see that JS file's docblock for why the native WC Blocks cross-sells block doesn't work here at all). Same source data and same visual tokens (borders, price color, button colors) as .tb-cart-addons above, just laid out as a single narrow column of horizontal rows (image left, details right) rather than a multi-column grid: the drawer is ~360-400px wide (WC Blocks' own default, left unstyled elsewhere in this theme), nowhere near enough for even two of .tb-cart-addons's 160px cards side by side. Reuses the `.cross-sells-product`/`.wc-block-components-product-*` class names from that cart-page version purely so this CSS didn't need inventing a second set of names for the same visual role — the JS writes them directly, they're not WC Blocks output here. */ .tb-minicart-addons { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--wp--preset--color--juniper-line); } .tb-minicart-addons .wp-block-heading { font-family: var(--wp--preset--font-family--display); font-size: 0.92rem; font-weight: 500; margin-bottom: 0.8rem !important; } .tb-minicart-addons-list { display: flex; flex-direction: column; gap: 0.8rem; list-style: none; margin: 0; padding: 0; } .tb-minicart-addons .cross-sells-product { display: grid !important; grid-template-columns: 56px 1fr; grid-template-rows: auto auto auto; column-gap: 0.7rem; align-items: center; padding: 0 !important; margin-bottom: 0 !important; text-align: left !important; border: none !important; } .tb-minicart-addons .cross-sells-product .wc-block-components-product-image { grid-row: 1 / 4; width: 56px; height: 56px; overflow: hidden; background: var(--wp--preset--color--oatmilk-dim); border: 1px solid var(--wp--preset--color--juniper-line); margin-bottom: 0 !important; } .tb-minicart-addons .cross-sells-product .wc-block-components-product-name { font-size: 0.78rem; font-weight: 400 !important; padding: 0 !important; line-height: 1.3; } .tb-minicart-addons .cross-sells-product .wc-block-components-product-price { font-size: 0.74rem; color: var(--wp--preset--color--apricot-deep); font-weight: 600; padding: 0.15rem 0 0 !important; } .tb-minicart-addons .cross-sells-product .wc-block-components-product-button__button { margin: 0.35rem 0 0 !important; width: auto; background: none; border: 1px solid var(--wp--preset--color--juniper); color: var(--wp--preset--color--juniper); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; padding: 0.3rem 0.6rem; } .tb-minicart-addons .cross-sells-product .wc-block-components-product-button__button:hover { background: var(--wp--preset--color--juniper); color: var(--wp--preset--color--oatmilk); } /* ---------- Order summary sidebar ---------- */ .tb-cart-summary { border: 1px solid var(--wp--preset--color--juniper-line); padding: 1.6rem; position: sticky; top: 100px; } .tb-cart-summary .wc-block-cart__totals-title { font-family: var(--wp--preset--font-family--display); font-size: 1.15rem; font-weight: 500; margin-bottom: 1.2rem; } /* See templates/cart.html's top comment: hand-authoring the cart-order-summary-totals-block wrapper (needed for shipping-block to render at all) makes WooCommerce's own Cart::render() wrongly think this is a legacy template and inject a second, mostly-inert copy of the whole order-summary structure directly inside cart-order-summary- block. Everything in that copy stays empty except Subtotal, which duplicates visibly — hidden here by position: it's the only Subtotal that's a *direct* child of cart-order-summary-block, since our real one sits a level deeper inside cart-order-summary-totals-block. */ .tb-cart-summary > .wp-block-woocommerce-cart-order-summary-block > .wp-block-woocommerce-cart-order-summary-subtotal-block { display: none; } .tb-cart-summary .wc-block-components-totals-item, .tb-cart-summary .wc-block-components-totals-footer-item { font-size: 0.88rem; color: var(--wp--preset--color--juniper-soft); padding: 0.5rem 0; } .tb-cart-summary .wc-block-components-totals-footer-item { font-weight: 600; color: var(--wp--preset--color--juniper); font-size: 1rem; border-top: 1px solid var(--wp--preset--color--juniper-line); margin-top: 0.4rem; padding-top: 0.8rem; } /* WooCommerce wraps both the coupon row and this footer-total row in its own .wc-block-components-totals-wrapper, which carries a border-top of its own from WC's base styles — right next to the more specific dividers above/below that this theme deliberately added, producing the "double borders" look. This theme's own divider is the only one wanted. */ .tb-cart-summary .wc-block-components-totals-wrapper { border-top: 0; } /* Coupon accordion — WC's own "Add coupons" toggle is already the same open/close accordion interaction as the design's coupon panel (see the gettext override in inc/woocommerce.php for its relabelled text); this just re-skins it to match. */ .tb-cart-summary .wc-block-components-totals-coupon { border-top: 1px solid var(--wp--preset--color--juniper-line); margin-top: 0.4rem; padding-top: 0.2rem; } .tb-cart-summary .wc-block-components-panel__button { font-size: 0.85rem; font-weight: 600; color: var(--wp--preset--color--juniper); } .tb-cart-summary .wc-block-components-totals-coupon__input input { border: 1px solid var(--wp--preset--color--juniper-line); } .tb-cart-summary .wc-block-components-totals-coupon__button { background: var(--wp--preset--color--juniper); color: var(--wp--preset--color--oatmilk); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; } .tb-cart-summary .wc-block-components-totals-coupon__button:hover { background: var(--wp--preset--color--apricot-deep); color: var(--wp--preset--color--juniper); } /* Shipping — DHL Express live rates (via the tb_dhl WC_Shipping_Method; see thompsonbros-dhl-shipping) and any configured Local Pickup method both surface here automatically once a destination is set, as a normal WooCommerce shipping-rate list — no bespoke rate-fetching UI needed. */ .tb-cart-summary .wc-block-components-totals-shipping { border-top: 1px solid var(--wp--preset--color--juniper-line); margin-top: 0.4rem; padding-top: 0.9rem; } /* Same "double borders" cause as .wc-block-components-totals-wrapper above: this row's own enclosing block also carries a WC-default border-top, right above the shipping row's deliberate one. */ .tb-cart-summary .wp-block-woocommerce-cart-order-summary-totals-block { border-top: 0; } .tb-cart-summary .wc-block-components-address-form input, .tb-cart-summary .wc-block-components-address-form select { border: 1px solid var(--wp--preset--color--juniper-line); background: transparent; } .tb-cart-summary .wc-block-components-radio-control__label { font-size: 0.85rem; } /* Loading/changed feedback for the shipping row and the sidebar's "Estimated total", toggled by assets/js/cart-shipping-country.js (cart page) and assets/js/checkout-shipping-country.js (checkout page) while a rate refetch is in flight, and briefly after it lands — both updating quietly on their own is easy to miss, especially on a small screen. Not scoped under `.tb-cart-summary`/`.tb-checkout`: both pages' scripts toggle the exact same classes on the exact same WooCommerce markup, and neither ever appears outside a shipping/totals row this theme controls the JS for, so one shared, page-agnostic rule covers both. During the fetch, the shipping row's stale price is fully hidden (not just dimmed) behind a spinner in the same spot, so there's nothing stale left on screen to mistake for the answer. */ .wc-block-components-totals-shipping.tb-shipping-loading .wc-block-components-totals-item__value { visibility: hidden; position: relative; } .wc-block-components-totals-shipping.tb-shipping-loading .wc-block-components-totals-item__value::after { content: ""; visibility: visible; position: absolute; top: 50%; right: 0; width: 14px; height: 14px; margin-top: -7px; border: 2px solid var(--wp--preset--color--juniper-line); border-top-color: var(--wp--preset--color--apricot-deep); border-radius: 50%; animation: tb-spin 0.7s linear infinite; } /* The spinner above replaces the stale price digits, but at 14px it's easy to miss entirely — this adds an explicit line of text in the same spot the service name ("EXPRESS DOMESTIC") normally sits, right under the price, so there's something a visitor would actually read as "something is happening" rather than just a small shape changing in their peripheral vision. */ .wc-block-components-totals-shipping.tb-shipping-loading::after { content: "Updating shipping\2026"; display: block; font-size: 0.72rem; letter-spacing: 0.02em; color: var(--wp--preset--color--apricot-deep); margin-top: 0.2rem; } @keyframes tb-spin { to { transform: rotate(360deg); } } .wc-block-components-totals-item__value.tb-shipping-pulse { display: inline-block; animation: tb-shipping-pulse 0.7s ease; } @keyframes tb-shipping-pulse { 0% { color: var(--wp--preset--color--apricot-deep); transform: scale(1.12); } 100% { color: inherit; transform: scale(1); } } /* Shipping destination selector (see templates/cart.html and assets/js/cart-shipping-country.js) — the Cart block's own shipping calculator only ever shows an editable address form when it can't resolve any rate at all; for a guest it silently assumes the store's base country and never offers a way to preview a rate elsewhere. This sits directly above the fulfilment method radios, changing it updates the native shipping row above via the same wc/store/cart data store, so the two always agree without this needing to render a rate itself. */ .tb-ship-country { border-top: 1px solid var(--wp--preset--color--juniper-line); margin-top: 0.4rem; padding-top: 0.9rem; } .tb-ship-country select { width: 100%; background: transparent; border: 1px solid var(--wp--preset--color--juniper-line); color: var(--wp--preset--color--juniper); font-family: var(--wp--preset--font-family--body); font-size: 0.88rem; padding: 0.65rem 0.8rem; margin-top: 0.5rem; } .tb-ship-country select:focus { outline: none; border-color: var(--wp--preset--color--apricot-deep); } .tb-ship-country-note { font-size: 0.72rem; color: var(--wp--preset--color--juniper-soft); line-height: 1.5; margin-top: 0.5rem; } /* Customizable Select API (see templates/cart.html for the required