/*
 * WP Nav Pro — Desktop Header Styles
 * All values use CSS custom properties set by the PHP asset class.
 * Override any token via Customizer → WP Nav Pro → Colors / Typography.
 *
 * Breakpoint: hidden below --wnp-breakpoint (default 768px).
 */

/* ─── Show/hide ───────────────────────────────────────────────────────────── */
.wnp-header-desktop {
  transition: height 0.35s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.35s cubic-bezier(0.4,0,0.2,1),
              background 0.35s cubic-bezier(0.4,0,0.2,1); display: flex; }
.wnp-header-mobile  { display: none; }

@media (max-width: 768px) { /* overridden inline if user changes breakpoint */
  .wnp-header-desktop { display: none; }
  .wnp-header-mobile  { display: flex; }
}

/* ─── Header shell ────────────────────────────────────────────────────────── */
.wnp-header-desktop {
  position: relative;
  z-index: var(--wnp-z-index);
  width: 100%;
  background: var(--wnp-surface);
  flex-direction: column;
}

.wnp-header-desktop.wnp-sticky {
  position: sticky;
  top: 0;
}

.wnp-header-desktop.wnp-border-bottom {
  border-bottom: 1px solid var(--wnp-outline);
}

.wnp-header-desktop.wnp-transparent {
  background: transparent;
  border-bottom-color: transparent;
}

/* ─── Inner container ─────────────────────────────────────────────────────── */
.wnp-header-desktop .wnp-header-inner {
  display: flex;
  align-items: center;
  min-height: var(--wnp-height-desktop);
  max-width: var(--wnp-max-width);
  margin: 0 auto;
  padding: var(--wnp-padding-y, 0px) var(--wnp-padding-x);
  width: 100%;
  gap: 0;
}

/* ─── Layout variants ─────────────────────────────────────────────────────── */
.wnp-layout--logo-nav-utils .wnp-logo-wrap { margin-right: 40px; }
.wnp-layout--logo-nav-utils .wnp-nav       { flex: 1; }
.wnp-layout--logo-nav-utils .wnp-utils     { margin-left: auto; }

/* Logo | Nav centered | Utils — true centre via CSS Grid */
.wnp-layout--logo-centered-utils .wnp-header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}
.wnp-layout--logo-centered-utils .wnp-logo-wrap {
  grid-column: 1;
  display: flex;
  align-items: center;
}
.wnp-layout--logo-centered-utils .wnp-nav {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wnp-layout--logo-centered-utils .wnp-utils {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.wnp-layout--logo-utils-nav .wnp-logo-wrap { margin-right: 24px; }
.wnp-layout--logo-utils-nav .wnp-nav       { flex: 1; order: 3; justify-content: flex-end; }
.wnp-layout--logo-utils-nav .wnp-utils     { margin-left: auto; margin-right: 24px; order: 2; }

.wnp-layout--nav-logo-utils .wnp-logo-wrap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.wnp-layout--nav-logo-utils .wnp-nav   { flex: 1; }
.wnp-layout--nav-logo-utils .wnp-utils { margin-left: auto; }

/* ─── Logo ────────────────────────────────────────────────────────────────── */
.wnp-header-desktop .wnp-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.wnp-header-desktop .wnp-logo__img {
  max-height: var(--wnp-logo-height);
  width: auto;
  display: block;
}

.wnp-header-desktop .wnp-logo__text {
  font-size: 18px;
  font-weight: 700;
  color: var(--wnp-primary);
  white-space: nowrap;
}

/* ─── Nav ─────────────────────────────────────────────────────────────────── */
.wnp-header-desktop .wnp-nav {
  display: flex;
  align-items: center;
}

.wnp-header-desktop .wnp-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Nav items */
.wnp-header-desktop .wnp-nav-item {
  position: relative;
}

/* Nav links */
.wnp-header-desktop .wnp-nav-link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: var(--wnp-shape-full);
  font-size: var(--wnp-nav-size);
  font-weight: var(--wnp-nav-weight);
  text-transform: var(--wnp-transform);
  color: var(--wnp-on-surface);
  text-decoration: none;
  border: none;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition:
    background var(--wnp-dur-md) var(--wnp-ease),
    color var(--wnp-dur-md) var(--wnp-ease);
}

/* Underline pseudo-element — used by underline & underline-grow */
.wnp-header-desktop .wnp-nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 14px;
  right: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--wnp-nav-hover-color, var(--wnp-primary));
  transform: scaleX(0);
  transition: transform var(--wnp-dur-md) var(--wnp-ease);
}

