/*
Theme Name: Shoptimizer Child Theme
Template: shoptimizer
Version: 1.8.0
Text Domain: shoptimizer-child-theme
*/
/* ==========================================================================
TABLE OF CONTENTS
--------------------------------------------------------------------------
0. TOKENS — canonical palette + typography scale (single source of truth)
1. BASE / GLOBAL — front-page tweak, .below-content
2. FOOTER — structure, typography, mobile (so-css merged)
3. COMPONENTS — trust seals, tiered pricing, payment logos
4. WC TYPOGRAPHY — WooCommerce-scoped type scale
5. ARCHIVE CARDS — product card shell, image, body, CTA, badges
6. ARCHIVE GRID — CSS Grid layout (replaces float+margin gutter)
7. ARCHIVE SIDEBAR — categories widget, price filter, tag cloud (so-css merged)
7b. ARCHIVE SIDEBAR — FacetWP facets (checkboxes, slider, reset button)
8. ARCHIVE TOOLBAR — result count, orderby pill, pagination (so-css merged)
9. PDP — buy card, price, bullets, stock, qty+ATC, trust, tabs, desc (so-css merged)
10. MINI-CART — slide-out cart buttons (de-duplicated from so-css)
11. HEADER — scoped tokens, topbar, search, AJAX, nav, mega menu (so-css merged)
12. CHECKOUT — InPost Paczkomaty picker
13. PAGES — contact page layout (moved from so-css)
--------------------------------------------------------------------------
IMPORTANT: child style.css loads BEFORE parent shoptimizer-main.css.
Rules that need to win over the parent must be prefixed for higher
specificity (e.g. body.class selector, ID-anchored, or use !important
with a comment explaining why).
========================================================================== */
/* ==========================================================================
0. TOKENS
--------------------------------------------------------------------------
Single source of truth for brand colours, typography, and spacing.
RULES
1. New / cleaned code uses CANONICAL tokens only (the lists below).
2. LEGACY ALIASES exist solely so older references keep resolving — they
are NOT a second source of truth. Do not reach for them in new code.
CANONICAL BRAND COLOURS
--zo-forest #005734 primary green — text, links, accents on light bg
--zo-forest-deep #00402a hover / darker variant
--zo-green-stock #065631 "in stock" text + CommerceKit "new" badge
--zo-lime #8cc63f secondary fill / accent (slider, logo, footer, PDP)
--zo-cta #F46B30 buy-button orange (white text 3:1 AA-Large — bold required)
--zo-cta-hover #D75E2A buy-button hover
NEUTRALS
--zo-ink #16201b headings / titles
--zo-text #3a443e body paragraphs
--zo-text-muted #6b7770 eyebrow, "z VAT", counts, meta, .below-content
--zo-line #e6ece6 card and widget borders
--zo-img-bg #ffffff image-box background
--zo-active #eaf4db active chip / category
--zo-mint #eef6ef header AJAX-results hover tint
FOOTER (used only inside footer.site-footer / footer.copyright) → --footer-*
LEGACY ALIASES (backward-compat only — see RULE 2)
--zo-lime-apple → var(--zo-lime) PDP once had a lighter "apple" green;
now unified with the global lime.
--zo-forest-dark → var(--zo-forest-deep) header-restyle spelling.
--zo-ar-* → canonical archive restyle.
--zo-pdp-* → canonical product-page restyle.
========================================================================== */
:root {
/* ---- Typography scale (used in section 4 WC typography) ----
Naming: base = 16px/1rem; positive suffix = larger; b-suffix = smaller.
px equivalents at 16px root font-size (most browsers default):
-2b 12px -1b 13px sm 14px base 16px lg 18px
-1 20px -2 25px -3 32px -4 40px -5 51px */
--font-size-2b: 0.75rem; /* 12px — micro: badges, eyebrow, price suffix, OOS */
--font-size-1b: 0.8125rem; /* 13px — meta, buttons, breadcrumbs */
--font-size-sm: 0.875rem; /* 14px — small UI (footer, stock, archive CTA) */
--font-size: 1rem; /* 16px — base body */
--font-size-lg: 1.125rem; /* 18px — lead / large body / primary CTA */
--font-size-1: 1.25rem; /* 20px — subheadings, card titles */
--font-size-2: 1.5625rem; /* 25px — section headings */
--font-size-3: 2rem; /* 32px — H1 product title */
--font-size-4: 2.5rem; /* 40px — large display */
--font-size-5: 3.1875rem; /* 51px — hero display */
/* Line heights (paired with font-size scale above) */
--line-height-2b: 1.4;
--line-height-1b: 1.5385;
--line-height: 1.5;
--line-height-1: 1.4;
--line-height-2: 1.28;
--line-height-3: 1.25;
--line-height-4: 1.2;
--line-height-5: 1.1765;
/* Letter spacings (optical tracking, paired with font-size scale) */
--letter-space-2b: 0.074em;
--letter-space-1b: 0.05em;
--letter-space: 0.035em;
--letter-space-1: 0.022em;
--letter-space-2: 0.0116em;
--letter-space-3: 0.0025em;
--letter-space-4: -0.004em;
--letter-space-5: -0.0096em;
/* ---- Spacing scale (consistent rhythm; apply where a value already equals a step) ---- */
--space-2xs: 4px;
--space-xs: 8px;
--space-sm: 12px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;
/* ---- Canonical brand tokens ---- */
--zo-forest: #005734;
--zo-forest-deep: #00402a;
--zo-forest-dark: var(--zo-forest-deep); /* legacy alias (header-restyle spelling) */
--zo-green-stock: #065631;
--zo-lime: #8cc63f;
--zo-lime-apple: var(--zo-lime); /* legacy alias — see header RULE 2 */
--zo-cta: #F46B30;
--zo-cta-hover: #D75E2A;
--zo-ink: #16201b;
--zo-text: #3a443e;
--zo-text-muted: #6b7770;
--zo-line: #e6ece6;
--zo-img-bg: #ffffff;
--zo-active: #eaf4db;
--zo-mint: #eef6ef;
/* ---- Footer palette (used exclusively inside footer.site-footer / footer.copyright) ----
Customizer (Kirki) drives the base bg/text/links via theme_mods; these tokens
let us express a two-tone footer (deep bar above, darker bar below) that a
single shoptimizer_footer_bg option cannot. */
--footer-bg: #00482b;
--footer-bottom: #003b23;
--footer-heading: #ffffff;
--footer-body: #cfdbd2;
--footer-muted: #a9bbb0;
--footer-accent: var(--zo-lime);
--footer-divider: rgba(255,255,255,0.1);
/* ---- Legacy aliases: archive (backward-compat only; body now uses canonical) ---- */
--zo-ar-forest: var(--zo-forest);
--zo-ar-forest-deep: var(--zo-forest-deep);
--zo-ar-lime: var(--zo-lime);
--zo-ar-ink: var(--zo-ink);
--zo-ar-text: var(--zo-text);
--zo-ar-muted: var(--zo-text-muted);
--zo-ar-line: var(--zo-line);
--zo-ar-img-bg: var(--zo-img-bg);
--zo-ar-active: var(--zo-active);
--zo-ar-cta: var(--zo-cta);
--zo-ar-cta-hover: var(--zo-cta-hover);
/* ---- Legacy aliases: PDP (backward-compat only; body now uses canonical) ---- */
--zo-pdp-forest: var(--zo-forest);
--zo-pdp-forest-deep: var(--zo-forest-deep);
--zo-pdp-lime: var(--zo-lime);
--zo-pdp-ink: var(--zo-ink);
--zo-pdp-text: var(--zo-text);
--zo-pdp-muted: var(--zo-text-muted);
--zo-pdp-line: var(--zo-line);
--zo-pdp-img-bg: var(--zo-img-bg);
--zo-pdp-active: var(--zo-active);
--zo-pdp-cta: var(--zo-cta);
--zo-pdp-cta-hover: var(--zo-cta-hover);
}
/* ==========================================================================
1. BASE / GLOBAL
========================================================================== */
/* Hide auto-generated entry-title on the homepage (Shoptimizer renders it) */
body.home .entry-header .entry-title {
display: none;
}
/* Below-content strip — light green band below main content area.
Uses --zo-text-muted (now defined in :root) for widget icons/text. */
div.below-content {
margin-top: 40px;
background-color: #F4F7F4;
}
.below-content .widget .ri {
color: var(--zo-text-muted);
}
.below-content .widget svg {
stroke: var(--zo-text-muted);
}
/* ==========================================================================
2. FOOTER
--------------------------------------------------------------------------
Colours are primarily driven by Customizer (Kirki injects inline CSS on
footer.site-footer + footer.copyright with equal specificity, emitted AFTER
this stylesheet). Customizer controls: bg, text/links, headings, hover.
What this section adds on top:
– two-tone bottom bar (--footer-bottom !important beats Kirki equal spec)
– widget typography, accent underlines on widget titles
– contact-row layout, social icons, company-legal block
– footer grid (responsive 1 → 2 → 4 columns)
– copyright bar flex layout
– mobile overrides (merged from so-css; accent border uses var(--zo-lime))
========================================================================== */
footer.site-footer {
background-color: var(--footer-bg);
color: var(--footer-body);
padding: 4rem 0 2.5rem;
}
footer.site-footer h3 {
margin: 0 0 1rem;
color: var(--footer-heading);
font-size: var(--font-size-lg);
font-weight: 700;
line-height: 1.3;
}
footer.site-footer .col-full {
display: grid;
grid-template-columns: 1fr;
align-items: start;
gap: 2rem;
}
footer.site-footer .widget {
margin: 0;
padding: 0;
}
.site footer.site-footer .widget .widget-title,
.site-footer .widget.widget_block h2 {
margin: 0 0 1rem;
color: var(--footer-heading);
font-size: var(--font-size-lg);
font-weight: 700;
line-height: 1.3;
}
/* Lime accent bar under widget titles */
.site-footer .widget .widget-title::after {
content: "";
display: block;
width: 32px;
height: 3px;
background: var(--footer-accent);
margin-top: 8px;
border-radius: 0;
}
.site-footer span.gamma.widget-title {
font-weight: 700;
font-size: var(--font-size-lg);
}
footer.site-footer .widget p,
footer.site-footer .widget li {
color: var(--footer-body);
font-size: var(--font-size-sm);
line-height: 1.6;
}
footer.site-footer .widget p {
margin: 0 0 0.65rem;
}
footer.site-footer #text-9.zo-footer-contact-merged .textwidget,
footer.site-footer #text-9.zo-footer-contact-merged {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
footer.site-footer .zo-footer-company-intro {
margin: 0;
color: var(--footer-body);
line-height: 1.6;
font-size: var(--font-size-sm);
}
footer.site-footer .zo-footer-company-intro .zo-footer-company-legal {
display: inline-block;
margin-top: 0.25rem;
font-size: var(--font-size-2b);
line-height: 1.4;
color: var(--footer-muted);
}
.zo-footer-company-legal {
font-size: var(--font-size-1b);
}
.zo-footer-company-logo {
margin-bottom: 20px;
}
.zo-footer-company-logo img {
max-width: 33%;
}
.footer-logo {
width: 35%;
height: 35%;
margin-bottom: 20px;
}
footer.site-footer .zo-footer-social {
display: flex;
align-items: center;
gap: 0.9rem;
margin-top: 0.85rem;
}
footer.site-footer .zo-footer-social__link {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--footer-body) !important;
line-height: 1;
}
footer.site-footer .zo-footer-social__link svg {
width: 20px;
height: 20px;
display: block;
fill: currentColor;
}
footer.site-footer .zo-footer-contact-label {
display: inline-flex;
align-items: center;
gap: 0.42rem;
color: var(--footer-heading);
font-weight: 600;
}
footer.site-footer .zo-footer-contact-label svg {
width: 15px;
height: 15px;
flex: 0 0 15px;
display: block;
fill: var(--footer-accent);
}
footer.site-footer .zo-footer-contact-row {
display: flex;
flex-direction: column;
gap: 0.15rem;
margin: 0;
}
footer.site-footer .zo-footer-contact-row .zo-footer-contact-label {
color: var(--footer-muted);
font-size: var(--font-size-2b);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
footer.site-footer .zo-footer-contact-value {
display: inline-block;
color: #f3f4f6;
font-size: var(--font-size-sm);
font-weight: 600;
line-height: 1.35;
padding-left: calc(15px + 0.42rem);
}
footer.site-footer a.zo-footer-contact-value,
footer.site-footer a.zo-footer-contact-value:visited {
color: #f3f4f6 !important;
}
footer.site-footer a.zo-footer-contact-value:hover {
color: #ffffff !important;
text-decoration: underline;
text-decoration-thickness: 0.5px;
text-underline-offset: 0.16em;
}
footer.site-footer .zo-footer-company-legal-row {
margin: 0.35rem 0 0;
padding-top: 0.6rem;
border-top: 1px solid var(--footer-divider);
}
footer.site-footer .widget ul {
margin: 0;
padding: 0;
list-style: none;
}
footer.site-footer .widget li {
margin: 0 0 0.55rem;
}
footer.site-footer a:not(.button),
footer.site-footer a:not(.button):visited,
footer.site-footer a:not(.button):active,
footer.site-footer a:not(.button):focus,
footer.copyright a,
footer.copyright a:visited,
footer.copyright a:active,
footer.copyright a:focus {
color: var(--footer-body) !important;
text-decoration: none;
transition: color 0.2s ease, transform 0.2s ease;
}
/* List links nudge right on hover; inline links keep place */
footer.site-footer .widget li a:not(.button):hover,
footer.copyright a:hover,
footer.site-footer a:not(.button):hover {
color: var(--footer-heading) !important;
text-decoration: underline;
text-decoration-thickness: 0.5px;
text-underline-offset: 0.16em;
}
footer.site-footer .widget li a:not(.button) {
display: inline-block;
}
footer.site-footer .widget li a:not(.button):hover {
transform: translateX(3px);
}
footer.site-footer a:focus-visible,
footer.copyright a:focus-visible {
outline: 2px solid var(--footer-accent);
outline-offset: 3px;
border-radius: 0;
}
footer.site-footer li a:after {
display: none;
}
/* Two-tone bottom bar — !important beats Kirki's equal-specificity background-color.
(Kirki injects footer.site-footer, footer.copyright { background-color }
after this stylesheet; both selectors have the same specificity 0,1,1.) */
footer.copyright {
background-color: var(--footer-bottom) !important;
color: var(--footer-muted);
border-top: 1px solid var(--footer-divider);
padding: 1.25rem 0;
}
footer.copyright .col-full {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1rem;
}
footer.copyright .widget {
margin: 0;
padding: 0;
}
footer.copyright .widget p {
margin: 0;
color: var(--footer-muted);
/* !important: parent Shoptimizer/Kirki footer CSS is injected after child style.css. */
font-size: var(--font-size-sm) !important;
}
.below-content span.gamma.widget-title,
.below-content .widget p {
/* !important: parent Shoptimizer below-content typography loads after child style.css. */
font-size: var(--font-size-sm) !important;
}
/* Remove auto-margin on payment logo image in last copyright widget */
footer.copyright .widget:last-child img {
margin: 0;
}
/* Footer payment icons row — right-aligned on desktop */
.footer-payments {
display: flex;
justify-content: flex-end;
align-items: center;
}
/* Negative top-margin fix for second footer on tablet — so two footers don't overlap */
@media (max-width: 1024px) {
footer:last-child:not(:only-of-type) {
margin-top: -1rem;
}
}
/* Responsive breakpoints — footer grid */
@media (min-width: 768px) {
footer.site-footer .col-full {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2.5rem;
}
}
@media (min-width: 1100px) {
footer.site-footer .col-full {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/* Mobile footer overrides (≤768px) — merged from so-css.
Mobile footer accent border uses var(--zo-lime).
Change to var(--zo-forest) if you prefer the darker forest tone. */
@media (max-width: 768px) {
footer.site-footer {
border-top: 15px solid var(--zo-forest); /* DECISION #2 resolved */
line-height: 1.7;
}
div.below-content {
border-bottom: 5px solid var(--zo-forest); /* DECISION #2 resolved */
}
footer.site-footer .col-full {
padding-left: 15%;
padding-right: 15%;
box-sizing: border-box;
gap: 60px;
}
footer.site-footer .widget p,
footer.site-footer a:not(.button) {
font-size: var(--font-size-sm);
}
.site footer.site-footer .widget .widget-title {
font-size: var(--font-size-1);
}
/* Copyright bar stacks reversed (logo below text) on mobile */
.copyright .col-full,
footer.copyright .col-full {
display: flex !important;
flex-direction: column-reverse !important;
align-items: center;
text-align: center !important;
gap: 20px;
}
.copyright .col-full .widget {
width: 100% !important;
margin: 15px 0 !important;
}
/* Payment icons: centred + wrapped on mobile */
.payment-icons {
justify-content: center !important;
flex-wrap: wrap !important;
height: auto !important;
}
.payment-icons img {
height: 45px !important;
width: auto !important;
margin: 8px !important;
}
.payment-icons br {
display: none !important;
}
}
/* ==========================================================================
3. COMPONENTS — trust seals, tiered pricing, payment logos
--------------------------------------------------------------------------
Trust seals widget is rendered by a custom_html widget in the single-product
sidebar area; it also appears on the PDP buy card footer.
Payment logos (hplus-pay fieldset) appear in the buy-card.
========================================================================== */
.trust-seals-widget {
display: flex;
gap: 0;
justify-content: space-between;
color: var(--zo-text);
font-size: var(--font-size-1b);
text-align: center;
}
.trust-seals-widget .seal-item {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 8px 4px;
}
/* SVGs use user-supplied badge icons (fill/stroke baked in) — CSS stroke has no effect */
.trust-seals-widget .seal-item svg {
width: 48px;
height: 48px;
flex-shrink: 0;
stroke: var(--zo-forest);
}
.trust-seals-widget .seal-item span {
line-height: 1.3;
font-size: var(--font-size-2b);
color: var(--zo-text-muted);
}
@media (max-width: 480px) {
.trust-seals-widget {
flex-direction: column;
gap: var(--space-2xs);
}
.trust-seals-widget .seal-item {
flex-direction: row;
text-align: left;
gap: 10px;
}
}
/* Tiered-pricing / payment-method fieldset */
.hplus-pay {
margin: 0;
border: 0;
border-top: 1px solid var(--zo-line);
border-radius: 0;
padding: 10px 0 0;
text-align: center;
background: transparent;
}
.hplus-pay > legend {
font-weight: 600;
font-size: var(--font-size-2b);
color: var(--zo-text-muted);
padding: 0;
margin-bottom: 6px;
}
.payment-logos {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: var(--space-sm);
margin: 0;
}
.pay-logo {
height: clamp(24px, 2.5vw, 30px);
width: auto;
object-fit: contain;
transition: transform 0.25s ease, filter 0.25s ease;
}
.pay-logo:hover {
transform: scale(1.06);
filter: brightness(1.05);
}
@media (max-width: 576px) {
.payment-logos {
gap: var(--space-xs);
}
}
/* Inline payment icons row (copyright bar) */
.payment-icons {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
flex-wrap: nowrap;
}
.payment-icons img {
display: block;
height: 48px;
width: auto;
margin: 0;
}
/* ==========================================================================
4. WC TYPOGRAPHY — WooCommerce-scoped type scale
--------------------------------------------------------------------------
Applies the token-based scale to WC body classes. Sets font-size,
line-height and (for headings/UI) optical letter-spacing — colour and
weight live in the specific component sections below. Body/paragraph copy
uses letter-spacing:normal (no artificial tracking on long Polish text).
========================================================================== */
body.woocommerce,
body.woocommerce-page {
font-size: var(--font-size);
line-height: var(--line-height);
letter-spacing: normal;
}
body.woocommerce :is(p, li, dt, dd, label, td, th, input, select, textarea, .woocommerce-result-count),
body.woocommerce-page :is(p, li, dt, dd, label, td, th, input, select, textarea, .woocommerce-result-count) {
font-size: var(--font-size);
line-height: var(--line-height);
letter-spacing: normal;
}
body.woocommerce :is(h1, .single-product h1.product_title, .single-product .summary h1),
body.woocommerce-page :is(h1, .single-product h1.product_title, .single-product .summary h1) {
font-size: var(--font-size-3);
line-height: var(--line-height-3);
letter-spacing: var(--letter-space-3);
}
body.single-product.woocommerce div.product .summary h1,
body.single-product.woocommerce-page div.product .summary h1 {
font-size: var(--font-size-3);
line-height: var(--line-height-3);
letter-spacing: var(--letter-space-3);
}
body.woocommerce :is(h2, .woocommerce-tabs .panel h2, .related.products > h2, .upsells.products > h2),
body.woocommerce-page :is(h2, .woocommerce-tabs .panel h2, .related.products > h2, .upsells.products > h2) {
font-size: var(--font-size-2);
line-height: var(--line-height-2);
letter-spacing: var(--letter-space-2);
}
body.woocommerce :is(h3, .cart-collaterals h2, .woocommerce-checkout h3),
body.woocommerce-page :is(h3, .cart-collaterals h2, .woocommerce-checkout h3) {
font-size: var(--font-size-1);
line-height: var(--line-height-1);
letter-spacing: var(--letter-space-1);
}
body.woocommerce ul.products li.product .woocommerce-loop-product__title,
body.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
font-size: var(--font-size-1);
line-height: var(--line-height-1);
letter-spacing: var(--letter-space-1);
}
body.woocommerce :is(.price, p.price, span.price),
body.woocommerce-page :is(.price, p.price, span.price) {
font-size: var(--font-size-1);
line-height: var(--line-height-1);
letter-spacing: var(--letter-space-1);
}
body.woocommerce :is(small, .meta, .posted_in, .sku_wrapper, .woocommerce-review-link, .product_meta),
body.woocommerce-page :is(small, .meta, .posted_in, .sku_wrapper, .woocommerce-review-link, .product_meta) {
font-size: var(--font-size-1b);
line-height: var(--line-height-1b);
letter-spacing: var(--letter-space-1b);
}
body.woocommerce :is(.button, button, input[type="submit"], a.button, .single_add_to_cart_button),
body.woocommerce-page :is(.button, button, input[type="submit"], a.button, .single_add_to_cart_button) {
font-size: var(--font-size-1b);
line-height: var(--line-height-1b);
letter-spacing: var(--letter-space-1b);
font-weight: 700;
}
body.woocommerce :is(.woocommerce-breadcrumb, .orderby, .woocommerce-MyAccount-navigation a),
body.woocommerce-page :is(.woocommerce-breadcrumb, .orderby, .woocommerce-MyAccount-navigation a) {
font-size: var(--font-size-1b);
line-height: var(--line-height-1b);
letter-spacing: var(--letter-space-1b);
}
body.woocommerce select.orderby,
body.woocommerce-page select.orderby {
font-size: var(--font-size-1b);
line-height: var(--line-height-1b);
letter-spacing: var(--letter-space-1b);
}
/* ==========================================================================
5. ARCHIVE CARDS — product card shell, image, body, CTA, badges
--------------------------------------------------------------------------
Scope: shop, category, tag archive pages + related/upsells/cross-sells on PDP.
Card markup: Shoptimizer custom (inc/woocommerce/template-functions/loop.php),
NOT stock WC. Never change .add_to_cart_button data-attributes or class list
(WC AJAX relies on them).
Eyebrow: product_brand taxonomy (--zo-text-muted, uppercase, 0.75rem).
Brand is injected by zo_loop_product_brand() in functions.php (prio 9).
The parent's category eyebrow is disabled via filter in functions.php.
OOS badge: Shoptimizer emits span.product-out-of-stock inside the image
wrapper as a full-width bottom bar. We restyle into a small top-left pill.
CRITICAL: must clear width:100% and bottom:0 from parent, or border-radius
creates a dark ellipse covering the whole image (a verified past bug).
========================================================================== */
/* Card shell */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products li.product:not(.product-category),
body.single-product :is(.related, .upsells, .cross-sells) ul.products li.product:not(.product-category) {
position: relative;
display: flex;
flex-direction: column;
align-self: stretch;
background: #ffffff;
border: 1px solid var(--zo-line);
border-radius: 0;
padding: 0 0 14px;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
overflow: hidden;
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products li.product:not(.product-category):hover,
body.single-product :is(.related, .upsells, .cross-sells) ul.products li.product:not(.product-category):hover {
transform: translateY(-2px);
border-color: var(--zo-forest);
box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
@media (max-width: 600px) {
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products li.product:not(.product-category),
body.single-product :is(.related, .upsells, .cross-sells) ul.products li.product:not(.product-category) {
border-radius: 0;
}
}
/* Image panel — fixed aspect-ratio light box */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products li.product:not(.product-category) .woocommerce-image__wrapper,
body.single-product :is(.related, .upsells, .cross-sells) ul.products li.product:not(.product-category) .woocommerce-image__wrapper {
position: relative;
background: var(--zo-img-bg);
margin-bottom: 14px;
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products li.product:not(.product-category) .woocommerce-image__wrapper img,
body.single-product :is(.related, .upsells, .cross-sells) ul.products li.product:not(.product-category) .woocommerce-image__wrapper img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: contain;
padding: 14px;
box-sizing: border-box;
}
/* Preserve Shoptimizer's hover-scale on image, but suppress negative-transform ghost */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products li.product:not(.product-category):hover .woocommerce-image__wrapper,
body.single-product :is(.related, .upsells, .cross-sells) ul.products li.product:not(.product-category):hover .woocommerce-image__wrapper {
transform: none;
}
/* Card body wrapper */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products li.product:not(.product-category) .woocommerce-LoopProduct-link,
body.single-product :is(.related, .upsells, .cross-sells) ul.products li.product:not(.product-category) .woocommerce-LoopProduct-link {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products li.product:not(.product-category) .woocommerce-card__header,
body.single-product :is(.related, .upsells, .cross-sells) ul.products li.product:not(.product-category) .woocommerce-card__header {
display: flex;
flex-direction: column;
flex: 1 1 auto;
padding: 0 14px;
gap: 6px;
}
/* Eyebrow: brand name (product_brand taxonomy) */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products li.product:not(.product-category) p.product__brand,
body.single-product :is(.related, .upsells, .cross-sells) ul.products li.product:not(.product-category) p.product__brand {
margin: 0;
color: var(--zo-text-muted);
font-size: var(--font-size-2b);
line-height: 1.2;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* Safety net: parent category eyebrow is disabled in functions.php; keep it hidden if it ever re-appears */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products li.product:not(.product-category) p.product__categories,
body.single-product :is(.related, .upsells, .cross-sells) ul.products li.product:not(.product-category) p.product__categories {
display: none;
}
/* Product title link — reset letter-spacing to normal (overrides WC typography default).
Merged from so-css: a.woocommerce-LoopProduct-link { letter-spacing: normal } */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products li.product:not(.product-category) a.woocommerce-LoopProduct-link.woocommerce-loop-product__link,
body.single-product :is(.related, .upsells, .cross-sells) ul.products li.product:not(.product-category) a.woocommerce-LoopProduct-link.woocommerce-loop-product__link {
padding-top: 10px;
font-size: var(--font-size);
line-height: 24px;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
}
/* Title: reserve ~2 lines (min-height) so price+CTA align across a row */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products li.product:not(.product-category) .woocommerce-loop-product__title a.woocommerce-LoopProduct-link.woocommerce-loop-product__link,
body.single-product :is(.related, .upsells, .cross-sells) ul.products li.product:not(.product-category) .woocommerce-loop-product__title a.woocommerce-LoopProduct-link.woocommerce-loop-product__link {
color: var(--zo-ink);
line-height: 1.3;
min-height: calc(1.3em * 2);
padding-top: 0;
}
/* Rating row */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products li.product:not(.product-category) .shoptimizer_ratingContainer,
body.single-product :is(.related, .upsells, .cross-sells) ul.products li.product:not(.product-category) .shoptimizer_ratingContainer {
display: flex;
align-items: center;
gap: 6px;
margin: 0;
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products li.product:not(.product-category) .shoptimizer_ratingCount,
body.single-product :is(.related, .upsells, .cross-sells) ul.products li.product:not(.product-category) .shoptimizer_ratingCount {
margin: 0;
color: var(--zo-text-muted);
font-size: var(--font-size-1b);
line-height: 1;
}
/* Price — forest, pushed to the bottom of the card body */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products li.product:not(.product-category) span.price,
body.single-product :is(.related, .upsells, .cross-sells) ul.products li.product:not(.product-category) span.price {
margin-top: auto;
padding-top: 4px;
padding-bottom: 12px;
font-size: var(--font-size-1);
line-height: 1.2;
text-align: left;
color: var(--zo-forest);
font-weight: 700;
}
/* "z VAT" suffix — smaller + muted */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products li.product:not(.product-category) span.price .woocommerce-price-suffix,
body.single-product :is(.related, .upsells, .cross-sells) ul.products li.product:not(.product-category) span.price .woocommerce-price-suffix {
color: var(--zo-text-muted);
font-size: var(--font-size-2b);
font-weight: 500;
letter-spacing: 0.01em;
}
/* Button base: in-flow, full-width, override parent's absolute/opacity:0 */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products li.product:not(.product-category) .button,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products li.product:not(.product-category) .added_to_cart,
body.single-product :is(.related, .upsells, .cross-sells) ul.products li.product:not(.product-category) .button,
body.single-product :is(.related, .upsells, .cross-sells) ul.products li.product:not(.product-category) .added_to_cart {
position: relative;
top: auto; right: auto; bottom: auto; left: auto;
z-index: auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
width: 100%;
height: auto;
margin: 0;
padding: 11px 14px;
border-radius: 0;
box-sizing: border-box;
font-size: var(--font-size-sm);
line-height: 1.2;
font-weight: 700;
text-align: center;
opacity: 1;
}
/* Primary CTA: accessible red, white text ~5.3:1 AA */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products li.product:not(.product-category) a.button.add_to_cart_button,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products li.product:not(.product-category) a.added_to_cart,
body.single-product :is(.related, .upsells, .cross-sells) ul.products li.product:not(.product-category) a.button.add_to_cart_button,
body.single-product :is(.related, .upsells, .cross-sells) ul.products li.product:not(.product-category) a.added_to_cart {
display: inline-flex;
align-items: center;
gap: 8px;
background-color: var(--zo-cta);
border: 1px solid var(--zo-cta);
color: #ffffff;
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products li.product:not(.product-category) a.button.add_to_cart_button:hover,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products li.product:not(.product-category) a.button.add_to_cart_button:focus-visible,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products li.product:not(.product-category) a.added_to_cart:hover,
body.single-product :is(.related, .upsells, .cross-sells) ul.products li.product:not(.product-category) a.button.add_to_cart_button:hover,
body.single-product :is(.related, .upsells, .cross-sells) ul.products li.product:not(.product-category) a.button.add_to_cart_button:focus-visible {
background-color: var(--zo-cta-hover);
border-color: var(--zo-cta-hover);
color: #ffffff;
}
/* Loading/added AJAX states keep the red (theme would grey them out) */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products li.product:not(.product-category) a.button.add_to_cart_button.loading,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products li.product:not(.product-category) a.button.add_to_cart_button.added {
background-color: var(--zo-cta);
border-color: var(--zo-cta);
color: #ffffff;
}
/* Secondary button (Read more / external / OOS) — quiet forest outline */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products li.product:not(.product-category) a.button:not(.add_to_cart_button):not(.added_to_cart),
body.single-product :is(.related, .upsells, .cross-sells) ul.products li.product:not(.product-category) a.button:not(.add_to_cart_button):not(.added_to_cart) {
background-color: #ffffff;
border: 1px solid var(--zo-line);
color: var(--zo-forest);
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products li.product:not(.product-category) a.button:not(.add_to_cart_button):not(.added_to_cart):hover,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products li.product:not(.product-category) a.button:not(.add_to_cart_button):not(.added_to_cart):focus-visible,
body.single-product :is(.related, .upsells, .cross-sells) ul.products li.product:not(.product-category) a.button:not(.add_to_cart_button):not(.added_to_cart):hover {
border-color: var(--zo-forest);
background-color: var(--zo-active);
color: var(--zo-forest-deep);
}
/* Keyboard focus ring for all card CTAs */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products li.product:not(.product-category) a.button:focus-visible,
body.single-product :is(.related, .upsells, .cross-sells) ul.products li.product:not(.product-category) a.button:focus-visible {
outline: 2px solid var(--zo-forest);
outline-offset: 2px;
}
/* Cart icon before add-to-cart label (mask SVG, inherits button text colour) */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products li.product:not(.product-category) a.button.add_to_cart_button::before,
body.single-product :is(.related, .upsells, .cross-sells) ul.products li.product:not(.product-category) a.button.add_to_cart_button::before {
content: "";
display: block;
width: 16px;
height: 16px;
flex: 0 0 16px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
/* OOS badge — restyle parent's full-width bottom bar → small top-left pill.
MUST clear width:100% + bottom:0 from parent or border-radius makes a dark ellipse. */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products li.product:not(.product-category) .product-out-of-stock,
body.single-product :is(.related, .upsells, .cross-sells) ul.products li.product:not(.product-category) .product-out-of-stock {
position: absolute;
top: 10px;
left: 10px;
right: auto;
bottom: auto;
width: auto;
z-index: 2;
padding: 4px 10px;
border-radius: 0;
background-color: var(--zo-ink);
color: #ffffff;
font-size: var(--font-size-2b);
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
line-height: 1.2;
text-align: left;
}
/* Stack OOS pill below "new" badge when both present — both anchor left:10px */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products li.product:not(.product-category) .ckit-badge_wrapper + .product-out-of-stock,
body.single-product :is(.related, .upsells, .cross-sells) ul.products li.product:not(.product-category) .ckit-badge_wrapper + .product-out-of-stock {
top: 38px;
}
/* Shared archive card class — also used in Elementor/home sections */
ul.products li.product.hoptimizer-archive-box:not(.product-category) {
position: relative;
display: flex;
flex-direction: column;
align-self: stretch;
background: #ffffff;
border: 1px solid var(--zo-line);
border-radius: 0;
padding: 0 0 14px;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
overflow: hidden;
}
ul.products li.product.hoptimizer-archive-box:not(.product-category):hover {
transform: translateY(-2px);
border-color: var(--zo-forest);
box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
ul.products li.product.hoptimizer-archive-box:not(.product-category) .woocommerce-LoopProduct-link {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
ul.products li.product.hoptimizer-archive-box:not(.product-category) .woocommerce-card__header {
display: flex;
flex-direction: column;
flex: 1 1 auto;
padding: 0 14px;
gap: 6px;
}
ul.products li.product.hoptimizer-archive-box:not(.product-category) .price {
margin-top: auto;
}
/* ==========================================================================
6. ARCHIVE GRID — CSS Grid replaces float+margin gutter
--------------------------------------------------------------------------
Uses --zo-prod-cols (set by .columns-N class on ul.products). Parent theme
uses its own scheme; we override to a clean CSS Grid with gap so card
borders don't need padding compensation.
========================================================================== */
@media (min-width: 993px) {
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products,
body.single-product :is(.related, .upsells, .cross-sells) ul.products {
display: grid;
grid-template-columns: repeat(var(--zo-prod-cols, 3), minmax(0, 1fr));
gap: var(--space-lg);
width: 100%;
margin-left: 0;
margin-right: 0;
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) .columns-1 ul.products,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products.columns-1,
body.single-product :is(.related, .upsells, .cross-sells) .columns-1 ul.products,
body.single-product :is(.related, .upsells, .cross-sells) ul.products.columns-1 { --zo-prod-cols: 1; }
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) .columns-2 ul.products,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products.columns-2,
body.single-product :is(.related, .upsells, .cross-sells) .columns-2 ul.products,
body.single-product :is(.related, .upsells, .cross-sells) ul.products.columns-2 { --zo-prod-cols: 2; }
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) .columns-3 ul.products,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products.columns-3,
body.single-product :is(.related, .upsells, .cross-sells) .columns-3 ul.products,
body.single-product :is(.related, .upsells, .cross-sells) ul.products.columns-3 { --zo-prod-cols: 3; }
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) .columns-4 ul.products,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products.columns-4,
body.single-product :is(.related, .upsells, .cross-sells) .columns-4 ul.products,
body.single-product :is(.related, .upsells, .cross-sells) ul.products.columns-4 { --zo-prod-cols: 4; }
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) .columns-5 ul.products,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products.columns-5,
body.single-product :is(.related, .upsells, .cross-sells) .columns-5 ul.products,
body.single-product :is(.related, .upsells, .cross-sells) ul.products.columns-5 { --zo-prod-cols: 5; }
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) .columns-6 ul.products,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products.columns-6,
body.single-product :is(.related, .upsells, .cross-sells) .columns-6 ul.products,
body.single-product :is(.related, .upsells, .cross-sells) ul.products.columns-6 { --zo-prod-cols: 6; }
/* Cancel parent theme's float + width + horizontal padding (old gutter scheme) */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products li.product:not(.product-category),
body.single-product :is(.related, .upsells, .cross-sells) ul.products li.product:not(.product-category) {
float: none;
width: 100%;
margin: 0;
}
}
/* Tablet (601–992px): parent already uses CSS Grid — just add row-gap */
@media (min-width: 601px) and (max-width: 992px) {
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) ul.products,
body.single-product :is(.related, .upsells, .cross-sells) ul.products {
row-gap: 20px;
}
}
/* ==========================================================================
7. ARCHIVE SIDEBAR — categories, price filter, tag cloud
--------------------------------------------------------------------------
All widgets are "carded" to match each other (border + radius + bg).
Price slider: jQuery-UI — lime range on light track, forest handles.
Tag cloud: per-tag inline font-size is overridden with !important (WP emits
inline style="" for each tag with a calculated size we don't want).
Current-cat: border-left accent + forest text (from so-css merged here,
now scoped correctly; see DECISION #3 in section 0).
========================================================================== */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .widget_product_categories {
margin-bottom: 1rem;
padding: 0.875rem 1rem;
border: 1px solid var(--zo-line);
border-radius: 0;
background-color: #fff;
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .widget_product_categories > .product-categories {
margin: 0;
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .widget_product_categories .product-categories > li {
margin: 0;
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .widget_product_categories .product-categories > li + li {
margin-top: 0.35rem;
padding-top: 0.35rem;
border-top: 1px solid #f3f4f6;
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .widget_product_categories .product-categories > li > a {
display: block;
padding: 0.5rem 0;
color: #1f2937;
font-weight: 600;
line-height: 1.35;
text-decoration: none;
transition: color 0.15s ease, background-color 0.15s ease;
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .widget_product_categories .children {
margin: 0.2rem 0 0.5rem;
padding-left: 0.65rem;
border-left: 0;
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .widget_product_categories .children li {
margin: 0;
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .widget_product_categories .children a {
display: block;
padding: 0.35rem 0;
color: #4b5563;
font-size: var(--font-size-sm);
text-decoration: none;
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .widget_product_categories li > a:hover,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .widget_product_categories li > a:focus-visible {
color: var(--zo-forest-deep);
background-color: var(--zo-active);
}
/* Active/current category: forest border-left + highlighted bg */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .widget_product_categories .current-cat > a {
padding-left: 0.45rem;
border-left: 3px solid var(--zo-forest);
color: var(--zo-forest-deep);
font-weight: 700;
background-color: var(--zo-active);
}
@media (max-width: 992px) {
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .widget_product_categories {
padding: 0.75rem 0.875rem;
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .widget_product_categories .product-categories > li > a {
padding: 0.45rem 0;
}
}
/* Card the price-filter + tag widgets to match categories widget */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary :is(.widget_price_filter, .widget_product_tag_cloud) {
margin-bottom: 1rem;
padding: 0.875rem 1rem;
border: 1px solid var(--zo-line);
border-radius: 0;
background-color: #fff;
}
/* jQuery-UI price slider: lime range on light track, forest handles */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .widget_price_filter .price_slider_wrapper .ui-widget-content {
background-color: var(--zo-line);
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .widget_price_filter .ui-slider {
height: 0.4em;
border-radius: 0;
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .widget_price_filter .ui-slider .ui-slider-range {
background-color: var(--zo-lime);
border-radius: 0;
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .widget_price_filter .ui-slider .ui-slider-handle {
width: 1em;
height: 1em;
top: -0.32em;
border-radius: 50%;
background-color: var(--zo-forest);
border: 2px solid #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .widget_price_filter .ui-slider .ui-slider-handle:focus-visible {
outline: 2px solid var(--zo-forest);
outline-offset: 2px;
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .widget_price_filter .price_label {
color: var(--zo-text);
}
/* "Filtruj" submit button — forest (theme default is near-black) */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .widget_price_filter .price_slider_amount .button {
background-color: var(--zo-forest);
border: 1px solid var(--zo-forest);
color: #fff;
border-radius: 0;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .widget_price_filter .price_slider_amount .button:hover,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .widget_price_filter .price_slider_amount .button:focus-visible {
background-color: var(--zo-forest-deep);
border-color: var(--zo-forest-deep);
color: #fff;
outline: none;
}
/* Tag cloud → brand-tint pills. WP prints per-tag inline font-size; !important normalises. */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .widget_product_tag_cloud .tagcloud {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .widget_product_tag_cloud a.tag-cloud-link {
display: inline-block;
padding: 5px 12px;
border-radius: 0;
background-color: var(--zo-active);
color: var(--zo-forest-deep);
font-size: var(--font-size-1b) !important;
line-height: 1.2;
text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease;
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .widget_product_tag_cloud a.tag-cloud-link:hover,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .widget_product_tag_cloud a.tag-cloud-link:focus-visible {
background-color: var(--zo-forest);
color: #fff;
outline: none;
}
/* ==========================================================================
7b. ARCHIVE SIDEBAR — FacetWP facets
--------------------------------------------------------------------------
Styles the FacetWP filter widget rendered inside #secondary on product
archive / category / tag pages. All rules are scoped tightly so they
never bleed onto non-archive pages.
FacetWP checkbox items: .facetwp-checkbox (type checkboxes)
FacetWP radio items: .facetwp-radio (type radio)
FacetWP slider: .facetwp-type-slider / .noUi-*
Slider reset: input.facetwp-slider-reset (rendered by FacetWP as input[type=button])
Custom reset button: .zo-fwp-reset (wired via JS → FWP.reset())
FacetWP ships front.css with:
- .facetwp-checkbox { background: url(checkbox.png); padding-left: 20px; margin-bottom: 4px; }
- .facetwp-facet { margin-bottom: 40px; }
We override all of these with !important where specificity is otherwise equal.
Shoptimizer applies its button palette to input[type=button] globally →
.facetwp-slider-reset gets the forest-green button look by default.
We flatten it back to a plain text link here.
Colour tokens: --zo-forest, --zo-forest-deep, --zo-lime, --zo-ink,
--zo-text, --zo-text-muted, --zo-line, --zo-active.
========================================================================== */
/* --- Sidebar block widget card wrapper --- */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .widget_block {
margin-bottom: 1rem;
padding: 1rem 1rem 0.75rem;
border: 1px solid var(--zo-line);
border-radius: 0;
background-color: #fff;
}
/* --- Section title ("FILTRY PRODUKTÓW") --- */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .zo-fwp-sidebar-title {
margin: 0 0 1rem;
font-size: var(--font-size-2b);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--zo-text-muted);
line-height: 1.3;
}
/* --- Per-filter group --- */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .zo-fwp-group {
padding-top: var(--space-sm);
margin-bottom: 0;
border-top: 1px solid var(--zo-line);
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .zo-fwp-group:first-of-type {
border-top: none;
padding-top: 0;
}
/* --- Group label (e.g. "Rodzaj szkodnika") --- */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .zo-fwp-label {
margin: 0 0 var(--space-xs);
font-size: var(--font-size-sm);
font-weight: 700;
color: var(--zo-ink);
line-height: 1.35;
}
/* --- FacetWP facet root — override plugin's 40px default --- */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .facetwp-facet {
margin: 0 !important;
padding-bottom: var(--space-sm);
}
/* --- Checkbox & radio items ---
Override FacetWP front.css:
background: url(checkbox.png) → none
padding-left: 20px → 0
margin-bottom: 4px → 0
Then apply flex layout with custom ::before box. */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .facetwp-checkbox,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .facetwp-radio {
display: flex !important;
align-items: center;
gap: 0.5rem;
padding: 3px 0 !important;
margin-bottom: 0 !important;
background-image: none !important;
background-color: transparent !important;
cursor: pointer;
line-height: 1.35;
color: var(--zo-text);
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .facetwp-checkbox:hover,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .facetwp-radio:hover {
color: var(--zo-forest);
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .facetwp-checkbox:hover::before,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .facetwp-radio:hover::before {
border-color: var(--zo-forest);
}
/* Custom checkbox box */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .facetwp-checkbox::before {
content: '';
flex: 0 0 15px;
width: 15px;
height: 15px;
border: 1.5px solid #c5cfc5;
border-radius: 0;
background-color: #fff;
background-image: none;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
/* Custom radio circle */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .facetwp-radio::before {
content: '';
flex: 0 0 15px;
width: 15px;
height: 15px;
border: 1.5px solid #c5cfc5;
border-radius: 50%;
background-color: #fff;
background-image: none;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
/* Checked state */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .facetwp-checkbox.checked::before {
background-color: var(--zo-forest);
border-color: var(--zo-forest);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat;
background-position: center;
background-size: 10px 10px;
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .facetwp-radio.checked::before {
border-color: var(--zo-forest);
background-color: var(--zo-forest);
background-image: none !important;
box-shadow: inset 0 0 0 3px #fff;
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .facetwp-checkbox.checked,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .facetwp-radio.checked {
color: var(--zo-forest-deep) !important;
font-weight: 600;
}
/* Disabled / ghost items */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .facetwp-checkbox.disabled,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .facetwp-radio.disabled {
opacity: 0.38;
pointer-events: none;
}
/* --- Item label text --- */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .facetwp-display-value {
flex: 1;
font-size: var(--font-size-sm);
color: inherit;
line-height: 1.35;
padding-right: 0;
}
/* --- Count badge — override any colour from parent theme links --- */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .facetwp-counter {
margin-left: auto;
padding-left: 4px;
font-size: var(--font-size-2b);
color: var(--zo-text-muted) !important;
white-space: nowrap;
}
/* --- "Pokaż więcej / mniej" soft-limit toggle --- */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .facetwp-toggle {
display: block;
margin-top: 6px;
font-size: var(--font-size-sm);
color: var(--zo-forest) !important;
text-decoration: underline;
text-underline-offset: 0.15em;
cursor: pointer;
}
/* Restore FacetWP hidden state — our specificity above would override display:none otherwise */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .facetwp-toggle.facetwp-hidden {
display: none !important;
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .facetwp-toggle:hover {
color: var(--zo-forest-deep) !important;
}
/* --- FacetWP loading (is-loading) state --- */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .facetwp-facet.is-loading {
opacity: 0.5;
transition: opacity 0.2s ease;
}
/* -------------------------------------------------------------------------
Price slider (noUiSlider)
FacetWP renders:
------------------------------------------------------------------------- */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .facetwp-type-slider .facetwp-facet {
padding-bottom: 0;
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .facetwp-slider-wrap {
padding: 8px 4px 4px;
}
/* Track */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .noUi-target {
height: 4px;
border-radius: 0;
background: var(--zo-line);
border: none;
box-shadow: none;
}
/* Active range */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .noUi-connect {
background: var(--zo-lime);
border-radius: 0;
}
/* Handles */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .noUi-handle {
width: 18px !important;
height: 18px !important;
top: -7px !important;
right: -9px !important;
border-radius: 50%;
background: var(--zo-forest) !important;
border: 2.5px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.22) !important;
cursor: grab;
transition: transform 0.1s ease;
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .noUi-handle::before,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .noUi-handle::after {
display: none;
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .noUi-handle:hover {
transform: scale(1.12);
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .noUi-active {
cursor: grabbing;
}
/* Price range label ("0 zł — 200 zł") */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .facetwp-slider-label {
display: block;
margin-top: 10px;
font-size: var(--font-size-sm);
color: var(--zo-text-muted);
line-height: 1.4;
}
/* Slider reset link — override Shoptimizer's input[type=button] → green button default.
FacetWP renders this as .
Shoptimizer's global button CSS makes it look like the primary CTA.
We reset it to a plain underlined text link. */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary input.facetwp-slider-reset {
display: inline !important;
width: auto !important;
min-width: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 6px 0 0 !important;
border: none !important;
border-radius: 0;
background: none !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
color: var(--zo-text-muted) !important;
font-size: var(--font-size-sm) !important;
font-weight: 400 !important;
text-decoration: underline;
text-underline-offset: 0.15em;
text-transform: none !important;
letter-spacing: 0 !important;
cursor: pointer;
transition: color 0.15s ease;
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary input.facetwp-slider-reset:hover {
color: var(--zo-forest) !important;
background: none !important;
}
/* -------------------------------------------------------------------------
Reset all filters button (custom .zo-fwp-reset)
Pill outline, neutral by default, forest on hover.
------------------------------------------------------------------------- */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .zo-fwp-reset-wrap {
padding-top: var(--space-sm);
padding-bottom: 0.25rem;
border-top: 1px solid var(--zo-line);
margin-top: var(--space-sm);
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .zo-fwp-reset {
display: block;
width: 100%;
padding: 0.5rem 1rem;
min-height: 40px;
border: 1px solid var(--zo-line);
border-radius: 0;
background-color: transparent;
color: var(--zo-text-muted);
font-size: var(--font-size-sm);
font-weight: 600;
line-height: 1.2;
text-align: center;
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .zo-fwp-reset:hover,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .zo-fwp-reset:focus-visible {
border-color: var(--zo-forest);
color: var(--zo-forest);
background-color: var(--zo-active);
outline: none;
}
/* --- Mobile: larger tap targets --- */
@media (max-width: 992px) {
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .zo-fwp-reset {
min-height: 44px;
padding: 0.65rem 1rem;
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .facetwp-checkbox,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) #secondary .facetwp-radio {
padding: 5px 0 !important;
}
}
/* ==========================================================================
8. ARCHIVE TOOLBAR — result count, orderby, pagination
--------------------------------------------------------------------------
Orderby select: pill shape with forest border on focus.
background-position merged from so-css (was global unscoped there; now
scoped to archive pages only).
Pagination: real buttons — active = forest fill, inactive = outline.
========================================================================== */
/* Sort control as a bordered pill */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) .woocommerce-ordering select.orderby,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) .woocommerce-ordering select {
padding: 0.5rem 2.25rem 0.5rem 0.85rem;
border: 1px solid var(--zo-line);
border-radius: 0;
background-color: #fff;
background-position: calc(100% - 10px) 50%; /* merged from so-css */
color: var(--zo-ink);
line-height: 1.2;
cursor: pointer;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) .woocommerce-ordering select.orderby:hover {
border-color: var(--zo-forest);
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) .woocommerce-ordering select.orderby:focus-visible {
outline: none;
border-color: var(--zo-forest);
box-shadow: 0 0 0 3px rgba(0,87,52,0.18);
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) .woocommerce-result-count {
color: var(--zo-text-muted);
margin-bottom: 0;
}
/* Pagination as real buttons */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) .woocommerce-pagination ul {
display: flex;
flex-wrap: nowrap;
gap: 4px;
justify-content: center;
border: 0;
margin: 1.5rem 0 0;
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) .woocommerce-pagination ul li {
border: 0;
margin: 0;
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) .woocommerce-pagination ul li span.page-numbers,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) .woocommerce-pagination ul li a.page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
border: 1px solid var(--zo-line);
border-radius: 0;
background-color: #fff;
color: var(--zo-ink);
font-weight: 600;
line-height: 1;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) .woocommerce-pagination ul li a.page-numbers:hover,
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) .woocommerce-pagination ul li a.page-numbers:focus-visible {
border-color: var(--zo-forest);
color: var(--zo-forest-deep);
background-color: var(--zo-active);
outline: none;
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) .woocommerce-pagination ul li span.page-numbers.current {
background-color: var(--zo-forest);
border-color: var(--zo-forest);
color: #fff;
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .error404) .woocommerce-pagination ul li span.page-numbers.dots {
border-color: transparent;
background-color: transparent;
}
/* ==========================================================================
9. PDP — Product Detail Page (single-product)
--------------------------------------------------------------------------
Scope: body.single-product. Works with:
– .zo-buy-card wrapper injected by zo_pdp_buy_card_open/close in functions.php
– .zo-unit-price, .zo-usp-bullets from inc/product-fields.php (ACF)
– CommerceKit sticky ATC intersector (.commercekit-sticky-atc-intersector)
– CommerceKit tabs (.commercekit-atc-tab-links, panels .commercekit-Tabs-panel--*)
Palette: canonical tokens (legacy --zo-pdp-* aliases migrated out in v1.7.0).
MERGED FROM so-css:
– p.stock global colour (was unscoped, now also covers archive in-stock text)
– ul.vaco-list responsive rules (merged with bullets block)
– .body.single-product .zo-buy-card p.price bug FIXED (.body→body)
========================================================================== */
/* Global stock text — applies to archive cards AND PDP; tokenised.
PDP overrides below add the dot indicator and layout details. */
.product p.stock {
color: var(--zo-green-stock);
font-size: var(--font-size-sm);
font-style: normal;
font-weight: 600;
}
/* CommerceKit inventory title override (high-stock state) */
.title.high-stock {
color: #000000;
}
/* --- Buy card shell -------------------------------------------------------- */
body.single-product .zo-buy-card {
margin-top: 18px;
padding: var(--space-lg);
background: #fff;
border: 1px solid var(--zo-line);
border-radius: 0;
box-shadow: 0 1px 2px rgba(22,32,27,0.04), 0 8px 24px rgba(22,32,27,0.06);
}
@media (max-width: 480px) {
body.single-product .zo-buy-card {
padding: 18px 16px;
border-radius: 0;
}
}
body.single-product .zo-buy-card > :first-child { margin-top: 0; }
body.single-product .zo-buy-card > :last-child { margin-bottom: 0; }
/* --- Price ----------------------------------------------------------------
float:none undoes Shoptimizer's float so the -% sale badge (inline-block
in the parent) can sit on the SAME LINE as the price figure.
display:inline-block + width:auto shrinks to content width for that. */
body.single-product .zo-buy-card p.price,
.product-details-wrapper div.summary.entry-summary p.price {
float: none;
display: inline-block;
width: auto;
vertical-align: middle;
margin: 0 0 10px;
color: var(--zo-forest);
font-size: var(--font-size-2);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.01em;
}
/* Sale % badge ("-7%") beside the price, vertically centred */
body.single-product .zo-buy-card .sale-item.product-label.type-bubble {
display: inline-block;
vertical-align: middle;
position: relative;
top: -2px;
margin-left: 10px;
font-weight: 700;
}
body.single-product .zo-buy-card p.price del {
margin-right: 8px;
color: var(--zo-text-muted);
font-weight: 600;
font-size: var(--font-size-1);
}
body.single-product .zo-buy-card p.price ins {
text-decoration: none;
}
body.single-product .zo-buy-card p.price .woocommerce-price-suffix {
display: inline-block;
margin-left: 6px;
color: var(--zo-text-muted);
font-size: var(--font-size-1b);
font-weight: 500;
}
/* --- Unit price (ACF zo_render_unit_price, prio 11) ----------------------- */
body.single-product .zo-unit-price {
clear: both; /* drop below the formerly-floated price */
margin: 0 0 14px;
font-size: var(--font-size-1b);
color: var(--zo-text-muted);
}
body.single-product .zo-unit-price__value {
font-weight: 600;
color: var(--zo-text);
}
/* --- Benefit bullets -------------------------------------------------------
Covers BOTH the WC short-description AND ACF .zo-usp-bullets, so both
render identically. Lime circular check (--zo-pdp-lime → --zo-lime #8cc63f).
Also covers ul.vaco-list class (from so-css, merged here — same visual).
Responsive ul.vaco-list adjustments also merged from so-css mobile block. */
body.single-product .woocommerce-product-details__short-description {
margin: 0 0 12px;
color: var(--zo-text);
font-size: var(--font-size-sm);
line-height: 1.55;
}
body.single-product .woocommerce-product-details__short-description ul,
body.single-product .woocommerce-product-details__short-description ul.vaco-list,
body.single-product .zo-usp-bullets {
list-style: none !important;
margin: 14px 0 0;
padding: 0 !important;
}
body.single-product .woocommerce-product-details__short-description ul li,
body.single-product .woocommerce-product-details__short-description ul.vaco-list li,
body.single-product .zo-usp-bullets__item {
position: relative;
margin: 0 0 8px;
padding: 4px 0 4px 32px;
background: none;
border-radius: 0;
font-size: var(--font-size-sm);
line-height: 1.5;
color: var(--zo-text);
}
/* Lime check circle — data-URI SVG check on a --zo-lime circle */
body.single-product .woocommerce-product-details__short-description ul li::before,
body.single-product .woocommerce-product-details__short-description ul.vaco-list li::before,
body.single-product .zo-usp-bullets__item::before {
content: "";
position: absolute;
left: 0;
top: 5px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--zo-lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
body.single-product .woocommerce-product-details__short-description ul li strong,
body.single-product .woocommerce-product-details__short-description ul.vaco-list li strong,
body.single-product .zo-usp-bullets__item strong {
color: var(--zo-ink);
}
/* Mobile adjustments for vaco-list (from so-css) */
@media (max-width: 768px) {
body.single-product .woocommerce-product-details__short-description ul.vaco-list li {
padding-left: 28px !important;
font-size: var(--font-size-sm) !important;
margin-bottom: 14px !important;
}
body.single-product .woocommerce-product-details__short-description ul.vaco-list li::before {
top: 5px;
}
}
/* --- Rating --------------------------------------------------------------- */
body.single-product .zo-buy-card .woocommerce-product-rating {
margin: 0 0 14px;
}
/* --- Stock status ----------------------------------------------------------
PDP overrides the global .product p.stock: adds dot indicator + layout.
Shoptimizer's :before is a checkmark mask — reset mask so our dot shows. */
body.single-product p.stock {
display: inline-flex;
align-items: center;
gap: 7px;
margin: 4px 0 12px;
padding: 0;
border: 0;
font-size: var(--font-size-sm);
font-weight: 600;
}
body.single-product p.stock.in-stock {
color: var(--zo-forest);
}
body.single-product p.stock.in-stock::before {
content: "";
top: 0;
width: 10px;
height: 10px;
margin: 0;
border-radius: 50%;
background: var(--zo-forest);
-webkit-mask: none; /* Shoptimizer masks :before into a checkmark shape */
mask: none; /* — reset so our solid dot isn't clipped to it */
}
body.single-product p.stock.out-of-stock {
color: #b3261e;
}
/* --- Quantity + add-to-cart row -------------------------------------------
Real qty+button are inside .commercekit-sticky-atc-intersector, NOT direct
children of form.cart — flex row must target the intersector.
Stepper nav (.quantity-nav) is positioned RIGHT of the input OUTSIDE its
in-flow width (theme: right:-34px). Reserve margin so button clears it;
the theme does the same with margin-left:40px which our margin:0 would remove. */
body.single-product .commercekit-sticky-atc-intersector {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
gap: 0;
margin: 0 0 14px;
}
body.single-product .commercekit-sticky-atc-intersector div.quantity {
flex: 0 0 auto;
position: relative;
margin: 0 52px 0 0 !important; /* reserves room for stepper overhang (~38px) + gap */
}
body.single-product form.cart input.qty {
width: 72px;
min-height: 54px;
border: 1px solid var(--zo-line);
border-radius: 0 !important;
background: #fff;
color: var(--zo-ink);
font-weight: 600;
text-align: center;
}
body.single-product .quantity-nav {
border-radius: 0;
}
body.single-product .single_add_to_cart_button {
min-height: 54px;
border-radius: 0;
background-color: var(--zo-cta) !important; /* !important: beats Kirki inline #ea580c */
color: #fff !important;
font-size: var(--font-size);
font-weight: 700;
letter-spacing: 0.01em;
text-transform: none;
transition: background-color 0.15s ease, transform 0.15s ease;
}
body.single-product .commercekit-sticky-atc-intersector .single_add_to_cart_button {
flex: 1 1 auto;
min-width: 0;
margin: 0 !important;
padding-left: 36px;
padding-right: 36px;
}
body.single-product .single_add_to_cart_button:hover {
background-color: var(--zo-cta-hover) !important;
transform: translateY(-1px);
}
/* --- CommerceKit wishlist ------------------------------------------------- */
body.single-product .commercekit-wishlist.mini {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
margin: 0 0 14px;
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--zo-text);
}
body.single-product .commercekit-wishlist.mini a {
color: inherit;
}
body.single-product .commercekit-wishlist.mini:hover {
color: var(--zo-forest);
}
/* --- CommerceKit inventory/urgency bar ------------------------------------ */
body.single-product .commercekit-inventory {
margin: 4px 0 16px;
}
body.single-product .commercekit-inventory .title {
font-size: var(--font-size-1b);
font-weight: 600;
color: var(--zo-text);
}
body.single-product .commercekit-inventory .progress-bar {
background: var(--zo-line);
border-radius: 0;
overflow: hidden;
}
/* Apple fill for inventory bar (low-stock urgency colours left to CommerceKit) */
body.single-product .commercekit-inventory .progress-bar > span,
body.single-product .commercekit-inventory .progress-bar.high-stock-bar > span {
background: var(--zo-lime);
}
/* --- Product meta (SKU / cat / tags) --------------------------------------
Shoptimizer relocates .product_meta OUT of summary into .related-wrapper
(above related products). No card-style border here — keep it quiet. */
body.single-product .product_meta {
font-size: var(--font-size-1b);
font-weight: 500;
color: var(--zo-text-muted);
}
body.single-product .product_meta > span {
padding: 2px 0;
}
body.single-product .product_meta a {
color: var(--zo-forest);
text-decoration: underline;
}
body.single-product .product_meta a:hover {
text-decoration: underline;
}
/* --- Trust / payment / guarantee widget group ----------------------------- */
body.single-product .product-widget {
margin-top: 16px;
}
body.single-product .product-widget .widget_block {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--zo-line);
}
body.single-product .product-widget .widget_block h5 {
margin: 0 0 4px;
font-size: var(--font-size-sm);
color: var(--zo-forest);
}
/* --- Gallery -------------------------------------------------------------- */
body.single-product #commercegurus-pdp-gallery-wrapper {
--swiper-navigation-color: var(--zo-forest);
}
body.single-product #commercegurus-pdp-gallery-wrapper .swiper-button-next,
body.single-product #commercegurus-pdp-gallery-wrapper .swiper-button-prev {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255,255,255,0.92);
box-shadow: 0 2px 8px rgba(22,32,27,0.14);
color: var(--zo-forest);
}
body.single-product #commercegurus-pdp-gallery-wrapper .swiper-button-next::after,
body.single-product #commercegurus-pdp-gallery-wrapper .swiper-button-prev::after {
font-size: var(--font-size);
font-weight: 700;
}
body.single-product .cg-layout-horizontal .swiper-slide-thumb-active {
outline: 2px solid var(--zo-forest);
outline-offset: 1px;
border-radius: 0;
}
/* "Nowość!" badge: left at CommerceKit's default (#065631 + white) to match archive thumbnails */
/* --- Tabs (CommerceKit sticky nav + panels) --------------------------------
Do NOT add border-bottom to tab links — CommerceKit's li a:after is the
single active underline (recoloured by Shoptimizer's Customizer). Adding
another border-bottom creates a double line. */
.commercekit-atc-sticky-tabs ul.commercekit-atc-tab-links {
gap: 15px;
}
body.single-product .commercekit-atc-tab-links {
border-bottom: 1px solid var(--zo-line);
}
body.single-product .commercekit-atc-tab-links li a {
padding: 14px 4px;
color: var(--zo-text-muted);
font-weight: 600;
transition: color 0.15s ease;
}
body.single-product .commercekit-atc-tab-links li a:hover {
color: var(--zo-forest);
}
body.single-product .commercekit-atc-tab-links li.active a,
body.single-product .commercekit-atc-tab-links li a.active {
color: var(--zo-forest);
}
body.single-product .woocommerce-Tabs-panel {
max-width: 760px;
color: var(--zo-text);
line-height: 1.7;
}
body.single-product .woocommerce-Tabs-panel h2,
body.single-product .woocommerce-Tabs-panel h3 {
color: var(--zo-forest);
}
body.single-product .woocommerce-Tabs-panel h4 {
color: var(--zo-ink);
}
/* --- Long description — clean editorial typography -----------------------
Scoped to #cgkit-tab-description so reviews/additional-info keep their
forest styling. !important beats the generic .woocommerce-Tabs-panel rules
(0,1,1 specificity) — ID gives us 0,1,0 base + the important wins.
Dom structure varies: richer products wrap content in
with h1/h2/p/ul/ol (not just h3 + p). */
body.single-product #cgkit-tab-description section.section {
margin-bottom: 2.5rem !important;
}
body.single-product #cgkit-tab-description section.section:last-child {
margin-bottom: 0 !important;
}
/* Near-black headings, no forest tint */
body.single-product #cgkit-tab-description h1,
body.single-product #cgkit-tab-description h2,
body.single-product #cgkit-tab-description h3 {
color: #111 !important;
font-weight: 700 !important;
text-transform: none !important;
letter-spacing: normal !important;
line-height: 1.3 !important;
}
body.single-product #cgkit-tab-description h1 { font-size: var(--font-size-2) !important; margin: 0 0 1.25rem !important; }
body.single-product #cgkit-tab-description h2 { font-size: var(--font-size-1) !important; margin: 2rem 0 1rem !important; }
body.single-product #cgkit-tab-description h3 { font-size: var(--font-size-lg) !important; margin: 1.75rem 0 0.75rem !important; }
body.single-product #cgkit-tab-description section.section:first-child h1,
body.single-product #cgkit-tab-description section.section:first-child h2,
body.single-product #cgkit-tab-description section.section:first-child h3 {
margin-top: 0 !important;
}
body.single-product #cgkit-tab-description p {
margin: 0 0 1.5rem !important;
line-height: 1.8 !important;
color: #1a211d !important;
}
body.single-product #cgkit-tab-description p:last-child { margin-bottom: 0 !important; }
body.single-product #cgkit-tab-description section.section:first-child p:first-of-type b,
body.single-product #cgkit-tab-description section.section:first-child p:first-of-type strong { font-weight: 400 !important; }
body.single-product #cgkit-tab-description strong,
body.single-product #cgkit-tab-description b {
color: #111 !important;
font-weight: 700 !important;
}
/* Native list markers, comfortable rhythm */
body.single-product #cgkit-tab-description ul,
body.single-product #cgkit-tab-description ol {
margin: 0 0 1.5rem 1.25rem !important;
padding-left: 0.5rem !important;
line-height: 1.8 !important;
}
body.single-product #cgkit-tab-description ul { list-style: disc !important; }
body.single-product #cgkit-tab-description ol { list-style: decimal !important; }
body.single-product #cgkit-tab-description li {
margin: 0 0 0.5rem !important;
padding-left: 0.25rem;
}
/* Spec / attribute tables */
body.single-product .woocommerce-Tabs-panel table,
body.single-product .shop_attributes {
width: 100%;
border-collapse: collapse;
margin: 8px 0 20px;
}
body.single-product .woocommerce-Tabs-panel table th,
body.single-product .woocommerce-Tabs-panel table td,
body.single-product .shop_attributes th,
body.single-product .shop_attributes td {
padding: 10px 14px;
border: 1px solid var(--zo-line);
text-align: left;
font-size: var(--font-size-sm);
}
body.single-product .shop_attributes th {
width: 38%;
background: var(--zo-img-bg);
color: var(--zo-ink);
font-weight: 600;
}
/* ==========================================================================
10. MINI-CART / SLIDE-OUT
--------------------------------------------------------------------------
De-duplicated: so-css had an identical copy of these two rules.
One canonical version kept here.
========================================================================== */
/* Centre text and icons vertically in mini-cart buttons */
.woocommerce-mini-cart__buttons.buttons a.button.wc-forward {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 50px !important;
line-height: normal !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.woocommerce-mini-cart__buttons.buttons a.button.wc-forward::before {
margin-right: 8px;
display: inline-flex;
align-items: center;
}
.cart-drawer-heading {
/* !important: parent Shoptimizer mini-cart drawer CSS loads after child style.css. */
font-size: var(--font-size-lg) !important;
}
.woocommerce-mini-cart__empty-message {
/* !important: parent Shoptimizer mini-cart drawer CSS loads after child style.css. */
font-size: var(--font-size) !important;
}
/* ==========================================================================
11. HEADER — topbar, logo, search, AJAX results, cart, nav, mega menu
--------------------------------------------------------------------------
Layout: header-5 (shoptimizer_header_layout=header-5), Shoptimizer built-in
nav (NOT Max Mega Menu), Elementor does NOT override the header.
CRITICAL: child style.css loads BEFORE parent main.min.css.
Every rule that competes with the parent needs higher specificity.
Technique used: ID anchor (#menu-primary-menu, #masthead), body-class prefix,
or explicit !important with a comment.
This section overrides only one token for header elements: --zo-line is
deliberately lighter here (#e2e2e2) for the search-form border than the
global card border (#e6ece6). All other colours inherit the canonical :root.
Customizer controls (Appearance → Customize):
shoptimizer_layout_top_bar_background = #1f5132
shoptimizer_layout_top_bar_text = #e8eee6
shoptimizer_top_bar_font_size = 13px
What the parent theme ALREADY does (do NOT duplicate):
– top-level underline animates on hover (span:before scale reveal)
– dropdown chevron rotates 180° on hover (a:after)
– sticky header enabled by default (body gets sticky-d; IntersectionObserver
adds .is_stuck; theme has its own scroll shadow)
========================================================================== */
/* Header keeps a lighter search-border line than the global card border;
every other header colour inherits the canonical :root tokens. */
#masthead,
.col-full-nav,
.col-full.topbar-wrapper {
--zo-line: #e2e2e2; /* intentional override — lighter than global --zo-line (#e6ece6) */
}
/* Primary nav underline + spacing */
.shoptimizer-primary-navigation.col-full {
border-bottom-color: #b5b3b3;
border-bottom-width: 2px;
border-radius: 0;
}
.col-full-nav {
border-bottom: 1px solid #f0e7e7;
}
/* Logo: maintain sane dimensions at all widths */
.site-header .custom-logo {
height: auto;
max-height: 44px;
width: auto;
}
/* Topbar base styles (mobile + non-restyle pages) */
.col-full.topbar-wrapper {
border-bottom: 0;
max-width: 100%;
}
/* Topbar inner bar width + padding */
.col-full.topbar-wrapper .top-bar {
max-width: 1280px;
margin: 0 auto;
padding: 10px 32px;
letter-spacing: 0.005em;
line-height: 1.4;
}
.col-full.topbar-wrapper .top-bar .col-full {
gap: var(--space-lg);
}
.col-full.topbar-wrapper .top-bar a {
color: inherit;
opacity: 0.92;
transition: opacity 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.col-full.topbar-wrapper .top-bar a:hover {
opacity: 1;
color: #ffffff;
}
.col-full.topbar-wrapper .top-bar svg {
width: 14px;
height: 14px;
margin-right: 8px;
color: inherit;
fill: currentColor;
flex: 0 0 14px;
}
/* Topbar bottom border for hide-on-mobile variant (from so-css) */
.col-full.topbar-wrapper.hide-on-mobile {
border-bottom: 1px solid #dadade;
}
/* Left region — phone */
.col-full.topbar-wrapper .top-bar-left {
align-items: center;
}
.col-full.topbar-wrapper .top-bar-left a,
.col-full.topbar-wrapper .top-bar-left {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
}
.col-full.topbar-wrapper .top-bar-left > .widget,
.col-full.topbar-wrapper .top-bar-left .widget_block,
.col-full.topbar-wrapper .top-bar-left .wp-block-group {
display: inline-flex;
align-items: center;
}
/* Center region — free-shipping pill */
.col-full.topbar-wrapper .top-bar-center {
align-items: center;
}
.col-full.topbar-wrapper .top-bar-center .widget,
.col-full.topbar-wrapper .top-bar-center .textwidget,
.col-full.topbar-wrapper .top-bar-center .custom-html-widget {
display: inline-flex;
}
.col-full.topbar-wrapper .top-bar-center p {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
margin: 0;
padding: 4px 12px;
border-radius: 0;
background: rgba(255,255,255,0.06);
color: inherit;
font-size: inherit;
line-height: 1.2;
}
.col-full.topbar-wrapper .top-bar-center p::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #9ed4a3;
flex: 0 0 6px;
}
.col-full.topbar-wrapper .top-bar-center p b {
font-weight: 700;
color: #ffffff;
}
/* Right region — B2B link */
.col-full.topbar-wrapper .top-bar-right {
align-items: center;
}
.col-full.topbar-wrapper .top-bar-right a {
display: inline-flex;
align-items: center;
gap: 6px;
}
.col-full.topbar-wrapper .top-bar-right a::after {
content: "→";
font-size: var(--font-size-sm);
line-height: 1;
transition: transform 0.15s ease;
}
.col-full.topbar-wrapper .top-bar-right a:hover::after {
transform: translateX(2px);
}
@media (max-width: 992px) {
.col-full.topbar-wrapper .top-bar {
padding: 8px 16px;
}
}
/* Secondary menu — bold items + spacing/divider cleanup (merged from so-css) */
#menu-secondary-menu #menu-item-7895 > a,
#menu-secondary-menu #menu-item-7002 > a {
font-weight: 700;
}
#menu-secondary-menu li#menu-item-7895 {
padding-left: 0;
padding-right: 0;
margin-right: -2px;
}
#menu-secondary-menu li#menu-item-7002 {
border-left: none;
padding-left: 0;
padding-right: 0;
margin-left: -2px;
}
/* Mega menu: sub-group bottom margin (class-based; replaces brittle nth-child) */
#menu-primary-menu li.full-width .sub-menu-wrapper li.menu-item-has-children > .sub-menu-wrapper {
margin-bottom: 15px;
}
/* Mega product-cards must not show archive card borders.
!important needed: parent uses high-specificity selectors that cannot be
outweighed without it. */
#site-navigation .sub-menu-wrapper li.menu-item-product,
#site-navigation .sub-menu-wrapper li.menu-item-product > .woocommerce,
#site-navigation .sub-menu-wrapper li.menu-item-product :is(ul.products, ul.product),
#site-navigation .sub-menu-wrapper li.menu-item-product li.product.type-product,
#site-navigation .sub-menu-wrapper li.menu-item-product li.product.type-product:hover,
#site-navigation .sub-menu-wrapper :is(ul.products, ul.product) li.product.type-product,
#site-navigation .sub-menu-wrapper :is(ul.products, ul.product) li.product.type-product:hover {
border: 0 !important;
border-width: 0 !important;
border-radius: 0;
outline: 0 !important;
box-shadow: none !important;
}
/* Header search — 360px cap for non-restyle contexts (tablet/mobile) */
.site-header form.woocommerce-product-search,
.site-header .header-search {
max-width: 360px;
}
/* ---- Desktop restyle (≥993px) -------------------------------------------- */
@media (min-width: 993px) {
/* Logo fixed height on desktop */
.site-header .custom-logo {
height: 42px;
max-height: none;
}
/* Topbar: dark forest gradient matching the footer palette */
.col-full.topbar-wrapper {
background-image: linear-gradient(180deg, #00482b, #003b23);
border-bottom: 0;
}
.col-full.topbar-wrapper .top-bar {
color: rgba(255,255,255,0.88);
/* !important: Kirki injects font-size:16px on .top-bar (spec 0,1,1) AFTER us */
font-size: var(--font-size-1b);
padding-top: 0;
padding-bottom: 0;
}
/* Zero out the Kirki-injected 4px top/bottom padding on textwidget wrappers */
.col-full.topbar-wrapper .top-bar .textwidget,
.col-full.topbar-wrapper .top-bar .widget {
padding-top: 0;
padding-bottom: 0;
}
/* 3-zone topbar: min-height:42px drives the rendered height */
.col-full.topbar-wrapper .top-bar .col-full {
align-items: center;
min-height: 42px;
}
.col-full.topbar-wrapper .top-bar-left { justify-self: start; }
.col-full.topbar-wrapper .top-bar-center { justify-self: center; }
.col-full.topbar-wrapper .top-bar-right { justify-self: end; }
/* Promo: lime status dot + soft glow ring */
.col-full.topbar-wrapper .top-bar-center p {
background: transparent;
padding: 0;
color: #fff;
white-space: nowrap;
}
.col-full.topbar-wrapper .top-bar-center p::before {
width: 7px;
height: 7px;
background: var(--zo-lime);
box-shadow: 0 0 0 3px rgba(140,198,63,0.28);
}
/* B2B link: arrow nudges further right on hover */
.col-full.topbar-wrapper .top-bar-right a:hover { color: #fff; }
.col-full.topbar-wrapper .top-bar-right a:hover::after { transform: translateX(4px); }
/* ---- Search (visible header-5 instance in .site-header) ----
Overrides the 360px cap above and the parent's clipped SR-only submit button.
Scoped selector specificity beats parent rules loaded after the child sheet. */
.site-header .site-search.type-outline form.woocommerce-product-search {
position: relative;
display: flex;
align-items: center;
height: 48px;
max-width: 560px;
background: #fff;
border: 1.5px solid var(--zo-line);
border-radius: 0;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.site-header .site-search.type-outline form.woocommerce-product-search:focus-within {
border-color: var(--zo-forest);
box-shadow: 0 0 0 4px rgba(3,104,56,0.14);
}
/* Hide theme's input-left magnify icon — icon now lives inside the submit button */
.site-header .site-search.type-outline form.woocommerce-product-search:before {
content: none;
display: none;
}
/* Borderless transparent input */
.site-header .site-search.type-outline input[type="search"] {
flex: 1;
height: 100%;
min-width: 0;
margin: 0;
padding: 0 12px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
font-size: var(--font-size-sm);
}
.site-header .site-search.type-outline input[type="search"]:focus {
border: 0;
box-shadow: none;
outline: 0;
}
/* Reveal the SR-only submit as an inline orange CTA flush with the field.
!important beats parent rule that clips + absolutely positions it off-screen. */
.site-header .site-search.type-outline form.woocommerce-product-search button[type="submit"] {
clip: auto !important;
position: static !important;
align-self: stretch;
flex: none;
display: inline-flex;
align-items: center;
width: auto;
margin: 0;
padding: 0 20px;
border: 0;
border-radius: 0;
background: #F46B30;
color: #fff;
font-size: var(--font-size-sm);
font-weight: 700;
line-height: 1;
cursor: pointer;
transition: background-color 0.18s ease;
}
.site-header .site-search.type-outline form.woocommerce-product-search button[type="submit"]:before {
content: none;
display: none;
}
.site-header .site-search.type-outline form.woocommerce-product-search button[type="submit"]:hover {
background: #D75E2A;
}
/* ---- AJAX search results dropdown (CommerceKit Fast Ajax Search) ----
header-5 form is NOT in .commercekit-wrapper, so plugin's "clean wrapper"
top:100% positioning never applies. We anchor the panel just below the
48px pill and re-skin to the brand. Scoped selector beats plugin's legacy rule. */
.site-header .site-search.type-outline form.woocommerce-product-search .commercekit-ajs-results {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
width: 100%;
min-height: 0;
max-height: 70vh;
overflow-y: auto;
overflow-x: hidden;
background: #fff;
border: 1px solid var(--zo-line);
border-radius: 0;
box-shadow: 0 12px 28px rgba(3,104,56,0.12);
}
.site-header .site-search.type-outline form.woocommerce-product-search .commercekit-ajs-suggestions {
border: 0;
background: #fff;
}
.site-header .site-search.type-outline form.woocommerce-product-search .commercekit-ajs-suggestions > .autocomplete-suggestion {
border-bottom: 1px solid var(--zo-line);
}
.site-header .site-search.type-outline form.woocommerce-product-search .commercekit-ajs-suggestions > .autocomplete-suggestion:hover,
.site-header .site-search.type-outline form.woocommerce-product-search .commercekit-ajs-suggestions > .autocomplete-suggestion.active,
.site-header .site-search.type-outline form.woocommerce-product-search .commercekit-ajs-suggestions > .autocomplete-suggestion.autocomplete-selected > a {
background-color: var(--zo-mint);
}
.site-header .site-search.type-outline form.woocommerce-product-search .commercekit-ajs-product-title {
color: #1f2d27;
}
/* Keep prices on-brand instead of plugin's default orange #de9915 */
.site-header .site-search.type-outline form.woocommerce-product-search .commercekit-ajs-product-price,
.site-header .site-search.type-outline form.woocommerce-product-search .commercekit-ajs-product-price ins {
color: var(--zo-forest);
}
.site-header .site-search.type-outline form.woocommerce-product-search .autocomplete-no-suggestion {
padding: 14px 12px;
color: var(--zo-text-muted);
}
/* "Zobacz wszystkie produkty" bar → brand forest */
.site-header .site-search.type-outline form.woocommerce-product-search .commercekit-ajs-view-all-holder > a {
background: var(--zo-forest);
border-radius: 0;
}
.site-header .site-search.type-outline form.woocommerce-product-search .commercekit-ajs-view-all-holder > a:hover {
background: var(--zo-forest-dark);
}
/* Scrollbar polish (WebKit) */
.site-header .site-search.type-outline form.woocommerce-product-search .commercekit-ajs-results::-webkit-scrollbar-track {
background: var(--zo-mint);
}
.site-header .site-search.type-outline form.woocommerce-product-search .commercekit-ajs-results::-webkit-scrollbar-thumb {
background: var(--zo-forest);
}
/* ---- Action cluster: thin divider before cart ----
Prefixed with .header-5 .site-header so it wins over parent (loads after child). */
.header-5 .site-header .site-header-cart {
border-left: 1px solid var(--zo-line);
padding-left: 1.1em;
}
/* ---- Cart: mint pill + brand-green count badge ----
Light-touch: recolour the existing CommerceKit cart without rebuilding.
div.shoptimizer-cart is the WC AJAX fragment — restyle only, never re-markup. */
.header-5 .site-header .shoptimizer-cart a.cart-contents {
background: #fff;
border-color: #e5e7eb;
border-radius: 0;
}
.header-5 .site-header .shoptimizer-cart a.cart-contents:hover {
border-color: #9ca3af;
}
.header-5 .site-header .shoptimizer-cart a.cart-contents .count,
.header-5 .site-header .shoptimizer-cart a.cart-contents .count:after {
border-color: var(--zo-forest);
color: var(--zo-forest);
}
.header-5 .site-header .shoptimizer-cart a.cart-contents:hover .count {
background-color: var(--zo-forest);
color: #fff;
}
/* ---- Top-level primary nav: brand-green hover/active + underline ----
Scoped to DIRECT children of #menu-primary-menu — mega panels untouched. */
.shoptimizer-primary-navigation #menu-primary-menu > li:hover > a {
color: var(--zo-forest);
}
/* Recolour + thicken the theme's existing hover underline */
.shoptimizer-primary-navigation #menu-primary-menu > li > a span:before {
border-bottom-width: 2px;
border-bottom-color: var(--zo-forest);
}
/* Active section: persistent forest text + revealed underline */
.shoptimizer-primary-navigation #menu-primary-menu > li.current-menu-item > a,
.shoptimizer-primary-navigation #menu-primary-menu > li.current-menu-ancestor > a,
.shoptimizer-primary-navigation #menu-primary-menu > li.current-menu-parent > a {
color: var(--zo-forest);
}
.shoptimizer-primary-navigation #menu-primary-menu > li.current-menu-item > a span:before,
.shoptimizer-primary-navigation #menu-primary-menu > li.current-menu-ancestor > a span:before,
.shoptimizer-primary-navigation #menu-primary-menu > li.current-menu-parent > a span:before {
transform: scale(1, 1);
transform-origin: left center;
}
/* ---- Mega panels: grouped category columns ----
Parent theme centres the column row (justify-content:center).
ID in selector beats parent specificity despite child CSS loading first. */
#menu-primary-menu > li.full-width:not(.mega-flat) > .sub-menu-wrapper > .container > ul.sub-menu {
display: flex;
gap: 40px;
align-items: flex-start;
justify-content: space-between;
padding: 40px;
}
/* Sub-menu link hover: forest accent */
#menu-primary-menu > li.full-width .sub-menu-wrapper li:not(.mega-cta) > a.sub-menu-link:hover {
color: var(--zo-forest);
}
/* ---- Mega panels with grouped columns: strong column headings ----
Applies only to full-width panels that use heading-grouped columns
(currently "Zwalczanie owadów" + "Dom i czystość"). Mega-flat categories
have no li.heading so they're unaffected. */
#menu-primary-menu > li.full-width:not(.mega-flat) > .sub-menu-wrapper > .container > ul.sub-menu > li.heading > a.sub-menu-link {
display: block;
margin-bottom: var(--space-md);
padding-bottom: var(--space-xs);
border-bottom: 2px solid var(--zo-forest-deep);
color: var(--zo-forest-deep);
font-weight: 700;
letter-spacing: 0;
text-transform: uppercase;
}
#menu-primary-menu > li.full-width:not(.mega-flat) > .sub-menu-wrapper > .container > ul.sub-menu > li.heading > .sub-menu-wrapper > .container > ul.sub-menu {
display: block;
margin: 0;
padding: 0;
list-style: none;
}
#menu-primary-menu > li.full-width:not(.mega-flat) > .sub-menu-wrapper > .container > ul.sub-menu > li.heading > .sub-menu-wrapper > .container > ul.sub-menu > li {
margin-bottom: var(--space-xs);
}
#menu-primary-menu > li.full-width:not(.mega-flat) > .sub-menu-wrapper > .container > ul.sub-menu > li.heading > .sub-menu-wrapper > .container > ul.sub-menu > li > a.sub-menu-link {
color: #555;
font-size: 15px;
font-weight: 500;
line-height: 1.4;
transition: color 0.2s ease;
}
/* ---- Flat categories (.mega-flat): stacked link column + CTA card ----
Renders leaf links as a single column on the left; places a "view all"
CTA card on the right (query-free — no product rail needed). */
#menu-primary-menu > li.mega-flat > .sub-menu-wrapper > .container > ul.sub-menu {
display: block;
position: relative;
padding: 34px 0 38px;
min-height: 0;
}
#menu-primary-menu > li.mega-flat > .sub-menu-wrapper > .container > ul.sub-menu > li {
display: block;
float: none;
width: auto;
max-width: 340px;
padding: 0;
border: 0;
}
#menu-primary-menu > li.mega-flat > .sub-menu-wrapper > .container > ul.sub-menu > li:last-child {
border: 0;
}
#menu-primary-menu > li.mega-flat > .sub-menu-wrapper > .container > ul.sub-menu > li > a.sub-menu-link {
display: block;
padding: 9px 0;
font-size: var(--font-size);
}
/* CTA card: top-right of flat panels */
#menu-primary-menu > li.mega-flat > .sub-menu-wrapper > .container > ul.sub-menu > li.mega-cta {
position: absolute;
top: 34px;
left: 400px;
right: auto;
width: 300px;
max-width: 300px;
margin: 0;
}
/* !important: parent CSS (loads after child) forces display:block otherwise */
#menu-primary-menu > li.mega-flat .mega-cta > a.sub-menu-link {
display: flex !important;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 24px;
background: var(--zo-forest);
color: #fff !important;
border-radius: 0;
font-weight: 600;
line-height: 1.3;
text-align: center;
transition: background 0.15s ease, transform 0.15s ease;
}
#menu-primary-menu > li.mega-flat .mega-cta > a.sub-menu-link:after {
content: "→";
font-size: 1.15em;
line-height: 1;
flex: 0 0 auto;
}
#menu-primary-menu > li.mega-flat .mega-cta > a.sub-menu-link:hover {
background: var(--zo-forest-dark);
transform: translateY(-1px);
}
} /* end @media (min-width: 993px) */
/* ==========================================================================
12. CHECKOUT — InPost Paczkomaty point picker
--------------------------------------------------------------------------
Plugin (woocommerce-paczkomaty-inpost) injects #paczkomat_id_wrapper inside
the shipping-methods list. The theme paints its shipping-radio marker on
the picker's label, making it look like an extra unclickable option.
We strip the phantom marker, SR-only the redundant label, and indent.
Scoped to the stable #paczkomat_id_wrapper — fully reversible.
========================================================================== */
#paczkomat_id_wrapper {
display: block;
margin: 0.35rem 0 0.85rem 1.9rem;
}
/* Remove pseudo-element marker the theme draws on the injected row */
#paczkomat_id_wrapper::before,
#paczkomat_id_wrapper::after,
#paczkomat_id_wrapper .form-row::before,
#paczkomat_id_wrapper .form-row::after,
#paczkomat_id_wrapper label::before,
#paczkomat_id_wrapper label::after {
content: none !important;
display: none !important;
background: none !important;
border: 0 !important;
}
/* Redundant "Paczkomat *" labels — keep for assistive tech, hide visually */
#paczkomat_id_wrapper #paczkomat_id_field > label,
#paczkomat_id_wrapper #paczkomat_name_field > label {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
#paczkomat_id_wrapper .form-row {
margin: 0 0 0.5rem;
padding: 0;
}
#paczkomat_id_wrapper #open-geowidget {
margin-top: 0.15rem;
}
/* ==========================================================================
13. PAGES — page-specific layouts
--------------------------------------------------------------------------
Contact page layout was previously in so-css. Moved here.
Other page CSS lives in assets/css/page-*.css (separate enqueued files).
========================================================================== */
.contact-page {
max-width: 1120px;
margin: 0 auto;
padding: 48px 20px;
}
.contact-hero {
margin-bottom: 32px;
}
.contact-hero h1 {
margin-bottom: 12px;
}
.contact-hero p {
max-width: 760px;
font-size: var(--font-size-lg);
line-height: 1.6;
}
.contact-meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
.contact-meta span {
padding: 8px 12px;
border: 1px solid var(--zo-line);
border-radius: 0;
background: #fff;
font-size: var(--font-size-sm);
}
.contact-cards,
.help-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin: 28px 0 40px;
}
.help-grid {
grid-template-columns: repeat(2, 1fr);
}
/* ==========================================================================
14. ACCESSIBILITY — contrast & ARIA fixes (Pass-2 audit 2026-06-08)
--------------------------------------------------------------------------
All rules here exist solely to meet WCAG 2.1 AA contrast ratios or to
expose interactive elements to assistive technology. No visual redesign.
========================================================================== */
/* Fix #4 — CommerceKit Free Shipping Notice bar (cart / mini-cart)
Plugin uses --commercekit-fsn-bar-color for BOTH the progress-bar fill
AND the amount text, default #3bb54a → 2.6:1 on white (FAILS AA).
Solution: rebind the variable to lime for graphical elements (progress bar,
icon mask) and override amount text to forest (#005734 → 12.5:1 on white). */
.cgkit-fsn-bar-cart,
.cgkit-fsn-bar-mini-cart {
--commercekit-fsn-bar-color: var(--zo-lime);
}
.cgkit-fsn-notice .amount,
.cgkit-fsn-notice .amount .woocommerce-Price-currencySymbol {
color: var(--zo-forest) !important;
}
/* Fix #6 — Checkout "Powracający klient?" login-toggle notice bar
WooCommerce default: white text on #3d9cd2 blue → 2.85:1 (FAILS AA).
Override to forest background (white on #005734 → 12.5:1). */
.woocommerce-form-login-toggle .woocommerce-info {
background-color: var(--zo-forest);
border-top-color: var(--zo-forest-deep);
color: #fff;
}
.woocommerce-form-login-toggle .showlogin {
color: #fff; /* lime (#8cc63f) on forest = 4.39:1 — just under AA; white = 8.75:1 ✓ */
text-decoration: underline;
font-weight: 600; /* underline + weight distinguish it from surrounding text */
}
/* Fix #7 — Checkout order-summary product quantity "× 1"
Default Shoptimizer: #777 on white → 4.01:1 (FAILS AA, needs 4.5:1).
Use #545454 → 5.74:1 on white ✓ */
.woocommerce-checkout .product-quantity {
color: #545454;
}
/* Fix #13 — Homepage brands section description text
Elementor sets color to --zo-text-muted (#6b7770) → 4.17:1 on white (FAILS AA).
Override to --zo-text (#3a443e) → 8.60:1 ✓ */
.zo-my-brands__desc {
color: var(--zo-text);
}
/* Fix #11 — PLP image carousel keyboard access
Shoptimizer's flip-image carousel container has overflow:hidden + scroll
but no tabindex, failing WCAG 2.1 SC 1.3.4. JS adds tabindex="0";
this rule provides a visible focus indicator. */
.shoptimizer-plp-carousel-container:focus {
outline: 2px solid var(--zo-forest);
outline-offset: 2px;
}
.contact-cards article,
.help-grid article,
.company-details,
.bank-details {
padding: 22px;
border: 1px solid var(--zo-line);
border-radius: 0;
background: #fff;
}
.contact-page h2 {
margin-top: 36px;
margin-bottom: 16px;
}
.contact-page h3 {
margin-bottom: 8px;
}
.contact-page a {
font-weight: 700;
}
.contact-page ol {
padding-left: 20px;
}
.contact-page li {
margin-bottom: 10px;
}
@media (max-width: 768px) {
.contact-page {
padding: 32px 16px;
}
.contact-cards,
.help-grid {
grid-template-columns: 1fr;
}
.contact-hero p {
font-size: var(--font-size);
}
}
/* ============================================================
§CKY CookieYes banner — colour overrides (inline styles need !important)
Accept = orange CTA, secondary buttons = forest green outline
============================================================ */
.cky-btn-accept {
background-color: var(--zo-cta) !important;
border-color: var(--zo-cta) !important;
color: #fff !important;
}
.cky-btn-accept:hover {
background-color: var(--zo-cta-hover) !important;
border-color: var(--zo-cta-hover) !important;
opacity: 1 !important;
}
.cky-btn-reject,
.cky-btn-customize,
.cky-btn-preferences {
color: var(--zo-forest) !important;
border-color: var(--zo-forest) !important;
background-color: transparent !important;
}
.cky-btn-reject:hover,
.cky-btn-customize:hover,
.cky-btn-preferences:hover {
color: var(--zo-forest-deep) !important;
border-color: var(--zo-forest-deep) !important;
opacity: 1 !important;
}
/* revisit floating button */
.cky-btn-revisit-wrapper {
background-color: var(--zo-forest) !important;
}
/* toggle switch */
.cky-switch input[type="checkbox"]:checked {
background: var(--zo-forest) !important;
}
/* focus outlines */
.cky-btn:focus-visible,
.cky-notice-des a.cky-policy:focus-visible,
.cky-notice-des button.cky-policy:focus-visible {
outline-color: var(--zo-forest) !important;
}
/* opt-out confirm button */
.cky-opt-out-btn-wrapper .cky-btn-confirm {
background-color: var(--zo-cta) !important;
border-color: var(--zo-cta) !important;
}