/* IRENNE homepage sections: hero, rails, product cards, section heads. */

/* ---------- Section head ---------- */
.ir-section-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	margin: 0 0 20px;
}
.ir-section-head__title {
	font-family: var(--ir-font-ui);
	/* Phones: reference-site scale (O.TAJE ≈22px); tablets+ keep ours. */
	font-size: clamp(20px, 5.6vw, 22px);
	font-weight: 600;
	letter-spacing: var(--ir-tracking-caps);
	text-transform: uppercase;
	margin: 0;
	color: var(--ir-text);
	min-width: 0;
}
.ir-section-head__link {
	font-family: var(--ir-font-ui);
	font-size: 13px;
	letter-spacing: var(--ir-tracking-caps);
	text-transform: uppercase;
	color: var(--ir-text);
	text-decoration: none;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
/* Thin ↗ arrow (inline SVG, see irenne_arrow_ne()) after link labels — sits
   on the text's optical centre, slightly larger than the caps so it reads. */
.ir-arrow-ne {
	width: 1.05em;
	height: 1.05em;
	flex: 0 0 auto;
	position: relative;
	top: -0.05em;
}
.ir-mega__see-all .ir-arrow-ne { width: 0.95em; height: 0.95em; margin-left: 2px; vertical-align: -0.1em; }
.ir-section-head__link:hover { color: var(--ir-sale); }
@media (min-width: 600px) {
	/* Reference-site scale: O.TAJE runs ≈28px vw-fluid headings at 1440;
	   the design is lighter — meet it partway, fluid, capped at 24. */
	.ir-section-head__title { font-size: clamp(17px, 1.7vw, 24px); }
	.ir-section-head__link { font-size: 13px; }
}

/* ---------- Product card ---------- */
.ir-card {
	min-width: 0;
	font-family: var(--ir-font-ui);
}
.ir-card__media {
	position: relative;
	display: block;
	/* Phones: the reference crops taller (228×332 ≈ 57:83 measured in
	   devtools) — photos read noticeably bigger. Desktop keeps 3:4. */
	aspect-ratio: 57 / 83;
	overflow: hidden;
	background: var(--ir-bg-soft);
}
.ir-card__img,
.ir-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--ir-dur) var(--ir-ease);
}
.ir-card__media:hover img { transform: scale(1.03); }
/* Sale badge: bottom-left per design; on hover it lifts above the sizes
   overlay so both stay readable. */
.ir-card__badge {
	position: absolute;
	bottom: 10px;
	left: 10px;
	background: var(--ir-sale-badge-bg);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 4px 8px;
	letter-spacing: 0.04em;
	transition: transform var(--ir-dur) var(--ir-ease);
	z-index: 3;
}
/* The lift has to clear whichever overlay this card has: the two-row size
   table is ~52px, the single «Єдиний розмір» label ~36px. One fixed value
   left the badge sitting on top of the shorter one. */
.ir-card__visual:hover .ir-card__badge {
	transform: translateY(-72px);
}
.ir-card__visual:has(.ir-sizes--single):hover .ir-card__badge {
	transform: translateY(-54px);
}
.ir-card__name {
	display: block;
	margin-top: 10px;
	font-size: clamp(13px, 3.2vw, 16px);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ir-text);
	text-decoration: none;
	line-height: 1.5;
}
.ir-card__price {
	margin-top: 4px;
	font-size: clamp(12.5px, 3vw, 15px);
	letter-spacing: 0.04em;
	color: var(--ir-text-muted);
}
@media (min-width: 600px) {
	.ir-card__media { aspect-ratio: 3 / 4; }
	.ir-card__name { font-size: 13px; font-weight: 400; }
	.ir-card__price { font-size: 13px; }
}
.ir-card__price .woocommerce-Price-amount { color: inherit; }
.ir-card__price.is-sale ins { text-decoration: none; }
.ir-card__price.is-sale ins .woocommerce-Price-amount { color: var(--ir-sale); }
.ir-card__price del .woocommerce-Price-amount { color: var(--ir-text-muted); }

/* ---------- Rail ---------- */
/* Elementor containers and widget wrappers are flex items with the default
   min-width:auto, so any horizontally-scrollable track inside them expands
   the container (and the page) instead of scrolling. Constrain both levels
   for every IRENNE widget. */
