/* ================= RESET ================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family:
    system-ui,
    -apple-system,
    Roboto,
    sans-serif;
}
html,
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden; /* fallback navegadores viejos */
  overflow-x: clip;   /* moderno: evita romper position:sticky en descendientes (categories-sidebar, carrusel novedades) */
}
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-image: linear-gradient(var(--color-brand), #1e5491);
  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;
  font-weight: 600;
}

/* Reset estilo nativo del botón (lo dejamos como link) */
.nav-center button.nav-link {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}

/* 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 {
  filter: brightness(0) invert(1);
}

/* Search — agrandado para acompañar el font-size 18px del nav */
.nav-search {
  height: 44px;
  width: 340px;
  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;
}
.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: 700;
  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;
  display: grid;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  column-gap: 10px !important;
}
.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;
}

/* Badge "NUEVO" para items del menú con features recién lanzadas.
   Posicionado absoluto sobre la esquina del item para no competir por
   espacio horizontal con el texto del label (el menú es angosto y los
   textos largos como "Análisis de tus compras" no entran junto al badge
   si lo dejamos en flow normal). */
.user-menu-item {
  position: relative; /* anclaje para el badge absolute */
}
.user-menu-item .user-menu-new-badge {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  background: #ff0000;
  color: #fff;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 2px 5px;
  border-radius: 4px;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 1px 2px rgba(255, 0, 0, 0.25);
  pointer-events: none; /* no interfiere con el click del botón */
  /* Mini pulse para llamar la atención */
  animation: user-menu-new-pulse 2.4s ease-in-out infinite;
}
@keyframes user-menu-new-pulse {
  0%, 100% { transform: translateY(-50%) scale(1); }
  50%      { transform: translateY(-50%) scale(1.08); }
}
/* Reservar espacio a la derecha del label cuando hay badge para que el
   texto no quede debajo del badge. */
.user-menu-item:has(.user-menu-new-badge) .user-menu-label {
  padding-right: 48px;
}
.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;
}
.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: 700;
  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: 700;
  margin: 24px 0 20px;
  border-bottom: 2px solid #ddd;
  padding-bottom: 10px;
  scroll-margin-top: calc(110px + var(--nc-carousel-h, 0px));
}
/* Layout Productos con sidebar */
.products-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
  padding: 0 90px !important;
  align-items: start;
  margin-bottom: 0;
}

/* Eliminar gap entre el final de los productos y el footer.
   El sidebar de categorías (sticky) puede ser MÁS ALTO que los productos
   visibles del último category-block, lo que genera espacio vacío. Forzamos
   que el grid termine donde termina la grilla de productos (no el sidebar). */
.products-main {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
#productos {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
/* Sidebar sticky: no debe contribuir al alto del grid de products-layout.
   `align-self: start` + altura intrínseca evita que el grid se estire para
   matchear la sidebar cuando hay pocos productos visibles. */
.categories-sidebar {
  align-self: start;
  height: max-content;
}
/* Footer pegado al contenido — sin margin-top extra */
.main-footer {
  margin-top: 0 !important;
}
/* Sidebar categorías */
.categories-sidebar {
  position: sticky;
  /* top = header (86) + alto carrusel novedades (var, 0 si está oculto/sin
     productos NUEVO) + breathing (24). El JS setea --nc-carousel-h con la
     altura real del carrusel cuando se monta. */
  top: calc(86px + var(--nc-carousel-h, 0px) + 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 - var(--nc-carousel-h, 0px) - 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: 700;
  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: 700;
}
.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 */
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 280px));
  grid-auto-rows: 1fr; /* todas las cards de una fila comparten alto → cart card no rompe */
  justify-content: center;
  gap: 25px;
  align-items: stretch;
}
/* 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;
  transform-style: preserve-3d;
  transition:
    transform 250ms ease,
    box-shadow 250ms ease,
    background 320ms ease;
}
.product-card img {
  width: 190px;
  height: 190px;
  object-fit: cover;
  margin: 0 auto 10px;
  display: block;
  max-width: 100%;
  transition: transform 420ms cubic-bezier(0.2, 0.9, 0.2, 1);
  transform-origin: center bottom;
  will-change: transform;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  }
  .product-card:hover img {
    transform: scale(1.06);
  }
}

/* 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-mi-surtido {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 28px;
  height: 28px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.badge-mi-surtido svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
}

.badge-mi-surtido .star-ring {
  fill: #fff9e0;
  stroke: #d4aa00;
  stroke-width: 1.2;
}

.badge-mi-surtido .star-fill {
  fill: #f7cf00;
  stroke: none;
}

.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);
}

.product-info {
  margin: 10px 0;
  line-height: 1.35;
  text-align: center;
}
.product-cod {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
}
.product-name {
  font-size: 17px;
  font-weight: normal;
}
.product-info span {
  font-weight: 700;
}
.price-hidden {
  display: none;
}
.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: 700;
  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: 10000;
}
.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;
}
/* Section label dentro del filters overlay (mobile) — separa visualmente
   Surtido / Ordenar por / Categorías. Spans full width del grid 2 cols. */
.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;
}
.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;
}
.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;
}

/* Botón de traducción a chino mandarín (pill translúcido sobre header oscuro). */
.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 que inyecta Google Translate. */
.skiptranslate { display: none !important; }
body { top: 0 !important; }

/* Escala activa — aviso de contado forzado + separación de la barra de tramos. */
.escala-contado-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1px solid #f59e0b;
  border-radius: 10px;
  padding: 10px 14px;
  margin: 8px 0 4px;
  font-size: 13px;
  color: #92400e;
}
.escala-contado-icon { font-size: 20px; flex-shrink: 0; }
.escala-contado-text { display: flex; flex-direction: column; }
.escala-contado-text strong { font-weight: 700; }
.escala-cp-wrap { margin-top: 12px; }
/* 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;
}
/* Aviso de deuda pendiente (idea 6064) — sólo avisa, no bloquea */
/* ⚠ `display: flex` le gana al `[hidden] { display: none }` del navegador, así
   que sin esta regla `el.hidden = true` NO esconde nada: el aviso quedaba a la
   vista (vacío) aunque renderDeudaAviso lo diera por oculto —también para
   admins y vendedores, que no deben verlo—. LK ya la tenía; acá faltaba. */
.deuda-aviso[hidden] {
  display: none !important;
}
.deuda-aviso {
  width: min(780px, 100%);
  margin: 0 auto 12px;
  padding: 10px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
  color: #991b1b;
  font-size: 13.5px;
  box-sizing: border-box;
  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;
}
/* Selector entrega */
.ship-row {
  padding: 0 40px;
  margin: -18px 0 20px;
  display: flex;
  justify-content: center;
}
.ship-card {
  width: min(780px, 100%);
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 12px 14px;
  display: grid;
  gap: 6px;
}
.ship-label {
  font-size: 12px;
  color: #444;
  font-weight: 700;
}
.ship-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
  outline: none;
}
.ship-select:focus {
  border-color: #111;
}
.ship-hint {
  font-size: 12px;
  color: #666;
}
/* Layout carrito */
.cart-layout {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 40px 10px;
  display: block;
}
/* botonera fija (desktop) */
.pay-card {
  position: fixed;
  left: 10px;
  top: 100px;
  width: 220px;
  z-index: 2500;
  max-height: calc(100vh - 120px);
  overflow: auto;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 12px;
}
.pay-title {
  font-size: 12px;
  color: #444;
  margin-bottom: 10px;
  font-weight: 700;
}
/* 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: 700;
  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: 700;
}
.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 — desc flexible, resto fijo angosto para que la tabla entre
   sin scroll horizontal en cart-col-right (~520px de ancho con zoom 1.2) */
.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 */
}
.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;
  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 (formato LK) */
.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: 120px;
}
/* ================= 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 ================= */
/* 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;
  }
  .products-layout {
    grid-template-columns: 1fr;
    padding: 0 12px !important;
    position: relative;
    z-index: 0;
  }
  .category-title {
    margin: 40px 12px 18px;
    scroll-margin-top: calc(86px + var(--nc-carousel-h, 0px) + 16px);
  }
  /* 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;
  }
}
/* ===== 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;
  }
  /* 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 {
  margin-top: 10px;
  border-top: 1px solid #eee;
  padding-top: 8px;
  display: grid;
  gap: 8px;
  min-width: 0;
}
/* TOP: "Cajas" + Subtotal */
.cartbar-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.cartbar-label {
  font-size: 13px;
  font-weight: 800;
  color: #222;
  white-space: nowrap;
}
.cartbar-subtotal {
  text-align: right;
  white-space: nowrap;
  font-size: 13px;
}
.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 -> Unidades -> Quitar +5 oculto ========================= */
@media (max-width: 1024px) {
  /* Subtotal pasa a la izquierda si hace falta */
  .cartbar-top {
    flex-direction: column;
    align-items: flex-start;
  }
  .cartbar-subtotal {
    text-align: left;
  }
  /* Stepper ocupa todo el ancho */
  .cartbar-left {
    width: 100%;
  }
  .cartbar-stepper {
    width: 100%;
    justify-content: space-between;
  }
  /* Ocultar +5 */
  .chip-5 {
    display: none;
  }
  /* 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 (LK):
     Col izq: CAJAS (top) / stepper+5 (bot) — span 2 filas
     Col der: $precio (top) / Unidades (bot)
     SIN botón Quitar (− en qty=1 ⇒ remove auto). Todo en 1 sola línea horizontal. */
  .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.
     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;
  }
  /* 4) Tamaños “seguros” (siempre entra). Si tu card es angosta, esto evita desborde */
  .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 — ocultado: el botón "−" cuando qty=1 hace remove auto */
  .product-card .card-cartbar > .remove-compact,
  .product-card .card-cartbar > button.remove-compact,
  .product-card .card-cartbar > button.remove-btn.remove-compact {
    display: none !important;
  }
  /* 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 */
  }
}
/* ========================================================= DESKTOP AJUSTE — sin botón Quitar + label "Cajas" ========================================================= */
@media (min-width: 1025px) {
  /* 1️⃣ Ocultar botón Quitar en desktop */
  .product-card .remove-compact,
  .product-card button.remove-compact,
  .product-card button.remove-btn.remove-compact {
    display: none !important;
  }
  /* 2️⃣ Agregar "Cajas" arriba del stepper */
  .product-card .card-cartbar .cartbar-controls {
    position: relative;
    padding-top: 14px;
    /* espacio para el texto arriba */
  }
  .product-card .card-cartbar .cartbar-controls::before {
    content: "Cajas";
    position: absolute;
    top: 0;
    left: 0;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    line-height: 1;
  }
  /* Alinear mejor el stepper ahora que tiene label arriba */
  .product-card .card-cartbar .cartbar-left {
    align-items: center;
  }
}
@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;
  }
}
/* === 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;
  }
}
/* ========================================================= ESPACIADO VERTICAL ENTRE BLOQUES DE TEXTO DE LA CARD Cod/UxB → Descripción → Precio Lista → Tu Precio ========================================================= */
/* Contenedor superior de info */
.product-card .card-top {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* 🔹 espacio general entre renglones */
}
/* Fila Cod + UxB */
.product-card .card-row {
  margin-bottom: 2px;
}
/* Descripción — siempre reserva el alto de 2 líneas para que el precio y
   el botón queden en la misma posición vertical en TODAS las cards,
   independientemente de si la descripción ocupa 1 o 2 líneas. */
