/* =============================================================================
   CDSWerx Item Style — shared base CSS (issue #119)
   Handle: cdswerx-item-style. Delivered by the WP dependency graph: every
   adopter's stylesheet lists this handle in its wp_register_style() deps.
   Never enqueue directly; never copy these rules into a widget stylesheet.

   Written ONLY against the widget-agnostic hook family emitted by
   Item_Style_Trait (traits/trait-item-style.php):

     .cds-item-style                          wrapper (nav / tab list)
       --pointer-{underline|overline|double-line|framed|background}
       --animation-{fade|slide|grow|drop-in|drop-out|none}
       --floating-underline  --floating-background  --with-active-underline  --background-svg
       --with-icon  --with-active-icon
       --icon-position-{left|right}  --icon-structure-{together|apart}
       --icon-hover-{horizontal-short|horizontal|vertical|diagonal}
       --icon-appear-{fade-in|from-center-horizontal|from-center-vertical|from-left}
       [data-underline-align="left|center|right"]
     .cds-item-style__item  (+ --active, or [aria-selected="true"])
     .cds-item-style__link  (paints the decoration; may be the same node as __item)
     .cds-item-style__icon  --normal / --active
     .cds-item-style__text  (paints With Active Underline via ::after)
     .cds-item-style__bg-shape  __floating-line

   STATE MODEL — hover and active are read on the ITEM, painted on the LINK.
   Item and link are nested in Submenu (<li><a>) and the same node in a tab
   (<button>), so every state selector is an :is() union of both shapes. :is()
   takes the specificity of its MOST specific argument, so the aria-selected
   shape (one attribute heavier than the class shape) is wrapped in :where()
   (zero weight): each union then weighs exactly what the class shape weighs —
   hover (0,3,0), active (0,2,0) — i.e. the same weights the Submenu-only
   selectors had before extraction. That equality is load-bearing: the
   "active item hides the normal icon" rule (0,2,0) must LOSE to the later
   With Icon / Hover Movement rules (0,2,0), and every adopter's control CSS
   ({{WRAPPER}} …, (0,4,x)+) must keep winning exactly as before. Proven by a
   getComputedStyle() diff of 417 nodes across 27 scenarios (2026-09-03).

   Pointer/animation system mirrors Elementor Pro's nav-menu approach; the
   With Active * / icon styles are the #46 QI-derived set (Phase 2R mirrors
   QI's mechanics here, once, for every adopter).
   ============================================================================= */

/* Decorations are absolutely positioned inside the link. */
.cds-item-style__link {
	position: relative;
}

/* =============================================================================
   POINTER SYSTEM — Line Pointers (underline / overline / double-line)
   ============================================================================= */

/* Pseudo-element base: underline (::after) */
.cds-item-style--pointer-underline .cds-item-style__link::after,
.cds-item-style--pointer-double-line .cds-item-style__link::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background-color: currentColor;
	pointer-events: none;
	transition-timing-function: ease;
	transition-duration: 0.3s;
}

/* Pseudo-element base: overline (::before) */
.cds-item-style--pointer-overline .cds-item-style__link::before,
.cds-item-style--pointer-double-line .cds-item-style__link::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 2px;
	background-color: currentColor;
	pointer-events: none;
	transition-timing-function: ease;
	transition-duration: 0.3s;
}

/* --- Underline Alignment --- */
/* Left (default): pseudo-elements already positioned from left: 0 */

.cds-item-style[data-underline-align="right"] .cds-item-style__link::after,
.cds-item-style[data-underline-align="right"] .cds-item-style__link::before {
	right: 0;
	left: auto;
	transform-origin: right center;
}

/* Center alignment — uses translateX so the origin stays centered */
.cds-item-style[data-underline-align="center"] .cds-item-style__link::after,
.cds-item-style[data-underline-align="center"] .cds-item-style__link::before {
	left: 50%;
	right: auto;
	transform-origin: center;
}

/* --- Animation: Fade --- */
.cds-item-style--pointer-underline.cds-item-style--animation-fade .cds-item-style__link::after,
.cds-item-style--pointer-overline.cds-item-style--animation-fade .cds-item-style__link::before,
.cds-item-style--pointer-double-line.cds-item-style--animation-fade .cds-item-style__link::before,
.cds-item-style--pointer-double-line.cds-item-style--animation-fade .cds-item-style__link::after {
	opacity: 0;
	transition-property: opacity;
}

.cds-item-style--pointer-underline.cds-item-style--animation-fade :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::after,
.cds-item-style--pointer-underline.cds-item-style--animation-fade :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::after,
.cds-item-style--pointer-overline.cds-item-style--animation-fade :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::before,
.cds-item-style--pointer-overline.cds-item-style--animation-fade :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::before,
.cds-item-style--pointer-double-line.cds-item-style--animation-fade :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::before,
.cds-item-style--pointer-double-line.cds-item-style--animation-fade :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::before,
.cds-item-style--pointer-double-line.cds-item-style--animation-fade :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::after,
.cds-item-style--pointer-double-line.cds-item-style--animation-fade :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::after {
	opacity: 1;
}

