/**
 * Gam Zu Rose — WooCommerce.
 * Quiet, editorial, no rounded corners, no shouting.
 */

.gzr-woo__body { padding-bottom: var(--gzr-step); }
body:not(.gzr-has-hero) .gzr-woo .gzr-pagehead { padding-top: clamp(3rem, 8vw, 7rem); }

/* --------------------------------------------------------------- toolbar */

.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	font-size: 0.625rem;
	letter-spacing: var(--gzr-tracking-md);
	text-transform: uppercase;
	color: var(--gzr-muted);
	margin: 0;
}

.woocommerce .woocommerce-ordering select {
	border: 0;
	border-bottom: 1px solid var(--gzr-rule);
	padding: 0.4em 1.5em 0.4em 0;
	font-size: 0.625rem;
	letter-spacing: var(--gzr-tracking-md);
	text-transform: uppercase;
	background: transparent;
	width: auto;
}

.woocommerce .products + .woocommerce-pagination,
.woocommerce-page .woocommerce-pagination { margin-top: var(--gzr-step-sm); }

.gzr-woo__body > .woocommerce-result-count,
.gzr-woo__body > form.woocommerce-ordering { display: inline-block; }

/* ------------------------------------------------------------------ grid */

/* WooCommerce clears its old float layout with `::before`/`::after`
   pseudo-elements set to `display: table`. In a float layout they are
   invisible; in a grid or flex container they are GRID ITEMS, so they take
   real cells — the first product lands in column 2 and the last one wraps to
   a row of its own. Kill them on every WooCommerce container this stylesheet
   lays out with grid or flex. Anything that turns one of those containers
   into a grid later must be added here too. */

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after,
.gzr-product__top::before,
.gzr-product__top::after,
.gzr-product__meta::before,
.gzr-product__meta::after {
	content: none;
	display: none;
}

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1.75rem, 3vw, 3rem) clamp(1rem, 2vw, 2rem);
	margin: 0 0 var(--gzr-step-sm);
	padding: 0;
	list-style: none;
	clear: both;
}

@media (min-width: 900px) {
	.woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
	.woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
	.woocommerce ul.products.columns-5 { grid-template-columns: repeat(5, 1fr); }
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	text-align: left;
	position: relative;
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product > a:first-of-type { display: block; }

.woocommerce ul.products li.product a img {
	margin: 0;
	box-shadow: none;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gzr-product__frame { position: relative; overflow: hidden; background: #e7e2da; }
.gzr-product__frame img { transition: opacity 0.6s var(--gzr-ease), transform 1.4s var(--gzr-ease); }

.gzr-product__alt {
	position: absolute !important;
	inset: 0;
	opacity: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

li.product:hover .gzr-product__alt { opacity: 1; }
li.product:hover .gzr-product__frame img { transform: scale(1.04); }

.gzr-product__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.35rem 1rem;
	margin-top: 1.1rem;
	margin-bottom: 0.85rem;
	flex-wrap: wrap;
}

@media (max-width: 640px) {
	.gzr-product__meta { flex-direction: column; align-items: flex-start; }
}

.woocommerce ul.products li.product .gzr-product__title {
	font-family: var(--gzr-font-ui);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: var(--gzr-tracking-sm);
	text-transform: uppercase;
	line-height: 1.4;
	padding: 0;
	margin: 0;
}

.woocommerce ul.products li.product .price {
	font-family: var(--gzr-font-ui);
	font-size: 0.75rem;
	font-weight: 300;
	color: var(--gzr-muted);
	margin: 0;
	white-space: nowrap;
}

.woocommerce ul.products li.product .price del { opacity: 0.5; margin-right: 0.4em; }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--gzr-accent); }

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	display: inline-block;
	align-self: flex-start;
	margin-top: auto;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--gzr-rule);
	border-radius: 0;
	padding: 0.35em 0;
	color: var(--gzr-ink);
	font-family: var(--gzr-font-ui);
	font-size: 0.625rem;
	font-weight: 400;
	letter-spacing: var(--gzr-tracking-md);
	text-transform: uppercase;
	transition: border-color 0.35s var(--gzr-ease), color 0.35s var(--gzr-ease);
}

