/* ================================================================
   catalogo.css — Estilos exclusivos del panel de catálogo
   (topbar, grilla de productos, modales)
   ================================================================ */

/* ── LAYOUT ──────────────────────────────────────────────────── */
/* #app se muestra con display:flex (ver *.js: app.style.display =
   'flex') en vez de 'block' justamente por esto: en páginas con poco
   contenido (ej. "Mis pedidos" sin pedidos guardados, carrito vacío)
   el footer quedaba pegado al final del contenido, a mitad de
   pantalla, en vez de ir al piso. Con #app en columna y .shell
   ocupando el espacio sobrante, el footer se va solo al fondo. */
#app {
  min-height: 100vh;
  flex-direction: column;
}

.shell {
  width: 100%;   /* si queda en "auto", el margin:0 auto de acá abajo
                    "absorbe" el stretch del flex de #app y .shell se
                    encoge a su contenido en vez de ir hasta max-width
                    (por eso se veían menos columnas en la grilla) */
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 1.5rem;
  flex: 1 0 auto;
}

/* Cuánto sobresalen el logo y los íconos de la topbar afuera del
   margen del contenido: hasta 6rem, pero nunca más que el espacio que
   de verdad queda a los costados (margen de la página + padding del
   contenedor, dejando ~1rem de aire). Sin este tope, en notebooks de
   1024–1440px el engranaje quedaba fuera de la pantalla y el logo
   cortado a la izquierda. --shell-max es el max-width del contenedor
   de la topbar (.shell acá, header.site-header-topbar en site.css). */
:root { --shell-max: 1080px; }
.topbar {
  --topbar-sangria: min(6rem, max(0px, (100vw - var(--shell-max)) / 2) + 0.5rem);
}

/* ── TOPBAR ──────────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  /* La caja de .topbar en sí NO se desplaza — coincide exactamente
     con el ancho del .shell, igual que la grilla de productos. Lo
     que sobresale hacia afuera de ese margen es el LOGO (margin-left
     negativo, ver .logo) y el grupo de ÍCONOS (margin-right negativo
     al final, ver .topbar-icons) — ambos siguen en el flujo normal
     del flex (nada de position:absolute) para que nunca se superpongan
     con Marcas/buscador/nav. */
}

/* Fondo a todo el ancho aunque el topbar viva en un contenedor con
   max-width, para que se note separado del fondo de la página al
   quedar fijo arriba durante el scroll. El box-shadow + clip-path va
   en un ::before propio (no directo en .topbar) para que el recorte
   sea solo de ESE pseudo-elemento: así no corta cosas que sobresalen
   de la caja del topbar, como el panel desplegable de "Marcas". */
.topbar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  box-shadow: 0 0 0 100vmax var(--surface);
  clip-path: inset(0 -100vmax);
}

.logo {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  /* sobresale bien notorio hacia la izquierda, afuera del margen del
     catálogo — sigue siendo el primer ítem normal del flex (no
     absolute), así el siguiente elemento (Marcas) se acomoda solo
     después de su ancho real sin números mágicos. */
  margin-left: calc(-1 * var(--topbar-sangria));
}

.logo-link {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  text-decoration: none;
  transition: var(--trans);
}
.logo-link:hover { opacity: 0.75; }

/* ── MENÚ "MARCAS" (solo catálogo) — desplegable al pasar el cursor,
   pegado al logo. El panel usa columnas (CSS columns) para que
   entren muchas marcas sin quedar interminable verticalmente, con
   scroll como red de seguridad si aun así no entran. ───────────── */
.marcas-menu {
  /* sin position:relative a propósito: así el panel (position:
     absolute) toma como referencia .topbar (position:sticky), no
     este contenedor — y "top:100%" cae justo en el borde inferior
     de TODA la barra, no a mitad de fila. */
  display: flex;
  align-items: center;
  align-self: stretch;
  /* corrido para quedar más o menos arriba del primer producto de la
     grilla (que ahora arranca después del sidebar de categoría, ver
     .catalogo-layout/.catalogo-sidebar) en vez de pegado al logo */
  margin-left: calc(1.5rem + 157px);
  /* puente invisible: iguala el padding inferior de .topbar para que
     la caja "hoverable" del menú llegue hasta ese borde sin cortes
     (el margin-bottom negativo cancela el alto extra que sumaría) */
  padding-bottom: 1.6rem;
  margin-bottom: -1.6rem;
}

.marcas-trigger {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 44px;
  font-family: inherit;
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--text);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: var(--trans);
}

.marcas-trigger svg {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  transition: transform 0.2s ease;
}

.marcas-menu:hover .marcas-trigger,
.marcas-menu:focus-within .marcas-trigger {
  color: var(--primary);
}

.marcas-menu:hover .marcas-trigger svg,
.marcas-menu:focus-within .marcas-trigger svg {
  transform: rotate(180deg);
}

.marcas-panel {
  position: absolute;
  top: 100%;
  left: 0;
  padding: 1.25rem 1.5rem;
  background: var(--surface);
  /* sin borde propio: solo el de arriba, para que se lea como una
     continuación de la barra y no como una tarjeta flotando aparte */
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-pop);
  /* grid (no CSS columns) para que más columnas = menos filas de forma
     predecible, y el max-height + scroll de abajo funcione siempre —
     con "columns" el recorte por altura es inconsistente entre
     navegadores. */
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0 1.75rem;
  width: min(880px, 90vw);
  max-height: 60vh;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: var(--trans);
  z-index: 20;
}

.marcas-menu:hover .marcas-panel,
.marcas-menu:focus-within .marcas-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* clic en una marca: fuerza el cierre aunque el mouse siga encima,
   hasta que se vaya de .marcas-menu (ver catalogo.js) — si no, al
   elegir una marca el panel se quedaría tapando los productos. */