/* --- Animation: Slide (from left / from right for right-aligned) --- */
.cds-item-style--pointer-underline.cds-item-style--animation-slide .cds-item-style__link::after,
.cds-item-style--pointer-overline.cds-item-style--animation-slide .cds-item-style__link::before,
.cds-item-style--pointer-double-line.cds-item-style--animation-slide .cds-item-style__link::before,
.cds-item-style--pointer-double-line.cds-item-style--animation-slide .cds-item-style__link::after {
	transform: scaleX(0);
	transform-origin: left center;
	transition-property: transform;
}

/* Center: override transform-origin so slide grows from center */
.cds-item-style[data-underline-align="center"].cds-item-style--animation-slide .cds-item-style__link::after,
.cds-item-style[data-underline-align="center"].cds-item-style--animation-slide .cds-item-style__link::before {
	transform: translateX(-50%) scaleX(0);
	transform-origin: center;
}

.cds-item-style--pointer-underline.cds-item-style--animation-slide :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::after,
.cds-item-style--pointer-underline.cds-item-style--animation-slide :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::after,
.cds-item-style--pointer-overline.cds-item-style--animation-slide :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::before,
.cds-item-style--pointer-overline.cds-item-style--animation-slide :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::before,
.cds-item-style--pointer-double-line.cds-item-style--animation-slide :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::before,
.cds-item-style--pointer-double-line.cds-item-style--animation-slide :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::before,
.cds-item-style--pointer-double-line.cds-item-style--animation-slide :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::after,
.cds-item-style--pointer-double-line.cds-item-style--animation-slide :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::after {
	transform: scaleX(1);
}

/* Center hover: preserve the translateX offset while scaling to 1 */
.cds-item-style[data-underline-align="center"].cds-item-style--animation-slide :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::after,
.cds-item-style[data-underline-align="center"].cds-item-style--animation-slide :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::after,
.cds-item-style[data-underline-align="center"].cds-item-style--animation-slide :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::before,
.cds-item-style[data-underline-align="center"].cds-item-style--animation-slide :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::before {
	transform: translateX(-50%) scaleX(1);
}

/* --- Animation: Grow (from center) --- */
.cds-item-style--pointer-underline.cds-item-style--animation-grow .cds-item-style__link::after,
.cds-item-style--pointer-overline.cds-item-style--animation-grow .cds-item-style__link::before,
.cds-item-style--pointer-double-line.cds-item-style--animation-grow .cds-item-style__link::before,
.cds-item-style--pointer-double-line.cds-item-style--animation-grow .cds-item-style__link::after {
	transform: scaleX(0);
	transform-origin: center;
	transition-property: transform;
}

.cds-item-style[data-underline-align="center"].cds-item-style--animation-grow .cds-item-style__link::after,
.cds-item-style[data-underline-align="center"].cds-item-style--animation-grow .cds-item-style__link::before {
	transform: translateX(-50%) scaleX(0);
	transform-origin: center;
}

.cds-item-style--pointer-underline.cds-item-style--animation-grow :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::after,
.cds-item-style--pointer-underline.cds-item-style--animation-grow :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::after,
.cds-item-style--pointer-overline.cds-item-style--animation-grow :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::before,
.cds-item-style--pointer-overline.cds-item-style--animation-grow :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::before,
.cds-item-style--pointer-double-line.cds-item-style--animation-grow :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::before,
.cds-item-style--pointer-double-line.cds-item-style--animation-grow :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::before,
.cds-item-style--pointer-double-line.cds-item-style--animation-grow :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::after,
.cds-item-style--pointer-double-line.cds-item-style--animation-grow :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::after {
	transform: scaleX(1);
}

.cds-item-style[data-underline-align="center"].cds-item-style--animation-grow :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::after,
.cds-item-style[data-underline-align="center"].cds-item-style--animation-grow :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::after,
.cds-item-style[data-underline-align="center"].cds-item-style--animation-grow :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::before,
.cds-item-style[data-underline-align="center"].cds-item-style--animation-grow :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::before {
	transform: translateX(-50%) scaleX(1);
}

/* --- Animation: Drop In --- */
.cds-item-style--pointer-underline.cds-item-style--animation-drop-in .cds-item-style__link::after,
.cds-item-style--pointer-double-line.cds-item-style--animation-drop-in .cds-item-style__link::after {
	transform: translateY(100%);
	transition-property: transform;
}

.cds-item-style--pointer-overline.cds-item-style--animation-drop-in .cds-item-style__link::before,
.cds-item-style--pointer-double-line.cds-item-style--animation-drop-in .cds-item-style__link::before {
	transform: translateY(-100%);
	transition-property: transform;
}

