/* ================= RESET ================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family:
    system-ui,
    -apple-system,
    Roboto,
    sans-serif;
}
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden; /* fallback navegadores viejos */
  overflow-x: clip; /* moderno: evita romper position:sticky en descendientes */
}
body {
  color: #222;
  padding-top: 86px;
  /* coincide con header fijo */
}
/* ================= HEADER ================= */
/* Si existe en HTML, lo ocultamos */
.header-center {
  display: none !important;
}
/* HEADER */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 86px;
  padding: 12px 40px;
  border-bottom: 1px solid #2a4157;
  background: #35546f;
  z-index: 1000;
  display: flex;
  align-items: center;
}
/* LOGO */
.logo {
  position: absolute;
  left: 40px;
  display: flex;
  align-items: center;
}
.logo-img {
  height: 58px;
  width: auto;
  display: block;
}
/* ================= NAVBAR ================= */
.nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* centro real */
}
/* Centro (desktop) */
.nav-center {
  display: inline-flex;
  align-items: center;
  gap: 22px;
}
.nav-center a,
.nav-center button.nav-link {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
  line-height: 1;
  font-size: 18px; /* +30% sobre 14px original */
  font-weight: 600;
}

/* Botón "Enviá tu Pedido" — rojo destacado en el header */
.nav-link-cart {
  background: #0a1f44 !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  gap: 8px !important;
  box-shadow: 0 2px 8px rgba(10, 31, 68, 0.35);
  transition: background 0.15s ease, transform 0.1s ease,
    box-shadow 0.15s ease;
}

.nav-link-cart:hover {
  background: #123163 !important;
  box-shadow: 0 4px 14px rgba(18, 49, 99, 0.45);
}

.nav-link-cart:active {
  transform: scale(0.97);
}

.cart-link-text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.1;
}

.cart-link-line1 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  opacity: 0.92;
  text-transform: uppercase;
}

.cart-link-line2 {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.nav-link-cart .cart-icon {
  /* Ajustar el ícono para que combine con el botón rojo */
  filter: brightness(0) invert(1);
}
.nav-center button.nav-link {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}
/* Search — +30% sobre el original */
.nav-search {
  height: 44px; /* 34 → 44 */
  width: 340px; /* 260 → 340 */
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  padding: 0 14px;
  outline: none;
  font-size: 17px; /* 13 → 17 */
}
.nav-search::placeholder {
  color: rgba(255, 255, 255, 0.75);
}
/* Dropdown categorías: anclaje correcto */
.dropdown-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
/* Dropdown menu */
.dropdown-menu {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 240px;
  max-height: 360px;
  overflow: auto;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  display: none;
  z-index: 3500;
  padding: 6px;
}
.dropdown-menu.open {
  display: block;
}
/* dropdown items genéricos (por si los usás) */
.dropdown-item {
  width: 100%;
  border: none;
  background: #fff;
  cursor: pointer;
  text-align: left;
  padding: 10px 10px;
  border-radius: 8px;
  font-size: 13px;
}
.dropdown-item:hover {
  background: #f5f5f5;
}
/* ICONO CARRITO */
.cart-icon {
  height: 1em;
  width: auto;
  display: inline-block;
  object-fit: contain;
  vertical-align: middle;
  filter: brightness(0) invert(1);
}
/* Derecha (desktop): CTA + Login o UserBox */
.nav-right {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6000;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
#ctaCliente,
#loginBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 10px;
  white-space: nowrap;
  line-height: 36px;
  font-size: 14px;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
}
/* Botón blanco: "Quiero ser cliente" */
#ctaCliente {
  background: #fff;
  color: #111;
  border: 1px solid #e6e6e6;
}
#ctaCliente:hover {
  background: #f5f5f5;
}
/* Botón negro: "Iniciar sesión" */
#loginBtn {
  background: #0b0b0b;
  color: #fff;
  border: 1px solid #0b0b0b;
}
#loginBtn:hover {
  background: #1a1a1a;
}
/* Caja usuario */
.user-box {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
.hello-nav-btn {
  background: transparent;
  border: none;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
}
.hello-nav-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}
.profile-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  line-height: 0;
}
.profile-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
/* Menu usuario */
.user-menu {
  position: absolute;
  top: 44px;
  right: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid #ececef;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 16px 40px rgba(0, 0, 0, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.08);
  display: none;
  z-index: 4000;
  padding: 6px;
  animation: userMenuIn 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes userMenuIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.user-menu.open {
  display: block;
}
.user-menu-item,
#userMenu .user-menu-item,
#mobileUserMenu .user-menu-item {
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #222;
  font-family: inherit;
  letter-spacing: -0.1px;
  transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
  /* Grid: col texto + col auto (badge opcional). */
  display: grid;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  column-gap: 10px !important;
}
/* Items ocultos via inline style="display:none" mantienen oculto */
.user-menu-item[style*="display: none"],
.user-menu-item[style*="display:none"] {
  display: none !important;
}
.user-menu-label {
  justify-self: start;
  align-self: center;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-menu-item:hover {
  background: #f4f4f6;
  transform: translateX(2px);
}
.user-menu-item:active {
  transform: translateX(0) scale(0.99);
}
.user-menu-item.danger,
#userMenu .user-menu-item.danger,
#mobileUserMenu .user-menu-item.danger {
  color: #c0392b;
  background: transparent;
}
.user-menu-item.danger:hover,
#userMenu .user-menu-item.danger:hover,
#mobileUserMenu .user-menu-item.danger:hover {
  background: #fde4e0 !important;
  color: #8a1d12 !important;
}
/* (Emoji removido — clase queda no-op por compatibilidad) */
.user-menu-emoji {
  display: none !important;
}
.user-menu-sep {
  height: 1px;
  background: #ececef;
  margin: 6px 4px;
}
/* ================= SECCIONES ================= */
.section {
  display: none;
}
.section.active {
  display: block;
}
/* TITULO + NOTA */
.section-title-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin: 20px 0 24px;
  padding: 0 90px !important;
}
.section-title {
  text-align: center;
  font-size: 32px;
}
.right-note {
  justify-self: end;
  font-size: 13px;
  font-weight: bold;
  color: #222;
}
/* Variante: aviso "Ya está aplicado tu Dto x Volumen" debajo del carrusel Novedades */
.right-note--belowcarousel {
  display: block;
  margin: 4px 90px 18px auto;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  color: #111;
  text-align: right;
  background: none;
  border: 0;
  border-radius: 0;
  width: auto;
  max-width: none;
  box-shadow: none;
}
.right-note--belowcarousel:empty {
  display: none;
}
/* ================= PRODUCTOS ================= */
.category-block {
  /* Sin margin-bottom propio — el espacio entre categorías lo da
     únicamente el margin-top del próximo .category-title (24px), así
     todas las categorías quedan a la MISMA distancia de la anterior. */
  margin-bottom: 0;
}
.category-title {
  font-size: 44px;
  font-weight: bold;
  margin: 24px 0 20px;
  border-bottom: 2px solid #ddd;
  padding-bottom: 10px;
  scroll-margin-top: 110px;
}
/* Layout Productos con sidebar */
.products-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
  padding: 0 90px !important;
  align-items: start;
}
/* Sidebar categorías */
.categories-sidebar {
  position: sticky;
  top: calc(86px + 24px);
  align-self: start;
  border: 1px solid #eee;
  background: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  /* Altura fija para que la card no sea infinita; scroll vertical interno
     para acceder a todas las categorías sin que se rompa el layout. */
  max-height: min(
    720px,
    calc(100vh - 86px - 44px)
  );
  overflow-y: auto;
  scrollbar-gutter: stable;
}
/* Scrollbar custom — pill fina que NO toca los bordes verticales */
.categories-sidebar::-webkit-scrollbar {
  width: 8px;
}
.categories-sidebar::-webkit-scrollbar-track {
  background: transparent;
  margin: 8px 0;
}
.categories-sidebar::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  border: 2px solid #fff;
  background-clip: padding-box;
}
.categories-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.35);
  background-clip: padding-box;
  border: 2px solid #fff;
}
.sidebar-title {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 10px;
}
.sidebar-list {
  display: grid;
  gap: 6px;
}
/* toggles (desktop sidebar) */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
}
.toggle-row:hover {
  background: #f5f5f5;
}
.toggle-row.active {
  background: #efefef;
  font-weight: bold;
}
.toggle-text {
  font-size: 13px;
  color: #222;
}
/* oculto checkbox real */
.toggle-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
/* UI switch */
.toggle-ui {
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #d6d6d6;
  position: relative;
  flex: 0 0 auto;
  transition: background 0.15s ease;
}
.toggle-ui::after {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.15s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.toggle-row input:checked + .toggle-ui {
  background: #111;
}
.toggle-row input:checked + .toggle-ui::after {
  transform: translateX(16px);
}
.toggle-sep {
  height: 1px;
  background: #eee;
  margin: 6px 0;
}
/* Sub-filtro de medidas (debajo de Cuadros en el sidebar) */
.medida-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 8px;
  padding-left: 16px;
  border-left: 2px solid #ececec;
  margin-left: 8px;
}
.medida-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}
.medida-row:hover {
  background: #f5f5f5;
}
.medida-row.active {
  background: #eef2f6;
  font-weight: 600;
}
.medida-text {
  font-size: 12.5px;
  color: #444;
}
.medida-fire {
  margin-left: 2px;
}
/* Fila vacía que separa las medidas destacadas del resto */
.medida-gap {
  height: 14px;
}
/* Corte de línea entre chips destacadas y el resto (overlay mobile) */
.mf-medidas-break {
  flex-basis: 100%;
  height: 0;
}
/* Botón "Ver más / Ver menos" de medidas (desktop sidebar) */
.medida-vermas {
  align-self: flex-start;
  background: none;
  border: none;
  color: #0a1f44;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 10px;
  text-decoration: underline;
}
.medida-rest {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Botón "Ver más / Ver menos" de medidas (overlay mobile) */
.mf-vermas {
  flex-basis: 100%;
  background: none;
  border: none;
  color: #0a1f44;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 0;
  text-align: left;
  text-decoration: underline;
}
.mf-medidas-rest {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}
.medida-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.medida-box {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 2px solid #bcbcbc;
  background: #fff;
  flex: 0 0 auto;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.medida-row input:checked + .medida-box {
  background: #35546f;
  border-color: #35546f;
}
.medida-row input:checked + .medida-box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* Productos grid — 4 cards max, cada una con tope para que no se estiren
   en pantallas grandes. Cuando sobra espacio, la grilla queda centrada.
   Se ve igual con/sin login. Responsive overrides (≤1199 → 3 cols, ≤900
   → 2 cols) los pisan en su media query. */
/* Subcategoría (Utensilios): título fuera del grid para que no tome la
   altura de fila 1fr de las cards (antes dejaba un hueco grande). */
.subcategory-title {
  font-size: 22px;
  font-weight: bold;
  margin: 8px 0 12px;
  padding: 0;
  background: transparent;
  color: #111;
}

/* ============================================================
   COLECCIONES (subcategorías de Cuadros) — empaquetado en fila
   ------------------------------------------------------------
   Cada colección es un grupo flex cuyo ancho = --span columnas de
   la grilla de 4 (--span = min(productos, 4), lo fija el JS). Con
   flex-wrap: dos colecciones de 2 caen lado a lado (2+2 = 4), una de
   4 llena la fila y una de 3 queda sola con un hueco al final. Las
   cards de cada grupo se reparten ese ancho (se achican para entrar 4).
   Flexbox + calc → funciona en cualquier navegador, sin subgrid.
   ============================================================ */
.collections-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  align-items: flex-start;
  justify-content: flex-start;
}
.col-group {
  min-width: 0;
  /* ancho = span cards + (span-1) gaps, siendo card = (100% - 3*25px)/4.
     El -1px absorbe redondeos sub-pixel para que 2+2 no se vaya de fila. */
  flex: 0 0
    calc(
      var(--span, 1) * (100% - 75px) / 4 + (var(--span, 1) - 1) * 25px - 1px
    );
  max-width: 100%;
}
.col-group > .subcategory-title {
  margin: 8px 0 12px;
}
.col-group-cards {
  display: grid;
  grid-template-columns: repeat(var(--span, 1), minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 25px;
}
/* < 1200px: sin empaquetado lateral; cada colección ocupa su fila con una
   grilla responsive (3 / 2 / 1 columnas), igual que .products-grid. */
@media (max-width: 1199px) {
  .col-group {
    flex-basis: 100%;
  }
  .col-group-cards {
    grid-template-columns: repeat(3, minmax(0, 280px));
    justify-content: center;
  }
}
@media (max-width: 900px) {
  .col-group-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 360px) {
  .col-group-cards {
    grid-template-columns: 1fr;
  }
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 280px));
  /* OPCIÓN ELEGIDA (compactar): grilla normal de alto uniforme. El cartbar
     compacto (2 líneas) hace que al agregar la card casi no crezca → huecos
     mínimos, sin tocar la estructura de la grilla. */
  grid-auto-rows: 1fr;
  justify-content: center;
  gap: 25px;
  align-items: stretch;
}
.products-main {
  min-width: 0;
}
/* Card producto */
.product-card {
  position: relative;
  border: 1px solid #eee;
  padding: 20px;
  text-align: center;
  border-radius: 12px;
  background: #fff;
  min-width: 0;
  overflow: hidden; /* contiene zoom de imagen y shine sweep */
  perspective: 500px; /* perspectiva más cercana → giro 3D más pronunciado */
  transform-style: preserve-3d;
  transition:
    transform 250ms ease,
    box-shadow 250ms ease,
    background 320ms ease;
  /* Flex column → el botón "Agregar / Iniciar sesión" siempre queda
     anclado al fondo aunque el texto se vaya a 2 líneas. Las cards de
     una misma fila quedan alineadas. */
  display: flex;
  flex-direction: column;
  /* Alto base de la card. El cartbar compacto (2 líneas) hace que al agregar
     la card crezca poco → huecos mínimos. */
  min-height: 420px;
}
/* El último elemento de la card (botón add / iniciar sesión / stepper)
   absorbe el espacio libre arriba → siempre va al fondo */
.product-card > .add-btn,
.product-card > .card-cartbar,
.product-card > button:last-child,
.product-card > a:last-child {
  margin-top: auto;
}
/* Botón "Agregar al pedido" (y login / sin stock): centrado vertical en el
   espacio libre (no pegado al fondo) para disimular la diferencia de alto
   con las cards que ya tienen el stepper. */
.product-card > .add-btn {
  margin-top: auto;
  margin-bottom: auto;
}
.product-card img {
  width: 190px;
  height: 190px;
  object-fit: cover;
  margin: 0 auto 10px;
  display: block;
  max-width: 100%;
  transition: transform 420ms cubic-bezier(0.2, 0.9, 0.2, 1);
  transform-origin: center bottom;
  will-change: transform;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  }
}

/* Celebración al agregar al carrito: wobble (péndulo amortiguado) */
@keyframes lk-celebrate {
  0%, 100% { transform: rotate(0); }
  15%      { transform: rotate(-5deg); }
  30%      { transform: rotate(4deg); }
  45%      { transform: rotate(-3deg); }
  60%      { transform: rotate(2deg); }
  75%      { transform: rotate(-1deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .product-card img.lk-celebrate {
    animation: lk-celebrate 700ms ease-in-out;
  }
}
.badge-nuevo {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #ff0000;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  padding: 7px 12px;
  border-radius: 10px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}

.badge-liquidacion {
  border: 2px solid #ff7a00;
  color: #ff7a00;
  background: rgba(255, 122, 0, 0.08);
}

.badge-sinstock {
  border: 2px solid #777;
  color: #555;
  background: rgba(0, 0, 0, 0.06);
}

.badge-mi-surtido {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 32px;
  height: 32px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.badge-mi-surtido svg {
  width: 100%;
  height: 100%;
  display: block;
}

.badge-mi-surtido .star-fill {
  fill: #ffd700;
  stroke: #d4aa00;
  stroke-width: 1.1;
}

.badge-mi-surtido .star-ring {
  fill: rgba(255, 255, 255, 0.92);
  stroke: #e0b800;
  stroke-width: 1.8;
}

.product-info {
  margin: 10px 0;
  line-height: 1.35;
  text-align: center;
}
.product-cod {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 4px;
}
.product-name {
  font-size: 17px;
  font-weight: normal;
}
.product-info span {
  font-weight: bold;
}
.price-hidden {
  display: none !important;
}
.price-locked {
  margin-top: 8px;
  font-size: 13px;
  color: #666;
}
.add-btn {
  margin-top: 10px;
  padding: 10px 20px;
  background: black;
  color: white;
  border: none;
  cursor: pointer;
  font-weight: 800;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: background 0.15s ease, transform 0.1s ease,
    box-shadow 0.15s ease;
}

.add-btn:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.add-btn:active {
  transform: scale(0.98);
}
.add-btn.in-cart {
  background: #111;
  opacity: 0.95;
}
/* Qty panel */
.qty-panel {
  margin-top: 12px;
  border-top: 1px solid #eee;
  padding-top: 12px;
  display: grid;
  gap: 8px;
  justify-items: center;
}
.qty-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.qty-label {
  font-size: 13px;
  font-weight: bold;
  color: #222;
}
.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.qty-btn {
  width: 36px;
  height: 34px;
  border: none;
  background: #f6f6f6;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.qty-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.qty-input {
  width: 54px;
  height: 34px;
  border: none;
  text-align: center;
  outline: none;
  font-size: 14px;
}
/* quitar flechas number */
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.qty-input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.qty-meta {
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 12px;
  color: #444;
}
.qty-chips {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.chip {
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
}
.chip:hover {
  background: #f5f5f5;
}
.qty-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.go-cart-btn {
  border: none;
  background: #111;
  color: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
}
.go-cart-btn:hover {
  opacity: 0.92;
}
.remove-btn {
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
}
.remove-btn:hover {
  background: #f5f5f5;
}
/* Sort row + botón filtros */
.sort-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin: 6px 0 14px;
}
.sort-label {
  font-size: 14px;
  color: #222;
}
.sort-select {
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  outline: none;
}
.sort-select:focus {
  border-color: #111;
}
/* Filtros: botón visible en tablet/mobile */
.filters-btn {
  display: none;
}
@media (max-width: 1024px) {
  .filters-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #111;
    background: #fff;
    color: #111;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
  }
}
/* Overlay filtros (única implementación: bottom-sheet) */
.filters-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: none;
  z-index: 9999;
}
.filters-overlay.open {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.filters-panel {
  width: 100%;
  max-width: 560px;
  background: #fff;
  border-radius: 18px 18px 0 0;
  padding: 14px 14px 18px;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.25);
  max-height: 86vh;
  overflow: auto;
}
.filters-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.filters-title {
  font-size: 18px;
  font-weight: 800;
}
.filters-x {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid #eee;
  background: #fff;
  cursor: pointer;
}
.filters-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 6px 0 12px;
}
.mf-btn {
  height: 40px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid #e5e5e5;
  background: #fff;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.mf-btn.on {
  border-color: #111;
  background: #111;
  color: #fff;
}
.mf-btn-all {
  grid-column: 1 / -1;
  background: #f8f9fa;
  border-style: dashed;
}
.mf-btn-all.on {
  background: #111;
  border-style: solid;
}
/* Chips de medidas (sub-filtro de Cuadros) en el overlay mobile */
.mf-medidas {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 0 4px 14px;
  border-left: 2px solid #ececec;
  margin-left: 4px;
}
.mf-chip {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid #e5e5e5;
  background: #fff;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.mf-chip.on {
  border-color: #35546f;
  background: #35546f;
  color: #fff;
}
.mf-section-label {
  grid-column: 1 / -1;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #666;
  font-weight: 700;
  padding: 6px 0 0;
}
.mf-section-label:first-child {
  padding-top: 0;
}
.filters-actions {
  position: sticky;
  bottom: 0;
  background: #fff;
  padding-top: 10px;
}
.filters-apply {
  width: 100%;
  height: 44px;
  border-radius: 14px;
  border: none;
  background: #111;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
/* Subtítulos de subcategoría (ÚNICA regla) */
.grid-subtitle {
  grid-column: 1 / -1;
  font-size: 22px;
  font-weight: 800;
  margin: 16px 0 8px;
  padding: 10px 6px 8px;
  border-bottom: 2px solid #e0e0e0;
  background: #fff;
}
/* ================= CARRITO ================= */
/* Separación título */
#carrito .section-title {
  margin-top: 34px;
  margin-bottom: 22px;
}
/* Selector entrega */
.ship-row {
  padding: 0 40px;
  margin: -18px 0 20px;
  display: flex;
  justify-content: center;
}
.ship-card {
  width: min(780px, 100%);
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 12px 14px;
  display: grid;
  gap: 6px;
}
.ship-label {
  font-size: 12px;
  color: #444;
  font-weight: bold;
}
.ship-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
  outline: none;
}
.ship-select:focus {
  border-color: #111;
}
.ship-hint {
  font-size: 12px;
  color: #666;
}
/* Layout carrito */
.cart-layout {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 40px 10px;
  display: block;
}
/* botonera fija (desktop) */
.pay-card {
  position: fixed;
  left: 10px;
  top: 100px;
  width: 220px;
  z-index: 2500;
  max-height: calc(100vh - 120px);
  overflow: auto;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 12px;
}
.pay-title {
  font-size: 12px;
  color: #444;
  margin-bottom: 10px;
  font-weight: bold;
}
/* select oculto */
#paymentSelect {
  position: absolute;
  left: -99999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.payment-buttons {
  display: grid;
  gap: 8px;
}
.pay-btn {
  width: 100%;
  border: 1px solid #e6e6e6;
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  text-align: left;
}
.pay-btn:hover {
  background: #f6f6f6;
}
.pay-btn.active {
  border-color: #111;
  background: #efefef;
}
.pay-name {
  font-size: 13px;
  font-weight: bold;
  line-height: 1.1;
}
.pay-off {
  font-size: 12px;
  color: #444;
  margin-top: 2px;
}
.web-note {
  margin-top: 12px;
  border-top: 1px solid #eee;
  padding-top: 10px;
}
.web-note-title {
  font-size: 12px;
  color: #444;
}
.web-note-value {
  font-size: 13px;
  margin-top: 4px;
}
/* Anchuras */
:root {
  --table-width: 780px;
  --totals-width: 400px;
}
/* tabla centrada */
.cart-column {
  display: flex !important;
  justify-content: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.cart-column #cart {
  width: var(--table-width) !important;
  max-width: 100%;
}
/* tabla */
.cart-table {
  table-layout: fixed !important;
  width: 100% !important;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  overflow: hidden;
}
.cart-table th,
.cart-table td {
  border-right: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  padding: 8px 6px;
  text-align: center;
  vertical-align: middle;
  font-size: 13px;
  white-space: nowrap;
}
.cart-table th {
  background: #fafafa;
  font-weight: bold;
}
.cart-table th:last-child,
.cart-table td:last-child {
  border-right: none;
}
.split-2line {
  display: inline-block;
  line-height: 1.05;
}
.cart-table td.desc {
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* col widths */
.cart-table col.cod {
  width: 38px !important;
}
.cart-table col.desc {
  width: auto !important; /* flexible: ocupa lo que sobra */
}
.cart-table col.cajas {
  width: 140px !important; /* stepper + X cómodos en la misma fila */
}
/* Stepper compacto dentro de la fila del carrito.
   En #carrito.cart-2col, hacemos wrap para que la X caiga ABAJO del count. */
.cart-step {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  justify-content: center;
}

/* Dentro del 2-col, el cart-step va INLINE con X al lado del stepper */
#carrito .cart-2col .cart-table .cart-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: nowrap;
}

#carrito .cart-2col .cart-table .cart-step-remove {
  width: 20px;
  height: 20px;
  margin-left: 6px; /* separación del +  */
  margin-top: 0;
}
.cart-step-btn {
  width: 24px;
  height: 24px;
  border: 1px solid #ddd;
  background: #fafafa;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  color: #333;
}
.cart-step-btn:hover {
  background: #f0f0f0;
}
.cart-step-input {
  width: 40px;
  height: 24px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 12px;
  padding: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}
.cart-step-input::-webkit-outer-spin-button,
.cart-step-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cart-step-remove {
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  color: #999;
  cursor: pointer;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  padding: 0;
  margin-left: 4px;
}
.cart-step-remove:hover {
  color: #555;
}
/* Ocultar buscador mientras el usuario está en el carrito o el perfil */
body.section-carrito #navSearch,
body.section-perfil #navSearch {
  display: none !important;
}
@media (max-width: 900px) {
  body.section-carrito .mobile-products-bar,
  body.section-perfil .mobile-products-bar {
    display: none !important;
  }
}
.cart-table col.uni {
  width: 38px !important;
}
.cart-table col.tp {
  width: 70px !important;
}
.cart-table col.total {
  width: 90px !important;
}
/* Totales centrados */
.cart-total {
  width: 100%;
  margin: 8px 0 10px;
  padding: 0;
  display: flex !important;
  justify-content: center !important;
  box-sizing: border-box;
}
.cart-total .totals-inner {
  width: var(--totals-width) !important;
  max-width: 100%;
  box-sizing: border-box;
}
.totals-inner .totals-line {
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed #ddd;
}
.totals-inner .totals-line strong {
  text-align: right;
  white-space: nowrap;
}
.totals-divider {
  margin: 14px 0;
  border-top: 1px solid #eee;
}
.grand-total {
  text-align: center;
  margin: 16px 0 0;
}
/* Acciones */
.order-actions {
  width: min(var(--table-width), 100%);
  margin: 10px auto 18px !important;
  padding: 0 !important;
  display: grid;
  grid-template-columns: 1fr; /* forzar 1 sola columna → botones apilados */
  gap: 12px;
  justify-items: center;
}
.order-status {
  min-height: 18px;
  font-size: 13px;
  color: #444;
  text-align: center;
}
.order-status.ok {
  color: #0a7a2f;
}
.order-status.err {
  color: #b00020;
}
.submit-order {
  padding: 12px 30px;
  background: #0b0b0b;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 10px;
  width: 240px;
}
.submit-order:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.back {
  padding: 12px 30px;
  cursor: pointer;
  border-radius: 10px;
  width: 240px;
}
.back.back-outline {
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #111 !important;
}
.back.back-outline:hover {
  background: #f5f5f5 !important;
}

/* Botón "Guardar pedido sin enviar" — mismo tamaño que "Seguir agregando", color amarillo */
.back.save-draft-btn {
  background: #fff8e6 !important;
  color: #5b4a00 !important;
  border: 1.5px solid #e6a800 !important;
  font-weight: 600 !important;
}

.back.save-draft-btn:hover {
  background: #fff3cc !important;
  border-color: #c79100 !important;
  color: #4a3b00 !important;
}
#carrito {
  padding-bottom: 48px;
  padding-top: 8px;
}

#carrito .section-header:first-child {
  margin-top: 0 !important;
}
/* ================= FOOTER ================= */
.footer {
  background: #111;
  color: white;
  text-align: center;
  padding: 30px;
}
/* ================= MODAL LOGIN ================= */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  padding: 20px;
}
.modal.open {
  display: flex;
}
.modal-content {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #eee;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid #eee;
}
.modal-close {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
}
.modal-body {
  padding: 18px;
  display: grid;
  gap: 10px;
}
.modal-body label {
  font-size: 13px;
  color: #444;
}
.modal-body input {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
}
.modal-submit {
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: #000;
  color: #fff;
  cursor: pointer;
  margin-top: 6px;
}
.modal-error {
  color: #b00020;
  font-size: 13px;
}
.modal-hint {
  font-size: 12px;
  color: #666;
  margin-top: 6px;
}
.modal-cta {
  margin-top: 10px;
  width: 100%;
  justify-content: center;
}
/* ================= HAMBURGER MENU (mobile) ================= */
.hamburger {
  display: none;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
}
.hamburger:hover {
  background: rgba(255, 255, 255, 0.08);
}
.mobile-menu {
  display: none;
  position: absolute;
  top: 74px;
  right: 12px;
  width: 240px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  z-index: 5000;
}
.mobile-menu.open {
  display: block;
}
.mobile-item {
  width: 100%;
  text-align: left;
  padding: 12px 12px;
  background: #fff;
  border: none;
  cursor: pointer;
  font-size: 14px;
}
.mobile-item:hover {
  background: #f5f5f5;
}
.mobile-item.danger {
  color: #b00020;
}
.mobile-sep {
  height: 1px;
  background: #eee;
}
/* ================= RESPONSIVE ================= */
/* Desktop chico / notebook (901-1199): 3 cols (en vez de 4) para que las
   cards no queden apretadas con el sidebar de categorías. Cards más cómodas. */
@media (max-width: 1199px) and (min-width: 901px) {
  .products-grid {
    grid-template-columns: repeat(3, minmax(0, 280px));
    justify-content: center;
    gap: 20px;
  }
  .products-layout {
    padding: 0 40px !important;
    gap: 32px;
  }
}
/* Desktop chico extra (1200-1440): mantener 4 cols pero reducir padding
   exterior para que las cards no queden raquíticas. */
@media (max-width: 1440px) and (min-width: 1200px) {
  .products-layout {
    padding: 0 50px !important;
    gap: 36px;
  }
  .products-grid {
    gap: 20px;
  }
  .product-card img {
    width: 100%;
    max-width: 200px;
    height: auto;
    aspect-ratio: 1/1;
  }
}
/* Tablet/desktop chico: 2 por fila */
@media (max-width: 900px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .product-card {
    padding: 14px;
  }
  .product-card img {
    width: 90%;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
  }
  .products-layout {
    grid-template-columns: 1fr;
    padding: 0 12px;
  }
  .category-title {
    margin: 40px 12px 18px;
  }
  /* Sidebar NO visible en mobile (usás botón filtros) */
  .categories-sidebar {
    display: none !important;
  }
  /* Header mobile: logo centrado, hamburguesa a la derecha */
  .header {
    padding: 12px 12px;
    justify-content: center;
  }
  .logo {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 5;
  }
  .logo-img {
    height: 46px;
  }
  #hamburgerBtn {
    display: inline-flex !important;
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
  }
  /* ocultar nav-center/nav-right en mobile */
  .nav-center {
    display: none !important;
  }
  .nav-right {
    display: none !important;
  }
  /* Cart: botonera deja de ser fixed */
  .pay-card {
    position: static;
    width: 100%;
    max-height: none;
    overflow: visible;
    margin: 0 16px 12px;
  }
  .cart-layout {
    padding: 0 16px 10px;
  }
  .cart-column {
    display: block !important;
  }
  #cart {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cart-table {
    min-width: 560px;
  }
  .cart-table th,
  .cart-table td {
    padding: 7px 8px;
    font-size: 12px;
  }
  .cart-total {
    padding: 0 16px !important;
  }
  .cart-total .totals-inner {
    width: 100% !important;
  }
  .totals-inner .totals-line {
    grid-template-columns: 1fr 120px;
    gap: 10px;
  }
  .totals-inner .totals-line span {
    min-width: 0;
    white-space: normal;
  }
  .ship-row {
    padding: 0 16px;
  }
}
/* Desktop: ocultar hamburger/menu */
@media (min-width: 901px) {
  #mobileMenu {
    display: none !important;
  }
  #hamburgerBtn {
    display: none !important;
  }
}
/* ============================================================
   Mobile chico (≤480px): cards 1 columna o 2 muy compactas
   ============================================================ */