.marcas-menu.force-closed .marcas-panel {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.marcas-item {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--text-2);
  background: none;
  border: none;
  padding: 0.4rem 0;
  cursor: pointer;
  transition: var(--trans);
  overflow-wrap: break-word;
}
.marcas-item:hover { color: var(--primary); }
.marcas-item.active { color: var(--primary); font-weight: 500; }

.marcas-empty {
  display: block;
  font-size: 0.82rem;
  color: var(--text-3);
}

/* ── BÚSQUEDA EN EL TOPBAR (solo catálogo) ──────────────────────
   Vive dentro de .topbar, pegada al logo/marcas. Crece para ocupar
   el hueco libre entre Marcas y el nav (que sigue empujado al borde
   derecho con margin-left:auto) — con un tope para que en pantallas
   muy anchas no quede gigante. */
.topbar-search {
  display: flex;
  flex: 1;
  max-width: 520px;
  min-width: 160px;
}

.topbar-search .search-wrap {
  width: 100%;
  min-width: 0;
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  /* empuja [nav + íconos] como bloque hacia el borde derecho de la
     fila — el nav ya no queda pegado exacto al margen de la grilla
     (eso causaba que los íconos, al sobresalir por su cuenta, se
     superpusieran encima), pero a cambio nunca hay superposición. */
  margin-left: auto;
}

/* Mismo look en todas las páginas del sitio: minúscula normal y una
   rayita avellana debajo de la página en la que estás. */
.topbar-nav a {
  font-size: 0.93rem;
  font-weight: 400;
  color: var(--text-2);
  text-decoration: none;
  padding: 0.35rem 0 0.25rem;
  border-bottom: 1px solid transparent;
  transition: var(--trans);
}
.topbar-nav a:hover { color: var(--text); }
.topbar-nav a.active { color: var(--text); border-bottom-color: var(--brand); }

/* ── BOTONES CIRCULARES (tema / cuenta / logout) — misma posición y
   estilo que el ícono de login en landing/contacto ────────────── */
.theme-btn,
.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-md);
  background: var(--surface);
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--trans);
}

.theme-btn:hover,
.icon-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--surface2);
}

/* ── HAMBURGUESA (solo mobile) — junta el nav en un desplegable, ver
   .topbar-nav.mobile-open más abajo y toggleMobileNavUI en topbar.js */
.hamburger-btn {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-md);
  background: var(--surface);
  color: var(--text-2);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--trans);
}
.hamburger-btn:hover { color: var(--primary); border-color: var(--primary); }
.hamburger-btn svg { width: 16px; height: 16px; stroke: currentColor; }

.theme-btn-icon svg,
.icon-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.logo-img {
  height: 28px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* Rol/carrito/tema/cuenta/salir: quedan en el flujo normal (último
   ítem de la fila) para que SIEMPRE reserven su propio espacio real
   y nunca se superpongan con el nav — lo único que sobresale es un
   margin-right negativo al final, que empuja solo a este grupo más
   allá del borde derecho, sin robarle lugar a nadie más. */
.topbar-icons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: calc(-1 * var(--topbar-sangria));
}

/* ── MENÚ DE OPCIONES (tema / cuenta / salir) — mismo desplegable en
   mobile y desktop (ver toggleSettingsMenuUI en topbar.js), en vez de
   tres íconos circulares sueltos. ────────────────────────────────── */
.settings-menu { position: relative; }

.settings-panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border-md);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: 0.4rem;
  min-width: 190px;
  display: none;
  flex-direction: column;
  z-index: 25;
}

.settings-menu.open .settings-panel { display: flex; }

.settings-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--text-2);
  background: none;
  border: none;
  min-height: 42px;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--trans);
}
.settings-item:hover { background: var(--surface2); color: var(--text); }

.settings-item svg,
.settings-item .theme-btn-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  flex-shrink: 0;
}


/* Título de la página (también es el <h1> que lee Google) */
.catalogo-titulo {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 2.6rem);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0 0 1.25rem;
}

/* ── CATÁLOGO: SIDEBAR DE CATEGORÍA + GRILLA ────────────────────── */
.catalogo-layout {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 2rem;
  align-items: start;
}

.catalogo-sidebar { margin-top: 0; } /* arriba de todo, a la par de las fotos (el título ya está arriba) */

.sidebar-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 0.6rem;
}

/* Es un <button> (para poder abrir/cerrar en mobile, ver media query),
   pero en desktop se ve y se comporta como el título de siempre — la
   flechita solo aparece donde realmente hace algo. */
.sidebar-title-trigger {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
  text-align: left;
  font-family: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: default;
}
.sidebar-title-trigger svg { display: none; }

/* En desktop "Marcas" solo vive en la topbar — esta copia (ver
   catalogo.html) es exclusiva de mobile, para quedar a la misma
   altura que "Categoría". */
#marcas-trigger-mobile,
#marcas-panel-mobile {
  display: none;
}

.categoria-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.categoria-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--text-2);
  background: none;
  border: none;
  padding: 0.4rem 0;
  cursor: pointer;
  transition: var(--trans);
}
.categoria-item:hover  { color: var(--primary); }
.categoria-item.active { color: var(--primary); font-weight: 500; }

.categoria-count { font-size: 0.8rem; color: var(--text-3); font-variant-numeric: tabular-nums; }

.categoria-empty {
  font-size: 0.82rem;
  color: var(--text-3);
  list-style: none;
}

