/* =============================================================================
   BOTISALAS UI — Sistema de Diseño Global v1.2.3
   Cubre: WooCommerce · Elementor · Core Blocks · Formularios · Footer · Nav
   =============================================================================

   ESCAPE HATCHES — agrega estas clases en el Elementor editor a cualquier
   sección/columna/widget para romper el override del plugin:
     .bsu-transparent  → fondo transparente (hereda el del body oscuro)
     .bsu-light        → fondo claro #1a1a1a (sutil diferencia)
     .bsu-white        → fondo #ffffff (para secciones expresamente blancas)
     .bsu-no-override  → cancela TODOS los overrides del plugin en ese elemento
   ============================================================================= */


/* =============================================================================
   1. DESIGN TOKENS
   ============================================================================= */
:root {
  --bsu-red:          #CC0000;
  --bsu-red-hover:    #aa0000;
  --bsu-red-glow:     rgba(204, 0, 0, 0.35);
  --bsu-gold:         #C9A84C;
  --bsu-gold-light:   #e0c070;

  --bsu-bg:           #0a0a0a;
  --bsu-bg-card:      #111111;
  --bsu-bg-surface:   #1a1a1a;
  --bsu-bg-elevated:  #222222;

  --bsu-text:         #f0f0f0;
  --bsu-text-muted:   #909090;
  --bsu-text-faint:   #555555;
  --bsu-border:       #2a2a2a;
  --bsu-border-focus: #CC0000;

  --bsu-radius:       8px;
  --bsu-radius-sm:    4px;
  --bsu-radius-lg:    12px;
  --bsu-radius-pill:  999px;

  --bsu-transition:   0.22s ease;
  --bsu-transition-slow: 0.4s ease;

  --bsu-shadow:       0 4px 20px rgba(0, 0, 0, 0.6);
  --bsu-shadow-hover: 0 8px 32px rgba(204, 0, 0, 0.3);
  --bsu-shadow-card:  0 2px 12px rgba(0, 0, 0, 0.5);
}


/* =============================================================================
   2. BASE GLOBAL
   ============================================================================= */
html,
body {
  background-color: var(--bsu-bg) !important;
  color: var(--bsu-text);
}

/* Wrappers de página → transparentes para dejar ver el bg oscuro */
.site, .site-content, #page, #content, .page-content,
.entry-content, .wp-site-blocks, main, article,
.page-wrapper, .content-wrapper, #main {
  background-color: transparent !important;
}

/* Tipografía global */
h1, h2, h3, h4, h5, h6 {
  color: var(--bsu-text);
}

p, li, span, td, th {
  color: inherit;
}

a {
  color: var(--bsu-red);
  transition: color var(--bsu-transition);
}

a:hover {
  color: var(--bsu-gold);
  text-decoration: none;
}

/* Scrollbar personalizada */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bsu-bg);
}
::-webkit-scrollbar-thumb {
  background-color: var(--bsu-border);
  border-radius: 4px;
  transition: background-color var(--bsu-transition);
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--bsu-red);
}


/* =============================================================================
   3. BARRA DE ANUNCIO (wp_body_open)
   ============================================================================= */
.bsu-announcement-bar {
  background-color: var(--bsu-red);
  color: #fff;
  text-align: center;
  padding: 9px 48px 9px 16px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  position: relative;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.bsu-announcement-bar strong {
  color: var(--bsu-gold-light);
  font-weight: 700;
}

.bsu-ann-close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,0.75);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1;
  transition: color var(--bsu-transition);
}

.bsu-ann-close:hover {
  color: #fff;
}

@media (max-width: 600px) {
  .bsu-announcement-bar {
    font-size: 11px;
    padding: 7px 40px 7px 10px;
  }
}


/* =============================================================================
   4. ADMIN BAR — CSS fallback (el PHP hook es la protección principal)
   ============================================================================= */
#wpadminbar {
  display: none !important;
}

html.admin-bar {
  margin-top: 0 !important;
}

html.admin-bar body {
  margin-top: 0 !important;
}


/* =============================================================================
   5. SISTEMA DE BOTONES GLOBAL
   Cubre: WooCommerce · Elementor · WordPress Blocks · HTML nativo
   ============================================================================= */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce a.add_to_cart_button,
.woocommerce button.add_to_cart_button,
.add_to_cart_button,
.single_add_to_cart_button,
.woocommerce-cart .checkout-button,
.woocommerce-checkout #place_order,
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button,
.elementor-button,
.elementor-button-wrapper .elementor-button,
.wp-block-button__link,
.wp-element-button,
input[type="submit"],
button[type="submit"] {
  background-color: var(--bsu-red) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--bsu-radius-sm) !important;
  transition: background-color var(--bsu-transition), transform var(--bsu-transition), box-shadow var(--bsu-transition) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .single_add_to_cart_button:hover,
.add_to_cart_button:hover,
.single_add_to_cart_button:hover,
.woocommerce-cart .checkout-button:hover,
.woocommerce-checkout #place_order:hover,
.wc-block-components-button:hover,
.elementor-button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background-color: var(--bsu-red-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--bsu-shadow-hover) !important;
  color: #ffffff !important;
}

/* Estado loading/disabled */
.add_to_cart_button.loading,
.woocommerce .button.loading,
.woocommerce .button:disabled,
.woocommerce .button[disabled] {
  opacity: 0.65 !important;
  transform: none !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* Botón "Ver carrito" que aparece después de añadir */
.woocommerce-message .button,
.woocommerce-info .button {
  background-color: var(--bsu-red) !important;
  color: #fff !important;
  float: right;
}

/* Botones secundarios / outline — se pueden agregar clases .bsu-secondary en Elementor */
.elementor-button.bsu-secondary,
.wp-block-button__link.bsu-secondary {
  background-color: transparent !important;
  border: 2px solid var(--bsu-red) !important;
  color: var(--bsu-red) !important;
}
.elementor-button.bsu-secondary:hover,
.wp-block-button__link.bsu-secondary:hover {
  background-color: var(--bsu-red) !important;
  color: #fff !important;
}

/* Botón dorado (acento premium) */
.elementor-button.bsu-gold,
.wp-block-button__link.bsu-gold {
  background-color: var(--bsu-gold) !important;
  color: #000 !important;
}


/* =============================================================================
   6. FORMULARIOS GLOBALES
   ============================================================================= */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
  background-color: var(--bsu-bg-surface) !important;
  border: 1px solid var(--bsu-border) !important;
  color: var(--bsu-text) !important;
  border-radius: var(--bsu-radius-sm) !important;
  transition: border-color var(--bsu-transition), box-shadow var(--bsu-transition) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: var(--bsu-border-focus) !important;
  box-shadow: 0 0 0 2px rgba(204, 0, 0, 0.2) !important;
  outline: none !important;
}

::placeholder {
  color: var(--bsu-text-faint) !important;
  opacity: 1 !important;
}

label {
  color: var(--bsu-text) !important;
}

/* Checkbox y radio base */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--bsu-red);
}


/* =============================================================================
   7. ELEMENTOR — Secciones y Contenedores
   Se aplica !important para cubrir inline styles (style="background-color:#fff")
   que Elementor inyecta cuando el editor no tiene color asignado explícitamente.

   ESCAPE: agrega clase .bsu-transparent/.bsu-light/.bsu-white en el widget/sección
   para anular este override.
   ============================================================================= */

/* Top-level sections */
.elementor-section.elementor-top-section,
.e-con.e-con--top,
.e-full {
  background-color: var(--bsu-bg-card) !important;
}

/* Inner sections → transparentes para no apilar oscuridad */
.elementor-inner-section,
.e-con:not(.e-con--top) {
  background-color: transparent !important;
}

/* Column wraps */
.elementor-column-wrap,
.elementor-widget-wrap {
  background-color: transparent !important;
}

/* Clases de escape para secciones específicas */
.elementor-section.bsu-transparent,
.e-con.bsu-transparent,
.elementor-column.bsu-transparent {
  background-color: transparent !important;
}

.elementor-section.bsu-light,
.e-con.bsu-light {
  background-color: var(--bsu-bg-surface) !important;
}

.elementor-section.bsu-dark,
.e-con.bsu-dark {
  background-color: var(--bsu-bg) !important;
}

.elementor-section.bsu-white,
.e-con.bsu-white,
.bsu-white {
  background-color: #ffffff !important;
}

/* IMPORTANTE: una sección blanca DEBE voltear su texto a oscuro,
   o el texto claro global queda invisible (mismo bug, invertido). */
.bsu-white,
.bsu-white h1, .bsu-white h2, .bsu-white h3,
.bsu-white h4, .bsu-white h5, .bsu-white h6,
.bsu-white p, .bsu-white li, .bsu-white span,
.bsu-white label, .bsu-white td, .bsu-white th,
.bsu-white .elementor-heading-title,
.bsu-white .elementor-widget-text-editor,
.bsu-white .elementor-widget-text-editor p {
  color: #1a1a1a !important;
}

.bsu-white a:not(.button):not(.elementor-button):not(.wp-block-button__link) {
  color: var(--bsu-red) !important;
}

/* Secciones de color de marca */
.elementor-section.bsu-red,
.e-con.bsu-red {
  background-color: var(--bsu-red) !important;
}


/* =============================================================================
   8. ELEMENTOR — Widgets de Texto
   ============================================================================= */
.elementor-heading-title {
  color: var(--bsu-text) !important;
}

.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li,
.elementor-widget-text-editor span {
  color: var(--bsu-text-muted) !important;
}

.elementor-widget-text-editor a {
  color: var(--bsu-red) !important;
}

.elementor-widget-text-editor strong {
  color: var(--bsu-text) !important;
}


/* =============================================================================
   9. ELEMENTOR — Iconos, Divisores e Image Box
   ============================================================================= */
.elementor-icon i,
.elementor-icon svg {
  color: var(--bsu-red) !important;
  fill: var(--bsu-red) !important;
  transition: color var(--bsu-transition) !important;
}

.elementor-icon:hover i,
.elementor-icon:hover svg {
  color: var(--bsu-gold) !important;
  fill: var(--bsu-gold) !important;
}