/* ─── Hover styles ────────────────────────────────────────────────────────── */

/* PILL (default) — filled background */
.wnp-nav-hover--pill .wnp-nav-link:hover,
.wnp-nav-hover--pill .wnp-nav-link:focus-visible {
  background: var(--wnp-nav-hover-color, var(--wnp-primary-hover));
  outline: none;
}

/* UNDERLINE — thin static line on hover */
.wnp-nav-hover--underline .wnp-nav-link:hover::after,
.wnp-nav-hover--underline .wnp-nav-link:focus-visible::after {
  transform: scaleX(1);
}
.wnp-nav-hover--underline .wnp-nav-link:hover,
.wnp-nav-hover--underline .wnp-nav-link:focus-visible {
  outline: none;
}

/* UNDERLINE GROW — animated expanding line */
.wnp-nav-hover--underline-grow .wnp-nav-link::after {
  transform-origin: left;
}
.wnp-nav-hover--underline-grow .wnp-nav-link:hover::after,
.wnp-nav-hover--underline-grow .wnp-nav-link:focus-visible::after {
  transform: scaleX(1);
}
.wnp-nav-hover--underline-grow .wnp-nav-link:hover,
.wnp-nav-hover--underline-grow .wnp-nav-link:focus-visible {
  outline: none;
}

/* HIGHLIGHT — colour change, no background */
.wnp-nav-hover--highlight .wnp-nav-link:hover,
.wnp-nav-hover--highlight .wnp-nav-link:focus-visible {
  color: var(--wnp-nav-hover-color, var(--wnp-primary));
  outline: none;
}

/* NONE — no visible effect, just focus outline */
.wnp-nav-hover--none .wnp-nav-link:focus-visible {
  outline: 2px solid var(--wnp-primary);
  outline-offset: 2px;
}

/* ─── Active / current page styles ───────────────────────────────────────── */

/* PILL active (default) */
.wnp-nav-active--pill .wnp-nav-item--active > .wnp-nav-link,
.wnp-nav-active--pill .wnp-nav-item--active > .wnp-nav-link:hover {
  background: var(--wnp-nav-active-color, var(--wnp-primary-container));
  color: var(--wnp-primary);
}

/* UNDERLINE active */
.wnp-nav-active--underline .wnp-nav-item--active > .wnp-nav-link::after {
  transform: scaleX(1);
  background: var(--wnp-nav-active-color, var(--wnp-primary));
}
.wnp-nav-active--underline .wnp-nav-item--active > .wnp-nav-link {
  color: var(--wnp-on-surface);
}

/* HIGHLIGHT active */
.wnp-nav-active--highlight .wnp-nav-item--active > .wnp-nav-link,
.wnp-nav-active--highlight .wnp-nav-item--active > .wnp-nav-link:hover {
  color: var(--wnp-nav-active-color, var(--wnp-primary));
  background: transparent;
}

/* NONE active */
.wnp-nav-active--none .wnp-nav-item--active > .wnp-nav-link {
  background: transparent;
  color: var(--wnp-on-surface);
}

/* Chevron */
.wnp-header-desktop .wnp-nav-link__chevron {
  transition: transform var(--wnp-dur-md) var(--wnp-ease);
  opacity: 0.6;
  width: 14px;
  height: 14px;
}

.wnp-header-desktop .wnp-nav-item--has-children:hover .wnp-nav-link__chevron,
.wnp-header-desktop .wnp-nav-item--has-children.wnp-open .wnp-nav-link__chevron {
  transform: rotate(180deg);
}

/* ─── Dropdown ────────────────────────────────────────────────────────────── */
.wnp-header-desktop .wnp-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: var(--wnp-surface);
  border-radius: var(--wnp-shape-large);
  border: 1px solid var(--wnp-outline);
  box-shadow: var(--wnp-elev-2);
  padding: 8px;
  list-style: none;
  margin: 0;

  /* Hidden state */
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity var(--wnp-dur-md) var(--wnp-ease),
    transform var(--wnp-dur-md) var(--wnp-ease),
    visibility 0s var(--wnp-dur-md);
}

