/*
 * Vendix on WooCommerce pages: the shop frame and sidebar, product cards, the
 * product page, and the theme colors (and so the Vendix palette when the design
 * system is on) on buttons, prices and notices. WooCommerce keeps its own layout
 * styles; these rules work on top of them.
 *
 * Loads after base.css on store pages and on pages with a WooCommerce block
 * (vendix_theme_needs_store_styles()). The cart, checkout, order and account
 * rules are in store-cart.css, which loads after this file only there.
 * Logical properties keep the layout right in RTL.
 */

:root {
	--vt-shop-gap: 1.5rem;
	--vt-shop-sidebar: 280px;
	--vt-badge-bg: var(--vt-accent);
	--vt-badge-color: var(--vt-accent-contrast);
}

.vt-woocommerce {
	padding-block: var(--vt-space);
}

/* Shop sidebar ---------------------------------------------------------- */

/*
 * A panel that slides in from the start side: on screens below 992px, and on
 * every screen in the off-canvas position. The Filters button opens it
 * (store.js); while closed it is hidden from the keyboard and screen readers.
 * It is fixed, so the clipped page edges (base.css) do not cut it.
 */
.vt-shop-sidebar {
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	z-index: 100000;
	width: min(360px, 88vw);
	padding: 1.25rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	background-color: #ffffff;
	box-shadow: 0 0 24px rgba(0, 0, 0, 0.16);
	visibility: hidden;
	transform: translateX(-100%);
}

[dir="rtl"] .vt-shop-sidebar {
	transform: translateX(100%);
}

.vt-shop-sidebar.is-open {
	visibility: visible;
	transform: none;
}

.vt-shop-sidebar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-block-end: 1.25rem;
}

.vt-shop-sidebar-title {
	margin: 0;
	font-size: 1.25rem;
}

.vt-shop-sidebar .vt-shop-sidebar-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-color: var(--vt-border);
	color: var(--vt-heading);
}

.vt-shop-sidebar .vt-shop-sidebar-close:hover,
.vt-shop-sidebar .vt-shop-sidebar-close:focus {
	background-color: var(--vt-surface);
	color: var(--vt-heading);
}

.vt-shop-sidebar-backdrop {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background-color: rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: no-preference) {
	.vt-shop-sidebar {
		transition: transform 0.25s ease, visibility 0s linear 0.25s;
	}

	.vt-shop-sidebar.is-open {
		transition: transform 0.25s ease;
	}
}

/* At 992px and up a sidebar at the start or end is a column beside the products. */
@media (min-width: 992px) {
	.vt-shop-sidebar-start .vt-store-layout,
	.vt-shop-sidebar-end .vt-store-layout {
		display: grid;
		grid-template-areas: "main sidebar";
		grid-template-columns: minmax(0, 1fr) var(--vt-shop-sidebar);
		gap: 3rem;
	}

	.vt-shop-sidebar-start .vt-store-layout {
		grid-template-areas: "sidebar main";
		grid-template-columns: var(--vt-shop-sidebar) minmax(0, 1fr);
	}

	.vt-store-layout > .site-main {
		grid-area: main;
	}

	.vt-shop-sidebar-start .vt-shop-sidebar,
	.vt-shop-sidebar-end .vt-shop-sidebar {
		position: static;
		z-index: auto;
		grid-area: sidebar;
		width: auto;
		padding: var(--vt-space) 0;
		overflow: visible;
		background-color: transparent;
		box-shadow: none;
		visibility: visible;
		transform: none;
		transition: none;
	}

	.vt-shop-sidebar-start .vt-shop-sidebar-header,
	.vt-shop-sidebar-end .vt-shop-sidebar-header,
	.vt-shop-sidebar-start .vt-shop-filter-toggle,
	.vt-shop-sidebar-end .vt-shop-filter-toggle {
		display: none;
	}
}

/* Toolbar: the Filters button, the result count and the sorting. */
.vt-shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin-block-end: 1.5rem;
}

.woocommerce .vt-shop-toolbar .woocommerce-result-count,
.woocommerce .vt-shop-toolbar .woocommerce-ordering {
	margin: 0;
}

.woocommerce .vt-shop-toolbar .woocommerce-ordering {
	margin-inline-start: auto;
}

.vt-shop-toolbar .orderby {
	width: auto;
	max-width: 100%;
	min-height: 44px;
}

.vt-shop-filter-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	font-weight: 600;
}

