/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Paleta del storefront: tema claro cerrado a tres colores — blanco (#fff)
   de fondo, #222 para texto, bordes y acento, y gris #727272 para detalles.
   No se agregan grises intermedios: las superficies se separan con borde, no
   con tono, y el estado "seleccionado" se marca con font-weight 600 + un
   borde 1px más grueso (.is-selected-ring abajo), no con relleno de color.
   Solo se usa en selectores explícitos del catálogo/wishlist/modal y el login
   del admin; el resto de las páginas internas (layout "internal") usa colores
   café en hex literal, sin relación con estas variables. */
:root {
  --bg: #fff;
  --surface: #fff;
  --surface-alt: #fff;
  --border: #222;
  --border-soft: #727272;
  --text: #222;
  --text-muted: #727272;
  --accent: #222;
  --accent-hover: #727272;
  --on-accent: #fff;
  /* Segundo pixel del borde de un elemento seleccionado: va como sombra
     interna para que la pill no cambie de tamaño al marcarse. */
  --selected-ring: inset 0 0 0 1px var(--accent);
  /* Fondo de overlays (modal, panel, selector): #222 translúcido. */
  --backdrop: rgba(34, 34, 34, 0.5);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
}

a {
  color: inherit;
  text-decoration: none;
}

.products-page,
.product-page,
.stores-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}

/* Solo .products-page/.product-page (catálogo y detalle de producto) — no el
   selector compartido de arriba, para no tocar .stores-page (fuera de
   alcance de este rediseño). El box-shadow con spread de 100vmax + clip-path
   es el truco de "fondo full-bleed sin marcado extra": .products-page sigue
   con max-width:1200px (heredado del selector compartido de arriba), pero el
   fondo se pinta más allá de esa caja, a los costados de la columna centrada. */
.products-page,
.product-page {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  box-shadow: 0 0 0 100vmax var(--bg);
  clip-path: inset(0 -100vmax);
}

.products-page h1,
.stores-page h1 {
  margin-bottom: 24px;
}

.site-header {
  position: relative;
  z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid var(--border-soft);
}

.site-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Logo centrado: tres columnas, las de los costados iguales (1fr), así el
   logo queda al medio del header sin importar el ancho de la nav. En móvil
   (≤600px) no cabe logo centrado + nav en una fila, y vuelve al flex de
   arriba (logo a la izquierda, nav a la derecha). */
@media (min-width: 601px) {
  .site-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .site-header__brand {
    grid-column: 2;
  }

  .site-header__inner .site-nav {
    grid-column: 3;
    justify-self: end;
  }
}

.site-header__brand {
  display: flex;
  align-items: center;
}

.site-header__logo {
  height: 56px;
  width: auto;
  display: block;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.9rem;
}

.user-menu {
  position: relative;
}

.user-menu__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  list-style: none;
  transition: color 0.15s ease;
}

.user-menu__avatar::-webkit-details-marker {
  display: none;
}

.user-menu__avatar:hover,
.user-menu[open] .user-menu__avatar {
  color: var(--text);
}

