/* BAURAN retail refinement 0.7.56
   Scoped finishing layer for the approved white storefront direction.
   Home and category only: no navigation behaviour or photography changes. */

:root {
  --bauran-retail-canvas: #fff;
  --bauran-retail-surface: #f3f5f6;
  --bauran-retail-divider: #dfe3e6;
}

/* Home: preserve the full-screen campaign, then reach the catalogue sooner. */
body#index .bauran-home-threshold__inner {
  min-height: 96px;
}

body#index .bauran-home-threshold h2 {
  font-size: clamp(1.05rem, 1.45vw, 1.35rem);
}

body#index .bauran-products {
  background: var(--bauran-retail-canvas);
  padding-block: clamp(4rem, 6vw, 6rem);
}

body#index .bauran-range-intro {
  margin-bottom: clamp(2.5rem, 4vw, 4rem) !important;
  min-height: 0;
  padding-block: 0 clamp(2.5rem, 4vw, 3.75rem);
}

body#index .bauran-range-intro h2 {
  font-size: clamp(2.75rem, 5.25vw, 5.6rem);
  line-height: .9;
  max-width: 10ch;
}

body#index .bauran-products .products.product-list-grid > :nth-child(even) {
  margin-top: 0;
}

body#index .bauran-products .bauran-product-card.product-miniature,
body#index .bauran-products .bauran-product-card__body {
  background: var(--bauran-retail-canvas);
}

body#index .bauran-product-grid__more {
  margin-top: clamp(2.5rem, 4vw, 4rem);
}

body#index .bauran-criteria {
  background: #eef1f3;
  padding-block: clamp(3.5rem, 5vw, 5rem);
}

body#index .bauran-criteria__grid {
  background: var(--bauran-retail-canvas);
}

body#index .bauran-criteria__intro {
  min-height: clamp(470px, 37vw, 560px);
  padding: clamp(2.75rem, 4.5vw, 4.5rem);
}

body#index .bauran-criteria__intro h2 {
  font-size: clamp(2.8rem, 4.4vw, 4.9rem);
}

body#index .bauran-criteria__list {
  background: var(--bauran-retail-canvas);
  padding: clamp(2.25rem, 4vw, 4rem);
}

body#index .bauran-criteria__list li {
  min-height: 145px;
}

body#index .bauran-guides {
  padding-block: clamp(4.5rem, 6vw, 6rem);
}

body#index .bauran-guides__heading {
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

body#index .bauran-guides h2 {
  font-size: clamp(2.75rem, 5vw, 5.4rem);
}

body#index .bauran-guides .bauran-guide-card a,
body#index .bauran-guides .bauran-guide-card:first-child a {
  min-height: clamp(280px, 24vw, 360px);
  padding: clamp(1.75rem, 3vw, 3rem);
}

body#index .bauran-guides .bauran-guide-card a::before {
  left: clamp(1.75rem, 3vw, 3rem);
  top: clamp(1.75rem, 3vw, 3rem);
}

body#index .bauran-guides .bauran-guide-card__meta {
  margin-top: clamp(3.25rem, 5vw, 4.5rem);
}

body#index .bauran-home-faq {
  background: var(--bauran-retail-canvas);
  padding-block: clamp(4.5rem, 7vw, 7rem);
}

body#index .bauran-home-faq h2 {
  font-size: clamp(2.75rem, 4.8vw, 5.2rem);
}

body#index .bauran-final-cta {
  padding-block: clamp(4rem, 6vw, 6rem);
}

body#index .bauran-final-cta__range a {
  min-height: 118px;
  padding: 1.25rem;
}

/* Category: three actual families and product cards sized for comparison. */
body#category .bauran-category-hero__retail-grid {
  grid-template-columns: 88px minmax(0, 1fr) minmax(230px, .3fr);
  min-height: 188px;
}

body#category .bauran-category-hero__chapter,
body#category .bauran-category-hero__summary,
body#category .bauran-category-hero--retail .bauran-category-hero__copy {
  padding: 1.25rem;
}

body#category #main .bauran-category-hero--retail h1 {
  font-size: clamp(2.4rem, 3.7vw, 4.1rem);
  margin-bottom: .55rem;
}

body#category .bauran-category-hero--retail .bauran-category-hero__description,
body#category .bauran-category-hero--retail .bauran-category-hero__description p {
  line-height: 1.5;
}

body#category .bauran-category-nav {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body#category .bauran-listing-selection {
  margin-block: 1.15rem .9rem;
}

body#category .bauran-listing-page #products .products.product-list-grid,
body#category #products .products.product-list-grid,
body#category #js-product-list .products.product-list-grid {
  gap: clamp(1rem, 2vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(280px, 460px));
  justify-content: center;
  max-width: 1180px;
}

body#category .bauran-product-card .thumbnail-top.bauran-product-card__media,
body#category .bauran-product-card__image-link {
  aspect-ratio: 4 / 3;
}

body#category .bauran-product-card .thumbnail-details.bauran-product-card__body {
  padding: 1.1rem 1.2rem 1.25rem;
}

body#category .bauran-product-card .product-title.bauran-product-card__title {
  font-size: clamp(1.2rem, 1.5vw, 1.55rem);
  margin-bottom: .9rem;
}

body#category .bauran-product-card__summary {
  margin-bottom: 1rem;
}

body#category .bauran-category-guide {
  margin-top: clamp(3rem, 5vw, 5rem);
}

body#category .bauran-category-guide__intro {
  padding-block: clamp(3.5rem, 5vw, 5rem);
}

body#category .bauran-category-guide__description h2 {
  font-size: clamp(2.6rem, 4.5vw, 4.9rem);
}

body#category .bauran-category-guide__checks {
  padding-block: clamp(2.5rem, 4vw, 4rem);
}

@media (max-width: 991.98px) {
  body#index .bauran-criteria__intro {
    min-height: 440px;
  }

  body#index .bauran-guides .bauran-guide-card a,
  body#index .bauran-guides .bauran-guide-card:first-child a,
  body#index .bauran-guides .bauran-guide-card:last-child a {
    min-height: 250px;
  }

  body#category .bauran-category-hero__retail-grid {
    grid-template-columns: 58px minmax(0, 1fr);
    min-height: 0;
  }

  body#category .bauran-listing-page #products .products.product-list-grid,
  body#category #products .products.product-list-grid,
  body#category #js-product-list .products.product-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }
}

@media (max-width: 767.98px) {
  body#index .bauran-home-threshold__inner {
    min-height: 88px;
  }

  body#index .bauran-products {
    padding-block: 3.25rem;
  }

  body#index .bauran-range-intro {
    margin-bottom: 2rem !important;
    padding-bottom: 2.25rem;
  }

  body#index .bauran-range-intro h2 {
    font-size: clamp(2.75rem, 13.5vw, 4.15rem);
  }

  body#index .bauran-criteria {
    padding-block: 1.5rem;
  }

  body#index .bauran-criteria__intro {
    min-height: 390px;
    padding: 2.5rem 1.5rem;
  }

  body#index .bauran-criteria__list li {
    min-height: 126px;
  }

  body#index .bauran-guides,
  body#index .bauran-home-faq,
  body#index .bauran-final-cta {
    padding-block: 4rem;
  }

  body#index .bauran-guides .bauran-guide-card a,
  body#index .bauran-guides .bauran-guide-card:first-child a,
  body#index .bauran-guides .bauran-guide-card:last-child a {
    min-height: 225px;
  }

  body#index .bauran-final-cta__range a,
  body#index .bauran-final-cta__range a:nth-child(odd),
  body#index .bauran-final-cta__range a:nth-child(-n+2) {
    min-height: 92px;
  }

  body#category .bauran-category-nav {
    display: grid;
    grid-template-columns: 1fr;
  }

  /* Dos columnas tambien en telefono.

     Estaba a una sola columna por debajo de 768 px. Medido a 390: cada
     tarjeta ocupaba 523 px de alto y las cuatro referencias sumaban 2.140 px
     de listado, mas de dos pantallas y media solo para ver la gama. En dos
     columnas se ve el doble de catalogo por pantalla, que es justo lo que se
     espera de una tienda en el movil.

     El hueco se aprieta a 0.75rem porque con dos columnas a 390 px cada
     tarjeta se queda en unos 165 px y el aire entre ellas pesa mas. */
  body#category .bauran-listing-page #products .products.product-list-grid,
  body#category #products .products.product-list-grid,
  body#category #js-product-list .products.product-list-grid,
  body#index .bauran-products .products.product-list-grid {
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* La tarjeta, adaptada a media anchura.

     Pasar la rejilla a dos columnas deja cada tarjeta en unos 166 px, y dos
     cosas que funcionaban a 343 dejan de hacerlo:

     - La fila comercial es una rejilla que pone el precio y el boton uno al
       lado del otro. En 126 px utiles, con 16 de hueco, el precio se quedaba
       en 18 px de ancho cuando necesita 91: ilegible. Se apilan.
     - El distintivo reservaba calc(100% - 72px) para dejar sitio a la derecha.
       A 166 px eso deja 92 y "Proximamente" necesita 131, asi que se salia de
       su caja. Se le devuelve el ancho. */
  .bauran-product-card .bauran-product-card__commercial {
    gap: 0.5rem;
    grid-template-columns: minmax(0, 1fr);
  }

  .bauran-product-card .product-flags {
    max-width: calc(100% - 2rem);
  }

  /* Con la tarjeta estrecha la foto se quedaba en 132 px de alto contra 287
     de texto: el producto, que es lo que se viene a ver, pesaba menos que su
     descripcion. Se le da proporcion cuadrada, como en la ficha. */
  .bauran-product-card .thumbnail-top img {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  body#category .bauran-product-card .thumbnail-top.bauran-product-card__media,
  body#category .bauran-product-card__image-link {
    aspect-ratio: 1 / 1;
  }

  body#category .bauran-category-guide {
    margin-top: 3rem;
  }

  body#category .bauran-category-guide__intro {
    padding-block: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body#index .bauran-products .bauran-product-card.product-miniature {
    transition: none;
  }
}

/* ==========================================================================
   Maquetacion movil de la home 0.7.57

   Medido a 390 x 844: la home ocupa 10.255 px, unas 12 pantallas. El reparto
   estaba dominado por decisiones de escritorio que no se reescalaron:
   titulares de display con `max-width: 10ch`, tarjetas de producto con
   fotografia en 4/5, y una banda entera para una indicacion de scroll.

   Este bloque vive aqui y no en bauran-0.6.0.css porque la base se carga
   antes que las capas retail y perderia la cascada. Es un remiendo de orden
   de carga, no una decision de arquitectura: lo correcto sigue siendo
   consolidar las capas en un unico fichero por componente.
   ========================================================================== */
@media (max-width: 991.98px) {

  /* --- Titulares de seccion ---------------------------------------------
     `max-width: 10ch` con tamano de display convierte una frase de nueve
     palabras en seis lineas. En un movil el ancho ya lo impone la pantalla:
     la restriccion de medida sobra y el tamano tiene que bajar. */
  body#index .bauran-range-intro h2,
  body#index .bauran-guides h2,
  body#index .bauran-criteria h2,
  body#index .bauran-home-faq h2,
  body#index .bauran-final-cta__heading h2 {
    font-size: clamp(1.75rem, 7.5vw, 2.3rem);
    line-height: 1.04;
    max-width: none;
  }

  /* El numeral fantasma "01" se cruzaba con el titular en pantalla estrecha
     y no aporta informacion. */
  body#index .bauran-range-intro::before {
    display: none;
  }

  /* --- Tarjetas de producto ---------------------------------------------
     La fotografia en 4/5 sobre una tarjeta de 350 px daba 437 px de imagen y
     tarjetas de ~660 px: una tarjeta por pantalla. En cuadrado se gana casi
     una pantalla completa a lo largo de las cuatro referencias. */
  body#index .bauran-products .bauran-product-card .thumbnail-top.bauran-product-card__media {
    aspect-ratio: 1 / 1;
  }

  /* --- Banda intermedia --------------------------------------------------
     Ocupaba una seccion entera para decir "sigue bajando". Se conserva la
     frase, que si orienta, y se retiran el indicador y la flecha. */
  body#index .bauran-home-threshold__inner {
    gap: .75rem;
    padding-block: 1.25rem;
  }

  body#index .bauran-home-threshold__chapter,
  body#index .bauran-home-threshold__arrow {
    display: none;
  }

  /* --- Tarjetas de guia --------------------------------------------------
     Tenian `min-height: 290px` fijado cuando su texto era invisible y solo
     se veia el titulo. Con la descripcion y el enlace visibles, la altura
     natural del contenido es suficiente. */
  body#index .bauran-guides .bauran-guide-card a,
  body#index .bauran-guides .bauran-guide-card:first-child a,
  body#index .bauran-guides .bauran-guide-card:last-child a {
    min-height: 0;
  }
}

@media (max-width: 991.98px) {
  /* La primera tarjeta de guia es la destacada en escritorio, con titular a
     30 px. Apiladas en una columna esa jerarquia no se lee como jerarquia,
     solo como una tarjeta desproporcionada. */
  body#index .bauran-guides .bauran-guide-card:first-child h3,
  body#index .bauran-guides .bauran-guide-card h3 {
    font-size: 1.15rem;
    line-height: 1.25;
  }

  body#index .bauran-guides .bauran-guides__heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }
}

/* =========================================================================
   Densidad en telefono — home y ficha
   =========================================================================

   El encargo era "se ve poca informacion por pantalla, hay que scrollear
   mucho". Medido en el banco de iframes a 390 px: home 9,1 pantallas y ficha
   7,5. Casi nada de eso era contenido: era aire heredado del diseno de
   escritorio, donde 64 px de respiro entre secciones se leen como calma y en
   un telefono de 844 px de alto se leen como pagina vacia.

   Todo lo de aqui reduce espacio, nunca informacion. Si algo hubiera que
   quitar, se discute aparte.
   ========================================================================= */

@media (max-width: 767.98px) {
  /* --- El heroe NO se toca, y conviene dejar escrito por que ------------
     `padding-bottom: 400px` en el .bauran-shell del heroe parece medio
     pantalla de vacio y no lo es: es el hueco reservado para la tira de
     cuatro fotos, que va en position:absolute anclada al fondo del heroe.

     Medido bajando el relleno: a 400 px el solape entre el texto y las
     fotos es 0; a 360 ya son 14 px y a 320 son 36, justo bajo el boton
     \"Ver las familias\". Por debajo de 320 el heroe ni siquiera encoge,
     tiene altura minima. No hay ningun valor que ahorre espacio sin montar
     el boton sobre las fotos.

     Acortar el heroe en telefono exige decidir si la tira de fotos sobra,
     que es una decision de diseno y no de densidad. Se deja como esta. */

  /* --- Respiro entre secciones -----------------------------------------
     64 px arriba y abajo por seccion son 128 px, un 15 % de pantalla cada
     una, repetido cuatro veces. A 28 px sigue habiendo separacion clara
     entre bloques sin que el dedo tenga que recorrer el hueco. */
  body#index .bauran-guides,
  body#index .bauran-home-faq,
  body#index .bauran-final-cta,
  body#product .bauran-product-story,
  body#product .bauran-product-support {
    padding-block: 1.75rem;
  }

  body#index .bauran-products {
    padding-block: 1.75rem;
  }

  /* --- Relleno anidado en el cierre -------------------------------------
     La seccion ponia 64 px y su contenido otros 64: 256 px de aire en un
     solo bloque. Un relleno dentro de otro no se suma a proposito, se suma
     porque nadie lo midio junto. */
  body#index .bauran-final-cta__content {
    padding-block: 1.5rem;
  }

  /* --- Los enlaces de gama del cierre, en dos columnas -------------------
     Cuatro enlaces de una linea apilados son 391 px; en dos columnas, 196.
     Funciona porque su altura no depende del ancho: es una linea de texto.

     Se probo lo mismo con las tarjetas de guia y con el soporte de la ficha
     y sale PEOR, asi que no se hizo: al estrechar a 169 px el texto envuelve
     mas y la tarjeta pasa de 350 a 569 px de alto. Dos columnas de 569
     ocupan mas que tres filas de 350 (1132 contra 1084) y encima el texto se
     lee en la mitad de ancho. Dos columnas solo compensa cuando la altura no
     depende del ancho: fotos de producto y enlaces de una linea. */
  body#index .bauran-final-cta__range {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* --- Criterios ---------------------------------------------------------
     Intro y lista traian 40 y 36 px de relleno propio ademas del de la
     seccion. */
  body#index .bauran-criteria__intro {
    padding-block: 1.25rem;
  }

  body#index .bauran-criteria__list {
    padding-block: 1.25rem;
  }

  /* --- Pie ---------------------------------------------------------------
     52 px arriba y abajo en un pie que ya va al final de todo. */
  .bauran-footer__inner {
    padding-block: 2rem;
  }

  /* --- Ficha: bloques de la historia del producto ------------------------
     Cada apartado llevaba 24 o 32 px propios encima del espacio entre
     bloques. Son tres apartados, dos notas y el aviso de montaje: el relleno
     solo sumaba mas que una pantalla entera. */
  body#product .bauran-product-story__installation,
  body#product .bauran-product-story__notes > article {
    padding-block: 1.25rem;
  }

  /* --- Ficha: el bloque de compra ---------------------------------------- */
  body#product .product-page-info {
    padding-bottom: 1.5rem;
    padding-top: 1.25rem;
  }

}

