/**
 * Supra Force — shared capsule hover/focus animation for the header
 * category menu (Elementor Nav Menu widget, element 9718736).
 *
 * Scope: every rule below is anchored to .elementor-element-9718736 and/or
 * .supra-category-nav (the widget wrapper) — never a bare .elementor-item
 * or .elementor-nav-menu selector, so this cannot leak onto any other Nav
 * Menu widget elsewhere on the site. See the plugin's own instructions for
 * how to add the .supra-category-nav class via the Elementor editor if it
 * isn't already on the widget.
 *
 * The pill + its inner white-text mask are created by custom-nav-menu.js —
 * this file only styles them once they exist. All geometry (left/width/
 * top/height) is set inline by the JS from live element measurements;
 * nothing here hardcodes pixel positions.
 */

:root {
	--supra-nav-text-color: #0e0e66;
	--supra-nav-pill-color: #425fdb;
	--supra-nav-text-color-active: #ffffff;
	/* Explicit, compact pill height — deliberately NOT derived from the
	   Elementor link's own box, which carries 34px of vertical padding
	   top/bottom (meant for the large clickable area, not for how tall the
	   visual pill should look). Change this single value to resize it. */
	--supra-nav-pill-height: 38px;
}

/* Stacking root for this widget only. Elementor Pro's own base widget CSS
   (widget-nav-menu.min.css) sets ".elementor-nav-menu{position:relative;
   z-index:2}" on the <ul> itself — since that <ul> and .supra-nav-pill are
   siblings under <nav>, the <ul> (z-index:2) was winning over the pill
   (previously z-index:1) regardless of any z-index given to .elementor-item
   inside it. isolation:isolate here creates a fresh, self-contained
   stacking context scoped to THIS widget's <nav>, so the z-index values
   below are only ever compared against each other, never against anything
   outside this menu. */
.elementor-element-9718736 .elementor-nav-menu--main,
.supra-category-nav .elementor-nav-menu--main {
	position: relative;
	isolation: isolate;
}

/* Base text color for the menu — scoped, never a global .elementor-item
   override. z-index:1 here only matters for stacking among this widget's
   OWN elements (thanks to isolation:isolate above); .supra-nav-pill's
   z-index:10 still needs to clear the <ul>'s own z-index:2 to sit above the
   whole menu, not just above this single rule. */
.elementor-element-9718736 .elementor-nav-menu .elementor-item,
.supra-category-nav .elementor-nav-menu .elementor-item {
	color: var(--supra-nav-text-color) !important;
	fill: var(--supra-nav-text-color) !important;
	position: relative;
	z-index: 1;
}

/* Defensive override of Elementor's native "Pointer" hover effect, scoped
   strictly to this widget instance — never global. At the time this was
   written the widget already carries the e--pointer-none class live (no
   native pointer effect active), so this is a safety net in case that
   Elementor setting is ever changed back to Underline/Overline/etc. */
.elementor-element-9718736 .elementor-nav-menu--main .elementor-item:before,
.elementor-element-9718736 .elementor-nav-menu--main .elementor-item:after,
.supra-category-nav .elementor-nav-menu--main .elementor-item:before,
.supra-category-nav .elementor-nav-menu--main .elementor-item:after {
	content: none !important;
	display: none !important;
}

/* Persistent capsule for the currently open category (if any) — created by
   custom-nav-menu.js's findActiveLink()/activePill logic, entirely
   separate from .supra-nav-pill above. Unlike that temporary hover/focus
   pill, this is a STATE indicator, not a hover interaction, so it is
   intentionally NOT inside the (hover: hover) media query below — it must
   show on touch devices too. No transition/animation properties here on
   purpose: custom-nav-menu.js only ever sets its left/top/width/height via
   direct style assignment, never .animate().
   z-index:0 is enough here (does NOT need to clear the Elementor <ul>'s
   z-index:2 the way .supra-nav-pill's z-index:10 does) — this pill isn't
   trying to cover the real text, only sit behind it as a colored
   background, so anything above it (the <ul>'s own z-index:2, and the
   link's z-index:1 within it) is exactly what should keep painting on top. */