.user-menu__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  min-width: 180px;
  padding: 6px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.user-menu__name {
  padding: 8px 10px;
  font-size: 0.8rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu__form {
  display: block;
}

.user-menu__item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  color: var(--text);
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.user-menu__item:hover {
  font-weight: 600;
}

.site-nav a {
  color: var(--text-muted);
}

.site-nav a:hover {
  color: var(--text);
}

@media (max-width: 600px) {
  .site-header__inner {
    padding: 10px 20px;
    gap: 10px;
  }

  .site-header__logo {
    height: 34px;
  }
}

.product-search {
  margin-bottom: 24px;
}

/* Buscador de línea: sin caja, sólo el borde inferior, con la lupa a la
   derecha tras un separador vertical (.product-search__icon), como el logo. */
.product-search__input {
  width: 100%;
  max-width: 400px;
  min-width: 0;
  padding: 5px 0;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  outline: none;
}

.product-search__icon {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  padding-left: 10px;
  color: var(--text);
  border-left: 1px solid var(--border);
  pointer-events: none;
}

.product-search__icon svg {
  display: block;
}

.product-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* Contenedor del input + la cruz que borra la búsqueda (search#clearQuery).
   El max-width vive acá y no en el input para que la cruz quede sobre la
   línea del input, a la izquierda del separador de la lupa. La cruz se oculta mientras el input está vacío. */
.product-search__field {
  position: relative;
  display: block;
  width: 100%;
  max-width: 400px;
  min-width: 0;
}

.product-search__field .product-search__input {
  max-width: none;
  padding-right: 68px;
}

.product-search__clear {
  position: absolute;
  top: 50%;
  right: 36px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.product-search__clear:hover,
.product-search__clear:focus-visible {
  color: var(--text);
}

.product-search__clear:focus-visible {
  outline: 2px solid var(--accent);
}

.product-search__input:placeholder-shown + .product-search__clear {
  display: none;
}

.product-search__input::placeholder {
  color: var(--text);
}

/* Foco: la línea pasa a 2px, sin mover el texto. */
.product-search__input:focus {
  box-shadow: inset 0 -1px 0 var(--accent);
}

.product-search__empty {
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
   Barra de filtros de categorías: fila horizontal de pills debajo del
   buscador, siempre en línea (sin drawer). Al marcar una categoría con
   subcategorías (search_controller.js#showSubgroup), aparece a su lado el
   desplegable "Tipo" (.category-type-filter, oculto con [hidden] por defecto)
   con las subcategorías y un "Ver todo" que vuelve a la categoría completa. El listado
   (_category_filters partial) vive una sola vez en el DOM; .products-filter-form
   y .products-results son display:contents para que sus hijos entren directo
   como celdas de esta grilla, sin importar el orden real en el documento.
   --------------------------------------------------------------------------- */
.products-catalog {
  /* Menos aire entre el header y el buscador que el padding de .products-page. */
  padding-top: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "search"
    "pills"
    "facets"
    "count"
    "grid";
  /* Apretado entre buscador, filtros y filas de pills; el contador suma su
     propio margin-top para separar los resultados de los filtros. */
  row-gap: 8px;
  align-items: start;
}

.products-filter-form {
  display: contents;
}

.products-results {
  display: contents;
}

.products-catalog .product-search {
  grid-area: search;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-bottom: 0;
}

/* El buscador ocupa la fila completa; los filtros van en la siguiente. */
.products-catalog .product-search__field {
  flex: 1 1 100%;
  max-width: none;
}

/* En escritorio el buscador (ancho acotado) y la fila de marca/precio/ordenar/
   "Limpiar" comparten línea, todo alineado a la izquierda. */
@media (min-width: 640px) {
  .products-catalog .product-search {
    flex-wrap: nowrap;
    column-gap: 32px;
  }

  .products-catalog .product-search__field {
    flex: 0 1 520px;
  }
}

/* Fila de marca + precio + ordenar + "Limpiar" (products/index), debajo del
   buscador: cada control a su ancho natural (texto + flecha pegada),
   alineados a la izquierda (el resto de la fila queda libre). En un teléfono
   angosto las columnas se encogen (minmax(0, …)) y una marca elegida de
   nombre largo se corta con "…". Las pills son más chicas que las de
   categorías (.category-filter-pill: 13px en 700, sin borde). */
.product-search__filters {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, max-content));
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.product-search .product-search__filters .ts-control,
.product-search__filters .price-filter__toggle,
.product-search__filters .sort-filter__toggle {
  gap: 6px;
  padding: 4px 12px;
  font-size: 0.8rem;
}

/* La flecha va en el flujo, justo después del texto (no anclada al borde
   derecho del control). */
.product-search .product-search__filters .ts-control::after,
.product-search__filters .price-filter__toggle::after,
.product-search__filters .sort-filter__toggle::after {
  position: static;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  transform: translateY(-2px) rotate(45deg);
}

.product-search__filters .price-filter[open] .price-filter__toggle::after {
  transform: translateY(2px) rotate(-135deg);
}

.product-search .product-search__filters .ts-control .item {
  min-width: 0;
}

/* "Marca" abre la fila sin sangría, alineada con "Buscar" y la grilla (las
   pills no tienen fondo ni borde, así que el padding izquierdo sólo corría el texto). */
.product-search .product-search__filters > .ts-wrapper .ts-control {
  padding-left: 0;
}

.product-search__filters .price-filter__count {
  min-width: 16px;
  padding: 0 5px;
  font-size: 0.7rem;
  line-height: 16px;
}

/* "Limpiar" (products/index, search#clearAll): botón secundario, sin
   relleno ni borde, mismo alto que las pills de la fila; borra todos los filtros. */
.product-search__reset {
  padding: 4px 12px;
  font: inherit;
  font-size: 0.8rem;
  line-height: inherit;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  text-underline-offset: 4px;
  cursor: pointer;
  white-space: nowrap;
  align-self: stretch;
}

.product-search__reset:hover,
.product-search__reset:focus-visible {
  color: var(--text);
  text-decoration: underline;
  outline: none;
}

/* El panel de precio se ancla a toda la fila de filtros (no al botón, que es
   angosto y queda al medio): .price-filter deja de ser el contenedor
   posicionado. */
.product-search__filters .price-filter {
  position: static;
}

.product-search__filters .price-filter__panel {
  left: 0;
  width: auto;
}

.product-search .product-search__filters .ts-wrapper,
.product-search__filters .price-filter {
  min-width: 0;
}

/* Select de marca (store_select_controller.js): Tom Select envuelve el
   <select> y genera .ts-wrapper/.ts-control/.ts-dropdown. No se usa el CSS
   del paquete (vive en node_modules, fuera de Propshaft): lo mínimo va acá con
   los tokens del tema. El control va sin borde, como el resto de la fila. */
.product-search .ts-wrapper {
  position: relative;
  flex: 0 1 220px;
  min-width: 160px;
}

.ts-hidden-accessible {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  padding: 0 !important;
}

.product-search .ts-control {
  display: flex;
  align-items: center;
  padding: 10px 36px 10px 16px;
  font-size: 0.95rem;
  color: var(--text);
  background: transparent;
  border: 0;
  cursor: pointer;
  position: relative;
  text-underline-offset: 4px;
}

.product-search .ts-control::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: translateY(-70%) rotate(45deg);
}

.product-search .ts-wrapper.focus .ts-control,
.product-search .ts-wrapper.dropdown-active .ts-control {
  text-decoration: underline;
}

/* Marca elegida: el <select> original (oculto, hermano previo del wrapper)
   tiene una opción con valor marcada. No sirve .has-items de Tom Select,
   porque con allowEmptyOption la opción vacía "Marca" también cuenta. */
.product-search .product-search__store:has(option:checked:not([value=""])) + .ts-wrapper .ts-control {
  font-weight: 600;
  text-decoration: underline;
}

.product-search .ts-control .item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-search .ts-control .items-placeholder {
  display: none;
}

.product-search .ts-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

/* Buscador dentro del desplegable: misma línea inferior que el buscador
   principal (.product-search__input), sin caja. */
.product-search .dropdown-input-wrap {
  padding: 10px 14px 4px;
}

.product-search .dropdown-input {
  width: 100%;
  padding: 4px 0;
  font: inherit;
  font-size: 0.8rem;
  color: var(--text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  outline: none;
}

.product-search .dropdown-input::placeholder {
  color: var(--text-muted);
}

.product-search .dropdown-input:focus {
  box-shadow: inset 0 -1px 0 var(--accent);
}

.product-search .ts-dropdown-content {
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 0;
}

.product-search .ts-dropdown-content,
.price-filter__panel,
.category-type-filter__panel {
  scrollbar-width: thin;
  scrollbar-color: var(--text-muted) transparent;
}

.product-search .ts-dropdown .option,
.product-search .ts-dropdown .no-results {
  padding: 6px 14px;
  font-size: 0.8rem;
  color: var(--text);
  cursor: pointer;
  text-underline-offset: 3px;
}

.product-search .ts-dropdown .no-results {
  color: var(--text-muted);
  cursor: default;
}

/* Elegida = 600; la resaltada (mouse o flechas del teclado) se subraya,
   igual que las opciones de Precio/Tipo, sin relleno negro. */
.product-search .ts-dropdown .option.selected {
  font-weight: 600;
}

.product-search .ts-dropdown .option.active {
  text-decoration: underline;
}

/* Desplegable "Precio" (products/_price_filter.html.slim): un <details> con
   checkboxes. El <summary> imita el .ts-control del select de marca y el panel
   su .ts-dropdown, con los mismos tokens. */
.price-filter {
  position: relative;
  flex: 0 0 auto;
}

.price-filter__toggle,
.sort-filter__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 36px 10px 16px;
  font-size: 0.95rem;
  color: var(--text);
  background: transparent;
  border: 0;
  cursor: pointer;
  list-style: none;
  position: relative;
  user-select: none;
  text-underline-offset: 4px;
}

.price-filter__toggle::-webkit-details-marker {
  display: none;
}

.price-filter__toggle::after,
.sort-filter__toggle::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: translateY(-70%) rotate(45deg);
}

.price-filter[open] .price-filter__toggle,
.price-filter__toggle:focus-visible,
.price-filter:not(.sort-filter):has(.price-filter__input:checked) .price-filter__toggle {
  text-decoration: underline;
  outline: none;
}

/* Precio con rangos marcados (Ordenar siempre tiene un radio marcado, así
   que se excluye: se marca sólo con .sort-filter--active, abajo). */
.price-filter:not(.sort-filter):has(.price-filter__input:checked) .price-filter__toggle {
  font-weight: 600;
}

.price-filter[open] .price-filter__toggle::after {
  transform: translateY(-30%) rotate(-135deg);
}

/* "Ordenar" (products/_sort_filter.html.slim): reutiliza el desplegable de
   precio; con un orden distinto del default el botón queda con el acento. */
.sort-filter__toggle {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
}

.sort-filter--active .sort-filter__toggle {
  font-weight: 600;
  text-decoration: underline;
}

.price-filter__count {
  min-width: 20px;
  padding: 1px 6px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 999px;
}

.price-filter__count[hidden] {
  display: none;
}

.price-filter__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  width: 260px;
  max-height: 360px;
  overflow-y: auto;
  padding: 4px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.price-filter__option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 0.8rem;
  color: var(--text);
  cursor: pointer;
}

.price-filter__option:has(input:checked) {
  font-weight: 600;
}

.price-filter__option:hover {
  text-decoration: underline;
}

.price-filter__input {
  width: 14px;
  height: 14px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.price-filter__clear {
  display: block;
  margin: 2px 0 4px;
  padding: 6px 14px;
  font: inherit;
  font-size: 0.8rem;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-underline-offset: 3px;
}

.price-filter__clear:hover {
  color: var(--text);
  text-decoration: underline;
}

/* Sin uso por ahora: el span se sacó del lado del buscador y falta decidir
   dónde va. Icono del sitio como indicador de carga. Se pinta con mask + background
   en vez de recolorear el PNG, así el blanco del icono pasa a ser --accent y
   sigue cualquier cambio futuro de esa variable. Pulsa solo mientras Turbo
   marca el frame de resultados como [busy] (búsqueda, pills de categoría,
   facetas: todo lo que hace requestSubmit() al form); fijo el resto del tiempo. */
.product-search__loader {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  background-color: var(--accent);
  -webkit-mask: url("/assets/loader-icon-83893c19.png") center / contain no-repeat;
  mask: url("/assets/loader-icon-83893c19.png") center / contain no-repeat;
}

.products-catalog:has(#products_grid[busy]) .product-search__loader {
  animation: product-search-pulse 0.9s ease-in-out infinite alternate;
}

@keyframes product-search-pulse {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0.45; transform: scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
  @keyframes product-search-pulse {
    from { opacity: 1; }
    to { opacity: 0.45; }
  }
}

.products-page__count {
  grid-area: count;
  margin: 8px 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.products-catalog .product-grid,
.products-catalog .product-search__empty {
  grid-area: grid;
}

.site-nav .wishlist-toggle {
  flex-shrink: 0;
  white-space: nowrap;
}

.category-filter-pills {
  grid-area: pills;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.category-filter-pills::-webkit-scrollbar {
  display: none;
}

/* En escritorio no queremos el scrollbar horizontal (se ve como una barra
   nativa fea al no caber todas las categorías): se envuelve en varias filas
   en vez de scrollear. En mobile se deja el scroll de una sola fila — es un
   patrón esperado ahí y no hay espacio horizontal para envolver sin que cada
   fila quede casi vacía. */
@media (min-width: 640px) {
  .category-filter-pills {
    flex-wrap: wrap;
    overflow-x: visible;
    padding-bottom: 0;
  }
}

/* Con una categoría activa sólo quedan su pill y el "Tipo": se quita el
   scroll horizontal de la fila para que el panel del desplegable no quede
   recortado por el overflow. */
.category-filter-pills:has(.category-filter-pill__input:checked, .category-filter-pill--active-group) {
  overflow: visible;
}

/* Desplegable "Tipo" (subcategorías) junto a la pill de la categoría activa:
   el <summary> se ve como .category-filter-pill con un chevron, y el panel
   copia el del filtro de precio. */
.category-type-filter {
  position: relative;
  flex-shrink: 0;
}

.category-type-filter[hidden] {
  display: none;
}

.category-type-filter__toggle,
.category-filters-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 30px 4px 12px;
  font-size: 0.85rem;
  white-space: nowrap;
  color: var(--text);
  background: transparent;
  border: 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
  text-underline-offset: 4px;
}

/* "Filtros" (muestra las facetas de atributo): mismo look, con ícono en vez
   de chevron. Oculto hasta que hay una categoría activa (las facetas sólo
   existen con categoría; "Sin categoría" no tiene data-category-slug). */
.category-filters-toggle {
  display: none;
  padding-right: 12px;
  font: inherit;
  font-size: 0.85rem;
}

.category-filter-pills:has(.category-filter-pill__input[data-category-slug]:checked, .category-filter-pill--active-group) > .category-filters-toggle {
  display: inline-flex;
  flex-shrink: 0;
}

.category-filters-toggle:focus-visible,
.products-catalog--filters-open .category-filters-toggle,
.products-catalog:has(.attribute-facet-pill__input:checked) .category-filters-toggle {
  font-weight: 600;
  text-decoration: underline;
  outline: none;
}

.category-type-filter__toggle::-webkit-details-marker {
  display: none;
}

.category-type-filter__toggle::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: translateY(-70%) rotate(45deg);
}

.category-type-filter__toggle:focus-visible,
.category-type-filter[open] .category-type-filter__toggle,
.category-type-filter:has(.category-type-filter__input:checked) .category-type-filter__toggle {
  font-weight: 600;
  text-decoration: underline;
  outline: none;
}

.category-type-filter[open] .category-type-filter__toggle::after {
  transform: translateY(-30%) rotate(-135deg);
}

.category-type-filter__count {
  min-width: 20px;
  padding: 1px 6px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 999px;
}

.category-type-filter__count[hidden] {
  display: none;
}

.category-type-filter__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  width: 240px;
  max-height: 360px;
  overflow-y: auto;
  padding: 4px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.category-type-filter__option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 0.8rem;
  color: var(--text);
  cursor: pointer;
}

.category-type-filter__option:has(input:checked) {
  font-weight: 600;
}

.category-type-filter__option:hover {
  text-decoration: underline;
}

.category-type-filter__input {
  width: 14px;
  height: 14px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.category-type-filter__reset {
  display: block;
  margin: 2px 0 4px;
  padding: 6px 14px;
  font: inherit;
  font-size: 0.8rem;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-underline-offset: 3px;
}

.category-type-filter__reset:hover {
  color: var(--text);
  text-decoration: underline;
}

/* Pill base: usada tanto por <label> (categorías, con checkbox real cubriendo
   todo el área clickeable) como por <button> ("Todo" / "Ver todo", sin
   checkbox). El checkbox se dibuja invisible pero ocupa toda la pill
   (position:absolute; inset:0; opacity:0), así que no hace falta un ícono de
   check dibujado a mano — el estado "marcado" se resuelve en :has(). */
.category-filter-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 4px 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-underline-offset: 4px;
  transition: color 0.15s ease;
}

.category-filter-pill:hover {
  color: var(--text-muted);
}

/* La primera pill visible ("Todo", o la categoría activa cuando las demás se
   ocultan) va sin sangría, alineada con el buscador y la grilla. */
.category-filter-pills > .category-filter-pill:first-child,
.category-filter-pills:has(.category-filter-pill__input:checked, .category-filter-pill--active-group)
  > .category-filter-pill:is(:has(.category-filter-pill__input:checked), .category-filter-pill--active-group) {
  padding-left: 0;
}

.category-filter-pill__input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* La pill de una categoría top-level se ve "activa" tanto si su propio
   checkbox está marcado como si no lo está pero se está navegando dentro de
   ella (una subcategoría suya marcada — ver .category-filter-pill--active-group
   y search_controller.js#syncGroupActive). El checkbox del padre se
   desmarca al elegir una subcategoría puntual (si no, Category#self_and_subcategory_ids
   ya lo cubriría todo y la subcategoría no filtraría nada), pero
   visualmente sigue viéndose seleccionado. Sin borde: la activa se subraya. */
.category-filter-pill:has(.category-filter-pill__input:checked),
.category-filter-pill--active-group {
  color: var(--text);
  text-decoration: underline;
}

/* Con una categoría seleccionada (marcada, o navegando una subcategoría suya),
   esa pill queda como la única de la fila: se ocultan las demás, incluida
   "Todo". Al deseleccionarla, el :has() deja de calzar y vuelven todas. */
.category-filter-pills:has(.category-filter-pill__input:checked, .category-filter-pill--active-group)
  > .category-filter-pill:not(:has(.category-filter-pill__input:checked)):not(.category-filter-pill--active-group) {
  display: none;
}

/* Barra resumen de filtros (_filter_summary.html.slim): fija arriba, entra
   deslizándose cuando el buscador y las pills ya salieron de la vista
   (filter_summary_controller.js pone --visible). Una sola fila de pills con
   scroll horizontal sin barra visible, en todos los anchos. Toda la barra es
   un botón que vuelve a los filtros. z-index sobre .site-header (30) y bajo
   back-to-top (90) y los modales (100+). */
.filter-summary {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.filter-summary--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.filter-summary--instant {
  transition: none;
}

.filter-summary__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 20px;
}

.filter-summary__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.filter-summary__toggle--open {
  box-shadow: var(--selected-ring);
}

.filter-summary__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  overflow-x: auto;
  scrollbar-width: none;
}

.filter-summary__bar::-webkit-scrollbar {
  display: none;
}

.filter-summary__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 0.8rem;
  white-space: nowrap;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 999px;
}