.product-card .card-desc {
  margin: 4px 0;
  line-height: 1.25;
  min-height: calc(1.25em * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Bloque de precios */
.product-card .card-prices {
  margin-top: 4px;
  margin-bottom: 18px; /* aire generoso entre precios y botón "Agregar al pedido" */
  gap: 4px;
  /* espacio entre Precio Lista y Tu Precio */
}
/* Cada línea de precio */
.product-card .card-price-line {
  margin: 2px 0;
}
/* "+ IVA" tag — chico y gris al lado del precio (no en bold) */
.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;
  }
}

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

/* 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;
  min-height: 60px;
}

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

/* (regla de scroll del carrito vive en la sección cart-2col más abajo,
   junto al resto del layout de 2 columnas — ver "#carrito .cart-2col #cart") */

/* =========================================================
   MICRO-ANIMACIONES — empty states + delight (porteado de LK)
   La carita SVG en cart vacío / empty states hace un wiggle sutil
   periódico para llamar la atención sin ser molesto. El texto fade-in.
   El botón "Ver productos" tiene un pulse sutil con la marca chef.
   ========================================================= */
@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 botón "Ver productos" en cart vacío — uses chef navy */
@keyframes lk-pulse-soft {
  0%, 100% { box-shadow: 0 4px 14px rgba(11, 49, 93, 0.18); }
  50%      { box-shadow: 0 4px 22px rgba(11, 49, 93, 0.32); }
}
.cart-empty-btn {
  animation: lk-pulse-soft 2.4s ease-in-out infinite;
}

/* Respeto a prefers-reduced-motion: desactivar wiggle/pulse */
@media (prefers-reduced-motion: reduce) {
  .cart-empty-face,
  .empty-state-mini-face,
  .cart-empty-text-wrap,
  .empty-state-mini-text,
  .cart-empty-btn {
    animation: none !important;
  }
}

/* =========================================================
   FILTROS OVERLAY MOBILE — bottom-sheet polish (porteado de LK)
   Slide-up animado desde abajo, drag-handle visual, botones
   touch-friendly. Adaptado al brand navy chef (#0b315d).
   ========================================================= */
@keyframes filtersBackdropIn {
  from { background: rgba(0, 0, 0, 0); }
  to   { background: rgba(0, 0, 0, 0.45); }
}
@keyframes filtersPanelIn {
  from {
    transform: translateY(100%);
    opacity: 0.7;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes modalSlideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (max-width: 900px) {
  .filters-overlay.open {
    animation: filtersBackdropIn 0.25s ease-out;
  }
  .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;
  }
  .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);
  }
  .filters-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 4px 0 16px !important;
  }
  /* Botones touch-friendly con estado más visible — brand navy chef */
  .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, var(--color-brand, #0b315d) 0%, #1b4c85 100%) !important;
    border-color: var(--color-brand, #0b315d) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(11, 49, 93, 0.25);
  }
  .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 con verde de "success" para confirmar */
  .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:active {
    transform: scale(0.97);
  }
}

@media (max-width: 600px) {
  /* Modal slide-up en mobile small (genérico para modales del sitio) */
  .modal-content,
  .vendor-modal-card,
  .draft-modal-card {
    animation: modalSlideUp 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

/* =========================================================
   VENDOR FLOW — csFlashAttention (porteado de LK)
   Cuando un vendedor intenta agregar al carrito sin haber elegido
   cliente, el banner "Pedir para" hace un flash rojo de atención.
   Es un warning de UX — el rojo se preserva (no se navy-ifica) porque
   es color de alerta, no de marca.
   ========================================================= */
@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);
  }
}
.customer-selector-banner.cs-flash-attention {
  animation: csFlashAttention 1.4s ease-out;
}

/* =========================================================
   NOVEDADES CAROUSEL — collapse animation + pill entrance
   (porteado de LK)
   Cuando el usuario oculta el carrusel de Novedades, anima
   opacity/transform/margins suavemente. El botón "Mostrar novedades"
   aparece después con un pop con bounce (cubic-bezier > 1).
   ========================================================= */
.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;
}
@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.nc-pill-in {
  animation: nc-pill-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* =========================================================
   RESPONSIVE FLUID SCALING (porteado de LK)
   Hasta ahora chef tenía gaps de layout entre 900px y 1600px
   y nada para 4K. Estos breakpoints + clamp() hacen que el layout
   escale de manera proporcional hasta 4K sin estirarse al infinito.
   ========================================================= */

/* 1) Cap de ancho máximo en pantallas 4K/ultrawide para que el
      contenido no se siga estirando. Centrado. */
@media (min-width: 1600px) {
  .products-layout,
  .section-title-row,
  .main-footer .container,
  #carrito .section-header,
  #perfil .section-header {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 2) Padding lateral fluido: 20px en chicas → 90px en grandes */
@media (min-width: 901px) {
  .section-title-row,
  .products-layout {
    padding: 0 clamp(20px, 5vw, 90px) !important;
  }
}

/* 3) Grid de productos auto-responsive: cant de columnas calculadas
      por el viewport. minmax(220px, 1fr) = card mínima 220px.
      → 1366px ≈ 5 cols, 1920px ≈ 7 cols, 2560px ≈ 9 cols. */
@media (min-width: 901px) {
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: clamp(14px, 1.6vw, 25px);
  }
}

/* 4) Tipografía fluida en títulos principales */
@media (min-width: 901px) {
  .section-title {
    font-size: clamp(22px, 2.2vw, 32px);
  }
  .category-title {
    font-size: clamp(28px, 3vw, 44px);
  }
}

/* 5) Imágenes de cards: cubren la card de manera responsiva en vez de
      tener tamaño fijo (que en cards grandes dejaba huecos blancos). */
@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) */
@media (min-width: 901px) {
  .products-layout {
    grid-template-columns: clamp(180px, 14vw, 240px) 1fr;
  }
}

/* 7) Breakpoints intermedios — llenan gaps entre mobile (≤900) y 4K */
@media (max-width: 360px) {
  /* Mobile S (ultra chico): 1 col */
  .products-grid {
    grid-template-columns: 1fr !important;
  }
  .product-card img {
    max-width: 200px;
  }
}

@media (max-width: 1199px) and (min-width: 901px) {
  /* Notebook (901-1199): 3 cols, padding 40px */
  .products-grid {
    grid-template-columns: repeat(3, minmax(0, 280px)) !important;
  }
  .products-layout,
  .section-title-row {
    padding: 0 40px !important;
  }
}

@media (max-width: 1440px) and (min-width: 1200px) {
  /* Mid desktop (1200-1440): 4 cols capeadas a 280px, padding 50px, gap 20px */
  .products-grid {
    grid-template-columns: repeat(4, minmax(0, 280px)) !important;
    gap: 20px !important;
  }
  .products-layout,
  .section-title-row {
    padding: 0 50px !important;
  }
  .product-card img {
    width: 100%;
    max-width: 200px;
    height: auto;
    aspect-ratio: 1/1;
  }
}

/* =========================================================
   SORT DROPDOWN ("Filtrar por…") — porteado de LK
   Reemplaza los 4 botones de sort (Categorías / Más vendidos /
   Mayor precio / Menor precio) por un único dropdown custom que
   evita el flicker del select nativo en Chrome+Windows dark mode.
   ========================================================= */
.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;
  font-family: inherit;
}
.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 {
  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;
  font-family: inherit;
}
.sort-dd-option:hover {
  background: #f5f5f5;
}
.sort-dd-option[data-selected="true"] {
  background: #111;
  color: #fff;
}

/* ===============================
   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;
}
.submit-order.is-loading {
  opacity: 0.7;
  cursor: wait;
}

/* ================= PANTALLA PEDIDO CONFIRMADO =================
   Card centrado con halo pulse detrás del check, confetti dots
   decorativos, jerarquía tipográfica clara. Background con gradient
   sutil verde para reforzar la sensación de éxito. */
.success-page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 70vh;
  padding: 24px 20px 60px;
  text-align: center;
  background:
    radial-gradient(900px 500px at 50% -10%, #e7f6ec 0%, transparent 60%),
    radial-gradient(700px 400px at 95% 110%, #e8f0ff 0%, transparent 55%);
}

/* Topbar (back button como pill blanco rounded, igual estilo que back-btn
   del historial / sugerencias / resto del sitio) */
.success-topbar {
  width: 100%;
  max-width: 720px;
  text-align: left;
  margin-bottom: 8px;
}
.success-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #374151;
  font-size: 13px;
  cursor: pointer;
  padding: 9px 16px;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
}
.success-back-link:hover {
  background: var(--color-brand);
  color: #fff;
  border-color: var(--color-brand);
  transform: translateX(-2px);
  box-shadow: 0 4px 12px rgba(11, 49, 93, 0.15);
}

/* Card central blanca con sombra */
.success-card {
  position: relative;
  background: #fff;
  border-radius: 24px;
  padding: 48px 56px 40px;
  max-width: 560px;
  width: 100%;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 12px 40px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  animation: success-card-in 0.5s ease-out both;
}
@keyframes success-card-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Decoración: pequeños puntos de confetti alrededor del check.
   Animados con un fade-in retrasado para que aparezcan después del check. */