@media (max-width: 767.98px) {
  /* --- La tarjeta de producto: 347 px de texto para cuatro lineas --------
     Medida a 169 px de ancho: 40 px de relleno propio y 55 px de margenes
     entre cuatro elementos. Los margenes estaban pensados para la tarjeta
     ancha de escritorio, donde 32 px separan; en una columna de 169 px
     separan lo mismo que 12 y ocupan el triple.

     El `margin-top: -1.6rem` del resumen era un parche para compensar el
     margen de 2rem del titulo. Al bajar el titulo a .5rem el parche sobra,
     asi que se quita en vez de reajustarlo: dos numeros que se anulan son
     dos sitios donde equivocarse. */
  .bauran-product-card__body {
    padding-block: .75rem;
  }

  .bauran-product-card__meta {
    margin-bottom: .5rem;
  }

  .bauran-product-card .product-title,
  .bauran-product-card h3.product-title {
    margin-bottom: .5rem;
  }

  .bauran-product-card__summary {
    margin-bottom: .75rem;
    margin-top: 0;
  }

  .bauran-product-card__commercial {
    padding-top: .625rem;
  }

  /* --- Titulares de seccion ---------------------------------------------
     345 px para un titulo y una frase. El hueco inferior de 36 px se suma al
     relleno de la seccion que ya viene reducido arriba. */
  body#index .bauran-section-heading {
    padding-bottom: 1.25rem;
  }

  /* --- Intro de criterios y cabecera de preguntas ------------------------
     Son bloques de introduccion: orientan, pero no son el contenido. Con el
     relleno de escritorio se comen media pantalla antes de llegar a lo que
     el lector venia a leer. */
  body#index .bauran-criteria__intro {
    padding-block: .75rem;
  }

  body#index .bauran-home-faq > .bauran-shell > header {
    margin-bottom: .75rem;
  }
}

@media (max-width: 767.98px) {
  /* --- Tarjeta de guia: mas de la mitad era espaciado -------------------
     Medida: 350 px de alto para 188 px de contenido. El resto son 56 px de
     relleno propio, 88 de margenes del rotulo (52 arriba y 36 abajo para un
     texto de 14 px) y 32 de hueco antes del enlace.

     Esos 52 px de margen superior colocaban el rotulo respecto a una tarjeta
     de escritorio mucho mas alta. En telefono no colocan nada: separan el
     rotulo del borde que ya lo separa. */
  body#index .bauran-guide-card > a {
    padding-block: 1.125rem;
  }

  body#index .bauran-guide-card__meta {
    margin-bottom: .75rem;
    margin-top: 0;
  }

  body#index .bauran-guide-card h3 {
    margin-bottom: .625rem;
  }

  body#index .bauran-guide-card__link {
    padding-top: 1rem;
  }

  /* --- Criterios: 48 px de relleno para 119 de texto --------------------- */
  body#index .bauran-criteria__list > li {
    padding-block: .875rem;
  }
}

/* =========================================================================
   Tarjeta de producto en telefono — tres fallos vistos en produccion
   =========================================================================

   El banco daba cero defectos en la gama mientras en la tienda la linea de
   metadatos salia atropellada: "BAURAN /REF. SOPORTESNORAY- PARA COMPACT-
   CAÑAS 01". No era el CSS, eran los datos de la fixture, mas cortos que los
   reales. Corregidos los datos, el fallo se reproduce y se puede medir.
   ========================================================================= */

/* --- El distintivo arrastraba la vineta de la lista ---------------------
   .product-flags es un <ul> y heredaba `list-style: circle`. En un contenedor
   flex la vineta no desaparece sola: sale un circulo suelto flotando sobre
   cada foto. Se ve en cualquier ancho, asi que no va dentro de la media. */
.product-flags,
.product-flags > li {
  list-style: none;
}

@media (max-width: 767.98px) {
  /* --- La linea de metadatos no cabe, y no es cuestion de apretarla -----
     Medido en la tarjeta de 169 px, con 126 utiles:
       "BAURAN / Soportes para cañas"   necesita 242 px
       "Ref. NORAY-COMPACT-01"          necesita 172 px
     En dos columnas cada uno se queda en 72 px y se parte en cuatro
     pedazos. Apilados tampoco caben. Ni bajando la letra a 11 px y quitando
     todo el espaciado entra el ref: 130 px contra 126. Forzarlo seria
     encoger el texto por debajo de lo legible para que quepa un dato.

     Asi que la decision no es de mecanica sino de que pinta ahi. La FAMILIA
     ya la dicen la cabecera de la pagina y el menu de familias justo encima;
     en la home la dice el titular de la seccion. El REF si identifica y no
     repite del todo al titulo. Se queda el ref, se va la familia, y el
     espaciado baja de 1,44 a 0,6 px, que es refinamiento de escritorio.

     Medido: la caja pasa de 64 px a 16 (ref corto) o 32 (ref largo).

     El :not(:only-child) evita esconder el ref en una tarjeta que solo
     traiga un dato. */
  /* 24-09-2026, decision del promotor: "sale demasiada informacion, la
     referencia sobra". La referencia sale de la plantilla de la tarjeta (se
     queda en la ficha), y en el telefono la linea de metadatos entera se
     va: la familia ya la dicen la cabecera de la categoria y el titular de
     la seccion en la home. Escritorio la conserva. */
  .bauran-product-card__meta {
    display: none;
  }

  /* --- Tarjetas de la misma fila, a la misma altura ---------------------
     La rejilla trae `align-items: start`, asi que cada tarjeta se queda con
     su altura natural y la fila acaba en escalon: medido 480 contra 515 px
     en la misma fila. Con dos columnas en un telefono ese desnivel se ve
     entero de un vistazo.

     Se estira por altura en vez de tocar align-items porque la rejilla ya
     calcula bien la fila (514,6 px) y asi no se depende de que nadie
     reintroduzca el `start`. */
  .product-list-grid > .bauran-product-card-item,
  .product-list-grid > .bauran-product-card-item > .bauran-product-card,
  .product-list-grid .bauran-product-card__frame {
    height: 100%;
  }
}

/* =========================================================================
   Cabecera de categoria en telefono
   =========================================================================

   Esta pantalla no estaba en ninguna fixture, asi que nadie la habia medido
   nunca: el promotor mandaba capturas de algo que el banco no miraba. Ahora
   tiene fixture, copiada de la tienda con sus textos reales.
   ========================================================================= */

/* --- Las migas, por si acaso ------------------------------------------
   En el banco salia "1. INICIO  2. SOPORTES PARA CANAS". En la tienda NO:
   alli el <li> va en `display: inline` con un ::after de "/", y en linea no
   se dibuja marcador. Era cosa de la fixture, ya corregida.

   La regla se queda igualmente porque no cuesta nada y deja de depender de
   que el display siga siendo inline: si alguien lo cambia a bloque, la
   numeracion no reaparece. */
.breadcrumb ol,
.breadcrumb ol > li {
  list-style: none;
}

@media (max-width: 767.98px) {
  /* --- Una columna, y fuera el adorno editorial -------------------------
     El "01" con el "BAURAN" en vertical ocupa 58 px mas el hueco: un 21 % de
     una pantalla de 375 para un ornamento que no dice nada que no diga ya el
     titulo justo al lado. En escritorio se queda, que ahi si compone.

     Aviso para quien lo lea luego: al medir esto en el banco parecia ademas
     que la rejilla se salia 32 px de la pantalla. NO es cierto en la tienda.
     Lo provocaba el banco, que no carga la hoja del tema padre y por eso
     medía en content-box mientras la tienda va en border-box. Se corrigio en
     las fixtures. No hay desbordamiento que arreglar aqui. */
  body#category .bauran-category-hero__retail-grid {
    display: block;
  }

  body#category .bauran-category-hero__chapter {
    display: none;
  }

  /* --- La barra de la gama se apilaba pudiendo ir en una fila -----------
     "2 productos" necesita 124 px y el boton de ordenar 72: caben juntos en
     los 327 disponibles con sitio de sobra. Apilados costaban 102 px de alto
     para dos datos de una linea. */
  /* REGRESION que meti yo y cazo el banco en cuanto aprendio a cargar las
     cuatro hojas: sin flex-wrap, en un listado CON filtros las acciones son
     "Filtrar" + "Relevancia" = 316 px al lado de "N productos", no caben en
     350 y la pagina se salia 70 px por la derecha. En la categoria solo hay
     "Ordenar" (72 px) y por eso alli cabia.

     Con wrap: una fila cuando cabe, dos cuando no. Estuvo desplegado en la
     0.7.59; el banco no lo vio porque esa fixture no cargaba esta hoja. */
  .bauran-listing-toolbar {
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
  }

  .bauran-listing-toolbar__count {
    padding-block: .5rem;
  }

  .bauran-listing-toolbar__actions {
    flex: 0 0 auto;
  }
}

@media (max-width: 767.98px) {
  /* --- Las migas eran un objetivo de 33x13 px ---------------------------
     Medido por el banco en cuanto la categoria entro en el: el enlace
     "Inicio" daba 13 px de alto contra los 44 del minimo. No le vale la
     exencion de enlace en linea, porque no va dentro de un parrafo: es el
     camino de vuelta en la jerarquia, y se pulsa con el pulgar. */
  .breadcrumb ol > li > a {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
    padding-block: .25rem;
  }
}

@media (max-width: 767.98px) {
  /* --- Detalle de pedido: el nombre del producto recibia 16 px -----------
     Lo cazo el detector nuevo de filas apretadas en su primera ejecucion
     limpia: "Soporte BAURAN de prueba" necesita 213 px y tenia 16, una silaba
     por linea en 85 px de alto.

     Dos causas que se suman:

     1. En movil, todas las celdas de .bauran-customer-table son una rejilla
        de dos columnas pensada para ETIQUETA | VALOR, con la etiqueta en un
        ::before. La celda del producto trae DOS hijos -nombre y referencia-,
        asi que caen tres piezas en dos columnas: la etiqueta se queda la
        primera (95 px), el nombre la segunda (lo que sobra: 16 px) y la
        referencia baja a una segunda fila.
     2. `.bauran-order-products-table th:first-child { width: 42% }` pesa mas
        que el `width: 100%` de la regla movil y deja la celda en 127 px.

     Se apila: nombre y referencia uno bajo otro, a todo el ancho. Esa celda
     no es un par etiqueta-valor, es una ficha de producto. */
  .bauran-order-products-table tbody th {
    display: block;
  }

  .bauran-order-products-table th:first-child {
    width: 100%;
  }
}

/* =========================================================================
   Dos casos que encontro un subagente buscando FAMILIAS de fallos
   =========================================================================

   En vez de arreglar solo el caso visto, se le pidio a un subagente que
   buscara el resto de casos de cada familia de fallo del dia. Estos dos son
   los que dio por seguros; los demas quedan apuntados en PROGRESS.
   ========================================================================= */

/* --- Tarjetas de la misma fila a la misma altura, a TODOS los anchos -----
   El arreglo del 22-09 se quedo dentro de la media de telefono. Pero
   `align-items: start` esta en las dos rejillas de producto sin limite de
   ancho (bauran-0.6.0.css, home y categoria), asi que el escalon de 480
   contra 515 px se da igual en tablet y escritorio, con mas columnas por
   fila y por tanto mas visible. */
.product-list-grid > .bauran-product-card-item,
.product-list-grid > .bauran-product-card-item > .bauran-product-card,
.product-list-grid .bauran-product-card__frame {
  height: 100%;
}

/* --- La tira de miniaturas de la ficha, sin vineta ---------------------
   Gemelo literal de .product-flags: un <ul> hecho fila flex, con margin y
   padding a cero y sin list-style. Sus <li> son items flex y conservan
   display: list-item, asi que pueden dibujar marcador. Solo se veria en
   fichas con mas de una foto. Es un seguro de una linea: si el tema padre
   ya lo apaga, no cambia nada. */
body#product .bauran-product-gallery__rail .product-images,
body#product .bauran-product-gallery__rail .product-images > li {
  list-style: none;
}

@media (max-width: 767.98px) {
  /* --- "VER PRODUCTO" se partia en dos lineas en la home ----------------
     Salio en cuanto la fixture llevo el texto real de la tienda ("Ver
     producto" en vez de "Ver ficha"). En la home el cuerpo de la tarjeta
     mide 168 px, cuatro menos que en gama, y eso basta: el rotulo necesita
     107 px, tiene 106, y el boton pasa a dos lineas (27 px de alto en vez de
     16). Un boton de dos palabras partido en dos se lee como roto.

     1,08 px de espaciado en un rotulo de 12 px en mayusculas es
     refinamiento de escritorio; a 0,6 se recuperan unos 6 px y cabe en una
     linea. Mismo criterio que la linea de metadatos. */
  .bauran-product-card__cta {
    letter-spacing: .6px;
  }
}

/* === Lo que el tema padre impone y nosotros no deciamos (24-09-2026) =====
   Las fixtures no cargaban la hoja de Mizu y la tienda si: va primero, con
   {$smarty.block.parent}, y la nuestra encima. Donde nuestras reglas no
   declaran una propiedad, manda Mizu. Metida su hoja en el banco (copia
   byte a byte de la que sirve bauran.com) salieron estas fugas. Cada regla de
   este bloque es una guarda: si el padre no impusiera nada, no cambia nada; si
   impone, devuelve el diseno que se aprobo sobre las fixtures. */

/* Mizu, por debajo de 992 px: .product-heading {display:flex;
   justify-content:space-between}. Pensado para titulo + botones; nuestra
   plantilla mete ahi antetitulo, referencia y titulo, que salian en fila: el
   nombre del producto apretado en 142 px. */
/* 24-09-2026: la referencia se queda en la ficha pero sin linea propia
   (peticion del promotor): va en la misma linea que la familia, separada
   por un punto, y el nombre debajo a todo el ancho. Es flex con salto, no el
   flex en fila de Mizu: el h1 y los botones ocupan su propia linea. */
body#product .bauran-product-info .product-heading {
  align-items: baseline;
  column-gap: .5rem;
  display: flex;
  flex-wrap: wrap;
}

body#product .bauran-product-info .product-heading > h1,
body#product .bauran-product-info .product-heading > .product-action-buttons {
  flex: 0 0 100%;
}

body#product .bauran-product-info .product-heading > .bauran-product-reference::before {
  content: "\00B7";
  margin-right: .5rem;
}

/* Mizu pinta todos los <p> de #232323. El pie del checkout pone su color en el
   contenedor y el <p> del copyright no lo heredaba: gris casi negro sobre
   negro, contraste 1,25. */
.bauran-checkout-footer__inner p {
  color: inherit;
}

/* "#authentication .forgot-password a" (#7a7a7a) gana por especificidad a
   la nuestra: 3,9 de contraste sobre el gris claro del formulario. */
body#authentication .bauran-login-form .forgot-password a {
  color: var(--bauran-muted);
}

/* La ultima miga, la pagina actual, salia en el #7a7a7a de Mizu. */
body:not(#index) .breadcrumb li:last-child {
  color: var(--bauran-muted);
}

/* Pasos del checkout. Mizu hace flex los pasos que no estan en curso (la
   cabecera se encogia a su texto: 152 px de 302 en "Pago") y pone los titulos
   en mayusculas. Nuestro titulo lleva espaciado negativo, pensado para
   minusculas: en mayusculas se apelmaza. */
body#checkout .bauran-checkout-step {
  display: block;
}

body#checkout .bauran-checkout-step .step-title {
  text-transform: none;
}

@media (max-width: 767.98px) {
  /* #wrapper lleva 2rem de relleno de Mizu y aqui no lo anulaba nadie. En el
     checkout se sumaba al margen propio de la caja: 36 px por lado y pasos de
     301 px en un telefono de 375. */
  body#checkout #wrapper {
    padding-inline: 0;
  }

  /* En el area de cliente, peor: 32 px del padre mas el margen de
     .bauran-shell. Las tarjetas de pedido quedaban en 271 px con 52 de margen
     a cada lado, y la cabecera, que es una banda a sangre, flotaba separada
     de los bordes. */
  body:has(#content.bauran-customer) #wrapper {
    padding-inline: 0;
    padding-top: 0;
  }

  /* La miga de la categoria estaba a 0,6 rem: 9,6 px, por debajo del suelo
     de 12 px que sigue el resto del tema. */
  body#category .breadcrumb {
    font-size: .75rem;
  }
}

@media (max-width: 479.98px) {
  /* "Editar" bajaba a una segunda fila bajo el titulo del paso: 111 px de
     cabecera en cada paso completado. En la misma fila, a la derecha, como
     en cualquier checkout, la cabecera queda en 82. */
  .bauran-checkout-step__header {
    grid-template-columns: 30px minmax(0, 1fr) auto;
  }

  .bauran-checkout-step__edit {
    grid-column: 3;
    margin-left: 0;
  }
}

/* Linea de la cesta. La plantilla del padre (cart-detailed.tpl, que no
   sobrescribimos) la mete en li.cart-item, y Mizu declara
   ".cart-item .product-line-grid {display:flex}", que gana por especificidad
   a nuestro ".bauran-cart-line {display:grid}". Ademas encoge la foto a
   fit-content y hace flex el cuerpo. Resultado a 390 px: foto de 141, texto
   en 132 y cada linea de 449 px de alto. Se devuelve la rejilla con la
   columna de foto que ya estaba decidida (86 px en telefono). */
.cart-item .bauran-cart-line {
  display: grid;
}

/* Mizu da a la foto height:100%. Con nuestro aspect-ratio:1, el alto de toda
   la linea pasaba a ser el ancho de la foto: 430 px en una columna de 86. */
.cart-item .bauran-cart-line__media {
  height: auto;
  max-width: none;
  min-width: 0;
  width: auto;
}

/* Y al cuerpo le da display:flex y 1rem de margen izquierdo, que se sumaba
   al hueco de la rejilla: 16 px menos de texto. */
.cart-item .bauran-cart-line__body {
  display: block;
  margin-left: 0;
}

/* ".product-line-grid-body .cart-line-product-actions" de Mizu (flex en
   columna) gana a nuestra rejilla de cantidad / total / quitar. */
.cart-item .bauran-cart-line__actions {
  display: grid;
}

/* El resto de la cesta que Mizu decide porque nosotros callabamos:
   .cart-grid {padding: 0 15px} y .cart-item {border: 1px solid #232323;
   margin-bottom: 1rem}. Nuestro diseno separa las lineas con filetes finos
   arriba y abajo; con el padre, cada producto salia metido en una caja de
   marco casi negro, 30 px mas estrecha. Afecta tambien a escritorio. */
body#cart .bauran-cart .cart-grid {
  padding: 0;
}

