/**
 * Lenzzberry — shop / cart / checkout / single product styles.
 * Loaded only on WooCommerce pages via inc/enqueues.php.
 */

/* ---------------------------------------------------------------------- */
/* Archive page — cream wrapper                                           */
/* ---------------------------------------------------------------------- */

.lenzz-shop {
	background-color: var(--wp--preset--color--cream);
	padding-bottom: var(--wp--preset--spacing--60);
}

/* Hero band at the top of every shop archive — same cream as the page. */
.lenzz-shop-hero {
	padding: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--40);
	text-align: center;
}

.lenzz-bc-wrap {
	margin-bottom: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------------------- */
/* Breadcrumbs — apply to BOTH the lenzz-prefixed wrapper and WC's        */
/* native `.woocommerce-breadcrumb` element so all rendering paths style. */
/* ---------------------------------------------------------------------- */

.lenzz-breadcrumbs,
.woocommerce-breadcrumb {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	text-align: center;
	margin: 0;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0;
	justify-content: center;
	align-items: center;
}

.lenzz-breadcrumbs a,
.woocommerce-breadcrumb a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: color 150ms ease;
}

.lenzz-breadcrumbs a:hover,
.woocommerce-breadcrumb a:hover {
	color: var(--wp--preset--color--brand);
}

.lenzz-breadcrumbs .lenzz-bc-sep,
.woocommerce-breadcrumb .lenzz-bc-sep {
	color: var(--wp--preset--color--brand);
	margin: 0 0.5em;
	display: inline-block;
}

.lenzz-breadcrumbs > :last-child:not(a),
.woocommerce-breadcrumb > :last-child:not(a) {
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}

/* ---------------------------------------------------------------------- */
/* Archive page — title                                                   */
/* ---------------------------------------------------------------------- */

.lenzz-archive-title {
	margin: 0 auto;
	text-align: center;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.75rem, 3.6vw, 2.5rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.lenzz-term-description p {
	max-width: 720px;
	margin-inline: auto;
}

/* ---------------------------------------------------------------------- */
/* Toolbar — 3 zones: count (L) · view toggles (C) · sort (R)             */
/* ---------------------------------------------------------------------- */

.lenzz-toolbar-row {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	flex-wrap: wrap;
	margin: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--40);
}

.lenzz-toolbar-left,
.lenzz-toolbar-right {
	display: flex;
	align-items: center;
	flex: 1 1 200px;
	min-width: 0;
}

.lenzz-toolbar-right {
	justify-content: flex-end;
}

.lenzz-result-count,
.lenzz-toolbar-row .woocommerce-result-count {
	color: var(--wp--preset--color--brand);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0;
	font-weight: 400;
}

/* Sort label + dropdown */
.lenzz-sort-label {
	color: var(--wp--preset--color--brand);
}

.lenzz-toolbar-right .wp-block-woocommerce-catalog-sorting,
.lenzz-toolbar-right .woocommerce-ordering {
	margin: 0;
}

.lenzz-toolbar-right select,
.lenzz-toolbar-right .wc-block-product-sort-select__select {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	padding: 0.25rem 1.25rem 0.25rem 0;
	cursor: pointer;
	min-width: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='%230E7B91'%3E%3Cpath d='M2 4l4 4 4-4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right center;
	-webkit-appearance: none;
	appearance: none;
}

.lenzz-toolbar-right select:focus {
	outline: none;
	box-shadow: none;
}

/* View-mode toggle buttons */
.lenzz-view-toggle {
	display: inline-flex;
	gap: 4px;
	align-items: center;
	flex: 1 1 auto;
	justify-content: center;
}

.lenzz-view-btn {
	width: 30px;
	height: 30px;
	background: transparent;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	color: var(--wp--preset--color--muted);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: color 150ms ease;
}

.lenzz-view-btn:hover {
	color: var(--wp--preset--color--brand);
}

.lenzz-view-btn.is-active {
	color: var(--wp--preset--color--ink);
}

/* ---------------------------------------------------------------------- */
/* Product grid — borderless cards                                        */
/* ---------------------------------------------------------------------- */

.lenzz-grid .wp-block-post {
	background: transparent;
}

.lenzz-card {
	background: transparent;
	border: 0;
	padding: 0;
	height: 100%;
	transition: transform 250ms ease;
}

.lenzz-card:hover {
	transform: translateY(-4px);
}

/* Image wrapper with rounded corners */
.lenzz-card-image,
.lenzz-card .wc-block-components-product-image {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: var(--wp--preset--color--cream);
}

.lenzz-card-image a,
.lenzz-card .wc-block-components-product-image a {
	display: block;
	width: 100%;
	height: 100%;
}

.lenzz-card .wc-block-components-product-image img,
.lenzz-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 14px;
	transition: transform 400ms ease;
}

.lenzz-card:hover .wc-block-components-product-image img,
.lenzz-card:hover .lenzz-card-image img {
	transform: scale(1.04);
}

/* Sale badge — red pill, top-left of image */
.lenzz-card .wc-block-components-product-sale-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	background: var(--wp--preset--color--sale);
	color: var(--wp--preset--color--white);
	border-radius: 999px;
	padding: 0.35rem 0.875rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	z-index: 2;
	min-width: auto;
	min-height: auto;
	line-height: 1.2;
}

/* Title — centered, medium weight */
.lenzz-card .lenzz-card-title,
.lenzz-card .wp-block-post-title {
	text-align: center;
	margin: var(--wp--preset--spacing--30) 0 0;
}

.lenzz-card .wp-block-post-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-weight: 500;
	transition: color 150ms ease;
}

.lenzz-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--brand);
}

/* Price — centered, sale teal + struck regular gray */
.lenzz-card .lenzz-card-price,
.lenzz-card .wp-block-woocommerce-product-price,
.lenzz-card .wc-block-components-product-price {
	text-align: center;
	margin: 0.25rem 0 0;
	color: var(--wp--preset--color--brand);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--md);
}

.lenzz-card .wc-block-components-product-price ins,
.lenzz-card .wc-block-components-product-price__value {
	color: var(--wp--preset--color--brand);
	background: transparent;
	text-decoration: none;
}

.lenzz-card .wc-block-components-product-price del,
.lenzz-card .wc-block-components-product-price__regular,
.lenzz-card .wc-block-components-product-price .is-discounted-price + .wc-block-components-product-price__regular {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--sm);
	margin-left: 0.5rem;
	text-decoration: line-through;
}

/* ---------------------------------------------------------------------- */
/* Grid column-count overrides driven by the view-toggle JS               */
/* ---------------------------------------------------------------------- */

/* Classic markup: the view toggle adds `.is-cols-N` / `.is-list` directly
   to `<ul class="products">`. These rules win over the `.columns-4`
   !important defaults in product-cards.css via the extra .is-* class. */