.elementor .e-con,
.elementor .e-con-inner,
[class*="elementor-widget-irenne-"] {
	min-width: 0;
	max-width: 100%;
}
[class*="elementor-widget-irenne-"] { width: 100%; }
.ir-rail {
	/* Reference-site geometry: the SECTION is full-bleed and the track
	   runs edge-to-edge (first card ~2px from the viewport edge at 1440);
	   only the section head keeps the shell alignment. */
	max-width: none;
	margin: var(--ir-section-gap) auto 0;
	padding: 0;
	min-width: 0;
}
.ir-rail > .ir-section-head {
	max-width: var(--ir-shell-max);
	margin-left: auto;
	margin-right: auto;
	padding: 0 var(--ir-side-pad);
}
/* Design: ~12px between carousel cards at 1440 (measured from the mockup;
   tokens' fluid gutter is for grids). Client asked for tighter than 16. */
.ir-rail__track,
.ir-cats__track,
.ir-duo__track {
	padding-inline: var(--ir-side-pad);
	scroll-padding-inline: var(--ir-side-pad);
	--ir-gutter: 12px;
}
.ir-rail__wrap { position: relative; min-width: 0; }
/* Element-qualified + full chrome pins: theme/kit button resets carry a
   class level and repainted these as crimson-bordered boxes on pages
   where they load after us (the «Недавно переглянуті» rail). */
button.ir-rail__arrow,
.ir-rail__arrow {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	z-index: 2;
	background: rgba(255, 255, 255, 0.85);
	border: 0;
	border-radius: 0;
	outline: none;
	font-family: var(--ir-font-ui);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: var(--ir-text);
	padding: 10px 6px;
}
button.ir-rail__arrow:hover,
button.ir-rail__arrow:focus {
	background: rgba(255, 255, 255, 1);
	color: var(--ir-text);
	border: 0;
}
.ir-rail__arrow--prev { left: 0; }
.ir-rail__arrow--next { right: 0; }
/* carousel.js marks rails whose track doesn't overflow — dead arrows hide. */
.ir-carousel--static [data-ir-carousel] { display: none; }
@media (max-width: 899.98px) {
	.ir-rail__arrow { display: none; }
}

.ir-rail__track {
	display: grid;
	grid-auto-flow: column;
	/* Phone: two full cards + a peek of the third, so the rail visibly
	   affords swiping instead of looking like a cut-off grid. */
	/* Reference at 505: ~220px cards, 2 full + a sliver, 8px gap,
	   12px inset — bigger cards than the old 2.05-of-padded-width. */
	--ir-gutter: 8px;
	grid-auto-columns: calc((100% - var(--ir-gutter)) / 2.15);
	gap: var(--ir-gutter);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-inline: 12px;
	scroll-padding-inline: 12px;
}
@media (min-width: 600px) {
	.ir-rail__track { --ir-gutter: 12px; padding-inline: var(--ir-side-pad); scroll-padding-inline: var(--ir-side-pad); }
}
.ir-rail__track::-webkit-scrollbar { display: none; }
.ir-rail__track .ir-card { scroll-snap-align: start; }
@media (min-width: 600px) {
	.ir-rail__track { grid-auto-columns: calc((100% - 2 * var(--ir-gutter)) / 3.2); }
}
@media (min-width: 900px) {
	.ir-rail__track,
	.ir-cats__track,
	.ir-duo__track {
		padding-inline: 12px;
		scroll-padding-inline: 12px;
	}
}
@media (min-width: 1200px) {
	/* Reference: 330px cards ≈4.3 per 1440 viewport on a full-bleed track. */
	.ir-rail__track { grid-auto-columns: calc((100% - 4 * var(--ir-gutter)) / 4.3); }
}