body#cart .bauran-cart .cart-item {
  border: 0;
  border-top: 1px solid var(--bauran-line);
  margin-bottom: 0;
}

/* === Filetes invisibles en las superficies claras (24-09-2026) ============
   --bauran-line se define una sola vez, en :root, como blanco al 16 %: es de
   cuando el tema era oscuro. Desde el fondo blanco, cada borde que la usa
   sobre blanco o marfil no se ve. El banco conto 63: las cajas de los pasos
   del checkout, las opciones de envio, el borde del cuadro de notas, el
   selector de cantidad de la cesta, el resumen de la confirmacion, la
   navegacion lateral de las guias, las preguntas de la home y la barra de
   filtros. Nadie declara un borde para que no se vea.

   Solo se usa en bordes (85 declaraciones, todas border-*), asi que se
   redefine por superficie: gris al 14 % -el mismo que ya lleva la ficha- en
   lo claro, y se devuelve el blanco a los paneles oscuros que viven dentro de
   #wrapper. La cabecera, el menu y el pie van fuera de #wrapper y no cambian. */
body:not(#index) #wrapper,
body#index .bauran-home-faq {
  --bauran-line: rgba(13, 15, 18, 0.14);
}

.bauran-account-entry__intro,
.bauran-category-guide {
  --bauran-line: rgba(255, 255, 255, 0.16);
}

/* === Mas fugas de Mizu, de la auditoria sistematica ======================
   Cada pantalla del banco se midio con la hoja del padre y sin ella,
   elemento a elemento. Estas son las diferencias que tocan el aspecto y que
   vienen de una regla de Mizu sobre marcado que existe en las plantillas
   reales. Guardas, como las de arriba. */

/* Tarjetas: ".product-miniature .product-title a" fija 0,875 rem en el
   enlace, y el titulo de la tarjeta salia a 14 px en vez de 19 (listados) o
   22 (home). */
.bauran-product-card .product-title a {
  font-size: inherit;
  line-height: inherit;
  overflow: visible;
}

/* ".product-flags" apila las etiquetas en columna y las centra. */
.bauran-product-card .product-flags {
  flex-direction: row;
}

.bauran-product-card .product-flags li.product-flag {
  text-align: start;
}

/* ".featured-products" suma 48 px arriba y 48 abajo al bloque de la home. */
body#index .featured-products.bauran-product-grid {
  margin-block: 0;
}

/* Acceder: "#authentication .login-fields" (flex en columna) gana a nuestra
   rejilla de campos. */
body#authentication .login-fields {
  display: grid;
}

/* Checkout. "section.checkout-step .step-edit" pone "editar" en minusculas
   sobre nuestro rotulo en versales. ".cart-summary-line" pone el resumen en
   mayusculas y le suma 1 rem entre lineas; la tarjeta del resumen arrastra
   48 px de margen inferior y sus productos 16 y 32. */
body#checkout .bauran-checkout-step__edit {
  text-transform: uppercase;
}

body#checkout .bauran-order-summary .cart-summary-line,
body#cart .bauran-cart .cart-summary-line {
  margin-bottom: 0;
  text-transform: none;
}

body#checkout .cart-grid-right .card.bauran-order-summary {
  margin-bottom: 0;
}

body#checkout .cart-grid-right .card.bauran-order-summary .media,
body#checkout .cart-grid-right .card.bauran-order-summary .media:last-child {
  margin-bottom: 0;
}

/* Cesta: ".page-title" le da 32 px arriba y abajo al titulo; los atributos
   de cada linea salen en mayusculas con 16 px arriba y abajo y recortados
   (overflow:hidden); el precio unitario pasa a flex en columna; y
   ".bootstrap-touchspin" flota y dibuja un marco casi negro alrededor del
   selector de cantidad, cuyos botones ya tienen el suyo. */
body#cart .bauran-cart .page-title {
  padding-block: 0;
}

.cart-item .bauran-cart-line__attributes {
  overflow: visible;
  padding-block: 0;
  text-transform: none;
}

.cart-item .bauran-cart-line .current-price {
  display: block;
}

.cart-item .bauran-cart-line .bootstrap-touchspin {
  border: 0;
  float: none;
}

/* Guias y paginas legales: "p {line-height:1.5}" pisa el 1,82 de lectura
   de .bauran-prose, que el <p> heredaba. En un texto largo en el telefono es
   la diferencia entre leer comodo y leer apretado. */
.bauran-prose p,
.bauran-cms-aside p {
  line-height: inherit;
}

/* Area de cliente: "td, th" de Mizu pintan cada celda de blanco sobre el
   marfil de la pagina. */
.bauran-customer td,
.bauran-customer th {
  background-color: transparent;
}

/* Marcas: "#manufacturer .brand-grid" suma 48 px arriba y 16 a cada lado
   al margen propio: la rejilla quedaba en 287 px de 335. */
body#manufacturer .brand-grid,
body#supplier .brand-grid {
  margin: 0;
}

@media (max-width: 767.98px) {
  /* Los cuatro accesos del cierre de la home van en dos columnas con hueco
     entre ellos. Sus separadores eran blanco al 18 % sobre la tarjeta
     blanca: se veian como texto suelto. Cada acceso pasa a ser una loseta
     con el mismo filete que usa escritorio. */
  body#index .bauran-final-cta__range a,
  body#index .bauran-final-cta__range a:nth-child(odd),
  body#index .bauran-final-cta__range a:nth-child(-n+2),
  body#index .bauran-final-cta__range a:last-child {
    border: 1px solid var(--bauran-border);
  }
}

/* Mizu pone al pie un filete gris claro de 1 px encima del negro. */
#footer {
  border-top: 0;
}

/* Opciones de envio y de pago. No sobrescribimos shipping.tpl ni
   payment.tpl: el marcado es el de Mizu, con span.custom-radio flotante y
   16 px de margen a cada lado (18 + 32 = 50 px). Nuestra etiqueta medía
   calc(100% - 34px) contando con un radio nativo de 20: no cabia al lado y
   caia a la linea de abajo. Cada opcion quedaba con el radio solo en su fila
   y 116 px de alto. En dos columnas el texto va junto a su radio.

   El circulo de Mizu es #d0d0d0 sobre blanco: 1,5 de contraste, y un control
   necesita 3. Se oscurece; marcado, toma la tinta, como su punto. */
body#checkout .delivery-option,
body#checkout .payment-option {
  align-items: start;
  column-gap: .85rem;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
}

body#checkout .delivery-option .custom-radio,
body#checkout .payment-option .custom-radio {
  border-color: #80868c;
  float: none;
  grid-column: 1;
  margin: .2rem 0 0;
}

body#checkout .delivery-option:has(input:checked) .custom-radio,
body#checkout .payment-option:has(input:checked) .custom-radio {
  border-color: var(--bauran-ink);
}

body#checkout .delivery-option label,
body#checkout .payment-option label {
  grid-column: 2;
  min-width: 0;
  width: auto;
}

body#checkout .payment-option form {
  grid-column: 1 / -1;
}

/* Pago: "section.checkout-step .payment-options .payment-option" fija
   height:4rem; con nuestro relleno la etiqueta de 44 px no cabia y el texto,
   centrado en ella, quedaba 10 px por debajo del radio. Alto libre y radio
   centrado con su unica linea. El nombre del metodo salia a 12,5 px y el del
   transportista, en la opcion de envio, a 16: la misma pieza en el mismo
   paso, dos tamanos. Se igualan. */
body#checkout .payment-option {
  align-items: center;
  height: auto;
}

body#checkout .payment-option .custom-radio {
  margin-top: 0;
}

body#checkout .payment-option label > span,
body#checkout .delivery-option .carrier-name {
  font-size: 1rem;
}


@media (max-width: 767.98px) {
  /* Tarjeta compacta en el telefono (peticion del promotor). Queda: foto,
     nombre, resumen, precio y boton.
     - El "01" sobre la foto es un indice decorativo que al comprador no le
       dice nada.
     - El resumen, en una columna de 126 px, eran tres lineas de un texto de
       165 caracteres; se corta a dos. El texto entero sigue en la ficha.
     - 19 px de relleno lateral en una tarjeta de 166 se comen un cuarto del
       ancho: a 14 px el texto gana 10 px por linea. */
  .bauran-product-card__index {
    display: none;
  }

  .bauran-product-card__summary {
    -webkit-line-clamp: 2;
  }

  .bauran-product-card .thumbnail-details.bauran-product-card__body,
  body#category .bauran-product-card .thumbnail-details.bauran-product-card__body,
  body#index .bauran-products .bauran-product-card__body {
    padding-inline: .875rem;
  }
}

@media (max-width: 767.98px) {
  /* Ficha mas compacta en el telefono (24-09-2026). Nada de contenido se
     quita salvo un rotulo repetido:
     - "En pocas palabras" encima de "NORAY en pocas palabras" dice dos
       veces lo mismo; queda el titular.
     - Los tres enlaces de salto se partian en varias filas por su hueco de
       1,35 rem; con 1 rem caben en una.
     - Las tarjetas de ayuda median 220 px por un min-height de escritorio y
       48 px de aire bajo el numero. El numero pasa a la izquierda del
       titulo. */
  body#product .bauran-product-summary__label {
    display: none;
  }

  body#product .bauran-product-jump-links {
    gap: .25rem 1rem;
    margin-block: 1rem;
    padding-block: .25rem;
  }

  body#product .bauran-product-support__heading {
    margin-bottom: 1.25rem;
  }

  body#product .bauran-product-support__grid article {
    column-gap: .75rem;
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    min-height: 0;
    padding: 1.1rem 1rem;
  }

  body#product .bauran-product-support__grid article > span {
    grid-row: 1 / span 3;
    margin: .35rem 0 0;
  }

  body#product .bauran-product-support__grid article > :not(span) {
    grid-column: 2;
  }

  body#product .bauran-product-support__grid p {
    margin-bottom: .5rem;
  }
}

/* === Pulido de coherencia, revisado a ojo en capturas completas (28-09-2026)
   Capturas de pagina entera a 390 px con Chrome por CDP, no con el banco:
   estas cosas no son fallos medibles, son incoherencias. */

/* Resumen del checkout: "body#checkout #cart-summary-product-list img"
   (Mizu, width:6rem) gana a nuestra miniatura de 54 px; la foto medía 96 y
   tapaba el principio del nombre ("orte orientable…"). */
body#checkout #cart-summary-product-list .bauran-summary-product__media img {
  height: 100%;
  width: 100%;
}

/* Diseño plano: la web separa con filetes finos, pero una regla general
   ponía sombra a toda "tarjeta" (resumen del checkout, desplegable de la
   ficha, cesta…). Cajas flotando entre filetes: no concuerdan. */
body:not(#index) .card,
body:not(#index) .page-content,
body:not(#index) #content.page-content,
body:not(#index) .cart-grid-body,
body:not(#index) .cart-grid-right .card {
  box-shadow: none;
}

/* Etiquetas de producto en una linea: "EN / DESARROLLO" salia partida
   mientras "PRÓXIMAMENTE" cabía entera. */
.bauran-product-card .product-flag {
  white-space: nowrap;
}

/* Regla del acento: dorado vivo sobre oscuro, ocre sobre claro. Quedaban dos
   dorados sobre claro dibujados con ::before (el recuento de la paleta no
   miraba pseudoelementos): los numeros de las guias de la home y la barrita
   de los listados vacios. */
body#index .bauran-guides .bauran-guide-card a::before {
  color: var(--bauran-gold-ink);
}

.bauran-listing-empty::before,
.bauran-directory-empty::before,
.bauran-online-only::before {
  background: var(--bauran-gold-ink);
}

/* Boton principal. "Descubrir los productos" y "Continuar" del checkout son
   negros; "Continuar al pago" de la cesta, "Volver al inicio" del 404 y los
   de listados vacios eran dorados sobre blanco. En el mismo recorrido de
   compra, la cesta dorada y el checkout negro. Sobre claro, el principal es
   tinta; sobre las superficies oscuras sigue dorado. */
.bauran-button--gold,
.btn.btn-primary.bauran-button--gold {
  background: var(--bauran-ink);
  border-color: var(--bauran-ink);
  color: var(--bauran-white);
}

.bauran-button--gold:hover,
.bauran-button--gold:focus-visible,
.btn.btn-primary.bauran-button--gold:hover,
.btn.btn-primary.bauran-button--gold:focus-visible {
  background: #000;
  border-color: #000;
  color: var(--bauran-white);
}

.bauran-category-guide .bauran-button--gold,
.bauran-cms-hero .bauran-button--gold,
.bauran-account-entry__intro .bauran-button--gold,
.bauran-customer__hero .bauran-button--gold,
.bauran-order-confirmation__hero .bauran-button--gold {
  background: var(--bauran-gold);
  border-color: var(--bauran-gold);
  color: var(--bauran-carbon);
}

@media (max-width: 767.98px) {
  /* Titular de la home: 36 px y 9 caracteres de ancho (186 px en un hueco
     de 343) lo partian en cinco lineas con medio telefono vacio. Mas grande,
     a todo el ancho y equilibrado. */
  body#index .bauran-hero-campaign__copy h1 {
    font-size: 2.75rem;
    max-width: none;
    text-wrap: balance;
  }

  /* Ficha: "Descripción" (44 px) y "Te ayudamos a elegir…" (40 px) eran
     mas grandes que el nombre del producto. Los titulos de seccion bajan por
     debajo del h1. */
  body#product .bauran-product-story__heading h2,
  body#product .bauran-product-support h2 {
    font-size: 1.75rem;
    line-height: 1.12;
  }

  /* Los tres enlaces de salto, en una sola fila. */
  body#product .bauran-product-jump-links {
    column-gap: .8rem;
  }

  body#product .bauran-product-jump-links a {
    letter-spacing: .05em;
  }
}

/* Rayas de estado sobre claro: paso en curso del checkout, opcion de envio
   o pago elegida, y marcas de foco/activo de los menus y el buscador, que se
   despliegan sobre paneles claros. Eran dorado vivo: sobre blanco da 2,1 de
   contraste, por debajo del 3 que pide un indicador. Pasan al token, que es
   ocre aqui y dorado en las superficies oscuras. */
body#checkout .bauran-checkout-step.-current {
  box-shadow: inset 4px 0 0 var(--bauran-gold-ink);
}

body#checkout .address-item.selected,
body#checkout .delivery-option:has(input:checked),
body#checkout .payment-option:has(input:checked),
body#checkout .delivery-option.selected,
body#checkout .payment-option.selected {
  box-shadow: inset 3px 0 0 var(--bauran-gold-ink);
}

#header .bauran-catalog-menu__families > a:focus-visible,
#header .bauran-mobile-menu__catalog > summary:focus-visible,
.ui-autocomplete.searchbar-autocomplete .ui-state-active {
  box-shadow: inset 3px 0 0 var(--bauran-gold-ink);
}

/* === Home: un solo sistema de titulares y de texto ========================
   Medido a 1440 px: siete titulares de seccion con cinco tamanos (63-76
   px), dos pesos (500 y 700), cuatro espaciados (de -0,072 em a normal) y un
   ancho maximo distinto cada uno, que los partia en 3 a 6 lineas junto a
   huecos vacios. Con la letra del sistema, el espaciado de -0,07 em junta las
   letras hasta tocarse. Mismo estilo para todos: peso 700, -0,02 em,
   tamano fluido y equilibrado. */
body#index #wrapper .bauran-products h2,
body#index #wrapper .bauran-criteria h2,
body#index #wrapper .bauran-guides h2,
body#index #wrapper .bauran-home-faq h2,
body#index #wrapper .bauran-final-cta h2 {
  color: var(--bauran-ink);
  font-size: clamp(1.9rem, 3.4vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.06;
  max-width: 18ch;
  text-wrap: balance;
}

body#index #wrapper .bauran-hero-campaign__copy h1 {
  font-size: clamp(2.75rem, 4.6vw, 4.6rem);
  letter-spacing: -0.035em;
  max-width: none;
  text-wrap: balance;
}

/* Seis grises distintos en el texto corrido de la home, unos calidos
   (85,81,74 · 106,102,94) y otros frios (90,96,102): parrafos que parecian
   azulados junto a otros marrones. Uno solo, el del resto de la web. */
body#index #wrapper .bauran-hero-campaign__copy p:not(.bauran-eyebrow),
body#index #wrapper .bauran-products p:not(.bauran-eyebrow),
body#index #wrapper .featured-products .bauran-product-card__summary,
body#index #wrapper .bauran-criteria p:not(.bauran-eyebrow),
body#index #wrapper .bauran-guides p:not(.bauran-eyebrow),
body#index #wrapper .bauran-home-faq p:not(.bauran-eyebrow),
body#index #wrapper .bauran-final-cta p:not(.bauran-eyebrow) {
  color: var(--bauran-muted);
}

/* Rotulos pequenos: unos ocre y otros gris. Todos ocre. */
body#index #wrapper .bauran-criteria .bauran-eyebrow,
body#index #wrapper .bauran-home-faq .bauran-eyebrow,
body#index #wrapper .bauran-home-faq__label {
  color: var(--bauran-gold-ink);
}

/* "01—04" no cabia en su cajita de 38 x 38 y se partia en dos lineas. */
.bauran-home-threshold__chapter b {
  padding-inline: .45rem;
  white-space: nowrap;
  width: auto;
}

/* El "01" gigante de fondo en "Cuatro soluciones…" era decoracion; con el
   titular ya en tres lineas, el parrafo quedaba escrito encima de el. Se
   quita la decoracion, no el texto. */
body#index .bauran-range-intro::before {
  content: none;
}

/* El parrafo de entrada de la home rozaba el borde de las fotos. */
body#index #wrapper .bauran-hero-campaign__copy p:not(.bauran-eyebrow) {
  max-width: 30rem;
}

/* Plegar/desplegar del resumen: guion corto "-" junto a "+" parecia una
   errata. Signo menos de verdad. */
.bauran-summary-products__toggle::after {
  content: "\2212";
}

