/*
 * ============================================================================
 *  BLACKTRONIC — Hoja de estilos del tema hijo
 * ============================================================================
 *  Se carga después de la hoja del tema padre, así que gana sin necesidad de
 *  !important salvo donde Electro use selectores muy específicos.
 *
 *  Qué NO está aquí y por qué:
 *    · La familia tipográfica (Outfit) y el color de marca (#E8912F) los
 *      aplica el propio tema desde Electro -> Styling / Typography.
 *      No los dupliques aquí o pelearán entre sí.
 *
 *  Al final está el CSS rescatado de los snippets PHP (#9, #12, #14).
 *  Cuando esto esté validado, hay que borrar esos bloques <style> de los
 *  snippets, o habrá dos copias del mismo CSS.
 * ============================================================================
 */

/* ==========================================================================
   BLACKTRONIC — SISTEMA DE DISEÑO
   --------------------------------------------------------------------------
   Diagnóstico de partida (medido sobre la web real):
     · Fuente Inter, la de por defecto de medio internet
     · h2 a 17 px con body a 14 px -> sin jerarquía
     · tres acentos compitiendo: rojo #DC3545 (56 usos), azul #0062BD (34)
       y el naranja de marca #F89A20 (8 usos). El color propio era el que
       MENOS aparecía: de ahí la sensación de "sin rumbo"
     · tarjetas de producto sin fondo, borde, radio, sombra ni padding
     · solo 50 de 200 elementos con transición

   Dirección: el nombre ya dice qué es la marca — Black + tronic. Grafito
   casi negro y ámbar eléctrico, UN solo acento, tipografía con presencia.
   No copiamos a asgoodasnew: ellos son verde pizarra y amarillo.
   ========================================================================== */

:root {
  /* --- Tinta y grises: familia cálida, no el azulado del tema --- */
  --bt-ink:     #17191D;
  --bt-800:     #2A2E35;
  --bt-700:     #3D424A;
  --bt-600:     #5C6169;
  --bt-400:     #8E939B;
  --bt-200:     #E2E4E8;
  --bt-100:     #F1F2F4;
  --bt-050:     #F8F9FA;
  --bt-blanco:  #FFFFFF;

  /* --- Un único acento, de la propia marca, algo menos saturado
         para que conviva con el gris sin gritar --- */
  --bt-ambar:      #E8912F;
  --bt-ambar-osc:  #C9761C;
  --bt-ambar-luz:  #FDF3E6;

  /* Velo para superficies grandes. --bt-ambar-luz es un tinte del 10 %: bien
     para un boton de 48 px, demasiado para una tarjeta entera. Este es el
     equivalente al lavado de color con el que asgoodasnew marca la tarjeta
     que tiene el raton encima. */
  --bt-ambar-vel:  #FEF9F3;

  /* Rebaja: sigue en la familia cálida, ya no el rojo de Bootstrap */
  --bt-rebaja:  #C2410C;
  --bt-ok:      #1F7A4C;

  /* --- Sombras.
         asgoodasnew apenas usa: 26 de sus reglas de box-shadow son `none`, y
         delimita las superficies con un borde de 1px. Aquí se sigue el mismo
         criterio: la sombra deja de servir para "separar del fondo" —de eso se
         encarga --bt-200— y se reserva para lo que de verdad flota por encima
         de la página: desplegables, mini-carrito y modales.

         Antes: .06 / .14 / .22 de opacidad. Ahora la mitad, y la 3 se queda
         solo para elementos flotantes. --- */
  --bt-sombra-1: 0 1px 2px rgba(23, 25, 29, .04);
  --bt-sombra-2: 0 2px 8px -4px rgba(23, 25, 29, .08);
  --bt-sombra-3: 0 8px 24px -8px rgba(23, 25, 29, .14);

  /* --- Radios pequeños. Medido sobre asgoodasnew: el 74 % de sus esquinas son
         de 5px, y el resto 3, 4 o 6. Las esquinas muy redondeadas envejecen
         rápido y en una tienda con mucha tarjeta acaban pareciendo burbujas.
         Antes aquí: 6 / 10 / 14 px. --- */
  --bt-r-sm: 3px;
  --bt-r-md: 5px;
  --bt-r-lg: 8px;

  /* --- Movimiento ---
     Antes: 200ms cubic-bezier(.2,.8,.3,1). Esa curva arranca rápida y frena en
     seco: se percibe como un chasquido. Medido sobre el CSS de asgoodasnew, sus
     transiciones duran entre 300 y 400 ms con curvas simétricas (ease-in-out),
     y eso es lo que produce la sensación de suavidad, no el color ni la sombra.

     Ajustado a 220ms el 26-ago: los 300-400ms de asgoodasnew son de registro
     *brand* (una página que se contempla). Una tienda es registro *product*:
     el usuario está haciendo una tarea, y ahí la guía de `impeccable` pide
     150-250ms, porque por encima la interfaz estorba en vez de acompañar.
     cubic-bezier(.4,0,.2,1) es la ease-in-out estándar. */
  --bt-t:       220ms cubic-bezier(.4, 0, .2, 1);
  --bt-t-lento: 320ms cubic-bezier(.4, 0, .2, 1);
}


/* ==========================================================================
   A. TIPOGRAFÍA
   --------------------------------------------------------------------------
   Outfit: geométrica, cálida, con carácter. Una sola familia para no
   añadir otra petición de red (el LCP ya está en 4,3 s). La jerarquía la
   dan el tamaño, el peso y el tracking, no una segunda fuente.
   ========================================================================== */

/* La familia tipográfica la aplica el tema desde Electro -> Typography.
   Aquí solo quedan tamaños, pesos y tracking. */

body {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--bt-700) !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  color: var(--bt-ink) !important;
  text-wrap: balance;
}

h1 {
  font-size: clamp(28px, 7vw, 44px) !important;
  line-height: 1.06 !important;
  letter-spacing: -.03em !important;
  font-weight: 800 !important;
}

/* Era 17 px con el body a 14. Un título de sección tiene que anunciarse. */
h2, .wpb_heading, .section-title {
  font-size: clamp(22px, 5.5vw, 30px) !important;
  line-height: 1.15 !important;
  letter-spacing: -.022em !important;
  font-weight: 700 !important;
}

h3 { font-size: clamp(17px, 4vw, 20px) !important; font-weight: 600 !important; letter-spacing: -.015em !important; }
h4 { font-size: 16px !important; font-weight: 600 !important; }

p { max-width: 68ch; }

/* Cifras alineadas: en una tienda con precios por todas partes se nota. */
.price, .amount, .electro-price,
.woocommerce-Price-amount, .cart-items-total-price,
td.product-total, .order-total {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Etiquetas pequeñas: mayúsculas solo aquí, y con aire. */
.loop-product-categories,
.posted_in, .tagged_as {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--bt-400) !important;
}


/* ==========================================================================
   B. COLOR: UN SOLO ACENTO
   --------------------------------------------------------------------------
   Se retiran el rojo de Bootstrap y el azul suelto. Lo que pide atención
   pasa al ámbar de marca; lo que informa, a la escala de grises.
   ========================================================================== */

a { color: var(--bt-800); transition: color var(--bt-t); }
a:hover { color: var(--bt-ambar-osc); }

.price ins,
.price > .amount,
.electro-price ins,
.woocommerce-Price-amount { color: var(--bt-ink) !important; font-weight: 700 !important; }

/* Precio tachado: referencia, no error */
.price del,
.price del .amount,
.electro-price del {
  color: var(--bt-400) !important;
  font-weight: 400 !important;
  text-decoration-thickness: 1px;
  opacity: .85;
}


/* --- B2. La rebaja también en la tarjeta del catálogo ---------------------
   El propietario dijo que "lo que destacábamos antes ahora no destaca", y en
   la tarjeta tenía toda la razón. Medido en pantalla a 375 px sobre /shop/:

       precio de oferta   18 px / 700   rgb(23,25,29)
       nombre del producto 15 px / 600  rgb(23,25,29)   <- EL MISMO color
       precio tachado     10,8 px, opacidad .85         -> 2,53:1

   O sea que la tarjeta no tenía ni un color que separase la oferta del
   nombre, y la única señal de rebaja que quedaba era la etiqueta de -12 %.
   (El documento del propietario decía ~2,7:1 para el tachado; medido son
   2,53:1, algo peor.)

   Quien pinta ahí el importe NO es `.price ins`, sino la regla global
   `.woocommerce-Price-amount` de la línea 176, que lleva --bt-ink !important:
   por eso teñir el <ins> a secas no cambiaba nada. Hay que teñir el .amount.

   EL ANCLA ES `.price-add-to-cart`, y esto es lo importante. Electro imprime
   ese envoltorio en TODOS los bucles de tarjeta desde una sola función, así
   que cubre por igual el li.product de la rejilla y el div.product del
   carrusel (trampa 8) y una tarjeta nueva lo hereda sola. Comprobado con
   curl -4 sobre el HTML servido:

       /shop/    .price-add-to-cart 35   .price 35    /cart/  0 y 0
       portada                      25          25    ficha   4 y 5

   —el `.price` que sobra en la ficha es el <p class="price"> del sumario,
   donde ya manda la sección N3—.

   POR QUÉ NO `.electro-price ins`: alcanza los <ins> de
   `ul.product_list_widget` (barra lateral y "vistos recientemente" del pie),
   que se pinta TAMBIÉN EN EL CARRITO. Medido: 1 en /cart/. Ahí el rojo no
   sería una oferta, sería ruido en una página de pago. */
.price-add-to-cart .price ins,
.price-add-to-cart .price ins .amount {
  color: var(--bt-rebaja) !important;
  text-decoration: none !important;
}

/* El tachado, legible. Hoy hereda `opacity: .85` sobre --bt-400 (#8E939B):
   el compuesto sobre el blanco de la tarjeta es rgb(159,163,170) y da 2,53:1,
   que no llega ni al 3:1 de un elemento no textual. Quitarle solo el velo
   —que es lo que pedía el documento— lo dejaría en 3,09:1, todavía por debajo
   del 4,5:1 que exige un texto de 12 px, así que además pasa a --bt-600:
   6,23:1 sobre blanco. Contrastes calculados con la fórmula WCAG 2.1, no
   estimados. Es el mismo cambio, y por el mismo motivo, que ya está
   documentado en la sección N3 para la ficha.
   El tamaño lo dejaba Electro en 0.6em de un precio de 18 px = 10,8 px. */
.price-add-to-cart .price del,
.price-add-to-cart .price del .amount {
  color: var(--bt-600) !important;
  font-size: 12px !important;
  opacity: 1 !important;
}

.onsale, span.onsale {
  background: var(--bt-rebaja) !important;
  color: #fff !important;
  border-radius: var(--bt-r-sm) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 4px 9px !important;
  box-shadow: none !important;
  border: 0 !important;
}

.stock.in-stock { color: var(--bt-ok) !important; font-weight: 600; }
.stock.out-of-stock { color: var(--bt-600) !important; font-weight: 600; }


/* ==========================================================================
   C. BOTONES
   ========================================================================== */

.button, button, .btn,
input[type="submit"],
a.button, .single_add_to_cart_button, .add_to_cart_button {
  font-weight: 600 !important;
  border-radius: var(--bt-r-md) !important;
  transition: background-color var(--bt-t), color var(--bt-t),
              transform var(--bt-t), box-shadow var(--bt-t) !important;
}

/* El hover cambia el color, no la posición. Levantar el botón un píxel obliga
   al ojo a reencuadrarlo y, encadenado por toda una rejilla de productos, es lo
   que hacía que la interfaz se sintiera nerviosa. */
.button:hover, .btn:hover,
a.button:hover, .add_to_cart_button:hover,
.single_add_to_cart_button:hover {
  filter: brightness(.94);
}

/* Reacción física al pulsar: en móvil se nota mucho. */
.button:active, .btn:active,
a.button:active, .add_to_cart_button:active,
.single_add_to_cart_button:active {
  transform: translateY(0) scale(.985);
  box-shadow: var(--bt-sombra-1);
}

.single_add_to_cart_button,
.btn-primary, .button.alt {
  background: var(--bt-ambar) !important;
  /* Texto grafito, no blanco. Medido sobre el ámbar de marca #E8912F:
       blanco #FFFFFF ....... 2,46:1   <- por debajo del mínimo de 4,5:1
       grafito #17191D ...... 7,14:1
     El botón principal de la tienda no puede ser el peor contraste del sitio.
     Se mantiene el ámbar: lo que cambia es el texto, no el color de marca. */
  color: var(--bt-ink) !important;
  padding: 14px 26px !important;
  font-size: 16px !important;
  border: 0 !important;
}
/* En hover el fondo se oscurece a #C9761C, y ahí el grafito da 5,11:1 —sigue
   por encima del mínimo— mientras que el blanco solo llegaría a 3,45:1. Se
   queda el grafito también aquí: ni cambia de color a mitad de gesto ni hay
   ningún estado del botón por debajo de 4,5:1. */
.single_add_to_cart_button:hover,
.btn-primary:hover, .button.alt:hover { background: var(--bt-ambar-osc) !important; }

/* Foco visible: requisito de accesibilidad, no un extra. */
a:focus-visible, button:focus-visible,
.button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--bt-ambar);
  outline-offset: 2px;
  border-radius: var(--bt-r-sm);
}


/* ==========================================================================
   D. TARJETA DE PRODUCTO
   --------------------------------------------------------------------------
   Estaban desnudas: sin fondo, borde, radio, sombra ni padding. Por eso la
   rejilla se leía como una lista suelta y no como un catálogo.
   ========================================================================== */

.product-card .product-inner,
.product .product-inner {
  background: var(--bt-blanco);
  border: 1px solid var(--bt-200);
  border-radius: var(--bt-r-lg);
  padding: 14px !important;
  /* La transicion vive en la regla base, no en el :hover, para que la salida
     sea igual de suave que la entrada. El hover completo esta en la seccion H. */
  transition: background-color var(--bt-t), border-color var(--bt-t-lento),
              box-shadow var(--bt-t-lento);
}

/* En móvil el tema usa tarjeta horizontal (imagen izquierda). Forzar
   columna + height:100% dejaba 134 px vacíos por tarjeta: la altura la
   imponía la rejilla del tema y el contenido solo ocupaba 125 px.
   Aquí la tarjeta abraza su contenido. */
@media (max-width: 767px) {
  .product-card,
  .product-card .product-inner,
  .product .product-inner {
    height: auto !important;
    min-height: 0 !important;
  }
  .product-card .card-body,
  .product-card .card-body-inner { height: auto !important; }

  /* El titulo ya no necesita nada aqui: el recorte a dos lineas lo resuelve
     la seccion U2, igual en todos los anchos. El `overflow: visible` que
     habia aqui desactivaba el -webkit-line-clamp (que exige overflow:hidden)
     sin agrandar la caja, asi que las lineas sobrantes se pintaban ENCIMA
     del boton de comprar. Medido a 360 px: el titulo pedia 81 px en una caja
     de 41. No devolver esta regla. */
}

/* NO tocar la dirección del flex de la tarjeta.
   El tema la construye horizontal: imagen con flex:0 0 43% (ancho) y cuerpo
   al 57%. Al forzar flex-direction:column ese 43% pasaba a interpretarse
   como ALTO -> contenedor de 104 px con una imagen de 122, y se recortaban
   17 px de la parte baja de cada foto. Se respeta el layout del tema y solo
   se le añade la superficie. */
@media (min-width: 768px) {
  .product-card .product-inner,
  .product .product-inner { height: 100%; }
  .product-card .card-media-left,
  .product .card-media-left { align-self: center; }
}

/* El hover de la tarjeta esta escrito UNA sola vez, en la seccion H.
   Antes vivia aqui, en H y en la cola de K, con tres zooms distintos
   (1.03 / 1.045 / 1.035): solo se aplicaba el ultimo. */

.product-card img,
.product img {
  border-radius: var(--bt-r-md);   /* radio menor dentro que fuera */
}

.woocommerce-loop-product__title,
.product-card h2 {
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  margin: 6px 0 8px !important;
  color: var(--bt-ink) !important;
}

.product-card .price,
.product .price { font-size: 18px !important; font-weight: 700 !important; }



/* ==========================================================================
   E. FRANJA DE PROMESAS
   Ya tienes las cuatro señales buenas (envío, prueba, pago, garantía);
   solo estaban tipografiadas como texto de relleno.
   ========================================================================== */

.electro-services .service,
.services-list .service {
  border-radius: var(--bt-r-lg);
  transition: background-color var(--bt-t);
}
.electro-services .service:hover { background: var(--bt-050); }

.electro-services .service h6,
.services-list .service h6 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--bt-ink) !important;
  letter-spacing: -.01em;
}


/* ==========================================================================
   F. FORMULARIOS Y MOVIMIENTO
   ========================================================================== */

/* `password` faltaba en esta lista, así que los campos de contraseña de todo el
   sitio conservaban la píldora de 22 px de Electro mientras el resto ya tenían
   la esquina del sistema. Afectaba a la cuenta, al checkout y a la pantalla de
   restablecer contraseña. */
input[type="text"], input[type="email"], input[type="search"],
input[type="password"],
input[type="tel"], input[type="number"], select, textarea {
  border: 1px solid var(--bt-200) !important;
  border-radius: var(--bt-r-md) !important;
  padding: 11px 14px !important;
  font-size: 15px !important;
  color: var(--bt-ink) !important;
  transition: border-color var(--bt-t), box-shadow var(--bt-t) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--bt-ambar) !important;
  box-shadow: 0 0 0 3px var(--bt-ambar-luz) !important;
  outline: none !important;
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}




/* ==========================================================================
   ==========================================================================
   ARREGLOS DE MÓVIL YA VALIDADOS
   ==========================================================================
   ========================================================================== */


/* ==========================================================================
   1. NUESTRAS MARCAS
   --------------------------------------------------------------------------
   VACIADA. El carrusel de WPBakery ya no existe en la portada: lo sustituye
   marcado propio con SVG monocromos, en la seccion AB de este mismo archivo
   y en `inc/bt-marcas.php`.

   Aqui vivia la conversion del carrusel en rejilla por debajo de 992 px.
   Ya no hace falta: la banda nueva es rejilla en todos los tamanos.
   ========================================================================== */


/* ==========================================================================
   2. RESEÑAS (Trustindex, layout 13)
   Las tarjetas medían 361 px en un contenedor de 345: 9 de 10 cortadas.
   Anidación real: .ti-reviews-container > -wrapper > .ti-review-item.
   ========================================================================== */

@media (max-width: 991px) {

  .ti-widget, .ti-widget-container { max-width: 100% !important; overflow: hidden !important; }

  /* El avatar era el genérico de Trustindex y parecía una imagen rota.
     Cuando se suba el logo real en trustindex.io, quitar esta regla. */
  .ti-widget .ti-profile-img { display: none !important; }

  .ti-widget .ti-profile-details {
    width: 100% !important; max-width: none !important;
    padding: 0 0 16px !important; height: auto !important;
  }

  .ti-widget .ti-name { font-size: 17px !important; font-weight: 700 !important; }
  .ti-widget .ti-stars { margin: 6px 0 4px !important; }
  .ti-widget .ti-rating-text { width: 100% !important; font-size: 13px !important; color: var(--bt-600) !important; }

  .ti-widget .ti-header-write-btn,
  .ti-widget [class*="write-review"] { font-size: 13px !important; padding: 8px 16px !important; margin-top: 10px !important; }

  .ti-widget .ti-reviews-container {
    display: block !important; width: 100% !important; max-width: 100% !important;
    overflow: visible !important; height: auto !important;
  }

  .ti-widget .ti-reviews-container-wrapper {
    display: flex !important; flex-wrap: nowrap !important; gap: 12px;
    width: 100% !important; max-width: 100% !important;
    overflow-x: auto !important; overflow-y: hidden !important;
    transform: none !important; height: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 4px;
  }
  .ti-widget .ti-reviews-container-wrapper::-webkit-scrollbar { display: none; }

  .ti-widget .ti-review-item {
    position: relative !important; flex: 0 0 auto !important;
    width: 76vw !important; max-width: 290px !important;
    left: auto !important; right: auto !important; margin: 0 !important;
    scroll-snap-align: start; height: auto !important;
  }

  .ti-widget .ti-review-item > .ti-inner {
    height: 100% !important;
    border: 1px solid var(--bt-200);
    border-radius: var(--bt-r-lg);
    background: #fff;
  }

  .ti-widget .ti-review-text { font-size: 13.5px !important; line-height: 1.55 !important; }
  .ti-widget .ti-next, .ti-widget .ti-prev, .ti-widget .ti-controls { display: none !important; }
}


/* ==========================================================================
   3. FOOTER MÓVIL
   ========================================================================== */

