/* ================= 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 #2f2f2f;
  background: #212122;
  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: #d00000 !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  gap: 8px !important;
  box-shadow: 0 2px 8px rgba(208, 0, 0, 0.3);
  transition: background 0.15s ease, transform 0.1s ease,
    box-shadow 0.15s ease;
}

.nav-link-cart:hover {
  background: #ff0000 !important;
  box-shadow: 0 4px 14px rgba(255, 0, 0, 0.4);
}

.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;
}
/* 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;
}

.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),
    opacity 110ms ease;
  transform-origin: center bottom;
  will-change: transform;
}

/* ---- Carrusel de fotos por producto (flechas + dots) ---- */
.pc-media {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}
/* Capa superior para el crossfade (dissolve) entre la 1ª y la 2ª foto:
   se posiciona por JS exactamente sobre la imagen base y se funde encima,
   así nunca se ve el fondo blanco entre foto y foto. */
.pc-img-fade {
  position: absolute;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  border-radius: inherit;
  transform-origin: center bottom;
  will-change: opacity, transform;
}
.pc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  /* El glifo ‹ › del HTML se oculta con font-size 0 y la flecha se dibuja
     como SVG de fondo (pedido del usuario, 23/9/2026): el guillemet no
     queda centrado en el círculo porque flex centra la CAJA de texto, no
     el trazo, y ese carácter tiene los sidebearings desparejos y se
     dibuja alto respecto de su línea base. El SVG va en un viewBox
     simétrico (el path ocupa 9..15 en x y 5..19 en y, o sea centro 12,12),
     así que background-position: center lo deja centrado por geometría y
     no por prueba y error. El aria-label del botón conserva el texto. */
  background-color: rgba(255, 255, 255, 0.82);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
  font-size: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  /* Siempre visibles (pedido del usuario, 23/9/2026): antes nacían en
     opacity 0 y sólo aparecían con :hover sobre .pc-media, así que en el
     catálogo no se veía que el producto tuviera más de una foto hasta
     pasar el mouse por encima. Se deja la transición de fondo para que
     el hover siga marcando cuál está apuntada. */
  opacity: 1;
  transition: background 0.18s ease;
  z-index: 3;
}
.pc-arrow.prev {
  left: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5 9 12l6 7'/%3E%3C/svg%3E");
}
.pc-arrow.next {
  right: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l6 7-6 7'/%3E%3C/svg%3E");
}
.pc-arrow:hover {
  background-color: #fff;
}
.pc-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  display: flex;
  gap: 4px;
  justify-content: center;
  pointer-events: none;
}
.pc-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
}
.pc-dot.on {
  background: rgba(0, 0, 0, 0.7);
}
/* (Se sacó la excepción de touch: antes acá se forzaba opacity 1 porque en
   touch no hay :hover. Ahora las flechas nacen visibles en todos lados, así
   que la regla quedaba duplicando lo de arriba.) */
@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;
}
.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;
  display: flex;
  gap: 10px;
}
.filters-apply {
  flex: 1;
  width: 100%;
  height: 44px;
  border-radius: 14px;
  border: none;
  background: #111;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
/* Botón "Limpiar filtros": secundario, al lado de "Aplicar". */
.filters-clear {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1.5px solid #d0d0d0;
  background: #fff;
  color: #333;
  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;
}
/* Fecha estimada de entrega (global) arriba del carrito */
.entrega-estimada {
  width: min(780px, 100%);
  margin-bottom: 10px;
  padding: 10px 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  color: #1e3a8a;
  font-size: 13.5px;
}
.entrega-estimada strong {
  font-size: 15px;
}
/* Aviso de deuda pendiente (idea 6064) — sólo avisa, no bloquea */
/* ⚠ El `display:flex` de abajo le GANA al display:none que el navegador le da al
   atributo [hidden] (misma especificidad, gana la del autor). Sin esta regla, el
   aviso oculto —o sea en admin, en modo vendedor y en todo cliente sin deuda— se
   dibujaba igual: una caja roja vacía arriba de Método de pago. */
.deuda-aviso[hidden] {
  display: none;
}
.deuda-aviso {
  width: min(780px, 100%);
  margin-bottom: 10px;
  padding: 10px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
  color: #991b1b;
  font-size: 13.5px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.deuda-aviso strong {
  font-size: 15px;
}
.deuda-aviso-ico {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1.3;
}
.deuda-aviso-fecha {
  color: #b45309;
  font-size: 12px;
  white-space: nowrap;
}
/* Retira: día + franja horaria dentro de la card de entrega */
.retiro-block {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #ddd;
}
.retiro-fecha {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #d8d8d8;
  border-radius: 10px;
  font-size: 15px;
  background: #fff;
}
.retiro-franjas {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.retiro-franja {
  flex: 1 1 140px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid #d8d8d8;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
.retiro-franja:has(input:checked) {
  border-color: #e3000f;
  background: #fff5f5;
}
.retiro-franja input {
  accent-color: #e3000f;
}
/* Misma info en la pantalla "¡Pedido confirmado!" (tilde verde) */
.success-entrega {
  display: inline-block;
  margin: 4px auto 14px;
  padding: 10px 18px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  color: #1e3a8a;
  font-size: 14px;
}
.success-entrega strong {
  font-size: 16px;
}
.success-entrega[hidden] { display: none; }
.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;
}
/* Fila partida: Dirección de entrega + Observaciones, mitad y mitad.
   Mantiene el ancho total (~780px) del bloque original. */
.ship-row-split {
  gap: 16px;
  flex-wrap: wrap;
}
.ship-row-split > .ship-card {
  width: auto;
  flex: 1 1 340px;
  min-width: 0;
  max-width: 382px;
}
.ship-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  resize: vertical;
  min-height: 42px;
}
.ship-textarea:focus {
  border-color: #111;
}
/* 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;
}

/* Sólo agregar (idea 4990): en modo edición, las líneas que el pedido YA tenía no
   se pueden bajar. El − queda apagado al llegar al piso y debajo va el cartelito
   que dice cuál es ese piso, así el "no me deja" se explica solo. */
.cart-step-btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
/* Aviso de falta de stock en la línea del carrito (11/09/2026). Naranja, como el
   cartel del catálogo; informativo, no bloquea la compra. */
.cart-sinstock {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  color: #b45309;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 999px;
}
.cart-min-hint {
  font-size: 10px;
  line-height: 1.25;
  color: #7a5100;
  background: #fff4d6;
  border: 1px solid #e6c34d;
  border-radius: 4px;
  padding: 1px 5px;
  margin-top: 3px;
  display: inline-block;
}

/* Cartelito cajas vs unidades — aparece cuando la cantidad es múltiplo del uxb.
   No bloqueante: recuerda que se anota en cajas y muestra la equivalencia. */
.cajas-hint {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 4px 7px;
  font-size: 11px;
  line-height: 1.25;
  color: #8a5a00;
  background: #fff6e0;
  border: 1px solid #ffd88a;
  border-radius: 6px;
}
.cajas-hint .cajas-hint-ico {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1;
}
.cajas-hint strong {
  font-weight: 700;
}
/* En la tabla del carrito el hint va debajo del stepper, sin ensanchar la celda */
.cart-table .cajas-hint {
  margin-top: 5px;
  max-width: 210px;
}
/* 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;
}
/* Estado de stock — el cartel aparece SOLO cuando no hay stock: naranja
   "Sin stock / hasta dd/mm" en dos renglones y letra grande. Ficha sin cartel =
   hay mercadería. Informativo: no bloquea la compra. */
.product-card .pc-stock {
  margin: 2px 0 4px;
  padding: 2px 8px;
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid;
  border-radius: 999px;
  line-height: 1.3;
}
.product-card .pc-stock-ingresa {
  color: #b45309;
  background: #fff7ed;
  border-color: #fed7aa;
  /* Dos renglones y letra grande: es el dato que el cliente tiene que ver sí o sí.
     Sigue siendo inline-block, así el cartel mide lo que mide el texto. */
  padding: 4px 10px;
  border-radius: 10px;
  text-align: center;
  line-height: 1.15;
  font-size: 15px;
}
.product-card .pc-stock-ingresa .pc-stock-l1 {
  display: block;
  font-size: 16px;
  letter-spacing: 0.2px;
}
.product-card .pc-stock-ingresa .pc-stock-l2 {
  display: block;
  font-size: 15px;
}
/* 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: #1565c0; /* Facturado (idea 8743) */
}
.o-stage-3 {
  color: #2e7d32; /* Entregado */
}
.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: #fff; /* caja blanca */
  color: #000; /* letras negras */
  border: 1px solid #e0e0e0;
  height: 36px; /* igual que el botón de idioma (中文) */
  padding: 0 14px;
  border-radius: 999px;

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

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

.user-toggle-text {
  font-weight: 800;
  font-size: 17px; /* +30% sobre 13 */
  line-height: 1;
  white-space: nowrap;
  color: #000;
  /* 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: 0 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: 16px; /* un poco más grande */
  line-height: 1;
  opacity: 1;
  color: #e3000f; /* flechita roja */
  display: inline-block;
  transition: transform 0.22s ease;
}
/* Al abrir el menú (aria-expanded=true) la flecha gira apuntando hacia arriba */
.user-toggle-btn[aria-expanded="true"] .user-toggle-caret {
  transform: rotate(180deg);
}

.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: #212122;
  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;
    /* Fila 1: buscador full-width. Fila 2: [Categoría] [Filtros] */
    grid-template-columns: 1fr;
    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;
    /* Full width en mobile — no comparte fila con los botones */
    grid-column: 1 / -1;
  }

  .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: 1fr 1fr;
    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-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;
}

