/*
 * tap-targets.css — interactive controls are SIZED to a >=44px touch target.
 *
 * ROOT FIX (not an overlay): the element that actually receives the tap is
 * itself >=44x44px, with its icon/label centred inside. The visible glyph keeps
 * its size; the control's box grows into transparent space around it. There is
 * NO phantom ::after hit layer — that earlier approach was a patchover (it left
 * the real element 20-28px and tried to catch taps with an invisible overlay,
 * which is brittle across stacking contexts, touch handling and RUCSS).
 *
 * WHY: the theme had no minimum-tap-target convention, so icon buttons were
 *      sized to their SVG (w-5/w-6/w-7) and links to their line-height. See the
 *      "Minimum tap targets" pattern in theme/inc/CONVENTIONS.md and the audit
 *      AUDIT_TAP_TARGETS_2026-06-05.md.
 * WHEN: 2026-06-05 (tap-target audit; refactored from ::after to real sizing).
 *
 * Enqueued sitewide; excluded from WP Rocket RUCSS so every rule applies
 * (several selectors target JS-injected elements RUCSS can't see).
 */

/* ---- Utilities (use on any NEW control) -------------------------------- */

/* Icon buttons / square controls: real box >=44x44, glyph centred. Works for
   statically- and absolutely-positioned elements (we don't touch position). */
.ms-tap {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Inline / stacked TEXT links: real clickable height grown to 44px; width stays
   the content width (no horizontal overlap with neighbours). */
.ms-tap-v {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* ---- Third-party / plugin output (can't add a class in markup) --------- */

/* ms-wishlist heart button (card corner ~36px; single ~50px unaffected). */
.ms-wishlist-btn {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Wishlist heart on product cards (loop): the visible 23px icon is aligned with
   the promo tag (top) and inset 12px from the right edge — mirroring the 12px the
   promo "-" sits from the card's left. The ~52px tap area extends DOWN + LEFT
   into the card, so the icon stays at the corner while the hit-box is generous
   (eobuwie-style: big target, glyph anchored). */
.ms-wishlist-btn-wrap--loop {
	right: 12px;   /* was 3px — pull off the right edge, mirror the promo inset */
}
.ms-wishlist-btn-wrap--loop .ms-wishlist-btn {
	min-width: 0;
	min-height: 0;
	display: flex;
	align-items: flex-start;     /* icon to the top... */
	justify-content: flex-end;   /* ...and the right of the button */
	padding: 0 0 29px 29px;      /* 23px icon + 29px = 52px hit-box, growing down+left */
}

/* Breadcrumb crumbs — Rank Math links inside the pill (span.rounded-full). */
span.rounded-full.text-sm a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* PDP breadcrumb (custom .ms-breadcrumb container, Rank Math links).
   Breadcrumbs are secondary nav and wrap to 2 lines on mobile; a full 44px per
   crumb made the wrapped lines balloon apart, so use a tighter 30px target. */
.ms-breadcrumb a {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
}

/* Splide arrows where present (e.g. related-products carousel). */
.splide__arrow {
	min-width: 44px;
	min-height: 44px;
}

/* Footer accordion togglers — mobile only (svg is md:hidden → 0x0 on desktop). */
@media (max-width: 767px) {
	.flineo-open-footer-menu {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* ---- Mobile menu specifics --------------------------------------------- */

/* Submenu expand chevrons (JS-injected .submenu-arrow): tap zone = full row
   height x a wide strip reaching the drawer edge (eobuwie-style). Root sizing
   of the actual control — no overlay. */
#menu-main-mobile .submenu-arrow {
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	min-height: 44px;
	margin-right: -24px;   /* reach the drawer's right edge (eats the li inset) */
}

/* Close (X): generous primary-dismiss target. */
.menu-main-mobile-close {
	min-width: 56px;
	min-height: 56px;
}

/* Back (<) shows only on submenu levels (JS toggles .hidden). We do NOT carry
   .ms-tap here — that would force display and fight .hidden. Instead we only set
   display when the element is NOT hidden, so Tailwind's .hidden wins naturally. */
#menu-main-mobile-back {
	min-width: 56px;
	min-height: 56px;
}
#menu-main-mobile-back:not(.hidden) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Centre horizontally in the menu bar so it doesn't crowd the logo
	   (was top-left, overlapping it). The button is position:absolute in the
	   .relative menu wrapper; top-6 comes from the markup. @since 2026-06-06 */
	left: 50%;
	transform: translateX(-50%);
}

/* ---- Tap feedback ------------------------------------------------------ */
/* A brief grey on press: confirms the touch landed and reveals the hit area
   (the eobuwie "crispy" response). We render it ourselves for a consistent
   look on iOS + Android instead of the browser's default tap highlight.
   Pure CSS, zero JS. */
#menu-main-mobile li,
#menu-main-mobile .submenu-arrow,
.menu-main-mobile-close,
#menu-main-mobile-back,
.ms-tap,
.ms-tap-v {
	-webkit-tap-highlight-color: transparent;
}

/* Whole menu row greys on press (tap on the link OR the chevron activates the
   row via the ancestor :active); the chevron box goes a shade darker so its
   separate target reads, exactly like eobuwie. */
#menu-main-mobile li:active {
	background-color: #f0f0f0;
}
#menu-main-mobile .submenu-arrow:active {
	background-color: #e4e4e4;
}
.menu-main-mobile-close:active,
#menu-main-mobile-back:active {
	background-color: #f0f0f0;
}

/* Icon buttons / links elsewhere: a subtle press tint that works on any bg. */
.ms-tap:active,
.ms-tap-v:active {
	background-color: rgba(0, 0, 0, 0.06);
}