/* ==========================================================================
   HEADER — La Casa del Pintor
   Plantilla Bricks «Header» (13276). Rejillas, espaciados y colores están en
   Bricks; aquí solo lo que depende de un estado o no cabe en sus ajustes:
     1. Iconos y contadores
     2. Header fijo al hacer scroll (clase body.cdp-hdr-fijo, la pone el JS)
     3. Menú móvil (offcanvas #menu-movil + [cdp_menu_movil])
     4. Panel de resultados de FiboSearch
     5. Archivos: el panel de filtros (#filtros) empuja la página
     6. Cabecera del carrito lateral (CheckoutWC)
     7. Escritorio: buscador centrado y avisos de la fila del menú
   Clases que se ponen en Bricks: cdp-hdr-main, cdp-hdr-buscador,
   cdp-hdr-icon, cdp-hdr-icon--nombre, cdp-hdr-info, cdp-hdr-label,
   cdp-hdr-nav, cdp-hdr-aviso, cdp-hdr-aviso--newsletter,
   cdp-hdr-isotipo, cdp-hdr-acciones,
   cdp-mmov-body, cdp-mmov-root, cdp-mmov__simple, cdp-mmov__util,
   cdp-mmov__util-link (el resto del menú móvil lo pinta [cdp_menu_movil]).
   ========================================================================== */

/* 1. ICONOS Y CONTADORES ------------------------------------------------- */

/* Cuenta, favoritos y carrito: área táctil de 40 px. El carrito es un
   <button> (abre el sidecart de CheckoutWC), así que se le quita el estilo
   de botón. */
#brx-header .cdp-hdr-icon {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-s, 5px);
  background: none;
  font: inherit;
  color: var(--bricks-color-azul);
  cursor: pointer;
}
#brx-header .cdp-hdr-icon:focus-visible {
  outline: 2px solid var(--bricks-color-azul);
  outline-offset: 2px;
}

/* El contador del carrito es el de CheckoutWC ([checkoutwc_cart]): icono y
   número los pinta su React. Aquí solo se le da el aspecto de píldora de
   .cdp-hdr-badge, colocada respecto al botón (el wrap pasa a static). Con el
   carrito vacío lo oculta CheckoutWC con .cfw-hidden.
   Su icono SVG no es de la familia de los demás: se oculta y en su lugar va
   el elemento Icono de Bricks ti-bag (crtic1, crtic2), como cuenta y favoritos. */
#brx-header .cdp-cart-trigger .cfw-side-cart-quantity-wrap { position: static; }
#brx-header .cdp-cart-trigger .cfw-side-cart-quantity-wrap svg { display: none; }
/* El shortcode, fuera del flujo y del tamaño del botón: si no, con el
   flex-wrap de Bricks baja a otra línea y empuja el icono hacia arriba. */
#brx-header .cdp-cart-trigger > .brxe-shortcode {
  position: absolute;
  inset: 0;
}

.cdp-hdr-badge,
#brx-header .cdp-cart-trigger .cfw-side-cart-quantity {
  position: absolute;
  top: 0;
  right: -4px;
  box-sizing: border-box;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid var(--bricks-color-white);
  border-radius: 999px;
  background: var(--bricks-color-azul);
  color: var(--bricks-color-white);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}
#brx-header .cdp-cart-trigger .cfw-side-cart-quantity {
  font-family: inherit !important; /* CheckoutWC fija la del sistema con !important */
  letter-spacing: 0;
}
.cdp-hdr-badge[data-count="0"] { display: none; }

/* Iconos con su nombre debajo (cdp-hdr-icon--nombre): Tiendas, ¿Dudas?,
   Mi cuenta, Favoritos y Carrito de la fila principal, en tablet y
   escritorio. En móvil y en la barra fija van solo los iconos. Tiendas,
   ¿Dudas? y el separador (cdp-hdr-info) no salen en móvil: están en el menú. */
.cdp-hdr-label {
  font-size: var(--text-xs);
  line-height: 1.2;
  color: var(--bricks-color-azul);
  white-space: nowrap;
}
@media (min-width: 768px) {
  #brx-header .cdp-hdr-icon--nombre {
    flex-direction: column;
    row-gap: 2px;
    width: auto;
    min-width: 60px;
    height: auto;
    padding: 2px 6px;
  }
  /* Contadores sobre la esquina del icono, no del bloque con nombre. */
  #brx-header .cdp-hdr-icon--nombre .cdp-hdr-badge,
  #brx-header .cdp-hdr-icon--nombre.cdp-cart-trigger .cfw-side-cart-quantity {
    top: -2px;
    right: calc(50% - 24px);
  }
}
@media (max-width: 767px) {
  #brx-header .cdp-hdr-info,
  #brx-header .cdp-hdr-label { display: none; }
}

/* 2. HEADER FIJO --------------------------------------------------------- */

/* Sombra bajo el header, la misma que la de la fila fija: sin barra lila, las
   páginas que empiezan en blanco se mezclaban con él (2026-10-30). Va en un
   pseudoelemento con z-index propio para quedar sobre el contenido aunque
   tenga fondo. No se le pone z-index al #brx-header: crearía un contexto de
   apilamiento y el menú móvil y los megamenús quedarían por debajo de la
   burbuja de contacto. */
