/* ==========================================================================
   Header (plan 01) — boards Header.dc.html, MegaMenu.dc.html
   ========================================================================== */

/* Visually hidden but read by screen readers (Porto's .screen-reader-text is display:none). */
.mk-sr {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Header rows: 1280 px of CONTENT plus 24 px gutters outside it (Header.dc.html is content-box: content x 80–1360 at 1440),
   i.e. a 1328 px border-box. The mega panel grid (1280) lines up with the same content edges. */
#header .header-row { max-width: 1328px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
@media (max-width: 575px) { #header .header-row { padding-left: 16px; padding-right: 16px; } }

/* ---- Top bar (#e3dbd4 / graphite come from Theme Options, plan 00 task 3) ---- */
/* Height: 32 px at desktop (8 + 15 + 8 + 1 px line), 38 px below 992 px (MobileHome board, taller line height; set in the 991 px block).
   Porto's dynamic CSS gives .header-top > .container-fluid min-height 42 px; the 24 px link targets still fit. */
#header .header-top { font-size: 13px; border-bottom: 1px solid #d9d0c9; }
#header .header-top > .header-row { min-height: 31px; padding-top: 0; padding-bottom: 0; }
#header .header-top .header-left { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
#header .header-top .header-col > * { margin-left: 0; } /* Porto spaces header-builder items with margins; the 14 px flex gap is the only spacing */
#header .header-top .top-menu-phone { margin-left: 0; } /* header builder custom CSS adds 20px */
#header .header-top .top-menu-phone-link { color: var(--mk-ink); font-weight: 500; text-decoration: none; }
#header .header-top .top-menu-phone-link:hover,
#header .header-top .top-menu-phone-link:focus-visible { color: var(--mk-red); }
#header .header-top .mk-topbar-hours { color: var(--mk-ink-2); font-weight: 400; } /* .header-top is 600 from Theme Options */
#header .mk-topbar-account { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; color: var(--mk-ink); font-weight: 400; text-decoration: none; }
#header .mk-topbar-account:hover,
#header .mk-topbar-account:focus-visible { color: var(--mk-red); }
#header .mk-topbar-account svg { flex: 0 0 14px; }
/* Narrow phones: one row (phone · account). The hours are repeated at the bottom of the mobile menu panel. */
@media (max-width: 384px) {
	#header .header-top .mk-topbar-hours { display: none; }
}

/* ---- Main row (Header.dc.html) ---- */
#header .header-main { border-bottom: 1px solid var(--mk-line); }
/* Row height 93 px at desktop = 92 px content (64 px logo + 2 × 14 px) + 1 px line; 71 px below 992 px (50 px logo + 2 × 10).
   The vertical space is a min-height on the row instead of padding, so the left column (logo + menu) can stretch to the
   full row height: the top-level links fill it, and their hover area touches the mega panel (top: 100% of .header-main)
   with no gap. Porto's 15 px column padding and 30 px link padding (Theme Options) are removed. */
#header .header-main > .header-row { min-height: 92px; }
#header .header-main .header-left,
#header .header-main .header-right { padding-top: 0; padding-bottom: 0; }
#header .header-main .header-left { gap: 28px; align-self: stretch; }
#header .header-main .header-right { flex: 1 1 200px; justify-content: flex-end; gap: 12px; }
/* Logo → first label = 28 px (the row gap only): no logo margin, no Porto ul margin,
   and the first link's 13 px side padding is pulled back so the label itself starts 28 px after the logo. */
#header .header-main .logo { margin: 0; }
@media (min-width: 992px) {
	#header .header-main .main-menu { align-self: stretch; margin-left: -13px; }
	#header .header-main .main-menu > li.menu-item { display: flex; }
	#header .header-main .main-menu > li.menu-item > a { display: flex; align-items: center; padding-top: 0; padding-bottom: 0; }
}
@media (min-width: 1200px) {
	#header .header-main .header-right { padding-left: 28px; } /* same 28 px as the board's row gap */
}
/* Sticky (.header-main becomes position: fixed): keep the compact 64 px bar (63 + 1 px line). */
#header.sticky-header .header-main.sticky > .header-row { min-height: 63px; }
#header .header-main .separator { display: none; }

/* Menu: graphite labels; active = red label + 2 px red underline right under the text (not at the row bottom). */
#header .main-menu > li.menu-item > a { text-transform: none; letter-spacing: 0; }
#header .main-menu > li.menu-item.active > a,
#header .main-menu > li.menu-item > a:hover,
#header .main-menu > li.mk-open > a { color: var(--mk-red); }
#header .main-menu > li.menu-item.active > a {
	box-shadow: none;
	text-decoration: underline;
	text-decoration-color: var(--mk-red);
	text-decoration-thickness: 2px;
	text-underline-offset: 8px;
}

/* Search: Porto "advanced" layout restyled as the board's 44 px field (4 px radius) — a plain input, no icon
   (Header.dc.html). The form submits on Enter; Porto's magnifier button is not drawn. */
/* display:block — Porto makes .searchform inline-block, which shrink-wraps to the input's intrinsic width (~213 px)
   instead of filling the 280/180 px .searchform-popup flex item (the old css-code rule that set it was removed). */
#header .advanced-search-layout .searchform { display: block; position: static; padding: 0; border: 0; background: transparent; box-shadow: none; }
#header .advanced-search-layout .searchform-fields {
	display: flex; align-items: center; height: 44px; box-sizing: border-box;
	border: 1px solid var(--mk-line); border-radius: var(--mk-radius); background: var(--mk-paper);
}
/* One focus ring around the whole field (base.css would draw it around the inner input only). */
#header .advanced-search-layout .searchform-fields:focus-within {
	border-color: var(--mk-ink);
	outline: 3px solid var(--mk-ink); outline-offset: 2px; box-shadow: 0 0 0 5px #fff;
}
#header.header-builder .advanced-search-layout input:focus,
#header.header-builder .advanced-search-layout input:focus-visible { outline: none !important; box-shadow: none; }
#header .advanced-search-layout .searchform-fields .text { flex: 1 1 auto; min-width: 0; }
#header .advanced-search-layout .searchform-fields .button-wrap { display: none; }
#header.header-builder .advanced-search-layout input {
	width: 100%; max-width: none; height: 42px; min-height: 0; padding: 0 14px;
	border: 0; border-radius: 0; background: transparent; box-shadow: none;
	font-size: 14px; font-style: normal; color: var(--mk-ink); /* Porto sets italic; the board's field is upright */
}
#header.header-builder .advanced-search-layout input::placeholder { color: var(--mk-ink-2); font-style: normal; opacity: 1; }
@media (min-width: 992px) {
	#header .searchform-popup.advanced-search-layout { flex: 0 1 280px; min-width: 0; }
	#header .advanced-search-layout .search-toggle { display: none; }
}

