/**
* Shared front-end overrides — loaded on EVERY page.
*
* Because it is the only stylesheet in this plugin without a page condition, it
* also carries the things other sheets depend on or that aren't page-specific:
*
* section 0 the `--ama-*` design tokens (single-product.css, cart.css and
* my-account.css all declare this file as a dependency for them)
* section 0b the breadcrumb, shared by products and shop archives
* section 0c the sticky top bar's background colour
* section 1+ the Divi WooCommerce product loop, described below
*
* The product loop rules cover BOTH ways the "Woo Products" grid is rendered:
* - the WooCommerce shop/archive template -> `.woocommerce ul.products`
* - the Divi Builder "Woo Products" module -> `.et_pb_wc_products ul.products`
*
* Divi wraps each loop thumbnail in `.et_shop_image` and injects a hover
* overlay (`.et_overlay`, a dark wash + blue plus icon). Both contexts share
* that markup, so the hover rules key off `.et_shop_image`, which only ever
* appears inside a Divi product loop.
*
* Goals:
* 1. Remove the hover overlay + plus icon and the hover border; replace with a
* subtle, slow zoom on the product image.
* 2. Tighten the grid to 2.5% left/right margins per item, with widths
* recalculated for every column layout (1–6).
*/
/* -------------------------------------------------------------------------
* 0. Shared design tokens
*
* Defined HERE (not in single-product.css) because this stylesheet loads on
* every front-end page, whereas single-product.css only loads on `is_product()`.
* The product page gets these too — it enqueues this file as a dependency —
* but archive pages would otherwise have unresolved `var()` references.
*
* Values come from the Divi colour palette / theme options:
* #312c21 ink · #e8decd · #a88b42 gold · #f5efe2 cream · #e8e4de lines
* Fraunces (headings, 500) / Inter (body, 500)
* ---------------------------------------------------------------------- */
:root {
--ama-ink: #312c21;
/* Solid-button hover: the ink lifted a few points, not a new hue. */
--ama-ink-hover: #453e2f;
--ama-gold: #a88b42;
--ama-cream: #f5efe2;
--ama-line: #e8e4de;
/* The cart block draws its field borders with
* `color-mix(in srgb, currentColor 30%, transparent)`. currentColor on
* the cart page is the body colour, so this is the literal equivalent. */
--ama-field-border: rgba(49, 44, 33, 0.3);
/* Price: the ink lightened off full strength, so it reads as a lead-in
* rather than competing with the title. ~4.3:1 on white. */
--ama-price: rgba(49, 44, 33, 0.65);
--ama-radius: 4px;
/* Deliberately larger than --ama-radius: product photography reads better
* with a softer curve than the 4px used for buttons/inputs/notices. */
--ama-image-radius: 10px;
--ama-font-heading: 'Fraunces', Georgia, "Times New Roman", serif;
--ama-font-body: 'Inter', Helvetica, Arial, Lucida, sans-serif;
/* The secondary (top) bar's unscrolled colour, from Divi's customizer:
* .et_secondary_nav_enabled #page-container #top-header
* { background-color: #000000 !important }
* Duplicated here because CSS cannot re-apply an existing author rule — see
* section 0c. Keep in sync if that customizer setting changes. */
--ama-topbar-bg: #000000;
}
/* -------------------------------------------------------------------------
* 0c. Keep the top bar its own colour when the header becomes sticky
*
* Divi's customizer emits two colours for `#top-header` — the resting one and a
* different one for the fixed/scrolled state:
*
* .et_secondary_nav_enabled #page-container #top-header
* { background-color: #000000 !important } <- unscrolled
* @media (min-width: 981px) {
* .et_fixed_nav #page-container .et-fixed-header#top-header
* { background-color: #ffffff !important } <- on scroll
* }
*
* so scrolling flipped the black bar to white. There is no way to switch the
* white rule off from CSS — `revert` returns to the user-agent origin, not to
* another author rule, and the resting rule is *less* specific (2 ids + 1 class)
* than the fixed one (2 ids + 2 classes), so it can never win on its own. The
* colour therefore has to be restated at a higher specificity.
*
* Leading with `body` does that: (2 ids, 2 classes, 1 element) beats Divi's
* (2 ids, 2 classes, 0 elements). Specificity rather than source order is what
* matters here — this stylesheet is enqueued BEFORE `et-critical-inline-css`,
* so an equally specific rule would lose.
*
* Scoped to the same `min-width: 981px` query Divi uses, which is the only range
* where Divi adds `.et-fixed-header` at all.
* ---------------------------------------------------------------------- */
@media only screen and (min-width: 981px) {
body.et_fixed_nav #page-container .et-fixed-header#top-header,
body.et_fixed_nav #page-container .et-fixed-header#top-header #et-secondary-nav li ul {
background-color: var(--ama-topbar-bg) !important;
}
}
/* -------------------------------------------------------------------------
* 0b. Breadcrumb
*
* Shared by the single product page and the shop / category archives, so it
* lives in this always-loaded file rather than in single-product.css.
*
* WooCommerce renders:
*
*
* The current crumb is a bare text node with no wrapper, so it can't be
* targeted directly. Instead the nav itself carries the muted "you are here"
* colour and the `` children are lifted to full ink — that's what makes
* links vs. current page read as different. The separator is a real element
* only because the PHP side wraps it (see class-wc-amazing-shop-single-product.php);
* the stock delimiter is a ` / ` text node with nothing to style.
* ---------------------------------------------------------------------- */
.woocommerce .woocommerce-breadcrumb,
.woocommerce-page .woocommerce-breadcrumb {
margin: 0 0 32px !important;
padding: 0 0 18px !important;
border-bottom: 1px solid var(--ama-line);
font-family: var(--ama-font-body) !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.5 !important;
letter-spacing: 0.02em;
/* Current page: deliberately quieter than the links. */
color: rgba(49, 44, 33, 0.55) !important;
}
/* Links: full ink + medium weight so they clearly outrank the current crumb. */
.woocommerce .woocommerce-breadcrumb a,
.woocommerce-page .woocommerce-breadcrumb a {
color: var(--ama-ink) !important;
font-weight: 500 !important;
text-decoration: none !important;
transition: color 0.15s linear;
}
.woocommerce .woocommerce-breadcrumb a:hover,
.woocommerce-page .woocommerce-breadcrumb a:hover {
color: var(--ama-gold) !important;
text-decoration: underline !important;
text-underline-offset: 3px;
}
/* The gap between crumbs lives entirely on the separator. */
.woocommerce .woocommerce-breadcrumb .ama-breadcrumb__sep,
.woocommerce-page .woocommerce-breadcrumb .ama-breadcrumb__sep {
display: inline-block;
margin: 0 12px;
color: rgba(49, 44, 33, 0.3);
font-weight: 400;
user-select: none;
}
@media (max-width: 767px) {
.woocommerce .woocommerce-breadcrumb,
.woocommerce-page .woocommerce-breadcrumb {
margin-bottom: 24px !important;
padding-bottom: 14px !important;
}
.woocommerce .woocommerce-breadcrumb .ama-breadcrumb__sep,
.woocommerce-page .woocommerce-breadcrumb .ama-breadcrumb__sep {
margin: 0 8px;
}
}
/* -------------------------------------------------------------------------
* 1. Hover: kill the overlay + plus icon, kill the border, add a zoom effect
* ---------------------------------------------------------------------- */
/* Remove Divi's overlay (dark background wash + centered plus icon). */
.et_shop_image .et_overlay {
display: none !important;
opacity: 0 !important;
}
/* Remove the border/box-shadow Divi applies to the item/image on hover. */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product .et_shop_image,
.woocommerce ul.products li.product:hover,
.woocommerce ul.products li.product:hover .et_shop_image,
.et_pb_wc_products ul.products li.product,
.et_pb_wc_products ul.products li.product:hover,
.et_pb_wc_products ul.products li.product:hover .et_shop_image {
border: none !important;
box-shadow: none !important;
}
/* Clip the image so the zoom stays inside its box.
*
* `display: block` is load-bearing, not decoration. Divi emits this wrapper as
* a `` (woocommerce_template_loop_product_thumbnail() in the theme's
* functions.php) and ships NO css rule for `.et_shop_image` at all, so it
* defaults to `display: inline` — and on an inline non-replaced element both
* `overflow` and vertical margins are ignored outright. Without this the clip
* below silently does nothing and the thumbnail's `margin-bottom` further down
* this file has no effect either. */
.et_shop_image {
display: block !important;
overflow: hidden !important;
border-radius: var(--ama-image-radius) !important;
}
/* The loop thumbnail and title share one inline ``; make it a block so the
* wrapper's margin resolves predictably instead of through an anonymous box. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product a.woocommerce-loop-product__link,
.et_pb_wc_products ul.products li.product a.woocommerce-LoopProduct-link,
.et_pb_wc_products ul.products li.product a.woocommerce-loop-product__link {
display: block;
}
/* Zoom effect with a slightly slow transition.
*
* WooCommerce/Divi give the loop image a bottom margin, which makes the
* `.et_shop_image` wrapper taller than the image itself. That dead space made
* the zoom look like it "grew into" the box. Zero the margin so the wrapper is
* exactly the size of the thumbnail and the scale stays perfectly centered. */
.et_shop_image img {
display: block;
transform-origin: center center;
transition: transform 0.6s ease !important;
transform: scale(1);
will-change: transform;
}
/* High-specificity margin reset: WooCommerce/Divi apply a bottom margin to the
* loop image via a more specific selector, so a plain `.et_shop_image img`
* rule loses the cascade. This qualified selector (and the physical +
* logical properties) guarantees the wrapper hugs the thumbnail exactly. */
.woocommerce ul.products li.product .et_shop_image img,
.et_pb_wc_products ul.products li.product .et_shop_image img {
margin: 0 !important;
margin-block: 0 !important;
margin-inline: 0 !important;
}
.woocommerce ul.products li.product:hover .et_shop_image img,
.et_pb_wc_products ul.products li.product:hover .et_shop_image img {
transform: scale(1.08) !important;
}
/* -------------------------------------------------------------------------
* 2. Grid spacing: 2.5% side margins with widths recalculated per layout.
*
* Instead of Divi's float + side-margin layout (which insets the whole grid
* from the container edges and misaligns it with the page), we use CSS Grid.
* The gap lives ONLY between items, so the first/last item in every row sit
* flush with the edges of `ul.products` — aligned with the rest of the page.
* The column count is driven by WooCommerce's `.columns-N` class.
* ---------------------------------------------------------------------- */
.woocommerce ul.products,
.et_pb_wc_products ul.products {
display: grid !important;
/* row-gap / column-gap: tight 2.5% horizontal gap between items. */
column-gap: 2.5% !important;
row-gap: 2.5em !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Divi/WooCommerce add clearfix pseudo-elements to the float layout; as grid
* items they would create phantom cells, so hide them. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.et_pb_wc_products ul.products::before,
.et_pb_wc_products ul.products::after {
display: none !important;
content: none !important;
}
/* Reset the per-item float/margin/width so grid controls the sizing. */
.woocommerce ul.products li.product,
.et_pb_wc_products ul.products li.product {
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
clear: none !important;
}
/* The archive "header" is the whole group — title, description, result count
* and sort dropdown — so the separation belongs below all of it, on the grid
* itself. Keeping it here (rather than as a `margin-bottom` on
* `.woocommerce-products-header`) also means nothing shifts on archives that
* render no header at all.
*
* `margin-top` carries the gap; the 20px `padding-top` is pre-existing and
* left as it was. Applied to `ul.products` rather than `.columns-4` so the
* spacing survives the responsive column changes further down. */
.woocommerce ul.products,
.et_pb_wc_products ul.products {
/* margin-top: 80px !important; */
padding-top: 20px !important;
}
/* Column counts per layout (1–6). */
.woocommerce ul.products.columns-1,
.et_pb_wc_products ul.products.columns-1 {
grid-template-columns: repeat(1, 1fr) !important;
}
.woocommerce ul.products.columns-2,
.et_pb_wc_products ul.products.columns-2 {
grid-template-columns: repeat(2, 1fr) !important;
}
.woocommerce ul.products.columns-3,
.et_pb_wc_products ul.products.columns-3 {
grid-template-columns: repeat(3, 1fr) !important;
}
.woocommerce ul.products.columns-4,
.et_pb_wc_products ul.products.columns-4 {
grid-template-columns: repeat(4, 1fr) !important;
}
.woocommerce ul.products.columns-5,
.et_pb_wc_products ul.products.columns-5 {
grid-template-columns: repeat(5, 1fr) !important;
}
.woocommerce ul.products.columns-6,
.et_pb_wc_products ul.products.columns-6 {
grid-template-columns: repeat(6, 1fr) !important;
}
/* Fallback: if no columns-N class is present, default to 4 across. */
.woocommerce ul.products:not([class*="columns-"]),
.et_pb_wc_products ul.products:not([class*="columns-"]) {
grid-template-columns: repeat(4, 1fr) !important;
}
/* -------------------------------------------------------------------------
* Responsive: collapse columns on smaller screens.
*
* The ladder is 4 -> 3 (<=1100px) -> 2 (<=980px), and it stays at 2 all the
* way down. Phones deliberately keep two products per row: at 1-up each card
* fills the viewport and the thumbnails render enormous, which is the usual
* way a 4-column grid "breaks" on mobile.
*
* These have to match (or beat) the specificity of the `.columns-N` rules
* above, or a shop set to e.g. 4 columns would keep 4 columns at every
* breakpoint — a plain `.woocommerce ul.products` selector loses that fight
* every time, media query or not, since specificity (not source order)
* decides between two `!important` rules.
* ---------------------------------------------------------------------- */
@media (max-width: 1100px) {
.woocommerce ul.products.columns-1,
.woocommerce ul.products.columns-2,
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-4,
.woocommerce ul.products.columns-5,
.woocommerce ul.products.columns-6,
.woocommerce ul.products:not([class*="columns-"]),
.et_pb_wc_products ul.products.columns-1,
.et_pb_wc_products ul.products.columns-2,
.et_pb_wc_products ul.products.columns-3,
.et_pb_wc_products ul.products.columns-4,
.et_pb_wc_products ul.products.columns-5,
.et_pb_wc_products ul.products.columns-6,
.et_pb_wc_products ul.products:not([class*="columns-"]) {
grid-template-columns: repeat(3, 1fr) !important;
}
}
/* Tablet portrait and below: two across, and that's where it stays. A tighter
* column gap buys back some card width at these sizes. */
@media (max-width: 980px) {
.woocommerce ul.products.columns-1,
.woocommerce ul.products.columns-2,
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-4,
.woocommerce ul.products.columns-5,
.woocommerce ul.products.columns-6,
.woocommerce ul.products:not([class*="columns-"]),
.et_pb_wc_products ul.products.columns-1,
.et_pb_wc_products ul.products.columns-2,
.et_pb_wc_products ul.products.columns-3,
.et_pb_wc_products ul.products.columns-4,
.et_pb_wc_products ul.products.columns-5,
.et_pb_wc_products ul.products.columns-6,
.et_pb_wc_products ul.products:not([class*="columns-"]) {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 767px) {
.woocommerce ul.products,
.et_pb_wc_products ul.products {
column-gap: 4% !important;
row-gap: 2em !important;
margin-top: 12px !important;
padding-top: 14px !important;
}
}
/**
* -----------------------------------------------------------------------
* PRODUCT LISTING CUSTOM STYLING
* ----------------------------------------------------------------------
*/
/* Breathing room between the thumbnail and the product title beneath it. */
.et_shop_image {
margin-bottom: 22px !important;
}
/* -------------------------------------------------------------------------
* PRODUCT LOOP TYPOGRAPHY (shop + category archives)
*
* Matches the scale used for related products on the single product page, so
* a product card looks the same wherever it appears.
* ---------------------------------------------------------------------- */
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.et_pb_wc_products ul.products li.product h2,
.et_pb_wc_products ul.products li.product h3,
.et_pb_wc_products ul.products li.product .woocommerce-loop-product__title {
font-family: var(--ama-font-heading) !important;
font-size: 17px !important;
font-weight: 500 !important;
line-height: 1.35 !important;
color: var(--ama-ink) !important;
margin: 0 0 0.3em !important;
padding: 0 !important;
}
/* Divi paints loop prices in its default accent `#2EA3F2`; bring them back to
* the palette. Every level is pinned because `bdi` / the amount span can take
* their colour from other rules — same nesting as the single product page. */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product span.price,
.woocommerce ul.products li.product .price bdi,
.woocommerce ul.products li.product .price .woocommerce-Price-amount,
.woocommerce ul.products li.product .price .woocommerce-Price-currencySymbol,
.woocommerce ul.products li.product .price ins,
.et_pb_wc_products ul.products li.product .price,
.et_pb_wc_products ul.products li.product .price bdi,
.et_pb_wc_products ul.products li.product .price .woocommerce-Price-amount {
font-family: var(--ama-font-body) !important;
font-size: 15px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
color: var(--ama-price) !important;
text-decoration: none !important;
}
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del bdi,
.woocommerce ul.products li.product .price del .woocommerce-Price-amount {
color: rgba(49, 44, 33, 0.4) !important;
font-weight: 400 !important;
text-decoration: line-through !important;
}
.woocommerce ul.products li.product .star-rating,
.et_pb_wc_products ul.products li.product .star-rating {
font-size: 13px !important;
line-height: 1 !important;
}
/* -------------------------------------------------------------------------
* ARCHIVE HEADER (category title / description / result count / sorting)
* ---------------------------------------------------------------------- */
.woocommerce .woocommerce-products-header__title,
.woocommerce h1.page-title {
font-family: var(--ama-font-heading) !important;
font-size: 34px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
color: var(--ama-ink) !important;
margin-bottom: 0.4em !important;
}
.woocommerce .term-description,
.woocommerce .woocommerce-products-header .term-description p {
font-family: var(--ama-font-body);
font-size: 15px;
line-height: 1.7;
color: rgba(49, 44, 33, 0.75);
margin-bottom: 0 !important;
}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select {
font-family: var(--ama-font-body) !important;
font-size: 14px !important;
color: rgba(49, 44, 33, 0.7) !important;
}
@media (max-width: 767px) {
.woocommerce .woocommerce-products-header__title,
.woocommerce h1.page-title {
font-size: 26px !important;
}
/* Cards get narrow at 2-up on a phone, so ease the type down with them. */
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.et_pb_wc_products ul.products li.product h2,
.et_pb_wc_products ul.products li.product h3,
.et_pb_wc_products ul.products li.product .woocommerce-loop-product__title {
font-size: 15px !important;
}
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price bdi,
.woocommerce ul.products li.product .price .woocommerce-Price-amount {
font-size: 14px !important;
}
.et_shop_image {
margin-bottom: 14px !important;
}
}
/* -------------------------------------------------------------------------
* PAGINATION (shop / category archives)
*
* WooCommerce's own CSS only sets `list-style:none` on the `` and
* `display:inline-block` on each `- ` (see woocommerce-layout.css) — it
* never sizes or colours the numbers themselves, so they were rendering at
* whatever small size the theme's plain-link styles happened to produce.
* Rebuilt as square chips using the same ink/gold/cream language and
* --ama-radius as the rest of the site, with the current page styled like
* the solid buttons (assets/css/cart.css section 3) rather than WooCommerce's
* bare bold-text default.
* ---------------------------------------------------------------------- */
.woocommerce nav.woocommerce-pagination,
.woocommerce-page nav.woocommerce-pagination {
margin: 40px 0 0 !important;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers,
.woocommerce-page nav.woocommerce-pagination ul.page-numbers {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: wrap !important;
gap: 8px !important;
border: 0px !important;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li {
margin: 0 !important;
border-right: 0 !important;
}
.woocommerce nav.woocommerce-pagination .page-numbers {
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 40px !important;
height: 40px !important;
padding: 0 12px !important;
border: 1px solid var(--ama-line) !important;
border-radius: var(--ama-radius) !important;
background-color: transparent !important;
color: var(--ama-ink) !important;
font-family: var(--ama-font-body) !important;
font-size: 15px !important;
font-weight: 500 !important;
line-height: 1 !important;
text-decoration: none !important;
transition: background-color 0.15s linear, border-color 0.15s linear, color 0.15s linear;
}
.woocommerce nav.woocommerce-pagination a.page-numbers:hover {
border-color: var(--ama-ink) !important;
background-color: var(--ama-cream) !important;
}
.woocommerce nav.woocommerce-pagination a.page-numbers:focus-visible {
outline: 2px solid var(--ama-gold);
outline-offset: 1px;
}
.woocommerce nav.woocommerce-pagination .page-numbers.current {
border-color: var(--ama-ink) !important;
background-color: var(--ama-ink) !important;
color: #fff !important;
font-weight: 600 !important;
}
/* The "…" gap marker: no border/background, just muted text — it isn't
* interactive so it shouldn't look like the other chips. */
.woocommerce nav.woocommerce-pagination .page-numbers.dots {
border-color: transparent !important;
background: none !important;
color: rgba(49, 44, 33, 0.45) !important;
}
/* Prev/next arrows read small at the body font size, so they're sized up
* independently of the numbered chips next to them. */
.woocommerce nav.woocommerce-pagination .page-numbers.prev,
.woocommerce nav.woocommerce-pagination .page-numbers.next {
font-size: 18px !important;
}
/* Neither WooCommerce's core CSS nor Divi's compiled stylesheet puts a
* border/background on `.woocommerce-pagination` or its `ul` — that box only
* shows up once the pagination itself has real height/padding (this file's
* chips), so it was likely already there, applied via a Divi row/column/
* module "Border" design-tab setting on whatever wraps the pagination in the
* page builder. Strip it off the standard Divi wrapper classes whenever they
* sit directly around the pagination, rather than guessing the page-specific
* class Divi would have generated for that setting. */
.et_pb_module:has(> nav.woocommerce-pagination),
.et_pb_column:has(> nav.woocommerce-pagination),
.et_pb_row:has(> nav.woocommerce-pagination) {
border: none !important;
background: none !important;
box-shadow: none !important;
padding: 0 !important;
}
@media (max-width: 767px) {
.woocommerce nav.woocommerce-pagination .page-numbers {
min-width: 36px !important;
height: 36px !important;
padding: 0 10px !important;
font-size: 14px !important;
}
}
/* -------------------------------------------------------------------------
* WOOCOMMERCE CONTENT WRAPPER (shop / category archives)
* ---------------------------------------------------------------------- */
.woocommerce-page #content-area {
margin-bottom: 50px;
}