@media (max-width: 991px) {

  .handheld-footer {
    background: var(--bt-050);
    border-top: 1px solid var(--bt-200);
    padding-top: 8px !important;
    margin-top: 0 !important;
  }

  .handheld-footer .handheld-widget-menu .widget {
    margin-bottom: 8px;
    border-bottom: 1px solid var(--bt-200);
  }

  .handheld-footer .widget-title {
    font-size: 15px !important; font-weight: 600 !important;
    text-transform: none !important; color: var(--bt-ink) !important;
    padding: 15px 4px !important; margin: 0 !important;
    background: transparent !important; border: 0 !important;
  }

  .handheld-footer .menu li a {
    font-size: 14px !important; line-height: 1.6;
    padding: 9px 4px !important; color: var(--bt-600) !important; display: block;
  }

  .handheld-footer-bar {
    background: var(--bt-ink) !important;
    padding: 26px 20px 30px !important;
    margin-top: 14px;
  }

  .handheld-footer-bar-inner {
    display: flex !important; flex-direction: column;
    align-items: stretch; gap: 18px; text-align: center;
  }

  .handheld-footer-bar .footer-logo { text-align: center; }
  .handheld-footer-bar .footer-logo img { max-width: 150px; height: auto; }

  .handheld-footer-bar .footer-call-us {
    display: flex !important; flex-direction: column;
    align-items: stretch; text-align: center; gap: 4px;
  }

  .handheld-footer-bar .call-us-text {
    font-size: 13px !important; color: var(--bt-400) !important;
    line-height: 1.5; max-width: 260px; margin: 0 auto 4px !important;
  }

  .handheld-footer-bar .call-us-number {
    display: block;
    background: var(--bt-ambar);
    color: #fff !important;
    font-size: 19px !important; font-weight: 700 !important;
    padding: 15px 12px; border-radius: var(--bt-r-md);
    white-space: nowrap; letter-spacing: .02em;
  }
  .handheld-footer-bar .call-us-number a { color: #fff !important; }

  .site-content, .content-area { padding-bottom: 0 !important; margin-bottom: 0 !important; }
}

/* Override: el tema fija .footer-call-us a max-width 180px y mantiene
   align-items:center, con más especificidad que las reglas de arriba. */
@media (max-width: 991px) {
  .handheld-footer .handheld-footer-bar .handheld-footer-bar-inner {
    align-items: stretch !important;
    padding: 0 20px;
  }
  .handheld-footer .handheld-footer-bar .footer-call-us {
    max-width: 320px !important; width: 100% !important; margin: 0 auto !important;
  }
  .handheld-footer .handheld-footer-bar .call-us-number {
    width: 100% !important; max-width: none !important; box-sizing: border-box;
  }
}


/* ==========================================================================
   G. BOTÓN DE CARRITO EN EL LISTADO
   El tema lo deja transparente, 72×34, con el texto "Seleccionar opciones"
   recortado dentro. Se leía como un elemento roto.
   ========================================================================== */

/* OJO con la lista de selectores: las tarjetas de Bestsellers llevan la
   clase .product-card, pero las de la sección de pestañas son .product a
   secas. Sin ".product .add-to-cart-wrap .button" solo coincidían los
   botones que además tenían .add_to_cart_button, y el resto caía en la regla
   genérica de botones (radio 10px): unos círculos y otros cuadrados. */
.product-card .add-to-cart-wrap .button,
.product-card .add_to_cart_button,
.product .add-to-cart-wrap .button,
.product .add_to_cart_button,
.product .add-to-cart-wrap .button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  /* El tamano se fija en L3 (48 px). Aqui habia 42 px que no llegaban a
     aplicarse nunca y ademas quedaban por debajo del minimo tactil de 44. */
  padding: 0 !important;
  border-radius: 50% !important;
  background: var(--bt-ambar-luz) !important;
  color: var(--bt-ambar-osc) !important;
  border: 1px solid transparent !important;
  overflow: hidden;
  font-size: 0 !important;          /* oculta el texto recortado */
  line-height: 1 !important;
}

.product-card .add-to-cart-wrap .button::before,
.product-card .add_to_cart_button::before,
.product-card .add-to-cart-wrap .button i,
.product-card .add_to_cart_button i {
  font-size: 17px !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.product-card .add_to_cart_button:hover,
.product .add_to_cart_button:hover {
  background: var(--bt-ambar) !important;
  color: #fff !important;
  box-shadow: var(--bt-sombra-1);
}

.product-card .add_to_cart_button:active,
.product .add_to_cart_button:active { transform: scale(.95); }

/* Que el precio y el botón queden en la misma línea base, sin apretarse. */
.product-card .price-add-to-cart {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}


/* ==========================================================================
   H. HOVER DE TARJETA — que no rompa la rejilla
   --------------------------------------------------------------------------
   La imagen escalaba a 1.03 sin recorte en su contenedor, se desbordaba y
   tapaba la etiqueta de categoría de la tarjeta vecina. Además el
   translateY movía la tarjeta sin crear contexto de apilado, así que se
   solapaba mal con las de al lado.
   ========================================================================== */

/* El escalado se recorta dentro de su marco.
   Ojo: .card-media-left mide 104 px de alto y la imagen 122 -> recortaba
   18 px de la parte baja de cada foto. El contenedor tiene que abrazar la
   imagen, no al revés. Y el enlace del título NO lleva overflow: solo
   envuelve el <h2> y se lo comería. */
.product-card .card-media-left,
.product .card-media-left {
  display: block;
  overflow: hidden;
  border-radius: var(--bt-r-md);
  height: auto !important;
  min-height: 0 !important;
  line-height: 0;
}

.products > .product .product-thumbnail,
.owl-item > .product .product-thumbnail {
  overflow: hidden;
  border-radius: var(--bt-r-md);
}

.product-card .card-media-left img,
.product .card-media-left img,
.products > .product .product-thumbnail img,
.owl-item > .product .product-thumbnail img {
  display: block;
  height: auto !important;
  max-width: 100%;
  transform: scale(1);
  transform-origin: center;
  transition: transform 380ms cubic-bezier(.22, 1, .36, 1);
  backface-visibility: hidden;
}

.product-card .product-inner,
.product .product-inner {
  position: relative;
  z-index: 1;
}

/* EL hover de la tarjeta. Único. No escribir otro en ninguna otra sección.

   La superficie no cambia de color: eso era el destello brusco. El borde gana
   un segundo pixel hacia dentro (sin alterar medidas ni mover la rejilla) y la
   foto crece solo un 3 %, recortada por su propio marco. Es suficiente para
   confirmar qué tarjeta está activa sin convertir el catálogo en una feria.

   La clase .hover además del :hover porque Electro la aplica por JS en los
   carruseles. Sin ella el carrusel se comportaría distinto que la rejilla, y
   la regla dura del sistema es que una tarjeta se ve igual esté donde esté.

   IMPORTANTE: no usar `.product:hover .product-inner`. En una ficha, el
   producto principal también es `.product` y contiene toda la sección de
   relacionados; ese selector activa todas sus tarjetas simultáneamente. */
.product-card:hover .product-inner,
.products > .product:hover > .product-outer > .product-inner,
.owl-item > .product:hover > .product-outer > .product-inner,
.product-card.hover .product-inner,
.products > .product.hover > .product-outer > .product-inner,
  .owl-item > .product.hover > .product-outer > .product-inner {
  /* !important porque Electro pinta background-color:#fff en su propio hover. */
  background: var(--bt-blanco) !important;
  border-color: var(--bt-ambar);
  box-shadow: inset 0 0 0 1px var(--bt-ambar) !important;
  z-index: 2;
}

.product-card:hover .card-media-left img,
.product-card.hover .card-media-left img,
.products > .product:hover > .product-outer > .product-inner .card-media-left img,
.products > .product.hover > .product-outer > .product-inner .card-media-left img,
.owl-item > .product:hover > .product-outer > .product-inner .card-media-left img,
.owl-item > .product.hover > .product-outer > .product-inner .card-media-left img,
.products > .product:hover > .product-outer > .product-inner .product-thumbnail img,
.products > .product.hover > .product-outer > .product-inner .product-thumbnail img,
.owl-item > .product:hover > .product-outer > .product-inner .product-thumbnail img,
.owl-item > .product.hover > .product-outer > .product-inner .product-thumbnail img {
  transform: scale(1.03);
}

/* --------------------------------------------------------------------------
   Y AQUÍ ESTABA LO BRUSCO.

   A partir de 1200 px Electro saca la tarjeta del flujo al pasar el ratón
   (electro/style.css, `.products > .product:hover .product-inner`):

       position: absolute;  width: 100%;  height: auto;  min-height: 100%;

   `position` no es una propiedad animable, así que ese cambio ocurre en 0 ms,
   sin transición posible. Y `width:100%` deja de medir la caja de contenido
   del <li> para medir su caja de relleno: la tarjeta ensancha de golpe los
   6 px de padding de cada lado. Medido a 1440 px: 569 -> 581 de ancho y
   247 -> 259 de alto. Eso era todo lo "brusco" del hover.

   Se devuelve al flujo con los MISMOS valores que en reposo. Ojo con
   `height`: dejarlo en `auto` hace que la tarjeta ENCOJA al pasar por encima,
   que es el mismo defecto del revés.

   Estas cuatro propiedades solo pueden declararse aquí dentro. Un !important
   en una regla base derrota a su propia media query. */
@media (min-width: 768px) {
  .products > .product:hover .product-inner,
  .products > .product.hover .product-inner,
  .owl-item > .product:hover .product-inner,
  .owl-item > .product.hover .product-inner {
    position: relative !important;
    width: auto !important;
    height: 100% !important;
    min-height: 0 !important;
  }
}

/* La zona que Electro descubre en el hover está VACÍA en toda la tienda:
   imprime <div class="action-buttons"></div> y nada dentro, porque no hay
   quick-view, ni comparador, ni lista de deseos instalados. La tarjeta crecía
   para hacer sitio a nada.

   Se resuelve aquí, en CSS, y NO con un remove_action, aunque lo lógico
   pareciera desengancharla. Lo intenté y no funciona; queda escrito para que
   nadie repita el intento:

     · En las tarjetas de carrusel no hay hook que quitar:
       `templates/contents/content-product-card-view.php` llama a
       electro_template_loop_hover() directamente.
     · Y en la rejilla el remove_action SÍ se aplica, pero no dura. Trazado
       sobre /shop/ en una peticion real:

           wp = 140  |  template_redirect = quitado  |  wp_footer = 140

       Electro la vuelve a registrar durante el render (es el patrón de
       `electro_remove_6_1_main_product_hooks()`, que termina haciendo
       add_action del hover a 140). En esa misma traza `woocommerce_before_shop_loop`
       no llega a dispararse: la rejilla de /shop/ no la pinta el bucle
       estándar de WooCommerce, así que tampoco hay un punto fiable donde
       colarse. Contra un tema que se reengancha solo, el CSS es el único
       sitio que cubre las dos plantillas de tarjeta a la vez.

   >>> Si algún día se instala quick-view, comparador o lista de deseos, hay
       que revertir esta regla. <<< */
.product .hover-area,
.product-card .hover-area { display: none !important; }

/* La raya vertical del canalón. Electro la dibuja entre tarjetas que ya
   tienen borde en los cuatro lados, y además la borra en el hover: otra cosa
   cambiando de golpe. */
.products > .product::after,
.owl-item > .product::after { content: none !important; }

@media (hover: none) {
  /* En táctil no hay hover: que no se quede pegado tras el toque. */
  .product-card:hover .product-inner,
  .product-card.hover .product-inner,
  .products > .product:hover > .product-outer > .product-inner,
  .products > .product.hover > .product-outer > .product-inner,
  .owl-item > .product:hover > .product-outer > .product-inner,
  .owl-item > .product.hover > .product-outer > .product-inner {
    background: var(--bt-blanco) !important;
    border-color: var(--bt-200);
    box-shadow: none !important;
  }

  .product-card:hover .card-media-left img,
  .product-card.hover .card-media-left img,
  .products > .product:hover > .product-outer > .product-inner .card-media-left img,
  .products > .product.hover > .product-outer > .product-inner .card-media-left img,
  .owl-item > .product:hover > .product-outer > .product-inner .card-media-left img,
  .owl-item > .product.hover > .product-outer > .product-inner .card-media-left img,
  .products > .product:hover > .product-outer > .product-inner .product-thumbnail img,
  .products > .product.hover > .product-outer > .product-inner .product-thumbnail img,
  .owl-item > .product:hover > .product-outer > .product-inner .product-thumbnail img,
  .owl-item > .product.hover > .product-outer > .product-inner .product-thumbnail img {
    transform: none;
  }
}


/* ==========================================================================
   I. CÍRCULOS DE CATEGORÍA
   --------------------------------------------------------------------------
   .category-icon era 122×74 con radius "100px 100px 0 0": un SEMICÍRCULO.
   Y al pasar por encima se rellenaba de naranja saturado.
   Iconos: fuente font-electro a 40px, gris #878787.
   ========================================================================== */

.category-icons-carousel .category .category-icon {
  width: 84px !important;
  height: 84px !important;
  margin: 0 auto !important;
  border-radius: 50% !important;          /* círculo entero, no medio */
  background: var(--bt-100) !important;
  border: 1px solid transparent;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color var(--bt-t), border-color var(--bt-t),
              transform var(--bt-t), box-shadow var(--bt-t) !important;
}

.category-icons-carousel .category .category-icon i {
  display: block;
  font-size: 34px !important;
  color: var(--bt-600) !important;
  margin-bottom: 0 !important;
  transition: color var(--bt-t) !important;
  line-height: 1 !important;
  /* La tipografía de iconos deja más caja bajo el glifo que sobre él. */
  transform: translateY(-3px);
}

/* Hover contenido: el ámbar como tinte, no como bloque de color. */
.category a:hover .category-icon,
.category:hover .category-icon {
  background: var(--bt-ambar-luz) !important;
  border-color: var(--bt-ambar) !important;
  box-shadow: var(--bt-sombra-1);
}
.category a:hover .category-icon i,
.category:hover .category-icon i { color: var(--bt-ambar-osc) !important; }

.category .category-title .title,
.category h4.title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--bt-ink) !important;
  margin-top: 12px !important;
  letter-spacing: -.005em;
  transition: color var(--bt-t);
}
.category a:hover .title { color: var(--bt-ambar-osc) !important; }


/* ==========================================================================
   J. CABECERA DE SECCIÓN CON PESTAÑAS (header.show-nav)
   --------------------------------------------------------------------------
   El <h2 class="h1"> viene VACÍO desde WPBakery, y como el contenedor es
   flex con space-between, la navegación se iba sola a la derecha.
   Arreglo visual: se colapsa el título vacío y las pestañas se alinean a la
   izquierda como una barra de verdad.
   >>> Lo correcto es escribir el título del módulo en WPBakery. <<<
   ========================================================================== */

header.show-nav {
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 4px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--bt-200);
  padding-bottom: 0 !important;
  margin-bottom: 20px;
}
header.show-nav::-webkit-scrollbar { display: none; }

/* Si el título está vacío no debe reservar espacio ni empujar la nav. */
header.show-nav > h2:empty { display: none !important; }

header.show-nav > h2:not(:empty) {
  margin: 0 24px 0 0 !important;
  white-space: nowrap;
}

header.show-nav .nav-inline {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 2px;
  margin: 0 !important;
  padding: 0 !important;
}

header.show-nav .nav-link {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--bt-600) !important;
  padding: 10px 14px !important;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  border-radius: 0 !important;
  transition: color var(--bt-t), border-color var(--bt-t) !important;
}

header.show-nav .nav-link:hover {
  color: var(--bt-ink) !important;
  border-bottom-color: var(--bt-200);
  transform: none;
  box-shadow: none;
}

header.show-nav .nav-item.active .nav-link,
header.show-nav .nav-link.active {
  color: var(--bt-ink) !important;
  border-bottom-color: var(--bt-ambar);
}


/* ==========================================================================
   K. NUESTRAS MARCAS  (lo que sigue debajo NO es de marcas)
   --------------------------------------------------------------------------
   VACIADA. El carrusel de WPBakery ya no existe en la portada: lo sustituye
   marcado propio con SVG monocromos, en la seccion AB de este mismo archivo
   y en `inc/bt-marcas.php`.

   Aqui vivia el emparejado de los logos por caja de 96x34 con object-fit
   y `transform: scale(.82)` en los cuadrados. Era un apano sobre unos PNG
   con margenes transparentes distintos; ahora el ajuste vive en el dibujo.

   LO QUE VIENE A CONTINUACION es la anulacion del hover del tema sobre las
   TARJETAS DE PRODUCTO, que nunca tuvo que ver con las marcas y sigue viva.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Electro aplica en el hover su propia sombra, rgba(1,1,1,.3) 0 0 6px: un
   halo gris duro y sin dirección de luz. Se anula, y no se sustituye por
   nada: la tarjeta se delimita con su borde de 1 px, como en asgoodasnew,
   donde 26 reglas de box-shadow son `none`.

   El hover propio está entero en la sección H. Aquí solo se desactiva el del
   tema; no añadir más declaraciones de hover en este bloque.
   -------------------------------------------------------------------------- */
.product-card .product-inner,
.product .product-inner {
  box-shadow: none !important;
}

/* NO tocar el padding ni el margen de .card-media-left: el contenedor es
   un flex item al 43% y el cuerpo al 57%. Al cambiar padding por margin la
   suma pasaba del 100%, la fila se envolvía y la tarjeta saltaba de
   horizontal a vertical (152 -> 288 px de alto).
   El overflow:hidden mantiene ademas al contenedor abrazando la imagen. */
.product-card .card-media-left,
.product .card-media-left { overflow: hidden !important; }


/* ==========================================================================
   L. SEGUNDA PASADA — correcciones sobre lo revisado
   ========================================================================== */

/* --- L1. Separadores cuadrados -------------------------------------------
   Las rejillas 3 y 4 llevan border 2px #F4F4F4 en el <li>: un marco cuadrado
   del tema rodeando mis tarjetas redondeadas. Dos marcos compitiendo. */
ul.products > .product,
ul.products > .product-card,
.products.exclude-auto-height > .product,
.products.exclude-auto-height > .product-card {
  border: 0 !important;
  box-shadow: none !important;
  padding: 6px !important;
}

/* --- L2. Tooltip negro ----------------------------------------------------
   Es un tooltip de Bootstrap (data-bs-toggle="tooltip") en el envoltorio del
   botón. Salía en negro puro y se montaba sobre la tarjeta vecina: por eso
   parecía que las tarjetas se solapaban. No es un error de stock. */
.tooltip .tooltip-inner {
  background: var(--bt-ink) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 6px 10px !important;
  border-radius: var(--bt-r-sm) !important;
  box-shadow: var(--bt-sombra-2);
  max-width: 200px;
}
.tooltip .tooltip-arrow::before { border-top-color: var(--bt-ink) !important; }
.tooltip { opacity: 1 !important; }

/* --- L3. Botón de carrito: más grande y con icono actual ------------------
   El icono venía de un pseudo-elemento de Font Awesome 6 (una mano
   señalando). Se sustituye por un trazo moderno con mask-image, que hereda
   el color y no depende de la fuente de iconos. */
