/**
 * HerbaShape navigation — language switcher and category tree.
 *
 * Loads after design-system.css (the "Alpine Apothecary" layer) and borrows its
 * vocabulary rather than inventing one: the same green tokens, the same pill
 * radius on controls, the same soft card shadow, the same
 * cubic-bezier(.2,.7,.3,1) easing the sticky nav and the product cards use.
 *
 * Sections:
 *   1. Desktop language dropdown  (inc/language-switcher.php)
 *   2. Slide-out language panel   (inc/language-switcher.php)
 *   3. Sidebar category tree      (inc/class-hs-product-cat-tree-walker.php)
 *   4. Reduced motion
 */

/* ------------------------------------------------------------------ *
 * 1. Desktop language dropdown — header row, between search and account
 * ------------------------------------------------------------------ */

/* The shared flag chip. One size everywhere, a hairline inset instead of a
   border so a white flag (FR, IT) still reads as a rectangle on white. */
.hs-flag {
	display: block;
	flex: 0 0 auto;
	width: 22px;
	height: 15px;
	border-radius: 3px;
	box-shadow: inset 0 0 0 1px rgba(20, 48, 26, 0.16);
}

.hs-lang {
	display: inline-flex;
	align-items: center;
	margin-right: 16px;
}

.hs-lang__wrap {
	position: relative;
}

/* The closed control. `<summary>` needs its marker removed in three dialects
   before it stops drawing a triangle. */
.hs-lang__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--hs-line-strong);
	border-radius: 999px;
	background: var(--hs-white);
	color: var(--hs-forest);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1;
	cursor: pointer;
	list-style: none;
	-webkit-user-select: none;
	user-select: none;
	transition: border-color 0.2s ease, box-shadow 0.25s ease, background-color 0.2s ease;
}
.hs-lang__btn::-webkit-details-marker { display: none; }
.hs-lang__btn::marker { content: ""; }

.hs-lang__btn:hover,
.hs-lang__wrap[open] > .hs-lang__btn {
	border-color: var(--hs-green);
	box-shadow: var(--hs-shadow-sm);
}
.hs-lang__btn:focus-visible {
	outline: 2px solid var(--hs-green);
	outline-offset: 2px;
}

/* The control shows the two-letter code by default and the endonym only once
   the row can hold it. 1340px is measured, not guessed: the search field's
   right edge and the account column's left edge converge as the viewport
   narrows, and with the longest label ("Français", 136px of pill) the gap
   between search and switcher is 30px at 1366, 26px at 1340 and only 11px at
   1280 — crowded enough to read as an accident. Both spellings are always in
   the markup, so this is a display choice and never a content one: a screen
   reader is read the full language name at every width. */
.hs-lang__name { display: none; }
@media (min-width: 1340px) {
	.hs-lang__name { display: inline; }
	.hs-lang__code { display: none; }
}

.hs-lang__chev {
	opacity: 0.55;
	transition: transform 0.2s ease;
}
.hs-lang__wrap[open] .hs-lang__chev { transform: rotate(180deg); }

.hs-lang__menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 9990;
	min-width: 190px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--hs-white);
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-radius-sm);
	box-shadow: var(--hs-shadow);
	animation: hs-lang-in 0.18s cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes hs-lang-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

.hs-lang__item { margin: 0; list-style: none; }

.hs-lang__opt {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 10px;
	color: var(--hs-forest) !important;
	font-size: 0.88rem;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none !important;
	transition: background-color 0.16s ease;
}
.hs-lang__opt:hover { background: var(--hs-soft); }
.hs-lang__opt:focus-visible {
	background: var(--hs-soft);
	outline: 2px solid var(--hs-green);
	outline-offset: -2px;
}

.hs-lang__optcode {
	margin-left: auto;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	color: var(--hs-muted);
}

/* ------------------------------------------------------------------ *
 * 2. Slide-out language panel — bottom of the mobile menu
 * ------------------------------------------------------------------ */

/* WPML's own 18x12 strip is no longer rendered (inc/language-switcher.php
   replaces supplero_mobile_nav()); this keeps it gone if anything else ever
   calls the parent's helper. */
.supplero-mobile-nav .supplero-language-switcher-mobile { display: none !important; }