/* ---------- Hero ---------- */
.ir-hero {
	position: relative;
	width: 100%;
}
.ir-hero__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.ir-hero__track::-webkit-scrollbar { display: none; }
.ir-hero__slide {
	position: relative;
	flex: 0 0 100%;
	scroll-snap-align: start;
	/* Phones: the hero owns the first screen (reference-site behaviour);
	   svh keeps it honest under iOS URL bars, 82vh is the fallback. */
	aspect-ratio: 4 / 5;
	min-height: min(82vh, 700px);
	min-height: min(calc(100svh - 120px), 700px);
	max-height: 86vh;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
/* img needs its own heavier arm: Elementor's `.elementor img
   { height: auto }` outranks a single class and let image slides
   collapse to natural ratio with a void below (mobile hero bug).
   The video element never matched that rule, which is why only
   image slides broke. */
.ir-hero__media,
.ir-hero img.ir-hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	border: 0;
	display: block;
}
.ir-hero__media--placeholder { background: linear-gradient(180deg, #f4f2ef, #dcd8d2); }
.ir-hero__cta {
	position: relative;
	z-index: 2;
	margin-bottom: clamp(24px, 5vw, 48px);
	background: var(--ir-dark);
	color: var(--ir-on-dark);
	font-family: var(--ir-font-ui);
	font-size: clamp(13px, 3vw, 16px);
	letter-spacing: var(--ir-tracking-caps);
	text-transform: uppercase;
	text-decoration: none;
	padding: 18px 48px;
	transition: opacity var(--ir-dur) var(--ir-ease);
}
@media (min-width: 600px) {
	.ir-hero__cta { font-size: 12px; padding: 13px 34px; }
}
.ir-hero__cta:hover { opacity: 0.85; }
.ir-hero__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	background: rgba(255, 255, 255, 0.85);
	border: 0;
	width: 40px;
	height: 40px;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: var(--ir-text);
}
.ir-hero__arrow--prev { left: 12px; }
.ir-hero__arrow--next { right: 12px; }
@media (min-width: 600px) {
	.ir-hero__slide { aspect-ratio: 3 / 2; min-height: 380px; }
}
@media (min-width: 900px) {
	.ir-hero__slide { aspect-ratio: 16 / 7; }
}
/* Arrows are pointer affordances — hide where there is no pointer. */
@media (max-width: 899.98px) {
	.ir-hero__arrow { display: none; }
}

/* ---------- Full-width banner ---------- */
.ir-banner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	overflow: hidden;
	text-decoration: none;
	margin: var(--ir-section-gap) 0 0;
}
/* Phones get a squarer crop so the subject stays legible. */
.ir-banner--wide { aspect-ratio: 4 / 3; }
.ir-banner--cinema { aspect-ratio: 4 / 3; }
.ir-banner--square { aspect-ratio: 1 / 1; }
@media (min-width: 600px) {
	.ir-banner--wide { aspect-ratio: 16 / 9; }
	.ir-banner--cinema { aspect-ratio: 2 / 1; }
}
@media (min-width: 900px) {
	.ir-banner--wide { aspect-ratio: 16 / 7; }
	.ir-banner--cinema { aspect-ratio: 21 / 9; }
}
.ir-banner__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ir-banner__media--placeholder { background: linear-gradient(180deg, #f1eeea, #ddd8d1); }
.ir-banner__heading {
	position: relative;
	z-index: 2;
	color: var(--ir-on-dark);
	font-family: var(--ir-font-ui);
	font-size: clamp(18px, 3vw, 34px);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
	padding: 0 16px;
}


/* ---------- Accessories duo (banner + mini carousel) ---------- */
.ir-duo {
	/* Full-bleed like the rails; head keeps shell alignment. */
	max-width: none;
	margin: var(--ir-section-gap) auto 0;
	padding: 0;
	min-width: 0;
}
.ir-duo > .ir-section-head {
	max-width: var(--ir-shell-max);
	margin-left: auto;
	margin-right: auto;
	padding: 0 var(--ir-side-pad);
}
.ir-duo__body {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ir-gutter);
	align-items: center;
}
@media (min-width: 900px) {
	.ir-duo__body {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: clamp(24px, 3vw, 40px);
	}
}
.ir-duo__banner {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--ir-bg-soft);
}
.ir-duo__banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ir-duo__placeholder { display: block; width: 100%; height: 100%; background: var(--ir-bg-soft); }
.ir-duo__carousel {
	position: relative;
	min-width: 0;
}
.ir-duo__track {
	display: flex;
	gap: var(--ir-gutter);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	min-width: 0;
}
.ir-duo__track::-webkit-scrollbar { display: none; }
.ir-duo__item {
	flex: 0 0 calc((100% - 2 * var(--ir-gutter)) / 3);
	scroll-snap-align: start;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--ir-bg-soft);
}
.ir-duo__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 899.98px) {
	.ir-duo__arrow { display: none; }
}
.ir-duo__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	background: rgba(255, 255, 255, 0.85);
	border: 0;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: var(--ir-text);
	padding: 10px 6px;
}
.ir-duo__arrow:first-of-type { left: 0; }
.ir-duo__arrow:last-of-type { right: 0; }