:root {
  --bt-ico-carrito: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='17.5' cy='20' r='1.4'/%3E%3Cpath d='M2.5 3.5h2.6l2.3 11.4a1.6 1.6 0 0 0 1.6 1.3h8.2a1.6 1.6 0 0 0 1.6-1.3L20.4 7.6H6'/%3E%3C/svg%3E");
  --bt-ico-camion: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2h11.3v9.6H2.5z'/%3E%3Cpath d='M13.8 9.4h3.4l2.8 2.9v3.5h-6.2z'/%3E%3Ccircle cx='6.6' cy='18' r='1.9'/%3E%3Ccircle cx='16.1' cy='18' r='1.9'/%3E%3C/svg%3E");
  --bt-ico-flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

.product-card .add-to-cart-wrap .button,
.product-card .add_to_cart_button,
.product .add-to-cart-wrap .button,
.product .add_to_cart_button,
.product .add-to-cart-wrap .button {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
}

.product-card .add-to-cart-wrap .button::before,
.product-card .add_to_cart_button::before,
.product .add-to-cart-wrap .button::before,
.product .add_to_cart_button::before,
.product .add-to-cart-wrap .button::before {
  content: '' !important;
  display: block !important;
  width: 21px;
  height: 21px;
  background-color: currentColor;
  -webkit-mask: var(--bt-ico-carrito) center / contain no-repeat;
  mask: var(--bt-ico-carrito) center / contain no-repeat;
  font-size: 0 !important;
}

/* Producto con variantes: no se añade al carrito, se va a elegir opciones.
   Una flecha sola obliga a interpretar. Se conserva como señal de avance y se
   acompaña de "Ver": CTA corto, claro y compatible con precios largos. */
.product-card .add_to_cart_button.product_type_variable::before,
.product .add_to_cart_button.product_type_variable::before {
  -webkit-mask-image: var(--bt-ico-flecha);
  mask-image: var(--bt-ico-flecha);
}

.product-card .add_to_cart_button.product_type_variable,
.product .add_to_cart_button.product_type_variable {
  width: auto !important;
  min-width: 70px !important;
  padding: 0 12px !important;
  gap: 6px;
  border-radius: 999px !important;
}

.product-card .add_to_cart_button.product_type_variable::before,
.product .add_to_cart_button.product_type_variable::before {
  width: 18px;
  height: 18px;
}

.product-card .add_to_cart_button.product_type_variable::after,
.product .add_to_cart_button.product_type_variable::after {
  display: inline !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  color: currentColor !important;
  content: 'Ver' !important;
  font-size: 12px !important;
  font-weight: 700;
  line-height: 1 !important;
  text-indent: 0 !important;
  white-space: nowrap;
}

@media (max-width: 479px) {
  .product-card .add_to_cart_button.product_type_variable,
  .product .add_to_cart_button.product_type_variable {
    min-width: 66px !important;
    padding-inline: 9px !important;
    gap: 4px;
  }
}

/* --- L4. Buscador ---------------------------------------------------------
   Es un control compuesto: input + select + botón, pegados. Mi estilo
   genérico de formularios le dio a cada pieza su propio borde y su radio de
   10 px, y el select quedó 4 px más bajo. Resultado: tres cajas sueltas
   apretadas en vez de una barra. Se trata como UNA sola pieza. */
.navbar-search {
  display: flex !important;
  align-items: stretch;
}

.navbar-search .input-group,
.navbar-search form {
  display: flex !important;
  align-items: stretch;
  width: 100%;
  border: 1px solid var(--bt-200);
  border-radius: var(--bt-r-md);
  overflow: hidden;
  background: #fff;
  transition: border-color var(--bt-t), box-shadow var(--bt-t);
}
.navbar-search .input-group:focus-within,
.navbar-search form:focus-within {
  border-color: var(--bt-ambar);
  box-shadow: 0 0 0 3px var(--bt-ambar-luz);
}

.navbar-search input[type="text"],
.navbar-search input[type="search"] {
  flex: 1 1 auto;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: 44px !important;
  padding: 0 16px !important;
}
.navbar-search input:focus { box-shadow: none !important; border: 0 !important; }

.navbar-search select {
  border: 0 !important;
  border-left: 1px solid var(--bt-200) !important;
  border-radius: 0 !important;
  height: 44px !important;
  padding: 0 30px 0 14px !important;
  font-size: 14px !important;
  color: var(--bt-600) !important;
  background-color: #fff !important;
  box-shadow: none !important;
  min-width: 150px;
}
.navbar-search select:focus { box-shadow: none !important; }

.navbar-search button,
.navbar-search .btn {
  border: 0 !important;
  border-radius: 0 !important;
  height: 44px !important;
  min-width: 56px;
  background: var(--bt-ambar) !important;
  color: #fff !important;
  transform: none !important;
  box-shadow: none !important;
}
.navbar-search button:hover { background: var(--bt-ambar-osc) !important; transform: none !important; }

/* --- L5. Categorías: accesos directos, no carrusel heredado --------------
   Cada categoría es un área pulsable limpia: círculo como ancla visual,
   título compacto y una única señal de interacción en ámbar. */
.category-icons-carousel .category > a {
  gap: 10px;
  padding: 8px 4px;
  border-radius: var(--bt-r-md);
  text-decoration: none;
  transition: background-color var(--bt-t);
}

.category-icons-carousel .category .category-icon {
  width: 92px !important;
  height: 92px !important;
  background: #fff !important;
  border: 1px solid var(--bt-200) !important;
}
.category-icons-carousel .category .category-icon i {
  font-size: 38px !important;
  color: var(--bt-800) !important;
}
.category-icons-carousel .category .category-title .title {
  margin: 0 !important;
  min-height: 33px;
  height: auto !important;
  overflow: visible !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.25;
}

.category-icons-carousel .category a:hover .category-icon,
.category-icons-carousel .category:hover .category-icon {
  background: var(--bt-ambar-luz) !important;
  border-color: var(--bt-ambar) !important;
  transform: translateY(-2px);
}
.category-icons-carousel .category a:hover .title,
.category-icons-carousel .category a:focus-visible .title {
  color: var(--bt-ambar-osc) !important;
}
.category-icons-carousel .category > a:focus-visible {
  outline: 2px solid var(--bt-ambar);
  outline-offset: 3px;
}
.category-icons-carousel .category > a:active .category-icon {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .category-icons-carousel .category > a,
  .category-icons-carousel .category .category-icon { transition: none !important; }
}

/* --- L6. Barra de navegación principal ------------------------------------
   Una banda naranja a todo lo ancho es mucho ámbar y envejece la web.
   En grafito, con el ámbar reservado para el estado activo, pesa más. */
.navbar-primary,
.electro-navbar,
.header-v3 .navbar-nav-wrap,
nav.navbar-primary {
  background: var(--bt-ink) !important;
}
.navbar-primary .nav-link,
.electro-navbar .nav-link {
  color: rgba(255,255,255,.86) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: .005em;
  border-bottom: 2px solid transparent;
  transition: color var(--bt-t), border-color var(--bt-t) !important;
}
.navbar-primary .nav-link:hover,
.electro-navbar .nav-link:hover {
  color: #fff !important;
  border-bottom-color: var(--bt-ambar);
  transform: none;
  box-shadow: none;
}

/* --- L7. Barra superior de servicio --------------------------------------- */
.top-bar a, .topbar a, .header-top a {
  font-size: 13px !important;
  color: var(--bt-600) !important;
  font-weight: 500 !important;
}
.top-bar a:hover, .topbar a:hover, .header-top a:hover { color: var(--bt-ambar-osc) !important; }


/* --- L6-bis. La banda de navegación es .electro-navbar-primary ------------
   (mi selector anterior no acertaba). Una franja naranja a todo lo ancho es
   mucho ámbar y es lo que más envejece la cabecera. En grafito, con el
   ámbar reservado al hover y al activo, pesa mucho más.
   El bloque de newsletter del pie usa el mismo naranja: se deja, ahí sí
   funciona como llamada. */
.electro-navbar-primary {
  background: var(--bt-ink) !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.electro-navbar-primary .nav > li > a,
.electro-navbar-primary .nav-inline > li > a,
.electro-navbar-primary .menu-item > a {
  color: rgba(255,255,255,.88) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: .005em;
  transition: color var(--bt-t) !important;
}

.electro-navbar-primary .nav > li > a:hover,
.electro-navbar-primary .nav-inline > li > a:hover,
.electro-navbar-primary .menu-item > a:hover,
.electro-navbar-primary .menu-item:hover > a,
.electro-navbar-primary .current-menu-item > a,
.electro-navbar-primary .active > a {
  color: #fff !important;
  background: transparent !important;
  transform: none !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Hover.css — efecto "underline from center", de Ian Lunn (licencia MIT).
   https://ianlunn.co.uk/articles/hover-css-tutorial-introduction

   Se copia el efecto en lugar de encolar la librería entera: es lo que
   recomienda el propio autor cuando solo se usan unos pocos, y el LCP ya
   está en 4,3 s como para añadir otra hoja bloqueante con 95 efectos sin
   usar.

   Antes había aquí un `border-bottom: 2px solid transparent` que solo
   cambiaba de color: aparecía de golpe, entero y en todo el ancho. Este
   crece desde el centro en los 220 ms del sistema. Hay que quitar aquel
   borde o se sumarían los dos y se vería una línea doble.

   De la clase base de la librería se descartan tres cosas:
     · `display: inline-block` — medido: el <a> ya es block dentro de un <ul>
       flex, y cambiarlo rompería el reparto de la barra.
     · `z-index: -1` en el :before — escondería la barra tras el fondo grafito.
     · `box-shadow: 0 0 1px rgba(0,0,0,0)` — es un parche de antialiasing para
       WebKit antiguo, y choca con la regla dura de "sin resplandores".
   -------------------------------------------------------------------------- */
.electro-navbar-primary .nav > li > a {
  position: relative;        /* medido: venía en static */
  overflow: hidden;
}

.electro-navbar-primary .nav > li > a::before {
  content: "";
  position: absolute;
  left: 51%;
  right: 51%;
  bottom: 0;
  height: 2px;
  background: var(--bt-ambar);
  transition: left var(--bt-t), right var(--bt-t);
}

/* El elemento activo la lleva fija, y el foco de teclado la enciende igual
   que el ratón: si el efecto solo existiera en :hover, quien navega con
   tabulador se quedaría sin ninguna señal de dónde está.

   El `.nav > li` de estos tres selectores NO sobra. La regla de arriba, que
   deja la barra recogida en el centro, es `.electro-navbar-primary .nav > li > a`
   -> (0,2,2). Escrito como `.electro-navbar-primary .current-menu-item > a`
   esto sale a (0,2,1) y pierde: el elemento activo se quedaba sin barra
   mientras el hover sí funcionaba, porque el :hover ya suma por su cuenta. */
.electro-navbar-primary .nav > li.current-menu-item > a::before,
.electro-navbar-primary .nav > li.active > a::before,
.electro-navbar-primary .nav > li > a:focus-visible::before {
  left: 0;
  right: 0;
}

@media (hover: hover) {
  .electro-navbar-primary .nav > li > a:hover::before,
  .electro-navbar-primary .nav > li:hover > a::before {
    left: 0;
    right: 0;
  }
}


/* ==========================================================================
   M. TERCERA PASADA
   ========================================================================== */

/* --- M1. Buscador: la línea ámbar y las alturas descuadradas --------------
   .input-group-addon.search-categories trae border 2px #F89A20 del tema: esa
   era la línea ámbar que cruzaba. Y cada pieza medía distinto:
   input-group 41 / input-search-field 39 / input 44 / addon 39 / select 44.
   Se normaliza toda la cadena a 46 px y se quita el borde del addon. */

.navbar-search .input-group,
.navbar-search .input-search-field,
.navbar-search .twitter-typeahead,
.navbar-search .input-group-addon,
.navbar-search .search-categories,
.navbar-search input.search-field,
.navbar-search select,
.navbar-search button,
.navbar-search .btn {
  height: 46px !important;
  min-height: 46px !important;
  box-sizing: border-box;
}

.navbar-search .input-group-addon,
.navbar-search .search-categories {
  border: 0 !important;
  border-left: 1px solid var(--bt-200) !important;
  background: #fff !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
}

.navbar-search .input-search-field,
.navbar-search .twitter-typeahead {
  flex: 1 1 auto;
  display: flex !important;
  align-items: center;
}

.navbar-search input.search-field {
  width: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 18px !important;
  font-size: 15px !important;
}
.navbar-search input.search-field::placeholder { color: var(--bt-400); }

.navbar-search select {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 32px 0 16px !important;
  background-color: #fff !important;
  cursor: pointer;
}

.navbar-search button,
.navbar-search .btn {
  width: 58px;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* El desplegable de sugerencias del buscador (typeahead), a juego. */
.navbar-search .tt-menu {
  border: 1px solid var(--bt-200) !important;
  border-radius: var(--bt-r-md) !important;
  box-shadow: var(--bt-sombra-3) !important;
  margin-top: 6px !important;
  overflow: hidden;
  padding: 6px !important;
}
.navbar-search .tt-suggestion {
  padding: 10px 12px !important;
  border-radius: var(--bt-r-sm);
  font-size: 14px;
  transition: background-color var(--bt-t);
}
.navbar-search .tt-suggestion:hover,
.navbar-search .tt-suggestion.tt-cursor { background: var(--bt-ambar-luz) !important; }


/* --- M2. Categorías: el carrusel recortaba el hover -----------------------
   .owl-stage-outer tiene overflow:hidden y 100 px de alto fijados por JS.
   Al subir el círculo a 92 px el contenido pasó a 124 y se cortaba.
   Se libera la altura (el recorte horizontal se mantiene). */

.categories-carousel .owl-stage-outer,
.categories-carousel .owl-stage,
.categories-carousel .owl-item,
.categories-carousel .category {
  height: auto !important;
  min-height: 0 !important;
}

/* Aire para que la elevación del hover tampoco se corte. */
.categories-carousel .owl-stage-outer { padding: 6px 0 2px !important; }

.categories-carousel .category > a {
  display: flex !important;
  flex-direction: column;
  align-items: center;
}


/* --- M3. Barra de navegación: separadores verticales ---------------------- */
.electro-navbar-primary .nav > li::after,
.electro-navbar-primary .nav > li::before,
.electro-navbar-primary .nav-inline > li::after,
.electro-navbar-primary .menu-item::after {
  display: none !important;
  content: none !important;
}

.electro-navbar-primary .nav > li,
.electro-navbar-primary .menu-item {
  border: 0 !important;
  margin-right: 4px;
}

.electro-navbar-primary .nav > li > a,
.electro-navbar-primary .menu-item > a {
  padding: 14px 16px !important;
}



/* ==========================================================================
   ==========================================================================
   CSS RESCATADO DE LOS SNIPPETS PHP
   --------------------------------------------------------------------------
   Estaba embebido en bloques <style> dentro de PHP, repartido en 4 snippets.
   Problemas que causaba:
     · el #12 se imprimía en wp_footer con prioridad 9999 ("Override total"),
       así que ganaba a cualquier hoja de estilos
     · el CSS viajaba en cada respuesta HTML en vez de en un archivo cacheable
     · estaba en cuatro sitios distintos, imposible de mantener
   ==========================================================================
   ========================================================================== */

/* ===== extraído del snippet #9 — Blacktronic trust badges ===== */
.bt-premium-divider {
  border: 0;
  height: 1px;
  background: var(--bt-200);
  margin: 25px 0;
}
.bt-premium-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 25px;
}
.bt-trust-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px 8px;
  background: var(--bt-blanco);
  border: 1px solid var(--bt-200);
  border-radius: var(--bt-r-md);
  transition: border-color var(--bt-t), box-shadow var(--bt-t);
}
.bt-trust-box:hover {
  border-color: var(--bt-ambar);
  box-shadow: var(--bt-sombra-1);
}
.bt-trust-box svg {
  margin-bottom: 10px;
  width: 26px;
  height: 26px;
  color: var(--bt-ambar);   /* los SVG usan stroke="currentColor" */
}
.bt-trust-box strong {
  font-size: 12px;
  color: var(--bt-ink);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 4px;
}
.bt-trust-box p {
  font-size: 11px;
  color: var(--bt-600);
  margin: 0;
  line-height: 1.2;
}
@media (max-width: 550px) {
  .bt-premium-trust { grid-template-columns: repeat(2, 1fr); }
  .bt-trust-box { padding: 14px 6px; }
}

/* ===== extraído del snippet #12 — Forzar márgenes variaciones móvil ===== */
/* Override total para Variation Swatches en móvil */
            @media (max-width: 768px) {
                form.variations_form.wvs-loaded {
                    width: calc(100% - 32px) !important; /* Le quitamos 16px por cada lado */
                    max-width: calc(100% - 32px) !important;
                    margin: 0 auto !important; /* Lo centramos a la fuerza */
                    padding: 0 !important;
                    display: block !important;
                }
                form.variations_form.wvs-loaded table.variations {
                    width: 100% !important;
                    margin: 0 !important;
                }
                .woocommerce div.product form.cart .button {
                    width: 100% !important;
                }
            }

/* ===== extraído del snippet #14 — Destacar Recogida HOY =====
   El snippet imprimía el <style> una vez por método de envío y llevaba
   ~300 bytes de estilos en línea en el <span>. Ahora solo emite la clase. */
.bt-recogida-hoy {
  display: inline-block;
  background-color: var(--bt-ok);
  color: var(--bt-blanco);
  font-size: 11px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: var(--bt-r-sm);
  margin-left: 8px;
  text-transform: uppercase;
  letter-spacing: .5px;
  vertical-align: middle;
  animation: pulse-hoy 2s infinite;
}
@keyframes pulse-hoy {
  0%   { box-shadow: 0 0 0 0 rgba(31, 122, 76, .4); }
  70%  { box-shadow: 0 0 0 6px rgba(31, 122, 76, 0); }
  100% { box-shadow: 0 0 0 0 rgba(31, 122, 76, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .bt-recogida-hoy { animation: none; }
}

/* Aviso de "puedes recogerlo hoy" bajo las opciones de envío del checkout. */
.bt-recogida-aviso {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 12px 16px;
  background: #F0FBF5;
  border: 1px solid #BFE3CE;
  border-radius: var(--bt-r-md);
  font-size: 13px;
  line-height: 1.4;
  color: var(--bt-ok);
}
.bt-recogida-aviso svg { flex: 0 0 auto; }
.bt-recogida-aviso strong { font-weight: 700; }

/* ===== extraído del snippet #11 — Blacktronic grados ===== */
.bt-grados-wrap{margin:16px 0}
    .bt-grados-label{font-size:12px;font-weight:600;color:#111;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
    .bt-grados-btns{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
    .bt-grade-btn{padding:7px 14px;border-radius:var(--bt-r-md);border:2px solid #e0e0e0;background:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:all var(--bt-t);color:#555}
    .bt-grade-btn:hover{border-color:#f5a623}
    .bt-grade-btn.active{border-color:#f5a623;background:#fff8ee;color:#111}
    .bt-desc-box{border-radius:var(--bt-r-md);padding:14px}
    .bt-badge{padding:4px 10px;border-radius:var(--bt-r-sm);font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;display:inline-block;margin-bottom:6px}
    .bt-desc-title{font-size:14px;font-weight:700;display:block;margin-bottom:4px}
    .bt-tagline{font-size:12px;line-height:1.5;margin-bottom:8px}
    .bt-toggle{font-size:12px;color:#f5a623;cursor:pointer;font-weight:600;background:none;border:none;padding:0}
    .bt-more{font-size:12px;line-height:1.7;margin-top:8px;padding-top:8px;border-top:1px solid rgba(0,0,0,0.08);display:none}
    .bt-more ul{padding-left:16px;margin:4px 0}
    .bt-more li{margin-bottom:3px}
    .bt-ideal{font-style:italic;margin-top:6px;font-size:11px;opacity:.8}
    .g-precintado .bt-desc-box{background:#e8f5e9}.g-precintado .bt-badge{background:#2e7d32;color:#fff}.g-precintado .bt-desc-title,.g-precintado .bt-tagline,.g-precintado .bt-more{color:#1b5e20}
    .g-impecable .bt-desc-box{background:#e3f2fd}.g-impecable .bt-badge{background:#1565c0;color:#fff}.g-impecable .bt-desc-title,.g-impecable .bt-tagline,.g-impecable .bt-more{color:#0d47a1}
    .g-buenestado .bt-desc-box{background:#fff8e1}.g-buenestado .bt-badge{background:#f5a623;color:#fff}.g-buenestado .bt-desc-title,.g-buenestado .bt-tagline,.g-buenestado .bt-more{color:#bf6000}
    .g-usado .bt-desc-box{background:#f1f8e9}.g-usado .bt-badge{background:#558b2f;color:#fff}.g-usado .bt-desc-title,.g-usado .bt-tagline,.g-usado .bt-more{color:#33691e}
    .g-reacondicionado .bt-desc-box{background:#f3e5f5}.g-reacondicionado .bt-badge{background:#6a1b9a;color:#fff}.g-reacondicionado .bt-desc-title,.g-reacondicionado .bt-tagline,.g-reacondicionado .bt-more{color:#4a148c}


/* ==========================================================================
   N. FICHA DE PRODUCTO — galería y jerarquía de botones
   ========================================================================== */

/* --- N1. Galería pegajosa ------------------------------------------------
   Medido en el iPhone 14: la galería mide 566 px y la columna derecha 1.490.
   Eso deja 925 px de columna izquierda en blanco — más alto que la propia
   imagen. Con sticky, la foto acompaña la lectura como en asgoodasnew. */
@media (min-width: 992px) {
  /* Electro parte la galería en TRES hermanos dentro de
     .product-images-wrapper: el badge .onsale (absolute), la imagen
     principal .woocommerce-product-gallery y las miniaturas
     .electro-wc-product-gallery. Si solo se fija la imagen, las miniaturas
     y el badge se quedan atrás y se montan encima. Se fija el contenedor. */
  .single-product .single-product-wrapper {
    align-items: flex-start;
  }

  .single-product .product-images-wrapper {
    /* El tema declara position:relative con igual o más especificidad, así
       que aquí hace falta !important o el sticky nunca llega a aplicarse. */
    position: sticky !important;
    top: 30px;
    align-self: flex-start;
  }

  /* La imagen vuelve a su flujo normal dentro del contenedor fijado. */
  .single-product .woocommerce-product-gallery {
    position: relative !important;
    top: auto !important;
  }

  /* La barra de admin es fixed y tapa 32 px.
     OJO: .admin-bar y .single-product están en el MISMO <body>, así que hay
     que encadenarlas sin espacio. Con espacio la regla no matchea nunca y la
     imagen se mete debajo de la barra. */
  .admin-bar.single-product .product-images-wrapper {
    top: 62px;
  }
  /* El sticky no engancha si CUALQUIER ancestro tiene overflow distinto de
     visible: pasa a ser su contenedor de scroll y, al no scrollear, nunca
     se fija. El culpable era .hfeed.site, el envoltorio general del tema.
     Se libera solo en la ficha de producto para no alterar el resto. */
  .single-product .hfeed.site,
  .single-product div.product,
  .single-product div.product > .row,
  .single-product .single-product-wrapper,
  .single-product .product-images-wrapper {
    overflow: visible !important;
  }
}

/* --- N2. Jerarquía de los botones ----------------------------------------
   "Añadir al carrito" y "Comprar ahora" tenían el mismo tamaño y el mismo
   fondo ámbar: dos llamadas compitiendo, ninguna gana. Se convierte
   "Comprar ahora" en secundaria de contorno. */
.single-product .single_add_to_cart_button {
  background: var(--bt-ambar) !important;
  /* Grafito y no blanco, por contraste: ver el bloque del sistema más arriba.
     Esta regla es más específica que aquella, así que si se cambia una hay que
     cambiar las dos o el botón de la ficha se queda con el color viejo. */
  color: var(--bt-ink) !important;
  border: 2px solid var(--bt-ambar) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: .005em;
  padding: 15px 30px !important;
  box-shadow: none;
}
.single-product .single_add_to_cart_button:hover {
  background: var(--bt-ambar-osc) !important;
  border-color: var(--bt-ambar-osc) !important;
  box-shadow: none;
}

.single-product .wc-buy-now-btn,
.single-product [class*="buy-now"] .button {
  background: #fff !important;
  color: var(--bt-ink) !important;
  border: 2px solid var(--bt-200) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.single-product .wc-buy-now-btn:hover,
.single-product [class*="buy-now"] .button:hover {
  border-color: var(--bt-ink) !important;
  background: #fff !important;
  color: var(--bt-ink) !important;
}

/* Los iconos de carrito venían de la fuente antigua del tema. */
.single-product .single_add_to_cart_button i,
.single-product .wc-buy-now-btn i { display: none !important; }

.single-product form.cart { align-items: stretch; gap: 10px; }
.single-product form.cart .quantity input { height: 100%; border-radius: var(--bt-r-md) !important; }

@media (max-width: 600px) {
  .single-product .single_add_to_cart_button,
  .single-product .wc-buy-now-btn { width: 100%; }
}

/* --- N2b. El botón cuando aún falta elegir algo --------------------------
   Mientras no hay variación resuelta, WooCommerce le pone `.disabled` y
   Bootstrap lo deja en `pointer-events:none` con `opacity:.65`. El problema
   no es que no funcione —es correcto, falta elegir—: es que **sigue
   pintándose como la llamada principal**, ámbar entera y a tamaño completo.
   Se ve pulsable, se pulsa, y no pasa absolutamente nada. Ni un mensaje.
   Medido en el móvil: caja de 345x61 px que se traga el toque.

   Con el swatches v2.5 esto ya solo ocurre donde SÍ hay algo que elegir de
   verdad (el iPhone 14, por ejemplo, tiene dos colores y dos estados de
   batería comprables), así que la respuesta correcta no es encender el
   botón: es que deje de prometer que se puede pulsar y diga qué falta.

   No se toca `pointer-events`: dejarlo pulsable enviaría el formulario y
   recargaría la página entera para mostrar un aviso de WooCommerce. Se
   cambia solo lo que promete. */
.single-product .single_add_to_cart_button.disabled,
.single-product .single_add_to_cart_button.wc-variation-selection-needed {
  background: transparent !important;
  color: var(--bt-600) !important;
  border: 1.5px dashed var(--bt-200) !important;
  box-shadow: none !important;
  opacity: 1 !important;   /* el .65 de Bootstrap encima del gris lo dejaba ilegible */
}

/* Y que diga qué falta, en vez de callarse. El texto del botón lo pone
   WooCommerce; esto añade la pista debajo, y desaparece sola en cuanto la
   variación se resuelve porque la clase se va. */
.single-product .single_add_to_cart_button.wc-variation-selection-needed::after {
  content: "Elige las opciones para continuar";
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  /* --bt-400 (#8E939B) daba 2,8:1 sobre blanco, por debajo del mínimo de 4,5:1
     para texto pequeño. --bt-600 (#5C6169) da 6,4:1 y sigue leyéndose como
     secundario frente al texto del botón. */
  color: var(--bt-600);
  margin-top: 4px;
}


/* --- N3. Precio con rebaja ------------------------------------------------
   Se marca en rojo cálido y el tachado queda como referencia discreta. */
.single-product .summary .price ins,
.single-product .woocommerce-variation-price .price ins,
.single-product .summary .price ins .amount,
.single-product .woocommerce-variation-price ins .amount {
  color: var(--bt-rebaja) !important;
  font-weight: 800 !important;
  text-decoration: none;
}
.single-product .summary .price del,
.single-product .woocommerce-variation-price del {
  color: var(--bt-400) !important;
  font-weight: 400 !important;
  font-size: .62em !important;
  margin-left: 8px;
}
.single-product .summary .price,
.single-product .woocommerce-variation-price .price {
  font-size: 32px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: -.02em;
}

/* Etiqueta de ahorro que añade el plugin */
.bt-ahorro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bt-rebaja);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  margin-left: 10px;
  vertical-align: middle;
  letter-spacing: .01em;
}
.bt-omnibus {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--bt-400);
}


/* --- N5. La galería no puede pintar las 8 fotos apiladas -----------------
   Medido el 28-ago en producción con PageSpeed: la ficha tiene CLS 0,321
   —"pobre"— y es la peor página de la tienda. Reproducido en local: 0,306.

   La causa NO era el formulario de variaciones, que era la sospecha de
   partida. Cargando la misma URL en un iframe sin JavaScript, a 375 px:

       galería principal   2.760 px  sin JS  ->  345 px  con JS
       miniaturas          2.968 px  sin JS  ->  112 px  con JS
                           --------------------------------
                           5.728 px          ->  457 px      <- el salto

       (el resumen solo pasa de 1.208 a 1.268: los 60 px del formulario de
        variaciones son ruido al lado de esto)

   El navegador pinta las ocho imágenes una debajo de otra y, cuando arranca
   FlexSlider, las recoge en un carrusel. Todo lo que hay debajo —precio,
   botones, cajas de confianza, pestañas— sube 5.271 px de golpe.

   EL GANCHO, que es toda la gracia y donde me equivoqué a la primera:

   Intento fallido — colgar la regla de la cadena de hijos directos, porque
   FlexSlider envuelve el carril en un `.flex-viewport`. Salta DEMASIADO
   PRONTO: el envoltorio se inserta al principio de la inicialización, la
   regla deja de aplicar en ese instante, las siete fotos ocultas reaparecen
   apiladas y solo después el carrusel las recoge. Resultado medido: **dos**
   saltos grandes en vez de uno, CLS 0,628 — el doble que sin arreglar.

   Lo que sí funciona: FlexSlider escribe el estilo EN LÍNEA en cada
   diapositiva cuando ya la ha colocado —`width: 345px; float: left;
   display: block`— y el estilo en línea gana al de la hoja. Así que basta un
   selector normal, sin gancho: oculta mientras el carrusel no ha colocado
   nada, y se cancela solo en el momento exacto en que lo hace.

   Por eso aquí NO se puede usar `!important`: le ganaría al estilo en línea
   y dejaría la galería con una sola foto para siempre.

   La primera foto mide lo mismo antes y después (345 px) y lleva `width` y
   `height` en el HTML, así que el hueco reservado es exacto, no aproximado. */

.single-product .woocommerce-product-gallery__image:not(:first-child),
.single-product .electro-wc-product-gallery__image:not(:first-child) {
  display: none;
}

/* Con la miniatura que queda no basta: sin el JS ocupa el ancho entero de la
   columna y se pinta a 355 px de alto, cuando acabará midiendo 90. Se le da
   por adelantado el ancho de columna que le pondrá FlexSlider —la galería es
   `--columns-5`, o sea el 20 %—, y el alto sale solo por proporción. También
   se cancela sola: el carrusel escribe `width: 90px` en línea. */
.single-product .electro-wc-product-gallery__image:first-child {
  width: 20%;
}


/* ==========================================================================
   O. BOTÓN DE CARRITO Y CARRUSEL DE CATEGORÍAS
   ========================================================================== */

/* --- O1. Botón de carrito siempre visible --------------------------------
   Electro lo oculta a propósito: pinta el icono en #EAEAEA mientras la
   tarjeta no está en hover, y al pasar el ratón lo cambia a fondo negro.
   Resultado: gris casi blanco sobre crema (invisible) y luego un negro que
   no pega con nada. Un botón de compra no se esconde.
   La regla del tema usa :not(:hover) y en algunas variantes !important, así
   que aquí hace falta la misma munición. */

.product-card .add-to-cart-wrap .button,
.product-card .add_to_cart_button,
.product .add-to-cart-wrap .button,
.product:not(:hover) .add-to-cart-wrap .button,
.product:not(:hover) .add-to-cart-wrap .button {
  background-color: var(--bt-ambar-luz) !important;
  color: var(--bt-ambar-osc) !important;
  border: 1px solid rgba(232, 145, 47, .35) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* El icono es una máscara: su color sale de background-color, no de color. */
.product-card .add-to-cart-wrap .button::before,
.product-card .add_to_cart_button::before,
.product .add-to-cart-wrap .button::before,
.product:not(:hover) .add-to-cart-wrap .button::before,
.product:not(:hover) .add-to-cart-wrap .button::before {
  background-color: var(--bt-ambar-osc) !important;
  color: var(--bt-ambar-osc) !important;
  opacity: 1 !important;
}

/* El hover de la tarjeta no toma el control del CTA. El boton permanece
   visible y sereno; solo se vuelve ambar cuando el usuario apunta al propio
   boton, una señal de accion mucho mas precisa. */
.product-card:hover .add-to-cart-wrap .button,
.products > .product:hover .add-to-cart-wrap .button,
.owl-item > .product:hover .add-to-cart-wrap .button {
  background-color: var(--bt-ambar-luz) !important;
  color: var(--bt-ambar-osc) !important;
  border-color: rgba(232, 145, 47, .35) !important;
}

.product-card .add-to-cart-wrap .button:hover,
.product-card .add_to_cart_button:hover,
.products > .product .add-to-cart-wrap .button:hover,
.owl-item > .product .add-to-cart-wrap .button:hover {
  background-color: var(--bt-ambar) !important;
  color: #fff !important;
  border-color: var(--bt-ambar) !important;
}

.product-card .add-to-cart-wrap .button:hover::before,
.product-card .add_to_cart_button:hover::before,
.products > .product .add-to-cart-wrap .button:hover::before,
.owl-item > .product .add-to-cart-wrap .button:hover::before {
  background-color: #fff !important;
  color: #fff !important;
}


/* --- O2. Carrusel de categorías -------------------------------------------
   Las 6 categorías se muestran como una fila centrada, no pegadas a los
   extremos del contenedor. Si cabe todo, no es un carrusel: es una fila. */
@media (min-width: 768px) {
  .categories-carousel .owl-stage-outer { width: 100% !important; }

  .categories-carousel .owl-stage {
    width: 100% !important;
    display: flex !important;
    justify-content: center;
    transform: none !important;
    gap: clamp(20px, 4vw, 72px);
  }

  .categories-carousel .owl-item {
    width: 116px !important;
    flex: 0 0 116px;
    margin: 0 !important;
  }

  /* Con todo a la vista, las flechas sobran. */
  .categories-carousel .owl-nav,
  .categories-carousel .owl-prev,
  .categories-carousel .owl-next { display: none !important; }
}

/* --- O3. Flecha suelta en "Nuestras marcas" -------------------------------
   VACIADA. Escondia la flecha que WPBakery dejaba suelta en el carrusel de
   marcas. Ya no hay carrusel: ver la seccion AB. ------------------------ */


/* ==========================================================================
   P. CARRITO — quitar fricción
   --------------------------------------------------------------------------
   Estado medido: 2.522 px de alto con un solo producto; la fila del producto
   ocupaba 378 px, de los cuales 271 (72 %) eran los atributos por ir cada
   par etiqueta/valor en dos líneas.
   ========================================================================== */

/* --- P1. Atributos en una línea ------------------------------------------
   De "Grado:\nImpecable\nColor:\nNegro\n..." a
   "Grado: Impecable · Color: Negro · ..." */
.woocommerce-cart .cart_item .variation,
.woocommerce-cart .cart_item dl.variation {
  display: block;
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--bt-600);
}
.woocommerce-cart .cart_item .variation dt,
.woocommerce-cart .cart_item .variation dd {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
}
.woocommerce-cart .cart_item .variation dt {
  font-weight: 400;
  color: var(--bt-400);
}
.woocommerce-cart .cart_item .variation dd {
  font-weight: 600;
  color: var(--bt-ink);
}
.woocommerce-cart .cart_item .variation dd::after {
  content: " · ";
  font-weight: 400;
  color: var(--bt-200);
  margin: 0 4px;
}
.woocommerce-cart .cart_item .variation dd:last-of-type::after { content: ""; }
.woocommerce-cart .cart_item .variation dd p { display: inline !important; margin: 0 !important; }

/* La miniatura era de 92 px en una tabla de 1.170. */
.woocommerce-cart .cart_item .product-thumbnail img {
  width: 110px !important;
  max-width: none;
  border-radius: var(--bt-r-md);
  border: 1px solid var(--bt-200);
}

.woocommerce-cart .cart_item .product-name > a {
  font-size: 16px;
  font-weight: 700;
  color: var(--bt-ink);
  line-height: 1.35;
}

/* --- P2. El cupón deja de gritar -----------------------------------------
   "Aplicar cupón" tenía fondo #333E48: el elemento más contrastado del
   carrito, por delante del botón de comprar. */
.bt-cupon-toggle {
  background: none;
  border: 0;
  padding: 6px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--bt-600);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--bt-t);
}
.bt-cupon-toggle:hover { color: var(--bt-ink); }
.bt-cupon-toggle.esta-abierto { color: var(--bt-ink); font-weight: 600; }

.woocommerce-cart .coupon { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.woocommerce-cart .coupon input[type="text"] {
  flex: 1 1 190px;
  height: 44px;
}
.woocommerce-cart .coupon .button {
  background: #fff !important;
  color: var(--bt-ink) !important;
  border: 1px solid var(--bt-200) !important;
  height: 44px;
  font-weight: 600 !important;
}
.woocommerce-cart .coupon .button:hover {
  border-color: var(--bt-ink) !important;
  background: #fff !important;
}

/* --- P3. Jerarquía de botones --------------------------------------------
   El de comprar medía lo mismo que uno deshabilitado. */
.bt-oculto { display: none !important; }

.woocommerce-cart .wc-proceed-to-checkout { padding: 0 !important; }
.woocommerce-cart .checkout-button {
  display: block !important;
  width: 100% !important;
  padding: 18px 24px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  background: var(--bt-ambar) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--bt-r-md) !important;
  text-align: center;
  box-shadow: none;
}
.woocommerce-cart .checkout-button:hover {
  background: var(--bt-ambar-osc) !important;
}

/* --- P4. Ahorro y totales ------------------------------------------------- */
.bt-fila-ahorro th { color: var(--bt-rebaja) !important; font-weight: 600 !important; }
.bt-fila-ahorro td { color: var(--bt-rebaja) !important; text-align: right; }

/* La misma fila, en el checkout de bloques. */
.bt-ahorro-bloques .wc-block-components-totals-item__label,
.bt-ahorro-bloques .wc-block-components-totals-item__value,
.bt-ahorro-bloques .woocommerce-Price-amount {
  color: var(--bt-rebaja) !important;
  font-weight: 600 !important;
}

.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--bt-ink) !important;
  padding-top: 14px !important;
  border-top: 2px solid var(--bt-ink) !important;
}

/* --- P5. Confianza junto al botón ---------------------------------------- */
.bt-carrito-confianza {
  list-style: none;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--bt-200);
  display: grid;
  gap: 10px;
}
.bt-carrito-confianza li { display: flex; flex-direction: column; gap: 1px; }
.bt-carrito-confianza strong { font-size: 13.5px; color: var(--bt-ink); font-weight: 600; }
.bt-carrito-confianza span { font-size: 12.5px; color: var(--bt-400); }

/* --- P6. Envío ------------------------------------------------------------ */
/* El tema posiciona en absoluto los spans dentro de las etiquetas de envío,
   así que la nota se salía del flujo y se montaba sobre el propio texto.
   Hay que devolverla al flujo explícitamente. */
.bt-envio-nota, .bt-envio-gratis {
  position: static !important;
  display: block !important;
  width: auto !important;
  float: none !important;
  font-size: 12.5px;
  line-height: 1.45;
  margin-top: 3px;
}

.woocommerce-cart .cart_totals ul#shipping_method li,
.woocommerce-cart .cart_totals #shipping_method li {
  padding: 9px 0 !important;
  line-height: 1.5;
  display: block;
}
.woocommerce-cart .cart_totals ul#shipping_method label {
  display: inline !important;
}
.bt-envio-nota { color: var(--bt-600); }
.bt-envio-gratis { color: var(--bt-ok); font-weight: 600; }

/* --- P7. Venta cruzada ---------------------------------------------------- */
.bt-cross-sell { margin: 28px 0; }
.bt-cross-sell h3 { font-size: 17px !important; margin: 0 0 14px !important; }
.bt-cross-sell__lista { display: grid; gap: 10px; }
.bt-cross-sell__item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border: 1px solid var(--bt-200);
  border-radius: var(--bt-r-md);
  background: #fff;
  transition: border-color var(--bt-t);
}
.bt-cross-sell__item:hover { border-color: var(--bt-ambar); }
.bt-cross-sell__img img { width: 56px; height: 56px; object-fit: contain; border-radius: var(--bt-r-sm); }
.bt-cross-sell__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bt-cross-sell__info a { font-size: 14px; font-weight: 600; color: var(--bt-ink); line-height: 1.3; }
.bt-cross-sell__precio { font-size: 14px; font-weight: 700; color: var(--bt-ink); }
.bt-cross-sell__precio del { font-size: .8em; color: var(--bt-400); font-weight: 400; }
.bt-cross-sell__add {
  background: var(--bt-ambar-luz);
  color: var(--bt-ambar-osc) !important;
  border: 1px solid rgba(232,145,47,.35);
  border-radius: var(--bt-r-sm);
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--bt-t), color var(--bt-t);
}
.bt-cross-sell__add:hover { background: var(--bt-ambar); color: #fff !important; }

@media (max-width: 600px) {
  .woocommerce-cart .cart_item .product-thumbnail img { width: 80px !important; }
  .bt-cross-sell__item { grid-template-columns: 48px 1fr; row-gap: 8px; }
  .bt-cross-sell__add { grid-column: 2; justify-self: start; }
}


/* --- P8. El botón de pago, DESPUÉS del total ------------------------------
   Electro mueve "Finalizar compra" a la fila de acciones de la tabla y
   oculta el que WooCommerce pone bajo los totales. Resultado medido: el
   botón aparecía en y=1027 y los totales en y=1527, o sea el cliente veía
   "pagar" 500 px antes de saber cuánto pagaba, qué envío tenía y cuánto
   ahorraba. Se invierte: se muestra el de los totales y se oculta el otro. */

.woocommerce-cart .cart_totals .wc-proceed-to-checkout {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin-top: 16px;
}

.woocommerce-cart .woocommerce-cart-form .wc-proceed-to-checkout,
.woocommerce-cart td.actions .wc-proceed-to-checkout {
  display: none !important;
}

.woocommerce-cart .cart_totals .checkout-button {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* La fila de acciones se queda solo con el cupón: que no ocupe de más. */
.woocommerce-cart td.actions { padding: 18px 0 0 !important; }

/* La columna de totales tiene 500 px: le damos aire y jerarquía. */
.woocommerce-cart .cart_totals {
  background: var(--bt-050);
  border: 1px solid var(--bt-200);
  border-radius: var(--bt-r-lg);
  padding: 22px 24px 24px;
}
.woocommerce-cart .cart_totals h2 {
  font-size: 19px !important;
  margin: 0 0 14px !important;
}
.woocommerce-cart .cart_totals table { margin: 0 !important; }
.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td {
  border: 0 !important;
  padding: 9px 0 !important;
  background: transparent !important;
}
.woocommerce-cart .cart_totals tr:not(:last-child) th,
.woocommerce-cart .cart_totals tr:not(:last-child) td {
  border-bottom: 1px solid var(--bt-200) !important;
}


/* --- P9. Carrito a dos columnas, con el resumen arriba a la derecha -------
   WooCommerce apila los totales DEBAJO de la tabla:

     div.woocommerce (block)
     ├── form.woocommerce-cart-form   y=493
     └── div.cart-collaterals         y=755   <- debajo
         ├── venta cruzada            y=858
         └── cart_totals              y=1174  -> boton en y=1608

   Electro no trae ninguna opción para cambiarlo (sus ajustes de carrito son
   solo el icono de cabecera y la barra fija móvil) y tampoco sobrescribe la
   plantilla. Así que se rehace el layout con CSS Grid: producto y venta
   cruzada a la izquierda, resumen a la derecha empezando a la misma altura
   y pegajoso al hacer scroll.

   .cart-collaterals pasa a display:contents para que sus hijos entren
   directamente en la rejilla del padre. */

/* El corte estaba en 992px y era demasiado pronto. Medido a 1167px: los
   totales se llevan 380px fijos y a la tabla le quedan 518, que repartidos
   entre seis columnas dejan el NOMBRE del producto en 146px. Un portatil con
   nombre largo caia en 13 lineas.

   A partir de 1200px si hay sitio para las dos columnas. Por debajo, el
   carrito se apila: la tabla ocupa todo el ancho y los totales van debajo,
   que es donde el usuario los busca despues de revisar lo que lleva. */
@media (min-width: 1200px) {

  .woocommerce-cart .entry-content > .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    column-gap: 32px;
    align-items: start;
  }

  /* Avisos y notificaciones, a todo lo ancho. */
  .woocommerce-cart .entry-content > .woocommerce > .bt-vac-box,
  .woocommerce-cart .entry-content > .woocommerce > .woocommerce-notices-wrapper,
  .woocommerce-cart .entry-content > .woocommerce > .woocommerce-message,
  .woocommerce-cart .entry-content > .woocommerce > .bt-pasos {
    grid-column: 1 / -1;
  }

  .woocommerce-cart .woocommerce-cart-form {
    grid-column: 1;
    grid-row: 3;
    margin-bottom: 0 !important;
  }

  /* Los hijos de collaterals suben a la rejilla del padre. */
  .woocommerce-cart .cart-collaterals {
    display: contents !important;
  }

  .woocommerce-cart .bt-cross-sell {
    grid-column: 1;
    grid-row: 4;
    width: auto !important;
    margin-top: 24px;
  }

  .woocommerce-cart .cart_totals {
    grid-column: 2;
    grid-row: 3 / span 2;
    width: auto !important;
    float: none !important;
    position: sticky;
    top: 20px;
    align-self: start;
    margin: 0 !important;
  }
}

/* Por debajo de 992 px se apila, que es lo correcto en móvil. */
@media (max-width: 991px) {
  .woocommerce-cart .cart_totals { margin-top: 20px; }
  .woocommerce-cart .bt-cross-sell { margin-top: 20px; }
}


/* --- P10. El cupón no se plegaba -----------------------------------------
   El JS le pone hidden, pero mi propia regla .coupon { display: flex } pisa
   el valor por defecto de [hidden] (display:none) y seguía viéndose. */
.woocommerce-cart .coupon[hidden] { display: none !important; }

/* --- P11. Indicador de pasos ---------------------------------------------- */
.bt-pasos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.bt-pasos li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--bt-400);
  white-space: nowrap;
}
.bt-pasos li + li::before {
  content: "";
  display: block;
  width: clamp(24px, 8vw, 90px);
  height: 1px;
  background: var(--bt-200);
  margin: 0 14px;
}
.bt-pasos .bt-paso__n {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bt-100);
  color: var(--bt-400);
  font-size: 12.5px; font-weight: 700;
  flex: 0 0 auto;
}
.bt-pasos .es-activo { color: var(--bt-ink); font-weight: 600; }
.bt-pasos .es-activo .bt-paso__n { background: var(--bt-ambar); color: #fff; }
.bt-pasos .es-hecho .bt-paso__n { background: var(--bt-ok); color: #fff; }

@media (max-width: 600px) {
  .bt-pasos li span:not(.bt-paso__n) { display: none; }
  .bt-pasos li + li::before { width: 28px; margin: 0 8px; }
}


/* ==========================================================================
   Q. CHECKOUT (bloques de WooCommerce)
   ========================================================================== */

/* --- Q1. El botón final medía 40 px de alto -------------------------------
   Por debajo del mínimo táctil recomendado (44-48 px) y con el 75 % del
   tráfico en móvil. */
.wc-block-checkout__actions .wc-block-components-checkout-place-order-button,
.wc-block-components-checkout-place-order-button {
  min-height: 54px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  border-radius: var(--bt-r-md) !important;
  background: var(--bt-ambar) !important;
  color: #fff !important;
  box-shadow: none;
  transition: background-color var(--bt-t) !important;
}
.wc-block-components-checkout-place-order-button:hover {
  background: var(--bt-ambar-osc) !important;
}

/* --- Q2. Resumen y pasarelas ---------------------------------------------- */
.wc-block-checkout__sidebar .wc-block-components-totals-item__label { color: var(--bt-600); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--bt-ink) !important;
}

/* La comisión de gestión, marcada para que no pase inadvertida. */
.wc-block-components-totals-item:has(.wc-block-components-totals-item__label:not(:empty)) .wc-block-components-totals-item__label {
  font-weight: 500;
}

/* Método de pago seleccionado, más evidente. */
.wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control__option--checked-option-highlighted {
  border-color: var(--bt-ambar) !important;
  background: var(--bt-ambar-luz) !important;
}

/* --- Q3. Indicador de pasos ----------------------------------------------- */
.bt-pasos--checkout { margin: 0 auto 26px; }


/* ==========================================================================
   R. CUENTA — acceso y registro
   --------------------------------------------------------------------------
   Casi nada de esta pantalla se estiliza aquí. Lo que la página ya carga:

     .form-floating   Bootstrap 5.0.2, que Electro extiende a los .input-text
                      de WooCommerce -> la etiqueta que sube al escribir
     .password-input  WooCommerce inyecta el botón de ver/ocultar y Electro
                      ya trae su CSS con los dos iconos
     .row .col-lg-6   rejilla de Bootstrap
     .mb-3 .d-flex …  utilidades de Bootstrap
     .fas fa-*        Font Awesome 6.5.1
     .button.alt      botón ámbar, ya resuelto en la sección C
     .input-text      borde y foco, ya resueltos en la sección F

   Aquí solo queda lo que no existe en ninguna librería: el panel grafito de
   la izquierda y la conmutación entre acceso y registro.

   La conmutación es CSS puro, con dos radios ocultos. Sin JavaScript no hay
   parpadeo al cargar y sobrevive a un recargo con error de validación, que es
   justo donde fallan los tabs de Bootstrap.
   ========================================================================== */

/* Electro envuelve esta pantalla en su propio `.customer-login-form`, y el
   `.woocommerce` que lo contiene es un CONTENEDOR FLEX. Por eso ese wrap es un
   flex item que se encoge al ancho de su contenido —es decir, al max-width de
   aquí abajo— y el `margin: auto` de la tarjeta no tenía espacio que repartir:
   se quedaba pegada al borde izquierdo del contenedor de 1430 px.
   Lo que hay que centrar es el flex item, no la tarjeta. */
.woocommerce-account .woocommerce > .customer-login-form {
  margin-left: auto;
  margin-right: auto;
}

.bt-cuenta {
  max-width: 1060px;
  margin: 8px auto 56px;
  background: var(--bt-blanco);
  border: 1px solid var(--bt-200);
  border-radius: var(--bt-r-lg);
  box-shadow: var(--bt-sombra-3);
  overflow: hidden;
}

/* Los radios gobiernan qué vista se ve. Ocultos pero enfocables, para que se
   pueda llegar con el teclado. */
.bt-cuenta__radio {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.bt-cuenta__vista { display: none; }
#bt-vista-acceso:checked   ~ .row .bt-cuenta__vista--acceso   { display: block; }
#bt-vista-registro:checked ~ .row .bt-cuenta__vista--registro { display: block; }
/* Sin registro abierto no se imprimen los radios: manda el acceso. */
.bt-cuenta--solo-acceso .bt-cuenta__vista--acceso { display: block; }

/* El radio recibe el foco antes que su etiqueta, así que el anillo se pinta
   sobre ella. Sustituye al JavaScript que antes escuchaba Enter. */
.bt-cuenta__radio:focus-visible ~ .row .bt-cuenta__cambio-boton {
  outline: 2px solid var(--bt-ambar);
  outline-offset: 3px;
  border-radius: var(--bt-r-sm);
}


/* --- R1. Panel de la izquierda: para qué sirve la cuenta ------------------
   Grafito, que es la mitad de la identidad y hasta ahora no aparecía en
   ninguna superficie grande. El ámbar solo en los iconos: si lo lleva todo,
   deja de destacar el botón, que es lo único que hay que pulsar. */
/* Ojo con el !important de los paddings: la row lleva `g-0`, y la regla
   `.g-0 > *` de Bootstrap empata en especificidad con estas clases. Como
   `electro/style.min.css` se encola DESPUÉS de esta hoja (se puede comprobar
   en el <head>), Electro gana todos los empates. Por eso aquí hace falta
   forzar, aunque el selector parezca de sobra. */
.bt-cuenta__valor {
  background: var(--bt-ink);
  color: var(--bt-blanco);
  padding: 44px 42px !important;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.bt-cuenta__marca {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bt-ambar);
}

/* El color va forzado: Electro pinta los h2 de esta pantalla con su tinta
   oscura, y sobre el panel grafito el titular quedaba negro sobre negro. */
.bt-cuenta__valor-titulo {
  margin: 0 !important;
  font-size: 27px !important;
  line-height: 1.24;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--bt-blanco) !important;
  text-wrap: balance;
  /* Electro le cuelga una línea ámbar y un borde a los h2 de esta pantalla.
     Sobre fondo oscuro y con el color de marca justo encima, sobra. */
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.bt-cuenta__valor-titulo::after { display: none !important; }

.bt-cuenta__ventajas {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bt-ventaja {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: start;
}

.bt-ventaja__icono {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--bt-r-md);
  background: rgba(232, 145, 47, .12);
  color: var(--bt-ambar);
  font-size: 17px;
}

.bt-ventaja__texto {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .7);
}
.bt-ventaja__texto strong {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--bt-blanco);
  margin-bottom: 2px;
}

.bt-cuenta__tienda {
  margin-top: auto !important;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .58);
  gap: 10px;
  align-items: flex-start;
}
.bt-cuenta__punto {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--bt-ok);
  box-shadow: 0 0 0 3px rgba(31, 122, 76, .22);
}


