/* ═══════════════════════════════════════════════════════
   _tienda-categorias.css — T13 Layout panorámico
   Sidebar desktop + barra mobile + drawer + filas catálogo SSR.
   Carga DESPUÉS de _tienda.css para pisar selectores compartidos.
   ═══════════════════════════════════════════════════════ */

/* ── Layout grid: sidebar + main ────────────────────────── */
.shop-layout {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.shop-sidebar { display: none; }   /* mobile: oculto, mostrado en desktop */
.shop-main    { min-width: 0; }     /* permite que el grid no fuerce overflow */

/* ─────────────────────────────────────────────────────────
   MOBILE — barra sticky [Todos] [<select>] [Filtros (N)]
   Reemplaza la franja .shop-filters horizontal antigua.
   ───────────────────────────────────────────────────────── */
.mobile-cat-bar {
  position: sticky;
  /* T13v3 FIX 6: --nav-h-current se actualiza dinámicamente desde JS según la
     altura real de la navbar (encoge al scrollear). Fallback a --nav-h. */
  top: var(--nav-h-current, var(--nav-h));
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  margin: 0 -5vw 16px;
  padding: 10px 5vw;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: top .3s ease;
}

.mobile-cat-all {
  flex-shrink: 0;
  background: var(--s1);
  border: 1px solid var(--border);
  color: #666;
  font-family: 'Montserrat', Helvetica, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 10px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
}
.mobile-cat-all.active {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}
.mobile-cat-all:not(.active):hover {
  border-color: var(--text);
  color: var(--text);
}

.mobile-cat-select {
  flex: 1;
  min-width: 0;
  /* 16px evita el zoom automático de iOS al focar el select */
  font-size: 16px;
  font-family: 'Montserrat', Helvetica, sans-serif;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text);
  background: var(--s1);
  border: 1px solid var(--border);
  padding: 10px 32px 10px 12px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%231A1A1A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  transition: border-color .2s;
}
.mobile-cat-select:focus {
  border-color: var(--green);
  outline: 2px solid var(--green);
  outline-offset: 1px;
}
.mobile-cat-select:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.mobile-cat-filters {
  flex-shrink: 0;
  background: var(--black);
  color: var(--white);
  border: 1px solid var(--black);
  font-family: 'Montserrat', Helvetica, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background .2s, opacity .2s;
}
.mobile-cat-filters:hover { background: var(--green); border-color: var(--green); }
.mobile-cat-filters .filter-count {
  background: var(--green);
  color: var(--black);
  font-size: .58rem;
  font-weight: 700;
  padding: 2px 6px;
  min-width: 18px;
  text-align: center;
  display: none;          /* se muestra solo cuando N > 0 */
}
.mobile-cat-filters.has-filters { background: var(--green); border-color: var(--green); color: var(--black); }
.mobile-cat-filters.has-filters .filter-count { display: inline-block; }

/* Línea de count mobile bajo la barra (solo vista categoría) */
.mobile-filter-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 16px;
}
.mobile-filter-bar .shop-count {
  font-family: 'Montserrat', Helvetica, sans-serif;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ─────────────────────────────────────────────────────────
   FILAS CATÁLOGO (vista all)
   ───────────────────────────────────────────────────────── */
.cat-row {
  margin-bottom: 8px;
  padding-top: 8px;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.cat-row:not(:first-child) {
  border-top: 1px solid var(--border);
  padding-top: 40px;
}
.cat-row-header {
  text-align: center;
  margin-bottom: 24px;
}
.cat-row-title {
  font-family: 'Oswald', 'Impact', sans-serif;
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1;
  margin: 0 0 12px;
  color: var(--text);
}
.cat-row-viewall {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--text);
  color: var(--text);
  font-family: 'Montserrat', Helvetica, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 9px 18px;
  text-decoration: none;
  transition: all .25s;
}
.cat-row-viewall:hover,
.cat-row-viewall:visited {
  color: var(--text);
}
.cat-row-viewall:hover {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}

/* Mobile: scroll horizontal con snap, 4 cards visibles parcialmente */
.cat-row-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 70%;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 5vw;
  padding: 4px 5vw 12px;
  margin: 0 -5vw;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cat-row-grid::-webkit-scrollbar { display: none; }
.cat-row-grid > .product-card {
  scroll-snap-align: start;
}

/* Paginador decorativo */
.cat-row-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}
.cat-row-pager-arrow {
  background: var(--s1);
  border: 1px solid var(--border);
  color: var(--muted);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: all .2s;
}
.cat-row-pager-arrow:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
}
.cat-row-pager-dots {
  display: flex;
  gap: 6px;
}
.cat-row-pager-dots span {
  width: 8px;
  height: 8px;
  background: var(--soft-gray, #dddddd);
  border-radius: 50%;
  transition: background .2s, width .2s;
  display: inline-block;
}
.cat-row-pager-dots span.active {
  background: var(--green);
  width: 22px;
  border-radius: 4px;
}

/* Empty state cuando una categoría no tiene productos visibles */
.cat-row-empty {
  text-align: center;
  padding: 24px;
  color: var(--muted);
  font-size: .9rem;
  font-family: 'Open Sans', sans-serif;
}

/* ─────────────────────────────────────────────────────────
   DRAWER MOBILE (filtros bottom-sheet)
   ───────────────────────────────────────────────────────── */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
  background: var(--bg);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  border-top: 3px solid var(--green);
  box-shadow: 0 -12px 40px rgba(0,0,0,.3);
}
.drawer.open { transform: translateY(0); }