.woocommerce ul.products li.product .button:hover {
	background: none;
	color: var(--gzr-accent);
	border-bottom-color: var(--gzr-accent);
}

.woocommerce span.onsale {
	display: none; /* replaced by .gzr-card__badge */
}

/* --------------------------------------------------------- single product */

.gzr-woo-single-top { margin-bottom: 2rem; }

/* The gallery and the summary are wrapped in .gzr-product__top (see
   inc/woocommerce.php) so that the sticky summary is clamped to that row.
   A sticky grid item is clamped to its containing block, not to its grid
   area, so with the grid on div.product the summary slid all the way down
   over the tabs and the related products. */

.gzr-product__top {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
	margin-bottom: clamp(2rem, 5vw, 5rem);
}

@media (min-width: 900px) {
	.gzr-product__top { grid-template-columns: 1.15fr 1fr; }
}

.woocommerce div.product .woocommerce-product-gallery { width: 100% !important; float: none !important; margin: 0; }
.woocommerce div.product .woocommerce-product-gallery__image img { width: 100%; height: auto; }
.woocommerce div.product .flex-control-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; margin-top: 0.5rem; padding: 0; }
.woocommerce div.product .flex-control-thumbs li { width: 100%; margin: 0; float: none; }

.woocommerce div.product div.summary { width: 100% !important; float: none !important; margin: 0; position: sticky; top: calc(var(--gzr-header-h) + 1.5rem); }

.woocommerce div.product .product_title {
	font-family: var(--gzr-font-display);
	font-size: clamp(2rem, 4vw, 3.25rem);
	font-weight: 300;
	line-height: 1.05;
	margin: 0 0 1rem;
	padding: 0;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--gzr-font-ui);
	font-size: 1rem;
	font-weight: 300;
	letter-spacing: var(--gzr-tracking-sm);
	color: var(--gzr-ink);
	margin: 0 0 2rem;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--gzr-ink-soft);
	max-width: 46ch;
	margin-bottom: 2rem;
	font-size: 0.9375rem;
	line-height: 1.75;
}

.woocommerce div.product form.cart { margin-bottom: 1.5rem; }
.woocommerce div.product form.cart .variations { margin-bottom: 1.5rem; width: 100%; }
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td { padding: 0.5rem 0; text-align: left; }
.woocommerce div.product form.cart .variations label {
	font-size: 0.625rem;
	letter-spacing: var(--gzr-tracking-md);
	text-transform: uppercase;
	color: var(--gzr-muted);
	margin: 0;
}
.woocommerce div.product form.cart .variations select {
	border: 0;
	border-bottom: 1px solid var(--gzr-rule);
	padding: 0.6em 0;
	font-size: 0.875rem;
	background: transparent;
}

.woocommerce .quantity .qty {
	width: 5rem;
	text-align: center;
	border: 1px solid var(--gzr-rule);
	padding: 0.85em 0.5em;
	font-size: 0.875rem;
}

.woocommerce div.product form.cart .button,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
	background: var(--gzr-ink);
	color: var(--gzr-bone);
	border: 1px solid var(--gzr-ink);
	border-radius: 0;
	font-family: var(--gzr-font-ui);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: var(--gzr-tracking-lg);
	text-transform: uppercase;
	padding: 1.15em 2.6em;
	line-height: 1;
	transition: background 0.4s var(--gzr-ease), color 0.4s var(--gzr-ease), border-color 0.4s var(--gzr-ease);
}

.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover {
	background: var(--gzr-accent);
	border-color: var(--gzr-accent);
	color: #fff;
}

.woocommerce div.product form.cart .button { width: 100%; }

