/* Tienda, categorías, búsqueda y carrito — boceto págs. 3 y 7 */

/* ---------- Cabecera del catálogo ---------- */
.catalog__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.catalog__head .grow { min-width: 220px; }
.catalog__tools { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.catalog__tools .select { width: auto; min-width: 190px; }
.catalog__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.catalog__bar .select { width: auto; min-width: 180px; }
.catalog__count { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); }
.catalog__chips { margin-bottom: var(--sp-4); }

.view-toggle { display: inline-flex; border: var(--border-strong); border-radius: var(--r-sm); overflow: hidden; background: var(--c-surface); }
.view-toggle__btn { display: grid; place-items: center; width: 38px; height: 36px; color: var(--c-muted); }
.view-toggle__btn + .view-toggle__btn { border-left: var(--border-strong); }
.view-toggle__btn:hover { color: var(--c-ink); background: var(--c-surface-2); }
.view-toggle__btn.is-active { background: var(--c-ink); color: #fff; }
.view-toggle__btn .icon { width: 18px; height: 18px; }

/* ---------- Filtros ---------- */
.filters { display: grid; gap: var(--sp-1); }
.filters__head { margin-bottom: var(--sp-2); }
.filter-group { padding: var(--sp-3) 0; border-top: var(--border); }
.filters__head + .filter-group, .filters__head + input + .filter-group { border-top: 0; }
.filter-group > legend { float: left; width: 100%; padding: 0; }
.filter-group > legend + * { clear: both; }
.filter-group__title { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-ink); }
.filter-all { padding: 5px 8px; margin: 0 -8px 2px; border-radius: var(--r-sm); }
.filter-all.is-current { background: var(--c-surface-2); font-weight: var(--fw-semibold); outline: 1px solid var(--c-line-strong); }
.filters__apply { position: sticky; bottom: 0; padding-top: var(--sp-4); background: var(--c-surface); }

/* Panel de filtros: lateral en escritorio, inferior en móvil */
@media (min-width: 1024px) {
  .filters-drawer { position: static; visibility: visible; pointer-events: auto; display: block; }
  .filters-drawer .drawer__backdrop { display: none; }
  .filters-drawer .drawer__panel { position: static; width: auto; height: auto; transform: none; box-shadow: none; background: transparent; overflow: visible; }
}
@media (max-width: 1023.98px) {
  .filters-drawer .filters { border: 0; border-radius: 0; padding: var(--sp-2) var(--sp-4) var(--sp-4); }
}

/* ---------- Búsqueda ---------- */
.search-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 140% at 70% 50%, var(--c-brand-50), transparent 70%),
    repeating-linear-gradient(120deg, transparent 0 22px, rgba(20, 20, 20, 0.03) 22px 23px),
    var(--c-surface);
  border-bottom: var(--border);
}
.search-hero__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); min-height: 168px; padding-block: var(--sp-6); }
.search-hero__label { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--c-ink-2); }
.search-hero__title { margin: var(--sp-1) 0; font-size: var(--fs-3xl); word-break: break-word; }
.search-hero__count { margin: 0; color: var(--c-muted); }
.search-hero__form { margin-top: var(--sp-4); max-width: 520px; }
.search-hero__art { width: 170px; height: auto; opacity: 0.9; transform: rotate(-6deg); filter: drop-shadow(0 10px 18px rgba(20, 20, 20, 0.16)); }
@media (max-width: 639.98px) { .search-hero__art { display: none; } }

.term-list { display: grid; gap: 2px; }
.term-list li { display: flex; align-items: center; gap: var(--sp-1); }
.term-list a { display: flex; align-items: center; gap: var(--sp-2); flex: 1 1 auto; min-width: 0; padding: 7px var(--sp-2); border-radius: var(--r-sm); font-size: var(--fs-sm); }
.term-list a:hover { background: var(--c-surface-2); color: var(--c-ink); }
.term-list .icon { color: var(--c-muted); }

/* ---------- Carrito ---------- */
.cart-layout { display: grid; gap: var(--sp-6); align-items: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .cart-layout { grid-template-columns: minmax(0, 1fr) 360px; } }
.cart-item {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: var(--border);
}
.cart-item:last-child { border-bottom: 0; }
.cart-item .art { border-radius: var(--r-sm); }
.cart-item__name { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.cart-item__aside { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); }
@media (max-width: 559.98px) {
  .cart-item { grid-template-columns: 72px minmax(0, 1fr); padding: var(--sp-4); }
  .cart-item__aside { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
}
.summary { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
.coupon-form { display: flex; gap: var(--sp-2); }
.coupon-form .input { text-transform: uppercase; }
.secure-note { display: flex; gap: var(--sp-2); align-items: center; font-size: var(--fs-xs); color: var(--c-muted); justify-content: center; }