/**
 * === WOOCOMMERCE CUSTOM STYLES ===
 * Integra WooCommerce con el tema Esmeralda
 * Cargado en: functions.php
 */

/* ═══════════════════════════════════════════════════════════════
   0. SINGLE PRODUCT — Protección del layout de lujo
   ═══════════════════════════════════════════════════════════════
   NOTA: NO ocultar .wp-block-template-part ni .has-global-padding
   porque esas clases envuelven NUESTRA navegación premium.
   Sólo aplicamos overrides quirúrgicos y muy específicos.
   ═══════════════════════════════════════════════════════════════ */

/* Fondo oscuro uniforme — sólo en páginas de producto individual */
body.single-product .wp-site-blocks,
body.single-product .wp-site-blocks > *,
body.single-product #content,
body.single-product main.site-main,
body.single-product .entry-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Specific gap killer for product pages */
#product-hero-section {
    margin-top: 0 !important;
}

/* Force header to be at the very top and content to follow accurately */
body.single-product header.wp-block-template-part {
    margin-bottom: 0 !important;
}

/* Ocultar el breadcrumb de WooCommerce en producto — no encaja tipográficamente */
body.single-product .woocommerce-breadcrumb,
body.single-product nav.woocommerce-breadcrumb,
body.single-product .wc-block-breadcrumbs {
    display: none !important;
}

/* Ocultar notificaciones nativas de WooCommerce en producto:
   nuestro Cart Drawer y Toast JS ya dan el feedback visual premium. */
body.single-product .woocommerce-notices-wrapper {
    display: none !important;
}

/* ─────────────────────────────────────────────── */
/* 1. PRODUCT GRID & LOOPS */
/* ─────────────────────────────────────────────── */

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  background: var(--og-surface-800);
  border: 1px solid var(--og-emerald-500)/20;
  border-radius: 4px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  list-style: none !important;
}

.woocommerce ul.products li.product:hover {
  border-color: var(--og-emerald-400);
  box-shadow: 0 0 30px rgba(52, 211, 153, 0.15);
  transform: translateY(-4px);
}

/* Product Image Container */
.woocommerce ul.products li.product .product-image-container,
.woocommerce ul.products li.product .woocommerce-product-gallery {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1/1;
  background: var(--og-surface-900);
}

.woocommerce ul.products li.product img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Product Info */
.woocommerce ul.products li.product .product-info {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-headline);
  font-size: 18px;
  font-weight: 600;
  color: var(--og-text-100);
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.woocommerce ul.products li.product .product-details {
  font-size: 13px;
  color: var(--og-text-400);
  margin-bottom: 12px;
}

/* Price */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .woocommerce-Price-amount {
  color: var(--og-emerald-400);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 12px;
}

.woocommerce ul.products li.product .woocommerce-Price-amount bdi {
  color: var(--og-gold);
}

/* Button */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
  background: linear-gradient(135deg, var(--og-emerald-600) 0%, var(--og-emerald-500) 100%);
  border: 1px solid var(--og-emerald-400)/50;
  color: var(--og-text-100);
  padding: 12px 20px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  margin: 0;
  width: 100%;
  text-align: center;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
  background: linear-gradient(135deg, var(--og-emerald-500) 0%, var(--og-emerald-400) 100%);
  box-shadow: 0 0 20px rgba(52, 211, 153, 0.3);
  border-color: var(--og-emerald-400);
}

/* ─────────────────────────────────────────────── */
/* 2. SINGLE PRODUCT PAGE */
/* ─────────────────────────────────────────────── */

.woocommerce-page .product {
  background: var(--og-surface-900);
}

.woocommerce-page .product .product-gallery-section {
  margin-bottom: 40px;
}

/* Product Image Gallery */
.woocommerce div.product div.images,
.woocommerce-page div.product div.images {
  flex: 1;
  position: relative;
}

.woocommerce div.product .woocommerce-product-gallery__image,
.woocommerce-page div.product .woocommerce-product-gallery__image {
  border: 1px solid var(--og-emerald-500)/20;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 1;
}