/* Icons: 24 px line icons from the board drawn with CSS masks over Porto's icon-font <i> elements. */
#header .my-account,
#header .my-wishlist {
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; /* keep 44×44 targets in a tight row */
	width: 44px; height: 44px; padding: 0; margin: 0; font-size: 0;
}
#mini-cart { flex-shrink: 0; }
#header .header-main #mini-cart { margin-left: 0; } /* spacing comes from the row gap */
#mini-cart .cart-head { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; }
/* No dropdown chevron next to the cart icon (Porto's .minicart-arrow-alt draws it as .cart-head::after; also shown on hover).
   #header raises specificity above Porto's html.no-touch #mini-cart:hover .cart-head:after { display: block }. */
#header #mini-cart .cart-head::after { content: none; display: none; }
#mini-cart .cart-icon { position: relative; display: block; width: 24px; height: 24px; }
/* «0 елемент» stays readable by screen readers (the cart's accessible name), hidden visually.
   Porto's #mini-cart.minicart-arrow-alt .cart-items-text sets display:none, which hides it from assistive tech too. */
#header #mini-cart .cart-items-text {
	display: block; position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
#header .my-account i,
#header .my-wishlist i,
#header .mobile-toggle i,
#mini-cart .minicart-icon {
	display: block; width: 24px; height: 24px; font-size: 0; line-height: 0;
	background-color: var(--mk-ink);
	-webkit-mask: var(--mk-icon) center / 24px 24px no-repeat;
	mask: var(--mk-icon) center / 24px 24px no-repeat;
}
#header .my-account i::before,
#header .my-wishlist i::before,
#header .mobile-toggle i::before,
#mini-cart .minicart-icon::before { content: none; }
#header .my-account i { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E"); }
#header .my-wishlist i { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E"); }
#mini-cart .minicart-icon { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Cpath d='M5 8h14l-1.2 11.2a1 1 0 0 1-1 .8H7.2a1 1 0 0 1-1-.8z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E"); }
#header .mobile-toggle i { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E"); }
#header .mobile-toggle { border-radius: 0; } /* square-corners rule */