@media (max-width: 760px) {
  /* apilado, el gap de columnas pasa a ser vertical: 2rem era demasiado */
  .catalogo-layout { grid-template-columns: 1fr; gap: 1rem; }
  .catalogo-sidebar {
    position: static;
    /* el margin-top grande es para alinear "Categoría" con la grilla
       de al lado en desktop — apilado no hace falta: el margen de abajo
       de la topbar ya separa */
    margin-top: 0.25rem;
    padding-bottom: 1.1rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--border);
  }

  .sidebar-title-trigger {
    cursor: pointer;
    justify-content: space-between;
  }
  .sidebar-title-trigger svg {
    display: block;
    width: 12px;
    height: 12px;
    stroke: currentColor;
    transition: transform 0.2s ease;
  }
  .catalogo-sidebar.open #categoria-trigger svg { transform: rotate(180deg); }

  /* "Marcas" y "Categoría" a la misma altura, uno al lado del otro —
     cada uno abre su propio panel por separado (ver toggleMarcasMobileUI
     / toggleCategoriaSidebarUI en catalogo.js). */
  .filtros-triggers-row {
    display: flex;
    gap: 1.5rem;
  }
  .filtros-triggers-row .sidebar-title-trigger { width: auto; flex: 1; }

  #marcas-trigger-mobile { display: flex; }
  .catalogo-sidebar.marcas-open #marcas-trigger-mobile svg { transform: rotate(180deg); }

  /* El panel de marcas acá va en flujo normal (empuja el contenido de
     abajo), no flotante como en la topbar — ahí depende de :hover, que
     no existe en touch, así que se maneja con el mismo toggle explícito
     que Categoría en vez de esa lógica. */
  #marcas-panel-mobile {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    background: none;
    padding: 0;
    width: 100%;
    max-height: none;
    display: none;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .catalogo-sidebar.marcas-open #marcas-panel-mobile {
    display: flex;
    margin-top: 0.65rem;
  }

  /* Mismo "globito" que las categorías acá al lado (ver .categoria-item
     más abajo) — antes era el link plano del desplegable de desktop,
     que en esta lista de chips se veía deslucido. */
  #marcas-panel-mobile .marcas-item {
    display: block;
    width: auto;
    padding: 0.35rem 0.75rem;
    background: var(--surface2);
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
  }
  #marcas-panel-mobile .marcas-item.active {
    background: var(--primary-soft);
    color: var(--primary);
  }

  /* Arranca cerrada — se abre con toggleCategoriaSidebarUI() (ver
     catalogo.js), igual que el desplegable de Marcas de la topbar. */
  .categoria-list {
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .catalogo-sidebar.open .categoria-list { display: flex; margin-top: 0.65rem; }
  .categoria-item {
    width: auto;
    padding: 0.35rem 0.75rem;
    background: var(--surface2);
    border-radius: var(--radius-pill);
  }
  .categoria-item.active {
    background: var(--primary-soft);
    color: var(--primary);
  }
  .categoria-count { color: inherit; opacity: 0.65; }

  /* el corrido de MARCAS (ver .marcas-menu) es para alinearla con la
     grilla de acá al lado del sidebar — sin sidebar (una sola columna)
     no tiene sentido y solo desacomoda la topbar */
  .marcas-menu { margin-left: 1.5rem; }

  /* La de la topbar ya no hace falta acá: a este ancho "Categoría" ya
     se colapsó a desplegable, y al lado tiene su propia copia de
     "Marcas" (#marcas-trigger-mobile, ver catalogo.html) — mostrar
     las dos sería redundante. */
  .topbar > .marcas-menu { display: none; }
}

/* ── TOOLBAR ─────────────────────────────────────────────────── */
.toolbar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1.25rem;
}

.search-wrap {
  position: relative;
  flex: 1;
  min-width: 180px;
}

.search-wrap svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  stroke: var(--text-3);
  pointer-events: none;
}

.search-wrap input {
  width: 100%;
  min-height: 42px;
  padding: 0.5rem 0.75rem 0.5rem 2.1rem;
  background: var(--surface);
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  color: var(--text);
  transition: var(--trans);
}

.search-wrap input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

select {
  padding: 0.5rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  transition: var(--trans);
}

select:focus { outline: none; border-color: var(--primary); }

/* ── MARCA ACTIVA — remarca qué marca se está mostrando en el
   catálogo, para que no quede escondido dentro del desplegable
   "Marcas" (ver quitarFiltroMarca en catalogo.js). ────────────── */
.marca-activa-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
  font-size: 1rem;
  margin-bottom: 1rem;
}

.marca-activa-quitar {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0.1rem 0.35rem;
  border-radius: 50%;
  transition: var(--trans);
}

.marca-activa-quitar:hover { background: rgba(0,0,0,0.08); }

/* ── PRODUCT GRID ────────────────────────────────────────────── */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 2.25rem 1.25rem;
}

/* En celulares, minmax(196px,1fr) casi siempre termina en 1 sola
   columna (dos no entran en ~375-414px de ancho) — la tarjeta queda
   casi todo el ancho de la pantalla contra una imagen que antes tenía
   alto fijo, así que se veía más "achatada"/recortada que en desktop.
   Se fuerzan 2 columnas más angostas (el aspect-ratio de .prod-thumb
   hace el resto: cada imagen queda más alta que ancha). */
@media (max-width: 560px) {
  .prod-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem 0.75rem;
  }
}

/* ── TARJETA DE PRODUCTO (ver tarjeta-producto.js) ───────────────
   Sin caja ni borde: la foto (que ya viene sobre blanco) va directo
   sobre la página y el texto debajo. Toda la tarjeta es clickeable
   gracias al ::after de .prod-link, que se estira sobre el <article>;
   los botones quedan por encima (z-index) y siguen andando solos. ── */
.prod-card {
  position: relative;
  display: flex;
  flex-direction: column;
  color: inherit;
}

/* Al pasar el cursor: un marco fino avellana (el color del logo)
   alrededor de toda la tarjeta y la foto que se acerca apenas. El
   marco es un ::before que sobresale hacia el espacio entre tarjetas,
   así aparece sin mover nada de lugar. Solo con mouse
   (hover:hover): en el celular un toque no lo deja "pegado". */