/* Product Summary */
.woocommerce div.product div.summary,
.woocommerce-page div.product div.summary {
  flex: 1;
  padding-left: 40px;
}

.woocommerce div.product .product-title,
.woocommerce div.product h1.product_title {
  font-family: var(--font-headline);
  font-size: 48px;
  font-weight: 600;
  color: var(--og-text-100);
  margin-bottom: 16px;
  line-height: 1.2;
}

.woocommerce div.product .product-rating {
  margin-bottom: 20px;
}

.woocommerce .product-rating .star-rating {
  color: var(--og-gold);
}

/* Product Meta */
.woocommerce div.product .product-meta {
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--og-emerald-500)/20;
}

.woocommerce div.product .product-meta p {
  margin: 0 0 8px 0;
  color: var(--og-text-400);
  font-size: 14px;
}

/* Add to Cart Form */
.woocommerce div.product form.cart {
  display: grid;
  gap: 20px;
  margin-bottom: 30px;
}

.woocommerce div.product .quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--og-emerald-500)/30;
  border-radius: 4px;
  background: var(--og-surface-800);
  margin-bottom: 0;
}

.woocommerce div.product .quantity input.qty {
  width: 80px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: var(--og-text-100);
  text-align: center;
  font-weight: 600;
}

.woocommerce div.product .quantity button {
  background: var(--og-emerald-500)/20;
  border: none;
  color: var(--og-emerald-400);
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.woocommerce div.product .quantity button:hover {
  background: var(--og-emerald-500)/40;
}

.woocommerce div.product .add_to_cart_button.button.alt {
  background: linear-gradient(135deg, var(--og-emerald-600) 0%, var(--og-emerald-500) 100%);
  border: 1px solid var(--og-emerald-400)/50;
  color: var(--og-text-100);
  padding: 16px 40px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border-radius: 4px;
  width: 100%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.woocommerce div.product .add_to_cart_button.button.alt:hover {
  background: linear-gradient(135deg, var(--og-emerald-500) 0%, var(--og-emerald-400) 100%);
  box-shadow: 0 0 30px rgba(52, 211, 153, 0.3);
  border-color: var(--og-emerald-400);
}

/* ─────────────────────────────────────────────── */
/* 2.5 PRODUCT ARCHIVE / CATEGORY PAGES (LA BÓVEDA) */
/* ─────────────────────────────────────────────── */

body.archive.tax-product_cat .woocommerce-products-header {
  padding-top: 20px !important;
  margin-bottom: 24px !important;
}

body.archive.tax-product_cat .woocommerce-products-header__title.page-title {
  font-family: var(--font-headline);
  font-size: 4rem !important;
  font-weight: 600;
  color: #fff;
  margin-bottom: 16px;
}

body.archive.tax-product_cat .term-description {
  color: var(--og-text-400);
  margin-bottom: 40px;
  font-size: 1.125rem;
  max-width: 800px;
}

body.archive.woocommerce {
  padding-top: 0 !important;
}

/* ─────────────────────────────────────────────── */
/* 2.6 ELIMINAR BARRA NEGRA FSE EN /PRODUCTS/      */
/* ─────────────────────────────────────────────── */

/* Eliminar cualquier elemento header que Hostinger inyecte sobre nuestra plantilla */
body.page-template-page-products .wp-site-blocks > * + *:not(#main):not(.esmeralda-content),
body.page-template-page-products .wp-block-template-part:not([class*="navigation"]),
body.page-template-page-products header.wp-block-template-part {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Asegurar que nuestro nav fijo quede encima */
body.page-template-page-products nav.fixed {
  display: flex !important;
  z-index: 9999 !important;
}

/* ─────────────────────────────────────────────── */
/* 3. CART & CHECKOUT */
/* ─────────────────────────────────────────────── */

.woocommerce-cart table td,
.woocommerce-checkout table td {
  border-color: var(--og-emerald-500)/20;
  color: var(--og-text-100);
}

.woocommerce-cart table th,
.woocommerce-checkout table th {
  background: var(--og-surface-800);
  color: var(--og-text-100);
  border-color: var(--og-emerald-500)/20;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Cart Summary (Sidebar) */
.woocommerce .cart_totals,
.woocommerce .woocommerce-checkout .order-review,
.woocommerce.woocommerce-checkout .woocommerce-checkout-review-order {
  background: var(--og-surface-800);
  border: 1px solid var(--og-emerald-500)/20;
  padding: 24px;
  border-radius: 4px;
}

.woocommerce .cart_totals table tr,
.woocommerce .order-review table tr {
  border-color: var(--og-emerald-500)/20;
}

.woocommerce .cart_totals tr.total td,
.woocommerce .order-review tr.total td {
  background: var(--og-emerald-900)/30;
  color: var(--og-emerald-400);
  font-weight: 700;
  font-size: 18px;
}

/* Form Fields */
.woocommerce form .form-row input,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  background: var(--og-surface-800);
  border: 1px solid var(--og-emerald-500)/30;
  color: var(--og-text-100);
  padding: 12px 16px;
  border-radius: 4px;
  font-family: inherit;
}

.woocommerce form .form-row input:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--og-emerald-400);
  outline: none;
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.1);
}

/* ─────────────────────────────────────────────── */
/* 4. CHECKOUT BUTTON */
/* ─────────────────────────────────────────────── */

.woocommerce .checkout-button,
.woocommerce #place_order {
  background: linear-gradient(135deg, var(--og-emerald-600) 0%, var(--og-emerald-500) 100%) !important;
  border: 1px solid var(--og-emerald-400)/50 !important;
  color: var(--og-text-100) !important;
  padding: 16px 40px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  border-radius: 4px !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover {
  background: linear-gradient(135deg, var(--og-emerald-500) 0%, var(--og-emerald-400) 100%) !important;
  box-shadow: 0 0 30px rgba(52, 211, 153, 0.3) !important;
  border-color: var(--og-emerald-400) !important;
}

/* ─────────────────────────────────────────────── */
/* 5. RESPONSIVE */
/* ─────────────────────────────────────────────── */

@media (max-width: 768px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
  }

  .woocommerce ul.products li.product h2 {
    font-size: 14px;
  }

  .woocommerce div.product div.summary {
    padding-left: 0;
  }

  .woocommerce div.product .product-title,
  .woocommerce div.product h1.product_title {
    font-size: 32px;
  }
}