.filter-summary__pill--category {
  font-weight: 600;
  box-shadow: var(--selected-ring);
}

.filter-summary__pill .attribute-swatch {
  margin-right: 2px;
}

.filter-summary__separator {
  flex-shrink: 0;
  color: var(--text-muted);
}

/* Filtros desplegados desde la barra resumen (filter_summary_controller.js
   pone --filters-floating en .products-catalog): el form deja de ser
   display:contents y pasa a ser un panel fijo justo bajo la barra, con el
   buscador y las pills dentro; las facetas (si "Filtros" está abierto) flotan
   debajo de él. El controller compensa el scroll al sacarlos del flujo, así
   la grilla no se mueve: sólo se ve el panel desplegarse desde la barra. */
.products-catalog--filters-floating .products-filter-form,
.products-catalog--filters-floating.products-catalog--filters-open .attribute-facets {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 39;
  margin: 0;
  padding: 12px max(20px, calc((100vw - 1160px) / 2));
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  animation: filters-drop 0.22s ease-out;
}

.products-catalog--filters-floating .products-filter-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  top: var(--filter-summary-height, 52px);
}

.products-catalog--filters-floating.products-catalog--filters-open .attribute-facets {
  top: calc(var(--filter-summary-height, 52px) + var(--floating-filters-height, 0px));
  max-height: calc(100vh - var(--filter-summary-height, 52px) - var(--floating-filters-height, 0px));
  overflow-y: auto;
  padding-top: 0;
}

.products-catalog--filters-closing .products-filter-form,
.products-catalog--filters-closing.products-catalog--filters-open .attribute-facets {
  animation: filters-fold 0.18s ease-in forwards;
}