/* ---------- Image accordion (4 panels) ---------- */
.ir-accordion {
	display: flex;
	gap: 2px;
	width: 100%;
	margin: var(--ir-section-gap) 0 0;
	overflow: hidden;
}
.ir-accordion__panel {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	text-decoration: none;
	transition: flex-grow 0.55s var(--ir-ease);
}
.ir-accordion__panel img,
.ir-accordion__placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background: var(--ir-bg-soft);
}
.ir-accordion__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 18px;
	text-align: center;
	color: var(--ir-on-dark);
	font-family: var(--ir-font-ui);
	font-size: 13px;
	letter-spacing: var(--ir-tracking-caps);
	text-transform: uppercase;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
	padding: 0 8px;
}
/* Hover-capable: one panel expanded, others collapsed; hovering swaps. */
@media (hover: hover) and (pointer: fine) and (min-width: 1200px) {
	.ir-accordion__panel.is-default { flex-grow: 2.6; }
	.ir-accordion:hover .ir-accordion__panel.is-default { flex-grow: 1; }
	.ir-accordion__panel:hover,
	.ir-accordion:hover .ir-accordion__panel:hover { flex-grow: 2.6; }
}
/* Phone/tablet: no hover, so present a simple 2x2 mosaic instead of the
   expanding row (OQ-5 default). */
.ir-accordion { flex-wrap: wrap; height: auto; }
.ir-accordion__panel { flex: 1 1 calc(50% - 1px); aspect-ratio: 3 / 4; }
@media (min-width: 600px) {
	.ir-accordion__panel { aspect-ratio: 1 / 1; }
}
@media (min-width: 900px) {
	.ir-accordion__panel { aspect-ratio: 4 / 3; }
}
@media (min-width: 1200px) {
	.ir-accordion {
		flex-wrap: nowrap;
		height: clamp(420px, 44vw, 620px);
	}
	.ir-accordion__panel { flex: 1 1 0; aspect-ratio: auto; }
}

/* ---------- Categories rail ---------- */
.ir-cats {
	/* Full-bleed like the rails; head keeps shell alignment. */
	max-width: none;
	margin: var(--ir-section-gap) auto 0;
	padding: 0;
	min-width: 0;
}
.ir-cats > .ir-section-head {
	max-width: var(--ir-shell-max);
	margin-left: auto;
	margin-right: auto;
	padding: 0 var(--ir-side-pad);
}
.ir-cats__wrap {
	position: relative;
	min-width: 0;
}
.ir-cats__track {
	padding-inline: var(--ir-side-pad);
	scroll-padding-inline: var(--ir-side-pad);
	display: flex;
	gap: var(--ir-gutter);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	min-width: 0;
}
.ir-cats__track::-webkit-scrollbar { display: none; }
.ir-cats__tile {
	flex: 0 0 calc((100% - var(--ir-gutter)) / 2.05);
	scroll-snap-align: start;
	text-decoration: none;
	background: var(--ir-bg-soft);
	padding: 14px 14px 16px;
	text-align: center;
}
@media (min-width: 600px) { .ir-cats__tile { flex-basis: calc((100% - 2 * var(--ir-gutter)) / 3); } }
@media (min-width: 1200px) { .ir-cats__tile { flex-basis: calc((100% - 3 * var(--ir-gutter)) / 4); } }
@media (max-width: 899.98px) {
	.ir-cats__arrow { display: none; }
}
.ir-cats__media {
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #fff;
}
.ir-cats__media img,
.ir-cats__placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background: #ece8e3;
}
.ir-cats__name {
	display: block;
	margin-top: 12px;
	font-family: var(--ir-font-ui);
	font-size: 13px;
	letter-spacing: var(--ir-tracking-caps);
	text-transform: uppercase;
	color: var(--ir-text);
}
.ir-cats__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	background: rgba(255, 255, 255, 0.85);
	border: 0;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: var(--ir-text);
	padding: 10px 6px;
}
.ir-cats__arrow:first-of-type { left: 0; }
.ir-cats__arrow:last-of-type { right: 0; }

