/* North Card Show — Reviste WooCommerce (tienda, carrito, checkout, mi cuenta) */

.woocommerce-page-wrap { padding-top: calc(var(--nav-clearance) + var(--space-6)); }

.woocommerce-breadcrumb {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}
.woocommerce-breadcrumb a { color: var(--turquesa-200); }
.woocommerce-breadcrumb a:hover { color: var(--gold-strong); }

.woocommerce-products-header__title.page-title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-6);
}

/* ---------- Avisos (carrito vacío, mensajes, errores) ---------- */

.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-noreviews {
  list-style: none;
  background: var(--surface-2);
  border: 1px solid var(--border-hairline-strong);
  border-left: 3px solid var(--turquesa-400);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
}
.woocommerce-error { border-left-color: #E08E5F; }
.woocommerce-message { border-left-color: var(--gold); }
.woocommerce-message a.button,
.woocommerce-error a.button { margin-inline-start: var(--space-4); }

/* ---------- Botones ---------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 0.9em 1.8em;
  border-radius: var(--radius-control);
  border: none;
  background: linear-gradient(135deg, var(--oro-400), var(--oro-600));
  color: var(--text-on-gold);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
/* WooCommerce trae su propio hover morado para los botones ".alt" (Comprar,
   Realizar pedido en checkout clásico) con más especificidad que la nuestra;
   lo pisamos aquí a propósito para que el hover se quede en la gama dorada
   de la marca en vez de saltar a un morado que no pega con el resto de la web. */
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce #payment #place_order:hover {
  background: linear-gradient(135deg, var(--oro-500), var(--oro-700)) !important;
  box-shadow: var(--shadow-gold-glow);
  color: var(--text-on-gold) !important;
}
.woocommerce a.button:active,
.woocommerce button.button:active { transform: scale(0.97); }
.woocommerce a.button.alt,
.woocommerce #payment #place_order {
  background: linear-gradient(135deg, var(--oro-400), var(--oro-600));
}
.woocommerce a.added_to_cart {
  display: inline-block;
  margin-top: var(--space-3);
  color: var(--turquesa-200);
}

/* ---------- CTA principal "Comprar" de ficha de producto ---------- */
/* Más grande que antes para que destaque frente a los botones de pago
   exprés (Apple Pay / Google Pay / Amazon Pay) que aparecen justo debajo. */
.woocommerce div.product form.cart .single_add_to_cart_button {
  padding: 1.05em 2.6em;
  font-size: 1.05rem;
  box-shadow: var(--shadow-raised);
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
  box-shadow: var(--shadow-raised), var(--shadow-gold-glow);
}

/* ---------- Rejilla de productos ---------- */

ul.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); list-style: none; padding: 0; }
@media (max-width: 767px) { ul.products { grid-template-columns: 1fr; } }
ul.products li.product {
  background: linear-gradient(165deg, var(--surface-2), var(--surface-1));
  border-radius: var(--radius-card);
  padding: var(--space-5);
  box-shadow: var(--shadow-soft);
}
ul.products li.product img { border-radius: var(--radius-frame); margin-bottom: var(--space-4); }
ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin-bottom: var(--space-2);
}
.woocommerce ul.products li.product .price {
  color: var(--gold-strong);
  font-family: var(--font-display);
}
.woocommerce span.onsale {
  background: var(--turquesa-500);
  color: var(--text-on-gold);
  font-family: var(--font-display);
  border-radius: var(--radius-control);
}

/* ---------- Producto individual ---------- */

.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--gold-strong);
  font-family: var(--font-display);
}
.woocommerce div.product form.cart .quantity { margin-inline-end: var(--space-4); }

/* ---------- Cantidad (stepper nativo) ---------- */

.woocommerce .quantity .qty,
.woocommerce input[type="number"] {
  background: var(--surface-field);
  border: 1px solid var(--border-hairline-strong);
  border-radius: 8px;
  padding: 0.6em 0.8em;
  color: var(--text-primary);
  width: 4.5em;
}

/* ---------- Tablas (carrito, resumen de pedido) ---------- */

.woocommerce table.shop_table,
.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface-2);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: var(--space-6);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-hairline);
  color: var(--text-secondary);
}
.woocommerce table.shop_table th { font-family: var(--font-display); color: var(--turquesa-200); text-align: left; }
.woocommerce table.shop_table .product-name a { color: var(--text-primary); }
.woocommerce table.shop_table .amount, .woocommerce .order-total .amount { color: var(--gold-strong); }
.woocommerce td.actions .coupon .input-text {
  background: var(--surface-field);
  border: 1px solid var(--border-hairline-strong);
  border-radius: 8px;
  padding: 0.7em 1em;
  color: var(--text-primary);
}

/* ---------- Formularios (checkout, mi cuenta) ---------- */

.woocommerce form .form-row label {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--turquesa-200);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-account form input.input-text {
  background: var(--surface-field);
  border: 1px solid var(--border-hairline-strong);
  border-radius: 8px;
  padding: 0.85em 1em;
  color: var(--text-primary);
  width: 100%;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  outline: none;
  border-color: var(--turquesa-300);
  box-shadow: 0 0 0 3px rgba(111, 207, 205, 0.18);
}
.select2-container .select2-selection--single {
  background: var(--surface-field) !important;
  border: 1px solid var(--border-hairline-strong) !important;
  height: 46px !important;
}
.select2-container .select2-selection__rendered { color: var(--text-primary) !important; line-height: 46px !important; }