.prod-card::before {
  content: '';
  position: absolute;
  inset: -10px;
  border: 1px solid var(--brand);
  border-radius: var(--radius-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.prod-thumb { transition: transform 0.4s ease; }

@media (hover: hover) {
  .prod-card:hover::before { opacity: 1; }
  .prod-card:hover .prod-thumb { transform: scale(1.03); }
}

.prod-media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface2);
}

.prod-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.prod-thumb-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prod-thumb-ph svg {
  width: 32px;
  height: 32px;
  stroke: var(--text-3);
}

.prod-card.no-disponible .prod-media { opacity: 0.5; }

.prod-nuevo {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--primary);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
}

.prod-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: 0.8rem;
}

/* Marca a la izquierda, código a la derecha — el código siempre
   visible (las clientas lo mandan por WhatsApp para consultar). */
.prod-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-3);
  margin-bottom: 0.2rem;
}

.prod-marca {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-2);
}

.prod-id {
  flex-shrink: 0;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.prod-name {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.35;
  margin-bottom: 0.45rem;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.prod-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}
.prod-link::after {
  content: '';
  position: absolute;
  inset: 0;
}
.prod-card:hover .prod-link { color: var(--primary); }

/* El foco de teclado se dibuja alrededor de toda la tarjeta, no solo
   del nombre (que es el link real). */
.prod-link:focus-visible { outline: none; }
.prod-card:has(.prod-link:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.prod-variantes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  font-size: 0.83rem;
  color: var(--text-3);
  margin-bottom: 0.55rem;
}

.prod-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.prod-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(43, 35, 32, 0.2);
  flex-shrink: 0;
}
[data-theme="dark"] .prod-dot { border-color: rgba(255, 255, 255, 0.28); }

.prod-dot-mas { font-size: 0.78rem; margin-left: 1px; }

/* margin-top:auto: los precios (y los botones) de una misma fila
   quedan alineados aunque un nombre ocupe una línea y otro dos. */
.prod-price {
  font-family: var(--font-price);
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 1.15rem;
  color: var(--text);
  margin-top: auto;
  margin-bottom: 0.7rem;
}

.prod-badges {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.prod-actions,
.prod-quickadd {
  position: relative;
  z-index: 1;
}

.prod-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.prod-quickadd { display: flex; }
.prod-quickadd .btn { width: 100%; }

/* En dos columnas de celular "Agregar al carrito" no entra en una
   línea: ahí dice solo "Agregar" (el aria-label sigue completo). */
.prod-quickadd-corto { display: none; }
@media (max-width: 560px) {
  .prod-quickadd-largo { display: none; }
  .prod-quickadd-corto { display: inline; }
  .prod-quickadd .btn  { padding-left: 0.5rem; padding-right: 0.5rem; }
}

/* ── BADGES ──────────────────────────────────────────────────── */
.badge {
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.18rem 0.6rem;
  border-radius: 99px;
}

.badge.stock     { background: var(--green-bg); color: var(--green); }
.badge.nostock   { background: var(--red-bg);   color: var(--red);   }
.badge.marca     { background: var(--surface2); color: var(--text-2); }
.badge.nuevo     { background: var(--primary-soft); color: var(--primary-dark); }
.badge.destacado { background: var(--primary-soft); color: var(--primary-dark); }
.badge.info      { background: var(--blue-bg); color: var(--blue); }

/* ── MODAL ───────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 22, 18, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1rem;
  animation: fadein 0.15s ease;
}

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal {
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  border: 1px solid var(--border-md);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalslideup 0.18s ease;
}

/* Modal de editar/crear producto: mucho más contenido (talles,
   colores, grilla de stock, galería de fotos) que un modal chico —
   layout de 2 columnas (form scrolleable + foto fija a un costado,
   para poder ver el producto y usar el cuentagotas del selector de
   color contra la imagen) con el pie ("Guardar") siempre visible sin
   tener que bajar. Los hijos directos manejan su propio padding
   porque acá arriba queda en 0 (ver .prod-modal-form/.modal-title/
   .modal-footer de acá abajo). */
.prod-modal-grande {
  max-width: 1080px;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.prod-modal-grande .modal-title {
  padding: 1.75rem 2.25rem 0.5rem;
  margin-bottom: 0;
  flex-shrink: 0;
}

.prod-modal-body {
  display: flex;
  gap: 1.75rem;
  flex: 1;
  min-height: 0;
}

.prod-modal-form {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 0.75rem 2.25rem 1.5rem;
}

.prod-modal-preview {
  width: 230px;
  flex-shrink: 0;
  padding: 0.75rem 2.25rem 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.prod-preview-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface2);
}

.prod-preview-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.prod-preview-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prod-preview-ph svg { width: 32px; height: 32px; stroke: var(--text-3); }

.prod-preview-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.prod-preview-flecha:hover { background: rgba(0, 0, 0, 0.65); }
.prod-preview-flecha-izq { left: 6px; }
.prod-preview-flecha-der { right: 6px; }
.prod-preview-flecha svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }

.prod-preview-dots {
  display: flex;
  justify-content: center;
  gap: 0.3rem;
}

.prod-preview-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-md);
  border: none;
  padding: 0;
  cursor: pointer;
}
.prod-preview-dot.activo { background: var(--primary); }

.prod-preview-hint {
  font-size: 0.8rem;
  color: var(--text-3);
  line-height: 1.4;
}

.prod-eyedropper-resultado {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--text-2);
}

.prod-eyedropper-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--border-md);
  flex-shrink: 0;
}

.prod-modal-grande .modal-footer {
  flex-shrink: 0;
  margin-top: 0;
  padding: 1rem 2.25rem;
  background: var(--surface);
}