#brx-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
  pointer-events: none;
}

/* Elementos que solo se ven con el header fijo. */
#brx-header .cdp-hdr-isotipo,
#brx-header .cdp-hdr-acciones { display: none; }

@keyframes cdp-hdr-entra {
  from { transform: translateY(-100%); }
  to   { transform: none; }
}

/* Escritorio y tablet: se fija la fila de navegación, con el isotipo a la
   izquierda y la lupa, Mi cuenta, Favoritos y el carrito a la derecha. Las
   columnas (1fr auto 1fr) ya están en Bricks. */
@media (min-width: 768px) {
  body.cdp-hdr-fijo #brx-header .cdp-hdr-nav {
    position: fixed;
    top: var(--wp-admin--admin-bar--height, 0px);
    left: 0;
    right: 0;
    z-index: 990;
    display: grid;
    padding-top: var(--space-2xs);
    padding-bottom: var(--space-2xs);
    border-top: 0;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
    animation: cdp-hdr-entra .25s ease-out;
  }
  body.cdp-hdr-fijo #brx-header .cdp-hdr-isotipo {
    display: block;
    justify-self: start;
  }
  body.cdp-hdr-fijo #brx-header .cdp-hdr-acciones {
    display: flex;
    justify-self: end;
  }
}

/* Móvil: se fija la fila principal (☰, logo, lupa e iconos). Mide lo mismo
   que sin fijar: el logo (9rem) y el relleno (2xs) ya son esos en Bricks. */
@media (max-width: 767px) {
  body.cdp-hdr-fijo #brx-header .cdp-hdr-main {
    position: fixed;
    top: var(--wp-admin--admin-bar--height, 0px);
    left: 0;
    right: 0;
    z-index: 990;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
    animation: cdp-hdr-entra .25s ease-out;
  }
}
/* Con el header fijo, los avisos de la fila del menú dejan su sitio al
   isotipo y a los iconos (mismas columnas). Entre 992 y 1199 px, con
   columnas simétricas los iconos (172 px) no caben a la derecha y la lupa
   pisa el menú: el menú ocupa el hueco central, como en tablet (Bricks). */
body.cdp-hdr-fijo #brx-header .cdp-hdr-aviso { display: none; }
@media (min-width: 992px) and (max-width: 1199px) {
  body.cdp-hdr-fijo #brx-header .cdp-hdr-nav { grid-template-columns: auto minmax(0, 1fr) auto; }
}

/* Por debajo de 600 px la barra de administración de WordPress no es fija. */
@media (max-width: 600px) {
  body.cdp-hdr-fijo #brx-header .cdp-hdr-main { top: 0; }
}

/* El megamenú calcula su posición desde el borde inferior del header, que
   con el header fijo queda fuera de la pantalla: se usa el de la fila fija
   (lo calcula el JS). */
body.cdp-hdr-fijo .cdp-mm__panel {
  top: var(--cdp-hdr-fijo-bottom, 0px) !important;
}

/* La lupa de FiboSearch en el color de los iconos. */
#brx-header .cdp-hdr-acciones .dgwt-wcas-ico-magnifier-handler,
#brx-header .cdp-hdr-buscador .dgwt-wcas-ico-magnifier-handler {
  fill: var(--bricks-color-azul);
}

/* Buscador en tablet y escritorio: borde de 1 px. El estilo «pirx-compact»
   de FiboSearch pone 2 px más una sombra de 1 px (un anillo de 3 px). Relleno
   de 9 px: la barra mide 36 px (antes 54; el header se rebajó el 2026-10-30). */
@media (min-width: 768px) {
  /* Aquí siempre es barra: visible desde el primer pintado (FiboSearch la
     deja con opacity 0 hasta que carga su JS). */
  #brx-header .cdp-hdr-buscador .dgwt-wcas-layout-icon-flexible .dgwt-wcas-search-form { opacity: 1; }
  html:not(.dgwt-wcas-overlay-mobile-on) #brx-header .cdp-hdr-buscador .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
    padding-top: 9px;
    padding-bottom: 9px;
    border: 1px solid var(--bricks-color-grey-300);
    box-shadow: none;
  }
  html:not(.dgwt-wcas-overlay-mobile-on) #brx-header .cdp-hdr-buscador .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:hover {
    border-color: var(--bricks-color-grey-500);
  }
  html:not(.dgwt-wcas-overlay-mobile-on) #brx-header .cdp-hdr-buscador .dgwt-wcas-search-focused .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input,
  html:not(.dgwt-wcas-overlay-mobile-on) #brx-header .cdp-hdr-buscador .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:focus {
    border-color: var(--bricks-color-azul);
    box-shadow: none;
  }
}

/* Buscador en móvil: FiboSearch está configurado con el layout «Icon on
   mobile, search bar on desktop» y breakpoint 767 (Ajustes de FiboSearch),
   así que aquí es una lupa que abre el buscador a pantalla completa. Se le
   da el mismo área táctil que a los otros iconos. */
