/* IRENNE catalog archive: sidebar + toolbar + grid, per design. */

.ir-catalog {
	max-width: var(--ir-shell-max);
	margin: 0 auto;
	padding: clamp(20px, 3vw, 36px) var(--ir-side-pad) 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	font-family: var(--ir-font-ui);
}
@media (min-width: 1200px) {
	.ir-catalog { grid-template-columns: 220px minmax(0, 1fr); gap: 48px; }
}

/* ---------- Sidebar ---------- */
.ir-catalog__title {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: var(--ir-tracking-caps);
	text-transform: uppercase;
	margin: 0 0 22px;
}
.ir-catalog__sidebar { display: none; }
@media (min-width: 1200px) {
	.ir-catalog__sidebar { display: block; }
}
.ir-catalog__group { margin-bottom: 26px; }
.ir-catalog__group-label,
.ir-catalog__group-label a {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: var(--ir-tracking-caps);
	text-transform: uppercase;
	color: var(--ir-text);
	text-decoration: none;
	margin-bottom: 12px;
	display: block;
}
.ir-catalog__sidebar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ir-catalog__sidebar li { margin: 0; }
.ir-catalog__sidebar li > a {
	display: block;
	padding: 6px 0 6px 12px;
	font-size: 14px;
	color: var(--ir-text);
	text-decoration: none;
	letter-spacing: 0.02em;
}
.ir-catalog__sidebar li.is-active > a,
.ir-catalog__sidebar li > a:hover { color: var(--ir-sale); }
.ir-catalog__sub { padding-left: 14px !important; }
.ir-catalog__sub li > a { color: var(--ir-text-muted); font-size: 13px; }
.ir-catalog__all > a { text-transform: uppercase; font-size: 13px; letter-spacing: 0.08em; }

/* ---------- Toolbar ---------- */
.ir-toolbar {
	position: relative;   /* dropdown panels anchor here */
	margin-bottom: 6px;
}
.ir-toolbar__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
}
.ir-toolbar__filters {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 22px;
}
/* Phones/tablets collapse the four triggers into the «Фільтри» drawer
   button (styled in search.css). The hide rule must live HERE: this
   file loads after search.css, so the unscoped display:flex above
   would override search.css's media rule at every width. */
@media (max-width: 1199.98px) {
	.ir-toolbar__filters { display: none; }
}
.ir-toolbar__label {
	font-size: 14px;
	color: var(--ir-text);
}
/* Beat theme/Elementor default button chrome. */
.ir-toolbar button.ir-toolbar__filter {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 4px 0;
	cursor: pointer;
	font-family: var(--ir-font-ui);
	font-size: 14px;
	color: var(--ir-text);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: color var(--ir-dur) var(--ir-ease);
}
.ir-toolbar button.ir-toolbar__filter:hover { color: var(--ir-sale); }
.ir-toolbar button.ir-toolbar__filter.is-on { font-weight: 600; }
/* The caret points up while its panel is open, so the trigger states the
   expanded state on its own rather than relying on the panel being visible. */
.ir-toolbar button.ir-toolbar__filter .ir-caret {
	transition: transform var(--ir-dur) var(--ir-ease);
}
.ir-toolbar button.ir-toolbar__filter[aria-expanded="true"] {
	color: var(--ir-sale);
}
.ir-toolbar button.ir-toolbar__filter[aria-expanded="true"] .ir-caret {
	transform: rotate(180deg);
}
.ir-toolbar__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: var(--ir-dark);
	color: var(--ir-on-dark);
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
}
/* A <select> is always as wide as its widest option, so the short selected
   label («Сортування») sat ~250px away from the native arrow at the far
   right edge. Right-align the text so it ends beside the caret, and draw
   our own chevron to match the filter triggers. */
.ir-toolbar__sort {
	margin-left: auto;
	position: relative;
	display: flex;
	align-items: center;
}
/* Woo renders no ordering form when nothing will display (empty result),
   so only draw the chevron when the select is actually there. */
