/**
 * YK Ecommerce Mega Menu — component styles
 * @version 8.0.0 — Fixed .yk-em-lang-switcher display logic: visible on desktop, hidden on mobile.
 *
 * Scoped under .yk-ecommerce-mega-menu.
 * Relies on yk-slideout.css for panel/overlay structural rules.
 *
 * Color tokens:
 *   --yk-em-dark-bg:     #212121  (mobile header + mobile panel)
 *   --yk-em-dark-fg:     #ffffff  (text on dark backgrounds)
 *   --yk-em-dark-muted:  #999999  (muted text on dark)
 *   --yk-em-dark-border: #404040  (borders on dark)
 *   --yk-em-border:      #e5e5e5  (borders on light/white)
 *   --yk-em-muted:       rgba(0,0,0,0.45)  (muted text on white)
 *
 * v6 changes:
 *   - Added @media (max-width: 1023.98px) { __header-wrap: display:none }
 *     so the desktop bar hides on mobile.
 *   - Restored MOBILE HEADER section (__mobile-header + children) that was
 *     accidentally removed in a prior session.
 *   - Fixed __mobile-header visibility pattern:
 *     display:none globally → display:flex inside @media (max-width:1023.98px).
 *   - Fixed __hamburger: changed from display:none to display:flex;cursor:pointer
 *     (visibility is controlled by __mobile-header, not the button itself).
 *   - Removed the @media(max-width:1023.98px) "transform __header-wrap" block
 *     that was added in a prior session (wrong approach — it tried to restyle
 *     the desktop header for mobile instead of hiding it).
 */

.yk-ecommerce-mega-menu {
  --yk-em-dark-bg: #212121;
  --yk-em-dark-fg: #ffffff;
  --yk-em-dark-muted: #999999;
  --yk-em-dark-border: #404040;
  --yk-em-border: #e5e5e5;
  --yk-em-muted: rgba(0, 0, 0, 0.45);
  --yk-em-letter-spacing-wide: 0.15em;
  --yk-em-letter-spacing-wider: 0.25em;

  position: relative;
}

/* ============================================================
   DESKTOP HEADER BAR
   ============================================================ */

.yk-ecommerce-mega-menu__header-wrap {
  /* Flex layout is CSS-owned — not relying on WP's generated layout classes
	   because those don't survive editor save/re-serialisation reliably. */
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  /* gap: 0rem !important; */
  background-color: var(--wp--preset--color--base);
  border-bottom: 1px solid var(--yk-em-border);
  padding-block: 1.25rem !important; /* overrides WP block inline style attribute */
  padding-inline: 1.5rem !important; /* overrides WP block inline style attribute */
  position: relative;
}

/* Desktop header hidden on mobile — mobile header takes over */
@media (max-width: 1023.98px) {
  .yk-ecommerce-mega-menu__header-wrap {
    display: none !important;
  }
}

/* Flex children — CSS-pinned so editor saves don't affect layout */
.yk-ecommerce-mega-menu__header-wrap .yk-ecommerce-mega-menu__logo {
  flex: 0 0 auto;
}

.yk-ecommerce-mega-menu__header-wrap .yk-ecommerce-mega-menu__nav {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  width: max-content !important;
}