/* ─────────────────────────────────────────────── */
/* 6. NOTIFICATIONS */
/* ─────────────────────────────────────────────── */

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  background-color: #09090b !important;
  border-left: 4px solid #10b981 !important;
  color: #f4f4f5 !important;
  padding: 16px 20px !important;
  border-radius: 4px !important;
  margin-bottom: 20px !important;
}

.woocommerce-error {
  border-left-color: #ef4444;
}

.woocommerce-info {
  border-left-color: var(--og-gold);
}

/* ─────────────────────────────────────────────── */
/* 7. CART PAGE — LAYOUT COMPLETO                  */
/* ─────────────────────────────────────────────── */

/* Asegurar fondo oscuro en página de carrito */
body.woocommerce-cart,
body.woocommerce-cart .woocommerce,
body.woocommerce-cart .entry-content {
  background-color: var(--og-surface-950) !important;
  color: var(--og-text-100) !important;
}

/* Padding-top para compensar el navbar fixed (76px + margen) */
body.woocommerce-cart .woocommerce {
  padding-top: 0;
}

/* Layout de la página del carrito */
.woocommerce-cart-form {
  margin-bottom: 40px;
}

/* Return to shop button in empty cart */
.return-to-shop a.button.wc-backward,
.woocommerce-message a.button.wc-forward {
  background: linear-gradient(135deg, var(--og-emerald-600) 0%, var(--og-emerald-500) 100%) !important;
  border: 1px solid var(--og-emerald-400)/50 !important;
  color: var(--og-text-100) !important;
  padding: 16px 40px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  border-radius: 4px !important;
  display: inline-block !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.return-to-shop a.button.wc-backward:hover,
.woocommerce-message a.button.wc-forward:hover {
  background: linear-gradient(135deg, var(--og-emerald-500) 0%, var(--og-emerald-400) 100%) !important;
  box-shadow: 0 0 30px rgba(52, 211, 153, 0.3) !important;
  border-color: var(--og-emerald-400) !important;
}

/* Tabla del carrito */
.woocommerce-cart-form table.cart {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}

.woocommerce-cart-form table.cart thead th {
  background: var(--og-surface-800) !important;
  color: var(--og-text-100) !important;
  border: 1px solid rgba(16, 185, 129, 0.12) !important;
  font-family: var(--font-label, monospace);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  padding: 16px 20px;
}

.woocommerce-cart-form table.cart tbody td {
  background: var(--og-surface-900) !important;
  color: var(--og-text-100) !important;
  border: 1px solid rgba(16, 185, 129, 0.08) !important;
  padding: 20px;
  vertical-align: middle;
}

/* Imagen del producto en el carrito */
.woocommerce-cart-form table.cart .product-thumbnail img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid rgba(16, 185, 129, 0.15);
}

