/* ==========================================================================
   UXD Nav Menu — Complete Stylesheet
   All defaults match the Custom Flag Company design (navy/red/Inter).
   Elementor controls layer on top via inline selectors.
   ========================================================================== */

/* ── CSS Custom Properties (defaults) ─────────────────────────────────────── */
.uxdwfe-nav-wrapper {
    --uxd-nm-accent:        #c0392b;
    --uxd-nm-text:          #0d1b40;
    --uxd-nm-text-hover:    #c0392b;
    --uxd-nm-drop-bg:       #ffffff;
    --uxd-nm-drop-shadow:   0 8px 32px rgba(0,0,0,.12);
    --uxd-nm-drop-radius:   4px;
    --uxd-nm-drop-minwidth: 220px;
    --uxd-nm-item-pad-v:    12px;
    --uxd-nm-item-pad-h:    16px;
    --uxd-nm-sub-pad-v:     10px;
    --uxd-nm-sub-pad-h:     18px;
    --uxd-nm-ease:          ease;
    --uxd-nm-duration:      220ms;
    --uxd-nm-transition:    var(--uxd-nm-duration) var(--uxd-nm-ease);
    position: relative;
}

/* ── Header Container (Theme Builder) ──────────────────────────────────── */
[data-elementor-type="wp-page"].uxdwfe-header-container-fixed {
    position: relative;
    z-index: 9999;
}

/* ── Nav Bar ───────────────────────────────────────────────────────────────── */
.uxdwfe-nav-bar {
    position: relative;
    background: #fff;
    z-index: 1000;
    transition: padding var(--uxd-nm-transition), box-shadow var(--uxd-nm-transition);
}
/* position: sticky removed — Elementor sections have overflow:hidden which
   breaks CSS sticky. The JS in nav-menu.js manages sticky via position:fixed
   by adding .is-sticky; widget.css handles the fixed positioning. */

.uxdwfe-nav-bar.is-shrink {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
.uxdwfe-nav-bar.uxdwfe-nav-hidden {
    transform: translateY(-110%);
    transition: transform .3s ease;
}

/* ── Inner layout ──────────────────────────────────────────────────────────── */
.uxdwfe-nav-inner {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0; /* spacing fully owned by Elementor controls (logo_menu_gap, menu_actions_gap) */
}

/* Inline layout (logo left, menu right) */
.uxdwfe-nav-layout-inline .uxdwfe-nav-inner { flex-direction: row; }
.uxdwfe-nav-layout-inline .uxdwfe-nav-center { flex: 1; display: flex; }
.uxdwfe-nav-layout-inline .uxdwfe-nav-center.uxdwfe-menu-align-left   { justify-content: flex-start; }
.uxdwfe-nav-layout-inline .uxdwfe-nav-center.uxdwfe-menu-align-center { justify-content: center; }
.uxdwfe-nav-layout-inline .uxdwfe-nav-center.uxdwfe-menu-align-right  { justify-content: flex-end; }
.uxdwfe-nav-layout-inline .uxdwfe-nav-center.uxdwfe-menu-align-space-between { justify-content: space-between; }

/* Socials / mini-cart / buttons are now direct flex children of .uxdwfe-nav-inner */
.uxdwfe-nav-layout-inline .uxdwfe-nav-socials,
.uxdwfe-nav-layout-inline .uxdwfe-mini-cart-wrapper,
.uxdwfe-nav-layout-inline .uxdwfe-nav-buttons {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
/* Default gap between consecutive right-side items */
.uxdwfe-nav-layout-inline .uxdwfe-nav-socials + .uxdwfe-mini-cart-wrapper,
.uxdwfe-nav-layout-inline .uxdwfe-nav-socials + .uxdwfe-nav-buttons,
.uxdwfe-nav-layout-inline .uxdwfe-mini-cart-wrapper + .uxdwfe-nav-buttons { margin-left: 16px; }

/* Default first-paint sequence (before Elementor inline CSS applies):
   1 logo, 2 menu, 3 socials, 4 cart, 5 buttons */
.uxdwfe-nav-layout-inline .uxdwfe-nav-logo { order: 1; }
.uxdwfe-nav-layout-inline .uxdwfe-nav-center { order: 2; }
.uxdwfe-nav-layout-inline .uxdwfe-nav-socials { order: 3; }
.uxdwfe-nav-layout-inline .uxdwfe-mini-cart-wrapper { order: 4; }
.uxdwfe-nav-layout-inline .uxdwfe-nav-buttons { order: 5; }
.uxdwfe-nav-layout-inline .uxdwfe-mobile-toggle { order: 6; }

/* Mobile drawer default sequence aligned with desktop defaults */
.uxdwfe-nav-mobile-drawer .uxdwfe-mobile-block-menu { order: 2; }
.uxdwfe-nav-mobile-drawer .uxdwfe-mobile-block-socials { order: 3; }
.uxdwfe-nav-mobile-drawer .uxdwfe-mobile-block-cart { order: 4; }
.uxdwfe-nav-mobile-drawer .uxdwfe-mobile-block-buttons { order: 5; }

/* Logo-top layout */
.uxdwfe-nav-layout-logo-top .uxdwfe-nav-inner { flex-direction: column; gap: 8px; }
.uxdwfe-nav-layout-logo-top .uxdwfe-nav-logo-row  { width: 100%; }
.uxdwfe-nav-layout-logo-top .uxdwfe-nav-bottom-row { width: 100%; display: flex; align-items: center; }

/* ── Logo ──────────────────────────────────────────────────────────────────── */
.uxdwfe-nav-logo { flex-shrink: 0; }
.uxdwfe-nav-logo a { display: inline-flex; align-items: center; text-decoration: none; }
.uxdwfe-nav-logo img { height: auto; display: block; }
.uxdwfe-nav-logo-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0d1b40;
    text-decoration: none;
}

/* ── Primary Nav List ──────────────────────────────────────────────────────── */
.uxdwfe-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
}

