/*
 * Landing-page body sections — 4B design direction (Sprint 3, Phase A).
 * See includes/landing-sections.php for what each section is and why it exists.
 *
 * SCOPING IS DELIBERATE AND IMPORTANT: the 4B mockup sets its tokens on :root and styles `body`,
 * `h1`, `a` and so on globally. On the real shop those sections sit INSIDE an existing Elementor
 * page, so doing that would repaint the whole site. Every rule below is therefore scoped under
 * `.irkn-land`, and the variables live on `.irkn-land` rather than on `:root`.
 *
 * Non-negotiable rules, the same ones the header is held to:
 *   - no horizontal scrolling at 360, 768 or 1440
 *   - no tap target under 44px
 *   - no input here, so the 16px input rule does not apply (the header search covers that)
 *   - the call accent #e8590c is used for the "call us" action ONLY
 */

.irkn-land {
	--irkn-blue: #203ba6;
	--irkn-blue-2: #3b62e8;
	--irkn-blue-lt: #eef2ff;
	--irkn-ink: #0e1626;
	--irkn-ink2: #43506a;
	--irkn-muted: #7d8aa3;
	--irkn-line: #e4e8f2;
	--irkn-bg: #f4f6fb;
	--irkn-call: #e8590c;
	--irkn-r: 16px;
	--irkn-r-lg: 24px;
	--irkn-sh: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 22px rgba(32, 59, 166, .07);
	--irkn-sh-lg: 0 16px 40px rgba(32, 59, 166, .14);

	background: var(--irkn-bg);
	color: var(--irkn-ink);
	padding: clamp(28px, 4.5vw, 56px) 0;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.55;
}

/*
 * The same font on everything INSIDE the sections, not just on the wrapper.
 *
 * WHY (owner's feedback, 2026-10-10). The wrapper above sets the mockup's font, but the theme sets a
 * font directly on `h1`-`h6` as well, and **a rule on the element beats an inherited one**. So the
 * section headings were rendering in Open Sans (measured: `.irkn-land__title` computed to
 * `"Open Sans"`) while the paragraph beside them used the system font - **two fonts in one section.**
 */
.irkn-land h1,
.irkn-land h2,
.irkn-land h3,
.irkn-land h4,
.irkn-land h5,
.irkn-land h6,
.irkn-land p,
.irkn-land li,
.irkn-land a,
.irkn-land span,
.irkn-land button,
.irkn-land input,
.irkn-land small,
.irkn-land b,
.irkn-land strong {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.irkn-land--white {
	background: #fff;
}

.irkn-land__wrap {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 clamp(16px, 4.5vw, 40px);
}

.irkn-land__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 22px;
}

.irkn-land__title {
	margin: 0;
	font-size: clamp(21px, 2.5vw, 30px);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -.02em;
	color: var(--irkn-ink);
}

.irkn-land__more {
	color: var(--irkn-blue);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 4px;
}

.irkn-land__more:hover {
	color: var(--irkn-blue-2);
	text-decoration: underline;
}

/* ---------- category tiles ---------- */

.irkn-cats__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 14px;
}

.irkn-cat {
	background: #fff;
	border: 1px solid var(--irkn-line);
	border-radius: var(--irkn-r);
	padding: 18px;
	min-width: 0;
	/* 148px while a product count sat under the name. With the name alone the tile only needs room
	   for the icon and up to three lines of text, so it is shorter and the grid reads tighter. */
	min-height: 112px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 10px;
	box-shadow: var(--irkn-sh);
	text-decoration: none;
	color: inherit;
	transition: transform .16s ease, box-shadow .16s ease;
}

.irkn-cat:hover {
	transform: translateY(-3px);
	box-shadow: var(--irkn-sh-lg);
}

.irkn-cat__ic {
	width: 44px;
	height: 44px;
	border-radius: 13px;
	background: var(--irkn-blue-lt);
	color: var(--irkn-blue);
	display: grid;
	place-items: center;
	font-size: 20px;
	flex: 0 0 auto;
}

.irkn-cat__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.irkn-cat__nm {
	font-size: 15.5px;
	font-weight: 700;
	overflow-wrap: break-word;
	min-width: 0;
}

/*
 * The popular sub-categories, as one quiet line under the tiles (D-087).
 * NOT a second grid: a second block of identical tiles read as the page repeating itself.
 * Each link keeps a 44px tap height via padding, so the line stays touch-friendly without turning
 * into another row of cards.
 */
.irkn-cats__pop {
	margin: 14px 0 0;
	font-size: 14.5px;
	line-height: 1.4;
	color: var(--irkn-muted);
}

.irkn-cats__poplabel {
	font-weight: 700;
	color: var(--irkn-ink2);
	margin-right: 6px;
}

.irkn-cats__pop a {
	color: var(--irkn-blue);
	font-weight: 600;
	text-decoration: none;
	display: inline-block;
	padding: 12px 2px;
}

.irkn-cats__pop a:hover {
	text-decoration: underline;
}

.irkn-cats__sep {
	color: #c3cbdd;
	padding: 0 6px;
}

/* ---------- product cards ---------- */

