/**
 * Desktop mega-menu + mobile drawer.
 *
 * Rebuilt 2026-07-28 (0.1.19). Both components are now rendered as
 * SIBLINGS of Storefront's own #site-navigation (see inc/mega-menu.php),
 * never nested inside its <ul>/<li> markup — so none of the 6 Storefront
 * collisions documented across 0.1.9–0.1.18 (any-depth "ul ul", the
 * touch-device submenu class, the handheld button::after caret, the
 * ul-li-a color specificity fight, the "col-full" class collision) can
 * reach these selectors: they simply aren't descendants of
 * ".main-navigation" or ".handheld-navigation" anymore. No defensive
 * overrides are needed here as a result — every selector below is a plain,
 * first-party style, not a fight against Storefront's own CSS.
 *
 * The old accordion/groups-switcher system (setOpen(), placeholder text,
 * per-group toggle buttons) is gone too: this design has no click-to-reveal
 * inside a panel — every desktop column and every mobile leaf already
 * shows its own final links immediately. Only the top-level trigger
 * (Femme/Homme/Enfants) and, on mobile, each drill-down row open a panel.
 */

/* =========================================================
   Desktop mega-menu (>=1280px — see layout.css's mobile-nav block
   comment for why this isn't Storefront's own 768px default)
   ========================================================= */
