/* ==========================================================================
   Página de categoría — se dibuja con js/category-page.js + el escaparate de productos
   Reutiliza la ruta de navegación de la ficha (.pp__breadcrumb) y las tarjetas del escaparate.
   ========================================================================== */

body { background: #fff; }

.cp { padding-bottom: 64px; }
.cp:focus { outline: none; }

.cp__head {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 100px 8px;
}

/* Ruta de navegación (mismos estilos que en la ficha de producto) */
.pp__breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  font-weight: 300;
  color: #525252;
}
.pp__breadcrumb li + li::before { content: "/"; margin-right: 4px; color: #949494; }
.pp__breadcrumb a { text-decoration: underline; text-underline-offset: 2px; }
.pp__breadcrumb a:hover { color: #751fff; }
.pp__breadcrumb [aria-current] { color: #000; }

.cp__title {
  margin: 0 0 6px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
}

.cp__count {
  margin: 0 0 24px;
  color: #525252;
  font-size: 15px;
  font-weight: 300;
}

/* Subcategorías como "píldoras" con su número de artículos */
.cp__subs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cp__sub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid #c8c8c8;
  border-radius: 40px;
  font-size: 15px;
  transition: border-color .3s ease, color .3s ease, background-color .3s ease;
}
.cp__sub:hover { border-color: #751fff; color: #751fff; }
.cp__sub.is-empty { color: #949494; }
.cp__sub-count {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: #edecec;
  color: #525252;
  font-size: 12px;
  font-weight: 700;
}
.cp__sub:focus-visible { outline: 2px solid #751fff; outline-offset: 2px; }

/* El escaparate ocupa todo el ancho, sin el recuadro de la portada */
.cp .products { padding: 0; }
.cp .products__box { padding: 24px 100px 0; }

.cp__empty {
  max-width: 1400px;
  margin: 24px auto 0;
  padding: 48px 100px;
  color: #525252;
  font-size: 17px;
  font-weight: 300;
}

.cp__head--notfound {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 80px 24px;
  text-align: center;
}
.cp__lead { margin: 0 0 12px; font-size: 17px; font-weight: 300; }

@media (max-width: 1100px) {
  .cp__head { padding: 32px 32px 8px; }
  .cp .products__box { padding: 24px 32px 0; }
  .cp__empty { padding: 40px 32px; }
}

@media (max-width: 700px) {
  .cp__head { padding: 24px 16px 4px; }
  .cp__title { font-size: 26px; }
  .cp .products__box { padding: 16px 16px 0; }
  .cp__empty { padding: 32px 16px; }
}