@media (max-width: 480px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .product-card {
    padding: 10px;
    border-radius: 10px;
  }
  .product-card img {
    width: 100%;
    max-width: 140px;
    aspect-ratio: 1/1;
    object-fit: cover;
  }
  .products-layout {
    padding: 0 8px;
  }
  .category-title {
    margin: 28px 8px 14px;
    font-size: 22px;
  }
  /* Cards de cart: padding más chico */
  .pay-card {
    margin: 0 8px 10px;
    padding: 14px 12px;
  }
  .cart-layout {
    padding: 0 8px 10px;
  }
  /* Reducir tamaño de descripción de producto en mobile chico */
  .product-card .card-desc {
    font-size: 13px;
    line-height: 1.25;
  }
  .product-card .card-cod,
  .product-card .card-uxb {
    font-size: 11px;
  }
  .product-card .card-price-line {
    font-size: 13px;
  }
  .product-card .add-btn,
  .product-card .add-login-btn {
    font-size: 13px;
    padding: 8px 10px;
    height: 36px;
  }
}
/* Mobile ultra chico (≤360px): 1 columna full width */
@media (max-width: 360px) {
  .products-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .product-card img {
    max-width: 200px;
  }
}
/* ===== Botón "Quiero ser cliente" (genérico, incluye el del MODAL) ===== */
.btn-quiero-cliente {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 10px;
  background: #fff;
  color: #111;
  border: 1px solid #e6e6e6;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  line-height: 36px;
  box-sizing: border-box;
}
.btn-quiero-cliente:hover {
  background: #f5f5f5;
}
/* En el modal: que sea "cuadrado" y full width */
.modal-cta {
  width: 100%;
  height: 44px;
  border-radius: 12px;
  line-height: 44px;
  margin-top: 10px;
}
/* ========================= MOBILE TOOLBAR (solo <=900px) Reemplaza "Ordenar por" + "Filtros" actuales por: [buscador (50%)] [Filtros][Ordenar] (50%) ========================= */
/* Por defecto (desktop) NO se ve */
.mobile-toolbar {
  display: none;
}
@media (max-width: 900px) {
  /* 1) Mostrar el toolbar mobile */
  .mobile-toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* mitad izquierda / mitad derecha */
    gap: 10px;
    width: 100%;
    padding: 0 12px;
    /* mismo padding mobile que venís usando */
    margin: 6px 0 14px;
    align-items: center;
  }
  /* 2) Buscador mobile: ocupa el ancho de 1 columna (mitad izquierda) */
  .mobile-search {
    height: 44px;
    width: 100%;
    border-radius: 12px;
    border: 1px solid #ddd;
    background: #fff;
    color: #111;
    padding: 0 12px;
    outline: none;
    font-size: 14px;
  }
  .mobile-search:focus {
    border-color: #111;
  }
  /* 3) Mitad derecha: dos botones mismo ancho */
  .mobile-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Filtros / Ordenar mismo ancho */
    gap: 10px;
    width: 100%;
  }
  .mtool-btn {
    height: 44px;
    width: 100%;
    border-radius: 12px;
    border: 1px solid #c7c7c7;
    background: #fff;
    color: #000000;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
  }
  .mtool-btn:hover {
    background: #f5f5f5;
  }
  /* Iconos (sin tocar desktop) */
  .mtool-btn::before {
    content: "";
    width: 18px;
    height: 18px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  /* ícono filtro (funnel) */
  .mtool-filters::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18'%3E%3C/path%3E%3Cpath d='M6 12h12'%3E%3C/path%3E%3Cpath d='M10 19h4'%3E%3C/path%3E%3C/svg%3E");
  }
  /* ícono ordenar (arrows) */
  .mtool-sort::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5h10'%3E%3C/path%3E%3Cpath d='M11 9h7'%3E%3C/path%3E%3Cpath d='M11 13h10'%3E%3C/path%3E%3Cpath d='M11 17h7'%3E%3C/path%3E%3Cpath d='M3 7l2-2 2 2'%3E%3C/path%3E%3Cpath d='M5 5v14'%3E%3C/path%3E%3Cpath d='M7 17l-2 2-2-2'%3E%3C/path%3E%3C/svg%3E");
  }
  /* 4) Ocultar los controles viejos SOLO EN MOBILE */
  .sort-row .sort-label {
    display: none !important;
  }
  .sort-row .filters-btn {
    display: none !important;
  }
}
@media (max-width: 900px) {
  /* NO lo escondas con display:none: el select debe existir para abrir el picker */
  .sort-row .sort-wrap {
    position: fixed !important;
    left: -9999px !important;
    top: 0 !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  /* el select sigue vivo */
  #sortSelect {
    pointer-events: auto !important;
  }
}
@media (max-width: 900px) {
  .mtool-sort-wrap {
    position: relative;
    width: 100%;
  }
  /* el "botón" visual */
  .mtool-sort-wrap .mtool-btn {
    width: 100%;
  }
  /* el select REAL encima, invisible pero tocable */
  .mtool-select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 44px;
    opacity: 0;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
  }
}
/* ========================= MOBILE: reemplazo hamburguesa por iconos (solo <=900px) ========================= */
.mobile-icons {
  display: none;
}
@media (max-width: 900px) {
  /* 1) NO hamburguesa ni menú mobile */
  #hamburgerBtn {
    display: none !important;
  }
  #mobileMenu {
    display: none !important;
  }
  /* 2) Mostrar iconos en el header (derecha) */
  .mobile-icons {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
  }
  .micon-btn {
    border: none;
    background: transparent;
    color: #fff;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .micon-btn:hover {
    background: rgba(255, 255, 255, 0.08);
  }
  /* Carrito mobile */
  .micon-cart-img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: brightness(0) invert(1);
  }
  .micon-cart-text {
    font-size: 13px;
    font-weight: 800;
  }
  /* Loke mobile */
  .micon-loke {
    padding: 4px;
  }
  .micon-loke-img {
    width: 46px;
    height: auto;
    object-fit: contain;
    border-radius: 3px;
  }
  /* contador */
  #mobileCartCount {
    font-weight: 800;
  }
  /* Avatar (reusa tu .profile-avatar) */
  .micon-profile .profile-avatar {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.35);
  }
  /* Dropdown usuario: anclado a la derecha en mobile */
  #userMenu {
    right: 12px !important;
    top: 74px !important;
    /* debajo del header */
  }
  .user-menu-sep {
    height: 1px;
    background: #e9e9e9;
    margin: 6px 0;
  }
  .user-menu-item.danger {
    color: #b00020;
    font-weight: 800;
  }
}
/* ========================= MOBILE: carrito solo icono + contador ========================= */
@media (max-width: 900px) {
  /* ocultar texto "Pedido" */
  .micon-cart-text {
    display: none !important;
  }
  /* ajustar espacio para que quede compacto */
  .micon-cart {
    gap: 4px;
    padding: 6px;
  }
  /* número un poco más visible */
  #mobileCartCount {
    font-size: 13px;
    font-weight: 800;
  }
}
@media (max-width: 900px) {
  .mobile-user-menu {
    position: fixed !important;
    top: 86px !important;
    /* debajo del header (tu header mide 86px) */
    right: 12px !important;
    left: auto !important;
    z-index: 9999 !important;
    display: none;
    /* se abre con .open */
  }
  .mobile-user-menu.open {
    display: block !important;
  }
}
/* ========================= MOBILE: logo alineado a la izquierda ========================= */
@media (max-width: 900px) {
  /* Header como contenedor relativo */
  .header {
    justify-content: flex-start !important;
  }
  /* Logo a la izquierda */
  .logo {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
  }
  .logo-img {
    height: 46px !important;
    /* mantiene proporción mobile */
  }
}
/* Placeholder para contenteditable */
.mobile-search-ce:empty:before {
  content: attr(data-placeholder);
  color: #888;
}
.mobile-search-ce {
  outline: none;
  white-space: nowrap;
  overflow: hidden;
}
/* ========================= MOBILE: buscador contenteditable prolijo ========================= */
@media (max-width: 900px) {
  .mobile-search-ce {
    height: 44px;
    /* mismo alto que botones */
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid #ddd;
    background: #fff;
    display: flex;
    align-items: center;
    /* ✅ centra vertical */
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    outline: none;
    cursor: text;
  }
  /* placeholder cuando está vacío */
  .mobile-search-ce:empty::before {
    content: attr(data-placeholder);
    color: #888;
    pointer-events: none;
  }
  /* cuando tiene texto */
  .mobile-search-ce:not(:empty) {
    color: #111;
  }
  /* foco */
  .mobile-search-ce:focus {
    border-color: #111;
  }
}
/* ========================= CARD CARTBAR — FINAL LIMPIO (mobile/tablet + desktop) ========================= */
/* Contenedor barra inferior */
.card-cartbar {
  /* Línea separadora pegada a los textos de precio (poco margen arriba) y aire
     entre la línea y el contenido del cartbar (padding-top). */
  margin-top: 4px;
  border-top: 1px solid #eee;
  padding-top: 10px;
  display: grid;
  gap: 10px;
  min-width: 0;
}
/* TOP: "Cajas" + Subtotal */
.cartbar-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.cartbar-label {
  font-size: 13px;
  font-weight: 800;
  color: #222;
  white-space: nowrap;
}
.cartbar-subtotal {
  text-align: center;
  white-space: nowrap;
  font-size: 14px;
}
.cartbar-subt {
  font-weight: 800;
}
.cartbar-subv {
  font-weight: 900;
}
.cartbar-iva {
  font-size: 12px;
  color: #666;
  font-weight: 700;
  margin-left: 4px;
}
/* CONTROLS: contiene el bloque izquierdo (stepper + chip) */
.cartbar-controls {
  min-width: 0;
}
/* Grupo izquierdo: Stepper + +5 */
.cartbar-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* Stepper */
.cartbar-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}
.step-btn {
  width: 44px;
  height: 40px;
  border: none;
  background: #f6f6f6;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.step-input {
  width: 64px;
  height: 40px;
  border: none;
  outline: none;
  background: #fff;
  text-align: center;
  font-size: 16px;
}
/* Quitar flechas del input number */
.step-input::-webkit-outer-spin-button,
.step-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.step-input {
  -moz-appearance: textfield;
  appearance: textfield;
}
/* Chip +5 (desktop) */
.chip-5 {
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  font-weight: 800;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Unidades */
.cartbar-units {
  font-size: 12px;
  color: #444;
}
/* Quitar */
.remove-compact {
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  font-weight: 700;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* ========================= MOBILE/TABLET (<=1024) Orden: Subtotal -> Stepper+5 -> Unidades -> Quitar ========================= */
@media (max-width: 1024px) {
  /* Subtotal centrado, label "Subtotal" oculto (redundante con el monto) */
  .cartbar-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
  }
  .product-card .card-cartbar > .cartbar-top .cartbar-label {
    display: none;
  }
  .cartbar-subtotal {
    text-align: center;
    font-size: 15px;
  }
  .cartbar-subv {
    font-size: 17px;
    font-weight: 900;
  }
  .cartbar-iva {
    font-size: 11.5px;
  }
  /* Línea stepper + chip +5: row, centrado, achicado para que entre */
  .cartbar-left {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .cartbar-stepper {
    width: auto;
    justify-content: center;
    flex: 0 1 auto;
  }
  /* +5 visible y compacto */
  .chip-5 {
    display: inline-flex;
    height: 36px;
    padding: 0 12px;
    font-size: 13px;
    flex: 0 0 auto;
  }
  /* Stepper compacto para dejar espacio al +5 */
  .step-btn {
    width: 40px;
    height: 36px;
    font-size: 16px;
  }
  .step-input {
    width: 48px;
    height: 36px;
    font-size: 14px;
  }
  /* Cartbar compacto: gaps mínimos, padding apretado → no agranda card */
  .product-card .card-cartbar {
    padding-top: 8px !important;
    margin-top: 8px !important;
    row-gap: 4px !important;
    column-gap: 6px !important;
  }
  .product-card .card-cartbar .cartbar-units {
    font-size: 12px;
    margin-top: 2px;
  }
  /* Quitar al final full width */
  .remove-compact {
    width: 100%;
  }
}
/* ========================= DESKTOP (>=1025) Layout: Stepper+5 | Subtotal (2 líneas) | Quitar Unidades abajo ========================= */
@media (min-width: 1025px) {
  .card-cartbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px max-content;
    grid-template-areas: "controls subtotal remove" "units units units";
    column-gap: 14px;
    row-gap: 6px;
    align-items: center;
  }
  .cartbar-controls {
    grid-area: controls;
  }
  .cartbar-top {
    grid-area: subtotal;
    display: flex;
    flex-direction: column;
    /* 2 líneas */
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
  }
  .cartbar-units {
    grid-area: units;
  }
  /* Quitar a la derecha, dentro del grid */
  .remove-compact {
    grid-area: remove;
    justify-self: end;
    width: auto;
  }
  /* Stepper un poco más ancho en desktop */
  .step-btn {
    width: 50px;
    height: 38px;
  }
  .step-input {
    width: 70px;
    height: 38px;
    font-size: 15px;
  }
  .chip-5 {
    height: 38px;
  }
  .remove-compact {
    height: 38px;
  }
}
/* ========================================================= DESKTOP FIX — Card cartbar estable (como la imagen) - Nada se encima - Nada se sale de la card - Si falta espacio, achica (fonts/sizes) en vez de desbordar ========================================================= */
@media (min-width: 1025px) {
  /* 0) Regla base anti-overflow (clave en grids/flex) */
  .product-card,
  .product-card * {
    box-sizing: border-box;
    min-width: 0;
  }
  /* 1) Evitar “teletransportes” por CSS viejo SOLO dentro del cartbar */
  .product-card .card-cartbar,
  .product-card .card-cartbar * {
    position: static;
    float: none;
    clear: none;
    transform: none;
  }
  /* 2) Barra inferior — layout 2x2:
     Col izq: CAJAS (top) / stepper+5 (bot)
     Col der: $precio (top) / Unidades (bot)
     SIN botón Quitar (− en qty=1 ⇒ remove auto). */
  .product-card .card-cartbar {
    margin-top: 12px;
    border-top: 1px solid #eee;
    padding-top: 14px;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
      "left  subtotal"
      "left  units";
    column-gap: 18px;
    row-gap: 4px;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
  }
  /* Label viejo "Subtotal" del cartbar-top — ocultar (el precio se entiende solo) */
  .product-card .card-cartbar > .cartbar-top .cartbar-label {
    display: none;
  }
  /* Bloque izq (stepper + chip-5): pseudo "CAJAS" arriba, todo centrado.
     Span 2 filas (subtotal + units) para quedar verticalmente centrado con
     el bloque derecho (precio + unidades). */
  .product-card .card-cartbar > .cartbar-controls {
    grid-area: left;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    justify-self: center;
    align-self: center;
  }
  .product-card .card-cartbar > .cartbar-controls::before {
    content: "Cajas";
    display: block;
    width: 100%;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
  }
  /* stepper + +5 pegados */
  .product-card .card-cartbar .cartbar-left {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    min-width: 0;
  }
  .product-card .card-cartbar .cartbar-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
  }
  /* stepper + +5 pegados */
  .product-card .card-cartbar .cartbar-left {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    min-width: 0;
  }
  .product-card .card-cartbar .cartbar-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
  }
  /* 4) Tamaños cómodos (estilo chef) */
  .product-card .card-cartbar .step-btn {
    width: 44px;
    height: 36px;
    border: none;
    background: #f6f6f6;
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
    flex: 0 0 auto;
  }
  .product-card .card-cartbar .step-input {
    width: 56px;
    height: 36px;
    border: none;
    outline: none;
    background: #fff;
    text-align: center;
    font-size: 14px;
    flex: 0 0 auto;
  }
  /* sin flechas number */
  .product-card .card-cartbar .step-input::-webkit-outer-spin-button,
  .product-card .card-cartbar .step-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .product-card .card-cartbar .step-input {
    -moz-appearance: textfield;
    appearance: textfield;
  }
  .product-card .card-cartbar .chip-5 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 13px;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  /* 5) Subtotal — fila 1 columna der, alineado al final (cerca del centro vert) */
  .product-card .card-cartbar > .cartbar-top,
  .product-card .card-cartbar > .cartbar-mid {
    grid-area: subtotal;
    justify-self: start;
    align-self: end;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
    line-height: 1.1;
    text-align: left;
    margin: 0;
    min-width: 0;
  }
  .product-card .card-cartbar .cartbar-subtotal {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
    font-size: 18px;
  }
  .product-card .card-cartbar .cartbar-subv {
    font-size: 20px;
    font-weight: 900;
    color: #111;
  }
  .product-card .card-cartbar .cartbar-iva {
    font-size: 11px;
    color: #888;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  /* 6) Quitar — fila propia abajo, centrado */
  .product-card .card-cartbar > .remove-compact,
  .product-card .card-cartbar > button.remove-compact,
  .product-card .card-cartbar > button.remove-btn.remove-compact {
    grid-area: remove;
    justify-self: center;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 14px;
    border-radius: 10px;
    white-space: nowrap;
    max-width: 100%;
    font-size: 12px;
  }
  /* 7) Unidades — fila 2 columna der, alineado al inicio (cerca del centro vert) */
  .product-card .card-cartbar > .cartbar-units {
    grid-area: units;
    font-size: 12px;
    color: #555;
    text-align: left;
    margin: 0;
    white-space: nowrap;
    justify-self: start;
    align-self: start;
    font-weight: 600;
  }
  /* 8) Desktop angosto: oculto +5 antes de que se rompa todo */
  @media (max-width: 1220px) {
    .product-card .card-cartbar .chip-5 {
      display: none;
    }
  }
}
/* ========================================================= DESKTOP PATCH — Card header + botón Quitar adentro Pegar AL FINAL del styles.css ========================================================= */
@media (min-width: 1025px) {
  /* ---------- 1) Quitar SIEMPRE dentro de la card ---------- */
  /* Ancla para que nada “salte” afuera */
  .product-card {
    position: relative;
    overflow: hidden;
    /* si algo se iba afuera, lo recorta dentro */
  }
  /* Si el botón "Quitar" quedó con position/transform por CSS viejo, lo neutralizo */
  .product-card .remove-compact,
  .product-card button.remove-compact,
  .product-card button.remove-btn.remove-compact {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    max-width: 100%;
    white-space: nowrap;
  }
  /* Si tu cartbar usa grid (como te dejé), lo encajo en el área "remove" */
  .product-card .card-cartbar > .remove-compact,
  .product-card .card-cartbar > button.remove-compact,
  .product-card .card-cartbar > button.remove-btn.remove-compact {
    grid-area: remove !important;
    justify-self: end !important;
    align-self: center !important;
  }
  /* ---------- 2) Cod + UxB en la misma línea ---------- */
  .product-card .card-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 14px;
    flex-wrap: nowrap;
    /* no se apilan */
  }
  /* ---------- 3) Cod más grande y bold ---------- */
  .product-card .card-cod {
    font-weight: 700;
    font-size: 20px;
    /* ajustable */
    line-height: 1.1;
    white-space: nowrap;
  }
  .product-card .card-cod span {
    font-weight: 700;
  }
  /* ---------- 4) Número de UxB en bold ---------- */
  .product-card .card-uxb {
    font-size: 16px;
    color: #333;
    white-space: nowrap;
  }
  .product-card .card-uxb span {
    font-weight: 900;
    /* solo el número */
  }
}
/* Bloque viejo "DESKTOP AJUSTE — sin botón Quitar + label Cajas" REMOVIDO.
   Conflictaba con el layout actual del cartbar (pisaba el ::before Cajas
   con position:absolute top/left:0 lo que dejaba CAJAS pegado a la izq,
   y ocultaba el botón Quitar). El layout actual está en el bloque
   @media (min-width: 1025px) más arriba (~1923). */
@media (min-width: 1025px) {
  #productsContainer .product-card img {
    max-height: 250px !important;
    max-width: 100% !important;
    object-fit: contain !important;
    height: auto !important;
    width: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }
}
/* ========================================================= ESPACIADO VERTICAL ENTRE BLOQUES DE TEXTO DE LA CARD Cod/UxB → Descripción → Precio Lista → Tu Precio ========================================================= */
/* Contenedor superior de info */
.product-card .card-top {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* 🔹 espacio general entre renglones */
}
/* Fila Cod + UxB */
.product-card .card-row {
  margin-bottom: 2px;
}
/* Descripción — siempre reserva el alto de 2 líneas para que el precio y
   el botón queden en la misma posición vertical en TODAS las cards,
   independientemente de si la descripción ocupa 1 o 2 líneas. */
.product-card .card-desc {
  margin: 4px 0;
  line-height: 1.25;
  min-height: calc(1.25em * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Bloque de precios */
.product-card .card-prices {
  margin-top: 4px;
  margin-bottom: 18px; /* aire generoso entre precios y botón "Agregar al pedido" */
  gap: 4px;
  /* espacio entre Precio Lista y Tu Precio */
}
/* Cada línea de precio */
.product-card .card-price-line {
  margin: 2px 0;
}

/* ========================= DESKTOP SORT BUTTONS ========================= */
.desktop-sort-buttons {
  display: none;
}

@media (min-width: 901px) {
  /* En desktop: oculto el select y muestro botones */
  .sort-row .sort-wrap {
    display: none !important;
  }

  .desktop-sort-buttons {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
  }

  .desktop-sort-buttons .ds-btn {
    height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
  }

  .desktop-sort-buttons .ds-btn:hover {
    background: #f5f5f5;
  }

  .desktop-sort-buttons .ds-btn.active {
    border-color: #111;
    background: #111;
    color: #fff;
    font-weight: 800;
  }
}

/* ========================= PAGO 2 FILAS + 1 ========================= */
.pay-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
}

/* Las primeras 6 opciones ocupan automáticamente
   2 filas (3 columnas x 2 filas) */

.pay-grid .pay-later {
  grid-column: 1 / -1; /* tercera fila completa */
}

/* Las primeras 6 opciones ocupan automáticamente
   2 filas (3 columnas x 2 filas) */

.pay-grid .pay-later {
  grid-column: 1 / -1; /* tercera fila completa */
}

/* En pantallas más chicas, que baje a 2 columnas */
@media (max-width: 901px) {
  .pay-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pay-grid .pay-later {
    grid-column: 1 / -1;
  }
}

/* Ya no existe columna izquierda */
.pay-column {
  display: none !important;
}

/* El select sigue oculto (tu regla actual sirve); la reforzamos */
#paymentSelect {
  position: absolute;
  left: -99999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* ========================= PAGO: 6 ARRIBA + 1 ABAJO (DESKTOP) ========================= */
@media (min-width: 901px) {
  .pay-grid {
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: repeat(
      6,
      minmax(0, 1fr)
    ) !important; /* 6 en una fila */
    align-items: stretch;
  }

  /* “Prefiero decidir después” en segunda fila full width */
  .pay-grid .pay-later {
    grid-column: 1 / -1 !important;
  }

  /* Para que entren cómodos 6 botones en desktop */
  .pay-grid .pay-btn {
    padding: 8px 8px !important;
  }
  .pay-grid .pay-name {
    font-size: 12px !important;
  }
  .pay-grid .pay-off {
    font-size: 11px !important;
  }
}

/* Mobile sigue como estaba (2 columnas) */
@media (max-width: 900px) {
  .pay-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .pay-grid .pay-later {
    grid-column: 1 / -1 !important;
  }
}

.profile-wrap {
  padding: 0 40px 40px;
  display: grid;
  gap: 14px;
  max-width: 980px;
  margin: 0 auto;
}

.profile-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 14px;
}

.profile-card-title {
  font-weight: 800;
  margin-bottom: 10px;
}

.profile-box {
  font-size: 14px;
  color: #333;
}

.profile-btn {
  margin-top: 12px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid #111;
  background: #111;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  padding: 0 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.profile-btn.danger {
  background: #b00020;
  border-color: #b00020;
}

.profile-form {
  display: grid;
  gap: 10px;
}

.profile-form input {
  height: 44px;
  border-radius: 10px;
  border: 1px solid #ddd;
  padding: 0 12px;
  outline: none;
  font-family: inherit;
  font-size: 14px;
  background: #fff;
  color: #111;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.profile-form input:focus,
.profile-form textarea:focus {
  border-color: #111;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.profile-form textarea {
  min-height: 84px;
  border-radius: 10px;
  border: 1px solid #ddd;
  padding: 10px 12px;
  outline: none;
  resize: vertical;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  background: #fff;
  color: #111;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.profile-form textarea::placeholder,
.profile-form input::placeholder {
  color: #999;
}

.profile-form label {
  font-size: 13px;
  font-weight: 700;
  color: #444;
  margin-bottom: -4px;
}

.profile-status {
  margin-top: 10px;
  font-size: 13px;
  color: #444;
}

/* ===== DESKTOP SORT BUTTONS ===== */
.desktop-sort-buttons {
  display: none;
  gap: 10px;
  align-items: center;
}

.ds-btn {
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
}

.ds-btn:hover {
  background: #f5f5f5;
}
.ds-btn.active {
  border-color: #111;
  background: #111;
  color: #fff;
  font-weight: 700;
}

@media (min-width: 901px) {
  .desktop-sort-buttons {
    display: inline-flex;
  }
  /* opcional: ocultar el select en desktop si querés que queden SOLO botones */
  .sort-row .sort-wrap {
    display: none;
  }
}

/* Método de pago debajo de Dirección */
.pay-row {
  margin-top: 14px;
}

.pay-row .pay-card {
  width: 100%;
}

/* El carrito también a ancho completo */
.cart-column {
  margin-top: 14px;
}

.payment-buttons.payment-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.pay-btn-full {
  width: 100%;
  margin-top: 10px;
}

#paymentSelect {
  display: none; /* lo ocultamos, lo usamos como “valor real” */
}

/* si en pantallas chicas no entran 6, bajan a 3x2 */
@media (max-width: 900px) {
  .payment-buttons.payment-6 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Carrito en una sola columna (evita que "pago" quede al costado) */
.cart-layout.cart-layout-single {
  display: block !important;
}

/* ===============================
   CHECKOUT: 1 columna centrada
   =============================== */

/* Evita que el layout viejo arme sidebar aunque exista */
#carrito .cart-layout {
  grid-template-columns: 1fr !important;
}
#carrito .cart-layout .pay-column {
  display: none !important;
}

/* Entrega y Pago: mismo ancho y centrados */
#carrito .ship-row {
  max-width: 760px;
  margin: 0 auto 14px;
}
#carrito .ship-card {
  width: 100%;
}

/* Carrito (lista de items) centrado y mismo ancho */
#carrito .cart-layout-single {
  max-width: 760px;
  margin: 0 auto;
  display: block !important;
}

/* ===============================
   Pago: 6 botones iguales en 1 fila
   =============================== */
#carrito .payment-buttons.payment-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

#carrito .payment-buttons.payment-6 .pay-btn {
  width: 100%;
  padding: 10px 8px;
  border-radius: 12px;
}

/* Botón “prefiero no decidir ahora” ancho completo */
#carrito .pay-btn-full {
  width: 100%;
  margin-top: 10px;
  border-radius: 12px;
}

/* Ocultar el select (pero queda para JS) */
#carrito #paymentSelect {
  display: none !important;
}

/* =========================================================
   CHECKOUT (#carrito): Pago debajo de Dirección (NO sidebar)
   PEGAR AL FINAL DEL CSS
   ========================================================= */

#carrito .pay-card {
  /* pisa el sidebar fijo */
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  max-height: none !important;
  overflow: visible !important;

  /* mismo look/ancho que ship-card */
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
}

/* Contenedor (Dirección y Pago) centrado y mismo ancho */
#carrito .ship-row {
  padding: 0 40px;
  margin: 0 auto 14px !important;
  display: flex;
  justify-content: center;
}

#carrito .ship-card {
  width: min(780px, 100%) !important;
}

/* Pago: 6 botones en 1 fila (desktop), 3x2 (mobile) */
#carrito .payment-buttons.payment-6 {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

@media (max-width: 900px) {
  #carrito .payment-buttons.payment-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Botón "Prefiero no decidir ahora" a lo ancho */
#carrito .pay-btn-full {
  width: 100% !important;
  margin-top: 10px !important;
}

/* Ocultar select real (queda para el JS) */
#carrito #paymentSelect {
  position: absolute !important;
  left: -99999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

.pay-btn.selected,
#payLaterBtn.selected {
  outline: 2px solid #111;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.submit-order.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* =========================
   CARRITO / PAGO NUNCA TAPAN EL NAV
   ========================= */
#carrito,
.ship-row,
.ship-card,
.pay-card,
.payment-buttons,
.payment-buttons * {
  position: relative;
  z-index: 1;
}

/* Si tenés algún overlay (filtros), que sí pueda tapar el nav: */
.filters-overlay {
  z-index: 10000; /* o 20000 si querés estar seguro */
}

/* =========================
   PERFIL (nuevo layout)
   ========================= */

.profile-summary {
  max-width: 760px; /* mismo espíritu que el carrito */
  margin: 0 auto 18px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: #fff;
}

.profile-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.profile-row:last-child {
  border-bottom: none;
}

.pf-pass {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.profile-card.wide {
  max-width: 760px; /* alineado al carrito */
  margin: 0 auto 16px;
}

.profile-card-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.profile-btn.subtle {
  background: #f4f4f4;
  color: #111;
  border: 1px solid var(--border);
}

.profile-bottom {
  max-width: 760px;
  margin: 18px auto 0;
  display: flex;
  justify-content: center;
}

.profile-btn.big {
  padding: 14px 18px;
  width: min(520px, 100%);
}

/* Modal (cambiar contraseña) */
.modal.hidden {
  display: none;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.modal-card {
  position: relative;
  max-width: 520px;
  margin: 10vh auto;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  padding: 16px;
}

.modal-title {
  font-weight: 700;
  margin-bottom: 10px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

/* Mobile */
@media (max-width: 720px) {
  .profile-row {
    grid-template-columns: 1fr;
  }
  .pf-pass {
    flex-direction: column;
    align-items: flex-start;
  }
  .profile-card.wide,
  .profile-summary,
  .profile-bottom {
    max-width: 100%;
  }
}

.section-header {
  position: relative;
  margin-bottom: 16px;
}

/* =========================
   ESPACIADO PERFIL / CARRITO
   ========================= */

/* más espacio debajo del header */
.section-header {
  margin-bottom: 28px;
}

/* espacio entre bloques principales */
.profile-summary,
.profile-card.wide,
.profile-bottom {
  margin-bottom: 28px;
}

/* más padding interno en cards */
.profile-card {
  padding: 18px;
}

/* más aire dentro del resumen */
.profile-summary {
  padding: 20px;
}

/* espacio entre filas de datos */
.profile-row {
  padding: 12px 0;
}

/* carrito: aire debajo del header también */
#carrito .section-header {
  margin-bottom: 28px;
}

.order-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.order-row:last-child {
  border-bottom: none;
}

.order-date {
  font-weight: 600;
}

.order-total {
  color: var(--muted);
  font-size: 14px;
}

.profile-btn.small {
  padding: 6px 10px;
  font-size: 13px;
}

.order-row {
  display: grid;
  /* columna de acción con ancho fijo: así el precio (columna central)
     queda en la MISMA posición en pedidos editables y no editables */
  grid-template-columns: 1fr 1fr 340px;
  align-items: center;
  padding: 18px 20px;
  margin-bottom: 14px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  gap: 10px;
}

/* En pantallas angostas volvemos a ancho flexible para no desbordar */
@media (max-width: 768px) {
  .order-row {
    grid-template-columns: 1fr 1fr auto;
  }
}

/* Tracking stepper (puntitos de estado) dentro del Historial de Pedidos Web */
.order-tracking {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px dashed #ececec;
  flex-wrap: wrap;
  font-size: 14px;
}
.o-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.o-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e5e5e5;
  border: 2px solid #cfcfcf;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.o-dot.done {
  background: #111;
  border-color: #111;
}
.o-dot.current {
  transform: scale(1.25);
  box-shadow: 0 0 0 4px rgba(17, 17, 17, 0.08);
}
.o-line {
  width: 28px;
  height: 2px;
  background: #e5e5e5;
  flex-shrink: 0;
}
.o-line.done {
  background: #111;
}
.o-stage-label {
  font-weight: 600;
  color: #111;
}
.o-stage-0 {
  color: #888;
}
.o-stage-1 {
  color: #b07d00;
}
.o-stage-2 {
  color: #2e7d32;
}
.o-stage-sub {
  color: #666;
  font-size: 13px;
}
@media (max-width: 768px) {
  .o-line {
    width: 18px;
  }
  .order-tracking {
    font-size: 13px;
    gap: 8px;
  }
}

.order-col {
  display: flex;
  align-items: center;
  font-size: 16px;
}

.order-date {
  font-weight: 600;
}

.order-total {
  justify-content: center;
  font-weight: 600;
  font-size: 17px;
  white-space: nowrap;
}

.order-action {
  justify-content: flex-end;
}

.profile-btn.small {
  padding: 8px 14px;
  font-size: 14px;
}

.order-total {
  color: #111;
}

/* Más aire arriba en Perfil y Carrito */
#perfil,
#carrito {
  padding-top: 40px;
}

.iva-tag {
  font-size: 12px;
  font-weight: 700;
  color: #666;
  margin-left: 6px;
  white-space: nowrap;
}

/* =========================
   BLOQUE COMING SOON PREMIUM
   ========================= */

.profile-coming {
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  border: 1px solid #e8e8e8;
}

.coming-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  background: #111;
  color: #fff;
  padding: 4px 8px;
  border-radius: 12px;
  margin-left: 10px;
  letter-spacing: 0.5px;
}

.coming-content {
  text-align: center;
  padding: 36px 20px 40px;
  color: #666;
}

.coming-icon {
  font-size: 34px;
  margin-bottom: 12px;
  opacity: 0.8;
}

.coming-text {
  max-width: 480px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.5;
}

/* =========================
   NAV CATEGORÍAS (Mega menu)
   ========================= */

.dropdown-wrap {
  position: relative; /* necesario para posicionar el menú */
}

#categoriesMenu.dropdown-menu {
  position: absolute;
  left: 50%;
  translate: -50% 0; /* ✅ centra sin usar transform */
  top: calc(100% + 10px);
  width: min(980px, 90vw);
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
  padding: 18px 18px;
  z-index: 9999;
}

/* Si tu menú se llena con labels/checkboxes, los convertimos en grilla */
#categoriesMenu.dropdown-menu {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px 22px;
}

/* Item genérico: label, div o a dentro del menú */
#categoriesMenu.dropdown-menu label,
#categoriesMenu.dropdown-menu a,
#categoriesMenu.dropdown-menu .cat-item,
#categoriesMenu.dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.2;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
  user-select: none;
}

/* Hover lindo */
#categoriesMenu.dropdown-menu label:hover,
#categoriesMenu.dropdown-menu a:hover,
#categoriesMenu.dropdown-menu .cat-item:hover,
#categoriesMenu.dropdown-menu .dropdown-item:hover {
  background: #f6f6f6;
  transform: translateX(3px);
}

/* Checkbox prolijo */
#categoriesMenu.dropdown-menu input[type="checkbox"] {
  accent-color: #111;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* Responsive */
@media (max-width: 1100px) {
  #categoriesMenu.dropdown-menu {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(780px, 92vw);
  }
}
@media (max-width: 720px) {
  #categoriesMenu.dropdown-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(520px, 94vw);
    padding: 14px;
  }
}

/* =========================
   DROPDOWN CATEGORÍAS (MEGA)
   ========================= */

.dropdown-wrap {
  position: relative;
}

#categoriesMenu.dropdown-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  width: min(980px, 92vw);
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
  padding: 16px 16px 18px;
  z-index: 9999;
}

/* Separador */
#categoriesMenu .dd-sep {
  height: 1px;
  background: #eee;
  margin: 12px 0 14px;
}

/* Toggle "Todos los artículos" */
#categoriesMenu .dd-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f6f6f6;
  border: 1px solid #ededed;
  font-weight: 700;
}

/* ✅ La grilla real de categorías */
#categoriesMenu .dd-cats-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px 18px; /* más espacio entre palabras */
}

/* Cada chip */
#categoriesMenu label.dd-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #eee;
  background: #fff;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.15s ease,
    border-color 0.15s ease;
  user-select: none;
}

#categoriesMenu label.dd-chip:hover {
  background: #f6f6f6;
  border-color: #e3e3e3;
  transform: translateY(-1px);
}

#categoriesMenu label.dd-chip span {
  font-size: 14px;
  line-height: 1.2;
}

/* Checkbox prolijo */
#categoriesMenu label.dd-chip input[type="checkbox"] {
  accent-color: #111;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* Responsive */
@media (max-width: 1100px) {
  #categoriesMenu.dropdown-menu {
    width: min(820px, 94vw);
  }
  #categoriesMenu .dd-cats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  #categoriesMenu.dropdown-menu {
    width: min(520px, 96vw);
    padding: 12px;
  }
  #categoriesMenu .dd-cats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
  }
}

/* FIX: evitar chips encimados en categorías */
#categoriesMenu .dd-cats-grid {
  display: grid !important;
  grid-template-columns: repeat(
    5,
    minmax(160px, 1fr)
  ) !important; /* ancho mínimo real */
  gap: 12px 18px !important;
  align-items: stretch !important;
}

#categoriesMenu label.dd-chip {
  position: static !important;
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  white-space: normal !important; /* permite salto de línea */
  overflow: hidden !important;
}

#categoriesMenu label.dd-chip span {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important; /* evita montado */
  line-height: 1.2 !important;
}

#categoriesMenu label.dd-chip input[type="checkbox"] {
  flex: 0 0 auto !important;
  margin-left: 10px !important;
}

/* Responsive */
@media (max-width: 1100px) {
  #categoriesMenu .dd-cats-grid {
    grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
  }
}
@media (max-width: 720px) {
  #categoriesMenu .dd-cats-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr)) !important;
  }
}

#categoriesMenu {
  display: none;
}

#categoriesMenu.open {
  display: block;
}

/* CATEGORÍAS: abrir/cerrar robusto (sin display:none) */
#categoriesMenu.dropdown-menu {
  display: block !important; /* siempre en el flujo del layout */
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(6px) !important;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    visibility 0.15s ease;
}

#categoriesMenu.dropdown-menu.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* =========================
   USER TRIGGER (Hola + avatar + flecha)
   ========================= */

.user-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  background: rgba(0, 0, 0, 0.06); /* un poco más oscuro que el nav */
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  padding: 8px 12px;

  cursor: pointer;
  user-select: none;
  transition:
    background 0.15s ease,
    transform 0.15s ease,
    border-color 0.15s ease;
}

.user-trigger:hover {
  background: rgba(0, 0, 0, 0.09);
  border-color: rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

.user-trigger .profile-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
}

.user-trigger-text {
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

.user-trigger-chev {
  font-size: 12px;
  opacity: 0.7;
}

.user-menu.open + .user-trigger-chev {
  opacity: 1;
} /* opcional */

/* Botón combinado usuario (Hola + avatar + flecha) */
.user-toggle-btn {
  display: flex;
  align-items: center;
  gap: 10px;

  background: #111; /* oscuro */
  color: #fff; /* letras blancas */
  border: 1px solid #000;
  padding: 8px 14px;
  border-radius: 999px;

  cursor: pointer;
  user-select: none;
  transition: all 0.18s ease;
}

.user-toggle-btn:hover {
  background: #222; /* leve aclarado al hover */
  transform: translateY(-1px);
}

.user-toggle-text {
  font-weight: 800;
  font-size: 17px; /* +30% sobre 13 */
  line-height: 1;
  white-space: nowrap;
  color: #fff;
  /* Trunca razón social larga con … para no tapar el carrito */
  display: inline-block;
  vertical-align: middle;
  min-width: 0;
  max-width: clamp(80px, 22vw, 280px);
  overflow: hidden;
  text-overflow: ellipsis;
}
/* En anchos intermedios (1025-1280) el header está apretado: achicar más
   el texto del usuario para que no se monte sobre el CTA del carrito. */
@media (max-width: 1280px) {
  .user-toggle-text {
    font-size: 14px;
    max-width: clamp(70px, 14vw, 160px);
  }
  .user-toggle-btn {
    padding: 6px 10px;
    gap: 6px;
  }
  .user-toggle-btn .profile-avatar {
    width: 22px;
    height: 22px;
  }
}
.user-box {
  min-width: 0;
  max-width: 100%;
}
.user-toggle-btn {
  min-width: 0;
  max-width: 100%;
}

.user-toggle-caret {
  font-size: 12px;
  opacity: 0.9;
  color: #fff;
}

.user-toggle-btn .profile-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.4); /* aro blanco elegante */
}

/* =========================
   USER MENU: show/hide real
   ========================= */

#userMenu.user-menu {
  position: absolute; /* desktop */
  top: calc(100% + 10px);
  right: 0;

  min-width: 220px;
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
  padding: 8px;

  /* cerrado por defecto */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    visibility 0.15s ease;
  z-index: 9999;
}

/* abierto */
#userMenu.user-menu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* items */
#userMenu .user-menu-item {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 10px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
}

#userMenu .user-menu-item:hover {
  background: #f6f6f6;
}

/* mobile override (tu regla) */
@media (max-width: 720px) {
  #userMenu.user-menu {
    right: 12px !important;
    top: 74px !important;
  }
}

/* =========================
   PERFIL - NUEVA DISPOSICIÓN
   ========================= */

/* =========================
   PERFIL - CENTRADO PROLIJO
   ========================= */

.profile-summary {
  padding: 34px 28px;
  margin-bottom: 30px;
  text-align: center;
}

.profile-ra {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 24px;
}

.profile-row.two {
  display: flex;
  justify-content: center;
  gap: 28px; /* separación prudente */
  margin-bottom: 14px;
  font-size: 14px;
}

.profile-row.two div {
  display: flex;
  gap: 6px;
  align-items: center;
}

.profile-pass-wrap {
  margin-top: 22px;
}

/* Botón filtro NUEVOS (desktop) */
.ds-btn.ds-filter {
  /* Sin margin-left extra — el parent .desktop-sort-buttons ya aplica gap:10px
     uniforme entre todos los buttons. El margin-left antes hacía que el
     gap entre Mi surtido y Nuevos fuera 20px en vez de 10px como el resto. */
  border: 1px solid #e2e2e2;
  background: #fff;
}

.ds-btn.ds-filter.on {
  background: #111;
  color: #fff;
  border-color: #111;
}

/* ===== PASS MODAL (perfil) ===== */
.modal .modal-backdrop {
  position: absolute;
  inset: 0;
}