.lenzz-shop ul.products.is-cols-2,
.lenzz-search ul.products.is-cols-2,
.lenzz-single-product ul.products.is-cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.lenzz-shop ul.products.is-cols-3,
.lenzz-search ul.products.is-cols-3,
.lenzz-single-product ul.products.is-cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.lenzz-shop ul.products.is-cols-4,
.lenzz-search ul.products.is-cols-4,
.lenzz-single-product ul.products.is-cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* On phones, cap the grid at 2 columns regardless of the saved
   desktop preference, and hide the 3/4-column toggle buttons —
   they look cramped on narrow screens. The user's desktop choice
   is preserved in localStorage (JS just clamps the active state
   to "2" on mobile widths). */
@media (max-width: 768px) {
	.lenzz-shop ul.products.is-cols-3,
	.lenzz-search ul.products.is-cols-3,
	.lenzz-single-product ul.products.is-cols-3,
	.lenzz-shop ul.products.is-cols-4,
	.lenzz-search ul.products.is-cols-4,
	.lenzz-single-product ul.products.is-cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.lenzz-view-btn[data-view="3"],
	.lenzz-view-btn[data-view="4"] {
		display: none !important;
	}
}

/* List view — one card per row, image on the left, info on the right. */
.lenzz-shop ul.products.is-list,
.lenzz-search ul.products.is-list,
.lenzz-single-product ul.products.is-list {
	grid-template-columns: 1fr !important;
	gap: var(--wp--preset--spacing--40) !important;
}

.lenzz-shop ul.products.is-list li.product,
.lenzz-search ul.products.is-list li.product,
.lenzz-single-product ul.products.is-list li.product {
	flex-direction: row !important;
	gap: var(--wp--preset--spacing--40);
	align-items: center;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--30);
}

/* In list view the card-link should also be a row */
.lenzz-shop ul.products.is-list li.product > .lenzz-card-link,
.lenzz-search ul.products.is-list li.product > .lenzz-card-link,
.lenzz-single-product ul.products.is-list li.product > .lenzz-card-link {
	flex-direction: row !important;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	flex: 1 1 auto;
}

.lenzz-shop ul.products.is-list .lenzz-card-image,
.lenzz-search ul.products.is-list .lenzz-card-image,
.lenzz-single-product ul.products.is-list .lenzz-card-image {
	flex: 0 0 180px !important;
	max-width: 180px;
	aspect-ratio: 1 / 1;
}

.lenzz-shop ul.products.is-list .lenzz-card-title,
.lenzz-search ul.products.is-list .lenzz-card-title,
.lenzz-single-product ul.products.is-list .lenzz-card-title,
.lenzz-shop ul.products.is-list .lenzz-card-price,
.lenzz-search ul.products.is-list .lenzz-card-price,
.lenzz-single-product ul.products.is-list .lenzz-card-price {
	text-align: left !important;
	margin-top: 0;
}

/* Cart button in list view: shrink to inline pill on the right edge */
.lenzz-shop ul.products.is-list .lenzz-card > a.button,
.lenzz-search ul.products.is-list .lenzz-card > a.button,
.lenzz-single-product ul.products.is-list .lenzz-card > a.button {
	width: auto !important;
	margin: 0 !important;
	padding: 0.55rem 1.25rem !important;
	align-self: center;
	flex: 0 0 auto;
}

@media (max-width: 600px) {
	/* Force grid view (2-col) on mobile — list view doesn't fit well */
	.lenzz-shop ul.products.is-list,
	.lenzz-search ul.products.is-list,
	.lenzz-single-product ul.products.is-list {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	.lenzz-shop ul.products.is-list li.product,
	.lenzz-search ul.products.is-list li.product,
	.lenzz-single-product ul.products.is-list li.product {
		flex-direction: column !important;
		background: transparent;
		border: 0;
		padding: 0;
	}
}

/* ---------------------------------------------------------------------- */
/* Responsive                                                             */
/* ---------------------------------------------------------------------- */

@media (max-width: 960px) {
	.lenzz-toolbar-row {
		flex-direction: column;
		align-items: stretch;
	}
	.lenzz-toolbar-left,
	.lenzz-toolbar-right {
		justify-content: center;
		flex: 1 1 auto;
	}
	.lenzz-grid .wc-block-product-template,
	.lenzz-grid .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 600px) {
	.lenzz-view-toggle {
		display: none;
	}
	.lenzz-grid .wc-block-product-template,
	.lenzz-grid .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: var(--wp--preset--spacing--30);
	}
	.lenzz-card .wc-block-components-product-sale-badge {
		top: 8px;
		left: 8px;
		padding: 0.25rem 0.625rem;
		font-size: 0.6875rem;
	}
}

/* ---------------------------------------------------------------------- */
/* Pagination                                                             */
/* ---------------------------------------------------------------------- */

.lenzz-pagination {
	gap: var(--wp--preset--spacing--20);
}

.lenzz-pagination a,
.lenzz-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 0.625rem;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	text-decoration: none;
	transition: background-color 150ms ease, border-color 150ms ease;
}

.lenzz-pagination a:hover {
	border-color: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--surface);
}

.lenzz-pagination .current,
.lenzz-pagination .page-numbers.current {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--brand);
}

/* ====================================================================== */
/* SINGLE PRODUCT PAGE                                                    */
/* ====================================================================== */

/* Page container: white bg, wider on desktop */
.lenzz-single-product {
	background-color: var(--wp--preset--color--white);
	padding-bottom: var(--wp--preset--spacing--60);
}

/* Single-product breadcrumb — left-aligned (archive uses centered).
   The bullet separator + link colors come from the global .woocommerce-breadcrumb
   rules in the breadcrumb section above; here we just override alignment + spacing. */
.lenzz-single-product .woocommerce-breadcrumb {
	display: block;
	text-align: left;
	margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--30);
}

/* ---------------------------------------------------------------------- */
/* Two-column layout — CSS Grid on a plain wp:group wrapper (wp:columns   */
/* would auto-inject per-instance flex CSS that fights our grid).         */
/* ---------------------------------------------------------------------- */

html body .lenzz-product-top {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--70);
	align-items: start;
	margin: 0;
}

html body .lenzz-product-top > .wp-block-group {
	width: auto;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	float: none;
}

/* Stack 2-column gallery+summary at <=960px to match the other single-product
   responsive rules below — previously this was at 781px which created an
   inconsistent state between 782-960px (grid stayed 2-col while gap shrank). */
@media (max-width: 960px) {
	html body .lenzz-product-top {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--40);
	}
}

/* ---------------------------------------------------------------------- */
/* Gallery (left column) — full classic WC gallery                        */
/* ---------------------------------------------------------------------- */

.lenzz-gallery-col {
	overflow: hidden;
	position: relative;
}

