/* ==========================================================================
   Ironhaus — front-end styles
   Design tokens live in theme.json; this file handles component composition
   and the WooCommerce overrides that theme.json cannot reach.
   ========================================================================== */

:root {
	--ih-ease: cubic-bezier(.2, .7, .3, 1);
	--ih-rule: 1px solid var(--wp--preset--color--hairline);
}

/* --------------------------------------------------------------- Utilities */

/* Small uppercase label. Used for eyebrows, category tags and column heads. */
.ih-eyebrow,
.ih-eyebrow a {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--steel);
	text-decoration: none;
	margin: 0;
}
.ih-eyebrow--ember,
.ih-eyebrow--ember a { color: var(--wp--preset--color--ember); }

.ih-link-more a {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	text-decoration: none;
	border-bottom: 2px solid var(--wp--preset--color--ember);
	padding-bottom: 2px;
}
.ih-link-more a:hover { color: var(--wp--preset--color--ember); }

.ih-section { scroll-margin-top: 6rem; }

/* ------------------------------------------------------------------ Header */

.ih-header { position: relative; z-index: 20; }

.ih-announce__text {
	letter-spacing: .06em;
	text-transform: uppercase;
	font-weight: 500;
	margin: 0;
}

.ih-header__row { gap: clamp(1rem, 3vw, 2.5rem); }

.ih-nav a { position: relative; padding-block: .35rem; }
.ih-nav a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: var(--wp--preset--color--ember);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .22s var(--ih-ease);
}
.ih-nav a:hover::after,
.ih-nav .current-menu-item > a::after { transform: scaleX(1); }

.ih-header__actions .wc-block-mini-cart__button { padding: .4rem; }

/* -------------------------------------------------------------------- Hero */

.ih-hero { position: relative; overflow: hidden; }
.ih-hero::after {
	/* A single ember hairline anchoring the block; cheaper and more durable
	   than a hero photograph that has to work at every breakpoint. */
	content: "";
	position: absolute;
	left: 0; top: 0;
	width: 100%;
	height: 3px;
	background: var(--wp--preset--color--ember);
}
.ih-hero__lede { max-width: 46ch; }
.ih-hero__facts p { margin: 0; line-height: 1.5; }
.ih-hero__facts strong {
	font-family: var(--wp--preset--font-family--display);
	letter-spacing: -.01em;
}

.ih-hero .is-style-outline .wp-block-button__link {
	border: 1px solid rgba(244, 241, 236, .35);
	background: transparent;
}
.ih-hero .is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--bone);
	background: rgba(244, 241, 236, .08);
	color: var(--wp--preset--color--bone);
}

/* -------------------------------------------------------- Category tiles */

.ih-cat { height: 100%; transition: border-color .2s var(--ih-ease), transform .2s var(--ih-ease); }
.ih-cat:hover { border-color: var(--wp--preset--color--ink) !important; transform: translateY(-2px); }
.ih-cat h3 { margin-block: 0 .5rem; }
.ih-cat h3 a { text-decoration: none; }
.ih-cat h3 a::after { content: " →"; color: var(--wp--preset--color--ember); }
.ih-cat p { margin: 0; }

/* -------------------------------------------------------- Numbers band */

.ih-stat {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--wp--preset--color--ember);
	margin: 0 0 .5rem;
	padding-bottom: .6rem;
	border-bottom: 2px solid var(--wp--preset--color--ink);
	display: inline-block;
}

/* ---------------------------------------------------------- Product cards */

.ih-grid .wc-block-product-template,
.ih-grid .wp-block-post-template {
	gap: clamp(1.25rem, 2.5vw, 2rem) !important;
}

.ih-card__media img,
.wc-block-components-product-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	background: var(--wp--preset--color--paper);
	border: var(--ih-rule);
	border-radius: 3px;
	transition: transform .35s var(--ih-ease);
}
.ih-grid li:hover .ih-card__media img { transform: scale(1.02); }

.ih-card__title a { text-decoration: none; }
.ih-card__title a:hover { color: var(--wp--preset--color--ember); }

.ih-card__price {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	letter-spacing: -.01em;
}
.ih-card__price del { color: var(--wp--preset--color--steel); font-weight: 500; margin-right: .4rem; }
.ih-card__price ins { text-decoration: none; }

