/* Bright Steady — frontend styles. */ /* Shared page padding ------------------------------------------------- */ .bs-page-padding, .bs-page-padding-x { /* WordPress's "Root Padding Aware Alignments" feature applies its own left/right padding rule to .is-layout-constrained.has-global-padding elements (via an undefined --wp--style--root--padding-* variable, which resolves to 0), beating a plain class on specificity. */ padding-left: var(--wp--preset--spacing--5) !important; padding-right: var(--wp--preset--spacing--5) !important; } .bs-page-padding { padding-top: var(--wp--preset--spacing--2) !important; padding-bottom: var(--wp--preset--spacing--2) !important; } main.bs-page-padding { background: var(--wp--preset--color--white); } body { background: var(--wp--preset--color--white); } /* Home page ------------------------------------------------------------- */ /* templates/front-page.html gives
no bs-page-padding class, so the banner (first content group) already runs edge-to-edge with no CSS override needed. The content group below the banner re-applies the inset directly via .bs-page-padding-x so the rest of the page still reads at the normal margin. */ /* The page-title H1 is kept in the markup (SEO/accessibility want exactly one H1 per page) but hidden visually — the banner's own "Bright Steady" wordmark already serves that role above the fold. Product-card titles share the same wp-block-post-title class, so they're explicitly excluded here. */ body.home .wp-block-post-title:not(.wp-block-product-title) { display: none; } /* WP core's actual rule is ":root :where(.is-layout-flow) > *" — :where() zeroes its own specificity, but the leading :root pseudo-class outside it doesn't, giving the whole selector a real 0-1-0. A bare element selector (0-0-1) can never outrank that regardless of how many element selectors are chained, so !important is the only reliable way to beat it here (the earlier body.home-scoped version only worked by coincidence, since body.home added just enough specificity — 0-1-1 — which broke the moment it was generalized to a bare "main" selector site-wide). */ main { margin-block-start: 0 !important; } /* Home banner — sized to the source image's own 1983×793 ratio so background-size:cover never crops it more aggressively than intended, at any viewport width. */ .bs-home-banner { aspect-ratio: 1983 / 793; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; padding: var(--wp--preset--spacing--4); } /* !important: WP core's own constrained-layout centering rule (.is-layout-constrained > :where(...)) sets both margins to auto !important, which otherwise centers this instead of pushing it flush right — true at every breakpoint, not just desktop. Capped rather than 100% on narrow screens so it doesn't swallow the whole banner photo. */ .bs-home-banner-buttons.wp-block-buttons { width: min(220px, 55%); margin-left: auto !important; margin-right: 0 !important; } /* The button's own em-based padding (theme.json) scales with font-size, so shrinking font-size is what actually shrinks the pill on narrow screens — the container width above only bounds max extent, since a nowrap button label won't shrink below its own min-content width. */ .bs-home-banner-buttons .wp-block-button__link { font-size: var(--wp--preset--font-size--sm); } @media (min-width: 992px) { .bs-home-banner { padding: var(--wp--preset--spacing--6); } /* Fixed 992px, centered — confirmed directly against the live page. !important: overrides WP core's own constrained-layout margin:auto rule (same values here, but kept explicit since this is the deliberate choice rather than an incidental default). */ .bs-home-banner-buttons.wp-block-buttons { width: 992px; max-width: 992px; margin-left: auto !important; margin-right: auto !important; } .bs-home-banner-buttons .wp-block-button__link { font-size: var(--wp--preset--font-size--base); } } /* Native Accordion block — theme.json's global h3 style (clamp 1.4rem–2rem, meant for real section headings) was bleeding into

, making every accordion toggle title oversized. No dedicated small-heading class existed yet; this is it, scoped to the accordion block specifically rather than a general h3 override (which would affect real h3 headings elsewhere). */ h3.wp-block-accordion-heading { font-size: var(--wp--preset--font-size--md); color: var(--wp--preset--color--navy-950); } /* Tile — generic content box (e.g. FAQ items, callouts) ---------------- */ .bs-tile { background: var(--wp--preset--color--cream-50); border-radius: var(--wp--custom--radius--md); padding: var(--wp--preset--spacing--5); } /* Header & footer: always full-width, never capped by page-level width rules */ header.wp-block-group, footer.wp-block-group { max-width: none !important; width: 100% !important; } header.wp-block-group { background: var(--wp--preset--color--cream-50); } /* The header itself gets no top padding — the shipping bar (its first child) sits flush at the true top instead, with its own margin-bottom providing the gap before .bs-header-row. This existed as a negative margin-top on .bs-shipping before, escaping the header's own padding-top (from the shared .bs-page-padding class) — but a negative margin pulling a child above its parent's own top border edge doesn't expand that parent's box, so once the header went sticky (position: sticky; top: 0) for the mobile hide/reveal-on-scroll behavior, the "stuck" header's box got pinned with ITS OWN top edge at viewport y:0, pushing the negative-margined shipping bar to negative Y — clipped above the viewport, hence only a sliver visible on scroll-up. Removing the padding here instead of fighting it avoids the conflict entirely. !important: beats the shared .bs-page-padding rule's own !important. */ header.bs-page-padding { padding-top: 0 !important; } /* Shipping bar: first child of the header, pulled out past the header's .bs-page-padding so it runs edge to edge horizontally. The tagline span drops on narrow screens so the nowrap line doesn't overflow. Margins are longhand, not shorthand, on purpose: SG Optimizer's CSS minifier strips the whitespace between two adjacent calc() expressions in a space-separated shorthand value (e.g. "calc(...) calc(...)" becomes "calc(...)calc(...)"), which is invalid CSS — the browser silently drops the whole declaration. Each longhand property only ever has one value, so there's no adjacent-calc() pattern left to break. No margin-top here any more — the header has no top padding left to escape, and WP core's own ":root :where(.is-layout-flow) > :first-child" rule already forces margin-block-start: 0 on first children like this one, which is exactly what's wanted now. */ .bs-shipping { margin-right: calc(-1 * var(--wp--preset--spacing--5)); margin-bottom: var(--wp--preset--spacing--2); margin-left: calc(-1 * var(--wp--preset--spacing--5)); padding: 7px 15px; background-color: var(--wp--preset--color--navy-800); color: var(--wp--preset--color--white); font-size: 11px; line-height: 1.4; letter-spacing: 0.05em; text-align: center; text-transform: uppercase; white-space: nowrap; } @media (max-width: 479px) { .bs-shipping span { display: none; } } /* Mobile: sticky header that hides on scroll down (more room for content) and slides back in immediately on scroll up (see header-scroll.js) — z-index kept below the search overlay (100) and size chart modal (110) so both still stack above it. */ @media (max-width: 991px) { header.wp-block-group { position: sticky; top: 0; z-index: 90; transition: transform 0.25s ease; } header.wp-block-group.bs-header--hidden { transform: translateY(-100%); } } @media (prefers-reduced-motion: reduce) { header.wp-block-group { transition: none; } } /* Main menu: core Navigation block's overlay, restyled as a left-side drawer */ .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--wp--preset--color--cream-50); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--nunito-sans); font-size: var(--wp--preset--font-size--md); } /* Header layout: mobile grid (nav | logo | icons), desktop flex (logo, nav, icons) */ .bs-header-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center !important; column-gap: var(--wp--preset--spacing--4); /* !important: WP core's ":root :where(.is-layout-flow) > *" rule is the same specificity tier as this plain class selector (:root carries real specificity even though :where() zeroes its own), so source order decides the tie — and WP core's wins without !important here. */ margin-block-start: 0 !important; } .bs-header-row > * { margin-block-start: 0 !important; margin-block-end: 0 !important; } .bs-header-row__nav, .bs-header-row__logo, .bs-header-row__icons { display: flex; align-items: center; align-self: center !important; } .wp-block-navigation.bs-header-row__nav { align-items: center !important; } .bs-header-row__nav { justify-self: start; } .bs-header-row__logo { justify-self: center; } .wp-block-site-logo.bs-header-row__logo img { display: block; width: auto !important; height: 44px !important; max-height: 44px !important; } .bs-header-row__icons { justify-self: end; } /* Desktop: logo + horizontal menu grouped left, icons pushed right. Mobile (hamburger, centered logo, icons right) stays exactly as above. Core's Navigation block hard-codes its own overlay/inline switch at 600px — the override below keeps it hidden as a hamburger until our own 992px point instead, so both switch together. */ @media (max-width: 991px) { .wp-block-navigation.bs-header-row__nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; } .wp-block-navigation.bs-header-row__nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; } } @media (min-width: 992px) { .wp-block-navigation.bs-header-row__nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: none !important; } .wp-block-navigation.bs-header-row__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: block !important; width: 100%; position: relative; z-index: auto; background-color: inherit; } .bs-header-row { display: flex; column-gap: var(--wp--preset--spacing--6); } .bs-header-row__logo { order: 1; justify-self: unset; } .bs-header-row__nav { order: 2; justify-self: unset; } .bs-header-row__icons { order: 3; justify-self: unset; margin-left: auto !important; } .wp-block-site-logo.bs-header-row__logo img { height: auto !important; max-height: 56px !important; width: auto !important; max-width: 220px !important; } } /* Header search: icon toggle + slide-down overlay -------------------- */ .bs-search-toggle, .bs-account-link { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; padding: 0.5rem; color: var(--wp--preset--color--gray-800); } @media (max-width: 991px) { .bs-account-link { display: none; } } .bs-search-overlay { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; gap: var(--wp--preset--spacing--4); background: var(--wp--preset--color--cream-50); border-bottom: 1px solid var(--wp--preset--color--border-weak); padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--5); transform: translateY(-100%); transition: transform 0.25s ease; } /* The [hidden] attribute's UA display:none is otherwise beaten by the unconditional display:flex above — same bug already fixed on the size chart modal, never carried over here. With display staying flex, this "hidden" (translateY(-100%)) overlay still occupies a real 94px-tall box fixed to the viewport's top edge; only its top ~70px scrolls above y:0, leaving its bottom ~24px — an opaque cream box, z-index 100 — sitting right over the new shipping bar's top portion (the bar itself is 0-29px tall, z-index 90), hiding its text under that cream background. */ .bs-search-overlay[hidden] { display: none; } .bs-search-overlay.is-open { transform: translateY(0); } .bs-search-overlay__form { flex: 1; display: flex; align-items: center; gap: var(--wp--preset--spacing--3); max-width: 720px; margin-inline: auto; width: 100%; } .bs-search-overlay__input { flex: 1; min-width: 0; font-family: var(--wp--preset--font-family--nunito-sans); font-size: var(--wp--preset--font-size--lg); border: none; border-bottom: 2px solid var(--wp--preset--color--gray-800); background: transparent; padding: 0.5rem 0; color: var(--wp--preset--color--gray-800); } .bs-search-overlay__input:focus { outline: none; border-bottom-color: var(--wp--preset--color--blue-600); } .bs-search-overlay__submit, .bs-search-overlay__close { display: inline-flex; background: transparent; border: none; cursor: pointer; padding: 0.5rem; color: var(--wp--preset--color--gray-800); flex-shrink: 0; } @media (prefers-reduced-motion: reduce) { .bs-search-overlay { transition: none; } } /* WooCommerce mini-cart drawer ---------------------------------------- */ .wc-block-components-drawer { background: var(--wp--preset--color--cream-50); } .wp-block-woocommerce-mini-cart-title-block { font-family: var(--wp--preset--font-family--nunito-sans); border-bottom: 1px solid var(--wp--preset--color--border-weak); } .wc-block-mini-cart__footer .wp-element-button, .wp-block-woocommerce-mini-cart-checkout-button-block .wp-element-button { width: 100%; justify-content: center; } /* Product card (catalog / product-template) --------------------------- */ .bs-product-card { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--border-weak); border-radius: var(--wp--custom--radius--md); box-shadow: var(--wp--custom--shadow--xs); overflow: hidden; transition: box-shadow 0.2s ease, transform 0.2s ease; } /* Makes the whole card clickable, not just the image — the title keeps its own real link on top (z-index) so it's still independently reachable by keyboard/screen readers; this overlay is aria-hidden, same as the image link, since it's a supplementary click target rather than the primary one. */ .bs-product-card-link { position: absolute; inset: 0; z-index: 1; } .bs-product-card:hover { box-shadow: var(--wp--custom--shadow--md); transform: translateY(-2px); } .bs-product-card-image-wrap { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--wp--preset--color--sand-100); } .bs-product-card-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .bs-product-card-image--hover { opacity: 0; transition: opacity 0.25s ease; } /* The full-card overlay link (.bs-product-card-link) sits on top of the image now, so :hover on the image-wrap itself never fires — :hover on the card still bubbles down correctly since the pointer is over a descendant of it either way. */ .bs-product-card:hover .bs-product-card-image--hover { opacity: 1; } .bs-product-card-badge { display: inline-flex; align-self: flex-start; margin: var(--wp--preset--spacing--3) var(--wp--preset--spacing--3) 0; padding: 0.25rem 0.75rem; border-radius: var(--wp--custom--radius--pill); font-size: var(--wp--preset--font-size--xs); font-weight: 700; color: var(--wp--preset--color--white); } .bs-product-card-badge--sale { background: var(--wp--preset--color--sun-600); } .bs-product-card-badge--new { background: var(--wp--preset--color--forest-600); } .bs-product-card .wp-block-woocommerce-product-title, .bs-product-card .wp-block-post-title { position: relative; z-index: 2; margin: var(--wp--preset--spacing--3) var(--wp--preset--spacing--3) 0; } /* The product-title block sometimes ends up inside the price/rating flex row instead of before it (depends how it was inserted in the editor) — force it onto its own full-width line either way so the layout looks the same regardless. */ .bs-product-card-meta { flex-wrap: wrap; } .bs-product-card-meta .wp-block-post-title, .bs-product-card-meta .wp-block-woocommerce-product-title { flex-basis: 100%; order: -1; margin: 0 0 var(--wp--preset--spacing--1); } .bs-product-card-meta { margin: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3) var(--wp--preset--spacing--3); gap: var(--wp--preset--spacing--2); } @media (max-width: 480px) { .bs-product-card-meta { flex-direction: column; align-items: flex-start; } } .bs-product-card-meta .wc-block-components-product-rating__stars { color: var(--wp--preset--color--sun-600); } .bs-product-card .wp-block-woocommerce-product-price ins { text-decoration: none; color: var(--wp--preset--color--clay-600); } .bs-product-card .wp-block-woocommerce-product-price del { color: var(--wp--preset--color--gray-600); opacity: 0.7; } /* Catalog toolbar: results count + sort dropdown -----------------------*/ .bs-catalog-toolbar { align-items: center; margin-bottom: var(--wp--preset--spacing--5); padding-bottom: var(--wp--preset--spacing--4); border-bottom: 1px solid var(--wp--preset--color--border-weak); } .bs-catalog-toolbar .wc-block-product-results-count { color: var(--wp--preset--color--gray-600); font-size: var(--wp--preset--font-size--sm); margin: 0; } .bs-catalog-toolbar select { font-family: var(--wp--preset--font-family--nunito-sans); border: 1px solid var(--wp--preset--color--border-weak); border-radius: var(--wp--custom--radius--sm); padding: 0.4em 2em 0.4em 0.9em; color: var(--wp--preset--color--navy-950); background-color: var(--wp--preset--color--white); } /* WooCommerce shrinks any heading inside a Product Collection block down to a small utility-label size by default — "You might also like" etc. should read as a real section heading instead. */ .wp-block-woocommerce-product-collection h2.wp-block-heading { font-size: var(--wp--preset--font-size--2-xl) !important; line-height: 1.2 !important; } /* Distraction-free checkout header: logo only, no nav/cart/search, so there's nothing to click away with mid-purchase. */ .bs-checkout-header { border-bottom: 1px solid var(--wp--preset--color--border-weak); } .bs-checkout-header img { height: 44px !important; width: auto !important; } /* Cart block (Cart page) ------------------------------------------------ */ .bs-continue-shopping { font-size: var(--wp--preset--font-size--sm); } .wc-block-cart-items__header { border-bottom: 1px solid var(--wp--preset--color--border-weak); padding-bottom: var(--wp--preset--spacing--2); } .wc-block-cart-items__header-image span, .wc-block-cart-items__header-product span, .wc-block-cart-items__header-total span { color: var(--wp--preset--color--gray-600); font-size: var(--wp--preset--font-size--xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .wc-block-cart-items__row { border-bottom: 1px solid var(--wp--preset--color--border-weak); } .wc-block-cart-item__image img { border-radius: var(--wp--custom--radius--sm); } .wc-block-components-product-name { color: var(--wp--preset--color--navy-950); font-weight: 700; } /* The short product description that ships in the Cart block's default markup is placeholder catalog copy, not the Color/Size-style variation summary — noisy here, so it's hidden rather than styled. */ .wc-block-components-product-metadata__description { display: none; } .wc-block-components-quantity-selector { border-color: var(--wp--preset--color--border-weak); border-radius: var(--wp--custom--radius--sm); } .wc-block-components-quantity-selector__button { color: var(--wp--preset--color--gray-600); } .wc-block-components-quantity-selector__button:hover { color: var(--wp--preset--color--navy-800); } .wc-block-cart-item__remove-link.wc-block-cart-item__remove-link { color: var(--wp--preset--color--gray-600) !important; } .wc-block-cart-item__remove-link.wc-block-cart-item__remove-link:hover { color: var(--wp--preset--color--clay-600) !important; } .wc-block-components-sale-badge { background: var(--wp--preset--color--sun-500); border-color: var(--wp--preset--color--sun-500); color: var(--wp--preset--color--navy-950); border-radius: var(--wp--custom--radius--pill); } .wc-block-cart__totals-title { color: var(--wp--preset--color--navy-950); font-weight: 700; } .wc-block-components-panel__button { color: var(--wp--preset--color--navy-800); } .wc-block-components-totals-item.wc-block-components-totals-footer-item { font-weight: 700; } /* Checkout block (Checkout page) — most Cart rules above already apply here too, since the Cart and Checkout blocks share the same component classes (totals, panel, sale badge, quantity selector). */ .wc-block-components-radio-control__input { accent-color: var(--wp--preset--color--navy-800); } .wc-block-components-checkout-order-summary__title-text { color: var(--wp--preset--color--navy-950); font-weight: 700; } /* Single product page ---------------------------------------------------- */ /* WP core's ":root :where(.is-layout-constrained) > *" rule adds a 1.5rem margin-block-start above every direct child of any constrained-layout block (the gallery/info column row, the related/best-sellers sections, the FAQ area, etc.) — removed here per explicit request, scoped to the product page only since this same rule is used site-wide and killing it everywhere would collapse spacing other pages currently rely on. */ body.single-product :where(.is-layout-constrained) > * { margin-block-start: 0 !important; } /* No Apple Pay / Google Pay express checkout on the product page — Stripe renders this via its own JS regardless of theme markup, so it's hidden rather than unhooked (unhooking risks a JS error if Stripe still tries to mount into a removed element). Left untouched on Cart/Checkout. */ body.single-product #wc-stripe-express-checkout-element { display: none !important; } /* No quantity stepper before Add to Cart — the input stays in the DOM (still submits its default value of 1 with the form), just hidden, so Add to Cart can go full width in its place. !important: WooCommerce's own variation-form script sets an inline display:block on this once a variation is matched. */ body.single-product .woocommerce-variation-add-to-cart .quantity { display: none !important; } /* WooCommerce's own CSS lays this wrapper out as a grid with columns sized to its children's content (quantity, button, and whatever else lands here via the woocommerce_before_add_to_cart_button hook — our trust-line notes included). With quantity hidden above, that grid still auto-generates a narrow column for the button rather than letting it span full width, so the column tracks are collapsed to a single full-width column here. !important: overrides WooCommerce's own grid-template-columns value. */ body.single-product .woocommerce-variation-add-to-cart { grid-template-columns: 1fr !important; grid-auto-flow: row !important; } /* !important: WooCommerce's own CSS explicitly places this button at grid-column: 2 / 3 with justify-self: start, which — even with the single-column override above — still forces a second implicit grid column sized to the button's own content width. */ body.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button { grid-column: 1 / -1 !important; justify-self: stretch !important; width: 100%; } /* !important: WooCommerce's own core CSS sets font-size on this element. */ .woocommerce-variation-price { font-size: 18px !important; } /* Trust row: 3 icon/headline/text columns below Add to Cart ------------ */ .bs-trust-row { align-items: stretch; gap: var(--wp--preset--spacing--4); margin-bottom: var(--wp--preset--spacing--5) !important; } .bs-trust-item { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; min-width: 140px; text-align: center; } .bs-trust-icon { width: 28px; height: 28px; color: var(--wp--preset--color--navy-800); } .bs-trust-headline { margin: var(--wp--preset--spacing--2) 0 0; color: var(--wp--preset--color--navy-950); font-weight: 700; font-size: var(--wp--preset--font-size--sm); } .bs-trust-text { margin: var(--wp--preset--spacing--1) 0 0; color: var(--wp--preset--color--gray-600); font-size: var(--wp--preset--font-size--xs); } /* Mobile: just the big image, no thumbnail strip — less scrolling before the buyer reaches the price/add-to-cart area. */ @media (max-width: 991px) { .flex-control-nav.flex-control-thumbs { display: none; } } /* Desktop thumbnail strip: WooCommerce's own CSS floats these 4-up (25% wide, clear:left every 4th item). Switching the list to flex removes the float-based wrap entirely (clear has no effect on flex children), and centers the row as a group instead of it running the full gallery width. !important below: WC's own selectors here (.woocommerce div.product div.images .flex-control-thumbs li, plus a :nth-child clear rule) are several classes deep and outrank a plain two-class selector otherwise. Desktop-only: unscoped, this same- specificity rule came after the mobile display:none above and silently re-showed the strip on phones. */ @media (min-width: 992px) { .flex-control-nav.flex-control-thumbs { display: flex; flex-wrap: wrap; justify-content: center; } } .flex-control-nav.flex-control-thumbs li { clear: none !important; float: none !important; width: 10% !important; } /* Desktop: gallery/info split at 50/50 instead of the fixed 512px gallery column, so it scales with the page width. --grid-desktop-horizontal-spacing matches the columns' real gap (the theme's global blockGap) so the split is exact rather than overshooting by half a gutter on each side. */ .bs-product-columns { --grid-desktop-horizontal-spacing: var(--wp--preset--spacing--5); } @media (min-width: 992px) { .bs-product-gallery-col { max-width: 65%; width: calc(65% - var(--grid-desktop-horizontal-spacing) / 2); } .bs-product-info { max-width: 35%; width: calc(35% - var(--grid-desktop-horizontal-spacing) / 2); } } /* Gallery: transparent background, centered in its column, main image scaled to the visible viewport height (with a floor so it never gets too small on short screens) rather than a fixed pixel size. */ .bs-product-gallery-col { display: flex; flex-direction: column; align-items: center; } .woocommerce-product-gallery, .woocommerce-product-gallery__wrapper, .woocommerce-product-gallery__image { background: transparent; } /* Width stays 100% of the gallery column. !important: WC's own core CSS sets width/float here, and separately caps the block wrapper one level up at max-width:512px. */ .wp-block-woocommerce-product-image-gallery { width: 100% !important; max-width: 100% !important; } .woocommerce-product-gallery { width: 100% !important; max-width: 100% !important; margin: 0 auto; } /* Mobile: natural aspect ratio at full column width — no forced height, so the shirt photo isn't letterboxed inside a box taller than its own proportions (that's what the 70vh rule below is for, desktop-only). !important: WooCommerce's own core CSS sets width/height on all product images. */ .woocommerce-product-gallery__image img { width: 100% !important; height: auto !important; object-fit: contain; } /* Keep the gallery a stable height while WooCommerce's flexslider starts up (it was CLS ~0.3 on mobile, pushing price/add-to-cart off screen): - Before init, WooCommerce shows every extra image as a 25%-wide row (.woocommerce div.product div.images .woocommerce-product-gallery__image :nth-child(n+2), which outranks this — hence !important). Keep extra images hidden until flexslider has positioned them (it gives each slide an inline style). - During init, the slides' parent is 10x the gallery width for a moment, so "width: 100%" images briefly rendered ~3000px tall. Size slides to the gallery itself (container query unit) instead; flexslider's own inline width then takes over with the same value. - Desktop: reserve the thumbnail row (square thumbs, 10% of the gallery width) before it exists. Mobile has no thumbnail strip. */ .woocommerce-product-gallery { container-type: inline-size; } .woocommerce-product-gallery .woocommerce-product-gallery__image { width: 100cqw; } .woocommerce-product-gallery--with-images .woocommerce-product-gallery__image:not(:first-child):not([style]) { display: none !important; } @media (min-width: 992px) { .woocommerce-product-gallery--with-images:not(:has(.flex-viewport)):has(.woocommerce-product-gallery__image + .woocommerce-product-gallery__image) { padding-bottom: 10%; } } /* Desktop: height scales with the visible viewport instead — set directly on the rather than the wrapper above: the wrapper's own height is content-driven from this image (it has no explicit height of its own), so constraining height here is what actually makes the whole gallery grow. The 500px floor keeps it from getting too small on short screens. */ @media (min-width: 992px) { .woocommerce-product-gallery { min-width: 500px; } .woocommerce-product-gallery__image img { height: 70vh !important; min-width: 500px; } } /* Tighter rhythm between title/rating/variations/add-to-cart/meta than the theme's default block gap — both rules being overridden here are authored by WordPress with :where() (zero specificity), so a plain class beats them without needing !important. */ .bs-product-info > * { margin-top: var(--wp--preset--spacing--2); margin-bottom: 0; } .bs-product-info > *:first-child { margin-top: 0; } .bs-visually-hidden { position: absolute !important; width: 1px !important; /* !important: WooCommerce's own .woocommerce div.product form.cart .variations select rule sets min-width:75% — min-width is a separate property from width and still wins as a floor regardless of it. Since this element is position:absolute with no positioned ancestor nearby, that 75% resolves against a much wider containing block than its visual context, stretching its (invisible but still geometrically real) layout box past the viewport and causing horizontal scroll. */ min-width: 0 !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Variation swatches: the visually-hidden