/* Ficha en escritorio: ".product-page-info {display:flex}" de Mizu hacia
   fila flexible el bloque de informacion y su contenido se encogia a su ancho
   minimo: 353 px de 706 posibles y 425 px vacios a la derecha. Las tres
   garantias quedaban en columnas de 120 px. */
body#product .product-page-info.bauran-product-info {
  display: block;
}

/* === Escala de titulares de toda la web (28-09-2026) =====================
   Medido en las 15 pantallas a 1440 px: 40 titulares con espaciados de -0,035
   a -0,065 em -afinados para Arial, con la letra del sistema las letras se
   juntan- y titulos de pagina entre 46 px (cesta) y 115 px (confirmacion).
   Un criterio:
     - espaciado -0,02 em en todos los titulares grandes;
     - en escritorio: titulo de pagina ~52 px, titulo de seccion interior
       ~40 px (la portada de la home y sus secciones tienen su propia escala).
   El prefijo body:not(#_) solo sube la especificidad por encima de las
   reglas de cada pagina, que llegan a un id y tres clases. */
body:not(#_) #wrapper :is(
  .bauran-home-threshold h2,
  .bauran-product-card__body .product-title,
  .bauran-product-info h1,
  .bauran-product-summary h2,
  .bauran-product-story__heading h2,
  .bauran-product-story__feature h3,
  .bauran-product-story__installation h3,
  .bauran-product-story__notes h3,
  .bauran-product-support__heading h2,
  .bauran-category-hero__copy h1,
  .bauran-category-guide__description h2,
  .bauran-cart__title h1,
  .bauran-checkout-intro h1,
  .bauran-order-summary__header h2,
  .bauran-shell h1,
  .bauran-shell h2,
  .bauran-section-heading h2,
  .bauran-customer__content h2,
  .bauran-address-card__body h2,
  .bauran-order-addresses h3,
  .bauran-order-confirmation__hero h1,
  .bauran-order-confirmation__summary h2,
  .bauran-order-confirmation__next h2,
  .bauran-account-entry__intro-inner h1,
  .bauran-account-entry__form-inner h2,
  .bauran-listing-empty h2
),
body:not(#_) #header .bauran-search-layer__header h2 {
  letter-spacing: -0.02em;
}

/* La portada de la home conserva algo mas de apretura: es un titular de
   exhibicion de 66 px. */
body:not(#_) #wrapper .bauran-hero-campaign__copy h1 {
  letter-spacing: -0.03em;
}

@media (min-width: 992px) {
  body:not(#_):not(#index) #wrapper :is(
    .bauran-shell h1,
    .bauran-checkout-intro h1,
    .bauran-cart__title h1,
    .bauran-category-hero__copy h1,
    .bauran-account-entry__intro-inner h1,
    .bauran-order-confirmation__hero h1
  ) {
    font-size: clamp(2.6rem, 3.6vw, 3.6rem);
    line-height: 1.04;
  }

  body:not(#_):not(#index) #wrapper :is(
    .bauran-product-story__heading h2,
    .bauran-product-support__heading h2,
    .bauran-category-guide__description h2,
    .bauran-section-heading h2,
    .bauran-customer__content h2,
    .bauran-order-confirmation__summary h2,
    .bauran-order-confirmation__next h2,
    .bauran-account-entry__form-inner h2,
    .bauran-listing-empty h2,
    .bauran-shell h2
  ) {
    font-size: clamp(2rem, 2.8vw, 2.75rem);
    line-height: 1.08;
  }
}

@media (min-width: 992px) {
  /* Ficha: la rejilla daba la parte estrecha a la galeria (0,82 / 1,18) y
     ".product-details {width:50%}" de Mizu partia la informacion por la
     mitad. Foto pequena y texto en 353 px con un hueco vacio al lado. Mas
     sitio para la foto y la informacion a su ancho, con linea de lectura
     comoda. */
  body#product .product-container {
    grid-template-columns: minmax(0, 1.1fr) minmax(480px, 0.9fr);
  }

  body#product .bauran-product-info .product-details {
    max-width: 34rem;
    width: auto;
  }
}

/* La columna de la galeria es gris de lado a lado (body#product
   .product-container > .page-content, background #f3f4f6), pero la regla
   general de "tarjetas" (body:not(#index) .page-content) la pintaba de blanco
   con borde: el panel gris de la foto quedaba flotando en medio del blanco.
   La foto sigue limitada a 480 px a proposito (fotografia provisional,
   subordinada a la informacion de compra). */
body#product .product-container > #content.page-content {
  background: #f3f4f6;
  border: 0;
}

@media (min-width: 992px) {
  /* Dos titulos de pagina se imponian con !important en la hoja 0.6.0
     (clamp hasta 7 y 7,2 rem): el detalle de pedido a 101 px y el acceso a
     la cuenta a 88. Solo un !important los devuelve a la escala comun. */
  body:not(#_) #wrapper .bauran-customer__hero h1,
  body:not(#_) #wrapper .bauran-account-entry__intro h1 {
    font-size: clamp(2.6rem, 3.6vw, 3.6rem) !important;
    line-height: 1.04;
  }
}

/* "DATOS DEL PEDIDO", "ESTADO DEL PEDIDO"…: los titulos de seccion del area
   de cliente iban en mayusculas; el resto de titulos de seccion de la web,
   en minuscula normal. */
body:not(#_) #wrapper .bauran-section-heading h2 {
  text-transform: none;
}

/* Con la columna gris entera, el borde derecho propio de la galeria (de
   cuando ocupaba toda la columna) quedaba como una linea suelta. */
body#product .bauran-product-gallery {
  border-right: 0;
}

/* === Paginas interiores, revisadas en captura a 1440 (29-09-2026) ======== */

/* "#manufacturer #wrapper {padding: 2rem .5rem}" (Mizu): la cabecera de
   marcas y proveedores quedaba 8 px separada de los bordes, ni a sangre ni
   alineada. Mismo criterio que categoria y buscador. */
body#manufacturer #wrapper,
body#supplier #wrapper,
body#new-products #wrapper,
body#prices-drop #wrapper,
body#best-sales #wrapper {
  padding-inline: 0;
}

/* Cabecera del area de cliente: min-height de 490 px con el texto acabando a
   la mitad; debajo, 170 px de negro vacio. Alto segun su contenido. */
@media (min-width: 992px) {
  .bauran-customer__hero-inner {
    min-height: 0;
    padding-block: clamp(3.5rem, 6vw, 5.5rem);
  }
}

/* La web es de esquinas rectas; el estado del pedido era la unica pildora
   redondeada. */
.bauran-order-card__status {
  border-radius: 0;
}

/* "VER PEDIDO→", "VOLVER A COMPRAR↻": la flecha iba pegada al texto. */
.bauran-order-card footer a {
  align-items: center;
  display: inline-flex;
  gap: .4em;
}

/* Indice de guias: titulos de 40 px en tarjetas de 330 px, cinco lineas cada
   uno. Tamano de tarjeta, no de seccion. */
.bauran-cms-card h2 {
  font-size: clamp(1.4rem, 1.8vw, 1.75rem);
  line-height: 1.15;
}

/* Listados vacios con dos acciones: las dos salian como boton principal
   negro. La segunda pasa a secundaria, como en la home. */
.bauran-listing-empty .bauran-button--dark,
.bauran-directory-empty .bauran-button--dark {
  background: transparent;
  border: 1px solid var(--bauran-ink);
  color: var(--bauran-ink);
}

.bauran-listing-empty .bauran-button--dark:hover,
.bauran-listing-empty .bauran-button--dark:focus-visible,
.bauran-directory-empty .bauran-button--dark:hover,
.bauran-directory-empty .bauran-button--dark:focus-visible {
  background: var(--bauran-ink);
  color: var(--bauran-white);
}

/* Las cabeceras de listados y directorios (marcas, proveedores,
   novedades…) son oscuras, pero no estaban en la lista de superficies
   oscuras del principio de la hoja: su rotulo salia en ocre sobre negro. */
.bauran-listing-hero,
.bauran-directory-hero {
  --bauran-gold-ink: var(--bauran-accent-on-dark);
}

/* La escala de titulos de seccion de escritorio (.bauran-shell h2) atrapaba
   tambien los titulos de las tarjetas del indice de guias: 40 px en tarjetas
   de 330, cinco lineas. Tamano de tarjeta. */
body:not(#_):not(#index) #wrapper .bauran-cms-card h2 {
  font-size: clamp(1.4rem, 1.8vw, 1.75rem);
  line-height: 1.15;
}

/* === Cabecera de categoria 0.7.76 ======================================
   Diseno trabajado en Claude Design; el promotor eligio la version 1 y se
   pasa a fondo blanco (el de la tienda) y esquinas rectas (las de la marca).
   Motivo: la anterior no tenia orden. El recuento salia dos veces (caja
   "2 productos en esta familia" y barra), el nombre de la familia tres, y
   mezclaba tres estilos de caja (tarjeta blanca flotante, franja negra a
   sangre y lista con bordes).

   Ahora, en orden de lectura: miga -> titulo y descripcion -> familias en
   una fila -> barra con recuento, filtrar y ordenar -> productos.

   El prefijo lleva #wrapper porque la escala de titulos de todo el sitio
   (body:not(#_):not(#index) #wrapper :is(...)) pesa (3,1,3) y esto tiene
   que ganarle sin !important. */
body#category:not(#_) #wrapper #js-product-list-header {
  background: #fff;
  border-bottom: 0;
  color: var(--bauran-ink);
}

body#category:not(#_) #wrapper #js-product-list-header .bauran-category-hero__retail-grid {
  display: block;
  min-height: 0;
  padding-block: 1.25rem 1.25rem;
}

body#category:not(#_) #wrapper #js-product-list-header .bauran-category-hero__copy {
  display: block;
  padding: 0;
}

body#category:not(#_) #wrapper #js-product-list-header .bauran-category-hero__copy h1 {
  color: var(--bauran-ink);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 .75rem;
  max-width: none;
  text-wrap: balance;
}

body#category:not(#_) #wrapper #js-product-list-header .bauran-category-hero__description {
  margin: 0;
  max-width: 38rem;
}

body#category:not(#_) #wrapper #js-product-list-header .bauran-category-hero__description p {
  color: var(--bauran-muted);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  text-wrap: pretty;
}

/* Familias en movil: fila deslizable de botones. La activa en tinta con su
   numero en dorado (dorado solo sobre oscuro); las demas con filete. */
body#category:not(#_) #wrapper #js-product-list-header .bauran-category-nav {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding-bottom: 1.25rem;
  padding-inline: clamp(1.25rem, 4vw, 4.5rem);
  scroll-padding-inline: clamp(1.25rem, 4vw, 4.5rem);
  scrollbar-width: none;
}

body#category:not(#_) #wrapper #js-product-list-header .bauran-category-nav::-webkit-scrollbar {
  display: none;
}

body#category:not(#_) #wrapper #js-product-list-header .bauran-category-nav a {
  align-items: center;
  background: #fff;
  border: 1px solid var(--bauran-line);
  border-radius: 0;
  color: var(--bauran-ink);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: .875rem;
  font-weight: 600;
  gap: .5rem;
  letter-spacing: 0;
  min-height: 44px;
  padding: 0 1rem;
  text-transform: none;
  white-space: nowrap;
}

body#category:not(#_) #wrapper #js-product-list-header .bauran-category-nav a > span {
  color: var(--bauran-gold-ink);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

body#category:not(#_) #wrapper #js-product-list-header .bauran-category-nav a[aria-current="page"] {
  --bauran-gold-ink: var(--bauran-accent-on-dark);
  background: var(--bauran-carbon-soft);
  border-color: var(--bauran-carbon-soft);
  color: #fff;
}

body#category:not(#_) #wrapper #js-product-list-header .bauran-category-nav a:not([aria-current]):hover,
body#category:not(#_) #wrapper #js-product-list-header .bauran-category-nav a:not([aria-current]):focus-visible {
  background: #fff;
  border-color: var(--bauran-ink);
  color: var(--bauran-ink);
  outline: none;
}

body#category:not(#_) #wrapper #js-product-list-header .bauran-category-nav a[aria-current="page"]:focus-visible {
  outline: 2px solid var(--bauran-ink);
  outline-offset: 2px;
}

/* Fondo blanco en los listados, como el resto de la tienda: el marfil
   #f4f5f6 de #main y #content-wrapper dejaba una franja gris entre la
   cabecera y la barra y un fondo distinto bajo las tarjetas. */
body:not(#_) #wrapper #content-wrapper:has(> .bauran-listing-page),
body:not(#_) #wrapper .bauran-listing-page {
  background: #fff;
}

body#category:not(#_) #wrapper #products {
  margin-top: 0;
}

/* Miga, cabecera, barra y rejilla en la misma vertical. La miga se centraba
   en 1600 px sin contar el margen del contenedor: quedaba a 16 px del borde
   con el titulo a 58, y la rejilla iba centrada en 1180 px, sin relacion con
   ninguno de los dos. */
body#category:not(#_) #wrapper .breadcrumb {
  padding-inline: calc(max(0px, (100% - 1600px) / 2) + clamp(1.25rem, 4vw, 4.5rem));
}

body#category:not(#_) #wrapper #js-product-list .products.product-list-grid {
  justify-content: start;
  max-width: 1600px;
  padding-inline: clamp(1.25rem, 4vw, 4.5rem);
}

/* Barra del listado de la categoria: una sola linea, a sangre, entre dos
   filetes. Recuento a la izquierda; filtrar y ordenar a la derecha.
   Sin el tope de 1600 px del padre: por encima de ese ancho la barra quedaba
   pegada a la izquierda y el recuento no caia bajo el titulo. */
body#category:not(#_) #wrapper .bauran-listing-selection {
  margin: 0 0 1.25rem;
  max-width: none;
  padding: 0;
}

body#category:not(#_) #wrapper .bauran-listing-toolbar {
  align-items: center;
  border-bottom: 1px solid var(--bauran-line);
  border-top: 1px solid var(--bauran-line);
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1rem;
  justify-content: space-between;
  min-height: 52px;
  padding-inline: calc(max(0px, (100% - 1600px) / 2) + clamp(1.25rem, 4vw, 4.5rem));
}

/* La paginacion, a la misma vertical que la barra y la rejilla: con el
   listado a sangre, "Mostrando del 1 al 2 de 2" tocaba el borde. */
body#category:not(#_) #wrapper .bauran-pagination {
  padding-inline: calc(max(0px, (100% - 1600px) / 2) + clamp(1.25rem, 4vw, 4.5rem));
}

body#category:not(#_) #wrapper .bauran-listing-toolbar__count {
  color: var(--bauran-ink);
  font-weight: 600;
  padding: 0;
  white-space: nowrap;
}

body#category:not(#_) #wrapper .bauran-listing-toolbar__actions {
  align-self: stretch;
  flex: 0 0 auto;
}

/* Botones de la barra en todos los listados: en frase, sin versalitas
   espaciadas (esas quedan para los rotulos). */
body:not(#_) #wrapper .bauran-listing-toolbar .bauran-listing-toolbar__button {
  font-size: .875rem;
  font-weight: 600;
  gap: .5rem;
  justify-content: center;
  letter-spacing: 0;
  min-width: 0;
  text-transform: none;
}

body:not(#_) #wrapper .bauran-listing-toolbar__count {
  font-size: .875rem;
  letter-spacing: 0;
  text-transform: none;
}

body#category:not(#_) #wrapper .bauran-listing-toolbar .bauran-listing-toolbar__button {
  border-top: 0;
  flex: 0 0 auto;
  padding: 0 0 0 1rem;
}

body#category:not(#_) #wrapper .bauran-listing-toolbar .bauran-listing-toolbar__button:first-child {
  border-left: 0;
}

body#category:not(#_) #wrapper .bauran-listing-toolbar .bauran-listing-toolbar__button:hover,
body#category:not(#_) #wrapper .bauran-listing-toolbar .bauran-listing-toolbar__button:focus-visible,
body#category:not(#_) #wrapper .bauran-listing-toolbar .bauran-listing-toolbar__button[aria-expanded="true"] {
  background: transparent;
  color: var(--bauran-ink);
  text-decoration: underline;
  text-underline-offset: .3em;
}

@media (min-width: 992px) {
  /* Titulo a la izquierda, descripcion a la derecha; pestanas subrayadas. */
  body#category:not(#_) #wrapper #js-product-list-header .bauran-category-hero__retail-grid {
    align-items: end;
    column-gap: 4rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding-block: 2.5rem 2rem;
  }

  body#category:not(#_) #wrapper #js-product-list-header .bauran-category-hero__copy h1 {
    font-size: clamp(2.6rem, 3.6vw, 3.6rem);
    line-height: 1.04;
    margin: 0;
  }

  body#category:not(#_) #wrapper #js-product-list-header .bauran-category-hero__description {
    justify-self: end;
    max-width: 34rem;
  }

  body#category:not(#_) #wrapper #js-product-list-header .bauran-category-nav {
    display: flex;
    gap: 2rem;
    overflow: visible;
    padding-bottom: 0;
  }

  body#category:not(#_) #wrapper #js-product-list-header .bauran-category-nav a,
  body#category:not(#_) #wrapper #js-product-list-header .bauran-category-nav a[aria-current="page"],
  body#category:not(#_) #wrapper #js-product-list-header .bauran-category-nav a:not([aria-current]):hover,
  body#category:not(#_) #wrapper #js-product-list-header .bauran-category-nav a:not([aria-current]):focus-visible {
    background: transparent;
    border: 0;
    box-shadow: inset 0 -2px 0 transparent;
    color: var(--bauran-muted);
    min-height: 52px;
    padding: 0;
  }

  body#category:not(#_) #wrapper #js-product-list-header .bauran-category-nav a[aria-current="page"] {
    --bauran-gold-ink: var(--bauran-accent-ink);
    box-shadow: inset 0 -2px 0 var(--bauran-ink);
    color: var(--bauran-ink);
  }

  body#category:not(#_) #wrapper #js-product-list-header .bauran-category-nav a:not([aria-current]):hover,
  body#category:not(#_) #wrapper #js-product-list-header .bauran-category-nav a:not([aria-current]):focus-visible {
    color: var(--bauran-ink);
  }

  body#category:not(#_) #wrapper .bauran-listing-selection {
    margin-bottom: 2rem;
  }

  body#category:not(#_) #wrapper .bauran-listing-toolbar {
    min-height: 64px;
  }

  body#category:not(#_) #wrapper .bauran-listing-toolbar__actions {
    align-items: center;
    align-self: center;
    gap: .5rem;
  }

  body#category:not(#_) #wrapper .bauran-listing-toolbar .bauran-listing-toolbar__button,
  body#category:not(#_) #wrapper .bauran-listing-toolbar .bauran-listing-toolbar__button:first-child {
    border: 1px solid var(--bauran-line);
    min-height: 40px;
    padding: 0 1rem;
  }

  body#category:not(#_) #wrapper .bauran-listing-toolbar .bauran-listing-toolbar__button:hover,
  body#category:not(#_) #wrapper .bauran-listing-toolbar .bauran-listing-toolbar__button:focus-visible,
  body#category:not(#_) #wrapper .bauran-listing-toolbar .bauran-listing-toolbar__button[aria-expanded="true"] {
    border-color: var(--bauran-ink);
    text-decoration: none;
  }
}