@media (max-width: 900px) {
  .prod-modal-grande { max-width: 100%; }
  .prod-modal-grande .modal-title { padding: 1.5rem 1.5rem 0.5rem; }
  .prod-modal-body { flex-direction: column; overflow-y: auto; }
  .prod-modal-preview { width: auto; order: -1; padding: 0.5rem 1.5rem 0; }
  .prod-preview-photo { max-width: 220px; margin: 0 auto; }
  .prod-modal-form { overflow-y: visible; padding: 0.5rem 1.5rem 1.5rem; }
  .prod-modal-grande .modal-footer { padding: 1rem 1.5rem; }
}

/* ── GESTOR DE TALLES EN MODAL ───────────────────────────────── */
.talles-manager-section {
  background: var(--surface2);
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  padding: 0.85rem;
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
}

.talles-grid-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  max-height: 180px;
  overflow-y: auto;
  padding-right: 0.2rem;
}

/* ── GALERÍA DE FOTOS EN MODAL ───────────────────────────────── */
.fotos-grid-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 0.2rem;
}

.foto-item-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.5rem;
}

.foto-item-thumb {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--surface2);
  flex-shrink: 0;
}

.foto-item-url {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.talle-item-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.6rem;
  animation: fadein 0.15s ease;
}

/* ── DRAG & DROP — reordenar talles/colores en el modal de edición ── */
.drag-handle {
  cursor: grab;
  color: var(--text-3);
  font-size: 0.95rem;
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
}
.drag-handle:active { cursor: grabbing; }

.talle-item-row.dragging,
.color-item-chip.dragging {
  opacity: 0.4;
}

.talle-tag-badge {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--primary);
  background: var(--primary-soft);
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  min-width: 42px;
  text-align: center;
}

.talle-stock-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

.talle-stock-input-wrap label {
  font-size: 0.82rem;
  color: var(--text-3);
  margin: 0;
}

.talle-stock-input-wrap input {
  width: 65px;
  padding: 0.25rem 0.4rem;
  font-size: 0.82rem;
  text-align: center;
  border-radius: var(--radius-sm);
}

.btn-quitar-talle {
  background: transparent;
  border: none;
  color: var(--red);
  font-size: 0.95rem;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--trans);
  flex-shrink: 0;
}

.btn-quitar-talle:hover {
  background: var(--red-bg);
  transform: scale(1.1);
}

.btn-chip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  padding: 0.18rem 0.55rem;
  color: var(--text-2);
  cursor: pointer;
  transition: var(--trans);
}

.btn-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}

/* ── GESTOR DE COLORES EN MODAL ──────────────────────────────── */
.colores-manager-section {
  background: var(--surface2);
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  padding: 0.85rem;
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
}

.colores-chips-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  min-height: 38px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.6rem;
}

.color-item-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--surface2);
  border: 1px solid var(--border-md);
  border-radius: 99px;
  padding: 0.2rem 0.55rem 0.2rem 0.4rem;
  font-size: 0.8rem;
  color: var(--text);
  animation: fadein 0.15s ease;
}

.color-item-name {
  font-weight: 500;
}

/* Puntito de color editable: el punto que se ve es un <span> común
   (así queda siempre redondo y del tamaño justo, sin pelearse con
   cómo cada navegador dibuja un input[type=color] nativo); el input
   de verdad va encima, invisible, para que el click abra el picker. */
.color-item-swatch-wrap {
  position: relative;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid var(--border-md);
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
}

.color-item-swatch-dot {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.color-item-swatch-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  opacity: 0;
  cursor: pointer;
}

.btn-quitar-color {
  background: transparent;
  border: none;
  color: var(--text-3);
  font-size: 0.8rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: var(--trans);
  line-height: 1;
}

.btn-quitar-color:hover {
  color: var(--red);
  background: var(--red-bg);
}

.color-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.color-dot-sm {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.18);
  display: inline-block;
  flex-shrink: 0;
}

.color-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--border-md);
  flex-shrink: 0;
  display: inline-block;
}

.color-dot-generic {
  background: repeating-linear-gradient(45deg, var(--surface2), var(--surface2) 3px, var(--border-md) 3px, var(--border-md) 4px);
}

@keyframes modalslideup {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── STOCK POR COMBINACIÓN (grilla talle×color) ─────────────────── */
.variantes-grid-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 280px;
  border: 1px solid var(--border-md);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.variantes-grid-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.8rem;
}

.variantes-grid-table th,
.variantes-grid-table td {
  padding: 0.4rem 0.5rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.variantes-grid-table thead th {
  color: var(--text-2);
  font-weight: 500;
  font-size: 0.85rem;
  background: var(--surface2);
}

.variantes-grid-rowhead {
  color: var(--primary);
  font-weight: 600;
  white-space: nowrap;
  background: var(--surface2);
}

.variantes-grid-table tbody tr:last-child td,
.variantes-grid-table tbody tr:last-child th {
  border-bottom: none;
}

.variantes-grid-table td {
  display: table-cell;
}

.variantes-grid-table td > input {
  display: block;
  margin: 0 auto;
}

.variante-stock-input {
  width: 56px;
  padding: 0.25rem 0.3rem;
  font-size: 0.8rem;
  text-align: center;
  border-radius: var(--radius-sm);
}

.variante-precio-input {
  width: 56px;
  margin-top: 0.3rem;
  padding: 0.2rem 0.3rem;
  font-size: 0.82rem;
  text-align: center;
  color: var(--text-2);
  border-radius: var(--radius-sm);
}
.variante-precio-input::placeholder { color: var(--text-3); }

/* ── CARRITO — ícono + badge ─────────────────────────────────── */
#cart-btn { position: relative; }

.cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 99px;
  background: var(--primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
}

/* ── ALERTA DE PEDIDOS (admin) — campanita + badge en la topbar ──
   Inyectada por pedidos-alertas.js, no vive en el HTML de cada
   página. Mismo tamaño que .cart-badge pero en rojo: es una alerta
   ("hay algo por revisar"), no un simple contador informativo. ── */
#pedido-alert-btn { position: relative; }

.alert-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 99px;
  background: var(--red);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
}