.success-confetti {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: success-confetti-pop 0.5s ease-out forwards;
}
.success-confetti-1 { top: 56px;  left: 24%;  width: 8px;  height: 8px; background: #2e8b57; animation-delay: 0.9s; }
.success-confetti-2 { top: 88px;  left: 76%;  width: 6px;  height: 6px; background: #f59e0b; animation-delay: 1.0s; }
.success-confetti-3 { top: 28px;  left: 50%;  width: 5px;  height: 5px; background: #0b315d; animation-delay: 1.1s; }
.success-confetti-4 { top: 140px; left: 16%;  width: 7px;  height: 7px; background: #f97316; animation-delay: 1.0s; }
.success-confetti-5 { top: 160px; left: 84%;  width: 6px;  height: 6px; background: #2e8b57; animation-delay: 1.15s; }
.success-confetti-6 { top: 200px; left: 60%;  width: 5px;  height: 5px; background: #f59e0b; animation-delay: 1.05s; }
@keyframes success-confetti-pop {
  0%   { opacity: 0; transform: translateY(-8px) scale(0); }
  60%  { opacity: 1; transform: translateY(4px)  scale(1.3); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Wrapper del check + halo pulse */
.success-check-wrap {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.success-halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46, 139, 87, 0.18) 0%, rgba(46, 139, 87, 0) 70%);
  animation: success-halo-pulse 2.5s ease-in-out infinite;
}
@keyframes success-halo-pulse {
  0%, 100% { transform: scale(0.85); opacity: 0.6; }
  50%      { transform: scale(1.1);  opacity: 1; }
}
.success-animation {
  position: relative;
  z-index: 1;
  width: 140px;
  margin: 0;
}

/* Animación checkmark SVG (sin cambios funcionales, sólo sizing) */
.success-checkmark {
  width: 140px;
  height: 140px;
}
.success-checkmark__circle {
  stroke-dasharray: 380;
  stroke-dashoffset: 380;
  animation: success-circle 0.6s ease-out forwards;
}
.success-checkmark__check {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: success-check 0.4s 0.4s ease-out forwards;
}
@keyframes success-circle {
  to { stroke-dashoffset: 0; }
}
@keyframes success-check {
  to { stroke-dashoffset: 0; }
}

/* Bloque de texto (kicker + título inyectado por JS). El subtítulo fue
   eliminado por pedido del cliente — el kicker "¡Gracias por tu compra!"
   alcanza como mensaje. */
.success-text {
  margin-bottom: 32px;
  text-align: center;
  animation: success-fade 0.5s 0.7s ease-out both;
}
.success-kicker {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #2e8b57;
  margin: 10px 0 0;
  text-align: center;
}
/* Título "Pedido Confirmado" — vive directo en .success-text (no en el
   wrapper del check) para centrarse sobre el ancho completo del card. */
.success-title {
  display: block;
  text-align: center;
  font-size: 32px;
  font-weight: 800;
  color: #111;
  margin: 0;
  letter-spacing: -0.5px;
  line-height: 1.1;
  width: 100%;
  animation: none;
}
@keyframes success-fade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Botón descargar + nota */
.success-download-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: success-fade 0.5s 0.9s ease-out both;
}
.success-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 32px;
  border-radius: 999px;
  border: none;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.2px;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.success-btn.primary {
  background: var(--color-brand);
  color: #fff;
  box-shadow: 0 4px 14px rgba(11, 49, 93, 0.25);
}
.success-btn.primary:hover {
  background: #1e5491;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(11, 49, 93, 0.32);
}
.success-btn.primary:active {
  transform: translateY(0);
}
.success-pdf-note {
  font-size: 13px;
  color: #6b7280;
}
.success-pdf-note strong {
  color: #111;
  font-weight: 700;
}

/* ----- Responsive ----- */
@media (max-width: 600px) {
  .success-page {
    padding: 16px 12px 40px;
    min-height: calc(100vh - 200px);
  }
  .success-card {
    padding: 36px 24px 32px;
    border-radius: 18px;
  }
  .success-check-wrap {
    width: 140px;
    height: 140px;
    margin-bottom: 16px;
  }
  .success-animation,
  .success-checkmark {
    width: 110px;
    height: 110px;
  }
  .success-title { font-size: 26px; }
  .success-subtitle { font-size: 14px; }
  .success-btn { height: 44px; padding: 0 24px; font-size: 14px; }
  /* Reducir confetti en mobile (más simple, menos clutter) */
  .success-confetti-3,
  .success-confetti-6 { display: none; }
}

/* ================= VENDOR: CUSTOMER SELECTOR =================
   Pill con bloque izq oscuro (label + icono) y dropdown custom a la derecha.
   NO usar overflow:hidden en el banner: clipea el popup del dropdown que
   aparece debajo. En su lugar, redondear los corners en los hijos. */
.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;
  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);
}

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

/* Acento brand-dark 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: var(--color-brand-dark, #0b1220);
}

.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 var(--color-brand, #0b315d);
  outline-offset: -2px;
}

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

.cs-trigger-arrow {
  flex: 0 0 auto;
  color: var(--color-brand, #0b315d);
  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);
}

/* 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: 1000;
  padding: 6px;
  max-height: 320px;
  overflow-y: auto;
  min-width: 100%;
  width: max-content;
  max-width: min(420px, 90vw);
}

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

.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: rgba(11, 49, 93, 0.08);
  color: var(--color-brand, #0b315d);
  font-weight: 800;
}

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

/* Estado vacío del popup (ej. cuando no hay sucursales cargadas todavía) */
.cs-option-empty {
  display: block;
  text-align: center;
  padding: 12px;
  font-size: 13px;
  color: #999;
  font-style: italic;
  cursor: default;
  user-select: none;
}

/* --- Variante banner (dentro de customer-selector-banner) --- */
.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;
}

/* Permitir que .sort-row haga wrap cuando el banner + botones no entran */
#productos .sort-row {
  flex-wrap: wrap;
  row-gap: 10px;
}

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

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

/* Overlay filtros: z-index alto para tapar el nav */

/* =========================
   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;
  grid-template-columns: 1fr 1fr auto;
  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;
}

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

.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)
   ========================= */

#categoriesMenu.dropdown-menu {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  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;
  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: definido arriba en NAV CATEGORÍAS */

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

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

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

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

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

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

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

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

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

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

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

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

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

#categoriesMenu {
  display: none;
}

#categoriesMenu.open {
  display: block;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.user-toggle-text {
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Botón filtro NUEVOS (desktop) */
.ds-btn.ds-filter {
  margin-left: 10px;
  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;
}

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

html,
body {
  overflow-anchor: none;
}

#productos,
.products-layout,
.products-main,
#productsContainer,
.categories-sidebar,
#categoriesSidebar,
#categoriesSidebarList {
  overflow-anchor: 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;
  }
}

@media (min-width: 1024px) {
  #carrito,
  #perfil {
    --cart-scale: 1.2;
    font-size: calc(1rem * var(--cart-scale));
    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-image: linear-gradient(var(--color-brand), #1e5491);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  padding: 50px 0;
  position: relative;
}

/* 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 superior — gradiente azul Chef (degradé al negro a la derecha) */
#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, #0b315d 0%, #1b4c85 50%, #1a1a1a 100%) !important;
}

/* Razón social — centrada, con underline azul abajo */
#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;
}

/* Underline azul Chef bajo la razón social */
#perfil .profile-ra::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  width: 56px !important;
  height: 3px !important;
  background: #0b315d !important;
  border-radius: 2px !important;
  transform: translateX(-50%) !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: definido arriba en línea ~655 */

.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;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    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 10px;
    height: 44px;
    min-width: 0;
  }

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

  .mpb-actions {
    display: grid;
    grid-template-columns: 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;
  }

  .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: definido arriba en línea ~655 */

.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) — formato LK
   Botón flotando absoluto a la izquierda, título centrado
   ========================= */

.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 */
.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" — rojo lleno destacado
   (en lugar del negro normal) para que el vendor entienda que es otra
   acción (scroll al dropdown), no agregar al carrito */
.add-btn.add-vendor-browse {
  background: #d00000;
  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) ===== */
.mobile-products-bar{ display:none; }

@media (max-width: 900px){
  .mobile-products-bar{
    display:grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 8px 10px;
    padding: 8px 12px;
    background:#fff;
    position: static;
    z-index: auto;
    border-bottom: 1px solid #eee;
  }

  /* Buscador a la izquierda y ocupa 2 filas */
  .mpb-search{
    grid-column: 1 / 2;
    grid-row: 1 / 3;              /* ✅ ocupa las dos filas */
    position: relative;
    display:flex;
    align-items:center;
    gap:8px;
    padding: 10px 12px;
    border: 1px solid #e7e7e7;
    border-radius: 12px;
    background: #fafafa;
  }

  .mpb-input{
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
  }

  /* A la derecha: filtros arriba, ordenar abajo */
  .mpb-actions{
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    display:grid;
    grid-template-rows: auto auto;
    gap: 8px;
    align-content:start;
  }

  /* botón filtros */
  #openFiltersBtn.mpb-btn{
    width: 120px;
    justify-content:center;
    display:flex;
    align-items:center;
    gap:8px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #e7e7e7;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    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;
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
  box-sizing: border-box;
}

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

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

/* cuando el botón está activo */
.ds-assortment.on .assortment-btn-icon svg{
  fill: #fff;
  stroke: #fff;
}

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

/* hover */
.ds-assortment:hover{
  background: #fff8d6 !important;
  border-color: #ffd700 !important;
  color: #5b4a00;
}
.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;
}

/* Sucursales grid (perfil) */
.addresses-grid {
  display: grid;
  gap: 8px;
}

.address-item {
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 10px;
}

/* Mensajes vacíos / sin resultados */
.empty-message {
  padding: 24px 40px;
  color: #666;
  font-size: 14px;
}

.cart-empty {
  padding: 14px;
  text-align: center;
  color: #666;
}

/* ================= UPSELL POPUP ================= */
.upsell-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: upsellFadeIn .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,.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 .15s, color .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: .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 .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 .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 .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 .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; }
}

/* Subcategoría título dentro de grilla de productos */
.subcategory-title {
  font-size: 26px;
  font-weight: 700;
  margin: 24px 0 16px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 8px;
}

/* ================= SHIP CONFIRM (1 sucursal) ================= */
.ship-card.has-confirm {
  display: grid !important;
  /* dropdown ocupa todo el espacio sobrante; el botón "Confirmar" usa el
     ancho de su contenido. minmax(0, 1fr) permite que el dropdown se achique
     si hace falta sin desbordar la card. */
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto auto !important;
  gap: 6px 20px !important; /* row-gap 6px, column-gap 20px */
  column-gap: 20px !important;
}

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

.ship-card.has-confirm .ship-select,
.ship-card.has-confirm .cs-dropdown-ship {
  grid-column: 1;
  width: 100%;
  min-width: 0;
}

.ship-card.has-confirm .ship-confirm-btn {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  margin-left: 8px; /* aire extra encima del column-gap */
}

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

.ship-confirm-btn {
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid #111;
  background: #111;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  height: 100%;
}

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

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

/* ---- TRACKING STATUS (Estado de Pedidos - lado cliente) ---- */
.tracking-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  flex-wrap: wrap;
}
.tracking-row:last-child { border-bottom: none; }

