/**
 * Cartavera — WooCommerce components shared across pages:
 * product cards, collections, catalog layout, breadcrumbs, notices, mini cart.
 *
 * Selectors target WooCommerce block classes only; no WooCommerce templates
 * are overridden.
 */

/* ---------- Breadcrumbs, notices, results ---------- */

.woocommerce-breadcrumb,
.wp-block-woocommerce-breadcrumbs {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	margin-bottom: var(--wp--preset--spacing--30) !important;
}

.wp-block-woocommerce-breadcrumbs a {
	color: var(--wp--preset--color--hyperlink);
}

.cv-crumb-sep {
	display: inline-block;
	margin: 0 6px;
	color: var(--wp--preset--color--muted);
}

.wc-block-components-notice-banner {
	border-radius: var(--wp--custom--radius--card);
}

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

.cv-collection .wc-block-product-template {
	gap: var(--wp--custom--grid--gap);
	margin: 0;
	padding: 0;
}

.cv-collection .wc-block-product {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	box-sizing: border-box;
	text-align: start;
}

.cv-collection .wc-block-product > * {
	margin: 0 !important;
}

/* Grid cards sit on the canvas as white tiles; inside white sections they are flat. */
.cv-collection--grid .wc-block-product {
	padding: var(--wp--custom--card--padding);
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--card);
	transition: box-shadow var(--wp--custom--transition);
}

/* Image */
.cv-card__image,
.cv-collection .wc-block-components-product-image {
	margin: 0 0 4px !important;
	border-radius: 6px;
	background: var(--wp--preset--color--subtle);
	overflow: hidden;
}

.cv-collection .wc-block-components-product-image a {
	display: block;
}

.cv-collection .wc-block-components-product-image img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	mix-blend-mode: var(--wp--custom--image-blend, multiply);
	transition: transform 300ms ease;
}

.cv-collection .wc-block-product:hover .wc-block-components-product-image img {
	transform: scale(1.03);
}

/* Badge */
.cv-card__badge {
	position: absolute;
	z-index: 2;
	top: calc(var(--wp--custom--card--padding) + 8px);
	inset-inline-start: calc(var(--wp--custom--card--padding) + 8px);
}

.cv-section .cv-card__badge,
.is-style-cv-carousel .cv-card__badge {
	top: 8px;
	inset-inline-start: 8px;
}

/*
 * "New" and "Best seller" badges: under the savings badge, in the same corner,
 * so the two never overlap however narrow the card is.
 */
.cv-card__badges {
	position: absolute;
	z-index: 2;
	top: calc(var(--wp--custom--card--padding) + 8px);
	inset-inline-start: calc(var(--wp--custom--card--padding) + 8px);
	flex-direction: column;
	align-items: flex-start;
}

.cv-section .cv-card__badges,
.is-style-cv-carousel .cv-card__badges {
	top: 8px;
	inset-inline-start: 8px;
}

.wc-block-product:has(> .cv-card__badge) > .cv-card__badges {
	top: calc(var(--wp--custom--card--padding) + 36px);
}

.cv-section .wc-block-product:has(> .cv-card__badge) > .cv-card__badges,
.is-style-cv-carousel .wc-block-product:has(> .cv-card__badge) > .cv-card__badges {
	top: 36px;
}

.cv-card__wishlist {
	margin-top: 6px;
}

/* Title */
.cv-collection .cv-card__title {
	font-size: var(--wp--preset--font-size--base);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(1.35em * 2);
}

.cv-collection--grid .cv-card__title {
	-webkit-line-clamp: 3;
	min-height: calc(1.35em * 3);
}

.cv-collection .cv-card__title a {
	color: var(--wp--preset--color--contrast);
}

.cv-collection .cv-card__title a:hover {
	color: var(--wp--preset--color--hyperlink-hover);
	text-decoration: none;
}

/* Price */
.cv-collection .wc-block-components-product-price,
.cv-buy__price,
.cv-pdp__price {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 750;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
}

.wc-block-components-product-price del,
.cv-pdp del,
.cv-collection del {
	color: var(--wp--preset--color--muted);
	font-size: 0.72em;
	font-weight: 400;

	/* WooCommerce prints the regular price before the sale price, so the gap goes between them
	   rather than before the first, which would indent the price from its card edge. */
	margin-inline-end: 4px;
}

