/* ============================================================
   Ikra102 — utility-строка, шапка, мегаменю, мобильное меню
   ============================================================ */

/* ------------------------------------------------------------
   1. Utility-строка
   ------------------------------------------------------------ */

.ikra-utility {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	height: 40px;
	padding: 0 var(--gutter);
	background: var(--mint);
	font: 400 12px/1 var(--font-mono);
	color: var(--ink-2);
}

.ikra-utility__right {
	display: flex;
	gap: 22px;
	align-items: center;
}

.ikra-utility__accent {
	color: var(--accent);
}

/* ------------------------------------------------------------
   2. Шапка
   ------------------------------------------------------------ */

.ikra-header {
	position: relative;
	z-index: 60;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}

.ikra-header__inner {
	display: flex;
	align-items: center;
	gap: 26px;
	padding: 18px var(--gutter);
}

.ikra-logo {
	font: 700 22px/1 var(--font-display);
	letter-spacing: -.02em;
	color: var(--ink);
	white-space: nowrap;
}

.ikra-logo span {
	color: var(--accent);
}

.ikra-logo--sm {
	font-size: 20px;
}

.ikra-logo--footer {
	color: var(--dark-ink);
	font-size: 20px;
}

.ikra-logo--footer span {
	color: var(--accent-light);
}

/* Пилюля «Каталог · N» */
.ikra-catalog-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 13px 18px;
	min-height: var(--tap);
	background: var(--ink);
	color: var(--bg);
	border-radius: var(--r-pill);
	font: 600 13px/1 var(--font-text);
	white-space: nowrap;
	transition: filter var(--t);
}

.ikra-catalog-btn:hover {
	filter: brightness(1.35);
	opacity: 1;
}

/* Поиск */
.ikra-search {
	flex: 1;
	position: relative;
	min-width: 0;
}

.ikra-search__form {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 20px;
	height: var(--tap);
	background: var(--surface);
	border: 1px solid var(--line-3);
	border-radius: var(--r-pill);
	transition: border-color var(--t);
}

.ikra-search__form:focus-within {
	border-color: var(--accent);
}

.ikra-search__input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	font: 400 14px/1 var(--font-text);
	color: var(--ink);
	padding: 0;
}

.ikra-search__input:focus {
	outline: none;
}

.ikra-search__input::placeholder {
	color: var(--placeholder);
}

.ikra-search__submit {
	font: 400 12px/1 var(--font-mono);
	color: var(--accent);
	white-space: nowrap;
}

/* Телефон */
.ikra-phone {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 3px;
	white-space: nowrap;
}

.ikra-phone__number {
	font: 600 15px/1.2 var(--font-text);
	color: var(--ink);
}

.ikra-phone__note {
	font: 400 11px/1.2 var(--font-mono);
	color: var(--muted-2);
}

/* Пилюля корзины */
.ikra-header__cart {
	position: relative;
}

.ikra-cart-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 13px 20px;
	min-height: var(--tap);
	background: var(--accent);
	color: #fff;
	border-radius: var(--r-pill);
	font: 600 13px/1 var(--font-text);
	white-space: nowrap;
	transition: box-shadow var(--t), filter var(--t);
}

.ikra-cart-btn:hover {
	opacity: 1;
	filter: brightness(1.05);
}

.ikra-cart-btn.is-open,
.ikra-cart-btn.is-flash {
	box-shadow: 0 0 0 4px rgba(193, 80, 46, .18);
}

/* Спейсер для страниц без поиска */
.ikra-header__spacer {
	flex: 1;
}

/* Упрощённая шапка оформления */
.ikra-header--checkout .ikra-header__inner {
	justify-content: space-between;
}

.ikra-header__help {
	font: 400 13px/1.4 var(--font-text);
	color: var(--muted);
}

.ikra-header__help strong {
	font-weight: 600;
	color: var(--ink);
}

/* ------------------------------------------------------------
   3. Мегаменю каталога
   ------------------------------------------------------------ */