.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 chicos (901-1024px) 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
   Arriba de 1024px se muestran los botones compactos (Mi surtido / Nuevos /
   Filtrar por), que es lo que se quiere ver en monitores normales. */
@media (min-width: 901px) and (max-width: 1024px) {
  /* 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; }

/* Fila de abajo: sólo "¿Seguro que no necesitás…?", de borde a borde de las
   dos columnas (desde Método de pago hasta el borde derecho del listado).
   Hasta el 02/10/2026 compartía la fila con el Subtotal; el Subtotal ahora
   vive siempre en la columna izquierda, debajo de Método de pago. */
#carrito .cart-bottom-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  width: 100%;
}
/* El Subtotal en la columna izquierda: el ancho completo de la columna, igual
   que Método de pago. */
#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;
}

/* P8: checkout compacto en DESKTOP (vista de 2 columnas) — reduce gap, padding
   de las cards de entrega/pago y alto de los botones de pago para que toda la
   columna izquierda entre en una pantalla. Mobile queda igual. */
@media (min-width: 992px) {
  #carrito .cart-2col .cart-col-left {
    gap: 10px;
  }
  #carrito .cart-2col .cart-col-left .ship-card {
    padding: 12px 14px;
  }
  #carrito .cart-2col .cart-col-left .pay-card {
    padding: 12px 14px;
  }
  #carrito .cart-2col .cart-col-left .pay-btn {
    padding: 8px 10px;
  }
  #carrito .cart-2col .cart-col-left .pay-title {
    margin-bottom: 6px;
  }
  #carrito .cart-2col .cart-col-left .cart-total {
    margin-top: 4px;
  }
}

/* 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 {
  /* Mide lo que su contenido (02/10/2026): con una fila de sugerencias no deja
     hueco abajo; con muchas, las tarjetas scrollean adentro (3 filas). */
  min-height: 0;
  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;
  /* 3 filas a la vista; el resto scrollea adentro. */
  max-height: calc(3 * 84px + 2 * 8px + 4px);
  flex: 0 1 auto;
  min-height: 0;
  align-content: start;
  /* Hasta 5 por fila (02/10/2026): cada columna mide al menos 1/5 del ancho,
     así nunca entran 6; si el ancho no da 210 px por tarjeta, entran menos. */
  grid-template-columns: repeat(auto-fill, minmax(max(210px, calc((100% - 4 * 8px) / 5)), 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 / VARIAS RAZONES SOCIALES: cuando existe #customerSelectorCart,
   "Pedir para (Razón Social)" + "Indicar Dirección de Entrega" van en la
   misma fila, y ABAJO Observaciones ocupa el ancho de las dos.
   El resto (fecha estimada, deuda, clienteNuevoRow, paymentRow, cart-total)
   ocupa ancho completo.

   ⚠ La fila de envío (.ship-row-split) va con `display: contents` (02/10/2026):
   sus dos tarjetas pasan a ser celdas de ESTA grilla. Antes la fila entera iba
   a la columna 2, Observaciones caía debajo de Dirección y debajo de
   "Pedir para" quedaba un hueco vacío.
   ⚠ Sin `grid-row` fijo: la ubicación sale del orden del HTML. Con la fila 1
   fijada, la fecha estimada (que viene antes en el HTML) se iba abajo de todo.
   Chequeo: `node tests/checkout-layout.cjs`.
   ============================================================ */
#carrito .cart-2col .cart-col-left:has(#customerSelectorCart) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
  /* `align-content: start` (02/10/2026, Gastón): con el listado al pie de la
     pantalla, la columna de la derecha queda más alta y estira a ésta. Sin
     esto la grilla repartía ese alto sobrante entre sus filas: "Pedir para"
     crecía ~50 px por debajo de Dirección y Método de pago y el Subtotal
     bajaban. Así cada fila mide lo que su contenido y el sobrante queda abajo. */
  align-content: start;
}

/* `align-self: stretch`: con el expreso a la vista, Dirección mide ~290 px y
   "Pedir para" ~170. Sin estirarla quedaba otro hueco debajo de "Pedir para".
   Es flex (.ship-row), así que su tarjeta se estira con ella. */
#carrito .cart-2col .cart-col-left:has(#customerSelectorCart) > #customerSelectorCart {
  grid-column: 1;
  align-self: stretch;
}
/* La tarjeta es grilla (.has-confirm): estirada, repartía el alto sobrante
   entre sus filas y el desplegable quedaba corrido al medio. Todo arriba. */
#carrito .cart-2col .cart-col-left:has(#customerSelectorCart) > #customerSelectorCart > .ship-card {
  align-content: start;
}

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

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

/* Todo lo demás (fecha estimada, deuda, clienteNuevo, paymentRow, cart-total)
   ocupa toda la fila. Observaciones ya no vive acá: es un botón al lado de
   "Confirmar pedido" (02/10/2026). */