.yk-ecommerce-mega-menu__header-wrap .yk-ecommerce-mega-menu__icons {
  flex: 0 0 auto !important;
  display: flex;
  flex-direction: row !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Site logo sizing inside desktop header */
.yk-ecommerce-mega-menu__logo .wp-block-site-logo img,
.yk-ecommerce-mega-menu .yk-ecommerce-mega-menu__logo img {
  height: 80px;
  width: auto;
}

/* WP Navigation block — desktop styling */

.yk-ecommerce-mega-menu .yk-ecommerce-mega-menu__nav.wp-block-navigation {
  gap: 2.5rem;
  color: var(--wp--preset--color--contrast);
}

/* All nav item links and submenu toggles */
.yk-ecommerce-mega-menu
  .yk-ecommerce-mega-menu__nav
  .wp-block-navigation-item__content {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: var(--yk-em-letter-spacing-wide);
  color: var(--wp--preset--color--contrast);
  text-transform: uppercase;
  padding: 0;
  text-decoration: none;
  transition: color 0.15s ease;
}

.yk-ecommerce-mega-menu
  .yk-ecommerce-mega-menu__nav
  .wp-block-navigation-item__content:hover {
  color: var(--yk-em-muted);
}

/* PRODUKTE submenu toggle — reset WP button defaults */
.yk-ecommerce-mega-menu
  .yk-ecommerce-mega-menu__nav-trigger
  .wp-block-navigation-submenu__toggle {
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
}

/* Hide WP native dropdown chevron — we use our own mega panel */
.yk-ecommerce-mega-menu
  .yk-ecommerce-mega-menu__nav-trigger
  .wp-block-navigation__submenu-icon {
  display: none;
}

/* Suppress WP native submenu dropdown — replaced by our mega panel */
.yk-ecommerce-mega-menu
  .yk-ecommerce-mega-menu__nav-trigger
  .wp-block-navigation__submenu-container {
  display: none !important; /* overrides WP block styles that show this on hover/focus */
}

/* Desktop icon area */
.yk-ecommerce-mega-menu__icons {
  gap: 0.5rem !important; /* overrides WP buttons block default gap */
}

.yk-ecommerce-mega-menu__icons .wp-block-button__link {
  padding-block: 0.375rem;
  padding-inline: 0.75rem;
  font-size: 0.8125rem;
}

/* ============================================================
   DESKTOP MEGA PANEL
   ============================================================ */

/* Hidden by default — no flash on page load. */
.yk-ecommerce-mega-menu__mega-panel {
  position: absolute;
  margin-top: 0 !important; /* neutralises WP flow-layout block gap injected between sibling groups */
  padding: 2.5rem 1.5rem !important; /* breathing room around category columns */
  left: 0;
  right: 0;
  z-index: 100;
  border-bottom: 1px solid var(--yk-em-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

/* Visible in the Site Editor so editors can see the panel layout. */
.editor-styles-wrapper .yk-ecommerce-mega-menu__mega-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Open state (JS adds .is-open on hover/focus). */
.yk-ecommerce-mega-menu__mega-panel.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* The WP columns block handles the grid — we just set column gap */
.yk-ecommerce-mega-menu__mega-grid.wp-block-columns {
  gap: 2rem !important; /* overrides WP block inline gap */
}

.yk-ecommerce-mega-menu__mega-heading {
  font-size: 1.05rem !important; /* overrides WP heading preset sizes */
  font-weight: 600;
  letter-spacing: 0.025em;
  color: var(--wp--preset--color--contrast);
  text-transform: uppercase;
  hyphens: auto;
  word-break: break-word;
  margin: 0 0 0.75rem !important;
}

.yk-ecommerce-mega-menu__mega-heading--spaced {
  margin-top: 1.5rem !important;
}

.yk-ecommerce-mega-menu__mega-list.wp-block-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.yk-ecommerce-mega-menu__mega-list.wp-block-list li {
  margin: 0;
  padding: 0;
}

.yk-ecommerce-mega-menu__mega-list.wp-block-list a {
  font-size: 0.875rem;
  color: var(--yk-em-muted);
  text-decoration: none;
  transition: color 0.15s ease;
  display: block;
  padding-block: 0.25rem;
}

.yk-ecommerce-mega-menu__mega-list.wp-block-list a:hover {
  color: var(--wp--preset--color--contrast);
}

.yk-ecommerce-mega-menu .yk-ecommerce-mega-menu__nav.wp-block-navigation,
.yk-ecommerce-mega-menu .yk-ecommerce-mega-menu__search-toggle,
.yk-ecommerce-mega-menu .wp-block-woocommerce-customer-account,
.yk-ecommerce-mega-menu .wp-block-woocommerce-mini-cart {
  margin: auto;
}

.yk-ecommerce-mega-menu .yk-ecommerce-mega-menu__search-toggle svg {
  width: 22px;
  height: 22px;
}

/* ============================================================
   DESKTOP SEARCH TOGGLE
   ------------------------------------------------------------
   Collapses the AWS search to an icon. On click, the AWS form
   slides out to the LEFT of the toggle button. The wrapper
   participates in the parent's flex layout, so expansion pushes
   adjacent flex children (nav, account, cart) sideways. This
   push-aside is intentional — the user prefers it over absolute
   or auto-shrink alternatives. Desktop only — below 1024px the
   wrapper is hidden and mobile slideout is the entry point.
   ============================================================ */

.yk-ecommerce-mega-menu__search-toggle {
  --yk-search-toggle-width: 280px;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}

/* AWS form is collapsed by default — sits to the LEFT of the button. */
.yk-ecommerce-mega-menu__search-toggle .aws-container {
  order: 0;
  width: 0;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  margin: 0 !important; /* override centered .aws-container margin from rule above */
  transition:
    width 240ms ease,
    max-width 240ms ease,
    opacity 180ms ease;
}

/* Open state — form expands leftward to a fixed width. */
.yk-ecommerce-mega-menu__search-toggle[data-open="true"] .aws-container {
  width: var(--yk-search-toggle-width);
  max-width: var(--yk-search-toggle-width);
  opacity: 1;
  pointer-events: auto;
}

/* AWS form fills the wrapper without altering the plugin's internal layout. */
.yk-ecommerce-mega-menu__search-toggle .aws-container .aws-search-form {
  width: 100%;
}

/* Hide AWS's native submit button — our toggle button handles submission.
   Scoped under .yk-ecommerce-mega-menu__search-toggle so AWS's button stays
   visible anywhere else AWS is used on the site (sidebar widgets, footer,
   etc.). The !important is required because AWS's plugin CSS sets display
   on .aws-search-btn at high specificity; do not strip it. */
.yk-ecommerce-mega-menu__search-toggle .aws-search-btn {
  display: none !important;
}

/* Toggle button sits to the RIGHT of the form. */
.yk-ecommerce-mega-menu__search-toggle-btn {
  order: 1;
  background: none;
  border: none;
  padding: 0.5rem;
  margin: 0;
  color: var(--wp--preset--color--contrast);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.15s ease;
}

.yk-ecommerce-mega-menu__search-toggle-btn:hover,
.yk-ecommerce-mega-menu__search-toggle-btn:focus-visible {
  color: var(--yk-em-muted);
}

/* Hide the wrapper below the desktop breakpoint — mobile uses its own slideout. */
@media (max-width: 1023px) {
  .yk-ecommerce-mega-menu__search-toggle {
    display: none;
  }
}

@media (min-width: 1024px) and (max-width: 1366px) {
  .yk-ecommerce-mega-menu__search-toggle {
    --yk-search-toggle-width: 140px;
  }
}

/* Disable the slide animation for users who request reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .yk-ecommerce-mega-menu__search-toggle .aws-container {
    transition: none;
  }
}

/* ============================================================
   MOBILE HEADER
   Hidden globally; shown as a dark bar on mobile.
   ============================================================ */

.yk-ecommerce-mega-menu__mobile-header {
  display: none;
}

@media (max-width: 1023.98px) {
  .yk-ecommerce-mega-menu__mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1a1a1a;
    padding: 0 16px;
    height: 60px;
    position: relative;
    z-index: 60;
  }
}

.yk-ecommerce-mega-menu__mobile-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.yk-ecommerce-mega-menu__mobile-logo {
  height: 48px;
  width: auto;
  filter: invert(1); /* invert to white on dark background */
}

.yk-ecommerce-mega-menu__mobile-logo-text {
  color: var(--yk-em-dark-fg);
  font-weight: 700;
  font-size: 1.125rem;
}

.yk-ecommerce-mega-menu__mobile-icons {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  color: var(--yk-em-dark-fg);
}

.yk-ecommerce-mega-menu__mobile-icon-btn {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.yk-ecommerce-mega-menu__mobile-cart-slot {
  display: flex;
  align-items: center;
}

/* WC mini-cart inside mobile header — strip button defaults */
.yk-ecommerce-mega-menu__mobile-header .wc-block-mini-cart__button {
  background: none;
  border: none;
  padding: 0;
  color: var(--yk-em-dark-fg);
  cursor: pointer;
  display: flex;
  align-items: center;
}

.yk-ecommerce-mega-menu__mobile-header .wc-block-mini-cart__icon {
  width: 20px;
  height: 20px;
}

/* WC badge — override WC inline styles for dark bar */
.yk-ecommerce-mega-menu__mobile-header .wc-block-mini-cart__badge {
  background-color: var(--yk-em-dark-fg) !important;
  color: var(--yk-em-dark-bg) !important;
}

/* Hamburger button — always flex; visibility is inherited from __mobile-header */
.yk-ecommerce-mega-menu__hamburger {
  display: flex;
  cursor: pointer;
}

.yk-ecommerce-mega-menu__mobile-search-body .aws-search-field,
.yk-ecommerce-mega-menu__mobile-search .aws-search-field {
  background-color: white;
  color: var(--yk-em-dark-fg);
  border: unset;
  border-radius: 2px;
}

/* ============================================================
   MOBILE SLIDEOUT PANEL
   ============================================================ */

/* Visual styling for the slideout panel */
.yk-ecommerce-mega-menu__mobile-panel {
  background-color: var(--yk-em-dark-bg);
  color: var(--yk-em-dark-fg);
  /* Override default slideout width for full right-side panel */
  width: min(380px, 85vw);
}

.yk-ecommerce-mega-menu__mobile-inner {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Close button */
.yk-ecommerce-mega-menu__mobile-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  z-index: 1;
  color: var(--yk-em-dark-fg);
  opacity: 0.8;
  transition: opacity 0.15s ease;
}

.yk-ecommerce-mega-menu__mobile-close:hover {
  opacity: 1;
}

/* ============================================================
   MOBILE DRILL-DOWN VIEWS
   ============================================================ */

.yk-ecommerce-mega-menu__view {
  padding: 2rem 1.5rem 1.5rem;
  min-height: 100%;
}

.yk-ecommerce-mega-menu__view[data-visible="false"] {
  display: none;
}

.yk-ecommerce-mega-menu__view[data-visible="true"] {
  display: block;
}

/* Back button */
.yk-ecommerce-mega-menu__mobile-back {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 1.5rem;
  color: var(--yk-em-dark-muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--yk-em-letter-spacing-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s ease;
}

.yk-ecommerce-mega-menu__mobile-back:hover {
  color: var(--yk-em-dark-fg);
}

/* Section label ("Categories") */
.yk-ecommerce-mega-menu__mobile-section-label {
  margin: 0 0 1.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--yk-em-letter-spacing-wider);
  color: var(--yk-em-dark-muted);
  text-transform: uppercase;
}

/* Nav rows (shared by main view and products view) */
.yk-ecommerce-mega-menu__mobile-nav {
  display: flex;
  flex-direction: column;
}

.yk-ecommerce-mega-menu__mobile-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-block: 1rem;
  border-bottom: 1px solid var(--yk-em-dark-border);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--yk-em-dark-fg);
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s ease;
  text-align: left;
}

.yk-ecommerce-mega-menu__mobile-nav-row:hover {
  color: var(--yk-em-dark-muted);
}

.yk-ecommerce-mega-menu__mobile-count {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  color: var(--yk-em-dark-muted);
}

/* Language switchers */
.yk-ecommerce-mega-menu__mobile-langs {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.5rem;
}

.yk-ecommerce-mega-menu__mobile-lang-btn {
  padding: 0.375rem 0.75rem;
  background: none;
  border: 1px solid var(--yk-em-dark-border);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--yk-em-letter-spacing-wide);
  color: var(--yk-em-dark-muted);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}