/* Transparent bridge fills the 8px gap so moving the mouse into the
   dropdown doesn't exit the hover zone and close the menu */
.wnp-header-desktop .wnp-dropdown::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.wnp-header-desktop .wnp-nav-item--has-children:hover .wnp-dropdown,
.wnp-header-desktop .wnp-nav-item--has-children.wnp-open .wnp-dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
  visibility: visible;
  transition:
    opacity var(--wnp-dur-md) var(--wnp-ease),
    transform var(--wnp-dur-md) var(--wnp-ease),
    visibility 0s;
}

/* Dropdown items */
.wnp-header-desktop .wnp-dropdown .wnp-nav-link {
  display: flex;
  border-radius: var(--wnp-shape-medium);
  padding: 10px 14px;
  width: 100%;
}

.wnp-header-desktop .wnp-dropdown .wnp-nav-link:hover {
  background: var(--wnp-primary-active);
}

/* Dropdown divider — rendered via li.wnp-dropdown-divider */
.wnp-header-desktop .wnp-dropdown-divider {
  height: 1px;
  background: var(--wnp-outline);
  margin: 6px 0;
  list-style: none;
}

/* ─── Utility bar ─────────────────────────────────────────────────────────── */
.wnp-header-desktop .wnp-utils {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Icon buttons */
.wnp-header-desktop .wnp-icon-btn {
  position: relative;
  width: var(--wnp-desktop-icon-btn, 36px);
  height: var(--wnp-desktop-icon-btn, 36px);
  border-radius: var(--wnp-shape-full);
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wnp-on-surface);
  text-decoration: none;
  flex-shrink: 0;
  transition: background var(--wnp-dur-md) var(--wnp-ease);
}

/* Icon SVG size on desktop */
.wnp-header-desktop .wnp-icon-btn svg {
  width: var(--wnp-desktop-icon-svg, 20px);
  height: var(--wnp-desktop-icon-svg, 20px);
  flex-shrink: 0;
}

.wnp-header-desktop .wnp-icon-btn:hover {
  background: var(--wnp-primary-hover);
}

/* Account link — ensure theme button/a styles don't bleed in */
.wnp-header-desktop .wnp-user-btn {
  flex: 0 0 auto;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Cart badge */
.wnp-cart-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 17px;
  height: 17px;
  padding: 0 3px;
  background: var(--wnp-cta);
  color: #fff;
  border-radius: var(--wnp-shape-full);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--wnp-surface);
  line-height: 1;
  pointer-events: none;
}

/* Utility pills (WPML, currency) */
.wnp-util-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--wnp-shape-full);
  font-size: 13px;
  font-weight: 500;
  color: var(--wnp-on-surface-variant);
  border: 1px solid var(--wnp-outline);
  background: transparent;
  cursor: pointer;
  transition:
    background var(--wnp-dur-md) var(--wnp-ease),
    border-color var(--wnp-dur-md) var(--wnp-ease);
}

.wnp-util-pill:hover {
  background: var(--wnp-primary-light);
  border-color: var(--wnp-primary);
}

/* Placeholder tag badge */
.wnp-placeholder-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #fff3cd;
  color: #856404;
  padding: 1px 5px;
  border-radius: 4px;
}

/* CTA button */
.wnp-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  border-radius: var(--wnp-btn-radius, var(--wnp-shape-full));
  font-size: var(--wnp-cta-size);
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    box-shadow var(--wnp-dur-md) var(--wnp-ease),
    background var(--wnp-dur-md) var(--wnp-ease),
    border-color var(--wnp-dur-md) var(--wnp-ease);
  margin-left: 8px;
}

/* Filled */
.wnp-cta-btn-filled {
  background: var(--wnp-primary);
  color: var(--wnp-on-primary);
}
.wnp-cta-btn-filled:hover {
  box-shadow: var(--wnp-elev-1);
  background: var(--wnp-primary-dark);
}