.cds-item-style--pointer-underline.cds-item-style--animation-drop-in :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::after,
.cds-item-style--pointer-underline.cds-item-style--animation-drop-in :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::after,
.cds-item-style--pointer-overline.cds-item-style--animation-drop-in :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::before,
.cds-item-style--pointer-overline.cds-item-style--animation-drop-in :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::before,
.cds-item-style--pointer-double-line.cds-item-style--animation-drop-in :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::before,
.cds-item-style--pointer-double-line.cds-item-style--animation-drop-in :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::before,
.cds-item-style--pointer-double-line.cds-item-style--animation-drop-in :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::after,
.cds-item-style--pointer-double-line.cds-item-style--animation-drop-in :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::after {
	transform: translateY(0);
}

/* --- Animation: Drop Out --- */
.cds-item-style--pointer-underline.cds-item-style--animation-drop-out .cds-item-style__link::after,
.cds-item-style--pointer-double-line.cds-item-style--animation-drop-out .cds-item-style__link::after {
	transform: translateY(-100%);
	transition-property: transform;
}

.cds-item-style--pointer-overline.cds-item-style--animation-drop-out .cds-item-style__link::before,
.cds-item-style--pointer-double-line.cds-item-style--animation-drop-out .cds-item-style__link::before {
	transform: translateY(100%);
	transition-property: transform;
}

.cds-item-style--pointer-underline.cds-item-style--animation-drop-out :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::after,
.cds-item-style--pointer-underline.cds-item-style--animation-drop-out :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::after,
.cds-item-style--pointer-overline.cds-item-style--animation-drop-out :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::before,
.cds-item-style--pointer-overline.cds-item-style--animation-drop-out :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::before,
.cds-item-style--pointer-double-line.cds-item-style--animation-drop-out :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::before,
.cds-item-style--pointer-double-line.cds-item-style--animation-drop-out :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::before,
.cds-item-style--pointer-double-line.cds-item-style--animation-drop-out :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::after,
.cds-item-style--pointer-double-line.cds-item-style--animation-drop-out :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::after {
	transform: translateY(0);
}

/* --- Animation: None (instant show/hide) --- */
.cds-item-style--pointer-underline.cds-item-style--animation-none .cds-item-style__link::after,
.cds-item-style--pointer-overline.cds-item-style--animation-none .cds-item-style__link::before,
.cds-item-style--pointer-double-line.cds-item-style--animation-none .cds-item-style__link::before,
.cds-item-style--pointer-double-line.cds-item-style--animation-none .cds-item-style__link::after {
	opacity: 0;
	transition: none;
}

.cds-item-style--pointer-underline.cds-item-style--animation-none :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::after,
.cds-item-style--pointer-underline.cds-item-style--animation-none :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::after,
.cds-item-style--pointer-overline.cds-item-style--animation-none :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::before,
.cds-item-style--pointer-overline.cds-item-style--animation-none :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::before,
.cds-item-style--pointer-double-line.cds-item-style--animation-none :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::before,
.cds-item-style--pointer-double-line.cds-item-style--animation-none :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::before,
.cds-item-style--pointer-double-line.cds-item-style--animation-none :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::after,
.cds-item-style--pointer-double-line.cds-item-style--animation-none :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::after {
	opacity: 1;
}

/* =============================================================================
   POINTER SYSTEM — Framed
   ============================================================================= */
.cds-item-style--pointer-framed .cds-item-style__link::before {
	content: '';
	position: absolute;
	inset: 0;
	border: 2px solid currentColor;
	border-color: transparent;
	box-sizing: border-box;
	pointer-events: none;
	transition-timing-function: ease;
	transition-duration: 0.3s;
}

.cds-item-style--pointer-framed.cds-item-style--animation-fade .cds-item-style__link::before,
.cds-item-style--pointer-framed.cds-item-style--animation-none .cds-item-style__link::before {
	opacity: 0;
	transition-property: opacity;
}

.cds-item-style--pointer-framed.cds-item-style--animation-none .cds-item-style__link::before {
	transition: none;
}

.cds-item-style--pointer-framed.cds-item-style--animation-fade :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::before,
.cds-item-style--pointer-framed.cds-item-style--animation-fade :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::before,
.cds-item-style--pointer-framed.cds-item-style--animation-none :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::before,
.cds-item-style--pointer-framed.cds-item-style--animation-none :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::before {
	opacity: 1;
	border-color: currentColor;
}

.cds-item-style--pointer-framed.cds-item-style--animation-grow .cds-item-style__link::before {
	transform: scale(0.5);
	opacity: 0;
	transition-property: transform, opacity;
	border-color: currentColor;
}

.cds-item-style--pointer-framed.cds-item-style--animation-grow :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::before,
.cds-item-style--pointer-framed.cds-item-style--animation-grow :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::before {
	transform: scale(1);
	opacity: 1;
}

/* Slide / Drop-in / Drop-out fallback to fade for framed */
.cds-item-style--pointer-framed.cds-item-style--animation-slide .cds-item-style__link::before,
.cds-item-style--pointer-framed.cds-item-style--animation-drop-in .cds-item-style__link::before,
.cds-item-style--pointer-framed.cds-item-style--animation-drop-out .cds-item-style__link::before {
	opacity: 0;
	transition-property: opacity;
	border-color: currentColor;
}

