/* ZonaCNC Mobile Nav — drawer dual + topbar
   Solo activo bajo 992px. Sobre desktop: oculto, no afecta nav existente.
   Prefix `zcmn-` para evitar colisiones con Hummingbird/BEM. */

.zcmn-root {
  /* Tema oscuro completo (topbar + drawers) */
  --zcmn-bg: #0e1116;
  --zcmn-surface: #161b22;
  --zcmn-surface-2: #1f2630;
  --zcmn-border: #2a313c;
  --zcmn-text: #e6edf3;
  --zcmn-muted: #8b949e;
  --zcmn-accent: #ff7a00;
  --zcmn-accent-ink: #fff;
  /* Alias topbar = surface oscuro */
  --zcmn-topbar-bg: var(--zcmn-surface);
  --zcmn-topbar-ink: var(--zcmn-text);
  --zcmn-topbar-border: var(--zcmn-border);
  --zcmn-row-h: 52px;
  --zcmn-drawer-w: min(320px, 86vw);
  --zcmn-topbar-h: 60px;
  --zcmn-z-overlay: 9090;
  --zcmn-z-drawer: 9100;
  --zcmn-z-topbar: 9080;
}

/* Solo se muestra en mobile/tablet */
@media (min-width: 992px) {
  .zcmn-root { display: none !important; }
}

/* TOPBAR FIJO (light theme — branding) */
.zcmn-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--zcmn-topbar-h);
  background: var(--zcmn-topbar-bg);
  color: var(--zcmn-topbar-ink);
  border-bottom: 1px solid var(--zcmn-topbar-border);
  z-index: var(--zcmn-z-topbar);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.zcmn-topbar-default,
.zcmn-search-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  height: 100%;
  width: 100%;
}
.zcmn-search-bar {
  position: absolute;
  inset: 0;
  background: var(--zcmn-topbar-bg);
  margin: 0;
}
.zcmn-search-bar[hidden] { display: none !important; }
.zcmn-topbar.zcmn-search-active .zcmn-topbar-default { display: none; }
.zcmn-search-input {
  flex: 1;
  height: 40px;
  padding: 0 12px;
  background: var(--zcmn-surface-2);
  border: 1px solid var(--zcmn-border);
  border-radius: 8px;
  color: var(--zcmn-text);
  font-size: 15px;
  min-width: 0;
}
.zcmn-search-input:focus {
  outline: 2px solid var(--zcmn-accent);
  outline-offset: 1px;
  border-color: var(--zcmn-accent);
}
.zcmn-search-input::-webkit-search-cancel-button { display: none; }
.zcmn-iconbtn {
  background: transparent;
  border: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--zcmn-topbar-ink);
  cursor: pointer;
  text-decoration: none;
  position: relative;
}
/* Iconos dentro del drawer (sobre fondo oscuro) heredan color claro */
.zcmn-drawer .zcmn-iconbtn,
.zcmn-drawer .zcmn-close { color: var(--zcmn-text); }
.zcmn-iconbtn:focus-visible {
  outline: 2px solid var(--zcmn-accent);
  outline-offset: 2px;
}
.zcmn-hamburger {
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 9px;
}
.zcmn-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.zcmn-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.zcmn-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.zcmn-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.zcmn-brand {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--zcmn-topbar-ink);
  text-decoration: none;
  height: 100%;
  padding: 0;
  min-width: 0;
  overflow: hidden;
}
.zcmn-brand-logo {
  display: block;
  height: 50px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}
.zcmn-account-btn .zcmn-dot {
  position: absolute;
  top: 8px; right: 8px;
  width: 9px; height: 9px;
  background: var(--zcmn-accent);
  border-radius: 50%;
  border: 2px solid var(--zcmn-topbar-bg);
}

