/** * ToyTool — WooCommerce page styling (single product, cart, checkout, * my account). All markup here is WooCommerce's own native output; * this file only styles it. * Mobile-first. */ /* Shop archive / single product pages use WooCommerce's own archive-product.php / single-product.php, where .content-area really is the wrapper WooCommerce itself outputs. Cart, Checkout and My Account are ordinary WP Pages rendered through this theme's own page.php instead (a [woocommerce_cart]-style shortcode in normal page content) — page.php already gives those the wide container via its own tt-container class (see the is_cart()/is_checkout()/ is_account_page() check there), so no .content-area rule is needed for them here. */ .woocommerce .content-area { max-width: var(--tt-wide-width); margin-inline: auto; padding-inline: var(--tt-container-padding); padding-block: 1.5rem var(--tt-section-spacing); } /* ---------- Native WooCommerce buttons, everywhere ---------- WooCommerce core ships its own button skin — a plain grey `.button` and a purple `.button.alt` (#7f54b3) for primary actions like "Place order" / "Proceed to checkout" / "Apply coupon". Nothing in this theme overrode it, so every WC-rendered button (not the template's own .tt-button markup) was still wearing WooCommerce's default purple/grey instead of the theme's brand blue. Restyled to match .tt-button's pill/brand look without touching WC's markup. */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #place_order { font-family: inherit; font-size: var(--tt-small); font-weight: 600; line-height: 1; min-height: var(--tt-touch-target); padding: var(--tt-button-padding-y) var(--tt-button-padding-x); border-radius: var(--tt-button-radius); background: var(--tt-light-background); color: var(--tt-heading); border: 1px solid var(--tt-border); box-shadow: none; text-shadow: none; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--tt-primary); color: var(--tt-primary-contrast); border-color: var(--tt-primary); } .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #place_order { background: var(--tt-primary); color: var(--tt-primary-contrast); border-color: var(--tt-primary); /* Only the primary "alt" commerce actions (Add to Cart, Place order) get real weight — matches .tt-button (base.css) rather than leaving every WC button flat via the box-shadow:none above. */ box-shadow: 0 4px 12px rgba(37, 99, 235, 0.24); } .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce #place_order:hover { background: var(--tt-primary-hover); border-color: var(--tt-primary-hover); color: var(--tt-primary-contrast); box-shadow: 0 6px 16px rgba(37, 99, 235, 0.32); } .woocommerce a.button:disabled, .woocommerce a.button.disabled, .woocommerce button.button:disabled, .woocommerce input.button:disabled { opacity: 0.5; cursor: not-allowed; } /* ---------- Single product ---------- Deliberately NOT display:flex/grid here. div.product has more than just images+summary as direct children — .woocommerce-tabs and .related.products are siblings too (added by later hooks), and flex/ grid would force ALL of them into one row, not just the two we want side by side. WooCommerce's own core CSS already solves exactly this with floats (div.images floats left, div.summary floats right, .woocommerce-tabs has clear:both) precisely because float only affects the elements explicitly floated — so it's kept and restyled rather than replaced. */ .woocommerce div.product div.images, .woocommerce div.product div.summary { width: 100%; float: none; margin-bottom: 2rem; } @media (min-width: 1024px) { .woocommerce div.product div.images { width: 47%; float: left; margin-right: 3%; } .woocommerce div.product div.summary { width: 50%; float: right; margin-right: 0; } } /* Gallery card. The padding/background/radius live on .woocommerce-product-gallery itself (= div.images — same element, both classes) rather than on .woocommerce-product-gallery__wrapper. FlexSlider's own JS turns .wrapper into the sliding track: it sets inline width (all slides side by side, e.g. 3× the viewport width) and inline display/float/overflow on .wrapper and every .woocommerce-product-gallery__image slide. Padding put on .wrapper only insets the very first and very last pixel of that whole 3-wide track, not each visible slide — combined with .flex-viewport (.wrapper's own un-padded parent, sized to exactly one slide) doing the actual clipping, that padding just pushed the visible slide 28px right while still clipping it 28px early on the other side: a lopsided crop, not an even frame, which is what actually produced the "cut-off/bleeding" look. div.images itself is untouched by any of FlexSlider's math, so padding here is safe and frames the main photo AND the thumbnail row below it as one consistent card. */ .woocommerce div.product div.images { background: var(--tt-light-background); border-radius: var(--tt-radius-lg); padding: 1.5rem; } /* Squares the currently-visible slide and clips anything the source photo's own aspect ratio doesn't fill. Centering the image within that square is done via object-fit below rather than flex — FlexSlider also sets inline display:block on every .woocommerce-product-gallery__image (an inline style, which always wins over this rule's display:flex regardless of specificity), so flex centering here would silently never apply. */ .woocommerce div.product div.images .woocommerce-product-gallery__image { aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--tt-radius-md); } .woocommerce div.product div.images .woocommerce-product-gallery__image > a { display: block; width: 100%; height: 100%; } .woocommerce div.product div.images img { width: 100%; height: 100%; object-fit: contain; } /* Zoom (magnifying glass) trigger — core's own unstyled default just floats the glyph directly over the photo with no visual separation, which reads fine on a plain light background but disappears or clashes against a busy/dark product image. Position is relative to .woocommerce-product-gallery's own padding edge (the nearest position:relative ancestor — core sets that, not this theme), which now already carries 1.5rem of padding, so this only needs a small additional inset instead of stacking a second full inset on top. */ .woocommerce div.product div.images .woocommerce-product-gallery__trigger { top: 0.75rem; right: 0.75rem; width: 36px; height: 36px; background: var(--tt-background); border-radius: 50%; box-shadow: var(--tt-card-shadow); } .woocommerce span.onsale { background: var(--tt-sale); color: #fff; font-weight: 700; font-size: 0.8125rem; min-height: 44px; min-width: 44px; line-height: 44px; top: 0.75rem; left: 0.75rem; } /* Core's real selector is ".woocommerce div.product div.images .flex-control-thumbs" (margin:0) — the full ancestor chain makes it more specific than a plain 2-class selector here, so the margin-top below was silently losing regardless of source order (same pattern as the .tt-cart-table border reset and .payment_box background elsewhere in this file) — the gallery card padding was the only thing separating the main photo from the thumbnail row, and it read as barely any space at all. Matched here so it actually wins. */ .woocommerce div.product div.images .flex-control-thumbs { display: flex; gap: 0.75rem; margin: 1.25rem 0 0; list-style: none; padding: 0; overflow-x: auto; } .woocommerce div.product div.images .flex-control-thumbs li { width: 72px; flex-shrink: 0; } .woocommerce .flex-control-thumbs img { border-radius: var(--tt-radius-sm); border: 2px solid var(--tt-border); background: var(--tt-light-background); cursor: pointer; transition: border-color 0.15s ease; } .woocommerce .flex-control-thumbs img:hover { border-color: var(--tt-muted); } .woocommerce .flex-control-thumbs img.flex-active { border-color: var(--tt-primary); } /* Summary column type scale — product_title was inheriting the site-wide h1 (clamp(2rem,5vw+1rem,3rem), tuned for hero/page-header headings), oversized and cramped next to price/rating right under it. */ .woocommerce div.product .product_title { font-size: clamp(1.5rem, 1.7vw + 1.1rem, 2rem); line-height: 1.25; margin-bottom: 0.6rem; } .woocommerce div.product .woocommerce-product-rating { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; } .woocommerce div.product p.price, .woocommerce div.product span.price { display: block; font-size: 1.625rem; font-weight: 700; color: var(--tt-heading); margin-bottom: 1.25rem; } .woocommerce div.product p.price del { color: var(--tt-muted); font-weight: 400; opacity: 0.7; margin-right: 0.5em; font-size: 0.8em; } .woocommerce div.product p.price ins { text-decoration: none; color: var(--tt-sale); } .woocommerce div.product .woocommerce-product-details__short-description { color: var(--tt-text); line-height: 1.7; margin-bottom: 1.5rem; } .woocommerce div.product .woocommerce-product-details__short-description ul { padding-left: 1.25rem; } .woocommerce div.product .woocommerce-product-details__short-description li { margin-bottom: 0.4rem; } .woocommerce div.product form.cart { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .woocommerce div.product form.cart .button { min-height: var(--tt-touch-target); } /* ---------- Variable products (attribute dropdowns + selected-variation area) ---------- Core's own table.variations is a plain 2-column label|dropdown table with no styling of its own — every input on the site already gets a real select/border treatment (components.css' global input rule covers `select`), this just fixes the SURROUNDING layout/spacing so it reads as a deliberate "choose your options" step, not a leftover HTML table. */ .woocommerce div.product table.variations { width: 100%; border-collapse: collapse; margin-bottom: 0.5rem; } .woocommerce div.product table.variations tr { display: block; margin-bottom: 1.25rem; } .woocommerce div.product table.variations tr:last-child { margin-bottom: 0; } .woocommerce div.product table.variations th.label { display: block; text-align: left; padding: 0 0 0.5rem; font-size: var(--tt-small); font-weight: 600; color: var(--tt-heading); } .woocommerce div.product table.variations td.value { display: block; padding: 0; } .woocommerce div.product table.variations .reset_variations { display: inline-block; margin-top: 0.6rem; font-size: 0.8125rem; color: var(--tt-muted); text-decoration: underline; } .woocommerce div.product table.variations .reset_variations:hover { color: var(--tt-primary); } /* Price/stock/qty/cart for whichever variation is currently selected — populated by core's own JS (add-to-cart/variation.php's wp.template), so this only needs layout, not new markup. */ .woocommerce div.product .single_variation_wrap { margin-top: 1.5rem; } .woocommerce div.product .woocommerce-variation-price { margin-bottom: 0.5rem; } .woocommerce div.product .woocommerce-variation-price .price { margin-bottom: 0.5rem; } .woocommerce div.product .woocommerce-variation-availability { margin-bottom: 1rem; font-size: 0.875rem; } .woocommerce div.product .woocommerce-variation-availability .stock.out-of-stock { color: var(--tt-sale); font-weight: 600; } .woocommerce div.product .woocommerce-variation-availability .stock.in-stock { color: #16A34A; font-weight: 600; } .woocommerce div.product .woocommerce-variation-add-to-cart { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .woocommerce div.product p.stock.out-of-stock { color: var(--tt-sale); font-weight: 600; } /* ---------- Grouped products ---------- */ .woocommerce div.product table.group_table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; } .woocommerce div.product table.group_table tr { border-bottom: 1px solid var(--tt-border); } .woocommerce div.product table.group_table tr:last-child { border-bottom: 0; } .woocommerce div.product table.group_table td { padding: 0.9rem 0.5rem; vertical-align: middle; } /* Not a fixed width: this cell holds either a small quantity stepper (purchasable children) OR a "Select options" button (children that need their own variation picked first, e.g. a variable child) — a width sized for the stepper wrapped that button's text onto two lines. white-space:nowrap keeps it on one regardless of which. */ .woocommerce div.product table.group_table .woocommerce-grouped-product-list-item__quantity { white-space: nowrap; } .woocommerce div.product table.group_table .woocommerce-grouped-product-list-item__quantity .button { white-space: nowrap; } .woocommerce div.product table.group_table .woocommerce-grouped-product-list-item__label label { font-weight: 600; margin: 0; color: var(--tt-heading); } .woocommerce div.product table.group_table .woocommerce-grouped-product-list-item__label a { color: inherit; } .woocommerce div.product table.group_table .woocommerce-grouped-product-list-item__price { text-align: right; white-space: nowrap; } /* p.price/span.price are display:block with a 1.25rem bottom margin site-wide (this same file, single-product summary rules) — correct for the main buy box, but breaks an inline price sitting in a table cell next to a checkbox/quantity input. */ .woocommerce div.product table.group_table .woocommerce-grouped-product-list-item__price .price { display: inline; margin-bottom: 0; font-size: 1rem; } /* SKU / category — core's own product_meta has no styling of its own at all here (a plain default-size paragraph), which is why it read as a single cramped line squeezed against the trust row above it. */ .woocommerce div.product .product_meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--tt-border); font-size: 0.8125rem; color: var(--tt-muted); } .woocommerce div.product .product_meta a { color: var(--tt-muted); text-decoration: underline; } .woocommerce div.product .product_meta a:hover { color: var(--tt-primary); } /* SKU is backend inventory info, not something that helps a shopper decide to buy — hidden on the frontend only; still fully visible/ editable in wp-admin and on orders/invoices, this is a display-only rule, not a filter removing the data. */ .woocommerce div.product .product_meta .sku_wrapper { display: none; } .tt-trust-row { list-style: none; display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0; padding: 0; font-size: 0.8125rem; color: var(--tt-muted); } .tt-trust-row li { display: flex; align-items: center; gap: 0.4rem; } .woocommerce div.product .woocommerce-tabs { margin-top: 3rem; clear: both; } .woocommerce div.product .woocommerce-tabs ul.tabs { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; } /* Core's own tab CSS is built for connected, notch-cornered boxes that visually merge into the panel below (li itself carries a grey background/border/negative-margin, plus ul.tabs::before and li::before/::after draw a shared baseline + corner notches meant to line up with that box style) — none of that applies to separated pill buttons, but nothing had told core's version to stop rendering, so a stray full-width line and corner marks were floating under/around pills that don't touch it. Reset the
  • itself and kill the leftover connector pseudo-elements instead of just styling the . */ .woocommerce div.product .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; } .woocommerce div.product .woocommerce-tabs ul.tabs::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1.25rem; border-radius: var(--tt-radius-pill); border: 1px solid var(--tt-border); color: var(--tt-text); font-weight: 600; font-size: 0.9375rem; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { background: var(--tt-primary); color: #fff; border-color: var(--tt-primary); } .woocommerce div.product .woocommerce-tabs .panel { max-width: 820px; background: var(--tt-light-background); border-radius: var(--tt-radius-lg); padding: 1.75rem; } .woocommerce div.product .woocommerce-tabs .panel > h2:first-child { margin-top: 0; } .woocommerce div.product .woocommerce-tabs .panel ul { padding-left: 1.25rem; } .woocommerce div.product .woocommerce-tabs .panel li { margin-bottom: 0.5rem; line-height: 1.6; } .woocommerce table.shop_attributes { width: 100%; border-collapse: collapse; } .woocommerce table.shop_attributes th, .woocommerce table.shop_attributes td { padding: 0.6rem; border-bottom: 1px solid var(--tt-border); text-align: left; } /* ---------- Reviews (inside the Reviews tab panel) ---------- */ /* Was inheriting the raw h2{font-size:var(--tt-h2)} site-wide page- heading size with no override — oversized for what's really a panel sub-heading, and since it includes the full product title (WC wraps it in its own for exactly this), a long name wrapped to 2-3 lines at that size. Capped, and the repeated product name muted down so "1 review for" reads as the actual heading. */ .woocommerce-Reviews-title { font-size: 1.25rem; line-height: 1.3; margin-bottom: 1.5rem; } .woocommerce-Reviews-title span { font-weight: 400; color: var(--tt-muted); } .woocommerce #reviews .commentlist { list-style: none; margin: 0 0 2rem; padding: 0; } .woocommerce #reviews .comment_container { display: flex; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--tt-border); } .woocommerce #reviews .commentlist li:first-child .comment_container { padding-top: 0; } .woocommerce #reviews .commentlist li:last-child .comment_container { border-bottom: 0; padding-bottom: 0; } .woocommerce #reviews .comment_container img.avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; } .woocommerce #reviews .comment-text { flex: 1; min-width: 0; } .woocommerce #reviews .comment-text .star-rating { margin-bottom: 0.4rem; } .woocommerce #reviews p.meta { font-size: 0.8125rem; color: var(--tt-muted); margin-bottom: 0.4rem; } .woocommerce #reviews .description p:last-child { margin-bottom: 0; } .woocommerce-noreviews { color: var(--tt-muted); } /* Review form — same field styling the rest of the site's forms already get (components.css' global input/label rules), just spacing/rating. */ #review_form_wrapper { margin-top: 2rem; } #review_form #respond { background: var(--tt-background); border: 1px solid var(--tt-border); border-radius: var(--tt-radius-lg); padding: 1.75rem; } /* comment-reply-title is a (core markup), not a heading element, so it doesn't inherit the site's h1-h6 weight/color by default. */ #review_form .comment-reply-title { display: block; font-size: 1.125rem; font-weight: 700; color: var(--tt-heading); margin-bottom: 1.25rem; } #review_form .comment-form-rating { margin-bottom: 1.25rem; } #review_form .comment-form-rating label { margin-bottom: 0.4rem; } /* The clickable star widget core's single-product.js injects before #rating uses its own .stars/.star-1..5 markup (not .star-rating, which is what this theme's amber convention — base.css' .star-rating,.tt-static-rating{color:#FBBF24} — is keyed off). Left as plain link-blue by default, it read as a row of blue icons rather than a rating control matching every OTHER star display on the site. */ #review_form .stars a { color: #FBBF24; } #review_form .comment-form-comment { margin-bottom: 1.25rem; } #review_form .comment-form-comment label, #review_form .comment-form-author label, #review_form .comment-form-email label { margin-bottom: 0.4rem; } #review_form .form-submit { margin-bottom: 0; } #review_form #submit { min-height: var(--tt-touch-target); } /* ---------- Upsells ("You may also like…") + Related products ---------- Both sections come from woocommerce_after_single_product_summary hooks (woocommerce_upsell_display then woocommerce_output_related_ products) and render with identical markup/classes — same heading + grid treatment for both, upsells first. */ .woocommerce div.product .upsells.products, .woocommerce .related.products { margin-top: 3rem; clear: both; } .woocommerce div.product .upsells.products > h2, .woocommerce .related.products > h2 { text-align: center; margin-bottom: 1.5rem; } /* ---------- Cart page ---------- */ .woocommerce-cart form.woocommerce-cart-form { background: #fff; border-radius: var(--tt-radius-lg); padding: 1.25rem; } /* Styled via .tt-cart-table (added alongside WooCommerce's own shop_table/cart classes in this theme's woocommerce/cart/cart.php override), not .shop_table — that class is shared with the checkout order-review table and My Account order tables, and WooCommerce core's own woocommerce.css puts a real border + border-radius directly on it (.shop_table{border:1px solid ...;border-radius:5px}). Keying cart-specific styling off shop_table would (a) require fighting that leaked border here and (b) risk the fix bleeding into those other tables since they share the same class. */ .tt-cart-table { width: 100%; border-collapse: collapse; } /* WooCommerce core's real rule is ".woocommerce table.shop_table" (2 classes + a type = higher specificity than a plain .tt-cart-table class alone), so the border/radius reset needs to match that. */ .woocommerce-cart table.tt-cart-table { border: none; border-radius: 0; } .tt-cart-table tr:last-child td { border-bottom: 0; } /* WooCommerce core forces the coupon input to a hardcoded 80px via .woocommerce table.cart td.actions .input-text{width:80px} — same selector here (matching specificity), loaded after core, wins the cascade tie and lets the input take a sensible width instead. */ .woocommerce table.cart td.actions .input-text, .woocommerce-cart .coupon .input-text { width: 200px; max-width: 100%; display: inline-block; } .woocommerce-cart .coupon { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .woocommerce-cart td.actions { padding-top: 1.5rem; } /* Quantity changes already update totals live via AJAX (cart.js) once JS has run — "Update cart" only matters as a no-JS fallback, so it's hidden rather than removed from the markup. */ .woocommerce-cart form.tt-cart-js-enhanced .actions button[name="update_cart"] { display: none; } @media (min-width: 768px) { .woocommerce-cart td.actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } } .tt-cart-table th { text-align: left; padding-bottom: 1rem; border-bottom: 1px solid var(--tt-border); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tt-muted); } .tt-cart-table th.product-subtotal, .tt-cart-table td.product-subtotal { text-align: right; } .tt-cart-table td { padding: 1.5rem 0.5rem; border-bottom: 1px solid var(--tt-border); vertical-align: top; } .tt-cart-table td.product-subtotal { color: var(--tt-heading); font-weight: 700; white-space: nowrap; } /* Combined product cell (image + name + price + short description + quantity + remove) — template-parts markup lives in this theme's own woocommerce/cart/cart.php override, replacing core's six separate table columns with one, matching the NexByte reference layout. */ .tt-cart-row { display: flex; gap: 1rem; } .tt-cart-row__media { width: 88px; height: 88px; flex-shrink: 0; background: var(--tt-light-background); border-radius: var(--tt-radius-md); overflow: hidden; } .tt-cart-row__media img { width: 100%; height: 100%; object-fit: contain; padding: 0.5rem; } .tt-cart-row__body { flex: 1; min-width: 0; } .tt-cart-row__title { display: block; color: var(--tt-heading); font-weight: 600; font-size: 1rem; margin-bottom: 0.2rem; } .tt-cart-row__price { display: block; color: var(--tt-muted); font-size: 0.9375rem; } .tt-cart-row__desc { color: var(--tt-muted); font-size: 0.875rem; margin: 0.5rem 0 0; max-width: 46ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tt-cart-row__controls { display: flex; align-items: center; gap: 0.9rem; margin-top: 0.9rem; } .tt-cart-row .product-remove a.remove { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--tt-light-background); color: var(--tt-sale); text-decoration: none; border-radius: 50%; transition: background-color 0.15s ease, color 0.15s ease; } .tt-cart-row .product-remove a.remove:hover { background: #FEF2F2; color: #991B1B; } /* Coupon field tucked behind a native
    toggle instead of an always-visible input, matching the reference's "Add coupons" pattern — reuses the same accordion chevron already styled for the FAQ. */ .tt-coupon-details { margin-bottom: 1rem; } .tt-coupon-details summary { display: flex; align-items: center; gap: 0.5rem; list-style: none; cursor: pointer; font-weight: 600; color: var(--tt-heading); padding: 0.5rem 0; } .tt-coupon-details summary::-webkit-details-marker { display: none; } .tt-coupon-details summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--tt-muted); border-bottom: 2px solid var(--tt-muted); transform: rotate(45deg); transition: transform 0.15s ease; } .tt-coupon-details[open] summary::after { transform: rotate(-135deg); } .tt-coupon-details .coupon { padding-top: 0.75rem; } /* form.woocommerce-cart-form and .cart-collaterals are top-level SIBLINGS in WooCommerce's own cart.php (the form closes before .cart-collaterals opens) — not nested. And .cart-collaterals can itself contain BOTH cross-sells and the totals box (via the woocommerce_cart_collaterals hook), so display:flex on it would force both into one row even when only "items | totals" should be a two-column split. Floats handle a cross-sibling two-column layout correctly without that trap, same reasoning as the single-product gallery/summary fix above. */ .woocommerce-cart .cart-collaterals { margin-top: 2rem; } /* WooCommerce core also puts its OWN width:48%/float:right on .cart-collaterals .cart_totals (the inner box), independent of the width already set on .cart-collaterals (the outer column) above — two nested float-era width constraints compounding into a column far narrower than the 34% intended, which is what was squeezing "Proceed to checkout" into a near-circle. Cancelled here. */ .woocommerce-cart .cart-collaterals .cart_totals, .woocommerce-cart .cart_totals { width: auto; float: none; background: var(--tt-light-background); border-radius: var(--tt-radius-lg); padding: 1.5rem; box-shadow: 0 1px 2px rgba(15,23,42,0.04); } .woocommerce-cart .cart_totals h2 { font-size: 1.125rem; margin-bottom: 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--tt-border); } .woocommerce-cart .cart_totals table { width: 100%; border: none; border-radius: 0; } .woocommerce-cart .cart_totals table th, .woocommerce-cart .cart_totals table td { padding: 0.6rem 0; border-bottom: 1px solid var(--tt-border); text-align: left; } .woocommerce-cart .cart_totals .order-total .woocommerce-Price-amount { font-weight: 700; font-size: 1.125rem; } /* WooCommerce core's own .wc-proceed-to-checkout a.checkout-button rule includes the `a` type selector, giving it slightly higher specificity than a plain 3-class selector — matching it here so this theme's padding/line-height actually wins instead of core's 1em/1.25em (which was ballooning the button into a near-circle at this column's width). */ .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { display: block; width: 100%; text-align: center; min-height: 48px; line-height: 48px; padding: 0 1rem; margin-top: 1rem; margin-bottom: 0; font-size: var(--tt-small); } .woocommerce-cart .cart-empty { text-align: center; } .woocommerce-cart .return-to-shop { text-align: center; } @media (min-width: 1024px) { .woocommerce-cart form.woocommerce-cart-form { width: 62%; float: left; } .woocommerce-cart .cart-collaterals { width: 34%; float: right; margin-top: 0; position: sticky; top: 1.5rem; } .woocommerce-cart .cart-collaterals .cart_totals { margin-bottom: 1.5rem; } /* Contain the two floated columns above so the container's height doesn't collapse to 0 and let the footer ride up underneath them. */ .woocommerce-cart .tt-page-body { display: flow-root; } } @media (max-width: 767px) { .tt-cart-table thead { display: none; } .tt-cart-table, .tt-cart-table tbody, .tt-cart-table tr, .tt-cart-table td { display: block; width: 100%; } .tt-cart-table tr { margin-bottom: 1.25rem; border: 1px solid var(--tt-border); border-radius: var(--tt-radius-md); padding: 1rem; } .tt-cart-table td { border-bottom: 0; padding: 0; } .tt-cart-table td.product-subtotal { text-align: left; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--tt-border); } } /* ---------- Checkout ---------- */ .woocommerce-checkout .col2-set, .woocommerce-checkout #customer_details { display: flex; flex-direction: column; } /* Core's OWN woocommerce-layout.css (a separate stylesheet from its main woocommerce.css, loaded at every width) sets ".col2-set .col-1/.col-2{float:left/right;width:48%}". flex-direction :column on the parent above stacks them vertically, but flex items still honor an explicit width from the child itself over the default stretch — so col-1 (wrapping the billing card) stayed at 48% of #customer_details' width, leaving a blank ~52% gap beside it that read as dead space inside the column. Cleared here so each column fills the full width available to it. */ .woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { float: none; width: 100%; } /* Billing / shipping / order-notes each get their own card — previously only #order_review had a background+shadow, so "Billing details" sat on the bare page background with nothing to visually separate it from the rest of the checkout. core's checkout/form-shipping.php prints
    with nothing inside but a newline/tab whenever WC()->cart->needs_shipping_address() is false — that whitespace text node means the div is NOT a true CSS :empty match, so a :not(:empty) guard here still card-styled it (border, shadow, padding) with nothing inside: the "blank section" box between Billing details and Additional information. :has(h3) only matches when the real ship-to-different-address heading (and its fields) are actually rendered. */ .woocommerce-checkout .woocommerce-billing-fields, .woocommerce-checkout .woocommerce-shipping-fields:has(h3), .woocommerce-checkout .woocommerce-additional-fields { background: var(--tt-background); border: 1px solid var(--tt-border); border-radius: var(--tt-radius-lg); padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: var(--tt-card-shadow); } .woocommerce-checkout h3 { margin-top: 0; } /* Section headings (Billing details / Your order / Additional information / Payment method — the last added via toytool_payment_heading() since core's payment.php has none) share one icon+heading treatment. Scoped to these specific headings rather than "any h3 inside #customer_details", which previously also caught the "Ship to a different address?" checkbox label (also an h3) and gave a checkbox the same heavy section-title styling. */ .woocommerce-checkout .woocommerce-billing-fields > h3, .woocommerce-checkout #order_review_heading, .woocommerce-checkout .woocommerce-additional-fields > h3, .woocommerce-checkout .tt-payment-heading { display: flex; align-items: center; font-size: 1.125rem; padding-bottom: 0.9rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--tt-border); } .woocommerce-checkout .woocommerce-billing-fields > h3::before, .woocommerce-checkout #order_review_heading::before, .woocommerce-checkout .woocommerce-additional-fields > h3::before, .woocommerce-checkout .tt-payment-heading::before { content: ""; flex-shrink: 0; width: 22px; height: 22px; margin-right: 0.65rem; background-repeat: no-repeat; background-size: contain; } .woocommerce-checkout .woocommerce-billing-fields > h3::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E"); } .woocommerce-checkout #order_review_heading::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2 3h2l2.6 12.4a2 2 0 0 0 2 1.6h8.8a2 2 0 0 0 2-1.6L21 7H6'/%3E%3C/svg%3E"); } .woocommerce-checkout .woocommerce-additional-fields > h3::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cline x1='8' y1='8' x2='16' y2='8'/%3E%3Cline x1='8' y1='12' x2='16' y2='12'/%3E%3Cline x1='8' y1='16' x2='12' y2='16'/%3E%3C/svg%3E"); } .woocommerce-checkout .tt-payment-heading::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cline x1='2' y1='10' x2='22' y2='10'/%3E%3C/svg%3E"); } .woocommerce-checkout .form-row { margin-bottom: 1rem; } /* WooCommerce core's own rule — ".woocommerce form .form-row-first, .woocommerce-page form .form-row-first" etc, no media query, width:47% — is the same specificity as a plain 2-class selector here (2 classes either way), so it was silently winning the width at ALL sizes, pairing fields even below the intended 480px stacking breakpoint. Adding the shared .form-row class (present on every field) makes this unambiguously more specific, matching the pattern used against core elsewhere in this file (.tt-cart-table border reset, .payment_box background, above). */ .woocommerce-checkout .form-row.form-row-first, .woocommerce-checkout .form-row.form-row-last { display: inline-block; width: 100%; } @media (min-width: 480px) { .woocommerce-checkout .form-row.form-row-first { width: calc(50% - 0.5rem); margin-right: 1rem; } .woocommerce-checkout .form-row.form-row-last { width: calc(50% - 0.5rem); } } /* Live per-field validation feedback — WooCommerce's own checkout.js toggles these two classes on blur/submit; nothing here does. */ .woocommerce-checkout .form-row.woocommerce-invalid input.input-text, .woocommerce-checkout .form-row.woocommerce-invalid select, .woocommerce-checkout .form-row.woocommerce-invalid textarea { border-color: var(--tt-sale); } .woocommerce-checkout .form-row.woocommerce-validated input.input-text, .woocommerce-checkout .form-row.woocommerce-validated select { border-color: #16A34A; } /* Checkbox rows (terms & conditions, "Create an account?", "Ship to a different address?", "Remember me" on login) reuse the same