.elementor-3631 .elementor-element.elementor-element-def43ee{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;}.elementor-3631 .elementor-element.elementor-element-33b8f74{--display:flex;}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .woocommerce-loop-product__title{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .woocommerce-loop-product__title, .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price ins{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price ins .amount{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products{--products-title-color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.products-heading-show .related-products > h2, .elementor-widget-wc-archive-products.products-heading-show .upsells > h2, .elementor-widget-wc-archive-products.products-heading-show .cross-sells > h2{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price del{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price del .amount{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price del {font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-wc-archive-products.elementor-wc-products .added_to_cart{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-wc-archive-products .elementor-products-nothing-found{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-3631 .elementor-element.elementor-element-caf6d63.elementor-wc-products ul.products li.product{text-align:left;}.elementor-3631 .elementor-element.elementor-element-caf6d63.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-3631 .elementor-element.elementor-element-caf6d63.elementor-wc-products ul.products li.product span.onsale{display:block;}@media(min-width:768px){.elementor-3631 .elementor-element.elementor-element-33b8f74{--width:80%;}}@media(max-width:1024px){.elementor-3631 .elementor-element.elementor-element-caf6d63.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(max-width:767px){.elementor-3631 .elementor-element.elementor-element-caf6d63.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}}/* Start custom CSS for container, class: .elementor-element-def43ee *//* ==========================================================================
SECOND CRACK — SHOP GRID
Standalone stylesheet. Targets the native WooCommerce archive markup
(ul.products li.product) as rendered by the wc-archive-products widget —
different DOM than the Elementor loop-grid used elsewhere on the site.
Tokens duplicated on purpose, same values as the other stylesheets, so
this file works loaded alone or alongside the others.
========================================================================== */
:root {
--color-primary: #834227;
--color-primary-strong: #5D2918;
--color-subtle: #EECBAE;
--color-secondary: #6E6862;
--color-neutral: #F3EFEA;
--color-surface: #FCFAF6;
--color-on-surface: #1D1815;
--color-border: #E2DDD7;
--font-sans: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif;
--radius-md: 8px;
--radius-lg: 12px;
--radius-full: 9999px;
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-gutter: 24px;
}
/* ==========================================================================
Grid — DESIGN.md: "4 up, 3 up, 2 up." WooCommerce's own shortcode setting
(columns-3 baked into the class list) is overridden so the count follows
the design system rather than the widget's column field.
========================================================================== */
.woocommerce ul.products.columns-3,
.woocommerce ul.products {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: var(--space-gutter) !important;
/* stretch, so a row of cards reads as one comparable set. DESIGN.md:
"The grid is where comparison happens, so every card must show the same
four things in the same order." The rules further down fix the height of
each slot, so a listing missing a title or a price still lines up with
its neighbours instead of pulling the row out of shape. */
align-items: stretch !important;
}
@media (max-width: 1024px) {
.woocommerce ul.products.columns-3,
.woocommerce ul.products {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
@media (max-width: 767px) {
.woocommerce ul.products.columns-3,
.woocommerce ul.products {
/* DESIGN.md: "Don't collapse the shop grid to one column on mobile.
Two up, always — a marketplace grid exists to be compared." */
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: var(--space-md) !important;
}
}
/* ==========================================================================
Card — DESIGN.md component `product-card`:
surface fill, 12px radius, 16px padding, product-title at 600, then
price-compact, then the origin chip. "Nothing else — no rating stars,
no hover-reveal quick-add."
========================================================================== */
.woocommerce ul.products li.product {
background-color: var(--color-surface) !important;
color: var(--color-on-surface) !important;
border-radius: var(--radius-lg) !important;
padding: 0 0 var(--space-md) !important;
margin: 0 !important;
box-shadow: none !important;
display: flex !important;
flex-direction: column !important;
position: relative !important;
/* Same reasoning as loop-item.css: Surface and Neutral sit only 9 RGB
units apart, too close to read as "raised" on the tonal step alone. A
1px hairline is this system's stand-in for a shadow. */
border: 1px solid var(--color-border) !important;
overflow: hidden !important;
}
/* Image: fixed square, whatever the source dimensions. This is what makes
every card the same size regardless of whether the underlying photo is
324x324 or 324x243 — object-fit crops to match, it never stretches. */
.woocommerce ul.products li.product img {
width: 100% !important;
aspect-ratio: 1 / 1 !important;
height: auto !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
/* Card radius (12px) describes the outer edge of its own 1px border; the
curve one pixel inside it, where the image sits, is a pixel tighter —
matching the outer value left a sliver of the card's own background
showing through at the corner instead of a clean seam. Same fix as
loop-item.css. */
border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0 !important;
}
/* No padding on the link. img, title, and price are all direct children of
this ONE (confirmed from the live markup — no separate image wrapper
like loop-item.css has), so padding here was insetting the image too,
breaking the edge-to-edge spec. The image stays flush; title and price
carry their own margin instead, below. */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
padding: 0 !important;
text-decoration: none !important;
color: inherit !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-family: var(--font-sans) !important;
font-size: 17px !important;
font-weight: 600 !important;
line-height: 1.35 !important;
color: var(--color-on-surface) !important;
/* No top margin — the title sits close to the image instead of reading
as pushed down the card. The gap to the price comes from this
element's own bottom margin instead. 16px from the card's edges
left and right. */
margin: 0 var(--space-md) var(--space-xs) !important;
padding: 0 !important;
}
/* price-compact: 16px/600, tabular figures, never coloured — a coloured
price reads as a discount, and primary is spoken for by actions. */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .woocommerce-Price-amount {
font-family: var(--font-sans) !important;
font-size: 16px !important;
font-weight: 600 !important;
color: var(--color-on-surface) !important;
font-feature-settings: "tnum" 1 !important;
}
/* min-height reserved rather than collapsing on :empty — same fix as
loop-item.css. A missing price still keeps its slot's height, so a
listing without one is not a line shorter than its neighbours.
No top margin (that gap belongs to the title's bottom margin above);
bottom margin instead, clearing space before the button. */
.woocommerce ul.products li.product .price {
display: block !important;
margin: 0 var(--space-md) var(--space-md) !important;
min-height: calc(16px * 1.3) !important;
}
/* The Add to cart / Read more button is a sibling of the link, not inside
it — pinned to the card's bottom edge the same way loop-item.css pins
its button. */
.woocommerce ul.products li.product .button {
margin-top: auto !important;
}
/* A listing with no image gets the same square as every other card rather
than a short box that shifts everything below it. */
.woocommerce ul.products li.product img.woocommerce-placeholder {
background-color: var(--color-neutral) !important;
object-fit: contain !important;
padding: 20% !important;
opacity: 0.5 !important;
}
/* ==========================================================================
What DESIGN.md excludes from this component
========================================================================== */
/* "No rating stars" */
.woocommerce ul.products li.product .star-rating,
.woocommerce ul.products li.product .wcfmmp-store-rating {
display: none !important;
}
/* Vendor byline ("Store: …"). DESIGN.md lists exactly what a product-card
carries — image, title, price, origin chip — and closes with "Nothing
else". The byline also only renders on some listings, so it broke the
rule that "every card must show the same four things in the same order"
and left rows of uneven cards. The vendor is named on the product page,
which is where the buyer needs it. */
.woocommerce ul.products li.product .wcfmmp_sold_by_container,
.woocommerce ul.products li.product .wcfmmp_sold_by_wrapper {
display: none !important;
}
/* Vendor edit/delete controls: only ever visible to the vendor who owns the
listing, but they still need to sit out of the way of a page a real
shopper might see them on. */
.woocommerce ul.products li.product .wcfm_buttons {
position: absolute !important;
top: var(--space-sm) !important;
left: var(--space-sm) !important;
z-index: 2 !important;
background: rgba(252, 250, 246, 0.9) !important;
border-radius: var(--radius-full) !important;
padding: 2px 8px !important;
font-size: 11px !important;
}
/* ==========================================================================
Buttons — Add to cart / Read more take the same primary treatment as
the rest of the site.
========================================================================== */
.woocommerce ul.products li.product .button {
background-color: var(--color-primary) !important;
color: var(--color-surface) !important;
font-family: var(--font-sans) !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 0.01em !important;
text-transform: none !important;
border: none !important;
border-radius: var(--radius-md) !important;
padding: var(--space-sm) var(--space-md) !important;
margin: auto var(--space-md) 0 !important; /* top: auto pins it to the card's bottom edge */
text-align: center !important;
text-decoration: none !important;
box-shadow: none !important;
transition: background-color 150ms ease-out !important;
}
.woocommerce ul.products li.product .button:hover {
background-color: var(--color-primary-strong) !important;
color: var(--color-surface) !important;
}
/* Touch floor, tablet and mobile. */
@media (max-width: 1024px) {
.woocommerce ul.products li.product .button {
min-height: 44px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
}
/* ==========================================================================
Sorting toolbar (order-by, result count, pagination) — WooCommerce
renders one above and one below the grid by default; both get the same
treatment.
========================================================================== */
/* No justify-content: space-between. This row can carry three children
(sorting dropdown, result count, pagination), and space-between always
pins the middle one dead-center — which is exactly the centered
"Showing 1–10 of 21 results" in the screenshot, and DESIGN.md rules out
centered text everywhere in this system. Left-flush order instead, with
pagination pushed to the far right by its own margin. */
/* WooCommerce prints a .woocommerce-notices-wrapper as the toolbar's first
child, but only above the grid — not below it. Even empty, it's still a
flex item and eats a `gap` worth of space before the dropdown, so the top
toolbar sat shifted right compared to the bottom one. Collapsed out of
the flex layout entirely when it has nothing in it. */
.storefront-sorting .woocommerce-notices-wrapper:empty {
display: none !important;
}
.storefront-sorting {
margin-top: 12px !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
gap: var(--space-md) !important;
margin-bottom: var(--space-lg) !important;
font-family: var(--font-sans) !important;
}
/* The second instance — WooCommerce prints one above the grid and one
below it — sits right against the last row of cards with no clearance.
Extra breathing room only on this one, so the top toolbar (already
spaced from the header above it) doesn't gain space it doesn't need. */
.storefront-sorting:last-of-type {
padding-top: var(--space-sm) !important;
}
/* On a narrow screen the dropdown, count, and pagination wrap onto their
own lines with only the row's own gap between them — same value used for
a horizontal row, too tight once they're stacked. More vertical room
between the wrapped rows, plus a touch more clearance above and below
the whole toolbar. */
@media (max-width: 767px) {
.storefront-sorting {
row-gap: var(--space-md) !important;
margin-top: var(--space-md) !important;
margin-bottom: var(--space-xl) !important;
}
}
/* Storefront's own stylesheet puts a top margin on .woocommerce-pagination
(meant for when it sits alone under the grid) — inside this flex toolbar
that margin just shoves it down below the dropdown and count. Zeroed
here; align-self keeps it pinned to the row's top edge as well. */
/* Storefront's default margin on the pagination is zeroed here too, so the
only margin left is the margin-left: auto that pushes it flush right. */
.storefront-sorting .woocommerce-pagination {
margin: 0 !important;
padding: 0 !important;
align-self: flex-start !important;
}
/* Flush left: no default margin OR padding on the dropdown's form or the
result count, so they sit against the row's own left edge with just the
row's gap between them. Theme default padding was the reason the flex
item's own box (visible as the dashed outline in DevTools) was wider than
the visible control inside it. */
.storefront-sorting .woocommerce-ordering,
.storefront-sorting .woocommerce-result-count {
margin: 0 !important;
padding: 0 !important;
}
.woocommerce-result-count {
font-family: var(--font-sans) !important;
font-size: 14px !important;
color: var(--color-secondary) !important;
margin: 0 !important;
font-feature-settings: "tnum" 1 !important;
}
select.orderby {
font-family: var(--font-sans) !important;
font-size: 14px !important;
color: var(--color-on-surface) !important;
background-color: var(--color-surface) !important;
border: 1px solid var(--color-border) !important;
border-radius: var(--radius-md) !important;
padding: var(--space-xs) var(--space-sm) !important;
}
.woocommerce-pagination .page-numbers {
display: flex !important;
list-style: none !important;
gap: var(--space-xs) !important;
margin: 0 !important;
padding: 0 !important;
}
.woocommerce-pagination .page-numbers li a,
.woocommerce-pagination .page-numbers li span {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 32px !important;
height: 32px !important;
font-family: var(--font-sans) !important;
font-size: 14px !important;
font-feature-settings: "tnum" 1 !important;
color: var(--color-on-surface) !important;
text-decoration: none !important;
border-radius: var(--radius-md) !important;
}
.woocommerce-pagination .page-numbers li .current {
background-color: var(--color-primary) !important;
color: var(--color-surface) !important;
}
/* The theme's own icons.css hides the "next/prev" link's real text
(text-indent: -9999px) and shows an icon glyph via a pseudo-element
instead, positioned with offsets tuned for the theme's own default
height. Our flex-centering on the doesn't reach that pseudo-element —
it's a separate box — so it kept sitting low against our 32px tile.
Centering it explicitly, absolute inside the 's own `position:
relative`, fixes it regardless of what offset the theme baked in. */
.woocommerce-pagination .next::before,
.woocommerce-pagination .next::after,
.woocommerce-pagination .prev::before,
.woocommerce-pagination .prev::after {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
margin: 0 !important;
}
.woocommerce-pagination .page-numbers li a:hover {
background-color: var(--color-neutral) !important;
}
/* ==========================================================================
Dark mode — separate palette, not an inversion.
========================================================================== */
@media (prefers-color-scheme: dark) {
.woocommerce ul.products li.product {
background-color: #221D1A !important; /* neutral-dark */
color: #E2DDD5 !important; /* on-surface-dark */
border-color: #352F2B !important; /* border-dark */
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .woocommerce-Price-amount {
color: #E2DDD5 !important;
}
.woocommerce ul.products li.product .wcfmmp_sold_by_wrapper {
color: #97918A !important; /* secondary-dark */
}
.woocommerce ul.products li.product .button {
background-color: #C88762 !important; /* primary-dark */
color: #13100D !important; /* surface-dark */
}
.woocommerce ul.products li.product .button:hover {
background-color: #E0AB86 !important; /* primary-strong-dark */
}
select.orderby {
background-color: #221D1A !important;
color: #E2DDD5 !important;
border-color: #352F2B !important;
}
.woocommerce-pagination .page-numbers li .current {
background-color: #C88762 !important;
color: #13100D !important;
}
.woocommerce-pagination .page-numbers li a:hover {
background-color: #221D1A !important;
}
}/* End custom CSS */