@media (max-width: 767.98px) {
  /* Con la rejilla alineada al margen, cada tarjeta mide 169 px y la
     etiqueta "Proximamente" ocupaba 131: tapaba media foto. Se mantiene el
     suelo de 12 px de los rotulos; se recorta espaciado y relleno. */
  body:not(#_) #wrapper .bauran-product-card .product-flags li.product-flag {
    letter-spacing: .04em;
    padding: .4rem .5rem;
  }
}

/* === Home: portada y entrada a la gama 0.7.76 ===========================
   Diseno trabajado en Claude Design ("Bloque Home"), sobre fondo blanco.
   Motivo: tras la portada venia una franja negra con los cuatro nombres
   separada de sus fotos (en escritorio, en cuatro celdas que no coincidian
   con el 2x2 de fotos y que tapaban 89 px de ellas), una barra ocre de 6 px
   sin funcion y dos titulares seguidos.

   Ahora cada foto lleva su numero y su nombre en la misma pieza: la rejilla
   de nombres se coloca exactamente sobre la de fotos y cada enlace ocupa su
   foto entera, con el nombre en una banda blanca al pie. La franja umbral
   desaparece y su frase pasa a la entrada del catalogo. */
body#index:not(#_) .bauran-hero-campaign__products {
  backdrop-filter: none;
  background: transparent;
  border-top: 0;
  bottom: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  inset: 0 0 0 43%;
  z-index: 1;
}

body#index:not(#_) .bauran-hero-campaign__products a {
  --bauran-banda: 3.25rem;
  align-items: flex-end;
  background: linear-gradient(to top, #fff 0 var(--bauran-banda), rgba(13, 15, 18, .14) var(--bauran-banda) calc(var(--bauran-banda) + 1px), transparent calc(var(--bauran-banda) + 1px));
  border-left: 0;
  color: var(--bauran-ink);
  gap: .6rem;
  min-height: 0;
  padding: 0 1.25rem 1.1rem;
}

body#index:not(#_) .bauran-hero-campaign__products b {
  color: var(--bauran-gold-ink);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}

body#index:not(#_) .bauran-hero-campaign__products span {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
}

body#index:not(#_) .bauran-hero-campaign__products a:hover,
body#index:not(#_) .bauran-hero-campaign__products a:focus-visible {
  background: linear-gradient(to top, #fff 0 var(--bauran-banda), var(--bauran-ink) var(--bauran-banda) calc(var(--bauran-banda) + 1px), transparent calc(var(--bauran-banda) + 1px));
  color: var(--bauran-ink);
  outline: none;
}

body#index:not(#_) .bauran-hero-campaign__products a:hover span,
body#index:not(#_) .bauran-hero-campaign__products a:focus-visible span {
  text-decoration: underline;
  text-underline-offset: .3em;
}

body#index:not(#_) .bauran-hero-campaign__products a:hover b,
body#index:not(#_) .bauran-hero-campaign__products a:focus-visible b {
  color: var(--bauran-gold-ink);
}

body#index:not(#_) .bauran-hero-campaign__products a:focus-visible {
  box-shadow: inset 0 0 0 2px var(--bauran-ink);
}

/* El velo oscurecia el pie de las fotos para que se leyera la franja negra.
   Sin franja, sobra: queda solo el fundido blanco hacia el texto. */
body#index:not(#_) .bauran-hero-campaign__veil {
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .99) 36%, rgba(255, 255, 255, .94) 43%, rgba(255, 255, 255, .2) 54%, transparent 64%);
}

/* La frase de entrada, antes titular suelto con barra ocre de 6 px. */
body#index:not(#_) #wrapper .bauran-range-intro__lead {
  align-items: flex-start;
  color: var(--bauran-ink);
  display: flex;
  font-size: .9375rem;
  font-weight: 600;
  gap: .75rem;
  line-height: 1.4;
  margin: 1.25rem 0 1.5rem;
}

body#index:not(#_) #wrapper .bauran-range-intro__lead::before {
  background: var(--bauran-gold-ink);
  content: "";
  flex: 0 0 1.5rem;
  height: 1px;
  margin-top: .7em;
}

@media (min-width: 992px) {
  /* La franja reservaba 9,25 rem al pie de la portada. */
  body#index:not(#_) .bauran-hero-campaign__content {
    padding-bottom: clamp(4rem, 7vh, 7rem);
  }
}

@media (max-width: 991.98px) {
  body#index:not(#_) .bauran-hero-campaign__media,
  body#index:not(#_) .bauran-hero-campaign__products {
    inset: 51% 0 0;
  }

  body#index:not(#_) .bauran-hero-campaign__veil {
    background: linear-gradient(180deg, #fff 0%, #fff 44%, rgba(255, 255, 255, .9) 51%, rgba(255, 255, 255, .05) 68%, transparent 100%);
  }
}

@media (max-width: 575.98px) {
  body#index:not(#_) .bauran-hero-campaign__media,
  body#index:not(#_) .bauran-hero-campaign__products {
    inset: 55% 0 0;
  }

  body#index:not(#_) .bauran-hero-campaign__products a {
    --bauran-banda: 2.75rem;
    gap: .5rem;
    padding: 0 .875rem .95rem;
  }

  body#index:not(#_) .bauran-hero-campaign__products span {
    font-size: 12px;
  }
}

/* === Ficha de producto 0.7.76 ==========================================
   Diseno trabajado en Claude Design ("Ficha Producto"), en la linea de la
   cabecera de categoria v1 que eligio el promotor: todo sobre blanco, un solo
   lenguaje de filetes finos y cada dato una vez.

   Medido antes (fixture a 390 y 1440): cinco fondos que no eran blancos
   (panel de galeria #f3f4f6, aviso en tarjeta gris, tres tarjetas grises en
   la descripcion, franja negra de montaje y seccion de ayuda gris) y cinco
   estilos de caja distintos. "En preparacion" salia dos veces: como precio y
   en el aviso. Los enlaces de salto competian con los acordeones.

   La descripcion es HTML guardado en cada producto: se reordena solo con CSS
   para no tocar datos de produccion. */

/* --- Fondo blanco en toda la ficha ------------------------------------- */
body#product:not(#_) #wrapper :is(
  .product-container,
  .product-container > #content.page-content,
  .images-container,
  .bauran-product-gallery__stage,
  .bauran-product-gallery__stage img,
  .bauran-product-preview-state,
  .bauran-product-story,
  .bauran-product-story__feature,
  .bauran-product-story__installation,
  .bauran-product-support,
  .bauran-product-support__grid article
) {
  background: #fff;
  box-shadow: none;
}

/* --- Galeria: contador y "Ampliar" en una fila bajo la foto ------------- */
body#product:not(#_) #wrapper .bauran-product-gallery__stage {
  padding-bottom: 2.75rem;
  position: relative;
}

body#product:not(#_) #wrapper .bauran-product-gallery__counter {
  background: transparent;
  bottom: 0;
  color: var(--bauran-muted);
  font-size: .8125rem;
  left: 0;
  letter-spacing: .02em;
  line-height: 2.75rem;
  padding: 0;
  top: auto;
}

body#product:not(#_) #wrapper .bauran-product-gallery__zoom {
  background: transparent;
  border: 0;
  bottom: 0;
  color: var(--bauran-ink);
  font-size: .8125rem;
  font-weight: 600;
  height: 2.75rem;
  letter-spacing: 0;
  min-height: 44px;
  padding: 0;
  right: 0;
  text-transform: none;
  top: auto;
}

body#product:not(#_) #wrapper .bauran-product-gallery__zoom:hover,
body#product:not(#_) #wrapper .bauran-product-gallery__zoom:focus-visible {
  background: transparent;
  color: var(--bauran-ink);
  text-decoration: underline;
  text-underline-offset: .3em;
}

/* --- Cabecera de la ficha: ruta y referencia en una linea, titulo ------- */
body#product:not(#_) #wrapper .bauran-product-info .product-heading {
  align-items: baseline;
  border-bottom: 1px solid var(--bauran-line);
  padding-bottom: 1.25rem;
}

body#product:not(#_) #wrapper .bauran-product-info .product-heading .bauran-eyebrow {
  color: var(--bauran-muted);
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

body#product:not(#_) #wrapper .bauran-product-info .bauran-product-reference {
  color: var(--bauran-muted);
  font-size: .75rem;
  letter-spacing: .06em;
  margin-left: auto;
}

body#product:not(#_) #wrapper .bauran-product-info .bauran-product-reference::before {
  content: none;
}

body#product:not(#_) #wrapper .bauran-product-info .product-heading h1 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: .5rem 0 0;
}

/* "En preparacion" salia como precio y otra vez en el aviso: queda el aviso,
   que es el que explica que falta. Con precio real no hay aviso y el precio
   se ve como siempre. */
body#product:not(#_) #wrapper .product-prices:has(+ .product-information .bauran-product-preview-state) {
  display: none;
}

/* --- Orden: estado y accion justo bajo el titulo, despues lo esencial --- */
body#product:not(#_) #wrapper .bauran-product-info .product-information {
  display: flex;
  flex-direction: column;
}

body#product:not(#_) #wrapper .bauran-product-info .product-information > :is(.product-actions, .bauran-product-buybox) { order: 1; }
body#product:not(#_) #wrapper .bauran-product-info .product-information > .bauran-product-summary { order: 2; }
body#product:not(#_) #wrapper .bauran-product-info .product-information > .bauran-product-assurances { order: 3; }
body#product:not(#_) #wrapper .bauran-product-info .product-information > .bauran-product-accordion { order: 4; }
body#product:not(#_) #wrapper .bauran-product-info .product-information > * { order: 5; }

/* Los enlaces de salto repetian lo que ya abren los acordeones y la propia
   pagina al bajar. */
body#product:not(#_) #wrapper .bauran-product-jump-links {
  display: none;
}

/* --- Aviso "En preparacion": sin tarjeta, entre filetes ---------------- */
body#product:not(#_) #wrapper .bauran-product-preview-state {
  border: 0;
  border-bottom: 1px solid var(--bauran-line);
  display: grid;
  gap: .5rem;
  margin: 0;
  padding: 1.25rem 0 1.5rem;
}

body#product:not(#_) #wrapper .bauran-product-preview-state > span {
  color: var(--bauran-gold-ink);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

body#product:not(#_) #wrapper .bauran-product-preview-state > strong {
  color: var(--bauran-ink);
  font-size: 1.0625rem;
  font-weight: 700;
}

body#product:not(#_) #wrapper .bauran-product-preview-state > p {
  color: var(--bauran-muted);
  font-size: .9375rem;
  line-height: 1.5;
  margin: 0;
}

body#product:not(#_) #wrapper .bauran-product-preview-state > a {
  align-items: center;
  background: var(--bauran-carbon-soft);
  border: 0;
  color: #fff;
  display: flex;
  font-size: .9375rem;
  font-weight: 600;
  gap: .5rem;
  justify-content: center;
  letter-spacing: 0;
  margin-top: .5rem;
  min-height: 48px;
  text-decoration: none;
  text-transform: none;
}

body#product:not(#_) #wrapper .bauran-product-preview-state > a:hover,
body#product:not(#_) #wrapper .bauran-product-preview-state > a:focus-visible {
  background: var(--bauran-ink);
  color: #fff;
  outline: 2px solid var(--bauran-ink);
  outline-offset: 2px;
}

/* --- En pocas palabras + atributos en filas ----------------------------- */
body#product:not(#_) #wrapper .bauran-product-summary {
  border: 0;
  padding: 1.5rem 0 0;
}

body#product:not(#_) #wrapper .bauran-product-summary h2 {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 .5rem;
}

body#product:not(#_) #wrapper .bauran-product-highlights {
  border: 0;
  margin: 1.25rem 0 0;
  padding: 0;
}

body#product:not(#_) #wrapper .bauran-product-highlights li {
  border: 0;
  border-top: 1px solid var(--bauran-line);
  column-gap: 1rem;
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  padding: .8rem 0;
}

body#product:not(#_) #wrapper .bauran-product-highlights li strong {
  color: var(--bauran-ink);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

body#product:not(#_) #wrapper .bauran-product-highlights li span {
  color: var(--bauran-muted);
  font-size: .875rem;
}

/* --- Garantias: tres columnas con filete vertical ----------------------- */
body#product:not(#_) #wrapper .bauran-product-assurances {
  border: 0;
  border-bottom: 1px solid var(--bauran-line);
  border-top: 1px solid var(--bauran-line);
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
}

body#product:not(#_) #wrapper .bauran-product-assurances > div {
  background: transparent;
  border: 0;
  border-left: 1px solid var(--bauran-line);
  display: grid;
  gap: .25rem;
  align-content: start;
  padding: .9rem .75rem;
}

body#product:not(#_) #wrapper .bauran-product-assurances > div:first-child {
  border-left: 0;
  padding-left: 0;
}

body#product:not(#_) #wrapper .bauran-product-assurances strong {
  color: var(--bauran-ink);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: none;
}

body#product:not(#_) #wrapper .bauran-product-assurances span {
  color: var(--bauran-muted);
  font-size: .75rem;
  line-height: 1.35;
}

/* --- Acordeones: titulo en frase, filetes ------------------------------- */
body#product:not(#_) #wrapper .bauran-product-accordion .card {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--bauran-line);
}

body#product:not(#_) #wrapper .bauran-product-accordion .card-header {
  background: transparent;
  color: var(--bauran-ink);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: 0;
  min-height: 56px;
  padding-inline: 0;
  text-transform: none;
}

body#product:not(#_) #wrapper .bauran-product-accordion .card-header .label {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: 0;
  text-transform: none;
}

/* --- Descripcion --------------------------------------------------------- */
body#product:not(#_) #wrapper .bauran-product-story {
  border-top: 1px solid var(--bauran-line);
  padding-block: 2.5rem;
}

body#product:not(#_) #wrapper .bauran-product-story__heading .bauran-eyebrow {
  display: none;
}

body#product:not(#_) #wrapper .bauran-product-story__heading h2 {
  font-size: 1.5rem;
  margin: 0 0 1rem;
}

body#product:not(#_) #wrapper .bauran-product-story__content {
  display: block;
}

/* Movil: cada bloque en una fila, foto pequena a la izquierda. */
body#product:not(#_) #wrapper .bauran-product-story__feature,
body#product:not(#_) #wrapper .bauran-product-story__feature--reverse {
  align-items: start;
  border: 0;
  border-top: 1px solid var(--bauran-line);
  column-gap: 1rem;
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  margin: 0;
  min-height: 0;
  padding: 1.25rem 0;
}

body#product:not(#_) #wrapper .bauran-product-story__feature > figure {
  aspect-ratio: 1;
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  min-height: 0;
  overflow: hidden;
}

body#product:not(#_) #wrapper .bauran-product-story__feature > figure img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

body#product:not(#_) #wrapper .bauran-product-story__feature > div {
  grid-column: 2;
  grid-row: 1;
  padding: 0;
}

body#product:not(#_) #wrapper :is(.bauran-product-story__feature, .bauran-product-story__installation, .bauran-product-story__notes article) span {
  color: var(--bauran-gold-ink);
  display: block;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .12em;
  margin-bottom: .35rem;
}

body#product:not(#_) #wrapper :is(.bauran-product-story__feature, .bauran-product-story__installation, .bauran-product-story__notes article) h3 {
  color: var(--bauran-ink);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0 0 .4rem;
}

body#product:not(#_) #wrapper :is(.bauran-product-story__feature, .bauran-product-story__installation, .bauran-product-story__notes article) p {
  color: var(--bauran-muted);
  font-size: .875rem;
  line-height: 1.5;
  margin: 0;
}

/* Montaje: era una franja negra en mitad de la pagina. Ahora un bloque mas,
   con su rotulo en ocre. */
body#product:not(#_) #wrapper .bauran-product-story__installation {
  --bauran-gold-ink: var(--bauran-accent-ink);
  border: 0;
  border-top: 1px solid var(--bauran-line);
  color: var(--bauran-ink);
  display: block;
  margin: 0;
  padding: 1.25rem 0;
}

body#product:not(#_) #wrapper .bauran-product-story__installation > div {
  padding: 0;
}

body#product:not(#_) #wrapper .bauran-product-story__installation a {
  color: var(--bauran-gold-ink);
  display: inline-flex;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: 0;
  margin-top: .6rem;
  min-height: 44px;
  align-items: center;
  text-transform: none;
}

body#product:not(#_) #wrapper .bauran-product-story__notes {
  display: block;
  margin: 0;
}

body#product:not(#_) #wrapper .bauran-product-story__notes article {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--bauran-line);
  padding: 1.25rem 0;
}

/* --- Ayuda ---------------------------------------------------------------- */
body#product:not(#_) #wrapper .bauran-product-support {
  border-top: 1px solid var(--bauran-line);
  padding-block: 2.5rem;
}