/* `<span class="onsale lenzz-onsale">` is rendered as a sibling of the
   gallery (via the `woocommerce_show_product_sale_flash` hook).
   Pin it to the top-left of the gallery column with `!important` to
   defeat WC core CSS — WC's default `.woocommerce span.onsale` rule
   uses `position: absolute; top: -0.5em; right: -0.5em` which puts the
   badge in the top-right corner partly outside the container (which
   then gets clipped by overflow: hidden). High specificity + !important
   beats it cleanly. */
.lenzz-gallery-col > .onsale,
.lenzz-gallery-col > .lenzz-onsale,
body .lenzz-single-product .lenzz-gallery-col > .onsale,
body .lenzz-single-product .lenzz-gallery-col > .lenzz-onsale {
	position: absolute !important;
	top: 18px !important;
	left: 18px !important;
	right: auto !important;
	bottom: auto !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: max-content !important;
	margin: 0 !important;
	padding: 0.35rem 0.75rem !important;
	background: var(--wp--preset--color--sale) !important;
	color: var(--wp--preset--color--white) !important;
	border-radius: 999px !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.02em !important;
	text-align: center !important;
	text-transform: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 10 !important;
	pointer-events: none;
	box-shadow: 0 2px 8px rgba(220, 38, 38, 0.20);
}

/* Wipe WC's float-based "div.images" defaults — we use grid columns now. */
.lenzz-gallery-col .woocommerce-product-gallery,
.lenzz-gallery-col .lenzz-product-context .woocommerce-product-gallery,
.lenzz-gallery-col div.images {
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	opacity: 1 !important;       /* WC fades-in via JS; ensure it's visible if JS misses */
	transition: none !important;
	box-sizing: border-box;
}

/* The .product wrapper our shortcode adds — neutralise WC's default
   float/width/clearfix rules that scope to .woocommerce div.product */
.lenzz-gallery-col .lenzz-product-context {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.lenzz-gallery-col .lenzz-product-context::before,
.lenzz-gallery-col .lenzz-product-context::after {
	content: none !important;
	display: none !important;
}

/* Sticky behavior on desktop */
@media (min-width: 962px) {
	.lenzz-gallery-col .woocommerce-product-gallery {
		position: sticky;
		top: 100px;
	}
}

/* Main image */
.lenzz-gallery-col .woocommerce-product-gallery__wrapper {
	margin: 0;
	width: 100%;
}

.lenzz-gallery-col .woocommerce-product-gallery__image,
.lenzz-gallery-col .woocommerce-product-gallery__image--placeholder {
	border-radius: 14px;
	overflow: hidden;
	background: var(--wp--preset--color--cream);
}

.lenzz-gallery-col .woocommerce-product-gallery__image > a,
.lenzz-gallery-col .woocommerce-product-gallery__image > img {
	display: block;
	width: 100%;
	height: auto;
}

.lenzz-gallery-col .woocommerce-product-gallery__image img {
	border-radius: 14px;
	width: 100%;
	height: auto;
	display: block;
}

/* Zoom / lightbox trigger button (the "magnifier" icon) */
.lenzz-gallery-col .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 9;
	width: 36px;
	height: 36px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--wp--preset--color--ink);
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	text-indent: 0;
	font-size: 14px;
	line-height: 36px;
	text-align: center;
	transition: background-color 150ms ease;
}

.lenzz-gallery-col .woocommerce-product-gallery__trigger:hover {
	background: var(--wp--preset--color--white);
}

/* Hide FlexSlider's prev/next arrows on the main slider — our custom
   `.lenzz-thumb-strip` (built by JS, see assets/js/main.js) is the only
   way users navigate between images. The native `.flex-control-thumbs`
   <ol> is also hidden off-screen by the inline <style> injected at
   wp_head in inc/woocommerce.php — don't add rules for it here, that
   would just re-create the cascade conflict we already solved. */
.lenzz-gallery-col .flex-direction-nav {
	display: none !important;
}

/* ---------------------------------------------------------------------- */
/* Summary (right column)                                                 */
/* ---------------------------------------------------------------------- */

/* `.lenzz-product-top` is `display: grid` (see two-column layout block).
   Use `start` (grid keyword) instead of `flex-start` so the cross-axis
   alignment is interpreted correctly by the grid layout. */
.lenzz-product-top {
	align-items: start;
}

/* WC core ships `.woocommerce div.product div.summary { float: right; width: 48% }`
   which assumes a legacy float-based two-column layout. Our `.lenzz-product-top`
   uses CSS Grid (1fr 1fr), so the summary needs `width: 100%; float: none` to
   fill its grid cell properly. High specificity selector + `!important` beats
   WC's `.woocommerce div.product div.summary` chain. */
.lenzz-product-summary,
.lenzz-product-summary.summary,
.lenzz-product-summary.summary.entry-summary,
.woocommerce div.product .lenzz-product-summary,
.woocommerce-page div.product .lenzz-product-summary,
body .woocommerce div.product div.summary.lenzz-product-summary,
body .woocommerce-page div.product div.summary.lenzz-product-summary {
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	clear: none !important;
}

.lenzz-product-summary > * {
	margin-block-start: 0;
}

/* Vendor pre-title (small caps, brand color) */
.lenzz-product-vendor {
	display: block;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
	margin: 0;
}

.lenzz-product-title {
	margin-block-start: 0;
	color: var(--wp--preset--color--ink);
}

/* Title rendered by `woocommerce_template_single_title()` carries the WC
   classes `.product_title.entry-title`. Style it to match the design. */
.lenzz-product-summary .product_title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink);
}

/* Price rendered by `woocommerce_template_single_price()` is a `<p class="price">`
   containing del/ins markup. Sale price first (brand color), struck regular after. */
.lenzz-product-summary .price {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--2xl);
	font-weight: 700;
	color: var(--wp--preset--color--brand);
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.625rem;
	line-height: 1.2;
}

.lenzz-product-summary .price del {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 400;
	text-decoration: line-through;
	order: 2;
}

.lenzz-product-summary .price ins {
	background: transparent;
	color: var(--wp--preset--color--brand);
	text-decoration: none;
	font-weight: 700;
	order: 1;
}

.lenzz-product-summary .price .woocommerce-Price-amount {
	white-space: nowrap;
}

/* Stock urgency message — uses the palette accent (warm orange) for
   warm urgency without leaving the brand scheme. A pulsing lightning
   bolt and a soft breathing background draw the eye without screaming. */
.stock.lenzz-stock-urgent {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--wp--preset--color--accent);
	background: rgba(255, 138, 61, 0.10);
	border: 1px solid rgba(255, 138, 61, 0.28);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	padding: 0.42rem 0.85rem 0.42rem 0.72rem;
	border-radius: 999px;
	margin: 0 0 var(--wp--preset--spacing--30);
	letter-spacing: 0.01em;
	line-height: 1.2;
	animation: lenzz-stock-breathe 2.6s ease-in-out infinite;
}

/* Lightning bolt icon — CSS-mask of an inline SVG so it inherits the
   accent colour and animates cleanly via transform. */
