/* WP Agent Theme — WooCommerce's own blocks (breadcrumbs, notices, single
 * product parts, mini cart, cart, checkout, order confirmation) styled with
 * the theme tokens. Loaded by WP Agent Builder's Woo module when WooCommerce
 * is active. Targets stable wc-block-* / woocommerce-* classes only.
 * Breakpoints: md 768px, lg 1025px. */

/* Page heads and notices. */
.wpab-woo-head .wp-block-query-title,
.wpab-woo-head .wp-block-post-title {
	margin: 8px 0 0;
}
.wpab-woo-head .wp-block-term-description {
	max-width: 56ch;
	margin-top: 12px;
	color: var(--wp--preset--color--muted);
}
.wpab-woo-head .wp-block-search {
	max-width: 480px;
	margin-top: 16px;
}
.wc-block-breadcrumbs,
.woocommerce-breadcrumb {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}
.wc-block-breadcrumbs a,
.woocommerce-breadcrumb a {
	color: inherit;
	text-decoration: none;
}
.wc-block-breadcrumbs a:hover,
.woocommerce-breadcrumb a:hover {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
}
.wpab-woo-notices:empty,
.wpab-woo-notices:not(:has(.wc-block-components-notice-banner, .woocommerce-message, .woocommerce-error, .woocommerce-info)) {
	display: none;
}
.wc-block-components-notice-banner {
	border-radius: 0;
}

/* Buttons of Woo blocks follow the brand colour. */
.wc-block-components-button:not(.is-link),
.wc-block-components-product-button__button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-mini-cart__footer-checkout {
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--surface);
	font-weight: 600;
}
.wc-block-components-button:not(.is-link):hover,
.wc-block-components-product-button__button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	opacity: 0.88;
}
.wc-block-mini-cart__footer-cart.wc-block-components-button {
	border: 1px solid currentColor;
	background: transparent;
	color: var(--wp--preset--color--ink);
}

/* Form fields (checkout, coupon, quantity). */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-quantity-selector {
	border-color: var(--wp--preset--color--line);
	border-radius: 0;
}
.wc-block-components-text-input.is-active input,
.wc-block-components-text-input input:focus {
	border-color: var(--wp--preset--color--ink);
}

/* Single product. */
.wpab-woo-product .wc-block-breadcrumbs {
	margin-bottom: 4px;
}
.wpab-woo-summary .wp-block-post-title {
	margin: 0;
	font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
	line-height: 1.15;
}
.wpab-woo-summary .wc-block-components-product-price {
	font-variant-numeric: tabular-nums;
}
.wpab-woo-summary .wp-block-post-excerpt__excerpt {
	margin: 0;
	color: var(--wp--preset--color--muted);
}
.wpab-woo-summary .wp-block-woocommerce-product-meta {
	padding-top: 14px;
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}
.wpab-woo-summary .wp-block-woocommerce-product-meta a {
	color: inherit;
}
.wpab-woo-summary .wp-block-woocommerce-product-meta > * {
	margin-block: 4px;
}

/* Variation chips and quantity stepper (add-to-cart-with-options). Swatch
 * rows (colour terms, see the plugin's Woo\Swatches) keep Woo's round swatch
 * look, styled below. */
.wpab-woo-summary .wc-block-product-filter-chips:not(.is-style-swatch) .wc-block-product-filter-chips__item,
.wpab-woo-summary .wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill {
	min-width: 48px;
	min-height: 44px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--ink);
}
.wpab-woo-summary .wc-block-product-filter-chips:not(.is-style-swatch) .wc-block-product-filter-chips__item[aria-checked="true"],
.wpab-woo-summary .wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill--selected,
.wpab-woo-summary .wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill[aria-checked="true"] {
	border-color: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--surface);
}
.wpab-woo-summary .wc-block-components-quantity-selector {
	min-height: 52px;
}
/* Colour swatches: circles of settings.custom.woo.swatchSize (32px), a ring in
 * the brand colour around the chosen one; the term name stays the button's
 * accessible name (Woo hides the text visually). */
