/*
Theme Name: Zelva Child
Theme URI: https://zelva.ec
Description: Child theme para Zelva
Author: Zelva Team
Template: astra
Version: 2.0.0
Text Domain: zelva-child
*/

/* ══════════════════════════════════════════════════
   ❶ FUENTE + VARIABLES DE DISEÑO ZELVA
   ══════════════════════════════════════════════════ */

/* Object Sans — Tipografía oficial Zelva (local @font-face) */
@font-face {
  font-family: 'Object Sans';
  src: url('assets/fonts/ObjectSans-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Object Sans';
  src: url('assets/fonts/ObjectSans-Slanted.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Object Sans';
  src: url('assets/fonts/ObjectSans-Heavy.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Object Sans';
  src: url('assets/fonts/ObjectSans-Heavy.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Object Sans';
  src: url('assets/fonts/ObjectSans-HeavySlanted.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Object Sans';
  src: url('assets/fonts/ObjectSans-HeavySlanted.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --color-primary: #ed1c24;
  --color-primary-dk: #cc181f;
  --color-secondary: #000000;
  --color-bg: #FFFFFF;
  --color-text: #1A1A1A;
  --color-muted: #F5F5F5;
  --color-muted-fg: #666666;
  --color-border: #E0E0E0;
  --font-main: "Object Sans", "Inter", sans-serif;
  --transition: 0.3s ease;
  --radius: 0px;
}

/* ══════════════════════════════════════════════════
   ❷ TIPOGRAFÍA GLOBAL
   ══════════════════════════════════════════════════ */
body {
  font-family: var(--font-main);
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-main);
  font-weight: 700;
  color: var(--color-secondary);
  line-height: 1.15;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary-dk);
}

/* ══════════════════════════════════════════════════
   ❸ HEADER STICKY
   ══════════════════════════════════════════════════ */
.site-header,
#masthead {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--color-primary) !important;
  box-shadow: 0 2px 12px rgba(237, 28, 36, 0.3);
}

.site-header .site-title a,
#masthead .site-title a {
  color: #FFFFFF !important;
  font-weight: 900;
  font-size: 1.8rem;
  letter-spacing: -1px;
}

.main-navigation a,
.ast-main-navigation a {
  color: #FFFFFF !important;
  font-family: var(--font-main);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.875rem;
}

.main-navigation a:hover,
.ast-main-navigation a:hover {
  color: var(--color-secondary) !important;
}

/* Badge contador del carrito en header */
.ast-cart-menu-wrap .count,
.woocommerce-cart-count {
  background: var(--color-primary) !important;
  color: #fff !important;
  font-weight: 700;
  font-family: var(--font-main);
}

/* ══════════════════════════════════════════════════
   ❹ BOTONES GLOBALES ZELVA
   ══════════════════════════════════════════════════ */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wp-block-button__link,
.button {
  background-color: var(--color-primary) !important;
  color: #FFFFFF !important;
  font-family: var(--font-main) !important;
  font-weight: 700 !important;
  border-radius: var(--radius) !important;
  border: none !important;
  padding: 13px 30px !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.875rem !important;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition) !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wp-block-button__link:hover,
.button:hover {
  background-color: var(--color-primary-dk) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
}

/* Botón secundario / outline */
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background-color: var(--color-secondary) !important;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background-color: #333 !important;
}

/* ══════════════════════════════════════════════════
   ❺ CATíLOGO — ProductsList / ProductsPage
   ══════════════════════════════════════════════════ */
.woocommerce-shop .woocommerce,
.woocommerce-page .woocommerce {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
}

.woocommerce ul.products {
  display: grid !important;
  gap: 1.75rem;
}

/* ProductCard */
.woocommerce ul.products li.product {
  transition: transform var(--transition), box-shadow var(--transition);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  padding: 0 !important;
  overflow: hidden;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.12);
}

.woocommerce ul.products li.product a img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.woocommerce ul.products li.product:hover a img {
  transform: scale(1.04);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text);
  padding: 0.75rem 1rem 0.25rem;
  margin: 0;
}

.woocommerce ul.products li.product .price {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 1.1rem;
  padding: 0 1rem 0.75rem;
  display: block;
}

.woocommerce ul.products li.product .button {
  margin: 0 1rem 1rem !important;
  width: calc(100% - 2rem) !important;
  text-align: center;
}

/* Badge "Venta" / "Nuevo" */
.woocommerce span.onsale {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  font-family: var(--font-main);
  font-weight: 700;
  border-radius: 0;
  min-height: auto;
  min-width: auto;
  padding: 4px 10px;
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════
   ❻ PRODUCTO INDIVIDUAL — ProductDetailPage
   ══════════════════════════════════════════════════ */
.woocommerce div.product {
  max-width: 1400px;
  margin: 2rem auto;
  padding: 0 2rem;
}

.woocommerce div.product .woocommerce-product-gallery {
  /* ImageCarousel */
  position: relative;
}

.woocommerce div.product .woocommerce-product-gallery__image img {
  width: 100%;
  object-fit: cover;
}

/* ProductInfo */
.woocommerce div.product .product_title {
  font-family: var(--font-main);
  font-weight: 900;
  font-size: 2.2rem;
  line-height: 1.1;
  color: var(--color-secondary);
  margin-bottom: 0.75rem;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--color-primary);
  font-size: 1.9rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  display: block;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 1rem;
  color: var(--color-muted-fg);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  border-left: 3px solid var(--color-primary);
  padding-left: 1rem;
}

/* ══════════════════════════════════════════════════
   ❼ VARIANT SELECTOR + QUANTITY SELECTOR
   ══════════════════════════════════════════════════ */

/* Etiquetas Talla / Color */
.woocommerce div.product table.variations td.label label {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-secondary);
}

/* Desplegable de variante */
.woocommerce div.product .variations select {
  width: 100%;
  border: 2px solid var(--color-secondary);
  border-radius: var(--radius);
  font-family: var(--font-main);
  font-weight: 600;
  font-size: 1rem;
  padding: 10px 16px;
  background: var(--color-bg);
  cursor: pointer;
  appearance: auto;
  transition: border-color var(--transition);
}

.woocommerce div.product .variations select:focus {
  border-color: var(--color-primary);
  outline: none;
}

/* Enlace "Limpiar" variante */
.woocommerce div.product .reset_variations {
  color: var(--color-muted-fg);
  font-size: 0.8rem;
  text-decoration: underline;
}

/* QuantitySelector */
.woocommerce div.product .quantity {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 1rem;
}

.woocommerce div.product .quantity input.qty {
  border: 2px solid var(--color-secondary);
  border-radius: var(--radius);
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 1.1rem;
  padding: 10px 0;
  width: 70px;
  text-align: center;
}

.woocommerce div.product .quantity input.qty:focus {
  border-color: var(--color-primary);
  outline: none;
}

/* AddToCartButton */
.woocommerce div.product .single_add_to_cart_button {
  background-color: var(--color-primary) !important;
  color: #FFFFFF !important;
  font-family: var(--font-main) !important;
  font-weight: 900 !important;
  font-size: 1rem !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  padding: 16px 40px !important;
  border-radius: var(--radius) !important;
  border: none !important;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition) !important;
  width: 100%;
  margin-top: 0.5rem;
}

.woocommerce div.product .single_add_to_cart_button:hover {
  background-color: var(--color-primary-dk) !important;
  transform: translateY(-2px) !important;
}

/* Stock disponible */
.woocommerce div.product .stock {
  font-family: var(--font-main);
  font-size: 0.85rem;
  font-weight: 600;
  color: #2E7D32;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Producto agotado */
.woocommerce div.product .stock.out-of-stock {
  color: var(--color-primary);
}

/* RelatedProducts */
.woocommerce .related h2,
.woocommerce .upsells h2 {
  font-family: var(--font-main);
  font-weight: 900;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 3px solid var(--color-primary);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}

/* ══════════════════════════════════════════════════
   ❽ CARRITO — PÁGINA (CartItems + CartSummary)
   ══════════════════════════════════════════════════ */
.woocommerce-cart h1.entry-title,
.woocommerce-cart .page-title {
  font-family: var(--font-main);
  font-weight: 900;
  font-size: 2rem;
  text-transform: uppercase;
  border-bottom: 3px solid var(--color-primary);
  padding-bottom: 0.5rem;
}

.woocommerce-cart table.cart {
  border-collapse: collapse;
  width: 100%;
}

.woocommerce-cart table.cart th {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-muted-fg);
  border-bottom: 2px solid var(--color-border);
  padding: 12px 8px;
}

.woocommerce-cart table.cart td {
  padding: 16px 8px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.woocommerce-cart table.cart td.product-name a {
  font-family: var(--font-main);
  font-weight: 700;
  color: var(--color-text);
  font-size: 1rem;
}

.woocommerce-cart table.cart td.product-name a:hover {
  color: var(--color-primary);
}

/* Variante (talla/color) dentro del carrito */
.woocommerce-cart table.cart .variation {
  font-size: 0.85rem;
  color: var(--color-muted-fg);
  margin-top: 4px;
}

.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 1.05rem;
}

/* Botón eliminar item - Centered Fix */
.woocommerce-cart table.cart td.product-remove a.remove {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--color-muted-fg) !important;
  font-size: 1.2rem !important;
  font-weight: 700;
  line-height: 0 !important;
  width: 26px !important;
  height: 26px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 50% !important;
  transition: all var(--transition) !important;
  text-decoration: none !important;
}

.woocommerce-cart table.cart td.product-remove a.remove:hover {
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  background: rgba(237, 28, 36, 0.05) !important;
}

/* Asegurar que el span interno (si existe) también esté centrado */
.woocommerce-cart table.cart td.product-remove a.remove span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  transform: none !important;
}


/* CartSummary — totales */
.woocommerce-cart .cart-collaterals .cart_totals {
  background: var(--color-muted);
  padding: 2rem;
  border-top: 3px solid var(--color-primary);
}

.woocommerce-cart .cart-collaterals .cart_totals h2 {
  font-family: var(--font-main);
  font-weight: 900;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1.5rem;
}

.woocommerce-cart .cart-collaterals .cart_totals table th,
.woocommerce-cart .cart-collaterals .cart_totals table td {
  font-family: var(--font-main);
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}

.woocommerce-cart .cart-collaterals .cart_totals .order-total td {
  color: var(--color-primary);
  font-weight: 900;
  font-size: 1.4rem;
}