.ir-toolbar__sort:not(:has(select))::after { display: none; }
.ir-toolbar__sort::after {
	content: '⌄';
	position: absolute;
	/* JS (fitSortSelect) publishes the measured label width; the chevron
	   sits a fixed 6px after the TEXT. Fallback before JS runs: just
	   inside the select's right padding, i.e. the old geometry. */
	left: calc(var(--ir-sort-text-w, calc(100% - 26px)) + 6px);
	top: 50%;
	transform: translateY(-58%);
	font-size: 11px;
	line-height: 1;
	color: var(--ir-text);
	pointer-events: none;
}
/* Core's `.woocommerce .woocommerce-ordering { margin-bottom: 1em }`
   outranks a 1-class reset outright — the phantom bottom margin made the
   wrap taller than the select, so the vertically-centred caret rendered
   BELOW the label. Match core's class count and add one. */
.woocommerce .ir-toolbar .woocommerce-ordering,
.ir-toolbar .woocommerce-ordering { margin: 0; }
.ir-toolbar .woocommerce-ordering select {
	border: 0;
	background: transparent;
	font-family: var(--ir-font-ui);
	font-size: 14px;
	color: var(--ir-text);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	padding: 0 16px 0 0;
	max-width: 100%;
}
/* Element-qualified to outrank woocommerce-layout.css's
   `.woocommerce .woocommerce-result-count` (same specificity, loads later). */
.ir-toolbar p.woocommerce-result-count {
	/* Woo floats this; floated, it sits outside the flow and the panel
	   wrapper below it collapses up underneath the text. */
	float: none;
	display: block;
	font-size: 12px;
	color: var(--ir-text-muted);
	margin: 12px 0 10px;
}

/* ---------- Filter dropdown panels ----------
   One panel per trigger, spanning the toolbar width and overlaying the grid
   (per design), so the products behind never reflow while choosing. */
.ir-panels { position: relative; }
.ir-panel {
	position: absolute;
	top: 8px;
	left: 0;
	right: 0;
	z-index: 30;
	background: var(--ir-bg);
	border: 1px solid var(--ir-border);
	box-shadow: 0 24px 40px rgba(0, 0, 0, 0.10);
	padding: 20px 22px 16px;
}
.ir-panel[hidden] { display: none; }
.ir-panel__head {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: var(--ir-tracking-caps);
	text-transform: uppercase;
	color: var(--ir-text-muted);
	margin-bottom: 14px;
}
.ir-panel__foot {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--ir-border);
}

/* Category panel: the tree in columns. */
.ir-panel__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 24px 32px;
}
.ir-panel__col-head {
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: var(--ir-tracking-caps);
	text-transform: uppercase;
	color: var(--ir-text);
	text-decoration: none;
	margin-bottom: 10px;
}
.ir-panel__list { list-style: none; margin: 0; padding: 0; }
.ir-panel__list--roots li { margin-bottom: 10px; }
.ir-panel__list--roots .ir-panel__col-head { margin-bottom: 0; }
.ir-panel__link {
	display: block;
	padding: 4px 0;
	font-size: 14px;
	color: var(--ir-text);
	text-decoration: none;
	transition: color var(--ir-dur) var(--ir-ease);
}
.ir-panel__col-head:hover,
.ir-panel__link:hover { color: var(--ir-sale); }
.ir-panel__col-head.is-active,
.ir-panel__link.is-active { color: var(--ir-sale); font-weight: 600; }

/* ---------- Options: size pills ---------- */
.ir-panel__grid { display: grid; gap: 10px; }
.ir-panel__grid--pills {
	grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
}
.ir-pill {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	padding: 6px 10px;
	border: 1px solid var(--ir-border);
	font-size: 13px;
	color: var(--ir-text);
	text-decoration: none;
	text-align: center;
	transition: border-color var(--ir-dur) var(--ir-ease), background var(--ir-dur) var(--ir-ease);
}
.ir-pill:hover { border-color: var(--ir-text); }
/* `is-on` is the state the URL is in; `ir-staged` is an unsaved change made
   since the panel opened. Both look selected — XOR of the two is what will
   actually be applied, which is what the script computes. */
