/* =====================================================================
* Bottle Gases — single product page restyle (Phase 1)
*
* Scoped via body.single-product so nothing leaks to archive / shop / etc.
* Enqueued from functions.php with is_product() gate.
*
* Token reference: assets/brand-tokens.css
* --bg-orange-500 #F58220 — primary CTA / accent
* --bg-orange-400 #FB9722 — hover
* --bg-brown-50 #FBF7F2 — cream surfaces
* --bg-brown-500 #7C4F2A — primary brown
* --bg-ink-100/200 — borders
* --bg-ink-600/700 — body text
* =================================================================== */
/* ---------- Breadcrumb cream strip ---------- */
/* Kill any top spacing above the breadcrumb. Woodmart's page-content wrapper
adds ~58px of empty padding-top above the breadcrumb on product pages —
it's wasted vertical space. Zero it out so the breadcrumb sits flush
under the orange nav. Also targets common Woodmart "page-title" wrappers
that sometimes render empty on product pages. */
body.single-product .wd-page-content,
body.single-product .main-page-wrapper,
body.single-product .wd-content-area.site-content {
padding-top: 0 !important;
margin-top: 0 !important;
}
body.single-product .wd-page-title,
body.single-product .page-title-default,
body.single-product .wd-titlebar {
display: none;
}
body.single-product main,
body.single-product main.site-main {
padding-top: 0 !important;
margin-top: 0 !important;
}
body.single-product .wd-page-content > .woocommerce-breadcrumb,
body.single-product .woocommerce-breadcrumb {
background: var(--bg-navy-50);
padding: 14px 28px;
margin: 0 !important;
border-radius: 0;
font-size: 14px;
color: var(--bg-ink-600);
}
/* Kill the 48px gap above the breadcrumb that re-appeared after Codex's
product-page card styling went in. Three sources:
- .product (single-product-page entry-content) margin-top 16 + padding-top 20
- the WPBakery breadcrumb row .vc_row-has-fill padding-top 12
= 48px of stacked spacing between header bottom and breadcrumb text.
Zero all three on product pages so the breadcrumb sits flush. */
body.single-product .single-product-page.entry-content,
body.single-product div.product.single-product-page {
margin-top: 0 !important;
padding-top: 0 !important;
}
body.single-product .vc_row.vc_row-has-fill:has(> .wpb_column > .vc_column-inner > .wpb_wrapper > .wd-el-breadcrumbs),
body.single-product .vc_row.vc_row-fluid:first-child {
padding-top: 0 !important;
margin-top: 0 !important;
}
body.single-product .woocommerce-breadcrumb a {
color: var(--bg-ink-600);
text-decoration: none;
}
body.single-product .woocommerce-breadcrumb a:hover {
color: var(--bg-orange-500);
}
/* ---------- Product card (image + summary) ----------
IMPORTANT: do NOT override .product to display:grid here. Woodmart's
"Single product layout" (post 880) renders the entire product page
inside .product as ONE child div (.wpb-content-wrapper). If we set
.product to a 2-col grid, the single child collapses into column 1
and constrains the wrapper to ~50% width — cascading down to narrow
the gallery and summary to ~360px each on a 1440 viewport. Confirmed
empirically via Playwright dimension dump on 2026-05-26.
The WPBakery layout already provides its own row/column structure:
- Row containing two .wpb_column.vc_col-lg-6 (gallery on left, summary
on right) at ~50/50 split.
- Row containing tabs at full content width.
We just style those existing columns. */
body.single-product div.product {
background: #fff;
padding: 32px 32px 28px;
border-radius: 12px;
margin-top: 16px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
body.single-product div.product .wpb-content-wrapper {
width: 100%;
max-width: 100%;
}
/* Force the gallery+summary row to a 60/40 split on desktop instead of the
default 50/50 (vc_col-lg-6 = Bootstrap col-lg-6 = 50%). Target only the
.vc_row-o-equal-height row, which is the gallery+summary row in layout
880 — leaves other rows (breadcrumb, tabs) at their natural widths. */
@media (min-width: 992px) {
body.single-product .wpb_row.vc_row-o-equal-height > .wpb_column.vc_col-lg-6:nth-child(1) {
flex-basis: 60% !important;
max-width: 60% !important;
width: 60% !important;
}
body.single-product .wpb_row.vc_row-o-equal-height > .wpb_column.vc_col-lg-6:nth-child(2) {
flex-basis: 40% !important;
max-width: 40% !important;
width: 40% !important;
}
}
/* The trust strip is inserted via JS after the gallery. It lives directly
under the gallery's parent column (.wpb_column.vc_col-lg-6) so it
naturally spans the gallery column width. */
body.single-product .wpb_column .bg-product-trust {
margin-top: 18px;
}
/* Trust strip + gallery column: scroll behavior.
1) Hide on mobile — owner feedback was that it takes too much space below
the image on small screens. The same info is restated on the cart and
checkout trust strips, so no real loss.
2) Disable Woodmart's sticky-column on product pages so the gallery and
the trust strip move together with the page scroll. Owner saw the
trust strip staying static while the image scrolled — that's
Woodmart's column-sticky behavior detaching the strip from the gallery
in the perceived flow. Static positioning fixes the asymmetry. */
@media (max-width: 767px) {
body.single-product .bg-product-trust {
display: none !important;
}
}
body.single-product .woodmart-sticky-column,
body.single-product .woodmart-sticky-column.wd_sticky_offset_150,
body.single-product .wpb_column.woodmart-sticky-column {
position: static !important;
top: auto !important;
}
/* ---------- Title ---------- */
body.single-product .product_title.entry-title {
font-family: 'Manrope', system-ui, sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 1.22;
color: var(--bg-ink-800);
letter-spacing: -0.015em;
margin: 0 0 14px;
}
@media (max-width: 600px) {
body.single-product .product_title.entry-title { font-size: 26px; }
}
/* ---------- Rating row (stars + reviews + Q&A anchor) ---------- */
body.single-product .summary > .wd-product-rating,
body.single-product .summary .woocommerce-product-rating {
margin: 4px 0 18px;
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
body.single-product .woocommerce-product-rating .star-rating {
color: var(--bg-orange-500);
font-size: 14px;
letter-spacing: 2px;
}
body.single-product .woocommerce-product-rating .star-rating::before {
color: var(--bg-ink-200);
}
body.single-product .woocommerce-product-rating .star-rating span::before {
color: var(--bg-orange-500);
}
body.single-product .woocommerce-product-rating .woocommerce-review-link {
color: var(--bg-ink-700);
font-size: 14px;
font-weight: 500;
text-decoration: none;
padding-left: 14px;
border-left: 1px solid var(--bg-ink-200);
position: relative;
}
body.single-product .woocommerce-product-rating .woocommerce-review-link:hover {
color: var(--bg-orange-500);
}
body.single-product .bg-rating-qa-link {
color: var(--bg-ink-700);
font-size: 14px;
font-weight: 500;
text-decoration: none;
padding-left: 14px;
border-left: 1px solid var(--bg-ink-200);
}
body.single-product .bg-rating-qa-link:hover {
color: var(--bg-orange-500);
}
/* ---------- Price block ---------- */
body.single-product .summary p.price,
body.single-product .summary .price,
body.single-product .summary .wd-single-price .price {
color: var(--bg-orange-500) !important;
font-family: 'Manrope', system-ui, sans-serif !important;
font-weight: 800 !important;
font-size: 44px !important;
line-height: 1.05 !important;
margin: 8px 0 4px !important;
display: block;
}
body.single-product .summary p.price .woocommerce-Price-amount,
body.single-product .summary .price .woocommerce-Price-amount,
body.single-product .summary .wd-single-price .woocommerce-Price-amount {
color: var(--bg-orange-500) !important;
font-size: inherit !important;
font-weight: inherit !important;
}
body.single-product .summary p.price .woocommerce-Price-currencySymbol,
body.single-product .summary .wd-single-price .woocommerce-Price-currencySymbol {
font-size: 0.85em;
}
@media (max-width: 600px) {
body.single-product .summary p.price,
body.single-product .summary .price,
body.single-product .summary .wd-single-price .price { font-size: 34px !important; }
}
body.single-product .bg-price-vat-note {
color: var(--bg-ink-500);
font-size: 13px;
margin: 0 0 18px;
font-weight: 400;
}
/* ---------- In-stock + SKU inline row ---------- */
body.single-product .bg-stock-sku {
display: flex;
align-items: center;
gap: 18px;
font-size: 14px;
color: var(--bg-ink-700);
margin-bottom: 22px;
flex-wrap: wrap;
}
body.single-product .bg-stock-sku .bg-stock {
display: inline-flex;
align-items: center;
gap: 8px;
color: #16a34a;
font-weight: 600;
}
body.single-product .bg-stock-sku .bg-stock::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #16a34a;
}
body.single-product .bg-stock-sku .bg-sku-label {
color: var(--bg-ink-500);
}
/* ---------- Quantity + CTAs row ---------- */
body.single-product form.cart .quantity {
display: inline-flex;
align-items: stretch;
border: 1px solid var(--bg-ink-200);
border-radius: 10px;
overflow: hidden;
background: #fff;
height: 52px;
margin-right: 12px;
}
body.single-product form.cart .quantity input.qty {
border: 0;
width: 56px;
text-align: center;
font-weight: 600;
font-size: 16px;
background: transparent;
}
body.single-product form.cart .quantity .minus,
body.single-product form.cart .quantity .plus {
border: 0;
width: 40px;
background: transparent;
font-size: 18px;
color: var(--bg-ink-700);
cursor: pointer;
}
body.single-product form.cart .quantity .minus:hover,
body.single-product form.cart .quantity .plus:hover {
color: var(--bg-orange-500);
}
body.single-product form.cart .single_add_to_cart_button,
body.single-product form.cart button.single_add_to_cart_button {
background: var(--bg-orange-500);
border: 1px solid var(--bg-orange-500);
color: #fff;
font-weight: 700;
font-size: 15px;
letter-spacing: 0.01em;
text-transform: none;
padding: 0 32px;
height: 52px;
border-radius: 10px;
box-shadow: none;
transition: background 120ms ease, border-color 120ms ease;
display: inline-flex;
align-items: center;
gap: 10px;
}
body.single-product form.cart .single_add_to_cart_button::before {
content: '';
width: 18px;
height: 18px;
background-color: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
display: inline-block;
flex-shrink: 0;
}
body.single-product form.cart .single_add_to_cart_button:hover {
background: var(--bg-orange-600);
border-color: var(--bg-orange-600);
}
/* Placeholder for Buy-now button — actual handler ships in Chunk 2.
This rule styles it once the markup arrives so layout is final-ready. */
body.single-product form.cart .bg-buy-now-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid var(--bg-orange-500);
color: var(--bg-orange-500);
font-weight: 700;
font-size: 15px;
padding: 0 28px;
height: 52px;
border-radius: 10px;
margin-left: 12px;
text-decoration: none;
transition: background 120ms ease, color 120ms ease;
}
body.single-product form.cart .bg-buy-now-btn:hover {
background: var(--bg-orange-50, #FFF4E6);
}
/* ---------- Wishlist / Compare / Payment row ---------- */
body.single-product .bg-secondary-actions {
display: flex;
align-items: center;
gap: 24px;
margin: 22px 0 0;
flex-wrap: wrap;
font-size: 14px;
}
body.single-product .bg-secondary-actions .wd-wishlist-btn-tooltip,
body.single-product .bg-secondary-actions .wd-compare-btn-tooltip,
body.single-product .bg-secondary-actions a {
color: var(--bg-ink-600);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
body.single-product .bg-secondary-actions .wd-wishlist-btn-tooltip:hover,
body.single-product .bg-secondary-actions .wd-compare-btn-tooltip:hover {
color: var(--bg-orange-500);
}
body.single-product .bg-payment-logos {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 8px;
}
body.single-product .bg-payment-logos img,
body.single-product .bg-payment-logos svg {
height: 22px;
width: auto;
display: block;
}
/* ---------- Trust strip card under image ----------
Target shows a near-white card with subtle warm tint and a soft shadow.
Icons sit naked (no circle bg) at slightly larger size with a 1.5px stroke.
This is restraint mode — depth via shadow, not via color blocks. */
body.single-product .bg-product-trust {
margin-top: 20px;
padding: 20px 24px;
background: #FBFAF7;
border: 1px solid var(--bg-ink-100);
border-radius: 12px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
body.single-product .bg-product-trust__item {
display: flex;
align-items: flex-start;
gap: 14px;
}
body.single-product .bg-product-trust__icon {
flex: 0 0 auto;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--bg-orange-500);
}
body.single-product .bg-product-trust__icon svg {
width: 24px;
height: 24px;
stroke-width: 1.6;
}
body.single-product .bg-product-trust__title {
font-weight: 700;
font-size: 14px;
line-height: 1.3;
color: var(--bg-ink-800);
margin: 0 0 4px;
letter-spacing: -0.005em;
}
body.single-product .bg-product-trust__copy {
font-size: 12.5px;
line-height: 1.5;
color: var(--bg-ink-600);
margin: 0;
max-width: 22ch;
}
/* ---------- Tab navigation + body ---------- */
body.single-product .woocommerce-tabs.wc-tabs-wrapper {
background: var(--bg-navy-50);
border-radius: 12px;
margin-top: 24px;
padding: 28px 32px;
}
body.single-product .woocommerce-tabs ul.wc-tabs,
body.single-product .woocommerce-tabs ul.tabs {
border-bottom: 1px solid var(--bg-ink-200);
padding: 0;
margin: 0 0 22px;
background: transparent;
display: flex;
gap: 28px;
flex-wrap: wrap;
}
body.single-product .woocommerce-tabs ul.wc-tabs li,
body.single-product .woocommerce-tabs ul.tabs li {
background: transparent;
border: 0;
padding: 0;
margin: 0;
border-radius: 0;
}
body.single-product .woocommerce-tabs ul.wc-tabs li a,
body.single-product .woocommerce-tabs ul.tabs li a {
color: var(--bg-ink-600);
font-weight: 600;
font-size: 16px;
padding: 12px 0 14px;
text-decoration: none;
display: inline-block;
border-bottom: 3px solid transparent;
transition: color 120ms ease, border-color 120ms ease;
}
body.single-product .woocommerce-tabs ul.wc-tabs li.active a,
body.single-product .woocommerce-tabs ul.tabs li.active a {
color: var(--bg-ink-800);
border-bottom-color: var(--bg-orange-500);
}
body.single-product .woocommerce-tabs ul.wc-tabs li:hover a,
body.single-product .woocommerce-tabs ul.tabs li:hover a {
color: var(--bg-orange-500);
}
body.single-product .woocommerce-tabs .wc-tab,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
background: transparent;
padding: 0;
border: 0;
}
/* ---------- Single-column tab body (safety / Q&A) ---------- */
body.single-product .bg-tab-copy {
max-width: 800px;
}
body.single-product .bg-tab-copy h2 {
font-family: 'Manrope', system-ui, sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 1.3;
color: var(--bg-ink-800);
margin: 0 0 14px;
letter-spacing: -0.01em;
}
body.single-product .bg-tab-copy p,
body.single-product .bg-tab-copy ul {
font-size: 15px;
line-height: 1.65;
color: var(--bg-ink-700);
}
body.single-product .bg-tab-copy ul.bg-tab-features {
margin: 12px 0;
}
body.single-product .bg-tab-footnote {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--bg-ink-100);
font-size: 13px;
color: var(--bg-ink-500);
}
body.single-product .bg-tab-copy a,
body.single-product .bg-tab-grid__copy a {
color: var(--bg-orange-600);
text-decoration: none;
font-weight: 600;
border-bottom: 1px solid currentColor;
}
body.single-product .bg-tab-copy a:hover,
body.single-product .bg-tab-grid__copy a:hover {
color: var(--bg-orange-500);
}
/* ---------- 2-column tab body (description + features bullets) ---------- */
body.single-product .bg-tab-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 56px;
align-items: start;
}
body.single-product .bg-tab-grid__copy h2 {
font-family: 'Manrope', system-ui, sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 1.3;
color: var(--bg-ink-800);
margin: 0 0 16px;
letter-spacing: -0.01em;
}
body.single-product .bg-tab-grid__copy p {
font-size: 15px;
line-height: 1.65;
color: var(--bg-ink-700);
margin: 0 0 12px;
}
body.single-product .bg-tab-features {
list-style: none;
margin: 6px 0 0;
padding: 0;
}
body.single-product .bg-tab-features li {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 8px 0;
font-size: 15px;
line-height: 1.55;
color: var(--bg-ink-800);
}
body.single-product .bg-tab-features li svg {
flex: 0 0 auto;
width: 22px;
height: 22px;
margin-top: 1px;
color: #16a34a;
}
@media (max-width: 768px) {
body.single-product .bg-tab-grid {
grid-template-columns: 1fr;
gap: 28px;
}
}
/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
body.single-product .bg-product-trust {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
body.single-product div.product {
padding: 20px 18px;
}
body.single-product .product_title.entry-title {
font-size: 24px;
}
body.single-product .summary p.price,
body.single-product .summary .price {
font-size: 32px;
}
body.single-product .bg-product-trust {
grid-template-columns: 1fr;
gap: 14px;
}
body.single-product form.cart .quantity {
margin-bottom: 10px;
}
body.single-product form.cart .bg-buy-now-btn {
margin-left: 0;
margin-top: 10px;
}
body.single-product .bg-payment-logos {
margin-left: 0;
width: 100%;
}
}
/* ==========================================================================
Product page V2 — refined ecommerce polish
--------------------------------------------------------------------------
Root cause from 2026-05-26 browser inspection:
- The rendered product summary is a WPBakery/Woodmart column
`.single-product-right-side-section`, not standard `.summary`.
- The gallery image was rendering at ~782px high on a 1440 viewport, making
the USP strip feel detached while scrolling.
========================================================================== */
body.single-product {
background: #f7f8fa;
}
body.single-product div.product {
background: #f7f8fa;
border-radius: 0;
box-shadow: none;
padding: 20px 32px 32px;
}
body.single-product .wpb_row.vc_row-o-equal-height {
align-items: stretch;
gap: 24px;
}
@media (min-width: 992px) {
body.single-product .wpb_row.vc_row-o-equal-height > .wpb_column.vc_col-lg-6:nth-child(1) {
flex-basis: calc(58% - 12px) !important;
max-width: calc(58% - 12px) !important;
width: calc(58% - 12px) !important;
}
body.single-product .wpb_row.vc_row-o-equal-height > .wpb_column.vc_col-lg-6:nth-child(2) {
flex-basis: calc(42% - 12px) !important;
max-width: calc(42% - 12px) !important;
width: calc(42% - 12px) !important;
}
}
body.single-product .woocommerce-product-gallery,
body.single-product .wd-single-product-gallery,
body.single-product .wd-product-images,
body.single-product .wd-product-gallery-wrap {
justify-content: center;
align-items: center;
min-height: 0;
max-height: 650px;
aspect-ratio: 1 / 0.82;
/* Owner feedback 2026-05-26: the inner border + box-shadow around the
gallery image was reading as a "little border around the image" and
feeling like a nested card-inside-a-card. Removed both. Kept the soft
radial gradient because it gives the image a subtle warm backdrop
without an actual edge. */
background:
radial-gradient(circle at 50% 18%, rgba(245, 130, 32, 0.05), transparent 38%),
#fff;
border: 0;
border-radius: 12px;
box-shadow: none;
overflow: hidden;
}
body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image,
body.single-product .wd-product-images .woocommerce-product-gallery__wrapper,
body.single-product .wd-product-images .woocommerce-product-gallery__image {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
body.single-product .woocommerce-product-gallery img.wp-post-image,
body.single-product .wd-product-images img.wp-post-image {
width: auto !important;
max-width: 82% !important;
max-height: 610px !important;
object-fit: contain !important;
display: block;
}
body.single-product .product-image-summary-wrap,
body.single-product .woocommerce-product-gallery,
body.single-product .bg-product-trust {
position: relative;
z-index: 1;
}
body.single-product .single-product-right-side-section > .vc_column-inner {
/* Owner feedback 2026-05-26: drop the inner card border + shadow on the
summary column. The outer .product card already provides one surface;
the summary doesn't need a second one. Padding kept so the content
doesn't crowd the column edges. */
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
padding: clamp(20px, 2.4vw, 32px) !important;
}
body.single-product .single-product-right-side-section .product_title.entry-title {
font-size: clamp(30px, 2.8vw, 42px);
line-height: 1.12;
letter-spacing: -0.035em;
color: #121820;
margin-bottom: 18px;
text-transform: none;
}
body.single-product .single-product-right-side-section .wd-single-price .price,
body.single-product .single-product-right-side-section .wd-single-price .woocommerce-Price-amount {
color: var(--bg-orange-500) !important;
font-size: clamp(34px, 3vw, 46px) !important;
font-weight: 800 !important;
letter-spacing: -0.035em;
}
body.single-product .single-product-right-side-section .bg-price-vat-note,
body.single-product .single-product-right-side-section .bg-stock-sku {
margin-bottom: 16px;
}
body.single-product .single-product-right-side-section form.pisol-woocommerce-shipping-calculator {
position: relative;
display: block;
margin: 18px 0 18px;
padding: 20px 22px 20px 58px;
background: #fbfcfd;
border: 1px solid #dde3ea;
border-radius: 14px;
box-shadow: inset 0 3px 0 var(--bg-orange-500);
}
body.single-product .single-product-right-side-section form.pisol-woocommerce-shipping-calculator::before {
content: '';
position: absolute;
top: 22px;
left: 22px;
width: 22px;
height: 22px;
background: var(--bg-orange-500);
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
body.single-product .single-product-right-side-section form.pisol-woocommerce-shipping-calculator::after {
content: 'Delivery options and estimated dates are shown after postcode.';
display: block;
max-width: 34ch;
margin-top: 7px;
color: #667085;
font-size: 13px;
line-height: 1.4;
}
body.single-product .single-product-right-side-section .pisol-shipping-calculator-button {
height: auto;
padding: 0;
background: transparent !important;
border: 0 !important;
color: #101828 !important;
box-shadow: none !important;
font-size: 15px;
font-weight: 800;
text-align: left;
text-transform: none;
}
body.single-product .single-product-right-side-section .pisol-shipping-calculator-button::after {
content: 'Enter postcode';
float: right;
margin-left: 18px;
color: var(--bg-orange-600);
font-size: 13px;
font-weight: 800;
text-decoration: underline;
text-underline-offset: 3px;
}
body.single-product .single-product-right-side-section table.variations {
margin: 16px 0 20px;
}
body.single-product .single-product-right-side-section table.variations th,
body.single-product .single-product-right-side-section table.variations td {
display: block;
width: 100%;
padding: 0;
text-align: left;
}
body.single-product .single-product-right-side-section table.variations label {
display: block;
margin: 0 0 8px;
color: #344054;
font-size: 14px;
font-weight: 800;
}
body.single-product .single-product-right-side-section table.variations select {
width: 100%;
min-height: 50px;
border: 1px solid #d0d5dd;
border-radius: 12px;
background-color: #fff;
color: #101828;
font-weight: 600;
}
body.single-product .single-product-right-side-section .reset_variations {
display: inline-block;
margin-top: 8px;
color: var(--bg-orange-600);
font-size: 13px;
font-weight: 800;
}
body.single-product .single-product-right-side-section .woocommerce-variation.single_variation {
margin-bottom: 14px;
padding: 14px 18px;
background: #fff8ef;
border: 1px solid #fde3c7;
border-radius: 14px;
color: #344054;
}
body.single-product .single-product-right-side-section .woocommerce-variation.single_variation:empty {
display: none !important;
}
body.single-product .single-product-right-side-section form.cart .quantity {
height: 54px;
border-color: #d0d5dd;
border-radius: 12px;
}
body.single-product .single-product-right-side-section form.cart .single_add_to_cart_button,
body.single-product .single-product-right-side-section form.cart button.single_add_to_cart_button,
body.single-product .single-product-right-side-section button.single_add_to_cart_button.button.alt {
background: linear-gradient(180deg, #ff9416 0%, var(--bg-orange-500) 100%) !important;
border-color: var(--bg-orange-500) !important;
color: #fff !important;
min-width: 230px;
height: 54px;
border-radius: 12px;
box-shadow: 0 10px 24px rgba(245, 130, 32, 0.28);
}
body.single-product .single-product-right-side-section form.cart .single_add_to_cart_button:hover,
body.single-product .single-product-right-side-section form.cart button.single_add_to_cart_button:hover {
background: var(--bg-orange-600) !important;
border-color: var(--bg-orange-600) !important;
}
body.single-product .single-product-right-side-section .wd-buy-now-btn,
body.single-product .single-product-right-side-section form.cart .bg-buy-now-btn {
height: 54px;
border: 1px solid var(--bg-orange-500) !important;
border-radius: 12px;
color: var(--bg-orange-600) !important;
background: #fff !important;
box-shadow: none;
}
body.single-product .single-product-right-side-section .bg-secondary-actions {
padding-top: 20px;
border-top: 1px solid #eaecf0;
}
body.single-product .single-product-right-side-section .bg-payment-logos {
margin-top: 14px;
padding-top: 16px;
border-top: 1px solid #eaecf0;
}
body.single-product .bg-product-trust {
margin-top: 22px;
background: #fff;
border: 1px solid #e4e7ec;
border-radius: 16px;
box-shadow: 0 14px 32px rgba(16, 45, 58, 0.06);
gap: 0;
padding: 20px 22px;
}
body.single-product .bg-product-trust__item {
padding: 0 18px;
border-right: 1px solid #edf0f3;
}
body.single-product .bg-product-trust__item:first-child {
padding-left: 0;
}
body.single-product .bg-product-trust__item:last-child {
padding-right: 0;
border-right: 0;
}
body.single-product .bg-product-trust__icon {
color: var(--bg-orange-500);
}
body.single-product .woocommerce-tabs.wc-tabs-wrapper {
background: #fff;
border: 1px solid #e4e7ec;
border-radius: 18px;
box-shadow: 0 12px 34px rgba(16, 45, 58, 0.05);
}
@media (max-width: 991px) {
body.single-product div.product {
padding: 16px;
}
body.single-product .wpb_row.vc_row-o-equal-height {
gap: 18px;
}
body.single-product .woocommerce-product-gallery,
body.single-product .wd-product-images {
max-height: none;
aspect-ratio: 1 / 0.9;
}
body.single-product .woocommerce-product-gallery img.wp-post-image,
body.single-product .wd-product-images img.wp-post-image {
max-height: 520px !important;
}
}
@media (max-width: 767px) {
body.single-product .single-product-right-side-section > .vc_column-inner {
padding: 22px 18px !important;
border-radius: 16px;
}
body.single-product .single-product-right-side-section .product_title.entry-title {
font-size: 28px;
}
body.single-product .woocommerce-product-gallery,
body.single-product .wd-product-images {
aspect-ratio: 1 / 0.86;
}
body.single-product .woocommerce-product-gallery img.wp-post-image,
body.single-product .wd-product-images img.wp-post-image {
max-width: 78% !important;
max-height: 280px !important;
}
body.single-product .single-product-right-side-section form.cart .single_add_to_cart_button,
body.single-product .single-product-right-side-section form.cart button.single_add_to_cart_button,
body.single-product .single-product-right-side-section .wd-buy-now-btn,
body.single-product .single-product-right-side-section form.cart .bg-buy-now-btn {
width: 100%;
min-width: 0;
margin: 10px 0 0;
}
body.single-product .bg-product-trust {
display: flex !important;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
padding: 16px;
}
body.single-product .bg-product-trust__item {
flex: 0 0 230px;
padding: 0;
border-right: 0;
scroll-snap-align: start;
}
}
@media (max-width: 480px) {
body.single-product .woocommerce-product-gallery img.wp-post-image,
body.single-product .wd-product-images img.wp-post-image {
max-height: 250px !important;
}
body.single-product .single-product-right-side-section form.pisol-woocommerce-shipping-calculator {
padding: 18px 16px 18px 50px;
}
}
/* ==========================================================================
Product page V2.1 - correction pass from 2026-05-26 owner review
========================================================================== */
body.single-product .wpb-content-wrapper > .vc_row:first-child {
margin: 0 -32px 20px !important;
padding: 12px 32px !important;
background: #f6ede4 !important;
}
body.single-product .wpb-content-wrapper > .vc_row:first-child .wpb_wrapper {
display: flex;
align-items: center;
gap: 12px;
}
body.single-product .wd-el-breadcrumbs {
margin: 0 !important;
min-width: 0;
}
body.single-product .woocommerce-breadcrumb {
display: flex;
align-items: center;
min-height: 0;
padding: 0 !important;
background: transparent !important;
color: #4b4035;
font-size: 14px;
line-height: 1.4;
white-space: nowrap;
}
body.single-product .woocommerce-breadcrumb a {
color: #6b625a;
}
body.single-product .woocommerce-breadcrumb :where(span, a):last-child {
overflow: hidden;
text-overflow: ellipsis;
}
body.single-product .wd-products-nav {
display: none !important;
}
body.single-product .woocommerce-product-gallery,
body.single-product .wd-single-product-gallery,
body.single-product .wd-product-images,
body.single-product .wd-product-gallery-wrap {
aspect-ratio: 1 / 1;
max-height: none;
}
/* 2026-05-26: Removed the wd-carousel-item / wd-carousel-wrap / etc. blanket
display:flex + height:100% block. Those rules were fighting Woodmart's
Swiper carousel — Swiper manages slide visibility / positioning itself,
and overriding it broke its prev/next state and made multiple slides
appear during transitions. Image sizing also moved into a single
:not(.zoomImg)-scoped rule at the end of this file so we don't touch
the .zoomImg hover-zoom layer. */
body.single-product .single-product-right-side-section .bg-payment-logos {
display: grid !important;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 8px;
width: 100%;
margin: 18px 0 0;
padding: 14px;
background: #fbfcfd;
border: 1px solid #eaecf0;
border-radius: 14px;
}
body.single-product .single-product-right-side-section .bg-payment-logos span {
display: flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 5px 6px;
background: #fff;
border: 1px solid #edf0f3;
border-radius: 8px;
}
body.single-product .single-product-right-side-section .bg-payment-logos svg,
body.single-product .single-product-right-side-section .bg-payment-logos img {
max-width: 100%;
height: 22px;
}
body.single-product .single-product-right-side-section .wd-image.wd-rs-68cc0abb2912f,
body.single-product .single-product-right-side-section .vc_separator:has(+ .wd-image.wd-rs-68cc0abb2912f) {
display: none !important;
}
body.single-product .woocommerce-tabs ul.wc-tabs,
body.single-product .woocommerce-tabs ul.tabs {
display: flex;
flex-wrap: nowrap;
gap: 8px;
padding: 6px;
background: #f7f8fa;
border: 1px solid #e4e7ec;
border-radius: 14px;
overflow-x: auto;
scrollbar-width: thin;
}
body.single-product .woocommerce-tabs ul.wc-tabs li,
body.single-product .woocommerce-tabs ul.tabs li {
flex: 0 0 auto;
}
body.single-product .woocommerce-tabs ul.wc-tabs li a,
body.single-product .woocommerce-tabs ul.tabs li a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 10px 14px;
border: 1px solid transparent;
border-radius: 10px;
color: #4b5563;
font-size: 14px;
font-weight: 750;
line-height: 1.2;
white-space: nowrap;
}
body.single-product .woocommerce-tabs ul.wc-tabs li.active a,
body.single-product .woocommerce-tabs ul.tabs li.active a {
background: #fff;
border-color: var(--bg-orange-500);
color: #101828;
box-shadow: 0 6px 16px rgba(245, 130, 32, 0.14);
}
body.single-product .woocommerce-tabs ul.wc-tabs li.active a::after,
body.single-product .woocommerce-tabs ul.tabs li.active a::after {
display: none !important;
}
@media (max-width: 767px) {
body.single-product .wpb-content-wrapper > .vc_row:first-child {
margin: 0 -16px 20px !important;
padding: 10px 16px !important;
}
body.single-product .woocommerce-breadcrumb {
width: 100%;
font-size: 13px;
}
body.single-product .bg-product-trust {
display: none !important;
}
body.single-product .single-product-right-side-section .bg-payment-logos {
grid-template-columns: repeat(3, minmax(0, 1fr));
padding: 10px;
}
body.single-product .woocommerce-tabs.wc-tabs-wrapper {
padding: 18px 14px;
}
body.single-product .woocommerce-tabs ul.wc-tabs,
body.single-product .woocommerce-tabs ul.tabs {
margin-bottom: 18px;
}
}
/* 2026-05-26: Removed the entire .bg-gallery-ready + .bg-gallery-nav system
per owner brief. The PHP function bg_product_gallery_viewport() that
added .bg-gallery-ready / .is-bg-gallery-active and the custom nav
buttons has been deleted from bg-product-page.php. Woodmart's native
Swiper now drives the carousel and its native .wd-nav-arrows handle
prev/next. Frame styling and image sizing land in the "Gallery — pure
Woodmart Swiper" block at the end of this file. */
/* ==========================================================================
REDESIGN BRIEF — 2026-05-26
--------------------------------------------------------------------------
Owner brief: review + improve product page layout. Items 3-9 of the brief
land here (item 1 = nav, in mega-menu.css; item 2 = summary cleanup, here).
Rules below override earlier sections of this file because CSS cascade
takes the later occurrence at equal specificity. Each block is annotated
with its brief item number so future audits can find the source.
========================================================================== */
/* ---------- Item 4: Unified palette / surfaces ----------
page #F6F7F9 / cards #FFFFFF / border #E2E8F0 / text #101828 /
muted #667085 / accent #F58220. Replace the warm-cream surfaces
except breadcrumb + tab section (which still benefit from a soft tint). */
body.single-product {
background: #F6F7F9 !important;
color: #101828;
}
body.single-product div.product {
background: #FFFFFF !important;
border: 1px solid #E2E8F0;
border-radius: 18px;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
body.single-product .single-product-right-side-section .wd-single-price .price,
body.single-product .single-product-right-side-section .wd-single-price .woocommerce-Price-amount {
color: #F58220 !important;
}
body.single-product .single_add_to_cart_button,
body.single-product form.cart .single_add_to_cart_button,
body.single-product form.cart button.single_add_to_cart_button {
background: #F58220 !important;
border-color: #F58220 !important;
}
body.single-product .single_add_to_cart_button:hover {
background: #DC6E10 !important;
border-color: #DC6E10 !important;
}
body.single-product .wd-buy-now-btn,
body.single-product form.cart .bg-buy-now-btn,
body.single-product form.cart .wd-buy-now-btn {
background: #FFFFFF !important;
color: #F58220 !important;
border: 1px solid #F58220 !important;
}
body.single-product .product_title.entry-title,
body.single-product .single-product-right-side-section .product_title.entry-title {
color: #101828 !important;
}
body.single-product .summary,
body.single-product .single-product-right-side-section {
color: #101828;
}
/* ---------- Item 2: Summary card cleanup ----------
Hide the long category list and any duplicate SKU rendering inside the
summary card. SKU stays in the bg-stock-sku row (already styled).
Categories belong in Specifications, not the buy panel. Also tightens
vertical rhythm so the buy panel is less loose. */
body.single-product .single-product-right-side-section .wd-single-meta,
body.single-product .summary .product_meta {
display: none !important;
}
/* If the meta block is needed back later, only show SKU and never the
categories. Apply with .bg-show-meta on the container. */
body.single-product .bg-show-meta .product_meta .posted_in,
body.single-product .bg-show-meta .product_meta .tagged_as {
display: none;
}
body.single-product .single-product-right-side-section > .vc_column-inner {
padding: 24px 28px !important;
}
body.single-product .single-product-right-side-section .wd-single-title,
body.single-product .single-product-right-side-section .wd-single-price,
body.single-product .single-product-right-side-section .bg-price-vat-note,
body.single-product .single-product-right-side-section .bg-stock-sku,
body.single-product .single-product-right-side-section .wd-single-add-cart {
margin-bottom: 14px;
}
body.single-product .single-product-right-side-section .bg-price-vat-note {
margin-top: -6px;
color: #667085;
font-size: 13px;
}
/* Hide Codex's separator + compare/wishlist rows from the summary so the
buy panel feels cohesive. Re-show via JS-toggleable .bg-show-actions if
we want them back later. */
body.single-product .single-product-right-side-section .vc_separator,
body.single-product .single-product-right-side-section .wd-single-action-btn {
display: none !important;
}
/* ---------- Item 3: Shipping-unavailable alert ----------
Plain text → compact info/warning card with subtle amber/neutral bg,
small icon glyph, sits inline near the delivery selector.
The text is emitted by the pisol shipping-calculator plugin inside
#pisol-ppscw-alert-container. */
body.single-product #pisol-ppscw-alert-container {
margin: 0 0 14px;
}
body.single-product #pisol-ppscw-alert-container .pisol-ppscw-alert {
background: #FFF8E1; /* warm amber-50 */
border: 1px solid #F2D680;
border-radius: 12px;
padding: 10px 14px 10px 38px;
font-size: 13.5px;
line-height: 1.5;
color: #6B4D00;
position: relative;
}
body.single-product #pisol-ppscw-alert-container .pisol-ppscw-alert::before {
content: "";
position: absolute;
left: 12px;
top: 12px;
width: 18px;
height: 18px;
background-color: #C77B00;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
body.single-product #pisol-ppscw-alert-container .pisol-ppscw-alert ul.pisol-ppscw-methods {
margin: 6px 0 0;
padding-left: 0;
list-style: none;
}
body.single-product #pisol-ppscw-alert-container .pisol-ppscw-alert ul.pisol-ppscw-methods li {
padding: 2px 0;
color: #2F3E13;
}
/* Style the postcode "Select delivery location" link as a proper button */
body.single-product .pisol-shipping-calculator-button {
display: inline-flex !important;
align-items: center;
gap: 8px;
background: transparent !important;
color: #F58220 !important;
border: 1px dashed #F58220 !important;
border-radius: 10px;
padding: 8px 14px !important;
font-weight: 600;
font-size: 14px;
text-decoration: none !important;
}
body.single-product .pisol-shipping-calculator-button:hover {
background: #FFF4E6 !important;
}
/* ---------- Items 5/6: Gallery — pure Woodmart Swiper, CSS-only frame ----
Owner brief 2026-05-26: stop fighting Woodmart's carousel. Let Swiper
manage the slides, the active state, the prev/next, and the touch swipe.
Our job here is just to:
- Lock the gallery wrapper to a 1:1 square frame
- Make the active image fit nicely inside via object-fit:contain
- Leave .zoomImg alone (it's the hover-zoom overlay, must stay
positioned absolutely with its own dimensions — selector :not(.zoomImg)
below)
- NOT touch .wd-carousel-item, .wd-carousel-wrap, .wd-carousel-inner,
.woocommerce-product-gallery__wrapper, etc. — those are Swiper's. */
/* Gallery frame (1:1 square, white surface, soft border, contained overflow) */
body.single-product .woocommerce-product-gallery,
body.single-product .wd-single-product-gallery {
aspect-ratio: 1 / 1;
position: relative;
background: #FFFFFF;
border: 1px solid #E2E8F0;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
/* Product image sizing — strictly scoped away from .zoomImg.
The :not(.zoomImg) gate prevents us from messing with the hover-zoom
overlay image that Woodmart absolutely-positions and animates with its
own width/height/transform. */
body.single-product .woocommerce-product-gallery__image > a > img:not(.zoomImg),
body.single-product .woocommerce-product-gallery__image > img:not(.zoomImg) {
max-width: 88%;
max-height: 88%;
width: auto;
height: auto;
object-fit: contain;
margin: 0 auto;
}
/* Defensive: hide any legacy .bg-gallery-nav markup if a cached page
still renders one before the JS gets purged. */
body.single-product .bg-gallery-nav {
display: none !important;
}
/* Single-slide enforcement.
Woodmart layout 880 uses the "Image with thumbs grid" gallery type,
which carries the .wd-off-lg class on .wd-carousel-container. That class
means "Swiper carousel is OFF at lg breakpoints" — on desktop the slides
render as block siblings, not as carousel slides, so without our removed
custom JS both .wd-carousel-item elements show stacked.
The brief requires a single visible slide. Until the gallery type is
switched to a true carousel in the layout 880 WPBakery editor (or the
"Image action" is set to anything other than "Image with thumbs grid"),
we keep only the first slide visible at the CSS level. Native Woodmart
.wd-nav-arrows still render but won't be operative because Swiper is
not bound — clicking thumbnails (if visible elsewhere on the page) is
how users browse images while the carousel mode is off. */
body.single-product .woocommerce-product-gallery .wd-carousel-item:not(:first-child),
body.single-product .wd-product-images .wd-carousel-item:not(:first-child) {
display: none !important;
}
/* ---------- Item 7: USP / trust strip ----------
Desktop: keep under gallery, slimmer, aligned with gallery edges.
Mobile: hide completely (already in earlier block but reasserted).
Never allow horizontal scroll. */
body.single-product .bg-product-trust {
margin-top: 14px;
padding: 12px 14px;
background: #FFFFFF;
border: 1px solid #E2E8F0;
border-radius: 14px;
box-shadow: none;
overflow: hidden;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
body.single-product .bg-product-trust__item {
gap: 10px;
min-width: 0;
}
body.single-product .bg-product-trust__icon {
width: 26px;
height: 26px;
}
body.single-product .bg-product-trust__icon svg {
width: 20px;
height: 20px;
color: #F58220;
}
body.single-product .bg-product-trust__title {
font-size: 13px;
margin-bottom: 2px;
color: #101828;
}
body.single-product .bg-product-trust__copy {
font-size: 12px;
line-height: 1.45;
color: #667085;
max-width: 28ch;
/* never overflow horizontally */
overflow-wrap: anywhere;
}
@media (max-width: 767px) {
body.single-product .bg-product-trust {
display: none !important;
}
}
/* ---------- Item 8: Payment methods — single block, responsive grid ----
Brief asks for "Desktop 6 cols, mobile 3 cols, single block".
Two markers exist in the DOM:
- .bg-payment-logos (mu-plugin SVG pills) — flexible, responsive
- .wd-image img[src*="payment-list"] (Codex's PNG of all 6 logos) — fixed
The PNG is one block, can't be a grid. Hide it. Use the pill block as a
6/3 responsive grid. Pills are placeholder-quality (text-on-color); real
brand SVGs land later via DISPATCH-003 (image-gen) — when they do, the
bg_product_pm_* functions in bg-product-page.php swap to ![]()
. */
body.single-product .single-product-right-side-section .wd-image img[src*="payment-list"] {
display: none !important;
}
body.single-product .bg-payment-logos {
display: grid !important;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 8px;
margin: 14px 0 8px;
padding: 10px 12px;
background: #F6F7F9;
border: 1px solid #E2E8F0;
border-radius: 12px;
max-width: 100%;
margin-left: 0;
}
body.single-product .bg-payment-logos > span {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
}
body.single-product .bg-payment-logos svg,
body.single-product .bg-payment-logos img {
height: 22px;
width: auto;
max-width: 100%;
display: block;
}
@media (max-width: 600px) {
body.single-product .bg-payment-logos {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* ---------- Item 9: Tabs — segmented + orange active accent + mobile h-scroll ---
Desktop: rounded outline pill segment, active gets orange border + bg.
Mobile: single row that scrolls horizontally instead of wrapping. */
body.single-product .woocommerce-tabs.wc-tabs-wrapper {
background: #FFFFFF;
border: 1px solid #E2E8F0;
border-radius: 18px;
padding: 24px 28px;
margin-top: 20px;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
body.single-product .woocommerce-tabs ul.wc-tabs,
body.single-product .woocommerce-tabs ul.tabs {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
gap: 8px;
margin: 0 0 22px;
padding: 4px;
background: #F6F7F9;
border: 1px solid #E2E8F0;
border-radius: 14px;
scrollbar-width: none;
}
body.single-product .woocommerce-tabs ul.wc-tabs::-webkit-scrollbar,
body.single-product .woocommerce-tabs ul.tabs::-webkit-scrollbar {
display: none;
}
body.single-product .woocommerce-tabs ul.wc-tabs li,
body.single-product .woocommerce-tabs ul.tabs li {
flex: 0 0 auto;
margin: 0;
padding: 0;
background: transparent;
border: 0;
border-radius: 10px;
}
body.single-product .woocommerce-tabs ul.wc-tabs li a,
body.single-product .woocommerce-tabs ul.tabs li a {
display: inline-block;
padding: 9px 16px;
font-size: 14px;
font-weight: 600;
color: #667085;
border: 1px solid transparent;
border-radius: 10px;
background: transparent;
white-space: nowrap;
transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
body.single-product .woocommerce-tabs ul.wc-tabs li a:hover,
body.single-product .woocommerce-tabs ul.tabs li a:hover {
color: #101828;
}
body.single-product .woocommerce-tabs ul.wc-tabs li.active a,
body.single-product .woocommerce-tabs ul.tabs li.active a {
color: #101828;
background: #FFFFFF;
border-color: #F58220;
box-shadow: inset 0 -2px 0 #F58220;
}