body#product:not(#_) #wrapper .bauran-product-support__heading h2 {
  font-size: 1.5rem;
  margin: 0 0 1rem;
}

body#product:not(#_) #wrapper .bauran-product-support__grid {
  display: block;
  gap: 0;
}

body#product:not(#_) #wrapper .bauran-product-support__grid article {
  border: 0;
  border-top: 1px solid var(--bauran-line);
  column-gap: 1rem;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  min-height: 0;
  padding: 1.1rem 0;
}

body#product:not(#_) #wrapper .bauran-product-support__grid article > span {
  color: var(--bauran-gold-ink);
  font-size: .75rem;
  grid-column: 1;
  grid-row: 1 / span 3;
  padding-top: .15rem;
}

body#product:not(#_) #wrapper .bauran-product-support__grid article > :is(h3, p, a) {
  grid-column: 2;
}

body#product:not(#_) #wrapper .bauran-product-support__grid h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 .3rem;
}

body#product:not(#_) #wrapper .bauran-product-support__grid p {
  color: var(--bauran-muted);
  font-size: .875rem;
  line-height: 1.5;
  margin: 0;
}

body#product:not(#_) #wrapper .bauran-product-support__grid a {
  color: var(--bauran-gold-ink);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: 0;
  margin-top: .5rem;
  text-transform: none;
}

@media (min-width: 992px) {
  body#product:not(#_) #wrapper .bauran-product-info .product-heading h1 {
    font-size: clamp(2.4rem, 3vw, 3rem);
  }

  /* Titulo de seccion a la izquierda, contenido a la derecha. */
  body#product:not(#_) #wrapper .bauran-product-story__inner,
  body#product:not(#_) #wrapper .bauran-product-support > .bauran-shell {
    column-gap: 3rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  }

  body#product:not(#_) #wrapper :is(.bauran-product-story, .bauran-product-support) {
    padding-block: 4rem;
  }

  body#product:not(#_) #wrapper :is(.bauran-product-story__heading, .bauran-product-support__heading) h2 {
    font-size: 2rem;
  }

  /* Descripcion: tres columnas; debajo montaje, antes de elegir y cuidado,
     tambien en tres columnas separadas por filetes. */
  body#product:not(#_) #wrapper .bauran-product-story__content {
    display: grid;
    gap: 2.5rem 2rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body#product:not(#_) #wrapper .bauran-product-story__feature,
  body#product:not(#_) #wrapper .bauran-product-story__feature--reverse {
    border-top: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0;
  }

  body#product:not(#_) #wrapper .bauran-product-story__feature > figure {
    aspect-ratio: 4 / 3;
    order: -1;
    width: 100%;
  }

  body#product:not(#_) #wrapper .bauran-product-story__installation {
    grid-column: 1;
    padding: 2rem 0 0;
  }

  body#product:not(#_) #wrapper .bauran-product-story__notes {
    border-top: 1px solid var(--bauran-line);
    column-gap: 2rem;
    display: grid;
    grid-column: 2 / span 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body#product:not(#_) #wrapper .bauran-product-story__notes article {
    border-left: 1px solid var(--bauran-line);
    border-top: 0;
    padding: 2rem 0 0 2rem;
  }

  body#product:not(#_) #wrapper .bauran-product-support__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body#product:not(#_) #wrapper .bauran-product-support__grid article {
    border-left: 1px solid var(--bauran-line);
    border-top: 0;
    display: block;
    padding: 0 1.75rem;
  }

  body#product:not(#_) #wrapper .bauran-product-support__grid article:first-child {
    border-left: 0;
    padding-left: 0;
  }

  body#product:not(#_) #wrapper .bauran-product-support__grid article > span {
    display: block;
    margin-bottom: .6rem;
  }
}

/* Remates de la ficha 0.7.76, medidos tras la primera pasada. */
body#product:not(#_) #wrapper .bauran-product-info .product-heading h1 {
  max-width: none;
}

body#product:not(#_) #wrapper .bauran-product-summary__label {
  display: none;
}

body#product:not(#_) #wrapper .bauran-product-support__grid {
  border: 0;
}

body#product:not(#_) #wrapper .bauran-product-story__installation a {
  border: 0;
  text-decoration: none;
}

/* Fondo blanco en toda la tienda. El marfil #f4f5f6 del body asomaba en los
   64 px de margen bajo #wrapper, como una franja gris antes del pie. */
body:not(#_) {
  background: #fff;
}

@media (min-width: 992px) {
  /* El filete superior de montaje cruza el hueco entre columnas para
     empalmar con el de "antes de elegir" y "cuidado". */
  body#product:not(#_) #wrapper .bauran-product-story__installation {
    margin-right: -2rem;
    padding-right: 2rem;
  }
}

body#product:not(#_) #wrapper .bauran-product-story__notes {
  border-bottom: 0;
}

/* Bajo la ayuda quedaban 72 px de relleno y 64 de margen de #wrapper sobre
   los 64 de la propia seccion: 200 px de blanco antes del pie. */
body#product:not(#_) #wrapper {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Contacto 0.7.77. El titulo de la cabecera oscura salia en tinta sobre
   carbon: la regla general body:not(#index) #main h1 (2,0,2) ganaba a
   .bauran-contact-hero h1 (0,1,1) y lo dejaba casi invisible. */
body#contact:not(#_) #main .bauran-contact-hero h1 {
  color: var(--bauran-white);
}

/* El input nativo de "Adjuntar archivo" va encima del boton, en absoluto, con
   359 px de ancho dentro de una columna de 300: a 390 px la pagina se
   desplazaba 22 px en horizontal. */
body#contact:not(#_) .contact-form input.filestyle {
  left: 15px;
  max-width: calc(100% - 30px);
  width: calc(100% - 30px);
}

/* Cesta 0.7.79. Sin tope de ancho, a 2195 px la cesta iba de 15 a 2166 px
   mientras cabecera y checkout quedan en 426-1754. Mismo ancho maximo y mismo
   margen que la cabecera; los 15 px descontados son el relleno del contenedor
   padre, para que tarjetas y resumen caigan en la vertical del logo y de los
   accesos. En movil no cambia nada. */
@media (min-width: 992px) {
  body#cart:not(#_) #wrapper .bauran-cart {
    box-sizing: border-box;
    margin-inline: auto;
    max-width: var(--bauran-max);
    padding-inline: max(0px, calc(clamp(1rem, 3vw, 3.5rem) - 15px));
  }
}

/* Checkout 0.7.79: aviso bajo el codigo postal (provincia deducida, CP fuera
   de la peninsula o sin provincia). Texto, no alerta: no bloquea el envio. */
body:not(#_) .bauran-postcode-hint {
  color: var(--bauran-muted);
  font-size: .875rem;
  line-height: 1.4;
  margin: .4rem 0 0;
}

body:not(#_) .bauran-postcode-hint--warning {
  color: #8a4b00;
}

/* Checkout 0.7.80: empresa y NIF como opcion secundaria plegada. */
body:not(#_) .bauran-invoice-fields {
  border-top: 1px solid var(--bauran-line);
  margin: 1rem 0;
  padding-top: .5rem;
}

body:not(#_) .bauran-invoice-fields > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: .9375rem;
  font-weight: 600;
  gap: .5rem;
  min-height: 44px;
}

body:not(#_) .bauran-invoice-fields > summary span {
  color: var(--bauran-muted);
  font-size: .8125rem;
  font-weight: 400;
}

body:not(#_) .bauran-invoice-fields__help {
  color: var(--bauran-muted);
  font-size: .875rem;
  margin: 0 0 .75rem;
}

/* Rotulo visible para provincia y pais: el desplegable de Mizu solo muestra
   "Selecciona" como primera opcion. */
body:not(#_) .bauran-select-label {
  color: var(--bauran-ink);
  display: block;
  font-size: .875rem;
  font-weight: 600;
  margin: 0 0 .35rem;
}

/* Checkout 0.7.81. El banco movil (12-10-2026) mido tres fallos en las piezas
   del tema padre que el checkout minimo deja a la vista:
   - los rotulos de los consentimientos y de "Utilizar esta direccion tambien
     para la factura" salian a 12,5 px;
   - "¡Y ahorra tiempo en tu proximo pedido!" quedaba a 3,51:1 de contraste;
   - la casilla de la factura era un objetivo de 13 x 13 px.
   Se agranda el texto y el area de toque; no cambian los textos legales. */
body#checkout:not(#_) .custom-checkbox > label,
body#checkout:not(#_) label[for="use_same_address"] {
  font-size: .875rem;
  line-height: 1.4;
}

/* El .text-muted del tema padre va con !important: solo asi se corrige. */
body#checkout:not(#_) .form-informations-subtitle.text-muted {
  color: var(--bauran-muted) !important;
}

body#checkout:not(#_) .form-group:has(> div > #use_same_address) > div {
  align-items: center;
  display: flex;
  gap: .6rem;
  min-height: 44px;
}

body#checkout:not(#_) #use_same_address {
  flex: 0 0 auto;
  height: 20px;
  margin: 0;
  width: 20px;
}

body#checkout:not(#_) label[for="use_same_address"] {
  align-items: center;
  display: flex;
  margin: 0;
  min-height: 44px;
}

/* === Portada Carpfishing 0.7.83 =========================================
   Lanzamiento solo de Carpfishing: tres productos en lugar de cuatro. Las
   fotos son las portadas aprobadas, con fondo blanco puro: se ven enteras
   (contain), sin filtro ni zoom, sobre blanco. FILO DUO ocupa la fila de
   arriba; bandeja y dosificador, la de abajo. Cada nombre sigue en la banda
   blanca al pie de su foto, con la misma rejilla.

   El velo blanco fundia las fotos con el texto. Con fondo blanco sobra y,
   con tres piezas, borraba media bandeja: se quita y el escenario empieza un
   poco mas a la derecha, fuera del ancho del texto. */
/* Sin velo, el fondo propio de la portada (#eef0f2) asomaba detras del
   texto: blanco, como el resto. */
body#index:not(#_) .bauran-hero--carpfishing {
  background: #fff;
}

body#index:not(#_) .bauran-hero--carpfishing .bauran-hero-campaign__media,
body#index:not(#_) .bauran-hero--carpfishing .bauran-hero-campaign__products {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

body#index:not(#_) .bauran-hero--carpfishing .bauran-hero-campaign__media figure:first-child,
body#index:not(#_) .bauran-hero--carpfishing .bauran-hero-campaign__products a:first-child {
  grid-column: 1 / -1;
}

body#index:not(#_) .bauran-hero--carpfishing .bauran-hero-campaign__media figure {
  background: #fff;
  border: 0;
  border-left: 1px solid rgba(13, 15, 18, .1);
}

body#index:not(#_) .bauran-hero--carpfishing .bauran-hero-campaign__media figure + figure {
  border-top: 1px solid rgba(13, 15, 18, .1);
}

body#index:not(#_) .bauran-hero--carpfishing .bauran-hero-campaign__media img {
  box-sizing: border-box;
  filter: none;
  object-fit: contain;
  object-position: 50% 50%;
  padding: 1rem 1.25rem 4.25rem;
  transform: none;
}

body#index:not(#_) .bauran-hero--carpfishing .bauran-hero-campaign__veil {
  display: none;
}

body#index:not(#_) .bauran-hero--carpfishing .bauran-hero-campaign__products span {
  line-height: 1.2;
}

body#index:not(#_) .bauran-hero--carpfishing .bauran-hero-campaign__products small {
  color: var(--bauran-muted);
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
  margin-left: auto;
  white-space: nowrap;
}

@media (min-width: 992px) {
  body#index:not(#_) .bauran-hero--carpfishing .bauran-hero-campaign__media,
  body#index:not(#_) .bauran-hero--carpfishing .bauran-hero-campaign__products {
    inset: 0 0 0 46%;
  }
}

/* En las dos celdas de abajo el subtitulo solo cabe con ancho de sobra. */
@media (max-width: 1279.98px) {
  body#index:not(#_) .bauran-hero--carpfishing .bauran-hero-campaign__products a + a small {
    display: none;
  }
}

/* Movil y tableta: el escenario iba en posicion absoluta desde el 51-55 %
   de una portada de alto fijo. Con el texto de preventa, mas largo, el
   segundo boton tocaba las fotos. Ahora texto y escenario van en flujo, uno
   debajo del otro, y ningun largo de texto los puede solapar. */
@media (max-width: 991.98px) {
  body#index:not(#_) .bauran-hero--carpfishing {
    display: grid;
    min-height: 0;
  }

  body#index:not(#_) .bauran-hero--carpfishing .bauran-hero-campaign__content {
    grid-area: 1 / 1;
    min-height: 0;
    padding-bottom: 2rem;
  }

  body#index:not(#_) .bauran-hero--carpfishing .bauran-hero-campaign__media {
    grid-area: 2 / 1;
    height: clamp(380px, 100vw, 600px);
    inset: auto;
    position: relative;
  }

  /* Los nombres siguen superpuestos a sus fotos, como en escritorio: el
     escenario es la ultima fila, asi que basta anclarlos al pie. */
  body#index:not(#_) .bauran-hero--carpfishing .bauran-hero-campaign__products {
    height: clamp(380px, 100vw, 600px);
    inset: auto 0 0;
    position: absolute;
  }

  body#index:not(#_) .bauran-hero--carpfishing .bauran-hero-campaign__products a {
    --bauran-banda: 3.5rem;
  }

  body#index:not(#_) .bauran-hero--carpfishing .bauran-hero-campaign__media img {
    padding: .75rem 1rem 4rem;
  }
}

@media (max-width: 575.98px) {
  body#index:not(#_) .bauran-hero--carpfishing .bauran-hero-campaign__products small {
    font-size: 12px;
  }
}

/* Cierre: tres accesos. FILO DUO a todo el ancho y los otros dos debajo,
   como en la portada; sin celda vacia. */
body#index:not(#_) .bauran-final-cta__range--carpfishing a,
body#index:not(#_) .bauran-final-cta__range--carpfishing a:nth-child(odd),
body#index:not(#_) .bauran-final-cta__range--carpfishing a:nth-child(-n+2) {
  border: 0;
}

body#index:not(#_) .bauran-final-cta__range--carpfishing a:first-child {
  border-bottom: 1px solid var(--bauran-border);
  grid-column: 1 / -1;
}

body#index:not(#_) .bauran-final-cta__range--carpfishing a:nth-child(2) {
  border-right: 1px solid var(--bauran-border);
}

@media (max-width: 767.98px) {
  body#index:not(#_) .bauran-final-cta__range--carpfishing a,
  body#index:not(#_) .bauran-final-cta__range--carpfishing a:nth-child(odd),
  body#index:not(#_) .bauran-final-cta__range--carpfishing a:nth-child(-n+2) {
    border: 1px solid var(--bauran-border);
  }
}

/* Gama de tres: en escritorio la rejilla de cuatro dejaba una columna vacia.
   Con exactamente tres tarjetas, tres columnas; con cuatro o mas, como antes. */
@media (min-width: 1200px) {
  body#index:not(#_) .bauran-products .products.product-list-grid:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Las portadas de Carpfishing son objetos enteros sobre blanco. En la
   tarjeta de la home, de formato vertical, "cover" cortaba FILO DUO y la
   bandeja por los lados: se muestran enteras. */
body#index:not(#_) .bauran-products .bauran-product-card .bauran-product-card__image {
  background: #fff;
  object-fit: contain;
}

/* ==========================================================================
   Cesta 0.7.84. Direccion (14-10): «el carrito se ve feo, en escritorio y en
   movil». Medido sobre la cesta de produccion y sobre tests/fixtures/
   cesta-preview.html con la hoja real de Mizu:
   - bandas beige a los lados de cada foto (fondo de la caja de Mizu) contra
     la regla de fondo blanco;
   - filas de 430 px con todo arriba y el resto vacio;
   - pagina gris, rotulo dorado y un resumen sin desglose.
   Selectores con #wrapper y :not(#_) para ganar a Mizu sin !important.
   ========================================================================== */
body#cart:not(#_) {
  background: #fff;
}

body#cart:not(#_) #wrapper,
body#cart:not(#_) #wrapper .bauran-cart,
body#cart:not(#_) #wrapper .bauran-cart .card {
  background: #fff;
}

body#cart:not(#_) #wrapper .bauran-cart__title {
  margin: 0;
  padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(1rem, 2.5vw, 1.75rem);
}

body#cart:not(#_) #wrapper .bauran-cart__title .bauran-kicker {
  color: var(--bauran-accent-ink);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
  margin: 0 0 .35rem;
  text-transform: uppercase;
}

body#cart:not(#_) #wrapper .bauran-cart__title h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1;
  margin: 0;
}

body#cart:not(#_) #wrapper .bauran-cart .cart-grid {
  align-items: flex-start;
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  margin: 0;
}

body#cart:not(#_) #wrapper .bauran-cart .cart-grid > .cart-grid-body,
body#cart:not(#_) #wrapper .bauran-cart .cart-grid > .cart-grid-right {
  border: 0;
  flex: none;
  min-height: 0;
  max-width: none;
  padding: 0;
  width: auto;
}

body#cart:not(#_) #wrapper .bauran-cart .cart-grid-body > .card {
  border: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
}

/* Lineas */
body#cart:not(#_) #wrapper .bauran-cart .cart-items {
  border-top: 1px solid var(--bauran-border);
  list-style: none;
  margin: 0;
  padding: 0;
}

body#cart:not(#_) #wrapper .bauran-cart .cart-item {
  animation: none;
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--bauran-border);
  /* Mizu fija .cart-item {height: 350px} desde 768 px. */
  height: auto;
  margin: 0;
  min-height: 0;
  opacity: 1;
  padding: 0;
  transform: none;
  visibility: visible;
}

body#cart:not(#_) #wrapper .cart-item .bauran-cart-line {
  align-items: start;
  display: grid;
  gap: 1.5rem;
  grid-template-areas: none;
  grid-template-columns: 120px minmax(0, 1fr);
  grid-template-rows: auto;
  height: auto;
  min-height: 0;
  padding: 1.5rem 0;
}

