/* ==========================================================================
   Mobile Drawer (off-canvas)
   ========================================================================== */

/* Overlay */
.mobile-drawer__overlay {
  position: fixed;
  inset: 0;
  z-index: 199;
  background-color: rgb(0 0 0 / 50%);

  /* Hidden by default — Alpine x-show controls visibility */
  display: none;
}

.mobile-drawer__overlay:not([style*="display: none"]) {
  display: block;
}

/* Drawer panel */
.mobile-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 200;
  width: min(320px, 100vw);
  background-color: var(--color-bg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

/* Open state (set by JS/Alpine when drawer is visible) */
.mobile-drawer:not([style*="display: none"]) {
  transform: translateX(0);
}

/* When Alpine hides it (display: none), also ensure it's off-screen */
.mobile-drawer[style*="display: none"] {
  transform: translateX(100%);
}

/* Inner */
.mobile-drawer__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* Header */
.mobile-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

/* Back button — shown by JS when inside a sub-menu */
.mobile-drawer__nav-back {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  margin-inline-start: calc(-1 * var(--space-2));
  transition: color 0.15s;
}

.mobile-drawer__nav-back:hover {
  color: var(--color-primary);
}

/* Header action group: search + lang + close */
.mobile-drawer__header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Shared style: circle/pill outline in primary red */
.mobile-drawer__header-search,
.mobile-drawer__lang-pill,
.mobile-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
  background: none;
  cursor: pointer;
  line-height: 1;
  transition: background-color 0.15s, color 0.15s;
}

.mobile-drawer__header-search:hover,
.mobile-drawer__close:hover {
  background-color: var(--color-primary);
  color: #fff;
}

/* Search — circle */
.mobile-drawer__header-search {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

/* Lang-switcher inside drawer header — styled as red pill to match design */
.mobile-drawer__header-actions .lang-switcher {
  position: relative;
}

.mobile-drawer__header-actions .lang-switcher__btn {
  width: auto;
  height: 36px;
  padding-inline: 12px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-primary);
  background: none;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.03em;
}

.mobile-drawer__header-actions .lang-switcher__btn:hover {
  background-color: var(--color-primary);
  color: #fff;
  opacity: 1;
}

/* Dropdown opens downward from pill, inside drawer (overflow-y removed from .mobile-drawer) */
.mobile-drawer__header-actions .lang-switcher__list {
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  z-index: 210;
}

/* Close button — circle */
.mobile-drawer__close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

/* Body */
.mobile-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Util links (account, cart) */
.mobile-drawer__util {
  display: flex;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.mobile-drawer__util-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  position: relative;
}

.mobile-drawer__util-link:hover {
  color: var(--color-primary);
  text-decoration: none;
}

/* Mobile nav */
.mobile-drawer__nav .mobile-nav__list {
  list-style: none;
  display: flex;
  flex-direction: column;
}

/* Sub-menus hidden in their natural nested position */
.mobile-drawer__nav .sub-menu {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Activated sub-menu — moved to nav root by JS */
.mobile-drawer__nav > .sub-menu.is-active {
  display: flex;
  flex-direction: column;
}

/* Hidden panel (main list or sub-menu) while a child panel is active */
.mobile-drawer__nav > .mobile-nav__list.is-hidden,
.mobile-drawer__nav > .sub-menu.is-hidden {
  display: none;
}

/* Shared link styles: main list + active sub-menu */
.mobile-drawer__nav .mobile-nav__list a,
.mobile-drawer__nav .sub-menu.is-active a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}

/* Parent category link injected at top of sub-menu — same row style, bold */
.mobile-drawer__nav .mobile-nav__parent-link > a {
  font-weight: 700;
  border-bottom: 2px solid var(--color-border);
}

/* Chevron — only on items that have children */
.mobile-drawer__nav .menu-item-has-children > a::after {
  content: '';
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.5;
}

.mobile-drawer__nav .mobile-nav__list a:hover,
.mobile-drawer__nav .sub-menu.is-active a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.mobile-drawer__nav .menu-item-has-children > a:hover::after {
  opacity: 1;
}

/* Language section (body — kept for backward compat if lang-switcher is used) */
.mobile-drawer__langs .lang-switcher {
  width: 100%;
}

.mobile-drawer__langs .lang-switcher__btn {
  width: 100%;
  justify-content: flex-start;
  gap: var(--space-3);
  border-radius: var(--radius-md);
  padding: 0 var(--space-4);
}

.mobile-drawer__langs .lang-switcher__list {
  position: static;
  box-shadow: none;
  border: none;
  padding: 0;
}

/* B2B CTA section — pinned to drawer bottom */
.mobile-drawer__b2b {
  flex-shrink: 0;
  padding: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.mobile-drawer__b2b-text {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.5;
  margin-block-end: var(--space-4);
}

.mobile-drawer__b2b-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.mobile-drawer__b2b-primary,
.mobile-drawer__b2b-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding-inline: var(--space-5);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s;
}

.mobile-drawer__b2b-primary {
  background-color: var(--color-primary);
  color: #fff;
  border: 2px solid var(--color-primary);
}

.mobile-drawer__b2b-secondary {
  background-color: transparent;
  color: var(--color-text);
  border: 2px solid var(--color-border);
}

.mobile-drawer__b2b-primary:hover,
.mobile-drawer__b2b-secondary:hover {
  opacity: 0.8;
  text-decoration: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mobile-drawer {
    transition: none;
  }
}

@media (width < 1024px) {
  .mobile-drawer__inner .lang-switcher {
    display: block;
  }
  .mobile-drawer__header{
    justify-content: flex-end;
  }
  .mobile-drawer__nav-back{
    position: absolute;
    left: 20px;
    padding-left: 15px;
    font-size: 16px;
    color: #aaa;
  }
  .mobile-drawer__nav-back svg{
    position: absolute;
    left: 0;
    top: calc(50% - 7px);
    width: 6px;
  }
  .mobile-drawer__header{
    border:unset;
  }
  .mobile-drawer__header-search,
  .mobile-drawer__lang-pill,
  .mobile-drawer__close{
    border:unset;
  }
  .mobile-drawer__header-actions .lang-switcher__btn{
    width:35px;
    height:35px;
    background:#F4F4F4;
    border:1px solid #dadada;
  }
  .mobile-drawer__header-actions{
    gap:27px;
  }
  .mobile-drawer__header{
    padding:20px;
  }
  .mobile-drawer__nav .mobile-nav__list a, .mobile-drawer__nav .sub-menu.is-active a{
    border:unset;
  }
  .mobile-drawer__nav .mobile-nav__list a, .mobile-drawer__nav .sub-menu.is-active a{
    color:#000;
  }
  .mobile-drawer__nav .menu-item-has-children > a::after{
    border-right: 1px solid currentColor;
    border-top: 1px solid currentColor;
    opacity:1;
  }
  .mobile-drawer__b2b{
    border-top:unset;
    padding-bottom: 64px;
  }
  .mobile-drawer__b2b-text{
    font-size: 16px;
    color: #000;
    line-height: normal;
    margin-block-end: 30px;
  }
  .mobile-drawer__b2b-secondary{
    width: calc(50% - 5px);
    border:1px solid #DADADA;
    background:#f4f4f4;
  }
  .mobile-drawer__b2b-primary{
    width: calc(50% - 5px);

  }
}