/*
Theme Name: Avada Child
Theme URI: https://zoeymom.com
Description: Avada child theme for zoeymom.com — "The Organic Curator" design system (forest green, Plus Jakarta Sans + Be Vietnam Pro). See Design-system.md.
Author: Legna Studios
Author URI: https://github.com/Legna-Studios
Template: Avada
Version: 0.6.6
Text Domain: avada-child
*/
/* ==================================================================
Zoeymom design tokens — "The Organic Curator"
Source: docs/design-system.md (Stitch screen ae38ad5bb8104cecadd75f0b5dd8888b)
================================================================== */
:root {
/* Primary (deep forest green — the brand/action colour) */
--zm-primary: #3a4d39; /* forest green (design "Primary") */
--zm-primary-container: #b7cdb2; /* light sage — accents/italic */
--zm-primary-dim: #243624; /* darkest forest — hover */
--zm-on-primary: #FFFFFF;
/* Secondary (warm parchment) */
--zm-secondary: #EBE2CD;
--zm-secondary-container: #CEC6B2;
--zm-on-secondary: #1F1B17;
/* Surfaces (warm cream paper stock) */
--zm-background: #FFF8F4;
--zm-surface: #FFF8F4;
--zm-surface-variant: #EAE1DA;
--zm-surface-container-low: #FBF2EB;
--zm-surface-container: #F5ECE5;
--zm-surface-container-high: #EFE7E0;
--zm-surface-container-highest: #EAE1DA;
/* Foreground / outline */
--zm-on-background: #1F1B17;
--zm-on-surface: #1F1B17;
--zm-on-surface-variant: #434842;
--zm-outline: #747871;
--zm-outline-variant: #C3C8BF;
--zm-tertiary: #645E4E; /* warm neutral — muted notes */
/* Error */
--zm-error: #BA1A1A;
--zm-error-container: #FFDAD6;
--zm-on-error: #FFFFFF;
/* Inverse */
--zm-inverse-surface: #34302B;
--zm-inverse-on-surface: #F8EFE8;
--zm-inverse-primary: #B7CDB2;
/* Typography — dual sans-serif pairing
Headlines: Plus Jakarta Sans (geometric, optimistic)
Body/label: Be Vietnam Pro (humanist, legible) */
--zm-font-headline: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
--zm-font-body: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
--zm-font-label: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
/* Spacing scale (rems) */
--zm-space-1: 0.25rem;
--zm-space-2: 0.5rem;
--zm-space-3: 0.75rem;
--zm-space-4: 1rem;
--zm-space-6: 1.5rem;
--zm-space-8: 2rem;
--zm-space-10: 2.5rem;
--zm-space-12: 3rem;
--zm-space-16: 4rem;
--zm-space-20: 5rem;
--zm-space-24: 6rem;
/* Radius (Organic Curator uses 8px default) */
--zm-radius-sm: 0.25rem;
--zm-radius-md: 0.5rem; /* default 8px */
--zm-radius-lg: 1rem; /* 16px cards */
--zm-radius-xl: 1.5rem; /* 24px hero */
--zm-radius-full: 9999px;
/* Elevation — forest-tinted ambient shadows (primary #3a4d39 = rgb 58,77,57) */
--zm-shadow-card: 0 1px 3px rgba(31, 27, 23, 0.05), 0 1px 2px rgba(31, 27, 23, 0.05);
--zm-shadow-card-hover: 0 8px 24px -8px rgba(58, 77, 57, 0.18);
--zm-shadow-editorial: 0 10px 30px -10px rgba(58, 77, 57, 0.18);
--zm-shadow-newsletter: 0 20px 40px -20px rgba(58, 77, 57, 0.15);
--zm-shadow-cta: 0 10px 20px -10px rgba(58, 77, 57, 0.32);
}
/* ==================================================================
Base typography — applied globally
================================================================== */
body {
font-family: var(--zm-font-body);
color: var(--zm-on-background);
background-color: var(--zm-background);
}
/* Avada drops several wrappers between the header section and our home page
sections, each defaulting to white. Pull them all to the cream background
so the gap between sections never flashes pure white when scrolling. */
html,
#boxed-wrapper,
#wrapper,
#main,
.fusion-page-content-wrap,
.fusion-page-content,
.fusion-content-widget-area,
.fusion-tb-footer,
.fusion-tb-header,
.avada-page-titlebar-wrapper {
background-color: var(--zm-background) !important;
}
/* Remove the default vertical spacing Avada injects around #main; our home
sections supply their own padding. */
#main {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--zm-font-headline);
color: var(--zm-primary);
font-weight: 800;
letter-spacing: -0.01em;
}
h1 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
h2 { font-weight: 800; line-height: 1.15; }
h3 { font-weight: 700; line-height: 1.3; }
h4, h5, h6 { font-weight: 700; line-height: 1.4; }
a {
color: var(--zm-primary);
transition: color 0.2s ease;
}
a:hover, a:focus {
color: var(--zm-primary-dim);
}
/* Soft warm grey text — never pure black */
strong, b { color: var(--zm-on-surface); }
/* ==================================================================
Type-scale utility classes
================================================================== */
.zm-display-lg { font-family: var(--zm-font-headline); font-weight: 800; font-size: 4.5rem; line-height: 1.05; letter-spacing: -0.02em; color: var(--zm-primary); }
.zm-display-md { font-family: var(--zm-font-headline); font-weight: 800; font-size: 3rem; line-height: 1.15; letter-spacing: -0.01em; color: var(--zm-primary); }
.zm-display-sm { font-family: var(--zm-font-headline); font-weight: 800; font-size: 2.25rem; line-height: 1.2; color: var(--zm-primary); }
.zm-headline-lg { font-family: var(--zm-font-headline); font-weight: 700; font-size: 1.875rem; line-height: 1.25; color: var(--zm-primary); }
.zm-headline-md { font-family: var(--zm-font-headline); font-weight: 700; font-size: 1.5rem; line-height: 1.3; color: var(--zm-primary); }
.zm-headline-sm { font-family: var(--zm-font-headline); font-weight: 700; font-size: 1.25rem; line-height: 1.35; color: var(--zm-primary); }
.zm-title { font-family: var(--zm-font-headline); font-weight: 700; font-size: 1.125rem; line-height: 1.4; color: var(--zm-on-surface); }
.zm-body-lg { font-family: var(--zm-font-body); font-weight: 400; font-size: 1.125rem; line-height: 1.65; color: var(--zm-on-surface-variant); }
.zm-body { font-family: var(--zm-font-body); font-weight: 400; font-size: 1rem; line-height: 1.6; color: var(--zm-on-surface-variant); }
.zm-body-sm { font-family: var(--zm-font-body); font-weight: 400; font-size: 0.875rem; line-height: 1.55; color: var(--zm-on-surface-variant); }
/* Eyebrow / over-line label — sage colour, uppercase, wide tracking */
.zm-eyebrow,
.zm-subheading {
font-family: var(--zm-font-label);
font-weight: 700;
font-size: 0.75rem;
line-height: 1.3;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--zm-primary);
}
/* Italic accent inside hero headlines (e.g. "The Art of *Nurturing*") */
.zm-italic-accent {
font-style: italic;
color: var(--zm-primary-container);
font-weight: inherit;
}
/* ==================================================================
Button utilities (used on .fusion-button via class= override)
Solid sage primary, NO gradient.
================================================================== */
.zm-btn-primary,
a.zm-btn-primary {
display: inline-block;
font-family: var(--zm-font-body);
font-weight: 700;
font-size: 1.125rem;
line-height: 1.4;
padding: 1rem 2rem;
border-radius: var(--zm-radius-md);
text-decoration: none;
background: var(--zm-primary);
color: var(--zm-on-primary);
box-shadow: var(--zm-shadow-cta);
border: none;
transition: background-color 0.2s ease;
}
.zm-btn-primary:hover,
a.zm-btn-primary:hover {
background: var(--zm-primary-dim);
color: var(--zm-on-primary);
}
.zm-btn-secondary,
a.zm-btn-secondary {
display: inline-block;
font-family: var(--zm-font-body);
font-weight: 700;
padding: 0.875rem 1.5rem;
border-radius: var(--zm-radius-md);
background: transparent;
color: var(--zm-primary);
border: 1px solid var(--zm-outline-variant);
text-decoration: none;
transition: background-color 0.2s ease;
}
.zm-btn-secondary:hover { background: var(--zm-surface-container-low); }
.zm-btn-tertiary,
a.zm-btn-tertiary {
background: none;
color: var(--zm-primary);
padding: 0;
text-decoration: none;
}
.zm-btn-tertiary:hover { text-decoration: underline; }
/* Apply primary style to any Fusion button that opts in via class="zm-btn-primary" */
.fusion-button.zm-btn-primary,
a.fusion-button.zm-btn-primary {
background: var(--zm-primary) !important;
background-image: none !important;
border: none !important;
color: var(--zm-on-primary) !important;
border-radius: var(--zm-radius-md) !important;
font-family: var(--zm-font-body) !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
padding: 1rem 2rem !important;
text-transform: none;
box-shadow: var(--zm-shadow-cta);
transition: background-color 0.2s ease;
}
.fusion-button.zm-btn-primary:hover,
a.fusion-button.zm-btn-primary:hover {
background: var(--zm-primary-dim) !important;
color: var(--zm-on-primary) !important;
}
.fusion-button.zm-btn-tertiary,
a.fusion-button.zm-btn-tertiary {
background: transparent !important;
background-image: none !important;
color: var(--zm-primary) !important;
border: none !important;
box-shadow: none !important;
padding: 0.5rem 0 !important;
font-family: var(--zm-font-body) !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
}
.fusion-button.zm-btn-tertiary:hover {
color: var(--zm-primary-dim) !important;
text-decoration: underline;
}
/* ==================================================================
Fusion Builder element overrides
================================================================== */
/* Container width */
.fusion-fullwidth.fusion-builder-row-live > .fusion-row,
.fusion-builder-row .fusion-row {
max-width: 1280px;
}
/* Eyebrow / subhead via fusion_title class="zm-subheading" */
.fusion-title.zm-subheading h1,
.fusion-title.zm-subheading h2,
.fusion-title.zm-subheading h3,
.fusion-title.zm-subheading h4,
.fusion-title.zm-subheading h5,
.fusion-title.zm-subheading h6,
.fusion-title.zm-eyebrow h1,
.fusion-title.zm-eyebrow h2,
.fusion-title.zm-eyebrow h3,
.fusion-title.zm-eyebrow h4,
.fusion-title.zm-eyebrow h5,
.fusion-title.zm-eyebrow h6 {
font-family: var(--zm-font-label) !important;
font-weight: 700 !important;
font-size: 0.75rem !important;
line-height: 1.3;
letter-spacing: 0.15em !important;
text-transform: uppercase;
color: var(--zm-primary) !important;
}
/* Display-size + headline titles get heavy Plus Jakarta Sans weight */
.fusion-title.zm-display-lg h1,
.fusion-title.zm-display-lg h2 {
font-family: var(--zm-font-headline) !important;
font-weight: 800 !important;
color: var(--zm-primary) !important;
}
.fusion-title.zm-display-md h1,
.fusion-title.zm-display-md h2 {
font-family: var(--zm-font-headline) !important;
font-weight: 800 !important;
color: var(--zm-primary) !important;
}
.fusion-title.zm-display-sm h1,
.fusion-title.zm-display-sm h2,
.fusion-title.zm-display-sm h3 {
font-family: var(--zm-font-headline) !important;
font-weight: 800 !important;
color: var(--zm-primary) !important;
}
/* Italic-accent inline span inside a fusion_title — span class added in shortcode */
.fusion-title .zm-italic-accent {
font-style: italic;
color: var(--zm-primary-container) !important;
font-weight: inherit;
}
/* ------------------------------------------------------------------
Woo product card — Avada renders products with .fusion-product-wrapper
containing .product-images (link with featured image) + .fusion-product-content
containing .product-details > .product-details-container > h3.product-title
+ .fusion-price-rating .price, then sibling .add_to_cart_button + .show_details_button.
NOT .woocommerce-loop-product__title (that's vanilla WC; Avada replaces it).
------------------------------------------------------------------ */
ul.products li.product,
.products.product-grid .product,
.fusion-woo-product-grid-element .product {
background: transparent;
border-radius: var(--zm-radius-lg);
overflow: visible;
border: none !important;
}
/* White card with padding + ambient shadow (Stitch shop design) */
ul.products li.product .fusion-product-wrapper {
display: flex;
flex-direction: column;
background: var(--zm-surface-container-lowest, #ffffff);
border-radius: 0.75rem;
overflow: hidden;
border: none !important;
box-shadow: 0 4px 40px -5px rgba(31, 27, 23, 0.06) !important;
padding: 0.75rem !important;
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
ul.products li.product:hover .fusion-product-wrapper {
box-shadow: 0 12px 48px -8px rgba(31, 27, 23, 0.12) !important;
}
ul.products li.product .fusion-product-wrapper > .product-images,
ul.products li.product .fusion-product-wrapper a.product-images,
ul.products li.product .fusion-product-wrapper .featured-image {
display: block;
position: relative;
overflow: hidden;
border-radius: var(--zm-radius-md, 0.5rem);
background: var(--zm-surface-container);
margin-bottom: var(--zm-space-4);
aspect-ratio: 4 / 5;
}
ul.products li.product .fusion-product-wrapper .featured-image img,
ul.products li.product .fusion-product-wrapper > .product-images img,
ul.products li.product .fusion-product-wrapper a.product-images img {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
display: block;
object-fit: cover;
object-position: center top;
transition: transform 0.5s ease;
}
ul.products li.product:hover .fusion-product-wrapper .featured-image img {
transform: scale(1.05);
}
/* Product content — title (left) + price (right) on one row, CTA below.
Avada renders .product-details (title), .fusion-price-rating (price) and
.add_to_cart_button as stacked siblings; the grid re-flows them. */
ul.products li.product .fusion-product-content {
display: grid !important;
grid-template-columns: 1fr auto;
grid-template-areas:
"title price"
"cart cart";
align-items: start;
column-gap: 0.75rem;
flex: 1 1 auto;
padding: 0 0.25rem 0.25rem !important;
background: transparent;
text-align: left;
}
ul.products li.product .product-details {
grid-area: title;
padding: 0;
background: transparent;
min-width: 0;
}
ul.products li.product .product-details-container {
padding: 0;
background: transparent;
}
ul.products li.product .fusion-price-rating {
grid-area: price;
align-self: start;
margin: 0 !important;
}
/* Title — Avada uses h3.product-title with anchor inside.
min-height reserves 2 lines so cards with 1-line and 2-line titles
keep their Add-to-cart button at the same vertical position. */
ul.products li.product .product-title,
ul.products li.product h3.product-title {
font-family: var(--zm-font-headline) !important;
font-weight: 600 !important;
font-size: 1.0625rem !important;
line-height: 1.3 !important;
color: var(--zm-on-surface) !important;
margin: 0 0 0.25rem !important;
padding: 0;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
ul.products li.product .product-title a,
ul.products li.product h3.product-title a {
color: var(--zm-on-surface) !important;
text-decoration: none;
font-family: var(--zm-font-headline) !important;
font-weight: 700 !important;
}
ul.products li.product .product-title a:hover,
ul.products li.product h3.product-title a:hover {
color: var(--zm-primary) !important;
}
/* Price — forced sage, NOT default blue link colour */
ul.products li.product .fusion-price-rating,
ul.products li.product .price {
color: var(--zm-primary) !important;
font-family: var(--zm-font-headline) !important;
}
ul.products li.product .fusion-price-rating .price,
ul.products li.product .price,
ul.products li.product .price .amount,
ul.products li.product .price .woocommerce-Price-amount,
ul.products li.product .price bdi,
ul.products li.product .price .woocommerce-Price-currencySymbol {
color: var(--zm-primary) !important;
font-family: var(--zm-font-headline) !important;
font-weight: 700 !important;
font-size: 1.0625rem !important;
text-decoration: none !important;
background: transparent !important;
white-space: nowrap;
}
/* Avada's "classic" product box design — the one this site runs — wraps the
loop buttons in .product-buttons > .product-buttons-container, so that
wrapper, not the , is the grid item. With no area of its own it
auto-places into the empty "price" column, which is `auto`-sized, so the
button collapses to its min-content width and the label wraps over three
lines. Give the wrapper the cart area; the bare rendered when the
design option is unset carries the same area below. (The "clean" design
puts these buttons in an image rollover overlay outside this grid.) */
ul.products li.product .product-buttons {
grid-area: cart;
width: 100%;
margin: 0;
padding: 0;
background: transparent;
border: none;
}
ul.products li.product .product-buttons-container {
display: block;
width: 100%;
margin: 0;
padding: 0;
}
/* Classic design draws a rule above the buttons — the card design has none */
ul.products li.product .product-buttons .fusion-content-sep {
display: none !important;
}
/* Avada add-to-cart button — full-width CTA below the title/price row */
ul.products li.product .add_to_cart_button,
ul.products li.product a.button {
grid-area: cart;
display: block !important;
width: 100% !important;
max-width: none !important;
float: none !important;
text-align: center !important;
background: var(--zm-primary) !important;
background-image: none !important;
color: var(--zm-on-primary) !important;
font-family: var(--zm-font-body) !important;
font-weight: 600 !important;
font-size: 0.8125rem !important;
letter-spacing: 0.01em !important;
text-transform: none !important;
padding: 0.7rem 1.25rem !important;
border: none !important;
border-radius: var(--zm-radius-md) !important;
box-shadow: none !important;
margin: 1rem 0 0 !important;
text-decoration: none !important;
line-height: 1.4 !important;
transition: background 0.15s ease !important;
}
ul.products li.product .add_to_cart_button:hover,
ul.products li.product .show_details_button:hover,
ul.products li.product a.button:hover {
background: var(--zm-primary-dim) !important;
color: var(--zm-on-primary) !important;
}
/* "Details"/quick-view link is hidden — single "Add to cart" CTA per Stitch design */
ul.products li.product .show_details_button,
ul.products li.product .fusion-quickview-button,
ul.products li.product a.show_details_button {
display: none !important;
}
/* If there's a non-button helper text (e.g. "Read more"), tame it */
ul.products li.product .added_to_cart {
margin-left: 0.5rem;
color: var(--zm-primary);
font-size: 0.8125rem;
}
/* ==================================================================
Featured products slider — match Stitch's 4-up grid with 3:4 portrait
cards. Avada's slider uses Swiper.js with a different DOM than the
normal Woo product grid, so we re-apply the aspect/cover rules here.
================================================================== */
/* Cap the slider's outer wrapper to match the rest of the home page */
.zm-product-carousel { max-width: 1280px; margin-left: auto !important; margin-right: auto !important; }
/* Each swiper slide is one card — force exactly 4 visible on desktop */
.zm-product-carousel .swiper-slide {
box-sizing: border-box;
width: calc((100% - 72px) / 4) !important;
max-width: calc((100% - 72px) / 4) !important;
margin-right: 24px !important;
flex-shrink: 0 !important;
}
.zm-product-carousel .swiper-slide:last-child { margin-right: 0 !important; }
/* Tablet — 2 up */
@media (max-width: 991px) {
.zm-product-carousel .swiper-slide {
width: calc((100% - 24px) / 2) !important;
max-width: calc((100% - 24px) / 2) !important;
}
}
/* Mobile — 1 up */
@media (max-width: 640px) {
.zm-product-carousel .swiper-slide {
width: 100% !important;
max-width: 100% !important;
margin-right: 0 !important;
}
}
/* Every wrapper between the slide and the image must be a block stretching
to the full slide width — otherwise aspect-ratio has no width to compute
a height from and the image collapses to 0 px tall. */
.zm-product-carousel .fusion--product-image-wrapper,
.zm-product-carousel .fusion-carousel-item-wrapper {
display: block !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* The image frame — force 3:4 aspect + cover crop */
.zm-product-carousel .fusion-image-wrapper,
.zm-product-carousel .fusion--product-image-wrapper .fusion-image-wrapper {
display: block !important;
width: 100% !important;
position: relative !important;
aspect-ratio: 3 / 4 !important;
overflow: hidden !important;
border-radius: var(--zm-radius-lg) !important;
background: var(--zm-surface-container-low) !important;
margin: 0 0 1rem !important;
}
.zm-product-carousel .fusion-image-wrapper img,
.zm-product-carousel .fusion--product-image-wrapper img {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
object-position: center top !important;
transition: transform 0.5s ease !important;
}
.zm-product-carousel .swiper-slide:hover .fusion-image-wrapper img {
transform: scale(1.05) !important;
}
/* Title + price below image */
.zm-product-carousel .fusion-carousel-title,
.zm-product-carousel .fusion-carousel-title a {
font-family: var(--zm-font-headline) !important;
font-weight: 700 !important;
font-size: 1.0625rem !important;
line-height: 1.3 !important;
color: var(--zm-on-surface) !important;
text-decoration: none !important;
margin: 0 0 0.25rem !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.6em;
}
.zm-product-carousel .fusion-carousel-title a:hover { color: var(--zm-primary) !important; }
.zm-product-carousel .fusion-carousel-price,
.zm-product-carousel .price,
.zm-product-carousel .price .amount,
.zm-product-carousel .price bdi {
font-family: var(--zm-font-headline) !important;
font-weight: 600 !important;
font-size: 0.9375rem !important;
color: var(--zm-primary) !important;
}
.zm-product-carousel .fusion-carousel-meta { padding: 0 !important; text-align: left !important; }
.zm-product-carousel .fusion-carousel-item-wrapper { padding: 0 !important; }
/* Hide Avada's rollover overlay — Stitch design shows static title/price below */
.zm-product-carousel .fusion-rollover { display: none !important; }
/* Product carousel — sage navigation arrows matching Stitch design.
Avada uses Swiper.js for sliders: arrow buttons are
.awb-swiper-button.awb-swiper-button-prev / .awb-swiper-button-next */
.zm-product-carousel .awb-swiper-button,
.fusion-woo-featured-products-slider .awb-swiper-button {
width: 3rem !important;
height: 3rem !important;
background: var(--zm-surface-container-highest) !important;
color: var(--zm-primary) !important;
border: 1px solid color-mix(in srgb, var(--zm-outline-variant) 50%, transparent) !important;
border-radius: var(--zm-radius-full) !important;
box-shadow: 0 2px 8px rgba(74, 74, 74, 0.06) !important;
transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
opacity: 1 !important;
}
.zm-product-carousel .awb-swiper-button::after,
.zm-product-carousel .awb-swiper-button::before,
.fusion-woo-featured-products-slider .awb-swiper-button::after,
.fusion-woo-featured-products-slider .awb-swiper-button::before {
color: inherit !important;
font-size: 1rem !important;
font-weight: 700 !important;
}
.zm-product-carousel .awb-swiper-button:hover,
.fusion-woo-featured-products-slider .awb-swiper-button:hover {
background: var(--zm-primary) !important;
color: var(--zm-on-primary) !important;
transform: scale(0.95);
}
/* Disable state — soft fade */
.zm-product-carousel .awb-swiper-button.swiper-button-disabled,
.fusion-woo-featured-products-slider .awb-swiper-button.swiper-button-disabled {
opacity: 0.4 !important;
cursor: not-allowed;
}
/* Product category tile */
.fusion-woo-product-categories ul.products li.product-category {
border-radius: var(--zm-radius-lg);
overflow: hidden;
aspect-ratio: 1;
}
.fusion-woo-product-categories ul.products li.product-category h3,
.fusion-woo-product-categories ul.products li.product-category h2 {
font-family: var(--zm-font-headline);
font-weight: 700;
color: var(--zm-primary);
}
/* Section padding safety net */
.fusion-builder-row .fusion-row > .fusion-layout-column {
margin-bottom: 0;
}
/* ==================================================================
Site header (Avada Layout Section)
Single-column [fusion_text] with custom HTML — see build-header-footer.php.
================================================================== */
.zm-header.fusion-fullwidth,
.zm-header {
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid color-mix(in srgb, var(--zm-outline-variant) 50%, transparent);
z-index: 100;
}
/* Avada's default 1.92% column spacing + flex-start alignment was shrinking
our header to content width on the left. Force the column wrappers to
100% width with no internal margin so .zm-hdr can centre via margin auto. */
.zm-header .fusion-layout-column,
.zm-header .fusion-column-wrapper {
width: 100% !important;
max-width: 100% !important;
flex: 1 1 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.zm-header .fusion-column-wrapper {
display: block !important;
}
.zm-header .zm-header-inner,
.zm-header .zm-header-inner p {
margin: 0 !important;
padding: 0 !important;
max-width: none !important;
width: 100%;
}
.zm-header .zm-header-inner br { display: none; }
.zm-header .zm-header-inner > p,
.zm-header .zm-header-inner p:not([class]) { display: contents !important; }
.zm-hdr {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 16px 1.5rem;
box-sizing: border-box;
}
.zm-hdr-left {
display: flex;
align-items: center;
gap: 2rem;
}
.zm-hdr-logo {
display: block;
width: 76px;
height: 40px;
background: url("assets/images/logo.png") left center / contain no-repeat;
/* Wordmark text stays in the DOM (screen readers / SEO) but is hidden visually. */
text-indent: -9999px;
overflow: hidden;
white-space: nowrap;
text-decoration: none !important;
transition: opacity 0.15s ease;
}
.zm-hdr-logo:hover { opacity: 0.75; }
.zm-hdr-nav {
display: flex;
align-items: center;
gap: 1.75rem;
}
.zm-hdr-nav a {
font-family: var(--zm-font-headline);
font-size: 0.9375rem;
font-weight: 500;
color: var(--zm-on-surface-variant) !important;
text-decoration: none !important;
padding-bottom: 4px;
transition: color 0.15s ease, border-color 0.15s ease;
border-bottom: 2px solid transparent;
}
.zm-hdr-nav a:hover,
.zm-hdr-nav a:focus,
.zm-hdr-nav a.current,
.zm-hdr-nav a[aria-current="page"] {
color: var(--zm-primary) !important;
border-bottom-color: color-mix(in srgb, var(--zm-primary) 40%, transparent);
}
.zm-hdr-right {
display: flex;
align-items: center;
gap: 0.25rem;
}
.zm-hdr-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
color: var(--zm-primary) !important;
background: transparent;
border-radius: var(--zm-radius-full);
text-decoration: none !important;
transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.zm-hdr-icon svg {
width: 20px;
height: 20px;
display: block;
}
.zm-hdr-icon:hover {
background: var(--zm-primary);
color: var(--zm-on-primary) !important;
transform: scale(0.95);
}
@media (max-width: 768px) {
.zm-hdr-nav { display: none; }
.zm-hdr { padding: 12px 0; }
}
/* ==================================================================
Site footer (Avada Layout Section)
Single-column [fusion_text] with custom HTML — see build-header-footer.php.
================================================================== */
.zm-footer {
background-color: var(--zm-surface-container-high) !important;
}
.zm-footer .zm-footer-inner,
.zm-footer .zm-footer-inner > p {
margin: 0 !important;
padding: 0 !important;
max-width: none !important;
}
.zm-footer .zm-footer-inner br { display: none; }
/* wpautop wrapping fix — collapse class-less paragraphs to layout-neutral */
.zm-footer .zm-footer-inner > p,
.zm-footer .zm-footer-inner p:not([class]) { display: contents !important; }
.zm-ftr-wrap {
max-width: 1280px;
margin: 0 auto;
padding: 0 1.5rem;
box-sizing: border-box;
}
.zm-ftr {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 3rem;
padding: 64px 0 32px;
align-items: start;
}
.zm-ftr-brand { max-width: 360px; }
.zm-ftr-title {
display: block;
width: 84px;
height: 44px;
background: url("assets/images/logo.png") left center / contain no-repeat;
/* Brand text stays in the DOM (screen readers / SEO) but is hidden visually. */
text-indent: -9999px;
overflow: hidden;
white-space: nowrap;
margin: 0 0 1rem !important;
}
.zm-ftr-tagline {
font-family: var(--zm-font-body);
font-size: 0.9375rem;
line-height: 1.65;
color: var(--zm-on-surface-variant);
margin: 0;
}
.zm-ftr-heading {
font-family: var(--zm-font-headline) !important;
font-size: 1rem !important;
font-weight: 700 !important;
color: var(--zm-primary) !important;
margin: 0 0 1rem !important;
letter-spacing: 0;
}
.zm-ftr-links {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.zm-ftr-links li { margin: 0 !important; line-height: 1.4; }
.zm-ftr-links a {
font-family: var(--zm-font-body);
font-size: 0.875rem;
color: var(--zm-on-surface-variant) !important;
text-decoration: none !important;
transition: color 0.15s ease;
}
.zm-ftr-links a:hover { color: var(--zm-primary) !important; }
.zm-ftr-social-row {
display: flex;
gap: 0.5rem;
margin-top: 0.25rem;
}
.zm-ftr-social {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
background: var(--zm-background);
color: var(--zm-primary) !important;
border: 1px solid color-mix(in srgb, var(--zm-outline-variant) 50%, transparent);
border-radius: var(--zm-radius-full);
text-decoration: none !important;
box-shadow: 0 1px 3px rgba(74, 74, 74, 0.04);
transition: background 0.15s ease, color 0.15s ease;
}
.zm-ftr-social svg { width: 16px; height: 16px; display: block; }
.zm-ftr-social:hover {
background: var(--zm-primary);
color: var(--zm-on-primary) !important;
}
.zm-ftr-strip {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 20px 0;
border-top: 1px solid color-mix(in srgb, var(--zm-primary) 15%, transparent);
font-family: var(--zm-font-body);
font-size: 0.8125rem;
color: var(--zm-on-surface-variant);
}
@media (max-width: 900px) {
.zm-ftr { grid-template-columns: 1fr 1fr; padding: 48px 0 24px; }
.zm-ftr-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
.zm-ftr { grid-template-columns: 1fr; gap: 2rem; }
.zm-ftr-strip { flex-direction: column; text-align: center; padding: 16px 0; }
}
/* ==================================================================
Hero floating quote card
Used on Home page hero section.
================================================================== */
.zm-quote-card {
background: #FFFFFF;
border-radius: var(--zm-radius-lg);
padding: var(--zm-space-6);
box-shadow: var(--zm-shadow-editorial);
border: 1px solid color-mix(in srgb, var(--zm-primary) 5%, transparent);
max-width: 260px;
}
.zm-quote-card p:first-child {
font-family: var(--zm-font-headline);
font-style: italic;
color: var(--zm-primary);
font-size: 1.125rem;
line-height: 1.3;
margin: 0 0 0.5rem;
}
.zm-quote-card p:last-child {
font-size: 0.7rem;
font-weight: 700;
color: var(--zm-on-surface-variant);
letter-spacing: 0.1em;
text-transform: uppercase;
margin: 0;
}
/* ==================================================================
Product card badges (Stitch pattern: rounded-full pill, top-left)
Avada doesn't expose these natively; we rely on WC's sale-flash slot
and our own class for "Bestseller" / "New".
================================================================== */
ul.products li.product .onsale,
.products .product .onsale {
background: var(--zm-primary) !important;
color: var(--zm-on-primary) !important;
border-radius: var(--zm-radius-full) !important;
font-family: var(--zm-font-body);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.25rem 0.75rem;
top: 1rem;
left: 1rem;
right: auto;
min-height: auto;
min-width: auto;
line-height: 1.4;
}
/* ==================================================================
Form inputs
================================================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-selection {
background: #FFFFFF !important;
border: 1px solid var(--zm-outline-variant) !important;
border-radius: var(--zm-radius-md) !important;
color: var(--zm-on-surface) !important;
font-family: var(--zm-font-body) !important;
padding: 0.875rem 1.25rem !important;
box-shadow: inset 0 1px 2px rgba(74, 74, 74, 0.04);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
textarea:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.select2-selection:focus {
border-color: var(--zm-primary) !important;
box-shadow: 0 0 0 3px rgba(58, 77, 57, 0.18) !important;
outline: none !important;
}
.woocommerce form .form-row label,
.woocommerce-checkout label,
form label {
color: var(--zm-on-surface) !important;
font-family: var(--zm-font-body) !important;
font-weight: 500;
font-size: 0.875rem !important;
letter-spacing: 0;
}
/* ==================================================================
WooCommerce — Cart
================================================================== */
.woocommerce-cart .woocommerce {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--zm-space-8);
align-items: start;
}
@media (max-width: 768px) {
.woocommerce-cart .woocommerce { grid-template-columns: 1fr; }
}
.woocommerce-cart table.shop_table {
border: none;
background: transparent;
border-collapse: collapse;
}
.woocommerce-cart table.shop_table th {
font-family: var(--zm-font-body);
font-weight: 700;
font-size: 0.75rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--zm-primary);
border: none;
padding: var(--zm-space-3) var(--zm-space-2);
}
.woocommerce-cart table.shop_table td {
border: none;
border-bottom: 1px solid var(--zm-outline-variant);
padding: var(--zm-space-4) var(--zm-space-2);
font-family: var(--zm-font-body);
color: var(--zm-on-surface);
}
.woocommerce-cart .product-thumbnail img {
border-radius: var(--zm-radius-md);
max-width: 80px;
height: auto;
}
.woocommerce-cart .product-name a {
color: var(--zm-on-surface);
font-family: var(--zm-font-headline);
font-weight: 700;
text-decoration: none;
}
.woocommerce-cart .product-name a:hover { color: var(--zm-primary); }
.woocommerce-cart .product-name .variation,
.woocommerce-checkout-review-order-table .product-name .variation {
margin-top: 0.375rem;
font-size: 0.8125rem;
color: var(--zm-on-surface-variant);
}
.woocommerce-cart .product-name .variation dt {
font-weight: 700;
color: var(--zm-on-surface);
}
.woocommerce-cart .cart-collaterals { width: 100% !important; margin-top: 0; }
.woocommerce-cart .cart_totals {
width: 100% !important;
background: var(--zm-surface-container-high);
padding: var(--zm-space-8);
border-radius: var(--zm-radius-lg);
position: sticky;
top: 100px;
}
.woocommerce-cart .cart_totals h2 {
font-family: var(--zm-font-headline);
font-size: 1.5rem;
font-weight: 800;
margin-bottom: var(--zm-space-4);
color: var(--zm-primary);
}
.woocommerce-cart .cart_totals table { background: transparent; }
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
border: none;
padding: 0.5rem 0;
background: transparent;
}
.woocommerce-cart .wc-proceed-to-checkout .button,
.woocommerce-cart .button {
background: var(--zm-primary) !important;
background-image: none !important;
color: var(--zm-on-primary) !important;
border-radius: var(--zm-radius-md) !important;
padding: 1rem 2rem !important;
border: none !important;
font-family: var(--zm-font-body);
font-weight: 700;
box-shadow: var(--zm-shadow-cta);
transition: background-color 0.2s ease;
}
.woocommerce-cart .button:hover,
.woocommerce-cart .wc-proceed-to-checkout .button:hover {
background: var(--zm-primary-dim) !important;
}
.cart-empty,
.wc-empty-cart-message {
text-align: center;
font-family: var(--zm-font-headline);
font-size: 1.5rem;
color: var(--zm-on-surface-variant);
padding: var(--zm-space-10) 0 var(--zm-space-4);
}
/* ==================================================================
WooCommerce — Checkout
================================================================== */
.woocommerce-checkout form.checkout {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: var(--zm-space-8);
align-items: start;
}
@media (max-width: 768px) {
.woocommerce-checkout form.checkout { grid-template-columns: 1fr; }
}
.woocommerce-checkout #customer_details { width: 100% !important; }
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review { width: 100% !important; }
.woocommerce-checkout #order_review {
background: var(--zm-surface-container-high);
padding: var(--zm-space-8);
border-radius: var(--zm-radius-lg);
position: sticky;
top: 100px;
}
.woocommerce-checkout h3 {
font-family: var(--zm-font-headline);
font-size: 1.5rem;
font-weight: 800;
margin-bottom: var(--zm-space-4);
color: var(--zm-primary);
}
.woocommerce-checkout #place_order {
background: var(--zm-primary) !important;
background-image: none !important;
border: none !important;
border-radius: var(--zm-radius-md) !important;
padding: 1rem 2rem !important;
font-family: var(--zm-font-body);
font-weight: 700;
width: 100%;
color: var(--zm-on-primary) !important;
margin-top: var(--zm-space-4);
box-shadow: var(--zm-shadow-cta);
transition: background-color 0.2s ease;
}
.woocommerce-checkout #place_order:hover { background: var(--zm-primary-dim) !important; }
.woocommerce-checkout table.shop_table {
border: none;
background: transparent;
}
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
border: none;
border-bottom: 1px solid var(--zm-outline-variant);
padding: 0.75rem 0;
background: transparent;
}
.woocommerce-checkout #shipping_method li { padding: 0.5rem 0; }
.woocommerce-checkout #shipping_method input[type="radio"] {
accent-color: var(--zm-primary);
}
/* ==================================================================
WooCommerce — My Account
================================================================== */
.woocommerce-account.logged-in .woocommerce {
display: grid;
grid-template-columns: 240px 1fr;
gap: var(--zm-space-8);
align-items: start;
}
@media (max-width: 768px) {
.woocommerce-account.logged-in .woocommerce { grid-template-columns: 1fr; }
}
.woocommerce-MyAccount-navigation {
background: var(--zm-surface-container-high);
border-radius: var(--zm-radius-lg);
padding: var(--zm-space-4);
}
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; }
.woocommerce-MyAccount-navigation li { margin-bottom: 0.25rem; }
.woocommerce-MyAccount-navigation li a {
display: block;
padding: 0.75rem 1rem;
border-radius: var(--zm-radius-md);
font-family: var(--zm-font-body);
font-size: 0.9375rem;
color: var(--zm-on-surface);
text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease;
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
background: var(--zm-primary);
color: var(--zm-on-primary);
}
.woocommerce-MyAccount-content {
background: #FFFFFF;
border-radius: var(--zm-radius-lg);
padding: var(--zm-space-8);
box-shadow: var(--zm-shadow-card);
}
.woocommerce-account:not(.logged-in) .u-columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--zm-space-8);
}
.woocommerce-account:not(.logged-in) .u-columns > .col-1,
.woocommerce-account:not(.logged-in) .u-columns > .col-2 {
width: 100% !important;
background: var(--zm-surface-container-high);
padding: var(--zm-space-8);
border-radius: var(--zm-radius-lg);
float: none !important;
}
@media (max-width: 768px) {
.woocommerce-account:not(.logged-in) .u-columns { grid-template-columns: 1fr; }
}
.woocommerce-orders-table thead th {
font-family: var(--zm-font-body);
font-weight: 700;
font-size: 0.75rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--zm-primary);
background: transparent;
border: none;
}
.woocommerce-orders-table tbody td {
font-family: var(--zm-font-body);
border-bottom: 1px solid var(--zm-outline-variant);
}
.woocommerce-orders-table .order-status {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: var(--zm-radius-full);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
background: var(--zm-surface-container-highest);
color: var(--zm-on-surface);
}
.woocommerce-MyAccount-content .button,
.woocommerce-account .button {
background: var(--zm-primary) !important;
background-image: none !important;
color: var(--zm-on-primary) !important;
border-radius: var(--zm-radius-md) !important;
padding: 0.75rem 1.5rem !important;
border: none !important;
font-family: var(--zm-font-body);
font-weight: 700;
box-shadow: var(--zm-shadow-cta);
}
.woocommerce-MyAccount-content .button:hover,
.woocommerce-account .button:hover { background: var(--zm-primary-dim) !important; }
/* ==================================================================
Single Product Page — Stitch layout polish
================================================================== */
.zm-breadcrumbs,
.zm-breadcrumbs .fusion-breadcrumbs {
font-family: var(--zm-font-body) !important;
font-size: 0.8125rem !important;
color: var(--zm-on-surface-variant) !important;
letter-spacing: 0.02em;
}
.zm-breadcrumbs a {
color: var(--zm-on-surface-variant) !important;
text-decoration: none !important;
}
.zm-breadcrumbs a:hover { color: var(--zm-primary) !important; }
.zm-breadcrumbs .sep { margin: 0 0.5rem; color: var(--zm-outline); }
/* Title rendered by [zm_product_title] */
.zm-product-title {
font-family: var(--zm-font-headline) !important;
font-size: 2.25rem !important;
font-weight: 800 !important;
line-height: 1.15 !important;
letter-spacing: -0.01em;
color: var(--zm-on-surface) !important;
margin: 0 0 1rem !important;
}
@media (min-width: 992px) {
.zm-product-title { font-size: 2.75rem !important; }
}
/* Avada wraps the Woo price in .fusion-tb-woocommerce — pull it to sage */
.zm-product-details .fusion-tb-woocommerce.price,
.zm-product-details .price,
.zm-product-details .price .amount,
.zm-product-details .price .woocommerce-Price-amount,
.zm-product-details .price bdi {
color: var(--zm-primary) !important;
font-family: var(--zm-font-headline) !important;
font-weight: 600 !important;
}
/* Stock count.
WooCommerce prints 5 in stock
twice on this
layout: once inside the price element (right under the price, which is where
it reads best) and once again just above the cart form. Both used to be
hidden, which is why no stock line appeared at all.
Show the one under the price; keep the form-level duplicate hidden. The
three-class selector outranks the two-class hide rule below, so order here
does not matter. Exact numbers come from WooCommerce's own stock_format
option — set it to "Only show quantity remaining when low" in
WooCommerce → Settings → Products → Inventory to switch to "Only 2 left". */
.zm-product-details .fusion-woo-price-tb .stock {
display: block !important;
margin: 0.5rem 0 0 !important;
font-family: var(--zm-font-body) !important;
font-size: 0.875rem !important;
font-weight: 500 !important;
line-height: 1.4 !important;
letter-spacing: 0.01em;
}
/* Stock count now sits beside the quantity stepper, printed inside the cart
form by zm_render_stock_beside_quantity(). WooCommerce emits the same line
in two other places, so both are hidden here and there is exactly one on
the page — display:none also keeps it out of the accessibility tree, so
nothing is announced twice. */
/* 1. Avada's price element copy, which used to be the visible one. */
.zm-product-details .fusion-woo-price-tb .stock {
display: none !important;
}
/* 2. The duplicate echoed above the cart form. DIRECT CHILD ONLY — the copy we
print ourselves lives inside form.cart, which is also inside
.zm-product-form, and a descendant selector here would hide that too. */
.zm-product-form > .stock {
display: none !important;
}
/* Our copy — same visual weight the price-element one carried. */
.zm-product-form .zm-stock-inline {
margin: 0 0 1rem !important;
font-family: var(--zm-font-body) !important;
font-size: 0.875rem !important;
font-weight: 500 !important;
line-height: 1.4 !important;
letter-spacing: 0.01em;
color: var(--zm-primary) !important;
white-space: nowrap;
}
.zm-product-form .zm-stock-inline.out-of-stock,
.zm-product-form .zm-stock-inline.available-on-backorder {
color: var(--zm-error) !important;
}
/* SKU line under the cart form (printed by zm_render_product_sku) — a quiet
reference number, not a headline. */
.zm-product-sku {
margin: 1.25rem 0 0 !important;
font-family: var(--zm-font-body) !important;
font-size: 0.875rem !important;
line-height: 1.4 !important;
color: var(--zm-on-surface-variant) !important;
letter-spacing: 0.01em;
}
.zm-product-sku__label {
color: var(--zm-outline) !important;
}
/* Hide redundant separator that used to sit above customisations */
.zm-product-details .fusion-separator { display: none; }
/* Full-width pill Add-to-cart button */
.zm-product-form .single_add_to_cart_button,
.zm-product-details .single_add_to_cart_button {
width: 100% !important;
display: block !important;
background: var(--zm-primary) !important;
background-image: none !important;
color: var(--zm-on-primary) !important;
border: none !important;
border-radius: var(--zm-radius-full) !important;
padding: 1rem 2rem !important;
font-family: var(--zm-font-headline) !important;
font-weight: 700 !important;
font-size: 1rem !important;
text-transform: none !important;
letter-spacing: 0 !important;
box-shadow: 0 8px 20px -10px rgba(58, 77, 57, 0.4) !important;
transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
margin-top: 0.5rem !important;
}
.zm-product-form .single_add_to_cart_button:hover,
.zm-product-details .single_add_to_cart_button:hover {
background: var(--zm-primary-dim) !important;
transform: translateY(-1px);
}
/* Quantity stepper — pill style, sharing its row with the stock count and
sitting ABOVE the CTA.
The form is a wrapping flex row in which every child claims a full row by
default, and only the stepper and the stock line opt out. Written that way
round on purpose: Woo and Avada inject extra children here (variation
tables, notices, customisation fieldsets), and defaulting them to their own
row keeps anything new laid out as it is today, rather than silently
joining the stepper's line the first time it appears.
TWO containers, because WooCommerce nests these differently per product type.
On a SIMPLE product the stepper and stock are direct children of form.cart.
On a VARIABLE product they sit inside div.woocommerce-variation-add-to-cart,
which is itself inside form.cart below the variations table. Styling only
form.cart leaves every variable product with its stock on a full-width line
of its own — seen on indigo-block-print-tunic before this was widened. */
:is(.zm-product-form, .zm-product-details) :is(.cart, .woocommerce-variation-add-to-cart) {
display: flex !important;
flex-wrap: wrap;
align-items: center;
gap: 0 0.75rem;
}
:is(.zm-product-form, .zm-product-details) :is(.cart, .woocommerce-variation-add-to-cart) > * {
flex: 1 0 100%;
}
:is(.zm-product-form, .zm-product-details) :is(.cart, .woocommerce-variation-add-to-cart) > .quantity,
:is(.zm-product-form, .zm-product-details) :is(.cart, .woocommerce-variation-add-to-cart) > .zm-stock-inline {
flex: 0 0 auto;
}
.zm-product-form .quantity {
display: inline-flex !important;
align-items: center !important;
margin: 0 0 1rem !important;
border: 1px solid color-mix(in srgb, var(--zm-outline-variant) 60%, transparent) !important;
border-radius: var(--zm-radius-full) !important;
background: var(--zm-background) !important;
overflow: hidden;
padding: 0.25rem 0.5rem;
}
.zm-product-form .quantity .qty,
.zm-product-form .quantity input[type="number"] {
width: 3rem !important;
text-align: center !important;
border: none !important;
background: transparent !important;
font-family: var(--zm-font-body) !important;
font-size: 0.9375rem !important;
color: var(--zm-on-surface) !important;
padding: 0.375rem 0 !important;
-moz-appearance: textfield;
}
.zm-product-form .quantity .qty::-webkit-outer-spin-button,
.zm-product-form .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Accordion (Fabric / Care / Shipping) — Stitch list style */
.zm-product-accordion .fusion-toggle {
border: none !important;
background: transparent !important;
border-bottom: 1px solid color-mix(in srgb, var(--zm-outline-variant) 50%, transparent) !important;
border-radius: 0 !important;
}
.zm-product-accordion .fusion-toggle:first-child {
border-top: 1px solid color-mix(in srgb, var(--zm-outline-variant) 50%, transparent) !important;
}
.zm-product-accordion .fusion-panel-heading,
.zm-product-accordion .panel-title {
background: transparent !important;
padding: 1rem 0 !important;
}
.zm-product-accordion .panel-title a,
.zm-product-accordion .panel-title a:hover,
.zm-product-accordion .panel-title a:focus {
font-family: var(--zm-font-headline) !important;
font-size: 1.0625rem !important;
font-weight: 700 !important;
color: var(--zm-on-surface) !important;
background: transparent !important;
padding: 0 !important;
text-decoration: none !important;
}
.zm-product-accordion .panel-title .fusion-toggle-icon-wrapper { color: var(--zm-primary) !important; }
.zm-product-accordion .fusion-panel-body,
.zm-product-accordion .panel-body {
background: transparent !important;
padding: 0 0 1rem !important;
font-family: var(--zm-font-body) !important;
font-size: 0.9375rem !important;
line-height: 1.6 !important;
color: var(--zm-on-surface-variant) !important;
}
/* Avada Woo product images — keep a soft sage placeholder */
.fusion-tb-woocommerce .woocommerce-product-gallery {
background: var(--zm-surface-container-low);
border-radius: var(--zm-radius-lg);
overflow: hidden;
}
/* Make the gallery image obey its container. Scoped to .single-product, not
.fusion-tb-woocommerce — that class is never emitted on the product page
(the element renders as .fusion-woo-product-images), so the old selector
matched nothing and the ![]()
was sizing itself from its 700px width
attribute. */
/* The photo frame is 4:5 (portrait), which is the standard e-commerce product
ratio and the one the shop cards already use (ul.products li.product,
`aspect-ratio: 4 / 5`), so a garment is the same shape everywhere on the site.
Requested as "870 x 1060", which is 0.821; 4:5 is 0.800. The difference over
the 701px column is 22px of height, and matching the shop grid is worth more
than matching the reference to three decimal places.
Effect: 701 x 1051 -> 701 x 876.
NOTE — this CROPS anything taller than 4:5. The local demo photos are 2:3
(1200 x 1799), so they lose ~175px off the bottom here; `object-position:
center top` puts that loss at the hem rather than the face. Production
photography shot at 4:5 fills the frame with no crop at all. If a garment
ever needs its full length, the fix is `object-fit: contain` on that image,
not removing the frame. */
.single-product .woocommerce-product-gallery__image {
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: var(--zm-radius-lg);
}
.single-product .woocommerce-product-gallery__image img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
object-position: center top;
display: block;
}
/* FlexSlider measures the first slide and writes an inline px height onto
.flex-viewport. Left alone it keeps the pre-crop height and leaves a band of
empty space under the photo. */
.single-product .avada-product-gallery .flex-viewport {
height: auto !important;
}
/* The gallery deliberately carries NO width cap — it fills its column.
Reverted on request 2026-09-07.
History, so nobody re-adds it by reflex: a 420px cap was introduced to lift
the description tabs into the first screen, then raised to 500px on the
reasoning that the summary column sets the row height anyway. Both made the
photo smaller than the layout allows, which is the wrong trade for a
clothing store where the garment is the product.
The `img { width: 100% }` rule above is what keeps the shot inside its
container; it must stay. Without it the ![]()
sizes itself from its 700px
width attribute and overflows. */
/* Gallery thumbnail strip.
Avada renders it as ol.flex-control-nav.flex-control-thumbs, built by
FlexSlider at runtime from each slide's data-thumb. It is NOT in the server
HTML — inspect the live DOM, not view-source, if you come to change this.
Left to WooCommerce it is sized from the gallery's declared column count
(`--columns-4` gives `li { width: 25% }`), which on the 701px column rendered
each thumbnail at 169 x 254 — the size of a shop-page product card, for
something that is navigation rather than content. Avada also puts
`justify-content: space-between` on the ol, which stays invisible while four
items fill the row exactly and turns into 117px gaps the moment they do not.
Both are replaced here by a fixed-width wrapping strip. Fixed rather than a
percentage because the strip should look the same whether a product has
three photos or nine, and should not change size because someone edited the
gallery's column setting.
The 4:5 crop matches the main photo above and the shop cards, so a garment is
the same shape everywhere on the site regardless of the source file's ratio —
which is what stops a strip of mixed 2:3 and 4:5 uploads looking ragged.
Result: 84 x 105 each, 10px apart, left-aligned under the photo. */
/* Take the strip out of Avada's fixed-height carousel and put it in normal flow.
Avada wraps the thumbnails in .avada-product-gallery-thumbs-wrapper, gives
that wrapper an INLINE height measured by its own JS (119.5px — exactly one
row) with overflow:hidden, and positions the ol ABSOLUTELY inside it. That is
a single-row carousel, and it silently ate the wrapped second row: the li
elements reported correct geometry from getBoundingClientRect while painting
nothing, because they sat below a clipped fixed height.
Returning the ol to static flow lets the wrapper size to its own content, so
wrapping works at any thumbnail count on any viewport. The !important on
height beats Avada's inline style; without it the JS value wins.
Do not "tidy" this back to absolute — the wrap below depends on it. */
.single-product .avada-product-gallery-thumbs-wrapper {
height: auto !important;
overflow: visible !important;
}
.single-product .avada-product-gallery .flex-control-thumbs {
position: static !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: flex-start !important;
gap: 0.625rem !important;
width: 100% !important;
margin: 0.875rem 0 0 !important;
padding: 0 !important;
}
.single-product .avada-product-gallery .flex-control-thumbs li {
flex: 0 0 auto !important;
width: 84px !important;
margin: 0 !important;
}
.single-product .avada-product-gallery .flex-control-thumbs img {
width: 100% !important;
height: auto !important;
aspect-ratio: 4 / 5;
object-fit: cover;
object-position: center top;
display: block;
border-radius: var(--zm-radius-md, 0.5rem) !important;
/* Transparent, not none: the selected thumbnail gains a coloured border, and
if the unselected state had no border the whole strip would shift by 2px
every time you clicked one. */
border: 2px solid transparent !important;
opacity: 0.55 !important;
cursor: pointer;
transition: opacity 0.2s ease, border-color 0.2s ease !important;
}
.single-product .avada-product-gallery .flex-control-thumbs img:hover {
opacity: 0.85 !important;
}
/* FlexSlider puts .flex-active on the img itself, not the li. */
.single-product .avada-product-gallery .flex-control-thumbs img.flex-active {
opacity: 1 !important;
border-color: var(--zm-primary) !important;
}
/* Narrow screens: three per row rather than a fixed 84px.
The product layout does NOT currently stack to a single column on mobile —
at a 375px viewport the gallery column is only ~184px wide — so a fixed 84px
thumbnail fits just two per row and the strip reads as a 2x2 grid instead of
a row of navigation. A proportional width keeps it a strip at any column
width. If the layout is ever made to stack properly, this still holds: the
column gets wider and the thumbnails grow with it. */
@media (max-width: 991px) {
.single-product .avada-product-gallery .flex-control-thumbs li {
width: calc((100% - 1.25rem) / 3) !important;
}
}
/* ------------------------------------------------------------------
Product description tabs — [fusion_tb_woo_tabs class="zm-product-tabs"]
Description + Additional information, in the same left-rail shape as
the policy pages (.zm-policy-nav): sticky nav on the left, carded
panel on the right. Avada drives most of its own colours through
--awb-* custom properties, so we set those rather than out-specify
its component stylesheet; layout and typography need real rules.
------------------------------------------------------------------ */
/* Avada declares its own defaults at `.fusion-body .fusion-woo-tabs-tb`, so the
override has to carry at least that much specificity to land. */
.fusion-body .zm-product-tabs.fusion-woo-tabs-tb {
/* Avada component tokens — remapped onto our palette */
--awb-backgroundcolor: transparent;
--awb-inactivebackgroundcolor: transparent;
--awb-active-nav-text-color: var(--zm-primary);
--awb-inactive-nav-text-color: var(--zm-on-surface-variant);
--awb-bordercolor: color-mix(in srgb, var(--zm-outline-variant) 50%, transparent);
--awb-text-color: var(--zm-on-surface-variant);
--awb-title-color: var(--zm-on-surface);
--awb-nav-content-space: 268px;
--awb-nav-padding-top: 0.5625rem;
--awb-nav-padding-right: 0;
--awb-nav-padding-bottom: 0.5625rem;
--awb-nav-padding-left: 0;
--awb-content-padding-top: 0;
--awb-content-padding-right: 0;
--awb-content-padding-bottom: 0;
--awb-content-padding-left: 0;
}
/* flow-root instead of Avada's overflow:hidden — still clears the floated
rail, but doesn't kill position:sticky on it. */
.zm-product-tabs .woocommerce-tabs {
display: flow-root;
overflow: visible !important;
padding-top: 0 !important;
}
/* --- Nav rail --- */
/* Avada emits `#wrapper .woocommerce-tabs .tabs { width:26%!important;
float:left!important }` under @media (orientation: portrait). The ID beats a
plain class selector even with !important, so every rule that has to hold the
rail's float/width is duplicated with a #wrapper prefix to outrank it. The
bare selector stays as the fallback for markup rendered outside #wrapper. */
#wrapper .zm-product-tabs .woocommerce-tabs > .tabs,
.zm-product-tabs .woocommerce-tabs > .tabs {
position: sticky;
top: 100px;
float: left !important;
width: 220px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none;
}
.zm-product-tabs .woocommerce-tabs .tabs li {
margin: 0 !important;
padding: 0 !important;
background: none !important;
border: none !important;
}
.zm-product-tabs .woocommerce-tabs .tabs li a {
display: block;
width: fit-content;
border: none !important;
border-bottom: 2px solid transparent !important;
border-radius: 0 !important;
font-family: var(--zm-font-body) !important;
font-size: 0.9375rem !important;
font-weight: 500 !important;
line-height: 1.35 !important;
text-transform: none !important;
text-decoration: none !important;
transition: color 0.2s ease, border-color 0.2s ease;
}
.zm-product-tabs .woocommerce-tabs .tabs li a:hover,
.zm-product-tabs .woocommerce-tabs .tabs li.active a {
font-weight: 600 !important;
border-bottom-color: var(--zm-primary) !important;
}
/* --- Panel --- */
/* Same story as the rail: the portrait block also does
`#wrapper .woocommerce-tabs .panel { float:right!important; width:70%!important }`,
which would shove the card out of the column. */
#wrapper .zm-product-tabs .woocommerce-tabs .woocommerce-Tabs-panel,
.zm-product-tabs .woocommerce-Tabs-panel {
float: none !important;
width: auto !important;
margin-left: var(--awb-nav-content-space) !important;
padding: 2.25rem 2.5rem !important;
background: var(--zm-surface-container-low) !important;
border: none !important;
border-radius: var(--zm-radius-lg) !important;
font-family: var(--zm-font-body) !important;
font-size: 1rem !important;
line-height: 1.7 !important;
color: var(--zm-on-surface-variant) !important;
}
.zm-product-tabs .woocommerce-Tabs-panel > :first-child { margin-top: 0 !important; }
.zm-product-tabs .woocommerce-Tabs-panel > :last-child { margin-bottom: 0 !important; }
/* Headings that live inside the merchandising copy itself */
.zm-product-tabs .woocommerce-Tabs-panel h2,
.zm-product-tabs .woocommerce-Tabs-panel h3,
.zm-product-tabs .woocommerce-Tabs-panel h4 {
font-family: var(--zm-font-headline) !important;
color: var(--zm-on-surface) !important;
/* Avada tags every in the panel .fusion-woocommerce-tab-title and
styles it from --awb-title-*, so these need !important to survive. */
letter-spacing: -0.01em !important;
text-transform: none !important;
margin: 2rem 0 0.875rem !important;
}
.zm-product-tabs .woocommerce-Tabs-panel h2 { font-size: 1.5rem !important; font-weight: 800 !important; line-height: 1.25 !important; }
.zm-product-tabs .woocommerce-Tabs-panel h3 { font-size: 1.1875rem !important; font-weight: 700 !important; line-height: 1.3 !important; }
.zm-product-tabs .woocommerce-Tabs-panel h4 { font-size: 1.0625rem !important; font-weight: 700 !important; line-height: 1.35 !important; }
.zm-product-tabs .woocommerce-Tabs-panel p { margin: 0 0 1.125rem !important; }
.zm-product-tabs .woocommerce-Tabs-panel strong,
.zm-product-tabs .woocommerce-Tabs-panel b { color: var(--zm-on-surface) !important; font-weight: 600 !important; }
.zm-product-tabs .woocommerce-Tabs-panel a {
color: var(--zm-primary) !important;
text-decoration: underline;
}
.zm-product-tabs .woocommerce-Tabs-panel ul,
.zm-product-tabs .woocommerce-Tabs-panel ol {
margin: 0 0 1.125rem 1.25rem !important;
padding: 0 !important;
}
.zm-product-tabs .woocommerce-Tabs-panel li { margin-bottom: 0.5rem !important; }
.zm-product-tabs .woocommerce-Tabs-panel ul li::marker { color: var(--zm-primary); }
/* --- Additional information attributes table --- */
.zm-product-tabs .shop_attributes {
width: 100%;
margin: 0 !important;
border: none !important;
border-collapse: collapse;
background: transparent !important;
}
.zm-product-tabs .shop_attributes tr,
.zm-product-tabs .shop_attributes tr:nth-child(even) { background: transparent !important; }
.zm-product-tabs .shop_attributes th,
.zm-product-tabs .shop_attributes td {
padding: 0.875rem 0 !important;
border: none !important;
border-bottom: 1px solid color-mix(in srgb, var(--zm-outline-variant) 50%, transparent) !important;
font-style: normal !important;
vertical-align: top;
text-align: left;
}
.zm-product-tabs .shop_attributes tr:last-child th,
.zm-product-tabs .shop_attributes tr:last-child td { border-bottom: none !important; }
.zm-product-tabs .shop_attributes th {
width: 34%;
font-family: var(--zm-font-headline) !important;
font-size: 0.9375rem !important;
font-weight: 700 !important;
color: var(--zm-on-surface) !important;
}
.zm-product-tabs .shop_attributes td,
.zm-product-tabs .shop_attributes td p {
font-family: var(--zm-font-body) !important;
font-size: 0.9375rem !important;
color: var(--zm-on-surface-variant) !important;
margin: 0 !important;
padding: 0;
}
/* --- Stack the rail above the panel on tablet / mobile --- */
@media (max-width: 991px) {
#wrapper .zm-product-tabs .woocommerce-tabs > .tabs,
.zm-product-tabs .woocommerce-tabs > .tabs {
position: static;
float: none !important;
width: 100% !important;
display: flex;
gap: 1.5rem;
margin-bottom: 1.5rem !important;
border-bottom: 1px solid color-mix(in srgb, var(--zm-outline-variant) 50%, transparent);
}
.zm-product-tabs .woocommerce-tabs .tabs li a { margin-bottom: -1px; }
#wrapper .zm-product-tabs .woocommerce-tabs .woocommerce-Tabs-panel,
.zm-product-tabs .woocommerce-Tabs-panel {
margin-left: 0 !important;
padding: 1.75rem 1.5rem !important;
}
}
/* ==================================================================
Shop archive — Stitch "Curated Edit" layout
================================================================== */
/* Big page title — dark on-surface (not the forest heading default) */
.zm-shop-title h1,
.zm-shop-title h2 {
font-family: var(--zm-font-headline) !important;
font-weight: 700 !important;
color: var(--zm-on-surface) !important;
letter-spacing: -0.02em;
}
.zm-shop-intro,
.zm-shop-intro p { max-width: 36rem; }
/* Filter sidebar — soft card box */
.zm-shop-filters > .fusion-column-wrapper {
background: var(--zm-surface-container-low) !important;
border-radius: var(--zm-radius-lg) !important;
padding: 2rem !important;
}
.zm-filter-heading h3 {
font-family: var(--zm-font-headline) !important;
font-weight: 600 !important;
color: var(--zm-on-surface) !important;
}
/* Category filter list */
.awb-woo-filters-categories ul,
.zm-shop-filters .product-categories {
list-style: none;
margin: 0;
padding: 0;
}
.awb-woo-filters-categories li,
.zm-shop-filters .product-categories li {
margin-bottom: 0.75rem;
}
.awb-woo-filters-categories a,
.zm-shop-filters .product-categories a {
color: var(--zm-on-surface-variant) !important;
font-family: var(--zm-font-body) !important;
font-size: 0.9375rem !important;
text-decoration: none !important;
transition: color 0.15s ease;
}
.awb-woo-filters-categories a:hover,
.zm-shop-filters .product-categories a:hover,
.awb-woo-filters-categories li.current-cat > a {
color: var(--zm-primary) !important;
}
.awb-woo-filters-categories .count,
.zm-shop-filters .product-categories .count {
color: var(--zm-outline) !important;
font-size: 0.8125rem;
}
/* Price filter button + handles in forest green */
.zm-shop-filters .price_slider_amount .button,
.zm-shop-filters .ui-slider .ui-slider-handle,
.zm-shop-filters .ui-slider .ui-slider-range {
background: var(--zm-primary) !important;
color: var(--zm-on-primary) !important;
border: none !important;
}
.zm-shop-filters .price_slider_amount .button {
border-radius: var(--zm-radius-md) !important;
font-family: var(--zm-font-body) !important;
font-weight: 600 !important;
padding: 0.5rem 1.25rem !important;
}
/* Sort dropdown */
.zm-shop-sorting .woocommerce-ordering select,
.woocommerce-ordering select.orderby {
font-family: var(--zm-font-body) !important;
color: var(--zm-primary) !important;
font-weight: 600 !important;
background: transparent !important;
border: none !important;
border-bottom: 2px solid color-mix(in srgb, var(--zm-outline-variant) 60%, transparent) !important;
border-radius: 0 !important;
padding: 0.25rem 1.5rem 0.4rem 0 !important;
cursor: pointer;
}
.zm-shop-sorting .woocommerce-result-count {
font-family: var(--zm-font-body) !important;
color: var(--zm-on-surface-variant) !important;
font-size: 0.875rem !important;
}
/* Pagination — forest pills */
.fusion-woo-archives .woocommerce-pagination ul,
.fusion-pagination .pagination {
margin-top: 3rem;
}
.fusion-woo-archives .woocommerce-pagination a,
.fusion-woo-archives .woocommerce-pagination span.current,
.fusion-pagination .pagination .current,
.fusion-pagination .pagination a {
font-family: var(--zm-font-body) !important;
border-radius: var(--zm-radius-full) !important;
}
.fusion-woo-archives .woocommerce-pagination span.current,
.fusion-pagination .pagination .current {
background: var(--zm-primary) !important;
color: var(--zm-on-primary) !important;
border-color: var(--zm-primary) !important;
}
/* Sale / featured badge on cards */
ul.products li.product .onsale,
ul.products li.product .fusion-woo-featured {
background: var(--zm-primary) !important;
color: var(--zm-on-primary) !important;
border: none !important;
border-radius: var(--zm-radius-sm) !important;
font-family: var(--zm-font-label) !important;
font-size: 0.65rem !important;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 700 !important;
}
/* ==================================================================
Home — "Shop by Collection" category grid ([zm_category_grid])
================================================================== */
.zm-cat-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 48px 32px;
}
.zm-cat-item {
margin: 0;
}
.zm-cat-link {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
text-decoration: none;
}
/* Circular thumbnail with the pale ring from the reference layout. The inner
ring matches the section background so it reads as a gap, not a border. */
.zm-cat-media {
display: block;
width: 100%;
max-width: 210px;
aspect-ratio: 1 / 1;
border-radius: var(--zm-radius-full);
overflow: hidden;
background: var(--zm-surface-container);
box-shadow:
0 0 0 8px var(--zm-surface-container-low),
0 0 0 10px var(--zm-outline-variant);
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.zm-cat-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.zm-cat-label {
font-family: var(--zm-font-headline);
font-size: 1.125rem;
font-weight: 700;
line-height: 1.3;
color: var(--zm-primary);
text-align: center;
}
.zm-cat-link:hover .zm-cat-media,
.zm-cat-link:focus-visible .zm-cat-media {
transform: translateY(-4px);
box-shadow:
0 0 0 8px var(--zm-surface-container-low),
0 0 0 10px var(--zm-primary),
var(--zm-shadow-card-hover);
}
.zm-cat-link:hover .zm-cat-media img {
transform: scale(1.05);
}
/* "Explore All Categories" link in the section header */
.zm-cat-more a {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--zm-font-label);
font-size: 0.9375rem;
font-weight: 600;
color: var(--zm-primary);
text-decoration: none;
border-bottom: 1px solid var(--zm-primary);
padding-bottom: 4px;
transition: gap 0.2s ease, opacity 0.2s ease;
}
.zm-cat-more a:hover {
gap: 14px;
opacity: 0.75;
}
@media (max-width: 1024px) {
.zm-cat-grid {
grid-template-columns: repeat(2, 1fr);
gap: 40px 24px;
}
}
@media (max-width: 640px) {
.zm-cat-grid {
gap: 32px 16px;
}
.zm-cat-media {
max-width: 150px;
}
.zm-cat-label {
font-size: 1rem;
}
}
/* ==================================================================
Policy pages — Shipping & Delivery, Replacement & Refunds
Centred hero + sticky index rail + carded sections.
================================================================== */
/* --- Hero --- */
.zm-policy-pillwrap {
margin-bottom: 28px !important;
text-align: center !important;
}
.zm-policy-pill {
display: inline-block;
padding: 9px 22px;
border-radius: var(--zm-radius-full);
background: var(--zm-secondary);
background: color-mix(in srgb, var(--zm-primary) 16%, #ffffff);
color: var(--zm-primary);
font-family: var(--zm-font-label);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.zm-policy-h1 h1 {
font-weight: 800 !important;
}
.zm-policy-lede {
max-width: 620px;
margin-left: auto !important;
margin-right: auto !important;
}
/* --- Left rail --- */
/* The column must fill the row height for the inner wrapper to have travel;
the wrapper itself stays content-height so it can actually stick. */
.zm-policy-aside {
align-self: stretch !important;
}
.zm-policy-aside .fusion-column-wrapper {
position: sticky;
top: 96px;
align-self: flex-start;
}
.zm-policy-nav-title {
font-family: var(--zm-font-headline);
font-size: 0.9375rem;
font-weight: 700;
color: var(--zm-on-background);
margin: 0 0 18px;
}
.zm-policy-nav nav {
display: flex;
flex-direction: column;
gap: 2px;
}
.zm-policy-nav nav a {
display: block;
padding: 9px 0;
border-bottom: 2px solid transparent;
width: fit-content;
color: var(--zm-on-surface-variant);
font-family: var(--zm-font-body);
font-size: 0.9375rem;
line-height: 1.35;
text-decoration: none;
transition: color 0.2s ease, border-color 0.2s ease;
}
.zm-policy-nav nav a:hover,
.zm-policy-nav nav a.is-active {
color: var(--zm-primary);
font-weight: 600;
border-bottom-color: var(--zm-primary);
}
/* --- WhatsApp card --- */
.zm-policy-cta {
position: relative;
overflow: hidden;
margin-top: 40px;
padding: 26px 24px;
border-radius: var(--zm-radius-lg);
background: var(--zm-surface-container-low);
}
.zm-policy-cta p {
margin: 0 0 18px;
color: var(--zm-on-surface-variant);
font-size: 0.9375rem;
line-height: 1.55;
}
.zm-policy-cta-link {
position: relative;
z-index: 1;
display: inline-block;
padding-bottom: 4px;
border-bottom: 2px solid var(--zm-primary);
color: var(--zm-primary);
font-family: var(--zm-font-label);
font-size: 0.9375rem;
font-weight: 700;
text-decoration: none;
}
/* Soft disc echoing the reference layout's decorative corner. */
.zm-policy-cta::after {
content: "";
position: absolute;
right: -46px;
bottom: -58px;
width: 112px;
height: 112px;
border-radius: var(--zm-radius-full);
background: var(--zm-surface-container-high);
opacity: 0.55;
}
/* --- Sections --- */
.zm-policy-heading {
scroll-margin-top: 110px;
margin-top: 56px !important;
}
.zm-policy-main > .fusion-column-wrapper > .zm-policy-heading:first-child {
margin-top: 0 !important;
}
.zm-policy-heading h2 {
font-weight: 800 !important;
}
.zm-policy-heading h2::before {
content: "";
display: inline-block;
width: 34px;
height: 3px;
margin-right: 20px;
border-radius: 2px;
vertical-align: middle;
background: var(--zm-primary);
background: color-mix(in srgb, var(--zm-primary) 40%, #ffffff);
}
.zm-policy-card {
padding: 32px 34px;
border-radius: var(--zm-radius-lg);
background: var(--zm-surface-container-low);
}
.zm-policy-card p:last-child {
margin-bottom: 0;
}
.zm-policy-card a {
color: var(--zm-primary);
text-decoration: underline;
}
/* Bulleted variants inside a card */
.zm-policy-point,
.zm-policy-yes,
.zm-policy-no {
display: block;
position: relative;
margin-top: 14px;
padding-left: 30px;
}
.zm-policy-point::before,
.zm-policy-yes::before,
.zm-policy-no::before {
position: absolute;
left: 0;
top: 0;
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 0.9rem;
line-height: 1.75;
}
.zm-policy-point::before {
content: "\f054";
color: var(--zm-primary);
font-size: 0.75rem;
}
.zm-policy-yes::before {
content: "\f058";
color: var(--zm-primary);
}
.zm-policy-no::before {
content: "\f057";
color: var(--zm-error);
}
.zm-policy-note {
display: block;
margin-top: 24px;
padding: 20px 24px;
border-left: 3px solid var(--zm-primary);
border-radius: var(--zm-radius-md);
background: var(--zm-surface-container);
font-size: 0.9375rem;
line-height: 1.7;
}
/* Return address / helpline pair */
.zm-policy-split {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
margin-top: 28px;
}
.zm-policy-splitcol {
display: block;
font-size: 0.9375rem;
line-height: 1.7;
}
.zm-policy-minihead {
display: block;
margin-bottom: 10px;
color: var(--zm-primary);
font-family: var(--zm-font-label);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.zm-policy-boxes {
margin-top: 20px;
margin-bottom: 0;
}
.zm-policy-boxes .fusion-column-wrapper {
height: 100%;
}
@media (max-width: 1024px) {
.zm-policy-aside .fusion-column-wrapper {
position: static;
}
.zm-policy-nav nav {
flex-direction: row;
flex-wrap: wrap;
gap: 6px 20px;
}
.zm-policy-heading {
margin-top: 40px !important;
}
}
@media (max-width: 640px) {
.zm-policy-h1 h1 {
font-size: 2.5rem !important;
}
.zm-policy-card {
padding: 24px 22px;
}
.zm-policy-split {
grid-template-columns: 1fr;
}
.zm-policy-heading h2::before {
width: 22px;
margin-right: 14px;
}
}
/* ==================================================================
Single product — variation selects (Size)
Nothing in this theme matched table.variations, so the dropdown fell
through to Avada's defaults: a white field with a near-invisible
#F2F3F5 border on our cream surface, too narrow to fit its own
placeholder, and Avada's .select-arrow div rendering as a detached
box beside the field rather than an affordance on it.
================================================================== */
.single-product table.variations {
display: block;
width: 100%;
margin: 0 0 24px;
border: 0;
}
.single-product table.variations tbody,
.single-product table.variations tr,
.single-product table.variations th,
.single-product table.variations td {
display: block;
width: 100%;
padding: 0;
border: 0;
background: none;
}
.single-product table.variations th.label {
text-align: left;
}
.single-product table.variations th.label label {
display: block;
margin-bottom: 0;
color: var(--zm-on-surface);
font-family: var(--zm-font-label);
font-size: 0.9375rem;
font-weight: 600;
white-space: nowrap;
}
/* Label beside its dropdown rather than stacked above it. The rows are
display:block from the reset above, so re-declare them as a flex line and
drop the 100% widths the reset put on the cells. */
.single-product table.variations tr {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.875rem;
}
.single-product table.variations th.label,
.single-product table.variations td.label {
width: auto;
flex: 0 0 auto;
}
.single-product table.variations td.value {
width: auto;
flex: 1 1 200px;
min-width: 0;
}
/* Back to stacked where a line would crowd — narrow phones, or any attribute
whose name is longer than "Size". */
@media (max-width: 575px) {
.single-product table.variations tr {
display: block;
}
.single-product table.variations th.label label {
margin-bottom: 10px;
white-space: normal;
}
}
.single-product .avada-select-parent {
position: relative;
display: block;
width: 100%;
max-width: 320px;
}
.single-product table.variations select {
width: 100% !important;
height: auto !important;
padding: 0.85rem 3rem 0.85rem 1.15rem !important;
background-color: var(--zm-background) !important;
border: 1px solid var(--zm-primary) !important;
border-radius: var(--zm-radius-md) !important;
color: var(--zm-on-surface) !important;
font-family: var(--zm-font-body) !important;
font-size: 1rem !important;
line-height: 1.4 !important;
text-overflow: ellipsis;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.single-product table.variations select:hover {
border-color: var(--zm-outline) !important;
}
.single-product table.variations select:focus {
border-color: var(--zm-primary) !important;
box-shadow: 0 0 0 3px rgba(58, 77, 57, 0.18) !important;
outline: none !important;
}
/* Overlay Avada's arrow on the field instead of letting it sit beside it. */
.single-product .avada-select-parent .select-arrow {
position: absolute;
top: 1px;
right: 1px;
bottom: 1px;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
background: none !important;
border: 0 !important;
color: var(--zm-primary);
pointer-events: none;
}
.single-product .reset_variations {
display: inline-block;
margin-top: 10px;
color: var(--zm-on-surface-variant);
font-family: var(--zm-font-label);
font-size: 0.8125rem;
text-decoration: underline;
}
.single-product .woocommerce-variation-price {
margin: 4px 0 16px;
}
.single-product .woocommerce-variation-price .price {
color: var(--zm-primary);
font-family: var(--zm-font-headline);
font-size: 1.5rem;
font-weight: 600;
}
@media (max-width: 640px) {
.single-product .avada-select-parent {
max-width: 100%;
}
}
/* Avada's global form focus colour ships as a mint green (#65BD7D) that isn't
in our palette. It reaches the variation dropdown through Avada's
`select:focus + .select-arrow` rule, which outranks any plain .select-arrow
override, so rebind the variable itself -- that fixes the focus colour on
every form field rather than just this one control. */
:root {
--form_focus_border_color: var(--zm-primary) !important;
}
/* --- The open list ------------------------------------------------------
The stock blue highlight belongs to the browser's own dropdown. Chromium's
customisable select lets that list be themed, so hover and the selected
row become brand green. Firefox and Safari ignore this block and keep
their native list, so it is purely additive. */
@supports (appearance: base-select) {
/* base-select turns the control into a flow container holding the
selected option plus a picker icon; lay those out on one row so the
icon does not stack under the label. */
.single-product table.variations select {
appearance: base-select;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-right: 1.15rem !important;
}
/* base-select supplies its own picker icon, so Avada's bolted-on
arrow div would be a second one. */
.single-product .avada-select-parent .select-arrow {
display: none;
}
.single-product table.variations select::picker-icon {
flex: none;
color: var(--zm-primary);
}
.single-product table.variations select::picker(select) {
padding: 6px;
border: 1px solid var(--zm-primary);
border-radius: var(--zm-radius-md);
background: var(--zm-background);
box-shadow: var(--zm-shadow-card);
}
.single-product table.variations select option {
padding: 9px 12px;
border-radius: var(--zm-radius-sm);
color: var(--zm-on-surface);
font-family: var(--zm-font-body);
}
.single-product table.variations select option:hover,
.single-product table.variations select option:checked {
background: var(--zm-primary);
color: var(--zm-on-primary);
}
}
/* ==================================================================
MOBILE — restore responsive layout
==================================================================
ROOT CAUSE, found by auditing the live DOM at a 375px viewport.
Avada sizes every builder column from a custom property,
`--awb-col-width`, and normally emits a media query that resets it to 100%
below the "Column Stacking" breakpoint. That media query is NOT PRESENT in
this install's generated CSS: a walk of every loaded stylesheet found
exactly ONE rule setting `--awb-col-width: 100%`, and it is
`.fusion-layout-column.fusion-one-full`, outside any media query.
So nothing stacks, at any width. The consequences measured at 375px:
- Product page: a 3/5 + 2/5 row stayed side by side, leaving the summary
column 119px wide. The 36px product title overflowed it and was clipped
off-screen; the Add-to-cart button was 119px wide and 70px tall.
- Cart: form.woocommerce-cart-form rendered 701px inside a 315px grid
track, so the Total and Remove columns sat past the viewport edge —
and because an ancestor is overflow-x: hidden, they were not merely
off-screen but UNREACHABLE. No horizontal scroll to reveal them.
- Shop: product cards 91px wide, three across.
The fix belongs here rather than in Avada's Global Options because options
live in the database, which is not version-controlled and does not deploy.
This file does.
Everything below is inside a max-width media query, so the desktop layout
is provably untouched — verified at 1440 before and after.
------------------------------------------------------------------ */
/* A. Columns stack.
800px is Avada's own default Column Stacking breakpoint, so this restores
the value the setting would have produced rather than inventing one. Above
it the 3/5 + 2/5 product row still gives the summary ~376px, which is fine;
below it that column falls to ~240px and then off a cliff. */
@media (max-width: 800px) {
.fusion-layout-column {
--awb-col-width: 100%;
width: 100% !important;
float: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Grid and flex items default to min-width:auto, which refuses to shrink
below the intrinsic width of their contents. That is precisely what
pushed the 639px cart table's wrapper to 701px inside a 315px track.
Without this, C below fixes the table and the wrapper stays wide. */
.woocommerce,
.woocommerce-cart-form,
.woocommerce-content-box,
.post-content,
.fusion-row {
min-width: 0 !important;
}
}
/* B. WooCommerce's own responsive tables, re-enabled.
The markup is already correct and complete — the tables carry
`shop_table_responsive` and every cell carries a `data-title` — so only the
CSS that consumes them is missing. This is WooCommerce's standard pattern:
hide the header row, turn each row into a block, and label each cell from
its own data-title. 768px is WooCommerce's own breakpoint for it.
Restoring the vendor behaviour rather than inventing a bespoke card layout,
so a future WooCommerce or Avada update has nothing custom to collide with. */
@media (max-width: 768px) {
.woocommerce table.shop_table_responsive thead,
.woocommerce table.shop_table_responsive tbody th {
display: none !important;
}
.woocommerce table.shop_table_responsive tr {
display: block !important;
border-bottom: 1px solid color-mix(in srgb, var(--zm-outline-variant) 45%, transparent);
padding: 0.5rem 0;
}
.woocommerce table.shop_table_responsive tr td {
display: block !important;
width: auto !important;
text-align: right !important;
border: 0 !important;
padding: 0.375rem 0 !important;
}
.woocommerce table.shop_table_responsive tr td::before {
content: attr(data-title) ": ";
float: left;
font-weight: 600;
color: var(--zm-on-surface-variant);
}
/* The remove column has no data-title, so it would print a bare ": ". */
.woocommerce table.shop_table_responsive tr td.product-remove::before,
.woocommerce table.shop_table_responsive tr td.actions::before {
content: "" !important;
}
.woocommerce table.shop_table_responsive tr td.actions {
text-align: left !important;
}
}
/* C. Shop grid: two across, not three.
ul.products is flex-wrap and Avada's `products-3` class was giving 91px
cards at 375px — unreadable for a garment. Two across at ~150px is the
normal phone shop layout. The gap is set on the container so the halves
subtract from it evenly. */
@media (max-width: 640px) {
.woocommerce ul.products,
ul.products {
gap: 0.75rem !important;
}
.woocommerce ul.products li.product,
ul.products li.product {
width: calc(50% - 0.375rem) !important;
margin: 0 !important;
flex: 0 0 auto !important;
}
}