/* CheckoutButton en página de carrito */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  background-color: var(--color-primary) !important;
  color: #FFFFFF !important;
  font-family: var(--font-main) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  border-radius: var(--radius) !important;
  padding: 18px !important;
  font-size: 1rem !important;
  width: 100%;
  text-align: center;
  display: block;
  margin-top: 1rem;
  transition: background var(--transition), transform var(--transition) !important;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background-color: var(--color-primary-dk) !important;
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════
   ❾ CARRITO SIDEBAR — Side Cart WooCommerce Plugin
      (ShoppingCart.jsx del spec)
   ══════════════════════════════════════════════════ */
.xoo-wsc-modal {
  font-family: var(--font-main) !important;
}

/* Header del sidebar */
.xoo-wsc-header {
  background-color: var(--color-secondary) !important;
  color: #FFFFFF !important;
  font-family: var(--font-main) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 1.25rem 1.5rem !important;
}

.xoo-wsc-header .xoo-wsc-close {
  color: #FFFFFF !important;
  opacity: 0.7;
  transition: opacity var(--transition);
}

.xoo-wsc-header .xoo-wsc-close:hover {
  opacity: 1;
}

/* ícono flotante del carrito */
.xoo-wsc-cart-icon-main {
  background: var(--color-primary) !important;
  color: #fff !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 16px rgba(237, 28, 36, 0.4) !important;
}

/* Contador de items en el ícono */
.xoo-wsc-cart-icon-main .xoo-wsc-icn-count {
  background: var(--color-secondary) !important;
  color: #fff !important;
  font-family: var(--font-main) !important;
  font-weight: 700 !important;
}

/* Nombre del producto en sidebar */
.xoo-wsc-pname a {
  font-family: var(--font-main) !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
  font-size: 0.95rem !important;
}

.xoo-wsc-pname a:hover {
  color: var(--color-primary) !important;
}

/* Variante (talla/color) en sidebar */
.xoo-wsc-product .variation {
  font-size: 0.8rem !important;
  color: var(--color-muted-fg) !important;
}

/* Precio en sidebar */
.xoo-wsc-price,
.xoo-wsc-product .price {
  color: var(--color-primary) !important;
  font-weight: 700 !important;
  font-family: var(--font-main) !important;
}

/* Selector de cantidad en sidebar */
.xoo-wsc-qty input {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-main) !important;
  font-weight: 700 !important;
  text-align: center;
}

/* Botón eliminar item en sidebar */
.xoo-wsc-rem-product {
  color: var(--color-muted-fg) !important;
  transition: color var(--transition) !important;
}

.xoo-wsc-rem-product:hover {
  color: var(--color-primary) !important;
}

/* Footer del sidebar — subtotal */
.xoo-wsc-footer {
  border-top: 2px solid var(--color-border) !important;
  padding: 1.25rem 1.5rem !important;
}

.xoo-wsc-ft-price {
  color: var(--color-primary) !important;
  font-weight: 900 !important;
  font-size: 1.3rem !important;
  font-family: var(--font-main) !important;
}

.xoo-wsc-ft-total-name {
  font-family: var(--font-main) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 0.8rem !important;
  letter-spacing: 1px !important;
  color: var(--color-muted-fg) !important;
}

/* Botón Finalizar Compra en sidebar (CheckoutButton) */
.xoo-wsc-smr-btn {
  background-color: var(--color-primary) !important;
  color: #FFFFFF !important;
  font-family: var(--font-main) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  border-radius: var(--radius) !important;
  border: none !important;
  padding: 16px !important;
  width: 100% !important;
  font-size: 1rem !important;
  transition: background var(--transition), transform var(--transition) !important;
  margin-bottom: 0.5rem !important;
}

.xoo-wsc-smr-btn:hover {
  background-color: var(--color-primary-dk) !important;
  transform: translateY(-1px) !important;
}

/* Botón Seguir comprando */
.xoo-wsc-continue-btn {
  background-color: transparent !important;
  color: var(--color-text) !important;
  font-family: var(--font-main) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border: 2px solid var(--color-border) !important;
  border-radius: var(--radius) !important;
  padding: 12px !important;
  width: 100% !important;
  font-size: 0.875rem !important;
  transition: border-color var(--transition), color var(--transition) !important;
}

.xoo-wsc-continue-btn:hover {
  border-color: var(--color-secondary) !important;
  color: var(--color-secondary) !important;
  background-color: transparent !important;
}

/* Carrito vacío */
.xoo-wsc-empty-cart {
  font-family: var(--font-main) !important;
  color: var(--color-muted-fg) !important;
  text-align: center;
  padding: 3rem 1rem !important;
}

.xoo-wsc-empty-cart .xoo-wsc-empty-icon {
  color: var(--color-border) !important;
  font-size: 3rem !important;
}

/* ══════════════════════════════════════════════════
   ❿ CHECKOUT
   ══════════════════════════════════════════════════ */
.woocommerce-checkout h1.entry-title,
.woocommerce-checkout .page-title {
  font-family: var(--font-main);
  font-weight: 900;
  font-size: 2rem;
  text-transform: uppercase;
  border-bottom: 3px solid var(--color-primary);
  padding-bottom: 0.5rem;
  margin-bottom: 2rem;
}

/* Secciones del checkout */
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout #order_review_heading {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-secondary);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
}

/* Campos del formulario */
.woocommerce-checkout .woocommerce-input-wrapper input,
.woocommerce-checkout .woocommerce-input-wrapper select,
.woocommerce-checkout .woocommerce-input-wrapper textarea,
.woocommerce form .input-text {
  border: 2px solid var(--color-border) !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-main) !important;
  font-size: 1rem !important;
  padding: 12px 16px !important;
  transition: border-color var(--transition) !important;
  width: 100%;
}

.woocommerce-checkout .woocommerce-input-wrapper input:focus,
.woocommerce-checkout .woocommerce-input-wrapper select:focus,
.woocommerce form .input-text:focus {
  border-color: var(--color-primary) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Labels del formulario */
.woocommerce-checkout .form-row label {
  font-family: var(--font-main);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-secondary);
  margin-bottom: 4px;
  display: block;
}

/* Resumen del pedido en checkout */
.woocommerce-checkout #order_review table.shop_table {
  border-collapse: collapse;
  width: 100%;
}

.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-main);
}

.woocommerce-checkout #order_review table.shop_table .order-total td {
  color: var(--color-primary);
  font-weight: 900;
  font-size: 1.3rem;
}

/* Métodos de pago */
.woocommerce-checkout #payment {
  background: var(--color-muted);
  padding: 1.5rem;
  border-top: 3px solid var(--color-primary);
}

.woocommerce-checkout #payment ul.payment_methods {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.woocommerce-checkout #payment ul.payment_methods li label {
  font-family: var(--font-main);
  font-weight: 600;
}

/* Botón "Realizar el pedido" */
.woocommerce-checkout #payment #place_order {
  background-color: var(--color-primary) !important;
  color: #FFFFFF !important;
  font-family: var(--font-main) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  border-radius: var(--radius) !important;
  border: none !important;
  font-size: 1.1rem !important;
  padding: 20px 40px !important;
  width: 100%;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition) !important;
  margin-top: 1rem;
}

.woocommerce-checkout #payment #place_order:hover {
  background-color: var(--color-primary-dk) !important;
  transform: translateY(-2px) !important;
}

/* ══════════════════════════════════════════════════
   ⓫ SUCCESS PAGE — SuccessPage del spec
   ══════════════════════════════════════════════════ */
.woocommerce-order-received h1.entry-title {
  font-family: var(--font-main);
  font-weight: 900;
  color: var(--color-primary);
  font-size: 2rem;
  text-transform: uppercase;
}

.woocommerce-order-received .woocommerce-notice--success {
  border-left: 4px solid var(--color-primary);
  background: #FFF5F8;
  color: var(--color-text);
  font-family: var(--font-main);
  padding: 1rem 1.5rem;
}

/* OrderDetails */
.woocommerce-order-received .woocommerce-order-details,
.woocommerce-order-received .woocommerce-customer-details {
  margin-top: 2rem;
}

.woocommerce-order-received .woocommerce-order-details h2,
.woocommerce-order-received .woocommerce-customer-details h2 {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 0.5rem;
}

.woocommerce-thankyou-order-details {
  background: var(--color-muted);
  border-left: 4px solid var(--color-primary);
  padding: 1.5rem 2rem;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2rem;
}

.woocommerce-thankyou-order-details li {
  font-family: var(--font-main);
}

.woocommerce-thankyou-order-details li strong {
  color: var(--color-primary);
  display: block;
  font-size: 1.2rem;
  font-weight: 900;
}

/* ══════════════════════════════════════════════════
   ⓬ FOOTER
   ══════════════════════════════════════════════════ */
.site-footer,
#colophon {
  background: var(--color-secondary) !important;
  color: #FFFFFF;
  font-family: var(--font-main);
  padding: 3rem 2rem 1.5rem;
}

.site-footer a,
#colophon a {
  color: var(--color-primary);
  transition: color var(--transition);
}

.site-footer a:hover,
#colophon a:hover {
  color: #FFFFFF;
}

.site-footer .widget-title,
#colophon .widget-title {
  color: #FFFFFF;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9rem;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

/* ══════════════════════════════════════════════════
   ⓭ PÁGINA 404 — NotFoundPage del spec
   ══════════════════════════════════════════════════ */
.zelva-404-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72vh;
  text-align: center;
  padding: 4rem 2rem;
  background: var(--color-bg);
}

.zelva-404-container {
  max-width: 580px;
}

.zelva-404-number {
  display: block;
  font-family: var(--font-main);
  font-size: 11rem;
  font-weight: 900;
  color: var(--color-primary);
  line-height: 1;
  letter-spacing: -6px;
}

.zelva-404-title {
  font-family: var(--font-main);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-secondary);
  margin: 0.5rem 0 1rem;
}