@media (min-width: 1280px) {
	/* 0.1.26: .storefront-primary-navigation and its own inner .col-full
	   are display:contents now (see layout.css's header-grid block) — real
	   boxes for them (position:relative, the old flex row spreading nav/
	   cart/account across one line) no longer apply to a contents element
	   at all, and would be dead weight left here. #site-navigation, the
	   cart and the account link are real CSS Grid items of
	   ".site-header > .col-full" now instead (layout.css again), and
	   .site-header itself is the mega-menu panels' new position:relative
	   anchor. See layout.css for the full explanation and the real
	   Storefront-source verification behind the two hook-priority moves
	   this relies on (inc/header-footer.php). */
	.cristaline-mobile-drawer {
		display: none !important;
	}

	/* 0.1.20: rescoped through ".main-navigation" (0,2,1) — the previous
	   bare ".cristaline-has-menu > a" (0,1,1) was losing to Storefront's
	   own ".main-navigation ul li a" / ".secondary-navigation ul li a"
	   (0,1,3), so "display: inline-flex" never actually applied (confirmed
	   live: computed display was "block"), which is why the gap had no
	   effect and the chevron sat flush against the text. Same family of
	   specificity fight as the 0.1.16 "Vêtements Bébé" color bug — see
	   CLAUDE.md. */
	.main-navigation .cristaline-has-menu > a {
		align-items: center;
		display: inline-flex;
		gap: 7px;
	}

	/* Plain CSS chevron (borders, rotated) — no injected <button>, no SVG,
	   nothing a Storefront selector shaped like "button::after" or
	   "ul ul" could ever match, since this is a pseudo-element on our own
	   <a>, scoped to our own class. */
	.cristaline-has-menu > a::after {
		border-bottom: 1.5px solid currentColor;
		border-right: 1.5px solid currentColor;
		content: "";
		display: inline-block;
		height: 6px;
		transform: rotate(45deg);
		transition: transform 150ms ease;
		width: 6px;
	}

	.cristaline-has-menu.is-open > a::after {
		transform: rotate(-135deg);
	}

	.cristaline-mega-menu {
		background-color: var(--color-bg);
		border-top: 1px solid var(--color-accent-soft);
		/* 0.1.20: slightly more visible separation from the page, per the
		   client's request — a bit deeper than the shared --shadow-card
		   token (kept everywhere else untouched, no palette change), still
		   the same ink-based rgba, still no heavy/dark shadow. */
		box-shadow: 0 4px 16px rgba(23, 23, 23, .08);
		display: none;
		left: 0;
		opacity: 0;
		position: absolute;
		right: 0;
		top: 100%;
		transform: translateY(-6px);
		transition: opacity 200ms ease, transform 200ms ease;
		z-index: 90;
	}

	.cristaline-mega-menu.is-open {
		display: block;
		opacity: 1;
		transform: translateY(0);
	}

	.cristaline-mega-menu__inner {
		margin: 0 auto;
		max-width: var(--container-max);
		padding: var(--space-8) var(--space-6);
	}

	.cristaline-mega-menu__columns {
		display: grid;
		gap: var(--space-8);
		grid-template-columns: repeat(4, 1fr);
	}

	/* 0.1.23: applied to Femme/Homme's own 4 columns AND, now, to every
	   Enfants profile's 4 columns too (see cristaline_render_desktop_enfants_panel()
	   in inc/mega-menu.php) — Vêtements gets noticeably more room than
	   Marques everywhere in this menu, not just Femme/Homme. A profile with
	   only 3 columns (Bébé fille/garçon, no Accessoires) simply leaves the
	   4th track's space empty rather than redistributing — an empty gap,
	   never clipped/wrapped text, which is the client's actual concern. */
	.cristaline-mega-menu__columns--genre {
		grid-template-columns: 31fr 25fr 27fr 17fr;
	}

	/* Enfants' tabbed panel (0.1.21) — a side-by-side layout in normal flow,
	   never position:absolute for the profile content (client instruction:
	   no fly-out, no floating sub-menu). Only the OUTER ".cristaline-mega-
	   menu" itself is positioned (already handled above); everything inside
	   ".cristaline-mega-menu__inner--tabs" is a plain flex row. */
	.cristaline-mega-menu__inner--tabs {
		display: flex;
		gap: var(--space-8);
	}

	.cristaline-mega-menu__tabs {
		border-right: 1px solid var(--color-accent-soft);
		display: flex;
		flex: 0 0 180px;
		flex-direction: column;
		/* 0.1.24: gap doubled (4px → 8px) and row padding increased — more
		   breathing room between Fille/Garçon/Bébé fille/Bébé garçon, and a
		   bigger hover/click target on each, per the client's own request. */
		gap: var(--space-2);
		padding-right: var(--space-6);
	}

	/* Real, always-ink links (never greyed — see CLAUDE.md's own recorded
	   "pale until selected" lesson) — the active one is communicated only
	   by background + a champagne left border, same convention as every
	   other selection state in this menu. */
	.cristaline-mega-menu__tab {
		border-left: 2px solid transparent;
		border-radius: var(--radius-sm);
		color: var(--color-ink);
		font-family: var(--font-nav);
		font-size: .9rem;
		padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
	}

	.cristaline-mega-menu__tab:hover,
	.cristaline-mega-menu__tab:focus-visible {
		background-color: var(--color-bg-alt);
		color: var(--color-ink);
	}

	.cristaline-mega-menu__tab.is-active {
		background-color: var(--color-bg-alt);
		border-left-color: var(--color-gold);
	}

	.cristaline-mega-menu__tab-panels {
		flex: 1;
		min-width: 0;
		/* 0.1.25: lowered 400px -> 320px. 0.1.24 set the floor above the
		   tallest real profile (Fille/Garçon, ~372px) specifically so no
		   profile switch would ever visibly shrink the panel — but that left
		   Bébé fille/garçon (~305px of real content) with ~95px of dead
		   space, which the client flagged this round as excessive. 320px is
		   just above Bébé's real content (a small, deliberate "reasonable
		   bottom space", not a bare content-hugging 305px) while staying
		   BELOW Fille/Garçon's 372px, so those two now size to their own
		   real content instead of being artificially inflated — the
		   trade-off is a modest ~50px height change when switching between
		   the two profile groups, not the ~95px gap this was creating for
		   Bébé every time it's shown. */
		min-height: 320px;
		position: relative;
	}

	.cristaline-mega-menu__tab-panel {
		display: none;
	}

	.cristaline-mega-menu__tab-panel.is-active {
		display: block;
	}

	/* 0.1.23: font-weight 600 + a touch more letter-spacing establishes this
	   as the top of the column's own visual hierarchy (title > "voir tous
	   les X" cta > final categories) — client's own 3-level request. Same
	   size/font/color/margin as before (already ~12px of space below,
	   within the 10-14px asked for) — no font change, no oversized text. */
	/* 0.1.25: bumped 600 -> 700 — the client asked for column titles to read
	   as unambiguously the strongest of the 3 hierarchy levels; at 600 they
	   tied with the "Voir tous les X" cta line just below, which is also
	   600 (see .col-cta a below). Uppercase + letter-spacing were already
	   doing part of that job, weight now backs it up. */
	.cristaline-mega-menu__col-title {
		color: var(--color-ink);
		font-family: var(--font-nav);
		font-size: .8rem;
		font-weight: 700;
		letter-spacing: .06em;
		margin: 0 0 var(--space-3);
		text-transform: uppercase;
	}

	/* 0.1.30: Marques' own column heading is a real <a> (see
	   cristaline_render_desktop_column() in inc/mega-menu.php), not a plain
	   <p> like VÊTEMENTS/CHAUSSOURES/ACCESSOIRES — everything else about
	   ".col-title" (color/size/weight/letter-spacing/uppercase/margin) is
	   inherited unchanged; this modifier only adds the interactive states a
	   clickable heading needs (no default underline, one on hover/focus,
	   matching ".col-cta a"'s own hover treatment right below). */
	.cristaline-mega-menu__col-title--link {
		display: block;
		text-decoration: none;
	}

	.cristaline-mega-menu__col-title--link:hover,
	.cristaline-mega-menu__col-title--link:focus-visible {
		text-decoration: underline;
		text-underline-offset: .2em;
	}

	.cristaline-mega-menu__col-list {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		margin: 0;
		padding: 0;
	}

	.cristaline-mega-menu__col-list li {
		list-style: none;
	}

	/* Every real category is always ink, in every state — normal, hover,
	   focus — never a lighter/greyed tone (see CLAUDE.md's own recorded
	   lesson: a "pale until selected" scheme collided badly with real
	   interactive links in the old architecture; this rebuild never
	   introduces that distinction in the first place). Selection/emphasis
	   isn't a concept at this level any more — every link here is always
	   equally "live", so there's nothing to visually distinguish. Final
	   categories keep this exact normal weight, unchanged (client's own
	   instruction: "conserver leur graisse normale") — only the more
	   specific ".col-cta a" rule below overrides weight, for that one line
	   only. */
	.cristaline-mega-menu__col-list a {
		border-radius: var(--radius-sm);
		color: var(--color-ink);
		display: inline-block;
		font-family: var(--font-nav);
		font-size: .88rem;
		margin: -.125rem -.375rem;
		padding: .125rem .375rem;
	}

	.cristaline-mega-menu__col-list a:hover,
	.cristaline-mega-menu__col-list a:focus-visible {
		background-color: var(--color-bg-alt);
		color: var(--color-ink);
	}

	/* 0.1.23: "Voir tous les vêtements/chaussures/accessoires" — the
	   column's own general link, level 2 of the 3-level hierarchy. Bolder
	   than a final category, underlined only on hover/focus (never
	   always-on, unlike the bottom-line "Voir toute la collection X"
	   links), plus a small decorative chevron (same border-rotation
	   technique as every other chevron in this theme, just rotated to
	   point right instead of down — purely decorative, not a toggle). */
	.cristaline-mega-menu__col-cta a {
		font-weight: 600;
		text-decoration: none;
	}

	.cristaline-mega-menu__col-cta a:hover,
	.cristaline-mega-menu__col-cta a:focus-visible {
		text-decoration: underline;
		text-underline-offset: .2em;
	}

	.cristaline-mega-menu__col-cta a::after {
		border-bottom: 1.5px solid currentColor;
		border-right: 1.5px solid currentColor;
		content: "";
		display: inline-block;
		height: 5px;
		margin-left: var(--space-1);
		transform: rotate(-45deg);
		vertical-align: middle;
		width: 5px;
	}

	/* 0.1.20: the arbitrary italic on "Marques X" links was removed at the
	   client's request — every link keeps the same ink color and typography
	   everywhere, no italics, no opacity, no exceptions. */

	.cristaline-mega-menu__footer {
		border-top: 1px solid var(--color-accent-soft);
		display: flex;
		gap: var(--space-6);
		margin-top: var(--space-8);
		padding-top: var(--space-6);
	}

	.cristaline-mega-menu__view-all {
		color: var(--color-ink);
		font-family: var(--font-nav);
		font-size: .85rem;
		font-weight: 600;
		text-decoration: underline;
		text-underline-offset: .2em;
	}

	.cristaline-mega-menu__view-all:hover,
	.cristaline-mega-menu__view-all:focus-visible {
		color: var(--color-gold-hover);
	}

	.cristaline-mega-menu__view-all--secondary {
		font-weight: 400;
	}
}