.supra-nav-active-pill {
	position: absolute;
	background: var(--supra-nav-pill-color);
	border-radius: 999px;
	pointer-events: none;
	z-index: 0;
}

/* The active category's own link text turns white directly — no masked
   white-clone layer needed here (unlike the temporary hover pill), since
   this state persists for as long as the page stays open, it doesn't need
   to "travel" or partially reveal across two items. */
.elementor-element-9718736 .elementor-nav-menu .elementor-item.is-supra-active,
.supra-category-nav .elementor-nav-menu .elementor-item.is-supra-active {
	color: var(--supra-nav-text-color-active) !important;
	fill: var(--supra-nav-text-color-active) !important;
}

/* The pill only renders on devices that report real hover + a fine pointer.
   custom-nav-menu.js also gates *attaching* mouse listeners the same way —
   this is the CSS-side safety net so the pill can never appear on touch. */
@media (hover: hover) and (pointer: fine) {
	.supra-nav-pill {
		position: absolute;
		left: 0;
		width: 0;
		background: var(--supra-nav-pill-color);
		border-radius: 999px;
		overflow: hidden;
		opacity: 0;
		pointer-events: none;
		/* Must clear the Elementor <ul>'s own z-index:2 (see the
		   isolation:isolate comment above), not just .elementor-item's
		   z-index:1 — that's why this is 10, not 2. Being position:absolute
		   with an explicit z-index, this pill also becomes a stacking
		   context of its own, so .supra-nav-mask-item's z-index below is
		   local to it, not compared against anything outside this pill. */
		z-index: 10;
	}

	.supra-nav-mask-inner {
		position: absolute;
		left: 0;
		pointer-events: none;
	}

	.supra-nav-mask-item {
		position: absolute;
		top: 50%;
		/* Local to .supra-nav-pill's own stacking context: sits above the
		   pill's own background (which has no explicit z-index of its own,
		   i.e. z-index:auto within that local context). */
		z-index: 1;
		transform: translateY(-50%);
		white-space: nowrap;
		text-align: center;
		color: var(--supra-nav-text-color-active) !important;
		fill: var(--supra-nav-text-color-active) !important;
		font-family: "LUXE UNO", sans-serif;
		font-size: 16px;
		font-weight: 400;
		line-height: 1em;
		letter-spacing: 0px;
		pointer-events: none;
	}
}