#carrito .cart-2col .cart-col-left:has(#customerSelectorCart) > #entregaEstimada,
#carrito .cart-2col .cart-col-left:has(#customerSelectorCart) > #deudaAviso,
#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) #shipCardEntrega {
    grid-column: 1;
  }
}

#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;
}

/* ...y ADEMAS la card, no solo la row. Dirección de entrega y Observaciones son
   dos .ship-card HERMANAS dentro de la misma .ship-row-split, y las dos llevan
   `position: relative; z-index: 1` (bloque "CARRITO / PAGO NUNCA TAPAN EL NAV").
   Con el mismo z-index manda el orden del DOM, así que Observaciones —que viene
   después— se pintaba ENCIMA del popup de sucursales y tapaba media lista: sólo
   se veían la primera opción y "+ Agregar sucursal". Subir la row no alcanza,
   porque el que gana adentro de la row es el hermano. */
#carrito .ship-card:has(.cs-popup:not([hidden])) {
  z-index: 600 !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): hay una razón social elegida. Ya no hay botón
   "Confirmar" (02/10/2026): la marca la pone refreshSubmitEnabled. */
#carrito #customerSelectorCart .ship-card.cs-elegida::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 #customerSelectorCart .ship-card.cs-elegida .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.6s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease;
}
.product-card:hover img {
  transform: scale(1.035);
}

/* (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 por dispositivo (pedido 10/9/2026):
      - Desktop / cualquier pantalla HORIZONTAL: SIEMPRE 4 columnas, cards lo
        más grandes posible (1fr; el ancho tope lo pone el max-width 1600 del
        layout, así no se agrandan de más en 4K).
      - Tablet en VERTICAL: 3 columnas.
      - Celular: 2 columnas.
      Prioridad: que la foto y el texto queden legibles en cada tamaño.
      El toggle 3-col (.grid-3col, ≥1200px) lo sobreescribe. */
@media (min-width: 901px) {
  .products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-content: stretch;
    gap: clamp(16px, 1.6vw, 26px);
  }
}
/* Tablet (601-1024px): 3 columnas, cards que llenan el ancho disponible. */
@media (min-width: 601px) and (max-width: 1024px) {
  .products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
    gap: clamp(14px, 2vw, 22px);
  }
}
/* Celular (≤600px): 2 columnas. */
@media (max-width: 600px) {
  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}
/* PC y cualquier pantalla HORIZONTAL: siempre 4, aunque se angoste la ventana.
   Vuelve a 4 en la franja 901-1024 cuando la orientación es horizontal, así una
   ventana de PC achicada no baja a 3. En vertical (tablet) sigue mandando el
   bloque de 3 de arriba. */
@media (min-width: 901px) and (orientation: landscape) {
  .products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 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;
  }
}

/***********************
 * EXPO — barra de entrada [Elegir cliente] [Nuevo cliente] + popup
 ***********************/
.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;
}
.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;
  position: relative;
}
.expo-new-close-x {
  position: absolute;
  top: 10px;
  right: 14px;
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #6b7280;
  padding: 4px 8px;
  z-index: 3;
}
.expo-new-close-x:hover { color: #111827; }
.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);
}


/* ===== 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;
}

/* Escala activa — aviso contado forzado + wrapper checkpoints self-service */
.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 b { font-weight: 700; }
.escala-cp-wrap { margin-top: 12px; }

/* Botón traducción chino mandarín (header oscuro #212122 → texto blanco) */
.btn-translate-cn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  height: 36px;
  padding: 0 12px;
  font-size: 13px;
  cursor: pointer;
  color: #fff;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s, border-color 0.15s;
}
.btn-translate-cn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
}
/* Ocultar la barra superior de Google Translate */
.skiptranslate { display: none !important; }
body { top: 0 !important; }

/* ---- Popup: descargar fotos del surtido ---- */
.fotos-popup-card {
  max-width: 440px;
  text-align: center;
  padding: 28px 26px 24px;
  overflow: hidden; /* para que la franja respete las esquinas redondeadas */
}
/* Franja superior gris oscuro (mismo color que el menú) detrás del logo.
   Full-bleed: cancela el padding del card con márgenes negativos. */
