/*
 * Tile pages — the search results page (Sprint 6) and the product-category archive (Sprint 3 Phase B).
 *
 * WHAT THIS FILE IS FOR. The results page used to be OceanWP's blog-post listing wearing a product's
 * clothes: a thumbnail, an excerpt paragraph and a "read more" link, with **no price, no stock state
 * and no way to buy** (measured on the rendered page, 2026-10-10). The owner asked for tiles "same as
 * on Landing page". This stylesheet arranges the SAME card the landing page uses into a grid.
 *
 * IT DOES NOT DEFINE A SECOND CARD. Every product-related rule below belongs to `.irkn-card`,
 * `.irkn-tag` and `.irkn-btn`, which live in `assets/landing.css` and are shared. This file only adds
 * the page's frame — heading, count, notes, grid, empty state.
 *
 * Loaded on search pages AND on product-category archives, after `landing.css`; on nothing else.
 * The two pages share the grid, the pager and the empty state below — deliberately, so a change to
 * one cannot leave the other behind.
 *
 * Non-negotiable rules, the same ones the rest of the design is held to:
 *   - no horizontal scrolling at 360, 768 or 1440
 *   - no tap target under 44px (the card's own buttons are 48px, from landing.css)
 *   - the call accent #e8590c is used for the "call us" action ONLY
 */

/*
 * The results live INSIDE OceanWP's own content area, which already supplies the page gutter. So the
 * grey band and the vertical padding that the landing sections use are removed here, and the wrapper
 * keeps its max width but drops its own side padding — otherwise the grid would be indented twice.
 *
 * `.irkn-land` is still on the element on purpose: that is what carries the design tokens
 * (--irkn-blue, --irkn-line, the shadow and radius values) and the shared card's type rules.
 */
.irkn-src,
.irkn-arch {
	background: transparent;
	padding: 0;
	margin: 0 0 30px;
}

.irkn-src .irkn-land__wrap,
.irkn-arch .irkn-land__wrap {
	padding: 0;
}

.irkn-src__head {
	margin: 0 0 18px;
}

.irkn-src__title {
	margin: 0 0 6px;
	font-size: clamp(21px, 2.6vw, 30px);
	font-weight: 800;
	line-height: 1.15;
	/* The theme sets letter-spacing: 1px and it INHERITS, which reads as a different typeface
	   (D-095). It is neutralised in the component's own type block, not on a wrapper. */
	letter-spacing: -.02em;
	text-transform: none;
	color: var(--irkn-ink);
	overflow-wrap: break-word;
}

.irkn-src__count {
	margin: 0;
	color: var(--irkn-ink2);
	font-size: 15px;
}

/* The "results shown for a corrected word" note. A quiet blue strip, not a warning. */
.irkn-src__note,
.irkn-src__suggest {
	margin: 0 0 16px;
	padding: 12px 14px;
	background: var(--irkn-blue-lt);
	border: 1px solid #dbe3ff;
	border-radius: var(--irkn-r);
	color: var(--irkn-ink2);
	font-size: 15px;
	line-height: 1.45;
}

.irkn-src__suggest a {
	color: var(--irkn-blue);
	font-weight: 700;
	/* A real 44px target, because this is the line that rescues a failed search. */
	display: inline-block;
	padding: 8px 2px;
}

/* ---------- the grid ---------- */

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

/* Each card is a real grid item: without this a long product name can push the track wider. */
.irkn-src__card,
.irkn-arch__card {
	min-width: 0;
}

.irkn-src__pager,
.irkn-arch__pager {
	margin: 26px 0 0;
	/*
	 * ⚠️ THE `overflow` IS LOAD-BEARING, AND IT WAS MEASURED RATHER THAN GUESSED.
	 * OceanWP's pagination puts a `<span class="screen-reader-text">Go to the next page</span>` INSIDE
	 * the "next page" link. The theme hides that text, but the span is `position: absolute` and its
	 * box is still ~38px wide, so on a phone it stuck out past the page edge: **7px of layout overflow
	 * at 360px, measured with `window.innerWidth` asserted to 360**. A visitor could not actually
	 * scroll sideways, because OceanWP sets `html { overflow-x: hidden }` — so this was invisible, but
	 * it was real, and "the theme hides the symptom" is not the same as fixing it.
	 */
	overflow: hidden;
}