/* ====================================================================
 * TABLET/MOBILE HEADER — SINGLE ROW COMPOSITION
 * added 2026-07-23, CONSOLIDATED 2026-07-24 (single source of truth,
 * shared variables, explicit grid placement)
 * ====================================================================
 *
 * Single source of truth for the Tablet/Mobile header's sizing/grid —
 * every prior round's separate clamp() literals for the icons/logo/
 * columns are replaced by three named custom properties, computed once
 * on the grid container and read everywhere else via var(). Nothing
 * approved before is removed; values are updated in place.
 *
 * DELIBERATELY DIFFERENT GROWTH CURVES (explicit instruction this
 * round): icons and logo do NOT share one scale. Icons grow moderately
 * (~15% at the narrow end, capped well short of competing with the
 * logo); the logo grows much faster (145px base + 18vw, more than
 * double the icons' 1.5vw factor) so it gains MORE visual dominance as
 * the viewport widens, rather than the icons catching up to it:
 *   --supra-header-side-icon: clamp(30px, calc(24px + 1.5vw), 40px)
 *   --supra-header-logo-width: clamp(212px, calc(145px + 18vw), 330px)
 *   --supra-header-side-track: clamp(52px, 7vw, 72px)
 * Cart gets a further +1px optical correction on top of the shared
 * icon variable (calc(var(--supra-header-side-icon) + 1px)) — its own
 * SVG artwork reads as visually lighter than the hamburger glyph at the
 * same literal size, confirmed by this round's own instruction, not a
 * guess.
 *
 * STRUCTURE (confirmed live via DOM inspection): the Elementor grid
 * elementor-element-254852c has exactly 3 widget children —
 *   1. elementor-element-1cdf63a — duplicated Nav Menu widget, IS the
 *      hamburger toggle below 1025px (widget's own Breakpoint:Tablet
 *      setting, set in Elementor, not touched again).
 *   2. elementor-element-43ef286 — Site Logo widget.
 *   3. elementor-element-5c46c02 — WooCommerce Menu Cart widget.
 * Previously placed via Elementor's own --order custom property (auto-
 * placement); this revision sets grid-column/grid-row explicitly on
 * each (1/2/3, row 1) instead — explicit placement now that the exact
 * 3-column structure is settled, so the logo's centering comes
 * directly from the grid geometry (column 2, justify-self:stretch +
 * internal flex centering) rather than depending on auto-placement
 * order matching a mental model of which widget is "first".
 *
 * SPECIFICITY: Elementor's own per-widget rules use
 * `.elementor-170 .elementor-element.elementor-element-<ID>` (3
 * classes, 0 types). Every selector below repeats that exact class
 * chain with a leading `header` type selector added — (0,3,1) reliably
 * beats Elementor's (0,3,0) via the type-selector tiebreak.
 *
 * CART PRICE: elementor-element-5c46c02's .elementor-button-text (the
 * price, "R$ 95,00") is hidden below <=1024px — confirmed via live DOM
 * inspection to wrap ONLY the price, never the icon/badge/accessible
 * text. Scoped 4 levels deep (never a bare .elementor-button-text
 * selector) so it can never reach the mini-cart side panel or any
 * other price on the site.
 *
 * DROPDOWN WIDTH/POSITION: elementor-element-1cdf63a inherits
 * `position:relative` from Elementor's generic `.elementor-widget` base
 * rule (frontend.min.css) — left as `position:static` here so the
 * dropdown panel's position:absolute resolves against
 * elementor-element-254852c (the full-width grid, already position:
 * relative via Elementor's own .e-con base rule) instead of this narrow
 * widget column. Positioning only — the open dropdown's internal
 * layout/category list remains explicitly out of scope this round.
 */
