/* MiratechSpA — Tienda (catálogo con filtros) */

/* ===== Breadcrumb ===== */
.shop-breadcrumb { padding: 16px 28px 12px; }

/* ===== Page head ===== */
.shop-head {
  background: linear-gradient(165deg, var(--marine-900) 0%, var(--marine-700) 55%, var(--marine-600) 100%);
  color: #fff;
  padding: 32px 0 36px;
  position: relative; overflow: hidden;
}
.shop-head::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(640px 320px at 88% -20%, rgba(76,139,162,.5), transparent 65%);
}
.shop-head .wrap { position: relative; z-index: 1; }
.shop-head .eyebrow { color: var(--steel-200); }
.shop-head .eyebrow::before { background: var(--steel-300); }
.shop-head h1 { color: #fff; font-size: clamp(24px, 2.8vw, 34px); font-weight: var(--fw-extra); margin-top: 10px; }
.shop-head p { color: var(--slate-300); margin-top: 8px; font-size: var(--fs-md); max-width: 560px; }

/* Acotado al ancho de .wrap (1200px), como el carrusel de banners que reemplaza:
   el fondo pasa de full-bleed a vivir dentro de .wrap, con bordes redondeados. */
.shop-head--acotado {
  background: none;
  padding: 0;
  margin: 26px 0;
}
.shop-head--acotado .wrap {
  background: linear-gradient(165deg, var(--marine-900) 0%, var(--marine-700) 55%, var(--marine-600) 100%);
  border-radius: var(--radius-lg);
  padding: 32px 28px 36px;
  overflow: hidden;
}
.shop-head--acotado::after { display: none; }
.shop-head--acotado .wrap::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(640px 320px at 88% -20%, rgba(76,139,162,.5), transparent 65%);
}
.shop-head--acotado .wrap > * { position: relative; z-index: 1; }

/* ===== Layout ===== */
.shop-layout { display: grid; grid-template-columns: 264px 1fr; gap: 32px; align-items: start; padding-top: 26px; padding-bottom: 60px; }

/* FAB de filtros + cabecera/pie del drawer: solo existen en móvil (ver @media). */
.filtros-fab, .filtros-overlay, .f-side-head, .f-side-close, .f-side-done { display: none; }

/* ===== Sidebar filters ===== */
.f-side { position: sticky; top: 94px; display: grid; gap: 12px; }
.f-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 18px 18px 16px; }
.f-card h4 {
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 13px; display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px; border-bottom: 1px solid var(--border-subtle);
}
/* .f-wide (el card de búsqueda) es el primero del sidebar en desktop — un
   pequeño acento de marca en el borde superior le da al panel de filtros algo
   de la personalidad que el resto del sitio ya tiene (acentos de color por
   sección, ver need-card--volumen/institucional en landing.css), en vez de ser
   puro blanco/gris sin ningún momento de marca (reportado por Emmanuel: la
   tienda se siente más plana que la portada). Un solo acento arriba del
   sidebar entero alcanza — repetirlo en cada f-card se vería recargado. */
.f-card.f-wide { position: relative; overflow: hidden; }
.f-card.f-wide::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--steel-500), var(--marine-600));
}
.f-search { position: relative; }
.f-search input {
  width: 100%; padding: 11px 13px 11px 38px; border-radius: var(--radius-md);
  border: 1.5px solid var(--border-default); background: var(--surface-card);
  font-size: var(--fs-sm); color: var(--text-body); outline: none;
  transition: border-color 120ms, box-shadow 120ms;
}
.f-search input:focus { border-color: var(--focus-ring); box-shadow: 0 0 0 3px rgba(99,157,174,.18); }
.f-search .lucide, .f-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--steel-500); pointer-events: none; }

.f-opt { display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin: 0 -8px; cursor: pointer; border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--text-body); user-select: none; transition: background var(--dur-fast), color var(--dur-fast); }
.f-opt:hover { color: var(--text-strong); background: var(--surface-sunken); }
.f-opt input { accent-color: var(--brand-navy); width: 15px; height: 15px; cursor: pointer; }
.f-opt .f-n { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-subtle); }

.f-price { display: flex; align-items: center; gap: 8px; }
.f-price input {
  width: 100%; min-width: 0; padding: 9px 10px; border-radius: var(--radius-md);
  border: 1.5px solid var(--border-default); font-size: var(--fs-sm);
  font-family: var(--font-mono); color: var(--text-body); outline: none;
  background: var(--surface-card);
  transition: border-color 120ms, box-shadow 120ms;
}
.f-price input:hover { border-color: var(--border-strong); }
.f-price input:focus { border-color: var(--focus-ring); box-shadow: 0 0 0 3px rgba(99,157,174,.18); }
.f-price span { color: var(--text-subtle); font-size: var(--fs-sm); }