.tracking-np {
  font-size: 14px;
  font-weight: 700;
  color: #555;
  min-width: 80px;
}

.tracking-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.tracking-badge.a-programar {
  background: #e8e8e8;
  color: #666;
}
.tracking-badge.programado {
  background: #fff3cd;
  color: #856404;
}
.tracking-badge.enviado {
  background: #d4edda;
  color: #155724;
}
.tracking-badge.retirado {
  background: #d4edda;
  color: #155724;
}

.tracking-fecha {
  font-size: 13px;
  color: #888;
  margin-left: auto;
}

.tracking-ver-mas {
  display: block;
  width: 100%;
  padding: 10px;
  margin-top: 4px;
  background: none;
  border: 1px dashed #ccc;
  border-radius: 8px;
  color: #555;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.tracking-ver-mas:hover {
  background: #f5f5f5;
  color: #222;
}

@media (max-width: 600px) {
  .tracking-row { gap: 8px; }
  .tracking-fecha { margin-left: 0; width: 100%; font-size: 12px; }
}

/* Stepper compacto dentro de la fila del carrito */
.cart-step {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  justify-content: center;
}
.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;
}

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

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

/* =========================
   ORDER STEPPER (Historial pedidos web)
   ========================= */
.order-tracking {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px dashed #ececec;
  flex-wrap: wrap;
  font-size: 14px;
}
.o-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.o-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e5e5e5;
  border: 2px solid #cfcfcf;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.o-dot.done {
  background: #111;
  border-color: #111;
}
.o-dot.current {
  transform: scale(1.25);
  box-shadow: 0 0 0 4px rgba(17, 17, 17, 0.08);
}
.o-line {
  width: 28px;
  height: 2px;
  background: #e5e5e5;
  flex-shrink: 0;
}
.o-line.done {
  background: #111;
}
.o-stage-label {
  font-weight: 600;
  color: #111;
}
.o-stage-0 { color: #888; }
.o-stage-1 { color: #b07d00; }
.o-stage-2 { color: #2e7d32; }
.o-stage-3 { color: #1b5e20; }   /* Entregado (idea 8743): 4 etapas desde v2.0.31 */
.o-stage-sub {
  color: #666;
  font-size: 13px;
}
@media (max-width: 768px) {
  .o-line { width: 18px; }
  .order-tracking { font-size: 13px; gap: 8px; }
}

/* =========================
   MENU NOTIF BADGE
   ========================= */
.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;
}
.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;
}

.notif-timeline {
  display: flex;
  flex-direction: column;
}

.notif-thead,
.notif-row {
  display: grid;
  /* Columnas más compactas: spine, cliente (flex), pedido, ver detalle,
     estado, sugerir. Cabe en perfil col-right con zoom 1.2 sin cortar. */
  grid-template-columns: 24px minmax(120px, 1.4fr) 48px 92px 110px 110px;
  gap: 8px;
  align-items: center;
}

.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: 13px;
  white-space: nowrap;
}

.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-label.o-stage-3 { color: #1b5e20; }

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

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

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

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

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

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

/* =========================
   MISSING ASSORTMENT MODULE
   ========================= */
.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;
}

.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);
  /* Cap a ~2 filas + scroll vertical interno — match con LK */
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  padding-bottom: 4px;
}
/* Responsive: en pantallas medianas baja a 2 cols, mobile a 1 */
@media (max-width: 1100px) {
  .missing-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .missing-cards {
    grid-template-columns: 1fr;
  }
}

/* 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;
  align-items: stretch;
  gap: 10px;
  min-height: var(--missing-row-h);
  background: #fafafb;
  border: 1px solid #ececef;
  border-radius: 10px;
  padding: 10px;
  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: 60px;
  height: 60px;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  flex-shrink: 0;
  border: 1px solid #f0f0f0;
}

.missing-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding-right: 4px;
}

.missing-desc {
  font-size: 13px;
  font-weight: 700;
  color: #111;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.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;
  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 "Tu precio contado:" para entrar en 3 cols */
}

.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: 7px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  align-self: flex-start;
}

.missing-step-btn {
  width: 28px;
  height: 28px;
  border: 1px solid #d4d4d8;
  background: #fff;
  font-size: 14px;
  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: 7px 0 0 7px;
}

.missing-step-btn:last-child {
  border-radius: 0 7px 7px 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: 30px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #111;
  border-top: 1px solid #d4d4d8;
  border-bottom: 1px solid #d4d4d8;
  background: #fff;
  padding: 0 5px;
  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-price-note {
    font-size: 10px;
  }
}

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

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

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

/* ================= LAPTOP LAYOUT (901-1280) ================= */
@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);
  }
}

@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 {
    grid-template-columns: repeat(3, 1fr);
    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;
  }
  /* 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 20px;
  }
  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 290px));
    justify-content: start;
    gap: 16px;
  }
}

/* =========================================
   PERFIL — DATA GRID (formato LK)
   Grid auto-fit que reemplaza el .profile-row.two
   ========================================= */
#perfil .profile-row.data-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 12px !important;
  font-size: 14px !important;
  margin: 22px 0 0 !important;
  padding: 0 !important;
}

#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"] {
  display: none !important;
}

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

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

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

/* Mobile: una sola columna */
@media (max-width: 720px) {
  #perfil .profile-row.data-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* =========================================
   PERFIL — DETALLES ESTÉTICOS (formato LK)
   - profile-btn[hidden] utility
   - profile-pass-wrap centrado + botón outline
   - is-vendor-profile (gradient dorado + underline dorado)
   ========================================= */

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

/* Wrapper del botón Modificar Contraseña: centrado, sin separador */
#perfil .profile-pass-wrap {
  display: flex !important;
  justify-content: center !important;
  margin-top: 22px !important;
}

/* Botón Modificar Contraseña — outline (fondo blanco, borde negro) */
#perfil .profile-pass-wrap .profile-btn {
  background: #fff !important;
  color: #111 !important;
  border: 1.5px solid #111 !important;
  padding: 9px 22px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

#perfil .profile-pass-wrap .profile-btn:hover {
  background: #111 !important;
  color: #fff !important;
}

/* Vendor profile: gradient dorado en el header + underline dorado del nombre */
#perfil .profile-summary.is-vendor-profile::before {
  background: linear-gradient(90deg, #c79100 0%, #e6a800 40%, #5b4a00 100%) !important;
}

#perfil .profile-summary.is-vendor-profile .profile-ra::after {
  background: #c79100 !important;
}

/* =========================
   MODAL GUARDAR PEDIDO SIN ENVIAR (formato LK)
   - Botones lado a lado (Cancelar + Confirmar)
   - Info box amarillo con ícono ⓘ
   ========================= */
.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%;
  }
}

/* Info box amarillo "¿Dónde vas a encontrar tus pedidos guardados?" */
.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;
}

/* ================= ✨ NOVEDADES CARRUSEL =================
   Sticky abajo del header fijo. La sidebar de categorías se posiciona
   automáticamente debajo via la variable --nc-carousel-h (la setea el JS
   con la altura real del carrusel). */
.new-carousel {
  margin: 0 auto 22px;
  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);
  position: sticky;
  top: 86px;
  z-index: 100;
  /* Sin transiciones al abrir/cerrar — el hide/show es instantáneo */
}

/* 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 cuando está stuck → separa visualmente */
.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;
}

.new-carousel-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 6px;
  position: relative;
}

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

.nc-show-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin: 0 auto 14px;
  padding: 6px 14px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #111;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: background 0.15s ease, border-color 0.15s ease,
    transform 0.12s ease, box-shadow 0.15s ease;
  position: sticky;
  top: 92px;
  z-index: 99;
}

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

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

.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%
  );
}

.new-carousel-track {
  display: flex;
  gap: 14px;
  width: max-content;
  padding: 4px;
  will-change: transform;
}

/* ===== Modo estático =====
   Cuando hay pocos productos únicos (no llenan el viewport con uno solo),
   evitamos el marquee — duplicar mostraría las copias dentro del viewport
   y parecería que "los productos se cargan otra vez en la mitad".
   Centramos las cards, ocultamos flechas y desactivamos el fade lateral. */
.new-carousel.nc-static .ncn-btn {
  display: none !important;
}

.new-carousel.nc-static .new-carousel-viewport {
  /* Sin mask (no hay loop que disimular) y con scroll horizontal por si en
     mobile las cards no entran de un saque. */
  -webkit-mask-image: none;
  mask-image: none;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.new-carousel.nc-static .new-carousel-viewport::-webkit-scrollbar {
  height: 4px;
}

.new-carousel.nc-static .new-carousel-viewport::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 4px;
}

.new-carousel.nc-static .new-carousel-track {
  transform: none !important; /* anula la translación residual del rAF */
  transition: none !important;
  justify-content: center; /* centra cuando entran todas; ignorado si overflow */
  min-width: 100%; /* permite que justify-content: center funcione */
}

.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;
  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);
  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;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -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-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;
  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;
}

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

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

@media (max-width: 900px) {
  /* Un solo wrapper sticky contiene carrusel + barra */
  .mobile-sticky-group {
    position: sticky;
    top: 86px;
    z-index: 100;
    background: #fff;
  }
  .new-carousel {
    margin: 0 12px 0;
    padding: 8px 10px 10px;
    max-width: none;
    width: auto;
    position: static;
    z-index: 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;
  }
}

/* =========================================================
   CARRITO — POLISH ESTÉTICO (scoped a #carrito)
   ---------------------------------------------------------
   - Usa los tokens de css/tokens.css: --color-brand (#0b315d),
     --shadow-sm/md, --radius-*, etc.
   - Sólo sobreescribe estilos dentro de #carrito; no toca otras secciones.
   ========================================================= */

/* HEADER: título centrado, back-btn flotando absoluto a la izquierda.
   Reset explícito de las reglas viejas que ponían position:absolute con
   translateY y rompían el layout cuando se les cambiaba el padding. */
#carrito .section-header {
  position: relative;
  padding: 28px 40px 18px;
  margin: 0 0 8px;
  margin-bottom: 8px !important; /* pisa la regla en línea 3056 */
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center !important;
  gap: 0;
  min-height: 0;
}

#carrito .section-header .back-btn,
#carrito .back-btn {
  position: absolute !important;
  left: 40px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  grid-column: auto !important;
  justify-self: auto !important;

  background: #fff;
  border: 1px solid var(--color-border);
  color: var(--color-text-soft);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease;
  white-space: nowrap;
  flex: 0 0 auto;
}

#carrito .section-header .back-btn:hover,
#carrito .back-btn:hover {
  background: var(--color-bg-soft);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-xs);
  /* mantiene el translateY(-50%) y agrega un nudge horizontal */
  transform: translate(-2px, -50%) !important;
}