.modal .modal-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #eee;
  z-index: 1;
  padding: 18px;
}

.modal .modal-title {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 12px;
}

.modal .modal-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* =========================
   ANIMACIÓN "VOLAR AL CARRITO"
   ========================= */
.fly-to-cart {
  position: fixed;
  z-index: 30000;
  pointer-events: none;
  will-change: transform, opacity;
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
  transition:
    transform 650ms cubic-bezier(0.2, 0.9, 0.2, 1),
    opacity 650ms ease;
}

/* =========================
   ANIMACIONES ADD-TO-CART
   (bump card + pop qty + shake cart icon)
   ========================= */
@keyframes lk-bump {
  0%   { transform: scale(1); box-shadow: none; }
  30%  { transform: scale(1.04); box-shadow: 0 10px 28px rgba(22, 163, 74, 0.22); }
  60%  { transform: scale(0.985); }
  100% { transform: scale(1); box-shadow: none; }
}
@keyframes lk-qty-pop {
  0%   { transform: scale(1);    color: inherit; }
  45%  { transform: scale(1.35); color: #16a34a; }
  100% { transform: scale(1);    color: inherit; }
}
@keyframes lk-cart-shake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  20%      { transform: translate(-2px, -3px) rotate(-7deg); }
  40%      { transform: translate(3px,  -1px) rotate(6deg); }
  60%      { transform: translate(-2px, 1px)  rotate(-4deg); }
  80%      { transform: translate(2px,  0)    rotate(2deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .product-card.lk-bump  { animation: lk-bump 360ms ease-out; }
  .step-input.lk-pop     { animation: lk-qty-pop 300ms ease-out; }
  .lk-cart-shake         { animation: lk-cart-shake 460ms ease-in-out; transform-origin: center; }
}

/* Entrance stagger: cards aparecen con fade + slide-up.
   Solo activa cuando la grilla tiene .lk-animate-in (lo agrega JS en primer render). */
@keyframes lk-card-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .products-grid.lk-animate-in .product-card {
    animation: lk-card-in 420ms ease-out both;
  }
  /* Delays escalonados; capeo a ~600ms para no demorar las últimas */
  .products-grid.lk-animate-in .product-card:nth-child(1)  { animation-delay: 0ms; }
  .products-grid.lk-animate-in .product-card:nth-child(2)  { animation-delay: 40ms; }
  .products-grid.lk-animate-in .product-card:nth-child(3)  { animation-delay: 80ms; }
  .products-grid.lk-animate-in .product-card:nth-child(4)  { animation-delay: 120ms; }
  .products-grid.lk-animate-in .product-card:nth-child(5)  { animation-delay: 160ms; }
  .products-grid.lk-animate-in .product-card:nth-child(6)  { animation-delay: 200ms; }
  .products-grid.lk-animate-in .product-card:nth-child(7)  { animation-delay: 240ms; }
  .products-grid.lk-animate-in .product-card:nth-child(8)  { animation-delay: 280ms; }
  .products-grid.lk-animate-in .product-card:nth-child(9)  { animation-delay: 320ms; }
  .products-grid.lk-animate-in .product-card:nth-child(10) { animation-delay: 360ms; }
  .products-grid.lk-animate-in .product-card:nth-child(11) { animation-delay: 400ms; }
  .products-grid.lk-animate-in .product-card:nth-child(12) { animation-delay: 440ms; }
  .products-grid.lk-animate-in .product-card:nth-child(13) { animation-delay: 480ms; }
  .products-grid.lk-animate-in .product-card:nth-child(14) { animation-delay: 520ms; }
  .products-grid.lk-animate-in .product-card:nth-child(15) { animation-delay: 560ms; }
  .products-grid.lk-animate-in .product-card:nth-child(n+16) { animation-delay: 600ms; }
}

/* =========================
   TOAST "VER PEDIDO"
   ========================= */
.view-order-toast {
  position: fixed;
  right: 14px;
  z-index: 35000;
  display: none;
}

.view-order-toast.show {
  display: block;
}

.view-order-btn {
  height: 54px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid #b10000;
  background: #e60000;
  color: #fff;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.35),
    0 18px 50px rgba(0, 0, 0, 0.22);
  animation: toastPop 0.18s ease-out;
}

.view-order-btn:hover {
  transform: translateY(-1px) scale(1.01);
}
.view-order-btn:active {
  transform: translateY(0) scale(0.99);
}

@keyframes toastPop {
  from {
    transform: translateY(-6px) scale(0.98);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Zoom 1.2 al carrito y perfil en desktop (≥1024px) */
@media (min-width: 1024px) {
  #carrito,
  #perfil {
    --cart-scale: 1.2;
    font-size: calc(1rem * var(--cart-scale));
  }
}

@media (min-width: 1024px) {
  #carrito,
  #perfil {
    zoom: 1.2;
  }
}

#btnFilterNew {
  font-weight: 800;
  font-size: medium;
  border-width: 3px;
  border-color: #e60000;
  background: #ffe5e5 !important;
  color: #e60000;
}
#btnFilterNew:hover {
  background: #ffd0d0 !important;
}
#btnFilterNew.on {
  background: #e60000 !important;
  color: #fff !important;
  border-color: #e60000 !important;
}

.profile-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ================= FOOTER / CONTACTO ================= */

/* ================================
   FOOTER
================================ */

.main-footer {
  background: #35546f;
  color: #fff;
  padding: 50px 0;
  margin-top: 64px;
}

/* Container interno con aire lateral */
.main-footer .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px; /* 👈 espacio lateral */
}

/* Grid principal */
.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

/* Marca */
.footer-brand {
  max-width: 420px;
}

.footer-logo {
  width: 180px;
  margin-bottom: 15px;
}

.footer-brand p {
  color: #ccc;
  font-size: 14px;
  line-height: 1.6;
}

/* Contacto */
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.footer-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: #fff;
}

.footer-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.9;
}

/* Footer inferior */
.footer-bottom {
  margin-top: 35px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
  color: #aaa;
}

.footer-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-links {
  display: flex;
  gap: 14px;
}

.footer-link {
  color: #ddd;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  padding-bottom: 2px;
  transition: 0.2s ease;
}

.footer-link:hover {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.55);
}

/* Responsive */
@media (max-width: 900px) {
  .footer-grid {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }

  .footer-bottom-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* =========================
   PERFIL - TAMAÑOS MÁS GRANDES
   (PEGAR AL FINAL DEL styles.css)
   ========================= */

#perfil .section-header .section-title {
  font-size: 30px;
  font-weight: 900;
  line-height: 1.15;
}

#perfil .profile-ra {
  font-size: 28px;
  font-weight: 900;
  line-height: 1.2;
}

#perfil .profile-row.two {
  font-size: 18px; /* antes 14px */
  line-height: 1.35;
  gap: 34px; /* un poco más de aire entre columnas */
}

#perfil .profile-row.two b {
  font-weight: 900;
}

/* Mobile: grande pero que entre bien */
@media (max-width: 720px) {
  #perfil .section-header .section-title {
    font-size: 26px;
  }
  #perfil .profile-ra {
    font-size: 22px;
  }
  #perfil .profile-row.two {
    font-size: 16px;
    flex-direction: column; /* evita que quede apretado */
    gap: 10px;
  }
}

/* =========================================
   PERFIL — MODERNO PERO COHERENTE CON LA WEB
   (pegalo al FINAL del styles.css)
   ========================================= */

#perfil .section-header .section-title {
  font-size: 30px !important;
  font-weight: 800 !important;
  margin: 0 !important;
}

/* Card blanca, sutil, premium */
#perfil .profile-summary {
  position: relative !important;
  background: #fff !important;
  border: 1px solid #e7e7ea !important;
  border-radius: 14px !important;
  padding: 18px !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06) !important;
  overflow: hidden !important;
}

/* acento mínimo arriba (sin despegarse del sitio) */
#perfil .profile-summary::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.06),
    rgba(0, 0, 0, 0.02)
  ) !important;
}

/* Razón social / nombre */
#perfil .profile-ra {
  font-size: 25px !important;
  font-weight: 800 !important;
  margin: 4px 0 14px 0 !important;
  color: #111 !important;
}

/* Layout de datos: prolijo */
#perfil .profile-row.two {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px 12px !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
}

/* Items: blanco/grey muy suave (sin “glass”) */
#perfil .profile-row.two p {
  margin: 0 !important;
  padding: 12px 12px !important;
  border-radius: 12px !important;
  background: #fafafa !important;
  border: 1px solid #ededf0 !important;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease !important;
}

/* Etiqueta */
#perfil .profile-row.two p b {
  display: block !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #666 !important;
  margin-bottom: 4px !important;
}

/* Hover leve (solo un toque) */
#perfil .profile-row.two p:hover {
  border-color: #dcdce1 !important;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.06) !important;
}

/* Mobile */
@media (max-width: 720px) {
  #perfil .section-header .section-title {
    font-size: 20px !important;
  }
  #perfil .profile-ra {
    font-size: 17px !important;
  }
  #perfil .profile-row.two {
    grid-template-columns: 1fr !important;
  }
}

/* =========================
   HEADER CARRITO
   ========================= */

.section-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
  min-height: 56px;
}

/* Botón volver */
.section-header .back-btn {
  left: 16px;
  background: #f5f5f5;
  border: 1px solid #e2e2e2;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Hover */
.section-header .back-btn:hover {
  background: #111;
  color: #fff;
  border-color: #111;
}

/* Título centrado real */
.section-header .section-title {
  margin: 0;
  font-size: 25px;
  font-weight: 600;
}

/* ================= OVERLAY ================= */

.filters-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: none;
  justify-content: center;
  align-items: flex-end;
  z-index: 999;
}

.filters-overlay.open {
  display: flex;
}

.filters-panel {
  width: 100%;
  max-height: 85%;
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 20px;
  overflow-y: auto;
}

.filters-grid {
  display: grid;
  gap: 10px;
  margin-top: 15px;
}

.mf-btn {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #f7f7f7;
}

.mf-btn.on {
  background: #111;
  color: #fff;
}

.filters-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.filters-btn {
  flex: 1;
  padding: 12px;
  border-radius: 8px;
  border: none;
}

.filters-btn.cancel {
  background: #eee;
}

.filters-btn.apply {
  background: #111;
  color: #fff;
}

/* ===== MOBILE PRODUCTS BAR (PRO) ===== */
.mobile-products-bar {
  display: none;
}

@media (max-width: 900px) {
  .mobile-products-bar {
    display: grid;
    /* Buscador (ancho) + Filtros (derecha) en una sola fila */
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 60;
    border-bottom: 1px solid #eee;
  }

  .mpb-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e6e6e6;
    background: #fafafa;
    border-radius: 14px;
    padding: 0 12px;
    height: 44px;
    min-width: 0;
  }

  .mpb-ico {
    color: #666;
    display: flex;
  }
  .mpb-input {
    width: 100%;
    height: 42px;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 14px;
    min-width: 0;
  }

  .mpb-actions {
    display: grid;
    grid-template-columns: auto;
    gap: 10px;
  }

  .mpb-btn,
  .mpb-select {
    height: 44px;
    border-radius: 14px;
    border: 1px solid #e6e6e6;
    background: #fff;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 10px;
    min-width: 0;
  }

  .mpb-btn-ico {
    display: flex;
    color: #111;
  }

  .mpb-sort {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e6e6e6;
    border-radius: 14px;
    padding: 0 10px;
    background: #fff;
    height: 44px;
  }
  .mpb-select {
    border: 0;
    background: transparent;
    padding: 0;
    height: 42px;
    width: 100%;
    font-weight: 700;
    outline: none;
  }
}

/* ===== FILTERS OVERLAY ===== */
.filters-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: none;
  z-index: 9999;
}

.filters-overlay.open {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.filters-panel {
  width: 100%;
  max-height: 86vh;
  background: #fff;
  border-radius: 18px 18px 0 0;
  padding: 14px 14px 16px;
  overflow: auto;
}

.filters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.filters-title {
  font-size: 18px;
  font-weight: 900;
}

.filters-x {
  height: 40px;
  width: 40px;
  border-radius: 12px;
  border: 1px solid #eee;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.filters-grid {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.mf-btn {
  width: 100%;
  text-align: left;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid #e6e6e6;
  background: #fafafa;
  font-weight: 600;
  cursor: pointer;
}

.mf-btn.on {
  background: #111;
  border-color: #111;
  color: #fff;
}

.mf-btn2 {
  width: 100%;
  text-align: left;
  padding: 12px 12px;
  border-radius: 14px;
  border: 2px solid #ff0000;
  background: #fafafa;
  font-weight: 800;
  cursor: pointer;
}

.mf-btn2.on {
  background: #ff0000;
  border-color: #ff0000;
  color: #fff;
}

.filters-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.filters-btn {
  flex: 1;
  height: 44px;
  border-radius: 14px;
  border: 0;
  font-weight: 900;
  cursor: pointer;
}

.filters-btn.cancel {
  background: #efefef;
}
.filters-btn.apply {
  background: #111;
  color: #fff;
}

/* =========================
   HEADER (CARRITO / PERFIL)
   ========================= */

.section-header {
  display: grid;
  grid-template-columns: auto 1fr auto; /* btn | título | spacer */
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
}

/* Botón volver */
.section-header .back-btn {
  grid-column: 1;
  justify-self: start;

  background: #f5f5f5;
  border: 1px solid #e2e2e2;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;

  /* clave: evitar que se estire y coma el título */
  white-space: nowrap;
}

/* Hover */
.section-header .back-btn:hover {
  background: #111;
  color: #fff;
  border-color: #111;
}

/* Título centrado sin ser tapado */
.section-header .section-title {
  grid-column: 2;
  justify-self: center;
  text-align: center;
  margin: 0;
  font-size: 16px;
  font-weight: 600;

  /* clave: permitir que el título se achique y no empuje */
  min-width: 0;
}

/* =========================
   HEADER (VOLVER + TÍTULO)
   ========================= */

.section-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px clamp(20px, 5vw, 64px);
  position: relative;
  min-height: 60px;
}

/* Botón volver: posicionado a la izquierda, en la misma línea que el título */
.section-header .back-btn {
  position: absolute;
  left: clamp(20px, 5vw, 64px);
  top: 50%;
  transform: translateY(-50%);

  background: #f5f5f5;
  border: 1px solid #e2e2e2;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;

  white-space: nowrap;
}

@media (max-width: 720px) {
  .section-header {
    flex-direction: column;
    min-height: auto;
  }
  .section-header .back-btn {
    position: static;
    transform: none;
    align-self: flex-start;
  }
}

/* Hover */
.section-header .back-btn:hover {
  background: #111;
  color: #fff;
  border-color: #111;
}

/* Título centrado abajo */
.section-header .section-title {
  margin: 0;
  text-align: center;
  font-size: 25px;
  font-weight: 600;
}

.login-help-btn {
  margin-top: 10px;
  background: none;
  border: none;
  color: #666;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  transition: color 0.2s ease;
}

.login-help-btn:hover {
  color: #111;
}

.badge-nuevo,
.badge-liquidacion,
.badge-sinstock,
.badge-proximamente {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 14px;
  font-weight: 800;
  padding: 7px 12px;
  border-radius: 10px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}

/* Base común para TODOS los badges */
.badge-nuevo,
.badge-liquidacion,
.badge-sinstock,
.badge-proximamente {
  padding: 6px 10px;
  line-height: 1;
  z-index: 2;
  border: 2px solid currentColor; /* mismo look que NUEVO */
  background: color-mix(in srgb, currentColor 10%, transparent);
}

/* NUEVO (tu rojo actual, ajustalo si ya existe) */
.badge-nuevo {
  color: #d60000;
}

/* SIN STOCK (gris) */
.badge-sinstock {
  color: #6b7280; /* gris moderno */
}

/* LIQUIDACIÓN (destaca sin “alerta” rojo) */
.badge-liquidacion {
  color: #f59e0b; /* ámbar/dorado: “promo” */
}

/* PROXIMAMENTE (azul: anticipación / pronto disponible) */
.badge-proximamente {
  color: #2563eb; /* azul */
}

.add-btn.disabled {
  background: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
  border: 1px solid #ddd;
}

/* Vendor browse mode: botón "Elegir razón social" — color distinto del
   "Agregar al pedido" negro normal para que el vendor entienda que es
   otra acción (scroll al dropdown). Sólido (no outline) para que NO
   parezca deshabilitado. */
.add-btn.add-vendor-browse {
  background: #d00000; /* rojo de marca, fondo lleno */
  color: #fff;
  border: 0;
  font-weight: 800;
  letter-spacing: 0.3px;
  transition: background 0.15s ease, transform 0.1s ease,
    box-shadow 0.15s ease;
  box-shadow: 0 2px 6px rgba(208, 0, 0, 0.25);
}

.add-btn.add-vendor-browse:hover {
  background: #b00000;
  box-shadow: 0 4px 12px rgba(208, 0, 0, 0.35);
}

.add-btn.add-vendor-browse:active {
  transform: scale(0.98);
  background: #900000;
}

/* brillo deslizante */
.badge-liquidacion::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.6),
    transparent
  );
  transform: skewX(-25deg);
  animation: liquidShine 3s infinite;
}

@keyframes liquidShine {
  0% {
    left: -120%;
  }
  60% {
    left: 120%;
  }
  100% {
    left: 120%;
  }
}

.login-help-btn {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #e6e6e6;
  background: #fff;
  color: #000000;
  font-weight: 700;
  text-decoration: none;
  font-size: 14px;
}

.login-help-btn:hover {
  background: #999999;
  color: #fff;
}

/* ===== MOBILE PRODUCTS BAR (PRO) — v2: layout limpio 2 filas =====
   Fila 1: buscador full-width
   Fila 2: [Categoría] [Filtros] (grid 1fr 1fr) */
@media (max-width: 900px) {
  .mobile-products-bar {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 60;
    border-bottom: 1px solid #eee;
  }

  /* Buscador: full width (ambas columnas) */
  .mpb-search {
    grid-column: 1 / -1;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    height: 44px;
    border: 1px solid #e7e7e7;
    border-radius: 12px;
    background: #fafafa;
    min-width: 0;
  }
  .mpb-input {
    width: 100%;
    height: 42px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    min-width: 0;
  }

  /* Actions: 2 columnas para [Categoría] [Filtros] */
  .mpb-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  /* Botones uniformes */
  #openFiltersBtn.mpb-btn,
  #openCategoriasBtn.mpb-btn {
    width: 100%;
    height: 44px;
    justify-content: center;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border-radius: 12px;
    border: 1px solid #e7e7e7;
    background: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }

  /* ordenar (select) */
  .mpb-sort {
    width: 120px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #e7e7e7;
    background: #fff;
  }

  .mpb-select {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    appearance: none;
    -webkit-appearance: none;
  }
}

.add-login-btn {
  background: #111;
  color: #fff;
  border: 1px solid #111;
  border-radius: 10px;
}

.add-login-btn:hover {
  background: #333;
}

.add-btn {
  background: #111;
  color: #fff;
  border: 1px solid #111;
  border-radius: 10px;
}

.add-btn:hover {
  background: #333;
}

.pass-wrap {
  position: relative;
  width: 100%;
}

.pass-wrap input {
  width: 100%;
  padding-right: 44px; /* espacio para el botón */
  box-sizing: border-box;
}

.toggle-pass {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  padding: 6px;
  cursor: pointer;
  line-height: 0;
  opacity: 0.75;
}

.toggle-pass:hover {
  opacity: 1;
}

.toggle-pass svg {
  width: 18px;
  height: 18px;
  fill: #111;
  display: block;
}

/* Estado: oculto/visible */
.toggle-pass .icon-hide {
  display: none;
}
.toggle-pass[data-show="1"] .icon-show {
  display: none;
}
.toggle-pass[data-show="1"] .icon-hide {
  display: block;
}

/* Botón MI SURTIDO */
.ds-assortment {
  border: 3px solid #ffd700 !important;
  font-size: 15px !important;
  font-weight: 600;
  background: #fff8d6 !important;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* estado activo */
.ds-assortment.on {
  background: #ffd700 !important;
  color: #fff;
  border-color: #ffd700 !important;
}

/* hover */
.ds-assortment:hover {
  background: #fff8d6;
  border-color: #ffd700 !important;
  color: #5b4a00;
}

.assortment-btn-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
}

.assortment-btn-icon svg {
  width: 100%;
  height: 100%;
  fill: #ffd700;
  stroke: #d4aa00;
  stroke-width: 1.2;
}

.ds-assortment.on .assortment-btn-icon svg {
  fill: #fff;
  stroke: #fff;
}

.ds-assortment:hover .assortment-btn-icon svg {
  fill: #ffd700;
  stroke: #d4aa00;
}

.assortment-banner {
  grid-column: 1 / -1; /* ocupa todas las columnas de la grilla */
  width: 100%;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 14px 0; /* separa del primer row de productos */
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

/* =========================================================
   PANTALLA FINAL PEDIDO CONFIRMADO
   Agregar al final de css/styles.css
========================================================= */
/* =========================================================
   PANTALLA FINAL PEDIDO CONFIRMADO
   Integrado: imagen grande + volver arriba izquierda
   + descargar centrado + texto debajo
========================================================= */

.success-page {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 28px 20px 60px;
  text-align: center;
}

.success-topbar {
  width: 100%;
  max-width: 1150px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
}

.success-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #e5e7eb;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  font-family: inherit;
}
.success-back-link:hover {
  background: #111;
  color: #fff;
  border-color: #111;
  transform: translateX(-2px);
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.15);
}

.success-title-main {
  margin: 20px 0 26px;
  font-size: 64px;
  font-weight: 400;
  line-height: 1.05;
}

/* ============== SUCCESS PAGE — card centrado con tilde animado ============== */
.success-card {
  max-width: 460px;
  margin: 40px auto;
  padding: 48px 40px 36px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 12px 40px rgba(15, 23, 42, 0.08);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.success-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #22c55e 0%, #16a34a 50%, #22c55e 100%);
}

.success-animation {
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  background: transparent;
  position: relative;
}
/* Pulso suave detrás del círculo */
.success-animation::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #22c55e;
  opacity: 0.18;
  animation: lk-success-pulse 1.6s ease-out 0.4s infinite;
  pointer-events: none;
}
.success-animation .lk-success-svg {
  width: 100%;
  height: 100%;
  background: transparent;
  display: block;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 8px 20px rgba(34, 197, 94, 0.35));
}
.success-animation .lk-success-circle {
  transform-origin: 60px 60px;
  animation: lk-success-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.success-animation .lk-success-check {
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
  animation: lk-success-draw 0.45s ease-out 0.35s forwards;
}
@keyframes lk-success-pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes lk-success-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes lk-success-pulse {
  0%   { transform: scale(1);   opacity: 0.35; }
  100% { transform: scale(1.8); opacity: 0;    }
}

.success-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: #111;
  margin: 0 0 10px;
  animation: lk-fade-in-up 0.5s ease-out 0.55s both;
}
.success-subtitle {
  font-size: 14.5px;
  color: #6b7280;
  margin: 0 0 30px;
  line-height: 1.5;
  animation: lk-fade-in-up 0.5s ease-out 0.7s both;
}

@media (max-width: 600px) {
  .success-card {
    margin: 20px 16px;
    padding: 36px 22px 28px;
  }
  .success-animation {
    width: 110px;
    height: 110px;
  }
  .success-title {
    font-size: 22px;
  }
  .success-subtitle {
    font-size: 13px;
  }
}

.success-download-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.success-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 240px;
  height: 48px;
  padding: 0 22px;
  border-radius: 12px;
  border: 1px solid #111;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s ease;
}

.success-btn.primary {
  background: #000;
  color: #fff;
}

.success-btn.primary:hover {
  opacity: 0.92;
}

.success-pdf-note {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.35;
  color: #444;
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 768px) {
  .success-page {
    min-height: auto;
    padding: 18px 16px 42px;
  }

  .success-topbar {
    max-width: 100%;
    margin-bottom: 8px;
  }

  .success-back-link {
    font-size: 20px;
  }

  .success-title-main {
    font-size: 42px;
    margin: 8px 0 22px;
    line-height: 1.08;
  }

  .success-animation {
    max-width: 200px;
    height: 200px;
    margin: 0 auto 24px;
  }

  .success-btn {
    width: 100%;
    min-width: 0;
    max-width: 320px;
  }

  .success-pdf-note {
    max-width: 320px;
    font-size: 13px;
  }
}
/* =========================
   HISTORIAL DE PEDIDOS WEB
========================= */
.hist-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.hist-btn {
  appearance: none;
  border: 1px solid #111;
  background: #111;
  color: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  min-width: 150px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.hist-btn:hover {
  opacity: 0.92;
}

.hist-btn.subtle {
  background: #fff;
  color: #111;
  border: 1px solid #cfcfcf;
}

.hist-btn.subtle:hover {
  background: #f3f3f3;
}

/* Editar pedido: pill chico ámbar + hint, en su propia línea debajo */
.hist-edit-wrap {
  flex-basis: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.hist-edit-link {
  appearance: none;
  border: 1px solid #e6c34d;
  background: #fff8e6;
  color: #8a6608;
  border-radius: 8px;
  padding: 5px 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  transition: background 0.2s ease;
}

.hist-edit-link:hover {
  background: #fdeec1;
}

.hist-edit-hint {
  font-size: 11px;
  color: #888;
  text-align: right;
  max-width: 170px;
  line-height: 1.3;
}

/* opcional: que la columna de acción no se achique raro */
.order-col.order-action {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* mobile */
@media (max-width: 768px) {
  .hist-actions {
    width: 100%;
    justify-content: flex-end;
    gap: 8px;
  }

  .hist-btn {
    min-width: 132px;
    height: 40px;
    font-size: 13px;
    padding: 8px 10px;
  }
}
.submit-order.is-loading {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}
/* ================= CUSTOMER SELECTOR (Vendedores / Multi-RS) ================= */
/* Banner inline dentro de .sort-row — pill con acento rojo de marca.
   NO usar overflow:hidden acá: clipea el popup del dropdown que aparece debajo.
   En su lugar, redondear los corners directamente en los hijos
   (cs-label-wrap izq + cs-trigger der) para mantener el look de pill. */
.customer-selector-banner {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  margin: 0 auto; /* auto a ambos lados = centrado entre borde izq y botones */
  min-width: 0;
  flex: 0 1 auto;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Flash de atención cuando vendor intenta agregar al carrito sin elegir cliente */
.customer-selector-banner.cs-flash-attention {
  animation: csFlashAttention 1.4s ease-out;
}

@keyframes csFlashAttention {
  0%, 100% {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    transform: scale(1);
  }
  15% {
    box-shadow: 0 0 0 6px rgba(255, 0, 0, 0.25),
      0 4px 14px rgba(255, 0, 0, 0.3);
    transform: scale(1.03);
  }
  30%, 60% {
    box-shadow: 0 0 0 6px rgba(255, 0, 0, 0.18),
      0 4px 14px rgba(255, 0, 0, 0.2);
    transform: scale(1.015);
  }
  75% {
    box-shadow: 0 0 0 4px rgba(255, 0, 0, 0.12),
      0 4px 10px rgba(255, 0, 0, 0.15);
    transform: scale(1.005);
  }
}

/* Sin variación visual al hover/focus — evita repaints que causan flicker
   al abrir/cerrar el popup nativo del select en Windows. */

/* Bloque izquierdo: icono + label, fondo oscuro con texto blanco */
.customer-selector-banner .cs-label-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  background: linear-gradient(180deg, #1a1a1a 0%, #0b0b0b 100%);
  color: #fff;
  position: relative;
  border-radius: 13px 0 0 13px;
}

/* Acento rojo de marca en el borde derecho del label */
.customer-selector-banner .cs-label-wrap::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #ff0000;
}

.cs-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.cs-label {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

/* ===== DROPDOWN CUSTOM (reemplaza <select> nativo para evitar bug Chrome+Win dark) ===== */
.cs-dropdown {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
}

.cs-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  background: #fff;
  color: #111;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  outline: none;
  min-width: 0;
  line-height: 1.2;
}

.cs-trigger:focus-visible {
  outline: 2px solid #ff0000;
  outline-offset: -2px;
}

.cs-trigger-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-trigger-arrow {
  flex: 0 0 auto;
  color: #ff0000;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  transition: transform 0.18s ease;
}

.cs-trigger[aria-expanded="true"] .cs-trigger-arrow {
  transform: rotate(180deg);
}

/* Tick "Perfil vendedor": chip CLICKEABLE por fuera del dropdown "Pedir para".
   Tildado = navegando el perfil propio del vendedor. Apretarlo va a Perfil
   vendedor; elegir un cliente lo destilda (estado lo maneja JS). */
.vendor-profile-tick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #555;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.vendor-profile-tick:hover {
  border-color: #cfcfcf;
  background: #fafafa;
}
.vendor-profile-tick .vpt-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 2px solid #c9c9c9;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  color: transparent;
  transition: all 0.15s ease;
}
.vendor-profile-tick.checked {
  border-color: #1a9c3e;
  background: #f1fbf4;
  color: #137a31;
}
.vendor-profile-tick.checked .vpt-box {
  border-color: #1a9c3e;
  background: #1a9c3e;
  color: #fff;
}

/* Select nativo oculto — solo para parity con código que lee .value */
.cs-hidden-select {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.cs-popup {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12),
    0 1px 3px rgba(0, 0, 0, 0.06);
  /* z-index muy alto para ganarle al carrusel sticky (100) y a cualquier
     transform/hover de las product-cards que pueda crear stacking context */
  z-index: 99999;
  padding: 6px;
  max-height: 320px;
  overflow-y: auto;
  min-width: 100%;
  /* Permite que el popup sea más ancho que el trigger si la lista es larga */
  width: max-content;
  max-width: min(420px, 90vw);
}

/* Cuando el popup está abierto, elevar el banner a stacking context propio
   para garantizar que el popup quede sobre todo */
.customer-selector-banner:has(.cs-popup:not([hidden])) {
  position: relative;
  z-index: 99998;
}

.cs-popup[hidden] {
  display: none !important;
}

/* Buscador dentro del popup "Pedir para" (filtra por nombre o cod_cliente).
   Sticky arriba para que quede fijo al scrollear la lista. */
.cs-search {
  position: sticky;
  top: 0;
  background: #fff;
  padding: 0 0 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid #eee;
  z-index: 1;
}
.cs-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  color: #222;
  outline: none;
}
.cs-search-input:focus {
  border-color: #ff0000;
  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.12);
}
.cs-no-results {
  padding: 10px 12px;
  font-size: 12px;
  color: #888;
  text-align: center;
  font-weight: 600;
}
.cs-no-results[hidden] {
  display: none;
}
.cs-option[hidden] {
  display: none;
}

/* === Extras vendedor 10006 === */
/* Línea CUIT + expreso bajo "Pedir para" (carrito): formato etiqueta/valor
   prolijo, con separador arriba. */
.v10006-info {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 20px;
  margin-top: 8px;
}
/* La línea separadora va DEBAJO del CUIT/BARRIO (arriba del hint). */
#customerSelectorCart .v10006-info + .ship-hint {
  grid-column: 1 / -1;
  border-top: 1px solid #f0f0f0;
  margin-top: 9px;
  padding-top: 9px;
}
.v10006-field {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1.3;
}
.v10006-k {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9aa1ab;
}
.v10006-v {
  font-size: 13px;
  font-weight: 700;
  color: #222;
}
/* Línea localidad (provincia) bajo la dirección de entrega. */
.v10006-geo {
  grid-column: 1 / -1;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #b00000;
  line-height: 1.35;
}
.v10006-geo-pin {
  font-size: 11px;
}

/* Pill del selector de sucursal en el banner (al lado de "Pedir para").
   A PROPÓSITO distinto del banner negro "PEDIR PARA": estilo SECUNDARIO
   (gris claro, más chico) para que se lea como sub-dato del cliente y no
   parezca otro selector independiente. */
.cs-suc-banner {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  /* SIN overflow:hidden — cliparía el popup del dropdown. */
  min-width: 0;
  max-width: 520px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.cs-suc-banner:hover {
  border-color: #d0d0d0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
}
.cs-suc-label-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 13px;
  background: #f6f7f9;
  color: #5b6370;
  position: relative;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  border-radius: 9px 0 0 9px;
  border-right: 1px solid #ececef;
}
.cs-suc-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #e60000;
}
.cs-suc-label {
  line-height: 1;
}
.cs-suc-text {
  display: inline-flex;
  align-items: center;
  padding: 11px 18px;
  font-size: 14.5px;
  font-weight: 700;
  color: #1a1a1a;
  white-space: nowrap;
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 0 9px 9px 0;
}
.cs-dropdown.cs-dropdown-banner-suc {
  flex: 0 1 320px;
  width: auto;
  min-width: 200px;
}
.cs-dropdown-banner-suc .cs-trigger {
  padding: 11px 18px;
  border: 0;
  border-radius: 0 9px 9px 0;
  background: #fff;
  font-size: 14.5px;
  font-weight: 700;
  color: #1a1a1a;
  transition: background 0.15s ease;
}
.cs-dropdown-banner-suc .cs-trigger:hover {
  background: #fafafa;
}
.cs-dropdown-banner-suc .cs-trigger-arrow {
  color: #e60000;
}

.cs-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: #222;
  cursor: pointer;
  border-radius: 6px;
  font-family: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 1px;
}

.cs-option:hover {
  background: #f4f4f4;
}

.cs-option[data-selected="true"] {
  background: #fff5f5;
  color: #d00000;
  font-weight: 800;
}

.cs-option:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Si la opción disabled tiene data-value vacío, es un prompt/cabecera —
   se ve como label arriba del listado, no como opción opaca. */
.cs-option:disabled[data-value=""] {
  opacity: 1;
  background: transparent;
  color: #888;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 8px 12px 4px;
  border-bottom: 1px solid #eee;
  margin-bottom: 4px;
  pointer-events: none;
}

.cs-option:disabled[data-value=""]:hover {
  background: transparent;
}

/* --- Variante banner (dentro de customer-selector-banner) --- */
/* Ancho FIJO en el wrapper + trigger para evitar que el banner cambie de
   tamaño cuando el usuario elige clientes con nombres de distinta longitud.
   El label largo se trunca con ellipsis (ya tiene text-overflow). */
.cs-dropdown.cs-dropdown-banner {
  flex: 0 0 320px;
  width: 320px;
}

.cs-dropdown-banner .cs-trigger {
  width: 320px;
  max-width: 320px;
  min-width: 320px;
  flex: 0 0 320px;
  padding: 13px 18px;
  font-size: 15px;
  border-radius: 0 13px 13px 0;
}

.cs-dropdown-banner .cs-trigger-arrow {
  font-size: 13px;
}

/* --- Variante card (dentro del carrito, mimetiza .ship-select) --- */
.cs-dropdown-card {
  width: 100%;
}

.cs-dropdown-card .cs-trigger {
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  font-weight: 600;
}

/* Layout sort-row: banner "PEDIR PARA" a la izq, chips de orden a la der.
   En desktop (≥1281px) NO wrap — todo en una línea con space-between.
   En notebooks (≤1280px) permite wrap si no entran.
   Gap mínimo de 48px garantizado entre banner y chips. */
#productos .sort-row {
  /* nowrap: la zona vendedor (PEDIR PARA + sucursal + tick) y los filtros van
     en la MISMA línea. El banner ahora vive dentro de la zona (flex:0 0 auto),
     así que no desborda como cuando era hijo directo. */
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 24px;
  row-gap: 10px;
  min-width: 0;
  align-items: center;
  /* z-index bajo en estado normal — suficiente para ganarle a las cards
     pero MENOR que el carrusel novedades sticky (z-index: 100) para que
     al scrollear, el carrusel quede arriba del sort-row, no al revés. */
  position: relative;
  z-index: 1;
  /* Más aire entre la fila de filtros y la grilla de productos */
  margin-bottom: 28px;
}
/* Cuando el dropdown "Filtrar por..." está abierto, subir el z-index para
   que el popup gane sobre TODO (incluyendo el carrusel sticky). */
#productos .sort-row:has(.sort-dd-popup:not([hidden])),
#productos .sort-row:has(.cs-popup:not([hidden])) {
  z-index: 300;
}
/* === Cartbar compacto para cards angostas (max 280px) === */
/* 2 líneas centradas — sin sumar alto a la card:
   Línea 1: [stepper] [+5]
   Línea 2: $precio +IVA   ·   Unidades: N
   Sin pseudo "Cajas" (lo deducís del stepper).
   SCOPE: solo aplica en desktop ancho (>=1281px) donde la grilla muestra
   4 columnas y cada card cabe en 280px. Debajo de 1281, el bloque
   responsive (max-width: 1024px) toma el control y agranda. */