/* Cart counter: round red badge (the round shape is an allowed exception to square corners). */
#mini-cart .cart-items {
	--porto-badge-size: 18px;
	top: -6px; right: -8px; width: auto; min-width: 18px; height: 18px; padding: 0 4px;
	border-radius: 9px; background-color: var(--mk-red); color: #fff; box-shadow: none;
	font-size: 11px; font-weight: 700; line-height: 18px;
}

/* 992–1199 px: the field keeps its 180 px target; the room comes from the menu and column gaps. */
@media (min-width: 992px) and (max-width: 1199px) {
	#header .searchform-popup.advanced-search-layout { flex-basis: 180px; }
	#header .header-main .header-left { gap: 12px; }
	#header .header-main .main-menu { margin-left: 0; }
	#header .main-menu > li.menu-item { margin-right: 0; }
	#header .main-menu > li.menu-item > a { padding-left: 6px; padding-right: 6px; }
	#header .header-main .header-right { gap: 0; padding-left: 12px; }
	#header.header-builder .advanced-search-layout input { padding-left: 12px; }
}
@media (min-width: 992px) and (max-width: 1023px) {
	#header .main-menu > li.menu-item > a { padding-left: 4px; padding-right: 4px; }
}

/* Below 992 px: burger · logo · wishlist · cart (MobileHome.dc.html). */
@media (max-width: 991px) {
	#header .mobile-toggle {
		display: inline-flex; align-items: center; justify-content: center;
		width: 44px; height: 44px; padding: 0; margin: 0; font-size: 0; background: transparent;
	}
	#header .searchform-popup,
	#header .header-main .my-account { display: none !important; }
	#header .header-main .header-row { gap: 8px; }
	#header .header-top > .header-row { min-height: 37px; }  /* top bar 38 px with its line */
	#header .header-main > .header-row { min-height: 70px; } /* main row 71 px with its line */
	/* Porto lets header columns wrap: the burger and the logo would stack on two lines. */
	#header .header-main .header-col { flex-wrap: nowrap; }
	#header .header-main .header-left { flex: 0 0 auto; gap: 8px; }
	#header .header-main .header-right { gap: 0; }
	#header .mk-mega { display: none; } /* desktop-only mega panel (the mobile panel lists the catalog) */
}

/* ---- Mega menu «Календарі» (MegaMenu.dc.html, desktop) ---- */
#header .header-main { position: relative; z-index: 1001; }
#header .header-main .header-row,
#header .header-main .header-col,
#header .main-menu,
#header .main-menu > li.mk-has-mega { position: static; }

#header .mk-mega {
	position: absolute; left: 0; right: 0; top: 100%; z-index: 1002;
	visibility: hidden; opacity: 0; transition: opacity .15s, visibility .15s;
	background: #fff; border-top: 2px solid var(--mk-red); border-bottom: 1px solid var(--mk-line);
	box-shadow: 0 12px 24px rgba(48, 42, 40, .10);
	font-size: 15px; line-height: 1.5; font-weight: 400; color: var(--mk-ink); text-align: left; text-transform: none;
}
#header .main-menu > li.mk-has-mega.mk-open > .mk-mega { visibility: visible; opacity: 1; }