body#cart:not(#_) #wrapper .cart-item .bauran-cart-line > * {
  grid-area: auto;
}

body#cart:not(#_) #wrapper .cart-item .bauran-cart-line__media {
  aspect-ratio: 1;
  background: #fff;
  border: 1px solid var(--bauran-border);
  border-radius: 6px;
  height: auto;
  margin: 0;
  max-width: none;
  overflow: hidden;
  padding: .5rem;
  width: 120px;
}

body#cart:not(#_) #wrapper .cart-item .bauran-cart-line__media::before,
body#cart:not(#_) #wrapper .cart-item .bauran-cart-line__media::after {
  content: none;
  display: none;
}

body#cart:not(#_) #wrapper .cart-item .bauran-cart-line__media a,
body#cart:not(#_) #wrapper .cart-item .bauran-cart-line__media picture {
  background: #fff;
  display: block;
  height: 100%;
  width: 100%;
}

body#cart:not(#_) #wrapper .cart-item .bauran-cart-line__media img {
  background: #fff;
  height: 100%;
  max-height: none;
  object-fit: contain;
  width: 100%;
}

body#cart:not(#_) #wrapper .cart-item .bauran-cart-line__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  padding: 0;
}

body#cart:not(#_) #wrapper .cart-item .bauran-cart-line__heading {
  align-items: baseline;
  border: 0;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}

body#cart:not(#_) #wrapper .cart-item .bauran-cart-line .product-name {
  color: var(--bauran-ink);
  display: block;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}

body#cart:not(#_) #wrapper .cart-item .bauran-cart-line .product-name:hover,
body#cart:not(#_) #wrapper .cart-item .bauran-cart-line .product-name:focus-visible {
  color: var(--bauran-accent-ink);
}

/* Precio unitario: secundario, el total de la linea es el que manda. */
body#cart:not(#_) #wrapper .cart-item .bauran-cart-line .product-price {
  color: var(--bauran-muted);
  flex: none;
  font-size: .9375rem;
  margin: 0;
  text-align: right;
}

body#cart:not(#_) #wrapper .cart-item .bauran-cart-line .product-price .current-price {
  color: var(--bauran-muted);
  font-size: .9375rem;
  font-weight: 500;
}

body#cart:not(#_) #wrapper .cart-item .bauran-cart-line .product-price .current-price::after {
  content: " / ud.";
}

body#cart:not(#_) #wrapper .cart-item .bauran-cart-line__actions {
  align-items: center;
  border: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
  margin: 0;
  padding: 0;
}

body#cart:not(#_) #wrapper .cart-item .bauran-cart-line__quantity {
  align-items: center;
  display: flex;
  gap: .75rem;
  margin: 0;
}

body#cart:not(#_) #wrapper .cart-item .bauran-cart-line__quantity label,
body#cart:not(#_) #wrapper .cart-item .bauran-cart-line__total span {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Selector de cantidad: «- 1 +» en una pastilla. Sirve para el touchspin
   horizontal de Mizu y para el vertical del core (botones dentro de
   .input-group-btn-vertical): display:contents los mete en la misma fila y
   «order» los coloca. */
body#cart:not(#_) #wrapper .cart-item .bauran-cart-line .bootstrap-touchspin {
  align-items: stretch;
  background: #fff;
  border: 1px solid #cfd4d9;
  border-radius: 999px;
  box-shadow: none;
  display: inline-flex;
  height: 44px;
  margin: 0;
  overflow: hidden;
  width: auto;
}

body#cart:not(#_) #wrapper .cart-item .bauran-cart-line .bootstrap-touchspin .input-group-btn-vertical,
body#cart:not(#_) #wrapper .cart-item .bauran-cart-line .bootstrap-touchspin .input-group-btn {
  display: contents;
}

body#cart:not(#_) #wrapper .cart-item .bauran-cart-line .bootstrap-touchspin .input-group-addon {
  display: none;
}

body#cart:not(#_) #wrapper .cart-item .bauran-cart-line .bootstrap-touchspin .btn-touchspin {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--bauran-ink);
  cursor: pointer;
  display: inline-flex;
  font-size: 1.125rem;
  font-weight: 600;
  height: 44px;
  justify-content: center;
  line-height: 1;
  margin: 0;
  min-width: 0;
  padding: 0;
  position: static;
  width: 44px;
}

body#cart:not(#_) #wrapper .cart-item .bauran-cart-line .bootstrap-touchspin .btn-touchspin:hover {
  background: #f1f3f4;
}

body#cart:not(#_) #wrapper .cart-item .bauran-cart-line .bootstrap-touchspin .btn-touchspin:focus-visible {
  outline: 2px solid var(--bauran-accent-ink);
  outline-offset: -3px;
}

body#cart:not(#_) #wrapper .cart-item .bauran-cart-line .bootstrap-touchspin .bootstrap-touchspin-down {
  order: 0;
}

body#cart:not(#_) #wrapper .cart-item .bauran-cart-line .bootstrap-touchspin .js-cart-line-product-quantity {
  -moz-appearance: textfield;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--bauran-ink);
  font-size: 1rem;
  font-weight: 700;
  height: 44px;
  margin: 0;
  min-width: 0;
  order: 1;
  padding: 0;
  text-align: center;
  width: 2.75rem;
}

body#cart:not(#_) #wrapper .cart-item .bauran-cart-line .bootstrap-touchspin .js-cart-line-product-quantity::-webkit-inner-spin-button,
body#cart:not(#_) #wrapper .cart-item .bauran-cart-line .bootstrap-touchspin .js-cart-line-product-quantity::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

body#cart:not(#_) #wrapper .cart-item .bauran-cart-line .bootstrap-touchspin .bootstrap-touchspin-up {
  order: 2;
}

/* Iconos del core (material-icons) sustituidos por «−» y «+» legibles. */
body#cart:not(#_) #wrapper .cart-item .bauran-cart-line .bootstrap-touchspin .btn-touchspin i {
  display: none;
}

body#cart:not(#_) #wrapper .cart-item .bauran-cart-line .bootstrap-touchspin .bootstrap-touchspin-up:has(i)::after {
  content: "+";
}

body#cart:not(#_) #wrapper .cart-item .bauran-cart-line .bootstrap-touchspin .bootstrap-touchspin-down:has(i)::after {
  content: "\2212";
}

body#cart:not(#_) #wrapper .cart-item .bauran-cart-line .remove {
  order: 4;
}

body#cart:not(#_) #wrapper .cart-item .bauran-cart-line__remove {
  align-items: center;
  color: var(--bauran-muted);
  display: inline-flex;
  font-size: .875rem;
  gap: .3rem;
  letter-spacing: 0;
  min-height: 44px;
  text-decoration: underline;
  text-transform: none;
}

body#cart:not(#_) #wrapper .cart-item .bauran-cart-line__remove:hover {
  color: var(--bauran-ink);
}

body#cart:not(#_) #wrapper .cart-item .bauran-cart-line__total {
  align-items: baseline;
  display: flex;
  gap: .5rem;
  margin: 0 0 0 auto;
  order: 5;
}

body#cart:not(#_) #wrapper .cart-item .bauran-cart-line__total strong {
  color: var(--bauran-ink);
  font-size: 1.125rem;
  font-weight: 800;
}

/* Resumen */
body#cart:not(#_) #wrapper .bauran-cart .cart-grid-right .card.cart-summary {
  border: 1px solid var(--bauran-border);
  border-radius: 8px;
  box-shadow: none;
  margin: 0;
  padding: 1.75rem;
  position: sticky;
  top: 1.5rem;
}

body#cart:not(#_) #wrapper .bauran-cart-totals {
  border: 0;
  margin: 0;
  padding: 0;
}

body#cart:not(#_) #wrapper .bauran-cart-totals__title {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 0 1rem;
}

body#cart:not(#_) #wrapper .bauran-cart .cart-summary-line {
  align-items: baseline;
  border: 0;
  display: flex;
  font-size: .9375rem;
  gap: 1rem;
  justify-content: space-between;
  margin: 0;
  padding: .4rem 0;
}

body#cart:not(#_) #wrapper .bauran-cart .cart-summary-line .label,
body#cart:not(#_) #wrapper .bauran-cart .cart-summary-line .value {
  color: var(--bauran-ink);
  font-size: .9375rem;
  font-weight: 500;
  text-transform: none;
}

body#cart:not(#_) #wrapper .bauran-cart .bauran-cart-totals__pending {
  color: var(--bauran-muted);
}

body#cart:not(#_) #wrapper .bauran-cart .bauran-cart-totals__total {
  border-top: 1px solid var(--bauran-border);
  margin-top: .75rem;
  padding-top: .75rem;
}

body#cart:not(#_) #wrapper .bauran-cart .cart-total .label {
  font-size: 1.125rem;
  font-weight: 800;
}

body#cart:not(#_) #wrapper .bauran-cart .cart-total .label small {
  color: var(--bauran-muted);
  display: block;
  font-size: .8125rem;
  font-weight: 500;
}

body#cart:not(#_) #wrapper .bauran-cart .cart-total .value {
  font-size: 1.375rem;
  font-weight: 800;
}

/* Codigo promocional: un enlace discreto a la izquierda, no un rotulo
   centrado entre el total y el pago. */
body#cart:not(#_) #wrapper .bauran-cart .block-promo {
  border: 0;
  margin: .5rem 0 0;
  padding: 0;
}

body#cart:not(#_) #wrapper .bauran-cart .block-promo .cart-voucher {
  border: 0;
  margin: 0;
  padding: 0;
}

body#cart:not(#_) #wrapper .bauran-cart .promo-code-button {
  border: 0;
  margin: 0;
  padding: 0;
  text-align: left;
}

body#cart:not(#_) #wrapper .bauran-cart .promo-code-button a {
  color: var(--bauran-muted);
  display: inline-flex;
  font-size: .875rem;
  min-height: 44px;
  align-items: center;
  text-decoration: underline;
}

body#cart:not(#_) #wrapper .bauran-cart .promo-code form {
  display: flex;
  gap: .5rem;
  margin: .25rem 0 0;
}

body#cart:not(#_) #wrapper .bauran-cart .promo-code .promo-input {
  border: 1px solid #cfd4d9;
  border-radius: 4px;
  flex: 1;
  height: 44px;
  min-width: 0;
  padding: 0 .75rem;
}

body#cart:not(#_) #wrapper .bauran-cart .promo-code .btn {
  background: var(--bauran-carbon);
  border: 0;
  border-radius: 4px;
  color: #fff;
  height: 44px;
  padding: 0 1rem;
}

/* Acciones */
body#cart:not(#_) #wrapper .bauran-cart-actions {
  border: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 1rem 0 0;
  padding: 0;
}

body#cart:not(#_) #wrapper .bauran-cart-actions .bauran-cart-actions__cta {
  align-items: center;
  background: var(--bauran-carbon);
  border: 0;
  border-radius: 4px;
  box-shadow: none;
  color: #fff;
  display: flex;
  font-size: .875rem;
  font-weight: 800;
  justify-content: space-between;
  letter-spacing: .1em;
  min-height: 54px;
  padding: 0 1.25rem;
  text-transform: uppercase;
  width: 100%;
}

body#cart:not(#_) #wrapper .bauran-cart-actions .bauran-cart-actions__cta span {
  color: var(--bauran-accent);
  font-size: 1.125rem;
}

body#cart:not(#_) #wrapper .bauran-cart-actions .bauran-cart-actions__cta:hover,
body#cart:not(#_) #wrapper .bauran-cart-actions .bauran-cart-actions__cta:focus-visible {
  background: #000;
  color: #fff;
}

body#cart:not(#_) #wrapper .bauran-cart-actions .bauran-cart-actions__cta:focus-visible {
  outline: 3px solid var(--bauran-accent);
  outline-offset: 2px;
}

body#cart:not(#_) #wrapper .bauran-cart-actions .bauran-cart-actions__continue {
  align-items: center;
  align-self: center;
  color: var(--bauran-ink);
  display: inline-flex;
  font-size: .875rem;
  min-height: 44px;
  text-decoration: underline;
}

body#cart:not(#_) #wrapper .bauran-cart-actions .bauran-cart-actions__presale {
  background: #fff;
  border: 1px solid var(--bauran-border);
  border-left: 4px solid var(--bauran-accent);
  border-radius: 4px;
  color: var(--bauran-ink);
  font-size: .875rem;
  line-height: 1.45;
  margin: .25rem 0 0;
  padding: .7rem .85rem;
  text-align: left;
}

body#cart:not(#_) #wrapper .bauran-cart-actions .bauran-cart-actions__presale strong {
  color: var(--bauran-accent-ink);
  display: block;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

body#cart:not(#_) #wrapper .bauran-cart-actions .bauran-cart-actions__note {
  color: var(--bauran-muted);
  font-size: .8125rem;
  line-height: 1.45;
  margin: 0;
  text-align: left;
}

body#cart:not(#_) #wrapper .bauran-cart-summary__extra:not(:empty) {
  border-top: 1px solid var(--bauran-border);
  margin-top: 1rem;
  padding-top: 1rem;
}

/* Garantias: tres columnas sobrias bajo la cesta. */
body#cart:not(#_) #wrapper .bauran-cart-assurances {
  background: #fff;
  border-top: 1px solid var(--bauran-border);
  margin-top: clamp(2rem, 5vw, 4rem);
}

body#cart:not(#_) #wrapper .bauran-cart-assurances span {
  color: var(--bauran-accent-ink);
}

@media (max-width: 991.98px) {
  body#cart:not(#_) #wrapper .bauran-cart .cart-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body#cart:not(#_) #wrapper .bauran-cart .cart-grid-right .card.cart-summary {
    position: static;
  }
}

@media (max-width: 575.98px) {
  body#cart:not(#_) #wrapper .cart-item .bauran-cart-line {
    gap: .9rem;
    grid-template-columns: 88px minmax(0, 1fr);
    padding: 1.1rem 0;
  }

  body#cart:not(#_) #wrapper .cart-item .bauran-cart-line__media {
    padding: .35rem;
    width: 88px;
  }

  body#cart:not(#_) #wrapper .cart-item .bauran-cart-line__heading {
    flex-direction: column;
    gap: .2rem;
  }

  body#cart:not(#_) #wrapper .cart-item .bauran-cart-line .product-name {
    font-size: 1rem;
  }

  body#cart:not(#_) #wrapper .cart-item .bauran-cart-line .product-price {
    text-align: left;
  }

  body#cart:not(#_) #wrapper .cart-item .bauran-cart-line__actions {
    gap: .25rem .75rem;
  }



  body#cart:not(#_) #wrapper .cart-item .bauran-cart-line .remove {
    order: 6;
    width: 100%;
  }

  body#cart:not(#_) #wrapper .bauran-cart-assurances > div {
    padding: 1rem 0;
  }



  body#cart:not(#_) #wrapper .bauran-cart .cart-grid-right .card.cart-summary {
    border-radius: 6px;
    padding: 1.25rem;
  }
}

/* 0.7.84: banner de la preventa en la categoria Carpfishing. */
/* 0.7.85: a todo el ancho. Su contenedor (#main.bauran-listing-page en la
   categoria, #content en la portada) ya ocupa la pantalla entera: no hace
   falta 100vw, que cuenta la barra de desplazamiento y daba scroll lateral. */
body#category:not(#_) #wrapper .bauran-category-banner {
  margin: clamp(1rem, 2.5vw, 2rem) 0 0;
  max-width: none;
  padding: 0;
}

body#category:not(#_) #wrapper .bauran-category-banner img,
body#index:not(#_) #wrapper .bauran-home-banner img {
  border: 0;
  border-radius: 0;
  display: block;
  height: auto;
  width: 100%;
}

/* 0.7.85: portada. El hero a pantalla completa se sustituye por el banner de la
   preventa, de borde a borde y enlazado a la categoria. */
body#index:not(#_) #wrapper .bauran-home-banner {
  margin: 0;
  padding: 0;
}

body#index:not(#_) #wrapper .bauran-home-banner__link {
  display: block;
}

body#index:not(#_) #wrapper .bauran-home-banner__link:focus-visible {
  outline: 3px solid var(--bauran-accent);
  outline-offset: -3px;
}

/* 0.7.85: cierre de la portada sin las tarjetas de la gama: una franja baja con
   el titular a la izquierda y el texto y los botones a la derecha. */
body#index:not(#_) #wrapper .bauran-final-cta {
  padding-block: clamp(3rem, 6vw, 5rem);
}

body#index:not(#_) #wrapper .bauran-final-cta__inner {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 992px) {
  body#index:not(#_) #wrapper .bauran-final-cta__content {
    align-items: end;
    display: grid;
    gap: clamp(2rem, 6vw, 7rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* 0.7.85: ficha. Stripe inserta el mensaje de Klarna (#payment-method-messaging-element)
   al principio de la caja de compra, pegado a «Cantidad»; y el bloque de variantes vacio
   reservaba 29 px de hueco encima. */
body#product:not(#_) #wrapper .bauran-product-buybox #payment-method-messaging-element {
  margin: 0 0 1.1rem;
}

body#product:not(#_) #wrapper .product-variants:not(:has(*)) {
  display: none;
}

/* 0.7.87: productos relacionados en la ficha («Completa tu montaje»). Filas
   compactas: foto, nombre, precio y boton de anadir. */
body#product:not(#_) #wrapper .bauran-product-accessories {
  border-top: 1px solid var(--bauran-border);
  padding-block: clamp(2rem, 4vw, 3.25rem);
}

body#product:not(#_) #wrapper .bauran-product-accessories__heading {
  margin-bottom: 1.25rem;
}

body#product:not(#_) #wrapper .bauran-product-accessories__heading h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.15;
  margin: 0.35rem 0 0;
}

body#product:not(#_) #wrapper .bauran-accessory-list {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

body#product:not(#_) #wrapper .bauran-accessory {
  align-items: center;
  background: #fff;
  border: 1px solid var(--bauran-border);
  border-radius: 8px;
  display: grid;
  gap: 1rem;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  padding: 0.75rem 1rem 0.75rem 0.75rem;
}