/* Without products the button stands above the notice. */
.vt-woocommerce > .vt-shop-filter-toggle {
	margin-block-end: 1.5rem;
}

/* Price filter widget: the slider in the theme colors instead of WooCommerce's purple. */
.woocommerce .widget_price_filter .ui-slider .ui-slider-range,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
	background-color: var(--vt-accent);
}

.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content {
	background-color: var(--vt-border);
}

.woocommerce .widget_price_filter .price_slider_amount .button {
	min-height: 44px;
}

/* Product cards --------------------------------------------------------- */

/*
 * WooCommerce floats the cards with set widths and clears the rows; the theme
 * places them on a grid instead. --vt-shop-columns follows the columns-N class
 * WooCommerce gives the list: at most three from 576px to 991px, and one or two
 * on phones (Customizer → Vendix → Store).
 */
.woocommerce ul.products {
	--vt-shop-columns: 4;
	display: grid;
	grid-template-columns: repeat(var(--vt-shop-columns), minmax(0, 1fr));
	gap: 2rem var(--vt-shop-gap);
	margin: 0 0 var(--vt-space);
	padding: 0;
}

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

.woocommerce ul.products.columns-1 {
	--vt-shop-columns: 1;
}

.woocommerce ul.products.columns-2 {
	--vt-shop-columns: 2;
}

.woocommerce ul.products.columns-3 {
	--vt-shop-columns: 3;
}

.woocommerce ul.products.columns-5 {
	--vt-shop-columns: 5;
}

.woocommerce ul.products.columns-6 {
	--vt-shop-columns: 6;
}

@media (max-width: 991px) {
	.woocommerce ul.products.columns-4,
	.woocommerce ul.products.columns-5,
	.woocommerce ul.products.columns-6 {
		--vt-shop-columns: 3;
	}
}

@media (max-width: 575px) {
	:root {
		--vt-shop-gap: 1rem;
	}

	.vt-shop-mobile-cols-1 ul.products[class*="columns-"] {
		--vt-shop-columns: 1;
	}

	.vt-shop-mobile-cols-2 ul.products[class*="columns-"]:not(.columns-1) {
		--vt-shop-columns: 2;
	}
}