/* Outlined */
.wnp-cta-btn-outlined {
  background: transparent;
  color: var(--wnp-primary);
  border: 2px solid var(--wnp-primary);
}
.wnp-cta-btn-outlined:hover {
  background: var(--wnp-primary-hover);
}

/* Tonal */
.wnp-cta-btn-tonal {
  background: var(--wnp-primary-container);
  color: var(--wnp-primary);
}
.wnp-cta-btn-tonal:hover {
  box-shadow: var(--wnp-elev-1);
}

/* Text */
.wnp-cta-btn-text {
  background: transparent;
  color: var(--wnp-primary);
}
.wnp-cta-btn-text:hover {
  background: var(--wnp-primary-hover);
}

/* ─── WC Account Portal (WAP) trigger integration ──────────────────────── */
/* Override WAP's default styles so the trigger matches WP Nav Pro icon btns */

.wnp-header-desktop .wnp-wap-trigger-wrap {
  display: inline-flex;
  align-items: center;
}

.wnp-header-desktop .wap-nw-trigger,
.wnp-header-desktop .wap-account-trigger {
  /* Match our icon button dimensions */
  width: var(--wnp-desktop-icon-btn, 36px) !important;
  height: var(--wnp-desktop-icon-btn, 36px) !important;
  --wap-nw-icon-sz: var(--wnp-desktop-icon-btn, 36px);
  /* Reset any theme button styles */
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  outline-offset: 2px;
  flex: 0 0 auto !important;
  /* Match our nav style */
  border-radius: var(--wnp-shape-full) !important;
  color: var(--wnp-on-surface) !important;
  transition: background var(--wnp-dur-md) var(--wnp-ease) !important;
}

.wnp-header-desktop .wap-nw-trigger:hover,
.wnp-header-desktop .wap-account-trigger:hover {
  background: var(--wnp-primary-hover) !important;
}

/* Avatar / initials size inside the button */
.wnp-header-desktop .wap-nw-trigger .wap-nw-avatar {
  width: calc(var(--wnp-desktop-icon-btn, 36px) - 8px) !important;
  height: calc(var(--wnp-desktop-icon-btn, 36px) - 8px) !important;
  font-size: calc(var(--wnp-desktop-icon-btn, 36px) * 0.36) !important;
}

.wnp-header-desktop .wap-nw-trigger svg {
  width: var(--wnp-desktop-icon-svg, 20px) !important;
  height: var(--wnp-desktop-icon-svg, 20px) !important;
}

/* ─── Currency Switcher slot ─────────────────────────────────────────────── */
/* Styles the wrapper and resets common switcher widget styles for nav context */

.wnp-currency-slot {
  display: inline-flex;
  align-items: center;
}

/* WC Currency Switch (WCCS) overrides */
.wnp-header-desktop .wnp-currency-slot .wccs-switcher,
.wnp-header-desktop .wnp-currency-slot form,
.wnp-header-desktop .wnp-currency-slot select {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer;
}

/* Pill-style wrapper to match WPML/WAP pill buttons */
.wnp-header-desktop .wnp-currency-slot > * {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--wnp-shape-full);
  border: 1.5px solid var(--wnp-outline);
  font-size: 13px;
  font-weight: 600;
  color: var(--wnp-on-surface);
  cursor: pointer;
  transition: background var(--wnp-dur-md) var(--wnp-ease), border-color var(--wnp-dur-md) var(--wnp-ease);
  white-space: nowrap;
}
.wnp-header-desktop .wnp-currency-slot > *:hover {
  background: var(--wnp-primary-hover);
  border-color: var(--wnp-primary);
}

/* ─── Compact sticky header ─────────────────────────────────────────────── */
/* Applied when user scrolls + general_sticky_compact is on */

.wnp-header-desktop.wnp-is-compact {
  height: var(--wnp-height-desktop-sticky, 56px);
  box-shadow: 0 1px 12px rgba(0,0,0,.10);
}

/* Logo shrinks smoothly */
.wnp-header-desktop .wnp-logo {
  transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1);
}

.wnp-header-desktop .wnp-logo img {
  max-height: var(--wnp-logo-height-desktop, 40px);
  width: auto;
  object-fit: contain;
  transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1);
}