.wp-block-woocommerce-add-to-cart-with-options .wc-block-product-filter-chips.is-style-swatch .wc-block-product-filter-chips__items {
	gap: 10px;
}
.wp-block-woocommerce-add-to-cart-with-options .wc-block-product-filter-chips.is-style-swatch .wc-block-product-filter-chips__item {
	padding: 3px;
}
.wp-block-woocommerce-add-to-cart-with-options .wc-block-product-filter-chips.is-style-swatch .wc-block-product-filter-chips__swatch {
	width: var(--wp--custom--woo--swatch-size, 32px);
	height: var(--wp--custom--woo--swatch-size, 32px);
	border-color: var(--wp--preset--color--line);
}
.wp-block-woocommerce-add-to-cart-with-options .wc-block-product-filter-chips.is-style-swatch .wc-block-product-filter-chips__item[aria-checked="true"] {
	border-color: var(--wp--preset--color--brand);
}
.wpab-woo-summary .wc-block-components-product-button__button,
.wpab-woo-summary .single_add_to_cart_button {
	min-height: 52px;
	padding-inline: 32px;
}

/* Classic product gallery (woocommerce/product-image-gallery), in any
 * template (also a site's own copy saved through REST): full column width,
 * thumbnails under the image on phones and in a column on the left from lg.
 * Layout classes on the gallery block (className):
 *   wpab-gallery-thumbs-side-md  thumbnail column from md (768px) up;
 *   wpab-gallery-thumbs-below    thumbnails always under the image.
 * Sizes from Global Styles settings.custom.woo (all optional):
 *   galleryThumbWidth (88px), galleryGap (16px), galleryThumbRatio (auto, e.g. "4/5").
 * Thumbnail selectors outrank Woo's ".woocommerce div.product div.images
 * .flex-control-thumbs li" (0,4,3); the others match Woo's and load later. */
.wp-block-woocommerce-product-image-gallery {
	--wpab-gallery-thumb-w: var(--wp--custom--woo--gallery-thumb-width, 88px);
	--wpab-gallery-gap: var(--wp--custom--woo--gallery-gap, 16px);
}
.wp-site-blocks .wp-block-woocommerce-product-image-gallery {
	max-width: none;
}
.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery {
	position: relative;
	width: 100%;
	margin: 0;
}
.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery__wrapper {
	margin: 0;
}
.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
	background: var(--wp--preset--color--tint);
}
div.wp-block-woocommerce-product-image-gallery div.woocommerce-product-gallery.images ol.flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wpab-gallery-gap);
	margin: var(--wpab-gallery-gap) 0 0;
	padding: 0;
	list-style: none;
}
div.wp-block-woocommerce-product-image-gallery div.woocommerce-product-gallery.images ol.flex-control-thumbs > li {
	width: auto;
	margin: 0;
	float: none;
}
div.wp-block-woocommerce-product-image-gallery div.woocommerce-product-gallery.images ol.flex-control-thumbs img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--wp--custom--woo--gallery-thumb-ratio, auto);
	object-fit: cover;
	opacity: 0.55;
	cursor: pointer;
	transition: opacity 0.2s ease;
}
div.wp-block-woocommerce-product-image-gallery div.woocommerce-product-gallery.images ol.flex-control-thumbs img:hover,
div.wp-block-woocommerce-product-image-gallery div.woocommerce-product-gallery.images ol.flex-control-thumbs img.flex-active {
	opacity: 1;
}
.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
}
.wp-site-blocks .wp-block-woocommerce-product-image-gallery span.onsale {
	top: 12px;
	left: 12px;
	min-width: 0;
	min-height: 0;
	padding: 4px 10px;
	border-radius: 0;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
}
@media (min-width: 768px) {
	div.wp-block-woocommerce-product-image-gallery.wpab-gallery-thumbs-side-md .woocommerce-product-gallery:has(.flex-control-thumbs) {
		display: grid;
		grid-template-columns: var(--wpab-gallery-thumb-w) minmax(0, 1fr);
		gap: var(--wpab-gallery-gap);
		align-items: start;
	}
	div.wp-block-woocommerce-product-image-gallery.wpab-gallery-thumbs-side-md .woocommerce-product-gallery:has(.flex-control-thumbs) > .flex-viewport,
	div.wp-block-woocommerce-product-image-gallery.wpab-gallery-thumbs-side-md .woocommerce-product-gallery:has(.flex-control-thumbs) > .woocommerce-product-gallery__wrapper {
		grid-column: 2;
		grid-row: 1;
	}
	div.wp-block-woocommerce-product-image-gallery.wpab-gallery-thumbs-side-md div.woocommerce-product-gallery.images ol.flex-control-thumbs {
		grid-column: 1;
		grid-row: 1;
		grid-template-columns: minmax(0, 1fr);
		margin: 0;
	}
	/* The sale badge sits on the main image, right of the thumbnail column. */
	div.wp-block-woocommerce-product-image-gallery.wpab-gallery-thumbs-side-md:has(.flex-control-thumbs) span.onsale {
		left: calc(var(--wpab-gallery-thumb-w) + var(--wpab-gallery-gap) + 12px);
	}
}
@media (min-width: 1025px) {
	div.wp-block-woocommerce-product-image-gallery:not(.wpab-gallery-thumbs-below) .woocommerce-product-gallery:has(.flex-control-thumbs) {
		display: grid;
		grid-template-columns: var(--wpab-gallery-thumb-w) minmax(0, 1fr);
		gap: var(--wpab-gallery-gap);
		align-items: start;
	}
	div.wp-block-woocommerce-product-image-gallery:not(.wpab-gallery-thumbs-below) .woocommerce-product-gallery:has(.flex-control-thumbs) > .flex-viewport,
	div.wp-block-woocommerce-product-image-gallery:not(.wpab-gallery-thumbs-below) .woocommerce-product-gallery:has(.flex-control-thumbs) > .woocommerce-product-gallery__wrapper {
		grid-column: 2;
		grid-row: 1;
	}
	div.wp-block-woocommerce-product-image-gallery:not(.wpab-gallery-thumbs-below) div.woocommerce-product-gallery.images ol.flex-control-thumbs {
		grid-column: 1;
		grid-row: 1;
		grid-template-columns: minmax(0, 1fr);
		margin: 0;
	}
	/* The sale badge sits on the main image, right of the thumbnail column. */
	div.wp-block-woocommerce-product-image-gallery:not(.wpab-gallery-thumbs-below):has(.flex-control-thumbs) span.onsale {
		left: calc(var(--wpab-gallery-thumb-w) + var(--wpab-gallery-gap) + 12px);
	}
}

