/* ────────────────────────────────────────────────────────────
   catalog.css — scoped styles for /tienda/ + /categoria-producto/*
   ────────────────────────────────────────────────────────────
   Reuses design tokens from main.css. Overrides only what the
   catalog page and product card need. All rules are scoped under
   `.lenas-catalog` (page) or `.product-card` (grid item) so the
   rest of the site is untouched.
   ────────────────────────────────────────────────────────────*/

/* ── Layout ───────────────────────────────────────────────── */
.lenas-catalog {
  background: #fff;
  padding: 32px 0 96px;
}
.lenas-catalog__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
}
.lenas-catalog__breadcrumb {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.lenas-catalog__breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.lenas-catalog__breadcrumb a:hover { color: var(--color-teal); }
.lenas-catalog__breadcrumb .crumb-sep { color: #C0B5A5; }
.lenas-catalog__breadcrumb .current { color: var(--color-text); font-weight: 600; }

.lenas-catalog__header {
  margin: 8px 0 32px;
  max-width: 720px;
}
.lenas-catalog__title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
  text-transform: capitalize;
}
.lenas-catalog__subtitle {
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

.lenas-catalog__body {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  align-items: start;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.lenas-catalog__sidebar {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding-right: 4px;
}
.lenas-catalog__sidebar::-webkit-scrollbar { width: 6px; }
.lenas-catalog__sidebar::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }

.filter-block { border-bottom: 1px solid #F0E6D3; padding-bottom: 24px; }
.filter-block:last-child { border-bottom: 0; }
.filter-block__title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text);
  margin: 0 0 12px;
}

/* Quick chips */
.quick-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-chips .chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--apple-gray);
  color: var(--color-text);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  transition: all 0.2s;
}
.quick-chips .chip:hover { background: #F0E6D3; }
.quick-chips .chip.is-active {
  background: var(--color-teal);
  color: #fff;
  border-color: var(--color-teal);
}

/* Price form */
.filter-price__row { display: flex; gap: 10px; margin-bottom: 12px; }
.filter-price__row label { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--color-text-muted); }
.filter-price__row input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--color-text);
  background: #fff;
}
.filter-price__row input:focus { outline: 2px solid var(--color-teal); border-color: transparent; }
.filter-price__submit {
  width: 100%;
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--color-navy);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.filter-price__submit:hover { background: var(--color-navy-light); }

/* Filter list (cats, brands) */
.filter-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.filter-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--color-text);
  font-size: 14px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.filter-list a:hover { background: var(--apple-gray); }
.filter-list a.is-active {
  background: var(--color-navy);
  color: #fff;
  font-weight: 600;
}
.filter-list a.is-active .count { color: rgba(255,255,255,0.7); }
.filter-list .count { font-size: 12px; color: var(--color-text-muted); }

/* ── Toolbar (count + sort) ───────────────────────────────── */
.lenas-catalog__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #F0E6D3;
  flex-wrap: wrap;
}
.lenas-catalog__toolbar .result-count {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 14px;
}
.lenas-catalog__toolbar .result-count strong { color: var(--color-text); font-weight: 700; }
.lenas-catalog__sort select {
  padding: 9px 36px 9px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'><path fill='none' stroke='%237A6A5A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/></svg>") no-repeat right 14px center;
  font-size: 14px;
  color: var(--color-text);
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  min-width: 220px;
}
.lenas-catalog__sort select:focus { outline: 2px solid var(--color-teal); border-color: transparent; }

/* ── Grid ─────────────────────────────────────────────────── */
.lenas-catalog__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (min-width: 640px)  { .lenas-catalog__grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 900px)  { .lenas-catalog__grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 1280px) { .lenas-catalog__grid { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 24px; } }

/* ── Empty state ──────────────────────────────────────────── */
.lenas-catalog__empty {
  padding: 64px 24px;
  text-align: center;
  color: var(--color-text-muted);
  background: var(--apple-gray);
  border-radius: 16px;
}
.lenas-catalog__empty p { margin: 0 0 16px; font-size: 15px; }
.lenas-catalog__empty .btn-reset {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--color-teal);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.2s;
}
.lenas-catalog__empty .btn-reset:hover { background: var(--color-teal-dark); }

/* ── Pagination ───────────────────────────────────────────── */
.lenas-catalog__pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 40px 0 0;
  flex-wrap: wrap;
}
.lenas-catalog__pagination a,
.lenas-catalog__pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 0 14px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s;
}
.lenas-catalog__pagination a:hover { border-color: var(--color-teal); color: var(--color-teal); }
.lenas-catalog__pagination .current {
  background: var(--color-navy);
  color: #fff;
  border-color: var(--color-navy);
}
.lenas-catalog__pagination .dots {
  border: 0;
  background: transparent;
  min-width: auto;
  padding: 0 4px;
}

/* ── Responsive: sidebar collapses on mobile ──────────────── */
@media (max-width: 899px) {
  .lenas-catalog__body { grid-template-columns: 1fr; gap: 24px; }
  .lenas-catalog__sidebar {
    position: static;
    max-height: none;
    overflow: visible;
    order: 2;
    padding: 24px;
    background: var(--apple-gray);
    border-radius: 16px;
    gap: 20px;
  }
  .lenas-catalog__main { order: 1; }
}