.f-clear {
  display: inline-flex; align-items: center; gap: 7px; width: 100%; justify-content: center;
  padding: 11px; border-radius: var(--radius-md); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--text-muted); border: 1.5px dashed var(--border-default);
  transition: color 120ms, border-color 120ms;
}
.f-clear:hover { color: var(--danger); border-color: var(--danger); }
.f-clear .lucide, .f-clear i { width: 15px; height: 15px; }

/* ===== Toolbar ===== */
.shop-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
/* Mismo lenguaje que .eyebrow (store.css: mono, mayúsculas, tracking ancho,
   acento steel) sin su línea decorativa (pensada para anteceder un título de
   sección, no un contador en línea) — la toolbar era el texto más plano de
   toda la tienda (gris parejo, sin ninguna seña de marca, reportado por
   Emmanuel). */
.shop-count {
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-muted);
}
.shop-count b { color: var(--steel-600); font-weight: var(--fw-bold); letter-spacing: 0; text-transform: none; }
.sort-wrap { margin-left: auto; display: flex; align-items: center; gap: 9px; font-size: var(--fs-sm); color: var(--text-muted); }
.sort-wrap select {
  padding: 9px 34px 9px 13px; border-radius: var(--radius-md); border: 1.5px solid var(--border-default);
  background: var(--surface-card); font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--text-strong); cursor: pointer; outline: none; appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7B88' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
  transition: border-color 120ms, box-shadow 120ms;
}
.sort-wrap select:focus { border-color: var(--focus-ring); box-shadow: 0 0 0 3px rgba(99,157,174,.18); }

/* Active filter chips */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.chips:empty { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface-accent-soft); border: 1px solid var(--steel-200);
  color: var(--steel-700); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  padding: 6px 8px 6px 12px; border-radius: 999px;
}
.chip button { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: var(--steel-600); transition: background 120ms, color 120ms; }
.chip button:hover { background: var(--steel-200); color: var(--steel-700); }
.chip button .lucide, .chip button i { width: 12px; height: 12px; }

/* ===== Product grid ===== */
/* Grid flexible: llena en columnas de ~280px y centra la fila cuando hay pocos
   productos (con 2 no quedan pegados a la izquierda con un hueco a la derecha). */
.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.p-card {
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out);
  animation: cardIn .45s var(--ease-out) both;
}
@keyframes cardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
/* Stagger por columna (no por índice absoluto: con paginación real el primer
   producto de la página 2 no debe esperar el delay acumulado de 20 cards
   anteriores) — las primeras 6 entran escalonadas ~60ms entre sí, dando el
   efecto "aparecen en cascada" en vez de todas a la vez de golpe (a pedido de
   Emmanuel: "algo moderno y profesional" al cargar/filtrar la tienda). Repite
   cada 6 con nth-child(6n+N) para que una fila más abajo no vuelva a esperar
   0.3s: solo importa el orden relativo dentro de la fila visible. */
.p-card:nth-child(6n+1) { animation-delay: 0ms; }
.p-card:nth-child(6n+2) { animation-delay: 60ms; }
.p-card:nth-child(6n+3) { animation-delay: 120ms; }
.p-card:nth-child(6n+4) { animation-delay: 180ms; }
.p-card:nth-child(6n+5) { animation-delay: 240ms; }
.p-card:nth-child(6n+6) { animation-delay: 300ms; }
@media (prefers-reduced-motion: reduce) {
  .p-card { animation: none; animation-delay: 0ms; }
}
.p-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--steel-200); }
/* Cuadrado + contain: las fotos de producto vienen en proporciones distintas y con
   `cover` se recortaban (a un mouse apaisado le cortaba media foto). Contenidas se ven
   completas y todas las tarjetas miden igual; el sobrante lo rellena el fondo. */
.p-thumb {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--surface-card);
  display: grid; place-items: center; border-bottom: 1px solid var(--border-subtle);
  /* Aire desde el contenedor: muchas fotos vienen recortadas al ras del producto y
     sin esto tocan los bordes de la tarjeta. */
  padding: 6%;
}
/* Sin padding: la mayoría de las fotos de producto ya traen su propio margen blanco,
   y sumarle otro dejaba el producto chico dentro de la tarjeta. */