.drawer-header {
  background: var(--black);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.drawer-title {
  font-family: 'Oswald', 'Impact', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--white);
  margin: 0;
}
.drawer-close {
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.4rem;
  line-height: 1;
  padding: 4px 8px;
  opacity: .7;
  cursor: pointer;
  transition: opacity .2s;
}
.drawer-close:hover { opacity: 1; }

.drawer-body {
  padding: 24px 20px;
  overflow-y: auto;
  flex: 1;
}
.drawer-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  background: var(--s1);
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.drawer-footer .btn-clear {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: 'Montserrat', Helvetica, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 12px 18px;
  cursor: pointer;
  transition: all .2s;
}
.drawer-footer .btn-clear:hover {
  color: var(--text);
  border-color: var(--text);
}
.drawer-footer .btn-apply {
  flex: 1;
  background: var(--green);
  color: var(--black);
  border: none;
  font-family: 'Montserrat', Helvetica, sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 12px 18px;
  cursor: pointer;
  transition: background .2s;
}
.drawer-footer .btn-apply:hover { background: #16a34a; color: var(--white); }

/* ─────────────────────────────────────────────────────────
   FILTROS — compartidos sidebar + drawer
   ───────────────────────────────────────────────────────── */
.filter-section {
  margin-bottom: 28px;
}
.filter-section:last-child { margin-bottom: 0; }
.filter-section-title {
  font-family: 'Montserrat', Helvetica, sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* Mensaje "filtros desactivados" — solo vista catálogo */
.filters-disabled-msg {
  display: none;
  background: rgba(245,200,66,.12);
  border-left: 3px solid var(--gold);
  padding: 10px 12px;
  margin-bottom: 20px;
  font-family: 'Open Sans', Helvetica, sans-serif;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--muted);
}
.filters-disabled-msg strong {
  color: var(--text);
  display: block;
  margin-bottom: 2px;
  font-family: 'Montserrat', Helvetica, sans-serif;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Lista categorías sidebar */
.cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cat-list li { margin-bottom: 2px; }
.cat-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  font-family: 'Open Sans', Helvetica, sans-serif;
  font-size: .92rem;
  color: var(--text);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .2s, border-color .2s, color .2s;
}
.cat-list a:visited { color: var(--text); }
.cat-list a:hover {
  background: var(--s2);
  border-left-color: var(--gold);
  color: var(--text);
}
.cat-list a:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: -2px;
}
.cat-list a.active {
  background: rgba(34,197,94,.08);
  border-left-color: var(--green);
  color: var(--text);
  font-weight: 700;
}
.cat-list .cat-count {
  font-family: 'Montserrat', Helvetica, sans-serif;
  font-size: .68rem;
  color: var(--muted);
  letter-spacing: .06em;
}
.cat-list a.active .cat-count {
  color: var(--green);
  font-weight: 700;
}

/* Slider de precio dual: dos ranges superpuestos */
.price-slider-wrap {
  padding: 8px 0 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.price-slider {
  position: relative;
  height: 4px;
  background: var(--soft-gray, #dddddd);
  margin: 24px 10px 28px;
}
.price-slider-range {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--green);
}
.price-slider input[type="range"] {
  position: absolute;
  top: -8px;
  left: 0;
  width: 100%;
  height: 20px;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  z-index: 2;
}
.price-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--white);
  border: 2px solid var(--green);
  border-radius: 50%;
  pointer-events: auto;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.price-slider input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--white);
  border: 2px solid var(--green);
  border-radius: 50%;
  pointer-events: auto;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.price-slider input[type="range"]::-webkit-slider-runnable-track {
  background: none;
  border: none;
}

