/* ====== Tienda Básica – estilos genéricos ====== */
.tienda-catalogo { margin: 1rem 0; }
.lista-productos { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.producto-item { display: grid; grid-template-columns: 1fr auto auto; gap: .5rem; align-items: center; padding: .75rem; border: 1px solid #e5e7eb; border-radius: .5rem; }

.producto-nombre { font-weight: 600; }
.producto-precio { opacity: .85; }

.tienda-carrito { margin: 1.5rem 0; }
.grid-carrito { display: grid; gap: .75rem; }
.card-carrito { border: 1px solid #e5e7eb; border-radius: .5rem; padding: .75rem; }
.carrito-row { display: grid; grid-template-columns: 1fr auto; gap: .75rem; align-items: center; }
.carrito-info { display: grid; gap: .25rem; }
.carrito-nombre { font-weight: 600; }
.carrito-precio-unit { font-size: .9rem; opacity: .8; }
.carrito-cantidad input[type="number"] { width: 80px; padding: .25rem .4rem; }
.carrito-subtotal { font-size: 1rem; }
.carrito-actions { text-align: right; }

.carrito-total { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .75rem; }
.carrito-botones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ====== Botones (familia .boton-tienda) ====== */
.boton-tienda { display: inline-block; padding: .5rem .9rem; border-radius: .5rem; border: 1px solid transparent; text-decoration: none; line-height: 1.2; cursor: pointer; }
.boton-tienda:hover { filter: brightness(0.98); }

/* variantes (selección desde el admin) */
.boton-tienda.clasico { background: #2563eb; color: #fff; border-color: #1e40af; }
.boton-tienda.moderno { background: #111827; color: #fff; border-color: #111827; }
.boton-tienda.minimalista { background: #fff; color: #111; border-color: #e5e7eb; }
.boton-tienda.elegante { background: #4b5563; color: #fff; border-color: #374151; }
.boton-tienda.retro { background: #f59e0b; color: #111; border-color: #b45309; }
.boton-tienda.oscuro { background: #000; color: #fff; border-color: #111; }
.boton-tienda.neon { background: #10b981; color: #0b2e1f; border-color: #047857; }

/* PayPal iframe que no se corte */
#tb-paypal-container iframe { max-width: 100%; }

/* ===================================================================== */
/* === Pagos (Stripe + PayPal) — Responsive y sin valores fijos       === */
/* ===================================================================== */
:root{
  --pay-height: clamp(40px, 4.5vw, 48px);
  --pay-gutter: clamp(6px, 1.2vw, 12px);
  --pay-radius: clamp(6px, 1vw, 10px);
}

.em-pay-buttons{
  display:flex;
  flex-wrap:wrap;
  gap: clamp(8px, 1.6vw, 14px);
  align-items:stretch;
}

/* Cada método va en un “slot” con el MISMO padding responsivo */
.em-pay-buttons .pay-slot{
  flex: 1 1 min(420px, 100%);
  padding-inline: var(--pay-gutter);
}

/* El contenido de cada slot ocupa su ancho completo */
.em-pay-buttons .pay-slot > *{
  width: 100%;
}

/* Stripe “nativo” (no depende de .boton-tienda del tema) */
.stripe-btn,
#tb-pagar-stripe { /* por si aún usas este id */
  all: unset;
  box-sizing: border-box;
  display:flex; align-items:center; justify-content:center;
  height: var(--pay-height);
  width: 100%;
  background:#635BFF; color:#fff;
  border-radius: var(--pay-radius);
  font-weight: 700;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  letter-spacing:.2px;
  box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.08);
  transition: filter .15s ease, transform .02s ease;
  cursor: pointer;
  padding: 0 16px;
}
.stripe-btn:hover,
#tb-pagar-stripe:hover { filter: brightness(.96); }
.stripe-btn:active,
#tb-pagar-stripe:active { transform: translateY(1px); }

/* PayPal: que no colapse mientras carga (el iframe ya trae su padding interno) */
#tb-paypal-container{ min-height: var(--pay-height); }
#tb-paypal-container > div{ width:100% !important; }

/* ===== Tarjeta catálogo: acciones e imagen ===== */
.tb-card .tb-actions{
  display:flex;
  gap:.5rem;
  align-items:center;
  margin-top:.5rem;
}
.tb-card .tb-link{
  font-size:.9em;
  text-decoration:underline;
  opacity:.85;
}
.tb-card .tb-thumb img{
  width:100%;
  height:auto;
  border-radius:8px;
  display:block;
}




/* Móviles estrechos: apilar con separación cómoda */
@media (max-width: 480px){
  .em-pay-buttons{ gap: clamp(10px, 4vw, 16px); }
}

/* === Shoplite – Fix texto vertical en carrito/checkout === */

/* Carrito */
.tienda-carrito .carrito-nombre,
.tienda-carrito .carrito-precio-unit,
.tienda-carrito .carrito-info {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: break-word;
}

.tienda-carrito .carrito-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tienda-carrito .carrito-info { flex: 1 1 auto; min-width: 200px; }
.tienda-carrito .carrito-cantidad { flex: 0 0 auto; }
.tienda-carrito .carrito-cantidad input[type="number"] { width: 80px; }

/* Grid de carrito: nombre + controles */
.grid-carrito { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }

/* Checkout/resumen (página pagos) */
.tb-checkout, .shoplite-checkout, .pagina-pagos { /* usa la que tengas */
  --checkout-side: 360px;
}

.tb-checkout-grid, .shoplite-checkout-grid, .pagina-pagos-grid {
  display: grid;
  grid-template-columns: 1fr var(--checkout-side);
  gap: 24px;
  align-items: start;
}

.tb-checkout .item-nombre,
.shoplite-checkout .item-nombre,
.pagina-pagos .item-nombre {
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  word-break: break-word;
}

/* Por si algún tema impone anchuras ínfimas */
.tienda-carrito *, .tb-checkout * { max-width: 100%; }

.shoplite-producto .boton-tienda {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}
.shoplite-producto .producto-excerpt p { margin: 0; }

/* Igualar ancho de los 3 pagos dentro de su columna */
.em-pay-buttons .pay-slot > * { width: 100%; }

/* Evitar que el iframe de PayPal tape a Bizum en hover/click */
#tb-paypal-container, #tb-paypal-container iframe { position: relative; z-index: 0; }


@media (min-width: 992px){
  .checkout-aside {
    position: sticky;
    top: 16px;
  }
}
/* Paginación en línea para ShopLite */
.shoplite-pagination ul,
ul.page-numbers {           /* por si tu listado usa la clase estándar de WP */
  list-style: none;
  padding: 0;
  margin: 10px 0;
  text-align: left;         /* usa center si la quieres centrada */
}

.shoplite-pagination ul li,
ul.page-numbers li {
  display: inline-block;
  margin: 0 6px;
}

.shoplite-pagination a {
  text-decoration: none;
}