@keyframes filters-drop {
  from {
    clip-path: inset(0 0 100% 0);
    transform: translateY(-8px);
    opacity: 0.6;
  }
  to {
    clip-path: inset(0 0 -100vh 0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes filters-fold {
  from {
    clip-path: inset(0 0 -100vh 0);
    opacity: 1;
  }
  to {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .filter-summary {
    transition: none;
  }

  .products-catalog--filters-floating .products-filter-form,
  .products-catalog--filters-floating.products-catalog--filters-open .attribute-facets,
  .products-catalog--filters-closing .products-filter-form,
  .products-catalog--filters-closing.products-catalog--filters-open .attribute-facets {
    animation: none;
  }
}

/* Facetas de atributo (_attribute_facets.html.slim): debajo de la
   fila de categorías. Una fila de pills colapsadas (una por atributo) y debajo el
   panel del atributo abierto; mismo truco del checkbox invisible que
   .category-filter-pill. En mobile cada fila scrollea horizontal, en
   escritorio envuelve. */
.attribute-facets {
  grid-area: facets;
  display: none;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.products-catalog--filters-open .attribute-facets {
  display: flex;
}

.attribute-facets__group {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.attribute-facets__group::-webkit-scrollbar {
  display: none;
}

@media (min-width: 640px) {
  .attribute-facets__group {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

.attribute-facets__group[hidden] {
  display: none;
}

/* Una pill por atributo (estilo "DOSSIER COMERCIAL"): sin borde, texto acento
   en 700, mayúsculas espaciadas. Abierta o con valores marcados = subrayada,
   para que el filtro activo se vea aunque el panel esté cerrado. */
.attribute-facets__toggles {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.attribute-facets__toggles::-webkit-scrollbar {
  display: none;
}

@media (min-width: 640px) {
  .attribute-facets__toggles {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

.attribute-facets__toggle {
  flex-shrink: 0;
  padding: 3px 10px;
  font: inherit;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  white-space: nowrap;
  color: var(--accent);
  background: var(--bg);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

.attribute-facets__toggle:hover {
  color: var(--text-muted);
}

/* Sin borde: el grupo abierto y el que tiene valores marcados se subrayan. */
.attribute-facets__toggle--open,
.attribute-facets__toggle--selected {
  color: var(--text);
  text-decoration: underline;
}

.attribute-facets__toggle-count::before {
  content: " · ";
}

.attribute-facets__toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.attribute-facet-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 2px 8px;
  font-size: 0.72rem;
  white-space: nowrap;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

/* Círculo de color/estampado a la izquierda del nombre (attribute_swatch en
   ProductsHelper). El anillo gris deja ver el blanco sobre el fondo blanco. */
.attribute-swatch {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px var(--border-soft);
}

.attribute-facet-pill .attribute-swatch {
  width: 12px;
  height: 12px;
  margin-right: 5px;
}

.product-info__attribute .attribute-swatch {
  width: 16px;
  height: 16px;
  margin-left: -4px;
}

.attribute-facet-pill:hover {
  color: var(--text-muted);
}

.attribute-facet-pill__input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* Valor marcado: negrita + subrayado (los valores no llevan borde). */
.attribute-facet-pill:has(.attribute-facet-pill__input:checked) {
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
}

/* "Ver todos" al final de cada panel: link en accent. */
.attribute-facet-pill--reset {
  font: inherit;
  font-size: 0.72rem;
  color: var(--accent);
}

.attribute-facet-pill--reset:hover {
  text-decoration: underline;
}

.attribute-facet-pill:has(.attribute-facet-pill__input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Grid: paginado con Turbo Frames anidados de carga diferida (`loading="lazy"`).
   Cada <turbo-frame> dentro del grid se colapsa con display:contents para que
   solo las .product-card reales cuenten como items del CSS Grid, sin importar
   cuán anidadas estén dentro de la cadena de frames. */
/* grid-auto-flow:dense + los nth-child de abajo (uno por breakpoint de ancho
   fijo, ver media queries) le dan a algunas tarjetas el doble de ancho/alto
   ("cuadrículas más grandes que otras" del mockup) sin tocar Ruby/JS: como
   turbo-frame ya es display:contents, cada tarjeta cargada por scroll
   infinito entra como hijo directo de .product-grid y el conteo nth-child
   sigue corrido entre páginas. En el rango 600–900px (auto-fill, número de
   columnas variable) se deja una grilla uniforme — el span no es predecible
   contra un número de columnas que cambia con el ancho. */
.product-grid {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.product-grid turbo-frame {
  display: contents;
}

.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.product-card--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  color: var(--text-muted);
  font-size: 0.85rem;
  background: var(--surface);
  border: 1px dashed var(--border);
}

/* El hover se dispara desde el wrapper para que la tarjeta y su corazón
   (que es hermano del <a>, no hijo) se levanten juntos. */
.product-card-wrapper {
  position: relative;
  min-width: 0;
  transition: transform 0.15s ease;
}

.product-card-wrapper:hover {
  transform: translateY(-2px);
}

.product-card__image {
  aspect-ratio: 1 / 1;
  background: var(--surface-alt);
  position: relative;
  overflow: hidden;
}

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

/* Carrusel automático de la grilla (grid_spotlight_controller.js): hasta 3
   imágenes apiladas, la activa en opacity 1 y el resto en 0. Solo las tarjetas
   más visibles en pantalla rotan; el resto queda quieta en el primer slide. */
.product-card__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

.product-card__slide.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .product-card__slide {
    transition: none;
  }
}

.product-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 0.85rem;
}

/* Más específica que la regla base de arriba: solo oscurece el placeholder
   dentro de la tarjeta rediseñada. */
.product-card .product-card__placeholder {
  color: var(--text-muted);
}

.product-card__link {
  display: block;
  color: inherit;
}

.product-card__body {
  padding: 10px 14px 0;
  text-align: center;
}

.product-card__title {
  margin: 0 0 2px;
  font-size: 0.625rem; /* 10px */
  text-transform: capitalize;
  line-height: 1.2;
  font-weight: 400;
  color: var(--text-muted);
  /* Una sola línea; un nombre largo se desvanece igual que la marca. */
  display: block;
  white-space: nowrap;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);
  mask-image: linear-gradient(to right, #000 85%, transparent 100%);
}

.product-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  padding: 0 14px 6px;
  margin-top: auto;
  min-height: 1.3rem;
}

.product-card__price {
  margin: 0;
  font-weight: 600;
  color: var(--accent);
  line-height: 1.3;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Precio con descuento (products/_price): "antes" tachado a la izquierda,
   precio de venta y etiqueta de %. Compartido por tarjeta, modal y favoritos. */
.price-tag {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.price-tag__current {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.price-tag__compare {
  flex-shrink: 0;
  font-weight: 400;
  font-size: 0.85em;
  color: var(--text-muted);
}

.price-tag__discount {
  flex-shrink: 0;
  align-self: center;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.4;
}

.product-card__store {
  display: block;
  position: relative;
  z-index: 1;
  margin-bottom: 2px;
  font-size: 0.75rem; /* 12px */
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  /* Nombres largos se desvanecen en vez de truncar con "...": un texto
     corto no llega al 85% del ancho, así que la máscara no le hace nada. */
  -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);
  mask-image: linear-gradient(to right, #000 85%, transparent 100%);
}

a.product-card__store:hover {
  color: var(--text);
  text-decoration: underline;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}

.back-link:hover {
  color: var(--on-accent);
  background: var(--accent);
}

/* Listado de /stores (stores/index): una fila por tienda, con buscador
   client-side (store_filter_controller.js). */
.stores-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.stores-search {
  flex: 1;
  min-width: 0;
  max-width: 420px;
  padding: 8px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.9rem;
}

.stores-search:focus {
  outline: none;
  border-color: var(--border);
  box-shadow: var(--selected-ring);
}

.stores-toolbar__count {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

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

.stores-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.stores-table th,
.stores-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #eee;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.stores-table th {
  position: sticky;
  top: 0;
  background: var(--bg);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom-color: var(--border-soft);
}

.stores-table tbody tr:hover td {
  background: #fafafa;
}

.stores-table .stores-table__num {
  text-align: right;
}

.stores-table__name {
  display: block;
  font-weight: 600;
  color: var(--text);
}

.stores-table__url {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.stores-table__name:hover,
.stores-table__url:hover {
  text-decoration: underline;
}

.stores-table__row--inactive .stores-table__name,
.stores-table__row--inactive .stores-table__status {
  color: var(--text-muted);
  font-weight: 400;
}

.stores-table__strong {
  font-weight: 600;
}

.stores-table__days {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
}

.stores-table__days--stale {
  border: 2px solid var(--border);
  font-weight: 600;
}

.stores-table__empty td {
  padding: 24px 10px;
  text-align: center;
  color: var(--text-muted);
}

@media (max-width: 720px) {
  .stores-table .stores-table__optional {
    display: none;
  }

  .stores-search {
    max-width: none;
  }
}




.store-card__platform {
  flex-shrink: 0;
  padding: 2px 8px;
  border: 1px solid #e5e5e5;
  border-radius: 999px;
  background: #f5f5f5;
  font-size: 0.7rem;
  font-weight: 600;
  color: #666;
  white-space: nowrap;
}

.store-card__platform[data-platform="shopify"] {
  border-color: #cfe4c4;
  background: #eef5e9;
  color: #4a7c30;
}

.store-card__platform[data-platform="woocommerce"] {
  border-color: #ddd0ea;
  background: #f3ecf9;
  color: #7245a1;
}








.store-card__action-btn {
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  color: #333;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.store-card__action-btn:hover {
  background: #f5f5f5;
}

.store-card__action-btn--primary {
  border-color: #111;
  background: #111;
  color: #fff;
}

.store-card__action-btn--primary:hover {
  background: #333;
}

a.store-card__action-btn {
  display: inline-block;
  text-decoration: none;
}

/* Encabezado de /stores con el botón "Nueva tienda", y el formulario de
   stores/new + el select de estado del dashboard. */
.stores-page__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}

.stores-page .stores-page__header h1 {
  margin: 0;
}

.store-form {
  max-width: 560px;
}

.store-form__field {
  margin-bottom: 14px;
}

.store-form__field label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #333;
}

.store-form__field input,
.store-form__status select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.95rem;
  background: #fff;
  color: #111;
  box-sizing: border-box;
}

.store-form__hint {
  margin: 0 0 14px;
  font-size: 0.8rem;
  color: #666;
}

.store-form__errors {
  margin: 0 0 14px;
  padding: 10px 14px 10px 28px;
  border: 1px solid #e6c6c6;
  border-radius: 6px;
  background: #fbeaea;
  color: #7a2d2d;
  font-size: 0.85rem;
}

.store-form__status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
}

.store-form__flag {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  cursor: pointer;
}


/* Dashboard de una tienda (/stores/:id, stores/show). Mismo look que las
   tarjetas de /stores de arriba. */
.store-dashboard__header {
  margin: 12px 0 20px;
}

.store-dashboard__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.stores-page .store-dashboard__title-row h1 {
  margin: 0;
}

.store-dashboard__badge {
  padding: 2px 8px;
  border: 1px solid #111;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
}

.store-dashboard__links {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: #666;
  overflow-wrap: anywhere;
}

.store-dashboard__links a:hover,
.store-dashboard__section a:hover {
  text-decoration: underline;
}

.store-dashboard__section a {
  text-decoration: underline;
  text-decoration-color: #ccc;
}

.store-dashboard__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.store-dashboard__kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
}

.store-dashboard__kpi--alert {
  border-color: #111;
  box-shadow: inset 0 0 0 1px #111;
}

.store-dashboard__kpi-label {
  font-size: 0.75rem;
  color: #999;
}

.store-dashboard__kpi-value {
  font-size: 1.5rem;
  font-weight: 600;
}

.store-dashboard__kpi-note {
  font-size: 0.75rem;
  color: #666;
}

.store-dashboard__section {
  margin-bottom: 16px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  min-width: 0;
}

.store-dashboard__section h2 {
  margin: 0 0 12px;
  font-size: 1.05rem;
}

.store-dashboard__section h3 {
  margin: 16px 0 8px;
  font-size: 0.9rem;
}

.store-dashboard__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0 16px;
}

.store-dashboard__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.store-dashboard__action p {
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: #666;
}

.store-dashboard__bars,
.store-dashboard__subcategories,
.store-dashboard__recent {
  margin: 0;
  padding: 0;
  list-style: none;
}

.store-dashboard__bar-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.2fr) 2fr minmax(80px, auto);
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  font-size: 0.85rem;
}

summary.store-dashboard__bar-row {
  cursor: pointer;
  list-style: none;
}

summary.store-dashboard__bar-row::-webkit-details-marker {
  display: none;
}

.store-dashboard__category[open] > summary .store-dashboard__bar-label {
  font-weight: 600;
}

.store-dashboard__bar-track {
  height: 10px;
  background: #f0f0f0;
  border-radius: 999px;
  overflow: hidden;
}

.store-dashboard__bar {
  display: block;
  height: 100%;
  background: #111;
  border-radius: 999px;
}

.store-dashboard__bar--pending {
  background: #999;
}

.store-dashboard__bar-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.store-dashboard__subcategories {
  margin: 0 0 8px 16px;
  padding-left: 12px;
  border-left: 1px solid #e5e5e5;
  font-size: 0.8rem;
}

.store-dashboard__subcategories li {
  display: flex;
  justify-content: space-between;
  max-width: 420px;
  padding: 3px 0;
}

/* Botones de navegación del dashboard de la tienda (tienda, catálogo, análisis). */
.store-dashboard__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.store-dashboard__nav-btn {
  display: inline-block;
  padding: 8px 14px;
  font-size: 0.85rem;
  text-decoration: none;
  white-space: nowrap;
}

.store-dashboard__nav-btn--disabled {
  color: #727272;
  cursor: not-allowed;
}

/* Análisis de tienda (/stores/:id/analysis): el árbol de categorías anida
   subcategorías de varios niveles, así que cada fila va en su propio span. */
.store-dashboard__subcategories li.store-analysis__node {
  display: block;
  max-width: none;
}

.store-analysis__node-row {
  display: flex;
  justify-content: space-between;
  max-width: 420px;
}

.store-analysis__node .store-dashboard__subcategories {
  margin: 4px 0 4px 8px;
}

.store-analysis__partial {
  color: #222;
  font-weight: 600;
}

.store-analysis__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
}

.store-analysis__tags li {
  padding: 3px 10px;
  background: #f0f0f0;
  border-radius: 999px;
}

.store-dashboard__progress {
  height: 10px;
  margin-bottom: 12px;
  background: #f0f0f0;
  border-radius: 999px;
  overflow: hidden;
}

.store-dashboard__progress-bar {
  display: block;
  height: 100%;
  background: #111;
}

.store-dashboard__facts {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 16px;
  margin: 0;
  font-size: 0.85rem;
}

.store-dashboard__facts dt {
  color: #666;
}

.store-dashboard__facts dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.store-dashboard__facts--inline {
  grid-template-columns: repeat(auto-fit, minmax(160px, auto) minmax(40px, auto));
  justify-content: start;
}

.store-dashboard__facts--inline dd {
  text-align: left;
}

.store-dashboard__muted {
  font-weight: 400;
  color: #999;
}

.store-dashboard__note,
.store-dashboard__empty {
  margin: 12px 0 0;
  font-size: 0.8rem;
  color: #666;
}

.store-dashboard__empty {
  margin: 0;
}

.store-dashboard__table-wrap {
  overflow-x: auto;
}

.store-dashboard__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.store-dashboard__table th,
.store-dashboard__table td {
  padding: 6px 8px;
  border-bottom: 1px solid #eee;
  text-align: left;
  white-space: nowrap;
}

.store-dashboard__table th {
  color: #999;
  font-weight: 600;
}

.store-dashboard__row--failed td {
  font-weight: 600;
}

/* Análisis de productos (/stores/:id/product_analysis): tabla compacta con
   chips de estado por producto. */
.product-analysis__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}

.product-analysis__filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid #727272;
  border-radius: 999px;
  color: #727272;
  font-size: 0.85rem;
  text-decoration: none;
}

.product-analysis__filter.is-current {
  border: 2px solid #222;
  color: #222;
  font-weight: 600;
}

.product-analysis__filter-count {
  font-variant-numeric: tabular-nums;
}

.product-analysis__search {
  display: flex;
  gap: 8px;
  max-width: 480px;
  margin-bottom: 16px;
}

.product-analysis__search input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 6px 0;
  border: 0;
  border-bottom: 1px solid #222;
  background: transparent;
  color: #222;
  font: inherit;
}

.product-analysis__table td {
  vertical-align: middle;
}

.product-analysis__thumb {
  width: 40px;
}

.product-analysis__thumb img {
  display: block;
  width: 32px;
  height: 42px;
  object-fit: cover;
  border-radius: 3px;
}

.product-analysis__title {
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-analysis__title a {
  color: #222;
}

.product-analysis__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-analysis__chip {
  padding: 2px 8px;
  border: 1px solid #727272;
  border-radius: 999px;
  color: #727272;
  font-size: 0.75rem;
}

.product-analysis__chip--alert {
  border-color: #222;
  color: #222;
  font-weight: 600;
}

.product-analysis__chip--ok {
  border-style: dashed;
}

.product-analysis__pager {
  display: flex;
  gap: 16px;
  margin-top: 16px;
  font-size: 0.85rem;
}

.product-analysis__pager a {
  color: #222;
}

.store-dashboard__recent li {
  padding: 4px 0;
  font-size: 0.85rem;
}

@media (max-width: 640px) {
  .store-dashboard__bar-row {
    grid-template-columns: 1fr auto;
  }

  .store-dashboard__bar-track {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

.flash-messages {
  max-width: 640px;
  margin: 12px auto 0;
  padding: 0 16px;
}

.flash-message {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.9rem;
}

.flash-message--notice {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}

.flash-message--alert {
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
}

.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 32px;
}

.product-gallery {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.product-gallery .product-card__placeholder {
  width: 100%;
  border-radius: 8px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  color: var(--text-muted);
}

.carousel {
  position: relative;
}

.carousel__viewport {
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface-alt);
  touch-action: pan-y;
}

.carousel__track {
  display: flex;
}

.carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
}

.carousel__track {
  transition: transform 0.3s ease;
}

.carousel__slide img {
  width: 100%;
  display: block;
  border-radius: 8px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--text);
  border: 0;
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel__nav:hover {
  background: #fff;
}

.carousel__nav--prev {
  left: 8px;
}

.carousel__nav--next {
  right: 8px;
}

/* Superpuestos dentro de la foto (como los botones prev/next), no en una
   fila aparte debajo — la píldora blanca semi-transparente de fondo es lo
   que los mantiene legibles sin importar qué tan oscura sea la foto. */
.carousel__dots {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 8px;
  max-width: calc(100% - 16px);
  overflow-x: auto;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
}

.carousel__dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--text-muted);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.carousel__dot--active {
  background: var(--accent);
}

.product-info {
  min-width: 0;
}

/* Mismo criterio que la tarjeta y favoritos: la tienda manda (mayúsculas,
   negrita, #222) y el nombre es secundario, en gris y más liviano. Todo lo
   demás en gris y con poco aire vertical. */
.product-info h1 {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--text-muted);
}

.product-info__store {
  margin: 0 0 2px;
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text);
}

