/**
 * Header + footer — Shopify look. Pairs with the child template-part
 * overrides (widgets.php, navigation-bar.php, footer.php).
 */

/* ============ top header bar: black, logo + search + pills ============ */
/* like Shopify: header scrolls away with the page, never sticky */
.header__container { background: #000 !important; border: 0 !important; position: static !important; top: auto !important; }
/* the theme wraps the header in its own .container (max 1300 / pad 15) —
 * force it onto the same 1360/40 grid as the page content */
.header__container > .container { max-width: 1360px !important; width: 100% !important; padding: 0 !important; margin: 0 auto !important; }
.header__container .header { display: flex; align-items: center; gap: 28px; padding: 14px 40px; }
.header__container .header__logo img { height: 34px; width: auto; }
.tdh-widgets { display: flex; align-items: center; gap: 14px; flex: 1; justify-content: flex-end; }

/* Shopify look: black pill with a subtle white border, white text */
.tdh-search {
	display: flex;
	align-items: center;
	flex: 1;
	max-width: 640px;
	background: #000;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 30px;
	padding: 0 8px 0 18px;
	height: 49px;
	gap: 8px;
	transition: border-color .12s ease;
}
.tdh-search:focus-within { border-color: rgba(255, 255, 255, .35); }
.tdh-search svg { width: 20px; height: 20px; color: #fff; flex: 0 0 auto; }
.tdh-search input[type="search"] {
	flex: 1;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: 18px;
	color: #fff !important;
	height: 100%;
	padding: 0 !important;
}
.tdh-search input[type="search"]::placeholder { color: rgba(255, 255, 255, .55); }
.tdh-search input[type="search"]:focus { outline: none; }

/* live search suggestions */
.tdh-search { position: relative; }
.tdh-suggest {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: #000;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 14px;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
	overflow: hidden;
	z-index: 990;
}
.tdh-suggest__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 14px;
	color: #fff !important;
	text-decoration: none !important;
	font-size: 15px;
	transition: background .1s ease;
}
.tdh-suggest__item:hover { background: #171717; }
.tdh-suggest__item img,
.tdh-suggest__noimg { width: 42px; height: 32px; object-fit: cover; border-radius: 6px; background: #222; flex: 0 0 auto; }
.tdh-suggest__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdh-suggest__price { color: rgba(255, 255, 255, .65); white-space: nowrap; }
.tdh-suggest__all {
	display: block;
	width: 100%;
	background: transparent;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, .12);
	color: #fee100;
	font-size: 15px;
	font-weight: 700;
	padding: 11px 14px;
	text-align: left;
	cursor: pointer;
}
.tdh-suggest__all:hover { background: #171717; }

.tdh-pill {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 48px;
	padding: 0 22px;
	border-radius: 30px;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background .12s ease, color .12s ease;
}
.tdh-pill svg { width: 20px; height: 20px; }
.tdh-pill--ghost { border: 2px solid #fff; color: #fff !important; background: transparent; }
.tdh-pill--ghost:hover { background: #fff; color: #000 !important; }
.tdh-pill--cart { background: #fff; color: #000 !important; border: 2px solid #fff; }
.tdh-pill--cart:hover { background: #fee100; border-color: #fee100; }

/* ============ nav row: black, bold white links, mega panel ============ */
.tdh-nav__container { background: #000; border-top: 1px solid #171717; position: relative; z-index: 900; }
.tdh-nav { max-width: 1360px; margin: 0 auto; padding: 0 40px; }
/* -14px pulls the first item's box left so its TEXT sits on the content grid */
.tdh-nav__list { list-style: none; margin: 0 0 0 -14px; padding: 0; display: flex; gap: 8px; }
.tdh-nav__item > a {
	display: flex;
	align-items: center;
	gap: 7px;
	color: #fff !important;
	font-size: 17px;
	font-weight: 700;
	text-decoration: none !important;
	padding: 16px 14px;
}
.tdh-caret { width: 15px; height: 15px; transition: transform .1s linear; }
.tdh-nav__item:hover > a { color: #fee100 !important; text-decoration: underline !important; text-underline-offset: 5px; }
.tdh-nav__item--mega:hover .tdh-caret { transform: rotate(180deg); }

/* mega panel — exact Krown/Shopify animation (section-header.css):
 * open:  panel visible in 10ms; the BLACK BLOCK (::after) grows from
 *        height 0 to 100% over 140ms ease-in-out; content fades in and
 *        slides up 5px over 120ms with an 80ms delay
 * close: content fades out in 80ms; block shrinks over 100ms after 40ms */
.tdh-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: transparent;
	z-index: 950;
	opacity: 0;
	visibility: hidden;
	transition: opacity .1s linear .04s, visibility .1s linear .04s;
}
.tdh-mega::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	background: #000;
	border: 1px solid #171717;
	border-top: none;
	z-index: -1;
	transition: height .1s ease-in-out .04s;
}
.tdh-mega__inner {
	opacity: 0;
	transform: translateY(5px);
	transition: .08s linear;
}
.tdh-nav__item--mega:hover .tdh-mega,
.tdh-mega:hover {
	opacity: 1;
	visibility: visible;
	transition: opacity .01s linear, visibility .01s linear;
}
.tdh-nav__item--mega:hover .tdh-mega::after,
.tdh-mega:hover::after {
	height: 100%;
	transition: height .14s ease-in-out;
}
.tdh-nav__item--mega:hover .tdh-mega__inner,
.tdh-mega:hover .tdh-mega__inner {
	opacity: 1;
	transform: translateY(0);
	transition: .12s linear .08s;
}
.tdh-mega__inner {
	max-width: 1360px;
	margin: 0 auto;
	padding: 30px 40px 38px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr minmax(300px, 400px);
	gap: 40px;
	align-items: start;
}
.tdh-mega__col { display: flex; flex-direction: column; }
.tdh-mega__head {
	color: #fff !important;
	font-size: 18px;
	font-weight: 800;
	text-decoration: none !important;
	margin-bottom: 14px;
}
.tdh-mega__head:hover { color: #fee100 !important; }
.tdh-mega__link {
	color: #fff !important;
	font-size: 16px;
	font-weight: 400;
	text-decoration: none !important;
	padding: 6px 0;
}
.tdh-mega__link:hover { color: #fee100 !important; text-decoration: underline !important; }

/* promo card (Customizer > Header promo) */
.tdh-mega__promo a { position: relative; display: block; border-radius: 14px; overflow: hidden; text-decoration: none !important; aspect-ratio: 1; max-height: 390px; }
.tdh-mega__promo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tdh-mega__promo-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center;
	padding: 20px;
	background: rgba(0,0,0,.18);
}
.tdh-mega__promo-title { color: #fff; font-family: 'Anton', sans-serif; font-size: clamp(30px, 3vw, 46px); line-height: 1.05; text-shadow: 0 2px 12px rgba(0,0,0,.55); }
.tdh-mega__promo-sub { color: #fff; font-weight: 700; font-size: 17px; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.tdh-mega__promo-btn {
	margin-top: 10px;
	background: #fff;
	color: #000;
	font-weight: 700;
	font-size: 17px;
	border-radius: 30px;
	padding: 12px 40px;
	transition: background .12s ease;
}
.tdh-mega__promo a:hover .tdh-mega__promo-btn { background: #fee100; }

/* hide nav row on mobile (parent mobile header covers it) */
@media (max-width: 991px) { .tdh-nav__container { display: none; } }

/* neutralize the old yellow navigation styling if any残 remains */
.navigation-bar__container { background: #000 !important; }

/* ============ mobile off-canvas menu (fix #1, 2026-08-13) ============
 * Content for the panel added in template-parts/header/navigation-bar.php.
 * Reuses the parent's #woondershop-main-navigation / .navigation-bar
 * positioning + open/close animation (body.active-overlaid-element--
 * navigation .navigation-bar{transform:translateX(0)}), only the visual
 * content + colors are ours. */
#woondershop-main-navigation.tdh-mnav {
	background-color: #0c0c0c !important;
	padding: 74px 0 40px;
}
.tdh-mnav__list { list-style: none; margin: 0; padding: 0; }
.tdh-mnav__item { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.tdh-mnav__toplink,
.tdh-mnav__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 18px 24px;
	color: #fff !important;
	font-size: 18px;
	font-weight: 700;
	text-decoration: none !important;
	cursor: pointer;
	list-style: none;
	-webkit-tap-highlight-color: transparent;
}
.tdh-mnav__summary::-webkit-details-marker { display: none; }
.tdh-mnav__caret { width: 16px; height: 16px; flex: 0 0 auto; transition: transform .15s ease; }
.tdh-mnav__details[open] .tdh-mnav__caret { transform: rotate(180deg); }
.tdh-mnav__sub { display: flex; flex-direction: column; padding: 0 24px 14px 36px; }
.tdh-mnav__sublink {
	padding: 10px 0;
	color: rgba(255, 255, 255, .8) !important;
	font-size: 16px;
	text-decoration: none !important;
}
.tdh-mnav__sublink:active,
.tdh-mnav__sublink:hover { color: #fee100 !important; }
.tdh-mnav__sublink--all { font-weight: 700; color: #fee100 !important; }
.tdh-mnav__sublink--head { font-weight: 700; color: #fff !important; margin-top: 6px; }

/* close (X) — brand colors instead of the parent's grey circle */
.main-navigation__close {
	background-color: #fee100 !important;
	color: #010002 !important;
	width: 54px !important;
	height: 54px !important;
	line-height: 54px !important;
}

/* the classic off-canvas panel is mobile-only — the Shopify mega menu
 * (.tdh-nav__container) is the only nav shown at desktop widths */
@media (min-width: 992px) {
	#woondershop-main-navigation.tdh-mnav,
	.main-navigation__close { display: none !important; }
}

/* ============ WP admin bar vs. sticky mobile header (fix #2, 2026-08-13) ============
 * Parent theme already offsets the sticky mobile header for the WP admin
 * bar (body.woondershop-has-mobile-sticky-header.admin-bar
 * .header-mobile__container{top:46px/32px}) but ONLY from 601px up — see
 * woondershop-*.css. Every real phone is narrower than that, so on phones
 * the header keeps `top:0`; once the page is scrolled, the sticky header
 * re-docks at literal viewport y:0, directly under the fixed 46px-tall
 * #wpadminbar (z-index 99999 vs. the header's 55) — visually the admin bar
 * covers the hamburger/logo for any logged-in admin testing on a phone.
 * Mirrors the parent's own top:46px value for the missing <601px case. */
@media (max-width: 600px) {
	body.woondershop-has-mobile-sticky-header.admin-bar .header-mobile__container {
		top: 46px;
	}
}

/* ============ footer ============ */
.tdf { background: #000; color: #96989c; font-size: 16px; margin-top: 60px; }
.tdf__container { max-width: 1480px; margin: 0 auto; padding: 56px 24px 26px; }
.tdf__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
@media (max-width: 900px) { .tdf__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .tdf__grid { grid-template-columns: 1fr; } }
/* Footer column titles: <div class="tdf__coltitle"> (r13, 2026-08-20 —
 * demoted from <h4> to remove sitewide h2->h4 heading-outline skips). The
 * legacy .tdf h4 selector is kept so nothing regresses if an <h4> lingers. */
.tdf h4,
.tdf .tdf__coltitle {
	color: #fff;
	font-family: 'Anton', 'Arial Narrow', sans-serif;
	font-weight: 400;
	font-size: 21px;
	letter-spacing: .5px;
	margin: 0 0 16px;
}
.tdf p { margin: 0; line-height: 1.5; }
.tdf ul { list-style: none; margin: 0; padding: 0; }
.tdf li { margin: 0 0 9px; }
.tdf a { color: #96989c !important; text-decoration: none !important; }
.tdf a:hover { color: #fee100 !important; text-decoration: underline !important; }
.tdf__social { display: flex; gap: 12px; flex-wrap: wrap; }
.tdf__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid #333;
	border-radius: 50%;
	color: #96989c !important;
	transition: border-color .12s ease, color .12s ease;
}
.tdf__social a:hover { border-color: #fee100; color: #fee100 !important; }
.tdf__social svg { width: 18px; height: 18px; }
.tdf__bottom {
	border-top: 1px solid #1d1d1d;
	margin-top: 44px;
	padding-top: 20px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 14px;
}

/* ============ mobile header: two-row Shopify layout, true-centered logo (item 1+2, 2026-08-13 restructure) ============
 * Owner report: logo was too big and only centered within its own grid
 * column (the free space between the hamburger and search+cart icons, not
 * the viewport), and search should get its own full-width row under the
 * logo row like Shopify's mobile header. Devtools-measured the live
 * https://www.3d-mon.com mobile header to confirm the target shape: row 1
 * is hamburger / centered logo / cart; a full-width "Search for..." bar
 * sits directly below as its own row (Shopify: 16px side inset, ~40px
 * tall); Shopify's own logo renders ~30px tall there.
 *
 * Row 1 (.tdh-mobile-row1, markup in template-parts/header/mobile.php) is
 * now a plain 2-item flex row — hamburger and cart only, nothing else in
 * flow — so justify-content:space-between alone pins them to the two
 * edges. The logo is taken OUT of that flow entirely: position:absolute,
 * left:50% + translateX(-50%) anchored to .tdh-mobile-row1 itself. That row
 * spans the FULL viewport width with no side padding (confirmed via
 * getBoundingClientRect: x:0, width:390 at a 390px viewport, same at the
 * other 3 tested widths) — so centering on it *is* true viewport-axis
 * centering, not flex/grid free-space centering like the previous version,
 * and it can never collide with the hamburger/cart since it's a separate
 * layer.
 *
 * Row 2 (.tdh-mobile-row2) is the persistent full-width search bar that
 * replaces the old search-icon + slide-in dark panel (item 2). It reuses
 * the exact `.tdh-search` markup/class the desktop bar already uses, so
 * header-shopify.js's live-suggestion wiring (querySelectorAll('.tdh-search'))
 * attaches automatically with no JS changes, and its dropdown
 * (`.tdh-suggest`, already `position:absolute` under any `.tdh-search`)
 * drops directly under this bar — Shopify's own "suggestions drop under the
 * bar" behavior — instead of needing the old full-screen dark overlay. */
.header-mobile__container { padding: 0; }
.header-mobile__container .header-mobile.tdh-mobile-row1 {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 60px;
}
.header-mobile__container .header-mobile__navbar-toggler,
.header-mobile__container .header-mobile__cart-toggler { flex: 0 0 auto; }
.header-mobile__container .header__logo.tdh-mobile-logo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	min-width: 0;
}
.header-mobile__container .header__logo.tdh-mobile-logo .header__logo-image {
	max-height: 26px;   /* was 32px (rendered ~30-32px, reported "too big") — matches Shopify's own measured ~30px mobile logo, trimmed a touch further per owner's "smaller" ask */
	width: auto;
	max-width: 100%;
}
.tdh-mobile-row2 { padding: 8px 14px 12px; }

/* ============ row 2 search bar (item 2, 2026-08-13 restructure) ============
 * Replaces the old toggle-triggered dark slide-in panel — search is now a
 * permanently visible row (see .tdh-mobile-row2 above + template-parts/
 * header/mobile.php). Reuses the exact .tdh-search pill from the desktop
 * bar, so its dark background, focus-within border and live suggestion
 * dropdown all come for free and stay visually identical to desktop. */
.header-mobile__container .tdh-search--mobile { max-width: none; height: 48px; }

/* ============ off-canvas nav: hamburger a11y + tap-to-close (addendum, 2026-08-13) ============
 * See header-shopify.js for the open/close + aria-expanded logic. The
 * decoy button below (template-parts/header/mobile.php) is what actually
 * makes a 2nd tap reachable: the open panel is z-index:100100, above
 * .header-mobile__container's own stacking context (z-index:55), so the
 * real hamburger underneath is covered and unclickable once open — this
 * sits in the z-index:100100+ layer instead, at the exact same on-screen
 * spot, and is only shown while the panel is open. */
.tdh-mnav-second-toggler {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 60px;
	height: 60px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	z-index: 100150;
	cursor: pointer;
}
body.active-overlaid-element--navigation .tdh-mnav-second-toggler { display: block; }
@media (min-width: 992px) { .tdh-mnav-second-toggler { display: none !important; } }
/* mirrors the admin-bar offset already applied to .header-mobile__container
 * (fix #2 above) so the decoy stays aligned with the real button's on-screen
 * position when a logged-in admin is testing on a phone */
@media (max-width: 600px) {
	body.woondershop-has-mobile-sticky-header.admin-bar .tdh-mnav-second-toggler { top: 46px; }
}

/* ============ tdh-content-offset (2026-08-19) ============
 * The 2-row mobile header (60px bar + 68px search row) is position:fixed,
 * but the content wrapper never got a matching offset when the search row
 * was added — the first 128px of every mobile page (incl. the shop H1)
 * rendered underneath the header. Constant offset is correct because the
 * header is fixed from page load, not sticky-on-scroll. */
@media (max-width: 991px) {
	body.woondershop-has-mobile-sticky-header { padding-top: 128px; }
}

/* =====================================================================
 * r25e (2026-08-26) — owner's mobile QA pass (real device screenshots).
 *   #1 "My Account" entry in the burger menu — there was none at all, so
 *      account + downloads were unreachable from a phone.
 *   #5 Mobile cart drawer — inherited the parent theme's pale blue/white
 *      panel (measured bg rgb(229,235,243)) on an otherwise all-dark site.
 * ===================================================================== */

/* ---- #1 My Account item in the mobile off-canvas nav ---------------- */
.tdh-mnav__item--account {
	border-bottom: 0;
	border-top: 1px solid rgba(255, 255, 255, .1);
	margin-top: 8px;
}
.tdh-mnav__account {
	justify-content: flex-start; /* icon + label, not the caret layout */
	gap: 12px;
}
.tdh-mnav__accicon {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	color: #fee100;
}
.tdh-mnav__account:active,
.tdh-mnav__account:hover { color: #fee100 !important; }
.tdh-mnav__account:active .tdh-mnav__accicon,
.tdh-mnav__account:hover .tdh-mnav__accicon { color: #fff; }

/* ---- #5 Mobile cart drawer, dark theme ------------------------------ */
.header-mobile__cart.mobile-cart {
	background: #0c0c0c !important;
	color: rgba(255, 255, 255, .92) !important;
	border-left: 1px solid #262626;
}
.header-mobile__cart.mobile-cart * { border-color: rgba(255, 255, 255, .12); }

.header-mobile__cart .mobile-cart__header {
	background: #0c0c0c !important;
	border-bottom: 1px solid rgba(255, 255, 255, .14) !important;
	padding: 18px 20px !important;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}
.header-mobile__cart .mobile-cart__title {
	color: #fff !important;
	font-weight: 700;
	letter-spacing: .02em;
}
.header-mobile__cart .mobile-cart__subtotal { color: #fee100 !important; font-weight: 700; }

/* widget body */
.header-mobile__cart .widget_shopping_cart,
.header-mobile__cart .widget_shopping_cart_content,
.header-mobile__cart .woocommerce-mini-cart {
	background: transparent !important;
	color: rgba(255, 255, 255, .92) !important;
	padding-left: 20px;
	padding-right: 20px;
}
.header-mobile__cart .woocommerce-mini-cart__empty-message {
	background: rgba(255, 255, 255, .05) !important;
	border: 1px solid rgba(255, 255, 255, .12) !important;
	border-radius: 10px;
	color: rgba(255, 255, 255, .72) !important;
	text-align: center;
	padding: 18px 14px !important;
	margin: 20px 0 0 !important;
	font-size: 14.5px;
}
.header-mobile__cart .woocommerce-mini-cart__total {
	color: #fff !important;
	border-top: 1px solid rgba(255, 255, 255, .14) !important;
	padding-top: 14px !important;
}
.header-mobile__cart .woocommerce-mini-cart__total .amount { color: #fee100 !important; }
.header-mobile__cart .woocommerce-mini-cart-item,
.header-mobile__cart .woocommerce-mini-cart li {
	border-bottom: 1px solid rgba(255, 255, 255, .1) !important;
	background: transparent !important;
}
.header-mobile__cart .woocommerce-mini-cart a:not(.button) { color: #fff !important; }
.header-mobile__cart .woocommerce-mini-cart a:not(.button):hover { color: #fee100 !important; }
.header-mobile__cart .quantity,
.header-mobile__cart .woocommerce-Price-amount { color: rgba(255, 255, 255, .8) !important; }

/* mini-cart buttons: first = View cart (ghost), last = Checkout (yellow) */
.header-mobile__cart .woocommerce-mini-cart__buttons { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.header-mobile__cart .woocommerce-mini-cart__buttons .button {
	display: block;
	width: 100%;
	text-align: center;
	border-radius: 999px !important;
	padding: 13px 18px !important;
	font-weight: 700 !important;
	background: transparent !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, .55) !important;
}
.header-mobile__cart .woocommerce-mini-cart__buttons .button.checkout,
.header-mobile__cart .woocommerce-mini-cart__buttons .button:last-child {
	background: #fee100 !important;
	border-color: #fee100 !important;
	color: #010002 !important;
}

/* close (X) — match the nav panel's brand close button */
.mobile-cart__close {
	background-color: #fee100 !important;
	color: #010002 !important;
	width: 54px !important;
	height: 54px !important;
	line-height: 54px !important;
}


/* =====================================================================
 * r25h (2026-08-27) — filled-cart drawer leftovers.
 *
 * r25e was verified against the EMPTY drawer only, so two parent-theme
 * surfaces that only exist once the cart has items were never covered:
 *   p.woocommerce-mini-cart__total   — 259x52, rgb(229,235,243)
 *   p.woocommerce-mini-cart__buttons — 259x130, rgb(229,235,243)
 * r25e styled both (colour, border, spacing) but never set their
 * background, so the parent theme's pale blue-grey showed through as two
 * light blocks under the line items on the black drawer.
 *
 * Rather than chase individual selectors again, everything inside the
 * widget body is forced transparent and the handful of surfaces that
 * SHOULD be visible are re-asserted afterwards (source order matters:
 * the re-assertions tie or beat the catch-all on specificity).
 * ===================================================================== */
.header-mobile__cart .widget_shopping_cart_content,
.header-mobile__cart .widget_shopping_cart_content * {
	background-color: transparent !important;
	background-image: none !important;
}

/* --- surfaces that must stay visible (declared after the catch-all) --- */
.header-mobile__cart .woocommerce-mini-cart__empty-message {
	background-color: rgba(255, 255, 255, .05) !important;
}
.header-mobile__cart .woocommerce-mini-cart__buttons .button {
	background-color: transparent !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, .55) !important;
}
.header-mobile__cart .woocommerce-mini-cart__buttons .button.checkout,
.header-mobile__cart .woocommerce-mini-cart__buttons .button.wc-forward:last-child {
	background-color: #fee100 !important;
	border-color: #fee100 !important;
	color: #010002 !important;
}

/* --- readability of the totals row on the dark surface --- */
.header-mobile__cart .woocommerce-mini-cart__total {
	color: #fff !important;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}
.header-mobile__cart .woocommerce-mini-cart__total strong { color: rgba(255, 255, 255, .85) !important; font-weight: 700; }
.header-mobile__cart .woocommerce-mini-cart__total .amount,
.header-mobile__cart .woocommerce-mini-cart__total .woocommerce-Price-amount { color: #fee100 !important; }
.header-mobile__cart .woocommerce-mini-cart__total .woocommerce-Price-currencySymbol { color: inherit !important; }

/* line items: keep the divider, drop any inherited light fill */
.header-mobile__cart .woocommerce-mini-cart-item {
	border-bottom: 1px solid rgba(255, 255, 255, .1) !important;
}
.header-mobile__cart .woocommerce-mini-cart-item .quantity,
.header-mobile__cart .woocommerce-mini-cart-item .woocommerce-Price-amount { color: rgba(255, 255, 255, .8) !important; }
.header-mobile__cart .woocommerce-mini-cart-item a.remove,
.header-mobile__cart .woocommerce-mini-cart-item .remove_from_cart_button {
	color: rgba(255, 255, 255, .65) !important;
	background-color: transparent !important;
}
.header-mobile__cart .woocommerce-mini-cart-item a.remove:hover { color: #fee100 !important; }

/* ============ r25l (2026-08-27): shorter mobile header, no dividers =======
 * Measured before at 390px: row1 60px + row2 68px (8 + 48 search + 12) =
 * 128px total, with body padding-top:128px holding content clear of it.
 *
 * Now: row1 50px + row2 56px (6 + 44 search + 6) = 106px, i.e. -22px
 * (-17.2%). The search field stays a 44px touch target rather than being
 * squeezed further. The body offset is moved in lockstep to 106px so no
 * page gains a gap or an overlap.
 *
 * Logo centering: the wrapper was already translate(-50%,-50%) centred, but
 * the <img> inside it is inline by default, so its baseline descender space
 * pushed the glyphs down — measured 18.6px above vs 15.4px below (3.3px
 * off). display:block removes that gap and centres it for real.
 *
 * Dividers: the 1px hairlines flanking the logo were border-right on the
 * burger and border-left on the cart. Removed. The two borders on
 * .tdh-search--mobile are that field's own pill outline, NOT dividers, and
 * are deliberately left alone.
 * ======================================================================== */
@media (max-width: 991px) {
	.header-mobile__container .header-mobile.tdh-mobile-row1 { height: 50px; }
	.tdh-mobile-row2 { padding: 6px 14px 6px; }
	.header-mobile__container .tdh-search--mobile { height: 44px; }

	body.woondershop-has-mobile-sticky-header { padding-top: 106px; }

	/* logo optically centred in the shorter bar */
	.header-mobile__container .header__logo.tdh-mobile-logo .header__logo-image,
	.header-mobile__container .header__logo.tdh-mobile-logo img { display: block; }

	/* no hairlines around the logo */
	.header-mobile__container .header-mobile__navbar-toggler { border-right: 0 !important; }
	.header-mobile__container .header-mobile__cart-toggler { border-left: 0 !important; }

	/* decoy close-target keeps covering the real hamburger */
	.tdh-mnav-second-toggler { width: 50px; height: 50px; }

	/* off-canvas panel top padding follows the shorter header */
	#woondershop-main-navigation.tdh-mnav { padding-top: 64px; }
}

/* r25l addendum: the burger and cart buttons carry a 60px height from the
 * parent theme, so in the new 50px row they overflowed 5px above the header
 * and 5px down into the search row — their tap targets straddled both rows.
 * Matched to the row height; 50px is still a comfortable touch target. */
@media (max-width: 991px) {
	.header-mobile__container .header-mobile__navbar-toggler,
	.header-mobile__container .header-mobile__cart-toggler { height: 50px; }
}