.ih-card__btn .wp-block-button__link,
.ih-card__btn a {
	display: block;
	width: 100%;
	text-align: center;
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 1.5px solid var(--wp--preset--color--ink);
}
.ih-card__btn .wp-block-button__link:hover,
.ih-card__btn a:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bone);
}

/* Woo nests the badge inside a block wrapper. Style the inner pill only —
   styling both produced a second ember stub behind the label. */
.ih-badge {
	background: none !important;
	padding: 0 !important;
	border: 0 !important;
	line-height: 0;
}
.wc-block-components-product-sale-badge {
	background: var(--wp--preset--color--ember) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 2px !important;
	font-family: var(--wp--preset--font-family--display);
	font-size: .6875rem !important;
	font-weight: 700;
	letter-spacing: .09em;
	line-height: 1;
	text-transform: uppercase;
	padding: .4rem .6rem !important;
	position: static !important;
	margin: 0 !important;
}

/* --------------------------------------------------------- Shop / archive */

.ih-crumbs,
.woocommerce-breadcrumb {
	font-size: .8125rem;
	color: var(--wp--preset--color--steel);
	letter-spacing: .01em;
}
.ih-crumbs a { text-decoration: none; color: var(--wp--preset--color--steel); }
.ih-crumbs a:hover { color: var(--wp--preset--color--ember); }

.ih-shop__head :where(h1) { margin: 0; }
.ih-shop__head .wp-block-term-description { max-width: 58ch; }

.ih-shop__bar {
	font-size: .875rem;
	color: var(--wp--preset--color--steel);
}
.ih-shop__bar select {
	font-family: var(--wp--preset--font-family--body);
	font-size: .875rem;
	border: var(--ih-rule);
	border-radius: 2px;
	padding: .45rem 2rem .45rem .7rem;
	background-color: var(--wp--preset--color--paper);
}

/* ------------------------------------------------------------ Single product */

.ih-product__gallery img {
	border: var(--ih-rule);
	border-radius: 3px;
	background: var(--wp--preset--color--paper);
}
.ih-product__gallery .flex-control-thumbs { gap: .6rem; display: flex; margin-top: .7rem; padding: 0; }
.ih-product__gallery .flex-control-thumbs li { list-style: none; width: 76px; }

.ih-product__lede { max-width: 44ch; margin-block: 0; }

.ih-product__price .woocommerce-Price-amount {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	letter-spacing: -.025em;
}
.ih-product__price del { color: var(--wp--preset--color--steel); font-weight: 500; }
.ih-product__price del .woocommerce-Price-amount { font-weight: 500; }
.ih-product__price ins { text-decoration: none; }

/* Warranty line — a headline feature for this store, not fine print. */
.ih-warranty {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: .9375rem;
	font-weight: 600;
	margin: 0 0 1.25rem;
}
.ih-warranty__mark {
	width: 9px; height: 9px; flex: none;
	background: var(--wp--preset--color--ember);
	border-radius: 50%;
}

.ih-reassurance {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 1.25rem 0 0;
	border-top: var(--ih-rule);
	display: grid;
	gap: .55rem;
	font-size: .9375rem;
	color: var(--wp--preset--color--steel);
}
.ih-reassurance li { position: relative; padding-left: 1.4rem; }
.ih-reassurance li::before {
	content: "";
	position: absolute;
	left: 0; top: .52em;
	width: 8px; height: 8px;
	border-left: 2px solid var(--wp--preset--color--ember);
	border-bottom: 2px solid var(--wp--preset--color--ember);
	transform: rotate(-45deg);
}

.ih-product__meta { font-size: .875rem; color: var(--wp--preset--color--steel); }

/* Add-to-cart form */
.ih-product form.cart { display: flex; gap: .75rem; align-items: stretch; margin: 0 0 1.25rem; }
.ih-product form.cart .quantity input {
	width: 5rem; height: 100%;
	padding: .95rem .6rem;
	border: 1.5px solid var(--wp--preset--color--ink);
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	text-align: center;
	background: var(--wp--preset--color--paper);
}
.ih-product form.cart button[type="submit"] {
	flex: 1;
	background: var(--wp--preset--color--ember);
	color: #fff;
	border: 0;
	border-radius: 2px;
	padding: 1rem 1.75rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s var(--ih-ease);
}
.ih-product form.cart button[type="submit"]:hover { background: var(--wp--preset--color--ink); }