/* Nombre del producto */
.woocommerce-cart-form table.cart .product-name a {
  color: var(--og-text-100) !important;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s ease;
}
.woocommerce-cart-form table.cart .product-name a:hover {
  color: var(--og-emerald-400) !important;
}

/* Precio */
.woocommerce-cart-form table.cart .product-price,
.woocommerce-cart-form table.cart .product-subtotal {
  color: var(--og-gold) !important;
  font-weight: 700;
  font-size: 16px;
}

.woocommerce-cart-form table.cart .product-price .woocommerce-Price-amount,
.woocommerce-cart-form table.cart .product-subtotal .woocommerce-Price-amount {
  color: var(--og-gold) !important;
}

/* Qty input */
.woocommerce-cart-form table.cart .qty {
  background: var(--og-surface-800) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  color: var(--og-text-100) !important;
  width: 64px;
  padding: 8px;
  text-align: center;
  border-radius: 4px;
  font-weight: 600;
}

/* Botón de eliminar (× rojo) */
.woocommerce-cart-form table.cart .product-remove a {
  color: #ef4444 !important;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}
.woocommerce-cart-form table.cart .product-remove a:hover {
  opacity: 1;
}

/* Fila de acciones del carrito */
.woocommerce-cart-form table.cart .actions {
  background: var(--og-surface-900) !important;
  border: 1px solid rgba(16, 185, 129, 0.08) !important;
  padding: 20px;
}

/* Cupón input */
.woocommerce-cart-form .coupon input[type="text"] {
  background: var(--og-surface-800) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  color: var(--og-text-100) !important;
  padding: 12px 16px;
  border-radius: 4px;
  margin-right: 8px;
}

/* Actualizar carrito / Aplicar cupón buttons */
.woocommerce-cart-form .button,
.woocommerce-cart-form input[type="submit"] {
  background: transparent !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  color: var(--og-emerald-400) !important;
  padding: 12px 24px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}
.woocommerce-cart-form .button:hover,
.woocommerce-cart-form input[type="submit"]:hover {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: var(--og-emerald-400) !important;
  color: var(--og-emerald-300) !important;
}

/* ─────────────────────────────────────────────── */
/* 8. ORDER SUMMARY / CART TOTALS SIDEBAR          */
/* ─────────────────────────────────────────────── */

.cart-collaterals {
  background: transparent !important;
}

.woocommerce .cart_totals {
  background: var(--og-surface-800) !important;
  border: 1px solid rgba(16, 185, 129, 0.15) !important;
  border-radius: 4px !important;
  padding: 32px !important;
}

.woocommerce .cart_totals h2 {
  font-family: var(--font-label, monospace);
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3em !important;
  color: var(--og-text-100) !important;
  margin-bottom: 24px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(16, 185, 129, 0.12) !important;
}

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

.woocommerce .cart_totals table tr th {
  background: transparent !important;
  color: var(--og-text-400) !important;
  border: none !important;
  border-bottom: 1px solid rgba(16, 185, 129, 0.08) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  padding: 12px 0 !important;
}

.woocommerce .cart_totals table tr td {
  background: transparent !important;
  color: var(--og-text-100) !important;
  border: none !important;
  border-bottom: 1px solid rgba(16, 185, 129, 0.08) !important;
  padding: 12px 0 !important;
  text-align: right;
}

.woocommerce .cart_totals table tr.order-total th,
.woocommerce .cart_totals table tr.order-total td {
  border-bottom: none !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.woocommerce .cart_totals table tr.order-total td .woocommerce-Price-amount {
  color: var(--og-gold) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
}

/* Botón Proceder al Checkout */
.woocommerce .wc-proceed-to-checkout .checkout-button {
  display: block !important;
  width: 100% !important;
  background: linear-gradient(135deg, var(--og-emerald-700) 0%, var(--og-emerald-600) 100%) !important;
  border: 1px solid rgba(52, 211, 153, 0.3) !important;
  color: #fff !important;
  padding: 18px 40px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.25em !important;
  border-radius: 4px !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.4s ease !important;
  box-shadow: 0 0 30px rgba(16, 185, 129, 0.1) !important;
  margin-top: 24px !important;
}
.woocommerce .wc-proceed-to-checkout .checkout-button:hover {
  background: linear-gradient(135deg, var(--og-emerald-600) 0%, var(--og-emerald-400) 100%) !important;
  box-shadow: 0 0 40px rgba(52, 211, 153, 0.3) !important;
  letter-spacing: 0.3em !important;
}

/* ─────────────────────────────────────────────── */
/* 9. NOTIFICACIONES — Sin duplicados              */
/* ─────────────────────────────────────────────── */

/* Ocultar notificaciones "stuck" duplicadas */
.woocommerce-notices-wrapper:empty {
  display: none !important;
}

/* Notificaciones dentro del contenido y de bloques FSE */
.woocommerce-message,
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner {
  background-color: #09090b !important;
  border-left: 4px solid #10b981 !important;
  color: #f4f4f5 !important;
  padding: 16px 20px !important;
  border-radius: 0 4px 4px 0 !important;
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.wc-block-components-notice-banner>.wc-block-components-notice-banner__content {
  color: #f4f4f5 !important;
}

/* Ocultar el ícono SVG por defecto de los bloques si no encaja, o forzar color */
.wc-block-components-notice-banner svg {
  fill: #10b981 !important;
  color: #10b981 !important;
}

.woocommerce-message a.button {
  background: var(--og-emerald-600) !important;
  color: #fff !important;
  padding: 8px 16px !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  text-decoration: none !important;
}

/* ─────────────────────────────────────────────── */
/* 11. LUX CART DRAWER OVERRIDES                   */
/* ─────────────────────────────────────────────── */

#lux-cart-drawer {
    z-index: 2147483647 !important;
}

#lux-cart-backdrop {
    background-color: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    z-index: 2147483646 !important;
}

#lux-cart-panel {
    background-color: #09090b !important;
    box-shadow: -20px 0 50px rgba(0, 0, 0, 0.8) !important;
    z-index: 2147483647 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Fix floating blocks and ensure solid sidebar */
#lux-cart-items li {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding-bottom: 20px !important;
    margin-bottom: 20px !important;
}