#carrito .section-header .section-title,
#carrito .section-title {
  margin: 0 !important;            /* pisa el margin-top:34px viejo (línea 764) */
  font-size: 26px !important;      /* pisa font-size: 25px / 16px / 32px viejos */
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--color-text);
  text-align: center !important;
  justify-self: center !important;
  /* No usa flex: 1 ni width: 100% para que se centre como inline en el flex */
  min-width: 0;
}

#carrito .section-title #pedidoTotalHeader {
  color: var(--color-brand);
}

#carrito .iva-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.5px;
  vertical-align: middle;
  margin-left: 4px;
  text-transform: uppercase;
}

/* CARDS (ship/pay) — look uniforme con stripe lateral.
   position: relative !important pisa el `position: static !important` viejo
   en #carrito .pay-card (línea 2467); sin esto, el ::before se posiciona
   respecto al body y el stripe queda flotando fuera de la card. */
#carrito .ship-card,
#carrito .pay-card {
  position: relative !important;
  background: #fff;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  /* NO overflow:hidden porque el .pay-card lo tiene en visible !important
     (para que la dropdown del customer-selector no quede clipeada). El
     stripe usa border-radius matchado al card para curvarse en las puntas. */
}

/* Las ship-rows con dropdown custom necesitan z-index alto para que su
   popup no quede tapado por las ship-rows siguientes — todas las ship-rows
   tienen z-index: 1 (línea 2897, "nunca tapan el nav"), creando stacking
   contexts separados. La de abajo en DOM siempre renderiza encima. */
#carrito #customerSelectorCart,
#carrito .ship-row:has(#shippingSelect) {
  z-index: 50 !important;
}

/* Cuando hay un popup abierto, subimos a un z-index todavía más alto via
   :has() (Chrome 105+, FF 121+). Fallback: el z-index:50 base ya alcanza
   para tapar las siguientes ship-rows (que están en z-index:1). */
#carrito #customerSelectorCart:has(.cs-popup:not([hidden])),
#carrito .ship-row:has(.cs-popup:not([hidden])) {
  z-index: 500 !important;
}

#carrito .ship-card:hover,
#carrito .pay-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}

/* Stripe vertical brand a la izquierda — inset un poco arriba/abajo para
   no chocar con el border-radius de la card (3px de ancho contra 14px de
   radio se vería deformado en las puntas). */
#carrito .ship-card::before,
#carrito .pay-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  background: linear-gradient(180deg, var(--color-brand) 0%, var(--color-brand-hover) 100%);
  opacity: 0.7;
  border-radius: 0 2px 2px 0;
}

/* LABEL: uppercase + letterspacing para look de checkout premium */
#carrito .ship-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

/* SHIP-SELECT: matchea exactamente .cs-dropdown-card .cs-trigger
   (línea 2846 — el dropdown custom variante card del customer-selector).
   Valores idénticos: padding 10px 12px, border 1px solid #ddd, radius 10px,
   font-weight 600, font-size 14px, color #111, line-height 1.2.
   El padding-right se extiende a 36px para hacerle lugar al caret rojo. */
#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;

  /* Caret brand custom (▾) idéntico al .cs-trigger-arrow */
  -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='%230b315d' d='M6 8 0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px 8px;
}

/* El input de texto no necesita el caret */
#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-visible,
#carrito #clienteNuevoInput:focus-visible {
  outline: 2px solid #ff0000;
  outline-offset: -2px;
}

#carrito .ship-select:focus,
#carrito #clienteNuevoInput:focus {
  border-color: #111 !important;
}

/* Las opciones del popup nativo: estilizadas hasta donde permite el browser
   (Chrome/Edge/Firefox respetan estos colores; Safari mantiene el OS popup). */
#carrito .ship-select option {
  background: #fff;
  color: #111;
  font-weight: 600;
  padding: 9px 12px;
}

#carrito .ship-select option:checked,
#carrito .ship-select option:hover {
  background: rgba(11, 49, 93, 0.08);
  color: var(--color-brand, #0b315d);
  font-weight: 800;
}

#carrito .ship-hint {
  font-size: 12px;
  color: var(--color-text-subtle);
  margin-top: 2px;
  line-height: 1.4;
}

/* PAGO: título con icono */
#carrito .pay-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--color-text-muted);
  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, var(--color-brand), var(--color-brand-hover));
  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 var(--color-border);
  border-radius: var(--radius-md);
  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: var(--color-text-muted);
  background: var(--color-bg-subtle);
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
}

#carrito .pay-btn .pay-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.1;
}

#carrito .pay-btn .pay-off {
  font-size: 10px;
  font-weight: 800;
  color: var(--color-brand);
  background: rgba(11, 49, 93, 0.08);
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  margin-top: 2px;
  letter-spacing: 0.2px;
}

/* Estado seleccionado: gradiente brand + texto blanco + shadow */
#carrito .pay-btn.selected,
#carrito .pay-btn.active,
#carrito #payLaterBtn.selected,
#carrito #payLaterBtn.active {
  background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-hover) 100%);
  border-color: var(--color-brand);
  color: #fff;
  outline: none;
  box-shadow: 0 6px 18px rgba(11, 49, 93, 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 */
#carrito .pay-btn-full {
  width: 100%;
  margin-top: 12px;
  padding: 11px 14px;
  background: #fff;
  border: 1.5px dashed var(--color-border-strong);
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
}

#carrito .pay-btn-full:hover {
  border-style: solid;
  border-color: var(--color-text-muted);
  color: var(--color-text);
  background: var(--color-bg-subtle);
}

#carrito .pay-btn-full.selected,
#carrito .pay-btn-full.active {
  border-style: solid;
  background: var(--color-text);
  border-color: var(--color-text);
  color: #fff;
}

/* WEB NOTE: chip elegante en vez de bloque con borde */
#carrito .web-note {
  margin-top: 14px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(11, 49, 93, 0.06) 0%, rgba(27, 76, 133, 0.04) 100%);
  border: 1px solid rgba(11, 49, 93, 0.12);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid rgba(11, 49, 93, 0.12); /* override del border-top viejo */
  padding-top: 10px; /* override del padding-top viejo */
}

#carrito .web-note-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-brand);
  margin: 0;
}

#carrito .web-note-value {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-brand);
  margin: 0;
}

#carrito .web-note-value strong {
  font-size: 15px;
}

/* CART TABLE: zebra striping + hover row + mejor jerarquía */
#carrito .cart-table {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

#carrito .cart-table th {
  background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
  padding: 12px 6px;
  border-bottom: 2px solid var(--color-border);
}

#carrito .cart-table td {
  padding: 12px 6px;
  font-size: 13px;
  color: var(--color-text-soft);
  border-bottom: 1px solid var(--color-border-soft);
  border-right: 1px solid var(--color-border-soft);
  transition: background 0.12s ease;
}

#carrito .cart-table tbody tr:nth-child(even) td {
  background: #fafafa;
}

#carrito .cart-table tbody tr:hover td {
  background: rgba(11, 49, 93, 0.04);
}

#carrito .cart-table tbody tr:last-child td {
  border-bottom: none;
}

#carrito .cart-table td.desc {
  text-align: left;
  font-weight: 600;
  color: var(--color-text);
}

/* TOTALES: card centrada con look premium */
#carrito .cart-total {
  margin: 24px 0 20px;
}

#carrito .cart-total .totals-inner {
  width: var(--totals-width) !important;
  max-width: 100%;
  background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  box-shadow: var(--shadow-sm);
}

#carrito .totals-inner .totals-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px dashed var(--color-border);
  font-size: 13px;
  color: var(--color-text-soft);
}

#carrito .totals-inner .totals-line:last-of-type {
  border-bottom: none;
}

#carrito .totals-inner .totals-line strong {
  text-align: right;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
}

#carrito #webDiscountLine,
#carrito #paymentDiscountLine,
#carrito #totalDiscountsLine {
  color: #0a7a2f;
}

#carrito #webDiscountLine strong,
#carrito #paymentDiscountLine strong,
#carrito #totalDiscountsLine strong {
  color: #0a7a2f;
}

#carrito .totals-divider {
  margin: 14px 0;
  border-top: 2px solid var(--color-border);
}

#carrito .grand-total {
  text-align: center;
  margin: 18px 0 6px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-hover) 100%);
  color: #fff;
  border-radius: var(--radius-md);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.3px;
  box-shadow: 0 6px 20px rgba(11, 49, 93, 0.22);
}

#carrito .grand-total #total {
  font-size: 22px;
  font-weight: 900;
  margin: 0 2px;
}

#carrito .grand-total .iva-tag {
  color: rgba(255, 255, 255, 0.75);
  font-size: 10px;
}

/* "Pedido sin descuentos" (info secundaria) más suave */
#carrito #totalNoDiscountLine {
  color: var(--color-text-subtle);
  font-size: 12px;
}

#carrito #totalNoDiscountLine strong {
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 13px;
  text-decoration: line-through;
  text-decoration-color: rgba(0, 0, 0, 0.3);
}

/* ACCIONES: layout más generoso.
   Los dos botones outline ("Seguir agregando" + "Guardar pedido sin enviar")
   en la misma fila; orderStatus y submit-order debajo a ancho completo. */
#carrito .order-actions {
  margin: 24px auto 32px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  justify-items: stretch !important;
  align-items: center;
}

/* Hijos por orden DOM: 1=Seguir agregando, 2=Guardar pedido sin enviar,
   3=orderStatus, 4=Confirmar pedido. Los dos primeros se ponen lado a lado;
   los demás ocupan toda la fila y se centran. */
#carrito .order-actions > *:nth-child(1) {
  grid-column: 1;
  justify-self: end;
}
#carrito .order-actions > *:nth-child(2) {
  grid-column: 2;
  justify-self: start;
}
#carrito .order-actions > *:nth-child(n+3) {
  grid-column: 1 / -1;
  justify-self: center;
}

/* Botones outline ("Seguir agregando" + "Guardar pedido sin enviar")
   con el MISMO estilo que el .back-btn del header (← Volver a productos):
   pill blanco con borde gris claro, texto dark, pequeño nudge horizontal en hover. */
#carrito .back.back-outline,
#carrito .back.back-outline.save-draft-btn,
#carrito #saveDraftBtn {
  background: #fff !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text-soft) !important;
  padding: 11px 22px !important;
  border-radius: var(--radius-pill) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease, transform 0.12s ease;
  white-space: nowrap;
}