.p-thumb img {
  width: 100%; height: 100%; object-fit: contain;
  display: block; transition: transform var(--dur-slow) var(--ease-out);
}
.p-card:hover .p-thumb img { transform: scale(1.06); }
/* Sin foto: el degradado de marca rellena la tarjeta (con foto el fondo es blanco). */
.p-thumb:not(:has(img)) { background: linear-gradient(155deg, var(--marine-50), var(--steel-50)); }
.p-thumb .lucide, .p-thumb > i { width: 54px; height: 54px; color: var(--steel-500); stroke-width: 1.4; transition: transform .32s var(--ease-out); }
.p-card:hover .p-thumb > i, .p-card:hover .p-thumb .lucide { transform: scale(1.1) rotate(-3deg); }
.p-badges { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; pointer-events: none; }
.p-badge {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide);
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
}
.p-badge.tag { background: var(--marine-700); color: #fff; }
.p-badge.sale { background: var(--danger-soft); color: var(--red-600); margin-left: auto; }
.p-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; gap: 0; }
.p-meta { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-subtle); margin-bottom: 7px; }
.p-meta .brand { color: var(--steel-600); font-weight: var(--fw-medium); }
.p-card h3 { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-strong); line-height: var(--lh-snug); min-height: 36px; letter-spacing: 0; margin-bottom: 8px; }
.p-rate { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-muted); }
.p-rate .stars { display: inline-flex; gap: 1px; color: var(--amber-500); }
.p-rate .stars .lucide, .p-rate .stars i { width: 13px; height: 13px; fill: currentColor; }
.p-rate .stars .off { color: var(--slate-300); fill: var(--slate-300); }
.p-stock { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); margin-left: auto; }
.p-stock .dot { width: 7px; height: 7px; border-radius: 50%; }
.p-stock.st-in { color: var(--green-600); } .p-stock.st-in .dot { background: var(--green-500); }
.p-stock.st-low { color: var(--amber-600); } .p-stock.st-low .dot { background: var(--amber-500); }
.p-stock.st-out { color: var(--text-subtle); } .p-stock.st-out .dot { background: var(--slate-400); }
/* .p-extra: pedido mínimo, unidad de venta, oferta — vacío no ocupa espacio */
.p-extra:empty { display: none; }
/* Mismo margin-left:auto que .p-stock (arriba): el "En stock" queda pegado a la
   derecha del card, así que el número de stock debe alinearse debajo de él, no
   a la izquierda del card. */
.p-extra { display: flex; justify-content: flex-end; }
.p-stock-count { font-size: var(--fs-2xs); color: var(--text-subtle); }
.p-price-row { display: flex; align-items: baseline; gap: 9px; margin: 10px 0 2px; }
.p-price { font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--brand-navy); letter-spacing: var(--ls-snug); }
.p-old { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-subtle); text-decoration: line-through; }
.p-iva { font-size: var(--fs-2xs); color: var(--text-subtle); margin-bottom: 14px; }
.p-link { display: block; color: inherit; text-decoration: none; }
.p-title-link { color: inherit; text-decoration: none; }
.p-title-link:hover { color: var(--brand-navy); }
.p-add {
  margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--surface-accent-soft); color: var(--brand-navy);
  font-weight: var(--fw-semibold); font-size: var(--fs-sm); padding: 11px; border-radius: var(--radius-md);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.p-add .lucide, .p-add i { width: 16px; height: 16px; }
.p-add:hover { background: var(--brand-navy); color: #fff; }
.p-add:disabled { background: var(--surface-sunken); color: var(--text-subtle); cursor: not-allowed; }

/* Cantidad + botón, la última fila de la tarjeta. El margin-top:auto que alineaba
   los botones al pie de todas las tarjetas se mudó del botón a este contenedor:
   ahora el bloque entero es lo último, y las tarjetas siguen parejas aunque los
   nombres de producto ocupen distinto alto. */
.p-buy { margin-top: auto; display: flex; align-items: stretch; gap: 8px; }
.p-buy .p-add { margin-top: 0; flex: 1 1 auto; min-width: 0; padding: 11px 8px; }
/* La tarjeta es angosta (~250px): el selector se aprieta un poco respecto de su
   tamaño base para que "Añadir" quepa en una línea. */
.p-buy .cantidad button { width: 27px; }
.p-buy .cantidad input { width: 30px; }

/* Empty state */
.shop-empty {
  grid-column: 1 / -1; text-align: center; padding: 80px 30px;
  border: 1.5px dashed var(--border-default); border-radius: var(--radius-xl); color: var(--text-muted);
}
.shop-empty .se-ico { width: 64px; height: 64px; border-radius: 50%; background: var(--surface-sunken); display: grid; place-items: center; margin: 0 auto 18px; color: var(--text-subtle); }
.shop-empty .se-ico .lucide, .shop-empty .se-ico i { width: 28px; height: 28px; }
.shop-empty h3 { font-size: var(--fs-md); margin-bottom: 6px; }

/* ===== Paginador ===== */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 36px; }
.pager-btn {
  display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px;
  border-radius: 10px; border: 1px solid var(--border-subtle); background: var(--surface-card);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-body);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.pager-btn i { width: 17px; height: 17px; }