/* Each amount is one run whose direction comes from its own text, as WooCommerce's <bdi>
 * does in product cards. The single product price leaves the <bdi> out, so on right-to-left
 * pages "$119.99" would otherwise show as "119.99$". */
.rtl .woocommerce-Price-amount {
	unicode-bidi: plaintext;
}

.wc-block-components-product-price ins,
.cv-pdp ins {
	text-decoration: none;
	background: none;
}

/* The React price component orders the regular price after the sale price. */
.wc-block-components-product-price .wc-block-components-product-price__regular {
	order: 2;
	margin-inline: 4px 0;
}

/* Stock: only surface the states shoppers need to know about. */
.cv-card__stock {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.cv-card__stock.wc-block-components-product-stock-indicator--in-stock {
	display: none;
}

.wc-block-components-product-stock-indicator--in-stock {
	color: var(--wp--preset--color--success);
}

.wc-block-components-product-stock-indicator--out-of-stock {
	color: var(--wp--preset--color--deal);
}

.wc-block-components-product-stock-indicator--low-stock,
.wc-block-components-product-stock-indicator--available-on-backorder {
	color: var(--wp--custom--warning);
}

/* Add to cart */
.cv-collection .cv-card__button {
	margin-top: auto !important;
	padding-top: 6px;
	justify-content: flex-start;
	text-align: start;
}

.cv-collection .wc-block-components-product-button__button {
	width: 100%;
	min-height: 40px;
	padding: 8px 14px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 650;
	justify-content: center;
}

.cv-collection .wc-block-components-product-button .added_to_cart {
	display: block;
	margin-top: 6px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-align: center;
}

/* Tiles (2 × 2 images on the homepage showcase). */
.is-style-cv-tiles .wc-block-product-template {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 10px !important;
}

.is-style-cv-tiles .wc-block-product {
	padding: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.is-style-cv-tiles .wc-block-components-product-image {
	margin: 0 !important;
}

/* Carousel row. */
.is-style-cv-carousel .wc-block-product-template {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	overscroll-behavior-x: contain;
	padding-bottom: 8px !important;
	grid-template-columns: none !important;
}

@media (hover: hover) and (min-width: 782px) {

	.cv-carousel.is-style-cv-carousel .wc-block-product-template {
		scrollbar-width: none;
	}

	.cv-carousel.is-style-cv-carousel .wc-block-product-template::-webkit-scrollbar {
		display: none;
	}
}

.is-style-cv-carousel .wc-block-product {
	flex: 0 0 clamp(150px, calc((100% - 5 * var(--wp--custom--grid--gap)) / 6), 220px);
	width: auto !important;
	scroll-snap-align: start;
}

/* Grid card hover, and the flat cards inside white sections (kept after the hover). */
.cv-collection--grid .wc-block-product:hover {
	box-shadow: var(--wp--preset--shadow--md);
}

.cv-section.cv-collection--grid .wc-block-product {
	padding: 0 0 8px;
	background: transparent;
	box-shadow: none;
}

@media (max-width: 600px) {

	@media (hover: hover) and (min-width: 782px) {

	.cv-carousel.is-style-cv-carousel .wc-block-product-template {
		scrollbar-width: none;
	}

	.cv-carousel.is-style-cv-carousel .wc-block-product-template::-webkit-scrollbar {
		display: none;
	}
}

.is-style-cv-carousel .wc-block-product {
		flex-basis: 42%;
	}
}

/* ---------- Ratings in WooCommerce blocks ---------- */

.wc-block-components-product-rating__stars,
.star-rating {
	color: var(--wp--preset--color--rating);
}

/* WooCommerce draws empty stars as the filled colour at 50 % opacity; a solid
 * grey keeps 3:1 between filled and empty stars (non-text contrast). */
.wc-block-components-product-rating__stars::before {
	color: var(--wp--preset--color--line);
	opacity: 1;
}

/* ---------- Catalog layout ---------- */

.cv-catalog__layout {
	align-items: flex-start !important;
}

.cv-catalog__sidebar {
	position: sticky;
	top: 16px;
}

.cv-catalog__main {
	min-width: 0;
}

.cv-catalog__head {
	margin-bottom: 4px;
}

.cv-catalog__title {
	margin: 0;
	font-weight: 750;
}

.cv-catalog__desc {
	margin-top: 6px;
	color: var(--wp--preset--color--muted);
	max-width: 80ch;
}

.cv-catalog__toolbar {
	margin: 10px 0 var(--wp--preset--spacing--30) !important;
	padding: 8px 12px;
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--preset--shadow--sm);
	align-items: center !important;
}

.cv-catalog__toolbar .woocommerce-result-count {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.cv-catalog__toolbar .woocommerce-ordering {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--wp--preset--font-size--small);
}

.woocommerce-ordering select,
.cv-catalog__toolbar .woocommerce-ordering select {
	min-height: 36px;
	padding-block: 4px;
	padding-inline: 12px 32px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--control);
	background-color: var(--wp--preset--color--subtle);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
}