/* Ensure no elements overlap the drawer (like site header) */
header.wp-block-template-part,
.wp-block-template-part,
nav.fixed {
    z-index: 50 !important;
}

/* Force header to submerge when cart is open */
body.lux-cart-open header.wp-block-template-part,
body.lux-cart-open .wp-block-template-part,
body.lux-cart-open nav.fixed,
body.lux-cart-open #wpadminbar {
    z-index: 1 !important;
}

#lux-cart-panel {
    top: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
}

body.woocommerce-checkout {
  background-color: var(--og-surface-950) !important;
  color: var(--og-text-100) !important;
}

body.woocommerce-checkout .woocommerce {
  padding-top: 40px;
}

.woocommerce-checkout h3 {
  color: var(--og-text-100) !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(16, 185, 129, 0.12) !important;
}

/* Etiquetas del formulario */
.woocommerce-checkout label {
  color: var(--og-text-400) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
}

/* Inputs del checkout */
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  background: var(--og-surface-800) !important;
  border: 1px solid rgba(16, 185, 129, 0.2) !important;
  color: var(--og-text-100) !important;
  border-radius: 4px !important;
  padding: 12px 16px !important;
}

.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  border-color: var(--og-emerald-400) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.1) !important;
}

/* Order review en checkout */
.woocommerce-checkout-review-order-table {
  background: var(--og-surface-800) !important;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  background: transparent !important;
  color: var(--og-text-100) !important;
  border-color: rgba(16, 185, 129, 0.1) !important;
  padding: 12px 16px !important;
}

