/**
 * Atome instalment divider.
 *
 * Two looks from one block of markup:
 *   .qav-atome--single   inline sentence under the price on a product page.
 *   .qav-atome--archive  small frosted badge sitting on the listing image.
 *
 * Every value worth changing is a custom property, so a child theme can retune
 * the badge without copying these rules:
 *
 *   .qav-atome { --qav-atome-size: 13px; --qav-atome-badge-bg: #fff; }
 */

.qav-atome {
	/* Text. */
	--qav-atome-size: 12px;
	--qav-atome-color: #000;
	--qav-atome-weight: 700;
	/* Logo height on the product page. Tuned against the real Atome asset,
	   which carries transparent padding above and below the wordmark — so the
	   visible logo reads a good deal smaller than the number here suggests. */
	--qav-atome-logo-height: 25px;

	/* Archive badge. */
	--qav-atome-badge-size: 10px;
	--qav-atome-badge-logo-height: 17px;
	/* Caps how wide the badge can grow, so it stays a small tag on the photo
	   rather than a banner across it. */
	--qav-atome-badge-max: 95px;
	--qav-atome-badge-bg: rgba(255, 255, 255, 0.6);
	--qav-atome-badge-blur: 4px;
	--qav-atome-badge-radius: 6px;
	--qav-atome-badge-pad: 3px 6px 2px;
	--qav-atome-badge-inset: 10px;

	color: var(--qav-atome-color);
	line-height: 1.4;
}

/* wc_price() wraps the number in its own markup. Force it to inherit so the
   theme's price styling (often large and coloured) cannot leak in here. */
.qav-atome .amount,
.qav-atome .amount bdi,
.qav-atome .woocommerce-Price-currencySymbol {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	text-decoration: none;
}

.qav-atome-amount {
	font-weight: var(--qav-atome-weight);
}

/* The logo image, with guards.

   WooCommerce core ships `.woocommerce ul.products li.product img { width:
   100%; height: auto }` and most themes add their own version of it. Those
   selectors outrank anything this file can write with plain classes, so
   without !important the logo ignores its height and stretches to the full
   width of the product card. The height itself stays a custom property, so a
   child theme can still retune it. */
.qav-atome .qav-atome-logo img {
	display: inline-block !important;
	width: auto !important;
	max-width: none !important;
	height: var(--qav-atome-logo-height) !important;
	margin: 0 !important;
	/* Same reasoning: themes frame product-card images, and that framing has
	   no business being drawn around a logo. */
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* ---------------------------------------------------------------------------
   Single product page — inline sentence beneath the price
   --------------------------------------------------------------------------- */

.qav-atome--single {
	display: block;
	margin-top: 6px;
	font-size: var(--qav-atome-size);
}

.qav-atome--single .qav-atome-logo {
	display: inline-block;
	margin-left: 4px;
	/* Centres the wordmark against the text instead of hanging it off the
	   baseline, so it stays level whatever height the logo is set to. */
	vertical-align: middle;
}

/* Height comes from the shared rule above. */

/* ---------------------------------------------------------------------------
   Product listings — frosted badge on the image

   The parent .qav-thumb is the positioning box, so these offsets are measured
   from the edges of the photo itself, never from the whole card.
   --------------------------------------------------------------------------- */

.qav-atome--archive {
	position: absolute;
	z-index: 4;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 3px;
	max-width: var(--qav-atome-badge-max);
	padding: var(--qav-atome-badge-pad);
	font-size: var(--qav-atome-badge-size);
	text-align: center;
	white-space: nowrap;
	background: var(--qav-atome-badge-bg);
	-webkit-backdrop-filter: blur(var(--qav-atome-badge-blur));
	backdrop-filter: blur(var(--qav-atome-badge-blur));
	border-radius: var(--qav-atome-badge-radius);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	/* Decorative only — taps must reach the product link underneath. */
	pointer-events: none;
}

/* The logo takes the full width of the badge, which pushes it onto its own
   line under the price. */
.qav-atome--archive .qav-atome-logo {
	flex: 0 0 100%;
	line-height: 0;
}

/* Smaller inside the badge than on the product page. */
.qav-atome--archive .qav-atome-logo img {
	height: var(--qav-atome-badge-logo-height) !important;
}

.qav-atome--archive.qav-atome--bottom-left {
	bottom: var(--qav-atome-badge-inset);
	left: var(--qav-atome-badge-inset);
}

.qav-atome--archive.qav-atome--bottom-right {
	bottom: var(--qav-atome-badge-inset);
	right: var(--qav-atome-badge-inset);
}

.qav-atome--archive.qav-atome--top-left {
	top: var(--qav-atome-badge-inset);
	left: var(--qav-atome-badge-inset);
}

.qav-atome--archive.qav-atome--top-right {
	top: var(--qav-atome-badge-inset);
	right: var(--qav-atome-badge-inset);
}

/* Fallback for themes that replace WooCommerce's own thumbnail function: there
   is no .qav-thumb box, so the badge anchors to the card instead. The image
   sits at the top of the card, which is why the top corners stay accurate. */
ul.products li.product {
	position: relative;
}

/* ---------------------------------------------------------------------------
   Text fallback, used until a logo image is set in the settings
   --------------------------------------------------------------------------- */

.qav-atome-logo--text {
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------------------
   Phones

   Product cards drop to two per row, so the badge takes a smaller share of the
   photo than the desktop values would give it. Only the two tokens change —
   the rules that use them are untouched.
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.qav-atome--archive {
		--qav-atome-badge-max: 80px;
		--qav-atome-badge-size: 8px;
	}
}

/* ---------------------------------------------------------------------------
   The phone copy of the product-page line

   On phones the mobile price bar replaces the Product Price widget, and
   product-gallery.css hides that widget — which hid the line inside it. So a
   second copy is printed under the bar. It carries the --single classes too,
   so it looks the same; these rules only decide which of the two shows.
   --------------------------------------------------------------------------- */

.qav-atome--mobile {
	display: none;
	/* No indent of its own: it sits inside the Product Title widget, so it
	   picks up the summary column's padding and lines up with the product
	   name above it. */
	margin-top: var(--qav-atome-mobile-gap, 8px);
}

@media (max-width: 767px) {
	.qav-atome--mobile {
		display: block;
	}
}