.yk-ecommerce-mega-menu__mobile-lang-btn:hover,
.yk-ecommerce-mega-menu__mobile-lang-btn--active {
  color: var(--yk-em-dark-fg);
  border-color: var(--yk-em-dark-fg);
}

/* Category view */
.yk-ecommerce-mega-menu__cat-title {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--yk-em-dark-fg);
  text-transform: uppercase;
  margin: 0 0 1.5rem;
}

.yk-ecommerce-mega-menu__cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.yk-ecommerce-mega-menu__cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--yk-em-dark-border);
  font-size: 0.875rem;
  color: var(--yk-em-dark-muted);
  text-decoration: none;
  transition:
    color 0.15s ease,
    padding-left 0.15s ease;
}

.yk-ecommerce-mega-menu__cat-item:hover {
  color: var(--yk-em-dark-fg);
  padding-left: 0.25rem;
}

/* ============================================================
   RESPONSIVE: DESKTOP (>= 1024px)
   ============================================================ */

@media (min-width: 1024px) {
  /* The slideout overlay and panel are hidden by the slideout foundation
	   but we also remove them from layout on desktop */
  .yk-ecommerce-mega-menu__mobile-panel,
  .yk-slideout-overlay[data-slideout-overlay="yk-ecommerce-mega-menu-mobile"] {
    display: none !important;
  }
}