/* Both custom (.uxdwfe-nav-item) and WP (.menu-item) top-level items */
.uxdwfe-nav-list > .uxdwfe-nav-item,
.uxdwfe-nav-list > .menu-item,
.uxdwfe-nav-item {
    position: relative;
    margin: 0;
    padding: 0;
}
/* Base link styles — padding intentionally uses low-specificity so Elementor controls override */
.uxdwfe-nav-item > a,
.uxdwfe-nav-list > .menu-item > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--uxd-nm-item-pad-v) var(--uxd-nm-item-pad-h);
    color: var(--uxd-nm-text);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9375rem;
    white-space: nowrap;
    position: relative;
    transition: color var(--uxd-nm-transition), background-color var(--uxd-nm-transition);
    border-radius: 5px;
}
.uxdwfe-nav-item > a:hover,
.uxdwfe-nav-list > .menu-item > a:hover { color: var(--uxd-nm-text-hover); }

.uxdwfe-nav-item.active > a,
.uxdwfe-nav-item.current-menu-item > a,
.uxdwfe-nav-item.current-menu-ancestor > a,
.uxdwfe-nav-list > .menu-item.current-menu-item > a,
.uxdwfe-nav-list > .menu-item.current-menu-ancestor > a { color: var(--uxd-nm-text-hover); }

/* Dropdown chevron (both class names for compat) */
.uxdwfe-drop-chevron,
.uxdwfe-dropdown-chevron {
    display: inline-flex;
    align-items: center;
    transition: transform var(--uxd-nm-transition);
    pointer-events: none;
    opacity: .6;
}
.uxdwfe-nav-item.uxdwfe-open > a .uxdwfe-drop-chevron,
.uxdwfe-nav-item.uxdwfe-open > a .uxdwfe-dropdown-chevron,
.menu-item-has-children.uxdwfe-open > a .uxdwfe-drop-chevron { transform: rotate(180deg); }

/* ── Sub-menu / Dropdown Base ──────────────────────────────────────────────── */
.uxdwfe-nav-list .sub-menu,
.uxdwfe-nav-list .uxdwfe-dropdown-simple {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    min-width: var(--uxd-nm-drop-minwidth);
    background: var(--uxd-nm-drop-bg);
    box-shadow: var(--uxd-nm-drop-shadow);
    border-radius: var(--uxd-nm-drop-radius);
    padding: 6px 0;
    list-style: none;
    margin: 0;
    z-index: 9999;

    /* Hidden state — base transition always applied so animation always works */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--uxd-nm-transition), visibility var(--uxd-nm-transition), transform var(--uxd-nm-transition);
}

/* ── 3rd tier — flyout to the right ───────────────────────────────────────── */
.uxdwfe-nav-list .sub-menu .sub-menu,
.uxdwfe-nav-list .uxdwfe-dropdown-simple .sub-menu {
    top: -6px;
    left: calc(100% + 4px);
    right: auto;
}

/* ── Show state ────────────────────────────────────────────────────────────── */
.uxdwfe-nav-list .uxdwfe-nav-item.uxdwfe-open > .sub-menu,
.uxdwfe-nav-list .uxdwfe-nav-item.uxdwfe-open > .uxdwfe-dropdown-simple,
.uxdwfe-nav-list .has-dropdown.uxdwfe-open > .uxdwfe-dropdown-simple,
/* WP menu: any depth */
.uxdwfe-nav-list .menu-item-has-children.uxdwfe-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