#carrito .back.back-outline:hover,
#carrito .back.back-outline.save-draft-btn:hover,
#carrito #saveDraftBtn:hover {
  background: var(--color-bg-soft) !important;
  border-color: var(--color-border-strong) !important;
  box-shadow: var(--shadow-xs);
  transform: translateY(-1px);
}

/* SUBMIT: botón gradient con CTA fuerte */
#carrito .submit-order {
  padding: 14px 36px;
  background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-hover) 100%);
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-md);
  width: 280px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(11, 49, 93, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: all 0.18s ease;
}

#carrito .submit-order:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(11, 49, 93, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

#carrito .submit-order:not(:disabled):active {
  transform: translateY(0);
}

#carrito .submit-order:disabled,
#carrito .submit-order.is-disabled {
  background: var(--color-bg-soft);
  color: var(--color-text-subtle);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}

#carrito .order-status {
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}

#carrito .order-status.ok {
  color: #0a7a2f;
  background: rgba(10, 122, 47, 0.08);
}

#carrito .order-status.err {
  color: var(--color-danger);
  background: rgba(176, 0, 32, 0.08);
}

/* CARRITO VACÍO: empty state polish */
/* (Reglas viejas de #carrito .cart-empty / ::before / ::after eliminadas
   — ahora el empty state usa la estructura LK con .cart-empty-face SVG,
   .cart-empty-title, .cart-empty-text y .cart-empty-btn renderada por JS) */

/* Responsive: tablets y mobile */
@media (max-width: 900px) {
  #carrito .section-header {
    padding: 20px 16px 14px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  /* En mobile el back-btn deja de ser absoluto y vuelve al flujo (arriba
     del título, alineado a la izquierda del stack). */
  #carrito .section-header .back-btn,
  #carrito .back-btn {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    align-self: flex-start;
  }
  #carrito .section-header .back-btn:hover,
  #carrito .back-btn:hover {
    transform: translateX(-2px) !important;
  }
  #carrito .section-title {
    font-size: 22px !important;
    text-align: center !important;
  }
  #carrito .ship-card,
  #carrito .pay-card {
    padding: 14px 16px;
  }
  #carrito .grand-total {
    font-size: 16px;
    padding: 12px 14px;
  }
  #carrito .grand-total #total {
    font-size: 20px;
  }
  #carrito .submit-order {
    width: 100%;
    max-width: 320px;
  }
  /* En mobile los 2 botones outline vuelven a apilarse (no entran lado a lado) */
  #carrito .order-actions {
    grid-template-columns: 1fr !important;
  }
  #carrito .order-actions > *:nth-child(1),
  #carrito .order-actions > *:nth-child(2) {
    grid-column: 1 !important;
    justify-self: center !important;
  }
}

/* =========================================================
   PERFIL — LAYOUT 2 COLUMNAS
   IZQ (≈40%): datos cliente + sucursales
   DER (≈60%): vendor notifs + historial web + drafts + estado
   ========================================================= */
#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;
}
#perfil .profile-2col .profile-summary,
#perfil .profile-2col .profile-card.wide {
  max-width: none !important;
  margin: 0 !important;
  width: 100% !important;
}
#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;
}
@media (max-width: 900px) {
  #perfil .profile-2col {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 0 12px;
  }
  #perfil .profile-bottom-row {
    padding: 0 12px;
  }
}

/* =========================================================
   PERFIL — PASS WRAP con acciones a la derecha
   "Modificar Contraseña" (primary dark) + "Ver Historial" +
   "Ver Sugerencias" (outline subtle) en una sola fila.
   ========================================================= */
#perfil .profile-summary .profile-row {
  border-bottom: 0 !important;
}
#perfil .profile-pass-wrap {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px !important;
  padding-top: 4px !important;
  border-top: 0 !important;
}
#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;
}
/* 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;
}
#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;
}
#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;
}
@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;
  }
}

/* =========================================================
   PERFIL — BOTONES VARIANTES
   ========================================================= */
#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;
}
#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;
}

/* Header de la card de sucursales: btn Agregar a la izq, Ver Más a la 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;
}
#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;
}

/* =========================================================
   CARRITO — port completo desde LK
   Header grid 3×2: [back][title][guardar] / [_][confirm][_]
   Layout 2-col: izq (ship/pay/totals) + der (items)
   Cards con stripe roja a la izq → verde cuando confirmadas
   Cart-table sticky con stepper integrado y dot rojo X
   Totals con grand-total verde gradiente destacado
   Empty state con carita wobble + texto + botón
   Responsive ≤900px tablet, ≤600px phone, ≤380px tiny
   ========================================================= */

/* Header del carrito: grid 3 columnas × 2 filas */
#carrito .section-header {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    "back title guardar"
    ".    confirm .";
  align-items: center;
  row-gap: 10px;
  column-gap: 16px;
  padding: 0 24px 4px !important;
  margin: 0 auto 14px !important;
  max-width: 1320px;
  min-height: 0 !important;
}

#carrito .section-header .back-btn {
  position: static !important;
  grid-area: back !important;
  grid-column: auto !important;
  justify-self: start !important;
  align-self: center !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: auto !important;
  max-width: max-content !important;
  flex: 0 0 auto !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;
}
#carrito .section-header .back-btn:hover {
  background: #f5f5f5 !important;
  border-color: #999 !important;
  color: #111 !important;
  transform: none !important;
  box-shadow: none !important;
}

#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;
}
#carrito .section-header .section-center #orderStatus {
  display: none;
}

/* Confirmar pedido habilitado → verde */
#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);
}
#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: Guardar pedido (amarillo, col 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;
}
#carrito #orderStatus.order-status-top {
  display: none !important;
}
#carrito .order-actions-top .back-outline,
#carrito .order-actions-top .save-draft-btn,
#carrito .order-actions-top #saveDraftBtn {
  margin: 0 !important;
  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;
  box-shadow: none !important;
  transform: none !important;
}
#carrito .order-actions-top .back-outline:hover,
#carrito .order-actions-top .save-draft-btn:hover,
#carrito .order-actions-top #saveDraftBtn:hover {
  background: #ffeeb0 !important;
  border-color: #c98e00 !important;
  color: #5b4a00 !important;
  box-shadow: none !important;
  transform: none !important;
}
#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
   ============================================================ */
/* Layout 2x2: top row con 2 cols (ship/pay izq, items der), bottom row
   con totals (izq) + missing module (der, 3 cols) abarcando ambas cols. */
#carrito .cart-2col {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr);
  grid-template-areas:
    "left right"
    "bottom bottom";
  gap: 0 32px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
  align-items: start;
}
#carrito .cart-2col > .cart-col-left { grid-area: left; }
#carrito .cart-2col > .cart-col-right { grid-area: right; align-self: stretch; }
/* cart-bottom-row pegado más cerca de la columna izquierda — antes había
   un margin-top de 16px + row-gap de 10px que dejaba ~26px de aire vacío
   entre "Método de Pago" y el total. */
#carrito .cart-2col > .cart-bottom-row { grid-area: bottom; align-self: start; margin-top: 4px; }

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

#carrito .cart-col-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  overflow: hidden;
  max-height: calc(100vh - 200px);
  min-height: 240px;
}

/* FILA INFERIOR: ahora sólo contiene el missing-card (el bloque de totales
   se movió a cart-col-left para que quede pegado al "Método de Pago").
   Si missing está oculto, el bottom-row colapsa a 0 alto y no agrega aire. */
#carrito .cart-bottom-row {
  display: block;
  width: 100%;
}
/* Si el missing está oculto, no reservar espacio. */
#carrito .cart-bottom-row:has(> #missingAssortmentModule[style*="display: none"]),
#carrito .cart-bottom-row:has(> #missingAssortmentModule[style*="display:none"]) {
  display: none;
}

/* Layout horizontal de missing-card cuando vive en cart-bottom-row:
   Imagen izq (span 2 filas) + Desc top right + Info+Stepper bottom right.
   Match exacto con LK. */
#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 — desc y price-row pasan a ser hijos directos del grid */
#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-layout-single,
#carrito .cart-2col .cart-layout {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
#carrito .cart-2col #missingAssortmentModule {
  flex: 0 1 auto;
  max-height: 320px;
  min-height: 0;
  overflow: hidden;
  border-radius: 14px;
}
#carrito .cart-2col #cart {
  flex: 1 1 auto;
  /* Cap apretado: exactamente ~5 artículos visibles, scroll para el resto.
     Cálculo: 5 rows × ~55px + header ~45px + bordes ≈ 335px. */
  min-height: 335px;
  height: auto !important;
  max-height: 345px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important; /* sin scroll horizontal — tabla se ajusta a width */
  -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;
}
/* Header sticky para que las columnas (Cod / Descripción / etc.) sigan
   visibles mientras se scrollea la lista de items. */
#carrito .cart-2col #cart .cart-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fafafa;
  box-shadow: inset 0 -1px 0 #e5e5e5;
}
#carrito .cart-2col #cart:has(> .cart-empty) {
  overflow: hidden !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  min-height: 280px;
}
#carrito .cart-2col #cart > .cart-empty {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 260px;
}
#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;
}
#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;
}
#carrito .cart-2col .ship-row,
#carrito .cart-2col #customerSelectorCart {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-content: initial !important;
}
#carrito .cart-2col #clienteNuevoRow:not([style*="display: block"]):not([style*="display:block"]) {
  display: none !important;
}

#carrito .cart-2col .ship-card,
#carrito .cart-2col .pay-card {
  width: 100% !important;
  max-width: none !important;
}
#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 más compacto: antes 14px arriba/abajo + 22px de gap entre filas
     → 14+22+22+14 = 72px verticales. Bajo a 10+14+14+10 = 48px. */
  padding: 10px 20px !important;
  gap: 14px !important;
}
#carrito .cart-2col .cart-total .totals-inner > *,
#carrito .cart-2col .cart-total h3.grand-total {
  box-sizing: border-box;
  max-width: 100%;
}
#carrito .cart-2col .cart-table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed;
  border-collapse: separate !important;
  border-spacing: 0;
}

#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;
  overflow: visible !important;
}
#carrito .ship-card:hover,
#carrito .pay-card:hover {
  border-color: #d8d8d8;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
#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á confirmada — cubre 3 casos:
   1) Cliente confirmó dirección con el botón → #shipConfirmBtn.confirmed
   2) Solo había 1 dirección → .ship-card.auto-confirmed
   3) Vendor confirmó razón social → #customerConfirmBtn.confirmed */