/* ---------- Instagram ---------- */
.ir-ig {
	max-width: var(--ir-shell-max);
	margin: var(--ir-section-gap) auto 0;
	padding: 0 var(--ir-side-pad);
	text-align: center;
	font-family: var(--ir-font-ui);
}
.ir-ig__title {
	font-size: clamp(16px, 2vw, 20px);
	font-weight: 600;
	letter-spacing: var(--ir-tracking-caps);
	text-transform: uppercase;
	color: var(--ir-text);
}
.ir-ig__handle {
	font-size: 13px;
	color: var(--ir-text);
	margin-top: 2px;
}
.ir-ig__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: calc(var(--ir-gutter) / 2);
	margin-top: 20px;
}
@media (min-width: 600px) { .ir-ig__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .ir-ig__grid { grid-template-columns: repeat(5, 1fr); } }
.ir-ig__tile {
	display: block;
	aspect-ratio: 1 / 1;
	background: #e4e4e4;
	overflow: hidden;
}
.ir-ig__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ir-ig__cta {
	display: inline-block;
	margin-top: 22px;
	background: var(--ir-dark);
	color: var(--ir-on-dark);
	font-size: 12px;
	letter-spacing: var(--ir-tracking-caps);
	text-transform: uppercase;
	text-decoration: none;
	padding: 13px 34px;
}

/* ---------- Card hover size table ---------- */
.ir-card__visual { position: relative; }
.ir-sizes {
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 10px;
	background: rgba(255, 255, 255, 0.96);
	/* Uniform, so the gap from the table edge to a cell is the same on all
	   four sides — it was 8px horizontally against 6px vertically. */
	padding: 6px;
	/* A row of per-size columns, not two rows of values: each column is one
	   button covering both scales. */
	display: none;
	align-items: stretch;
	/* Full-bleed cards are wide; the table must stay a compact centred
	   strip, not stretch with the card. */
	justify-content: center;
	z-index: 2;
}
.ir-sizes__labels,
.ir-sizes__cell {
	display: flex;
	flex-direction: column;
}
.ir-sizes__labels { flex: 0 0 24px; }
.ir-sizes__cell {
	flex: 1 1 0;
	min-width: 0;
	max-width: 44px; /* growth cap: compact strip on wide cards */
	color: var(--ir-text);
	text-decoration: none;
	/* Divider and hover highlight are both drawn INSIDE the cell box. An
	   `outline` sits outside it, so the highlight overhung the dividers by
	   1px on each side and read as misaligned against the column. */
	box-shadow: inset 1px 0 0 var(--ir-border);
}
.ir-sizes__val {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11.5px;
	line-height: 1;
	/* Equal on all four sides: the highlight box then clears the digits by
	   the same amount horizontally and vertically. */
	padding: 4px;
}
/* The rule between the scales runs across the whole table, so it has to be
   drawn on the first value of every column rather than on the row. */