@media (max-width: 767px) {
  /* Hasta que carga su JS, FiboSearch deja el formulario invisible pero
     ocupando sitio: la fila crecía y luego se recolocaba. Fuera desde el
     primer pintado, salvo con el buscador abierto o en pantalla completa. */
  html:not(.dgwt-wcas-overlay-mobile-on) #brx-header .cdp-hdr-buscador .dgwt-wcas-layout-icon-flexible:not(.dgwt-wcas-layout-icon-open) .dgwt-wcas-search-form {
    display: none;
  }
  /* En modo icono FiboSearch limita su contenedor a 20 px. */
  #brx-header .cdp-hdr-buscador .dgwt-wcas-search-wrapp {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
  }
  #brx-header .cdp-hdr-buscador .dgwt-wcas-search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
  }
  #brx-header .cdp-hdr-buscador .dgwt-wcas-ico-magnifier-handler {
    width: 22px;
    height: 22px;
    max-width: none;
  }
}

/* 3. MENÚ MÓVIL POR NIVELES --------------------------------------------- */

/* Por encima del header fijo y de la burbuja de contacto (z-index 9990). */
#menu-movil .brx-offcanvas-inner { z-index: 10001; }
#menu-movil.brx-open .brx-offcanvas-backdrop { z-index: 10000; }

/* El cuerpo del offcanvas no se desplaza: lo hace cada panel. Así los
   paneles de subcategorías (absolutos sobre .cdp-mmov-body) tapan todo,
   también los enlaces de Bricks que van debajo del shortcode. */
/* Los bloques de Bricks llevan flex-wrap: wrap; en una columna de alto fijo
   eso manda a otra columna lo que no cabe, en lugar de desplazarse. */
#menu-movil .brx-offcanvas-inner,
.cdp-mmov-root { flex-wrap: nowrap; }

.cdp-mmov-body {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}
.cdp-mmov-root {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cdp-mmov-root > * { flex-shrink: 0; }
.brxe-shortcode:has(> .cdp-mmov) {
  position: static;
  width: 100%;
}

.cdp-mmov__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cdp-mmov__list > li {
  margin: 0;
  border-bottom: 1px solid var(--bricks-color-grey-300);
}

.cdp-mmov__link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 12px 20px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  color: var(--bricks-color-grey-900);
  cursor: pointer;
}
.cdp-mmov__link:hover,
.cdp-mmov__link:focus-visible {
  background: var(--bricks-color-grey-100);
  color: var(--bricks-color-azul);
}
.cdp-mmov__link--all {
  font-weight: 700;
  color: var(--bricks-color-azul);
}
/* Flechas: glifos de Themify, como los megamenús de escritorio (2026-10-30). */
.cdp-mmov__arw,
.cdp-mmov__chev,
.cdp-mmv__tool-arw {
  flex: 0 0 auto;
  font-family: "themify";
  font-size: 13px;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
}
.cdp-mmov__arw { margin-left: auto; }
.cdp-mmov__arw::before,
.cdp-mmv__tool-arw::before { content: "\e649"; } /* ti-angle-right */
.cdp-mmov__chev::before { content: "\e64a"; }   /* ti-angle-left */

.cdp-mmov__panel {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bricks-color-white);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .25s ease, visibility 0s linear .25s;
}
.cdp-mmov__panel.is-open {
  transform: none;
  visibility: visible;
  transition: transform .25s ease, visibility 0s;
}

.cdp-mmov__back {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 12px 20px;
  border: 0;
  border-bottom: 1px solid var(--bricks-color-grey-300);
  background: var(--bricks-color-grey-100);
  font-family: "Titillium Web", sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  text-transform: uppercase;
  color: var(--bricks-color-azul);
  cursor: pointer;
}

/* Título «Productos», como los del megamenú. */
.cdp-mmov__titulo {
  margin: 0;
  padding: 20px 20px 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--bricks-color-grey-700);
}
.cdp-mmov .cdp-mmov__list--raiz { border-top: 1px solid var(--bricks-color-grey-300); }

/* Enlaces simples (Tiendas, Blog…): menú de WordPress «Menú móvil · enlaces»,
   pintado con el elemento Nav Menu de Bricks. Se añaden en Apariencia › Menús. */
.cdp-mmov__simple {
  width: 100%;
  border-top: 8px solid var(--bricks-color-grey-100);
}
.cdp-mmov__simple .bricks-nav-menu {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
}
.cdp-mmov__simple .bricks-nav-menu > li {
  margin: 0;
  border-bottom: 1px solid var(--bricks-color-grey-300);
}
.cdp-mmov__simple .bricks-nav-menu > li > a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 500;
  color: var(--bricks-color-grey-800);
  text-decoration: none;
}
.cdp-mmov__simple .bricks-nav-menu > li > a:hover,
.cdp-mmov__simple .bricks-nav-menu > li > a:focus-visible {
  background: var(--bricks-color-grey-100);
  color: var(--bricks-color-azul);
}

