/*
 * WParaby Stores: design tokens on WooCommerce blocks. The same rules apply
 * to the block and Elementor versions (both render the same blocks).
 */

/* Product categories as cards. */
body .wpa-store-categories .wc-block-product-categories-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: var(--wpa-space-30, 1rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

body .wpa-store-categories .wc-block-product-categories-list-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wpa-space-10, 0.5rem);
	margin: 0;
	padding: var(--wpa-space-40, 1.5rem) var(--wpa-space-20, 0.75rem);
	border: 1px solid var(--wpa-color-border, #e5e7eb);
	border-radius: var(--wpa-radius-md, 12px);
	background: var(--wpa-color-base, #fff);
	text-align: center;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

body .wpa-store-categories .wc-block-product-categories-list-item:hover {
	box-shadow: var(--wpa-shadow-soft, 0 8px 24px rgba(0, 0, 0, 0.08));
	transform: translateY(-2px);
}

body .wpa-store-categories .wc-block-product-categories-list-item a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wpa-space-20, 0.75rem);
	color: var(--wpa-color-contrast, #111);
	font-family: var(--wpa-font-heading, inherit);
	font-weight: 700;
	text-decoration: none;
}

/* The whole card is the link. */
body .wpa-store-categories .wc-block-product-categories-list-item a::after {
	content: "";
	position: absolute;
	inset: 0;
}

body .wpa-store-categories .wc-block-product-categories-list-item__image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 4.5rem;
	margin: 0;
	overflow: hidden;
	border: 0;
	border-radius: 50%;
	background: var(--wpa-color-base-2, #f5f5f5);
}

body .wpa-store-categories .wc-block-product-categories-list-item__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body .wpa-store-categories .wc-block-product-categories-list-item-count {
	color: var(--wpa-color-contrast-2, #555);
	font-size: 0.875em;
}

/* Sale badge and prices. */
/* "body" outranks WooCommerce's block styles, which Elementor pages load later. */
body .wc-block-components-product-sale-badge,
body .wp-block-woocommerce-product-image-gallery .onsale {
	border-color: var(--wpa-color-primary, currentColor);
	border-radius: var(--wpa-radius-sm, 6px);
	background: var(--wpa-color-primary, #000);
	color: var(--wpa-color-base, #fff);
	font-weight: 700;
}

.wc-block-components-product-price del,
.wp-block-woocommerce-product-price del {
	color: var(--wpa-color-contrast-2, #555);
	font-weight: 400;
	opacity: 0.8;
}

.wc-block-components-product-price ins,
.wp-block-woocommerce-product-price ins {
	text-decoration: none;
}

/* Product search in store headers. */
.wpa-store-search .wp-block-search__inside-wrapper {
	border: 1px solid var(--wpa-color-border, #e5e7eb);
	border-radius: var(--wpa-radius-sm, 6px);
	background: var(--wpa-color-base, #fff);
	padding: 2px;
}

.wpa-store-search .wp-block-search__input {
	min-width: 12rem;
	border: 0;
	background: transparent;
	font-family: var(--wpa-font-body, inherit);
}

.wpa-store-search .wp-block-search__button {
	margin: 0;
	padding: 0.4em 0.6em;
	border-radius: calc(var(--wpa-radius-sm, 6px) - 2px);
	background: var(--wpa-color-primary, #000);
	color: var(--wpa-color-base, #fff);
}

.wpa-store-search .wp-block-search__button svg {
	width: 1.25em;
	height: 1.25em;
	fill: currentColor;
}

/* Product buttons keep the button text color (not the site's link color). */
body .wp-block-woocommerce-product-button .wp-element-button {
	color: var(--wpa-color-base, #fff);
}

/*
 * Inside Elementor widgets: spacing comes from the containers, and the
 * Elementor kit's button styles must not restyle WooCommerce's own buttons.
 */
[class*="elementor-widget-wpa-"] :is(.wp-block-woocommerce-product-collection, .wp-block-woocommerce-product-categories, .wp-block-search) {
	margin-block: 0;
}

/* The notices box inside a product collection has a bottom margin that, in the block layout,
   collapses into the gap above the collection; inside a widget it would add space. */
[class*="elementor-widget-wpa-"] .wp-block-woocommerce-product-collection > .wc-block-components-notices {
	margin-block: 0;
}

/* The tab panel's bottom margin collapses into the next block's gap in the block layout;
   a widget (a flex item) would add it to the gap. Same for the collection's heading. */
body .elementor [class*="elementor-widget-wpa-"] .woocommerce-tabs .panel.woocommerce-Tabs-panel {
	margin-bottom: 0;
}

[class*="elementor-widget-wpa-"] .wp-block-woocommerce-product-collection > .wp-block-heading:first-of-type {
	margin-block-start: 0;
}

/* Below the heading, the product list keeps the block gap it has in the block layout. */
[class*="elementor-widget-wpa-"] .wp-block-woocommerce-product-collection > .wp-block-heading + * {
	margin-block-start: var(--wp--style--block-gap, 1.5rem);
}

[class*="elementor-widget-wpa-"] .woocommerce-Tabs-panel > :last-child {
	margin-bottom: 0;
}

/* The add to cart form's margin would collapse into the block gap but add to a widget's:
   spacing comes from the gap in both. */
body.woocommerce .wp-block-woocommerce-add-to-cart-form form.cart.cart {
	margin-bottom: 0;
}

/* No notices: the block prints nothing, so the widget takes no space (nor a container gap). */
.elementor-widget-wpa-store-notices:not(:has(.wc-block-store-notices, .woocommerce-message, .woocommerce-error, .woocommerce-info)) {
	display: none;
}

/* Elementor lets flex items shrink below their content (min-width: 0); blocks do not. */
body .e-con :is(.elementor-widget-wpa-product-search, .elementor-widget-wpa-mini-cart) {
	min-width: auto;
}

.elementor-widget-wpa-mini-cart .wc-block-mini-cart__button {
	padding: 0.5em;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: inherit;
	font-family: inherit;
	font-weight: 400;
	line-height: 1;
}

/* Mini cart. */
.wc-block-mini-cart__badge {
	background: var(--wpa-color-primary, #000);
	color: var(--wpa-color-base, #fff);
}

/* Product page. */
.wpa-kit-product .wc-block-components-product-rating,
.wpa-kit-product .wp-block-woocommerce-product-meta {
	color: var(--wpa-color-contrast-2, #555);
}

.wpa-kit-product .single_add_to_cart_button {
	border-radius: var(--wpa-radius-sm, 6px);
	background: var(--wpa-color-primary, #000);
	color: var(--wpa-color-base, #fff);
	font-family: var(--wpa-font-body, inherit);
	font-weight: 700;
}

.wpa-kit-product .quantity .qty {
	min-height: 2.75rem;
	border: 1px solid var(--wpa-color-border, #e5e7eb);
	border-radius: var(--wpa-radius-sm, 6px);
}

.wpa-store-notices:empty {
	display: none;
}

.wpa-store-empty {
	padding: var(--wpa-space-20, 0.75rem);
	border: 1px dashed var(--wpa-color-border, #e5e7eb);
	color: var(--wpa-color-contrast-2, #555);
	text-align: center;
}

@media (max-width: 781px) {
	.wpa-store-search .wp-block-search__input {
		min-width: 0;
		width: 8rem;
	}
}

/* Phones: logo, menu button, search and cart must fit one row (≈ 360px). */
@media (max-width: 480px) {
	.wpa-store-search .wp-block-search__input {
		width: 5rem;
		padding-inline: 0.5em;
	}
}