/* ── Animation: Fade (default) ─────────────────────────────────────────────── */
.uxdwfe-drop-fade .uxdwfe-nav-item > .sub-menu,
.uxdwfe-drop-fade .uxdwfe-nav-item > .uxdwfe-dropdown-simple,
.uxdwfe-drop-fade .menu-item-has-children > .sub-menu {
    transition: opacity var(--uxd-nm-transition), visibility var(--uxd-nm-transition);
    transform: none;
}

/* ── Animation: Slide Down ─────────────────────────────────────────────────── */
.uxdwfe-drop-slide .uxdwfe-nav-item > .sub-menu,
.uxdwfe-drop-slide .uxdwfe-nav-item > .uxdwfe-dropdown-simple,
.uxdwfe-drop-slide .menu-item-has-children > .sub-menu {
    transform: translateY(-8px);
    transition: opacity var(--uxd-nm-transition), visibility var(--uxd-nm-transition), transform var(--uxd-nm-transition);
}
.uxdwfe-drop-slide .uxdwfe-nav-item.uxdwfe-open > .sub-menu,
.uxdwfe-drop-slide .uxdwfe-nav-item.uxdwfe-open > .uxdwfe-dropdown-simple,
.uxdwfe-drop-slide .menu-item-has-children.uxdwfe-open > .sub-menu {
    transform: translateY(0);
}
/* 3rd tier slides right */
.uxdwfe-drop-slide .uxdwfe-nav-list .sub-menu .sub-menu {
    transform: translateX(-8px);
}
.uxdwfe-drop-slide .uxdwfe-nav-list .menu-item-has-children.uxdwfe-open > .sub-menu .menu-item-has-children.uxdwfe-open > .sub-menu,
.uxdwfe-drop-slide .uxdwfe-nav-item.uxdwfe-open > .uxdwfe-dropdown-simple .menu-item-has-children.uxdwfe-open > .sub-menu {
    transform: translateX(0);
}

/* ── Animation: Zoom In ────────────────────────────────────────────────────── */
.uxdwfe-drop-zoom .uxdwfe-nav-item > .sub-menu,
.uxdwfe-drop-zoom .uxdwfe-nav-item > .uxdwfe-dropdown-simple,
.uxdwfe-drop-zoom .menu-item-has-children > .sub-menu {
    transform: scale(.96) translateY(-4px);
    transform-origin: top left;
    transition: opacity var(--uxd-nm-transition), visibility var(--uxd-nm-transition), transform var(--uxd-nm-transition);
}
.uxdwfe-drop-zoom .uxdwfe-nav-item.uxdwfe-open > .sub-menu,
.uxdwfe-drop-zoom .uxdwfe-nav-item.uxdwfe-open > .uxdwfe-dropdown-simple,
.uxdwfe-drop-zoom .menu-item-has-children.uxdwfe-open > .sub-menu {
    transform: scale(1) translateY(0);
}

/* ── Animation: Flip ────────────────────────────────────────────────────────── */
.uxdwfe-drop-flip .uxdwfe-nav-item > .sub-menu,
.uxdwfe-drop-flip .uxdwfe-nav-item > .uxdwfe-dropdown-simple,
.uxdwfe-drop-flip .menu-item-has-children > .sub-menu {
    transform: rotateX(-15deg);
    transform-origin: top center;
    transition: opacity var(--uxd-nm-transition), visibility var(--uxd-nm-transition), transform var(--uxd-nm-transition);
}
.uxdwfe-drop-flip .uxdwfe-nav-item.uxdwfe-open > .sub-menu,
.uxdwfe-drop-flip .uxdwfe-nav-item.uxdwfe-open > .uxdwfe-dropdown-simple,
.uxdwfe-drop-flip .menu-item-has-children.uxdwfe-open > .sub-menu {
    transform: rotateX(0);
}

