/* === ROXVAN CUSTOM BUNDLE (OPTIMIZED & CACHED) === */

/* --- DESIGN SYSTEM & CUSTOM CSS (wp-custom-css) --- */
/* ══════════════════════════════════════════════════════════════════════
   ROXVAN — DESIGN SYSTEM v3
   Consolidado y auditado · 31-ago-2026
   Reemplaza íntegramente el CSS anterior (v2 + parches sueltos).

   ORDEN DE CAPAS
     0  Tokens
     1  Base tipográfica
     2  Chrome: barra, header, búsqueda, navegación
     3  Home: hero, categorías
     4  Tarjeta de producto — HOME (EAEL)
     5  Tarjeta de producto — CATÁLOGO (/shop/)
     6  Filtros del catálogo (WPF)
     7  Ficha de producto
     8  Botón de cotización (fuente única de verdad)
     9  Botones genéricos
     10 Footer
     11 Utilidades, ocultos y accesibilidad

   CAMBIOS FRENTE A v2 — reglas eliminadas por conflicto:
     · .price > .amount {display:none}  → contradecía el precio unitario gris
     · v2 §8 tarjetas                   → reemplazada por §4 y §5
     · v2 §9 botón amarillo en tarjeta  → reemplazada por §8
     · v2 §17.3 y §17.5 glass en tarjeta→ invisible sobre fondo blanco plano
     · :root duplicado                  → fusionado
     · .onsale                          → clase inexistente en este marcado
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   0 · TOKENS
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* Tipografía — Poppins gana en la capa del tema; se declara primero
     para que la variable refleje lo que realmente se renderiza. */
  --rox-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Marca */
  --rox-red:        #FF0000;
  --rox-red-hover:  #BE123C;
  --rox-red-glow:   rgba(225, 29, 72, 0.25);
  --rox-yellow:     #FFC700;
  --rox-yellow-soft:#FEF3C7;

  /* Neutros */
  --rox-dark:        #0F172A;
  --rox-dark-soft:   #1E293B;
  --rox-gray:        #64748B;
  --rox-gray-medium: #94A3B8;
  --rox-gray-light:  #F1F5F9;
  --rox-border:      #E2E8F0;
  --rox-white:       #FFFFFF;

  /* Semánticos */
  --rox-success:    #15803D;
  --rox-success-bg: rgba(21, 128, 61, 0.08);

  /* Radios */
  --rox-radius-sm:   8px;
  --rox-radius-md:   12px;
  --rox-radius-lg:   16px;
  --rox-radius-xl:   24px;
  --rox-radius-pill: 9999px;

  /* Sombras */
  --rox-shadow-xs:   0 1px 2px rgba(15, 23, 42, 0.05);
  --rox-shadow-sm:   0 4px 12px rgba(15, 23, 42, 0.06);
  --rox-shadow-md:   0 10px 25px -5px rgba(15, 23, 42, 0.08);
  --rox-shadow-lg:   0 20px 40px -10px rgba(15, 23, 42, 0.12);
  --rox-shadow-card: 0 12px 28px rgba(15, 23, 42, 0.10);
  --rox-shadow-red:  0 4px 14px rgba(225, 29, 72, 0.30);

  /* Movimiento */
  --rox-ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --rox-transition: all 0.3s var(--rox-ease);

  /* Glass — solo header, búsqueda y FAB.
     NO se usa en tarjetas: el fondo de página es blanco plano
     y backdrop-filter no tendría nada que difuminar. */
  --rox-glass-bg:        rgba(255, 255, 255, 0.72);
  --rox-glass-bg-strong: rgba(255, 255, 255, 0.86);
  --rox-glass-border:    rgba(255, 255, 255, 0.50);
  --rox-glass-blur:      blur(16px) saturate(160%);
  --rox-glass-blur-sm:   blur(10px) saturate(140%);
}


/* ══════════════════════════════════════════════════════════════════════
   1 · BASE TIPOGRÁFICA
   Se aplica a elementos de texto concretos, nunca con `*`,
   para no romper los glifos de Font Awesome ni los SVG del tema.
   ══════════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6, p, a, li, label, input, button, select, textarea,
.elementor-heading-title, .motta-banner__title, .motta-banner__description,
.woocommerce-loop-product__title, .eael-product-title, .price, .amount,
.motta-button, .campaign-bar, .site-title, .header-search__field,
.primary-navigation, .main-navigation, .header-category__title,
.category-name, .catalog-price-label, .site-info {
  font-family: var(--rox-font) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.motta-banner__title,
.motta-banner__description,
.woocommerce-loop-product__title,
.eael-product-title {
  text-shadow: none !important;
  letter-spacing: -0.02em !important;
  font-weight: 700 !important;
  color: var(--rox-dark) !important;
}

p, span, a, li, label, input, button, select, textarea {
  text-shadow: none !important;
}

::selection {
  background: var(--rox-red) !important;
  color: var(--rox-white) !important;
}

::-webkit-scrollbar        { width: 8px !important; }
::-webkit-scrollbar-track  { background: var(--rox-gray-light) !important; }
::-webkit-scrollbar-thumb  {
  background: #CBD5E1 !important;
  border-radius: var(--rox-radius-pill) !important;
}
::-webkit-scrollbar-thumb:hover { background: var(--rox-gray) !important; }


/* ══════════════════════════════════════════════════════════════════════
   2 · CHROME — barra superior, header, búsqueda, navegación
   ══════════════════════════════════════════════════════════════════════ */

/* --- 2.1 Barra roja de campaña --- */
.campaign-bar,
.campaign-bar__button.motta-button {
  background: linear-gradient(135deg, var(--rox-red) 0%, var(--rox-red-hover) 100%) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  padding: 10px 0 !important;
  border: none !important;
}

.campaign-bar a,
.campaign-bar span {
  color: var(--rox-white) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* --- 2.2 Header con cristal (aquí SÍ hay contenido detrás al hacer scroll) --- */
.site-header {
  background: var(--rox-glass-bg) !important;
  -webkit-backdrop-filter: var(--rox-glass-blur) !important;
  backdrop-filter: var(--rox-glass-blur) !important;
  border-bottom: 1px solid var(--rox-glass-border) !important;
  box-shadow: var(--rox-shadow-sm) !important;
}

.header-logo img { transition: var(--rox-transition) !important; }
.header-logo:hover img { transform: scale(1.03) !important; }

.site-title {
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: var(--rox-dark) !important;
}

.header-account a,
.header-cart a,
.header-right-items a {
  color: var(--rox-dark) !important;
  transition: var(--rox-transition) !important;
}

.header-account a:hover,
.header-cart a:hover,
.header-right-items a:hover {
  color: var(--rox-red) !important;
}

/* --- 2.3 Buscador --- */
.header-search--form,
.header-search__container {
  border-radius: var(--rox-radius-pill) !important;
  border: 2px solid var(--rox-border) !important;
  overflow: hidden !important;
  background: rgba(241, 245, 249, 0.60) !important;
  -webkit-backdrop-filter: var(--rox-glass-blur-sm) !important;
  backdrop-filter: var(--rox-glass-blur-sm) !important;
  transition: var(--rox-transition) !important;
}

.header-search--form:focus-within,
.header-search__container:focus-within {
  border-color: var(--rox-red) !important;
  box-shadow: 0 0 0 4px var(--rox-red-glow) !important;
  background: var(--rox-glass-bg-strong) !important;
}

.header-search__field {
  font-size: 14px !important;
  font-weight: 400 !important;
  padding: 12px 20px !important;
  color: var(--rox-dark) !important;
  background: transparent !important;
}

/* Placeholder legible — no blanco sobre claro */
.header-search__field::placeholder {
  color: var(--rox-gray-medium) !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

.header-search .header-search__submit,
.header-search button[type="submit"] {
  background: var(--rox-red) !important;
  border-radius: 0 var(--rox-radius-pill) var(--rox-radius-pill) 0 !important;
  transition: var(--rox-transition) !important;
}

.header-search .header-search__submit:hover,
.header-search button[type="submit"]:hover {
  background: var(--rox-red-hover) !important;
}

.header-search__categories-label,
.header-search__categories-text {
  font-weight: 500 !important;
  font-size: 13px !important;
  color: var(--rox-dark-soft) !important;
}

.header-search__divider { background: var(--rox-border) !important; }

/* --- 2.4 Navegación --- */
.header-bottom { border-top: 1px solid var(--rox-border) !important; }

.primary-navigation a,
.main-navigation a {
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: 0.01em !important;
  color: var(--rox-dark-soft) !important;
  transition: var(--rox-transition) !important;
}

.primary-navigation a:hover,
.main-navigation a:hover { color: var(--rox-red) !important; }

.header-category__title.motta-button--ghost {
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--rox-dark) !important;
  border-radius: var(--rox-radius-md) !important;
  transition: var(--rox-transition) !important;
}

.header-category__title.motta-button--ghost:hover {
  background: var(--rox-gray-light) !important;
}

.header-category__name { color: var(--rox-dark) !important; }

/* --- 2.5 FAB del carrito (FunnelKit) --- */
#fkcart-floating-toggler.fkcart-toggler {
  background: var(--rox-glass-bg-strong) !important;
  -webkit-backdrop-filter: var(--rox-glass-blur) !important;
  backdrop-filter: var(--rox-glass-blur) !important;
  border: 1px solid var(--rox-glass-border) !important;
  box-shadow: var(--rox-shadow-md) !important;
  bottom: 24px !important;
  right: 24px !important;
}

.fkcart-panel    { border-radius: var(--rox-radius-lg) !important; }
.fkcart-item-wrap{ border-radius: var(--rox-radius-md) !important; }


/* ══════════════════════════════════════════════════════════════════════
   3 · HOME — hero y categorías
   ══════════════════════════════════════════════════════════════════════ */
.motta-banner {
  border-radius: var(--rox-radius-xl) !important;
  overflow: hidden !important;
}

.motta-banner__title {
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em !important;
  color: var(--rox-dark) !important;
}

.motta-banner__description {
  font-weight: 400 !important;
  line-height: 1.6 !important;
  font-size: 16px !important;
  color: var(--rox-gray) !important;
}

.motta-banner__featured-image img {
  border-radius: var(--rox-radius-xl) !important;
}

.motta-banner-button,
.motta-banner .motta-button {
  border-radius: var(--rox-radius-pill) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 12px 28px !important;
  letter-spacing: 0.01em !important;
  box-shadow: var(--rox-shadow-red) !important;
  transition: var(--rox-transition) !important;
}

.motta-banner-button:hover,
.motta-banner .motta-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(225, 29, 72, 0.40) !important;
}

/* Carrusel de categorías */
.product-category-carousel .owl-item img,
.product-category-carousel img {
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: var(--rox-radius-lg) !important;
  box-shadow: var(--rox-shadow-xs) !important;
  transition: var(--rox-transition) !important;
}

.product-category-carousel .owl-item:hover img {
  transform: translateY(-6px) scale(1.03) !important;
  box-shadow: var(--rox-shadow-lg) !important;
}

.product-category-carousel .category-name,
.product-category-carousel h3,
.product-category-carousel span {
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--rox-dark) !important;
  margin-top: 12px !important;
  text-align: center !important;
}

/* Elementor genérico */
.elementor-widget-motta-heading .elementor-heading-title {
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--rox-dark) !important;
}

.elementor-widget-motta-icon-box { transition: var(--rox-transition) !important; }
.elementor-widget-motta-icon-box:hover { transform: translateY(-2px) !important; }

.elementor-widget-motta-icon-box .motta-icon-box__title {
  color: var(--rox-dark-soft) !important;
}

.elementor-widget-motta-icon-box .motta-icon-box__description {
  color: var(--rox-gray) !important;
  font-size: 13px !important;
}

/* Botón "Ver más" */
a.eael-product-load-more,
.eael-product-load-more {
  background: var(--rox-red) !important;
  color: var(--rox-white) !important;
  border-radius: var(--rox-radius-pill) !important;
  font-weight: 600 !important;
  padding: 12px 32px !important;
  box-shadow: var(--rox-shadow-red) !important;
  transition: var(--rox-transition) !important;
}

a.eael-product-load-more:hover {
  background: var(--rox-red-hover) !important;
  transform: translateY(-2px) !important;
}


/* ══════════════════════════════════════════════════════════════════════
   4 · TARJETA DE PRODUCTO — HOME (Essential Addons)
   Marcado verificado: 30 tarjetas en 12 grids.
     li.product > .eael-product-wrap
       a.woocommerce-loop-product__link > img
       .eael-product-title > a > h2.woocommerce-loop-product__title
       .eael-star-rating  (user-rating al 0% → sin reseñas)
       .eael-product-price > .catalog-price + .amount
       a.add_to_cart_button   ← su estilo vive en §8, no aquí
   ══════════════════════════════════════════════════════════════════════ */

/* --- 4.1 Contenedor: superficie sólida, alturas iguales --- */
.eael-product-wrap {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  padding: 14px !important;
  gap: 10px !important;
  background: var(--rox-white) !important;
  border: 1px solid var(--rox-border) !important;
  border-radius: var(--rox-radius-lg) !important;
  overflow: hidden !important;
  transition: transform 0.25s var(--rox-ease),
              box-shadow 0.25s var(--rox-ease),
              border-color 0.25s ease !important;
}

.eael-product-wrap:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--rox-shadow-card) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
}

/* --- 4.2 Imagen: contain, para no recortar herramienta ni empaque --- */
.eael-product-wrap > a.woocommerce-loop-product__link img {
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  width: 100% !important;
  height: auto !important;
  transition: transform 0.35s var(--rox-ease) !important;
}

.eael-product-wrap:hover > a.woocommerce-loop-product__link img {
  transform: scale(1.04) !important;
}