.price-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}
.price-input-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.price-input-label {
  font-family: 'Montserrat', Helvetica, sans-serif;
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.price-input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  background: var(--s1);
  padding: 0 8px;
  min-width: 0;
  width: 100%;
}
.price-input-wrap > span {
  font-family: 'Montserrat', Helvetica, sans-serif;
  font-size: .64rem;
  color: var(--muted);
  letter-spacing: .06em;
  flex-shrink: 0;
  margin-right: 4px;
}
.price-input-wrap input {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: none;
  outline: none;
  background: none;
  padding: 8px 0;
  font-family: 'Open Sans', Helvetica, sans-serif;
  font-size: .85rem;
  color: var(--text);
  text-align: right;
}

/* Checkbox stock */
.filter-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 4px 0;
}
.filter-check input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--border);
  background: var(--s1);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: border-color .2s, background .2s;
}
.filter-check input[type="checkbox"]:checked {
  background: var(--green);
  border-color: var(--green);
}
.filter-check input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.filter-check-label {
  font-family: 'Open Sans', Helvetica, sans-serif;
  font-size: .9rem;
  color: var(--text);
}

/* Select de orden ocupa todo el ancho del sidebar/drawer */
.shop-sidebar .sort-select,
.drawer-body .sort-select {
  width: 100%;
  padding: 10px 12px;
}

/* ═══════════════════════════════════════════════════════
   VIEW SWITCHING — body.view-catalog vs body.view-category
   ═══════════════════════════════════════════════════════ */
body.view-catalog .view-category-only { display: none !important; }
body.view-category .view-catalog-only { display: none !important; }

/* T13v2 FIX 3: en vista catálogo los filtros están ACTIVOS y aplican
   sobre las 9 filas. La clase .filter-section--disableable se mantiene
   en el HTML por compatibilidad pero ya no tiene efecto visual aquí.
   .filters-disabled-msg se oculta (ya no aplica el concepto). */
body.view-catalog .filters-disabled-msg { display: none; }

/* T13v2 FIX 3: el botón mobile [Filtros] queda activo siempre. Conservamos
   el modificador .filter-section--disableable sin reglas para evitar romper
   selectores externos que pudieran depender de él. */

/* En vista catálogo: ocultar barra de count mobile (sigue sin aplicar el concepto de count global) */
body.view-catalog .mobile-filter-bar { display: none; }

/* T13v6 FIX 5: ocultar .shop-count duplicado.
   - .shop-toolbar tiene #shopCount (visible solo desktop con sidebar arriba).
   - .mobile-filter-bar tiene #shopCountMobile (visible solo mobile en vista categoría).
   En mobile la .shop-toolbar aparecía duplicada debajo de la barra mobile y antes
   del primer producto. CSS oculta .shop-toolbar en mobile y ambos en vista catálogo. */
@media (max-width: 1023px) {
  .shop-toolbar { display: none; }
}
body.view-catalog .shop-toolbar,
body.view-catalog .mobile-filter-bar {
  display: none;
}

/* T13v2 FIX 2: cuando una categoría no tiene productos (max=0), el slider
   de precio queda visualmente deshabilitado. Aplicado vía clase JS. */
.filter-section.price-disabled {
  opacity: .45;
  pointer-events: none;
  user-select: none;
}

/* T13v4 FIX 1: flechas y dots SIEMPRE visibles como affordance visual.
   Sin overflow → flechas en estado disabled + 1 solo dot (sin reactividad).
   Con overflow → flechas activas + flecha extrema disabled en bordes del scroll.
   La clase .cat-row-pager.is-empty se mantiene como flag lógico (JS la usa
   para saber "no hay scroll posible") pero ya NO oculta el pager. */
.cat-row-pager-arrow[disabled],
.cat-row-pager-arrow:disabled {
  opacity: .35;
  cursor: default;
  pointer-events: none;
}
/* Dots en estado no-reactivo cuando no hay overflow real. */
.cat-row-pager.is-empty .cat-row-pager-dots span {
  cursor: default;
  opacity: .55;
}