.woocommerce-checkout #payment {
  background: var(--surface-2);
  border-radius: var(--radius-card);
  padding: var(--space-5);
}
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--border-hairline); }
.woocommerce-checkout #payment div.payment_box {
  background: var(--surface-parchment);
  color: var(--text-on-parchment);
  border-radius: var(--radius-frame);
}

/* ---------- Mi cuenta ---------- */

.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.woocommerce-MyAccount-navigation a {
  display: block;
  padding: 0.7em 1em;
  border-radius: var(--radius-control);
  color: var(--text-secondary);
}
.woocommerce-MyAccount-navigation li.is-active a { color: var(--gold-strong); background: rgba(224, 184, 95, 0.08); }

/* ---------- Carrito y checkout "block" (WooCommerce Blocks) ---------- */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
  color: var(--text-primary);
}
.wc-block-components-text-input input,
.wc-block-components-select-input select,
.wc-block-components-address-form input,
.wc-block-components-quantity-selector input,
.wc-block-components-combobox input {
  background: var(--surface-field) !important;
  border: 1px solid var(--border-hairline-strong) !important;
  border-radius: 8px !important;
  color: var(--text-primary) !important;
}
.wc-block-components-text-input label,
.wc-block-components-address-form label {
  color: var(--text-muted) !important;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus + label {
  color: var(--turquesa-300) !important;
}
.wc-block-components-panel,
.wc-block-components-order-summary,
.wc-block-cart-items,
.wc-block-components-totals-wrapper,
.wc-block-components-sidebar .wc-block-components-panel {
  background: var(--surface-2);
  border-color: var(--border-hairline) !important;
  border-radius: var(--radius-card);
  color: var(--text-secondary);
}
.wc-block-components-panel__button,
.wc-block-components-totals-item__label,
.wc-block-components-product-name {
  color: var(--text-primary);
}
.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-product-price,
.wc-block-formatted-money-amount {
  color: var(--gold-strong) !important;
  font-family: var(--font-display);
}
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
.wc-block-components-button.wp-element-button {
  font-family: var(--font-display) !important;
  letter-spacing: var(--tracking-wide) !important;
  text-transform: uppercase !important;
  border-radius: var(--radius-control) !important;
  background: linear-gradient(135deg, var(--oro-400), var(--oro-600)) !important;
  color: var(--text-on-gold) !important;
  border: none !important;
}
.wc-block-components-checkout-place-order-button {
  padding: 1.05em 1.8em !important;
  font-size: 1.05rem !important;
  box-shadow: var(--shadow-raised);
}
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover {
  background: linear-gradient(135deg, var(--oro-500), var(--oro-700)) !important;
  color: var(--text-on-gold) !important;
  box-shadow: var(--shadow-raised), var(--shadow-gold-glow);
}
.wc-block-components-radio-control__option {
  border-color: var(--border-hairline) !important;
}
.wc-block-components-radio-control__option.wc-block-components-radio-control__option-checked {
  border-color: var(--turquesa-300) !important;
  background: rgba(111, 207, 205, 0.08) !important;
}
.wc-block-components-notice-banner {
  background: var(--surface-2) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-hairline-strong) !important;
}

/* ---------- Métodos de pago (WooPayments): insignia "Modo de prueba" + logos de tarjeta ---------- */
/* Sin esto, en pantallas estrechas la insignia y los logos de tarjeta se
   apiñan en una sola línea junto al nombre del método y se recortan. */
.wc-block-components-radio-control__option-layout {
  width: 100%;
}
.wc-block-components-payment-method-label--with-icon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  max-width: 100%;
}
.wc-block-components-payment-method-label--with-icon .test-mode.badge {
  white-space: nowrap;
  flex-shrink: 0;
}
.payment-methods--logos {
  flex-shrink: 0;
  max-width: 100%;
}
.payment-methods--logos [data-testid="payment-methods-logos"] {
  flex-wrap: nowrap;
}

/* ---------- Opciones de listado de pago: que el texto no se salga de la tarjeta ---------- */
.wc-block-components-radio-control__label-group,
.wc-block-components-radio-control__label,
.wc-block-components-radio-control__secondary-label,
.wc-block-components-radio-control__description {
  max-width: 100%;
  overflow-wrap: break-word;
}
@media (max-width: 480px) {
  .wc-block-components-payment-method-label--with-icon {
    gap: var(--space-1) var(--space-2);
  }
  .payment-methods--logos img { height: 20px; width: auto; }
  .payment-methods--logos-count { font-size: 0.75rem; }
}

/* ---------- "Pedido recibido": detalles del ticket (FooEvents) ---------- */
/* Antes heredaba el fondo oscuro genérico de las tablas de WooCommerce; ahora
   usa el mismo turquesa claro que el PDF/email del ticket, a juego. */
.fooevents-thankyou-tickets .woocommerce-order-details__title {
  color: var(--text-primary);
}
.fooevents-thankyou-tickets table.shop_table {
  background: #C5ECEB;
}
.fooevents-thankyou-tickets table.shop_table th,
.fooevents-thankyou-tickets table.shop_table td {
  color: #1C2B2A;
  border-bottom-color: rgba(17, 81, 79, 0.15);
}
.fooevents-thankyou-tickets table.shop_table strong { color: #11514F; }
.fooevents-thankyou-tickets table.shop_table a { color: #166B6A; }
.fooevents-thankyou-tickets .button.wp-element-button {
  background: linear-gradient(135deg, var(--oro-400), var(--oro-600));
  color: var(--text-on-gold);
}