.irkn-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.irkn-card {
	background: #fff;
	border: 1px solid var(--irkn-line);
	border-radius: var(--irkn-r);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--irkn-sh);
	min-width: 0;
}

.irkn-card--out {
	background: #fffaf6;
	border-color: #f4dcc8;
}

.irkn-card__ph {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	background: #fff;
	overflow: hidden;
	text-decoration: none;
}

.irkn-card__ph img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	padding: 10px;
	display: block;
}

.irkn-card__noimg {
	color: var(--irkn-muted);
	font-size: 12.5px;
}

.irkn-tag {
	position: absolute;
	top: 9px;
	left: 9px;
	background: #fdece0;
	color: var(--irkn-call);
	font-size: 11.5px;
	font-weight: 800;
	padding: 4px 9px;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.irkn-card__b {
	padding: 15px;
	display: flex;
	flex-direction: column;
	gap: 9px;
	flex: 1;
	min-width: 0;
}

.irkn-card__nm {
	margin: 0;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.35;
	min-height: 2.7em;
	overflow-wrap: break-word;
}

.irkn-card__nm a {
	color: var(--irkn-ink);
	text-decoration: none;
	/*
	 * A real block, 44px tall, not a bare text node.
	 * Measured in the browser at 360px: as a plain link the product name was only **40px** tall
	 * (20px on one line at wider widths) — under this project's 44px minimum. The extra height is
	 * hit area, not decoration; the name sits at the top of it exactly where it did before.
	 */
	display: block;
	min-height: 44px;
}

.irkn-card__nm a:hover {
	color: var(--irkn-blue);
}

.irkn-card__pr {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 8px;
	font-size: 22px;
	font-weight: 800;
	color: var(--irkn-ink);
}

.irkn-card__pr del {
	color: var(--irkn-muted);
	font-weight: 600;
	font-size: 15px;
	text-decoration: line-through;
}

.irkn-card__pr ins {
	text-decoration: none;
}

/*
 * WooCommerce prints hidden screen-reader text inside an on-sale price — "Original price was: …"
 * and "Current price is: …". WooCommerce's own stylesheet hides it, and on the live shop it is
 * hidden. **It is hidden here too, scoped, because the standalone preview does not load the theme's
 * stylesheet and the owner saw those sentences printed across the price as a result.** This is not a
 * cosmetic tweak: without a rule like this the sentence is visible to every visitor.
 */
.irkn-land .screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	position: absolute;
	word-wrap: normal !important;
}

.irkn-card__notice {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	color: #8a4512;
	background: #fff3ea;
	border: 1px solid #f2d6bd;
	border-radius: 11px;
	padding: 10px;
}

.irkn-card__notice a {
	color: #8a4512;
	font-weight: 700;
}

/* ---------- buttons ---------- */

.irkn-btn {
	margin-top: auto;
	width: 100%;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 11px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
}

.irkn-btn--blue {
	background: var(--irkn-blue);
	color: #fff;
}

.irkn-btn--blue:hover {
	background: #1a3089;
}

.irkn-btn--call {
	background: var(--irkn-call);
	color: #fff;
}

.irkn-btn--call:hover {
	background: #cf4d08;
}

/* ---------- call band ---------- */

.irkn-band {
	margin: 0;
	padding: clamp(28px, 4.5vw, 56px) 0;
	background: var(--irkn-bg);
}

.irkn-band__in {
	max-width: 1320px;
	margin: 0 auto;
	padding: clamp(26px, 3.6vw, 44px);
	background: linear-gradient(135deg, var(--irkn-blue), var(--irkn-blue-2));
	color: #fff;
	border-radius: var(--irkn-r-lg);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

.irkn-band__txt {
	min-width: 0;
}

.irkn-band__title {
	margin: 0;
	font-size: clamp(20px, 2.5vw, 31px);
	font-weight: 800;
	line-height: 1.14;
}

.irkn-band__p {
	margin: 10px 0 0;
	opacity: .93;
	max-width: 42em;
	font-size: 15.5px;
}

.irkn-band__tel {
	background: #fff;
	color: var(--irkn-blue);
	font-weight: 800;
	font-size: clamp(19px, 2.3vw, 27px);
	padding: 16px 26px;
	border-radius: 999px;
	white-space: nowrap;
	box-shadow: var(--irkn-sh-lg);
	text-decoration: none;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
}

.irkn-band__tel:hover {
	color: var(--irkn-blue-2);
}

/* ---------- brand strip ---------- */

.irkn-brands__row {
	display: flex;
	flex-wrap: wrap;
	gap: 11px;
}

.irkn-brd {
	background: #fff;
	border: 1px solid var(--irkn-line);
	border-radius: 999px;
	padding: 13px 26px;
	font-weight: 800;
	color: var(--irkn-ink2);
	box-shadow: var(--irkn-sh);
	text-decoration: none;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
}

.irkn-brd:hover {
	border-color: var(--irkn-blue-2);
	color: var(--irkn-blue);
}

/* ---------- responsive ---------- */

@media (max-width: 1180px) {
	.irkn-cats__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 1080px) {
	.irkn-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 780px) {
	.irkn-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 680px) {
	.irkn-cats__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.irkn-band__in {
		flex-direction: column;
		align-items: flex-start;
	}
}