.elementor-widget-divider .elementor-divider-separator {
  border-top-color: var(--bsu-border) !important;
}

.elementor-icon-box-title {
  color: var(--bsu-text) !important;
}

.elementor-icon-box-description {
  color: var(--bsu-text-muted) !important;
}

.elementor-image-box-title {
  color: var(--bsu-text) !important;
}

.elementor-image-box-description {
  color: var(--bsu-text-muted) !important;
}

/* Imágenes con radio */
.elementor-widget-image img,
.elementor-widget-image-box img {
  border-radius: var(--bsu-radius) !important;
  transition: transform var(--bsu-transition-slow), box-shadow var(--bsu-transition) !important;
}

.elementor-widget-image:hover img {
  transform: scale(1.02) !important;
  box-shadow: var(--bsu-shadow) !important;
}


/* =============================================================================
   10. ELEMENTOR — Accordion y Toggle
   ============================================================================= */
.elementor-accordion-title,
.elementor-toggle-title {
  color: var(--bsu-text) !important;
  background-color: var(--bsu-bg-surface) !important;
  border-color: var(--bsu-border) !important;
}

.elementor-accordion-title:hover,
.elementor-toggle-title:hover {
  background-color: var(--bsu-bg-elevated) !important;
}

.elementor-active .elementor-accordion-title,
.elementor-active .elementor-toggle-title {
  color: var(--bsu-red) !important;
  background-color: var(--bsu-bg-elevated) !important;
}

.elementor-accordion-icon,
.elementor-toggle-icon {
  color: var(--bsu-red) !important;
}

.elementor-accordion-content,
.elementor-tab-content {
  background-color: var(--bsu-bg-card) !important;
  color: var(--bsu-text-muted) !important;
  border-color: var(--bsu-border) !important;
}

/* Elementor Pro — Nested Accordion */
.e-n-accordion__item-title {
  background-color: var(--bsu-bg-surface) !important;
  color: var(--bsu-text) !important;
  border-color: var(--bsu-border) !important;
}

.e-n-accordion__item-content {
  background-color: var(--bsu-bg-card) !important;
}


/* =============================================================================
   11. ELEMENTOR — Tabs
   ============================================================================= */
.elementor-tabs-wrapper {
  border-bottom-color: var(--bsu-border) !important;
  background-color: transparent !important;
}

.elementor-tab-title {
  color: var(--bsu-text-muted) !important;
  border-color: var(--bsu-border) !important;
  background-color: var(--bsu-bg-surface) !important;
}

.elementor-tab-title:hover,
.elementor-tab-title.elementor-active {
  color: var(--bsu-red) !important;
  border-bottom-color: var(--bsu-red) !important;
  background-color: var(--bsu-bg-card) !important;
}

.elementor-tab-content {
  border-color: var(--bsu-border) !important;
}


/* =============================================================================
   12. ELEMENTOR — Testimonios, Alertas, Contadores
   ============================================================================= */
.elementor-testimonial-content,
.elementor-testimonial__content p {
  color: var(--bsu-text-muted) !important;
}

.elementor-testimonial-name,
.elementor-testimonial__name {
  color: var(--bsu-text) !important;
}

.elementor-testimonial-job,
.elementor-testimonial__title {
  color: var(--bsu-red) !important;
}

.elementor-alert {
  background-color: var(--bsu-bg-surface) !important;
  border-left-color: var(--bsu-red) !important;
  color: var(--bsu-text) !important;
  border-radius: var(--bsu-radius-sm) !important;
}

.elementor-counter-number-wrapper {
  color: var(--bsu-red) !important;
}

.elementor-counter-title {
  color: var(--bsu-text) !important;
}

/* Progress bar */
.elementor-progress-bar {
  background-color: var(--bsu-red) !important;
}

.elementor-progress-wrapper {
  background-color: var(--bsu-border) !important;
}

/* Star rating */
.elementor-star-rating i.fa-star,
.elementor-star-rating i.eicon-star-o {
  color: var(--bsu-gold) !important;
}


/* =============================================================================
   13. ELEMENTOR — Formularios (Pro)
   ============================================================================= */
.elementor-form .elementor-field-group input,
.elementor-form .elementor-field-group textarea,
.elementor-form .elementor-field-group select {
  background-color: var(--bsu-bg-surface) !important;
  border-color: var(--bsu-border) !important;
  color: var(--bsu-text) !important;
  border-radius: var(--bsu-radius-sm) !important;
}

.elementor-form .elementor-field-group input:focus,
.elementor-form .elementor-field-group textarea:focus {
  border-color: var(--bsu-border-focus) !important;
  box-shadow: 0 0 0 2px var(--bsu-red-glow) !important;
}

.elementor-form .elementor-field-label,
.elementor-form label {
  color: var(--bsu-text) !important;
}

.elementor-message.elementor-message-success {
  color: #4caf50 !important;
}

.elementor-message.elementor-message-danger {
  color: var(--bsu-red) !important;
}


/* =============================================================================
   14. ELEMENTOR — Cards y Loop Items (Pro)
   ============================================================================= */
.elementor-card,
.e-loop-item,
.elementor-loop-item .elementor-section {
  background-color: var(--bsu-bg-card) !important;
  border: 1px solid var(--bsu-border) !important;
  border-radius: var(--bsu-radius) !important;
  transition: transform var(--bsu-transition), box-shadow var(--bsu-transition), border-color var(--bsu-transition) !important;
}

.elementor-card:hover,
.e-loop-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--bsu-shadow-hover) !important;
  border-color: var(--bsu-red) !important;
}

.elementor-card__title {
  color: var(--bsu-text) !important;
}

.elementor-card__description,
.elementor-card__text-above {
  color: var(--bsu-text-muted) !important;
}


/* =============================================================================
   15. ELEMENTOR — Nav Menu (Pro)
   ============================================================================= */
.elementor-nav-menu a {
  color: var(--bsu-text) !important;
  transition: color var(--bsu-transition) !important;
}

.elementor-nav-menu a:hover,
.elementor-nav-menu .current-menu-item > a {
  color: var(--bsu-red) !important;
}

.elementor-nav-menu .sub-menu {
  background-color: var(--bsu-bg-elevated) !important;
  border: 1px solid var(--bsu-border) !important;
  border-radius: var(--bsu-radius-sm) !important;
}

.elementor-nav-menu .sub-menu a {
  color: var(--bsu-text-muted) !important;
}

.elementor-nav-menu .sub-menu a:hover {
  color: var(--bsu-red) !important;
  background-color: var(--bsu-bg-surface) !important;
}

/* Hamburger/mobile toggle */
.elementor-menu-toggle {
  color: var(--bsu-text) !important;
}


/* =============================================================================
   16. WOOCOMMERCE — Grid de Productos
   ============================================================================= */
.woocommerce,
.woocommerce-page {
  background-color: transparent !important;
}

ul.products,
.products,
.wc-block-grid,
.wc-block-product-template {
  background-color: transparent !important;
}

/* Cards de producto */
ul.products li.product,
.wc-block-grid__product {
  background-color: var(--bsu-bg-card) !important;
  border: 1px solid var(--bsu-border) !important;
  border-radius: var(--bsu-radius) !important;
  overflow: hidden !important;
  transition: transform var(--bsu-transition), box-shadow var(--bsu-transition), border-color var(--bsu-transition) !important;
  padding-bottom: 0 !important;
}

ul.products li.product:hover,
.wc-block-grid__product:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--bsu-shadow-hover) !important;
  border-color: var(--bsu-red) !important;
}

/* Imagen con zoom en hover */
ul.products li.product a img,
ul.products li.product img,
.wc-block-grid__product-image img {
  display: block !important;
  width: 100% !important;
  transition: transform var(--bsu-transition-slow) !important;
}

ul.products li.product:hover a img,
ul.products li.product:hover img {
  transform: scale(1.07) !important;
}

/* Área de texto de la card */
ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
  color: var(--bsu-text) !important;
  padding: 12px 14px 4px !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
  letter-spacing: 0.01em !important;
}

/* Precio en card */
ul.products li.product .price,
.wc-block-grid__product-price {
  padding: 2px 14px !important;
  color: var(--bsu-text) !important;
}

ul.products li.product .price ins,
ul.products li.product .price ins .woocommerce-Price-amount {
  color: var(--bsu-red) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

ul.products li.product .price del,
ul.products li.product .price del .woocommerce-Price-amount {
  color: var(--bsu-text-faint) !important;
  font-size: 0.85em !important;
}

/* Botón añadir al carrito dentro de la card */
ul.products li.product .add_to_cart_button,
ul.products li.product a.button {
  display: block !important;
  width: calc(100% - 28px) !important;
  margin: 10px 14px 14px !important;
  text-align: center !important;
  padding: 10px !important;
}

/* Badge OFERTA — override WooCommerce default */
.woocommerce span.onsale,
.woocommerce ul.products li.product span.onsale {
  background-color: var(--bsu-red) !important;
  color: #fff !important;
  border-radius: 50% !important;
  min-width: 44px !important;
  min-height: 44px !important;
  line-height: 44px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  top: 8px !important;
  left: auto !important;
  right: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}

/* Resultados / ordenar */
.woocommerce-result-count,
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a,
.woocommerce-ordering select {
  color: var(--bsu-text-muted) !important;
}

.woocommerce-ordering select {
  background-color: var(--bsu-bg-surface) !important;
  border-color: var(--bsu-border) !important;
}

/* Paginación */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  background-color: var(--bsu-bg-surface) !important;
  color: var(--bsu-text) !important;
  border-color: var(--bsu-border) !important;
  border-radius: var(--bsu-radius-sm) !important;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background-color: var(--bsu-red) !important;
  color: #fff !important;
  border-color: var(--bsu-red) !important;
}


/* =============================================================================
   17. WOOCOMMERCE — Página de Producto Individual
   ============================================================================= */
.woocommerce div.product {
  background-color: transparent !important;
}

