/* ==========================================================================
   GENERÁLT FÁJL — NE SZERKESZD KÖZVETLENÜL!
   Forrás: assets/css/src/ komponensek  ·  Build: php assets/css/build.php
   A komponensek a fájlnév-prefix (00..19) sorrendjében fűződnek össze.
   ========================================================================== */
/*
 * A `hidden` attribútum a böngésző alap stíluslapján `display: none`, de ezt
 * BÁRMELY szerzői `display` szabály felülírja. Emiatt olyan elemek is látszottak,
 * amiket a kód elrejtett (modal, kapcsolati űrlap sikerüzenete, pénztári címkék).
 * Ez a szabály az egész hibaosztályt megszünteti — az `!important` itt indokolt,
 * mert a `hidden` szándéka mindig erősebb, mint egy elrendezési szabály.
 */
[hidden] {
	display: none !important;
}

/* ==========================================================================
   Invgroup Kft. — Brutalist 2026
   ========================================================================== */

:root {
	/* Brand palette */
	--ig-ink: #0A0A0A;
	--ig-paper: #FFFFFF;
	--ig-bone: #F5F2EC;
	--ig-accent: #E8FF00;
	--ig-accent-ink: #0A0A0A;
	--ig-line: #0A0A0A;
	--ig-muted: #6B6B6B;
	--ig-danger: #E11D48;
	--ig-ok: #15803D;

	/* Layout */
	--ig-stroke: 2px;
	--ig-stroke-bold: 3px;
	--ig-stroke-mega: 6px;
	--ig-radius: 0px;
	--ig-container: 1320px;
	--ig-gutter-x: clamp(20px, 4vw, 56px);
	--ig-gutter-y: clamp(48px, 8vw, 120px);

	/* Typography */
	--ig-font-display: "InterTight", "Inter", "Helvetica Neue", Arial, sans-serif;
	--ig-font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
	--ig-font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

	--ig-size-h1: clamp(48px, 9vw, 140px);
	--ig-size-h2: clamp(34px, 5vw, 72px);
	--ig-size-h3: clamp(24px, 3vw, 40px);
	--ig-size-h4: clamp(18px, 1.5vw, 24px);
	--ig-size-body: 16px;
	--ig-size-small: 13px;
	--ig-size-eyebrow: 12px;

	--ig-leading-tight: 0.92;
	--ig-leading-snug: 1.05;
	--ig-leading-body: 1.55;
	--ig-tracking-display: -0.02em;
	--ig-tracking-eyebrow: 0.16em;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	/* Kill double-tap zoom and the 300ms tap delay site-wide. Pinch-zoom
	   still works for accessibility — only double-tap-to-zoom is disabled. */
	touch-action: manipulation;
}

body {
	background: var(--ig-paper);
	color: var(--ig-ink);
	font-family: var(--ig-font-body);
	font-size: var(--ig-size-body);
	line-height: var(--ig-leading-body);
	margin: 0;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	display: block;
	height: auto;
	max-width: 100%;
}

button {
	font: inherit;
}

/* iOS Safari auto-zooms when an input has font-size below 16px. Enforce a
   16px (1rem) baseline on every form control so taps never trigger zoom.
   Larger sizes set by component rules (display fonts, big stepper inputs,
   etc.) override this through normal cascade. */
input,
select,
textarea {
	font-size: 16px;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ig-font-display);
	font-weight: 800;
	letter-spacing: var(--ig-tracking-display);
	line-height: var(--ig-leading-tight);
	margin: 0 0 0.6em;
	text-transform: uppercase;
}

h1 { font-size: var(--ig-size-h1); }
h2 { font-size: var(--ig-size-h2); }
h3 { font-size: var(--ig-size-h3); }
h4 { font-size: var(--ig-size-h4); line-height: var(--ig-leading-snug); }

p { margin: 0 0 1em; }

/* Eyebrow tag — always reads as a yellow chip. Used on every page-head,
   section-head, hero, and admin notice. The --accent modifier remains as
   a no-op alias so older markup keeps working. */
.ig-eyebrow {
	background: var(--ig-accent);
	color: var(--ig-accent-ink, var(--ig-ink));
	display: inline-block;
	font-family: var(--ig-font-mono);
	font-size: var(--ig-size-eyebrow);
	font-weight: 700;
	letter-spacing: var(--ig-tracking-eyebrow);
	margin-bottom: 16px;
	padding: 4px 10px;
	text-transform: uppercase;
}

/* Kept for back-compat — same look as the base. */
.ig-eyebrow--accent {
	background: var(--ig-accent);
	color: var(--ig-accent-ink, var(--ig-ink));
	padding: 4px 10px;
}

.ig-muted { color: var(--ig-muted); }

/* ==========================================================================
   Layout
   ========================================================================== */

.ig-container {
	margin: 0 auto;
	max-width: var(--ig-container);
	padding: 0 var(--ig-gutter-x);
}

.ig-site-main {
	min-height: 60vh;
}

.ig-section {
	padding: var(--ig-gutter-y) 0;
}

/* ==========================================================================
   Header
   ========================================================================== */

.ig-site-header {
	background: var(--ig-paper);
	border-bottom: var(--ig-stroke-bold) solid var(--ig-line);
	position: sticky;
	top: 0;
	z-index: 30;
}

.ig-site-header__inner {
	align-items: stretch;
	display: flex;
	min-height: 80px;
	padding: 0;
	width: 100%;
}

.ig-brand {
	align-items: center;
	border-right: var(--ig-stroke-bold) solid var(--ig-line);
	display: flex;
	font-family: var(--ig-font-display);
	font-size: 22px;
	font-weight: 900;
	letter-spacing: -0.02em;
	padding: 0 28px;
	text-transform: uppercase;
}

.ig-brand strong {
	background: var(--ig-accent);
	color: var(--ig-accent-ink);
	margin-left: 6px;
	padding: 0 6px;
}

.ig-nav {
	align-items: stretch;
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	justify-content: flex-end;
	padding: 0;
}

.ig-nav a {
	align-items: center;
	border-left: var(--ig-stroke) solid var(--ig-line);
	color: var(--ig-ink);
	display: flex;
	font-family: var(--ig-font-mono);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 0 22px;
	text-transform: uppercase;
	transition: background 120ms ease, color 120ms ease;
}

.ig-nav a:hover,
.ig-nav a[aria-current="page"] {
	background: var(--ig-ink);
	color: var(--ig-paper);
}

.ig-context {
	align-items: stretch;
	border-left: var(--ig-stroke) solid var(--ig-line);
	display: flex;
	flex: 0 0 auto;
	padding: 0;
}

.ig-context select {
	background: var(--ig-paper);
	border: 0;
	border-radius: 0;
	color: var(--ig-ink);
	cursor: pointer;
	font-family: var(--ig-font-mono);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.06em;
	min-height: 100%;
	padding: 0 28px 0 18px;
	text-transform: uppercase;
}

.ig-context select:hover {
	background: var(--ig-accent);
	color: var(--ig-accent-ink);
}

.ig-context button {
	background: var(--ig-ink);
	border: 0;
	color: var(--ig-paper);
	cursor: pointer;
	font-family: var(--ig-font-mono);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	min-height: 100%;
	padding: 0 18px;
	text-transform: uppercase;
}

.ig-cart-btn {
	align-items: center;
	background: var(--ig-ink);
	border-left: var(--ig-stroke) solid var(--ig-line);
	color: var(--ig-paper);
	display: flex;
	flex: 0 0 auto;
	min-width: 76px;
	padding: 0 22px;
	position: relative;
	transition: background 120ms ease, color 120ms ease;
}

.ig-cart-btn:hover {
	background: var(--ig-accent);
	color: var(--ig-accent-ink);
}

.ig-cart-btn svg {
	display: block;
	height: 24px;
	width: 24px;
}

.ig-cart-btn__badge {
	background: var(--ig-accent);
	border: var(--ig-stroke) solid var(--ig-line);
	color: var(--ig-accent-ink);
	font-family: var(--ig-font-mono);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1;
	min-width: 22px;
	padding: 3px 5px;
	position: absolute;
	right: 8px;
	text-align: center;
	top: 12px;
}

.ig-cart-btn__badge[hidden] {
	display: none;
}

.ig-cart-spinner {
	color: var(--ig-muted);
	font-family: var(--ig-font-mono);
	font-size: 14px;
	margin-left: 10px;
}

/* ==========================================================================
   Quick buy table
   ========================================================================== */

.ig-quickbuy {
	padding-top: 0;
	padding-bottom: 96px;
	position: relative;
}

.ig-quickbuy__filters {
	border-top: var(--ig-stroke-bold) solid var(--ig-line);
	border-bottom: var(--ig-stroke-bold) solid var(--ig-line);
	display: grid;
	gap: 0;
	grid-template-columns: 2fr 1fr auto;
	margin-bottom: 24px;
}

.ig-quickbuy__filter {
	border-right: var(--ig-stroke) solid var(--ig-line);
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 18px;
}

.ig-quickbuy__filter:last-child {
	border-right: 0;
}

.ig-quickbuy__filter > span {
	color: var(--ig-muted);
	font-family: var(--ig-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ig-quickbuy__filter input[type="search"],
.ig-quickbuy__filter select {
	background: transparent;
	border: 0;
	color: var(--ig-ink);
	font-family: var(--ig-font-display);
	font-size: 18px;
	font-weight: 700;
	padding: 0;
	width: 100%;
}

.ig-quickbuy__filter input[type="search"]:focus,
.ig-quickbuy__filter select:focus {
	outline: 0;
}

.ig-quickbuy__filter--search {
	min-width: 260px;
}

.ig-quickbuy__check {
	align-items: center;
	flex-direction: row !important;
	gap: 12px !important;
}

.ig-quickbuy__check input[type="checkbox"] {
	accent-color: var(--ig-accent);
	height: 20px;
	width: 20px;
}

.ig-quickbuy__check span {
	color: var(--ig-ink) !important;
	font-family: var(--ig-font-mono) !important;
	font-size: 13px !important;
}

.ig-quickbuy__wrap {
	overflow-x: auto;
}

.ig-quickbuy__table {
	border: var(--ig-stroke-bold) solid var(--ig-line);
	border-collapse: collapse;
	font-family: var(--ig-font-mono);
	font-size: 13px;
	width: 100%;
}

.ig-quickbuy__table th {
	background: var(--ig-ink);
	color: var(--ig-paper);
	font-family: var(--ig-font-mono);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	padding: 12px 14px;
	text-align: left;
	text-transform: uppercase;
}

.ig-quickbuy__table tbody tr {
	border-top: var(--ig-stroke) solid var(--ig-line);
	transition: background 120ms ease;
}

.ig-quickbuy__table tbody tr:hover {
	background: var(--ig-bone);
}

.ig-quickbuy__table td {
	padding: 10px 14px;
	vertical-align: middle;
}

/* ==========================================================================
   Quick buy — táblázat oszlopai
   A fejléc és az adat MINDIG ugyanazt az osztályt kapja, és az igazítás is
   osztályhoz kötött. Korábban a `.ig-quickbuy__table th { text-align:left }`
   erősebb volt az oszlop-osztálynál, ezért a jobbra igazított árak fölött
   balra állt a fejléc — ettől tűnt az egész elcsúszottnak.
   ========================================================================== */
.ig-quickbuy__table th.ig-qb__net,
.ig-quickbuy__table th.ig-qb__gross,
.ig-quickbuy__table th.ig-qb__stock,
.ig-quickbuy__table td.ig-qb__net,
.ig-quickbuy__table td.ig-qb__gross,
.ig-quickbuy__table td.ig-qb__stock {
	text-align: right;
	white-space: nowrap;
}

.ig-quickbuy__table th.ig-qb__qty,
.ig-quickbuy__table td.ig-qb__qty { text-align: center; }

.ig-quickbuy__table th.ig-qb__act,
.ig-quickbuy__table td.ig-qb__act { text-align: right; }

.ig-qb__net   { width: 120px; }
.ig-qb__gross { width: 130px; }
.ig-qb__stock { width: 120px; }
.ig-qb__qty   { width: 120px; }
.ig-qb__act   { width: 130px; }

/* ── Terméknév: márka + név + kedvezmény-chipek ─────────────────── */
.ig-qb__name { min-width: 0; }

.ig-qb__brand {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ig-muted);
	line-height: 1.2;
}

.ig-qb__title {
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.ig-qb__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 5px;
}

.ig-qb__badge {
	border: 1px solid var(--ig-line);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 2px 6px;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: help;
}

.ig-qb__badge.is-carton { background: var(--ig-bone); }
.ig-qb__badge.is-bonus  { background: var(--ig-accent); }
.ig-qb__badge.is-tier   { background: var(--ig-ink); color: var(--ig-paper); border-color: var(--ig-ink); }

/* ── Árak ────────────────────────────────────────────────────────── */
.ig-qb__gross del {
	color: var(--ig-muted);
	display: block;
	font-size: 11px;
	font-weight: 400;
}

/* ── Rendelhető mennyiség ────────────────────────────────────────── */
.ig-qb__stock strong { font-size: 15px; }
.ig-qb__stock-in  { color: #1a7f37; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.ig-qb__stock-out { color: var(--ig-danger, #a33); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

/* ── Darabszám + karton gyorsgomb ────────────────────────────────── */
/* Csak az ADATCELLA lesz flex — ha a <th>-ra is ráengedjük, kiesik a
   táblázat-sorból, és a fejléc magassága elcsúszik a többitől. */
.ig-quickbuy__table td.ig-qb__qty {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	height: 100%;
}

.ig-qb__qty input {
	background: var(--ig-bone);
	border: var(--ig-stroke) solid var(--ig-line);
	border-radius: 0;
	font-family: var(--ig-font-mono);
	font-weight: 700;
	min-height: 36px;
	text-align: center;
	width: 62px;
	max-width: 62px;
}

.ig-qb__carton-btn {
	background: var(--ig-ink);
	border: var(--ig-stroke) solid var(--ig-line);
	color: var(--ig-paper);
	cursor: pointer;
	font-family: var(--ig-font-mono);
	font-size: 11px;
	font-weight: 800;
	min-height: 36px;
	padding: 0 7px;
	white-space: nowrap;
}

.ig-qb__carton-btn:hover { background: var(--ig-accent); color: var(--ig-ink); }

.ig-qb__dash { color: var(--ig-muted); }

.ig-quickbuy__noprice {
	color: var(--ig-danger);
	font-size: 11px;
}

.ig-quickbuy__meta {
	color: var(--ig-muted);
	font-family: var(--ig-font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-bottom: 12px;
	text-transform: uppercase;
}

.ig-quickbuy__more {
	border: var(--ig-stroke-bold) solid var(--ig-line);
	border-top: 0;
	display: flex;
	justify-content: center;
	padding: 20px;
}

.ig-quickbuy__more .ig-button {
	font-size: 12px;
	letter-spacing: 0.08em;
	min-height: 44px;
	padding: 0 24px;
}

.ig-quickbuy__toast {
	background: var(--ig-accent);
	border: var(--ig-stroke-bold) solid var(--ig-line);
	bottom: 24px;
	color: var(--ig-accent-ink);
	font-family: var(--ig-font-mono);
	font-size: 13px;
	font-weight: 700;
	left: 50%;
	letter-spacing: 0.04em;
	padding: 12px 22px;
	position: fixed;
	transform: translateX(-50%);
	z-index: 110;
}

.ig-quickbuy__toast[hidden] {
	display: none;
}

@media (max-width: 880px) {
	.ig-quickbuy__filters {
		grid-template-columns: 1fr;
	}
	.ig-quickbuy__filter {
		border-right: 0;
		border-bottom: var(--ig-stroke) solid var(--ig-line);
	}
	.ig-quickbuy__filter:last-child {
		border-bottom: 0;
	}
}

/* ==========================================================================

/* Karton-zár jelzés a darabszám mellett. */
.ig-qb__snap {
	font-family: var(--ig-font-mono);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .04em;
	background: var(--ig-accent);
	border: 1px solid var(--ig-line);
	padding: 2px 4px;
	white-space: nowrap;
	cursor: help;
}
.ig-qb__snap[hidden] { display: none; }

/* ── Listás rendelés (bemásolt Excel-lista) ──────────────────────── */
.ig-bulk {
	border: var(--ig-stroke-bold) solid var(--ig-line);
	background: var(--ig-paper);
	margin-bottom: 18px;
}

.ig-bulk__summary {
	cursor: pointer;
	display: grid;
	gap: 3px;
	padding: 14px 16px;
	list-style: none;
}

.ig-bulk__summary::-webkit-details-marker { display: none; }
.ig-bulk__summary strong { font-size: 15px; }
.ig-bulk__summary span { font-size: 12px; color: #555; line-height: 1.45; }
.ig-bulk[open] .ig-bulk__summary { border-bottom: var(--ig-stroke) solid var(--ig-line); background: var(--ig-bone); }

.ig-bulk__body { padding: 14px 16px; }

.ig-bulk__input {
	width: 100%;
	background: var(--ig-bone);
	border: var(--ig-stroke) solid var(--ig-line);
	border-radius: 0;
	font-family: var(--ig-font-mono);
	font-size: 14px;
	line-height: 1.6;
	padding: 10px;
	white-space: pre;
	overflow-x: auto;
}

.ig-bulk__hint { margin: 8px 0 12px; font-size: 12px; line-height: 1.45; color: #555; }

.ig-bulk__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ig-bulk__actions .ig-button { min-height: 46px; }
.ig-bulk__msg { font-family: var(--ig-font-mono); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }

.ig-bulk__result { margin-top: 14px; }
.ig-bulk__result[hidden] { display: none; }

.ig-bulk__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ig-bulk__table th {
	background: var(--ig-ink);
	color: var(--ig-paper);
	font-family: var(--ig-font-mono);
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 8px 10px;
	text-align: left;
}
.ig-bulk__table td { padding: 8px 10px; border-bottom: 1px solid rgba(10,10,10,.12); vertical-align: top; }
.ig-bulk__table td em { display: block; font-family: var(--ig-font-mono); font-size: 10px; color: var(--ig-muted); font-style: normal; }
.ig-bulk__table .is-ok   { font-family: var(--ig-font-mono); font-weight: 700; }
.ig-bulk__table .is-warn { color: #8a5a00; font-weight: 700; }
.ig-bulk__table .is-bad  { color: #a33; font-weight: 700; }

.ig-bulk__missing {
	margin-top: 12px;
	border: var(--ig-stroke) solid #8a1f1f;
	background: #ffe5e5;
	color: #7a1717;
	padding: 10px 12px;
	font-size: 12px;
}
.ig-bulk__missing ul { margin: 6px 0 0; padding-left: 18px; }
.ig-bulk__missing code { font-family: var(--ig-font-mono); }
/* ==========================================================================
   Modal (confirm dialog)
   ========================================================================== */

.ig-modal {
	align-items: center;
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 24px;
	position: fixed;
	/*
	 * A megerősítő ablaknak a legfelső rétegnek kell lennie. Korábban 200 volt,
	 * és alá került a süti-sáv és a toast (9999), a PWA-gomb (99990) meg a
	 * navigációs csík (100000) — ezért csúszott a lábléc alá a kosárban.
	 */
	z-index: 100001;
}

/*
 * A `hidden` attribútum a böngésző alap stíluslapján `display: none`, amit a
 * fenti `display: flex` felülír. Enélkül a `el.hidden = true` semmit nem
 * csinál: a modal nem záródik be, és a trigger előtt is látszik.
 */
.ig-modal[hidden] {
	display: none;
}

.ig-modal__backdrop {
	animation: ig-modal-fade 200ms ease both;
	background: rgba(0, 0, 0, 0.7);
	inset: 0;
	position: absolute;
}

.ig-modal__panel {
	animation: ig-modal-pop 220ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
	background: var(--ig-paper);
	border: var(--ig-stroke-bold) solid var(--ig-line);
	box-shadow: 8px 8px 0 var(--ig-accent);
	max-width: 420px;
	padding: 28px 28px 24px;
	position: relative;
	width: 100%;
}

.ig-modal__panel h3 {
	font-size: 22px;
	letter-spacing: -0.01em;
	margin: 0 0 12px;
}

.ig-modal__panel p {
	font-family: var(--ig-font-mono);
	font-size: 13px;
	letter-spacing: 0.02em;
	line-height: 1.5;
	margin: 0 0 22px;
}

.ig-modal__panel p strong {
	background: var(--ig-accent);
	color: var(--ig-accent-ink);
	padding: 0 6px;
}

.ig-modal__actions {
	display: flex;
	gap: 10px;
}

.ig-modal__actions .ig-button {
	flex: 1;
	min-height: 48px;
	padding: 0 14px;
}

@keyframes ig-modal-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes ig-modal-pop {
	from { opacity: 0; transform: translateY(20px) scale(0.96); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==========================================================================
   Hamburger button (mobile only, hidden by default)
   ========================================================================== */

.ig-hamburger {
	align-items: center;
	background: var(--ig-paper);
	border: 0;
	border-left: var(--ig-stroke-bold) solid var(--ig-line);
	cursor: pointer;
	display: none;
	flex-direction: column;
	gap: 5px;
	height: 100%;
	justify-content: center;
	min-height: 64px;
	padding: 0 18px;
	transition: background 120ms ease;
}

.ig-hamburger:hover {
	background: var(--ig-accent);
}

.ig-hamburger span {
	background: var(--ig-ink);
	display: block;
	height: 3px;
	transform-origin: center;
	transition: transform 240ms ease, opacity 200ms ease;
	width: 26px;
}

.ig-hamburger.is-open span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}
.ig-hamburger.is-open span:nth-child(2) {
	opacity: 0;
}
.ig-hamburger.is-open span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/* ==========================================================================
   Mobile drawer
   ========================================================================== */

.ig-drawer-backdrop {
	background: rgba(0, 0, 0, 0.55);
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	transition: opacity 240ms ease, visibility 0s linear 240ms;
	visibility: hidden;
	z-index: 80;
}

.ig-drawer-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
	transition: opacity 240ms ease, visibility 0s linear 0s;
	visibility: visible;
}

.ig-drawer-backdrop.is-open {
	opacity: 1;
}

.ig-drawer {
	background: var(--ig-paper);
	border-left: var(--ig-stroke-mega) solid var(--ig-line);
	display: none;
	flex-direction: column;
	height: 100dvh;
	max-width: 360px;
	overflow-y: auto;
	position: fixed;
	right: 0;
	top: 0;
	transform: translateX(105%);
	transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
	width: 86%;
	z-index: 90;
}

@media (max-width: 880px) {
	.ig-drawer {
		display: flex;
	}
}

.ig-drawer.is-open {
	transform: translateX(0);
}

.ig-drawer__header {
	align-items: center;
	border-bottom: var(--ig-stroke-bold) solid var(--ig-line);
	display: flex;
	justify-content: space-between;
	padding: 18px 22px;
}

.ig-drawer__title {
	font-family: var(--ig-font-mono);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.18em;
}

.ig-drawer__close {
	background: var(--ig-ink);
	border: 0;
	color: var(--ig-paper);
	cursor: pointer;
	height: 40px;
	padding: 0;
	transition: background 120ms ease, color 120ms ease;
	width: 40px;
}

.ig-drawer__close svg {
	display: block;
	height: 22px;
	margin: 0 auto;
	width: 22px;
}

.ig-drawer__close:hover {
	background: var(--ig-accent);
	color: var(--ig-accent-ink);
}

.ig-drawer__nav {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.ig-drawer__nav a {
	align-items: center;
	border-bottom: var(--ig-stroke) solid var(--ig-line);
	color: var(--ig-ink);
	display: flex;
	font-family: var(--ig-font-display);
	font-size: 22px;
	font-weight: 800;
	justify-content: space-between;
	letter-spacing: -0.01em;
	opacity: 0;
	padding: 22px 24px;
	text-transform: uppercase;
	transform: translateX(20px);
	transition: background 160ms ease, color 160ms ease, transform 240ms ease, opacity 240ms ease;
}

.ig-drawer.is-open .ig-drawer__nav a {
	opacity: 1;
	transform: translateX(0);
}

.ig-drawer.is-open .ig-drawer__nav a:nth-child(1) { transition-delay: 60ms; }
.ig-drawer.is-open .ig-drawer__nav a:nth-child(2) { transition-delay: 90ms; }
.ig-drawer.is-open .ig-drawer__nav a:nth-child(3) { transition-delay: 120ms; }
.ig-drawer.is-open .ig-drawer__nav a:nth-child(4) { transition-delay: 150ms; }
.ig-drawer.is-open .ig-drawer__nav a:nth-child(5) { transition-delay: 180ms; }
.ig-drawer.is-open .ig-drawer__nav a:nth-child(6) { transition-delay: 210ms; }

.ig-drawer__nav a:hover,
.ig-drawer__nav a[aria-current="page"] {
	background: var(--ig-ink);
	color: var(--ig-paper);
}

.ig-drawer__nav a[aria-current="page"] i {
	color: var(--ig-accent);
}

.ig-drawer__nav i {
	color: var(--ig-muted);
	font-family: var(--ig-font-mono);
	font-size: 18px;
	font-style: normal;
	transition: color 160ms ease;
}

.ig-drawer__nav a small {
	background: var(--ig-accent);
	color: var(--ig-accent-ink);
	display: inline-block;
	font-family: var(--ig-font-mono);
	font-size: 11px;
	font-weight: 700;
	margin-left: 8px;
	padding: 2px 6px;
}

.ig-drawer__nav a small[hidden] {
	display: none;
}

.ig-drawer__context {
	border-top: var(--ig-stroke-bold) solid var(--ig-line);
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px 24px;
}

.ig-drawer__label {
	color: var(--ig-muted);
	font-family: var(--ig-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ig-drawer__context select {
	background: var(--ig-bone);
	border: var(--ig-stroke-bold) solid var(--ig-line);
	border-radius: 0;
	font-family: var(--ig-font-mono);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.06em;
	min-height: 48px;
	padding: 0 14px;
	text-transform: uppercase;
	width: 100%;
}

html.ig-no-scroll,
html.ig-no-scroll body {
	overflow: hidden;
}

.ig-cart-btn:hover .ig-cart-btn__badge {
	background: var(--ig-ink);
	color: var(--ig-accent);
}

.ig-cart-btn--account.is-logged::after {
	background: var(--ig-accent);
	border: var(--ig-stroke) solid var(--ig-line);
	border-radius: 999px;
	content: "";
	height: 10px;
	position: absolute;
	right: 14px;
	top: 14px;
	width: 10px;
}

/* ==========================================================================
   Account page
   ========================================================================== */

.ig-account {
	padding-top: 0;
	padding-bottom: 96px;
}

/* ==========================================================================
   Account hero + brutalist tile nav
   ========================================================================== */

.ig-account-hero {
	align-items: start;
	border-bottom: var(--ig-stroke-bold) solid var(--ig-line);
	display: grid;
	gap: 16px 24px;
	grid-template-columns: minmax(0, 1fr) auto;
	margin: 0 0 clamp(20px, 3vw, 32px);
	padding: 0 0 clamp(20px, 3vw, 32px);
}

.ig-account-hero__intro h1 {
	margin: 6px 0 0;
}

.ig-account-hero__logout {
	align-items: center;
	border: var(--ig-stroke) solid var(--ig-line);
	color: var(--ig-ink);
	display: inline-flex;
	font-family: var(--ig-font-mono);
	font-size: 11px;
	font-weight: 700;
	gap: 10px;
	letter-spacing: 0.12em;
	margin-top: 8px;
	padding: 10px 14px;
	text-decoration: none;
	text-transform: uppercase;
	transition: background 140ms ease, color 140ms ease;
	white-space: nowrap;
}

.ig-account-hero__logout svg {
	height: 16px;
	width: 16px;
}

.ig-account-hero__logout:hover,
.ig-account-hero__logout:focus-visible {
	background: var(--ig-ink);
	color: var(--ig-paper);
	outline: none;
}

.ig-account-nav {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0 0 clamp(28px, 4vw, 48px);
}

.ig-account-nav__tile {
	align-items: end;
	background: var(--ig-paper);
	border: var(--ig-stroke-bold) solid var(--ig-line);
	color: var(--ig-ink);
	display: grid;
	gap: 8px;
	grid-template-areas:
		"index    arrow"
		"name     name";
	grid-template-columns: minmax(0, 1fr) auto;
	margin: 0 -1.5px -1.5px 0;
	min-height: 110px;
	padding: 16px 18px;
	position: relative;
	text-decoration: none;
	transition: background 140ms ease, color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.ig-account-nav__tile::before {
	color: var(--ig-muted);
	content: attr(data-index);
	font-family: var(--ig-font-mono);
	font-size: 11px;
	font-weight: 700;
	grid-area: index;
	letter-spacing: 0.12em;
	transition: color 140ms ease;
}

.ig-account-nav__name {
	display: block;
	font-family: var(--ig-font-display);
	font-size: clamp(20px, 2vw, 28px);
	font-weight: 900;
	grid-area: name;
	letter-spacing: -0.02em;
	line-height: 1;
	text-transform: uppercase;
}

.ig-account-nav__arrow {
	color: var(--ig-muted);
	font-family: var(--ig-font-mono);
	font-size: 14px;
	grid-area: arrow;
	transition: color 140ms ease, transform 200ms ease;
}

.ig-account-nav__bolt {
	background: var(--ig-ink);
	color: var(--ig-accent);
	font-size: 13px;
	grid-area: index;
	justify-self: start;
	line-height: 1;
	padding: 4px 8px;
}

.ig-account-nav__tile:hover {
	background: var(--ig-bone, #f6f6f3);
}

.ig-account-nav__tile:hover .ig-account-nav__arrow {
	color: var(--ig-ink);
	transform: translateX(4px);
}

.ig-account-nav__tile.is-active {
	background: var(--ig-ink);
	color: var(--ig-paper);
}

.ig-account-nav__tile.is-active::before {
	color: var(--ig-accent);
}

.ig-account-nav__tile.is-active .ig-account-nav__arrow {
	color: var(--ig-accent);
}

.ig-account-nav__tile--accent {
	background: var(--ig-accent);
	color: var(--ig-accent-ink);
}

.ig-account-nav__tile--accent:hover {
	background: var(--ig-accent);
	color: var(--ig-accent-ink);
	transform: translate(-2px, -2px);
	box-shadow: 4px 4px 0 var(--ig-ink);
}

.ig-account-nav__tile--accent .ig-account-nav__arrow,
.ig-account-nav__tile--accent::before {
	color: var(--ig-accent-ink);
}

.ig-account-nav__tile--accent:hover .ig-account-nav__arrow {
	color: var(--ig-accent-ink);
}

@media (max-width: 880px) {
	.ig-account-hero {
		grid-template-columns: 1fr;
	}
	.ig-account-hero__logout {
		justify-self: start;
		margin-top: 0;
	}
	.ig-account-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.ig-account-nav__tile--accent {
		grid-column: 1 / -1;
		min-height: 80px;
	}
	.ig-account-nav__tile {
		min-height: 92px;
	}
	.ig-account-nav__name {
		font-size: 18px;
	}
}

@media (max-width: 480px) {
	.ig-account-nav {
		grid-template-columns: 1fr;
	}
	.ig-account-nav__tile {
		min-height: 72px;
	}
}

.ig-account-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ig-account-card {
	background: var(--ig-paper);
	border: var(--ig-stroke-bold) solid var(--ig-line);
	display: grid;
	gap: 16px;
	padding: 28px;
}

.ig-account-card h2 {
	font-size: 20px;
	letter-spacing: 0;
	margin: 0;
}

.ig-account-card--wide {
	grid-column: span 2;
}

.ig-account-card form,
.ig-account-form {
	display: grid;
	gap: 16px;
}

.ig-account-card label,
.ig-account-form label {
	display: grid;
	gap: 6px;
}

.ig-account-card label > span,
.ig-account-form label > span {
	color: var(--ig-ink);
	font-family: var(--ig-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ig-account-card input[type="text"],
.ig-account-card input[type="email"],
.ig-account-card input[type="password"],
.ig-account-card input[type="tel"],
.ig-account-form input,
.ig-account-form select {
	background: var(--ig-bone);
	border: var(--ig-stroke) solid var(--ig-line);
	border-radius: 0;
	color: var(--ig-ink);
	font-family: var(--ig-font-mono);
	font-size: 16px;
	min-height: 48px;
	padding: 0 14px;
	width: 100%;
}

.ig-account-remember {
	align-items: center;
	display: flex !important;
	flex-direction: row;
	gap: 8px !important;
}

.ig-account-remember input {
	width: auto !important;
	min-height: auto !important;
}

.ig-account-forgot {
	color: var(--ig-muted);
	font-family: var(--ig-font-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-decoration: underline;
}

.ig-account-forgot:hover {
	color: var(--ig-ink);
}

.ig-account-legal {
	color: var(--ig-muted);
	font-family: var(--ig-font-mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	line-height: 1.5;
	margin: 0;
}

.ig-account-guest {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 32px;
}

.ig-account-dl {
	border-top: var(--ig-stroke) solid var(--ig-line);
	display: grid;
	gap: 0;
	grid-template-columns: max-content 1fr;
	margin: 0;
}

.ig-account-dl dt,
.ig-account-dl dd {
	border-bottom: var(--ig-stroke) solid var(--ig-line);
	font-family: var(--ig-font-mono);
	font-size: 13px;
	margin: 0;
	padding: 10px 0;
}

.ig-account-dl dt {
	color: var(--ig-muted);
	font-weight: 600;
	letter-spacing: 0.04em;
	padding-right: 16px;
	text-transform: uppercase;
}

.ig-account-dl dd {
	color: var(--ig-ink);
	font-weight: 600;
}

.ig-account address {
	color: var(--ig-ink);
	font-family: var(--ig-font-mono);
	font-size: 13px;
	font-style: normal;
	line-height: 1.7;
}

@media (max-width: 880px) {
	.ig-account-grid,
	.ig-account-guest {
		grid-template-columns: 1fr;
	}
	.ig-account-card--wide {
		grid-column: span 1;
	}
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.ig-button {
	align-items: center;
	background: var(--ig-ink, #0a0a0a);
	border: var(--ig-stroke-bold, 3px) solid var(--ig-line, #0a0a0a);
	border-radius: var(--ig-radius, 0);
	color: var(--ig-paper, #ffffff);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--ig-font-mono);
	font-size: 13px;
	font-weight: 700;
	gap: 8px;
	justify-content: center;
	letter-spacing: 0.08em;
	min-height: 52px;
	padding: 0 26px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background 120ms ease, color 120ms ease, transform 80ms ease;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.ig-button:hover {
	background: var(--ig-accent);
	color: var(--ig-accent-ink);
}

.ig-button:active {
	transform: translate(2px, 2px);
}

.ig-button--ghost {
	background: var(--ig-paper);
	color: var(--ig-ink);
}

.ig-button--accent {
	background: var(--ig-accent);
	color: var(--ig-accent-ink);
}

.ig-button--accent:hover {
	background: var(--ig-ink);
	color: var(--ig-paper);
}

.ig-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 28px;
}

/* ==========================================================================
   Hero (home)
   ========================================================================== */

.ig-hero {
	--dmx-r: 232;
	--dmx-g: 255;
	--dmx-b: 0;
	--dmx-mul: 0.6;
	--dmx-shu: 1;
	--dmx-dim: 0.6;
	--dmx-raw-r: 232;
	--dmx-raw-g: 255;
	--dmx-raw-b: 0;
	background: var(--ig-paper);
	border-bottom: var(--ig-stroke-bold) solid var(--ig-line);
	overflow: hidden;
	position: relative;
}

.ig-hero__wash {
	background:
		radial-gradient(ellipse 60% 80% at 22% 30%, rgb(var(--dmx-r) var(--dmx-g) var(--dmx-b) / calc(0.55 * var(--dmx-intensity, 0))) 0%, transparent 70%),
		radial-gradient(ellipse 50% 70% at 80% 65%, rgb(var(--dmx-r) var(--dmx-g) var(--dmx-b) / calc(0.40 * var(--dmx-intensity, 0))) 0%, transparent 70%);
	inset: 0;
	mix-blend-mode: multiply;
	pointer-events: none;
	position: absolute;
	transition: background 90ms linear;
	z-index: 0;
}

.ig-hero__beams {
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

.ig-hero__beam {
	height: 110%;
	position: absolute;
	top: -10%;
	transform-origin: 50% 0%;
}

.ig-hero__beam > span {
	background: linear-gradient(180deg,
		rgb(var(--dmx-r) var(--dmx-g) var(--dmx-b)) 0%,
		rgb(var(--dmx-r) var(--dmx-g) var(--dmx-b) / 0) 85%);
	display: block;
	filter:
		blur(8px)
		drop-shadow(0 0 10px rgba(232, 255, 0, calc(0.55 * var(--dmx-intensity, 0))))
		drop-shadow(0 0 24px rgba(232, 255, 0, calc(0.30 * var(--dmx-intensity, 0))));
	height: 100%;
	opacity: calc(0.78 * var(--dmx-intensity, 0));
	transform-origin: 50% 0%;
	transition: opacity 90ms linear, background 90ms linear;
	width: 100%;
}

.ig-hero__beam:nth-child(1) { left: 12%;  width: 180px; }
.ig-hero__beam:nth-child(2) { left: 38%;  width: 140px; }
.ig-hero__beam:nth-child(3) { right: 14%; width: 220px; }

.ig-hero[data-dmx-stage] .ig-hero__beam        { transform: rotate(8deg); }
.ig-hero[data-dmx-stage] .ig-hero__beam:nth-child(2) { transform: rotate(-6deg); }
.ig-hero[data-dmx-stage] .ig-hero__beam:nth-child(3) { transform: rotate(10deg); }

.ig-hero[data-dmx-stage].is-panning .ig-hero__beam {
	animation: ig-pan var(--dmx-pan-period, 4s) ease-in-out infinite alternate;
}
.ig-hero[data-dmx-stage].is-panning .ig-hero__beam:nth-child(2) {
	animation-delay: calc(var(--dmx-pan-period, 4s) * -0.33);
}
.ig-hero[data-dmx-stage].is-panning .ig-hero__beam:nth-child(3) {
	animation-delay: calc(var(--dmx-pan-period, 4s) * -0.66);
}

.ig-hero[data-dmx-stage].is-tilting .ig-hero__beam > span {
	animation: ig-tilt var(--dmx-tilt-period, 4s) ease-in-out infinite alternate;
}
.ig-hero[data-dmx-stage].is-tilting .ig-hero__beam:nth-child(2) > span {
	animation-delay: calc(var(--dmx-tilt-period, 4s) * -0.5);
}
.ig-hero[data-dmx-stage].is-tilting .ig-hero__beam:nth-child(3) > span {
	animation-delay: calc(var(--dmx-tilt-period, 4s) * -0.25);
}

@keyframes ig-pan {
	0%   { transform: rotate(-35deg); }
	100% { transform: rotate(35deg); }
}

@keyframes ig-tilt {
	0%   { transform: rotate(-14deg) scaleY(0.55); }
	100% { transform: rotate(14deg)  scaleY(1.20); }
}

@media (prefers-reduced-motion: reduce) {
	.ig-hero[data-dmx-stage].is-panning .ig-hero__beam,
	.ig-hero[data-dmx-stage].is-tilting .ig-hero__beam > span {
		animation: none;
	}
}

.ig-hero__content {
	align-items: start;
	display: grid;
	column-gap: clamp(32px, 4vw, 64px);
	row-gap: 0;
	grid-template-columns: minmax(0, 1fr) 380px;
	grid-template-rows: auto auto;
	overflow: hidden;
	padding-top: clamp(48px, 7vw, 120px);
	padding-bottom: clamp(40px, 5vw, 80px);
	position: relative;
	z-index: 1;
}

.ig-hero__text {
	min-width: 0;
}

.ig-hero__content > .ig-hero__split {
	grid-column: 1 / -1;
	grid-row: 2;
}

.ig-hero[data-dmx-stage].is-blackout .ig-hero__wash,
.ig-hero[data-dmx-stage].is-blackout .ig-hero__beams {
	opacity: 0;
}

.ig-hero[data-dmx-stage].is-strobing .ig-hero__wash,
.ig-hero[data-dmx-stage].is-strobing .ig-hero__beams {
	animation: ig-strobe var(--dmx-strobe-period, 200ms) linear infinite;
}

@keyframes ig-strobe {
	0%, 39%   { opacity: 1; }
	40%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.ig-hero[data-dmx-stage].is-strobing .ig-hero__wash,
	.ig-hero[data-dmx-stage].is-strobing .ig-hero__beams {
		animation: none;
		opacity: 0.6;
	}
}

.ig-hero__text > .ig-eyebrow {
	margin-bottom: clamp(20px, 3vw, 40px);
}

.ig-hero__headline {
	font-size: clamp(56px, 13vw, 200px);
	letter-spacing: -0.04em;
	line-height: 0.86;
	margin: 0 0 clamp(28px, 4vw, 48px);
	text-transform: uppercase;
}

.ig-hero__headline mark {
	background: var(--ig-accent);
	color: var(--ig-accent-ink);
	padding: 0 0.06em;
	white-space: nowrap;
}

.ig-hero__split {
	align-items: end;
	display: grid;
	gap: 32px 48px;
	grid-template-columns: minmax(0, 1.2fr) auto;
}

.ig-hero__lead {
	font-family: var(--ig-font-display);
	font-size: clamp(18px, 1.6vw, 24px);
	font-weight: 500;
	line-height: 1.35;
	margin: 0;
	max-width: 52ch;
}

.ig-hero__split .ig-actions {
	margin: 0;
}

.ig-hero__stats {
	border-top: var(--ig-stroke-bold) solid var(--ig-line);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 1;
}

.ig-hero__stats > div {
	background: var(--ig-paper);
	border-right: var(--ig-stroke) solid var(--ig-line);
	padding: clamp(20px, 2.5vw, 32px) clamp(20px, 2.5vw, 36px);
	position: relative;
	transition: background 200ms ease, color 200ms ease;
}

.ig-hero__stats > div:last-child {
	border-right: 0;
}

.ig-hero__stats > div:hover {
	background: var(--ig-ink);
	color: var(--ig-paper);
}

.ig-hero__stats > div:hover dd {
	color: var(--ig-accent);
}

.ig-hero__stats > div:nth-child(1)::before,
.ig-hero__stats > div:nth-child(2)::before,
.ig-hero__stats > div:nth-child(3)::before,
.ig-hero__stats > div:nth-child(4)::before {
	color: var(--ig-muted);
	content: attr(data-i);
	font-family: var(--ig-font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	position: absolute;
	right: 14px;
	top: 12px;
}

.ig-hero__stats > div:nth-child(1) { counter-reset: stat 1; }
.ig-hero__stats > div:nth-child(1)::before { content: "01"; }
.ig-hero__stats > div:nth-child(2)::before { content: "02"; }
.ig-hero__stats > div:nth-child(3)::before { content: "03"; }
.ig-hero__stats > div:nth-child(4)::before { content: "04"; }

.ig-hero__stats dt {
	display: block;
	font-family: var(--ig-font-display);
	font-size: clamp(36px, 5vw, 72px);
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 0.95;
	margin: 0 0 6px;
}

.ig-hero__stats dt span {
	color: var(--ig-accent);
	font-size: 0.55em;
	font-weight: 800;
	margin-left: 2px;
	vertical-align: super;
}

.ig-hero__stats > div:hover dt span {
	color: var(--ig-accent);
}

.ig-hero__stats dd {
	color: var(--ig-muted);
	font-family: var(--ig-font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	margin: 0;
	text-transform: uppercase;
}

/* ==========================================================================
   PARTY MODE — stage equipment (hidden by default, visible when hero has
   .is-party-mode). Colors invert (white→black bg, black→white text), action
   buttons collapse to PARTY only, line-array/blinders/side stacks fade in.
   ========================================================================== */

.ig-hero { transition: background-color 600ms ease, color 600ms ease; }

.ig-hero__stage {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	transform: scale(0.96);
	transition: opacity 600ms ease, transform 600ms ease;
	z-index: 0;
	overflow: hidden;            /* containment — children can never extend the hero */
}
/* In party mode, raise above content so the cabinets and stage actually read.
   pointer-events stays none so the DMX/DJ panel under it is still clickable. */
.ig-hero.is-party-mode .ig-hero__stage {
	z-index: 3;
}
/* But the DMX / DJ panel must always sit on top of everything when party
   mode is engaged — otherwise the stage equipment covers the controls. */
.ig-hero.is-party-mode .ig-dmx {
	z-index: 40;
}
/* Stats row sits outside the stage container — stays visible in party mode. */
.ig-hero.is-party-mode .ig-hero__stage {
	opacity: 1;
	transform: scale(1);
}

/* Truss — full-width horizontal beam at the top with PAR lamps mounted on
   it and 5 line array clusters hanging below. Mimics a festival upstage
   front-truss configuration. */
.ig-hero__truss {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 130px;
	pointer-events: none;
}
.ig-hero__truss-bar {
	position: absolute;
	top: 4px;
	left: 3%;
	right: 3%;
	height: 9px;
	background:
		linear-gradient(180deg, #555 0%, #2a2a2a 50%, #1a1a1a 100%),
		repeating-linear-gradient(90deg, transparent 0 14px, rgba(0,0,0,0.4) 14px 16px);
	border-top: 1px solid #777;
	border-bottom: 1px solid #0a0a0a;
	box-shadow: 0 2px 6px rgba(0,0,0,0.8), 0 0 0 1px #050505;
}
/* PAR lamp row — 8 cans mounted under the truss bar between the two blinder
   clusters. Default = unlit (MH mode). Reactive to DMX color only in PAR mode. */
.ig-hero__pars {
	position: absolute;
	top: 16px;
	left: 20%;
	right: 20%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.ig-hero__pars i {
	display: block;
	width: 22px;
	height: 26px;
	background:
		radial-gradient(ellipse 110% 70% at 50% 100%,
			rgb(var(--par-r, 0) var(--par-g, 0) var(--par-b, 0) / calc(1.0 * var(--par-intensity, 0))) 0%,
			rgb(var(--par-r, 0) var(--par-g, 0) var(--par-b, 0) / calc(0.55 * var(--par-intensity, 0))) 55%,
			transparent 90%),
		linear-gradient(180deg, #2a2a2a 0%, #0a0a0a 100%);
	border: 1.5px solid #1a1a1a;
	border-top: 2.5px solid #3a3a3a;
	border-radius: 2px 2px 50% 50% / 2px 2px 12px 12px;
	box-shadow:
		0 0 0 1px #050505,
		0 1px 0 rgba(255,255,255,0.06) inset,
		/* close cone — bright core right under the can */
		0 calc(14px + 18px * var(--par-intensity, 0)) calc(20px + 44px * var(--par-intensity, 0))
			calc(2px + 4px * var(--par-intensity, 0))
			rgb(var(--par-r, 0) var(--par-g, 0) var(--par-b, 0) / calc(0.90 * var(--par-intensity, 0))),
		/* mid cone — broader halo halfway down */
		0 calc(34px + 36px * var(--par-intensity, 0)) calc(46px + 80px * var(--par-intensity, 0))
			calc(4px + 8px * var(--par-intensity, 0))
			rgb(var(--par-r, 0) var(--par-g, 0) var(--par-b, 0) / calc(0.60 * var(--par-intensity, 0))),
		/* far atmospheric — diffuse wash reaching toward stage floor */
		0 calc(68px + 72px * var(--par-intensity, 0)) calc(90px + 160px * var(--par-intensity, 0))
			calc(6px + 12px * var(--par-intensity, 0))
			rgb(var(--par-r, 0) var(--par-g, 0) var(--par-b, 0) / calc(0.35 * var(--par-intensity, 0)));
	transition: box-shadow 90ms linear, background 90ms linear;
}
/* PAR strobe + blackout (driven by the PAR fixture's own SHU channel) */
.ig-hero.is-par-strobing .ig-hero__pars i {
	animation: ig-par-strobe var(--par-strobe-period, 200ms) steps(2) infinite;
}
.ig-hero.is-par-blackout .ig-hero__pars i {
	background: linear-gradient(180deg, #2a2a2a 0%, #0a0a0a 100%);
	box-shadow: 0 0 0 1px #050505, 0 1px 0 rgba(255,255,255,0.06) inset;
}
@keyframes ig-par-strobe {
	0%, 49%   { filter: brightness(0.25); }
	50%, 100% { filter: brightness(1.2); }
}

/* PAR effect channel — driven by PAR fixture's PAN slider value. The JS adds
   one of these classes to .ig-hero and sets --par-fx-speed for the duration. */

/* CHASE — sequential left → right running light */
.ig-hero.is-par-fx-chase .ig-hero__pars i {
	animation: ig-par-fx-chase var(--par-fx-speed, 0.7s) linear infinite;
}
.ig-hero.is-par-fx-chase .ig-hero__pars i:nth-child(1) { animation-delay: 0.000s; }
.ig-hero.is-par-fx-chase .ig-hero__pars i:nth-child(2) { animation-delay: -0.087s; }
.ig-hero.is-par-fx-chase .ig-hero__pars i:nth-child(3) { animation-delay: -0.174s; }
.ig-hero.is-par-fx-chase .ig-hero__pars i:nth-child(4) { animation-delay: -0.261s; }
.ig-hero.is-par-fx-chase .ig-hero__pars i:nth-child(5) { animation-delay: -0.348s; }
.ig-hero.is-par-fx-chase .ig-hero__pars i:nth-child(6) { animation-delay: -0.435s; }
.ig-hero.is-par-fx-chase .ig-hero__pars i:nth-child(7) { animation-delay: -0.522s; }
.ig-hero.is-par-fx-chase .ig-hero__pars i:nth-child(8) { animation-delay: -0.609s; }
@keyframes ig-par-fx-chase {
	0%, 75%, 100% { filter: brightness(0.18); }
	8%, 18%       { filter: brightness(1.7); }
}

/* RANDOM — each lamp flashes on its own irregular schedule (prime-ish ratios). */
.ig-hero.is-par-fx-random .ig-hero__pars i {
	animation: ig-par-fx-random var(--par-fx-speed, 0.4s) steps(1, end) infinite;
}
.ig-hero.is-par-fx-random .ig-hero__pars i:nth-child(1) { animation-duration: calc(var(--par-fx-speed, 0.4s) * 1.00); animation-delay: 0.07s; }
.ig-hero.is-par-fx-random .ig-hero__pars i:nth-child(2) { animation-duration: calc(var(--par-fx-speed, 0.4s) * 1.37); animation-delay: 0.13s; }
.ig-hero.is-par-fx-random .ig-hero__pars i:nth-child(3) { animation-duration: calc(var(--par-fx-speed, 0.4s) * 0.83); animation-delay: 0.21s; }
.ig-hero.is-par-fx-random .ig-hero__pars i:nth-child(4) { animation-duration: calc(var(--par-fx-speed, 0.4s) * 1.51); animation-delay: 0.05s; }
.ig-hero.is-par-fx-random .ig-hero__pars i:nth-child(5) { animation-duration: calc(var(--par-fx-speed, 0.4s) * 1.13); animation-delay: 0.19s; }
.ig-hero.is-par-fx-random .ig-hero__pars i:nth-child(6) { animation-duration: calc(var(--par-fx-speed, 0.4s) * 0.97); animation-delay: 0.11s; }
.ig-hero.is-par-fx-random .ig-hero__pars i:nth-child(7) { animation-duration: calc(var(--par-fx-speed, 0.4s) * 1.69); animation-delay: 0.23s; }
.ig-hero.is-par-fx-random .ig-hero__pars i:nth-child(8) { animation-duration: calc(var(--par-fx-speed, 0.4s) * 0.71); animation-delay: 0.17s; }
@keyframes ig-par-fx-random {
	0%, 55%   { filter: brightness(0.15); }
	60%, 72%  { filter: brightness(1.9); }
	75%, 100% { filter: brightness(0.15); }
}

/* MULTI — each lamp gets its own fixed color, synchronized fast blink. The
   per-lamp --par-r/g/b overrides defeat the global PAR color so each lamp
   stays its own hue regardless of the RGB sliders. */
.ig-hero.is-par-fx-multi .ig-hero__pars i {
	animation: ig-par-fx-multi var(--par-fx-speed, 0.4s) ease-in-out infinite;
}
.ig-hero.is-par-fx-multi .ig-hero__pars i:nth-child(1) { --par-r: 255; --par-g:   0; --par-b:   0; --par-intensity: 1; }
.ig-hero.is-par-fx-multi .ig-hero__pars i:nth-child(2) { --par-r: 255; --par-g: 140; --par-b:   0; --par-intensity: 1; }
.ig-hero.is-par-fx-multi .ig-hero__pars i:nth-child(3) { --par-r: 255; --par-g: 240; --par-b:   0; --par-intensity: 1; }
.ig-hero.is-par-fx-multi .ig-hero__pars i:nth-child(4) { --par-r:  20; --par-g: 255; --par-b:  20; --par-intensity: 1; }
.ig-hero.is-par-fx-multi .ig-hero__pars i:nth-child(5) { --par-r:   0; --par-g: 230; --par-b: 255; --par-intensity: 1; }
.ig-hero.is-par-fx-multi .ig-hero__pars i:nth-child(6) { --par-r:  40; --par-g:  80; --par-b: 255; --par-intensity: 1; }
.ig-hero.is-par-fx-multi .ig-hero__pars i:nth-child(7) { --par-r: 180; --par-g:  40; --par-b: 255; --par-intensity: 1; }
.ig-hero.is-par-fx-multi .ig-hero__pars i:nth-child(8) { --par-r: 255; --par-g:  40; --par-b: 200; --par-intensity: 1; }
.ig-hero.is-par-fx-multi .ig-hero__pars i:nth-child(even) { animation-delay: calc(var(--par-fx-speed, 0.4s) * -0.5); }
@keyframes ig-par-fx-multi {
	0%, 100% { filter: brightness(1.0); }
	50%      { filter: brightness(0.25); }
}
/* Hanging line array — 5 of them at distributed positions across the truss. */
.ig-hero__line-array {
	position: absolute;
	top: 80px;                          /* below the truss bar + blinders + PAR row */
	display: flex;
	flex-direction: column;
	gap: 1.5px;
	transform-origin: 50% 0;
	animation: ig-rig-sway 6s ease-in-out infinite alternate;
}
.ig-hero__line-array::before {
	content: "";
	position: absolute;
	top: -4px; left: 50%;
	width: 1.5px; height: 4px;
	background: #555;
	transform: translateX(-50%);
}
.ig-hero__line-array--1 { left: 16%; animation-delay:    0s; }
.ig-hero__line-array--2 { left: 32%; animation-delay: -1.2s; }
.ig-hero__line-array--3 { left: 48%; animation-delay: -2.4s; }
.ig-hero__line-array--4 { left: 64%; animation-delay: -3.6s; }
.ig-hero__line-array--5 { left: 80%; animation-delay: -4.8s; }
.ig-hero__line-array i {
	display: block;
	width: 54px;
	height: 16px;
	background:
		linear-gradient(180deg, #2a2a2a 0%, #0a0a0a 100%);
	border: 1.25px solid #2a2a2a;
	box-shadow:
		0 1px 0 rgba(255,255,255,0.06) inset,
		0 -1px 0 #000 inset,
		0 2px 0 #000;
	position: relative;
}
.ig-hero__line-array i::before,
.ig-hero__line-array i::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 9px; height: 9px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 35% 30%, #3a3a3a 0%, #0a0a0a 70%),
		#0a0a0a;
	border: 1px solid #1a1a1a;
	transform: translateY(-50%);
}
.ig-hero__line-array i::before { left: 7px; }
.ig-hero__line-array i::after  { right: 7px; }
@keyframes ig-rig-sway {
	from { transform: rotate(-1.4deg); }
	to   { transform: rotate( 1.4deg); }
}

/* Blinders — row of warm-white lamps mounted on a truss above the stage.
   Pulse in syncopated rhythm. BLN button on the DMX panel can fire them
   to full-bright strobe. */
/* Blinder clusters — two of them, mounted at the two edges of the truss,
   each a 2-wide × 4-tall grid hanging below the truss bar. */
.ig-hero__blinders {
	position: absolute;
	top: 16px;
	display: grid;
	grid-template-columns: 26px 26px;
	grid-auto-rows: 16px;
	gap: 3px;
	padding: 5px;
	background: linear-gradient(180deg, #1a1a1a, #050505);
	border: 1.5px solid #2a2a2a;
	border-radius: 0 0 3px 3px;
	box-shadow: 0 3px 0 #000, 0 0 0 1.5px #000 inset;
}
.ig-hero__blinders--left  { left:  3.5%; }
.ig-hero__blinders--right { right: 3.5%; }
.ig-hero__blinders::before {
	/* short bracket onto the truss bar above */
	content: "";
	position: absolute;
	top: -5px;
	left: 16px; right: 16px;
	height: 5px;
	background: linear-gradient(180deg, #555 0%, #2a2a2a 100%);
	border: 1px solid #0a0a0a;
	border-bottom: 0;
}
.ig-hero__blinders i {
	display: block;
	width: 100%;
	height: 100%;
	background: #2a2010;                       /* dark amber — lamp off */
	border-radius: 3px;
	box-shadow: 0 0 0 1px #1a1408 inset, 0 1px 1px rgba(0,0,0,0.5);
	opacity: 0.85;
}

/* BLN-button-held fire state: every blinder goes full-bright WHITE strobe,
   with a brief hero-wide flash overlay for impact. */
.ig-hero.is-blinder-firing .ig-hero__blinders i {
	animation: ig-blinder-fire 100ms steps(2) infinite;
	background: #ffffff;
}
@keyframes ig-blinder-fire {
	0%, 49%   { opacity: 0.2; box-shadow: 0 0 6px #fff; }
	50%, 100% { opacity: 1;   box-shadow: 0 0 25px #ffffff, 0 0 60px rgba(255,255,255,0.95), 0 0 100px rgba(255,255,255,0.7); }
}
.ig-hero.is-blinder-firing::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255,255,255,0.18);
	pointer-events: none;
	z-index: 2;
	animation: ig-bln-flash 100ms steps(2) infinite;
}
@keyframes ig-bln-flash {
	0%, 49%   { opacity: 0; }
	50%, 100% { opacity: 1; }
}

/* Side speaker stacks — much bigger so they read against the dark backdrop.
   Sub + mid + top + LED indicators + brand label. */
.ig-hero__stack {
	position: absolute;
	bottom: 4%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
}
.ig-hero__stack--left  { left:  1.5%; }
.ig-hero__stack--right { right: 1.5%; }
.ig-hero__stack i {
	background:
		linear-gradient(180deg, #2a2a2a 0%, #0a0a0a 100%);
	border: 1.5px solid #3a3a3a;
	box-shadow:
		0 1px 0 rgba(255,255,255,0.08) inset,
		0 -1px 0 #000 inset,
		0 4px 0 #000,
		0 6px 14px rgba(0,0,0,0.7);
	position: relative;
}
/* Tiny power-on LED — only on top + mid cabinets. The sub cabinet's ::after
   is needed for its INVGROUP brand plate (would be hijacked by this rule
   otherwise because of specificity). */
.ig-hero__stack-top::after,
.ig-hero__stack-mid::after {
	content: "";
	position: absolute;
	top: 4px; right: 4px;
	width: 4px; height: 4px;
	border-radius: 50%;
	background: #4dff7a;
	box-shadow: 0 0 4px #4dff7a, 0 0 8px rgba(77,255,122,0.7);
}
/* TOP — small line-array-style box */
.ig-hero__stack-top {
	width: 96px;
	height: 44px;
}
.ig-hero__stack-top::before {
	content: "INVGROUP";
	position: absolute;
	left: 0; right: 0;
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
	font-family: var(--ig-font-display, var(--ig-font-mono));
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.20em;
	color: #ffd060;
	opacity: 0.95;
	text-shadow: 0 0 4px rgba(255,208,96,0.45);
}
/* MID — mid-range horn cabinet */
.ig-hero__stack-mid {
	width: 116px;
	height: 70px;
}
.ig-hero__stack-mid::before {
	content: "";
	position: absolute;
	inset: 10px 16px;
	background:
		radial-gradient(circle at 30% 30%, #3a3a3a 0%, #0a0a0a 70%),
		linear-gradient(180deg, #2a2a2a, #0a0a0a);
	border-radius: 5px;
	border: 1.5px solid #1a1a1a;
	box-shadow: 0 0 4px #000 inset;
}
/* SUB — taller bass cabinet with brushed-metal texture, big driver up top,
   a recessed reflex port band in the middle, and a polished INVGROUP brand
   plate filling the bottom face. */
.ig-hero__stack-sub {
	width: 156px;
	height: 210px;
	background:
		repeating-linear-gradient(180deg, transparent 0 2px, rgba(255,255,255,0.02) 2px 3px),
		linear-gradient(180deg, transparent 0 112px, rgba(0,0,0,0.85) 114px 132px, transparent 134px),
		linear-gradient(180deg, #2e2e2e 0%, #181818 32%, #050505 100%);
	border: 1.5px solid #3a3a3a;
	border-top: 3px solid #4a4a4a;
	border-bottom: 3px solid #050505;
	box-shadow:
		0 1px 0 rgba(255,255,255,0.10) inset,
		0 -2px 0 rgba(0,0,0,0.85) inset,
		0 5px 0 #000,
		0 8px 20px rgba(0,0,0,0.8);
	padding: 0;
}
.ig-hero__stack-sub::before {
	/* Big driver cone — sits in the upper third */
	content: "";
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 36% 30%, #5a5a5a 0%, #1a1a1a 55%, #050505 100%),
		#050505;
	border: 3px solid #1f1f1f;
	box-shadow:
		0 0 0 1px #2a2a2a inset,
		0 0 8px #000 inset,
		0 0 0 2px #3a3a3a,
		0 3px 6px rgba(0,0,0,0.9);
}
.ig-hero__stack-sub::after {
	/* INVGROUP brand plate — spans the bottom face */
	content: "INVGROUP";
	position: absolute;
	left: 8px;
	right: 8px;
	bottom: 12px;
	padding: 9px 2px;
	text-align: center;
	font-family: var(--ig-font-display, sans-serif);
	font-size: 14px;
	font-weight: 900;
	letter-spacing: 0.14em;
	color: #7a7a7a;
	background: linear-gradient(180deg, #050505 0%, #1c1c1c 50%, #050505 100%);
	border: 1px solid #050505;
	border-radius: 2px;
	text-shadow: 0 1px 0 #000, 0 -1px 0 rgba(255,255,255,0.07);
	box-shadow:
		0 0 0 1px #2a2a2a inset,
		0 1px 0 rgba(255,255,255,0.06) inset,
		0 -1px 0 rgba(0,0,0,0.6) inset;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
}
.ig-hero.is-party-mode .ig-hero__stack-sub {
	animation: ig-stack-pump 0.5s ease-in-out infinite;
}
.ig-hero.is-party-mode .ig-hero__stack-sub::before {
	animation: ig-cone-pump 0.5s ease-in-out infinite;
}
/* Keyframes preserve the translateX(-50%) base centering by including it in
   every step — otherwise the scale transform replaces it and the cone slips. */
@keyframes ig-stack-pump {
	0%, 100% { transform: scaleY(1)     translateY(0); }
	50%      { transform: scaleY(1.025) translateY(-2px); }
}
@keyframes ig-cone-pump {
	0%, 100% { transform: translateX(-50%) scale(1); }
	50%      { transform: translateX(-50%) scale(0.95); }
}

/* Stage floor — a proper platform with depth perspective + warm light strip.
   The ::before is the floor plate; the ::after is the edge light. */
.ig-hero__stage-floor {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 48px;
	pointer-events: none;
}
.ig-hero__stage-floor::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, transparent 0%, rgba(30,20,5,0.7) 25%, rgba(60,40,10,0.92) 100%),
		repeating-linear-gradient(90deg, transparent 0 40px, rgba(255,206,77,0.06) 40px 41px);
	border-top: 2px solid rgba(255,206,77,0.35);
}
.ig-hero__stage-floor::after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 5px;
	background: linear-gradient(90deg, transparent 0%, #ffce4d 25%, #ffe48a 50%, #ffce4d 75%, transparent 100%);
	box-shadow: 0 0 30px rgba(255,206,77,0.9), 0 0 60px rgba(255,206,77,0.45);
}

/* DJ silhouette — head + shoulders, standing on the stage floor.
   Positioned in front of the stage but DJ panel still on top via its z-index.
   On the user's viewport: only head visible above panel (DJ behind console). */
.ig-hero__dj {
	position: absolute;
	left: 50%;
	bottom: 48px;                          /* sits on top of the stage floor */
	transform: translateX(-50%);
	width: 140px;
	height: 220px;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.ig-hero__dj-torso {
	width: 130px;
	height: 130px;
	margin-top: -6px;
	background:
		radial-gradient(ellipse 70% 50% at 50% 0%, #1a1a1a 0%, #050505 80%),
		linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);
	clip-path: polygon(28% 0, 72% 0, 100% 100%, 0 100%);
	box-shadow: 0 0 0 1px #1a1a1a, 0 -4px 14px rgba(0,0,0,0.8);
	order: 3;
}
.ig-hero__dj-neck {
	width: 22px;
	height: 12px;
	background: linear-gradient(180deg, #1a1a1a 0%, #050505 100%);
	order: 2;
	margin-top: -2px;
	box-shadow: 0 0 0 1px #1a1a1a;
}
.ig-hero__dj-head {
	width: 56px;
	height: 64px;
	background:
		radial-gradient(ellipse 60% 50% at 50% 35%, #2a2a2a 0%, #0a0a0a 100%);
	border-radius: 48% 48% 42% 42%;
	box-shadow: 0 0 0 1.5px #1a1a1a, 0 4px 10px rgba(0,0,0,0.8);
	order: 1;
	position: relative;
}
.ig-hero__dj-headphones {
	position: absolute;
	top: 6px;
	left: 50%;
	transform: translateX(-50%);
	width: 78px;
	height: 28px;
	order: 0;
	z-index: 1;
	pointer-events: none;
}
.ig-hero__dj-headphones::before {
	/* arch over the head */
	content: "";
	position: absolute;
	inset: 0;
	border: 4px solid #2a2a2a;
	border-bottom: 0;
	border-radius: 50% 50% 0 0;
	box-shadow: 0 0 0 1px #050505, 0 0 0 1.5px #1a1a1a inset;
}
.ig-hero__dj-cup {
	position: absolute;
	bottom: -4px;
	width: 16px;
	height: 22px;
	background: linear-gradient(180deg, #3a3a3a 0%, #050505 100%);
	border: 1.5px solid #050505;
	border-radius: 5px;
	box-shadow: 0 0 0 1px #1a1a1a inset, 0 2px 4px rgba(0,0,0,0.7);
}
.ig-hero__dj-cup--l { left: -2px; }
.ig-hero__dj-cup--r { right: -2px; }
.ig-hero__dj-cup::after {
	/* tiny accent LED on each cup */
	content: "";
	position: absolute;
	top: 6px; left: 50%;
	transform: translateX(-50%);
	width: 3px; height: 3px;
	border-radius: 50%;
	background: var(--ig-accent);
	box-shadow: 0 0 4px var(--ig-accent);
}

/* Speaker stack accents — bright LED strip on top + bottom edges so the
   cabinets pop out from the black backdrop even when partially behind the
   DJ panel. Only enabled in party mode (avoids work outside the scene). */
.ig-hero.is-party-mode .ig-hero__stack i {
	box-shadow:
		0 1px 0 rgba(255,255,255,0.08) inset,
		0 -1px 0 #000 inset,
		0 4px 0 #000,
		0 6px 14px rgba(0,0,0,0.7),
		0 -2px 0 0 rgba(255,206,77,0.35),    /* warm top trim */
		0 12px 18px rgba(255,206,77,0.12);    /* warm under-glow toward floor */
}

/* ===== Color flip when party mode is on ===== */
.ig-hero.is-party-mode {
	background: #050505;
	color: #f0f0f0;
}
.ig-hero.is-party-mode .ig-hero__wash {
	background: radial-gradient(ellipse at 50% 40%, rgba(232,255,0,0.08) 0%, transparent 60%);
}
.ig-hero.is-party-mode .ig-hero__headline { color: #ffffff; }
.ig-hero.is-party-mode .ig-hero__headline mark { background: var(--ig-accent); color: #000; }
.ig-hero.is-party-mode .ig-hero__lead { color: #c0c0c0; }
/* Stats row stays in its original light-on-white look in party mode — it lives
   outside the stage scene and shouldn't be tinted by the dark inversion. */
.ig-hero.is-party-mode .ig-hero__stats        { color: var(--ig-ink); }
.ig-hero.is-party-mode .ig-hero__stats dt,
.ig-hero.is-party-mode .ig-hero__stats dd     { color: var(--ig-ink); }
.ig-hero.is-party-mode .ig-hero__stats > div  { background: var(--ig-paper); border-color: var(--ig-line); }
.ig-hero.is-party-mode .ig-hero__stats > div:hover        { background: var(--ig-ink); color: var(--ig-paper); }
.ig-hero.is-party-mode .ig-hero__stats > div:hover dd     { color: var(--ig-accent); }
.ig-hero.is-party-mode .ig-button--ghost {
	color: #ffffff;
	border-color: #ffffff;
}
.ig-hero.is-party-mode .ig-button--ghost:hover {
	background: #ffffff;
	color: #000000;
}

/* Hide regular action buttons in party mode — PARTY button morphs into the
   only call-to-action. */
.ig-hero.is-party-mode .ig-actions > a {
	opacity: 0;
	transform: translateY(-4px);
	pointer-events: none;
	transition: opacity 300ms, transform 300ms;
}
.ig-actions > a { transition: opacity 400ms, transform 400ms; }

/* PARTY button — fixed to the right edge of the viewport, only visible while
   the hero is in view (controlled by IntersectionObserver in JS adding the
   .is-in-view class). Slides in from the right when hero enters viewport. */
.ig-button--party {
	position: fixed;
	right: 0;
	top: 38vh;
	z-index: 60;
	background: linear-gradient(135deg, #ff3da5 0%, #ff7e1b 50%, #ffe23a 100%);
	color: #0a0a0a;
	border: 2px solid #0a0a0a;
	border-right: 0;
	border-radius: 6px 0 0 6px;
	font-family: var(--ig-font-display, var(--ig-font-mono));
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 14px 18px;
	cursor: pointer;
	overflow: hidden;
	box-shadow: -4px 4px 0 rgba(0,0,0,0.6), -8px 0 22px rgba(255,61,165,0.35);
	/* Hidden by default — slides in from the right when hero is visible. */
	opacity: 0;
	transform: translateX(110%);
	pointer-events: none;
	transition: opacity 280ms ease, transform 320ms cubic-bezier(0.2, 0.8, 0.3, 1), background 200ms;
}
.ig-button--party.is-in-view {
	opacity: 1;
	transform: translateX(0);
	pointer-events: auto;
}
.ig-button--party:hover {
	transform: translateX(-2px);
	box-shadow: -6px 4px 0 rgba(0,0,0,0.7), -12px 0 28px rgba(255,61,165,0.55);
}
.ig-button--party::after {
	/* shimmer sweep across the face */
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
	transform: translateX(-100%);
	animation: ig-party-shimmer 3.4s ease-in-out infinite;
	pointer-events: none;
}
@keyframes ig-party-shimmer {
	0%, 60% { transform: translateX(-100%); }
	80%     { transform: translateX(100%); }
	100%    { transform: translateX(100%); }
}
.ig-button__party-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
}
.ig-button__party-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ig-button__party-icon svg { width: 16px; height: 16px; display: block; }
.ig-button__party-label--on  { display: none; }
.is-party-mode .ig-button--party {
	background: var(--ig-accent);
	color: #0a0a0a;
}
.is-party-mode .ig-button__party-label--off { display: none; }
.is-party-mode .ig-button__party-label--on  { display: inline-flex; }

/* Hide the sticky party button on mobile — the hero panel is hidden too;
   "party mode" with no DMX/DJ to drive it isn't meaningful at that size. */
@media (max-width: 880px) {
	.ig-button--party { display: none; }
}

/* Hide stage equipment on mobile where the hero is narrow — keeps the
   color flip + button toggle, but no half-cut speaker silhouettes. */
@media (max-width: 880px) {
	.ig-hero__stage { display: none; }
}

/* ==========================================================================
   DMX console (hero left)
   ========================================================================== */

.ig-dmx {
	align-self: center;
	justify-self: center;
	margin: 0;
	max-width: 380px;
	position: relative;
	width: 100%;
	z-index: 2;
}

.ig-dmx__panel {
	background:
		linear-gradient(180deg, #2a2a2a 0%, #161616 18%, #0d0d0d 70%, #1a1a1a 100%);
	border: 2px solid #0a0a0a;
	border-radius: 4px;
	box-shadow:
		0 0 0 1px #3a3a3a inset,
		0 2px 0 #060606 inset,
		8px 8px 0 rgba(10,10,10,0.85);
	color: #f0f0f0;
	padding: 14px 16px 18px;
	position: relative;
}

.ig-dmx__panel::before {
	background:
		repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 4px),
		repeating-linear-gradient(0deg, rgba(0,0,0,0.25) 0 1px, transparent 1px 3px);
	border-radius: 4px;
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.ig-dmx__head {
	align-items: center;
	border-bottom: 1px solid #2a2a2a;
	display: flex;
	gap: 8px;
	margin-bottom: 10px;
	padding-bottom: 8px;
	position: relative;
}

.ig-dmx__brand {
	color: #f5f5f5;
	font-family: var(--ig-font-display);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.18em;
}

.ig-dmx__model {
	color: #888;
	flex: 1;
	font-family: var(--ig-font-mono);
	font-size: 9px;
	letter-spacing: 0.12em;
}

.ig-dmx__power {
	background: #E8FF00;
	border-radius: 999px;
	box-shadow: 0 0 6px #E8FF00, 0 0 12px rgba(232,255,0,0.6);
	display: block;
	height: 8px;
	width: 8px;
}

.ig-dmx__blk {
	background: linear-gradient(180deg, #2a0a0a 0%, #150505 100%);
	border: 1px solid #4a0000;
	border-radius: 2px;
	box-shadow:
		0 1px 0 rgba(255,80,80,0.15) inset,
		0 -1px 0 #000 inset,
		0 1px 0 #000;
	color: #ff4646;
	cursor: pointer;
	font-family: var(--ig-font-mono);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.1em;
	padding: 4px 8px;
	text-shadow: 0 0 4px rgba(255,70,70,0.6);
	transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.ig-dmx__blk:hover {
	background: linear-gradient(180deg, #3a0c0c 0%, #1f0707 100%);
}

.ig-dmx__blk[aria-pressed="true"] {
	background: linear-gradient(180deg, #ff2a2a 0%, #c00000 100%);
	border-color: #ff8080;
	color: #fff;
	box-shadow:
		0 0 0 1px #500 inset,
		0 0 10px rgba(255,40,40,0.85),
		0 0 18px rgba(255,40,40,0.55);
	text-shadow: 0 0 6px rgba(255,255,255,0.7);
}

/* BLN — blinder fire button. Same pill chrome as BLK but yellow-accent
   (matches the warm blinder lamps). Lit / glowing when held. */
.ig-dmx__bln {
	background: linear-gradient(180deg, #3a3000 0%, #1a1500 100%);
	border: 1px solid #4a4000;
	border-radius: 2px;
	box-shadow:
		0 1px 0 rgba(255,220,80,0.15) inset,
		0 -1px 0 #000 inset,
		0 1px 0 #000;
	color: #ffd060;
	cursor: pointer;
	font-family: var(--ig-font-mono);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.1em;
	padding: 4px 7px;
	text-shadow: 0 0 4px rgba(255,208,96,0.6);
	transition: background 80ms ease, color 80ms ease, box-shadow 80ms ease;
}
.ig-dmx__bln:hover { background: linear-gradient(180deg, #4a4000 0%, #251f00 100%); }
.ig-dmx__bln[aria-pressed="true"] {
	background: linear-gradient(180deg, #ffe48a 0%, #ffce4d 100%);
	border-color: #ffffff;
	color: #1a1500;
	box-shadow:
		0 0 0 1px #fff inset,
		0 0 12px rgba(255,230,120,0.95),
		0 0 24px rgba(255,206,77,0.75);
	text-shadow: 0 0 4px rgba(255,255,255,0.9);
}

/* Fixture toggle — segmented MH | PAR control in the DMX head.
   MH (default) enables pan/tilt; PAR disables them (PAR cans don't move). */
.ig-dmx__fixture {
	display: inline-flex;
	border: 1px solid #2a2a2a;
	background: #050505;
	border-radius: 2px;
	overflow: hidden;
	box-shadow: 0 1px 0 #000, 0 -1px 0 rgba(255,255,255,0.04) inset;
	margin-left: auto;
}
.ig-dmx__fixture-btn {
	background: transparent;
	border: 0;
	color: #777;
	cursor: pointer;
	font-family: var(--ig-font-mono);
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.12em;
	padding: 3px 6px;
	transition: background 100ms ease, color 100ms ease;
}
.ig-dmx__fixture-btn:hover { color: #d8d8d8; }
.ig-dmx__fixture-btn + .ig-dmx__fixture-btn { border-left: 1px solid #1a1a1a; }
.ig-dmx__fixture-btn.is-active {
	background: var(--ig-accent);
	color: #0a0a0a;
	box-shadow: 0 0 6px rgba(232,255,0,0.5) inset;
	text-shadow: none;
}

/* PAR mode: TLT has no meaning for PARs — gray out its fader. PAN is
   repurposed as an FX channel (chase / random / multi) and stays active. */
.ig-hero[data-fixture="par"] .ig-dmx__fader:has(input[data-dmx-input="tlt"]) {
	opacity: 0.32;
	filter: grayscale(0.8);
}
.ig-hero[data-fixture="par"] .ig-dmx__fader:has(input[data-dmx-input="tlt"]) input {
	pointer-events: none;
}
.ig-hero[data-fixture="par"] .ig-dmx__display-row:last-child {
	opacity: 0.45;
}
/* Highlight the PAN fader in PAR mode — its role changed to FX. */
.ig-hero[data-fixture="par"] .ig-dmx__fader:has(input[data-dmx-input="pan"]) .ig-dmx__cap {
	color: var(--ig-accent);
	text-shadow: 0 0 4px rgba(232,255,0,0.6);
}
.ig-hero[data-fixture="par"] .ig-dmx__display-row:nth-last-child(2) .ig-dmx__display-lbl {
	color: var(--ig-accent);
}

/* Move the model text out of the head when fixture toggle is there (avoid
   line-wrap on narrow panels) — the toggle visually carries the same role. */
.ig-dmx__head:has(.ig-dmx__fixture) .ig-dmx__model { display: none; }

.ig-dmx__display {
	background: linear-gradient(180deg, #0a1a0a 0%, #0d1f0d 100%);
	border: 1px solid #000;
	border-radius: 2px;
	box-shadow:
		0 0 0 1px #1f1f1f,
		0 1px 0 #353535 inset,
		0 -1px 0 #000 inset;
	color: #6dff7a;
	display: grid;
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 9px;
	gap: 1px;
	grid-template-columns: repeat(7, 1fr);
	letter-spacing: 0.02em;
	margin-bottom: 14px;
	padding: 6px 4px;
	position: relative;
	text-shadow: 0 0 4px rgba(109,255,122,0.6);
}

.ig-dmx__display::after {
	background: repeating-linear-gradient(0deg, rgba(0,0,0,0.25) 0 1px, transparent 1px 2px);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.ig-dmx__display-row {
	align-items: center;
	border-right: 1px dashed rgba(109,255,122,0.18);
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 2px 0;
}

.ig-dmx__display-row:last-child {
	border-right: 0;
}

.ig-dmx__display-ch {
	color: rgba(109,255,122,0.55);
	font-size: 8px;
}

.ig-dmx__display-lbl {
	color: rgba(109,255,122,0.7);
	font-size: 8px;
	font-weight: 700;
}

.ig-dmx__display-val {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.ig-dmx__faders {
	display: grid;
	gap: 4px;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	padding: 4px 2px 2px;
}

.ig-dmx__fader {
	--fader-color: #fff;
	align-items: center;
	background: linear-gradient(180deg, #0e0e0e 0%, #1a1a1a 100%);
	border: 1px solid #050505;
	border-radius: 2px;
	box-shadow: 0 1px 0 #2c2c2c inset, 0 -1px 0 #000 inset;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	overflow: hidden;
	padding: 6px 0 4px;
	position: relative;
}

.ig-dmx__pip {
	--pip-on: 0;
	background: var(--fader-color);
	border-radius: 999px;
	box-shadow: 0 0 4px var(--fader-color), 0 0 0 1px #000;
	height: 6px;
	opacity: calc(0.15 + 0.85 * var(--pip-on));
	transition: opacity 90ms linear;
	width: 6px;
}

.ig-dmx__fader {
	min-height: 168px;
}

.ig-dmx__track {
	display: none;
}

.ig-dmx__range {
	background: transparent;
	cursor: ns-resize;
	flex: 1;
	height: 120px;
	margin: 0;
	max-width: 100%;
	padding: 0;
	width: 26px;
	writing-mode: vertical-lr;
	direction: rtl;
}

.ig-dmx__range:focus {
	outline: 1px dashed var(--fader-color);
	outline-offset: 2px;
}

.ig-dmx__range::-webkit-slider-runnable-track {
	background:
		linear-gradient(90deg, #050505 0%, #1a1a1a 50%, #050505 100%);
	border: 1px solid #000;
	box-shadow: 0 0 0 1px #2c2c2c, 0 0 6px rgba(0,0,0,0.6) inset;
	width: 5px;
}

.ig-dmx__range::-moz-range-track {
	background:
		linear-gradient(90deg, #050505 0%, #1a1a1a 50%, #050505 100%);
	border: 1px solid #000;
	box-shadow: 0 0 0 1px #2c2c2c, 0 0 6px rgba(0,0,0,0.6) inset;
	width: 5px;
}

.ig-dmx__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	background:
		linear-gradient(180deg, #f4f4f4 0%, #d0d0d0 30%, #6a6a6a 31%, #d0d0d0 34%, #d0d0d0 66%, #6a6a6a 67%, #d0d0d0 70%, #888 100%);
	border: 1px solid #000;
	border-radius: 3px;
	box-shadow: 0 2px 0 rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.12) inset;
	cursor: grab;
	height: 28px;
	width: 22px;
}

.ig-dmx__range::-moz-range-thumb {
	background:
		linear-gradient(180deg, #f4f4f4 0%, #d0d0d0 30%, #6a6a6a 31%, #d0d0d0 34%, #d0d0d0 66%, #6a6a6a 67%, #d0d0d0 70%, #888 100%);
	border: 1px solid #000;
	border-radius: 3px;
	box-shadow: 0 2px 0 rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.12) inset;
	cursor: grab;
	height: 28px;
	width: 22px;
}

.ig-dmx__range:active::-webkit-slider-thumb { cursor: grabbing; }
.ig-dmx__range:active::-moz-range-thumb     { cursor: grabbing; }

.ig-dmx__cap {
	color: var(--fader-color);
	font-family: var(--ig-font-mono);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-shadow: 0 1px 0 #000;
}

.ig-dmx__smoke-row {
	align-items: stretch;
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.ig-dmx__smoke {
	background: linear-gradient(180deg, #2a2a2a 0%, #151515 100%);
	border: 1px solid #050505;
	border-radius: 2px;
	box-shadow:
		0 1px 0 rgba(255,255,255,0.08) inset,
		0 -1px 0 #000 inset,
		0 1px 0 #000;
	color: #d8d8d8;
	cursor: pointer;
	flex: 1;
	font-family: var(--ig-font-display);
	font-size: 13px;
	font-weight: 900;
	letter-spacing: 0.16em;
	padding: 9px 0;
	text-shadow: 0 1px 0 #000;
	transition: background 120ms ease, color 120ms ease, transform 80ms ease;
}
/* Compact variant — half the regular size so the CONFETTI button fits next to it. */
.ig-dmx__smoke--compact {
	flex: 0 0 auto;
	padding: 6px 10px;
	font-size: 10px;
	letter-spacing: 0.12em;
}

.ig-dmx__smoke:hover {
	background: linear-gradient(180deg, #3a3a3a 0%, #1c1c1c 100%);
	color: #fff;
}

.ig-dmx__smoke:active {
	transform: translateY(1px);
}

/* CONFETTI button — wide, party-gradient, takes the bulk of the row. */
.ig-dmx__confetti {
	background: linear-gradient(135deg, #ff3da5 0%, #ff7e1b 50%, #ffe23a 100%);
	border: 1px solid #050505;
	border-radius: 2px;
	box-shadow:
		0 1px 0 rgba(255,255,255,0.2) inset,
		0 -1px 0 rgba(0,0,0,0.4) inset,
		0 1px 0 #000;
	color: #0a0a0a;
	cursor: pointer;
	flex: 1 1 auto;
	font-family: var(--ig-font-display);
	font-size: 13px;
	font-weight: 900;
	letter-spacing: 0.16em;
	padding: 9px 0;
	text-shadow: 0 1px 0 rgba(255,255,255,0.25);
	transition: filter 120ms, transform 80ms;
}
.ig-dmx__confetti:hover  { filter: brightness(1.08); }
.ig-dmx__confetti:active { transform: translateY(1px); }

/* Confetti burst — pieces shoot from each side toward center on an arc. */
.ig-hero__confetti-burst {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 5;
}
.ig-hero__confetti-piece {
	position: absolute;
	display: block;
	width: var(--cf-w, 6px);
	height: var(--cf-h, 11px);
	background: var(--cf-color, #fff);
	box-shadow: 0 0 6px var(--cf-color, #fff), 0 0 0 0.5px rgba(0,0,0,0.3);
	transform: rotate(var(--cf-rot-start, 0deg));
	animation: ig-confetti-fly var(--cf-dur, 2s) cubic-bezier(0.2, 0.7, 0.55, 0.95) forwards;
	will-change: transform, opacity;
}
@keyframes ig-confetti-fly {
	0%   { transform: translate(0, 0) rotate(var(--cf-rot-start));         opacity: 1; }
	35%  { transform: translate(calc(var(--cf-dx) * 0.55), var(--cf-dy));  opacity: 1; }
	80%  { opacity: 1; }
	100% { transform: translate(var(--cf-dx), calc(var(--cf-dy) * -1.3)) rotate(var(--cf-rot-end)); opacity: 0; }
}

.ig-dmx__smoke-ind {
	align-items: center;
	background: linear-gradient(180deg, #050505 0%, #0d0d0d 100%);
	border: 1px solid #000;
	border-radius: 2px;
	box-shadow: 0 0 0 1px #2a2a2a, 0 1px 0 #333 inset;
	color: #555;
	display: flex;
	font-family: var(--ig-font-mono);
	font-size: 9px;
	font-weight: 700;
	gap: 6px;
	letter-spacing: 0.1em;
	padding: 0 10px;
	transition: color 200ms ease;
}

.ig-dmx__smoke-ind-dot {
	background: #333;
	border-radius: 999px;
	box-shadow: 0 0 0 1px #000 inset;
	height: 8px;
	transition: background 200ms ease, box-shadow 200ms ease;
	width: 8px;
}

.ig-dmx__smoke-ind.is-heating {
	color: #ffb84d;
}
.ig-dmx__smoke-ind.is-heating .ig-dmx__smoke-ind-dot {
	animation: ig-smoke-heating 0.55s ease-in-out infinite alternate;
	background: #ffb84d;
}
@keyframes ig-smoke-heating {
	0%   { box-shadow: 0 0 1px #ffb84d, 0 0 0 1px #000 inset; opacity: 0.25; }
	100% { box-shadow: 0 0 8px #ffb84d, 0 0 12px rgba(255,184,77,0.6), 0 0 0 1px #000 inset; opacity: 1; }
}

.ig-dmx__smoke-ind.is-ready {
	color: #6dff7a;
}
.ig-dmx__smoke-ind.is-ready .ig-dmx__smoke-ind-dot {
	background: #6dff7a;
	box-shadow: 0 0 6px #6dff7a, 0 0 12px rgba(109,255,122,0.6), 0 0 0 1px #000 inset;
}

.ig-dmx__smoke-ind.is-firing {
	color: #fff;
}
.ig-dmx__smoke-ind.is-firing .ig-dmx__smoke-ind-dot {
	animation: ig-smoke-firing 0.4s ease-in-out infinite alternate;
	background: #ffffff;
}
@keyframes ig-smoke-firing {
	0%   { box-shadow: 0 0 4px #fff, 0 0 8px rgba(255,255,255,0.4), 0 0 0 1px #000 inset; }
	100% { box-shadow: 0 0 14px #fff, 0 0 22px rgba(255,255,255,0.85), 0 0 0 1px #000 inset; }
}

/* ============================================================
   LIGHT / MUSIC mode tabs — appear at the top of every panel
   ============================================================ */
.ig-deck-tabs {
	display: flex;
	gap: 0;
	margin: -14px -16px 12px;
	border-bottom: 1px solid #2a2a2a;
	background: linear-gradient(180deg, #1a1a1a 0%, #0c0c0c 100%);
}
.ig-deck-tabs__tab {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 9px 10px 8px;
	background: transparent;
	border: 0;
	border-right: 1px solid #2a2a2a;
	color: #777;
	cursor: pointer;
	font-family: var(--ig-font-mono);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	transition: color 120ms, background 120ms;
}
.ig-deck-tabs__tab:last-child { border-right: 0; }
.ig-deck-tabs__tab:hover { color: #d8d8d8; }
.ig-deck-tabs__tab.is-active {
	color: var(--ig-accent);
	background: linear-gradient(180deg, rgba(232,255,0,0.06) 0%, transparent 100%);
	box-shadow: inset 0 -2px 0 var(--ig-accent);
}
.ig-deck-tabs__dot {
	display: inline-block;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: #3a3a3a;
	transition: background 120ms, box-shadow 120ms;
}
.ig-deck-tabs__tab.is-active .ig-deck-tabs__dot {
	background: var(--ig-accent);
	box-shadow: 0 0 5px var(--ig-accent), 0 0 9px rgba(232,255,0,0.6);
}

/* ============================================================
   DJ deck (MUSIC mode) — visual scaffold; audio engine arrives
   in a later phase. All controls are real form inputs already
   so the wiring step is purely JS.
   ============================================================ */
.ig-dj__status {
	display: inline-flex;
	align-items: center;
	padding: 2px 6px;
	background: #0a0a0a;
	border: 1px solid #2a2a2a;
	color: var(--ig-accent);
	font-family: var(--ig-font-mono);
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.14em;
}

/* Two-decks-side-by-side grid — A | B */
.ig-dj-decks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	margin-top: 8px;
}
.ig-dj-deck {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 7px;
	background: linear-gradient(180deg, #161616 0%, #0d0d0d 100%);
	border: 1px solid #1f1f1f;
	border-radius: 2px;
	min-width: 0;
}

/* LCD display — pale-blue STN-style with dark text. Sits above the jog. */
.ig-dj-lcd {
	padding: 5px 7px;
	background:
		repeating-linear-gradient(0deg, rgba(0,0,0,0.04) 0 1px, transparent 1px 3px),
		linear-gradient(180deg, #c8dde8 0%, #a8c5d5 60%, #94b6c8 100%);
	border: 1px solid #050505;
	box-shadow:
		0 1px 0 rgba(255,255,255,0.45) inset,
		0 -1px 0 rgba(0,0,0,0.2) inset,
		0 1px 2px rgba(0,0,0,0.5);
	color: #0c2438;
	font-family: var(--ig-font-mono);
	font-weight: 800;
}
.ig-dj-lcd__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 6px;
	line-height: 1.25;
}
.ig-dj-lcd__row--title { margin-bottom: 2px; }
.ig-dj-lcd__title {
	font-size: 9px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
	flex: 1;
	text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
.ig-dj-lcd__row--meta { font-size: 9px; letter-spacing: 0.06em; }
.ig-dj-lcd__time { font-variant-numeric: tabular-nums; }
.ig-dj-lcd__sep { opacity: 0.45; margin: 0 2px; }
.ig-dj-lcd__bpm { font-variant-numeric: tabular-nums; opacity: 0.85; }
.ig-dj-lcd__bpm-unit { opacity: 0.6; margin-left: 3px; font-size: 8px; }

/* Jog wheel — auto-sized to deck column width, max 130px */
.ig-dj-jog {
	position: relative;
	width: 100%;
	max-width: 130px;
	margin: 0 auto;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: grab;
	touch-action: none;        /* let scratch use vertical drag without page scroll */
	user-select: none;
}
.ig-dj-jog.is-scratching { cursor: grabbing; }
.ig-dj-jog__ring {
	position: absolute; inset: 0;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 50%, #1a1a1a 0%, #050505 70%),
		repeating-conic-gradient(from 0deg, rgba(255,255,255,0.04) 0deg 3deg, transparent 3deg 6deg);
	border: 2px solid #0a0a0a;
	box-shadow: 0 0 0 1px #2a2a2a inset, 0 2px 0 #060606;
}
.ig-dj-jog__platter {
	position: absolute; inset: 14px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, #232323 0%, #0a0a0a 80%);
	border: 1px solid #303030;
	display: flex;
	align-items: flex-start;
	justify-content: center;
}
.ig-dj-deck.is-playing .ig-dj-jog__platter {
	animation: ig-dj-spin 1.8s linear infinite;
}
/* While the user is scratching, override the auto-spin and follow the finger. */
.ig-dj-jog.is-scratching .ig-dj-jog__platter {
	animation: none;
	transform: rotate(var(--scratch-angle, 0deg));
}
/* Subtle ring glow on touch to confirm contact */
.ig-dj-jog.is-scratching .ig-dj-jog__ring {
	box-shadow: 0 0 0 1px var(--ig-accent), 0 0 0 1px #2a2a2a inset, 0 2px 0 #060606;
}
.ig-dj-jog__marker {
	position: absolute;
	top: 4px; left: 50%;
	transform: translateX(-50%);
	width: 4px; height: 14px;
	background: var(--ig-accent);
	box-shadow: 0 0 4px var(--ig-accent), 0 0 8px rgba(232,255,0,0.6);
}
.ig-dj-jog__letter {
	position: relative;
	z-index: 1;
	color: #f5f5f5;
	font-family: var(--ig-font-display);
	font-size: 22px;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-shadow: 0 1px 0 #000;
}
@keyframes ig-dj-spin {
	to { transform: rotate(360deg); }
}

/* Transport row — PLAY (wide) + CUE (narrow) */
.ig-dj-deck__transport {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 4px;
}
.ig-dj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 6px 4px;
	background: linear-gradient(180deg, #2a2a2a 0%, #151515 100%);
	border: 1px solid #1a1a1a;
	color: #ddd;
	cursor: pointer;
	font-family: var(--ig-font-mono);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.1em;
	box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 -1px 0 #000 inset, 0 1px 0 #000;
	transition: background 120ms, color 120ms;
}
.ig-dj-btn svg { width: 10px; height: 10px; display: block; flex: 0 0 auto; }
.ig-dj-btn--cue  { color: #ffa53a; }
.ig-dj-btn:hover { background: linear-gradient(180deg, #383838 0%, #1c1c1c 100%); color: #fff; }
.ig-dj-btn[aria-pressed="true"] {
	background: linear-gradient(180deg, #4a4a00 0%, #1a1a00 100%);
	color: var(--ig-accent);
	box-shadow: 0 0 6px rgba(232,255,0,0.4) inset;
}
.ig-dj-btn__text { letter-spacing: 0.14em; }

/* Rotary knobs row — HI / MID / LOW per deck */
.ig-dj-knobs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
}
.ig-dj-knob {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	position: relative;
	cursor: ns-resize;
	user-select: none;
	touch-action: none;
}
.ig-dj-knob__face {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 35% 30%, #3a3a3a 0%, #1a1a1a 55%, #050505 100%);
	border: 1.5px solid #000;
	box-shadow:
		0 0 0 1.5px #2a2a2a,
		0 1px 0 rgba(255,255,255,0.08) inset,
		0 0 6px rgba(0,0,0,0.7);
	position: relative;
}
.ig-dj-knob__indicator {
	position: absolute;
	top: 2px;
	left: 50%;
	width: 2px;
	height: 9px;
	background: var(--ig-accent);
	box-shadow: 0 0 4px var(--ig-accent), 0 0 7px rgba(232,255,0,0.5);
	transform-origin: 1px 14px;
	transform: translateX(-50%) rotate(var(--knob-angle, 0deg));
}
.ig-dj-knob.is-dragging .ig-dj-knob__face {
	box-shadow:
		0 0 0 1.5px var(--ig-accent),
		0 1px 0 rgba(255,255,255,0.08) inset,
		0 0 8px rgba(232,255,0,0.5);
}
.ig-dj-knob__label {
	font-family: var(--ig-font-mono);
	font-size: 8px;
	font-weight: 800;
	letter-spacing: 0.14em;
	color: #888;
}
.ig-dj-knob__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}
.ig-dj-knob__input:focus + .ig-dj-knob__label,
.ig-dj-knob:has(.ig-dj-knob__input:focus) .ig-dj-knob__face {
	color: var(--ig-accent);
}
.ig-dj-knob:has(.ig-dj-knob__input:focus) .ig-dj-knob__face {
	box-shadow: 0 0 0 1.5px var(--ig-accent), 0 0 6px rgba(232,255,0,0.4);
}

/* Cross-fader — full-width horizontal between the two decks */
.ig-dj-xfade {
	margin-top: 10px;
	padding: 8px 10px 10px;
	background: linear-gradient(180deg, #0a0a0a 0%, #050505 100%);
	border: 1px solid #1f1f1f;
}
.ig-dj-xfade__labels {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #777;
	font-family: var(--ig-font-mono);
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.14em;
	margin-bottom: 6px;
}
.ig-dj-xfade__title {
	color: #aaa;
	letter-spacing: 0.22em;
}
.ig-dj-xfade__track input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 24px;
	background: transparent;
	cursor: pointer;
}
.ig-dj-xfade__track input[type="range"]::-webkit-slider-runnable-track {
	height: 8px;
	background:
		linear-gradient(90deg, var(--ig-accent) 0%, #4a4a00 30%, #000 50%, #4a4a00 70%, var(--ig-accent) 100%);
	border: 1px solid #050505;
	border-radius: 1px;
	box-shadow: 0 1px 2px #000 inset;
}
.ig-dj-xfade__track input[type="range"]::-moz-range-track {
	height: 8px;
	background:
		linear-gradient(90deg, var(--ig-accent) 0%, #4a4a00 30%, #000 50%, #4a4a00 70%, var(--ig-accent) 100%);
	border: 1px solid #050505;
}
.ig-dj-xfade__track input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 18px; height: 22px;
	margin-top: -8px;
	background: linear-gradient(180deg, #f8f8f8 0%, #999 50%, #555 100%);
	border: 1.5px solid #000;
	box-shadow: 0 0 4px rgba(232,255,0,0.5), 0 1px 0 rgba(255,255,255,0.3) inset;
	cursor: ew-resize;
}
.ig-dj-xfade__track input[type="range"]::-moz-range-thumb {
	width: 18px; height: 22px;
	background: linear-gradient(180deg, #f8f8f8 0%, #999 50%, #555 100%);
	border: 1.5px solid #000;
	cursor: ew-resize;
}

/* FX strip — 3 knob inputs + SYNC button */
.ig-dj-fx {
	margin-top: 10px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1.2fr;
	gap: 6px;
	padding: 8px;
	background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
	border: 1px solid #1f1f1f;
}
.ig-dj-fx__knob {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: center;
}
.ig-dj-fx__label {
	color: #888;
	font-family: var(--ig-font-mono);
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.14em;
}
.ig-dj-fx__knob input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 14px;
	background: transparent;
	cursor: pointer;
}
.ig-dj-fx__knob input[type="range"]::-webkit-slider-runnable-track {
	height: 3px;
	background: linear-gradient(90deg, #222 0%, var(--ig-accent) 50%, #222 100%);
	border: 1px solid #050505;
}
.ig-dj-fx__knob input[type="range"]::-moz-range-track {
	height: 3px;
	background: linear-gradient(90deg, #222 0%, var(--ig-accent) 50%, #222 100%);
	border: 1px solid #050505;
}
.ig-dj-fx__knob input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 8px; height: 12px;
	margin-top: -5px;
	background: #f0f0f0;
	border: 1px solid #000;
}
.ig-dj-fx__knob input[type="range"]::-moz-range-thumb {
	width: 8px; height: 12px;
	background: #f0f0f0;
	border: 1px solid #000;
}
.ig-dj-fx__sync {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 6px 4px;
	background: linear-gradient(180deg, #2a2a2a 0%, #0a0a0a 100%);
	border: 1px solid #000;
	color: #ccc;
	cursor: pointer;
	font-family: var(--ig-font-mono);
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.12em;
	box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 -1px 0 #000 inset;
}
.ig-dj-fx__sync-glyph { font-size: 13px; line-height: 1; }
.ig-dj-fx__sync:hover { color: #fff; }
.ig-dj-fx__sync[aria-pressed="true"] {
	background: linear-gradient(180deg, var(--ig-accent) 0%, #909500 100%);
	color: #000;
	box-shadow: 0 0 6px rgba(232,255,0,0.5);
}

/* ==========================================================================
   Hero smoke (fog machine)
   ========================================================================== */

.ig-hero__smoke {
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity 1.4s ease-out;
	z-index: 50;
}

.ig-hero[data-dmx-stage].is-smoking .ig-hero__smoke   { opacity: 1; transition: opacity 200ms ease-out; }
.ig-hero[data-dmx-stage].is-smoke-fade .ig-hero__smoke { opacity: 0; }

.ig-hero__smoke-emitter {
	bottom: 0;
	height: 100%;
	position: absolute;
	width: 60%;
}

.ig-hero__smoke-emitter--left  { left: -4%; }
.ig-hero__smoke-emitter--right { right: -4%; }

.ig-hero__smoke-emitter span {
	backface-visibility: hidden;
	background: radial-gradient(circle at 45% 40%,
		rgba(255,255,255,0.78) 0%,
		rgba(248,249,252,0.64) 25%,
		rgba(228,232,240,0.45) 45%,
		rgba(200,208,220,0.25) 65%,
		rgba(170,180,195,0.10) 80%,
		rgba(150,160,175,0) 92%);
	border-radius: 50%;
	bottom: 0;
	display: block;
	filter: blur(12px);
	height: 240px;
	opacity: 0;
	position: absolute;
	transform: translateZ(0);
	width: 240px;
	will-change: transform, opacity;
}

.ig-hero__smoke-emitter--left span  { left: -10px; }
.ig-hero__smoke-emitter--right span { right: -10px; }

.ig-hero[data-dmx-stage].is-smoking .ig-hero__smoke-emitter--left  span,
.ig-hero[data-dmx-stage].is-smoke-fade .ig-hero__smoke-emitter--left span {
	animation: ig-smoke-left 5.6s var(--puff-delay, 0s) cubic-bezier(0.22, 0.7, 0.28, 1) infinite;
}
.ig-hero[data-dmx-stage].is-smoking .ig-hero__smoke-emitter--right span,
.ig-hero[data-dmx-stage].is-smoke-fade .ig-hero__smoke-emitter--right span {
	animation: ig-smoke-right 5.6s var(--puff-delay, 0s) cubic-bezier(0.22, 0.7, 0.28, 1) infinite;
}

@keyframes ig-smoke-left {
	0% {
		opacity: 0;
		transform: translate3d(0, 0, 0) scale(calc(var(--puff-scale, 1) * 0.25));
	}
	7% {
		opacity: 0.85;
		transform: translate3d(80px, calc(var(--puff-jitter, 0) * 0.4px - 16px), 0) scale(calc(var(--puff-scale, 1) * 0.4));
	}
	40% {
		opacity: 0.72;
		transform: translate3d(34vw, calc(var(--puff-jitter, 0) * 1.1px - 80px), 0) scale(calc(var(--puff-scale, 1) * 1.2));
	}
	75% {
		opacity: 0.5;
		transform: translate3d(52vw, calc(var(--puff-jitter, 0) * 1.5px - 160px), 0) scale(calc(var(--puff-scale, 1) * 2));
	}
	92% {
		opacity: 0.18;
		transform: translate3d(60vw, calc(var(--puff-jitter, 0) * 1.7px - 200px), 0) scale(calc(var(--puff-scale, 1) * 2.4));
	}
	100% {
		opacity: 0;
		transform: translate3d(64vw, calc(var(--puff-jitter, 0) * 1.8px - 220px), 0) scale(calc(var(--puff-scale, 1) * 2.7));
	}
}

@keyframes ig-smoke-right {
	0% {
		opacity: 0;
		transform: translate3d(0, 0, 0) scale(calc(var(--puff-scale, 1) * 0.25));
	}
	7% {
		opacity: 0.85;
		transform: translate3d(-80px, calc(var(--puff-jitter, 0) * 0.4px - 16px), 0) scale(calc(var(--puff-scale, 1) * 0.4));
	}
	40% {
		opacity: 0.72;
		transform: translate3d(-34vw, calc(var(--puff-jitter, 0) * 1.1px - 80px), 0) scale(calc(var(--puff-scale, 1) * 1.2));
	}
	75% {
		opacity: 0.5;
		transform: translate3d(-52vw, calc(var(--puff-jitter, 0) * 1.5px - 160px), 0) scale(calc(var(--puff-scale, 1) * 2));
	}
	92% {
		opacity: 0.18;
		transform: translate3d(-60vw, calc(var(--puff-jitter, 0) * 1.7px - 200px), 0) scale(calc(var(--puff-scale, 1) * 2.4));
	}
	100% {
		opacity: 0;
		transform: translate3d(-64vw, calc(var(--puff-jitter, 0) * 1.8px - 220px), 0) scale(calc(var(--puff-scale, 1) * 2.7));
	}
}

@media (prefers-reduced-motion: reduce) {
	.ig-hero[data-dmx-stage].is-smoking .ig-hero__smoke-emitter span,
	.ig-hero[data-dmx-stage].is-smoke-fade .ig-hero__smoke-emitter span {
		animation: none;
		opacity: 0.4;
		transform: scale(2);
	}
}

.ig-ticker {
	background: var(--ig-accent);
	border-bottom: var(--ig-stroke-bold) solid var(--ig-line);
	color: var(--ig-accent-ink);
	font-family: var(--ig-font-mono);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	overflow: hidden;
	padding: 12px 0;
	text-transform: uppercase;
	white-space: nowrap;
}

.ig-ticker__track {
	animation: ig-ticker 28s linear infinite;
	display: inline-flex;
	gap: 48px;
	padding-left: var(--ig-gutter-x);
}

.ig-ticker__track span::after {
	color: var(--ig-accent-ink);
	content: " ★ ";
	margin: 0 16px;
}

@keyframes ig-ticker {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* ==========================================================================
   Sections (categories, featured products)
   ========================================================================== */

.ig-categories,
.ig-featured {
	border-bottom: var(--ig-stroke-bold) solid var(--ig-line);
	padding: var(--ig-gutter-y) 0;
}

/* Page-top reset — ZERO top spacing on every page-level container so the
   only thing that controls the H1's distance from the header is the
   .ig-page-head rule below. Change ONE value, every page moves together. */
.ig-container.ig-shop,
.ig-container.ig-checkout,
.ig-container.ig-account,
.ig-container.ig-quickbuy,
.ig-container.ig-static,
.ig-container.ig-contact,
.ig-container.ig-impresszum,
.ig-container.ig-legal,
.ig-container.ig-serial-check,
.ig-container.ig-brand-index,
.ig-container.ig-about,
.ig-container.ig-news-page {
	padding-top: 0;
}

/* Page-head — single source of truth for the top spacing of every page. */
.ig-page-head {
	padding-top: clamp(40px, 6vw, 88px);
	margin-bottom: 32px;
}

.ig-page-head h1 {
	font-size: clamp(48px, 7vw, 120px);
	line-height: 1;
	margin: 0;
}

.ig-page-head .ig-eyebrow {
	margin-bottom: 20px;
}

/* --shop is now redundant but kept as an explicit-intent hook. */
.ig-page-head--shop {}

.ig-section-head {
	align-items: end;
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(0, 1fr) auto;
	margin-bottom: 32px;
}

.ig-section-head h2 {
	margin: 0;
}

.ig-section-head .ig-button {
	min-height: 44px;
	padding: 0 18px;
}

.ig-category-grid {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.ig-category-tile {
	align-items: end;
	aspect-ratio: 4 / 5;
	background: var(--ig-paper);
	border: var(--ig-stroke-bold) solid var(--ig-line);
	color: var(--ig-ink);
	display: flex;
	font-family: var(--ig-font-display);
	font-size: clamp(20px, 2vw, 28px);
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 -1.5px -1.5px 0;
	overflow: hidden;
	padding: 18px;
	position: relative;
	text-transform: uppercase;
	transition: background 120ms ease, color 120ms ease;
}

.ig-category-tile__img {
	height: 100%;
	left: 0;
	object-fit: cover;
	position: absolute;
	top: 0;
	transition: transform 360ms ease, filter 240ms ease, opacity 240ms ease;
	width: 100%;
	z-index: 0;
}

.ig-category-tile.has-image::after {
	background: linear-gradient(180deg, rgba(10,10,10,0) 35%, rgba(10,10,10,0.78) 100%);
	content: "";
	inset: 0;
	position: absolute;
	z-index: 1;
}

.ig-category-tile.has-image span {
	align-items: flex-end;
	color: var(--ig-paper);
	display: flex;
	inset: 0;
	padding: 18px;
	position: absolute;
	transition: color 360ms ease;
	z-index: 2;
}

.ig-category-tile.has-image span::before {
	background: linear-gradient(180deg, rgba(232,255,0,0) 25%, rgba(232,255,0,0.92) 100%);
	content: "";
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity 360ms ease;
	z-index: -1;
}

.ig-category-tile::before {
	background: var(--ig-paper);
	border-bottom: var(--ig-stroke) solid var(--ig-line);
	border-right: var(--ig-stroke) solid var(--ig-line);
	content: attr(data-index);
	font-family: var(--ig-font-mono);
	font-size: 11px;
	left: 0;
	letter-spacing: 0.08em;
	padding: 6px 10px;
	position: absolute;
	top: 0;
	z-index: 2;
}

.ig-category-tile:hover {
	background: var(--ig-accent);
	color: var(--ig-accent-ink);
}

.ig-category-tile.has-image:hover .ig-category-tile__img {
	transform: scale(1.06);
	filter: saturate(1.15);
}

.ig-category-tile.has-image:hover span::before {
	opacity: 1;
}

.ig-category-tile.has-image:hover span {
	color: var(--ig-accent-ink);
}

/* ==========================================================================
   Product grid
   ========================================================================== */

.ig-product-grid {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.ig-product-card {
	background: var(--ig-paper);
	border: var(--ig-stroke-bold) solid var(--ig-line);
	display: grid;
	gap: 16px;
	margin: 0 -1.5px -1.5px 0;
	padding: 22px;
	position: relative;
	transition: transform 120ms ease;
}

.ig-product-card__media-wrap {
	position: relative;
}

.ig-product-card__media {
	aspect-ratio: 4 / 3;
	background: transparent;
	border: var(--ig-stroke) solid var(--ig-line);
	display: block;
	overflow: hidden;
	position: relative;
}

.ig-product-card__media img {
	height: 100%;
	object-fit: contain;
	transition: transform 220ms ease;
	width: 100%;
}

.ig-product-card:hover .ig-product-card__media img {
	transform: scale(1.04);
}

.ig-product-card__placeholder {
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.ig-product-card__sku {
	color: var(--ig-muted);
	font-family: var(--ig-font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ig-product-card h3 {
	font-size: 18px;
	letter-spacing: -0.01em;
	line-height: 1.15;
	margin: 0;
	text-transform: none;
}

.ig-product-card__price {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	font-family: var(--ig-font-display);
	font-size: 26px;
	font-weight: 800;
	gap: 8px;
	margin: 0;
}

.ig-product-card__price small {
	color: var(--ig-muted);
	font-family: var(--ig-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ig-product-card__strike {
	color: var(--ig-muted);
	font-size: 0.6em;
	font-weight: 600;
	margin-right: 8px;
	text-decoration-thickness: 2px;
}

.ig-product-card__pricetag {
	background: var(--ig-ink);
	color: var(--ig-paper);
	display: inline-block;
	font-family: var(--ig-font-mono);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.1em;
	margin-bottom: 4px;
	padding: 3px 7px;
	text-transform: uppercase;
}

.ig-product-card__amount {
	display: inline-block;
}

.ig-product-card__amount.is-muted {
	color: var(--ig-muted);
}

.ig-product-card__price--empty {
	color: var(--ig-muted);
	font-size: 14px;
	min-height: 56px;
}

.ig-product-card__stock {
	border: var(--ig-stroke) solid var(--ig-line);
	font-family: var(--ig-font-mono);
	font-size: 10px;
	font-weight: 800;
	left: 10px;
	letter-spacing: 0.08em;
	line-height: 1;
	padding: 5px 8px;
	position: absolute;
	text-transform: uppercase;
	top: 10px;
	z-index: 2;
}

.ig-product-card__stock.is-stock-in   { background: #15803D; color: #fff; }
.ig-product-card__stock.is-stock-low  { background: #f5b800; color: #0a0a0a; }
.ig-product-card__stock.is-stock-last { background: #f5b800; color: #0a0a0a; }
.ig-product-card__stock.is-stock-oos  { background: #e11d48; color: #fff; }

.ig-product-card__sale {
	background: #f5b800;
	border: var(--ig-stroke) solid var(--ig-line);
	color: #0a0a0a;
	font-family: var(--ig-font-mono);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1;
	padding: 5px 8px;
	position: absolute;
	right: 10px;
	text-transform: uppercase;
	top: 10px;
	z-index: 2;
}

.ig-product-card__cta {
	display: flex;
	gap: 8px;
}

.ig-product-card__cta .ig-button {
	flex: 1;
	min-height: 44px;
	padding: 0 16px;
}

.ig-product-card .ig-error,
.ig-product-card .ig-notice {
	font-family: var(--ig-font-mono);
	font-size: 12px;
	margin: 0;
	padding: 8px 10px;
}

/* ==========================================================================
   Shop layout
   ========================================================================== */

.ig-breadcrumb {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	font-family: var(--ig-font-mono);
	font-size: 12px;
	font-weight: 600;
	gap: 6px;
	letter-spacing: 0.08em;
	margin-bottom: 24px;
	text-transform: uppercase;
}

.ig-breadcrumb a {
	color: var(--ig-muted);
}

.ig-breadcrumb a:hover {
	background: var(--ig-accent);
	color: var(--ig-accent-ink);
	padding: 0 4px;
}

.ig-breadcrumb span {
	color: var(--ig-ink);
}

.ig-breadcrumb span[aria-current="page"] {
	background: var(--ig-ink);
	color: var(--ig-paper);
	padding: 2px 8px;
}

.ig-breadcrumb i {
	color: var(--ig-muted);
	font-style: normal;
	font-weight: 400;
	opacity: 0.5;
}

.ig-shop {
	border-bottom: var(--ig-stroke-bold) solid var(--ig-line);
	padding-top: 0;
	padding-bottom: 56px;
	position: relative;
}

.ig-shop__spinner {
	background: var(--ig-accent);
	border: var(--ig-stroke-bold) solid var(--ig-line);
	color: var(--ig-accent-ink);
	font-family: var(--ig-font-mono);
	font-size: 12px;
	font-weight: 700;
	left: 50%;
	letter-spacing: 0.1em;
	padding: 10px 18px;
	position: fixed;
	text-transform: uppercase;
	top: 100px;
	transform: translateX(-50%);
	z-index: 100;
}

.ig-shop__loadmore-wrap {
	display: flex;
	justify-content: center;
	margin: clamp(28px, 4vw, 56px) 0 0;
}

.ig-shop__loadmore-wrap[hidden] { display: none; }

.ig-shop__loadmore {
	letter-spacing: 0.08em;
	min-width: 240px;
	text-transform: uppercase;
}

/* Floating filter FAB + bottom sheet (mobile only) */
.ig-shop-fab-dock,
.ig-shop-fab,
.ig-shop-sheet-backdrop,
.ig-shop__sidebar-close,
.ig-cart-fab-dock {
	display: none;
}

@media (max-width: 880px) {
	.ig-cart-fab-dock {
		align-items: center;
		bottom: 18px;
		display: flex;
		justify-content: space-between;
		left: 18px;
		pointer-events: none;
		position: fixed;
		right: 18px;
		z-index: 20;
	}
	.ig-cart-fab-dock[hidden] { display: none !important; }

	.ig-cart-fab-dock > * {
		pointer-events: auto;
	}

	/* Hide the inline checkout button + total on mobile — the sticky dock
	   replaces them. Both come back on desktop. */
	.ig-checkout form .ig-total,
	.ig-checkout form .ig-actions {
		display: none;
	}

	/* Bottom padding so the fixed dock doesn't cover the last content row. */
	.ig-checkout:has([data-cart-fab]),
	.ig-shop:has(.ig-shop-fab-dock) {
		padding-bottom: 100px;
	}

	.ig-cart-fab {
		align-items: center;
		background: var(--ig-ink);
		border: var(--ig-stroke-bold) solid var(--ig-line);
		box-shadow: 4px 4px 0 var(--ig-accent);
		color: var(--ig-paper);
		display: inline-flex;
		font-family: var(--ig-font-mono);
		font-size: 13px;
		font-weight: 800;
		letter-spacing: 0.08em;
		padding: 14px 18px;
		text-decoration: none;
		text-transform: uppercase;
		transition: background 160ms ease, color 160ms ease, transform 80ms ease, box-shadow 120ms ease;
	}

	.ig-cart-fab:hover {
		background: var(--ig-accent);
		color: var(--ig-accent-ink);
	}

	.ig-cart-fab:active {
		box-shadow: 2px 2px 0 var(--ig-accent);
		transform: translate(2px, 2px);
	}

	.ig-cart-fab-total {
		align-items: baseline;
		background: var(--ig-accent);
		border: var(--ig-stroke-bold) solid var(--ig-line);
		box-shadow: -4px 4px 0 var(--ig-ink);
		color: var(--ig-accent-ink);
		display: inline-flex;
		gap: 10px;
		padding: 10px 14px;
	}

	.ig-cart-fab-total__label {
		font-family: var(--ig-font-mono);
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 0.1em;
		opacity: 0.65;
		text-transform: uppercase;
	}

	.ig-cart-fab-total strong {
		font-family: var(--ig-font-display);
		font-size: 18px;
		font-weight: 900;
		letter-spacing: -0.01em;
		line-height: 1;
		white-space: nowrap;
	}

}

@media (max-width: 880px) {
	.ig-shop-fab-dock {
		bottom: 18px;
		display: block;
		left: 18px;
		pointer-events: none;
		position: fixed;
		right: 18px;
		z-index: 20;
	}

	.ig-shop-fab {
		align-items: center;
		background: var(--ig-ink);
		border: var(--ig-stroke-bold) solid var(--ig-line);
		box-shadow: 4px 4px 0 var(--ig-accent);
		color: var(--ig-paper);
		cursor: pointer;
		display: inline-flex;
		font-family: var(--ig-font-mono);
		font-size: 13px;
		font-weight: 800;
		gap: 10px;
		letter-spacing: 0.08em;
		padding: 14px 18px;
		pointer-events: auto;
		position: relative;
		text-transform: uppercase;
		transition: background 160ms ease, color 160ms ease, transform 80ms ease;
	}

	.ig-shop-fab:hover,
	.ig-shop-fab[aria-expanded="true"] {
		background: var(--ig-accent);
		color: var(--ig-accent-ink);
	}

	.ig-shop-fab:active {
		transform: translate(2px, 2px);
	}

	.ig-shop-fab svg {
		height: 18px;
		width: 18px;
	}

	.ig-shop-fab__badge {
		background: var(--ig-accent);
		border: var(--ig-stroke) solid var(--ig-line);
		color: var(--ig-accent-ink);
		font-size: 11px;
		font-weight: 800;
		min-width: 20px;
		padding: 2px 6px;
		text-align: center;
	}

	.ig-shop-fab__badge[hidden] {
		display: none;
	}

	.ig-shop-fab:hover .ig-shop-fab__badge,
	.ig-shop-fab[aria-expanded="true"] .ig-shop-fab__badge {
		background: var(--ig-ink);
		color: var(--ig-accent);
	}

	.ig-shop-sheet-backdrop {
		background: rgba(0, 0, 0, 0.55);
		display: block;
		inset: 0;
		opacity: 0;
		pointer-events: none;
		position: fixed;
		transition: opacity 240ms ease, visibility 0s linear 240ms;
		visibility: hidden;
		z-index: 95;
	}

	.ig-shop-sheet-backdrop.is-open {
		opacity: 1;
		pointer-events: auto;
		transition: opacity 240ms ease, visibility 0s linear 0s;
		visibility: visible;
	}

	/* Sidebar becomes a bottom slide-up sheet — selectors are scoped under
	   .ig-shop so they beat the base desktop rule that comes later in the file. */
	.ig-shop .ig-shop__sidebar {
		background: var(--ig-paper);
		border: var(--ig-stroke-bold) solid var(--ig-line);
		border-bottom: 0;
		bottom: 0;
		left: 0;
		max-height: 88vh;
		max-width: none;
		overflow-y: auto;
		padding: 68px 24px 32px;
		position: fixed;
		right: 0;
		transform: translateY(100%);
		transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
		z-index: 96;
	}

	.ig-shop .ig-shop__sidebar > h2 {
		margin-top: 0;
	}

	.ig-shop .ig-shop__sidebar .ig-shop__filters {
		padding-top: 24px;
	}

	.ig-shop .ig-shop__sidebar .ig-shop__filter {
		padding: 0;
	}

	.ig-shop .ig-shop__sidebar.is-open {
		transform: translateY(0);
	}

	.ig-shop__sidebar-close {
		align-items: center;
		background: var(--ig-ink);
		border: var(--ig-stroke) solid var(--ig-line);
		color: var(--ig-paper);
		cursor: pointer;
		display: flex;
		height: 44px;
		justify-content: center;
		padding: 0;
		position: absolute;
		right: 16px;
		top: 16px;
		width: 44px;
		z-index: 1;
	}

	.ig-shop__sidebar-close svg {
		height: 20px;
		width: 20px;
	}

	.ig-shop__sidebar-close:hover {
		background: var(--ig-accent);
		color: var(--ig-accent-ink);
	}
}

.ig-shop__layout {
	display: grid;
	gap: 0;
	grid-template-columns: 280px minmax(0, 1fr);
}

.ig-shop__sidebar {
	border-right: var(--ig-stroke-bold) solid var(--ig-line);
	padding: 0 32px 0 0;
}

.ig-shop__sidebar h2 {
	font-size: 14px;
	letter-spacing: var(--ig-tracking-eyebrow);
	margin: 0 0 16px;
}

.ig-cat-tree,
.ig-cat-tree ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ig-cat-tree ul {
	border-left: var(--ig-stroke) solid var(--ig-line);
	margin-left: 8px;
	padding-left: 12px;
}

.ig-cat-tree a {
	color: var(--ig-ink);
	display: block;
	font-family: var(--ig-font-mono);
	font-size: 13px;
	padding: 8px 0;
	position: relative;
	text-transform: uppercase;
}

.ig-cat-tree a:hover,
.ig-cat-tree a.is-active {
	background: var(--ig-accent);
	color: var(--ig-accent-ink);
	padding-left: 6px;
}

.ig-shop__main {
	padding-left: 32px;
}

.ig-shop__filters {
	border-top: var(--ig-stroke) solid var(--ig-line);
	display: grid;
	gap: 24px;
	margin-top: 28px;
	padding-top: 24px;
}

.ig-shop__filter h2 {
	font-size: 13px;
	letter-spacing: var(--ig-tracking-eyebrow);
	margin: 0 0 10px;
}

.ig-shop__filter input[type="search"],
.ig-shop__sort {
	background: var(--ig-bone);
	border: var(--ig-stroke) solid var(--ig-line);
	border-radius: 0;
	font-family: var(--ig-font-mono);
	font-size: 16px;
	min-height: 44px;
	padding: 0 12px;
	width: 100%;
}

.ig-shop__sort {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%230a0a0a' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-position: right 12px center;
	background-repeat: no-repeat;
	background-size: 12px 8px;
	cursor: pointer;
	padding-right: 36px;
}

.ig-shop__check {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-family: var(--ig-font-mono);
	font-size: 13px;
	gap: 8px;
	padding: 4px 0;
}

.ig-shop__check input[type="checkbox"] {
	accent-color: var(--ig-accent);
	height: 16px;
	width: 16px;
}

.ig-shop__brands {
	list-style: none;
	margin: 0;
	max-height: 220px;
	overflow-y: auto;
	padding: 0 4px 0 0;
}

.ig-shop__brands::-webkit-scrollbar {
	width: 6px;
}

.ig-shop__brands::-webkit-scrollbar-thumb {
	background: var(--ig-ink);
}

.ig-shop__filter-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ig-shop__filter-actions .ig-button {
	min-height: 44px;
	padding: 0 14px;
	width: 100%;
}

.ig-shop__reset {
	color: var(--ig-muted);
	font-family: var(--ig-font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-align: center;
	text-decoration: underline;
	text-transform: uppercase;
}

.ig-shop__reset:hover {
	color: var(--ig-ink);
}

.ig-shop__toolbar {
	align-items: end;
	display: flex;
	justify-content: space-between;
	margin-bottom: 24px;
}

.ig-shop__toolbar h1 {
	font-size: clamp(36px, 5vw, 72px);
	margin: 0;
}

/* ==========================================================================
   Cart / Checkout
   ========================================================================== */

.ig-checkout {
	border-bottom: var(--ig-stroke-bold) solid var(--ig-line);
	padding-top: 0;
	padding-bottom: 56px;
}

.ig-checkout h1 {
	font-size: clamp(36px, 6vw, 90px);
	margin: 0 0 32px;
}

/* ==========================================================================
   Empty cart panel
   ========================================================================== */

.ig-empty-cart[hidden] {
	display: none;
}

.ig-empty-cart__head {
	background: var(--ig-paper);
	border: var(--ig-stroke-bold) solid var(--ig-line);
	box-shadow: 6px 6px 0 var(--ig-ink);
	margin-bottom: 48px;
	padding: 40px;
}

.ig-empty-cart__head h2 {
	font-family: var(--ig-font-display);
	font-size: clamp(32px, 5vw, 64px);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 0.95;
	margin: 6px 0 14px;
}

.ig-empty-cart__lead {
	color: var(--ig-muted);
	font-size: 15px;
	line-height: 1.55;
	margin: 0 0 22px;
	max-width: 60ch;
}

.ig-empty-cart__head .ig-actions {
	margin-top: 4px;
}

.ig-empty-cart__grid {
	margin-top: 0;
}

@media (max-width: 720px) {
	.ig-empty-cart__head {
		box-shadow: 3px 3px 0 var(--ig-ink);
		margin-bottom: 32px;
		padding: 26px 22px;
	}
}

.ig-table {
	border: var(--ig-stroke-bold) solid var(--ig-line);
	border-collapse: collapse;
	width: 100%;
}

.ig-table th,
.ig-table td {
	border-bottom: var(--ig-stroke) solid var(--ig-line);
	padding: 14px;
	text-align: left;
	vertical-align: middle;
}

.ig-table th {
	background: var(--ig-ink);
	color: var(--ig-paper);
	font-family: var(--ig-font-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Kosár tábla: meta sor (SKU + max-figyelmeztetés) — abszolút pozícióban
   a név alatt, így a tartalma SOSE nyújtja meg a sor magasságát. Akár
   van „Max N db raktáron" üzenet, akár nincs, a sor egységes marad. */
.ig-table[data-cart-table] tr[data-cart-row] > td:nth-child(1) {
	position: relative;
	padding-bottom: 28px;        /* ← helyet hagyunk a meta sornak */
}

.ig-cart-row__meta {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 8px;
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: nowrap;
	overflow: hidden;
	font-family: var(--ig-font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	line-height: 1;
	white-space: nowrap;
}

.ig-cart-row__sku {
	color: var(--ig-muted, #6B6B6B);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-overflow: ellipsis;
	overflow: hidden;
}

.ig-cart-row__max {
	background: #c02323;
	color: #fff;
	padding: 3px 8px;
	font-weight: 700;
	letter-spacing: 0.04em;
	flex-shrink: 0;
}

/* Kosár tábla: a Nettó / Bruttó oszlopok fix szélesek + jobbra zárt
   monospace szám — így a sorok NEM ugrálnak, ha tizedessé / nagyobbá
   változik a formattált ár. Az 5 oszlop: Termék, Mennyiség, Nettó,
   Bruttó, Eltávolítás. (Az oszlopindexek nth-child kompatibilisek
   thead-del és tbody-vel egyaránt.) */
.ig-table[data-cart-table] th:nth-child(3),
.ig-table[data-cart-table] th:nth-child(4),
.ig-table[data-cart-table] td:nth-child(3),
.ig-table[data-cart-table] td:nth-child(4) {
	min-width: 140px;
	width: 140px;
	text-align: right;
	font-family: var(--ig-font-mono);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	white-space: nowrap;
}

.ig-table[data-cart-table] td:nth-child(3),
.ig-table[data-cart-table] td:nth-child(4) {
	font-size: 14px;
}

.ig-table input[type="number"] {
	background: var(--ig-bone);
	border: var(--ig-stroke) solid var(--ig-line);
	border-radius: 0;
	font-family: var(--ig-font-mono);
	font-weight: 700;
	min-height: 40px;
	padding: 0 10px;
	width: 88px;
}

.ig-qty {
	border: var(--ig-stroke-bold) solid var(--ig-line);
	display: inline-flex;
	align-items: stretch;
	background: var(--ig-paper);
}

.ig-qty__btn {
	background: var(--ig-paper);
	border: 0;
	border-right: var(--ig-stroke) solid var(--ig-line);
	color: var(--ig-ink);
	cursor: pointer;
	font-family: var(--ig-font-display);
	font-size: 18px;
	font-weight: 900;
	line-height: 1;
	min-height: 44px;
	padding: 0;
	touch-action: manipulation;
	transition: background 120ms ease, color 120ms ease;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	width: 44px;
}

.ig-qty__btn:last-child {
	border-right: 0;
}

.ig-qty__btn:hover {
	background: var(--ig-accent);
}

.ig-qty__btn:disabled,
.ig-qty__btn[disabled] {
	background: var(--ig-paper);
	color: var(--ig-muted);
	cursor: not-allowed;
	opacity: 0.35;
	pointer-events: none;
}

.ig-cart-row__remove-cell {
	text-align: right;
	width: 1%;
	white-space: nowrap;
}

.ig-cart-row__remove {
	align-items: center;
	background: var(--ig-danger);
	border: 0;
	border-radius: 999px;
	box-shadow: 0 0 0 2px var(--ig-line);
	color: var(--ig-paper);
	cursor: pointer;
	display: inline-flex;
	height: 32px;
	justify-content: center;
	padding: 0;
	touch-action: manipulation;
	transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	width: 32px;
}

.ig-cart-row__remove svg {
	height: 16px;
	width: 16px;
}

.ig-cart-row__remove:hover,
.ig-cart-row__remove:focus-visible {
	background: var(--ig-ink);
	box-shadow: 0 0 0 2px var(--ig-danger);
	outline: none;
	transform: scale(1.08);
}

.ig-table input.ig-qty__input,
.ig-qty__input {
	background: var(--ig-paper);
	border: 0;
	border-right: var(--ig-stroke) solid var(--ig-line);
	border-radius: 0;
	color: var(--ig-ink);
	font-family: var(--ig-font-display);
	font-size: 18px;
	font-weight: 800;
	-moz-appearance: textfield;
	min-height: 44px;
	padding: 0;
	text-align: center;
	width: 56px;
}

.ig-qty__input::-webkit-outer-spin-button,
.ig-qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.ig-qty__input:focus {
	background: var(--ig-bone);
	outline: 0;
}

.ig-total {
	font-family: var(--ig-font-display);
	font-size: clamp(24px, 3vw, 44px);
	font-weight: 900;
	margin: 24px 0 0;
	text-align: right;
}

.ig-form-grid {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ig-fieldset {
	background: var(--ig-paper);
	border: var(--ig-stroke-bold) solid var(--ig-line);
	display: grid;
	/* Explicit 2 oszlop. Korábban nem volt megadva → a böngésző IMPLICIT
	   `auto` oszlopokat gyártott a `grid-column: span 2` elemek miatt, és az
	   auto track a tartalomhoz zsugorodott. Emiatt lett pl. az adószám mező
	   milliméteres a Cégadatok panelben. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 0 -1.5px -1.5px 0;
	padding: 24px;
}

.ig-fieldset legend {
	background: var(--ig-ink);
	color: var(--ig-paper);
	font-family: var(--ig-font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: var(--ig-tracking-eyebrow);
	margin: 0 0 4px;
	padding: 4px 10px;
	text-transform: uppercase;
}

.ig-fieldset label {
	display: grid;
	gap: 6px;
}

.ig-fieldset label > span {
	color: var(--ig-ink);
	font-family: var(--ig-font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ig-fieldset input[type="text"],
.ig-fieldset input[type="email"],
.ig-fieldset input[type="tel"],
.ig-fieldset input:not([type]),
.ig-fieldset select {
	background: var(--ig-bone);
	border: var(--ig-stroke) solid var(--ig-line);
	border-radius: 0;
	font-family: var(--ig-font-mono);
	font-size: 16px;
	min-height: 44px;
	padding: 0 12px;
	width: 100%;
}

/* Nem csak <label>-re — a Cégadatok panel egy <div class="ig-span-2">, az is
   teljes szélességet kap. */
.ig-fieldset > .ig-span-2 {
	grid-column: 1 / -1;
}

/* Cégadatok toggle a számlázási címben — sárga sáv checkboxxal. */
.ig-billing-toggle {
	align-items: center;
	background: var(--ig-bone);
	border: var(--ig-stroke) solid var(--ig-line);
	cursor: pointer;
	display: flex !important;
	gap: 12px;
	grid-column: span 2;
	padding: 12px 14px;
	transition: background 0.15s ease;
}

.ig-billing-toggle:hover {
	background: var(--ig-accent);
}

.ig-billing-toggle input[type="checkbox"] {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	accent-color: var(--ig-ink);
	cursor: pointer;
}

.ig-billing-toggle > span {
	font-family: var(--ig-font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Cégadatok panel — animált nyit/csuk a CSS Grid 0fr → 1fr trükkel.
   Akkor sem ugrik a layout, ha a böngésző nem támogatja az animációt. */
.ig-billing-company {
	display: grid;
	grid-template-rows: 0fr;
	overflow: hidden;
	transition: grid-template-rows 0.32s ease, opacity 0.25s ease, margin-top 0.32s ease;
	opacity: 0;
	margin-top: 0;
}

.ig-billing-company.is-open {
	grid-template-rows: 1fr;
	opacity: 1;
}

.ig-billing-company__inner {
	min-height: 0;
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* A cellák a saját tartalmuk magasságát vegyék fel. Alapból `stretch` van,
	   ezért a Cégnév mező a szomszédos adószám-cella (input + Ellenőrzés gomb
	   + hibaüzenet) magasságára hízott — így lett belőle nagy üres doboz. */
	align-items: start;
}

/* Ugyanezért: a label maga is grid, a sorai se nyúljanak szét. */
.ig-billing-company__inner > label { align-content: start; }

@media (max-width: 640px) {
	.ig-billing-company__inner {
		grid-template-columns: 1fr;
	}
}

.ig-shipping-toggle {
	background: var(--ig-bone);
	border: var(--ig-stroke) solid var(--ig-line);
	grid-column: span 2;
	padding: 18px 22px;
}

.ig-shipping-toggle label {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-family: var(--ig-font-mono);
	font-size: 13px;
	font-weight: 700;
	gap: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ig-shipping-toggle input[type="checkbox"] {
	accent-color: var(--ig-accent);
	height: 20px;
	width: 20px;
}

.ig-shipping-block {
	grid-column: span 2;
}

.ig-shipping-block[hidden] {
	display: none;
}

.ig-error,
.ig-notice {
	background: var(--ig-paper);
	border: var(--ig-stroke) solid var(--ig-line);
	border-radius: 0;
	font-family: var(--ig-font-mono);
	margin: 0 0 18px;
	padding: 14px 18px;
}

.ig-error {
	background: var(--ig-danger);
	border-color: var(--ig-danger);
	color: var(--ig-paper);
}

.ig-notice strong {
	background: var(--ig-accent);
	color: var(--ig-accent-ink);
	padding: 0 6px;
}

/* ==========================================================================

/* Ország-eltérés a pénztárban: az árak ÁFÁ-ja a fejléc országához kötött —
   itt szólunk, és egy kattintással átváltunk. */
.ig-country-switch {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 4px 0 10px;
	padding: 12px 16px;
	border: 2px solid var(--ig-ink, #14140f);
	border-left-width: 6px;
	background: #fffbe6;
}

.ig-country-switch p { margin: 0; flex: 1 1 260px; font-size: 14px; line-height: 1.5; }
.ig-country-switch button { flex: 0 0 auto; white-space: nowrap; }

/* Közösségi adómentesség jelzése: a vevő lássa, hogy tényleg 0% az ÁFA. */
.ig-summary__eu { color: #14a04a; font-weight: 700; }
.ig-product-page__vatchip--eu { background: #14a04a; color: #fff; border-color: #14a04a; }
   Single product
   ========================================================================== */

/* ==========================================================================
   Single product page (new)
   ========================================================================== */

.ig-product-page {
	padding-top: 32px;
	padding-bottom: 96px;
}

.ig-product-page__head {
	border-bottom: var(--ig-stroke-bold) solid var(--ig-line);
	margin-bottom: 40px;
	padding-bottom: 32px;
}

.ig-product-page__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
}

.ig-product-page__brand {
	background: var(--ig-ink);
	color: var(--ig-paper);
	font-family: var(--ig-font-mono);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.12em;
	padding: 6px 10px;
	text-transform: uppercase;
}

.ig-product-page__cat {
	background: var(--ig-paper);
	border: var(--ig-stroke) solid var(--ig-line);
	color: var(--ig-ink);
	font-family: var(--ig-font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	padding: 6px 10px;
	text-transform: uppercase;
	transition: background 120ms ease, color 120ms ease;
}

.ig-product-page__cat:hover {
	background: var(--ig-accent);
	color: var(--ig-accent-ink);
}

.ig-product-page__head h1 {
	font-size: clamp(34px, 5vw, 64px);
	line-height: 1;
	margin: 0 0 14px;
}

.ig-product-page__sku {
	color: var(--ig-muted);
	font-family: var(--ig-font-mono);
	font-size: 13px;
	letter-spacing: 0.04em;
	margin: 0 0 18px;
	text-transform: uppercase;
}

.ig-product-page__sku strong {
	color: var(--ig-ink);
	font-weight: 700;
}

.ig-product-page__lead {
	font-family: var(--ig-font-display);
	font-size: clamp(16px, 1.4vw, 20px);
	font-weight: 500;
	line-height: 1.4;
	margin: 0;
	max-width: 60ch;
}

.ig-product-page__main {
	display: grid;
	gap: 0;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

.ig-product-page__media {
	border: var(--ig-stroke-bold) solid var(--ig-line);
	border-right: 0;
	padding: 24px;
}

.ig-product-page__hero {
	aspect-ratio: 4 / 3;
	background: var(--ig-paper);
	display: flex;
	margin-bottom: 16px;
	overflow: hidden;
}

.ig-product-page__hero img {
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.ig-product-page__hero-zoom {
	background: transparent;
	border: 0;
	cursor: zoom-in;
	display: block;
	height: 100%;
	padding: 0;
	position: relative;
	width: 100%;
}

.ig-product-page__hero-icon {
	align-items: center;
	background: var(--ig-ink);
	border: var(--ig-stroke-bold) solid var(--ig-line);
	bottom: 12px;
	color: var(--ig-paper);
	display: inline-flex;
	height: 40px;
	justify-content: center;
	pointer-events: none;
	position: absolute;
	right: 12px;
	transition: background 160ms ease, color 160ms ease;
	width: 40px;
}

.ig-product-page__hero-icon svg {
	height: 22px;
	width: 22px;
}

.ig-product-page__hero-zoom:hover .ig-product-page__hero-icon {
	background: var(--ig-accent);
	color: var(--ig-accent-ink);
}

/* ==========================================================================
   Image lightbox
   ========================================================================== */

.ig-lightbox {
	/* Világos, "galéria" hangulatú overlay — tömör fehér, hogy a mögötte lévő
	   oldal ne üssön át; a hangulatot a két elmosott fénycsóva adja. */
	background: #fff;
	inset: 0;
	display: flex;
	opacity: 0;
	position: fixed;
	transition: opacity 240ms ease;
	z-index: 10000;
	overflow: hidden;                 /* a fénycsóvák ne okozzanak görgetést */
}

.ig-lightbox[hidden] { display: none; }
.ig-lightbox.is-open { opacity: 1; }

/* ── Fénycsóvák: két elmosott kör, időben eltolva úszik be, majd lassan mozog,
   mintha intelligens lámpák pásztáznának. Tisztán dekoratív. ── */
.ig-lightbox__glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(64px);
	opacity: 0;
	pointer-events: none;
	will-change: transform, opacity;
}
.ig-lightbox__glow--a {
	width: 56vmin; height: 56vmin;
	left: -10vmin; top: -8vmin;
	background: var(--ig-accent);                     /* téma-sárga */
	animation: igGlowIn 900ms ease 120ms forwards,
	           igGlowDriftA 32s ease-in-out 1s infinite alternate;
}
.ig-lightbox__glow--b {
	width: 46vmin; height: 46vmin;
	right: -8vmin; bottom: -10vmin;
	background: #4DA3FF;                              /* hideg kék ellenpont */
	animation: igGlowIn 900ms ease 620ms forwards,
	           igGlowDriftB 44s ease-in-out 1.6s infinite alternate;
}
@keyframes igGlowIn   { to { opacity: .55; } }
@keyframes igGlowDriftA { from { transform: translate3d(0,0,0)      scale(1);    }
                          to   { transform: translate3d(26vmin,16vmin,0) scale(1.18); } }
@keyframes igGlowDriftB { from { transform: translate3d(0,0,0)      scale(1.06); }
                          to   { transform: translate3d(-22vmin,-14vmin,0) scale(1);  } }
@media (prefers-reduced-motion: reduce) {
	.ig-lightbox__glow--a, .ig-lightbox__glow--b { animation: igGlowIn 1ms linear forwards; }
}

.ig-lightbox__close,
.ig-lightbox__nav {
	align-items: center;
	background: rgba(255, 255, 255, 0.82);
	border: 2px solid var(--ig-ink);
	color: var(--ig-ink);
	cursor: pointer;
	display: inline-flex;
	height: 52px; width: 52px;
	justify-content: center;
	padding: 0;
	position: absolute;
	transition: background 160ms ease, transform 160ms ease;
	z-index: 3;
	backdrop-filter: blur(4px);
}
.ig-lightbox__close { right: 16px; top: 16px; }
.ig-lightbox__close svg, .ig-lightbox__nav svg { height: 24px; width: 24px; }
.ig-lightbox__close:hover, .ig-lightbox__nav:hover { background: var(--ig-accent); }
.ig-lightbox__close:active, .ig-lightbox__nav:active { transform: scale(.94); }

.ig-lightbox__nav { top: 50%; transform: translateY(-50%); }
.ig-lightbox__nav:active { transform: translateY(-50%) scale(.94); }
.ig-lightbox__nav--prev { left: 16px; }
.ig-lightbox__nav--next { right: 16px; }
.ig-lightbox__nav[hidden] { display: none; }

.ig-lightbox__stage {
	position: relative;
	z-index: 2;
	align-items: center;
	display: flex;
	flex: 1;
	justify-content: center;
	padding: 72px 16px 64px;
	touch-action: pan-y pinch-zoom;   /* vízszintes lapozás a JS-é marad */
}

.ig-lightbox__figure { margin: 0; display: flex; }

/* FONTOS: a méretet viewport-egységgel adjuk meg. A korábbi max-height:100%
   egy auto-magasságú flex szülőn nem korlátozott rendesen — emiatt nem
   látszott a kép. */
.ig-lightbox__stage img {
	display: block;
	max-width: min(92vw, 1180px);
	max-height: 78vh;
	width: auto; height: auto;
	object-fit: contain;
	background: #fff;
	border: 2px solid var(--ig-ink);
	box-shadow: 0 18px 60px rgba(0, 0, 0, .18);
	user-select: none;
	-webkit-user-drag: none;
	animation: igLbIn 260ms ease both;
}
@keyframes igLbIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

.ig-lightbox__counter {
	bottom: 18px;
	color: var(--ig-ink);
	font-family: var(--ig-font-mono);
	font-size: 12px;
	font-weight: 700;
	left: 50%;
	letter-spacing: 0.12em;
	position: absolute;
	transform: translateX(-50%);
	z-index: 3;
	background: rgba(255,255,255,.8);
	padding: 5px 12px;
	border: 2px solid var(--ig-ink);
	text-transform: uppercase;
}

@media (max-width: 640px) {
	.ig-lightbox__nav { display: none; }
	.ig-lightbox__stage { padding: 48px 8px; }
}

.ig-product-page__hero .ig-product-card__placeholder {
	color: var(--ig-muted);
	font-family: var(--ig-font-display);
	font-size: 80px;
	font-weight: 900;
	margin: auto;
}

.ig-product-page__thumbs {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.ig-product-page__thumbs button {
	aspect-ratio: 1;
	background: var(--ig-paper);
	border: var(--ig-stroke) solid var(--ig-line);
	cursor: pointer;
	display: flex;
	overflow: hidden;
	padding: 0;
	transition: border-color 160ms ease, transform 160ms ease;
	width: 100%;
}

.ig-product-page__thumbs button:hover {
	transform: translateY(-2px);
}

.ig-product-page__thumbs button.is-active {
	border: var(--ig-stroke-bold) solid var(--ig-accent-ink);
	box-shadow: inset 0 0 0 3px var(--ig-accent);
}

.ig-product-page__thumbs img {
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.ig-product-page__thumbs button.ig-thumb--video {
	background: #0a0a0a;
	position: relative;
}

.ig-product-page__thumbs button.ig-thumb--video img {
	object-fit: cover;
	opacity: 0.7;
}

.ig-product-page__thumbs button.ig-thumb--video .ig-thumb--video-bg {
	background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
	display: block;
	height: 100%;
	width: 100%;
}

.ig-thumb__play {
	align-items: center;
	background: var(--ig-accent);
	border: 2px solid #0a0a0a;
	color: #0a0a0a;   /* fekete: fehéren nem látszott a világos bélyegképeken */
	display: flex;
	font-size: 14px;
	font-weight: 800;
	height: 28px;
	justify-content: center;
	left: 50%;
	padding-left: 3px;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 28px;
}

/* Video iframe inside the hero slot */
.ig-product-page__video-frame {
	background: #0a0a0a;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;
}

.ig-product-page__video-frame[hidden] {
	display: none;
}

.ig-product-page__video-frame iframe {
	border: 0;
	display: block;
	height: 100%;
	width: 100%;
}

/* The hero slot must be position:relative for the video frame overlay */
.ig-product-page__hero {
	position: relative;
}

/* Spotlight: when the video is playing, lift the hero above the page-wide
   overlay so the iframe stands out. The overlay itself fades in over 0.5s. */
.ig-product-page__hero.is-video {
	box-shadow: 0 0 0 4px var(--ig-accent), 0 24px 80px rgba(0, 0, 0, 0.55);
	z-index: 81;
}

.ig-video-overlay {
	background: rgba(10, 10, 10, 0.78);
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	transition: opacity 500ms ease;
	z-index: 80;
}

.ig-video-overlay.is-on {
	opacity: 1;
	pointer-events: auto;
}

html.ig-video-playing {
	overflow: hidden;
}

/* ===================================================================== */
/* Product documents (manuals, datasheets, etc.)                          */
/* ===================================================================== */

.ig-product-page__docs {
	border-top: var(--ig-stroke-bold) solid var(--ig-line);
	margin-top: 48px;
	padding-top: 32px;
}

.ig-product-page__docs-head h2 {
	font-family: var(--ig-font-display);
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1;
	margin: 4px 0 24px;
}

.ig-docs-list {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.ig-doc-card {
	align-items: stretch;
	background: var(--ig-paper);
	border: var(--ig-stroke-bold) solid var(--ig-line);
	box-shadow: 4px 4px 0 var(--ig-ink);
	color: var(--ig-ink);
	display: grid;
	gap: 0;
	grid-template-columns: 72px 1fr auto;
	min-height: 88px;
	text-decoration: none;
	transition: box-shadow 140ms ease, transform 140ms ease;
}

.ig-doc-card:hover,
.ig-doc-card:focus-visible {
	box-shadow: 8px 8px 0 var(--ig-ink);
	outline: 0;
	transform: translate(-2px, -2px);
}

.ig-doc-card__icon {
	align-items: center;
	background: var(--ig-ink);
	border-right: var(--ig-stroke-bold) solid var(--ig-line);
	color: var(--ig-paper);
	display: flex;
	flex-direction: column;
	font-family: var(--ig-font-mono);
	gap: 4px;
	justify-content: center;
	padding: 10px 6px;
}

.ig-doc-card__icon svg {
	display: block;
	height: 28px;
	width: 22px;
}

.ig-doc-card__ext {
	background: var(--ig-accent);
	color: var(--ig-accent-ink);
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.06em;
	line-height: 1;
	padding: 3px 6px;
}

.ig-doc-card__body {
	align-self: center;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding: 14px 18px;
}

.ig-doc-card__title {
	color: var(--ig-ink);
	font-family: var(--ig-font-display);
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ig-doc-card__meta {
	color: var(--ig-muted);
	font-family: var(--ig-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ig-doc-card__cta {
	align-items: center;
	background: var(--ig-accent);
	border-left: var(--ig-stroke-bold) solid var(--ig-line);
	color: var(--ig-accent-ink);
	display: flex;
	flex-direction: column;
	font-family: var(--ig-font-mono);
	font-size: 11px;
	font-weight: 800;
	gap: 4px;
	justify-content: center;
	letter-spacing: 0.08em;
	min-width: 92px;
	padding: 12px 14px;
	text-align: center;
	text-transform: uppercase;
	transition: background 140ms ease, color 140ms ease;
}

.ig-doc-card__cta svg {
	display: block;
	height: 22px;
	width: 22px;
}

.ig-doc-card:hover .ig-doc-card__cta,
.ig-doc-card:focus-visible .ig-doc-card__cta {
	background: var(--ig-ink);
	color: var(--ig-accent);
}

@media (max-width: 480px) {
	.ig-doc-card {
		grid-template-columns: 56px 1fr auto;
		min-height: 72px;
	}
	.ig-doc-card__cta {
		min-width: 72px;
		padding: 10px 8px;
	}
	.ig-doc-card__cta span:not(:only-child) {
		display: none;
	}
}

/* ===================================================================== */
/* Admin: product documents repeater                                       */
/* ===================================================================== */

.inv-docs {
	display: grid;
	gap: 10px;
}

.inv-doc-row {
	background: #fff;
	border: 2px solid #0a0a0a;
	display: grid;
	gap: 10px;
	padding: 12px 14px;
}

.inv-doc-row__file {
	align-items: center;
	display: flex;
	gap: 12px;
}

.inv-doc-row__name {
	flex: 1;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.inv-doc-row__title {
	display: grid;
	gap: 4px;
}

.inv-doc-row__title > span {
	color: #555;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.inv-doc-row__title input {
	border: 2px solid #0a0a0a;
	border-radius: 0;
	box-shadow: none;
	padding: 6px 10px;
	width: 100%;
}

.ig-product-page__buy {
	background: var(--ig-bone);
	border: var(--ig-stroke-bold) solid var(--ig-line);
	padding: 28px;
}

.ig-product-page__buybox {
	display: grid;
	gap: 12px;
	position: sticky;
	top: 96px;
}

.ig-product-page__discount-tag {
	background: var(--ig-accent);
	color: var(--ig-accent-ink);
	display: inline-block;
	font-family: var(--ig-font-mono);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.12em;
	margin: 0;
	padding: 4px 10px;
	text-transform: uppercase;
	width: max-content;
}

.ig-product-page__original {
	color: var(--ig-muted);
	font-family: var(--ig-font-mono);
	font-size: 16px;
	margin: 0;
}

.ig-product-page__original del {
	text-decoration-thickness: 2px;
}

.ig-product-page__price {
	font-family: var(--ig-font-display);
	font-size: clamp(34px, 4vw, 56px);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1;
	margin: 0;
}

.ig-product-page__priceinfo {
	color: var(--ig-muted);
	font-family: var(--ig-font-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	margin: 0 0 4px;
	text-transform: uppercase;
}

.ig-product-page__vatchip {
	background: var(--ig-paper);
	border: var(--ig-stroke) solid var(--ig-line);
	color: var(--ig-ink);
	margin-left: 6px;
	padding: 1px 6px;
}

.ig-product-page__stock {
	align-items: center;
	display: flex;
	font-family: var(--ig-font-mono);
	font-size: 13px;
	font-weight: 700;
	gap: 8px;
	letter-spacing: 0.04em;
	margin: 4px 0;
	text-transform: uppercase;
}

.ig-product-page__dot {
	border-radius: 50%;
	display: inline-block;
	height: 10px;
	width: 10px;
}

.ig-product-page__stock.is-stock-in   { color: var(--ig-ok); }
.ig-product-page__stock.is-stock-in   .ig-product-page__dot { background: var(--ig-ok); }
.ig-product-page__stock.is-stock-low  { color: #b78600; }
.ig-product-page__stock.is-stock-low  .ig-product-page__dot { background: #f5b800; }
.ig-product-page__stock.is-stock-last { background: #f5b800; color: var(--ig-ink); padding: 6px 10px; }
.ig-product-page__stock.is-stock-last .ig-product-page__dot { background: var(--ig-ink); }
.ig-product-page__stock.is-stock-oos  { color: var(--ig-danger); }
.ig-product-page__stock.is-stock-oos  .ig-product-page__dot { background: var(--ig-danger); }

.ig-product-page__form {
	align-items: stretch;
	display: grid;
	gap: 10px;
	grid-template-columns: auto 1fr;
}

.ig-qty--large {
	background: var(--ig-paper);
}

.ig-qty--large .ig-qty__btn,
.ig-qty--large .ig-qty__input {
	min-height: 52px;
}

.ig-qty--large .ig-qty__btn {
	width: 52px;
}

.ig-product-page__cart {
	min-height: 52px;
	width: 100%;
}

.ig-product-page__notify {
	color: var(--ig-muted);
	font-family: var(--ig-font-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	margin: 0;
	text-transform: uppercase;
}

.ig-product-page__perks {
	border-top: var(--ig-stroke) solid var(--ig-line);
	display: grid;
	gap: 8px;
	list-style: none;
	margin: 16px 0 0;
	padding: 16px 0 0;
}

.ig-product-page__perks li {
	align-items: center;
	color: var(--ig-ink);
	display: flex;
	font-family: var(--ig-font-mono);
	font-size: 12px;
	gap: 10px;
	letter-spacing: 0.02em;
}

.ig-product-page__perks li span {
	background: var(--ig-accent);
	color: var(--ig-accent-ink);
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 800;
	height: 22px;
	justify-content: center;
	align-items: center;
	width: 22px;
}

.ig-product-page__details {
	border: var(--ig-stroke-bold) solid var(--ig-line);
	display: grid;
	gap: 0;
	grid-template-columns: 1fr;
	margin-top: 0;
}

.ig-product-page__description {
	padding: 32px;
	border-bottom: var(--ig-stroke-bold) solid var(--ig-line);
}

.ig-product-page__description:last-child {
	border-bottom: 0;
}

.ig-product-page__description h2,
.ig-product-page__attrs h2 {
	font-size: 14px;
	letter-spacing: var(--ig-tracking-eyebrow);
	margin: 0 0 18px;
}

.ig-product-page__description p {
	font-size: 16px;
	line-height: 1.6;
	max-width: 64ch;
}

.ig-product-page__attrs {
	padding: 32px;
}

.ig-product-page__attrs .ig-spec-grid {
	margin-top: 0;
}

.ig-product-page__related {
	margin-top: 64px;
}

@media (max-width: 1080px) {
	.ig-product-page__main {
		/* FONTOS: minmax(0, 1fr) és NEM sima 1fr. A sima 1fr nem tud a tartalom
		   minimális szélessége alá zsugorodni, ezért a jobb oldali vásárlódoboz
		   375px-es kijelzőn 358px-es oszlopot kapott egy 339px-es konténerben →
		   az egész oldal vízszintesen görgethető lett. (Az asztali szabály fent
		   már eleve minmax(0, …)-t használ.) */
		grid-template-columns: minmax(0, 1fr);
	}

	.ig-product-page__media {
		border-right: var(--ig-stroke-bold) solid var(--ig-line);
		border-bottom: 0;
	}

	.ig-product-page__buy {
		border-top: 0;
	}

	.ig-product-page__buybox {
		position: static;
	}

	.ig-product-page__description {
		padding: 24px 20px;
	}

	.ig-product-page__attrs {
		padding: 24px 20px;
	}
}

.ig-product-single {
	border-bottom: var(--ig-stroke-bold) solid var(--ig-line);
	display: grid;
	gap: 0;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}

.ig-product-single__media {
	background: var(--ig-bone);
	border-right: var(--ig-stroke-bold) solid var(--ig-line);
	display: grid;
	gap: 12px;
	padding: 32px;
}

.ig-product-single__hero {
	aspect-ratio: 4 / 3;
	background: var(--ig-paper);
	border: var(--ig-stroke) solid var(--ig-line);
	display: flex;
	overflow: hidden;
}

.ig-product-single__hero img {
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.ig-product-single__thumbs {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ig-product-single__thumbs a {
	aspect-ratio: 1;
	background: var(--ig-paper);
	border: var(--ig-stroke) solid var(--ig-line);
	display: flex;
}

.ig-product-single__thumbs img {
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.ig-product-single__body {
	padding: 40px var(--ig-gutter-x);
}

.ig-product-single__body h1 {
	font-size: clamp(32px, 4vw, 60px);
	margin: 8px 0 16px;
}

.ig-product-single__brand {
	background: var(--ig-ink);
	color: var(--ig-paper);
	display: inline-block;
	font-family: var(--ig-font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	margin-bottom: 18px;
	padding: 4px 8px;
	text-transform: uppercase;
}

.ig-buy-box {
	align-items: center;
	border: var(--ig-stroke-bold) solid var(--ig-line);
	display: flex;
	gap: 0;
	margin: 24px 0;
}

.ig-buy-box input {
	border: 0;
	border-right: var(--ig-stroke) solid var(--ig-line);
	font-family: var(--ig-font-mono);
	font-size: 16px;
	font-weight: 700;
	min-height: 56px;
	padding: 0 14px;
	width: 90px;
}

.ig-buy-box .ig-button {
	border: 0;
	flex: 1;
	min-height: 56px;
}

.ig-price--large {
	font-family: var(--ig-font-display);
	font-size: clamp(40px, 4vw, 64px);
	font-weight: 900;
	letter-spacing: -0.02em;
	margin: 0;
}

.ig-price--large small {
	color: var(--ig-muted);
	font-family: var(--ig-font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Product specification list — 1 attribute per row, label left / value right */
.ig-spec-grid {
	display: flex;
	flex-direction: column;
	border: var(--ig-stroke-bold) solid var(--ig-line);
	margin: 32px 0 0;
	padding: 0;
	background: var(--ig-paper);
}

.ig-spec {
	display: grid;
	grid-template-columns: minmax(180px, 0.35fr) minmax(0, 1fr);
	align-items: stretch;
	background: var(--ig-paper);
	margin: 0;
	border-bottom: var(--ig-stroke) solid var(--ig-line);
	transition: background-color 0.15s ease;
}

.ig-spec:last-child {
	border-bottom: 0;
}

.ig-spec:hover {
	background: var(--ig-bone);
}

.ig-spec dt {
	font-family: var(--ig-font-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ig-ink);
	font-weight: 700;
	padding: 14px 18px;
	background: var(--ig-bone);
	border-right: var(--ig-stroke) solid var(--ig-line);
	display: flex;
	align-items: center;
}

.ig-spec dd {
	margin: 0;
	font-family: var(--ig-font-mono);
	font-size: 14px;
	line-height: 1.45;
	color: var(--ig-ink);
	font-weight: 500;
	word-break: break-word;
	padding: 14px 18px;
	display: flex;
	align-items: center;
}

@media (max-width: 640px) {
	.ig-spec {
		grid-template-columns: 1fr;
	}

	.ig-spec dt {
		border-right: 0;
		border-bottom: var(--ig-stroke) solid var(--ig-line);
		padding: 10px 14px;
	}

	.ig-spec dd {
		padding: 12px 14px;
		font-size: 14px;
	}
}

/* ==========================================================================
   Checkout
   ========================================================================== */

.ig-checkout {
	padding-top: clamp(40px, 5vw, 80px);
	padding-bottom: clamp(56px, 7vw, 112px);
}

.ig-checkout__success {
	background: var(--ig-paper);
	border: var(--ig-stroke-bold) solid var(--ig-line);
	margin: 24px 0 0;
	padding: clamp(28px, 4vw, 56px);
}

.ig-checkout__success h2 {
	font-family: var(--ig-font-display);
	font-size: clamp(28px, 4vw, 48px);
	font-weight: 900;
	letter-spacing: -0.02em;
	margin: 8px 0 20px;
	text-transform: uppercase;
}

.ig-checkout__success code {
	background: var(--ig-accent);
	color: var(--ig-accent-ink);
	font-weight: 700;
	padding: 2px 8px;
}

.ig-checkout__layout {
	display: grid;
	gap: clamp(24px, 3vw, 48px);
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	margin-top: clamp(24px, 3vw, 40px);
}

.ig-checkout__main {
	display: grid;
	gap: clamp(20px, 2.5vw, 36px);
	min-width: 0;
}

.ig-checkout__step {
	background: var(--ig-paper);
	border: var(--ig-stroke-bold) solid var(--ig-line);
	padding: clamp(20px, 2.5vw, 32px);
}

.ig-checkout__step-head {
	align-items: baseline;
	display: flex;
	gap: 14px;
	margin-bottom: 18px;
}

.ig-checkout__step-num {
	background: var(--ig-ink);
	color: var(--ig-paper);
	font-family: var(--ig-font-mono);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	padding: 4px 8px;
}

.ig-checkout__step h2 {
	font-family: var(--ig-font-display);
	font-size: clamp(20px, 2vw, 28px);
	font-weight: 900;
	letter-spacing: -0.01em;
	margin: 0;
	text-transform: uppercase;
}

.ig-checkout__notes summary {
	cursor: pointer;
	font-family: var(--ig-font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 12px 14px;
	background: #f3f3f1;
	border: 2px dashed var(--ig-line);
	text-transform: uppercase;
	transition: background 0.15s;
}
.ig-checkout__notes summary:hover { background: #E8FF00; }
.ig-checkout__notes[open] summary { background: #E8FF00; }
.ig-checkout__notes-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-top: 14px;
}
.ig-checkout__notes-field { display: flex; flex-direction: column; gap: 4px; }
.ig-checkout__notes-field--full { grid-column: 1 / -1; }
.ig-checkout__notes-field span { font-weight: 700; font-size: 14px; }
.ig-checkout__notes-field small { color: #6B6B6B; font-size: 11px; }
.ig-checkout__notes-field input,
.ig-checkout__notes-field textarea {
	border: 2px solid var(--ig-line);
	background: var(--ig-paper);
	padding: 8px 10px;
	font: inherit;
	width: 100%;
}
@media (max-width: 640px) {
	.ig-checkout__notes-grid { grid-template-columns: 1fr; }
}
.ig-account-order__notes {
	margin-top: 18px;
	padding: 14px 16px;
	border: 2px solid var(--ig-line);
	background: #fafafa;
}
.ig-account-order__notes h3 {
	margin: 0 0 10px;
	font-family: var(--ig-font-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #6B6B6B;
}
.ig-account-order__notes-list {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 6px 14px;
	margin: 0;
}
.ig-account-order__notes-list dt {
	font-weight: 700;
	color: #444;
}
.ig-account-order__notes-list dd { margin: 0; }

.ig-product-page__relations { margin-top: 56px; }
.ig-rel-group { margin-top: 24px; }
.ig-rel-group__title {
	display: flex; align-items: center; gap: 12px;
	font-family: var(--ig-font-display); font-weight: 700;
	font-size: 18px; margin: 0 0 16px;
}
.ig-rel-group__badge {
	font-family: var(--ig-font-mono); font-size: 10px;
	letter-spacing: .08em; text-transform: uppercase;
	padding: 3px 8px; border: 2px solid var(--ig-line); color: var(--ig-ink);
}
.ig-rel-group--requires .ig-rel-group__badge { color: #fff; background: #b91c1c !important; border-color: #b91c1c; }

.ig-eta-list {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ig-eta-line {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--ig-ink);
}
.ig-eta-line__icon {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--ig-accent);
	color: var(--ig-accent-ink, var(--ig-ink));
	border: 2px solid var(--ig-ink);
}
.ig-eta-line__icon svg { width: 16px; height: 16px; display: block; }
.ig-eta-line__text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	line-height: 1.2;
	min-width: 0;
}
.ig-eta-line__eyebrow {
	font-family: var(--ig-font-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #6B6B6B;
	font-weight: 700;
}
.ig-eta-line__when {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.005em;
	color: var(--ig-ink);
}

.ig-tracking { margin: 24px 0; border: 3px solid var(--ig-line); background: var(--ig-paper); }
.ig-tracking__head { padding: 14px 18px; border-bottom: 2px solid var(--ig-line); }
.ig-tracking__head .ig-eyebrow { margin: 0 0 4px; }
.ig-tracking__title { margin: 0 0 4px; font-size: 20px; }
.ig-tracking__meta { margin: 0; color: var(--ig-muted, #6B6B6B); font-family: var(--ig-font-mono); font-size: 12px; }
.ig-tracking__map { background: #ddd; }
.ig-tracking__foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-top: 2px solid var(--ig-line); background: #f3f3f1; gap: 12px; flex-wrap: wrap; }
.ig-tracking__num code { background: var(--ig-paper); border: 1px solid var(--ig-line); padding: 2px 8px; font-family: var(--ig-font-mono); }

/* =========================================================================
   PROJECT WIZARD — mobile-first, site-width, slide transitions, no scroll-jump
   ========================================================================= */
.ig-page-head--wizard { background: var(--ig-paper); }
.ig-wiz-wrap { padding-top: 20px; padding-bottom: 80px; }
.ig-wiz {
	background: var(--ig-paper);
	border: 3px solid var(--ig-line);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Sticky top progress + back */
.ig-wiz__top {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px clamp(16px, 3vw, 28px);
	border-bottom: 2px solid var(--ig-line);
	background: var(--ig-paper);
	position: sticky;
	top: 0;
	z-index: 5;
}
.ig-wiz__back {
	width: 44px; height: 44px;
	border: 2px solid var(--ig-line);
	background: var(--ig-paper);
	font-size: 20px;
	font-weight: 700;
	cursor: pointer;
	flex-shrink: 0;
	transition: background .15s;
}
.ig-wiz__back:hover { background: #E8FF00; }
.ig-wiz__back[hidden] { display: none; }
.ig-wiz__progress { flex: 1; display: flex; align-items: center; gap: 14px; }
.ig-wiz__progress-track {
	flex: 1;
	height: 8px;
	background: #f3f3f1;
	border: 2px solid var(--ig-line);
	overflow: hidden;
}
.ig-wiz__progress-fill {
	width: 16.66%; /* 1/6 */
	height: 100%;
	background: #E8FF00;
	transition: width .4s cubic-bezier(.4, 0, .2, 1);
}
.ig-wiz__progress-text {
	font-family: var(--ig-font-mono);
	font-size: 13px;
	font-weight: 700;
	color: #6B6B6B;
	min-width: 50px;
	text-align: right;
}
.ig-wiz__progress-text strong { color: var(--ig-ink); font-size: 18px; }

/* Viewport — keeps the wizard at a fixed-height feel, no page scroll-jump */
.ig-wiz__viewport {
	position: relative;
	min-height: 460px;
	overflow: hidden;
}
.ig-wiz__track { position: relative; }
.ig-wiz__step {
	position: absolute;
	inset: 0;
	padding: clamp(20px, 3vw, 36px) clamp(18px, 3.5vw, 40px);
	display: none;
	opacity: 0;
	transform: translateX(0);
}
.ig-wiz__step.is-active {
	display: flex;
	flex-direction: column;
	opacity: 1;
	animation: ig-wiz-fade-in .35s ease both;
}
.ig-wiz__step.is-entering-right { animation: ig-wiz-slide-in-right .35s cubic-bezier(.2, .8, .2, 1) both; }
.ig-wiz__step.is-entering-left  { animation: ig-wiz-slide-in-left  .35s cubic-bezier(.2, .8, .2, 1) both; }
.ig-wiz__step.is-leaving-left   { animation: ig-wiz-slide-out-left .25s ease-in both; }
.ig-wiz__step.is-leaving-right  { animation: ig-wiz-slide-out-right .25s ease-in both; }
.ig-wiz__step.is-shake          { animation: ig-wiz-shake .35s; }

@keyframes ig-wiz-fade-in       { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ig-wiz-slide-in-right{ from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ig-wiz-slide-in-left { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ig-wiz-slide-out-left { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-40px); } }
@keyframes ig-wiz-slide-out-right { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(40px); } }
@keyframes ig-wiz-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

.ig-wiz__step-head { margin-bottom: 22px; }
.ig-wiz__step-num {
	margin: 0 0 4px;
	font-family: var(--ig-font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	color: #6B6B6B;
	text-transform: uppercase;
}
.ig-wiz__step-title {
	margin: 0 0 6px;
	font-family: var(--ig-font-display);
	font-size: clamp(22px, 3vw, 32px);
	font-weight: 900;
	letter-spacing: -0.015em;
	line-height: 1.1;
}
.ig-wiz__step-hint {
	margin: 0;
	color: #6B6B6B;
	font-size: 14px;
	max-width: 56ch;
}

/* Options grid — mobile-first single col → up to 5 on desktop */
.ig-wiz__opts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}
@media (min-width: 540px) {
	.ig-wiz__opts { grid-template-columns: 1fr 1fr; gap: 12px; }
	.ig-wiz__opts--wide { grid-template-columns: 1fr 1fr 1fr; }
}
@media (min-width: 880px) {
	.ig-wiz__opts--medium { grid-template-columns: 1fr 1fr 1fr; }
	.ig-wiz__opts--wide   { grid-template-columns: repeat(5, 1fr); }
}

/* Single option — big, touch-friendly */
.ig-wiz__opt {
	display: grid;
	grid-template-columns: 44px 1fr 22px;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	background: var(--ig-paper);
	border: 2px solid var(--ig-line);
	cursor: pointer;
	user-select: none;
	min-height: 64px;
	transition: background .18s ease, transform .12s ease, box-shadow .18s ease;
	position: relative;
	font-weight: 600;
}
.ig-wiz__opt input { position: absolute; opacity: 0; pointer-events: none; }
.ig-wiz__opt-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: #f3f3f1;
	border: 2px solid var(--ig-line);
	border-radius: 50%;
	flex-shrink: 0;
	color: var(--ig-ink);
	transition: background .15s, transform .25s ease, color .15s;
}
.ig-wiz__opt-icon svg {
	width: 22px;
	height: 22px;
	display: block;
}
.ig-wiz__opt-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.ig-wiz__opt-label { font-size: 15px; font-weight: 700; letter-spacing: -0.005em; }
.ig-wiz__opt-sub   { font-size: 12px; color: #6B6B6B; font-family: var(--ig-font-mono); }
.ig-wiz__opt-check {
	width: 22px; height: 22px;
	border: 2px solid var(--ig-line);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 800;
	color: transparent;
	background: var(--ig-paper);
	transition: background .18s, color .18s;
	flex-shrink: 0;
}
.ig-wiz__opt:hover {
	background: #fafad9;
	transform: translateY(-1px);
	box-shadow: 4px 4px 0 0 var(--ig-line);
}
.ig-wiz__opt:has(input:checked) {
	background: #E8FF00;
	box-shadow: inset 0 0 0 3px var(--ig-line);
	transform: translateY(-1px);
}
.ig-wiz__opt:has(input:checked) .ig-wiz__opt-icon {
	background: var(--ig-paper);
	transform: scale(1.08) rotate(-4deg);
}
.ig-wiz__opt:has(input:checked) .ig-wiz__opt-check {
	background: var(--ig-ink);
	color: #E8FF00;
}
.ig-wiz__opt:has(input:checked) .ig-wiz__opt-sub { color: #444; }

/* Bottom nav */
.ig-wiz__nav {
	display: flex;
	gap: 10px;
	padding: 16px clamp(18px, 3vw, 28px);
	border-top: 2px solid var(--ig-line);
	background: #fafafa;
	flex-wrap: wrap;
	align-items: center;
}
.ig-wiz__nav .ig-button { min-width: 130px; }
.ig-wiz__nav [data-wiz-skip] {
	margin-right: auto;
	background: transparent;
	color: #6B6B6B;
	border-color: #ccc;
	font-size: 13px;
	min-width: 0;
	padding: 8px 14px;
}
.ig-wiz__nav [data-wiz-skip]:hover { color: var(--ig-ink); border-color: var(--ig-line); background: var(--ig-paper); }
.ig-wiz__nav [data-wiz-skip][hidden] { display: none; }
.ig-wiz__nav [data-wiz-next] { margin-left: auto; }
/* Erős override a [hidden] attribútumra — máskülönben a .ig-button explicit
   display: inline-block-ja továbbra is láthatóvá teszi a gombot, és pl. az
   utolsó lépésen mind a Tovább, mind a Csomag generálása megjelenne. */
.ig-wiz__nav [hidden] { display: none !important; }
.ig-wiz__submit {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}
.ig-wiz__submit[hidden] { display: none !important; }
.ig-wiz__submit svg {
	width: 20px;
	height: 20px;
	color: currentColor;
	flex-shrink: 0;
	animation: ig-wiz-twinkle 2s ease-in-out infinite;
}
.ig-wiz__submit:hover svg {
	animation: ig-wiz-spin .6s ease-out;
}
@keyframes ig-wiz-twinkle {
	0%, 100% { transform: rotate(-6deg) scale(1);   opacity: 1; }
	50%      { transform: rotate(6deg)  scale(1.1); opacity: 0.85; }
}
@keyframes ig-wiz-spin {
	0%   { transform: rotate(-6deg); }
	50%  { transform: rotate(360deg) scale(1.2); }
	100% { transform: rotate(354deg); }
}

/* Loading screen */
.ig-wiz__loading {
	text-align: center;
	padding: clamp(40px, 8vw, 80px) 20px;
	background: var(--ig-paper);
	border: 3px solid var(--ig-line);
	margin-top: 20px;
}
.ig-spin {
	width: 64px; height: 64px;
	border: 6px solid var(--ig-line);
	border-top-color: transparent;
	border-radius: 50%;
	animation: ig-spin 1s linear infinite;
	margin: 0 auto 24px;
}
@keyframes ig-spin { to { transform: rotate(360deg); } }
.ig-wiz__loading-title { font-size: 18px; font-weight: 800; margin: 0 0 6px; }
.ig-wiz__loading-sub   { color: #6B6B6B; font-family: var(--ig-font-mono); font-size: 12px; margin: 0 0 24px; }
.ig-wiz__loading-steps {
	list-style: none; padding: 0; margin: 0 auto;
	max-width: 360px;
	display: flex; flex-direction: column; gap: 6px;
	text-align: left;
}
.ig-wiz__loading-steps li {
	padding: 8px 14px;
	background: #f3f3f1;
	border-left: 4px solid #ccc;
	font-family: var(--ig-font-mono);
	font-size: 13px;
	color: #888;
	transition: background .3s, color .3s, border-color .3s;
}
.ig-wiz__loading-steps li.is-on   { background: #E8FF00; color: var(--ig-ink); border-left-color: var(--ig-ink); animation: ig-pulse 1.5s ease-in-out infinite; }
.ig-wiz__loading-steps li.is-done { background: var(--ig-paper); color: var(--ig-ink); border-left-color: #86efac; animation: none; }
.ig-wiz__loading-steps li.is-done::after { content: ' ✓'; color: #059669; font-weight: 800; }
@keyframes ig-pulse { 0%,100% { opacity: 1; } 50% { opacity: .65; } }

/* Result */
.ig-wiz__result { margin-top: 20px; }
.ig-wiz__error { padding: 18px 22px; background: #fee; border: 2px solid #b91c1c; color: #7f1d1d; font-weight: 600; }
.ig-wiz-result {
	background: var(--ig-paper);
	border: 3px solid var(--ig-line);
}
.ig-wiz-result__hero {
	background: #E8FF00;
	padding: clamp(20px, 4vw, 36px);
	border-bottom: 3px solid var(--ig-line);
}
.ig-wiz-result__title {
	margin: 6px 0 10px;
	font-family: var(--ig-font-display);
	font-size: clamp(24px, 4vw, 36px);
	font-weight: 900;
	letter-spacing: -0.02em;
}
.ig-wiz-result__intro { margin: 0; font-size: 15px; line-height: 1.55; max-width: 70ch; }
.ig-wiz-result__warning {
	padding: 14px 18px;
	background: #fff7cc;
	border-top: 2px solid var(--ig-line);
	border-bottom: 2px solid var(--ig-line);
}
.ig-wiz-result__warning strong {
	display: block;
	font-family: var(--ig-font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 4px;
}
.ig-wiz-result__warning p { margin: 0; font-size: 14px; line-height: 1.5; }
.ig-wiz-result__items {
	list-style: none;
	padding: clamp(16px, 3vw, 28px);
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ig-wiz-result__item {
	display: grid;
	grid-template-columns: 36px 96px 1fr;
	gap: 16px;
	padding: 14px;
	border: 2px solid var(--ig-line);
	background: var(--ig-paper);
	align-items: start;
}
.ig-wiz-result__idx {
	font-family: var(--ig-font-mono);
	font-weight: 800;
	font-size: 13px;
	color: #6B6B6B;
	padding-top: 4px;
}
.ig-wiz-result__thumb img {
	width: 96px; height: 96px; object-fit: cover;
	border: 1px solid var(--ig-line);
	display: block;
}
.ig-wiz-result__body { min-width: 0; }
.ig-wiz-result__name { margin: 0 0 6px; font-size: 17px; font-weight: 800; }
.ig-wiz-result__name a { color: var(--ig-ink); text-decoration: none; }
.ig-wiz-result__name a:hover { background: #E8FF00; }
.ig-wiz-result__eta {
	margin: 0 0 8px; padding: 6px 9px; font-size: 12px; line-height: 1.4;
	border: 1px solid var(--ig-ink); border-left-width: 4px; background: #FFFDF0; color: #333;
}
.ig-wiz-result__why { margin: 0 0 8px; font-size: 13px; line-height: 1.45; color: #333; }
.ig-wiz-result__why-label { display: block; font-family: var(--ig-font-mono); font-size: 10px; letter-spacing: .14em; color: #6B6B6B; margin-bottom: 2px; }
.ig-wiz-result__pricing {
	margin: 0; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
	font-family: var(--ig-font-mono); font-size: 13px;
}
.ig-wiz-result__pricing .ig-wiz-result__times,
.ig-wiz-result__pricing .ig-wiz-result__eq { color: #6B6B6B; }
.ig-wiz-result__qty  { font-weight: 800; padding: 2px 8px; background: var(--ig-ink); color: var(--ig-paper); }
.ig-wiz-result__line { font-size: 14px; font-weight: 900; }

.ig-wiz-result__total {
	display: flex; justify-content: space-between; align-items: center;
	padding: 18px clamp(18px, 3vw, 28px);
	background: var(--ig-ink); color: var(--ig-paper);
}
.ig-wiz-result__total-label { font-family: var(--ig-font-mono); font-size: 13px; letter-spacing: .1em; }
.ig-wiz-result__total-amount { font-size: clamp(22px, 3.5vw, 30px); font-weight: 900; letter-spacing: -0.01em; }
.ig-wiz-result__cta {
	display: flex; gap: 10px; flex-wrap: wrap;
	padding: 16px clamp(18px, 3vw, 28px);
	background: #fafafa;
	border-top: 2px solid var(--ig-line);
}
.ig-wiz-result__addall { font-size: 16px !important; padding: 12px 22px !important; }
.ig-wiz-result__cta .ig-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.ig-wiz-result__cta-icon {
	width: 20px;
	height: 20px;
	color: currentColor;
	flex-shrink: 0;
	transition: transform .25s ease;
}
.ig-wiz-result__cta .ig-button:hover .ig-wiz-result__cta-icon {
	transform: translateX(-2px) scale(1.1);
}
.ig-wiz-result__cta .ig-button.ig-button--accent:hover .ig-wiz-result__cta-icon {
	animation: ig-wiz-cart-bounce .55s ease;
}
@keyframes ig-wiz-cart-bounce {
	0%, 100% { transform: translateY(0); }
	30%      { transform: translateY(-4px) rotate(-6deg); }
	60%      { transform: translateY(0) rotate(4deg); }
}
.ig-wiz-result__cta-arrow {
	margin-left: 4px;
	font-weight: 800;
	transition: transform .2s ease;
}
.ig-wiz-result__cta .ig-button:hover .ig-wiz-result__cta-arrow {
	transform: translateX(4px);
}

/* MOBILE: optimized layout */
@media (max-width: 540px) {
	.ig-wiz__viewport { min-height: 540px; }
	.ig-wiz__step { padding: 18px 16px; }
	.ig-wiz__step-title { font-size: 22px; }
	.ig-wiz__opt { grid-template-columns: 40px 1fr 20px; padding: 14px 14px; min-height: 60px; }
	.ig-wiz__opt-icon { width: 40px; height: 40px; font-size: 22px; }
	.ig-wiz__opt-label { font-size: 14px; }
	.ig-wiz__opt-sub   { font-size: 11px; }
	.ig-wiz__nav { padding: 14px 16px; }
	.ig-wiz__nav .ig-button { min-width: 0; flex: 1; }
	.ig-wiz__nav [data-wiz-next] { flex: 2; }
	.ig-wiz__nav [data-wiz-skip] { flex: 0 0 auto; }
	.ig-wiz__progress-text { font-size: 11px; }
	.ig-wiz__progress-text strong { font-size: 16px; }
	.ig-wiz-result__item { grid-template-columns: 24px 64px 1fr; gap: 10px; }
	.ig-wiz-result__thumb img { width: 64px; height: 64px; }
	.ig-wiz-result__name { font-size: 15px; }
	.ig-wiz-result__cta .ig-button { width: 100%; }
}

/* =========================================================================
   TELJESÍTMÉNY-KALKULÁTOR
   ========================================================================= */
.ig-calc-wrap { padding-top: 20px; padding-bottom: 80px; }
.ig-calc-tabs { display: flex; gap: 0; margin-bottom: -3px; flex-wrap: wrap; }
.ig-calc-tab {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 14px 22px; background: #f3f3f1;
	border: 3px solid var(--ig-line); border-bottom: 0;
	font-family: var(--ig-font-mono); font-size: 13px; font-weight: 700;
	letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
	margin-right: -3px; position: relative;
}
.ig-calc-tab svg { width: 18px; height: 18px; }
.ig-calc-tab.is-active { background: var(--ig-accent); z-index: 2; }
.ig-calc-panel { display: none; }
.ig-calc-panel.is-active { display: block; }
.ig-calc-card {
	background: var(--ig-paper); border: 3px solid var(--ig-line);
	padding: clamp(20px, 3vw, 34px);
}
.ig-calc-card__title { margin: 0 0 6px; font-size: clamp(20px, 2.4vw, 28px); font-weight: 900; letter-spacing: -.01em; }
.ig-calc-card__hint  { margin: 0 0 22px; color: #6B6B6B; font-size: 14px; max-width: 68ch; }
.ig-calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ig-calc-field { display: flex; flex-direction: column; gap: 5px; }
.ig-calc-field > span { font-weight: 700; font-size: 14px; }
.ig-calc-field small { color: #6B6B6B; font-size: 11px; }
.ig-calc-field select,
.ig-calc-input { border: 2px solid var(--ig-line); background: var(--ig-paper); font: inherit; }
.ig-calc-field select { padding: 10px 12px; }
.ig-calc-input { display: flex; align-items: center; }
.ig-calc-input input { border: 0; background: transparent; padding: 10px 12px; font: inherit; width: 100%; -moz-appearance: textfield; }
.ig-calc-input i { font-style: normal; font-family: var(--ig-font-mono); font-weight: 700; padding: 0 12px; color: #6B6B6B; border-left: 2px solid #e5e5e5; align-self: stretch; display: flex; align-items: center; }
.ig-calc-check { display: flex; align-items: center; gap: 10px; margin-top: 18px; cursor: pointer; font-weight: 600; }
.ig-calc-check input { width: 20px; height: 20px; accent-color: var(--ig-ink); }

.ig-calc-verdict { margin-top: 24px; border: 3px solid var(--ig-line); }
.ig-calc-verdict__head { padding: 12px 18px; font-family: var(--ig-font-mono); font-weight: 800; letter-spacing: .08em; font-size: 14px; }
.ig-calc-verdict__head.is-ok   { background: #86efac; }
.ig-calc-verdict__head.is-warn { background: var(--ig-accent); }
.ig-calc-verdict__head.is-bad  { background: #fca5a5; }
.ig-calc-verdict__list { list-style: none; margin: 0; padding: 0; }
.ig-calc-verdict__list .vrow { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 14px 18px; border-top: 1px solid #eee; align-items: start; }
.ig-calc-verdict__list .vdot { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; border: 2px solid var(--ig-line); }
.ig-calc-verdict__list .vrow--ok   .vdot { background: #86efac; }
.ig-calc-verdict__list .vrow--warn .vdot { background: var(--ig-accent); }
.ig-calc-verdict__list .vrow--bad  .vdot { background: #fca5a5; }
.ig-calc-verdict__list strong { display: block; font-size: 15px; margin-bottom: 2px; }
.ig-calc-verdict__list p { margin: 0; font-size: 13px; line-height: 1.5; color: #333; }

.ig-calc-presets { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; }
.ig-calc-presets__label { font-family: var(--ig-font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #6B6B6B; width: 100%; }
.ig-calc-preset { padding: 7px 12px; background: #f3f3f1; border: 2px solid var(--ig-line); font-size: 12px; cursor: pointer; transition: background .15s; }
.ig-calc-preset:hover { background: var(--ig-accent); }
.ig-calc-preset strong { font-family: var(--ig-font-mono); }

.ig-calc-rows { display: flex; flex-direction: column; gap: 8px; }
.ig-calc-row { display: grid; grid-template-columns: 1fr 120px 130px 40px; gap: 8px; align-items: center; }
.ig-calc-row__name { border: 2px solid var(--ig-line); padding: 9px 12px; font: inherit; }
.ig-calc-row__w { }
.ig-calc-row__qtybox { display: flex; border: 2px solid var(--ig-line); }
.ig-calc-row__qbtn { width: 32px; background: #f3f3f1; border: 0; font-size: 18px; font-weight: 700; cursor: pointer; }
.ig-calc-row__qbtn:hover { background: var(--ig-accent); }
.ig-calc-row__qty { width: 100%; border: 0; border-left: 2px solid var(--ig-line); border-right: 2px solid var(--ig-line); text-align: center; font: inherit; -moz-appearance: textfield; }
.ig-calc-row__del { width: 40px; height: 40px; background: var(--ig-paper); border: 2px solid #b91c1c; color: #b91c1c; font-weight: 700; cursor: pointer; }
.ig-calc-row__del:hover { background: #b91c1c; color: #fff; }
.ig-calc-addrow { display: inline-flex !important; align-items: center; gap: 8px; margin-top: 14px; }
.ig-calc-addrow svg { width: 16px; height: 16px; }

.ig-calc-power-result { margin-top: 24px; border: 3px solid var(--ig-line); }
.ig-calc-power-result__head { display: grid; grid-template-columns: repeat(3, 1fr); }
.ig-calc-power-result__head .prnum { padding: 18px; text-align: center; border-right: 2px solid var(--ig-line); }
.ig-calc-power-result__head .prnum:last-child { border-right: 0; }
.ig-calc-power-result__head .prnum span { display: block; font-size: clamp(24px, 4vw, 38px); font-weight: 900; letter-spacing: -.02em; line-height: 1; }
.ig-calc-power-result__head .prnum i { font-style: normal; font-family: var(--ig-font-mono); font-size: 11px; color: #6B6B6B; text-transform: uppercase; letter-spacing: .06em; }
.ig-calc-power-result__head .prnum--accent { background: var(--ig-accent); }
.ig-calc-power-result__head.is-warn { background: #fffbe6; }
.ig-calc-power-result__head.is-bad  { background: #fff1f1; }
.ig-calc-power-result__note { margin: 0; padding: 14px 18px; border-top: 2px solid var(--ig-line); font-size: 14px; line-height: 1.5; }
.ig-calc-power-result__fine { margin: 0; padding: 8px 18px 14px; font-family: var(--ig-font-mono); font-size: 11px; color: #6B6B6B; }
.ig-calc-disclaimer { margin: 22px 0 0; font-size: 12px; color: #6B6B6B; font-style: italic; }

@media (max-width: 600px) {
	.ig-calc-grid { grid-template-columns: 1fr; }
	.ig-calc-row { grid-template-columns: 1fr 1fr; grid-template-areas: "name name" "w qty" "del del"; }
	.ig-calc-row__name { grid-area: name; }
	.ig-calc-row__w { grid-area: w; }
	.ig-calc-row__qtybox { grid-area: qty; }
	.ig-calc-row__del { grid-area: del; width: 100%; }
	.ig-calc-power-result__head { grid-template-columns: 1fr; }
	.ig-calc-power-result__head .prnum { border-right: 0; border-bottom: 2px solid var(--ig-line); }
	.ig-calc-tab { flex: 1; justify-content: center; padding: 12px 10px; font-size: 11px; }
	.ig-calc-tab span { display: none; }
	.ig-calc-tab svg { width: 22px; height: 22px; }
}

/* =========================================================================
   SZÍNPAD-TERVEZŐ
   ========================================================================= */
.ig-stage-wrap { padding-top: 20px; padding-bottom: 80px; }
.ig-stage-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.ig-stage-toolbar .ig-button { font-size: 13px; padding: 9px 14px; }
.ig-stage-toolbar__spacer { flex: 1; }
.ig-stage-saved { font-family: var(--ig-font-mono); font-size: 12px; color: #059669; font-weight: 700; }
.ig-stage-layout { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; }
.ig-stage-palette { border: 3px solid var(--ig-line); background: var(--ig-paper); max-height: 640px; overflow-y: auto; }
.ig-stage-palette__group { border-bottom: 2px solid var(--ig-line); padding: 12px 14px; }
.ig-stage-palette__group:last-child { border-bottom: 0; }
.ig-stage-palette__title { margin: 0 0 10px; font-family: var(--ig-font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #6B6B6B; }
.ig-stage-palette__items { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ig-stage-pi { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px; background: #f3f3f1; border: 2px solid var(--ig-line); cursor: pointer; transition: background .12s, transform .1s; text-align: center; }
.ig-stage-pi:hover { background: var(--ig-accent); transform: translateY(-1px); }
.ig-stage-pi__icon svg { width: 26px; height: 26px; }
.ig-stage-pi__label { font-size: 10px; font-weight: 600; line-height: 1.15; }
/* csoport-színek a paletta ikonjain */
.ig-stage-pi--hang .ig-stage-pi__icon    { color: #0a0a0a; }
.ig-stage-pi--mik .ig-stage-pi__icon     { color: #2563eb; }
.ig-stage-pi--eloadok .ig-stage-pi__icon { color: #b45309; }
.ig-stage-pi--feny .ig-stage-pi__icon    { color: #7c3aed; }
.ig-stage-pi--egyeb .ig-stage-pi__icon   { color: #6B6B6B; }

.ig-stage-canvas-wrap { min-width: 0; }
.ig-stage-canvas {
	position: relative; width: 100%; aspect-ratio: 16 / 10;
	background: var(--ig-paper);
	background-image: linear-gradient(#0000000d 1px, transparent 1px), linear-gradient(90deg, #0000000d 1px, transparent 1px);
	background-size: 5% 5%;
	border: 3px solid var(--ig-line);
	overflow: hidden; touch-action: none;
}
.ig-stage-canvas__back { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); font-family: var(--ig-font-mono); font-size: 10px; letter-spacing: .14em; color: #bbb; pointer-events: none; }
.ig-stage-canvas__front { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); font-family: var(--ig-font-mono); font-size: 11px; letter-spacing: .12em; font-weight: 700; color: #0a0a0a; background: var(--ig-accent); padding: 2px 10px; pointer-events: none; }
.ig-stage-canvas__empty { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: 60%; text-align: center; color: #aaa; font-size: 13px; pointer-events: none; margin: 0; }

.ig-stage-item { position: absolute; width: 78px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: grab; user-select: none; touch-action: none; }
.ig-stage-item:active { cursor: grabbing; }
.ig-stage-item__rot { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--ig-paper); border: 2px solid var(--ig-line); }
.ig-stage-item__icon svg { width: 30px; height: 30px; display: block; }
.ig-stage-item__label { font-size: 10px; font-weight: 700; text-align: center; line-height: 1.1; background: var(--ig-paper); padding: 1px 4px; border: 1px solid #ddd; max-width: 78px; }
.ig-stage-item--hang .ig-stage-item__icon    { color: #0a0a0a; }
.ig-stage-item--mik .ig-stage-item__icon     { color: #2563eb; }
.ig-stage-item--eloadok .ig-stage-item__icon { color: #b45309; }
.ig-stage-item--feny .ig-stage-item__icon    { color: #7c3aed; }
.ig-stage-item--egyeb .ig-stage-item__icon   { color: #6B6B6B; }
.ig-stage-item.is-selected .ig-stage-item__rot { border-color: var(--ig-accent); box-shadow: 0 0 0 3px var(--ig-accent); }
.ig-stage-item__tools { display: none; position: absolute; top: -14px; right: -14px; gap: 2px; }
.ig-stage-item.is-selected .ig-stage-item__tools { display: flex; }
.ig-stage-item__tool { width: 24px; height: 24px; border: 2px solid var(--ig-line); background: var(--ig-paper); font-size: 12px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.ig-stage-item__tool:hover { background: var(--ig-accent); }
.ig-stage-item__tool--del:hover { background: #b91c1c; color: #fff; border-color: #b91c1c; }
.ig-stage-hint { margin: 10px 0 0; font-size: 12px; color: #6B6B6B; font-family: var(--ig-font-mono); }

@media (max-width: 780px) {
	.ig-stage-layout { grid-template-columns: 1fr; }
	.ig-stage-palette { max-height: none; order: 2; }
	.ig-stage-palette__items { grid-template-columns: repeat(4, 1fr); }
	.ig-stage-canvas-wrap { order: 1; }
}
@media (max-width: 480px) {
	.ig-stage-palette__items { grid-template-columns: repeat(3, 1fr); }
	.ig-stage-toolbar .ig-button { flex: 1; min-width: 0; font-size: 12px; padding: 9px 8px; }
}

/* Nyomtatás: csak a vászon látszik */
@media print {
	body * { visibility: hidden; }
	.ig-stage-canvas, .ig-stage-canvas * { visibility: visible; }
	.ig-stage-canvas { position: absolute; left: 0; top: 0; width: 100%; border-width: 2px; }
	[data-stage-noprint], .ig-stage-item__tools { display: none !important; }
}

/* =========================================================================
   JÁTÉKOK
   ========================================================================= */
.ig-games-hub { padding-top: 20px; padding-bottom: 80px; }
.ig-games-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ig-game-card {
	display: flex; flex-direction: column; gap: 6px;
	padding: clamp(22px, 3vw, 34px);
	background: var(--ig-paper); border: 3px solid var(--ig-line);
	color: var(--ig-ink); text-decoration: none;
	transition: transform .15s, box-shadow .15s, background .15s;
	position: relative; overflow: hidden;
}
.ig-game-card:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 0 var(--ig-line); background: #fafad9; }
.ig-game-card__icon { width: 56px; height: 56px; }
.ig-game-card__icon svg { width: 56px; height: 56px; }
.ig-game-card__tag { font-family: var(--ig-font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #6B6B6B; margin-top: 6px; }
.ig-game-card__title { margin: 2px 0 4px; font-size: clamp(20px, 2.4vw, 26px); font-weight: 900; letter-spacing: -.01em; }
.ig-game-card__desc { margin: 0; font-size: 13px; color: #444; line-height: 1.5; flex: 1; }
.ig-game-card__cta { font-family: var(--ig-font-mono); font-weight: 700; font-size: 13px; margin-top: 10px; }
.ig-game-card:hover .ig-game-card__cta { color: #0a0a0a; }
.ig-game-card--gerjedes:hover { background: #fff0f0; }
.ig-game-card--beatpad:hover  { background: #f0f4ff; }
.ig-game-card--furgon:hover   { background: #fff8e6; }
.ig-game-card--decibel:hover  { background: #f0fff4; }

.ig-page-head--games { background: var(--ig-paper); }
.ig-games-back { margin: 4px 0 0; }
.ig-games-back a { font-family: var(--ig-font-mono); font-size: 13px; }
.ig-game-stage { padding-top: 24px; padding-bottom: 80px; }

/* --- Reflex --- */
.ig-rfx { max-width: 720px; margin: 0 auto; }
.ig-rfx__hud { display: flex; gap: 0; margin-bottom: 14px; }
.ig-rfx__stat { flex: 1; border: 3px solid var(--ig-line); margin-right: -3px; padding: 12px 16px; text-align: center; background: var(--ig-paper); }
.ig-rfx__stat span { display: block; font-size: clamp(22px, 3vw, 32px); font-weight: 900; line-height: 1; }
.ig-rfx__stat i { font-style: normal; font-family: var(--ig-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #6B6B6B; }
.ig-rfx__stat--accent { background: var(--ig-accent); }
.ig-rfx__arena { position: relative; height: 420px; border: 3px solid var(--ig-line); background: #0a0a0a; overflow: hidden; }
.ig-rfx__msg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 24px; color: #fff; }
.ig-rfx__big { font-size: clamp(22px, 3vw, 30px); font-weight: 900; margin: 0; }
.ig-rfx__small { color: rgba(255,255,255,.7); margin: 0; max-width: 44ch; font-size: 14px; }
.ig-rfx__target {
	position: absolute; width: 150px; height: 64px;
	background: #b91c1c; color: #fff; border: 3px solid #fff;
	font-family: var(--ig-font-mono); font-weight: 900; font-size: 18px; letter-spacing: .04em;
	cursor: pointer; animation: ig-rfx-pulse .5s infinite alternate;
}
@keyframes ig-rfx-pulse { from { box-shadow: 0 0 0 0 rgba(185,28,28,.6); } to { box-shadow: 0 0 0 12px rgba(185,28,28,0); } }
.ig-rfx__flash { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: var(--ig-font-mono); font-size: 40px; font-weight: 900; color: var(--ig-accent); pointer-events: none; }
.ig-rfx__flash--bad { color: #fca5a5; font-size: 22px; }
.ig-rfx__result { margin-top: 16px; border: 3px solid var(--ig-line); padding: 22px; text-align: center; background: var(--ig-paper); }
.ig-rfx__result-head { font-family: var(--ig-font-mono); font-weight: 800; letter-spacing: .1em; }
.ig-rfx__result-head.is-record { color: #b45309; }
.ig-rfx__avg { font-size: clamp(40px, 8vw, 64px); font-weight: 900; line-height: 1; margin: 8px 0; }
.ig-rfx__avg small { font-size: 16px; font-weight: 600; color: #6B6B6B; }
.ig-rfx__rank { margin: 4px 0 14px; font-size: 15px; }
.ig-rfx__times { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.ig-rfx__times span { font-family: var(--ig-font-mono); font-size: 12px; padding: 4px 8px; background: #f3f3f1; border: 1px solid var(--ig-line); }
.ig-rfx__cta { display: flex; gap: 8px; justify-content: center; }

/* --- Beatpad --- */
.ig-bp { max-width: 720px; margin: 0 auto; }
.ig-bp__bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.ig-bp__btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 2px solid var(--ig-line); background: var(--ig-paper); font-family: var(--ig-font-mono); font-size: 12px; font-weight: 700; cursor: pointer; text-transform: uppercase; }
.ig-bp__btn:hover:not(:disabled) { background: var(--ig-accent); }
.ig-bp__btn:disabled { opacity: .4; cursor: not-allowed; }
.ig-bp__btn.is-on { background: #b91c1c; color: #fff; border-color: #b91c1c; }
.ig-bp__dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; display: inline-block; }
.ig-bp__hint { font-size: 12px; color: #6B6B6B; margin-left: auto; }
.ig-bp__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ig-bp__pad {
	aspect-ratio: 1; border: 3px solid var(--ig-line); background: #0a0a0a; color: #fff;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
	cursor: pointer; position: relative; transition: transform .05s; user-select: none;
}
.ig-bp__pad:nth-child(4n+1) { background: #161616; }
.ig-bp__pad-key { font-family: var(--ig-font-mono); font-size: 11px; color: var(--ig-accent); border: 1px solid rgba(232,255,0,.4); padding: 1px 5px; }
.ig-bp__pad-label { font-family: var(--ig-font-mono); font-size: 11px; letter-spacing: .04em; }
.ig-bp__pad.is-hit { background: var(--ig-accent); color: #0a0a0a; transform: scale(.94); }
.ig-bp__pad.is-hit .ig-bp__pad-key { color: #0a0a0a; border-color: #0a0a0a; }

/* --- Van / Tetris --- */
.ig-van { max-width: 480px; margin: 0 auto; }
.ig-van__top { display: flex; gap: 14px; align-items: flex-start; justify-content: center; }
.ig-van__playfield { position: relative; border: 3px solid var(--ig-line); width: min(300px, 64vw); background: var(--ig-paper); flex-shrink: 0; }
.ig-van__roof { display: block; background: #0a0a0a; color: var(--ig-accent); font-family: var(--ig-font-mono); font-size: 10px; letter-spacing: .16em; text-align: center; padding: 5px; }
.ig-van__playfield canvas { display: block; width: 100%; height: auto; }
.ig-van__side { display: flex; flex-direction: column; gap: 10px; width: 130px; flex-shrink: 0; }
.ig-van__next { border: 3px solid var(--ig-line); background: var(--ig-paper); padding: 8px; text-align: center; }
.ig-van__next-label { display: block; font-family: var(--ig-font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #6B6B6B; margin-bottom: 4px; }
.ig-van__next canvas { display: block; width: 100%; height: auto; }
.ig-van__stat { border: 3px solid var(--ig-line); padding: 10px; text-align: center; background: var(--ig-paper); }
.ig-van__stat span { display: block; font-size: 26px; font-weight: 900; line-height: 1; }
.ig-van__stat i { font-style: normal; font-family: var(--ig-font-mono); font-size: 10px; text-transform: uppercase; color: #6B6B6B; }
.ig-van__stat--accent { background: var(--ig-accent); }
.ig-van__overlay { position: absolute; inset: 0; background: rgba(10,10,10,.9); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 20px; }
.ig-van__big { font-size: 24px; font-weight: 900; margin: 0; }
.ig-van__small { font-size: 13px; color: rgba(255,255,255,.7); margin: 0; max-width: 30ch; }
.ig-van__coupon { background: var(--ig-accent); color: #0a0a0a; padding: 8px 12px; font-size: 13px; font-weight: 700; }
.ig-van__coupon code { font-family: var(--ig-font-mono); }
.ig-van__controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-width: 340px; margin: 16px auto 0; }
.ig-van__ctrl { padding: 16px 0; border: 2px solid var(--ig-line); background: var(--ig-paper); font-size: 20px; font-weight: 700; cursor: pointer; }
.ig-van__ctrl:hover { background: var(--ig-accent); }
.ig-van__ctrl--drop { grid-column: 1 / -1; font-family: var(--ig-font-mono); font-size: 15px; }

/* --- Decibel --- */
.ig-db { max-width: 560px; margin: 0 auto; text-align: center; }
.ig-db__meterwrap { display: flex; gap: 14px; align-items: flex-end; justify-content: center; margin-bottom: 20px; }
.ig-db__meter { width: 80px; height: 280px; border: 3px solid var(--ig-line); background: #0a0a0a; display: flex; align-items: flex-end; overflow: hidden; }
.ig-db__fill { width: 100%; height: 0%; background: #86efac; transition: height .08s linear; }
.ig-db__scale { display: flex; flex-direction: column-reverse; justify-content: space-between; height: 280px; font-family: var(--ig-font-mono); font-size: 11px; color: #6B6B6B; }
.ig-db__readout { display: flex; flex-direction: column; justify-content: center; }
.ig-db__readout span { font-size: clamp(40px, 9vw, 72px); font-weight: 900; line-height: 1; }
.ig-db__readout i { font-style: normal; font-family: var(--ig-font-mono); font-size: 11px; color: #6B6B6B; text-transform: uppercase; }
.ig-db__panel { border: 3px solid var(--ig-line); padding: 24px; background: var(--ig-paper); }
.ig-db__big { font-size: clamp(20px, 3vw, 28px); font-weight: 900; margin: 0 0 6px; }
.ig-db__small { font-size: 14px; color: #444; margin: 0 0 16px; }
.ig-db__note { font-size: 11px; color: #6B6B6B; font-style: italic; margin: 14px 0 0; }
.ig-db__best { margin-top: 14px; font-family: var(--ig-font-mono); font-size: 13px; }
.ig-db__result { margin-top: 16px; border: 3px solid var(--ig-line); padding: 22px; background: var(--ig-paper); }
.ig-db__result-head { font-family: var(--ig-font-mono); font-weight: 800; letter-spacing: .1em; }
.ig-db__result-head.is-record { color: #b45309; }
.ig-db__peak { font-size: clamp(40px, 9vw, 64px); font-weight: 900; line-height: 1; margin: 8px 0; }
.ig-db__peak small { font-size: 18px; color: #6B6B6B; }
.ig-db__rank { margin: 4px 0 14px; font-size: 15px; }
.ig-db__cta { display: flex; gap: 8px; justify-content: center; }

/* --- Beatmatch ritmus-játék --- */
.ig-bm { max-width: 460px; margin: 0 auto; }
.ig-bm__select-title { text-align: center; font-size: 20px; font-weight: 900; margin: 0 0 16px; }
.ig-bm__tracks { display: flex; flex-direction: column; gap: 10px; }
.ig-bm__track { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; border: 3px solid var(--ig-line); background: var(--ig-paper); cursor: pointer; text-align: left; transition: background .12s, transform .1s; }
.ig-bm__track:hover { background: var(--ig-accent); transform: translateX(3px); }
.ig-bm__track-stars { font-family: var(--ig-font-mono); letter-spacing: .1em; color: #b45309; }
.ig-bm__track-name { font-size: 18px; font-weight: 900; }
.ig-bm__track-bpm { font-family: var(--ig-font-mono); font-size: 11px; color: #6B6B6B; text-transform: uppercase; letter-spacing: .06em; }
.ig-bm__help { margin: 16px 0 0; font-size: 12px; color: #6B6B6B; text-align: center; }

.ig-bm__hud { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ig-bm__hud-cell { border: 3px solid var(--ig-line); background: var(--ig-paper); padding: 8px 12px; text-align: center; min-width: 80px; }
.ig-bm__hud-cell span { display: block; font-size: 22px; font-weight: 900; line-height: 1; }
.ig-bm__hud-cell i { font-style: normal; font-family: var(--ig-font-mono); font-size: 9px; text-transform: uppercase; color: #6B6B6B; }
.ig-bm__life { flex: 1; height: 22px; border: 3px solid var(--ig-line); background: #0a0a0a; overflow: hidden; }
.ig-bm__life-fill { height: 100%; width: 100%; background: #86efac; transition: width .15s, background .2s; }

.ig-bm__stage { position: relative; border: 3px solid var(--ig-line); width: min(400px, 88vw); margin: 0 auto; }
.ig-bm__stage canvas { display: block; width: 100%; height: auto; }
.ig-bm__combo { position: absolute; top: 18%; left: 50%; transform: translateX(-50%); font-family: var(--ig-font-display); font-size: 44px; font-weight: 900; color: rgba(232,255,0,.9); pointer-events: none; text-shadow: 0 2px 0 #000; }
.ig-bm__judge { position: absolute; top: 56%; left: 50%; transform: translate(-50%,-50%) scale(.6); font-family: var(--ig-font-display); font-size: 30px; font-weight: 900; opacity: 0; transition: opacity .1s, transform .1s; pointer-events: none; text-shadow: 0 2px 0 #000; }
.ig-bm__judge.is-show { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.ig-bm__judge--p { color: #E8FF00; }
.ig-bm__judge--g { color: #86efac; }
.ig-bm__count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--ig-font-display); font-size: 72px; font-weight: 900; color: #fff; background: rgba(10,10,10,.5); pointer-events: none; }
.ig-bm__count--show { animation: ig-bm-count .7s ease; }
@keyframes ig-bm-count { 0% { transform: scale(1.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(.8); opacity: 0; } }

.ig-bm__lanes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: min(400px, 88vw); margin: 10px auto 0; }
.ig-bm__lane-btn { padding: 18px 0; border: 3px solid var(--ig-line); background: var(--ig-paper); font-family: var(--ig-font-mono); font-size: 20px; font-weight: 800; cursor: pointer; touch-action: manipulation; }
.ig-bm__lane-btn:nth-child(1) { border-bottom: 6px solid #E8FF00; }
.ig-bm__lane-btn:nth-child(2) { border-bottom: 6px solid #2563eb; }
.ig-bm__lane-btn:nth-child(3) { border-bottom: 6px solid #7c3aed; }
.ig-bm__lane-btn:nth-child(4) { border-bottom: 6px solid #b91c1c; }
.ig-bm__lane-btn.is-hit { background: var(--ig-accent); transform: translateY(2px); }
.ig-bm__gamebar { text-align: center; margin-top: 12px; }

.ig-bm__result { text-align: center; border: 3px solid var(--ig-line); background: var(--ig-paper); padding: 28px 22px; max-width: 460px; margin: 0 auto; }
.ig-bm__res-grade { font-family: var(--ig-font-display); font-size: 88px; font-weight: 900; line-height: 1; }
.ig-bm__res-grade--ok { color: #b45309; }
.ig-bm__res-grade--f { color: #b91c1c; }
.ig-bm__res-title { font-size: 18px; font-weight: 800; margin: 0 0 16px; }
.ig-bm__res-stats { display: flex; justify-content: center; gap: 0; margin-bottom: 12px; }
.ig-bm__res-stats div { flex: 1; border: 3px solid var(--ig-line); margin-right: -3px; padding: 10px; }
.ig-bm__res-stats span { display: block; font-size: 24px; font-weight: 900; line-height: 1; }
.ig-bm__res-stats i { font-style: normal; font-family: var(--ig-font-mono); font-size: 9px; text-transform: uppercase; color: #6B6B6B; }
.ig-bm__res-break { display: flex; justify-content: center; gap: 14px; font-family: var(--ig-font-mono); font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.ig-bm__res-break .p { color: #b45309; }
.ig-bm__res-break .g { color: #059669; }
.ig-bm__res-break .m { color: #b91c1c; }
.ig-bm__res-cta { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }

@media (max-width: 640px) {
	.ig-bm__hud-cell { min-width: 64px; padding: 7px 8px; }
	.ig-bm__hud-cell span { font-size: 18px; }
	.ig-bm__res-grade { font-size: 64px; }
	.ig-bm__res-cta { flex-direction: column; }
	.ig-bm__res-cta .ig-button { width: 100%; }
	.ig-bm__lane-btn { padding: 22px 0; }
}

/* --- FOH Hangmérnök --- */
.ig-foh { max-width: 560px; margin: 0 auto; position: relative; }
.ig-foh__hud { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ig-foh__stat { border: 3px solid var(--ig-line); background: var(--ig-paper); padding: 8px 12px; text-align: center; min-width: 78px; }
.ig-foh__stat span { display: block; font-size: 22px; font-weight: 900; line-height: 1; }
.ig-foh__stat i { font-style: normal; font-family: var(--ig-font-mono); font-size: 9px; text-transform: uppercase; color: #6B6B6B; }
.ig-foh__health { flex: 1; position: relative; height: 40px; border: 3px solid var(--ig-line); background: #0a0a0a; overflow: hidden; }
.ig-foh__health-fill { height: 100%; width: 100%; background: #86efac; transition: width .15s linear, background .25s; }
.ig-foh__health-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--ig-font-mono); font-weight: 800; font-size: 12px; color: #0a0a0a; mix-blend-mode: difference; color: #fff; }
.ig-foh__console { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ig-foh__ch { position: relative; aspect-ratio: 3/4; border: 3px solid var(--ig-line); background: var(--ig-paper); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 10px 6px; cursor: pointer; touch-action: manipulation; overflow: hidden; }
.ig-foh__ch-led { width: 12px; height: 12px; border-radius: 50%; background: #cfcfcf; border: 2px solid var(--ig-line); }
.ig-foh__ch-prob { font-family: var(--ig-font-mono); font-size: 11px; font-weight: 800; text-align: center; line-height: 1.1; min-height: 26px; }
.ig-foh__ch-fader { width: 8px; flex: 1; background: #e5e5e5; border: 2px solid var(--ig-line); position: relative; margin: 6px 0; }
.ig-foh__ch-knob { position: absolute; left: -6px; right: -6px; height: 14px; background: var(--ig-line); top: 40%; }
.ig-foh__ch-name { font-family: var(--ig-font-mono); font-size: 10px; color: #6B6B6B; }
.ig-foh__ch.has-problem { animation: ig-foh-pulse .5s infinite alternate; }
.ig-foh__ch.has-problem .ig-foh__ch-led { background: #b91c1c; }
.ig-foh__ch.prob-fb { background: #fde2e2; } .ig-foh__ch.prob-fb .ig-foh__ch-prob { color:#b91c1c; }
.ig-foh__ch.prob-cl { background: #fff3d6; } .ig-foh__ch.prob-cl .ig-foh__ch-prob { color:#b45309; }
.ig-foh__ch.prob-mu { background: #e6e9ff; } .ig-foh__ch.prob-mu .ig-foh__ch-prob { color:#2563eb; }
.ig-foh__ch.prob-ba { background: #e6fff0; } .ig-foh__ch.prob-ba .ig-foh__ch-prob { color:#059669; }
.ig-foh__ch.is-fixed { background: #E8FF00; }
.ig-foh__ch.is-fixed .ig-foh__ch-prob { color: #0a0a0a; }
@keyframes ig-foh-pulse { from { box-shadow: inset 0 0 0 0 rgba(185,28,28,.0); } to { box-shadow: inset 0 0 0 4px rgba(185,28,28,.5); } }
.ig-foh__overlay { position: absolute; inset: 0; background: rgba(10,10,10,.92); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 28px; z-index: 5; }
.ig-foh__big { font-size: 26px; font-weight: 900; margin: 0; }
.ig-foh__small { font-size: 13px; color: rgba(255,255,255,.7); margin: 0; max-width: 44ch; line-height: 1.5; }
.ig-foh__result { border: 3px solid var(--ig-line); background: var(--ig-paper); padding: 26px 22px; text-align: center; }
.ig-foh__res-head { font-family: var(--ig-font-mono); font-weight: 800; letter-spacing: .1em; color: #b91c1c; }
.ig-foh__res-score { font-size: clamp(40px,8vw,60px); font-weight: 900; line-height: 1; margin: 8px 0; }
.ig-foh__res-score small { font-size: 16px; color: #6B6B6B; }
.ig-foh__res-sub { margin: 0 0 14px; color: #444; }
.ig-foh__res-cta { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* --- Rendezvény Tycoon — stabil, fix méretű layout (semmi nem méreteződik át) --- */
.ig-tyc { max-width: 100%; }
.ig-tyc, .ig-tyc input, .ig-tyc button { font-variant-numeric: tabular-nums; } /* azonos szélességű számjegyek → nincs ugrálás */
.ig-tyc__hud { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-bottom: 14px; }
.ig-tyc__stat { border: 3px solid var(--ig-line); margin-right: -3px; padding: 14px 10px; text-align: center; background: var(--ig-paper); overflow: hidden; }
.ig-tyc__stat:last-child { margin-right: 0; }
.ig-tyc__stat span { display: block; font-size: clamp(15px,1.8vw,22px); font-weight: 900; line-height: 1.05; white-space: nowrap; }
.ig-tyc__stat i { display: block; font-style: normal; font-family: var(--ig-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: #6B6B6B; margin-top: 5px; }
.ig-tyc__stat--cash { background: var(--ig-accent); }
.ig-tyc__stat--cash span.is-pop { animation: ig-tyc-pop .5s ease; }
.ig-tyc__stat--cash span.is-debt { color: #b91c1c; }
.ig-tyc__stat--opex span { color: #b91c1c; }
@keyframes ig-tyc-pop { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* Piaci esemény-sáv — fix magasság, nincs ugrálás */
.ig-tyc__event { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 42px; padding: 8px 14px; margin-bottom: 14px; border: 3px solid var(--ig-line); font-family: var(--ig-font-mono); font-size: 12px; font-weight: 800; letter-spacing: .03em; }
.ig-tyc__event--idle { background: #f2f2f2; color: #6B6B6B; font-weight: 600; letter-spacing: 0; }
.ig-tyc__event.is-good { background: #d6f5e1; color: #047a47; border-color: #047a47; }
.ig-tyc__event.is-bad  { background: #fde2e2; color: #b91c1c; border-color: #b91c1c; }
.ig-tyc__event--paused { background: #0a0a0a; color: var(--ig-accent); border-color: #0a0a0a; }

/* Szünet vezérlő */
.ig-tyc__controls { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.ig-tyc__pause { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 18px; font-size: 12px; }
.ig-tyc.is-paused .ig-tyc__cols { opacity: .4; pointer-events: none; filter: grayscale(.4); transition: opacity .15s ease; }

.ig-tyc__cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; align-items: start; }
.ig-tyc__panel { border: 3px solid var(--ig-line); background: var(--ig-paper); padding: 14px; min-width: 0; }
.ig-tyc__panel-title { margin: 0 0 12px; font-size: 14px; font-family: var(--ig-font-mono); text-transform: uppercase; letter-spacing: .06em; }
.ig-tyc__panel-title small { color: #6B6B6B; font-weight: 400; text-transform: none; letter-spacing: 0; }
.ig-tyc__empty { color: #6B6B6B; font-style: italic; font-size: 13px; margin: 0; }
.ig-tyc__flash { background: #fff3d6; border: 2px solid #b45309; color: #b45309; padding: 8px 10px; font-size: 12px; margin: 0 0 10px; }

/* Bejövő bulik — fix magasságú kártyák, fix gombszélesség */
.ig-tyc__gigs { display: flex; flex-direction: column; gap: 8px; }
.ig-tyc__gig { display: flex; align-items: stretch; gap: 10px; border: 2px solid var(--ig-line); padding: 10px; min-height: 92px; }
.ig-tyc__gig.is-premium { border-color: #b45309; background: #fffaf0; }
.ig-tyc__gig-main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.ig-tyc__gig-main strong { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-tyc__gig-meta { display: block; font-family: var(--ig-font-mono); font-size: 11px; color: #6B6B6B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-tyc__gig-reqs { display: flex; flex-wrap: wrap; gap: 4px; }
.ig-tyc__gig-req, .ig-tyc__gig-q { font-family: var(--ig-font-mono); font-size: 10px; font-weight: 800; letter-spacing: .02em; padding: 1px 6px; border: 1px solid var(--ig-line); white-space: nowrap; }
.ig-tyc__gig-req.is-ok   { background: #d6f5e1; color: #047a47; border-color: #047a47; }
.ig-tyc__gig-req.is-need { background: #fde2e2; color: #b91c1c; border-color: #b91c1c; }
.ig-tyc__gig-q.is-kivalo { background: var(--ig-accent); color: #0a0a0a; border-color: #0a0a0a; }
.ig-tyc__gig-q.is-profi  { background: #dbeafe; color: #1e40af; border-color: #1e40af; }
.ig-tyc__gig-q.is-stabil { background: #eee; color: #555; }
.ig-tyc__gig-q.is-off { opacity: .4; }
.ig-tyc__gig-side { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; flex-shrink: 0; width: 124px; }
.ig-tyc__gig-btn { width: 100%; min-height: 34px; padding: 0 6px; font-size: 11px; letter-spacing: .02em; white-space: nowrap; overflow: hidden; flex-shrink: 0; }
.ig-tyc__gig-skip { width: 100%; min-height: 26px; padding: 0 6px; font-size: 10px; letter-spacing: .02em; white-space: nowrap; flex-shrink: 0; }

/* Futó munkák — fix magasság + görgetés, fix kártyaméret */
.ig-tyc__active { max-height: 432px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 2px; }
.ig-tyc__job { border: 2px solid var(--ig-line); padding: 9px 10px; flex-shrink: 0; }
.ig-tyc__job-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; margin-bottom: 6px; }
.ig-tyc__job-top strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ig-tyc__job-top span { font-family: var(--ig-font-mono); font-weight: 700; flex-shrink: 0; }
.ig-tyc__job-bar { height: 10px; background: #e5e5e5; border: 1px solid var(--ig-line); }
.ig-tyc__job-bar div { height: 100%; background: #86efac; transition: width 1s linear; }
.ig-tyc__job-left { font-family: var(--ig-font-mono); font-size: 10px; color: #6B6B6B; text-align: right; margin-top: 4px; }
.ig-tyc__job.is-kivalo { border-left: 5px solid var(--ig-accent); }
.ig-tyc__job.is-profi  { border-left: 5px solid #1e40af; }
.ig-tyc__job.is-stabil { border-left: 5px solid #999; }

/* Fejlesztések — fix sor-magasság, fix gombszélesség (ár-változás nem mozdít) */
.ig-tyc__upgrades { max-height: 384px; overflow-y: auto; }
.ig-tyc__up { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #eee; min-height: 56px; }
.ig-tyc__up:last-of-type { border-bottom: 0; }
.ig-tyc__up-info { flex: 1; min-width: 0; }
.ig-tyc__up-info strong { display: block; font-size: 13px; margin-bottom: 4px; }
.ig-tyc__up-info span { display: inline-block; font-family: var(--ig-font-mono); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ig-ink); background: #e8e8e8; border: 1px solid var(--ig-line); padding: 1px 7px; }
.ig-tyc__up-btn { font-family: var(--ig-font-mono); font-size: 11px; letter-spacing: .02em; min-height: 44px; padding: 0 8px; white-space: nowrap; overflow: hidden; flex-shrink: 0; width: 128px; }
.ig-tyc__reset { width: 100%; margin-top: 14px; font-size: 12px; }

/* Ranglista beküldő sáv + lista (teljes szélességben a játék alatt) */
.ig-tyc__lbbar { margin-top: 16px; border: 3px solid var(--ig-line); background: var(--ig-paper); padding: 14px 16px; }
.ig-tyc__lbbar-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ig-tyc__lbbar-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 200px; }
.ig-tyc__lbbar-eyebrow { display: flex; align-items: center; gap: 7px; font-weight: 900; font-size: 15px; }
.ig-tyc__lbbar-hint { font-size: 12px; color: #6B6B6B; }
.ig-tyc__lbbar-form { display: flex; gap: 8px; }
.ig-tyc__lbbar-name { border: 2px solid var(--ig-line); padding: 9px 12px; font: inherit; width: 200px; }
.ig-tyc__lbbar-btn { white-space: nowrap; }
.ig-tyc__lbbar-rank { font-family: var(--ig-font-mono); font-weight: 800; font-size: 13px; background: var(--ig-accent); padding: 6px 10px; border: 2px solid var(--ig-line); }
.ig-tyc__lbbar-list { margin-top: 14px; border-top: 2px solid var(--ig-line); padding-top: 12px; }
.ig-tyc__lbbar-list .ig-lb__ol { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 28px; margin: 0; padding: 0; list-style: none; }
.ig-tyc__lbbar-list .ig-lb__row { padding: 9px 2px; }
.ig-tyc__lbbar-list .ig-lb__empty { padding: 4px 0; color: #6B6B6B; font-style: italic; font-size: 13px; margin: 0; text-align: left; }
@media (max-width: 640px) { .ig-tyc__lbbar-list .ig-lb__ol { grid-template-columns: 1fr; } }

/* inline ranglista az eredmény-blokkban */
.ig-lb-result__head { font-family: var(--ig-font-mono); font-weight: 800; letter-spacing: .06em; font-size: 13px; margin-bottom: 8px; text-align: left; }
.ig-lb-inline { margin-top: 10px; border: 2px solid var(--ig-line); }
.ig-lb-inline .ig-lb__ol { max-height: 280px; overflow-y: auto; }

@media (max-width: 760px) {
	.ig-tyc__cols { grid-template-columns: 1fr; }
	.ig-tyc__lbbar-form { width: 100%; }
	.ig-tyc__lbbar-name { flex: 1; width: auto; }
}
@media (max-width: 560px) {
	.ig-tyc__hud { grid-template-columns: 1fr 1fr; }
	.ig-tyc__stat { margin-right: 0; margin-bottom: -3px; }
	.ig-tyc__stat:nth-child(odd) { margin-right: -3px; }
}
@media (max-width: 420px) {
	.ig-tyc__stat span { font-size: 16px; }
	.ig-tyc__stat i { font-size: 9px; }
	.ig-tyc__event { font-size: 11px; }
}
@media (max-width: 640px) {
	.ig-foh__console { grid-template-columns: repeat(4, 1fr); gap: 5px; }
	.ig-foh__ch { padding: 8px 3px; }
	.ig-foh__ch-prob { font-size: 9px; min-height: 22px; }
	.ig-foh__stat { min-width: 60px; padding: 7px 8px; }
	.ig-foh__stat span { font-size: 18px; }
	.ig-foh__res-cta { flex-direction: column; }
	.ig-foh__res-cta .ig-button { width: 100%; }
}

/* --- Zajszintmérő (decibel-mérő) — mobil-first --- */
.ig-spl-wrap { padding-top: 22px; padding-bottom: 48px; }
.ig-spl { max-width: 520px; margin: 0 auto; }
.ig-spl__readout { position: relative; border: 3px solid var(--ig-line); background: var(--ig-paper); text-align: center; padding: 26px 16px 18px; transition: background .2s ease; }
.ig-spl__value { display: inline-block; font-size: clamp(76px, 27vw, 150px); font-weight: 900; line-height: .88; font-variant-numeric: tabular-nums; }
.ig-spl__unit { font-family: var(--ig-font-mono); font-size: 20px; font-weight: 800; margin-left: 4px; vertical-align: top; color: #6B6B6B; }
.ig-spl__zone { display: block; margin-top: 12px; font-family: var(--ig-font-mono); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #6B6B6B; }
.ig-spl__readout.is-quiet    { background: #d1fae5; } .ig-spl__readout.is-quiet .ig-spl__zone    { color: #047a47; }
.ig-spl__readout.is-normal   { background: #ecfdf5; } .ig-spl__readout.is-normal .ig-spl__zone   { color: #047a47; }
.ig-spl__readout.is-loud     { background: #fef9c3; } .ig-spl__readout.is-loud .ig-spl__zone     { color: #a16207; }
.ig-spl__readout.is-veryloud { background: #ffedd5; } .ig-spl__readout.is-veryloud .ig-spl__zone { color: #c2410c; }
.ig-spl__readout.is-harmful  { background: #fee2e2; } .ig-spl__readout.is-harmful .ig-spl__value { color: #b91c1c; } .ig-spl__readout.is-harmful .ig-spl__zone { color: #b91c1c; }

.ig-spl__gauge { position: relative; height: 26px; border: 3px solid var(--ig-line); border-top: 0; background: #f2f2f2; overflow: hidden; }
.ig-spl__gauge-fill { height: 100%; width: 0; background: #34d399; transition: width .12s linear; }
.ig-spl__gauge-fill.is-loud { background: var(--ig-accent); }
.ig-spl__gauge-fill.is-veryloud { background: #f59e0b; }
.ig-spl__gauge-fill.is-harmful { background: #dc2626; }
.ig-spl__gauge-min, .ig-spl__gauge-max { position: absolute; bottom: 3px; font-family: var(--ig-font-mono); font-size: 9px; font-weight: 800; color: #0a0a0a; background: rgba(255,255,255,.72); padding: 0 4px; }
.ig-spl__gauge-min { left: 4px; } .ig-spl__gauge-max { right: 4px; }

.ig-spl__stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 14px 0 18px; }
.ig-spl__stat { border: 2px solid var(--ig-line); margin-right: -2px; padding: 12px 6px; text-align: center; }
.ig-spl__stat:last-child { margin-right: 0; }
.ig-spl__stat span { display: block; font-size: 26px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.ig-spl__stat i { display: block; margin-top: 5px; font-style: normal; font-family: var(--ig-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #6B6B6B; }
.ig-spl__stat--avg { background: var(--ig-accent); }
.ig-spl__stat--avg i { color: #0a0a0a; }

.ig-spl__controls { display: flex; gap: 10px; }
.ig-spl__toggle { flex: 2; }
.ig-spl__resetbtn { flex: 1; }
.ig-spl__toggle.is-on { background: #dc2626; color: #fff; border-color: #dc2626; }

.ig-spl__cal { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0; border: 2px solid var(--ig-line); padding: 12px 14px; }
.ig-spl__cal-label { font-family: var(--ig-font-mono); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.ig-spl__cal-btn { width: 44px; height: 44px; border: 2px solid var(--ig-line); background: var(--ig-paper); font-size: 22px; font-weight: 900; line-height: 1; cursor: pointer; flex-shrink: 0; }
.ig-spl__cal-btn:active { background: var(--ig-accent); }
.ig-spl__cal-val { font-family: var(--ig-font-mono); font-weight: 800; min-width: 58px; text-align: center; font-variant-numeric: tabular-nums; }
.ig-spl__cal-hint { flex-basis: 100%; font-size: 11px; color: #6B6B6B; }

.ig-spl__legend { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 7px; }
.ig-spl__legend li { font-size: 13px; color: #333; display: flex; gap: 10px; }
.ig-spl__legend b { font-family: var(--ig-font-mono); flex-shrink: 0; min-width: 56px; }
.ig-spl__note { margin-top: 16px; font-size: 12px; color: #6B6B6B; font-style: italic; line-height: 1.5; }

/* --- Konvoj — felülnézetes furgon-vezetés --- */
.ig-knv { --knv-accent: #E8FF00; max-width: 760px; margin: 0 auto; }
.ig-knv__hud { display: flex; align-items: stretch; gap: 0; margin-bottom: 0; }
.ig-knv__level { flex: 1; min-width: 0; display: flex; align-items: center; padding: 10px 14px; border: 3px solid var(--ig-line); background: var(--knv-accent); font-family: var(--ig-font-mono); font-weight: 900; font-size: 14px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-knv__stat { border: 3px solid var(--ig-line); border-left: 0; padding: 8px 12px; text-align: center; background: var(--ig-paper); min-width: 70px; }
.ig-knv__stat span { display: block; font-size: 20px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.ig-knv__stat i { font-style: normal; font-family: var(--ig-font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: #6B6B6B; }
.ig-knv__stat--time.is-low span { color: #dc2626; }
.ig-knv__stat--gear.is-done span { color: #15803d; }
.ig-knv__stat--score { background: var(--ig-accent); }

.ig-knv__stage { position: relative; border: 3px solid var(--ig-line); border-top: 0; line-height: 0; background: #e9e6df; }
.ig-knv__canvas { display: block; width: 100%; height: auto; touch-action: none; }
.ig-knv--3d .ig-knv__stage { background: #161a28; }
.ig-knv--3d .ig-knv__canvas { background: #161a28; }
.ig-knv__radar { position: absolute; right: 12px; bottom: 12px; width: 112px; height: 112px; border-radius: 50%; z-index: 4; pointer-events: none; box-shadow: 0 4px 18px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.08); }
@media (max-width: 640px){ .ig-knv__radar { width: 84px; height: 84px; right: 8px; bottom: 8px; } }
.ig-knv__banner { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background: #0a0a0a; color: var(--knv-accent); font-family: var(--ig-font-mono); font-weight: 800; font-size: 13px; letter-spacing: .04em; padding: 7px 14px; white-space: nowrap; line-height: 1.1; z-index: 3; }
.ig-knv__overlay, .ig-knv__result { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 24px; background: rgba(245,242,236,.94); z-index: 4; line-height: 1.4; }
.ig-knv__overlay[hidden], .ig-knv__result[hidden], .ig-knv__banner[hidden] { display: none !important; }
.ig-knv__big { font-size: clamp(22px, 4vw, 34px); font-weight: 900; margin: 0; }
.ig-knv__small { max-width: 540px; margin: 0; font-size: 14px; color: #333; }
.ig-knv__keys { margin: 0; font-family: var(--ig-font-mono); font-size: 11px; color: #6B6B6B; }
.ig-knv__res-head { font-family: var(--ig-font-mono); font-weight: 900; font-size: 20px; letter-spacing: .04em; }
.ig-knv__res-head.is-win { background: var(--ig-accent); padding: 4px 12px; }
.ig-knv__res-score { font-size: 44px; font-weight: 900; line-height: 1; }
.ig-knv__res-score small { font-size: 16px; color: #6B6B6B; }
.ig-knv__res-sub { margin: 0; font-size: 13px; color: #333; max-width: 460px; }
.ig-knv__res-cta { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ig-knv .ig-lb-result { width: 100%; max-width: 380px; }

.ig-knv__pad { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.ig-knv__pad-steer, .ig-knv__pad-drive { display: flex; gap: 8px; }
.ig-knv__btn { width: 74px; height: 62px; border: 3px solid var(--ig-line); background: var(--ig-paper); font-family: var(--ig-font-mono); font-weight: 900; font-size: 22px; cursor: pointer; user-select: none; touch-action: none; -webkit-tap-highlight-color: transparent; }
.ig-knv__btn--gas { background: var(--ig-accent); width: 92px; font-size: 15px; }
.ig-knv__btn--brake { font-size: 13px; width: 66px; }
.ig-knv__btn--drift { font-size: 13px; width: 66px; border-color: #0a0a0a; box-shadow: inset 0 0 0 2px var(--knv-accent); }
.ig-knv__btn--door { font-size: 12px; width: 66px; background: #12141c; color: #fff; border-color: var(--knv-accent); }
.ig-knv__btn.is-on { background: #0a0a0a; color: var(--knv-accent); }
@media (max-width: 520px) {
	.ig-knv__hud { flex-wrap: wrap; }
	.ig-knv__level { flex-basis: 100%; border-bottom: 0; }
	.ig-knv__stat { flex: 1; border-left: 3px solid var(--ig-line); border-right: 0; min-width: 0; }
	.ig-knv__stat:last-child { border-right: 3px solid var(--ig-line); }
	.ig-knv__pad-steer, .ig-knv__pad-drive { gap: 6px; }
	.ig-knv__btn { width: 56px; height: 60px; font-size: 18px; }
	.ig-knv__btn--gas { width: 74px; font-size: 13px; }
	.ig-knv__btn--brake, .ig-knv__btn--drift, .ig-knv__btn--door { width: 52px; font-size: 10px; }
}

/* --- Játék + ranglista egymás mellett --- */
.ig-game-layout { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
.ig-game-layout__main { min-width: 0; }
/* a játékok belső középre-igazítása felülírva, hadd töltsék ki az oszlopot */
.ig-game-layout__main .ig-rfx,
.ig-game-layout__main .ig-db,
.ig-game-layout__main .ig-van,
.ig-game-layout__main .ig-foh,
.ig-game-layout__main .ig-tyc,
.ig-game-layout__main .ig-knv,
.ig-game-layout__main .ig-bm { max-width: none; margin: 0; }
.ig-game-layout__side { position: sticky; top: 16px; }

/* --- Ranglista (leaderboard) --- */
.ig-lb { margin: 0; border: 3px solid var(--ig-line); background: var(--ig-paper); }
.ig-lb__title { margin: 0; padding: 14px 18px; border-bottom: 3px solid var(--ig-line); background: var(--ig-accent); font-size: 16px; font-weight: 900; letter-spacing: -.01em; }
.ig-lb__empty { padding: 22px 18px; margin: 0; text-align: center; color: #6B6B6B; font-style: italic; font-size: 14px; }
.ig-lb__ol { list-style: none; margin: 0; padding: 0; }
.ig-lb__row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid #eee; }
.ig-lb__row:last-child { border-bottom: 0; }
.ig-lb__pos { font-family: var(--ig-font-mono); font-weight: 800; font-size: 15px; color: #6B6B6B; }
.ig-lb__row.is-top .ig-lb__pos { color: #0a0a0a; }
.ig-lb__row:nth-child(1) .ig-lb__pos::before { content: '🥇 '; }
.ig-lb__row:nth-child(2) .ig-lb__pos::before { content: '🥈 '; }
.ig-lb__row:nth-child(3) .ig-lb__pos::before { content: '🥉 '; }
.ig-lb__row:nth-child(-n+3) .ig-lb__pos { content: ''; }
.ig-lb__name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-lb__score { font-family: var(--ig-font-mono); font-weight: 800; }
.ig-lb__score i { font-style: normal; font-size: 11px; color: #6B6B6B; font-weight: 400; }
.ig-lb__row.is-me { background: var(--ig-accent); }
.ig-lb__row.is-me .ig-lb__pos { color: #0a0a0a; }

/* Eredmény-űrlap (név beküldés) */
.ig-lb-result { margin: 14px 0; }
.ig-lb-form { display: flex; gap: 8px; }
.ig-lb-form__name { flex: 1; border: 2px solid var(--ig-line); padding: 9px 12px; font: inherit; }
.ig-lb-form__btn { white-space: nowrap; }
.ig-lb-form__rank { margin: 8px 0 0; font-family: var(--ig-font-mono); font-weight: 800; font-size: 14px; }
.ig-lb-result--dark .ig-lb-form__name { background: #0a0a0a; color: #fff; border-color: #fff; }
.ig-lb-result--dark .ig-lb-form__rank { color: var(--ig-accent); }
.ig-van__overcta { display: flex; gap: 8px; justify-content: center; }

/* Keskenyebb képernyőn a ranglista a játék alá kerül */
@media (max-width: 900px) {
	.ig-game-layout { grid-template-columns: 1fr; }
	.ig-game-layout__side { position: static; }
	.ig-game-layout__main .ig-rfx,
	.ig-game-layout__main .ig-db,
	.ig-game-layout__main .ig-van,
	.ig-game-layout__main .ig-foh,
	.ig-game-layout__main .ig-bm { margin: 0 auto; }
}
/* Gyors koppintás mobilon — nincs dupla-koppintásos zoom késleltetés */
.ig-bp__pad, .ig-rfx__arena, .ig-rfx__target, .ig-van__ctrl,
.ig-rfx__cta .ig-button, .ig-db__panel .ig-button { touch-action: manipulation; }

/* Érintős eszközök: a billentyű-utalások feleslegesek */
@media (hover: none), (pointer: coarse) {
	.ig-bp__pad-key { display: none; }
	.ig-bp__hint { display: none; }
}

@media (max-width: 640px) {
	.ig-game-stage { padding-top: 16px; padding-bottom: 64px; }

	/* --- Hub kártyák --- */
	.ig-games-grid { grid-template-columns: 1fr; gap: 12px; }
	.ig-game-card { padding: 20px; }
	.ig-game-card__icon, .ig-game-card__icon svg { width: 44px; height: 44px; }

	/* --- Reflex --- */
	.ig-rfx__hud { flex-wrap: nowrap; }
	.ig-rfx__stat { padding: 10px 6px; }
	.ig-rfx__stat span { font-size: 20px; }
	.ig-rfx__stat i { font-size: 9px; }
	.ig-rfx__arena { height: 56vh; min-height: 300px; }
	.ig-rfx__target { width: 120px; height: 56px; font-size: 15px; }
	.ig-rfx__big { font-size: 22px; }
	.ig-rfx__avg { font-size: 52px; }
	.ig-rfx__cta { flex-direction: column; }
	.ig-rfx__cta .ig-button { width: 100%; }

	/* --- Beatpad --- */
	.ig-bp__bar { gap: 6px; }
	.ig-bp__bar .ig-bp__btn { flex: 1; justify-content: center; min-width: 0; padding: 11px 8px; }
	.ig-bp__grid { gap: 6px; }
	.ig-bp__pad { border-width: 2px; gap: 0; }
	.ig-bp__pad-label { font-size: 9px; padding: 0 2px; }

	/* --- Van / Tetris --- */
	.ig-van__top { flex-direction: column; align-items: center; }
	.ig-van__playfield { width: min(320px, 88vw); }
	.ig-van__side { flex-direction: row; width: min(320px, 88vw); gap: 6px; }
	.ig-van__side .ig-van__stat { flex: 1; padding: 8px 4px; }
	.ig-van__side .ig-van__stat span { font-size: 20px; }
	.ig-van__next { flex: 1; padding: 6px; }
	.ig-van__controls { gap: 5px; max-width: min(320px, 88vw); }
	.ig-van__ctrl { padding: 16px 0; font-size: 20px; }
	.ig-van__ctrl--drop { padding: 14px 0; }
	.ig-van__overcta { flex-direction: column; }
	.ig-van__overcta .ig-button { width: 100%; }

	/* --- Decibel --- */
	.ig-db__meterwrap { gap: 10px; }
	.ig-db__meter { width: 64px; height: 220px; }
	.ig-db__scale { height: 220px; }
	.ig-db__readout span { font-size: 48px; }
	.ig-db__panel { padding: 20px 16px; }
	.ig-db__cta { flex-direction: column; }
	.ig-db__cta .ig-button { width: 100%; }

	/* --- Ranglista --- */
	.ig-lb-form { flex-direction: column; }
	.ig-lb-form__btn { width: 100%; }
	.ig-lb__row { grid-template-columns: 36px 1fr auto; padding: 9px 14px; }
}

.ig-checkout__shipping-toggle {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-family: var(--ig-font-mono);
	font-size: 12px;
	gap: 10px;
	letter-spacing: 0.06em;
	margin-bottom: 12px;
	text-transform: uppercase;
}

.ig-checkout__shipping-toggle input {
	accent-color: var(--ig-ink);
	height: 18px;
	width: 18px;
}

.ig-method-list {
	display: grid;
	gap: 8px;
}

.ig-method-card {
	align-items: center;
	background: #fafafa;
	border: var(--ig-stroke) solid var(--ig-line);
	cursor: pointer;
	display: grid;
	gap: 16px;
	grid-template-columns: 22px minmax(0, 1fr) auto;
	padding: 14px 18px;
	transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.ig-method-card[hidden] {
	display: none !important;
}

.ig-method-card:hover {
	background: #fff;
}

.ig-method-card:has(input:checked) {
	background: var(--ig-paper);
	box-shadow: 4px 4px 0 var(--ig-ink);
	transform: translate(-2px, -2px);
}

.ig-method-card input[type="radio"] {
	accent-color: var(--ig-ink);
	height: 18px;
	margin-top: 2px;
	width: 18px;
}

.ig-method-card__body {
	display: block;
	min-width: 0;
}

.ig-method-card__title {
	display: block;
	font-family: var(--ig-font-display);
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.ig-method-card__note {
	color: var(--ig-muted);
	display: block;
	font-family: var(--ig-font-mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	line-height: 1.45;
	margin-top: 4px;
}

.ig-method-card__auto {
	color: var(--ig-muted);
	display: block;
	font-family: var(--ig-font-mono);
	font-size: 10px;
	font-style: italic;
	letter-spacing: 0.02em;
	line-height: 1.45;
	margin-top: 6px;
	opacity: 0.85;
}

.ig-method-card__auto::before {
	color: var(--ig-accent-ink);
	content: "ⓘ ";
	font-style: normal;
	margin-right: 2px;
}

.ig-method-card__price {
	font-family: var(--ig-font-mono);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ig-checkout__summary {
	min-width: 0;
}

.ig-checkout__summary-inner {
	background: var(--ig-paper);
	border: var(--ig-stroke-bold) solid var(--ig-line);
	padding: clamp(20px, 2.5vw, 32px);
	position: sticky;
	/* A sticky site-header ~72-80px magas — annyival lejjebb fixáljuk, hogy
	   ne legyen levágva a tetejéből semmi scroll közben. */
	top: 96px;
	max-height: calc(100vh - 110px);
	overflow-y: auto;
}

.ig-checkout__items {
	display: grid;
	gap: 8px;
	list-style: none;
	margin: 0 0 16px;
	padding: 0 0 16px;
	border-bottom: 1.5px dashed var(--ig-line);
}

.ig-checkout__items li {
	display: grid;
	font-family: var(--ig-font-mono);
	font-size: 12px;
	gap: 6px;
	letter-spacing: 0.02em;
	line-height: 1.5;
}

.ig-checkout__items-top {
	display: flex;
	gap: 12px;
	justify-content: space-between;
}

.ig-checkout__items-name em {
	color: var(--ig-muted);
	font-style: normal;
}

.ig-checkout__items-price {
	font-weight: 800;
	white-space: nowrap;
}

.ig-checkout__items-stepper {
	align-items: center;
	display: inline-flex;
	gap: 2px;
}

.ig-checkout__items-btn {
	background: var(--ig-paper);
	border: 1.5px solid var(--ig-line);
	color: var(--ig-ink);
	cursor: pointer;
	font-family: var(--ig-font-display);
	font-size: 13px;
	font-weight: 900;
	height: 24px;
	line-height: 1;
	padding: 0;
	touch-action: manipulation;
	transition: background 120ms ease, color 120ms ease;
	-webkit-user-select: none;
	user-select: none;
	width: 24px;
}

.ig-checkout__items-btn:hover {
	background: var(--ig-accent);
}

.ig-checkout__items-btn:disabled {
	background: var(--ig-paper);
	color: var(--ig-muted);
	cursor: not-allowed;
	opacity: 0.35;
	pointer-events: none;
}

.ig-checkout__items-qty {
	background: var(--ig-paper);
	border-bottom: 1.5px solid var(--ig-line);
	border-top: 1.5px solid var(--ig-line);
	color: var(--ig-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ig-font-display);
	font-size: 13px;
	font-weight: 800;
	height: 24px;
	min-width: 28px;
	padding: 0 6px;
}

.ig-checkout__items-unit {
	color: var(--ig-muted);
	font-family: var(--ig-font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	margin-left: 4px;
	text-transform: uppercase;
}

.ig-checkout__totals {
	display: grid;
	gap: 6px;
	grid-template-columns: 1fr auto;
	margin: 0 0 16px;
	padding: 0 0 16px;
	border-bottom: 1.5px dashed var(--ig-line);
}

.ig-checkout__totals dt {
	color: var(--ig-muted);
	font-family: var(--ig-font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ig-checkout__totals dd {
	font-family: var(--ig-font-mono);
	font-size: 13px;
	font-weight: 700;
	margin: 0;
	text-align: right;
}

.ig-checkout__grand {
	align-items: baseline;
	display: flex;
	justify-content: space-between;
	margin: 0 0 20px;
}

.ig-checkout__grand span {
	font-family: var(--ig-font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ig-checkout__grand strong {
	background: var(--ig-accent);
	color: var(--ig-accent-ink);
	font-family: var(--ig-font-display);
	font-size: clamp(22px, 2.5vw, 30px);
	font-weight: 900;
	letter-spacing: -0.01em;
	padding: 4px 10px;
}

.ig-checkout__submit {
	display: block;
	text-align: center;
	width: 100%;
}

.ig-checkout__submit:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	background: var(--ig-ink);
	color: var(--ig-paper);
}

.ig-checkout__legal {
	color: var(--ig-muted);
	font-family: var(--ig-font-mono);
	font-size: 10px;
	letter-spacing: 0.04em;
	line-height: 1.5;
	margin: 12px 0 0;
	text-transform: uppercase;
}

/* Consent gate — két kötelező checkbox a Rendelés gomb felett. */
.ig-checkout__consent {
	display: grid;
	gap: 10px;
	margin: 18px 0 14px;
	padding: 14px 16px;
	border: 2px solid var(--ig-ink);
	background: var(--ig-paper);
}

.ig-checkout__consent-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	line-height: 1.45;
	cursor: pointer;
}

.ig-checkout__consent-row input[type="checkbox"] {
	flex-shrink: 0;
	margin-top: 2px;
	width: 20px;
	height: 20px;
	accent-color: var(--ig-ink);
	cursor: pointer;
}

.ig-checkout__consent-row span {
	color: var(--ig-ink);
}

.ig-checkout__consent-row a {
	color: var(--ig-ink);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--ig-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.ig-checkout__consent-row a:hover {
	background: var(--ig-accent);
}

.invgroup-allow-list {
	display: grid;
	gap: 2px;
	max-width: 220px;
}

.invgroup-allow-list label {
	align-items: center;
	display: flex;
	font-family: monospace;
	font-size: 11px;
	gap: 6px;
}

@media (max-width: 880px) {
	.ig-checkout__layout {
		grid-template-columns: 1fr;
	}
	.ig-checkout__summary-inner {
		position: static;
	}
}

/* ==========================================================================
   404 + nice-try (login cloak)
   ========================================================================== */

.ig-404,
.ig-nice__wrap {
	padding-top: clamp(48px, 7vw, 112px);
	padding-bottom: clamp(56px, 7vw, 112px);
}

.ig-404__head,
.ig-nice__head {
	background: var(--ig-paper);
	border: var(--ig-stroke-bold) solid var(--ig-line);
	margin-bottom: clamp(32px, 5vw, 64px);
	padding: clamp(28px, 4vw, 64px);
	position: relative;
}

.ig-404__title {
	align-items: center;
	display: flex;
	gap: clamp(8px, 1.5vw, 22px);
	font-family: var(--ig-font-display);
	font-size: clamp(120px, 22vw, 320px);
	font-weight: 900;
	letter-spacing: -0.06em;
	line-height: 0.9;
	margin: 16px 0 24px;
	text-transform: uppercase;
}

.ig-404__zero {
	background: var(--ig-accent);
	border: var(--ig-stroke-bold) solid var(--ig-line);
	border-radius: 50%;
	display: inline-block;
	height: 0.85em;
	margin: 0 0.05em;
	position: relative;
	width: 0.85em;
}

.ig-404__zero::before,
.ig-404__zero::after {
	background: var(--ig-ink);
	content: "";
	height: 0.18em;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 0.55em;
}
.ig-404__zero::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.ig-404__lead,
.ig-nice__lead {
	font-family: var(--ig-font-display);
	font-size: clamp(18px, 1.6vw, 24px);
	font-weight: 500;
	line-height: 1.4;
	margin: 0 0 24px;
	max-width: 60ch;
}

.ig-404__search {
	border-top: 1.5px dashed var(--ig-line);
	margin-top: clamp(24px, 3vw, 40px);
	padding-top: clamp(20px, 2.5vw, 32px);
}

.ig-404__search .ig-eyebrow {
	display: block;
	margin-bottom: 10px;
}

.ig-404__search-row {
	display: grid;
	gap: 8px;
	grid-template-columns: minmax(0, 1fr) auto;
}

.ig-404__search-row input {
	background: var(--ig-paper);
	border: var(--ig-stroke) solid var(--ig-line);
	font-family: var(--ig-font-mono);
	font-size: 16px;
	letter-spacing: 0.04em;
	padding: 12px 14px;
}

.ig-404__products,
.ig-nice__products {
	margin-top: clamp(28px, 4vw, 56px);
}

@media (max-width: 540px) {
	.ig-404__search-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Order detail (account → Rendelés → részletek)
   ========================================================================== */

.ig-order-detail__head {
	background: var(--ig-bone, #f6f6f3);
	border: var(--ig-stroke) solid var(--ig-line);
	margin: 16px 0 20px;
	padding: 18px 20px;
}

.ig-order-detail__title {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 14px;
}

.ig-order-detail__id {
	background: var(--ig-ink);
	color: var(--ig-paper);
	font-family: var(--ig-font-mono);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 5px 10px;
}

.ig-order-detail__meta {
	display: grid;
	gap: 8px 28px;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	margin: 0;
}

.ig-order-detail__meta > div {
	min-width: 0;
}

.ig-order-detail__meta dt {
	color: var(--ig-muted);
	font-family: var(--ig-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0 0 2px;
	text-transform: uppercase;
}

.ig-order-detail__meta dd {
	font-family: var(--ig-font-display);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0;
	word-break: break-word;
}

.ig-order-detail__cta {
	align-items: center;
	background: var(--ig-paper);
	border: var(--ig-stroke) solid var(--ig-line);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 24px;
	padding: 16px 20px;
}

.ig-order-detail__tracking-no {
	color: var(--ig-muted);
	font-family: var(--ig-font-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	word-break: break-all;
}

.ig-order-detail__items {
	display: grid;
	gap: 0;
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.ig-order-detail__items > li {
	align-items: center;
	background: var(--ig-paper);
	border: var(--ig-stroke) solid var(--ig-line);
	display: grid;
	gap: 12px 16px;
	grid-template-columns: minmax(0, 1fr) auto auto;
	margin: 0 0 -1px;
	padding: 12px 16px;
}

.ig-order-detail__item-body {
	min-width: 0;
}

.ig-order-detail__item-name {
	display: block;
	font-family: var(--ig-font-display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.ig-order-detail__item-sku {
	color: var(--ig-muted);
	display: block;
	font-family: var(--ig-font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	margin-top: 2px;
	text-transform: uppercase;
}

.ig-order-detail__item-qty {
	color: var(--ig-muted);
	font-family: var(--ig-font-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ig-order-detail__item-price {
	font-family: var(--ig-font-display);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.ig-order-detail__totals {
	display: grid;
	gap: 4px 14px;
	grid-template-columns: minmax(0, 1fr) auto;
	margin: 0 0 12px;
}

.ig-order-detail__totals dt {
	color: var(--ig-muted);
	font-family: var(--ig-font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ig-order-detail__totals dd {
	font-family: var(--ig-font-mono);
	font-size: 13px;
	font-weight: 700;
	margin: 0;
	text-align: right;
}

.ig-order-detail__grand {
	align-items: center;
	border-top: 2px solid var(--ig-ink);
	display: flex;
	justify-content: space-between;
	margin: 0 0 28px;
	padding-top: 12px;
}

.ig-order-detail__grand span {
	font-family: var(--ig-font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ig-order-detail__grand strong {
	background: var(--ig-accent);
	color: var(--ig-accent-ink);
	font-family: var(--ig-font-display);
	font-size: clamp(20px, 2.2vw, 28px);
	font-weight: 900;
	letter-spacing: -0.01em;
	padding: 4px 12px;
}

.ig-order-detail__addresses {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ig-order-detail__addresses > div {
	background: var(--ig-paper);
	border: var(--ig-stroke) solid var(--ig-line);
	padding: 16px 18px;
}

.ig-order-detail__addresses h3 {
	font-family: var(--ig-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0 0 10px;
	text-transform: uppercase;
}

.ig-order-detail__addresses address {
	font-family: var(--ig-font-mono);
	font-size: 13px;
	font-style: normal;
	letter-spacing: 0.02em;
	line-height: 1.6;
}

@media (max-width: 640px) {
	.ig-order-detail__items > li {
		grid-template-areas:
			"body  price"
			"qty   price";
		grid-template-columns: minmax(0, 1fr) auto;
	}
	.ig-order-detail__item-body  { grid-area: body; }
	.ig-order-detail__item-qty   { grid-area: qty; }
	.ig-order-detail__item-price {
		align-self: center;
		font-size: 17px;
		grid-area: price;
	}
	.ig-order-detail__addresses {
		grid-template-columns: 1fr;
	}
	.ig-order-detail__cta {
		flex-direction: column;
		align-items: stretch;
	}
	.ig-order-detail__cta .ig-button {
		width: 100%;
		justify-content: center;
		text-align: center;
	}
}

/* ==========================================================================
   Orders list (account → Áttekintés + Rendelések)
   ========================================================================== */

.ig-orders-list {
	display: grid;
	gap: 0;
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}

.ig-orders-list__item {
	margin: 0 0 -1.5px;
}

.ig-orders-list__link {
	align-items: center;
	background: var(--ig-paper);
	border: var(--ig-stroke) solid var(--ig-line);
	color: var(--ig-ink);
	display: grid;
	gap: 14px 18px;
	grid-template-columns: minmax(0, 1fr) auto 24px;
	padding: 14px 18px;
	text-decoration: none;
	transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.ig-orders-list__link:hover,
.ig-orders-list__link:focus-visible {
	background: var(--ig-bone, #f6f6f3);
	box-shadow: 4px 4px 0 var(--ig-ink);
	outline: none;
	transform: translate(-2px, -2px);
}

.ig-orders-list__head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	min-width: 0;
}

.ig-orders-list__id {
	background: var(--ig-ink);
	color: var(--ig-paper);
	font-family: var(--ig-font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 4px 8px;
}

.ig-orders-list__meta {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	justify-content: flex-end;
	text-align: right;
}

.ig-orders-list__meta time {
	color: var(--ig-muted);
	font-family: var(--ig-font-mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ig-orders-list__amount {
	font-family: var(--ig-font-display);
	font-size: clamp(16px, 1.4vw, 20px);
	font-weight: 900;
	letter-spacing: -0.01em;
}

.ig-orders-list__arrow {
	color: var(--ig-muted);
	font-family: var(--ig-font-mono);
	font-size: 16px;
	font-weight: 700;
	text-align: right;
	transition: color 140ms ease, transform 140ms ease;
}

.ig-orders-list__link:hover .ig-orders-list__arrow {
	color: var(--ig-ink);
	transform: translateX(4px);
}

@media (max-width: 540px) {
	.ig-orders-list__link {
		gap: 8px 12px;
		grid-template-columns: minmax(0, 1fr) auto;
		padding: 12px 14px;
	}
	.ig-orders-list__head {
		grid-column: 1 / -1;
	}
	.ig-orders-list__meta {
		justify-content: space-between;
		text-align: left;
		width: 100%;
	}
	.ig-orders-list__arrow {
		display: none;
	}
}

/* ==========================================================================
   Order status badge
   ========================================================================== */

.ig-status-badge {
	background: #eee;
	border: 1.5px solid var(--ig-ink);
	color: var(--ig-ink);
	display: inline-block;
	font-family: var(--ig-font-mono);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1;
	padding: 6px 10px;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
}

.ig-status-badge.is-status-blue   { background: #e6f0ff; border-color: #2a5fc3; color: #1d3f87; }
.ig-status-badge.is-status-yellow { background: var(--ig-accent); border-color: var(--ig-ink); color: var(--ig-accent-ink); }
.ig-status-badge.is-status-green  { background: #d8f5dd; border-color: #1f7a37; color: #1f5a2a; }
.ig-status-badge.is-status-red    { background: #ffe5e5; border-color: #c02323; color: #8a1818; }
.ig-status-badge.is-status-grey   { background: #ececec; border-color: #555; color: #333; }

/* ==========================================================================
   About page
   ========================================================================== */

.ig-about {
	display: block;
}

/* Top padding lives ONLY on .ig-page-head — see comment there. The intro
   section just keeps a bottom divider + bottom breathing room. */
.ig-about__intro {
	border-bottom: var(--ig-stroke-bold) solid var(--ig-line);
	padding: 0 0 clamp(48px, 6vw, 96px);
}

.ig-about__body {
	display: grid;
	gap: clamp(16px, 2vw, 24px);
	margin-top: clamp(24px, 3vw, 40px);
	max-width: 72ch;
}

.ig-about__lead {
	font-family: var(--ig-font-display);
	font-size: clamp(18px, 1.5vw, 22px);
	font-weight: 500;
	line-height: 1.45;
	margin: 0;
}

.ig-about__lead a {
	color: var(--ig-ink);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.ig-about__lead a:hover {
	background: var(--ig-accent);
	color: var(--ig-accent-ink);
	text-decoration: none;
}

.ig-about__lead strong {
	background: var(--ig-accent);
	color: var(--ig-accent-ink);
	font-weight: 800;
	padding: 0 0.18em;
}

.ig-about__signature {
	border-left: 6px solid var(--ig-ink);
	margin-top: clamp(28px, 4vw, 48px);
	padding: 4px 0 4px 20px;
	position: relative;
}

.ig-about__sig-mark {
	color: var(--ig-muted);
	font-family: var(--ig-font-mono);
	font-size: 12px;
	letter-spacing: 0.16em;
	left: -34px;
	position: absolute;
	top: 6px;
}

.ig-about__sig-name {
	font-family: var(--ig-font-display);
	font-size: clamp(20px, 1.6vw, 24px);
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 0;
}

.ig-about__sig-title {
	color: var(--ig-muted);
	font-family: var(--ig-font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	margin: 4px 0 0;
	text-transform: uppercase;
}

.ig-about__sig-co {
	font-family: var(--ig-font-display);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 6px 0 0;
}

.ig-about__why {
	background: var(--ig-paper-soft, #f3f3f1);
	border-bottom: var(--ig-stroke-bold) solid var(--ig-line);
	padding: clamp(56px, 8vw, 120px) 0;
}

.ig-about__cards {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: clamp(32px, 4vw, 56px);
}

.ig-about__card {
	background: var(--ig-paper);
	border: var(--ig-stroke-bold) solid var(--ig-line);
	margin: 0 -1.5px -1.5px 0;
	padding: clamp(28px, 3.2vw, 44px);
	position: relative;
	transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.ig-about__card::before {
	background: var(--ig-paper);
	border-bottom: var(--ig-stroke) solid var(--ig-line);
	border-right: var(--ig-stroke) solid var(--ig-line);
	color: var(--ig-muted);
	content: attr(data-index);
	font-family: var(--ig-font-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	left: 0;
	padding: 6px 10px;
	position: absolute;
	top: 0;
}

.ig-about__card-icon {
	color: var(--ig-ink);
	display: block;
	margin: 16px 0 28px;
	transition: color 180ms ease;
	width: 56px;
}

.ig-about__card-icon svg {
	display: block;
	height: 56px;
	width: 56px;
}

.ig-about__card h3 {
	font-family: var(--ig-font-display);
	font-size: clamp(22px, 2.2vw, 30px);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0 0 14px;
	text-transform: uppercase;
}

.ig-about__card p {
	color: var(--ig-muted);
	font-size: 15px;
	line-height: 1.5;
	margin: 0;
	max-width: 32ch;
}

.ig-about__card:hover {
	background: var(--ig-ink);
	color: var(--ig-paper);
}

.ig-about__card:hover::before {
	background: var(--ig-accent);
	color: var(--ig-accent-ink);
}

.ig-about__card:hover .ig-about__card-icon {
	color: var(--ig-accent);
}

.ig-about__card:hover p {
	color: rgba(255, 255, 255, 0.78);
}

/* Section spacing: top from the nested .ig-page-head, bottom on the
   section itself so the next block has breathing room. */
.ig-about__milestone {
	padding: 0 0 clamp(64px, 9vw, 140px);
	text-align: center;
}

.ig-about__milestone .ig-page-head {
	align-items: center;
	display: flex;
	flex-direction: column;
}

.ig-about__milestone-h2 {
	font-size: clamp(40px, 6vw, 88px);
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.05;
	margin: 0;
	text-transform: uppercase;
}

.ig-about__num {
	background: var(--ig-accent);
	color: var(--ig-accent-ink);
	display: inline-block;
	padding: 0 0.12em;
}

.ig-about__milestone .ig-about__lead {
	margin: clamp(24px, 3vw, 40px) auto 0;
	max-width: 64ch;
	text-align: center;
}

.ig-about__milestone .ig-actions {
	display: flex;
	justify-content: center;
	margin-top: clamp(28px, 4vw, 48px);
}

@media (max-width: 880px) {
	.ig-about__cards {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Static pages (about/contact/legal)
   ========================================================================== */

.ig-static {
	padding-top: 0;
	padding-bottom: 96px;
}

.ig-static h1 {
	font-size: clamp(48px, 7vw, 120px);
	margin: 0 0 32px;
}

.ig-static p,
.ig-static li {
	font-size: clamp(16px, 1.1vw, 18px);
	max-width: 64ch;
}

.ig-static__lead {
	font-family: var(--ig-font-display);
	font-size: clamp(20px, 1.8vw, 26px);
	font-weight: 500;
	line-height: 1.35;
	margin-bottom: 48px;
	max-width: 56ch;
}

.ig-static h2 {
	font-size: clamp(28px, 3vw, 44px);
	margin: 48px 0 16px;
}

.ig-contact {
	padding-top: 0;
	padding-bottom: clamp(48px, 6vw, 96px);
}

/* Contact layout: 1.1fr (info) + 1fr (form), gridded brutalist columns */
.ig-contact-layout {
	border-top: var(--ig-stroke-bold) solid var(--ig-line);
	display: grid;
	gap: 0;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	margin-top: 24px;
}

.ig-contact-layout__info {
	border-right: var(--ig-stroke-bold) solid var(--ig-line);
	padding: 40px 48px 40px 0;
}

.ig-contact-layout__info p:first-child {
	margin-top: 0;
}

.ig-contact__info-title {
	font-family: var(--ig-font-display);
	font-size: clamp(20px, 1.8vw, 26px);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin: 0 0 28px;
	max-width: 24ch;
	text-transform: none;
}

.ig-contact__rows {
	display: grid;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ig-contact__row {
	align-items: flex-start;
	background: var(--ig-paper);
	border: var(--ig-stroke) solid var(--ig-line);
	display: grid;
	gap: 18px;
	grid-template-columns: 64px minmax(0, 1fr);
	margin: 0 0 -1px 0;
	padding: 18px 20px;
	transition: background 160ms ease, color 160ms ease;
}

.ig-contact__row:hover {
	background: var(--ig-ink);
	color: var(--ig-paper);
}

.ig-contact__row-icon {
	align-items: center;
	border: var(--ig-stroke) solid currentColor;
	color: var(--ig-ink);
	display: inline-flex;
	height: 56px;
	justify-content: center;
	width: 56px;
}

.ig-contact__row:hover .ig-contact__row-icon {
	color: var(--ig-accent);
}

.ig-contact__row-icon svg {
	display: block;
	height: 28px;
	width: 28px;
}

.ig-contact__row-body {
	min-width: 0;
}

.ig-contact__row-label {
	font-family: var(--ig-font-display);
	font-size: clamp(18px, 1.4vw, 22px);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.1;
	margin: 4px 0 6px;
	text-transform: uppercase;
}

.ig-contact__row-value {
	font-family: var(--ig-font-mono);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin: 0;
}

.ig-contact__row-value a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.ig-contact__row:hover .ig-contact__row-value a {
	color: var(--ig-accent);
}

.ig-contact-layout__form {
	padding: 40px 0 40px 48px;
}

.ig-contact-layout__form h2 {
	font-size: clamp(24px, 2.6vw, 36px);
	margin: 0 0 24px;
}

.ig-contact-form {
	display: grid;
	gap: 24px;
}

/* HTML5 [hidden] is a `display: none` shortcut via UA stylesheet, but a
   later explicit `display: ...` rule wins. Re-assert it for every element
   inside the contact wrapper so `form.hidden = true` from JS actually
   hides the form (otherwise the form stays visible under the success
   panel after a successful submit). */
.ig-contact-form-wrap [hidden] {
	display: none !important;
}

.ig-contact-form__honeypot {
	height: 0;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 0;
}

.ig-contact-form__grid {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ig-contact-form__grid label {
	display: grid;
	gap: 6px;
}

.ig-contact-form__grid label > span {
	color: var(--ig-ink);
	font-family: var(--ig-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ig-contact-form__grid input,
.ig-contact-form__grid textarea {
	background: var(--ig-bone);
	border: var(--ig-stroke) solid var(--ig-line);
	border-radius: 0;
	color: var(--ig-ink);
	font-family: var(--ig-font-mono);
	font-size: 16px;
	min-height: 48px;
	padding: 12px 14px;
	width: 100%;
}

.ig-contact-form__grid input:focus,
.ig-contact-form__grid textarea:focus {
	background: var(--ig-paper);
	box-shadow: 0 0 0 3px var(--ig-accent);
	outline: 0;
}

.ig-contact-form__consent {
	align-items: flex-start;
	background: var(--ig-bone, #f6f6f3);
	border: var(--ig-stroke) solid var(--ig-line);
	display: grid;
	gap: 12px;
	grid-template-columns: 22px minmax(0, 1fr);
	margin-top: 8px;
	padding: 14px 16px;
}

.ig-contact-form__consent input[type="checkbox"] {
	accent-color: var(--ig-ink);
	height: 18px;
	margin-top: 1px;
	width: 18px;
}

.ig-contact-form__consent span {
	font-family: var(--ig-font-mono);
	font-size: 13px;
	letter-spacing: 0.02em;
	line-height: 1.5;
}

.ig-contact-form__consent a {
	color: var(--ig-ink);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.ig-contact-form__consent a:hover {
	background: var(--ig-accent);
	color: var(--ig-accent-ink);
	text-decoration: none;
}

.ig-contact-form__grid textarea {
	font-family: var(--ig-font-body);
	font-size: 16px;
	line-height: 1.5;
	min-height: 160px;
	resize: vertical;
}

.ig-contact-form__full {
	grid-column: span 2;
}

.ig-contact-form__err {
	color: var(--ig-danger);
	font-family: var(--ig-font-mono);
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
}

/* AJAX submit failure — sárga vörös háttér a hibás mezőkön. */
.ig-contact-form [data-contact-field].is-invalid input,
.ig-contact-form [data-contact-field].is-invalid textarea {
	border-color: var(--ig-danger, #dc2626) !important;
	background: #fef2f2;
}

.ig-contact-form [data-contact-field].is-invalid > span {
	color: var(--ig-danger, #dc2626);
}

.ig-contact-form__general {
	display: grid;
	gap: 8px;
	margin: 0 0 14px;
	padding: 12px 14px;
	background: #fef2f2;
	border: 2px solid var(--ig-danger, #dc2626);
}
.ig-contact-form__general .ig-error {
	margin: 0;
	color: #7f1d1d;
	font-family: var(--ig-font-mono);
	font-size: 13px;
	font-weight: 700;
}

/* Sikeres küldés panel — a form helyén jelenik meg, brutalist nagy. */
.ig-contact-success {
	background: #DCFCE7;
	border: 3px solid #0a0a0a;
	padding: 28px 32px;
	display: grid;
	gap: 10px;
}
.ig-contact-success .ig-eyebrow {
	margin: 0;
}
.ig-contact-success__title {
	margin: 0;
	font-family: var(--ig-font-display);
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.05;
	text-transform: uppercase;
}
.ig-contact-success__lead {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--ig-ink);
}

.ig-contact-form__legal {
	color: var(--ig-muted);
	font-family: var(--ig-font-mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	line-height: 1.6;
	margin: 0;
}

.ig-contact-form .ig-notice strong {
	background: var(--ig-accent);
	color: var(--ig-accent-ink);
	margin-right: 6px;
	padding: 0 6px;
}

@media (max-width: 880px) {
	.ig-contact-layout {
		grid-template-columns: 1fr;
	}
	.ig-contact-layout__info {
		border-bottom: var(--ig-stroke-bold) solid var(--ig-line);
		border-right: 0;
		padding: 24px 0;
	}
	.ig-contact-layout__form {
		padding: 24px 0 0;
	}
	.ig-contact-form__grid {
		grid-template-columns: 1fr;
	}
	.ig-contact-form__full {
		grid-column: span 1;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* ==========================================================================
   Cookie consent banner
   ========================================================================== */

.ig-consent {
	background: var(--ig-ink);
	border: 2px solid var(--ig-accent);
	bottom: 20px;
	box-shadow: 6px 6px 0 rgba(0,0,0,0.4);
	color: var(--ig-paper);
	left: 20px;
	max-width: 380px;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	right: auto;
	transform: translateY(20px) scale(0.96);
	transform-origin: bottom left;
	transition: opacity 280ms ease, transform 320ms cubic-bezier(0.18, 1.1, 0.5, 1);
	width: calc(100% - 40px);
	z-index: 9999;
}

.ig-consent.is-open {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0) scale(1);
}

.ig-consent__inner {
	display: block;
	padding: 18px 18px 16px;
}

.ig-consent__main {
	min-width: 0;
}

.ig-consent__eyebrow {
	color: var(--ig-accent);
	font-family: var(--ig-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	margin: 0 0 4px;
}

.ig-consent__title {
	font-family: var(--ig-font-display);
	font-size: 17px;
	font-weight: 900;
	letter-spacing: -0.01em;
	line-height: 1.15;
	margin: 0 0 6px;
	text-transform: uppercase;
}

.ig-consent__desc {
	color: rgba(255, 255, 255, 0.78);
	font-family: var(--ig-font-mono);
	font-size: 11px;
	line-height: 1.5;
	margin: 0;
}

.ig-consent__desc a {
	color: var(--ig-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ig-consent__detail {
	border-top: 1px solid rgba(255,255,255,0);
	display: grid;
	gap: 6px;
	margin-top: 0;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	padding-top: 0;
	transition: max-height 320ms ease, opacity 220ms ease, margin-top 320ms ease, padding-top 320ms ease, border-top-color 220ms ease;
}

.ig-consent.is-detailed .ig-consent__detail {
	border-top-color: rgba(255,255,255,0.15);
	margin-top: 12px;
	max-height: 320px;
	opacity: 1;
	padding-top: 12px;
}

.ig-consent__cat {
	align-items: flex-start;
	border: 1px solid rgba(255,255,255,0.15);
	cursor: pointer;
	display: grid;
	gap: 10px;
	grid-template-columns: 18px minmax(0, 1fr);
	padding: 8px 10px;
	transition: border-color 120ms ease;
}

.ig-consent__cat:hover {
	border-color: var(--ig-accent);
}

.ig-consent__cat input[type="checkbox"] {
	accent-color: var(--ig-accent);
	height: 14px;
	margin-top: 2px;
	width: 14px;
}

.ig-consent__cat input:disabled {
	opacity: 0.5;
}

.ig-consent__cat-body {
	display: block;
	min-width: 0;
}

.ig-consent__cat-name {
	color: var(--ig-paper);
	display: block;
	font-family: var(--ig-font-display);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.ig-consent__cat-note {
	color: rgba(255, 255, 255, 0.55);
	display: block;
	font-family: var(--ig-font-mono);
	font-size: 10px;
	letter-spacing: 0.03em;
	margin-top: 2px;
}

.ig-consent__actions {
	display: grid;
	gap: 6px;
	grid-template-columns: 1fr 1fr;
	margin-top: 12px;
}

.ig-consent__actions [data-consent-customize],
.ig-consent__actions [data-consent-save] {
	grid-column: 1 / -1;
}

.ig-consent__btn {
	background: transparent;
	border: 1.5px solid var(--ig-paper);
	color: var(--ig-paper);
	cursor: pointer;
	font-family: var(--ig-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	min-height: 36px;
	padding: 8px 10px;
	text-transform: uppercase;
	transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.ig-consent__btn--ghost {
	border-color: rgba(255,255,255,0.4);
	color: rgba(255,255,255,0.85);
}

.ig-consent__btn--ghost:hover {
	border-color: var(--ig-paper);
	color: var(--ig-paper);
}

.ig-consent__btn--dark {
	background: rgba(255,255,255,0.08);
	border-color: rgba(255,255,255,0.25);
}

.ig-consent__btn--dark:hover {
	background: var(--ig-paper);
	color: var(--ig-ink);
}

.ig-consent__btn--accent {
	background: var(--ig-accent);
	border-color: var(--ig-accent);
	color: var(--ig-accent-ink);
}

.ig-consent__btn--accent:hover {
	background: var(--ig-paper);
	border-color: var(--ig-paper);
}

@media (max-width: 540px) {
	.ig-consent {
		bottom: 12px;
		left: 12px;
		max-width: none;
		width: calc(100% - 24px);
	}
}

.ig-footer-consent {
	background: transparent;
	border: 0;
	color: rgba(255, 255, 255, 0.55);
	cursor: pointer;
	font-family: var(--ig-font-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	line-height: 1.4;
	padding: 0;
	text-transform: uppercase;
	transition: color 120ms ease;
}

.ig-footer-consent:hover {
	color: var(--ig-accent);
}

.ig-site-footer {
	background: var(--ig-ink);
	border-top: var(--ig-stroke-bold) solid var(--ig-line);
	color: var(--ig-paper);
	padding: 64px 0 24px;
}

.ig-site-footer__grid {
	display: grid;
	gap: 40px;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
}

.ig-site-footer__contact-list {
	display: grid;
	gap: 4px 14px;
	grid-template-columns: auto minmax(0, 1fr);
	margin: 0;
}

.ig-site-footer__contact-list dt {
	color: #9a9a9a;
	font-family: var(--ig-font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	padding: 4px 0;
	text-transform: uppercase;
}

.ig-site-footer__contact-list dd {
	font-family: var(--ig-font-mono);
	font-size: 13px;
	letter-spacing: 0.02em;
	margin: 0;
	padding: 4px 0;
	text-transform: uppercase;
}

.ig-site-footer__contact-list dd a {
	color: var(--ig-paper);
	display: inline;
	padding: 0;
	text-transform: uppercase;
}

.ig-site-footer__contact-list dd a:hover {
	color: var(--ig-accent);
}

.ig-site-footer h4 {
	color: var(--ig-paper);
	font-family: var(--ig-font-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: var(--ig-tracking-eyebrow);
	margin: 0 0 14px;
	text-transform: uppercase;
}

.ig-site-footer a {
	color: var(--ig-paper);
	display: block;
	font-family: var(--ig-font-mono);
	font-size: 13px;
	letter-spacing: 0.02em;
	padding: 4px 0;
	text-transform: uppercase;
}

.ig-site-footer a:hover {
	color: var(--ig-accent);
}

/* Footer Project Wizard CTA — egy varázspálca-ikon hívja fel rá a figyelmet */
.ig-site-footer__tool-link {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	color: var(--ig-paper) !important;
	transition: color .15s, transform .15s;
}
.ig-site-footer__tool-link:hover {
	color: var(--ig-accent) !important;
	transform: translateX(2px);
}
.ig-site-footer__tool-icon {
	width: 18px;
	height: 18px;
	color: var(--ig-accent);
	flex-shrink: 0;
	transition: transform .25s ease;
}
.ig-site-footer__tool-link:hover .ig-site-footer__tool-icon {
	transform: scale(1.15) rotate(-6deg);
}

.ig-site-footer__brand {
	font-family: var(--ig-font-display);
	font-size: 28px;
	font-weight: 900;
	letter-spacing: -0.02em;
	margin-bottom: 12px;
	text-transform: uppercase;
}

.ig-site-footer__brand strong {
	color: var(--ig-accent);
}

.ig-site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px 28px;
	margin-top: 40px;
	padding-top: 24px;
	border-top: var(--ig-stroke) solid rgba(255, 255, 255, 0.18);
}
.ig-site-footer__legal a {
	display: inline-block;
	padding: 0;
	color: rgba(255, 255, 255, 0.7);
	font-family: var(--ig-font-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	position: relative;
}
.ig-site-footer__legal a:hover {
	color: var(--ig-accent);
}
/* Vízszintes elválasztó pötty a linkek közé (kivéve az első) */
.ig-site-footer__legal a + a::before {
	content: "·";
	position: absolute;
	left: -15px;
	color: rgba(255, 255, 255, 0.3);
}

.ig-site-footer__bottom {
	align-items: center;
	border-top: var(--ig-stroke) solid rgba(255, 255, 255, 0.18);
	color: rgba(255, 255, 255, 0.55);
	display: flex;
	flex-wrap: wrap;
	font-family: var(--ig-font-mono);
	font-size: 12px;
	gap: 16px;
	justify-content: space-between;
	letter-spacing: 0.04em;
	line-height: 1.4;
	margin-top: 28px;
	padding-top: 18px;
	text-transform: uppercase;
}

.ig-site-footer a.ig-footer-dev {
	align-items: center;
	color: rgba(255, 255, 255, 0.55);
	display: inline-flex;
	font-family: var(--ig-font-mono);
	font-size: 12px;
	gap: 6px;
	letter-spacing: 0.04em;
	line-height: 1.4;
	padding: 0;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 220ms ease;
}

.ig-site-footer .ig-footer-dev:hover {
	color: var(--ig-paper);
}

.ig-footer-dev strong {
	color: inherit;
	font-weight: 800;
	letter-spacing: 0.02em;
	transition: color 220ms ease;
}

.ig-site-footer .ig-footer-dev:hover strong {
	color: var(--ig-accent);
}

.ig-footer-dev__heart {
	display: inline-block;
	fill: transparent;
	height: 14px;
	stroke: currentColor;
	stroke-linejoin: round;
	stroke-width: 2;
	transition:
		fill 320ms cubic-bezier(0.4, 0, 0.2, 1),
		stroke 320ms ease,
		transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
	vector-effect: non-scaling-stroke;
	width: 14px;
}

.ig-footer-dev:hover .ig-footer-dev__heart {
	animation: ig-heart-beat 700ms ease-in-out 320ms 1;
	fill: #ff2d55;
	stroke: #ff2d55;
	transform: scale(1.25);
}

@keyframes ig-heart-beat {
	0%   { transform: scale(1.25); }
	30%  { transform: scale(1.45); }
	60%  { transform: scale(1.15); }
	100% { transform: scale(1.25); }
}

/* ==========================================================================
   Cat children chip row
   ========================================================================== */

.ig-cat-children {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 28px;
}

.ig-cat-chip {
	background: var(--ig-paper);
	border: var(--ig-stroke) solid var(--ig-line);
	color: var(--ig-ink);
	font-family: var(--ig-font-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	padding: 8px 14px;
	text-transform: uppercase;
}

.ig-cat-chip:hover {
	background: var(--ig-accent);
	color: var(--ig-accent-ink);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* ==========================================================================
   Tablet + phone (≤ 1080px) shared rules — sidebar padding intentionally OUT
   so the phone-only sheet styles below can win without specificity tricks.
   ========================================================================== */

@media (max-width: 1080px) {
	.ig-hero__content {
		grid-template-columns: minmax(0, 1fr) 300px;
		column-gap: 32px;
		row-gap: 0;
	}

	.ig-hero__split {
		grid-template-columns: 1fr;
	}

	.ig-hero__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ig-hero__stats > div:nth-child(2) {
		border-right: 0;
	}

	.ig-hero__stats > div:nth-child(-n+2) {
		border-bottom: var(--ig-stroke) solid var(--ig-line);
	}

	.ig-shop__layout,
	.ig-product-single,
	.ig-form-grid {
		grid-template-columns: 1fr;
	}

	.ig-shop__main {
		padding-left: 0;
		padding-top: 24px;
	}

	.ig-product-single__media {
		border-bottom: var(--ig-stroke-bold) solid var(--ig-line);
		border-right: 0;
	}

	.ig-site-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* Tablet-only sidebar layout (only fires between 881–1080). */
@media (min-width: 881px) and (max-width: 1080px) {
	.ig-shop .ig-shop__sidebar {
		border-bottom: var(--ig-stroke-bold) solid var(--ig-line);
		border-right: 0;
		padding: 0 0 24px;
	}
}

/* ==========================================================================
   Phone (≤ 880px) — hamburger menu kicks in
   ========================================================================== */

@media (max-width: 880px) {
	.ig-hamburger {
		display: flex;
		order: 99;
	}

	.ig-site-header__inner {
		align-items: stretch;
		min-height: 64px;
	}

	.ig-brand {
		border-right: 0;
		flex: 1 1 auto;
		font-size: 18px;
		padding: 0 20px;
	}

	/* Hide desktop nav + context in the header; they live in the drawer instead */
	.ig-site-header > .ig-site-header__inner > .ig-nav,
	.ig-site-header > .ig-site-header__inner > .ig-context {
		display: none;
	}

	.ig-cart-btn,
	.ig-cart-btn--account {
		min-height: 64px;
		min-width: 56px;
		padding: 0 16px;
	}

	.ig-cart-btn--account {
		border-left: var(--ig-stroke) solid var(--ig-line);
	}

	.ig-hero__content {
		grid-template-columns: 1fr;
		padding-top: 48px;
		padding-bottom: 32px;
	}

	.ig-dmx {
		display: none;
	}

	.ig-hero__beams {
		display: none;
	}

	.ig-hero__headline {
		font-size: clamp(40px, 12vw, 80px);
	}

	.ig-hero__split {
		gap: 24px;
	}

	.ig-hero__split .ig-actions {
		flex-direction: column;
		width: 100%;
	}

	.ig-hero__split .ig-actions .ig-button {
		justify-content: center;
		width: 100%;
	}

	.ig-account-head {
		flex-direction: column;
		align-items: flex-start;
	}

	.ig-account-tabs {
		overflow-x: auto;
	}

	.ig-account-tabs a {
		flex: 0 0 auto;
		font-size: 12px;
		padding: 14px 16px;
		white-space: nowrap;
	}

	.ig-contact-layout {
		grid-template-columns: 1fr;
	}

	.ig-contact-layout__info {
		border-bottom: var(--ig-stroke-bold) solid var(--ig-line);
		border-right: 0;
		padding: 24px 0;
	}

	.ig-contact-layout__form {
		padding: 24px 0 0;
	}

	.ig-contact-form__grid {
		grid-template-columns: 1fr;
	}

	.ig-contact-form__full {
		grid-column: span 1;
	}
}

/* ==========================================================================
   Small phone (≤ 640px)
   ========================================================================== */

@media (max-width: 640px) {
	:root {
		--ig-gutter-x: 18px;
	}

	.ig-section-head {
		grid-template-columns: 1fr;
	}

	.ig-product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ig-product-card {
		gap: 12px;
		padding: 12px;
	}

	.ig-product-card h3 {
		font-size: 14px;
		line-height: 1.2;
	}

	.ig-product-card__sku {
		font-size: 10px;
	}

	.ig-product-card__price {
		font-size: 20px;
	}

	.ig-product-card__price small {
		font-size: 10px;
	}

	.ig-product-card__cta .ig-button {
		font-size: 11px;
		letter-spacing: 0.06em;
		min-height: 38px;
		padding: 0 10px;
	}

	.ig-category-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ig-category-tile {
		aspect-ratio: 3 / 2;
		font-size: 18px;
	}

	.ig-table {
		border-width: var(--ig-stroke);
		display: block;
		overflow-x: auto;
	}

	/* Quick Buy → kártyák mobilon. Osztály-alapú elrendezés: korábban
	   `nth-child` pozíciókra épült, ami az oszlopok bármely változásától
	   szétesett. Most minden cella a saját osztályáról kap helyet. */
	.ig-quickbuy__table {
		border: 0;
		display: block;
		overflow: visible;
	}
	.ig-quickbuy__table thead { display: none; }
	.ig-quickbuy__table tbody { display: block; }

	.ig-quickbuy__table tr {
		background: var(--ig-paper);
		border: var(--ig-stroke) solid var(--ig-line);
		display: grid;
		gap: 8px 12px;
		grid-template-areas:
			"name  name"
			"net   gross"
			"stock stock"
			"qty   btn";
		grid-template-columns: minmax(0, 1fr) auto;
		margin: 0 0 -1px;
		padding: 12px 14px;
	}

	.ig-quickbuy__table td {
		border: 0;
		padding: 0;
	}

	.ig-quickbuy__table td.ig-qb__name  { grid-area: name; }
	.ig-quickbuy__table td.ig-qb__net   { grid-area: net;   text-align: left; }
	.ig-quickbuy__table td.ig-qb__gross { grid-area: gross; text-align: right; font-size: 17px; }
	.ig-quickbuy__table td.ig-qb__stock { grid-area: stock; text-align: left; }
	.ig-quickbuy__table td.ig-qb__qty   { grid-area: qty;   justify-content: flex-start; }
	.ig-quickbuy__table td.ig-qb__act   { grid-area: btn;   justify-self: end; }

	/* Mobilon a nettó és a rendelhető darabszám kap feliratot, különben
	   fejléc nélkül két puszta szám állna egymás mellett. */
	.ig-quickbuy__table td.ig-qb__net::before,
	.ig-quickbuy__table td.ig-qb__stock::before {
		content: attr(data-label) ": ";
		font-size: 10px;
		font-weight: 700;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--ig-muted);
	}

	.ig-quickbuy__table td.ig-qb__noprice { grid-area: gross; text-align: right; }
	.ig-quickbuy__table td.ig-qb__noprice::before { content: none; }

	.ig-quickbuy__table td.ig-qb__act .ig-button { min-height: 44px; }

	/* Cart table → stacked cards on mobile. */
	.ig-table[data-cart-table] {
		border: 0;
		overflow: visible;
	}
	.ig-table[data-cart-table] thead { display: none; }
	.ig-table[data-cart-table] tbody { display: block; }

	.ig-table[data-cart-table] tr[data-cart-row] {
		background: var(--ig-paper);
		border: var(--ig-stroke-bold) solid var(--ig-line);
		display: grid;
		gap: 12px 16px;
		grid-template-areas:
			"name remove"
			"qty  price";
		grid-template-columns: minmax(0, 1fr) auto;
		margin: 0 0 -1.5px;
		padding: 14px 16px;
	}

	.ig-table[data-cart-table] tr[data-cart-row] > td {
		border: 0;
		padding: 0;
	}

	.ig-table[data-cart-table] tr[data-cart-row] > td:nth-child(1) {
		grid-area: name;
		line-height: 1.35;
		padding-bottom: 0;       /* desktop reservation not needed on cards */
		position: static;
	}

	/* On mobile cards: meta drops back into flow as a normal small line. */
	.ig-cart-row__meta {
		position: static;
		margin-top: 6px;
		flex-wrap: wrap;
	}

	.ig-table[data-cart-table] tr[data-cart-row] > td:nth-child(2) {
		align-self: center;
		grid-area: qty;
	}

	.ig-table[data-cart-table] tr[data-cart-row] > td:nth-child(3) {
		display: none;
	}

	.ig-table[data-cart-table] tr[data-cart-row] > td:nth-child(4) {
		align-self: center;
		font-size: 18px;
		grid-area: price;
		text-align: right;
		/* Cancel the desktop fixed 140px width on the card layout. */
		min-width: 0;
		width: auto;
	}

	.ig-table[data-cart-table] tr[data-cart-row] > td.ig-cart-row__remove-cell {
		grid-area: remove;
		justify-self: end;
		text-align: right;
		width: auto;
	}

	.ig-checkout h1 {
		font-size: clamp(32px, 9vw, 60px);
	}

	.ig-static h1 {
		font-size: clamp(36px, 11vw, 72px);
	}

	.ig-product-single__body {
		padding: 28px 20px;
	}

	.ig-product-single__body h1 {
		font-size: clamp(26px, 7vw, 44px);
	}

	.ig-site-footer__grid {
		grid-template-columns: 1fr;
	}

	.ig-site-footer__bottom {
		flex-direction: column;
		gap: 8px;
	}

	.ig-cart-btn,
	.ig-cart-btn--account,
	.ig-hamburger {
		padding: 0 12px;
		min-width: 50px;
	}

	.ig-cart-btn svg,
	.ig-cart-btn--account svg {
		height: 22px;
		width: 22px;
	}

	.ig-account-grid,
	.ig-account-guest {
		grid-template-columns: 1fr;
	}

	.ig-account-card--wide {
		grid-column: span 1;
	}

	.ig-shop__main {
		padding-left: 0;
	}

	.ig-fieldset {
		padding: 18px;
	}

	.ig-shipping-toggle {
		padding: 14px 18px;
	}

	/* Force every multi-column form into a single column below 880px so each
	   input gets its own row on mobile. Billing + shipping stack vertically,
	   contact form fields stack, checkout address grids stack. */
	.ig-form-grid,
	.ig-contact-form__grid,
	.ig-fieldset,
	.ig-checkout__step form,
	.ig-account-card form {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.ig-form-grid > .ig-fieldset + .ig-fieldset {
		margin-top: -1.5px;
	}

	.ig-fieldset > .ig-span-2 {
		grid-column: auto;
	}

	.ig-form-grid > div[style*="grid-column"] {
		grid-column: auto !important;
	}
}

/* ===================================================================== */
/* News (Hírek)                                                           */
/* ===================================================================== */

.ig-news {
	padding: var(--ig-gutter-y) 0;
}

/* Hírek (news) cikk-típus szűrő pirulák a /hirek/ oldalon */
.ig-news-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 32px 0;
}
.ig-news-filter__pill {
	background: var(--ig-paper);
	border: var(--ig-stroke-bold) solid var(--ig-line);
	border-radius: 0;
	color: var(--ig-ink);
	cursor: pointer;
	font-family: var(--ig-font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 8px 14px;
	text-transform: uppercase;
	transition: background 120ms ease, color 120ms ease;
}
.ig-news-filter__pill:hover {
	background: var(--ig-bone);
}
.ig-news-filter__pill.is-active {
	background: var(--ig-ink);
	color: var(--ig-paper);
}
.ig-news-results {
	transition: opacity 150ms ease;
}

/* Inline product embeds from [ig_product] / [ig_products] inside news/page copy */
.ig-inline-product,
.ig-inline-products {
	margin: 32px 0;
}

.ig-inline-product .ig-product-card {
	max-width: 420px;
}

/* [ig_products] cikkben: rögzített 3 kártya / sor, hogy ne az auto-fit
   szabály diktálja (ami a cikk konténer szélességétől függően 2-4 közt
   ingadozik). Tabletre 2, telefonra 1. !important azért, hogy semmilyen
   szülő media query (pl. mobile-os .ig-product-grid override) ne tudja
   visszanyomni. */
.ig-inline-products,
.ig-inline-products.ig-product-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 0;
}
@media (max-width: 900px) {
	.ig-inline-products,
	.ig-inline-products.ig-product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 560px) {
	.ig-inline-products,
	.ig-inline-products.ig-product-grid {
		grid-template-columns: 1fr !important;
	}
}

/* ===================================================================== */
/* Brand archive (/marka/<slug>/)                                          */
/* ===================================================================== */

.ig-brand-archive {
	padding-top: 32px;
	padding-bottom: 64px;
}

.ig-brand-archive__head {
	margin-bottom: 32px;
}

.ig-brand-archive__head h1 {
	font-family: var(--ig-font-display);
	font-size: clamp(48px, 8vw, 120px);
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 0.95;
	margin: 4px 0 16px;
	text-transform: uppercase;
}

.ig-brand-archive__lead {
	color: var(--ig-muted);
	font-size: 16px;
	line-height: 1.55;
	margin: 0;
	max-width: 60ch;
}

.ig-brand-archive__loadmore {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}

.ig-brand-archive__loadmore[hidden] {
	display: none;
}

/* ===================================================================== */
/* Brand index (/marka/)                                                  */
/* ===================================================================== */

.ig-brand-index {
	padding-top: 0;
	padding-bottom: 80px;
}

.ig-brand-index__head h1 {
	font-family: var(--ig-font-display);
	font-size: clamp(40px, 7vw, 96px);
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 0.95;
	margin: 4px 0 16px;
}

.ig-brand-index__lead {
	color: var(--ig-muted);
	font-size: 16px;
	line-height: 1.55;
	margin: 0 0 32px;
	max-width: 64ch;
}

.ig-brand-index__alpha {
	border-bottom: var(--ig-stroke-bold) solid var(--ig-line);
	border-top: var(--ig-stroke-bold) solid var(--ig-line);
	display: flex;
	flex-wrap: wrap;
	font-family: var(--ig-font-mono);
	font-size: 13px;
	font-weight: 800;
	gap: 0;
	letter-spacing: 0.08em;
	margin-bottom: 32px;
	padding: 14px 0;
	text-transform: uppercase;
}

.ig-brand-index__alpha a {
	color: var(--ig-ink);
	display: inline-block;
	padding: 6px 10px;
	text-decoration: none;
	transition: background 100ms ease, color 100ms ease;
}

.ig-brand-index__alpha a:hover,
.ig-brand-index__alpha a:focus-visible {
	background: var(--ig-ink);
	color: var(--ig-paper);
	outline: 0;
}

.ig-brand-index__section {
	margin-bottom: 48px;
	scroll-margin-top: 80px;
}

.ig-brand-index__letter {
	border-bottom: var(--ig-stroke-bold) solid var(--ig-line);
	font-family: var(--ig-font-display);
	font-size: clamp(40px, 6vw, 72px);
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 1;
	margin: 0 0 16px;
	padding-bottom: 4px;
}

.ig-brand-index__grid {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.ig-brand-card {
	align-items: center;
	background: var(--ig-paper);
	border: var(--ig-stroke-bold) solid var(--ig-line);
	color: var(--ig-ink);
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin: 0 -1.5px -1.5px 0;
	min-height: 92px;
	padding: 18px 20px;
	position: relative;
	text-decoration: none;
	transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

.ig-brand-card:hover,
.ig-brand-card:focus-visible {
	background: var(--ig-ink);
	color: var(--ig-paper);
	outline: 0;
	transform: translate(-2px, -2px);
	z-index: 2;
}

.ig-brand-card__name {
	font-family: var(--ig-font-display);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.1;
}

.ig-brand-card__count {
	color: var(--ig-muted);
	font-family: var(--ig-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-left: auto;
	text-transform: uppercase;
}

.ig-brand-card:hover .ig-brand-card__count,
.ig-brand-card:focus-visible .ig-brand-card__count {
	color: rgba(255, 255, 255, 0.7);
}

.ig-brand-card__arrow {
	color: var(--ig-accent);
	font-family: var(--ig-font-display);
	font-size: 20px;
	font-weight: 900;
	line-height: 1;
}

@media (max-width: 720px) {
	.ig-brand-index__head h1 {
		font-size: clamp(32px, 9vw, 56px);
	}
	.ig-brand-index__grid {
		grid-template-columns: 1fr;
	}
	.ig-brand-card {
		min-height: 76px;
		padding: 16px 18px;
	}
	.ig-brand-card__name {
		font-size: 18px;
	}
}

/* ===================================================================== */
/* Public serial-number checker page                                       */
/* ===================================================================== */

.ig-serial-check {
	padding-top: 0;
	padding-bottom: 64px;
}

.ig-serial-check__lead {
	color: var(--ig-muted);
	font-size: 16px;
	line-height: 1.5;
	margin: 8px 0 0;
	max-width: 60ch;
}

.ig-serial-check__form {
	background: var(--ig-paper);
	border: var(--ig-stroke-bold) solid var(--ig-line);
	box-shadow: 6px 6px 0 var(--ig-ink);
	margin: 32px 0;
	padding: 28px;
}

.ig-serial-check__form > label.ig-eyebrow {
	color: var(--ig-ink);
	display: block;
	margin-bottom: 10px;
}

.ig-serial-check__row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.ig-serial-check__row input {
	background: #fff;
	border: var(--ig-stroke-bold) solid var(--ig-line);
	flex: 1;
	font-family: var(--ig-font-mono);
	font-size: 18px;
	font-weight: 700;
	min-width: 240px;
	padding: 14px 16px;
}

.ig-serial-check__row input:focus {
	outline: 3px solid var(--ig-accent);
	outline-offset: -3px;
}

.ig-serial-check__result {
	margin: 24px 0;
}

.ig-serial-check__loading {
	color: var(--ig-muted);
	font-family: var(--ig-font-mono);
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ig-serial-check__panel {
	background: var(--ig-paper);
	border: var(--ig-stroke-bold) solid var(--ig-line);
	padding: 28px;
}

.ig-serial-check__panel h2 {
	font-family: var(--ig-font-display);
	font-size: clamp(24px, 4vw, 40px);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin: 8px 0 18px;
}

.ig-serial-check__panel.is-error,
.ig-serial-check__panel.is-notfound {
	border-color: var(--ig-line);
}

.ig-serial-check__panel.is-error h2 {
	color: #d8483b;
}

.ig-serial-check__panel.is-notfound {
	background: #f4f4f0;
}

.ig-serial-check__panel.is-found {
	box-shadow: 6px 6px 0 var(--ig-ink);
}

.ig-serial-check__panel dl {
	display: grid;
	gap: 8px 18px;
	grid-template-columns: max-content 1fr;
	margin: 0 0 18px;
}

.ig-serial-check__panel dt {
	color: var(--ig-muted);
	font-family: var(--ig-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ig-serial-check__panel dd {
	font-family: var(--ig-font-mono);
	font-size: 13px;
	margin: 0;
}

.ig-serial-check__warranty {
	align-items: center;
	border: 2px solid var(--ig-line);
	display: flex;
	gap: 16px;
	padding: 14px 18px;
}

.ig-serial-check__warranty.is-active {
	background: #15803D;
	color: #fff;
}

.ig-serial-check__warranty.is-expired {
	background: #d8483b;
	color: #fff;
}

.ig-serial-check__warranty-icon {
	background: rgba(255, 255, 255, 0.18);
	font-family: var(--ig-font-display);
	font-size: 28px;
	font-weight: 900;
	height: 48px;
	line-height: 48px;
	text-align: center;
	width: 48px;
}

.ig-serial-check__warranty strong {
	display: block;
	font-family: var(--ig-font-mono);
	font-size: 16px;
	font-weight: 900;
	letter-spacing: 0.06em;
}

.ig-serial-check__warranty small {
	color: rgba(255, 255, 255, 0.85);
	display: block;
	font-family: var(--ig-font-mono);
	font-size: 11px;
	margin-top: 4px;
}

.ig-serial-check__note {
	background: #f4f4f0;
	border-left: 4px solid var(--ig-accent);
	color: var(--ig-muted);
	font-size: 13px;
	line-height: 1.6;
	margin: 32px 0 0;
	padding: 16px 20px;
}

.ig-serial-check__note p {
	margin: 0 0 6px;
}

.ig-serial-check__note p:last-child {
	margin: 0;
}

/* ===================================================================== */
/* FAQ accordion on legal / shipping pages                                */
/* ===================================================================== */

.ig-faq {
	margin: 64px 0 24px;
}

.ig-faq__head {
	margin-bottom: 24px;
}

.ig-faq__head h2 {
	font-family: var(--ig-font-display);
	font-size: clamp(28px, 4vw, 48px);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1;
	margin: 4px 0 0;
}

.ig-faq__list {
	border-top: var(--ig-stroke-bold) solid var(--ig-line);
}

.ig-faq__item {
	border-bottom: var(--ig-stroke) solid var(--ig-line);
}

.ig-faq__item > summary {
	cursor: pointer;
	font-family: var(--ig-font-display);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.005em;
	list-style: none;
	padding: 18px 40px 18px 4px;
	position: relative;
	transition: background 120ms ease;
}

.ig-faq__item > summary::-webkit-details-marker {
	display: none;
}

.ig-faq__item > summary::after {
	color: var(--ig-accent);
	content: "+";
	font-size: 24px;
	font-weight: 800;
	line-height: 1;
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	transition: transform 200ms ease;
}

.ig-faq__item[open] > summary {
	background: rgba(0, 0, 0, 0.02);
}

.ig-faq__item[open] > summary::after {
	content: "−";
}

.ig-faq__item > summary:hover {
	background: rgba(0, 0, 0, 0.04);
}

.ig-faq__answer {
	color: var(--ig-ink);
	font-size: 15px;
	line-height: 1.65;
	padding: 0 40px 22px 4px;
}

.ig-faq__answer > p:first-child {
	margin-top: 0;
}

.ig-faq__answer > p:last-child {
	margin-bottom: 0;
}

.ig-news-grid {
	display: grid;
	gap: 0;
	border: var(--ig-stroke-bold) solid var(--ig-ink);
	background: var(--ig-ink);
}

.ig-news-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ig-news-grid--hero {
	grid-template-columns: minmax(0, 1fr);
	margin-bottom: -3px;
}

.ig-news-grid--hero + .ig-news-grid--3 {
	border-top: 0;
}

.ig-news-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--ig-paper);
	color: var(--ig-ink);
	text-decoration: none;
	border-right: var(--ig-stroke-bold) solid var(--ig-ink);
	border-bottom: var(--ig-stroke-bold) solid var(--ig-ink);
	margin: 0 -1.5px -1.5px 0;
	min-height: 320px;
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.ig-news-card:hover,
.ig-news-card:focus-visible {
	background: var(--ig-bone);
	outline: none;
}

.ig-news-card:hover .ig-news-card__cta,
.ig-news-card:focus-visible .ig-news-card__cta {
	color: var(--ig-accent-ink);
	background: var(--ig-accent);
}

.ig-news-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-bottom: var(--ig-stroke) solid var(--ig-ink);
	background: var(--ig-bone);
}

.ig-news-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.ig-news-card:hover .ig-news-card__media img {
	transform: scale(1.04);
}

.ig-news-card__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
	flex: 1 1 auto;
}

.ig-news-card__date {
	font-family: var(--ig-font-mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ig-muted);
}

.ig-news-card__title {
	font-family: var(--ig-font-display);
	font-size: clamp(20px, 2.2vw, 28px);
	line-height: 1.05;
	margin: 0;
	letter-spacing: -0.01em;
}

.ig-news-card__excerpt {
	margin: 0;
	color: var(--ig-muted);
	font-size: 15px;
	line-height: 1.5;
}

.ig-news-card__cta {
	margin-top: auto;
	align-self: flex-start;
	font-family: var(--ig-font-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 8px 14px;
	border: var(--ig-stroke) solid var(--ig-ink);
	color: var(--ig-ink);
	background: transparent;
	transition: background-color 0.18s ease, color 0.18s ease;
}

/* Hero card layout (used on /hirek/ archive top + can re-use elsewhere) */
.ig-news-card--hero {
	flex-direction: row;
	min-height: 420px;
}

.ig-news-card--hero .ig-news-card__media {
	flex: 1 1 56%;
	border-right: var(--ig-stroke-bold) solid var(--ig-ink);
	border-bottom: 0;
	aspect-ratio: auto;
}

.ig-news-card--hero .ig-news-card__body {
	flex: 1 1 44%;
	gap: 18px;
	padding: clamp(28px, 4vw, 48px);
	justify-content: center;
}

.ig-news-card--hero .ig-news-card__title {
	font-size: clamp(32px, 4.5vw, 56px);
}

.ig-news-card--hero .ig-news-card__excerpt {
	font-size: 17px;
}

/* Archive page */
.ig-news-page {
	padding-bottom: var(--ig-gutter-y);
}

/* News archive head: same base look + a little extra breathing room below
   to clear the featured-news card that follows. */
.ig-page-head--news {
	padding-bottom: 32px;
}

.ig-page-head__intro {
	max-width: 720px;
	color: var(--ig-muted);
	font-size: 17px;
	line-height: 1.55;
	margin: 16px 0 0;
}

.ig-news-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 48px;
	padding-top: 32px;
	border-top: var(--ig-stroke) solid var(--ig-ink);
}

.ig-news-pagination__info {
	font-family: var(--ig-font-mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ig-muted);
}

/* Single news */
.ig-news-single {
	padding-top: 32px;
	padding-bottom: var(--ig-gutter-y);
	max-width: 920px;
}

.ig-news-single__back {
	margin-bottom: 24px;
}

.ig-news-single__back-link {
	font-family: var(--ig-font-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ig-ink);
	text-decoration: none;
	border-bottom: var(--ig-stroke) solid var(--ig-ink);
	padding-bottom: 2px;
}

.ig-news-single__back-link:hover {
	background: var(--ig-accent);
}

.ig-news-single__head {
	margin-bottom: 32px;
	padding-bottom: 24px;
	border-bottom: var(--ig-stroke-bold) solid var(--ig-ink);
}

.ig-news-single__title {
	font-family: var(--ig-font-display);
	font-size: clamp(34px, 5.5vw, 68px);
	line-height: 1.02;
	letter-spacing: -0.02em;
	margin: 12px 0;
}

.ig-news-single__date {
	font-family: var(--ig-font-mono);
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ig-muted);
}

.ig-news-single__media {
	margin: 0 0 40px;
	border: var(--ig-stroke-bold) solid var(--ig-ink);
	overflow: hidden;
	/* 16:9 keret — square AI-képek és véletlen méretű feltöltések egyaránt
	   konzisztens, nem-túl-magas hero-t adnak. object-fit: cover megőrzi
	   az arányt és középre vág, nem torzít. */
	aspect-ratio: 16 / 9;
	max-height: 480px;
}

.ig-news-single__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ig-news-single__body {
	font-size: 18px;
	line-height: 1.65;
}

.ig-news-single__body p {
	margin: 0 0 1.2em;
}

.ig-news-single__body h2,
.ig-news-single__body h3 {
	font-family: var(--ig-font-display);
	letter-spacing: -0.01em;
	margin: 1.8em 0 0.6em;
}

.ig-news-single__body h2 { font-size: clamp(24px, 3vw, 36px); }
.ig-news-single__body h3 { font-size: clamp(20px, 2.4vw, 28px); }

.ig-news-single__body a {
	color: var(--ig-ink);
	border-bottom: var(--ig-stroke) solid var(--ig-ink);
	text-decoration: none;
}

.ig-news-single__body a:hover {
	background: var(--ig-accent);
}

.ig-news-single__body img {
	max-width: 100%;
	height: auto;
	border: var(--ig-stroke) solid var(--ig-ink);
}

.ig-news-single__body blockquote {
	margin: 1.5em 0;
	padding: 1em 1.5em;
	border-left: var(--ig-stroke-bold) solid var(--ig-ink);
	background: var(--ig-bone);
	font-family: var(--ig-font-display);
	font-size: 22px;
	line-height: 1.3;
}

/* Tablet */
@media (max-width: 960px) {
	.ig-news-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ig-news-card--hero {
		flex-direction: column;
		min-height: 0;
	}

	.ig-news-card--hero .ig-news-card__media {
		border-right: 0;
		border-bottom: var(--ig-stroke-bold) solid var(--ig-ink);
		aspect-ratio: 16 / 10;
	}
}

/* Mobile */
@media (max-width: 640px) {
	.ig-news-grid--3 {
		grid-template-columns: minmax(0, 1fr);
	}

	.ig-news-card {
		min-height: 0;
	}

	.ig-news-card__body {
		padding: 20px;
	}

	.ig-news-card__title {
		font-size: 22px;
	}

	.ig-news-pagination {
		flex-direction: column;
		gap: 12px;
	}

	.ig-news-single__body {
		font-size: 16px;
	}
}

/* ===================================================================== */
/* Toast (add-to-cart confirmation, bottom-right)                          */
/* ===================================================================== */

.ig-toast-stack {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 12px;
	pointer-events: none;
	max-width: min(420px, calc(100vw - 32px));
}

.ig-toast {
	pointer-events: auto;
	display: grid;
	grid-template-columns: 36px 1fr auto auto;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: var(--ig-ink);
	color: var(--ig-paper);
	border: var(--ig-stroke-bold) solid var(--ig-ink);
	box-shadow: 6px 6px 0 0 var(--ig-accent);
	font-family: var(--ig-font-mono);
	opacity: 0;
	transform: translateX(24px);
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.ig-toast.is-shown {
	opacity: 1;
	transform: translateX(0);
}

.ig-toast.is-leaving {
	opacity: 0;
	transform: translateX(24px);
}

.ig-toast--error {
	background: var(--ig-danger);
	color: var(--ig-paper);
	box-shadow: 6px 6px 0 0 var(--ig-ink);
}

.ig-toast__icon {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ig-accent);
	color: var(--ig-ink);
	font-size: 22px;
	font-weight: 900;
	line-height: 1;
}

.ig-toast--error .ig-toast__icon {
	background: var(--ig-paper);
	color: var(--ig-danger);
}

.ig-toast__body {
	min-width: 0;
}

.ig-toast__title {
	font-family: var(--ig-font-display);
	font-size: 13px;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.1;
}

.ig-toast__meta {
	margin-top: 3px;
	font-size: 12px;
	letter-spacing: 0.02em;
	color: var(--ig-paper);
	opacity: 0.78;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ig-toast__cta {
	display: inline-block;
	padding: 6px 10px;
	background: var(--ig-accent);
	color: var(--ig-ink);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	border: var(--ig-stroke) solid var(--ig-accent);
	white-space: nowrap;
}

.ig-toast__cta:hover {
	background: var(--ig-paper);
	border-color: var(--ig-paper);
	color: var(--ig-ink);
}

.ig-toast--error .ig-toast__cta {
	background: var(--ig-paper);
	color: var(--ig-danger);
	border-color: var(--ig-paper);
}

.ig-toast__close {
	background: transparent;
	border: 0;
	color: var(--ig-paper);
	font-size: 20px;
	line-height: 1;
	padding: 4px 8px;
	cursor: pointer;
	opacity: 0.7;
}

.ig-toast__close:hover {
	opacity: 1;
}

@media (max-width: 640px) {
	.ig-toast-stack {
		right: 12px;
		bottom: 12px;
		left: 12px;
		max-width: none;
	}
	.ig-toast {
		grid-template-columns: 32px 1fr auto;
		padding: 12px 12px;
	}
	.ig-toast__icon { width: 32px; height: 32px; font-size: 18px; }
	.ig-toast__cta { display: none; }
}



/* ============================================================
   Impresszum (legal imprint) — INV-MUSIC Kft. cégadatok
   ============================================================ */

.ig-impresszum { padding-bottom: 80px; }

.ig-impresszum__lead {
	max-width: 720px;
	font-family: var(--ig-font-mono);
	font-size: 13px;
	line-height: 1.6;
	color: var(--ig-ink-soft, #555);
	letter-spacing: 0.02em;
}

.ig-impresszum__grid {
	display: grid;
	grid-template-columns: 220px 1fr 1fr;
	gap: 22px;
	margin-top: 32px;
	align-items: start;
}

.ig-impresszum__brand {
	background: var(--ig-ink);
	color: var(--ig-paper);
	border: 3px solid var(--ig-ink);
	padding: 22px 18px;
	text-align: center;
	position: sticky;
	top: 100px;
}

.ig-impresszum__logo {
	display: block;
	width: 100%;
	max-width: 140px;
	height: auto;
	margin: 0 auto 14px;
	filter: invert(1);
}

.ig-impresszum__brand-line {
	margin: 0;
	font-family: var(--ig-font-display);
	font-weight: 900;
	font-size: 22px;
	letter-spacing: -0.02em;
}
.ig-impresszum__brand-line strong {
	background: var(--ig-accent);
	color: var(--ig-ink);
	padding: 0 5px;
}

.ig-impresszum__brand-sub {
	margin: 10px 0 0;
	font-family: var(--ig-font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ig-accent);
}

.ig-impresszum__panel {
	background: var(--ig-paper);
	border: 3px solid var(--ig-ink);
	padding: 22px 24px;
}

.ig-impresszum__panel h2 {
	margin: 0 0 14px;
	font-family: var(--ig-font-display);
	font-size: 18px;
	font-weight: 900;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--ig-ink);
}

.ig-impresszum__list {
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.ig-impresszum__row {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px dashed rgba(10,10,10,0.15);
}
.ig-impresszum__row:last-child { border-bottom: 0; }

.ig-impresszum__row dt {
	margin: 0;
	font-family: var(--ig-font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ig-ink-soft, #555);
	align-self: center;
}

.ig-impresszum__row dd {
	margin: 0;
	font-family: var(--ig-font-display);
	font-size: 14px;
	font-weight: 700;
	color: var(--ig-ink);
	word-break: break-word;
}
.ig-impresszum__row dd a {
	color: var(--ig-ink);
	text-decoration: none;
	border-bottom: 2px solid var(--ig-accent);
	transition: background 0.15s ease;
}
.ig-impresszum__row dd a:hover {
	background: var(--ig-accent);
}

.ig-impresszum__legal {
	margin-top: 28px;
	padding: 18px 20px;
	background: var(--ig-paper-soft, #f3f3f1);
	border-left: 6px solid var(--ig-accent);
	font-family: var(--ig-font-mono);
	font-size: 12px;
	line-height: 1.6;
	letter-spacing: 0.02em;
}
.ig-impresszum__legal a {
	color: var(--ig-ink);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--ig-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

@media (max-width: 900px) {
	.ig-impresszum__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.ig-impresszum__brand {
		position: static;
	}
	.ig-impresszum__row {
		grid-template-columns: 1fr;
		gap: 2px;
	}
	.ig-impresszum__row dt {
		font-size: 10px;
	}
}


/* ============================================================
   Legal pages — ÁSZF / Adatkezelés dinamikus virtualjog tartalom
   ============================================================ */

.ig-legal { padding-bottom: 80px; }

.ig-legal__head {
	border-bottom: 3px solid var(--ig-ink);
	padding-bottom: 18px;
	margin-bottom: 28px;
}

.ig-legal__meta {
	margin: 12px 0 0;
	font-family: var(--ig-font-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #6b6b6b;
}

.ig-legal__layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 32px;
	align-items: start;
}

.ig-legal__toc {
	position: sticky;
	top: 100px;
	background: var(--ig-paper);
	border: 3px solid var(--ig-ink);
	padding: 18px 16px;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
}

.ig-legal__toc-title {
	margin: 0 0 12px;
	font-family: var(--ig-font-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	color: #6b6b6b;
	text-transform: uppercase;
}

.ig-legal__toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: legal-toc;
}

.ig-legal__toc li {
	counter-increment: legal-toc;
	margin: 0 0 6px;
	padding: 0;
}

.ig-legal__toc li a {
	display: flex;
	gap: 8px;
	padding: 6px 4px;
	font-family: var(--ig-font-display);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ig-ink);
	text-decoration: none;
	border-bottom: 1px solid rgba(10,10,10,0.08);
	transition: background 0.15s ease, color 0.15s ease;
}

.ig-legal__toc li a::before {
	content: counter(legal-toc, decimal-leading-zero);
	font-family: var(--ig-font-mono);
	font-size: 11px;
	color: #6b6b6b;
	flex-shrink: 0;
}

.ig-legal__toc li a:hover {
	background: var(--ig-accent);
	color: var(--ig-ink);
}

.ig-legal__content {
	background: var(--ig-paper);
	border: 3px solid var(--ig-ink);
	padding: 32px 36px;
}

.ig-legal__content h2 {
	margin: 28px 0 14px;
	padding-top: 18px;
	border-top: 3px solid var(--ig-ink);
	font-family: var(--ig-font-display);
	font-size: 22px;
	font-weight: 900;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	scroll-margin-top: 100px;
}
.ig-legal__content > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.ig-legal__content h3 {
	margin: 22px 0 10px;
	font-family: var(--ig-font-display);
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.01em;
	scroll-margin-top: 100px;
}

.ig-legal__content h4 {
	margin: 18px 0 8px;
	font-size: 14px;
	font-weight: 700;
}

.ig-legal__content p {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.65;
	color: #1c1c1c;
}

.ig-legal__content ul,
.ig-legal__content ol {
	margin: 0 0 14px 22px;
	padding: 0;
}

.ig-legal__content li {
	margin: 0 0 6px;
	font-size: 15px;
	line-height: 1.6;
}

.ig-legal__content a {
	color: var(--ig-ink);
	text-decoration: underline;
	text-decoration-color: var(--ig-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

.ig-legal__content a:hover {
	background: var(--ig-accent);
}

.ig-legal__content strong,
.ig-legal__content b {
	font-weight: 800;
}

.ig-legal__content blockquote {
	margin: 14px 0;
	padding: 14px 18px;
	background: #f3f3f1;
	border-left: 6px solid var(--ig-accent);
	font-style: italic;
}

.ig-legal__content table {
	width: 100%;
	margin: 16px 0;
	border-collapse: collapse;
	font-size: 14px;
}
.ig-legal__content th,
.ig-legal__content td {
	padding: 10px 12px;
	text-align: left;
	border: 1px solid var(--ig-ink);
	vertical-align: top;
}
.ig-legal__content thead th {
	background: var(--ig-ink);
	color: var(--ig-paper);
	font-family: var(--ig-font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ig-legal__warning {
	padding: 16px 18px;
	background: #fef9c3;
	border: 2px solid #ca8a04;
	font-family: var(--ig-font-mono);
	font-size: 13px;
	letter-spacing: 0.02em;
	color: #1c1c1c;
}

@media (max-width: 900px) {
	.ig-legal__layout {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.ig-legal__toc {
		position: static;
		max-height: none;
	}
	.ig-legal__content {
		padding: 22px 18px;
	}
	.ig-legal__content h2 { font-size: 18px; }
}

/* ===== Stock alert form (out-of-stock product page) ===== */
.ig-product-page__notify { padding: 16px; border: 3px solid #0a0a0a; background: #fff; }
.ig-stock-alert__title { margin: 0 0 6px 0; font-size: 18px; font-weight: 900; letter-spacing: -.01em; text-transform: uppercase; }
.ig-stock-alert__lead { margin: 0 0 12px 0; font-size: 13px; color: #444; }
.ig-stock-alert__form { display: flex; gap: 8px; }
.ig-stock-alert__form input[type=email] { flex: 1; padding: 10px 12px; border: 2px solid #0a0a0a; font-family: inherit; }
.ig-stock-alert__msg { margin: 8px 0 0 0; padding: 8px 10px; font-size: 13px; }
.ig-stock-alert__msg.is-ok { background: #E8FF00; }
.ig-stock-alert__msg.is-err { background: #fee; color: #a33; }

/* ===== Wishlist + compare pin row ===== */
.ig-product-page__pinrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.ig-pin-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 2px solid #0a0a0a; background: #fff; color: #0a0a0a; cursor: pointer; font-family: inherit; font-weight: 700; transition: background .15s, color .15s; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; text-decoration: none; }
.ig-pin-btn:hover { background: #f6f6f4; }
.ig-pin-btn.is-on { background: var(--ig-accent, #E8FF00); }
/* Kedvenc (wishlist) jelölés — egyértelmű PIROS, mobilon és desktopon is. */
[data-wishlist-btn].is-on { background: #ffe9eb; border-color: #e11d2a; color: #e11d2a; }
.ig-pin-btn__icon { display: inline-flex; line-height: 0; }
.ig-pin-btn__icon svg { width: 18px; height: 18px; display: block; }
[data-wishlist-btn].is-on .ig-pin-btn__icon svg { fill: #e11d2a; stroke: #e11d2a; }
.ig-pin-btn__label { font-family: var(--ig-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.ig-pin-btn:disabled { opacity: .5; cursor: wait; }
/* Mobilon: CSAK ikonok — címke elrejtve, négyzetes, érintőbarát gombok. */
@media (max-width: 640px) {
	.ig-product-page__pinrow { gap: 10px; }
	.ig-product-page__pinrow .ig-pin-btn { width: 52px; height: 52px; padding: 0; gap: 0; justify-content: center; }
	.ig-product-page__pinrow .ig-pin-btn__label { display: none; }
	.ig-product-page__pinrow .ig-pin-btn__icon svg { width: 24px; height: 24px; }
}

/* ===== Wishlist grid in account ===== */
.ig-wishlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.ig-wishlist-card { display: flex; flex-direction: column; border: 3px solid #0a0a0a; background: #fff; position: relative; transition: transform .15s; }
.ig-wishlist-card:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 #0a0a0a; }
.ig-wishlist-card__link { display: block; text-decoration: none; color: inherit; flex: 1; }
.ig-wishlist-card__link img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; border-bottom: 2px solid #0a0a0a; }
.ig-wishlist-card__body { padding: 10px 12px; }
.ig-wishlist-card__body h3 { margin: 0 0 6px 0; font-size: 14px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.ig-wishlist-card__price { margin: 0; font-weight: 900; font-size: 15px; }
.ig-wishlist-card__actions { display: flex; align-items: stretch; gap: 0; border-top: 2px solid #0a0a0a; }
.ig-wishlist-card__cart { flex: 1; border: none; border-radius: 0; padding: 10px 12px; font-family: var(--ig-font-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.ig-wishlist-card__cart:disabled { opacity: .6; cursor: wait; }
.ig-wishlist-card__oos { flex: 1; padding: 10px 12px; text-align: center; font-family: var(--ig-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #6B6B6B; background: #f6f6f4; }
.ig-wishlist-card__remove { width: 38px; background: #fff; border: none; border-left: 2px solid #0a0a0a; cursor: pointer; font-size: 20px; line-height: 1; color: #0a0a0a; }
.ig-wishlist-card__remove:hover { background: #0a0a0a; color: #fff; }
.ig-wishlist-msg { margin: 12px 0 0 0; padding: 10px 14px; border: 2px solid #0a0a0a; font-size: 13px; }
.ig-wishlist-msg.is-ok { background: #E8FF00; }
.ig-wishlist-msg.is-err { background: #fee; color: #a33; }

/* ===== Search overlay — header alól lecsapódó "blade" panel ===== */
.ig-search-toggle { border: 0; cursor: pointer; }
.ig-search-toggle[aria-expanded="true"] { background: var(--ig-accent); color: var(--ig-accent-ink); }

/* Full-width overlay below the sticky header. A sárga shadow indikálja a brutalist
   karaktert, a panel a tetejéről csapódik le. */
.ig-search-panel {
	position: fixed;
	top: 0; /* a panel a viewport tetejétől indul, de a header alóla bukkan elő */
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20; /* a header (z-index: 30) alá — innen jön elő a panel */
	background: rgba(10, 10, 10, 0);
	pointer-events: none;
	transition: background .35s cubic-bezier(.4, 0, .2, 1);
}
.ig-search-panel[hidden] { display: none; }
.ig-search-panel.is-open {
	background: rgba(10, 10, 10, .42);
	pointer-events: auto;
}

.ig-search-panel__inner {
	background: var(--ig-paper);
	border-bottom: 6px solid var(--ig-line);
	box-shadow: 0 8px 0 0 var(--ig-accent), 0 8px 0 1px var(--ig-line);
	width: 100%;
	/* Header 80px + 88px légtér az alján → a panel max kb 75% magasság, alatta
	   látszik az oldal tartalma és a sárga shadow. A belső __results görget.
	   A --ig-annbar-h a navbar fölötti bejelentés-sáv ÉPPEN LÁTHATÓ magassága
	   (görgetéskor nullára fogy) — enélkül a panel elcsúszna és rosszul
	   számolná a magasságát, amikor a sáv aktív. */
	max-height: calc(100vh - 168px - var(--ig-annbar-h, 0px));
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	transform: translate3d(0, -100%, 0);
	transition: transform .42s cubic-bezier(.22, 1.06, .36, 1);
	will-change: transform;
}
.ig-search-panel.is-open .ig-search-panel__inner {
	transform: translate3d(0, calc(80px + var(--ig-annbar-h, 0px)), 0);
}

.ig-search-panel__form {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 32px;
	border-bottom: 3px solid var(--ig-line);
	max-width: 1240px;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
	flex-shrink: 0;
}
.ig-search-panel__icon { width: 26px; height: 26px; flex-shrink: 0; opacity: .55; }
.ig-search-panel__form input[type=search] {
	flex: 1; min-width: 0; border: none; outline: none;
	padding: 8px 0;
	font-size: 24px; font-family: inherit;
	background: transparent; font-weight: 700;
	letter-spacing: -.01em;
}
.ig-search-panel__form input[type=search]::placeholder { color: var(--ig-muted); font-weight: 500; }
.ig-search-panel__close {
	background: var(--ig-ink); color: var(--ig-paper);
	border: 0; width: 40px; height: 40px; font-size: 24px; line-height: 1;
	cursor: pointer; flex-shrink: 0;
	transition: background .15s, color .15s;
}
.ig-search-panel__close:hover { background: var(--ig-accent); color: var(--ig-accent-ink); }

.ig-search-panel__hint {
	padding: 32px;
	font-family: var(--ig-font-mono); font-size: 12px; letter-spacing: .12em;
	text-transform: uppercase; color: var(--ig-muted); text-align: center;
	max-width: 1240px; margin: 0 auto; width: 100%; box-sizing: border-box;
	flex-shrink: 0;
}
/* Görgetésért felelős konténer — minden találat a belső grid-ben van */
.ig-search-panel__results {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
}
.ig-search-panel__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	padding: 24px 32px 32px;
	max-width: 1240px;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
}

/* Kártya wrapper — a link + kosár gomb külön elemek, hogy a kosár ne kövesse a linket */
.ig-search-panel__hit-wrap {
	display: flex;
	flex-direction: column;
	background: var(--ig-paper);
	border: 2px solid var(--ig-line);
	overflow: hidden;
	transition: transform .12s ease, box-shadow .12s ease;
}
.ig-search-panel__hit-wrap:hover,
.ig-search-panel__hit-wrap:focus-within {
	transform: translate(-3px, -3px);
	box-shadow: 5px 5px 0 var(--ig-line);
}

/* A kártya kattintható linkje (kép + címke + ár) */
.ig-search-panel__hit {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	flex: 1;
	transition: background .12s ease;
}
.ig-search-panel__hit:hover,
.ig-search-panel__hit.is-active {
	background: var(--ig-accent);
}
.ig-search-panel__thumb {
	width: 100%;
	aspect-ratio: 1 / 1;
	background: #f6f6f4;
	border-bottom: 2px solid var(--ig-line);
	display: block;
	overflow: hidden;
}
.ig-search-panel__thumb img {
	width: 100%; height: 100%;
	object-fit: cover; display: block;
}
.ig-search-panel__nothumb {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	color: var(--ig-muted); font-family: var(--ig-font-mono); font-size: 24px;
}
.ig-search-panel__body {
	padding: 12px 14px 14px;
	display: flex; flex-direction: column;
	min-width: 0; flex: 1;
}
.ig-search-panel__brand {
	display: inline-block;
	font-family: var(--ig-font-mono); font-size: 10px; letter-spacing: .12em;
	text-transform: uppercase; color: var(--ig-muted);
	margin-bottom: 4px;
}
.ig-search-panel__body strong {
	display: block;
	font-size: 14px; font-weight: 700; letter-spacing: -.005em;
	line-height: 1.3;
	/* legfeljebb 2 sor */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 8px;
}
.ig-search-panel__price {
	display: block;
	font-size: 16px; font-weight: 900;
	margin-top: auto;
}
.ig-search-panel__empty {
	grid-column: 1 / -1;
	padding: 48px 32px;
	font-family: var(--ig-font-mono); font-size: 12px; letter-spacing: .12em;
	text-transform: uppercase; color: var(--ig-muted); text-align: center;
}

/* Kosárba gomb a találati kártyán */
.ig-search-panel__cart {
	display: block;
	width: 100%;
	border: 0;
	border-top: 2px solid var(--ig-line);
	background: var(--ig-ink);
	color: var(--ig-paper);
	padding: 10px 12px;
	font-family: var(--ig-font-mono);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .12s ease, color .12s ease;
	box-sizing: border-box;
}
.ig-search-panel__cart:hover:not(:disabled):not(.is-oos) {
	background: var(--ig-accent);
	color: var(--ig-accent-ink);
}
.ig-search-panel__cart:disabled { cursor: wait; opacity: .85; }
.ig-search-panel__cart.is-loading { background: var(--ig-muted); }
.ig-search-panel__cart.is-ok { background: var(--ig-accent); color: var(--ig-accent-ink); }
.ig-search-panel__cart.is-err { background: #c00; color: #fff; }
.ig-search-panel__cart.is-oos {
	background: #f6f6f4;
	color: var(--ig-muted);
	cursor: not-allowed;
	text-align: center;
}

.ig-search-open { overflow: hidden; }

@media (max-width: 1100px) {
	.ig-search-panel__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
	.ig-search-panel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px 16px 24px; }
}
@media (max-width: 720px) {
	.ig-search-panel__inner { max-height: calc(100vh - 64px); }
	.ig-search-panel.is-open .ig-search-panel__inner { transform: translate3d(0, 64px, 0); }
	.ig-search-panel__form { padding: 14px 16px; gap: 10px; }
	.ig-search-panel__form input[type=search] { font-size: 18px; }
	.ig-search-panel__icon { width: 22px; height: 22px; }
	.ig-search-panel__body strong { font-size: 13px; }
	.ig-search-panel__price { font-size: 14px; }
}
@media (max-width: 480px) {
	.ig-search-panel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px 12px 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.ig-search-panel, .ig-search-panel__inner { transition: none; }
}

/* ===== Q&A on product page ===== */
.ig-product-page__qa { margin-top: 48px; padding-top: 24px; border-top: 3px solid #0a0a0a; }
.ig-qa-list { list-style: none; margin: 16px 0 32px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ig-qa-item { border: 2px solid #0a0a0a; background: #fff; padding: 14px 16px; }
.ig-qa-item__q, .ig-qa-item__a { margin: 0 0 8px 0; padding-left: 28px; position: relative; }
.ig-qa-item__mark { position: absolute; left: 0; top: 0; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; background: #0a0a0a; color: #fff; font-family: var(--ig-font-mono); font-size: 11px; font-weight: 900; }
.ig-qa-item__mark--a { background: #E8FF00; color: #0a0a0a; }
.ig-qa-item__meta { margin: 8px 0 0 28px; font-family: var(--ig-font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #6B6B6B; }
.ig-qa-list__empty { padding: 20px; border: 2px dashed #0a0a0a; text-align: center; }
.ig-qa-form-wrap { background: #f6f6f4; border: 3px solid #0a0a0a; padding: 18px 20px; }
.ig-qa-form-wrap h3 { margin: 0 0 12px 0; font-size: 18px; text-transform: uppercase; }
.ig-qa-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ig-qa-form__field { display: flex; flex-direction: column; }
.ig-qa-form__field--wide { grid-column: 1 / -1; }
.ig-qa-form__field span { font-family: var(--ig-font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #6B6B6B; margin-bottom: 4px; }
.ig-qa-form__field input, .ig-qa-form__field textarea { border: 2px solid #0a0a0a; padding: 8px 10px; font-family: inherit; background: #fff; }
.ig-qa-form button { grid-column: 1 / -1; justify-self: start; }
.ig-qa-form__msg { grid-column: 1 / -1; margin: 0; padding: 8px 10px; }
.ig-qa-form__msg.is-ok { background: #E8FF00; }
.ig-qa-form__msg.is-err { background: #fee; color: #a33; }
@media (max-width: 600px) { .ig-qa-form { grid-template-columns: 1fr; } }

/* ===== Reorder notice on cart ===== */
.ig-reorder-notice { padding: 14px 18px; border: 3px solid #0a0a0a; background: #E8FF00; margin-bottom: 16px; }
.ig-reorder-notice p { margin: 0 0 4px 0; }
.ig-reorder-notice p:last-child { margin-bottom: 0; }

/* ===== Compare floating widget + compare page ===== */
.ig-compare-fab { position: fixed; bottom: 24px; right: 24px; background: #0a0a0a; color: #fff; padding: 10px 16px; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; box-shadow: 4px 4px 0 #E8FF00, 4px 4px 0 1px #0a0a0a; font-family: var(--ig-font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; z-index: 60; }
.ig-compare-fab[hidden] { display: none; }
.ig-compare-fab__icon { background: #E8FF00; color: #0a0a0a; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; }
/* ===== Compare board ===== */
.ig-compare__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.ig-compare__head-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ig-compare__head-actions[hidden] { display: none; }
.ig-compare__counter { font-family: var(--ig-font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px; background: var(--ig-ink); color: var(--ig-paper); }

.ig-compare-empty { background: #f6f6f4; border: 3px solid #0a0a0a; padding: 48px 24px; text-align: center; }
.ig-compare-empty[hidden] { display: none; }
.ig-compare-empty__icon { font-size: 64px; font-weight: 900; margin-bottom: 12px; background: #E8FF00; display: inline-block; width: 96px; height: 96px; line-height: 96px; border: 3px solid #0a0a0a; }
.ig-compare-empty h2 { margin: 0 0 8px 0; font-size: 24px; text-transform: uppercase; letter-spacing: -.01em; }
.ig-compare-empty p { margin: 0 0 18px 0; color: var(--ig-muted); }

.ig-compare-loading { padding: 32px; font-family: var(--ig-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ig-muted); text-align: center; }

.ig-compare-board-wrap { margin-top: 24px; }
.ig-compare-board { background: #fff; border: 3px solid #0a0a0a; box-shadow: 6px 6px 0 #E8FF00, 6px 6px 0 1px #0a0a0a; }
.ig-compare-board__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
}
.ig-compare-board__grid {
	display: grid;
	/* label-col + N termék-col */
	grid-template-columns: 180px repeat(var(--ig-compare-cols, 4), minmax(220px, 1fr));
}

/* Cellák */
.ig-compare-board__cell {
	padding: 14px 16px;
	border-right: 2px solid #0a0a0a;
	border-bottom: 2px solid #ececec;
	background: #fff;
	min-width: 0;
	display: flex;
	align-items: center;
	font-size: 14px;
	scroll-snap-align: start;
}
.ig-compare-board__cell:last-child,
.ig-compare-board__grid > .ig-compare-board__cell:nth-child(calc(var(--ig-compare-cols, 4) + 1)),
.ig-compare-board__grid > .ig-compare-board__cell:nth-child(calc(var(--ig-compare-cols, 4) + 1) ~ n) { /* no-op fallback */ }
.ig-compare-board__cell--label {
	background: #f6f6f4;
	font-family: var(--ig-font-mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #0a0a0a;
	font-weight: 700;
	position: sticky;
	left: 0;
	z-index: 2;
	border-right: 3px solid #0a0a0a;
}
.ig-compare-board__cell--label.is-diff { background: #fffae0; }
.ig-compare-board__cell.is-diff { background: #fffef2; font-weight: 700; }

/* Eyebrow a head bal felső cellán */
.ig-compare-board__eyebrow {
	margin: 0; font-family: var(--ig-font-mono); font-size: 11px;
	letter-spacing: .12em; text-transform: uppercase; color: var(--ig-muted);
}

/* Head termékkártya cella */
.ig-compare-board__cell--card,
.ig-compare-board__cell--head-label {
	background: #fff;
	border-bottom: 3px solid #0a0a0a;
	align-items: stretch;
	flex-direction: column;
	padding: 0;
}
.ig-compare-board__cell--card { position: relative; }
.ig-compare-board__remove {
	position: absolute; top: 8px; right: 8px;
	width: 30px; height: 30px;
	background: #0a0a0a; color: #fff;
	border: 0; cursor: pointer;
	font-weight: 900; font-size: 18px; line-height: 1;
	z-index: 3;
	transition: background .15s;
}
.ig-compare-board__remove:hover { background: #c00; }
.ig-compare-board__thumb {
	display: block; width: 100%; aspect-ratio: 1/1;
	background: #f6f6f4; border-bottom: 2px solid #0a0a0a;
	overflow: hidden;
}
.ig-compare-board__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-compare-board__nothumb { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: var(--ig-muted); font-family: var(--ig-font-mono); font-size: 32px; }
.ig-compare-board__cardbody { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; gap: 6px; }
.ig-compare-board__brand { display: inline-block; font-family: var(--ig-font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ig-muted); }
.ig-compare-board__title { display: block; text-decoration: none; color: inherit; font-weight: 700; font-size: 15px; line-height: 1.3; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ig-compare-board__title:hover { color: #0a0a0a; text-decoration: underline; }
.ig-compare-board__price { margin: 4px 0; font-size: 16px; font-weight: 900; line-height: 1.2; }
.ig-compare-board__price del { display: block; font-weight: 400; font-size: 12px; color: var(--ig-muted); margin-bottom: 2px; }
.ig-compare-board__actions { margin-top: auto; padding-top: 8px; }
.ig-compare-board__cart {
	display: block; width: 100%;
	background: #0a0a0a; color: #fff;
	border: 0; padding: 10px 12px;
	font-family: var(--ig-font-mono); font-size: 11px; font-weight: 800;
	letter-spacing: .08em; text-transform: uppercase;
	cursor: pointer;
	transition: background .15s, color .15s;
	text-align: center;
}
.ig-compare-board__cart:not(.is-oos):hover { background: #E8FF00; color: #0a0a0a; }
.ig-compare-board__cart.is-ok { background: #E8FF00; color: #0a0a0a; }
.ig-compare-board__cart.is-oos { background: #f6f6f4; color: var(--ig-muted); cursor: not-allowed; }
.ig-compare-board__cart:disabled { opacity: .7; cursor: wait; }

.ig-compare-msg { margin-top: 12px; padding: 10px 14px; border: 2px solid #0a0a0a; font-size: 13px; }
.ig-compare-msg.is-ok { background: #E8FF00; }
.ig-compare-msg.is-err { background: #fee; color: #a33; }

/* MOBIL: keskenyebb label, kompaktabb termékoszlop */
@media (max-width: 720px) {
	.ig-compare__head { flex-direction: column; align-items: stretch; }
	.ig-compare__head-actions { justify-content: space-between; }
	.ig-compare-board__grid { grid-template-columns: 110px repeat(var(--ig-compare-cols, 4), 70vw); }
	.ig-compare-board__cell { padding: 10px 12px; font-size: 13px; }
	.ig-compare-board__cell--label { font-size: 10px; padding: 10px 8px; }
	.ig-compare-board__cardbody { padding: 10px 12px 12px; }
	.ig-compare-board__title { font-size: 14px; -webkit-line-clamp: 2; }
	.ig-compare-board__price { font-size: 15px; }
}
@media (max-width: 480px) {
	.ig-compare-board__grid { grid-template-columns: 96px repeat(var(--ig-compare-cols, 4), 80vw); }
}

/* ===== Service status timeline (customer account) ===== */
.ig-service-steps { display: flex; align-items: flex-start; justify-content: space-between; list-style: none; padding: 0; margin: 16px 0 24px; gap: 4px; }
.ig-service-step { display: flex; flex-direction: column; align-items: center; flex: 1; text-align: center; position: relative; padding-top: 18px; }
.ig-service-step::before { content: ''; position: absolute; left: 50%; right: -50%; top: 7px; height: 2px; background: #ccc; z-index: 0; }
.ig-service-step:last-child::before { display: none; }
.ig-service-step__dot { width: 16px; height: 16px; border: 2px solid #0a0a0a; background: #fff; position: relative; z-index: 1; margin-bottom: 6px; }
.ig-service-step.is-done .ig-service-step__dot { background: #0a0a0a; }
.ig-service-step.is-done::before { background: #0a0a0a; }
.ig-service-step.is-active .ig-service-step__dot { background: #E8FF00; }
.ig-service-step__label { font-family: var(--ig-font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #6B6B6B; }
.ig-service-step.is-active .ig-service-step__label { color: #0a0a0a; font-weight: 700; }
@media (max-width: 600px) { .ig-service-step__label { font-size: 9px; } }

/* ===== Brutalist confirm modal (window.invgroupConfirm) ===== */
.ig-confirm { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; padding: 24px; }
.ig-confirm[hidden] { display: none; }
.ig-confirm__backdrop { position: absolute; inset: 0; background: rgba(10,10,10,0); transition: background .2s ease; }
.ig-confirm.is-open .ig-confirm__backdrop { background: rgba(10,10,10,.55); }
.ig-confirm__box {
	position: relative;
	background: #fff;
	border: 3px solid #0a0a0a;
	box-shadow: 8px 8px 0 #E8FF00, 8px 8px 0 1px #0a0a0a;
	max-width: 480px;
	width: 100%;
	padding: 28px 28px 24px;
	transform: translateY(-8px) scale(.96);
	opacity: 0;
	transition: transform .25s cubic-bezier(.22,1.06,.36,1), opacity .2s ease;
}
.ig-confirm.is-open .ig-confirm__box { transform: translateY(0) scale(1); opacity: 1; }
.ig-confirm__eyebrow { margin: 0 0 10px; font-family: var(--ig-font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #6B6B6B; }
.ig-confirm__title { margin: 0 0 12px; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; font-weight: 900; text-transform: uppercase; }
.ig-confirm__msg { margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: #333; }
.ig-confirm__msg[hidden] { display: none; }
.ig-confirm__actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.ig-confirm__actions .ig-button { min-width: 110px; }
.ig-confirm__actions .ig-button--danger { background: #c00; color: #fff; border-color: #0a0a0a; }
.ig-confirm__actions .ig-button--danger:hover { background: #0a0a0a; }
.ig-confirm-open { overflow: hidden; }
@media (max-width: 480px) {
	.ig-confirm { padding: 16px; }
	.ig-confirm__box { padding: 22px 20px 20px; }
	.ig-confirm__title { font-size: 19px; }
	.ig-confirm__actions { flex-direction: column-reverse; }
	.ig-confirm__actions .ig-button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.ig-confirm__box, .ig-confirm__backdrop { transition: none; }
}

/* ===== Sale countdown a termékoldalon ===== */
.ig-product-page__sale-countdown {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px 0;
	padding: 6px 12px;
	background: #E8FF00;
	border: 2px solid #0a0a0a;
	font-family: var(--ig-font-mono);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .08em;
}
.ig-product-page__sale-countdown-label { font-size: 11px; }
.ig-product-page__sale-countdown-clock {
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	background: #0a0a0a;
	color: #E8FF00;
	padding: 3px 8px;
	letter-spacing: .04em;
}

/* ===== Garancia-figyelő (account/warranty) ===== */
.ig-warranty__intro { margin: 4px 0 18px 0; font-size: 14px; }
.ig-warranty-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.ig-warranty-kpi__item { background: #fff; border: 3px solid #0a0a0a; padding: 14px 16px; }
.ig-warranty-kpi__item strong { display: block; font-size: 28px; font-weight: 900; line-height: 1; }
.ig-warranty-kpi__item span { display: block; margin-top: 4px; font-family: var(--ig-font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #6B6B6B; }
.ig-warranty-kpi__item.is-active strong { color: #0a0a0a; }
.ig-warranty-kpi__item.is-expiring { background: #E8FF00; }
.ig-warranty-kpi__item.is-expired strong { color: #b00; }

.ig-warranty-list { display: flex; flex-direction: column; gap: 10px; }
.ig-warranty-card { background: #fff; border: 2px solid #0a0a0a; padding: 14px 16px; border-left: 6px solid #0a0a0a; }
.ig-warranty-card.is-state-active   { border-left-color: #207520; }
.ig-warranty-card.is-state-expiring { border-left-color: #E8FF00; background: #fffae0; }
.ig-warranty-card.is-state-expired  { border-left-color: #c00; }
.ig-warranty-card.is-state-unknown  { border-left-color: #ccc; }
.ig-warranty-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.ig-warranty-card__title { font-weight: 800; font-size: 16px; letter-spacing: -.005em; text-decoration: none; color: inherit; }
.ig-warranty-card__title:hover { text-decoration: underline; }
.ig-warranty-card__status { font-family: var(--ig-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; background: #f6f6f4; border: 1px solid #0a0a0a; white-space: nowrap; }
.ig-warranty-card.is-state-active   .ig-warranty-card__status { background: #dff5df; }
.ig-warranty-card.is-state-expiring .ig-warranty-card__status { background: #0a0a0a; color: #E8FF00; }
.ig-warranty-card.is-state-expired  .ig-warranty-card__status { background: #fee; color: #c00; }
.ig-warranty-card__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 16px; margin: 0; }
.ig-warranty-card__meta div { display: flex; flex-direction: column; }
.ig-warranty-card__meta dt { font-family: var(--ig-font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #6B6B6B; margin-bottom: 2px; }
.ig-warranty-card__meta dd { margin: 0; font-size: 13px; }
.ig-warranty-card__meta code { background: #f6f6f4; padding: 1px 6px; border: 1px solid #0a0a0a; font-size: 12px; }
@media (max-width: 600px) {
	.ig-warranty-kpi { grid-template-columns: 1fr; }
	.ig-warranty-card__head { flex-direction: column; }
	.ig-warranty-card__status { align-self: flex-start; }
}

/* ===== Mennyiségi árlépcső + karton-méret ===== */
.ig-pricing-tiers { margin: 14px 0; border: 2px solid #0a0a0a; background: #fff; }
.ig-pricing-tiers__carton {
	margin: 0;
	background: #E8FF00;
	padding: 10px 14px;
	border-bottom: 2px solid #0a0a0a;
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}
.ig-pricing-tiers__carton-eyebrow {
	font-family: var(--ig-font-mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #0a0a0a;
	opacity: .75;
}
.ig-pricing-tiers__carton strong {
	font-size: 15px;
	font-weight: 900;
	letter-spacing: -.01em;
}

.ig-pricing-tiers__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.ig-pricing-tiers__table thead th {
	background: #f6f6f4;
	padding: 8px 14px;
	font-family: var(--ig-font-mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #6B6B6B;
	font-weight: 700;
	text-align: left;
	border-bottom: 2px solid #0a0a0a;
}
.ig-pricing-tiers__table tbody td {
	padding: 8px 14px;
	border-bottom: 1px solid #eee;
}
.ig-pricing-tiers__table tbody tr:last-child td { border-bottom: 0; }
.ig-pricing-tiers__table tbody td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.ig-pricing-tiers__table tr.is-discount td { background: #fffae0; }
.ig-pricing-tiers__table tr.is-discount td:last-child strong { color: #0a0a0a; }

/* Karton-multiplex sor — sárga emelt háttér + zöld border-left a "pakold be" érzéshez */
.ig-pricing-tiers__table tr.is-carton td { background: #fffae0; }
.ig-pricing-tiers__table tr.is-carton.is-discount td { background: #E8FF00; }
.ig-pricing-tiers__table tr.is-carton td:first-child {
	border-left: 4px solid #0a0a0a;
	font-weight: 700;
}
.ig-pricing-tiers__note {
	margin: 0;
	padding: 8px 14px;
	background: #f6f6f4;
	border-top: 1px solid #0a0a0a;
	font-family: var(--ig-font-mono);
	font-size: 10px;
	letter-spacing: .04em;
	color: #6B6B6B;
	line-height: 1.5;
}

/* Árlépcső táblában az "/ db" egységjelző halvány monospace */
.ig-pricing-tiers__unit {
	font-family: var(--ig-font-mono);
	font-size: 11px;
	letter-spacing: .04em;
	color: #6B6B6B;
	font-weight: 500;
	margin-left: 4px;
}
.ig-pricing-tiers__table tr.is-carton.is-discount .ig-pricing-tiers__unit { color: #0a0a0a; }

/* Aktuális sor a qty input alapján — vastag fekete keret + nyíl jelzés balra */
.ig-pricing-tiers__table tr.is-current td {
	outline: 3px solid #0a0a0a;
	outline-offset: -3px;
	position: relative;
	font-weight: 800;
}
.ig-pricing-tiers__table tr.is-current td:first-child::before {
	content: '▸ ';
	font-weight: 900;
	color: #0a0a0a;
}
.ig-pricing-tiers__table tr.is-current.is-discount td { background: #E8FF00 !important; }
.ig-pricing-tiers__table tr.is-current.is-carton td:first-child::before { content: '🎯 '; }

/* A fő ár háttér-villanása amikor a qty változására kedvezményes tier-be ugrunk */
.ig-product-page__price.is-tier-discount {
	background: linear-gradient(transparent 60%, #E8FF00 60%);
	padding: 0 6px;
	margin-left: -6px;
}

/* ===== Karton-badge + "+1 karton" gomb a termékkártyán (csak viszonteladóknak) ===== */
.ig-product-card__carton-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	max-width: 60%;
	background: #0a0a0a;
	color: #E8FF00;
	font-family: var(--ig-font-mono);
	border: 2px solid #0a0a0a;
	box-shadow: 3px 3px 0 #E8FF00;
	z-index: 2;
	display: flex;
	flex-direction: column;
	padding: 4px 8px;
	text-align: right;
	line-height: 1.2;
}
.ig-product-card__carton-badge strong {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	white-space: nowrap;
}
.ig-product-card__carton-badge em {
	font-style: normal;
	font-size: 9px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
	margin-top: 2px;
}
.ig-product-card__cta--has-carton {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 6px;
}
.ig-product-card__carton-btn {
	background: #0a0a0a;
	color: #E8FF00;
	border: 2px solid #0a0a0a;
	padding: 0 12px;
	font-family: var(--ig-font-mono);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .06em;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s, color .15s;
}
.ig-product-card__carton-btn:hover {
	background: #E8FF00;
	color: #0a0a0a;
}
@media (max-width: 480px) {
	.ig-product-card__carton-badge { max-width: 70%; }
	.ig-product-card__carton-badge strong { font-size: 10px; }
	.ig-product-card__carton-badge em { font-size: 8px; }
	.ig-product-card__cta--has-carton { grid-template-columns: 1fr; }
}

/* ===== Shop breadcrumb pozicionálás ===== */
/* A breadcrumb a page-head padding-top sávjában él (abszolút), így létezése nem
   tol le semmit — az eyebrow + h1 mindig ugyanott áll. Fölötte 24px belső
   levegő ("padding a breadcrumb fölött"). */
.ig-page-head--shop { position: relative; }
.ig-page-head--shop > [data-shop-breadcrumb] {
	position: absolute;
	top: 24px;
	left: 0;
	right: 0;
}
.ig-page-head--shop > [data-shop-breadcrumb]:empty { display: none; }
.ig-page-head--shop > [data-shop-breadcrumb] .ig-breadcrumb { margin-bottom: 0; }

/* ===== Termékkártya: "X db a kosárban" badge + dinamikus ár jelzés ===== */
.ig-product-card__incart {
	position: absolute;
	bottom: 8px;
	right: 8px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--ig-accent);
	color: var(--ig-accent-ink);
	border: 2px solid var(--ig-line);
	padding: 4px 8px;
	font-family: var(--ig-font-mono);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .04em;
	z-index: 2;
	line-height: 1;
}
.ig-product-card__incart svg { width: 14px; height: 14px; flex-shrink: 0; }
.ig-product-card__incart strong { font-size: 14px; font-weight: 900; }

.ig-product-card__pricetag--cart {
	background: var(--ig-ink);
	color: var(--ig-accent);
	padding: 2px 6px;
	font-family: var(--ig-font-mono);
	font-size: 10px;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.ig-product-card__amount.is-cart-tier {
	background: linear-gradient(transparent 65%, var(--ig-accent) 65%);
	padding: 0 4px;
}

/* SVG ikon a +karton gombon */
.ig-product-card__carton-icon { width: 14px; height: 14px; display: inline-block; vertical-align: middle; margin-right: 4px; }
.ig-product-card__carton-btn span { display: inline-block; vertical-align: middle; }

/* ===== Ajánlatkérő oldal (/ajanlatkeres/) — checkout-szerű 2-oszlopos ===== */
.ig-quote-request {
	/* full container szélesség, mint az összes többi oldal */
	padding-bottom: 80px;
}
.ig-quote-request__layout {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 24px;
	align-items: start;
	margin-top: 20px;
}
.ig-quote-request__main { display: flex; flex-direction: column; gap: 18px; }
.ig-quote-request__step {
	background: #fff;
	border: 3px solid #0a0a0a;
	padding: 22px 26px;
}
.ig-quote-request__step-head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 16px 0;
	padding-bottom: 12px;
	border-bottom: 2px solid #0a0a0a;
}
.ig-quote-request__step-num {
	font-family: var(--ig-font-mono);
	font-size: 12px;
	letter-spacing: .08em;
	background: #0a0a0a;
	color: #E8FF00;
	padding: 2px 7px;
}
.ig-quote-request__step-head h2 {
	margin: 0;
	font-size: 18px;
	letter-spacing: -.01em;
	text-transform: uppercase;
	font-weight: 900;
}
.ig-quote-request__shipping-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border: 2px solid #0a0a0a;
	background: #fff;
	cursor: pointer;
	font-family: var(--ig-font-mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: 12px;
}
.ig-quote-request__shipping-toggle:has(input:checked) { background: #E8FF00; }
.ig-quote-request__msg textarea {
	width: 100%;
	border: 2px solid #0a0a0a;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 15px;
	min-height: 110px;
	resize: vertical;
	background: #fff;
}

/* Jobboldali aside: sticky, marad a görgetésnél */
.ig-quote-request__aside { position: sticky; top: 100px; }
.ig-quote-request__summary {
	background: #fff;
	border: 3px solid #0a0a0a;
	padding: 22px 26px;
	box-shadow: 6px 6px 0 #E8FF00, 6px 6px 0 1px #0a0a0a;
}
.ig-quote-request__summary h2 {
	margin: 0 0 14px 0;
	padding-bottom: 10px;
	border-bottom: 2px solid #0a0a0a;
	font-size: 16px;
	letter-spacing: -.005em;
	text-transform: uppercase;
	font-weight: 900;
}
.ig-quote-request__items { list-style: none; padding: 0; margin: 0; }
.ig-quote-request__items li {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid #ececec;
}
.ig-quote-request__items li:last-child { border-bottom: 0; }
.ig-quote-request__items strong { display: block; font-size: 13px; font-weight: 700; }
.ig-quote-request__item-qty {
	display: block;
	margin-top: 2px;
	font-family: var(--ig-font-mono);
	font-size: 10px;
	letter-spacing: .08em;
	color: #6B6B6B;
	text-transform: uppercase;
}
.ig-quote-request__item-price {
	flex-shrink: 0;
	font-weight: 700;
	font-size: 13px;
}
.ig-quote-request__totals {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 4px 14px;
	margin: 14px 0 0 0;
}
.ig-quote-request__totals dt {
	font-family: var(--ig-font-mono);
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #6B6B6B;
}
.ig-quote-request__totals dd { margin: 0; text-align: right; font-weight: 700; font-size: 13px; }
.ig-quote-request__grand {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	background: #E8FF00;
	border: 3px solid #0a0a0a;
	padding: 12px 14px;
	margin: 14px 0 0 0;
}
.ig-quote-request__grand span {
	font-family: var(--ig-font-mono);
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.ig-quote-request__grand strong { font-size: 18px; font-weight: 900; }

.ig-quote-request__consent {
	margin: 16px 0 0 0;
	padding: 12px 0 0 0;
	border-top: 1px solid #ececec;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ig-quote-request__consent-row {
	display: flex;
	gap: 8px;
	font-size: 12px;
	line-height: 1.5;
	cursor: pointer;
}
.ig-quote-request__consent-row input[type=checkbox] {
	flex-shrink: 0;
	margin-top: 2px;
}
.ig-quote-request__consent-row a { color: #0a0a0a; text-decoration: underline; }
.ig-quote-request__submit {
	display: block;
	width: 100%;
	margin: 14px 0 0 0;
	padding: 14px 18px;
	font-size: 15px;
	text-align: center;
}
.ig-quote-request__submit:disabled { opacity: .5; cursor: not-allowed; }
.ig-quote-request__hint {
	margin: 10px 0 0 0;
	font-family: var(--ig-font-mono);
	font-size: 10px;
	letter-spacing: .04em;
	color: #6B6B6B;
	line-height: 1.5;
}

.ig-notice--success {
	background: #E8FF00;
	border: 3px solid #0a0a0a;
	padding: 16px 20px;
	margin: 20px 0;
}
.ig-notice--success p { margin: 0; font-weight: 700; }

@media (max-width: 960px) {
	.ig-quote-request__layout { grid-template-columns: 1fr; }
	.ig-quote-request__aside { position: static; }
}
@media (max-width: 640px) {
	.ig-quote-request__step { padding: 18px 20px; }
	.ig-quote-request__summary { padding: 18px 20px; }
	.ig-quote-request__items li { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ===== Quote view (ügyfél nézet a tokenes linken) ===== */
.ig-quote-view { max-width: 920px; margin: 0 auto; padding-bottom: 80px; }
.ig-quote-view__head { text-align: left; }
.ig-quote-view__head h1 {
	font-family: var(--ig-font-mono);
	font-size: clamp(28px, 4vw, 44px);
	letter-spacing: -.005em;
	font-weight: 900;
	background: #0a0a0a;
	color: #E8FF00;
	display: inline-block;
	padding: 4px 14px;
}
.ig-quote-view__items {
	background: #fff;
	border: 3px solid #0a0a0a;
	margin-top: 24px;
	padding: 0;
	overflow-x: auto;
}
.ig-quote-view__items .ig-table { margin: 0; }
.ig-quote-view__items th,
.ig-quote-view__items td { padding: 12px 16px; border-bottom: 1px solid #ececec; }
.ig-quote-view__items thead th {
	background: #f6f6f4;
	font-family: var(--ig-font-mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-bottom: 3px solid #0a0a0a;
}
.ig-quote-view__items td small { color: #6B6B6B; font-family: var(--ig-font-mono); font-size: 11px; }
.ig-quote-view__totals {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 4px 24px;
	margin: 24px 0 0 0;
	max-width: 360px;
	margin-left: auto;
}
.ig-quote-view__totals dt {
	font-family: var(--ig-font-mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #6B6B6B;
}
.ig-quote-view__totals dd { margin: 0; text-align: right; font-weight: 700; }
.ig-quote-view__grand {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	background: #E8FF00;
	border: 3px solid #0a0a0a;
	padding: 18px 24px;
	margin: 16px 0 0 0;
}
.ig-quote-view__grand span {
	font-family: var(--ig-font-mono);
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.ig-quote-view__grand strong { font-size: clamp(22px, 3vw, 32px); font-weight: 900; }
.ig-quote-view__actions {
	display: flex;
	gap: 12px;
	margin-top: 32px;
	flex-wrap: wrap;
	justify-content: center;
}
.ig-quote-view__actions .ig-button { font-size: 15px; padding: 14px 28px; }
@media (max-width: 640px) {
	.ig-quote-view__totals { max-width: none; }
	.ig-quote-view__grand { flex-direction: column; align-items: flex-start; gap: 4px; }
	.ig-quote-view__actions .ig-button { width: 100%; text-align: center; }
}

/* ===== Raktár-breakdown a termékoldalon ===== */
.ig-product-page__warehouses {
	list-style: none;
	padding: 0;
	margin: 12px 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.ig-product-page__warehouse {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 10px;
	border: 2px solid #0a0a0a;
	background: #fff;
	font-family: var(--ig-font-mono);
	font-size: 12px;
	letter-spacing: .04em;
}
.ig-product-page__warehouse-label {
	text-transform: uppercase;
	font-weight: 700;
}
.ig-product-page__warehouse strong {
	font-size: 13px;
	font-weight: 900;
}
.ig-product-page__warehouse.is-role-main { border-left: 4px solid #207520; }
.ig-product-page__warehouse.is-role-separate_menu { border-left: 4px solid #E8FF00; background: #fffae0; }
.ig-product-page__warehouse.is-role-hidden { border-left: 4px solid #6B6B6B; opacity: .7; }
.ig-product-page__warehouse-stat { display: flex; align-items: center; gap: 8px; }
.ig-product-page__warehouse-badge { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border: 2px solid #0a0a0a; white-space: nowrap; line-height: 1.4; }
.ig-product-page__warehouse.is-wstate-in   { border-left: 4px solid #207520; }
.ig-product-page__warehouse.is-wstate-in   .ig-product-page__warehouse-badge { background: #d8f5d8; color: #0c4a0c; }
.ig-product-page__warehouse.is-wstate-low  { border-left: 4px solid #c97a00; }
.ig-product-page__warehouse.is-wstate-low  .ig-product-page__warehouse-badge { background: #ffe9c2; color: #6b3d00; }
.ig-product-page__warehouse.is-wstate-last { border-left: 4px solid #d24a16; }
.ig-product-page__warehouse.is-wstate-last .ig-product-page__warehouse-badge { background: #ffd8c2; color: #7a2c08; }
.ig-product-page__warehouse.is-wstate-out  { border-left: 4px solid #b3261e; opacity: .8; }
.ig-product-page__warehouse.is-wstate-out  .ig-product-page__warehouse-badge { background: #f3d2cf; color: #7a1810; }
.ig-product-page__warehouse.is-wstate-out  .ig-product-page__warehouse-label { text-decoration: line-through; }

/* ===== EU VIES adószám-ellenőrzés ===== */
/* Az input és az Ellenőrzés gomb EGY sorban marad. A `min-width: 0` nélkül a
   flex item nem mehet a saját min-content mérete alá — az input alapértelmezett
   `size` attribútuma miatt ez ~20 karakternyi, ezért fél széles oszlopban a gomb
   új sorba tört. Így viszont az input rugalmasan összehúzódik. */
.ig-vat-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.ig-vat-row input { flex: 1 1 auto; min-width: 0; }
.ig-vat-row__btn { white-space: nowrap; padding: 0 12px; font-size: 11px; letter-spacing: .04em; flex: 0 0 auto; }
/* Telefonon a gomb ~100px-et venne el a mezőtől, és a 13 karakteres magyar
   adószám levágódna. Itt inkább külön sorba kerül, teljes szélességben —
   szélesebb sávban viszont marad egy sorban a mező mellett. */
@media (max-width: 430px) {
	.ig-vat-row input { flex: 1 1 100%; }
	.ig-vat-row__btn { flex: 1 1 100%; min-height: 44px; justify-content: center; }
}
.ig-vat-row__msg { margin: 6px 0 0 0; padding: 8px 10px; border: 2px solid #0a0a0a; font-size: 12px; }
.ig-vat-row__msg.is-ok { background: #E8FF00; }
.ig-vat-row__msg.is-warn { background: #fffae0; }
.ig-vat-row__msg.is-err { background: #fee; color: #a33; border-color: #c00; }
.ig-vat-row__msg.is-loading { background: #f6f6f4; font-family: var(--ig-font-mono); letter-spacing: .08em; text-transform: uppercase; }

/* ===================================================================
   View Transitions API — natív, sima oldalváltás (MPA / cross-document)
   Chromium 126+; más böngészőben simán nincs animáció (graceful).
   =================================================================== */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }

	/* A fejléc és a lábléc a helyén marad (nem úszik), csak a tartalom vált. */
	.ig-site-header { view-transition-name: ig-header; }
	.ig-site-footer { view-transition-name: ig-footer; }
	::view-transition-group(ig-header),
	::view-transition-group(ig-footer) { animation-duration: 0.001s; }

	/* Tartalom: gyors keresztúsztatás + finom elmozdulás (brutalista = pörgős). */
	::view-transition-old(root) { animation: ig-vt-out 0.18s ease both; }
	::view-transition-new(root) { animation: ig-vt-in  0.24s cubic-bezier(.2,.7,.3,1) both; }
	@keyframes ig-vt-out { to   { opacity: 0; transform: translateY(-6px) scale(0.997); } }
	@keyframes ig-vt-in  { from { opacity: 0; transform: translateY(10px) scale(0.997); } }
}

/* ===================================================================
   Mikrointerakciók + navigációs progress-bar + skeleton (Feature 2)
   =================================================================== */
.ig-navprog { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--ig-accent, #E8FF00); z-index: 100000; pointer-events: none; opacity: 0; box-shadow: 0 0 8px rgba(232,255,0,.7); transition: width .25s ease, opacity .3s ease; }
.ig-navprog.is-active { opacity: 1; }

/* Fókusz-gyűrű (a11y) — mindig, reduced-motiontól függetlenül */
.ig-button:focus-visible, .ig-qty__input:focus-visible, .ig-qty__btn:focus-visible,
.ig-product-card__media:focus-visible { outline: 3px solid var(--ig-accent, #E8FF00); outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
	/* Termékkártya: emelkedés + finom képnagyítás hoverre */
	.ig-product-card { transition: transform .18s ease, box-shadow .18s ease; }
	.ig-product-card:hover { transform: translateY(-3px); box-shadow: 6px 8px 0 rgba(10,10,10,.14); }
	.ig-product-card__media { overflow: hidden; }
	.ig-product-card__media img { transition: transform .4s cubic-bezier(.2,.7,.3,1); will-change: transform; }
	.ig-product-card:hover .ig-product-card__media img { transform: scale(1.05); }

	/* Gombok / qty: aktív lenyomás-érzet */
	.ig-button, .ig-qty__btn { transition: transform .08s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease; }
	.ig-button:active, .ig-qty__btn:active { transform: translateY(1px) scale(.985); }

	/* Kosárba siker-pulzus (JS adja az .is-added osztályt) */
	@keyframes ig-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
	.ig-button.is-added { animation: ig-pulse .42s ease; }

	/* Tartalom belépő-fade (egyszeri, oldalbetöltéskor) */
	@keyframes ig-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
	@keyframes ig-fade-in { from { opacity: 0; } to { opacity: 1; } }
	.ig-site-main > .ig-container:not(.ig-shop):not(.ig-checkout):not(.ig-product-page),
	.ig-site-main > section { animation: ig-fade-up .4s ease both; }

	/* FONTOS: a shop és a checkout konténer `position: fixed` FAB-ot tartalmaz
	   (szűrés-gomb / kosár-dock). Egy transzformált ŐS containing block-ot hoz
	   létre, ami eltöri a fixed pozíciót (a FAB a lista aljára ragad lebegés
	   helyett). Ezért ezek CSAK opacity-vel fade-elnek — transform nélkül. */
	/* A TERMÉKLAP is ide tartozik: lightboxot (position: fixed) és videó-
	   kiemelést (z-index a teljes oldalas sötétítés fölé) tartalmaz. A
	   transzformált ős mindkettőt eltörte — a kép a képernyőn kívülre került,
	   a videóra pedig ráült a sötétítés. */
	.ig-site-main > .ig-shop,
	.ig-site-main > .ig-product-page,
	.ig-site-main > .ig-checkout { animation: ig-fade-in .4s ease both; }
}

/* Skeleton-betöltő (shimmer) — AJAX-listákhoz / lassú betöltéshez */
.ig-skel { position: relative; overflow: hidden; background: #e7e4dd; border: 2px solid #0a0a0a; }
.ig-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: ig-shimmer 1.2s infinite; }
.ig-skel-card { height: 320px; }
.ig-skel-line { height: 12px; margin: 8px 0; }
@keyframes ig-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .ig-skel::after { animation: none; } }

/* ===================================================================
   Compare 2.0 — győztes-kiemelés + összesített befutó-korona (Feature 3)
   =================================================================== */
.ig-compare-board__cell--card { position: relative; }
.ig-compare-board__cell.is-winner { background: var(--ig-accent, #E8FF00); color: #0a0a0a; font-weight: 800; }
.ig-compare-board__best { display: inline-block; margin-left: 3px; line-height: 1; }
.ig-compare-board__cell--card.is-overall-winner { outline: 3px solid var(--ig-accent, #E8FF00); outline-offset: -3px; }
.ig-compare-board__crown { position: absolute; top: 6px; left: 6px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; background: var(--ig-accent, #E8FF00); color: #0a0a0a; font-family: var(--ig-font-mono); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border: 2px solid #0a0a0a; }

/* ===================================================================
   PWA telepítés gomb (Feature 4)
   =================================================================== */
.ig-pwa-install { position: fixed; left: 12px; bottom: 12px; z-index: 99990; background: var(--ig-accent, #E8FF00); color: #0a0a0a; border: 2px solid #0a0a0a; font-family: var(--ig-font-mono); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: 12px; padding: 8px 14px; box-shadow: 4px 4px 0 #0a0a0a; cursor: pointer; }
.ig-pwa-install:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 #0a0a0a; }
@media (max-width: 640px) { .ig-pwa-install { left: 8px; bottom: 70px; font-size: 11px; padding: 7px 12px; } }

/* ===================================================================
   Push értesítések — fiók-oldali feliratkozó kapcsoló (Feature 4b)
   =================================================================== */
.ig-push { display: flex; flex-direction: column; gap: 10px; }
.ig-push__btn { align-self: flex-start; cursor: pointer; }
.ig-push__btn.is-on { background: var(--ig-accent, #E8FF00); color: #0a0a0a; border-color: #0a0a0a; }
.ig-push__btn:disabled { opacity: .55; cursor: not-allowed; }
.ig-push__note { margin: 0; font-family: var(--ig-font-mono); font-size: 12px; line-height: 1.5; color: var(--ig-muted, #6B6B6B); }

/* ==========================================================================
   RMA / garanciális visszáru űrlap (fiók → RMA fül)
   ========================================================================== */
.ig-rma-form { margin-top: 18px; display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.ig-rma-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ig-rma-field { display: flex; flex-direction: column; gap: 6px; }
.ig-rma-field label { font-family: var(--ig-font-mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ig-ink); }
.ig-rma-field input, .ig-rma-field textarea { font-family: var(--ig-font-mono); font-size: 14px; padding: 12px 14px; border: var(--ig-stroke-bold) solid var(--ig-line); background: var(--ig-paper); color: var(--ig-ink); width: 100%; box-sizing: border-box; }
.ig-rma-field textarea { resize: vertical; line-height: 1.5; }
.ig-rma-field input:focus, .ig-rma-field textarea:focus { outline: 3px solid var(--ig-accent); outline-offset: 2px; }
.ig-rma-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ig-rma-link { font-family: var(--ig-font-mono); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ig-ink); text-decoration: none; border-bottom: 2px solid var(--ig-accent); padding-bottom: 1px; }
.ig-rma-link:hover { background: var(--ig-accent); }
.ig-rma-msg { margin: 4px 0 0; font-family: var(--ig-font-mono); font-size: 13px; line-height: 1.5; padding: 12px 14px; border: var(--ig-stroke) solid var(--ig-line); }
.ig-rma-msg.is-ok { background: var(--ig-accent); color: var(--ig-accent-ink); border-color: var(--ig-line); font-weight: 700; }
.ig-rma-msg.is-err { background: #ffe5e5; color: #8a1f1f; border-color: #8a1f1f; }
@media (max-width: 560px) { .ig-rma-row { grid-template-columns: 1fr; } }

/* ===================================================================
   Elállás (fogyasztói elállási jog) — online felület
   =================================================================== */
.ig-wd { max-width: 720px; }
.ig-wd__lead { font-size: 15px; line-height: 1.6; margin: 0 0 18px; }
.ig-wd__form { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.ig-wd__field { display: flex; flex-direction: column; gap: 6px; }
.ig-wd__field label { font-family: var(--ig-font-mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ig-wd__field input, .ig-wd__field textarea { font-family: var(--ig-font-mono); font-size: 14px; padding: 12px 14px; border: 3px solid #0a0a0a; background: #fff; color: #0a0a0a; width: 100%; box-sizing: border-box; }
.ig-wd__field input:focus, .ig-wd__field textarea:focus { outline: 3px solid var(--ig-accent, #E8FF00); outline-offset: 2px; }
.ig-wd__items { width: 100%; border-collapse: collapse; border: 3px solid #0a0a0a; }
.ig-wd__items th, .ig-wd__items td { padding: 10px 12px; border-bottom: 2px solid #e5e5e5; text-align: left; vertical-align: middle; font-size: 14px; }
.ig-wd__items th { font-family: var(--ig-font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; background: #f6f6f4; }
.ig-wd__qty { width: 72px; padding: 6px 8px; border: 2px solid #0a0a0a; font-family: var(--ig-font-mono); }
.ig-wd__sku { font-family: var(--ig-font-mono); font-size: 11px; color: var(--ig-muted, #6B6B6B); }
.ig-wd__consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; }
.ig-wd__msg { padding: 12px 14px; border: 2px solid #0a0a0a; font-size: 14px; line-height: 1.5; margin: 0 0 14px; }
.ig-wd__msg.is-ok { background: #d7f5dd; border-color: #1a7f37; color: #145523; }
.ig-wd__msg.is-warn { background: #ffe8c2; border-color: #8a5a00; color: #6b4600; }
.ig-wd__msg.is-err { background: #ffe5e5; border-color: #8a1f1f; color: #7a1717; }
.ig-wd__done { border: 3px solid #0a0a0a; padding: 22px; background: #fafaf7; }
.ig-wd--status h1 { margin: 4px 0 12px; }


/* ── Kalkulátor: katalógusból hozzáadás (Áram- és fényterv fül) ───── */
.ig-calc-catalog { margin-bottom: 18px; }
.ig-calc-catalog__label { display: block; font-family: var(--ig-font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #6B6B6B; margin-bottom: 6px; }
.ig-calc-catalog__row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.ig-calc-catalog__select {
	flex: 1 1 260px; min-width: 0; max-width: 100%;
	border: 2px solid var(--ig-line); background: #fff; padding: 10px 12px;
	font-size: 15px; font-family: inherit; line-height: 1.3; border-radius: 0;
}
.ig-calc-catalog__select:focus { outline: 2px solid var(--ig-accent); outline-offset: -2px; }
.ig-calc-catalog__add { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 600px) {
	.ig-calc-catalog__row { flex-direction: column; }
	.ig-calc-catalog__select { flex: 1 1 auto; width: 100%; font-size: 16px; /* iOS: 16px alatt zoomol */ }
	.ig-calc-catalog__add { width: 100%; }
	/* Sok mutatószámnál is olvasható maradjon az eredmény-blokk */
	.ig-calc-power-result__head { grid-template-columns: 1fr 1fr; }
	.ig-calc-power-result__head .prnum { border-right: 2px solid var(--ig-line); border-bottom: 2px solid var(--ig-line); padding: 14px 8px; }
	.ig-calc-power-result__head .prnum:nth-child(2n) { border-right: 0; }
	.ig-calc-power-result__head .prnum span { font-size: 26px; }
	.ig-calc-power-result__head .prnum i { font-size: 10px; letter-spacing: .04em; }
}

/* ── Mobil finomhangolás: hosszú magyar szavak + kalkulátor fülek ──── */
@media (max-width: 600px) {
	/* A közös oldalfejléc h1 clamp-minimuma 48px volt, ami 375px-en kilógott
	   a hosszú magyar szavaknál (pl. „BIZTOSÍTÉKOT?" 367px egy 339px-es dobozban).
	   Kisebb minimum + tördelés biztonsági hálóként — minden oldalra hat. */
	.ig-page-head h1 {
		font-size: clamp(30px, 9vw, 44px);
		overflow-wrap: break-word;
		hyphens: auto;
	}
	.ig-page-head__lead { font-size: 15px; }

	/* A fülek eddig csak ikont mutattak mobilon — a feliratot visszahozzuk,
	   különben nem derül ki, melyik fül mit csinál. */
	.ig-calc-tab { flex-direction: column; gap: 4px; padding: 10px 6px; }
	.ig-calc-tab span { display: block; font-size: 10px; line-height: 1.15; letter-spacing: .02em; text-align: center; }
	.ig-calc-tab svg { width: 20px; height: 20px; }
}

/* Eredmény-rács: 3-nál több mutatószámnál (DMX/tömeg is megjelenik) a sorok
   és oszlopok elválasztása helyes legyen — ne legyen dupla vonal a szélen,
   és legyen elválasztás a második sor előtt. */
.ig-calc-power-result__head .prnum:nth-child(3n) { border-right: 0; }
.ig-calc-power-result__head .prnum:nth-child(n+4) { border-top: 2px solid var(--ig-line); }
@media (max-width: 600px) {
	.ig-calc-power-result__head .prnum:nth-child(3n) { border-right: 2px solid var(--ig-line); }
	.ig-calc-power-result__head .prnum:nth-child(2n) { border-right: 0; }
	.ig-calc-power-result__head .prnum:nth-child(n+3) { border-top: 0; }
	.ig-calc-power-result__head .prnum:nth-last-child(-n+2) { border-bottom: 0; }
}
.ig-calc-catalog__note { margin: 8px 0 0; padding: 8px 10px; border: 1px solid var(--ig-line); border-left-width: 4px; background: #FFFDF0; font-size: 12px; line-height: 1.4; }

/* ── Terméklap → szakmai eszköz belépési pont (mobil-first) ───────── */
.ig-pdp-tool {
	display: flex; align-items: center; gap: 10px;
	margin-top: 14px; padding: 12px 14px;
	border: 2px solid var(--ig-ink); background: var(--ig-accent);
	color: var(--ig-ink); text-decoration: none;
	min-height: 56px; /* kényelmes érintőfelület mobilon */
}
.ig-pdp-tool:hover, .ig-pdp-tool:focus-visible { background: var(--ig-ink); color: var(--ig-accent); }
.ig-pdp-tool__icon { flex: 0 0 auto; display: flex; }
.ig-pdp-tool__icon svg { width: 22px; height: 22px; }
.ig-pdp-tool__body { flex: 1 1 auto; min-width: 0; display: block; }
.ig-pdp-tool__label { display: block; font-size: 14px; line-height: 1.25; font-weight: 800; }
.ig-pdp-tool__hint { display: block; font-size: 11px; line-height: 1.35; opacity: .75; margin-top: 2px; }
.ig-pdp-tool__arrow { flex: 0 0 auto; font-weight: 800; font-size: 18px; }
@media (min-width: 700px) {
	.ig-pdp-tool__label { font-size: 15px; }
	.ig-pdp-tool__hint { font-size: 12px; }
}

/* ── Szakmai eszközök hub (/szakmai-eszkozok/) — mobil-first ──────── */
.ig-tools { padding-bottom: 72px; }
.ig-tools__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 14px; }
.ig-tools__card {
	display: flex; flex-direction: column; gap: 8px; height: 100%;
	padding: 18px; border: 2px solid var(--ig-ink); background: #fff;
	color: var(--ig-ink); text-decoration: none;
}
.ig-tools__card:hover, .ig-tools__card:focus-visible { background: var(--ig-accent); }
.ig-tools__icon { display: flex; }
.ig-tools__icon svg { width: 30px; height: 30px; }
.ig-tools__title { margin: 0; font-size: 19px; line-height: 1.15; letter-spacing: -.01em; }
.ig-tools__lead { margin: 0; font-size: 14px; line-height: 1.5; color: #333; }
.ig-tools__meta { font-family: var(--ig-font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #6B6B6B; }
.ig-tools__go { margin-top: auto; padding-top: 8px; font-weight: 800; font-size: 14px; }
@media (min-width: 640px) {
	.ig-tools__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.ig-tools__title { font-size: 20px; }
}
@media (min-width: 1000px) {
	.ig-tools__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Shop: műszaki (számszerű) szűrők — mobil-first ───────────────── */
.ig-shop__spec { margin-bottom: 12px; }
.ig-shop__spec:last-child { margin-bottom: 0; }
.ig-shop__spec-label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 5px; }
.ig-shop__spec-label small { font-weight: 400; color: #6B6B6B; }
.ig-shop__spec-row { display: flex; align-items: center; gap: 6px; }
.ig-shop__spec-input {
	flex: 1 1 0; min-width: 0; width: 100%;
	border: 2px solid var(--ig-ink); background: #fff;
	padding: 9px 8px; font-size: 16px; /* 16px: iOS ne zoomoljon a mezőre */
	text-align: center; -moz-appearance: textfield;
}
.ig-shop__spec-input::-webkit-outer-spin-button,
.ig-shop__spec-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ig-shop__spec-input:focus { outline: 2px solid var(--ig-accent); outline-offset: -2px; }
.ig-shop__spec-sep { flex: 0 0 auto; font-weight: 800; color: #6B6B6B; }
@media (min-width: 900px) {
	.ig-shop__spec-input { font-size: 14px; padding: 7px 6px; }
}

/* Q&A mézesbödön — valódi látogatónak láthatatlan, botnak kitölthető.
   Nem display:none, mert azt egyes botok felismerik. */
.ig-qa-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ── Terméklapi helyben-számoló panel (mobil-first) ───────────────── */
.ig-pdp-calc { margin-top: 14px; min-width: 0; }
.ig-product-page__buy, .ig-product-page__buybox { min-width: 0; }
.ig-pdp-calc .ig-pdp-tool { width: 100%; margin-top: 0; cursor: pointer; text-align: left; font: inherit; }
.ig-pdp-calc__panel {
	border: 2px solid var(--ig-ink); border-top: 0; background: #fff;
	/* Animált nyitás/zárás: a [hidden] attribútum nem animálható, ezért
	   osztállyal vezéreljük. Zárt állapotban a tartalom nem fókuszálható. */
	max-height: 0; opacity: 0; visibility: hidden;
	padding: 0 14px; overflow: hidden;
	transition: max-height .3s cubic-bezier(.4,0,.2,1), opacity .2s ease,
	            padding .3s cubic-bezier(.4,0,.2,1), visibility 0s linear .3s;
}
.ig-pdp-calc.is-open .ig-pdp-calc__panel {
	max-height: 520px; opacity: 1; visibility: visible;
	padding: 14px; transition-delay: 0s;
}
.ig-pdp-calc__caret { display: inline-block; transition: transform .3s cubic-bezier(.4,0,.2,1); }
.ig-pdp-calc.is-open .ig-pdp-calc__caret { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
	.ig-pdp-calc__panel, .ig-pdp-calc__caret { transition: none; }
}
.ig-pdp-calc__qty { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.ig-pdp-calc__qty-label { font-size: 13px; font-weight: 700; }
.ig-pdp-calc__stepper { display: flex; align-items: stretch; }
.ig-pdp-calc__stepper button {
	width: 46px; min-height: 46px; border: 2px solid var(--ig-ink); background: #fff;
	font-size: 20px; line-height: 1; cursor: pointer;
}
.ig-pdp-calc__stepper button:hover { background: var(--ig-accent); }
.ig-pdp-calc__stepper input {
	flex: 1 1 auto; min-width: 0; text-align: center; font-size: 16px; font-weight: 800;
	border: 2px solid var(--ig-ink); border-left: 0; border-right: 0; -moz-appearance: textfield;
}
.ig-pdp-calc__stepper input::-webkit-outer-spin-button,
.ig-pdp-calc__stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ig-pdp-calc__out { margin: 0; display: grid; gap: 0; }
.ig-pdp-calc__out > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; min-width: 0; padding: 8px 0; border-bottom: 1px solid #E5E5E5; }
.ig-pdp-calc__out > div:last-child { border-bottom: 0; }
.ig-pdp-calc__out dt { font-size: 13px; color: #444; margin: 0; }
.ig-pdp-calc__out dd { margin: 0; font-size: 16px; font-weight: 800; white-space: nowrap; }
.ig-pdp-calc__out .is-hero { background: var(--ig-accent); margin: 4px -14px; padding: 10px 14px; border-bottom: 0; }
.ig-pdp-calc__out .is-hero dd { font-size: 20px; }
.ig-pdp-calc__more { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--ig-ink); }

/* ── Megosztható terv-link (mobil-first) ──────────────────────────── */
.ig-wiz-share { margin: 18px 0 0; padding: 14px; border: 2px solid var(--ig-ink); background: #FFFDF0; }
.ig-wiz-share__row { display: flex; flex-direction: column; gap: 8px; }
.ig-wiz-share__input {
	width: 100%; min-width: 0; border: 2px solid var(--ig-ink); background: #fff;
	padding: 10px; font-family: var(--ig-font-mono); font-size: 12px; text-overflow: ellipsis;
}
.ig-wiz-share__btn { white-space: nowrap; min-height: 46px; }
.ig-wiz-share__hint { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: #444; }
@media (min-width: 700px) {
	.ig-wiz-share__row { flex-direction: row; align-items: stretch; }
	.ig-wiz-share__input { flex: 1 1 auto; font-size: 13px; }
	.ig-wiz-share__btn { flex: 0 0 auto; }
}

/* ── Kapcsolat: Google Maps / Waze navigációs gombok (mobil-first) ── */
.ig-navbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ig-navbtn {
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 44px; padding: 8px 14px 8px 10px;   /* 44px: kényelmes érintőfelület */
	border: 2px solid var(--ig-ink); background: #fff; color: var(--ig-ink);
	text-decoration: none; font-weight: 700; font-size: 14px; line-height: 1;
	transition: background .15s ease, transform .15s ease;
}
.ig-navbtn:hover, .ig-navbtn:focus-visible { background: var(--ig-accent); }
.ig-navbtn:active { transform: translateY(1px); }
.ig-navbtn__logo { display: block; flex: 0 0 auto; width: auto; }
.ig-navbtn__logo--icon { height: 22px; }          /* Google Maps pin — mellette felirat */
.ig-navbtn__logo--wordmark { height: 17px; }      /* Waze szóvédjegy — önmagában áll */
.ig-navbtn__label { white-space: nowrap; }
@media (max-width: 380px) {
	.ig-navbtn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.ig-navbtn { transition: none; }
}

/* ── Videó a galériában (hero + lightbox) ─────────────────────────── */
/* A hero videó-kerete lefedi a képet; a nagyító ikon ilyenkor rejtve. */
.ig-product-page__hero-zoom.is-behind-video .ig-product-page__hero-icon { display: none; }
.ig-product-page__hero-zoom.is-behind-video { cursor: default; }

/* Lightbox videó — 16:9, a képpel azonos maximális méretkeretben. */
.ig-lightbox__video {
	width: min(92vw, 1180px);
	max-height: 78vh;
	aspect-ratio: 16 / 9;
	background: #000;
	border: 2px solid var(--ig-ink);
	box-shadow: 0 18px 60px rgba(0, 0, 0, .18);
	animation: igLbIn 260ms ease both;
}
.ig-lightbox__video[hidden] { display: none; }
.ig-lightbox__video iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 640px) {
	.ig-lightbox__video { width: 94vw; }
}
/* =====================================================================
   Drop-shipping — szétosztás több címzettre
   Pénztár blokk (.ig-ds*) + fiók/rendelés küldeménylista (.ig-ship*).
   Mobile-first: alapból egyoszlopos kártyák, 640px fölött bomlik szét.
   ===================================================================== */

.ig-ds {
	border: 2px solid var(--ig-line);
	border-top: 0;
	background: var(--ig-paper);
	padding: 16px 14px 18px;
}

.ig-ds[hidden] { display: none; }

.ig-ds__lead {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.5;
	color: #333;
}

/* ── Kiosztatlan darabszámok ─────────────────────────────────────── */
.ig-ds__pool {
	border: 2px solid var(--ig-line);
	background: var(--ig-bone);
	margin-bottom: 14px;
}

.ig-ds__pool-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 12px;
	border-bottom: 1px solid rgba(10, 10, 10, .12);
}

.ig-ds__pool-row:last-child { border-bottom: 0; }

.ig-ds__pool-name {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	min-width: 0;
	overflow-wrap: anywhere;
}

.ig-ds__pool-count {
	flex: 0 0 auto;
	font-family: var(--ig-font-mono);
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ig-ds__pool-count b { font-size: 15px; }

/* Minden kiosztva → sárga pipa-hangulat; túlosztva → piros figyelmeztetés. */
.ig-ds__pool-row.is-done { background: var(--ig-accent); }
.ig-ds__pool-row.is-over { background: #ffe5e5; color: #8a1f1f; }

/* ── Címzett-kártyák ─────────────────────────────────────────────── */
.ig-ds__list { display: grid; gap: 14px; }

.ig-ds-card {
	border: 2px solid var(--ig-line);
	background: var(--ig-paper);
}

.ig-ds-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: var(--ig-ink);
	color: var(--ig-paper);
	padding: 8px 12px;
}

.ig-ds-card__num {
	font-family: var(--ig-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.ig-ds-card__remove {
	background: transparent;
	border: 1px solid var(--ig-paper);
	color: var(--ig-paper);
	cursor: pointer;
	font-family: var(--ig-font-mono);
	font-size: 10px;
	letter-spacing: .1em;
	padding: 4px 9px;
	text-transform: uppercase;
	min-height: 30px;
}

.ig-ds-card__remove:hover { background: var(--ig-accent); border-color: var(--ig-accent); color: var(--ig-ink); }

.ig-ds-card__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	padding: 14px 12px;
}

.ig-ds-card__f { display: grid; gap: 5px; min-width: 0; }

.ig-ds-card__f > span {
	font-family: var(--ig-font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ig-ink);
}

.ig-ds-card__f input,
.ig-ds-card__f select {
	background: var(--ig-bone);
	border: 2px solid var(--ig-line);
	border-radius: 0;
	font-family: var(--ig-font-mono);
	/* 16px — kisebbnél az iOS Safari ráközelít a mezőre fókuszkor. */
	font-size: 16px;
	min-height: 44px;
	padding: 0 10px;
	width: 100%;
	max-width: 100%;
}

/* ── Címke-feltöltés ─────────────────────────────────────────────── */
.ig-ds-card__label {
	border-top: 2px solid var(--ig-line);
	padding: 12px;
}

.ig-ds-card__label-title {
	display: block;
	margin-bottom: 7px;
	font-family: var(--ig-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* A natív file input láthatatlan, de a gomb TELJES felületét lefedi — így a
   koppintás közvetlenül rajta landol (nincs label-proxy, nincs iOS-bug). */
.ig-ds-up {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.ig-ds-up__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
}

.ig-ds-up__btn {
	background: var(--ig-ink);
	color: var(--ig-paper);
	font-family: var(--ig-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 0 14px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.ig-ds-up__state {
	font-family: var(--ig-font-mono);
	font-size: 11px;
	line-height: 1.4;
	color: #666;
	min-width: 0;
	overflow-wrap: anywhere;
}

.ig-ds-up__state.is-busy { color: var(--ig-ink); }
.ig-ds-up__state.is-ok   { color: #1a7f37; font-weight: 700; }
.ig-ds-up__state.is-err  { color: #8a1f1f; font-weight: 700; }

.ig-ds-up__view {
	display: inline-block;
	margin-top: 8px;
	font-family: var(--ig-font-mono);
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	/* A feltöltő-input a rétegben fölötte van; emeljük ki, hogy kattintható legyen. */
	position: relative;
	z-index: 3;
}

.ig-ds-up__view[hidden] { display: none; }

/* ── Darabszám-kiosztás a kártyán belül ──────────────────────────── */
.ig-ds-card__items {
	border-top: 2px solid var(--ig-line);
	padding: 12px;
	background: var(--ig-bone);
}

.ig-ds-card__items-title {
	margin: 0 0 8px;
	font-family: var(--ig-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #555;
}

.ig-ds-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 7px 0;
	border-bottom: 1px solid rgba(10, 10, 10, .1);
}

.ig-ds-item:last-child { border-bottom: 0; }

.ig-ds-item__name {
	font-size: 13px;
	line-height: 1.3;
	min-width: 0;
	overflow-wrap: anywhere;
}

.ig-ds-item__stepper {
	display: flex;
	align-items: stretch;
	flex: 0 0 auto;
	border: 2px solid var(--ig-line);
	background: var(--ig-paper);
}

.ig-ds-item__btn {
	background: transparent;
	border: 0;
	cursor: pointer;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	/* 40px — hüvelykujjal is eltalálható. */
	min-width: 40px;
	min-height: 40px;
	padding: 0;
}

.ig-ds-item__btn:hover { background: var(--ig-accent); }

.ig-ds-item__qty {
	border: 0;
	border-left: 2px solid var(--ig-line);
	border-right: 2px solid var(--ig-line);
	font-family: var(--ig-font-mono);
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	width: 56px;
	min-height: 40px;
	padding: 0 4px;
	background: var(--ig-paper);
	-moz-appearance: textfield;
}

.ig-ds-item__qty::-webkit-outer-spin-button,
.ig-ds-item__qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Panel-lábléc ────────────────────────────────────────────────── */
.ig-ds__add { margin-top: 14px; width: 100%; }

.ig-ds__own,
.ig-ds__err {
	margin: 12px 0 0;
	padding: 9px 11px;
	border: 2px solid var(--ig-line);
	font-size: 12px;
	line-height: 1.45;
}

.ig-ds__own { background: var(--ig-accent); }
.ig-ds__err { background: #ffe5e5; border-color: #8a1f1f; color: #7a1717; }
.ig-ds__own[hidden], .ig-ds__err[hidden] { display: none; }

@media (min-width: 640px) {
	.ig-ds { padding: 20px 18px 22px; }
	.ig-ds-card__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ig-ds-card__f--wide { grid-column: 1 / -1; }
	.ig-ds__add { width: auto; }
}

/* =====================================================================
   Fiók → rendelés részletei: küldemények
   ===================================================================== */

.ig-ships { margin: 22px 0 4px; }

.ig-ships__head h3 {
	margin: 0 0 4px;
	font-size: 17px;
	letter-spacing: -.01em;
}

.ig-ships__lead {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.5;
	color: #555;
}

.ig-ships__list { display: grid; gap: 12px; }

.ig-ship {
	border: 2px solid var(--ig-line);
	background: var(--ig-paper);
	padding: 14px;
}

.ig-ship.is-own { background: var(--ig-bone); }

.ig-ship__head {
	display: flex;
	align-items: baseline;
	gap: 9px;
	margin-bottom: 8px;
}

.ig-ship__seq {
	background: var(--ig-ink);
	color: var(--ig-paper);
	font-family: var(--ig-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	padding: 3px 8px;
	flex: 0 0 auto;
}

.ig-ship__who {
	font-size: 15px;
	font-weight: 800;
	line-height: 1.25;
	min-width: 0;
	overflow-wrap: anywhere;
}

.ig-ship__addr {
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.5;
	color: #333;
}

.ig-ship__items {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	border-top: 1px solid rgba(10, 10, 10, .12);
}

.ig-ship__items li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 1px solid rgba(10, 10, 10, .12);
	font-size: 13px;
}

.ig-ship__items li span { min-width: 0; overflow-wrap: anywhere; }
.ig-ship__items li b { flex: 0 0 auto; font-family: var(--ig-font-mono); font-size: 12px; }

.ig-ship__track {
	margin: 0 0 10px;
	font-family: var(--ig-font-mono);
	font-size: 12px;
	letter-spacing: .04em;
}

.ig-ship__track--pending { color: #777; }

.ig-ship__label {
	margin: 0 0 10px;
	padding: 7px 10px;
	border: 2px solid var(--ig-line);
	font-size: 12px;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.ig-ship__label.is-ok      { background: var(--ig-accent); }
.ig-ship__label.is-missing { background: #ffe5e5; border-color: #8a1f1f; color: #7a1717; }

.ig-ship__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ig-ship__cta .ig-button {
	flex: 1 1 auto;
	justify-content: center;
	text-align: center;
	font-size: 12px;
	min-height: 44px;
}

.ig-ship__msg {
	margin: 10px 0 0;
	padding: 8px 10px;
	border: 2px solid var(--ig-line);
	font-size: 12px;
	line-height: 1.45;
}

.ig-ship__msg[hidden] { display: none; }
.ig-ship__msg.is-ok  { background: var(--ig-accent); }
.ig-ship__msg.is-err { background: #ffe5e5; border-color: #8a1f1f; color: #7a1717; }

@media (min-width: 640px) {
	.ig-ships__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ig-ship__cta .ig-button { flex: 0 1 auto; }
}

/* ── Csomag-állapot jelvény + kötegelt nyomtatás + címkecsere ───── */
.ig-ships__batch { margin: 0 0 14px; }
.ig-ships__batch .ig-button { width: 100%; justify-content: center; }

.ig-ship__state {
	flex: 0 0 auto;
	margin-left: auto;
	font-family: var(--ig-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 3px 8px;
	border: 2px solid var(--ig-line);
	white-space: nowrap;
}

.ig-ship__state.is-st-pending   { background: var(--ig-paper); color: #555; }
.ig-ship__state.is-st-packed    { background: var(--ig-bone); }
.ig-ship__state.is-st-handed    { background: var(--ig-accent); }
.ig-ship__state.is-st-delivered { background: var(--ig-ink); color: var(--ig-paper); }

/* A csere-gomb natív file inputot rejt maga alá — ugyanaz a minta, mint a
   pénztár feltöltőjénél, így mobilon is közvetlenül a gombra esik a koppintás. */
.ig-ship__swap { position: relative; display: inline-flex; flex: 1 1 auto; }
.ig-ship__swap .ig-button { width: 100%; justify-content: center; }
.ig-ship__swap-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
}

@media (min-width: 640px) {
	.ig-ships__batch .ig-button { width: auto; }
	.ig-ship__swap { flex: 0 1 auto; }
}

/* Csomagsúly a szétosztó kártya fejlécében. */
.ig-ds-card__weight {
	margin-left: auto;
	font-family: var(--ig-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--ig-accent);
	white-space: nowrap;
}
.ig-ds-card__weight.is-partial { color: #ffd9d9; }

.ig-ship__items-weight { border-bottom: 0 !important; }
.ig-ship__items-weight span,
.ig-ship__items-weight b {
	font-family: var(--ig-font-mono);
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #555;
}
/* =====================================================================
   DMX patch tervező — /dmx-patch/
   Mobile-first: alapból egy oszlop, 900px fölött oldalsáv + eredmény.
   ===================================================================== */

.ig-patch { padding-bottom: 40px; }

.ig-patch__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
}

/* ── Oldalsáv panelek ────────────────────────────────────────────── */
.ig-patch__panel {
	border: var(--ig-stroke-bold) solid var(--ig-line);
	background: var(--ig-paper);
	padding: 16px 14px;
	margin-bottom: 14px;
}

.ig-patch__panel-title {
	margin: 0 0 12px;
	font-family: var(--ig-font-mono);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.ig-patch__field { display: grid; gap: 5px; margin-bottom: 10px; min-width: 0; }

.ig-patch__field > span {
	font-family: var(--ig-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ig-muted);
}

.ig-patch__field input,
.ig-patch__field select {
	background: var(--ig-bone);
	border: var(--ig-stroke) solid var(--ig-line);
	border-radius: 0;
	font-family: var(--ig-font-mono);
	/* 16px — kisebbnél az iOS ráközelít fókuszkor. */
	font-size: 16px;
	min-height: 44px;
	padding: 0 10px;
	width: 100%;
	max-width: 100%;
}

.ig-patch__row3 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	align-items: end;
}

.ig-patch__add { min-height: 44px; grid-column: 1 / -1; justify-content: center; }

.ig-patch__hint {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: #555;
}

/* ── Felvett sorok ───────────────────────────────────────────────── */
.ig-patch__lines { display: grid; gap: 8px; margin-bottom: 18px; }

.ig-patch__line {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto auto;
	align-items: center;
	gap: 10px;
	border: var(--ig-stroke) solid var(--ig-line);
	background: var(--ig-bone);
	padding: 9px 12px;
}

.ig-patch__line-name { font-weight: 700; font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.ig-patch__line-ch,
.ig-patch__line-qty {
	font-family: var(--ig-font-mono);
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.ig-patch__line-del {
	background: transparent;
	border: var(--ig-stroke) solid var(--ig-line);
	cursor: pointer;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	min-width: 32px;
	min-height: 32px;
	padding: 0;
}

.ig-patch__line-del:hover { background: var(--ig-accent); }

/* ── Összegzés ───────────────────────────────────────────────────── */
.ig-patch__summary {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border: var(--ig-stroke-bold) solid var(--ig-line);
	margin-bottom: 18px;
}

.ig-patch__stat {
	padding: 12px 14px;
	border-right: var(--ig-stroke) solid var(--ig-line);
	text-align: center;
}

.ig-patch__stat:last-child { border-right: 0; }

.ig-patch__stat span {
	display: block;
	font-family: var(--ig-font-mono);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ig-muted);
}

.ig-patch__stat strong { font-size: 24px; line-height: 1.1; }

/* ── Univerzum blokkok ───────────────────────────────────────────── */
.ig-patch__uni {
	border: var(--ig-stroke-bold) solid var(--ig-line);
	margin-bottom: 16px;
}

.ig-patch__uni-head {
	background: var(--ig-ink);
	color: var(--ig-paper);
	padding: 10px 14px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.ig-patch__uni-head h3 {
	margin: 0;
	font-family: var(--ig-font-mono);
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ig-patch__uni-meta {
	font-family: var(--ig-font-mono);
	font-size: 11px;
	color: var(--ig-accent);
}

/* Telítettség-sáv: egy pillantásra látszik, mennyi fér még bele. */
.ig-patch__bar {
	position: relative;
	height: 22px;
	background: var(--ig-bone);
	border-bottom: var(--ig-stroke) solid var(--ig-line);
}

.ig-patch__bar span {
	display: block;
	height: 100%;
	background: var(--ig-accent);
}

.ig-patch__bar em {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ig-font-mono);
	font-size: 11px;
	font-weight: 800;
	font-style: normal;
}

.ig-patch__table { width: 100%; border-collapse: collapse; font-family: var(--ig-font-mono); font-size: 13px; }
.ig-patch__table th {
	background: var(--ig-bone);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 8px 10px;
	text-align: left;
	border-bottom: var(--ig-stroke) solid var(--ig-line);
}
.ig-patch__table td { padding: 8px 10px; border-bottom: 1px solid rgba(10,10,10,.12); }
.ig-patch__table tr:last-child td { border-bottom: 0; }
.ig-patch__table th.ig-patch__c-num,
.ig-patch__table td.ig-patch__c-num { text-align: right; white-space: nowrap; }
.ig-patch__table td strong { font-size: 15px; }

.ig-patch__empty,
.ig-patch__warn {
	border: var(--ig-stroke) solid var(--ig-line);
	padding: 14px;
	font-size: 13px;
	line-height: 1.5;
}
.ig-patch__warn { background: #ffe5e5; border-color: #8a1f1f; color: #7a1717; margin-top: 12px; }

/* ── Nyomtatás ───────────────────────────────────────────────────── */
.ig-patch__print {
	border: var(--ig-stroke-bold) solid var(--ig-line);
	background: var(--ig-bone);
	padding: 16px 14px;
	display: grid;
	gap: 10px;
	margin-top: 18px;
}

.ig-patch__print[hidden] { display: none; }
.ig-patch__print .ig-button { min-height: 48px; justify-content: center; }

@media (min-width: 900px) {
	.ig-patch__layout { grid-template-columns: 340px minmax(0, 1fr); gap: 24px; align-items: start; }
	.ig-patch__row3 { grid-template-columns: 1fr 1fr 1fr; }
	.ig-patch__add { grid-column: auto; }
	.ig-patch__print { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}
/* =====================================================================
   „Ez a gép" — QR-kód céloldal (/G/xxxxxx)
   Telefonon nyílik meg a helyszínen, ezért nagy célfelületek és
   olvasható méretek.
   ===================================================================== */

.ig-gear { padding: 8px 0 48px; max-width: 720px; }

.ig-gear__head {
	border: var(--ig-stroke-bold) solid var(--ig-line);
	padding: 20px 18px;
	margin-bottom: 16px;
}

.ig-gear__head h1 {
	margin: 4px 0 14px;
	font-size: clamp(26px, 7vw, 38px);
	line-height: 1.05;
}

.ig-gear__serial {
	margin: 0 0 12px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
}

.ig-gear__serial span {
	font-family: var(--ig-font-mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ig-muted);
}

.ig-gear__serial code {
	font-family: var(--ig-font-mono);
	font-size: 15px;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.ig-gear__warranty {
	margin: 0;
	padding: 10px 12px;
	border: var(--ig-stroke) solid var(--ig-line);
	font-family: var(--ig-font-mono);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
}

.ig-gear__warranty.is-active   { background: var(--ig-accent); }
.ig-gear__warranty.is-expiring { background: #fff3cd; }
.ig-gear__warranty.is-expired  { background: #ffe5e5; border-color: #8a1f1f; color: #7a1717; }
.ig-gear__warranty.is-unknown  { background: var(--ig-bone); color: #555; }

/* ── Gombok ──────────────────────────────────────────────────────── */
.ig-gear__actions {
	display: grid;
	gap: 8px;
	margin-bottom: 22px;
}

.ig-gear__actions .ig-button {
	justify-content: center;
	min-height: 50px;
}

/* ── Alkatrészek ─────────────────────────────────────────────────── */
.ig-gear__parts h2 { margin: 0 0 4px; font-size: 19px; }

.ig-gear__parts-lead {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.5;
	color: #555;
}

.ig-gear__parts-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border: var(--ig-stroke-bold) solid var(--ig-line);
}

.ig-gear__part {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 4px 10px;
	padding: 12px 14px;
	border-bottom: var(--ig-stroke) solid var(--ig-line);
}

.ig-gear__part:last-child { border-bottom: 0; }

.ig-gear__part-name {
	grid-column: 1;
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.ig-gear__part-price {
	grid-column: 2;
	grid-row: 1;
	font-family: var(--ig-font-mono);
	font-weight: 700;
	white-space: nowrap;
	text-align: right;
}

.ig-gear__part-stock {
	grid-column: 1 / -1;
	font-family: var(--ig-font-mono);
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ig-gear__part-stock.is-stock-in   { color: #1a7f37; }
.ig-gear__part-stock.is-stock-low,
.ig-gear__part-stock.is-stock-last { color: #8a5a00; }
.ig-gear__part-stock.is-stock-oos  { color: #a33; }

.ig-gear__privacy {
	margin: 24px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--ig-muted);
}

.ig-gear--missing h1 { margin-top: 4px; }

@media (min-width: 640px) {
	.ig-gear__actions { grid-auto-flow: column; grid-auto-columns: max-content; }
}

/* Belsős adatblokk a QR-oldalon (csak munkatárs látja). */
.ig-gear__internal {
	border: var(--ig-stroke) solid var(--ig-line);
	background: var(--ig-bone);
	padding: 14px 16px;
	margin-bottom: 16px;
}

.ig-gear__internal h2 {
	margin: 0 0 10px;
	font-family: var(--ig-font-mono);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.ig-gear__dl { margin: 0; display: grid; gap: 8px; }
.ig-gear__dl > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.ig-gear__dl dt {
	font-family: var(--ig-font-mono);
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ig-muted);
}
.ig-gear__dl dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
/* =====================================================================
   White-label ajánlatkészítő — /ajanlat-keszito/
   Mobile-first: egy oszlop, 1000px fölött két hasáb.
   ===================================================================== */

.ig-dq { padding-bottom: 48px; }

.ig-dq__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
	align-items: start;
}

.ig-dq__col { display: grid; gap: 18px; align-content: start; min-width: 0; }

.ig-dq__box {
	border: var(--ig-stroke-bold) solid var(--ig-line);
	background: var(--ig-paper);
	padding: 18px 16px;
	min-width: 0;
}

.ig-dq__box h2 {
	margin: 0 0 4px;
	font-family: var(--ig-font-mono);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.ig-dq__hint {
	margin: 0 0 12px;
	font-size: 12px;
	line-height: 1.5;
	color: #555;
}

/* ── Mezők ───────────────────────────────────────────────────────── */
.ig-dq__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 12px;
}

.ig-dq__f { display: grid; gap: 5px; min-width: 0; }
.ig-dq__f--wide { grid-column: 1 / -1; }

.ig-dq__f > span {
	font-family: var(--ig-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ig-muted);
}

.ig-dq__f input,
.ig-dq__f textarea {
	background: var(--ig-bone);
	border: var(--ig-stroke) solid var(--ig-line);
	border-radius: 0;
	font-family: var(--ig-font-mono);
	/* 16px — kisebbnél az iOS ráközelít fókuszkor. */
	font-size: 16px;
	padding: 10px;
	width: 100%;
	max-width: 100%;
}

.ig-dq__f input { min-height: 44px; }
.ig-dq__f textarea { min-height: 76px; line-height: 1.5; }

/* ── Logó ────────────────────────────────────────────────────────── */
.ig-dq__logo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 4px;
}

.ig-dq__logo-box {
	flex: 1 1 160px;
	min-width: 0;
	border: var(--ig-stroke) dashed var(--ig-line);
	background: var(--ig-bone);
	padding: 10px 12px;
	font-family: var(--ig-font-mono);
	font-size: 11px;
	overflow-wrap: anywhere;
}

.ig-dq__logo-ok    { color: #1a7f37; font-weight: 700; }
.ig-dq__logo-empty { color: var(--ig-muted); }

.ig-dq__upload { position: relative; display: inline-flex; flex: 0 0 auto; }
.ig-dq__upload input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
}
.ig-dq__upload .ig-button { min-height: 44px; }

/* ── Keresés ─────────────────────────────────────────────────────── */
.ig-dq__search { position: relative; margin-bottom: 12px; }

.ig-dq__search input {
	background: var(--ig-bone);
	border: var(--ig-stroke) solid var(--ig-line);
	border-radius: 0;
	font-family: var(--ig-font-mono);
	font-size: 16px;
	min-height: 46px;
	padding: 0 12px;
	width: 100%;
}

.ig-dq__results {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 20;
	max-height: 300px;
	overflow-y: auto;
	background: var(--ig-paper);
	border: var(--ig-stroke-bold) solid var(--ig-line);
	border-top: 0;
}

.ig-dq__results[hidden] { display: none; }

.ig-dq__hit {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2px 10px;
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(10, 10, 10, .12);
	cursor: pointer;
	padding: 10px 12px;
	text-align: left;
}

.ig-dq__hit:hover { background: var(--ig-accent); }
.ig-dq__hit span { font-weight: 700; font-size: 13px; overflow-wrap: anywhere; }
.ig-dq__hit em   { grid-column: 1; font-family: var(--ig-font-mono); font-size: 10px; color: var(--ig-muted); font-style: normal; }
.ig-dq__hit b    { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--ig-font-mono); font-size: 13px; white-space: nowrap; }

/* ── Árrés ───────────────────────────────────────────────────────── */
.ig-dq__margin {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px;
	align-items: end;
	padding: 12px;
	border: var(--ig-stroke) solid var(--ig-line);
	background: var(--ig-bone);
	margin-bottom: 14px;
}

.ig-dq__margin .ig-button { min-height: 44px; }
.ig-dq__margin .ig-dq__hint { grid-column: 1 / -1; margin: 0; }

/* ── Tételsorok ──────────────────────────────────────────────────── */
.ig-dq__lines { display: grid; gap: 10px; }

.ig-dq-line {
	border: var(--ig-stroke) solid var(--ig-line);
	padding: 10px 12px;
}

.ig-dq-line__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}

.ig-dq-line__name { font-weight: 700; font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }

.ig-dq-line__del {
	flex: 0 0 auto;
	background: transparent;
	border: var(--ig-stroke) solid var(--ig-line);
	cursor: pointer;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	min-width: 30px;
	min-height: 30px;
	padding: 0;
}

.ig-dq-line__del:hover { background: var(--ig-accent); }

.ig-dq-line__grid {
	display: grid;
	grid-template-columns: 68px minmax(0, 1fr) minmax(0, 1fr);
	gap: 8px;
	align-items: end;
}

.ig-dq-line__grid label { display: grid; gap: 4px; min-width: 0; }
.ig-dq-line__grid span {
	font-family: var(--ig-font-mono);
	font-size: 9px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ig-muted);
}

.ig-dq-line__grid input {
	background: var(--ig-bone);
	border: var(--ig-stroke) solid var(--ig-line);
	border-radius: 0;
	font-family: var(--ig-font-mono);
	font-size: 15px;
	min-height: 40px;
	padding: 0 8px;
	width: 100%;
	text-align: right;
}

.ig-dq-line__grid input[readonly] { background: #eceae2; color: #666; }

.ig-dq-line__profit {
	grid-column: 1 / -1;
	font-family: var(--ig-font-mono);
	font-size: 11px;
	font-weight: 700;
	color: #1a7f37;
	text-align: right;
}

/* ── Összegzés ───────────────────────────────────────────────────── */
.ig-dq__sum {
	margin-top: 14px;
	border: var(--ig-stroke-bold) solid var(--ig-line);
}

.ig-dq__sum[hidden] { display: none; }

.ig-dq__sum > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 14px;
	border-bottom: 1px solid rgba(10, 10, 10, .12);
}

.ig-dq__sum > div:last-child { border-bottom: 0; }

.ig-dq__sum span {
	font-family: var(--ig-font-mono);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ig-muted);
}

.ig-dq__sum strong { font-family: var(--ig-font-mono); font-size: 17px; }

/* A haszon CSAK a viszonteladónak látszik — a vevő PDF-jére nem kerül rá. */
.ig-dq__sum .is-profit { background: var(--ig-accent); }
.ig-dq__sum .is-profit span { color: var(--ig-ink); }

/* ── Műveletek ───────────────────────────────────────────────────── */
.ig-dq__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 14px;
}

.ig-dq__actions .ig-button { min-height: 50px; }

.ig-dq__msg {
	font-family: var(--ig-font-mono);
	font-size: 12px;
	overflow-wrap: anywhere;
}

/* ── Korábbi ajánlatok ───────────────────────────────────────────── */
.ig-dq__list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }

.ig-dq__list li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 4px 10px;
	align-items: center;
	border: var(--ig-stroke) solid var(--ig-line);
	padding: 10px 12px;
}

.ig-dq__list-no {
	grid-column: 1;
	font-family: var(--ig-font-mono);
	font-size: 10px;
	letter-spacing: .08em;
	color: var(--ig-muted);
}

.ig-dq__list-title { grid-column: 1; font-weight: 700; font-size: 13px; overflow-wrap: anywhere; }
.ig-dq__list-sum   { grid-column: 1; font-family: var(--ig-font-mono); font-size: 12px; }
.ig-dq__list .ig-button { grid-column: 2; grid-row: 1 / span 3; align-self: center; }

@media (min-width: 1000px) {
	.ig-dq__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 22px; }
}
/* =====================================================================
   Kábel- és csatlakozó-kereső — /kabel-kereso/
   ===================================================================== */

.ig-conn { padding-bottom: 48px; max-width: 900px; }

.ig-conn__form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	align-items: end;
	border: var(--ig-stroke-bold) solid var(--ig-line);
	background: var(--ig-paper);
	padding: 16px 14px;
}

.ig-conn__f { display: grid; gap: 5px; min-width: 0; }

.ig-conn__f > span {
	font-family: var(--ig-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ig-muted);
}

.ig-conn__f select,
.ig-conn__f input {
	background: var(--ig-bone);
	border: var(--ig-stroke) solid var(--ig-line);
	border-radius: 0;
	font-family: var(--ig-font-mono);
	/* 16px — kisebbnél az iOS ráközelít fókuszkor. */
	font-size: 16px;
	min-height: 46px;
	padding: 0 10px;
	width: 100%;
	max-width: 100%;
}

.ig-conn__arrow {
	display: none;
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	padding-bottom: 12px;
}

.ig-conn__form .ig-button { min-height: 46px; justify-content: center; }

.ig-conn__coverage {
	margin: 12px 0 20px;
	font-family: var(--ig-font-mono);
	font-size: 11px;
	letter-spacing: .06em;
	color: var(--ig-muted);
	text-transform: uppercase;
}

.ig-conn__h2 { margin: 24px 0 10px; font-size: 18px; }

.ig-conn__none {
	border: var(--ig-stroke) solid var(--ig-line);
	background: var(--ig-bone);
	padding: 14px;
	font-size: 14px;
}

/* ── Találatok ───────────────────────────────────────────────────── */
.ig-conn__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.ig-conn__hit {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	border: var(--ig-stroke) solid var(--ig-line);
	background: var(--ig-paper);
	padding: 12px 14px;
}

.ig-conn__hit-main { display: grid; gap: 4px; min-width: 0; }

.ig-conn__hit-name { font-weight: 700; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }

.ig-conn__hit-ends {
	font-family: var(--ig-font-mono);
	font-size: 11px;
	line-height: 1.4;
	color: #444;
	overflow-wrap: anywhere;
}

.ig-conn__hit-meta {
	font-family: var(--ig-font-mono);
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.ig-conn__hit-meta .is-stock-in   { color: #1a7f37; }
.ig-conn__hit-meta .is-stock-low,
.ig-conn__hit-meta .is-stock-last { color: #8a5a00; }
.ig-conn__hit-meta .is-stock-oos  { color: #a33; }

.ig-conn__hit-buy {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}

.ig-conn__hit-price { font-family: var(--ig-font-mono); font-size: 17px; font-weight: 700; }
.ig-conn__hit-buy .ig-button { min-height: 44px; }

/* ── Kábelgyártás fallback ───────────────────────────────────────── */
.ig-conn__custom {
	margin-top: 24px;
	border: var(--ig-stroke-bold) solid var(--ig-line);
	background: var(--ig-accent);
	padding: 18px 16px;
}

.ig-conn__custom h2 { margin: 0 0 6px; font-size: 19px; }
.ig-conn__custom p  { margin: 0 0 12px; font-size: 14px; line-height: 1.5; }

@media (min-width: 720px) {
	.ig-conn__form { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 150px auto; }
	.ig-conn__arrow { display: block; }
	.ig-conn__hit { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
	.ig-conn__hit-buy { justify-content: flex-end; }
}
/* =====================================================================
   Kábelgyártás konfigurátor — /kabelgyartas/
   ===================================================================== */

.ig-cb { padding-bottom: 48px; max-width: 860px; }

.ig-cb__lines { display: grid; gap: 14px; }

.ig-cb-line {
	border: var(--ig-stroke-bold) solid var(--ig-line);
	background: var(--ig-paper);
}

.ig-cb-line__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: var(--ig-ink);
	color: var(--ig-paper);
	padding: 9px 12px;
}

.ig-cb-line__num {
	font-family: var(--ig-font-mono);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.ig-cb-line__del {
	background: transparent;
	border: 1px solid var(--ig-paper);
	color: var(--ig-paper);
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	min-width: 30px;
	min-height: 30px;
	padding: 0;
}

.ig-cb-line__del:hover { background: var(--ig-accent); border-color: var(--ig-accent); color: var(--ig-ink); }

.ig-cb-line__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	padding: 14px 12px;
}

.ig-cb-line__f { display: grid; gap: 5px; min-width: 0; }
.ig-cb-line__f--wide { grid-column: 1 / -1; }

.ig-cb-line__f > span {
	font-family: var(--ig-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ig-muted);
}

.ig-cb-line__f select,
.ig-cb-line__f input {
	background: var(--ig-bone);
	border: var(--ig-stroke) solid var(--ig-line);
	border-radius: 0;
	font-family: var(--ig-font-mono);
	/* 16px — kisebbnél az iOS ráközelít fókuszkor. */
	font-size: 16px;
	min-height: 46px;
	padding: 0 10px;
	width: 100%;
	max-width: 100%;
}

/* Az ártétel-bontás: a vevő lássa, miből áll az ár. */
.ig-cb-line__calc {
	display: grid;
	gap: 3px;
	border-top: var(--ig-stroke) solid var(--ig-line);
	background: var(--ig-bone);
	padding: 10px 12px;
	font-family: var(--ig-font-mono);
	font-size: 12px;
}

.ig-cb-line__calc span { color: #555; overflow-wrap: anywhere; }
.ig-cb-line__calc strong { font-size: 16px; margin-top: 3px; }

.ig-cb__add { margin-top: 14px; width: 100%; justify-content: center; min-height: 48px; }

.ig-cb__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-top: 18px;
	border: var(--ig-stroke-bold) solid var(--ig-line);
	background: var(--ig-accent);
	padding: 14px 16px;
}

.ig-cb__total:empty { display: none; }

.ig-cb__total span {
	font-family: var(--ig-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.ig-cb__total strong { font-family: var(--ig-font-mono); font-size: 24px; }

.ig-cb__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 14px;
}

.ig-cb__actions .ig-button { min-height: 50px; }

.ig-cb__msg { font-family: var(--ig-font-mono); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }

.ig-cb__feenote,
.ig-cb__empty {
	margin-top: 18px;
	border: var(--ig-stroke) solid var(--ig-line);
	background: var(--ig-bone);
	padding: 12px 14px;
	font-size: 13px;
	line-height: 1.55;
}

@media (min-width: 720px) {
	.ig-cb-line__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.ig-cb-line__f--wide { grid-column: 1 / -1; }
	.ig-cb__add { width: auto; }
}

/* ---------------------------------------------------------------------
   Kosárbeli jelölés — hogy az anyag ne tűnjön ömlesztettnek
   --------------------------------------------------------------------- */

.ig-cb-cart {
	border: var(--ig-stroke-bold) solid var(--ig-line);
	background: var(--ig-paper);
	margin: 0 0 22px;
}

.ig-cb-cart__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 10px 14px;
	background: var(--ig-ink);
	color: var(--ig-paper);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ig-cb-cart__lead {
	margin: 0;
	padding: 10px 14px;
	border-bottom: 1px solid var(--ig-line);
	font-size: 13px;
	color: var(--ig-muted);
}

.ig-cb-cart__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ig-cb-cart__item {
	padding: 12px 14px;
	border-bottom: 1px solid var(--ig-line);
}

.ig-cb-cart__item:last-child { border-bottom: 0; }

.ig-cb-cart__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
}

.ig-cb-cart__idx {
	font-family: monospace;
	font-size: 11px;
	font-weight: 700;
	color: var(--ig-muted);
}

.ig-cb-cart__spec { flex: 1 1 220px; font-size: 14px; }

.ig-cb-cart__qty {
	padding: 2px 8px;
	background: var(--ig-accent);
	color: var(--ig-ink);
	font-size: 12px;
	font-weight: 800;
	white-space: nowrap;
}

.ig-cb-cart__parts {
	list-style: none;
	margin: 8px 0 0;
	padding: 0 0 0 14px;
	border-left: 2px solid var(--ig-line);
	font-size: 12px;
	color: var(--ig-muted);
}

.ig-cb-cart__parts li { padding: 1px 0; }

.ig-cb-cart__rm { margin: 8px 0 0; }

.ig-cb-cart__rmbtn {
	border: 0;
	background: none;
	padding: 0;
	font-size: 12px;
	color: var(--ig-muted);
	text-decoration: underline;
	cursor: pointer;
}

.ig-cb-cart__rmbtn:hover { color: var(--ig-ink); }

/* Sor-jelölés a kosártáblában */
.ig-cb-tag {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	margin-top: 5px;
	padding: 2px 8px;
	border: 1px solid var(--ig-line);
	background: var(--ig-accent);
	color: var(--ig-ink);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.35;
}

.ig-cb-tag__ico { flex: none; }

@media (max-width: 560px) {
	.ig-cb-cart__qty { order: 3; }
}
/* =====================================================================
   Nevesített projekt-kosarak — kosároldal + fiók
   ===================================================================== */

/* --- Kosár: halk projekt-vezérlő az összeg mellett --- */

.ig-proj {
	margin: -4px 0 14px;
	font-size: 13px;
}

.ig-proj__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 0;
	color: var(--ig-muted);
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.ig-proj__toggle::-webkit-details-marker { display: none; }
.ig-proj__toggle:hover { color: var(--ig-ink); }

.ig-proj__toggle::after {
	content: "▾";
	font-size: 10px;
	opacity: 0.6;
}

.ig-proj[open] .ig-proj__toggle::after { content: "▴"; }

.ig-proj__count {
	min-width: 17px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--ig-line);
	color: var(--ig-paper);
	font-family: monospace;
	font-size: 10px;
	line-height: 17px;
	text-align: center;
}

.ig-proj__body {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	align-items: center;
	margin-top: 8px;
	padding: 10px 12px;
	border-left: 2px solid var(--ig-line);
	background: rgba(0, 0, 0, 0.02);
}

.ig-proj__save,
.ig-proj__load {
	display: flex;
	gap: 6px;
	margin: 0;
}

.ig-proj__save input[type="text"],
.ig-proj__load select {
	min-width: 0;
	max-width: 210px;
	padding: 6px 9px;
	border: 1px solid var(--ig-line);
	background: var(--ig-paper);
	font: inherit;
	font-size: 13px;
}

.ig-proj__btn {
	padding: 6px 12px;
	border: 1px solid var(--ig-line);
	background: var(--ig-paper);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
}

.ig-proj__btn:hover { background: var(--ig-ink); color: var(--ig-paper); }

.ig-proj__hint {
	flex: 1 1 100%;
	margin: 0;
	font-size: 11px;
	color: var(--ig-muted);
}

/* --- Kosár lábléc: balra a halk vezérlő, jobbra az összeg + Pénztár --- */

.ig-cart-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 24px;
	margin: 20px 0 8px;
}

.ig-cart-foot__aside { flex: 0 1 auto; }

.ig-cart-foot__pay {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-left: auto;
}

.ig-cart-foot__pay .ig-total {
	margin: 0;
	white-space: nowrap;
}

.ig-button--checkout {
	padding: 15px 30px;
	font-size: 16px;
	font-weight: 900;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.ig-actions--cart:empty { display: none; }

@media (max-width: 720px) {
	.ig-cart-foot { flex-direction: column; align-items: stretch; }
	.ig-cart-foot__pay {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		margin-left: 0;
	}
	.ig-cart-foot__pay .ig-total { text-align: right; }
	.ig-button--checkout { width: 100%; text-align: center; }
}

/* --- Fiók: projektek fül --- */

.ig-projects {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
}

.ig-projects__item {
	padding: 14px 0;
	border-bottom: 1px solid var(--ig-line);
}

.ig-projects__item:last-child { border-bottom: 0; }

.ig-projects__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

.ig-projects__name { font-size: 15px; }

.ig-projects__meta {
	flex: none;
	font-family: monospace;
	font-size: 11px;
	color: var(--ig-muted);
	white-space: nowrap;
}

.ig-projects__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}

.ig-projects__form { margin: 0; }

.ig-projects__rename { margin-top: 8px; }

.ig-projects__rename > summary {
	display: inline-block;
	font-size: 13px;
	color: var(--ig-muted);
	text-decoration: underline;
	cursor: pointer;
	list-style: none;
}

.ig-projects__rename > summary::-webkit-details-marker { display: none; }
.ig-projects__rename > summary:hover { color: var(--ig-ink); }

.ig-projects__renameform {
	display: flex;
	gap: 6px;
	align-items: center;
	max-width: 380px;
	margin-top: 8px;
}

.ig-projects__renameform input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	padding: 7px 10px;
	border: 1px solid var(--ig-line);
	background: var(--ig-paper);
	font: inherit;
	font-size: 13px;
}

.ig-projects__save {
	flex: none;
	padding: 7px 13px;
	border: 1px solid var(--ig-line);
	background: var(--ig-paper);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.ig-projects__save:hover { background: var(--ig-ink); color: var(--ig-paper); }

/* Egyetlen hangsúlyos gomb soronként — a többi szöveglink. */
.ig-projects__go {
	padding: 8px 14px;
	border: var(--ig-stroke-bold) solid var(--ig-line);
	background: var(--ig-accent);
	color: var(--ig-ink);
	font: inherit;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

.ig-projects__go:hover { background: var(--ig-ink); color: var(--ig-paper); }

.ig-projects__link {
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-size: 13px;
	color: var(--ig-muted);
	text-decoration: underline;
	white-space: nowrap;
	cursor: pointer;
}

.ig-projects__link:hover { color: var(--ig-ink); }
.ig-projects__link--danger:hover { color: #b3261e; }

@media (max-width: 560px) {
	.ig-projects__head { flex-wrap: wrap; }
	.ig-projects__form--rename { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------------
   Raktári átvétel — „ma X-ig átvehető”
   --------------------------------------------------------------------- */

.ig-pickup {
	border: var(--ig-stroke-bold) solid var(--ig-line);
	border-left: 6px solid #12a150;
	background: var(--ig-paper);
	padding: 12px 14px;
	margin: 0 0 22px;
}

.ig-pickup__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px;
	font-size: 14px;
}

.ig-pickup__dot,
.ig-pickup-badge__dot {
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #12a150;
}

.ig-pickup__addr {
	margin: 0 0 4px;
	font-size: 13px;
}

.ig-pickup__hint {
	margin: 0;
	font-size: 12px;
	color: var(--ig-muted);
}

.ig-pickup-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 3px 9px;
	border: 1px solid #12a150;
	font-size: 12px;
	font-weight: 700;
	color: #0d6b36;
}
:root { --ig-annbar-h: 0px; }

/* =====================================================================
   Bejelentések — sáv a navbar fölött + felugró ablak
   ===================================================================== */

.ig-ann-bar[hidden] { display: none; }

.ig-ann-bar {
	background: var(--ig-ink);
	color: var(--ig-paper);
	border-bottom: 2px solid var(--ig-accent);
}

.ig-ann-bar__inner {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: var(--ig-max, 1400px);
	margin: 0 auto;
	padding: 9px 20px;
}

.ig-ann-bar__text {
	flex: 1 1 auto;
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
}

.ig-ann-bar__text strong {
	background: var(--ig-accent);
	color: var(--ig-ink);
	padding: 1px 7px;
	margin-right: 8px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 11px;
}

.ig-ann-bar__text a { color: var(--ig-accent); }

.ig-ann-bar__cta {
	flex: none;
	padding: 6px 14px;
	background: var(--ig-accent);
	color: var(--ig-ink);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.ig-ann-bar__cta:hover { background: var(--ig-paper); }

.ig-ann-bar__x {
	flex: none;
	border: 0;
	background: none;
	color: var(--ig-paper);
	font-size: 22px;
	line-height: 1;
	padding: 0 2px;
	cursor: pointer;
	opacity: 0.65;
}

.ig-ann-bar__x:hover { opacity: 1; }

/* --- Felugró ablak (a közös .ig-modal alapra épül) --- */

.ig-ann-modal .ig-modal__panel { max-width: 460px; }

.ig-ann-modal__x {
	position: absolute;
	top: 8px;
	right: 10px;
	border: 0;
	background: none;
	font-size: 26px;
	line-height: 1;
	color: var(--ig-muted);
	cursor: pointer;
}

.ig-ann-modal__x:hover { color: var(--ig-ink); }

.ig-ann-modal__body {
	font-size: 14px;
	line-height: 1.55;
	margin: 0 0 22px;
}

.ig-ann-modal__body p { margin: 0 0 10px; }
.ig-ann-modal__body p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
	.ig-ann-bar__inner { flex-wrap: wrap; gap: 8px 10px; padding: 8px 14px; }
	.ig-ann-bar__text { flex: 1 1 100%; font-size: 12px; }
}

/* --- Ajánlott termék a bejelentésben --- */

.ig-ann-prod {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: inherit;
}

.ig-ann-prod__img {
	flex: none;
	display: block;
	overflow: hidden;
	background: var(--ig-paper);
}

.ig-ann-prod__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ig-ann-prod__body { min-width: 0; }

.ig-ann-prod__name {
	display: block;
	font-weight: 700;
	line-height: 1.3;
}

.ig-ann-prod__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 7px;
}

.ig-ann-prod__was { opacity: 0.55; }

.ig-ann-prod__badge {
	background: #d92d20;
	color: #fff;
	font-weight: 800;
	padding: 1px 6px;
	font-size: 11px;
	letter-spacing: 0.03em;
}

/* Modal-változat: nagyobb kártya a szöveg alatt */
.ig-ann-prod--modal {
	margin: 0 0 20px;
	padding: 12px;
	border: var(--ig-stroke-bold) solid var(--ig-line);
	background: var(--ig-paper);
}

.ig-ann-prod--modal .ig-ann-prod__img { width: 92px; height: 92px; }
.ig-ann-prod--modal .ig-ann-prod__name { font-size: 15px; margin-bottom: 5px; }
.ig-ann-prod--modal .ig-ann-prod__price strong { font-size: 19px; }
.ig-ann-prod--modal:hover { box-shadow: 5px 5px 0 var(--ig-accent); }

/* Sáv-változat: kompakt, egy sorba fér */
.ig-ann-prod--bar {
	flex: none;
	gap: 9px;
	padding: 3px 9px 3px 3px;
	background: rgba(255, 255, 255, 0.08);
}

.ig-ann-prod--bar .ig-ann-prod__img { width: 34px; height: 34px; }
.ig-ann-prod--bar .ig-ann-prod__name { font-size: 12px; }
.ig-ann-prod--bar .ig-ann-prod__price { font-size: 12px; gap: 6px; }
.ig-ann-prod--bar .ig-ann-prod__price strong { color: var(--ig-accent); }
.ig-ann-prod--bar:hover { background: rgba(255, 255, 255, 0.16); }

@media (max-width: 640px) {
	.ig-ann-prod--bar { order: 2; }
	.ig-ann-prod--modal .ig-ann-prod__img { width: 68px; height: 68px; }
}
/* =====================================================================
   Ádám — bolti AI asszisztens (bal alsó sarok)
   ===================================================================== */

.ig-asst {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 99980;
	font-size: 14px;
}

/* --- Nyitó gomb --- */

.ig-asst__fab {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 16px 6px 6px;
	border: var(--ig-stroke-bold) solid var(--ig-line);
	background: var(--ig-paper);
	box-shadow: 4px 4px 0 var(--ig-line);
	cursor: pointer;
	font-family: var(--ig-font-mono, ui-monospace, monospace);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ig-ink);
	transition: transform 140ms ease, box-shadow 140ms ease;
}

.ig-asst__fab:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ig-line); }


.ig-asst__fab img {
	display: block;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
}

/* --- Panel --- */

.ig-asst__panel {
	display: flex;
	flex-direction: column;
	margin-left: auto;
	width: min(380px, calc(100vw - 36px));
	height: min(560px, calc(100vh - 120px));
	border: var(--ig-stroke-bold) solid var(--ig-line);
	background: var(--ig-paper);
	box-shadow: 8px 8px 0 var(--ig-line);
}

.ig-asst__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: var(--ig-ink);
	color: var(--ig-paper);
}

.ig-asst__head img { border-radius: 50%; object-fit: cover; }
.ig-asst__head strong { display: block; font-size: 14px; line-height: 1.2; }
.ig-asst__head small { font-size: 11px; opacity: 0.7; }

.ig-asst__x {
	margin-left: auto;
	border: 0;
	background: none;
	color: var(--ig-paper);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.75;
}

.ig-asst__x:hover { opacity: 1; }

/* --- Beszélgetés --- */

.ig-asst__log {
	flex: 1 1 auto;
	overflow-y: auto;
	/*
	 * A panel végén ne az oldal görgetése folytatódjon: a chatben görgetve
	 * eddig a háttér is elmozdult. A `contain` a láncot vágja el.
	 */
	overscroll-behavior: contain;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: #fbfaf7;
}

.ig-asst__msg {
	max-width: 86%;
	padding: 8px 11px;
	line-height: 1.45;
	white-space: pre-wrap;
	word-break: break-word;
}

.ig-asst__msg--bot {
	align-self: flex-start;
	background: var(--ig-paper);
	border: 1px solid var(--ig-line);
}

.ig-asst__msg--me {
	align-self: flex-end;
	background: var(--ig-accent);
	color: var(--ig-ink);
	font-weight: 500;
}

/* --- Termékkártyák --- */

.ig-asst__cards { display: grid; gap: 6px; }

.ig-asst__card {
	display: flex;
	flex-direction: column;
	border: var(--ig-stroke-bold) solid var(--ig-line);
	background: var(--ig-paper);
	color: inherit;
	overflow: hidden;
	transition: box-shadow 140ms ease;
}

.ig-asst__card:hover { box-shadow: 4px 4px 0 var(--ig-line); }

.ig-asst__card-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	text-decoration: none;
	color: inherit;
	min-width: 0;
}

.ig-asst__card-img {
	flex: none;
	width: 52px;
	height: 52px;
	overflow: hidden;
	background: #f3f1ec;
}

.ig-asst__card-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ig-asst__card-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ig-asst__card-name { font-size: 13px; font-weight: 700; line-height: 1.25; }

.ig-asst__card-price {
	font-family: var(--ig-font-mono, monospace);
	font-size: 13px;
	font-weight: 800;
}

/* --- Kosárba gomb: teljes szélességű, ikonnal és felirattal --- */

.ig-asst__card-add {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 9px 10px;
	border: 0;
	border-top: var(--ig-stroke-bold) solid var(--ig-line);
	background: var(--ig-accent);
	color: var(--ig-ink);
	font-family: var(--ig-font-mono, monospace);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 120ms ease, color 120ms ease;
}

.ig-asst__card-add svg {
	width: 15px;
	height: 15px;
	flex: none;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.2;
	stroke-linecap: square;
}

.ig-asst__card-add:hover:not(:disabled) { background: var(--ig-ink); color: var(--ig-paper); }
.ig-asst__card-add:active:not(:disabled) { transform: translateY(1px); }

.ig-asst__card-add:disabled {
	background: #efece5;
	color: #8a857b;
	cursor: not-allowed;
}

/* Sikeres állapot — látszódjon, hogy megtörtént */
.ig-asst__card-add.is-done {
	background: #12a150;
	color: #fff;
	cursor: default;
}

.ig-asst__card-add.is-done svg { stroke: #fff; }
.ig-asst__card.is-added { box-shadow: 4px 4px 0 #12a150; }

@keyframes ig-asst-pop {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.06); }
	100% { transform: scale(1); }
}

.ig-asst__card-add.is-done { animation: ig-asst-pop 260ms ease; }

/* --- Kosár-ajánlat --- */

.ig-asst__cart { display: flex; }

.ig-asst__cartbtn {
	display: inline-block;
	width: 100%;
	padding: 9px 12px;
	border: var(--ig-stroke-bold) solid var(--ig-line);
	background: var(--ig-accent);
	color: var(--ig-ink);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.ig-asst__cartbtn:disabled { background: #eee; color: #888; cursor: not-allowed; }
.ig-asst__cartbtn--go { background: var(--ig-ink); color: var(--ig-paper); }

/* --- Beviteli sor --- */

.ig-asst__form {
	display: flex;
	gap: 0;
	border-top: 1px solid var(--ig-line);
	margin: 0;
}

/*
 * A beviteli mező 16px — és ez nem esztétikai döntés.
 *
 * iOS Safari ránagyít az oldalra, ha egy fókuszált mező betűmérete
 * kisebb 16px-nél. Ilyenkor a chat panel kicsúszik a képből, és a
 * látogatónak kézzel kell visszanagyítania. A 16px ezt megszünteti.
 */
.ig-asst__form input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	padding: 12px;
	font: inherit;
	font-size: 16px;
	line-height: 1.3;
	background: var(--ig-paper);
}

.ig-asst__form input:focus { outline: 2px solid var(--ig-accent); outline-offset: -2px; }

.ig-asst__form button {
	flex: none;
	width: 48px;
	border: 0;
	border-left: 1px solid var(--ig-line);
	background: var(--ig-ink);
	color: var(--ig-paper);
	font-size: 18px;
	cursor: pointer;
}

.ig-asst__form button:disabled { opacity: 0.5; cursor: wait; }

.ig-asst__note {
	margin: 0;
	padding: 7px 12px;
	border-top: 1px solid var(--ig-line);
	background: var(--ig-paper);
	font-size: 10px;
	line-height: 1.4;
	color: var(--ig-muted);
}

@media (max-width: 480px) {
	.ig-asst { right: 12px; bottom: 12px; }
	.ig-asst__panel { width: calc(100vw - 24px); height: min(70vh, 520px); }
	.ig-asst__fab-label { display: none; }
	.ig-asst__fab { padding: 5px; }
}

/*
 * A jobb alsó sarokban már ül az összehasonlítás-gomb és mobilon a kosár-sáv.
 * Ha az asszisztens aktív, ezeket feljebb toljuk, hogy ne fedjék egymást.
 * Az osztályt a body kapja meg, amikor a widget renderel.
 */
.ig-has-assistant .ig-compare-fab {
	bottom: 96px;
}

@media (max-width: 480px) {
	.ig-has-assistant .ig-cart-fab-dock,
	.ig-has-assistant .ig-shop-fab-dock {
		bottom: 84px;
	}
}

/* „Új beszélgetés" a fejlécben */
.ig-asst__new {
	margin-left: auto;
	border: 0;
	background: none;
	color: var(--ig-paper);
	font-size: 17px;
	line-height: 1;
	padding: 2px 4px;
	cursor: pointer;
	opacity: 0.65;
}

.ig-asst__new:hover { opacity: 1; }
.ig-asst__new + .ig-asst__x { margin-left: 4px; }


/* =====================================================================
   Nyitás / zárás — a panel a nyitógomb sarkából ugrik ki
   =====================================================================

   A gomb és a panel UGYANAHHOZ a jobb alsó sarokhoz van horgonyozva,
   ezért a konténer 0×0 marad. Enélkül a kilépő gomb helyet foglalna,
   és a panel záráskor megugrana. */

.ig-asst__fab,
.ig-asst__panel {
	position: absolute;
	right: 0;
	bottom: 0;
}

/*
 * A nyitógomb elpördül és beszívódik a sarokba.
 *
 * A max-content KELL: abszolút pozícionálva a 0 szélességű konténer miatt
 * a gomb min-content szélességet kapna, és levágná a feliratot.
 */
.ig-asst__fab {
	width: max-content;
	white-space: nowrap;
	transition:
		transform 200ms cubic-bezier(0.18, 0.9, 0.28, 1.3),
		box-shadow 140ms ease,
		opacity 130ms ease;
}

.ig-asst.is-open .ig-asst__fab {
	transform: scale(0.35) rotate(-16deg);
	opacity: 0;
	pointer-events: none;
}

/*
 * A panel a sarokból nő ki, enyhe túllendüléssel — a kemény árnyék
 * pedig csak a mozgás végén „csattan" a helyére, így a doboz úgy hat,
 * mintha a lapra érkezne.
 */
.ig-asst__panel {
	transform-origin: 100% 100%;
	transform: scale(0.5) translate(10px, 16px);
	opacity: 0;
	box-shadow: 0 0 0 var(--ig-line);
	transition:
		transform 280ms cubic-bezier(0.18, 0.9, 0.28, 1.32),
		opacity 120ms linear,
		box-shadow 180ms ease 110ms;
	will-change: transform, opacity;
}

.ig-asst.is-open .ig-asst__panel {
	transform: none;
	opacity: 1;
	box-shadow: 8px 8px 0 var(--ig-line);
}

/* A belső sávok lépcsőzetesen úsznak be, hogy legyen mélysége. */
.ig-asst__head,
.ig-asst__log,
.ig-asst__form {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 190ms ease, transform 190ms ease;
}

.ig-asst.is-open .ig-asst__head,
.ig-asst.is-open .ig-asst__log,
.ig-asst.is-open .ig-asst__form {
	opacity: 1;
	transform: none;
}

.ig-asst.is-open .ig-asst__head { transition-delay: 80ms; }
.ig-asst.is-open .ig-asst__log { transition-delay: 125ms; }
.ig-asst.is-open .ig-asst__form { transition-delay: 170ms; }

/*
 * Visszatöltéskor (oldalfrissítés után nyitva volt) nincs animáció:
 * a betöltéssel egyszerre lejátszott mozgás akadozna és véletlennek hatna.
 */
.ig-asst.is-instant .ig-asst__fab,
.ig-asst.is-instant .ig-asst__panel,
.ig-asst.is-instant .ig-asst__head,
.ig-asst.is-instant .ig-asst__log,
.ig-asst.is-instant .ig-asst__form {
	transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.ig-asst__fab,
	.ig-asst__panel,
	.ig-asst__head,
	.ig-asst__log,
	.ig-asst__form {
		transition-duration: 1ms !important;
		transition-delay: 0ms !important;
	}

	.ig-asst__panel { transform: none; }
}

/*
 * Teljes képernyős réteg alatt a lebegő gomb eltűnik. Az ig-no-scroll a téma
 * közös jelzése arra, hogy valami takarja az oldalt (mobil menü, modál,
 * lightbox) — enélkül Ádám ráúszott a mobil menü ország-választójára.
 */
.ig-asst {
	transition: opacity 150ms ease, transform 150ms ease;
}

html.ig-no-scroll .ig-asst {
	opacity: 0;
	transform: scale(0.8);
	pointer-events: none;
}

/* =====================================================================
   Fejlesztő névjegye — „ki csinálta ezt az oldalt?"
   =====================================================================

   Saját arculattal, nem a webshopéval: ez egy AJÁNLÓ egy másik cégről,
   és attól hiteles, ha ránézésre is látszik, hogy nem az Invgroup szól. */

.ig-maker {
	margin: 10px 0 4px;
	padding: 14px 14px 12px;
	border: 2px solid #1a1a1a;
	border-radius: 3px;
	background: #f2f0ee;
	color: #1a1a1a;
	box-shadow: 4px 4px 0 rgba(26, 26, 26, 0.18);
}

.ig-maker__top {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 6px;
}

.ig-maker__logo {
	font-family: var(--ig-font-mono, ui-monospace, monospace);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.ig-maker__city {
	margin-left: auto;
	font-family: var(--ig-font-mono, ui-monospace, monospace);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #e8452c;
}

.ig-maker__claim {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
}

/* Számok: a bizonyíték, nem a szöveg. */
.ig-maker__stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	padding: 10px 0;
	border-top: 1px solid rgba(26, 26, 26, 0.16);
	border-bottom: 1px solid rgba(26, 26, 26, 0.16);
}

.ig-maker__stats span { display: flex; flex-direction: column; gap: 1px; }
.ig-maker__stats strong { font-size: 15px; font-weight: 800; line-height: 1.1; }
.ig-maker__stats small { font-size: 8.5px; line-height: 1.25; color: #6a6560; }

.ig-maker__label {
	display: block;
	margin: 11px 0 6px;
	font-family: var(--ig-font-mono, ui-monospace, monospace);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8a847e;
}

/* Amit csinálnak — nem terméklista, hanem amiben segíteni tudnak. */
.ig-maker__does ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 10px;
}

.ig-maker__does li {
	position: relative;
	padding-left: 13px;
	font-size: 11.5px;
	line-height: 1.4;
	color: #4a4540;
}

.ig-maker__does li::before {
	content: "→";
	position: absolute;
	left: 0;
	color: #e8452c;
	font-weight: 700;
}

.ig-maker__foot {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 11px;
}

.ig-maker__cta {
	flex: 1 1 auto;
	padding: 9px 12px;
	background: #e8452c;
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	text-align: center;
	text-decoration: none;
	transition: background 120ms ease;
}

.ig-maker__cta:hover { background: #c8351e; }

.ig-maker__mail {
	font-family: var(--ig-font-mono, ui-monospace, monospace);
	font-size: 10.5px;
	color: #6a6560;
	text-decoration: none;
	border-bottom: 1px solid rgba(26, 26, 26, 0.3);
}

.ig-maker__mail:hover { color: #e8452c; border-color: #e8452c; }
/* =====================================================================
   Fényszimulátor — virtuális színpad + rack DMX pult a terméklapon
   ===================================================================== */

.ig-lightsim {
	padding: var(--ig-gutter-y) 0 0;
}

.ig-lightsim__lead {
	max-width: 46ch;
	color: var(--ig-muted);
	font-size: 15px;
	line-height: 1.5;
}

/* --- Színpad --- */

.ig-lightsim__stage {
	position: relative;
	margin-top: 28px;
	border: var(--ig-stroke-bold) solid var(--ig-line);
	background: #050508;
	box-shadow: 8px 8px 0 var(--ig-line);
	overflow: hidden;
}

.ig-lightsim__stage canvas {
	display: block;
	width: 100%;
	height: auto;
}

/* =====================================================================
   Bedugós indítás — két kábel a lámpa hátlapjába
   ===================================================================== */

.ig-plug {
	position: absolute;
	inset: 0;
	z-index: 4;
	transition: opacity 420ms ease, transform 420ms ease;
}

.ig-plug__svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Ha mindkét kábel bent van, a jelenet elúszik a fény elől. */
.ig-plug.is-done {
	opacity: 0;
	transform: scale(1.06);
	pointer-events: none;
}

/* --- Hátlap és aljzatok --- */

.ig-plug__silk {
	fill: #7d7d8c;
	font-family: var(--ig-font-mono);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
}

.ig-plug__led {
	fill: #24242c;
	stroke: #3d3d48;
	stroke-width: 1;
	transition: fill 200ms ease, filter 200ms ease;
}

.ig-plug__led.is-on {
	fill: #35e07a;
	filter: drop-shadow(0 0 6px rgba(53, 224, 122, 0.95));
}

/* A célzott aljzat felfénylik, amíg fölötte tartod a dugót. */
[data-socket] rect:first-of-type,
[data-socket] circle:first-of-type {
	transition: stroke 160ms ease;
}

[data-socket].is-target rect:first-of-type,
[data-socket].is-target circle:first-of-type {
	stroke: var(--ig-accent);
}

/* --- Kábelek --- */

/*
 * A kábel KÉT vonalból áll: egy vastag törzsből és egy vékony, világosabb
 * csíkból ugyanazon az íven. Ettől lesz hengeres, nem lapos szalag.
 *
 * A törzs szándékosan jóval világosabb a színpadnál: az első verzióban
 * majdnem fekete volt fekete háttéren, és egyszerűen eltűnt.
 */
.ig-plug__cable {
	fill: none;
	stroke-linecap: round;
	stroke: #34343f;
	stroke-width: 14;
	filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.8));
}

.ig-plug__cable--dmx { stroke: #2c2c37; stroke-width: 12; }

.ig-plug__shine {
	stroke: #55555f;
	stroke-width: 3.5;
	filter: none;
	opacity: 0.75;
	transform: translateY(-3px);
}

.ig-plug__shine--dmx { stroke-width: 3; transform: translateY(-2.5px); }

/* --- Csatlakozók --- */

.ig-plug__conn {
	cursor: grab;
	touch-action: none;
	filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.7));
	transition: filter 160ms ease;
}

.ig-plug__conn:focus-visible { outline: none; }

.ig-plug__conn:focus-visible .ig-plug__grab {
	stroke: var(--ig-accent);
	stroke-width: 2;
	stroke-dasharray: 4 3;
}

.ig-plug__conn.is-held { cursor: grabbing; }

.ig-plug__conn.is-close {
	filter: drop-shadow(0 0 10px rgba(232, 255, 0, 0.65)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.7));
}

.ig-plug__conn.is-seated {
	cursor: default;
	filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.8));
}

/* Láthatatlan, de nagy megfogási felület — ujjal is elérhető. */
.ig-plug__grab {
	fill: transparent;
	stroke: transparent;
}

/* --- Súgó --- */

/*
 * A súgó FELÜL van és nem fogad eseményt.
 *
 * Alul a DMX csatlakozó fölé esett, és mobilon elnyelte az érintést —
 * a kábelt egyszerűen nem lehetett megfogni. Egy díszítő felirat soha
 * ne állhasson a vezérlő és az ujj közé.
 */
.ig-plug__hint {
	position: absolute;
	left: 50%;
	top: 14px;
	transform: translateX(-50%);
	pointer-events: none;
	margin: 0;
	padding: 8px 16px;
	border: 2px dashed rgba(232, 255, 0, 0.5);
	background: rgba(10, 10, 10, 0.72);
	color: var(--ig-accent);
	font-family: var(--ig-font-mono);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	animation: ig-plug-hint 2.4s ease-in-out infinite;
}

@keyframes ig-plug-hint {
	0%, 100% { opacity: 0.75; }
	50% { opacity: 1; }
}

.ig-plug.has-ac.has-dmx .ig-plug__hint { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
	.ig-plug__hint { animation: none; }
	.ig-plug { transition: none; }
}

@media (max-width: 720px) {
	.ig-plug__hint { font-size: 9px; padding: 5px 9px; top: 8px; letter-spacing: 0.08em; }
}

.ig-lightsim__badge {
	position: absolute;
	left: 14px;
	top: 14px;
	margin: 0;
	padding: 5px 10px;
	background: rgba(232, 255, 0, 0.14);
	border: 1px solid rgba(232, 255, 0, 0.45);
	color: var(--ig-accent);
	font-family: var(--ig-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* =====================================================================
   A pult — 19" rack egység
   =====================================================================

   A valódi pulton a fém, a szitanyomás és a mélység adja a hitelességet,
   ezért itt minden felület réteges gradiens: a panel enyhén felülről
   világított, a mélyedések belső árnyékot kapnak, a kiálló részek pedig
   egy pixel világos peremet felül. */

.ig-desk {
	display: flex;
	align-items: stretch;
	margin-top: 22px;
	filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.55));
}

/* Rack fülek a csavarokkal. */
.ig-desk__ear {
	position: relative;
	flex: 0 0 34px;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	padding: 10px 0;
	border-radius: 3px 3px 3px 3px;
	background:
		linear-gradient(150deg, #4a4a52 0%, #2c2c33 22%, #202027 60%, #34343c 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.18),
		inset 0 -1px 0 rgba(0, 0, 0, 0.6);
}

.ig-desk__ear i {
	display: block;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 38% 32%, #6f6f79 0%, #3b3b44 42%, #14141a 74%, #2a2a32 100%);
	box-shadow:
		inset 0 1px 2px rgba(0, 0, 0, 0.9),
		0 1px 0 rgba(255, 255, 255, 0.12);
}

/* A csavarfej hornya. */
.ig-desk__ear i::after {
	content: "";
	display: block;
	width: 8px;
	height: 2px;
	margin: 5.5px auto 0;
	background: rgba(0, 0, 0, 0.75);
	transform: rotate(38deg);
}

.ig-desk__panel {
	flex: 1 1 auto;
	min-width: 0;
	padding: 8px 14px 7px;
	background:
		linear-gradient(178deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 14%),
		linear-gradient(180deg, #33333b 0%, #24242b 38%, #1c1c22 100%);
	border-top: 1px solid #4b4b55;
	border-bottom: 1px solid #0b0b0f;
	color: #cfcfd8;
}

/* --- Fejléc: logó, LCD, típusnév --- */

.ig-desk__top {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 8px;
}

.ig-desk__logo,
.ig-desk__model {
	font-family: var(--ig-font-mono);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.22em;
	color: #e9e9f2;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
	white-space: nowrap;
}

.ig-desk__model {
	margin-left: auto;
	letter-spacing: 0.14em;
	color: #9aa0ae;
}

.ig-desk__model em {
	font-style: normal;
	color: var(--ig-accent);
}

/* Kék háttérvilágítású LCD. */
.ig-desk__lcd {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 460px;
	padding: 4px;
	border-radius: 3px;
	background: linear-gradient(180deg, #101016, #05050a);
	box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ig-desk__lcd-glass {
	display: block;
	padding: 3px 9px;
	border-radius: 2px;
	background:
		repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
		linear-gradient(180deg, #1656c8 0%, #0b3f9e 100%);
	box-shadow: inset 0 0 22px rgba(120, 190, 255, 0.45);
}

.ig-desk__lcd-row {
	display: block;
	font-family: var(--ig-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.45;
	color: #dff0ff;
	text-shadow: 0 0 7px rgba(190, 225, 255, 0.9);
	white-space: pre;
	overflow: hidden;
	text-overflow: clip;
}

/* --- Törzs --- */

/*
 * A törzs EGY vízszintes sor. Korábban tördelt, és az oldalsó blokk a
 * faderek alá esett — a pult kétszer olyan magas lett, mint egy valódi
 * rack egység. Ha nem fér ki, inkább vízszintesen görgethető, mint magas.
 */
.ig-desk__body {
	display: flex;
	gap: 16px;
	align-items: flex-end;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 2px;
	scrollbar-width: thin;
}

/* Fader bank nyomtatott skálával. */

.ig-desk__bank {
	display: flex;
	gap: 4px;
	/*
	 * Nő, ha van hely, de a tartalma alá SOSEM zsugorodik — enélkül a
	 * faderek átcsúsztak a mellettük lévő blokkokra. Ha nem fér ki, a
	 * törzs vízszintesen görgethető.
	 */
	flex: 1 0 auto;
	padding: 7px 10px 6px;
	border-radius: 3px;
	background: linear-gradient(180deg, #1e1e25, #16161c);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.7);
}

.ig-desk__scale {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 104px;
	margin-top: 15px;
	padding-right: 2px;
	border-right: 1px solid #33333d;
	font-family: var(--ig-font-mono);
	font-size: 8px;
	font-weight: 700;
	color: #71717e;
}

.ig-desk__fader {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	flex: 1 1 0;
	min-width: 54px;
	max-width: 96px;
	overflow: hidden;
}

/* Működés-jelző LED a fader fölött. */
.ig-desk__led {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #2a2a33;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.8);
	transition: background 120ms ease, box-shadow 120ms ease;
}

.ig-desk__led.is-lit {
	background: #ff4a3d;
	box-shadow: 0 0 7px rgba(255, 74, 61, 0.9);
}

/*
 * A fader mélyedése. A résen belül fut a csúszka; a rés maga
 * besüllyesztett, ezért kap belső árnyékot és egy világos alsó peremet.
 */
.ig-desk__slot {
	position: relative;
	width: 100%;
	max-width: 40px;
	height: 104px;
	display: grid;
	place-items: center;
	border-radius: 3px;
	background: linear-gradient(180deg, #101015, #191920);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.85), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

/* A rés vonala a mélyedés közepén. */
.ig-desk__slot::before {
	content: "";
	position: absolute;
	top: 12px;
	bottom: 12px;
	width: 5px;
	border-radius: 3px;
	background: linear-gradient(90deg, #050508, #24242c 45%, #050508);
	box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.95);
}

/*
 * A fader egy ELFORGATOTT vízszintes csúszka, nem függőleges.
 *
 * A natív függőleges változat (writing-mode + direction: rtl) a húzót a
 * sáv mentén középre teszi, a SÁV viszont a bemenet inline-kezdetére kerül
 * — rtl-nél a jobb szélre —, így a húzó a mélyedésből kilógott. Vízszintes
 * csúszkánál a sáv teljes szélességű, a húzó rajta ül, és az egészet
 * a közepe körül forgatjuk: így a középre állás geometriai, nem böngésző
 * kegyeitől függ. Abszolút pozíció, hogy a forgatás előtti doboz ne
 * feszítse szét a mélyedést.
 */
.ig-desk__slot input[type="range"] {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 96px;
	height: 30px;
	margin: 0;
	padding: 0;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	transform: translate(-50%, -50%) rotate(-90deg);
	cursor: grab;
}

.ig-desk__slot input[type="range"]:active { cursor: grabbing; }

.ig-desk__slot input[type="range"]::-webkit-slider-runnable-track {
	height: 6px;
	background: transparent;
	border: 0;
}

.ig-desk__slot input[type="range"]::-moz-range-track {
	height: 6px;
	background: transparent;
	border: 0;
}

/*
 * A sapka a forgatás UTÁN néz ki fekvő téglalapnak, ezért itt fordítva
 * adjuk meg: a szélesség lesz a magassága, a magasság a szélessége.
 */
.ig-desk__slot input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 15px;
	height: 30px;
	margin-top: -12px;
	border-radius: 3px;
	border: 1px solid #05050a;
	background: linear-gradient(90deg, #55555f 0%, #2e2e37 34%, #1a1a20 36%, #3a3a44 100%);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75), inset 1px 0 0 rgba(255, 255, 255, 0.28);
}

.ig-desk__slot input[type="range"]::-moz-range-thumb {
	width: 15px;
	height: 30px;
	border-radius: 3px;
	border: 1px solid #05050a;
	background: linear-gradient(90deg, #55555f 0%, #2e2e37 34%, #1a1a20 36%, #3a3a44 100%);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75), inset 1px 0 0 rgba(255, 255, 255, 0.28);
}

.ig-desk__slot input[type="range"]:focus-visible {
	outline: 2px solid var(--ig-accent);
	outline-offset: 2px;
}

/* Szitanyomás-feliratok. */
.ig-desk__silk {
	font-family: var(--ig-font-mono);
	font-size: 8.5px;
	font-weight: 800;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: #8d8d9b;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85);
	text-align: center;
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ig-desk__silk em { font-style: normal; color: #6a6a78; }
.ig-desk__silk--head { display: block; margin-bottom: 7px; color: #a5a5b4; letter-spacing: 0.18em; }
.ig-desk__silk--tiny { font-size: 8px; letter-spacing: 0.16em; color: #63636f; }

.ig-desk__num {
	min-width: 26px;
	padding: 1px 0;
	border-radius: 2px;
	background: #07070c;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.9);
	color: #ff6a3d;
	font-family: var(--ig-font-mono);
	font-size: 9px;
	font-weight: 700;
	text-align: center;
}

/* --- Oldalsó blokk: lapozó, üzemmód, tárcsák --- */

.ig-desk__side {
	flex: 1 1 300px;
	min-width: 240px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-top: 4px;
}

.ig-desk__pads {
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
}

/* Kerek gumigombok, mint a valódi pult FIXTURES sora. */
.ig-desk__pad {
	position: relative;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid #08080c;
	border-radius: 50%;
	background: #17171d;
	box-shadow:
		0 2px 3px rgba(0, 0, 0, 0.7),
		inset 0 1px 0 rgba(255, 255, 255, 0.14);
	cursor: pointer;
	transition: transform 90ms ease, box-shadow 120ms ease;
}

.ig-desk__pad:active { transform: translateY(1px); }

.ig-desk__pad-dot {
	position: absolute;
	inset: 5px;
	border-radius: 50%;
	opacity: 0.42;
	transition: opacity 120ms ease, box-shadow 120ms ease;
}

.ig-desk__pad.is-on .ig-desk__pad-dot { opacity: 1; }
.ig-desk__pad.is-on { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24), 0 2px 5px rgba(0, 0, 0, 0.7); }

.ig-desk__pads--gobo .ig-desk__pad {
	width: 34px;
	height: 34px;
	border-radius: 4px;
	display: grid;
	place-items: center;
	overflow: hidden;
}

.ig-desk__pads--gobo .ig-desk__pad canvas { display: block; opacity: 0.6; transition: opacity 120ms ease; }
.ig-desk__pads--gobo .ig-desk__pad.is-on canvas { opacity: 1; }
.ig-desk__pads--gobo .ig-desk__pad.is-on { box-shadow: 0 0 0 1px var(--ig-accent), 0 2px 5px rgba(0, 0, 0, 0.7); }

/* Funkciógombok LED-del. */
.ig-desk__keys {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px;
}

.ig-desk__key {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 8px;
	border: 1px solid #08080c;
	border-radius: 3px;
	background: linear-gradient(180deg, #2b2b33, #1a1a20);
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.12);
	color: #b7b7c4;
	font-family: var(--ig-font-mono);
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.12em;
	cursor: pointer;
	transition: transform 90ms ease, color 120ms ease;
}

.ig-desk__key:active { transform: translateY(1px); }
.ig-desk__key.is-on { color: #fff; }

.ig-desk__key-led {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #33333d;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.8);
	transition: background 120ms ease, box-shadow 120ms ease;
}

.ig-desk__key.is-on .ig-desk__key-led {
	background: var(--ig-accent);
	box-shadow: 0 0 8px rgba(232, 255, 0, 0.95);
}

/* --- Jogtárcsák --- */

/* Sorrend a pulton: faderek → jogtárcsák → a többi vezérlő. */
.ig-desk__wheels {
	display: flex;
	gap: 14px;
	flex: 0 0 auto;
	align-items: flex-end;
	padding: 0 16px;
	border-left: 1px solid #33333d;
	border-right: 1px solid #33333d;
}

.ig-desk__wheelbox {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
}

.ig-desk__wheel {
	width: 86px;
	height: 86px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 50%, #23232b 0%, #16161c 58%, #0c0c11 72%),
		linear-gradient(180deg, #3a3a44, #131319);
	box-shadow:
		0 4px 8px rgba(0, 0, 0, 0.75),
		inset 0 1px 0 rgba(255, 255, 255, 0.16),
		inset 0 -2px 4px rgba(0, 0, 0, 0.8);
	cursor: grab;
	touch-action: none;
	display: grid;
	place-items: center;
}

.ig-desk__wheel:active { cursor: grabbing; }
.ig-desk__wheel:focus-visible { outline: 2px solid var(--ig-accent); outline-offset: 3px; }

/* A forgó lap: recézett perem + a fogantyú-mélyedés. */
.ig-desk__wheel-face {
	position: relative;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background:
		repeating-conic-gradient(from 0deg, #2a2a33 0deg 4deg, #1b1b22 4deg 8deg),
		#1b1b22;
	box-shadow: inset 0 0 0 3px #101015, inset 0 2px 5px rgba(0, 0, 0, 0.9);
	will-change: transform;
}

.ig-desk__wheel-dimple {
	position: absolute;
	left: 50%;
	top: 9px;
	width: 12px;
	height: 12px;
	margin-left: -6px;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 34%, #4d4d58, #101016 78%);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.95), 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* --- Lábléc-szitanyomás --- */

.ig-desk__foot {
	display: flex;
	gap: 16px;
	align-items: center;
	margin-top: 7px;
	padding-top: 5px;
	border-top: 1px solid #33333d;
}

.ig-desk__foot .ig-desk__silk--tiny:last-child { margin-left: auto; }

/* --- Jegyzet a pult alatt --- */

.ig-lightsim__desk-note {
	margin-top: 14px;
}

.ig-lightsim__note {
	margin: 0;
	color: var(--ig-muted);
	font-family: var(--ig-font-mono);
	font-size: 11px;
	line-height: 1.7;
}

@media (max-width: 860px) {
	.ig-desk__ear { flex-basis: 20px; }
	.ig-desk__ear i { width: 9px; height: 9px; }
	.ig-desk__ear i::after { width: 5px; margin-top: 3.5px; }
	.ig-desk__panel { padding: 10px 10px 8px; }
	.ig-desk__top { flex-wrap: wrap; gap: 10px; }
	.ig-desk__lcd { order: 3; max-width: none; flex-basis: 100%; }
	.ig-desk__model { margin-left: auto; }
	.ig-desk__body { gap: 14px; }
	.ig-desk__bank { gap: 5px; padding: 6px 6px 5px; }
	.ig-desk__fader { width: 34px; }
	.ig-desk__slot { width: 100%; max-width: 34px; height: 86px; }
	.ig-desk__slot input[type="range"] { width: 78px; height: 26px; }
	.ig-desk__slot input[type="range"]::-webkit-slider-thumb { width: 13px; height: 26px; margin-top: -10px; }
	.ig-desk__slot input[type="range"]::-moz-range-thumb { width: 13px; height: 26px; }
	.ig-desk__scale { height: 86px; }
	.ig-desk__side { gap: 6px; }
	.ig-desk__wheels { gap: 8px; padding: 0 10px; }
	.ig-desk__wheel { width: 62px; height: 62px; }
	.ig-desk__wheel-face { width: 50px; height: 50px; }
	.ig-lightsim__stage { box-shadow: 5px 5px 0 var(--ig-line); }
}


/* =====================================================================
   Csatornás pult — kiegészítések
   ===================================================================== */

.ig-desk__chno {
	font-family: var(--ig-font-mono);
	font-size: 8px;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: var(--ig-accent);
	opacity: 0.85;
}

/* A ki nem osztott csatorna látszik, de tompán — mint a valódi pulton. */
.ig-desk__fader.is-dead { opacity: 0.42; }
.ig-desk__fader.is-dead .ig-desk__chno { color: #6a6a78; }

.ig-desk__pager {
	display: flex;
	align-items: center;
	gap: 6px;
}

.ig-desk__page {
	min-width: 34px;
	padding: 4px 0;
	border-radius: 2px;
	background: #07070c;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.9);
	color: var(--ig-accent);
	font-family: var(--ig-font-mono);
	font-size: 10px;
	font-weight: 700;
	text-align: center;
}

.ig-desk__silk--head { margin-bottom: 3px; }

/*
 * Az oldalsó vezérlők EGYMÁS ALATT: lapozó, köd, üzemmód. Egymás mellett
 * ugyanannyi magasságból jóval szélesebb sávot ettek el a faderektől.
 */
.ig-desk__side {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 8px;
	padding-bottom: 2px;
}

.ig-desk__group {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.ig-desk__x {
	margin-left: 10px;
	padding: 2px 7px;
	border: 1px solid #3a3a44;
	border-radius: 3px;
	background: #1a1a20;
	color: #9a9aa6;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.ig-desk__x:hover { color: #fff; border-color: #5a5a66; }

/*
 * Dokkolt állapot: amíg a színpad a képernyőn van, a pult az aljára tapad.
 * A rack fülek ilyenkor eltűnnek — egy képernyő aljára feszülő sávon a
 * szerelőfül értelmetlen, és csak helyet venne el.
 */
.ig-lightsim.is-docked .ig-desk {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99975;
	margin: 0;
	border-top: var(--ig-stroke-bold) solid var(--ig-line);
	box-shadow: 0 -14px 34px rgba(0, 0, 0, 0.55);
	animation: ig-desk-in 280ms cubic-bezier(0.18, 0.9, 0.28, 1.06) both;
}

/*
 * Ki- és beúszás. A `both` fill-mode kell: a kiúszás VÉGÁLLAPOTÁT tartani
 * kell addig, amíg a JS el nem rejti a pultot — enélkül a fixált sáv az
 * animáció utolsó képkockáján visszaugrana a helyére.
 */
@keyframes ig-desk-in {
	from { transform: translateY(100%); opacity: 0.35; }
	to { transform: none; opacity: 1; }
}

@keyframes ig-desk-out {
	from { transform: none; opacity: 1; }
	to { transform: translateY(100%); opacity: 0.35; }
}

.ig-lightsim.is-docked.is-leaving .ig-desk {
	animation: ig-desk-out 240ms cubic-bezier(0.4, 0, 0.75, 0.2) both;
}

.ig-lightsim.is-docked .ig-desk__ear,
.ig-lightsim.is-docked .ig-desk__foot { display: none; }

.ig-lightsim.is-docked .ig-desk__panel {
	max-width: var(--ig-container, 1320px);
	margin: 0 auto;
	width: 100%;
}

/* A dokkolt pult alatt Ádám gombja csak zavarna. */
.ig-lightsim.is-docked ~ * .ig-asst,
body:has(.ig-lightsim.is-docked) .ig-asst {
	opacity: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.ig-lightsim.is-docked .ig-desk,
	.ig-lightsim.is-docked.is-leaving .ig-desk { animation: none; }
}

@media (max-width: 860px) {
	.ig-lightsim.is-docked .ig-desk__body { gap: 10px; }
	.ig-lightsim.is-docked .ig-desk__panel { padding: 8px 10px 6px; }
	.ig-lightsim.is-docked .ig-desk__foot { display: none; }
}

.ig-desk__haze {
	width: 128px;
	accent-color: var(--ig-accent);
	cursor: pointer;
}


/* A pult a konténer teljes szélességét használja, ha van hely. */
.ig-desk__panel { width: 100%; }


/* =====================================================================
   „Fejlesztés alatt" jelölés
   =====================================================================

   Két helyen: a szekció címében (aki most találkozik vele) és magán a
   pulton (aki már használja — dokkolva a szekció címe kigörgethet). */

.ig-lightsim__beta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	vertical-align: middle;
	margin-left: 14px;
	padding: 5px 11px;
	border: 2px dashed var(--ig-line);
	background: repeating-linear-gradient(
		135deg,
		rgba(232, 255, 0, 0.16) 0 7px,
		rgba(232, 255, 0, 0) 7px 14px
	);
	color: var(--ig-ink);
	font-family: var(--ig-font-mono);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.ig-lightsim__beta-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #f59e0b;
	box-shadow: 0 0 7px rgba(245, 158, 11, 0.9);
	animation: ig-beta-blink 1.8s ease-in-out infinite;
}

@keyframes ig-beta-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.25; }
}

/* A pulton szűkebb a hely: itt csak egy rövid jelzés fér el. */
.ig-desk__beta {
	flex: 0 0 auto;
	padding: 3px 7px;
	border: 1px solid rgba(245, 158, 11, 0.6);
	border-radius: 2px;
	background: rgba(245, 158, 11, 0.14);
	color: #f8b64c;
	font-family: var(--ig-font-mono);
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.16em;
	line-height: 1;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.ig-lightsim__beta-dot { animation: none; }
}

@media (max-width: 720px) {
	.ig-lightsim__beta {
		display: flex;
		width: max-content;
		margin: 12px 0 0;
		font-size: 10px;
	}
}


/* =====================================================================
   Vízjel — „fejlesztés alatt" az egész szakaszon
   =====================================================================

   Két változat kell: sötét tinta a lapra, fehér a színpadra és a pultra.
   Egy háttérkép nem tud alkalmazkodni a mögötte lévő felülethez, ezért
   inkább két rétegben tesszük rá. Mindkettő átereszti a kattintást. */

.ig-lightsim {
	position: relative;
}

.ig-lightsim::before,
.ig-lightsim__stage::after,
.ig-desk__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-repeat: repeat;
	background-position: center;
}

.ig-lightsim::before {
	z-index: 2;
	opacity: 0.05;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27420%27%20height%3D%27230%27%3E%3Ctext%20x%3D%2710%27%20y%3D%27150%27%20transform%3D%27rotate%28-22%2010%20150%29%27%20font-family%3D%27ui-monospace%2CSFMono-Regular%2CMenlo%2Cmonospace%27%20font-size%3D%2730%27%20font-weight%3D%27700%27%20letter-spacing%3D%276%27%20fill%3D%27%230a0a0a%27%20fill-opacity%3D%271%27%3EFEJLESZT%C3%89S%20ALATT%3C%2Ftext%3E%3C%2Fsvg%3E");
}

.ig-lightsim__stage::after,
.ig-desk__panel::before {
	z-index: 3;
	opacity: 0.055;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27420%27%20height%3D%27230%27%3E%3Ctext%20x%3D%2710%27%20y%3D%27150%27%20transform%3D%27rotate%28-22%2010%20150%29%27%20font-family%3D%27ui-monospace%2CSFMono-Regular%2CMenlo%2Cmonospace%27%20font-size%3D%2730%27%20font-weight%3D%27700%27%20letter-spacing%3D%276%27%20fill%3D%27%23ffffff%27%20fill-opacity%3D%271%27%3EFEJLESZT%C3%89S%20ALATT%3C%2Ftext%3E%3C%2Fsvg%3E");
}

/* A pult tartalma a vízjel FÖLÖTT marad, különben a faderek tompulnának. */
.ig-desk__panel > * {
	position: relative;
	z-index: 4;
}


/*
 * Bedugott állapot: a tűk eltűnnek (a foglalatban vannak), a test pedig
 * kap egy sötét tövet ott, ahol a hátlapba fut — enélkül csak „mellé
 * tett" csatlakozónak látszana.
 */
.ig-plug__conn [data-pins] {
	transition: opacity 140ms ease;
}

.ig-plug__conn.is-seated [data-pins] {
	opacity: 0;
}

.ig-plug__conn.is-seated {
	filter: drop-shadow(-6px 0 8px rgba(0, 0, 0, 0.9));
}

/* Az XLR recézett fémteste. */
.ig-plug__knurl rect {
	fill: #05050a;
	opacity: 0.34;
}

/* A foglalat belseje bedugva „megtelik". */
[data-socket].is-live rect:nth-of-type(2) {
	fill: #0b0b10;
}
/* =====================================================================
   Kábelgyártás — műhelyi TV-tábla
   =====================================================================

   Ez nem weboldal, hanem faliújság: 2-3 méterről olvassák, egérrel senki
   nem nyúl hozzá. Ezért minden méret vw-ben van — ugyanúgy kitölt egy
   24"-os monitort és egy 65"-os tévét —, és semmi nem görgethető: ami nem
   fér ki, az a következő lapon jön. */

.ig-board {
	margin: 0;
	padding: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #08080c;
	color: #f2f2f5;
	font-family: var(--ig-font-body, system-ui, sans-serif);
	-webkit-font-smoothing: antialiased;
}

/* --- Fejléc --- */

.ig-board__bar {
	display: flex;
	align-items: center;
	gap: 2.2vw;
	padding: 1.1vw 2vw;
	background: #101017;
	border-bottom: 0.25vw solid var(--ig-accent, #e8ff00);
}

.ig-board__logo {
	font-family: var(--ig-font-mono, ui-monospace, monospace);
	font-size: 1.5vw;
	font-weight: 800;
	letter-spacing: 0.1em;
	color: #6c6c7c;
}

.ig-board__logo strong { color: var(--ig-accent, #e8ff00); }

.ig-board__bar h1 {
	margin: 0;
	font-size: 2.1vw;
	font-weight: 800;
	letter-spacing: 0.16em;
}

.ig-board__count {
	display: flex;
	align-items: baseline;
	gap: 0.5vw;
	margin-left: auto;
	color: #9a9aab;
}

.ig-board__count + .ig-board__count { margin-left: 0; }
.ig-board__count strong { font-size: 2.4vw; font-weight: 800; color: #fff; line-height: 1; }
.ig-board__count small { font-size: 0.95vw; letter-spacing: 0.06em; text-transform: uppercase; }

.ig-board__clock {
	font-family: var(--ig-font-mono, ui-monospace, monospace);
	font-size: 2.4vw;
	font-weight: 800;
	color: var(--ig-accent, #e8ff00);
	letter-spacing: 0.04em;
}

/* --- Lapok --- */

.ig-board__pages {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
}

/*
 * Minden lap egymáson fekszik, és csak az aktív látszik. Így a váltás
 * áttűnés, nem ugrás — egy tévén a hirtelen csere zavaró lenne.
 */
.ig-board__page {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: 1fr;
	gap: 1.1vw;
	padding: 1.1vw 2vw;
	opacity: 0;
	visibility: hidden;
	transition: opacity 500ms ease;
}

.ig-board__page.is-on { opacity: 1; visibility: visible; }

/* --- Egy munka --- */

.ig-bcard {
	display: flex;
	min-height: 0;
	border: 0.2vw solid #23232d;
	background: linear-gradient(180deg, #14141c, #0d0d13);
	overflow: hidden;
}

/* A darabszám az első, amit a szem megtalál. */
.ig-bcard__qty {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.2vw;
	width: 8.5vw;
	background: var(--ig-accent, #e8ff00);
	color: #0a0a0a;
}

.ig-bcard__qty strong { font-size: 4.6vw; font-weight: 800; line-height: 0.95; }
.ig-bcard__qty small { font-size: 1vw; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }

.ig-bcard__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 0.9vw 1.2vw;
}

.ig-bcard__head {
	display: flex;
	align-items: baseline;
	gap: 0.8vw;
	margin-bottom: 0.5vw;
}

.ig-bcard__who {
	font-size: 1.45vw;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ig-bcard__meta {
	margin-left: auto;
	font-family: var(--ig-font-mono, ui-monospace, monospace);
	font-size: 0.95vw;
	color: #7b7b8b;
	white-space: nowrap;
}

/* A kábel: két vég, közte a hossz — a vonal maga a kábel. */
.ig-bcard__cable {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 0.8vw;
	padding: 0.6vw 0;
}

.ig-bcard__cable::before {
	content: "";
	position: absolute;
	left: 6%;
	right: 6%;
	top: 50%;
	height: 0.32vw;
	margin-top: -0.16vw;
	border-radius: 0.16vw;
	background: #2f2f3a;
}

.ig-bcard__end,
.ig-bcard__len {
	position: relative;
	background: #0d0d13;
	padding: 0 0.6vw;
}

.ig-bcard__end {
	font-size: 1.25vw;
	font-weight: 700;
	line-height: 1.25;
	color: #dcdce4;
}

.ig-bcard__end--b { text-align: right; }

.ig-bcard__len {
	font-size: 2.5vw;
	font-weight: 800;
	line-height: 1;
	color: var(--ig-accent, #e8ff00);
	white-space: nowrap;
}

.ig-bcard__len small { font-size: 1.1vw; font-weight: 700; }

.ig-bcard__type {
	font-family: var(--ig-font-mono, ui-monospace, monospace);
	font-size: 0.95vw;
	color: #7b7b8b;
	letter-spacing: 0.05em;
	margin-bottom: 0.5vw;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --- Bekötés --- */

.ig-bcard__wires {
	list-style: none;
	margin: auto 0 0;
	padding: 0.6vw 0 0;
	border-top: 0.12vw solid #23232d;
	display: flex;
	flex-direction: column;
	gap: 0.34vw;
}

.ig-bcard__wires li {
	display: grid;
	grid-template-columns: 3.2vw 1fr 3.2vw;
	align-items: center;
	gap: 0.7vw;
}

.ig-bcard__pin {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 2vw;
	border-radius: 0.2vw;
	color: #0a0a0a;
	font-family: var(--ig-font-mono, ui-monospace, monospace);
	font-size: 1.05vw;
	font-weight: 800;
}

.ig-bcard__wire {
	font-size: 1.05vw;
	color: #c8c8d4;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Két ér egy pontra — ezen a soron múlik, hogy jó lesz-e a kábel. */
.ig-bcard__wires li.is-join .ig-bcard__wire {
	color: var(--ig-accent, #e8ff00);
	font-weight: 700;
}

.ig-bcard__wires li.is-orphan { opacity: 0.45; }

.ig-bcard__warn {
	margin: auto 0 0;
	padding: 0.6vw 0 0;
	border-top: 0.12vw solid #23232d;
	color: #f0a53d;
	font-size: 1vw;
}

/* --- Lábléc: lapozó és időzítő --- */

.ig-board__foot {
	display: flex;
	align-items: center;
	gap: 1.4vw;
	padding: 0.7vw 2vw;
	background: #101017;
}

.ig-board__pager {
	font-family: var(--ig-font-mono, ui-monospace, monospace);
	font-size: 1.1vw;
	font-weight: 700;
	color: #7b7b8b;
	white-space: nowrap;
}

.ig-board__progress {
	flex: 1 1 auto;
	height: 0.36vw;
	background: #23232d;
	border-radius: 0.18vw;
	overflow: hidden;
}

.ig-board__progress i {
	display: block;
	width: 0;
	height: 100%;
	background: var(--ig-accent, #e8ff00);
}

/* --- Üres állapot --- */

.ig-board__empty {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1vw;
	text-align: center;
}

.ig-board__empty-mark {
	display: grid;
	place-items: center;
	width: 9vw;
	height: 9vw;
	border-radius: 50%;
	background: rgba(74, 208, 122, 0.14);
	border: 0.25vw solid #4ad07a;
	color: #4ad07a;
	font-size: 4.5vw;
	line-height: 1;
}

.ig-board__empty strong { font-size: 2.6vw; font-weight: 800; }
.ig-board__empty span { font-size: 1.3vw; color: #7b7b8b; }

/*
 * Álló kijelzőn (portré tévé, tablet) egy oszlop — két hasáb ilyenkor
 * olvashatatlanul keskeny lenne.
 */
@media (max-aspect-ratio: 1/1) {
	.ig-board__page { grid-template-columns: 1fr; }
	.ig-bcard__qty { width: 16vw; }
	.ig-bcard__qty strong { font-size: 7vw; }
	.ig-bcard__who { font-size: 2.6vw; }
	.ig-bcard__end { font-size: 2.2vw; }
	.ig-bcard__len { font-size: 4vw; }
	.ig-bcard__wire, .ig-bcard__pin { font-size: 1.9vw; }
	.ig-bcard__wires li { grid-template-columns: 6vw 1fr 6vw; }
	.ig-bcard__pin { height: 3.6vw; }
}

.ig-board__gate { gap: 1.4vw; }

.ig-board__empty-mark--deny {
	background: rgba(255, 90, 74, 0.14);
	border-color: #ff5a4a;
	color: #ff5a4a;
}

.ig-board__empty-mark--lock {
	background: rgba(232, 255, 0, 0.1);
	border-color: var(--ig-accent, #e8ff00);
	color: var(--ig-accent, #e8ff00);
	font-size: 3.4vw;
}

.ig-board__btn {
	margin-top: 0.6vw;
	padding: 1vw 2.6vw;
	border: 0.2vw solid var(--ig-accent, #e8ff00);
	background: var(--ig-accent, #e8ff00);
	color: #0a0a0a;
	font-family: var(--ig-font-mono, ui-monospace, monospace);
	font-size: 1.3vw;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
}

.ig-board__btn:hover { background: transparent; color: var(--ig-accent, #e8ff00); }

@media (prefers-reduced-motion: reduce) {
	.ig-board__page { transition: none; }
}
/* =====================================================================
   Dokumentációs oldal — /doc/
   =====================================================================

   Docusaurus-szemlélet: ragadós bal oldali fa, középen a szöveg mérhető
   sorhosszal, jobbra a szakaszjegyzék. Saját váz, nem a shop fejléce —
   ez egy dokumentáció, nem egy aloldal. */

.ig-doc {
	margin: 0;
	background: var(--ig-paper);
	color: var(--ig-ink);
	font-family: var(--ig-font-body);
}

/* --- Fejléc --- */

.ig-doc__bar {
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 12px 24px;
	background: var(--ig-ink);
	color: var(--ig-paper);
	border-bottom: var(--ig-stroke-bold) solid var(--ig-accent);
}

.ig-doc__brand {
	font-family: var(--ig-font-mono);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: var(--ig-paper);
	text-decoration: none;
	white-space: nowrap;
}

.ig-doc__brand strong { color: var(--ig-accent); }
.ig-doc__brand span { font-size: 11px; font-weight: 600; opacity: 0.6; letter-spacing: 0.16em; }

.ig-doc__shop {
	margin-left: auto;
	color: var(--ig-paper);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	opacity: 0.85;
}

.ig-doc__shop:hover { color: var(--ig-accent); opacity: 1; }
.ig-doc__burger { display: none; }

/* --- Kereső --- */

.ig-doc__search { position: relative; flex: 1 1 auto; max-width: 520px; }

.ig-doc__search input {
	width: 100%;
	padding: 9px 14px;
	border: 2px solid #33333d;
	background: #16161c;
	color: var(--ig-paper);
	font: inherit;
	font-size: 16px;
}

.ig-doc__search input:focus { outline: none; border-color: var(--ig-accent); }

.ig-doc__results {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 6px);
	max-height: 62vh;
	overflow-y: auto;
	background: var(--ig-paper);
	border: var(--ig-stroke) solid var(--ig-line);
	box-shadow: 6px 6px 0 rgba(10, 10, 10, 0.25);
}

.ig-doc__results a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 14px;
	border-bottom: 1px solid #e8e6e2;
	color: var(--ig-ink);
	text-decoration: none;
}

.ig-doc__results a:last-child { border-bottom: 0; }
.ig-doc__results a:hover { background: var(--ig-bone); }
.ig-doc__results strong { font-size: 14px; }
.ig-doc__results small { font-size: 11px; color: var(--ig-muted); }
.ig-doc__noresult { display: block; padding: 14px; color: var(--ig-muted); font-size: 13px; }

/* --- Törzs --- */

.ig-doc__body {
	display: grid;
	grid-template-columns: 288px minmax(0, 1fr);
	align-items: start;
	max-width: 1600px;
	margin: 0 auto;
}

.ig-doc__side {
	position: sticky;
	top: 61px;
	max-height: calc(100vh - 61px);
	overflow-y: auto;
	padding: 22px 16px 40px;
	border-right: 1px solid #e2e0dc;
}

.ig-doc__sidehead {
	display: block;
	margin-bottom: 10px;
	font-family: var(--ig-font-mono);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ig-muted);
}

.ig-doc__cats, .ig-doc__items { list-style: none; margin: 0; padding: 0; }

.ig-doc__cat {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: 2px;
	color: var(--ig-ink);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
}

.ig-doc__cat small {
	margin-left: auto;
	font-family: var(--ig-font-mono);
	font-size: 10px;
	color: var(--ig-muted);
}

.ig-doc__cat:hover { background: var(--ig-bone); }
.ig-doc__cat.is-active { background: var(--ig-ink); color: var(--ig-paper); }
.ig-doc__cat.is-active small { color: var(--ig-accent); }

/* Alkategóriák: behúzva, vonallal — látszódjon, mi mi alá tartozik. */
.ig-doc__sub {
	list-style: none;
	margin: 2px 0 4px 12px;
	padding: 0 0 0 8px;
	border-left: 1px solid #e2e0dc;
}

/* ---------------------------------------------------------------------------
   Nyitható ágak

   A nyitás magassága nem ismert előre, márpedig `height: auto`-ra nem lehet
   animálni. A rács viszont igen: a külső elem 0fr-ről 1fr-re nő, a belső
   levágja, ami még nem fér ki. Így a fa lágyan nyílik, JS-es magasságmérés
   nélkül.
   --------------------------------------------------------------------------- */

.ig-doc__node { position: relative; }

.ig-doc__row {
	display: flex;
	align-items: center;
	gap: 2px;
}

.ig-doc__row .ig-doc__cat { flex: 1 1 auto; min-width: 0; }

.ig-doc__toggle {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: none;
	color: var(--ig-muted);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.ig-doc__toggle:hover { color: var(--ig-ink); background: var(--ig-bone); }

.ig-doc__toggle:focus-visible {
	outline: 2px solid var(--ig-accent);
	outline-offset: 1px;
}

/* A levélnek nincs mit nyitni, de a neve legyen egy vonalban a többivel. */
.ig-doc__toggle--none { cursor: default; }

.ig-doc__toggle svg {
	transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ig-doc__node.is-open > .ig-doc__row > .ig-doc__toggle svg { transform: rotate(90deg); }

/*
 * A láthatóság azért van külön időzítve, mert csukott ágban semmi nem lehet
 * fókuszálható — a tabulátor nem eshet bele egy nem látszó hivatkozásba —, de
 * ha azonnal eltűnne, a becsukódás felénél kiürülne a doboz. Ezért nyitáskor
 * rögtön látszik, csukáskor csak az animáció végén tűnik el.
 */
.ig-doc__kids {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition: grid-template-rows 240ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 240ms;
}

.ig-doc__kids > div { overflow: hidden; }

.ig-doc__node.is-open > .ig-doc__kids {
	grid-template-rows: 1fr;
	visibility: visible;
	transition: grid-template-rows 240ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}

/* Ujjal is el kell találni: a tévén és telefonon nagyobb a gomb. */
@media (max-width: 980px) {
	.ig-doc__toggle { width: 30px; height: 34px; }
	.ig-doc__toggle svg { width: 13px; height: 13px; }
}

@media (prefers-reduced-motion: reduce) {
	.ig-doc__kids,
	.ig-doc__toggle svg { transition: none; }
}

/* A szülő halványabb: rá lehet kattintani, de a lényeg alatta van. */
.ig-doc__cat.has-kids { color: #4a4a4a; }
.ig-doc__cat.has-kids.is-active { color: var(--ig-paper); }

.ig-doc__items { margin: 2px 0 8px 22px; border-left: 2px solid #e2e0dc; }

.ig-doc__items a {
	display: block;
	padding: 5px 10px;
	color: var(--ig-muted);
	font-size: 12.5px;
	line-height: 1.35;
	text-decoration: none;
}

.ig-doc__items a:hover { color: var(--ig-ink); }

.ig-doc__items a.is-active {
	color: var(--ig-ink);
	font-weight: 700;
	box-shadow: -2px 0 0 var(--ig-accent);
	background: var(--ig-bone);
}

/* --- Tartalom --- */

/*
 * A tartalom alapból EGY hasáb. A jobb oldali szakaszjegyzék csak a
 * dokumentum-lapokon jelenik meg, ezért csak ott váltunk két hasábra —
 * enélkül a nyitó- és kategórialap elemei szétszóródtak a rácsban: a cím a
 * bal, a bevezető a jobb oszlopba került, és a lap vízszintesen kilógott.
 */
.ig-doc__main {
	padding: 34px 40px 80px;
	min-width: 0;
}

.ig-doc__main--doc {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 232px;
	gap: 40px;
	align-items: start;
}

.ig-doc__article { min-width: 0; }

.ig-doc__crumb {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
	font-family: var(--ig-font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ig-muted);
}

.ig-doc__crumb a { color: var(--ig-muted); text-decoration: none; }
.ig-doc__crumb a:hover { color: var(--ig-ink); }

.ig-doc__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 0 26px;
	padding-bottom: 18px;
	border-bottom: 1px solid #e2e0dc;
}

.ig-doc__btn {
	padding: 9px 15px;
	border: var(--ig-stroke) solid var(--ig-line);
	background: var(--ig-ink);
	color: var(--ig-paper);
	font-family: var(--ig-font-mono);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
}

.ig-doc__btn:hover { background: var(--ig-accent); color: var(--ig-accent-ink); }
.ig-doc__btn--pdf { background: var(--ig-accent); color: var(--ig-accent-ink); }
.ig-doc__btn--pdf:hover { background: var(--ig-ink); color: var(--ig-paper); }
.ig-doc__btn--ghost { background: transparent; color: var(--ig-ink); }

.ig-doc__sku {
	margin-left: auto;
	font-family: var(--ig-font-mono);
	font-size: 11px;
	color: var(--ig-muted);
}

/* A szöveg olvasható sorhosszon marad — ez a dokumentáció lényege. */
.ig-doc__content { max-width: 74ch; }

.ig-doc__content h1 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; margin: 0 0 18px; }
.ig-doc__content h2 { font-size: 22px; margin: 34px 0 12px; padding-bottom: 7px; border-bottom: 1px solid #e2e0dc; scroll-margin-top: 78px; }
.ig-doc__content h3 { font-size: 17px; margin: 24px 0 8px; scroll-margin-top: 78px; }
.ig-doc__content p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.68; }
.ig-doc__content ul, .ig-doc__content ol { margin: 0 0 16px 20px; padding: 0; }
.ig-doc__content li { margin: 0 0 6px; font-size: 15.5px; line-height: 1.6; }
.ig-doc__content a { color: var(--ig-ink); text-decoration: underline; text-underline-offset: 2px; }

.ig-doc__lead {
	margin: 0 0 22px;
	padding: 14px 18px;
	border-left: 4px solid var(--ig-accent);
	background: var(--ig-bone);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.55;
}

.ig-doc__tablewrap { overflow-x: auto; margin: 0 0 20px; }

.ig-doc__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.ig-doc__table th, .ig-doc__table td {
	padding: 9px 12px;
	border: 1px solid #e2e0dc;
	text-align: left;
	vertical-align: top;
}

.ig-doc__table th { background: var(--ig-bone); font-family: var(--ig-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.ig-doc__table tbody tr:nth-child(even) { background: #faf9f7; }

/* --- Jobb oldali jegyzék --- */

.ig-doc__toc {
	position: sticky;
	top: 90px;
	align-self: start;
	padding-left: 18px;
	border-left: 1px solid #e2e0dc;
}

.ig-doc__tochead {
	display: block;
	margin-bottom: 8px;
	font-family: var(--ig-font-mono);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ig-muted);
}

.ig-doc__toc ul { list-style: none; margin: 0; padding: 0; }
.ig-doc__toc li.lvl-3 { padding-left: 12px; }
.ig-doc__toc a { display: block; padding: 4px 0; color: var(--ig-muted); font-size: 12.5px; line-height: 1.4; text-decoration: none; }
.ig-doc__toc a:hover { color: var(--ig-ink); }

/* --- Nyitólap és kategórialap --- */

.ig-doc__hero { max-width: 74ch; margin-bottom: 30px; }

/*
 * A dokumentáció saját címméretei. A kategórialap h1-je nincs külön
 * burkolóban, ezért a téma globális h1-ét örökölte (140px-ig), és
 * elnyomta az egész lapot.
 */
.ig-doc__main h1 {
	margin: 0 0 14px;
	font-size: clamp(28px, 3.4vw, 44px);
	line-height: 1.08;
	overflow-wrap: anywhere;
}
.ig-doc__eyebrow { margin: 0 0 8px; font-family: var(--ig-font-mono); font-size: 11px; font-weight: 800; letter-spacing: 0.16em; color: var(--ig-muted); }
.ig-doc__hero h1 { margin: 0 0 12px; font-size: clamp(30px, 4vw, 52px); line-height: 1.05; }
.ig-doc__intro {
	margin: 0 0 22px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--ig-muted);
	max-width: 68ch;
}

.ig-doc__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
}

.ig-doc__card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 18px;
	border: var(--ig-stroke) solid var(--ig-line);
	color: var(--ig-ink);
	text-decoration: none;
	transition: transform 120ms ease, box-shadow 120ms ease;
}

.ig-doc__card:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ig-line); }
.ig-doc__card strong { font-size: 15px; line-height: 1.25; }
.ig-doc__card span { font-family: var(--ig-font-mono); font-size: 11px; color: var(--ig-muted); }

.ig-doc__list { list-style: none; margin: 0; padding: 0; max-width: 78ch; }

.ig-doc__list a {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 13px 0;
	border-bottom: 1px solid #e2e0dc;
	color: var(--ig-ink);
	text-decoration: none;
}

.ig-doc__list a:hover { background: var(--ig-bone); }
.ig-doc__list strong { font-size: 15.5px; }
.ig-doc__list span { font-size: 13px; color: var(--ig-muted); line-height: 1.45; }

/* --- Kis képernyő --- */

@media (max-width: 1100px) {
	.ig-doc__main--doc { grid-template-columns: minmax(0, 1fr); }
	.ig-doc__toc { display: none; }
}

@media (max-width: 860px) {
	.ig-doc__body { grid-template-columns: minmax(0, 1fr); }
	.ig-doc__burger {
		display: block;
		padding: 4px 8px;
		border: 0;
		background: none;
		color: var(--ig-paper);
		font-size: 20px;
		line-height: 1;
		cursor: pointer;
	}

	.ig-doc__burger[aria-expanded="true"] { color: var(--ig-accent); }
	.ig-doc__shop { display: none; }
	/*
	 * A menü RÖGZÍTETT réteg a fejléc alatt, nem a dokumentum tetején álló
	 * blokk. Így akárhol jársz az oldalon, ott nyílik ki, ahol vagy.
	 * A magasságát a JS méri (--ig-doc-bar), mert a fejléc a keresőmezővel
	 * együtt magasabb, mint egy fix érték.
	 */
	.ig-doc__side {
		display: none;
		position: fixed;
		top: var(--ig-doc-bar, 58px);
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 40;
		max-height: none;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 18px 18px 60px;
		background: var(--ig-paper);
		border-right: 0;
		border-top: 1px solid #e2e0dc;
		box-shadow: 0 14px 34px rgba(10, 10, 10, 0.28);
		animation: ig-doc-side-in 200ms cubic-bezier(0.2, 0.9, 0.3, 1);
	}

	.ig-doc__side.is-open { display: block; }

	@keyframes ig-doc-side-in {
		from { opacity: 0; transform: translateY(-8px); }
		to { opacity: 1; transform: none; }
	}

	/* Nyitott menü alatt a lap ne görögjön tovább. */
	body.ig-doc-locked { overflow: hidden; }
	.ig-doc__main { padding: 22px 18px 60px; }
	.ig-doc__bar { gap: 12px; padding: 10px 14px; }
	.ig-doc__brand span { display: none; }
}

/* A kézikönyvek oldaltöréseit jelző vonal. */
.ig-doc__hr {
	margin: 26px 0;
	border: 0;
	border-top: 1px solid #e2e0dc;
}

/* --- Nyelvfülek: több nyelvű kézikönyv --- */

.ig-doc__langs {
	display: flex;
	gap: 0;
	margin: 0 0 16px;
	border-bottom: 2px solid #e2e0dc;
}

.ig-doc__lang {
	padding: 8px 16px;
	margin-bottom: -2px;
	border-bottom: 2px solid transparent;
	color: var(--ig-muted);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.ig-doc__lang:hover { color: var(--ig-ink); }

.ig-doc__lang.is-active {
	color: var(--ig-ink);
	border-bottom-color: var(--ig-accent);
}

/* Csonka dokumentum: ezt látni kell, mielőtt valaki hozzáfog a szereléshez. */
.ig-doc__cut {
	margin: 0 0 18px;
	padding: 12px 16px;
	border-left: 4px solid #f0a53d;
	background: #fdf6ea;
	font-size: 14px;
	line-height: 1.5;
	color: #7a5312;
}

/* ---------------------------------------------------------------------------
   Ábrák

   A kézikönyv rajzai nem illusztrációk: a bekötési és méretrajz nélkül a
   fejezet fele hiányzik. Ezért teljes szélességű, kattintással nagyítható
   elem, nem szövegbe simuló kis kép.
   --------------------------------------------------------------------------- */

.ig-doc__fig {
	margin: 22px 0;
	padding: 0;
}

.ig-doc__figlink {
	display: block;
	border: 1px solid #e2e0dc;
	background: #fff;
	line-height: 0;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.ig-doc__figlink:hover {
	border-color: var(--ig-accent);
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.09);
}

.ig-doc__figlink img {
	display: block;
	width: 100%;
	height: auto;
}

.ig-doc__fig figcaption {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ig-muted);
}

.ig-doc__inlineimg {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

/* Nagyító: az ábra nem új lapon nyílik, hanem ott, ahol az olvasó van. */
.ig-doc__zoom {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(12, 12, 14, 0.88);
	opacity: 0;
	transition: opacity 180ms ease;
}

.ig-doc__zoom.is-on { opacity: 1; }

.ig-doc__zoom img {
	max-width: 100%;
	max-height: 100%;
	background: #fff;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	transform: scale(0.97);
	transition: transform 180ms ease;
}

.ig-doc__zoom.is-on img { transform: scale(1); }

.ig-doc__zoomclose {
	position: absolute;
	top: 16px;
	right: 20px;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Gépi ellenőrzés — csak szerkesztőnek
   --------------------------------------------------------------------------- */

.ig-doc__check {
	margin: 0 0 18px;
	border: 1px solid #e2e0dc;
	background: #faf9f7;
	font-size: 14px;
}

.ig-doc__check > summary {
	padding: 11px 16px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.ig-doc__check > summary::-webkit-details-marker { display: none; }

.ig-doc__check > summary::before {
	content: "▸";
	margin-right: 8px;
	color: var(--ig-muted);
}

.ig-doc__check[open] > summary::before { content: "▾"; }

.ig-doc__check em {
	margin-left: 8px;
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	color: var(--ig-muted);
}

.ig-doc__issue {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px;
	padding: 10px 16px;
	border-top: 1px solid #ecebe7;
	line-height: 1.45;
}

.ig-doc__issue strong { font-size: 13px; }

.ig-doc__was,
.ig-doc__is {
	font-family: var(--ig-font-mono, ui-monospace, monospace);
	font-size: 12.5px;
}

.ig-doc__was { color: #b4453a; }
.ig-doc__was::before { content: "átirat: "; color: var(--ig-muted); }
.ig-doc__is { color: #2f7a46; }
.ig-doc__is::before { content: "eredeti: "; color: var(--ig-muted); }

.ig-doc__issue.is-high { border-left: 3px solid #d24b3c; }

.ig-doc__checkerr {
	margin: 0;
	padding: 10px 16px;
	border-top: 1px solid #ecebe7;
	color: var(--ig-muted);
}

@media (prefers-reduced-motion: reduce) {
	.ig-doc__zoom,
	.ig-doc__zoom img { transition: none; }
}

/* ---------------------------------------------------------------------------
   Ábra az eredeti PDF-oldalból

   Ha a szerver nem tud képet készíteni a PDF-ből, magát a lapot ágyazzuk be.
   Ez vektoros, tehát nagyításban is éles — jobb, mint egy kép. Cserébe a
   mobil böngészők PDF-nézője alkalmatlan a beágyazásra: ott hivatkozás megy.
   --------------------------------------------------------------------------- */

.ig-doc__pdfbox {
	position: relative;
	border: 1px solid #e2e0dc;
	background: #f7f6f4;
	aspect-ratio: 1 / 1.35;
	max-height: 78vh;
	overflow: hidden;
}

.ig-doc__pdfbox iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.ig-doc__fig--pdf figcaption a {
	color: var(--ig-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}

.ig-doc__figmiss {
	margin: 18px 0;
	padding: 10px 14px;
	border-left: 3px solid #d8d6d1;
	color: var(--ig-muted);
	font-style: italic;
}

@media (max-width: 860px) {
	.ig-doc__pdfbox { display: none; }

	.ig-doc__fig--pdf figcaption {
		display: block;
		margin: 18px 0;
		padding: 14px 16px;
		border: 1px solid #e2e0dc;
		background: #faf9f7;
		font-size: 14px;
		color: var(--ig-ink);
	}

	.ig-doc__fig--pdf figcaption::before {
		content: "📐 ";
	}
}
/* =====================================================================
   Füstszimulátor — „Füstöld tele a termet”
   =====================================================================

   A fényszimulátor testvére, és szándékosan hasonlít rá: ugyanaz a sötét
   színpad, ugyanaz a bedugós indítás. Ami más: itt nem a lámpa a főszereplő,
   hanem a TÉR — ezért a vezérlőpult bal fele a teremről szól, nem a gépről. */

.ig-fogsim {
	margin: 48px 0;
	padding: 28px 0 0;
	border-top: 1px solid var(--ig-line, #e2e0dc);
}

.ig-fogsim__lead {
	max-width: 62ch;
	margin: 0;
	color: var(--ig-muted, #6b6b6b);
	font-size: 15px;
	line-height: 1.6;
}

/* A „még nem kész” jelzés — ugyanaz a nyelv, mint a fényszimulátornál. */
.ig-fogsim__beta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 10px;
	padding: 3px 10px;
	border: 1px solid #f0a53d;
	border-radius: 999px;
	background: rgba(240, 165, 61, 0.1);
	color: #a06614;
	font-family: var(--ig-font-mono, ui-monospace, monospace);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	vertical-align: middle;
}

.ig-fogsim__beta-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #f0a53d;
	animation: ig-fogsim-pulse 2s ease-in-out infinite;
}

@keyframes ig-fogsim-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.25; }
}

/* --- A színpad --- */

.ig-fogsim__stage {
	position: relative;
	margin-top: 18px;
	border: 1px solid #23232b;
	background: #0b0b0f;
	overflow: hidden;
}

.ig-fogsim__stage canvas {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------------
   A verdikt — ezért az egészért

   A terem BAL oldalán marad, nem középen: a pult a jobb oldal 42%-át foglalja,
   egy középre igazított doboz félig alácsúszna.
   --------------------------------------------------------------------------- */

.ig-fogsim__verdict {
	position: absolute;
	left: 16px;
	bottom: 16px;
	max-width: min(600px, 54%);
	padding: 14px 20px;
	border-radius: 14px;
	border-left: 4px solid var(--ig-accent, #e8ff00);
	background: rgba(12, 12, 17, 0.94);
	box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.6), -4px -4px 12px rgba(60, 60, 76, 0.16);
	color: #f2f2f5;
	font-size: 15px;
	line-height: 1.55;
	animation: ig-fogsim-rise 320ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

.ig-fogsim__verdict[hidden] { display: none; }

.ig-fogsim__verdict.is-good { border-left-color: #4ad07a; }
.ig-fogsim__verdict.is-ok { border-left-color: #f0a53d; }
.ig-fogsim__verdict.is-bad { border-left-color: #ff5a4a; }

@keyframes ig-fogsim-rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   A pult — neumorf, a terem fölött lebegve

   Egy sötét felületen a neumorfizmus két árnyékból áll: egy sötétebb jobbra-le
   és egy világosabb balra-fel. A kiemelkedő elem így kapja meg a domborulatot,
   a besüllyesztett (csúszkasín, cső) pedig ugyanezt fordítva, belülre.
   --------------------------------------------------------------------------- */

.ig-fogsim__panel {
	--nb: #1a1a22;          /* a panel alapszíne */
	--nb-dark: #0c0c11;
	--nb-light: #262631;

	position: absolute;
	top: 16px;
	right: 16px;
	bottom: 16px;
	width: min(430px, 42%);
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px 18px;
	border-radius: 20px;
	background: var(--nb);
	box-shadow:
		10px 10px 22px rgba(0, 0, 0, 0.6),
		-8px -8px 20px rgba(60, 60, 76, 0.22);
	color: #e6e6ee;
	font-size: 13px;
	/*
	 * A kitöltés SZÁNDÉKOSAN backwards, nem both.
	 *
	 * A `both` a befutás után is érvényben tartaná a keyframe záró állapotát
	 * (transform: none) — és mivel az animáció mindig erősebb a sima
	 * szabálynál, az összecsukás transformja soha nem érvényesülne. Emiatt
	 * nem lehetett becsukni a pultot.
	 */
	animation: ig-fogsim-panel 260ms ease-out backwards;
	transition: transform 340ms cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * Összecsukva a pult kicsúszik jobbra, és csak a fül marad kint. A terem
 * néha fontosabb, mint a csúszkák — főleg amikor épp telik.
 */
.ig-fogsim__panel.is-folded { transform: translateX(calc(100% + 16px)); }

.ig-fogsim__fold {
	position: absolute;
	top: 20px;
	left: -34px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 12px 0 0 12px;
	background: var(--nb);
	box-shadow: -6px 6px 16px rgba(0, 0, 0, 0.55), 2px -2px 8px rgba(60, 60, 76, 0.2);
	color: #9a9aac;
	cursor: pointer;
	transition: color 160ms ease;
}

.ig-fogsim__fold:hover { color: var(--ig-accent, #e8ff00); }

.ig-fogsim__fold:focus-visible {
	outline: 2px solid var(--ig-accent, #e8ff00);
	outline-offset: 2px;
}

.ig-fogsim__fold svg { transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); }

.ig-fogsim__panel.is-folded .ig-fogsim__fold svg { transform: rotate(180deg); }

/*
 * A belebegés SZÁNDÉKOSAN csak áttetszőséget animál.
 *
 * Ha a transformot is ez mozgatná, az animáció birtokolná a tulajdonságot —
 * és mivel az animáció mindig erősebb a sima szabálynál, az összecsukás
 * eltolása soha nem érvényesülne. Emiatt nem lehetett becsukni a pultot.
 * A transform így szabadon marad a fülnek.
 */
@keyframes ig-fogsim-panel {
	from { opacity: 0; }
	to { opacity: 1; }
}

.ig-fogsim__panel[hidden] { display: none; }

.ig-fogsim__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ig-fogsim__clock {
	font-family: var(--ig-font-mono, ui-monospace, monospace);
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
	color: var(--ig-accent, #e8ff00);
	text-shadow: 0 0 18px rgba(232, 255, 0, 0.28);
}

.ig-fogsim__phase {
	font-size: 12px;
	text-align: right;
	color: #9a9aac;
	letter-spacing: 0.02em;
}

.ig-fogsim__panel.is-live .ig-fogsim__phase { color: var(--ig-accent, #e8ff00); }

.ig-fogsim__body {
	display: grid;
	grid-template-columns: 74px 1fr;
	gap: 16px;
	min-height: 0;
	flex: 1 1 auto;
}

/* --- A töltöttség-oszlop --- */

.ig-fogsim__meter {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	min-height: 0;
}

.ig-fogsim__tube {
	position: relative;
	flex: 1 1 auto;
	width: 30px;
	min-height: 120px;
	border-radius: 15px;
	background: var(--nb-dark);
	/* Besüllyesztett: az árnyék BELÜL van. */
	box-shadow:
		inset 5px 5px 10px rgba(0, 0, 0, 0.75),
		inset -4px -4px 9px rgba(70, 70, 88, 0.3);
	overflow: visible;
}

.ig-fogsim__fill {
	position: absolute;
	left: 4px;
	right: 4px;
	bottom: 4px;
	height: 0;
	border-radius: 11px;
	background: linear-gradient(180deg, #f2f6ff 0%, #b9c6dd 55%, #7d8ba6 100%);
	box-shadow: 0 0 14px rgba(210, 226, 255, 0.45);
	transition: height 180ms linear;
}

/* Küszöbök: mit jelent a szám, amit lát. */
.ig-fogsim__tick {
	position: absolute;
	left: 100%;
	display: flex;
	align-items: center;
	gap: 4px;
	transform: translateY(50%);
	pointer-events: none;
}

.ig-fogsim__tick i {
	display: block;
	width: 7px;
	height: 1px;
	background: rgba(255, 255, 255, 0.28);
}

.ig-fogsim__tick b {
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: #71718a;
	white-space: nowrap;
}

/* A plafon: ahol a szellőzés megállítja. Ez a funkció legfontosabb jele. */
.ig-fogsim__cap {
	position: absolute;
	left: -6px;
	right: -6px;
	display: flex;
	align-items: center;
	transform: translateY(50%);
	pointer-events: none;
}

.ig-fogsim__cap i {
	flex: 1 1 auto;
	height: 0;
	border-top: 2px dashed #ff5a4a;
}

.ig-fogsim__cap b {
	margin-left: 4px;
	padding: 1px 5px;
	border-radius: 4px;
	background: #ff5a4a;
	color: #140604;
	font-family: var(--ig-font-mono, ui-monospace, monospace);
	font-size: 9.5px;
	font-weight: 800;
}

.ig-fogsim__pct {
	font-family: var(--ig-font-mono, ui-monospace, monospace);
	font-size: 17px;
	font-weight: 800;
	color: #fff;
}

.ig-fogsim__meterlab {
	font-size: 9.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #71718a;
}

/* --- A két hasáb --- */

.ig-fogsim__cols {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 0;
	overflow-y: auto;
}

.ig-fogsim__group h3 {
	margin: 0 0 9px;
	font-family: var(--ig-font-mono, ui-monospace, monospace);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #6d6d84;
}

.ig-fogsim__slider {
	display: grid;
	grid-template-columns: 74px 1fr 46px;
	align-items: center;
	gap: 9px;
	margin-bottom: 8px;
	font-size: 12px;
}

.ig-fogsim__slider > span { color: #9a9aac; }

.ig-fogsim__slider output {
	font-family: var(--ig-font-mono, ui-monospace, monospace);
	font-size: 12px;
	font-weight: 700;
	text-align: right;
	color: var(--ig-accent, #e8ff00);
}

.ig-fogsim__slider input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 10px;
	border-radius: 5px;
	background: var(--nb-dark);
	box-shadow:
		inset 3px 3px 6px rgba(0, 0, 0, 0.8),
		inset -2px -2px 5px rgba(70, 70, 88, 0.28);
	outline: none;
}

.ig-fogsim__slider input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border: 0;
	border-radius: 50%;
	background: linear-gradient(145deg, #2e2e3b, #1c1c25);
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7), -2px -2px 5px rgba(78, 78, 98, 0.4);
	cursor: pointer;
}

.ig-fogsim__slider input[type="range"]::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border: 0;
	border-radius: 50%;
	background: linear-gradient(145deg, #2e2e3b, #1c1c25);
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7), -2px -2px 5px rgba(78, 78, 98, 0.4);
	cursor: pointer;
}

.ig-fogsim__slider--pick { grid-template-columns: 74px 1fr; }

.ig-fogsim__slider select {
	padding: 7px 10px;
	border: 0;
	border-radius: 9px;
	background: var(--nb);
	box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.6), -3px -3px 7px rgba(70, 70, 88, 0.26);
	color: #e6e6ee;
	font-size: 12px;
}

.ig-fogsim__vol {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 10px 0 0;
}

.ig-fogsim__vol strong {
	font-family: var(--ig-font-mono, ui-monospace, monospace);
	font-size: 19px;
	font-weight: 800;
	color: #fff;
}

.ig-fogsim__vol span {
	font-family: var(--ig-font-mono, ui-monospace, monospace);
	font-size: 12px;
	color: #9a9aac;
}

/* --- A mérleg: befúj vs. elszáll --- */

.ig-fogsim__balance {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 8px;
	margin: 10px 0;
	padding: 10px;
	border-radius: 13px;
	background: var(--nb-dark);
	box-shadow:
		inset 4px 4px 9px rgba(0, 0, 0, 0.72),
		inset -3px -3px 7px rgba(70, 70, 88, 0.26);
}

.ig-fogsim__bal {
	display: grid;
	justify-items: center;
	gap: 1px;
	text-align: center;
}

.ig-fogsim__bal span {
	font-size: 9.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #6d6d84;
}

.ig-fogsim__bal strong {
	font-family: var(--ig-font-mono, ui-monospace, monospace);
	font-size: 20px;
	font-weight: 800;
	line-height: 1;
}

.ig-fogsim__bal.is-in strong { color: #7fd4ff; }
.ig-fogsim__bal.is-out strong { color: #ff9b7a; }
.ig-fogsim__bal em { font-size: 9.5px; font-style: normal; color: #6d6d84; }

.ig-fogsim__balarrow {
	font-size: 18px;
	color: #4d4d63;
	transition: color 200ms ease;
}

.ig-fogsim__balarrow.is-balanced { color: #ff5a4a; }

/* --- Tartály --- */

.ig-fogsim__tankrow {
	display: grid;
	grid-template-columns: 74px 1fr 46px;
	align-items: center;
	gap: 9px;
	margin-bottom: 10px;
	font-size: 12px;
	color: #9a9aac;
}

.ig-fogsim__tankrow i {
	display: block;
	height: 8px;
	border-radius: 4px;
	background: var(--nb-dark);
	box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.8);
	overflow: hidden;
}

.ig-fogsim__tankrow i b {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, #4ad07a, #9fe6b8);
	transition: width 220ms linear;
}

.ig-fogsim__tankrow output {
	font-family: var(--ig-font-mono, ui-monospace, monospace);
	font-size: 12px;
	font-weight: 700;
	text-align: right;
	color: #e6e6ee;
}

/* --- Sebesség, gombok --- */

.ig-fogsim__speed {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 10px 0;
	font-size: 12px;
}

.ig-fogsim__speed > span { width: 74px; color: #9a9aac; }

.ig-fogsim__speed button {
	flex: 1 1 auto;
	padding: 7px 0;
	border: 0;
	border-radius: 9px;
	background: var(--nb);
	box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.6), -3px -3px 7px rgba(70, 70, 88, 0.26);
	color: #9a9aac;
	font-family: var(--ig-font-mono, ui-monospace, monospace);
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
	transition: color 140ms ease, box-shadow 140ms ease;
}

.ig-fogsim__speed button.is-on {
	box-shadow:
		inset 3px 3px 7px rgba(0, 0, 0, 0.75),
		inset -2px -2px 6px rgba(70, 70, 88, 0.3);
	color: var(--ig-accent, #e8ff00);
}

.ig-fogsim__buttons { display: flex; gap: 9px; }

.ig-fogsim__go,
.ig-fogsim__reset {
	flex: 1 1 auto;
	padding: 12px 10px;
	border: 0;
	border-radius: 12px;
	font-family: var(--ig-font-mono, ui-monospace, monospace);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: box-shadow 140ms ease, color 140ms ease;
}

.ig-fogsim__go {
	background: linear-gradient(145deg, #f4ff5c, #cfe400);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.62), -3px -3px 9px rgba(90, 100, 40, 0.35);
	color: #12130a;
}

.ig-fogsim__go:active:not(:disabled) {
	box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.42), inset -2px -2px 6px rgba(255, 255, 255, 0.25);
}

.ig-fogsim__go:disabled {
	background: var(--nb);
	box-shadow: inset 3px 3px 7px rgba(0, 0, 0, 0.7), inset -2px -2px 6px rgba(70, 70, 88, 0.24);
	color: #4d4d63;
	cursor: not-allowed;
}

.ig-fogsim__reset {
	flex: 0 0 auto;
	background: var(--nb);
	box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.6), -3px -3px 8px rgba(70, 70, 88, 0.26);
	color: #9a9aac;
}

.ig-fogsim__reset:active {
	box-shadow: inset 3px 3px 7px rgba(0, 0, 0, 0.72), inset -2px -2px 6px rgba(70, 70, 88, 0.28);
}

/* --- A gép adatai a színpad alatt --- */

.ig-fogsim__specs {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	border: 1px solid #23232b;
	border-top: 0;
	background: #101016;
	font-size: 12.5px;
}

.ig-fogsim__specs > div {
	flex: 1 1 160px;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 12px 16px;
	border-right: 1px solid #1c1c24;
}

.ig-fogsim__specs > div:last-child { border-right: 0; }

.ig-fogsim__specs dt {
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #6d6d84;
}

.ig-fogsim__specs dd {
	margin: 0;
	font-family: var(--ig-font-mono, ui-monospace, monospace);
	font-weight: 700;
	color: #e6e6ee;
}

/* --- Bedugás: a szimulátorra fektetve --- */

.ig-fogsim__plug {
	position: absolute;
	inset: 0;
	background: rgba(6, 6, 9, 0.9);
	transition: opacity 520ms ease;
}

.ig-fogsim__plug.is-done { opacity: 0; pointer-events: none; }

.ig-fplug__svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ig-fplug__conn {
	cursor: grab;
	transition: filter 160ms ease;
}

.ig-fplug__conn.is-drag { cursor: grabbing; }

.ig-fplug__conn.is-near,
.ig-fplug__conn:focus-visible {
	filter: drop-shadow(0 0 12px rgba(232, 255, 0, 0.85));
	outline: none;
}

.ig-fplug__cable {
	fill: none;
	stroke: #1a1a20;
	stroke-width: 11;
	stroke-linecap: round;
}

.ig-fplug__spark {
	fill: none;
	stroke: #303038;
	stroke-width: 3;
	stroke-linecap: round;
}

.ig-fplug__led {
	fill: #2a2a33;
	transition: fill 200ms ease;
}

.ig-fplug__led.is-on {
	fill: #4ad07a;
	filter: drop-shadow(0 0 6px rgba(74, 208, 122, 0.9));
}

.ig-fplug__socket.is-target circle,
.ig-fplug__socket.is-target rect,
.ig-fplug__socket.is-target path {
	stroke: var(--ig-accent, #e8ff00);
}

.ig-fplug__brand {
	fill: #55555f;
	font-family: var(--ig-font-mono, ui-monospace, monospace);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.14em;
}

.ig-fplug__lab {
	fill: #6a6a76;
	font-family: var(--ig-font-mono, ui-monospace, monospace);
	font-size: 15px;
	letter-spacing: 0.1em;
}

.ig-fplug__tag {
	fill: #8a8a99;
	font-family: var(--ig-font-mono, ui-monospace, monospace);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-anchor: middle;
}

.ig-fplug__hint {
	position: absolute;
	top: 22px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: min(620px, calc(100% - 48px));
	padding: 14px 20px;
	border-radius: 14px;
	background: rgba(16, 16, 22, 0.94);
	box-shadow: 6px 6px 16px rgba(0, 0, 0, 0.55), -4px -4px 12px rgba(60, 60, 76, 0.2);
	text-align: center;
}

.ig-fplug__hint strong {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--ig-accent, #e8ff00);
}

.ig-fplug__hint span {
	font-size: 13.5px;
	line-height: 1.5;
	color: #b8b8c6;
}

/* --- Kis kijelzőn --- */

/*
 * Kis kijelzőn a pult NEM lebeg: egy 430 pixeles panel egy 375 széles
 * telefonon eltakarná az egész termet. Ott a terem ALÁ kerül, teljes
 * szélességben — a fizika ugyanaz, csak egymás alatt.
 */
@media (max-width: 900px) {
	.ig-fogsim__panel {
		position: static;
		width: auto;
		border-radius: 0 0 20px 20px;
		animation: none;
		transform: none;
	}

	/* Telefonon a pult a terem ALATT van — nincs mi elől eltenni. */
	.ig-fogsim__panel.is-folded { transform: none; }
	.ig-fogsim__fold { display: none; }

	.ig-fogsim__body { grid-template-columns: 58px 1fr; }
	.ig-fogsim__tube { min-height: 150px; }
	.ig-fogsim__cols { overflow: visible; }
	.ig-fogsim__clock { font-size: 24px; }
	.ig-fogsim__verdict { position: static; max-width: none; margin: 10px; font-size: 13.5px; padding: 11px 14px; }
	.ig-fogsim__specs > div { flex-basis: 44%; }
	.ig-fplug__hint { top: 10px; padding: 10px 14px; }
	.ig-fplug__hint strong { font-size: 15px; }
	.ig-fplug__hint span { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.ig-fogsim__beta-dot,
	.ig-fogsim__verdict,
	.ig-fogsim__panel { animation: none; }
	.ig-fogsim__panel,
	.ig-fogsim__fold svg { transition: none; }
	.ig-fogsim__plug { transition: none; }
	.ig-fogsim__fill,
	.ig-fogsim__tankrow i b { transition: none; }
}

/* ---------------------------------------------------------------------------
   Üzemidő — amit a katalógus nem mond meg
   --------------------------------------------------------------------------- */

.ig-fogsim__stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	margin: 10px 0;
	border-radius: 13px;
	background: rgba(255, 255, 255, 0.05);
	overflow: hidden;
}

.ig-fogsim__stats > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 9px 11px;
	background: var(--nb-dark);
}

.ig-fogsim__stats span {
	font-size: 9.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #6d6d84;
}

.ig-fogsim__stats strong {
	font-family: var(--ig-font-mono, ui-monospace, monospace);
	font-size: 15px;
	font-weight: 800;
	color: #e6e6ee;
}
/* =====================================================================
   Megszűnt termék — a lap él, de nem eladó
   =====================================================================

   Ez a doboz a vásárlási doboz HELYÉN jelenik meg, ugyanabban a sávban,
   ahol az ár és a kosár gomb lenne. Nem bocsánatkérés: a látogató azért
   jött, mert ezt a terméket kereste — a dolgunk az, hogy egy kattintással
   ott legyen az utódnál. */

.ig-gone {
	padding: 20px;
	border: 1px solid #e2e0dc;
	border-left: 4px solid #f0a53d;
	border-radius: 3px;
	background: #fdfaf5;
}

.ig-gone__head {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	color: #7a5312;
}

.ig-gone__dot {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #f0a53d;
}

.ig-gone__lead {
	margin: 0 0 9px;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ig-muted, #6b6b6b);
}

/* Az utód: egy kártya, amire rá lehet kattintani. */
.ig-gone__card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px;
	border: 1px solid #e2e0dc;
	background: #fff;
	color: var(--ig-ink, #14140f);
	text-decoration: none;
	transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.ig-gone__card:hover {
	border-color: var(--ig-ink, #14140f);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
	transform: translateY(-1px);
}

.ig-gone__thumb {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	display: block;
	overflow: hidden;
	background: #f4f3f0;
}

.ig-gone__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ig-gone__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.ig-gone__body strong {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.ig-gone__body em {
	font-family: var(--ig-font-mono, ui-monospace, monospace);
	font-size: 11.5px;
	font-style: normal;
	color: var(--ig-muted, #6b6b6b);
}

.ig-gone__go {
	margin-top: 3px;
	font-size: 12.5px;
	font-weight: 700;
	color: #7a5312;
}

.ig-gone__link {
	display: inline-block;
	padding: 10px 18px;
	border: 1px solid var(--ig-ink, #14140f);
	color: var(--ig-ink, #14140f);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: background 160ms ease, color 160ms ease;
}

.ig-gone__link:hover {
	background: var(--ig-ink, #14140f);
	color: var(--ig-paper, #fff);
}

.ig-gone__note {
	margin: 14px 0 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--ig-muted, #6b6b6b);
}

@media (prefers-reduced-motion: reduce) {
	.ig-gone__card { transition: none; }
	.ig-gone__card:hover { transform: none; }
}
/* =====================================================================
   Ragadó mini-sáv a terméklapon
   =====================================================================

   A fejléc alatt ül, és akkor csúszik be, amikor a vásárlási doboz kigördül.
   A `top` értékét JS méri a fejlécből — asztali és mobil nézetben más. A
   belépés nem egyszerű fade: a sáv lecsúszik, a kis kép „beugrik”, és egy
   olvasási csík fut az alján. Ettől lesz élő, nem csak egy újabb csík. */

.ig-stickybar {
	position: fixed;
	left: 0;
	right: 0;
	top: 80px;                       /* JS pontosítja */
	z-index: 29;                     /* a fejléc (30) alatt, minden más fölött */
	background: color-mix(in srgb, var(--ig-paper, #fff) 88%, transparent);
	backdrop-filter: blur(14px) saturate(1.4);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	border-bottom: var(--ig-stroke-bold, 2px) solid var(--ig-line, #14140f);
	transform: translateY(-110%);
	opacity: 0;
	pointer-events: none;
	transition: transform 420ms cubic-bezier(0.2, 0.9, 0.25, 1.05), opacity 240ms ease;
}

.ig-stickybar.is-on {
	transform: none;
	opacity: 1;
	pointer-events: auto;
}

.ig-stickybar__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 64px;
	padding-top: 8px;
	padding-bottom: 8px;
}

/* A kis kép: belépéskor kicsiről, enyhe elfordulásból ugrik a helyére. */
.ig-stickybar__thumb {
	flex: 0 0 auto;
	display: block;
	width: 48px;
	height: 48px;
	border: var(--ig-stroke, 1px) solid var(--ig-line, #14140f);
	background: #fff;
	overflow: hidden;
	transform: scale(0.4) rotate(-8deg);
	opacity: 0;
	transition: transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1) 120ms, opacity 200ms ease 120ms;
}

.ig-stickybar.is-on .ig-stickybar__thumb {
	transform: none;
	opacity: 1;
}

.ig-stickybar__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ig-stickybar__text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
	/* A szöveg egy hajszálnyival később úszik be, mint a sáv — rétegzett belépés. */
	transform: translateY(6px);
	opacity: 0;
	transition: transform 360ms ease 160ms, opacity 300ms ease 160ms;
}

.ig-stickybar.is-on .ig-stickybar__text { transform: none; opacity: 1; }

.ig-stickybar__name {
	font-family: var(--ig-font-display, inherit);
	font-size: 15px;
	font-weight: 800;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ig-stickybar__sku {
	font-family: var(--ig-font-mono, ui-monospace, monospace);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--ig-muted, #6b6b6b);
}

.ig-stickybar__price {
	flex: 0 0 auto;
	display: flex;
	align-items: baseline;
	gap: 8px;
	transform: translateY(6px);
	opacity: 0;
	transition: transform 360ms ease 220ms, opacity 300ms ease 220ms;
}

.ig-stickybar.is-on .ig-stickybar__price { transform: none; opacity: 1; }

.ig-stickybar__price s { font-size: 12px; color: var(--ig-muted, #6b6b6b); }

.ig-stickybar__price b {
	font-family: var(--ig-font-display, inherit);
	font-size: 20px;
	font-weight: 900;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.ig-stickybar__price small {
	font-size: 11px;
	color: var(--ig-muted, #6b6b6b);
	white-space: nowrap;
}

.ig-stickybar__form {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	transform: translateY(6px);
	opacity: 0;
	transition: transform 360ms ease 280ms, opacity 300ms ease 280ms;
}

.ig-stickybar.is-on .ig-stickybar__form { transform: none; opacity: 1; }

.ig-stickybar__qty { transform: scale(0.9); transform-origin: right center; }

.ig-stickybar__cta {
	white-space: nowrap;
	transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.ig-stickybar__cta.is-done { background: #14a04a; border-color: #14a04a; color: #fff; }

.ig-stickybar__out {
	font-size: 13px;
	font-weight: 700;
	color: var(--ig-muted, #6b6b6b);
	white-space: nowrap;
}

/* Sikeres kosárba tétel: a sáv egyet dobban. */
.ig-stickybar.is-bump { animation: ig-stickybar-bump 600ms cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes ig-stickybar-bump {
	0% { transform: none; }
	30% { transform: translateY(3px) scale(1.01); }
	100% { transform: none; }
}

/* Olvasási csík a sáv alján: mutatja, hol tartasz a lapon. */
.ig-stickybar__progress {
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 2px;
	background: var(--ig-accent, #e8ff00);
	transform: scaleX(0);
	transform-origin: left center;
	pointer-events: none;
}

/* --- Mobil: kép, ár, gomb — a név elfér alattuk, a mennyiség nem --- */
@media (max-width: 720px) {
	.ig-stickybar__inner { gap: 10px; min-height: 56px; }
	.ig-stickybar__thumb { width: 40px; height: 40px; }
	.ig-stickybar__name { font-size: 13px; }
	.ig-stickybar__sku { display: none; }
	.ig-stickybar__price b { font-size: 16px; }
	.ig-stickybar__price s,
	.ig-stickybar__price small { display: none; }
	.ig-stickybar__qty { display: none; }
	.ig-stickybar__cta { padding-left: 12px; padding-right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.ig-stickybar,
	.ig-stickybar__thumb,
	.ig-stickybar__text,
	.ig-stickybar__price,
	.ig-stickybar__form { transition: opacity 200ms ease; transform: none; }
	.ig-stickybar.is-bump { animation: none; }
}
/* =====================================================================
   Ár-eszközök: „Miért ennyi?” a terméklapon, árlista-kártya a fiókban
   ===================================================================== */

.ig-why {
	margin: 10px 0 0;
	border: 1px solid #e2e0dc;
	background: #faf9f7;
	font-size: 13px;
}

.ig-why > summary {
	padding: 9px 14px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.ig-why > summary::-webkit-details-marker { display: none; }
.ig-why > summary::before { content: "?"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px; border-radius: 50%; background: var(--ig-ink, #14140f); color: var(--ig-accent, #e8ff00); font-size: 12px; }

.ig-why__steps {
	margin: 0;
	padding: 4px 14px 10px;
	list-style: none;
	counter-reset: why;
}

.ig-why__steps li {
	display: grid;
	grid-template-columns: 150px 110px 1fr;
	gap: 10px;
	align-items: baseline;
	padding: 6px 0;
	border-top: 1px solid #ecebe7;
}

.ig-why__steps li strong { font-family: var(--ig-font-mono, ui-monospace, monospace); text-align: right; white-space: nowrap; }
.ig-why__steps li em { font-style: normal; color: var(--ig-muted, #6b6b6b); font-size: 12px; }

.ig-why__skipped { margin: 0; padding: 8px 14px; border-top: 1px solid #ecebe7; font-size: 12px; color: var(--ig-muted, #6b6b6b); }
.ig-why__skipped span { display: block; }
.ig-why__note { margin: 0; padding: 6px 14px 10px; font-size: 11.5px; color: var(--ig-muted, #6b6b6b); }

.ig-pricelist__form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ig-pricelist__form select { padding: 9px 12px; border: 2px solid var(--ig-ink, #14140f); background: #fff; }

@media (max-width: 640px) {
	.ig-why__steps li { grid-template-columns: 1fr; gap: 2px; }
	.ig-why__steps li strong { text-align: left; }
}
/* =====================================================================
   Fiók: e-mail-megerősítés figyelmeztető; pénztár: sikertelen fizetés
   ===================================================================== */

.ig-account-verify {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin: 0 0 18px;
	padding: 12px 16px;
	border: 2px solid var(--ig-ink, #14140f);
	background: var(--ig-accent, #e8ff00);
	font-size: 14px;
}

.ig-account-verify strong { margin-right: 4px; }
.ig-account-verify form { margin-left: auto; }

.ig-checkout-payfail {
	margin: 0 0 18px;
	padding: 14px 18px;
	border-left: 5px solid #b32d2e;
	background: #fff4f3;
	color: #5a1a1a;
	font-size: 14.5px;
}

.ig-checkout-payfail strong { display: block; margin-bottom: 4px; }

/* Pénztár összesítő: „+ szállítási díj” jelzés, ha a díj még nincs meg */
.ig-summary__grandnote {
	display: block;
	margin-bottom: 2px;
	font-size: 11.5px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--ig-muted, #6b6b6b);
}