@media (max-width: 1024px) {
	header.elementor-170 .elementor-element.elementor-element-254852c {
		/* --supra-header-side-icon: kept exactly as-is — the cart (below)
		   still reads it, unchanged, per this round's explicit
		   instruction not to touch the cart's size or variable. */
		--supra-header-side-icon: clamp(30px, calc(24px + 1.5vw), 40px);
		/* Hamburger gets its OWN curve, separate from the shared one
		   above: its 3 horizontal bars still read as more visually
		   massive than the cart's SVG artwork even at the previous
		   round's 26-34px/1.1vw curve, so this round lowers it further
		   (~6-7.6% smaller across 375-1024px than the previous curve,
		   not touching the cart) — floor 24px (was 26px), ceiling 31px
		   (was 34px), growth factor 0.95vw (was 1.1vw). Same technique
		   as before: shallower/lower than --supra-header-side-icon
		   (the cart's own variable, untouched) so the hamburger reads
		   as clearly lighter, never touching the cart itself. */
		--supra-header-menu-icon: clamp(24px, calc(21px + 0.95vw), 31px);
		--supra-header-logo-width: clamp(212px, calc(145px + 18vw), 330px);
		--supra-header-side-track: clamp(52px, 7vw, 72px);
		--e-con-grid-template-columns: var(--supra-header-side-track) minmax(0, 1fr) var(--supra-header-side-track);
	}

	/* ---- Column 1: hamburger (elementor-element-1cdf63a) ---- */

	header.elementor-170 .elementor-element.elementor-element-1cdf63a {
		grid-column: 1;
		grid-row: 1;
		justify-self: center;
		align-self: center;
		width: 100%;
		height: 100%;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		/* Right padding only, added 2026-07-24 — explicit request: the
		   hamburger read as too close to the logo at Mobile widths. The
		   toggle button is centered inside THIS box via justify-content:
		   center (the box itself already fills its whole grid track via
		   width:100%, so justify-self:center above has no visible effect
		   on its own) — asymmetric padding shrinks the flex content box
		   from the right only, shifting the centered button toward the
		   left margin by exactly half the padding value (standard
		   centered-content math), without touching the track width, the
		   logo, or the cart. First pass: 8px (4px shift). Then 14px (7px
		   shift). Then +5px shift more, same day ("um pouco mais afastado
		   da logotipo") -> 24px (12px shift total). */
		padding-right: 24px;
		/* See "DROPDOWN WIDTH/POSITION" above — this is load-bearing for
		   the dropdown panel's own positioning, not a centering leftover. */
		position: static;
	}

	/* Symbol size only — the CLICKABLE button below keeps its own
	   48x48px minimum tap target regardless of how small/large the
	   glyph itself is. Set directly on the toggle button's own
	   font-size source (--nav-menu-icon-size, read by Elementor's own
	   widget-nav-menu.min.css as .elementor-menu-toggle{font-size:
	   var(--nav-menu-icon-size,22px)}) rather than depending on custom-
	   property inheritance from a further ancestor.
	   Both icon states (.elementor-menu-toggle__icon--open, the
	   hamburger bars, and --close, the X) are 1em x 1em SVGs (confirmed
	   in widget-nav-menu.min.css: .e-font-icon-svg{height:1em;
	   width:1em}) sized off this SAME font-size by default — swapped
	   via display:none/block on .elementor-active. The button's own
	   padding is also .25em (the widget's own base rule), so its box
	   dimensions — and therefore its geometric center — never shift
	   when the icon toggles, REGARDLESS of the --close-specific scale
	   override below (that only shrinks the SVG's rendered content
	   inside its still-1em box, not the box itself). */
	header.elementor-170 .elementor-element-1cdf63a .elementor-menu-toggle {
		--nav-menu-icon-size: var(--supra-header-menu-icon);
		min-width: 48px;
		min-height: 48px;
		margin: 0;
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* X (open state) only, decoupled from the hamburger's own
	   --supra-header-menu-icon curve above — that curve stays
	   completely untouched, so the closed-state hamburger is byte-for-
	   byte identical to before. transform:scale(0.85) (15% smaller)
	   rather than a second clamp() formula: scale is relative to
	   whatever the underlying 1em-based size already computes to at any
	   given viewport width, so this is exactly 15% smaller at every
	   width along the same fluid curve, not a separately-tuned
	   approximation. Doesn't change the SVG's own 1em layout box (only
	   its rendered content), so the button's flex-centered box and tap
	   target are unaffected — transform-origin defaults to the box's
	   own center, so the shrink stays visually centered with no extra
	   positioning needed. */
	header.elementor-170 .elementor-element-1cdf63a .elementor-menu-toggle__icon--close {
		transform: scale(0.85);
	}

	/* ---- Column 2: logo (elementor-element-43ef286) ---- */

	header.elementor-170 .elementor-element.elementor-element-43ef286 {
		grid-column: 2;
		grid-row: 1;
		justify-self: stretch;
		align-self: center;
		width: 100%;
		min-width: 0;
		margin: 0;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	header.elementor-170 .elementor-element.elementor-element-43ef286 a {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-inline: auto;
		max-width: 100%;
	}

	/* Fluid width on the actual image, replacing Elementor's own
	   discrete steps (100% of column at Tablet, fixed 196px at Mobile,
	   both confirmed in post-170.css). height:auto + object-fit:contain
	   preserve the image's own aspect ratio; the image file itself is
	   untouched, no transform, no compensating margin. */
	header.elementor-170 .elementor-element.elementor-element-43ef286 img {
		width: var(--supra-header-logo-width);
		max-width: 100%;
		height: auto;
		object-fit: contain;
		flex-shrink: 0;
		margin-inline: auto;
		display: block;
	}

	/* ---- Column 3: cart (elementor-element-5c46c02) ---- */

	header.elementor-170 .elementor-element.elementor-element-5c46c02 {
		grid-column: 3;
		grid-row: 1;
		--toggle-icon-padding: 0px;
		/* +1px optical correction over the shared icon variable — see
		   banner above. Badge size is controlled separately by
		   Elementor's own --items-indicator- variables, untouched here —
		   it does not scale with the icon 1:1, so it stays legible and
		   inside the column regardless of icon size. */
		--toggle-icon-size: calc(var(--supra-header-side-icon) + 1px);
		justify-self: center;
		align-self: center;
		width: 100%;
		height: 100%;
		min-width: 0;
		max-width: 100%;
		margin: 0;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	header.elementor-170 .elementor-element-5c46c02 .elementor-menu-cart__toggle_wrapper,
	header.elementor-170 .elementor-element-5c46c02 .elementor-menu-cart__toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0;
		min-width: 0;
		max-width: 100%;
		height: 100%;
	}

	header.elementor-170 .elementor-element-5c46c02 .elementor-menu-cart__toggle_button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		height: 100%;
		margin: 0;
		box-sizing: border-box;
		white-space: nowrap;
		line-height: 1;
	}

	/* Scoped to header.elementor-170 .elementor-element-5c46c02 .elementor-
	   menu-cart__toggle_button specifically — can never reach the mini-cart
	   SIDE PANEL (a different DOM subtree, opened on click) or any other
	   .elementor-button-text/.woocommerce-Price-amount elsewhere on the
	   site (product prices, related products, etc.). Deliberately not a
	   bare .elementor-button-text selector. */
	header.elementor-170 .elementor-element-5c46c02 .elementor-menu-cart__toggle_button .elementor-button-text {
		display: none !important;
	}

	/* ---- Dropdown panel (elementor-element-1cdf63a) — positioning
	   only, unchanged this round. Internal layout/category list stays
	   out of scope. ---- */

	header.elementor-170 .elementor-element-1cdf63a nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		width: 100%;
		max-width: none;
		z-index: 9997;
		background-color: #ffffff;
		overflow-x: hidden;
		overflow-y: auto;
		max-height: calc(100vh - 80px);
	}

	header.elementor-170 .elementor-element-1cdf63a .elementor-nav-menu--dropdown .elementor-item {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 48px;
		white-space: normal;
		word-break: normal;
		overflow-wrap: normal;
		text-align: left;
		/* Divider between categories, added 2026-07-24 — confirmed real
		   selector via the widget's own PHP render() (wp_nav_menu() with
		   Elementor's nav_menu_link_attributes filter): every dropdown
		   link is exactly .elementor-item (this same selector), one per
		   <li>, so a border-bottom here already spans the dropdown's full
		   width (this element is already width:100%) without touching the
		   <li>/<ul> at all. box-sizing:border-box is the sitewide reset
		   (theme.css + Elementor's own frontend.min.css both declare
		   *{box-sizing:border-box}), so this 1px border is absorbed into
		   the existing min-height:48px box, not added on top of it — the
		   approved tap-target height is unaffected. Color: rgba(66, 95,
		   219, 0.16) — not a new value, this is the site's own #425fdb
		   (card borders, price, primary button, logo) at low opacity, the
		   same direction given as a fallback but really just the existing
		   brand blue reused, not invented. */
		border-bottom: 1px solid rgba(66, 95, 219, 0.16);
		/* Fill-capsule interaction, added 2026-07-24 — the pseudo-element
		   below needs a positioned, clipped, isolated ancestor: relative
		   for its own inset:0 to resolve against this box (not some
		   further ancestor); overflow:hidden so scaleX(0)->1 never
		   visually escapes this item's own row into its neighbors;
		   isolation:isolate so the ::before's z-index:-1 stays scoped to
		   THIS item's own stacking context, never falling behind the
		   dropdown's own background or a sibling item instead.
		   CORRECTED 2026-07-24: color no longer transitions over 0.75s —
		   live validation found the text staying dark/blue for part of
		   the fill's own duration, unreadable against the incoming blue
		   background. Text color now flips instantly (0s); only the
		   divider's own border-bottom-color keeps a short, separate fade
		   (0.15s) so it doesn't "snap" transparent the instant the fill
		   starts covering it.
		   background-color/color here are also the base/resting state
		   now (#ffffff/#0e0e66, both !important) — see the neutralizing
		   rule right below for why !important is required: Elementor's
		   own widget-nav-menu.min.css ships `.elementor-nav-menu--dropdown
		   .elementor-item:hover,:focus,.elementor-item-active,.highlighted
		   {background-color:#3f444b;color:#fff}` (dark gray, #3f444b) and
		   `.elementor-nav-menu--dropdown a{color:#33373d}` — both
		   confirmed by reading that file directly, not assumed — which is
		   the real source of the gray flash reported live. */
		position: relative;
		overflow: hidden;
		isolation: isolate;
		background-color: #ffffff !important;
		color: #0e0e66 !important;
		transition: color 0s linear, border-bottom-color 0.15s ease;
	}

	/* Belt-and-suspenders against the same native rule's own :hover/
	   :focus/.elementor-item-active/.highlighted selectors specifically
	   (the base rule above already wins on specificity+!important
	   regardless, but this documents and locks down each of Elementor's
	   own trigger points explicitly, per this round's own instruction).
	   background-image/box-shadow are neutralized too — the native rule
	   itself sets none, but nothing here should assume that stays true
	   in a future Elementor update. */
	header.elementor-170 .elementor-element-1cdf63a .elementor-nav-menu--dropdown .elementor-item:hover,
	header.elementor-170 .elementor-element-1cdf63a .elementor-nav-menu--dropdown .elementor-item:focus,
	header.elementor-170 .elementor-element-1cdf63a .elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
	header.elementor-170 .elementor-element-1cdf63a .elementor-nav-menu--dropdown .elementor-item.highlighted {
		background-color: #ffffff !important;
		background-image: none !important;
		box-shadow: none !important;
	}

	/* Every <li> WordPress's own menu walker renders carries this class —
	   explicit safety net asked for this round so no ancestor box can
	   ever show through as gray either, even though the dropdown <nav>
	   itself is already white (section further down this file). */
	header.elementor-170 .elementor-element-1cdf63a .elementor-nav-menu--dropdown li.menu-item {
		background-color: #ffffff;
	}

	/* Last item gets no trailing line — "entre todas as categorias" means
	   between each pair, not a rule after the very last one too (which
	   would double up against whatever sits right below the dropdown). */
	header.elementor-170 .elementor-element-1cdf63a .elementor-nav-menu--dropdown li:last-child > .elementor-item {
		border-bottom: none;
	}

	/* The fill itself — a single pseudo-element per item, starting fully
	   collapsed (scaleX(0)) from the left edge (transform-origin:left).
	   Paints ON TOP of the link's own background-color (per the CSS
	   painting order, a stacking context's negative-z-index children
	   paint above that context's own root background, below its normal-
	   flow content) and BEHIND the text (normal flow, paints last) — so
	   giving the link an opaque white background above does NOT hide
	   this fill, confirmed by that painting-order reasoning, not
	   assumed. 0.75s cubic-bezier(0.22,1,0.36,1) — the exact same
	   duration/easing already used by the Desktop capsule's own pill
	   engine (initSharedPillNavigation's "easing" option, further up
	   this file), reused verbatim, unchanged this round (only color
	   timing was ever the problem, not the fill itself). */
	header.elementor-170 .elementor-element-1cdf63a .elementor-nav-menu--dropdown .elementor-item::before {
		content: "";
		position: absolute;
		inset: 0;
		background-color: #425fdb;
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
		z-index: -1;
		pointer-events: none;
	}

	/* Active states — focus-visible (keyboard), .supra-is-clicked
	   (touch/click, added by custom-nav-menu.js), .elementor-item-active
	   (Elementor's own current-item class, applied directly to the link
	   by the widget's PHP), and the current category's own <li> classes
	   (WordPress's current-menu-item/current-menu-ancestor, plus this
	   project's current-product_cat-ancestor variant) — all get the SAME
	   final visual (full fill + white text, instantly + transparent
	   divider), deliberately NOT gated behind (hover:hover) since these
	   must all work on touch devices too. Hover itself lives in its own,
	   separately-gated block below. Ordered AFTER the neutralizing
	   :hover/:focus/.elementor-item-active/.highlighted rule above (same
	   specificity family, later source order — and here, color/border
	   also carry !important per this round's own instruction 7 — so
	   this reliably wins colour/border for the states that must show
	   blue+white, while the neutralizing rule above still wins the
	   background-color everywhere, letting the ::before fill be the only
	   thing that ever visually reads as blue). */
	header.elementor-170 .elementor-element-1cdf63a .elementor-nav-menu--dropdown .elementor-item:focus-visible,
	header.elementor-170 .elementor-element-1cdf63a .elementor-nav-menu--dropdown .elementor-item.supra-is-clicked,
	header.elementor-170 .elementor-element-1cdf63a .elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
	header.elementor-170 .elementor-element-1cdf63a .elementor-nav-menu--dropdown li.current-menu-item > .elementor-item,
	header.elementor-170 .elementor-element-1cdf63a .elementor-nav-menu--dropdown li.current-menu-ancestor > .elementor-item,
	header.elementor-170 .elementor-element-1cdf63a .elementor-nav-menu--dropdown li.current-product_cat-ancestor > .elementor-item {
		color: #ffffff !important;
		border-bottom-color: transparent !important;
	}

	header.elementor-170 .elementor-element-1cdf63a .elementor-nav-menu--dropdown .elementor-item:focus-visible::before,
	header.elementor-170 .elementor-element-1cdf63a .elementor-nav-menu--dropdown .elementor-item.supra-is-clicked::before,
	header.elementor-170 .elementor-element-1cdf63a .elementor-nav-menu--dropdown .elementor-item.elementor-item-active::before,
	header.elementor-170 .elementor-element-1cdf63a .elementor-nav-menu--dropdown li.current-menu-item > .elementor-item::before,
	header.elementor-170 .elementor-element-1cdf63a .elementor-nav-menu--dropdown li.current-menu-ancestor > .elementor-item::before,
	header.elementor-170 .elementor-element-1cdf63a .elementor-nav-menu--dropdown li.current-product_cat-ancestor > .elementor-item::before {
		transform: scaleX(1);
	}

	/* Keyboard focus indicator — inset box-shadow, not outline: an
	   outline on an overflow:hidden element risks being clipped in some
	   browsers (the outline would otherwise draw just outside the border
	   box, right where overflow:hidden starts cutting); an INSET shadow
	   only ever paints inside the box's own edge, so it's never affected
	   by this item's overflow:hidden, and reads clearly white-on-blue
	   once the fill/focus-visible state above is active. */
	header.elementor-170 .elementor-element-1cdf63a .elementor-nav-menu--dropdown .elementor-item:focus-visible {
		outline: none;
		box-shadow: inset 0 0 0 2px #ffffff;
	}
}