.fotos-popup-head {
  background: #212122;
  margin: -28px -26px 18px;
  padding: 22px 26px 18px;
  border-radius: var(--radius) var(--radius) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
}
.fotos-popup-close {
  position: absolute;
  top: 22px; /* alineada al centro vertical del logo dentro de la franja */
  right: 14px;
  border: none;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: #fff; /* blanco para contrastar sobre la franja oscura */
  cursor: pointer;
  z-index: 1;
}
.fotos-popup-close:hover { color: #ccc; }
.fotos-popup-logo {
  height: 34px;
  width: auto;
  margin: 0 auto;
  display: block;
}
.fotos-popup-title {
  font-size: 19px;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 8px;
}
.fotos-popup-text {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
  margin-bottom: 20px;
}
.fotos-popup-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fotos-popup-btn {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid #d11a2a;
  background: #fff;
  color: #d11a2a;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.fotos-popup-btn:hover { background: #fff2f3; }
.fotos-popup-btn.primary {
  background: #d11a2a;
  color: #fff;
}
.fotos-popup-btn.primary:hover { background: #b3141f; }
.fotos-popup-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.fotos-popup-progress { margin-top: 18px; }
.fotos-popup-bar {
  height: 8px;
  background: #eee;
  border-radius: 6px;
  overflow: hidden;
}
.fotos-popup-bar > span {
  display: block;
  height: 100%;
  width: 0%;
  background: #d11a2a;
  transition: width 0.2s ease;
}
.fotos-popup-status {
  font-size: 12px;
  color: #666;
  margin-top: 8px;
}

/* ============================================================
   CONTENIDO PARA TUS REDES — modal galería de videos
   ============================================================ */
.cr-card {
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 20px 20px 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Gana en especificidad a `.modal .modal-card { max-width:420px }` para dar
   ancho de galería. */
.modal .cr-card {
  width: 96vw;
  max-width: 980px;
  max-height: 90vh;
  overflow: hidden;
}
.cr-card .cr-grid {
  overflow-y: auto;
  flex: 1 1 auto;
  /* Filas al alto de su contenido (05/10/2026): con `auto` y la tarjeta más baja
     que la grilla (celular con 3+ filas, o PC con 9+ videos) el navegador
     achicaba las filas en vez de scrollear —`.cr-item` tiene overflow:hidden, o
     sea mínimo 0— y cada tarjeta tapaba el código, el nombre y «Descargar» de la
     de arriba. */
  grid-auto-rows: max-content;
  align-content: start;
  -webkit-overflow-scrolling: touch;
}
.cr-header {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cr-logo {
  width: 54px;
  height: 54px;
  object-fit: contain;
  flex: 0 0 auto;
}
.cr-title {
  font-size: 20px;
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1.1;
}
.cr-sub {
  font-size: 13px;
  color: #666;
  margin-top: 2px;
}
.cr-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cr-filters {
  display: flex;
  gap: 6px;
}
.cr-chip {
  border: 1px solid #d8d8d8;
  background: #f6f6f6;
  color: #444;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cr-chip.on {
  background: #e3000f;
  border-color: #e3000f;
  color: #fff;
}
.cr-search {
  flex: 1 1 220px;
  min-width: 160px;
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
}
.cr-admin-hint {
  font-size: 12px;
  color: #8a5b00;
  background: #fff4d6;
  border: 1px solid #ffe19a;
  border-radius: 8px;
  padding: 6px 10px;
}
.cr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  padding: 2px;
}
.cr-item {
  border: 1px solid #ececec;
  border-radius: 12px;
  background: #fafafa;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}
.cr-item.cr-busy {
  opacity: 0.55;
  pointer-events: none;
}
.cr-media {
  position: relative;
  background: #111;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}
.cr-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}
.cr-novideo {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #f0f0f0;
  color: #999;
  font-size: 12px;
}
.cr-novideo img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  opacity: 0.85;
}
.cr-fav {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease;
}
.cr-fav:hover {
  transform: scale(1.1);
}
.cr-fav.on {
  background: #ffd24d;
  color: #7a5b00;
}
.cr-info {
  padding: 8px 10px 2px;
}
.cr-cod {
  font-size: 12px;
  color: #888;
}
.cr-cod span {
  color: #333;
  font-weight: 700;
}
.cr-name {
  font-size: 13px;
  color: #222;
  line-height: 1.25;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cr-actions {
  margin-top: auto;
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cr-dl {
  border: none;
  background: #1a1a1a;
  color: #fff;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.cr-dl:hover {
  background: #000;
}
.cr-dl:disabled {
  opacity: 0.6;
  cursor: default;
}
.cr-admin {
  display: flex;
  gap: 6px;
  align-items: center;
}
.cr-upload {
  flex: 1 1 auto;
  border: 1px dashed #bbb;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #555;
  text-align: center;
  cursor: pointer;
  background: #fff;
}
.cr-upload input {
  display: none;
}
.cr-del {
  border: 1px solid #e3000f;
  background: #fff;
  color: #e3000f;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.cr-loading,
.cr-empty {
  padding: 30px;
  text-align: center;
  color: #888;
  font-size: 14px;
}
.cr-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(20px);
  background: #1a1a1a;
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 14px;
  z-index: 100000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  max-width: 90vw;
}
.cr-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Aviso (no bloquea) al superar 3 cajas del mismo producto */
.qty-warn-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(20px);
  background: #fff4d6;
  color: #7a4d00;
  border: 1px solid #f0c14b;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  z-index: 100001;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  max-width: min(92vw, 420px);
}
.qty-warn-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (max-width: 640px) {
  .cr-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
  .cr-title {
    font-size: 17px;
  }
}
#contenidoRedesModal .modal-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
}
#contenidoRedesModal .cr-card {
  z-index: 1;
}
/* Aviso "en proceso de carga" entre los filtros y la grilla de videos */
.cr-notice {
  background: #eaf4ff;
  border: 1px solid #cfe4fb;
  color: #17558a;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

/* ============================================================
   PERSIANA en la tarjeta de producto: la portada (con cartón) se CORRE A LA
   DERECHA y revela la 2ª foto (sin cartón) que está detrás; al salir, vuelve.
   Solo aplica cuando hay 2ª foto (.pc-persiana). Con una sola foto, el front
   queda en flujo normal y no se toca.
   El disparador NO es :hover sino la clase .is-open, que pone el JS recién
   después de 3 s con el mouse quieto sobre la card (PC_HOVER_DELAY): así
   pasar el mouse por encima barriendo la grilla no cambia ninguna foto.
   ============================================================ */
.pc-persiana {
  overflow: hidden;
}
.pc-persiana img.pc-back {
  position: relative;
  z-index: 0;
}
.pc-persiana img.pc-front {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.pc-persiana.is-open img.pc-front {
  transform: translateX(100%);
}
/* Contador de fotos (1/2, 1/3…) arriba a la derecha de la foto. El total lo
   escribe el render según cuántas fotos tenga el producto; el número de la
   izquierda lo cambia el JS junto con la persiana. */
.pc-count {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.3px;
  padding: 3px 7px;
  border-radius: 999px;
  pointer-events: none;
}
/* Si la card tiene badge (NUEVO / LIQUIDACIÓN / …) el contador baja para no
   quedar debajo de él. */
.pc-count.pc-count-bajo {
  top: 52px;
}
/* En tarjetas con persiana no aplicamos el zoom de hover: rompería la
   alineación de las dos capas. */
.product-card:hover .pc-persiana img.pc-back {
  transform: none;
}

/* ============================================================
   PRUEBA — popup de producto (imagen grande + info + razón social)
   ============================================================ */
.pp-card {
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 22px 22px 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.modal .pp-card {
  /* Compacto y atado a la pantalla: nunca más ancho que 420px ni más alto
     que el 90% del viewport; si aun así no entra, scrollea (no se corta). */
  width: min(92vw, 420px);
  max-height: 90vh;
  overflow-y: auto;
}
.pp-imgwrap {
  /* La imagen es cuadrada y se dimensiona por el MENOR entre el ancho del
     card y el 44% del alto de la ventana, así en pantallas bajas se achica
     y el card entero sigue entrando. */
  width: min(100%, 44vh);
  max-width: 360px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  background: #f6f6f6;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pp-imgwrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.pp-name {
  font-size: 19px;
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1.2;
  margin-top: 4px;
}
.pp-cod {
  font-size: 14px;
  color: #777;
}
.pp-price {
  font-size: 16px;
  color: #222;
}
.pp-price strong {
  font-size: 20px;
  color: #1a1a1a;
}
.pp-price .pp-iva {
  font-size: 12px;
  color: #999;
}
.pp-btn {
  margin-top: 8px;
  border: none;
  background: #e3000f;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  border-radius: 10px;
  padding: 12px 26px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.pp-btn:hover {
  background: #c60010;
}
.pp-btn:active {
  transform: translateY(1px);
}
#prodPreviewModal .modal-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
}
#prodPreviewModal .pp-card {
  z-index: 1;
}
/* El popup de producto se centra y escrollea SIEMPRE, igual en todas las
   pantallas (NO bottom-sheet en mobile). El !important vence la regla mobile
   `.modal{align-items:flex-end !important}` por mayor especificidad (id). */
#prodPreviewModal.open {
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  overflow-y: auto;
}
#prodPreviewModal .pp-card {
  margin: auto !important;
}

/* Flechas dentro del popup de producto (navegar entre fotos) */
.pp-imgwrap {
  position: relative;
}
.pp-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  /* Mismo criterio que .pc-arrow: chevron SVG centrado por geometría en
     vez del glifo ‹ ›, que se dibujaba corrido dentro del círculo. */
  background-color: rgba(0, 0, 0, 0.45);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  font-size: 0;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background-color 0.15s ease;
}
.pp-arrow:hover {
  background-color: rgba(0, 0, 0, 0.68);
}
.pp-arrow.prev {
  left: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5 9 12l6 7'/%3E%3C/svg%3E");
}
.pp-arrow.next {
  right: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l6 7-6 7'/%3E%3C/svg%3E");
}

/* "Ver video" (05/10/2026): pastilla arriba a la derecha de la foto, sólo en
   los productos con video. Al tocarla el video reemplaza a la foto dentro del
   mismo cuadro y la pastilla pasa a decir "Ver fotos". */
.pp-video-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: auto;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: 999px;
  background: #e3000f;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  padding: 8px 13px 8px 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transition: background 0.15s ease;
}
.pp-video-btn:hover {
  background: #c60010;
}
.pp-video-btn svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  flex: none;
}
.pp-video-btn.on {
  background: rgba(0, 0, 0, 0.68);
}
.pp-video-btn.on:hover {
  background: rgba(0, 0, 0, 0.85);
}
.pp-imgwrap .pp-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
/* La × del popup heredaba .fotos-popup-close, que es BLANCA (pensada para la
   franja oscura del popup de fotos): sobre esta tarjeta no se veía, y quedaba
   un botón invisible pegado a "Ver video". Se le da color y fondo propios. */