.product-info__meta {
  margin: 0 0 8px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Descripción generada por la IA, visible para todos (sin etiqueta). */
.product-info__summary {
  margin: 0 0 10px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.product-info__price {
  margin: 0 0 14px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}

.product-info__attributes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}

.product-info__attribute {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  font-size: 0.75rem;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  white-space: nowrap;
}

.product-info__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 10px;
}

/* Etiquetas de la tienda: texto gris chico, sin pill (son detalle, no filtro). */
.product-info__tag {
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.product-info__description {
  margin-bottom: 24px;
  line-height: 1.5;
  color: var(--text);
}

.product-info__description p {
  margin: 0 0 0.75em;
}

.product-info__description ul,
.product-info__description ol {
  margin: 0 0 0.75em 1.25em;
  padding-left: 1em;
}

.product-info__description li {
  margin-bottom: 0.4em;
}

.product-info__description li p {
  margin: 0;
}

.product-info__description h5 {
  margin: 1em 0 0.4em;
  font-size: 0.95rem;
}

/* Las descripciones scrapeadas traen imágenes (tablas de medidas) y tablas
   sin tamaño; sin esto su ancho intrínseco aplasta la galería del detalle. */
.product-info__description img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.product-info__description table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.product-info__ai-description {
  margin-bottom: 24px;
  padding: 12px 14px;
  border-left: 3px solid var(--border);
  border-radius: 4px;
  line-height: 1.5;
  color: var(--text);
}

.product-info__ai-description-label {
  display: block;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}

/* Panel "Solo Administrador" del detalle de producto (products/_admin_panel). */
/* Borde punteado + franja de encabezado #222: deja claro dónde empieza y
   termina todo lo que sólo ve el admin. */
.admin-panel {
  margin-bottom: 24px;
  padding: 0 16px 16px;
  background: var(--surface);
  border: 2px dashed var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.admin-panel__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 -16px 14px;
  padding: 8px 16px;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--on-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--accent);
}

.admin-panel__title::before {
  content: "🔒";
  font-size: 0.85rem;
  filter: grayscale(1) brightness(2);
}

.admin-panel__subtitle {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.admin-panel__section {
  margin-bottom: 16px;
}

.admin-panel__flash {
  margin: 0 0 12px;
  padding: 8px 12px;
  font-size: 0.9rem;
  border-radius: 4px;
}

.admin-panel__flash--ok {
  color: var(--text);
  border: 1px solid var(--border);
}

.admin-panel__flash--error {
  color: var(--text);
  font-weight: 600;
  border: 2px solid var(--border);
  overflow-wrap: anywhere;
}

.admin-panel__facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  margin: 0 0 16px;
  font-size: 0.9rem;
}

.admin-panel__facts dt {
  color: var(--text-muted);
}

.admin-panel__facts dd {
  margin: 0;
  color: var(--text);
}

.admin-panel__confidence {
  font-weight: 600;
}

/* Confianza por peso, no por color: alta en negrita, media normal, baja gris. */
.admin-panel__facts .admin-panel__confidence--high {
  font-weight: 700;
}

.admin-panel__facts .admin-panel__confidence--medium {
  font-weight: 400;
}

.admin-panel__facts .admin-panel__confidence--low {
  font-weight: 400;
  color: var(--text-muted);
}

/* Un atributo por línea. */
.admin-panel__attributes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-panel__attribute {
  padding: 4px 12px;
  font-size: 0.85rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
}

.admin-panel__attribute--undefined {
  color: var(--text-muted);
  border-style: dashed;
}

.admin-panel__attribute-source {
  margin-left: 4px;
  color: var(--text-muted);
}

.admin-panel__variants {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  color: var(--text);
}

.admin-panel__variants th {
  padding: 4px 8px 4px 0;
  font-weight: 600;
  text-align: left;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.admin-panel__variants td {
  padding: 4px 8px 4px 0;
  border-bottom: 1px solid var(--border-soft);
  overflow-wrap: anywhere;
}

.admin-panel__variant--unavailable td {
  color: var(--text-muted);
  text-decoration: line-through;
}

.admin-panel__empty {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* El form de button_to hace de pie del panel, separado por una línea. */
.admin-panel .button_to {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}

.admin-panel__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 20px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--on-accent);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.admin-panel__button::before {
  content: "✨";
  filter: grayscale(1) brightness(2);
}

.admin-panel__button:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
}

.admin-panel__button:active {
  transform: translateY(0);
}

.admin-panel__button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Mientras corre (turbo_submits_with lo deshabilita): spinner en vez del ✨. */
.admin-panel__button:disabled {
  cursor: progress;
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: none;
}

.admin-panel__button:disabled::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--on-accent);
  border-radius: 50%;
  animation: admin-panel-spin 0.7s linear infinite;
}

@keyframes admin-panel-spin {
  to { transform: rotate(360deg); }
}