/* ── CARRITO — toasts "agregado al carrito" (esquina de la página) ──
   #modal-carrito es el contenedor fijo (una sola vez en la esquina);
   cada aviso agregado es un .carrito-toast independiente que se apila
   dentro con flex-column, para que agregar varios productos seguidos
   los vaya acumulando uno debajo del otro en vez de reemplazarlos. ── */
#modal-carrito {
  position: fixed;
  top: 5.5rem;
  right: 1.25rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  pointer-events: none;
}

.carrito-toast {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  max-width: 340px;
  background: var(--surface);
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  padding: 0.75rem 0.85rem;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.carrito-toast.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* ── AVISO DE PEDIDO NUEVO (admin) — mismo look que .carrito-toast
   (reusa esas clases), pero apilado en un contenedor propio del lado
   opuesto de la pantalla para no mezclarse con los toasts del
   carrito. Inyectado por pedidos-alertas.js. ── */
#pedido-alerta-stack {
  position: fixed;
  top: 5.5rem;
  left: 1.25rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  pointer-events: none;
}

.pedido-alerta-icon {
  background: var(--red-bg);
  color: var(--red);
}

@media (max-width: 480px) {
  #pedido-alerta-stack { left: 1rem; right: 1rem; }
}

.carrito-toast-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--green-bg);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.carrito-toast-body { flex: 1; min-width: 0; }

.carrito-toast-titulo {
  font-size: 0.8rem;
  color: var(--text-3);
}

.carrito-toast-nombre {
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.carrito-toast-cerrar {
  background: transparent;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: 0.85rem;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.carrito-toast-cerrar:hover { color: var(--text); }

@media (max-width: 480px) {
  #modal-carrito { left: 1rem; right: 1rem; }
  .carrito-toast { max-width: none; }
}

/* ── CARRITO — drawer lateral (ícono de la topbar) ───────────────
   Se abre desde cualquier página sin navegar: franja angosta a la
   derecha, alto completo, para ver rápido qué hay en el pedido. ── */
.carrito-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 22, 18, 0.5);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.carrito-drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.carrito-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 100vw);
  background: var(--surface);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.16);
  z-index: 301;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.22s ease;
}

.carrito-drawer.open {
  transform: translateX(0);
}

.carrito-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.carrito-drawer-header h2 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  margin: 0;
}

.carrito-drawer-cerrar {
  background: transparent;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  font-size: 1rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.carrito-drawer-cerrar:hover { background: var(--surface2); }
.carrito-drawer-cerrar:hover { color: var(--text); }

.carrito-drawer-footer {
  flex-shrink: 0;
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid var(--border);
}

.carrito-drawer-botones {
  display: flex;
  gap: 0.6rem;
}

.carrito-drawer-botones .btn { flex: 1; }

body.carrito-drawer-lock { overflow: hidden; }

/* Igual que arriba pero para cualquier modal (.modal-overlay) del
   sitio — ver initModalScrollLock en theme.js. */
body.modal-abierto-lock { overflow: hidden; }

@media (max-width: 480px) {
  .carrito-drawer { width: 100vw; }
}

.carrito-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
}

.carrito-vacio {
  margin: auto;
  text-align: center;
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.5;
}

.carrito-items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.carrito-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.carrito-item-img {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface2);
}

.carrito-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carrito-item-img-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carrito-item-img-ph svg {
  width: 22px;
  height: 22px;
  stroke: var(--text-3);
}

.carrito-item-info { flex: 1; min-width: 0; }

.carrito-item-nombre {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
}

.carrito-item-attrs {
  font-size: 0.85rem;
  color: var(--text-3);
  margin-top: 0.15rem;
}

.carrito-item-precio {
  font-size: 0.87rem;
  color: var(--text-2);
  margin-top: 0.2rem;
}

.carrito-item-qty {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* 34px de círculo visible, pero el área que responde al dedo llega a
   ~44px gracias al ::after (sin agrandar el botón en la fila). */
.btn-qty {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-md);
  background: var(--surface);
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: var(--trans);
}
.btn-qty::after { content: ''; position: absolute; inset: -5px; }
.btn-qty:hover { border-color: var(--primary); color: var(--primary); }

.btn-quitar-item {
  background: transparent;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: 0.9rem;
  flex-shrink: 0;
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
}
.btn-quitar-item:hover { color: var(--red); }

.carrito-footer { margin-top: auto; padding-top: 1rem; }

.carrito-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1rem;
  margin-bottom: 0.6rem;
}

.carrito-total strong {
  font-family: var(--font-price);
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 1.35rem;
  color: var(--text);
}

.carrito-nota {
  font-size: 0.85rem;
  color: var(--text-3);
  line-height: 1.45;
  margin: 0 0 0.85rem;
}

.carrito-btn-full { width: 100%; justify-content: center; }

.carrito-checkout-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
}

.carrito-error {
  font-size: 0.87rem;
  color: var(--red);
  background: var(--red-bg);
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  margin-top: 0.5rem;
}

.carrito-listo {
  max-width: 420px;
  margin: 3rem auto;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
}

.carrito-listo-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--green-bg);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin: 0 auto 1.25rem;
}

.carrito-listo p {
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 1.5rem;
}

/* ── SELECTOR DE COMPRA (página de producto) ─────────────────── */
.selector-compra { margin: 1rem 0; }

/* Vive acá (no en producto.css) porque catalogo.html no carga
   producto.css y el modal de editar producto también usa estos chips. */