/* Long-form description — the product page is the buying guide. */
.ih-product__body { max-width: 100%; }
.ih-product__body .wc-tab h2,
.ih-product__body .wp-block-woocommerce-product-details h2 {
	font-size: var(--wp--preset--font-size--h3);
	margin: 2.5rem 0 .8rem;
	max-width: 30ch;
}
.ih-product__body .wc-tab h2:first-child { margin-top: 0; }
.ih-product__body .wc-tab p {
	max-width: 68ch;
	margin: 0 0 1.15rem;
	color: #33393d;
}
.ih-product__body table.shop_attributes {
	width: 100%;
	max-width: 640px;
	border-collapse: collapse;
	font-size: .9375rem;
}
.ih-product__body table.shop_attributes th,
.ih-product__body table.shop_attributes td {
	text-align: left;
	padding: .7rem .9rem;
	border-bottom: var(--ih-rule);
}
.ih-product__body table.shop_attributes th {
	width: 42%;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	color: var(--wp--preset--color--steel);
}
.ih-product__body table.shop_attributes td p { margin: 0; }

/* Tabs */
.ih-product__body ul.tabs {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 1.75rem;
	margin: 0 0 2rem;
	padding: 0 0 .9rem;
	border-bottom: var(--ih-rule);
}
.ih-product__body ul.tabs li a {
	font-family: var(--wp--preset--font-family--display);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--steel);
	padding-bottom: .9rem;
	border-bottom: 2px solid transparent;
}
.ih-product__body ul.tabs li.active a {
	color: var(--wp--preset--color--ink);
	border-bottom-color: var(--wp--preset--color--ember);
}

/* -------------------------------------------------------------------- Cart */

.ih-ship-note {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: .9375rem;
	background: var(--wp--preset--color--sand);
	border-left: 3px solid var(--wp--preset--color--ember);
	padding: .85rem 1.1rem;
	margin: 0 0 1.5rem;
}
.ih-ship-note--met { border-left-color: #3d7a4a; }

/* ------------------------------------------------------------------ Guides */

.ih-guide { height: 100%; transition: border-color .2s var(--ih-ease); }
.ih-guide:hover { border-color: var(--wp--preset--color--ink) !important; }
.ih-guide h3 a { text-decoration: none; }
.ih-guide h3 a:hover { color: var(--wp--preset--color--ember); }
.ih-guide p { margin: 0; }

.ih-article-head { max-width: 46rem; }
.ih-guide-page .wp-block-post-content h2 { margin: 3rem 0 1rem; }
.ih-guide-page .wp-block-post-content h3 { margin: 2.25rem 0 .75rem; }

/* ------------------------------------------------------------------ Footer */

.ih-footer__head {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: #7d858b;
	margin: 0 0 1rem;
}
.ih-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ih-footer__list a {
	color: var(--wp--preset--color--bone);
	text-decoration: none;
	font-size: .9375rem;
}
.ih-footer__list a:hover { color: var(--wp--preset--color--ember); }
.ih-footer .wp-block-site-title a { color: var(--wp--preset--color--bone); }

/* ------------------------------------------------------- WooCommerce misc */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--wp--preset--color--ember) !important;
	background: var(--wp--preset--color--paper);
	border-radius: 3px;
	font-size: .9375rem;
}
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bone);
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: .8125rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: .9rem 1.5rem;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background: var(--wp--preset--color--ember);
	color: #fff;
}
.woocommerce .star-rating span::before { color: var(--wp--preset--color--ember); }

.related.products > h2,
.up-sells > h2 {
	font-size: var(--wp--preset--font-size--h2);
	margin-bottom: 2rem;
}

/* --------------------------------------------------------------- Responsive */

@media (max-width: 781px) {
	.ih-hero__facts { gap: 1.5rem 2rem !important; }
	.ih-product__top { gap: 2rem; }
	.ih-product form.cart { flex-wrap: wrap; }
	.ih-product form.cart button[type="submit"] { flex-basis: 100%; }
	.ih-shop__bar { gap: .75rem; }
}
@media (max-width: 600px) {
	.ih-announce__text { font-size: .6875rem; }
	.ih-stat { font-size: 1.5rem; }
}