.product-info__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.product-info__visit-store {
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.product-info__visit-store:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

@media (max-width: 720px) {
  .product-detail {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
  }

  .product-card-wrapper:nth-child(6n+1) {
    grid-column: span 2;
    grid-row: span 2;
  }

  /* La tarjeta se estira (stretch, default de grid) para llenar las 2 filas
     que ocupa, pero la imagen seguía fija en aspect-ratio 1/1 — dejaba un
     hueco enorme entre el título y el precio (empujado al fondo por
     .product-card__meta's margin-top:auto). Acá la imagen crece para
     llenar el alto extra; .product-card__link necesita el flex-grow porque
     es el hijo directo de .product-card (flex column) que envuelve la
     imagen.

     NO usar `height: 100%` en .product-card__image (como se hacía antes):
     .product-grid nunca define grid-template-rows/grid-auto-rows, así que
     sus filas son "auto" (dimensionadas por contenido) — un porcentaje de
     altura contra un item que cruza filas "auto" no siempre resuelve a un
     valor definido, y como las .product-card__slide de arriba (el carrusel)
     son position:absolute, .product-card__image no tiene NINGÚN contenido
     en flujo que le dé una altura de respaldo: si el porcentaje no resuelve,
     la tarjeta completa queda sin imagen (regresión real, visto en mobile).
     flex-grow en cambio reparte espacio ya calculado en píxeles, nunca
     porcentajes, así que aquí se deja aspect-ratio:1/1 (heredado de la regla
     base) como piso — siempre da una altura real basada en el ancho — y se
     agrega flex-grow encima para estirarla cuando el browser SÍ puede
     resolver el espacio extra. En el peor caso (no puede) sólo vuelve el
     hueco cosmético original; la imagen nunca desaparece. */
  .product-card-wrapper:nth-child(6n+1) .product-card__link {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  .product-card-wrapper:nth-child(6n+1) .product-card__image {
    flex: 1 1 auto;
    min-height: 0;
  }
}

@media (min-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .product-card-wrapper:nth-child(8n+1) {
    grid-column: span 2;
    grid-row: span 2;
  }

  .product-card-wrapper:nth-child(8n+5) {
    grid-row: span 2;
  }

  /* Mismo arreglo que arriba (ver el comentario largo en el breakpoint de
     600px sobre por qué no usar height:100% acá), para las dos variantes de
     tarjeta grande de este breakpoint. */
  .product-card-wrapper:nth-child(8n+1) .product-card__link,
  .product-card-wrapper:nth-child(8n+5) .product-card__link {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  .product-card-wrapper:nth-child(8n+1) .product-card__image,
  .product-card-wrapper:nth-child(8n+5) .product-card__image {
    flex: 1 1 auto;
    min-height: 0;
  }
}

body.modal-open {
  overflow: hidden;
}

/* padding-top generoso (no solo 40px): dueño de que el diálogo arranque
   siempre por debajo del .site-header (~77px alto en escritorio) en vez de
   quedar tapado por él — z-index:100 ya lo pone por encima, pero además no
   queremos que la caja del diálogo ocupe visualmente el mismo alto que el
   header. Se reduce en mobile (@media 600px) a juego con el header más bajo
   ahí (~57px). */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--backdrop);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 96px 20px 40px;
  z-index: 100;
}

.modal-dialog {
  position: relative;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-width: 1120px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* El que scrollea es el body, no el dialog: así el botón de cerrar (absolute
   sobre el dialog) queda fijo en la esquina sin importar cuánto se baje. */
.modal-dialog__body {
  overflow-y: auto;
  min-height: 0;
  padding: 24px;
}

/* While a swipe-to-close drag is in progress (modal_controller.js), the
   dialog's transform is driven frame-by-frame from touch position, so the
   CSS transition must get out of the way — otherwise every touchmove update
   lags behind the finger instead of tracking it. Restored the instant the
   gesture ends, either springing back or flying the rest of the way off
   screen, under the transition above. */
.modal-dialog--dragging {
  transition: none;
}

/* z-index explícito: sin esto, en mobile (.product-detail a una sola
   columna) la galería/carrusel —también position:relative— queda después
   en el DOM y por regla de stacking (mismo z-index:auto, ambos positioned)
   pinta encima de este botón, recortándolo a medio círculo justo donde se
   solapan top-derecha del dialog con el borde de la foto. */
.modal-dialog__close {
  position: absolute;
  top: 10px;
  right: 22px;
  z-index: 5;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: var(--surface);
  border: 0;
  border-radius: 50%;
  transition: color 0.15s ease;
}

/* Sin aro, como el corazón y el ícono de sesión; el fondo blanco lo mantiene
   legible cuando en mobile queda sobre la foto. */
.modal-dialog__close:hover {
  color: var(--text);
}

@media (max-width: 720px) {
  .modal-backdrop {
    padding-top: 76px;
  }

  .modal-dialog__body {
    padding: 16px;
  }

  .modal-dialog__close {
    top: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
  }
}

/* ---------------------------------------------------------------------------
   Wishlist (favoritos): botón en la nav, corazón en la tarjeta y panel lateral.
   El estado abierto vive como clase en <body> (ver wishlist_drawer_controller).
   --------------------------------------------------------------------------- */

.products-page__header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.products-page__header h1 {
  margin: 0;
  margin-right: auto;
}

.wishlist-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 4px;
  font: inherit;
  color: var(--accent);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.wishlist-toggle__icon {
  font-size: 1.6rem;
  line-height: 1;
  transition: color 0.15s ease;
}

.wishlist-toggle:hover .wishlist-toggle__icon {
  color: var(--text-muted);
}

/* El contador va como burbuja sobre la esquina del corazón. */
.wishlist-toggle__count {
  position: absolute;
  top: -4px;
  right: -8px;
  min-width: 20px;
  padding: 0 6px;
  font-size: 0.75rem;
  line-height: 20px;
  text-align: center;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 10px;
}

.wishlist-toggle__count--empty {
  display: none;
}

/* Tarjeta: corazón sobrepuesto (hermano del <a>, no dentro — un <button> no puede
   anidarse en un <a>). Mismo glifo que el del header (.wishlist-toggle__icon),
   pero sutil: sin marcar es sólo el contorno (relleno transparente +
   text-stroke), dentro de un círculo blanco translúcido con borde gris tenue;
   marcado se rellena de #222. */
.product-card__heart {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--accent);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(114, 114, 114, 0.35);
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.product-card__heart:hover {
  border-color: var(--border-soft);
  transform: scale(1.08);
}

.product-card-wrapper--wishlisted .product-card__heart {
  color: var(--accent);
}

/* Panel lateral */
.wishlist-overlay {
  position: fixed;
  inset: 0;
  background: var(--backdrop);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 105;
}

body.wishlist-open .wishlist-overlay {
  opacity: 1;
  pointer-events: auto;
}

.wishlist-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(400px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--text);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 110;
  touch-action: pan-y; /* deja scroll vertical normal; el swipe horizontal lo maneja el JS */
}

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

body.wishlist-open {
  overflow: hidden;
}

.wishlist-drawer__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px;
  border-bottom: 1px solid var(--border);
}

.wishlist-drawer__title {
  margin: 0;
  margin-right: auto;
  font-size: 1.05rem;
}

.wishlist-drawer {
  border-left: 1px solid var(--border);
}

.wishlist-drawer__clear-form {
  margin: 0;
}

.wishlist-drawer__clear {
  padding: 0;
  font: inherit;
  font-size: 0.8rem;
  color: var(--text-muted);
  background: none;
  border: 0;
  cursor: pointer;
}

.wishlist-drawer__clear:hover {
  color: var(--accent);
  text-decoration: underline;
}

.wishlist-drawer__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--text-muted);
  background: var(--surface-alt);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.wishlist-drawer__close:hover {
  color: var(--text);
}

.wishlist-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 20px 32px;
}

.wishlist-empty {
  padding: 32px 0;
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.6;
  text-align: center;
}

.wishlist-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Ítem compacto: miniatura vertical + tienda (protagonista), nombre en gris
   de una línea y precio; debajo, una fila chica de acciones en gris. */
.wishlist-item {
  position: relative;
  padding: 8px 24px 8px 0;
  border-bottom: 1px solid var(--border-soft);
}

.wishlist-item__link {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.wishlist-item__image {
  aspect-ratio: 3 / 4;
  background: var(--surface-alt);
  border-radius: 4px;
  overflow: hidden;
}

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

.wishlist-item__body {
  min-width: 0;
  line-height: 1.3;
}

.wishlist-item__store,
.wishlist-item__title,
.wishlist-item__price {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
}

.wishlist-item__store {
  font-size: 0.75rem; /* 12px */
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text);
  text-overflow: ellipsis;
}

.wishlist-item__title {
  font-size: 0.75rem;
  color: var(--text-muted);
  -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);
  mask-image: linear-gradient(to right, #000 85%, transparent 100%);
}

.wishlist-item__price {
  font-size: 0.75rem;
  color: var(--text);
}