/* Hover — deliberately its OWN, separately-gated media query (not nested
   inside the block above, since plain CSS can't nest @media) so it can
   never get stuck "on" after a tap on a touch device that happens to also
   match max-width:1024px. focus-visible/.supra-is-clicked/current-item
   above are NOT inside this gate — they must keep working everywhere. */
@media (max-width: 1024px) and (hover: hover) and (pointer: fine) {
	header.elementor-170 .elementor-element-1cdf63a .elementor-nav-menu--dropdown .elementor-item:hover {
		color: #ffffff !important;
		border-bottom-color: transparent !important;
	}

	header.elementor-170 .elementor-element-1cdf63a .elementor-nav-menu--dropdown .elementor-item:hover::before {
		transform: scaleX(1);
	}
}

/* Reduced motion — the fill still happens (state changes are preserved,
   nothing is hidden), it just happens instantly instead of over 0.75s,
   and custom-nav-menu.js separately skips its own 750ms navigation delay
   under this same media query (checked live via matchMedia at click
   time, not duplicated here). */
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
	header.elementor-170 .elementor-element-1cdf63a .elementor-nav-menu--dropdown .elementor-item {
		transition: none;
	}

	header.elementor-170 .elementor-element-1cdf63a .elementor-nav-menu--dropdown .elementor-item::before {
		transition: none;
	}
}