.zelva-404-text {
  color: var(--color-muted-fg);
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.zelva-404-btn {
  display: inline-block;
  background: var(--color-primary);
  color: #FFFFFF !important;
  font-family: var(--font-main);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 16px 44px;
  text-decoration: none;
  transition: background var(--transition), transform var(--transition);
}

.zelva-404-btn:hover {
  background: var(--color-primary-dk);
  color: #FFFFFF !important;
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════
   ── ANIMACIONES AOS (reemplaza Framer Motion)
   ══════════════════════════════════════════════════ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-32px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes zelvaGlow {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(237, 28, 36, 0);
  }

  50% {
    box-shadow: 0 0 20px 4px rgba(237, 28, 36, 0.25);
  }
}

.zelva-animate {
  animation: fadeInUp 0.6s ease forwards;
}

.zelva-animate-left {
  animation: fadeInLeft 0.6s ease forwards;
}

.zelva-glow {
  animation: zelvaGlow 2.4s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════
   ── RESPONSIVE — 3 breakpoints del spec
   ══════════════════════════════════════════════════ */

/* MOBILE: 320px —œ 640px ── â€™ 1 columna */
@media (max-width: 640px) {

  .woocommerce ul.products {
    grid-template-columns: 1fr !important;
    gap: 1.25rem;
  }

  .woocommerce div.product {
    padding: 0 1rem;
  }

  .woocommerce div.product .product_title {
    font-size: 1.6rem;
  }

  .woocommerce div.product p.price,
  .woocommerce div.product span.price {
    font-size: 1.4rem;
  }

  .woocommerce-cart h1.entry-title,
  .woocommerce-checkout h1.entry-title {
    font-size: 1.5rem;
  }

  .zelva-404-number {
    font-size: 7rem;
  }

  .zelva-404-title {
    font-size: 1.5rem;
  }
}

/* TABLET: 641px —œ 1024px ── â€™ 2 columnas */
@media (min-width: 641px) and (max-width: 1024px) {

  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem;
  }

  .woocommerce div.product {
    padding: 0 1.5rem;
  }
}

/* DESKTOP: 1025px+ ── â€™ 4 columnas */
@media (min-width: 1025px) {

  .woocommerce ul.products.columns-4 {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 2rem;
  }

  .woocommerce ul.products.columns-3 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ══════════════════════════════════════════════════
   ── FIX PARA PÁGINA 404 ZELVA — Centrado Perfecto
   ══════════════════════════════════════════════════ */

/* 1. Reset de contenedores de Astra solo en 404 */
.error404 .site-content .ast-container {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.error404 #primary {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* 2. Ajuste de altura y centrado tipo Hero */
.zelva-404-page {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 85vh !important;
  text-align: center !important;
  padding: 40px 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.zelva-404-container {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}

/* ══════════════════════════════════════════════════
   ── HERO, BENEFICIOS, SECCIONES, CTA
   ── â€™ Movidos a zelva-home.css (se carga solo en el template home)
   ══════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════
   ㉑ CATEGORY HERO BANNER — Página de categoría
   ══════════════════════════════════════════════════ */
.zelva-category-hero {
  position: relative;
  width: 100%;
  min-height: 240px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 2rem 4rem;
  margin-bottom: 2rem;
}

.zelva-category-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.1) 100%);
  z-index: 1;
}

.zelva-category-hero h1 {
  position: relative;
  z-index: 2;
  font-family: var(--font-main);
  font-weight: 900;
  font-style: italic;
  font-size: 3.5rem;
  color: #FFFFFF;
  text-transform: uppercase;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  margin: 0;
}

/* ══════════════════════════════════════════════════
   ㉒ BADGE DE DESCUENTO — Rectangular
   ══════════════════════════════════════════════════ */
.woocommerce span.onsale {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  font-family: var(--font-main);
  font-weight: 900;
  font-size: 0.85rem;
  border-radius: 0 !important;
  min-height: auto !important;
  min-width: auto !important;
  padding: 6px 14px !important;
  line-height: 1.4 !important;
  top: 8px;
  right: 8px;
  left: auto !important;
  margin: 0 !important;
}

/* ══════════════════════════════════════════════════
   ㉓ VARIATION SWATCHES — Talla y Color como botones
   ══════════════════════════════════════════════════ */

/* Swatch genérico (para plugins de variation swatches) */
.swatch-wrapper,
.variable-item-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.swatch-anchor,
.variable-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  border: 2px solid var(--color-border);
  background: var(--color-bg);
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--transition);
  padding: 0 12px;
}

.swatch-anchor:hover,
.variable-item:hover {
  border-color: var(--color-secondary);
}

.swatch-anchor.selected,
.variable-item.selected,
.variable-item.selected-item {
  border-color: var(--color-secondary) !important;
  background: var(--color-secondary) !important;
  color: #FFFFFF !important;
}

/* Color swatches como círculos */
.color-swatch,
.variable-item-span-color {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid var(--color-border);
  padding: 0;
  min-width: 36px;
}

.color-swatch:hover,
.variable-item-span-color:hover {
  border-color: var(--color-secondary);
  transform: scale(1.1);
}

.color-swatch.selected,
.variable-item-span-color.selected {
  border-color: var(--color-secondary) !important;
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-secondary);
}

/* Fallback: estilizar selects nativos como más premium */
.woocommerce div.product .variations td {
  padding: 8px 0;
}

/* ══════════════════════════════════════════════════
   ㉔ FOOTER MEJORADO — Logos de pago + links
   ══════════════════════════════════════════════════ */
.zelva-footer-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 2rem 2rem;
}

.zelva-footer-links h4 {
  color: #FFFFFF;
  font-family: var(--font-main);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.8rem;
  margin-bottom: 0.75rem;
}

.zelva-footer-links a {
  display: block;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  padding: 4px 0;
  transition: color var(--transition);
}

.zelva-footer-links a:hover {
  color: #FFFFFF;
}

.zelva-payment-icons {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: 1.5rem;
}

.zelva-payment-icons img {
  height: 28px;
  opacity: 0.7;
  filter: grayscale(1) brightness(1.5);
  transition: opacity var(--transition);
}

.zelva-payment-icons img:hover {
  opacity: 1;
}

/* ══════════════════════════════════════════════════
   ㉕ RESPONSIVE — Secciones Globales
   ── â€™ Hero/Benefits/CTA responsive movidos a zelva-home.css
   ══════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .zelva-category-hero {
    min-height: 160px;
    padding: 1.5rem 2rem;
  }

  .zelva-category-hero h1 {
    font-size: 2rem;
  }

  .zelva-footer-content {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════
   ㉖ ZELVA HOME WRAPPER — Overrides de layout Astra
   ══════════════════════════════════════════════════ */
#zelva-home-wrapper {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

#zelva-home-wrapper>section {
  display: block;
  width: 100%;
  clear: both;
}

/* Forzar que Astra no limite el ancho del contenido en esta plantilla */
.page-template-template-zelva-home .site-content,
.page-template-template-zelva-home .ast-container,
.page-template-template-zelva-home #primary,
.page-template-template-zelva-home .entry-content {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Ocultar breadcrumbs y título de página en esta plantilla */
.page-template-template-zelva-home .ast-breadcrumbs-wrapper,
.page-template-template-zelva-home .entry-header,
.page-template-template-zelva-home .page-header {
  display: none !important;
}

/* Forzar ancho completo en páginas normales de Astra */
.ast-container,
.site-content .ast-container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Opcional: Si quieres que el contenido interno tenga un poco de aire 
   pero que los fondos de las secciones lleguen al borde */
.entry-content {
  margin: 0 auto;
}

/* ══════════════════════════════════════
   TOP BAR ZELVA — Global
   ══════════════════════════════════════ */
.zelva-topbar {
  background: var(--color-secondary);
  color: #FFFFFF;
  font-family: var(--font-main);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 10px 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  letter-spacing: 0.3px;
  z-index: 1001;
  position: relative;
}

.zelva-topbar-msg {
  flex: 1;
  text-align: center;
}

.zelva-topbar-msg strong {
  color: #FFFFFF;
}

.zelva-topbar-sep {
  opacity: 0.5;
  margin: 0 2px;
}

.zelva-topbar-freeship {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
}

.zelva-topbar-freeship strong {
  font-weight: 800;
}

@media (max-width: 600px) {
  .zelva-topbar-sep { display: none; }
  .zelva-topbar-freeship {
    display: block;
    font-size: 0.78rem;
    margin-top: 2px;
  }
}

.zelva-topbar-account a {
  color: #FFFFFF;
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: color var(--transition);
}

.zelva-topbar-account a:hover {
  color: var(--color-primary);
}

.zelva-topbar-account svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* ══════════════════════════════════════
   HEADER ZELVA — Global
   ══════════════════════════════════════ */
.zelva-header {
  background: var(--color-primary);
  padding: 0 2rem;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

/* Ocultar header original de Astra para evitar duplicidad */
.site-header,
#masthead {
  display: none !important;
}

.zelva-header-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  z-index: 10;
}

.zelva-header-logo .zelva-custom-logo {
  height: 44px;
  width: auto;
  display: block;
  max-height: 44px;
}

.zelva-header-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  display: flex;
  justify-content: center;
}

.zelva-header-nav {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.zelva-header-nav a {
  color: #FFFFFF !important;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-decoration: none;
  transition: opacity var(--transition);
  white-space: nowrap;
}

.zelva-header-nav a:hover {
  opacity: 0.75;
  color: #FFFFFF !important;
}

.zelva-header-cart {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.zelva-cart-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #FFFFFF;
  text-decoration: none;
  position: relative;
}

.zelva-cart-count {
  background: var(--color-secondary);
  color: #FFFFFF;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 0.7rem;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -6px;
  right: -10px;
}

.zelva-header-mobile-menu {
  display: none;
}

.zelva-mobile-panel {
  position: fixed;
  top: 0;
  left: -100%;
  width: 80%;
  max-width: 300px;
  height: 100vh;
  background: var(--color-bg);
  z-index: 2000;
  transition: left 0.3s ease;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
}

.zelva-mobile-panel.active {
  left: 0;
}

.zelva-mobile-panel-header {
  padding: 1rem;
  display: flex;
  justify-content: flex-end;
  border-bottom: 1px solid var(--color-border);
}

.zelva-mobile-panel-header button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
}

.zelva-mobile-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.zelva-mobile-nav-list li a {
  display: block;
  padding: 1.25rem 1.5rem;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-text) !important;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
}

.zelva-mobile-nav-list li a:hover {
  color: var(--color-primary) !important;
}

.zelva-mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.zelva-mobile-overlay.active {
  opacity: 1;
  visibility: visible;
}

#zelva-mobile-menu-btn {
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
}

