/*
 * Global rules matching the reference (reference-analysis.md § 9). Values come from tokens.css.
 * Page-specific layouts (header, PDP, collection) are added in Phase 5 as separate files.
 */

body {
	font-size: var(--hg-fs-body);
	line-height: 1.6;
	background-color: var(--hg-color-bg);
}

/* Section headings (Poppins 600, centred in sections). */
.title-wrapper .title,
.wd-el-title .title,
.hg-section-title {
	font-family: var(--hg-font-heading);
	font-weight: 600;
	font-size: var(--hg-fs-section-title);
	line-height: 1.2;
	letter-spacing: 0;
}

/* Buttons: black, 6px radius, 42px, uppercase 14px/400.
 * WoodMart 8.5 gives a bare .button a light-grey fallback; map it to the Theme Settings button colours
 * (Theme Settings → Buttons) so the admin stays the source of truth. */
.button {
	--btn-bgcolor: var(--btn-default-bgcolor);
	--btn-bgcolor-hover: var(--btn-default-bgcolor-hover);
	--btn-color: var(--btn-default-color);
	--btn-color-hover: var(--btn-default-color-hover);
	--btn-brd-color: var(--btn-default-bgcolor);
	--btn-brd-color-hover: var(--btn-default-bgcolor-hover);
	--btn-brd-radius: var(--hg-radius-btn);
}
.button:disabled,
.button.disabled {
	opacity: 0.45;
}
.button,
.btn,
button[type="submit"],
input[type="submit"],
.single_add_to_cart_button,
.checkout-button {
	min-height: var(--hg-btn-height);
	border-radius: var(--hg-radius-btn);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.02em;
}

/* Prices: bold current, light struck compare. */
.price,
.amount {
	color: var(--hg-color-text);
}
.price {
	font-weight: 700;
	font-size: var(--hg-fs-price);
}
.price del,
.price del .amount {
	color: var(--hg-color-strike);
	font-weight: 400;
	font-size: 0.86em;
	opacity: 1;
}
.price ins {
	text-decoration: none;
}

/* Product labels: small uppercase pills (colours set in Theme Settings → Shop → Labels). */
.product-labels .product-label {
	font-size: var(--hg-fs-badge);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 3px 8px;
	min-height: 0;
	min-width: 0;
	line-height: 1.3;
}

/* Rounded media everywhere the reference rounds it. */
.product-grid-item .product-element-top,
.product-grid-item .product-image-link img,
.woocommerce-product-gallery img,
.wd-cat .wd-cat-thumb,
.hg-rounded {
	border-radius: var(--hg-radius-card);
	overflow: hidden;
}

/* Meta lines (category/vendor line on cards, breadcrumbs). */
.wd-product-cats,
.woocommerce-breadcrumb,
.hg-meta {
	font-size: var(--hg-fs-meta);
	color: var(--hg-color-muted);
}

/* Mobile side gutter. */
@media (max-width: 767px) {
	.container,
	.wd-content-layout {
		padding-inline: var(--hg-gutter);
	}
}