/* ── Animation: Bounce ──────────────────────────────────────────────────────── */
.uxdwfe-drop-bounce .uxdwfe-nav-item > .sub-menu,
.uxdwfe-drop-bounce .uxdwfe-nav-item > .uxdwfe-dropdown-simple,
.uxdwfe-drop-bounce .menu-item-has-children > .sub-menu {
    transform: translateY(8px);
    transition: opacity var(--uxd-nm-transition), visibility var(--uxd-nm-transition), transform var(--uxd-nm-transition);
}
.uxdwfe-drop-bounce .uxdwfe-nav-item.uxdwfe-open > .sub-menu,
.uxdwfe-drop-bounce .uxdwfe-nav-item.uxdwfe-open > .uxdwfe-dropdown-simple,
.uxdwfe-drop-bounce .menu-item-has-children.uxdwfe-open > .sub-menu {
    transform: translateY(0);
    animation: uxdNavDropBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes uxdNavDropBounce {
    0%   { transform: translateY(10px); opacity: 0; }
    60%  { transform: translateY(-4px); }
    100% { transform: translateY(0);   opacity: 1; }
}

/* ── Sub-menu Items ────────────────────────────────────────────────────────── */
.uxdwfe-nav-list .sub-menu > li,
.uxdwfe-nav-list .uxdwfe-dropdown-simple > li {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}
.uxdwfe-nav-list .sub-menu > li > a,
.uxdwfe-nav-list .uxdwfe-dropdown-simple > li > a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: var(--uxd-nm-sub-pad-v) var(--uxd-nm-sub-pad-h);
    color: #1d2327;
    font-size: 0.875rem;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--uxd-nm-transition), background-color var(--uxd-nm-transition);
    position: relative;
}
.uxdwfe-nav-list .sub-menu > li > a:hover,
.uxdwfe-nav-list .uxdwfe-dropdown-simple > li > a:hover {
    color: var(--uxd-nm-accent);
    background-color: #f8f9fb;
}
.uxdwfe-nav-list .sub-menu > li.current-menu-item > a,
.uxdwfe-nav-list .sub-menu > li.uxdwfe-open > a {
    color: var(--uxd-nm-accent);
}

/* 3rd tier indicator arrow */
.uxdwfe-nav-list .sub-menu .menu-item-has-children > a .uxdwfe-dropdown-chevron,
.uxdwfe-nav-list .uxdwfe-dropdown-simple .menu-item-has-children > a .uxdwfe-dropdown-chevron {
    transform: rotate(-90deg);
    margin-left: auto;
}
.uxdwfe-nav-list .sub-menu .menu-item-has-children.uxdwfe-open > a .uxdwfe-dropdown-chevron {
    transform: rotate(90deg);
}

/* ── Separator line inside dropdowns ──────────────────────────────────────── */
.uxdwfe-nav-list .sub-menu > li.uxdwfe-menu-separator,
.uxdwfe-nav-list .uxdwfe-dropdown-simple > li.uxdwfe-menu-separator {
    border-top: 1px solid #e2e8f0;
    margin: 4px 0;
    pointer-events: none;
}

/* =====================================================================
   HOVER ANIMATIONS — applied via prefix_class on widget wrapper
   ===================================================================== */

/* shared base for all animations */
.uxdwfe-nav-item > a { transition: color var(--uxd-nm-transition); }

/* ── Underline Slide ─────────────────────────────────────────────────────── */
.uxdwfe-item-hover-underline-slide .uxdwfe-nav-item > a {
    overflow: hidden;
}
.uxdwfe-item-hover-underline-slide .uxdwfe-nav-item > a::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: var(--uxd-nm-item-pad-h);
    right: var(--uxd-nm-item-pad-h);
    height: 2px;
    background-color: var(--uxd-nm-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}
.uxdwfe-item-hover-underline-slide .uxdwfe-nav-item > a:hover::after,
.uxdwfe-item-hover-underline-slide .uxdwfe-nav-item.active > a::after,
.uxdwfe-item-hover-underline-slide .uxdwfe-nav-item.current-menu-item > a::after,
.uxdwfe-item-hover-underline-slide .uxdwfe-nav-item.current-menu-ancestor > a::after { transform: scaleX(1); }

/* ── Underline Fill (block) ──────────────────────────────────────────────── */
.uxdwfe-item-hover-underline-fill .uxdwfe-nav-item > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--uxd-nm-accent);
    transform: scaleX(0);
    transition: transform .25s ease;
}
.uxdwfe-item-hover-underline-fill .uxdwfe-nav-item > a:hover::after,
.uxdwfe-item-hover-underline-fill .uxdwfe-nav-item.active > a::after { transform: scaleX(1); }

/* ── Background Fill ─────────────────────────────────────────────────────── */
.uxdwfe-item-hover-background-fill .uxdwfe-nav-item > a {
    border-radius: 4px;
}
.uxdwfe-item-hover-background-fill .uxdwfe-nav-item > a:hover {
    background-color: var(--uxd-nm-accent);
    color: #fff !important;
}
.uxdwfe-item-hover-background-fill .uxdwfe-nav-item.active > a {
    background-color: var(--uxd-nm-accent);
    color: #fff !important;
}