.stock.lenzz-stock-urgent::before {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	background: var(--wp--preset--color--accent);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M13 2 4 14h7l-1 8 9-12h-7l1-8z'/></svg>") center / contain no-repeat;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M13 2 4 14h7l-1 8 9-12h-7l1-8z'/></svg>") center / contain no-repeat;
	animation: lenzz-stock-bolt 1.4s ease-in-out infinite;
}

@keyframes lenzz-stock-breathe {
	0%, 100% { background-color: rgba(255, 138, 61, 0.10); }
	50%      { background-color: rgba(255, 138, 61, 0.18); }
}

@keyframes lenzz-stock-bolt {
	0%, 100% { transform: scale(1)    rotate(0deg);  opacity: 1;    }
	50%      { transform: scale(1.18) rotate(-4deg); opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
	.stock.lenzz-stock-urgent,
	.stock.lenzz-stock-urgent::before {
		animation: none;
	}
}

/* ====================================================================== */
/* Live viewer pill — small social-proof element under the price.         */
/* ====================================================================== */

.lenzz-live-viewers {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.4rem 0 var(--wp--preset--spacing--30);
	padding: 0.45rem 0.85rem 0.45rem 0.7rem;
	background: rgba(14, 123, 145, 0.07);
	border: 1px solid rgba(14, 123, 145, 0.18);
	border-radius: 999px;
	color: var(--wp--preset--color--brand, #0E7B91);
	font-size: 0.82rem;
	line-height: 1.2;
	letter-spacing: 0.005em;
	max-width: 100%;
}

/* Pulsing green "live" dot — same pattern Twitch / YouTube use. */
.lenzz-live-viewers-dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: #25C26E;
	position: relative;
	box-shadow: 0 0 0 0 rgba(37, 194, 110, 0.7);
	animation: lenzz-live-pulse 1.8s ease-out infinite;
}

.lenzz-live-viewers-eye {
	flex: 0 0 auto;
	display: block;
	color: var(--wp--preset--color--brand, #0E7B91);
	opacity: 0.85;
}

.lenzz-live-viewers-text {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	min-width: 0;
	flex: 1 1 auto;
	color: var(--wp--preset--color--body, #2A2A2A);
}

.lenzz-live-viewers-count {
	font-weight: 700;
	color: var(--wp--preset--color--brand, #0E7B91);
	font-variant-numeric: tabular-nums;
	transition: opacity 220ms ease;
}

@keyframes lenzz-live-pulse {
	0%   { box-shadow: 0 0 0 0   rgba(37, 194, 110, 0.55); }
	70%  { box-shadow: 0 0 0 9px rgba(37, 194, 110, 0);    }
	100% { box-shadow: 0 0 0 0   rgba(37, 194, 110, 0);    }
}

@media (prefers-reduced-motion: reduce) {
	.lenzz-live-viewers-dot {
		animation: none;
	}
}

/* Small screens — shrink padding so the pill never wraps awkwardly. */
@media (max-width: 480px) {
	.lenzz-live-viewers {
		font-size: 0.78rem;
		padding: 0.4rem 0.7rem 0.4rem 0.6rem;
		gap: 0.4rem;
	}
	.lenzz-live-viewers-eye {
		width: 14px;
		height: 14px;
	}
}

/* "Customize Your Order" heading — appears only when WAPF add-ons follow */
.lenzz-customize-heading {
	display: none;
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	text-transform: none;
	letter-spacing: 0;
	padding-bottom: var(--wp--preset--spacing--20);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* Show heading when followed by an add-on wrapper. WAPF actually wraps
   its fields as `<div class="wapf"><div class="wapf-wrapper">...`, so the
   immediate sibling of the heading is `.wapf`. Match either. */
.lenzz-customize-heading:has(+ .wapf),
.lenzz-customize-heading:has(+ .wapf-wrapper),
.lenzz-customize-heading.is-visible {
	display: block;
}

/* Drop the standalone background on the addon wrapper since the heading now
   contains it visually. Keep the border-radius on the wrapper. */
.wapf-wrapper {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
}

/* `<div class="wapf">` is the outer container — keep its margins zeroed
   so the parent form's flex `gap` (--30) is the single source of spacing. */
.lenzz-product-summary form.cart > .wapf {
	margin: 0;
}

/* Add-ons subtotal / total summary block — typically rendered by WAPF below
   the fields. We add subtle separators and emphasis. */
.wapf-subtotal,
.wapf-totals {
	margin-top: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px dashed var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--md);
}

.wapf-totals .wapf-totals-total,
.wapf-subtotal-value {
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.lenzz-product-price ins,
.lenzz-product-price .wc-block-components-product-price__value.is-discounted {
	background: transparent;
	color: var(--wp--preset--color--sale);
	text-decoration: none;
	font-weight: 700;
}

.lenzz-product-price del,
.lenzz-product-price .wc-block-components-product-price__regular {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
	margin-right: 0.5rem;
}

.lenzz-product-shortdesc {
	color: var(--wp--preset--color--body);
	line-height: 1.65;
}

.lenzz-product-shortdesc p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------- */
/* Add-to-cart form: quantity (-/+ buttons) + full-width Add to Cart      */
/* ---------------------------------------------------------------------- */

.lenzz-product-summary form.cart {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	margin-bottom: 0;
}

/* Stack quantity + button on a row */
.lenzz-product-summary .quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	overflow: hidden;
	background: var(--wp--preset--color--white);
	width: fit-content;
	margin: 0;
}

.lenzz-product-summary .quantity input[type="number"] {
	width: 64px;
	text-align: center;
	border: 0;
	padding: 0.5rem 0;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	background: transparent;
	-moz-appearance: textfield;
}

.lenzz-product-summary .quantity input[type="number"]::-webkit-outer-spin-button,
.lenzz-product-summary .quantity input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.lenzz-product-summary .quantity input[type="number"]:focus {
	outline: none;
	box-shadow: none;
}

.lenzz-qty-btn {
	width: 40px;
	background: transparent;
	border: 0;
	font-size: 18px;
	line-height: 1;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease;
	user-select: none;
}

.lenzz-qty-btn:hover {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--brand);
}

.lenzz-qty-minus {
	border-right: 1px solid var(--wp--preset--color--border);
}

.lenzz-qty-plus {
	border-left: 1px solid var(--wp--preset--color--border);
}

/* Full-width primary CTA */
.lenzz-product-summary .single_add_to_cart_button,
.single-product .single_add_to_cart_button {
	width: 100%;
	min-height: 52px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
	border: 0;
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	letter-spacing: 0.02em;
	transition: background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
	text-transform: none;
}

.lenzz-product-summary .single_add_to_cart_button:hover,
.single-product .single_add_to_cart_button:hover {
	background: var(--wp--preset--color--brand-dark);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(14, 123, 145, 0.22);
}

/* Product meta (SKU, categories, tags) — brand-tinted pill chips */
.lenzz-product-summary .product_meta {
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.lenzz-product-summary .product_meta > span {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-weight: 500;
	letter-spacing: 0.01em;
}

/* Category / tag links rendered as pill chips on the cream brand color,
   matching the site palette (no off-scheme colors). */
.lenzz-product-summary .product_meta a {
	display: inline-flex;
	align-items: center;
	padding: 0.35rem 0.75rem;
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--brand);
	border: 1px solid rgba(14, 123, 145, 0.18);
	border-radius: 999px;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.8125rem;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.lenzz-product-summary .product_meta a:hover {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--brand);
	transform: translateY(-1px);
}

/* ---------------------------------------------------------------------- */
/* Product gallery (single product)                                       */
/* ---------------------------------------------------------------------- */

.woocommerce-product-gallery {
	position: sticky;
	top: 24px;
}

.woocommerce-product-gallery__image,
.wc-block-components-product-image-gallery img {
	border-radius: 12px;
	overflow: hidden;
}

/* ---------------------------------------------------------------------- */
/* Plain stacked info sections (replaces tabs)                            */
/* ---------------------------------------------------------------------- */

.lenzz-product-info {
	max-width: 960px;
	margin: 0 auto;
}

.lenzz-info-section {
	padding-block: var(--wp--preset--spacing--50);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.lenzz-info-section:last-child {
	border-bottom: 0;
}

.lenzz-info-heading {
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin: 0 0 var(--wp--preset--spacing--30);
	letter-spacing: 0;
	text-transform: none;
}

.lenzz-info-section p {
	color: var(--wp--preset--color--body);
	line-height: 1.7;
}

.lenzz-info-section a {
	color: var(--wp--preset--color--brand);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.lenzz-info-section a:hover {
	color: var(--wp--preset--color--brand-dark);
}

/* Specification table */
.lenzz-spec-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	overflow: hidden;
}

.lenzz-spec-table th,
.lenzz-spec-table td {
	padding: 0.875rem 1rem;
	text-align: left;
	font-size: var(--wp--preset--font-size--base);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.lenzz-spec-table tr:last-child th,
.lenzz-spec-table tr:last-child td {
	border-bottom: 0;
}

.lenzz-spec-table th {
	width: 35%;
	background: var(--wp--preset--color--surface);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.lenzz-spec-table td {
	color: var(--wp--preset--color--body);
}

/* Reviews section (rendered by comments_template via shortcode) */
.lenzz-reviews-section #reviews {
	margin: 0;
}

.lenzz-reviews-section #reviews h2,
.lenzz-reviews-section #reviews h3 {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	margin-block: 0 var(--wp--preset--spacing--30);
}

.lenzz-reviews-section .commentlist {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--40);
}

.lenzz-reviews-section .commentlist li {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--30);
}

.lenzz-reviews-section .comment-form-rating .stars a {
	color: #FFB800;
}

.lenzz-reviews-section .comment-form input[type="text"],
.lenzz-reviews-section .comment-form input[type="email"],
.lenzz-reviews-section .comment-form textarea {
	width: 100%;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	padding: 0.625rem 0.875rem;
}

.lenzz-reviews-section .submit {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
	border: 0;
	border-radius: 999px;
	padding: 0.75rem 1.75rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 150ms ease;
}

.lenzz-reviews-section .submit:hover {
	background: var(--wp--preset--color--brand-dark);
}

.lenzz-no-reviews {
	color: var(--wp--preset--color--muted);
	font-style: italic;
	margin: 0;
}


/* ---------------------------------------------------------------------- */
/* WC native product-details tabs (used now)                              */
/* ---------------------------------------------------------------------- */

.lenzz-product-tabs-wrap {
	max-width: 1240px;
}

.lenzz-product .wc-tabs-wrapper,
.lenzz-product .woocommerce-tabs {
	margin-block: var(--wp--preset--spacing--40) 0;
}

.lenzz-product ul.tabs.wc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--50);
	list-style: none;
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.lenzz-product ul.tabs.wc-tabs::before {
	display: none;
}

.lenzz-product ul.tabs.wc-tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

.lenzz-product ul.tabs.wc-tabs li::before,
.lenzz-product ul.tabs.wc-tabs li::after {
	display: none;
}

.lenzz-product ul.tabs.wc-tabs li a {
	display: inline-block;
	padding: 0.875rem 0;
	color: var(--wp--preset--color--muted);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--md);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color 150ms ease, border-color 150ms ease;
}

