/* =========================================================================
 * CatalogoSorriso — Product cards.
 *
 * GRID view: defers to Shoptimizer parent on desktop; on mobile (≤600px) the
 *   add-to-cart button is restyled (PS-prod green gradient) — see grid button rule.
 * LIST view (when nc-grid-list-view plugin adds `.list` to ul.products):
 *   PS-prod parity — horizontal card with image left + info right + green
 *   add-to-cart button at bottom-right.
 * ========================================================================= */

/* nc-grid-list-view plugin nests title/price/button inside .woocommerce-image__wrapper,
 * which has position:relative — this captures the absolutely-positioned add-to-cart button
 * so it resolves bottom:0 against the wrapper (ending at price line) instead of li.product
 * (40px padding-bottom slot at the very bottom). Strip position:relative so the button
 * falls through to li.product and uses its reserved padding-bottom space. */
/* Apply to ALL pages (archive + single-product related/upsells/cross-sells), not just cs-classic */
ul.products li.product .woocommerce-image__wrapper {
	position: static !important;
	transform: none !important;
}
ul.products li.product:hover .woocommerce-image__wrapper,
ul.products li.product:focus-within .woocommerce-image__wrapper {
	transform: none !important;
}

/* CGKit override: plugin commercegurus-commercekit aggiunge classes .ckit-hide-cta
 * + .cgkit-swatch-hover su variable products + tutti dove CGKit nasconde le CTA varianti.
 * CGKit poi azzera padding-bottom (`padding-bottom: 0`), facendo collassare lo slot 40px
 * di Shoptimizer dove il button hover-reveal deve atterrare. Senza padding, button (absolute
 * bottom:0) overlapa price/title. Restoring 40px slot. */
@media (min-width: 993px) {
	body ul.products li.product.ckit-hide-cta:not(.product-category),
	body ul.products li.product:not(.product-category) {
		padding-bottom: 40px !important;
		margin-bottom: 20px !important;
	}
}

/* HOVER STACKING FIX:
 * Shoptimizer parent renders a white ::before overlay on li.product:hover (visibility/opacity
 * transition). With wrapper position:static, wrapper is a NON-positioned descendant and ::before
 * is POSITIONED — so ::before paints AFTER wrapper content, covering image+title+price.
 *
 * Fix: establish a stacking context on li.product (z-index:0 + isolation) and push ::before to
 * z-index:-1 so it stays behind ALL descendant content but is contained within li (no escape). */
ul.products li.product {
	z-index: 0;
	isolation: isolate;
}
ul.products li.product::before {
	z-index: -1 !important;
}

/* ===== GRID VIEW — brand row =====
 * Brand `<p class="cs-list-brand">` is rendered by `cs_render_loop_brand()` inside
 * `.woocommerce-card__header` (functions.php:1410). In list view it's styled below
 * inside @media; here we cover the DEFAULT grid view (all viewports).
 * Green #008000 uppercase bold, slim line above title. */
body.cs-classic ul.products:not(.list) li.product .cs-list-brand {
	font-family: var(--cs-font), Arial, sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: #008000;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	line-height: 1.2;
	margin: 0 0 4px 0;
	padding: 0;
}
body.cs-classic ul.products:not(.list) li.product .cs-list-brand a {
	color: inherit;
	text-decoration: none;
}
body.cs-classic ul.products:not(.list) li.product .cs-list-brand a:hover {
	text-decoration: underline;
}

/* ===== GRID VIEW — price discount (simple + variable on sale) =====
 * Markup (from cs_loop_variable_price_html / cs_loop_simple_price_html):
 *   <ins>current</ins><span class="cs-price-discount"><del>regular</del><span class="onsale">-X%</span></span>
 * Display: current price prominent → old price strike + yellow -X% badge inline below.
 */
body.cs-classic ul.products:not(.list) li.product .price ins {
	text-decoration: none;
	font-weight: 600;
	color: #333;
	display: block;
}
body.cs-classic ul.products:not(.list) li.product .price .cs-price-discount {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
}
body.cs-classic ul.products:not(.list) li.product .price .cs-price-discount del {
	color: #6f6f6f;
	font-size: 0.85em;
	font-weight: 400;
	text-decoration: line-through;
}
body.cs-classic ul.products:not(.list) li.product .price .onsale {
	position: static !important;
	top: auto !important;
	right: auto !important;
	left: auto !important;
	font-family: var(--cs-font-display);
	font-size: 13px;
	font-weight: 900;
	/* `!important` required — parent Shoptimizer + WC core both ship `.onsale`
	 * background/color/border with `!important`, which would otherwise win. */
	color: #f6b30f !important;
	background: #fff !important;
	border: 3px solid #f6b30f !important;
	border-radius: 6px;
	padding: 1px 6px;
	text-transform: uppercase;
	display: inline-block !important;
	line-height: 1.2;
}
/* Hide Shoptimizer parent's corner sale-flash on grid cards (we render inline next to old price).
 * Two variants ship: `.onsale` (WC core flash hook) and `.sale-item.product-label.type-bubble`
 * (Shoptimizer's own product label). Suppress both so only our inline `.cs-price-discount > .onsale` shows. */