.attr-tag {
  font-size: 0.87rem;
  color: var(--text-2);
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 0.22rem 0.7rem;
  border-radius: 99px;
}

#categoria-chips-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.selector-chip {
  cursor: pointer;
  transition: var(--trans);
}

.selector-chip.selected {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}

.selector-compra-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1rem;
}

.qty-stepper {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
  min-width: 60px;
  justify-content: center;
}

.modal-title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modal-title svg {
  width: 18px;
  height: 18px;
  stroke: var(--text-2);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
}

/* ── EMPTY STATE ─────────────────────────────────────────────── */
.empty {
  text-align: center;
  padding: 3.5rem 1rem;
  color: var(--text-3);
  font-size: 0.95rem;
}

.empty svg {
  width: 36px;
  height: 36px;
  stroke: var(--text-3);
  margin: 0 auto 0.75rem;
  display: block;
}

/* ── BADGE DE ROL (topbar) ────────────────────────────────────── */
.role-badge {
  font-size: .8rem;
  font-weight: 500;
  padding: .2rem .7rem;
  border-radius: 99px;
}

.role-badge.admin {
  background: var(--primary-soft);
  color: var(--primary-dark);
}

.role-badge.guest {
  display: none; /* el "Invitado" no aporta nada al cliente — solo queda el de Admin */
}

/* ── BOTONES DE ACCIÓN EN TOPBAR (cuenta / logout) ──────────────── */
.logout-btn {
  color: var(--text-3) !important;
}
.logout-btn:hover {
  color: var(--red) !important;
  background: var(--red-bg) !important;
}

/* ── MODO INVITADO — ocultar acciones de edición vía CSS también ── */
[data-role="guest"] .prod-actions,
[data-role="guest"] .toolbar .btn.primary,
[data-role="guest"] #filtro-stock,
[data-role="guest"] #filtro-disponible,
[data-role="guest"] .admin-only-link {
  display: none !important;
}

/* Para el invitado la barra de filtros del catálogo queda vacía (todo lo
   de adentro es de admin), pero igual ocupaba su margen de abajo. */
[data-role="guest"] .catalogo-layout .toolbar { display: none; }

/* ── FOOTER COMPARTIDO (footer.js) ──────────────────────────────
   Fondo en --primary-soft ("Natural", el tinte nude de la paleta):
   con la página en blanco, es lo que marca el final del sitio. ── */
.site-footer {
  background: var(--primary-soft);
  color: var(--text);
  margin-top: 5rem;
}

/* Grilla (no flex-wrap): en anchos intermedios las 4 columnas pasan a
   2×2 parejas, en vez de dejar "Atención" sola en una segunda fila. */
.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 3rem 1.5rem 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 2rem 2.5rem;
}

.footer-brand { max-width: 260px; }

.footer-logo {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--brand);
}

.footer-tagline {
  margin: 0.35rem 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--text-2);
  line-height: 1.5;
}

.footer-col { min-width: 150px; }

.footer-col-title {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.6rem;
}

/* min-height 32px: cada link se puede tocar sin pegarle al de al lado */
.footer-col a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 32px;
  font-size: 0.9rem;
  color: var(--text-2);
  text-decoration: none;
  margin-bottom: 0.15rem;
  transition: var(--trans);
}

.footer-col a:last-child { margin-bottom: 0; }
.footer-col a:hover { color: var(--primary); }

.footer-col a svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
}

.footer-col p {
  font-size: 0.9rem;
  color: var(--text-2);
  margin: 0 0 0.3rem;
  line-height: 1.5;
}
.footer-col p:last-child { margin-bottom: 0; }

.footer-bottom {
  border-top: 1px solid var(--border-md);
  padding: 1rem 1.5rem 1.5rem;
  max-width: 1160px;
  margin: 0 auto;
  font-size: 0.8rem;
  color: var(--text-2);
}

