/**
 * ArtCommerce — Frontend styles.
 *
 * Colors and font sizes that are configurable by the store owner
 * (PIX color, PIX font size) are NOT hardcoded here — they are read
 * from CSS custom properties injected per-request via
 * wp_add_inline_style() in Frontend::maybe_enqueue_assets(), based on
 * the values saved in ArtCommerce > PIX. This file only defines
 * structure/spacing, keeping the "never use inline CSS" requirement
 * intact while still allowing per-store customization.
 *
 * Render order on the page (see Frontend::append_pix_block() /
 * append_installments_block()):
 *   1. .artcommerce-pix-price   (PIX price + label)
 *   2. .artcommerce-pix-discount (e.g. "com 8% de desconto")
 *   3. WooCommerce's own price HTML (original + current price)
 *   4. .artcommerce-installments-text (e.g. "até 3x de R$ 5,63 sem juros")
 */

:root {
	--artcommerce-pix-color: #00A650;
	--artcommerce-pix-font-size: 16px;
}

.artcommerce-pix-price {
	display: block;
	color: var(--artcommerce-pix-color);
	font-size: var(--artcommerce-pix-font-size);
	font-weight: 700;
	line-height: 1.3;
}

.artcommerce-pix-label {
	font-weight: 600;
	font-size: 0.65em;
}

.artcommerce-pix-discount {
	display: block;
	margin-top: 1px;
	margin-bottom: 4px;
	color: var(--artcommerce-pix-color);
	font-size: 0.8em;
	font-weight: 400;
}

.artcommerce-installments-text {
	display: block;
	margin-top: 2px;
	font-size: 0.85em;
	color: #6b6b6b;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Locations where price blocks render inline (mini cart, cart table)
   need tighter spacing than the product loop/single price area. */
.woocommerce-mini-cart .artcommerce-pix-price,
.woocommerce-cart-form .artcommerce-pix-price {
	font-size: calc(var(--artcommerce-pix-font-size) * 0.85);
}

/**
 * Card alignment (ArtCommerce > Layouts > "Alinhar cards").
 *
 * Makes every product card in a grid the same height and pins the
 * price block (and whatever follows it — quantity input, add-to-cart
 * button) to the bottom, regardless of how many lines the product
 * title wraps to. Targets the standard WooCommerce loop markup
 * (`ul.products > li.product`), which is what Elementor's "Archive
 * Products"/"Loop Grid" widgets render under the hood, so it works
 * without needing theme-specific selectors.
 */
body.artcommerce-align-cards ul.products {
	align-items: stretch;
}

body.artcommerce-align-cards ul.products li.product,
body.artcommerce-align-cards .products .product {
	display: flex;
	flex-direction: column;
	height: 100%;
}

body.artcommerce-align-cards ul.products li.product .price {
	margin-top: auto;
}

/**
 * Layout skins.
 *
 * Each of the four models shipped in ArtCommerce > Layouts reuses the
 * exact same HTML structure and only changes typography/spacing —
 * never colors the store owner explicitly set for PIX
 * (--artcommerce-pix-color / --artcommerce-pix-font-size remain
 * authoritative), keeping user configuration and layout skin
 * independent of each other.
 */

/* Modelo Mercado Livre — bold price, compact discount line. */
.artcommerce-layout-mercado_livre .artcommerce-pix-price {
	font-weight: 700;
}

/* Modelo Amazon — compact, reduced letter spacing, lowercase label. */
.artcommerce-layout-amazon .artcommerce-pix-price {
	font-weight: 600;
	letter-spacing: -0.2px;
}
.artcommerce-layout-amazon .artcommerce-pix-label {
	text-transform: lowercase;
}

/* Modelo Magalu — price/label stacked with extra spacing. */
.artcommerce-layout-magalu .artcommerce-pix-price {
	font-weight: 700;
}
.artcommerce-layout-magalu .artcommerce-installments-text {
	margin-top: 6px;
	font-weight: 600;
}

/* Modelo Kabum — high-contrast, uppercase label, tighter line height. */
.artcommerce-layout-kabum .artcommerce-pix-price {
	font-weight: 800;
	line-height: 1.1;
}
.artcommerce-layout-kabum .artcommerce-pix-label {
	text-transform: uppercase;
	font-size: 0.7em;
	letter-spacing: 0.3px;
}