/* ── Highlight Glow ──────────────────────────────────────────────────────── */
.uxdwfe-item-hover-highlight .uxdwfe-nav-item > a:hover {
    text-shadow: 0 0 12px rgba(192,57,43,.5);
}

/* ── Shift Right ─────────────────────────────────────────────────────────── */
.uxdwfe-item-hover-shift-right .uxdwfe-nav-item > a {
    transition: color var(--uxd-nm-transition), transform var(--uxd-nm-transition);
}
.uxdwfe-item-hover-shift-right .uxdwfe-nav-item > a:hover { transform: translateX(4px); }

/* ── Scale Up ────────────────────────────────────────────────────────────── */
.uxdwfe-item-hover-scale-up .uxdwfe-nav-item > a {
    transition: color var(--uxd-nm-transition), transform var(--uxd-nm-transition);
}
.uxdwfe-item-hover-scale-up .uxdwfe-nav-item > a:hover { transform: scale(1.06); }

/* ── Fade Dim (siblings dim on hover) ───────────────────────────────────── */
.uxdwfe-item-hover-fade-dim .uxdwfe-nav-list:hover .uxdwfe-nav-item > a { opacity: 0.45; }
.uxdwfe-item-hover-fade-dim .uxdwfe-nav-list .uxdwfe-nav-item:hover > a { opacity: 1; }

/* ── Bold ────────────────────────────────────────────────────────────────── */
.uxdwfe-item-hover-bold .uxdwfe-nav-item > a { transition: color var(--uxd-nm-transition), font-weight 0s; }
.uxdwfe-item-hover-bold .uxdwfe-nav-item > a:hover,
.uxdwfe-item-hover-bold .uxdwfe-nav-item.active > a { font-weight: 700; }

/* ── WP .menu-item mirrors for all hover animations ─────────────────────── */
/* Maps .menu-item top-level items to receive the same hover effects */
.uxdwfe-item-hover-underline-slide .uxdwfe-nav-list > .menu-item > a { overflow: hidden; }
.uxdwfe-item-hover-underline-slide .uxdwfe-nav-list > .menu-item > a::after {
    content: ''; position: absolute; bottom: 4px;
    left: var(--uxd-nm-item-pad-h); right: var(--uxd-nm-item-pad-h);
    height: 2px; background-color: var(--uxd-nm-accent);
    transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.uxdwfe-item-hover-underline-slide .uxdwfe-nav-list > .menu-item > a:hover::after,
.uxdwfe-item-hover-underline-slide .uxdwfe-nav-list > .menu-item.current-menu-item > a::after,
.uxdwfe-item-hover-underline-slide .uxdwfe-nav-list > .menu-item.current-menu-ancestor > a::after { transform: scaleX(1); }

.uxdwfe-item-hover-underline-fill .uxdwfe-nav-list > .menu-item > a::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0;
    height: 3px; background-color: var(--uxd-nm-accent);
    transform: scaleX(0); transition: transform .25s ease;
}
.uxdwfe-item-hover-underline-fill .uxdwfe-nav-list > .menu-item > a:hover::after,
.uxdwfe-item-hover-underline-fill .uxdwfe-nav-list > .menu-item.current-menu-item > a::after { transform: scaleX(1); }

.uxdwfe-item-hover-background-fill .uxdwfe-nav-list > .menu-item > a { border-radius: 4px; }
.uxdwfe-item-hover-background-fill .uxdwfe-nav-list > .menu-item > a:hover,
.uxdwfe-item-hover-background-fill .uxdwfe-nav-list > .menu-item.current-menu-item > a { background-color: var(--uxd-nm-accent); color: #fff !important; }

.uxdwfe-item-hover-highlight .uxdwfe-nav-list > .menu-item > a:hover { text-shadow: 0 0 12px rgba(192,57,43,.5); }

.uxdwfe-item-hover-shift-right .uxdwfe-nav-list > .menu-item > a { transition: color var(--uxd-nm-transition), transform var(--uxd-nm-transition); }
.uxdwfe-item-hover-shift-right .uxdwfe-nav-list > .menu-item > a:hover { transform: translateX(4px); }

.uxdwfe-item-hover-scale-up .uxdwfe-nav-list > .menu-item > a { transition: color var(--uxd-nm-transition), transform var(--uxd-nm-transition); }
.uxdwfe-item-hover-scale-up .uxdwfe-nav-list > .menu-item > a:hover { transform: scale(1.06); }

.uxdwfe-item-hover-fade-dim .uxdwfe-nav-list:hover .menu-item > a { opacity: 0.45; }
.uxdwfe-item-hover-fade-dim .uxdwfe-nav-list .menu-item:hover > a { opacity: 1; }

.uxdwfe-item-hover-bold .uxdwfe-nav-list > .menu-item > a { transition: color var(--uxd-nm-transition), font-weight 0s; }
.uxdwfe-item-hover-bold .uxdwfe-nav-list > .menu-item > a:hover,
.uxdwfe-item-hover-bold .uxdwfe-nav-list > .menu-item.current-menu-item > a { font-weight: 700; }

/* =====================================================================
   BUTTON ANIMATIONS
   ===================================================================== */
.uxdwfe-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background-color var(--uxd-nm-transition),
                color var(--uxd-nm-transition),
                border-color var(--uxd-nm-transition),
                transform var(--uxd-nm-transition),
                box-shadow var(--uxd-nm-transition);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}