.ir-pill.is-on,
.ir-pill.ir-staged {
	background: var(--ir-dark);
	border-color: var(--ir-dark);
	color: var(--ir-on-dark);
}
.ir-pill.is-on.ir-staged {
	background: transparent;
	border-color: var(--ir-border);
	color: var(--ir-text);
}

/* ---------- Options: colour squares ----------
   Squares, per the design annotation — not circles. */
.ir-panel__grid--swatches {
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 12px 20px;
}
.ir-swatch {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px;
	color: var(--ir-text);
	text-decoration: none;
	font-size: 12px;
	transition: color var(--ir-dur) var(--ir-ease);
}
.ir-swatch__chip {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border: 1px solid rgba(0, 0, 0, 0.18);
	background: var(--ir-bg-soft);
	position: relative;
	transition: box-shadow var(--ir-dur) var(--ir-ease);
}
/* No colour resolved for this term — show it as unset rather than as a
   plausible-but-wrong swatch. */
.ir-swatch__chip--unknown {
	background:
		linear-gradient(45deg, transparent 45%, var(--ir-border) 45%, var(--ir-border) 55%, transparent 55%),
		var(--ir-bg-soft);
}
.ir-swatch:hover .ir-swatch__chip { box-shadow: 0 0 0 2px var(--ir-bg), 0 0 0 3px var(--ir-text); }
.ir-swatch.is-on .ir-swatch__chip,
.ir-swatch.ir-staged .ir-swatch__chip { box-shadow: 0 0 0 2px var(--ir-bg), 0 0 0 3px var(--ir-sale); }
.ir-swatch.is-on.ir-staged .ir-swatch__chip { box-shadow: none; }
.ir-swatch.is-on .ir-swatch__name,
.ir-swatch.ir-staged .ir-swatch__name { font-weight: 600; }
.ir-swatch.is-on.ir-staged .ir-swatch__name { font-weight: 400; }

/* ---------- Options: price ---------- */
.ir-price__row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.ir-price__field {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--ir-text-muted);
}
.ir-price__field input[type="number"] {
	width: 110px;
	box-shadow: none;
	padding: 8px 10px;
	border: 1px solid var(--ir-border);
	border-radius: 0;
	font-family: var(--ir-font-ui);
	font-size: 13px;
	color: var(--ir-text);
	background: var(--ir-bg);
}
.ir-price__field input[type="number"]:focus {
	outline: none;
	border-color: var(--ir-text);
}
.ir-price__currency { font-size: 13px; color: var(--ir-text-muted); }


/* ---------- Mobile filter drawer ----------
   Bottom sheet: the four panel bodies stacked as accordions, applied once. */
.ir-drawer {
	position: fixed;
	inset: 0;
	z-index: 300;
}
.ir-drawer[hidden] { display: none; }
.ir-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
}
.ir-drawer__sheet {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: 88vh;
	max-height: min(88vh, calc(100dvh - 24px)); /* iOS: vh ignores the collapsed URL bar */
	display: flex;
	flex-direction: column;
	background: var(--ir-bg);
	font-family: var(--ir-font-ui);
}
.ir-drawer__head,
.ir-drawer__foot {
	flex: 0 0 auto;
	padding: 16px var(--ir-side-pad);
	border-bottom: 1px solid var(--ir-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.ir-drawer__foot {
	border-bottom: 0;
	border-top: 1px solid var(--ir-border);
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
}
.ir-drawer__title {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: var(--ir-tracking-caps);
	text-transform: uppercase;
}
button.ir-drawer__close {
	background: none;
	border: 0;
	font-size: 26px;
	line-height: 1;
	padding: 0 4px;
	cursor: pointer;
	color: var(--ir-text);
}
.ir-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0 var(--ir-side-pad);
}
.ir-drawer__group { border-bottom: 1px solid var(--ir-border); }
button.ir-drawer__group-head {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 0;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: var(--ir-font-ui);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ir-text);
	text-align: left;
}
button.ir-drawer__group-head .ir-caret {
	margin-left: auto;
	transition: transform var(--ir-dur) var(--ir-ease);
}
button.ir-drawer__group-head[aria-expanded="true"] .ir-caret { transform: rotate(180deg); }
.ir-drawer__group-body { padding: 0 0 18px; }
.ir-drawer__group-body[hidden] { display: none; }
/* Inside the drawer the category tree is a plain stacked list, not columns. */
.ir-drawer .ir-panel__cols { grid-template-columns: 1fr; gap: 18px; }


