/* ============================================================
   Blots — Tienda / Producto   [blocksy-child/assets/woo.css]
   Estiliza WooCommerce (shop, tarjetas, ficha de producto, carrito
   y checkout) con la misma identidad que la home moderna.
   Se encola solo en contextos Woo (ver functions.php). Reversible.
   Marca: rojo --blots-red (definido en site.css).
   ============================================================ */

.woocommerce,
.woocommerce-page {
  --w-red:    var(--blots-red, #c42327);
  --w-red-d:  var(--blots-red-d, #a51d20);
  --w-ink:    #14161c;
  --w-muted:  #5f6672;
  --w-line:   #ececf0;
  --w-bg:     #faf7f5;
  --w-card:   #ffffff;
  --w-radius: 16px;
  --w-shadow: 0 14px 34px rgba(17, 24, 39, .10);
}

/* ============================ BOTONES ============================ */
/* CTA primario de WooCommerce con la marca (igual que .bh-btn--solid).
   Se usa !important porque Blocksy pinta los botones con variables
   propias; así garantizamos el rojo sin pelear con cada versión. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce .checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  background-color: var(--w-red) !important;
  border: 2px solid var(--w-red) !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  text-transform: none !important;
  box-shadow: 0 10px 22px rgba(196, 35, 39, .26);
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .checkout-button:hover {
  background-color: var(--w-red-d) !important;
  border-color: var(--w-red-d) !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(196, 35, 39, .32);
}
/* Botón "fantasma" (acciones secundarias: ver carrito, etc.) */
.woocommerce a.button.wc-backward,
.woocommerce a.added_to_cart {
  background-color: transparent !important;
  color: var(--w-red) !important;
  border-color: var(--w-red) !important;
  box-shadow: none;
}
.woocommerce a.button.wc-backward:hover,
.woocommerce a.added_to_cart:hover {
  background-color: rgba(196, 35, 39, .08) !important;
}

/* ===================== ARCHIVE / SHOP ===================== */
.woocommerce .woocommerce-result-count { color: var(--w-muted); font-size: 14px; }
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
  border: 1px solid var(--w-line);
  border-radius: 10px;
  padding: 8px 12px;
  background: #fff;
}

/* Tarjetas de producto (markup estándar Woo: ul.products li.product) */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: var(--w-card);
  border: 1px solid var(--w-line);
  border-radius: var(--w-radius);
  padding: 14px 14px 18px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-6px);
  box-shadow: var(--w-shadow);
  border-color: #f0c9ca;
}
.woocommerce ul.products li.product img,
.woocommerce ul.products li.product figure {
  border-radius: 12px;
  margin-bottom: 14px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--w-ink);
  padding-bottom: 6px;
}
.woocommerce ul.products li.product .price {
  color: var(--w-ink);
  font-weight: 800;
}
.woocommerce ul.products li.product .price del { color: var(--w-muted); font-weight: 500; opacity: .7; }
.woocommerce ul.products li.product .price ins { color: var(--w-red); text-decoration: none; }
.price-ref-ves { font-size: 12px; }

/* Badge de oferta (rebaja) */
.woocommerce span.onsale {
  background: var(--w-red);
  color: #fff;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .3px;
  min-height: auto;
  min-width: auto;
  padding: 6px 12px;
  line-height: 1;
  box-shadow: 0 6px 16px rgba(196, 35, 39, .28);
}

/* Paginación */
.woocommerce nav.woocommerce-pagination ul { border: 0; gap: 8px; display: flex; justify-content: center; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border: 1px solid var(--w-line);
  border-radius: 10px;
  min-width: 42px;
  padding: 8px 12px;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--w-red);
  border-color: var(--w-red);
  color: #fff;
}

/* ===================== FICHA DE PRODUCTO ===================== */
.woocommerce div.product .product_title {
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--w-ink);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--w-ink);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 30px);
}
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins { color: var(--w-red); text-decoration: none; }
.woocommerce div.product p.price del { color: var(--w-muted); font-weight: 500; }

.woocommerce div.product .woocommerce-product-gallery__image img { border-radius: var(--w-radius); }

.woocommerce div.product form.cart .quantity input.qty {
  border: 1px solid var(--w-line);
  border-radius: 10px;
  padding: 10px;
}
.woocommerce div.product .single_add_to_cart_button { padding: 14px 30px !important; font-size: 16px !important; }

/* Meta (SKU / categorías) */
.woocommerce div.product .product_meta { color: var(--w-muted); font-size: 14px; border-top: 1px solid var(--w-line); padding-top: 14px; margin-top: 18px; }
.woocommerce div.product .product_meta a { color: var(--w-ink); }

/* Pestañas (descripción / información adicional / reseñas) */
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom-color: var(--w-line); }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border: 1px solid var(--w-line);
  border-radius: 10px 10px 0 0;
  background: var(--w-bg);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: #fff;
  border-bottom-color: #fff;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--w-red); }

/* ===================== CARRITO ===================== */
.woocommerce table.shop_table {
  border: 1px solid var(--w-line);
  border-radius: var(--w-radius);
  overflow: hidden;
}
.woocommerce table.shop_table th { background: var(--w-bg); }
.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading { font-weight: 800; color: var(--w-ink); }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { font-size: 17px !important; padding: 16px 28px !important; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout #customer_details input.input-text,
.woocommerce-checkout #customer_details select,
.woocommerce-checkout #customer_details textarea {
  border: 1px solid var(--w-line);
  border-radius: 10px;
  padding: 12px;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce-checkout #customer_details input.input-text:focus {
  border-color: var(--w-red);
  box-shadow: 0 0 0 3px rgba(196, 35, 39, .15);
  outline: none;
}