#carrito .ship-card:has(#shipConfirmBtn.confirmed)::before,
#carrito .ship-card.auto-confirmed::before,
#carrito #customerSelectorCart .ship-card:has(#customerConfirmBtn.confirmed)::before {
  background: linear-gradient(180deg, #0a7a2f 0%, #12a040 100%);
  opacity: 1;
}
/* Auto-confirmed: ocultar hint (refuerzo del JS) */
#carrito .ship-card.auto-confirmed .ship-hint {
  display: none;
}
#carrito .pay-card:has(.pay-btn.selected)::before,
#carrito .pay-card:has(.pay-btn.active)::before,
#carrito .pay-card:has(#payLaterBtn.selected)::before,
#carrito .pay-card:has(#payLaterBtn.active)::before {
  background: linear-gradient(180deg, #0a7a2f 0%, #12a040 100%);
  opacity: 1;
}

/* LABELS */
#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;
}
#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;
}
#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>");
}
#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;
}
#carrito .ship-card:has(#shipConfirmBtn.confirmed) .ship-hint {
  display: none;
}
#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 — port LK (override chef brand-gradient con verde) */
#carrito .pay-btn {
  width: 100%;
  background: #fff !important;
  border: 1.5px solid #e6e6e6 !important;
  border-radius: 10px !important;
  padding: 12px 8px !important;
  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 !important;
  background: #fafafa !important;
  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 !important;
  background: rgba(10, 122, 47, 0.1) !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  margin-top: 2px;
  letter-spacing: 0.2px;
}
#carrito .pay-btn.selected,
#carrito .pay-btn.active,
#carrito #payLaterBtn.selected,
#carrito #payLaterBtn.active {
  background: linear-gradient(135deg, #0a7a2f 0%, #12a040 100%) !important;
  border-color: #0a7a2f !important;
  color: #fff !important;
  outline: none;
  box-shadow: 0 6px 18px rgba(10, 122, 47, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  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) !important;
  color: #fff !important;
}

#carrito .pay-btn-full {
  width: 100%;
  margin-top: 12px !important;
  padding: 11px 14px !important;
  background: #fff !important;
  border: 1.5px dashed #bbb !important;
  color: #666 !important;
  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 !important;
  background: #fafafa !important;
}
#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, sticky, stepper compacto
   ============================================================ */
#carrito .cart-table {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-collapse: separate !important;
  border-spacing: 0;
}
#carrito .cart-table th {
  background: #f5f5f5 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #888 !important;
  padding: 10px 2px !important;
  border-bottom: 2px solid #ddd !important;
  border-right: 0 !important;
  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 !important;
  font-size: 12px !important;
  color: #444 !important;
  border-bottom: 1px solid #f0f0f0 !important;
  border-right: 0 !important;
  transition: background 0.12s ease;
  vertical-align: middle;
}
#carrito .cart-table td.desc {
  padding: 10px 8px 10px 6px !important;
  text-align: left;
  font-weight: 700 !important;
  color: #111 !important;
  font-size: 12px !important;
  line-height: 1.25;
}
#carrito .cart-table td:nth-child(4),
#carrito .cart-table td:nth-child(5),
#carrito .cart-table td:nth-child(6) {
  padding: 10px 2px !important;
}
#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 !important;
}
#carrito .cart-table td:first-child {
  font-weight: 700 !important;
  color: #555 !important;
  font-size: 11px !important;
}
#carrito .cart-table td:last-child {
  font-weight: 800 !important;
  color: #111 !important;
  font-size: 12px !important;
  white-space: nowrap;
}

/* Stepper compacto integrado en la tabla */
#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;
}
#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;
  padding: 0;
}
#carrito .cart-table .row-remove:hover,
#carrito .cart-table button[onclick*="removeItem"]:hover {
  background: rgba(208, 0, 0, 0.1);
  color: #d00000;
}
#carrito .cart-table .cart-iva {
  font-size: 9px;
  font-weight: 600;
  color: #888;
  display: block;
  line-height: 1.2;
  margin-top: 1px;
}
#carrito .cart-2col #cart {
  margin-bottom: 8px !important;
}

/* Cart-step inline (cuando renderea desde script, sin .cart-table) */
#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;
  margin-top: 0;
}

/* ============================================================
   TOTALES con grand-total verde destacado
   ============================================================ */
#carrito .cart-total {
  /* margin reducido: antes 24px arriba → ahora 6px para acercarlo al
     bloque de método de pago. La regla más específica en cart-2col
     pone 0 !important, así que esto sólo afecta layouts no-2col. */
  margin: 6px 0 12px;
}
#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%) !important;
  border: 1px solid #d8ecdf !important;
  border-radius: 16px !important;
  padding: 16px 22px !important;
  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) !important;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  align-items: center;
  max-width: 780px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}
#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;
}
#carrito #webDiscountLine,
#carrito #paymentDiscountLine,
#carrito #totalDiscountsLine {
  color: #0a7a2f !important;
  font-weight: 600 !important;
}
#carrito #webDiscountLine strong,
#carrito #paymentDiscountLine strong,
#carrito #totalDiscountsLine strong {
  display: inline-block;
  background: linear-gradient(135deg, #e8f6ec 0%, #d6efe0 100%) !important;
  color: #0a7a2f !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  border: 1px solid rgba(10, 122, 47, 0.2) !important;
  box-shadow: 0 1px 2px rgba(10, 122, 47, 0.08);
}
#carrito .totals-inner .totals-line:first-child {
  font-weight: 700;
  color: #222;
}
#carrito .totals-divider {
  margin: 14px 0;
  border-top: 2px solid #ddd;
}

/* Grand-total: tarjetón verde gradiente */
#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%) !important;
  color: #fff !important;
  border-radius: 12px !important;
  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) !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 160px;
  position: relative;
  overflow: hidden;
}
#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) !important;
  font-size: 9px !important;
  font-weight: 600;
  margin-top: 0;
}

/* ============================================================
   EMPTY CART STATE — carita triste + texto + botón
   ============================================================ */
.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%;
}
@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;
}
.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);
}
@container cartempty (max-width: 360px) {
  .cart-empty-row {
    flex-direction: column;
    text-align: center;
  }
  .cart-empty-face {
    max-width: 60%;
  }
}
@keyframes cart-empty-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes cart-empty-wobble {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

/* ============================================================
   VENDEDOR: cuando existe #customerSelectorCart (vendor en carrito de
   cliente), "Pedir para (Razón Social)" + "Indicar Dirección de Entrega"
   van en la misma fila. El resto (clienteNuevoRow, paymentRow, cart-total)
   ocupa ancho completo.
   ============================================================ */
#carrito .cart-2col .cart-col-left:has(#customerSelectorCart) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
#carrito .cart-2col .cart-col-left:has(#customerSelectorCart) > #customerSelectorCart {
  grid-column: 1;
  grid-row: 1;
}
#carrito .cart-2col .cart-col-left:has(#customerSelectorCart) > .ship-row:has(#shippingSelect) {
  grid-column: 2;
  grid-row: 1;
}
/* Todo lo demás ocupa toda la fila */
#carrito .cart-2col .cart-col-left:has(#customerSelectorCart) > #clienteNuevoRow,
#carrito .cart-2col .cart-col-left:has(#customerSelectorCart) > #paymentRow,
#carrito .cart-2col .cart-col-left:has(#customerSelectorCart) > .cart-total {
  grid-column: 1 / -1;
}
@media (max-width: 900px) {
  #carrito .cart-2col .cart-col-left:has(#customerSelectorCart) {
    grid-template-columns: 1fr;
  }
  #carrito .cart-2col .cart-col-left:has(#customerSelectorCart) > #customerSelectorCart,
  #carrito .cart-2col .cart-col-left:has(#customerSelectorCart) > .ship-row:has(#shippingSelect) {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ============================================================
   CARRITO RESPONSIVE (≤900px tablet, ≤600px phone, ≤380px tiny)
   ============================================================ */
@media (max-width: 900px) {
  #carrito .cart-2col {
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "right"
      "bottom";
    gap: 16px;
    padding: 0 12px;
  }
  #carrito .section-header {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "back"
      "title"
      "guardar"
      "confirm" !important;
    row-gap: 12px !important;
    column-gap: 0 !important;
    padding: 0 16px 4px !important;
    margin-bottom: 16px !important;
  }
  #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;
  }
  #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;
  }
  #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;
  }
  #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;
  }
  #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;
  }
  #carrito .grand-total .grand-total-label {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    width: auto !important;
    text-align: left !important;
  }
  #carrito .grand-total .grand-total-value {
    margin: 0 !important;
    font-size: 18px !important;
  }
  #carrito .grand-total .iva-tag {
    margin-left: 4px;
  }
  #carrito .ship-card,
  #carrito .pay-card {
    padding: 14px 16px !important;
  }
  .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;
  }
}

@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;
  }
  #carrito .ship-card,
  #carrito .pay-card {
    padding: 12px 14px !important;
    border-radius: 12px;
  }
  #carrito .ship-label {
    font-size: 10px !important;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
  }
  #carrito .cart-2col .cart-table th:nth-child(4),
  #carrito .cart-2col .cart-table td:nth-child(4) {
    display: none;
  }
  #carrito .cart-2col .cart-table th:nth-child(5),
  #carrito .cart-2col .cart-table td:nth-child(5) {
    font-size: 11px;
  }
  #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 !important;
    padding: 2px 8px !important;
  }
  .payment-buttons.payment-6 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }
  #carrito .ship-card::before,
  #carrito .pay-card::before {
    width: 2px;
    top: 10px;
    bottom: 10px;
  }
  .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;
  }
}

@media (max-width: 380px) {
  .payment-buttons.payment-6 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #carrito .cart-2col .cart-table {
    font-size: 11px;
  }
  #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;
  }
}

/* =========================================================
   PERFIL — refinamientos finales (port desde LK)
   Summary card con stripe roja arriba + razón social subrayada
   Data-grid 4 cols (Cod, CUIT, Correo, Dto Vol) como pills
   Cod Cliente destacado en rojo, Correo más chico
   Sucursales como tarjetitas con slot numerado
   Avisar error compacto
   Cards con cap 320px + scrollbar custom
   ========================================================= */

/* Profile summary card */
#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;
}
#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;
}
#perfil .profile-summary.is-vendor-profile::before {
  background: linear-gradient(90deg, #c79100 0%, #e6a800 40%, #5b4a00 100%) !important;
}
#perfil .profile-summary.is-vendor-profile .profile-ra::after {
  background: #c79100 !important;
}

/* Razón social — centrada, grande, con underline rojo */
#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;
}

/* Data grid 4 cols con pills (se adapta a 3 cuando Dto Vol está oculto) */
#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;
}
/* Cuando Dto Vol está oculto (clientes sin descuento volumen),
   los 3 datos restantes ocupan todo el ancho */