.cv-catalog .cv-collection--grid .wc-block-product-template {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--wp--custom--grid--min-card)), 1fr)) !important;
}

.cv-empty {
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--card);
	text-align: center;
}

.cv-catalog .wp-block-cartavera-recently-viewed,
.cv-catalog .cv-recent {
	margin-top: var(--wp--preset--spacing--60);
}

@media (max-width: 781px) {

	.cv-catalog__layout {
		flex-direction: column;
		gap: 8px !important;
	}

	.cv-catalog__sidebar {
		position: static;
		flex-basis: auto !important;
		width: 100%;
	}

	.cv-catalog .cv-collection--grid .wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 8px !important;
	}

	.cv-collection--grid .wc-block-product {
		padding: 10px;
	}

	.cv-collection--grid .cv-card__title {
		font-size: var(--wp--preset--font-size--small);
	}

	.cv-catalog__toolbar {
		padding: 6px 10px;
	}
}

@media (max-width: 360px) {

	.cv-catalog .cv-collection--grid .wc-block-product-template {
		grid-template-columns: 1fr !important;
	}
}

/* WooCommerce's show-password toggle is 22 px; give it a 32 px target (WCAG 2.5.8). */
.woocommerce form .password-input .show-password-input {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	min-height: 32px;
	inset-inline-end: 0.35em;
}

/* ---------- Deals page ---------- */

.cv-deals__intro .wp-block-post-title {
	margin: 0;
}

.cv-deals__intro .wp-block-post-content:empty {
	display: none;
}

/* ---------- Mini cart drawer ---------- */

/*
 * WooCommerce only fades the closed drawer out, which leaves its close button
 * and links in the tab order. Hide it from focus and assistive technology
 * once the fade has finished.
 */
.wc-block-components-drawer__screen-overlay--is-hidden {
	visibility: hidden;
	transition: opacity 0.3s, visibility 0s 0.3s;
}


.wc-block-mini-cart__drawer .components-modal__content {
	background: var(--wp--preset--color--base);
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__title {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 750;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer {
	background: var(--wp--preset--color--subtle);
	border-top: 1px solid var(--wp--preset--color--line);
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout {
	background: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--on-accent) !important;
	border-color: transparent !important;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-cart {
	border-radius: var(--wp--custom--radius--button);
}

/* ---------- Buttons rendered by WooCommerce ---------- */

.wc-block-components-button:not(.is-link),
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button {
	border-radius: var(--wp--custom--radius--button);
	font-weight: 650;
}

.woocommerce button.button.alt,
.woocommerce a.button.alt,
.single_add_to_cart_button {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}

.woocommerce button.button.alt:hover,
.single_add_to_cart_button:hover {
	background: var(--wp--preset--color--accent-strong);
	color: var(--wp--preset--color--on-accent);
}

/* ---------- Extensions (see docs/COMPATIBILITY.md) ---------- */

/* WooCommerce Multilingual & Multicurrency, "Dropdown" currency switcher. WCML paints it
   white with a #cdcdcd border (1.6:1) and the text inherits the page colour, so it was
   unreadable in dark variations. Drawn with the theme's control tokens instead; the width
   follows the currency name rather than wrapping it in WCML's fixed 15.5em. */
.wcml-dropdown.wcml_currency_switcher {
	width: max-content;
	min-width: 15.5em;
	font-size: var(--wp--preset--font-size--small);
}

.wcml-dropdown.wcml_currency_switcher li,
.wcml-dropdown.wcml_currency_switcher .wcml-cs-submenu li {
	border-color: var(--wp--custom--control--border);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.wcml-dropdown.wcml_currency_switcher li:is(:hover, :focus-within) {
	background-color: var(--wp--preset--color--subtle);
}

.wcml-dropdown.wcml_currency_switcher :is(a, button) {
	padding-block: 10px;
	line-height: 1.4;
}