/* T13v5: fila con lazy expand pendiente (data-has-more="true" y aún no
   expandida) → el dot único es reactivo (click = expand + scroll). Restauramos
   cursor pointer y opacidad llena para que no se vea apagado. JS bindea el
   click solo cuando `hasMoreLazy()` es true; este CSS asegura el affordance
   visual. La fila pierde el atributo (o queda sin efecto) tras el primer
   expand, momento en el que la lógica normal de overflow toma el control. */
.cat-row[data-has-more="true"] .cat-row-grid:not([data-expanded="true"]) ~ .cat-row-pager.is-empty .cat-row-pager-dots span {
  cursor: pointer;
  opacity: 1;
}

/* T13v3 FIX 9: centrar la nota "Precios orientativos" en horizontal.
   La regla base vive en _tienda.css (no se toca por constraint del proyecto).
   _tienda-categorias.css se carga DESPUÉS → este override gana sin !important. */
.tienda-price-note {
  text-align: center;
}
.tienda-price-note p {
  max-width: 720px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════
   DESKTOP — ≥1024px
   ═══════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .mobile-cat-bar    { display: none; }
  .mobile-filter-bar { display: none; }
  .drawer-backdrop,
  .drawer            { display: none; }

  /* Sidebar + main */
  .shop-layout {
    grid-template-columns: 260px 1fr;
    gap: 40px;
    align-items: start;
  }

  .shop-sidebar {
    display: block;
    position: sticky;
    /* T13v3 FIX 6: usa la altura dinámica de la navbar también en desktop. */
    top: calc(var(--nav-h-current, var(--nav-h)) + 16px);
    background: var(--s1);
    border: 1px solid var(--border);
    padding: 24px 22px;
    max-height: calc(100vh - var(--nav-h-current, var(--nav-h)) - 32px);
    overflow-y: auto;
    overflow-x: hidden;
    transition: top .3s ease, max-height .3s ease;
  }

  /* T13v6 FIX 1: en catálogo desktop el grid opera como carrusel con scroll-snap
     horizontal (igual que mobile) pero mostrando 4 cards exactas por viewport.
     Antes (T13v4): grid-template-columns: repeat(4, 1fr) hacía wrap a fila
     siguiente cuando había >4 cards (post lazy-expand). Ahora grid-auto-flow:
     column + grid-auto-columns calculado fuerza scroll horizontal y nunca wrappea.
     Las 4 cards SSR iniciales entran justo en el viewport (sin scroll posible);
     tras expand, las cards 5+ quedan a la derecha y se navegan con flechas/dots. */
  body.view-catalog .cat-row-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, calc((100% - 6px) / 4));
    grid-template-columns: unset;
    gap: 2px;
    background: var(--border);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
    margin: 0;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Scrollbar nativa oculta — el affordance son las flechas + dots. */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  body.view-catalog .cat-row-grid::-webkit-scrollbar { display: none; }
  body.view-catalog .cat-row-grid > .product-card { scroll-snap-align: start; }
  /* T13v2 FIX 1: el paginador deja de ser puramente decorativo.
     En desktop, JS detecta overflow real y aplica .is-empty cuando NO hay
     scroll horizontal (las 4 cards entran). Con overflow, se muestra. */

  /* T13v4 FIX 6: en desktop margin-bottom=0. La separación visual entre filas
     queda dada por el padding-top + border-top del :not(:first-child).
     Mobile mantiene su 56px original (más aire en viewport angosto). */
  body.view-catalog .cat-row { margin-bottom: 0; }
  body.view-catalog .cat-row:not(:first-child) { padding-top: 24px; }
}

/* Tablet medium (vista categoría sigue con grid auto-fill heredado) */
@media (min-width: 600px) and (max-width: 1023px) {
  /* Filas catálogo: 2 columnas en ancho medio (más cómodo que scroll snap) */
  body.view-catalog .cat-row-grid {
    grid-auto-columns: 45%;
  }
}

/* ── Focus accesible global dentro del módulo ────────────── */
.shop-sidebar button:focus-visible,
.shop-sidebar a:focus-visible,
.shop-sidebar input:focus-visible,
.shop-sidebar select:focus-visible,
.drawer button:focus-visible,
.drawer a:focus-visible,
.drawer input:focus-visible,
.drawer select:focus-visible,
.mobile-cat-bar button:focus-visible,
.mobile-cat-bar select:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}