@media (max-width: 768px) {
  .zelva-header {
    padding: 0 1rem;
    height: 60px;
    position: sticky;
  }

  .zelva-header-nav {
    display: none;
  }

  .zelva-header-mobile-menu {
    display: flex;
    flex-shrink: 0;
  }

  .zelva-header-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

/* --------------------------------------------------
   ? TOPBAR DE GEOLOCALIZACIÓN
   -------------------------------------------------- */
.zelva-topbar {
  background: #000000;
  color: #FFFFFF;
  padding: 10px 20px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.zelva-topbar-msg {
  display: flex;
  align-items: center;
  gap: 6px;
}

#zelva-location-name {
  color: var(--color-primary);
  font-weight: 900;
}

@media (max-width: 768px) {
  .zelva-topbar {
    padding: 8px 15px;
    font-size: 10px;
  }
}

/* Animacin para la aparicin suave de la ubicacin */
#zelva-geo-topbar {
  transition: opacity 0.5s ease;
}

/* ══════════════════════════════════════════════════════════════
   MODAL LOGIN / REGISTRO — XootiX Easy Login v3.1.2
   Design System Zelva: #222222 · #FFFFFF · #ff2a2a
   Mobile First · Flexbox · Focus-within
   ══════════════════════════════════════════════════════════════ */

/* ── Variables locales del módulo ── */
.xoo-el-form-popup,
.xoo-el-form-inline {
  --z-red: #ff2a2a;
  --z-red-dk: #d42020;
  --z-black: #222222;
  --z-white: #ffffff;
  --z-border: #e0e0e0;
  --z-border-soft: #ebebeb;
  --z-muted: #777777;
  --z-muted-bg: #f7f7f7;
  --z-font: "Object Sans", "Inter", sans-serif;
  --z-transition: all 0.3s ease;
}

/* ── Overlay ── */
.xoo-el-overlay {
  background: rgba(0, 0, 0, 0.72) !important;
  backdrop-filter: blur(3px);
}

/* ── Contenedor principal del modal ── */
.xoo-el-form-popup {
  /* Layout — centrado forzado ignorando el JS del plugin */
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  z-index: 99999 !important;

  /* Dimensiones */
  width: 92vw !important;
  max-width: 440px !important;
  height: max-content !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;

  /* Estética Zelva brutalista */
  background: var(--z-white) !important;
  border-radius: 0 !important;
  border-top: 4px solid var(--z-red) !important;
  border-left: 1px solid var(--z-border) !important;
  border-right: 1px solid var(--z-border) !important;
  border-bottom: 1px solid var(--z-border) !important;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.18),
    0 32px 64px rgba(0, 0, 0, 0.12) !important;
  font-family: var(--z-font) !important;
}

/* ── Reset interno: forzar layout de 1 columna sin sidebar ── */
.xoo-el-form-popup *,
.xoo-el-form-popup *::before,
.xoo-el-form-popup *::after {
  box-sizing: border-box !important;
}

.xoo-el-form-popup .xoo-el-sidebar,
.xoo-el-form-popup .xoo-el-sidebar-img,
.xoo-el-form-popup .xoo-el-img-wrap,
.xoo-el-form-popup>.xoo-el-srcont>.xoo-el-sidebar {
  display: none !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Forzar reset brutal a todos los contenedores estructurales */
.xoo-el-form-popup .xoo-el-srcont,
.xoo-el-form-popup .xoo-el-main,
.xoo-el-form-popup .xoo-el-form-wrap,
.xoo-el-form-popup .xoo-el-content,
.xoo-el-form-popup .xoo-el-action-form {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  float: none !important;
  transform: none !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  box-sizing: border-box !important;
}

/* Fix específico: evitar márgenes negativos inyectados por el plugin (filas o wrappers ocultos) */
.xoo-el-form-popup .xoo-el-action-form form,
.xoo-el-form-popup .xoo-el-fields,
.xoo-el-form-popup .row,
.xoo-el-form-popup .xoo-el-row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transform: none !important;
}

/* ── Botón de cierre ── */
.xoo-el-close-popup {
  position: absolute !important;
  top: 12px !important;
  right: 14px !important;
  z-index: 10 !important;
  cursor: pointer !important;
  color: var(--z-muted) !important;
  font-size: 1.2rem !important;
  line-height: 1 !important;
  transition: var(--z-transition) !important;
  background: none !important;
  border: none !important;
  padding: 4px !important;
}

.xoo-el-close-popup:hover {
  color: var(--z-red) !important;
  transform: rotate(90deg) !important;
}

/* ══ TABS: Iniciar sesión / Registrarse ═══════════════════════ */
.xoo-el-tabs-nav {
  display: flex !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  background: transparent !important;
  /* Separador inferior como línea continua */
  border-bottom: 2px solid var(--z-border) !important;
}

.xoo-el-tabs-nav li {
  list-style: none !important;
  margin: 0 !important;
  flex: 1 !important;
  /* Cada tab ocupa el 50% */
  text-align: center !important;
}

/* Tab inactivo */
.xoo-el-tabs-nav li a,
.xoo-el-tabs-nav li span {
  display: block !important;
  padding: 1.1rem 1rem !important;
  font-family: var(--z-font) !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  color: var(--z-muted) !important;
  background: var(--z-white) !important;
  text-decoration: none !important;
  border-bottom: 3px solid transparent !important;
  margin-bottom: -2px !important;
  /* Solapar con el border del nav */
  transition: var(--z-transition) !important;
  border-right: 1px solid var(--z-border-soft) !important;
  cursor: pointer !important;
}

/* El último tab no tiene borde derecho */
.xoo-el-tabs-nav li:last-child a,
.xoo-el-tabs-nav li:last-child span {
  border-right: none !important;
}

/* Tab activo */
.xoo-el-tabs-nav li.xoo-el-tab-active a,
.xoo-el-tabs-nav li.xoo-el-tab-active span {
  color: var(--z-black) !important;
  background: var(--z-white) !important;
  border-bottom-color: var(--z-red) !important;
  font-weight: 900 !important;
}

/* Tab hover (solo en los inactivos) */
.xoo-el-tabs-nav li:not(.xoo-el-tab-active) a:hover,
.xoo-el-tabs-nav li:not(.xoo-el-tab-active) span:hover {
  color: var(--z-black) !important;
  background: var(--z-muted-bg) !important;
}

/* ══ CUERPO DEL FORMULARIO ════════════════════════════════════ */
.xoo-el-form-popup .xoo-el-form-container {
  padding: 1.75rem 1.75rem 1.75rem !important;
}

/* ── Labels (ocultos — los placeholders son el label) ── */
.xoo-el-form-popup label:not(.xoo-el-check label):not([for]) {
  display: none !important;
}

/* Labels visibles (checkbox "Recuérdame", privacidad) */
.xoo-el-form-popup label,
.xoo-el-form-inline label {
  font-family: var(--z-font) !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--z-black) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* ══ CONTENEDORES DE INPUT (el borde va aquí, no en el input) ═ */
.xoo-el-form-popup .xoo-el-form-group,
.xoo-el-form-popup .xoo-el-input-group {
  display: flex !important;
  align-items: center !important;
  margin: 0 0 0.875rem 0 !important;
  background: var(--z-white) !important;

  /* Borde definido — estética brutalista */
  border: 1.5px solid var(--z-border) !important;
  border-radius: 0 !important;
  transition: var(--z-transition) !important;
  overflow: hidden !important;
  /* Contiene el ícono y el input */
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Focus-within: el contenedor completo reactua al foco */
.xoo-el-form-popup .xoo-el-form-group:focus-within,
.xoo-el-form-popup .xoo-el-input-group:focus-within {
  border-color: var(--z-red) !important;
  box-shadow: 0 0 0 2px rgba(255, 42, 42, 0.12) !important;
}

/* ── ícono izquierdo del input ── */
.xoo-el-form-popup .xoo-el-form-group .xoo-el-input-icon,
.xoo-el-form-popup .xoo-el-input-group .xoo-el-input-icon {
  /* Posición estática para no interferir con el texto */
  position: static !important;
  flex-shrink: 0 !important;

  /* Tamaño contenido */
  width: 44px !important;
  min-height: 48px !important;
  padding: 0 !important;

  /* Centrado del ícono SVG */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* Separador derecho sutil */
  border-right: 1.5px solid var(--z-border-soft) !important;
  background: var(--z-muted-bg) !important;
  color: var(--z-muted) !important;
  font-size: 0.95rem !important;
  transition: var(--z-transition) !important;
}

/* ícono reactua al focus del contenedor padre */
.xoo-el-form-popup .xoo-el-form-group:focus-within .xoo-el-input-icon,
.xoo-el-form-popup .xoo-el-input-group:focus-within .xoo-el-input-icon {
  color: var(--z-red) !important;
  border-right-color: rgba(255, 42, 42, 0.25) !important;
  background: rgba(255, 42, 42, 0.04) !important;
}

/* ── El input en sí — sin borde propio ── */
.xoo-el-form-popup input[type="text"],
.xoo-el-form-popup input[type="email"],
.xoo-el-form-popup input[type="password"],
.xoo-el-form-popup input[type="tel"],
.xoo-el-form-inline input[type="text"],
.xoo-el-form-inline input[type="email"],
.xoo-el-form-inline input[type="password"] {
  flex: 1 !important;
  min-width: 0 !important;
  /* Evita overflow en flex */
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  -webkit-appearance: none !important;

  font-family: var(--z-font) !important;
  font-size: 0.9rem !important;
  color: var(--z-black) !important;

  /* Padding interno generoso */
  padding: 14px 12px !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: static !important;
}

/* Placeholder */
.xoo-el-form-popup input::placeholder,
.xoo-el-form-inline input::placeholder {
  color: #aaaaaa !important;
  opacity: 1 !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
}

/* Quitar estilos de foco del input (el contenedor ya lo maneja) */
.xoo-el-form-popup input:focus,
.xoo-el-form-inline input:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}

/* ── ícono ojo (mostrar/ocultar contraseña) ── */
.xoo-el-pass-toggle,
.xoo-el-form-popup .xoo-el-pass-toggle {
  position: static !important;
  flex-shrink: 0 !important;
  background: none !important;
  border: none !important;
  border-left: 1.5px solid var(--z-border-soft) !important;
  padding: 0 12px !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: var(--z-muted) !important;
  font-size: 1rem !important;
  transition: var(--z-transition) !important;
}

.xoo-el-pass-toggle:hover {
  color: var(--z-black) !important;
}

/* ══ FILA: Recuérdame + ¿Olvidaste contraseña? ═══════════════ */
.xoo-el-form-popup .xoo-el-rp-wrap {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0.25rem 0 1.25rem !important;
}