@media (min-width: 1281px) {
  .product-card .card-cartbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: 10px !important;
    row-gap: 4px !important;
    padding: 6px 4px !important;
    margin-top: 6px !important;
    width: 100% !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
  }
  /* Línea 1: stepper + chip +5, juntos y centrados */
  .product-card .card-cartbar > .cartbar-controls {
    grid-area: auto !important;
    grid-row: auto !important;
    flex: 1 1 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }
  .product-card .card-cartbar > .cartbar-controls::before {
    display: none !important;
  }
  .product-card .card-cartbar .cartbar-left {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .product-card .card-cartbar .chip-5 {
    display: inline-flex !important;
    height: 40px !important;
    padding: 0 14px !important;
    font-size: 15px !important;
  }
  .product-card .card-cartbar .cartbar-stepper {
    transform: none !important;
  }
  .product-card .card-cartbar .step-btn {
    width: 42px !important;
    height: 40px !important;
    font-size: 18px !important;
  }
  .product-card .card-cartbar .step-input {
    width: 54px !important;
    height: 40px !important;
    font-size: 16px !important;
  }
  /* Línea 2 izq: precio compacto */
  .product-card .card-cartbar > .cartbar-top {
    grid-area: auto !important;
    flex: 0 1 auto !important;
    justify-self: auto !important;
    align-self: center !important;
    justify-content: flex-end !important;
    text-align: right !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  .product-card .card-cartbar .cartbar-subtotal {
    font-size: 16px !important;
    gap: 3px !important;
  }
  .product-card .card-cartbar .cartbar-subv {
    font-size: 18px !important;
    font-weight: 800 !important;
  }
  .product-card .card-cartbar .cartbar-iva {
    font-size: 12px !important;
  }
  /* Línea 2 der: unidades */
  .product-card .card-cartbar > .cartbar-units {
    grid-area: auto !important;
    flex: 0 1 auto !important;
    justify-self: auto !important;
    align-self: center !important;
    text-align: left !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }
  /* Botón Quitar (si aparece): chico, en línea propia */
  .product-card .card-cartbar > .remove-compact,
  .product-card .card-cartbar > button.remove-compact {
    flex: 1 1 100% !important;
    margin-top: 2px !important;
    font-size: 11px !important;
    height: 24px !important;
  }
  /* --- Opción C: compactar el estado agregado a 2 líneas ---
     Orden: línea 1 = stepper + +5; línea 2 = subtotal + unidades juntos.
     Antes el subtotal quedaba arriba (3 líneas) y la card crecía de más. */
  .product-card .card-cartbar > .cartbar-controls { order: 1 !important; }
  .product-card .card-cartbar > .cartbar-top { order: 2 !important; }
  .product-card .card-cartbar > .cartbar-units { order: 3 !important; }
  .product-card .card-cartbar {
    /* línea pegada a precios + aire entre línea y contenido + aire entre filas */
    padding: 10px 4px 4px !important;
    margin-top: 4px !important;
    row-gap: 9px !important;
  }
  .product-card .card-cartbar > .cartbar-top {
    flex: 0 1 auto !important;
  }
  .product-card .card-cartbar > .cartbar-units {
    margin-left: 4px !important;
  }
}

/* === Sort row polish: chips agrandados + transiciones suaves === */
#productos .sort-row .desktop-sort-buttons {
  gap: 10px;
}
#productos .sort-row .desktop-sort-buttons .ds-btn {
  height: 44px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1px;
  border-radius: 11px;
  border: 1px solid #e8e8e8;
  background: #fff;
  color: #333;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.12s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
#productos .sort-row .desktop-sort-buttons .ds-btn:hover {
  background: #fafafa;
  border-color: #ccc;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

/* Mi surtido — amarillo pulido y más grande */
#productos .sort-row .desktop-sort-buttons .ds-btn.ds-assortment {
  border: 2px solid #ffd700 !important;
  background: #fff8d6 !important;
  color: #5b4a00;
  font-size: 14px !important;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(255, 215, 0, 0.15);
}
#productos .sort-row .desktop-sort-buttons .ds-btn.ds-assortment:hover {
  background: #fff3a8 !important;
  box-shadow: 0 3px 10px rgba(255, 215, 0, 0.28);
  transform: translateY(-1px);
}
#productos .sort-row .desktop-sort-buttons .ds-btn.ds-assortment.on {
  background: #ffd700 !important;
  color: #1a1a1a;
  box-shadow: 0 3px 12px rgba(255, 215, 0, 0.42);
}

/* Nuevos — rojo pulido y más grande */
#productos .sort-row .desktop-sort-buttons #btnFilterNew {
  border: 2px solid #e60000 !important;
  background: #ffe5e5 !important;
  color: #e60000;
  font-weight: 700;
  font-size: 14px !important;
  box-shadow: 0 1px 3px rgba(230, 0, 0, 0.12);
}
#productos .sort-row .desktop-sort-buttons #btnFilterNew:hover {
  background: #ffd0d0 !important;
  box-shadow: 0 3px 10px rgba(230, 0, 0, 0.22);
  transform: translateY(-1px);
}
#productos .sort-row .desktop-sort-buttons #btnFilterNew.on {
  background: #e60000 !important;
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(230, 0, 0, 0.4);
}

/* === Custom dropdown "Filtrar por..." — estética consistente con la página === */
.sort-dd-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.sort-dd-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 44px;
  padding: 0 16px;
  min-width: 220px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 11px;
  cursor: pointer;
  outline: none;
  letter-spacing: 0.1px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.12s ease;
}
.sort-dd-trigger:hover {
  background: #fafafa;
  border-color: #ccc;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}
.sort-dd-trigger[aria-expanded="true"] {
  border-color: #111;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}
.sort-dd-arrow {
  font-size: 11px;
  color: #888;
  transition: transform 0.18s ease;
}
.sort-dd-trigger[aria-expanded="true"] .sort-dd-arrow {
  transform: rotate(180deg);
}
/* Estado activo: opción distinta de default seleccionada → trigger negro */
.sort-dd-trigger[data-active="1"] {
  background: #111;
  color: #fff;
  border-color: #111;
  font-weight: 700;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
}
.sort-dd-trigger[data-active="1"] .sort-dd-arrow {
  color: #fff;
}

/* Popup con opciones */
.sort-dd-popup {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 11px;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.12),
    0 1px 3px rgba(0, 0, 0, 0.06);
  padding: 6px;
  z-index: 99998;
  animation: sortDdFadeIn 0.16s ease-out;
}
.sort-dd-popup[hidden] {
  display: none !important;
}
@keyframes sortDdFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.sort-dd-header {
  /* Label no clickeable arriba del popup ("Filtrar por") */
  padding: 8px 14px 6px;
  font-size: 11px;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 4px;
  cursor: default;
  user-select: none;
}
.sort-dd-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.sort-dd-option:hover {
  background: #f5f5f5;
}
.sort-dd-option[data-selected="true"] {
  background: #111;
  color: #fff;
}

/* === Banner PEDIR PARA: sombra más suave + hover sutil === */
.customer-selector-banner {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05),
    0 4px 12px rgba(0, 0, 0, 0.04) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}
.customer-selector-banner:hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.07),
    0 6px 18px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-1px);
}
.customer-selector-banner .cs-label-wrap {
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-size: 13px;
}
#productos .sort-row > .customer-selector-banner {
  /* Cuando vive dentro de sort-row, NO se centra (queda a la izq) */
  margin: 0;
  /* NO shrink: el dropdown interno tiene ancho fijo (320px); si el banner se
     achicaba, ese dropdown desbordaba su caja y se superponía con el selector
     de sucursal de al lado. */
  flex: 0 0 auto;
}

/* Zona vendedor en el sort-row: columna. Fila superior = PEDIR PARA + tick
   "Perfil vendedor" en la MISMA línea; el selector SUCURSAL CLIENTE va debajo. */
#productos .sort-row > .cs-vendor-zone {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  flex: 0 0 auto;
  min-width: 0;
}
.cs-vendor-top {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* Banner + tick en la fila superior; sucursal debajo. Sin márgenes raros. */
.cs-vendor-top > .customer-selector-banner,
.cs-vendor-top > .vendor-profile-tick,
.cs-vendor-zone > .cs-suc-banner {
  margin: 0;
  flex: 0 0 auto;
}
#productos .sort-row > .desktop-sort-buttons {
  flex: 0 1 auto;
  min-width: 0;
  /* Empuja los chips a la derecha aunque no haya banner "PEDIR PARA"
     antes (caso sin login). Con banner, queda igual por space-between. */
  margin-left: auto;
}
/* En notebooks (901-1280px) los desktop-sort-buttons no entran en una línea
   junto al banner PEDIR PARA. Solución:
   - Ocultar los chips de orden (.desktop-sort-buttons)
   - Mostrar la mobile-products-bar (botones Categoría + Filtros) que abren overlays
   - Ocultar el buscador de la mobile-bar (ya hay buscador en el header)
   - El banner PEDIR PARA queda solo en el sort-row arriba */
@media (min-width: 901px) and (max-width: 1280px) {
  /* Chips de orden ocultos en este rango */
  #productos .sort-row .desktop-sort-buttons {
    display: none !important;
  }
  /* Sort-row solo con banner: centrado horizontalmente */
  #productos .sort-row {
    justify-content: center;
    gap: 0;
  }
  /* Mobile bar visible en este rango */
  .mobile-products-bar {
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 60;
    border-bottom: 1px solid #eee;
  }
  /* Sin buscador (ya hay uno en el header) */
  .mobile-products-bar .mpb-search {
    display: none !important;
  }
  /* Botones [Categoría] [Filtros] — estilos del rango ≤900 replicados */
  .mobile-products-bar .mpb-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .mobile-products-bar .mpb-btn {
    height: 44px;
    border-radius: 14px;
    border: 1px solid #e6e6e6;
    background: #fff;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 10px;
    min-width: 0;
    color: #111;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .mobile-products-bar .mpb-btn:hover {
    background: #fafafa;
    border-color: #ccc;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  }
  .mobile-products-bar .mpb-btn-ico {
    display: flex;
    color: #111;
  }
}

@media (max-width: 900px) {
  .customer-selector-banner {
    display: flex;
    width: 100%;
    margin: 0 0 12px;
  }
  .customer-selector-banner .cs-label-wrap {
    padding: 10px 12px;
  }
  .cs-dropdown-banner .cs-trigger {
    flex: 1;
    min-width: 0;
    max-width: none;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .cs-label {
    font-size: 11px;
  }
  .cs-icon {
    width: 16px;
    height: 16px;
  }
}

/* ================= ✨ NOVEDADES CARRUSEL ================= */
/* Altura compacta — apenas más alta que el header (86px).
   Sticky abajo del header fijo: queda en lugar al scrollear.
   - Estado base (arriba de todo, no scrolleado): todos los bordes redondeados.
   - Estado .is-stuck (sticky pegado al header al scrollear): top plano +
     fade blanco abajo para separar de los productos que pasan por debajo.
   La clase .is-stuck la toggle el JS via scroll listener. */
.new-carousel {
  margin: 0 auto 24px;
  max-width: 1700px;
  width: calc(100% - 40px);
  padding: 8px 14px 10px;
  background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
  border: 1px solid #ececec;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  /* No sticky: el carrusel scrollea con la página y desaparece al scrollear
     (el cliente no lo ve más una vez que baja). Antes quedaba pegado al header. */
  position: relative;
  z-index: 1;
  transform-origin: top center;
  transition:
    border-radius 0.18s ease,
    border-top-color 0.18s ease,
    max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.35s ease,
    transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    margin 0.45s ease,
    padding 0.45s ease;
  /* overflow:hidden removido: el viewport ya clipea las cards y queremos
     que el ::after de fade salga abajo del carrusel. */
}

/* Estado collapsing: animar opacity/transform/margins/paddings.
   max-height NO va acá — lo maneja JS inline (de 0 a scrollHeight px y
   viceversa) porque CSS no transiciona entre auto y px. */
.new-carousel.is-collapsing {
  opacity: 0;
  transform: scaleY(0.6) translateY(-8px);
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden;
  pointer-events: none;
}

/* Estado scrolleado: top plano (pega contra el header sin curva) */
.new-carousel.is-stuck {
  border-top-color: transparent;
  border-radius: 0 0 14px 14px;
}

/* Fade blanco abajo (solo cuando está stuck) → separa visualmente
   de los productos que aparecen scrolleando debajo */
.new-carousel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20px;
  height: 20px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.new-carousel.is-stuck::after {
  opacity: 1;
}

.new-carousel[hidden] {
  display: none !important;
}

/* Acento rojo de marca a la izquierda */
/* Acento rojo lateral desactivado por pedido del cliente */

.new-carousel-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 6px;
  /* SIN position:relative — así OCULTAR se posiciona relativo a .new-carousel
     y queda alineado con las flechas (también absolutas en .new-carousel) */
}

/* Botón "Ocultar" carrusel — esquina sup-derecha del carrusel (alineado
   con la flecha › a la derecha). Posición absoluta en .new-carousel
   (NO en el header) para compartir el right:8px con las flechas. */
.nc-close-btn {
  position: absolute;
  right: 8px; /* mismo right que .ncn-next → alineado con la flecha */
  top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #ddd;
  background: #f5f5f5;
  color: #555;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease,
    border-color 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
  z-index: 6; /* arriba de las flechas si llegaran a overlap */
}

.nc-close-btn .nc-close-x {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  position: relative;
  top: -1px;
}

.nc-close-btn .nc-close-text {
  /* texto visible al lado del × */
}

.nc-close-btn:hover {
  background: #ff0000;
  color: #fff;
  border-color: #ff0000;
  box-shadow: 0 2px 6px rgba(255, 0, 0, 0.25);
}

.nc-close-btn:active {
  transform: scale(0.96);
}

.nc-close-btn:focus-visible {
  outline: 2px solid #ff0000;
  outline-offset: 2px;
}

/* Pill "Mostrar novedades" — aparece cuando el usuario cerró el carrusel.
   Más grande + centrado entre header y filtros con buen aire arriba/abajo. */
.nc-show-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 24px auto 24px;
  padding: 10px 22px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: #111;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.35s ease,
    transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    margin 0.45s ease,
    padding 0.45s ease;
  position: sticky;
  top: 100px;
  z-index: 99;
  transform-origin: top center;
}

/* Collapse del pill — paralelo al expand del carrusel cuando el usuario
   clickea "Mostrar novedades". Mismo efecto que .new-carousel.is-collapsing. */
.nc-show-btn.is-collapsing {
  opacity: 0;
  transform: scaleY(0.6) translateY(-8px);
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden;
  pointer-events: none;
}

.nc-show-btn[hidden] {
  display: none !important;
}

/* Animación de entrada cuando el carrusel se oculta y aparece el pill */
.nc-show-btn.nc-pill-in {
  animation: nc-pill-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes nc-pill-in {
  0% {
    transform: scale(0.4) translateY(-12px);
    opacity: 0;
  }
  60% {
    transform: scale(1.05) translateY(0);
    opacity: 1;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.nc-show-btn:hover {
  background: #111;
  color: #fff;
  border-color: #111;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.nc-show-btn:active {
  transform: scale(0.97);
}

.nc-show-btn:focus-visible {
  outline: 2px solid #ff0000;
  outline-offset: 2px;
}

.new-carousel-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.new-carousel-spark {
  font-size: 14px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(255, 0, 0, 0.2));
}

.new-carousel-title h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #111;
}

.new-carousel-sub {
  font-size: 10px;
  color: #666;
  font-weight: 500;
}

/* Viewport: contiene el track, oculta overflow y aplica fade lateral */
.new-carousel-viewport {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 4%,
    #000 96%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 4%,
    #000 96%,
    transparent 100%
  );
}

/* Track: marquee infinito. Posición controlada por JS (rAF) para que las
   flechas puedan correr la posición manualmente con transición suave. */
.new-carousel-track {
  display: flex;
  gap: 14px;
  width: max-content;
  padding: 4px;
  will-change: transform;
  /* transform se aplica por JS */
}

/* Flechas — overlay absoluto a los costados del carrusel */
.ncn-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e0e0e0;
  color: #111;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  padding-bottom: 3px; /* compensar baseline del char ‹/› */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: background 0.15s ease, border-color 0.15s ease,
    transform 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
}

.ncn-prev {
  left: 8px;
}

.ncn-next {
  right: 8px;
}

.ncn-btn:hover {
  background: #111;
  color: #fff;
  border-color: #111;
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.ncn-btn:active {
  transform: translateY(-50%) scale(0.94);
}

.ncn-btn:focus-visible {
  outline: 2px solid #ff0000;
  outline-offset: 2px;
}

/* ===== CARD HORIZONTAL: imagen izq, contenido derecha ===== */
.nc-card {
  flex: 0 0 300px;
  display: flex;
  flex-direction: row;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  transition: box-shadow 0.18s ease, transform 0.18s ease,
    border-color 0.18s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  /* min-height en vez de height fijo → la card crece si la desc usa 2 líneas */
  min-height: 88px;
}

.nc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  border-color: #d8d8d8;
}

.nc-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #ff0000;
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  border-radius: 3px;
  z-index: 2;
  box-shadow: 0 1px 2px rgba(255, 0, 0, 0.25);
}

.nc-img-wrap {
  flex: 0 0 88px;
  width: 88px;
  height: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-right: 1px solid #f0f0f0;
}

.nc-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 6px 8px;
  position: relative;
}

.nc-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.nc-card:hover .nc-img-wrap img {
  transform: scale(1.04);
}

.nc-body {
  padding: 0;
  padding-right: 42px; /* espacio para badge */
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-height: 0;
}

.nc-meta {
  display: flex;
  gap: 10px;
  font-size: 9px;
  color: #777;
  line-height: 1.2;
}

.nc-meta strong {
  color: #111;
  font-weight: 700;
}

.nc-desc {
  font-size: 12px;
  font-weight: 600;
  color: #222;
  line-height: 1.2;
  /* Hasta 2 líneas si el nombre es largo y hay espacio (la card crece) */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nc-price-label {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #888;
  font-weight: 700;
  margin-top: 0;
  line-height: 1.1;
}

.nc-price-big {
  font-size: 13px;
  font-weight: 800;
  color: #111;
  line-height: 1.1;
  white-space: nowrap;
  margin-top: 1px;
}

.nc-price-big .nc-iva {
  font-size: 8px;
  font-weight: 600;
  color: #888;
  margin-left: 2px;
}

.nc-price-locked {
  font-size: 12px;
  color: #999;
  font-style: italic;
  padding: 4px 0;
}

.nc-price {
  font-size: 13px;
  color: #222;
}

/* ===== PAY (precio + botón/stepper SIEMPRE inline) =====
   Card mantiene altura constante porque el foot (Agregar / stepper) ocupa
   siempre la misma altura. Sin esto, qty>0 hacía crecer la card y las
   demás se estiraban dejando espacio vacío arriba del precio. */
.nc-pay {
  margin-top: auto;
  padding: 2px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nc-price-block {
  flex: 1 1 0;
  min-width: 0;
}

.nc-foot {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 0 0 auto;
}

.nc-add {
  height: 26px; /* MISMA altura que el stepper para que la card no cambie */
  padding: 0 10px;
  background: #0b0b0b;
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nc-add:hover {
  background: #1f1f1f;
}

.nc-add:active {
  transform: scale(0.98);
}

.nc-add.nc-login {
  background: #fff;
  color: #111;
  border: 1px solid #111;
}

.nc-add.nc-login:hover {
  background: #f5f5f5;
}

/* Stepper compacto inline — 3 columnas (− / qty / ＋) */
.nc-stepper {
  display: grid;
  grid-template-columns: 22px 28px 22px;
  gap: 2px;
  align-items: stretch;
}

.nc-step {
  width: 22px;
  height: 26px;
  border: 1px solid #111;
  background: #0b0b0b;
  color: #fff;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease;
}

.nc-step:hover {
  background: #1f1f1f;
}

.nc-step:active {
  background: #000;
  transform: scale(0.96);
}

.nc-qty {
  height: 26px;
  border: 1px solid #ddd;
  border-radius: 5px;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  color: #111;
  background: #fff;
  outline: none;
  min-width: 0;
  width: 100%;
  padding: 0;
  -moz-appearance: textfield;
}

.nc-qty::-webkit-outer-spin-button,
.nc-qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.nc-qty:focus {
  border-color: #111;
}

.nc-plus5 {
  height: 32px;
  padding: 0 10px;
  border-radius: 7px;
  background: #ff0000;
  color: #fff;
  border: 0;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: background 0.12s ease, transform 0.1s ease;
}

.nc-plus5:hover {
  background: #d40000;
}

.nc-plus5:active {
  transform: scale(0.96);
}

.nc-units {
  font-size: 11px;
  color: #666;
  text-align: center;
  font-weight: 600;
}

.nc-remove {
  background: transparent;
  border: 0;
  color: #999;
  font-size: 11px;
  cursor: pointer;
  padding: 2px;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.12s ease;
}

.nc-remove:hover {
  color: #b00020;
}

/* ===== Responsive ===== */
@media (max-width: 1100px) {
  .nc-card {
    flex-basis: 280px;
    height: 84px;
  }
  .nc-img-wrap {
    flex-basis: 84px;
    width: 84px;
  }
}

@media (max-width: 900px) {
  .new-carousel {
    margin: 0 12px 14px;
    padding: 8px 10px 10px;
    max-width: none;
    width: auto;
  }
  .new-carousel-title h3 {
    font-size: 13px;
  }
  .new-carousel-sub {
    font-size: 9px;
  }
  .ncn-btn {
    width: 26px;
    height: 26px;
    font-size: 15px;
  }
  .ncn-prev {
    left: 4px;
  }
  .ncn-next {
    right: 4px;
  }
  .nc-card {
    flex-basis: 260px;
    height: 80px;
  }
  .nc-img-wrap {
    flex-basis: 80px;
    width: 80px;
  }
  .nc-price-big {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .nc-card {
    flex-basis: 240px;
    height: 76px;
  }
  .nc-img-wrap {
    flex-basis: 76px;
    width: 76px;
  }
  .nc-content {
    padding: 5px 7px;
  }
  .nc-price-big {
    font-size: 11px;
  }
}

/* ================= UPSELL POPUP ================= */
.upsell-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: upsellFadeIn 0.25s ease;
}
@keyframes upsellFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.upsell-popup {
  background: #fff;
  border-radius: 18px;
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  position: relative;
}
.upsell-close-x {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: none;
  background: none;
  font-size: 26px;
  color: #999;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition:
    background 0.15s,
    color 0.15s;
  z-index: 1;
}
.upsell-close-x:hover {
  background: #f0f0f0;
  color: #333;
}
.upsell-header {
  text-align: center;
  padding: 24px 24px 12px;
  border-bottom: 1px solid #eee;
}
.upsell-title {
  font-size: 20px;
  font-weight: 800;
  color: #111;
  margin-bottom: 4px;
}
.upsell-subtitle {
  font-size: 14px;
  color: #555;
  margin-bottom: 10px;
}
.upsell-timer {
  display: inline-block;
  background: #1a1a2e;
  color: #ffd700;
  font-weight: 700;
  font-size: 13px;
  padding: 6px 16px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
}
.upsell-cards {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  flex: 1;
}
.upsell-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #f9f9f9;
  border: 1px solid #e8e8e8;
  border-radius: 14px;
  padding: 12px 16px;
  transition: border-color 0.2s;
}
.upsell-card:hover {
  border-color: #bbb;
}
.upsell-card img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 10px;
  background: #fff;
  flex-shrink: 0;
}
.upsell-card-info {
  flex: 1;
  min-width: 0;
}
.upsell-cod {
  font-size: 12px;
  font-weight: 700;
  color: #888;
}
.upsell-desc {
  font-size: 14px;
  font-weight: 600;
  color: #222;
  margin: 2px 0;
}
.upsell-uxb {
  font-size: 12px;
  color: #999;
}
.upsell-price-list {
  font-size: 12px;
  color: #aaa;
  margin-top: 2px;
}
.upsell-price-old {
  font-size: 13px;
  color: #888;
  margin-top: 1px;
}
.upsell-price-offer {
  font-size: 14px;
  color: #1a7a1a;
  font-weight: 700;
  margin-top: 2px;
  background: #edf7ed;
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-block;
}
.upsell-controls {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}
.upsell-minus,
.upsell-plus {
  width: 36px;
  height: 36px;
  border: 1px solid #ccc;
  background: #fff;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.upsell-minus {
  border-radius: 8px 0 0 8px;
}
.upsell-plus {
  border-radius: 0 8px 8px 0;
}
.upsell-minus:hover,
.upsell-plus:hover {
  background: #f0f0f0;
}
.upsell-qty {
  width: 40px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: #111;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  background: #fafafa;
}
.upsell-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 16px 24px 24px;
  border-top: 1px solid #eee;
  flex-wrap: wrap;
}
.upsell-btn-no {
  padding: 12px 28px;
  border-radius: 12px;
  border: 1px solid #ccc;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: background 0.15s;
}
.upsell-btn-no:hover {
  background: #f5f5f5;
}
.upsell-btn-add {
  padding: 12px 28px;
  border-radius: 12px;
  border: none;
  background: #1a7a1a;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.upsell-btn-add:hover {
  background: #15661a;
}

@media (max-width: 600px) {
  .upsell-popup {
    max-height: 95vh;
    border-radius: 14px;
  }
  .upsell-card {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
  }
  .upsell-card img {
    width: 52px;
    height: 52px;
  }
  .upsell-controls {
    width: 100%;
    justify-content: center;
  }
  .upsell-actions {
    flex-direction: column;
    gap: 8px;
  }
  .upsell-btn-no,
  .upsell-btn-add {
    width: 100%;
    justify-content: center;
  }
}

/* ================= MISSING ASSORTMENT MODULE (en carrito) ================= */
.missing-module {
  width: 100%;
  max-width: 100%;
  margin: 14px 0 0;
  background: #fff;
  border: 1px solid #ebebef;
  border-radius: 14px;
  padding: 14px 14px 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  --missing-row-h: 86px;
  --missing-gap: 8px;
}

/* Acento superior — gradient rojo Loekemeyer (matching profile card) */
.missing-module::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #b10000 0%, #e60000 50%, #1a1a1a 100%);
}

.missing-header {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.missing-header-left {
  flex: 1;
  min-width: 0;
}

.missing-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #d4d4d8;
  color: #111;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.2s ease;
  flex-shrink: 0;
}

.missing-refresh-btn svg {
  transition: transform 0.4s ease;
}

.missing-refresh-btn:hover {
  background: #111;
  color: #fff;
  border-color: #111;
}

.missing-refresh-btn:hover svg {
  transform: rotate(180deg);
}

.missing-refresh-btn:active {
  transform: scale(0.96);
}

.missing-title {
  font-size: 13px;
  font-weight: 800;
  color: #111;
  letter-spacing: -0.1px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.missing-title::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e60000;
  box-shadow: 0 0 0 2px rgba(230, 0, 0, 0.18);
}

.missing-subtitle {
  font-size: 10.5px;
  color: #777;
  font-weight: 500;
}

.missing-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--missing-gap);
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px; /* aire para la scrollbar */
  padding-bottom: 4px; /* aire para que el último item no toque el borde redondeado */
}

/* Scrollbar custom para mantenerlo discreto */
.missing-cards::-webkit-scrollbar {
  width: 8px;
}
.missing-cards::-webkit-scrollbar-track {
  background: transparent;
}
.missing-cards::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  border: 2px solid #fff;
  background-clip: padding-box;
}
.missing-cards::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.35);
  background-clip: padding-box;
  border: 2px solid #fff;
}

.missing-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  background: #fafafb;
  border: 1px solid #ececef;
  border-radius: 10px;
  padding: 8px;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
  min-width: 0;
  position: relative;
}

.missing-card img {
  align-self: center;
}

.missing-card:hover {
  border-color: #d4d4d8;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
  transform: translateY(-1px);
}

.missing-card.has-qty {
  background: #fffaf2;
  border-color: #f0c97a;
  box-shadow: inset 3px 0 0 #e6a800;
}

.missing-card img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  flex-shrink: 0;
  border: 1px solid #f0f0f0;
}

.missing-card-info {
  flex: 1;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: flex-start;
  gap: 3px;
  padding: 0;
}

.missing-desc {
  font-size: 11.5px;
  font-weight: 700;
  color: #111;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  text-align: center;
  width: 100%;
}

.missing-cod {
  font-weight: 700;
  color: #555;
  background: #f0f0f3;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 9.5px;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.missing-price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 1px;
  min-width: 0;
}

.missing-price-label {
  font-size: 9.5px;
  font-weight: 600;
  color: #666;
  white-space: nowrap;
  line-height: 1;
  flex-shrink: 0;
  display: none; /* compacto: ocultamos el "Tu precio contado:" */
}

.missing-price {
  color: #111;
  font-weight: 800;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1;
  flex-shrink: 0;
}

.missing-price-note {
  font-size: 9px;
  font-weight: 600;
  color: #888;
  letter-spacing: 0.1px;
  white-space: nowrap;
  line-height: 1;
}

.missing-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  align-self: center;
  margin-top: 4px;
}

.missing-step-btn {
  width: 22px;
  height: 22px;
  border: 1px solid #d4d4d8;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}

.missing-step-btn:active {
  transform: scale(0.94);
}

.missing-step-btn:first-child {
  border-radius: 6px 0 0 6px;
}

.missing-step-btn:last-child {
  border-radius: 0 6px 6px 0;
  background: #111;
  color: #fff;
  border-color: #111;
}

.missing-step-btn:first-child:hover {
  background: #f5f5f5;
  border-color: #bbb;
}

.missing-step-btn:last-child:hover {
  background: #e60000;
  border-color: #e60000;
}

.missing-qty {
  min-width: 24px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 800;
  color: #111;
  border-top: 1px solid #d4d4d8;
  border-bottom: 1px solid #d4d4d8;
  background: #fff;
  padding: 0 4px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .missing-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .missing-module {
    padding: 14px;
    border-radius: 12px;
    --missing-row-h: 90px;
  }
  .missing-title {
    font-size: 14px;
  }
  .missing-cards {
    grid-template-columns: 1fr;
  }
  .missing-card img {
    width: 56px;
    height: 56px;
  }
  .missing-card-info {
    padding-right: 72px;
  }
  .missing-desc {
    font-size: 12.5px;
  }
  .missing-price-note {
    font-size: 10px;
  }
}

/* ================= LOKE MODULE ================= */
.badge-loke {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #1a3a5c;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 10px;
  letter-spacing: 1px;
  z-index: 5;
}

.loke-notice {
  text-align: center;
  padding: 10px 40px;
  font-size: 13px;
  color: #666;
  font-weight: 600;
  margin-bottom: 10px;
}

#lokeLink {
  background: #1a3a5c;
  color: #fff !important;
  padding: 4px 14px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.5px;
  cursor: pointer;
}

#lokeLink:hover {
  background: #0f2a45;
}

.loke-cat-title {
  grid-column: 1 / -1;
  font-size: 40px;
  font-weight: bold;
  color: #ffffff;
  letter-spacing: 1.5px;
  padding: 16px 0 10px;
  border-bottom: 2px solid rgba(212, 181, 90, 0.25);
  margin-bottom: 20px;
}

#loke .products-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

#loke .product-card {
  padding: 24px;
}

#loke .product-card img {
  width: 100%;
  height: 260px;
  object-fit: contain;
  margin: 0 auto 14px;
  border-radius: 12px;
  background: #fff;
}

#loke .card-desc {
  font-size: 15px;
  min-height: 40px;
}

#loke .card-prices {
  margin-top: 8px;
}

#loke .loke-price-main {
  font-size: 15px;
  font-weight: 800;
}

#loke .loke-price-main strong {
  font-size: 18px;
}

#loke .add-btn {
  font-size: 15px;
  padding: 12px 18px;
  margin-top: 10px;
}

/* LOKE sort buttons */
.loke-sort-row {
  justify-content: flex-end;
  margin-bottom: 18px;
}

.loke-sort-buttons {
  display: inline-flex !important;
}

.loke-sort-buttons .ds-btn {
  background: #1e2330;
  border-color: rgba(255, 255, 255, 0.12);
  color: #ccc;
}

.loke-sort-buttons .ds-btn:hover {
  background: #252a33;
}

.loke-sort-buttons .ds-btn.active {
  background: #d4b55a;
  border-color: #d4b55a;
  color: #0e1117;
  font-weight: 800;
}

/* LOKE layout with sidebar */
.loke-layout {
  padding: 0 40px;
}

/* LOKE sidebar dark theme */
.loke-sidebar {
  background: #1e2330;
  border-color: rgba(255, 255, 255, 0.08);
}
.loke-sidebar .sidebar-title {
  color: #d4b55a;
}
.loke-sidebar .toggle-row {
  color: #e0e0e0;
}
.loke-sidebar .toggle-row:hover {
  background: rgba(255, 255, 255, 0.06);
}
.loke-sidebar .toggle-row.active {
  background: rgba(212, 181, 90, 0.12);
  font-weight: bold;
}
.loke-sidebar .toggle-text {
  color: #e0e0e0;
}
.loke-sidebar .toggle-ui {
  background: rgba(255, 255, 255, 0.15);
}
.loke-sidebar .toggle-row input:checked + .toggle-ui {
  background: #d4b55a;
}
.loke-sidebar .toggle-sep {
  background: rgba(255, 255, 255, 0.08);
}
.loke-sidebar::-webkit-scrollbar {
  width: 5px;
}
.loke-sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.loke-sidebar::-webkit-scrollbar-thumb {
  background: rgba(212, 181, 90, 0.35);
  border-radius: 4px;
}
.loke-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 181, 90, 0.55);
}

@media (max-width: 900px) {
  .loke-layout {
    grid-template-columns: 1fr;
    padding: 0 12px;
  }
  .loke-sidebar {
    display: none !important;
  }
  #loke .product-card img {
    height: 180px;
  }
  .loke-notice {
    padding: 10px 12px;
  }
}

@media (max-width: 480px) {
  #loke .product-card img {
    height: 220px;
  }
}

.loke-price-banner {
  text-align: center;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #1a3a5c;
  padding: 18px 40px 4px;
}

.loke-row {
  background: #f8f6ee;
}

.loke-cart-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: #d4b55a;
  color: #0e1117;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  margin: 0 0 4px 0;
  text-transform: uppercase;
  box-shadow: 0 1px 2px rgba(212, 181, 90, 0.3);
  width: fit-content;
}
.loke-cart-tag::after {
  /* line-break "fake" — fuerza a la descripción a quedar abajo */
  content: "";
  display: block;
}
/* Asegurar que el contenedor cell ponga la badge arriba del texto */
#carrito .cart-table td.desc:has(.loke-cart-tag) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ================= LOKE EXCLUSIVE LOOK ================= */
#loke {
  background: #0e1117;
  min-height: 100vh;
  padding-bottom: 60px;
}

#loke .section-header {
  padding: 0 40px;
}

#loke .back-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: #ccc;
}

#loke .back-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

.loke-title {
  color: #e8e0cc !important;
  font-size: 28px !important;
  letter-spacing: 2px;
}

.loke-headline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 40px 6px;
  flex-wrap: wrap;
}

.loke-headline-title {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 3px;
  color: #d4b55a;
}

.loke-headline-sep {
  color: rgba(255, 255, 255, 0.25);
  font-size: 28px;
}

.loke-headline-sub {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
  letter-spacing: 0.3px;
}

#loke .loke-notice {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  text-align: center;
  padding: 2px 40px 30px;
}

/* Cards Loke oscuras */
#loke .product-card {
  background: #1e2330;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e0e0e0;
  border-radius: 16px;
  transition:
    border-color 0.25s,
    box-shadow 0.25s;
  /* Flex column para empujar el botón al fondo siempre */
  display: flex;
  flex-direction: column;
}
/* Btn / cartbar siempre al fondo de la card, btn con ancho a contenido */
#loke .product-card > .add-btn {
  margin-top: auto;
  align-self: center; /* no stretch — ancho según contenido */
  padding: 10px 20px; /* mismo padding que el .add-btn del mayorista normal */
  font-size: inherit;
}
#loke .product-card > .card-cartbar {
  margin-top: auto;
}
/* Aire extra entre los precios y el botón */
#loke .product-card .card-prices {
  margin-bottom: 18px;
}

#loke .product-card:hover {
  border-color: rgba(212, 181, 90, 0.4);
  box-shadow: 0 4px 24px rgba(212, 181, 90, 0.15);
}

#loke .card-cod,
#loke .card-uxb {
  color: rgba(255, 255, 255, 0.5);
}

#loke .card-desc {
  color: #e8e0cc;
}

#loke .card-price-line {
  color: #ccc;
}

#loke .card-price-line strong {
  color: #d4b55a;
}

#loke .badge-loke {
  background: #d4b55a;
  color: #0e1117;
  box-shadow: 0 0 12px rgba(212, 181, 90, 0.4);
  border-radius: 8px;
}

#loke .add-btn {
  background: #d4b55a;
  color: #0e1117;
  font-weight: 800;
  border: none;
}

#loke .add-btn:hover {
  background: #c4a44e;
}

#loke .step-btn {
  background: #252a33;
  border-color: rgba(255, 255, 255, 0.12);
  color: #e0e0e0;
}