/* --- 4.3 Título: dos líneas exactas --- */
.eael-product-title {
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.eael-product-title h2.woocommerce-loop-product__title {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.005em !important;
  color: var(--rox-dark-soft) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: calc(13px * 1.35 * 2) !important;
  transition: color 0.2s ease !important;
}

.eael-product-wrap:hover .eael-product-title h2.woocommerce-loop-product__title {
  color: var(--rox-red) !important;
}

/* --- 4.4 Precios: DESDE domina, unitario gris de referencia --- */
.eael-product-price {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.eael-product-price .catalog-price {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  margin: 0 !important;
}

.eael-product-price .catalog-price-amount,
.eael-product-price .catalog-price-amount .amount {
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  color: var(--rox-dark) !important;
  font-variant-numeric: tabular-nums !important;
}

.eael-product-price > .woocommerce-Price-amount.amount {
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: var(--rox-gray-medium) !important;
  font-variant-numeric: tabular-nums !important;
}

.eael-product-price .woocommerce-Price-currencySymbol {
  font-weight: 600 !important;
  opacity: 0.75 !important;
}

/* --- 4.5 Móvil --- */
@media (max-width: 767px) {
  .eael-product-wrap { padding: 10px !important; gap: 8px !important; }

  .eael-product-title h2.woocommerce-loop-product__title {
    font-size: 12px !important;
    min-height: calc(12px * 1.35 * 2) !important;
  }

  .eael-product-price .catalog-price-amount,
  .eael-product-price .catalog-price-amount .amount {
    font-size: 17px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   5 · TARJETA DE PRODUCTO — CATÁLOGO /shop/
   Marcado verificado (WooCommerce nativo, layout 6):
     ul.products.product-card-layout-6 > li.product > .product-inner
       .product-thumbnail
       .product-summary > .meta-wrapper .meta-sku
                        > h2.woocommerce-loop-product__title
       .product-actions > .price (.catalog-price + .amount)
                        > .wcz-stock-remaining
   Es un marcado DISTINTO al de la home (§4). Por eso van separados.
   ══════════════════════════════════════════════════════════════════════ */

/* --- 5.1 Contenedor y estructura --- */
ul.products.product-card-layout-6 li.product {
  background: var(--rox-white) !important;
  border: 1px solid var(--rox-border) !important;
  border-radius: var(--rox-radius-lg) !important;
  overflow: hidden !important;
  transition: transform 0.25s var(--rox-ease),
              box-shadow 0.25s var(--rox-ease),
              border-color 0.25s ease !important;
}

ul.products.product-card-layout-6 li.product:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--rox-shadow-card) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
}

ul.products.product-card-layout-6 li.product .product-inner {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  padding: 14px !important;
  gap: 10px !important;
}

ul.products.product-card-layout-6 li.product .product-summary {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* Bloque de precio pegado al fondo: alineado entre todas las tarjetas */
ul.products.product-card-layout-6 li.product .product-actions {
  margin-top: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
}

/* --- 5.2 Imagen --- */
ul.products.product-card-layout-6 li.product .product-thumbnail img {
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  width: 100% !important;
  height: auto !important;
  transition: transform 0.35s var(--rox-ease) !important;
}

ul.products.product-card-layout-6 li.product:hover .product-thumbnail img {
  transform: scale(1.04) !important;
}

/* --- 5.3 SKU: metadato discreto --- */
ul.products.product-card-layout-6 li.product .meta-wrapper { margin: 0 !important; }

ul.products.product-card-layout-6 li.product .meta-sku {
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: var(--rox-gray-medium) !important;
  margin: 0 !important;
}

ul.products.product-card-layout-6 li.product .meta-sku span {
  color: var(--rox-gray) !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
}

/* --- 5.4 Título ---
   El texto viene en MAYÚSCULAS desde la base de datos y eso no se
   revierte por CSS. Lo que sí se puede es bajar peso, tamaño y
   tracking para que se lea como dato técnico y no como grito. */
ul.products.product-card-layout-6 li.product h2.woocommerce-loop-product__title {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.005em !important;
  color: var(--rox-dark-soft) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: calc(13px * 1.35 * 2) !important;
}

ul.products.product-card-layout-6 li.product h2.woocommerce-loop-product__title a {
  color: inherit !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

ul.products.product-card-layout-6 li.product:hover h2.woocommerce-loop-product__title a {
  color: var(--rox-red) !important;
}

/* --- 5.5 Precios --- */
ul.products.product-card-layout-6 li.product .price {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 8px !important;
  margin: 0 !important;
  font-size: inherit !important;
}

ul.products.product-card-layout-6 li.product .price .catalog-price {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  margin: 0 !important;
}

ul.products.product-card-layout-6 li.product .price .catalog-price-amount,
ul.products.product-card-layout-6 li.product .price .catalog-price-amount .amount {
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  color: var(--rox-dark) !important;
  font-variant-numeric: tabular-nums !important;
}

/* Precio unitario: hermano directo de .price, fuera de .catalog-price.
   Se muestra en gris como ancla de referencia — decisión aprobada. */
ul.products.product-card-layout-6 li.product .price > .woocommerce-Price-amount.amount {
  display: inline-block !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: var(--rox-gray-medium) !important;
  font-variant-numeric: tabular-nums !important;
}

ul.products.product-card-layout-6 li.product .price .woocommerce-Price-currencySymbol {
  font-weight: 600 !important;
  opacity: 0.75 !important;
}

/* --- 5.6 Stock: informa, no alarma --- */
ul.products.product-card-layout-6 li.product .wcz-stock-remaining {
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--rox-success) !important;
  background: var(--rox-success-bg) !important;
  border-radius: var(--rox-radius-sm) !important;
  padding: 3px 8px !important;
  margin: 0 !important;
  font-variant-numeric: tabular-nums !important;
}

ul.products.product-card-layout-6 li.product.outofstock .wcz-stock-remaining {
  color: var(--rox-gray) !important;
  background: var(--rox-gray-light) !important;
}

/* --- 5.7 Móvil: menos densidad, misma estructura --- */
@media (max-width: 767px) {
  ul.products.product-card-layout-6 li.product .product-inner {
    padding: 10px !important;
    gap: 8px !important;
  }

  ul.products.product-card-layout-6 li.product h2.woocommerce-loop-product__title {
    font-size: 12px !important;
    min-height: calc(12px * 1.35 * 2) !important;
  }

  ul.products.product-card-layout-6 li.product .price .catalog-price-amount,
  ul.products.product-card-layout-6 li.product .price .catalog-price-amount .amount {
    font-size: 17px !important;
  }

  /* En 2 columnas el SKU es ruido */
  ul.products.product-card-layout-6 li.product .meta-sku { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   6 · FILTROS DEL CATÁLOGO (plugin WPF)
   Marcado verificado en /shop/: 4 bloques .wpfFilterWrapper,
   22 checkboxes, rango de precio con jQuery UI Slider (.ui-slider).
   ALCANCE: solo presentación. Qué filtros aparecen (marca,
   promoción) se configura en el panel del plugin, no por CSS.
   ══════════════════════════════════════════════════════════════════════ */

.wpfFilterWrapper {
  margin: 0 0 14px !important;
  padding: 14px !important;
  background: var(--rox-white) !important;
  border: 1px solid var(--rox-border) !important;
  border-radius: var(--rox-radius-lg) !important;
}

.wpfFilterDelimeter { display: none !important; }

.wpfFilterTitle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--rox-dark) !important;
  margin: 0 0 10px !important;
  cursor: pointer !important;
}

.wpfFilterTitle .wpfTitleToggle {
  flex: 0 0 auto !important;
  font-size: 11px !important;
  color: var(--rox-gray-medium) !important;
  transition: color 0.2s ease !important;
}

.wpfFilterTitle:hover .wpfTitleToggle { color: var(--rox-red) !important; }

/* Lista con scroll contenido */
.wpfFilterVerScroll {
  max-height: 260px !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--rox-gray-medium) transparent !important;
}

.wpfFilterVerScroll::-webkit-scrollbar { width: 6px !important; }

.wpfFilterVerScroll::-webkit-scrollbar-thumb {
  background: var(--rox-border) !important;
  border-radius: var(--rox-radius-pill) !important;
}

.wpfFilterVerScroll::-webkit-scrollbar-thumb:hover {
  background: var(--rox-gray-medium) !important;
}

/* Cada opción: fila completa clicable */
.wpfFilterContent li { margin: 0 !important; list-style: none !important; }

.wpfLiLabel {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  width: 100% !important;
  padding: 7px 8px !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  color: var(--rox-dark-soft) !important;
  border-radius: var(--rox-radius-sm) !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.wpfLiLabel:hover {
  background: var(--rox-gray-light) !important;
  color: var(--rox-dark) !important;
}

/* Checkbox propio, marcado en rojo de marca */
.wpfCheckbox input[type="checkbox"],
.wpfLiLabel input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  flex: 0 0 auto !important;
  position: relative !important;
  width: 17px !important;
  height: 17px !important;
  margin: 0 !important;
  border: 1.5px solid var(--rox-border) !important;
  border-radius: 5px !important;
  background: var(--rox-white) !important;
  cursor: pointer !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}

.wpfCheckbox input[type="checkbox"]:hover,
.wpfLiLabel input[type="checkbox"]:hover {
  border-color: var(--rox-gray-medium) !important;
}

.wpfCheckbox input[type="checkbox"]:checked,
.wpfLiLabel input[type="checkbox"]:checked {
  background: var(--rox-red) !important;
  border-color: var(--rox-red) !important;
}

/* Palomita dibujada en CSS: sin imagen, sin petición extra */
.wpfCheckbox input[type="checkbox"]:checked::after,
.wpfLiLabel input[type="checkbox"]:checked::after {
  content: "" !important;
  position: absolute !important;
  left: 5px !important;
  top: 1.5px !important;
  width: 4px !important;
  height: 9px !important;
  border: solid var(--rox-white) !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}

.wpfCheckbox input[type="checkbox"]:focus-visible,
.wpfLiLabel input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--rox-red) !important;
  outline-offset: 2px !important;
}

.wpfFilterTaxNameWrapper,
.wpfValue {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.wpfCount {
  flex: 0 0 auto !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  padding: 3px 7px !important;
  border-radius: var(--rox-radius-pill) !important;
  background: var(--rox-gray-light) !important;
  color: var(--rox-gray-medium) !important;
  font-variant-numeric: tabular-nums !important;
}

.wpfLiLabel:hover .wpfCount {
  background: var(--rox-border) !important;
  color: var(--rox-gray) !important;
}

/* Rango de precio.
   NOTA: el máximo del catálogo es 38.081.428 COP — cifra larga,
   por eso tabular-nums evita que los campos bailen al arrastrar. */
.wpfPriceFilterRange { padding: 4px 4px 0 !important; }

.wpfPriceInputs {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}

.wpfPriceRangeField {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  padding: 8px 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  color: var(--rox-dark) !important;
  background: var(--rox-white) !important;
  border: 1px solid var(--rox-border) !important;
  border-radius: var(--rox-radius-sm) !important;
  font-variant-numeric: tabular-nums !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.wpfPriceRangeField:focus {
  outline: none !important;
  border-color: var(--rox-red) !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.10) !important;
}

.wpfCurrencySymbol {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--rox-gray-medium) !important;
}

.wpfFilterContent .ui-slider,
.wpfPriceFilterRange .ui-slider {
  position: relative !important;
  height: 4px !important;
  margin: 0 9px 14px !important;
  background: var(--rox-border) !important;
  border: 0 !important;
  border-radius: var(--rox-radius-pill) !important;
}

.wpfFilterContent .ui-slider .ui-slider-range,
.wpfPriceFilterRange .ui-slider .ui-slider-range {
  background: var(--rox-red) !important;
  border-radius: var(--rox-radius-pill) !important;
}

/* Manijas de 18px: objetivo táctil aceptable en móvil */
.wpfFilterContent .ui-slider .ui-slider-handle,
.wpfPriceFilterRange .ui-slider .ui-slider-handle {
  width: 18px !important;
  height: 18px !important;
  top: -7px !important;
  margin-left: -9px !important;
  background: var(--rox-white) !important;
  border: 2px solid var(--rox-red) !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18) !important;
  cursor: grab !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.wpfFilterContent .ui-slider .ui-slider-handle:hover,
.wpfPriceFilterRange .ui-slider .ui-slider-handle:hover {
  transform: scale(1.12) !important;
}

.wpfFilterContent .ui-slider .ui-slider-handle:active,
.wpfPriceFilterRange .ui-slider .ui-slider-handle:active {
  cursor: grabbing !important;
  box-shadow: 0 0 0 6px rgba(255, 0, 0, 0.12) !important;
}

.wpfFilterContent .ui-slider .ui-slider-handle:focus-visible,
.wpfPriceFilterRange .ui-slider .ui-slider-handle:focus-visible {
  outline: 2px solid var(--rox-red) !important;
  outline-offset: 3px !important;
}

.wpfFilterButtons {
  display: flex !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

.wpfClearButton.wpfButton {
  flex: 1 1 auto !important;
  padding: 9px 14px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  color: var(--rox-gray) !important;
  background: var(--rox-gray-light) !important;
  border: 1px solid var(--rox-border) !important;
  border-radius: var(--rox-radius-md) !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}

.wpfClearButton.wpfButton:hover {
  background: var(--rox-white) !important;
  color: var(--rox-red) !important;
  border-color: var(--rox-red) !important;
}


/* ══════════════════════════════════════════════════════════════════════
   7 · FICHA DE PRODUCTO
   Hallazgo: existe un bloque de precio por volumen hecho a medida
   (.enhanced-pricing-container, 3 tarjetas) que estaba sin diseñar.
   Es el argumento comercial más fuerte de la ficha, así que aquí
   pasa a ser el protagonista y se silencian las repeticiones.
   ══════════════════════════════════════════════════════════════════════ */

/* --- 7.1 Migas de pan: visibles (decisión confirmada) ---
   La capa WCZ las oculta con display:none. En /shop/ no se emiten;
   aquí sí existen y dan la ruta de vuelta a la categoría.
   Revertir = borrar este bloque. */
body.woocommerce .woocommerce-breadcrumb {
  display: block !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: var(--rox-gray) !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
}

body.woocommerce .woocommerce-breadcrumb a {
  color: var(--rox-gray) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

body.woocommerce .woocommerce-breadcrumb a:hover {
  color: var(--rox-red) !important;
  text-decoration: underline !important;
}

/* --- 7.2 Título --- */
.product-summary-wrapper h1.product_title.entry-title {
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  color: var(--rox-dark) !important;
  margin: 0 0 10px !important;
}

/* --- 7.3 Meta (categoría + SKU) --- */
.product-summary-wrapper .product-meta-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 14px !important;
  margin: 0 0 18px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid var(--rox-border) !important;
}

.product-summary-wrapper .product-meta-wrapper .meta {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--rox-gray-medium) !important;
  margin: 0 !important;
}

