/* ========================================================================== BASSLINE BAITS — Shop stylesheet -------------------------------------------------------------------------- Loaded only on WooCommerce views (inc/enqueue.php → bassline_is_woocommerce_view()). main.css always loads first, so every token and primitive it defines is available here. Nothing in this file uses a raw colour value — only tokens and color-mix() on tokens. Most selectors are prefixed `.woocommerce` on purpose: that is the class WooCommerce puts on for every shop view, and matching the plugin's own specificity means the shop looks right whether or not WooCommerce's default CSS is dequeued. Nothing here relies on the WooCommerce icon font. Contents 1. Shop shell + layout helpers 2. Notices 3. Breadcrumb + archive header 4. Archive toolbar (result count + ordering) 5. Product grid 6. Price, star rating, sale flash 7. Buttons 8. Single product — layout + gallery 9. Single product — summary 10. Variations + quantity stepper 11. Product meta + tabs 12. Reviews 13. Related / up-sells / cross-sells 14. Cart 15. Checkout 16. Order received + order details 17. My account 18. Widgets 19. Pagination 20. Overlays, spinners, third-party (select2) 21. Responsive — 900px 22. Responsive — 600px 23. Reduced motion + print ========================================================================== */ /* -------------------------------------------------------------------------- 1. SHOP SHELL + LAYOUT HELPERS -------------------------------------------------------------------------- */ /* Two-column shop archive: products + the `sidebar-shop` widget area. Shop-only, so it lives here rather than in main.css. */ .bb-shop-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bb-s-6); align-items: start; padding-block: var(--bb-s-7); } .bb-shop-layout--sidebar { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); } .bb-shop-main { min-width: 0; } .bb-shop-aside { min-width: 0; } /* Sticky filters are only worth it when there is room for them. */ @media (min-width: 901px) { .bb-shop-aside { position: sticky; top: calc(var(--bb-header-h) + var(--bb-s-4)); } } /* Generic shop tables — cart, checkout review, account orders, downloads. */ .woocommerce table.shop_table { width: 100%; margin: 0 0 var(--bb-s-6); background: var(--bb-surface); border: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg); /* separate + spacing 0 so the rounded corners actually clip */ border-collapse: separate; border-spacing: 0; overflow: hidden; } .woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: var(--bb-s-4); border: 0; border-bottom: 1px solid var(--bb-border); vertical-align: middle; text-align: left; } .woocommerce table.shop_table thead th { background: var(--bb-navy-900); color: var(--bb-white); font-family: var(--bb-font-display); font-size: var(--bb-t-sm); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; } .woocommerce table.shop_table tbody tr:last-child td { border-bottom: 0; } .woocommerce table.shop_table tfoot th, .woocommerce table.shop_table tfoot td { background: var(--bb-navy-900); font-weight: 600; } .woocommerce table.shop_table tfoot tr:last-child th, .woocommerce table.shop_table tfoot tr:last-child td { border-bottom: 0; color: var(--bb-white); } .woocommerce table.shop_table td.product-name a { color: var(--bb-white); font-family: var(--bb-font-display); font-size: var(--bb-t-lg); font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: 0.02em; } .woocommerce table.shop_table td.product-name a:hover { color: var(--bb-lime-300); } .woocommerce table.shop_table td.product-name dl.variation { margin: var(--bb-s-2) 0 0; font-size: var(--bb-t-xs); color: var(--bb-text-muted); } .woocommerce table.shop_table td.product-name dl.variation dt, .woocommerce table.shop_table td.product-name dl.variation dd { display: inline; margin: 0; font-weight: 400; } .woocommerce table.shop_table td.product-name dl.variation dd + dt::before { content: " · "; color: var(--bb-border); } .woocommerce table.shop_table td.product-name dl.variation p { margin: 0; } /* Remove ("×") control — cart rows and the mini-cart widget. */ .woocommerce a.remove { display: grid; place-items: center; width: 28px; height: 28px; padding: 0 0 2px; background: var(--bb-navy-900); border: 1px solid var(--bb-border); border-radius: 50%; color: var(--bb-text-muted); font-size: var(--bb-t-lg); font-weight: 700; line-height: 1; text-align: center; text-decoration: none; transition: background-color 0.16s var(--bb-ease), color 0.16s var(--bb-ease), border-color 0.16s var(--bb-ease); } .woocommerce a.remove:hover, .woocommerce a.remove:focus-visible { background: var(--bb-sale); border-color: var(--bb-sale); color: var(--bb-white); } /* Checkboxes / radios pick up the brand colour for free. */ .woocommerce input[type="checkbox"], .woocommerce input[type="radio"] { width: auto; accent-color: var(--bb-accent); } /* Native select popups are OS-drawn; this keeps them dark on Windows/Linux. */ .woocommerce select option { background: var(--bb-navy-900); color: var(--bb-white); } /* Woo hard-codes `screen-reader-text`; main.css already hides it. */ .woocommerce .woocommerce-notices-wrapper { margin: 0; } /* -------------------------------------------------------------------------- 2. NOTICES (message = green, info = blue, error = red) -------------------------------------------------------------------------- */ .woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error, .woocommerce-message, .woocommerce-info, .woocommerce-error { position: relative; display: flow-root; /* contains Woo's floated action button */ margin: 0 0 var(--bb-s-5); padding: var(--bb-s-4) var(--bb-s-5) var(--bb-s-4) var(--bb-s-8); background: var(--bb-surface); border: 1px solid var(--bb-border); border-left: 4px solid var(--bb-accent); border-radius: var(--bb-radius); color: var(--bb-text); font-size: var(--bb-t-sm); list-style: none; } .woocommerce .woocommerce-message::before, .woocommerce .woocommerce-info::before, .woocommerce .woocommerce-error::before, .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { position: absolute; top: var(--bb-s-4); left: var(--bb-s-4); display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; font-family: var(--bb-font-display); font-size: var(--bb-t-sm); font-weight: 800; line-height: 1; /* Overrides WooCommerce's icon-font glyph — we never rely on that font. */ content: "!"; background: var(--bb-accent); color: var(--bb-accent-ink); } .woocommerce .woocommerce-message, .woocommerce-message { border-left-color: var(--bb-lime-400); background: color-mix(in srgb, var(--bb-lime-400) 10%, var(--bb-surface)); } .woocommerce .woocommerce-message::before, .woocommerce-message::before { content: "\2713"; /* check */ background: var(--bb-lime-400); color: var(--bb-accent-ink); } .woocommerce .woocommerce-info, .woocommerce-info { border-left-color: var(--bb-water-400); background: color-mix(in srgb, var(--bb-water-500) 14%, var(--bb-surface)); } .woocommerce .woocommerce-info::before, .woocommerce-info::before { content: "i"; background: var(--bb-water-400); color: var(--bb-navy-900); } .woocommerce .woocommerce-error, .woocommerce-error { border-left-color: var(--bb-sale); background: color-mix(in srgb, var(--bb-sale) 12%, var(--bb-surface)); } .woocommerce .woocommerce-error::before, .woocommerce-error::before { content: "!"; background: var(--bb-sale); color: var(--bb-white); } .woocommerce .woocommerce-error li, .woocommerce-error li, .woocommerce .woocommerce-message li, .woocommerce-message li { margin: 0 0 var(--bb-s-2); list-style: none; } .woocommerce .woocommerce-error li:last-child, .woocommerce-error li:last-child { margin-bottom: 0; } .woocommerce .woocommerce-message .button, .woocommerce .woocommerce-info .button, .woocommerce .woocommerce-error .button { float: right; margin: -0.2em 0 var(--bb-s-2) var(--bb-s-4); } /* Demo/store notice bar. */ .woocommerce-store-notice, p.demo_store { position: fixed; inset: auto 0 0 0; z-index: 120; margin: 0; padding: var(--bb-s-3) var(--bb-s-5); background: var(--bb-accent); color: var(--bb-accent-ink); font-family: var(--bb-font-display); font-size: var(--bb-t-sm); font-weight: 700; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; } .woocommerce-store-notice a, p.demo_store a { color: var(--bb-accent-ink); } /* -------------------------------------------------------------------------- 3. BREADCRUMB + ARCHIVE HEADER -------------------------------------------------------------------------- */ .woocommerce .woocommerce-breadcrumb { margin: 0; padding-block: var(--bb-s-4); color: var(--bb-text-muted); font-size: var(--bb-t-sm); } .woocommerce .woocommerce-breadcrumb a { color: var(--bb-text-muted); text-decoration: none; } .woocommerce .woocommerce-breadcrumb a:hover { color: var(--bb-lime-300); text-decoration: underline; } .woocommerce .woocommerce-products-header { margin-bottom: var(--bb-s-6); } .woocommerce .woocommerce-products-header__title { margin-bottom: var(--bb-s-3); } .woocommerce .term-description, .woocommerce .woocommerce-products-header .term-description { max-width: 68ch; color: var(--bb-text-muted); } .woocommerce .term-description p:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- 4. ARCHIVE TOOLBAR — result count + ordering -------------------------------------------------------------------------- */ /* Optional wrapper a template can use to put both controls on one line. */ .bb-shop-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--bb-s-3) var(--bb-s-5); margin-bottom: var(--bb-s-5); padding-bottom: var(--bb-s-4); border-bottom: 1px solid var(--bb-border); } .bb-shop-toolbar .woocommerce-result-count, .bb-shop-toolbar .woocommerce-ordering { float: none; margin: 0; } /* Standalone (raw WooCommerce markup) fallback — floats, like Woo expects. */ .woocommerce .woocommerce-result-count { float: left; margin: 0 0 var(--bb-s-4); color: var(--bb-text-muted); font-size: var(--bb-t-sm); } .woocommerce .woocommerce-ordering { position: relative; float: right; margin: 0 0 var(--bb-s-4); } .woocommerce ul.products { clear: both; } .woocommerce .woocommerce-ordering select.orderby, .woocommerce .woocommerce-ordering select { width: auto; min-width: 210px; padding: 0.6em 3em 0.6em 1em; background: var(--bb-navy-900); border: 1px solid var(--bb-border); border-radius: var(--bb-radius); color: var(--bb-white); font-family: var(--bb-font-display); font-size: var(--bb-t-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; appearance: none; -webkit-appearance: none; cursor: pointer; } /* CSS-drawn chevron — no icon font, no data-URI colour literal. */ .woocommerce .woocommerce-ordering::after { content: ""; position: absolute; top: 50%; right: 1.15em; width: 0.5em; height: 0.5em; margin-top: -0.4em; border-right: 2px solid var(--bb-accent); border-bottom: 2px solid var(--bb-accent); transform: rotate(45deg); pointer-events: none; } /* -------------------------------------------------------------------------- 5. PRODUCT GRID — ul.products / li.product wearing the .bb-card look -------------------------------------------------------------------------- */ .woocommerce ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--bb-s-5); margin: 0 0 var(--bb-s-6); padding: 0; list-style: none; } .woocommerce ul.products::before, .woocommerce ul.products::after { content: none; } /* kill Woo's clearfix */ /* Honour the shop's column setting on wide screens only. */ @media (min-width: 901px) { .woocommerce ul.products.columns-1 { grid-template-columns: minmax(0, 1fr); } .woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .woocommerce ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .woocommerce ul.products.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .woocommerce ul.products li.product { position: relative; display: flex; flex-direction: column; float: none; width: auto; margin: 0; padding: 0 0 var(--bb-s-5); background: var(--bb-surface-raised); border: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg); overflow: hidden; text-align: left; list-style: none; transition: transform 0.2s var(--bb-ease), border-color 0.2s var(--bb-ease), box-shadow 0.2s var(--bb-ease); } .woocommerce ul.products li.product:hover { transform: translateY(-4px); border-color: var(--bb-lime-500); box-shadow: var(--bb-shadow-soft); } .woocommerce ul.products li.product::before, .woocommerce ul.products li.product::after { content: none; } /* If a template renders a real .bb-card inside the li, let the card own the chrome instead of doubling the border/background. */ .woocommerce ul.products li.product:has(> .bb-card) { padding: 0; background: none; border: 0; box-shadow: none; } .woocommerce ul.products li.product:has(> .bb-card):hover { transform: none; } .woocommerce ul.products li.product a.woocommerce-LoopProduct-link, .woocommerce ul.products li.product a.woocommerce-loop-product__link { display: flex; flex-direction: column; gap: var(--bb-s-2); color: inherit; text-decoration: none; } /* Fixed aspect box: zero layout shift no matter what the shop owner uploads. */ .woocommerce ul.products li.product img, .woocommerce ul.products li.product a img { width: 100%; height: auto; margin: 0 0 var(--bb-s-4); aspect-ratio: 4 / 3; object-fit: cover; background: var(--bb-navy-900); border-radius: 0; box-shadow: none; transition: transform 0.4s var(--bb-ease); } .woocommerce ul.products li.product:hover img { transform: scale(1.05); } .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h2, .woocommerce ul.products li.product h3 { margin: 0; padding: 0 var(--bb-s-5); color: var(--bb-white); font-family: var(--bb-font-display); font-size: var(--bb-t-lg); font-weight: 800; line-height: 1.15; text-transform: uppercase; } .woocommerce ul.products li.product:hover .woocommerce-loop-product__title { color: var(--bb-lime-300); } .woocommerce ul.products li.product .woocommerce-loop-category__title { padding: 0 var(--bb-s-5); } .woocommerce ul.products li.product .woocommerce-loop-category__title mark, .woocommerce ul.products li.product .count { background: none; color: var(--bb-text-muted); font-size: var(--bb-t-sm); } .woocommerce ul.products li.product .star-rating { margin: 0 var(--bb-s-5); } .woocommerce ul.products li.product .price { margin: 0; padding: 0 var(--bb-s-5); font-family: var(--bb-font-display); font-size: var(--bb-t-lg); font-weight: 800; letter-spacing: 0.02em; } .woocommerce ul.products li.product .product__short-description, .woocommerce ul.products li.product .woocommerce-product-details__short-description { padding: 0 var(--bb-s-5); color: var(--bb-text-muted); font-size: var(--bb-t-sm); } .woocommerce ul.products li.product .button { position: relative; z-index: 2; align-self: flex-start; margin: var(--bb-s-4) var(--bb-s-5) 0; } .woocommerce ul.products li.product a.added_to_cart { position: relative; z-index: 2; margin: var(--bb-s-2) var(--bb-s-5) 0; color: var(--bb-lime-300); font-family: var(--bb-font-display); font-size: var(--bb-t-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } /* Empty state. */ .woocommerce .woocommerce-no-products-found { margin-bottom: var(--bb-s-6); } /* -------------------------------------------------------------------------- 6. PRICE, STAR RATING, SALE FLASH -------------------------------------------------------------------------- */ .woocommerce .price, .woocommerce span.price, .woocommerce .woocommerce-Price-amount { color: var(--bb-white); } .woocommerce .price del, .woocommerce span.price del { margin-right: 0.4em; color: var(--bb-text-muted); font-weight: 400; font-size: 0.8em; text-decoration: line-through; opacity: 0.85; } .woocommerce .price ins, .woocommerce span.price ins { background: none; color: var(--bb-accent); font-weight: 800; text-decoration: none; } .woocommerce .price .woocommerce-Price-currencySymbol { font-size: 0.8em; } .woocommerce .price small.woocommerce-price-suffix { display: block; color: var(--bb-text-muted); font-family: var(--bb-font-body); font-size: var(--bb-t-xs); font-weight: 400; letter-spacing: 0; text-transform: none; } /* Sale flash — same raked flag as .bb-card__flag. */ .woocommerce span.onsale { position: absolute; top: var(--bb-s-3); left: var(--bb-s-3); z-index: 3; min-height: 0; min-width: 0; margin: 0; padding: 0.25em 0.7em; background: var(--bb-sale); border-radius: 0; color: var(--bb-white); font-family: var(--bb-font-display); font-size: var(--bb-t-xs); font-weight: 800; letter-spacing: 0.1em; line-height: 1.6; text-transform: uppercase; transform: skewX(var(--bb-skew)); } /* Star rating (display). Built from the ★ glyph so it works with WooCommerce's own stylesheet dequeued — we never depend on the WooCommerce icon font. Woo prints …text…; the inner span's % width is relative to the 5-glyph content box, so the overlay lines up exactly. */ .woocommerce .star-rating, .star-rating { position: relative; display: inline-block; width: max-content; height: 1.15em; margin: 0; overflow: hidden; color: var(--bb-navy-500); font-family: var(--bb-font-body); font-size: var(--bb-t-base); font-style: normal; letter-spacing: 0; line-height: 1.15; white-space: nowrap; } /* Static (not absolute) so the empty row is what sizes the box — the inner span's inline width:N% then resolves against exactly five glyphs. */ .woocommerce .star-rating::before, .star-rating::before { content: "\2605\2605\2605\2605\2605"; display: block; color: var(--bb-navy-500); } .woocommerce .star-rating > span, .star-rating > span { position: absolute; top: 0; left: 0; padding-top: 1.6em; /* pushes the "x out of 5" text out of the clipped box */ overflow: hidden; float: none; white-space: nowrap; } .woocommerce .star-rating > span::before, .star-rating > span::before { content: "\2605\2605\2605\2605\2605"; position: absolute; top: 0; left: 0; color: var(--bb-accent); } .woocommerce .woocommerce-product-rating { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bb-s-2) var(--bb-s-3); margin: 0 0 var(--bb-s-4); } .woocommerce .woocommerce-product-rating .woocommerce-review-link { color: var(--bb-text-muted); font-size: var(--bb-t-sm); text-decoration: none; } .woocommerce .woocommerce-product-rating .woocommerce-review-link:hover { color: var(--bb-lime-300); text-decoration: underline; } /* -------------------------------------------------------------------------- 7. BUTTONS — .bb-btn language, unskewed so plain text labels stay upright -------------------------------------------------------------------------- */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit { display: inline-flex; align-items: center; justify-content: center; gap: var(--bb-s-2); padding: 0.8em 1.7em; background: var(--bb-surface-raised); border: 2px solid var(--bb-border); border-radius: 0; color: var(--bb-white); font-family: var(--bb-font-display); font-size: var(--bb-t-sm); font-weight: 800; letter-spacing: 0.1em; line-height: 1.15; text-decoration: none; text-transform: uppercase; text-shadow: none; white-space: normal; cursor: pointer; box-shadow: none; transition: transform 0.16s var(--bb-ease), box-shadow 0.16s var(--bb-ease), background-color 0.16s var(--bb-ease), border-color 0.16s var(--bb-ease), color 0.16s var(--bb-ease); } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce a.button:focus-visible, .woocommerce button.button:focus-visible, .woocommerce input.button:focus-visible { background: var(--bb-surface); border-color: var(--bb-lime-400); color: var(--bb-lime-300); } /* Primary actions — the ones that move money. */ .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce button.single_add_to_cart_button, .woocommerce ul.products li.product a.add_to_cart_button, .woocommerce ul.products li.product a.button.product_type_simple, .woocommerce a.checkout-button, .woocommerce #place_order, .woocommerce #respond input#submit { background: var(--bb-accent); border-color: var(--bb-navy-900); color: var(--bb-accent-ink); box-shadow: var(--bb-shadow-hard); } .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce button.single_add_to_cart_button:hover, .woocommerce ul.products li.product a.add_to_cart_button:hover, .woocommerce a.checkout-button:hover, .woocommerce #place_order:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button.alt:focus-visible, .woocommerce button.button.alt:focus-visible, .woocommerce input.button.alt:focus-visible, .woocommerce button.single_add_to_cart_button:focus-visible, .woocommerce a.checkout-button:focus-visible, .woocommerce #place_order:focus-visible, .woocommerce #respond input#submit:focus-visible { background: var(--bb-lime-300); border-color: var(--bb-navy-900); color: var(--bb-accent-ink); transform: translate(-2px, -2px); box-shadow: var(--bb-shadow-hard-lg); } .woocommerce a.button.alt:active, .woocommerce button.button.alt:active, .woocommerce input.button.alt:active, .woocommerce button.single_add_to_cart_button:active, .woocommerce a.checkout-button:active, .woocommerce #place_order:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--bb-navy-900); } /* If inc/woocommerce.php ever wraps a button label in (the .bb-btn contract), the button can take the brand rake without skewing its text. */ .woocommerce a.button:has(> span), .woocommerce button.button:has(> span) { transform: skewX(var(--bb-skew)); } .woocommerce a.button:has(> span) > span, .woocommerce button.button:has(> span) > span { display: inline-block; transform: skewX(calc(var(--bb-skew) * -1)); } .woocommerce a.button:has(> span):hover, .woocommerce button.button:has(> span):hover { transform: skewX(var(--bb-skew)) translate(-2px, -2px); } .woocommerce a.button.disabled, .woocommerce button.button:disabled, .woocommerce button.button.disabled, .woocommerce input.button:disabled, .woocommerce input.button.disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; } /* AJAX pending state — label swapped for a CSS spinner (no Woo icon font). */ .woocommerce a.button.loading, .woocommerce button.button.loading, .woocommerce input.button.loading { position: relative; color: transparent; pointer-events: none; opacity: 0.85; } .woocommerce a.button.loading::after, .woocommerce button.button.loading::after, .woocommerce input.button.loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 1.1em; height: 1.1em; margin: -0.55em 0 0 -0.55em; border: 2px solid color-mix(in srgb, var(--bb-accent-ink) 35%, transparent); border-top-color: var(--bb-accent-ink); border-radius: 50%; animation: bb-spin 0.7s linear infinite; } @keyframes bb-spin { to { transform: rotate(360deg); } } /* -------------------------------------------------------------------------- 8. SINGLE PRODUCT — layout + gallery -------------------------------------------------------------------------- */ .woocommerce div.product { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--bb-s-7) var(--bb-s-7); align-items: start; margin-bottom: var(--bb-s-8); } .woocommerce div.product > span.onsale { top: var(--bb-s-4); left: var(--bb-s-4); z-index: 5; font-size: var(--bb-t-sm); } .woocommerce div.product > div.images, .woocommerce div.product > .woocommerce-product-gallery { grid-column: 1; } .woocommerce div.product > div.summary { grid-column: 2; } .woocommerce div.product > .woocommerce-tabs, .woocommerce div.product > .related, .woocommerce div.product > .upsells, .woocommerce div.product > .up-sells, .woocommerce div.product > .woocommerce-product-gallery + .clear { grid-column: 1 / -1; } .woocommerce div.product div.images, .woocommerce div.product div.woocommerce-product-gallery { position: relative; float: none; width: auto; margin: 0; opacity: 1 !important; /* Woo fades the gallery in via JS; never hide it */ } .woocommerce div.product div.images .woocommerce-product-gallery__wrapper { margin: 0; padding: 0; transform: none; } .woocommerce div.product div.images .woocommerce-product-gallery__image { margin: 0; list-style: none; } .woocommerce div.product div.images img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; background: var(--bb-navy-900); border: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg); box-shadow: none; } .woocommerce div.product div.images .woocommerce-product-gallery__image a { display: block; line-height: 0; } /* Zoom / lightbox trigger. */ .woocommerce div.product div.images .woocommerce-product-gallery__trigger { position: absolute; top: var(--bb-s-3); right: var(--bb-s-3); z-index: 4; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; background: color-mix(in srgb, var(--bb-navy-900) 82%, transparent); border: 1px solid var(--bb-border); border-radius: 50%; color: var(--bb-mist); font-size: var(--bb-t-lg); line-height: 1; text-decoration: none; transition: border-color 0.16s var(--bb-ease), color 0.16s var(--bb-ease); } .woocommerce div.product div.images .woocommerce-product-gallery__trigger:hover { border-color: var(--bb-lime-400); color: var(--bb-lime-300); } /* Flexslider thumbnails (and any plain thumbnail list). */ .woocommerce div.product div.images .flex-control-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--bb-s-2); margin: var(--bb-s-3) 0 0; padding: 0; list-style: none; } .woocommerce div.product div.images .flex-control-thumbs li { float: none; width: auto; margin: 0; list-style: none; } .woocommerce div.product div.images .flex-control-thumbs img { aspect-ratio: 1 / 1; border-radius: var(--bb-radius); opacity: 0.55; cursor: pointer; transition: opacity 0.16s var(--bb-ease), border-color 0.16s var(--bb-ease); } .woocommerce div.product div.images .flex-control-thumbs img:hover, .woocommerce div.product div.images .flex-control-thumbs img.flex-active { border-color: var(--bb-accent); opacity: 1; } .woocommerce div.product div.images .flex-viewport { border-radius: var(--bb-radius-lg); } /* -------------------------------------------------------------------------- 9. SINGLE PRODUCT — summary column -------------------------------------------------------------------------- */ .woocommerce div.product div.summary { float: none; width: auto; margin: 0; } .woocommerce div.product .product_title { margin-bottom: var(--bb-s-3); font-size: var(--bb-t-2xl); } .woocommerce div.product p.price, .woocommerce div.product span.price { display: block; margin: 0 0 var(--bb-s-4); color: var(--bb-accent); font-family: var(--bb-font-display); font-size: var(--bb-t-2xl); font-weight: 800; line-height: 1.1; } .woocommerce div.product .woocommerce-product-details__short-description { margin-bottom: var(--bb-s-5); color: var(--bb-text); } .woocommerce div.product .woocommerce-product-details__short-description ul { padding-left: 1.15em; color: var(--bb-text-muted); } .woocommerce div.product p.stock { display: inline-flex; align-items: center; gap: var(--bb-s-2); margin: 0 0 var(--bb-s-4); font-family: var(--bb-font-display); font-size: var(--bb-t-sm); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .woocommerce div.product p.stock::before { content: ""; width: 0.6em; height: 0.6em; border-radius: 50%; background: currentColor; } .woocommerce div.product p.stock.in-stock { color: var(--bb-instock); } .woocommerce div.product p.stock.available-on-backorder { color: var(--bb-water-400); } .woocommerce div.product p.stock.out-of-stock { color: var(--bb-oos); } .woocommerce div.product form.cart { margin: 0 0 var(--bb-s-5); padding: var(--bb-s-5); background: var(--bb-surface); border: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg); } .woocommerce div.product form.cart::before, .woocommerce div.product form.cart::after { content: none; } .woocommerce div.product form.cart div.quantity { float: none; margin: 0; } .woocommerce div.product form.cart .button { float: none; } .woocommerce div.product form.cart button.single_add_to_cart_button { flex: 1 1 200px; padding-block: 1em; font-size: var(--bb-t-base); } /* qty + add-to-cart sit on one line */ .woocommerce div.product form.cart:not(.variations_form), .woocommerce div.product form.cart .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bb-s-3); } .woocommerce div.product form.cart.grouped_form { display: block; } .woocommerce div.product form.cart table.group_table { width: 100%; margin-bottom: var(--bb-s-4); background: transparent; border: 0; } .woocommerce div.product form.cart table.group_table td { padding: var(--bb-s-3) var(--bb-s-3) var(--bb-s-3) 0; border-bottom: 1px solid var(--bb-border); vertical-align: middle; } .woocommerce div.product form.cart table.group_table td label { margin: 0; } .woocommerce div.product form.cart .woocommerce-grouped-product-list-item__label a { color: var(--bb-white); text-decoration: none; } /* Buy-now / extra links Woo prints under the form. */ .woocommerce div.product .cart .added_to_cart { align-self: center; } /* -------------------------------------------------------------------------- 10. VARIATIONS + QUANTITY STEPPER -------------------------------------------------------------------------- */ .woocommerce div.product form.cart table.variations { display: block; width: 100%; margin: 0 0 var(--bb-s-4); background: transparent; border: 0; } .woocommerce div.product form.cart table.variations tbody { display: block; } .woocommerce div.product form.cart table.variations tr { display: block; margin-bottom: var(--bb-s-4); } .woocommerce div.product form.cart table.variations th.label, .woocommerce div.product form.cart table.variations td.value { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; } .woocommerce div.product form.cart table.variations th.label label { margin-bottom: var(--bb-s-2); } .woocommerce div.product form.cart table.variations td.value select { width: 100%; margin: 0; } .woocommerce div.product form.cart .reset_variations { display: inline-block; margin-top: var(--bb-s-2); color: var(--bb-text-muted); font-size: var(--bb-t-xs); letter-spacing: 0.08em; text-transform: uppercase; } .woocommerce div.product .woocommerce-variation { margin-bottom: var(--bb-s-4); } .woocommerce div.product .woocommerce-variation-price span.price { font-size: var(--bb-t-xl); margin-bottom: var(--bb-s-2); } .woocommerce div.product .woocommerce-variation-availability p.stock { margin-bottom: 0; } .woocommerce div.product .woocommerce-variation-description { color: var(--bb-text-muted); } /* Quantity field. `.bb-qty` + `.bb-qty__btn` are added by assets/js/main.js; the field is styled so it still looks right with JS disabled. */ .woocommerce .quantity, .woocommerce div.product form.cart div.quantity, .woocommerce table.cart td.product-quantity .quantity { display: inline-flex; align-items: stretch; overflow: hidden; background: var(--bb-navy-900); border: 1px solid var(--bb-border); border-radius: var(--bb-radius); } .woocommerce .quantity input.qty { flex: 0 0 auto; width: 3.6em; min-width: 0; height: auto; padding: 0.65em 0.2em; background: transparent; border: 0; border-radius: 0; box-shadow: none; color: var(--bb-white); font-family: var(--bb-font-display); font-size: var(--bb-t-base); font-weight: 700; text-align: center; appearance: textfield; -moz-appearance: textfield; } .woocommerce .quantity input.qty:focus { box-shadow: none; outline: none; background: color-mix(in srgb, var(--bb-lime-400) 12%, transparent); } .woocommerce .quantity input.qty::-webkit-outer-spin-button, .woocommerce .quantity input.qty::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; } .woocommerce .quantity label { margin: 0; } .bb-qty__btn { display: grid; place-items: center; width: 2.4em; padding: 0; background: var(--bb-surface-raised); border: 0; border-radius: 0; color: var(--bb-mist); font-family: var(--bb-font-display); font-size: var(--bb-t-lg); font-weight: 800; line-height: 1; cursor: pointer; transition: background-color 0.16s var(--bb-ease), color 0.16s var(--bb-ease); } .bb-qty__btn:hover:not(:disabled), .bb-qty__btn:focus-visible:not(:disabled) { background: var(--bb-accent); color: var(--bb-accent-ink); } .bb-qty__btn:disabled { opacity: 0.35; cursor: not-allowed; } .bb-qty__btn--minus { border-right: 1px solid var(--bb-border); } .bb-qty__btn--plus { border-left: 1px solid var(--bb-border); } /* -------------------------------------------------------------------------- 11. PRODUCT META + TABS -------------------------------------------------------------------------- */ .woocommerce div.product .product_meta { display: flex; flex-direction: column; gap: var(--bb-s-2); margin-top: var(--bb-s-5); padding-top: var(--bb-s-4); border-top: 1px solid var(--bb-border); color: var(--bb-text-muted); font-size: var(--bb-t-sm); } .woocommerce div.product .product_meta > span { display: block; } .woocommerce div.product .product_meta a { color: var(--bb-lime-300); text-decoration: none; } .woocommerce div.product .product_meta a:hover { text-decoration: underline; } .woocommerce div.product .woocommerce-tabs { margin-top: var(--bb-s-7); padding-top: var(--bb-s-6); border-top: 1px solid var(--bb-border); } .woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: var(--bb-s-2); margin: 0 0 var(--bb-s-5); padding: 0 0 var(--bb-s-3); border-bottom: 1px solid var(--bb-border); list-style: none; } .woocommerce div.product .woocommerce-tabs ul.tabs::before, .woocommerce div.product .woocommerce-tabs ul.tabs::after, .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 { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { display: block; padding: var(--bb-s-3) var(--bb-s-5); background: var(--bb-surface); border: 1px solid var(--bb-border); border-radius: var(--bb-radius); color: var(--bb-text-muted); font-family: var(--bb-font-display); font-size: var(--bb-t-sm); font-weight: 800; letter-spacing: 0.1em; text-decoration: none; text-transform: uppercase; transition: background-color 0.16s var(--bb-ease), color 0.16s var(--bb-ease), border-color 0.16s var(--bb-ease); } .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { border-color: var(--bb-lime-400); color: var(--bb-lime-300); } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { background: var(--bb-accent); border-color: var(--bb-accent); color: var(--bb-accent-ink); } .woocommerce div.product .woocommerce-tabs .panel { margin: 0; padding: 0; max-width: 78ch; } .woocommerce div.product .woocommerce-tabs .panel > h2:first-child { margin-bottom: var(--bb-s-4); font-size: var(--bb-t-xl); } .woocommerce div.product .woocommerce-tabs .panel table.shop_attributes { width: 100%; margin: 0; background: var(--bb-surface); border: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg); border-collapse: separate; border-spacing: 0; overflow: hidden; } .woocommerce div.product .woocommerce-tabs .panel table.shop_attributes th, .woocommerce div.product .woocommerce-tabs .panel table.shop_attributes td { padding: var(--bb-s-3) var(--bb-s-4); border: 0; border-bottom: 1px solid var(--bb-border); font-style: normal; } .woocommerce div.product .woocommerce-tabs .panel table.shop_attributes th { width: 34%; background: var(--bb-navy-900); color: var(--bb-white); } .woocommerce div.product .woocommerce-tabs .panel table.shop_attributes td { color: var(--bb-text-muted); } .woocommerce div.product .woocommerce-tabs .panel table.shop_attributes td p { margin: 0; } .woocommerce div.product .woocommerce-tabs .panel table.shop_attributes tr:last-child th, .woocommerce div.product .woocommerce-tabs .panel table.shop_attributes tr:last-child td { border-bottom: 0; } /* -------------------------------------------------------------------------- 12. REVIEWS — list + form + star input -------------------------------------------------------------------------- */ .woocommerce #reviews #comments h2 { margin-bottom: var(--bb-s-5); font-size: var(--bb-t-xl); } .woocommerce #reviews .woocommerce-noreviews { margin-bottom: var(--bb-s-5); } .woocommerce #reviews #comments ol.commentlist { margin: 0 0 var(--bb-s-6); padding: 0; list-style: none; } .woocommerce #reviews #comments ol.commentlist li { margin: 0 0 var(--bb-s-4); padding: 0; list-style: none; } .woocommerce #reviews #comments ol.commentlist li .comment_container { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--bb-s-4); padding: var(--bb-s-5); background: var(--bb-surface); border: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg); } .woocommerce #reviews #comments ol.commentlist li img.avatar { position: static; float: none; width: 56px; height: 56px; margin: 0; padding: 0; background: var(--bb-navy-900); border: 1px solid var(--bb-border); border-radius: 50%; object-fit: cover; } .woocommerce #reviews #comments ol.commentlist li .comment-text { margin: 0; padding: 0; border: 0; border-radius: 0; } .woocommerce #reviews #comments ol.commentlist li .comment-text .star-rating { float: none; margin-bottom: var(--bb-s-2); } .woocommerce #reviews #comments ol.commentlist li .comment-text p.meta { margin-bottom: var(--bb-s-2); color: var(--bb-text-muted); font-size: var(--bb-t-sm); } .woocommerce #reviews #comments ol.commentlist li .comment-text p.meta strong { color: var(--bb-white); font-family: var(--bb-font-display); font-size: var(--bb-t-base); letter-spacing: 0.04em; text-transform: uppercase; } .woocommerce #reviews #comments ol.commentlist li .comment-text .woocommerce-review__dash { margin-inline: 0.4em; color: var(--bb-border); } .woocommerce #reviews #comments ol.commentlist li .comment-text .description p:last-child { margin-bottom: 0; } .woocommerce #reviews #comments ol.commentlist ul.children { margin: var(--bb-s-4) 0 0 var(--bb-s-6); padding: 0; list-style: none; } /* Review form */ .woocommerce #review_form_wrapper { padding: var(--bb-s-5); background: var(--bb-surface); border: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg); } .woocommerce #review_form #respond { margin: 0; } .woocommerce #review_form #respond .comment-reply-title { display: block; margin-bottom: var(--bb-s-4); color: var(--bb-white); font-family: var(--bb-font-display); font-size: var(--bb-t-xl); font-weight: 800; text-transform: uppercase; } .woocommerce #review_form #respond .comment-form-rating, .woocommerce #review_form #respond p { margin: 0 0 var(--bb-s-4); } .woocommerce #review_form #respond .comment-notes, .woocommerce #review_form #respond .comment-form-cookies-consent label { color: var(--bb-text-muted); font-family: var(--bb-font-body); font-size: var(--bb-t-sm); font-weight: 400; letter-spacing: normal; text-transform: none; } .woocommerce #review_form #respond .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: var(--bb-s-2); } .woocommerce #review_form #respond .comment-form-cookies-consent label { margin: 0; } .woocommerce #review_form #respond .form-submit { margin-bottom: 0; } .woocommerce #review_form #respond input#submit { padding: 0.85em 2em; } /* Star input (p.stars). Same glyph trick as the display rating: WooCommerce's JS adds .selected to the