/* Pie fijo del menú: Mi cuenta, Favoritos y ¿Dudas? con el icono encima. */
.cdp-mmov__util {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  border-top: 1px solid var(--bricks-color-grey-300);
  background: var(--bricks-color-grey-100);
}
.cdp-mmov__util > .cdp-mmov__util-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 64px;
  padding: 10px 4px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: var(--bricks-color-azul);
}
.cdp-mmov__util > .cdp-mmov__util-link + .cdp-mmov__util-link {
  border-left: 1px solid var(--bricks-color-grey-300);
}
.cdp-mmov__util > .cdp-mmov__util-link:hover,
.cdp-mmov__util > .cdp-mmov__util-link:focus-visible {
  background: var(--bricks-color-white);
}

/* Promo de la newsletter (2026-11-02): sustituye a la barra lila de móvil y lleva
   a /#newsletter (el formulario está en la home). Franja azul fija encima del pie
   del menú (mnnlc0), elegida por el usuario entre tres; siempre a la vista con el
   menú abierto. El texto corre seguido y, si no cabe en el panel (343 px), pasa a
   una segunda línea; la flecha, centrada a la derecha. */
#menu-movil .cdp-mmov__promo {
  display: block;
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  min-height: 46px;
  padding: 11px 40px 11px 16px;
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none;
  color: var(--bricks-color-white);
  background: var(--bricks-color-azul);
}
#menu-movil .cdp-mmov__promo:hover,
#menu-movil .cdp-mmov__promo:focus-visible {
  background: var(--bricks-color-azul-d-3, #1c2757);
}
#menu-movil .cdp-mmov__promo::after {
  content: "\e649"; /* ti-angle-right, como el resto de flechas del menú */
  position: absolute;
  top: 50%;
  right: 16px;
  font-family: "themify";
  font-size: 13px;
  font-weight: normal;
  line-height: 1;
  transform: translateY(-50%);
}
#menu-movil .cdp-mmov__promo-icono {
  display: inline-block;
  margin-right: 6px;
  font-size: 15px;
  vertical-align: -2px;
}
#menu-movil .cdp-mmov__promo-fuerte {
  margin-right: .3em; /* Bricks pinta los dos textos sin espacio entre ellos */
  font-weight: 700;
}
#menu-movil .cdp-mmov__promo-txt {
  font-weight: 500;
}

/* El formulario de la newsletter (home), sin quedar bajo el header fijo al llegar por el ancla. */
#newsletter {
  scroll-margin-top: 69px;
}

/* Primer nivel de [cdp_menu_movil] (2026-10-30): herramientas, «¿Qué quieres
   pintar?», Packs/Ofertas/Marcas y categorías con foto; y el paso de «¿Qué
   quieres pintar?», con pestañas. */
.cdp-mmv { width: 100%; }

/* Herramientas: el asistente y «Diseña tu pintura» */
.cdp-mmv__tool {
  position: relative;
  display: flex;
  text-decoration: none;
}
.cdp-mmv__tool-ico {
  flex: 0 0 auto;
  font-size: 22px;
  line-height: 1;
}
.cdp-mmv__tool-ico--rueda {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: conic-gradient(#e3343f, #f1832a, #f2c12e, #bfcf16, #22b1d3, #1592d3, #6c4bb4, #e3343f);
}
.cdp-mmv__tool-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cdp-mmv__tool-eyebrow {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.cdp-mmv__tool-title {
  font-family: "Titillium Web", sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
}

/* Dos tarjetas arriba: el asistente en azul y «Diseña tu pintura» en blanco */
.cdp-mmv__tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 16px 20px 16px;
}
.cdp-mmv__tools .cdp-mmv__tool {
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-height: 104px;
  padding: 14px;
  border: 1px solid var(--bricks-color-grey-300);
  border-radius: var(--radius-s, 5px);
}
.cdp-mmv__tools .cdp-mmv__tool-arw { position: absolute; top: 20px; right: 16px; }
.cdp-mmv__tools .cdp-mmv__tool--asistente {
  border-color: var(--bricks-color-azul);
  background: var(--bricks-color-azul);
  color: var(--bricks-color-white);
}
.cdp-mmv__tools .cdp-mmv__tool--asistente .cdp-mmv__tool-eyebrow { color: var(--bricks-color-violeta); }
.cdp-mmv__tools .cdp-mmv__tool--medida {
  background: var(--bricks-color-white);
  color: var(--bricks-color-azul);
}
.cdp-mmv__tools .cdp-mmv__tool--medida .cdp-mmv__tool-eyebrow { color: var(--bricks-color-grey-700); }
.cdp-mmv__tools .cdp-mmv__tool--medida:hover,
.cdp-mmv__tools .cdp-mmv__tool--medida:focus-visible { border-color: var(--bricks-color-azul); }

/* Filas que abren un paso, con foto pequeña */
.cdp-mmv__puerta-txt { flex: 1 1 auto; min-width: 0; }
.cdp-mmv__mini {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: var(--radius-s, 5px);
  background: var(--bricks-color-grey-100);
}
.cdp-mmv__mini-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cdp-mmv__mini--cat .cdp-mmv__mini-img {
  padding: 3px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* «¿Qué quieres pintar?»: la puerta a su paso */
.cdp-mmv__puertas { width: 100%; border-top: 1px solid var(--bricks-color-grey-300); }
.cdp-mmv__puertas > .cdp-mmv__puerta {
  min-height: 72px;
  border-bottom: 1px solid var(--bricks-color-grey-300);
  font-family: "Titillium Web", sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--bricks-color-azul);
}
.cdp-mmv__puertas .cdp-mmv__mini { width: 48px; height: 48px; }

/* Packs, Ofertas y Marcas, en pequeño */
.cdp-mmv__pills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  padding: 16px 20px 4px;
}
.cdp-mmv__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 8px;
  border: 1px solid var(--bricks-color-violeta);
  border-radius: var(--radius-s, 5px);
  background: var(--bricks-color-white);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--bricks-color-azul);
}
.cdp-mmv__pill:hover,
.cdp-mmv__pill:focus-visible {
  border-color: var(--bricks-color-azul);
  background: var(--bricks-color-violeta-suave);
}