.product-summary-wrapper .product-meta-wrapper .meta a,
.product-summary-wrapper .product-meta-wrapper .meta span {
  color: var(--rox-gray) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.product-summary-wrapper .product-meta-wrapper .meta-sku span {
  font-variant-numeric: tabular-nums !important;
}

.product-summary-wrapper .product-meta-wrapper .meta-cat a:hover {
  color: var(--rox-red) !important;
}

/* --- 7.4 Precio por volumen: el protagonista --- */
.enhanced-pricing-container {
  margin: 0 0 22px !important;
  padding: 0 !important;
}

.enhanced-pricing-container h3.pricing-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--rox-gray) !important;
  margin: 0 0 12px !important;
}

.enhanced-pricing-container .pricing-cards {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  align-items: stretch !important;
}

.enhanced-pricing-container .pricing-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 16px 14px 14px !important;
  background: var(--rox-white) !important;
  border: 1px solid var(--rox-border) !important;
  border-radius: var(--rox-radius-lg) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease,
              transform 0.2s var(--rox-ease) !important;
}

.enhanced-pricing-container .pricing-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(15, 23, 42, 0.16) !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08) !important;
}

/* La mejor oferta se distingue por borde y fondo, no por tamaño */
.enhanced-pricing-container .pricing-card-best {
  border: 2px solid var(--rox-red) !important;
  background: linear-gradient(180deg,
              rgba(255, 0, 0, 0.035) 0%,
              var(--rox-white) 55%) !important;
  box-shadow: 0 6px 20px rgba(255, 0, 0, 0.10) !important;
  padding-top: 22px !important;
}

.enhanced-pricing-container .best-deal-badge {
  position: absolute !important;
  top: -9px !important;
  left: 12px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  line-height: 1 !important;
  padding: 5px 9px !important;
  border-radius: var(--rox-radius-pill) !important;
  background: var(--rox-red) !important;
  color: var(--rox-white) !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 8px rgba(255, 0, 0, 0.30) !important;
}

/* El rango de cantidad es el criterio de decisión: va primero */
.enhanced-pricing-container .price-quantity {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--rox-gray) !important;
  margin: 0 !important;
}

.enhanced-pricing-container .pricing-card-best .price-quantity {
  color: var(--rox-red) !important;
}

.enhanced-pricing-container .price-amount,
.enhanced-pricing-container .price-amount .amount {
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  color: var(--rox-dark) !important;
  font-variant-numeric: tabular-nums !important;
}

.enhanced-pricing-container .price-amount .woocommerce-Price-currencySymbol {
  font-weight: 600 !important;
  opacity: 0.75 !important;
}

.enhanced-pricing-container .price-description {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--rox-gray-medium) !important;
  margin: 0 !important;
}

.enhanced-pricing-container .price-details {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 7px !important;
  margin-top: auto !important;
  padding-top: 8px !important;
}

.enhanced-pricing-container .price-details > div:not(.discount-badge) {
  font-size: 11px !important;
  line-height: 1.4 !important;
  color: var(--rox-gray-medium) !important;
}

.enhanced-pricing-container .discount-badge {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  line-height: 1 !important;
  padding: 4px 8px !important;
  border-radius: var(--rox-radius-sm) !important;
  background: rgba(21, 128, 61, 0.10) !important;
  color: var(--rox-success) !important;
  font-variant-numeric: tabular-nums !important;
}

/* --- 7.5 Quitar la triple repetición del precio ---
   El mismo par de cifras aparecía en tres lugares:
     a) .enhanced-pricing-container      ← se queda
     b) .motta-price-stock .price        ← duplicado
     c) .business-price + .wholesale-price ← triplicado
   Tres veces la misma cifra hace dudar de cuál es la buena.
   Revertir = borrar este bloque 7.5. */
.summary .motta-price-stock,
.summary p.business-price,
.summary p.wholesale-price,
.summary .original-price {
  display: none !important;
}

/* El tema inyecta style="color: green" inline; se neutraliza */
.summary .per-unit-text {
  color: var(--rox-gray-medium) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* --- 7.6 Descripción corta --- */
.summary .short-description {
  margin: 0 0 18px !important;
  padding: 14px !important;
  background: var(--rox-gray-light) !important;
  border-radius: var(--rox-radius-md) !important;
}

.summary .short-description__label {
  display: block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--rox-gray-medium) !important;
  margin: 0 0 6px !important;
}

.summary .short-description__content {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: var(--rox-dark-soft) !important;
}

/* --- 7.7 Cantidad y stock --- */
.summary .quantity__label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--rox-gray) !important;
}

.summary .quantity__label-number {
  color: var(--rox-dark) !important;
  font-variant-numeric: tabular-nums !important;
}

.summary p.stock.in-stock {
  display: inline-block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--rox-success) !important;
  background: var(--rox-success-bg) !important;
  border-radius: var(--rox-radius-sm) !important;
  padding: 5px 10px !important;
  margin: 0 0 14px !important;
  font-variant-numeric: tabular-nums !important;
}

.summary p.stock.out-of-stock {
  color: var(--rox-gray) !important;
  background: var(--rox-gray-light) !important;
}

/* --- 7.8 Estimación de envío "Rox-IA" --- */
.envia-preliminar-estimate {
  margin: 18px 0 !important;
  padding: 14px !important;
  background: var(--rox-gray-light) !important;
  border: 1px solid var(--rox-border) !important;
  border-radius: var(--rox-radius-lg) !important;
}

.envia-preliminar-estimate .rox-ia-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 4px 9px !important;
  border-radius: var(--rox-radius-pill) !important;
  background: var(--rox-dark) !important;
  color: var(--rox-white) !important;
  margin-bottom: 10px !important;
}

.envia-preliminar-estimate .location-detected,
.envia-preliminar-estimate .cost-info {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  color: var(--rox-gray) !important;
  margin-bottom: 6px !important;
}

.envia-preliminar-estimate .cost-value,
.envia-preliminar-estimate .cost-value .amount {
  font-weight: 700 !important;
  color: var(--rox-dark) !important;
  font-variant-numeric: tabular-nums !important;
}

.envia-preliminar-estimate .timeline-steps {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--rox-border) !important;
}

.envia-preliminar-estimate .timeline-steps .step {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  flex: 1 1 90px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  text-align: center !important;
  color: var(--rox-gray) !important;
}

.envia-preliminar-estimate .timeline-steps .step-icon {
  font-size: 17px !important;
  line-height: 1 !important;
}

/* --- 7.9 Pestañas inferiores --- */
.woocommerce-tabs ul.tabs li a {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  color: var(--rox-gray) !important;
}

.woocommerce-tabs ul.tabs li.active a { color: var(--rox-dark) !important; }

/* --- 7.10 Móvil --- */
@media (max-width: 767px) {
  .product-summary-wrapper h1.product_title.entry-title {
    font-size: 20px !important;
  }

  .enhanced-pricing-container .pricing-cards {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .enhanced-pricing-container .price-amount,
  .enhanced-pricing-container .price-amount .amount {
    font-size: 20px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   8 · BOTÓN DE COTIZACIÓN — FUENTE ÚNICA DE VERDAD
   Este es el ÚNICO bloque que estiliza .add_to_cart_button.
   El texto real del tema se anula con font-size:0 y se reemplaza
   por ::after, porque el copy correcto ("cotización") no existe
   en la plantilla. Por eso NINGÚN otro bloque puede tocar el
   font-size de este botón: lo devolvería a su texto original.
   ══════════════════════════════════════════════════════════════════════ */

body.woocommerce a.button.add_to_cart_button,
body.woocommerce ul.products li.product a.button,
body.woocommerce div.product form.cart button.single_add_to_cart_button:not(.roxvan-btn-solicitar-cotizacion),
body.woocommerce.wcz-wooblocks .add_to_cart_button,
.eael-product-wrap a.button.add_to_cart_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 320px !important;
  margin: 10px auto 0 !important;
  padding: 14px 26px !important;
  background: linear-gradient(135deg, #FFEE00 0%, #FFD600 100%) !important;
  color: var(--rox-dark) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-align: center !important;
  text-decoration: none !important;
  border: none !important;
  border-radius: var(--rox-radius-pill) !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15) !important;
  position: relative !important;
  transition: background 0.2s ease, box-shadow 0.2s ease,
              transform 0.15s ease !important;
}

/* En tarjeta el botón queda al fondo, alineado entre columnas */
.eael-product-wrap a.button.add_to_cart_button { margin-top: auto !important; }

/* Anula el texto y los spinners que trae el tema */
body.woocommerce a.button.add_to_cart_button,
body.woocommerce div.product form.cart button.single_add_to_cart_button:not(.roxvan-btn-solicitar-cotizacion),
body.woocommerce a.button.add_to_cart_button span,
body.woocommerce div.product form.cart button.single_add_to_cart_button:not(.roxvan-btn-solicitar-cotizacion) span {
  font-size: 0 !important;
}

body.woocommerce a.button.add_to_cart_button::before,
body.woocommerce div.product form.cart button.single_add_to_cart_button:not(.roxvan-btn-solicitar-cotizacion)::before {
  display: none !important;
  content: "" !important;
}

/* Texto real del botón */
body.woocommerce a.button.add_to_cart_button::after,
body.woocommerce div.product form.cart button.single_add_to_cart_button:not(.roxvan-btn-solicitar-cotizacion)::after {
  content: "🛒 Agregar a la cotización y carrito" !important;
  font-size: clamp(13px, 2vw, 16px) !important;
  font-weight: 700 !important;
  color: var(--rox-dark) !important;
  white-space: nowrap !important;
  display: inline-block !important;
  position: static !important;
  transform: none !important;
  animation: none !important;
  opacity: 1 !important;
}

body.woocommerce a.button.add_to_cart_button:hover,
body.woocommerce div.product form.cart button.single_add_to_cart_button:not(.roxvan-btn-solicitar-cotizacion):hover {
  background: linear-gradient(135deg, #FFF350 0%, #FFEB3B 100%) !important;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.25) !important;
}

body.woocommerce a.button.add_to_cart_button:active,
body.woocommerce div.product form.cart button.single_add_to_cart_button:not(.roxvan-btn-solicitar-cotizacion):active {
  box-shadow: inset 0 3px 6px rgba(15, 23, 42, 0.25) !important;
}

body.woocommerce a.button.add_to_cart_button:focus-visible,
body.woocommerce div.product form.cart button.single_add_to_cart_button:not(.roxvan-btn-solicitar-cotizacion):focus-visible {
  outline: 2px solid var(--rox-dark) !important;
  outline-offset: 3px !important;
}

/* Estado de carga: sin iconos girando ni emojis extra */
body.woocommerce a.button.add_to_cart_button.loading,
body.woocommerce div.product form.cart button.single_add_to_cart_button:not(.roxvan-btn-solicitar-cotizacion).loading {
  opacity: 0.80 !important;
  background: #FFE000 !important;
}

body.woocommerce a.button.add_to_cart_button.loading::after,
body.woocommerce div.product form.cart button.single_add_to_cart_button:not(.roxvan-btn-solicitar-cotizacion).loading::after {
  content: "Cargando…" !important;
  position: static !important;
  transform: none !important;
  animation: none !important;
}

@media (max-width: 480px) {
  body.woocommerce a.button.add_to_cart_button,
  body.woocommerce div.product form.cart button.single_add_to_cart_button:not(.roxvan-btn-solicitar-cotizacion) {
    padding: 12px 16px !important;
    max-width: 100% !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   9 · BOTONES GENÉRICOS
   Excluye .add_to_cart_button — ese vive solo en §8.
   ══════════════════════════════════════════════════════════════════════ */
.motta-button,
.button:not(.add_to_cart_button),
button.button:not(.add_to_cart_button),
.wp-element-button,
.single_add_to_cart_button {
  border-radius: var(--rox-radius-md) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  transition: var(--rox-transition) !important;
}

.motta-button:hover,
.button:not(.add_to_cart_button):hover,
.wp-element-button:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--rox-shadow-sm) !important;
}

/* Primario */
.motta-button--primary,
.button.alt,
.checkout-button {
  background: var(--rox-red) !important;
  color: var(--rox-white) !important;
  border: none !important;
  box-shadow: var(--rox-shadow-red) !important;
}

.motta-button--primary:hover,
.button.alt:hover,
.checkout-button:hover {
  background: var(--rox-red-hover) !important;
  box-shadow: 0 8px 22px rgba(225, 29, 72, 0.45) !important;
  transform: translateY(-2px) !important;
}

/* Ghost */
.motta-button--ghost,
.button.outlined {
  background: transparent !important;
  border: 2px solid var(--rox-border) !important;
  color: var(--rox-dark) !important;
}

.motta-button--ghost:hover,
.button.outlined:hover {
  border-color: var(--rox-red) !important;
  color: var(--rox-red) !important;
  background: rgba(225, 29, 72, 0.04) !important;
}

/* Comprar en la ficha: el botón más importante del sitio */
.summary .single_add_to_cart_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  padding: 14px 26px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  border: 0 !important;
  border-radius: var(--rox-radius-md) !important;
  background: var(--rox-red) !important;
  color: var(--rox-white) !important;
  box-shadow: 0 4px 14px rgba(255, 0, 0, 0.22) !important;
}

.summary .single_add_to_cart_button:hover {
  background: var(--rox-red-hover) !important;
  box-shadow: 0 8px 22px rgba(190, 18, 60, 0.30) !important;
}

.summary .single_add_to_cart_button:active {
  transform: translateY(1px) !important;
}


/* ══════════════════════════════════════════════════════════════════════
   10 · FOOTER
   ══════════════════════════════════════════════════════════════════════ */
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer .elementor-heading-title {
  color: var(--rox-dark) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  margin-bottom: 16px !important;
}

.site-footer a,
.site-footer li a,
.elementor-widget-motta-navigation-menu a,
footer a,
footer li a {
  font-weight: 400 !important;
  font-size: 14px !important;
  color: var(--rox-gray) !important;
  transition: var(--rox-transition) !important;
}

.site-footer a:hover,
.site-footer li a:hover,
.elementor-widget-motta-navigation-menu a:hover,
footer a:hover {
  color: var(--rox-red) !important;
}

.site-footer .motta-svg-icon,
.site-footer svg,
footer .motta-svg-icon,
footer svg {
  fill: var(--rox-gray) !important;
  color: var(--rox-gray) !important;
  width: 16px !important;
  height: 16px !important;
}

.elementor-widget-motta-social-icons a,
.elementor-widget-motta-social-icons svg,
.elementor-widget-motta-social-icons .motta-svg-icon {
  color: var(--rox-gray) !important;
  fill: var(--rox-gray) !important;
  font-size: 20px !important;
  transition: var(--rox-transition) !important;
}

.elementor-widget-motta-social-icons a:hover,
.elementor-widget-motta-social-icons a:hover svg {
  color: var(--rox-red) !important;
  fill: var(--rox-red) !important;
  transform: translateY(-2px) !important;
}

.site-footer .site-info,
.site-footer p,
footer p {
  color: var(--rox-gray) !important;
  font-size: 13px !important;
}


/* ══════════════════════════════════════════════════════════════════════
   11 · UTILIDADES, OCULTOS Y ACCESIBILIDAD
   ══════════════════════════════════════════════════════════════════════ */

/* --- 11.1 Badges de oferta ---
   La clase real en este marcado es .featured.woocommerce-badge
   dentro de .woocommerce-badges. NO existe .onsale. */
.woocommerce-badges .woocommerce-badge,
.featured.woocommerce-badge {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  padding: 4px 9px !important;
  border-radius: var(--rox-radius-sm) !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12) !important;
}

/* Etiqueta "DESDE": ancla amarilla suave, legible sobre blanco */
.catalog-price-label {
  display: inline-block !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  line-height: 1 !important;
  padding: 3px 6px !important;
  border-radius: var(--rox-radius-sm) !important;
  background: var(--rox-yellow-soft) !important;
  color: var(--rox-dark) !important;
  white-space: nowrap !important;
}

/* --- 11.2 Precio en verde del tema → neutro de marca ---
   La capa wcz-customizer fuerza #00bc03 con alta especificidad.
   Estos selectores la igualan para que gane var(--rox-dark). */
body.woocommerce.wcz-woocommerce ul.products li.product .price,
body.wcz-woocommerce .products .product .price,
body.wcz-wooblocks ul.wc-block-grid__products li.wc-block-grid__product .wc-block-grid__product-price__value,
body.wcz-wooblocks ul.wc-block-grid__products li.wc-block-grid__product .wc-block-grid__product-price ins {
  color: var(--rox-dark) !important;
}

body.wcz-wooblocks ul.wc-block-grid__products li.wc-block-grid__product .wc-block-grid__product-price del,
del .woocommerce-Price-amount {
  color: var(--rox-gray-medium) !important;
  font-weight: 400 !important;
}

/* --- 11.3 Elementos ocultos a propósito ---
   Cada línea documenta POR QUÉ se oculta.
   Revertir = borrar la línea correspondiente. */

/* Estrellas sin ninguna reseña: cinco estrellas vacías comunican
   "nadie calificó esto". Decisión confirmada. */
.eael-star-rating,
.eael-product-wrap .star-rating,
ul.products li.product .star-rating,
ul.products li.product .woocommerce-product-rating {
  display: none !important;
}

/* Campos de dirección/departamento del formulario a medida */
label[for="roxvan_customer_address"],
#roxvan_customer_address,
label[for="roxvan_customer_department"],
#roxvan_customer_department {
  display: none !important;
  visibility: hidden !important;
}