/* Checkbox genérico */
.xoo-el-form-popup input[type="checkbox"],
.xoo-el-form-inline input[type="checkbox"] {
  width: 15px !important;
  height: 15px !important;
  accent-color: var(--z-red) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  margin: 0 6px 0 0 !important;
  position: static !important;
  border: 1px solid var(--z-border) !important;
}

/* Wrap de checkbox (recuérdame + privacidad) */
.xoo-el-form-popup .xoo-el-checkbox-wrap,
.xoo-el-form-popup .xoo-el-form-group.xoo-el-check,
.xoo-el-form-popup .xoo-el-check {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0 !important;
  margin-bottom: 1rem !important;
  flex-wrap: nowrap !important;
}

.xoo-el-form-popup .xoo-el-checkbox-wrap label,
.xoo-el-form-popup .xoo-el-form-group.xoo-el-check label,
.xoo-el-form-popup .xoo-el-check label {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--z-black) !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  cursor: pointer !important;
  display: inline !important;
}

/* Link de privacidad dentro del checkbox */
.xoo-el-form-popup .xoo-el-check a {
  color: var(--z-red) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  font-size: inherit !important;
  text-transform: uppercase !important;
  letter-spacing: inherit !important;
}

/* ── Link "¿Olvidaste tu contraseña?" ── */
.xoo-el-lostpw-link {
  color: var(--z-red) !important;
  font-family: var(--z-font) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease !important;
  white-space: nowrap !important;
}

.xoo-el-lostpw-link:hover {
  opacity: 0.7 !important;
  color: var(--z-red) !important;
}

/* ══ BOTÓN PRINCIPAL ══════════════════════════════════════════ */
.xoo-el-form-popup .xoo-el-button,
.xoo-el-form-popup input[type="submit"],
.xoo-el-form-popup button[type="submit"],
.xoo-el-form-inline .xoo-el-button,
.xoo-el-form-inline input[type="submit"] {
  /* Layout */
  display: block !important;
  width: 100% !important;
  margin-top: 0.75rem !important;
  padding: 15px 24px !important;
  box-sizing: border-box !important;

  /* Estética Zelva */
  background-color: var(--z-red) !important;
  color: var(--z-white) !important;
  border: none !important;
  border-radius: 0 !important;

  /* Tipografía */
  font-family: var(--z-font) !important;
  font-weight: 900 !important;
  font-size: 0.9rem !important;
  text-transform: uppercase !important;
  letter-spacing: 2.5px !important;

  cursor: pointer !important;
  transition: var(--z-transition) !important;
  -webkit-appearance: none !important;
}

.xoo-el-form-popup .xoo-el-button:hover,
.xoo-el-form-popup input[type="submit"]:hover,
.xoo-el-form-popup button[type="submit"]:hover {
  background-color: var(--z-red-dk) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(255, 42, 42, 0.3) !important;
}

.xoo-el-form-popup .xoo-el-button:active,
.xoo-el-form-popup input[type="submit"]:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