/* El paso «¿Qué quieres pintar?» */
.cdp-mmv__tabs {
  position: sticky;
  top: 52px;
  z-index: 1;
  display: flex;
  gap: 6px;
  padding: 12px 20px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--bricks-color-grey-300);
  background: var(--bricks-color-white);
}
.cdp-mmv__tabs::-webkit-scrollbar { display: none; }
.cdp-mmv__tab {
  flex: 1 0 auto;
  min-height: 36px;
  margin: 0;
  padding: 6px 8px;
  border: 1px solid var(--bricks-color-violeta);
  border-radius: var(--radius-s, 5px);
  background: var(--bricks-color-white);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--bricks-color-grey-900);
  cursor: pointer;
}
.cdp-mmv__tab:hover { border-color: var(--bricks-color-azul); }
@media (max-width: 374px) {
  .cdp-mmv__tabs { gap: 4px; }
  .cdp-mmv__tab { padding: 6px 5px; font-size: 12.5px; }
}
.cdp-mmv__tab[aria-selected="true"] {
  border-color: var(--bricks-color-azul);
  background: var(--bricks-color-violeta-suave);
  color: var(--bricks-color-azul);
}
.cdp-mmv__sec[hidden] { display: none; }
.cdp-mmv__todos { border-top: 1px solid var(--bricks-color-grey-300); }

.cdp-mmv__rejilla { padding: 16px 20px 20px; }

