/* =====================================================================
 * r43 (2026-10-21) — notification bar + header, mobile search toggle.
 * Loaded by inc/td-header-bar.php. PREVIEW ONLY: every selector starts with
 * body; at go-live drop that prefix (and the matching overrides
 * of snippet 17993 once the snippet is cleaned).
 *
 * --td-bar-h = rendered height of the WP Notification Bars bar (.mtsnb),
 * 0 when there is no bar or it was closed. Set on <html> by
 * header-bar-shopify.js (load, resize, fonts, ResizeObserver, hide/show).
 *
 * Snippet 17993 ("Search form, popup wtin notification and header fix",
 * Simple Custom CSS and JS, inline in <head>) hides the bar
 * (.mtsnb{display:none}) and zeroes the body offset
 * (body.has-mtsnb{padding-top:0!important}). Measured 21.10.: on pages that
 * print the bar this also kills the 106px offset of the fixed mobile header,
 * so the first 106px of content (hero "MAKE SOMETHING") sit under it.
 * Overrides below win by specificity (body.has-mtsnb > body.has-mtsnb).
 * ===================================================================== */

/* ---------- A. bar visible, offsets follow its height ---------- */
body .mtsnb {
	display: block !important;
	transition: transform .25s ease !important;
}
/* r43c: once slid up, hide it for real (a 1px sub-pixel yellow line stayed visible
 * at the top on desktop); the "+" re-open tab stays visible */
body .mtsnb.mtsnb-hidden {
	visibility: hidden;
	transition: transform .25s ease, visibility 0s linear .3s !important;
}
body .mtsnb.mtsnb-hidden .mtsnb-show { visibility: visible; }
body.has-mtsnb {
	padding-top: var(--td-bar-h, 0px) !important;
	transition: padding-top .25s ease !important;
}
/* snippet: .has-mtsnb #primary{padding-top:2rem} (cart/checkout, <=992px) — 0 without the bar */
@media (max-width: 992px) {
	body.has-mtsnb #primary { padding-top: 0; }
}

/* desktop: the header is static (scrolls away), so the bar scrolls with the
 * page too instead of staying fixed over the content */
@media (min-width: 992px) {
	body .mtsnb.mtsnb-fixed { position: absolute; }
}

@media (max-width: 991px) {
	/* fixed mobile header sits directly under the bar */
	body .header-mobile__container {
		top: var(--td-bar-h, 0px) !important;
		transition: top .25s ease !important;
	}
	/* B. header is one 50px row now (search behind the magnifier) */
	body.woondershop-has-mobile-sticky-header:not(.page-template-template-empty),
	body.has-mtsnb.woondershop-has-mobile-sticky-header:not(.page-template-template-empty) {
		padding-top: calc(50px + var(--td-bar-h, 0px)) !important;
	}
	/* decoy close-target + off-canvas panel follow the header */
	body .tdh-mnav-second-toggler { top: var(--td-bar-h, 0px) !important; }
	body #woondershop-main-navigation.tdh-mnav { padding-top: calc(64px + var(--td-bar-h, 0px)) !important; }

	/* snippet: .has-mtsnb:not(.has-top-notification) .header-mobile__cart-toggler{margin-right:31px}
	 * (room for the 2019 "+" re-open tab); the tab is hidden on phones below */
	body.has-mtsnb .header-mobile__cart-toggler { margin-right: 0; }
	body .mtsnb.mtsnb-hidden .mtsnb-show { display: none !important; }

	/* compact bar on phones (was 3 lines / 101px at 390px) */
	body .mtsnb .mtsnb-container {
		width: auto;
		padding: 6px 40px 6px 12px;
		font-size: 13.5px;
		line-height: 1.3;
	}
	body .mtsnb .mtsnb-text { margin: 0 .25em 0 0; }
	body .mtsnb .mtsnb-button { margin: 2px 0 0 .25em; padding: 3px 8px; font-size: 12px; }
	body .mtsnb .mtsnb-hide {
		right: 0;
		top: 0;
		margin-top: 0 !important;
		width: 40px;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 22px !important;
	}
}