.woocommerce div.product .product_title,
h1.product_title {
  color: var(--bsu-text) !important;
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
  font-weight: 700 !important;
  text-transform: capitalize !important;
  letter-spacing: 0.01em !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--bsu-text) !important;
  font-size: 1.5rem !important;
}

.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
  color: var(--bsu-red) !important;
  text-decoration: none !important;
}

.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
  color: var(--bsu-text-faint) !important;
}

.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-product-details__short-description p {
  color: var(--bsu-text-muted) !important;
}

/* Tabs de producto */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  background-color: transparent !important;
  border-bottom-color: var(--bsu-border) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background-color: var(--bsu-bg-surface) !important;
  border-color: var(--bsu-border) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background-color: var(--bsu-bg-card) !important;
  border-bottom-color: var(--bsu-bg-card) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  color: var(--bsu-text-muted) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--bsu-text) !important;
}

.woocommerce div.product .woocommerce-tabs .panel {
  background-color: var(--bsu-bg-card) !important;
  border-color: var(--bsu-border) !important;
  border-top: none !important;
  color: var(--bsu-text-muted) !important;
  border-radius: 0 0 var(--bsu-radius) var(--bsu-radius) !important;
  padding: 24px !important;
}

/* Rating */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
  color: var(--bsu-gold) !important;
}

/* Galería */
.woocommerce-product-gallery__wrapper {
  border-radius: var(--bsu-radius) !important;
  overflow: hidden !important;
}

.woocommerce-product-gallery__image img {
  border-radius: var(--bsu-radius) !important;
}

/* Thumbnails */
.woocommerce-product-gallery .flex-control-thumbs li img {
  border-radius: var(--bsu-radius-sm) !important;
  border: 2px solid transparent !important;
  transition: border-color var(--bsu-transition) !important;
}

.woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs li img:hover {
  border-color: var(--bsu-red) !important;
}

/* Stock status */
.woocommerce-product-details .stock.in-stock {
  color: #4caf50 !important;
}

.woocommerce-product-details .stock.out-of-stock {
  color: var(--bsu-text-muted) !important;
}

/* Relacionados y upsells */
.related.products > h2,
.upsells.products > h2,
.cross-sells > h2 {
  color: var(--bsu-text) !important;
  font-size: 1.3rem !important;
  border-bottom: 2px solid var(--bsu-red) !important;
  padding-bottom: 8px !important;
  display: inline-block !important;
}


/* =============================================================================
   18. WOOCOMMERCE — Carrito
   ============================================================================= */
.woocommerce-cart-form,
.cart-collaterals {
  background-color: transparent !important;
}

/* Tabla del carrito */
.woocommerce table.cart,
.woocommerce table.shop_table {
  background-color: var(--bsu-bg-card) !important;
  border-radius: var(--bsu-radius) !important;
  overflow: hidden !important;
  border-color: var(--bsu-border) !important;
}

.woocommerce table.cart thead th,
.woocommerce table.shop_table thead th {
  background-color: var(--bsu-bg-surface) !important;
  color: var(--bsu-text) !important;
  border-bottom-color: var(--bsu-border) !important;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}

.woocommerce table.cart tbody td,
.woocommerce table.shop_table tbody td {
  background-color: transparent !important;
  color: var(--bsu-text) !important;
  border-color: var(--bsu-border) !important;
}

.woocommerce table.cart .product-name a,
.woocommerce table.shop_table .product-name a {
  color: var(--bsu-text) !important;
}

.woocommerce table.cart .product-name a:hover {
  color: var(--bsu-red) !important;
}

/* Totales del carrito */
.cart_totals,
.cart-collaterals .cart_totals {
  background-color: var(--bsu-bg-card) !important;
  border: 1px solid var(--bsu-border) !important;
  border-radius: var(--bsu-radius) !important;
  padding: 24px !important;
}

.cart_totals h2,
.cart_totals .order-total th,
.cart_totals .order-total td {
  color: var(--bsu-text) !important;
}

.cart_totals table.shop_table tr:last-child td,
.cart_totals .order-total .woocommerce-Price-amount {
  color: var(--bsu-red) !important;
  font-size: 1.2em !important;
  font-weight: 700 !important;
}

/* Input cupón */
.woocommerce .coupon input.input-text {
  background-color: var(--bsu-bg-surface) !important;
  border-color: var(--bsu-border) !important;
  color: var(--bsu-text) !important;
}

/* Cross sells */
.cross-sells {
  background-color: transparent !important;
}


/* =============================================================================
   19. WOOCOMMERCE — Checkout
   ============================================================================= */
.woocommerce-checkout .woocommerce {
  background-color: transparent !important;
}

#order_review_heading,
.woocommerce-checkout h3,
.woocommerce-checkout h2 {
  color: var(--bsu-text) !important;
}

.woocommerce-checkout label,
.woocommerce form .form-row label {
  color: var(--bsu-text) !important;
}

/* Caja de métodos de pago */
.woocommerce #payment {
  background-color: var(--bsu-bg-card) !important;
  border: 1px solid var(--bsu-border) !important;
  border-radius: var(--bsu-radius) !important;
}

.woocommerce #payment ul.payment_methods {
  border-bottom-color: var(--bsu-border) !important;
}

.woocommerce #payment ul.payment_methods li {
  border-bottom-color: var(--bsu-border) !important;
}

.woocommerce #payment ul.payment_methods li label {
  color: var(--bsu-text) !important;
}

.woocommerce #payment div.payment_box {
  background-color: var(--bsu-bg-surface) !important;
  color: var(--bsu-text-muted) !important;
}

.woocommerce #payment div.payment_box::before {
  border-bottom-color: var(--bsu-bg-surface) !important;
}

/* Resumen del pedido */
.woocommerce-checkout-review-order-table {
  background-color: var(--bsu-bg-card) !important;
  border-radius: var(--bsu-radius) !important;
  border-color: var(--bsu-border) !important;
}

.woocommerce-checkout-review-order-table thead th {
  background-color: var(--bsu-bg-surface) !important;
  color: var(--bsu-text) !important;
  border-color: var(--bsu-border) !important;
}

.woocommerce-checkout-review-order-table tbody td,
.woocommerce-checkout-review-order-table tfoot td,
.woocommerce-checkout-review-order-table tfoot th {
  color: var(--bsu-text) !important;
  border-color: var(--bsu-border) !important;
}

/* Aviso de privacidad */
.woocommerce-terms-and-conditions-wrapper,
.woocommerce-privacy-policy-text {
  color: var(--bsu-text-muted) !important;
}

.woocommerce-privacy-policy-text a {
  color: var(--bsu-red) !important;
}


/* =============================================================================
   20. WOOCOMMERCE — Mi Cuenta
   ============================================================================= */
.woocommerce-account .woocommerce {
  background-color: transparent !important;
}

.woocommerce-MyAccount-navigation ul {
  background-color: var(--bsu-bg-card) !important;
  border: 1px solid var(--bsu-border) !important;
  border-radius: var(--bsu-radius) !important;
  padding: 8px !important;
  list-style: none !important;
}

.woocommerce-MyAccount-navigation ul li a {
  color: var(--bsu-text-muted) !important;
  display: block !important;
  padding: 9px 14px !important;
  border-radius: var(--bsu-radius-sm) !important;
  transition: background-color var(--bsu-transition), color var(--bsu-transition) !important;
  text-decoration: none !important;
}

.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover {
  background-color: var(--bsu-red) !important;
  color: #fff !important;
}

.woocommerce-MyAccount-content {
  background-color: var(--bsu-bg-card) !important;
  border: 1px solid var(--bsu-border) !important;
  border-radius: var(--bsu-radius) !important;
  padding: 24px !important;
  color: var(--bsu-text) !important;
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  color: var(--bsu-text) !important;
  border-bottom: 1px solid var(--bsu-border) !important;
  padding-bottom: 8px !important;
  margin-bottom: 16px !important;
}


/* =============================================================================
   21. WOOCOMMERCE — Notices
   ============================================================================= */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  border-radius: var(--bsu-radius) !important;
  background-color: var(--bsu-bg-surface) !important;
  color: var(--bsu-text) !important;
  padding: 14px 18px !important;
  list-style: none !important;
}

.woocommerce-message {
  border-top-color: var(--bsu-red) !important;
}

.woocommerce-error {
  border-top-color: #e53935 !important;
}

.woocommerce-info {
  border-top-color: var(--bsu-gold) !important;
}

.woocommerce-message::before {
  color: var(--bsu-red) !important;
}

.woocommerce-info::before {
  color: var(--bsu-gold) !important;
}


/* =============================================================================
   22. PLUGIN BOTISALAS-FILTER — Overrides de color
   ============================================================================= */
.bsf-filter-panel,
.bsf-filter-sidebar,
.bsf-combo-sidebar {
  background-color: var(--bsu-bg-card) !important;
  border: 1px solid var(--bsu-border) !important;
  color: var(--bsu-text) !important;
}

.bsf-filter-title,
.bsf-section-title,
.bsf-group-title {
  color: var(--bsu-text) !important;
  border-bottom-color: var(--bsu-border) !important;
}

.bsf-chip {
  background-color: var(--bsu-bg-surface) !important;
  border: 1px solid var(--bsu-border) !important;
  color: var(--bsu-text-muted) !important;
  border-radius: var(--bsu-radius-pill) !important;
  transition: background-color var(--bsu-transition), color var(--bsu-transition), border-color var(--bsu-transition) !important;
}

.bsf-chip:hover,
.bsf-chip.active,
.bsf-chip[aria-pressed="true"] {
  background-color: var(--bsu-red) !important;
  border-color: var(--bsu-red) !important;
  color: #fff !important;
}

/* Slider de precio → rojo */
.noUi-connect,
.bsf-price-slider .noUi-connect {
  background: var(--bsu-red) !important;
}

.noUi-handle {
  border-color: var(--bsu-red) !important;
  background: var(--bsu-bg-surface) !important;
  box-shadow: 0 0 0 2px var(--bsu-red) !important;
}

.noUi-target {
  background-color: var(--bsu-border) !important;
  border-color: transparent !important;
}

.bsf-product-card {
  background-color: var(--bsu-bg-card) !important;
  border-color: var(--bsu-border) !important;
}

