/* ==========================================================================
   Tienda y archivos de producto (woocommerce/archive-product.php)
   Cabecera, subcategorías, barra de filtros, estado vacío y paginación.
   El grid y la card: components/product-card.css. Las migas:
   components/breadcrumb.css.
   ========================================================================== */

/* ---------- Reset dentro de la tienda ----------
   Igual que en la home: Divi da padding-bottom a p y h*, y márgenes a las listas.
   `:where(.shop) p` pesa 0-0-1: le gana a Divi y pierde contra cualquier clase. */
:where(.shop) :is(h1, h2, h3, p, ul, ol, li) {
  margin: 0;
  padding: 0;
}
:where(.shop) :is(ul, ol) { list-style: none; }
:where(.shop) img { display: block; }
:where(.shop) a { text-decoration: none; }

.shop { padding-bottom: var(--section-space); }

/* ---------- Cabecera ---------- */
.shop-header {
  border-bottom: 1px solid var(--color-line);
  background: var(--color-cream);
}

.shop-header__inner { padding-block: 32px 56px; }

.shop-header .breadcrumb { margin-bottom: 48px; }

.shop-header__eyebrow { margin-bottom: 14px; }

.shop-header__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 400;
  line-height: 1;
}

.shop-header__description {
  max-width: 64ch;
  margin-top: 20px;
  color: var(--color-graphite);
  font-size: var(--fs-md);
  line-height: 1.6;
}
.shop-header__description p + p { margin-top: 0.75em; }
.shop-header__description a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Subcategorías ---------- */
.shop-subcats { padding-top: 32px; }

.shop-subcats__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.shop-subcats__item { flex-shrink: 0; }

.shop-subcats__link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--color-line-strong);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.shop-subcats__link:hover { border-color: var(--color-ink); color: var(--color-ink); }
.shop-subcats__link[aria-current="page"] {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-white);
}

/* ---------- Barra de filtros ---------- */
.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin: 32px 0 40px;
  padding-block: 14px;
  border-block: 1px solid var(--color-line);
  font-family: var(--font-sans);
}

.shop-toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
}

.shop-filter {
  display: flex;
  align-items: center;
  gap: 10px;
}

.shop-filter__label {
  margin: 0;
  color: var(--color-graphite);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* Pisa el select de base.css (100% de ancho, 48px): en la barra va compacto */
.shop-filter__select {
  width: auto;
  min-height: 40px;
  padding: 0 36px 0 12px;
  border: 1px solid var(--color-line-strong);
  background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 14px;
  color: var(--color-ink);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.shop-filter__select:hover { border-color: var(--color-ink); }

.shop-filter__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  color: var(--color-ink);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
}
.shop-filter__toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

.shop-toolbar__submit.button { --button-height: 40px; --button-padding-x: 20px; }

.shop-toolbar__meta {
  display: flex;
  align-items: center;
  gap: 20px;
}

.shop-toolbar__count {
  color: var(--color-graphite);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.shop-toolbar__clear {
  color: var(--color-ink);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Estado vacío ---------- */
.shop-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 560px;
  padding-block: 64px 16px;
}

.shop-empty__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 400;
  line-height: 1.05;
}

.shop-empty__text {
  margin-bottom: 8px;
  color: var(--color-graphite);
}

/* ---------- Paginación (loop/pagination.php nativo) ----------
   WooCommerce la dibuja con bordes y floats (`.woocommerce nav.woocommerce-pagination
   ul li a`, 0-3-4). Estos selectores pesan más sin necesidad de !important. */
body.byc nav.woocommerce-pagination {
  margin-top: 64px;
  text-align: center;
}

body.byc nav.woocommerce-pagination ul.page-numbers {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

body.byc nav.woocommerce-pagination ul.page-numbers li {
  float: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
}

body.byc nav.woocommerce-pagination ul.page-numbers li .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 1px solid var(--color-line-strong);
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

body.byc nav.woocommerce-pagination ul.page-numbers li a.page-numbers:hover,
body.byc nav.woocommerce-pagination ul.page-numbers li a.page-numbers:focus-visible,
body.byc nav.woocommerce-pagination ul.page-numbers li span.page-numbers.current {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-white);
}

body.byc nav.woocommerce-pagination ul.page-numbers li span.page-numbers.dots {
  min-width: 24px;
  border-color: transparent;
}

/* ---------- Responsive ---------- */
@container site (max-width: 1023px) {
  .shop-header__title { font-size: 3rem; }
}

@container site (max-width: 767px) {
  .shop-header__inner { padding-block: 24px 36px; }
  .shop-header .breadcrumb { margin-bottom: 28px; }
  .shop-header__title { font-size: 2.5rem; }
  .shop-header__description { font-size: var(--fs-base); }

  /* Chips en una sola fila con scroll horizontal, de borde a borde */
  .shop-subcats { padding-top: 24px; }
  .shop-subcats__list {
    flex-wrap: nowrap;
    margin-inline: -20px;
    padding-inline: 20px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .shop-subcats__list::-webkit-scrollbar { display: none; }

  .shop-toolbar { margin: 24px 0 28px; }
  .shop-toolbar__filters { width: 100%; gap: 8px 20px; }
  .shop-filter { flex: 1 1 100%; justify-content: space-between; }
  .shop-filter__select { flex: 1; max-width: 70%; }
  .shop-toolbar__meta { width: 100%; justify-content: space-between; }

  .shop-empty__title { font-size: 2.125rem; }

  body.byc nav.woocommerce-pagination { margin-top: 48px; }
}