/* ============================================================================
   rc-ui / 00-base.css  —  LOTE 3
   repuestoscalderas.com · capa nueva, modular, sin deuda
   ----------------------------------------------------------------------------
   QUE ES: la base estructural de rc-ui. Aporta (a) la fuente autoalojada,
   (b) los tokens de GEOMETRIA que rc-tokens.css no tiene, (c) un reset
   minimo acotado a la nueva tarjeta.
   NO redefine la paleta: la paleta sigue siendo rc-tokens.css
   (--rc-navy, --rc-cta-bg, --rc-card-border...). Aqui solo se anaden
   tokens NUEVOS y se declaran fallbacks por si rc-tokens.css no cargara.

   ORDEN DE CARGA OBLIGATORIO:
     theme.css  ->  rc-tokens.css  ->  rc-ui.css (00-base + 10-cards + ...)

   REGLA DE LA CAPA: CERO !important. Recuento en este fichero: 0.
   (Los informes miden 20.651 !important en las capas viejas de los cuales
   solo 42 eran necesarios; esta capa no anade ni uno.)

   BREAKPOINTS CANONICOS (unicos permitidos en toda la capa rc-ui):
     base   = movil            (< 480px)
     480    = movil grande
     768    = tablet
     981    = tablet apaisada / portatil pequeno
     1025   = escritorio
   Mobile-first: solo se usa (min-width: N). Prohibido max-width salvo
   para desactivar un efecto de escritorio (hover), documentado en linea.
   ============================================================================ */


/* ----------------------------------------------------------------------------
   1. TIPOGRAFIA AUTOALOJADA
   DM Sans variable (un solo fichero cubre 400..700). NUNCA Google Fonts:
   evita la peticion a fonts.gstatic.com, el FOUT de tercera parte y el
   problema de CSP. Los .woff2 se entregan en rc-ui/fonts/ y se copian a
   themes/warehouse/assets/fonts/ (ver APLICAR.md paso 1).
   Ruta relativa: rc-ui.css vive en assets/css/ -> ../fonts/
   ---------------------------------------------------------------------------- */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;          /* fichero variable: cubre 400/500/600/700 */
  font-display: swap;            /* el texto se pinta ya con la fuente de sistema */
  src: url('../fonts/dmsans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/dmsans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ----------------------------------------------------------------------------
   2. TOKENS ESTRUCTURALES
   ---------------------------------------------------------------------------- */
:root {

  /* ---- 2.1 ALTURA UNICA DE CONTROL ----------------------------------------
     Es EL token del sistema. Todo control interactivo (boton de anadir,
     boton compartir, futuro boton "Filtrar", inputs de la barra de filtros)
     mide exactamente --rc-h de alto. Es lo que hace que Uniclima se lea
     ordenado: no hay dos alturas distintas en la misma fila.
     50px en escritorio, 44px es el suelo tactil (WCAG 2.5.8 AAA = 44x44). */
  --rc-h: 44px;                  /* base movil: ya cumple el minimo tactil */
  --rc-h-lg: 50px;               /* >=981px, se aplica mas abajo */

  /* ---- 2.2 RADIOS POR COMPONENTE ------------------------------------------
     Uno por componente, no un radio global. Jerarquia: la tarjeta es el
     contenedor mas redondeado, el control el menos. */
  --rc-radius-card: 18px;
  --rc-radius-media: 14px;
  --rc-radius-btn: 12px;
  --rc-radius-pill: 999px;
  --rc-radius-chip: 6px;

  /* ---- 2.3 SOMBRAS (valores literales, informe uniclima 1.6) ---------------
     Sombra de dos capas: un filo de 1px que define el borde y una sombra
     larga muy difuminada y de offset negativo que da profundidad sin
     ensuciar. Nunca una sombra unica dura. */
  --rc-shadow-card:       0 1px 2px rgba(15,23,42,.04), 0 10px 26px -20px rgba(15,23,42,.22);
  --rc-shadow-card-hover: 0 2px 4px rgba(15,23,42,.06), 0 18px 40px -24px rgba(15,23,42,.30);
  --rc-shadow-ctrl:       0 1px 2px rgba(15,23,42,.04);
  --rc-shadow-badge:      0 4px 12px -2px rgba(21,128,61,.55), inset 0 1px 0 rgba(255,255,255,.35);
  --rc-shadow-pop:        0 1px 5px rgba(15,23,42,.16);

  /* ---- 2.4 TIPOGRAFIA ------------------------------------------------------ */
  --rc-font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --rc-text-2xs: 10.5px;
  --rc-text-xs:  11.5px;
  --rc-text-sm:  13px;
  --rc-text-md:  14px;
  --rc-text-lg:  15px;
  --rc-text-xl:  19px;

  --rc-lh-tight: 1.25;
  --rc-lh-title: 1.32;

  /* ---- 2.5 NEUTROS Y SUPERFICIES ------------------------------------------
     Complementan la paleta de marca de rc-tokens.css (navy/rojo). */
  --rc-ink:        #0f172a;   /* texto principal */
  --rc-ink-soft:   #475569;   /* texto secundario */
  --rc-ink-muted:  #64748b;   /* metadatos: categoria, referencia */
  --rc-line:       #e3e8f0;   /* filos y separadores */
  --rc-surface:    #ffffff;   /* fondo de tarjeta */
  --rc-surface-2:  #f6f8fb;   /* plato de imagen */

  /* Estado del producto */
  --rc-refurb:      #16a34a;
  --rc-refurb-2:    #15803d;
  --rc-refurb-3:    #34d399;

  /* ---- 2.6 ESPACIADO ------------------------------------------------------- */
  --rc-gap-1: 4px;
  --rc-gap-2: 8px;
  --rc-gap-3: 12px;
  --rc-gap-4: 16px;

  /* ---- 2.7 MOVIMIENTO Y FOCO ---------------------------------------------- */
  --rc-ease: cubic-bezier(.2,.8,.2,1);
  --rc-dur: .22s;
  --rc-focus-ring: 0 0 0 3px rgba(26,43,74,.35);
}

/* La altura de control sube a 50px cuando hay sitio de sobra. */
@media (min-width: 981px) {
  :root { --rc-h: var(--rc-h-lg); }
}


/* ----------------------------------------------------------------------------
   3. RESET MINIMO — ACOTADO
   No se toca *, ni body, ni html. Solo el arbol de la tarjeta nueva y la
   celda de rejilla, para que ninguna regla heredada del tema meta padding
   o box-sizing sorpresa dentro de un componente que ya calcula su geometria.
   ---------------------------------------------------------------------------- */
.rc-cell,
.rc-cell *,
.rc-card,
.rc-card * {
  box-sizing: border-box;
}

/* Los controles de rc-ui no heredan la fuente del tema: la fijan. */
.rc-card button,
.rc-card input,
.rc-card select {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}


/* ----------------------------------------------------------------------------
   4. FOCO VISIBLE
   Accesibilidad: la capa vieja apaga outlines en varios sitios. rc-ui
   garantiza un anillo de foco propio y solo por teclado (:focus-visible),
   para no ensuciar el clic con raton.
   ---------------------------------------------------------------------------- */
.rc-card a:focus-visible,
.rc-card button:focus-visible {
  outline: 2px solid var(--rc-navy, #1a2b4a);
  outline-offset: 2px;
  border-radius: var(--rc-radius-chip);
}


/* ----------------------------------------------------------------------------
   5. MOVIMIENTO REDUCIDO
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .rc-card,
  .rc-card * {
    transition-duration: .01ms;
    animation-duration: .01ms;
    animation-iteration-count: 1;
  }
}


/* ----------------------------------------------------------------------------
   6. UTILIDAD: TEXTO SOLO PARA LECTORES DE PANTALLA
   Necesaria para etiquetar el boton de compartir sin texto visible.
   ---------------------------------------------------------------------------- */
.rc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ======================= fin rc-ui/00-base.css ============================= */
/* ============================================================================
   rc-ui / 10-cards.css  —  LOTE 3
   Tarjeta de producto + rejilla de categoria
   ----------------------------------------------------------------------------
   Depende de: rc-tokens.css (paleta) y rc-ui/00-base.css (geometria).
   Marcado que estiliza: lote3/product-miniature.tpl
   REGLA DE LA CAPA: CERO !important. Recuento en este fichero: 0.

   POR QUE ESTO ARREGLA LAS ROTURAS 2-9 DEL INFORME RESPONSIVE:

   [2] "tarjeta al 47% de su columna"
       Causa medida: theme.css:8 declara .col-2{flex:0 0 16.66667%} y el
       wrapper de la miniatura llevaba class="col-2 col-md-3 col-lg-4".
       En 576-767px NADIE lo corregia -> 6 tarjetas por fila.
       Arreglo: el tpl nuevo YA NO EMITE clases col-* en listado; emite
       .rc-cell, y el ancho lo decide la rejilla de aqui abajo.

   [3] "conflicto 50% vs 33.333%"
       Causa medida: custom.css:1135 (@max-575px, 50%) contra
       rc-responsive-final:1589-1612 (@768-991.98px, 33.333% !important),
       ademas del comentario contradictorio de FIX-33:1785 que decia
       "cards a 2 columnas". Tres capas decidiendo el mismo ancho.
       Arreglo: una sola fuente de verdad, CSS Grid en el contenedor.
       Al no existir ya las clases col-*, las tres reglas viejas quedan
       sin efecto observable sobre el reparto (siguen apuntando a
       .js-product-miniature-wrapper, que conservamos por compatibilidad
       JS, por eso se documenta el residuo en APLICAR.md).

   [4][5] "55% del boton cortado" / "texto del boton truncado"
       Causa medida: el precio iba FUERA del boton y el boton heredaba
       font-size y padding de .btn-product-list, desbordando en columnas
       estrechas (POLISH-5 lo parcheaba bajando la fuente a 10px).
       Arreglo: el precio va DENTRO del boton, el boton es flex con
       min-width:0 y en movil se ocultan etiqueta y separador por CSS
       (no por JS), quedando icono + precio, que siempre cabe.

   [6][7] "68% de aire muerto"
       Causa medida: descripcion corta de hasta 360 caracteres, marca,
       referencia, bloque de disponibilidad y precio repetido, todo
       apilado con alturas libres.
       Arreglo: la tarjeta es una columna flex con altura de titulo
       acotada por clamp y .rc-card__actions empujado con margin-top:auto,
       de modo que TODAS las tarjetas de una fila alinean su boton.

   [8][9] "92% de objetivos tactiles pequenos"
       Arreglo: todo control mide --rc-h (44px en movil, 50px >=981px) y
       el boton de compartir es un cuadrado de --rc-h. Ningun objetivo
       interactivo de la tarjeta baja de 44x44 CSS px.
   ============================================================================ */


/* ============================================================================
   1. REJILLA
   ============================================================================ */

/* ---- 1.1 Base universal (sin :has) -----------------------------------------
   .products es un .row de Bootstrap (display:flex; flex-wrap:wrap), asi que
   la celda puede fijar su propio ancho. Esto funciona en cualquier navegador
   y es la red de seguridad si :has() no esta soportado.
   Especificidad (0,1,0) = la misma que .col-2 de theme.css, pero rc-ui.css
   carga DESPUES -> gana por orden de cascada. Sin !important. */
.rc-cell {
  display: flex;
  flex: 0 0 50%;
  width: 50%;
  max-width: 50%;
  min-width: 0;
  padding: 0 var(--rc-gap-1);
  margin-bottom: var(--rc-gap-3);
}

@media (min-width: 768px) {
  .rc-cell {
    flex-basis: 33.3333%;
    width: 33.3333%;
    max-width: 33.3333%;
    padding: 0 var(--rc-gap-2);
  }
}

@media (min-width: 1025px) {
  .rc-cell {
    flex-basis: 25%;
    width: 25%;
    max-width: 25%;
  }
}

/* ---- 1.2 Rejilla real (preferente) -----------------------------------------
   CSS Grid entierra definitivamente el reparto por columnas de Bootstrap:
   ya no hay porcentajes que negociar, el contenedor reparte.
   Se activa solo si el contenedor tiene celdas nuevas, para no alterar
   listados que aun rendericen el marcado viejo (carruseles, Elementor). */
@supports selector(:has(*)) {

  .products:has(> .rc-cell) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rc-gap-3);
    margin-right: 0;
    margin-left: 0;
  }

  /* La celda deja de gestionar su ancho: lo hace la rejilla. */
  .products:has(> .rc-cell) > .rc-cell {
    flex: none;
    width: auto;
    max-width: none;
    padding: 0;
    margin-bottom: 0;
  }

  @media (min-width: 768px) {
    .products:has(> .rc-cell) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* >=1025px: auto-fill. La tarjeta nunca baja de 280px, asi que el numero
     de columnas lo decide el ancho disponible y no una cuenta fija.
     Esto es lo que evita el "squeeze" de FIX-33 cuando hay barra lateral:
     con sidebar caben 3, sin sidebar caben 4, sin escribir ninguna regla. */
  @media (min-width: 1025px) {
    .products:has(> .rc-cell) {
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: var(--rc-gap-4);
    }
  }
}


/* ============================================================================
   2. TARJETA
   ============================================================================ */

.rc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;              /* imprescindible: permite que el texto encoja */
  background: var(--rc-surface, #fff);
  border: 1px solid var(--rc-card-border, #e9ecef);
  border-radius: var(--rc-radius-card);
  box-shadow: var(--rc-shadow-card);
  overflow: hidden;
  font-family: var(--rc-font-sans);
  color: var(--rc-ink);
  transition:
    transform var(--rc-dur) var(--rc-ease),
    box-shadow var(--rc-dur) var(--rc-ease),
    border-color var(--rc-dur) var(--rc-ease);
}

/* El realce solo en dispositivos con raton real: en tactil el :hover se
   queda "pegado" tras el toque y deja la tarjeta levantada. */
@media (hover: hover) and (pointer: fine) {
  .rc-card:hover {
    transform: translateY(-2px);
    border-color: var(--rc-line);
    box-shadow: var(--rc-shadow-card-hover);
  }
}


/* ============================================================================
   3. ZONA DE IMAGEN
   ============================================================================ */

.rc-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;        /* cuadrado exacto: todas las filas alinean */
  width: auto;                /* con margenes laterales, auto = ancho util */
  margin: var(--rc-gap-2) var(--rc-gap-2) 0;
  background: var(--rc-surface-2);
  border-radius: var(--rc-radius-media);
  overflow: hidden;
}

.rc-card__link {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 1;
}

/* Toda imagen dentro del plato se comporta igual: contain, nunca recorta
   una pieza de caldera, y con aire interior para que no toque el filo. */
.rc-card__img,
.rc-imgstack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 10px;
  object-fit: contain;
}