/* Botón de estadísticas de admin: no va en la tienda pública */
.wcz-adminstats-btn { display: none !important; }

/* --- 11.4 Foco visible en toda la tienda --- */
ul.products.product-card-layout-6 li.product a:focus-visible,
.eael-product-wrap a:focus-visible {
  outline: 2px solid var(--rox-red) !important;
  outline-offset: 2px !important;
  border-radius: var(--rox-radius-sm) !important;
}

/* --- 11.5 Fallback sin backdrop-filter --- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header,
  .header-search--form,
  .header-search__container,
  #fkcart-floating-toggler.fkcart-toggler {
    background: var(--rox-glass-bg-strong) !important;
  }
}

/* --- 11.6 Respeta prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .eael-product-wrap,
  .eael-product-wrap img,
  ul.products.product-card-layout-6 li.product,
  ul.products.product-card-layout-6 li.product .product-thumbnail img,
  ul.products.product-card-layout-6 li.product h2.woocommerce-loop-product__title a,
  .enhanced-pricing-container .pricing-card,
  .wpfLiLabel,
  .wpfClearButton.wpfButton,
  .wpfFilterContent .ui-slider .ui-slider-handle,
  body.woocommerce a.button.add_to_cart_button,
  .summary .single_add_to_cart_button,
  #fkcart-floating-toggler.fkcart-toggler {
    transition: none !important;
  }

  .eael-product-wrap:hover,
  ul.products.product-card-layout-6 li.product:hover,
  .enhanced-pricing-container .pricing-card:hover,
  .product-category-carousel .owl-item:hover img,
  .wpfFilterContent .ui-slider .ui-slider-handle:hover {
    transform: none !important;
  }

  .eael-product-wrap:hover > a.woocommerce-loop-product__link img,
  ul.products.product-card-layout-6 li.product:hover .product-thumbnail img {
    transform: none !important;
  }
}





/* ══════════════════════════════════════════════════════════════════════
   12 · CORRECCIONES 31-ago-2026
   ══════════════════════════════════════════════════════════════════════ */

/* --- 12.1 Tercera tarjeta de precio cortada ---
   repeat(3,1fr) no cabe en la columna del sidebar: la tercera
   se desbordaba. auto-fit las reacomoda según el ancho real. */
.enhanced-pricing-container .pricing-cards {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  overflow: visible !important;
}

.enhanced-pricing-container,
.enhanced-pricing-container .pricing-cards,
.summary .enhanced-pricing-container {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* El badge "MEJOR OFERTA" no debe empujar el ancho de su tarjeta */
.enhanced-pricing-container .pricing-card-best {
  overflow: visible !important;
}

/* A partir de 1200px sí caben las tres en fila */
@media (min-width: 1200px) {
  .enhanced-pricing-container .pricing-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}


/* --- 12.2 Productos relacionados: padding y estructura ---
   Este carrusel usa li.product SIN .product-card-layout-6,
   por eso la §5 no lo alcanzaba. Mismos valores que §5. */
.related.products li.product,
.upsells.products li.product,
section.related li.product,
.woocommerce-tabs ~ .related li.product {
  background: var(--rox-white) !important;
  border: 1px solid var(--rox-border) !important;
  border-radius: var(--rox-radius-lg) !important;
  overflow: hidden !important;
  transition: transform 0.25s var(--rox-ease),
              box-shadow 0.25s var(--rox-ease) !important;
}

.related.products li.product:hover,
.upsells.products li.product:hover,
section.related li.product:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--rox-shadow-card) !important;
}

.related.products li.product .product-inner,
.upsells.products li.product .product-inner,
section.related li.product .product-inner {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  padding: 14px !important;
  gap: 10px !important;
}

/* Si el tema no envuelve en .product-inner, el padding va al li */
.related.products li.product:not(:has(.product-inner)),
.upsells.products li.product:not(:has(.product-inner)),
section.related li.product:not(:has(.product-inner)) {
  padding: 14px !important;
}

.related.products li.product img,
.upsells.products li.product img,
section.related li.product img {
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  width: 100% !important;
  height: auto !important;
  border-radius: var(--rox-radius-md) !important;
}

.related.products li.product h2.woocommerce-loop-product__title,
.upsells.products li.product h2.woocommerce-loop-product__title,
section.related li.product h2.woocommerce-loop-product__title {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--rox-dark-soft) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.related.products li.product .price,
.upsells.products li.product .price,
section.related li.product .price {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 8px !important;
  margin: 0 !important;
  margin-top: auto !important;
  padding-top: 8px !important;
}

.related.products li.product .price .catalog-price-amount,
.related.products li.product .price .catalog-price-amount .amount,
.upsells.products li.product .price .catalog-price-amount,
section.related li.product .price .catalog-price-amount {
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: var(--rox-dark) !important;
  font-variant-numeric: tabular-nums !important;
}

/* "una unidad" viene en verde inline desde el tema */
.related.products li.product .per-unit-text,
.upsells.products li.product .per-unit-text,
section.related li.product .per-unit-text {
  color: var(--rox-gray-medium) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
}

/* Aire alrededor del bloque completo */
.related.products,
section.related,
.upsells.products {
  padding: 0 20px 32px !important;
}

.related.products > h2,
section.related > h2,
.upsells.products > h2 {
  margin-bottom: 20px !important;
}