/* --- R2. Panel del formulario -------------------------------------------- */
.bt-cuenta__panel { padding: 44px 42px !important; }

/* Electro pinta un "o" flotante entre las dos columnas del login de serie.
   Aquí ya no hay dos columnas que separar: sobra. */
.bt-cuenta .or-text,
.woocommerce-account .or-text { display: none !important; }

.bt-cuenta__titulo {
  margin: 0 0 6px !important;
  font-size: 30px !important;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--bt-ink) !important;
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.bt-cuenta__titulo::after { display: none !important; }

.bt-cuenta__sub {
  margin: 0 0 26px;
  font-size: 14.5px;
  color: var(--bt-600);
}

/* Texto de apoyo bajo un campo. */
.bt-ayuda {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--bt-600);
}

/* Hueco para "Entrar con Google" y compañía. La plantilla solo lo dibuja si
   un plugin de acceso externo ha enganchado algo. */
.bt-cuenta__social { display: grid; gap: 10px; margin-bottom: 18px; }
.bt-cuenta__social a,
.bt-cuenta__social button {
  width: 100%;
  min-height: 48px;
  border-radius: var(--bt-r-md) !important;
}

.bt-cuenta__o {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  font-size: 13px;
  color: var(--bt-400);
}
.bt-cuenta__o::before,
.bt-cuenta__o::after {
  content: "";
  height: 1px;
  background: var(--bt-200);
}