@media (hover: hover) and (pointer: fine) {
  a.pager-btn:hover { border-color: var(--steel-300); color: var(--brand-navy); background: var(--surface-sunken); }
}
.pager-btn.is-current { background: var(--brand-navy); border-color: var(--brand-navy); color: #fff; cursor: default; }
.pager-btn.is-disabled { color: var(--text-subtle); opacity: .5; pointer-events: none; }
.pager-gap { padding: 0 4px; color: var(--text-subtle); font-weight: var(--fw-semibold); }

/* ===== Responsive ===== */
@media (max-width: 1080px) { .prod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 880px) {
  .shop-layout { grid-template-columns: 1fr; }
  .f-card.f-wide { grid-column: 1 / -1; }

  /* FAB flotante abajo a la izquierda. */
  .filtros-fab {
    display: inline-flex; align-items: center; gap: 9px;
    position: fixed; left: 16px; bottom: 20px; z-index: 60;
    padding: 13px 18px; border-radius: 999px;
    background: var(--brand-navy); color: #fff; cursor: pointer;
    font-size: var(--fs-sm); font-weight: var(--fw-semibold);
    box-shadow: 0 8px 24px rgba(17, 42, 61, 0.30);
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .filtros-fab:active { transform: scale(0.96); }
  .filtros-fab > i { width: 18px; height: 18px; }
  .filtros-n {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    display: inline-grid; place-items: center; font-size: var(--fs-2xs); font-weight: var(--fw-bold);
    background: var(--steel-400); color: var(--brand-navy);
  }
  /* Al abrir el drawer, el FAB se esconde para no tapar el panel. */
  .filtros-abiertos .filtros-fab { transform: translateX(-140%); }

  /* Fondo oscurecido. */
  .filtros-overlay {
    display: block; position: fixed; inset: 0; z-index: 70;
    background: rgba(17, 42, 61, 0.45); opacity: 0; visibility: hidden;
    transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
  }
  .filtros-abiertos .filtros-overlay { opacity: 1; visibility: visible; }
  /* Congela el scroll del fondo mientras el drawer está abierto. */
  body.filtros-abiertos { overflow: hidden; }

  /* El sidebar pasa a drawer que entra desde la izquierda. */
  .f-side {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 71;
    width: min(86vw, 340px); margin: 0;
    grid-template-columns: 1fr; align-content: start; gap: 12px;
    padding: 16px; overflow-y: auto;
    background: var(--surface-page); box-shadow: 4px 0 30px rgba(17, 42, 61, 0.18);
    transform: translateX(-100%);
    /* visibility oculta el drawer cerrado: desplazado solo con transform seguía
       contando para el área de scroll y corría la página hacia un costado. */
    visibility: hidden;
    transition: transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
  }
  .filtros-abiertos .f-side { transform: none; visibility: visible; }

  /* Cabecera del drawer con botón cerrar. */
  .f-side-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 12px; margin-bottom: 2px; border-bottom: 1px solid var(--border-subtle);
    font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text-strong);
  }
  .f-side-head > span { display: inline-flex; align-items: center; gap: 9px; }
  .f-side-head > span i { width: 18px; height: 18px; color: var(--steel-600); }
  .f-side-close {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
    color: var(--text-muted); cursor: pointer; transition: background var(--dur-fast) var(--ease-out);
  }
  .f-side-close:hover { background: var(--surface-sunken); }
  .f-side-close i { width: 18px; height: 18px; }

  /* Pie del drawer: botón de ancho completo, pegajoso abajo. */
  .f-side-done {
    display: block; position: sticky; bottom: 0; margin-top: 8px;
    padding: 14px; border-radius: 12px; cursor: pointer;
    background: var(--brand-navy); color: #fff;
    font-size: var(--fs-base); font-weight: var(--fw-semibold);
  }
}
@media (max-width: 560px) {
  .prod-grid { grid-template-columns: 1fr; }
  .f-side { grid-template-columns: 1fr; }
  .sort-wrap { margin-left: 0; width: 100%; }
  .sort-wrap select { flex: 1; }
  .shop-breadcrumb { padding: 12px 16px 10px; }
  .shop-head { padding: 24px 0 28px; }
  .shop-layout { padding-top: 20px; padding-bottom: 44px; }
}