.woocommerce-checkout-review-order-table .order-total td .woocommerce-Price-amount {
  color: var(--og-gold) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}

/* ─────────────────────────────────────────────── */
/* 11. UX MICRO-INTERACTIONS (FLY TO CART & TOAST) */
/* ─────────────────────────────────────────────── */

.lux-toast {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: var(--og-emerald-600);
  background: linear-gradient(135deg, var(--og-emerald-700) 0%, var(--og-emerald-500) 100%);
  color: white;
  padding: 15px 25px;
  border-radius: 4px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
  z-index: 99999;
  border: 1px solid var(--og-emerald-400);
}

.lux-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.wc-block-mini-cart__button {
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Dynamic Add To Cart Button State */
button.single_add_to_cart_button, 
a.add_to_cart_button {
  transition: all 0.3s ease !important;
}

button.single_add_to_cart_button.added, 
a.add_to_cart_button.added {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  box-shadow: 0 0 30px rgba(16, 185, 129, 0.4) !important;
  border-color: #34d399 !important;
  color: white !important;
}

/* ─────────────────────────────────────────────── */
/* 12. SINGLE PRODUCT THUMBNAILS FIX               */
/* ─────────────────────────────────────────────── */

/* ─────────────────────────────────────────────── */
/* 13. PRODUCT CARD IMAGE CONTAINERS               */
/* ─────────────────────────────────────────────── */

/* Garantiza que los contenedores aspect-square tengan tamaño real */
/* para que las imágenes con position:absolute sean visibles */
.group .aspect-square,
.group div.relative.aspect-square,
.group a.aspect-square {
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

/* Fuerza que las imágenes dentro de tarjetas de producto se vean */
.group .aspect-square img,
.group div.relative.aspect-square img,
.group a.aspect-square img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ocultar la barra nativa de WooCommerce "Ordenar por" y breadcrumbs */
/* que aparece sobre nuestra plantilla personalizada */
.woocommerce-ordering,
.woocommerce-result-count,
.woocommerce-products-header {
  display: none !important;
}

/* ─────────────────────────────────────────────── */
/* 14. THUMBNAIL ROW — SIN LÍNEA NEGRA             */
/* ─────────────────────────────────────────────── */

/* Remover borde/separador oscuro bajo el área de miniaturas del producto */
.thumbnail-grid-wrapper,
.thumb-row,
div[class*="border-zinc-900"][class*="py-4"] {
  border-color: transparent !important;
}

/* Asegurar thumbnails centradas con tamaño cuadrado */
.thumb-btn {
  width: 64px !important;
  height: 64px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.thumb-btn img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 4px !important;
}
/* Forzar que el contenedor principal de la galería apile verticalmente */
.woocommerce div.product div.images,
.wc-block-components-product-gallery {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

/* Evitar que CSS Grid nativo de FSE coloque las miniaturas a los lados */
.wc-block-components-product-gallery.is-thumbnails-left,
.wc-block-components-product-gallery.is-thumbnails-right {
  grid-template-columns: 1fr !important;
}

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
.wc-block-components-product-gallery .wc-block-components-product-gallery__image {
  order: 1 !important;
  width: 100% !important;
}

.woocommerce div.product div.images .flex-control-nav, 
.wc-block-components-product-gallery .wc-block-components-product-gallery__thumbnails {
  order: 2 !important;
  position: relative !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  margin-top: 30px !important;
  padding: 0 !important;
}

.woocommerce div.product div.images .flex-control-nav li,
.wc-block-components-product-gallery .wc-block-components-product-gallery__thumbnails .wc-block-components-product-gallery-thumbnail {
  width: 80px !important;
  height: 80px !important;
  float: none !important;
  margin: 0 !important;
  list-style: none !important;
  background: transparent !important;
}

.woocommerce div.product div.images .flex-control-nav li img,
.wc-block-components-product-gallery .wc-block-components-product-gallery__thumbnails img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 4px !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  cursor: pointer !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important;
}

.woocommerce div.product div.images .flex-control-nav li img.flex-active,
.woocommerce div.product div.images .flex-control-nav li img:hover,
.wc-block-components-product-gallery .wc-block-components-product-gallery__thumbnails img:hover {
  border-color: var(--og-emerald-400) !important;
  transform: translateY(-4px) scale(1.05) !important;
  box-shadow: 0 10px 20px rgba(52, 211, 153, 0.25) !important;
}

/* ─────────────────────────────────────────────── */
/* 15. AJAX CART — SIDEBAR FALLBACK & BUTTON STATES */
/* ─────────────────────────────────────────────── */

/* Cart Sidebar (fallback para body.cart-open) */
.cart-sidebar {
    position: fixed;
    right: -420px;
    top: 0;
    width: 420px;
    height: 100%;
    background: #0b0f0e;
    color: #fff;
    transition: all .35s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 9999;
    padding: 20px;
    overflow-y: auto;
}
.cart-open .cart-sidebar {
    right: 0;
}

/* Cart Overlay */
.cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .6);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    z-index: 9998;
}
.cart-open .cart-overlay {
    opacity: 1;
    pointer-events: auto;
}