/* Style variants */
.uxdwfe-btn-style-filled  { background: var(--uxd-nm-accent); color: #fff; border-color: var(--uxd-nm-accent); }
.uxdwfe-btn-style-outline { background: transparent; color: var(--uxd-nm-accent); border-color: var(--uxd-nm-accent); }
.uxdwfe-btn-style-ghost   { background: transparent; color: var(--uxd-nm-text); border-color: transparent; }
.uxdwfe-btn-style-text    { background: transparent; color: var(--uxd-nm-accent); border-color: transparent; text-decoration: underline; }

.uxdwfe-btn-style-filled:hover  { background: #a93226; border-color: #a93226; color: #fff; }
.uxdwfe-btn-style-outline:hover { background: var(--uxd-nm-accent); color: #fff; }
.uxdwfe-btn-style-ghost:hover   { color: var(--uxd-nm-accent); }

/* Button hover animations */
.uxdwfe-btn-anim-grow:hover       { transform: scale(1.05); }
.uxdwfe-btn-anim-lift:hover        { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.15); }
.uxdwfe-btn-anim-fill-in::before  {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.15);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}
.uxdwfe-btn-anim-fill-in:hover::before { transform: scaleX(1); }

@keyframes uxdwfe-shimmer { 0%,100%{opacity:0} 50%{opacity:1} }
.uxdwfe-btn-anim-shimmer::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
    transition: left .5s ease;
}
.uxdwfe-btn-anim-shimmer:hover::after { left: 150%; }

@keyframes uxdwfe-pulse  { 0%,100%{box-shadow:0 0 0 0 rgba(192,57,43,.4)} 70%{box-shadow:0 0 0 8px rgba(192,57,43,0)} }
.uxdwfe-btn-anim-pulse:hover { animation: uxdwfe-pulse .7s; }

@keyframes uxdwfe-shake  { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.uxdwfe-btn-anim-shake:hover  { animation: uxdwfe-shake .35s; }

@keyframes uxdwfe-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.uxdwfe-btn-anim-bounce:hover { animation: uxdwfe-bounce .4s; }

/* Social icon animations */
.uxdwfe-btn-anim-spin:hover   { transform: rotate(360deg); transition: transform .5s ease; }

/* =====================================================================
   MOBILE TOGGLE & DRAWER
   ===================================================================== */
.uxdwfe-mobile-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0px; /* required for active-state cross animation */
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px; /* default touch-friendly target; grows button outward via content-box */
    box-sizing: content-box; /* padding expands outward — icons never get crushed */
    margin-left: auto;
    color: #0d1b40;
    flex-shrink: 0;
}
.uxdwfe-mobile-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    flex-shrink: 0; /* never compress spans regardless of container size */
    transition: transform .25s ease, opacity .25s ease;
}
/* gap:5px bars → center-to-center = 5+2 = 7px → translateY(7px) for cross */
.uxdwfe-mobile-toggle.active span:nth-child(1) { transform: rotate(45deg) translateY(7px); }
.uxdwfe-mobile-toggle.active span:nth-child(2) { opacity: 0; }
.uxdwfe-mobile-toggle.active span:nth-child(3) { transform: rotate(-45deg) translateY(-7px); }

/* Mobile Drawer */
.uxdwfe-nav-mobile-drawer {
    display: none;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border-top: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}
.uxdwfe-nav-mobile-drawer.active {
    max-height: 90vh;
    overflow-y: auto;
}