.lenzz-product ul.tabs.wc-tabs li:hover a {
	color: var(--wp--preset--color--ink);
}

.lenzz-product ul.tabs.wc-tabs li.active a {
	color: var(--wp--preset--color--ink);
	border-bottom-color: var(--wp--preset--color--brand);
}

.lenzz-product .woocommerce-Tabs-panel {
	padding: 0;
}

.lenzz-product .woocommerce-Tabs-panel > h2:first-child {
	/* The default WC panel includes its own h2 (e.g. "Description") that
	   duplicates the tab label — hide it. */
	display: none;
}

.lenzz-product .woocommerce-Tabs-panel p {
	color: var(--wp--preset--color--body);
	line-height: 1.7;
}

.lenzz-product .woocommerce-Tabs-panel a {
	color: var(--wp--preset--color--brand);
}

/* ---------------------------------------------------------------------- */
/* Reviews panel — comment form, star rating, submit button               */
/* ---------------------------------------------------------------------- */

.lenzz-product .woocommerce-Reviews .woocommerce-Reviews-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	margin: 0 0 var(--wp--preset--spacing--30);
}

.lenzz-product .woocommerce-noreviews {
	color: var(--wp--preset--color--muted);
	font-style: italic;
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--cream);
	border-radius: 10px;
	text-align: center;
}

.lenzz-product .comment-respond {
	margin-top: var(--wp--preset--spacing--40);
}

.lenzz-product .comment-reply-title {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	margin: 0 0 var(--wp--preset--spacing--30);
}