/* Campo de búsqueda del filtro */
.bsf-search-input,
.bsf-filter-search {
  background-color: var(--bsu-bg-surface) !important;
  border-color: var(--bsu-border) !important;
  color: var(--bsu-text) !important;
}

/* Modal mobile del filtro */
.bsf-modal-overlay {
  background-color: rgba(0,0,0,0.85) !important;
}

.bsf-modal-panel {
  background-color: var(--bsu-bg-card) !important;
  border-color: var(--bsu-border) !important;
}


/* =============================================================================
   23. PLUGIN BOTISALAS-EXTRAS — Badge de descuento mejorado
   ============================================================================= */
.botisalas-badge {
  border-radius: 50% !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
  line-height: 1 !important;
  text-align: center !important;
}


/* =============================================================================
   24. NAVEGACIÓN GLOBAL
   ============================================================================= */
.site-header,
#masthead,
header.site-header {
  background-color: var(--bsu-bg) !important;
  border-bottom: 1px solid var(--bsu-border) !important;
}

nav a,
.nav-menu a,
.main-navigation a,
.navigation a {
  color: var(--bsu-text) !important;
  transition: color var(--bsu-transition) !important;
}

nav a:hover,
.nav-menu a:hover,
.main-navigation a:hover {
  color: var(--bsu-red) !important;
}

.current-menu-item > a,
.current_page_item > a {
  color: var(--bsu-red) !important;
}

/* Submenús dropdown */
.sub-menu,
.dropdown-menu {
  background-color: var(--bsu-bg-elevated) !important;
  border: 1px solid var(--bsu-border) !important;
  border-radius: var(--bsu-radius-sm) !important;
  box-shadow: var(--bsu-shadow) !important;
}

.sub-menu a,
.dropdown-menu a {
  color: var(--bsu-text-muted) !important;
  border-bottom: 1px solid var(--bsu-border) !important;
}

.sub-menu a:hover,
.dropdown-menu a:hover {
  background-color: var(--bsu-bg-surface) !important;
  color: var(--bsu-red) !important;
}

/* Migas de pan */
.breadcrumb,
.woocommerce-breadcrumb {
  color: var(--bsu-text-muted) !important;
  font-size: 0.85rem !important;
}

.breadcrumb a,
.woocommerce-breadcrumb a {
  color: var(--bsu-text-muted) !important;
}

.breadcrumb a:hover,
.woocommerce-breadcrumb a:hover {
  color: var(--bsu-red) !important;
}


/* =============================================================================
   25. FOOTER
   ============================================================================= */
.site-footer,
footer,
#colophon {
  background-color: #050505 !important;
  border-top: 1px solid var(--bsu-border) !important;
  color: var(--bsu-text-muted) !important;
}

footer h1, footer h2, footer h3, footer h4, footer h5,
.site-footer h1, .site-footer h2, .site-footer h3 {
  color: var(--bsu-text) !important;
  font-size: 0.9rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 12px !important;
}

footer a,
.site-footer a {
  color: var(--bsu-text-muted) !important;
  text-decoration: none !important;
  transition: color var(--bsu-transition) !important;
}

footer a:hover,
.site-footer a:hover {
  color: var(--bsu-red) !important;
}

/* Listas del footer */
footer ul,
.site-footer ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

footer ul li,
.site-footer ul li {
  padding: 5px 0 !important;
  border-bottom: 1px solid var(--bsu-border) !important;
  font-size: 0.88rem !important;
}

footer ul li:last-child,
.site-footer ul li:last-child {
  border-bottom: none !important;
}

/* Copyright bar */
.site-info,
.footer-bottom,
.copyright {
  background-color: #000 !important;
  color: var(--bsu-text-faint) !important;
  font-size: 0.8rem !important;
  border-top: 1px solid var(--bsu-border) !important;
  padding: 12px !important;
  text-align: center !important;
}


/* =============================================================================
   26. WORDPRESS CORE BLOCKS (Gutenberg)
   ============================================================================= */
/* Cita */
.wp-block-quote {
  border-left: 3px solid var(--bsu-red) !important;
  background-color: var(--bsu-bg-surface) !important;
  color: var(--bsu-text-muted) !important;
  border-radius: 0 var(--bsu-radius-sm) var(--bsu-radius-sm) 0 !important;
  padding: 16px 20px !important;
}

.wp-block-quote cite,
.wp-block-quote footer {
  color: var(--bsu-text-faint) !important;
}

/* Separador */
.wp-block-separator {
  border-color: var(--bsu-border) !important;
}

/* Tabla */
.wp-block-table table {
  border-color: var(--bsu-border) !important;
  color: var(--bsu-text) !important;
}

.wp-block-table thead,
.wp-block-table th {
  background-color: var(--bsu-bg-surface) !important;
  color: var(--bsu-text) !important;
  border-color: var(--bsu-border) !important;
}

.wp-block-table td {
  border-color: var(--bsu-border) !important;
}

/* Código */
.wp-block-code,
pre,
code {
  background-color: var(--bsu-bg-surface) !important;
  color: var(--bsu-gold) !important;
  border: 1px solid var(--bsu-border) !important;
  border-radius: var(--bsu-radius-sm) !important;
}

/* Columnas */
.wp-block-columns {
  color: var(--bsu-text-muted) !important;
}

/* Cover */
.wp-block-cover__inner-container h1,
.wp-block-cover__inner-container h2,
.wp-block-cover__inner-container p {
  color: #fff !important;
}

/* Search */
.wp-block-search__input {
  background-color: var(--bsu-bg-surface) !important;
  border-color: var(--bsu-border) !important;
  color: var(--bsu-text) !important;
}


/* =============================================================================
   27. MICRO-FEEDBACK — clases que JS añade dinámicamente
   ============================================================================= */
.bsu-added-feedback {
  background-color: #1e7e34 !important;
  transform: translateY(-2px) !important;
}

.bsu-added-feedback::after {
  content: ' ✓' !important;
}


/* =============================================================================
   28. RESPONSIVE
   ============================================================================= */
@media (max-width: 768px) {
  .bsu-announcement-bar {
    font-size: 11px;
    padding: 7px 36px 7px 10px;
  }

  ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.85rem !important;
  }

  .woocommerce-MyAccount-content {
    padding: 16px !important;
  }

  .cart_totals {
    padding: 16px !important;
  }
}

@media (max-width: 480px) {
  .woocommerce table.cart thead {
    display: none;
  }

  .woocommerce table.cart td {
    display: block;
    width: 100%;
  }
}


/* =============================================================================
   ███  v1.1.0 — FIXES DE CONSISTENCIA (cargado al final = gana la cascada)  ███
   Decisiones: tile blanco intencional · negro premium plano · cobertura máxima
   ============================================================================= */


/* -----------------------------------------------------------------------------
   29. TILE BLANCO INTENCIONAL — imágenes de producto
   Las fotos tienen fondo blanco horneado. En vez de pelear contra eso, lo
   convertimos en una tarjeta blanca redondeada deliberada (patrón premium).
   ----------------------------------------------------------------------------- */

/* --- Grid de la tienda y home --- */
ul.products li.product a img,
ul.products li.product img,
.wc-block-grid__product-image img {
  background-color: #ffffff !important;
  border-radius: var(--bsu-radius) !important;
  padding: 14px !important;
  box-sizing: border-box !important;
  margin: 12px 12px 0 !important;
  width: calc(100% - 24px) !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
}

/* El hover de zoom ahora se aplica suave dentro del tile blanco */
ul.products li.product:hover a img,
ul.products li.product:hover img {
  transform: scale(1.04) !important;
}

/* --- Página de producto individual: galería como tile blanco --- */
.woocommerce div.product .woocommerce-product-gallery {
  background-color: #ffffff !important;
  border-radius: var(--bsu-radius-lg) !important;
  padding: 24px !important;
  box-sizing: border-box !important;
}

.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__image {
  background-color: #ffffff !important;
  border-radius: var(--bsu-radius) !important;
}

.woocommerce-product-gallery__image img,
.woocommerce div.product .woocommerce-product-gallery img {
  background-color: #ffffff !important;
  border-radius: var(--bsu-radius) !important;
  object-fit: contain !important;
  width: 100% !important;
  height: auto !important;
  min-height: 1px !important; /* fix imagen colapsada 1x32 */
}

/* Thumbnails de la galería también sobre tile blanco */
.woocommerce-product-gallery .flex-control-thumbs li img {
  background-color: #ffffff !important;
  padding: 6px !important;
  box-sizing: border-box !important;
}

/* Lupa de zoom: que se vea sobre el tile blanco */
.woocommerce-product-gallery__trigger {
  background-color: var(--bsu-red) !important;
  border-radius: 50% !important;
  z-index: 9 !important;
}
.woocommerce-product-gallery__trigger::before {
  border-color: #fff !important;
}
.woocommerce-product-gallery__trigger::after {
  background-color: #fff !important;
}


/* -----------------------------------------------------------------------------
   30. OCULTAR TEXTO SCREEN-READER QUE SE FILTRA EN EL PRECIO
   "El Precio Original Era: ... El Precio Actual Es: ..." no debe ser visible.
   ----------------------------------------------------------------------------- */
.screen-reader-text,
.woocommerce .screen-reader-text,
.price .screen-reader-text,
bdi .screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* -----------------------------------------------------------------------------
   31. STOCK LEGIBLE — verde en vez del dorado opaco rgb(149,142,9)
   ----------------------------------------------------------------------------- */
.woocommerce div.product .stock,
.woocommerce .stock,
.stock.in-stock,
p.stock.in-stock {
  color: #45c463 !important;
  font-weight: 600 !important;
}

.stock.out-of-stock {
  color: var(--bsu-text-muted) !important;
}