/* Usos: tarjetas con foto, dos por fila */
.cdp-mmv__rejilla--foto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 10px;
}
.cdp-mmv__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  text-decoration: none;
  color: var(--bricks-color-grey-900);
}
.cdp-mmv__card-media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--bricks-color-grey-300);
  border-radius: var(--radius-s, 5px);
  background: var(--bricks-color-grey-100);
}
.cdp-mmv__card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cdp-mmv__card-name {
  font-family: "Titillium Web", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  hyphens: auto;
  overflow-wrap: break-word;
}
/* Tratamientos sin imagen propia: la foto del producto entera, sobre gris (2026-11-04) */
.cdp-mmv__card--producto .cdp-mmv__card-img {
  padding: 8%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.cdp-mmv__card:hover .cdp-mmv__card-media,
.cdp-mmv__card:focus-visible .cdp-mmv__card-media { border-color: var(--bricks-color-azul); }
.cdp-mmv__card:hover .cdp-mmv__card-name { color: var(--bricks-color-naranja); }

/* Colores: círculos como /colores/, cuatro por fila */
.cdp-mmv__rejilla--color {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 8px;
}
.cdp-mmv__color {
  --c: var(--bricks-color-grey-100);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  text-align: center;
  text-decoration: none;
  color: var(--bricks-color-grey-900);
}
.cdp-mmv__color-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--bricks-color-grey-300);
  border-radius: 50%;
  background: var(--c);
}
.cdp-mmv__color-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.cdp-mmv__dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30%;
  aspect-ratio: 1;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(0, 0, 0, .1);
}
.cdp-mmv__color[data-color="transparente"] .cdp-mmv__dot { background: repeating-conic-gradient(#dfe4e9 0 25%, #fff 0 50%) 50% / 6px 6px; }
.cdp-mmv__color[data-color="dorado"] .cdp-mmv__dot { background: linear-gradient(135deg, #f7e7a1 0%, #c9a227 38%, #fff4c2 55%, #a07c18 80%, #e3c55a 100%); }
.cdp-mmv__color-name {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}
.cdp-mmv__color:hover .cdp-mmv__color-media { border-color: var(--bricks-color-azul); }

/* Guías: filas con foto */
.cdp-mmv__rejilla--guia {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cdp-mmv__guia {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--bricks-color-grey-900);
}
.cdp-mmv__guia-media {
  flex: 0 0 64px;
  height: 64px;
  overflow: hidden;
  border: 1px solid var(--bricks-color-grey-300);
  border-radius: var(--radius-s, 5px);
  background: var(--bricks-color-grey-100);
}
.cdp-mmv__guia-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cdp-mmv__guia-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cdp-mmv__guia-name {
  font-family: "Titillium Web", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}
.cdp-mmv__guia-sub { font-size: 12px; color: var(--bricks-color-grey-700); }
.cdp-mmv__guia:hover .cdp-mmv__guia-name { color: var(--bricks-color-naranja); }


/* 4. PANEL DE RESULTADOS DE FIBOSEARCH ----------------------------------- */
/* Toques para que case con la web: títulos como los del megamenú,
   miniaturas más grandes, precios en Titillium como en las tarjetas y
   «Ver todos» como botón. El resaltado de la búsqueda (azul) y el fondo de
   la fila activa (gris claro) están en los ajustes de FiboSearch. El panel
   cuelga de <body>, no del header, de ahí el prefijo body. */

body .dgwt-wcas-has-headings .dgwt-wcas-suggestion-headline .dgwt-wcas-st {
  border-bottom-color: var(--bricks-color-grey-300);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--bricks-color-grey-700);
}

body .dgwt-wcas-suggestion-cat .dgwt-wcas-st { color: var(--bricks-color-grey-900); }

/* Texto que se escribe: FiboSearch lo pinta con el gris claro de su ajuste
   de color (el mismo del placeholder) y en Roboto (estilo pirx). El
   :not(#cdp) gana a sus variantes :hover y :focus. */
body .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:not(#cdp) {
  font-family: inherit;
  color: var(--bricks-color-grey-900);
}

/* Ventana estrecha sin pantalla táctil: FiboSearch abre la barra en la
   cabecera y da 500 px al desplegable, más que la pantalla. En móvil y
   tablet de verdad sale su pantalla completa, que no tiene este problema. */
@media (max-width: 767px) {
  body .dgwt-wcas-suggestions-wrapp { max-width: 100vw; }
}

/* Pantalla completa de móvil y tablet: con menos de 16 px el iPhone amplía
   la página al tocar el campo. */
html.dgwt-wcas-overlay-mobile-on .dgwt-wcas-overlay-mobile .dgwt-wcas-search-input:not(#cdp) {
  font-size: 16px;
}

/* Mi cuenta: Bricks da display:flex y gap:40px a «.woocommerce-account
   .woocommerce» (con un :not(#brx-content), que pesa como un ID). Los dos
   paneles de FiboSearch llevan la clase woocommerce y salían en fila. El
   :not(#cdp) es para ganar en especificidad. Abrir y cerrar no se ve
   afectado: FiboSearch los oculta con display:none en línea. */
body .dgwt-wcas-suggestions-wrapp.woocommerce:not(#cdp),
body .dgwt-wcas-details-wrapp.woocommerce:not(#cdp) {
  display: block;
  gap: normal;
}
body .dgwt-wcas-st-breadcrumbs {
  opacity: 1;
  color: var(--bricks-color-grey-700);
}

/* Productos. La miniatura no encoge: con el panel de detalle la columna mide
   unos 300 px y el título la dejaba en 27 px. */
body .dgwt-wcas-si,
body .dgwt-wcas-is-details .dgwt-wcas-si {
  flex: 0 0 48px;
  width: 48px;
}
body .dgwt-wcas-si img {
  border-color: var(--bricks-color-grey-300);
  border-radius: var(--radius-s, 5px);
}
body .dgwt-wcas-suggestion-product .dgwt-wcas-st-title {
  font-size: 14px;
  line-height: 1.3;
  color: var(--bricks-color-grey-900);
}
body .dgwt-wcas-suggestion-product .dgwt-wcas-sku {
  font-size: 12px;
  color: var(--bricks-color-grey-700);
}

/* Precio: «Desde X» como en las tarjetas (filtro en inc/header.php). */
body .dgwt-wcas-sp,
body .dgwt-wcas-is-details .dgwt-wcas-sp {
  display: block;
  align-self: center;
  font-family: "Titillium Web", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--bricks-color-grey-900);
}
body .dgwt-wcas-has-img .dgwt-wcas-sp > .woocommerce-Price-amount {
  display: inline;
  white-space: nowrap;
}
body .dgwt-wcas-sp .woocommerce-price-suffix {
  display: block;
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  color: var(--bricks-color-grey-700);
}

/* «Ver todos los productos» como los botones de la web (clase cdp-btn):
   Titillium 16 px. Sin los 10 px de relleno que FiboSearch da al texto
   cabe en una línea también en escritorio. Alto de 44 px con el relleno:
   FiboSearch anula el min-height. */
body .dgwt-wcas-suggestion.dgwt-wcas-suggestion-more {
  width: calc(100% - 40px);
  margin: 12px 20px 0;
  padding-top: 12px;
  padding-bottom: 12px;
  border-radius: var(--radius-s, 5px);
  background: var(--bricks-color-azul);
  font-family: "Titillium Web", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  text-transform: none !important; /* FiboSearch lo pone en mayúsculas con 4 clases */
  color: var(--bricks-color-white);
  transition: background-color .2s ease;
}
body .dgwt-wcas-suggestion.dgwt-wcas-suggestion-more:hover,
body .dgwt-wcas-suggestion.dgwt-wcas-suggestion-more.dgwt-wcas-suggestion-selected {
  background: var(--bricks-color-azul-d-3);
}
body .dgwt-wcas-suggestion-more .dgwt-wcas-st-more:not(#cdp) { padding: 0; }

/* Panel de detalle (derecha, en escritorio) */
body .dgwt-wcas-datails-title {
  border-bottom: 1px solid var(--bricks-color-grey-300);
  color: var(--bricks-color-grey-900);
}
body .dgwt-wcas-details-title-tax {
  font-weight: 700;
  letter-spacing: 0;
  color: var(--bricks-color-azul);
}
body .dgwt-wcas-tpd-image {
  border-color: var(--bricks-color-grey-300);
  border-radius: var(--radius-s, 5px);
}
body .dgwt-wcas-tpd-rest-title { color: var(--bricks-color-grey-900); }
/* Nombre del producto como el H1 de la ficha, en pequeño. */
body .dgwt-wcas-details-product-title {
  font-family: "Titillium Web", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--bricks-color-grey-900);
}
body .dgwt-wcas-details-product-sku {
  font-size: 12px;
  color: var(--bricks-color-grey-700);
}
body .dgwt-wcas-tpd-price,
body .dgwt-wcas-pd-price {
  font-family: "Titillium Web", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--bricks-color-grey-900);
}
body .dgwt-wcas-details-hr { border-color: var(--bricks-color-grey-300); }

/* Comprar desde el panel: cantidad como en la ficha (clase cdp-cart--compra)
   y el botón debajo, a todo el ancho; en una fila no caben en la columna
   (246 px). Los +/- y el botón los activa header.js, sección 3. */
body .dgwt-wcas-pd-addtc-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
body .dgwt-wcas-pd-addtc .quantity {
  display: flex;
  align-items: stretch;
  width: auto;
  height: 44px;
  margin: 0;
  border: 1px solid var(--bricks-color-grey-500);
  border-radius: var(--radius-s, 5px);
  overflow: hidden;
  background: var(--bricks-color-white);
}
body .dgwt-wcas-pd-addtc .quantity:focus-within {
  outline: 2px solid var(--bricks-color-azul);
  outline-offset: 1px;
}
body .dgwt-wcas-pd-addtc .quantity input.qty {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-weight: 600;
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
}
body .dgwt-wcas-pd-addtc .quantity input.qty::-webkit-inner-spin-button,
body .dgwt-wcas-pd-addtc .quantity input.qty::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
body .dgwt-wcas-pd-addtc .quantity .action {
  display: flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--bricks-color-grey-900);
  cursor: pointer;
  transition: background-color .2s ease;
}
body .dgwt-wcas-pd-addtc .quantity .minus { order: -1; }
body .dgwt-wcas-pd-addtc .quantity .action:hover { background: var(--bricks-color-grey-100); }
body .dgwt-wcas-pd-addtc .quantity .action.disabled {
  color: var(--bricks-color-grey-500);
  background: none;
  cursor: default;
}
body .dgwt-wcas-pd-addtc .quantity .action svg {
  width: 16px;
  height: 16px;
}
body .dgwt-wcas-pd-addtc .add_to_cart_inline {
  margin: 0;
  padding: 0;
  border: 0;
}
/* Botón de añadir como el de la ficha */
body .dgwt-wcas-details-wrapp .button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-s, 5px);
  background: var(--bricks-color-azul);
  font-size: 15px;
  font-weight: 700;
  color: var(--bricks-color-white);
  transition: background-color .2s ease;
}
body .dgwt-wcas-details-wrapp .button:hover {
  background: var(--bricks-color-azul-d-3);
  color: var(--bricks-color-white);
}