/* Mobile nav list */
.uxdwfe-nav-mobile-drawer .uxdwfe-nav-list,
.uxdwfe-nav-list-mobile {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    gap: 0;
}
.uxdwfe-nav-mobile-drawer .uxdwfe-nav-item,
.uxdwfe-nav-mobile-drawer .menu-item,
.uxdwfe-nav-list-mobile .uxdwfe-nav-item { width: 100%; }
.uxdwfe-nav-mobile-drawer .uxdwfe-nav-item > a,
.uxdwfe-nav-mobile-drawer .menu-item > a,
.uxdwfe-nav-list-mobile .uxdwfe-nav-item > a {
    padding: 12px 20px;
    width: 100%;
    border-bottom: 1px solid #f0f0f0;
    justify-content: space-between;
    display: flex;
    align-items: center;
}

/* Mobile sub-menus (accordion) */
.uxdwfe-nav-mobile-drawer .sub-menu,
.uxdwfe-nav-mobile-drawer .uxdwfe-dropdown-simple,
.uxdwfe-nav-mobile-drawer .uxdwfe-mega-panel {
    position: static;
    box-shadow: none;
    border-radius: 0;
    background: #f8f9fb;
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transition: max-height .3s ease;
    padding: 0;
    width: 100% !important;
    left: auto !important;
}
.uxdwfe-nav-mobile-drawer .uxdwfe-nav-item.uxdwfe-open > .sub-menu,
.uxdwfe-nav-mobile-drawer .uxdwfe-nav-item.uxdwfe-open > .uxdwfe-dropdown-simple,
.uxdwfe-nav-mobile-drawer .uxdwfe-nav-item.uxdwfe-open > .uxdwfe-mega-panel,
.uxdwfe-nav-mobile-drawer .menu-item-has-children.uxdwfe-open > .sub-menu,
.uxdwfe-nav-mobile-drawer .has-dropdown.uxdwfe-open > .uxdwfe-dropdown-simple { max-height: 800px; }
.uxdwfe-nav-mobile-drawer .sub-menu > li > a,
.uxdwfe-nav-mobile-drawer .uxdwfe-dropdown-simple > li > a {
    padding: 10px 20px 10px 32px;
    font-size: 0.875rem;
    white-space: normal;
}
/* 3rd tier mobile */
.uxdwfe-nav-mobile-drawer .sub-menu .sub-menu > li > a { padding-left: 48px; }

/* Mobile extras */
.uxdwfe-nav-mobile-extra {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid #e2e8f0;
}
.uxdwfe-nav-mobile-extra .uxdwfe-nav-btn { justify-content: center; }
.uxdwfe-nav-mobile-socials {
    display: flex;
    padding: 12px 20px;
    border-top: 1px solid #e2e8f0;
}

/* =====================================================================
   SOCIAL ICONS
   ===================================================================== */
.uxdwfe-nav-socials {
    display: flex;
    align-items: center;
    gap: 8px;
}
.uxdwfe-nav-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    text-decoration: none;
    color: #646970;
    transition: color var(--uxd-nm-transition), background-color var(--uxd-nm-transition), transform var(--uxd-nm-transition);
}
.uxdwfe-nav-social-link:hover { color: var(--uxd-nm-accent); }
.uxdwfe-nav-social-link i,
.uxdwfe-nav-social-link svg { pointer-events: none; }

/* =====================================================================
   BUTTONS CONTAINER
   ===================================================================== */
.uxdwfe-nav-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* =====================================================================
   INTEGRATED MINI CART (NAV)
   ===================================================================== */
.uxdwfe-nav-mini-cart {
    position: relative;
    flex-shrink: 0;
}
.uxdwfe-nav-mini-cart .uxdwfe-mini-cart-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
}
.uxdwfe-nav-mini-cart .uxdwfe-mini-cart-icon-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.uxdwfe-nav-mini-cart .uxdwfe-mini-cart-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.uxdwfe-nav-mini-cart .uxdwfe-mini-cart-count {
    position: absolute;
    top: -8px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}
.uxdwfe-nav-mini-cart .uxdwfe-mini-cart-text,
.uxdwfe-nav-mini-cart .uxdwfe-mini-cart-subtotal {
    line-height: 1.2;
}
.uxdwfe-nav-mini-cart .uxdwfe-mini-cart-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000001;
    width: min(380px, calc(100vw - 24px));
    max-height: min(520px, calc(100vh - 40px));
    background: #fff;
    border-radius: 12px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    overflow: hidden;
}
.uxdwfe-nav-mini-cart .uxdwfe-mini-cart-panel.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
.uxdwfe-nav-mini-cart.cart-style-slide_toggle .uxdwfe-mini-cart-panel {
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    height: 100vh;
    max-height: 100vh;
    width: min(420px, 92vw);
    border-radius: 0;
    transform: translateX(100%);
}
.uxdwfe-nav-mini-cart.cart-style-slide_toggle .uxdwfe-mini-cart-panel.open {
    transform: translateX(0);
}
.uxdwfe-nav-mini-cart .uxdwfe-mini-cart-content {
    max-height: calc(100% - 68px);
    overflow: auto;
}
.uxdwfe-nav-mini-cart .uxdwfe-mini-cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1000000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}
.uxdwfe-nav-mini-cart .uxdwfe-mini-cart-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.uxdwfe-nav-mobile-mini-cart .uxdwfe-nav-mini-cart {
    width: 100%;
}