/* -----------------------------------------------------------------------------
   32. AVISOS WOOCOMMERCE — sin glyph roto (□)
   El ícono de fuente WooCommerce a veces no carga sobre tema oscuro y muestra
   un cuadro vacío. Lo reemplazamos por un borde-acento limpio sin pseudo-ícono.
   ----------------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce-store-notice {
  background-color: var(--bsu-bg-surface) !important;
  color: var(--bsu-text) !important;
  border-left: 4px solid var(--bsu-red) !important;
  border-top: none !important;
  border-radius: var(--bsu-radius-sm) !important;
  padding: 14px 18px !important;
  list-style: none !important;
}

.woocommerce-info {
  border-left-color: var(--bsu-gold) !important;
}

/* Eliminar el pseudo-ícono que se rompe */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-noreviews::before {
  display: none !important;
  content: none !important;
}

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
  color: var(--bsu-gold) !important;
  font-weight: 600 !important;
}


/* -----------------------------------------------------------------------------
   33. PRODUCTO INDIVIDUAL — galería llena su columna Elementor
   IMPORTANTE: el sitio usa un TEMPLATE ELEMENTOR para el producto, donde la
   imagen y el resumen ya están en columnas separadas. NO imponemos nuestro
   propio flexbox (eso encogía la galería a 44% del widget → espacio vacío).
   En su lugar: forzamos la galería y la imagen a llenar el ancho del widget.
   ----------------------------------------------------------------------------- */

/* WooCommerce mete float:left;width:48% por defecto (layout clásico).
   Dentro del widget Elementor eso deja la imagen pequeña a la izquierda.
   La anulamos para que ocupe el 100% de su columna. */
.elementor-widget-woocommerce-product-images .woocommerce-product-gallery,
.elementor-widget-woocommerce-product-images div.product .woocommerce-product-gallery,
body.bsu-active .elementor-widget-woocommerce-product-images .woocommerce-product-gallery {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

/* La imagen llena el tile blanco (cap a 560px: el origen es 1000px, sin pixelar) */
.elementor-widget-woocommerce-product-images .woocommerce-product-gallery__image img,
.elementor-widget-woocommerce-product-images .woocommerce-product-gallery img,
body.bsu-active .elementor-widget-woocommerce-product-images .woocommerce-product-gallery img {
  width: 100% !important;
  max-width: 560px !important;
  height: auto !important;
  margin: 0 auto !important;
  display: block !important;
}

/* El wrapper de la galería centrado dentro de la columna */
.elementor-widget-woocommerce-product-images .woocommerce-product-gallery__wrapper {
  width: 100% !important;
  margin: 0 auto !important;
}

/* FALLBACK layout clásico (por si algún producto NO usa template Elementor):
   solo aplica cuando la galería es hija directa de div.product en .single-product
   y NO está dentro de un widget Elementor. */
.single-product div.product:not(.elementor-widget-container) > .woocommerce-product-gallery {
  margin-bottom: 0 !important;
}


/* -----------------------------------------------------------------------------
   34. COBERTURA MÁXIMA ELEMENTOR — body.bsu-active sube la especificidad
   Prefijo body.bsu-active = (0,2,1) → vence a los inline styles de Elementor
   (.elementor-element-XXX = 0,1,0) incluso cuando ambos usan !important.
   ----------------------------------------------------------------------------- */

/* Secciones y contenedores top-level → fondo del tema */
body.bsu-active .elementor-section.elementor-top-section:not(.bsu-light):not(.bsu-white):not(.bsu-transparent):not(.bsu-red),
body.bsu-active .e-con.e-con--top:not(.bsu-light):not(.bsu-white):not(.bsu-transparent):not(.bsu-red) {
  background-color: var(--bsu-bg) !important;
}

/* Texto general dentro de Elementor → claro */
body.bsu-active .elementor-widget-heading .elementor-heading-title,
body.bsu-active .elementor-widget-text-editor,
body.bsu-active .elementor-widget-text-editor p,
body.bsu-active .elementor-widget-text-editor li {
  color: var(--bsu-text) !important;
}

/* Botones Elementor → rojo marca, sin importar config del widget */
body.bsu-active .elementor-button,
body.bsu-active .elementor-button-wrapper .elementor-button {
  background-color: var(--bsu-red) !important;
  color: #fff !important;
}
body.bsu-active .elementor-button:hover {
  background-color: var(--bsu-red-hover) !important;
}

/* Iconos Elementor → rojo marca */
body.bsu-active .elementor-icon i,
body.bsu-active .elementor-icon svg {
  color: var(--bsu-red) !important;
  fill: var(--bsu-red) !important;
}

/* Headings de WooCommerce renderizados por Elementor */
body.bsu-active .elementor-widget-woocommerce-product-title h1,
body.bsu-active .elementor-widget-woocommerce-product-price .price {
  color: var(--bsu-text) !important;
}


/* -----------------------------------------------------------------------------
   35. HEADER STICKY — fallback CSS por si no se configuró en Elementor
   (Lo ideal sigue siendo activarlo en Theme Builder, pero esto lo asegura.)
   ----------------------------------------------------------------------------- */
body.bsu-active [data-elementor-type="header"],
body.bsu-active header.site-header,
body.bsu-active #masthead {
  position: sticky !important;
  top: 0 !important;
  z-index: 9990 !important;
  background-color: var(--bsu-bg) !important;
}

/* La barra de anuncio queda encima del header sticky */
.bsu-announcement-bar {
  position: relative;
  z-index: 9995;
}


/* -----------------------------------------------------------------------------
   36. BADGE DE OFERTA — refuerzo del círculo rojo (por si extras no lo pinta)
   ----------------------------------------------------------------------------- */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale,
.botisalas-badge {
  background-color: var(--bsu-red) !important;
  color: #fff !important;
  border-radius: 50% !important;
  min-width: 46px !important;
  min-height: 46px !important;
  line-height: 46px !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  text-align: center !important;
  padding: 0 !important;
  z-index: 8 !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.45) !important;
}


/* -----------------------------------------------------------------------------
   37. INPUT DE CANTIDAD — coherente con el tema oscuro
   ----------------------------------------------------------------------------- */
.woocommerce .quantity input.qty {
  background-color: var(--bsu-bg-surface) !important;
  color: var(--bsu-text) !important;
  border: 1px solid var(--bsu-border) !important;
  border-radius: var(--bsu-radius-sm) !important;
  font-weight: 600 !important;
}


/* =============================================================================
   ███  v1.1.2 — FIX DE CONTRASTE: superficies de autenticación + blindaje  ███

   CAUSA RAÍZ: el tema oscuro pinta el TEXTO claro de forma global (label,
   h1-h6, body) pero solo pinta OSCUROS los contenedores enumerados. Toda
   superficie NO enumerada se queda blanca (tema/Elementor) → texto claro
   sobre fondo blanco = invisible. Aquí cerramos esos huecos.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   38. WOOCOMMERCE — Login / Registro / Recuperar contraseña / Rastrear pedido
   Estas superficies NO estaban cubiertas (solo aparecen ANTES de loguearse).
   ----------------------------------------------------------------------------- */

/* El contenedor real del formulario → tarjeta oscura */
.woocommerce-account .u-columns,
.woocommerce-account .u-column1,
.woocommerce-account .u-column2,
.woocommerce form.woocommerce-form-login,
.woocommerce form.woocommerce-form-register,
.woocommerce form.woocommerce-ResetPassword,
.woocommerce .woocommerce-form-track-order,
.woocommerce form.lost_reset_password,
.woocommerce .woocommerce-form-coupon {
  background-color: var(--bsu-bg-card) !important;
  border: 1px solid var(--bsu-border) !important;
  border-radius: var(--bsu-radius) !important;
  color: var(--bsu-text) !important;
  padding: 24px !important;
}

/* Títulos y textos de estas páginas */
.woocommerce-account h1,
.woocommerce-account h2,
.woocommerce-account .u-column1 > h2,
.woocommerce-account .u-column2 > h2,
.woocommerce-account .woocommerce > p,
.woocommerce-form-login__rememberme,
.woocommerce-form-login__rememberme span,
.woocommerce form .form-row label {
  color: var(--bsu-text) !important;
}

/* Enlaces (incluido "¿Olvidaste la contraseña?") → rojo marca, ya no azul tema */
.woocommerce-account a:not(.button):not(.elementor-button):not(.wp-block-button__link),
.woocommerce-form-login a,
.woocommerce-LostPassword a,
.lost_password a {
  color: var(--bsu-gold) !important;
  font-weight: 600 !important;
}
.woocommerce-account a:not(.button):not(.elementor-button):hover,
.woocommerce-LostPassword a:hover {
  color: var(--bsu-red) !important;
}

/* Las columnas Elementor que ENVUELVEN el login en la página de cuenta:
   transparentes para que se vea el fondo oscuro (vence inline-white via
   especificidad body.bsu-active 0,2,1 > .elementor-element-xxx 0,1,0). */
body.bsu-active.woocommerce-account .elementor-column:not(.bsu-white),
body.bsu-active.woocommerce-account .e-con:not(.e-con--top):not(.bsu-white),
body.bsu-active.woocommerce-account .elementor-widget-wrap {
  background-color: transparent !important;
}


/* -----------------------------------------------------------------------------
   39. BLINDAJE GLOBAL — regla de seguridad contra futuras superficies blancas
   Cualquier elemento que Elementor/tema deje con fondo blanco/claro EXPLÍCITO
   y que NO sea una excepción intencional (.bsu-white, tiles de imagen) recibe
   tratamiento oscuro. Acotado a zonas de contenido para no tocar el header
   ni secciones de marca deliberadas.
   ----------------------------------------------------------------------------- */

/* Bloques Gutenberg "Grupo" / "Columnas" con fondo, dentro del contenido */
.entry-content .wp-block-group.has-background:not(.bsu-white),
.entry-content .wp-block-columns.has-background:not(.bsu-white) {
  background-color: var(--bsu-bg-card) !important;
}

/* Popups de Elementor → fondo oscuro por defecto */
.elementor-popup-modal .dialog-widget-content,
.elementor-popup-modal .elementor-section-wrap > .elementor-section,
.e-popup-modal .e-con--top {
  background-color: var(--bsu-bg-card) !important;
}
.elementor-popup-modal .elementor-heading-title,
.elementor-popup-modal label,
.elementor-popup-modal p {
  color: var(--bsu-text) !important;
}