.ikra-mega {
	position: absolute;
	left: var(--gutter);
	right: var(--gutter);
	top: calc(100% + 10px);
	z-index: 70;
	background: var(--surface);
	border: 1px solid var(--line-2);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-minicart);
	padding: 28px;
	display: none;
}

.ikra-mega.is-open {
	display: block;
}

.ikra-mega__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px 28px;
}

.ikra-mega__link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 13px 4px;
	border-bottom: 1px solid var(--line-4);
	font: 600 15px/1.3 var(--font-text);
	color: var(--ink);
}

.ikra-mega__count {
	font: 400 12px/1 var(--font-mono);
	color: var(--muted-2);
}

.ikra-mega__foot {
	margin-top: 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--line-4);
}

.ikra-mega__note {
	font: 400 13px/1.5 var(--font-text);
	color: var(--muted);
}

/* ------------------------------------------------------------
   4. Мобильная шапка
   ------------------------------------------------------------ */

.ikra-mheader {
	display: none;
	align-items: center;
	gap: 10px;
	padding: 14px var(--gutter-mobile);
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 0;
	z-index: 60;
}

.ikra-icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--tap);
	height: var(--tap);
	flex: 0 0 var(--tap);
	box-sizing: border-box;
	border: 1px solid var(--line-3);
	border-radius: var(--r-pill);
	color: var(--ink);
	background: var(--surface);
	transition: border-color var(--t);
}

.ikra-icon-btn:hover {
	border-color: var(--ink);
	opacity: 1;
}

.ikra-icon-btn--accent {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
	font: 600 13px/1 var(--font-text);
}

.ikra-mheader__title {
	flex: 1;
	min-width: 0;
	font: 600 17px/1.2 var(--font-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ikra-mheader__title--muted {
	font-size: 15px;
	color: var(--muted);
}

/* ------------------------------------------------------------
   5. Мобильное меню (полноэкранная панель)
   ------------------------------------------------------------ */

.ikra-mmenu {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: var(--bg);
	display: flex;
	flex-direction: column;
	transform: translateX(-100%);
	transition: transform 200ms ease;
	overflow-y: auto;
	visibility: hidden;
}

.ikra-mmenu.is-open {
	transform: translateX(0);
	visibility: visible;
}

.ikra-mmenu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--line);
	background: var(--surface);
	position: sticky;
	top: 0;
}

.ikra-mmenu__body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ikra-mmenu__cats {
	display: flex;
	flex-direction: column;
	margin-top: 6px;
}

.ikra-mmenu__cat {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 16px 4px;
	min-height: var(--tap);
	border-bottom: 1px solid var(--line-4);
	font: 600 19px/1.2 var(--font-text);
}

.ikra-mmenu__count {
	font: 400 12px/1 var(--font-mono);
	color: var(--muted-2);
}

.ikra-mmenu__links {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 10px;
	font: 400 15px/1 var(--font-text);
	color: var(--ink-3);
}

.ikra-mmenu__links a {
	padding: 14px 4px;
	min-height: var(--tap);
	display: flex;
	align-items: center;
}

.ikra-mmenu__contact {
	margin-top: 10px;
	padding: 20px;
	background: var(--mint);
	border-radius: var(--r-lg);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ikra-mmenu__phone {
	font: 700 20px/1.2 var(--font-display);
}

.ikra-mmenu__hours {
	font: 400 13px/1.5 var(--font-text);
	color: var(--ink-3);
}

.ikra-mmenu__actions {
	display: flex;
	gap: 8px;
}

.ikra-mmenu__actions .ikra-btn {
	flex: 1;
	padding: 14px;
	font-size: 13px;
}

/* Затемнение под панелями */
.ikra-scrim {
	position: fixed;
	inset: 0;
	z-index: 150;
	background: var(--overlay);
	opacity: 0;
	visibility: hidden;
	transition: opacity 200ms ease, visibility 200ms ease;
}

.ikra-scrim.is-open {
	opacity: 1;
	visibility: visible;
}