.woocommerce .product_meta {
	font-size: 0.625rem;
	letter-spacing: var(--gzr-tracking-sm);
	text-transform: uppercase;
	color: var(--gzr-muted);
	border-top: 1px solid var(--gzr-rule);
	padding-top: 1.5rem;
	margin-top: 1.5rem;
	display: grid;
	gap: 0.5rem;
}

.gzr-reassurance {
	list-style: none;
	margin: 1.75rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.gzr-reassurance li {
	font-size: 0.6875rem;
	letter-spacing: var(--gzr-tracking-sm);
	text-transform: uppercase;
	color: var(--gzr-muted);
	padding-left: 1.4rem;
	position: relative;
}

.gzr-reassurance li::before {
	content: "";
	position: absolute;
	left: 0; top: 0.55em;
	width: 5px; height: 5px;
	border-radius: 50%;
	background: var(--gzr-accent);
}

/* -------------------------------------------------------------- tabs etc */

.woocommerce div.product .woocommerce-tabs { margin-top: var(--gzr-step-sm); width: 100%; }
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 2rem;
	border-bottom: 1px solid var(--gzr-rule);
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: none;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: 0 0 1rem;
	font-family: var(--gzr-font-ui);
	font-size: 0.625rem;
	font-weight: 400;
	letter-spacing: var(--gzr-tracking-md);
	text-transform: uppercase;
	color: var(--gzr-muted);
	border-bottom: 1px solid transparent;
	margin-bottom: -1px;
	display: block;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--gzr-ink); border-bottom-color: var(--gzr-ink); }
.woocommerce div.product .woocommerce-tabs .panel { max-width: var(--gzr-measure); }
.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: 1.5rem; }

.woocommerce .related > h2,
.woocommerce .up-sells > h2,
.woocommerce .cross-sells > h2 {
	font-family: var(--gzr-font-display);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 300;
	margin: var(--gzr-step-sm) 0 2rem;
}

/* ----------------------------------------------------------- cart etc */

.woocommerce table.shop_table {
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
}
.woocommerce table.shop_table th {
	font-family: var(--gzr-font-ui);
	font-size: 0.625rem;
	font-weight: 400;
	letter-spacing: var(--gzr-tracking-md);
	text-transform: uppercase;
	color: var(--gzr-muted);
	border-bottom: 1px solid var(--gzr-rule);
	padding: 1rem 0.75rem;
}
.woocommerce table.shop_table td { border-top: 0; border-bottom: 1px solid var(--gzr-rule); padding: 1.25rem 0.75rem; font-size: 0.875rem; }
.woocommerce table.shop_table td:first-child, .woocommerce table.shop_table th:first-child { padding-left: 0; }
.woocommerce table.shop_table td:last-child, .woocommerce table.shop_table th:last-child { padding-right: 0; }

.woocommerce-cart table.cart img { width: 72px; }

.woocommerce .cart-collaterals .cart_totals > h2,
.woocommerce-checkout h3 {
	font-family: var(--gzr-font-ui);
	font-size: 0.625rem;
	font-weight: 400;
	letter-spacing: var(--gzr-tracking-lg);
	text-transform: uppercase;
	color: var(--gzr-muted);
	margin-bottom: 1.5rem;
}

.woocommerce form .form-row label { font-size: 0.625rem; letter-spacing: var(--gzr-tracking-md); text-transform: uppercase; color: var(--gzr-muted); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row .select2-container .select2-selection--single {
	border: 1px solid var(--gzr-rule);
	border-radius: 0;
	padding: 0.85em 1em;
	height: auto;
	font-size: 0.9375rem;
	background: transparent;
}

.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border-top: 0;
	border-left: 2px solid var(--gzr-accent);
	background: var(--gzr-paper);
	border-radius: 0;
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	padding: 1.25rem 1.5rem;
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none; }
.woocommerce-message a.button, .woocommerce-info a.button { padding: 0.7em 1.4em; font-size: 0.625rem; }