/* WP admin bar (logged-in testing on a phone/tablet): header = admin bar + bar */
/* bar itself under the admin bar (takes over from snippet 17993's .admin-bar .mtsnb rule,
 * which is removed at go-live; its 46px also applied at 783-992px where the admin bar is 32px) */
@media (max-width: 782px) {
	body.admin-bar .mtsnb.mtsnb-fixed.mtsnb-top { top: 46px !important; }
}
@media (min-width: 783px) {
	body.admin-bar .mtsnb.mtsnb-fixed.mtsnb-top { top: 32px !important; }
}
@media (max-width: 782px) {
	body.admin-bar .header-mobile__container,
	body.admin-bar .tdh-mnav-second-toggler { top: calc(46px + var(--td-bar-h, 0px)) !important; }
}
@media (min-width: 783px) and (max-width: 991px) {
	body.admin-bar .header-mobile__container,
	body.admin-bar .tdh-mnav-second-toggler { top: calc(32px + var(--td-bar-h, 0px)) !important; }
}
/* r45 (2026-10-21): from 992px the bar is position:absolute (scrolls with the page) and
 * its containing block already starts below WP's html{margin-top:32px}, so the 32px
 * offset above was counted twice for logged-in users (bar at 64-118, white strip at
 * 32-64, bar over the logo). Fixed bar below 992px keeps 46/32px. */
@media (min-width: 992px) {
	body.admin-bar .mtsnb.mtsnb-fixed.mtsnb-top { top: 0 !important; }
}

/* r43d (owner decision 21.10.): no bar on checkout + order received (template-empty,
 * no site header there either); cart keeps the bar. With the bar display:none the JS
 * sets --td-bar-h to 0; the offsets are pinned anyway so the plugin's inline
 * body padding-top (its own measured bar height) cannot leak in. */
body.page-template-template-empty .mtsnb { display: none !important; }
body.page-template-template-empty.woondershop-has-mobile-sticky-header,
body.page-template-template-empty.has-mtsnb { padding-top: 0 !important; }
@media (max-width: 991px) {
	/* order received keeps its r25 16px (cart-checkout-shopify.css) */
	body.page-template-template-empty.woondershop-has-mobile-sticky-header.woocommerce-order-received { padding-top: 16px !important; }
}

/* ---------- B. mobile search behind a magnifier ---------- */
body .tdh-msearch-toggle { display: none; }
@media (max-width: 991px) {
	body .header-mobile__container .tdh-msearch-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 50px;
		height: 50px;
		margin: 0 0 0 auto;   /* auto margin groups it with the cart at the right edge */
		padding: 0;
		background: transparent;
		border: 0;
		color: #fff;
		cursor: pointer;
	}
	body .tdh-msearch-toggle svg { width: 22px; height: 22px; }
	body .tdh-msearch-toggle[aria-expanded="true"] { color: #fee100; }

	body .header-mobile__container .tdh-mobile-row2[hidden] { display: none !important; }
	body .header-mobile__container .tdh-mobile-row2.tdh-mobile-row2--drop {
		position: absolute;
		top: 50px;
		left: 0;
		right: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		gap: 4px;
		padding: 6px 4px 6px 14px;
		background: #000;
		box-shadow: 0 8px 16px rgba(0, 0, 0, .35);
	}
	body .tdh-mobile-row2--drop .tdh-search--mobile { flex: 1 1 auto; min-width: 0; height: 44px; }
	body .tdh-msearch-close {
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		background: transparent;
		border: 0;
		color: #fff;
		cursor: pointer;
	}
	body .tdh-msearch-close svg { width: 20px; height: 20px; }
}

/* r44 (2026-10-21): no focus ring after a tap on the magnifier / search close button
 * (Android Chrome painted a big white square around the 50px button); keyboard focus
 * keeps a small yellow ring around the icon. Live since r12/13 go-live.
 * Hamburger and cart untouched. */
body .tdh-msearch-toggle:focus,
body .tdh-msearch-close:focus { outline: none; }
body .tdh-msearch-toggle:focus-visible,
body .tdh-msearch-close:focus-visible {
	outline: 2px solid #fee100;
	outline-offset: -8px;
	border-radius: 6px;
}