/* Body push para no quedar bajo topbar fijo */
@media (max-width: 991.98px) {
  body.zcmn-active {
    padding-top: var(--zcmn-topbar-h);
  }
  /* Oculta UI mobile original de Hummingbird (sin tocar desktop) */
  body.zcmn-active #_mobile_ps_customersignin,
  body.zcmn-active #_mobile_ps_shoppingcart,
  body.zcmn-active .header-bottom .header-bottom__logo {
    /* Visible aún para JS legacy, no romper. Si se desea esconder:
       display: none !important; */
  }
}

/* OVERLAY */
.zcmn-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: var(--zcmn-z-overlay);
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.zcmn-overlay.zcmn-show {
  opacity: 1;
  pointer-events: auto;
}
.zcmn-overlay[hidden] { display: none !important; }

/* DRAWERS */
.zcmn-drawer {
  position: fixed;
  top: 0;
  width: var(--zcmn-drawer-w);
  height: 100dvh;
  height: 100vh;
  background: var(--zcmn-surface);
  color: var(--zcmn-text);
  z-index: var(--zcmn-z-drawer);
  display: flex;
  flex-direction: column;
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
  box-shadow: 0 0 30px rgba(0,0,0,.45);
}
.zcmn-drawer[hidden] {
  display: none !important;
  pointer-events: none;
}
.zcmn-drawer-left {
  left: 0;
  transform: translateX(-100%);
}
.zcmn-drawer-left.zcmn-open { transform: translateX(0); }
.zcmn-drawer-right {
  right: 0;
  transform: translateX(100%);
}
.zcmn-drawer-right.zcmn-open { transform: translateX(0); }

.zcmn-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--zcmn-border);
  font-size: 16px;
}
.zcmn-close {
  background: transparent;
  border: 0;
  color: var(--zcmn-text);
  font-size: 28px;
  line-height: 1;
  width: 36px; height: 36px;
  cursor: pointer;
}

/* SEARCH */
.zcmn-search {
  padding: 12px 16px;
  border-bottom: 1px solid var(--zcmn-border);
}
.zcmn-search input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  background: var(--zcmn-surface-2);
  border: 1px solid var(--zcmn-border);
  border-radius: 8px;
  color: var(--zcmn-text);
  font-size: 14px;
}
.zcmn-search input:focus {
  outline: 2px solid var(--zcmn-accent);
  outline-offset: 1px;
  border-color: var(--zcmn-accent);
}

/* CATS */
.zcmn-cats {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.zcmn-cats ul { list-style: none; margin: 0; padding: 0; }

.zcmn-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--zcmn-row-h);
  padding: 0 16px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--zcmn-border);
  color: var(--zcmn-text);
  text-align: left;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}
.zcmn-item:focus-visible {
  outline: 2px solid var(--zcmn-accent);
  outline-offset: -2px;
}
.zcmn-label { flex: 1; }
.zcmn-chev {
  width: 18px;
  height: 18px;
  margin-left: 4px;
  transition: transform .2s;
  color: var(--zcmn-muted);
}
.zcmn-item[aria-expanded="true"] .zcmn-chev {
  transform: rotate(90deg);
  color: var(--zcmn-accent);
}

.zcmn-lvl-2 {
  max-height: 0;
  overflow: hidden;
  background: var(--zcmn-surface-2);
  transition: max-height .3s ease;
}
.zcmn-lvl-2.zcmn-open { max-height: 1500px; }
.zcmn-lvl-2 .zcmn-item {
  padding-left: 32px;
  font-size: 14px;
  color: #c9d1d9;
}
.zcmn-item--all .zcmn-label {
  color: var(--zcmn-accent);
  font-weight: 600;
}

/* ACCOUNT PANE (right drawer) */
.zcmn-account-pane {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.zcmn-account-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}
.zcmn-account-card--lg {
  padding: 18px 16px;
  background: linear-gradient(180deg, var(--zcmn-surface-2), transparent);
  border-bottom: 1px solid var(--zcmn-border);
}
.zcmn-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--zcmn-accent), #ff5500);
  color: var(--zcmn-accent-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  flex: 0 0 auto;
}
.zcmn-account-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.zcmn-account-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--zcmn-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zcmn-account-meta {
  font-size: 12px;
  color: var(--zcmn-muted);
  margin-top: 2px;
}