.lenzz-product .comment-form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.lenzz-product .comment-form-rating {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.lenzz-product .comment-form-rating label {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
}

.lenzz-product .comment-form-rating .required,
.lenzz-product .comment-form-comment .required {
	color: var(--wp--preset--color--sale);
}

/* Star rating row — gold stars on hover, no underline */
.lenzz-product .comment-form-rating .stars {
	margin: 0;
	display: flex;
	gap: 0.25rem;
}

.lenzz-product .comment-form-rating .stars a {
	color: var(--wp--preset--color--border);
	text-decoration: none;
	font-size: 0;
	line-height: 1;
	border-bottom: 0;
	transition: color 150ms ease;
}

.lenzz-product .comment-form-rating .stars a::before {
	content: "\2605";
	font-size: 1.5rem;
}

.lenzz-product .comment-form-rating .stars:hover a,
.lenzz-product .comment-form-rating .stars a:hover,
.lenzz-product .comment-form-rating .stars a:hover ~ a {
	color: #FFB800;
}

.lenzz-product .comment-form-rating .stars a.active,
.lenzz-product .comment-form-rating .stars a.active ~ a {
	color: #FFB800;
}

.lenzz-product .comment-form-rating .stars span {
	display: flex;
	gap: 0.25rem;
}

.lenzz-product .comment-form-comment {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
}

.lenzz-product .comment-form-comment label {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
}

.lenzz-product .comment-form textarea {
	width: 100%;
	min-height: 120px;
	padding: 0.75rem 0.875rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	background: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink);
	resize: vertical;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.lenzz-product .comment-form textarea:focus {
	border-color: var(--wp--preset--color--brand);
	box-shadow: 0 0 0 3px rgba(14, 123, 145, 0.12);
	outline: none;
}

.lenzz-product .comment-form .form-submit {
	margin: 0;
}

.lenzz-product .comment-form input[type="submit"],
.lenzz-product .comment-form .submit {
	display: inline-block;
	padding: 0.75rem 1.75rem;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
	border: 0;
	border-radius: 999px;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.lenzz-product .comment-form input[type="submit"]:hover,
.lenzz-product .comment-form .submit:hover {
	background: var(--wp--preset--color--brand-dark);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(14, 123, 145, 0.18);
}

/* Existing review list — bordered cards on cream */
.lenzz-product .commentlist {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--40);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.lenzz-product .commentlist li {
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--40);
}

.lenzz-product .commentlist img.avatar {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	flex: 0 0 auto;
}

.lenzz-product .star-rating {
	color: #FFB800;
}

/* Specifications panel — restyle the native shop_attributes table to match */
.lenzz-product .shop_attributes {
	width: 100%;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	overflow: hidden;
	border-collapse: collapse;
}

.lenzz-product .shop_attributes th,
.lenzz-product .shop_attributes td {
	padding: 0.875rem 1rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
	text-align: left;
	font-size: var(--wp--preset--font-size--base);
}

.lenzz-product .shop_attributes tr:last-child th,
.lenzz-product .shop_attributes tr:last-child td {
	border-bottom: 0;
}

.lenzz-product .shop_attributes th {
	width: 35%;
	background: var(--wp--preset--color--surface);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

@media (max-width: 600px) {
	.lenzz-product ul.tabs.wc-tabs {
		gap: var(--wp--preset--spacing--40);
		overflow-x: auto;
		flex-wrap: nowrap;
		scrollbar-width: thin;
	}
	.lenzz-product ul.tabs.wc-tabs li {
		flex-shrink: 0;
	}
}

/* ---------------------------------------------------------------------- */
/* Legacy tabs (kept as fallback if a plugin re-injects them)             */
/* ---------------------------------------------------------------------- */

.lenzz-product .woocommerce-tabs ul.tabs,
.woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--40);
	display: flex;
	gap: var(--wp--preset--spacing--40);
	list-style: none;
}

.woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	border-radius: 0;
}

.woocommerce-tabs ul.tabs li a {
	color: var(--wp--preset--color--muted);
	padding: 0.625rem 0;
	display: inline-block;
	border-bottom: 2px solid transparent;
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-tabs ul.tabs li:hover a {
	color: var(--wp--preset--color--ink);
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--ink);
	border-bottom-color: var(--wp--preset--color--brand);
}

.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce-Tabs-panel {
	padding: var(--wp--preset--spacing--30) 0;
}

/* ---------------------------------------------------------------------- */
/* Related products grid                                                  */
/* ---------------------------------------------------------------------- */

.lenzz-related-title {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-bottom: var(--wp--preset--spacing--30);
}

/* WC native `<section class="related products">` rendered after the tabs.
   No wrapper class — style by the `.related.products` compound. */
.lenzz-product .related.products {
	margin-top: var(--wp--preset--spacing--70);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--border);
}

.lenzz-product .related.products > h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.25rem, 2vw, 1.75rem);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	letter-spacing: -0.005em;
	margin: 0 0 var(--wp--preset--spacing--40);
	text-align: center;
}

/* Search-page styles live in assets/css/search.css (loaded conditionally
   on `is_search()` — shop.css does not load on regular post searches).
   The block-theme `.wp-block-search__*` and `.wp-block-post-title` rules
   that used to live here never matched the rendered classic markup. */

/* ---------------------------------------------------------------------- */
/* Empty states                                                           */
/* ---------------------------------------------------------------------- */

.lenzz-empty-state {
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
	text-align: center;
	background: var(--wp--preset--color--surface);
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: 12px;
}

/* ---------------------------------------------------------------------- */
/* Responsive — stack at <960px                                           */
/* ---------------------------------------------------------------------- */

@media (max-width: 960px) {

	.lenzz-product-top {
		gap: var(--wp--preset--spacing--40) !important;
	}

	.lenzz-product-top .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}

	.lenzz-product-summary {
		margin-top: var(--wp--preset--spacing--40);
	}

	.woocommerce-product-gallery {
		position: static;
	}

	.lenzz-toolbar {
		gap: var(--wp--preset--spacing--20);
	}

	.lenzz-toolbar .wp-block-woocommerce-catalog-sorting select {
		min-width: 0;
		width: 100%;
	}
}

@media (max-width: 600px) {

	/* Quantity pill — keep inline-flex (was `display: block` which broke
	   the +/- and input into a vertical stack). Span full width on phone. */
	.lenzz-product-summary .quantity {
		display: inline-flex;
		width: 100%;
		margin: 0 0 var(--wp--preset--spacing--20);
	}

	.lenzz-product-summary .quantity input[type="number"] {
		flex: 1 1 auto;
	}

	.lenzz-product-summary .single_add_to_cart_button {
		width: 100%;
	}

	/* Tabs row scrolls horizontally if titles overflow — common mobile
	   shop pattern, prevents the labels from wrapping onto two lines.
	   Need to match the desktop rule's specificity (.lenzz-product
	   ul.tabs.wc-tabs = 0,0,3,1) AND use !important so flex-wrap: nowrap
	   beats the desktop rule's flex-wrap: wrap. */
	.lenzz-product ul.tabs.wc-tabs,
	.lenzz-product .woocommerce-tabs ul.tabs,
	.woocommerce-tabs ul.tabs {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		overflow-y: hidden;
		gap: var(--wp--preset--spacing--30);
		scrollbar-width: thin;
		scrollbar-color: rgba(14, 123, 145, 0.35) transparent;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px; /* room so scrollbar doesn't clip the active underline */
	}

	.lenzz-product ul.tabs.wc-tabs::-webkit-scrollbar,
	.woocommerce-tabs ul.tabs::-webkit-scrollbar {
		height: 4px;
	}
	.lenzz-product ul.tabs.wc-tabs::-webkit-scrollbar-thumb,
	.woocommerce-tabs ul.tabs::-webkit-scrollbar-thumb {
		background: rgba(14, 123, 145, 0.35);
		border-radius: 2px;
	}

	.lenzz-product ul.tabs.wc-tabs li,
	.woocommerce-tabs ul.tabs li {
		flex-shrink: 0 !important;
		white-space: nowrap;
	}
}