/* --- R3. Encaje entre .form-floating y la sección F -----------------------
   La sección F impone `padding: 11px 14px !important` a todos los inputs del
   sitio, y .form-floating necesita 1rem arriba y abajo para que quepa la
   etiqueta encogida. Se le devuelve el padding SOLO aquí dentro, en vez de
   relajar la sección F, que sirve al resto de la web. */
.bt-cuenta .form-floating > .input-text,
.bt-cuenta .form-floating > .password-input > .input-text {
  padding: 1rem !important;
  height: calc(3.5rem + 2px);
}

/* La etiqueta encogida y el valor escrito comparten caja: sin esto, el texto se
   solapa con la etiqueta al subir. */
.bt-cuenta .form-floating > .input-text:focus,
.bt-cuenta .form-floating > .input-text:not(:placeholder-shown),
.bt-cuenta .form-floating > .password-input > .input-text:focus,
.bt-cuenta .form-floating > .password-input > .input-text:not(:placeholder-shown) {
  padding-top: 1.625rem !important;
  padding-bottom: .625rem !important;
}

.bt-cuenta .form-floating > label {
  color: var(--bt-600);
  font-size: 15px;
}

/* --- Contraseñas: el nivel que mete WooCommerce --------------------------
   `woocommerce.js` envuelve cada input[type=password] en un
   <span class="password-input"> al cargar la página, y le cuelga el botón de
   ver/ocultar. Eso deja el input como NIETO de .form-floating, así que los
   selectores de Bootstrap —que exigen hijo directo— dejan de encontrarlo y la
   etiqueta se queda plantada encima del texto.

   Se reproduce aquí con :has(), ya usado en la sección Q. Los valores son los
   mismos que Bootstrap aplica a los campos normales, para que los dos tipos de
   campo se muevan igual. */
.bt-cuenta .form-floating > .password-input { display: block; }

.bt-cuenta .form-floating > .password-input > .input-text {
  padding-right: 3rem !important;   /* hueco para el botón del ojo */
}

/* El placeholder es el mecanismo de .form-floating, no un texto que deba verse:
   Bootstrap lo pone transparente y usa :not(:placeholder-shown) para saber
   cuándo subir la etiqueta. Ese reset tampoco alcanza al input anidado, así que
   el placeholder se veía por debajo de la etiqueta. */
.bt-cuenta .form-floating > .password-input > .input-text::placeholder {
  color: transparent;
}

.bt-cuenta .form-floating:has(> .password-input > .input-text:focus) > label,
.bt-cuenta .form-floating:has(> .password-input > .input-text:not(:placeholder-shown)) > label {
  opacity: .65;
  transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}

/* El botón del ojo se centra sobre el campo, no sobre la etiqueta flotante. */
.bt-cuenta .form-floating > .password-input > .show-password-input {
  top: calc((3.5rem + 2px) / 2);
}

.bt-check {
  display: flex !important;
  align-items: center;
  gap: 9px;
  margin: 0 !important;
  font-size: 14px;
  color: var(--bt-700);
  cursor: pointer;
}
.bt-check .form-check-input {
  width: 18px; height: 18px;
  margin: 0 !important;
  flex: 0 0 auto;
  accent-color: var(--bt-ambar);
  cursor: pointer;
}

.bt-enlace-clave {
  font-size: 14px;
  color: var(--bt-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bt-enlace-clave:hover { color: var(--bt-ambar); }


/* --- R4. Conmutador entre acceso y registro ------------------------------- */
.bt-cuenta__cambio {
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--bt-200);
  font-size: 14.5px;
  color: var(--bt-600);
  text-align: center;
}

.bt-cuenta__cambio-boton {
  display: inline-block;
  margin-left: 4px;
  font-weight: 600;
  color: var(--bt-ambar);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.bt-cuenta__cambio-boton:hover { color: var(--bt-ambar-osc); }


/* --- R5. Avisos de WooCommerce sobre esta pantalla ------------------------ */
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info {
  max-width: 1060px;
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--bt-r-md);
}


/* --- R6. Móvil ------------------------------------------------------------
   Bootstrap ya apila las columnas por debajo de lg y ya invierte el orden con
   `order-first` / `order-lg-last`: el formulario arriba y las razones debajo.
   Aquí solo quedan los tamaños. El 75 % del tráfico es móvil, así que esta es
   la vista que importa.

   Los !important no son decorativos: la regla base los lleva para ganarle a
   Electro, y sin ellos aquí la media query perdería contra su propia regla
   base, que es más fuerte pese a ir antes. */
@media (max-width: 991.98px) {
  .bt-cuenta { margin-bottom: 36px; }
  .bt-cuenta__valor { padding: 28px 24px !important; gap: 18px; }
  .bt-cuenta__valor-titulo { font-size: 21px !important; }
  .bt-cuenta__ventajas { gap: 16px; }
  .bt-cuenta__tienda { padding-top: 18px; }
  .bt-cuenta__panel { padding: 30px 24px !important; }
  .bt-cuenta__titulo { font-size: 25px !important; }
}

@media (max-width: 480px) {
  .bt-cuenta { border-radius: var(--bt-r-md); }
}


/* ==========================================================================
   S. FICHA DE PRODUCTO — lo que se elige y lo que solo se sabe
   --------------------------------------------------------------------------
   Medido el 25-ago-2026: de los 297 selectores de variación de la tienda,
   264 (el 89 %) ofrecen UNA SOLA opción, y 72 de los 73 productos variables
   tienen al menos uno. En el iPhone 14 había que pulsar "128GB" y "5G" para
   poder comprar, sin que existiera otra capacidad ni otra conectividad.

   Esas filas se ocultan y su contenido reaparece abajo como ficha de datos.
   El <select> sigue en el DOM —oculto— porque add-to-cart-variation.js lo
   necesita para resolver la variación.
   ========================================================================== */

/* La fila desaparece de la vista, no del documento. */
.variations tr.bt-fila-unica {
  display: none !important;
}

/* Si TODO el producto es de opción única, la tabla entera sobra: no queda
   ninguna decisión que tomar y solo dejaría un hueco. */
.variations:not(:has(tr:not(.bt-fila-unica))) {
  display: none !important;
}


/* --- S1. Ficha de datos ---------------------------------------------------
   Lo que el cliente decide queda arriba, en los selectores. Lo que el aparato
   simplemente es queda aquí: se lee, no se pulsa. De ahí que no tenga aspecto
   de control —ni borde grueso, ni sombra, ni cursor de mano. */
.bt-datos {
  list-style: none;
  margin: 4px 0 22px !important;
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  background: var(--bt-050);
  border: 1px solid var(--bt-200);
  border-radius: var(--bt-r-md);
}

.bt-dato {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.bt-dato__k {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--bt-400);
}

.bt-dato__v {
  font-size: 15px;
  font-weight: 600;
  color: var(--bt-ink);
}


/* --- S2. Los selectores que SÍ son una decisión --------------------------
   Al quedar dos o tres en vez de cinco, pueden respirar. */
.variations tr:not(.bt-fila-unica) th.label label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bt-700);
}

.variations tr:not(.bt-fila-unica) + tr:not(.bt-fila-unica) th.label,
.variations tr:not(.bt-fila-unica) + tr:not(.bt-fila-unica) td.value {
  padding-top: 6px;
}

/* "Limpiar" era un enlace suelto y sin contexto justo encima del botón de
   comprar. Se queda, porque con varias opciones hace falta, pero deja de
   competir con la acción principal. */
.variations .reset_variations {
  display: inline-block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--bt-400);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.variations .reset_variations:hover { color: var(--bt-700); }


/* --- S3. Móvil ------------------------------------------------------------ */
@media (max-width: 767px) {
  .bt-datos {
    gap: 10px 18px;
    padding: 12px 14px;
  }
  .bt-dato__v { font-size: 14.5px; }
}


/* --- S4. Un solo grado: informar, no hacer elegir -------------------------
   55 de los 60 productos con grado tienen uno solo. En esos, el bloque de
   grados pedía "elegir" entre una única fila, con su radio y su precio, y ese
   precio salía otra vez —más grande y ya actualizado— justo debajo. En movil
   se veían las dos cifras casi seguidas.

   Aquí el bloque conserva lo que aporta (qué estado es, qué implica y qué
   garantía lleva) y suelta lo que sobra. */
.btg--unico .btg__sel,
.btg--unico .btg__marca,
.btg--unico .btg__precio {
  display: none !important;
}

.btg--unico .btg__fila {
  grid-template-columns: 1fr !important;
  cursor: default;
}

/* Sin radio que marcar, el resaltado ámbar de "seleccionado" ya no significa
   nada: era la señal de que habías elegido esa fila. */
.btg--unico .btg__fila.es-disponible {
  background: var(--bt-050) !important;
  border-color: var(--bt-200) !important;
}


/* --- S5. El precio, una sola vez -----------------------------------------
   Al preseleccionar la variación, WooCommerce rellena
   `.woocommerce-variation-price` con el precio exacto —el que además trae el
   ahorro y el porcentaje— mientras el `.price` de la cabecera sigue mostrando
   el suyo. Resultado: la misma cifra dos veces, a media pantalla de distancia.

   Antes esto no se veía porque sin preselección el bloque de la variación
   nacía vacío.

   Gana el de la variación: es el exacto y el único que se actualiza al cambiar
   de color o de capacidad. El de la cabecera solo vuelve cuando no hay
   variación resuelta, que es cuando de verdad hace falta enseñar un rango. */
.single-product .summary:has(.single_variation .woocommerce-variation-price .price) > .price {
  display: none;
}


/* ==========================================================================
   T. PÁGINAS DE TEXTO — garantía, devoluciones, envíos, FAQ
   --------------------------------------------------------------------------
   Medido en /garantia/: el contenido ocupaba los 930 px del contenedor, unos
   91 caracteres por línea. A partir de ~75 el ojo pierde el renglón al saltar
   de una línea a la siguiente, y estas son justo las páginas que alguien lee
   entero antes de gastarse 600 € en un móvil de segunda mano.

   Solo afecta a páginas normales: se excluyen carrito, checkout, cuenta y
   cualquier página montada con WPBakery, que traen su propio maquetado.

   OJO CON EL ÁMBITO. La primera versión de esto decía
   `.page:not(.woocommerce-page):not(.wpb-js-composer)` y estranguló el carrito,
   Mi cuenta y el checkout a 554 px (= 52ch), dejando la columna izquierda del
   carrito en 142 px y el texto cayendo letra a letra. El motivo: esas dos clases
   viven en el <body>, no en el mismo elemento que `.page`. El <article> del
   carrito es `post-5722 page type-page status-publish hentry`, así que los dos
   :not() no excluían nada.

   Además `wpb-js-composer` está en el body de TODAS las páginas —WPBakery está
   activo globalmente—, así que como marcador de "página maquetada" no sirve. Lo
   que sí distingue una página maquetada es que su contenido traiga `.vc_row`.
   ========================================================================== */

body:not(.woocommerce-page) .entry-content:not(:has(.vc_row)) > * {
  /* 52ch y no 68ch: la unidad `ch` mide el ancho del cero, y en Outfit el cero
     es bastante mas ancho que la letra media. Medido en pantalla, 68ch daban
     91 caracteres reales por linea; 52ch dan ~70, que es el rango comodo. */
  max-width: 52ch;
}

/* Las líneas horizontales y el pie de la página sí ocupan todo el ancho. */
body:not(.woocommerce-page) .entry-content:not(:has(.vc_row)) > hr {
  max-width: none;
}

body:not(.woocommerce-page) .entry-content:not(:has(.vc_row)) {
  font-size: 16px;
  line-height: 1.7;
  color: var(--bt-700);
}

body:not(.woocommerce-page) .entry-content:not(:has(.vc_row)) h2 {
  margin: 34px 0 12px;
  font-size: 21px;
  font-weight: 600;
  color: var(--bt-ink);
}

body:not(.woocommerce-page) .entry-content:not(:has(.vc_row)) h3 {
  margin: 24px 0 6px;
  font-size: 17px;
  font-weight: 600;
  color: var(--bt-ink);
}

body:not(.woocommerce-page) .entry-content:not(:has(.vc_row)) li {
  margin-bottom: 7px;
}

/* Primer párrafo: la respuesta corta, antes del detalle. */
body:not(.woocommerce-page) .entry-content:not(:has(.vc_row)) p.lead {
  font-size: 18.5px;
  line-height: 1.6;
  color: var(--bt-ink);
  /* Sin franja lateral: un lead se distingue por tamano y color, que es para
     lo que sirve. El borde de acento era decoracion prestada. */
}


/* --- P-bis. Cuánto falta para el envío gratis ----------------------------
   El umbral de 100 € ya existía dentro del plugin de GLS, pero el carrito no
   lo mencionaba: un pedido de 10 € pagaba 5 € de porte sin que el cliente
   supiera siquiera que había envío gratis, ni a cuánto estaba. */
/* Sin franja de color a la izquierda. Ese recurso —el borde lateral grueso de
   las alertas de Bootstrap— no comunica nada: es decoracion que delata la
   plantilla. Aqui el aviso se distingue por su fondo tintado y por un icono que
   si dice de que va: un camion. */
.bt-envio-progreso {
  margin: 0 0 20px;
  padding: 13px 16px 13px 46px;
  position: relative;
  background: var(--bt-ambar-luz);
  border: 1px solid var(--bt-200);
  border-radius: var(--bt-r-md);
  font-size: 14.5px;
  color: var(--bt-700);
}

/* El camion, en el mismo trazo que el resto de iconos del sitio. */
.bt-envio-progreso::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 13px;
  width: 20px;
  height: 20px;
  background: var(--bt-ambar);
  -webkit-mask: var(--bt-ico-camion) center / contain no-repeat;
          mask: var(--bt-ico-camion) center / contain no-repeat;
}
.bt-envio-progreso p { margin: 0; }
.bt-envio-progreso strong { color: var(--bt-ink); }

.bt-envio-barra {
  height: 6px;
  margin-top: 10px;
  background: var(--bt-200);
  border-radius: 100px;
  overflow: hidden;
}
.bt-envio-barra span {
  display: block;
  height: 100%;
  background: var(--bt-ambar);
  border-radius: 100px;
  transition: width var(--bt-t);
}

/* Conseguido: verde, y sin barra que ya no mide nada. */
.bt-envio-progreso--ok {
  background: rgba(31, 122, 76, .07);
  border-color: rgba(31, 122, 76, .22);
}
.bt-envio-progreso--ok::before { background: var(--bt-ok); }
.bt-envio-progreso--ok strong { color: var(--bt-ok); }


/* --- P8. Los distintivos del envío, en flujo -----------------------------
   Electro coloca el precio del método de envío con

       #shipping_method li label > span { position:absolute; right:0; top:2px }

   Cualquier <span> que sea hijo directo del label hereda ese tratamiento, así
   que el badge "¡Recógelo HOY!" y la nota de la dirección se apilaban sobre el
   texto y lo tapaban —visible en el carrito a 1025 px—. Aquí vuelven al flujo.

   La regla de Electro lleva un ID, así que hay que igualarlo para ganarle:
   por eso el selector arranca también en #shipping_method. */
#shipping_method li label > .bt-recogida-hoy,
.woocommerce-shipping-methods li label > .bt-recogida-hoy {
  position: static;
  display: inline-block;
  vertical-align: baseline;
}

#shipping_method li label > .bt-envio-nota,
#shipping_method li label > .bt-envio-gratis,
.woocommerce-shipping-methods li label > .bt-envio-nota,
.woocommerce-shipping-methods li label > .bt-envio-gratis {
  position: static;
  display: block;
  margin-left: 0;
}

/* El label deja de necesitar altura reservada para el absoluto. */
#shipping_method li label,
.woocommerce-shipping-methods li label {
  display: block;
  line-height: 1.45;
}


/* ==========================================================================
   U. COHERENCIA — lo que delataba la plantilla
   --------------------------------------------------------------------------
   Revisión del 26-ago con la skill `impeccable`. El propietario señaló que la
   tienda "parecía slop"; los tres motivos concretos que dio eran correctos y
   están corregidos arriba (franjas laterales fuera, un solo vocabulario de
   tarjeta). Aquí quedan los detalles que aún delataban el montaje.
   ========================================================================== */

/* --- U1. "Ver detalle" no es un botón del tema ---------------------------
   Electro pinta CUALQUIER <button> con su gris:

       .btn:not([class*="btn-"]):not(.single_add_to_cart_button):not(...)
           { background: #efecec }

   El CSS de BT_Grados va en un <style> en línea y pierde ese pulso, así que
   "Ver detalle" salía como un botón gris con su radio. Se corrige desde aquí,
   que es donde vive el sistema y donde hay especificidad para ganar.

   Actualizado 8-sep: era un enlace subrayado. Ahora es el rótulo pequeño en
   versalita que se repite en todo el bloque —cabecera, garantía y rótulos de
   la ficha técnica—, y quien indica que despliega es el chevron, que lo dibuja
   el módulo con un ::after y gira al abrir. El subrayado sobraba: con el
   chevron delante son dos señales para lo mismo. */
.btg .btg__mas,
.btg button.btg__mas {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 4px 0 !important;
  color: var(--bt-400) !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: none !important;
}
.btg .btg__mas:hover,
.btg button.btg__mas:hover {
  background: none !important;
  color: var(--bt-ink) !important;
  text-decoration: none;
  box-shadow: none !important;
}