/* Product details: Woo's minimal tab style (is-style-minimal), spaced from the row. */
.wpab-woo-details {
	margin-top: 56px;
}
.wpab-woo-details .woocommerce-Tabs-panel > h2:first-child {
	font-size: var(--wp--preset--font-size--x-large, 1.5rem);
}

/* Related products: hidden when there are none. */
.wpab-woo-related__title {
	margin: 0 0 28px;
}
.wpab-woo-related:not(:has(.wpab-product-card)) {
	display: none;
}

/* Mini cart in the header: icon in the header text colour, accent count badge. */
.wc-block-mini-cart__button {
	color: inherit;
}
.wc-block-mini-cart__badge {
	border-color: transparent;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__title {
	font-size: var(--wp--preset--font-size--x-large, 1.5rem);
}

/* Cart. */
.wc-block-cart .wc-block-cart-items {
	border-top: 1px solid var(--wp--preset--color--line);
}
.wc-block-cart .wc-block-cart-items__row {
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.wc-block-cart .wc-block-cart-items th,
.wc-block-components-totals-item__label {
	color: var(--wp--preset--color--muted);
}
.wc-block-cart .wc-block-components-product-name {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	text-decoration: none;
}
.wc-block-cart__sidebar .wc-block-components-sidebar,
.wc-block-cart .wc-block-cart__totals-title {
	background: transparent;
}
.wc-block-cart__sidebar {
	padding: 24px;
	background: var(--wp--preset--color--tint);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
}

/* Checkout (Woo's boxed order summary is kept). */
.wc-block-components-checkout-step__title {
	font-weight: 700;
}
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted {
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--brand);
}
.wc-block-components-radio-control__input:checked {
	border-color: var(--wp--preset--color--brand);
}
.wc-block-components-radio-control__input:checked::before {
	background: var(--wp--preset--color--brand);
}

/* Order confirmation. */
.wc-block-order-confirmation-status {
	margin: 0;
}
.wc-block-order-confirmation-status h1 {
	margin: 0 0 8px;
}
.wc-block-order-confirmation-summary {
	margin-bottom: 40px;
}
.wc-block-order-confirmation-totals__table,
.wc-block-order-confirmation-totals table {
	width: 100%;
	border-collapse: collapse;
}
.wc-block-order-confirmation-totals th,
.wc-block-order-confirmation-totals td {
	padding: 12px 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	text-align: start;
}
.wpab-woo-order .wp-block-heading {
	margin: 32px 0 16px;
}