.cds-item-style--pointer-framed.cds-item-style--animation-slide :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::before,
.cds-item-style--pointer-framed.cds-item-style--animation-slide :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::before,
.cds-item-style--pointer-framed.cds-item-style--animation-drop-in :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::before,
.cds-item-style--pointer-framed.cds-item-style--animation-drop-in :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::before,
.cds-item-style--pointer-framed.cds-item-style--animation-drop-out :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::before,
.cds-item-style--pointer-framed.cds-item-style--animation-drop-out :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::before {
	opacity: 1;
}

/* =============================================================================
   POINTER SYSTEM — Background
   ============================================================================= */
.cds-item-style--pointer-background .cds-item-style__link {
	z-index: 0;
}

.cds-item-style--pointer-background .cds-item-style__link::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: currentColor;
	z-index: -1;
	pointer-events: none;
	transition-timing-function: ease;
	transition-duration: 0.3s;
}

.cds-item-style--pointer-background.cds-item-style--animation-fade .cds-item-style__link::before {
	opacity: 0;
	transition-property: opacity;
}

.cds-item-style--pointer-background.cds-item-style--animation-fade :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::before,
.cds-item-style--pointer-background.cds-item-style--animation-fade :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::before {
	opacity: 1;
}

.cds-item-style--pointer-background.cds-item-style--animation-grow .cds-item-style__link::before {
	transform: scaleX(0);
	transform-origin: center;
	transition-property: transform;
}

.cds-item-style--pointer-background.cds-item-style--animation-grow :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::before,
.cds-item-style--pointer-background.cds-item-style--animation-grow :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::before {
	transform: scaleX(1);
}

.cds-item-style--pointer-background.cds-item-style--animation-slide .cds-item-style__link::before {
	transform: scaleX(0);
	transform-origin: left center;
	transition-property: transform;
}

.cds-item-style--pointer-background.cds-item-style--animation-slide :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::before,
.cds-item-style--pointer-background.cds-item-style--animation-slide :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::before {
	transform: scaleX(1);
}

.cds-item-style--pointer-background.cds-item-style--animation-none .cds-item-style__link::before {
	opacity: 0;
	transition: none;
}

.cds-item-style--pointer-background.cds-item-style--animation-none :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::before,
.cds-item-style--pointer-background.cds-item-style--animation-none :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::before {
	opacity: 1;
}

.cds-item-style--pointer-background.cds-item-style--animation-drop-in .cds-item-style__link::before,
.cds-item-style--pointer-background.cds-item-style--animation-drop-out .cds-item-style__link::before {
	opacity: 0;
	transition-property: opacity;
}

.cds-item-style--pointer-background.cds-item-style--animation-drop-in :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::before,
.cds-item-style--pointer-background.cds-item-style--animation-drop-in :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::before,
.cds-item-style--pointer-background.cds-item-style--animation-drop-out :is(.cds-item-style__item:hover .cds-item-style__link, .cds-item-style__link.cds-item-style__item:hover)::before,
.cds-item-style--pointer-background.cds-item-style--animation-drop-out :is(.cds-item-style__item--active .cds-item-style__link, .cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"] .cds-item-style__link, .cds-item-style__link.cds-item-style__item[aria-selected="true"]))::before {
	opacity: 1;
}

/* =============================================================================
   POINTER SYSTEM — Floating Underline (With Active Floating Underline)
   QI mechanics (content-menu-default.min.css `.qodef-content-menu-line`):
   an absolutely positioned line whose LEFT and WIDTH are set by JS
   (assets/js/item-style.js), with a dual-duration transition — width .4s,
   left .6s cubic-bezier(.25,.1,.11,.99) — so the line stretches and then
   settles (the "elastic" feel). Rests under the active item, or the FIRST
   item when nothing is active; follows hover; returns on list mouse-leave.
   Thickness/colour: QI uses border-top 1px currentColor; we paint the same
   line with height + background-color so the adopters' existing Line
   Thickness / Line Color / Line Offset control selectors keep working.
   ============================================================================= */
.cds-item-style--floating-underline {
	/* wrapper needs non-static positioning for the absolute line */
	position: relative;
}

.cds-item-style__floating-line {
	display: none; /* JS shows and positions it */
	position: absolute;
	left: 0;
	bottom: 0;
	height: 1px;
	background-color: currentColor;
	pointer-events: none;
	/* Motion model: per-edge durations + one easing, all overridable — by the
	   Sliding Motion control (writes the vars), by Animation Speed / the adopter's
	   own duration control (writes transition-duration, which beats these
	   durations), or by the style's own defaults below. Underline default = QI's
	   elastic line (width .4s, left .6s). */
	transition:
		width var(--cds-fl-dur-w, .4s) var(--cds-fl-ease, cubic-bezier(.25, .1, .11, .99)),
		left var(--cds-fl-dur, .6s) var(--cds-fl-ease, cubic-bezier(.25, .1, .11, .99)),
		top var(--cds-fl-dur, .6s) var(--cds-fl-ease, cubic-bezier(.25, .1, .11, .99)),
		height var(--cds-fl-dur-w, .4s) var(--cds-fl-ease, cubic-bezier(.25, .1, .11, .99));
}