#loke .step-input {
  background: #1a1e26;
  border-color: rgba(255, 255, 255, 0.12);
  color: #e0e0e0;
}

#loke .chip {
  background: #252a33;
  border-color: rgba(255, 255, 255, 0.12);
  color: #ccc;
}

#loke .remove-btn {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.12);
  color: #999;
}

#loke .cartbar-label {
  color: rgba(255, 255, 255, 0.5);
}

#loke .cartbar-units {
  color: rgba(255, 255, 255, 0.5);
}

#loke .card-cartbar {
  border-top-color: rgba(255, 255, 255, 0.08);
}

#lokeLink {
  background: linear-gradient(135deg, #1a3a5c, #0e1117);
  border: 1px solid #d4b55a;
  color: #d4b55a !important;
}

#lokeLink:hover {
  background: linear-gradient(135deg, #0e1117, #1a3a5c);
}

@media (max-width: 900px) {
  #loke .section-header {
    padding: 0 12px;
  }
  .loke-headline {
    padding: 14px 12px 4px;
  }
  .loke-headline-title {
    font-size: 18px;
  }
  .loke-headline-sub {
    font-size: 13px;
  }
  #loke .loke-notice {
    padding: 4px 12px 16px;
  }
}

/* ================= LOKE PRICE COMPARISON ================= */
.loke-price-main strong {
  color: #d4b55a;
  font-size: 16px;
}

.loke-price-equiv {
  margin-top: 6px;
  font-size: 13px;
}

.loke-equiv-label {
  color: rgba(255, 255, 255, 0.55);
}

.loke-equiv-strike {
  color: #d45555;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}

/* ================= LOKE TOPBAR ================= */
.loke-topbar {
  padding: 20px 40px 0;
}

.loke-back-btn {
  background: rgba(212, 181, 90, 0.08);
  border: 1px solid rgba(212, 181, 90, 0.3);
  color: #d4b55a;
  padding: 8px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s;
}

.loke-back-btn:hover {
  background: rgba(212, 181, 90, 0.18);
  color: #d4b55a;
  border-color: rgba(212, 181, 90, 0.5);
}

@media (max-width: 900px) {
  .loke-topbar {
    padding: 14px 12px 0;
  }
}

/* ================= HEADER LOKE MODE ================= */
.header.loke-mode {
  background: #1a3a5c;
  border-bottom-color: #15304d;
}

/* ================= LOKE HERO TITLE ================= */
/* loke-hero removed — replaced by loke-headline */

/* ================= LOKE BUTTON GIF ================= */
#lokeLink {
  padding: 0 !important;
  border-radius: 10px;
}

.loke-btn-gif {
  width: 52px;
  height: 36px;
  display: block;
  border-radius: 10px;
  object-fit: cover;
  clip-path: inset(2px 4px 2px 4px round 8px);
}

/* ================= HEADER RESPONSIVE INTERMEDIO ================= */
/* Logo y nav-right son absolute → quedan fuera del flujo del nav-center.
   Entre 901 y ~1280 el nav-center centrado choca con ellos.
   Mobile (<=900) ya oculta nav-center / nav-right; desktop ancho no necesita ajuste. */
@media (min-width: 901px) and (max-width: 1280px) {
  .header {
    padding: 12px 16px;
  }
  .logo {
    left: 16px;
  }
  .logo-img {
    height: 50px;
  }
  .nav-center {
    gap: 14px;
  }
  .nav-search {
    width: 170px;
  }
  .nav-right {
    right: 16px;
    gap: 8px;
  }
  #ctaCliente,
  #loginBtn {
    padding: 0 12px;
    font-size: 13px;
  }
  /* Cards: 4 cols no entran con sidebar; bajar a 3 evita el corte lateral */
  .products-grid,
  #loke .products-grid {
    grid-template-columns: repeat(3, minmax(0, 280px));
    justify-content: center;
    gap: 18px;
  }
  .product-card {
    min-width: 0;
    overflow: hidden;
  }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .logo-img {
    height: 44px;
  }
  .nav-center {
    gap: 10px;
  }
  .nav-search {
    width: 130px;
  }
  .nav-center a,
  .nav-center button.nav-link {
    font-size: 13px;
  }
  .loke-btn-gif {
    width: 44px;
    height: 30px;
  }
  /* Liberar espacio: el CTA va al menú/footer en este rango */
  #ctaCliente {
    display: none !important;
  }
  /* 2 cols pegadas, ancho fijo de card para que no se corte la derecha */
  .products-layout {
    grid-template-columns: 200px 1fr;
    gap: 20px;
    padding: 0 32px !important;
  }
  .products-grid,
  #loke .products-grid {
    grid-template-columns: repeat(2, minmax(0, 290px));
    justify-content: start;
    gap: 16px;
  }
}

/* ================= SHIP CONFIRM (1 sucursal) =================
   Dropdown más ancho (2fr), botón más chico al costado (auto). */
.ship-card.has-confirm {
  display: grid;
  grid-template-columns: 2fr auto;
  grid-template-rows: auto auto auto;
  column-gap: 24px !important;
}

.ship-card.has-confirm .ship-label {
  grid-column: 1 / -1;
}

.ship-card.has-confirm .ship-select {
  grid-column: 1;
}

/* Cuando el ship-select fue envuelto por el custom dropdown CS,
   el grid-child es .cs-dropdown-ship (no el <select> oculto). */
.ship-card.has-confirm .cs-dropdown-ship {
  grid-column: 1;
}

/* ============================================================
   SHIPPING DROPDOWN — variante CS para el carrito
   Mismo look que "Pedir para" (cs-dropdown-card).
   ============================================================ */
.cs-dropdown-ship .cs-trigger {
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  font-weight: 700;
  font-size: 14px;
  color: #111;
  min-height: 42px;
}

.cs-dropdown-ship .cs-trigger:hover {
  border-color: #bbb;
}

.cs-dropdown-ship .cs-trigger[aria-expanded="true"] {
  border-color: #d00000;
}

.cs-dropdown-ship .cs-trigger-arrow {
  color: #d00000;
}

.ship-card.has-confirm .ship-confirm-btn {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  margin: 0;
  padding: 10px 18px;
  white-space: nowrap;
}

.ship-card.has-confirm .ship-hint {
  grid-column: 1 / -1;
}

.ship-confirm-btn {
  padding: 8px 14px; /* compacto, no full-width */
  border-radius: 10px;
  border: 1px solid #111;
  background: #111;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  height: auto;
  width: auto;
}

.ship-confirm-btn:hover {
  background: #333;
}

.ship-confirm-btn.confirmed {
  background: #0a7a2f;
  border-color: #0a7a2f;
  cursor: default;
}

/* =========================
   ENTRY NOTIFICACIONES EN DROPDOWN
   ========================= */
.user-menu-notif {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.menu-notif-badge {
  background: #e60000;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
  padding: 2px 8px;
  min-width: 22px;
  text-align: center;
  line-height: 1.2;
  display: inline-block;
}
.menu-notif-badge[hidden] {
  display: none !important;
}
.notif-badge[hidden] {
  display: none !important;
}
.profile-btn[hidden] {
  display: none !important;
}

/* Cuando el botón está oculto via inline `style="display:none"` el !important
   de arriba no debe forzarlo a mostrarse. Hack: usamos [hidden]/style. */
.user-menu-notif[style*="display: none"] {
  display: none !important;
}

/* =========================
   NOTIFICACIONES VENDEDOR (perfil)
   ========================= */
#vendorNotifsCard .profile-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

#vendorNotifsCard .profile-card-actions {
  gap: 14px;
  margin-top: 16px;
  flex-wrap: wrap;
}

#vendorNotifsCard .profile-card-actions .profile-btn {
  padding: 10px 22px;
  font-size: 14px;
}

.notif-badge {
  background: #e60000;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
  padding: 2px 8px;
  min-width: 22px;
  text-align: center;
  line-height: 1.2;
}

/* === Timeline notificaciones === */
.notif-timeline {
  display: flex;
  flex-direction: column;
}

.notif-thead,
.notif-row {
  display: grid;
  /* Cols shrinkables (minmax(0, X)) → todo se achica para entrar sin scroll
     horizontal. Sin fixed widths grandes. */
  grid-template-columns: 20px minmax(0, 2fr) minmax(0, 0.6fr) minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1.1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.notif-thead {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #555;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--border, #e5e5e5);
  margin-bottom: 4px;
}

.notif-row {
  padding: 14px 0;
  position: relative;
}

.notif-row + .notif-row {
  border-top: 1px solid #f0f0f0;
}

.notif-spine {
  position: relative;
  height: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}

.notif-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #d4d4d4;
  transform: translateX(-50%);
  z-index: 0;
}

.notif-row.first-row .notif-line {
  top: 50%;
}

.notif-row.last-row .notif-line {
  bottom: 50%;
}

.notif-dot {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #999;
  z-index: 1;
  box-shadow: 0 0 0 3px #fff;
}

.notif-dot.unread {
  background: #e60000;
  border-color: #e60000;
}

.notif-cell {
  font-size: 14px;
  line-height: 1.3;
  min-width: 0;
}

.notif-cell-client {
  font-weight: 600;
}

.notif-client-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  color: #111;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.3;
  width: 100%;
  white-space: normal;
}

.notif-client-link:hover {
  text-decoration: underline;
  color: #b10000;
}

.notif-cod {
  color: #888;
  font-weight: 500;
  font-size: 13px;
}

.notif-cell-date {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #333;
}

.notif-cell-action .profile-btn {
  width: 100%;
  padding: 8px 10px;
  font-size: 12px;
  white-space: normal;
  word-break: break-word;
  line-height: 1.2;
  min-width: 0;
}

/* Estado del pedido (stepper compacto) */
.notif-cell-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.notif-stage-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.notif-cell-stage .o-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.notif-cell-stage .o-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e5e5e5;
  border: 2px solid #cfcfcf;
  flex-shrink: 0;
}

.notif-cell-stage .o-dot.done {
  background: #111;
  border-color: #111;
}

.notif-cell-stage .o-dot.current {
  transform: scale(1.25);
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.1);
}

.notif-cell-stage .o-line {
  width: 18px;
  height: 2px;
  background: #e5e5e5;
}

.notif-cell-stage .o-line.done {
  background: #111;
}

.notif-stage-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.notif-stage-label.o-stage-0 {
  color: #888;
}

.notif-stage-label.o-stage-1 {
  color: #b07d00;
}

.notif-stage-label.o-stage-2 {
  color: #2e7d32;
}

.notif-stage-sub {
  font-size: 10.5px;
  color: #666;
  font-weight: 600;
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.notif-cell-action .notif-suggest-btn,
.notif-cell-action .notif-suggest-btn:visited {
  background: #6b7280;
  color: #fff;
  border: 1px solid #6b7280;
}

.notif-cell-action .notif-suggest-btn:hover {
  background: #4b5563;
  border-color: #4b5563;
}

.notif-cell-action .notif-suggest-btn:active {
  background: #374151;
}

@media (max-width: 720px) {
  .notif-thead {
    display: none;
  }
  .notif-row {
    grid-template-columns: 36px 1fr;
    grid-template-areas:
      "spine client"
      "spine date"
      "spine stage"
      "spine actions";
    row-gap: 6px;
    padding: 14px 0;
  }
  .notif-row .notif-spine {
    grid-area: spine;
  }
  .notif-row .notif-cell-client {
    grid-area: client;
  }
  .notif-row .notif-cell-date {
    grid-area: date;
    font-size: 12px;
    color: #777;
  }
  .notif-row .notif-cell-stage {
    grid-area: stage;
    align-items: flex-start;
  }
  .notif-row .notif-cell-action {
    display: inline-block;
    margin-right: 8px;
  }
  .notif-row .notif-cell-action {
    grid-area: actions;
  }
}

/* =========================
   MODAL DETALLE PEDIDO (vendedor)
   ========================= */
.modal .vendor-modal-card,
.vendor-modal-card {
  max-width: 760px !important;
  max-height: 88vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 32px 36px 40px !important;
  position: relative !important;
  margin: 6vh auto !important;
}

.vendor-modal-card .modal-title {
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -0.2px;
  color: #111;
  margin: 0 0 24px 0 !important;
  padding: 0 44px 18px 0;
  border-bottom: 2px solid #111;
  line-height: 1.25;
}

.vendor-modal-body {
  font-size: 13.5px;
}

/* Botón X de cierre arriba-derecha */
.vendor-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  color: #555;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease;
  z-index: 2;
}

.vendor-modal-close:hover {
  background: #f0f0f0;
  color: #000;
}

.vendor-modal-close:active {
  background: #e0e0e0;
}

.vd-total-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #111;
  color: #fff;
  border-radius: 10px;
  padding: 14px 20px;
  margin-bottom: 18px;
  gap: 12px;
}

.vd-total-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  opacity: 0.85;
}

.vd-total-amount {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.vd-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  padding: 12px 0 18px;
  border-bottom: 1px solid var(--border, #e5e5e5);
  margin-bottom: 18px;
}

.vd-table-wrap {
  overflow-x: auto;
}

.vd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.vd-table th,
.vd-table td {
  border-bottom: 1px solid var(--border, #eee);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.vd-table th {
  background: #f7f7f7;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.vd-num {
  text-align: right !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.vd-desc {
  max-width: 280px;
}

.vd-empty {
  text-align: center !important;
  color: #888;
  padding: 18px !important;
}

.vd-total {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border, #e5e5e5);
  text-align: right;
  font-size: 16px;
  font-weight: 700;
}

.vendor-modal-card .modal-actions {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border, #eee);
}

/* =========================
   MODAL SUGERIR PRODUCTOS (vendedor)
   ========================= */
.vs-section-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #444;
  margin: 12px 0 8px;
}

.vs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.vs-card {
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 10px;
  padding: 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vs-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fafafa;
  border-radius: 6px;
}

.vs-tag {
  display: inline-block;
  background: #e60000;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  padding: 2px 6px;
  border-radius: 4px;
  width: fit-content;
}

.vs-cod {
  font-size: 11px;
  color: #888;
  font-weight: 600;
}

.vs-desc {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vs-meta {
  font-size: 12px;
  color: #555;
}

/* Banner cliente activo */
.vs-customer-banner {
  background: #fff8e6;
  border: 1px solid #ffd266;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13.5px;
  margin-bottom: 16px;
}

/* Motivo IA */
.vs-motivo {
  background: #fff8e6;
  border-left: 3px solid #ffc107;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.35;
  color: #5b4a00;
  margin: 4px 0 6px;
  font-style: italic;
}

/* Precio destacado */
.vs-price-block {
  background: #f7f7f7;
  border-radius: 8px;
  padding: 6px 10px;
  margin: 4px 0 8px;
  text-align: center;
}

.vs-price {
  font-size: 16px;
  font-weight: 800;
  color: #111;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}

.vs-uxb {
  font-size: 10px;
  color: #777;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Stepper + botón Agregar */
.vs-action {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.vs-qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.vs-qty-label {
  font-size: 12px;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.vs-stepper {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border, #ddd);
  border-radius: 6px;
  overflow: hidden;
  height: 30px;
  width: 96px;
  flex: 0 0 96px;
}

.vs-step-btn {
  width: 26px;
  background: #f4f4f4;
  border: none;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  color: #111;
  transition: background 0.15s ease;
  padding: 0;
}

.vs-step-btn:hover {
  background: #e8e8e8;
}

.vs-step-in {
  flex: 1;
  border: none;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  -moz-appearance: textfield;
  background: #fff;
  min-width: 0;
  padding: 0;
}

.vs-step-in::-webkit-outer-spin-button,
.vs-step-in::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.vs-add-btn {
  width: 100%;
  padding: 9px 12px !important;
  font-size: 13px !important;
}

.vs-add-btn.vs-added {
  background: #0a7a2f !important;
  border-color: #0a7a2f !important;
  color: #fff !important;
}

.vs-empty {
  text-align: center;
  color: #888;
  padding: 24px;
}

@media (max-width: 720px) {
  .vd-header {
    grid-template-columns: 1fr;
  }
  .vd-table {
    font-size: 12px;
  }
  .vendor-modal-card {
    max-width: 96vw !important;
    margin: 4vh auto !important;
  }
}

/* =========================
   GUARDAR PEDIDO (DRAFT) — botones en línea
   ========================= */
.save-draft-buttons {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-top: 14px;
}

.save-draft-buttons .save-draft-cancel {
  flex: 0 0 auto;
  min-width: 110px;
  padding: 10px 18px;
}

.save-draft-buttons .save-draft-confirm {
  flex: 1 1 auto;
  padding: 10px 18px;
  font-weight: 700;
}

@media (max-width: 480px) {
  .save-draft-buttons {
    flex-direction: column-reverse;
  }
  .save-draft-buttons .save-draft-cancel,
  .save-draft-buttons .save-draft-confirm {
    width: 100%;
  }
}

/* =========================
   GUARDAR PEDIDO (DRAFT) — info box
   ========================= */
.save-draft-where {
  margin-top: 14px;
  padding: 14px 16px;
  background: linear-gradient(180deg, #fff8e6 0%, #fff3cc 100%);
  border: 1px solid #ffd266;
  border-left: 4px solid #e6a800;
  border-radius: 10px;
  color: #5b4a00;
  line-height: 1.5;
  font-size: 13px;
}

.save-draft-where .sdw-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 13px;
  color: #5b4a00;
  margin-bottom: 6px;
}

.save-draft-where .sdw-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e6a800;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.save-draft-where .sdw-body {
  font-size: 12.5px;
  color: #5b4a00;
}

.save-draft-where em {
  font-style: normal;
  font-weight: 700;
  background: rgba(230, 168, 0, 0.18);
  padding: 1px 6px;
  border-radius: 4px;
}

/* =========================
   PROFILE SUMMARY — REDISEÑO ESTÉTICO
   (sobreescribe reglas previas)
   ========================= */
#perfil .profile-summary {
  background: #fff !important;
  border: 1px solid #e7e7ea !important;
  border-radius: 16px !important;
  padding: 32px 28px 24px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Acento superior — gradiente rojo Loekemeyer para clientes */
#perfil .profile-summary::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  height: 5px !important;
  background: linear-gradient(90deg, #b10000 0%, #e60000 50%, #1a1a1a 100%) !important;
}

/* Acento superior — gradiente dorado/oscuro para vendedor en perfil propio */
#perfil .profile-summary.is-vendor-profile::before {
  background: linear-gradient(90deg, #c79100 0%, #e6a800 40%, #5b4a00 100%) !important;
}

/* Underline del nombre — también distinto */
#perfil .profile-summary.is-vendor-profile .profile-ra::after {
  background: #c79100 !important;
}

/* Razón social — más prominente, centrado */
#perfil .profile-ra {
  text-align: center !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -0.4px !important;
  color: #111 !important;
  margin: 8px 0 6px !important;
  line-height: 1.2 !important;
  position: relative !important;
  padding-bottom: 18px !important;
}

#perfil .profile-ra::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  width: 56px !important;
  height: 3px !important;
  background: #e60000 !important;
  border-radius: 2px !important;
  transform: translateX(-50%) !important;
}

/* Grid de datos como pills — cols adaptables según items visibles.
   Default 4 cols (Cod, CUIT, Correo, DTO Vol). Si falta dto_vol → 3 cols
   (Cod, CUIT, Correo). Si faltan dto_vol y correo → 2 cols (Cod, CUIT). */
#perfil .profile-row.two,
#perfil .profile-row.data-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  font-size: 14px !important;
  margin: 22px 0 0 !important;
  padding: 0 !important;
}
#perfil .profile-row.data-grid[data-count="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
#perfil .profile-row.data-grid[data-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* Mobile: vuelve a wrap auto-fit */
@media (max-width: 700px) {
  #perfil .profile-row.two,
  #perfil .profile-row.data-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  }
}

#perfil .profile-row.two > div,
#perfil .profile-row.data-grid > div {
  background: #f7f7f8 !important;
  border: 1px solid #ececef !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  display: flex;
  flex-direction: column;
  gap: 4px !important;
  transition: border-color 0.15s ease, background 0.15s ease !important;
  margin: 0 !important;
}

/* Asegurar que display:none inline gane (vendor / cliente sin dto vol) */
#perfil .profile-row.data-grid > div[style*="display: none"],
#perfil .profile-row.data-grid > div[style*="display:none"],
#perfil .profile-row.two > div[style*="display: none"],
#perfil .profile-row.two > div[style*="display:none"] {
  display: none !important;
}

#perfil .profile-row.two > div:hover,
#perfil .profile-row.data-grid > div:hover {
  background: #fff !important;
  border-color: #d4d4d8 !important;
}

/* Label (b) → uppercase track */
#perfil .profile-row.two > div b,
#perfil .profile-row.data-grid > div b {
  display: block !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #888 !important;
  margin: 0 !important;
}

/* Value (span) → mediano */
#perfil .profile-row.two > div span,
#perfil .profile-row.data-grid > div span {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #111 !important;
  font-variant-numeric: tabular-nums !important;
  word-break: break-word !important;
}

/* Cod Cliente: destacado más grande (es el dato más importante) */
#perfil .profile-row.data-grid #pfCodCliente {
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: -0.4px;
  color: #c0392b !important;
}

/* Correo: aún más chica para que cada email entre */
#perfil .profile-row.data-grid #pfCorreo {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  line-height: 1.3;
  word-break: break-all;
}

/* Vendedor en su perfil propio (sin cliente seleccionado): ocultar
   "Análisis de tus compras" tanto en perfil como en el dropdown del menú.
   Cuando el vendedor selecciona un cliente, Análisis SÍ aparece (es del
   cliente que está viendo). */
body.is-vendor-user.is-vendor-own-mode #profileCardAnalisis,
body.is-vendor-user.is-vendor-own-mode #menuAnalisis,
body.is-vendor-user.is-vendor-own-mode #menuAnalisisMobile {
  display: none !important;
}

/* Empty state compacto con carita triste — para Historial Pedidos Web,
   Pedidos sin Confirmar y otras cards sin contenido. */
#perfil .empty-state-mini {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  color: #555;
}
#perfil .empty-state-mini-face {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
}
#perfil .empty-state-mini-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#perfil .empty-state-mini-text strong {
  font-size: 14px;
  font-weight: 800;
  color: #222;
  line-height: 1.2;
}
#perfil .empty-state-mini-text span {
  font-size: 12px;
  color: #777;
  line-height: 1.4;
}

/* "Avisar de un error" — más chico, no full-width gigante */
#perfil .profile-bottom .profile-btn.big {
  padding: 9px 18px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  width: auto !important;
  min-width: 0 !important;
}

/* Cap visual a ~3 filas + scroll interno para Historial de Pedidos Web,
   Pedidos sin Confirmar y Pedidos Clientes (vendor). Si hay más, scroll. */
#perfil #myOrdersBox,
#perfil #draftCartsBox,
#perfil #vendorNotifsBox {
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

/* Scrollbar custom delgada */
#perfil #myOrdersBox::-webkit-scrollbar,
#perfil #draftCartsBox::-webkit-scrollbar,
#perfil #vendorNotifsBox::-webkit-scrollbar {
  width: 8px;
}
#perfil #myOrdersBox::-webkit-scrollbar-track,
#perfil #draftCartsBox::-webkit-scrollbar-track,
#perfil #vendorNotifsBox::-webkit-scrollbar-track {
  background: transparent;
}
#perfil #myOrdersBox::-webkit-scrollbar-thumb,
#perfil #draftCartsBox::-webkit-scrollbar-thumb,
#perfil #vendorNotifsBox::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  border: 2px solid #fff;
  background-clip: padding-box;
}
#perfil #myOrdersBox::-webkit-scrollbar-thumb:hover,
#perfil #draftCartsBox::-webkit-scrollbar-thumb:hover,
#perfil #vendorNotifsBox::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.35);
  background-clip: padding-box;
  border: 2px solid #fff;
}

/* Vendor en perfil propio: ocultar Ver Historial / Ver Sugerencias
   (no aplican al vendedor mismo, solo cuando actúa como cliente). */
#perfil .profile-summary.is-vendor-profile .profile-pass-actions-right {
  display: none !important;
}

/* Vendor en perfil propio: Modificar Contraseña centrado (sin compañía a la der) */
#perfil .profile-summary.is-vendor-profile .profile-pass-wrap {
  justify-content: center !important;
}

/* Vendor en perfil propio: data-count en el grid ya define las cols
   responsivamente (2|3|4). Ya no forzamos 3 cols fijas. */

/* Pedidos Clientes (vendor): botones de acción que adapten — wrap si no entran */
#perfil #vendorNotifsBox .vd-row,
#perfil #vendorNotifsBox > div {
  min-width: 0;
}
#perfil #vendorNotifsBox button {
  white-space: normal;
  word-break: break-word;
  min-width: 0;
}

/* Botones compactos (estilo Modificar Contraseña): para Agregar Sucursal,
   Ver Más, etc. Outline gris, padding reducido. */
#perfil .profile-btn.profile-btn--compact {
  padding: 8px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #555 !important;
  border: 1.5px solid #ddd !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}
#perfil .profile-btn.profile-btn--compact:hover {
  background: #f5f5f5 !important;
  border-color: #999 !important;
  color: #111 !important;
}

/* Header de la card de sucursales: btn Agregar (izq, negro) + título (der) */
#perfil .profile-card-head--addr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
#perfil .profile-card-head--addr .profile-card-title {
  margin: 0 !important;
}

/* Sucursales: actions row — Agregar Sucursal abajo IZQ, Ver Más a la der */
#perfil .profile-card-actions--addr {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap;
  margin-top: 12px !important;
}

/* Botón dark (negro) — para Agregar Sucursal */
#perfil .profile-btn.profile-btn--dark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  background: #111 !important;
  color: #fff !important;
  border: 1.5px solid #111 !important;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease !important;
  white-space: nowrap;
}
#perfil .profile-btn.profile-btn--dark:hover {
  background: #333 !important;
  border-color: #333 !important;
}

/* ============================================================
   SUCURSALES — 4 por fila, compactas
   ============================================================ */
#perfil .addr-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}
/* Cuando hay pocas sucursales, que ocupen todo el ancho */
#perfil .addr-list[data-count="1"] {
  grid-template-columns: minmax(0, 1fr);
}
#perfil .addr-list[data-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#perfil .addr-list[data-count="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  #perfil .addr-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #perfil .addr-list[data-count="1"] {
    grid-template-columns: minmax(0, 1fr);
  }
  #perfil .addr-list[data-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 800px) {
  #perfil .addr-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #perfil .addr-list[data-count="1"] {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 380px) {
  #perfil .addr-list {
    grid-template-columns: 1fr;
  }
}

#perfil .addr-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 9px;
  background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
  border: 1px solid #e7e7ea;
  border-radius: 9px;
  min-width: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
#perfil .addr-item--pending {
  border-color: #f0d28a;
  background: #fffbf2;
}

#perfil .addr-item:hover {
  border-color: #c0392b;
  box-shadow: 0 4px 12px rgba(192, 57, 43, 0.08);
  transform: translateY(-1px);
}

#perfil .addr-slot {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: -0.3px;
  box-shadow: 0 2px 4px rgba(192, 57, 43, 0.25);
}

#perfil .addr-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#perfil .addr-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #222;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#perfil .addr-meta {
  font-size: 9.5px;
  color: #888;
  letter-spacing: 0.2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#perfil .addr-pending {
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1;
  cursor: help;
}

@media (max-width: 600px) {
  #perfil .addr-item {
    padding: 10px 12px;
    gap: 10px;
  }
  #perfil .addr-slot {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  #perfil .addr-label {
    font-size: 13px;
    white-space: normal; /* en mobile dejamos wrap */
  }
}

/* Acciones del perfil: Modificar Contraseña (izq) + Ver Historial / Sugerencias (der) */
/* profile-pass-wrap: Modificar Contraseña a la izq + Ver Historial/Sugerencias
   en bottom right (en línea, uno al lado del otro). */
#perfil .profile-pass-wrap {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 22px !important;
  padding-top: 4px !important;
  border-top: 0 !important;
  flex-wrap: wrap;
}

#perfil .profile-pass-wrap .profile-pass-actions-right {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin-left: auto;
}

/* Mobile: stack vertical full width */
@media (max-width: 720px) {
  #perfil .profile-pass-wrap {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #perfil .profile-pass-wrap .profile-pass-actions-right {
    flex-wrap: wrap !important;
    width: 100%;
    margin-left: 0;
  }
  #perfil .profile-pass-wrap .profile-pass-actions-right .profile-btn {
    flex: 1 1 auto;
  }
}

/* Sacar la línea horizontal abajo del row de datos del cliente
   (era .profile-row { border-bottom } que mostraba antes que la
   profile-pass-wrap se considere). */
#perfil .profile-summary .profile-row {
  border-bottom: 0 !important;
}

#perfil .profile-pass-wrap .profile-pass-actions-right {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Estilo base compacto para todos los btns del wrap */
#perfil .profile-pass-wrap .profile-btn {
  padding: 8px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
  white-space: nowrap;
}

/* Modificar Contraseña — primary destacado (dark fill) */
#perfil .profile-pass-wrap > #btnOpenPassModal.profile-btn {
  background: #111 !important;
  color: #fff !important;
  border: 1.5px solid #111 !important;
}
#perfil .profile-pass-wrap > #btnOpenPassModal.profile-btn:hover {
  background: #333 !important;
  border-color: #333 !important;
}

/* Ver Historial / Ver Sugerencias — outline subtle */
#perfil .profile-pass-wrap .profile-pass-actions-right .profile-btn {
  background: #fff !important;
  color: #555 !important;
  border: 1.5px solid #ddd !important;
}
#perfil .profile-pass-wrap .profile-pass-actions-right .profile-btn:hover {
  background: #f5f5f5 !important;
  border-color: #999 !important;
  color: #111 !important;
}

/* Mobile */
@media (max-width: 720px) {
  #perfil .profile-summary {
    padding: 24px 18px 18px !important;
  }
  #perfil .profile-ra {
    font-size: 20px !important;
  }
  #perfil .profile-row.two {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

/* =========================================================
   CARRITO ESTÉTICA CHEF — adaptado a marca Loekemeyer (rojo)
   Cards con stripe lateral roja, labels uppercase, pay-buttons
   con hover/selected, web-note como chip elegante, totals premium.
   ========================================================= */

/* Header del carrito */
#carrito .section-title {
  font-weight: 800;
  letter-spacing: -0.3px;
}

#carrito .section-title #pedidoTotalHeader,
#carrito .section-title strong {
  color: inherit;
}

/* Header del carrito: grid 3 columnas × 2 filas
   Fila 1: [back-btn] [TÍTULO] [Guardar pedido]   ← TODOS al mismo alto
   Fila 2: [empty]    [Confirmar pedido] [empty]
   Más aire vertical: row-gap entre fila 1 y 2, margin-bottom para separar de cards */
#carrito .section-header {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    "back title guardar"
    ".    confirm ."
    "edit edit edit";
  align-items: center;
  row-gap: 10px;
  column-gap: 16px;
  padding: 0 24px 4px !important; /* match con cart-2col padding lateral */
  margin: 0 auto 14px !important;
  max-width: 1320px;
  min-height: 0 !important;
}

/* Back-btn del carrito — match estilo del resto de botones del header
   (mismo padding/font/border-radius que Guardar pedido y Confirmar) */
#carrito .section-header .back-btn {
  position: static !important;
  grid-area: back;
  justify-self: start;
  align-self: center;
  left: auto !important;
  top: auto !important;
  transform: none !important; /* anula translateY(-50%) heredado del CSS viejo */
  margin: 0 !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  border-radius: 8px !important;
  background: #fff !important;
  border: 1.5px solid #ddd !important;
  color: #333 !important;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease,
    color 0.15s ease;
}

#carrito .section-header .back-btn:hover {
  background: #f5f5f5 !important;
  border-color: #999 !important;
  color: #111 !important;
}

/* Centro: display contents → sus hijos pasan a ser hijos directos del grid
   y se posicionan via grid-area cada uno */
#carrito .section-header .section-center {
  display: contents;
}

#carrito .section-header .section-center .section-title {
  grid-area: title;
  justify-self: center;
  align-self: center;
  margin: 0;
  text-align: center;
  white-space: nowrap;
}

#carrito .section-header .section-center .submit-order {
  grid-area: confirm;
  justify-self: center;
  margin: 0;
  padding: 9px 22px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  width: auto !important;
  min-width: 200px;
  border-radius: 8px !important;
  white-space: nowrap;
}

/* orderStatus oculto → no ocupa espacio en el grid */
#carrito .section-header .section-center #orderStatus {
  display: none;
}

/* Cartel "Estás editando…" → fila propia, a lo ancho, debajo de Confirmar */
#carrito #editOrderBanner {
  grid-area: edit;
  justify-self: stretch;
  align-self: center;
  width: 100%;
  max-width: none;
  margin-top: 4px;
  text-align: center;
  line-height: 1.3;
  justify-content: center;
}

/* Botón "Cancelar edición" dentro del cartel amarillo → chico, sin el tamaño
   grande de .hist-btn */
#carrito #editOrderBanner #cancelEditBtn {
  min-width: 0;
  height: auto;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  flex: 0 0 auto;
}

/* Confirmar pedido HABILITADO → verde (no disabled) */
#carrito .section-header .section-center .submit-order:not(:disabled),
#carrito .submit-order:not(:disabled):not(.is-disabled) {
  background: linear-gradient(135deg, #0a7a2f 0%, #12a040 100%) !important;
  border-color: #0a7a2f !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(10, 122, 47, 0.25);
}

#carrito .submit-order:not(:disabled):not(.is-disabled):hover {
  background: linear-gradient(135deg, #086623 0%, #0fa039 100%) !important;
  box-shadow: 0 6px 16px rgba(10, 122, 47, 0.35);
}

/* Disabled mantiene gris */
#carrito .submit-order:disabled,
#carrito .submit-order.is-disabled {
  background: #999 !important;
  border-color: #999 !important;
  color: #fff !important;
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none !important;
}

/* Acciones top (col derecha) — solo Guardar pedido, alineado al borde der */
#carrito .order-actions-top {
  grid-area: guardar;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin: 0 !important;
  justify-self: end;
  align-self: center;
  min-width: 200px;
  max-width: 240px;
}

/* Status oculto (los hints viven en cada card) */
#carrito #orderStatus.order-status-top {
  display: none !important;
}

/* Guardar pedido — amarillo, full width del wrapper */
#carrito .order-actions-top .back-outline,
#carrito .order-actions-top .save-draft-btn {
  margin: 0;
  padding: 8px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  width: 100% !important;
  border-radius: 8px !important;
  white-space: nowrap;
  background: #fff8e6 !important;
  border: 1.5px solid #e6a800 !important;
  color: #5b4a00 !important;
}

#carrito .order-actions-top .back-outline:hover,
#carrito .order-actions-top .save-draft-btn:hover {
  background: #ffeeb0 !important;
  border-color: #c98e00 !important;
}

/* Confirmar pedido — primario destacado, full width del wrapper */
#carrito .order-actions-top .submit-order {
  margin: 0;
  padding: 9px 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  width: 100% !important;
  border-radius: 8px !important;
  white-space: nowrap;
}

/* ============================================================
   LAYOUT 2 COLUMNAS DEL CARRITO
   IZQ: Razón Social + Dirección + Pago
   DER: Detalle del pedido + Totales + Botones
   ============================================================ */
#carrito .cart-2col {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr);
  grid-template-areas:
    "left right"
    "bottom bottom";
  gap: 10px 32px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
  /* Top row: ambas cols se estiran al alto de la más alta (left = ship+pay).
     Bottom row spans ambas cols, no le afecta align-items. */
  align-items: stretch;
}
#carrito .cart-2col > .cart-col-left { grid-area: left; }
#carrito .cart-2col > .cart-col-right { grid-area: right; align-self: stretch; }
#carrito .cart-2col > .cart-bottom-row { grid-area: bottom; align-self: start; }

/* Bottom row: totales con ancho ~content, missing fill resto.
   align-items: start para que cada celda tome su alto natural. El sync JS
   fuerza missingModule.height = totals.height (no usar stretch para evitar
   loops de ResizeObserver). */
#carrito .cart-bottom-row {
  display: grid;
  grid-template-columns: minmax(420px, 520px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  width: 100%;
}
/* Cuando totals vive dentro de cart-col-left (movido por placeTotalsCard
   cuando no hay sugerencias), toma el ancho completo de la col (= ship/pay) */
#carrito .cart-col-left > .cart-total {
  width: 100%;
  margin: 0;
}
/* Si el missing module está oculto, la cart-bottom-row queda vacía:
   colapsar para que no ocupe gap visual */
#carrito .cart-bottom-row:empty,
#carrito .cart-bottom-row:not(:has(> *:not([style*="display:none"]):not([style*="display: none"]))) {
  display: none;
}

#carrito .cart-col-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* Columna derecha — su altura se setea via JS para matchear la izquierda
   (cuando hay módulo "no necesitás esto?") o se adapta al contenido del
   cart (cuando el módulo está oculto).
   Fallback CSS: max-height viewport-based si el JS no corre */
