/* Theme Name: Beaded Bonsai Theme URI: https://beadedbonsaitree.com Author: Beaded Bonsai Tree Description: Premium e-commerce theme for Beaded Bonsai Tree — handmade beaded bonsai trees made one-of-one. Cream + moss + bronze palette. Cormorant Garamond + Inter + Caveat typography. Includes a custom Constructor page (page-create.php) for parameter-based commissions. Version: 0.1.0 Requires at least: 6.0 Requires PHP: 7.4 License: GPL v2 or later Text Domain: themailson Tags: e-commerce, woocommerce, custom-colors, custom-logo, full-width-template */ /* All visual styling lives in the chunked CSS files in assets/css/ — they are enqueued from functions.php. This file only carries the WordPress theme metadata header (which WP requires) and a few baseline overrides. */ html, body { margin: 0; padding: 0; } img, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } /* Force-show images that the original CSS hides until JS-onLoad fires */ .Image-module-scss-module__RMZxYq__image { opacity: 1 !important; transition: none !important; } .Video-module-scss-module__X0sGbG__video { opacity: 1 !important; } /* ========================================================================= ANIMATIONS — premium-ecom subtle motion (Aesop / Toast / March SF style). No flashy, no bouncy. Quiet, slow, deliberate. ========================================================================= */ html { scroll-behavior: smooth; } /* Simple solid pill button — only used where called out explicitly */ .bloom-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 36px; font-family: var(--font-graphik); font-weight: 500; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; cursor: pointer; border: 1px solid transparent; } .bloom-btn-primary { background: rgb(var(--theme-text)); color: #fff; } .bloom-btn-primary:hover { background: #1A1A24; } .bloom-btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.85); } .bloom-btn-ghost-light:hover { background: #fff; color: rgb(var(--theme-text)); } .bloom-btn-ghost-dark { background: transparent; color: rgb(var(--theme-text)); border-color: rgba(31,27,23,0.4); } .bloom-btn-ghost-dark:hover { background: rgb(var(--theme-text)); color: #fff; border-color: rgb(var(--theme-text)); } /* Fade-up on scroll — applied to elements with [data-animate]. PROGRESSIVE: content is visible by default. JS adds class .js-anim-ready to once IntersectionObserver is wired, then animations apply. This way, content never hides if JS is blocked or slow. */ [data-animate], [data-stagger] > * { transition: opacity 0.9s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.9s cubic-bezier(0.215, 0.61, 0.355, 1); will-change: opacity, transform; } html.js-anim-ready [data-animate]:not([data-in-view="true"]), html.js-anim-ready [data-stagger]:not([data-in-view="true"]) > * { opacity: 0; transform: translateY(24px); } html.js-anim-ready [data-animate][data-in-view="true"], html.js-anim-ready [data-stagger][data-in-view="true"] > * { opacity: 1; transform: translateY(0); } /* Stagger delays */ html.js-anim-ready [data-stagger][data-in-view="true"] > *:nth-child(1) { transition-delay: 0.05s; } html.js-anim-ready [data-stagger][data-in-view="true"] > *:nth-child(2) { transition-delay: 0.15s; } html.js-anim-ready [data-stagger][data-in-view="true"] > *:nth-child(3) { transition-delay: 0.25s; } html.js-anim-ready [data-stagger][data-in-view="true"] > *:nth-child(4) { transition-delay: 0.35s; } html.js-anim-ready [data-stagger][data-in-view="true"] > *:nth-child(5) { transition-delay: 0.45s; } html.js-anim-ready [data-stagger][data-in-view="true"] > *:nth-child(6) { transition-delay: 0.55s; } /* Product card hover — gentle image scale, subtle lift */ .bloom-product-grid .ProductCard-module-scss-module__l3bOlW__container, .bloom-related .ProductCard-module-scss-module__l3bOlW__container { transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); } .bloom-product-grid .Image-module-scss-module__RMZxYq__image, .bloom-related .Image-module-scss-module__RMZxYq__image { transition: transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); } .bloom-product-grid .ProductCard-module-scss-module__l3bOlW__container:hover .Image-module-scss-module__RMZxYq__image, .bloom-related .ProductCard-module-scss-module__l3bOlW__container:hover .Image-module-scss-module__RMZxYq__image { transform: scale(1.04); } .bloom-product-grid .ProductCard-module-scss-module__l3bOlW__info h3, .bloom-related .ProductCard-module-scss-module__l3bOlW__info h3 { transition: opacity 0.3s ease; } .bloom-product-grid .ProductCard-module-scss-module__l3bOlW__container:hover .ProductCard-module-scss-module__l3bOlW__info h3 { opacity: 0.7; } /* Hero parallax disabled — was distracting. Text stays put. */ /* Hero CTA — invert on hover (Aesop-style) */ .bloom-hero a[href][style*="border:1.5px solid"], .bloom-hero a[href][style*="border: 1.5px solid"] { transition: background 0.4s ease, color 0.4s ease; } .bloom-hero a[href]:hover[style*="border:1.5px solid"], .bloom-hero a[href]:hover[style*="border: 1.5px solid"] { background: #fff !important; color: rgb(var(--theme-text)) !important; } /* Add to bag hover */ .bloom-add-to-bag { transition: background 0.3s ease; } .bloom-add-to-bag:hover { background: rgb(var(--color-green-less-dark)) !important; } /* Variant card hover */ .bloom-variant { transition: border-color 0.2s ease, background 0.2s ease; } .bloom-variant:hover { border-color: rgba(31,27,23,0.45) !important; } /* Tab panel fade */ [data-bloom-panel] { transition: opacity 0.25s ease; } /* Reviews carousel — subtle scroll-snap easing already; add fade on edges */ .bloom-reviews-track { mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%); } /* Footer link hover — sliding underline (Aesop pattern) */ .bloom-footer ul li a { background-image: linear-gradient(currentColor, currentColor); background-position: 0 100%; background-repeat: no-repeat; background-size: 0% 1px; transition: background-size 0.3s ease; border-bottom: 0; } .bloom-footer ul li a:hover { background-size: 100% 1px; border-bottom: 0; } /* Spotlight image — subtle scale on hover */ .bloom-spotlight a[href] img { transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); } .bloom-spotlight a[href]:hover img { transform: scale(1.03); } /* CTA button hover invert — works for transparent/bordered CTAs */ a[style*="border:1.5px solid #fff"]:not([href=""]), a[style*="border:1px solid #fff"]:not([href="" ]) { transition: background 0.4s ease, color 0.4s ease; } /* Featured "See the piece" + Why Mailson "Read our story" — invert on hover */ .bloom-why a[href][style*="border:1.5px solid"]:hover, .bloom-why a[href][style*="border: 1.5px solid"]:hover { background: #fff !important; color: rgb(var(--color-blue)) !important; } /* Spotlight CTA "See the piece" — soft invert */ .bloom-spotlight a[style*="background:rgb(var(--theme-text))"] { transition: background 0.3s ease, color 0.3s ease; } .bloom-spotlight a[style*="background:rgb(var(--theme-text))"]:hover { background: transparent !important; color: rgb(var(--theme-text)) !important; box-shadow: inset 0 0 0 1px rgb(var(--theme-text)); } /* Respect reduced-motion preference */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } [data-animate], [data-stagger] > *, .Image-module-scss-module__RMZxYq__image, .bloom-product-grid .ProductCard-module-scss-module__l3bOlW__container, .bloom-spotlight a[href] img { transition: none !important; opacity: 1 !important; transform: none !important; } } /* Focus-visible — keyboard-only outline. Mouse users don't see it. */ *:focus-visible { outline: 2px solid rgb(var(--color-blue)); outline-offset: 3px; border-radius: 2px; } button:focus-visible, a:focus-visible { outline-color: rgb(var(--color-blue)); } .bloom-hero a:focus-visible { outline-color: #fff; } .bloom-why a:focus-visible, .bloom-why button:focus-visible { outline-color: #fff; } input:focus-visible { outline: none; /* inputs use border-bottom focus instead */ } /* Gold accent — premium detail (used on star ratings, can extend to small marks) */ .gold-accent { color: #caa46a; } /* Improve light-mode contrast — make muted text darker for readability */ .bloom-faq summary { color: rgba(31, 27, 23, 0.92); } .bloom-faq p { color: rgba(31, 27, 23, 0.78); } /* Touch target minimums — make small links/buttons at least 44x44 hit area */ .bloom-footer ul li a, .bloom-faq summary, [data-bloom-tab], [data-bloom-dot]:not(.bb-pdp-thumb) { min-height: 24px; } /* Legacy gallery dot-indicators only — NOT the large PDP thumbnail tiles, which also carry data-bloom-dot for click-sync but are sized in single-product.php */ [data-bloom-dot]:not(.bb-pdp-thumb) { width: 24px !important; height: 24px !important; background-clip: content-box !important; padding: 9px !important; } /* Cursor pointer everywhere clickable (skill rule) */ .bloom-variant, [data-bloom-tab], [data-bloom-dot], button, a { cursor: pointer; } /* Header — edge-to-edge fixed bar with frosted glass */ header.MenuLayout-module-scss-module__nkP63a__header { opacity: 1 !important; height: auto !important; min-height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; color: rgb(var(--theme-text)); position: fixed; top: 32px; left: 0; right: 0; z-index: 50; gap: 16px; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid rgba(31, 27, 23, 0.06); transition: top 0.25s ease, background 0.25s ease; } header.MenuLayout-module-scss-module__nkP63a__header[data-scrolled="true"] { top: 0; background: rgba(255, 255, 255, 0.96); } .AnnouncementBar-module-scss-module__xg8YNq__container { position: fixed; top: 0; left: 0; right: 0; z-index: 60; transition: transform 0.25s ease; } body[data-scrolled="true"] .AnnouncementBar-module-scss-module__xg8YNq__container { transform: translateY(-100%); } header.MenuLayout-module-scss-module__nkP63a__header .Logo-module-scss-module__pIHu0a__logo { flex: 0 0 auto; position: static !important; } header.MenuLayout-module-scss-module__nkP63a__header .Navigation-module-scss-module__7Ga2iq__container { flex: 1 1 auto; display: flex; justify-content: center; position: static !important; } header.MenuLayout-module-scss-module__nkP63a__header .NavigationLinks-module-scss-module__Ez5VGG__listContainer { list-style: none; margin: 0; padding: 0; display: flex; gap: 32px; } header.MenuLayout-module-scss-module__nkP63a__header .NavigationLinks-module-scss-module__Ez5VGG__link { font-size: 14px; } header.MenuLayout-module-scss-module__nkP63a__header .MenuLayout-module-scss-module__nkP63a__rightIcons { flex: 0 0 auto; display: flex; gap: 4px; } @media (max-width: 768px) { header.MenuLayout-module-scss-module__nkP63a__header .Navigation-module-scss-module__7Ga2iq__container { display: none; } } /* Product grid: 2 columns on mobile, 3 on tablet, 4 on desktop — matches the original Bloom & Wolf BlockCarousel layout. Gap is intentionally tiny so cards sit near-flush like on bloomandwolf. */ .bloom-product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5px; padding: 0; } @media (min-width: 768px) { .bloom-product-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5px; } } @media (min-width: 1024px) { .bloom-product-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5px; } } /* Product card: square image, tag in top-right corner, name + price below */ .bloom-product-grid article.ProductCard-module-scss-module__l3bOlW__container { list-style: none; display: grid; grid-template-rows: min-content min-content; } .bloom-product-grid .ProductCard-module-scss-module__l3bOlW__assetContainer { list-style: none; margin: 0; padding: 0; display: block; position: relative; } .bloom-product-grid .ProductCard-module-scss-module__l3bOlW__carousel { list-style: none; margin: 0; padding: 0; display: block; } .bloom-product-grid .Image-module-scss-module__RMZxYq__container { display: block !important; width: 100%; aspect-ratio: 3 / 4; background: rgb(var(--color-off-white)); overflow: hidden; } .bloom-product-grid .Image-module-scss-module__RMZxYq__image { width: 100%; height: 100%; object-fit: cover; display: block; } .bloom-product-grid .ProductCard-module-scss-module__l3bOlW__tag { position: absolute; top: 10px; right: 8px; z-index: 2; } @media (min-width: 768px) { .bloom-product-grid .ProductCard-module-scss-module__l3bOlW__tag { top: 17px; right: 16px; } } .bloom-product-grid .Tag-module-scss-module__MRa6WW__tag { background: rgb(var(--color-green-light)); color: rgb(var(--color-green)); padding: 0 9px 1px; height: 15px; border-radius: 13px; font-size: 12px; line-height: 1.1em; letter-spacing: 0.04em; display: inline-flex; align-items: center; } .bloom-product-grid .ProductCard-module-scss-module__l3bOlW__info { padding: 12px 14px 32px !important; display: flex; flex-direction: column; gap: 2px; } @media (min-width: 768px) { .bloom-product-grid .ProductCard-module-scss-module__l3bOlW__info { padding: 17px 16px 32px !important; gap: 4px; } } .bloom-product-grid .ProductCard-module-scss-module__l3bOlW__info > a { display: flex; flex-direction: column; gap: inherit; } .bloom-product-grid .ProductCard-module-scss-module__l3bOlW__info h3 { font-family: var(--font-times-now); font-size: 18px; font-weight: 300; margin: 0; line-height: 1.1em; } .bloom-product-grid .ProductCard-module-scss-module__l3bOlW__info > a > div { font-family: var(--font-graphik); font-size: 12px; font-weight: 400; letter-spacing: 0.04em; line-height: 1.1em; text-transform: uppercase; display: flex; gap: 4px; } .bloom-product-grid .ProductCard-module-scss-module__l3bOlW__info > a > div s { text-decoration: none; position: relative; color: rgba(0, 0, 0, 0.5); } .bloom-product-grid .ProductCard-module-scss-module__l3bOlW__info > a > div s::after { content: ''; position: absolute; left: -1px; right: -1px; top: 50%; border-top: 1px solid currentColor; transform: rotate(-20deg); transform-origin: center; } /* Body bg and font defaults are set inline by Theme module variables on . */ body { font-family: var(--font-graphik), -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: rgb(var(--theme-text)); background: rgb(var(--theme-background)); } h1, h2, h3, h4 { font-family: var(--font-times-now), Georgia, serif; font-weight: 400; } /* ============================================================================= CHECKOUT PAGE (/checkout/) — order-summary table + form polish. WooCommerce core's checkout/review-order.php renders a whose .cart_item rows carry only product name + qty. But many WC setups/plugins inject a product thumbnail INSIDE the
(image nested in the product , exactly like the mini-cart). Naive default CSS then floats/mis-positions that so it spills out of its slot — the bug the owner is seeing. Fix mirrors footer.php's mini-cart approach: reserve a fixed left gutter on the row, absolutely-place the thumbnail into it, give the cell enough min-height + left padding so nothing overlaps. Rows with NO thumbnail still read cleanly because the gutter just becomes quiet whitespace. Mobile-first; scoped entirely to the checkout review table + form. ============================================================================= */ /* ---- Order review table shell ---- */ .woocommerce-checkout #order_review, .woocommerce-checkout-review-order { width: 100%; } /* Order-review heading ("Your order") above the table */ .woocommerce-checkout #order_review_heading { font-family: var(--font-times-now), Georgia, serif; font-weight: 400; font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.012em; margin: 0 0 18px; color: rgb(var(--theme-text)); } table.woocommerce-checkout-review-order-table { width: 100%; /* fixed layout + an explicit narrow total column = the product name can never squeeze the price, and every row's gutter lines up exactly. */ table-layout: fixed; border-collapse: collapse; margin: 0 0 24px; font-family: var(--font-graphik); font-size: 14px; background: rgb(var(--color-cream)); border: 1px solid rgba(26, 26, 26, 0.10); border-radius: 3px; overflow: hidden; } table.woocommerce-checkout-review-order-table thead th { font-family: var(--font-mono), monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(26, 26, 26, 0.55); font-weight: 400; text-align: left; padding: 14px 18px; background: rgb(var(--color-cream-dark)); border-bottom: 1px solid rgba(26, 26, 26, 0.10); } /* Explicit width on the price column (with table-layout: fixed above) keeps the price readable and the name column's left gutter perfectly consistent. */ table.woocommerce-checkout-review-order-table thead th.product-total, table.woocommerce-checkout-review-order-table tbody td.product-total { width: 30%; text-align: right; } table.woocommerce-checkout-review-order-table thead th.product-name, table.woocommerce-checkout-review-order-table tbody td.product-name { width: 70%; } /* ---- Line-item rows: reserve a left gutter, absolutely-place any thumbnail ---- Image (when present) is sized to 56px and placed at top:18px; the row must be tall enough to contain it plus an 18px bottom gutter: 18 + 56 + 18 = 92. */ table.woocommerce-checkout-review-order-table tbody tr.cart_item { border-bottom: 1px solid rgba(26, 26, 26, 0.08); } table.woocommerce-checkout-review-order-table tbody tr.cart_item:last-child { border-bottom: 0; } table.woocommerce-checkout-review-order-table tbody td { padding: 18px; vertical-align: top; } table.woocommerce-checkout-review-order-table tbody td.product-name { position: relative; min-height: 92px; padding-left: 86px; /* 18 gutter-left + 56 image + 12 gap */ font-family: var(--font-times-now), Georgia, serif; font-size: 15px; line-height: 1.35; color: rgb(var(--theme-text)); /* table-layout: fixed means an unbroken long name would otherwise overflow */ word-wrap: break-word; overflow-wrap: break-word; } /* The thumbnail — WC core's review-order.php has NO image; when one shows it's a plugin/snippet injecting it through the `woocommerce_cart_item_name` filter (the common BusinessBloomer-style snippet calls $product->get_image() and the lands with class "alignleft" — i.e. WC's global float:left !important). That float is exactly what makes the photo sit crooked / spill its slot. Fix mirrors footer.php's mini-cart: kill the float, then absolutely place the image into the reserved left gutter — whatever wrapper (, ) it's in. `float: none !important` is the one place !important is warranted: it must beat WC core's `.alignleft { float: left !important }`. */ table.woocommerce-checkout-review-order-table tbody td.product-name img { position: absolute; left: 18px; top: 18px; width: 56px; height: 56px; object-fit: cover; margin: 0; padding: 0; float: none !important; display: block; background: rgb(var(--color-cream-dark)); border-radius: 2px; } /* If the image sits inside an (WC often wraps it), the anchor must not add its own box around the absolutely-placed image — keep it inline + unsized. */ table.woocommerce-checkout-review-order-table tbody td.product-name a:has(> img) { display: inline; } /* If a row genuinely has no image, drop the reserved gutter so the name sits flush. :has() is widely supported; the padding-left above is the safe fallback for the rare engine without it (just a little extra left padding). */ table.woocommerce-checkout-review-order-table tbody td.product-name:not(:has(img)) { min-height: 0; padding-left: 18px; } table.woocommerce-checkout-review-order-table tbody td.product-name a { color: rgb(var(--theme-text)); text-decoration: none; } table.woocommerce-checkout-review-order-table tbody td.product-name a:hover { color: rgb(var(--color-bronze-dark)); } /* Quantity "× 2" + any item meta (variations etc.) */ table.woocommerce-checkout-review-order-table tbody td.product-name .product-quantity { display: inline-block; font-family: var(--font-graphik); font-size: 12px; font-weight: 400; color: rgba(26, 26, 26, 0.6); } table.woocommerce-checkout-review-order-table tbody td.product-name .variation, table.woocommerce-checkout-review-order-table tbody td.product-name dl.variation { margin: 6px 0 0; font-family: var(--font-graphik); font-size: 12px; line-height: 1.5; color: rgba(26, 26, 26, 0.6); } table.woocommerce-checkout-review-order-table tbody td.product-name dl.variation dt, table.woocommerce-checkout-review-order-table tbody td.product-name dl.variation dd { margin: 0; display: inline; } table.woocommerce-checkout-review-order-table tbody td.product-total { text-align: right; white-space: nowrap; font-family: var(--font-graphik); font-size: 14px; color: rgb(var(--theme-text)); } /* ---- Totals foot: subtotal / shipping / tax / order total ---- */ table.woocommerce-checkout-review-order-table tfoot th, table.woocommerce-checkout-review-order-table tfoot td { padding: 12px 18px; font-weight: 400; text-align: left; border-top: 1px solid rgba(26, 26, 26, 0.08); } table.woocommerce-checkout-review-order-table tfoot th { font-family: var(--font-mono), monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(26, 26, 26, 0.55); } table.woocommerce-checkout-review-order-table tfoot td { text-align: right; white-space: nowrap; font-family: var(--font-graphik); color: rgb(var(--theme-text)); } table.woocommerce-checkout-review-order-table tfoot tr.order-total th { color: rgb(var(--theme-text)); font-family: var(--font-times-now), Georgia, serif; font-size: 13px; letter-spacing: 0.04em; text-transform: none; } table.woocommerce-checkout-review-order-table tfoot tr.order-total td { font-family: var(--font-times-now), Georgia, serif; font-size: 19px; } table.woocommerce-checkout-review-order-table tfoot tr.order-total th, table.woocommerce-checkout-review-order-table tfoot tr.order-total td { border-top: 1px solid rgba(26, 26, 26, 0.16); } /* Shipping method radios/labels inside the totals foot */ table.woocommerce-checkout-review-order-table tfoot td #shipping_method, table.woocommerce-checkout-review-order-table tfoot td ul#shipping_method { margin: 0; padding: 0; list-style: none; text-align: right; } table.woocommerce-checkout-review-order-table tfoot td #shipping_method li { margin: 0 0 4px; } /* ---- Checkout form polish — light touch: keep fields from overflowing ---- */ .woocommerce-checkout form.checkout .col2-set, .woocommerce-checkout form.checkout .col2-set .col-1, .woocommerce-checkout form.checkout .col2-set .col-2 { width: 100%; float: none; max-width: 100%; } .woocommerce-checkout form.checkout .form-row { box-sizing: border-box; margin: 0 0 14px; padding: 0; } .woocommerce-checkout form.checkout .form-row label { display: block; font-family: var(--font-graphik); font-size: 13px; color: rgb(var(--theme-text)); margin: 0 0 6px; } .woocommerce-checkout form.checkout .form-row input.input-text, .woocommerce-checkout form.checkout .form-row textarea, .woocommerce-checkout form.checkout .form-row .select2-container, .woocommerce-checkout form.checkout .form-row select { box-sizing: border-box; width: 100%; max-width: 100%; } .woocommerce-checkout form.checkout .form-row input.input-text, .woocommerce-checkout form.checkout .form-row textarea, .woocommerce-checkout form.checkout .form-row select { padding: 11px 12px; font-family: var(--font-graphik); font-size: 14px; color: rgb(var(--theme-text)); background: #fff; border: 1px solid rgba(26, 26, 26, 0.18); border-radius: 2px; } .woocommerce-checkout form.checkout .form-row input.input-text:focus, .woocommerce-checkout form.checkout .form-row textarea:focus, .woocommerce-checkout form.checkout .form-row select:focus { outline: none; border-color: rgb(var(--color-moss)); } /* #payment box — payment-method area. NOTE: actual payment gateways are a WooCommerce admin setting, not a theme concern. This only styles the container so it isn't visually broken if/when methods are configured. */ .woocommerce-checkout #payment { background: rgb(var(--color-cream)); border: 1px solid rgba(26, 26, 26, 0.10); border-radius: 3px; padding: 4px 0; } .woocommerce-checkout #payment ul.payment_methods { margin: 0; padding: 16px 18px; list-style: none; border-bottom: 1px solid rgba(26, 26, 26, 0.08); } .woocommerce-checkout #payment ul.payment_methods li { margin: 0 0 8px; font-family: var(--font-graphik); font-size: 14px; } .woocommerce-checkout #payment div.payment_box { font-family: var(--font-graphik); font-size: 13px; line-height: 1.5; color: rgba(26, 26, 26, 0.7); margin: 4px 0 0; padding: 12px 0 0; } /* WooCommerce default notices ship a loud blue 3px top border (#1e85be). Re-tone every WC notice (coupon toggle, info, message, error) to the site palette — a quiet bronze/moss hairline on cream, no blue anywhere. */ .woocommerce-info, .woocommerce-message, .woocommerce-error, .woocommerce-noreviews, .woocommerce-form-coupon-toggle .woocommerce-info { background: rgb(var(--color-cream-dark)) !important; border-top: 0 !important; border-left: 2px solid rgb(var(--color-bronze-dark)) !important; border-radius: 2px; color: rgba(31,27,23,0.78) !important; font-family: var(--font-graphik); font-size: 14px; box-shadow: none !important; } .woocommerce-message { border-left-color: rgb(var(--color-moss-dark)) !important; } .woocommerce-error { border-left-color: rgb(var(--color-red)) !important; } .woocommerce-info::before, .woocommerce-message::before, .woocommerce-error::before { color: rgb(var(--color-bronze-dark)) !important; } .woocommerce-info a, .woocommerce-message a { color: rgb(var(--color-moss-dark)) !important; } /* If NO payment gateway is enabled, WooCommerce prints a notice inside #payment instead of a method list. That's a wp-admin setting, not ours to fix — but we still keep the notice tidy so the checkout never looks broken. */ .woocommerce-checkout #payment ul.payment_methods + .woocommerce-info, .woocommerce-checkout #payment > .woocommerce-info, .woocommerce-checkout #payment .woocommerce-notice, .woocommerce-checkout #payment li.woocommerce-notice { margin: 16px 18px; padding: 14px 16px; background: rgb(var(--color-cream-dark)); border-left: 2px solid rgb(var(--color-bronze-dark)); font-family: var(--font-graphik); font-size: 13px; line-height: 1.55; color: rgba(26, 26, 26, 0.72); list-style: none; } .woocommerce-checkout #payment .place-order { padding: 16px 18px; } /* Privacy-policy paragraph is unhooked in inc/woocommerce.php; hide the now- empty wrapper too so it leaves no gap above the Place Order button. */ .woocommerce-privacy-policy-text { display: none !important; } /* "Place order" — match the prominent filled checkout button used elsewhere */ .woocommerce-checkout #payment #place_order { display: block; width: 100%; background: rgb(var(--color-moss-dark)); color: #fff; text-align: center; padding: 16px 24px; font-family: var(--font-graphik); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; border: 0; border-radius: 2px; cursor: pointer; transition: background .2s var(--ease), transform .2s var(--ease); } .woocommerce-checkout #payment #place_order:hover { background: rgb(var(--color-bronze-dark)); transform: translateY(-1px); } /* Two-column on wider screens: form left, order review right */ @media (min-width: 769px) { .woocommerce-checkout form.checkout .col2-set { display: flex; flex-wrap: wrap; gap: 0 32px; } .woocommerce-checkout form.checkout .col2-set .col-1, .woocommerce-checkout form.checkout .col2-set .col-2 { flex: 1 1 calc(50% - 16px); } table.woocommerce-checkout-review-order-table tbody td.product-name { font-size: 16px; } } /* ---- Narrow phones (≤375px): tighten the review table so the thumbnail gutter, name and price all still fit without the row feeling cramped. Smaller image (44px) → smaller gutter; cell padding eases in a touch. ---- */ @media (max-width: 400px) { table.woocommerce-checkout-review-order-table thead th, table.woocommerce-checkout-review-order-table tbody td, table.woocommerce-checkout-review-order-table tfoot th, table.woocommerce-checkout-review-order-table tfoot td { padding-left: 12px; padding-right: 12px; } table.woocommerce-checkout-review-order-table tbody td.product-name { min-height: 80px; /* 12 gutter-left + 44 image + 10 gap */ padding-left: 66px; font-size: 14px; } table.woocommerce-checkout-review-order-table tbody td.product-name:not(:has(img)) { padding-left: 12px; } table.woocommerce-checkout-review-order-table tbody td.product-name img { left: 12px; top: 16px; width: 44px; height: 44px; } table.woocommerce-checkout-review-order-table tbody td { padding-top: 16px; padding-bottom: 16px; } table.woocommerce-checkout-review-order-table tfoot tr.order-total td { font-size: 17px; } } /* ============================================================================= CHECKOUT — BLOCK (Gutenberg) version. This store uses the WooCommerce Checkout Block, whose markup is .wc-block-* — the classic-checkout rules above don't reach it. These rules style the block checkout to match. ============================================================================= */ /* "Place Order" — the block checkout button. By default it renders as bare text here; make it the prominent filled moss button, same as everywhere. */ .wc-block-components-checkout-place-order-button, .wp-block-woocommerce-checkout-actions-block button.wc-block-components-button, .wc-block-checkout__actions button.wc-block-components-button.contained { background: rgb(var(--color-moss-dark)) !important; color: #fff !important; border: 0 !important; border-radius: 2px !important; padding: 18px 28px !important; font-family: var(--font-graphik) !important; font-size: 13px !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; font-weight: 500 !important; width: 100% !important; min-height: 56px !important; cursor: pointer; transition: background .2s var(--ease, ease), transform .2s var(--ease, ease); } .wc-block-components-checkout-place-order-button:hover, .wp-block-woocommerce-checkout-actions-block button.wc-block-components-button:hover { background: rgb(var(--color-bronze-dark)) !important; transform: translateY(-1px); } .wc-block-components-checkout-place-order-button .wc-block-components-button__text { color: #fff !important; } /* "Return to Cart" — keep it a quiet link, centered */ .wc-block-checkout__actions .wc-block-components-checkout-return-to-cart-button { color: rgba(31,27,23,0.6); font-family: var(--font-graphik); font-size: 13px; } .wc-block-checkout__actions .wc-block-components-checkout-return-to-cart-button:hover { color: rgb(var(--theme-text)); } /* Block order-summary rows — lock the layout so the thumbnail can't shift. Structure: .item = flex[ .image | .description | .total-price ]. The .image holds the + a quantity badge; pin all of it. */ .wc-block-components-order-summary-item { display: flex !important; align-items: flex-start !important; gap: 14px !important; padding: 16px 0 !important; } .wc-block-components-order-summary-item__image { flex: 0 0 56px !important; width: 56px !important; height: 56px !important; position: relative !important; margin: 0 !important; } .wc-block-components-order-summary-item__image img { width: 56px !important; height: 56px !important; object-fit: cover !important; border-radius: 2px !important; display: block !important; margin: 0 !important; } /* quantity badge stays pinned to the image corner */ .wc-block-components-order-summary-item__quantity { position: absolute !important; top: -8px !important; right: -8px !important; } .wc-block-components-order-summary-item__description { flex: 1 1 auto !important; min-width: 0 !important; } .wc-block-components-order-summary-item__total-price { flex: 0 0 auto !important; margin-left: auto !important; white-space: nowrap !important; } /* Block checkout headings in the site display serif */ .wc-block-components-checkout-step__title, .wc-block-components-title { font-family: var(--font-times-now) !important; } /* ============================================================================= PRICE TYPOGRAPHY — JetBrains Mono read technical/cheap; Cormorant was tried next but its oldstyle figures sat the digits at uneven heights/baselines and read as broken. Inter with tabular lining figures keeps every digit the same height and width — clean, even, on-brand. Covers WC's own price markup plus the theme's card price classes. ============================================================================= */ .woocommerce-Price-amount, .woocommerce-Price-amount.amount, .bb-cat-price, .bb-shop-price, .bb-shop-price *, .bloom-related-price, .bb-cat-price *, .bloom-related-price *, .price .amount, .product .price, .bloom-pdp-info .price { font-family: var(--font-graphik) !important; letter-spacing: 0 !important; text-transform: none !important; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; } /* card prices — medium weight reads clearly and intentional at small size */ .bb-cat-price, .bb-shop-price, .bloom-related-price { font-size: 14px !important; font-weight: 500; } /* keep the sale strikethrough quiet */ .woocommerce-Price-amount del, .price del { opacity: 0.5; } .price ins { text-decoration: none; } /* ============================================================================= ORDER-PAY PAGE — the "pay for order" screen (BXB gateway). The owner wants a clean pure-white page here so the payment form does not blend into cream. ============================================================================= */ body.woocommerce-order-pay { background: #fff !important; } body.woocommerce-order-pay .bloom-pdp-main, body.woocommerce-order-pay main, body.woocommerce-order-pay #primary, body.woocommerce-order-pay .woocommerce { background: #fff !important; } body.woocommerce-order-pay #order_review, body.woocommerce-order-pay .woocommerce-checkout-payment { background: #fff; } /* ============================================================================= CART PAGE (/cart/) — classic [woocommerce_cart] shortcode. The default WC cart table is unstyled and breaks on mobile; restyle it to the site palette and make it stack cleanly on small screens. ============================================================================= */ .woocommerce-cart .woocommerce { max-width: 1100px; margin: 0 auto; padding: 24px 20px 96px; } .woocommerce-cart table.shop_table { border: 1px solid rgba(31,27,23,0.10); border-radius: 3px; border-collapse: collapse; background: #fff; margin-bottom: 32px; } .woocommerce-cart table.shop_table th { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(31,27,23,0.55); padding: 16px 18px; border-bottom: 1px solid rgba(31,27,23,0.10); } .woocommerce-cart table.shop_table td { padding: 18px; border-top: 1px solid rgba(31,27,23,0.08); vertical-align: middle; } .woocommerce-cart table.shop_table td.product-thumbnail img { width: 72px; height: 72px; object-fit: cover; border-radius: 2px; display: block; } .woocommerce-cart table.shop_table td.product-name a { font-family: var(--font-times-now); font-size: 17px; color: rgb(var(--theme-text)); text-decoration: none; } .woocommerce-cart table.shop_table td.product-name a:hover { color: rgb(var(--color-bronze-dark)); } .woocommerce-cart table.shop_table td.product-price, .woocommerce-cart table.shop_table td.product-subtotal { font-family: var(--font-times-now); font-size: 16px; color: rgb(var(--theme-text)); } .woocommerce-cart a.remove { color: rgba(31,27,23,0.4) !important; font-size: 20px; width: 26px; height: 26px; line-height: 24px; text-align: center; border-radius: 50%; transition: color .2s, background .2s; } .woocommerce-cart a.remove:hover { color: rgb(var(--color-red)) !important; background: rgba(31,27,23,0.05); } .woocommerce-cart .quantity input.qty { width: 64px; padding: 8px; border: 1px solid rgba(31,27,23,0.18); border-radius: 2px; font-family: var(--font-graphik); font-size: 15px; text-align: center; } /* Coupon row + "Update cart" — quiet secondary buttons */ .woocommerce-cart .actions .coupon input.input-text { padding: 12px 14px; border: 1px solid rgba(31,27,23,0.18); border-radius: 2px; font-family: var(--font-graphik); font-size: 15px; } .woocommerce-cart .actions .button, .woocommerce-cart .actions input.button { background: transparent !important; color: rgb(var(--theme-text)) !important; border: 1px solid rgba(31,27,23,0.3) !important; padding: 12px 22px !important; font-family: var(--font-graphik) !important; font-size: 11px !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; border-radius: 2px !important; transition: background .2s, color .2s, border-color .2s; } .woocommerce-cart .actions .button:hover, .woocommerce-cart .actions input.button:hover { background: rgb(var(--theme-text)) !important; color: #fff !important; border-color: rgb(var(--theme-text)) !important; } /* Cart totals box */ .woocommerce-cart .cart_totals { background: rgb(var(--color-cream-dark)); border: 1px solid rgba(31,27,23,0.10); border-radius: 3px; padding: 28px 26px; } .woocommerce-cart .cart_totals h2 { font-family: var(--font-times-now); font-size: 26px; font-weight: 300; margin: 0 0 18px; } .woocommerce-cart .cart_totals table th, .woocommerce-cart .cart_totals table td { padding: 12px 0; border-top: 1px solid rgba(31,27,23,0.10); font-family: var(--font-graphik); font-size: 15px; } .woocommerce-cart .cart_totals .order-total .amount { font-family: var(--font-times-now); font-size: 20px; } /* Mobile: classic WC cart table stacks into cards */ @media (max-width: 600px) { .woocommerce-cart table.shop_table thead { display: none; } .woocommerce-cart table.shop_table, .woocommerce-cart table.shop_table tbody, .woocommerce-cart table.shop_table tr, .woocommerce-cart table.shop_table td { display: block; width: 100%; box-sizing: border-box; } .woocommerce-cart table.shop_table tr.cart_item { position: relative; padding: 16px 16px 16px 100px; min-height: 104px; border-top: 1px solid rgba(31,27,23,0.10); } .woocommerce-cart table.shop_table tr.cart_item td { border: 0; padding: 2px 0; text-align: left !important; } .woocommerce-cart table.shop_table td.product-remove { position: absolute; top: 14px; right: 8px; width: auto; padding: 0; } .woocommerce-cart table.shop_table td.product-thumbnail { position: absolute; top: 16px; left: 16px; width: 72px; padding: 0; } .woocommerce-cart table.shop_table td::before { content: attr(data-title) ": "; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(31,27,23,0.5); margin-right: 6px; } .woocommerce-cart table.shop_table td.product-thumbnail::before, .woocommerce-cart table.shop_table td.product-remove::before { content: ""; } .woocommerce-cart .actions .coupon input.input-text, .woocommerce-cart .actions .button { width: 100%; margin: 4px 0; } } /* ============================================================================= FIX 1 — CART DRAWER (mini-cart) line-item PRICE typography. footer.php's mini-cart
  • is: × Product Title ← name, already Cormorant serif 1 × $400.00 footer.php styles `.quantity` as 12px muted (correct — that's the quiet "1 ×" prefix) and only re-colours `.quantity .amount`. The sitewide price rule already pushes `.woocommerce-Price-amount` to Cormorant, but it lands at the inherited 12px with no tracking — so the amount reads cramped/cheap. Here we give the ACTUAL AMOUNT in the drawer the refined Cormorant display treatment (a touch larger, well-tracked, ink-coloured) so it sits cohesively with the serif product name. The "1 ×" prefix stays small + muted. ============================================================================= */ .bb-cart-body .woocommerce-mini-cart-item .quantity .amount, .bb-cart-body .woocommerce-mini-cart-item .quantity .woocommerce-Price-amount { font-family: var(--font-times-now), Georgia, serif; font-size: 17px; font-weight: 400; line-height: 1.2; letter-spacing: 0.01em; color: rgb(var(--theme-text)); /* the amount sits on its own visual line under the quiet "1 ×" prefix */ display: inline-block; margin-top: 1px; } /* the currency symbol reads better a hair smaller than the numerals */ .bb-cart-body .woocommerce-mini-cart-item .quantity .amount .woocommerce-Price-currencySymbol { font-size: 0.82em; margin-right: 1px; } /* ============================================================================= FIX 2 — CLASSIC CHECKOUT [woocommerce_checkout] billing form alignment. The existing checkout block above only handles the legacy `.col2-set .col-1 / .col-2` markup. Current WooCommerce wraps the billing form differently: #customer_details └ .col2-set > .col-1 (billing) + .col-2 (additional / order notes) └ .woocommerce-billing-fields > .woocommerce-billing-fields__field-wrapper └ .form-row.form-row-first / .form-row-last / .form-row-wide On desktop those .form-row-first/.form-row-last are meant to pair into a tidy 2-up row; without explicit CSS they shift / overlap. These rules are scoped to `min-width: 769px` so mobile keeps its already-fine single column. ============================================================================= */ @media (min-width: 769px) { /* #customer_details: billing column + additional column, clean side-by-side */ .woocommerce-checkout #customer_details { display: block; width: 100%; } .woocommerce-checkout #customer_details .col2-set { display: flex; flex-wrap: wrap; gap: 0 32px; width: 100%; margin: 0; } .woocommerce-checkout #customer_details .col2-set .col-1, .woocommerce-checkout #customer_details .col2-set .col-2 { flex: 1 1 calc(50% - 16px); min-width: 0; /* let the column shrink instead of overflowing */ max-width: calc(50% - 16px); float: none; padding: 0; margin: 0; box-sizing: border-box; } /* The billing / shipping field wrappers become a 2-col grid so .form-row-first + .form-row-last line up as a real row with one gap, and .form-row-wide spans the full width. */ .woocommerce-checkout .woocommerce-billing-fields__field-wrapper, .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper, .woocommerce-checkout .woocommerce-additional-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; row-gap: 0; align-items: start; } .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row, .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row, .woocommerce-checkout .woocommerce-additional-fields__field-wrapper .form-row { box-sizing: border-box; width: auto; /* grid sizes the cell — kill any inherited width */ float: none; margin: 0 0 16px; padding: 0; clear: none; } .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-first, .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row-first, .woocommerce-checkout .woocommerce-additional-fields__field-wrapper .form-row-first { grid-column: 1; } .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-last, .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row-last, .woocommerce-checkout .woocommerce-additional-fields__field-wrapper .form-row-last { grid-column: 2; } .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-wide, .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row-wide, .woocommerce-checkout .woocommerce-additional-fields__field-wrapper .form-row-wide, .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row.notes, .woocommerce-checkout .woocommerce-additional-fields__field-wrapper .form-row.notes { grid-column: 1 / -1; } /* Labels: consistent, and the required * never pushes the row out of line */ .woocommerce-checkout #customer_details .form-row label { display: block; font-family: var(--font-graphik); font-size: 13px; line-height: 1.4; color: rgb(var(--theme-text)); margin: 0 0 6px; } .woocommerce-checkout #customer_details .form-row label .required, .woocommerce-checkout #customer_details .form-row label abbr.required { color: rgb(var(--color-bronze-dark)); border: 0; text-decoration: none; margin-left: 2px; } .woocommerce-checkout #customer_details .form-row label .optional { color: rgba(31,27,23,0.5); } /* Every input / select / textarea: same height, border, radius, full-width inside its own cell, box-sizing border-box so nothing overflows. */ .woocommerce-checkout #customer_details .form-row .woocommerce-input-wrapper { display: block; width: 100%; } .woocommerce-checkout #customer_details .form-row input.input-text, .woocommerce-checkout #customer_details .form-row textarea, .woocommerce-checkout #customer_details .form-row select, .woocommerce-checkout #customer_details .form-row .select2-container { box-sizing: border-box; width: 100%; max-width: 100%; margin: 0; display: block; } .woocommerce-checkout #customer_details .form-row input.input-text, .woocommerce-checkout #customer_details .form-row textarea, .woocommerce-checkout #customer_details .form-row select { height: 46px; padding: 11px 12px; font-family: var(--font-graphik); font-size: 14px; line-height: 1.4; color: rgb(var(--theme-text)); background: #fff; border: 1px solid rgba(26, 26, 26, 0.18); border-radius: 2px; } /* textarea (order notes) is the one field allowed to be taller */ .woocommerce-checkout #customer_details .form-row textarea { height: auto; min-height: 92px; resize: vertical; } .woocommerce-checkout #customer_details .form-row input.input-text:focus, .woocommerce-checkout #customer_details .form-row textarea:focus, .woocommerce-checkout #customer_details .form-row select:focus { outline: none; border-color: rgb(var(--color-moss)); } /* select2 (country / state) — match the native field box exactly */ .woocommerce-checkout #customer_details .form-row .select2-container .select2-selection--single { height: 46px; border: 1px solid rgba(26, 26, 26, 0.18); border-radius: 2px; background: #fff; } .woocommerce-checkout #customer_details .form-row .select2-container .select2-selection--single .select2-selection__rendered { line-height: 44px; padding-left: 12px; font-family: var(--font-graphik); font-size: 14px; color: rgb(var(--theme-text)); } .woocommerce-checkout #customer_details .form-row .select2-container .select2-selection--single .select2-selection__arrow { height: 44px; } /* validation states stay inside the cell — never widen the row */ .woocommerce-checkout #customer_details .form-row.woocommerce-invalid input.input-text, .woocommerce-checkout #customer_details .form-row.woocommerce-invalid select { border-color: rgb(var(--color-red)); } .woocommerce-checkout #customer_details .form-row.woocommerce-validated input.input-text, .woocommerce-checkout #customer_details .form-row.woocommerce-validated select { border-color: rgb(var(--color-moss)); } } /* ============================================================================= FIX 3 — ARCHIVE / HOMEPAGE commission modal close (×) button. page-archive.php AND front-page.php both ship an inline `.bb-arch-modal-x` rule: transparent background, muted grey glyph — nearly invisible over modal content. style.css is enqueued site-wide and loads here; scoping the override as `.bb-arch-modal .bb-arch-modal-x` (specificity 0,2,0) beats the inline rule's `.bb-arch-modal-x` (0,1,0), so no !important needed. Result: an obvious white "×" on a semi-dark circular chip, pinned top-right with inset. ============================================================================= */ .bb-arch-modal .bb-arch-modal-x { position: absolute; top: 12px; right: 12px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .bb-arch-modal .bb-arch-modal-x:hover, .bb-arch-modal .bb-arch-modal-x:focus-visible { background: rgba(0, 0, 0, 0.7); color: #fff; transform: scale(1.06); } /* ============================================================================= FIX 4 — MOBILE single-tap on cards (kill double-tap-zoom / 300ms tap delay). On touch devices, tapping a card "zooms in first, then opens" because the browser waits to see if a double-tap-to-zoom is coming. `touch-action: manipulation` tells the browser the element only needs pan + pinch — no double-tap zoom — so a single tap navigates immediately. Applied broadly to every interactive element and to all the named clickable card selectors. ============================================================================= */ a, button, [role="button"], input[type="submit"], input[type="button"], .bb-shop-link, .bb-shop-item, .bb-arch-link, .bb-arch-item, .bb-cat-item, .bloom-related-item, .bb-pdp-thumb { touch-action: manipulation; }