.wnp-header-desktop.wnp-is-compact .wnp-logo img {
  max-height: var(--wnp-logo-height-sticky, 32px);
}

/* Nav links scale slightly in compact mode */
.wnp-header-desktop .wnp-nav-link {
  transition: font-size 0.2s ease;
}

/* ════════════════════════════════════════════════════════════════════
   RTL — Desktop Header
   Applies when dir="rtl" on the header OR body.wnp-rtl is set.
   Uses attribute selector so it works even without body class.
════════════════════════════════════════════════════════════════════ */

[dir="rtl"].wnp-header-desktop,
.wnp-rtl .wnp-header-desktop {
  /* Flex row reverses automatically in RTL — no override needed */
}

/* Logo margin flips */
[dir="rtl"] .wnp-header-desktop .wnp-logo,
.wnp-rtl    .wnp-header-desktop .wnp-logo {
  margin-right: 0;
  margin-left: var(--space, 0);
}

/* Nav link chevrons: flip for RTL */
[dir="rtl"] .wnp-header-desktop .wnp-nav-link__chevron,
.wnp-rtl    .wnp-header-desktop .wnp-nav-link__chevron {
  transform: scaleX(-1);
}

/* Dropdown: open to the left in RTL instead of right */
[dir="rtl"] .wnp-dropdown,
.wnp-rtl    .wnp-dropdown {
  right: auto;
  left: 0;
}

/* CTA arrow flip */
[dir="rtl"] .wnp-cta-btn svg,
.wnp-rtl    .wnp-cta-btn svg {
  transform: scaleX(-1);
}

/* Mini-cart dropdown: align to left in RTL */
[dir="rtl"] .wnp-mini-cart--desktop,
.wnp-rtl    .wnp-mini-cart--desktop {
  right: auto;
  left: 0;
  transform-origin: top left;
}

/* Mini-cart arrow pointer: flip to top-left */
[dir="rtl"] .wnp-mini-cart--desktop::before,
.wnp-rtl    .wnp-mini-cart--desktop::before {
  right: auto;
  left: 14px;
  border-radius: 0 0 0 2px;
  transform: rotate(45deg);
}

/* Off-canvas cart: slide from left in RTL */
[dir="rtl"] .wnp-cart-offcanvas .wnp-cart-sheet,
.wnp-rtl    .wnp-cart-offcanvas .wnp-cart-sheet {
  right: auto;
  left: 0;
  transform: translateX(-100%) !important;
  box-shadow: 8px 0 40px rgba(0,0,0,.15);
}

[dir="rtl"] .wnp-cart-offcanvas .wnp-cart-sheet.wnp-cs-open,
.wnp-rtl    .wnp-cart-offcanvas .wnp-cart-sheet.wnp-cs-open {
  transform: translateX(0) !important;
}

/* ─── Search Modal ────────────────────────────────────────────────────────── */
.wnp-search-modal {
  position: fixed;
  inset: 0;
  z-index: calc(var(--wnp-z-index) + 50);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
}

.wnp-search-modal[hidden] { display: none; }

.wnp-search-modal--open {
  display: flex;
}

.wnp-search-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  cursor: pointer;
  animation: wnp-fade-in var(--wnp-dur-md) var(--wnp-ease);
}

.wnp-search-modal__box {
  position: relative;
  z-index: 1;
  background: var(--wnp-surface);
  border-radius: var(--wnp-shape-large);
  box-shadow: var(--wnp-elev-3);
  width: min(680px, 92vw);
  padding: 28px 28px 24px;
  animation: wnp-slide-down var(--wnp-dur-md) var(--wnp-ease);
}

.wnp-search-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wnp-on-surface-variant);
  border-radius: var(--wnp-shape-full);
  transition: background var(--wnp-dur-md) var(--wnp-ease);
}

.wnp-search-modal__close:hover { background: var(--wnp-primary-active); }

.wnp-search-modal__inner { margin-top: 4px; }

/* ── Live search input row ── */
.wnp-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.wnp-search-icon-lead {
  position: absolute;
  left: 16px;
  color: var(--wnp-on-surface-variant);
  pointer-events: none;
  flex-shrink: 0;
}