.hs-langm {
	margin: 20px 0 6px;
	padding: 16px 4px 4px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.hs-langm__title {
	margin: 0 0 10px;
	padding: 0 6px;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

/* Two columns of 48px-tall rows: each target is roughly 130x48, comfortably
   past the 44x44 the Apple HIG asks for, and both columns stay in one thumb
   sweep at the bottom of the panel. */
.hs-langm__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.hs-langm__item { margin: 0; padding: 0; list-style: none; border: 0; }

.hs-langm__link {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 8px 9px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.06);
	color: #fff !important;
	font-size: 0.82rem;
	line-height: 1.2;
	text-decoration: none !important;
	position: relative;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}
.hs-langm__link:active { background: rgba(255, 255, 255, 0.14); }

.hs-langm__link .hs-flag {
	width: 26px;
	height: 18px;
	border-radius: 4px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.hs-langm__name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The language being read: brand green, heavier, ticked. */
.hs-langm__link.is-current {
	background: var(--hs-green);
	border-color: var(--hs-green);
	font-weight: 600;
}
/* The tick is taken out of the row rather than laid out in it. Measured in
   the live panel: a half-width cell gives 112px of content, the flag and its
   gap eat 34, and an in-flow tick took another 22 — leaving 56px for a label
   that needs 56 ("Deutsch" and "Français" both, bold), so the current
   language was the one that truncated. Absolute, it costs the label only the
   18px of reserve below. */
.hs-langm__tick {
	position: absolute;
	top: 50%;
	right: 9px;
	transform: translateY(-50%);
}
.hs-langm__link.is-current .hs-langm__name { padding-right: 18px; }

/* ------------------------------------------------------------------ *
 * 3. Sidebar category tree
 * ------------------------------------------------------------------ */

/* THE FIX. supplero/assets/css/woocommerce/woocommerce.css:3095 makes every
   row `display:flex; justify-content:space-between`, which laid the toggle,
   the label, the count and the whole nested list out side by side — that one
   declaration is what produced the second arrow's position, the submenu that
   flew out to the right, and the ragged left edge (rows with children got an
   extra flex item, so `space-between` gave each of them a different offset).
   A block row puts the tree back under the label where it belongs. */
.widget_product_categories li.cat-item {
	/* `!important` earns its place here: the parent theme enqueues
	   woocommerce.css *after* this file (verified in the rendered <head> —
	   navigation.css is stylesheet 29, woocommerce.css is 30), so its
	   identically specific `li.cat-item { display: flex }` would otherwise win
	   the tie on source order and put the whole bug straight back. */
	display: block !important;
	margin: 0 0 1px;
	line-height: inherit;
}
.widget_product_categories ul.product-categories {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The old left-hand chevron (design-system.css:1003) is the "second arrow".
   With a real toggle on the right it is redundant, and removing it is what
   finally gives every row at a depth the same left edge. */
.widget_product_categories li > a::before {
	content: none !important;
	display: none !important;
}

/* Belt and braces: the parent's main.js no longer finds `> ul.children` to
   attach to, so these are never injected — but a cached copy of that script
   must not be able to put a second arrow back. */
.widget_product_categories .icon-plus,
.widget_product_categories .icon-minus { display: none !important; }

/* Every selector below is scoped to the widget, and that is not decoration:
   Elementor's global kit stylesheet ships `.elementor-kit-10 button { … }` and
   `.elementor-kit-10 a { … }` on the body class, which at (0,1,1) outranks a
   bare `.hs-cattree__toggle`. Unscoped, the toggle rendered as a full-size
   green Elementor button — 66x34 with 33px of padding — instead of a chevron.
   The widget prefix takes it to (0,2,0) and wins without a single !important. */

.widget_product_categories .hs-cattree__row {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 2px 4px 2px 10px;
	border-radius: 10px;
	transition: background-color 0.18s ease;
}
.widget_product_categories .hs-cattree__row:hover { background: var(--hs-soft); }

.widget_product_categories li.current-cat > .hs-cattree__row { background: var(--hs-mist); }

.widget_product_categories .hs-cattree__link {
	flex: 1 1 auto;
	min-width: 0;
	display: block;
	padding: 6px 0;
	font-size: 0.92rem;
	line-height: 1.35;
	color: var(--hs-forest);
	text-decoration: none;
}
.widget_product_categories .hs-cattree__link:hover { color: var(--hs-green-dark); }
.widget_product_categories .hs-cattree__link:focus-visible {
	outline: 2px solid var(--hs-green);
	outline-offset: 2px;
	border-radius: 6px;
}
.widget_product_categories li.current-cat > .hs-cattree__row .hs-cattree__link {
	color: var(--hs-green-dark);
	font-weight: 600;
}
.widget_product_categories .hs-cattree__link .count {
	color: var(--hs-muted);
	font-size: 0.82em;
}

/* One arrow, on the right, pointing at where the children will appear.
   Hidden until `hs-js` confirms the script that drives it is running — see
   the no-JavaScript note in inc/category-nav.php. 34px square plus the row's
   own padding clears the 44px touch guidance, and touch-action keeps a tap
   from being read as the start of a scroll. */
.widget_product_categories .hs-cattree__toggle {
	display: none;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 34px;
	min-width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	background-color: transparent;
	color: var(--hs-green-dark);
	font-size: 0;
	line-height: 0;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	transition: background-color 0.18s ease;
}
html.hs-js .widget_product_categories .hs-cattree__toggle { display: inline-flex; }
.widget_product_categories .hs-cattree__toggle:hover {
	background-color: rgba(74, 157, 63, 0.14);
	color: var(--hs-green-dark);
}
.widget_product_categories .hs-cattree__toggle:focus-visible {
	outline: 2px solid var(--hs-green);
	outline-offset: 1px;
}

.widget_product_categories .hs-cattree__chev {
	transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.widget_product_categories li.is-open > .hs-cattree__row .hs-cattree__chev {
	transform: rotate(90deg);
}

/* Children: one clear step in, on a hairline rail so the depth is legible
   without counting pixels. `height` is what navigation.js animates. */
.widget_product_categories .hs-cattree__sub {
	margin: 0 0 4px 19px;
	padding: 0 0 0 13px;
	list-style: none;
	overflow: hidden;
	border-left: 1px solid var(--hs-line-strong);
	transition: height 0.26s cubic-bezier(0.2, 0.7, 0.3, 1);
}
html.hs-js .widget_product_categories li:not(.is-open) > .hs-cattree__sub {
	display: none;
}

/* ------------------------------------------------------------------ *
 * 4. Reduced motion
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.hs-lang__btn,
	.hs-lang__chev,
	.hs-lang__opt,
	.hs-langm__link,
	.widget_product_categories .hs-cattree__row,
	.widget_product_categories .hs-cattree__toggle,
	.widget_product_categories .hs-cattree__chev,
	.widget_product_categories .hs-cattree__sub {
		transition: none !important;
	}
	.hs-lang__menu { animation: none !important; }
}