/* El chevron. El módulo ya lo dibuja, pero algo del tema le gana el `transform`
   —medido: se quedaba clavado en -115° y no giraba al abrir—, así que la versión
   que manda vive aquí, con la misma especificidad que el resto del bloque U1.
   Se deja también en el módulo para que funcione si algún día corre sin el tema
   hijo. */
.btg .btg__mas {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.btg .btg__mas::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  /* Sin !important: la regla de abajo es más específica y tiene que poder
     ganarle. Con !important en las dos, la primera se llevaba el giro y el
     chevron se quedaba apuntando abajo tanto abierto como cerrado. */
  transform: rotate(45deg);
  transition: transform var(--bt-t);
}
.btg .btg__mas[aria-expanded="true"]::after {
  margin-top: 2px;
  transform: rotate(-135deg);
}
/* El foco sí se marca, pero con el anillo del sistema, no con un fondo. */
.btg .btg__mas:focus-visible {
  outline: 2px solid var(--bt-ambar);
  outline-offset: 2px;
  border-radius: var(--bt-r-sm) !important;
}


/* --- U2. Títulos de producto: cortar donde toca --------------------------
   La altura fija de 39 px recortaba el título a media palabra, sin puntos
   suspensivos: "Cargador para Macbook Pro/", "IPHONE 17 PRO MAX NARANJA".
   Medido a 1167 px: 3 de cada 7 tarjetas del carrusel. */
/* La altura tambien se fija aqui, y esta es la parte que faltaba. Electro
   declara 2.334em (y 2.57144em desde 992 px) calculados sobre SU
   line-height, no sobre el nuestro (1.35). De ahi que la caja midiera 39 px
   cuando dos lineas ocupan 41: se cortaban los trazos de abajo de la
   segunda linea en TODOS los anchos por encima de 768.

   2.7em = 2 x 1.35, relativo a los 15 px del propio titulo. Una sola altura
   para todos los anchos, que es ademas lo que mantiene alineadas entre si
   las tarjetas de una misma fila.

   El prefijo -webkit- es obligatorio: `line-clamp` a secas todavia no lo
   entienden Safari ni Firefox. Y el clamp EXIGE overflow:hidden — si algo
   lo pone en visible, la caja NO crece y las lineas sobrantes se pintan
   fuera, encima del boton de comprar. Medido a 360 px antes de esto: el
   titulo pedia 81 px en una caja de 41. */
.product .woocommerce-loop-product__title,
.product-card .woocommerce-loop-product__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 2.7em !important;
  min-height: 0;
}


/* --- U3. Un solo botón por tarjeta ---------------------------------------
   El plugin Quick Buy Now Button añade un segundo botón circular al lado del
   de WooCommerce: mismo color, misma forma, mismo tamaño. En la ficha su
   "Comprar ahora" sí aporta —salta el carrito—, pero en el listado solo
   duplica. Se oculta la variante de archivo, sin desactivar el plugin.

   OJO CON LA ESPECIFICIDAD, que es donde esto estuvo fallando en silencio.
   El selector era `.wc-buy-now-btn-archive` a secas: una clase, (0,1,0). Y el
   botón de "Comprar ahora" lleva TAMBIÉN la clase `add_to_cart_button`, así
   que le alcanza la regla de la sección G, `.product .add_to_cart_button`,
   que es (0,2,0) y declara `display: inline-flex !important`. Dos reglas
   important, gana la más específica: el botón seguía viéndose. Comprobado en
   pantalla el 26-ago-2026, con dos círculos ámbar en cada tarjeta del
   catálogo.

   Se sube a (0,2,1) añadiendo el tipo de elemento. No basta con empatar y
   confiar en el orden del archivo: la sección G podría moverse. */
.product a.wc-buy-now-btn-archive,
.product-card a.wc-buy-now-btn-archive,
.wc-buy-now-btn-archive {
  display: none !important;
}


/* --- U4. El aviso de "sin valoraciones" ----------------------------------
   Era la última franja lateral de la ficha, y encima de WooCommerce, no
   nuestra. Pero el problema de fondo no es el borde: la tienda tiene CERO
   reseñas aprobadas, así que ese aviso salía en las 92 fichas diciendo que
   nadie ha opinado nunca. Eso no informa, resta.

   Se oculta hasta que haya reseñas. El día que las haya, el bloque aparece
   solo: esta regla solo alcanza al mensaje de vacío. */
.woocommerce-noreviews {
  display: none;
}


/* --- U5. Reparto de la tabla del carrito ---------------------------------
   Medido a 1167 px, con el carrito en dos columnas (518 px para la tabla):

       Eliminar 31 · Imagen 126 · Producto 86 · Precio 90 · Cantidad 107 · Subtotal 90

   La columna del NOMBRE —lo único que identifica lo que estás comprando— era
   la más estrecha de las seis, más angosta incluso que la miniatura. Con un
   nombre largo ("Lenovo V15 G2 IJL - Intel Celeron N4500 1.1GHz - FHD 15.6"…")
   el texto caía casi letra por letra.

   El navegador reparte por contenido cuando nadie le dice otra cosa. Aquí se
   le dice: lo fijo, fijo; y el nombre se queda con lo que sobre.
   >>> LOS ANCHOS DE COLUMNA QUE HABIA AQUI YA NO SE APLICAN. <<<

   Murieron el 27-ago, cuando el carrito dejo de maquetarse como tabla: ver la
   seccion X al final del archivo. `table-layout` no significa nada sobre un
   `display: block`, y las seis columnas ya no existen.

   Se conserva la nota porque explica un reparto que se midio y que haria
   falta si algun dia se vuelve atras: la columna del NOMBRE era la mas
   estrecha de las seis, mas angosta incluso que la miniatura, y con un nombre
   largo ("Lenovo V15 G2 IJL - Intel Celeron N4500 1.1GHz - FHD 15.6"...) el
   texto caia casi letra por letra. Y la miniatura venia con
   `width: 110px; max-width: none` de Electro, asi que se salia 40 px de su
   celda de 78 y tapaba las primeras letras del nombre.

   Lo unico que sobrevive es como parte el nombre, que en la rejilla nueva
   sigue haciendo falta. */
.woocommerce-cart table.cart td.product-name,
.woocommerce-cart .shop_table.cart td.product-name {
  word-break: normal;
  overflow-wrap: anywhere;   /* parte solo si una palabra no cabe de ninguna forma */
}


/* ==========================================================================
   W. LA LÍNEA DE ENVÍO DE LA TARJETA
   --------------------------------------------------------------------------
   La imprime BT_Envio (plugin blacktronic-fixes) bajo la fila de precio, en
   los dos bucles de tarjeta que usa la tienda.

   Por qué --bt-ok y no el ámbar: el ámbar es el único acento de la marca y
   está reservado a lo accionable (botones, hover, elemento activo). "Envío
   gratis" no es una acción, es un hecho favorable, y el sistema ya tiene un
   token para eso. Además, si compitiera en ámbar con el botón de comprar de
   la misma tarjeta habría dos cosas gritando a la vez.
   ========================================================================== */

.bt-envio-card {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 6px 0 0 !important;
  font-size: 12px;
  line-height: 1.4;
}

.bt-envio-card__gratis {
  color: var(--bt-ok);
  font-weight: 600;
}

/* El icono no debe pesar tanto como el texto: es una señal, no el mensaje. */
.bt-envio-card__gratis i {
  font-size: 11px;
  margin-right: 4px;
  opacity: .85;
}

/* Cuando el envío se paga, el dato es neutro y no merece color. */
.bt-envio-card--pago .bt-envio-card__gratis {
  color: var(--bt-600);
  font-weight: 500;
}

.bt-envio-card__plazo {
  color: var(--bt-600);
  font-weight: 400;
}

/* El plazo, solo de 576 px para arriba.
   Medido a 360 px: el cuerpo de la tarjeta de portada mide 149 px de ancho.
   "Entrega en 24/48 h laborables" se partiría en tres líneas y volvería a
   inflar la tarjeta justo después de haber arreglado que no se inflara. En
   móvil se queda el dato que decide una compra, que es el envío gratis. */
@media (max-width: 575.98px) {
  .bt-envio-card__plazo { display: none; }
}


/* ==========================================================================
   X. EL CARRITO, DE TABLA A FICHAS
   --------------------------------------------------------------------------
   Antes de esto el carrito era tres maquetas distintas peleándose:

     · de 576 px para arriba, la tabla de seis columnas de WooCommerce, con
       `table-layout: fixed` y anchos a mano;
     · por debajo de 576, Electro la desmonta en filas etiqueta/valor
       (`td::before { content: attr(data-title) ": " }`) **y esconde la foto
       del producto** (`td.product-thumbnail { display: none }`);
     · y encima, el precio en una columna de 84 px partía "129,00 €" en dos
       líneas, y el <input> de cantidad medía 91 px dentro de una celda de 92,
       arrancando 8 px dentro: se salía por la derecha sobre el subtotal.

   Aquí hay UNA sola maqueta, en rejilla, para todos los anchos. La tabla deja
   de comportarse como tabla y cada línea es una ficha: foto, nombre, precio,
   cantidad y subtotal. La foto se ve en el móvil, que es donde el cliente más
   necesita reconocer lo que lleva.

   Los `!important` no son decoración: las reglas de Electro que hay que
   derrotar son `table.shop_table.shop_table_responsive tr td...`, (0,3,3), y
   su hoja se encola DESPUÉS de esta.
   ========================================================================== */

/* --- X1. La tabla deja de ser tabla -------------------------------------- */
.woocommerce-cart .shop_table.cart,
.woocommerce-cart .shop_table.cart tbody {
  display: block !important;
  width: 100%;
  border: 0 !important;
}

.woocommerce-cart .shop_table.cart thead { display: none !important; }

/* Las etiquetas "Producto:", "Precio:", "Cantidad:" que Electro inyecta por
   ::before en móvil. Con la rejilla ya se sabe qué es cada cosa. */
.woocommerce-cart .shop_table.cart tr td::before { content: none !important; }

/* --- X2. Cada línea, una ficha ------------------------------------------- */
.woocommerce-cart .shop_table.cart tr.cart_item {
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  grid-template-areas:
    "foto nombre   quitar"
    "foto precio   precio"
    "foto cantidad subtotal";
  column-gap: 16px;
  row-gap: 10px;
  align-items: start;
  padding: 18px 0 !important;
  margin: 0;
  border: 0 !important;
  border-bottom: 1px solid var(--bt-200) !important;
}

.woocommerce-cart .shop_table.cart tr.cart_item > td {
  display: block !important;
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  text-align: left !important;
  vertical-align: baseline;
}

.woocommerce-cart .shop_table.cart td.product-thumbnail {
  grid-area: foto;
  display: block !important;   /* Electro la esconde por debajo de 576 px */
}
.woocommerce-cart .shop_table.cart td.product-name     { grid-area: nombre; }
.woocommerce-cart .shop_table.cart td.product-price    { grid-area: precio; }
.woocommerce-cart .shop_table.cart td.product-quantity { grid-area: cantidad; }
.woocommerce-cart .shop_table.cart td.product-subtotal { grid-area: subtotal; }
.woocommerce-cart .shop_table.cart td.product-remove   { grid-area: quitar; }

/* La fila de acciones (el cupón) no es una ficha: ocupa todo el ancho. */
.woocommerce-cart .shop_table.cart tr:not(.cart_item),
.woocommerce-cart .shop_table.cart td.actions {
  display: block !important;
  width: auto !important;
  border: 0 !important;
}

/* --- X3. Foto ------------------------------------------------------------ */
.woocommerce-cart .shop_table.cart td.product-thumbnail a { display: block; }
.woocommerce-cart .shop_table.cart td.product-thumbnail img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block;
  border: 1px solid var(--bt-200);
  border-radius: var(--bt-r-md);
  background: #fff;
}

/* --- X4. Precio y subtotal ------------------------------------------------
   El precio unitario es dato de apoyo; el que manda es el subtotal de la
   línea. Antes los dos iban al mismo peso en dos columnas de 84 px, que era
   justo lo que partía "129,00 €" en dos renglones. */
.woocommerce-cart .shop_table.cart td.product-price {
  font-size: 13.5px;
  color: var(--bt-600);
  white-space: nowrap;
}
.woocommerce-cart .shop_table.cart td.product-price::after {
  content: " / ud.";
  color: var(--bt-400);
}

.woocommerce-cart .shop_table.cart td.product-subtotal {
  font-size: 17px;
  font-weight: 700;
  color: var(--bt-ink);
  text-align: right !important;
  align-self: center;
  white-space: nowrap;
}

/* --- X5. La cantidad, con botones ----------------------------------------
   El <input type=number> suelto obligaba a apuntar a una flechita del
   navegador de 8 px de alto. Los botones los inyecta BT_Carrito::js() y
   escriben en el mismo input, así que siguen valiendo el `min`, el `max` y
   el autoguardado que ya existían. */
.woocommerce-cart .shop_table.cart td.product-quantity .quantity {
  display: inline-flex !important;
  align-items: stretch;
  border: 1px solid var(--bt-200);
  border-radius: var(--bt-r-md);
  overflow: hidden;
  background: #fff;
  width: auto !important;
  max-width: 100%;
}

.woocommerce-cart .bt-qty {
  appearance: none;
  border: 0;
  background: var(--bt-050);
  color: var(--bt-ink);
  width: 40px;
  min-width: 40px;
  font-size: 18px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--bt-t), color var(--bt-t);
}
.woocommerce-cart .bt-qty:hover:not(:disabled) { background: var(--bt-ambar-luz); color: var(--bt-ambar-osc); }
.woocommerce-cart .bt-qty:disabled { color: var(--bt-400); cursor: default; }
.woocommerce-cart .bt-qty:focus-visible {
  outline: 2px solid var(--bt-ambar);
  outline-offset: -2px;
}

.woocommerce-cart .shop_table.cart td.product-quantity input.qty {
  width: 46px !important;
  min-width: 0 !important;
  height: 44px;
  border: 0 !important;
  border-left: 1px solid var(--bt-200) !important;
  border-right: 1px solid var(--bt-200) !important;
  border-radius: 0 !important;
  text-align: center;
  font-weight: 600;
  font-size: 15px;
  background: #fff;
  padding: 0 !important;
  -moz-appearance: textfield;
}
/* Las flechitas nativas sobran: para eso están los botones. */
.woocommerce-cart .shop_table.cart td.product-quantity input.qty::-webkit-outer-spin-button,
.woocommerce-cart .shop_table.cart td.product-quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* --- X6. Quitar del carrito ---------------------------------------------- */
.woocommerce-cart .shop_table.cart td.product-remove a.remove {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: auto;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  color: var(--bt-400) !important;
  background: transparent !important;
  transition: background-color var(--bt-t), color var(--bt-t);
}
.woocommerce-cart .shop_table.cart td.product-remove a.remove:hover {
  background: var(--bt-100) !important;
  color: var(--bt-ink) !important;
}

/* --- X7. En pantalla ancha, una sola fila --------------------------------
   El corte esta en 992 y no en 768 por lo que ya documenta la seccion U5:
   con la fila en una sola linea al NOMBRE le queda el ancho del contenedor
   menos 428 px fijos y 90 de separacion. A 768 eso son 140 px y "HP ELITEDESK
   800 G2 Desktop Mini i5-6500t vPro" cae en cinco lineas. A 992 son 422. */
@media (min-width: 992px) {
  .woocommerce-cart .shop_table.cart tr.cart_item {
    grid-template-columns: 96px minmax(0, 1fr) auto 148px auto 32px;
    grid-template-areas: "foto nombre precio cantidad subtotal quitar";
    align-items: center;
    column-gap: 18px;
    padding: 20px 0 !important;
  }
  .woocommerce-cart .shop_table.cart td.product-price {
    text-align: right !important;
    align-self: center;
  }
  .woocommerce-cart .shop_table.cart td.product-quantity { justify-self: center; }
}

/* --- X8. El aviso de envío gratis, a todo el ancho -----------------------
   Es un <p>, así que le caía el `p { max-width: 68ch }` de la sección A —la
   medida de lectura cómoda para texto corrido—, y se quedaba en 657 px
   dentro de una columna de 758. Una medida de lectura no pinta nada en un
   aviso de una línea con su icono. */
.bt-envio-progreso {
  max-width: none;
  width: auto;
}

/* --- X9. El envío se elige en el checkout, no aquí ------------------------
   En el carrito el cliente está revisando QUÉ lleva y CUÁNTO cuesta. Meterle
   ahí tres radios de transportista, un badge y un "Enviar a Madrid" es
   pedirle una decisión que todavía no toca y que va a tener que repetir en el
   siguiente paso.

   Se oculta el selector, NO el cálculo: la línea del método elegido sigue
   viéndose y el total del carrito sigue siendo el total de verdad. Ocultar el
   cálculo entero (`woocommerce_cart_ready_to_calc_shipping` a false) habría
   sido más limpio de escribir, pero entonces un carrito por debajo de 100 €
   enseñaría 22,99 € aquí y 27,98 € en el checkout. Con 6.733 € ya perdidos en
   pagos que no salieron, una sorpresa de precio en el último paso es lo
   último que le hace falta a esta tienda.

   El `:has()` de abajo solo esconde los <li> que TIENEN radio sin marcar. Si
   algún día queda un único método, WooCommerce lo imprime sin radio y esta
   regla no le alcanza: no se puede quedar el carrito sin línea de envío.

   >>> La opción de recoger en tienda, con su "¡Recógelo HOY!", deja de verse
       en el carrito. Sigue estando en el checkout, en la pestaña "Recogida"
       (verificado sobre el checkout de bloques). <<< */
.woocommerce-cart .woocommerce-shipping-calculator { display: none !important; }

.woocommerce-cart #shipping_method li:has(input[type="radio"]):not(:has(input:checked)) {
  display: none !important;
}
.woocommerce-cart #shipping_method input[type="radio"] { display: none !important; }
.woocommerce-cart #shipping_method li { padding: 0 !important; }
.woocommerce-cart .woocommerce-shipping-totals td { padding-top: 9px !important; }

/* "Enviar a Madrid." lo deduce WooCommerce de la direccion base de la tienda,
   no de nada que haya dicho el cliente: en el carrito es una afirmacion sobre
   su envio que todavia nadie ha hecho. La direccion de verdad se pide en el
   paso siguiente. */
.woocommerce-cart .woocommerce-shipping-destination { display: none !important; }

/* Ya no es una opcion que elegir, sino una linea de totales: el metodo a la
   izquierda y lo que cuesta a la derecha, como el subtotal y el ahorro. */
/* La P6 fija `display: inline !important` sobre
   `.woocommerce-cart .cart_totals ul#shipping_method label`, que es (1,2,2).
   Escrito sin `.cart_totals ul` esto sale a (1,2,1) y pierde: el "Gratis" se
   quedaba pegado al parentesis del nombre del metodo, separacion 0 px. */
.woocommerce-cart .cart_totals ul#shipping_method li label {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  color: var(--bt-700);
}
.woocommerce-cart .cart_totals ul#shipping_method li label > .bt-envio-gratis {
  display: inline !important;
  margin-top: 0;
  white-space: nowrap;
}

/* --- X10. La barra fija de pedido ----------------------------------------
   Medido antes: en un móvil de 390 px la página del carrito medía 2.970 px y
   el botón de "Finalizar compra" caía en y=2088. Había que recorrer dos
   pantallas y media para encontrar el botón que da de comer.

   Solo por debajo de 1200 px: a partir de ahí el resumen ya viaja pegajoso en
   la columna derecha (sección P9) y el botón está siempre a la vista. */
.bt-carrito-fijo {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid var(--bt-200);
  box-shadow: var(--bt-sombra-3);
}

.bt-carrito-fijo__total {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.bt-carrito-fijo__total span { font-size: 12px; color: var(--bt-600); }
.bt-carrito-fijo__total strong {
  font-size: 19px;
  font-weight: 800;
  color: var(--bt-ink);
  font-variant-numeric: tabular-nums;
}

.bt-carrito-fijo__boton {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 20px;
  border-radius: var(--bt-r-md);
  background: var(--bt-ambar);
  color: #fff !important;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  transition: background-color var(--bt-t);
}
.bt-carrito-fijo__boton:hover { background: var(--bt-ambar-osc); }

/* Que la barra no tape el final de la página. */
@media (max-width: 1199.98px) {
  .woocommerce-cart.bt-con-barra-fija { padding-bottom: 88px; }
}

@media (min-width: 1200px) {
  .bt-carrito-fijo { display: none !important; }
}


/* ==========================================================================
   Y. CARRITO — SEGUNDA REVISIÓN
   --------------------------------------------------------------------------
   Seis cosas que se vieron al probarlo con la RECOGIDA EN TIENDA elegida y en
   pantallas estrechas, que es como no lo había probado.
   ========================================================================== */

/* --- Y1. Un icono más: la etiqueta de precio ----------------------------- */
:root {
  --bt-ico-etiqueta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.2 13.2 20.6a1.7 1.7 0 0 1-2.4 0l-7.4-7.4V3.4h9.8l7.4 7.4a1.7 1.7 0 0 1 0 2.4z'/%3E%3Ccircle cx='7.6' cy='7.6' r='1.3'/%3E%3C/svg%3E");
}

/* --- Y2. El enlace del cupón ---------------------------------------------
   Se veía como un enlace subrayado suelto y encima con un fondo gris
   (#EFECEC) que no era mío: viene de la regla de botones de Electro,
   `.btn:not([class*="btn-"]):not(.single_add_to_cart_button)...`, que es
   mucho más específica que `.bt-cupon-toggle`. De ahí los !important.

   Ahora es una fila con borde discontinuo: se lee como "aquí hay algo
   opcional que puedes abrir", que es exactamente lo que es, sin competir con
   el botón de comprar. */
.bt-cupon-toggle {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 14px 0 0;
  padding: 12px 14px !important;
  background: none !important;
  background-color: transparent !important;
  border: 1px dashed var(--bt-200) !important;
  border-radius: var(--bt-r-md) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--bt-600) !important;
  text-align: left;
  text-decoration: none !important;
  transition: border-color var(--bt-t), color var(--bt-t);
}

.bt-cupon-toggle::before {
  content: "";
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  background: currentColor;
  -webkit-mask: var(--bt-ico-etiqueta) center / contain no-repeat;
          mask: var(--bt-ico-etiqueta) center / contain no-repeat;
}