/* ============================================================
   MOBILE SLIDEOUT — AWS search form (dark-theme overrides)
   ============================================================ */

.yk-ecommerce-mega-menu__mobile-search-body .aws-search-field,
.yk-ecommerce-mega-menu__mobile-search .aws-search-field {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--yk-em-dark-fg);
  border: 1px solid var(--yk-em-dark-border);
  border-radius: 2px;
}

@media (max-width: 1023.98px) {
  .yk-ecommerce-mega-menu__mobile-logo {
    height: 48px !important;
  }

  .yk-ecommerce-mega-menu__mobile-search-body .aws-search-field,
  .yk-ecommerce-mega-menu__mobile-search .aws-search-field {
    background-color: white;
    border: unset;
  }

  .aws-container .aws-search-form .aws-form-btn {
    background-color: var(--yk-em-dark-bg);
    border: none;
  }

  .aws-container .aws-search-form .aws-form-btn:hover {
    background-color: var(--yk-em-dark-bg);
  }

  .yk-slideout__close {
    color: white;
    margin: 0.5rem;
  }
}

.yk-ecommerce-mega-menu__mobile-search-body .aws-search-field::placeholder,
.yk-ecommerce-mega-menu__mobile-search .aws-search-field::placeholder {
  color: var(--yk-em-dark-muted);
}