.cds-item-style--floating-underline .cds-item-style__floating-line {
	display: block;
}

/* -----------------------------------------------------------------------------
   Floating Background (#134, reworked) — the SAME travelling span, painted as a
   pill the size of the ACTIVE item: the switch / segmented-control look.

   Behaviour (item-style.js, "background" mode): the pill is measured to the
   active item's box on all four edges and moves on ACTIVATION only — never on
   hover (a switch handle does not follow the pointer). Default motion is one
   short even curve (Crocoblock Switcher: .3s cubic-bezier(.44,.95,.57,.97)).

   Stacking (load-bearing): the pill sits at z-index 1 and the item's TEXT and
   ICONS at z-index 2, while the item/link itself keeps z-index auto. Painting
   order then is: item background → pill → label. The adopter's own Normal /
   Active background can never hide the pill, and the pill can never hide the
   label. Do not give the item or link a z-index here.

   Size: `--cds-fl-expand` (Size Adjust, all sides) and `--cds-fl-expand-y`
   (the migrated legacy Vertical Inset, vertical only) are read by the script.
   Radius: the control's border-radius wins; otherwise the script mirrors the
   active item's own radius into `--cds-fl-radius-auto`.
   -------------------------------------------------------------------------- */
.cds-item-style--floating-background {
	position: relative; /* the pill's containing block = the wrapper the script measures from */
}

.cds-item-style--floating-background .cds-item-style__floating-line {
	display: block;
	top: 0;
	bottom: auto;
	height: auto;
	z-index: 1;
	border-radius: var(--cds-fl-radius-auto, 0);
	--cds-fl-ease: cubic-bezier(.44, .95, .57, .97);
	--cds-fl-dur: .3s;
	--cds-fl-dur-w: .3s;
}

.cds-item-style--floating-background .cds-item-style__link {
	position: relative;
	z-index: auto;
}

.cds-item-style--floating-background .cds-item-style__text,
.cds-item-style--floating-background .cds-item-style__icon {
	position: relative;
	z-index: 2;
}

/* =============================================================================
   Icons
   ============================================================================= */
.cds-item-style__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 16px;
}

/* Icon order: left (default) puts icon before text, right puts it after */
.cds-item-style--icon-position-left .cds-item-style__link {
	flex-direction: row;
}

.cds-item-style--icon-position-right .cds-item-style__link {
	flex-direction: row-reverse;
}

/* Apart structure: push icon and text to opposite sides */
.cds-item-style--icon-structure-apart .cds-item-style__link {
	justify-content: space-between;
	width: 100%;
}

/* Active icon — hidden by default, shown when item is active */
.cds-item-style__icon--active {
	display: none;
}

/* An active item swaps normal → active icon ONLY when it has an active icon; with
   no active icon the normal one stays (a tab with a single icon must not lose it).
   `:has()` is scoped to the link so item-and-link-are-one-node adopters work too. */
:is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__link:has(.cds-item-style__icon--active) .cds-item-style__icon--normal,
:is(.cds-item-style__link.cds-item-style__item--active, :where(.cds-item-style__link.cds-item-style__item[aria-selected="true"])):has(.cds-item-style__icon--active) .cds-item-style__icon--normal {
	display: none;
}

:is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__icon--active {
	display: inline-flex;
}

/* Icon Appear (wrapper hooks) — QI mechanics, 1:1 from content-menu-default.min.css
   (`.qodef--icon-appear-*`). Targets the <i>/<svg> INSIDE the active icon and the
   background shape; fires on hover AND active. */
.cds-item-style--icon-appear-fade-in .cds-item-style__icon--active i,
.cds-item-style--icon-appear-fade-in .cds-item-style__icon--active svg,
.cds-item-style--icon-appear-fade-in .cds-item-style__bg-shape i,
.cds-item-style--icon-appear-fade-in .cds-item-style__bg-shape svg {
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .25s ease-out, transform .35s ease-out;
}

.cds-item-style--icon-appear-fade-in .cds-item-style__item:hover .cds-item-style__icon--active i,
.cds-item-style--icon-appear-fade-in .cds-item-style__item:hover .cds-item-style__icon--active svg,
.cds-item-style--icon-appear-fade-in .cds-item-style__item:hover .cds-item-style__bg-shape i,
.cds-item-style--icon-appear-fade-in .cds-item-style__item:hover .cds-item-style__bg-shape svg,
.cds-item-style--icon-appear-fade-in :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__icon--active i,
.cds-item-style--icon-appear-fade-in :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__icon--active svg,
.cds-item-style--icon-appear-fade-in :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__bg-shape i,
.cds-item-style--icon-appear-fade-in :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__bg-shape svg {
	transition: opacity .35s ease-out, transform .35s ease-out;
	opacity: 1;
	transform: translateY(0);
}