#prodPreviewModal .fotos-popup-close {
  top: 4px;
  right: 4px;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #555;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  z-index: 4;
}
#prodPreviewModal .fotos-popup-close:hover {
  background: #f0f0f0;
  color: #111;
}

/* ============================================================
   Toggle de densidad de grilla (4 / 3 columnas) — barra de filtros desktop
   ============================================================ */
.grid-view-toggle {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  margin-left: 6px;
}
.gv-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #d8d8d8;
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.gv-btn svg {
  width: 18px;
  height: 18px;
}
.gv-btn svg rect {
  fill: #9a9a9a;
}
.gv-btn:hover {
  border-color: #b9b9b9;
}
.gv-btn.on {
  border-color: #e3000f;
  background: #fff5f5;
}
.gv-btn.on svg rect {
  fill: #e3000f;
}

/* 3 columnas: mismo ancho total que las 4, imágenes más grandes.
   Solo desktop (a <1200px la grilla ya baja sola a 3/2/1). */
@media (min-width: 1200px) {
  #productsContainer.grid-3col .products-grid {
    grid-template-columns: repeat(3, minmax(0, 382px));
  }
  #productsContainer.grid-3col .product-card img {
    width: 300px;
    height: 300px;
  }
}

/* Popup de producto: precios y acción (reusa .card-price-line / .add-btn) */
.pp-prices {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
}
.pp-actions {
  margin-top: 8px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.pp-actions .add-btn {
  min-width: 240px;
  max-width: 100%;
}

/* =========================================================
   HEADER DESKTOP — sin superposición (fix 10/9/2026)
   El logo y .nav-right estaban en position:absolute, o sea fuera
   del flujo: el .nav-center centrado quedaba DEBAJO de la caja de
   usuario y, con una razón social larga, el botón 🌐 中文 tapaba
   "Enviá tu Pedido". Con el header en flujo (logo | nav-center |
   nav-right) el solapamiento no puede ocurrir a ningún ancho:
   el centro ocupa el espacio que sobra y el buscador es lo
   primero que cede. Solo desktop — mobile (<=900) oculta
   nav-center/nav-right y sigue con su layout absoluto.
   ========================================================= */
@media (min-width: 901px) {
  .header {
    gap: 16px;
    justify-content: flex-start;
  }
  .logo {
    position: static;
    left: auto;
    flex: 0 0 auto;
  }
  .nav {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
    gap: 16px;
  }
  .nav-center {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
  }
  /* El buscador cede ancho antes que los botones */
  .nav-search {
    flex: 0 1 340px;
    min-width: 120px;
  }
  .nav-center a,
  .nav-center button.nav-link,
  .nav-center .dropdown-wrap {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .nav-right {
    position: static;
    right: auto;
    top: auto;
    transform: none;
    flex: 0 0 auto;
    min-width: 0;
  }
  /* La razón social ya no puede empujar sobre el carrito, pero
     igual se acota para que la caja de usuario no coma el header. */
  .user-toggle-text {
    max-width: clamp(80px, 14vw, 220px);
  }
}

/* =========================================================
   ZOOM GLOBAL DEL SITIO — REVERTIDO (10/9/2026)
   El 10/9 se había puesto `zoom: 0.8` en :root (≥901px) para que el 100%
   del navegador se viera como el 80%. Resultaba todo demasiado chico y solo
   se veía bien forzando el navegador al 125%. Pedido del usuario: volver al
   tamaño normal (100% = tamaño real). Se quitó el zoom y las compensaciones
   125vh; las reglas base ya usan 100vh, así que no hace falta override.
   _zoomDoc() lee el zoom en vivo y devuelve 1, así que el JS que medía con
   rect sigue funcionando sin cambios.
   ========================================================= */

/* ============================================================
   Header apretado (notebooks 901-1280px): sacar el dropdown "Categorías ▾"
   del nav. Es el ítem menos útil del header —las categorías ya están en el
   sidebar izquierdo y en la barra mobile— y sacarlo evita que, con una razón
   social larga, los textos del header queden angostos y solapados.
   En ≥1281px (monitores grandes) se muestra normal.
   ============================================================ */
@media (min-width: 901px) and (max-width: 1500px) {
  .nav-center .dropdown-wrap {
    display: none !important;
  }
}

/* ============================================================
   "Contenido para tus redes": salida visible.
   La × reusa .fotos-popup-close, que es BLANCA porque en el popup de fotos
   va sobre la franja oscura; acá la tarjeta es blanca y quedaba invisible.
   Se le da color oscuro solo en este modal y se agrega un botón "Salir".
   ============================================================ */
#contenidoRedesModal .fotos-popup-close {
  top: 12px;
  right: 12px;
  color: #555;
  font-size: 28px;
  line-height: 1;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
#contenidoRedesModal .fotos-popup-close:hover {
  background: #f0f0f0;
  color: #111;
}
.cr-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}
.cr-salir {
  border: 1px solid #d8d8d8;
  background: #fff;
  color: #333;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  padding: 10px 26px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cr-salir:hover {
  background: #f4f4f4;
  border-color: #bbb;
}

/* ============================================================
   Clientes que no están comprando — card del perfil del vendedor
   ============================================================ */