/* ---- 3.1 Mini-galeria estatica ---------------------------------------------
   Las imagenes se imprimen desde el .tpl (cero peticiones de red anadidas).
   Solo se apilan y se cruzan por opacidad. Sin JS la primera ya es visible
   porque el .tpl marca is-active en la de indice 0. */
/* pointer-events:none SIEMPRE, sin excepcion: la pila cubre todo el plato,
   asi que si capturara el puntero dejaria .rc-card__link (el enlace a la
   ficha) inalcanzable. cards.js NO escucha sobre la pila: escucha sobre
   .rc-card__media y aprovecha que el evento burbujea desde el enlace. */
.rc-imgstack {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.rc-imgstack img {
  opacity: 0;
  transition: opacity .2s ease-in-out;
}

.rc-imgstack img.is-active {
  opacity: 1;
}

/* cards.js marca is-scrubbable en los platos con 2+ imagenes. Solo sirve
   para que el CSS sepa que hay barrido; el cursor sigue siendo el del
   enlace (pointer), que es lo correcto: el plato ES clicable. */

/* ---- 3.2 Indicadores de la galeria ----------------------------------------- */
.rc-prog {
  position: absolute;
  left: 50%;
  bottom: 8px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: var(--rc-gap-1);
  max-width: 80%;
  padding: 4px 7px;
  margin: 0;
  overflow: hidden;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, .82);
  border-radius: var(--rc-radius-pill);
  box-shadow: var(--rc-shadow-pop);
  pointer-events: none;
}

.rc-prog__seg {
  display: block;
  flex: 0 0 auto;
  width: 12px;
  height: 4px;
  background: #cbd5e1;
  border-radius: var(--rc-radius-pill);
  transition: width .2s ease, background-color .2s ease;
}

.rc-prog__seg.is-active {
  width: 22px;
  background: var(--rc-navy, #1a2b4a);
}


/* ============================================================================
   4. DISTINTIVOS
   ============================================================================ */

.rc-badges {
  position: absolute;
  top: var(--rc-gap-2);
  left: var(--rc-gap-2);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rc-gap-1);
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

/* ---- 4.1 Pildora circular de reacondicionado -------------------------------
   Es el distintivo de negocio de la casa: 3.914 de 5.677 fichas son
   reacondicionadas (medido en prstshp_product.condition). Circulo verde
   con visto, sin texto, para no robar sitio a la imagen. */
.rc-badge--refurb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #fff;
  background-color: var(--rc-refurb);
  background-image: linear-gradient(160deg, var(--rc-refurb-3) 0%, var(--rc-refurb) 45%, var(--rc-refurb-2) 100%);
  border: 2px solid #fff;
  border-radius: var(--rc-radius-pill);
  box-shadow: var(--rc-shadow-badge);
}

.rc-badge--refurb svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: #fff;
}

/* ---- 4.2 Distintivos de texto (rebajas, novedad, agotado) ------------------- */
.rc-badge {
  display: inline-block;
  padding: 4px 9px;
  font-size: var(--rc-text-2xs);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--rc-ink);
  border-radius: var(--rc-radius-chip);
}