/* 5. ARCHIVOS: EL PANEL DE FILTROS EMPUJA LA PÁGINA --------------------- */
/* En escritorio (≥992 px), al abrir #filtros (offcanvas de la plantilla
   Categorías 13490 y de Ofertas 14066) la página le deja sitio a la derecha
   en lugar de quedar tapada: los productos se recolocan y se ven los
   resultados mientras se filtra. Sin fondo oscuro y con scroll. En tablet y
   móvil el panel sigue por encima (en móvil ocupa toda la pantalla). */
@media (min-width: 992px) {
  /* Relleno en el body y no margen en #brx-content: Bricks les da width: 100%. */
  body { transition: padding-right .3s ease; }
  body:has(#filtros.brx-open) { padding-right: 420px; }

  /* La fila fija del header (position: fixed) no se mueve con el relleno.
     Lleva width: 100% desde Bricks, que manda sobre right: de ahí el auto. */
  #brx-header .cdp-hdr-nav { transition: right .3s ease; }
  body.cdp-hdr-fijo:has(#filtros.brx-open) #brx-header .cdp-hdr-nav {
    right: 420px;
    width: auto;
  }

  /* Bricks bloquea el scroll del body (noScrollBody) y pone un fondo oscuro. */
  body.no-scroll:has(#filtros.brx-open) { overflow: auto; }
  #filtros .brx-offcanvas-backdrop { display: none; }

  /* Sin sombra sobre la página: el panel ya no está encima. */
  #filtros .brx-offcanvas-inner {
    border-left: 1px solid var(--bricks-color-grey-300);
    box-shadow: none;
  }
}

/* 6. CABECERA DEL CARRITO LATERAL (CheckoutWC) ------------------------- */
/* Como la del panel de filtros: título a la izquierda, contador al lado
   (la píldora azul del header) y la X a la derecha, con una línea debajo.
   Se queda fija arriba al desplazar el carrito. CheckoutWC la pinta con
   React en este orden: [cerrar] [icono + contador] [título], el título
   desde el gancho cfw_after_side_cart_header (inc/header.php). Aquí se
   reordena con order. */
/* El que se desplaza es el formulario, también en escritorio (CheckoutWC
   solo lo hace en móvil; si no, se desplaza el panel y la cabecera solo
   aguanta una pantalla). Sin su relleno de arriba: la cabecera fija se
   pegaría por debajo de él, tapando el contenido. */
#cfw-side-cart #cfw-side-cart-form.checkoutwc {
  padding-top: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#cfw-side-cart .cfw-side-cart-contents-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 73px;
  margin: 0;
  padding: 16px 16px 16px 24px;
  border-bottom: 1px solid var(--bricks-color-grey-300);
  background: var(--bricks-color-white);
  text-align: left;
}