/* Fieldset / contenedores de formulario genéricos */
.woocommerce fieldset,
.woocommerce form .form-row-wide,
.woocommerce-EditAccountForm fieldset {
  background-color: transparent !important;
  border-color: var(--bsu-border) !important;
}
.woocommerce-EditAccountForm legend,
.woocommerce fieldset legend {
  color: var(--bsu-text) !important;
}


/* =============================================================================
   ███  v1.1.3 — AUDITORÍA COMPLETA: cierre de gaps de superficie WooCommerce ███
   Cubre: Select2 · Reviews · Variaciones · Carrito (× / envío) · Pedido
   recibido · Mi cuenta (direcciones/detalle) · Widgets WC · Password · 404
   ============================================================================= */


/* -----------------------------------------------------------------------------
   40. SELECT2 — dropdowns de país/región del checkout (GAP MAYOR)
   Select2 inyecta su markup al final del <body>, fuera de .woocommerce, por eso
   NO lo agarraban los selectores con prefijo. Aquí lo cubrimos globalmente.
   ----------------------------------------------------------------------------- */

/* Caja cerrada (selección única) */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background-color: var(--bsu-bg-surface) !important;
  border: 1px solid var(--bsu-border) !important;
  border-radius: var(--bsu-radius-sm) !important;
  color: var(--bsu-text) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--bsu-text) !important;
  line-height: 36px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--bsu-text-muted) transparent transparent transparent !important;
}

/* Panel desplegable (flotante, hijo de <body>) */
.select2-dropdown,
.select2-container--open .select2-dropdown {
  background-color: var(--bsu-bg-elevated) !important;
  border: 1px solid var(--bsu-border) !important;
  color: var(--bsu-text) !important;
}

.select2-container--default .select2-results__option {
  background-color: transparent !important;
  color: var(--bsu-text) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--bsu-red) !important;
  color: #fff !important;
}

/* Buscador interno del dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--bsu-bg-surface) !important;
  border: 1px solid var(--bsu-border) !important;
  color: var(--bsu-text) !important;
}

/* Multi-select (tags) */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--bsu-red) !important;
  border-color: var(--bsu-red) !important;
  color: #fff !important;
}


/* -----------------------------------------------------------------------------
   41. PRODUCTO — Reviews / Comentarios + estrellas de valoración
   ----------------------------------------------------------------------------- */
.woocommerce #reviews #comments h2,
.woocommerce #reviews #respond .comment-reply-title {
  color: var(--bsu-text) !important;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text,
.woocommerce #reviews #comments ol.commentlist li .comment_container {
  background-color: var(--bsu-bg-surface) !important;
  border: 1px solid var(--bsu-border) !important;
  border-radius: var(--bsu-radius) !important;
  color: var(--bsu-text) !important;
}

.woocommerce #reviews .comment-text p,
.woocommerce #reviews .description,
.woocommerce #reviews .meta {
  color: var(--bsu-text-muted) !important;
}

.woocommerce #reviews .woocommerce-review__author,
.woocommerce #reviews strong.woocommerce-review__author {
  color: var(--bsu-text) !important;
}

/* Estrellas ya puestas (rating mostrado) */
.woocommerce #reviews .star-rating span::before,
.woocommerce #reviews .star-rating::before {
  color: var(--bsu-gold) !important;
}

/* Selector de estrellas al ESCRIBIR una review */
.woocommerce p.stars a {
  color: var(--bsu-gold) !important;
}
.woocommerce p.stars a:hover,
.woocommerce p.stars.selected a.active {
  color: var(--bsu-gold-light) !important;
}

/* Caja de respuesta del comentario */
.woocommerce #review_form #respond,
.comment-respond {
  background-color: var(--bsu-bg-card) !important;
  border: 1px solid var(--bsu-border) !important;
  border-radius: var(--bsu-radius) !important;
  padding: 18px !important;
}


/* -----------------------------------------------------------------------------
   42. PRODUCTO VARIABLE — tabla de variaciones + precio dinámico
   ----------------------------------------------------------------------------- */
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart table.variations td,
.woocommerce div.product form.cart table.variations th {
  background-color: transparent !important;
  color: var(--bsu-text) !important;
  border-color: var(--bsu-border) !important;
}

.woocommerce div.product form.cart table.variations label {
  color: var(--bsu-text) !important;
}

.woocommerce a.reset_variations {
  color: var(--bsu-gold) !important;
}

.woocommerce div.product .woocommerce-variation-price .price,
.woocommerce .single_variation .price {
  color: var(--bsu-red) !important;
}

.woocommerce-variation.single_variation {
  color: var(--bsu-text) !important;
}


/* -----------------------------------------------------------------------------
   43. CARRITO — botón quitar (×) + calculadora de envío
   ----------------------------------------------------------------------------- */
.woocommerce a.remove,
.woocommerce table.cart a.remove {
  color: var(--bsu-red) !important;
  background-color: transparent !important;
  font-weight: 700 !important;
}
.woocommerce a.remove:hover {
  color: #fff !important;
  background-color: var(--bsu-red) !important;
}

.woocommerce .shipping-calculator-form,
.woocommerce .shipping-calculator-button {
  color: var(--bsu-text) !important;
}
.woocommerce .shipping-calculator-button {
  color: var(--bsu-gold) !important;
}

/* Fila de envío en totales */
.cart_totals .shipping th,
.cart_totals .shipping td,
.cart_totals .cart-subtotal th,
.cart_totals .cart-subtotal td {
  color: var(--bsu-text) !important;
  border-color: var(--bsu-border) !important;
}


/* -----------------------------------------------------------------------------
   44. PÁGINA "PEDIDO RECIBIDO" / GRACIAS
   ----------------------------------------------------------------------------- */
.woocommerce .woocommerce-order p,
.woocommerce-thankyou-order-received {
  color: var(--bsu-text) !important;
}

/* Resumen de cifras (ul.order_details) */
.woocommerce ul.order_details,
.woocommerce .woocommerce-order-overview {
  background-color: var(--bsu-bg-card) !important;
  border: 1px solid var(--bsu-border) !important;
  border-radius: var(--bsu-radius) !important;
}

.woocommerce ul.order_details li {
  color: var(--bsu-text-muted) !important;
  border-right-color: var(--bsu-border) !important;
}

.woocommerce ul.order_details li strong {
  color: var(--bsu-text) !important;
}


/* -----------------------------------------------------------------------------
   45. MI CUENTA — direcciones, detalle de pedido, datos del cliente
   ----------------------------------------------------------------------------- */
.woocommerce-Address,
.woocommerce-order-details,
.woocommerce-customer-details,
.woocommerce-customer-details address,
.woocommerce-Address address {
  background-color: var(--bsu-bg-surface) !important;
  border: 1px solid var(--bsu-border) !important;
  border-radius: var(--bsu-radius) !important;
  color: var(--bsu-text) !important;
  padding: 14px 16px !important;
}

.woocommerce-Address-title h3,
.woocommerce-column__title,
.woocommerce-order-details__title,
.woocommerce-customer-details h2 {
  color: var(--bsu-text) !important;
}

.woocommerce-Address address {
  border: none !important;
  padding: 0 !important;
}


/* -----------------------------------------------------------------------------
   46. WIDGETS WOOCOMMERCE — mini-carrito, filtro precio, listas de producto
   ----------------------------------------------------------------------------- */
.woocommerce .widget,
.widget.woocommerce {
  color: var(--bsu-text) !important;
}

.widget-title,
.widgettitle,
.wp-block-heading.widget-title {
  color: var(--bsu-text) !important;
  border-bottom: 2px solid var(--bsu-red) !important;
  padding-bottom: 6px !important;
}

/* Mini carrito (dropdown del header) */
.widget_shopping_cart,
.widget_shopping_cart_content,
.woocommerce.widget_shopping_cart .cart_list {
  background-color: var(--bsu-bg-card) !important;
  color: var(--bsu-text) !important;
}

.woocommerce .widget_shopping_cart .cart_list li,
.woocommerce .product_list_widget li {
  border-bottom: 1px solid var(--bsu-border) !important;
  color: var(--bsu-text) !important;
}

.woocommerce .widget_shopping_cart .cart_list li a,
.woocommerce .product_list_widget li a {
  color: var(--bsu-text) !important;
}

.woocommerce .widget_shopping_cart .total {
  border-top: 2px solid var(--bsu-border) !important;
  color: var(--bsu-text) !important;
}

/* Filtro de precio (slider jQuery UI del widget nativo) */
.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content,
.woocommerce .widget_price_filter .ui-slider {
  background-color: var(--bsu-border) !important;
}
.woocommerce .widget_price_filter .ui-slider .ui-slider-range {
  background-color: var(--bsu-red) !important;
}
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
  background-color: var(--bsu-bg-surface) !important;
  border: 2px solid var(--bsu-red) !important;
}
.woocommerce .widget_price_filter .price_label {
  color: var(--bsu-text-muted) !important;
}

/* Navegación por capas / filtros activos */
.woocommerce .widget_layered_nav ul li a,
.woocommerce .widget_layered_nav_filters ul li a {
  color: var(--bsu-text-muted) !important;
}


/* -----------------------------------------------------------------------------
   47. CAMPO PASSWORD — ojo mostrar/ocultar + medidor de fuerza
   ----------------------------------------------------------------------------- */