.yk-ecommerce-mega-menu__mobile-search-body .aws-search-label,
.yk-ecommerce-mega-menu__mobile-search .aws-search-label {
  color: var(--yk-em-dark-muted);
}

.yk-ecommerce-mega-menu__mobile-search-body
  .aws-search-form
  .aws-search-btn
  svg,
.yk-ecommerce-mega-menu__mobile-search .aws-search-form .aws-search-btn svg {
  fill: var(--yk-em-dark-fg);
}

.yk-ecommerce-mega-menu__mobile-search-body .aws-search-clear span,
.yk-ecommerce-mega-menu__mobile-search .aws-search-clear span {
  color: var(--yk-em-dark-muted);
}

/* ─── LANGUAGE SWITCHER ─────────────────────────────────────────────────────
   Desktop-only WPML language toggle + dropdown.
   Hidden on mobile via the media query at the bottom of this section.
   ─────────────────────────────────────────────────────────────────────────── */

/* Default: visible on desktop */
.yk-em-lang-switcher {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.yk-em-lang-switcher__toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  height: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: var(--yk-em-letter-spacing-wide);
  color: var(--wp--preset--color--contrast);
  text-transform: uppercase;
  transition: color 0.15s ease;
}

.yk-em-lang-switcher__toggle:hover {
  color: var(--yk-em-muted);
}

.yk-em-lang-switcher__arrow {
  font-size: 12px;
  line-height: 1;
  transition: transform 0.2s ease;
  display: inline-block;
}

.yk-em-lang-switcher.is-open .yk-em-lang-switcher__arrow {
  transform: rotate(180deg);
}

.yk-em-lang-switcher__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  min-width: 200px;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  z-index: 999;
  /* Prevent line breaks on short lang names */
  white-space: nowrap;
}

.yk-em-lang-switcher.is-open .yk-em-lang-switcher__dropdown {
  display: block;
}

.yk-em-lang-switcher__item a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  transition: background 0.1s ease;
}

.yk-em-lang-switcher__item a:hover {
  background: #f5f5f5;
}

.yk-em-lang-switcher__item.is-active a {
  background: #f5f5f5;
}

.yk-em-lang-switcher__item.is-active .yk-em-lang-switcher__name {
  font-weight: 600;
}

.yk-em-lang-switcher__code {
  color: #999999;
  font-size: 0.85em;
}

.yk-em-lang-switcher__item.is-active .yk-em-lang-switcher__code {
  color: inherit;
}

/* Hidden on mobile (mobile uses slideout panel instead) */
@media (max-width: 1023.98px) {
  .yk-em-lang-switcher {
    display: none;
  }
}