/* ---------------------------------------------------------------------- */
/* Sale badge                                                             */
/* ---------------------------------------------------------------------- */

.woocommerce span.onsale,
.lenzz-onsale {
	background: var(--wp--preset--color--sale);
	color: var(--wp--preset--color--white);
	border-radius: 999px;
	padding: 0.25rem 0.625rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	min-height: auto;
	min-width: auto;
	line-height: 1.2;
}

/* Product card (loop) styling lives in product-cards.css — keyed off
   `.lenzz-card` (and `.lenzz-products`/`.lenzz-shop ul.products li.product`).
   The legacy `.woocommerce ul.products li.product` rules that used to live
   here forced bg/border/padding that fought the borderless lenzz-card
   design — they have been removed. */

/* Legacy `.single-product .product .summary .price/.product_title`,
   `.woocommerce a.button`, and the second `.woocommerce-tabs ul.tabs` block
   that used to live here have been removed. Their job is now done by the
   properly-scoped rules earlier in this file:
     - price/title    → .lenzz-product-summary .price / .product_title
     - add-to-cart    → .lenzz-product-summary .single_add_to_cart_button
     - tabs           → .lenzz-product .woocommerce-tabs ul.tabs.wc-tabs
   The legacy `.woocommerce a.button` rule in particular was overriding the
   borderless `.lenzz-card > a.button` styling on archive cards. */

/* ---------------------------------------------------------------------- */
/* Cart, checkout, account — small polish                                 */
/* ---------------------------------------------------------------------- */

.woocommerce table.shop_table {
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--border);
	overflow: hidden;
}

.woocommerce table.shop_table th {
	background: var(--wp--preset--color--surface-alt);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-radius: 8px;
	border-top-color: var(--wp--preset--color--brand);
}

.woocommerce-message {
	border-top-color: var(--wp--preset--color--success);
}

/* ---------------------------------------------------------------------- */
/* Add-ons (Advanced Product Fields integration)                          */
/* The base .wapf-wrapper / .wapf-subtotal / .wapf-totals rules live with  */
/* the customize-heading block earlier in this file. Below are the        */
/* swatch / radio / totals-block styles that match the actual rendered    */
/* WAPF markup (image swatches, radio pricing hints, product totals).     */
/* ---------------------------------------------------------------------- */

/* Field label spacing */
.wapf-wrapper .wapf-field-label {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	margin-bottom: var(--wp--preset--spacing--20);
}

.wapf-wrapper .wapf-field-label label {
	font-weight: 600;
}

/* Field container — gap between fields */
.wapf-wrapper .wapf-field-container {
	margin-bottom: var(--wp--preset--spacing--40);
}

.wapf-wrapper .wapf-field-container:last-child {
	margin-bottom: 0;
}

/* Image-swatch grid */
.wapf-image-swatch-wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--apf-col-width, 64px), 1fr));
	gap: 0.625rem;
}

/* Each swatch is a clickable tile */
.wapf-swatch--image {
	position: relative;
}

.wapf-swatch--image label {
	display: block;
	cursor: pointer;
	border-radius: 10px;
	overflow: hidden;
}

.wapf-swatch--image input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.wapf-swatch--image .apf-pick-box {
	border: 2px solid var(--wp--preset--color--border);
	border-radius: 10px;
	overflow: hidden;
	transition: border-color 150ms ease, transform 150ms ease;
	aspect-ratio: 1 / 1;
	background: var(--wp--preset--color--white);
}

.wapf-swatch--image .apf-pick-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
	margin: 0;
}

.wapf-swatch--image label:hover .apf-pick-box {
	border-color: var(--wp--preset--color--brand);
}

.wapf-swatch--image input[type="checkbox"]:checked + .apf-pick-box {
	border-color: var(--wp--preset--color--brand);
	box-shadow: 0 0 0 3px rgba(14, 123, 145, 0.18);
}