#cfw-side-cart .cfw-side-cart-contents-header .cdp-sc__titulo {
  order: 1;
  margin: 0;
  font-family: "Titillium Web", sans-serif !important; /* CheckoutWC fuerza la suya en los h2 */
  font-size: var(--text-l);
  font-weight: 700;
  line-height: 1.2;
  color: var(--bricks-color-grey-900);
}

#cfw-side-cart .cfw-side-cart-contents-header .cfw-side-cart-quantity-wrap { order: 2; }
#cfw-side-cart .cfw-side-cart-contents-header .cfw-side-cart-quantity-wrap svg { display: none; }
/* Sin display: con el carrito vacío CheckoutWC lo oculta con .cfw-hidden. */
#cfw-side-cart .cfw-side-cart-contents-header .cfw-side-cart-quantity {
  box-sizing: border-box;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--bricks-color-azul);
  font-family: inherit !important; /* CheckoutWC fija la del sistema con !important */
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 24px;
  text-align: center;
  color: var(--bricks-color-white);
}

/* La flecha de CheckoutWC se cambia por una X como la de los otros paneles. */
#cfw-side-cart .cfw-side-cart-contents-header .cfw-side-cart-close-btn {
  position: static;
  order: 3;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: auto;
  border-radius: var(--radius-s, 5px);
  color: var(--bricks-color-grey-900);
}
#cfw-side-cart .cfw-side-cart-contents-header .cfw-side-cart-close-btn:hover {
  background: var(--bricks-color-grey-100);
}
#cfw-side-cart .cfw-side-cart-contents-header .cfw-side-cart-close-btn svg { display: none; }
#cfw-side-cart .cfw-side-cart-contents-header .cfw-side-cart-close-btn::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 2l12 12M14 2L2 14' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 2l12 12M14 2L2 14' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 7. ESCRITORIO: BUSCADOR CENTRADO Y AVISOS DE LA FILA DEL MENÚ --------- */
/* Desde 1200 px (Bricks no tiene ese punto de corte) el buscador va centrado
   con el menú de abajo y, como mucho, igual de ancho (685 px). Las columnas
   laterales miden lo mismo: como mínimo lo que ocupan los iconos con nombre
   (333 px). Por debajo, la rejilla de Bricks: el buscador ocupa el hueco
   entre el logo y los iconos. */
@media (min-width: 1200px) {
  #brx-header .cdp-hdr-main {
    grid-template-columns: minmax(336px, 1fr) minmax(0, 685px) minmax(336px, 1fr);
    column-gap: var(--space-m);
  }
  #brx-header .cdp-hdr-buscador .dgwt-wcas-search-wrapp { max-width: none; }
}

/* Avisos a los lados del menú («Envío gratuito», «Consigue 6€ de regalo»):
   se ocultan cuando ya no caben junto al menú centrado. Al pasar el ratón por
   el de la newsletter se subraya solo el texto, no el icono. */
/* El menú siempre en la columna central, también cuando faltan los avisos
   (o el isotipo y los iconos sin header fijo). El Nav (nested) de Bricks no
   tiene el ajuste «Grid column»; los avisos lo llevan en Bricks. */
#brx-header .cdp-hdr-nav > .cdp-hdr-menu { grid-column: 2; }
#brx-header .cdp-hdr-aviso { white-space: nowrap; }
#brx-header a.cdp-hdr-aviso { text-decoration: none; }
#brx-header a.cdp-hdr-aviso:hover > .brxe-text-basic { text-decoration: underline; }
@media (max-width: 1199px) {
  #brx-header .cdp-hdr-aviso--newsletter { display: none; }
}
@media (max-width: 1099px) {
  #brx-header .cdp-hdr-aviso { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body,
  #brx-header .cdp-hdr-nav { transition: none; }
  .cdp-mmov__panel,
  .cdp-mmov__panel.is-open { transition: none; }
  body.cdp-hdr-fijo #brx-header .cdp-hdr-nav,
  body.cdp-hdr-fijo #brx-header .cdp-hdr-main { animation: none; }
}