.woocommerce-area .woocommerce-breadcrumb,
.woocommerce-area .woocommerce-result-count,
.woocommerce-area .woocommerce-ordering {
	color: var(--ch-muted);
}

.woocommerce-area .products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce .products::before,
.woocommerce .products::after {
	display: none;
}

.woocommerce-area .product,
.woocommerce-area div.product,
.woocommerce-cart .cart-collaterals,
.woocommerce-checkout .woocommerce {
	background: rgba(255, 253, 248, 0.82);
	border: 1px solid rgba(17, 19, 25, 0.08);
	border-radius: 24px;
	box-shadow: var(--ch-shadow);
}

.woocommerce-area .product {
	margin: 0;
	padding: 1rem;
}

.woocommerce ul.products li.product a img {
	border-radius: 18px;
	margin-bottom: 1rem;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--ch-moss);
	font-weight: 700;
}

/*
 * Archive product cards: keep the card content centered. WooCommerce centers
 * li.product by default, but the price renders as a flex box that otherwise
 * left-aligns its amount — re-center it (and the title) so the card reads as a
 * tidy, balanced column.
 */
.woocommerce-area ul.products li.product {
	position: relative;
	text-align: center;
}

.woocommerce-area ul.products li.product .woocommerce-loop-product__title {
	text-align: center;
}

.woocommerce-area ul.products li.product .price {
	justify-content: center;
	text-align: center;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	background: var(--ch-ink);
	color: #fff;
	border-radius: 999px;
	padding: 0.85rem 1.25rem;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: #232734;
	color: #fff;
}

/*
 * PDP add-to-cart row: give the quantity field clear separation from the
 * Add-to-cart button (default WooCommerce renders them flush together).
 * Targets the simple-product cart form and the variable-product variation
 * add-to-cart wrapper directly — NOT the variations table, which must keep
 * its native block layout.
 */
.woocommerce div.product form.cart:not(.variations_form),
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.9rem;
}

.woocommerce div.product form.cart .quantity {
	margin: 0;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--ch-amber);
	background: rgba(255, 253, 248, 0.92);
	border-radius: 18px;
}

.woocommerce div.product {
	position: relative;
	padding: 1.5rem;
}

/*
 * Single-product gallery.
 *
 * WooCommerce renders the gallery with flexslider (multi-image), zoom, and
 * lightbox enabled (see inc/woocommerce.php). The default markup is visually
 * bare, so these rules give it an enterprise-grade frame: a soft surface that
 * floats the product image, a refined thumbnail strip with an amber active
 * state, and a polished circular zoom trigger.
 *
 * The frame (padding / background / border) is applied to the gallery
 * CONTAINER (div.images), never to figure.woocommerce-product-gallery__wrapper
 * — flexslider sets per-slide inline widths off the wrapper, so styling the
 * container leaves slide layout math untouched. box-sizing: border-box is
 * global (main.css), so the padding does not widen the floated images column.
 */
.woocommerce div.product div.images.woocommerce-product-gallery {
	position: relative;
	padding: clamp(1rem, 3vw, 2rem);
	background: linear-gradient(180deg, #fff, rgba(255, 250, 241, 0.9));
	border: 1px solid var(--ch-line);
	border-radius: var(--ch-radius-xl);
	box-shadow: var(--ch-shadow);
}

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
	margin: 0;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image img,
.woocommerce div.product div.images img {
	border-radius: var(--ch-radius-lg);
}

/*
 * Give the main image a consistent square frame that the product fills.
 * object-fit: cover makes the image fill the box edge-to-edge (so it reads
 * larger/taller than the bare auto-height thumbnail) instead of letterboxing
 * inside it. The 1:1 ratio keeps the frame from getting too tall. Thumbnails
 * keep their natural ratio and are excluded.
 */
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/*
 * Zoom / lightbox trigger restyled as a floating circular control.
 *
 * WooCommerce draws the magnifying glass with ::before/::after pseudo-elements
 * positioned for its default 36px content-box button. The theme resizes the
 * button (2.75rem, border-box), which knocks that drawn icon off-center — and
 * layering our own icon over it produced a doubled glass. We hide WC's drawn
 * icon (see ::before/::after below) and the screen-reader label glyph
 * (font-size: 0; WC keeps the accessible name via its text-indent), then paint
 * one crisp monochrome SVG as a centered background: single, dead-centered icon.
 */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
	position: absolute;
	top: clamp(1rem, 3vw, 2rem);
	right: clamp(1rem, 3vw, 2rem);
	z-index: 9;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	border-radius: var(--ch-radius-pill);
	background-color: rgba(255, 255, 255, 0.92);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111319' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1.15rem;
	border: 1px solid var(--ch-line);
	box-shadow: var(--ch-shadow-sm);
	font-size: 0;
	transition:
		transform var(--ch-motion-base) var(--ch-ease),
		box-shadow var(--ch-motion-base) var(--ch-ease),
		background-color var(--ch-motion-base) var(--ch-ease);
}