#perfil .profile-row.data-grid:has(> #pfDtoVolWrap[style*="display: none"]),
#perfil .profile-row.data-grid:has(> #pfDtoVolWrap[style*="display:none"]) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
@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;
}
#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;
}
#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;
}
#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;
}
#perfil .profile-row.data-grid #pfCodCliente {
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: -0.4px;
  color: #c0392b !important;
}
#perfil .profile-row.data-grid #pfCorreo {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  line-height: 1.3;
  word-break: break-all;
}

/* SUCURSALES — grid 4 por fila como tarjetas compactas */
#perfil .addr-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}
#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;
  }
}

/* Empty state compacto con carita triste — para Historial Pedidos Web, etc. */
#perfil .empty-state-mini {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 28px 8px;
  color: #555;
}
#perfil .empty-state-mini-face {
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
}
#perfil .empty-state-mini-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#perfil .empty-state-mini-text strong {
  font-size: 17px;
  font-weight: 800;
  color: #222;
  line-height: 1.2;
}
#perfil .empty-state-mini-text span {
  font-size: 13px;
  color: #777;
  line-height: 1.45;
}

/* "Avisar de un error" — botón compacto, no 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;
}

/* Cards (Historial / Drafts / Vendor Notifs): cap 320px + scrollbar custom */
#perfil #myOrdersBox,
#perfil #draftCartsBox,
#perfil #vendorNotifsBox,
#perfil #trackingStatusBox {
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}
#perfil #myOrdersBox::-webkit-scrollbar,
#perfil #draftCartsBox::-webkit-scrollbar,
#perfil #vendorNotifsBox::-webkit-scrollbar,
#perfil #trackingStatusBox::-webkit-scrollbar {
  width: 8px;
}
#perfil #myOrdersBox::-webkit-scrollbar-track,
#perfil #draftCartsBox::-webkit-scrollbar-track,
#perfil #vendorNotifsBox::-webkit-scrollbar-track,
#perfil #trackingStatusBox::-webkit-scrollbar-track {
  background: transparent;
}
#perfil #myOrdersBox::-webkit-scrollbar-thumb,
#perfil #draftCartsBox::-webkit-scrollbar-thumb,
#perfil #vendorNotifsBox::-webkit-scrollbar-thumb,
#perfil #trackingStatusBox::-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,
#perfil #trackingStatusBox::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.35);
  background-clip: padding-box;
  border: 2px solid #fff;
}

/* ================= PEDIDOS SIN CONFIRMAR (drafts) =================
   Card por draft: icono disquete a la izq, info en el medio (título +
   pill "X items" + fecha relativa), acciones a la der (botón navy con
   icono carrito + botón delete tacho rojo).
   ============================================================ */
.draft-row-v2 {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 12px;
  margin-bottom: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.draft-row-v2:hover {
  border-color: #d4d4d4;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.draft-row-v2:last-child { margin-bottom: 0; }

.draft-icon-wrap {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
}
.draft-icon-svg {
  width: 24px;
  height: 24px;
}

.draft-info {
  flex: 1 1 auto;
  min-width: 0;
}
.draft-client-name {
  font-weight: 700;
  color: #111;
  font-size: 12.5px;
  margin-bottom: 2px;
}
.draft-title {
  font-weight: 700;
  color: #111;
  font-size: 15px;
  line-height: 1.25;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.draft-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
}
.draft-pill-items {
  background: #f3f4f6;
  color: #4b5563;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  line-height: 1.4;
}
.draft-meta-dot {
  color: #9ca3af;
  font-weight: 700;
}
.draft-meta-date {
  color: #6b7280;
}
.draft-notes {
  color: #6b7280;
  font-size: 12px;
  margin-top: 4px;
  line-height: 1.4;
}

.draft-actions-v2 {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.draft-load-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1a1f2e;
  color: #fff;
  border: none;
  padding: 9px 16px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.12s ease;
  font-family: inherit;
}
.draft-load-btn:hover {
  background: #000;
  transform: translateY(-1px);
}
.draft-load-btn:active {
  transform: translateY(0);
}
.draft-load-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.draft-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: #fff;
  color: #dc2626;
  border: 1px solid #fecaca;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.draft-delete-btn svg {
  width: 16px;
  height: 16px;
}
.draft-delete-btn:hover {
  background: #fef2f2;
  border-color: #fca5a5;
}
.draft-delete-btn:active {
  transform: scale(0.95);
}

/* Mobile: stack actions abajo si no entran */
@media (max-width: 600px) {
  .draft-row-v2 {
    flex-wrap: wrap;
  }
  .draft-info {
    flex: 1 1 60%;
  }
  .draft-actions-v2 {
    flex: 1 1 100%;
    margin-top: 8px;
    justify-content: flex-end;
  }
  .draft-load-btn { flex: 1; justify-content: center; }
}

/* Vendor en perfil propio (own mode): ocultar "Ver Historial" + "Ver Sugerencias".
   El vendor NO compra para sí mismo, así que estos botones no aplican.
   Cuando el vendor selecciona un cliente (own mode = false), los botones SÍ
   aparecen (está actuando como cliente). */
#perfil .profile-summary.is-vendor-profile .profile-pass-actions-right,
body.is-vendor-user.is-vendor-own-mode #perfil .profile-pass-actions-right {
  display: none !important;
}

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

/* =========================================================
   STICKY HEADER SHRINK — al scrollear, el header se achica
   para dar más espacio vertical. Activado via body.is-scrolled
   seteado por JS cuando scrollY > 80.
   ========================================================= */
.header {
  transition: height 0.22s ease, padding 0.22s ease;
}
.logo-img {
  transition: height 0.22s ease;
}
body.is-scrolled .header {
  height: 64px;
  padding: 6px 40px;
}
body.is-scrolled .logo-img {
  height: 44px;
}
/* En mobile el header ya es chico — mantener misma altura (86px) siempre,
   sin shrink, para que la barra sticky debajo no deje gap. */
@media (max-width: 900px) {
  body.is-scrolled .header {
    height: 86px;
    padding: 12px 12px;
  }
  body.is-scrolled .logo-img {
    height: 46px;
  }
}

/* =========================================================
   PERFIL — section-header alineado con cart/profile-2col
   (grid 3 cols: back-btn izq / titulo centro / espacio der)
   ========================================================= */
#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 {
  position: static !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  max-width: max-content !important;
  justify-self: start !important;
  align-self: center !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;
  transform: none !important;
  box-shadow: none !important;
}
#perfil .section-header .section-title {
  justify-self: center !important;
  text-align: center !important;
}

/* =========================================================
   PERFIL — Mobile responsive completo
   ========================================================= */
@media (max-width: 900px) {
  #perfil .section-header {
    padding: 0 12px !important;
  }
  #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;
  }
  #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;
  }
}
@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;
  }
}

/* =========================================================
   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;
}
.back-to-top-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
@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;
  }
}

/* =========================================================
   PRODUCT SKELETONS — shimmer placeholders mientras cargan
   los productos por primera vez
   ========================================================= */
@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;
}

/* =========================================================
   PROFILE CARD COLLAPSIBLE — botón header + body que toggle
   (usado por "Análisis de tus compras")
   ========================================================= */
.profile-card-collapsible {
  padding: 0 !important;
  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;
  }
}

/* ===== MÓDULO EXPO (portado desde LK) ===== */
/***********************
 * 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: chip del N° de pedido en la pantalla de confirmación (portado desde LK) */
.success-ordernum {
  margin: 6px auto 14px;
  padding: 8px 18px;
  border-radius: 999px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.3px;
  text-align: center;
}

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

/* =========================================================================
   Editar pedido — sólo agregar (idea 4990, 2026-09-05; espejo de LK)
   ========================================================================= */
.hist-edit-wrap {
  flex-basis: 100%;
  display: flex;
  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: 190px;
  line-height: 1.3;
}
/* Cartel "Estás editando…" debajo de Confirmar pedido */
#carrito #editOrderBanner {
  grid-column: 1 / -1;       /* el header es un grid con áreas: fila propia, a lo ancho, debajo de Confirmar */
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #fff4d6;
  border: 1px solid #e6c34d;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  text-align: center;
  line-height: 1.3;
}
#carrito #editOrderBanner #cancelEditBtn {
  min-width: 0;
  height: auto;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  flex: 0 0 auto;
}
.cart-min-hint {
  font-size: 11px;
  color: #8a6608;
  margin-top: 4px;
}

/* Editando un pedido: Entrega y Método de pago ya están en el pedido → no se muestran */
body.chef-editing #carrito .cart-col-left .ship-row { display: none !important; }
.cart-min-hint { white-space: nowrap; }
/* Editando un pedido tampoco tiene sentido "Guardar pedido sin enviar" (guardaría el pedido como borrador) */
body.chef-editing #carrito .section-header .order-actions-top { display: none !important; }

/* ---- RETIRA: día + franja horaria dentro de la card de entrega ----
   Portado de pagina-lk-copia (2026-09-14). Mismo markup y mismas clases que
   LK, con el acento de Chef (#111) en vez del rojo. */
.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: #111;
  background: #f5f5f5;
}
.retiro-franja input {
  accent-color: #111;
}

/* Observaciones del pedido (22/09/2026, portado de LK) */
/* Fila partida: Dirección de entrega + Observaciones, mitad y mitad.
   Portado de LK el 24/09/2026 para que las dos páginas se vean igual.
   Mantiene el ancho total 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;
  box-sizing: border-box;
}
.ship-textarea:focus {
  border-color: #111;
}

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

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

/* Luis (23/09): "Tu pedido estará listo antes del dd/mm/aa" en la confirmación (gemelo de LK). */
.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[hidden] { display: none; }
.success-entrega strong {
  font-size: 16px;
}

/* =========================================================================
   MODO PRESUPUESTO — cliente de exportación (customers.modo_presupuesto)
   =========================================================================
   Gemelo del de Loekemeyer (`pagina-LK-copia/css/styles.css`, mismo bloque).
   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.
   ⚠ Al tocar esto, mirar también LK.
   ------------------------------------------------------------------------- */

/* Precios en la ficha del producto, en novedades y en sugerencias del vendedor */
.is-presupuesto .card-prices,
.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 #sortSelect option[value="price_desc"],
.is-presupuesto #sortSelect option[value="price_asc"] {
  display: none !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.
   ⚠ Y Observaciones tiene que poder crecer: `.ship-row-split > .ship-card`
   lleva `max-width: 382px`, así que sin esto queda sola a media fila con el
   resto en blanco. Mismo bloque que en LK. */
.is-presupuesto #shipCardEntrega {
  display: none !important;
}
.is-presupuesto .ship-row-split > .ship-card {
  max-width: none;
}

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