#carrito .cart-col-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  overflow: hidden;
  max-height: calc(100vh - 200px);
  min-height: 240px;
}

#carrito .cart-2col .cart-layout-single,
#carrito .cart-2col .cart-layout {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Missing module dentro de cart-col-right: limitado para que la tabla de
   detalle del pedido domine verticalmente. flex-shrink:1 permite que se
   reduzca si la columna no le da espacio (en vez de quedar cortado al fondo
   sin bordes redondeados visibles). */
#carrito .cart-bottom-row > #missingAssortmentModule {
  /* Vive en bottom-right; alto seteado por JS = totals * 1.5 + 40.
     Fallback CSS: min-height razonable por si el sync no corre (sección
     oculta al cargar, totals.offsetHeight = 0 → JS skip). */
  min-height: 360px;
  overflow: hidden;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
}
/* La grid de cards llena el alto disponible (parent menos header) y
   alinea cards al inicio (align-content: start) para que NO se estiren
   verticalmente cuando hay menos productos que filas. */
#carrito .cart-bottom-row > #missingAssortmentModule .missing-cards {
  display: grid;
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
  align-content: start;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 84px;
  gap: 8px;
  overflow-y: auto;
}

/* Card layout en grid:
   Imagen ocupa columna izq y se extiende ambas filas.
   Fila 1 derecha: descripción (al lado de la foto, ancho completo del lado derecho)
   Fila 2 derecha: cod+precio | stepper */
#carrito .cart-bottom-row > #missingAssortmentModule .missing-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "img desc desc"
    "img info stepper";
  align-items: center;
  gap: 2px 8px;
  padding: 6px 8px;
}
#carrito .cart-bottom-row > #missingAssortmentModule .missing-card img {
  grid-area: img;
  width: 48px;
  height: 48px;
  align-self: center;
}
/* `display: contents` saca al wrapper del flujo: desc y price-row se vuelven
   hijos directos del grid de la card y respetan las grid-areas. */
#carrito .cart-bottom-row > #missingAssortmentModule .missing-card-info {
  display: contents;
}
#carrito .cart-bottom-row > #missingAssortmentModule .missing-desc {
  grid-area: desc;
  align-self: end;
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  white-space: normal;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
}
#carrito .cart-bottom-row > #missingAssortmentModule .missing-price-row {
  grid-area: info;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
#carrito .cart-bottom-row > #missingAssortmentModule .missing-stepper {
  grid-area: stepper;
  align-self: center;
  margin-top: 0;
}

#carrito .cart-2col #cart {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  /* Cap a 6 filas exactas (sin tocar el row height natural). */
  max-height: 380px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  width: 100% !important;
  max-width: 100% !important;
  border: 1px solid #ececec;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  background: #fff;
}

/* Si el carrito está vacío, sin scroll y el empty-state ocupa todo el alto
   centrando su contenido en el medio. */
#carrito .cart-2col #cart:has(> .cart-empty) {
  overflow: hidden !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}

#carrito .cart-2col #cart > .cart-empty {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  /* Cuando el cart está vacío y col-right está en height:auto, necesitamos
     un mínimo para que la cara/texto se vean bien (sino colapsa a 0). */
  min-height: 260px;
}

/* El #cart wrapper también necesita un mínimo cuando contiene .cart-empty
   y la col-right adoptó height:auto. */
#carrito .cart-2col #cart:has(> .cart-empty) {
  min-height: 280px;
}

/* También suprimir scroll en el wrapper externo (.cart-col-right) cuando
   el cart está vacío, por si el min-height del .cart-empty empujaba. */
#carrito .cart-2col .cart-col-right:has(.cart-empty) {
  overflow: hidden !important;
}

#carrito .cart-2col #cart::-webkit-scrollbar {
  width: 8px;
}
#carrito .cart-2col #cart::-webkit-scrollbar-track {
  background: transparent;
  margin: 12px 0; /* respeta los corners redondeados del wrapper */
}
#carrito .cart-2col #cart::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  border: 2px solid #fff;
  background-clip: padding-box;
}
#carrito .cart-2col #cart::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.35);
  background-clip: padding-box;
  border: 2px solid #fff;
}

/* Override: las ship-rows ya no necesitan max-width fijo ni margin auto
   dentro de las columnas — usan el ancho de la columna.
   NO forzar display:block — eso pisaría el display:none del clienteNuevoRow
   (que solo debe verse para admin via JS). Dejamos display sin tocar. */
#carrito .cart-2col .ship-row,
#carrito .cart-2col #customerSelectorCart {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-content: initial !important;
}

/* clienteNuevoRow SIEMPRE oculto a menos que JS lo cambie a block (admin) */
#carrito .cart-2col #clienteNuevoRow:not([style*="display: block"]):not([style*="display:block"]) {
  display: none !important;
}

/* ============================================================
   EMPTY CART STATE — carita triste a la izquierda + texto a la derecha
   con botón "Ver productos" debajo, todo centrado.
   Adaptable: ocupa todo el alto/ancho disponible de su container
   y escala tipografía/imagen con clamp() según el espacio.
   ============================================================ */
.cart-empty {
  container-type: size;
  container-name: cartempty;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3cqh, 22px);
  padding: clamp(16px, 5cqh, 48px) clamp(16px, 5cqw, 40px);
  text-align: left;
  width: 100%;
  height: 100%;
  min-height: 200px;
  box-sizing: border-box;
  color: #555;
  animation: cart-empty-in 0.35s ease-out;
}

.cart-empty-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 4cqw, 32px);
  width: 100%;
}

/* Fallback si container queries no soportadas: usa viewport units */
@supports not (container-type: size) {
  .cart-empty {
    gap: clamp(14px, 3vw, 32px);
    padding: clamp(16px, 4vh, 48px) clamp(16px, 4vw, 40px);
  }
}

.cart-empty-face {
  flex: 0 0 auto;
  width: clamp(64px, 28cqh, 140px);
  height: clamp(64px, 28cqh, 140px);
  max-width: 40%;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.08));
  animation: cart-empty-wobble 3.2s ease-in-out infinite;
  transform-origin: 50% 50%;
}

@supports not (container-type: size) {
  .cart-empty-face {
    width: clamp(64px, 14vh, 140px);
    height: clamp(64px, 14vh, 140px);
  }
}

.cart-empty-text-wrap {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 1.2cqh, 10px);
  max-width: 360px;
}

.cart-empty-title {
  margin: 0;
  font-size: clamp(15px, 3.4cqh, 22px);
  font-weight: 800;
  color: #222;
  letter-spacing: 0.2px;
  line-height: 1.2;
}

.cart-empty-text {
  margin: 0;
  font-size: clamp(12px, 2.4cqh, 15px);
  line-height: 1.5;
  color: #777;
}

/* Botón "Ver productos" — debajo del row carita+texto */
.cart-empty-btn {
  flex: 0 0 auto;
  padding: clamp(8px, 2cqh, 14px) clamp(16px, 4cqw, 28px);
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #cc1f1f 0%, #e63333 100%);
  color: #fff;
  font-size: clamp(12px, 2.4cqh, 15px);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(204, 31, 31, 0.25);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap;
}

.cart-empty-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(204, 31, 31, 0.35);
}

.cart-empty-btn:active {
  transform: translateY(0);
}

/* En containers muy angostos (<360px ancho), apilar vertical el row también */
@container cartempty (max-width: 360px) {
  .cart-empty-row {
    flex-direction: column;
    text-align: center;
  }
  .cart-empty-face {
    max-width: 60%;
  }
}

@keyframes cart-empty-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cart-empty-wobble {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

/* ============================================================
   VENDEDOR: cuando existe #customerSelectorCart (vendor en carrito de cliente),
   "Pedir para (Razón Social)" + "Indicar Dirección de Entrega" van en la
   misma fila. El resto (clienteNuevoRow, paymentRow, cart-total) ocupa
   ancho completo.
   ============================================================ */
#carrito .cart-2col .cart-col-left:has(#customerSelectorCart) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

#carrito .cart-2col .cart-col-left:has(#customerSelectorCart) > #customerSelectorCart {
  grid-column: 1;
  grid-row: 1;
}

#carrito .cart-2col .cart-col-left:has(#customerSelectorCart) > .ship-row:has(#shippingSelect) {
  grid-column: 2;
  grid-row: 1;
}

/* Todo lo demás (clienteNuevo, paymentRow, cart-total, etc) ocupa toda la fila */
#carrito .cart-2col .cart-col-left:has(#customerSelectorCart) > #clienteNuevoRow,
#carrito .cart-2col .cart-col-left:has(#customerSelectorCart) > #paymentRow,
#carrito .cart-2col .cart-col-left:has(#customerSelectorCart) > .cart-total {
  grid-column: 1 / -1;
}

/* Mobile: vuelve a 1 columna apilado */
@media (max-width: 900px) {
  #carrito .cart-2col .cart-col-left:has(#customerSelectorCart) {
    grid-template-columns: 1fr;
  }
  #carrito .cart-2col .cart-col-left:has(#customerSelectorCart) > #customerSelectorCart,
  #carrito .cart-2col .cart-col-left:has(#customerSelectorCart) > .ship-row:has(#shippingSelect) {
    grid-column: 1;
    grid-row: auto;
  }
}

#carrito .cart-2col .ship-card,
#carrito .cart-2col .pay-card {
  width: 100% !important;
  max-width: none !important;
}

/* Cart layout (la tabla) y totales también ocupan el ancho de su columna */
#carrito .cart-2col .cart-layout,
#carrito .cart-2col .cart-layout-single {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#carrito .cart-2col .cart-total {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box;
  padding: 0 !important;
}

#carrito .cart-2col .cart-total .totals-inner {
  width: fit-content !important;
  max-width: 780px !important;
  box-sizing: border-box;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 14px 20px !important;
  gap: 22px !important;
}

#carrito .cart-2col .cart-total .totals-inner > *,
#carrito .cart-2col .cart-total h3.grand-total {
  box-sizing: border-box;
  max-width: 100%;
}

/* Tabla del carrito que respete el ancho de la columna derecha */
/* #cart: solo overflow-y (NO overflow-x — rompe sticky cross-browser) */
#carrito .cart-2col .cart-table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed;
  border-collapse: separate !important; /* requerido para sticky en th */
  border-spacing: 0;
}

/* Botones de acción al final de la columna der: ancho completo */
#carrito .cart-2col .order-actions {
  width: 100% !important;
  margin: 0 !important;
}

/* Mobile: 1 columna — stack vertical: left, right, bottom-row (totals+missing stack) */
@media (max-width: 900px) {
  #carrito .cart-2col {
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "right"
      "bottom";
    gap: 16px;
    padding: 0 12px;
  }
  #carrito .cart-bottom-row {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
}

#carrito .iva-tag {
  font-size: 11px;
  font-weight: 600;
  color: #888;
  letter-spacing: 0.5px;
  vertical-align: middle;
  margin-left: 4px;
  text-transform: uppercase;
}

/* CARDS (ship/pay) — look uniforme con stripe roja a la izquierda */
#carrito .ship-card,
#carrito .pay-card {
  position: relative !important;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 14px;
  padding: 18px 20px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  /* NO overflow:hidden — sino el popup del dropdown "Pedir para" queda clipeado */
  overflow: visible !important;
}

/* Z-INDEX FIX dropdown "Pedir para" en el carrito.
   Las ship-rows tienen z-index:1 (declarado más arriba para que no tapen el nav).
   Eso crea stacking contexts separados → el popup queda atrapado en el contexto
   de su row y las rows posteriores (Dirección, Pago) lo tapan.
   Solución: subir z-index de la row del customer-selector cuando hay popup abierto. */
#carrito #customerSelectorCart,
#carrito .ship-row:has(#shippingSelect) {
  z-index: 50 !important;
}

#carrito #customerSelectorCart:has(.cs-popup:not([hidden])),
#carrito .ship-row:has(.cs-popup:not([hidden])) {
  z-index: 500 !important;
}

#carrito .ship-card:hover,
#carrito .pay-card:hover {
  border-color: #d8d8d8;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Stripe vertical rojo a la izquierda */
#carrito .ship-card::before,
#carrito .pay-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  background: linear-gradient(180deg, #d00000 0%, #ff0000 100%);
  opacity: 0.85;
  border-radius: 0 2px 2px 0;
  transition: background 0.25s ease;
}

/* Stripe verde cuando la card está "completa" (opción confirmada/seleccionada) */
/* Customer selector (vendor): el botón "Confirmar" del cliente fue clickeado */
#carrito #customerSelectorCart .ship-card:has(#customerConfirmBtn.confirmed)::before {
  background: linear-gradient(180deg, #0a7a2f 0%, #12a040 100%);
  opacity: 1;
}

/* Shipping card: el botón "Confirmar dirección" fue clickeado */
#carrito .ship-card:has(#shipConfirmBtn.confirmed)::before {
  background: linear-gradient(180deg, #0a7a2f 0%, #12a040 100%);
  opacity: 1;
}

/* Payment card: hay un método seleccionado (botón con .selected o .active) */
#carrito .pay-card:has(.pay-btn.selected)::before,
#carrito .pay-card:has(.pay-btn.active)::before {
  background: linear-gradient(180deg, #0a7a2f 0%, #12a040 100%);
  opacity: 1;
}

/* LABEL: uppercase + letterspacing premium */
#carrito .ship-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #888;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Icono base — pintado con mask + gradient rojo (mismo look que pay-title) */
#carrito .ship-label::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, #d00000, #ff0000);
  border-radius: 4px;
  flex-shrink: 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Customer selector (vendor): icono persona */
#carrito #customerSelectorCart .ship-label::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0 2c-3.33 0-8 1.67-8 5v1a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-1c0-3.33-4.67-5-8-5z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0 2c-3.33 0-8 1.67-8 5v1a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-1c0-3.33-4.67-5-8-5z'/></svg>");
}

/* Shipping address: icono pin/ubicación */
#carrito .ship-card:has(#shippingSelect) .ship-label::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/></svg>");
}

/* Cliente nuevo (admin): icono usuario+ */
#carrito #clienteNuevoRow .ship-label::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/></svg>");
}

/* SHIP-SELECT: input limpio con caret rojo custom */
#carrito .ship-select,
#carrito #clienteNuevoInput {
  width: 100%;
  padding: 10px 36px 10px 12px !important;
  border: 1px solid #ddd !important;
  border-radius: 10px !important;
  background-color: #fff !important;
  color: #111 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  line-height: 1.2 !important;
  cursor: pointer;
  outline: none;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%23d00000' d='M6 8 0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px 8px;
}

#carrito #clienteNuevoInput {
  background-image: none !important;
  padding-right: 12px !important;
}

#carrito .ship-select:hover,
#carrito #clienteNuevoInput:hover {
  border-color: #bbb !important;
}

#carrito .ship-select:focus,
#carrito #clienteNuevoInput:focus {
  border-color: #d00000 !important;
}

#carrito .ship-hint {
  font-size: 12px;
  color: #888;
  margin-top: 4px;
  line-height: 1.4;
}

/* Ocultar hints una vez que el usuario CONFIRMÓ:
   - Delivery card: cuando el btn "Confirmar dirección entrega" recibió click
     (toma clase .confirmed). NO cuando aparece (que es .has-confirm).
   - Payment card: cuando hay un .pay-btn.active o .selected. */
#carrito .ship-card:has(#shipConfirmBtn.confirmed) .ship-hint,
#carrito .ship-card:has(#customerConfirmBtn.confirmed) .ship-hint {
  display: none;
}

#carrito .pay-card:has(.pay-btn.active),
#carrito .pay-card:has(.pay-btn.selected),
#carrito .pay-card:has(#payLaterBtn.active),
#carrito .pay-card:has(#payLaterBtn.selected) {
  /* contenedor sin cambios */
}

#carrito .pay-card:has(.pay-btn.active) .ship-hint,
#carrito .pay-card:has(.pay-btn.selected) .ship-hint,
#carrito .pay-card:has(#payLaterBtn.active) .ship-hint,
#carrito .pay-card:has(#payLaterBtn.selected) .ship-hint {
  display: none;
}

/* PAGO: título uppercase con icono tarjeta */
#carrito .pay-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #888;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

#carrito .pay-title::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, #d00000, #ff0000);
  border-radius: 4px;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M21 8H3V6a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v2zm0 2v8a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-8h18zm-3 4h-4v2h4v-2z'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M21 8H3V6a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v2zm0 2v8a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-8h18zm-3 4h-4v2h4v-2z'/></svg>") no-repeat center / contain;
}

/* PAY BUTTONS: card-like con discount badge */
#carrito .pay-btn {
  width: 100%;
  background: #fff;
  border: 1.5px solid #e6e6e6;
  border-radius: 10px;
  padding: 12px 8px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease,
    transform 0.12s ease, box-shadow 0.15s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

#carrito .pay-btn:hover {
  border-color: #888;
  background: #fafafa;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

#carrito .pay-btn .pay-name {
  font-size: 12px;
  font-weight: 700;
  color: #111;
  line-height: 1.1;
}

#carrito .pay-btn .pay-off {
  font-size: 10px;
  font-weight: 800;
  color: #0a7a2f; /* verde */
  background: rgba(10, 122, 47, 0.1);
  padding: 2px 7px;
  border-radius: 999px;
  margin-top: 2px;
  letter-spacing: 0.2px;
}

/* Estado seleccionado: gradiente verde + texto blanco */
#carrito .pay-btn.selected,
#carrito .pay-btn.active,
#carrito #payLaterBtn.selected,
#carrito #payLaterBtn.active {
  background: linear-gradient(135deg, #0a7a2f 0%, #12a040 100%);
  border-color: #0a7a2f;
  color: #fff;
  outline: none;
  box-shadow: 0 6px 18px rgba(10, 122, 47, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

#carrito .pay-btn.selected .pay-name,
#carrito .pay-btn.active .pay-name {
  color: #fff;
}

#carrito .pay-btn.selected .pay-off,
#carrito .pay-btn.active .pay-off {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* "Prefiero no decidir ahora" pill dashed */
#carrito .pay-btn-full {
  width: 100%;
  margin-top: 12px !important;
  padding: 11px 14px !important;
  background: #fff;
  border: 1.5px dashed #bbb !important;
  color: #666;
  font-size: 13px;
  font-weight: 700;
  border-radius: 10px !important;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
}

#carrito .pay-btn-full:hover {
  border-style: solid !important;
  border-color: #555 !important;
  color: #111;
  background: #fafafa;
}

#carrito .pay-btn-full.selected,
#carrito .pay-btn-full.active {
  border-style: solid !important;
  background: linear-gradient(135deg, #0a7a2f 0%, #12a040 100%) !important;
  border-color: #0a7a2f !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(10, 122, 47, 0.25) !important;
}

/* WEB NOTE: chip absoluto arriba-derecha de la pay-card */
#carrito .pay-card .web-note {
  position: absolute;
  top: 14px;
  right: 18px;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 0 !important;
  border-radius: 0 !important;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  width: auto;
  z-index: 2;
}

#carrito .web-note-title {
  font-size: 13px !important;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #555 !important;
  margin: 0;
}

#carrito .web-note-title::after {
  content: ":";
}

#carrito .web-note-value {
  font-size: 13px !important;
  font-weight: 400;
  color: #555 !important;
  margin: 0;
}

#carrito .web-note-value strong {
  font-size: 13px;
  font-weight: 400;
}

/* CART TABLE — limpio, espaciado, con stepper integrado.
   Los bordes redondeados/sombra viven en el wrapper #cart (mantiene el
   look aunque scrollee) — la tabla solo es la grilla de filas. */
#carrito .cart-table {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none;
  border-collapse: separate !important;
  border-spacing: 0;
}

#carrito .cart-table th {
  background: #f5f5f5;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #888;
  padding: 10px 2px;
  border-bottom: 2px solid #ddd;
  border-right: 0;
  /* Sticky: cada th queda fijo arriba al scrollear los items dentro de #cart */
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

#carrito .cart-table td {
  padding: 10px 3px;
  font-size: 12px;
  color: #444;
  border-bottom: 1px solid #f0f0f0;
  border-right: 0;
  transition: background 0.12s ease;
  vertical-align: middle;
}

/* Padding extra solo en la celda DESCRIPCIÓN (más aire para texto largo) */
#carrito .cart-table td.desc {
  padding: 10px 8px 10px 6px;
}

/* Padding mínimo en cols de la derecha (uni, tp, total) — son numéricos cortos */
#carrito .cart-table td:nth-child(4),
#carrito .cart-table td:nth-child(5),
#carrito .cart-table td:nth-child(6) {
  padding: 10px 2px;
}

#carrito .cart-table tbody tr:nth-child(even) td {
  background: #fafbfc;
}

#carrito .cart-table tbody tr:hover td {
  background: rgba(208, 0, 0, 0.03);
}

#carrito .cart-table tbody tr:last-child td {
  border-bottom: none;
}

#carrito .cart-table td.desc {
  text-align: left;
  font-weight: 700;
  color: #111;
  font-size: 12px;
  line-height: 1.25;
}

/* Cod en bold sutil */
#carrito .cart-table td:first-child {
  font-weight: 700;
  color: #555;
  font-size: 11px;
}

/* Total $ destacado a la derecha */
#carrito .cart-table td:last-child {
  font-weight: 800;
  color: #111;
  font-size: 12px;
  white-space: nowrap;
}

/* Stepper dentro de la tabla — compacto para que entre todo */
#carrito .cart-table .step-btn {
  background: #f4f4f4;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 22px;
  height: 26px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.12s ease;
  padding: 0;
}

#carrito .cart-table .step-btn:hover {
  background: #e0e0e0;
}

#carrito .cart-table .step-input {
  width: 32px;
  height: 26px;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  margin: 0 2px;
  padding: 0;
  -moz-appearance: textfield;
}

#carrito .cart-table .step-input::-webkit-outer-spin-button,
#carrito .cart-table .step-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* X de quitar en la tabla — separada del stepper */
#carrito .cart-table .row-remove,
#carrito .cart-table button[onclick*="removeItem"] {
  background: transparent;
  border: 0;
  color: #aaa;
  font-size: 13px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px; /* separa del stepper */
  padding: 0;
}

/* IVA tag dentro de la tabla — chico y suave debajo del precio */
#carrito .cart-table .cart-iva {
  font-size: 9px;
  font-weight: 600;
  color: #888;
  display: block;
  line-height: 1.2;
  margin-top: 1px;
}

/* Margen abajo de la tabla del cart para separar de los totales */
#carrito .cart-2col #cart {
  margin-bottom: 8px !important;
}

#carrito .cart-table .row-remove:hover,
#carrito .cart-table button[onclick*="removeItem"]:hover {
  background: rgba(208, 0, 0, 0.1);
  color: #d00000;
}

/* TOTALES con grand-total destacado */
#carrito .cart-total {
  margin: 0;
}

/* Layout cuando el botón Confirmar está al lado del total */
#carrito .cart-total.has-confirm-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: nowrap;
}

#carrito .cart-total.has-confirm-btn .totals-inner {
  flex: 1 1 auto;
  min-width: 0;
}

/* Submit (Confirmar pedido) al lado del total — alto natural (no stretch) */
#carrito .cart-total.has-confirm-btn .submit-order {
  flex: 0 0 auto;
  align-self: center;
  min-width: 200px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #0a7a2f 0%, #14b346 60%, #0e8a37 100%);
  color: #fff;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 6px 18px rgba(10, 122, 47, 0.28),
    0 2px 5px rgba(10, 122, 47, 0.16);
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

#carrito .cart-total.has-confirm-btn .submit-order:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 12px 28px rgba(10, 122, 47, 0.42),
    0 3px 8px rgba(10, 122, 47, 0.24);
}

#carrito .cart-total.has-confirm-btn .submit-order:active:not(:disabled) {
  transform: translateY(0);
}

#carrito .cart-total.has-confirm-btn .submit-order:disabled,
#carrito .cart-total.has-confirm-btn .submit-order.is-disabled {
  background: linear-gradient(135deg, #b5b5b5 0%, #cccccc 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  cursor: not-allowed;
  opacity: 0.85;
}

/* Submit más compacto cuando va al lado, no full width */
#carrito .cart-total.has-confirm-btn .submit-order {
  min-width: 180px;
  white-space: nowrap;
}

#carrito .cart-total.has-confirm-btn .order-status {
  display: none; /* status ya se ve en cada card abajo */
}

#carrito .cart-total .totals-inner {
  position: relative;
  background:
    radial-gradient(1200px 200px at 0% 0%, rgba(10, 122, 47, 0.06), transparent 60%),
    radial-gradient(1000px 200px at 100% 100%, rgba(20, 179, 70, 0.07), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f6fbf7 100%);
  border: 1px solid #d8ecdf;
  border-radius: 16px;
  padding: 16px 22px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 8px 24px rgba(10, 122, 47, 0.08),
    0 2px 6px rgba(10, 122, 47, 0.05);
  /* Layout 2 columnas: lineas izq / Total der centrado vertical */
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  align-items: center;
  width: 100%;
  overflow: hidden;
}

/* (Acento superior removido a pedido — sin stripe) */

/* Wrapper de las 3 líneas (Subtotal / Dto Web / Dto Pago) */
#carrito .cart-total .totals-lines {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

#carrito .totals-inner .totals-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f3;
  font-size: 14px;
  color: #444;
  font-weight: 500;
}

#carrito .totals-inner .totals-line:last-of-type {
  border-bottom: none;
}

#carrito .totals-inner .totals-line strong {
  text-align: right;
  font-size: 15px;
  font-weight: 800;
  color: #111;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}

/* Líneas de descuento — texto verde más vibrante + pill detrás del valor */
#carrito #webDiscountLine,
#carrito #paymentDiscountLine,
#carrito #totalDiscountsLine {
  color: #0a7a2f;
  font-weight: 600;
}

#carrito #webDiscountLine strong,
#carrito #paymentDiscountLine strong,
#carrito #totalDiscountsLine strong {
  display: inline-block;
  background: linear-gradient(135deg, #e8f6ec 0%, #d6efe0 100%);
  color: #0a7a2f;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  border: 1px solid rgba(10, 122, 47, 0.2);
  box-shadow: 0 1px 2px rgba(10, 122, 47, 0.08);
}

/* Subtotal — primera línea, énfasis sutil */
#carrito .totals-inner .totals-line:first-child {
  font-weight: 700;
  color: #222;
}

#carrito #webDiscountLine strong,
#carrito #paymentDiscountLine strong,
#carrito #totalDiscountsLine strong {
  color: #0a7a2f;
}

#carrito .totals-divider {
  margin: 14px 0;
  border-top: 2px solid #ddd;
}

/* Total del pedido — tarjetón compacto a la derecha (en su columna del grid) */
#carrito .grand-total {
  box-sizing: border-box;
  width: auto;
  margin: 0;
  padding: 16px 24px;
  background:
    radial-gradient(120px 60px at 50% 0%, rgba(255, 255, 255, 0.18), transparent 70%),
    linear-gradient(135deg, #0a7a2f 0%, #14b346 60%, #0e8a37 100%);
  color: #fff;
  border-radius: 12px;
  text-align: center;
  letter-spacing: -0.2px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 8px 22px rgba(10, 122, 47, 0.32),
    0 2px 6px rgba(10, 122, 47, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 160px;
  /* Línea separadora bajo el label */
  position: relative;
  overflow: hidden;
}

/* Brillo diagonal sutil */
#carrito .grand-total::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -30%;
  width: 60%;
  height: 200%;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.12) 50%, transparent 60%);
  pointer-events: none;
  transform: skewX(-12deg);
}

#carrito .grand-total .grand-total-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: none;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  width: 100%;
  text-align: center;
}

#carrito .grand-total .grand-total-value {
  font-size: 18px;
  font-weight: 900;
  margin: 5px 0 0;
}

#carrito .grand-total .grand-total-value #total {
  font-weight: 900;
}

#carrito .grand-total .iva-tag {
  color: rgba(255, 255, 255, 0.85);
  font-size: 9px;
  font-weight: 600;
  margin-top: 0;
}

/* =========================================================
   CARRITO MOBILE — pulido completo (≤900px tablet, ≤600px phone)
   ========================================================= */

/* TABLET (≤900px) — el cart-2col ya stackea en 1 col, ajustar tipografía/padding */
@media (max-width: 900px) {
  /* Header del carrito: stack vertical (back arriba, título centro, botones abajo) */
  #carrito .section-header {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "back"
      "title"
      "guardar"
      "confirm"
      "edit" !important;
    row-gap: 12px !important;
    column-gap: 0 !important;
    padding: 0 16px 4px !important;
    margin-bottom: 16px !important;
  }

  #carrito #editOrderBanner {
    justify-self: stretch !important;
    max-width: 100% !important;
    text-align: center;
    justify-content: center;
  }

  #carrito .section-header .back-btn {
    justify-self: stretch !important;
    text-align: center;
    width: 100%;
  }

  #carrito .section-header .section-center .section-title {
    justify-self: center !important;
    font-size: 26px !important;
    font-weight: 900 !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    letter-spacing: -0.4px;
  }
  #carrito .section-header .section-center .section-title .iva-tag {
    font-size: 12px !important;
    margin-left: 6px;
  }
  #carrito .section-header .section-center .section-title #pedidoTotalHeader {
    color: #0a7a2f;
    font-weight: 900;
  }

  #carrito .section-header .section-center .submit-order {
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
  }

  #carrito .order-actions-top {
    justify-self: stretch !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-area: guardar;
  }

  #carrito .order-actions-top .save-draft-btn,
  #carrito .order-actions-top .back-outline {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center;
    padding: 12px 16px !important;
    font-size: 14px !important;
    height: auto;
  }

  /* col-right: deshabilitar height fijo en mobile (1 col → no necesita match con izq) */
  #carrito .cart-col-right {
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  #carrito .cart-col-right[style] {
    height: auto !important;
    max-height: none !important;
  }

  /* cart-table → font más chica para que entren las cols */
  #carrito .cart-2col .cart-table {
    font-size: 12px;
  }
  #carrito .cart-2col .cart-table th {
    font-size: 10px;
    padding: 8px 4px !important;
  }
  #carrito .cart-2col .cart-table td {
    padding: 8px 4px !important;
  }
  #carrito .cart-2col .cart-table .cart-iva {
    font-size: 8px;
  }

  /* Stepper en cart compacto */
  #carrito .cart-step {
    gap: 2px;
  }
  #carrito .cart-step-btn,
  #carrito .cart-step-remove {
    min-width: 24px;
    width: 24px;
    height: 24px;
    font-size: 12px;
    padding: 0;
  }
  #carrito .cart-step-input {
    width: 36px !important;
    font-size: 12px;
    padding: 2px;
  }

  /* Totals card: ocupa ancho completo en mobile */
  #carrito .cart-2col .cart-total .totals-inner {
    max-width: 100% !important;
    width: 100% !important;
    grid-template-columns: 1fr;
    gap: 14px !important;
    padding: 14px 16px !important;
  }

  /* Grand-total full width abajo de las líneas */
  #carrito .grand-total {
    width: 100% !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 18px !important;
    min-width: 0 !important;
    /* Mobile: sin verde — neutral oscuro */
    background: #111 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
  }
  #carrito .grand-total::after {
    display: none !important;
  }
  #carrito .grand-total .grand-total-label {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    width: auto !important;
    text-align: left !important;
    color: #fff !important;
  }
  #carrito .grand-total .grand-total-value {
    margin: 0 !important;
    font-size: 18px !important;
    color: #fff !important;
  }
  #carrito .grand-total .iva-tag {
    margin-left: 4px;
    color: rgba(255, 255, 255, 0.7) !important;
  }
  /* Card contenedor del total: sacar tinte verde sutil del bg */
  #carrito .cart-total .totals-inner {
    background: #fff !important;
    border-color: #ececec !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  }

  /* Cards: padding interno reducido */
  #carrito .ship-card,
  #carrito .pay-card {
    padding: 14px 16px !important;
  }

  /* has-confirm: stack vertical (dropdown arriba, btn abajo full width) */
  .ship-card.has-confirm {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    row-gap: 10px !important;
  }
  .ship-card.has-confirm .cs-dropdown-ship,
  .ship-card.has-confirm .ship-select {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  .ship-card.has-confirm .ship-confirm-btn {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 18px !important;
  }
  .ship-card.has-confirm .ship-hint {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  /* Pedir para banner: ya stackea pero ajustar tipografía */
  .cs-dropdown.cs-dropdown-banner,
  .cs-dropdown-banner .cs-trigger {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  /* Empty cart: row → column en mobile chiquito */
  .cart-empty-row {
    flex-direction: column !important;
    text-align: center !important;
    gap: 12px !important;
  }
  .cart-empty-text-wrap {
    align-items: center;
    text-align: center;
  }
  .cart-empty-face {
    max-width: 80px !important;
    width: 80px !important;
    height: 80px !important;
  }
  .cart-empty-title {
    font-size: 17px !important;
  }
  .cart-empty-text {
    font-size: 13px !important;
  }
}

/* PHONE (≤600px) — ajustes finos para pantallas chicas */
@media (max-width: 600px) {
  #carrito .section-header {
    padding: 0 12px 4px !important;
  }
  #carrito .section-header .section-center .section-title {
    font-size: 22px !important;
  }
  #carrito .section-header .section-center .section-title .iva-tag {
    font-size: 11px !important;
  }

  /* Cards: padding aún más reducido */
  #carrito .ship-card,
  #carrito .pay-card {
    padding: 12px 14px !important;
    border-radius: 12px;
  }

  /* Labels más chicos */
  #carrito .ship-label {
    font-size: 10px !important;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
  }

  /* Cart-table: ocultar columna "Total Uni" para liberar espacio */
  #carrito .cart-2col .cart-table th:nth-child(4),
  #carrito .cart-2col .cart-table td:nth-child(4) {
    display: none;
  }

  /* Tu Precio columna: condensar */
  #carrito .cart-2col .cart-table th:nth-child(5),
  #carrito .cart-2col .cart-table td:nth-child(5) {
    font-size: 11px;
  }

  /* Totals: padding más chico */
  #carrito .cart-2col .cart-total .totals-inner {
    padding: 12px 14px !important;
    border-radius: 14px !important;
  }
  #carrito .totals-inner .totals-line {
    font-size: 13px;
    padding: 6px 0;
  }
  #carrito .totals-inner .totals-line strong {
    font-size: 14px;
  }
  #carrito #webDiscountLine strong,
  #carrito #paymentDiscountLine strong {
    font-size: 12px;
    padding: 2px 8px;
  }

  /* Pay buttons: 2 columnas en pantallas muy chicas */
  .payment-buttons.payment-6 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }

  /* Stripe lateral más finita */
  #carrito .ship-card::before,
  #carrito .pay-card::before {
    width: 2px;
    top: 10px;
    bottom: 10px;
  }

  /* Empty cart: más compacto */
  .cart-empty {
    padding: 20px 16px !important;
  }
  .cart-empty-face {
    max-width: 64px !important;
    width: 64px !important;
    height: 64px !important;
  }
  .cart-empty-title {
    font-size: 15px !important;
  }
  .cart-empty-text {
    font-size: 12px !important;
  }
  .cart-empty-btn {
    padding: 10px 18px !important;
    font-size: 13px !important;
  }

  /* Missing module: más compacto */
  .missing-module {
    padding: 12px 12px 10px !important;
  }
  .missing-title {
    font-size: 12px !important;
  }
  .missing-subtitle {
    font-size: 10px !important;
  }
  .missing-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-height: 280px !important;
  }
  .missing-card img {
    width: 44px !important;
    height: 44px !important;
  }
}

/* PHONE muy chico (≤380px) — última línea de defensa */
@media (max-width: 380px) {
  .payment-buttons.payment-6 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #carrito .cart-2col .cart-table {
    font-size: 11px;
  }
  /* Ocultar también la col COD si es muy chico */
  #carrito .cart-2col .cart-table th:nth-child(1),
  #carrito .cart-2col .cart-table td:nth-child(1) {
    font-size: 10px;
    padding: 6px 2px !important;
  }
}

/* =========================================================
   PRODUCTOS + PEDIR PARA — polish mobile
   ========================================================= */

/* Tablet ≤900px — base ya hecha (productos-grid 2 cols, sidebar oculto,
   banner full-width, mobile-products-bar visible). Acá pulimos detalles. */