.vinact-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 12px;
}
.vinact-label {
  font-size: 13px;
  color: #666;
  font-weight: 600;
}
.vinact-select {
  height: 34px;
  border-radius: 10px;
  border: 1px solid #ddd;
  background: #fff;
  padding: 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: #111;
}
.vinact-buscar {
  flex: 1 1 180px;
  min-width: 140px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #ddd;
  padding: 0 10px;
  font-size: 14px;
}
.vinact-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vinact-item {
  padding: 9px 0;
  border-bottom: 1px solid #eee;
}
.vinact-item:last-child {
  border-bottom: 0;
}
.vinact-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.vinact-nombre {
  font-weight: 700;
  color: #111;
}
.vinact-importe {
  font-weight: 800;
  color: #111;
  white-space: nowrap;
}
.vinact-sub {
  font-size: 12.5px;
  color: #777;
  margin-top: 2px;
}
.vinact-meses {
  color: #b00020;
  font-weight: 700;
}
.vinact-nunca {
  color: #b26b00;
  font-weight: 700;
}
.vinact-chef {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 8px;
  background: #eef6ee;
  color: #1e7b34;
  font-weight: 700;
  font-size: 11.5px;
}
.vinact-wpp {
  color: #1e7b34;
  font-weight: 700;
  text-decoration: none;
}
.vinact-wpp:hover {
  text-decoration: underline;
}
.vinact-vacio {
  color: #777;
  font-size: 13.5px;
  padding: 6px 0;
}
/* Estado que marca el vendedor (22/09/2026). "Pendiente revisión" va primero. */
.vinact-est {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.vinact-est-btn {
  width: auto;
  margin: 0;
  padding: 3px 9px;
  border: 1px solid #ddd;
  border-radius: 999px;
  background: #fff;
  color: #555;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
}
.vinact-est-btn:hover {
  border-color: #999;
  color: #111;
}
.vinact-est-btn.gestion {
  border-style: dashed;
}
.vinact-est-btn.on {
  background: #111;
  border-color: #111;
  border-style: solid;
  color: #fff;
}
.vinact-nota {
  margin-top: 5px;
  font-size: 12.5px;
  color: #444;
}
.vinact-nota-txt {
  color: #666;
  font-style: italic;
}
.vinact-vencido {
  color: #b00020;
}
.vinact-item.vinact-e-cerro,
.vinact-item.vinact-e-otra_razon_social {
  opacity: 0.6;
}
.vinact-item.vinact-vencida {
  background: #fff5f5;
}
.vinact-ed {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  background: #fafafa;
}
.vinact-ed-l {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: #333;
  margin-bottom: 4px;
}
.vinact-ed-in {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 9px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}
.vinact-ed-hint {
  margin-top: 5px;
  font-size: 12px;
  color: #777;
}
.vinact-ed-err {
  margin-top: 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: #b00020;
}
.vinact-ed-acc {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.vinact-ed-acc .profile-btn {
  width: auto;
  padding: 6px 14px;
  font-size: 13px;
}

/* ============================================================================
   EXPRESO DE LA SUCURSAL  (Thomas, 23/09/2026)
   La línea que va debajo del selector de sucursal + el popup para cambiarlo.
   Se muestra sólo cuando la sucursal va por expreso (interior) o ya tiene uno
   cargado: en CABA/GBA repartimos nosotros y el cartel no significaría nada.
   ========================================================================== */
.exp-box {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 9px;
  padding: 8px 10px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  background: #fafafa;
  font-size: 13px;
  line-height: 1.35;
}
.exp-box[hidden] { display: none; }
.exp-ico { flex: 0 0 auto; font-size: 14px; line-height: 1.2; }
.exp-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.exp-k {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a8a8a;
  font-weight: 700;
}
.exp-v { font-weight: 700; color: #1f1f1f; overflow-wrap: anywhere; }
.exp-v--falta { color: #b45309; font-weight: 600; }
.exp-dir { font-size: 11.5px; color: #6b6b6b; overflow-wrap: anywhere; }
.exp-pend { font-size: 11px; color: #b45309; }
/* El nombre deducido del galpón, no traído de la ficha. Ver
   _expDesdeGalpon() en script.js: se muestra chico y en gris porque
   el dato autoritativo es la dirección que va arriba. */
.exp-nota { font-size: 10.5px; color: #8a8a8a; font-style: italic; }
.exp-btn {
  flex: 0 0 auto;
  border: 1px solid #d4d4d4;
  background: #fff;
  border-radius: 6px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: #333;
}
.exp-btn:hover { background: #f1f1f1; border-color: #bdbdbd; }

/* ---- popup ---- */
.exp-suc { margin: 0 0 12px; font-size: 13px; color: #555; }
.exp-suc span { font-weight: 700; color: #1f1f1f; }
.exp-help { font-size: 11.5px; color: #777; margin: -6px 0 10px; }
.exp-opt { color: #999; font-weight: 400; font-size: 11px; }

.exp-res { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; margin-bottom: 10px; }
.exp-op {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
  width: 100%;
  border: 1px solid #ececec;
  background: #fff;
  border-radius: 7px;
  padding: 8px 10px;
  cursor: pointer;
  font-family: inherit;
}
.exp-op:hover { background: #f5f5f5; border-color: #d0d0d0; }
.exp-op-n { font-size: 13.5px; font-weight: 600; color: #1f1f1f; }
.exp-op-d { font-size: 11.5px; color: #777; }

.exp-sel {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 13px;
}
.exp-sel-ok { color: #15803d; font-weight: 700; }
.exp-sel b { display: block; }
.exp-sel-d { display: block; font-size: 11.5px; color: #4b6b57; margin-top: 2px; }

/* No encontrado: informa, NO frena. Ámbar, no rojo — no es un error del cliente. */
/* Padron de expresos caido: NO es "no hay coincidencias". Ver script.js. */
.exp-op-vacio {
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.4;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
}

.exp-libre {
  border: 1px solid #fde68a;
  background: #fffbeb;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.exp-libre[hidden] { display: none; }
.exp-libre-t { margin: 0 0 10px; font-size: 12.5px; color: #78350f; line-height: 1.4; }

.exp-cancel {
  display: block;
  width: 100%;
  margin-top: 8px;
  border: none;
  background: none;
  color: #777;
  font-size: 12.5px;
  cursor: pointer;
  padding: 6px;
  font-family: inherit;
}
.exp-cancel:hover { color: #333; text-decoration: underline; }

@media (max-width: 460px) {
  .exp-box { flex-wrap: wrap; }
  .exp-btn { margin-left: auto; }
}

/* VENDEDOR: la línea del expreso va COMPACTA (Gastón, 02/10/2026). En tres
   renglones (rótulo / nombre / dirección) empujaba Método de pago y el Total
   del pedido quedaba fuera de la pantalla. Ahora son dos renglones bajos:
   "EXPRESO Carnevali" con el botón al lado, y la dirección del galpón abajo,
   chica. La dirección NO se recorta: es a dónde va el camión. La nota "según
   la dirección de tu ficha" es para el cliente y al vendedor no se le muestra.
   El cliente la sigue viendo como siempre. */
/* min-width:0 en la tarjeta y en el recuadro: con una dirección larga, sin eso
   el contenido le impone su ancho a la columna (1fr = minmax(auto,1fr)) y la
   tarjeta de Dirección se mete arriba del listado. */
body.is-vendor-user #carrito #shipCardEntrega { min-width: 0; }
body.is-vendor-user #carrito .exp-box {
  min-width: 0;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 3px 4px 3px 8px;
  font-size: 12.5px;
  line-height: 1.25;
}
body.is-vendor-user #carrito .exp-txt {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 5px;
  row-gap: 0;
}
body.is-vendor-user #carrito .exp-dir,
body.is-vendor-user #carrito .exp-pend { flex-basis: 100%; font-size: 11px; }
body.is-vendor-user #carrito .exp-nota { display: none; }
body.is-vendor-user #carrito .exp-btn { padding: 2px 8px; font-size: 11.5px; }

/* =========================================================================
   MODO PRESUPUESTO — cliente de exportación (customers.modo_presupuesto)
   =========================================================================
   La clase la pone `_presupuestoSyncUI()` en <body>. Este bloque NO es lo que
   esconde los precios: en este modo `loadProductsFromDB` directamente no pide
   `list_price`, así que el precio ni siquiera baja al navegador. Lo que hace
   este CSS es sacar de la pantalla los renglones que, sin precio, quedarían
   mostrando "$0" — y los controles de descuento, que acá no existen.
   ------------------------------------------------------------------------- */

/* Precios en la ficha del producto, en la línea Loke y en la vista ampliada */
.is-presupuesto .card-prices,
.is-presupuesto #ppPrices,
.is-presupuesto .vs-price-block,
.is-presupuesto .nc-price-block {
  display: none !important;
}

/* Subtotal de la barra de cantidad, dentro de la ficha */
.is-presupuesto .cartbar-top {
  display: none !important;
}

/* Totales del carrito + método de pago + nota del 2% web */
.is-presupuesto .cart-total,
.is-presupuesto #paymentRow,
.is-presupuesto #webNoteBox {
  display: none !important;
}

/* Las dos últimas columnas de la tabla del carrito son "Tu Precio" y "Total $" */
.is-presupuesto .cart-table th:nth-child(5),
.is-presupuesto .cart-table th:nth-child(6),
.is-presupuesto .cart-table td:nth-child(5),
.is-presupuesto .cart-table td:nth-child(6) {
  display: none !important;
}
/* Las celdas ocultas igual consumen su <col>, así que sin esto la tabla queda
   con 160px de blanco a la derecha. La descripción (col.desc, width:auto) se
   queda con lo que se libera. */
.is-presupuesto .cart-table col.tp,
.is-presupuesto .cart-table col.total {
  width: 0 !important;
}

/* "+ IVA" cuelga siempre de un monto: sin monto no significa nada */
.is-presupuesto .iva-tag,
.is-presupuesto .card-iva,
.is-presupuesto .cart-iva,
.is-presupuesto .nc-iva {
  display: none !important;
}

/* Surtido habitual no incluido: la tarjeta queda, el precio no */
.is-presupuesto .missing-price-label,
.is-presupuesto .missing-price,
.is-presupuesto .missing-price-note {
  display: none !important;
}

/* Ordenar por precio no se puede: sin `list_price` no hay con qué ordenar
   (loadProductsFromDB además cae a "category" si llegara seleccionado) */
.is-presupuesto .sort-dd-option[data-value="price_desc"],
.is-presupuesto .sort-dd-option[data-value="price_asc"],
.is-presupuesto .mf-btn[data-sort="price_desc"],
.is-presupuesto .mf-btn[data-sort="price_asc"],
.is-presupuesto .ds-btn[data-loke-sort="price_desc"],
.is-presupuesto .ds-btn[data-loke-sort="price_asc"],
.is-presupuesto #sortSelect option[value="price_desc"],
.is-presupuesto #sortSelect option[value="price_asc"] {
  display: none !important;
}

/* ============================================================
   LA CAJA DE LA FOTO DEL CATÁLOGO NO PUEDE DEPENDER DE QUE LA IMAGEN
   ESTÉ CARGADA  (24/09/2026)
   ============================================================
   Arriba, en `@media (min-width: 1025px) #productsContainer .product-card img`,
   va `width: auto !important; height: auto !important`: el tamaño de la foto lo
   da la IMAGEN. Mientras no esté cargada, una <img> no tiene tamaño intrínseco
   y la caja colapsa — medido en Chromium: 198px → 54px de un frame al otro. La
   card se desploma, el grid recalcula las filas y salta la página entera.

   Pasaba en cada "agregar al pedido", porque renderProducts() rehace la grilla
   ENTERA y las <img> nacen de nuevo. El arreglo de script.js (`_pcFotosResueltas`)
   evita que la foto vuelva a la carga diferida, pero no alcanza: la <img> es un
   elemento nuevo y el navegador puede tardar un frame en re-adjuntarla aunque
   la tenga en cache. Acá la caja queda definida por CSS y ya no depende de eso.

   `aspect-ratio` + `width` en px (no en %) a propósito: .pc-media es
   `width: fit-content`, así que un ancho porcentual en la foto de atrás sería
   circular. El resultado en pantalla es el mismo que hoy para las fotos
   cuadradas del bucket (400x400): min(ancho disponible, tope) al cuadrado.
   ============================================================ */
@media (min-width: 901px) and (max-width: 1024px) {
  #productsContainer .product-card img {
    width: 220px !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
}
@media (min-width: 1025px) {
  #productsContainer .product-card img {
    width: 250px !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
}

/* ===========================================================================
   AVISO "no pudimos cargar tu perfil"
   ===========================================================================
   Aparece SOLO cuando la consulta a `customers` falló. Antes ese caso era mudo:
   el cliente entraba logueado, veía "—" en todos lados y "Iniciá sesión para ver
   tus pedidos", y no tenía forma de saber que algo se había roto (Chef,
   24/09/2026). Lo pinta `_avisarPerfilCaido()` de script.js. */
.perfil-caido-aviso {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #e0b4b4;
  border-left: 4px solid #c62828;
  border-radius: 6px;
  background: #fdf3f3;
  color: #8a1c1c;
  font-size: 0.92rem;
  line-height: 1.35;
}

/* Entrega: el cliente de exportación no elige sucursal. Lo que manda es un
   presupuesto a cotizar; el despacho lo define administración después. Se
   esconde la tarjeta ENTERA porque el selector, el hint, la línea del expreso
   y el bloque de Retira cuelgan todos de ella.
   ⚠ Desde el 02/10/2026 Observaciones es un botón al lado de "Confirmar
   pedido", así que sin la tarjeta de dirección la fila queda vacía: se
   esconde entera para que no deje un hueco. */
.is-presupuesto #shipCardEntrega {
  display: none !important;
}
.is-presupuesto #carrito .ship-row-split:has(#shippingSelect) {
  display: none !important;
}

/* Vaciar carrito (30/09/2026): debajo de la tabla, alineado a la derecha y
   discreto — es destructivo, no tiene que competir con "Confirmar pedido".
   `vaciarCarrito()` pide confirmación. No se dibuja en modo edición. */
.cart-vaciar-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}
.cart-vaciar-btn {
  border: 1px solid #ddd;
  background: #fff;
  color: #666;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  line-height: 1.2;
}
.cart-vaciar-btn:hover {
  border-color: #c62828;
  color: #c62828;
  background: #fdf3f3;
}

/* ============================================================
   CARRITO (Gastón, 02/10/2026) — tres pedidos juntos.
   Chequeo de los tres: `node tests/checkout-layout.cjs`.
   ============================================================ */

/* 1a. ENCABEZADO FIJO DEL LISTADO. El `th` ya era sticky, pero NO quedaba fijo:
   la regla base `.cart-table { overflow: hidden }` (puesta para redondear las
   esquinas) convierte a la TABLA en el contenedor de scroll del sticky, y la
   tabla no scrollea — scrollea #cart. Medido antes del arreglo: bajando 400 px
   el encabezado se iba 480 px para arriba. En el carrito las esquinas
   redondeadas viven en #cart, así que la tabla no necesita el hidden. */
#carrito .cart-2col .cart-table {
  overflow: visible !important;
}

/* 1b. EL LISTADO LLEGA AL PIE DE LA PANTALLA. Antes tenía tope fijo de 380 px
   (~6 artículos) y con pedidos largos se scrolleaba de a poco. Ahora crece
   hasta el pie de la ventana y recién ahí scrollea adentro, con el encabezado
   fijo.
   ⚠ #carrito lleva `zoom: 1.2` desde 1024 px, y el zoom agranda también el
   100vh: por eso se divide por --cart-zoom. 270 px (en pantalla) es lo que
   hay arriba del listado (barra del sitio + título + Confirmar) más un margen.
   Con dos columnas recién desde 901 px: en celular el listado va apilado y
   queda como estaba. */
#carrito {
  --cart-zoom: 1;
}
@media (min-width: 1024px) {
  #carrito {
    --cart-zoom: 1.2;
  }
}
@media (min-width: 901px) {
  #carrito .cart-2col #cart {
    max-height: max(380px, calc((100vh - 270px) / var(--cart-zoom))) !important;
  }
}

/* 1c. EL LISTADO TERMINA DONDE TERMINA EL SUBTOTAL (Gastón, 02/10/2026,
   v2.3.509). La columna izquierda (Pedir para / Dirección, Método de pago,
   Subtotal) manda el alto de la fila: la derecha no aporta alto
   (`contain: size`) y se estira a esa medida, y el listado la llena y
   scrollea adentro con el encabezado fijo. Piso de 380 px (~6 artículos)
   por si la izquierda queda chica.
   ⚠ Reemplaza al "listado al pie de la pantalla" de la 1b: en 1920×1080 los
   dos terminan casi en el mismo lugar, y en pantallas bajas la izquierda ya
   se pasaba del pie igual.
   ⚠ En modo presupuesto la izquierda queda vacía (sin dirección, pago ni
   totales): ahí sigue mandando la 1b. */
@media (min-width: 901px) {
  body:not(.is-presupuesto) #carrito .cart-2col > .cart-col-right {
    contain: size;
    min-height: 380px;
    max-height: none;
  }
  body:not(.is-presupuesto) #carrito .cart-2col #cart {
    max-height: none !important;
  }
}

/* 1d. EL SUBTOTAL AL ANCHO DE MÉTODO DE PAGO. La tarjeta verde era
   `fit-content` centrada (pensada para la fila de abajo): en la columna
   izquierda ocupa el ancho entero, igual que la tarjeta de pago. */
#carrito .cart-2col .cart-col-left > .cart-total .totals-inner {
  width: 100% !important;
  max-width: none !important;
}

/* 2. "Entrega estimada" no se muestra nunca. El JS ya lo deja `hidden`; esto lo
   sostiene si otro código se lo saca. La fecha se sigue calculando y viaja en
   el pedido. */
#entregaEstimada {
  display: none !important;
}

/* 3. OBSERVACIONES = botón al lado de "Confirmar pedido". El par va en el
   lugar del grid que antes ocupaba Confirmar solo. */
#carrito .section-header .section-center .submit-row {
  grid-area: confirm;
  justify-self: center;
  display: flex;
  align-items: stretch;
  gap: 10px;
}
#carrito .section-header .section-center .submit-row .obs-btn {
  margin: 0;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
  /* Borde rojo y lápiz rojo (Gastón, 02/10/2026): mismo rojo que los íconos de
     "Pedir para" / "Indicar dirección" / "Método de pago". */
  border: 1.5px solid #d00000;
  background: #fff;
  color: #333;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
/* El lápiz: misma técnica que `.ship-label::before` (máscara + degradé rojo),
   así se ve igual que el muñequito y el pin de las tarjetas. */
#carrito .section-header .section-center .submit-row .obs-btn::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #d00000, #ff0000);
  -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='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/></svg>") center / contain no-repeat;
}
#carrito .section-header .section-center .submit-row .obs-btn:hover {
  background: #fdf3f3;
  border-color: #b10000;
}
/* Con texto escrito el botón se marca, para que no quede una observación
   olvidada sin que se vea. */
#carrito .section-header .section-center .submit-row .obs-btn.has-obs {
  border-color: #0a7a2f;
  color: #0a7a2f;
  background: #f1f9f3;
}
#modalObs .obs-modal {
  max-width: 520px;
}
#modalObs .ship-textarea {
  min-height: 120px;
}
@media (max-width: 900px) {
  #carrito .section-header .section-center .submit-row {
    justify-self: stretch;
    width: 100%;
  }
  #carrito .section-header .section-center .submit-row .submit-order {
    flex: 1 1 auto;
  }
  #carrito .section-header .section-center .submit-row .obs-btn {
    flex: 0 0 auto;
  }
}