/* resets via :where() keep specificity at #header .mk-mega, so the component rules below win */
#header .mk-mega :where(ul, li) { float: none; margin: 0; padding: 0; list-style: none; position: static; }
#header .mk-mega :where(a) { line-height: inherit; letter-spacing: 0; text-transform: none; text-decoration: none; }
#header .mk-mega :where(p) { margin: 0; }

#header .mk-mega__grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 380px; }

/* pane 1 — sections */
#header .mk-mega__cats { padding: 16px 0; border-right: 1px solid var(--mk-line); }
#header .mk-mega__cat {
	display: flex; justify-content: space-between; align-items: center; gap: 8px;
	min-height: 48px; padding: 0 20px 0 24px; color: var(--mk-ink); font-weight: 500;
}
#header .mk-mega__cat:hover, #header .mk-mega__cat.is-active { background: var(--mk-paper); color: var(--mk-ink); }
#header .mk-mega__cat.is-active { font-weight: 700; box-shadow: inset 3px 0 0 var(--mk-red); }
#header .mk-mega__cat-meta { display: flex; gap: 10px; align-items: center; font-weight: 400; font-size: 12px; color: var(--mk-ink-2); }
#header .mk-mega__arrow { min-width: 6px; font-size: 16px; }
#header .mk-mega__cat.is-active .mk-mega__arrow { color: var(--mk-red); }

/* panes 2 + 3 */
#header .mk-mega__pane { display: grid; grid-template-columns: minmax(0, 1fr) 340px; }
#header .mk-mega__pane[hidden] { display: none; }
#header .mk-mega__subs { padding: 24px 32px; }
#header .mk-mega__title { margin-bottom: 4px; font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--mk-ink); }
#header .mk-mega__format { margin-bottom: 16px; font-size: 13px; color: var(--mk-ink-2); }
#header .mk-mega__sublist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
#header .mk-mega__sub {
	display: flex; justify-content: space-between; align-items: center; gap: 8px;
	min-height: 44px; padding: 0 12px; border: 1px solid var(--mk-line); color: var(--mk-ink);
}
#header .mk-mega__sub:hover, #header .mk-mega__sub:focus-visible { border-color: var(--mk-ink); color: var(--mk-ink); }
#header .mk-mega__sub-text { display: flex; flex-direction: column; line-height: 1.3; }
#header .mk-mega__sub-name { font-weight: 500; }
#header .mk-mega__sub-meta, #header .mk-mega__sub-count { font-size: 12px; color: var(--mk-ink-2); }
#header .mk-mega__empty { margin-bottom: 16px; max-width: 420px; color: var(--mk-ink-2); }
#header .mk-mega__all { display: inline-flex; align-items: center; margin-top: 18px; font-weight: 500; color: var(--mk-red); }
#header .mk-mega__all:hover { color: var(--mk-red-700); text-decoration: underline; }
#header .mk-mega__scheme {
	display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center;
	padding: 24px; background: var(--mk-paper); border-left: 1px solid var(--mk-line); text-align: center;
}
#header .mk-mega__icon { width: 200px; height: 200px; }
#header .mk-mega__scheme-name { font-weight: 700; font-size: 17px; color: var(--mk-ink); }
#header .mk-mega__scheme .mk-mega__format { margin-bottom: 0; }
#header .mk-mega__go.mk-btn { height: 44px; color: #fff; }

/* ---- Mobile off-canvas panel (MegaMenu.dc.html «МОБІЛЬНИЙ») ---- */
#side-nav-panel {
	width: 100%; max-width: 390px; padding: 0; overflow: hidden;
	display: flex; flex-direction: column;
	transform: translateX(-100%); background: var(--mk-ink); color: #fff; font-size: 15px; line-height: 1.4;
	/* closed panel is out of the Tab order and the a11y tree; visibility flips only after the slide-out ends */
	visibility: hidden; transition: transform .3s, visibility 0s linear .3s;
}
html.panel-opened #side-nav-panel { transform: translateX(0); visibility: visible; transition-delay: 0s; }
html.panel-opened .side-nav-panel-close { display: none !important; } /* our own × lives in the panel header */
#side-nav-panel > .menu-wrap { flex: 1 1 auto; min-height: 0; display: flex; padding-top: 0; }
#side-nav-panel .mk-mnav { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

