/*
 * Typography for the WordPress front end — the storefront's tokens
 * (hartwell-design-tokens.css, a mirror of hartwell-test/app/globals.css)
 * applied to plain elements and WooCommerce's cart/checkout/account markup,
 * so /handlekurv/, /kassen/ and /min-konto/ read like the Next.js pages.
 * Manrope everywhere; no italics, no serif.
 *
 * Kadence's customizer typography is left empty on purpose. Its generated
 * rules are type selectors (0,0,1) printed later in <head>; `html body` /
 * `body h1` (0,0,2) win without !important. Checkout-only layout rules live
 * in hartwell-checkout.css.
 */

/* ---------- Body (token: body) ---------- */

html body {
	font-family: var(--font-body);
	font-size: var(--type-body-size);
	line-height: var(--type-body-lh);
	font-weight: 400;
	letter-spacing: 0;
	color: var(--hw-ink);
	-webkit-font-smoothing: antialiased; /* <html class="antialiased"> in Next */
	-moz-osx-font-smoothing: grayscale;
}

html body p,
html body li,
html body td,
html body th,
html body label,
html body input,
html body select,
html body textarea,
html body button,
html body address {
	font-family: var(--font-body);
	font-style: normal;
}

html body strong,
html body b {
	font-weight: var(--type-strong-weight);
}

/* ---------- Headings (tokens: h1–h4) ---------- */

body h1 {
	font-family: var(--font-body);
	font-weight: var(--type-h1-weight);
	font-size: var(--type-h1-size);
	line-height: var(--type-h1-lh);
	letter-spacing: var(--type-h1-ls);
	font-style: normal;
	color: var(--hw-ink);
}

body h2 {
	font-family: var(--font-body);
	font-weight: var(--type-h2-weight);
	font-size: var(--type-h2-size);
	line-height: var(--type-h2-lh);
	letter-spacing: var(--type-h2-ls);
	font-style: normal;
	color: var(--hw-ink);
}

body h3 {
	font-family: var(--font-body);
	font-weight: var(--type-h3-weight);
	font-size: var(--type-h3-size);
	line-height: var(--type-h3-lh);
	letter-spacing: var(--type-h3-ls);
	font-style: normal;
	color: var(--hw-ink);
}

body h4,
body h5,
body h6 {
	font-family: var(--font-body);
	font-weight: var(--type-h4-weight);
	font-size: var(--type-h4-size);
	line-height: var(--type-h4-lh);
	letter-spacing: var(--type-h4-ls);
	font-style: normal;
	color: var(--hw-ink);
}

/*
 * Panel titles inside WooCommerce blocks (checkout steps, order summary,
 * cart totals) are h2 elements in Woo's markup but sit one level below the
 * page like the storefront's drawer/panel titles: token h3.
 */
body .wc-block-components-title.wc-block-components-title,
body .wc-block-components-checkout-step__title,
body .wc-block-components-checkout-order-summary__title-text,
body .wc-block-cart__totals-title.wc-block-cart__totals-title,
body .woocommerce-MyAccount-content h2,
body .woocommerce-order-details__title,
body .woocommerce-column__title {
	font-family: var(--font-body);
	font-weight: var(--type-h3-weight);
	font-size: var(--type-h3-size);
	line-height: var(--type-h3-lh);
	letter-spacing: var(--type-h3-ls);
	font-style: normal;
	text-transform: none;
	color: var(--hw-ink);
}

/* ---------- Product names (token: title) ---------- */

body .wc-block-components-product-name,
/* Woo's own cart-table rule is (0,3,1). */
body table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name,
body .woocommerce-table__product-name a,
body .woocommerce-cart-form .product-name a {
	font-family: var(--font-body);
	font-weight: var(--type-title-weight);
	font-size: var(--type-title-size);
	line-height: var(--type-title-lh);
	letter-spacing: var(--type-title-ls);
	font-style: normal;
	color: var(--hw-ink);
	text-decoration: none;
}

/* ---------- Prices ---------- */

/* Plain figures in the body font, as formatNok in Next. */
body .price,
body .woocommerce-Price-amount,
body .wc-block-formatted-money-amount,
body .wc-block-components-formatted-money-amount {
	font-family: var(--font-body);
	font-style: normal;
	font-weight: 400;
	font-variant-numeric: normal;
	letter-spacing: 0;
}

/* Order total (token: price). */
body .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
body .wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
	font-family: var(--font-body);
	font-weight: var(--type-price-weight);
	font-size: var(--type-price-size);
	line-height: var(--type-price-lh);
	letter-spacing: var(--type-price-ls);
}

/* ---------- Buttons (token: button — one style everywhere) ---------- */

/* Same selector set as the colour rules in hartwell-colors.css. */
.wp-block-button__link,
.kt-button,
button:not(.kt-slider-arrow, .kt-slider-dot, .wc-block-components-button.is-link, .wc-block-components-panel__button),
input[type="button"],
input[type="reset"],
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button,
.wc-block-components-button:not(.is-link) {
	font-family: var(--font-body);
	font-weight: var(--type-button-weight);
	font-size: var(--type-button-size);
	line-height: 1.4;
	letter-spacing: var(--type-button-ls);
	text-transform: uppercase;
	font-style: normal;
}

/* ---------- Small text ---------- */

/* Account navigation: body-sm like the storefront's footer/menu links. */
body .woocommerce-MyAccount-navigation a {
	font-family: var(--font-body);
	font-size: var(--type-body-sm-size);
	line-height: var(--type-body-sm-lh);
	font-weight: 400;
}

html body .woocommerce-MyAccount-navigation li.is-active a {
	font-weight: var(--type-strong-weight);
}

/* Quotes: body-lg, light, upright, thin rule on the left (type-quote). */
body blockquote {
	border-left: 1px solid rgb(26 26 26 / 0.25);
	padding-left: 1.25em;
	font-family: var(--font-body);
	font-weight: var(--type-quote-weight);
	font-style: normal;
	font-size: var(--type-body-lg-size);
	line-height: var(--type-body-lg-lh);
}

body blockquote > * {
	margin: 0;
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
}

/*
 * Cart block on phones: the line total («kr 59 000,00», one unbreakable unit
 * because of the no-break spaces) doesn't fit beside the product cell in
 * Woo's fixed 80px/132px grid, so it moves under the product there.
 */
@media (max-width: 480px) {
	body .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
		grid-column: 2 / -1;
		grid-row: 2;
		justify-self: start;
		margin-top: 4px;
		text-align: left;
	}
}