and .active to the chosen star. */ .woocommerce #review_form #respond p.stars, .woocommerce p.stars { display: inline-flex; gap: 0.15em; margin: 0 0 var(--bb-s-2); line-height: 1; } .woocommerce p.stars a { position: relative; display: inline-block; width: 1.6em; height: 1.5em; margin: 0; overflow: hidden; text-indent: -999em; /* hides Woo's "1"–"5" link text */ text-decoration: none; border: 0; } .woocommerce p.stars a::before { content: "\2605"; position: absolute; top: 0; left: 0; width: 1em; height: 1em; color: var(--bb-navy-500); font-size: 1.5em; line-height: 1; text-align: center; text-indent: 0; transition: color 0.12s var(--bb-ease); } /* Fill everything on hover, then empty the stars after the hovered one. */ .woocommerce p.stars:hover a::before { color: var(--bb-accent); } .woocommerce p.stars a:hover ~ a::before { color: var(--bb-navy-500); } .woocommerce p.stars.selected a.active::before { color: var(--bb-accent); } .woocommerce p.stars.selected a.active ~ a::before { color: var(--bb-navy-500); } .woocommerce p.stars.selected a:not(.active)::before { color: var(--bb-accent); } /* -------------------------------------------------------------------------- 13. RELATED / UP-SELLS / CROSS-SELLS -------------------------------------------------------------------------- */ .woocommerce .related, .woocommerce .upsells, .woocommerce .up-sells, .woocommerce .cross-sells { margin-top: var(--bb-s-7); padding-top: var(--bb-s-6); border-top: 1px solid var(--bb-border); } .woocommerce .related > h2, .woocommerce .upsells > h2, .woocommerce .up-sells > h2, .woocommerce .cross-sells > h2 { margin-bottom: var(--bb-s-5); font-size: var(--bb-t-xl); } .woocommerce .cross-sells { margin-top: 0; padding-top: 0; border-top: 0; } /* -------------------------------------------------------------------------- 14. CART -------------------------------------------------------------------------- */ .woocommerce .woocommerce-cart-form { margin-bottom: var(--bb-s-6); } .woocommerce table.cart img, .woocommerce table.shop_table td.product-thumbnail img { width: 84px; height: 84px; aspect-ratio: 1 / 1; object-fit: cover; background: var(--bb-navy-900); border: 1px solid var(--bb-border); border-radius: var(--bb-radius); } .woocommerce table.cart td.product-remove { width: 48px; text-align: center; } .woocommerce table.cart td.product-thumbnail { width: 100px; } .woocommerce table.cart td.product-price, .woocommerce table.cart td.product-subtotal { white-space: nowrap; } .woocommerce table.cart td.product-subtotal { color: var(--bb-white); font-family: var(--bb-font-display); font-size: var(--bb-t-lg); font-weight: 800; } .woocommerce table.cart td.product-quantity { width: 140px; } /* Coupon + update row. */ .woocommerce table.cart td.actions { padding: var(--bb-s-4); background: var(--bb-navy-900); text-align: right; } .woocommerce table.cart td.actions::after { content: ""; display: block; clear: both; } .woocommerce table.cart td.actions .coupon { display: flex; flex-wrap: wrap; gap: var(--bb-s-2); float: left; padding: 0; border: 0; text-align: left; } .woocommerce table.cart td.actions .coupon label { display: none; } .woocommerce table.cart td.actions .coupon .input-text, .woocommerce table.cart td.actions .coupon input#coupon_code { width: auto; min-width: 190px; padding: 0.72em 1em; margin: 0; font-size: var(--bb-t-sm); } .woocommerce table.cart td.actions > .button, .woocommerce table.cart td.actions button[name="update_cart"] { float: right; } /* Collaterals: cross-sells left, totals right. */ .woocommerce .cart-collaterals { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: var(--bb-s-6); align-items: start; } .woocommerce .cart-collaterals::before, .woocommerce .cart-collaterals::after { content: none; } .woocommerce .cart-collaterals .cross-sells { float: none; width: auto; grid-column: 1; } .woocommerce .cart-collaterals .cart_totals { float: none; width: auto; grid-column: 2; padding: var(--bb-s-5); background: var(--bb-surface); border: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg); } .woocommerce .cart-collaterals .cart_totals > h2 { margin-bottom: var(--bb-s-4); font-size: var(--bb-t-xl); } .woocommerce .cart_totals table.shop_table { margin-bottom: var(--bb-s-4); background: transparent; border: 0; border-radius: 0; } .woocommerce .cart_totals table.shop_table th, .woocommerce .cart_totals table.shop_table td { padding: var(--bb-s-3) 0; background: transparent; border-bottom: 1px solid var(--bb-border); font-size: var(--bb-t-sm); vertical-align: top; } .woocommerce .cart_totals table.shop_table th { width: 42%; color: var(--bb-text-muted); font-family: var(--bb-font-display); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; } .woocommerce .cart_totals table.shop_table td { text-align: right; } .woocommerce .cart_totals table.shop_table tr.order-total th, .woocommerce .cart_totals table.shop_table tr.order-total td { border-bottom: 0; padding-top: var(--bb-s-4); color: var(--bb-white); font-size: var(--bb-t-lg); } .woocommerce .cart_totals table.shop_table tr.order-total td strong { color: var(--bb-accent); font-family: var(--bb-font-display); font-size: var(--bb-t-xl); font-weight: 800; } .woocommerce ul#shipping_method { margin: 0 0 var(--bb-s-2); padding: 0; list-style: none; text-align: left; } .woocommerce ul#shipping_method li { display: flex; align-items: baseline; gap: var(--bb-s-2); margin: 0 0 var(--bb-s-2); padding: 0; } .woocommerce ul#shipping_method li label { margin: 0; color: var(--bb-text); font-family: var(--bb-font-body); font-size: var(--bb-t-sm); font-weight: 400; letter-spacing: normal; text-transform: none; } .woocommerce .woocommerce-shipping-destination { margin: 0 0 var(--bb-s-2); color: var(--bb-text-muted); font-size: var(--bb-t-xs); text-align: left; } .woocommerce .shipping-calculator-button { color: var(--bb-lime-300); font-size: var(--bb-t-sm); } .woocommerce .shipping-calculator-form { margin-top: var(--bb-s-3); } .woocommerce .shipping-calculator-form .form-row { margin-bottom: var(--bb-s-3); } .woocommerce .wc-proceed-to-checkout { padding: 0; } .woocommerce .wc-proceed-to-checkout a.checkout-button { display: flex; width: 100%; padding: 1em 1.5em; font-size: var(--bb-t-base); } .woocommerce .cart-empty { font-size: var(--bb-t-lg); } .woocommerce .return-to-shop { margin-top: var(--bb-s-5); } /* -------------------------------------------------------------------------- 15. CHECKOUT -------------------------------------------------------------------------- */ .woocommerce .woocommerce-form-coupon-toggle, .woocommerce .woocommerce-form-login-toggle { margin-bottom: var(--bb-s-4); } .woocommerce form.checkout_coupon, .woocommerce form.woocommerce-form-login, .woocommerce form.woocommerce-form-register { margin: 0 0 var(--bb-s-6); padding: var(--bb-s-5); background: var(--bb-surface); border: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg); } .woocommerce form.checkout_coupon .form-row { margin-bottom: 0; } /* Two-column checkout: details left, sticky order review right. Children are placed explicitly so a plugin adding its own node cannot scramble the grid. */ @media (min-width: 901px) { .woocommerce form.checkout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--bb-s-4) var(--bb-s-7); align-items: start; } .woocommerce form.checkout > #customer_details { grid-column: 1; grid-row: 1 / 3; } .woocommerce form.checkout > #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; } .woocommerce form.checkout > #order_review { grid-column: 2; grid-row: 2; align-self: start; /* content height, so sticky actually has travel */ position: sticky; top: calc(var(--bb-header-h) + var(--bb-s-4)); } } .woocommerce .col2-set, .woocommerce-page .col2-set { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--bb-s-6); width: auto; margin: 0 0 var(--bb-s-5); } .woocommerce .col2-set::before, .woocommerce .col2-set::after, .woocommerce-page .col2-set::before, .woocommerce-page .col2-set::after { content: none; } .woocommerce .col2-set .col-1, .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-1, .woocommerce-page .col2-set .col-2 { float: none; width: auto; max-width: none; } /* On checkout the two Woo columns stack — billing then shipping — because the whole form already lives in the left half of the page. */ @media (min-width: 901px) { .woocommerce form.checkout #customer_details.col2-set { grid-template-columns: minmax(0, 1fr); gap: var(--bb-s-5); } } .woocommerce .woocommerce-billing-fields h3, .woocommerce .woocommerce-shipping-fields h3, .woocommerce .woocommerce-additional-fields h3, .woocommerce #order_review_heading { margin-bottom: var(--bb-s-4); font-size: var(--bb-t-xl); } .woocommerce .woocommerce-shipping-fields h3 label, .woocommerce #ship-to-different-address label { display: inline-flex; align-items: center; gap: var(--bb-s-2); margin: 0; color: var(--bb-white); font-family: var(--bb-font-display); font-size: var(--bb-t-xl); font-weight: 800; letter-spacing: 0.005em; text-transform: uppercase; } /* Form rows: a two-up grid that respects Woo's first/last/wide classes. */ .woocommerce .woocommerce-billing-fields__field-wrapper, .woocommerce .woocommerce-shipping-fields__field-wrapper, .woocommerce .woocommerce-address-fields__field-wrapper, .woocommerce .woocommerce-additional-fields__field-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--bb-s-4); } .woocommerce .woocommerce-billing-fields__field-wrapper .form-row, .woocommerce .woocommerce-shipping-fields__field-wrapper .form-row, .woocommerce .woocommerce-address-fields__field-wrapper .form-row, .woocommerce .woocommerce-additional-fields__field-wrapper .form-row { grid-column: 1 / -1; } .woocommerce .woocommerce-billing-fields__field-wrapper .form-row-first, .woocommerce .woocommerce-shipping-fields__field-wrapper .form-row-first, .woocommerce .woocommerce-address-fields__field-wrapper .form-row-first { grid-column: 1; } .woocommerce .woocommerce-billing-fields__field-wrapper .form-row-last, .woocommerce .woocommerce-shipping-fields__field-wrapper .form-row-last, .woocommerce .woocommerce-address-fields__field-wrapper .form-row-last { grid-column: 2; } .woocommerce form .form-row { display: flex; flex-direction: column; float: none; width: auto; margin: 0 0 var(--bb-s-4); padding: 0; } .woocommerce form .form-row label { margin-bottom: var(--bb-s-2); font-size: var(--bb-t-xs); letter-spacing: 0.1em; } .woocommerce form .form-row label .required { color: var(--bb-sale); text-decoration: none; border: 0; } .woocommerce form .form-row .woocommerce-input-wrapper { width: 100%; } .woocommerce form .form-row .input-text, .woocommerce form .form-row select, .woocommerce form .form-row textarea { width: 100%; } .woocommerce form .form-row textarea { min-height: 110px; } .woocommerce form .form-row.woocommerce-invalid .input-text, .woocommerce form .form-row.woocommerce-invalid select { border-color: var(--bb-sale); } .woocommerce form .form-row.woocommerce-validated .input-text, .woocommerce form .form-row.woocommerce-validated select { border-color: var(--bb-lime-500); } .woocommerce form .form-row.create-account, .woocommerce form .form-row.woocommerce-form__label-for-checkbox, .woocommerce .woocommerce-form__label-for-checkbox { flex-direction: row; align-items: flex-start; gap: var(--bb-s-2); } .woocommerce .woocommerce-form__label-for-checkbox, .woocommerce .woocommerce-form__label-for-checkbox span { margin: 0; color: var(--bb-text); font-family: var(--bb-font-body); font-size: var(--bb-t-sm); font-weight: 400; letter-spacing: normal; text-transform: none; } .woocommerce form .form-row .description, .woocommerce form .form-row small { margin-top: var(--bb-s-2); color: var(--bb-text-muted); font-size: var(--bb-t-xs); } .woocommerce .woocommerce-privacy-policy-text { color: var(--bb-text-muted); font-size: var(--bb-t-sm); } /* Order review table + payment box. */ .woocommerce #order_review, .woocommerce .woocommerce-checkout-review-order { padding: var(--bb-s-5); background: var(--bb-surface); border: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg); } .woocommerce table.woocommerce-checkout-review-order-table { margin-bottom: var(--bb-s-4); background: transparent; border: 0; border-radius: 0; } .woocommerce table.woocommerce-checkout-review-order-table th, .woocommerce table.woocommerce-checkout-review-order-table td { padding: var(--bb-s-3) 0; background: transparent; border-bottom: 1px solid var(--bb-border); font-size: var(--bb-t-sm); vertical-align: top; } .woocommerce table.woocommerce-checkout-review-order-table thead th { padding-top: 0; background: transparent; color: var(--bb-text-muted); font-size: var(--bb-t-xs); } .woocommerce table.woocommerce-checkout-review-order-table td.product-total, .woocommerce table.woocommerce-checkout-review-order-table th.product-total, .woocommerce table.woocommerce-checkout-review-order-table tfoot td { text-align: right; } .woocommerce table.woocommerce-checkout-review-order-table td.product-name { color: var(--bb-text); font-family: var(--bb-font-body); font-size: var(--bb-t-sm); } .woocommerce table.woocommerce-checkout-review-order-table td.product-name .product-quantity { color: var(--bb-accent); font-weight: 600; } .woocommerce table.woocommerce-checkout-review-order-table tfoot th { background: transparent; color: var(--bb-text-muted); font-family: var(--bb-font-display); letter-spacing: 0.1em; text-transform: uppercase; } .woocommerce table.woocommerce-checkout-review-order-table tfoot tr.order-total th, .woocommerce table.woocommerce-checkout-review-order-table tfoot tr.order-total td { border-bottom: 0; color: var(--bb-white); } .woocommerce table.woocommerce-checkout-review-order-table tfoot tr.order-total td strong { color: var(--bb-accent); font-family: var(--bb-font-display); font-size: var(--bb-t-xl); font-weight: 800; } .woocommerce #payment, .woocommerce-checkout #payment { padding: 0; background: transparent; border-radius: 0; } .woocommerce #payment ul.payment_methods { margin: 0 0 var(--bb-s-4); padding: 0 0 var(--bb-s-4); border-bottom: 1px solid var(--bb-border); list-style: none; } .woocommerce #payment ul.payment_methods li { margin: 0 0 var(--bb-s-3); padding: 0; list-style: none; } .woocommerce #payment ul.payment_methods li:last-child { margin-bottom: 0; } .woocommerce #payment ul.payment_methods li label { display: inline-flex; align-items: center; gap: var(--bb-s-2); margin: 0; color: var(--bb-white); font-family: var(--bb-font-display); font-size: var(--bb-t-base); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .woocommerce #payment ul.payment_methods li img { display: inline-block; max-height: 26px; width: auto; margin-left: var(--bb-s-2); } .woocommerce #payment div.payment_box { position: relative; margin: var(--bb-s-3) 0 0; padding: var(--bb-s-4); background: var(--bb-navy-900); border: 1px solid var(--bb-border); border-radius: var(--bb-radius); color: var(--bb-text-muted); font-size: var(--bb-t-sm); } .woocommerce #payment div.payment_box::before, .woocommerce #payment div.payment_box::after { content: none; } .woocommerce #payment div.payment_box p:last-child { margin-bottom: 0; } .woocommerce #payment div.form-row.place-order { margin: var(--bb-s-4) 0 0; padding: 0; } .woocommerce #payment .woocommerce-terms-and-conditions-wrapper { margin-bottom: var(--bb-s-4); } .woocommerce #payment .woocommerce-terms-and-conditions { max-height: 200px; margin-bottom: var(--bb-s-3); padding: var(--bb-s-4); overflow-y: auto; background: var(--bb-navy-900); border: 1px solid var(--bb-border); border-radius: var(--bb-radius); font-size: var(--bb-t-sm); } .woocommerce #place_order { display: flex; width: 100%; padding: 1em 1.5em; font-size: var(--bb-t-base); } /* -------------------------------------------------------------------------- 16. ORDER RECEIVED + ORDER DETAILS -------------------------------------------------------------------------- */ .woocommerce .woocommerce-thankyou-order-received { margin-bottom: var(--bb-s-5); color: var(--bb-white); font-family: var(--bb-font-display); font-size: var(--bb-t-xl); font-weight: 800; text-transform: uppercase; } .woocommerce ul.order_details, .woocommerce ul.woocommerce-order-overview { display: flex; flex-wrap: wrap; gap: var(--bb-s-4) var(--bb-s-6); margin: 0 0 var(--bb-s-6); padding: var(--bb-s-5); background: var(--bb-surface); border: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg); list-style: none; } .woocommerce ul.order_details li { margin: 0; padding: 0; border: 0; color: var(--bb-text-muted); font-family: var(--bb-font-display); font-size: var(--bb-t-xs); letter-spacing: 0.12em; text-transform: uppercase; list-style: none; } .woocommerce ul.order_details li strong { display: block; margin-top: var(--bb-s-1); color: var(--bb-white); font-size: var(--bb-t-lg); letter-spacing: 0.02em; } .woocommerce .woocommerce-order-details, .woocommerce .woocommerce-customer-details { margin-bottom: var(--bb-s-6); } .woocommerce .woocommerce-order-details__title, .woocommerce .woocommerce-column__title, .woocommerce .woocommerce-customer-details h2 { margin-bottom: var(--bb-s-4); font-size: var(--bb-t-xl); } .woocommerce .woocommerce-customer-details address { padding: var(--bb-s-4); background: var(--bb-surface); border: 1px solid var(--bb-border); border-radius: var(--bb-radius); color: var(--bb-text-muted); font-style: normal; line-height: 1.7; } .woocommerce .woocommerce-order-downloads, .woocommerce .woocommerce-bacs-bank-details { margin-bottom: var(--bb-s-6); } .woocommerce .woocommerce-bacs-bank-details ul.wc-bacs-bank-details { padding: var(--bb-s-4); background: var(--bb-surface); border: 1px solid var(--bb-border); border-radius: var(--bb-radius); list-style: none; } /* -------------------------------------------------------------------------- 17. MY ACCOUNT -------------------------------------------------------------------------- */ .woocommerce-account .woocommerce { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--bb-s-6); } /* Logged out: the login / register forms take the full width. */ .woocommerce-account .woocommerce > .woocommerce-form-login, .woocommerce-account .woocommerce > .woocommerce-form-register, .woocommerce-account .woocommerce > .u-columns, .woocommerce-account .woocommerce > .woocommerce-notices-wrapper, .woocommerce-account .woocommerce > .woocommerce-ResetPassword { flex: 1 1 100%; } .woocommerce-account .woocommerce-MyAccount-navigation { flex: 0 0 240px; max-width: 100%; padding: var(--bb-s-3); background: var(--bb-surface); border: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg); } .woocommerce-account .woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; } .woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; border-bottom: 1px solid var(--bb-border); } .woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; } .woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: var(--bb-s-3); border-left: 3px solid transparent; color: var(--bb-text-muted); font-family: var(--bb-font-display); font-size: var(--bb-t-sm); font-weight: 700; letter-spacing: 0.1em; text-decoration: none; text-transform: uppercase; transition: color 0.16s var(--bb-ease), border-color 0.16s var(--bb-ease), background-color 0.16s var(--bb-ease); } .woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--bb-navy-900); color: var(--bb-lime-300); } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--bb-navy-900); border-left-color: var(--bb-accent); color: var(--bb-white); } .woocommerce-account .woocommerce-MyAccount-content { flex: 1 1 340px; min-width: 0; } .woocommerce-account .woocommerce-MyAccount-content > p:first-child { margin-top: 0; } .woocommerce-account .woocommerce-MyAccount-content mark { background: none; color: var(--bb-accent); font-weight: 600; } .woocommerce table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .button, .woocommerce table.my_account_orders td .button { padding: 0.5em 1em; font-size: var(--bb-t-xs); } .woocommerce .woocommerce-order-status, .woocommerce table.shop_table td.woocommerce-orders-table__cell-order-status { font-family: var(--bb-font-display); letter-spacing: 0.08em; text-transform: uppercase; } .woocommerce .woocommerce-Addresses .woocommerce-Address { padding: var(--bb-s-5); background: var(--bb-surface); border: 1px solid var(--bb-border); border-radius: var(--bb-radius-lg); } .woocommerce .woocommerce-Address-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--bb-s-3); margin-bottom: var(--bb-s-3); } .woocommerce .woocommerce-Address-title h2, .woocommerce .woocommerce-Address-title h3 { margin: 0; font-size: var(--bb-t-lg); } .woocommerce .woocommerce-Address-title a.edit { color: var(--bb-lime-300); font-family: var(--bb-font-display); font-size: var(--bb-t-xs); letter-spacing: 0.12em; text-transform: uppercase; } .woocommerce .woocommerce-Address address { color: var(--bb-text-muted); font-style: normal; line-height: 1.7; } .woocommerce .woocommerce-EditAccountForm fieldset { margin: var(--bb-s-5) 0 0; padding: var(--bb-s-5) 0 0; border: 0; border-top: 1px solid var(--bb-border); } .woocommerce .woocommerce-EditAccountForm fieldset legend { padding: 0; color: var(--bb-white); font-family: var(--bb-font-display); font-size: var(--bb-t-lg); font-weight: 800; text-transform: uppercase; } .woocommerce .woocommerce-password-strength { margin-top: var(--bb-s-2); padding: var(--bb-s-2) var(--bb-s-3); border-radius: var(--bb-radius); font-family: var(--bb-font-display); font-size: var(--bb-t-xs); letter-spacing: 0.1em; text-align: center; text-transform: uppercase; } .woocommerce .woocommerce-password-strength.short, .woocommerce .woocommerce-password-strength.bad { background: color-mix(in srgb, var(--bb-sale) 20%, var(--bb-surface)); color: var(--bb-sale); } .woocommerce .woocommerce-password-strength.good { background: color-mix(in srgb, var(--bb-water-500) 22%, var(--bb-surface)); color: var(--bb-water-400); } .woocommerce .woocommerce-password-strength.strong { background: color-mix(in srgb, var(--bb-lime-400) 18%, var(--bb-surface)); color: var(--bb-lime-300); } .woocommerce .woocommerce-password-hint { display: block; margin-top: var(--bb-s-2); color: var(--bb-text-muted); font-size: var(--bb-t-xs); } .woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme { margin-top: var(--bb-s-2); } .woocommerce .woocommerce-form-login .lost_password { margin-top: var(--bb-s-3); font-size: var(--bb-t-sm); } /* -------------------------------------------------------------------------- 18. WIDGETS (shop sidebar) -------------------------------------------------------------------------- */ /* Price filter — jQuery UI slider markup, restyled from scratch. */ .woocommerce .widget_price_filter .price_slider_wrapper { margin-bottom: var(--bb-s-4); } .woocommerce .widget_price_filter .price_slider, .woocommerce .widget_price_filter .ui-slider { position: relative; height: 6px; margin: var(--bb-s-3) 0 var(--bb-s-5); background: var(--bb-navy-900); border: 1px solid var(--bb-border); border-radius: 100px; text-align: left; } .woocommerce .widget_price_filter .ui-slider .ui-slider-range { position: absolute; top: 0; z-index: 1; display: block; height: 100%; background: var(--bb-accent); border: 0; border-radius: 100px; } .woocommerce .widget_price_filter .ui-slider .ui-slider-handle { position: absolute; top: -8px; z-index: 2; width: 20px; height: 20px; margin-left: -10px; background: var(--bb-lime-300); border: 2px solid var(--bb-navy-900); border-radius: 50%; cursor: ew-resize; outline: none; } .woocommerce .widget_price_filter .ui-slider .ui-slider-handle:focus-visible { box-shadow: var(--bb-shadow-glow); } .woocommerce .widget_price_filter .price_slider_amount { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bb-s-3); font-size: var(--bb-t-sm); } .woocommerce .widget_price_filter .price_slider_amount .price_label { flex: 1 1 auto; color: var(--bb-text-muted); text-align: left; } .woocommerce .widget_price_filter .price_slider_amount .price_label span { color: var(--bb-white); } .woocommerce .widget_price_filter .price_slider_amount .button { float: none; padding: 0.55em 1.2em; font-size: var(--bb-t-xs); } .woocommerce .widget_price_filter .price_slider_amount input[type="text"] { display: none; } /* Layered nav / attribute + category filters. */ .woocommerce .woocommerce-widget-layered-nav-list, .woocommerce ul.product-categories, .woocommerce .widget_product_categories ul, .woocommerce .widget_layered_nav ul { margin: 0; padding: 0; list-style: none; } .woocommerce .woocommerce-widget-layered-nav-list li, .woocommerce ul.product-categories li, .woocommerce .widget_product_categories ul li, .woocommerce .widget_layered_nav ul li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bb-s-2); margin: 0; padding: var(--bb-s-2) 0; border-bottom: 1px solid var(--bb-border); font-size: var(--bb-t-sm); } .woocommerce .woocommerce-widget-layered-nav-list li:last-child, .woocommerce ul.product-categories li:last-child { border-bottom: 0; } .woocommerce .woocommerce-widget-layered-nav-list li a, .woocommerce ul.product-categories li a, .woocommerce .widget_product_categories ul li a { color: var(--bb-text); text-decoration: none; } .woocommerce .woocommerce-widget-layered-nav-list li a:hover, .woocommerce ul.product-categories li a:hover { color: var(--bb-lime-300); } .woocommerce .woocommerce-widget-layered-nav-list li .count, .woocommerce ul.product-categories li .count { color: var(--bb-text-muted); font-family: var(--bb-font-display); font-size: var(--bb-t-xs); } .woocommerce .woocommerce-widget-layered-nav-list__item--chosen a, .woocommerce li.chosen a { color: var(--bb-accent); font-weight: 600; } .woocommerce ul.product-categories li ul.children { flex: 1 1 100%; margin: var(--bb-s-2) 0 0 var(--bb-s-4); padding: 0; } .woocommerce .woocommerce-widget-layered-nav-dropdown__submit { margin-top: var(--bb-s-3); } .woocommerce .widget_layered_nav_filters ul li a, .woocommerce .woocommerce-widget-layered-nav-list__item--chosen a { text-decoration: none; } /* Rating filter widget. */ .woocommerce .widget_rating_filter ul { margin: 0; padding: 0; list-style: none; } .woocommerce .widget_rating_filter ul li { display: flex; align-items: center; gap: var(--bb-s-2); margin: 0; padding: var(--bb-s-2) 0; border-bottom: 1px solid var(--bb-border); } .woocommerce .widget_rating_filter ul li a { display: flex; align-items: center; gap: var(--bb-s-2); color: var(--bb-text-muted); font-size: var(--bb-t-sm); text-decoration: none; } .woocommerce .widget_rating_filter ul li.chosen a { color: var(--bb-accent); } /* Product list widgets — recent / featured / top rated / mini cart. */ .woocommerce ul.product_list_widget, .woocommerce ul.cart_list { margin: 0; padding: 0; list-style: none; } .woocommerce ul.product_list_widget li, .woocommerce ul.cart_list li { display: flow-root; margin: 0; padding: var(--bb-s-3) 0; border-bottom: 1px solid var(--bb-border); font-size: var(--bb-t-sm); list-style: none; } .woocommerce ul.product_list_widget li:last-child, .woocommerce ul.cart_list li:last-child { border-bottom: 0; } .woocommerce ul.product_list_widget li img, .woocommerce ul.cart_list li img { float: left; width: 58px; height: 58px; margin: 0 var(--bb-s-3) 0 0; aspect-ratio: 1 / 1; object-fit: cover; background: var(--bb-navy-900); border: 1px solid var(--bb-border); border-radius: var(--bb-radius); box-shadow: none; } .woocommerce ul.product_list_widget li a, .woocommerce ul.cart_list li a { display: block; color: var(--bb-white); font-family: var(--bb-font-display); font-size: var(--bb-t-base); font-weight: 700; line-height: 1.2; text-decoration: none; text-transform: uppercase; } .woocommerce ul.product_list_widget li a:hover, .woocommerce ul.cart_list li a:hover { color: var(--bb-lime-300); } .woocommerce ul.product_list_widget li .woocommerce-Price-amount, .woocommerce ul.cart_list li .woocommerce-Price-amount { color: var(--bb-accent); font-family: var(--bb-font-display); font-weight: 700; } .woocommerce ul.product_list_widget li .star-rating { margin: var(--bb-s-1) 0; } .woocommerce ul.product_list_widget li .reviewer { color: var(--bb-text-muted); font-size: var(--bb-t-xs); } .woocommerce ul.product_list_widget li ins { background: none; text-decoration: none; } .woocommerce ul.product_list_widget li del { color: var(--bb-text-muted); opacity: 0.8; } /* Mini cart. */ .woocommerce .widget_shopping_cart ul.cart_list li, .woocommerce.widget_shopping_cart ul.cart_list li { position: relative; padding-left: var(--bb-s-6); } .woocommerce .widget_shopping_cart ul.cart_list li a.remove, .woocommerce.widget_shopping_cart ul.cart_list li a.remove { position: absolute; top: var(--bb-s-3); left: 0; width: 22px; height: 22px; font-size: var(--bb-t-base); } .woocommerce .widget_shopping_cart .quantity, .woocommerce.widget_shopping_cart .quantity { display: block; background: none; border: 0; color: var(--bb-text-muted); font-size: var(--bb-t-xs); } .woocommerce .widget_shopping_cart p.total, .woocommerce.widget_shopping_cart p.total { margin: var(--bb-s-3) 0; padding-top: var(--bb-s-3); border-top: 1px solid var(--bb-border); color: var(--bb-white); font-family: var(--bb-font-display); letter-spacing: 0.08em; text-transform: uppercase; } .woocommerce .widget_shopping_cart p.buttons, .woocommerce.widget_shopping_cart p.buttons { display: flex; flex-wrap: wrap; gap: var(--bb-s-2); margin: 0; } .woocommerce .widget_shopping_cart p.buttons .button, .woocommerce.widget_shopping_cart p.buttons .button { flex: 1 1 auto; } /* Product search widget. */ .woocommerce .woocommerce-product-search, .woocommerce form.woocommerce-product-search { display: flex; gap: var(--bb-s-2); } .woocommerce .woocommerce-product-search .search-field { flex: 1 1 auto; min-width: 0; } .woocommerce .woocommerce-product-search button { flex: 0 0 auto; } /* -------------------------------------------------------------------------- 19. PAGINATION -------------------------------------------------------------------------- */ .woocommerce nav.woocommerce-pagination { margin-top: var(--bb-s-7); text-align: center; } .woocommerce nav.woocommerce-pagination ul { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: var(--bb-s-2); margin: 0; padding: 0; border: 0; list-style: none; } .woocommerce nav.woocommerce-pagination ul li { margin: 0; padding: 0; border: 0; overflow: visible; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { display: grid; place-items: center; min-width: 46px; height: 46px; padding-inline: var(--bb-s-3); background: var(--bb-surface); border: 1px solid var(--bb-border); border-radius: var(--bb-radius); color: var(--bb-mist); font-family: var(--bb-font-display); font-weight: 700; text-decoration: none; transition: background-color 0.16s var(--bb-ease), border-color 0.16s var(--bb-ease), color 0.16s var(--bb-ease); } .woocommerce nav.woocommerce-pagination ul li a:hover, .woocommerce nav.woocommerce-pagination ul li a:focus-visible { background: var(--bb-surface); border-color: var(--bb-lime-400); color: var(--bb-lime-300); } .woocommerce nav.woocommerce-pagination ul li span.current { background: var(--bb-accent); border-color: var(--bb-accent); color: var(--bb-accent-ink); } /* -------------------------------------------------------------------------- 20. OVERLAYS, SPINNERS, SELECT2 -------------------------------------------------------------------------- */ /* blockUI writes inline styles, so these two need !important to land. */ .woocommerce .blockUI.blockOverlay, .woocommerce .loader { position: relative; background: var(--bb-navy-900) !important; opacity: 0.55 !important; } .woocommerce .blockUI.blockOverlay::before, .woocommerce .loader::before { content: ""; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 3px solid color-mix(in srgb, var(--bb-mist) 30%, transparent); border-top-color: var(--bb-accent); border-radius: 50%; background: none; animation: bb-spin 0.8s linear infinite; } /* select2 is appended to , so these selectors are deliberately global — the whole stylesheet only loads on shop views. */ .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple { height: auto; min-height: 0; padding: 0.7em 1em; background: var(--bb-navy-900); border: 1px solid var(--bb-border); border-radius: var(--bb-radius); } .select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--bb-lime-400); box-shadow: var(--bb-shadow-glow); } .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0; color: var(--bb-white); line-height: 1.5; } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--bb-steel); } .select2-container--default .select2-selection--single .select2-selection__arrow { top: 0; right: 0.7em; height: 100%; } .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--bb-accent) transparent transparent; } .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--bb-accent); } .select2-dropdown { background: var(--bb-navy-900); border: 1px solid var(--bb-border); border-radius: var(--bb-radius); color: var(--bb-text); } .select2-container--default .select2-search--dropdown .select2-search__field { padding: 0.55em 0.75em; background: var(--bb-navy-800); border: 1px solid var(--bb-border); border-radius: var(--bb-radius); color: var(--bb-white); } .select2-container--default .select2-results__option { padding: 0.5em 0.85em; color: var(--bb-text); font-size: var(--bb-t-sm); } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--bb-accent); color: var(--bb-accent-ink); } .select2-container--default .select2-results__option[aria-selected="true"], .select2-container--default .select2-results__option[data-selected="true"] { background: var(--bb-surface-raised); color: var(--bb-white); } /* -------------------------------------------------------------------------- 21. RESPONSIVE — 900px -------------------------------------------------------------------------- */ @media (max-width: 900px) { .bb-shop-layout, .bb-shop-layout--sidebar { grid-template-columns: minmax(0, 1fr); } .woocommerce div.product { grid-template-columns: minmax(0, 1fr); gap: var(--bb-s-6); } .woocommerce div.product > div.images, .woocommerce div.product > .woocommerce-product-gallery, .woocommerce div.product > div.summary, .woocommerce div.product > .woocommerce-tabs, .woocommerce div.product > .related, .woocommerce div.product > .upsells, .woocommerce div.product > .up-sells { grid-column: 1; } .woocommerce .cart-collaterals { grid-template-columns: minmax(0, 1fr); } .woocommerce .cart-collaterals .cross-sells, .woocommerce .cart-collaterals .cart_totals { grid-column: 1; } /* Cart stays a table but scrolls sideways instead of crushing columns. */ .woocommerce .woocommerce-cart-form { overflow-x: auto; -webkit-overflow-scrolling: touch; } .woocommerce table.shop_table.cart { min-width: 620px; } .woocommerce #order_review, .woocommerce .woocommerce-checkout-review-order, .woocommerce .woocommerce-MyAccount-content, .woocommerce .woocommerce-order-details, .woocommerce .woocommerce-order-downloads { overflow-x: auto; -webkit-overflow-scrolling: touch; } .woocommerce table.woocommerce-orders-table, .woocommerce table.woocommerce-table--order-details, .woocommerce table.woocommerce-table--order-downloads { min-width: 520px; } .woocommerce-account .woocommerce-MyAccount-navigation { flex: 1 1 100%; } .woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: var(--bb-s-1); } .woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 0; } .woocommerce-account .woocommerce-MyAccount-navigation li a { padding: var(--bb-s-2) var(--bb-s-3); border-left: 0; border-bottom: 3px solid transparent; } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { border-left: 0; border-bottom-color: var(--bb-accent); } .woocommerce div.product div.images .flex-control-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* -------------------------------------------------------------------------- 22. RESPONSIVE — 600px -------------------------------------------------------------------------- */ @media (max-width: 600px) { .woocommerce ul.products { grid-template-columns: repeat(auto-fill, minmax(min(100%, 165px), 1fr)); gap: var(--bb-s-4); } .woocommerce ul.products li.product { padding-bottom: var(--bb-s-4); } .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h2, .woocommerce ul.products li.product .price, .woocommerce ul.products li.product .star-rating { padding-inline: var(--bb-s-4); } .woocommerce ul.products li.product .star-rating { margin-inline: var(--bb-s-4); } .woocommerce ul.products li.product .button { align-self: stretch; margin: var(--bb-s-3) var(--bb-s-4) 0; padding: 0.7em 1em; font-size: var(--bb-t-xs); } .woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { float: none; width: 100%; margin-bottom: var(--bb-s-3); } .woocommerce .woocommerce-ordering select { width: 100%; min-width: 0; } .woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: var(--bb-s-3); } .woocommerce table.shop_table.cart { min-width: 560px; } .woocommerce table.cart img, .woocommerce table.shop_table td.product-thumbnail img { width: 60px; height: 60px; } .woocommerce table.cart td.product-thumbnail { width: 76px; } .woocommerce table.cart td.actions { text-align: left; } .woocommerce table.cart td.actions .coupon { float: none; margin-bottom: var(--bb-s-3); } .woocommerce table.cart td.actions .coupon .input-text, .woocommerce table.cart td.actions .coupon input#coupon_code { flex: 1 1 auto; min-width: 0; } .woocommerce table.cart td.actions > .button, .woocommerce table.cart td.actions button[name="update_cart"] { float: none; width: 100%; } .woocommerce .woocommerce-billing-fields__field-wrapper, .woocommerce .woocommerce-shipping-fields__field-wrapper, .woocommerce .woocommerce-address-fields__field-wrapper, .woocommerce .woocommerce-additional-fields__field-wrapper { grid-template-columns: minmax(0, 1fr); } .woocommerce .woocommerce-billing-fields__field-wrapper .form-row-first, .woocommerce .woocommerce-billing-fields__field-wrapper .form-row-last, .woocommerce .woocommerce-shipping-fields__field-wrapper .form-row-first, .woocommerce .woocommerce-shipping-fields__field-wrapper .form-row-last, .woocommerce .woocommerce-address-fields__field-wrapper .form-row-first, .woocommerce .woocommerce-address-fields__field-wrapper .form-row-last { grid-column: 1; } .woocommerce div.product .product_title { font-size: var(--bb-t-xl); } .woocommerce div.product form.cart { padding: var(--bb-s-4); } .woocommerce div.product form.cart button.single_add_to_cart_button { flex: 1 1 100%; } .woocommerce div.product .woocommerce-tabs ul.tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { white-space: nowrap; } .woocommerce div.product div.images .flex-control-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); } .woocommerce #reviews #comments ol.commentlist li .comment_container { grid-template-columns: 40px minmax(0, 1fr); gap: var(--bb-s-3); padding: var(--bb-s-4); } .woocommerce #reviews #comments ol.commentlist li img.avatar { width: 40px; height: 40px; } .woocommerce ul.order_details, .woocommerce ul.woocommerce-order-overview { gap: var(--bb-s-3); padding: var(--bb-s-4); } .woocommerce ul.order_details li { flex: 1 1 100%; } .woocommerce .woocommerce-message .button, .woocommerce .woocommerce-info .button, .woocommerce .woocommerce-error .button { float: none; display: flex; margin: var(--bb-s-3) 0 0; } } /* -------------------------------------------------------------------------- 23. REDUCED MOTION + PRINT -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .woocommerce ul.products li.product:hover, .woocommerce ul.products li.product:hover img, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce button.single_add_to_cart_button:hover, .woocommerce a.checkout-button:hover, .woocommerce #place_order:hover { transform: none; } .woocommerce a.button.loading::after, .woocommerce button.button.loading::after, .woocommerce input.button.loading::after, .woocommerce .blockUI.blockOverlay::before, .woocommerce .loader::before { animation: none; } } @media print { .woocommerce .woocommerce-ordering, .woocommerce .woocommerce-result-count, .woocommerce nav.woocommerce-pagination, .woocommerce .related, .woocommerce .upsells, .woocommerce .up-sells, .woocommerce .cross-sells, .woocommerce-store-notice { display: none !important; } .woocommerce table.shop_table, .woocommerce ul.order_details { background: none; border-color: currentColor; } } /* ========================================================================== 22. ADDITIONS — post-audit fixes ========================================================================== */ /* * Cart / Checkout / My Account container width. * * These three are ordinary WordPress pages, not WooCommerce-templated views: * WC_Template_Loader only claims single-product, product taxonomies and the * shop archive. So they render through page.php inside .bb-wrap--narrow, which * is 760px — while the checkout grid in section 14 above switches to two * columns at 901px and expects the full 1240px shell. Left alone, the * highest-value page on the site lays out in roughly half the width its own * stylesheet was written for. */ body.woocommerce-cart .bb-wrap--narrow, body.woocommerce-checkout .bb-wrap--narrow, body.woocommerce-account .bb-wrap--narrow { width: min(100% - 2.5rem, var(--bb-wrap)); } /* * Show/hide password toggle. * * WooCommerce injects this control into every password field (login, register, * checkout account creation, password reset). Its only styles live in the * woocommerce-general stylesheet, which the theme dequeues, and the glyph comes * from the WooCommerce icon font, which the theme deliberately does not load. * Without the rules below it renders as an unpositioned, invisible click target. * * The eye is a CSS mask rather than a background image so it inherits * currentColor and follows the field's focus state. */ .woocommerce form .password-input, .woocommerce-page form .password-input { position: relative; display: block; } .woocommerce form .show-password-input, .woocommerce-page form .show-password-input { position: absolute; top: 50%; right: 0.85em; transform: translateY(-50%); z-index: 2; width: 1.35em; height: 1.35em; color: var(--bb-steel); cursor: pointer; transition: color 0.16s var(--bb-ease); } .woocommerce form .show-password-input:hover, .woocommerce form .show-password-input.display-password, .woocommerce-page form .show-password-input:hover, .woocommerce-page form .show-password-input.display-password { color: var(--bb-lime-400); } .woocommerce form .show-password-input::after, .woocommerce-page form .show-password-input::after { content: ""; display: block; width: 100%; height: 100%; background-color: currentColor; -webkit-mask: var(--bb-eye-mask) center / contain no-repeat; mask: var(--bb-eye-mask) center / contain no-repeat; } :root { --bb-eye-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); } /* Password fields need room for the toggle so text never runs under it. */ .woocommerce form .password-input input[type="password"], .woocommerce form .password-input input[type="text"], .woocommerce-page form .password-input input[type="password"], .woocommerce-page form .password-input input[type="text"] { padding-right: 2.8em; }