.woocommerce ul.products[class*="columns-"] li.product {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: auto;
	margin: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link {
	align-self: stretch;
	margin-block-end: 0.875rem;
	color: inherit;
}

.vt-product-media {
	position: relative;
	margin-block-end: 0.75rem;
	overflow: hidden;
	border-radius: var(--vt-radius);
	background-color: var(--vt-surface);
}

.woocommerce ul.products li.product .vt-product-media img {
	margin: 0;
}

/* The second image shows while the pointer is over the card; touch screens never load it. */
.woocommerce ul.products li.product .vt-product-image-hover {
	display: none;
}

@media (hover: hover) {
	.woocommerce ul.products li.product .vt-product-media .vt-product-image-hover {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.woocommerce ul.products li.product:hover .vt-product-image-hover,
	.woocommerce ul.products li.product .woocommerce-loop-product__link:focus-visible .vt-product-image-hover {
		opacity: 1;
	}
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 0;
	margin-block-end: 0.375rem;
	color: var(--vt-heading);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
}

.woocommerce ul.products li.product .star-rating {
	margin-block-end: 0.375rem;
}

/* The selector matches WooCommerce's own, which sets its olive price color. */
.woocommerce ul.products li.product .price {
	margin-block-end: 0;
	color: var(--vt-heading);
	font-size: 0.9375rem;
	font-weight: 600;
}

/*
 * Pushed to the end of the card, so the buttons of a row line up, and at least
 * 44px high for touch.
 */
.woocommerce ul.products li.product .button {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-block-start: auto;
}

.woocommerce ul.products li.product .added_to_cart {
	margin-block-start: 0.5rem;
	font-size: 0.875rem;
}

/* Buttons of plugins (vendix_theme/product_card_actions), over the end corner of the image. */
.vt-product-actions {
	position: absolute;
	inset-block-start: 0.75rem;
	inset-inline-end: 0.75rem;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

@media (hover: hover) {
	.vt-product-actions {
		opacity: 0;
		transition: opacity 0.2s ease;
	}

	.woocommerce ul.products li.product:hover .vt-product-actions,
	.vt-product-actions:focus-within {
		opacity: 1;
	}
}

/*
 * Sale badge: on the start corner of the image in a card, beside the gallery on a
 * product. Its text sets its own direction, so "-20%" keeps its order on
 * right-to-left pages and a translated badge reads in its own direction.
 */
.woocommerce span.onsale {
	min-height: auto;
	min-width: auto;
	padding: 0.25rem 0.75rem;
	border-radius: var(--vt-radius);
	background-color: var(--vt-badge-bg);
	color: var(--vt-badge-color);
	font-size: 0.8125rem;
	line-height: 1.5;
	unicode-bidi: plaintext;
}

.woocommerce ul.products li.product .vt-product-media .onsale {
	inset: auto;
	inset-block-start: 0.75rem;
	inset-inline-start: 0.75rem;
	margin: 0;
}

/* Prices and ratings ---------------------------------------------------- */

/* The product page selectors match WooCommerce's own, which set its olive price color. */
.woocommerce .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--vt-heading);
	font-weight: 600;
}

.woocommerce .price ins {
	text-decoration: none;
}

.woocommerce .price del {
	color: var(--vt-muted);
	font-weight: 400;
}

.woocommerce .star-rating span::before,
.woocommerce p.stars a {
	color: var(--vt-accent);
}

/* Buttons --------------------------------------------------------------- */

/* WooCommerce's purple becomes the theme accent, also on the buttons of the blocks. */
.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,
.wc-block-components-button:not(.is-link),
.wc-block-components-product-button .wc-block-components-product-button__button,
.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link {
	border: 1px solid var(--vt-accent);
	border-radius: var(--vt-radius);
	background-color: var(--vt-accent);
	color: var(--vt-accent-contrast);
	font-weight: 600;
	text-decoration: none;
}

.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,
.wc-block-components-button:not(.is-link):hover,
.wc-block-components-product-button .wc-block-components-product-button__button:hover,
.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link:hover {
	border-color: var(--vt-heading);
	background-color: var(--vt-heading);
	color: var(--vt-accent-contrast);
}

/*
 * The buttons of the blocks are buttons for base.css too: its element rules
 * would keep a long label of the wide cart and checkout buttons and of the
 * product block button on one line. This rule lets it wrap with the same weight
 * as the base.css rules, so a button style of the site, such as Elementor's,
 * still wins. The product block button keeps the spacing of the site's global
 * button style: base.css leaves block buttons out of its button spacing.
 */
.wc-block-components-button,
.wc-block-components-product-button__button {
	white-space: normal;
}

.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce button.button.alt.disabled {
	border-color: var(--vt-accent);
	background-color: var(--vt-accent);
	color: var(--vt-accent-contrast);
	opacity: 0.5;
}

/*
 * Content links are underlined and link buttons are not (base.css); nor are the
 * product links of the product blocks, such as the products shown in an empty
 * cart block.
 */
.page-content a.wc-block-grid__product-link {
	text-decoration: none;
}

/* Product page ---------------------------------------------------------- */

.woocommerce div.product .product_title {
	margin-block-start: 0;
}

/*
 * The quantity field. Its width and inner space are set only when it stands on
 * its own: a field with − and + buttons beside it, such as the ones Vendix adds,
 * is sized by the plugin that adds them, so it looks the same on the product
 * page, in a quick view and in the cart. They have a rule of their own, so a
 * browser without :has() drops only them.
 */
.woocommerce div.product form.cart .qty {
	min-height: 44px;
	text-align: center;
}

.woocommerce div.product form.cart .quantity:not(:has(> button)) .qty {
	width: 4.5rem;
	padding-inline: 0.5rem;
}

.woocommerce div.product form.cart button.button {
	min-height: 44px;
}

.woocommerce div.product form.cart .variations select {
	min-height: 44px;
}

/* The striped rows of content tables (base.css) stay out of the variation choices. */
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
	background-color: transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-block-end-color: var(--vt-accent);
}

.woocommerce div.product .stock {
	color: #027a48;
}

.woocommerce div.product .out-of-stock {
	color: #b42318;
}

.woocommerce div.product .related,
.woocommerce div.product .upsells {
	clear: both;
	padding-block-start: var(--vt-space);
}

/* Notices --------------------------------------------------------------- */

/* A line on the start side, as in the rest of the theme. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-block-start: 0;
	border-inline-start: 4px solid var(--vt-accent);
	border-radius: var(--vt-radius);
	background-color: var(--vt-surface);
}

.woocommerce-error {
	border-inline-start-color: #b42318;
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--vt-accent);
}