/* ============================================================
 * SMILE HUNTER — custom header
 * Замінює Woodmart Header Builder. Підключається у functions.php
 * на ALL pages (зразу після brand.css).
 * ============================================================ */

/* === HEADER ===
 * Force-show на ВСІХ сторінках. Woodmart parent / wpscumсня може ставити
 * margin-top: -50px на header.cart page (WC overlay styles) — перебиваємо
 * жорстко з !important + display/visibility forced.
 */
html body header.sh-header,
html body .website-wrapper > header.sh-header,
html body .website-wrapper header.sh-header {
	background: var(--sh-floral) !important;
	border-bottom: 1px solid var(--sh-timber) !important;
	width: 100% !important;
	position: relative !important;
	z-index: 100 !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	margin: 0 !important;
	padding: 0 !important;
	transform: none !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
}
/* Header inner — на повну ширину viewport (без max-width).
 * Grid 1fr auto 1fr — бічні колонки однакової flex-ширини, центр займає
 * стільки скільки потребує content (логотип) і ВИГЛЯДАЄ ПО ЦЕНТРУ viewport
 * незалежно від кількості елементів у бічних колонках.
 */
.sh-header-inner {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0 12px;
	min-height: 60px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 12px;
}
@media (min-width: 700px)  { .sh-header-inner { padding: 0 20px; } }
@media (min-width: 1024px) { .sh-header-inner { padding: 0 40px; min-height: 72px; } }

.sh-header-left,
.sh-header-right {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}
.sh-header-left { justify-content: flex-start; }
.sh-header-right { justify-content: flex-end; gap: 16px; }

/* === LOGO === */
.sh-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none !important;
	color: var(--sh-ink);
	line-height: 1;
	max-width: 100%;
}
.sh-logo img {
	display: block;
	height: 36px;
	width: auto;
	max-width: 180px;
	object-fit: contain;
}
@media (min-width: 1024px) {
	.sh-logo img { height: 44px; max-width: 240px; }
}
.sh-logo-text {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

/* === BURGER (mobile only) — без фону за замовч., тільки на hover (subtle) === */
.sh-burger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	padding: 0 !important;
	cursor: pointer;
	color: var(--sh-ink) !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	transition: background-color .15s;
}
.sh-burger:hover {
	background: transparent !important;
	color: var(--sh-ebony) !important;
}
.sh-burger svg { width: 24px; height: 24px; }
/* Адаптивне згортання меню (вузькі десктопи).
 * Замість раннього бургера ховаємо по черзі менш важливі пункти,
 * а бургер вмикаємо лише <1150px. Пріоритети (класи ставить functions.php
 * через wp_nav_menu_objects → wmc_nav_collapse_priorities):
 *   sh-nav-prio-1 = мерч       — ховається першим  (<1590px)
 *   sh-nav-prio-2 = партнерам  — другим            (<1490px)
 *   sh-nav-prio-3 = про нас    — третім            (<1300px)
 * Ядро (чищення/ополіскування/догляд/набори/контакти) живе до 1150px.
 * Пороги пораховані за реальними ширинами Montserrat 500 13px (headless-замір)
 * проти центрованого лого ~193px + паддінги 40px + grid-гепи, ПЛЮС +30px
 * запасу на кожен (на проді "партнерам" торкався лого — фідбек 06.2026). */
@media (min-width: 1150px) {
	.sh-burger { display: none; }
}

/* === DESKTOP NAV === */
.sh-nav {
	display: none;
}
@media (min-width: 1150px) {
	.sh-nav { display: flex; }
}
@media (max-width: 1589px) { .sh-nav .sh-nav-prio-1 { display: none; } }
@media (max-width: 1489px) { .sh-nav .sh-nav-prio-2 { display: none; } }
@media (max-width: 1299px) { .sh-nav .sh-nav-prio-3 { display: none; } }
.sh-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 28px;
	align-items: center;
}
.sh-nav-list a { white-space: nowrap; }
/* Компактний режим: повне меню (8 пунктів, 14px/28px gap) вміщується лише
 * від ~1810px, тому до цієї межі — 13px + gap 18px. */
@media (min-width: 1150px) and (max-width: 1809px) {
	.sh-nav-list { gap: 18px; }
	.sh-nav-list a { font-size: 13px; }
}
.sh-nav-list li { margin: 0; padding: 0; list-style: none; }
.sh-nav-list a {
	color: var(--sh-ink) !important;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none !important;
	text-transform: lowercase;
	letter-spacing: 0.01em;
	transition: text-shadow .15s;
	text-shadow: 0 0 0 transparent;
}
/* Stroke-shadow trick — fake bold без зсуву ширини */
.sh-nav-list a:hover,
.sh-nav-list .current-menu-item > a,
.sh-nav-list .current-menu-parent > a {
	text-shadow: 0.4px 0 0 currentColor, -0.4px 0 0 currentColor;
}

