/* =========================================================================
Machon Nadav WooCommerce styles.
Loaded only on WooCommerce surfaces (shop, product, cart, checkout,
account) and depends on the main theme handle, so it overrides the
shared tokens defined in theme.css. Reuses the brand CSS variables
(--brand, --ink, --paper, --radius, Heebo) from theme.css; does not
redeclare them here.
Strategy: style WooCommerce's DEFAULT markup classes only. We never
override the plugin's PHP templates, so these rules stay robust across
WooCommerce updates. Everything is scoped under .mn-body (the theme body
class) so it cannot leak onto non-store pages and so it wins specificity
over the plugin's own default stylesheet without !important wherever
possible.
RTL Hebrew. Orange (#FD6B03) is the only accent. Never use the em or en dash.
========================================================================= */
/* -------------------------------------------------------------------------
0. Page shell + shared typography
------------------------------------------------------------------------- */
.mn-body.woocommerce,
.mn-body.woocommerce-page,
.mn-body.woocommerce-cart,
.mn-body.woocommerce-checkout,
.mn-body.woocommerce-account {
background: var(--paper);
}
/* Give the main store content the same gutter + max width as the comp so
shop/product/cart pages line up with the rest of the site. The Hello
Elementor child renders WooCommerce inside its content wrapper; we add a
comfortable container without assuming a specific wrapper class. */
.mn-body.woocommerce {
color: var(--ink);
font-family: "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
.mn-body.woocommerce a {
color: var(--brand-600);
transition: color 0.2s var(--ease);
}
.mn-body.woocommerce a:hover {
color: var(--brand);
}
/* Page title (shop / archive / endpoint headings). */
.mn-body .woocommerce-products-header__title,
.mn-body .woocommerce-products-header .woocommerce-products-header__title,
.mn-body.woocommerce h1.entry-title,
.mn-body.woocommerce .woocommerce-breadcrumb + h1 {
font-size: clamp(1.875rem, 4vw, 2.25rem);
font-weight: 900;
letter-spacing: -0.01em;
color: var(--ink);
}
/* Term (category) description under the archive title. */
.mn-body.woocommerce .term-description,
.mn-body .woocommerce-products-header .term-description {
max-width: 48rem;
margin-top: 0.5rem;
font-size: 1.05rem;
color: var(--ink-500);
}
/* WooCommerce breadcrumb, on-brand and quiet. */
.mn-body.woocommerce .woocommerce-breadcrumb {
margin-bottom: 1.25rem;
font-size: 0.875rem;
color: var(--ink-500);
}
.mn-body.woocommerce .woocommerce-breadcrumb a {
color: var(--ink-500);
}
.mn-body.woocommerce .woocommerce-breadcrumb a:hover {
color: var(--brand);
}
/* -------------------------------------------------------------------------
1. Buttons (the WooCommerce .button family) as the orange pill
------------------------------------------------------------------------- */
.mn-body.woocommerce a.button,
.mn-body.woocommerce button.button,
.mn-body.woocommerce input.button,
.mn-body.woocommerce .button,
.mn-body.woocommerce #respond input#submit,
.mn-body.woocommerce-page a.button,
.mn-body.woocommerce-page button.button,
.mn-body.woocommerce-page input.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--brand);
color: var(--white);
border: 1px solid transparent;
border-radius: var(--radius-pill);
padding: 0.65rem 1.4rem;
font-family: inherit;
font-weight: 700;
font-size: 0.9375rem;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
box-shadow: var(--shadow-soft);
transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
border-color 0.2s var(--ease), transform 0.12s var(--ease),
box-shadow 0.2s var(--ease);
}
.mn-body.woocommerce a.button:hover,
.mn-body.woocommerce button.button:hover,
.mn-body.woocommerce input.button:hover,
.mn-body.woocommerce .button:hover,
.mn-body.woocommerce #respond input#submit:hover {
background: var(--brand-600);
color: var(--white);
}
.mn-body.woocommerce a.button:active,
.mn-body.woocommerce button.button:active,
.mn-body.woocommerce input.button:active,
.mn-body.woocommerce .button:active {
transform: scale(0.98);
}
/* Primary emphasis buttons (place order, proceed to checkout) keep the
stronger card shadow used on the comp's hero CTA. */
.mn-body.woocommerce a.button.alt,
.mn-body.woocommerce button.button.alt,
.mn-body.woocommerce input.button.alt,
.mn-body.woocommerce #place_order,
.mn-body.woocommerce .checkout-button {
background: var(--brand);
box-shadow: var(--shadow-card);
}
.mn-body.woocommerce a.button.alt:hover,
.mn-body.woocommerce button.button.alt:hover,
.mn-body.woocommerce input.button.alt:hover,
.mn-body.woocommerce #place_order:hover,
.mn-body.woocommerce .checkout-button:hover {
background: var(--brand-600);
}
/* Secondary / outline buttons (e.g. "update cart", "apply coupon" emphasis
off). WooCommerce gives some buttons no .alt; keep them readable as a
ghost pill so the primary action stays the loud orange one. */
.mn-body.woocommerce button[name="update_cart"],
.mn-body.woocommerce input[name="update_cart"],
.mn-body.woocommerce a.button.wc-backward {
background: var(--white);
color: var(--ink);
border-color: var(--line-strong);
box-shadow: none;
}
.mn-body.woocommerce button[name="update_cart"]:hover,
.mn-body.woocommerce input[name="update_cart"]:hover,
.mn-body.woocommerce a.button.wc-backward:hover {
background: var(--white);
border-color: var(--brand);
color: var(--brand);
}
/* Disabled state (WooCommerce sets disabled on update-cart until a qty
changes). */
.mn-body.woocommerce button.button:disabled,
.mn-body.woocommerce button.button[disabled],
.mn-body.woocommerce input.button:disabled {
opacity: 0.45;
cursor: not-allowed;
box-shadow: none;
}
/* The small "Added" tick / view-cart link that follows an ajax add. */
.mn-body.woocommerce a.added_to_cart {
display: inline-flex;
align-items: center;
margin-inline-start: 0.5rem;
font-weight: 700;
color: var(--brand-600);
}
/* -------------------------------------------------------------------------
2. Shop / category archive (ul.products, li.product)
------------------------------------------------------------------------- */
/* Result count + ordering row above the grid. */
.mn-body.woocommerce .woocommerce-result-count,
.mn-body.woocommerce-page .woocommerce-result-count {
margin: 0 0 1.25rem;
font-size: 0.875rem;
color: var(--ink-500);
}
.mn-body.woocommerce .woocommerce-ordering,
.mn-body.woocommerce-page .woocommerce-ordering {
margin-bottom: 1.25rem;
}
.mn-body.woocommerce .woocommerce-ordering select,
.mn-body.woocommerce-page .woocommerce-ordering select {
font-family: inherit;
font-size: 0.9rem;
color: var(--ink);
background: var(--white);
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
padding: 0.55rem 0.9rem;
cursor: pointer;
outline: none;
transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.mn-body.woocommerce .woocommerce-ordering select:focus {
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(253, 107, 3, 0.2);
}
/* Product grid. WooCommerce sets columns via inline-ish classes
(.columns-3 etc.) and floats by default; we override to CSS grid so the
layout is responsive and matches the comp's card rhythm. */
.mn-body.woocommerce ul.products,
.mn-body.woocommerce-page ul.products {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
margin: 0 0 2.5rem;
padding: 0;
list-style: none;
}
.mn-body.woocommerce ul.products::before,
.mn-body.woocommerce ul.products::after {
content: none; /* kill the legacy float clearfix */
}
.mn-body.woocommerce ul.products li.product,
.mn-body.woocommerce-page ul.products li.product {
width: auto;
margin: 0;
padding: 1rem 1rem 1.25rem;
float: none;
clear: none;
display: flex;
flex-direction: column;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-soft);
text-align: start;
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
border-color 0.2s var(--ease);
}
.mn-body.woocommerce ul.products li.product:hover {
transform: translateY(-4px);
border-color: rgba(253, 107, 3, 0.4);
box-shadow: var(--shadow-card);
}
/* Product thumbnail.
Uploads are not migrated yet, so most product images are the WooCommerce
placeholder or a broken ![]()
. We wrap every loop thumbnail in a soft
paper / orange-tinted box that carries the נ logo mark as a faint motif, so
the catalog reads as a styled, deliberate "image coming soon" state instead
of a row of broken thumbnails. The image link is the box; the ![]()
sits on
top, contained, so a real (working) image still shows normally once present.
The motif is an inline data-URI SVG so it needs no extra HTTP request and can
never itself 404. */
.mn-body.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.mn-body.woocommerce ul.products li.product a.woocommerce-loop-product__link {
display: block;
position: relative;
margin: 0 0 1rem;
border-radius: var(--radius-sm);
border: 1px solid var(--line);
background-color: var(--brand-50);
background-image:
radial-gradient(120% 120% at 80% 0%, rgba(253, 107, 3, 0.10), transparent 60%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='50' y='72' font-family='Heebo,Arial,sans-serif' font-size='62' font-weight='800' fill='%23FD6B03' fill-opacity='0.16' text-anchor='middle'%3E%D7%A0%3C/text%3E%3C/svg%3E");
background-repeat: no-repeat, no-repeat;
background-position: center, center;
background-size: cover, 56% auto;
overflow: hidden;
}
.mn-body.woocommerce ul.products li.product a img,
.mn-body.woocommerce-page ul.products li.product a img {
margin: 0;
border-radius: 0;
aspect-ratio: 4 / 3;
object-fit: cover;
width: 100%;
min-height: 11rem;
background: transparent;
}
/* The WooCommerce placeholder image itself: drop it to a faint watermark so the
branded box motif behind it carries the look, not the gray generic graphic. */
.mn-body.woocommerce ul.products li.product a img.woocommerce-placeholder {
object-fit: contain;
padding: 1.5rem;
opacity: 0.18;
mix-blend-mode: multiply;
}
/* Sale flash. */
.mn-body.woocommerce ul.products li.product .onsale,
.mn-body.woocommerce span.onsale {
position: absolute;
top: 1rem;
inset-inline-end: 1rem;
min-width: auto;
min-height: auto;
margin: 0;
padding: 0.25rem 0.7rem;
border-radius: var(--radius-pill);
background: var(--brand);
color: var(--white);
font-size: 0.75rem;
font-weight: 700;
line-height: 1.4;
}
.mn-body.woocommerce ul.products li.product {
position: relative;
}
/* Product title inside the card. WooCommerce uses .woocommerce-loop-product__title
(h2/h3 depending on theme); cover both. */
.mn-body.woocommerce ul.products li.product .woocommerce-loop-product__title,
.mn-body.woocommerce ul.products li.product h2,
.mn-body.woocommerce ul.products li.product h3 {
padding: 0;
margin: 0 0 0.5rem;
font-size: 1.05rem;
font-weight: 800;
line-height: 1.35;
color: var(--ink);
}
/* Star rating in the loop. */
.mn-body.woocommerce ul.products li.product .star-rating {
margin: 0 0 0.5rem;
color: var(--brand);
font-size: 0.85rem;
}
/* Price in the loop. The "החל מ" prefix is part of WooCommerce's variable
price markup; we style the whole price block. */
.mn-body.woocommerce ul.products li.product .price {
display: block;
margin: 0 0 1rem;
color: var(--ink);
font-size: 1.15rem;
font-weight: 900;
line-height: 1.3;
}
.mn-body.woocommerce ul.products li.product .price del {
color: var(--ink-500);
font-weight: 600;
opacity: 0.8;
}
.mn-body.woocommerce ul.products li.product .price ins {
text-decoration: none;
color: var(--brand-600);
}
/* WooCommerce wraps the variable "from" label in .from / a small span. */
.mn-body.woocommerce .price .from {
display: inline;
font-size: 0.8rem;
font-weight: 600;
color: var(--ink-500);
}
/* Push the add-to-cart button to the bottom of equal-height cards. */
.mn-body.woocommerce ul.products li.product .button,
.mn-body.woocommerce ul.products li.product a.add_to_cart_button,
.mn-body.woocommerce ul.products li.product a.product_type_variable {
margin-top: auto;
align-self: flex-start;
}
/* Category cards that appear in the loop (product_cat tiles). */
.mn-body.woocommerce ul.products li.product-category h2,
.mn-body.woocommerce ul.products li.product-category .count {
color: var(--ink);
}
.mn-body.woocommerce ul.products li.product-category .count {
background: var(--brand-50);
color: var(--brand-600);
border-radius: var(--radius-pill);
padding: 0.15rem 0.6rem;
font-size: 0.75rem;
font-weight: 700;
}
/* -------------------------------------------------------------------------
3. Category / term sidebar + widget lists
------------------------------------------------------------------------- */
.mn-body.woocommerce .product-categories,
.mn-body.woocommerce ul.product-categories,
.mn-body .widget_product_categories ul,
.mn-body .widget_layered_nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.mn-body .product-categories li,
.mn-body .widget_product_categories li,
.mn-body .widget_layered_nav li {
margin: 0;
}
.mn-body .product-categories li a,
.mn-body .widget_product_categories li a,
.mn-body .widget_layered_nav li a {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0;
color: var(--ink-700);
font-weight: 600;
font-size: 0.95rem;
}
.mn-body .product-categories li a:hover,
.mn-body .widget_product_categories li a:hover {
color: var(--brand);
}
.mn-body .product-categories li .count,
.mn-body .widget_product_categories li .count {
color: var(--ink-500);
font-weight: 500;
font-size: 0.8rem;
}
.mn-body .widget-title,
.mn-body.woocommerce .widget-title {
font-size: 1.05rem;
font-weight: 800;
color: var(--ink);
margin: 0 0 0.75rem;
}
/* -------------------------------------------------------------------------
4. Pagination
------------------------------------------------------------------------- */
.mn-body.woocommerce nav.woocommerce-pagination,
.mn-body .woocommerce-pagination {
margin-top: 2rem;
text-align: center;
}
.mn-body.woocommerce nav.woocommerce-pagination ul {
display: inline-flex;
gap: 0.4rem;
border: 0;
margin: 0;
padding: 0;
}
.mn-body.woocommerce nav.woocommerce-pagination ul li {
border: 0;
margin: 0;
overflow: visible;
}
.mn-body.woocommerce nav.woocommerce-pagination ul li a,
.mn-body.woocommerce nav.woocommerce-pagination ul li span {
display: grid;
place-items: center;
min-width: 2.5rem;
height: 2.5rem;
padding: 0 0.65rem;
border-radius: var(--radius-sm);
border: 1px solid var(--line);
background: var(--white);
color: var(--ink-700);
font-weight: 700;
transition: border-color 0.2s var(--ease), color 0.2s var(--ease),
background-color 0.2s var(--ease);
}
.mn-body.woocommerce nav.woocommerce-pagination ul li a:hover,
.mn-body.woocommerce nav.woocommerce-pagination ul li a:focus {
border-color: var(--brand);
color: var(--brand);
background: var(--brand-50);
}
.mn-body.woocommerce nav.woocommerce-pagination ul li span.current {
background: var(--brand);
border-color: var(--brand);
color: var(--white);
}
/* -------------------------------------------------------------------------
5. Single product (div.product)
------------------------------------------------------------------------- */
.mn-body.woocommerce div.product {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
margin-bottom: 3rem;
}
/* Gallery + summary live in the grid; WooCommerce floats them by default.
max-width:100% + min-width:0 lets the gallery shrink inside the grid track so
it can never push the page wider than the viewport on mobile. */
.mn-body.woocommerce div.product .woocommerce-product-gallery,
.mn-body.woocommerce div.product div.summary,
.mn-body.woocommerce div.product .entry-summary {
float: none;
width: auto;
min-width: 0;
max-width: 100%;
margin: 0;
}
.mn-body.woocommerce div.product .woocommerce-product-gallery__image img,
.mn-body.woocommerce div.product div.images img {
border-radius: var(--radius);
box-shadow: var(--shadow-soft);
}
/* Branded gallery fallback. The same paper / orange-tinted box + נ motif used in
the loop, so a product with no migrated image reads as "image coming soon"
rather than a broken graphic. WooCommerce adds the --without-images modifier
when the product has no real gallery; we tint the whole gallery box and fade
the placeholder graphic to a faint watermark. */
.mn-body.woocommerce div.product .woocommerce-product-gallery--without-images,
.mn-body.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__image:first-child {
position: relative;
border-radius: var(--radius);
border: 1px solid var(--line);
background-color: var(--brand-50);
background-image:
radial-gradient(120% 120% at 80% 0%, rgba(253, 107, 3, 0.10), transparent 60%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='50' y='72' font-family='Heebo,Arial,sans-serif' font-size='62' font-weight='800' fill='%23FD6B03' fill-opacity='0.16' text-anchor='middle'%3E%D7%A0%3C/text%3E%3C/svg%3E");
background-repeat: no-repeat, no-repeat;
background-position: center, center;
background-size: cover, 40% auto;
min-height: 18rem;
overflow: hidden;
}
.mn-body.woocommerce div.product .woocommerce-product-gallery--without-images img,
.mn-body.woocommerce div.product .woocommerce-product-gallery img.woocommerce-placeholder {
box-shadow: none;
opacity: 0.18;
mix-blend-mode: multiply;
object-fit: contain;
padding: 2rem;
}
.mn-body.woocommerce div.product .product_title,
.mn-body.woocommerce div.product h1.entry-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 900;
letter-spacing: -0.01em;
line-height: 1.15;
color: var(--ink);
}
.mn-body.woocommerce div.product .woocommerce-product-rating {
margin-bottom: 1rem;
}
.mn-body.woocommerce div.product .woocommerce-product-rating .star-rating {
color: var(--brand);
}
.mn-body.woocommerce div.product p.price,
.mn-body.woocommerce div.product span.price {
margin: 0.75rem 0 1.25rem;
color: var(--ink);
font-size: 1.6rem;
font-weight: 900;
line-height: 1.3;
}
.mn-body.woocommerce div.product p.price del,
.mn-body.woocommerce div.product span.price del {
color: var(--ink-500);
font-weight: 600;
font-size: 1.15rem;
opacity: 0.8;
}
.mn-body.woocommerce div.product p.price ins {
text-decoration: none;
color: var(--brand-600);
}
.mn-body.woocommerce div.product .woocommerce-product-details__short-description {
color: var(--ink-700);
line-height: 1.7;
margin-bottom: 1.5rem;
}
/* Variation form (the "זמן מנוי" select lives here). bbPress... rather, the
plugin lays the attribute out as a with a th.label
+ td.value cell. We flatten the whole table to block flow so the label sits on
its own line above a full-width branded select, instead of a cramped two-cell
row. Setting table / tbody / tr to block (not just the cells) is what makes
the stacking reliable and stops the table from establishing its own wide
min-content box that overflows narrow screens. */
.mn-body.woocommerce div.product form.variations_form table.variations,
.mn-body.woocommerce div.product form.variations_form table.variations tbody,
.mn-body.woocommerce div.product form.variations_form table.variations tr {
display: block;
width: 100%;
max-width: 100%;
border: 0;
margin: 0;
}
.mn-body.woocommerce div.product form.variations_form .variations {
margin-bottom: 1.25rem;
border: 0;
}
.mn-body.woocommerce div.product form.variations_form .variations td,
.mn-body.woocommerce div.product form.variations_form .variations th {
display: block;
width: 100%;
padding: 0;
border: 0;
text-align: start;
vertical-align: top;
}
.mn-body.woocommerce div.product form.variations_form .variations th.label {
margin-bottom: 0.4rem;
}
.mn-body.woocommerce div.product form.variations_form .variations label {
font-weight: 700;
color: var(--ink);
font-size: 0.95rem;
}
.mn-body.woocommerce div.product form.variations_form .variations td.value {
margin-bottom: 1rem;
}
.mn-body.woocommerce div.product form.variations_form .variations select {
width: 100%;
max-width: 22rem;
font-family: inherit;
font-size: 1rem;
color: var(--ink);
background: var(--white);
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
padding: 0.7rem 1rem;
cursor: pointer;
outline: none;
transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.mn-body.woocommerce div.product form.variations_form .variations select:focus {
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(253, 107, 3, 0.2);
}
/* "Clear" link that resets the chosen variation. */
.mn-body.woocommerce div.product .reset_variations {
display: inline-block;
margin-inline-start: 0.5rem;
font-size: 0.85rem;
font-weight: 600;
color: var(--ink-500);
}
.mn-body.woocommerce div.product .reset_variations:hover {
color: var(--brand);
}
/* Single-variation price + availability box. */
.mn-body.woocommerce div.product .woocommerce-variation-price .price {
font-size: 1.4rem;
font-weight: 900;
color: var(--ink);
}
/* Quantity stepper. Hidden automatically when the product is sold
individually (WooCommerce omits the .quantity input then), but we also
harden the visible case. */
.mn-body.woocommerce div.product form.cart .quantity {
display: inline-flex;
align-items: center;
margin-inline-end: 0.75rem;
}
.mn-body.woocommerce .quantity input.qty {
width: 4rem;
height: 3rem;
text-align: center;
font-family: inherit;
font-size: 1rem;
font-weight: 700;
color: var(--ink);
background: var(--white);
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
outline: none;
transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.mn-body.woocommerce .quantity input.qty:focus {
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(253, 107, 3, 0.2);
}
/* When the product is sold individually WooCommerce still may print a hidden
qty; make sure a stray sold-individually wrapper never shows a box. */
.mn-body.woocommerce div.product form.cart .quantity.hidden {
display: none;
}
.mn-body.woocommerce div.product form.cart {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.mn-body.woocommerce div.product form.cart .single_add_to_cart_button {
padding: 0.85rem 2rem;
font-size: 1rem;
box-shadow: var(--shadow-card);
}
/* The add-to-cart button on a variable product starts disabled
(.wc-variation-selection-needed / disabled) until a variation is chosen. The
plugin / Elementor default renders that state as a washed-out lavender; keep
it unmistakably on-brand orange, just slightly dimmed, so it reads as
"choose an option first" rather than broken. */
.mn-body.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.mn-body.woocommerce div.product form.cart .single_add_to_cart_button:disabled,
.mn-body.woocommerce div.product form.cart .single_add_to_cart_button.wc-variation-selection-needed {
background: var(--brand);
color: var(--white);
opacity: 0.65;
cursor: not-allowed;
box-shadow: none;
}
.mn-body.woocommerce div.product form.cart .single_add_to_cart_button.disabled:hover,
.mn-body.woocommerce div.product form.cart .single_add_to_cart_button.wc-variation-selection-needed:hover {
background: var(--brand);
}
/* Product meta (SKU / categories / tags) under the form. */
.mn-body.woocommerce div.product .product_meta {
margin-top: 0.5rem;
padding-top: 1rem;
border-top: 1px solid var(--line);
font-size: 0.85rem;
color: var(--ink-500);
}
.mn-body.woocommerce div.product .product_meta a {
color: var(--ink-700);
}
.mn-body.woocommerce div.product .product_meta a:hover {
color: var(--brand);
}
/* Tabs (description / additional information / reviews). */
.mn-body.woocommerce div.product .woocommerce-tabs {
grid-column: 1 / -1;
margin-top: 1rem;
}
.mn-body.woocommerce div.product .woocommerce-tabs ul.tabs {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0 0 1.5rem;
padding: 0 0 0.75rem;
border-bottom: 1px solid var(--line);
list-style: none;
}
.mn-body.woocommerce div.product .woocommerce-tabs ul.tabs::before {
content: none; /* remove the default tab baseline border */
}
.mn-body.woocommerce div.product .woocommerce-tabs ul.tabs li {
margin: 0;
padding: 0;
background: transparent;
border: 0;
border-radius: var(--radius-pill);
}
.mn-body.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.mn-body.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
content: none; /* WooCommerce draws decorative tab curves; drop them */
}
.mn-body.woocommerce div.product .woocommerce-tabs ul.tabs li a {
display: inline-block;
padding: 0.5rem 1.1rem;
border-radius: var(--radius-pill);
font-weight: 700;
color: var(--ink-700);
background: var(--white);
border: 1px solid var(--line);
}
.mn-body.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
color: var(--brand);
border-color: var(--brand);
}
.mn-body.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
background: var(--brand);
border-color: var(--brand);
color: var(--white);
}
.mn-body.woocommerce div.product .woocommerce-tabs .panel,
.mn-body.woocommerce div.product .woocommerce-Tabs-panel {
margin: 0;
color: var(--ink-700);
line-height: 1.7;
}
.mn-body.woocommerce div.product .woocommerce-tabs .panel h2 {
font-size: 1.4rem;
font-weight: 800;
color: var(--ink);
margin-bottom: 0.75rem;
}
/* Additional-information attribute table. */
.mn-body.woocommerce table.shop_attributes {
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
border-collapse: separate;
border-spacing: 0;
}
.mn-body.woocommerce table.shop_attributes th,
.mn-body.woocommerce table.shop_attributes td {
padding: 0.65rem 1rem;
border-bottom: 1px solid var(--line);
font-size: 0.9rem;
}
.mn-body.woocommerce table.shop_attributes th {
background: var(--paper);
font-weight: 700;
color: var(--ink);
}
.mn-body.woocommerce table.shop_attributes tr:last-child th,
.mn-body.woocommerce table.shop_attributes tr:last-child td {
border-bottom: 0;
}
/* Reviews. */
.mn-body.woocommerce #reviews #comments ol.commentlist {
margin: 0;
padding: 0;
list-style: none;
}
.mn-body.woocommerce #reviews #comments ol.commentlist li {
margin-bottom: 1.25rem;
padding: 1.25rem;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.mn-body.woocommerce #reviews #comments ol.commentlist li .comment-text {
margin: 0;
padding: 0;
border: 0;
}
.mn-body.woocommerce #reviews .comment-form-rating .stars a {
color: var(--brand);
}
.mn-body.woocommerce #reviews #review_form #respond textarea,
.mn-body.woocommerce #reviews #review_form #respond input[type="text"],
.mn-body.woocommerce #reviews #review_form #respond input[type="email"] {
width: 100%;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
background: var(--white);
padding: 0.7rem 1rem;
font-family: inherit;
font-size: 1rem;
color: var(--ink);
outline: none;
transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.mn-body.woocommerce #reviews #review_form #respond textarea:focus,
.mn-body.woocommerce #reviews #review_form #respond input:focus {
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(253, 107, 3, 0.2);
}
/* Related / up-sell products grid heading. */
.mn-body.woocommerce .related > h2,
.mn-body.woocommerce .upsells > h2,
.mn-body.woocommerce .cross-sells > h2 {
font-size: clamp(1.5rem, 3vw, 1.875rem);
font-weight: 900;
letter-spacing: -0.01em;
color: var(--ink);
margin-bottom: 1.5rem;
}
.mn-body.woocommerce .related,
.mn-body.woocommerce .upsells {
grid-column: 1 / -1;
margin-top: 1rem;
}
/* -------------------------------------------------------------------------
6. Cart (.woocommerce-cart)
------------------------------------------------------------------------- */
.mn-body.woocommerce table.shop_table {
width: 100%;
border: 1px solid var(--line);
border-radius: var(--radius);
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
background: var(--white);
box-shadow: var(--shadow-soft);
margin-bottom: 1.5rem;
}
.mn-body.woocommerce table.shop_table th {
padding: 0.9rem 1rem;
background: var(--paper);
color: var(--ink);
font-weight: 800;
font-size: 0.9rem;
text-align: start;
border-bottom: 1px solid var(--line);
}
.mn-body.woocommerce table.shop_table td {
padding: 1rem;
border-top: 1px solid var(--line);
color: var(--ink-700);
vertical-align: middle;
}
.mn-body.woocommerce table.shop_table .product-thumbnail img {
width: 4rem;
height: 4rem;
object-fit: cover;
border-radius: var(--radius-sm);
}
.mn-body.woocommerce table.cart .product-name a {
font-weight: 700;
color: var(--ink);
}
.mn-body.woocommerce table.cart .product-name a:hover {
color: var(--brand);
}
/* Remove ("x") button in the cart. */
.mn-body.woocommerce table.cart a.remove {
display: grid;
place-items: center;
width: 1.6rem;
height: 1.6rem;
border-radius: 50%;
color: var(--ink-500) !important;
background: var(--paper);
font-weight: 700;
line-height: 1;
transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.mn-body.woocommerce table.cart a.remove:hover {
background: var(--brand);
color: var(--white) !important;
}
/* Coupon row. */
.mn-body.woocommerce .cart .actions .coupon {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
}
.mn-body.woocommerce .cart .actions .coupon label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
.mn-body.woocommerce .cart .actions .coupon input#coupon_code {
width: auto;
min-width: 12rem;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
background: var(--white);
padding: 0.7rem 1rem;
font-family: inherit;
font-size: 1rem;
color: var(--ink);
outline: none;
transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.mn-body.woocommerce .cart .actions .coupon input#coupon_code:focus {
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(253, 107, 3, 0.2);
}
/* Cart totals card. */
.mn-body.woocommerce .cart-collaterals .cart_totals,
.mn-body.woocommerce-cart .cart-collaterals .cart_totals {
float: none;
width: 100%;
}
.mn-body.woocommerce .cart_totals h2 {
font-size: 1.4rem;
font-weight: 800;
color: var(--ink);
margin-bottom: 1rem;
}
.mn-body.woocommerce .cart_totals table.shop_table {
box-shadow: none;
}
.mn-body.woocommerce .cart_totals .order-total .amount,
.mn-body.woocommerce .cart_totals .order-total th {
font-size: 1.15rem;
font-weight: 900;
color: var(--ink);
}
.mn-body.woocommerce .cart_totals .checkout-button {
display: flex;
width: 100%;
margin-top: 1rem;
padding: 0.9rem 1.5rem;
font-size: 1rem;
}
/* -------------------------------------------------------------------------
7. Checkout (.woocommerce-checkout)
------------------------------------------------------------------------- */
.mn-body.woocommerce-checkout .col2-set,
.mn-body.woocommerce-checkout #customer_details {
margin-bottom: 1.5rem;
}
.mn-body.woocommerce-checkout #customer_details .col-1,
.mn-body.woocommerce-checkout #customer_details .col-2 {
float: none;
width: auto;
}
.mn-body.woocommerce form .form-row,
.mn-body.woocommerce-checkout .form-row {
display: flex;
flex-direction: column;
margin: 0 0 1rem;
padding: 0;
}
.mn-body.woocommerce form .form-row label,
.mn-body.woocommerce-checkout .form-row label {
margin-bottom: 0.375rem;
font-size: 0.9rem;
font-weight: 600;
color: var(--ink);
}
.mn-body.woocommerce form .form-row .required {
color: var(--brand-600);
border: 0;
}
.mn-body.woocommerce form .form-row input.input-text,
.mn-body.woocommerce form .form-row textarea,
.mn-body.woocommerce-checkout .form-row input.input-text,
.mn-body.woocommerce-checkout .form-row textarea,
.mn-body.woocommerce form .form-row select,
.mn-body.woocommerce .select2-container .select2-selection {
width: 100%;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
background: var(--white);
padding: 0.75rem 1rem;
font-family: inherit;
font-size: 1rem;
color: var(--ink);
outline: none;
transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.mn-body.woocommerce form .form-row input.input-text::placeholder,
.mn-body.woocommerce-checkout .form-row input.input-text::placeholder {
color: var(--ink-500);
}
.mn-body.woocommerce form .form-row input.input-text:focus,
.mn-body.woocommerce form .form-row textarea:focus,
.mn-body.woocommerce-checkout .form-row input.input-text:focus,
.mn-body.woocommerce form .form-row select:focus {
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(253, 107, 3, 0.2);
}
/* Match the select2 dropdown (WooCommerce country/state picker) to the
field height + focus ring. */
.mn-body.woocommerce .select2-container--default .select2-selection--single {
height: auto;
}
.mn-body.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 1.5;
color: var(--ink);
padding: 0;
}
.mn-body.woocommerce .select2-dropdown {
border-color: var(--line-strong);
}
.mn-body.woocommerce .select2-container--default .select2-results__option--highlighted[aria-selected] {
background: var(--brand);
}
.mn-body.woocommerce-checkout .form-row.woocommerce-invalid input.input-text {
border-color: #d63638;
}
/* Order review card. */
.mn-body.woocommerce-checkout #order_review_heading,
.mn-body.woocommerce-checkout h3#order_review_heading {
font-size: 1.4rem;
font-weight: 800;
color: var(--ink);
margin-bottom: 1rem;
}
.mn-body.woocommerce-checkout #order_review {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-soft);
padding: 1.5rem;
}
.mn-body.woocommerce-checkout #order_review table.shop_table {
border: 0;
box-shadow: none;
margin-bottom: 1rem;
}
.mn-body.woocommerce-checkout #order_review .order-total th,
.mn-body.woocommerce-checkout #order_review .order-total .amount {
font-size: 1.15rem;
font-weight: 900;
color: var(--ink);
}
/* Payment method block. */
.mn-body.woocommerce-checkout #payment {
background: var(--paper);
border-radius: var(--radius);
}
.mn-body.woocommerce-checkout #payment ul.payment_methods {
border-bottom: 1px solid var(--line);
padding: 1rem;
list-style: none;
margin: 0;
}
.mn-body.woocommerce-checkout #payment ul.payment_methods li {
margin-bottom: 0.5rem;
}
.mn-body.woocommerce-checkout #payment div.payment_box {
background: var(--white);
border-radius: var(--radius-sm);
color: var(--ink-700);
font-size: 0.9rem;
}
.mn-body.woocommerce-checkout #payment div.payment_box::before {
border-bottom-color: var(--white);
}
.mn-body.woocommerce-checkout #payment .place-order {
padding: 1rem;
}
.mn-body.woocommerce-checkout #payment #place_order {
display: block;
width: 100%;
padding: 0.95rem 1.5rem;
font-size: 1.05rem;
}
/* -------------------------------------------------------------------------
8. My account (.woocommerce-account)
------------------------------------------------------------------------- */
.mn-body.woocommerce-account .woocommerce-MyAccount-navigation {
float: none;
width: 100%;
margin-bottom: 1.5rem;
}
.mn-body.woocommerce-account .woocommerce-MyAccount-navigation ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.mn-body.woocommerce-account .woocommerce-MyAccount-navigation li {
margin: 0;
}
.mn-body.woocommerce-account .woocommerce-MyAccount-navigation li a {
display: inline-block;
padding: 0.5rem 1rem;
border-radius: var(--radius-pill);
border: 1px solid var(--line);
background: var(--white);
color: var(--ink-700);
font-weight: 700;
font-size: 0.9rem;
}
.mn-body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
border-color: var(--brand);
color: var(--brand);
}
.mn-body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
background: var(--brand);
border-color: var(--brand);
color: var(--white);
}
.mn-body.woocommerce-account .woocommerce-MyAccount-content {
float: none;
width: 100%;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-soft);
padding: 1.5rem;
color: var(--ink-700);
line-height: 1.7;
}
.mn-body.woocommerce-account .woocommerce-MyAccount-content h2,
.mn-body.woocommerce-account .woocommerce-MyAccount-content h3 {
color: var(--ink);
font-weight: 800;
}
/* Login / register forms on the account page. */
.mn-body.woocommerce-account .woocommerce form.login,
.mn-body.woocommerce-account .woocommerce form.register,
.mn-body.woocommerce .woocommerce form.login,
.mn-body.woocommerce form.lost_reset_password {
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--white);
box-shadow: var(--shadow-soft);
padding: 1.5rem;
}
.mn-body.woocommerce form.login .form-row input.input-text,
.mn-body.woocommerce form.register .form-row input.input-text {
width: 100%;
}
/* Addresses cards in the account dashboard. */
.mn-body.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.25rem;
}
.mn-body.woocommerce-account .woocommerce-Address-title h3 {
font-weight: 800;
color: var(--ink);
}
/* -------------------------------------------------------------------------
9. Notices (.woocommerce-message / -info / -error)
------------------------------------------------------------------------- */
.mn-body .woocommerce-message,
.mn-body .woocommerce-info,
.mn-body .woocommerce-error,
.mn-body .woocommerce-noreviews,
.mn-body.woocommerce .woocommerce-message,
.mn-body.woocommerce .woocommerce-info,
.mn-body.woocommerce .woocommerce-error {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1rem;
margin: 0 0 1.5rem;
padding: 1rem 1.25rem;
border: 1px solid var(--line);
border-inline-start: 4px solid var(--brand);
border-radius: var(--radius-sm);
background: var(--brand-50);
color: var(--ink);
font-weight: 600;
list-style: none;
}
.mn-body .woocommerce-message::before,
.mn-body .woocommerce-info::before,
.mn-body .woocommerce-error::before {
position: static;
margin: 0;
font-size: 1rem;
}
/* Success (cart additions, order received). Greenish accent. */
.mn-body .woocommerce-message {
background: #ECFDF3;
border-color: rgba(22, 101, 52, 0.18);
border-inline-start-color: #16A34A;
color: #14532D;
}
.mn-body .woocommerce-message::before {
color: #16A34A;
}
.mn-body .woocommerce-message a.button,
.mn-body .woocommerce-message a.wc-forward {
margin-inline-start: auto;
}
/* Info (e.g. empty cart, login prompt). Brand-tinted. */
.mn-body .woocommerce-info {
background: var(--brand-50);
border-color: rgba(253, 107, 3, 0.2);
border-inline-start-color: var(--brand);
color: var(--ink);
}
.mn-body .woocommerce-info::before {
color: var(--brand);
}
/* Error. Readable red without shouting. */
.mn-body .woocommerce-error {
background: #FEF2F2;
border-color: rgba(214, 54, 56, 0.25);
border-inline-start-color: #D63638;
color: #7F1D1D;
flex-direction: column;
align-items: flex-start;
}
.mn-body .woocommerce-error li {
margin: 0;
}
.mn-body .woocommerce-error::before {
color: #D63638;
}
/* Form-level validation list under fields. */
.mn-body.woocommerce .woocommerce-NoticeGroup ul.woocommerce-error {
margin-bottom: 1.5rem;
}
/* Store notice / demo bar. */
.mn-body .woocommerce-store-notice,
.mn-body p.demo_store {
background: var(--ink);
color: var(--white);
}
.mn-body .woocommerce-store-notice a {
color: var(--brand);
}
/* -------------------------------------------------------------------------
9b. Product meta tidy-up + cart thumbnail fallback
------------------------------------------------------------------------- */
/* Hide the empty "SKU: N/A" line. WooCommerce wraps the SKU in
.sku_wrapper > .sku; when there is no SKU it prints the text "N/A". We hide
the whole wrapper so the meta block doesn't show a meaningless line. (The
"Uncategorized" category link is stripped server-side in functions.php so the
real categories still show; this CSS only handles the SKU.) */
.mn-body.woocommerce div.product .product_meta .sku_wrapper {
display: none;
}
/* Cart / mini-cart line thumbnails fall back to the same tinted box when the
image is the placeholder or broken, so the cart matches the catalog. */
.mn-body.woocommerce table.shop_table .product-thumbnail img {
background-color: var(--brand-50);
min-height: 4rem;
}
.mn-body.woocommerce table.shop_table .product-thumbnail img.woocommerce-placeholder {
object-fit: contain;
padding: 0.5rem;
opacity: 0.35;
}
/* -------------------------------------------------------------------------
9c. Mobile horizontal-overflow guard
A single product page on this install overflows ~6px at 390px (scrollWidth
396). The usual offenders on a Woo single product are the variations /
attribute tables (which establish a wide min-content box), the related-
products grid, and the customer-reviews widget. Rather than hunt one element,
we constrain every wide child of the product + tabs to the content width and
clip stray horizontal overflow on the product wrapper. Vertical scroll is
untouched (overflow-y stays visible via the x-only clip). clip is used over
hidden so it never creates a scroll container that would trap sticky/anchored
children.
------------------------------------------------------------------------- */
.mn-body.woocommerce div.product,
.mn-body.woocommerce div.product .summary,
.mn-body.woocommerce div.product .entry-summary,
.mn-body.woocommerce div.product .woocommerce-tabs,
.mn-body.woocommerce div.product .related,
.mn-body.woocommerce div.product .upsells {
max-width: 100%;
overflow-x: clip;
}
.mn-body.woocommerce div.product table,
.mn-body.woocommerce div.product .woocommerce-tabs .panel,
.mn-body.woocommerce div.product .woocommerce-tabs .panel table,
.mn-body.woocommerce div.product .cr-reviews,
.mn-body.woocommerce div.product [class*="cr-"],
.mn-body.woocommerce div.product img,
.mn-body.woocommerce div.product iframe {
max-width: 100%;
}
/* Tables that genuinely hold wide content (additional-info attributes) may
still need to scroll rather than clip their data; let them scroll inside the
panel instead of pushing the page wide. */
.mn-body.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes {
display: block;
overflow-x: auto;
}
/* -------------------------------------------------------------------------
10. Responsive
------------------------------------------------------------------------- */
@media (min-width: 640px) {
.mn-body.woocommerce ul.products,
.mn-body.woocommerce-page ul.products {
grid-template-columns: repeat(2, 1fr);
}
.mn-body.woocommerce .cart .actions .coupon input#coupon_code {
min-width: 14rem;
}
}
@media (min-width: 1024px) {
.mn-body.woocommerce ul.products,
.mn-body.woocommerce-page ul.products {
grid-template-columns: repeat(3, 1fr);
}
/* Shop pages that ship a sidebar widget area: products keep 3 columns,
the term list sits alongside if the active theme prints one. This is a
safe default since we are not forcing a sidebar layout ourselves. */
/* Single product: gallery beside the summary. */
.mn-body.woocommerce div.product {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
align-items: start;
}
/* Checkout: customer details beside the order review. */
.mn-body.woocommerce-checkout form.checkout.woocommerce-checkout {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: 2.5rem;
align-items: start;
}
.mn-body.woocommerce-checkout #customer_details {
grid-column: 1;
}
.mn-body.woocommerce-checkout #order_review_heading,
.mn-body.woocommerce-checkout #order_review {
grid-column: 2;
}
.mn-body.woocommerce-checkout #customer_details .col2-set {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 1.5rem;
}
/* Cart totals: float the totals card to a comfortable width. */
.mn-body.woocommerce-cart .cart-collaterals .cart_totals {
max-width: 26rem;
margin-inline-start: auto;
}
/* My account: nav rail beside the panel. */
.mn-body.woocommerce-account .woocommerce {
display: grid;
grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
gap: 2rem;
align-items: start;
}
.mn-body.woocommerce-account .woocommerce-MyAccount-navigation ul {
flex-direction: column;
}
.mn-body.woocommerce-account .woocommerce-MyAccount-navigation li a {
display: block;
text-align: start;
}
}