/* La flecha que gira al abrir: dice si está plegado sin tener que leerlo. */
.bt-cupon-toggle::after {
  content: "";
  width: 15px;
  height: 15px;
  margin-left: auto;
  background: currentColor;
  -webkit-mask: var(--bt-ico-flecha) center / contain no-repeat;
          mask: var(--bt-ico-flecha) center / contain no-repeat;
  transform: rotate(90deg);
  transition: transform var(--bt-t);
}

.bt-cupon-toggle:hover {
  border-color: var(--bt-400) !important;
  color: var(--bt-ink) !important;
}

.bt-cupon-toggle.esta-abierto {
  border-style: solid !important;
  border-color: var(--bt-400) !important;
  color: var(--bt-ink) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.bt-cupon-toggle.esta-abierto::after { transform: rotate(-90deg); }

.bt-cupon-toggle:focus-visible {
  outline: 2px solid var(--bt-ambar);
  outline-offset: 2px;
}

/* --- Y3. El campo del cupón medía 190 px de alto -------------------------
   Dos reglas que por separado están bien y juntas hacen un desastre:

     Electro, por debajo de 576 px .... table.cart .coupon { flex-direction: column }
     la sección P2 ................... .coupon input { flex: 1 1 190px }

   En una columna, `flex-basis` deja de ser ancho y pasa a ser ALTO. El
   resultado era un cuadro de texto de 190 px para escribir ocho caracteres.

   Se fija la dirección en fila y la base en auto: el ancho lo reparte el
   flex y la altura la manda la altura declarada, como en el resto de campos
   de la tienda. */
.woocommerce-cart .coupon {
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 4px !important;
  padding: 14px !important;
  border: 1px solid var(--bt-400);
  border-top: 0;
  border-radius: 0 0 var(--bt-r-md) var(--bt-r-md);
}

.woocommerce-cart .coupon input[type="text"] {
  flex: 1 1 150px !important;
  width: auto !important;
  min-width: 0;
  height: 46px !important;
  min-height: 0 !important;
}

.woocommerce-cart .coupon .button {
  flex: 0 0 auto;
  height: 46px !important;
  white-space: nowrap;
}

/* --- Y4. La fila de envío, con la recogida elegida -----------------------
   Con GLS la etiqueta tiene dos partes (nombre y precio) y el
   `justify-content: space-between` valía. Con la recogida en tienda tiene
   CUATRO: nombre, el badge "¡Recógelo HOY!", y la nota con la dirección. Las
   tres se repartían el ancho a lo bruto y el nombre caía en tres líneas
   contra el badge.

   En rejilla cada cosa cae donde tiene que caer, con y sin recogida:

       [ nombre del método ............ precio ]
       [ badge, si lo hay ..................... ]
       [ nota, si la hay ...................... ]                             */
.woocommerce-cart .cart_totals ul#shipping_method li label {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 6px 10px;
  font-size: 14px;
  color: var(--bt-700);
  line-height: 1.4;
}

.woocommerce-cart .cart_totals ul#shipping_method li label > .bt-envio-gratis {
  display: inline !important;
  grid-column: 2;
  grid-row: 1;
  margin-top: 0;
  white-space: nowrap;
}

.woocommerce-cart .cart_totals ul#shipping_method li label > .bt-recogida-hoy {
  grid-column: 1 / -1;
  justify-self: start;
}

.woocommerce-cart .cart_totals ul#shipping_method li label > .bt-envio-nota {
  grid-column: 1 / -1;
  margin-top: 0;
}

/* --- Y5. El resumen, con jerarquía --------------------------------------
   Parecía genérico porque todas las filas pesaban lo mismo y el bloque no
   tenía respiración. El total es la cifra que se va a pagar: que se note. */
.woocommerce-cart .cart_totals h2 {
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
  margin: 0 0 4px !important;
}

.woocommerce-cart .cart_totals th {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--bt-600) !important;
}

.woocommerce-cart .cart_totals .cart-subtotal td {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--bt-ink) !important;
  text-align: right;
}

.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
  font-size: 21px !important;
  padding-top: 16px !important;
}

/* --- Y6. Venta cruzada: el botón, a la derecha ---------------------------
   El corte estaba en 600 px y ahí el botón se iba debajo del nombre y
   pegado a la izquierda, como si se hubiera caído. Con 48 px de miniatura y
   un botón de ~70 hay sitio de sobra para las tres columnas hasta bastante
   más abajo; y cuando de verdad no cabe, el botón ocupa la fila entera en
   vez de quedarse cojo en una esquina. */
@media (max-width: 600px) {
  .bt-cross-sell__item {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    row-gap: 0;
  }
  .bt-cross-sell__add {
    grid-column: auto;
    justify-self: end;
  }
}

/* Solo en los moviles mas estrechos. A 403 px las tres columnas todavia
   caben (48 de foto + nombre + unos 55 de boton) y se ve mas ordenado que
   tres botones a todo lo ancho gritando mas que el propio carrito. */
@media (max-width: 379.98px) {
  .bt-cross-sell__item {
    grid-template-columns: 48px minmax(0, 1fr);
    row-gap: 10px;
  }
  .bt-cross-sell__add {
    grid-column: 1 / -1;
    justify-self: stretch;
    text-align: center;
  }
}

/* El precio es el dato que decide si se añade o no: iba a 14 px, el mismo
   tamaño que el nombre, y se leía como una nota al pie. */
.bt-cross-sell__precio {
  font-size: 16px;
  font-weight: 700;
}
.bt-cross-sell__info a { font-size: 14.5px; }

/* Y en la línea del carrito, el precio unitario a 13,5 px quedaba por debajo
   de los atributos del producto. Sube a 14 y coge la tinta. */
.woocommerce-cart .shop_table.cart td.product-price {
  font-size: 14px;
  color: var(--bt-700);
}

/* --- Y7. Un solo botón a la vista ----------------------------------------
   Al llegar al resumen se veían dos botones naranjas idénticos: el
   "Finalizar compra" de la caja de totales y el "Realizar pedido" de la
   barra fija. La barra existe para no tener que buscar el botón; cuando el
   botón de verdad ya está en pantalla, sobra.

   La esconde el observador de BT_Carrito::js(). Si el JS no llegara a
   correr, la barra se queda visible: se prefiere un botón de más a quedarse
   sin ninguno. */
.bt-carrito-fijo {
  transition: transform var(--bt-t), opacity var(--bt-t);
}
.bt-carrito-fijo.esta-oculta {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}


/* ==========================================================================
   Z. VISTOS RECIENTEMENTE — el carrusel del pie en móvil
   --------------------------------------------------------------------------
   Medido a 375 px: las tarjetas salían a 100 px de ancho y el precio se
   quedaba con una caja de 12,7 px. Con `word-break: break-word` heredado, el
   texto caía LETRA A LETRA en vertical: "1", "1", "9", "9", ",", "0", "0", "€"
   en ocho renglones. La captura del 9-sep lo enseña sin lugar a dudas.

   El culpable es del tema padre, en `electro/style.css`:

       .footer-recently-viewed ul.products li.product { flex: 0 0 29%; max-width: 29% }

   Un 29 % fijo, sin media query. En escritorio son ~330 px y funciona; en un
   móvil de 375 el contenedor mide 345 y el 29 % da esos 100 px.

   La lista es un carrusel de scroll horizontal (`flex-wrap: nowrap;
   overflow: auto`), así que el ancho de tarjeta NO tiene por qué repartir el
   contenedor: puede pasarse y dejar la siguiente a medio ver, que además es
   la señal de que hay más y se puede arrastrar.
   ========================================================================== */

@media (max-width: 575px) {
  .footer-recently-viewed .products:not(.owl-carousel) .product,
  .footer-recently-viewed .products:not(.owl-carousel) li.product,
  .footer-recently-viewed ul.products .product,
  .footer-recently-viewed ul.products li.product {
    /* 58 % de 345 = 200 px: caben el precio y el botón sin partirse, y la
       segunda tarjeta asoma lo justo para invitar a deslizar. */
    flex: 0 0 58% !important;
    max-width: 58% !important;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .footer-recently-viewed .products:not(.owl-carousel) .product,
  .footer-recently-viewed .products:not(.owl-carousel) li.product,
  .footer-recently-viewed ul.products .product,
  .footer-recently-viewed ul.products li.product {
    flex: 0 0 38% !important;
    max-width: 38% !important;
  }
}

/* Y que el precio no se parta nunca aunque el ancho se quede corto: antes de
   caer letra a letra, mejor que se salga o se recorte. */
.footer-recently-viewed ul.products .price {
  word-break: normal;
  overflow-wrap: normal;
}


/* ==========================================================================
   AA. LO QUE VENÍA DEL PERSONALIZADOR
   --------------------------------------------------------------------------
   El CSS del Personalizador de WordPress se guarda POR TEMA. Las 327 líneas
   que sirve producción están bajo el tema «electro». El día que se active
   «electro-child», WordPress buscará el del hijo, no lo encontrará, y esas
   327 líneas desaparecen de golpe.

   De las 327, sólo 88 hacían falta (el resto lo sustituye el plugin
   blacktronic-fixes o son restos de las demos del tema). Y de esas 88, al
   compararlas una por una contra este archivo, sobreviven TRES bloques: los
   otros dos ya estaban resueltos aquí, mejor. Vive aquí y no en el
   Personalizador del hijo para que funcione sin que nadie tenga que acordarse
   de pegarlo, y para que quede versionado con el tema.

   LOS DOS QUE NO SE TRAEN, Y POR QUÉ
   · Carrusel de marcas (original 275-311, logos a 60 px de alto).
     Lo sustituyen la sección K y la sección 1 de este archivo, que rehacen
     la caja a 96x34 con object-fit y compensan a escala .82 los logotipos
     cuadrados. Medido a 1400 px: los 11 logos salen a 28-34 px, que es el
     rediseño funcionando. Traer el 60 px lo pisaría por orden de aparición.
     Las flechas sueltas ya las quita O3.
   · Carrusel de categorías (original 314-327, centrado a partir de 992 px).
     Lo sustituye O2, que hace lo mismo desde 768 px y además reparte los
     items con flex: 1. Medido a 1400 px: justify-content sale
     `space-between`, o sea O2, y las flechas están ocultas. M2 se encarga
     además de que el hover no se recorte.
   ========================================================================== */


/* --- AA1. Precio y etiqueta de ahorro, en una línea -----------------------
   Original: líneas 190-196.

   En producto simple, class-bt-precio.php devuelve `$html . $etiqueta`, así
   que .bt-ahorro cae DENTRO de p.price. En variable no: ahí cuelga de
   .woocommerce-variation-price, al lado del precio (comprobado en el Pixel 10).

   Medido con la etiqueta dentro de p.price:
     · a 1400 px, el centro del precio y el de la etiqueta iban 4 px
       desalineados; con el flex, 0.
     · a 375 px la etiqueta cae a segunda línea en los dos casos, y p.price
       mide 75 px con flex y sin él. O sea que esto NO cambia la altura de la
       ficha en móvil.

   Se acota a .single-product, que era lo pendiente en el volcado: en el
   catálogo los precios son `span.price` (25 en portada, 0 `p.price`), pero
   si algún día una tarjeta usara el <p>, sin acotar le entraría el flex.
   -------------------------------------------------------------------------- */
.single-product p.price {
  /* SIN !important, a propósito. S5 esconde este precio con `display: none`
     (sin !important) cuando la variación ya trae el suyo, para no enseñar la
     misma cifra dos veces. Con `flex !important` aquí, S5 dejaba de aplicar y
     el precio volvía a salir duplicado: medido en el Pixel 10, p.price pasaba
     de `none` a `flex` con 38 px de alto. S5 es más específico, así que sin
     !important gana él donde debe y este flex actúa donde no hay variación. */
  display: flex;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

/* .bt-ahorro ya trae margin-left: 10px de la sección de la ficha. Dentro de
   un contenedor con gap se sumarían los dos y el hueco salía de 22 px. */
.single-product p.price .bt-ahorro { margin-left: 0; }


/* --- AA2. Móvil: una sola barra de compra --------------------------------
   Original: líneas 224-232, dentro de @media (max-width: 768px).

   CAMBIO DELIBERADO: el corte sube de 768 a 991 px para que case con
   class-bt-sticky.php, que se oculta a partir de 992. Con el 768 original
   quedaba una franja de 769 a 991 en la que la barra nueva se muestra y las
   viejas no están tapadas: dos barras apiladas en tablet.

   Estas cuatro clases hoy NO están en el HTML servido. Se traen como red:
   «Quick Buy Now Button» está activo y puede inyectar
   .wpcbn-sticky-btn-wrapper por JavaScript, y la barra de Electro reaparece
   en cuanto alguien toca la opción del tema.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .handheld-sticky-add-to-cart,
  .electro-mobile-sticky-add-to-cart,
  .electro-handheld-footer-bar,
  .wpcbn-sticky-btn-wrapper {
    display: none !important;
  }
}


/* --- AA3. Móvil: los dos botones, separados ------------------------------
   Original: líneas 234-273. El corte se queda en 768 px: son reglas de
   maquetación y apilar los botones al 100 % en una tablet de 900 se vería
   mal. Sólo AA2 necesitaba subir a 991.

   El rescate del formulario (display/visibility/opacity/height) es hoy un
   no-op: medido en el Pixel 10 a 375 px, form.cart ya sale
   `display:block, visible, opacity:1`. Se trae igual, porque lo que lo
   ocultaba era una opción del tema padre y esto se despliega sobre el padre.

   Lo que SÍ arregla algo ahora mismo es el hueco. Los dos botones se tocan:
   «Añadir al carrito» acaba en 1578 y «Comprar ahora» empieza en 1578, cero
   píxeles entre un relleno ámbar y un contorno. El `gap: 12px` los separa
   (verificado: 0 -> 12) y el formulario crece 24 px, de 627 a 651.

   DOS COSAS DEL ORIGINAL QUE NO SE TRAEN:
   · `align-items: center` en el contenedor. Centraba de rebote el selector
     de cantidad (medido: x pasaba de 15 a 113). Aquí la ficha lo tiene
     alineado a la izquierda a propósito, así que se fija flex-start.
   · La regla suelta que centraba .quantity al 100 % de ancho. Misma razón.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

  /* Red: si el tema padre vuelve a esconder el formulario de compra. */
  .woocommerce div.product div.summary form.cart {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    opacity: 1 !important;
    overflow: visible !important;
    margin-bottom: 30px !important;
  }

  .woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
  .woocommerce div.product form.cart .d-flex {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
    align-items: flex-start !important;
  }

  /* El `width: 100%` ya lo ponía el CSS del snippet #12 más arriba; aquí
     hacen falta el `flex: none` y el `margin: 0` para que dentro de la
     columna no se encojan ni sumen márgenes al gap. */
  .woocommerce div.product form.cart button.single_add_to_cart_button,
  .woocommerce div.product form.cart button.buy_now_button,
  .woocommerce div.product form.cart .wc-buy-now-btn,
  .woocommerce div.product form.cart button[name="buy_now"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 15px 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    flex: none !important;
  }

  /* Y el caso que el original del Personalizador no cubria: en producto
     SIMPLE no existe .woocommerce-variation-add-to-cart. Los dos botones
     cuelgan directos de form.cart, que el rescate de arriba deja en `block`,
     asi que no hay contenedor flex ni gap que los separe. Medido en los
     auriculares Samsung a 375 px: hueco de 0 px, igual que el bug del
     producto variable.

     Lleva `div.summary` para ganarle al `margin: 0` de la regla de arriba:
     empatan a cuatro clases y decide el numero de tipos, 4 contra 2. */
  .woocommerce div.product div.summary form.cart > button + button {
    margin-top: 12px !important;
  }
}


/* ==========================================================================
   AB. BANDA DE MARCAS DE LA PORTADA
   --------------------------------------------------------------------------
   Sustituye al carrusel de imagenes de WPBakery. El marcado lo emite
   `inc/bt-marcas.php`, que ademas explica de donde sale cada medida.

   Lo que hay que saber para no romperlo:

   · UNA sola regla gobierna los once dibujos: `.bt-marcas__logo`. No hay —ni
     debe haber— ninguna regla con el nombre de una marca dentro. Todo el
     ajuste optico vive en el `transform` de cada SVG, no aqui. Si alguien
     necesita escribir `.bt-marcas [data-marca="apple"] { ... }`, lo que pasa
     es que ese dibujo esta mal recortado.

   · Ni `opacity` ni `filter: grayscale()`. El color se pide con
     `currentColor` y se cambia con `color`. Asi el contraste se puede medir
     con una herramienta, que con opacidad no se puede: depende del fondo.

   · Doce celdas —once marcas y «Ver todo el catalogo»— porque doce es
     divisible por 6, 4, 3 y 2. La rejilla cierra en todos los puntos de
     corte sin celdas huerfanas y sin un solo `:nth-child` de compensacion.

   · Lo que separa las celdas es una LINEA, no aire: `gap: 1px` sobre un
     fondo `--bt-200`. Es el mismo criterio del resto del sistema —delimitar
     con borde de 1 px y no con sombra— y hace que el bloque se lea como un
     objeto unico y no como doce tarjetas compitiendo con la rejilla de
     productos que tiene justo encima.
   ========================================================================== */

.bt-marcas {
  margin: 40px 0 0;
}

/* Se deja la escala de h2 del sistema —clamp(22px, 5.5vw, 30px) a 700— y no
   se baja al escalon del h3, que fue el primer intento. Puesto al lado, se ve
   por que: la seccion que va justo debajo es «Vistos recientemente» a 30 px, y
   un titulo mas pequeno no se leia como sobriedad, se leia como que este
   bloque importa menos. Y ahora importa: son doce atajos al catalogo.
   Aqui solo se corrigen alineacion y margenes. */
.bt-marcas__titulo {
  text-align: left !important;
  margin: 0 0 6px !important;
}

.bt-marcas__sub {
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--bt-600);
  max-width: 46ch;
  margin: 0 0 24px;
}

.bt-marcas__rejilla {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--bt-200);
  border: 1px solid var(--bt-200);
  border-radius: var(--bt-r-md);
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* El <li> es la celda de la rejilla y lleva el fondo. No se usa
   `display: contents`, que en varios Safari saca al <li> del arbol de
   accesibilidad y deja la lista sin semantica de lista: con el 37 % del
   trafico en MobileSafari, no compensa el ahorro de un elemento. */
.bt-marcas__celda {
  background: var(--bt-blanco);
}

/* El area pulsable es la celda ENTERA, no la caja del logo: 193x88 en
   escritorio y 113x64 en movil, muy por encima de los 44x44 de referencia. */
.bt-marcas__enlace {
  display: grid;
  place-items: center;
  min-height: 88px;
  height: 100%;
  color: var(--bt-600);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--bt-t), color var(--bt-t);
}

.bt-marcas__enlace:hover,
.bt-marcas__enlace:focus-visible {
  background: var(--bt-050);
  color: var(--bt-marca, var(--bt-ink));
  text-decoration: none;
}

/* En movil no hay hover: sin `:active` el enlace parece roto mientras carga.
   Entra sin transicion y sale con ella. */
.bt-marcas__enlace:active {
  background: var(--bt-100);
  color: var(--bt-marca, var(--bt-ink));
  transition: none;
}

/* --bt-ambar (#E8912F) mide 2,46:1 contra el blanco y NO llega al 3:1 que el
   criterio 1.4.11 exige a un indicador de foco. --bt-ambar-osc (#C9761C) da
   3,45:1. No es un color nuevo: es el mismo acento un escalon por debajo, el
   que ya usa el hover de los enlaces. */
.bt-marcas__enlace:focus-visible {
  outline: 2px solid var(--bt-ambar-osc);
  outline-offset: -2px;
}

/* LA regla. Los once dibujos, uno solo, sin excepciones. */
.bt-marcas__logo {
  display: block;
  width: 120px;
  height: auto;
}

/* Logos de varias capas (la «G» de Google): en reposo todas heredan el gris;
   en hover cada capa toma su propio color de `--bt-capa`. Las de una sola capa
   no la definen y siguen con currentColor, o sea con --bt-marca. */
.bt-marcas__logo path {
  fill: currentColor;
  transition: fill var(--bt-t);
}

.bt-marcas__enlace:hover .bt-marcas__logo path,
.bt-marcas__enlace:focus-visible .bt-marcas__logo path,
.bt-marcas__enlace:active .bt-marcas__logo path {
  fill: var(--bt-capa, currentColor);
}

.bt-marcas__todo {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  padding: 0 10px;
}

/* Tablet: 4 columnas x 3 filas. */
@media (max-width: 991px) {
  .bt-marcas__rejilla { grid-template-columns: repeat(4, 1fr); }
  .bt-marcas__enlace  { min-height: 80px; }
  .bt-marcas__logo    { width: 112px; }
}

/* Movil, el caso principal: 69 % del trafico. 3 columnas x 4 filas.
   A 375 px la celda sale a 113 px y el dibujo a 88, con 12,5 px de aire a
   cada lado. */
@media (max-width: 767px) {
  .bt-marcas { margin-top: 28px; }
  .bt-marcas__sub { margin-bottom: 20px; }
  .bt-marcas__rejilla { grid-template-columns: repeat(3, 1fr); }
  .bt-marcas__enlace  { min-height: 64px; }
  .bt-marcas__logo    { width: 88px; }
  .bt-marcas__todo    { font-size: 12px; padding: 0 6px; }
}

/* Por debajo de 360 px, a 2 columnas. A 3 la caja caeria a ~76 px y la
   mayuscula de SAMSUNG a menos de 9 px: ilegible. Se acepta el desplazamiento
   extra a cambio de que se lea. */
@media (max-width: 359px) {
  .bt-marcas__rejilla { grid-template-columns: repeat(2, 1fr); }
  .bt-marcas__enlace  { min-height: 60px; }
  .bt-marcas__logo    { width: 112px; }
}


/* ===========================================================================
   AC. PORTADA: CAMPAÑAS Y CATEGORÍAS PROPIAS
   ---------------------------------------------------------------------------
   Estas dos piezas sustituyen visualmente a Slider Revolution y al carrusel
   circular, pero no eliminan sus bloques de WPBakery. El contenido y las fotos
   de categorías siguen saliendo de WooCommerce para que sean editables.
   =========================================================================== */

.bt-hero {
  --bt-hero-acento: var(--bt-ambar);
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--bt-200);
  border-radius: 18px;
  background: var(--bt-050);
}