/* ────────────────────────────────────────────────────────────
   Product-card refinements (prod parity)
   Base rules live in main.css — only additive/fix rules here.
   ────────────────────────────────────────────────────────────*/

/* Stronger card radius, subtle border for grid cohesion */
.lenas-catalog__grid .product-card {
  border-radius: 16px;
  border: 1px solid rgba(212,196,176,0.35);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.lenas-catalog__grid .product-card:hover {
  box-shadow: 0 12px 32px rgba(196,86,26,0.10);
  transform: translateY(-3px);
  border-color: rgba(196,86,26,0.25);
}

/* Image link should not underline */
.product-card__image { display: block; text-decoration: none; }
.product-card__image img { display: block; }

/* Out-of-stock overlay */
.product-card__oos-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.7);
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 13px;
}
.product-card--out { opacity: 0.85; }

/* Name link resets */
.product-card__name-link { text-decoration: none; }

/* Rating row */
.product-card__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 18px;
}
.product-card__rating--empty { min-height: 18px; }
.product-card__rating .stars {
  --pct: calc(var(--rating, 0) / 5 * 100%);
  display: inline-block;
  position: relative;
  width: 78px;
  height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 14'><g fill='%23D4C4B0'><path d='M7 1l1.8 3.7 4.1.6-3 2.9.7 4.1L7 10.4 3.4 12.3l.7-4.1-3-2.9 4.1-.6z'/><path d='M23 1l1.8 3.7 4.1.6-3 2.9.7 4.1L23 10.4l-3.6 1.9.7-4.1-3-2.9 4.1-.6z'/><path d='M39 1l1.8 3.7 4.1.6-3 2.9.7 4.1L39 10.4l-3.6 1.9.7-4.1-3-2.9 4.1-.6z'/><path d='M55 1l1.8 3.7 4.1.6-3 2.9.7 4.1L55 10.4l-3.6 1.9.7-4.1-3-2.9 4.1-.6z'/><path d='M71 1l1.8 3.7 4.1.6-3 2.9.7 4.1L71 10.4l-3.6 1.9.7-4.1-3-2.9 4.1-.6z'/></g></svg>") no-repeat left center;
}
.product-card__rating .stars::before {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--pct);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 14'><g fill='%23C4561A'><path d='M7 1l1.8 3.7 4.1.6-3 2.9.7 4.1L7 10.4 3.4 12.3l.7-4.1-3-2.9 4.1-.6z'/><path d='M23 1l1.8 3.7 4.1.6-3 2.9.7 4.1L23 10.4l-3.6 1.9.7-4.1-3-2.9 4.1-.6z'/><path d='M39 1l1.8 3.7 4.1.6-3 2.9.7 4.1L39 10.4l-3.6 1.9.7-4.1-3-2.9 4.1-.6z'/><path d='M55 1l1.8 3.7 4.1.6-3 2.9.7 4.1L55 10.4l-3.6 1.9.7-4.1-3-2.9 4.1-.6z'/><path d='M71 1l1.8 3.7 4.1.6-3 2.9.7 4.1L71 10.4l-3.6 1.9.7-4.1-3-2.9 4.1-.6z'/></g></svg>") no-repeat left center;
  overflow: hidden;
}
.product-card__rating .rating-count {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* Spacer */
.product-card__spacer { flex: 1 1 auto; }

/* Price row: don't force `margin-top:auto` from main.css when a spacer exists */
.product-card__price-row { margin-top: 4px; }

/* Stock dot alignment */
.product-card__stock { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.product-card__stock .dot { line-height: 1; font-size: 10px; }

/* CTA button — force pill + prod colours; override the WC `.button` default. */
.woocommerce a.btn-cart,
.woocommerce button.btn-cart,
.lenas-catalog__grid a.btn-cart,
.product-card a.btn-cart,
.product-card button.btn-cart {
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--color-teal);
  color: #fff !important;
  font-size: clamp(11px, 2.6vw, 14px);
  font-weight: 600;
  text-decoration: none;
  border: 0;
  margin-top: 10px;
  transition: background 0.2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.woocommerce a.btn-cart:hover,
.woocommerce button.btn-cart:hover,
.product-card a.btn-cart:hover,
.product-card button.btn-cart:hover { background: var(--color-teal-dark); }
.product-card a.btn-cart.btn-cart--disabled,
.product-card a.btn-cart[aria-disabled="true"] {
  background: var(--apple-gray);
  color: var(--color-text-muted) !important;
  cursor: not-allowed;
  opacity: 0.7;
  pointer-events: none;
}
.product-card a.btn-cart.added,
.product-card button.btn-cart.added { background: var(--color-green); }

/* WooCommerce reset — the theme's `.button` default should not override our chip */
.woocommerce .product-card a.button,
.woocommerce .product-card button.button { border-radius: 999px; }

/* Visually hidden helper (sort label) */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}