#side-nav-panel .mk-mnav__head { display: flex; justify-content: space-between; align-items: center; padding: 6px 4px 6px 16px; border-bottom: 1px solid #4a4240; }
#side-nav-panel .mk-mnav__title { font-weight: 700; font-size: 17px; }
#side-nav-panel .mk-mnav__close { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }

#side-nav-panel .mk-mnav__search { margin: 0; padding: 12px 16px; border-bottom: 1px solid #4a4240; }
#side-nav-panel .mk-mnav__search input[type="search"] {
	width: 100%; height: 44px; min-height: 44px; box-sizing: border-box; padding: 0 12px;
	border: 0; border-radius: 0; background: #fff; color: var(--mk-ink); font: inherit; font-size: 14px;
}

#side-nav-panel .mk-mnav__nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#side-nav-panel .mk-mnav__link,
#side-nav-panel .mk-mnav__btn,
#side-nav-panel .mk-mnav__row {
	display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; box-sizing: border-box;
	min-height: 52px; padding: 0 16px; margin: 0; border: 0; border-bottom: 1px solid #4a4240; border-radius: 0;
	background: transparent; color: #fff; font: inherit; font-weight: 500; text-align: left; text-decoration: none; text-transform: none; cursor: pointer;
}
#side-nav-panel .mk-mnav__link:hover,
#side-nav-panel .mk-mnav__btn:hover { background: #3d3532; color: #fff; }
/* red underline = current section (as on desktop); the expanded state only gets the #3d3532 background */
#side-nav-panel .mk-mnav__link.is-current .mk-mnav__label,
#side-nav-panel .mk-mnav__btn--l1.is-current .mk-mnav__label { box-shadow: inset 0 -2px 0 var(--mk-red); }
#side-nav-panel .mk-mnav__btn--l1[aria-expanded="true"],
#side-nav-panel .mk-mnav__panel { background: #3d3532; }
#side-nav-panel .mk-mnav__btn--l2,
#side-nav-panel .mk-mnav__link--l2 {
	min-height: 48px; padding: 0 16px 0 28px; border-bottom: 0; border-top: 1px solid #4a4240; font-weight: 400;
}
#side-nav-panel .mk-mnav__panel { border-bottom: 1px solid #4a4240; }
#side-nav-panel .mk-mnav__count { margin-left: 4px; font-size: 12px; color: #c9bfb8; }
#side-nav-panel .mk-mnav__scheme {
	display: flex; gap: 12px; align-items: center; margin: 0 16px 8px 28px; padding: 10px;
	background: var(--mk-paper); color: var(--mk-ink); font-size: 13px; line-height: 1.4;
}
#side-nav-panel .mk-mnav__scheme-icon { flex: 0 0 64px; width: 64px; height: 64px; }
#side-nav-panel .mk-mnav__link--l3 {
	min-height: 44px; padding: 0 16px 0 44px; border-bottom: 0; border-top: 1px solid #463e3b;
	color: var(--mk-line); font-size: 14px; font-weight: 400;
}
#side-nav-panel .mk-mnav__link--l3.mk-mnav__link--all { color: #fff; font-weight: 500; }
#side-nav-panel .mk-mnav [hidden] { display: none !important; }

#side-nav-panel .mk-mnav__foot { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-top: 1px solid #4a4240; }
#side-nav-panel .mk-mnav__phone { color: #fff; font-weight: 700; font-size: 17px; text-decoration: none; }
#side-nav-panel .mk-mnav__hours { color: #c9bfb8; font-size: 13px; }

/* the global graphite focus ring is invisible on graphite — use white inside the panel */
#side-nav-panel a:focus-visible,
#side-nav-panel button:focus-visible,
#side-nav-panel input:focus-visible { outline: 3px solid #fff !important; outline-offset: -3px; box-shadow: none; }

/* Porto pushes the page 260 px to the right while its panel is open; ours covers the full width,
   so the push only adds horizontal scroll (620 px wide document at 360 px). Keep the page in place. */
html.panel-opened .page-wrapper,
html.panel-opened #header.sticky-header .header-main.sticky { left: 0; }