.woocommerce nav.woocommerce-pagination ul { border: 0; display: flex; gap: 0.5rem; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	border: 1px solid var(--gzr-rule);
	min-width: 2.75rem;
	height: 2.75rem;
	display: grid;
	place-items: center;
	padding: 0;
	font-size: 0.75rem;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: var(--gzr-ink);
	border-color: var(--gzr-ink);
	color: var(--gzr-bone);
}

.woocommerce .star-rating span::before { color: var(--gzr-accent); }

/* ------------------------------------------- block cart / block checkout */

/* WooCommerce ships Cart and Checkout as "alignwide" blocks: a fixed 1280px
   width pulled out of the content column with a negative margin. Inside the
   theme's shell that pushed them off the right edge of the page. Page.php now
   gives these three pages the full-width shell; this keeps the blocks inside
   whatever column they land in. */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart.alignwide,
.wp-block-woocommerce-checkout.alignwide,
.woocommerce-cart .entry-content > .alignwide,
.woocommerce-checkout .entry-content > .alignwide {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.wc-block-components-sidebar-layout { max-width: 100%; }

.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background: var(--gzr-ink);
	color: var(--gzr-bone);
	border-radius: 0;
	font-family: var(--gzr-font-ui);
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.wc-block-components-button:not(.is-link):hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover { background: var(--gzr-accent); }

.wc-block-components-title,
.wc-block-cart__totals-title,
.wc-block-components-checkout-step__title {
	font-family: var(--gzr-font-display);
	font-weight: 300;
	letter-spacing: 0;
	text-transform: none;
}

/* -------------------------------------------------- WooCommerce purple */

/* WooCommerce 11 derives its accents from --wc-primary (#720eec): notices,
   badges, block components, focus rings. Point its variables at the theme
   palette so nothing anywhere renders in WooCommerce purple. */

:root {
	--woocommerce: var(--gzr-ink);
	--wc-primary: var(--gzr-ink);
	--wc-primary-text: var(--gzr-bone);
	--wc-secondary: var(--gzr-bone);
	--wc-secondary-text: var(--gzr-ink);
	--wc-highlight: var(--gzr-accent);
	--wc-highligh-text: var(--gzr-bone); /* WooCommerce's own spelling */
	--wc-highlight-text: var(--gzr-bone);
	--wc-content-bg: var(--gzr-paper);
	--wc-subtext: var(--gzr-muted);
}

/* The .alt and .disabled states are hard-coded purple in WooCommerce's
   stylesheet rather than taken from the variable above, so they need naming.
   The add-to-cart button on a variable product is .alt.disabled until an
   option is chosen — that is the one that showed lavender. Opacity is left
   alone so a disabled button still reads as disabled. */

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
	background-color: var(--gzr-accent);
	border-color: var(--gzr-accent);
	color: var(--gzr-bone);
}

.woocommerce a.button.alt.disabled,
.woocommerce button.button.alt.disabled,
.woocommerce input.button.alt.disabled,
.woocommerce a.button.alt.disabled:hover,
.woocommerce button.button.alt.disabled:hover,
.woocommerce input.button.alt.disabled:hover,
.woocommerce a.button.disabled,
.woocommerce button.button.disabled,
.woocommerce input.button.disabled,
.woocommerce a.button.disabled:hover,
.woocommerce button.button.disabled:hover,
.woocommerce input.button.disabled:hover,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled:hover,
.woocommerce button.button:disabled[disabled],
.woocommerce button.button:disabled[disabled]:hover,
.woocommerce #respond input#submit.disabled,
.woocommerce #respond input#submit:disabled {
	background-color: var(--gzr-ink);
	border-color: var(--gzr-ink);
	color: var(--gzr-bone);
}

/* Breathing room between the quantity field and add-to-cart. WooCommerce
   sets the margin with `div.quantity`, so match that specificity. */

.woocommerce div.product form.cart div.quantity,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart div.quantity {
	margin: 0 0 1.1rem;
}