/**
 * Qhalesaa Archive Variations
 *
 * Every visual value is a custom property on .qav-thumb / .qav-sizes, so the
 * look can be retuned from the Customiser or a child theme without touching
 * this file. Example override:
 *
 *   .qav-sizes { --qav-pill-bg: #fff; --qav-pill-radius: 999px; }
 */

:root {
	--qav-inset: 0.625rem;        /* Distance from the image edge. */
	--qav-pill-pad: 2px 5px;
	--qav-pill-gap: 4px;          /* Space between pills. */
	--qav-pill-margin: 0 var(--qav-pill-gap) var(--qav-pill-gap) 0;
	--qav-pill-font: 10px;
	--qav-pill-line: 1.4;
	--qav-pill-radius: 0px;
	--qav-pill-border: 1px solid #ddd;
	--qav-pill-bg: rgba(224, 224, 224, 0.8);
	--qav-pill-color: #333;

	/* Sale price treatment. */
	--qav-price-old: #d32f2f;
	--qav-price-new: #111111;
	--qav-price-weight: 700;
	--qav-price-gap: 0.5em;
}

/* ---------------------------------------------------------------------------
   Positioning box
   This wraps the archive thumbnail only, so pills anchor to the image and not
   to the whole card (which would drop them below the title and price).
   --------------------------------------------------------------------------- */

.qav-thumb {
	position: relative;
	display: block;
	overflow: hidden;
}

.qav-thumb > img {
	display: block;
	width: 100%;
	height: auto;
}

/* Fallback mode: the script sets position on whichever element wraps the image. */
.qav-has-pills {
	position: relative;
}

/* ---------------------------------------------------------------------------
   Pill list
   --------------------------------------------------------------------------- */

.qav-sizes {
	position: absolute;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	list-style: none;
	/* Spacing between pills comes from each pill's own margin. These negative
	   values cancel the trailing right and bottom margin of the last pill, so
	   the group still sits flush against --qav-inset. */
	margin: 0 calc(var(--qav-pill-gap) * -1) calc(var(--qav-pill-gap) * -1) 0;
	/* Never let a long size list run past the edge of the image. */
	max-width: calc(100% - (var(--qav-inset) * 2));
	/* Purely decorative overlay — never intercept taps meant for the card link. */
	pointer-events: none;
}

.qav-sizes--bottom-left {
	bottom: var(--qav-inset);
	left: var(--qav-inset);
}

.qav-sizes--bottom-right {
	bottom: var(--qav-inset);
	right: var(--qav-inset);
	justify-content: flex-end;
}

/* Pinning both edges (rather than left: 50%) gives the row the full width of
   the image to work with, so pills only wrap when they genuinely run out of
   room. justify-content then does the centring. */
.qav-sizes--bottom-center {
	bottom: var(--qav-inset);
	left: var(--qav-inset);
	right: var(--qav-inset);
	justify-content: center;
	/* The last pill carries an invisible right margin, which would pull the row
	   half a gap off-centre. Matching padding on the left cancels it exactly. */
	margin-right: 0;
	padding-left: var(--qav-pill-gap);
}

.qav-sizes--top-left {
	top: var(--qav-inset);
	left: var(--qav-inset);
}

/* Hidden until the script has parented it to the image, to avoid a flash of
   mispositioned pills. */
.qav-sizes--float {
	opacity: 0;
}

.qav-sizes--float.qav-sizes--placed {
	opacity: 1;
	transition: opacity 120ms ease-out;
}

/* ---------------------------------------------------------------------------
   Single pill
   --------------------------------------------------------------------------- */

.qav-size {
	display: inline-block;
	padding: var(--qav-pill-pad);
	margin: var(--qav-pill-margin);
	font-size: var(--qav-pill-font);
	font-weight: 600;
	line-height: var(--qav-pill-line);
	white-space: nowrap;
	list-style: none;
	color: var(--qav-pill-color);
	background: var(--qav-pill-bg);
	border: var(--qav-pill-border);
	border-radius: var(--qav-pill-radius);
}

.qav-size--more {
	opacity: 0.85;
}

/* ---------------------------------------------------------------------------
   Sold out label
   Centred over the product image; brand primary colour with white text.
   --------------------------------------------------------------------------- */