body#product:not(#_) #wrapper .bauran-accessory__media {
  aspect-ratio: 1;
  background: #f4f5f6;
  border-radius: 6px;
  display: block;
  overflow: hidden;
}

body#product:not(#_) #wrapper .bauran-accessory__media img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

body#product:not(#_) #wrapper .bauran-accessory__name {
  color: #0d0f12;
  display: block;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

body#product:not(#_) #wrapper .bauran-accessory__name:hover,
body#product:not(#_) #wrapper .bauran-accessory__name:focus-visible {
  text-decoration: underline;
}

body#product:not(#_) #wrapper .bauran-accessory__price {
  color: #2b3036;
  margin: 0.25rem 0 0;
}

body#product:not(#_) #wrapper .bauran-accessory__add {
  background: #0d0f12;
  border: 1px solid #0d0f12;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  min-height: 44px;
  padding: 0 1rem;
  text-transform: uppercase;
}

body#product:not(#_) #wrapper .bauran-accessory__add:hover,
body#product:not(#_) #wrapper .bauran-accessory__add:focus-visible {
  background: var(--bauran-accent-ink);
  border-color: var(--bauran-accent-ink);
}

/* 0.7.87: portada con el rodaje real. Dos secciones de producto (FILO DUO con
   video, bandeja con mosaico de fotos del embalse) y franja de confianza. */
:is(body#index, body#product):not(#_) #wrapper .bauran-feature {
  padding-block: clamp(3rem, 7vw, 6rem);
}

:is(body#index, body#product):not(#_) #wrapper .bauran-feature--filo {
  background: #0d0f12;
  color: #fff;
}

:is(body#index, body#product):not(#_) #wrapper .bauran-feature__grid {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 992px) {
  :is(body#index, body#product):not(#_) #wrapper .bauran-feature--filo .bauran-feature__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }

  :is(body#index, body#product):not(#_) #wrapper .bauran-feature--bandeja .bauran-feature__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

:is(body#index, body#product):not(#_) #wrapper .bauran-feature__media {
  margin: 0;
}

:is(body#index, body#product):not(#_) #wrapper .bauran-feature__video {
  aspect-ratio: 4 / 5;
  background: #1a1d21;
  border-radius: 10px;
  display: block;
  height: auto;
  max-height: 80svh;
  margin-inline: auto;
  object-fit: cover;
  width: 100%;
}

:is(body#index, body#product):not(#_) #wrapper .bauran-feature__copy h2 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.02;
  margin: 0.6rem 0 1.5rem;
}

:is(body#index, body#product):not(#_) #wrapper .bauran-feature--filo .bauran-feature__copy h2 {
  color: #fff;
}

:is(body#index, body#product):not(#_) #wrapper .bauran-feature--filo .bauran-eyebrow {
  color: var(--bauran-accent-on-dark);
}

:is(body#index, body#product):not(#_) #wrapper .bauran-feature__steps {
  counter-reset: none;
  display: grid;
  gap: 0.9rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

:is(body#index, body#product):not(#_) #wrapper .bauran-feature__steps li {
  align-items: center;
  display: grid;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  gap: 1rem;
  grid-template-columns: 2.6rem minmax(0, 1fr);
}

:is(body#index, body#product):not(#_) #wrapper .bauran-feature__steps b {
  align-items: center;
  background: var(--bauran-accent);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-size: 1.05rem;
  height: 2.6rem;
  justify-content: center;
  width: 2.6rem;
}

:is(body#index, body#product):not(#_) #wrapper .bauran-feature__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}

:is(body#index, body#product):not(#_) #wrapper .bauran-feature__facts li {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  font-size: 0.85rem;
  padding: 0.4rem 0.85rem;
}

:is(body#index, body#product):not(#_) #wrapper .bauran-feature__points {
  display: grid;
  gap: 0.85rem;
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}

:is(body#index, body#product):not(#_) #wrapper .bauran-feature__points li {
  border-left: 3px solid var(--bauran-accent);
  color: #2b3036;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.45;
  padding-left: 0.9rem;
}

:is(body#index, body#product):not(#_) #wrapper .bauran-feature__buy {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

:is(body#index, body#product):not(#_) #wrapper .bauran-feature__price {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0;
}

:is(body#index, body#product):not(#_) #wrapper .bauran-feature--filo .bauran-button--ink {
  background: #fff;
  border-color: #fff;
  color: #0d0f12;
}

:is(body#index, body#product):not(#_) #wrapper .bauran-feature__mosaic {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

:is(body#index, body#product):not(#_) #wrapper .bauran-feature__tile {
  border-radius: 10px;
  margin: 0;
  overflow: hidden;
}

:is(body#index, body#product):not(#_) #wrapper .bauran-feature__tile img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

:is(body#index, body#product):not(#_) #wrapper .bauran-feature__tile--main {
  aspect-ratio: 16 / 9;
  grid-column: 1 / -1;
}

:is(body#index, body#product):not(#_) #wrapper .bauran-feature__tile:not(.bauran-feature__tile--main) {
  aspect-ratio: 4 / 5;
}

body#index:not(#_) #wrapper .bauran-trust {
  border-block: 1px solid var(--bauran-border);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
}

body#index:not(#_) #wrapper .bauran-trust__list {
  display: grid;
  gap: 1.25rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  list-style: none;
  margin-block: 0;
}

body#index:not(#_) #wrapper .bauran-trust__list li {
  display: grid;
  gap: 0.2rem;
}

body#index:not(#_) #wrapper .bauran-trust__list b {
  color: var(--bauran-accent-ink);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body#index:not(#_) #wrapper .bauran-trust__list span {
  color: #2b3036;
}

:is(body#index, body#product):not(#_) #wrapper .bauran-feature--bandeja .bauran-feature__copy h2,
:is(body#index, body#product):not(#_) #wrapper .bauran-feature--bandeja .bauran-feature__price {
  color: #0d0f12;
}

:is(body#index, body#product):not(#_) #wrapper .bauran-feature--filo .bauran-feature__price,
:is(body#index, body#product):not(#_) #wrapper .bauran-feature--filo .bauran-feature__steps span {
  color: #fff;
}

/* 0.7.90: cesta vacia en espanol, con enlace de vuelta a los productos. */
body#cart:not(#_) #wrapper .cart-overview .no-items {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
}

body#cart:not(#_) #wrapper .bauran-cart-empty__link {
  display: inline-flex;
  gap: 0.4rem;
  min-height: 44px;
  align-items: center;
}

/* 0.7.91: aviso del regalo de preventa (dosificador con FILO DUO), encima del
   boton de la ficha, en la tarjeta y en la seccion del video. Verde de marca
   sobre blanco: nada de crema. */
body:not(#_) #wrapper .bauran-gift {
  align-items: flex-start;
  background: rgba(2, 159, 87, 0.08);
  border: 1px solid var(--bauran-accent);
  border-radius: 10px;
  display: flex;
  gap: 0.75rem;
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
}

body:not(#_) #wrapper .bauran-gift__tag {
  background: var(--bauran-accent);
  border-radius: 999px;
  color: #fff;
  flex: none;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 0.4rem 0.65rem;
  text-transform: uppercase;
}

body:not(#_) #wrapper .bauran-gift__text {
  color: #0d0f12;
  font-size: 0.95rem;
  line-height: 1.4;
  margin: 0;
}

body:not(#_) #wrapper .bauran-gift__text strong {
  color: var(--bauran-accent-ink);
}

body:not(#_) #wrapper .bauran-product-card__gift {
  color: var(--bauran-accent-ink);
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0.2rem 0 0.35rem;
}

body:not(#_) #wrapper .bauran-feature__gift {
  color: var(--bauran-accent-ink);
  font-weight: 700;
  margin: 0 0 1.25rem;
}

body:not(#_) #wrapper .bauran-feature--filo .bauran-feature__gift {
  color: var(--bauran-accent-on-dark);
}

/* 0.7.92: boletin en el pie. Usa el widget de ps_emailsubscription (que
   procesa el alta) con el texto y el aspecto de BAURAN: el titulo del modulo
   se oculta y el boton pasa a ser «Apuntarme». */
body:not(#_) .bauran-newsletter {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

body:not(#_) .bauran-newsletter__inner {
  align-items: center;
  display: grid;
  gap: 1.25rem 3rem;
  grid-template-columns: minmax(0, 1fr);
  margin-inline: auto;
  max-width: var(--bauran-max);
  padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 4.5rem);
}

@media (min-width: 900px) {
  body:not(#_) .bauran-newsletter__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

body:not(#_) .bauran-newsletter__copy h2 {
  color: #fff;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.15;
  margin: 0 0 0.5rem;
}

body:not(#_) .bauran-newsletter__copy p {
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
  margin: 0;
}

body:not(#_) .bauran-newsletter .block_newsletter {
  background: none;
  margin: 0;
  opacity: 1;
  padding: 0;
  transform: none;
}

body:not(#_) .bauran-newsletter .block_newsletter .row {
  display: block;
  margin: 0;
}

body:not(#_) .bauran-newsletter #block-newsletter-label,
body:not(#_) .bauran-newsletter .block_newsletter .clearfix,
body:not(#_) .bauran-newsletter .newsletter-button .material-icons {
  display: none;
}

body:not(#_) .bauran-newsletter .block_newsletter [class*="col-"] {
  flex: none;
  max-width: 100%;
  padding: 0;
  width: 100%;
}

body:not(#_) .bauran-newsletter .block_newsletter form .row > .col-xs-12:first-child {
  display: flex;
  gap: 0.5rem;
}

body:not(#_) .bauran-newsletter .input-wrapper {
  flex: 1;
  order: 1;
  overflow: visible;
}

body:not(#_) .bauran-newsletter .input-wrapper input {
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  color: #0d0f12;
  font-size: 16px;
  min-height: 48px;
  padding: 0 0.9rem;
  width: 100%;
}

body:not(#_) .bauran-newsletter .newsletter-button {
  background: var(--bauran-accent);
  border: 0;
  border-radius: 6px;
  color: #fff;
  flex: none;
  float: none;
  font-weight: 700;
  height: auto;
  min-height: 48px;
  order: 2;
  padding: 0 1.25rem;
  white-space: nowrap;
  width: auto;
}

body:not(#_) .bauran-newsletter .newsletter-button::after {
  content: "Apuntarme";
}

body:not(#_) .bauran-newsletter .conditions,
body:not(#_) .bauran-newsletter .wishlist-toast {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.82rem;
  margin: 0.6rem 0 0;
  position: static;
}

/* 0.7.93: aviso al anadir a la cesta y boton sin restos dorados.

   En el movil, al tocar "Anadir a la cesta" el boton pasaba a gris claro
   (#eceeef, estado desactivado mientras PrestaShop anade) y despues a dorado
   (#e2c45f, hover de la 0.6.0, que en pantallas tactiles se queda pegado
   tras el toque). El titular lo describio como "blanco y luego amarillo",
   sin ninguna confirmacion. Ahora el boton se queda negro con un indicador
   de carga, el hover solo existe donde hay raton y el aviso confirma. */
body#product .bauran-product-info .add-to-cart:hover,
body#product .bauran-product-info .add-to-cart:focus-visible,
body#product .bauran-product-info .bauran-add-to-cart:hover,
body#product .bauran-product-info .bauran-add-to-cart:focus-visible {
  background: #0d0f12;
  border-color: #0d0f12;
  color: #fff;
}

@media (hover: hover) {
  body#product .bauran-product-info .add-to-cart:hover,
  body#product .bauran-product-info .bauran-add-to-cart:hover {
    background: #0a7a44;
    border-color: #0a7a44;
  }
}

body:not(#_) [data-button-action="add-to-cart"].is-adding,
body:not(#_) [data-button-action="add-to-cart"].is-adding:disabled {
  background: #0d0f12;
  border-color: #0d0f12;
  color: #fff;
  cursor: progress;
  opacity: 1;
}

body:not(#_) [data-button-action="add-to-cart"].is-adding > span[aria-hidden="true"] {
  animation: bauran-cart-spin 700ms linear infinite;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  font-size: 0;
  height: 18px;
  transform: none;
  width: 18px;
}

@keyframes bauran-cart-spin {
  to { transform: rotate(360deg); }
}

/* Contador de la cesta en la cabecera. */
#header .bauran-header__cart {
  align-items: center;
  display: inline-flex;
  gap: 0.4rem;
}

#header .bauran-cart-count {
  align-items: center;
  background: #029f57;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 800;
  height: 18px;
  justify-content: center;
  line-height: 1;
  min-width: 18px;
  padding: 0 5px;
}

#header .bauran-cart-count[hidden] {
  display: none;
}

#header .bauran-mobile-cart > .bauran-cart-count {
  position: absolute;
  right: 3px;
  top: 5px;
}

/* Aviso "Anadido a tu cesta": hoja inferior en el movil, tarjeta arriba a
   la derecha en escritorio. Por debajo del aviso de cookies (z-index del
   modulo: 2147483000) para no taparlo. */
.bauran-cart-notice {
  bottom: 0;
  left: 0;
  opacity: 0;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom));
  pointer-events: none;
  position: fixed;
  right: 0;
  transform: translateY(16px);
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 2147482000;
}

.bauran-cart-notice.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.bauran-cart-notice__inner {
  background: #fff;
  border: 1px solid rgba(13, 15, 18, 0.12);
  border-left: 4px solid #029f57;
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(13, 15, 18, 0.22);
  color: #0d0f12;
  margin: 0 auto;
  max-width: 420px;
  padding: 16px 16px 14px;
}

.bauran-cart-notice.is-error .bauran-cart-notice__inner {
  border-left-color: #b42318;
}

.bauran-cart-notice__title {
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 4px;
}

.bauran-cart-notice__item,
.bauran-cart-notice__gift {
  color: #3a4048;
  font-size: 0.9rem;
  margin: 0 0 2px;
}

.bauran-cart-notice__gift {
  color: #0a7a44;
  font-weight: 700;
}

.bauran-cart-notice__actions {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr auto;
  margin-top: 12px;
}

.bauran-cart-notice__go,
.bauran-cart-notice__close {
  align-items: center;
  border-radius: 6px;
  display: inline-flex;
  font-size: 0.92rem;
  font-weight: 800;
  justify-content: center;
  min-height: 48px;
  padding: 0 16px;
}

.bauran-cart-notice__go {
  background: #029f57;
  color: #fff;
  text-decoration: none;
}

.bauran-cart-notice__go:hover,
.bauran-cart-notice__go:focus-visible {
  background: #0a7a44;
  color: #fff;
}

.bauran-cart-notice__close {
  background: #fff;
  border: 1px solid rgba(13, 15, 18, 0.2);
  color: #0d0f12;
  cursor: pointer;
}

.bauran-cart-notice__go:focus-visible,
.bauran-cart-notice__close:focus-visible {
  outline: 2px solid #0a7a44;
  outline-offset: 2px;
}

.bauran-cart-notice [hidden] {
  display: none;
}

@media (min-width: 768px) {
  .bauran-cart-notice {
    bottom: auto;
    left: auto;
    padding: 0;
    right: 24px;
    top: 96px;
    transform: translateY(-12px);
    width: 380px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bauran-cart-notice {
    transition: none;
  }

  body:not(#_) [data-button-action="add-to-cart"].is-adding > span[aria-hidden="true"] {
    animation: none;
  }
}

/* 0.7.94: coste del envio bajo el precio y barra de compra fija en movil. */
body#product .bauran-product-shipping {
  color: #3a4048;
  font-size: 0.92rem;
  line-height: 1.45;
  margin: 0.35rem 0 0.9rem;
}

body#product .bauran-product-shipping strong {
  color: #0d0f12;
}

body#product .bauran-product-shipping a {
  color: #0a7a44;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bauran-sticky-buy {
  align-items: center;
  background: #fff;
  border-top: 1px solid rgba(13, 15, 18, 0.12);
  bottom: 0;
  box-shadow: 0 -10px 30px rgba(13, 15, 18, 0.12);
  display: flex;
  gap: 12px;
  left: 0;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  position: fixed;
  right: 0;
  z-index: 2147481000;
}

.bauran-sticky-buy[hidden] {
  display: none;
}

.bauran-sticky-buy__info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.bauran-sticky-buy__name {
  color: #3a4048;
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bauran-sticky-buy__price {
  color: #0d0f12;
  font-size: 1.05rem;
  font-weight: 800;
}

.bauran-sticky-buy__button {
  background: #0d0f12;
  border: 0;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  flex: none;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  min-height: 48px;
  padding: 0 18px;
  text-transform: uppercase;
}

.bauran-sticky-buy__button.is-adding {
  cursor: progress;
}

.bauran-sticky-buy__button:focus-visible {
  outline: 2px solid #0a7a44;
  outline-offset: 2px;
}

/* Que la barra no tape el final de la pagina ni el aviso de la cesta. */
body.bauran-has-sticky-buy {
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

body.bauran-has-sticky-buy .bauran-cart-notice {
  bottom: calc(72px + env(safe-area-inset-bottom));
}

@media (min-width: 768px) {
  .bauran-sticky-buy {
    display: none;
  }
}

/* --- 0.7.96: subtitulo bajo el nombre y categoria enlazada ------------- */
/* La cabecera es flex con salto: sin el 100 % el subtitulo se pondria al
   lado del nombre. Sin margen arriba para que lea como parte del titulo. */
body#product:not(#_) #wrapper .bauran-product-info .product-heading > .bauran-product-subtitle {
  color: var(--bauran-muted);
  flex: 0 0 100%;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  margin: .25rem 0 0;
}

body#product:not(#_) #wrapper .bauran-product-info .product-heading .bauran-eyebrow a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--bauran-line);
  text-underline-offset: .2em;
}

@media (hover: hover) {
  body#product:not(#_) #wrapper .bauran-product-info .product-heading .bauran-eyebrow a:hover {
    color: #0a7a44;
    text-decoration-color: currentColor;
  }
}