/*
 * The pager's own tap targets.
 *
 * OceanWP renders them at **40 x 40px** (measured at 360px), which is under this project's 44px
 * minimum. That matters here more than usual: a search for `scheppach` offers **37 pages**, and paging
 * through them on a phone is exactly the case this rule is for. Only the size changes — the theme's
 * look is left alone.
 */
.irkn-src__pager .page-numbers,
.irkn-arch__pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

/* ---------- the empty state ---------- */

.irkn-src__empty,
.irkn-arch__empty {
	background: #fff;
	border: 1px solid var(--irkn-line);
	border-radius: var(--irkn-r);
	padding: clamp(20px, 3vw, 32px);
	box-shadow: var(--irkn-sh);
}

.irkn-src__empty-title,
.irkn-arch__empty-title {
	margin: 0 0 10px;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--irkn-ink);
}

.irkn-src__empty-text,
.irkn-arch__empty-text {
	margin: 0 0 14px;
	max-width: 46em;
	color: var(--irkn-ink2);
}

.irkn-src__empty-call,
.irkn-arch__empty-call {
	margin: 0;
	font-size: clamp(19px, 2.2vw, 24px);
	font-weight: 800;
	white-space: nowrap;
}

.irkn-src__empty-call a,
.irkn-arch__empty-call a {
	color: var(--irkn-blue);
	text-decoration: none;
}

.irkn-src__empty-call a:hover,
.irkn-arch__empty-call a:hover {
	text-decoration: underline;
}

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

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

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

/*
 * ===========================================================================
 * Product-category archive — Sprint 3 Phase B
 * ===========================================================================
 *
 * The page's own frame. Everything product-related is shared with the search page above; this block
 * adds only what a category page has and a search page does not: the heading, the sub-category tiles,
 * the count-and-sort bar, and the category description.
 *
 * Scoped under `.irkn-arch` throughout, so no rule here can repaint any other page of the shop.
 */

.irkn-arch__head {
	margin: 0 0 18px;
}

.irkn-arch__title {
	margin: 0;
	font-size: clamp(21px, 2.6vw, 30px);
	font-weight: 800;
	line-height: 1.15;
	/*
	 * The theme sets `letter-spacing: 1px` and it INHERITS, which reads as a different typeface
	 * (D-095). It is neutralised in the component's own type block, not on a wrapper.
	 */
	letter-spacing: -.02em;
	text-transform: none;
	color: var(--irkn-ink);
	overflow-wrap: break-word;
}

/* ---------- how many, then in what order ---------- */

/*
 * STACKED AND LEFT-ALIGNED, at the owner's instruction on 2026-10-11: the count line first, the sort
 * control BELOW it on the left of the content, with the button immediately beside the select.
 * (It was one `space-between` row before, which put the sort control on the right.)
 */
.irkn-arch__bar {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 16px;
}

.irkn-arch__count {
	margin: 0;
	color: var(--irkn-ink2);
	font-size: 15px;
}

.irkn-arch__sort {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0;
}

.irkn-arch__sortlabel {
	font-size: 15px;
	color: var(--irkn-ink2);
}

/*
 * ⚠️ `width: auto` IS LOAD-BEARING. Without it a theme rule `select { width: 100% }` applied, the box
 * stretched to the whole row (measured 423px of 423px), and the button was pushed onto a THIRD line
 * below it. The owner asked for the button **right next to the selection field** on 2026-10-11, and
 * this is what made that true.
 */
.irkn-arch__select {
	width: auto;
	min-height: 44px;
	font-family: inherit;
	font-size: 16px;
	color: var(--irkn-ink);
	background: #fff;
	border: 1px solid var(--irkn-line);
	border-radius: 11px;
	padding: 0 12px;
	max-width: 100%;
}

.irkn-arch__sortgo {
	min-height: 44px;
	padding: 0 18px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	color: var(--irkn-ink);
	background: #fff;
	border: 1px solid var(--irkn-line);
	border-radius: 11px;
	cursor: pointer;
}

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

/*
 * The filter panel lived here for a few hours on 2026-10-11 and was REMOVED at the owner's request —
 * *"filter looks heavy on page, cover all page, subcategories filter out once selected from menu"*.
 * Every rule went with it, including the ones that existed only to fix the plugin's own layout.
 * If it is ever wanted back, the block is in this file's git history (commit e4d89a8).
 *
 * ⚠️ The `filter-everything` translations in `includes/category.php` were KEPT: the plugin is still
 * installed and active, and a stale `?category=…` address still filters, which would print English.
 */