/* ══ ALERTAS: Error / ͉xito ═══════════════════════════════════ */
.xoo-el-form-popup .xoo-el-alert,
.xoo-el-form-inline .xoo-el-alert {
  border-radius: 0 !important;
  padding: 0.875rem 1rem !important;
  margin-bottom: 1rem !important;
  font-family: var(--z-font) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  border-left: 4px solid !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

.xoo-el-form-popup .xoo-el-alert-error {
  background: #fff5f5 !important;
  border-left-color: var(--z-red) !important;
  color: #8B0000 !important;
}

.xoo-el-form-popup .xoo-el-alert-success {
  background: #f0fff4 !important;
  border-left-color: #2E7D32 !important;
  color: #1B5E20 !important;
}

/* ══ FORMULARIO INLINE (Mi Cuenta, Checkout) ══════════════════ */
.xoo-el-form-inline .xoo-el-form-container {
  max-width: 480px !important;
}

.xoo-el-form-inline .xoo-el-form-group,
.xoo-el-form-inline .xoo-el-input-group,
.zelva-auth-form .xoo-el-form-group,
.zelva-auth-form .xoo-el-input-group {
  display: flex !important;
  align-items: center !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0 !important;
  background: #161616 !important;
  margin-bottom: 1rem !important;
  transition: var(--z-transition) !important;
  overflow: hidden !important;
  position: relative !important;
}

.xoo-el-form-inline .xoo-el-form-group:focus-within,
.xoo-el-form-inline .xoo-el-input-group:focus-within,
.zelva-auth-form .xoo-el-form-group:focus-within,
.zelva-auth-form .xoo-el-input-group:focus-within {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 2px rgba(237, 28, 36, 0.12) !important;
}

/* ── ícono XootiX inline: DEJAR ABSOLUTO y estilizar oscuro ── */
/* XootiX usa position:absolute por defecto — lo respetamos y
   compensamos con padding-left en el input (desplazamiento manual) */
.xoo-el-form-inline .xoo-el-form-group .xoo-el-input-icon,
.xoo-el-form-inline .xoo-el-input-group .xoo-el-input-icon,
.zelva-auth-form .xoo-el-form-group .xoo-el-input-icon,
.zelva-auth-form .xoo-el-input-group .xoo-el-input-icon {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #111111 !important;
  border-right: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  color: #555555 !important;
  font-size: 0.95rem !important;
  z-index: 1 !important;
  transition: color 0.2s ease, background 0.2s ease !important;
}

.xoo-el-form-inline .xoo-el-form-group:focus-within .xoo-el-input-icon,
.xoo-el-form-inline .xoo-el-input-group:focus-within .xoo-el-input-icon,
.zelva-auth-form .xoo-el-form-group:focus-within .xoo-el-input-icon,
.zelva-auth-form .xoo-el-input-group:focus-within .xoo-el-input-icon {
  color: var(--color-primary) !important;
  border-right-color: rgba(237, 28, 36, 0.25) !important;
  background: rgba(237, 28, 36, 0.05) !important;
}

/* ── Input: desplazamiento manual de 56px para compensar el ícono ── */
.xoo-el-form-inline input[type="text"],
.xoo-el-form-inline input[type="email"],
.xoo-el-form-inline input[type="password"],
.zelva-auth-form .xoo-el-form-group input[type="text"],
.zelva-auth-form .xoo-el-form-group input[type="email"],
.zelva-auth-form .xoo-el-form-group input[type="password"] {
  flex: 1 !important;
  min-width: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  -webkit-appearance: none !important;
  font-family: var(--font-main) !important;
  font-size: 0.9rem !important;
  color: #ffffff !important;
  /* 48px de ícono + 8px de aire = 56px de desplazamiento manual */
  padding: 14px 12px 14px 56px !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Autofill oscuro para el inline */
.xoo-el-form-inline input:-webkit-autofill,
.xoo-el-form-inline input:-webkit-autofill:hover,
.xoo-el-form-inline input:-webkit-autofill:focus,
.zelva-auth-form .xoo-el-form-group input:-webkit-autofill,
.zelva-auth-form .xoo-el-form-group input:-webkit-autofill:hover,
.zelva-auth-form .xoo-el-form-group input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #161616 inset !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
}

/* Placeholder del inline */
.xoo-el-form-inline input::placeholder,
.zelva-auth-form .xoo-el-form-group input::placeholder {
  color: #555555 !important;
  opacity: 1 !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
}

/* Labels del inline — oscuros */
.xoo-el-form-inline label,
.zelva-auth-form .xoo-el-form-group label {
  color: #aaaaaa !important;
}

/* ícono ojo del inline */
.xoo-el-form-inline .xoo-el-pass-toggle,
.zelva-auth-form .xoo-el-form-group .xoo-el-pass-toggle {
  position: static !important;
  flex-shrink: 0 !important;
  background: none !important;
  border: none !important;
  border-left: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  padding: 0 12px !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #555555 !important;
  font-size: 1rem !important;
  transition: color 0.2s ease !important;
}

.xoo-el-form-inline .xoo-el-pass-toggle:hover,
.zelva-auth-form .xoo-el-form-group .xoo-el-pass-toggle:hover {
  color: #ffffff !important;
}



/* ══ RESPONSIVE — Mobile First ════════════════════════════════ */

/* Tablet (hasta 768px) */
@media (max-width: 768px) {
  .xoo-el-form-popup {
    width: 94vw !important;
    max-width: 94vw !important;
    max-height: 88vh !important;
  }
}

/* Móvil puro (hasta 480px) */
@media (max-width: 480px) {
  .xoo-el-form-popup {
    /* En móvil: 92% del ancho, centrado, padding interno preservado */
    width: 92% !important;
    max-width: 92% !important;
    max-height: 88vh !important;
    border-top-width: 3px !important;
    /* Forzar centrado estricto en móviles */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: auto !important;
    transform: none !important;
  }

  .xoo-el-form-popup .xoo-el-form-container {
    padding: 1.25rem 1.25rem 1rem !important;
  }

  .xoo-el-tabs-nav li a,
  .xoo-el-tabs-nav li span {
    font-size: 0.78rem !important;
    padding: 1rem 0.5rem !important;
    letter-spacing: 0.5px !important;
  }

  .xoo-el-form-popup .xoo-el-rp-wrap {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .xoo-el-form-popup .xoo-el-button,
  .xoo-el-form-popup input[type="submit"] {
    font-size: 0.85rem !important;
    letter-spacing: 2px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   ZELVA AUTH PAGE — /mi-cuenta/ Login + Registro
   Design System: #ff2a2a · #111111 · #FFFFFF · Object Sans
   Fondo oscuro · Mobile First
   ══════════════════════════════════════════════════════════════ */

/* ── Variables locales de la auth page ── */
.zelva-auth-page {
  --zap-bg: #111111;
  --zap-surface: #1c1c1c;
  --zap-surface-2: #242424;
  --zap-border: rgba(255, 255, 255, 0.10);
  --zap-border-focus: var(--color-primary);
  --zap-red: var(--color-primary);
  --zap-white: #ffffff;
  --zap-muted: #888888;
  --zap-tab-active: #0d0d0d;

  /* Layout */
  min-height: 70vh;
  background: var(--zap-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rem 1.5rem 5rem;
  font-family: var(--font-main);
}

/* ── Cabecera ── */
.zelva-auth-eyebrow {
  font-family: var(--font-main);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-primary);
  margin: 0 0 0.75rem;
}

.zelva-auth-title {
  font-family: var(--font-main);
  font-size: clamp(2rem, 6vw, 3.2rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -1px;
  color: #ffffff;
  margin: 0 0 0.75rem;
  line-height: 1;
}

.zelva-auth-subtitle {
  font-family: var(--font-main);
  font-size: 0.95rem;
  color: #888888;
  margin: 0 0 2.5rem;
  max-width: 380px;
  text-align: center;
  line-height: 1.6;
}

/* ── Wrap principal ── */
.zelva-auth-wrap {
  width: 100%;
  max-width: 460px;
  /* Borde exterior: línea roja superior + bordes oscuros */
  border-top: 3px solid var(--color-primary);
  border-left: 1px solid rgba(255, 255, 255, 0.10);
  border-right: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  background: #1c1c1c;
}

/* ══ TABS ═══════════════════════════════════════════════════════ */
.zelva-auth-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.zelva-auth-tab {
  flex: 1;
  padding: 1.1rem 1rem;
  border: none;
  border-bottom: 3px solid transparent;
  background: #1c1c1c;
  font-family: var(--font-main);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #666666;
  cursor: pointer;
  transition: all var(--transition);
  /* Separador entre tabs */
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: -1px;
  /* Solapar el border-bottom del wrap */
}

.zelva-auth-tab:last-child {
  border-right: none;
}

/* Tab activo */
.zelva-auth-tab--active,
.zelva-auth-tab:focus-visible {
  color: #ffffff;
  background: #0d0d0d;
  border-bottom-color: var(--color-primary);
  font-weight: 900;
  outline: none;
}

/* Tab hover (solo inactivos) */
.zelva-auth-tab:not(.zelva-auth-tab--active):hover {
  background: #242424;
  color: #cccccc;
}

/* ══ PANELES ═════════════════════════════════════════════════════ */
.zelva-auth-panel {
  display: none;
  padding: 2rem 2rem 2.25rem;
  background: #0d0d0d;
}

.zelva-auth-panel--active {
  display: block;
}

/* ══ FORMULARIO ═════════════════════════════════════════════════ */
.zelva-auth-form {
  width: 100%;
}

/* ── Grupo de campo ── */
.zelva-field-group {
  margin-bottom: 1.1rem;
}

.zelva-field-label {
  display: block;
  font-family: var(--font-main);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #aaaaaa;
  margin-bottom: 6px;
}

/* ── Wrap del input (ícono + campo + ojo) ── */
.zelva-field-wrap {
  display: flex;
  align-items: center;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  background: #161616;
  transition: border-color var(--transition), box-shadow var(--transition);
  overflow: hidden;
}

/* Focus-within: toda la fila reacciona al foco */
.zelva-field-wrap:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(237, 28, 36, 0.10);
}

/* ícono SVG izquierdo */
.zelva-field-icon {
  flex-shrink: 0;
  width: 40px;
  min-height: 48px;
  padding: 0 10px;
  fill: #555555;
  border-right: 1.5px solid rgba(255, 255, 255, 0.08);
  background: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: fill var(--transition), background var(--transition), border-color var(--transition);
  box-sizing: content-box;
}

.zelva-field-wrap:focus-within .zelva-field-icon {
  fill: var(--color-primary);
  background: rgba(237, 28, 36, 0.04);
  border-right-color: rgba(237, 28, 36, 0.2);
}

/* El input sin borde propio */
.zelva-field-input {
  flex: 1;
  min-width: 0;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  font-family: var(--font-main) !important;
  font-size: 0.92rem !important;
  color: #ffffff !important;
  padding: 14px 12px !important;
  margin: 0 !important;
  -webkit-appearance: none;
}

/* Autofill oscuro */
.zelva-field-input:-webkit-autofill,
.zelva-field-input:-webkit-autofill:hover,
.zelva-field-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #161616 inset !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
}

.zelva-field-input::placeholder {
  color: #444444;
  font-weight: 400;
}

/* Botón ojo (mostrar/ocultar contraseña) */
.zelva-field-eye {
  flex-shrink: 0;
  background: none;
  border: none;
  border-left: 1.5px solid rgba(255, 255, 255, 0.08);
  padding: 0 12px;
  min-height: 48px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555555;
  transition: color var(--transition);
}

.zelva-field-eye svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.zelva-field-eye:hover,
.zelva-field-eye--visible {
  color: #ffffff;
}

/* ── Fila Recuérdame / ¿Olvidaste? ── */
.zelva-field-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0.5rem 0 1.5rem;
}

/* ── Labels de checkbox ── */
.zelva-check-label {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #aaaaaa;
  line-height: 1.4;
}

.zelva-check-label input[type="checkbox"] {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* Label de privacidad (texto normal, sin mayúsculas) */
.zelva-check-label--privacy {
  text-transform: none;
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0;
  color: #888888;
}

.zelva-check-label--privacy a {
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Link olvidé contraseña ── */
.zelva-lost-pw {
  font-family: var(--font-main);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--transition);
}

.zelva-lost-pw:hover {
  opacity: 0.7;
  color: var(--color-primary);
}

/* ── Privacidad en registro ── */
.zelva-privacy-check {
  margin: 0.25rem 0 1.25rem;
}

/* ── Botón principal ── */
.zelva-auth-btn {
  display: block;
  width: 100%;
  padding: 15px 24px;
  margin-top: 0.75rem;
  background-color: var(--color-primary);
  color: #fff;
  border: none;
  font-family: var(--font-main);
  font-weight: 900;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  cursor: pointer;
  transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
}

.zelva-auth-btn:hover {
  background-color: var(--color-primary-dk);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(237, 28, 36, 0.28);
}

.zelva-auth-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ── Aviso cuando el registro está deshabilitado ── */
.zelva-auth-notice {
  font-family: var(--font-main);
  font-size: 0.9rem;
  color: #666666;
  text-align: center;
  padding: 2rem 0;
}

/* ── Mensajes de error/éxito de WooCommerce ── */
.zelva-auth-page .woocommerce-error,
.zelva-auth-page ul.woocommerce-error {
  list-style: none;
  padding: 0.875rem 1rem 0.875rem 1.125rem;
  margin: 0 0 1.25rem;
  background: rgba(237, 28, 36, 0.10);
  border-left: 4px solid var(--color-primary);
  font-family: var(--font-main);
  font-size: 0.88rem;
  color: #ff6b6b;
  font-weight: 600;
}

.zelva-auth-page .woocommerce-message {
  padding: 0.875rem 1rem 0.875rem 1.125rem;
  margin: 0 0 1.25rem;
  background: rgba(46, 125, 50, 0.15);
  border-left: 4px solid #4caf50;
  font-family: var(--font-main);
  font-size: 0.88rem;
  color: #81c784;
  font-weight: 600;
}

/* ══ RESPONSIVE ═════════════════════════════════════════════════ */
@media (max-width: 520px) {
  .zelva-auth-page {
    padding: 2.5rem 1rem 4rem;
  }

  .zelva-auth-wrap {
    max-width: 100%;
    border-left: none;
    border-right: none;
  }

  .zelva-auth-panel {
    padding: 1.5rem 1.25rem 1.75rem;
  }

  .zelva-auth-tab {
    font-size: 0.72rem;
    padding: 0.9rem 0.5rem;
    letter-spacing: 0.5px;
  }

  .zelva-field-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .zelva-auth-title {
    text-align: center;
  }
}

/* ── Overrides de Astra: forzar fondo oscuro en body/main de Mi Cuenta ── */
.woocommerce-account .site-content,
.woocommerce-account .content-area,
.woocommerce-account #primary,
.woocommerce-account main,
.ast-single-post-order .site-content,
/* ══════════════════════════════════════════════════
   REDISEÑO LUXURY DASHBOARD MI CUENTA — ZELVA
   ══════════════════════════════════════════════════ */

/* Fondo general para la página de cuenta (blanco limpio) */
body.woocommerce-account {
  background-color: #ffffff !important;
}

/* Quitar padding/margen extra que Astra añade */
.woocommerce-account .entry-content,
.woocommerce-account .ast-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Ocultar el título por defecto de Astra en Mi Cuenta y Checkout */
body.woocommerce-account header.entry-header,
body.woocommerce-account h1.entry-title,
body.woocommerce-account .page-title,
body.woocommerce-checkout header.entry-header,
body.woocommerce-checkout h1.entry-title,
body.woocommerce-checkout .page-title {
  display: none !important;
  /* Oculto para usar la estructura personalizada zct-wrap */
}

/* ── Layout Principal ── */
.woocommerce-account .woocommerce {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 4rem !important;
  max-width: 1440px !important;
  /* Expandido para asemejarse a /tienda/ */
  width: 100% !important;
  margin: 0 auto 5rem auto !important;
  padding: 0 4rem !important;
  /* Márgenes laterales más amplios */
  align-items: flex-start !important;
}

/* ── Navegación Lateral (Desktop) ── */
.woocommerce-MyAccount-navigation {
  flex: 0 0 260px !important;
  background: transparent !important;
  border-right: 1px solid #e0e0e0 !important;
  padding-right: 2rem !important;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;
}

.woocommerce-MyAccount-navigation ul li {
  margin: 0 !important;
  border: none !important;
}

.woocommerce-MyAccount-navigation ul li a {
  display: flex !important;
  align-items: center !important;
  padding: 1.2rem 1.5rem !important;
  color: #666666 !important;
  font-family: var(--font-main) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  text-decoration: none !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border-left: 3px solid transparent !important;
  background: transparent !important;
}

.woocommerce-MyAccount-navigation ul li a:hover {
  color: #000000 !important;
  padding-left: 2rem !important;
  background: #f9f9f9 !important;
}

.woocommerce-MyAccount-navigation ul li.is-active a {
  color: #000000 !important;
  font-weight: 800 !important;
  border-left: 3px solid #ff2a2a !important;
  background: #fcfcfc !important;
  padding-left: 2rem !important;
}

/* ── Contenedor de Contenido ── */
.woocommerce-MyAccount-content {
  flex: 1 !important;
  min-width: 0 !important;
  color: #333333 !important;
  font-family: var(--font-main) !important;
  font-size: 1rem !important;
  line-height: 1.8 !important;
}

/* Tipografía Responsiva (Clamp) */
.woocommerce-MyAccount-content h1,
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  color: #000000 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  margin-top: 0 !important;
  margin-bottom: 2rem !important;
}

.woocommerce-MyAccount-content h2 {
  font-size: clamp(1.2rem, 3vw, 1.8rem) !important;
  border-bottom: 1px solid #e0e0e0 !important;
  padding-bottom: 1rem !important;
}

.woocommerce-MyAccount-content h3 {
  font-size: clamp(1rem, 2vw, 1.2rem) !important;
  margin-bottom: 1.5rem !important;
}

.woocommerce-MyAccount-content p {
  color: #555555 !important;
  margin-bottom: 1.5rem !important;
}

.woocommerce-MyAccount-content a {
  color: #000000 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border-bottom: 1px solid #000000 !important;
  transition: all 0.3s ease !important;
}

.woocommerce-MyAccount-content a:hover {
  color: #ff2a2a !important;
  border-bottom-color: #ff2a2a !important;
}

/* ── Botones y Acciones (Alto Contraste) ── */
.woocommerce-MyAccount-content .woocommerce-button,
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content button[type="submit"],
.woocommerce-MyAccount-content input[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #000000 !important;
  color: #ffffff !important;
  font-family: var(--font-main) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  padding: 1rem 2rem !important;
  border: 1px solid #000000 !important;
  border-radius: 0 !important;
  /* Bordes rectos luxury */
  cursor: pointer !important;
  transition: all 0.4s ease !important;
  text-decoration: none !important;
}

.woocommerce-MyAccount-content .woocommerce-button:hover,
.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-MyAccount-content input[type="submit"]:hover {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

/* Botones secundarios (como "Ver pedido") */
.woocommerce-MyAccount-content table .button {
  background: transparent !important;
  color: #000000 !important;
  padding: 0.5rem 1rem !important;
  border: 1px solid #e0e0e0 !important;
  font-size: 0.75rem !important;
}

.woocommerce-MyAccount-content table .button:hover {
  background: #ff2a2a !important;
  color: #ffffff !important;
  border-color: #ff2a2a !important;
}

/* ── Tablas (Pedidos, Descargas) ── */
.woocommerce-MyAccount-content table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 0 !important;
}

.woocommerce-MyAccount-content table thead th {
  background: #fafafa !important;
  color: #000000 !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  padding: 1.2rem 1.5rem !important;
  border-bottom: 1px solid #e0e0e0 !important;
  text-align: left !important;
}

.woocommerce-MyAccount-content table tbody td {
  padding: 1.2rem 1.5rem !important;
  color: #333333 !important;
  font-size: 0.95rem !important;
  border-bottom: 1px solid #e0e0e0 !important;
  vertical-align: middle !important;
}

/* ── Formularios Generales ── */
.woocommerce-MyAccount-content form {
  background: #ffffff !important;
  padding: 2rem !important;
  border: 1px solid #e0e0e0 !important;
}

.woocommerce-MyAccount-content form label {
  color: #000000 !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-bottom: 0.5rem !important;
  display: block !important;
}

.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="tel"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea {
  width: 100% !important;
  background: #fcfcfc !important;
  color: #000000 !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 0 !important;
  padding: 1rem 1.2rem !important;
  font-family: var(--font-main) !important;
  font-size: 0.95rem !important;
  transition: all 0.3s ease !important;
}

.woocommerce-MyAccount-content input:focus,
.woocommerce-MyAccount-content select:focus,
.woocommerce-MyAccount-content textarea:focus {
  background: #ffffff !important;
  border-color: #000000 !important;
  outline: none !important;
  box-shadow: inset 0 0 0 1px #000000 !important;
}

.woocommerce-MyAccount-content fieldset {
  border: 1px solid #e0e0e0 !important;
  padding: 2rem !important;
  margin-top: 2rem !important;
  background: #fafafa !important;
}

.woocommerce-MyAccount-content fieldset legend {
  color: #000000 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-size: 0.9rem !important;
  padding: 0 1rem !important;
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
}

/* ── Direcciones (Tarjetas de contenido) ── */
.woocommerce-MyAccount-content .woocommerce-Addresses,
.woocommerce-MyAccount-content .u-columns.addresses {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2rem !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.woocommerce-MyAccount-content .woocommerce-Address,
.woocommerce-MyAccount-content .u-column1,
.woocommerce-MyAccount-content .u-column2,
.woocommerce-MyAccount-content .u-columns .col-1,
.woocommerce-MyAccount-content .u-columns .col-2 {
  flex: 1 !important;
  min-width: 280px !important;
  width: auto !important;
  /* Resetea el width de WooCommerce (suele ser 48%) */
  max-width: 100% !important;
  float: none !important;
  /* Resetea los floats nativos */
  margin: 0 !important;
  /* Quita márgenes asimétricos de Astra */

  /* ESTILOS DE ORDERS (Empty State) APLICADOS AQUí */
  background: #fafafa !important;
  color: #333333 !important;
  border: 1px solid #e0e0e0 !important;
  border-top: 3px solid #ff2a2a !important;
  /* Acento rojo superior */
  padding: 3rem 2rem !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  /* Efecto hover mantenido */
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.woocommerce-MyAccount-content .woocommerce-Address:hover,
.woocommerce-MyAccount-content .u-column1:hover,
.woocommerce-MyAccount-content .u-column2:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

/* Modificar el header para que el link de Editar parezca un botón */
.woocommerce-MyAccount-content .woocommerce-Address header,
.woocommerce-MyAccount-content .woocommerce-column__title,
.woocommerce-MyAccount-content .u-columns h2,
.woocommerce-MyAccount-content .u-columns h3 {
  border-bottom: none !important;
  /* Quitamos la línea de abajo porque ya hay acento superior */
  margin-bottom: 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1rem !important;
}

.woocommerce-MyAccount-content .woocommerce-Address header a.edit {
  background: #ff2a2a !important;
  color: #ffffff !important;
  border: none !important;
  padding: 0.6rem 1.5rem !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  margin-top: 0.5rem !important;
}

.woocommerce-MyAccount-content .woocommerce-Address header a.edit:hover {
  background: #000000 !important;
  color: #ffffff !important;
}

.woocommerce-MyAccount-content address {
  color: #555555 !important;
  font-style: normal !important;
  line-height: 1.8 !important;
  margin-bottom: 0 !important;
  font-size: 1.05rem !important;
}

/* ── Empty States (Sin pedidos, sin descargas) ── */
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-info {
  background: #fafafa !important;
  color: #333333 !important;
  border: 1px solid #e0e0e0 !important;
  border-top: 3px solid #ff2a2a !important;
  /* Acento rojo */
  padding: 3rem 2rem !important;
  text-align: center !important;
  font-size: 1.1rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.5rem !important;
}

/* Formatear el link como botón principal en los empty states */
.woocommerce-MyAccount-content .woocommerce-message a.button,
.woocommerce-MyAccount-content .woocommerce-info a.button {
  background: #ff2a2a !important;
  color: #ffffff !important;
  border-color: #ff2a2a !important;
  margin-top: 1rem !important;
}

.woocommerce-MyAccount-content .woocommerce-message a.button:hover,
.woocommerce-MyAccount-content .woocommerce-info a.button:hover {
  background: #000000 !important;
  border-color: #000000 !important;
}

/* Mensajes de error */
.woocommerce-MyAccount-content .woocommerce-error {
  background: #fff0f0 !important;
  color: #cc0000 !important;
  border: 1px solid #ffcccc !important;
  border-left: 4px solid #ff2a2a !important;
  padding: 1.5rem !important;
  list-style-position: inside !important;
}

/* ── Select2 Dropdowns (Luxury Style) ── */
.woocommerce-MyAccount-content .select2-container--default .select2-selection--single {
  background: #fcfcfc !important;
  color: #000000 !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 0 !important;
  height: auto !important;
  padding: 0.8rem 1.2rem !important;
}

.woocommerce-MyAccount-content .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #000000 !important;
  line-height: 1.5 !important;
  padding-left: 0 !important;
}

.woocommerce-MyAccount-content .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 50% !important;
  transform: translateY(-50%) !important;
  right: 1rem !important;
}

.select2-dropdown {
  background: #ffffff !important;
  border: 1px solid #000000 !important;
  border-radius: 0 !important;
}

.select2-results__option {
  color: #333333 !important;
  padding: 0.8rem 1.2rem !important;
}

.select2-results__option--highlighted {
  background: #000000 !important;
  color: #ffffff !important;
}

/* ── Correcciones XootiX Login/Register (Vista Account & Checkout) ── */
.woocommerce-account .xoo-el-section,
.woocommerce-account .xoo-el-form-container,
.woocommerce-checkout .xoo-el-section,
.woocommerce-checkout .xoo-el-form-container {
  color: #000000 !important;
}

.xoo-el-form-wrap label,
.xoo-el-form-container label {
  color: #000000 !important;
  font-weight: 600 !important;
}

/* Forzar inputs de XootiX para que tengan fondo claro y letra oscura */
.xoo-el-form-wrap input[type="text"],
.xoo-el-form-wrap input[type="email"],
.xoo-el-form-wrap input[type="password"],
.xoo-aff-group input.xoo-aff-field {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #e0e0e0 !important;
  padding: 12px 16px 12px 45px !important;
  /* Espacio para el ícono si existe */
}

.xoo-el-form-wrap input:focus,
.xoo-aff-group input.xoo-aff-field:focus {
  background-color: #ffffff !important;
  border-color: #000000 !important;
  box-shadow: inset 0 0 0 1px #000000 !important;
  color: #000000 !important;
}

/* Evitar que el autocompletado de Chrome ponga los inputs negros */
.xoo-el-form-wrap input:-webkit-autofill,
.xoo-el-form-wrap input:-webkit-autofill:hover,
.xoo-el-form-wrap input:-webkit-autofill:focus,
.xoo-el-form-wrap input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
  -webkit-text-fill-color: #000000 !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* Pestañas (Tabs) de Login / Registro */
.xoo-el-tabs li {
  color: #666666 !important;
  background-color: #f0f0f0 !important;
  /* Fondo gris claro inactivo */
}

.xoo-el-tabs li.xoo-el-active {
  color: #ffffff !important;
  /* Texto blanco */
  background-color: #000000 !important;
  /* Fondo negro activo */
  border-bottom: none !important;
}

.xoo-el-notice {
  color: #000000 !important;
}

/* íconos dentro de los inputs de XootiX */
.xoo-aff-input-icon {
  color: #888888 !important;
  z-index: 2;
}

/* ── Comportamiento Móvil (Tabs Horizontales Fluidos) ── */
@media (max-width: 992px) {
  .woocommerce-account .woocommerce {
    flex-direction: column !important;
    gap: 2rem !important;
    padding: 0 1.5rem !important;
    margin: 2rem auto !important;
  }

  .woocommerce-MyAccount-navigation {
    flex: none !important;
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid #e0e0e0 !important;
    padding-right: 0 !important;
    padding-bottom: 0.5rem !important;
    overflow: hidden !important;
  }

  .woocommerce-MyAccount-navigation ul {
    flex-direction: row !important;
    gap: 0 !important;
    overflow-x: auto !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    /* Ocultar scrollbar Firefox */
  }

  .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
    display: none !important;
    /* Ocultar scrollbar Chrome/Safari */
  }

  .woocommerce-MyAccount-navigation ul li {
    flex: 0 0 auto !important;
    /* Evita que los items se encojan */
  }

  .woocommerce-MyAccount-navigation ul li a {
    padding: 1rem 1.5rem !important;
    font-size: 0.8rem !important;
    border-left: none !important;
    border-bottom: 3px solid transparent !important;
    white-space: nowrap !important;
  }

  .woocommerce-MyAccount-navigation ul li a:hover {
    padding-left: 1.5rem !important;
    background: transparent !important;
    color: #ff2a2a !important;
  }

  .woocommerce-MyAccount-navigation ul li.is-active a {
    padding-left: 1.5rem !important;
    border-left: none !important;
    border-bottom: 3px solid #ff2a2a !important;
    background: transparent !important;
  }

  .woocommerce-MyAccount-content form {
    padding: 1.5rem !important;
  }

  .woocommerce-MyAccount-content .woocommerce-Address {
    padding: 1.5rem !important;
    min-width: 100% !important;
  }
}

/* ══════════════════════════════════════════════════
   ESTILOS DEL TíTULO ANIMADO DE ZELVA
   ══════════════════════════════════════════════════ */
.zelva-contact-title {
  --zelva-bg: #ffffff;
  --zelva-text: #0a0a0a;
  --zelva-muted: rgba(10, 10, 10, 0.68);
  --zelva-red: #f50204;
  --zelva-line: rgba(0, 0, 0, 0.08);

  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 25%, rgba(245, 2, 4, 0.05), transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(245, 2, 4, 0.04), transparent 18%),
    linear-gradient(180deg, #ffffff 0%, #f8f8f8 100%);
  padding: 110px 24px 90px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  isolation: isolate;
}

.zelva-contact-title * {
  box-sizing: border-box;
}

.zelva-contact-title::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.018) 1px, transparent 1px),
    linear-gradient(180deg, rgba(0, 0, 0, 0.018) 1px, transparent 1px);
  background-size: 38px 38px;
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
}