/* Suppress WooCommerce's CSS-drawn glass so only our centered SVG shows. */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger::before,
.woocommerce div.product div.images .woocommerce-product-gallery__trigger::after {
	content: none;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger:hover {
	transform: translateY(-1px);
	background-color: #fff;
	box-shadow: var(--ch-shadow-md);
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--ch-focus-ring-color);
}

/*
 * Sale flash ("onsale" badge). WooCommerce's default is a fixed-size circle
 * pinned to a negative offset (top/right: -0.5em), so it pokes outside its
 * container — clipped by the framed gallery and the rounded product cards —
 * and its min-width/height squashes anything longer than "Sale!". Reset it to
 * a tokenized amber pill that sizes to its label, using --ch-ink text for AA
 * contrast (mirrors .pricing-card__badge), and inset it INSIDE the frame on
 * every surface so it scales cleanly and never clips.
 */
.woocommerce span.onsale {
	position: absolute;
	z-index: 10;
	top: auto;
	right: auto;
	left: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0.32rem 0.8rem;
	border-radius: var(--ch-radius-pill);
	background: var(--ch-amber);
	color: var(--ch-ink);
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-align: center;
	text-transform: uppercase;
	box-shadow: 0 6px 14px rgba(167, 108, 32, 0.28);
}

/*
 * PDP: the flash is a sibling of div.images inside div.product, so anchor it to
 * the product card and inset by the card padding (1.5rem) plus the gallery's
 * inner padding so it lands on the image's top-left — clear of the top-right
 * zoom trigger.
 */
.woocommerce div.product > span.onsale {
	top: calc(1.5rem + clamp(1rem, 3vw, 2rem));
	left: calc(1.5rem + clamp(1rem, 3vw, 2rem));
}

/*
 * Archive / shop / category / brand loops (and PDP related products): the
 * flash renders inside the product link, so target it as a descendant — not a
 * direct child — and anchor it inside each card. The direct-child selector on
 * the PDP rule above deliberately excludes these nested loop badges.
 *
 * Anchored top-RIGHT here (PDP uses top-left): the child theme's demo ribbon
 * (.demo-loop-ribbon) sits top-left on every loop card, so a top-left sale pin
 * would land on top of it. left/margin are also reset explicitly because
 * WooCommerce's loop rule (.woocommerce ul.products li.product .onsale)
 * out-specifies the base reset above and sets left:auto + a negative margin —
 * and if both left and right resolve, the absolutely-positioned pill stretches
 * into a full-width bar.
 */
.woocommerce-area ul.products li.product span.onsale {
	top: 1.4rem;
	right: 1.4rem;
	left: auto;
	margin: 0;
}

/*
 * Thumbnail strip. flexslider floats the thumbs at fixed percentages; replace
 * that with an auto-fill grid so the strip adapts to any image count (the
 * --columns-N class is not assumed) and wraps cleanly on small screens.
 */
.woocommerce div.product div.images ol.flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
	gap: 0.6rem;
	margin: clamp(0.75rem, 2vw, 1.25rem) 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce div.product div.images ol.flex-control-thumbs li {
	width: auto;
	margin: 0;
	float: none;
}

.woocommerce div.product div.images ol.flex-control-thumbs img {
	display: block;
	width: 100%;
	border-radius: var(--ch-radius-sm);
	border: 1px solid var(--ch-line);
	opacity: 0.7;
	cursor: pointer;
	transition:
		opacity var(--ch-motion-base) var(--ch-ease),
		border-color var(--ch-motion-base) var(--ch-ease),
		box-shadow var(--ch-motion-base) var(--ch-ease);
}

.woocommerce div.product div.images ol.flex-control-thumbs img:hover {
	opacity: 1;
}

.woocommerce div.product div.images ol.flex-control-thumbs img.flex-active,
.woocommerce div.product div.images ol.flex-control-thumbs img:focus-visible {
	opacity: 1;
	border-color: var(--ch-amber);
	box-shadow: 0 0 0 2px var(--ch-amber);
}

.woocommerce-tabs,
.woocommerce table.shop_table,
.woocommerce-cart-form,
.cart_totals,
.checkout.woocommerce-checkout {
	background: rgba(255, 253, 248, 0.82);
	border-radius: 24px;
	padding: 1rem;
}

.woocommerce table.shop_table {
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid rgba(17, 19, 25, 0.08);
}

.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
	padding: 0.9rem;
}

@media (max-width: 980px) {
	.woocommerce-area .products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.woocommerce-area .products {
		grid-template-columns: 1fr;
	}

	.woocommerce div.product {
		padding: 1rem;
	}
}