:root { --ms-header-h: 200px; }

/* Solo tienda (y taxonomías de productos si quieres) */
.ms-archive-page {
  padding-top: var(--ms-header-h);
}

.ms-archive-filters {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 16px;
  position: sticky;
  top: calc(var(--ms-header-h) - 40px); /* <-- aquí el cambio */
  height: max-content;
  flex: 0 0 280px;
}

.tax-product_cat .ms-archive-page,
.tax-product_tag .ms-archive-page {
  padding-top: var(--ms-header-h);
}

/* ---------- Barra superior (DIV 1) ---------- */
.ms-archive-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.ms-archive-title {
  font: 700 32px/1 "Fira Sans Condensed", system-ui;
  color: #3A3A3A;
  margin: 0;
}

.ms-archive-tools {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ---------- Layout principal en FLEX (DIV 2 + DIV 3) ---------- */
.ms-archive-flex {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width:1024px) {
  .ms-archive-flex {
    flex-direction: row;
    gap: 28px;
  }
}

/* ---------- DIV 2: Filtros (sticky) ---------- */

@media (max-width:1023px) {
  .ms-archive-filters {
    position: static;
    flex: 0 0 auto;
  }
}

.ms-filter-title {
  font: 700 18px/1 "Fira Sans Condensed", system-ui;
  margin: 0 0 12px;
  color: #3A3A3A;
}

.ms-filters-empty {
  color: #6B7280;
  font: 400 14px/18px "Fira Sans Condensed", system-ui;
}

/* ---------- DIV 3: Productos ---------- */
.ms-archive-products {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---------- Grid SOLO para productos ---------- */
.woocommerce ul.products,
ul.products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* móvil: 2 */
}

@media (min-width:1024px) {

  .woocommerce ul.products,
  ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* desktop: 3 */
    gap: 28px;
  }
}

/* Reset legado de Woo (evitar huecos) */
.woocommerce ul.products li.product {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  clear: none !important;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none !important;
}

/* ---------- Tarjeta: que llene la celda del grid ---------- */
ul.products li.product .ms-rel-card {
  width: 100%;
}

/* Imagen y botón adaptativos dentro del grid */
ul.products li.product .ms-rel-card__imgbox {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  /* cuadrado fluido */
}

ul.products li.product .ms-rel-card__btn {
  width: 100%;
}

/* ---------- Ayudas visuales para tu card (coincide con single) ---------- */
.ms-rel-card a {
  text-decoration: none;
}

.ms-rel-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ms-rel-brand-label {
  margin-top: 10px;
  font: 400 16px/20px "Fira Sans Condensed", sans-serif;
  color: #3A3A3A;
}

.ms-rel-brand {
  display: block;
  font: 700 20px/100% "Fira Sans Condensed", sans-serif;
  color: #3A3A3A;
  margin-top: 4px;
}

.ms-rel-sku {
  margin-top: 8px;
  font: 400 14px/18px "Fira Sans Condensed", sans-serif;
  color: #3A3A3A;
}

.ms-rel-sku b {
  font-weight: 700;
}

.ms-rel-price {
  margin: 20px 0;
  font: 700 20px/100% "Fira Sans Condensed", sans-serif;
  color: #3A3A3A !important;
}

.ms-rel-price span {
  color: #3A3A3A !important;
}

.ms-rel-card__btn {
  margin-top: 12px;
  height: 40px;
  border-radius: 4px;
  background: #1661A4;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 700 14px/1 "Fira Sans Condensed", sans-serif;
  text-decoration: none;
}

.ms-rel-card__btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

/* ---------- Paginación ---------- */
.ms-archive-pagi {
  margin-top: 24px;
}

.ms-rel-card__imgbox {
  width: 255px;
  height: 255px;
  border: 1px solid #DFDFDF;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff
}

/* Barra superior */
.ms-archive-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}

.ms-archive-bar__left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ms-archive-count {
  color: #6B7280;
  font: 400 14px/18px "Fira Sans Condensed", sans-serif;
}

/* Bloque de orden y vistas a la derecha */
.ms-archive-tools {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ms-order-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  padding: 8px 12px;
}

.ms-order-label {
  color: #3A3A3A;
  font: 700 14px/1 "Fira Sans Condensed", sans-serif;
}

.ms-order-select .woocommerce-ordering {
  margin: 0;
}

.ms-order-select select.orderby {
  border: 0;
  background: transparent;
  font: 700 14px/1 "Fira Sans Condensed", sans-serif;
  padding: 8px;
}

/* Botones de vista (lista / grid) */
.ms-view {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ms-view__btn {
  gap: 6px;
  border-radius: 8px;
  padding: 5px 5px;
  cursor: pointer;
  color: #3A3A3A;
  border: 1px solid transparent;
  font: 700 10px/1 "Fira Sans Condensed", sans-serif;
}

.ms-view__btn svg {
  display: block;
}

.ms-view__btn.is-active {
  background: #efefef;
}

/* Responsive: en móvil apila el contador bajo el título y deja la barra a la derecha abajo */
@media (max-width: 1023px) {
  .ms-archive-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .ms-archive-tools {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* ===== Breadcrumbs (arriba del título) */
.ms-bc {
  margin-bottom: 6px;
  
}

.ms-bc__wrap {
  color: #9CA3AF;
  font: 400 14px/1 "Fira Sans Condensed", sans-serif;
}

.ms-bc__item {
  color: #9CA3AF;
}

.ms-bc__item a {
  color: #9CA3AF;
  text-decoration: none;
}

.ms-bc__item a:hover {
  color: #1661A4;
}

.ms-bc__wrap>.ms-bc__item:last-child {
  color: #1661A4;
  font-weight: 700;
  font-size: 14px;
}

/* Título + contador */
.ms-archive-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}

.ms-archive-bar__left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ms-archive-title {
  font: 700 32px/1 "Fira Sans Condensed", system-ui;
  color: #3A3A3A;
  margin: 0;
}

.ms-archive-count {
  color: #6B7280;
  font: 700 14px/1 "Fira Sans Condensed", sans-serif;
}

.ms-archive-count .ms-count-num {
  color: #3A3A3A;
}

/* Orden + vistas (ya lo tenías) */
.ms-archive-tools {
  display: flex;
  align-items: center;
  gap: 16px;
}


.ms-order-select .woocommerce-ordering {
  margin: 0;
}

.ms-view {
  display: flex;
  align-items: center;
  gap: 8px;
}



@media (max-width:1023px) {
  .ms-archive-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .ms-archive-tools {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* Pills / etiquetas */
.ms-product-labels {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 10;
  display: flex;
  flex-direction: row;
  gap: 10px
}

.ms-product-label {
  width: max-content;
  min-width: 84px;
  min-height: 20px;
  line-height: 1.2;
  background: #0189BD;
  color: #fff;
  border-radius: 4px;
  padding: 2px 8px;
  font: 600 11px/1.2 "Fira Sans Condensed", sans-serif;
  letter-spacing: .5px;
  text-transform: uppercase;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
  white-space: nowrap;
  display: flex;
  justify-content: center;
  padding-top: 4px
}

@media(max-width:768px) {
  .ms-rel-card__imgbox {
    width: 165px;
    height: 165px;

  }

  .ms-product-label {
    min-width: auto;
  }

  .ms-order-wrap {
    gap: 8px;
    border-radius: 8px;
    padding: 0px;
    width: 100%;
    justify-content: space-between;
  }
}