.zelva-contact-title .zct-wrap {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.zelva-contact-title .zct-kicker {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 12px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--zelva-red);
}

.zelva-contact-title .zct-title {
  position: relative;
  display: inline-block;
  margin: 0;
  font-size: clamp(42px, 8vw, 108px);
  line-height: 0.95;
  letter-spacing: -0.05em;
  font-weight: 650;
  color: var(--zelva-text);
  max-width: 100%;
  text-wrap: balance;
}

.zelva-contact-title .zct-title span {
  color: var(--zelva-red);
  position: relative;
  z-index: 2;
}

.zelva-contact-title .zct-title::before {
  content: "";
  position: absolute;
  width: clamp(120px, 18vw, 220px);
  height: clamp(120px, 18vw, 220px);
  left: 58%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(245, 2, 4, 0.10), transparent 70%);
  filter: blur(22px);
  z-index: 1;
  pointer-events: none;
}

.zelva-contact-title .zct-line {
  position: relative;
  width: min(420px, 70vw);
  height: 2px;
  margin-top: 22px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
  border-radius: 999px;
}

.zelva-contact-title .zct-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: -35%;
  width: 35%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--zelva-red), transparent);
  animation: zelvaContactLineMove 3.2s ease-in-out infinite;
}

.zelva-contact-title .zct-sub {
  max-width: 760px;
  margin: 28px auto 0;
  font-size: 18px;
  line-height: 1.8;
  color: var(--zelva-muted);
  text-align: center;
}

