/* ITEMPLS — base layer, buttons, badges, form controls.
 *
 * Shoptimizer is a light theme with its own opinions, so this layer is more
 * assertive than a child theme usually needs: the mission was explicitly not
 * to let the existing appearance dictate the result. Where a selector fights
 * the parent it is written to win once, here, rather than being patched
 * repeatedly further down.
 */

html { -webkit-text-size-adjust: 100%; }

body,
body.woocommerce,
body.woocommerce-page {
	background: var(--it-bg);
	color: var(--it-text);
	font-family: var(--it-font);
	font-size: var(--it-fs-base);
	line-height: var(--it-lh);
	/* No horizontal scroll at any width. Checked at 320px in QA; a single
	 * wide table or unbroken SKU is all it takes to break a phone layout. */
	overflow-x: hidden;
}

/* Long item names and SKUs must wrap rather than widen the page. */
body, h1, h2, h3, h4, p, li, td, th, .price, .woocommerce-loop-product__title {
	overflow-wrap: break-word;
	word-break: normal;
}

h1, h2, h3, h4, .it-h {
	color: var(--it-text);
	font-weight: 650;
	line-height: var(--it-lh-tight);
	letter-spacing: -0.015em;
	margin: 0 0 var(--it-s3);
}
h1 { font-size: var(--it-fs-2xl); }
h2 { font-size: var(--it-fs-xl); }
h3 { font-size: var(--it-fs-lg); }

a { color: var(--it-accent); text-decoration: none; }
a:hover { color: var(--it-accent-hover); }

/* Focus must be visible for keyboard users and invisible for mouse users. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
	outline: none;
	box-shadow: var(--it-focus);
	border-radius: var(--it-r-sm);
}

.it-wrap {
	max-width: var(--it-max);
	margin-inline: auto;
	padding-inline: var(--it-gutter);
	width: 100%;
}

/* Prices are compared vertically down a grid, so they get tabular figures:
 * without them the digits jitter column to column and scanning is slower. */
.price, .amount, .woocommerce-Price-amount, .it-price {
	font-variant-numeric: tabular-nums;
	color: var(--it-text);
	font-weight: 650;
}
.woocommerce-Price-currencySymbol { color: var(--it-text-muted); font-weight: 500; }
del, del .amount { color: var(--it-text-faint); font-weight: 500; }
ins { background: none; text-decoration: none; }

/* ---------------------------------------------------------------- buttons */
.it-btn,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--it-s2);
	min-height: 44px;              /* comfortable touch target */
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: var(--it-r);
	background: var(--it-surface-3);
	color: var(--it-text);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background var(--it-t), border-color var(--it-t), transform var(--it-t);
	text-align: center;
}
.it-btn:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover {
	background: var(--it-line);
	color: var(--it-text);
}
.it-btn:active { transform: translateY(1px); }

.it-btn--primary,
.woocommerce button.button.alt, .woocommerce a.button.alt,
.woocommerce input.button.alt, .woocommerce #respond input#submit.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce .checkout-button {
	background: var(--it-accent);
	border-color: var(--it-accent);
	color: var(--it-text-on-accent);
}
.it-btn--primary:hover,
.woocommerce button.button.alt:hover, .woocommerce a.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .checkout-button:hover {
	background: var(--it-accent-hover);
	border-color: var(--it-accent-hover);
	color: var(--it-text-on-accent);
}
.it-btn--ghost {
	background: transparent;
	border-color: var(--it-line-strong);
	color: var(--it-text);
}
.it-btn--ghost:hover { background: var(--it-surface-2); }
.it-btn--lg { min-height: 52px; padding: 14px 26px; font-size: var(--it-fs-md); }
.it-btn--block { width: 100%; }
.it-btn[disabled], .woocommerce button.button:disabled {
	opacity: .5; cursor: not-allowed;
}

/* ----------------------------------------------------------------- badges */
.it-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 9px;
	border: 1px solid var(--it-line);
	border-radius: var(--it-r-pill);
	background: var(--it-surface-2);
	color: var(--it-text-muted);
	font-size: var(--it-fs-xs);
	font-weight: 600;
	letter-spacing: .02em;
	white-space: nowrap;
}
.it-badge__dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: currentColor; flex: none;
}

/* Mode badges. The dot is decoration; the word is the information. */
.it-badge--ladder {
	color: var(--it-ladder);
	background: var(--it-ladder-soft);
	border-color: var(--it-ladder-line);
}
.it-badge--nonladder {
	color: var(--it-nonladder);
	background: var(--it-nonladder-soft);
	border-color: var(--it-nonladder-line);
}
.it-badge--ok { color: var(--it-ok); background: var(--it-ok-soft); border-color: transparent; }
.it-badge--class { color: var(--it-text-muted); }

/* ---------------------------------------------------------------- surfaces */
.it-card {
	background: var(--it-surface);
	border: 1px solid var(--it-line);
	border-radius: var(--it-r-lg);
}
.it-panel {
	background: var(--it-surface);
	border: 1px solid var(--it-line);
	border-radius: var(--it-r-lg);
	padding: var(--it-s5);
}