.woocommerce form .woocommerce-password-strength {
  background-color: var(--bsu-bg-surface) !important;
  border: 1px solid var(--bsu-border) !important;
  color: var(--bsu-text) !important;
  border-radius: var(--bsu-radius-sm) !important;
}
.woocommerce form .woocommerce-password-strength.strong { color: #45c463 !important; }
.woocommerce form .woocommerce-password-strength.short,
.woocommerce form .woocommerce-password-strength.bad { color: var(--bsu-red) !important; }
.woocommerce form .woocommerce-password-hint { color: var(--bsu-text-muted) !important; }

/* El ojo de revelar password */
.woocommerce form .show-password-input::after,
.woocommerce form .show-password-input {
  color: var(--bsu-text-muted) !important;
}
.woocommerce form .show-password-input.display-password::after {
  color: var(--bsu-red) !important;
}


/* -----------------------------------------------------------------------------
   48. 404 · BÚSQUEDA · COMENTARIOS DE BLOG (no-WC)
   ----------------------------------------------------------------------------- */
.error-404 .page-content,
.search-no-results .page-content,
.no-results.not-found .page-content {
  color: var(--bsu-text-muted) !important;
}

.comment-list .comment-body,
.comment-list .comment-content {
  background-color: var(--bsu-bg-surface) !important;
  border: 1px solid var(--bsu-border) !important;
  border-radius: var(--bsu-radius) !important;
  color: var(--bsu-text) !important;
  padding: 14px 16px !important;
}

.comment-list .comment-author .fn,
.comment-list .comment-author a {
  color: var(--bsu-text) !important;
}

.comment-metadata a,
.comment-list .comment-meta a {
  color: var(--bsu-text-muted) !important;
}


/* =============================================================================
   ███  v1.2.0 — GLASSMORPHISM (opcional · toggle en Ajustes → BotiSalas UI)  ███
   TODO va prefijado con body.bsu-glass → se enciende/apaga con una casilla en el
   admin SIN reinstalar. Si está OFF, queda el tema oscuro plano normal.
   Botones + superficies clave (header, tarjetas, checkout, cuenta, filtro).
   ============================================================================= */

body.bsu-glass {
  --glass-bg:         rgba(255,255,255,0.055);
  --glass-bg-strong:  rgba(255,255,255,0.09);
  --glass-border:     rgba(255,255,255,0.13);
  --glass-border-lit: rgba(255,255,255,0.22);
  --glass-blur:       blur(14px) saturate(150%);
  --glass-blur-sm:    blur(6px) saturate(140%);
  --glass-shadow:     0 8px 32px rgba(0,0,0,0.45);
  --glass-inset:      inset 0 1px 0 rgba(255,255,255,0.18);

  /* Atmósfera: sin algo detrás, el blur no tiene nada que refractar sobre #0a0a0a */
  background-color: var(--bsu-bg) !important;
  background-image:
    radial-gradient(900px circle at 10% -10%, rgba(204,0,0,0.12), transparent 45%),
    radial-gradient(800px circle at 100% 0%, rgba(201,168,76,0.07), transparent 42%),
    radial-gradient(760px circle at 50% 118%, rgba(204,0,0,0.06), transparent 50%) !important;
  background-attachment: fixed !important;
}

/* ---- Botones: CTA rojo translúcido con brillo (mantiene fuerza de marca) ---- */
body.bsu-glass .elementor-button,
body.bsu-glass .wp-block-button__link,
body.bsu-glass .woocommerce a.button,
body.bsu-glass .woocommerce button.button,
body.bsu-glass .woocommerce input.button,
body.bsu-glass .single_add_to_cart_button,
body.bsu-glass .add_to_cart_button,
body.bsu-glass .woocommerce-cart .checkout-button,
body.bsu-glass .woocommerce-checkout #place_order,
body.bsu-glass input[type="submit"],
body.bsu-glass button[type="submit"] {
  background: linear-gradient(135deg, rgba(204,0,0,0.92), rgba(150,0,0,0.94)) !important;
  background-image: linear-gradient(135deg, rgba(204,0,0,0.92), rgba(150,0,0,0.94)) !important;
  -webkit-backdrop-filter: var(--glass-blur-sm) !important;
  backdrop-filter: var(--glass-blur-sm) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  box-shadow: var(--glass-inset), 0 6px 22px rgba(204,0,0,0.30) !important;
  color: #fff !important;
}
body.bsu-glass .elementor-button:hover,
body.bsu-glass .wp-block-button__link:hover,
body.bsu-glass .woocommerce a.button:hover,
body.bsu-glass .woocommerce button.button:hover,
body.bsu-glass .single_add_to_cart_button:hover,
body.bsu-glass .woocommerce-cart .checkout-button:hover,
body.bsu-glass .woocommerce-checkout #place_order:hover,
body.bsu-glass input[type="submit"]:hover,
body.bsu-glass button[type="submit"]:hover {
  background-image: linear-gradient(135deg, rgba(230,0,0,0.96), rgba(170,0,0,0.96)) !important;
  box-shadow: var(--glass-inset), 0 10px 30px rgba(204,0,0,0.45) !important;
  transform: translateY(-2px) !important;
}

/* Botón secundario / dorado glass */
body.bsu-glass .elementor-button.bsu-secondary,
body.bsu-glass .wp-block-button__link.bsu-secondary {
  background: rgba(255,255,255,0.06) !important;
  background-image: none !important;
  -webkit-backdrop-filter: var(--glass-blur-sm) !important;
  backdrop-filter: var(--glass-blur-sm) !important;
  border: 1px solid var(--glass-border-lit) !important;
  color: #fff !important;
}
body.bsu-glass .elementor-button.bsu-gold,
body.bsu-glass .wp-block-button__link.bsu-gold {
  background-image: linear-gradient(135deg, rgba(201,168,76,0.92), rgba(160,130,50,0.94)) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  color: #000 !important;
}

/* ---- Header translúcido ---- */
body.bsu-glass.bsu-active header.site-header,
body.bsu-glass.bsu-active #masthead,
body.bsu-glass.bsu-active [data-elementor-type="header"] {
  background-color: rgba(10,10,10,0.55) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  backdrop-filter: var(--glass-blur) !important;
  border-bottom: 1px solid var(--glass-border) !important;
}

/* ---- Tarjetas de producto / loop / elementor card ---- */
body.bsu-glass ul.products li.product,
body.bsu-glass .wc-block-grid__product,
body.bsu-glass .elementor-card,
body.bsu-glass .e-loop-item {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-inset), var(--glass-shadow) !important;
}
body.bsu-glass ul.products li.product:hover,
body.bsu-glass .wc-block-grid__product:hover,
body.bsu-glass .elementor-card:hover {
  border-color: rgba(204,0,0,0.55) !important;
  box-shadow: var(--glass-inset), 0 12px 40px rgba(204,0,0,0.28) !important;
}

/* ---- Superficies clave: carrito, checkout, mi cuenta, filtro, login ---- */
body.bsu-glass .cart_totals,
body.bsu-glass .woocommerce table.cart,
body.bsu-glass .woocommerce table.shop_table,
body.bsu-glass .woocommerce #payment,
body.bsu-glass .woocommerce-checkout-review-order-table,
body.bsu-glass .woocommerce-MyAccount-navigation ul,
body.bsu-glass .woocommerce-MyAccount-content,
body.bsu-glass .woocommerce div.product .woocommerce-tabs .panel,
body.bsu-glass .bsf-filter-panel,
body.bsu-glass .bsf-filter-sidebar,
body.bsu-glass .bsf-combo-sidebar,
body.bsu-glass .woocommerce form.woocommerce-form-login,
body.bsu-glass .woocommerce form.woocommerce-form-register,
body.bsu-glass .woocommerce-Address,
body.bsu-glass .woocommerce ul.order_details {
  background: var(--glass-bg-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-inset), var(--glass-shadow) !important;
}

/* Cabeceras de tabla translúcidas */
body.bsu-glass .woocommerce table.shop_table thead th,
body.bsu-glass .woocommerce-checkout-review-order-table thead th,
body.bsu-glass .woocommerce table.cart thead th {
  background: rgba(255,255,255,0.06) !important;
}

/* ---- Inputs translúcidos ---- */
body.bsu-glass input[type="text"],
body.bsu-glass input[type="email"],
body.bsu-glass input[type="password"],
body.bsu-glass input[type="tel"],
body.bsu-glass input[type="number"],
body.bsu-glass input[type="search"],
body.bsu-glass textarea,
body.bsu-glass select,
body.bsu-glass .select2-container--default .select2-selection--single {
  background: rgba(255,255,255,0.05) !important;
  -webkit-backdrop-filter: var(--glass-blur-sm) !important;
  backdrop-filter: var(--glass-blur-sm) !important;
  border: 1px solid var(--glass-border) !important;
}

/* Select2 dropdown + modal del filtro + submenús glass */
body.bsu-glass .select2-dropdown,
body.bsu-glass .bsf-modal-panel,
body.bsu-glass .sub-menu,
body.bsu-glass .elementor-nav-menu .sub-menu {
  background: rgba(17,17,17,0.78) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
}

/* Chips del filtro */
body.bsu-glass .bsf-chip {
  background: rgba(255,255,255,0.06) !important;
  -webkit-backdrop-filter: var(--glass-blur-sm) !important;
  backdrop-filter: var(--glass-blur-sm) !important;
  border: 1px solid var(--glass-border) !important;
}

/* Avisos WooCommerce glass */
body.bsu-glass .woocommerce-message,
body.bsu-glass .woocommerce-info,
body.bsu-glass .woocommerce-error {
  background: rgba(255,255,255,0.06) !important;
  -webkit-backdrop-filter: var(--glass-blur-sm) !important;
  backdrop-filter: var(--glass-blur-sm) !important;
  border: 1px solid var(--glass-border) !important;
}

/* Móvil: aligerar el blur en tarjetas para no penalizar GPU de gama baja */
@media (max-width: 600px) {
  body.bsu-glass ul.products li.product,
  body.bsu-glass .wc-block-grid__product {
    -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
    backdrop-filter: blur(8px) saturate(140%) !important;
  }
}


/* =============================================================================
   50. BARRA DE BÚSQUEDA DEL HEADER — contraste sobre fondo negro (v1.2.1)
   El widget Search de Elementor usa .e-search-input; sobre el header negro el
   campo quedaba casi invisible (fondo rgba(255,255,255,0.05), peor aún con el
   modo glass). Le damos un fondo y borde claramente legibles.
   ============================================================================= */