/* === TOOLS (right side) === */
.sh-tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	min-width: 40px;   /* не стискати: flex-батько інакше тисне до ~22px (тач-таргет) */
	flex-shrink: 0;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	padding: 0 !important;
	cursor: pointer;
	color: var(--sh-ink) !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	text-decoration: none !important;
	transition: color .15s;
	position: relative;
}
.sh-tool:hover {
	background: transparent !important;
	color: var(--sh-ebony) !important;
}
.sh-tool svg { width: 22px; height: 22px; }

/* На вузьких mobile (<360px) ховаємо search/account, лишаємо тільки cart */
/* мобайл: 3 іконки (152px) не вміщались у бічну колонку (~104px на 390px)
 * і налазили на центроване лого. Зменшуємо лого/іконки/відступи,
 * а пошук на вузьких екранах ховаємо — він доступний з бургер-меню. */
@media (max-width: 1023px) {
	.sh-logo img { height: 30px; max-width: 136px; }
	.sh-header-right { gap: 4px; }
	.sh-header-inner { padding: 0 10px; }
}
@media (max-width: 480px) {
	.sh-tool-search { display: none; }
}
@media (max-width: 360px) {
	.sh-tool-account { display: none; }
}

/* Cart badge */
.sh-cart-count {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	background: var(--sh-lion);
	color: var(--sh-ink); /* floral на lion = 2.96:1; ink на lion = 5.5:1 */
	font-size: 10px;
	font-weight: 700;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	border: 2px solid var(--sh-floral);
	box-sizing: border-box;
}
.sh-cart-count:not(.is-active) { display: none; }

/* === MOBILE DRAWER === */
.sh-mobile-drawer {
	position: fixed;
	inset: 0;
	z-index: 9999;
	visibility: hidden;
	pointer-events: none;
}
.sh-mobile-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}
.sh-mobile-drawer-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(26, 26, 26, 0.4);
	opacity: 0;
	transition: opacity .25s ease;
}
.sh-mobile-drawer.is-open .sh-mobile-drawer-backdrop {
	opacity: 1;
}
.sh-mobile-drawer-panel {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: min(86%, 360px);
	background: var(--sh-floral);
	display: flex;
	flex-direction: column;
	transform: translateX(-100%);
	transition: transform .3s cubic-bezier(.2, .8, .2, 1);
	box-shadow: 4px 0 24px rgba(26, 26, 26, .08);
}
.sh-mobile-drawer.is-open .sh-mobile-drawer-panel {
	transform: translateX(0);
}
.sh-mobile-drawer-header {
	display: flex;
	justify-content: flex-end;
	padding: 14px 14px 8px;
}
.sh-drawer-close {
	width: 40px;
	height: 40px;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	padding: 0 !important;
	cursor: pointer;
	color: var(--sh-ink) !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	transition: color .15s;
}
.sh-drawer-close:hover {
	background: transparent !important;
	color: var(--sh-ebony) !important;
}
.sh-drawer-close svg { width: 22px; height: 22px; }

.sh-drawer-search {
	padding: 0 18px 18px;
	position: relative;
	box-sizing: border-box;
}
.sh-drawer-search input[type="search"] {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	border: 1.5px solid var(--sh-timber) !important;
	background: white url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='1.7'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") no-repeat 16px center !important;
	background-size: 18px 18px !important;
	padding: 13px 18px 13px 46px !important;
	border-radius: 999px !important;
	font-size: 14px !important;
	color: var(--sh-ink) !important;
	outline: none !important;
	box-shadow: none !important;
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 500 !important;
	text-transform: lowercase !important;
	min-width: 0 !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: none !important; /* instant border-color change */
}
.sh-drawer-search input[type="search"]:focus { border-color: var(--sh-ebony) !important; }
.sh-drawer-search input::placeholder {
	color: #6B6B6B !important;
	text-transform: lowercase !important;
	font-weight: 400 !important;
}

.sh-drawer-nav {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 4px 0 18px;
}
.sh-drawer-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.sh-drawer-nav-list li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sh-drawer-nav-list a {
	display: block;
	padding: 14px 20px;
	color: var(--sh-ink) !important;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none !important;
	text-transform: lowercase;
	border-bottom: 1px solid var(--sh-line);
}
.sh-drawer-nav-list a:hover {
	background: var(--sh-ash-soft);
}

/* WP admin-bar відсуває drawer щоб не перекрив */
body.admin-bar .sh-mobile-drawer-panel { top: 46px; }
@media (min-width: 783px) {
	body.admin-bar .sh-mobile-drawer-panel { top: 32px; }
}

/* === SEARCH POPUP (desktop) ===
 * Default — повністю прихований (display: none + transform off-screen).
 * Тільки .is-open показує. Раніше використовував лише transform → деякі browsers
 * не reflushed при page load і popup міг бути видимий. Force з display + visibility.
 */