.zcmn-account-menu {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.zcmn-account-item {
  display: flex;
  align-items: center;
  min-height: var(--zcmn-row-h);
  padding: 0 16px;
  gap: 14px;
  border-bottom: 1px solid var(--zcmn-border);
  text-decoration: none;
  color: var(--zcmn-text);
  font-size: 15px;
}
.zcmn-account-item:hover { background: var(--zcmn-surface-2); }
.zcmn-ai-icon {
  width: 28px;
  font-size: 18px;
  text-align: center;
}
.zcmn-ai-label { flex: 1; }
.zcmn-ai-badge {
  background: var(--zcmn-surface-2);
  color: var(--zcmn-muted);
  border: 1px solid var(--zcmn-border);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.zcmn-ai-badge--accent {
  background: var(--zcmn-accent);
  color: var(--zcmn-accent-ink);
  border-color: var(--zcmn-accent);
}

/* LOGIN (guest) */
.zcmn-login-hero {
  padding: 20px 16px 8px;
}
.zcmn-login-hero h3 {
  margin: 0 0 4px;
  font-size: 18px;
  color: var(--zcmn-text);
}
.zcmn-login-hero p {
  margin: 0;
  color: var(--zcmn-muted);
  font-size: 13px;
  line-height: 1.4;
}
.zcmn-login-form {
  padding: 12px 16px 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.zcmn-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.zcmn-field span {
  font-size: 12px;
  color: var(--zcmn-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.zcmn-field input {
  height: 42px;
  padding: 0 12px;
  background: var(--zcmn-surface-2);
  border: 1px solid var(--zcmn-border);
  border-radius: 8px;
  color: var(--zcmn-text);
  font-size: 14px;
}
.zcmn-field input:focus {
  outline: 2px solid var(--zcmn-accent);
  outline-offset: 1px;
  border-color: var(--zcmn-accent);
}
.zcmn-forgot {
  align-self: flex-end;
  font-size: 12px;
  color: var(--zcmn-muted);
  text-decoration: none;
}
.zcmn-forgot:hover { color: var(--zcmn-accent); }

/* CTAs */
.zcmn-drawer-foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 18px;
  background: var(--zcmn-surface);
  border-top: 1px solid var(--zcmn-border);
  /* Safe area iOS */
  padding-bottom: max(18px, env(safe-area-inset-bottom));
}
.zcmn-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  background: var(--zcmn-accent);
  color: var(--zcmn-accent-ink);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(255, 122, 0, .35);
  transition: transform .1s, box-shadow .15s;
}
.zcmn-cta-primary:hover { box-shadow: 0 4px 14px rgba(255, 122, 0, .5); }
.zcmn-cta-primary:active { transform: scale(.97); }
.zcmn-cta-block { width: 100%; margin-top: 4px; }
.zcmn-cta-secondary {
  text-align: center;
  color: var(--zcmn-muted);
  font-size: 13px;
  text-decoration: none;
  padding: 6px 0 0;
}
.zcmn-cta-secondary:hover { color: var(--zcmn-text); }
.zcmn-cta-secondary--bold {
  color: var(--zcmn-accent);
  font-weight: 700;
  font-size: 14px;
  padding: 8px 0;
}

.zcmn-drawer-foot--guest {
  margin-top: auto;
  align-items: stretch;
  text-align: center;
}
.zcmn-signup-prompt {
  margin: 0 0 6px;
  color: var(--zcmn-muted);
  font-size: 13px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .zcmn-drawer,
  .zcmn-overlay,
  .zcmn-lvl-2,
  .zcmn-chev,
  .zcmn-hamburger span {
    transition: none;
  }
}