.rc-badge--discount   { background: var(--rc-red, #c82333); }
.rc-badge--new        { background: var(--rc-navy, #1a2b4a); }
.rc-badge--soldout    { background: var(--rc-ink-muted); }


/* ============================================================================
   5. CUERPO DE TEXTO
   ============================================================================ */

.rc-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--rc-gap-1);
  padding: var(--rc-gap-3) var(--rc-gap-3) var(--rc-gap-2);
}

/* Categoria: linea de contexto, pequena y en mayusculas. */
.rc-card__eyebrow {
  font-size: var(--rc-text-2xs);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rc-ink-muted);

  /* Una linea y punto: nunca debe empujar el titulo. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Titulo: 3 lineas en movil (los nombres de pieza son largos: marca +
   modelo + referencia), 2 a partir de 481px. La altura se RESERVA con
   min-height para que los botones de una misma fila alineen aunque un
   titulo ocupe 1 linea y el de al lado 3. */
.rc-card__title {
  margin: 0;
  font-size: var(--rc-text-sm);
  font-weight: 600;
  line-height: var(--rc-lh-title);
  min-height: calc(3 * var(--rc-lh-title) * 1em);

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rc-card__title a {
  color: var(--rc-ink);
  text-decoration: none;
}

.rc-card__title a:hover {
  color: var(--rc-link-hover, #c82333);
}

@media (min-width: 481px) {
  .rc-card__title {
    -webkit-line-clamp: 2;
    min-height: calc(2 * var(--rc-lh-title) * 1em);
  }
}

@media (min-width: 981px) {
  .rc-card__title { font-size: var(--rc-text-md); }
}

/* Referencia: dato de compra, en tabular para que alinee. */
.rc-card__ref {
  font-size: var(--rc-text-xs);
  line-height: 1.3;
  color: var(--rc-ink-muted);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Precio anterior tachado. El precio VIGENTE no vive aqui: vive dentro del
   boton. Esta linea solo aparece si hay descuento real. */
.rc-card__was {
  font-size: var(--rc-text-xs);
  line-height: 1.3;
  color: var(--rc-ink-muted);
  text-decoration: line-through;
}


/* ============================================================================
   6. ACCIONES  (boton oscuro + compartir)
   ============================================================================ */

.rc-card__actions {
  display: flex;
  align-items: stretch;
  gap: var(--rc-gap-2);
  margin-top: auto;             /* empuja las acciones al fondo: fila alineada */
  padding: 0 var(--rc-gap-3) var(--rc-gap-3);
}

/* El formulario de PrestaShop no debe romper la fila flex. */
.rc-card__form {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

/* ---- 6.1 Boton principal ---------------------------------------------------
   icono + "Anadir" + separador + PRECIO, todo en un unico control oscuro.
   El precio SOLO existe aqui: es la regla que mata para siempre el
   "68 EUR Anadir . 68 EUR 68,00 EUR" que producian tres capas escribiendo
   el mismo article sin conocerse. */
.rc-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rc-gap-2);
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: var(--rc-h);
  padding: 0 var(--rc-gap-3);
  border: 0;
  border-radius: var(--rc-radius-btn);
  background: var(--rc-cta-bg, #1a2b4a);
  color: #fff;
  font-family: var(--rc-font-sans);
  font-size: var(--rc-text-md);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: background-color .15s var(--rc-ease), transform .15s var(--rc-ease);
}

.rc-card__cta:hover {
  background: var(--rc-navy-hover, #0f1d37);
  color: #fff;
}

.rc-card__cta:active {
  transform: translateY(1px);
}

.rc-card__cta[disabled],
.rc-card__cta.is-disabled {
  background: #e2e8f0;
  color: var(--rc-ink-muted);
  cursor: not-allowed;
  pointer-events: none;
}

.rc-card__cta-icon {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rc-card__cta-label,
.rc-card__cta-sep {
  flex: 0 0 auto;
}

.rc-card__cta-sep { opacity: .55; }

.rc-card__cta-price {
  flex: 0 0 auto;
  font-size: var(--rc-text-lg);
  font-weight: 700;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}

/* MOVIL (base, < 768px): el boton queda ICONO + PRECIO.
   La etiqueta y el separador se ocultan POR CSS, no por JS: es la unica
   forma de garantizar que el texto no se corta cuando la columna mide
   ~160px. Antes se parcheaba bajando la fuente a 10px (POLISH-5). */
.rc-card__cta-label,
.rc-card__cta-sep {
  display: none;
}

@media (min-width: 768px) {
  .rc-card__cta-label,
  .rc-card__cta-sep {
    display: block;
  }
  .rc-card__cta { gap: var(--rc-gap-1); }
}

@media (min-width: 981px) {
  .rc-card__cta { gap: var(--rc-gap-2); }
  .rc-card__cta-price { font-size: var(--rc-text-xl); }
}

/* Estado de carga: la clase processing-add la pone el JS existente del
   tema sobre .add-to-cart. rc-ui solo la viste, no la gestiona. */
.rc-card__cta.processing-add {
  opacity: .7;
  pointer-events: none;
}

/* ---- 6.2 Boton compartir ---------------------------------------------------
   Cuadrado de --rc-h: mismo alto que el CTA, por eso la fila se lee limpia. */
.rc-card__share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--rc-h);
  width: var(--rc-h);
  height: var(--rc-h);
  padding: 0;
  color: var(--rc-ink);
  background: var(--rc-surface, #fff);
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius-btn);
  box-shadow: var(--rc-shadow-ctrl);
  cursor: pointer;
  transition:
    background-color .15s var(--rc-ease),
    border-color .15s var(--rc-ease),
    color .15s var(--rc-ease);
}

.rc-card__share:hover {
  color: #fff;
  background: var(--rc-ink);
  border-color: var(--rc-ink);
}

.rc-card__share svg {
  display: block;
  width: 19px;
  height: 19px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Confirmacion de "enlace copiado" (la pone cards.js). */
.rc-card__share.is-copied {
  color: #fff;
  background: var(--rc-refurb);
  border-color: var(--rc-refurb);
}


/* ============================================================================
   7. BOTONES FUNCIONALES DE MODULO  (iqitcompare + iqitwishlist)
   Ambos modulos estan ACTIVOS y se cuelgan de displayProductListFunctionalButtons.
   rc-ui NO reescribe su marcado: solo le da un sitio donde vivir (esquina
   superior derecha del plato) y un tamano tactil digno.
   ============================================================================ */

.rc-card__tools {
  position: absolute;
  top: var(--rc-gap-2);
  right: var(--rc-gap-2);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: var(--rc-gap-1);
}

.rc-card__tools a,
.rc-card__tools button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--rc-ink-soft);
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius-pill);
  box-shadow: var(--rc-shadow-ctrl);
  cursor: pointer;
}

.rc-card__tools a:hover,
.rc-card__tools button:hover {
  color: #fff;
  background: var(--rc-ink);
  border-color: var(--rc-ink);
}


/* ============================================================================
   8. VALORACIONES DE MODULO  (iqitreviews, ACTIVO)
   ============================================================================ */

.rc-card__rating {
  min-height: 16px;
  font-size: var(--rc-text-xs);
  line-height: 1.2;
  color: var(--rc-ink-muted);
}

.rc-card__rating:empty {
  display: none;             /* si el modulo no pinta nada, no reserva aire */
}

/* ======================= fin rc-ui/10-cards.css ============================ */

/* ==========================================================================
   RC-GRID-FIX — dos sistemas de rejilla peleandose.
   .products.products-grid es display:grid y reparte 171px por columna, pero
   los envoltorios .js-product-miniature-wrapper conservan las clases col-* de
   Bootstrap del marcado viejo, que les imponen "flex:0 0 50%" y
   "max-width:50%". Resultado: 50% de 171px = 85,5px de tarjeta, titulos
   partidos letra a letra e imagenes diminutas.
   Dentro de un contenedor grid el item NO debe dimensionarse a si mismo:
   se le devuelve el control a la rejilla.
   Los !important son necesarios: las reglas col-* de Bootstrap tambien lo son.
   ========================================================================== */
.products.products-grid > * {
  flex: initial !important;
  max-width: none !important;
  width: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ==========================================================================
   RC-CTA-FIX — dos defectos que dejaban el boton de compra sin precio.

   1) El <form> que envuelve el boton no crecia dentro de .rc-card__actions
      (es flex), asi que el boton se quedaba en 62px y el precio se salia.
   2) Una regla heredada pinta los precios en azul marino. Como el fondo del
      boton es EXACTAMENTE ese mismo azul (rgb(26,43,74)), el precio quedaba
      invisible: azul sobre azul. Hereda el color del boton, que es blanco.
   ========================================================================== */
.rc-card__actions > form {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
}
.rc-card__actions > form > .rc-card__cta { width: 100% !important; }

.rc-card__cta .rc-card__cta-price,
.rc-card__cta .rc-card__cta-label,
.rc-card__cta .rc-card__cta-sep {
  color: inherit !important;
}

/* ==========================================================================
   RC-IMG-FIX — la imagen de la tarjeta se quedaba en 20x20 px.
   custom.css (capa vieja) declara con !important
     article.product-miniature .thumbnail-container img {
       width:auto; max-width:92%; max-height:268px }
   y gana a la regla de rc-ui, que coloca la imagen en absoluto llenando el
   plato. Con width:auto sobre un elemento absoluto dentro de un enlace
   colapsado, la imagen se reducia a 20px. Solo se notaba en las fichas de UNA
   sola foto: cuando hay mini-galeria, sus imagenes tapaban el fallo.
   Los !important compiten contra los !important de custom.css; desaparecen
   cuando se retire esa capa.
   ========================================================================== */
.rc-card__media .rc-card__img,
.rc-card__media .rc-imgstack img,
article.product-miniature .thumbnail-container.rc-card__media img.rc-card__img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  padding: 10px !important;
}
.rc-card__media .rc-card__link {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
}
/* ==========================================================================
   rc-ui / 20-ficha.css
   repuestoscalderas.com — capa nueva, modulo FICHA DE PRODUCTO
   Lote 4. Se concatena en rc-ui.css DESPUES de 00-base.css y 10-cards.css.
   Depende de: assets/css/rc-tokens.css (tokens de marca --rc-navy, --rc-red...)

   ORDEN DE CARGA OBLIGATORIO
     theme.css > custom.css > BD(iqitthemeed_codes_css) > rc-tokens.css >
     rc-custom.css > rc-responsive-final*.css > rc-ui.css   <-- ULTIMO

   QUE SUSTITUYE (y de donde viene cada cosa)
     1. Las 667 lineas de <style> inline de templates/catalog/product.tpl
        (lineas 71-738). Solo se absorbe lo VIVO (medido, ver cabecera de
        cada seccion). Lo que estilaba la galeria Swiper nativa NO se
        absorbe: esa galeria pasa a display:none permanente.
     2. Las reglas .rc-gallery__* / .rc-lightbox__* / .rc-zoom-overlay que hoy
        viven SOLO en assets/css/rc-responsive-final-1777022100.css
        lineas 8268-8814 (72 declaraciones, medidas con grep: 0 apariciones
        en cualquier otra capa, incluida la de BD). Aqui se entregan
        consolidadas: los parches FIX-90..FIX-95 se sobrescribian entre si;
        lo que hay abajo son los VALORES FINALES que hoy gana la cascada.
        Gracias a esto el lote 5 puede retirar rc-responsive-final sin dejar
        la galeria desnuda.

   POLITICA DE !important
     Secciones 1-7: CERO !important. Especificidad plana (1-2 clases).
     Seccion 8 "PUENTE": unica zona con !important, 9 declaraciones, cada una
     justificada por escrito contra la regla concreta que la obliga. Toda la
     seccion 8 se BORRA cuando el lote 5 retire rc-responsive-final.

   Mobile-first. Breakpoints alineados con Bootstrap 4 del tema:
     576px (sm) / 768px (md) / 992px (lg)
   ========================================================================== */


/* ==========================================================================
   1. TOKENS LOCALES DE FICHA
   Extienden rc-tokens.css, no lo duplican. Valores tomados de la medicion
   del estado actual para no cambiar la identidad ya aprobada:
     - CTA navy      rgb(26,43,74)  = var(--rc-navy)
     - precio        rgb(176,42,24)
     - stock ok      bg #d1fae5 / texto #065f46 / borde #6ee7b7
   ========================================================================== */

.rc-ficha {
  /* Altura unica de control: input cantidad, botones -/+, CTA.
     Es el equivalente de --rc-h de Uniclima. Medido hoy: 44px. */
  --rc-h: 44px;

  --rc-ficha-gap: 12px;
  --rc-ficha-radius: 10px;
  --rc-ficha-border: var(--rc-card-border, #e9ecef);
  --rc-ficha-surface: #fff;
  --rc-ficha-surface-2: #f8f9fa;
  --rc-ficha-muted: var(--rc-gray-text, #6c757d);

  --rc-price-color: #b02a18;

  --rc-ok-bg: #d1fae5;
  --rc-ok-fg: #065f46;
  --rc-ok-border: #6ee7b7;

  --rc-warn-bg: #fff7ed;
  --rc-warn-fg: #9a3412;
  --rc-warn-border: #fdba74;

  --rc-ko-bg: #fef2f2;
  --rc-ko-fg: #b42318;
  --rc-ko-border: #fecdca;

  --rc-thumb: 90px;
}


/* ==========================================================================
   2. GALERIA — GEOMETRIA CONSOLIDADA
   Consumidor: RC FIX-90/91/92/94/95 de assets/js/rc-custom.js (lote 1).
   El JS construye <div class="rc-gallery"> con:
       .rc-gallery__main > .rc-gallery__main-img + .rc-gallery__lupa
                                                 + .rc-zoom-overlay
       .rc-gallery__thumbs > button.rc-gallery__thumb[.is-active] > img
   Valores = resultado final de la cascada FIX-90 -> FIX-95 (medido).
   CAMBIO DELIBERADO respecto al estado actual: el borde/foco de la
   miniatura activa pasa de #0d6efd (azul Bootstrap, ajeno a la marca) a
   var(--rc-navy). Es el unico cambio cromatico de esta seccion.
   ========================================================================== */

.rc-gallery {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  background: transparent;
}

/* --- Caja de la imagen grande --- */
.rc-gallery__main {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 0;
  background: var(--rc-ficha-surface, #fff);
  border: 1px solid var(--rc-ficha-border, #e9ecef);
  border-radius: var(--rc-ficha-radius, 10px);
  cursor: zoom-in;
  /* FIX-95 mueve el zoom por background-position dentro de .rc-zoom-overlay;
     el gesto tactil necesita que el navegador no capture el arrastre. */
  touch-action: none;
}

.rc-gallery__main-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 0;
  object-fit: contain;
  background: #fff;
  border-radius: 0;
  /* Sin transform ni transition: FIX-95 sustituyo el zoom por scale
     (que daba tirones) por la capa .rc-zoom-overlay. */
  transform: none;
  transition: none;
}

/* --- Lupa ---
   ROTURA Nº 15 CORREGIDA: 40x40 (36x36 en movil) -> 44x44 en todos los
   tamanos. 44px es el minimo de objetivo tactil de WCAG 2.5.5 y coincide
   con --rc-h, la altura del resto de controles de la ficha. */
.rc-gallery__lupa {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--rc-h, 44px);
  height: var(--rc-h, 44px);
  padding: 0;
  color: #fff;
  background: rgba(15, 23, 42, 0.78);
  border: none;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  cursor: zoom-in;
  transition: background 0.15s ease, transform 0.1s ease;
}

.rc-gallery__lupa:hover {
  background: rgba(15, 23, 42, 0.92);
  transform: scale(1.06);
}

.rc-gallery__lupa:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.rc-gallery__lupa svg {
  width: 20px;
  height: 20px;
  color: #fff;
  stroke: #fff;
  fill: none;
}

/* --- Capa de zoom (FIX-95) --- */
.rc-zoom-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.rc-zoom-overlay.is-active {
  opacity: 1;
}

/* --- Tira de miniaturas (movil: fila con scroll) --- */
.rc-gallery__thumbs {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  justify-content: flex-start;
  padding: 6px 0 10px;
  overflow-x: auto;
  overflow-y: hidden;
  max-height: none;
  background: transparent;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #ced4da transparent;
}

.rc-gallery__thumbs::-webkit-scrollbar {
  height: 4px;
}

.rc-gallery__thumbs::-webkit-scrollbar-thumb {
  background: #ced4da;
  border-radius: 2px;
}

.rc-gallery__thumb {
  flex: 0 0 var(--rc-thumb, 90px);
  width: var(--rc-thumb, 90px);
  height: var(--rc-thumb, 90px);
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 2px solid #e0e0e0;
  border-radius: var(--rc-ficha-radius, 10px);
  outline: none;
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.rc-gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  background: transparent;
  border-radius: 8px;
}

.rc-gallery__thumb:hover {
  border-color: var(--rc-navy, #1a2b4a);
  transform: translateY(-1px);
}

.rc-gallery__thumb:focus-visible {
  border-color: var(--rc-navy, #1a2b4a);
  box-shadow: 0 0 0 3px rgba(26, 43, 74, 0.25);
}

.rc-gallery__thumb.is-active {
  border-width: 3px;
  border-color: var(--rc-navy, #1a2b4a);
  box-shadow: 0 0 0 2px rgba(26, 43, 74, 0.2);
}

/* Movil estrecho: miniaturas 80px (valor actual medido) */
@media (max-width: 575.98px) {
  .rc-ficha { --rc-thumb: 80px; }

  .rc-gallery__main {
    max-height: 380px;
  }
  .rc-gallery__main-img {
    max-height: 380px;
    object-fit: contain;
  }
}

/* Tablet/escritorio: miniaturas en columna a la izquierda (patron FIX-93) */
@media (min-width: 768px) {
  .rc-ficha { --rc-thumb: 130px; }

  .rc-gallery {
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
    max-width: 620px;
  }
  .rc-gallery__thumbs {
    order: 0;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 10px;
    padding: 4px;
    max-height: 600px;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
  }
  .rc-gallery__main {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
  }
}

@media (max-width: 991.98px) {
  .rc-gallery {
    max-width: 100%;
  }
}


/* ==========================================================================
   3. LIGHTBOX (RC FIX-91)
   Nodo creado por JS en <body>: .rc-lightbox > .rc-lightbox__inner >
   .rc-lightbox__img, mas .rc-lightbox__close/__prev/__next/__counter.
   Valores identicos a los actuales salvo el alto: 100vh -> 100dvh con
   respaldo, porque en iOS 100vh incluye la barra de navegacion y recorta
   las flechas.
   ========================================================================== */

.rc-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.92);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.rc-lightbox.is-open {
  display: flex;
  opacity: 1;
}

.rc-lightbox__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 92vw;
  max-height: 86vh;
  margin: 0;
  padding: 0;
}

.rc-lightbox__img {
  box-sizing: border-box;
  width: auto;
  height: auto;
  max-width: 92vw;
  max-height: 86vh;
  padding: 10px;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.rc-lightbox__btn {
  position: absolute;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--rc-h, 44px);
  height: var(--rc-h, 44px);
  padding: 0;
  color: #0f172a;
  font-family: inherit;
  font-size: 26px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.rc-lightbox__btn:hover {
  background: #fff;
  transform: scale(1.06);
}

.rc-lightbox__close {
  top: 14px;
  right: 14px;
  font-size: 30px;
}

.rc-lightbox__prev,
.rc-lightbox__next {
  top: 50%;
  font-size: 34px;
  transform: translateY(-50%);
}

.rc-lightbox__prev { left: 8px; }
.rc-lightbox__next { right: 8px; }

.rc-lightbox__prev:hover,
.rc-lightbox__next:hover {
  transform: translateY(-50%) scale(1.06);
}

.rc-lightbox__counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  padding: 6px 14px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 999px;
  pointer-events: none;
  transform: translateX(-50%);
}

@media (min-width: 576px) {
  .rc-lightbox__btn { width: 48px; height: 48px; }
  .rc-lightbox__close { top: 20px; right: 20px; font-size: 32px; }
  .rc-lightbox__prev { left: 20px; font-size: 36px; }
  .rc-lightbox__next { right: 20px; font-size: 36px; }
}


/* ==========================================================================
   4. COLUMNAS DE LA FICHA
   ========================================================================== */

.rc-ficha .col-product-image,
.rc-ficha .col-product-info {
  min-width: 0;
}

@media (min-width: 768px) {
  .rc-ficha .col-product-info {
    padding-left: 24px;
  }
}


/* ==========================================================================
   5. BLOQUE DE COMPRA .rc-buy
   Mismo lenguaje que la tarjeta de listado (lote 3 / 10-cards.css):
   fila de etiquetas, titulo, precio, stock, cantidad y CTA oscuro con el
   precio DENTRO, compartir separado.
   ========================================================================== */

.rc-buy {
  display: flex;
  flex-direction: column;
  gap: var(--rc-ficha-gap, 12px);
}

/* --- 5.1 Fila de etiquetas: estado + marca + categoria + referencia --- */
.rc-buy__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 1.2;
}

.rc-buy__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  color: var(--rc-ficha-muted, #6c757d);
  background: var(--rc-ficha-surface-2, #f8f9fa);
  border: 1px solid var(--rc-ficha-border, #e9ecef);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}

a.rc-buy__tag:hover {
  color: var(--rc-navy, #1a2b4a);
  border-color: var(--rc-navy, #1a2b4a);
  text-decoration: none;
}

.rc-buy__tag--ref {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Badge de estado. Verde = reacondicionado (el argumento comercial de la
   casa). Gris neutro = nuevo. */
.rc-buy__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
}

.rc-buy__badge--refurbished {
  color: var(--rc-ok-fg, #065f46);
  background: var(--rc-ok-bg, #d1fae5);
  border: 1px solid var(--rc-ok-border, #6ee7b7);
}

.rc-buy__badge--new {
  color: var(--rc-navy, #1a2b4a);
  background: #eef2f7;
  border: 1px solid #cdd7e4;
}

.rc-buy__badge--used {
  color: var(--rc-warn-fg, #9a3412);
  background: var(--rc-warn-bg, #fff7ed);
  border: 1px solid var(--rc-warn-border, #fdba74);
}

/* --- 5.2 Titulo ---
   ROTURA Nº 12 CORREGIDA. Medido hoy en la ficha 6056 (Chrome, viewport
   360x780): font-size 26px fijo, line-height 33.8px, alto del H1 174,96px
   = 5 lineas. Con este clamp: ~20,8px a 360px y 26px a partir de ~1024px,
   sin ningun salto. El maximo (26px) es exactamente el valor de hoy en
   escritorio, asi que el aspecto en escritorio no cambia. */
.rc-buy__title {
  margin: 0;
  color: #111827;
  font-size: clamp(1.25rem, 1.05rem + 1.1vw, 1.625rem);
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.rc-buy__title > span {
  display: inline;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* --- 5.3 Panel de compra (precio + stock + cantidad + CTA) --- */
.rc-buy__panel {
  display: flex;
  flex-direction: column;
  gap: var(--rc-ficha-gap, 12px);
  padding: 14px;
  background: var(--rc-ficha-surface, #fff);
  border: 1px solid var(--rc-ficha-border, #e9ecef);
  border-radius: var(--rc-ficha-radius, 10px);
}

/* Precio suelto (el que ya rendiza product-prices.tpl). Se mantiene visible
   ademas del precio dentro del CTA: son dos lecturas distintas, la de
   escaneo y la de accion. */
.rc-buy__panel .current-price-value,
.rc-buy__panel .product-price.current-price-value {
  color: var(--rc-price-color, #b02a18);
  font-size: clamp(1.375rem, 1.25rem + 0.7vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.rc-buy__panel .regular-price {
  color: var(--rc-ficha-muted, #6c757d);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: line-through;
}

.rc-buy__panel .tax-shipping-delivery-label {
  color: var(--rc-ficha-muted, #6c757d);
  font-size: 12px;
  line-height: 1.35;
}

/* --- 5.4 Disponibilidad ---
   Reutiliza el nodo #product-availability que ya emite product-prices.tpl
   y que PrestaShop refresca por AJAX. No se sustituye el nodo: se reestila. */
.rc-buy__panel #product-availability {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 6px;
}

.rc-buy__panel #product-availability.product-available,
.rc-buy__panel #product-availability.badge-success {
  color: var(--rc-ok-fg, #065f46);
  background: var(--rc-ok-bg, #d1fae5);
  border: 1px solid var(--rc-ok-border, #6ee7b7);
}

.rc-buy__panel #product-availability.product-last-items,
.rc-buy__panel #product-availability.badge-warning {
  color: var(--rc-warn-fg, #9a3412);
  background: var(--rc-warn-bg, #fff7ed);
  border: 1px solid var(--rc-warn-border, #fdba74);
}

.rc-buy__panel #product-availability.product-unavailable,
.rc-buy__panel #product-availability.badge-danger {
  color: var(--rc-ko-fg, #b42318);
  background: var(--rc-ko-bg, #fef2f2);
  border: 1px solid var(--rc-ko-border, #fecdca);
}

/* --- 5.5 Fila cantidad + CTA --- */
.rc-buy__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
}

/* La capa de BD (iqitthemeed_codes_js, bd-js:74-79) MUEVE
   .product_p_price_container dentro de #product .product-quantity como
   primer hijo. Esa capa es del lote 2 y aqui no se toca, asi que la fila
   se escribe para aguantar las dos colocaciones: si el contenedor de
   precio acaba dentro, ocupa una linea entera por encima de cantidad+CTA;
   si no, se queda donde lo pone la plantilla. En los dos casos el
   resultado visual es el mismo. */
.rc-buy__actions > .product_p_price_container {
  flex: 0 0 100%;
  order: -1;
  width: 100%;
  margin-bottom: 2px;
}

.rc-qty {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: stretch;
  height: var(--rc-h, 44px);
  overflow: hidden;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
}

.rc-qty__btn {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 100%;
  margin: 0;
  padding: 0;
  color: #111;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  background: var(--rc-ficha-surface-2, #f8f9fa);
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.15s ease;
}

.rc-qty__btn:hover { background: #e9ecef; }
.rc-qty__btn:active { background: #dee2e6; }
.rc-qty__btn:focus-visible { outline: 2px solid var(--rc-navy, #1a2b4a); outline-offset: -2px; }
.rc-qty__btn[disabled] { opacity: 0.45; cursor: default; }

/* Los botones -/+ nacen con el atributo [hidden] en la plantilla y solo se
   descubren cuando el manejador rc-qty de rc-custom.v2.js (lote 1) los
   activa. Asi el lote 4 puede desplegarse solo, sin botones muertos. */
.rc-qty__btn[hidden] { display: none; }

.rc-qty__input,
.rc-buy__actions input#quantity_wanted {
  box-sizing: border-box;
  width: 56px;
  min-width: 56px;
  max-width: 56px;
  height: 100%;
  padding: 0;
  color: #212529;
  font-size: 16px;   /* 16px evita el zoom automatico de iOS al enfocar */
  font-weight: 700;
  text-align: center;
  background: #fff;
  border: none;
  border-right: 1px solid #d0d5dd;
  border-left: 1px solid #d0d5dd;
  border-radius: 0;
  box-shadow: none;
  -moz-appearance: textfield;
  appearance: textfield;
}

.rc-buy__actions input[type="number"]::-webkit-inner-spin-button,
.rc-buy__actions input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

/* --- 5.6 CTA: icono + "Anadir" + separador + precio --- */
/* Movil: el CTA ocupa la fila entera bajo el selector de cantidad. Con el
   ancho completo (324 px medidos a 360 px de viewport) entra "ANADIR AL
   CARRITO" mas el precio sin recortar el texto ni inventar una traduccion
   corta. A partir de 576 px comparten linea. */
.rc-buy__cta,
.rc-buy__actions button.add-to-cart {
  display: inline-flex;
  flex: 1 1 100%;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  min-height: var(--rc-h, 44px);
  padding: 0 18px;
  color: var(--rc-cta-color, #fff);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-transform: uppercase;
  background-color: var(--rc-cta-bg, #1a2b4a);
  border: 1px solid var(--rc-cta-bg, #1a2b4a);
  border-radius: var(--rc-ficha-radius, 10px);
  cursor: pointer;
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.rc-buy__cta:hover,
.rc-buy__actions button.add-to-cart:hover {
  background-color: var(--rc-cta-bg-hover, #c82333);
  border-color: var(--rc-cta-bg-hover, #c82333);
  box-shadow: 0 6px 18px rgba(26, 43, 74, 0.22);
}

.rc-buy__cta:focus-visible {
  outline: 3px solid rgba(26, 43, 74, 0.45);
  outline-offset: 2px;
}

.rc-buy__cta[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.rc-buy__cta .bag-icon {
  flex: 0 0 auto;
  font-size: 16px;
}

/* Nombres rcp-label / rcp-price heredados de RC FIX-41 (rc-custom.js:1818).
   Se conservan a proposito: FIX-41 reconstruye el boton en cliente y
   reutiliza exactamente estas dos clases, asi el resultado es identico
   tanto si el JS corre como si no. */
.rc-buy__cta .rcp-label {
  padding: 0 2px;
  font-size: 14px;
  letter-spacing: 0.02em;
}

.rc-buy__cta .rcp-price {
  padding-left: 10px;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
}

.rc-buy__cta .spinner-icon { display: none; }
.rc-buy__cta.is-loading .spinner-icon { display: inline-block; }
.rc-buy__cta.is-loading .bag-icon { display: none; }

@media (min-width: 576px) {
  .rc-buy__cta,
  .rc-buy__actions button.add-to-cart {
    flex: 1 1 200px;
  }
}

.rc-buy__minimal {
  margin: 0;
  color: var(--rc-ficha-muted, #6c757d);
  font-size: 12px;
}

.rc-buy__minimal:empty { display: none; }

/* --- 5.7 Confianza (3 mensajes) ---
   Sustituye la .trust-bar-product que hasta ahora inyectaba el <script>
   inline de product.tpl (lineas 1062-1069). Mismo contenido, en el HTML. */
.rc-buy__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 0;
  padding: 12px 14px;
  list-style: none;
  background: var(--rc-ficha-surface-2, #f8f9fa);
  border: 1px solid var(--rc-ficha-border, #e9ecef);
  border-radius: 8px;
}

.rc-buy__trust li {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
  color: #333;
  font-size: 12.5px;
  font-weight: 500;
}

.rc-buy__trust svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--rc-success, #28a745);
}

/* --- 5.8 Compartir ---
   El modulo ps_sharebuttons YA emite .social-sharing dentro de
   .product-additional-info (medido: 3 enlaces). El <style> inline de
   product.tpl lo escondia con display:none. Al retirar ese bloque, vuelve
   a verse; aqui solo se le da forma de control compacto separado. */
.rc-ficha .product-additional-info .social-sharing {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Etiqueta "Compartir" puramente visual. Los enlaces del modulo ya llevan
   su propio title/aria, asi que este texto es decorativo y no aporta ni
   quita informacion al lector de pantalla. */
.rc-ficha .product-additional-info .social-sharing::before {
  content: "Compartir";
  color: var(--rc-ficha-muted, #6c757d);
  font-size: 12px;
}

.rc-ficha .social-sharing ul {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rc-ficha .social-sharing li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--rc-navy, #1a2b4a);
  background: #fff;
  border: 1px solid var(--rc-ficha-border, #e9ecef);
  border-radius: 50%;
  text-indent: 0;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.rc-ficha .social-sharing li a:hover {
  color: #fff;
  background: var(--rc-navy, #1a2b4a);
  border-color: var(--rc-navy, #1a2b4a);
}


/* ==========================================================================
   6. ACORDEONES Y CONTENIDO
   Absorbe lo VIVO del <style> inline (medido en la ficha 6056):
     .iqit-accordion .content.collapse   -> 3 nodos
     .custom-accordion-header            -> 2 nodos
   El <script> inline anadia .show a mano a los .collapse. Al retirarlo, la
   equivalencia se hace por CSS y el resultado visible es el mismo.
   NO se absorben (medido 0 nodos en ficha): .product-condition-badge,
   .products-section-title, .zoom-icon-v30.
   ========================================================================== */

#product .iqit-accordion .content.collapse {
  display: block;
  height: auto;
}

#product .custom-accordion {
  margin-bottom: 20px;
  background: none;
  border: none;
}

#product .custom-accordion.is-empty { display: none; }
#product .custom-accordion .custom-accordion-header { display: none; }
#product .custom-accordion .custom-accordion-body { display: block; padding: 0; }

/* Chips que aparecen dentro de descripciones de fichas de averias.
   0 nodos en la ficha muestreada, pero son clases de CONTENIDO editorial,
   no de plantilla: no se puede demostrar que esten muertas en las 4.261
   fichas, asi que se conservan. */
#product .error-chip {
  display: inline-block;
  margin: 0 8px 8px 0;
  padding: 6px 14px;
  color: var(--rc-ko-fg, #b42318);
  font-size: 13px;
  font-weight: 600;
  background: #fef3f2;
  border: 1px solid var(--rc-ko-border, #fecdca);
  border-radius: 20px;
}

#product .model-chip {
  display: inline-block;
  margin: 0 6px 6px 0;
  padding: 4px 12px;
  color: #1a56db;
  font-size: 12px;
  font-weight: 500;
  background: #f0f7ff;
  border: 1px solid #d4e5ff;
  border-radius: 16px;
}


/* ==========================================================================
   7. GALERIA NATIVA DE PRESTASHOP — RETIRADA DEL FLUJO
   La galeria Swiper original NO se borra del DOM: RC FIX-90 la necesita
   como fuente de datos (lee data-image-large-src en
   '#product-images-large .swiper-slide img' y data-image-medium-src en
   '#product-images-thumbs .swiper-slide img') y usa
   '.images-container.js-images-container' como ancla de montaje
   (origin.parentNode.insertBefore). Verificado en rc-custom.js:3704-3736
   y 3789-3793. Ambos datos son ATRIBUTOS: se leen igual con display:none.
   Se comprobo que las miniaturas llevan data-image-medium-src en el HTML
   servido, por lo que no dependen de que swiper-lazy llegue a ejecutarse.

   Diferencia con hoy: hoy el <script> inline forzaba
   style="display:flex !important" sobre ese contenedor (medido en vivo),
   lo que ganaba a la hoja y obligaba al navegador a MAQUETAR la galeria
   entera para luego mandarla a left:-99999px. Al retirar ese script,
   display:none pasa a ser efectivo y desaparece el trabajo de maquetacion
   duplicado.
   ========================================================================== */

body.rc-gallery-mounted .images-container.js-images-container {
  display: none;
}


/* ==========================================================================
   8. PUENTE  —  BORRAR ENTERA EN EL LOTE 5
   Unico sitio de este fichero con !important. 9 declaraciones. Existen solo
   porque assets/css/rc-responsive-final-1777022100.css sigue cargado y sus
   reglas llevan !important con especificidad alta. En cuanto el lote 5
   retire esa hoja, esta seccion sobra y las secciones 1-7 bastan.
   Cada bloque indica la regla concreta contra la que compite.
   ========================================================================== */

/* [1..2] Contra rc-responsive-final:
     body#product .product-actions .product_p_price_container,
     body#product .product-actions .product-prices.js-product-prices
       { display: none !important; }                      (0,1,3,1)
   Esa regla es la que hoy deja el PRECIO y el BADGE DE STOCK invisibles en
   la ficha (medido: .product-prices computa display:none, alto 0px, y con
   el #product-availability dentro). El <style> inline de product.tpl ya
   intentaba revertirlo con (0,1,2,2) y PERDIA por especificidad.
   Se replica la especificidad exacta (0,1,3,1); rc-ui.css carga despues,
   asi que gana por orden. */
body#product .product-actions .product_p_price_container {
  display: block !important;
}
body#product .product-actions .product-prices.js-product-prices {
  display: block !important;
}

/* [3..4] Contra rc-responsive-final:8445 + :8567 (media 575px)
     html body#product .rc-gallery__lupa { width:40px; height:40px }  (0,1,3,2)
     @media(max-width:575px) ... { width:36px; height:36px }          (0,1,3,2)
   Es la rotura nº 15. Sin esto la lupa se queda en 40/36px. */
html body#product .rc-gallery__lupa {
  width: var(--rc-h, 44px) !important;
  height: var(--rc-h, 44px) !important;
}

/* [5..6] Contra rc-responsive-final:8371 + :8710
     html body#product .rc-gallery__thumb.is-active
       { border-color:#0d6efd; box-shadow: 0 0 0 2px rgba(13,110,253,.2) }
   Cambio cromatico deliberado: azul Bootstrap -> navy de marca. */
html body#product .rc-gallery__thumb.is-active {
  border-color: var(--rc-navy, #1a2b4a) !important;
  box-shadow: 0 0 0 2px rgba(26, 43, 74, 0.2) !important;
}

/* [7] Contra rc-responsive-final:8367
     html body#product .rc-gallery__thumb:hover { border-color:#0d6efd } */
html body#product .rc-gallery__thumb:hover {
  border-color: var(--rc-navy, #1a2b4a) !important;
}

/* [8] Contra custom.css:47
     body#product h1.page-title, body#product h1.page-title span,
     body#product .page-title.h1 { font-size: 26px !important }  (0,1,1,2)
   Medido: 26px fijos -> 5 lineas de titulo a 360px (alto 174,96px).
   Se replica la especificidad y se sustituye por el clamp fluido. */
body#product h1.page-title.rc-buy__title,
body#product h1.page-title.rc-buy__title span {
  font-size: clamp(1.25rem, 1.05rem + 1.1vw, 1.625rem) !important;
}

/* [9] Contra rc-responsive-final (dos reglas, medidas en vivo):
     body#product .product-additional-info .social-sharing
       { display: none !important; }                        (0,1,2,1)
     body#product .product-additional-info > .social-sharing
       { display: none !important; }                        (0,1,2,1)
   (el <style> inline de product.tpl tenia una tercera copia, y desaparece
   con este lote). El modulo ps_sharebuttons YA emite el control -- 3
   enlaces medidos en la ficha 6056 -- y estaba apagado por CSS: era la
   pieza "compartir separado" que faltaba frente a Uniclima.
   Especificidad (0,1,2,2), gana por el elemento html extra. */
html body#product .product-additional-info .social-sharing {
  display: flex !important;
}

/* ========================================================================== */
/* fin de rc-ui/20-ficha.css                                                  */
/* ==========================================================================
   30-shell.css  —  ENVOLTORIO GLOBAL repuestoscalderas.com
   Lote 5. Topbar + cabecera + drawer + pie.
   Se concatena el ULTIMO en rc-ui.css (00-base + 10-cards + 20-ficha + 30-shell).

   CONTRATO DE CARGA (obligatorio, ver APLICAR.md):
     rc-tokens.css  ->  rc-responsive-final.v2.css  ->  rc-ui.css   (rc-ui SIEMPRE el ultimo <link>)
   Con ese orden esta hoja gana por cascada y NO necesita !important.

   TOKENS: usa los de rc-tokens.css (--rc-navy, --rc-red, --rc-gray-text,
   --rc-card-*). Todo lo que esta hoja anade va con prefijo --rc-shell-* para
   no colisionar con --rc-radius, que YA existe en la capa de BD.

   !important EN ESTA HOJA: 0 (cero) en todo el codigo nuevo.
   El unico bloque con !important es el §9 PORTADO LITERAL del sidecart,
   copiado byte a byte desde el <style> inline de _partials/header.tpl.
   Justificacion escrita: el sidecart esta declarado INTOCABLE; se cambia de
   ubicacion (inline -> hoja encolada) sin tocar una sola declaracion, para que
   el diff sea puramente de sitio y el riesgo visual sea nulo. Auditar esos
   !important es trabajo de un lote posterior, no de este.
   ========================================================================== */

/* ============================ §0  TOKENS DEL SHELL ======================== */
:root {
  /* altura unica de TODOS los controles de la cabecera */
  --rc-shell-h: 44px;

  --rc-shell-ink: var(--rc-navy);
  --rc-shell-ink-soft: #334155;
  --rc-shell-muted: var(--rc-gray-text);
  --rc-shell-line: #e6e8ec;
  --rc-shell-bg: #f4f5f7;
  --rc-shell-radius: 12px;
  --rc-shell-wa: #25d366;
  --rc-shell-wa-dark: #1ebe57;

  --rc-shell-maxw: 1480px;
  --rc-shell-gap: 10px;
}

/* ============================ §1  FONDO DE PAGINA ========================
   Sustituye al bloque "PAGE BACKGROUND" del <style> inline de header.tpl
   (30 lineas, 11 !important). Aqui: 0 !important porque rc-ui.css carga el
   ultimo y ninguna otra capa declara html{background} (medido: 0 coincidencias
   en theme.css, custom.css, rc-custom.css, rc-responsive-final y BD).
   Efecto: si el viewport es mas alto que el contenido, la franja de debajo del
   pie sale navy y no blanca.                                                */
html {
  background: var(--rc-navy);
  min-height: 100%;
}
body {
  background: transparent;
  overflow-x: hidden;
}
main#main-page-content,
#content-wrapper,
#wrapper,
#page {
  background: #fff;
}

/* ============================ §2  TOPBAR ================================
   Patron full/short conmutado SOLO por CSS: el texto largo y el corto van
   ambos en el HTML y la media query decide cual se ve. Cero JS.            */
.rc-topbar {
  background: var(--rc-navy-dark);
  color: #e2e8f0;
  font-size: 13px;
  line-height: 1.35;
  max-height: 44px;
  overflow: hidden;
  transition: max-height .3s ease;
}
.rc-header.scrolled .rc-topbar {
  max-height: 0;
}
.rc-topbar__inner {
  max-width: var(--rc-shell-maxw);
  margin: 0 auto;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rc-topbar__left,
.rc-topbar__right {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.rc-topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #e2e8f0;
  text-decoration: none;
  white-space: nowrap;
}
.rc-topbar__item:hover {
  color: #fff;
}
.rc-topbar__ico {
  flex: 0 0 auto;
  color: #fff;
}
.rc-topbar__strong {
  color: #fff;
  font-weight: 600;
}
.rc-topbar__wa .rc-topbar__ico {
  color: var(--rc-shell-wa);
}
/* conmutador de texto: por defecto (movil) manda el corto */
.rc-tb-full { display: none; }
.rc-tb-short { display: inline; }

/* los modulos de displayNav1/NavCenter/Nav2 (idioma, moneda, wishlist,
   comparador, enlaces inline) viven dentro del topbar: se conservan sus
   hooks y se les da tamano de topbar sin reescribir su marcado */
.rc-topbar__modules {
  display: none;          /* en movil van dentro del drawer, no en el topbar */
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
}
.rc-topbar__modules a {
  color: #cbd5e1;
  text-decoration: none;
}
.rc-topbar__modules a:hover {
  color: #fff;
}
.rc-topbar__modules ul {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ============================ §3  CABECERA (fila unica) ==================
   Una sola fila. Burger, buscador, acciones y login miden --rc-shell-h.
   El marcado sigue siendo el de PrestaShop: #desktop-header / #mobile-header
   se conservan porque theme.js intercambia el DOM entre #_desktop_* y
   #_mobile_* al cruzar los 991px (medido en theme.js: responsive.min_width=991).
   Romper esa pareja vaciaria el carrito y el megamenu movil.               */
.rc-header {
  background: #fff;
  box-shadow: 0 1px 0 var(--rc-shell-line);
}
.rc-header__row {
  max-width: var(--rc-shell-maxw);
  margin: 0 auto;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: var(--rc-shell-gap);
}

/* --- logo --- */
.rc-header .rc-logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}
.rc-header .rc-logo img {
  height: 34px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  display: block;
  transition: height .2s ease;
}
.rc-header.scrolled .rc-logo img {
  height: 30px;
}

/* --- burger (movil): dispara el drawer que consolido el lote 1 --- */
.rc-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex: 0 0 auto;
  height: var(--rc-shell-h);
  min-width: var(--rc-shell-h);
  padding: 0 12px;
  background: var(--rc-shell-bg);
  border: 1px solid var(--rc-shell-line);
  border-radius: var(--rc-shell-radius);
  color: var(--rc-shell-ink);
  cursor: pointer;
  font: inherit;
  text-decoration: none;
}
.rc-burger:hover {
  background: #eef0f3;
  border-color: #cbd5e1;
  color: var(--rc-shell-ink);
}
.rc-burger__box {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 20px;
  height: 15px;
}
.rc-burger__box span {
  display: block;
  height: 2.5px;
  width: 100%;
  border-radius: 2px;
  background: var(--rc-shell-ink);
  transition: width .15s;
}
/* franja de marca en la barra central */
.rc-burger__box span:nth-child(2) {
  background: var(--rc-red);
  width: 70%;
}
.rc-burger:hover .rc-burger__box span:nth-child(2) {
  width: 100%;
}
.rc-burger__label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
}

/* --- buscador: adaptador sobre el marcado REAL de iqitsearch ---
   Contrato medido y que NO se toca:
     #search_widget.search-widget[data-search-controller-url]
       > form[method=get][action=.../module/iqitsearch/searchiqit]
           > .input-group > input[name=s].form-search-control + button.search-btn
   El predictivo con stock/SKU del lote 1 se engancha a esos mismos nodos.   */
.rc-header__search {
  flex: 1 1 auto;
  min-width: 0;
}
.rc-header__search .search-widget,
.rc-header__search form {
  margin: 0;
  width: 100%;
}
.rc-header__search .input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: var(--rc-shell-h);
  background: #fff;
  border: 1.5px solid var(--rc-shell-line);
  border-radius: var(--rc-shell-radius);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.rc-header__search .input-group:focus-within {
  border-color: var(--rc-navy);
  box-shadow: 0 0 0 3px rgba(26, 43, 74, .12);
}
.rc-header__search .form-search-control {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 14px;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  color: var(--rc-shell-ink);
}
.rc-header__search .form-search-control::placeholder {
  color: var(--rc-shell-muted);
}
.rc-header__search .search-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  min-width: 52px;
  padding: 0 16px;
  border: 0;
  background: var(--rc-navy);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}
.rc-header__search .search-btn:hover {
  background: var(--rc-red);
}

/* --- acciones (cuenta + carrito) --- */
.rc-header__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* los modulos ps_customersignin y ps_shoppingcart montan su propio marcado
   dentro; solo se les da la caja de --rc-shell-h */
.rc-header__actions .rc-act,
.rc-header__actions .ps-shoppingcart > div > a,
.rc-header__actions .user-info > a,
.rc-header__actions .m-nav-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--rc-shell-h);
  min-width: var(--rc-shell-h);
  padding: 0 12px;
  border: 1px solid var(--rc-shell-line);
  border-radius: var(--rc-shell-radius);
  background: var(--rc-shell-bg);
  color: var(--rc-shell-ink);
  text-decoration: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
.rc-header__actions .rc-act:hover,
.rc-header__actions .ps-shoppingcart > div > a:hover,
.rc-header__actions .user-info > a:hover,
.rc-header__actions .m-nav-btn:hover {
  background: #eef0f3;
  border-color: #cbd5e1;
  color: var(--rc-shell-ink);
}
/* el badge de unidades lo refresca PrestaShop con el evento updateCart:
   solo se le da forma, nunca se le toca el contenido ni el id */
.rc-header__actions .cart-products-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--rc-red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
/* etiquetas de texto de los botones: ocultas en movil, visibles en escritorio */
.rc-act__label {
  display: none;
}

/* ============================ §4  DRAWER (menu movil) ====================
   SOLO presentacion. El comportamiento (abrir/cerrar, foco, overlay) quedo
   consolidado en rc-custom.v2.js del lote 1: aqui NO se duplica ni un
   listener. Los contenedores #_mobile_iqitmegamenu-mobile y
   #mobile_menu_click_overlay se conservan porque theme.js mueve dentro de
   ellos el contenido de #_desktop_iqitmegamenu-mobile al bajar de 991px.   */
#_mobile_iqitmegamenu-mobile.dropdown-menu {
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}
#_mobile_iqitmegamenu-mobile .cbp-mobilesubmenu a,
#_mobile_iqitmegamenu-mobile .iqitmegamenu-accordion > li > a {
  display: block;
  padding: 13px 16px;
  border-bottom: 1px solid var(--rc-shell-line);
  color: var(--rc-shell-ink);
  font-size: 15px;
  text-decoration: none;
}
#_mobile_iqitmegamenu-mobile .iqitmegamenu-accordion > li > a:hover {
  background: var(--rc-shell-bg);
  color: var(--rc-red);
}
#mobile_menu_click_overlay {
  background: rgba(15, 23, 42, .45);
}

/* ============================ §5  MEGAMENU: alineacion de SERVICIOS ======
   Sustituye al ultimo bloque del <style> inline de header.tpl (10 reglas,
   17 !important). El icono ::before de cada enlace tapaba el primer caracter.
   Aqui basta con reservar el hueco: 0 !important, especificidad 3 clases.   */
.cbp-hrsub .cbp-links li a,
.cbp-hrsub .cbp-menu-column-inner a {
  position: relative;
  display: block;
  padding-left: 44px;
  line-height: 1.4;
}
.cbp-hrsub .cbp-links li a:hover {
  padding-left: 48px;
}
.cbp-hrsub .cbp-links li a::before {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: auto;
  pointer-events: none;
}

/* ============================ §6  PIE ====================================
   Acordeon puro CSS: checkbox + label + hermano. Cero JS, cero :has(),
   cero libreria. Los <input> van visually-hidden pero enfocables, y el
   label es el disparador accesible.
   ALCANCE: se aplica a las columnas que escribe footer.tpl. Las columnas que
   generan los modulos (iqitcontactpage, iqitlinksmanager) siguen con el
   .js-block-toggle del propio tema, que ya funciona: convertirlas exigiria
   sobrescribir sus .tpl en themes/warehouse/modules/, que NO es fichero de
   este lote (ver APLICAR.md, apartado "Lo que queda fuera").              */
.rc-foot {
  background: var(--rc-navy);
  color: #cbd5e1;
  font-size: 14.5px;
  line-height: 1.6;
}
.rc-foot__inner {
  max-width: var(--rc-shell-maxw);
  margin: 0 auto;
  padding: 28px 14px 12px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
.rc-foot a {
  color: #cbd5e1;
  text-decoration: none;
}
.rc-foot a:hover {
  color: #fff;
  text-decoration: underline;
}
.rc-foot__col {
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.rc-foot__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 14px 2px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
}
.rc-foot__title::after {
  content: ;
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid #94a3b8;
  border-bottom: 2px solid #94a3b8;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
/* estado: el checkbox es el hermano anterior del label y del panel */
.rc-foot__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.rc-foot__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .28s ease;
}
.rc-foot__toggle:checked ~ .rc-foot__panel {
  max-height: 620px;
}
.rc-foot__toggle:checked ~ .rc-foot__title::after {
  transform: rotate(225deg) translate(-2px, -2px);
}
.rc-foot__toggle:focus-visible ~ .rc-foot__title {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.rc-foot__panel ul {
  margin: 0;
  padding: 0 0 14px;
  list-style: none;
}
.rc-foot__panel li + li {
  margin-top: 8px;
}
.rc-foot__nap {
  padding: 0 0 16px;
  margin: 0;
  font-style: normal;
}
.rc-foot__nap-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 9px;
}
.rc-foot__nap-ico {
  flex: 0 0 auto;
  margin-top: 3px;
  color: #94a3b8;
}
.rc-foot__wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--rc-shell-h);
  padding: 0 16px;
  border-radius: var(--rc-shell-radius);
  background: var(--rc-shell-wa);
  color: #0b2216;
  font-weight: 700;
  text-decoration: none;
}
.rc-foot__wa:hover {
  background: var(--rc-shell-wa-dark);
  color: #0b2216;
  text-decoration: none;
}
/* zona de los modulos del pie: se respeta su marcado, solo color y ritmo */
.rc-foot__modules .block-title,
.rc-foot__modules .block-title span {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.rc-foot__modules ul {
  padding-left: 0;
  list-style: none;
}
.rc-foot__legal {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 14px 0 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: #94a3b8;
}

/* ============================ §7  RESPONSIVE =============================
   Breakpoint unico 991.98px = el que ya usa el tema (medido: theme.css
   "@media (max-width:991.98px){#mobile-header{display:block}}" y theme.js
   "responsive.min_width = 991"). No se introduce ningun breakpoint nuevo
   en la cabecera para no desincronizar el intercambio _desktop_/_mobile_.  */

/* >= 576px: cabe el texto largo del topbar */
@media (min-width: 576px) {
  .rc-tb-full { display: inline; }
  .rc-tb-short { display: none; }
}

/* >= 768px: el burger recupera su etiqueta y los botones su texto */
@media (min-width: 768px) {
  .rc-burger__label { display: inline; }
  .rc-act__label { display: inline; }
  .rc-topbar__inner { padding: 8px 20px; }
  .rc-header__row { padding: 11px 20px; }
  .rc-foot__inner { padding: 34px 20px 12px; }
}

/* >= 992px: escritorio. Controles algo mas altos y pie en rejilla */
@media (min-width: 992px) {
  :root { --rc-shell-h: 48px; }
  .rc-header .rc-logo img { height: 40px; max-width: 230px; }
  .rc-header__row { gap: 14px; }
  .rc-header__search { max-width: 720px; }

  /* en escritorio el pie deja de ser acordeon: todo abierto en columnas */
  .rc-foot__inner {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 12px 32px;
    align-items: start;
  }
  .rc-foot__col { border-bottom: 0; }
  .rc-foot__title { cursor: default; padding: 4px 0 12px; }
  .rc-foot__title::after { display: none; }
  .rc-foot__panel { max-height: none; overflow: visible; }

  /* idioma, moneda, lista de deseos y comparador vuelven al topbar */
  .rc-topbar__modules { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .rc-topbar,
  .rc-foot__panel,
  .rc-foot__title::after,
  .rc-header .rc-logo img {
    transition: none;
  }
}

/* ==========================================================================
   §9  BLOQUE PORTADO LITERAL — SIDECART
   Origen: <style> inline de themes/warehouse/templates/_partials/header.tpl
   Copiado BYTE A BYTE. Ni una declaracion modificada, anadida ni borrada.
   Motivo: el sidecart y la barra de envio gratis estan declarados INTOCABLES.
   El unico cambio es de UBICACION (inline en el body -> hoja encolada), y por
   eso rc-ui.css DEBE ser el ultimo <link>: asi conserva exactamente la misma
   posicion relativa en la cascada que tenia siendo inline.
   Sus !important vienen del original y no se auditan en este lote.
   ========================================================================== */
/* === SIDECART SCROLL FIX + FAST SLIDE === */

/* SIDECART PANEL: always fixed, off-screen when not .show (no document-flow contribution) */
.ps-shoppingcart.side-cart #_desktop_blockcart-content {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    height: 100vh !important;
    width: 360px !important;
    max-width: 92vw !important;
    z-index: 99999 !important;
    margin: 0 !important;
}
.ps-shoppingcart.side-cart #_desktop_blockcart-content:not(.show) {
    overflow: hidden !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* Ensure blockcart-content stays hidden when dropdown has no .show */
.ps-shoppingcart.side-cart #_desktop_blockcart-content:not(.show) #blockcart-content {
    transform: translate3d(115%, 0, 0) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform .18s cubic-bezier(.4,0,.2,1), visibility 0s linear .18s !important;
}

/* When open (.show), ensure proper visibility */
.ps-shoppingcart.side-cart #_desktop_blockcart-content.show #blockcart-content {
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) !important;
    transition: transform .18s cubic-bezier(.4,0,.2,1) !important;
    will-change: transform !important;
}

/* --- TITLE BAR: PRODUCTOS izquierda, Vaciar centro-izq, X derecha --- */
#_desktop_blockcart-content .cart-title,
.blockcart-content .cart-title {
    display: flex !important;
    align-items: center !important;
    padding: 14px 16px !important;
    position: relative !important;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
    gap: 0 !important;
}
#_desktop_blockcart-content .cart-title .modal-title,
.blockcart-content .cart-title .modal-title {
    flex: 0 0 auto !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}
/* Vaciar btn: white on dark header */
#_desktop_blockcart-content .cart-title .sc-empty-btn,
.blockcart-content .cart-title .sc-empty-btn {
    order: 1 !important;
    margin-left: 14px !important;
    margin-right: auto !important;
    font-size: 12px !important;
    padding: 5px 12px !important;
    border-radius: 6px !important;
    background: rgba(255,255,255,0.14) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    transition: background 0.18s ease !important;
}
#_desktop_blockcart-content .cart-title .sc-empty-btn:hover,
.blockcart-content .cart-title .sc-empty-btn:hover {
    background: rgba(255,255,255,0.28) !important;
    color: #fff !important;
}
#_desktop_blockcart-content .cart-title .sc-empty-btn i,
.blockcart-content .cart-title .sc-empty-btn i {
    color: #fff !important;
}
/* Close X: big bold white */
#_desktop_blockcart-content .cart-title .close,
.blockcart-content .cart-title .close {
    order: 2 !important;
    position: absolute !important;
    top: 7px !important;
    right: 9px !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #fff !important;
    opacity: 1 !important;
    cursor: pointer !important;
    background: rgba(255,255,255,0.14) !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    padding: 0 !important;
    transition: background 0.2s, transform 0.2s !important;
    z-index: 100 !important;
    text-shadow: none !important;
}
#_desktop_blockcart-content .cart-title .close:hover,
.blockcart-content .cart-title .close:hover {
    background: rgba(255,255,255,0.28) !important;
    color: #fff !important;
    transform: scale(1.05) !important;
}
#_desktop_blockcart-content .cart-title .close span,
.blockcart-content .cart-title .close span {
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #fff !important;
    text-shadow: none !important;
}
/* Hide HR after title */
#_desktop_blockcart-content .cart-title ~ hr,
.blockcart-content .cart-title ~ hr {
    display: none !important;
}

/* --- SUBTOTALS: two-column alignment (light theme) --- */
#_desktop_blockcart-content .cart-subtotals,
.blockcart-content .cart-subtotals {
    padding: 10px 0 6px !important;
    margin: 0 !important;
    border-top: 1px solid #e5e7eb !important;
    background: #f9fafb !important;
}
#_desktop_blockcart-content .cart-subtotals .cart-summary-line,
.blockcart-content .cart-subtotals .cart-summary-line {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    padding: 6px 20px !important;
    margin: 0 !important;
}
#_desktop_blockcart-content .cart-subtotals .cart-summary-line .label,
.blockcart-content .cart-subtotals .cart-summary-line .label {
    text-align: left !important;
    flex: 1 !important;
    font-size: 14px !important;
    color: #4b5563 !important;
}
#_desktop_blockcart-content .cart-subtotals .cart-summary-line .value,
.blockcart-content .cart-subtotals .cart-summary-line .value {
    text-align: right !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    min-width: 60px !important;
    color: #111827 !important;
}
/* Hide empty divs in shipping line */
#_desktop_blockcart-content .cart-subtotals .cart-summary-line > div:empty,
.blockcart-content .cart-subtotals .cart-summary-line > div:empty {
    display: none !important;
}
#_desktop_blockcart-content .cart-subtotals .cart-summary-line > div small.value,
.blockcart-content .cart-subtotals .cart-summary-line > div small.value {
    display: none !important;
}

/* --- TOTAL: prominent, aligned (light theme) --- */
#_desktop_blockcart-content .cart-totals,
.blockcart-content .cart-totals {
    padding: 0 !important;
    margin: 0 !important;
    border-top: 2px solid #1D4ED8 !important;
    background: #fff !important;
}
#_desktop_blockcart-content .cart-totals .clearfix,
.blockcart-content .cart-totals .clearfix {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 14px 20px !important;
    margin: 0 !important;
}
#_desktop_blockcart-content .cart-totals .clearfix::after {
    display: none !important;
}
#_desktop_blockcart-content .cart-totals .label,
.blockcart-content .cart-totals .label {
    text-align: left !important;
    flex: 1 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: #1d1d1b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}
#_desktop_blockcart-content .cart-totals .value,
#_desktop_blockcart-content .cart-totals .value.float-right,
.blockcart-content .cart-totals .value,
.blockcart-content .cart-totals .value.float-right {
    float: none !important;
    text-align: right !important;
    font-weight: 800 !important;
    font-size: 24px !important;
    white-space: nowrap !important;
    min-width: 60px !important;
    color: #D8412D !important;
}

/* --- BUTTONS --- */
#_desktop_blockcart-content .cart-buttons,
.blockcart-content .cart-buttons {
    padding: 12px 20px 18px !important;
    background: #fff !important;
    border-top: 1px solid #f3f4f6 !important;
}
#_desktop_blockcart-content .cart-buttons .btn,
.blockcart-content .cart-buttons .btn {
    display: block !important;
    width: 100% !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    margin-bottom: 8px !important;
    transition: all .2s ease !important;
}
#_desktop_blockcart-content .cart-buttons .btn-primary,
.blockcart-content .cart-buttons .btn-primary {
    background: #1D4ED8 !important;
    border-color: #1D4ED8 !important;
    color: #fff !important;
}
#_desktop_blockcart-content .cart-buttons .btn-primary:hover,
.blockcart-content .cart-buttons .btn-primary:hover {
    background: #1E40AF !important;
    border-color: #1E40AF !important;
    box-shadow: 0 6px 16px rgba(29,78,216,.25) !important;
}
#_desktop_blockcart-content .cart-buttons .btn-secondary,
.blockcart-content .cart-buttons .btn-secondary {
    background: #fff !important;
    color: #1d1d1b !important;
    border: 1.5px solid #e5e7eb !important;
    margin-bottom: 0 !important;
}
#_desktop_blockcart-content .cart-buttons .btn-secondary:hover,
.blockcart-content .cart-buttons .btn-secondary:hover {
    background: #f9fafb !important;
    border-color: #d1d5db !important;
}

/* --- SIDECART LAYOUT: scrollable products, fixed totals/buttons --- */
#_desktop_blockcart-content #blockcart-content,
.blockcart-content #blockcart-content,
#_desktop_blockcart-content.show #blockcart-content {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
}
#_desktop_blockcart-content .cart-title,
.blockcart-content .cart-title {
    flex: 0 0 auto !important;
}
#_desktop_blockcart-content .sc-free-shipping-bar,
.blockcart-content .sc-free-shipping-bar {
    flex: 0 0 auto !important;
}
#_desktop_blockcart-content .cart-products,
.blockcart-content .cart-products {
    flex: 1 1 auto !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: #d1d5db transparent !important;
}
#_desktop_blockcart-content .cart-products::-webkit-scrollbar,
.blockcart-content .cart-products::-webkit-scrollbar {
    width: 6px !important;
}
#_desktop_blockcart-content .cart-products::-webkit-scrollbar-thumb,
.blockcart-content .cart-products::-webkit-scrollbar-thumb {
    background: #d1d5db !important;
    border-radius: 3px !important;
}
#_desktop_blockcart-content .cart-subtotals,
.blockcart-content .cart-subtotals,
#_desktop_blockcart-content .cart-totals,
.blockcart-content .cart-totals,
#_desktop_blockcart-content .cart-buttons,
.blockcart-content .cart-buttons {
    flex: 0 0 auto !important;
}

/* --- PRODUCT LINES: compact responsive --- */
#_desktop_blockcart-content .cart-products > li,
.blockcart-content .cart-products > li {
    padding: 8px 12px !important;
    border-bottom: 1px solid #f0f1f3 !important;
    background: #fff !important;
    list-style: none !important;
}
/* Product line row: image | info (name + controls) */
#_desktop_blockcart-content .cart-products > li > .row,
#_desktop_blockcart-content .cart-products > li .product-line-grid,
.blockcart-content .cart-products > li > .row,
.blockcart-content .cart-products > li .product-line-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
}
#_desktop_blockcart-content .cart-products > li > .row > *,
.blockcart-content .cart-products > li > .row > * {
    padding: 0 !important;
    margin: 0 !important;
}
/* Image column: smaller, no frame */
#_desktop_blockcart-content .cart-products > li > .row > .col-3,
#_desktop_blockcart-content .cart-products .col-imagen,
#_desktop_blockcart-content .cart-products .product-miniature-image,
#_desktop_blockcart-content .cart-products .col-img,
.blockcart-content .cart-products > li > .row > .col-3,
.blockcart-content .cart-products .col-imagen,
.blockcart-content .cart-products .product-miniature-image,
.blockcart-content .cart-products .col-img {
    flex: 0 0 48px !important;
    width: 48px !important;
    max-width: 48px !important;
    min-width: 48px !important;
    padding: 0 !important;
}
#_desktop_blockcart-content .cart-products .product-image,
.blockcart-content .cart-products .product-image {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
#_desktop_blockcart-content .cart-products .product-image a,
.blockcart-content .cart-products .product-image a {
    display: inline-block !important;
    width: 44px !important;
    height: 44px !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}
#_desktop_blockcart-content #blockcart-content .cart-products li img,
#_desktop_blockcart-content #blockcart-content .cart-products .product-image,
#_desktop_blockcart-content #blockcart-content .cart-products .product-image img,
.blockcart-content .cart-products li img,
.blockcart-content .cart-products .product-image,
.blockcart-content .cart-products .product-image img {
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    min-width: 44px !important;
    object-fit: contain !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
}
/* Info column: block layout (name above, controls below) */
#_desktop_blockcart-content .cart-products .col-info,
.blockcart-content .cart-products .col-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: block !important;
    padding: 0 !important;
}
/* Hide the theme's legacy qty row — we render our own .sc-qty-row */
#_desktop_blockcart-content .cart-products .col-info > .row,
.blockcart-content .cart-products .col-info > .row {
    display: none !important;
}
#_desktop_blockcart-content .cart-products .pb-1,
.blockcart-content .cart-products .pb-1 {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Product name: 2-line clamp, no ugly mid-word breaks */
#_desktop_blockcart-content .cart-products .product-name,
#_desktop_blockcart-content .cart-products .label a,
#_desktop_blockcart-content .cart-products .pb-1 a,
.blockcart-content .cart-products .product-name,
.blockcart-content .cart-products .label a,
.blockcart-content .cart-products .pb-1 a {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 12.5px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    color: #1d1d1b !important;
    max-height: 2.6em !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    margin-bottom: 4px !important;
}
/* sc-qty-row: compact controls */
#_desktop_blockcart-content .cart-products .sc-qty-row,
.blockcart-content .cart-products .sc-qty-row {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-top: 4px !important;
    flex-wrap: nowrap !important;
}
#_desktop_blockcart-content .cart-products .sc-qty-btn,
.blockcart-content .cart-products .sc-qty-btn {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e5e7eb !important;
    background: #fff !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1d1d1b !important;
    cursor: pointer !important;
    padding: 0 !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    transition: background .15s ease, border-color .15s ease !important;
}
#_desktop_blockcart-content .cart-products .sc-qty-btn:hover,
.blockcart-content .cart-products .sc-qty-btn:hover {
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
}
#_desktop_blockcart-content .cart-products .sc-qty-val,
.blockcart-content .cart-products .sc-qty-val {
    min-width: 18px !important;
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    color: #1d1d1b !important;
    flex-shrink: 0 !important;
}
#_desktop_blockcart-content .cart-products .sc-item-price,
.blockcart-content .cart-products .sc-item-price {
    margin-left: auto !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    color: #D8412D !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
/* Trash btn: small */
#_desktop_blockcart-content .cart-products .sc-trash-btn,
.blockcart-content .cart-products .sc-trash-btn {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #fecaca !important;
    background: #fff !important;
    border-radius: 6px !important;
    color: #dc2626 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin-left: 4px !important;
    flex-shrink: 0 !important;
    transition: background .15s ease, color .15s ease !important;
}
#_desktop_blockcart-content .cart-products .sc-trash-btn:hover,
.blockcart-content .cart-products .sc-trash-btn:hover {
    background: #dc2626 !important;
    color: #fff !important;
    border-color: #dc2626 !important;
}
#_desktop_blockcart-content .cart-products .sc-trash-btn i,
.blockcart-content .cart-products .sc-trash-btn i {
    font-size: 11px !important;
}
/* Hide the original remove-from-cart link since we use sc-trash-btn */
#_desktop_blockcart-content .cart-products .remove-from-cart:not(.sc-trash-btn),
.blockcart-content .cart-products .remove-from-cart:not(.sc-trash-btn) {
    display: none !important;
}
/* Hide any picture/thumb wrappers that create frame */
#_desktop_blockcart-content .cart-products picture,
.blockcart-content .cart-products picture {
    display: inline-block !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Mobile/narrow viewports */
@media (max-width: 480px) {
    #_desktop_blockcart-content.show,
    .side-cart #_desktop_blockcart-content.show {
        width: 100vw !important;
        max-width: 100vw !important;
    }
    #_desktop_blockcart-content.show #blockcart-content,
    .side-cart #_desktop_blockcart-content.show #blockcart-content {
        width: 100vw !important;
        max-width: 100vw !important;
    }
    #_desktop_blockcart-content .cart-products img,
    .blockcart-content .cart-products img {
        width: 40px !important;
        height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
    }
    #_desktop_blockcart-content .cart-products .col-imagen,
    .blockcart-content .cart-products .col-imagen {
        flex: 0 0 40px !important;
        width: 40px !important;
    }
}

/* --- FREE SHIPPING BAR --- */
#_desktop_blockcart-content .sc-free-shipping-bar,
.blockcart-content .sc-free-shipping-bar {
    padding: 8px 16px !important;
}

/* --- PANEL POSITION & SIZE (compact) --- */
#_desktop_blockcart-content.show,
.side-cart #_desktop_blockcart-content.show {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    height: 100vh !important;
    z-index: 99999 !important;
    width: 360px !important;
    max-width: 92vw !important;
}
#_desktop_blockcart-content.show #blockcart-content,
.side-cart #_desktop_blockcart-content.show #blockcart-content {
    width: 360px !important;
    max-width: 92vw !important;
}