/* ------------------------------------------------------------ form controls */
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=search], input[type=number], select, textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.select2-container--default .select2-selection--single {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	background: var(--it-surface-3);
	border: 1px solid var(--it-line);
	border-radius: var(--it-r);
	color: var(--it-text);
	font: inherit;
	transition: border-color var(--it-t);
}
input::placeholder, textarea::placeholder { color: var(--it-text-faint); }
input:focus, select:focus, textarea:focus { border-color: var(--it-accent-line); }
label, .woocommerce form .form-row label {
	color: var(--it-text-muted);
	font-size: var(--it-fs-sm);
	font-weight: 600;
	display: block;
	margin-bottom: 6px;
}

/* --------------------------------------------------------------- messages */
.woocommerce-message, .woocommerce-info, .woocommerce-error,
.wc-block-components-notice-banner {
	background: var(--it-surface-2) !important;
	border: 1px solid var(--it-line) !important;
	border-left: 3px solid var(--it-accent) !important;
	border-radius: var(--it-r) !important;
	color: var(--it-text) !important;
	padding: var(--it-s4) var(--it-s5) !important;
}
.woocommerce-error, .wc-block-components-notice-banner.is-error {
	border-left-color: var(--it-danger) !important;
	background: var(--it-danger-soft) !important;
}
.woocommerce-message { border-left-color: var(--it-ok) !important; }

/* Screen-reader-only text, used by every control that is an icon. */
.it-sr {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Shoptimizer ships a light page background on several wrappers. */
#page, .site, .site-content, #content, .col-full, .woocommerce-page #content {
	background: transparent;
}

/* ------------------------------------------------------------------------
 * Specificity layer against the parent theme's Customizer (Kirki).
 *
 * Kirki prints its settings as an inline <style> block AFTER every enqueued
 * stylesheet -- line 568 of the rendered head against line 299 for these
 * tokens -- so on equal specificity it simply wins. Found by looking at the
 * page in a real browser, where it rendered the whole storefront on a white
 * page with the hero headline in #222 on a near-black hero: effectively
 * invisible. No DOM or CSS assertion caught it, because every rule in these
 * files was present and correct; it was just losing.
 *
 * `html body` outranks Kirki's bare `body` and `h1` by specificity alone, so
 * this wins without !important and without depending on print order.
 * ------------------------------------------------------------------------ */
html body,
html body.woocommerce,
html body.woocommerce-page {
	background: var(--it-bg);
	color: var(--it-text);
	font-family: var(--it-font);
}
html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6 {
	color: var(--it-text);
	font-family: var(--it-font);
}
html body .site,
html body #page,
html body .site-content,
html body .site-content .col-full,
html body #content {
	background: transparent;
}

/* Card titles and prices lost the font battle separately from the page:
 * Kirki targets .woocommerce-loop-product__title by CLASS, which outranks the
 * `html body h2` rule above (a class beats any number of element selectors).
 * So the card text rendered in a serif while every heading around it was
 * already correct. Matched here at class specificity or higher. */
html body ul.products li.product .woocommerce-loop-product__title,
html body ul.products li.product h2,
html body ul.products li.product h3,
html body ul.products li.product .price,
html body .it-card__price,
html body .it-summary h1,
html body .product_title {
	font-family: var(--it-font);
	color: var(--it-text);
}

/* Kirki also scopes its grey per page type -- `.single-product .site-content
 * .col-full { background: #f8f8f8 }` is 0,3,0 and beat the 0,2,2 rule above,
 * which is why the product page alone came out light grey with near-white
 * text on it. `body[class]` adds an attribute selector, lifting this to 0,3,2
 * on every page type without naming each one. */
html body[class] .site-content,
html body[class] .site-content .col-full,
html body[class] #content,
html body[class] .site {
	background: transparent;
}

/* Kirki also assigns its font and its green (#3bb54a) to individual
 * WooCommerce components -- buttons, notices, the empty-cart message -- not
 * just to body, so the body-level fix above never reached them. Found on the
 * empty cart: serif text and a bright green "Return to shop" button.
 * !important is used here, and only here, because Kirki's inline block
 * prints after every stylesheet and its selectors vary by component. */
html body button, html body input, html body select, html body textarea,
html body .button, html body a.button,
html body .woocommerce-info, html body .woocommerce-message, html body .woocommerce-error,
html body .cart-empty, html body .return-to-shop, html body table,
html body label {
	font-family: var(--it-font) !important;
}
html body .return-to-shop a.button,
html body .woocommerce a.button.wc-backward,
html body .woocommerce #payment #place_order,
html body .woocommerce a.checkout-button,
html body .woocommerce .wc-proceed-to-checkout a.checkout-button {
	background: var(--it-accent) !important;
	border-color: var(--it-accent) !important;
	color: var(--it-text-on-accent) !important;
}
html body .return-to-shop a.button:hover,
html body .woocommerce #payment #place_order:hover,
html body .woocommerce a.checkout-button:hover {
	background: var(--it-accent-hover) !important;
}