.wnp-search-input {
  width: 100%;
  height: 56px;
  padding: 0 52px;
  font-size: 17px;
  border: 1.5px solid var(--wnp-outline);
  border-radius: var(--wnp-shape-full);
  background: var(--wnp-surface);
  color: var(--wnp-on-surface);
  outline: none;
  transition: border-color var(--wnp-dur-md) var(--wnp-ease);
}

.wnp-search-input:focus { border-color: var(--wnp-primary); }

/* Spinner */
.wnp-search-spinner {
  position: absolute;
  right: 18px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--wnp-outline);
  border-top-color: var(--wnp-primary);
  border-radius: 50%;
  animation: wnp-spin 0.6s linear infinite;
}

@keyframes wnp-spin { to { transform: rotate(360deg); } }

/* ── Results list ── */
.wnp-search-results {
  margin-top: 8px;
  max-height: 360px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--wnp-outline) transparent;
  border: 1px solid var(--wnp-outline);
  border-radius: var(--wnp-shape-medium);
}

.wnp-search-result {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  text-decoration: none;
  color: var(--wnp-on-surface);
  border-bottom: 1px solid var(--wnp-outline);
  transition: background var(--wnp-dur-md) var(--wnp-ease);
}

.wnp-search-result:last-child { border-bottom: none; }

.wnp-search-result:hover,
.wnp-search-result--active {
  background: var(--wnp-primary-active);
}

.wnp-search-result__title {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
}

.wnp-search-result__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.wnp-search-result__excerpt {
  font-size: 12px;
  color: var(--wnp-on-surface-variant);
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.wnp-search-result__title mark,
.wnp-search-result__excerpt mark {
  background: transparent;
  color: var(--wnp-primary);
  font-weight: 700;
}

.wnp-search-result__type {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wnp-on-surface-variant);
  background: var(--wnp-primary-container);
  padding: 3px 8px;
  border-radius: var(--wnp-shape-full);
  white-space: nowrap;
  flex-shrink: 0;
}

.wnp-search-no-results {
  padding: 16px;
  text-align: center;
  color: var(--wnp-on-surface-variant);
  font-size: 14px;
  margin: 0;
}

@keyframes wnp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes wnp-slide-down {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── ACSS 3 & 4 isolation ─────────────────────────────────────────────────
 *
 * ACSS applies styles via two broad selectors that can bleed into WP Nav Pro:
 *
 *   1. [class*="btn--"]           — matches any class containing "btn--"
 *   2. button:not(nav button, …)  — ACSS4 reset touches all <button> elements
 *   3. contextual bg--* rules     — can override <a> color inside bg containers
 *
 * We scope all resets under .wp-nav-pro-header so specificity beats ACSS
 * attribute/class selectors without using !important.
 * ─────────────────────────────────────────────────────────────────────────── */

/* All icon buttons: undo ACSS btn typography reset & btn-props */
.wp-nav-pro-header .wnp-icon-btn,
.wp-nav-pro-header .wnp-search-btn,
.wp-nav-pro-header .wnp-menu-toggle {
  min-inline-size: unset;
  inline-size: var(--wnp-desktop-icon-btn, 36px);
  padding-block: 0;
  padding-inline: 0;
  background: transparent;
  color: inherit;
  border-width: 0;
  border-style: none;
  border-radius: 50%;
  font-size: inherit;
  font-weight: inherit;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
}

/* CTA button: ensure our values win regardless of ACSS btn-props cascade */
.wp-nav-pro-header .wnp-cta-btn {
  min-inline-size: unset;
  inline-size: auto;
  border-radius: var(--wnp-btn-radius, var(--wnp-shape-full));
}

/* Social icon links: prevent ACSS bg--* contextual link-color rules
   from overriding the icon colour */
.wp-nav-pro-header .wnp-social-btn,
.wp-nav-pro-header .wnp-social-btn:hover {
  color: var(--wnp-social-icon-color, #fff);
}

/* Dropdown close / search close buttons */
.wnp-search-modal .wnp-search-modal__close,
.wp-nav-pro-header .wnp-cart-sheet__close {
  min-inline-size: unset;
  inline-size: 36px;
  padding-block: 0;
  padding-inline: 0;
  background: transparent;
  border-width: 0;
  border-style: none;
  text-transform: none;
}