.cds-item-style--icon-appear-from-center-horizontal .cds-item-style__icon--active i,
.cds-item-style--icon-appear-from-center-horizontal .cds-item-style__icon--active svg,
.cds-item-style--icon-appear-from-center-horizontal .cds-item-style__bg-shape i,
.cds-item-style--icon-appear-from-center-horizontal .cds-item-style__bg-shape svg {
	clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
	transition: .4s cubic-bezier(.51, .1, 0, .84);
}

.cds-item-style--icon-appear-from-center-horizontal .cds-item-style__item:hover .cds-item-style__icon--active i,
.cds-item-style--icon-appear-from-center-horizontal .cds-item-style__item:hover .cds-item-style__icon--active svg,
.cds-item-style--icon-appear-from-center-horizontal .cds-item-style__item:hover .cds-item-style__bg-shape i,
.cds-item-style--icon-appear-from-center-horizontal .cds-item-style__item:hover .cds-item-style__bg-shape svg,
.cds-item-style--icon-appear-from-center-horizontal :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__icon--active i,
.cds-item-style--icon-appear-from-center-horizontal :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__icon--active svg,
.cds-item-style--icon-appear-from-center-horizontal :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__bg-shape i,
.cds-item-style--icon-appear-from-center-horizontal :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__bg-shape svg {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.cds-item-style--icon-appear-from-center-vertical .cds-item-style__icon--active i,
.cds-item-style--icon-appear-from-center-vertical .cds-item-style__icon--active svg,
.cds-item-style--icon-appear-from-center-vertical .cds-item-style__bg-shape i,
.cds-item-style--icon-appear-from-center-vertical .cds-item-style__bg-shape svg {
	clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
	transition: .4s cubic-bezier(.51, .1, 0, .84);
}

.cds-item-style--icon-appear-from-center-vertical .cds-item-style__item:hover .cds-item-style__icon--active i,
.cds-item-style--icon-appear-from-center-vertical .cds-item-style__item:hover .cds-item-style__icon--active svg,
.cds-item-style--icon-appear-from-center-vertical .cds-item-style__item:hover .cds-item-style__bg-shape i,
.cds-item-style--icon-appear-from-center-vertical .cds-item-style__item:hover .cds-item-style__bg-shape svg,
.cds-item-style--icon-appear-from-center-vertical :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__icon--active i,
.cds-item-style--icon-appear-from-center-vertical :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__icon--active svg,
.cds-item-style--icon-appear-from-center-vertical :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__bg-shape i,
.cds-item-style--icon-appear-from-center-vertical :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__bg-shape svg {
	clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
}

.cds-item-style--icon-appear-from-left .cds-item-style__icon--active i,
.cds-item-style--icon-appear-from-left .cds-item-style__icon--active svg,
.cds-item-style--icon-appear-from-left .cds-item-style__bg-shape i,
.cds-item-style--icon-appear-from-left .cds-item-style__bg-shape svg {
	clip-path: inset(0 100% 0 0);
	transition: .4s cubic-bezier(.51, .1, 0, .84);
}

.cds-item-style--icon-appear-from-left .cds-item-style__item:hover .cds-item-style__icon--active i,
.cds-item-style--icon-appear-from-left .cds-item-style__item:hover .cds-item-style__icon--active svg,
.cds-item-style--icon-appear-from-left .cds-item-style__item:hover .cds-item-style__bg-shape i,
.cds-item-style--icon-appear-from-left .cds-item-style__item:hover .cds-item-style__bg-shape svg,
.cds-item-style--icon-appear-from-left :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__icon--active i,
.cds-item-style--icon-appear-from-left :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__icon--active svg,
.cds-item-style--icon-appear-from-left :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__bg-shape i,
.cds-item-style--icon-appear-from-left :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__bg-shape svg {
	clip-path: inset(0 0 0 0);
}

/* Move Icon On Hover (wrapper hooks) — QI mechanics, 1:1 from
   content-menu-default.min.css (`.qodef-hover--icon-move-*`). Fires on hover
   AND active. Horizontal Short nudges the single icon 4px; Horizontal /
   Vertical / Diagonal use TWO copies of the icon (the trait renders the
   second one): copy 1 leaves, copy 2 arrives, with QI's easing and delays. */
.cds-item-style--icon-hover-horizontal-short .cds-item-style__icon--normal i,
.cds-item-style--icon-hover-horizontal-short .cds-item-style__icon--normal svg {
	transition: transform .3s cubic-bezier(.37, .08, .02, .93), opacity .2s ease-in-out;
	transform: translateX(0);
	will-change: transform;
}

.cds-item-style--icon-hover-horizontal-short .cds-item-style__item:hover .cds-item-style__icon--normal i,
.cds-item-style--icon-hover-horizontal-short .cds-item-style__item:hover .cds-item-style__icon--normal svg,
.cds-item-style--icon-hover-horizontal-short :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__icon--normal i,
.cds-item-style--icon-hover-horizontal-short :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__icon--normal svg {
	transform: translateX(4px);
}

.cds-item-style--icon-hover-horizontal .cds-item-style__icon--normal,
.cds-item-style--icon-hover-vertical .cds-item-style__icon--normal,
.cds-item-style--icon-hover-diagonal .cds-item-style__icon--normal {
	position: relative;
	overflow: hidden;
	display: inherit;
	padding: 1px;
}

.cds-item-style--icon-hover-horizontal .cds-item-style__icon--normal i,
.cds-item-style--icon-hover-horizontal .cds-item-style__icon--normal svg,
.cds-item-style--icon-hover-vertical .cds-item-style__icon--normal i,
.cds-item-style--icon-hover-vertical .cds-item-style__icon--normal svg,
.cds-item-style--icon-hover-diagonal .cds-item-style__icon--normal i,
.cds-item-style--icon-hover-diagonal .cds-item-style__icon--normal svg {
	transition: transform .38s cubic-bezier(.37, .08, .02, .93), opacity .18s ease-in-out;
	will-change: transform;
}

.cds-item-style--icon-hover-horizontal .cds-item-style__icon--normal i:nth-child(1),
.cds-item-style--icon-hover-horizontal .cds-item-style__icon--normal svg:nth-child(1),
.cds-item-style--icon-hover-vertical .cds-item-style__icon--normal i:nth-child(1),
.cds-item-style--icon-hover-vertical .cds-item-style__icon--normal svg:nth-child(1),
.cds-item-style--icon-hover-diagonal .cds-item-style__icon--normal i:nth-child(1),
.cds-item-style--icon-hover-diagonal .cds-item-style__icon--normal svg:nth-child(1) {
	transform: translateX(0) translateY(0);
	transition-delay: .1s;
	opacity: 1;
}

.cds-item-style--icon-hover-horizontal .cds-item-style__icon--normal i:nth-child(2),
.cds-item-style--icon-hover-horizontal .cds-item-style__icon--normal svg:nth-child(2),
.cds-item-style--icon-hover-vertical .cds-item-style__icon--normal i:nth-child(2),
.cds-item-style--icon-hover-vertical .cds-item-style__icon--normal svg:nth-child(2),
.cds-item-style--icon-hover-diagonal .cds-item-style__icon--normal i:nth-child(2),
.cds-item-style--icon-hover-diagonal .cds-item-style__icon--normal svg:nth-child(2) {
	position: absolute;
	opacity: 0;
	left: 0;
	top: 0;
	transition-delay: 0s;
}

.cds-item-style--icon-hover-horizontal .cds-item-style__item:hover .cds-item-style__icon--normal i:nth-child(1),
.cds-item-style--icon-hover-horizontal .cds-item-style__item:hover .cds-item-style__icon--normal svg:nth-child(1),
.cds-item-style--icon-hover-vertical .cds-item-style__item:hover .cds-item-style__icon--normal i:nth-child(1),
.cds-item-style--icon-hover-vertical .cds-item-style__item:hover .cds-item-style__icon--normal svg:nth-child(1),
.cds-item-style--icon-hover-diagonal .cds-item-style__item:hover .cds-item-style__icon--normal i:nth-child(1),
.cds-item-style--icon-hover-diagonal .cds-item-style__item:hover .cds-item-style__icon--normal svg:nth-child(1),
.cds-item-style--icon-hover-horizontal :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__icon--normal i:nth-child(1),
.cds-item-style--icon-hover-horizontal :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__icon--normal svg:nth-child(1),
.cds-item-style--icon-hover-vertical :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__icon--normal i:nth-child(1),
.cds-item-style--icon-hover-vertical :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__icon--normal svg:nth-child(1),
.cds-item-style--icon-hover-diagonal :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__icon--normal i:nth-child(1),
.cds-item-style--icon-hover-diagonal :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__icon--normal svg:nth-child(1) {
	opacity: 0;
}

.cds-item-style--icon-hover-horizontal .cds-item-style__item:hover .cds-item-style__icon--normal i:nth-child(2),
.cds-item-style--icon-hover-horizontal .cds-item-style__item:hover .cds-item-style__icon--normal svg:nth-child(2),
.cds-item-style--icon-hover-vertical .cds-item-style__item:hover .cds-item-style__icon--normal i:nth-child(2),
.cds-item-style--icon-hover-vertical .cds-item-style__item:hover .cds-item-style__icon--normal svg:nth-child(2),
.cds-item-style--icon-hover-diagonal .cds-item-style__item:hover .cds-item-style__icon--normal i:nth-child(2),
.cds-item-style--icon-hover-diagonal .cds-item-style__item:hover .cds-item-style__icon--normal svg:nth-child(2),
.cds-item-style--icon-hover-horizontal :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__icon--normal i:nth-child(2),
.cds-item-style--icon-hover-horizontal :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__icon--normal svg:nth-child(2),
.cds-item-style--icon-hover-vertical :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__icon--normal i:nth-child(2),
.cds-item-style--icon-hover-vertical :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__icon--normal svg:nth-child(2),
.cds-item-style--icon-hover-diagonal :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__icon--normal i:nth-child(2),
.cds-item-style--icon-hover-diagonal :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__icon--normal svg:nth-child(2) {
	transform: translateX(0) translateY(0) translateZ(0);
	transition-delay: .25s;
	opacity: 1;
}

/* Horizontal */
.cds-item-style--icon-hover-horizontal .cds-item-style__icon--normal i:nth-child(2),
.cds-item-style--icon-hover-horizontal .cds-item-style__icon--normal svg:nth-child(2) {
	transform: translateX(-100%) translateY(0);
}

.cds-item-style--icon-hover-horizontal .cds-item-style__item:hover .cds-item-style__icon--normal i:nth-child(1),
.cds-item-style--icon-hover-horizontal .cds-item-style__item:hover .cds-item-style__icon--normal svg:nth-child(1),
.cds-item-style--icon-hover-horizontal :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__icon--normal i:nth-child(1),
.cds-item-style--icon-hover-horizontal :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__icon--normal svg:nth-child(1) {
	transform: translateX(100%);
}

/* Vertical */
.cds-item-style--icon-hover-vertical .cds-item-style__icon--normal i:nth-child(2),
.cds-item-style--icon-hover-vertical .cds-item-style__icon--normal svg:nth-child(2) {
	transform: translateY(100%);
}

.cds-item-style--icon-hover-vertical .cds-item-style__item:hover .cds-item-style__icon--normal i:nth-child(1),
.cds-item-style--icon-hover-vertical .cds-item-style__item:hover .cds-item-style__icon--normal svg:nth-child(1),
.cds-item-style--icon-hover-vertical :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__icon--normal i:nth-child(1),
.cds-item-style--icon-hover-vertical :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__icon--normal svg:nth-child(1) {
	transform: translateY(-100%);
}

/* Diagonal */
.cds-item-style--icon-hover-diagonal .cds-item-style__icon--normal i:nth-child(2),
.cds-item-style--icon-hover-diagonal .cds-item-style__icon--normal svg:nth-child(2) {
	transform: translateX(-100%) translateY(100%) translateZ(0);
}

.cds-item-style--icon-hover-diagonal .cds-item-style__item:hover .cds-item-style__icon--normal i:nth-child(1),
.cds-item-style--icon-hover-diagonal .cds-item-style__item:hover .cds-item-style__icon--normal svg:nth-child(1),
.cds-item-style--icon-hover-diagonal :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__icon--normal i:nth-child(1),
.cds-item-style--icon-hover-diagonal :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__icon--normal svg:nth-child(1) {
	transform: translateX(100%) translateY(-100%) translateZ(0);
}

/* =============================================================================
   ITEM STYLES (QI-derived set) — 1:1 mechanics from qi-addons-for-elementor-
   premium 1.12 content-menu-default.min.css (#46 Phase 2R), on our hooks.
   ============================================================================= */

/* --- With Icon: the normal icon always shows (auto-enabled by the trait) --- */
.cds-item-style--with-icon .cds-item-style__icon--normal {
	display: inline-flex;
}

/* --- With Active Icon: ONLY the active icon, always in flow; Icon Appear
   reveals its <i>/<svg> on hover AND active (QI: `.qodef-m-active-icon`). --- */
.cds-item-style--with-active-icon .cds-item-style__icon--normal {
	display: none;
}

.cds-item-style--with-active-icon .cds-item-style__icon--active {
	display: inline-flex;
}

/* --- With Active Underline: the TEXT span's ::after, 1px currentColor,
   scaleX(0) → scaleX(1) on hover AND active; transform-origin flips
   100% 50% → 0 50% so it grows left→right and retracts right→left;
   .3s in, .4s out, ease-in-out (QI: `.qodef-m-text:after`). --- */
.cds-item-style--with-active-underline .cds-item-style__text {
	position: relative;
}

.cds-item-style--with-active-underline .cds-item-style__text::after {
	content: "";
	position: absolute;
	height: 1px;
	width: 100%;
	bottom: 0;
	left: 0;
	background-color: currentColor;
	transform-origin: 100% 50%;
	transition: transform .3s ease-in-out;
	transform: scaleX(0);
}

.cds-item-style--with-active-underline .cds-item-style__item:hover .cds-item-style__text::after,
.cds-item-style--with-active-underline :is(.cds-item-style__item--active, :where(.cds-item-style__item[aria-selected="true"])) .cds-item-style__text::after {
	transform: scaleX(1);
	transform-origin: 0 50%;
	transition: transform .4s ease-in-out;
}

/* --- With Active Background SVG: the shape sits centred behind the text and
   is revealed by Icon Appear on hover AND active (QI: `.qodef-m-svg-icon`,
   absolutely centred; QI stacks it ABOVE the text at z-index 1 — we keep it
   BEHIND (z-index -1) so the Color/Opacity controls can never obscure the
   label; deliberate, documented deviation). --- */
.cds-item-style__bg-shape {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	z-index: -1;
	pointer-events: none;
	justify-content: center;
	align-content: center;
}

.cds-item-style__bg-shape svg {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	fill: currentColor;
}

.cds-item-style--background-svg .cds-item-style__link {
	z-index: 0;
}

.cds-item-style--background-svg .cds-item-style__bg-shape {
	display: inline-flex;
}