/* =========================================================
   Mobile drawer (<1280px) — a full-viewport overlay, entirely separate
   from Storefront's own .handheld-navigation (kept, untouched, as the
   no-JS fallback — see assets/js/mobile-drawer.js's own docblock).
   ========================================================= */
@media (max-width: 1279px) {
	.cristaline-mega-menu {
		display: none !important;
	}

	.cristaline-mobile-drawer {
		background-color: var(--color-bg);
		bottom: 0;
		display: none;
		flex-direction: column;
		left: 0;
		position: fixed;
		right: 0;
		top: 0;
		z-index: 10000;
	}

	.cristaline-mobile-drawer.is-open {
		display: flex;
	}

	.cristaline-mobile-drawer__topbar {
		align-items: center;
		border-bottom: 1px solid var(--color-accent-soft);
		display: flex;
		flex: none;
		justify-content: space-between;
		padding: calc(var(--space-3) + env(safe-area-inset-top, 0px)) var(--space-4) var(--space-3);
	}

	/* 0.1.24: slightly more visible per the client's request — still just
	   the existing text, no logo/image added, no oversizing. */
	.cristaline-mobile-drawer__logo {
		color: var(--color-ink);
		font-family: var(--font-heading);
		font-size: 1.15rem;
		font-weight: 600;
	}

	/* 0.1.29: real bug, confirmed live — this theme never neutralized
	   -webkit-tap-highlight-color anywhere, so mobile Safari/Chrome's own
	   default gray tap-highlight overlay (shown on any <button>/<a> touch,
	   not related to :focus at all) was free to render — the client's own
	   "grand fond carré gris" report. Distinct from the 0.1.25 purple-
	   outline bug (that one was the UA :focus ring; this one is the UA tap
	   highlight, a completely separate browser mechanism) — both needed
	   their own fix. transparent here removes the highlight entirely,
	   background stays real "transparent" at rest (no square, gray or
	   otherwise) either way. 44x44 -> 48x48: this round's own explicit
	   "zone tactile comprise entre 48 et 52 px" ask (was still 44px, the
	   pre-0.1.27 hamburger size, never revisited for these two buttons
	   specifically). */
	.cristaline-mobile-drawer__close,
	.cristaline-mobile-drawer__back {
		-webkit-tap-highlight-color: transparent;
		align-items: center;
		background: transparent;
		border: none;
		color: var(--color-ink);
		cursor: pointer;
		display: inline-flex;
		height: 48px;
		justify-content: center;
		padding: 0;
		width: 48px;
	}

	/* 0.1.25: real bug, confirmed live — no purple/blue is defined anywhere
	   in this theme's CSS, so the persistent ring the client saw after a
	   tap/click on Retour or Fermer was the browser's own UA-default :focus
	   outline, not this theme's gold one. It showed because these buttons
	   only ever had a :focus-visible rule (below) with no matching plain
	   :focus rule to neutralize the default — and mobile-drawer.js calls
	   .focus() PROGRAMMATICALLY on the back button after opening/closing a
	   panel (showPanel()'s own focusTarget), a scripted focus a tap/click
	   away from the element that actually received the gesture, which
	   :focus-visible's own keyboard-intent heuristic doesn't reliably catch
	   as "not keyboard" in every browser. Explicitly clearing the plain
	   :focus ring (never a global "outline: none" — scoped to exactly these
	   3 selectors, each paired with its own :focus-visible rule right below)
	   is the standard, accessible fix: keyboard users still get the gold
	   ring via :focus-visible, mouse/touch users no longer get the stray
	   default. */
	.cristaline-mobile-drawer__close:focus,
	.cristaline-mobile-drawer__back:focus,
	.cristaline-mobile-panel__link:focus {
		outline: none;
	}

	.cristaline-mobile-drawer__close:focus-visible,
	.cristaline-mobile-drawer__back:focus-visible {
		outline: 2px solid var(--color-gold);
		outline-offset: -2px;
	}

	.cristaline-mobile-drawer__subheader {
		align-items: center;
		border-bottom: 1px solid var(--color-accent-soft);
		display: flex;
		flex: none;
		gap: var(--space-1);
		padding: var(--space-1) var(--space-2);
	}

	.cristaline-mobile-drawer__subheader[hidden] {
		display: none;
	}

	/* 0.1.26: bumped size + an explicit weight (this is a <span>, not an
	   h-tag, so it never inherited base.css's own h1-h6 font-weight:500) —
	   client's own "doit rester clairement identifiable" ask for the panel
	   title, now unambiguously above the group titles below it (1.2rem/700
	   — see .cristaline-mobile-panel__section-title etc.) in both size and
	   weight. */
	.cristaline-mobile-drawer__title {
		color: var(--color-ink);
		font-family: var(--font-heading);
		font-size: 1.25rem;
		font-weight: 600;
	}

	.cristaline-mobile-drawer__panels {
		flex: 1;
		overflow: hidden;
		position: relative;
	}

	/* Every panel occupies the same box, stacked; only the active one is
	   slid into view (transform, not display) — [hidden] is deliberately
	   never used here (see inc/mega-menu.php's cristaline_render_mobile_panel()
	   docblock), since display:none would skip the slide transition
	   entirely. assets/js/mobile-drawer.js manages aria-hidden/inert on
	   the inactive ones instead. */
	.cristaline-mobile-panel {
		background-color: var(--color-bg);
		bottom: 0;
		left: 0;
		overflow-y: auto;
		padding: var(--space-2) var(--space-4) calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
		position: absolute;
		right: 0;
		top: 0;
		transform: translateX(100%);
		transition: transform 200ms ease;
	}

	.cristaline-mobile-panel[data-cristaline-root],
	.cristaline-mobile-panel.is-active {
		transform: translateX(0);
	}

	.cristaline-mobile-panel__list {
		margin: 0;
		padding: 0;
	}

	.cristaline-mobile-panel__row {
		border-bottom: 1px solid var(--color-accent-soft);
		list-style: none;
	}

	/* Text and chevron share one 52px-tall clickable area — never a
	   separate small button next to the row. 0.1.26: font-size bumped
	   .95rem (15.2px) -> 1.05rem (16.8px) — real bug, confirmed live: the
	   client's own "ne pas diminuer sous 16px" floor was already being
	   violated for every ordinary category link (Robes, Baskets, …), and
	   .85rem section-titles (13.6px, below) were rendering SMALLER than
	   this — exactly the "les titres de groupe paraissent plus petits que
	   les catégories" bug reported this round. */
	.cristaline-mobile-panel__link {
		/* 0.1.29: same tap-highlight neutralization as the drawer's own
		   close/back buttons above — every tappable row in this menu gets
		   it, not just the two that prompted the report. */
		-webkit-tap-highlight-color: transparent;
		align-items: center;
		background: transparent;
		border: none;
		color: var(--color-ink);
		display: flex;
		font-family: var(--font-nav);
		font-size: 1.05rem;
		justify-content: space-between;
		min-height: 52px;
		padding: var(--space-3) var(--space-1);
		text-align: left;
		width: 100%;
	}

	.cristaline-mobile-panel__link:focus-visible {
		outline: 2px solid var(--color-gold);
		outline-offset: -2px;
	}

	/* 0.1.26: margin-bottom added — the client's own "clairement séparé du
	   reste de la liste" ask for this row (level B of the 4-level
	   hierarchy: panel title > this cta > group titles > categories). */
	.cristaline-mobile-panel__row--cta .cristaline-mobile-panel__link {
		font-weight: 600;
		margin-bottom: var(--space-2);
	}

	.cristaline-mobile-panel__chevron {
		color: var(--color-ink);
		flex: none;
		margin-left: var(--space-2);
	}

	/* Enfants' flat profile panel (0.1.21): a non-clickable section title
	   (Vêtements/Chaussures/Accessoires) followed immediately by its real
	   category links, all in the same scrollable panel — never its own
	   row/border/chevron, so it reads clearly as a heading rather than
	   another tappable link.

	   0.1.26: real bug, confirmed live — this was .85rem/600, SMALLER than
	   the .95rem ordinary category links below it (the client's own
	   "titres de groupes... paraissent parfois plus petits que les
	   catégories" report). Bumped to 1.2rem/700 — level C of the 4-level
	   hierarchy (panel title > primary link > this > ordinary categories,
	   1.05rem/400 above) — "au minimum aussi grand", "18 à 20px", "graisse
	   entre 600 et 700".

	   0.1.28: real bug, confirmed live — EVERY section title
	   (Vêtements/Chaussures/Accessoires, not just the first) sits directly
	   after a ".cristaline-mobile-panel__row" (the CTA row before
	   Vêtements, or the previous section's own last leaf-category row
	   before Chaussures/Accessoires) — and EVERY ".cristaline-mobile-panel__row"
	   already carries its own border-bottom (the shared rule below, applied
	   to every row in this menu). This section-title's own border-top was
	   therefore ALWAYS a second, redundant 1px line stacked right against
	   that row's border-bottom, at every single transition, not just under
	   the CTA — the 0.1.27 attempt to fix only the "first" instance used
	   ":first-child", which never actually matched anything (the CTA row is
	   always the real first child of the list, never the section title
	   itself, so that whole override was dead code — confirmed live: the
	   border was still there both under the CTA AND before Chaussours/
	   Accessoires). Fixed for real this time by dropping border-top
	   entirely from the base rule — every transition now relies solely on
	   the PRECEDING row's own border-bottom as the one visible line,
	   uniformly, with no special-casing needed. The "espace suffisant"
	   (client's own 24-32px ask) moves onto padding-top instead, so there's
	   still real breathing room after that one line before the section's
	   own label starts. margin-top removed entirely (no longer needed —
	   padding-top now does 100% of the spacing job, whether this is the
	   panel's first section or not). */
	.cristaline-mobile-panel__section-title {
		color: var(--color-ink);
		font-family: var(--font-nav);
		font-size: 1.2rem;
		font-weight: 700;
		letter-spacing: .02em;
		list-style: none;
		margin-top: 0;
		padding: 28px var(--space-1) var(--space-1);
	}

	/* A final category link — same 52px row as everything else, but never
	   gets the expand chevron (nothing further to open). */
	.cristaline-mobile-panel__link--leaf {
		justify-content: flex-start;
	}

	/* 0.1.26: Femme/Homme/Fille/Garçon use a DIFFERENT architecture for the
	   exact same "group" concept — Vêtements/Chaussures/Accessoires are
	   real expand-rows here (cristaline_render_mobile_row(), opening their
	   own sub-panel), not the flat, non-clickable section-titles Enfants'
	   profiles use above. ":not([data-cristaline-root])" scopes this to
	   GROUP-level rows only (Vêtements inside Femme's own panel) — root-
	   level rows (Femme/Homme/Enfants themselves, opened from the root
	   panel) keep the plain 1.05rem/400 treatment, since the client's own
	   spec lists Vêtements/Chaussures/Accessoires/Marques as "titres de
	   groupes", never Femme/Homme/Enfants.
	   "#cristaline-mobile-panel-enfants" is EXPLICITLY excluded too, on
	   top of the root exclusion — its own expand-rows are Fille/Garçon/
	   Bébé fille/Bébé garçon, which are PROFILE triggers (the same
	   conceptual level as Femme/Homme/Enfants — "A. Titre du panneau" in
	   the client's own spec, confirmed live: tapping one sets the drawer's
	   topbar title to that profile's name, e.g. "Fille" — the same thing
	   "Vêtements" does one level down), never "titres de groupes"
	   themselves. Without this second exclusion they'd be wrongly
	   elevated to look like Vêtements/Chaussures/Accessoires. */
	.cristaline-mobile-panel:not([data-cristaline-root]):not(#cristaline-mobile-panel-enfants) .cristaline-mobile-panel__link--expand {
		font-size: 1.2rem;
		font-weight: 700;
		margin-top: var(--space-6);
	}

	/* 0.1.30: inside the Enfants root panel specifically (excluded from the
	   1.2rem/700 rule above on purpose, see its own comment), real <button>
	   triggers (Fille/Garçon/Bébé fille/Bébé garçon) and this round's new
	   <a>-based "Marques Enfants" link — same classes, same panel — rendered
	   at DIFFERENT font-weights (600 vs 400) with no font-weight declared
	   anywhere in this stylesheet for either: confirmed live to be a plain
	   <button>-vs-<a> tag rendering difference, not caused by any rule here.
	   Declared explicitly so every ".link--expand" row in this one panel is
	   guaranteed the same weight regardless of its tag. */
	#cristaline-mobile-panel-enfants .cristaline-mobile-panel__link--expand {
		font-weight: 600;
	}

	/* Page-level scroll lock while the drawer is open (kept in sync with
	   the drawer's own open state by mobile-drawer.js, independent of
	   Storefront's own #site-navigation.toggled — see that file's
	   docblock for the hand-off). position:fixed + the JS-set "top" offset
	   is the standard iOS-Safari-safe scroll lock (plain overflow:hidden
	   alone still lets the page scroll underneath on iOS) — mobile-
	   drawer.js restores the real scroll position on close. */
	body.cristaline-menu-open {
		left: 0;
		overflow: hidden;
		position: fixed;
		right: 0;
		width: 100%;
	}

	/* 0.1.25: real bug, confirmed live — assets/js/mobile-drawer.js's
	   lockBackgroundInertness() already marks Storefront's own fixed bottom
	   bar (".storefront-handheld-footer-bar", confirmed live class name)
	   inert while the drawer is open, in every sub-panel (it walks the whole
	   ancestor chain, not just <body>'s direct children — see that file's
	   own docblock), but inert only removes it from the tab order/AT
	   reading order, it does NOT hide it visually. The drawer's own
	   full-viewport z-index already covers it in most cases, but real
	   mobile-browser viewport-height quirks (100vh + a dynamic address-bar
	   toolbar) can leave a sliver of it visible/tappable underneath.
	   display:none here is unconditional on the open state (never DOM
	   removal, restored the instant the class is gone on close/Escape/link
	   click — all of which already remove this class via mobile-drawer.js),
	   so nothing about the "never permanently removed" requirement changes,
	   and no layout gap is possible since the bar was already
	   position:fixed (out of flow) before this rule. */
	body.cristaline-menu-open .storefront-handheld-footer-bar {
		display: none;
	}

	/* 0.2.0-dev.48 — "Suivez-nous" + Facebook/Instagram, ROOT panel only
	   (inc/mega-menu.php's own cristaline_render_mobile_drawer(), inside
	   #cristaline-mobile-panel-root, never a category drill-down sub-panel),
	   under the main links. Same light-drawer palette as every other rule
	   in this file (--color-ink/--color-accent-soft/--color-gold — this
	   drawer is never the dark "chrome" header/footer theme). Each icon
	   gets a real ~40×40px tap target via a fixed box on the link itself
	   (client's own explicit accessibility ask this round), the same
	   "padding creates the target, the icon stays visually small inside it"
	   technique already established for the account link
	   (.cristaline-account-link, assets/css/layout.css) — just sized
	   directly here since this is a fixed 40×40 box, not an
	   icon-plus-negative-margin case. */
	.cristaline-mobile-drawer__social {
		border-top: 1px solid var(--color-accent-soft);
		margin-top: var(--space-4);
		padding: var(--space-4) 0 var(--space-2);
	}

	.cristaline-mobile-drawer__social-label {
		color: var(--color-neutral);
		font-size: .82rem;
		margin: 0 0 var(--space-2);
	}

	.cristaline-social-links--mobile {
		gap: var(--space-2);
	}

	.cristaline-social-links--mobile a {
		-webkit-tap-highlight-color: transparent;
		align-items: center;
		color: var(--color-ink);
		display: inline-flex;
		height: 40px;
		justify-content: center;
		width: 40px;
	}

	.cristaline-social-links--mobile svg {
		height: 20px;
		width: 20px;
	}

	.cristaline-social-links--mobile a:focus-visible {
		outline: 2px solid var(--color-gold);
		outline-offset: -2px;
	}

	/*
	 * 0.2.0-dev.50 — the shared premium hover (assets/css/layout.css's own
	 * `.cristaline-social-links a:hover`) turns the icon white — correct on
	 * the dark header/footer, but this drawer is on the theme's LIGHT
	 * palette, so a white icon on hover would visually vanish. Gated to the
	 * same real-hover-only media query as the shared rule; on genuine touch
	 * (the overwhelming majority of real drawer opens) this never matters at
	 * all since :hover never fires there — only a real pointer device (a
	 * touchscreen laptop with a mouse, a resized desktop window) could ever
	 * trigger it, and this keeps that case readable too.
	 */
	@media (hover: hover) and (pointer: fine) {
		.cristaline-social-links--mobile a:hover {
			color: var(--color-ink);
		}
	}
}