.wishlist-item__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin-top: 4px;
  padding-left: 56px; /* bajo el texto, no bajo la miniatura */
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* La acción principal del ítem: pill sólida como los demás CTA. */
.wishlist-item__visit {
  padding: 3px 10px;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.wishlist-item__visit:hover {
  background: var(--accent-hover);
}

.wishlist-item__remove-form {
  position: absolute;
  top: 6px;
  right: 0;
  margin: 0;
}

.wishlist-item__remove {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.wishlist-item__remove:hover {
  color: var(--text);
}

/* Botón dentro del modal / página de producto */
.wishlist-toggle-button form {
  margin: 0;
}

.wishlist-toggle-button__button {
  padding: 9px 18px;
  font: inherit;
  font-size: 0.85rem;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.wishlist-toggle-button__button:hover,
.wishlist-toggle-button__button--active {
  box-shadow: var(--selected-ring);
}

.wishlist-toggle-button__button--active {
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Colecciones de favoritos: carpetas colapsables (<details>) en el panel y el
   selector "Guardar en…" (wishlist_picker_controller). Sólo tokens del tema.
   --------------------------------------------------------------------------- */

.wishlist-collections__create {
  margin-bottom: 8px;
}

.wishlist-collections__create-button {
  padding: 4px 0;
  font: inherit;
  font-size: 0.8rem;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.wishlist-collections__create-button:hover {
  color: var(--text);
  text-decoration: underline;
}

.wishlist-collections__create-form,
.wishlist-collection__rename,
.wishlist-picker__new {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.wishlist-collections__create-form[hidden],
.wishlist-collection__rename[hidden] {
  display: none;
}

.wishlist-input {
  flex: 1 1 160px;
  min-width: 0;
  padding: 8px 14px;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.wishlist-input:focus {
  outline: none;
  box-shadow: var(--selected-ring);
}

.wishlist-button {
  padding: 8px 14px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.wishlist-button:hover {
  color: var(--text);
}

.wishlist-button--primary {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}

.wishlist-button--primary:hover {
  color: var(--on-accent);
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* Carpeta: sin caja, sólo una línea gris entre carpetas. */
.wishlist-collection {
  border-bottom: 1px solid var(--border-soft);
}

.wishlist-collection__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.wishlist-collection__summary::-webkit-details-marker {
  display: none;
}

.wishlist-collection__summary:hover .wishlist-collection__name {
  text-decoration: underline;
}

.wishlist-collection__chevron {
  width: 10px;
  font-size: 1rem;
  line-height: 1;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.wishlist-collection[open] .wishlist-collection__chevron {
  transform: rotate(90deg);
}

.wishlist-collection__name {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wishlist-collection__name--muted {
  color: var(--text-muted);
}

.wishlist-collection__count {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.wishlist-collection__body {
  padding: 0 0 8px;
}

.wishlist-collection .wishlist-item:last-child {
  border-bottom: 0;
}

.wishlist-collection__empty {
  margin: 0;
  padding: 0 0 4px 18px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.wishlist-collection__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  /* Mismo tamaño que los botones: si no, el <form> de "Eliminar" (button_to)
     arma su línea a 16px y el botón queda más abajo que "Renombrar". */
  font-size: 0.7rem;
  line-height: 1.3;
  padding: 0 0 6px 18px; /* alineadas con el nombre, tras el chevron */
  margin-top: -4px;
}

.wishlist-collection__action-form {
  display: flex;
  margin: 0;
}

.wishlist-collection__action {
  display: block;
  padding: 0;
  font: inherit;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.wishlist-collection__action:hover {
  color: var(--text);
  text-decoration: underline;
}

.wishlist-collection__rename {
  padding: 0 0 8px;
}

/* "Mover a…" por ítem: texto gris con el select sin borde. */
.wishlist-item__move {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  min-width: 0;
}

.wishlist-item__move-label {
  flex-shrink: 0;
}

.wishlist-item__move-select {
  min-width: 0;
  max-width: 100%;
  padding: 0;
  font: inherit;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.wishlist-item__move-select:hover,
.wishlist-item__move-select:focus {
  color: var(--text);
  text-decoration: underline;
  outline: none;
}

/* Selector "Guardar en…": centrado en desktop, bottom-sheet en mobile. Va
   sobre el modal de producto (100) y el panel (110). */
.wishlist-picker-overlay {
  position: fixed;
  inset: 0;
  background: var(--backdrop);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 120;
}

.wishlist-picker {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(380px, calc(100% - 32px));
  max-height: min(560px, calc(100% - 64px));
  display: flex;
  flex-direction: column;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -46%);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 125;
}

body.wishlist-picker-open .wishlist-picker-overlay {
  opacity: 1;
  pointer-events: auto;
}

body.wishlist-picker-open .wishlist-picker {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

.wishlist-picker__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}

.wishlist-picker__title {
  margin: 0;
  margin-right: auto;
  font-size: 1rem;
}

.wishlist-picker__options {
  list-style: none;
  margin: 0;
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

.wishlist-picker__option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  color: var(--text);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.wishlist-picker__option:hover,
.wishlist-picker__option:focus-visible {
  font-weight: 600;
  box-shadow: var(--selected-ring);
  outline: none;
}

.wishlist-picker__option-icon {
  color: var(--accent);
}

.wishlist-picker__option-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wishlist-picker__option-count {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.wishlist-picker__new {
  padding: 12px 18px 18px;
  border-top: 1px solid var(--border);
}

@media (max-width: 639px) {
  .wishlist-picker {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 80vh;
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
    transform: translateY(100%);
  }

  body.wishlist-picker-open .wishlist-picker {
    transform: translateY(0);
  }

  .wishlist-picker__new {
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }
}

/* ---------------------------------------------------------------------------
   Botón flotante "volver arriba". Vive fuera de .products-page/etc en el
   layout para que aparezca en toda la app; back_to_top_controller decide
   cuándo mostrarlo (scrollY) agregando/quitando --visible.
   --------------------------------------------------------------------------- */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--on-accent);
  background: var(--accent);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
  z-index: 90;
}

.back-to-top--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--accent-hover);
}

@media (max-width: 600px) {
  .back-to-top {
    right: 14px;
    bottom: 14px;
  }
}

/* Vista interna: categorías y sus category_keywords (app/views/categories/index.html.slim) */

.category-keywords-page {
  max-width: 960px;
  margin: 40px auto;
  padding: 0 20px;
}

.category-keywords-page__title {
  font-family: Georgia, "Times New Roman", serif;
  color: #4a3220;
  margin-bottom: 4px;
}

.category-keywords-page__subtitle {
  color: #6b4a2f;
  font-size: 0.9rem;
  margin-bottom: 24px;
}

.category-keywords-group {
  border: 1px solid #e2d5c3;
  border-radius: 8px;
  background: #faf6f0;
  padding: 16px 20px;
  margin-bottom: 16px;
}

.category-keywords-group__name {
  margin: 0 0 10px;
  font-family: Georgia, "Times New Roman", serif;
  color: #4a3220;
}

.category-keywords-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.category-keywords-group__header .category-keywords-group__name {
  margin-bottom: 0;
}

.category-keywords-subgroup {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e2d5c3;
}

.category-keywords-subgroup__name {
  margin: 0 0 8px;
  font-size: 0.95rem;
  color: #4a3220;
}

.category-keywords-subgroup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.category-keywords-subgroup__header .category-keywords-subgroup__name {
  margin-bottom: 0;
}

/* Botón "Desactivar"/"Activar" por categoría (app/views/categories/_toggle_button.html.slim,
   _uncategorized_toggle.html.slim) — oculta la categoría y sus productos del
   catálogo público, ver Category#active / CatalogSetting. */
.category-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.category-toggle__status {
  font-size: 0.75rem;
  color: #6b4a2f;
}

.category-toggle__status--inactive {
  color: #b5533c;
  font-weight: 600;
}

.category-toggle__form {
  margin: 0;
}

.category-toggle__button {
  padding: 4px 12px;
  border: 1px solid #6b4a2f;
  border-radius: 20px;
  background: transparent;
  color: #6b4a2f;
  font-size: 0.75rem;
  cursor: pointer;
}

.category-toggle__button:hover {
  color: #fff;
  background: #6b4a2f;
}

.category-keywords-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: 0.8rem;
  color: #6b4a2f;
  background: #f0e6d8;
  border: 1px solid #e2d5c3;
  border-radius: 20px;
  white-space: nowrap;
}

.tag-chip__remove-form {
  margin: 0;
  line-height: 1;
}

.tag-chip__remove {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 0.75rem;
  line-height: 1;
  color: #6b4a2f;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.tag-chip__remove:hover {
  color: #fff;
  background: #b5533c;
}

.category-keywords-empty {
  color: #a08d78;
  font-size: 0.85rem;
  font-style: italic;
  margin: 4px 0 0;
}

.category-keywords-add {
  margin-top: 10px;
}

.category-keywords-add__form {
  display: flex;
  gap: 8px;
}

.category-keywords-add__input {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid #e2d5c3;
  border-radius: 6px;
  font-size: 0.85rem;
}

.category-keywords-add__submit {
  padding: 6px 14px;
  border: 1px solid #6b4a2f;
  border-radius: 6px;
  background: #6b4a2f;
  color: #fff;
  font-size: 0.85rem;
  cursor: pointer;
}

.category-keywords-add__error {
  color: #b5533c;
  font-size: 0.8rem;
  margin: 6px 0 0;
}

/* Vista interna: atributos de productos (app/views/attribute_definitions/index.html.slim).
   Reusa los bloques .category-keywords-* de arriba; esto agrega sólo lo propio
   (badges, checkboxes de categorías, formularios de edición plegables). */

.attribute-admin__form,
.attribute-admin__categories {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 8px;
}

/* Los formularios del panel envuelven en pantallas angostas en vez de
   aplastar el campo de texto a 0px. */
.attribute-admin__wrap {
  flex-wrap: wrap;
}

.attribute-admin__form .category-keywords-add__input,
.attribute-admin__wrap .category-keywords-add__input {
  flex: 1 1 12rem;
}

.attribute-admin__select,
.attribute-admin__number {
  padding: 6px 8px;
  border: 1px solid #e2d5c3;
  border-radius: 6px;
  background: #fff;
  font-size: 0.85rem;
  max-width: 100%;
}

.attribute-admin__number {
  width: 5.5rem;
}

.attribute-admin__check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  color: #4a3220;
  white-space: nowrap;
}

.attribute-admin__badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 20px;
  background: #f0e6d8;
  color: #6b4a2f;
  font-family: system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  vertical-align: middle;
}

.attribute-admin__badge--off {
  background: #fbeaea;
  color: #b5533c;
}

.attribute-admin__key,
.attribute-admin__count,
.attribute-admin__chip-scope {
  color: #a08d78;
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 400;
}

.attribute-admin__key {
  margin-left: 8px;
}

.attribute-admin__details {
  margin-top: 10px;
  font-size: 0.85rem;
}

.attribute-admin__details summary {
  color: #6b4a2f;
  cursor: pointer;
}

.attribute-admin__inline-form {
  margin: 8px 0 0;
}

.attribute-admin__danger {
  padding: 4px 12px;
  border: 1px solid #b5533c;
  border-radius: 6px;
  background: transparent;
  color: #b5533c;
  font-size: 0.8rem;
  cursor: pointer;
}

.attribute-admin__danger:hover {
  color: #fff;
  background: #b5533c;
}

.attribute-admin__new-value {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #e2d5c3;
}

.attribute-admin--inactive > .category-keywords-group__header,
.attribute-admin--inactive > .category-keywords-subgroup__header {
  opacity: 0.6;
}

/* Cada acción del panel redirige con #anchor al elemento editado; el flash
   queda pegado arriba para que se vea aunque la página haya bajado. */
.internal-page--attributes .internal-page__notice,
.internal-page--attributes .internal-page__alert {
  position: sticky;
  top: 8px;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(74, 50, 32, 0.12);
}

.internal-page--attributes [id^="attribute_"] {
  scroll-margin-top: 64px;
}

/* Vista interna: reglas para la IA (app/views/ai_instructions/show.html.slim) */

.ai-instructions__textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 1.5;
  resize: vertical;
}

.ai-instructions__prompt {
  max-height: 480px;
  overflow: auto;
  padding: 12px;
  border: 1px solid #e2d5c3;
  border-radius: 6px;
  background: #faf6f0;
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

/* Vista interna: costos de la IA (app/views/ai_costs/show.html.slim) */

.ai-costs__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.ai-costs__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid #e2d5c3;
  border-radius: 6px;
  background: #fff;
}

.ai-costs__stat-value {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
  color: #4a3220;
  font-variant-numeric: tabular-nums;
}

.ai-costs__stat-label,
.ai-costs__detail,
.ai-costs__note {
  color: #6b4a2f;
  font-size: 0.82rem;
}

.ai-costs__subtitle {
  margin: 18px 0 6px;
  font-size: 0.95rem;
  color: #4a3220;
}

.ai-costs__table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin-bottom: 8px;
}

.ai-costs__table th,
.ai-costs__table td {
  padding: 6px 10px;
  border-bottom: 1px solid #e2d5c3;
  text-align: left;
  vertical-align: top;
}

.ai-costs__table th {
  color: #6b4a2f;
  font-weight: 600;
  white-space: nowrap;
}

.ai-costs__table tfoot td {
  font-weight: 600;
  border-bottom: none;
}

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

.ai-costs__bar {
  width: 120px;
  height: 8px;
  border-radius: 4px;
  background: #eadfcf;
  overflow: hidden;
}

.ai-costs__bar-fill {
  height: 100%;
  background: #8a5a36;
}

/* Vista interna: explicación del buscador (app/views/search_guide/index.html.slim) */

.search-guide-page {
  max-width: 760px;
  margin: 40px auto;
  padding: 0 20px;
}

.search-guide-page__title {
  font-family: Georgia, "Times New Roman", serif;
  color: #4a3220;
  margin-bottom: 4px;
}

.search-guide-page__subtitle {
  color: #6b4a2f;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.search-guide-page__footnote {
  color: #6b4a2f;
  font-size: 0.85rem;
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid #e2d5c3;
}

.search-guide-section {
  margin-top: 32px;
}

.search-guide-section__title {
  font-family: Georgia, "Times New Roman", serif;
  color: #4a3220;
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.search-guide-list {
  margin: 8px 0 0;
  padding-left: 20px;
  color: #4a3220;
}

.search-guide-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 0.9rem;
}

.search-guide-table th,
.search-guide-table td {
  text-align: left;
  padding: 8px 12px;
  border: 1px solid #e2d5c3;
}

.search-guide-table th {
  background: #f0e6d8;
  color: #4a3220;
}

.search-guide-table td {
  color: #4a3220;
  background: #faf6f0;
}

/* Vista interna: listado de background jobs (app/views/jobs/index.html.slim) */

.jobs-page {
  max-width: 760px;
  margin: 40px auto;
  padding: 0 20px;
}

.jobs-page__title {
  font-family: Georgia, "Times New Roman", serif;
  color: #4a3220;
  margin-bottom: 4px;
}

.jobs-page__subtitle {
  color: #6b4a2f;
  font-size: 0.95rem;
  margin-bottom: 24px;
}

.jobs-page__mc-callout {
  background: #f0e6d8;
  border: 1px solid #e2d5c3;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 32px;
  color: #4a3220;
}

.jobs-page__mc-callout p {
  margin: 0 0 10px;
}

.jobs-page__mc-link {
  display: inline-block;
  background: #4a3220;
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 0.9rem;
}

.jobs-page__mc-link:hover {
  background: #6b4a2f;
}

.jobs-page__mc-note {
  margin-top: 12px !important;
  font-size: 0.8rem;
  color: #6b4a2f;
}

.job-card {
  border: 1px solid #e2d5c3;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  background: #faf6f0;
}

.job-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.job-card__name {
  font-family: Georgia, "Times New Roman", serif;
  color: #4a3220;
  font-size: 1.1rem;
  margin: 0;
}

.job-card__badge {
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.job-card__badge--queued {
  background: #e4efe1;
  color: #3a5c33;
}

.job-card__badge--batch {
  background: #f0e6d8;
  color: #6b4a2f;
}

.job-card__summary {
  color: #4a3220;
  font-weight: 600;
  margin: 0 0 8px;
}

.job-card__what {
  color: #4a3220;
  font-size: 0.92rem;
  margin: 0 0 12px;
}

.job-card__section-title {
  color: #6b4a2f;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 12px 0 6px;
}

.job-card__trigger-list {
  margin: 0 0 4px;
  padding-left: 18px;
}

.job-card__trigger-list li {
  margin-bottom: 4px;
}

.job-card__progress {
  color: #4a3220;
  font-size: 0.9rem;
  margin: 0;
}

.jobs-page code,
.job-card code {
  background: #f0e6d8;
  border: 1px solid #e2d5c3;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.85em;
  color: #4a3220;
}

/* Flash de Devise en el layout interno (app/views/layouts/internal.html.slim) */

.internal-page__notice,
.internal-page__alert {
  max-width: 960px;
  margin: 20px auto 0;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 0.9rem;
}

.internal-page__notice {
  color: #4a3220;
  background: #f0e6d8;
  border: 1px solid #e2d5c3;
}

.internal-page__alert {
  color: #7a2d2d;
  background: #fbeaea;
  border: 1px solid #e6c6c6;
}

/* Login del admin (app/views/admin/sessions/new.html.slim) — única página bajo
   layout "internal" con tema oscuro, a pedido explícito: el resto del panel
   interno (dashboard, usuarios, categorías/tags, guías) se queda con su look
   café original. El body solo lleva la clase .internal-page--login en esta
   vista (ver content_for :body_class en internal.html.slim), así que estos
   overrides nunca alcanzan a las demás páginas internas. */

.internal-page--login {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  /* mismo truco de fondo full-bleed que .products-page/.product-page */
  box-shadow: 0 0 0 100vmax var(--bg);
  clip-path: inset(0 -100vmax);
}

.internal-page--login .internal-page__notice,
.internal-page--login .internal-page__alert {
  background: var(--surface);
  border: 1px solid var(--border);
}

.internal-page--login .internal-page__notice {
  color: var(--text);
}

.internal-page--login .internal-page__alert {
  color: var(--accent);
}

.admin-auth-page {
  max-width: 360px;
  margin: 80px auto;
  padding: 0 20px;
}

.admin-auth-page__brand {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

/* El logo es apaisado (~6:1): se ajusta al ancho de la tarjeta, no a un alto fijo. */
.admin-auth-page__logo {
  width: 100%;
  height: auto;
  display: block;
}

.admin-auth-page__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 24px;
}

.admin-auth-page__title {
  color: var(--text);
  margin: 0 0 24px;
  text-align: center;
}

.admin-auth-page__field {
  margin-bottom: 16px;
}

.admin-auth-page__field label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.admin-auth-page__field input {
  width: 100%;
  padding: 8px 10px;
  color: var(--text);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 1rem;
  outline: none;
}

.admin-auth-page__field input:focus {
  box-shadow: var(--selected-ring);
}

.admin-auth-page__remember {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.admin-auth-page__remember input {
  accent-color: var(--accent);
}

.admin-auth-page__submit {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.admin-auth-page__submit:hover {
  background: var(--accent-hover);
}

/* Dashboard del admin (app/views/admin/dashboard/index.html.slim) */

.admin-dashboard-page {
  max-width: 640px;
  margin: 60px auto;
  padding: 0 20px;
}

.admin-dashboard-page__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
}

.admin-dashboard-page__title {
  font-family: Georgia, "Times New Roman", serif;
  color: #4a3220;
  margin: 0;
}

.admin-dashboard-page__logout {
  background: none;
  border: 1px solid #e2d5c3;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.85rem;
  color: #6b4a2f;
  cursor: pointer;
}

.admin-dashboard-page__logout:hover {
  color: #4a3220;
  border-color: #6b4a2f;
}

.admin-dashboard-page__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-dashboard-page__links li {
  border-bottom: 1px solid #e2d5c3;
}

.admin-dashboard-page__links a {
  display: block;
  padding: 14px 4px;
  color: #4a3220;
  font-size: 1.05rem;
}

.admin-dashboard-page__links a:hover {
  color: #6b4a2f;
}

/* Gestión de usuarios (app/views/admin/users/*.html.slim) */

.admin-users-page {
  max-width: 640px;
  margin: 60px auto;
  padding: 0 20px;
}

.admin-users-page__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
}

.admin-users-page__title {
  font-family: Georgia, "Times New Roman", serif;
  color: #4a3220;
  margin: 0;
}

.admin-users-page__back,
.admin-users-page__new {
  font-size: 0.85rem;
  color: #6b4a2f;
}

.admin-users-page__new {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 12px;
  border: 1px solid #e2d5c3;
  border-radius: 6px;
}

.admin-users-page__new:hover,
.admin-users-page__back:hover {
  color: #4a3220;
}

.admin-users-page__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.admin-users-page__table th,
.admin-users-page__table td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid #e2d5c3;
  color: #4a3220;
}

.admin-deactivated-page {
  max-width: 960px;
}

.admin-deactivated-page__stores,
.admin-deactivated-page__pager {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 16px;
  font-size: 0.85rem;
}

.admin-deactivated-page__stores a,
.admin-deactivated-page__pager a {
  color: #6b4a2f;
}

.admin-deactivated-page__stores a.is-current {
  color: #4a3220;
  font-weight: 600;
}

.admin-deactivated-page__pager {
  margin-top: 16px;
}

.admin-deactivated-page__thumb {
  width: 56px;
}

.admin-deactivated-page__thumb img {
  width: 48px;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.admin-users-page__delete {
  background: none;
  border: 1px solid #e6c6c6;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.8rem;
  color: #7a2d2d;
  cursor: pointer;
}

.admin-users-page__delete:hover {
  background: #fbeaea;
}

.admin-users-page__field {
  margin-bottom: 16px;
}

.admin-users-page__hint {
  margin: 0 0 16px;
  font-size: 0.85rem;
  color: #6b4a2f;
}

.admin-users-page__field label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.85rem;
  color: #6b4a2f;
}

.admin-users-page__field input,
.admin-users-page__field select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #e2d5c3;
  border-radius: 6px;
  font-size: 1rem;
}

.admin-users-page__submit {
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  background: #4a3220;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}

.admin-users-page__submit:hover {
  background: #6b4a2f;
}

.admin-users-page__errors {
  color: #7a2d2d;
  background: #fbeaea;
  border: 1px solid #e6c6c6;
  border-radius: 6px;
  padding: 10px 16px;
  margin-bottom: 16px;
  font-size: 0.9rem;
}

/* Uso de la plataforma (app/views/admin/usage/*.html.slim) — mismo look café
   que .admin-users-page, más ancho por las tablas de métricas. */

.admin-usage-page {
  max-width: 1100px;
  margin: 60px auto;
  padding: 0 20px;
  color: #4a3220;
}

.admin-usage-page__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.admin-usage-page__title {
  font-family: Georgia, "Times New Roman", serif;
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-usage-page__back {
  font-size: 0.85rem;
  color: #6b4a2f;
}

.admin-usage-page__subtitle,
.admin-usage-page__note,
.admin-usage-page__empty,
.admin-usage-page__muted {
  color: #8a6d55;
  font-size: 0.9rem;
}

.admin-usage-page__periods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 24px;
}

.admin-usage-page__period {
  padding: 4px 12px;
  border: 1px solid #e2d5c3;
  border-radius: 999px;
  font-size: 0.85rem;
  color: #6b4a2f;
  text-decoration: none;
}

.admin-usage-page__period--active {
  background: #4a3220;
  border-color: #4a3220;
  color: #fff;
}

.admin-usage-page__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}

.admin-usage-page__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: #f8f2ea;
  border: 1px solid #e2d5c3;
  border-radius: 8px;
}

.admin-usage-page__stat-value {
  font-size: 1.6rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.admin-usage-page__stat-label {
  font-size: 0.8rem;
  color: #8a6d55;
}

.admin-usage-page__section {
  margin-bottom: 32px;
  min-width: 0;
}

.admin-usage-page__heading {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  margin: 0 0 12px;
}

.admin-usage-page__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0 32px;
}

.admin-usage-page__scroll {
  overflow-x: auto;
}

.admin-usage-page__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.admin-usage-page__table th,
.admin-usage-page__table td {
  text-align: left;
  padding: 8px;
  border-bottom: 1px solid #e2d5c3;
  white-space: nowrap;
}

.admin-usage-page__table th {
  font-size: 0.8rem;
  font-weight: 600;
  color: #8a6d55;
}

.admin-usage-page__table a,
.admin-usage-page__list a {
  color: #4a3220;
}

.admin-usage-page__num {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}

.admin-usage-page__chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 120px;
  padding-bottom: 4px;
  border-bottom: 1px solid #e2d5c3;
}

.admin-usage-page__chart-day {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.admin-usage-page__chart-bar {
  width: 100%;
  background: #6b4a2f;
  border-radius: 3px 3px 0 0;
}

.admin-usage-page__chart-axis {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #8a6d55;
  margin-top: 4px;
}

.admin-usage-page__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-usage-page__list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #e2d5c3;
  font-size: 0.9rem;
}

.admin-usage-page__count {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}