@media (max-width: 767px) {
  .related.products li.product .product-inner,
  section.related li.product .product-inner {
    padding: 10px !important;
  }
  .related.products,
  section.related {
    padding: 0 12px 24px !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   12.3 — CORRECCIÓN DEFINITIVA: TERCERA TARJETA CORTADA
   Claude, 31-ago-2026.
   Causa real (confirmada en captura de /producto/canaleta-.../):
   NO es un problema del grid interno (12.1 ya lo arregló para
   overflow por scroll). Es que el CONTENEDOR PADRE (.summary,
   columna derecha del layout de producto) tiene un ancho fijo
   menor que 3 tarjetas de 150px+gap, y el widget se sale del
   contenedor sin que el padre lo confine ni pueda encogerse.
   Esta sección obliga a toda la cadena de contenedores a
   respetar el ancho real disponible, y a las tarjetas a
   encogerse en vez de desbordar.
   ═══════════════════════════════════════════════════════════ */

/* Toda la cadena de contenedores debe poder encogerse y nunca
   exceder el ancho de su columna. min-width:0 es la pieza que
   faltaba: por defecto los hijos flex/grid tienen min-width:auto,
   que ignora el overflow y empuja al padre a desbordarse. */
.summary,
.product-summary,
.product-summary-wrapper,
.enhanced-pricing-container,
.enhanced-pricing-container .pricing-cards,
.enhanced-pricing-container .pricing-card {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.enhanced-pricing-container {
  width: 100% !important;
  overflow: visible !important;
}

/* Grid: columnas que se reparten el ancho REAL disponible, nunca
   más. minmax(0, 1fr) en vez de minmax(150px, 1fr): el mínimo de
   150px era precisamente lo que forzaba el desborde en columnas
   angostas. auto-fit + 0 permite que las 3 quepan siempre. */
.enhanced-pricing-container .pricing-cards {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  overflow: visible !important;
}

.enhanced-pricing-container .pricing-card {
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Contenido interno de cada tarjeta: que el texto se ajuste en
   vez de forzar ancho (precio, descripción, badge). */
.enhanced-pricing-container .pricing-card * {
  min-width: 0 !important;
  max-width: 100% !important;
}

.enhanced-pricing-container .price-amount,
.enhanced-pricing-container .price-amount .amount {
  white-space: nowrap !important;
  font-size: 19px !important; /* ligeramente menor: 3 columnas angostas */
}

.enhanced-pricing-container .price-quantity,
.enhanced-pricing-container .best-deal-badge,
.enhanced-pricing-container .discount-badge {
  white-space: nowrap !important;
}

.enhanced-pricing-container .price-description {
  overflow-wrap: break-word !important;
}

/* Badge "MEJOR OFERTA": queda contenido dentro de la tarjeta,
   nunca sobresale por la izquierda del layout. */
.enhanced-pricing-container .best-deal-badge {
  left: 8px !important;
  right: auto !important;
  max-width: calc(100% - 16px) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* En pantallas donde ni encogiendo caben cómodas (tablet/mobile
   angosto), apilar es mejor que apretar ilegible. */
@media (max-width: 1024px) {
  .enhanced-pricing-container .pricing-cards {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .enhanced-pricing-container .price-amount,
  .enhanced-pricing-container .price-amount .amount {
    font-size: 21px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   24. "¡DESCUBRE MÁS! PRODUCTOS RELACIONADOS" — WIDGET CUSTOM
   Claude, 31-ago-2026.
   IMPORTANTE — diagnóstico corregido tras verificar con curl:
   NO es el widget nativo de WooCommerce (ese es <section class=
   "related products"><ul class="products product-card-layout-6">,
   ya cubierto por la Sección 19, y SÍ tiene padding correcto).
   El bloque del bug es uno completamente distinto y hecho a mano:
   <div class="related-products-section"><h2 class=
   "related-products-title">¡Descubre más! Productos relacionados
   </h2><div class="related-products-grid"><div class=
   "related-product-item">...</div></div></div>
   con su propio <style> inline en la plantilla (no en Customizer,
   no en el child theme). Ese inline SÍ pone padding en h3 (0 10px)
   y en .price (0 10px 10px), pero CERO en .related-product-image,
   que ocupa el 100% del ancho de la tarjeta borde a borde. El
   resultado visual: la imagen "pegada" a las esquinas redondeadas
   de la tarjeta mientras el texto queda con un inset menor y
   descentrado, y cero aire alrededor de todo el bloque interior.
   Esta sección reemplaza ese inline por completo, alineándolo al
   Design System (--rox-* tokens, misma tipografía, mismo radio,
   mismo tratamiento de precio que el resto del sitio) e incorpora
   padding real y consistente en las 3 zonas: imagen, título, precio.
   Como el <style> inline vive en el <head> ANTES que Additional
   CSS (que WordPress imprime al final), estas reglas ganan por
   orden de aparición sin necesitar mayor especificidad.
   ═══════════════════════════════════════════════════════════ */

.related-products-section {
  margin-top: 40px !important;
  padding: 24px !important;
  background-color: var(--rox-gray-light) !important;
  border-radius: var(--rox-radius-lg) !important;
  box-sizing: border-box !important;
}

.related-products-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--rox-dark) !important;
  text-align: left !important;
  margin: 0 0 18px !important;
  font-family: inherit !important;
}

.related-products-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 16px !important;
}

/* --- Tarjeta: mismo estándar visual que /shop/ y la home ---
   padding real en TODO el interior, no solo en el texto: esto es
   lo que corrige el bug reportado ("texto pegado a la card"). */
.related-product-item {
  background-color: var(--rox-white) !important;
  border: 1px solid var(--rox-border) !important;
  border-radius: var(--rox-radius-lg) !important;
  overflow: hidden !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s ease !important;
}

.related-product-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
}

.related-product-item a {
  text-decoration: none !important;
  color: inherit !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* --- Imagen: SIGUE ocupando el ancho completo (correcto, así se
   ve en el resto del sitio), pero con aire alrededor vía padding
   en un wrapper, no pegada a las cuatro esquinas de la tarjeta. --- */
.related-product-image {
  position: relative !important;
  padding-top: 0 !important; /* se reemplaza el truco de aspect-ratio antiguo */
  aspect-ratio: 1 / 1 !important;
  margin: 10px !important;
  width: calc(100% - 20px) !important;
  border-radius: var(--rox-radius-sm) !important;
  overflow: hidden !important;
  background: var(--rox-white) !important;
}

.related-product-image img.square-image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.related-product-item:hover .related-product-image img.square-image {
  transform: scale(1.04) !important;
}

/* --- Título: mismo tono tipográfico que el resto de tarjetas del
   sitio, con padding lateral consistente con la imagen (10px) --- */
.related-product-item h3 {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.005em !important;
  color: var(--rox-dark-soft) !important;
  margin: 0 !important;
  padding: 0 10px !important;
  font-family: inherit !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: calc(13px * 1.35 * 2) !important;
}

.related-product-item:hover h3 {
  color: var(--rox-red) !important;
}

/* --- Precio: se abandona el naranja arbitrario (#e67e22, ajeno al
   Design System) por el tratamiento estándar del sitio --- */
.related-product-item .price {
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--rox-dark) !important;
  padding: 8px 10px 14px !important;
  margin-top: auto !important;
  font-variant-numeric: tabular-nums !important;
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.related-product-item .price .catalog-price-label {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  padding: 3px 6px !important;
  border-radius: var(--rox-radius-sm) !important;
  background: var(--rox-yellow-soft) !important;
  color: var(--rox-dark) !important;
  white-space: nowrap !important;
}

/* "* una unidad": referencia discreta, ya no verde brillante inline */
.related-product-item .price .per-unit-text {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--rox-gray-medium) !important;
  white-space: nowrap !important;
}

/* --- Móvil --- */
@media (max-width: 767px) {
  .related-products-section {
    padding: 16px !important;
  }
  .related-products-title {
    font-size: 17px !important;
  }
  .related-products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .related-product-item h3 {
    font-size: 12px !important;
    padding: 0 8px !important;
    min-height: calc(12px * 1.35 * 2) !important;
  }
  .related-product-item .price {
    font-size: 14px !important;
    padding: 6px 8px 12px !important;
  }
  .related-product-image {
    margin: 8px !important;
    width: calc(100% - 16px) !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   25. BADGE "MEJOR OFERTA" — AUDITORÍA VISUAL COMPLETA
   Claude, 31-ago-2026.
   Reemplaza por completo la definición de .best-deal-badge de
   §7.4 (v3) y la corrección parcial de la Sección 12.3. No solo
   evita el recorte/desborde (12.3 ya lo lograba a medias con
   overflow+ellipsis): corrige el PROBLEMA DE FONDO visto en la
   captura — el badge, posicionado en "top: -9px", queda flotando
   a medio camino entre el borde superior de la tarjeta y el
   contenido, con una esquina que pisa el borde redondeado de la
   tarjeta de forma poco prolija.
   Solución: el badge pasa a ser una CINTA integrada al borde
   superior de la tarjeta (no un chip flotante a medio aire),
   ocupando todo el ancho, alineada con el radio de la tarjeta.
   Esto también resuelve el desborde horizontal sin depender de
   max-width/ellipsis: al ocupar 100% del ancho ya no hay overflow
   salvo texto realmente largo, cubierto igual como red de
   seguridad.
   ═══════════════════════════════════════════════════════════ */

/* La tarjeta ganadora necesita position:relative + overflow:hidden
   para que la cinta del badge respete el radio de la tarjeta en
   vez de sobresalir en las esquinas. */
.enhanced-pricing-container .pricing-card {
  position: relative !important;
  overflow: hidden !important;
}

/* Reset total de la posición heredada de v3 §7.4 (top:-9px; left:12px) */
.enhanced-pricing-container .best-deal-badge {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: 100% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 6px 8px !important;
  box-sizing: border-box !important;

  background: linear-gradient(135deg, var(--rox-red) 0%, #C41230 100%) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  text-align: center !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  border-radius: 0 !important;
  box-shadow: 0 2px 6px rgba(196, 18, 48, 0.28) !important;
  z-index: 2 !important;
}

/* El contenido de la tarjeta baja para no quedar tapado por la
   cinta superior: 30px cubre altura de la cinta + margen de aire. */
.enhanced-pricing-container .pricing-card-best {
  padding-top: 30px !important;
  border-color: var(--rox-red) !important;
  border-width: 2px !important;
}

.enhanced-pricing-container .best-deal-badge::before {
  content: "★" !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

@media (max-width: 1024px) {
  .enhanced-pricing-container .pricing-card-best {
    padding-top: 28px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   26. TRES BUGS — /shop/ y PDP (Claude, 31-ago-2026)
   ═══════════════════════════════════════════════════════════ */

/* --- 26.1 CATEGORÍAS OCULTAS EN "Comprar por categoría" ---
   Diagnóstico (confirmado en el HTML real de /shop/): el widget
   NO es la taxonomía nativa de WooCommerce, es el plugin WPF
   (WooFunnel Product Filter), bloque #wpfBlock_2. Tiene 12
   categorías reales (Aseo, Cafetería, Desechables, Electricos,
   Ferreteria, Herramientas, Hogar, Oferta publi, Otros, Papelería,
   Servicio de Envio, Tecnología) dentro de un <ul class=
   "wpfFilterVerScroll"> con max-height:400px puesto por el propio
   plugin inline (#wpfBlock_2 .wpfFilterVerScroll {max-height:400px}).
   Ninguna categoría está en display:none: las últimas (Servicio de
   Envio, Tecnología) simplemente quedan cortadas por el scroll de
   400px sin que el usuario perciba que hay más abajo. Solución:
   se elimina el límite de alto para ese bloque específico (las 12
   caben perfectamente sin scroll), y de paso se le da tratamiento
   visual acorde al Design System. Solo afecta #wpfBlock_2: los
   otros bloques WPF (Estado del inventario, Ordenar por) que
   comparten la misma clase .wpfFilterVerScroll NO se tocan. */
#wpfBlock_2 .wpfFilterVerScroll {
  max-height: none !important;
  overflow: visible !important;
}

#wpfBlock_2 .wpfCheckboxHier .wpfLiLabel {
  padding: 6px 4px !important;
  border-radius: var(--rox-radius-sm) !important;
  transition: background-color 0.15s ease !important;
}

#wpfBlock_2 .wpfCheckboxHier .wpfLiLabel:hover {
  background-color: var(--rox-gray-light) !important;
}

/* --- 26.2 "OPCIONES DE PRECIO" — TÍTULO PEGADO A LA CINTA SUPERIOR ---
   Diagnóstico: .enhanced-pricing-container tiene un ::before que
   dibuja una barra degradada de 5px pegada al top:0 del contenedor
   (background: linear-gradient(90deg, #28a745, #17a2b8, #6c757d)).
   La Sección 7.4 del Design System v3 puso padding:0 en el
   contenedor para el fix de las tarjetas recortadas, con lo cual
   la barra de color queda tocando directamente el h3 "Opciones de
   Precio" sin ningún respiro — se percibe como texto "debajo de
   una línea". Esta sección reserva espacio real arriba del título
   para que la barra quede claramente separada, en vez de pegada. */
.enhanced-pricing-container {
  padding-top: 10px !important;
}

.enhanced-pricing-container h3.pricing-title {
  margin-top: 4px !important;
}

/* --- 26.3 BOTÓN "Cotiza tu lista de productos en línea" SIN PADDING ---
   Diagnóstico: la regla que gobierna el botón (.campaign-bar,
   .campaign-bar__button.motta-button) trae padding:10px 0 — el
   0 es horizontal, así que el texto del enlace toca los bordes
   del contenedor tipo botón sin aire a los lados. Se separa la
   regla del botón para darle su propio padding horizontal sin
   afectar el padding vertical de la barra completa. */
.campaign-bar__button.motta-button {
  padding: 8px 20px !important;
  border-radius: var(--rox-radius-pill, 999px) !important;
  display: inline-block !important;
}

@media (max-width: 767px) {
  .campaign-bar__button.motta-button {
    padding: 6px 14px !important;
  }
}

/* ════════════════════════════════════════════════════════

/* ══════════════════════════════════════════════════════════════════════
   PROTECCIÓN Y DIFERENCIACIÓN BOTÓN COTIZACIÓN FORMAL EMPRESARIAL
   ══════════════════════════════════════════════════════════════════════ */
body.woocommerce div.product form.cart .roxvan-btn-solicitar-cotizacion,
.roxvan-btn-solicitar-cotizacion {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 12px 0 0 0 !important;
  padding: 13px 20px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  letter-spacing: 0.01em !important;
  border-radius: 8px !important;
  border: 1px solid #1e293b !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18) !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.roxvan-btn-solicitar-cotizacion:hover {
  background: #1e293b !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

.roxvan-btn-solicitar-cotizacion::before,
.roxvan-btn-solicitar-cotizacion::after {
  display: none !important;
  content: "" !important;
}

.roxvan-btn-solicitar-cotizacion span,
.roxvan-btn-solicitar-cotizacion svg {
  font-size: 13px !important;
  display: inline-flex !important;
}

/* --- SMART NAV STYLES --- */
/* ─── STICKY SMART BAR (SILICON VALLEY V3) ─── */
    #rox-smart-nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 52px;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(226, 232, 240, 0.9);
        z-index: 99990;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        gap: 12px;
        box-sizing: border-box;
        transform: translateY(-110%);
        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    body.admin-bar #rox-smart-nav {
        top: 32px;
    }
    @media (max-width: 782px) {
        body.admin-bar #rox-smart-nav {
            top: 46px;
        }
    }
    #rox-smart-nav.rox-nav-visible {
        transform: translateY(0);
        box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.08);
    }

    /* ─── 1. BOTÓN MENÚ HAMBURGUESA ─── */
    .rox-nav-btn-hamb {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        background: #0f172a;
        color: #ffffff !important;
        border: none;
        border-radius: 20px;
        padding: 7px 14px;
        font-size: 12.5px;
        font-weight: 700;
        cursor: pointer;
        flex-shrink: 0;
        transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
    }
    .rox-nav-btn-hamb:hover {
        background: #dc2626;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
    }

    /* ─── 2. CARRUSEL HORIZONTAL DE CATEGORÍAS ─── */
    .rox-nav-cats-carousel {
        display: flex;
        align-items: center;
        gap: 6px;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 4px 0;
        flex: 1;
        min-width: 0;
    }
    .rox-nav-cats-carousel::-webkit-scrollbar {
        display: none;
    }
    .rox-nav-cat-pill {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: #f8fafc;
        color: #334155 !important;
        border: 1px solid #e2e8f0;
        border-radius: 18px;
        padding: 5px 12px;
        font-size: 12px;
        font-weight: 600;
        text-decoration: none !important;
        transition: all 0.16s ease;
        flex-shrink: 0;
    }
    .rox-nav-cat-pill:hover {
        background: #ffffff;
        color: #dc2626 !important;
        border-color: #dc2626;
        transform: translateY(-1px);
        box-shadow: 0 3px 10px rgba(220, 38, 38, 0.12);
    }

    /* ─── 3. BOTÓN SELECTOR DE MARCAS ─── */
    .rox-nav-btn-brands {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #ffffff;
        color: #0f172a !important;
        border: 1px solid #cbd5e1;
        border-radius: 20px;
        padding: 6px 13px;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        flex-shrink: 0;
        transition: all 0.18s ease;
    }
    .rox-nav-btn-brands:hover {
        border-color: #dc2626;
        color: #dc2626 !important;
        background: #fff5f5;
        box-shadow: 0 2px 8px rgba(220, 38, 38, 0.12);
    }

    /* ─── 4. BUSCADOR TRIGGER ESTILO STRIPE / RAYCAST ─── */
    .rox-nav-search-trigger {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #f1f5f9;
        border: 1px solid #e2e8f0;
        border-radius: 20px;
        padding: 6px 14px;
        color: #64748b;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        flex-shrink: 0;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .rox-nav-search-trigger:hover {
        background: #ffffff;
        border-color: #0f172a;
        color: #0f172a;
        box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
    }
    .rox-nav-search-kbd {
        background: #e2e8f0;
        color: #475569;
        font-size: 10px;
        font-weight: 700;
        padding: 2px 6px;
        border-radius: 6px;
        font-family: monospace;
    }

    /* ─── 5. BOTÓN ROX-IA CON INDICADOR ONLINE PULSANTE (100% VISIBLE) ─── */
    .rox-nav-btn-ia {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
        color: #ffffff !important;
        border: none;
        border-radius: 20px;
        padding: 7px 15px;
        font-size: 12.5px;
        font-weight: 800;
        cursor: pointer;
        flex-shrink: 0;
        box-shadow: 0 3px 12px rgba(220, 38, 38, 0.32);
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        text-decoration: none !important;
        position: relative;
    }
    .rox-nav-btn-ia:hover {
        transform: translateY(-1.5px) scale(1.03);
        box-shadow: 0 6px 18px rgba(220, 38, 38, 0.42);
        color: #ffffff !important;
    }
    .rox-pulse-dot {
        width: 7px;
        height: 7px;
        background: #22c55e;
        border-radius: 50%;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 8px #22c55e;
        animation: roxPulseGreen 1.8s infinite;
    }
    @keyframes roxPulseGreen {
        0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
        70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
        100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
    }

    /* ─── 6. MODAL COMMAND PALETTE BUSCADOR SILICON VALLEY ─── */
    #rox-cmd-palette-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.55);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 999995;
        align-items: flex-start;
        justify-content: center;
        padding-top: 10vh;
        box-sizing: border-box;
    }
    #rox-cmd-palette {
        background: #ffffff;
        border-radius: 20px;
        width: 640px;
        max-width: 92vw;
        max-height: 78vh;
        box-shadow: 0 30px 70px -15px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(226, 232, 240, 0.8);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        animation: roxPopCmd 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @keyframes roxPopCmd {
        from { opacity: 0; transform: scale(0.95) translateY(-10px); }
        to { opacity: 1; transform: scale(1) translateY(0); }
    }
    .rox-cmd-header {
        display: flex;
        align-items: center;
        padding: 16px 20px;
        gap: 12px;
        border-bottom: 1px solid #f1f5f9;
    }
    .rox-cmd-input {
        flex: 1;
        border: none !important;
        outline: none !important;
        font-size: 16px;
        font-weight: 600;
        color: #0f172a;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .rox-cmd-close-btn {
        background: #f1f5f9;
        border: none;
        border-radius: 8px;
        padding: 6px 10px;
        font-size: 11px;
        font-weight: 700;
        color: #64748b;
        cursor: pointer;
    }
    .rox-cmd-body {
        padding: 14px 20px;
        overflow-y: auto;
        flex: 1;
    }
    .rox-cmd-quick-chips {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 14px;
    }
    .rox-cmd-chip {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        padding: 5px 12px;
        font-size: 11.5px;
        font-weight: 700;
        color: #475569;
        cursor: pointer;
        transition: all 0.15s;
    }
    .rox-cmd-chip:hover {
        background: #0f172a;
        color: #ffffff;
        border-color: #0f172a;
    }
    .rox-cmd-result-card {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 10px 12px;
        border-radius: 12px;
        text-decoration: none !important;
        color: #0f172a !important;
        transition: all 0.15s ease;
        margin-bottom: 4px;
    }
    .rox-cmd-result-card:hover {
        background: #f8fafc;
        transform: translateX(3px);
    }
    .rox-cmd-result-card img {
        width: 48px;
        height: 48px;
        object-fit: contain;
        border-radius: 10px;
        border: 1px solid #f1f5f9;
        background: #ffffff;
    }
    .rox-cmd-footer {
        padding: 12px 20px;
        background: #f8fafc;
        border-top: 1px solid #f1f5f9;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 11.5px;
        color: #64748b;
    }

    /* ─── DRAWER LATERAL & MODAL MARCAS (ESTILO PULIDO) ─── */
    #rox-nav-drawer-overlay, #rox-brands-modal-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.5);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        z-index: 999992;
    }
    #rox-nav-drawer {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 320px;
        max-width: 86vw;
        background: #ffffff;
        z-index: 999993;
        box-shadow: 15px 0 50px rgba(0, 0, 0, 0.16);
        display: flex;
        flex-direction: column;
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    #rox-nav-drawer.rox-drawer-open {
        transform: translateX(0);
    }
    .rox-drawer-header {
        padding: 16px 20px;
        border-bottom: 1px solid #f1f5f9;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .rox-drawer-title {
        font-size: 15px;
        font-weight: 900;
        color: #0f172a;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .rox-drawer-close {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #64748b;
        cursor: pointer;
    }
    .rox-drawer-body {
        flex: 1;
        overflow-y: auto;
        padding: 14px 16px;
    }
    .rox-drawer-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 12px;
        border-radius: 10px;
        text-decoration: none !important;
        color: #1e293b !important;
        font-size: 13.5px;
        font-weight: 600;
        transition: all 0.16s ease;
    }
    .rox-drawer-item:hover {
        background: #f8fafc;
        color: #dc2626 !important;
        transform: translateX(3px);
    }
    .rox-drawer-count {
        background: #f1f5f9;
        color: #64748b;
        font-size: 11px;
        font-weight: 700;
        padding: 3px 8px;
        border-radius: 12px;
    }

    /* Modal de Marcas */
    #rox-brands-modal {
        background: #ffffff;
        border-radius: 20px;
        width: 620px;
        max-width: 92vw;
        max-height: 85vh;
        margin: auto;
        display: flex;
        flex-direction: column;
        box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.28);
        overflow: hidden;
        animation: roxPopCmd 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .rox-brands-tabs {
        display: flex;
        border-bottom: 1px solid #e2e8f0;
        background: #f8fafc;
        padding: 8px 16px 0;
        gap: 8px;
    }
    .rox-brands-tab-btn {
        padding: 10px 18px;
        font-size: 13px;
        font-weight: 700;
        border: none;
        background: none;
        color: #64748b;
        cursor: pointer;
        border-bottom: 2px solid transparent;
        transition: all 0.16s ease;
    }
    .rox-brands-tab-btn.active {
        color: #0f172a;
        border-bottom-color: #dc2626;
        background: #ffffff;
        border-radius: 10px 10px 0 0;
    }
    .rox-brands-content {
        padding: 18px;
        overflow-y: auto;
        flex: 1;
    }
    .rox-brands-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 10px;
    }
    .rox-brand-card {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 10px 12px;
        text-align: center;
        text-decoration: none !important;
        color: #0f172a !important;
        font-size: 12.5px;
        font-weight: 700;
        transition: all 0.16s ease;
    }
    .rox-brand-card:hover {
        background: #0f172a;
        color: #ffffff !important;
        border-color: #0f172a;
        transform: translateY(-2px);
    }

    /* ─── RESPONSIVE MÓVIL ESTILO APP NATIVA ─── */
    
    /* ─── ESTILOS RESPONSIVE ULTRA-PULIDOS SILICON VALLEY ─── */
    .rox-nav-search-text {
        font-size: 12.5px;
        color: #64748b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .rox-nav-search-kbd {
        font-size: 10.5px;
        font-weight: 700;
        background: #ffffff;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        padding: 2px 6px;
        color: #64748b;
        box-shadow: 0 1px 2px rgba(0,0,0,0.04);
        font-family: inherit;
        letter-spacing: 0.2px;
    }
    .rox-cmd-close-svg {
        display: none;
    }

    @media (max-width: 768px) {
        #rox-smart-nav {
            height: 50px !important;
            padding: 0 10px !important;
            gap: 8px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
        }
        /* 1. Botón Catálogo: cuadrado redondeado táctil de 38x38px */
        .rox-nav-btn-hamb {
            width: 38px !important;
            height: 38px !important;
            min-width: 38px !important;
            padding: 0 !important;
            border-radius: 10px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            flex: 0 0 38px !important;
        }
        .rox-nav-btn-hamb span {
            display: none !important;
        }

        /* 2. Carrusel de Categorías: oculto en barra sticky móvil para dar prioridad al buscador (disponible en Catálogo drawer) */
        .rox-nav-cats-carousel {
            display: none !important;
        }

        /* 3. Selector de Marcas: botón táctil de 38x38px */
        .rox-nav-btn-brands {
            width: 38px !important;
            height: 38px !important;
            min-width: 38px !important;
            padding: 0 !important;
            border-radius: 10px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            flex: 0 0 38px !important;
        }
        .rox-nav-btn-brands span {
            display: none !important;
        }

        /* 4. Buscador Inteligente Elástico: toma TODO el ancho restante sin desbordar */
        .rox-nav-search-trigger {
            flex: 1 1 auto !important;
            min-width: 0 !important;
            height: 38px !important;
            padding: 0 12px !important;
            border-radius: 20px !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 6px !important;
            overflow: hidden !important;
        }
        .rox-nav-search-text {
            font-size: 12.5px !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
        }
        .rox-nav-search-kbd {
            display: none !important;
        }

        /* 5. Rox-IA en sticky: Píldora visible y cómoda */
        .rox-nav-btn-ia {
            height: 38px !important;
            padding: 0 12px !important;
            border-radius: 20px !important;
            flex: 0 0 auto !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 6px !important;
            font-size: 12px !important;
            font-weight: 800 !important;
        }

        /* Command Palette Modal en Móvil */
        #rox-cmd-palette-overlay {
            padding-top: 15px !important;
            padding-left: 10px !important;
            padding-right: 10px !important;
            align-items: flex-start !important;
        }
        #rox-cmd-palette {
            width: 100% !important;
            max-width: 100% !important;
            max-height: 85vh !important;
            border-radius: 16px !important;
        }
        .rox-cmd-header {
            padding: 12px 14px !important;
            gap: 10px !important;
        }
        .rox-cmd-input {
            font-size: 16px !important; /* Evita zoom molesto en iOS */
        }
        .rox-cmd-esc-desktop {
            display: none !important;
        }
        .rox-cmd-close-svg {
            display: block !important;
        }
        .rox-cmd-close-btn {
            width: 36px !important;
            height: 36px !important;
            min-width: 36px !important;
            padding: 0 !important;
            border-radius: 8px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
    }

    @media (max-width: 370px) {
        #rox-smart-nav {
            padding: 0 6px !important;
            gap: 5px !important;
        }
        .rox-nav-btn-ia span {
            display: none !important;
        }
        .rox-nav-btn-ia {
            width: 38px !important;
            padding: 0 !important;
            justify-content: center !important;
            border-radius: 10px !important;
        }
    }