body.cs-classic ul.products:not(.list) li.product > .onsale,
body.cs-classic ul.products:not(.list) li.product .woocommerce-image__wrapper > .onsale,
body.cs-classic ul.products:not(.list) li.product .product-label.type-bubble,
body.cs-classic ul.products:not(.list) li.product .sale-item.product-label {
	display: none !important;
}

/* ===== GRID VIEW — add-to-cart button (MOBILE ONLY) =====
 * PS-prod green gradient + 8px rounded + always-visible full-width, scoped to
 * mobile (≤600px). DESKTOP is intentionally left untouched: the parent's
 * hover-reveal button styling broke when restyled (Andrea 2026-06-01), so above
 * 600px Shoptimizer's original button is preserved as-is. Grid only (:not(.list)). */
@media (max-width: 600px) {
	body.cs-classic ul.products:not(.list) li.product a.button {
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100% !important;
		height: auto !important;
		min-height: 40px;
		padding: 10px 16px !important;
		line-height: 1.2 !important;
		margin-top: 10px;
		background: linear-gradient(to bottom, #69d381 0%, #43b155 100%) !important;
		color: #fff !important;
		border: 1px solid var(--cs-green-dark) !important;
		border-radius: 8px !important;
		font-weight: 700 !important;
		text-transform: none !important;
		text-decoration: none !important;
		bottom: auto !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
	}
	body.cs-classic ul.products:not(.list) li.product a.button:hover {
		background: linear-gradient(to bottom, #43b155 0%, #138125 100%) !important;
	}
}

/* ===== GRID VIEW — desktop card padding + centered hover button =====
 * Desktop (≥993px, same breakpoint as the parent's hover-CTA slot). Two asks
 * (Andrea 2026-06-01): (1) give the card interior horizontal padding so content
 * isn't flush to the edges; (2) center the hover-reveal add-to-cart button —
 * parent anchors it `left:0; right:30px` (off-center, glued to the left edge).
 * The button is position:absolute against li's padding box, so symmetric
 * left/right insets center it regardless of li's own padding. Grid only. */
@media (min-width: 993px) {
	body.cs-classic ul.products:not(.list) li.product {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
	body.cs-classic ul.products:not(.list) li.product a.button {
		left: 16px !important;
		right: 16px !important;
		width: auto !important;
		/* Narrow card (~153px) can't fit "Aggiungi al carrello" on one line at the
		 * parent's 40px fixed height → label was clipped. Let it wrap and center
		 * both axes; keep the parent's green gradient + radius untouched. */
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		text-align: center !important;
		white-space: normal !important;
		line-height: 1.25 !important;
		height: auto !important;
		min-height: 40px !important;
		padding: 7px 8px !important;
	}
	/* Wishlist heart: bigger glyph only (parent position left unchanged). */
	body.cs-classic ul.products:not(.list) li.product .commercekit-wishlist a,
	body.cs-classic ul.products:not(.list) li.product .commercekit-wishlist em.cg-wishlist,
	body.cs-classic ul.products:not(.list) li.product .commercekit-wishlist em.cg-wishlist::before {
		font-size: 18px !important;
		line-height: 1 !important;
	}
}

/* ===== SINGLE PRODUCT (PDP) =====
 * Parent layout: `.product-details-wrapper` block container with float-based
 * children — `.images` left + `.summary.entry-summary` right. Parent reserves
 * ~62% to image and ~38% to summary. We force 50/50 split (PS-prod parity).
 * Brand row rendered by `cs_render_single_product_brand` (functions.php).
 * Single-product page lacks `cs-classic` body class (header.php line 26) — scope to .single-product. */
@media (min-width: 901px) {
	body.single-product .product-details-wrapper > .images,
	body.single-product div.product > .images {
		width: 50% !important;
		float: left !important;
	}
	body.single-product .product-details-wrapper > .summary.entry-summary,
	body.single-product div.product > .summary.entry-summary {
		width: 50% !important;
		float: right !important;
		padding-left: 24px;
		box-sizing: border-box;
	}
}
/* Thin gray border around main product image and gallery thumbs */
body.single-product .woocommerce-product-gallery__image,
body.single-product .woocommerce-product-gallery__image img,
body.single-product .images .swiper-slide img,
body.single-product .images .cg-psp-gallery img,
body.single-product .images .flex-control-thumbs img {
	border: 1px solid #d8d8d8 !important;
	box-sizing: border-box;
}
/* Brand row before single product title */
.cs-single-brand {
	font-family: var(--cs-font), Arial, sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: #008000;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	line-height: 1.2;
	margin: 0 0 6px 0;
}
.cs-single-brand a {
	color: inherit;
	text-decoration: none;
}
.cs-single-brand a:hover {
	text-decoration: underline;
}

/* ===== CART — brand row above product name =====
 * Markup (cs_cart_item_prepend_brand): prepends `<span class="cs-cart-brand">BRAND</span>`
 * before the cart-item name link. Applies to Shoptimizer slide-out drawer + main cart page. */
.cs-cart-brand {
	display: block;
	font-family: var(--cs-font), Arial, sans-serif;
	/* Match cart item title size — Andrea 2026-05-25 "stesso font-size del
	 * titolo prodotto sotto". Parent .product-name td has its own 13px, so
	 * `inherit` would shrink the brand; set explicit 16px to match the
	 * title <a> (which Shoptimizer also pegs at 16px). */
	font-size: 16px;
	font-weight: 700;
	color: #008000;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	line-height: 1.3;
	margin: 0 0 4px 0;
}
/* Mini-cart drawer (#shoptimizerCartDrawer) has tighter typography — keep
 * brand readable but match drawer title size (14px in Shoptimizer drawer). */
#shoptimizerCartDrawer .cs-cart-brand,
.widget_shopping_cart .cs-cart-brand {
	font-size: 14px;
}

/* ===== CART DRAWER — restore proper padding on the "Pagamento" button =====
 * Shoptimizer side-drawer (#shoptimizerCartDrawer) ships the WC mini-cart
 * checkout button with `padding: 0 18px; height: 32px;` which crops the
 * 16px label visually (Andrea screenshot 2026-05-26 16:58). Restore
 * comfortable vertical breathing room + ensure the button stays as a
 * solid CTA block.
 */
#shoptimizerCartDrawer .woocommerce-mini-cart__buttons .button.checkout,
#shoptimizerCartDrawer .woocommerce-mini-cart__buttons a.checkout.wc-forward {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px 20px;
	min-height: 48px;
	height: auto;
	line-height: 1.3;
	font-weight: 600;
}

@media (min-width: 601px) {

	/* ===== LIST VIEW — PS-prod parity =====
	 * Layout: image left 150px • info middle 1fr • actions right ~200px
	 * Separator: top border 1px #ccc between rows (no box around each)
	 * Brand: green #008000 uppercase bold above title
	 * Title: dark #3a3939, regular weight, multi-line
	 * Price: Open Sans 600 21px #333
	 * Old price: #6f6f6f strike 17px
	 * Badge -10%: white bg + yellow #f6b30f border 4px
	 * Button: green gradient rounded with FA icon (cart or check)
	 */

	body.cs-classic ul.products.list {
		display: flex !important;
		flex-direction: column;
		gap: 0;
		padding: 0 !important;
		margin: 0 0 24px !important;
		list-style: none;
		width: 100%;
		background: transparent;
	}

	body.cs-classic ul.products.list li.product {
		display: block !important;
		padding: 18px 0 !important;
		margin: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0;
		border: none !important;
		border-top: 1px solid #ccc !important;
		background: transparent;
		float: none !important;
		clear: none !important;
		position: relative;
		box-shadow: none !important;
		transition: background 0.12s ease;
		box-sizing: border-box !important;
	}
	/* The .woocommerce-image__wrapper is the actual content host for list mode
	 * (plugin nc-grid-list-view nests image + content inside it). Outer grid: 25% image
	 * + 75% content. The content area is itself a sub-grid (50%/25%) so price + button
	 * (nested inside .nc-list-content-product) can align to the right column. */
	body.cs-classic ul.products.list li.product .woocommerce-image__wrapper {
		display: grid !important;
		grid-template-columns: 25% 1fr !important;
		grid-template-rows: auto !important;
		gap: 0 !important;
		align-items: start !important;
		padding: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		aspect-ratio: auto !important;
		background: transparent !important;
		border: none !important;
		box-sizing: border-box !important;
	}
	/* Image column 1 */
	body.cs-classic ul.products.list li.product .nc-list-content-image,
	body.cs-classic ul.products.list li.product .woocommerce-image__wrapper > a:first-of-type {
		grid-column: 1;
		grid-row: 1;
		width: 100%;
		max-width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: transparent;
		padding: 15px;
		overflow: hidden;
		text-align: center;
		box-sizing: border-box;
	}
	/* Card-header (brand origin via PHP — JS moves brand to content; hide empty header) */
	body.cs-classic ul.products.list li.product .woocommerce-card__header {
		display: none !important;
	}
	/* Content col 2 — internal grid: brand+title (col 1) | price+button (col 2) */
	body.cs-classic ul.products.list li.product .nc-list-content-product {
		grid-column: 2;
		grid-row: 1;
		display: grid !important;
		grid-template-columns: 1fr auto !important;
		grid-template-rows: auto auto auto !important;
		column-gap: 16px;
		row-gap: 4px;
		align-items: start !important;
		justify-self: stretch !important;
		padding: 15px !important;
		text-align: left;
		float: none !important;
		width: 100% !important;
		box-sizing: border-box;
	}
	/* Image cell: kill plugin nc-list-content-image float too */
	body.cs-classic ul.products.list li.product .nc-list-content-image {
		float: none !important;
	}
	/* Brand row 1 col 1 */
	body.cs-classic ul.products.list li.product .nc-list-content-product .cs-list-brand {
		grid-column: 1;
		grid-row: 1;
	}
	/* Title row 2 col 1 */
	body.cs-classic ul.products.list li.product .nc-list-content-product .woocommerce-loop-product__title {
		grid-column: 1 !important;
		grid-row: 2 !important;
		align-self: start;
	}
	/* Price col 2 row 1 (right-aligned) */
	body.cs-classic ul.products.list li.product .nc-list-content-product .price {
		grid-column: 2 !important;
		grid-row: 1 / span 2 !important;
		justify-self: end !important;
		align-self: start !important;
		text-align: right !important;
	}
	/* Button col 2 row 3 (right-aligned) */
	body.cs-classic ul.products.list li.product .nc-list-content-product a.button {
		grid-column: 2 !important;
		grid-row: 3 !important;
		justify-self: end !important;
		align-self: start !important;
	}
	body.cs-classic ul.products.list li.product:last-child {
		border-bottom: 1px solid #ccc !important;
	}
	body.cs-classic ul.products.list li.product:hover {
		background: #fafafa !important;
	}

	/* Image inside cell — fills container, contain object-fit */
	body.cs-classic ul.products.list li.product .nc-list-content-image img,
	body.cs-classic ul.products.list li.product .woocommerce-image__wrapper img,
	body.cs-classic ul.products.list li.product img.attachment-woocommerce_thumbnail {
		max-width: 100%;
		max-height: 220px;
		width: auto;
		height: auto;
		object-fit: contain;
		display: block;
		margin: 0 auto;
	}

	/* Brand line: green uppercase bold (cs-list-brand from PHP hook, fallback product__categories) */
	body.cs-classic ul.products.list li.product .cs-list-brand {
		font-family: var(--cs-font), Arial, sans-serif;
		font-size: 15px;
		font-weight: 700;
		color: #008000;
		text-transform: uppercase;
		letter-spacing: 0.4px;
		margin: 0;
		line-height: 1.2;
	}
	body.cs-classic ul.products.list li.product .cs-list-brand a {
		color: inherit;
		text-decoration: none;
	}
	body.cs-classic ul.products.list li.product .cs-list-brand a:hover {
		text-decoration: underline;
	}
	body.cs-classic ul.products.list li.product .product__categories {
		display: none !important;
	}

	/* Title — regular weight, dark #3a3939 */
	body.cs-classic ul.products.list li.product .woocommerce-loop-product__title,
	body.cs-classic ul.products.list li.product h2.woocommerce-loop-product__title,
	body.cs-classic ul.products.list li.product .nc-loop-title {
		font-family: var(--cs-font), Arial, sans-serif !important;
		font-size: 17px !important;
		font-weight: 400 !important;
		line-height: 1.35 !important;
		color: #3a3939 !important;
		text-transform: none !important;
		margin: 0 !important;
		padding: 0 !important;
		-webkit-line-clamp: unset !important;
		display: block !important;
	}
	body.cs-classic ul.products.list li.product a:hover .woocommerce-loop-product__title {
		color: var(--cs-green-dark) !important;
	}

	/* Hide excerpts in list view (exclude .cs-list-brand which is a <p>) */
	body.cs-classic ul.products.list li.product .nc-list-grid-view-excerpt,
	body.cs-classic ul.products.list li.product .nc-list-content-product p:not(.cs-list-brand) {
		display: none !important;
	}

	/* Price — col 2 row 1, big Open Sans 600 21px #333 */
	body.cs-classic ul.products.list li.product .nc-list-content-product .price {
		font-family: var(--cs-font-display);
		font-size: 21px;
		font-weight: 600;
		line-height: 1.25;
		color: #333;
		margin: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2px;
		text-align: center;
	}
	body.cs-classic ul.products.list li.product .price del {
		color: #6f6f6f !important;
		font-weight: 400 !important;
		font-size: 17px !important;
		text-decoration: line-through !important;
		order: 2;
	}
	body.cs-classic ul.products.list li.product .price ins {
		text-decoration: none !important;
		order: 1;
		color: #333 !important;
	}

	/* Button — col 2 row 2, green gradient rounded PS prod 31px h / 8px radius */
	body.cs-classic ul.products.list li.product .nc-list-content-product a.button {
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: auto !important;
		min-width: 156px;
		max-width: 100%;
		height: 31px !important;
		padding: 0 16px !important;
		margin-top: 6px;
		background: linear-gradient(to bottom, #69d381 0%, #43b155 100%) !important;
		color: #fff !important;
		border: 1px solid var(--cs-green-dark) !important;
		border-radius: 8px !important;
		font-family: var(--cs-font), Arial, sans-serif !important;
		font-size: 14px !important;
		font-weight: 700 !important;
		text-transform: none !important;
		letter-spacing: 0.2px;
		white-space: nowrap;
		text-decoration: none !important;
		bottom: auto !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
	}
	body.cs-classic ul.products.list li.product .nc-list-content-product a.button:hover {
		background: linear-gradient(to bottom, #43b155 0%, #138125 100%) !important;
	}
	/* Cart icon for add-to-cart button */
	body.cs-classic ul.products.list li.product a.button.add_to_cart_button::before,
	body.cs-classic ul.products.list li.product a.button.ajax_add_to_cart::before {
		content: "";
		display: inline-block;
		width: 16px;
		height: 16px;
		background: currentColor;
		-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 4h-2l-1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2h-11.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1h-14.31l-.94-2zm0 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/></svg>") no-repeat center / contain;
		        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 4h-2l-1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2h-11.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1h-14.31l-.94-2zm0 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/></svg>") no-repeat center / contain;
	}
	/* Check icon for variable product "Vedi le opzioni" */
	body.cs-classic ul.products.list li.product a.button.product_type_variable::before {
		content: "";
		display: inline-block;
		width: 16px;
		height: 16px;
		background: currentColor;
		-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/></svg>") no-repeat center / contain;
		        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/></svg>") no-repeat center / contain;
	}

	/* Variable price discount row: ins (current) stacked above .cs-price-discount
	 * (del strike + -X% yellow badge inline) */
	body.cs-classic ul.products.list li.product .nc-list-content-product .price ins {
		text-decoration: none;
		font-weight: 600;
		font-size: 21px;
		color: #333;
		display: block;
		text-align: right;
		order: 1;
	}
	body.cs-classic ul.products.list li.product .nc-list-content-product .price .cs-price-discount {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		margin-top: 4px;
		justify-content: flex-end;
		order: 2;
	}
	body.cs-classic ul.products.list li.product .nc-list-content-product .price .cs-price-discount del {
		color: #6f6f6f;
		font-size: 17px;
		font-weight: 400;
		text-decoration: line-through;
	}

	/* Discount badge on price: WC outputs <span class="onsale"> in card; we position it
	 * inline next to old price with PS-prod yellow outlined badge style. */
	body.cs-classic ul.products.list li.product .onsale {
		position: static !important;
		top: auto !important;
		right: auto !important;
		left: auto !important;
		font-family: var(--cs-font-display);
		font-size: 14px;
		font-weight: 900;
		color: #f6b30f !important;
		background: #fff !important;
		border: 3px solid #f6b30f !important;
		border-radius: 6px;
		padding: 1px 6px;
		text-transform: uppercase;
		display: inline-block !important;
		line-height: 1.2;
		margin-left: 6px;
	}

	/* Hide hover overlay / wishlist / star rating in list view */
	body.cs-classic ul.products.list li.product::before {
		display: none !important;
	}
	body.cs-classic ul.products.list li.product .commercekit-wishlist {
		display: none !important;
	}
	body.cs-classic ul.products.list li.product .star-rating {
		display: none !important;
	}
}

/* Tablet/mobile list view (≤600px) — single-column stacked horizontal rows.
 * The CONTAINER must be forced to a single column first: Shoptimizer ships a
 * 2-col grid on ul.products that still matches when `.list` is present, so the
 * list collapses onto a 134px×134px grid (image ~22px, button squashed). Force
 * flex column + cancel residual grid-template-columns. The real content host is
 * .woocommerce-image__wrapper (plugin nests image + content there), so the row
 * grid lives on the WRAPPER (84px image + 1fr content), NOT on li.product — the
 * old fallback put the grid on li.product, where the actual content isn't. */
@media (max-width: 600px) {
	body.cs-classic ul.products.list,
	body.cs-classic ul.products.columns-4.list {
		display: flex !important;
		flex-direction: column !important;
		gap: 0 !important;
		grid-template-columns: none !important;
	}

	body.cs-classic ul.products.list li.product {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		margin: 0 !important;
		padding: 12px 8px !important;
		border-top: 1px solid #ccc !important;
		box-sizing: border-box !important;
	}
	body.cs-classic ul.products.list li.product:last-child {
		border-bottom: 1px solid #ccc !important;
	}

	/* Row host: image 84px left + content fills the rest */
	body.cs-classic ul.products.list li.product .woocommerce-image__wrapper {
		display: grid !important;
		grid-template-columns: 84px 1fr !important;
		gap: 12px !important;
		align-items: start !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
	}

	/* Image column */
	body.cs-classic ul.products.list li.product .nc-list-content-image,
	body.cs-classic ul.products.list li.product .woocommerce-image__wrapper > a:first-of-type {
		grid-column: 1;
		width: 100%;
		max-width: 84px;
		padding: 0 !important;
		float: none !important;
	}
	body.cs-classic ul.products.list li.product .nc-list-content-image img,
	body.cs-classic ul.products.list li.product .woocommerce-image__wrapper img,
	body.cs-classic ul.products.list li.product img.attachment-woocommerce_thumbnail {
		max-width: 84px;
		height: auto;
		object-fit: contain;
		display: block;
		margin: 0;
	}

	/* Content column — vertical stack, left aligned: brand → title → price → button */
	body.cs-classic ul.products.list li.product .nc-list-content-product {
		grid-column: 2;
		display: flex !important;
		flex-direction: column !important;
		gap: 4px !important;
		align-items: flex-start !important;
		text-align: left !important;
		padding: 0 !important;
		width: 100% !important;
		float: none !important;
	}

	/* Price block left-aligned (override desktop right-align) */
	body.cs-classic ul.products.list li.product .nc-list-content-product .price {
		align-items: flex-start !important;
		justify-self: start !important;
		text-align: left !important;
		margin: 0 !important;
	}
	body.cs-classic ul.products.list li.product .nc-list-content-product .price .cs-price-discount {
		justify-content: flex-start !important;
	}

	/* Button — auto width left-aligned, same green gradient/rounded as desktop list
	 * (restated: desktop list button rule lives in @media min-width:601px). */
	body.cs-classic ul.products.list li.product .nc-list-content-product a.button {
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		gap: 8px;
		justify-self: start !important;
		align-self: flex-start !important;
		width: auto !important;
		min-width: 140px;
		max-width: 100%;
		height: auto !important;
		min-height: 40px;
		padding: 10px 16px !important;
		margin-top: 6px;
		background: linear-gradient(to bottom, #69d381 0%, #43b155 100%) !important;
		color: #fff !important;
		border: 1px solid var(--cs-green-dark) !important;
		border-radius: 8px !important;
		font-family: var(--cs-font), Arial, sans-serif !important;
		font-size: 14px !important;
		font-weight: 700 !important;
		text-transform: none !important;
		white-space: nowrap;
		text-decoration: none !important;
		bottom: auto !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
	}
	body.cs-classic ul.products.list li.product .nc-list-content-product a.button:hover {
		background: linear-gradient(to bottom, #43b155 0%, #138125 100%) !important;
	}

	/* Hide excerpt / rating / wishlist in list view (parity with desktop list) */
	body.cs-classic ul.products.list li.product .nc-list-grid-view-excerpt,
	body.cs-classic ul.products.list li.product .star-rating,
	body.cs-classic ul.products.list li.product .commercekit-wishlist {
		display: none !important;
	}
}

/* Mobile single-product: full-page padding via #page (catches everything inside) */
@media (max-width: 600px) {
	body.single-product #page,
	body.single-product #content.site-content,
	body.single-product .site-main {
		padding-left: 4px !important;
		padding-right: 4px !important;
		box-sizing: border-box !important;
		overflow-x: hidden;
	}
	/* Neutralize bootstrap-style negative margins on row containers */
	body.single-product .row,
	body.single-product .col-full {
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* Mobile: drop the parent's 2rem top padding on the content/main wrapper.
 * Source: main.min.css `body:has(:not(.woocommerce-breadcrumb)) .site-content`
 * (+ the single-product .site-main variant) — redundant on mobile where the
 * custom breadcrumb already supplies the top spacing. Can't edit the parent
 * stylesheet, so override here. */
@media (max-width: 600px) {
	body.cs-classic .site-content,
	body.cs-classic .site-main,
	body.single-product .site-content,
	body.single-product .site-main {
		padding-top: 0 !important;
	}
	/* Top spacing above the breadcrumb (the 2rem .site-content padding was removed
	 * above). No border here — the pill draws its own top border now, so a wrap
	 * border-top would be a redundant second full-width line. */
	body.cs-classic .cs-breadcrumb-wrap,
	body.single-product .cs-breadcrumb-wrap {
		padding-top: 16px;
	}
}

/* ===== PDP wishlist link — heart icon to the LEFT of the label =====
 * The "full" (text) wishlist variant on the product page renders
 *   a.commercekit-save-wishlist > em.cg-wishlist + span.
 * CGKit ships `em.cg-wishlist { position:absolute; width:0 }` (meant for the card
 * overlay heart), which pulls the glyph out of the flex flow → the label fills the
 * whole link and the heart drops below it. Put the em back in flow so it sits
 * inline, left of the text, with a small gap. */
.commercekit-wishlist.full a.commercekit-save-wishlist {
	gap: 8px;
}
.commercekit-wishlist.full a.commercekit-save-wishlist em.cg-wishlist {
	position: static !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	height: auto !important;
	font-size: 18px !important;
}

/* Hide CGKit / WC variation swatches on ALL product cards site-wide
 * (archive, related, upsells, cross-sells, search results, widgets, etc.) */
li.product .variations_form,
li.product .cgkit-swatch-form,
li.product .variations,
li.product .cgkit-swatch,
li.product .reset_variations,
li.product .cgkit-as-single-atc-wrap,
li.product a.cgkit-as-single-atc,
.product-small .cgkit-swatch-form,
.product-small .cgkit-as-single-atc-wrap,
.related .product .cgkit-swatch-form,
.related .product .cgkit-as-single-atc-wrap,
.upsells .product .cgkit-swatch-form,
.upsells .product .cgkit-as-single-atc-wrap,
.cross-sells .product .cgkit-swatch-form,
.cross-sells .product .cgkit-as-single-atc-wrap {
	display: none !important;
}

/* =========================================================================
 * Products grid wrapper padding — replicates Tailwind `py-6 px-3`
 * (24px vertical / 12px horizontal). Targets `.columns-N` wrappers inside
 * WooCommerce archive content area.
 * Mobile (≤600px) excluded: padding dropped to reclaim full width for cards. */
@media (min-width: 601px) {
	body.cs-classic #primary [class*="columns-"] {
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}
}

/* =========================================================================
 * GRID VIEW — 4 products per row (issue 2026-0529-0002).
 * Parent theme defines no `ul.products.columns-4 li.product` width rule
 * (only ancestor `.columns-4 ul.products` + upsells/related), and forces a
 * 2-col CSS grid below 993px. WC's loop_shop_columns puts `columns-4` on the
 * UL itself, so we own the grid here. Uses CSS grid (mirrors parent <=992px
 * approach). List view (`ul.products.list`) untouched via :not(.list).
 * 4/row desktop (>=901px) · 3/row tablet (601-900px) · 2/row mobile (<=600px).
 * ========================================================================= */
@media (min-width: 901px) {
	body.cs-classic ul.products.columns-4:not(.list) {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 20px;
		row-gap: 30px;
		width: 100%;
		margin-left: 0;
	}
	body.cs-classic ul.products.columns-4:not(.list) li.product {
		width: 100%;
		float: none;
		margin: 0;
		padding-left: 0;
		padding-right: 0;
	}
}
@media (min-width: 601px) and (max-width: 900px) {
	body.cs-classic ul.products.columns-4:not(.list) {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 16px;
		row-gap: 24px;
		width: 100%;
		margin-left: 0;
	}
	body.cs-classic ul.products.columns-4:not(.list) li.product {
		width: 100%;
		float: none;
		margin: 0;
	}
}
@media (max-width: 600px) {
	body.cs-classic ul.products.columns-4:not(.list) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 12px;
		row-gap: 20px;
		width: 100%;
		margin-left: 0;
	}
	body.cs-classic ul.products.columns-4:not(.list) li.product {
		width: 100%;
		float: none;
		margin: 0;
	}
}

/* =========================================================================
 * PDP on-sale layout — same struck-regular + yellow -X% badge as loop cards.
 * PDP body has NO cs-classic class, so scope to body.single-product. Covers
 * the summary price + the JS-injected variation price. Issue 2026-0529-0006.
 * ========================================================================= */
body.single-product .entry-summary .price ins,
body.single-product .woocommerce-variation-price .price ins {
	text-decoration: none;
	font-weight: 700;
	color: #333;
	display: inline-block;
	font-size: 1.9em;
	line-height: 1.1;
}
body.single-product .entry-summary .price .cs-price-discount,
body.single-product .woocommerce-variation-price .price .cs-price-discount {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: 8px;
}
body.single-product .entry-summary .price .cs-price-discount del,
body.single-product .woocommerce-variation-price .price .cs-price-discount del {
	color: #6f6f6f;
	font-size: 0.85em;
	font-weight: 400;
	text-decoration: line-through;
}
body.single-product .entry-summary .price .onsale,
body.single-product .woocommerce-variation-price .price .onsale {
	position: static !important;
	top: auto !important;
	right: auto !important;
	left: auto !important;
	font-size: 13px;
	font-weight: 900;
	color: #f6b30f !important;
	background: #fff !important;
	border: 3px solid #f6b30f !important;
	border-radius: 6px;
	padding: 1px 6px;
	text-transform: uppercase;
	display: inline-block !important;
	line-height: 1.2;
}
/* Suppress WC/Shoptimizer corner sale flash on PDP gallery (inline badge only) */
body.single-product .woocommerce-product-gallery > .onsale,
body.single-product .images > .onsale,
body.single-product .product > .onsale {
	display: none !important;
}

/* =========================================================================
 * PDP fixes (2026-05-30 review):
 *  - breadcrumb alignment: render it inside the same 1170px centered box as
 *    .product-details-wrapper (it's a sibling that otherwise spans full width).
 *  - duplicate price on variable products: hide the static summary price,
 *    keep the dynamic per-variation price near add-to-cart.
 *  - duplicate -X% badge: hide Shoptimizer's green native sale label (we show
 *    our inline yellow -X% next to the price).
 * ========================================================================= */
/* Higher specificity (.product ancestor) — beats the grouped
 * `body.single-product .cs-breadcrumb-wrap { margin:0 0 16px }` rule in
 * cs-shop-sidebar.css, which loads later and would otherwise zero the auto
 * margins. Centers the breadcrumb in the same 1170px box as the content. */
body.single-product .product .cs-breadcrumb-wrap {
	max-width: 1170px;
	margin: 0 auto 16px;
	box-sizing: border-box;
	/* Mirror .product-details-wrapper padding EXACTLY across the parent's
	 * breakpoints so the breadcrumb left edge aligns with the gallery:
	 *   >=993px : 2.617924em  ·  >=1070px : 1em (overrides)  ·  <=992px : 0 */
	padding-left: 2.617924em;
	padding-right: 2.617924em;
}
@media (min-width: 1070px) {
	body.single-product .product .cs-breadcrumb-wrap {
		padding-left: 0em;
		padding-right: 0em;
	}
}
@media (max-width: 992px) {
	body.single-product .product .cs-breadcrumb-wrap {
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
}

/* Variable PDP: drop the static "from" price (duplicate of the variation price). */
body.single-product .product-type-variable .summary.entry-summary > p.price {
	display: none !important;
}

/* Hide Shoptimizer's green corner/bubble sale label on PDP (inline yellow badge only). */
body.single-product .sale-item.product-label {
	display: none !important;
}

/* Variation price amount size (Andrea 2026-05-30) */
.woocommerce-variation-price .price .amount {
	font-size: 20px;
}