@media (max-width: 900px) {
  /* Card producto: padding más chico, image más grande */
  .product-card {
    padding: 12px 10px !important;
    border-radius: 12px;
  }
  .product-card img {
    width: 100% !important;
    max-width: 220px;
    height: 180px !important;
    object-fit: contain;
    margin-bottom: 6px;
  }

  /* Pedir para banner: pulir tipografía + altura */
  .customer-selector-banner .cs-label-wrap {
    padding: 11px 14px !important;
    border-radius: 12px 0 0 12px !important;
    gap: 8px !important;
  }
  .cs-icon {
    width: 18px !important;
    height: 18px !important;
  }
  .cs-label {
    font-size: 12px !important;
  }
  .cs-dropdown-banner .cs-trigger {
    padding: 11px 14px !important;
    font-size: 13px !important;
    border-radius: 0 12px 12px 0 !important;
    min-height: 44px;
  }
  .cs-dropdown-banner .cs-trigger-arrow {
    font-size: 11px !important;
  }

  /* Sort row: separación con el banner */
  #productos .sort-row {
    margin-top: 0;
    margin-bottom: 10px;
    padding: 0 4px;
  }

  /* Carrusel novedades: no sticky, scrollea con la página */
  .new-carousel {
    top: auto;
  }

  /* Botón "Mostrar novedades" pill — más pequeño */
  .nc-show-btn {
    padding: 8px 16px;
    font-size: 12px;
    margin: 14px auto 14px;
    top: 86px;
  }
}

/* Phone ≤600px — más compacto */
@media (max-width: 600px) {
  /* Productos grid: gap reducido */
  .products-grid {
    gap: 10px !important;
  }

  /* Card producto: imagen más grande, padding compacto */
  .product-card {
    padding: 10px 8px !important;
    border-radius: 10px;
  }
  .product-card img {
    height: 160px !important;
    max-width: 180px;
  }

  /* Card cartbar mobile: stepper más compacto */
  .step-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
  }
  .step-input {
    width: 50px !important;
    height: 36px !important;
    font-size: 14px !important;
  }
  .cartbar-label {
    font-size: 12px;
  }
  .cartbar-subtotal {
    font-size: 13px;
  }
  .cartbar-units {
    font-size: 11px;
  }
  .remove-compact {
    height: 36px;
    font-size: 12px;
  }

  /* Pedir para: aún más compacto */
  .customer-selector-banner .cs-label-wrap {
    padding: 10px 12px !important;
  }
  .cs-icon {
    width: 16px !important;
    height: 16px !important;
  }
  .cs-label {
    font-size: 11px !important;
  }
  .cs-dropdown-banner .cs-trigger {
    padding: 10px 12px !important;
    font-size: 12.5px !important;
    min-height: 40px;
  }

  /* Carrusel novedades: cards más estrechas */
  .nc-card {
    flex-basis: 220px !important;
    height: 72px !important;
  }
  .nc-img-wrap {
    flex-basis: 72px !important;
    width: 72px !important;
  }
  .nc-desc {
    font-size: 11px;
  }

  /* Mobile products bar: padding más compacto */
  .mobile-products-bar {
    padding: 10px 12px !important;
    gap: 8px !important;
  }
}

/* Phone muy chico ≤380px */
@media (max-width: 380px) {
  /* Pedir para banner: stack vertical (label arriba, dropdown abajo) */
  .customer-selector-banner {
    flex-direction: column;
    align-items: stretch;
  }
  .customer-selector-banner .cs-label-wrap {
    border-radius: 12px 12px 0 0 !important;
    justify-content: center;
    padding: 8px 12px !important;
  }
  .customer-selector-banner .cs-label-wrap::after {
    display: none; /* sin acento rojo en stacked mode */
  }
  .cs-dropdown-banner .cs-trigger {
    border-radius: 0 0 12px 12px !important;
    width: 100% !important;
  }

  /* Productos grid: 1 col en pantallas muy chicas (ej. iPhone SE 1ra gen) */
  .products-grid {
    grid-template-columns: 1fr !important;
  }
  .product-card img {
    height: 160px !important;
    max-width: 200px;
  }

  /* Carrusel cards aún más chicas */
  .nc-card {
    flex-basis: 200px !important;
    height: 70px !important;
  }
}

/* =========================================================
   HEADER / NAV — polish mobile
   Header más compacto en mobile (70px vs 86px desktop) +
   ajuste de offsets sticky/padding-top que dependen del alto.
   ========================================================= */
@media (max-width: 900px) {
  /* Header más bajo y aire reducido */
  .header {
    height: 70px !important;
    padding: 8px 12px !important;
  }
  body {
    padding-top: 70px !important;
  }
  .logo-img {
    height: 42px !important;
  }
  .logo {
    left: 12px !important;
  }

  /* Mobile icons: gap más justo y padding reducido */
  .mobile-icons {
    gap: 8px !important;
    right: 10px !important;
  }
  .micon-btn {
    padding: 6px !important;
    border-radius: 8px !important;
  }
  .micon-cart-img {
    width: 22px !important;
    height: 22px !important;
  }
  .micon-loke-img {
    width: 40px !important;
  }
  .micon-profile .profile-avatar {
    width: 32px !important;
    height: 32px !important;
  }

  /* Cart counter como badge sobre el ícono */
  #mobileCartCount {
    font-size: 12px !important;
    background: #ff0000;
    color: #fff;
    padding: 1px 6px;
    border-radius: 999px;
    min-width: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
  }

  /* Mobile-products-bar: ajustar offset sticky para que NO quede tapada
     por el header fijo (antes top:0 → header lo tapaba al scrollear) */
  .mobile-products-bar {
    top: 70px !important;
    z-index: 90 !important;
  }

  /* Carrusel novedades: no sticky, scrollea con la página */
  .new-carousel {
    top: auto !important;
  }
  .nc-show-btn {
    top: 80px !important;
  }

  /* Dropdown user menu: ajustar offset desde header reducido */
  #userMenu {
    top: 78px !important;
  }
  .mobile-user-menu {
    top: 70px !important;
  }
}

/* Phone ≤600px: header aún más compacto */
@media (max-width: 600px) {
  .header {
    height: 62px !important;
    padding: 6px 10px !important;
  }
  body {
    padding-top: 62px !important;
  }
  .logo-img {
    height: 38px !important;
  }
  .logo {
    left: 10px !important;
  }

  .mobile-icons {
    gap: 6px !important;
    right: 8px !important;
  }
  .micon-cart-img {
    width: 20px !important;
    height: 20px !important;
  }
  .micon-loke-img {
    width: 36px !important;
  }
  .micon-profile .profile-avatar {
    width: 30px !important;
    height: 30px !important;
  }
  #mobileCartCount {
    font-size: 11px !important;
    padding: 1px 5px !important;
    min-width: 16px !important;
  }

  /* Sticky offsets matching nuevo header */
  .mobile-products-bar {
    top: 62px !important;
  }
  .new-carousel {
    top: auto !important;
  }
  .nc-show-btn {
    top: 72px !important;
  }
  #userMenu {
    top: 70px !important;
  }
  .mobile-user-menu {
    top: 62px !important;
  }
}

/* Phone muy chico ≤380px */
@media (max-width: 380px) {
  .logo-img {
    height: 34px !important;
  }
  .micon-loke-img {
    width: 32px !important;
  }
  .micon-profile .profile-avatar {
    width: 28px !important;
    height: 28px !important;
  }
  /* Si la línea Loke aparece, ocultarla en pantallas chiquitas para no saturar */
  .micon-loke {
    display: none !important;
  }
}

/* =========================================================
   FILTROS OVERLAY + CATEGORÍAS — polish mobile
   Bottom-sheet con animación slide-up, drag handle, botones
   touch-friendly. Categorías dropdown se convierte en bottom-sheet también.
   ========================================================= */

/* Overlay backdrop con fade-in suave */
@keyframes filtersBackdropIn {
  from { background: rgba(0, 0, 0, 0); }
  to { background: rgba(0, 0, 0, 0.45); }
}

/* Panel slide-up desde abajo */
@keyframes filtersPanelIn {
  from {
    transform: translateY(100%);
    opacity: 0.7;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (max-width: 900px) {
  /* Backdrop animado al abrir */
  .filters-overlay.open {
    animation: filtersBackdropIn 0.25s ease-out;
  }

  /* Panel: animación slide-up + drag handle visual */
  .filters-panel {
    animation: filtersPanelIn 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 22px 22px 0 0 !important;
    padding: 22px 16px 18px !important;
    max-height: 88vh !important;
    position: relative;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18) !important;
  }

  /* Drag handle visual arriba del panel */
  .filters-panel::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: #d8d8d8;
  }

  /* Header del filtro: más aire */
  .filters-head {
    margin-bottom: 14px !important;
    margin-top: 4px;
  }
  .filters-title {
    font-size: 17px !important;
  }
  .filters-x {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    font-size: 18px;
    color: #555;
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .filters-x:hover {
    background: #f5f5f5;
    border-color: #d0d0d0;
  }
  .filters-x:active {
    transform: scale(0.94);
  }

  /* Grid de filtros: gap más generoso, 2 cols cómodas */
  .filters-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 4px 0 16px !important;
  }

  /* Botón de filtro: touch-friendly + estado más visible */
  .mf-btn {
    height: 46px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    border: 1.5px solid #e5e5e5 !important;
    transition: all 0.15s ease;
  }
  .mf-btn:active {
    transform: scale(0.96);
  }
  .mf-btn.on {
    background: linear-gradient(135deg, #d00000 0%, #ff1f1f 100%) !important;
    border-color: #d00000 !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(208, 0, 0, 0.25);
  }

  /* Subtítulos de subcategoría dentro del grid */
  .grid-subtitle {
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #555;
    margin: 14px 0 6px !important;
    padding: 8px 4px 6px !important;
    border-bottom: 1px solid #eee !important;
    background: transparent !important;
  }

  /* Apply button: más prominente + sticky con border-top sutil */
  .filters-actions {
    margin-top: 4px !important;
    padding-top: 12px !important;
    border-top: 1px solid #f0f0f0;
  }
  .filters-apply {
    height: 50px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    background: linear-gradient(135deg, #0a7a2f 0%, #12a040 100%) !important;
    box-shadow: 0 4px 12px rgba(10, 122, 47, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .filters-apply:hover {
    box-shadow: 0 6px 16px rgba(10, 122, 47, 0.35);
  }
  .filters-apply:active {
    transform: scale(0.98);
  }

  /* Categorías dropdown desktop: ocultarlo en mobile (usuarios usan
     el botón de filtros bottom-sheet) */
  #categoriesMenu.dropdown-menu {
    display: none !important;
  }
  #categoriesMenu.dropdown-menu.open {
    /* Si por algo se abre, convertirlo a bottom-sheet también */
    display: grid !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    translate: 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 22px 22px 0 0 !important;
    grid-template-columns: 1fr 1fr !important;
    max-height: 80vh;
    overflow-y: auto;
    padding: 22px 16px 18px !important;
    z-index: 99999 !important;
    animation: filtersPanelIn 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18);
  }
}

/* Phone ≤600px: ajustes finos */
@media (max-width: 600px) {
  .filters-panel {
    padding: 20px 14px 14px !important;
    max-height: 90vh !important;
  }
  .filters-title {
    font-size: 16px !important;
  }
  .filters-grid {
    gap: 8px !important;
  }
  .mf-btn {
    height: 44px !important;
    font-size: 12.5px !important;
    padding: 0 10px !important;
  }
  .filters-apply {
    height: 48px !important;
    font-size: 14px !important;
  }
  .grid-subtitle {
    font-size: 12px !important;
    margin: 10px 0 4px !important;
  }
}

/* Phone muy chico ≤380px */
@media (max-width: 380px) {
  .filters-grid {
    grid-template-columns: 1fr !important;
  }
  .mf-btn {
    height: 42px !important;
  }
}

/* =========================================================
   PERFIL — polish mobile (#perfil section dentro de mayorista.html)
   ========================================================= */
@media (max-width: 900px) {
  /* Section header del perfil: stack back btn arriba, título centro */
  #perfil .section-header {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    margin-bottom: 18px !important;
    min-height: 0 !important;
  }
  #perfil .section-header .back-btn {
    position: static !important;
    align-self: flex-start;
    transform: none !important;
  }
  #perfil .section-header .section-title {
    font-size: 22px !important;
  }

  /* Profile summary card: padding compacto */
  #perfil .profile-summary {
    padding: 16px 14px !important;
    margin: 0 12px 14px !important;
    border-radius: 14px !important;
  }
  #perfil .profile-ra {
    font-size: 19px !important;
    margin-bottom: 12px;
  }

  /* Data grid: 2 cols ajustadas, fila chica */
  #perfil .profile-row.data-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
    font-size: 13px;
  }
  #perfil .profile-row b {
    font-size: 12px;
    color: #666;
    display: block;
    margin-bottom: 2px;
  }

  /* Profile pass btns: full width touch-friendly, stack vertical en mobile */
  #perfil .profile-pass-wrap {
    margin-top: 14px;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #perfil .profile-pass-wrap .profile-pass-actions-right {
    flex-direction: column;
    width: 100%;
  }
  #perfil .profile-pass-wrap .profile-btn {
    width: 100%;
    padding: 12px 16px;
    text-align: center;
  }

  /* Profile cards (Sucursales, Historial, Pedidos sin Confirmar, etc) */
  #perfil .profile-card {
    margin: 0 12px 14px !important;
    padding: 14px !important;
    border-radius: 14px !important;
  }
  #perfil .profile-card-title {
    font-size: 15px;
    margin-bottom: 12px;
  }

  /* Card actions: full width buttons */
  #perfil .profile-card-actions {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    margin-top: 12px;
  }
  #perfil .profile-card-actions .profile-btn {
    width: 100%;
    text-align: center;
    padding: 11px 16px;
  }
}

/* Phone ≤600px: aún más compacto */
@media (max-width: 600px) {
  #perfil .section-header {
    padding: 10px 12px !important;
  }
  #perfil .section-header .section-title {
    font-size: 19px !important;
  }
  #perfil .profile-summary {
    padding: 14px 12px !important;
    margin: 0 10px 12px !important;
  }
  #perfil .profile-ra {
    font-size: 17px !important;
  }
  #perfil .profile-row.data-grid {
    grid-template-columns: 1fr !important;
    font-size: 13px;
  }
  #perfil .profile-card {
    margin: 0 10px 12px !important;
    padding: 12px !important;
  }
  #perfil .profile-card-title {
    font-size: 14px;
  }
  #perfil .profile-box {
    font-size: 13px;
  }
  #perfil .notif-badge {
    font-size: 11px;
    padding: 2px 7px;
  }
}

/* =========================================================
   HISTORIAL.HTML — polish mobile (la página tiene su CSS propio,
   acá solo refuerzos al iframe / link de "Volver a productos") */
@media (max-width: 600px) {
  /* Si historial se carga embebido, cualquier section-header */
  #historial .section-header,
  #historial-section .section-header {
    padding: 10px 12px !important;
  }
}

/* =========================================================
   SUGERENCIAS.HTML — refuerzos mobile sobre su sugerencias.css */
@media (max-width: 600px) {
  /* Tabs sticky: aire con el header fijo del mayorista */
  .sug-tabs {
    margin-top: 6px;
  }
  /* Card de cada producto sugerido: padding reducido */
  body[data-page="sugerencias"] tr,
  body.sug-page tr {
    padding: 12px !important;
  }
}

/* =========================================================
   MODALES — polish mobile (login, sucursal nueva, save draft, cambiar pass)
   ========================================================= */
@media (max-width: 900px) {
  /* Fondo backdrop con animación fade */
  .modal {
    padding: 0 !important;
    align-items: flex-end !important; /* bottom-sheet style */
  }

  /* Modal content: sliding desde abajo, full width */
  .modal-content {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 18px 18px 0 0 !important;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalSlideUp 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Drag handle visual */
  .modal-content::before {
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: #d8d8d8;
    margin: 8px auto 0;
  }

  .modal-header {
    padding: 14px 16px !important;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
  }
  .modal-header h3 {
    font-size: 16px;
  }
  .modal-close {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid #eee;
    transition: background 0.15s ease;
  }
  .modal-close:hover {
    background: #f5f5f5;
  }
  .modal-close:active {
    transform: scale(0.94);
  }

  .modal-body {
    padding: 16px !important;
    gap: 8px !important;
  }
  .modal-body input,
  .modal-body select,
  .modal-body textarea {
    padding: 11px 12px !important;
    font-size: 15px !important; /* 15+ evita zoom iOS al focus */
    border-radius: 10px !important;
  }
  .modal-body label {
    font-size: 12px !important;
    color: #666;
    margin-top: 4px;
  }

  .modal-submit {
    padding: 13px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    margin-top: 10px !important;
  }

  /* Modal-card (variante modal cambiar contraseña) */
  .modal-card {
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    align-self: flex-end;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalSlideUp 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 18px !important;
  }
  .modal-card .modal-title {
    font-size: 16px;
  }
  .modal-card .modal-actions {
    flex-direction: column-reverse;
    gap: 8px;
    width: 100%;
  }
  .modal-card .modal-actions button {
    width: 100% !important;
    padding: 12px !important;
  }
}

@keyframes modalSlideUp {
  from { transform: translateY(100%); opacity: 0.7; }
  to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 600px) {
  .modal-header {
    padding: 12px 14px !important;
  }
  .modal-header h3 {
    font-size: 15px;
  }
  .modal-body {
    padding: 14px !important;
  }
  .modal-body input,
  .modal-body select,
  .modal-body textarea {
    padding: 10px 12px !important;
    font-size: 15px !important;
  }
  .modal-submit {
    padding: 12px !important;
  }
}

/* =========================================================
   PEDIDO CONFIRMADO — polish mobile (#pedidoConfirmado)
   ========================================================= */
@media (max-width: 600px) {
  .success-page {
    padding: 14px 12px 36px !important;
  }
  .success-topbar {
    margin-bottom: 4px !important;
  }
  .success-back-link {
    font-size: 16px !important;
    padding: 8px 0 !important;
  }
  .success-title-main {
    font-size: 32px !important;
    margin: 4px 0 18px !important;
  }
  .success-animation {
    max-width: 180px !important;
    height: 180px !important;
    margin: 0 auto 18px !important;
  }
  .success-btn {
    height: 48px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
  }
  .success-pdf-note {
    font-size: 12px !important;
    line-height: 1.4;
  }
}

@media (max-width: 380px) {
  .success-title-main {
    font-size: 26px !important;
  }
  .success-animation {
    max-width: 150px !important;
    height: 150px !important;
  }
  .success-btn {
    height: 44px !important;
    font-size: 14px !important;
  }
}

/* =========================================================
   LÍNEA LOKE (#loke) — polish mobile
   ========================================================= */
@media (max-width: 900px) {
  /* Topbar */
  #loke .loke-topbar {
    padding: 12px 12px 0 !important;
  }
  #loke .loke-back-btn {
    padding: 7px 14px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
  }

  /* Headline: stack vertical en mobile */
  #loke .loke-headline {
    flex-direction: column !important;
    text-align: center;
    gap: 4px !important;
    padding: 12px !important;
  }
  #loke .loke-headline-sep {
    display: none !important;
  }
  #loke .loke-headline-title {
    font-size: 22px !important;
  }
  #loke .loke-headline-sub {
    font-size: 12px !important;
    line-height: 1.35;
  }

  /* Notice */
  #loke .loke-notice {
    font-size: 12px !important;
    padding: 4px 12px 14px !important;
  }

  /* Sidebar Loke (dark theme): hidden en mobile como la sidebar normal */
  .loke-sidebar {
    display: none !important;
  }

  /* Layout: full width sin sidebar */
  .loke-layout {
    grid-template-columns: 1fr !important;
    padding: 0 12px !important;
  }

  /* Loke sort row */
  .loke-sort-row {
    margin-bottom: 12px;
  }
  .loke-sort-buttons {
    gap: 6px !important;
    flex-wrap: wrap;
  }
  .loke-sort-buttons .ds-btn {
    flex: 1 1 30%;
    font-size: 11px !important;
    padding: 8px 10px !important;
  }

  /* Header Loke mode (azul oscuro): mismo treatment que header normal */
  .header.loke-mode {
    height: 70px !important;
  }
  .header.loke-mode .logo-img {
    height: 40px !important;
  }

  /* Loke price comparison */
  .loke-price-main strong {
    font-size: 14px !important;
  }
  .loke-price-equiv {
    font-size: 11px !important;
  }
  .loke-equiv-strike {
    font-size: 12px !important;
  }

  /* Badge LOKE en card */
  .badge-loke {
    font-size: 10px !important;
    padding: 4px 8px !important;
    top: 8px;
    left: 8px;
  }
}

@media (max-width: 600px) {
  #loke .loke-headline-title {
    font-size: 19px !important;
  }
  #loke .loke-headline-sub {
    font-size: 11px !important;
  }
  #loke .loke-notice {
    font-size: 11px !important;
  }
  .loke-sort-buttons .ds-btn {
    font-size: 10.5px !important;
    padding: 7px 8px !important;
  }
  /* Loke header mode también más bajo */
  .header.loke-mode {
    height: 62px !important;
  }
  .header.loke-mode .logo-img {
    height: 36px !important;
  }
}

/* =========================================================
   TOAST "VER PEDIDO" — polish mobile
   El JS posiciona el top dinámicamente debajo del header.
   ========================================================= */
@media (max-width: 900px) {
  .view-order-toast {
    right: 12px !important;
    left: 12px !important;
    /* full width entre los dos lados → siempre visible y tap-friendly */
  }
  .view-order-btn {
    width: 100%;
    height: 48px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
    box-shadow:
      0 8px 24px rgba(230, 0, 0, 0.35),
      0 4px 12px rgba(0, 0, 0, 0.18) !important;
  }
}

@media (max-width: 600px) {
  .view-order-btn {
    height: 46px !important;
    font-size: 13px !important;
  }
}

/* =========================================================
   PAGE LOADER (mayorista no usa pero refuerzos generales para
   .page-loader si se inyecta dinámicamente)
   ========================================================= */
@media (max-width: 600px) {
  .page-loader img {
    width: 64px !important;
    height: 64px !important;
  }
}

/* =========================================================
   VENDOR MODAL (Detalle pedido cliente) — polish mobile
   Bottom-sheet style, padding compacto, table → cards.
   ========================================================= */
@media (max-width: 900px) {
  /* Card del modal: full screen bottom-sheet */
  .modal .vendor-modal-card,
  .vendor-modal-card {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    align-self: flex-end !important;
    border-radius: 18px 18px 0 0 !important;
    padding: 22px 16px 24px !important;
    max-height: 92vh !important;
    animation: modalSlideUp 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Drag handle */
  .vendor-modal-card::before {
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: #d8d8d8;
    margin: 0 auto 14px;
  }

  .vendor-modal-card .modal-title {
    font-size: 17px !important;
    margin: 0 0 14px 0 !important;
    padding: 0 40px 12px 0 !important;
    line-height: 1.3;
  }

  /* Botón X cerrar */
  .vendor-modal-close {
    top: 14px !important;
    right: 12px !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 22px !important;
  }

  /* Total banner: stack vertical en pantallas chicas */
  .vd-total-banner {
    padding: 12px 14px !important;
    border-radius: 10px;
  }
  .vd-total-label {
    font-size: 11px !important;
  }
  .vd-total-amount {
    font-size: 18px !important;
  }

  /* Header del pedido (datos cliente, fecha, etc): grid 1 col */
  .vd-header {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 10px 0 14px !important;
    margin-bottom: 14px !important;
    font-size: 13px;
  }

  /* Tabla de items: scroll horizontal con shadow indicador */
  .vd-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px; /* compensar padding del modal */
    padding: 0 16px;
  }
  .vd-table {
    font-size: 12px !important;
    min-width: 480px; /* asegura scroll horizontal sin colapsar */
  }
  .vd-table th,
  .vd-table td {
    padding: 8px 8px !important;
  }
  .vd-table th {
    font-size: 10.5px !important;
  }
}

/* Phone ≤600px: aún más compacto */
@media (max-width: 600px) {
  .modal .vendor-modal-card,
  .vendor-modal-card {
    padding: 20px 14px 20px !important;
  }
  .vendor-modal-card .modal-title {
    font-size: 16px !important;
    padding: 0 36px 10px 0 !important;
  }
  .vd-total-amount {
    font-size: 17px !important;
  }
  .vd-table {
    font-size: 11px !important;
  }
  .vd-table th,
  .vd-table td {
    padding: 7px 6px !important;
  }
}

/* =========================================================
   NOTIF BADGE (campana de pedidos clientes) — polish mobile
   ========================================================= */
@media (max-width: 600px) {
  .notif-badge,
  .menu-notif-badge {
    font-size: 10px !important;
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    border-radius: 999px;
  }
}

/* +IVA chip al lado del precio (desktop) — más sutil */
.product-card .card-price-line .card-iva {
  display: inline;
  margin-left: 4px;
  font-size: 0.85em;
  font-weight: 600;
  color: #888;
}

/* =========================================================
   PRODUCT CARD MOBILE — alto consistente
   La card SIEMPRE se ve igual aunque el nombre tenga 1 o 2 líneas,
   o el precio tenga 4 o 5+ cifras. Layout flex column con regiones
   reservadas (alto fijo por bloque) y botón pegado al fondo.
   ========================================================= */
@media (max-width: 900px) {
  /* La card es flex column → empuja el botón abajo via margin-top:auto */
  .product-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100%;
  }

  /* Imagen: ya tiene height fijo (140px) por la regla anterior */
  .product-card img {
    flex: 0 0 auto;
  }

  /* card-top: NO crece — toma su tamaño natural. El espacio sobrante
     queda entre card-top y add-btn (no entre desc y precios). */
  .product-card .card-top {
    flex: 0 0 auto;
    display: flex !important;
    flex-direction: column;
    gap: 2px !important;
    min-height: 0;
  }

  /* Cod + UxB: en la misma línea (estilo web: cod más grande+bold, uxb chico) */
  .product-card .card-row {
    min-height: 22px;
    flex: 0 0 auto;
    display: flex !important;
    align-items: baseline;
    justify-content: center;
    gap: 14px;
    flex-wrap: nowrap;
  }
  .product-card .card-cod {
    font-weight: 700;
    font-size: 17px;
    line-height: 1.1;
    white-space: nowrap;
    color: #111;
  }
  .product-card .card-cod span {
    font-weight: 700;
  }
  .product-card .card-uxb {
    font-size: 13px;
    color: #555;
    white-space: nowrap;
    font-weight: 600;
  }
  .product-card .card-uxb span {
    font-weight: 900;
    color: #111;
  }

  /* Descripción: SIEMPRE 2 líneas reservadas (clamp + min-height)
     Más grande en mobile para mejor legibilidad. Sin margins extra:
     el card-top maneja el spacing con su gap. */
  .product-card .card-desc {
    min-height: 2.6em;
    line-height: 1.3 !important;
    font-size: 15px !important;
    font-weight: 700;
    color: #111;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    margin: 0 !important;
    flex: 0 0 auto;
  }

  /* Bloque de precios: alto reservado pero NO usa flex-center vertical
     (sino el contenido se aleja del nombre cuando hay 1 sola línea de
     precio). Justify start → pegado arriba (cerca del desc). */
  .product-card .card-prices:not(.price-hidden) {
    flex: 0 0 auto;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px !important;
    margin-top: 6px !important;
  }

  /* Cada línea de precio: precio destacado + "+IVA" abajo en línea aparte */
  .product-card .card-price-line {
    margin: 0 !important;
    line-height: 1.2;
    font-size: 13px;
    color: #555;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
  }
  .product-card .card-price-line strong {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: 20px;
    color: #111;
    font-weight: 900;
    letter-spacing: -0.3px;
  }
  /* "+ IVA" pasa a línea propia, chico y gris */
  .product-card .card-price-line .card-iva {
    display: block;
    margin-left: 0;
    font-size: 10px;
    font-weight: 600;
    color: #999;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1;
    margin-top: -1px;
  }

  /* Add btn: SIEMPRE al fondo de la card, alto fijo, separado del precio */
  .product-card .add-btn {
    margin-top: 14px !important;
    flex: 0 0 auto;
    height: 40px;
    padding: 0 14px !important;
    font-size: 13px !important;
    width: 100%;
    border-radius: 8px;
  }
  .product-card .card-prices {
    margin-bottom: 4px;
  }
}

/* Phone ≤600px: tamaños un toque más chicos manteniendo jerarquía visual */
@media (max-width: 600px) {
  .product-card .card-row {
    min-height: 20px;
  }
  .product-card .card-cod {
    font-size: 16px !important;
  }
  .product-card .card-uxb {
    font-size: 12px !important;
  }
  .product-card .card-desc {
    font-size: 14px !important;
    min-height: 2.6em;
  }
  .product-card .card-prices {
    min-height: 60px;
  }
  .product-card .card-price-line {
    font-size: 12px;
  }
  .product-card .card-price-line strong {
    font-size: 18px;
  }
  .product-card .card-price-line .card-iva {
    font-size: 9.5px;
  }
  .product-card .add-btn {
    height: 38px;
    font-size: 12px !important;
    margin-top: 12px !important;
  }
  .product-card .card-prices {
    margin-bottom: 4px;
  }
}

/* Phone muy chico ≤380px */
@media (max-width: 380px) {
  .product-card img {
    height: 200px !important;
    max-width: 220px;
  }
  .product-card .card-prices {
    min-height: 68px;
  }
  .product-card .card-price-line strong {
    font-size: 22px;
  }
}

/* =========================================================
   PERFIL — section-header alineado con .profile-2col
   (mismo max-width + padding lateral) → back-btn pegado a la izq
   alineado con el borde izq de la columna izquierda.
   ========================================================= */
#perfil .section-header {
  max-width: 1320px;
  margin: 0 auto 32px !important;
  padding: 0 24px !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center !important;
  gap: 18px !important;
  min-height: 0 !important;
}

#perfil .section-header .back-btn {
  justify-self: start;
}

#perfil .section-header .section-title {
  justify-self: center;
  text-align: center;
}

#perfil .section-header .back-btn {
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  border-radius: 8px !important;
  background: #fff !important;
  border: 1.5px solid #ddd !important;
  color: #333 !important;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#perfil .section-header .back-btn:hover {
  background: #f5f5f5 !important;
  border-color: #999 !important;
  color: #111 !important;
}

/* Mobile: padding lateral más chico */
@media (max-width: 900px) {
  #perfil .section-header {
    padding: 0 12px !important;
  }
}

/* =========================================================
   PERFIL — LAYOUT 2 COLUMNAS
   IZQ (≈40%): datos cliente + sucursales
   DER (≈60%): vendor notifs + historial web + drafts
   Análisis card debajo, full width centrado
   ========================================================= */
#perfil .profile-2col {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 32px;
  max-width: 1320px;
  margin: 0 auto 20px;
  padding: 0 24px;
  align-items: start;
}

#perfil .profile-col-left,
#perfil .profile-col-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* Override de max-width antiguos cuando viven dentro de las columnas */
#perfil .profile-2col .profile-summary,
#perfil .profile-2col .profile-card.wide {
  max-width: none !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Análisis card abajo, centrada full width — match cart */
#perfil .profile-bottom-row {
  max-width: 1320px;
  margin: 0 auto 20px;
  padding: 0 24px;
}
#perfil .profile-bottom-row .profile-card {
  max-width: none !important;
  margin: 0 !important;
}

/* Mobile: 1 columna apilada */
@media (max-width: 900px) {
  #perfil .profile-2col {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 0 12px;
  }
  #perfil .profile-bottom-row {
    padding: 0 12px;
  }
}

/* =========================================================
   PROFILE CARD COLAPSABLE — botón header + body que toggle
   ========================================================= */
.profile-card-collapsible {
  padding: 0 !important; /* el toggle btn maneja su propio padding */
  overflow: hidden;
}

.profile-card-collapsible .profile-card-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 18px 20px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.18s ease;
}

.profile-card-collapsible .profile-card-toggle:hover {
  background: #fafbfc;
}

.profile-card-collapsible .profile-card-title-toggle {
  font-size: 16px;
  font-weight: 800;
  color: #111;
  letter-spacing: -0.2px;
}

.profile-card-collapsible .profile-card-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #f4f4f6;
  color: #666;
  font-size: 14px;
  font-weight: 700;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.18s ease;
}

.profile-card-collapsible[data-open="true"] .profile-card-chevron {
  transform: rotate(90deg);
  background: #c0392b;
  color: #fff;
}

.profile-card-collapsible .profile-card-body {
  padding: 0 20px 20px;
}

.profile-card-collapsible .profile-card-body[hidden] {
  display: none;
}

@media (max-width: 600px) {
  .profile-card-collapsible .profile-card-toggle {
    padding: 14px 16px;
  }
  .profile-card-collapsible .profile-card-title-toggle {
    font-size: 15px;
  }
  .profile-card-collapsible .profile-card-body {
    padding: 0 16px 16px;
  }
}

/* =========================================================
   MOBILE FINAL POLISH — overrides para los cambios recientes
   (carrito 2col, perfil 2col, products grid, header, embeds,
    user menu, notif-row vendedor, right-note del carrusel)
   ========================================================= */

/* Tablet (≤900px) — paddings laterales que estaban a 90px en desktop */
@media (max-width: 900px) {
  .section-title-row {
    padding: 0 16px !important;
    margin: 14px 0 16px;
  }
  .section-title {
    font-size: 24px;
  }
  .right-note--belowcarousel {
    margin: 4px 16px 14px auto;
    font-size: 12px;
  }
  /* products-layout: ya stackea, achicar gap interno entre subtitulo y cards */
  .products-layout {
    gap: 16px;
  }
  /* Subcategory title: ya inline en JS pero achicar si es necesario */
  .subcategory-title {
    font-size: 18px !important;
    margin: 6px 0 10px !important;
  }
}

/* Phone (≤600px) — tipografía + paddings mas chicos */
@media (max-width: 600px) {
  .section-title-row {
    padding: 0 12px !important;
    margin: 10px 0 12px;
  }
  .section-title {
    font-size: 20px;
  }
  .right-note--belowcarousel {
    margin: 4px 12px 12px auto;
    font-size: 11px;
    text-align: right;
  }
  .products-layout {
    padding: 0 10px !important;
  }
  .products-grid {
    gap: 10px !important;
  }
  .product-card {
    padding: 10px !important;
  }
  .category-title {
    font-size: 28px !important;
    margin: 24px 10px 14px !important;
  }
  .subcategory-title {
    font-size: 16px !important;
    margin: 4px 0 8px !important;
  }
  /* (User menu sin emojis — solo ajustar item) */
  .user-menu-item {
    font-size: 13px;
    padding: 10px 12px;
  }
  /* Pedido confirmado / cards con padding 18-20px → reducir */
  .pay-card,
  .ship-card {
    padding: 14px 14px !important;
  }
  /* Profile bottom row + 2col paddings ya están a 12px en 900px, dejar igual */
  /* Vendor: notif-row ya rearma a 2 cols stack <720px */
  /* Subcategoría sin border-bottom, ya OK */
}

/* Phone chico (≤380px) */
@media (max-width: 380px) {
  .section-title-row {
    padding: 0 8px !important;
  }
  .section-title {
    font-size: 18px;
  }
  .right-note--belowcarousel {
    margin: 4px 8px 10px auto;
    font-size: 10.5px;
  }
  .products-layout {
    padding: 0 6px !important;
  }
  .products-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .product-card img {
    width: 80% !important;
  }
  .category-title {
    font-size: 24px !important;
    margin: 18px 6px 12px !important;
  }
}


/* =========================================================
   BOTÓN "VOLVER ARRIBA" — fixed bottom-right, aparece al scrollear
   ========================================================= */
.back-to-top-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(17, 24, 39, 0.28), 0 2px 6px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.85);
  transition:
    opacity 0.22s ease,
    visibility 0.22s ease,
    transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s ease,
    background 0.2s ease;
  pointer-events: none;
}
.back-to-top-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.back-to-top-btn:hover {
  background: linear-gradient(180deg, #c0392b 0%, #a82317 100%);
  box-shadow: 0 8px 24px rgba(192, 57, 43, 0.4), 0 2px 6px rgba(0, 0, 0, 0.16);
  transform: translateY(-2px) scale(1.05);
}
.back-to-top-btn:active {
  transform: translateY(0) scale(0.95);
}
.back-to-top-btn svg {
  display: block;
}
@media (max-width: 600px) {
  .back-to-top-btn {
    right: 14px;
    bottom: 14px;
    width: 42px;
    height: 42px;
  }
  .back-to-top-btn svg {
    width: 18px;
    height: 18px;
  }
}

/* =========================================================
   POLISH GLOBAL — focus rings, hover zoom, sticky header shrink
   ========================================================= */

/* (5) Focus rings visibles — universal via :focus-visible */
:focus {
  outline: none;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #c0392b;
  outline-offset: 2px;
  border-radius: inherit;
}
/* En fondos oscuros (header, totals card), usar ring blanco/claro */
.header button:focus-visible,
.header a:focus-visible,
.grand-total :focus-visible,
.back-to-top-btn:focus-visible {
  outline-color: #fff;
  outline-offset: 3px;
}

/* (3) Hover zoom en imágenes de product card del catálogo principal */
.product-card img {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-card:hover img {
  transform: scale(1.06);
}

/* (14) Sticky header shrink — al scrollear, el header se achica para dar
   más espacio vertical. Activado via body.is-scrolled (seteado por JS). */
.header {
  transition: height 0.22s ease, padding 0.22s ease;
}
body.is-scrolled .header {
  height: 64px;
  padding: 6px 40px;
}
body.is-scrolled .logo-img {
  height: 44px;
  transition: height 0.22s ease;
}
.logo-img {
  transition: height 0.22s ease;
}
/* Ajustar contenido principal cuando el header se achica (compensar el cambio) */
body {
  transition: padding-top 0.22s ease;
}

/* =========================================================
   (2, 13) SKELETON LOADER — placeholder con shimmer mientras carga
   ========================================================= */
@keyframes lk-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.lk-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding: 20px 90px;
}
@media (max-width: 1100px) {
  .lk-skeleton-grid { grid-template-columns: repeat(3, 1fr); padding: 18px 24px; }
}
@media (max-width: 800px) {
  .lk-skeleton-grid { grid-template-columns: repeat(2, 1fr); padding: 12px 16px; }
}

.lk-skeleton-card {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 320px;
}
.lk-skeleton-line,
.lk-skeleton-img {
  background: linear-gradient(
    90deg,
    #eef0f3 0%,
    #f7f8fa 50%,
    #eef0f3 100%
  );
  background-size: 200% 100%;
  animation: lk-shimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
}
.lk-skeleton-img {
  width: 100%;
  height: 160px;
  border-radius: 10px;
}
.lk-skeleton-line { height: 12px; }
.lk-skeleton-line.short { width: 40%; }
.lk-skeleton-line.medium { width: 70%; }
.lk-skeleton-line.long { width: 100%; }
.lk-skeleton-btn {
  margin-top: auto;
  height: 38px;
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    #d8dade 0%,
    #e9ebee 50%,
    #d8dade 100%
  );
  background-size: 200% 100%;
  animation: lk-shimmer 1.4s ease-in-out infinite;
}