.footer-bottom a {
  margin-left: 0.75rem;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-bottom a:hover { color: var(--primary); }

@media (max-width: 640px) {
  .footer-inner { padding: 2.5rem 1.25rem 1.5rem; gap: 1.75rem; text-align: center; }
  /* .footer-brand no entra en ".footer-col" (es una clase aparte) —
     sin width:100% queda angosta (el ancho de "SoleMio") y el
     text-align:center de acá arriba no tiene margen para centrar
     nada, por eso se veía pegada a la izquierda mientras el resto sí
     se centraba. El max-width:260px de desktop (ver más arriba) sigue
     ganándole al width:100% de acá si no se anula también: el cuadro
     quedaba topeado en 260px y, al ser un solo ítem en su fila del
     flex, ese cuadro angosto se iba entero a la izquierda aunque el
     texto de adentro sí quedara centrado dentro de él. */
  .footer-brand,
  .footer-col { min-width: 0; width: 100%; }
  .footer-brand { max-width: none; }
  .footer-col a { justify-content: center; }
  .footer-bottom { padding: 1rem 1.25rem 1.5rem; text-align: center; }
}

/* ── RESPONSIVE: MOBILE ──────────────────────────────────────── */
@media (max-width: 640px) {
  /* OJO: overflow-x:hidden en "body" (no solo en "html") rompe
     position:sticky de la topbar en mobile — body pasa a ser su
     propio contenedor de scroll y la topbar deja de pegarse al
     viewport real. Con "html" alcanza para evitar el scroll
     horizontal sin perder el sticky. */
  html { overflow-x: hidden; }

  .shell { padding: 0 1rem; }

  /* Grid en vez de flex-wrap: así el logo se puede centrar de verdad
     (columna del medio "1fr", el resto ocupa lo que necesite a los
     costados) en lugar de depender del orden y ancho relativo de
     flex-wrap, que además complicaba el desplegable de Inicio/
     Catálogo/etc. como fila propia. */
  .topbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "hamburger logo icons"
      "search    search search";
    align-items: center;
    row-gap: 0.65rem;
    padding: 1rem 0;
  }

  .hamburger-btn { display: flex; grid-area: hamburger; }

  /* Centrado absoluto (no "justify-self:center" en la columna del
     medio): la hamburguesa (34px) y el grupo de íconos (bastante más
     ancho, son 3 botones) no pesan lo mismo, así que la columna
     central del grid quedaba corrida hacia la izquierda en vez de
     quedar realmente centrada en la pantalla. */
  .logo {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    height: 38px; /* = alto de los botones redondos, para quedar centrado con ellos */
    display: flex;
    align-items: center;
    margin: 0;
    justify-content: center;
    max-width: var(--logo-max, 50%); /* lo calcula ajustarTopbar() en topbar.js */
  }
  .logo-link { max-width: 100%; }
  .logo-img  { height: auto; max-height: 28px; max-width: 100%; }

  .topbar-search { grid-area: search; width: 100%; }

  /* Inicio/Catálogo/Mis pedidos/Contacto ya no ocupan su propia fila
     fija: quedan ocultos hasta que se abre la hamburguesa, y ahí se
     muestran como desplegable debajo de toda la topbar. */
  .topbar-nav { display: none; }

  .topbar-nav.mobile-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: var(--shadow-pop);
    padding: 0.4rem 1.25rem 0.75rem;
    gap: 0;
    z-index: 25;
  }

  .topbar-nav.mobile-open a {
    padding: 0.7rem 0.15rem;
    border-bottom: 1px solid var(--border);
  }
  .topbar-nav.mobile-open a:last-child { border-bottom: none; }

  /* El menú de opciones (tema/cuenta/salir, ver .settings-menu más
     arriba, fuera de este media query) queda igual que en desktop —
     no hace falta nada especial para él acá abajo. */

  .topbar-icons {
    grid-area: icons;
    margin-left: 0;
    margin-right: 0; /* en mobile no sangra hasta el borde: se ve muy pegado */
    gap: 0.4rem;
  }

  .icon-btn,
  .hamburger-btn {
    width: 38px;
    height: 38px;
  }

  .role-badge {
    display: none;          /* no crítico en mobile, libera espacio */
  }

  /* Panel de marcas: con 6 columnas fijas (ver .marcas-panel arriba)
     cada una quedaba de ~50px de ancho en mobile — el nombre de la
     marca terminaba partido letra por letra, casi vertical. */
  .marcas-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(400px, calc(100vw - 2rem));
    gap: 0.3rem 1.25rem;
  }
}

/* ── BARRA COMPRIMIDA (tablets / notebooks chicas) ──────────────
   Clases que pone ajustarTopbar() (topbar.js) solo cuando el contenido
   de la barra no entra en el ancho disponible, por encima de 640px. */
.topbar-nav a { white-space: nowrap; } /* "Mis pedidos" en una línea: si no entra, se colapsa */

.topbar.nav-colapsada .hamburger-btn {
  display: flex;
  flex-shrink: 0;
  margin-left: calc(-1 * var(--topbar-sangria));
}
.topbar.nav-colapsada .logo        { margin-left: 0; }
.topbar.nav-colapsada .topbar-nav  { display: none; }
.topbar.nav-colapsada .topbar-icons { margin-left: auto; }

.topbar.nav-colapsada .topbar-nav.mobile-open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: calc(100% - 0.5rem);
  left: calc(-1 * var(--topbar-sangria));
  min-width: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  padding: 0.4rem 1.25rem 0.6rem;
  gap: 0;
  margin: 0;
  z-index: 25;
}
.topbar.nav-colapsada .topbar-nav.mobile-open a {
  padding: 0.7rem 0.15rem;
  border-bottom: 1px solid var(--border);
}
.topbar.nav-colapsada .topbar-nav.mobile-open a:last-child { border-bottom: none; }

.topbar.sin-badge .role-badge { display: none; }
.topbar.ajustada                  { gap: 0.75rem; }
.topbar.ajustada .topbar-search   { min-width: 100px; }

/* ── ESCALA 125% EN COMPU ─────────────────────────────────────── */
/* Acompaña el font-size de 18.75px de shared.css: los anchos en px
   no escalan con rem, así que se agrandan a mano en la misma proporción. */
@media (min-width: 1024px) {
  :root              { --shell-max: 1350px; }
  .prod-modal-grande { max-width: 1350px; }
  .footer-inner,
  .footer-bottom     { max-width: 1450px; }
  .catalogo-layout   { grid-template-columns: 212px 1fr; }
  /* Tarjetas más grandes: con el ancho de arriba entran 4 por fila
     (antes 5 más chicas) */
  .prod-grid         { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* La columna de categorías empuja la grilla a la derecha. En pantallas
   bien anchas sobra margen a los costados del .shell, así que la columna
   sale hacia ese margen izquierdo (como el logo en la topbar) y los
   productos ocupan todo el ancho, centrados en la página. */
@media (min-width: 1860px) {
  /* min-height: la columna ya no ocupa lugar, que una búsqueda sin
     resultados no deje al footer subir y pisarla */
  .catalogo-layout   { display: block; position: relative; min-height: 28rem; }
  /* Tope de ancho para que las 4 tarjetas no queden gigantes (~280px c/u);
     centrado, así la columna de categorías sigue pegada al borde izquierdo */
  .catalogo-layout   { max-width: 1176px; margin: 0 auto; }
  .catalogo-sidebar  {
    position: absolute;
    top: 0;
    right: 100%;
    width: 212px;
    margin-right: 2rem;
  }
  /* Con todo el ancho entrarían 5 — siempre 4 por fila, más grandes */
  .prod-grid         { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}