/* AJAX Add-to-Cart button: estado "loading" */
a.add_to_cart_button.loading,
a.ajax_add_to_cart.loading,
a.custom_esmeralda_add_to_cart.loading {
    opacity: 0.65 !important;
    pointer-events: none !important;
    position: relative;
}
a.add_to_cart_button.loading::after,
a.ajax_add_to_cart.loading::after,
a.custom_esmeralda_add_to_cart.loading::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0,56,40,0.3);
    border-top-color: rgba(0,56,40,0.9);
    border-radius: 50%;
    animation: wc-spin .7s linear infinite;
}

/* AJAX Add-to-Cart button: estado "added" */
a.add_to_cart_button.added,
a.ajax_add_to_cart.added,
a.custom_esmeralda_add_to_cart.added {
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.5) !important;
}

@keyframes wc-spin {
    to { transform: translateY(-50%) rotate(360deg); }
}

/* Imagen object-fit: contain global para productos */
img {
    object-position: center;
}
.woocommerce-product-gallery img,
.product img,
.woocommerce ul.products li.product img {
    object-fit: contain !important;
    object-position: center !important;
}

/* ─────────────────────────────────────────────── */
/* LUX CART DRAWER — CUSTOM SCROLLBAR              */
/* ─────────────────────────────────────────────── */
#lux-cart-panel .custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}
#lux-cart-panel .custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
#lux-cart-panel .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(16, 185, 129, 0.25);
    border-radius: 2px;
}
#lux-cart-panel .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(16, 185, 129, 0.5);
}