/* Avisos (mensajes Woo) con acento de marca */
.woocommerce .woocommerce-message,
.woocommerce-page .woocommerce-message { border-top-color: var(--w-red); }
.woocommerce .woocommerce-info,
.woocommerce-page .woocommerce-info { border-top-color: var(--w-red); }

/* ===================== FILTROS (Catalog Hub) ===================== */
/* Re-skin on-brand del .tbpf-wrap. Scope .woocommerce para ganar al CSS del
   plugin sin !important. NO se tocan names/data-* (el JS sigue funcionando). */
.woocommerce .tbpf-wrap { --tbpf-accent: var(--w-red); margin: 0 0 22px; }

.woocommerce .tbpf-bar {
  background: var(--w-card);
  border: 1px solid var(--w-line);
  border-radius: 18px;
  box-shadow: var(--w-shadow);
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

/* Fila 1: buscador a todo el ancho */
.woocommerce .tbpf-top {
  order: 0; margin-left: 0;
  flex: 1 1 100%; min-width: 0; width: 100%;
  display: flex; align-items: center; gap: 10px;
}
.woocommerce .tbpf-field--search { position: relative; flex: 1 1 auto; min-width: 0; }
.woocommerce .tbpf-field--search .tbpf-ico {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--w-muted); pointer-events: none;
}

/* Quitar labels en negrita apilados → toolbar limpio */
.woocommerce .tbpf-bar .tbpf-label { display: none; }

/* Fila 2: filtros (categoría · marca · tienda · precio · acciones) alineados */
.woocommerce .tbpf-panel {
  order: 1; flex: 1 1 100%; width: 100%;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.woocommerce .tbpf-block { flex: 0 1 auto; min-width: 0; margin: 0; }
.woocommerce .tbpf-block--cat,
.woocommerce .tbpf-block--brand,
.woocommerce .tbpf-block--store { flex: 1 1 180px; min-width: 160px; max-width: 260px; }
.woocommerce .tbpf-block--price { flex: 1 1 240px; min-width: 220px; }
.woocommerce .tbpf-block--actions { flex: 0 0 auto; margin-left: auto; }
.woocommerce .tbpf-block .tbpf-row { margin: 0; }
.woocommerce .tbpf-block--actions .tbpf-row--actions { display: flex; gap: 8px; }

/* Inputs: pills 44px, radio 12px, foco rojo */
.woocommerce .tbpf-input,
.woocommerce .tbpf-select {
  width: 100%; height: 44px; border-radius: 12px;
  border: 1px solid var(--w-line); background: #fff;
  font-size: 14px; padding: 0 14px; color: var(--w-ink);
}
.woocommerce .tbpf-field--search .tbpf-input { padding-left: 42px; }
.woocommerce .tbpf-input:focus,
.woocommerce .tbpf-select:focus {
  border-color: var(--tbpf-accent);
  box-shadow: 0 0 0 3px rgba(196, 35, 39, .16);
  outline: none;
}

/* Botones: sólido rojo + ghost */
.woocommerce .tbpf-btn {
  height: 44px; padding: 0 20px; border-radius: 12px;
  border: 2px solid var(--tbpf-accent); background: var(--tbpf-accent);
  color: #fff; font-weight: 800; cursor: pointer; white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.woocommerce .tbpf-btn:hover { background: var(--w-red-d); border-color: var(--w-red-d); transform: translateY(-1px); }
.woocommerce .tbpf-btn--ghost { background: #fff; border-color: var(--w-line); color: var(--w-ink); }
.woocommerce .tbpf-btn--ghost:hover { border-color: var(--tbpf-accent); color: var(--tbpf-accent); background: #fff; transform: none; }

/* Precio: lectura limpia */
.woocommerce .tbpf-range-values {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; font-size: 13px; font-weight: 700; margin-bottom: 6px;
}
.woocommerce .tbpf-range-caption { color: var(--w-muted); font-weight: 600; }
.woocommerce .tbpf-range-val { color: var(--tbpf-accent); font-weight: 800; }

.woocommerce .tbpf-status { padding: 8px 4px 0; font-size: 13px; font-weight: 600; color: var(--w-muted); }

/* Móvil: acordeón (reusa .is-open en .tbpf-wrap + data-tbpf-toggle del JS) */
@media (max-width: 767px) {
  .woocommerce .tbpf-bar { flex-direction: column; align-items: stretch; }
  .woocommerce .tbpf-top { width: 100%; flex: 1 1 auto; gap: 8px; }
  .woocommerce .tbpf-toggle {
    display: flex !important; align-items: center; gap: 8px;
    flex: 0 0 auto; height: 44px; border-radius: 12px; padding: 0 16px;
    background: #fff; border: 1px solid var(--w-line); color: var(--w-ink); font-weight: 700; cursor: pointer;
  }
  .woocommerce .tbpf-panel {
    display: none; width: 100%; padding-top: 12px; margin-top: 4px;
    border-top: 1px solid var(--w-line); flex-direction: column; align-items: stretch;
  }
  .woocommerce .tbpf-wrap.is-open .tbpf-panel { display: flex; }
  .woocommerce .tbpf-block,
  .woocommerce .tbpf-block--cat,
  .woocommerce .tbpf-block--price { flex: 1 1 100%; }
  .woocommerce .tbpf-block--actions .tbpf-btn { flex: 1 1 50%; }
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 600px) {
  .woocommerce ul.products li.product { padding: 12px 12px 16px; }
  .woocommerce div.product .single_add_to_cart_button { width: 100%; }
}