/* Constrained layouts centre any child that has a max-width, which is not
   what we want for left-aligned ledes. */
.ih-product__lede,
.ih-shop__head .wp-block-term-description,
.ih-article-head { margin-inline: 0 auto; }

/* Woo's classic sale flash on the single product page — match the grid badge
   rather than leaving the default round olive circle. */
.woocommerce span.onsale,
.ih-product span.onsale {
	position: absolute;
	top: .75rem;
	left: .75rem;
	z-index: 3;
	min-height: 0;
	min-width: 0;
	line-height: 1;
	border-radius: 2px;
	background: var(--wp--preset--color--ember);
	color: #fff;
	font-family: var(--wp--preset--font-family--display);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	padding: .4rem .6rem;
	margin: 0;
}
.ih-product__gallery { position: relative; }

/* Reassurance ticks */
.ih-reassurance li::before {
	width: 9px;
	height: 5px;
	top: .45em;
	border-width: 0 0 2px 2px;
}

/* Warranty sits above the buy button, so give it room. */
.ih-warranty { margin-top: .25rem; }

/* The sale badge is a flex child of the image wrapper and was stretching to
   the full card width. Pin it to its own content size, over the image. */
.ih-card__media { position: relative; }
.ih-card__media .ih-badge {
	position: absolute;
	top: .6rem;
	left: .6rem;
	z-index: 2;
	width: fit-content;
	align-self: flex-start;
}

/* Archive heading alignment */
.ih-shop__head .wp-block-query-title { text-align: left; }

/* ------------------------------------------------------------------- Logo */

.ih-logo img { display: block; height: auto; }
.ih-logo a { display: block; line-height: 0; }

/* The wordmark is near-black with an alpha channel, so knocking it to pure
   white is a filter rather than a second asset to keep in sync. */
.ih-footer__logo img { filter: brightness(0) invert(1); }
.ih-footer__logo { margin-bottom: .25rem; }

@media (max-width: 600px) {
	.ih-logo img { width: 118px; }
}

/* ------------------------------------------------------ Layout corrections */

/* WordPress's constrained-layout rule centres any child with a max-width.
   These need to stay pinned left, and the layout rule is specific enough that
   a bare class does not win. */