.wapf-swatch--image .wapf-swatch-label {
	display: block;
	margin-top: 0.375rem;
	text-align: center;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

/* Select dropdowns inside WAPF — match the brand input styling */
.wapf-wrapper .wapf-input[type="text"],
.wapf-wrapper select.wapf-input,
.wapf-wrapper textarea.wapf-input {
	width: 100%;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	padding: 0.625rem 0.875rem;
	font-size: var(--wp--preset--font-size--base);
	background: var(--wp--preset--color--white);
}

.wapf-wrapper select.wapf-input:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Radio rows with optional pricing hints (Solution / Travel Kit) */
.wapf-radios {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.wapf-radio {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	background: var(--wp--preset--color--white);
	transition: border-color 150ms ease, background-color 150ms ease;
}

.wapf-radio.wapf-checked {
	border-color: var(--wp--preset--color--brand);
	background: rgba(14, 123, 145, 0.04);
}

.wapf-radio .wapf-input-label {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.625rem 0.875rem;
	cursor: pointer;
	margin: 0;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

.wapf-radio input[type="radio"] {
	width: 18px;
	height: 18px;
	accent-color: var(--wp--preset--color--brand);
	margin: 0;
	flex: 0 0 auto;
}

.wapf-radio .wapf-pricing-hint {
	color: var(--wp--preset--color--brand);
	font-weight: 600;
	margin-left: 0.25rem;
}

/* Conditional fields hide */
.wapf-wrapper .wapf-hide {
	display: none;
}

/* Product totals block (Product / Options / Grand) */
.wapf-product-totals {
	margin-top: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
}

.wapf-product-totals .wapf--inner > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 0.375rem 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--body);
	border-bottom: 1px dashed var(--wp--preset--color--border);
}

.wapf-product-totals .wapf--inner > div:last-child {
	border-bottom: 0;
	padding-top: 0.625rem;
	margin-top: 0.25rem;
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.wapf-product-totals .wapf-total {
	font-weight: 600;
	color: var(--wp--preset--color--brand);
}

.wapf-product-totals .wapf-grand-total {
	color: var(--wp--preset--color--brand);
	font-size: 1.125rem;
}

/* WAPF tooltip helper — hide unless triggered */
.wapf .tooltip-container[aria-hidden="true"] {
	display: none;
}


/* ====================================================================== */
/* CART / CHECKOUT / MY ACCOUNT — light brand polish                      */
/* Keep WC's default block UI as-is; just retint the action buttons,      */
/* input focus rings, and tighten a few margins to match the brand.       */
/* ====================================================================== */

/* Action buttons (Proceed to Checkout, Place Order, login Submit, etc.)
   — repaint to brand teal pill matching the rest of the site. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.woocommerce-form-login__submit,
.woocommerce-button.button {
	background: var(--wp--preset--color--brand) !important;
	color: var(--wp--preset--color--white) !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em;
	transition: background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.woocommerce-form-login__submit:hover,
.woocommerce-button.button:hover {
	background: var(--wp--preset--color--brand-dark) !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(14, 123, 145, 0.20);
}

/* Return-to-Cart link (checkout) — brand color so it doesn't clash. */
.wc-block-components-checkout-return-to-cart-button {
	color: var(--wp--preset--color--brand) !important;
}

.wc-block-components-checkout-return-to-cart-button svg {
	fill: currentColor;
}

/* Coupon "Add coupons" toggle in cart/checkout sidebars — match brand. */
.wc-block-components-totals-coupon .wc-block-components-panel__button {
	color: var(--wp--preset--color--brand) !important;
	font-weight: 600;
}

/* My-account nav active-link tint — small visual win. */
.woocommerce-MyAccount-navigation-link.is-active a {
	color: var(--wp--preset--color--brand);
	font-weight: 600;
}

.woocommerce-MyAccount-navigation-link a:hover {
	color: var(--wp--preset--color--brand);
}

/* My-account content links — keep brand color. */
.woocommerce-MyAccount-content a {
	color: var(--wp--preset--color--brand);
}

.woocommerce-MyAccount-content a:hover {
	color: var(--wp--preset--color--brand-dark);
}

/* Login / register form field focus ring — brand tint. */
.woocommerce-Input.input-text:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
	border-color: var(--wp--preset--color--brand);
	box-shadow: 0 0 0 3px rgba(14, 123, 145, 0.12);
	outline: none;
}

/* Required-asterisk red — match the rest of the site. */
.woocommerce form .form-row .required {
	color: var(--wp--preset--color--sale);
	text-decoration: none;
}

/* "Lost your password?" + remember-me — brand color. */
.woocommerce-LostPassword a {
	color: var(--wp--preset--color--brand);
	font-weight: 600;
}

.woocommerce-LostPassword a:hover {
	color: var(--wp--preset--color--brand-dark);
}

.woocommerce-form__input-checkbox {
	accent-color: var(--wp--preset--color--brand);
}

/* Tighten margins between checkout fieldsets so they don't feel sparse. */
.wc-block-components-checkout-step {
	margin-bottom: var(--wp--preset--spacing--40);
}

/* Cart/checkout sidebar — small margin-top on mobile so it doesn't crash
   into the items list when the layout stacks. */
@media (max-width: 781px) {
	.wc-block-components-sidebar {
		margin-top: var(--wp--preset--spacing--40);
	}
}


/* ====================================================================== */
/* SINGLE PRODUCT — final polish                                          */
/* WC core CSS targets `.woocommerce button.button.alt` (specificity 0,0,3,1) */
/* which beats `.lenzz-product-summary .single_add_to_cart_button` (0,0,2,0). */
/* Lock the brand-pill button + small layout nudges below.                */
/* ====================================================================== */

/* Add-to-cart on single product — bulletproof brand-pill */
button.single_add_to_cart_button,
.single_add_to_cart_button.button.alt,
.lenzz-product-summary button.single_add_to_cart_button,
.lenzz-product-summary .single_add_to_cart_button.button.alt {
	background: var(--wp--preset--color--brand) !important;
	color: var(--wp--preset--color--white) !important;
	border: 0 !important;
	border-radius: 999px !important;
	width: 100% !important;
	min-height: 54px !important;
	padding: 0.85rem 1.5rem !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: var(--wp--preset--font-size--md) !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em !important;
	text-transform: none !important;
	cursor: pointer;
	transition: background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease !important;
}

button.single_add_to_cart_button:hover,
.single_add_to_cart_button.button.alt:hover,
.lenzz-product-summary button.single_add_to_cart_button:hover,
.lenzz-product-summary .single_add_to_cart_button.button.alt:hover {
	background: var(--wp--preset--color--brand-dark) !important;
	color: var(--wp--preset--color--white) !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(14, 123, 145, 0.22);
}

/* Quantity pill — make sure the brand focus ring fires + height matches Add-to-Cart */
.lenzz-product-summary .quantity {
	min-height: 48px;
	align-items: center;
}

.lenzz-product-summary .quantity:focus-within {
	border-color: var(--wp--preset--color--brand);
	box-shadow: 0 0 0 3px rgba(14, 123, 145, 0.12);
}

/* WAPF select dropdowns — match the rest of the brand inputs (was getting
   default browser chrome on this page) */
.lenzz-product-summary .wapf-wrapper select,
.lenzz-product-summary select.wapf-input {
	width: 100%;
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: 10px !important;
	padding: 0.75rem 2.25rem 0.75rem 1rem !important;
	background: var(--wp--preset--color--white) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='%230E7B91'%3E%3Cpath d='M2 4l4 4 4-4z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 0.875rem center !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: var(--wp--preset--font-size--base) !important;
	color: var(--wp--preset--color--ink) !important;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.lenzz-product-summary .wapf-wrapper select:focus,
.lenzz-product-summary select.wapf-input:focus {
	border-color: var(--wp--preset--color--brand) !important;
	box-shadow: 0 0 0 3px rgba(14, 123, 145, 0.12) !important;
	outline: none;
}

.lenzz-product-summary .wapf-wrapper select:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	background-color: var(--wp--preset--color--surface) !important;
}

/* Tabs row — small underline accent on the active tab so it matches the
   site's section-title pattern */
.lenzz-product ul.tabs.wc-tabs li.active a {
	color: var(--wp--preset--color--brand);
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: var(--wp--preset--color--brand);
}

/* Tab panel padding — give content room to breathe */
.lenzz-product .woocommerce-Tabs-panel {
	padding: var(--wp--preset--spacing--30) 0 0 !important;
}

.lenzz-product .woocommerce-Tabs-panel p:first-child {
	margin-top: 0;
}

/* Related products — heading sits above the grid with proper spacing */
.lenzz-product .related.products {
	clear: both;
}

/* Description heading inside the description tab — hide the duplicate WC
   "Description" h2 that mirrors the tab label */
.lenzz-product .woocommerce-Tabs-panel--description > h2:first-child {
	display: none;
}

/* WAPF product totals — slightly more padding so it doesn't feel cramped */
.wapf-product-totals {
	padding: var(--wp--preset--spacing--40) !important;
}

/* WAPF radio rows — proper baseline alignment between input and label */
.wapf-radio .wapf-input-label {
	align-items: center;
}

/* Two-column grid gap on tablet — tighten from --70 to --50 so the gallery
   doesn't feel disconnected from the summary at mid widths */
@media (max-width: 1100px) and (min-width: 782px) {
	html body .lenzz-product-top {
		gap: var(--wp--preset--spacing--50);
	}
}