/* ============================================================================
   REPETIR PEDIDOS — panel del vendedor (Gastón, 02/10/2026)
   Tarjeta del perfil (#vendorRepetirCard) + asistente (#modalRepetir).
   Tabla al ancho del dato, centrada, rótulos cortos y la unidad ($) una vez
   en el encabezado (regla rectora de espacio).
   ========================================================================== */
.vrep-wrap { overflow-x: auto; }
.vrep-tabla {
  width: auto;
  margin: 0 auto;
  border-collapse: collapse;
  font-size: 13px;
}
.vrep-tabla th {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #8a8a8a;
  padding: 4px 6px;
  text-align: center;
  line-height: 1.15;
  border-bottom: 1px solid #ececec;
}
.vrep-tabla td {
  padding: 5px 6px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #f3f3f3;
  line-height: 1.25;
}
.vrep-np { font-size: 10.5px; color: #8a8a8a; }
.vrep-cli { font-weight: 700; color: #1f1f1f; }
.vrep-cod { font-weight: 500; color: #8a8a8a; white-space: nowrap; }
.vrep-suc { font-size: 12px; color: #555; }
.vrep-tot { font-weight: 700; white-space: nowrap; }
.vrep-btn {
  border: 1.5px solid #d00000;
  background: #fff;
  color: #d00000;
  border-radius: 7px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.vrep-btn:hover { background: #fdf3f3; }

#modalRepetir .vrep-modal { max-width: 560px; }
.vrep-orig {
  font-size: 13px;
  color: #444;
  background: #fafafa;
  border: 1px solid #ececec;
  border-radius: 8px;
  padding: 7px 10px;
  margin-bottom: 10px;
  text-align: center;
}
.vrep-paso { margin-bottom: 12px; }
.vrep-k {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #555;
  margin-bottom: 5px;
}
.vrep-sel {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #d4d4d4;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
}
.vrep-pagos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.vrep-pago {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 1px solid #d4d4d4;
  background: #fff;
  border-radius: 8px;
  padding: 6px 4px;
  cursor: pointer;
  font-size: 13px;
}
.vrep-pago-full { grid-column: 1 / -1; }
.vrep-pago-n { font-weight: 700; }
.vrep-pago-d { font-size: 11px; color: #1b7f3a; font-weight: 700; }
.vrep-pago.on { border-color: #16a34a; box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.25); background: #f2fbf5; }
.vrep-nota { font-size: 12px; color: #777; margin-top: 5px; text-align: center; }
.vrep-err { font-size: 13px; color: #b00020; margin: 6px 0; }
.vrep-link { border: none; background: none; color: #d00000; text-decoration: underline; cursor: pointer; padding: 0; }
.vrep-ok { width: 100%; }
.vrep-ok[disabled] { opacity: 0.45; cursor: not-allowed; }