/* ---------- Empty result ---------- */
.ir-catalog .woocommerce-no-products-found { margin-top: 8px; }
.ir-catalog .woocommerce-info {
	background: var(--ir-bg-soft);
	border: 0;
	padding: 28px 24px;
	font-family: var(--ir-font-ui);
	font-size: 13px;
	letter-spacing: 0.03em;
	color: var(--ir-text);
}
.ir-catalog .woocommerce-info::before { display: none; }

/* ---------- Fluid phone type (reference-site parity) ----------
   The reference scales its mobile type with vw; fixed px read small on
   wider phones. Same ladder as the catalog pass:
     meta  clamp(11px, 2.9vw, 15px)
     body  clamp(13px, 3.2vw, 16px)
     ctrl  clamp(14px, 3.4vw, 17px)
   Appended last so equal-specificity re-declarations win. */
@media (max-width: 1199.98px) {
	.ir-drawer__title { font-size: clamp(14px, 3.4vw, 17px); }
	button.ir-drawer__group-head { font-size: clamp(14px, 3.4vw, 17px); }
	.ir-drawer__body .ir-panel__link,
	.ir-drawer__body .ir-swatch__name,
	.ir-drawer__body label,
	.ir-drawer__body a { font-size: clamp(13px, 3.2vw, 16px); }
	.ir-drawer__foot .ir-btn { font-size: clamp(13px, 3vw, 16px); }
}

/* ---------- Pagination ----------
   Core's boxes are small and the current page wears the stock lavender.
   Brand scale: 42px square cells, dark current page. The `woocommerce`
   class sits on BODY itself on archives, so the tie-breaker must be the
   compound body.woocommerce (a descendant `.woocommerce` never matches). */
body.woocommerce nav.woocommerce-pagination,
body.woocommerce-page nav.woocommerce-pagination {
	margin-top: 28px;
}
body.woocommerce nav.woocommerce-pagination ul,
body.woocommerce-page nav.woocommerce-pagination ul {
	border: 0;
	display: flex;
	justify-content: center;
	gap: 8px;
	white-space: normal;
}
body.woocommerce nav.woocommerce-pagination ul li,
body.woocommerce-page nav.woocommerce-pagination ul li {
	border: 0;
	overflow: visible;
}
body.woocommerce nav.woocommerce-pagination ul li a,
body.woocommerce nav.woocommerce-pagination ul li span,
body.woocommerce-page nav.woocommerce-pagination ul li a,
body.woocommerce-page nav.woocommerce-pagination ul li span {
	min-width: 42px;
	min-height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	font-family: var(--ir-font-ui);
	font-size: 15px;
	line-height: 1;
	color: var(--ir-text);
	background: var(--ir-bg);
	border: 1px solid var(--ir-border);
}
body.woocommerce nav.woocommerce-pagination ul li span.current,
body.woocommerce-page nav.woocommerce-pagination ul li span.current {
	background: var(--ir-dark);
	color: var(--ir-on-dark);
	border-color: var(--ir-dark);
}
body.woocommerce nav.woocommerce-pagination ul li a:hover,
body.woocommerce-page nav.woocommerce-pagination ul li a:hover {
	background: var(--ir-bg);
	color: var(--ir-text);
	border-color: var(--ir-text);
}