.ir-sizes__val:first-child { border-bottom: 1px solid var(--ir-border); }
.ir-sizes__val--label {
	font-size: 11px;
	font-weight: 600;
	justify-content: flex-start;
}
.ir-sizes__cell:hover {
	background: var(--ir-bg-soft);
	box-shadow: inset 0 0 0 1px var(--ir-sale);
}
.ir-sizes__cell.is-oos { color: #c2c2c2; pointer-events: none; }
/* Anchor states: no visited-blue / focus tint from theme defaults. */
.ir-sizes__cell:visited { color: var(--ir-text); }
.ir-sizes__cell:focus,
.ir-sizes__cell:focus-visible {
	background: var(--ir-bg-soft);
	color: var(--ir-text);
	outline: none;
	box-shadow: inset 0 0 0 1px var(--ir-text);
}
/* Single, non-numeric size («Єдиний розмір»): one centred label, same box
   and position as the size table so the two hover states read as one system. */
.ir-sizes--single {
	justify-content: center;
	padding: 8px 6px;
}
.ir-sizes__only {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: var(--ir-tracking-caps);
	text-transform: uppercase;
	color: var(--ir-text);
	text-align: center;
	width: 100%;
}
.ir-sizes--single.is-oos .ir-sizes__only { color: #c2c2c2; }

/* Hover-capable devices only (OQ-6: mobile card stays clean). */
@media (hover: hover) and (pointer: fine) {
	.ir-card__visual:hover .ir-sizes { display: flex; }
}


/* Product names stay on one line on small screens so cards keep an even
   rhythm (reference-site behaviour); full name remains in the link title. */
@media (max-width: 1199.98px) {
	.ir-card__name {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* Play/pause control on hero media slides. Scoped as .ir-hero button.… to
   outrank Elementor's kit-global `button { background/border/color }` rules
   (the homepage is an Elementor document, so bare buttons get kit paint). */
.ir-hero button.ir-hero__playpause {
	position: absolute;
	right: clamp(12px, 2vw, 20px);
	bottom: clamp(12px, 2vw, 20px);
	z-index: 4;
	width: clamp(34px, 4vw, 44px);
	height: clamp(34px, 4vw, 44px);
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.75);
	background: rgba(17, 17, 17, 0.4);
	cursor: pointer;
	color: #fff;
	line-height: 1;
	transition: background var(--ir-dur) var(--ir-ease);
}
.ir-hero button.ir-hero__playpause::before {
	content: '❚❚';
	display: block;
	font-size: 10px;
	line-height: 1;
	letter-spacing: 1px;
	margin-right: -1px; /* letter-spacing trails the last char — recentre */
	color: #fff;
}
.ir-hero button.ir-hero__playpause.is-paused::before {
	content: '►';
	font-size: 13px;
	letter-spacing: 0;
	margin-right: 0;
	transform: translateX(1px); /* the triangle's optical centre sits left of its box */
}
.ir-hero button.ir-hero__playpause:hover { background: rgba(17, 17, 17, 0.65); }
.ir-hero button.ir-hero__playpause:focus { outline: none; }
.ir-hero button.ir-hero__playpause:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.ir-hero__media--failed { background: var(--ir-bg-soft); }

/* Editor-only oversized-video warning. */
.ir-hero__size-warning {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 6;
	background: var(--ir-sale-badge-bg);
	color: #fff;
	font-family: var(--ir-font-ui);
	font-size: 12px;
	padding: 8px 12px;
	max-width: 420px;
}

/* Terminal touch-width guard for every rail (see product.css note). */
@media (max-width: 899.98px) {
	.ir-rail__arrow,
	.ir-look__arrow {
		display: none !important;
	}
}


/* ---------- Scroll reveal (homepage sections) ----------
   JS adds data-ir-reveal at DOM-ready (no-JS = everything visible) and
   .is-in when the section enters the viewport. Cards stagger 60ms per
   position. Transform/opacity only — no layout, compositor-friendly. */
[data-ir-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.6s var(--ir-ease), transform 0.6s var(--ir-ease);
	will-change: opacity, transform;
}
[data-ir-reveal].is-in {
	opacity: 1;
	transform: none;
	will-change: auto;
}
[data-ir-reveal] .ir-card,
[data-ir-reveal] .ir-cats__tile {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.55s var(--ir-ease), transform 0.55s var(--ir-ease);
}
[data-ir-reveal].is-in .ir-card,
[data-ir-reveal].is-in .ir-cats__tile {
	opacity: 1;
	transform: none;
}
[data-ir-reveal].is-in .ir-card:nth-child(2),
[data-ir-reveal].is-in .ir-cats__tile:nth-child(2) { transition-delay: 0.06s; }
[data-ir-reveal].is-in .ir-card:nth-child(3),
[data-ir-reveal].is-in .ir-cats__tile:nth-child(3) { transition-delay: 0.12s; }
[data-ir-reveal].is-in .ir-card:nth-child(4),
[data-ir-reveal].is-in .ir-cats__tile:nth-child(4) { transition-delay: 0.18s; }
[data-ir-reveal].is-in .ir-card:nth-child(5),
[data-ir-reveal].is-in .ir-cats__tile:nth-child(5) { transition-delay: 0.24s; }
[data-ir-reveal].is-in .ir-card:nth-child(n+6),
[data-ir-reveal].is-in .ir-cats__tile:nth-child(n+6) { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
	[data-ir-reveal],
	[data-ir-reveal] .ir-card,
	[data-ir-reveal] .ir-cats__tile {
		opacity: 1;
		transform: none;
		transition: none;
	}
}