.qav-thumb .qav-soldout {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	background: var(--e-global-color-primary, #330917);
	color: #fff;
	padding: 8px 18px;
	font-size: 12px;
	font-weight: 400 !important;
	letter-spacing: 1px !important;
	text-transform: uppercase;
	white-space: nowrap;
	/* Label only — taps still go through to the product link. */
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Percentage sale badge
   Inherits the theme's .onsale rules, so only the parts we care about are set.
   --------------------------------------------------------------------------- */

.qav-onsale {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
}

.elementor-products-grid ul.products.elementor-grid li.product span.onsale,
.woocommerce span.onsale,
.woocommerce ul.products li.product span.onsale {
	top: 0px;
}

/* ---------------------------------------------------------------------------
   Sale price on archive listings
   Only applies when the "Sale price styling" setting is on — that setting adds
   the .qav-price-style class to <body>. Old price struck through in red, new
   price in near-black, both bold.
   --------------------------------------------------------------------------- */

.woocommerce-loop-product__title {
	line-height: 22px !important;
	text-align: center;
	margin-top: -10px !important;
}

/* Centred for every product grid — related, upsells, recently viewed — not
   only when the sale price styling is on. */
.woocommerce ul.products li.product .price {
	text-align: center;
}

.qav-price-style ul.products li.product .price {
	color: var(--qav-price-new);
	font-weight: var(--qav-price-weight);
	text-align: center;
	margin-top: -10px;
}

.qav-price-style ul.products li.product .price del {
	color: var(--qav-price-old);
	font-weight: var(--qav-price-weight);
	/* WooCommerce dims the old price by default; we want it fully visible. */
	opacity: 1;
	margin-right: var(--qav-price-gap);
	text-decoration: line-through;
	text-decoration-color: currentColor;
	text-decoration-thickness: 0.08em;
}

.qav-price-style ul.products li.product .price del .amount,
.qav-price-style ul.products li.product .price del bdi {
	color: inherit;
}

/* <ins> is underlined by default, and some browsers give it a yellow tint. */
.qav-price-style ul.products li.product .price ins {
	color: var(--qav-price-new);
	font-weight: var(--qav-price-weight);
	background: none;
	text-decoration: none;
}

.qav-price-style ul.products li.product .price ins .amount,
.qav-price-style ul.products li.product .price ins bdi {
	color: inherit;
}

/* ---------------------------------------------------------------------------
   Add to cart button on listings
   PHP already removes WooCommerce's own button, so these rules only catch
   themes and page builders that print their own copy. Only WooCommerce's
   product-type classes are targeted, so a theme's quick view or wishlist
   button is left alone.
   --------------------------------------------------------------------------- */

.qav-no-cart-button ul.products li.product .add_to_cart_button,
.qav-no-cart-button ul.products li.product .product_type_simple,
.qav-no-cart-button ul.products li.product .product_type_variable,
.qav-no-cart-button ul.products li.product .product_type_grouped,
.qav-no-cart-button ul.products li.product .product_type_external,
.qav-no-cart-button ul.products li.product .added_to_cart,
.qav-no-cart-button .wc-block-grid__product-add-to-cart {
	display: none !important;
}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */

@media (max-width: 480px) {
	/* The pill itself is already 10px, so only pull it closer to the edge. */
	.qav-sizes {
		--qav-inset: 0.4rem;
	}

	.qav-sizes--desktop-only {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.qav-sizes--float.qav-sizes--placed {
		transition: none;
	}
}

/* Safety net: most themes define .screen-reader-text, but not all page
   builders do, and a visible "Available: XS, S, M." line would look broken. */
.qav-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Recently viewed products grid ([recently_viewed_products] shortcode)
   --------------------------------------------------------------------------- */

.recently-viewed-products {
	margin: 30px 0;
	clear: both;
}

.recently-viewed-products .recently-viewed-title {
	font-size: 1.8em;
	margin-bottom: 20px;
	text-align: center;
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Product carousel ([product_carousel] shortcode)
   The track is a native scroll-snap strip; cards are ordinary loop cards, so
   pills, badges, countdowns and Sold Out labels apply unchanged.
   --------------------------------------------------------------------------- */

.qav-carousel-stage {
	position: relative;
}

.qav-carousel ul.products.qav-carousel-track {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	overflow-y: hidden;
	gap: 20px;
	margin: 0;
	padding: 0;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.qav-carousel ul.products.qav-carousel-track::-webkit-scrollbar {
	display: none;
}

.qav-carousel ul.products.qav-carousel-track > li.product {
	/* Four cards per view on desktop; themes' grid widths must not apply. */
	flex: 0 0 calc((100% - 60px) / 4) !important;
	width: auto !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
	scroll-snap-align: start;
}

@media (max-width: 1024px) {
	.qav-carousel ul.products.qav-carousel-track > li.product {
		flex-basis: calc((100% - 40px) / 3) !important;
	}
}

@media (max-width: 600px) {
	.qav-carousel ul.products.qav-carousel-track > li.product {
		flex-basis: calc((100% - 20px) / 2) !important;
	}
}

/* Navigation is fully hidden — the strip autoplays and swipes. */
.qav-carousel-nav {
	display: none !important;
}