/* --- QUICK VIEW STYLES --- */
/* Backdrop */
    .roxvan-qv-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(15, 23, 42, 0.55);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        z-index: 99999999;
        display: none;
        opacity: 0;
        transition: opacity 0.28s ease;
    }
    .roxvan-qv-backdrop.is-open {
        display: block;
        opacity: 1;
    }

    /* Drawer Panel (Desktop Slide-over from right) */
    .roxvan-qv-drawer {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 500px;
        max-width: 92vw;
        background: #ffffff;
        box-shadow: -10px 0 35px rgba(0, 0, 0, 0.18);
        display: flex;
        flex-direction: column;
        transform: translateX(100%);
        transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 100000000;
        overflow: hidden;
    }
    .roxvan-qv-backdrop.is-open .roxvan-qv-drawer {
        transform: translateX(0);
    }

    /* Mobile Bottom Sheet */
    @media (max-width: 768px) {
        .roxvan-qv-drawer {
            top: auto;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            max-width: 100%;
            max-height: 88vh;
            border-radius: 20px 20px 0 0;
            transform: translateY(100%);
        }
        .roxvan-qv-backdrop.is-open .roxvan-qv-drawer {
            transform: translateY(0);
        }
    }

    .roxvan-qv-mobile-handle {
        display: none;
        width: 40px;
        height: 4px;
        background: #cbd5e1;
        border-radius: 2px;
        margin: 10px auto 4px auto;
    }
    @media (max-width: 768px) {
        .roxvan-qv-mobile-handle { display: block; }
    }

    /* Header */
    .roxvan-qv-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 20px;
        border-bottom: 1px solid #e2e8f0;
        background: #ffffff;
        flex-shrink: 0;
    }
    .roxvan-qv-badges {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .roxvan-qv-badge-cat {
        font-size: 11px;
        font-weight: 700;
        background: #f1f5f9;
        color: #475569;
        padding: 3px 9px;
        border-radius: 6px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
    .roxvan-qv-badge-brand {
        font-size: 11px;
        font-weight: 700;
        background: #e0f2fe;
        color: #0369a1;
        padding: 3px 9px;
        border-radius: 6px;
    }
    .roxvan-qv-close-btn {
        background: transparent;
        border: none;
        color: #64748b;
        cursor: pointer;
        padding: 4px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.15s ease;
    }
    .roxvan-qv-close-btn:hover {
        background: #f1f5f9;
        color: #0f172a;
    }

    /* Body */
    .roxvan-qv-body {
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 20px;
        box-sizing: border-box;
    }

    /* Gallery */
    .roxvan-qv-gallery-wrap {
        margin-bottom: 18px;
    }
    .roxvan-qv-img-container {
        position: relative;
        width: 100%;
        height: 260px;
        background: #f8fafc;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .roxvan-qv-main-img {
        max-width: 90%;
        max-height: 90%;
        object-fit: contain;
        transition: transform 0.25s ease;
    }
    .roxvan-qv-img-container:hover .roxvan-qv-main-img {
        transform: scale(1.04);
    }
    .roxvan-qv-savings-badge {
        position: absolute;
        top: 10px;
        left: 10px;
        background: #16a34a;
        color: #ffffff;
        font-size: 11px;
        font-weight: 800;
        padding: 4px 8px;
        border-radius: 6px;
        box-shadow: 0 2px 6px rgba(22, 163, 74, 0.3);
    }
    .roxvan-qv-thumbs {
        display: flex;
        gap: 8px;
        margin-top: 10px;
        overflow-x: auto;
    }
    .roxvan-qv-thumb-item {
        width: 48px;
        height: 48px;
        border: 2px solid #e2e8f0;
        border-radius: 6px;
        cursor: pointer;
        object-fit: cover;
        flex-shrink: 0;
    }
    .roxvan-qv-thumb-item.active {
        border-color: #dc2626;
    }

    /* Info */
    .roxvan-qv-title {
        font-size: 17px;
        font-weight: 700;
        color: #0f172a;
        line-height: 1.35;
        margin: 0 0 8px 0;
    }
    .roxvan-qv-meta-row {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 14px;
        font-size: 11.5px;
    }
    .roxvan-qv-sku {
        color: #64748b;
        font-weight: 600;
    }
    .roxvan-qv-stock {
        color: #16a34a;
        font-weight: 700;
    }

    /* Price Box */
    .roxvan-qv-price-box {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 12px 14px;
        margin-bottom: 16px;
    }
    .roxvan-qv-price-main {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
    }
    .roxvan-qv-price-label {
        font-size: 12px;
        font-weight: 700;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
    .roxvan-qv-price-values {
        display: flex;
        align-items: baseline;
        gap: 8px;
    }
    .roxvan-qv-price-curr {
        font-size: 22px;
        font-weight: 800;
        color: #dc2626;
    }
    .roxvan-qv-price-reg {
        font-size: 14px;
        color: #94a3b8;
        text-decoration: line-through;
        font-weight: 600;
    }
    .roxvan-qv-price-sub {
        font-size: 11px;
        color: #64748b;
        margin-top: 4px;
    }

    /* Quantity Controls (Silicon Valley Specs) */
    .roxvan-qv-qty-section {
        margin-bottom: 14px !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 10px !important;
        padding: 10px 14px !important;
        display: block !important;
        visibility: visible !important;
    }
    .roxvan-qv-qty-header-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 8px !important;
    }
    .roxvan-qv-qty-label {
        font-size: 11.5px !important;
        font-weight: 700 !important;
        color: #334155 !important;
        margin: 0 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }
    .roxvan-qv-subtotal-inline {
        font-size: 12px !important;
        color: #64748b !important;
    }
    .roxvan-qv-subtotal-inline strong {
        color: #dc2626 !important;
        font-size: 13.5px !important;
        font-weight: 800 !important;
    }
    .roxvan-qv-subtotal-inline small {
        color: #64748b !important;
        font-size: 10.5px !important;
        margin-left: 2px !important;
    }
    .roxvan-qv-qty-controls {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }
    .roxvan-qv-qty-stepper {
        display: inline-flex !important;
        align-items: center !important;
        border: 1.5px solid #cbd5e1 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        background: #ffffff !important;
        height: 36px !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .roxvan-qv-qty-btn {
        all: unset !important;
        box-sizing: border-box !important;
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        background: #f1f5f9 !important;
        border: none !important;
        font-size: 17px !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        padding: 0 !important;
        margin: 0 !important;
        transition: background 0.15s ease !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }
    .roxvan-qv-qty-btn:hover {
        background: #e2e8f0 !important;
        color: #0f172a !important;
    }
    .roxvan-qv-qty-btn:active {
        background: #cbd5e1 !important;
    }
    .roxvan-qv-qty-input {
        all: unset !important;
        box-sizing: border-box !important;
        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        background: #ffffff !important;
        border: none !important;
        border-left: 1px solid #e2e8f0 !important;
        border-right: 1px solid #e2e8f0 !important;
        text-align: center !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        margin: 0 !important;
        padding: 0 4px !important;
        line-height: 36px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        -moz-appearance: textfield !important;
    }
    .roxvan-qv-qty-input::-webkit-inner-spin-button,
    .roxvan-qv-qty-input::-webkit-outer-spin-button {
        -webkit-appearance: none !important;
        margin: 0 !important;
    }
    .roxvan-qv-bulk-chips {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
    }
    .roxvan-qv-chip {
        all: unset !important;
        box-sizing: border-box !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        padding: 4px 8px !important;
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 6px !important;
        color: #334155 !important;
        cursor: pointer !important;
        transition: all 0.15s ease !important;
        user-select: none !important;
        line-height: 1.2 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .roxvan-qv-chip:hover {
        background: #0f172a !important;
        color: #ffffff !important;
        border-color: #0f172a !important;
    }
    .roxvan-qv-chip.active {
        background: #dc2626 !important;
        color: #ffffff !important;
        border-color: #dc2626 !important;
    }

    /* Actions Grid (Silicon Valley UX) */
    .roxvan-qv-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 7px !important;
        margin-bottom: 16px !important;
    }
    .roxvan-qv-actions-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 7px !important;
    }
    .roxvan-qv-btn {
        all: unset !important;
        box-sizing: border-box !important;
        border-radius: 8px !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        line-height: 1 !important;
        padding: 0 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        cursor: pointer !important;
        text-align: center !important;
        transition: all 0.15s ease !important;
        white-space: nowrap !important;
    }
    .roxvan-qv-btn-flash {
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
        color: #ffffff !important;
        box-shadow: 0 2px 8px rgba(220, 38, 38, 0.28) !important;
    }
    .roxvan-qv-btn-flash:hover {
        background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35) !important;
    }
    .roxvan-qv-btn-cart {
        background: #facc15 !important;
        color: #0f172a !important;
        box-shadow: 0 2px 6px rgba(250, 204, 21, 0.25) !important;
    }
    .roxvan-qv-btn-cart:hover {
        background: #eab308 !important;
        transform: translateY(-1px) !important;
    }
    .roxvan-qv-btn-cart.is-added {
        background: #16a34a !important;
        color: #ffffff !important;
    }
    .roxvan-qv-btn-quote {
        background: #0f172a !important;
        color: #ffffff !important;
        height: 35px !important;
        min-height: 35px !important;
        max-height: 35px !important;
        box-shadow: 0 1px 4px rgba(15, 23, 42, 0.15) !important;
    }
    .roxvan-qv-btn-quote:hover {
        background: #1e293b !important;
        transform: translateY(-1px) !important;
    }
    .roxvan-qv-btn-quote.is-added {
        background: #2563eb !important;
        color: #ffffff !important;
    }
    /* Description */
    .roxvan-qv-desc-wrap {
        border-top: 1px solid #f1f5f9;
        padding-top: 14px;
        margin-bottom: 14px;
    }
    .roxvan-qv-desc-title {
        font-size: 12px;
        font-weight: 700;
        color: #475569;
        text-transform: uppercase;
        margin-bottom: 6px;
    }
    .roxvan-qv-desc {
        font-size: 13px;
        color: #334155;
        line-height: 1.5;
        margin: 0;
    }

    /* Footer link */
    .roxvan-qv-footer-link {
        text-align: center;
        padding: 6px 0;
    }
    .roxvan-qv-footer-link a {
        font-size: 12px;
        font-weight: 600;
        color: #2563eb;
        text-decoration: none;
    }
    .roxvan-qv-footer-link a:hover {
        text-decoration: underline;
    }

        /* ─── BOTÓN DE VISTA RÁPIDA / VER FICHA (MICRO-BADGE SILICON VALLEY ULTRA ELEGANTE) ─── */
    button.roxvan-shop-qv-btn {
        all: unset !important;
        box-sizing: border-box !important;
        position: absolute !important;
        bottom: 8px !important;
        left: 50% !important;
        transform: translateX(-50%) translateY(0) !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 90% !important;
        height: 25px !important;
        min-height: 25px !important;
        max-height: 25px !important;
        line-height: 25px !important;
        padding: 0 10px !important;
        margin: 0 !important;
        background: rgba(15, 23, 42, 0.82) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, 0.22) !important;
        border-radius: 20px !important;
        font-family: -apple-system, BlinkMacSystemFont, 'Plus Jakarta Sans', sans-serif !important;
        font-size: 10.5px !important;
        font-weight: 700 !important;
        letter-spacing: 0.2px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        cursor: pointer !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22) !important;
        opacity: 0.94 !important;
        pointer-events: auto !important;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
        z-index: 15 !important;
        white-space: nowrap !important;
    }
    button.roxvan-shop-qv-btn svg {
        width: 12px !important;
        height: 12px !important;
        min-width: 12px !important;
        min-height: 12px !important;
        stroke: #ffffff !important;
        display: inline-block !important;
        vertical-align: middle !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    button.roxvan-shop-qv-btn span {
        color: #ffffff !important;
        font-size: 10.5px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        display: inline-block !important;
    }
    button.roxvan-shop-qv-btn:hover {
        background: #dc2626 !important;
        color: #ffffff !important;
        border-color: #dc2626 !important;
        opacity: 1 !important;
        transform: translateX(-50%) translateY(-1.5px) !important;
        box-shadow: 0 6px 14px rgba(220, 38, 38, 0.38) !important;
    }
    @media (hover: hover) {
        .product-inner .roxvan-shop-qv-btn,
        .product-item .roxvan-shop-qv-btn,
        .motta-product-card .roxvan-shop-qv-btn,
        .product.type-product .roxvan-shop-qv-btn {
            opacity: 0 !important;
            transform: translateX(-50%) translateY(4px) !important;
        }
        .product-inner:hover .roxvan-shop-qv-btn,
        .product-item:hover .roxvan-shop-qv-btn,
        .motta-product-card:hover .roxvan-shop-qv-btn,
        .product.type-product:hover .roxvan-shop-qv-btn {
            opacity: 1 !important;
            transform: translateX(-50%) translateY(0) !important;
        }
    }

    /* ─── FLOATING QUOTE PILL (ESTILO PILL FLOTANTE SILICON VALLEY) ─── */
    .roxvan-floating-quote-pill {
        position: fixed !important;
        bottom: 24px !important;
        left: 24px !important;
        right: auto !important;
        top: auto !important;
        z-index: 999998 !important;
        background: #0f172a !important;
        border-radius: 30px !important;
        padding: 6px 10px 6px 14px !important;
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.38), 0 2px 8px rgba(0, 0, 0, 0.15) !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        animation: roxvanPillFadeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
        font-family: -apple-system, BlinkMacSystemFont, 'Plus Jakarta Sans', sans-serif !important;
        display: none;
    }
    @keyframes roxvanPillFadeIn {
        from { opacity: 0; transform: translateY(16px) scale(0.95); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .roxvan-quote-pill-inner {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }
    .roxvan-quote-pill-icon {
        font-size: 16px !important;
        line-height: 1 !important;
        display: inline-block !important;
    }
    .roxvan-quote-pill-text {
        display: flex !important;
        flex-direction: column !important;
        line-height: 1.25 !important;
        text-align: left !important;
    }
    .roxvan-quote-pill-count {
        font-size: 11px !important;
        font-weight: 500 !important;
        color: #94a3b8 !important;
        white-space: nowrap !important;
    }
    .roxvan-quote-pill-count strong {
        color: #38bdf8 !important;
        font-weight: 800 !important;
    }
    .roxvan-quote-pill-total {
        font-size: 12.5px !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        white-space: nowrap !important;
    }
    a.roxvan-quote-pill-cta {
        all: unset !important;
        box-sizing: border-box !important;
        background: #dc2626 !important;
        color: #ffffff !important;
        font-size: 11.5px !important;
        font-weight: 700 !important;
        padding: 6px 13px !important;
        border-radius: 20px !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        cursor: pointer !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.18s ease !important;
        box-shadow: 0 2px 6px rgba(220, 38, 38, 0.35) !important;
    }
    a.roxvan-quote-pill-cta:hover {
        background: #b91c1c !important;
        color: #ffffff !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 10px rgba(220, 38, 38, 0.45) !important;
    }
    button.roxvan-quote-pill-close {
        all: unset !important;
        box-sizing: border-box !important;
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        max-width: 22px !important;
        max-height: 22px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.1) !important;
        color: #94a3b8 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.18s ease !important;
    }
    button.roxvan-quote-pill-close svg {
        width: 10px !important;
        height: 10px !important;
        stroke: #cbd5e1 !important;
    }
    button.roxvan-quote-pill-close:hover {
        background: rgba(239, 68, 68, 0.25) !important;
        color: #ef4444 !important;
    }
    button.roxvan-quote-pill-close:hover svg {
        stroke: #ef4444 !important;
    }
    @media (max-width: 768px) {
        .roxvan-floating-quote-pill {
            bottom: 84px !important;
            left: 14px !important;
        }
    }

    .roxvan-cotiz-preloaded-wrap {
        background: #ffffff;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        padding: 18px 20px;
        margin-bottom: 24px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.04);
    }
    .roxvan-cotiz-preloaded-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
        border-bottom: 1px solid #f1f5f9;
        padding-bottom: 10px;
    }
    .roxvan-cotiz-preloaded-title {
        font-size: 15px;
        font-weight: 700;
        color: #0f172a;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .roxvan-cotiz-item-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0;
        border-bottom: 1px solid #f8fafc;
        gap: 12px;
    }
    .roxvan-cotiz-item-info {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1;
        min-width: 0;
    }
    .roxvan-cotiz-item-img {
        width: 44px;
        height: 44px;
        object-fit: cover;
        border-radius: 6px;
        border: 1px solid #e2e8f0;
        flex-shrink: 0;
    }
    .roxvan-cotiz-item-name {
        font-size: 13px;
        font-weight: 600;
        color: #1e293b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .roxvan-cotiz-item-meta {
        font-size: 11px;
        color: #64748b;
    }
    .roxvan-cotiz-item-qty {
        font-size: 13px;
        font-weight: 700;
        color: #0f172a;
        background: #f1f5f9;
        padding: 4px 10px;
        border-radius: 6px;
    }
    .roxvan-cotiz-item-price {
        font-size: 14px;
        font-weight: 800;
        color: #dc2626;
        white-space: nowrap;
        min-width: 90px;
        text-align: right;
    }
    .roxvan-cotiz-item-remove {
        background: none;
        border: none;
        color: #94a3b8;
        cursor: pointer;
        font-size: 16px;
        padding: 4px;
    }
    .roxvan-cotiz-item-remove:hover {
        color: #dc2626;
    }
    
    /* Controles de Cantidad en la Tabla de Cotización B2B */
    .roxvan-cotiz-item-qty-controls button.roxvan-row-qty-btn {
        all: unset !important;
        box-sizing: border-box !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
        background: #f1f5f9 !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 6px !important;
        color: #0f172a !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        line-height: 26px !important;
        text-align: center !important;
        cursor: pointer !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        transition: all 0.15s ease !important;
    }
    .roxvan-cotiz-item-qty-controls button.roxvan-row-qty-btn:hover {
        background: #e2e8f0 !important;
        border-color: #94a3b8 !important;
        color: #dc2626 !important;
    }
    button.roxvan-cotiz-item-remove {
        all: unset !important;
        box-sizing: border-box !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        color: #94a3b8 !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 6px !important;
        transition: all 0.15s ease !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    button.roxvan-cotiz-item-remove:hover {
        background: #fee2e2 !important;
        color: #dc2626 !important;
    }

    .roxvan-cotiz-actions-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1.5px dashed #cbd5e1;
        flex-wrap: wrap;
        gap: 10px;
    }
    .roxvan-cotiz-total-box {
        font-size: 16px;
        font-weight: 800;
        color: #0f172a;
    }
    .roxvan-cotiz-total-val {
        color: #dc2626;
        font-size: 18px;
    }
    
    /* Refinamiento Silicon Valley para botones de Cotización B2B */
    .rsq-voice-btn {
        all: unset !important;
        box-sizing: border-box !important;
        background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
        color: #ffffff !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 18px !important;
        border-radius: 8px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25) !important;
        transition: all 0.2s ease !important;
    }
    .rsq-voice-btn:hover {
        background: linear-gradient(135deg, #b91c1c, #991b1b) !important;
        transform: translateY(-1px) !important;
    }
    .rsq-btn-primary,
    #rsq-btn-upload,
    #rsq-btn-submit {
        all: unset !important;
        box-sizing: border-box !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 18px !important;
        border-radius: 8px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        transition: all 0.2s ease !important;
        text-decoration: none !important;
    }
    #rsq-btn-upload {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25) !important;
    }
    #rsq-btn-upload:hover {
        background: #1d4ed8 !important;
        transform: translateY(-1px) !important;
    }
    #rsq-btn-submit {
        background: #dc2626 !important;
        color: #ffffff !important;
        box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25) !important;
        width: 100% !important;
    }
    #rsq-btn-submit:hover {
        background: #b91c1c !important;
        transform: translateY(-1px) !important;
    }

    /* Tabla de Cotización Precargada en /cotizacion-en-linea/ */
    .roxvan-cotiz-actions-bar button {
        all: unset !important;
        box-sizing: border-box !important;
        height: 38px !important;
        padding: 0 16px !important;
        border-radius: 8px !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        transition: all 0.15s ease !important;
    }
    #roxvan-cotiz-whatsapp-btn {
        background: #25d366 !important;
        color: #ffffff !important;
    }
    #roxvan-cotiz-whatsapp-btn:hover {
        background: #1eb954 !important;
        transform: translateY(-1px) !important;
    }
    #roxvan-cotiz-cart-all-btn {
        background: #dc2626 !important;
        color: #ffffff !important;
    }
    #roxvan-cotiz-cart-all-btn:hover {
        background: #b91c1c !important;
        transform: translateY(-1px) !important;
    }

    /* ══════════════════════════════════════════════════════════════════
       ESTILOS SILICON VALLEY: CARRITO, CHECKOUT Y BOTONES COTIZACIÓN
       ══════════════════════════════════════════════════════════════════ */
    /* 1. Botón Principal "Proceder al Pago" en Carrito */
    body.woocommerce-cart .cart_totals .wc-proceed-to-checkout a.checkout-button,
    body.woocommerce-cart .wc-proceed-to-checkout a.button.checkout-button,
    body.woocommerce-cart a.checkout-button {
        all: unset !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        background: #dc2626 !important;
        color: #ffffff !important;
        border-radius: 10px !important;
        font-family: -apple-system, BlinkMacSystemFont, 'Plus Jakarta Sans', sans-serif !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        letter-spacing: 0.2px !important;
        cursor: pointer !important;
        padding: 0 20px !important;
        margin: 0 !important;
        box-shadow: 0 4px 14px rgba(220, 38, 38, 0.28) !important;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
        text-decoration: none !important;
        text-align: center !important;
    }
    body.woocommerce-cart .cart_totals .wc-proceed-to-checkout a.checkout-button:hover,
    body.woocommerce-cart a.checkout-button:hover {
        background: #b91c1c !important;
        color: #ffffff !important;
        transform: translateY(-1.5px) !important;
        box-shadow: 0 6px 18px rgba(220, 38, 38, 0.4) !important;
    }

    /* 2. Botón "Realizar el Pedido" en Checkout / Finalizar Compra */
    body.woocommerce-checkout #place_order,
    body.woocommerce-checkout button#place_order {
        all: unset !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        background: #dc2626 !important;
        color: #ffffff !important;
        border-radius: 10px !important;
        font-family: -apple-system, BlinkMacSystemFont, 'Plus Jakarta Sans', sans-serif !important;
        font-size: 14.5px !important;
        font-weight: 800 !important;
        cursor: pointer !important;
        padding: 0 20px !important;
        margin: 12px 0 0 0 !important;
        box-shadow: 0 4px 16px rgba(220, 38, 38, 0.32) !important;
        transition: all 0.2s ease !important;
        text-align: center !important;
    }
    body.woocommerce-checkout #place_order:hover {
        background: #b91c1c !important;
        transform: translateY(-1.5px) !important;
        box-shadow: 0 6px 20px rgba(220, 38, 38, 0.42) !important;
    }

    /* 3. Botones Secundarios del Carrito (Cotización Formal y Compartir Carrito) */
    .roxvan-cart-actions-container {
        margin-top: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    button.roxvan-cart-action-btn {
        all: unset !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        width: 100% !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        padding: 0 16px !important;
        border-radius: 8px !important;
        font-family: -apple-system, BlinkMacSystemFont, 'Plus Jakarta Sans', sans-serif !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        text-decoration: none !important;
        transition: all 0.18s ease !important;
        text-align: center !important;
    }
    button.roxvan-cart-b2b-quote-btn {
        background: #ffffff !important;
        color: #0f172a !important;
        border: 1.5px solid #cbd5e1 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    }
    button.roxvan-cart-b2b-quote-btn:hover {
        background: #f8fafc !important;
        border-color: #dc2626 !important;
        color: #dc2626 !important;
        transform: translateY(-1px) !important;
    }
    button.roxvan-cart-share-btn {
        background: #f1f5f9 !important;
        color: #1e293b !important;
        border: 1px solid #e2e8f0 !important;
    }
    button.roxvan-cart-share-btn:hover {
        background: #e2e8f0 !important;
        color: #2563eb !important;
        border-color: #cbd5e1 !important;
        transform: translateY(-1px) !important;
    }

    /* Ocultar cualquier bloque residual antiguo de cotización repetido */
    .roxvan-cart-quote-box {
        display: none !important;
    }

    /* 4. Botón individual "Agregar al Carrito" en cada fila de la Cotización B2B */
    button.roxvan-cotiz-row-add-cart {
        all: unset !important;
        box-sizing: border-box !important;
        width: 32px !important;
        height: 28px !important;
        min-width: 32px !important;
        min-height: 28px !important;
        background: #facc15 !important;
        color: #0f172a !important;
        border-radius: 6px !important;
        font-size: 13px !important;
        cursor: pointer !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.15s ease !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12) !important;
        margin: 0 2px !important;
    }
    button.roxvan-cotiz-row-add-cart:hover {
        background: #eab308 !important;
        transform: translateY(-1px) !important;
    }
    button.roxvan-cotiz-row-add-cart.is-added {
        background: #16a34a !important;
        color: #ffffff !important;
    }

    /* 5. Botón de Tarjetas: Agregar a Cotización B2B (Home y Tienda) */
    button.roxvan-shop-quote-pill {
        all: unset !important;
        box-sizing: border-box !important;
        position: absolute !important;
        bottom: 8px !important;
        right: 8px !important;
        width: 25px !important;
        height: 25px !important;
        min-width: 25px !important;
        min-height: 25px !important;
        border-radius: 50% !important;
        background: rgba(15, 23, 42, 0.85) !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
        color: #38bdf8 !important;
        border: 1px solid rgba(255, 255, 255, 0.22) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        z-index: 16 !important;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.22) !important;
        opacity: 0.9 !important;
    }
    button.roxvan-shop-quote-pill svg {
        width: 13px !important;
        height: 13px !important;
        stroke: #38bdf8 !important;
    }
    button.roxvan-shop-quote-pill:hover {
        background: #0f172a !important;
        color: #ffffff !important;
        border-color: #38bdf8 !important;
        opacity: 1 !important;
        transform: scale(1.1) !important;
    }
    button.roxvan-shop-quote-pill.is-added {
        background: #16a34a !important;
        border-color: #16a34a !important;
    }
    button.roxvan-shop-quote-pill.is-added svg {
        stroke: #ffffff !important;
    }
    @media (hover: hover) {
        .product-inner .roxvan-shop-quote-pill,
        .product-item .roxvan-shop-quote-pill,
        .motta-product-card .roxvan-shop-quote-pill,
        .product.type-product .roxvan-shop-quote-pill {
            opacity: 0 !important;
            transform: translateY(4px) !important;
        }
        .product-inner:hover .roxvan-shop-quote-pill,
        .product-item:hover .roxvan-shop-quote-pill,
        .motta-product-card:hover .roxvan-shop-quote-pill,
        .product.type-product:hover .roxvan-shop-quote-pill {
            opacity: 1 !important;
            transform: translateY(0) !important;
        }
    }


    /* Roxvan Global Toast Notification */
    .roxvan-global-toast {
        position: fixed !important;
        top: 85px !important;
        left: 50% !important;
        transform: translateX(-50%) translateY(-25px) !important;
        background: #0f172a !important;
        color: #ffffff !important;
        padding: 12px 24px !important;
        border-radius: 30px !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        z-index: 100000005 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        display: none;
        align-items: center !important;
        gap: 12px !important;
        transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
        font-family: -apple-system, BlinkMacSystemFont, 'Plus Jakarta Sans', sans-serif !important;
    }
    .roxvan-global-toast.is-visible {
        opacity: 1 !important;
        transform: translateX(-50%) translateY(0) !important;
        pointer-events: auto !important;
    }
    .roxvan-global-toast a {
        background: #facc15 !important;
        color: #0f172a !important;
        font-size: 11.5px !important;
        font-weight: 800 !important;
        padding: 4px 12px !important;
        border-radius: 20px !important;
        text-decoration: none !important;
        margin-left: 6px !important;
        display: inline-block !important;
        transition: background 0.15s !important;
    }
    .roxvan-global-toast a:hover {
        background: #eab308 !important;
    }

    /* Estilo del botón flotante en tarjetas */
    button.roxvan-shop-quote-pill {
        display: inline-flex !important;
        opacity: 0.95 !important;
    }


    /* ─── BANNER DINÁMICO DE DESCUENTO POR VOLUMEN EN DRAWER ─── */
    .roxvan-qv-dynamic-savings-banner {
        margin-top: 10px !important;
        padding: 8px 12px !important;
        border-radius: 8px !important;
        font-size: 11.5px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        animation: roxvanAlertPop 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
        transition: all 0.2s ease !important;
    }
    @keyframes roxvanAlertPop {
        from { opacity: 0; transform: scale(0.96) translateY(-2px); }
        to { opacity: 1; transform: scale(1) translateY(0); }
    }
    .roxvan-qv-dynamic-savings-banner.nudge-savings {
        background: #fef3c7 !important;
        border: 1px solid #fde68a !important;
        color: #92400e !important;
    }
    .roxvan-qv-dynamic-savings-banner.active-business {
        background: #ecfdf5 !important;
        border: 1px solid #a7f3d0 !important;
        color: #065f46 !important;
    }
    .roxvan-qv-dynamic-savings-banner.active-wholesale {
        background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
        border: 1px solid #fca5a5 !important;
        color: #991b1b !important;
        box-shadow: 0 2px 8px rgba(220, 38, 38, 0.12) !important;
    }
    .roxvan-qv-dynamic-savings-banner strong {
        font-weight: 800 !important;
    }

    /* ─── CONTENEDOR DE ACCIONES EN TARJETAS DE PRODUCTOS (HOME, CATÁLOGO, COMPLEMENTARIOS, RELACIONADOS) ─── */
    .roxvan-shop-card-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px !important;
        width: 100% !important;
        margin-top: 8px !important;
        padding-top: 6px !important;
        border-top: 1px dashed #e2e8f0 !important;
        box-sizing: border-box !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .roxvan-shop-btn-view {
        all: unset !important;
        box-sizing: border-box !important;
        flex: 1 !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        background: #f8fafc !important;
        border: 1.2px solid #cbd5e1 !important;
        border-radius: 6px !important;
        color: #1e293b !important;
        font-family: -apple-system, BlinkMacSystemFont, 'Plus Jakarta Sans', sans-serif !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        cursor: pointer !important;
        text-align: center !important;
        white-space: nowrap !important;
        transition: all 0.18s ease !important;
    }
    .roxvan-shop-btn-view svg {
        width: 13px !important;
        height: 13px !important;
        stroke: #475569 !important;
        flex-shrink: 0 !important;
        display: inline-block !important;
        vertical-align: middle !important;
    }
    .roxvan-shop-btn-view:hover {
        background: #dc2626 !important;
        border-color: #dc2626 !important;
        color: #ffffff !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25) !important;
    }
    .roxvan-shop-btn-view:hover svg {
        stroke: #ffffff !important;
    }
    .roxvan-shop-btn-quote {
        all: unset !important;
        box-sizing: border-box !important;
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        background: #0f172a !important;
        border: 1px solid #0f172a !important;
        border-radius: 6px !important;
        color: #ffffff !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        transition: all 0.18s ease !important;
    }
    .roxvan-shop-btn-quote svg {
        width: 13px !important;
        height: 13px !important;
        stroke: #ffffff !important;
        flex-shrink: 0 !important;
    }
    .roxvan-shop-btn-quote:hover {
        background: #1e293b !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25) !important;
    }
    .roxvan-shop-btn-quote.is-added {
        background: #16a34a !important;
        border-color: #16a34a !important;
    }
    .roxvan-shop-btn-quote.is-added svg {
        stroke: #ffffff !important;
    }

    /* Adaptación para Complementarios (.roxvan-cs-item) */
    .roxvan-cs-item {
        position: relative !important;
    }
    .roxvan-cs-item .roxvan-shop-card-actions {
        margin-top: 4px !important;
        padding-top: 4px !important;
    }
    .roxvan-cs-item .roxvan-shop-btn-view {
        height: 26px !important;
        min-height: 26px !important;
        font-size: 10px !important;
    }
    .roxvan-cs-item .roxvan-shop-btn-quote {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
    }

    /* Adaptación para Relacionados (.related-product-item) */
    .related-product-item {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .related-product-item .roxvan-shop-card-actions {
        margin-top: auto !important;
        padding: 8px 10px 10px 10px !important;
    }