.sh-search-popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: var(--sh-floral);
	border-bottom: 1px solid var(--sh-timber);
	z-index: 9998;
	transform: translateY(-100%);
	transition: transform .25s ease;
	box-shadow: 0 8px 24px rgba(26, 26, 26, .06);
	visibility: hidden;
	pointer-events: none;
}
.sh-search-popup.is-open {
	transform: translateY(0);
	visibility: visible;
	pointer-events: auto;
}
.sh-search-popup-inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 18px 12px;
}
@media (min-width: 700px)  { .sh-search-popup-inner { padding: 22px 20px; } }
@media (min-width: 1024px) { .sh-search-popup-inner { padding: 28px 40px; } }
.sh-search-popup-form {
	display: flex;
	align-items: center;
	gap: 12px;
}
/* Search popup input — без transition на border (попередній .15s ease
 * лагав на деяких browsers через reflow). Border-color міняється instantly
 * при focus → жодних артефактів. */
html body .sh-search-popup-form input[type="search"],
html body .sh-search-popup input[type="search"] {
	flex: 1 !important;
	border: 0 !important;
	border-bottom: 2px solid var(--sh-timber) !important;
	background: transparent !important;
	padding: 12px 4px !important;
	font-size: 18px !important;
	color: var(--sh-ink) !important;
	outline: none !important;
	box-shadow: none !important;
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 500 !important;
	text-transform: lowercase !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: none !important;
	border-radius: 0 !important;
	margin: 0 !important;
}
@media (min-width: 1024px) {
	.sh-search-popup-form input[type="search"] { font-size: 24px; }
}
.sh-search-popup-form input::placeholder {
	color: #9A9A9A;
	text-transform: lowercase;
	font-weight: 400;
}
.sh-search-popup-form input[type="search"]:focus,
.sh-search-popup-form input[type="search"]:focus-visible {
	border-bottom-color: var(--sh-ebony);
	outline: none !important;
	box-shadow: none !important;
}
/* Прибираємо Safari/Chrome декоративну "пошукову" cross/cancel button */
.sh-search-popup-form input[type="search"]::-webkit-search-cancel-button,
.sh-search-popup-form input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
	display: none;
}
.sh-search-close {
	width: 40px;
	height: 40px;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	padding: 0 !important;
	cursor: pointer;
	color: var(--sh-ink) !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	transition: color .15s;
}
.sh-search-close:hover {
	background: transparent !important;
	color: var(--sh-ebony) !important;
}
.sh-search-close svg { width: 22px; height: 22px; }

/* WP admin bar offset для search popup:
 *  - <783px (mobile admin-bar position: absolute, height 46px) → popup йде під ним
 *  - ≥783px (desktop admin-bar position: fixed, scrolls discoupled) → popup top:0
 *    і йде ПОВЕРХ admin-bar (це user-preferred — popup full-height не "втрачає"
 *    32px зверху і виглядає як native search overlay). */
body.admin-bar .sh-search-popup { top: 46px; }
@media (min-width: 783px) {
	body.admin-bar .sh-search-popup { top: 0; }
}

/* === Search autocomplete results === */
.sh-search-results-list {
	margin-top: 14px;
	display: none;
	background: white;
	border: 1px solid var(--sh-timber);
	border-radius: 18px;
	padding: 6px;
	box-shadow: 0 8px 24px rgba(26, 26, 26, .06);
	max-height: 50vh;
	overflow-y: auto;
}
.sh-search-results-list.is-visible { display: block; }
.sh-search-result {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 12px;
	text-decoration: none !important;
	color: var(--sh-ink) !important;
	transition: background .15s;
}
.sh-search-result:hover {
	background: var(--sh-ash-soft);
}
.sh-search-result img {
	width: 48px;
	height: 48px;
	border-radius: 10px;
	object-fit: cover;
	flex-shrink: 0;
	background: var(--sh-ash-soft);
}
.sh-search-result-body { flex: 1; min-width: 0; }
.sh-search-result-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--sh-ink);
	margin-bottom: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sh-search-result-price {
	font-size: 12px;
	color: var(--sh-ebony-dark);
	font-weight: 600;
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
}
/* Sale товари — стара ціна перекреслена і muted, нова — акцентом */
.sh-search-result-price del {
	color: var(--sh-muted);
	font-weight: 400;
	text-decoration: line-through;
}
.sh-search-result-price ins {
	color: var(--sh-ebony-dark);
	text-decoration: none;
	font-weight: 600;
}
.sh-search-loading,
.sh-search-empty {
	padding: 14px 18px;
	font-size: 13px;
	color: var(--sh-muted);
	text-align: center;
}
.sh-search-results-drawer {
	margin-top: 12px;
}

/* Lock body scroll коли drawer/popup відкритий */
body.sh-drawer-open,
body.sh-search-open {
	overflow: hidden;
}

/* === Сховати Woodmart's вбудовані елементи якщо вони якось рендеряться === */
.whb-header { display: none !important; }