.bt-hero__slide {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(400px, 1.12fr);
  align-items: stretch;
  min-height: 416px;
  background: var(--bt-hero-fondo, #f7f8fa);
}

.bt-hero__slide[hidden] { display: none !important; }

.bt-hero__slide--iphone {
  --bt-hero-acento: #e8912f;
  --bt-hero-fondo: #faf8f5;
}

.bt-hero__contenido {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 54px 0 54px clamp(30px, 5vw, 88px);
}

.bt-hero__ceja,
.bt-categorias__ceja {
  margin: 0 0 12px;
  color: var(--bt-hero-acento, var(--bt-ambar-osc));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
}

.bt-hero__titulo {
  max-width: 10ch;
  margin: 0;
  color: var(--bt-900);
  font-size: clamp(38px, 4.45vw, 68px);
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: .98;
}

.bt-hero__detalle {
  max-width: 32ch;
  margin: 22px 0 0;
  color: var(--bt-600);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
}

.bt-hero__precio {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 0;
}

.bt-hero__precio del {
  color: var(--bt-500);
  font-size: 15px;
  font-weight: 400;
}

.bt-hero__precio strong {
  color: var(--bt-900);
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
}

.bt-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  margin-top: 26px;
  padding: 0 20px;
  border-radius: 10px;
  background: var(--bt-hero-acento);
  color: var(--bt-900) !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  transition: transform var(--bt-t), background var(--bt-t);
}

.bt-hero__cta:hover,
.bt-hero__cta:focus-visible {
  background: var(--bt-ambar-osc);
  color: var(--bt-blanco) !important;
  transform: translateY(-2px);
}

.bt-hero__cta:focus-visible {
  outline: 2px solid var(--bt-900);
  outline-offset: 3px;
}

.bt-hero__media {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 28px 48px 42px 16px;
}

.bt-hero__media::before {
  position: absolute;
  width: min(38vw, 500px);
  height: min(38vw, 500px);
  border-radius: 50%;
  background: color-mix(in srgb, var(--bt-hero-acento) 12%, transparent);
  content: '';
}

.bt-hero__media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 590px;
  max-height: 330px;
  object-fit: contain;
}

.bt-hero__slide--iphone .bt-hero__media img {
  max-width: 480px;
  max-height: 350px;
}

.bt-hero__navegacion {
  position: absolute;
  right: clamp(30px, 5vw, 88px);
  bottom: 28px;
  z-index: 2;
  display: flex;
  gap: 8px;
}

.bt-hero__punto {
  width: 8px;
  height: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: var(--bt-400);
  cursor: pointer;
  transition: width var(--bt-t), background var(--bt-t);
}

.bt-hero__punto.is-activo { width: 28px; background: var(--bt-hero-acento); }
.bt-hero__punto:focus-visible { outline: 2px solid var(--bt-900); outline-offset: 3px; }

.bt-categorias { margin: 0; }

.bt-categorias__cabecera {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.bt-categorias__ceja {
  --bt-hero-acento: var(--bt-ambar-osc);
  margin-bottom: 7px;
}

.bt-categorias__cabecera h2 {
  margin: 0;
  color: var(--bt-900);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 650;
  letter-spacing: -.045em;
  line-height: 1.05;
}

.bt-categorias__todo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 2px;
  color: var(--bt-900) !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
}

.bt-categorias__todo:hover,
.bt-categorias__todo:focus-visible { color: var(--bt-ambar-osc) !important; }
.bt-categorias__todo:focus-visible { outline: 2px solid var(--bt-ambar-osc); outline-offset: 4px; }

.bt-categorias__lista {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bt-categorias__item { min-width: 0; }

.bt-categorias__item a {
  position: relative;
  display: block;
  min-height: 204px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--bt-800);
  color: var(--bt-blanco) !important;
  isolation: isolate;
  text-decoration: none !important;
}

.bt-categorias__imagen,
.bt-categorias__velo {
  position: absolute;
  inset: 0;
}

.bt-categorias__imagen {
  background: center / cover no-repeat;
  transition: transform 380ms cubic-bezier(.2, .75, .25, 1);
}

.bt-categorias__imagen--vacia { background: linear-gradient(145deg, var(--bt-800), var(--bt-600)); }

.bt-categorias__velo {
  background: linear-gradient(180deg, rgba(16, 18, 22, .03) 20%, rgba(16, 18, 22, .82) 100%);
  transition: background var(--bt-t);
}

.bt-categorias__texto {
  position: absolute;
  right: 14px;
  bottom: 13px;
  left: 14px;
  z-index: 1;
  display: grid;
  gap: 3px;
}

.bt-categorias__texto small {
  overflow: hidden;
  color: rgba(255, 255, 255, .78);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bt-categorias__texto strong {
  color: inherit;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -.035em;
  line-height: 1.1;
}

.bt-categorias__texto i {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 18px;
  font-style: normal;
  opacity: 0;
  transform: translate(-5px, 5px);
  transition: opacity var(--bt-t), transform var(--bt-t);
}

.bt-categorias__item a:hover .bt-categorias__imagen,
.bt-categorias__item a:focus-visible .bt-categorias__imagen { transform: scale(1.06); }

.bt-categorias__item a:hover .bt-categorias__velo,
.bt-categorias__item a:focus-visible .bt-categorias__velo { background: linear-gradient(180deg, rgba(16, 18, 22, .01) 20%, rgba(16, 18, 22, .9) 100%); }

.bt-categorias__item a:hover i,
.bt-categorias__item a:focus-visible i { opacity: 1; transform: none; }
.bt-categorias__item a:focus-visible { outline: 3px solid var(--bt-ambar-osc); outline-offset: 3px; }

@media (max-width: 1199px) {
  .bt-categorias__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .bt-hero { border-radius: 14px; }
  .bt-hero__slide { grid-template-columns: 1fr; min-height: 0; }
  .bt-hero__contenido { min-height: 326px; padding: 36px 28px 70px; }
  .bt-hero__titulo { max-width: 11ch; font-size: clamp(37px, 12vw, 52px); }
  .bt-hero__detalle { margin-top: 18px; font-size: 14px; }
  .bt-hero__precio { margin-top: 20px; }
  .bt-hero__cta { margin-top: 20px; }
  .bt-hero__media { min-height: 225px; padding: 14px 28px 36px; }
  .bt-hero__media::before { width: 300px; height: 300px; }
  .bt-hero__media img { max-height: 210px; }
  .bt-hero__slide--iphone .bt-hero__media img { max-height: 220px; }
  .bt-hero__navegacion { right: 28px; bottom: 28px; }

  .bt-categorias__cabecera { align-items: flex-start; margin-bottom: 15px; }
  .bt-categorias__cabecera h2 { max-width: 11ch; }
  .bt-categorias__todo { margin-top: 15px; font-size: 13px; }
  .bt-categorias__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bt-categorias__item a { min-height: 174px; border-radius: 11px; }
  .bt-categorias__texto { right: 12px; bottom: 11px; left: 12px; }
  .bt-categorias__texto strong { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .bt-hero__cta,
  .bt-hero__punto,
  .bt-categorias__imagen,
  .bt-categorias__velo,
  .bt-categorias__texto i { transition: none !important; }
  .bt-hero__cta:hover { transform: none; }
  .bt-categorias__item a:hover .bt-categorias__imagen { transform: none; }
}


/* ========================================================================== 
   AD. FOOTER BLACKTRONIC
   Un unico footer para escritorio y movil. Electro conserva la etiqueta
   semantica exterior; todo el interior lo genera inc/bt-footer.php.
   ========================================================================== */

#colophon.site-footer.footer-v2 {
  margin: 0;
  padding: 0;
  background: #121417;
  color: #d8dadd;
}

.bt-footer {
  --bt-footer-bg: #121417;
  --bt-footer-raised: #1a1d21;
  --bt-footer-line: rgba(255, 255, 255, .11);
  --bt-footer-muted: #aeb3bb;
  --bt-footer-ink: #f7f7f5;
  background: var(--bt-footer-bg);
  color: var(--bt-footer-muted);
  font-family: 'Outfit', sans-serif;
}

.bt-footer *,
.bt-footer *::before,
.bt-footer *::after { box-sizing: border-box; }

.bt-footer__container {
  width: min(100% - 48px, 1320px);
  margin-inline: auto;
}

/* Newsletter: una antesala compacta, no otro bloque promocional enorme. */
.bt-footer__newsletter {
  position: relative;
  overflow: hidden;
  background: var(--bt-footer-raised);
  border-bottom: 1px solid var(--bt-footer-line);
}

.bt-footer__newsletter::after {
  position: absolute;
  top: -95px;
  left: 43%;
  width: 260px;
  height: 260px;
  border: 54px solid rgba(240, 145, 37, .07);
  border-radius: 50%;
  content: '';
  pointer-events: none;
}

.bt-footer__newsletter-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(390px, 560px);
  gap: clamp(32px, 7vw, 110px);
  align-items: center;
  min-height: 188px;
  padding-block: 38px 42px;
}

.bt-footer__newsletter-copy { min-width: 0; max-width: 570px; overflow: hidden; }

.bt-footer__newsletter-label {
  margin: 0 0 8px;
  color: var(--bt-ambar);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}

#colophon.site-footer .bt-footer__newsletter-copy h2 {
  margin: 0;
  color: var(--bt-footer-ink) !important;
  font-size: clamp(27px, 2.4vw, 38px);
  font-weight: 720;
  letter-spacing: -.035em;
  line-height: 1.08;
  text-wrap: balance;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

.bt-footer__newsletter-copy > p:last-child {
  max-width: 54ch;
  margin: 12px 0 0;
  color: var(--bt-footer-muted);
  font-size: 15px;
  line-height: 1.55;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

.bt-footer__newsletter-form .wpforms-container,
.bt-footer__newsletter-form .wpforms-container-full { margin: 0 !important; }

.bt-footer__newsletter-form .wpforms-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}

.bt-footer__newsletter-form .wpforms-field-container { min-width: 0; }
.bt-footer__newsletter-form .wpforms-field { padding: 0 !important; }
.bt-footer__newsletter-form .wpforms-field-hp { display: none !important; }

.bt-footer__newsletter-form input[type='email'] {
  width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;
  padding: 0 17px !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #17191d !important;
  font-size: 15px !important;
  box-shadow: none !important;
}

.bt-footer__newsletter-form input[type='email']::placeholder {
  color: #666c75 !important;
  opacity: 1;
}

.bt-footer__newsletter-form .wpforms-submit-container {
  margin: 0 !important;
  padding: 0 !important;
}

#colophon.site-footer #wpforms-5223 #wpforms-submit-5223,
#colophon.site-footer .bt-footer__newsletter-form button[type='submit'] {
  min-width: 126px !important;
  height: 50px !important;
  padding: 0 21px !important;
  border: 1px solid var(--bt-ambar) !important;
  border-radius: 8px !important;
  background: var(--bt-ambar) !important;
  background-color: var(--bt-ambar) !important;
  background-image: none !important;
  color: #161719 !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  box-shadow: none !important;
  transition: background-color var(--bt-t), border-color var(--bt-t), transform var(--bt-t);
}

#colophon.site-footer #wpforms-5223 #wpforms-submit-5223:hover,
#colophon.site-footer .bt-footer__newsletter-form button[type='submit']:hover {
  border-color: #f6a443 !important;
  background: #f6a443 !important;
  background-color: #f6a443 !important;
}

.bt-footer__newsletter-form button[type='submit']:active { transform: translateY(1px); }

.bt-footer__newsletter-form input:focus-visible,
.bt-footer__newsletter-form button:focus-visible,
.bt-footer a:focus-visible,
.bt-footer summary:focus-visible {
  outline: 3px solid var(--bt-ambar) !important;
  outline-offset: 3px;
}

.bt-footer__newsletter-form .wpforms-error,
.bt-footer__newsletter-form .wpforms-field-limit-text {
  grid-column: 1 / -1;
  color: #ffd3a2 !important;
}

.bt-footer__privacy {
  margin: 9px 0 0;
  color: #8f959e;
  font-size: 12px;
  line-height: 1.45;
}

.bt-footer__privacy a {
  color: #c9cdd2;
  text-decoration: underline;
  text-decoration-color: rgba(201, 205, 210, .45);
  text-underline-offset: 3px;
}

/* Cuerpo principal. */
.bt-footer__main {
  display: grid;
  grid-template-columns: minmax(270px, 1.45fr) repeat(3, minmax(145px, 1fr));
  gap: clamp(36px, 5vw, 78px);
  padding-block: 58px 54px;
}

.bt-footer__brand { max-width: 330px; }

.bt-footer__logo { margin: 0 0 21px; }
.bt-footer__logo .custom-logo-link { display: inline-flex; }
.bt-footer__logo img {
  display: block;
  width: auto;
  max-width: 188px;
  height: 36px;
  object-fit: contain;
  object-position: left center;
  filter: grayscale(1) brightness(0) invert(1);
}

.bt-footer__logo > a:not(.custom-logo-link) {
  color: var(--bt-footer-ink);
  font-size: 25px;
  font-weight: 750;
}

.bt-footer__promise {
  max-width: 32ch;
  margin: 0 0 18px;
  color: var(--bt-footer-muted);
  font-size: 14px;
  line-height: 1.65;
  text-wrap: pretty;
}

.bt-footer__social { margin: 0 0 24px; }

.bt-footer__social a {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 7px 12px;
  border: 1px solid var(--bt-footer-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .025);
  color: var(--bt-footer-ink);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color var(--bt-t), background-color var(--bt-t), color var(--bt-t);
}

.bt-footer__social a:hover {
  border-color: rgba(240, 145, 37, .55);
  background: rgba(240, 145, 37, .08);
  color: var(--bt-ambar);
}

.bt-footer__social svg {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--bt-ambar);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bt-footer__social .bt-footer__instagram-dot {
  fill: var(--bt-ambar);
  stroke: none;
}

.bt-footer__social span { display: grid; gap: 2px; }
.bt-footer__social small {
  color: #868c94;
  font-size: 10.5px;
  font-weight: 500;
}

.bt-footer__contact { display: grid; gap: 13px; }

.bt-footer__contact a {
  display: flex;
  gap: 11px;
  align-items: center;
  width: max-content;
  max-width: 100%;
  color: var(--bt-footer-ink);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.25;
  text-decoration: none;
}

.bt-footer__contact a:hover { color: var(--bt-ambar); }

.bt-footer__contact svg {
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--bt-ambar);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bt-footer__contact span { display: grid; gap: 2px; }
.bt-footer__contact small {
  color: #868c94;
  font-size: 11px;
  font-weight: 500;
}

.bt-footer__brand address {
  max-width: 30ch;
  margin: 20px 0 0;
  color: #8f959e;
  font-size: 12.5px;
  font-style: normal;
  line-height: 1.55;
}

.bt-footer__group {
  min-width: 0;
  margin: 0;
  border: 0;
}

.bt-footer__group summary {
  position: relative;
  margin: 0 0 19px;
  color: var(--bt-footer-ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  list-style: none;
}

.bt-footer__group summary::-webkit-details-marker { display: none; }

.bt-footer__links {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bt-footer__links li { margin: 0; padding: 0; }

.bt-footer__links a {
  display: inline-block;
  color: var(--bt-footer-muted);
  font-size: 13.5px;
  font-weight: 450;
  line-height: 1.45;
  text-decoration: none;
  transition: color var(--bt-t), transform var(--bt-t);
}

.bt-footer__links a:hover {
  color: var(--bt-footer-ink);
  transform: translateX(3px);
}

/* Confianza y metodos de pago. */
.bt-footer__assurance {
  display: grid;
  grid-template-columns: repeat(3, minmax(175px, 1fr)) minmax(310px, 1.45fr);
  border-top: 1px solid var(--bt-footer-line);
  border-bottom: 1px solid var(--bt-footer-line);
}

.bt-footer__assurance-item,
.bt-footer__payment-block {
  min-width: 0;
  padding: 25px 24px;
  border-right: 1px solid var(--bt-footer-line);
}

.bt-footer__assurance-item:first-child { padding-left: 0; }
.bt-footer__payment-block { padding-right: 0; border-right: 0; }

.bt-footer__assurance-item {
  display: flex;
  gap: 12px;
  align-items: center;
}

.bt-footer__assurance svg,
.bt-footer__payment-title svg {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--bt-ambar);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bt-footer__assurance-item span { display: grid; gap: 3px; min-width: 0; }
.bt-footer__assurance-item strong {
  overflow: hidden;
  color: var(--bt-footer-ink);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bt-footer__assurance-item small {
  overflow: hidden;
  color: #898f97;
  font-size: 11px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bt-footer__payment-block { display: grid; gap: 10px; align-content: center; }
.bt-footer__payment-title {
  display: flex;
  gap: 7px;
  align-items: center;
  color: var(--bt-footer-ink);
  font-size: 12px;
  font-weight: 650;
}
.bt-footer__payment-title svg { width: 16px; height: 16px; flex-basis: 16px; }

.bt-footer__payments { display: flex; flex-wrap: wrap; gap: 6px; }

.bt-payment {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 48px;
  height: 28px;
  padding: 0 8px;
  overflow: hidden;
  border-radius: 5px;
  background: #f4f5f6;
  color: #15171b;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}

.bt-payment--visa { color: #163b88; font-size: 11px; font-style: italic; letter-spacing: -.04em; }
.bt-payment--paypal { color: #173b7a; font-size: 10px; font-style: italic; }
.bt-payment--paypal span { color: #159ad6; }
.bt-payment--bizum { color: #0a7f8c; font-size: 11px; font-weight: 700; letter-spacing: -.02em; }
.bt-payment--google { gap: 3px; font-size: 10px; font-weight: 600; }
.bt-payment--google i { color: #4285f4; font-size: 12px; font-style: normal; font-weight: 800; }

.bt-payment--mastercard { min-width: 56px; padding: 0; }
.bt-payment--mastercard i,
.bt-payment--mastercard b {
  position: absolute;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.bt-payment--mastercard i { left: 19px; background: #e83c31; }
.bt-payment--mastercard b { left: 25px; background: rgba(244, 145, 20, .9); }
.bt-payment--mastercard em {
  position: absolute;
  bottom: 2px;
  font-size: 5px;
  font-style: normal;
  font-weight: 700;
}

/* Cierre. */
.bt-footer__bottom { background: #0c0e10; }
.bt-footer__bottom-inner {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  min-height: 68px;
  padding-block: 16px;
}

.bt-footer__bottom p {
  margin: 0;
  color: #868c94;
  font-size: 12.5px;
}

.bt-footer__bottom nav { display: flex; flex-wrap: wrap; gap: 24px; }
.bt-footer__bottom a {
  color: #aeb3bb;
  font-size: 12.5px;
  text-decoration: none;
}
.bt-footer__bottom a:hover { color: var(--bt-footer-ink); }

@media (min-width: 768px) {
  .bt-footer__group summary { pointer-events: none; }
}

@media (max-width: 1050px) {
  .bt-footer__main {
    grid-template-columns: minmax(250px, 1.25fr) repeat(3, minmax(130px, 1fr));
    gap: 32px;
  }
  .bt-footer__assurance { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bt-footer__payment-block {
    grid-column: 1 / -1;
    grid-template-columns: auto 1fr;
    align-items: center;
    padding: 20px 0;
    border-top: 1px solid var(--bt-footer-line);
  }
  .bt-footer__assurance-item:nth-child(3) { border-right: 0; }
}

@media (max-width: 899px) and (min-width: 768px) {
  .bt-footer__main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bt-footer__brand { grid-column: 1 / -1; max-width: 100%; }
  .bt-footer__promise { max-width: 54ch; }
  .bt-footer__contact { grid-template-columns: repeat(2, max-content); gap: 18px 34px; }
}

@media (max-width: 767px) {
  .bt-footer__container { width: min(100% - 32px, 680px); }
  .bt-footer__newsletter::after { top: -120px; left: auto; right: -90px; }
  .bt-footer__newsletter-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    min-height: 0;
    padding-block: 34px 36px;
  }
  .bt-footer__newsletter-copy h2 { max-width: 18ch; font-size: clamp(25px, 7vw, 32px); }
  .bt-footer__newsletter-copy > p:last-child { max-width: 38ch; margin-top: 10px; font-size: 14px; }

  .bt-footer__main {
    display: block;
    padding-block: 42px 26px;
  }
  .bt-footer__brand { max-width: 100%; padding-bottom: 31px; }
  .bt-footer__promise { max-width: 40ch; }
  .bt-footer__contact { grid-template-columns: 1fr; gap: 9px; }
  .bt-footer__contact a {
    width: 100%;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid var(--bt-footer-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .025);
    font-size: 12.5px;
  }
  .bt-footer__contact small { font-size: 10px; }

  .bt-footer__group { border-top: 1px solid var(--bt-footer-line); }
  .bt-footer__group:last-child { border-bottom: 1px solid var(--bt-footer-line); }
  .bt-footer__group summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 58px;
    margin: 0;
    cursor: pointer;
  }
  .bt-footer__group summary::after {
    width: 9px;
    height: 9px;
    margin-right: 4px;
    border-right: 1.5px solid var(--bt-ambar);
    border-bottom: 1.5px solid var(--bt-ambar);
    content: '';
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--bt-t);
  }
  .bt-footer__group[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
  .bt-footer__links { gap: 0; padding: 0 0 14px; }
  .bt-footer__links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    width: 100%;
    font-size: 14px;
  }
  .bt-footer__links a:hover { transform: none; }

  .bt-footer__assurance { grid-template-columns: 1fr; }
  .bt-footer__assurance-item,
  .bt-footer__assurance-item:first-child {
    min-height: 72px;
    padding: 16px 0;
    border-right: 0;
    border-bottom: 1px solid var(--bt-footer-line);
  }
  .bt-footer__assurance-item strong,
  .bt-footer__assurance-item small { white-space: normal; }
  .bt-footer__payment-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: 13px;
    padding: 21px 0 25px;
    border-top: 0;
  }
  .bt-footer__payments { gap: 7px; }
  .bt-payment { height: 31px; }

  .bt-footer__bottom-inner {
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    min-height: 96px;
    text-align: center;
  }
  .bt-footer__bottom nav { justify-content: center; gap: 11px 20px; }

  .bt-footer__newsletter-form .wpforms-form { grid-template-columns: 1fr !important; }
  .bt-footer__newsletter-form button[type='submit'] { width: 100% !important; }
  .bt-footer__bottom p { max-width: 30ch; white-space: normal; }
}

@media (max-width: 479px) {
  .bt-footer__newsletter-copy h2 { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .bt-footer a,
  .bt-footer button,
  .bt-footer__group summary::after { transition: none !important; }
  .bt-footer__links a:hover,
  .bt-footer__newsletter-form button[type='submit']:active { transform: none; }
}