.e-search-input,
.elementor-search-form__input,
header input[type="search"] {
  background-color: #1c1c1c !important;
  color: var(--bsu-text) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: var(--bsu-radius-sm) !important;
}
.e-search-input::placeholder,
.elementor-search-form__input::placeholder,
header input[type="search"]::placeholder {
  color: var(--bsu-text-muted) !important;
  opacity: 1 !important;
}
.e-search-input:focus,
.elementor-search-form__input:focus,
header input[type="search"]:focus {
  border-color: var(--bsu-red) !important;
  box-shadow: 0 0 0 2px rgba(204, 0, 0, 0.25) !important;
  background-color: #232323 !important;
  outline: none !important;
}
/* En modo glass: más visible que el rgba(.05) genérico de inputs */
body.bsu-glass .e-search-input,
body.bsu-glass .elementor-search-form__input,
body.bsu-glass header input[type="search"] {
  background-color: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
}


/* =============================================================================
   51. v1.2.2 — FIX IPHONE SAFARI: desactivar glass en mobile/tablet (≤1024px)
   CAUSA: background-attachment:fixed + backdrop-filter activos al mismo tiempo
   disparan un re-composite por cada scroll en iOS Safari → parpadeo / temblor.
   Solución: en ≤1024px degradamos a fondo sólido oscuro sin blur.
   El efecto glass sigue visible en desktop (≥1025px) sin cambios.
   ============================================================================= */
@media (max-width: 1024px) {

  /* 1. Eliminar background-attachment:fixed del body glass */
  body.bsu-glass {
    background-attachment: scroll !important;
  }

  /* 2. Desactivar backdrop-filter en TODOS los elementos glass */
  body.bsu-glass .elementor-button,
  body.bsu-glass .wp-block-button__link,
  body.bsu-glass .woocommerce a.button,
  body.bsu-glass .woocommerce button.button,
  body.bsu-glass .woocommerce input.button,
  body.bsu-glass .single_add_to_cart_button,
  body.bsu-glass .add_to_cart_button,
  body.bsu-glass .woocommerce-cart .checkout-button,
  body.bsu-glass .woocommerce-checkout #place_order,
  body.bsu-glass input[type="submit"],
  body.bsu-glass button[type="submit"],
  body.bsu-glass .elementor-button.bsu-secondary,
  body.bsu-glass .wp-block-button__link.bsu-secondary,
  body.bsu-glass .elementor-button.bsu-gold,
  body.bsu-glass .wp-block-button__link.bsu-gold,
  body.bsu-glass.bsu-active header.site-header,
  body.bsu-glass.bsu-active #masthead,
  body.bsu-glass.bsu-active [data-elementor-type="header"],
  body.bsu-glass ul.products li.product,
  body.bsu-glass .wc-block-grid__product,
  body.bsu-glass .elementor-card,
  body.bsu-glass .e-loop-item,
  body.bsu-glass .cart_totals,
  body.bsu-glass .woocommerce table.cart,
  body.bsu-glass .woocommerce table.shop_table,
  body.bsu-glass .woocommerce #payment,
  body.bsu-glass .woocommerce-checkout-review-order-table,
  body.bsu-glass .woocommerce-MyAccount-navigation ul,
  body.bsu-glass .woocommerce-MyAccount-content,
  body.bsu-glass .woocommerce div.product .woocommerce-tabs .panel,
  body.bsu-glass .bsf-filter-panel,
  body.bsu-glass .bsf-filter-sidebar,
  body.bsu-glass .bsf-combo-sidebar,
  body.bsu-glass .woocommerce form.woocommerce-form-login,
  body.bsu-glass .woocommerce form.woocommerce-form-register,
  body.bsu-glass .woocommerce-Address,
  body.bsu-glass .woocommerce ul.order_details,
  body.bsu-glass input[type="text"],
  body.bsu-glass input[type="email"],
  body.bsu-glass input[type="password"],
  body.bsu-glass input[type="tel"],
  body.bsu-glass input[type="number"],
  body.bsu-glass input[type="search"],
  body.bsu-glass textarea,
  body.bsu-glass select,
  body.bsu-glass .select2-container--default .select2-selection--single,
  body.bsu-glass .select2-dropdown,
  body.bsu-glass .bsf-modal-panel,
  body.bsu-glass .sub-menu,
  body.bsu-glass .elementor-nav-menu .sub-menu,
  body.bsu-glass .bsf-chip,
  body.bsu-glass .woocommerce-message,
  body.bsu-glass .woocommerce-info,
  body.bsu-glass .woocommerce-error,
  body.bsu-glass .e-search-input,
  body.bsu-glass .elementor-search-form__input,
  body.bsu-glass header input[type="search"] {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}


/* =============================================================================
   52. CRO — Trust strip · Badges de entrega · Ver todos · Pulse CTA  (v1.2.3)
   ============================================================================= */


/* ---- Trust strip (debajo de la barra de anuncio, solo home) ---- */
.bsu-trust-strip {
  background-color: #0d0d0d;
  border-bottom: 1px solid var(--bsu-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 7px 16px;
  font-size: 12px;
  color: var(--bsu-text-muted);
  letter-spacing: 0.02em;
  z-index: 9994;
  position: relative;
}

.bsu-ts-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.bsu-ts-icon {
  font-size: 14px;
  line-height: 1;
}

.bsu-ts-sep {
  color: var(--bsu-border);
  font-size: 14px;
  line-height: 1;
}

@media (max-width: 600px) {
  .bsu-trust-strip {
    font-size: 11px;
    gap: 4px 10px;
    padding: 6px 10px;
  }
  .bsu-ts-sep {
    display: none;
  }
}


/* ---- Badge de entrega en cards de producto ---- */
.bsu-badge-hoy,
.bsu-badge-tmw {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 28px);   /* nunca más ancho que la card (evita overflow) */
  box-sizing: border-box;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--bsu-radius-pill);
  padding: 3px 8px;
  margin: 4px 14px 0;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}

/* Punto de color en lugar de emoji (no depende de wp-emoji → sin caja blanca) */
.bsu-badge-hoy::before,
.bsu-badge-tmw::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.bsu-badge-hoy {
  background-color: rgba(69, 196, 99, 0.15);
  color: #45c463;
  border: 1px solid rgba(69, 196, 99, 0.3);
}

.bsu-badge-hoy::before {
  background-color: #45c463;
}

.bsu-badge-tmw {
  background-color: rgba(201, 168, 76, 0.12);
  color: var(--bsu-gold);
  border: 1px solid rgba(201, 168, 76, 0.25);
}

.bsu-badge-tmw::before {
  background-color: var(--bsu-gold);
}

/* Blindaje: si quedara algún <img.emoji> dentro de un badge, no lo dejes crecer */
.bsu-badge-hoy img.emoji,
.bsu-badge-tmw img.emoji,
.bsu-cat-rail-emoji img.emoji {
  width: 1em !important;
  height: 1em !important;
  vertical-align: -0.1em;
  margin: 0 !important;
  max-width: 1em !important;
  display: inline-block;
  background: transparent;
  box-shadow: none;
}


/* ---- "Ver todos" link al pie de cada sección de categoría ---- */
.bsu-ver-todos {
  text-align: center;
  padding: 14px 0 6px;
}

.bsu-ver-todos-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--bsu-text-muted) !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none !important;
  border: 1px solid var(--bsu-border);
  border-radius: var(--bsu-radius-pill);
  padding: 7px 18px;
  transition: color var(--bsu-transition), border-color var(--bsu-transition), background-color var(--bsu-transition) !important;
}

.bsu-ver-todos-link:hover {
  color: #fff !important;
  border-color: var(--bsu-red) !important;
  background-color: var(--bsu-red) !important;
}


/* ---- Pulse suave en el primer botón "Añadir al carrito" visible ---- */
@keyframes bsu-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(204, 0, 0, 0.55); }
  60%  { box-shadow: 0 0 0 10px rgba(204, 0, 0, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(204, 0, 0, 0);    }
}

.bsu-pulse {
  animation: bsu-pulse 1.1s ease-out 3;
}


/* =============================================================================
   53. Structural CRO — Category Rail · Header Compact · Más Vendidos  (v1.4.0)
   ============================================================================= */

/* ── Category Rail ─────────────────────────────────────────────────────────── */
.bsu-cat-rail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 20px;
  width: 100%;
  max-width: 100vw;            /* nunca exceder el ancho de pantalla */
  box-sizing: border-box;
  overflow-x: auto;
  overscroll-behavior-x: contain;  /* el scroll del rail no arrastra la página */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: #0d0d0d;
  border-bottom: 1px solid var(--bsu-border);
  position: relative;
  z-index: 9990;
}

.bsu-cat-rail::-webkit-scrollbar {
  display: none;
}

.bsu-cat-rail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  text-decoration: none !important;
  color: var(--bsu-text-muted) !important;
  min-width: 68px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: color var(--bsu-transition), border-color var(--bsu-transition), background-color var(--bsu-transition);
}

.bsu-cat-rail-item:hover {
  color: #fff !important;
  border-color: var(--bsu-border);
  background: rgba(255, 255, 255, 0.06);
}

.bsu-cat-rail-emoji {
  font-size: 26px;
  line-height: 1;
}

.bsu-cat-rail-name {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .bsu-cat-rail {
    justify-content: flex-start;
    padding: 10px 14px;
    gap: 4px;
  }

  .bsu-cat-rail-item {
    min-width: 58px;
    padding: 8px 10px;
  }

  .bsu-cat-rail-emoji {
    font-size: 22px;
  }

  .bsu-cat-rail-name {
    font-size: 9px;
  }
}


/* ── Header compacto al hacer scroll ──────────────────────────────────────── */
/* Añade transición al padding interno para que el shrink sea suave.          */
[data-elementor-type="header"] .elementor-section,
[data-elementor-type="header"] .e-con,
[data-elementor-type="header"] .elementor-container {
  transition: padding-top 0.28s ease, padding-bottom 0.28s ease;
}

body.bsu-header-compact [data-elementor-type="header"] .elementor-section,
body.bsu-header-compact [data-elementor-type="header"] .e-con {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

body.bsu-header-compact [data-elementor-type="header"] {
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}


/* ── Sección "Más Vendidos" (shortcode [bsu_mas_vendidos]) ────────────────── */
.bsu-mas-vendidos-section {
  padding: 32px 0 12px;
}

.bsu-mv-title {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 20px;
}