/* =========================================================
   (15) MICRO-ANIMACIONES en empty states — la carita triste hace
   un wiggle sutil periódico para llamar la atención sin ser molesto
   ========================================================= */
@keyframes lk-face-wiggle {
  0%, 88%, 100% { transform: rotate(0deg); }
  91%           { transform: rotate(-8deg); }
  94%           { transform: rotate(8deg); }
  97%           { transform: rotate(-4deg); }
}
@keyframes lk-face-blink {
  0%, 96%, 100% { opacity: 1; }
  98%           { opacity: 0.2; }
}
@keyframes lk-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cart-empty-face,
.empty-state-mini-face {
  animation: lk-face-wiggle 6s ease-in-out infinite;
  transform-origin: 50% 60%;
}
.cart-empty-text-wrap,
.empty-state-mini-text {
  animation: lk-fade-in-up 0.5s ease-out 0.15s both;
}

/* Pulso sutil al boton de "Ver productos" en cart vacio para invitar al click */
@keyframes lk-pulse-soft {
  0%, 100% { box-shadow: 0 4px 14px rgba(192, 57, 43, 0.18); }
  50%      { box-shadow: 0 4px 22px rgba(192, 57, 43, 0.32); }
}
.cart-empty-btn {
  animation: lk-pulse-soft 2.4s ease-in-out infinite;
}

/* Badge "NUEVO" en items del user menu — pill rojo brand chico */
.user-menu-new-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, #e60000 0%, #b10000 100%);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(192, 57, 43, 0.3);
  text-transform: uppercase;
  flex-shrink: 0;
}

/* =========================================================
   LOKE — match al cartbar de Loekemeyer cuando hay items.
   Tweaks:
   - Ocultar botón Quitar (−1 en qty=1 hace removeItem auto)
   - Ocultar +5 (cards Loke tienen padding 24px = menos ancho útil)
   - Color subtotal dorado Loke (sobre fondo oscuro)
   ========================================================= */
#loke .product-card .card-cartbar > .remove-btn,
#loke .product-card .card-cartbar > .remove-compact,
#loke .product-card .card-cartbar > button.remove-compact,
#loke .product-card .card-cartbar > button.remove-btn.remove-compact {
  display: none !important;
}
@media (min-width: 1025px) {
  /* +5 oculto para que el subtotal/unidades de la derecha no se peguen */
  #loke .product-card .card-cartbar .chip-5 {
    display: none !important;
  }
  /* Más column-gap entre stepper y subtotal */
  #loke .product-card .card-cartbar {
    column-gap: 22px !important;
  }
  /* Subtotal con color claro sobre fondo oscuro */
  #loke .product-card .card-cartbar .cartbar-subv {
    color: #f5f1e0 !important;
  }
  #loke .product-card .card-cartbar .cartbar-iva {
    color: rgba(255, 255, 255, 0.6) !important;
  }
  #loke .product-card .card-cartbar > .cartbar-controls::before {
    color: rgba(255, 255, 255, 0.55) !important;
  }
}

/* =========================================================
   MOBILE POLISH FINAL — cambios recientes (Loke, cart, badges)
   ========================================================= */
@media (max-width: 900px) {
  /* Loke cards en mobile: padding más razonable */
  #loke .product-card {
    padding: 14px;
  }
  #loke .product-card > .add-btn {
    padding: 9px 16px;
    font-size: 13px;
    width: 100%;       /* en mobile sí ocupa toda la card */
    align-self: stretch;
  }
  /* Loke cartbar: stack vertical (mismo que Loekemeyer mobile) */
  #loke .product-card .card-cartbar {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "subtotal"
      "left"
      "units" !important;
    row-gap: 8px !important;
    column-gap: 0 !important;
  }
  #loke .product-card .card-cartbar > .cartbar-controls {
    grid-row: auto !important;
    width: 100%;
    align-items: center !important;
  }
  #loke .product-card .card-cartbar > .cartbar-controls::before {
    content: "Cajas";
    display: block;
    text-align: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
  }
  #loke .product-card .card-cartbar > .cartbar-top,
  #loke .product-card .card-cartbar > .cartbar-units {
    text-align: center !important;
    justify-self: center !important;
  }
  /* Mostrar +5 en mobile loke (más espacio cuando hay 2 cols) */
  #loke .product-card .card-cartbar .chip-5 {
    display: inline-flex !important;
  }

  /* Badge LOKE en carrito: que NO se hide y quede bien arriba */
  #carrito .cart-table .loke-cart-tag {
    font-size: 9px;
    padding: 2px 6px;
  }

  /* Badge NUEVO en menu items: más chico en mobile */
  .user-menu-new-badge {
    font-size: 8.5px;
    padding: 2px 6px;
    letter-spacing: 0.4px;
  }
}

@media (max-width: 600px) {
  /* Loke: imagen más chica + spacing reducido */
  #loke .product-card img {
    height: 180px !important;
  }
  #loke .product-card {
    padding: 12px;
  }
  /* Cart bottom-row missing module: ya stackea, ajustar grid de cards */
  #carrito .cart-bottom-row > #missingAssortmentModule .missing-cards {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 88px;
  }

  /* Header shrink — en mobile el header ya es chico por sí mismo,
     desactivar shrink (evita doble achicamiento) */
  body.is-scrolled .header {
    height: auto;
    padding: 12px 16px;
  }
  body.is-scrolled .logo-img {
    height: auto;
  }
}

/* =========================================================
   MODAL AGREGAR SUCURSAL — refresh estético premium
   ========================================================= */
#modalNuevaSucursal .modal-content {
  max-width: 540px;
  border-radius: 18px;
  border: 1px solid #ececec;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 12px 40px rgba(15, 23, 42, 0.12);
  position: relative;
  overflow: hidden;
}
#modalNuevaSucursal .modal-content::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #c0392b 0%, #e85d4a 50%, #c0392b 100%);
}

#modalNuevaSucursal .modal-header {
  padding: 22px 24px 16px;
  border-bottom: 1px solid #f0f0f3;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
}
#modalNuevaSucursal .modal-header h3 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #111;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
#modalNuevaSucursal .modal-header h3::before {
  content: "📍";
  font-size: 22px;
}
#modalNuevaSucursal .modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f3f4f6;
  color: #555;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
#modalNuevaSucursal .modal-close:hover {
  background: #fde4e0;
  color: #c0392b;
  transform: rotate(90deg);
}

#modalNuevaSucursal .modal-body {
  padding: 22px 24px 24px;
  gap: 14px;
  max-height: 70vh;
  overflow-y: auto;
}

/* Intro hint — caja amarillo claro con icono */
#modalNuevaSucursal .modal-hint {
  background: linear-gradient(135deg, #fffbe6 0%, #fff5cc 100%);
  border: 1px solid #f0d896;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  color: #5a4a00 !important;
  line-height: 1.4;
  margin: 0 !important;
}
#modalNuevaSucursal .modal-hint::before {
  content: "ℹ️ ";
}
#modalNuevaSucursal .modal-hint br + span {
  display: block;
  margin-top: 4px;
}

/* Labels */
#modalNuevaSucursal .modal-body label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #6b7280;
  margin-bottom: -4px;
  margin-top: 2px;
}

/* Inputs y selects — pill style con focus ring */
#modalNuevaSucursal .modal-body input,
#modalNuevaSucursal .modal-body select,
#modalNuevaSucursal .modal-body textarea {
  padding: 11px 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  font-size: 14px;
  background: #fff;
  color: #111;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}
#modalNuevaSucursal .modal-body input:hover,
#modalNuevaSucursal .modal-body select:hover,
#modalNuevaSucursal .modal-body textarea:hover {
  border-color: #d1d5db;
}
#modalNuevaSucursal .modal-body input:focus,
#modalNuevaSucursal .modal-body select:focus,
#modalNuevaSucursal .modal-body textarea:focus {
  outline: none;
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1);
}
#modalNuevaSucursal .modal-body input::placeholder,
#modalNuevaSucursal .modal-body textarea::placeholder {
  color: #9ca3af;
}

/* Select con custom caret */
#modalNuevaSucursal .modal-body select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' width='12' height='8'><path fill='%23374151' d='M6 8 0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 7px;
  padding-right: 36px;
  cursor: pointer;
}

/* Textarea: alto razonable */
#modalNuevaSucursal .modal-body textarea {
  min-height: 70px;
  resize: vertical;
}

/* Hint text bajo "Dirección del expreso" */
#modalNuevaSucursal .modal-body small,
#modalNuevaSucursal .modal-body .field-hint {
  font-size: 11.5px !important;
  color: #6b7280 !important;
  margin-top: -8px !important;
  line-height: 1.4;
}

/* Botón submit — gradient brand, full width, padding generoso */
#modalNuevaSucursal .modal-submit,
#modalNuevaSucursal button[type="submit"],
#modalNuevaSucursal button#sucGuardarBtn {
  padding: 13px 20px;
  border-radius: 12px;
  background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  border: none;
  cursor: pointer;
  margin-top: 8px;
  transition: all 0.18s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
#modalNuevaSucursal .modal-submit:not(:disabled):hover,
#modalNuevaSucursal button[type="submit"]:not(:disabled):hover,
#modalNuevaSucursal button#sucGuardarBtn:not(:disabled):hover {
  background: linear-gradient(180deg, #c0392b 0%, #a82317 100%);
  box-shadow: 0 4px 14px rgba(192, 57, 43, 0.3);
  transform: translateY(-1px);
}
#modalNuevaSucursal .modal-submit:disabled,
#modalNuevaSucursal button#sucGuardarBtn:disabled {
  background: #d1d5db;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Errores: rojo más fuerte con icono */
#modalNuevaSucursal .modal-error {
  background: #fde4e0;
  border: 1px solid #f8c6c0;
  border-radius: 10px;
  padding: 10px 12px;
  color: #8a1d12 !important;
  font-size: 13px;
  font-weight: 600;
  display: none;
}
#modalNuevaSucursal .modal-error:not(:empty) {
  display: block;
}
#modalNuevaSucursal .modal-error::before {
  content: "⚠️ ";
}

/* Mobile: ajustar paddings y scroll */
@media (max-width: 600px) {
  #modalNuevaSucursal .modal-content {
    max-width: 100%;
    border-radius: 14px;
  }
  #modalNuevaSucursal .modal-header {
    padding: 18px 18px 14px;
  }
  #modalNuevaSucursal .modal-header h3 {
    font-size: 17px;
  }
  #modalNuevaSucursal .modal-body {
    padding: 18px;
    gap: 12px;
    max-height: 75vh;
  }
}

/* Custom dropdown CS dentro del modal Agregar Sucursal — match con los inputs */
#modalNuevaSucursal .cs-dropdown-modal {
  width: 100%;
}
#modalNuevaSucursal .cs-dropdown-modal .cs-trigger {
  width: 100%;
  padding: 11px 36px 11px 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  color: #111;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}
#modalNuevaSucursal .cs-dropdown-modal .cs-trigger:hover {
  border-color: #d1d5db;
}
#modalNuevaSucursal .cs-dropdown-modal .cs-trigger[aria-expanded="true"] {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1);
}
#modalNuevaSucursal .cs-dropdown-modal .cs-trigger-arrow {
  color: #374151;
  font-size: 12px;
}

/* Asegurar que <a>.user-menu-item se vea igual que el <button>:
   - sin underline default
   - heredar color del padre (no azul de link) */
a.user-menu-item,
a.user-menu-item:visited,
a.user-menu-item:link {
  text-decoration: none;
  color: inherit;
}
a.user-menu-item:hover {
  text-decoration: none;
}

/* =========================================================
   PEDIDOS SIN CONFIRMAR (draft) — row polish
   ========================================================= */
.draft-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 12px;
  margin-bottom: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.draft-row:hover {
  border-color: #d4d4d8;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

.draft-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fafbfc 0%, #f4f6f9 100%);
  border: 1px solid #ececec;
  color: #6b7280;
  flex-shrink: 0;
}

.draft-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.draft-client {
  font-size: 12px;
  font-weight: 700;
  color: #c0392b;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.draft-client-cod {
  background: #fde4e0;
  color: #8a1d12;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}
.draft-title {
  font-size: 14px;
  font-weight: 700;
  color: #111;
  letter-spacing: -0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.draft-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
}
.draft-count {
  font-weight: 700;
  color: #374151;
  background: #f3f4f6;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
}
.draft-dot {
  color: #cbd5e0;
}
.draft-time {
  cursor: help;
}
.draft-notes {
  margin-top: 6px;
  padding: 6px 10px;
  background: #fffbe6;
  border-left: 3px solid #f0d896;
  border-radius: 4px;
  font-size: 12px;
  color: #5a4a00;
  font-style: italic;
}

.draft-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.draft-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
  font-family: inherit;
  white-space: nowrap;
}
.draft-btn-load {
  background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.draft-btn-load:hover {
  background: linear-gradient(180deg, #c0392b 0%, #a82317 100%);
  box-shadow: 0 4px 12px rgba(192, 57, 43, 0.3);
  transform: translateY(-1px);
}
.draft-btn-del {
  width: 36px;
  height: 36px;
  padding: 0;
  background: #fff;
  border: 1px solid #fde4e0;
  color: #c0392b;
}
.draft-btn-del:hover {
  background: #fde4e0;
  border-color: #f8c6c0;
  color: #8a1d12;
}

@media (max-width: 600px) {
  .draft-row {
    grid-template-columns: 36px 1fr;
    padding: 12px;
    gap: 10px;
  }
  .draft-icon {
    width: 36px;
    height: 36px;
  }
  .draft-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
    gap: 8px;
    margin-top: 8px;
  }
  .draft-btn-load {
    flex: 1;
    justify-content: center;
  }
  .draft-btn-del {
    flex-shrink: 0;
  }
}

/* ============================================================
   RESPONSIVE GLOBAL — agregado 2026-05-21
   Hace que el sitio se vea coherente en notebook 1366, monitor
   1920, monitor 1440 y 4K sin reescribir el CSS entero.
   Aplica solo desde 901px para no pisar las reglas existentes
   de mobile (max-width: 900px y 600px).
   ============================================================ */

/* 1) Cap de ancho máximo en pantallas muy grandes (4K, ultrawide):
      el contenido se centra y no se estira sin fin. */
@media (min-width: 1600px) {
  .products-layout,
  .section-title-row,
  .main-footer .container,
  #carrito .section-header,
  #perfil .section-header,
  #loke .section-header {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 2) Padding lateral fluido: 20px en chicas, hasta 90px en grandes,
      transición proporcional al viewport. Reemplaza el 90px fijo. */
@media (min-width: 901px) {
  .section-title-row,
  .products-layout {
    padding: 0 clamp(20px, 5vw, 90px) !important;
  }
}

/* 3) Grid de productos auto-responsive: # de columnas se calcula
      según el viewport. minmax(220px, 1fr) = card mínima 220px.
      → 1366px ≈ 5 cols, 1920px ≈ 7 cols, 2560px ≈ 9 cols,
      4K capado por el max-width de arriba. */
@media (min-width: 901px) {
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: clamp(14px, 1.6vw, 25px);
  }
}

/* 4) Tipografía fluida en títulos principales. */
@media (min-width: 901px) {
  .section-title {
    font-size: clamp(22px, 2.2vw, 32px);
  }
  .category-title {
    font-size: clamp(28px, 3vw, 44px);
  }
}

/* 5) Imagen de card: ocupa la card de manera responsiva en vez de
      tener 190x190 fijo (que en cards grandes deja huecos y en
      cards chicas se sale). */
@media (min-width: 901px) {
  .product-card img {
    width: 100%;
    max-width: 220px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
}

/* 6) Sidebar de categorías: ancho fluido (180-240px) en vez de 200
      fijo, así crece levemente en monitores grandes. */
@media (min-width: 901px) {
  .products-layout {
    grid-template-columns: clamp(180px, 14vw, 240px) 1fr;
  }
}


/* =====================================================================
   CARRUSEL DE IMAGENES POR PRODUCTO — TIERRA NATIVA
   Recuperado del styles.css propio de Elias (commit 3dad03e).
   PaginaLK no tiene este componente: alla hay una sola imagen por
   producto. Aca products.images trae varias por codigo.
   ===================================================================== */

.product-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
}

.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;

  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-slide.active {
  opacity: 1;
  pointer-events: auto;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  cursor: zoom-in;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;

  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);

  cursor: pointer;
  font-size: 28px;
  line-height: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.carousel-btn.prev { left: 10px; }
.carousel-btn.next { right: 10px; }

.carousel-btn:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.1);
}

/* Flechas del carrusel ocultas: por ahora hay una sola imagen por
   producto. Para reactivarlas, borrar esta regla. */
.carousel-btn {
  display: none !important;
}

/* ==================== EXPO (portado de PaginaLK) ==================== */
.success-ordernum {
  margin: 6px auto 14px;
  padding: 8px 18px;
  border-radius: 999px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.3px;
  text-align: center;
}

.expo-entry-bar {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  margin: 0 0 12px !important;
}
#productos .sort-row > .customer-selector-banner.expo-entry-bar {
  /* Comparte la fila con los filtros (Mi surtido / Nuevos / Filtrar por):
     compacta (no crece) y puede achicarse, así no empuja "Filtrar por" ni su
     popup fuera de pantalla. */
  flex: 0 1 auto;
  min-width: 0;
}
.expo-hidden-select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.expo-current {
  flex: 0 1 160px;
  max-width: 160px;
  min-width: 0;
  font-size: 13px;
  color: #6b7280;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.expo-current.has-client {
  color: #111827;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.expo-chip-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.expo-chip-clear {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #6b7280;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.expo-chip-clear:hover {
  background: #f3f4f6;
  color: #111827;
  border-color: #9ca3af;
}
.expo-chip-name {
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.expo-chip-meta {
  font-size: 12px;
  color: #6b7280;
}
.expo-entry-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}
.expo-btn {
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.05s ease;
}
.expo-btn:active {
  transform: translateY(1px);
}
.expo-btn-pick {
  background: #111827;
  color: #fff;
}
.expo-btn-new {
  background: #fff;
  color: #111827;
  border: 1px solid #d1d5db;
}
.expo-btn-resume {
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fdba74;
}
/* Todos los datos completos: entrar a editar (verde, no "pausada") */
.expo-btn-resume-done {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}
.expo-chip-ok {
  color: #16a34a;
  font-weight: 700;
}
.expo-chip-falta {
  color: #b45309;
  font-weight: 700;
}
.expo-resume-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
}
.expo-resume-badge.ok {
  background: #dcfce7;
  color: #166534;
}
.expo-resume-badge.falta {
  background: #fef3c7;
  color: #92400e;
}

/* Barra de checkpoints del descuento por volumen (cliente nuevo de expo) */
.expo-cp-wrap {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px 34px 30px;
  margin: 0 0 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.expo-cp-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #4b5563;
  margin-bottom: 22px;
}
.expo-cp-title {
  font-weight: 600;
}
.expo-cp-title b {
  color: #16a34a;
  font-size: 16px;
  font-weight: 800;
}
.expo-cp-sub b {
  color: #111827;
}
.expo-cp-next {
  color: #b45309;
  font-weight: 600;
}
.expo-cp-next b {
  color: #92400e;
}
.expo-cp-track {
  position: relative;
  height: 6px;
  background: #e5e7eb;
  border-radius: 999px;
}
.expo-cp-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #15803d, #22c55e);
  transition: width 0.35s ease;
}
.expo-cp-step {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.expo-cp-dot {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #d1d5db;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}
.expo-cp-step.done .expo-cp-dot,
.expo-cp-step.current .expo-cp-dot {
  border-color: #16a34a;
  background: #16a34a;
}
.expo-cp-step.current .expo-cp-dot {
  width: 18px;
  height: 18px;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.2);
}
.expo-cp-pct {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 800;
  color: #9ca3af;
  white-space: nowrap;
}
.expo-cp-step.done .expo-cp-pct,
.expo-cp-step.current .expo-cp-pct {
  color: #16a34a;
}
.expo-cp-amt {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: #9ca3af;
  white-space: nowrap;
}

/* ── Escala activa — aviso contado forzado ── */
.escala-contado-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1px solid #f59e0b;
  border-radius: 10px;
  padding: 10px 14px;
  margin: 8px 0 4px;
  font-size: 13px;
  color: #92400e;
}
.escala-contado-icon { font-size: 20px; flex-shrink: 0; }
.escala-contado-text { display: flex; flex-direction: column; gap: 2px; }
.escala-contado-text strong { font-weight: 700; }
.escala-contado-text span { font-size: 12px; }
.escala-cp-wrap { margin-top: 12px; }

/* ── Botón traducción chino — texto liviano, integrado al nav (no compite con los CTAs) ── */
.btn-translate-cn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 6px;
  border: none;
  background: none;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  color: rgba(255, 255, 255, 0.8);
  transition: color .15s;
}
.btn-translate-cn:hover {
  color: #fff;
}
/* En el header mobile el botón de idioma es solo el ícono 🌐 (como los demás micon) */
.micon-btn.micon-translate {
  height: auto;
  padding: 6px 8px;
  background: transparent;
  border: none;
  border-radius: 10px;
  font-size: 18px;
  line-height: 1;
}
.micon-btn.micon-translate:hover {
  background: rgba(255, 255, 255, 0.08);
  border: none;
}
/* Ocultar la barra superior de Google Translate */
.skiptranslate { display: none !important; }
body { top: 0 !important; }

/* Tierra Nativa no tiene 2% de descuento web: ocultar el aviso y la línea de totales
   (tienen "2%" hardcodeado; el cálculo ya usa 0). */
#webNoteBox,
#webDiscountLine {
  display: none !important;
}

/* Pedido: columna izquierda compacta para que entre toda la info en una pantalla
   (desktop). El scroll queda para el detalle/banner de abajo. */
@media (min-width: 901px) {
  #carrito .cart-col-left { gap: 10px !important; }
  #carrito .cart-col-left .ship-row { margin: 0 auto !important; }
  #carrito .cart-col-left .ship-card,
  #carrito .cart-col-left .pay-card { padding: 9px 14px !important; }
  #carrito .cart-col-left .ship-card { gap: 4px !important; }
  #carrito .cart-col-left .pay-title { margin-bottom: 6px !important; }
  #carrito .cart-col-left .payment-buttons.payment-6 { gap: 7px !important; }
  #carrito .cart-col-left .payment-buttons.payment-6 .pay-btn { padding: 6px 6px !important; }
  #carrito .cart-col-left .pay-btn-full { margin-top: 7px !important; padding: 8px !important; }
  #carrito .cart-col-left .ship-hint { margin-top: 2px !important; }
}

/* ── Filtros: acciones (Limpiar + Aplicar) en fila ── */
.filters-actions {
  display: flex;
  gap: 10px;
}
.filters-clear {
  flex: 1;
  height: 44px;
  border-radius: 14px;
  border: 1px solid #e2e5ea;
  background: #f3f4f6;
  color: #374151;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s;
}
.filters-clear:hover {
  background: #e6e9ee;
}
.filters-apply {
  flex: 1;
}

/* ── Buscador + botón Filtros (mobile): más contraste y foco ── */
@media (max-width: 900px) {
  .mpb-search {
    background: #fff !important;
    border: 1px solid #dfe3e8 !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .mpb-search:focus-within {
    border-color: #35546f !important;
    box-shadow: 0 0 0 3px rgba(53, 84, 111, 0.15);
  }
  .mpb-ico {
    color: #35546f;
  }
  /* "Filtros" como acción de marca (azul del header) */
  #openFiltersBtn.mpb-btn {
    background: #35546f !important;
    border-color: #35546f !important;
    color: #fff !important;
  }
  #openFiltersBtn.mpb-btn .mpb-btn-ico {
    color: #fff !important;
  }
  #openFiltersBtn.mpb-btn:hover {
    background: #2c485f !important;
    border-color: #2c485f !important;
  }
}

.expo-btn:hover {
  filter: brightness(0.95);
}

/* Popup Elegir cliente */
.expo-pick-card {
  max-width: 520px;
  width: 92vw;
}
.expo-pick-search {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-size: 15px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  margin: 6px 0 12px;
}
.expo-pick-search:focus {
  outline: none;
  border-color: #111827;
}
.expo-pick-results {
  max-height: 52vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.expo-pick-hint {
  padding: 14px 6px;
  font-size: 13px;
  color: #6b7280;
  text-align: center;
}
.expo-pick-err {
  color: #b91c1c;
}
.expo-pick-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  width: 100%;
  background: #f9fafb;
  border: 1px solid #eef0f2;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.expo-pick-row:hover {
  background: #eef2ff;
  border-color: #c7d2fe;
}
.expo-pick-name {
  font-weight: 700;
  font-size: 14px;
  color: #111827;
}
.expo-pick-sub {
  font-size: 12px;
  color: #4b5563;
}
.expo-pick-dir {
  font-size: 12px;
  color: #6b7280;
}

/* Modal Nuevo cliente — bien ancho (usa casi toda la pantalla) para que se vea
   todo cómodo y sin scroll. */
.expo-new-card {
  max-width: 1500px;
  width: 96vw;
  max-height: 92vh;
  overflow-y: auto;
}
.expo-lbl {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #4b5563;
  margin-bottom: 5px;
}
.expo-inp {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px;
  font-size: 15px;
  border: 1px solid #d1d5db;
  border-radius: 9px;
}
.expo-inp:focus {
  outline: none;
  border-color: #111827;
}
.expo-inp-lock {
  background: #f3f4f6;
  color: #6b7280;
  cursor: not-allowed;
  pointer-events: none;
}
.expo-new-pin-row {
  margin-bottom: 12px;
}
.expo-pin-wrap {
  display: flex;
  gap: 8px;
}
.expo-pin-wrap .expo-inp {
  font-family: monospace;
  letter-spacing: 0.5px;
}
.expo-new-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px 14px;
}
.expo-fld-wide {
  grid-column: 1 / -1;
}
.expo-sp1 {
  grid-column: span 1;
}
.expo-sp2 {
  grid-column: span 2;
}
.expo-sp3 {
  grid-column: span 3;
}
.expo-sp4 {
  grid-column: span 4;
}
.expo-sp5 {
  grid-column: span 5;
}
.expo-sp7 {
  grid-column: span 7;
}
.expo-addr-block {
  margin-top: 16px;
  border-top: 1px solid #eef0f2;
  padding-top: 12px;
}
.expo-addr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 8px;
  flex-wrap: wrap;
}
.expo-addr-head-btns {
  display: flex;
  gap: 6px;
  align-items: stretch;
  flex-shrink: 0;
}
/* Botones del encabezado de direcciones: compactos y con texto que puede ir
   en dos líneas (el modal es angosto y "Usar fiscal" se encimaba). */
.expo-addr-head-btns .profile-btn {
  margin-top: 0;
  height: auto;
  min-height: 40px;
  padding: 6px 12px;
  font-size: 13px;
  line-height: 1.1;
  white-space: normal;
  text-align: center;
}
.expo-addr-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.expo-addr-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid #eef0f2;
  border-radius: 10px;
  padding: 8px;
}
.expo-addr-tit {
  font-weight: 600;
}
.expo-addr-fields {
  display: grid;
  grid-template-columns: 1fr 0.8fr 0.8fr 0.9fr auto;
  gap: 6px;
  align-items: center;
}
.expo-addr-del {
  border: none;
  background: #fee2e2;
  color: #b91c1c;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.expo-addr-del:hover {
  background: #fecaca;
}
.expo-order-gate {
  margin: 8px auto 0;
  max-width: 520px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.expo-new-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid #eef0f2;
}
.expo-new-actions .profile-btn.primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* "Datos completados": verde cuando está TODO completo (habilitado);
   gris y no-clickeable mientras falte algún dato (salvo el expreso). */
.expo-btn-done {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.expo-btn-done:hover {
  filter: brightness(0.95);
}
.expo-btn-done:disabled {
  background: #e5e7eb;
  border-color: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
  filter: none;
}
/* Modales expo: que scrollee TODO el modal (card al tope), así se alcanzan
   siempre las direcciones y los botones en dispositivos cortos. */
#expoNewModal.modal,
#expoPickModal.modal {
  align-items: flex-start;
  overflow-y: auto;
}
/* ID-específico: `.modal .modal-card` (0,2,0) fija max-width:420px y overflow
   hidden, y le gana a `.expo-new-card` (0,1,0). Con el id lo pisamos para que el
   modal sea REALMENTE ancho (no alto y angosto). */
#expoNewModal .expo-new-card {
  max-width: 1500px;
  width: 96vw;
  max-height: 92vh;
  overflow-y: auto;
  overflow-x: visible;
  margin: 3vh auto;
}
.profile-btn.primary {
  background: #111827;
  color: #fff;
}
@media (max-width: 900px) {
  /* Pantallas medianas: 6 columnas, pares de campos */
  .expo-new-grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .expo-sp1,
  .expo-sp2 {
    grid-column: span 2;
  }
  .expo-sp3,
  .expo-sp4 {
    grid-column: span 3;
  }
  .expo-sp5,
  .expo-sp7 {
    grid-column: span 6;
  }
}
@media (max-width: 520px) {
  .expo-new-grid {
    grid-template-columns: 1fr;
  }
  .expo-sp1,
  .expo-sp2,
  .expo-sp3,
  .expo-sp4,
  .expo-sp5,
  .expo-sp7 {
    grid-column: 1 / -1;
  }
  .expo-addr-fields {
    grid-template-columns: 1fr 1fr;
  }
  .expo-addr-fields .expo-addr-del {
    grid-column: 1 / -1;
    justify-self: end;
  }
}

/* Panel de confirmación expo (PIN + WhatsApp) */
.expo-confirm-panel {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid #d1fae5;
  background: #f0fdf4;
  border-radius: 12px;
  text-align: center;
}
.expo-confirm-title {
  font-weight: 700;
  font-size: 14px;
  color: #065f46;
  margin-bottom: 10px;
}
.expo-confirm-pinrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.expo-confirm-pinlbl {
  font-size: 13px;
  color: #4b5563;
}
.expo-confirm-pin {
  font-family: monospace;
  font-size: 14px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 4px 8px;
  word-break: break-all;
}
.expo-confirm-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.expo-confirm-btns .success-btn {
  flex: 1 1 220px;
}
.expo-confirm-dl {
  display: inline-flex;
  background: #fff;
  color: #111827;
  border: 1px solid #d1d5db;
}
.expo-confirm-dl:hover {
  background: #f3f4f6;
}
.expo-confirm-copy {
  display: inline-flex;
  background: #fff;
  color: #111827;
  border: 1px solid #d1d5db;
}
.expo-confirm-copy:hover {
  background: #f3f4f6;
}
.expo-confirm-copy.expo-copied {
  background: #ecfdf5;
  color: #065f46;
  border-color: #a7f3d0;
}
.expo-confirm-wa {
  display: inline-flex;
  background: #25d366;
  color: #fff;
}
.expo-confirm-wa:hover {
  filter: brightness(0.96);
}

/* ==================== FIN EXPO ==================== */

/* ==================== EXPO — barra en una sola fila (operador) ==================== */
/* Scopeado a body.expo-operator: solo cuando renderExpoEntryBar corrió (admin).
   No afecta a clientes normales. Junta [chip · Elegir · Nuevo · Filtros] en una fila. */
body.expo-operator .mobile-products-bar {
  display: grid !important;              /* visible en todos los anchos para el operador */
}
/* En ≤900 px el header search está oculto, así que el mobile search
   tiene que quedar visible. Solo lo escondemos en anchos donde el
   buscador del header SÍ se muestra (≥901 px). */
@media (min-width: 901px) {
  body.expo-operator .mobile-products-bar .mpb-search {
    display: none !important;
  }
}
/* En mobile, orden visual: 1) expo bar  2) buscador  3) Filtros.
   renderExpoEntryBar() mueve Filtros fuera de mpb-actions y lo deja
   como hijo directo de mobile-products-bar, así CSS order lo ordena. */
@media (max-width: 900px) {
  body.expo-operator .mobile-products-bar .mpb-actions {
    order: 1;
  }
  body.expo-operator .mobile-products-bar .mpb-search {
    order: 2;
  }
  body.expo-operator .mobile-products-bar > #openFiltersBtn {
    order: 3;
    width: 100%;
    height: 44px;
    border-radius: 14px;
    border: 1px solid #e6e6e6;
    background: #fff;
    font-weight: 700;
    font-size: 14px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #333;
  }
}
body.expo-operator #productos .sort-row {
  display: none !important;             /* se reemplaza por la barra de expo + Filtros */
}
body.expo-operator .mobile-products-bar .mpb-actions {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 12px;
}
body.expo-operator .mpb-actions > .expo-entry-bar {
  flex: 1 1 auto;
  width: auto;
  margin: 0;
}
body.expo-operator .mpb-actions > #openFiltersBtn {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;                /* que mida el contenido, no un cajón ancho */
  height: 40px;               /* igual a los botones Elegir/Nuevo cliente */
  border-radius: 10px;        /* igual a .expo-btn */
  border: 1px solid #d1d5db;  /* igual a .expo-btn-new */
  background: #fff;
  color: #111827;
  font-weight: 600;           /* .expo-btn usa 600, no 700 */
  padding: 0 16px;
  gap: 8px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
body.expo-operator .mpb-actions > #openFiltersBtn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}
body.expo-operator .mpb-actions > #openFiltersBtn .mpb-btn-ico {
  color: #111827;
}
/* En pantallas chicas, si no entra, que envuelva prolijo */
@media (max-width: 560px) {
  body.expo-operator .mobile-products-bar .mpb-actions {
    flex-wrap: wrap;
  }
  body.expo-operator .mpb-actions > .expo-entry-bar,
  body.expo-operator .mpb-actions > #openFiltersBtn {
    flex: 1 1 100%;
  }
}
/* ==================== FIN EXPO fila ==================== */

/* ==================== EXPO: lector QR (portado de PaginaLK) ==================== */
/* ===== EXPO: botón + overlay del lector de QR ===== */
.expo-qr-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #0e7490; color: #fff; border: none; border-radius: 9px;
  padding: 10px 16px; font-size: 14px; font-weight: 700; cursor: pointer;
  margin: 2px 0 14px;
}
.expo-qr-btn:hover { background: #155e75; }
.expo-qr-scan {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(0,0,0,.92); display: none;
  align-items: center; justify-content: center;
}
.expo-qr-inner { position: relative; width: 100%; max-width: 480px; padding: 16px; text-align: center; }
#expoQrVideo { width: 100%; border-radius: 12px; background: #000; display: block; }
.expo-qr-frame {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 62%; aspect-ratio: 1 / 1; border: 3px solid #fff; border-radius: 16px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.35); pointer-events: none;
}
.expo-qr-hint { color: #fff; margin-top: 14px; font-size: 15px; }
.expo-qr-cancel {
  margin-top: 14px; background: #fff; color: #111; border: none;
  border-radius: 9px; padding: 12px 22px; font-size: 15px; font-weight: 700; cursor: pointer;
}
/* ==================== FIN EXPO QR ==================== */

/* ==================== EXPO: X para cerrar modal Nuevo cliente ==================== */
#expoNewModal .expo-new-card { position: relative; }
.expo-new-close-x {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: #f1f5f9;
  color: #334155;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.expo-new-close-x:hover { background: #e2e8f0; }
/* ==================== FIN ==================== */