/* ====================================================================
 * CATEGORY MENU OVERLAY — added 2026-07-24
 * ====================================================================
 * Single, JS-inserted <div class="supra-category-menu-overlay"> (see
 * custom-nav-menu.js) — one instance in <body>, never recreated per
 * open/close. Default/closed state lives here, unconditionally, so a
 * visitor never sees it unless JS explicitly adds .is-visible (same
 * "default = safe final state" convention used by the Hero's own
 * will-animate class elsewhere in this project).
 *
 * Color/opacity: rgba(81, 81, 106, 0.89) — copied verbatim, not
 * estimated, from the YITH Quick View modal's own real overlay rule
 * (wp-content/themes/hello-commerce/assets/css/custom-quick-view.css:
 * "#yith-quick-view-modal .yith-quick-view-overlay{background:rgba(81,
 * 81, 106, 0.89) !important}"), confirmed by reading that file directly.
 * One rgba value (color+opacity combined), not separate background-
 * color/opacity properties — reproduced exactly the same way here so
 * opacity never has to apply to any ancestor.
 *
 * GEOMETRY — CORRECTED 2026-07-24. Previously position:fixed + inset:0,
 * covering the full viewport from y=0 — which visibly darkened the
 * Header and dropdown themselves (confirmed live), and was "fixed" with
 * a z-index fight rather than a structural change. The real fix: the
 * overlay's own top edge now starts exactly at the actual measured
 * bottom edge of the Header+dropdown block (--supra-category-overlay-
 * top, written by custom-nav-menu.js via
 * Math.max(header.getBoundingClientRect().bottom,
 * dropdown.getBoundingClientRect().bottom) every time the menu opens,
 * resizes, or the dropdown's own height changes — never a fixed px
 * guess, since Header height differs Mobile vs Tablet, the dropdown has
 * its own content-driven height, and the WP admin bar may or may not be
 * present). left/right/bottom stay at 0 (the overlay still needs to
 * reach the page's full width and all the way to the bottom). Fallback
 * 0px only matters before the variable is ever set (harmless — the
 * overlay is invisible via opacity/visibility until .is-visible is
 * added anyway).
 *
 * z-index: 1390 — now purely "above normal page content, below Quick
 * View (1400-1500, yith-quick-view.css) and below the mini-cart's own
 * .elementor-menu-cart__container (9998, proelements)". No longer
 * fighting the Header for stacking priority at all, since the overlay
 * no longer physically occupies that screen area — the Header/dropdown
 * need no z-index of their own anymore (removed from the <=1024px
 * block above; that rule's only purpose was covering for the old
 * inset:0 approach).
 */
.supra-category-menu-overlay {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: var(--supra-category-overlay-top, 0px);
	background: rgba(81, 81, 106, 0.89);
	z-index: 1390;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 180ms ease, visibility 180ms ease;
}

.supra-category-menu-overlay.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

@media (min-width: 1025px) {
	.supra-category-menu-overlay {
		display: none;
	}
}