/* Cart loading spinner */
#lux-cart-loading {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ─────────────────────────────────────────────── */
/* LUX TOAST NOTIFICATION                          */
/* ─────────────────────────────────────────────── */
.lux-toast {
    position: fixed;
    bottom: 32px;
    right: 32px; /* Fix: Move to right instead of centered to avoid overlapping center image */
    transform: translateY(20px);
    background: linear-gradient(135deg, #064e3b, #065f46);
    border: 1px solid rgba(52, 211, 153, 0.4);
    color: #d1fae5;
    padding: 14px 24px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    z-index: 9999999;
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(16, 185, 129, 0.2);
    pointer-events: none;
}
.lux-toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* ─────────────────────────────────────────────── */
/* SINGLE PRODUCT — Forzar layout sin FSE padding  */
/* ─────────────────────────────────────────────── */
body.single-product .entry-content > *:not(.woocommerce),
body.single-product .has-global-padding:not(nav):not([class*="navigation"]) {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Remove WooCommerce default single product layout in favor of our custom PHP template */
body.single-product .woocommerce-notices-wrapper,
body.single-product .woocommerce-breadcrumb,
body.single-product nav.woocommerce-breadcrumb,
body.archive .woocommerce-breadcrumb,
body.archive nav.woocommerce-breadcrumb {
    display: none !important;
}

/* ─────────────────────────────────────────────── */
/* LUX CART DRAWER — FONDOS Y LAYOUT               */
/* Las clases Tailwind con /opacity (bg-zinc-950/80,
   border-white/5) no se compilan desde PHP dinámico.
   Se definen aquí explícitamente.                 */
/* ─────────────────────────────────────────────── */

#lux-cart-drawer {
    font-family: inherit;
}

#lux-cart-backdrop {
    background-color: rgba(9, 9, 11, 0.85) !important;
    backdrop-filter: blur(4px);
}

#lux-cart-panel {
    background-color: #09090b !important;
    border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
    right: 0 !important;
    left: auto !important;
    max-width: 460px;
    width: 100%;
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.8) !important;
}

/* Header del panel: título + botón cerrar */
#lux-cart-panel > div:first-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

/* Footer del panel: total + botones */
#lux-cart-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Precio total — emerald en lugar de amarillo */
#lux-cart-total {
    color: #34d399 !important;
}

/* Separador entre items del carrito */
#lux-cart-items li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Botón "Ver Todo el Carrito" */
#lux-cart-footer a:last-child {
    border: 1px solid rgba(113, 113, 122, 0.4) !important;
    color: rgba(161, 161, 170, 0.9) !important;
    display: block !important;
    text-align: center;
    margin-top: 12px;
    padding: 12px;
    border-radius: 2px;
    transition: all 0.3s ease;
}
#lux-cart-footer a:last-child:hover {
    border-color: rgba(52, 211, 153, 0.5) !important;
    color: #6ee7b7 !important;
}

@media (max-width: 480px) {
    #lux-cart-panel {
        max-width: 100%;
    }
}

/* ─────────────────────────────────────────────── */
/* 11. REFINAMIENTOS DE NAVEGACIÓN Y MOBILE        */
/* ─────────────────────────────────────────────── */

@media (max-width: 480px) {
    nav.fixed .grid {
        px-4 !important; /* Reducir padding horizontal en móviles pequeños */
    }
    
    .nav-cart-container .material-symbols-outlined {
        font-size: 20px !important;
    }
    
    /* Evitar que los íconos de la derecha se amontonen */
    nav.fixed .flex.justify-end {
        gap: 0.5rem !important;
    }
    
    #mobile-menu-btn {
        margin-left: 0.25rem !important;
    }
    
    /* Ajuste de logo en móvil */
    nav.fixed img {
        height: 60px !important;
        transform: scale(1.1) !important;
    }
}

/* ─────────────────────────────────────────────── */
/* 12. ANIMACIONES UX — FLY TO CART & GLOW         */
/* ─────────────────────────────────────────────── */

.cart-fly-clone {
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.6), 0 0 40px rgba(16, 185, 129, 0.4);
    border: 2px solid #10b981;
    filter: brightness(1.2);
}

@keyframes cart-pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { transform: scale(1.2); box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.cart-pulse-active {
    animation: cart-pulse 0.5s ease-out;
}