body.uxdwfe-cart-open {
    overflow: hidden;
}

/* =====================================================================
   MEGA PANEL (inherits existing styles, positioned by JS)
   ===================================================================== */
.uxdwfe-mega-panel {
    position: absolute;
    top: 100%;
    z-index: 9999;
    background: #fff;
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
    border-radius: 0 0 8px 8px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--uxd-nm-transition), visibility var(--uxd-nm-transition);
}
.uxdwfe-nav-item.uxdwfe-mega-open > .uxdwfe-mega-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}
.uxdwfe-drop-slide .uxdwfe-mega-panel {
    transform: translateY(-8px);
    transition: opacity var(--uxd-nm-transition), visibility var(--uxd-nm-transition), transform var(--uxd-nm-transition);
}
.uxdwfe-drop-slide .uxdwfe-nav-item.uxdwfe-mega-open > .uxdwfe-mega-panel { transform: translateY(0); }
.uxdwfe-drop-zoom .uxdwfe-mega-panel {
    transform: scale(.97) translateY(-4px);
    transform-origin: top center;
    transition: opacity var(--uxd-nm-transition), visibility var(--uxd-nm-transition), transform var(--uxd-nm-transition);
}
.uxdwfe-drop-zoom .uxdwfe-nav-item.uxdwfe-mega-open > .uxdwfe-mega-panel { transform: scale(1) translateY(0); }

/* =====================================================================
   SIDE PANEL DRAWER
   ===================================================================== */

/* Side panel header: logo + close button */
.uxdwfe-side-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}
.uxdwfe-side-panel-header .uxdwfe-nav-logo {
    flex-shrink: 1;
    min-width: 0;
}
.uxdwfe-side-panel-header .uxdwfe-nav-logo img {
    max-width: 140px;
    height: auto;
}
.uxdwfe-side-panel-header .uxdwfe-side-panel-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    margin-left: auto;
    flex-shrink: 0;
    color: currentColor;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    border-radius: 4px;
    position: absolute;
    right: 0;
    top: 0;
}
.uxdwfe-side-panel-close:hover { opacity: 1; }

/* Base side-panel overrides — replaces the max-height/overflow dropdown approach */
.uxdwfe-nav-mobile-drawer.uxdwfe-drawer-style-side_panel {
    position: fixed !important;
    top: 0;
    height: 100vh !important;
    max-height: 100vh !important; /* override dropdown 0→90vh */
    width: 300px;
    overflow-y: auto !important;
    overflow-x: hidden;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: none;
    /* transition only transform, not max-height */
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.uxdwfe-drawer-style-side_panel.uxdwfe-side-left {
    left: 0;
    right: auto;
    transform: translateX(-105%);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
}

.uxdwfe-drawer-style-side_panel.uxdwfe-side-right {
    right: 0;
    left: auto;
    transform: translateX(105%);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
}

.uxdwfe-drawer-style-side_panel.active {
    transform: translateX(0) !important;
}

/* Side panel item layout — full width, proper padding */
.uxdwfe-drawer-style-side_panel .uxdwfe-nav-list,
.uxdwfe-drawer-style-side_panel .uxdwfe-nav-list-mobile {
    padding: 8px 0;
}

/* Drawer overlay */
.uxdwfe-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 999998;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.uxdwfe-drawer-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Prevent body scroll when side panel is open */
body.uxdwfe-drawer-open { overflow: hidden; }

/* =====================================================================
   RESPONSIVE — Mobile breakpoint via JS-toggled class
   ===================================================================== */
@media (max-width: 1024px) {
    .uxdwfe-nav-list { display: none; }
    .uxdwfe-mobile-toggle { display: flex; }
    .uxdwfe-nav-mobile-drawer { display: flex; }
    /* Hide desktop-only right-side items on mobile */
    .uxdwfe-nav-layout-inline .uxdwfe-nav-buttons,
    .uxdwfe-nav-layout-inline .uxdwfe-nav-socials { display: none; }
}
@media (min-width: 1025px) {
    .uxdwfe-nav-mobile-drawer { display: none !important; }
    .uxdwfe-mobile-toggle { display: none !important; }
}