/* Estilos de tienda.html — extraidos desde el bloque <style> incrustado. */

/* ── TIENDA: BANNER ────────────────────────────────── */
.tda-banner {
  background: #071a0c;
  padding: 56px 0 48px;
  position: relative;
  overflow: hidden;
}
.tda-banner::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  border: 1px solid rgba(201,169,110,.05);
  right: -120px; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.tda-banner-inner {
  position: relative; z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.tda-banner-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: #c9a96e;
  margin-bottom: 16px;
}
.tda-banner-tag::before { content: ''; display: block; width: 28px; height: 1px; background: #c9a96e; }
.tda-banner h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 900;
  line-height: 1.0;
  color: white;
}
.tda-banner h1 em { font-style: italic; color: #c9a96e; }
.tda-banner-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.tda-search-inline {
  display: flex;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 2px;
  overflow: hidden;
}
.tda-search-inline input {
  border: none;
  padding: 12px 18px;
  font-size: 15px;
  background: transparent;
  color: white;
  font-family: 'DM Sans', sans-serif;
  width: 220px;
  outline: none;
}
.tda-search-inline input::placeholder { color: rgba(255,255,255,.3); }
.tda-search-inline button {
  background: #c9a96e;
  color: #071a0c;
  border: none;
  padding: 12px 18px;
  font-size: 14px;
  cursor: pointer;
  transition: background .2s;
}
.tda-search-inline button:hover { background: #b8934e; }

/* ── TIENDA: LAYOUT ────────────────────────────────── */
.tda-layout {
  background: #f5f0e8;
  padding: 40px 0 80px;
}
.tienda-layout { gap: 32px !important; }

/* ── SIDEBAR ───────────────────────────────────────── */
.sidebar-card {
  background: white !important;
  border-radius: 2px !important;
  border-color: rgba(7,26,12,.07) !important;
}
.sidebar-card h3 {
  font-family: 'DM Sans', sans-serif !important;
  letter-spacing: 2px !important;
  color: #071a0c !important;
}
.sidebar-card h3 i { color: #c9a96e !important; }
.filter-option { font-family: 'DM Sans', sans-serif !important; }
.filter-option:hover { color: #1a5c2e !important; }
.filter-option input[type=checkbox] { accent-color: #1a5c2e !important; }
.price-range input { border-radius: 2px !important; font-family: 'DM Sans', sans-serif !important; }
.price-range input:focus { border-color: #1a5c2e !important; }
.size-btn {
  border-radius: 2px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
}
.size-btn.active {
  border-color: #1a5c2e !important;
  color: #1a5c2e !important;
  background: #f0faf4 !important;
}

/* Apply / Clear buttons */
.sidebar-card .btn {
  border-radius: 2px !important;
  font-family: 'DM Sans', sans-serif !important;
  letter-spacing: 1px !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
}

/* ── TOOLBAR ───────────────────────────────────────── */
.toolbar {
  background: white;
  border-radius: 2px;
  padding: 14px 20px;
  border: 1px solid rgba(7,26,12,.07);
  margin-bottom: 20px !important;
}
.results-count {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  color: #5a6472 !important;
}
.results-count strong { color: #071a0c !important; font-family: 'Playfair Display', serif !important; font-size: 16px !important; }
.sort-select {
  border-radius: 2px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 16px !important;
  border-color: rgba(7,26,12,.15) !important;
}
.sort-select:focus { border-color: #1a5c2e !important; }

/* ── PRODUCT CARDS ─────────────────────────────────── */
.product-card {
  border-radius: 2px !important;
  border-color: rgba(7,26,12,.07) !important;
}
.product-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(7,26,12,.1) !important;
}
.product-name { font-family: 'DM Sans', sans-serif !important; font-weight: 500 !important; }
.price-main { font-family: 'Playfair Display', serif !important; color: #1a5c2e !important; }
.btn-add-cart {
  border-radius: 2px !important;
  font-family: 'DM Sans', sans-serif !important;
  letter-spacing: 1px !important;
  font-size: 14.5px !important;
  text-transform: uppercase !important;
}

/* ── PAGINATION ────────────────────────────────────── */
.page-btn {
  border-radius: 2px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
}
.page-btn.active { background: #1a5c2e !important; border-color: #1a5c2e !important; }

/* ── EMPTY STATE ───────────────────────────────────── */
.empty-state h3 { font-family: 'Playfair Display', serif !important; }

/* ── REVEAL ────────────────────────────────────────── */
.tda-reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.tda-reveal.visible { opacity: 1; transform: translateY(0); }


/* ══════════════════════════════════════════════════════════════════════════
   FILTROS PLEGABLES (movil / tablet / iPad)
   A partir de 1024px hacia abajo la barra lateral se apila ARRIBA de los
   resultados, asi que las cuatro tarjetas de filtros empujaban el producto
   buscado fuera de la pantalla. Aqui los filtros se guardan detras de un boton
   "Filtros" y los resultados quedan justo debajo de la busqueda.
   El boton muestra un contador con cuantos filtros hay activos.
   En escritorio (>1024px) nada de esto aplica: la barra lateral se ve siempre.
   ══════════════════════════════════════════════════════════════════════════ */
.filters-toggle { display: none; }

@media (max-width: 1024px) {
  .filters-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; margin-bottom: 14px; padding: 14px 18px;
    background: #fff; color: #071a0c; cursor: pointer;
    border: 1px solid rgba(7,26,12,.12); border-radius: 4px;
    box-shadow: 0 2px 8px rgba(7,26,12,.05);
    font-family: 'DM Sans', sans-serif; font-size: 14.5px; font-weight: 700;
    letter-spacing: 1.2px; text-transform: uppercase;
    transition: border-color .2s, box-shadow .2s;
  }
  .filters-toggle:hover { border-color: #c9a96e; }
  .filters-toggle .ft-label { display: inline-flex; align-items: center; gap: 10px; }
  .filters-toggle .ft-label i { color: #c9a96e; font-size: 16px; }
  .filters-toggle .ft-right { display: inline-flex; align-items: center; gap: 12px; }
  .filters-toggle .ft-caret { transition: transform .25s; font-size: 13px; color: #55645a; }
  .filters-toggle[aria-expanded="true"] { border-color: #c9a96e; box-shadow: 0 4px 14px rgba(7,26,12,.1); }
  .filters-toggle[aria-expanded="true"] .ft-caret { transform: rotate(180deg); }
  .filters-toggle .ft-badge {
    display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 8px;
    border-radius: 100px; background: #1a5c2e; color: #fff;
    font-size: 13px; font-weight: 800; letter-spacing: 0;
  }
  .filters-toggle .ft-badge[hidden] { display: none; }

  /* Plegado por defecto; se abre al tocar el boton */
  .sidebar { display: none; }
  .sidebar.is-open { display: block; }
  .sidebar-card { margin-bottom: 12px; }
}

@media (max-width: 560px) {
  /* Banner mas compacto en celular: el buscador del encabezado ya esta arriba,
     asi que este bloque solo tiene que presentar la seccion, no llenar la
     pantalla. Con esto el primer producto entra sin hacer scroll. */
  .tda-banner { padding: 26px 0 24px; }
  .tda-banner-tag { margin-bottom: 10px; letter-spacing: 2.5px; }
  .tda-banner h1 { font-size: 32px; line-height: 1.06; }
  .tda-banner-inner { gap: 14px; }
  .tda-layout .container > .tienda-layout { padding-top: 20px; }
  .filters-toggle { margin-bottom: 12px; }
  /* 16px: por debajo de eso iOS hace zoom al enfocar y la pagina queda
     desplazada de lado hasta que el usuario la vuelve a centrar a mano. */
  .tda-search-inline input { font-size: 16px; }
}