.ih-product .ih-product__lede,
.ih-shop .ih-shop__head .wp-block-term-description,
.ih-guide-page .ih-article-head,
main .ih-article-head {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Woo's product grid sizes columns from a minimum width, which yields three
   across on a 1232px container. This catalog is designed for four. */
.ih-grid .wc-block-product-template {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
@media (min-width: 800px) {
	.ih-grid .wc-block-product-template { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (min-width: 1080px) {
	.ih-grid .wc-block-product-template { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 480px) {
	.ih-grid .wc-block-product-template { grid-template-columns: minmax(0, 1fr) !important; }
}


/* Hero contents share one left edge at every width. The outer group centres a
   wide box; this inner group lays its children out in normal flow, so the
   narrower lede lines up with the heading instead of drifting to the page
   edge on large screens. */
.ih-hero__inner { max-width: var(--wp--style--global--wide-size); margin-inline: auto; }
.ih-hero__inner > * { margin-left: 0; margin-right: 0; }
.ih-hero__lede { max-width: 46ch; }

/* ------------------------------------------------------------- Hero image */

/* A photographic hero has to survive two things: text sitting on top of it,
   and every screen width. The gradient is heaviest on the left, where the
   copy is, and lifts toward the right so the room is actually visible —
   rather than a flat wash that dims the photo without helping legibility. */
.ih-hero {
	position: relative;
	background-color: var(--wp--preset--color--ink);
	/* WebP with a JPEG fallback: image-set lets the browser choose, and older
	   engines that ignore image-set fall through to the plain url() above. */
	background-image: url("img/hero.jpg");
	background-image: image-set(url("img/hero.webp") type("image/webp"), url("img/hero.jpg") type("image/jpeg"));
	background-size: cover;
	background-position: 70% center;
	isolation: isolate;
}
.ih-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(
		100deg,
		rgba(20, 24, 26, .95) 0%,
		rgba(20, 24, 26, .92) 34%,
		rgba(20, 24, 26, .72) 62%,
		rgba(20, 24, 26, .48) 100%
	);
}
/* The ember hairline and the content both sit above the overlay. */
.ih-hero::after { z-index: 2; }
.ih-hero__inner { position: relative; z-index: 1; }

/* ---------------------------------------------------------- Hero on phones

   A hero designed for a wide screen fails on a phone in predictable ways: the
   vertical rhythm is built for space there is none of, the headline's hard
   line break fights the natural wrap, and a paragraph that reads as one glance
   on a desktop becomes eight lines of scrolling. Each is handled below. */

@media (max-width: 900px) {
	/* The photo is behind full-width text now, so it works as texture rather
	   than subject. Frame the equipment and darken it enough to read over. */
	.ih-hero { background-position: 58% center; }
	.ih-hero::before {
		background: linear-gradient(
			175deg,
			rgba(20, 24, 26, .90) 0%,
			rgba(20, 24, 26, .86) 45%,
			rgba(20, 24, 26, .93) 100%
		);
	}
}

@media (max-width: 781px) {
	/* 8rem of padding is a desktop measure; on a phone it is a blank screen
	   before any content appears. */
	.ih-hero {
		padding-top: 3.25rem !important;
		padding-bottom: 3.25rem !important;
	}

	/* Let the headline wrap where the words fall, not where a desktop
	   line break says. */
	.ih-hero__break { display: none; }
	.ih-hero__title {
		font-size: clamp(2.25rem, 10.5vw, 3rem) !important;
		line-height: 1.04 !important;
		letter-spacing: -0.03em;
		margin-bottom: 1rem !important;
	}

	.ih-eyebrow { font-size: .6875rem; letter-spacing: .16em; }

	/* Two sentences is the whole job on a phone. The rest stays in the
	   markup for larger screens and for crawlers. */
	.ih-hero__lede-more { display: none; }
	.ih-hero__lede {
		font-size: 1.0625rem !important;
		line-height: 1.55;
		max-width: 34ch;
	}

	/* Thumb-sized, full-width, stacked — not two buttons squeezed side by
	   side and clipped. */
	.ih-hero__cta { gap: .6rem !important; }
	.ih-hero__cta .wp-block-button { width: 100%; }
	.ih-hero__cta .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
		padding-block: 1.05rem;
	}

	/* Four facts in a row become a legible 2x2 grid. */
	.ih-hero__facts {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 1.35rem 1.25rem !important;
		margin-top: 2.75rem !important;
	}
	.ih-hero__facts p { font-size: .8125rem; line-height: 1.45; }

	/* The announcement bar was wrapping to two lines and eating the fold.
	   Drop the least load-bearing claim rather than shrinking the type to
	   the point of being unreadable. */
	.ih-announce__text { font-size: .6875rem; letter-spacing: .05em; }
	.ih-announce__extra { display: none; }
}

@media (max-width: 400px) {
	.ih-hero__facts { gap: 1.15rem 1rem !important; }
	.ih-hero__title { font-size: clamp(2rem, 10vw, 2.5rem) !important; }
}

/* ------------------------------------------------- Product page on phones */

@media (max-width: 781px) {
	/* The quantity field was sized with height:100% against a flex row. Once
	   the row wraps on a phone that row contains only the field, so it
	   collapsed to ~22px — below any usable touch target. */
	.ih-product form.cart { align-items: stretch; gap: .65rem; }
	.ih-product form.cart .quantity { flex: 0 0 auto; }
	.ih-product form.cart .quantity input {
		height: auto;
		min-height: 52px;
		width: 5.5rem;
		font-size: 1rem;
	}
	.ih-product form.cart button[type="submit"] { min-height: 52px; }

	/* Tabs wrap to several lines; tighten them so the panel below stays
	   near the fold. */
	.ih-product__body ul.tabs { gap: .9rem 1.4rem; margin-bottom: 1.5rem; }

	/* Spec tables are the reason people are on this page — keep them
	   readable rather than letting long values squeeze the label column. */
	.ih-product__body table.shop_attributes th { width: 45%; }
	.ih-product__body table.shop_attributes th,
	.ih-product__body table.shop_attributes td { padding: .6rem .5rem; font-size: .875rem; }

	.ih-product__lede { font-size: 1.0625rem !important; }
}