.zelva-contact-title .zct-orbit {
  position: absolute;
  top: 24px;
  right: 30px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 1px solid rgba(245, 2, 4, 0.12);
  box-shadow: inset 0 0 0 18px rgba(245, 2, 4, 0.025);
  opacity: 0.9;
  pointer-events: none;
}

.zelva-contact-title .zct-orbit::before,
.zelva-contact-title .zct-orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.zelva-contact-title .zct-orbit::before {
  inset: 18px;
}

.zelva-contact-title .zct-orbit::after {
  inset: 42px;
  border-color: rgba(245, 2, 4, 0.08);
}

@keyframes zelvaContactLineMove {
  0% {
    left: -35%;
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  50% {
    left: 45%;
    opacity: 1;
  }

  100% {
    left: 110%;
    opacity: 0;
  }
}

@media (max-width: 991px) {
  .zelva-contact-title {
    padding: 90px 22px 76px;
  }

  .zelva-contact-title .zct-orbit {
    width: 130px;
    height: 130px;
    top: 20px;
    right: 20px;
  }
}

@media (max-width: 767px) {
  .zelva-contact-title {
    padding: 78px 18px 64px;
  }

  .zelva-contact-title .zct-kicker {
    font-size: 11px;
    letter-spacing: 0.22em;
    margin-bottom: 14px;
  }

  .zelva-contact-title .zct-title {
    font-size: clamp(34px, 12vw, 56px);
    line-height: 1.02;
  }

  .zelva-contact-title .zct-line {
    width: min(240px, 72vw);
    margin-top: 18px;
  }

  .zelva-contact-title .zct-sub {
    font-size: 16px;
    line-height: 1.7;
    margin-top: 22px;
  }

  .zelva-contact-title .zct-orbit {
    width: 92px;
    height: 92px;
    top: 14px;
    right: 12px;
    opacity: 0.55;
  }
}

/* ══════════════════════════════════════════════════
   ESTILOS DE LA FICHA T͉CNICA VERTICAL (CLAVE/VALOR)
   ══════════════════════════════════════════════════ */
.zelva-tech-list-wrap {
  margin-top: 2rem;
  width: 100%;
}

.zelva-tech-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

.zelva-tech-item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.zelva-tech-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Las "Claves" (Categoría, Producto, Color...) */
.zelva-tech-item dt {
  font-family: var(--font-main);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #888888;
  font-weight: 700;
  margin: 0;
  line-height: 1;
}

/* Los "Valores" (Exterior, Casaca táctica, 80%...) */
.zelva-tech-item dd {
  font-family: var(--font-main);
  font-size: 1.1rem;
  color: #ffffff;
  margin: 0;
  line-height: 1.5;
  font-weight: 400;
}

/* Ajustes mínimos en móviles */
@media (max-width: 767px) {
  .zelva-tech-item dt {
    font-size: 0.7rem;
  }

  .zelva-tech-item dd {
    font-size: 1rem;
  }
}

/* ══════════════════════════════════════════════════
   ⓫ PÁGINAS LEGALES (Privacy, Cookies & Terms)
   ══════════════════════════════════════════════════ */
.zelva-legal-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 4rem 2rem;
  font-family: var(--font-main);
  color: var(--color-text);
  line-height: 1.8;
}

.zelva-legal-section {
  margin-bottom: 4rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 2rem;
}

.zelva-legal-section:last-child {
  border-bottom: none;
}

.zelva-legal-section h2 {
  font-size: 1.8rem;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--color-secondary);
}

.zelva-legal-section h2::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background: var(--color-primary);
}

.zelva-legal-section h3 {
  font-size: 1.2rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: var(--color-secondary);
  font-weight: 700;
}

.zelva-legal-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}

.zelva-legal-list li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
}

.zelva-legal-list li::before {
  content: "— ";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 900;
}

.zelva-legal-highlight {
  background: var(--color-muted);
  border-left: 4px solid var(--color-primary);
  padding: 1.5rem;
  margin: 2rem 0;
  font-style: italic;
}

.zelva-legal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.zelva-legal-card {
  background: var(--color-muted);
  padding: 1.5rem;
  border: 1px solid var(--color-border);
}

.zelva-legal-card h4 {
  margin-top: 0;
  color: var(--color-primary);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

@media (max-width: 768px) {
  .zelva-legal-content {
    padding: 2rem 1rem;
  }

  .zelva-legal-section h2 {
    font-size: 1.4rem;
  }
}

/* FIX: LOGIN FORM CHECKOUT (ZELVA UX)
/* Contenedor del formulario en checkout */
.woocommerce-checkout .login {
  background-color: var(--color-muted) !important;
  border: 1px solid var(--color-border) !important;
  padding: 2rem !important;
  margin-bottom: 2rem !important;
}

/* Forzar legibilidad en los campos de texto al escribir */
.woocommerce-checkout .login .form-row input.input-text {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  /* Texto negro para contraste total */
  border: 2px solid var(--color-secondary) !important;
  padding: 12px 16px !important;
  height: auto !important;
}

/* Estilo para los labels del login */
.woocommerce-checkout .login .form-row label {
  color: var(--color-secondary) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  font-size: 0.8rem;
}

/* Boton de acceso para que coincida con ZELVA */
.woocommerce-checkout .login .button {
  width: 100% !important;
  margin-top: 10px !important;
}

/* Ocultar botón "Actualizar carrito" ya que es automático */
[name="update_cart"] {
  display: none !important;
}

/* ══════════ FIX: DIRECCIONES MI CUENTA (MÓVIL) ══════════ */
@media (max-width: 768px) {
  /* Contenedor principal de las direcciones */
  .woocommerce-page .col2-set.addresses,
  .woocommerce .col2-set.addresses,
  .woocommerce-Addresses,
  .u-columns.woocommerce-Addresses {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Columnas individuales (Facturación y Envío) */
  .woocommerce-page .col2-set.addresses .col-1,
  .woocommerce-page .col2-set.addresses .col-2,
  .woocommerce .col2-set.addresses .col-1,
  .woocommerce .col2-set.addresses .col-2,
  .woocommerce-Addresses .woocommerce-Address,
  .u-columns.woocommerce-Addresses .u-column1,
  .u-columns.woocommerce-Addresses .u-column2 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
    margin: 0 0 2rem 0 !important;
    padding: 0 !important;
    align-self: flex-start !important;
    clear: both !important;
  }
}