/**
 * DCU Tec — child theme de Hummingbird (PS9)
 * Identidad extraída del tema 1.7 `laber_siemonsalazar_homepage5` (custom.css de producción):
 *   - Fuente global: Rubik (Google Fonts, 300-900 + itálicas) · 'Nord' solo para displays/slider
 *   - Marca: rojo #FF1D12 (acentos, hover, focus) · rojo oscuro #CF2430 (precios)
 *   - Neutros: #292929 (texto/títulos), #333E48 (gris azulado), #EBEBEB (bordes/fondos)
 *   - Botones: planos (radius 0), fondo #333, hover rojo
 * Este fichero carga DESPUÉS del theme.css de Hummingbird (priority 1000).
 */

/* ---------- Fuentes ---------- */
@import url('https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');

/* ---------- Tokens del sistema de diseño ----------
   Colores, tipografía, espaciado y medidas del tema viven en tokens.css.
   OJO al sitio: los @import tienen que ir ANTES de cualquier otra regla
   (el @font-face de abajo ya lo es), si no el navegador los descarta.
   Ruta absoluta a propósito: con CCC activo la hoja concatenada vive en
   assets/cache/ y una ruta relativa daría 404. */
@import url('/themes/dcutec/assets/css/tokens.css');

@font-face {
  font-family: 'Nord';
  src: url('../fonts/Nord-Regular.woff2') format('woff2'),
    url('../fonts/Nord-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ---------- Paleta / variables Bootstrap 5.3 (Hummingbird) ----------
   Movida a `tokens.css` (bloques 1-3 y 10). Aquí solo queda lo que
   CONSUME los tokens; las definiciones no se duplican. */

body {
  font-family: var(--bs-body-font-family);
}

/* ---------- Botones (planos, oscuros, hover rojo — como el add-to-cart 1.7) ---------- */
.btn {
  --bs-btn-border-radius: var(--dcu-radius);
  /* Unificación 2026-08-25: los botones venían con los 16px de Bootstrap,
     que dan 38px de alto, mientras el 1.7 usa 14px = 35px. Los 35px
     estaban escritos a mano SOLO para el add-to-cart de la ficha, así que
     el mismo botón medía 35 dentro de la ficha y 38 fuera. No se fija la
     altura: con 14px de fuente los 35px salen solos (21 + 12 + 2). */
  --bs-btn-font-size: var(--dcu-fs-sm);
  text-transform: none;
  box-shadow: none;
}

/* EL botón oscuro del tema. Esta es la ÚNICA definición: ficha, carrito, caja
   y módulos usan esta. Si un botón oscuro se ve distinto en alguna página, la
   solución NO es repintarlo ahí — es mirar qué regla local lo está pisando.
   Regla práctica: en una página se puede ajustar la GEOMETRÍA (ancho, que no
   se estire, aire a los lados), nunca color, borde, radio, tamaño ni hover.
   ⚠️ Y si hay que ajustar, hágase con las variables `--bs-btn-*`: una
   declaración directa de `background-color` gana al `:hover` de Bootstrap
   (que pinta con `var(--bs-btn-hover-bg)`) y deja el botón sin hover. */
.btn-primary,
.btn-add-to-cart {
  --bs-btn-color: var(--dcu-white);
  --bs-btn-bg: var(--dcu-btn-dark);
  --bs-btn-border-color: var(--dcu-btn-dark);
  /* Hover = el NEGATIVO del botón: se vacía y deja el borde y el texto
     oscuros. Es exactamente el estado de reposo de `.btn-outline-primary`, y
     al revés: el outline se rellena al pasar. Los dos son la misma pieza vista
     del derecho y del revés.
     ⚠️ Esto se aparta de producción a propósito (2026-08-26): el 1.7 pinta el
     hover del add-to-cart en ROJO de marca. Se cambia porque ese rojo es
     también el de los precios y el de error, y un botón entero en rojo compite
     con ellos. Para volver atrás: hover-bg/border = var(--dcu-red) y
     hover-color = var(--dcu-white).
     El estado activo (pulsado) vuelve al relleno oscuro, para que el clic se
     note sin sacar un tercer color. */
  --bs-btn-hover-color: var(--dcu-ink);
  --bs-btn-hover-bg: var(--dcu-white);
  --bs-btn-hover-border-color: var(--dcu-ink);
  --bs-btn-active-color: var(--dcu-white);
  --bs-btn-active-bg: var(--dcu-ink);
  --bs-btn-active-border-color: var(--dcu-ink);
  --bs-btn-focus-shadow-rgb: var(--dcu-red-rgb);
  --bs-btn-disabled-color: var(--dcu-white);
  --bs-btn-disabled-bg: var(--dcu-border);
  --bs-btn-disabled-border-color: var(--dcu-border);
}

/* Hummingbird marca el CTA "Ir a caja" con `.btn-lg` (3 usos en todo el tema,
   los tres ese botón), que le mete 8px de padding vertical y lo deja en 39px
   frente a los 35 del resto. El tema no tiene concepto de "botón grande" —el
   1.7 usa una sola medida—, así que se iguala al estándar.
   `.btn-sm` SÍ se respeta: son acciones pequeñas de verdad (editar envío, ver
   pedido) y ya heredan de `.btn` la tipografía y el radio del tema. */
.btn-lg {
  --bs-btn-padding-y: 0.375rem;
  --bs-btn-padding-x: 0.75rem;
}

.btn-secondary {
  --bs-btn-color: var(--dcu-ink);
  --bs-btn-bg: var(--dcu-white);
  --bs-btn-border-color: var(--dcu-ink);
  --bs-btn-hover-color: var(--dcu-white);
  --bs-btn-hover-bg: var(--dcu-ink);
  --bs-btn-hover-border-color: var(--dcu-ink);
  --bs-btn-active-color: var(--dcu-white);
  --bs-btn-active-bg: var(--dcu-slate);
  --bs-btn-active-border-color: var(--dcu-slate);
}

/* ---------- Avisos (planos, con la paleta del tema) ----------
   Unificación 2026-08-25: los alerts salían con los celestes y verdes de
   Bootstrap, sin nada del tema — se notaba en el carrito y en la caja,
   que es justo donde aparecen. Se quedan planos (radio 0, sin borde
   alrededor) con un filete de color a la izquierda, que es como el 1.7
   marca los bloques destacados. Colores en tokens.css (bloque 3bis);
   ojo: `warning` es el único sin origen en el tema viejo. */
.alert {
  --bs-alert-border-radius: var(--dcu-radius);
  border: 0;
  border-left: 3px solid var(--dcu-gray-mid);
  padding: var(--dcu-space-sm) var(--dcu-space-md);
  font-size: var(--dcu-fs-sm);
  color: var(--dcu-ink);
}

.alert-success {
  background-color: var(--dcu-success-bg);
  border-left-color: var(--dcu-success);
}

.alert-info {
  background-color: var(--dcu-info-bg);
  border-left-color: var(--dcu-info);
}

.alert-warning {
  background-color: var(--dcu-warning-bg);
  border-left-color: var(--dcu-warning);
}

.alert-danger {
  background-color: var(--dcu-danger-bg);
  border-left-color: var(--dcu-danger);
}

/* ---------- Formularios (focus rojo, plano — como el 1.7) ---------- */
.form-control,
.form-select {
  border-radius: var(--dcu-radius);
  border-color: var(--dcu-border);
}

.form-control:focus,
.form-select:focus,
.input-group.focus {
  border-color: var(--dcu-red);
  outline: 1px solid var(--dcu-red);
  box-shadow: none;
}

.form-check-input:checked {
  background-color: var(--dcu-red);
  border-color: var(--dcu-red);
}

/* ---------- Título de página ----------
   Hummingbird lo pinta a 32px en peso 600 y alineado a la izquierda. El 1.7 usa
   30px en peso 400, CENTRADO y con 30px de aire debajo — medido en su registro
   y en sus páginas CMS, así que es convención del tema y no de una página.
   ⚠️ Se acota al CONTENEDOR a propósito: los títulos de los PASOS de la caja
   usan la misma clase `page-title-section` y no viven en ninguno de estos dos.
   Sin acotar, "DATOS PERSONALES" y "DIRECCIONES" saldrían a 30px y centrados
   (ya pasó una vez). El título "CAJA" va aparte porque su plantilla lo saca
   fuera de `.page-header`. */
.page-header .page-title-section,
.dcu-checkout-title .page-title-section {
  font-size: var(--dcu-fs-4xl);
  font-weight: var(--dcu-fw-normal);
  color: var(--dcu-ink);
  text-align: center;
  margin-bottom: var(--dcu-space-2xl);
}

/* ==========================================================================
   FORMULARIOS — un solo patrón para toda la tienda (2026-08-26)
   --------------------------------------------------------------------------
   Hummingbird apila etiqueta sobre campo, a todo el ancho, con las etiquetas
   en negrita y asteriscos rojos. El 1.7 hace lo contrario: etiqueta a la
   izquierda, campo estrecho a la derecha, 14px de peso normal y los campos
   obligatorios marcados en CURSIVA, sin asterisco. Medido en su formulario de
   registro (público): 14px / peso 400 / #232323 / 8px de separación.

   Esto estaba escrito solo para la caja. Ahora vale para todos los
   formularios que comparten `_partials/form-fields.tpl` —direcciones, ficha
   del cliente, registro, recuperar contraseña y la propia caja—, que es la
   mayoría de la tienda.

   ⚠️ El gancho son los CONTENEDORES, no `.mb-3` a secas: esa clase la usa
   media plantilla y darle `display:grid` en global rompería bloques que no
   son formularios. Y `[id="customer-form"]` se escribe como atributo a
   propósito: así cuenta como clase (0,1,0) y no como id, que dispararía la
   especificidad de todo el bloque.
   ========================================================================== */
:is(.form-fields, .dcu-step__content, [id="customer-form"]) .mb-3 {
  display: grid;
  grid-template-columns: var(--dcu-form-label-width) minmax(0, var(--dcu-form-field-width));
  gap: 0 var(--dcu-form-gap);
  align-items: start;
}

/* Nota: la separación entre filas la manda `.mb-3` de Bootstrap (1rem = 16px).
   Aquí había un `margin-bottom: 8px` copiado del 1.7 que NUNCA se aplicó:
   `.mb-3` es una utilidad, vive en la capa `utilities` y lleva `!important`,
   así que una regla nuestra sin capa no le gana. Se deja en 16px —que es lo
   que se ha estado viendo en la caja desde el principio— en vez de meter un
   `@layer` solo para ganar 8px. */

/* Las filas que son solo una casilla se alinean con la columna de los campos */
:is(.form-fields, .dcu-step__content, [id="customer-form"]) .mb-3>.form-check,
:is(.form-fields, .dcu-step__content, [id="customer-form"]) .mb-3>.js-password-form__input-wrapper {
  grid-column: 2;
}

:is(.form-fields, .dcu-step__content, [id="customer-form"]) .form-label {
  text-align: left;
  font-size: var(--dcu-fs-sm);
  font-weight: var(--dcu-fw-normal);
  line-height: 1.4;
  color: var(--dcu-ink-alt);
  padding-top: 10px;
  margin: 0;
}

/* Obligatorio = cursiva, no asterisco (convención del 1.7) */
:is(.form-fields, .dcu-step__content, [id="customer-form"]) .form-label.required {
  font-style: italic;
}

:is(.form-fields, .dcu-step__content, [id="customer-form"]) .form-label.required::after,
:is(.form-fields, .dcu-step__content, [id="customer-form"]) .form-check-label::before {
  content: none;
}

:is(.form-fields, .dcu-step__content, [id="customer-form"]) .form-control,
:is(.form-fields, .dcu-step__content, [id="customer-form"]) .form-select {
  font-size: var(--dcu-fs-sm);
  line-height: 18px;
  padding: 8px 12px;
  border: var(--dcu-border-width) solid var(--dcu-border);
  border-radius: var(--dcu-radius);
}

:is(.form-fields, .dcu-step__content, [id="customer-form"]) .form-check-label,
:is(.form-fields, .dcu-step__content, [id="customer-form"]) .form-check-label a {
  color: var(--dcu-ink-alt);
  font-size: var(--dcu-fs-sm);
}

:is(.form-fields, .dcu-step__content, [id="customer-form"]) .form-check-label a {
  text-decoration: underline;
}

/* Textos de ayuda ("Opcional", "Solo se permiten caracteres…"): pequeños y
   apagados, alineados con la columna del campo. ⚠️ En la CAJA el 1.7 los
   esconde del todo; fuera de ella se conservan porque en una dirección o en
   el registro sí orientan (ver el bloque de la caja más abajo). */
:is(.form-fields, [id="customer-form"]) .form-text {
  grid-column: 2;
  margin-top: 4px;
  font-size: var(--dcu-fs-2xs);
  color: var(--dcu-gray);
}

/* Móvil: la rejilla de dos columnas se apila. Sin esto, 195px fijos dejan el
   campo en una tira inservible por debajo de 480px. */
@media (max-width: 767px) {
  :is(.form-fields, .dcu-step__content, [id="customer-form"]) .mb-3 {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  :is(.form-fields, .dcu-step__content, [id="customer-form"]) .mb-3>.form-check,
  :is(.form-fields, .dcu-step__content, [id="customer-form"]) .mb-3>.js-password-form__input-wrapper,
  :is(.form-fields, [id="customer-form"]) .form-text {
    grid-column: 1;
  }

  :is(.form-fields, .dcu-step__content, [id="customer-form"]) .form-label {
    padding-top: 0;
  }
}

/* ---------- Acentos de marca ---------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--dcu-ink);
}

h2 span {
  color: var(--dcu-red);
}

/* Displays/hero con la tipografía Nord (uso puntual, como el slider 1.7) */
.display-nord,
.lab_description .description span {
  font-family: var(--dcu-font-display) !important;
  text-transform: uppercase;
}

/* Precios en rojo oscuro (listados y ficha, como producción) */
.price,
.product-price,
.current-price-display {
  color: var(--dcu-red-dark);
}

/* Miniaturas de producto: hover con acento rojo */
.product-miniature .product-title a:hover {
  color: var(--dcu-red);
}

/* ---------- Home: grid de categorías (CSS portado del custom.css 1.7) ---------- */
/* Full-bleed: el bloque rompe el .container de ps_customtext y ocupa todo el ancho */
.laberStatic.home-categories {
  padding-top: 30px;
  margin-bottom: 0;
}

.home-categories h3 {
  text-align: center;
  margin-bottom: 30px;
  color: var(--dcu-ink);
  font-size: 30px;
  font-weight: 400;
}

.home-categories .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.home-categories .col-producte {
  padding: 0 !important;
  margin: 0;
}

.home-categories .col-half {
  width: 50%;
}

.home-categories .col-quarter {
  width: 25%;
}

@media (max-width: 767px) {
  .home-categories .col-half {
    width: 100%;
  }

  .home-categories .col-quarter {
    width: 50%;
  }

  .home-categories h3 {
    font-size: 20px;
    margin-bottom: 25px;
  }

  .home-categories .overlay-text {
    font-size: 18px;
  }
}

.home-categories .img-container {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}

/* Tintada (default) encima; al hover se desvanece y aparece la foto limpia */
.home-categories img.default-img {
  position: absolute;
  z-index: 2;
  transition: all 0.5s;
  cursor: pointer;
  width: 100%;
  height: auto;
}

.home-categories img.hover-img {
  z-index: 1;
  cursor: pointer;
  width: 100%;
  height: auto;
  display: block;
}

.home-categories .img-container:hover .default-img {
  opacity: 0;
}

.home-categories .overlay-text {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--dcu-white);
  font-size: 22px;
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
}

.home-categories .overlay-text:hover {
  color: var(--dcu-white);
}

/* ---------- Home: productos destacados (bloque estático 1.7, labcustomhtml id 2) ---------- */
.laberStatic.productos-destacados {
  width: 100%;
  padding-top: 0;
}

.productos-destacados h3 {
  text-align: center;
  margin-bottom: 30px;
  color: var(--dcu-ink);
  font-size: 30px;
  font-weight: 400;
}

.productos-destacados .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.productos-destacados .col-producte {
  padding: 0 !important;
  margin: 0;
  width: 25%;
}

.productos-destacados .img-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.productos-destacados .img-container img {
  width: 100%;
  height: auto;
  display: block;
}

.productos-destacados .overlay-text {
  position: absolute;
  bottom: 30px;
  width: 100%;
  text-align: center;
  color: var(--dcu-white);
  font-size: 20px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.productos-destacados .overlay-text:hover {
  color: var(--dcu-white);
}

@media (max-width: 767px) {
  .productos-destacados .col-producte {
    width: 50%;
  }

  .productos-destacados h3 {
    font-size: 20px;
    margin-bottom: 25px;
  }

  .productos-destacados .overlay-text {
    bottom: 5px;
    font-size: 14px;
    padding: 0 15px;
  }
}

/* ---------- Header (réplica del 1.7: topbar negra + menú | logo centrado | acciones) ----------
   Medidas tomadas del 1.7 en vivo (viewport 1440):
     topbar negra .......... 33 px  (se va con el scroll)
     barra blanca .......... 63,5 px arriba → 62 px al hacer scroll
     logo .................. 150×39 px arriba → 120×31 px al hacer scroll
     menú nivel 1 .......... 13 px uppercase #000, li padding 0 10px, line-height 62
     desplegable ........... caja de 222 px, borde 1px #ddd, nivel 3 en cascada a la derecha
     acciones .............. iconos SVG del 1.7 (18/20/17 px) + texto "Iniciar sesión / Registrarse"
*/

/* Sticky como el 1.7: la topbar negra se va con el scroll y queda fija la barra
   blanca. En móvil la topbar está oculta (d-none) → no hay desplazamiento. */
@media (min-width: 768px) {
  #header.js-sticky-header {
    top: -33px;
  }

  /* Inversores (shop2) NO tiene topbar negra, así que el -33px ocultaba 33px de
     la propia barra blanca ("se oculta media barra" al hacer scroll). Aquí el
     sticky se pega arriba del todo; el shrink del logo (.dcu-scrolled) ya actúa. */
  body:has(.dcu-header--inversores) #header.js-sticky-header {
    top: 0;
  }
}

.dcu-topbar {
  background: var(--dcu-black);
  color: var(--dcu-white);
  height: 33px;
  overflow: visible;
  /* los dropdowns del menú secundario deben salir */
}

.dcu-topbar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 33px;
}

.dcu-topbar__ship {
  font-size: 14px;
  font-weight: 500;
}

.dcu-topbar__ship strong {
  font-weight: 500;
}

.dcu-topbar__ship span {
  color: var(--dcu-white);
  font-size: 11px;
  font-weight: 400;
}

.dcu-topbar__menu ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dcu-topbar__menu li {
  position: relative;
  padding: 0 10px;
}

.dcu-topbar__menu a {
  color: var(--dcu-white);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 400;
  line-height: 33px;
  display: flex;
  align-items: center;
}

.dcu-topbar__menu a .material-icons {
  font-size: 15px;
}

.dcu-topbar__menu a:hover {
  color: var(--dcu-red);
}

/* Desplegable del menú secundario: caja blanca como en el 1.7 (no negra) */
:is(.dcu-topbar__menu, .dcu-inv-menu) .dcu-dd>ul {
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .35s ease, transform .35s ease;
  position: absolute;
  top: 33px;
  left: 0;
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--dcu-border-strong);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
  /* Medidas del 1.7 (.lab-sub-menu.menu-dropdown): caja de 300px con 30px de
     aire arriba/abajo y 40px a los lados (allí repartidos en box 15 + row 15 +
     col 10) → contenido de 218px. */
  min-width: 300px;
  padding: 30px 40px;
  z-index: 1080;
}

:is(.dcu-topbar__menu, .dcu-inv-menu) .dcu-dd:hover>ul,
:is(.dcu-topbar__menu, .dcu-inv-menu) .dcu-dd:focus-within>ul {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* Separador gris bajo CADA ítem — también bajo el último, que es como lo pinta
   el 1.7 en este menú (a diferencia del menú principal, donde el último no lo
   lleva). Medidas del 1.7: padding 0 29px 8px 0 + margin-bottom 8px. */
:is(.dcu-topbar__menu, .dcu-inv-menu) .dcu-dd>ul li {
  padding: 0 29px 8px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--dcu-border);
}

:is(.dcu-topbar__menu, .dcu-inv-menu) .dcu-dd>ul a {
  color: var(--dcu-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-transform: none;
  white-space: nowrap;
}

:is(.dcu-topbar__menu, .dcu-inv-menu) .dcu-dd>ul a:hover {
  color: var(--dcu-red);
}

/* ---------- Barra blanca: menú | logo | acciones ---------- */
.dcu-header__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 63px;
  transition: min-height 300ms ease;
}

#header.dcu-scrolled .dcu-header__row {
  min-height: 62px;
}

.dcu-header__menu {
  min-width: 0;
  display: flex;
  justify-content: flex-start;
}

.dcu-header__logo {
  text-align: center;
  padding: 0 1.5rem;
}

/* El logo encoge al hacer scroll, como el 1.7 (150→120 px).
   ⚠️ .header-bottom .navbar-brand .logo gana por especificidad: hay que
   repetir la medida en las dos reglas o "el logo no cambia de tamaño". */
.dcu-header__logo img,
.header-bottom .navbar-brand .logo {
  max-width: 150px;
  max-height: 39px;
  width: auto;
  height: auto;
  transition: max-width 300ms ease, max-height 300ms ease;
}

#header.dcu-scrolled .dcu-header__logo img,
#header.dcu-scrolled .header-bottom .navbar-brand .logo {
  max-width: 120px;
  max-height: 31px;
}

.dcu-header__actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* ---------- Menú principal (ps_mainmenu) ---------- */
/* HB mete el widget con clases de grid de Bootstrap (`col-xl col-auto`), que
   fuera de un `.row` se traducen igual en flex: `.col-xl` sin número es
   columna "a partes iguales" → flex-grow:1. Dentro de nuestro `.dcu-header__menu`
   (flex simple, no grid Bootstrap) eso hace que el widget se estire a TODO el
   hueco disponible y empuje lejos lo que venga detrás — en shop2, el `<nav>`
   con SOLUCIONES/Noticias/Contacto queda pegado al extremo derecho, partiendo
   visualmente el menú en dos grupos con un hueco enorme en medio. */
.dcu-header__menu .ps-mainmenu--desktop {
  flex: 0 0 auto;
}

.dcu-header__menu .ps-mainmenu__tree {
  gap: 0;
  flex-wrap: nowrap;
}

.dcu-header__menu .ps-mainmenu__tree-item {
  position: relative;
  /* ancla del desplegable: sin esto se abre a todo el ancho del header */
  padding: 0 10px;
}

.dcu-header__menu .ps-mainmenu__tree-link {
  text-transform: uppercase;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 400;
  color: var(--dcu-ink);
  line-height: 62px;
  padding: 0;
}

.dcu-header__menu .ps-mainmenu__tree-link:hover {
  color: var(--dcu-red);
}

/* El botón-flecha de Hummingbird (elemento aparte, con su propia caja) no se usa */
.dcu-header__menu .ps-mainmenu__tree-dropdown-toggle {
  display: none;
}

/* …pero el 1.7 SÍ marca con un chevron los ítems que despliegan (allí es
   FontAwesome angle-down 13px; aquí el equivalente en Material Icons, que es la
   fuente de iconos que carga Hummingbird). Solo en los que tienen submenú. */
.dcu-header__menu .ps-mainmenu--desktop .ps-mainmenu__tree-item:has(> .submenu) .ps-mainmenu__tree-link::after {
  content: "\e5cf";
  font-family: "Material Icons", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  vertical-align: -3px;
  margin-left: 5px;
  color: inherit;
  -webkit-font-smoothing: antialiased;
}

/* Desplegable: caja estrecha pegada al ítem (222 px, como el 1.7),
   no el panel a todo el ancho de Hummingbird.
   ⚠️ El JS de ps_mainmenu pone inline `top:100px` al abrir (posiciona el panel
   full-width bajo TODO el header). Con la caja anclada al <li> eso deja un hueco
   transparente de ~38px entre el navbar y la caja → rompe el hover (se cierra al
   cruzarlo). Se fuerza top/left/right/bottom con !important para ganarle al inline. */
.dcu-header__menu .js-sub-menu.submenu {
  inset: 100% auto auto 10px !important;
  /* 10px = el padding lateral del ítem, como el 1.7 (caja alineada con el texto) */
  width: auto;
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--dcu-border-strong);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
  /* Aire arriba y abajo IGUAL (10px): el ítem ya trae 8px de padding inferior,
     así que abajo bastan 2px de panel; arriba hacen falta los 10. */
  padding: 10px 0 2px;
}

.dcu-header__menu .submenu .container {
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0;
}

.dcu-header__menu .submenu .submenu__row {
  display: block;
  margin: 0;
  --bs-gutter-x: 0;
}

/* Columna de nivel 2 = la lista estrecha */
.dcu-header__menu .submenu .submenu__left {
  display: block;
  width: 222px;
  max-width: none;
  flex: none;
  padding: 0;
}

.dcu-header__menu .submenu .submenu__left-item {
  display: block;
  position: relative;
  /* padding + separador del 1.7: li 0 29px 8px 15px, border-bottom #ebebeb, margin-bottom 8px
     → línea divisoria con aire arriba (8 pad) y abajo (8 margin) */
  padding: 0 29px 8px 15px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--dcu-border);
  border-radius: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--dcu-gray-soft);
  /* el 1.7 hace WRAP a 2 líneas, no recorta (era el bug de nowrap) */
  white-space: normal;
}

/* El último ítem no lleva separador: dejaba una franja vacía al pie del panel */
.dcu-header__menu .submenu .submenu__left-item:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}

.dcu-header__menu .submenu .submenu__left-item:hover,
.dcu-header__menu .submenu .submenu__left-item.active {
  color: var(--dcu-red);
  background: transparent;
}

/* La flecha de "tiene hijos" (::after Material Icons, inline por defecto) al
   hueco derecho, sin empujar ni pisar el texto */
.dcu-header__menu .submenu .submenu__left-item[data-ps-has-child="true"]::after {
  position: absolute;
  right: 12px;
  top: 0;
  line-height: 20px;
  font-size: 16px;
  color: inherit;
}

/* Columna de nivel 3 = flyout lateral (1.7: li.level-2 .menu-dropdown{left:100%}) */
.dcu-header__menu .submenu .submenu__right {
  position: absolute;
  left: 222px;
  top: -1px;
  width: 222px;
  min-width: 222px;
  max-width: 222px;
  flex: none;
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--dcu-border-strong);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
  padding: 10px 0 2px;
  /* mismo aire simétrico que la columna de nivel 2 */
}

/* Sin pestaña activa no hay cascada visible (igual que el 1.7) */
.dcu-header__menu .submenu .submenu__right:not(:has(.submenu__right-items.active)) {
  display: none;
}

.dcu-header__menu .submenu .submenu__right-items.active {
  display: block;
}

.dcu-header__menu .submenu .submenu__right ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Los ítems de nivel 3 vienen como .menu-item__group-main-item (font-weight:600,
   negrita) → se igualan a la columna izquierda: gris, peso normal, mismo padding */
.dcu-header__menu .submenu .submenu__right a,
.dcu-header__menu .submenu .submenu__right .menu-item__group-main-item {
  display: block;
  padding: 0 15px 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--dcu-border);
  border-radius: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--dcu-gray-soft);
  white-space: normal;
}

/* Ídem en la cascada de nivel 3 (cada ítem es un <ul> suelto) */
.dcu-header__menu .submenu .submenu__right-items>ul:last-child a,
.dcu-header__menu .submenu .submenu__right-items>ul:last-child .menu-item__group-main-item {
  border-bottom: 0;
  margin-bottom: 0;
}

.dcu-header__menu .submenu .submenu__right a:hover,
.dcu-header__menu .submenu .submenu__right .menu-item__group-main-item:hover {
  color: var(--dcu-red);
}

/* ---------- Acciones de la derecha (iconos SVG del 1.7) ---------- */
.dcu-header__actions .header-block__action-btn {
  display: flex;
  align-items: center;
  color: var(--dcu-ink);
  padding: 0;
}

.dcu-header__actions .header-block__icon,
.dcu-header__actions .ps-searchbar__magnifier {
  font-size: 0 !important;
  display: inline-block;
  height: 62px;
  background-repeat: no-repeat;
  background-position: center center;
}

.dcu-header__actions .ps-customersignin .header-block__icon {
  width: 18px;
  margin-right: 10px;
  background-image: url(../img/icon_user.svg);
  background-size: 18px auto;
}

.dcu-header__actions .ps-searchbar__magnifier {
  width: 20px;
  background-image: url(../img/icon_search.svg);
  background-size: 20px auto;
}

.dcu-header__actions .ps-shoppingcart .header-block__icon {
  width: 17px;
  background-image: url(../img/icon_cart.svg);
  background-size: 17px auto;
}

/* Login: icono + texto "Iniciar sesión / Registrarse" (custom.js pone el texto) */
.dcu-header__actions #_desktop_ps_customersignin {
  order: 1;
  padding: 0 20px;
}

.dcu-header__actions .ps-customersignin .header-block__title {
  font-size: 14px;
  font-weight: 400;
  color: var(--dcu-ink);
  line-height: 62px;
  white-space: nowrap;
}

/* ---------- Desplegable de la cuenta (cliente identificado) ----------
   El 1.7 no lo tiene: allí "Iniciar sesión / Registrarse" es un enlace suelto
   y no despliega nada, así que aquí no hay nada que replicar. Se le da el
   MISMO aspecto que a los otros dos desplegables de la cabecera (menú
   principal y menú secundario de la topbar): panel blanco al 96% con filete
   gris y sombra, e ítems de 14px con separador entre ellos y hover rojo.
   Es un dropdown de Bootstrap, así que casi todo se apaga por variables
   `--bs-dropdown-*` en vez de pelear selectores. */
.dcu-header__actions .ps-customersignin .dropdown-menu {
  --bs-dropdown-min-width: 222px;
  --bs-dropdown-padding-y: 0;
  --bs-dropdown-border-width: 0;
  --bs-dropdown-border-radius: var(--dcu-radius);
  --bs-dropdown-item-padding-x: 0;
  --bs-dropdown-item-padding-y: 0;
  --bs-dropdown-link-color: var(--dcu-gray-soft);
  --bs-dropdown-link-hover-color: var(--dcu-red);
  --bs-dropdown-link-hover-bg: transparent;
  --bs-dropdown-link-active-color: var(--dcu-red);
  --bs-dropdown-link-active-bg: transparent;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--dcu-border-strong);
  box-shadow: 0 2px 8px var(--dcu-shadow-color);
  /* mismo aire que el panel del menú principal */
  padding: 10px 0 2px;
  margin-top: 0;
}

/* Ítems: las medidas del 1.7 que ya usan los otros menús
   (padding 0 29px 8px 15px + margin-bottom 8px + filete gris). */
.dcu-header__actions .ps-customersignin .dropdown-item {
  display: flex;
  align-items: center;
  padding: 0 29px 8px 15px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--dcu-border);
  border-radius: var(--dcu-radius);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  white-space: normal;
}

/* El último no lleva separador, igual que en el menú principal */
.dcu-header__actions .ps-customersignin .dropdown-item:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}

/* El divisor propio de Bootstrap sobra: la línea la pone cada ítem */
.dcu-header__actions .ps-customersignin .dropdown-divider {
  display: none;
}

/* Iconos al tamaño del texto. El hueco lo deja el `.me-2` de Bootstrap, que
   NO se toca a propósito: vive en la capa `utilities` y con `!important`,
   así que una regla nuestra sin capa no le ganaría (mismo caso que el
   corazón de favoritos). */
.dcu-header__actions .ps-customersignin .dropdown-item .material-icons {
  font-size: 18px;
  color: inherit;
}

/* ---------- Panel lateral de la cuenta (páginas de cliente) ----------
   El 1.7 no tiene columna en las páginas de cuenta —ni ahí ni en las de
   categoría—, así que no hay referencia literal que copiar. Se le aplica el
   patrón de TÍTULO DE BLOQUE que sí tiene el tema (el del pie: 18px, peso
   400, mayúsculas, 20px de aire debajo), cambiando el blanco por la tinta.
   Hummingbird lo pinta como `p.h2`, o sea grande y en negrita. */
.account-menu__title {
  color: var(--dcu-ink);
  font-size: var(--dcu-fs-lg);
  font-weight: var(--dcu-fw-normal);
  line-height: 18px;
  text-transform: uppercase;
  letter-spacing: normal;
  margin-bottom: var(--dcu-space-lg);
}

/* Los enlaces, al tamaño del resto de menús del tema (14px), no a los 16 de
   Hummingbird. Mismos colores que el desplegable de la cabecera, que lista
   exactamente estos mismos enlaces. */
.account-menu--sidebar .account-menu__link {
  font-size: var(--dcu-fs-sm);
  font-weight: var(--dcu-fw-normal);
  line-height: 20px;
  color: var(--dcu-gray-soft);
  border-radius: var(--dcu-radius);
}

.account-menu--sidebar .account-menu__link:hover {
  color: var(--dcu-red);
}

/* El activo: solo el texto en rojo, sin la banda gris de Hummingbird — es
   como marcan el estado el resto de menús. */
.account-menu--sidebar .account-menu__link--active {
  background-color: transparent;
  color: var(--dcu-red);
}

.account-menu--sidebar .account-menu__icon {
  font-size: 18px;
  color: inherit;
}

/* ---------- Rejilla de "Mi cuenta" (réplica del 1.7) ----------------------
   2026-09-08. Los recuadros salían con el aspecto de serie de Hummingbird:
   fondo gris `#f8f9fa`, rótulo de 16px en negrita `#292929` alineado a la
   izquierda e icono negro de 32px. El 1.7 es mucho más suave — caja BLANCA
   con filete `#ebebeb`, todo centrado, icono del mismo gris clarito que el
   filete y el rótulo en peso normal:

     .page-my-account #content .links a span.link-item { border: 1px solid #ebebeb; box-shadow: none }
     .page-my-account #content .links a { font-weight: 400 !important; text-transform: none !important }
     .page-my-account #content .links a i { color: #ebebeb !important }

   Se cambia SOLO el aspecto: la caja, el aire y la rejilla de Hummingbird se
   quedan como están. */
.account-menu--main .account-menu__link {
  background-color: var(--dcu-white);
  border: var(--dcu-border-width) solid var(--dcu-border);
  box-shadow: none;
  align-items: center;
  text-align: center;
  font-size: var(--dcu-fs-sm);
  font-weight: var(--dcu-fw-normal);
  text-transform: none;
  color: var(--dcu-gray);
}

.account-menu--main .account-menu__link:hover {
  border-color: var(--dcu-border-strong);
  color: var(--dcu-ink);
}

/* ⚠️ El icono va al gris del filete, que es lo que declara el 1.7. Si el
   cliente lo quiere más presente, el siguiente escalón es --dcu-gray-faint. */
.account-menu--main .account-menu__icon {
  color: var(--dcu-border);
}

.account-menu--main .account-menu__link:hover .account-menu__icon {
  color: var(--dcu-border-strong);
}

/* El 1.7 esconde tres de los recuadros: facturas por abono, cupones y RGPD
   (`#order-slips-link`, `.links a:nth-child(5)` y `#psgdpr-link`). Aquí se
   quitan solo de la rejilla — en la columna de la izquierda siguen estando,
   así que no se pierde el acceso a ninguno. */
.account-menu--main #order_slips_main_link,
.account-menu--main #discounts_main_link,
.account-menu--main #psgdpr_link {
  display: none;
}

/* El 1.7 tampoco pinta migas de pan en ninguna página de cliente
   (`body.page-customer-account #wrapper .breadcrumb { display: none }`).
   ⚠️ Esa clase única NO existe en PS9: cada página lleva la suya
   (`page-my-account`, `page-addresses`, `page-identity`, `page-history`…).
   Lo que sí comparten todas es la columna de la izquierda, así que el enganche
   es esa: donde hay panel de cuenta, no hay migas.

   ⚠️ Y aquí NO vale `display: none` sobre el envoltorio, como en las CMS con
   foto a sangre: ahí el hueco sobra porque la foto sube hasta la cabecera,
   pero en la cuenta ese bloque es TODO el aire de arriba (25px de padding +
   46 de la línea + 30 de margen = 101px) y sin él el contenido se pega al
   header. Se oculta solo la lista —con `visibility`, que sí reserva el
   sitio—, así que el aire queda idéntico al del resto de páginas y sigue
   cuadrando si algún día se cambia el espaciado del envoltorio. */
body:has(.account-menu--sidebar) .breadcrumb__wrapper .breadcrumb {
  visibility: hidden;
}

/* Los rótulos de las páginas de cliente (RGPD, historial…) venían a 16px en
   peso 600 y `#292929`: pesan más que el propio título de la página y
   desentonan con el resto de la cuenta, que es todo gris suave. Se les da el
   mismo tratamiento que a los rótulos de sección del contenido CMS. */
body:has(.account-menu--sidebar) .page-content h2,
body:has(.account-menu--sidebar) .page-content h3 {
  font-weight: var(--dcu-fw-medium);
  color: var(--dcu-gray-mid);
}

/* ---------- El botón de guardar, pegado a los campos ----------------------
   2026-09-08, a petición del cliente. Hummingbird manda el pie de botones al
   extremo derecho del formulario (`justify-content: flex-end`), pero estos
   formularios son ESTRECHOS —los campos miden 365px— y el botón quedaba a
   medio metro del último dato. Se alinea con la columna de los campos, que
   empieza donde acaba la etiqueta más su separación.
   Vale para todas las páginas de cuenta (ficha, direcciones, contraseña…);
   la caja NO se toca, ahí el reparto a los extremos es deliberado. */
body:has(.account-menu--sidebar) .buttons-wrapper--end {
  justify-content: flex-start;
  padding-left: calc(var(--dcu-form-label-width) + var(--dcu-form-gap));
}

/* En móvil la rejilla se apila, así que el sangrado sobra */
@media (max-width: 767px) {
  body:has(.account-menu--sidebar) .buttons-wrapper--end {
    padding-left: 0;
  }
}

/* ==========================================================================
   PÁGINAS CMS — tipografía general (2026-08-26)
   El contenido lo escribe el cliente desde el BO, así que aquí no se puede ir
   página por página: son 28 y crecen. Se fija la escala del tema para TODO el
   contenido (`#content.page-content--cms`), y con eso valen las que hay y las
   que vengan.
   Hummingbird deja los encabezados del contenido en su escala grande (h2 a
   32px/600), que es lo que hacía que "Aviso Legal" o "Términos y condiciones"
   pesaran más que el propio título de la página.
   ========================================================================== */
.page-content--cms {
  font-size: var(--dcu-fs-sm);
  color: var(--dcu-ink);
  line-height: 25px;
}

.page-content--cms h1,
.page-content--cms h2 {
  font-size: var(--dcu-fs-2xl);
  font-weight: var(--dcu-fw-medium);
  color: var(--dcu-ink);
  margin: var(--dcu-space-2xl) 0 var(--dcu-space-md);
}

.page-content--cms h3 {
  font-size: var(--dcu-fs-lg);
  font-weight: var(--dcu-fw-medium);
  color: var(--dcu-ink);
  margin: var(--dcu-space-xl) 0 var(--dcu-space-xs);
}

.page-content--cms h4,
.page-content--cms h5,
.page-content--cms h6 {
  font-size: var(--dcu-fs-md);
  font-weight: var(--dcu-fw-medium);
  color: var(--dcu-ink);
  margin: var(--dcu-space-lg) 0 var(--dcu-space-xs);
}

.page-content--cms p {
  margin-bottom: var(--dcu-space-md);
}

.page-content--cms ul,
.page-content--cms ol {
  margin-bottom: var(--dcu-space-md);
  padding-left: var(--dcu-space-lg);
}

.page-content--cms li {
  margin-bottom: var(--dcu-space-3xs);
}

.page-content--cms a {
  text-decoration: underline;
}

/* …salvo los que son botones o envuelven una imagen: ahí el subrayado sobra */
.page-content--cms a.btn,
.page-content--cms a:has(> img) {
  text-decoration: none;
}

.page-content--cms table {
  width: auto;
  max-width: 100%;
  font-size: var(--dcu-fs-sm);
}

.page-content--cms table td,
.page-content--cms table th {
  border: var(--dcu-border-width) solid var(--dcu-border);
  padding: var(--dcu-space-xs) var(--dcu-space-lg);
  color: var(--dcu-gray);
}

.page-content--cms table th {
  font-weight: var(--dcu-fw-normal);
}

.page-content--cms img {
  max-width: 100%;
  height: auto;
}

/* Tira de logos ("Empresas que nos han escogido", B2B). Sustituye al carrusel
   del page-builder: 13 logos estáticos no necesitan JS ni pasar de uno en uno. */
.page-content--cms .dcu-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--dcu-space-2xl);
  margin: var(--dcu-space-2xl) 0;
}

.page-content--cms .dcu-logos img {
  max-height: 60px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter var(--dcu-transition), opacity var(--dcu-transition);
}

.page-content--cms .dcu-logos img:hover {
  filter: none;
  opacity: 1;
}

/* Carrusel de logos de cliente ("Empresas que nos han escogido", B2B). Replica
   el vc_images_carousel del 1.7: 6 por vista, flechas ‹ › y autoplay. El JS del
   tema (custom.js) inyecta el viewport y las flechas; aquí solo el estilo. */
.page-content--cms .dcu-logos-carousel {
  position: relative;
  margin: var(--dcu-space-2xl) 0;
  padding-inline: var(--dcu-space-3xl);
  /* hueco para las flechas */
}

.page-content--cms .dcu-logos-carousel__viewport {
  display: flex;
  gap: var(--dcu-space-2xl);
  overflow-x: auto;
  /* auto (no hidden): hidden bloquea el scrollLeft programático */
  align-items: center;
  scroll-snap-type: x mandatory;
  /* los slides caen alineados, sin logos partidos */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge viejo */
}

.page-content--cms .dcu-logos-carousel__viewport::-webkit-scrollbar {
  display: none;
  /* WebKit/Blink */
}

/* Cada logo va en un slide flex centrado: así queda centrado en su celda sea
   cual sea su proporción (el <img> solo con object-fit no bastaba en móvil). */
.page-content--cms .dcu-logos-carousel__slide {
  flex: 0 0 calc((100% - 5 * var(--dcu-space-2xl)) / 6);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  scroll-snap-align: start;
}

.page-content--cms .dcu-logos-carousel__slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter var(--dcu-transition), opacity var(--dcu-transition);
}

.page-content--cms .dcu-logos-carousel__slide img:hover {
  filter: none;
  opacity: 1;
}

.page-content--cms .dcu-logos-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: var(--dcu-border-width) solid var(--dcu-border);
  background: var(--dcu-white);
  color: var(--dcu-ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: border-color var(--dcu-transition), color var(--dcu-transition);
}

.page-content--cms .dcu-logos-carousel__nav:hover {
  border-color: var(--dcu-ink);
  color: var(--dcu-red);
}

.page-content--cms .dcu-logos-carousel__nav--prev {
  left: 0;
}

.page-content--cms .dcu-logos-carousel__nav--next {
  right: 0;
}

@media (max-width: 991.98px) {
  .page-content--cms .dcu-logos-carousel__slide {
    flex-basis: calc((100% - 3 * var(--dcu-space-2xl)) / 4);
  }
}

@media (max-width: 575.98px) {
  .page-content--cms .dcu-logos-carousel__slide {
    flex-basis: calc((100% - var(--dcu-space-2xl)) / 2);
  }
}

/* Botones de descarga de catálogo (CMS Descargas) y de FAQ. Componente propio
   del 1.7 (.btn-cat / .btn-faq): botón blanco con filete, NO el botón oscuro del
   tema — el page-builder los estilaba aparte. Medidas portadas del custom.css del
   tema Laber (.btn-cat + #btn-faqs .wpb_button_a). */
.page-content--cms .btn-cat,
.page-content--cms .btn-faq {
  display: block;
  border: var(--dcu-border-width-thick) solid var(--dcu-border);
  background: var(--dcu-white);
  color: var(--dcu-ink);
  font-size: var(--dcu-fs-xs);
  padding: var(--dcu-space-lg) var(--dcu-space-md);
  text-align: center;
  text-decoration: none;
  transition: border-color var(--dcu-transition), color var(--dcu-transition);
}

.page-content--cms .btn-cat:hover,
.page-content--cms .btn-faq:hover {
  border-color: var(--dcu-ink);
}

/* Descargas: el botón ocupa todo el card. */
.page-content--cms .btn-cat {
  width: 100%;
}

/* FAQ: botón a ancho de contenido, centrado (como el wrapper .text-center del 1.7). */
.page-content--cms .btn-faq {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   CMS — color, tipografía y ritmo vertical del 1.7 (2026-09-08)

   El cliente, sobre estas páginas: «el color es demasiado negro; todas las
   originales usan la misma tipografía, color, fuente». Medido en la réplica
   1.7: su cuerpo es `#656d74` (= --dcu-gray), no el `#292929` de texto que
   veníamos poniendo aquí, y los rótulos de sección van en `#797979` con la
   clase `.highlighted`, que es la que el editor pone en cada título.

   Y el aire entre bloques lo daban DOS reglas del page-builder que aquí no
   existían: `.vc_row { margin-bottom: 30px }` y
   `.wpb_text_column { margin-bottom: 30px }`. Por eso las páginas largas
   (For Change, DCU, Personalización B2B) salían con las secciones pegadas.
   El conversor de shortcodes conserva ahora el bloque de texto como
   `.dcu-cms-text`, así que las dos medidas tienen de dónde agarrarse.
   -------------------------------------------------------------------------- */
.page-content--cms,
.page-content--cms h1,
.page-content--cms h2,
.page-content--cms h3,
.page-content--cms h4,
.page-content--cms h5,
.page-content--cms h6 {
  color: var(--dcu-gray);
}

/* El 1.7 deja `.highlighted` en #797979; --dcu-gray-mid es #7a7a7a. */
.page-content--cms .highlighted {
  color: var(--dcu-gray-mid);
  font-weight: var(--dcu-fw-medium);
  line-height: 1.1;
  margin-top: var(--dcu-space-xl);
  margin-bottom: var(--dcu-space-md);
}

.page-content--cms .row,
.page-content--cms .dcu-cms-text {
  margin-bottom: var(--dcu-space-2xl);
}

/* El aviso de la LOPD bajo los formularios: 11px en el original, y con el
   interlineado corto del tema viejo (17,5px), no los 25 del cuerpo CMS */
.page-content--cms .content-lopd {
  font-size: 11px;
  line-height: 17.5px;
}

/* Los `vc_button` del contenido salen como `.btn-outline-primary`, el botón
   de contorno del tema (el mismo de "Get my data to PDF"). Decisión del
   cliente, 2026-09-08: el del 1.7 es el `.btn` de PrestaShop classic y no se
   parece a nada del resto del sitio.
   Aquí NO se le pinta nada: el conversor emite las clases y manda la regla
   global del botón — es lo que evita que cada página tenga su propio botón. */

/* --------------------------------------------------------------------------
   Cabecera a sangre de "DCU" (CMS 10) y "For Change" (CMS 13)

   Las dos abren con una foto de ancho completo y corte diagonal, y en el 1.7
   NO llevan migas de pan (`body.cms-id-N #wrapper .breadcrumb {display:none}`,
   lo mismo que la landing de Inversores). El título de la página ya estaba
   oculto para todas las CMS.
   -------------------------------------------------------------------------- */
body#cms.cms-id-10 .breadcrumb__wrapper,
body#cms.cms-id-13 .breadcrumb__wrapper,
body#cms.cms-id-28 .breadcrumb__wrapper {
  display: none;
}

/* ⚠️ `100vw` INCLUYE la barra de scroll: con ella salen 15px de más y aparece
   barra horizontal. `--dcu-vw` es el ancho útil, que mide `custom.js`; el
   `100vw` queda de reserva por si el JS no llegara a ejecutarse. */
body#cms.cms-id-10 .imatge-dcu,
body#cms.cms-id-13 .imatge-dcu {
  width: var(--dcu-vw, 100vw);
  max-width: var(--dcu-vw, 100vw);
  margin-top: -10px;
  margin-left: calc(50% - var(--dcu-vw, 100vw) / 2);
  margin-right: 0;
  clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%);
}

body#cms.cms-id-10 .imatge-dcu>[class*="col-"],
body#cms.cms-id-13 .imatge-dcu>[class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

body#cms.cms-id-10 .imatge-dcu img,
body#cms.cms-id-13 .imatge-dcu img {
  width: 100%;
}

/* Dentro del hero no hay ritmo que guardar: la foto pega con lo de abajo */
body#cms.cms-id-10 .imatge-dcu p,
body#cms.cms-id-13 .imatge-dcu p,
body#cms.cms-id-10 .imatge-dcu .dcu-cms-text,
body#cms.cms-id-13 .imatge-dcu .dcu-cms-text {
  margin-bottom: 0;
}

/* El párrafo destacado entre filetes de "For Change" (`.destacados`) */
.page-content--cms .destacados {
  font-size: var(--dcu-fs-2xl);
  font-weight: var(--dcu-fw-light);
  line-height: 1.5;
  text-align: center;
  border-top: var(--dcu-border-width) solid var(--dcu-border);
  border-bottom: var(--dcu-border-width) solid var(--dcu-border);
  padding: var(--dcu-space-md) var(--dcu-space-xl) var(--dcu-space-xl);
  margin-top: 35px;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Página de Contacto (CMS 12): los tres datos van dentro de un recuadro con
   filete, centrados, y el rótulo de la sección también centrado. Todo esto
   colgaba del `el_class` de los bloques de texto del page-builder
   (`contact-info`, `row-info`, `title-row-info`), que el conversor conserva.
   -------------------------------------------------------------------------- */
.page-content--cms .title-row-info h2 {
  text-align: center;
}

.page-content--cms .row-info {
  border: var(--dcu-border-width) solid var(--dcu-border);
  margin-left: var(--dcu-space-md);
  margin-right: var(--dcu-space-md);
}

/* ⚠️ El 1.7 usa `20px 30px`, pero su contenedor mide 1350px y el de Hummingbird
   1296: con 30px a los lados la dirección se parte en dos líneas y el recuadro
   crece de 60 a 110px de alto. Con 20px el texto tiene los ~360px que necesita
   para ir en una sola línea, que es como se ve en producción. */
.page-content--cms .contact-info {
  padding: var(--dcu-space-lg);
}

/* Una sola línea, con el interlineado corto del 1.7 (17,5px, no los 25 del
   cuerpo CMS) y sin margen: el recuadro mide 60px de alto en el original. */
.page-content--cms .content-contacto .contacto-row {
  text-align: center;
  line-height: 17.5px;
  margin-bottom: 0;
}

.page-content--cms .contacto-row i {
  margin-right: 7px;
}

/* ⚠️ Los iconos del contenido son de FONT AWESOME (`<i class="fa fa-phone">`),
   que venía con el tema del 1.7 y aquí NO existe: salían como un hueco vacío.
   En vez de cargar otra fuente entera por cuatro iconos, se dibujan con
   Material Icons, que Hummingbird ya trae. Sus glifos van por ligadura, así
   que el nombre del icono se escribe como `content`. Son los únicos cuatro
   `fa-` que hay en todo el contenido CMS (comprobado en las 221 filas). */
.page-content--cms .contacto-row i[class*="fa-"] {
  font-family: "Material Icons", sans-serif;
  font-size: var(--dcu-fs-md);
  font-style: normal;
  line-height: 1;
  vertical-align: -3px;
}

.page-content--cms .contacto-row i.fa-map-marker::before {
  content: "place";
}

.page-content--cms .contacto-row i.fa-phone::before {
  content: "call";
}

.page-content--cms .contacto-row i.fa-envelope-o::before {
  content: "mail_outline";
}

.page-content--cms .contacto-row i.fa-clock-o::before {
  content: "schedule";
}

/* ==========================================================================
   FORMULARIOS DEL MÓDULO ets_contactform7 (2026-08-26)
   Son 9 páginas CMS (Distribuidores, SAT, Contacto, B2B…) con el mismo
   marcado —el del módulo, heredado de Contact Form 7: `.wpcf7-*`—, así que
   esto va una sola vez y vale para todas.
   Medidas del custom.css del 1.7 (bloque `.wpcf7`).
   ========================================================================== */

/* El módulo pinta el nombre del formulario como <h3> ("DISTRIBUIDORES");
   el 1.7 lo esconde: `.wpcf7 h3 { display: none }`. El título de la página
   ya lo da la propia CMS. */
.wpcf7 h3 {
  display: none;
}

/* Etiquetas: peso normal y gris, no el 600 del módulo */
.wpcf7 label {
  display: block;
  margin-bottom: var(--dcu-space-3xs);
  font-size: var(--dcu-fs-sm);
  font-weight: var(--dcu-fw-normal);
  color: var(--dcu-gray);
}

.wpcf7 .wpcf7-form-control-wrap {
  display: block;
  margin-bottom: var(--dcu-space-lg);
}

/* Campos: los del tema. El módulo trae `border: 1px solid rgba(0,0,0,.25)`,
   que es un gris azulado que no existe en la paleta. */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  padding: 8px 12px;
  font-size: var(--dcu-fs-sm);
  line-height: 18px;
  color: var(--dcu-ink);
  background-color: var(--dcu-white);
  border: var(--dcu-border-width) solid var(--dcu-border);
  border-radius: var(--dcu-radius);
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  border-color: var(--dcu-red);
  outline: var(--dcu-border-width) solid var(--dcu-red);
  box-shadow: none;
}

/* Desplegables como los del resto de la tienda.
   El módulo no usa un `<select>` normal: le pega al lado un `<div>` con su
   propia flecha (`.select_arrow`, un chevron hecho con bordes girados) dentro
   de una cajita con filete a la izquierda. Eso es lo que hace que canten
   respecto a los selects del tema. Se esconde ese añadido y se pinta la flecha
   como fondo del propio select, que es como lo hace Bootstrap —y por tanto el
   resto de formularios de la tienda. */
.wpcf7 .wpcf7-form-control-wrap .select_arrow {
  display: none;
}

.wpcf7 select {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236c6c6c' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 10px;
}

/* Maquetación: NO se inventa nada. Cada formulario trae la suya dentro de su
   definición (`ps_ets_ctf_contact_lang.short_code`), con clases de Bootstrap
   por campo: `<div class="col-lg-6 col-md-6 col-sm-12">` para los de media
   fila, `col-lg-12` para los largos y `col-lg-4` en el de SAT, que va a tres.
   Solo falta que el formulario se comporte como una FILA para que esas clases
   surtan efecto — si no, cada columna cae en su propio renglón, que es lo que
   pasaba. Así cada uno de los 9 formularios sale como lo montó el cliente. */
.wpcf7 form {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--dcu-space-md) * -1);
  margin-right: calc(var(--dcu-space-md) * -1);
}

.wpcf7 form>* {
  padding-left: var(--dcu-space-md);
  padding-right: var(--dcu-space-md);
}

/* En móvil todas las columnas del formulario van a ancho completo y el
   canalón negativo sobra: con él los campos se salían 3px por la izquierda
   del texto de la página (Contacto). */
@media (max-width: 767.98px) {
  .wpcf7 form {
    margin-left: 0;
    margin-right: 0;
  }

  .wpcf7 form>* {
    padding-left: 0;
    padding-right: 0;
    /* por debajo de 576 ninguna col-* del cliente aplica y cada columna
       medía lo que su contenido (el comentario salía más estrecho) */
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Las columnas de las CMS de formulario (Contacto, Distribuidores, SAT,
     B2B…) traen `style="padding-right: 50px"` del maquetador del 1.7: en
     escritorio separa texto y formulario, en móvil solo deja un hueco a la
     derecha. Es contenido del BO, por eso el !important. */
  .page-content--cms [class*="col-"][style*="padding-right"] {
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5) !important;
  }
}

/* Lo que no viene en una columna (respuesta, captcha, botón) ocupa la fila.
   ⚠️ El botón suele venir dentro de un <div> SIN clase: sin esto es un item
   de ancho automático y se coloca a la derecha de la columna anterior en vez
   de en su propia fila, que era el hueco raro a la izquierda de "Enviar". */
.wpcf7 form>.wpcf7-response-output,
.wpcf7 form>.wpcf7-submit,
.wpcf7 form>p,
.wpcf7 form>div:has(> .wpcf7-submit),
.wpcf7 form>div:has(> .g-recaptcha) {
  flex: 0 0 100%;
  max-width: 100%;
}

/* El indicador de envío del módulo es un <span> de 16px con
   `visibility: hidden`: sigue ocupando sitio y dejaba un hueco vacío a la
   izquierda del botón "Enviar". Se saca del flujo y solo aparece mientras se
   envía, que es cuando el JS le pone `.is-active`. */
/* ⚠️ El selector lleva `div` a propósito: el módulo lo declara como
   `div.wpcf7 .ajax-loader` (0,2,1) y un `.wpcf7 .ajax-loader` (0,2,0) pierde. */
div.wpcf7 .ajax-loader {
  display: none;
}

div.wpcf7 .ajax-loader.is-active {
  display: inline-block;
  visibility: visible;
  margin-left: var(--dcu-space-2xs);
}

/* --- Ayudas emergentes de los formularios (SAT y B2B) -------------------
   El cliente las escribió DENTRO de la definición del formulario:

     <div class="tool-tip">
       <span class="informacion-form"><i class="icon-info"></i></span>
       <span class="content-info-form">…texto…</span>
     </div>

   Sin CSS que las recoja, ese texto se imprimía suelto bajo la etiqueta (que
   es lo que se veía). El 1.7 lo resuelve solo con CSS —sin JS—: el globo está
   oculto y aparece al pasar por encima del icono.
   ⚠️ El icono es `<i class="icon-info">`, de la fuente de iconos del tema
   viejo, que en PS9 no existe: por eso no se veía ni la "i". Se pinta con
   Material Icons, que Hummingbird ya carga. */
.wpcf7 .tool-tip {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.wpcf7 .informacion-form {
  display: inline-block;
  margin: 0 var(--dcu-space-xs);
  color: var(--dcu-red);
  cursor: help;
  line-height: 1;
}

.wpcf7 .informacion-form .icon-info::before {
  /* E88F = info_outline. El 1.7 usa un círculo de contorno, no relleno */
  content: "\e88f";
  font-family: "Material Icons";
  font-size: 18px;
  font-style: normal;
  line-height: 1;
  vertical-align: middle;
}

.wpcf7 .tool-tip .content-info-form {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  z-index: var(--dcu-z-sticky-header);
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  max-width: 80vw;
  margin-bottom: var(--dcu-space-2xs);
  padding: var(--dcu-space-xs) var(--dcu-space-sm);
  background-color: var(--dcu-ink);
  color: var(--dcu-white);
  font-size: var(--dcu-fs-xs);
  font-style: normal;
  line-height: 1.4;
  text-align: center;
  border-radius: var(--dcu-radius);
  transition: opacity var(--dcu-transition);
}

/* Piquito del globo */
.wpcf7 .tool-tip .content-info-form::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--dcu-ink);
}

.wpcf7 .tool-tip:hover .content-info-form,
.wpcf7 .tool-tip:focus-within .content-info-form {
  visibility: visible;
  opacity: 1;
}

/* Casillas y opciones: en el rojo del tema. El módulo no les pone clase, así
   que no les llega el `.form-check-input` del resto de la tienda y salían con
   el azul del navegador. `accent-color` es la forma corta de teñirlas sin
   rehacer el control entero. */
.wpcf7 input[type="radio"],
.wpcf7 input[type="checkbox"] {
  accent-color: var(--dcu-red);
  width: 15px;
  height: 15px;
  vertical-align: middle;
}

.wpcf7 .wpcf7-list-item-label {
  margin-left: var(--dcu-space-3xs);
  font-size: var(--dcu-fs-sm);
  color: var(--dcu-ink);
  vertical-align: middle;
}

/* Aviso de aceptación: cursiva y pequeño, como el 1.7 */
.wpcf7-acceptance .wpcf7-list-item-label {
  font-size: var(--dcu-fs-xs);
  font-style: italic;
}

.wpcf7-list-item {
  margin-left: 0;
}

/* Casilla/radio y su texto en la MISMA línea. La casilla salía con
   `display:block` (regla general de campos) y el texto caía debajo; con
   flex, si el texto es largo parte bajo sí mismo, no bajo la casilla. */
.wpcf7 .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: var(--dcu-space-2xs);
  margin-bottom: 0;
}

.wpcf7 .wpcf7-list-item label input {
  flex: 0 0 auto;
  margin-top: 5px;
}

.wpcf7 .wpcf7-list-item label .wpcf7-list-item-label {
  margin-left: 0;
}

/* Botón: el del tema. El módulo lo pinta de #2fb5d2 —otra vez el cian de
   PrestaShop classic— y el 1.7 lo tenía en negro con hover invertido; se
   unifica con el botón oscuro del tema, hover incluido. */
.wpcf7 .wpcf7-submit {
  padding: 6px 12px;
  font-size: var(--dcu-fs-sm);
  font-weight: var(--dcu-fw-normal);
  line-height: 21px;
  text-transform: none;
  color: var(--dcu-white);
  background: var(--dcu-btn-dark);
  border: var(--dcu-border-width) solid var(--dcu-btn-dark);
  border-radius: var(--dcu-radius);
  transition: background-color var(--dcu-transition-fast), color var(--dcu-transition-fast);
}

.wpcf7 .wpcf7-submit:hover {
  color: var(--dcu-ink);
  background: var(--dcu-white);
  border-color: var(--dcu-ink);
}

/* Campos de fichero ("Examinar… / Elija el archivo"). El módulo pinta ese
   botón de #2fb5d2 —el cian de PrestaShop classic, cuarta vez que aparece—.
   El 1.7 lo corrige a negro, pero SOLO en la página del SAT (`.cms-id-9`):
   en el resto se quedaba cian. Aquí se unifica en todas. */
.wpcf7 .custom_choosefile .button_choosefile {
  background-color: var(--dcu-btn-dark);
  color: var(--dcu-white);
  font-size: var(--dcu-fs-sm);
  border-radius: var(--dcu-radius);
}

/* El aviso del tamaño máximo ("Tamaño límite: 8mb"), al tono de las ayudas.
   El módulo lo mete en `.file_type_des`, no en `.annotation`. */
.wpcf7 .file_type_des,
.wpcf7 .annotation {
  display: block;
  margin-top: var(--dcu-space-3xs);
  font-size: var(--dcu-fs-2xs);
  font-style: italic;
  color: var(--dcu-gray);
}

/* Errores de validación en el rojo del tema, no en el #f00 del módulo */
.wpcf7 .wpcf7-not-valid-tip {
  color: var(--dcu-red);
  font-size: var(--dcu-fs-2xs);
}

.wpcf7 .wpcf7-response-output {
  margin: var(--dcu-space-md) 0 0;
  padding: var(--dcu-space-sm) var(--dcu-space-md);
  border: 0;
  border-left: 3px solid var(--dcu-gray-mid);
  font-size: var(--dcu-fs-sm);
}

/* ---------- Historial de pedidos ----------
   Hummingbird lo monta como una rejilla con las celdas a 12-14px y pesos 600,
   y el estado en una PÍLDORA redondeada. Se baja al peso 500 del tema y la
   píldora se aplana, que es la estética del resto.
   ⚠️ El COLOR del estado no se toca: sale de `ps_order_state.color`, o sea
   que es dato migrado de producción, no decisión de diseño. */
.order-history__cell,
.order-history__cell:before {
  font-size: var(--dcu-fs-sm);
}

.order-history__cell--reference,
.order-history__cell--total,
.order-history__cell:before {
  font-weight: var(--dcu-fw-medium);
  color: var(--dcu-ink);
}

.order-history__cell--date,
.order-history__cell--payment {
  font-size: var(--dcu-fs-xs);
  color: var(--dcu-gray);
}

.order-history__row {
  border-color: var(--dcu-border);
  border-radius: var(--dcu-radius);
}

.order-history__status.badge {
  border-radius: var(--dcu-radius);
  font-size: var(--dcu-fs-xs);
  font-weight: var(--dcu-fw-normal);
}

/* ---------- Página "Sus direcciones" ----------
   Misma tarjeta que en la caja, pero aquí NO va el bloque gris: el 1.7 las
   pinta en blanco con filete y el pie separado por una línea
   (`.page-addresses .address .address-footer{border-top:1px solid #7a7a7a}`),
   con los enlaces en ese mismo gris. */
body#addresses .address-card {
  border: var(--dcu-border-width) solid var(--dcu-border);
  border-radius: var(--dcu-radius);
}

body#addresses .address-card__alias {
  font-size: var(--dcu-fs-md);
  font-weight: var(--dcu-fw-medium);
  color: var(--dcu-ink);
}

body#addresses .address-card__content {
  font-size: var(--dcu-fs-sm);
  color: var(--dcu-gray-soft);
}

body#addresses .address-card__actions {
  border-top: var(--dcu-border-width) solid var(--dcu-border);
  padding-top: var(--dcu-space-sm);
  font-size: var(--dcu-fs-sm);
}

body#addresses .address-card__actions a {
  color: var(--dcu-gray-mid);
}

body#addresses .address-card__actions a:hover {
  color: var(--dcu-red);
}

body#addresses .address-card--add-address {
  border: var(--dcu-border-width) dashed var(--dcu-border-strong);
  border-radius: var(--dcu-radius);
}

body#addresses .address-card__add-text {
  font-size: var(--dcu-fs-sm);
  color: var(--dcu-gray-soft);
}

/* ---------- Lista de deseos ----------
   Su plantilla (`blockwishlist/views/templates/pages/lists.tpl`) VACÍA el
   bloque `page_header_container`, así que esta página no tiene `.page-header`
   y se queda fuera de la regla general de títulos. El título lo pinta el Vue
   del módulo como un `h1` sin clase dentro de `.wishlist-container-header`,
   con lo que hereda el h1 de Hummingbird: 32px en negrita.
   Centrado como el resto de títulos de la cuenta (decidido 2026-10-08), con
   "Crear nueva lista" DEBAJO y en una sola línea: compartiendo fila, en móvil
   el título se partía en dos y el enlace también.
   ⚠️ El `display:flex; justify-content:space-between` lo inyecta el bundle
   de Vue en un <style> posterior: hace falta el contenedor delante. */
.wishlist-container .wishlist-container-header {
  flex-direction: column;
  align-items: center;
  gap: var(--dcu-space-xs);
  margin-bottom: var(--dcu-space-2xl);
}

.wishlist-container-header h1 {
  font-size: var(--dcu-fs-4xl);
  font-weight: var(--dcu-fw-normal);
  color: var(--dcu-ink);
  text-align: center;
  margin: 0;
}

.wishlist-container .wishlist-add-to-new {
  white-space: nowrap;
}

/* 🔴 Modales de la lista de deseos que se COMÍAN LOS CLICS. El Vue del módulo
   fuerza `display:block` en sus modales cerrados (renombrar, compartir…) y
   confía en `opacity:0; pointer-events:none` para que no estorben. Era así en
   Bootstrap 4, pero Bootstrap 5 devuelve `pointer-events:auto` al
   `.modal-content`: la caja invisible quedaba encima de la página y "Volver a
   tu cuenta" / "Inicio" no respondían (y en móvil, lo que cayera debajo). */
.wishlist-modal:not(.show) {
  visibility: hidden;
}

.wishlist-modal:not(.show) .modal-content {
  pointer-events: none;
}

/* Nombre de cada lista: al tamaño de los títulos de sección del tema.
   ⚠️ Con el selector corto no calaba (el módulo lo deja en `#232323` a 700):
   hace falta el contenedor para ganarle. */
.wishlist-list-container .wishlist-list-item-title,
.wishlist-list-item-title {
  font-size: var(--dcu-fs-md);
  font-weight: var(--dcu-fw-medium);
  color: var(--dcu-ink);
}

/* 🔵 EL AZUL DEL HOVER. El nombre de la lista se pone `#2fb5d2` —el cian de
   PrestaShop classic, el mismo que se barrió del tema en agosto— al pasar por
   encima. No sale en ningún `.css`: la regla
   `.wishlist-list-item:hover .wishlist-list-item-title { color:#2fb5d2 }`
   la inyecta el bundle de Vue del módulo como un `<style>` en la página, así
   que ni se encuentra grepeando los ficheros ni se ve sin hacer hover.
   Ese `<style>` va DESPUÉS de nuestra hoja, así que hace falta más
   especificidad: por eso el selector lleva el contenedor delante. */
.wishlist-list-container .wishlist-list-item:hover .wishlist-list-item-title {
  color: var(--dcu-red);
}

/* El aviso emergente ("Producto añadido") venía en un verde manzana y un rojo
   ladrillo propios del módulo (`#69b92d` / `#b9312d`), inyectados por el mismo
   `<style>` del bundle. Pasan a los colores de feedback del tema.
   El selector lleva `body` delante solo para ganar en especificidad al del
   módulo, que va después en la cascada. */
body .wishlist-toast.success {
  background-color: var(--dcu-success);
  border-color: var(--dcu-success);
}

body .wishlist-toast.error {
  background-color: var(--dcu-danger);
  border-color: var(--dcu-danger);
}

/* Y el FONDO del hover de cada fila, que sale del mismo sitio y del mismo
   cian (`.wishlist-list .wishlist-list-item:hover { background:#ecf8fb }`).
   Pasa al gris muy claro del tema. Aplica en la página de listas y en el
   modal de "Añadir a la lista de deseos". */
.wishlist-list-container .wishlist-list .wishlist-list-item:hover,
.wishlist-chooselist .wishlist-list .wishlist-list-item:hover {
  background: var(--dcu-surface-soft);
}

/* La página de UNA lista (`/module/blockwishlist/view`) no la había tocado
   nadie y se quedaba con el Hummingbird de fábrica: título de 32px en
   negrita, mensaje de vacío en negro puro y los enlaces del pie de otro color
   que en la página de listas. 2026-09-08. */
.wishlist-products-container-header h1 {
  font-size: var(--dcu-fs-4xl);
  font-weight: var(--dcu-fw-normal);
  color: var(--dcu-ink);
  margin: 0;
}

/* ⚠️ Con el selector corto solo cala el tamaño: el peso y el negro puro los
   pone una regla del módulo con más peso en la cascada. Se sube por el
   contenedor. */
.wishlist-products-container .wishlist-list-empty {
  font-size: var(--dcu-fs-sm);
  font-weight: var(--dcu-fw-normal);
  color: var(--dcu-gray);
}

/* ---- La rejilla de productos de una lista (2026-09-08) ----
   El módulo pinta aquí el desplegable de ordenación de PS 1.7
   (`.sort-by-row > .products-sort-order > button.btn-unstyle`), mientras que
   el listado de categoría usa el de Hummingbird. Se le dan las medidas del
   listado —14px, fondo y filete `#ebebeb`, 34px de alto, sin radio— para que
   los dos se vean igual. */
/* ⚠️ La etiqueta lleva `col-sm-3 col-md-3`, clases de Bootstrap 3/4 que en el 5
   ya no existen: se quedaba en 79px y partía "Ordenar / por:" en dos líneas,
   pegada al control. Ancho automático, sin partir y con aire. */
.wishlist-products-container-header .sort-by-row {
  gap: var(--dcu-space-sm);
}

.wishlist-products-container-header .sort-by {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  white-space: nowrap;
  padding: 0;
  font-size: var(--dcu-fs-md);
  color: var(--dcu-ink);
}

.wishlist-products-container-header .products-sort-order {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  padding: 0;
}

.wishlist-products-container-header .products-sort-order .select-title {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dcu-space-2xs);
  /* el mismo ancho que el del listado, con la flecha pegada a la derecha */
  width: 275px;
  max-width: 100%;
  height: 34px;
  padding: 0 var(--dcu-space-lg);
  font-size: var(--dcu-fs-sm);
  color: var(--dcu-ink);
  background-color: var(--dcu-border);
  border: var(--dcu-border-width) solid var(--dcu-border);
  border-radius: 0;
}

.wishlist-products-container-header .products-sort-order .dropdown-menu {
  font-size: var(--dcu-fs-sm);
  border-color: var(--dcu-border);
  border-radius: 0;
  padding: 0;
  /* al menos tan ancho como el botón: si no, opciones como "Precio: de más
     bajo a más alto" se parten en dos líneas (en el listado van en una) */
  min-width: 275px;
}

.wishlist-products-container-header .select-list {
  display: block;
  padding: var(--dcu-space-xs) var(--dcu-space-lg);
  font-size: var(--dcu-fs-xs);
  white-space: nowrap;
  color: var(--dcu-ink);
  text-decoration: none;
}

.wishlist-products-container-header .select-list:hover {
  background-color: var(--dcu-surface-soft);
  color: var(--dcu-red);
}

/* La rejilla, con las medidas del listado (2026-09-08): el módulo pone una
   fila flexible de tarjetas FIJAS de 250px y 45px de sangrado, así que las
   fotos salían más pequeñas que en el listado y la fila no llenaba el ancho.
   El listado es una rejilla de columnas de ~306px con 24 de separación; con
   `auto-fill` salen las mismas cuatro a 1296px y se adapta solo al estrechar. */
.wishlist-products-container .wishlist-products-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 24px;
  padding: 0;
  margin: 0;
}

.wishlist-products-container .wishlist-products-item {
  width: auto;
  margin: 0;
}

/* ⚠️ Y la TARJETA también viene clavada a 250px (con su `max-width`): sin
   soltarla, la foto al 100% se queda en esos 250 aunque la columna mida 306. */
.wishlist-products-container .wishlist-product {
  width: 100%;
  max-width: none;
}

/* La foto, cuadrada y a todo el ancho de su columna, como en el listado
   (el módulo la clava en 15,625rem). El filete claro alrededor es el que el
   listado le pone a la propia `<img>`: es lo que enmarca la tarjeta. */
.wishlist-products-container .wishlist-product .wishlist-product-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border: var(--dcu-border-width) solid var(--dcu-border);
}

/* ⚠️ Y la foto de dentro: el módulo la centra en absoluto con
   `max-width/max-height: 100%`, así que quedaba pequeña y con marco blanco
   alrededor. El listado la estira a toda la caja. */
.wishlist-products-container .wishlist-product .wishlist-product-image img {
  position: static;
  transform: none;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
}

/* El bloque de texto, con el aire del listado (16px arriba, 8 a los lados) */
.wishlist-products-container .wishlist-product .wishlist-product-right {
  padding: var(--dcu-space-md) var(--dcu-space-2xs) 0;
}

/* La tarjeta se lleva el patrón de la miniatura del listado (decisión del
   cliente, 2026-09-08): título en mayúsculas de 15px, precio en rojo oscuro,
   el mismo botón de añadir y SIN la línea de cantidad, que el listado no
   tiene.
   ⚠️ Lo único que no se puede replicar es la REFERENCIA: el componente de Vue
   del módulo no la saca al HTML, así que no hay de dónde cogerla desde el
   tema. Haría falta tocar el módulo. */
.wishlist-product .wishlist-product-title {
  font-size: 15px;
  font-weight: var(--dcu-fw-normal);
  line-height: 20px;
  text-transform: uppercase;
  color: var(--dcu-ink);
}

.wishlist-product .wishlist-product-combinations {
  display: none;
}

/* "Fuera de stock" con el MISMO distintivo del listado (14px blanco sobre el
   rojo de marca, 4/8px de relleno, radio 4, arriba a la izquierda con 8px de
   margen). El módulo lo pinta como un párrafo con un icono `block` en medio de
   la foto y en negro: ni es el sitio ni es la forma.
   La foto ya es `position: relative`, así que basta con anclarlo. */
/* ⚠️ El módulo ya lo tiene absoluto y con `right`/`bottom` puestos: si solo se
   cambian `top`/`left`, la caja se estira de esquina a esquina y el rojo se
   come la foto entera. Hay que soltar los otros dos lados y el tamaño. */
/* ⚠️ Y SOLO cuando el producto lo está: el módulo saca ese párrafo en todas
   las tarjetas y lo deja vacío si hay existencias (por eso salía un
   distintivo rojo en blanco). El marcador es la clase que le pone a la foto. */
.wishlist-product .wishlist-product-image:has(img.wishlist-product-unavailable) .wishlist-product-availability {
  position: absolute;
  display: inline-block;
  top: var(--dcu-space-2xs);
  left: var(--dcu-space-2xs);
  right: auto;
  bottom: auto;
  width: auto;
  min-width: 0;
  height: auto;
  /* ⚠️ Y el `transform: translateX(-50%)` con el que el módulo lo centra: sin
     anularlo, el distintivo se queda medio ancho a la izquierda de la foto. */
  transform: none;
  z-index: 10;
  margin: 0;
  padding: var(--dcu-space-3xs) var(--dcu-space-2xs);
  font-size: var(--dcu-fs-sm);
  font-weight: var(--dcu-fw-normal);
  line-height: var(--dcu-fs-sm);
  color: var(--dcu-white);
  background-color: var(--dcu-red);
  border-radius: 4px;
}

/* Y al revés: si hay existencias, ese párrafo va vacío y hay que esconderlo a
   mano — el módulo lo deja visible y salía un distintivo rojo en blanco. */
.wishlist-product .wishlist-product-image:not(:has(img.wishlist-product-unavailable)) .wishlist-product-availability {
  display: none;
}

/* El icono del módulo sobra: el distintivo del listado es solo texto */
.wishlist-product .wishlist-product-availability .material-icons {
  display: none;
}

/* Y el duplicado que el módulo saca para móvil, fuera: el de la foto ya se ve
   en todos los anchos. */
.wishlist-product .wishlist-product-availability-responsive {
  display: none;
}

/* El mismo juego del listado: en reposo se ve el PRECIO y, al pasar por la
   tarjeta, el precio se desvanece subiendo 15px y en su sitio aparece el
   botón de añadir. En el listado lo hacen `.product-miniature__prices` y
   `.product-miniature__actions`, superpuestos y con la misma transición.
   ⚠️ Aquí el botón se saca de su sitio pero NO se toca
   `.wishlist-product-bottom`: dentro va también la papelera, y si se
   desvaneciera el bloque entero la papelera desaparecería con él (la opacidad
   del padre arrastra a los hijos, aunque estén posicionados aparte). */
.wishlist-products-container .wishlist-product {
  padding-bottom: 41px;
}

.wishlist-products-container .wishlist-product .wishlist-product-price,
.wishlist-products-container .wishlist-product .wishlist-product-addtocart {
  position: absolute;
  left: var(--dcu-space-2xs);
  right: var(--dcu-space-2xs);
  bottom: 0;
  /* ⚠️ `width: auto` a propósito: el módulo le pone `width: 100%` al botón y,
     con un ancho fijo, el `right: 8px` se ignora y se sale 8px por la derecha */
  width: auto;
  height: 41px;
  margin: 0;
  display: flex;
  align-items: center;
  background-color: var(--dcu-white);
  transition: opacity 0.3s ease, bottom 0.3s ease;
}

.wishlist-products-container .wishlist-product:hover .wishlist-product-price {
  opacity: 0;
  bottom: 15px;
}

.wishlist-products-container .wishlist-product .wishlist-product-addtocart {
  opacity: 0;
  bottom: -15px;
  justify-content: center;
}

.wishlist-products-container .wishlist-product:hover .wishlist-product-addtocart,
.wishlist-products-container .wishlist-product:focus-within .wishlist-product-addtocart {
  opacity: 1;
  bottom: 0;
}

/* El botón de añadir, con las mismas variables que el del listado: plano y
   sin filete, y al pasar por encima se pone rojo. */
.wishlist-product .wishlist-product-addtocart {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-color: var(--dcu-ink);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-hover-color: var(--dcu-red);
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-color: var(--dcu-red);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-disabled-color: var(--dcu-gray-mid);
  font-size: var(--dcu-fs-xs);
  font-weight: var(--dcu-fw-medium);
  text-transform: uppercase;
}

/* El precio de la tarjeta, igual que en el listado (18px/500 en rojo oscuro):
   el módulo lo deja en negrita casi negra y no se parece a ningún precio del
   sitio. */
.wishlist-product .wishlist-product-price {
  font-size: var(--dcu-fs-lg);
  font-weight: var(--dcu-fw-medium);
  color: var(--dcu-red-dark);
}

/* La papelera de quitar, con el mismo aspecto que el corazón del listado:
   2,5rem, sin caja y en el gris de los iconos secundarios, rojo al pasar.
   ⚠️ Va en `@layer vendors` porque el módulo pinta ese botón y su icono desde
   el `<style>` que inyecta su bundle, y desde fuera no se le gana.
   ⚠️ Se queda ARRIBA a la derecha, no abajo como el corazón del listado: el
   botón cuelga de `.wishlist-product-bottom`, fuera de la caja de la foto, y
   anclarlo al pie de la imagen exigiría moverlo de sitio con JS. Si se quiere
   exactamente en esa esquina, ese es el precio. */
@layer vendors {
  .wishlist-product .wishlist-product-bottom .wishlist-button-add {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
    background: var(--dcu-white) !important;
    border: var(--dcu-border-width) solid var(--dcu-border) !important;
    border-radius: var(--dcu-radius-circle) !important;
    box-shadow: none !important;
    transition: background-color var(--dcu-transition), border-color var(--dcu-transition) !important;
  }

  .wishlist-product .wishlist-product-bottom .wishlist-button-add i {
    font-size: 20px !important;
    color: var(--dcu-gray) !important;
    transition: color var(--dcu-transition) !important;
  }

  .wishlist-product .wishlist-product-bottom .wishlist-button-add:hover {
    background: var(--dcu-red) !important;
    border-color: var(--dcu-red) !important;
  }

  .wishlist-product .wishlist-product-bottom .wishlist-button-add:hover i {
    color: var(--dcu-white) !important;
  }
}

/* Los dos enlaces del pie ("Volver a…" e "Inicio") salían DISTINTOS según la
   página: en la de listas el módulo les pone `.text-primary` (rojo de marca) y
   en la de una lista no les pone nada (gris oscuro). Se igualan con el color
   de enlace del tema, que además es el que menos grita. */
.wishlist-footer-links a {
  color: var(--dcu-ink);
}

.wishlist-footer-links a:hover,
.wishlist-footer-links a:hover .material-icons {
  color: var(--dcu-red);
}

/* Estas dos páginas son parte de la cuenta aunque no lleven su columna, así
   que tampoco pintan migas. El enganche son sus contenedores propios: la
   ficha de producto también tiene clases `wishlist-*` (el corazón) y no debe
   entrar aquí. */
body:has(.wishlist-products-container, .wishlist-list-container) .breadcrumb__wrapper .breadcrumb {
  visibility: hidden;
}

/* ⚠️ `.text-primary` es una utilidad de Bootstrap: vive en la capa
   `utilities` y lleva `!important`. Para las declaraciones `!important` el
   orden de capas se INVIERTE y lo no encapsulado es lo más débil, así que una
   regla nuestra sin capa no gana ni con `!important`. Por eso va en
   `@layer vendors`, la primera del orden que declara el tema. */
@layer vendors {

  .wishlist-footer-links a.text-primary,
  .wishlist-footer-links a.text-primary .material-icons {
    color: var(--dcu-ink) !important;
  }

  .wishlist-footer-links a.text-primary:hover,
  .wishlist-footer-links a.text-primary:hover .material-icons {
    color: var(--dcu-red) !important;
  }
}

/* Carrito: icono + contador plano al lado (el 1.7 no pinta la palabra "Carrito") */
.dcu-header__actions #_desktop_ps_shoppingcart {
  order: 3;
  padding: 0 5px 0 20px;
  /* separación del 1.7 (bloque de 57 px) */
}

.dcu-header__actions .ps-shoppingcart .header-block__title {
  font-size: 0 !important;
  visibility: hidden;
  padding: 0;
  margin: 0;
  letter-spacing: 0;
}

.dcu-header__actions .ps-shoppingcart .header-block__badge {
  position: static;
  background: transparent;
  color: var(--dcu-ink);
  font-size: 12px;
  font-weight: 500;
  min-width: 0;
  padding: 0;
  margin-left: 6px;
  border: 0;
  transform: none;
}

/* ---------- Preview de la cesta (desplegable en hover, réplica del 1.7) ---------- */
.dcu-header__actions .ps-shoppingcart .blockcart {
  position: relative;
}

.dcu-cart-preview {
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .35s ease, transform .35s ease;
  position: absolute;
  top: 100%;
  right: 0;
  width: 320px;
  padding: 15px;
  background: var(--dcu-white);
  border: 1px solid var(--dcu-border-strong);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
  z-index: 1080;
  text-align: left;
}

.dcu-header__actions .ps-shoppingcart .blockcart:hover .dcu-cart-preview,
.dcu-header__actions .ps-shoppingcart .blockcart:focus-within .dcu-cart-preview {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.dcu-cart-preview__list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
  /* Barra de desplazamiento fina. La nativa de Windows son ~17px con flechas
     y se come el ancho del panel. `scrollbar-width/color` es el estándar
     (Firefox y Chrome 121+); el bloque ::-webkit- de abajo cubre los Chrome
     y Safari anteriores. Solo se aplica AQUÍ, no al scroll de la página. */
  scrollbar-width: thin;
  scrollbar-color: var(--dcu-border-strong) transparent;
}

.dcu-cart-preview__list::-webkit-scrollbar {
  width: 6px;
}

.dcu-cart-preview__list::-webkit-scrollbar-track {
  background: transparent;
}

.dcu-cart-preview__list::-webkit-scrollbar-thumb {
  background: var(--dcu-border-strong);
  border-radius: var(--dcu-radius);
}

.dcu-cart-preview__list::-webkit-scrollbar-thumb:hover {
  background: var(--dcu-gray-faint);
}

.dcu-cart-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--dcu-border);
}

.dcu-cart-line__img {
  flex: 0 0 56px;
}

.dcu-cart-line__img img {
  width: 56px;
  height: auto;
  border: 1px solid var(--dcu-border);
}

.dcu-cart-line__info {
  flex: 1 1 auto;
  min-width: 0;
}

.dcu-cart-line__name {
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--dcu-slate);
}

.dcu-cart-line__name:hover {
  color: var(--dcu-red);
}

.dcu-cart-line__price {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--dcu-ink);
}

.dcu-cart-line__price strong {
  color: var(--dcu-red);
  font-weight: 600;
}

/* La papelera iba en --dcu-gray-faint (#999) y a 18px se veía lavada, casi
   emborronada: el icono es una ligadura de Material Icons y con tan poco
   contraste el antialiasing se come el trazo. Pasa al gris secundario del
   tema, que es el que usan el resto de metadatos. El hover en rojo se queda. */
.dcu-cart-line__remove {
  flex: 0 0 auto;
  color: var(--dcu-gray);
  line-height: 1;
}

.dcu-cart-line__remove:hover {
  color: var(--dcu-red);
}

.dcu-cart-line__remove .material-icons {
  font-size: 18px;
}

.dcu-cart-preview__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 15px;
  font-weight: 600;
}

.dcu-cart-preview__total .value {
  color: var(--dcu-red);
}

.dcu-cart-preview__checkout {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  text-align: center;
  border: 1px solid var(--dcu-btn-dark);
  background: var(--dcu-white);
  color: var(--dcu-ink);
  border-radius: 0;
  font-size: 14px;
}

.dcu-cart-preview__checkout:hover {
  background: var(--dcu-btn-dark);
  color: var(--dcu-white);
}

/* Buscador: icono que expande el input al click/focus (el 1.7 abre un desplegable).
   ⚠️ El módulo trae .order-2 con !important en un cascade layer de Bootstrap —
   imbatible desde aquí: se ordenan los hermanos alrededor. */
.dcu-header__actions #_desktop_ps_searchbar {
  margin-inline-start: 0 !important;
  /* anula el ms-auto del módulo */
  padding: 0 20px;
}

.dcu-header__actions .ps-searchbar {
  min-width: 0;
  /* HB pone min-width:19rem y deja un hueco de 300px colapsado */
  margin-block: 0;
}

.dcu-header__actions .ps-searchbar__form {
  display: flex;
  align-items: center;
}

.dcu-header__actions .ps-searchbar__magnifier {
  position: static;
  /* HB la pone absolute → con el input colapsado flotaba sobre el carrito */
  transform: none;
  cursor: pointer;
}

.dcu-header__actions .ps-searchbar__input {
  width: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  transition: width .25s ease, opacity .2s ease;
}

.dcu-header__actions .ps-searchbar__form:focus-within .ps-searchbar__input,
.dcu-header__actions .ps-searchbar.is-open .ps-searchbar__input {
  width: 200px;
  opacity: 1;
  /* 38px a la derecha: la × de borrar ocupa 23px a 12px del borde; con 8px el texto pasaba por debajo */
  padding: 4px 38px 4px 8px;
  border: 0;
  border-bottom: 1px solid var(--dcu-ink);
  border-radius: 0;
}

/* El buscador se marca con su subrayado: sin el contorno rojo de foco del resto de formularios */
.dcu-header__actions .ps-searchbar__input:focus,
.dcu-header__actions .ps-searchbar__input:focus-visible {
  outline: 0;
  box-shadow: none;
}

/* ---------- Selector de idioma: "ESP ▾" con los nombres completos desplegados ----------
   (el <select> nativo de HB no puede mostrar una etiqueta corta y opciones largas:
   custom.js lo sustituye por este dropdown y lo deja oculto) */
.dcu-header__actions #_desktop_ps_languageselector {
  order: 4;
}

.dcu-header__actions .ps-languageselector .js-language-selector {
  display: none;
}

.dcu-lang {
  position: relative;
  padding: 0 15px;
}

.dcu-lang__btn {
  display: flex;
  align-items: center;
  gap: 2px;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--dcu-ink);
  font-size: 14px;
  line-height: 62px;
  cursor: pointer;
}

/* Mismo chevron que los ítems del menú (expand_more a 16px y #292929) */
.dcu-lang__btn .material-icons {
  font-size: 16px;
  color: var(--dcu-ink);
}

.dcu-lang__menu {
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .35s ease, transform .35s ease;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 160px;
  list-style: none;
  margin: 0;
  padding: 10px;
  background: var(--dcu-white);
  border: 1px solid rgba(0, 0, 0, .15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
  z-index: 1080;
}

.dcu-lang:hover .dcu-lang__menu,
.dcu-lang:focus-within .dcu-lang__menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.dcu-lang__menu a {
  display: block;
  font-size: 14px;
  line-height: 25px;
  color: var(--dcu-ink);
  white-space: nowrap;
}

.dcu-lang__menu a:hover,
.dcu-lang__menu a.current {
  color: var(--dcu-red);
}

.header-bottom__container {
  padding: 0 50px;
}

.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree>li .ps-mainmenu__tree-link:focus {
  outline: .125rem solid transparent;
}


/* breadcrumb — global (el 1.7 lo pinta igual en todas las páginas: 25px bajo
   el header, 30px hasta el contenido y tipografía gris de 14px) */
.breadcrumb__wrapper {
  background-color: transparent;
  padding-top: 25px;
  margin-bottom: 30px;
  font-size: 14px;
}

.breadcrumb__wrapper a,
.breadcrumb__wrapper li {
  font-size: 14px;
  color: var(--dcu-gray);
}

.breadcrumb {
  border-bottom: 1px solid var(--dcu-border);
}

/* En la ficha, sin el nombre del producto: ya es el H1 de justo debajo. Como
   el 1.7 (body#product .breadcrumb ol li:last-child{display:none}). */
body#product .breadcrumb .breadcrumb-item:last-child {
  display: none;
}

/* En móvil Hummingbird pone las migas en UNA línea con scroll horizontal
   oculto: la última se cortaba ("Smartwatches y accesorios / Sm"). Saltan a
   varias líneas, como en escritorio. */
@media (max-width: 767.98px) {
  .breadcrumb {
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: var(--dcu-space-3xs);
  }

  /* y el texto de cada miga también parte: el nombre de un producto largo
     ("Auriculares Bluetooth ANC + ENC…") no cabe ni en una línea entera */
  .breadcrumb .breadcrumb-item {
    white-space: normal;
    min-width: 0;
  }
}


/* Productos Destacados */

.ps-featuredproducts .module-products container h2 {
  text-align: center;
  margin-bottom: 30px;
  font-size: 30px;
  font-weight: 400;
}

/* Botón secundario "outline": transparente con borde, se rellena al pasar.
   ANTES (hasta 2026-08-25) esto era un botón NEGRO MACIZO: la variante
   mentía y, al estar declarada en global, cualquier botón outline del
   sitio salía negro, viniera del tema o de un módulo. Además arrastraba
   el azul de Hummingbird en el halo de foco (11,105,246).
   El único sitio donde se veía era "Ver más detalles" del listado, que
   la tienda 1.7 NO tiene (sus miniaturas solo llevan quick-view). */
.btn-outline-primary {
  --bs-btn-color: var(--dcu-ink);
  --bs-btn-border-color: var(--dcu-ink);
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--dcu-white);
  --bs-btn-hover-bg: var(--dcu-ink);
  --bs-btn-hover-border-color: var(--dcu-ink);
  --bs-btn-focus-shadow-rgb: var(--dcu-red-rgb);
  --bs-btn-active-color: var(--dcu-white);
  --bs-btn-active-bg: var(--dcu-red-dark);
  --bs-btn-active-border-color: var(--dcu-red-dark);
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: var(--dcu-gray-mid);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--dcu-border);
  --bs-gradient: none;
}

/* Slider */
.ps-imageslider__figcaption {

  backdrop-filter: none;
  background-color: transparent;
  border-radius: 0px;
  -webkit-backdrop-filter: none;
  margin-bottom: 6%;
}

.carousel-indicators {
  height: 10px;
  width: 10px;
  border-radius: 72px;
}

figcaption h2 {
  color: var(--dcu-white);
  font-size: 70px;
  padding-bottom: 124px;
  font-family: 'Nord' !important;
}

figcaption p {
  font-size: 24px;
  text-align: center;
  font-weight: 500;
}

.carousel-control-next-icon::before,
.carousel-control-prev-icon::before {
  font-size: 30px;
}


.carousel-control-next-icon,
.carousel-control-prev-icon {
  align-items: center;
  background-color: transparent;
  border-radius: 40px;
  display: flex;
  justify-content: center;
  border: 1px white solid;
  height: 3.5rem;
  width: 3.5rem;
}

.carousel-control-next-icon::before,
.carousel-control-prev-icon::before {
  color: white;
  font-size: 49px;
}

.carousel-caption {
  left: 18%;
  right: 18%;
}



/* ---------- Home: placeholders Noticias / DCU Community ---------- */
.dcu-placeholder {
  padding: 30px 0 30px;
  text-align: center;
}

.dcu-placeholder h3 {
  color: var(--dcu-ink);
  font-size: 30px;
  font-weight: 400;
  margin-bottom: 20px;
}

.dcu-placeholder .dcu-ph-body {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--dcu-gray-light);
  color: var(--dcu-gray-faint);
  font-size: 24px;
  letter-spacing: 6px;
}

/*Featured Products*/

.section-title {
  color: var(--dcu-ink);
  font-size: 30px;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;

}


/* BLOG */


.sedestral .blog-content h1 {
  display: none;
}

.sedestral.blog-list .blog-post {
  flex: 1 1 calc(var(--sedestral-card-width, 50%) - var(--sedestral-cards-gap, 20px));
  max-width: 386px;
  box-sizing: border-box;
  border: 0px solid var(--sedestral-border, var(--dcu-border-strong));
  padding: 10px;
  background-color: var(--sedestral-bg-card, var(--dcu-white));
  box-shadow: none;
  border-radius: var(--sedestral-radius, 6px);
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
}

/* Titular de la tarjeta, con las medidas del blog del 1.7 (2026-09-08): es
   el <a> de dentro de su h3, 18px/500 y `capitalize` — por eso en el original
   se lee "Catálogo 2026 Ya Disponible". El #5c5c5c que trae el módulo no es
   ningún gris del tema. */
.sedestral.blog-list .blog-post h2 {
  font-size: var(--dcu-fs-lg);
  font-weight: var(--dcu-fw-medium);
  color: var(--dcu-ink);
  line-height: 30px;
  text-transform: capitalize;
  margin: 0 0 var(--dcu-space-md);
}

.sedestral.blog-container-home h2 {
  color: #000;
  font-size: 36px;
  text-align: center;
  padding: 20px;
  font-weight: 500;
  font-family: var(--bs-body-font-family);
}

.sedestral.blog-container-home .blog-link h2 {
  text-align: left;
  padding: 0px;
}

.sedestral.blog-pagination a,
.sedestral.blog-pagination span {
  padding: 10px 15px;
  border-radius: 0px;
}

.sedestral.blog-next-button a {
  display: inline-block;
  padding: 10px 24px;
  text-decoration: none;
  border: 1px solid var(--dcu-btn-dark);
  border-radius: 0px;
  background-color: var(--dcu-btn-dark);
  color: var(--dcu-white);
  transition: all 0.2s ease;
}

.sedestral.blog-next-button a:hover {
  background-color: var(--dcu-white);
  border-color: var(--dcu-btn-dark);
  color: var(--dcu-btn-dark);
}


/* ---------- Footer (réplica del 1.7: zona oscura #222 con carrusel, logos y columnas) ---------- */
/* Colores del 1.7: zona principal #292929 y barra de copyright #1e1e1e */
.footer__main {
  background-color: var(--dcu-surface-dark);
  color: var(--dcu-white);
  font-family: var(--bs-body-font-family);
  padding-top: 0;
  padding-bottom: 0;
}

/* Barra inferior (más oscura, a todo el ancho) con el aviso de copyright */
.footer__main .dcu-footer-copy {
  background-color: var(--dcu-ink-deep);
  padding: 15px 12px;
  margin-top: 20px;
}

.footer__main .dcu-footer-copy span {
  color: var(--dcu-gray-soft);
  font-size: 13px;
}

/* Títulos de bloques */
.footer__main .footer-block__title {
  color: var(--dcu-white);
  font-size: 18px;
  font-weight: 400;
  line-height: 18px;
  text-transform: uppercase;
  margin-bottom: 20px;
  letter-spacing: normal;
}

/* Enlaces y listas */
.footer__main .footer-block__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Blancos como en el 1.7 (allí enlaces y textos del footer van a #fff, no a gris).
   Interlineado único de 28,6px en TODAS las columnas (enlaces, párrafos y datos de
   contacto): si cada bloque usa el suyo, la primera línea de cada columna cae a una
   altura distinta y el bloque se ve desalineado bajo los títulos. */
.footer__main .footer-block__list li,
.footer__main .footer-block__text,
.footer__main .footer-block__list--contact .contact-desc {
  line-height: 28.6px;
}

.footer__main .footer-block__list a {
  color: var(--dcu-white);
  text-decoration: none;
  font-size: 14px;
  line-height: 28.6px;
  padding: 0;
  transition: color 0.2s ease;
  display: block;
}

.footer__main .footer-block__list a:hover {
  color: var(--dcu-red);
}

.calendly-badge-widget .calendly-badge-content {
  background-image: linear-gradient(80deg, rgb(157, 28, 5), rgb(176, 27, 67)) !important;
}

.calendly-badge-widget {
  right: auto !important;
  left: 20px;
}

/* WhatsApp oculto en todas las resoluciones: el cliente lo quito del 1.7 el
   2026-09-08 (regla "Ocultar Wpp" de su custom.css). Las reglas de posicion se
   dejan por si lo vuelven a querer: basta con borrar el display:none. */
.float-whatsapp {
  display: none !important;
  position: fixed;
  left: auto !important;
  bottom: 32px;
  right: 12px;
  z-index: 999999999;
}

/* Textos informativos */
.footer-block__text {
  color: var(--dcu-white);
  font-size: 13px;
  line-height: 1.6;
}

.footer-block__list--contact .contact-desc {
  color: var(--dcu-white);
  font-size: 13px;
  line-height: 1.8;
  display: block;
}

/* Grid de 5 columnas personalizado para escritorio */
@media (min-width: 992px) {
  .dcu-footer-cols .col-lg-2-4 {
    flex: 0 0 18.5%;
    max-width: 18.5%;
  }

  .dcu-footer-cols .col-lg-3-6 {
    flex: 0 0 26%;
    max-width: 26%;
  }
}

/* Alineación centrada en móvil para las columnas del pie */
@media (max-width: 767.98px) {
  .dcu-footer-cols {
    text-align: center;
  }

  .dcu-footer-cols .col-12,
  .dcu-footer-cols .footer-block__title,
  .dcu-footer-cols .footer-block__text,
  .dcu-footer-cols .footer-block__list,
  .dcu-footer-cols .footer-block__list li,
  .dcu-footer-cols .footer-block__list a,
  .dcu-footer-cols .contact-desc {
    text-align: center !important;
  }

  .dcu-footer-cols img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .dcu-footer-cols .dcu-social-icons,
  .dcu-footer-cols .ps-socialfollow {
    text-align: center;
  }

  .dcu-footer-cols .dcu-social-icons .ps-socialfollow ul,
  .dcu-social-icons .ps-socialfollow ul {
    justify-content: center !important;
    width: 100%;
  }
}

/* Fila de garantías (reassurance) del footer de INVERSORES — réplica EXACTA del
   bloque `.address-dcu2.footer-inversores` de producción (medido 2026-09-23):
   6 iconos en **2 FILAS DE 3**, iconos al **40%** y **opacity .4** (apagados a
   propósito), etiquetas **grises** (#757575), contenedor ~765px centrado (no a
   todo el ancho). Bloque solo-shop2 (el footer.tpl lo envuelve en {if $shop.id==2}).
   Fondo transparente: hereda el #292929 del pie. */
.dcu-reassurance {
  padding: 40px 0 20px;
}

.dcu-reassurance__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 3 por fila -> 2 filas de 3, como prod */
  max-width: 780px;
  /* ~765 de prod: no se despliega a todo el ancho */
  margin: 0 auto;
  row-gap: 20px;
}

@media (max-width: 575px) {
  .dcu-reassurance__row {
    grid-template-columns: repeat(2, 1fr);
  }

  /* prod col-xs-6 */
}

.dcu-reassurance__item {
  text-align: center;
}

.dcu-reassurance__item img {
  display: block;
  margin: 0 auto 20px;
  max-width: 40%;
  /* ~95px sobre la columna, igual que producción */
  height: auto;
  opacity: 0.4;
  /* apagado a propósito, como producción */
}

.dcu-reassurance__item span {
  display: block;
  color: var(--dcu-gray-mid);
  /* #7a7a7a ~ #757575 de prod (NO blanco) */
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}

.dcu-reassurance__item a {
  text-decoration: none;
  color: var(--dcu-gray-mid);
  transition: color 0.2s ease;
}

.dcu-reassurance__item a:hover span {
  color: var(--dcu-red);
}

/* Banda "Noticias" de la home (override de sedestral displayHome).
   Título y subtítulo con el estilo de sección del tema, no el azul del módulo. */
.dcu-noticias {
  padding: 30px 0;
}

.dcu-noticias__title {
  text-align: center;
  font-size: 30px;
  font-weight: 400;
  color: var(--dcu-ink);
  margin: 0 0 8px;
}

.dcu-noticias__subtitle {
  text-align: center;
  font-size: 16px;
  color: var(--dcu-gray);
  margin: 0 auto 30px;
  max-width: 720px;
}

@media (max-width: 767.98px) {
  .dcu-noticias__subtitle {
    padding: 0 10px;
  }
}


/* 1. Carrusel de Trusted Shops */
.dcu-reviews-section {
  background-color: var(--dcu-surface-dark);
  padding: 3rem 0 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.dcu-reviews__container {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Firefox */
  padding: 0.5rem 0.25rem;
  align-items: stretch;
}

.dcu-reviews__container::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}

/* Flechas de navegación */
.dcu-reviews__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.4);
  color: var(--dcu-white);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.dcu-reviews__arrow:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.dcu-reviews__arrow--left {
  left: -15px;
}

.dcu-reviews__arrow--right {
  right: -15px;
}

.dcu-reviews__arrow .material-icons {
  font-size: 20px;
}

/* Tarjeta resumen (Excelente) */
.dcu-reviews__summary {
  background-color: var(--dcu-white);
  color: var(--dcu-ink);
  border-radius: 8px;
  padding: 1.25rem 1rem;
  flex: 0 0 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.dcu-reviews__summary-stars {
  color: #ff7a00;
  display: flex;
  gap: 1px;
  margin-bottom: 0.25rem;
}

.dcu-reviews__summary-stars .material-icons {
  font-size: 18px;
}

.dcu-reviews__summary-score {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
}

.dcu-reviews__summary-label {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.dcu-reviews__summary-logo {
  display: flex;
  justify-content: center;
}

.ts-logo-svg {
  width: 28px;
  height: 28px;
}

/* Tarjetas de opinión */
.dcu-reviews__card {
  background-color: var(--dcu-white);
  color: var(--dcu-btn-dark);
  border-radius: 8px;
  padding: 1.25rem;
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  font-size: 12px;
  line-height: 1.4;
}

.dcu-reviews__card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.35rem;
}

.dcu-reviews__card-stars {
  color: #ff7a00;
  display: flex;
  gap: 1px;
}

.dcu-reviews__card-stars .material-icons {
  font-size: 16px;
}

.dcu-reviews__verified {
  color: var(--dcu-success);
  font-size: 16px;
}

.dcu-reviews__card-meta {
  color: var(--dcu-gray-mid);
  font-size: 11px;
  margin-bottom: 0.5rem;
}

.dcu-reviews__card-title {
  font-weight: 700;
  color: var(--dcu-ink);
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dcu-reviews__card-body {
  color: var(--dcu-gray-warm);
  margin-bottom: 0.5rem;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dcu-reviews__card-more {
  color: var(--dcu-ink);
  text-decoration: none;
  font-weight: 500;
  align-self: flex-start;
}

.dcu-reviews__card-more:hover {
  text-decoration: underline;
}

/* 2. Logos de Pago Seguro */
.dcu-payment-logos {
  margin-top: 1rem;
}

.dcu-pay-icon {
  color: var(--dcu-gray-mid);
  transition: color 0.2s ease, opacity 0.2s ease;
  cursor: pointer;
}

.dcu-pay-icon:hover {
  color: var(--dcu-white);
}

.dcu-bank-transfer {
  color: var(--dcu-gray-mid);
  font-weight: 700;
  font-size: 8px;
  line-height: 1.1;
  transition: color 0.2s ease;
  cursor: pointer;
}

.dcu-bank-transfer:hover {
  color: var(--dcu-white);
}

.dcu-bizum {
  color: var(--dcu-gray-mid);
  transition: color 0.2s ease;
  cursor: pointer;
}

.dcu-bizum:hover {
  color: var(--dcu-white);
}

/* 3. Iconos Sociales en Sobre DCU
   Los pinta `ps_socialfollow` vía {widget} desde footer.tpl (antes eran cuatro
   <a> con las URLs a pelo en la plantilla). Su marcado es
   `.ps-socialfollow > .container > ul > li > a > svg`, con el SVG en
   `fill: currentColor`: basta con dar color al enlace.
   Medidas del 1.7 (`.laber-social`): círculo de 40px, filete de 2px y el icono
   en blanco. Los 30px con filete casi invisible que había antes eran del
   bloque de rodo, no del original. */
.dcu-social-icons .ps-socialfollow .container {
  width: auto;
  max-width: none;
  padding: 0;
}

.dcu-social-icons .ps-socialfollow a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--dcu-radius-circle);
  border: var(--dcu-border-width-thick) solid var(--dcu-border-dark);
  color: var(--dcu-white);
  transition: background-color var(--dcu-transition-fast), border-color var(--dcu-transition-fast), color var(--dcu-transition-fast);
}

.dcu-social-icons .ps-socialfollow a:hover {
  border-color: var(--dcu-red);
  color: var(--dcu-red);
}

.dcu-social-icons .ps-socialfollow svg {
  width: 16px;
  height: 16px;
}

/* El módulo trae utilidades de Bootstrap que aquí estorban: `py-4` le mete
   24px arriba y abajo, `justify-content-center` centra los iconos en la
   columna y `p-2` rellena el enlace por dentro. Las tres viven en la capa
   `utilities` CON `!important`, así que hay que anularlas desde una capa
   anterior — misma técnica que el corazón de favoritos del listado. */
@layer vendors {
  .dcu-social-icons .ps-socialfollow {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  @media (min-width: 768px) {
    .dcu-social-icons .ps-socialfollow ul {
      justify-content: flex-start !important;
    }
  }

  @media (max-width: 767.98px) {
    .dcu-social-icons .ps-socialfollow ul {
      justify-content: center !important;
    }
  }

  .dcu-social-icons .ps-socialfollow ul {
    gap: 8px !important;
  }

  .dcu-social-icons .ps-socialfollow a {
    padding: 0 !important;
  }
}

/* 4. Separador horizontal y Sub-barra */
.dcu-footer-hr {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  opacity: 1;
}

.dcu-footer-sublinks a {
  color: var(--dcu-gray-faint);
  text-decoration: none;
  font-size: 13px;
  margin: 0 0.5rem;
  transition: color 0.2s ease;
}

.dcu-footer-sublinks a:hover {
  color: var(--dcu-white);
}

.dcu-footer-sublinks .sublinks-sep {
  color: rgba(255, 255, 255, 0.15);
}

@media (max-width: 767.98px) {
  .dcu-footer-sublinks a {
    color: #fff;
    font-size: 14px;
  }
}

.dcu-footer-copy {
  color: var(--dcu-gray-soft);
  font-size: 12px;
}

/* ---------- Newsletter Section (Banda beige con imagen de fondo) ---------- */
.ps-emailsubscription {
  background-image: url("/img/cms/newsletter-background.jpg") !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: bottom center !important;
  color: var(--dcu-btn-dark);
  /* Alto de la sección como en el 1.7 (.laberFooter-top: 80px arriba y abajo).
     !important porque el bloque trae las utilidades py-4 py-lg-5 de Bootstrap. */
  padding: 80px 0 !important;
  border-top: 1px solid var(--dcu-border);
  border-bottom: 1px solid var(--dcu-border);
}

.ps-emailsubscription .newsletter-title {
  color: #a85c71 !important;
  font-size: 40px;
  line-height: 1.5;
  /* El 1.7 (.discount-newsletter) usa Rubik Medium, no Bold */
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  text-align: center;
}

.ps-emailsubscription .newsletter-title span {
  padding: 1px 25px;
  color: #a85c71;
}

.ps-emailsubscription .newsletter-subtitle {
  color: var(--dcu-ink) !important;
  font-size: 18px;
  /* Medidas del 1.7: 25px de interlineado, 675px de ancho y 30px hasta el input
     (!important: el párrafo trae mb-4 de Bootstrap) */
  line-height: 25px;
  max-width: 675px;
  margin: 0 auto 30px auto !important;
  text-align: center;
}

.ps-emailsubscription .newsletter-form-container {
  max-width: 557px;
  margin: 0 auto;
}

.ps-emailsubscription form {
  margin: 0;
}

.ps-emailsubscription .form-control {
  background-color: var(--dcu-white) !important;
  border: 1px solid var(--dcu-border-strong) !important;
  height: 50px;
  font-size: 16px;
  padding-left: 15px;
  color: var(--dcu-btn-dark);
  border-radius: 0 !important;
  text-align: center;
  /* Separación input → botón del 1.7 (!important: el input trae mb-3) */
  margin-bottom: 35px !important;
}

.ps-emailsubscription .form-control::placeholder {
  color: var(--dcu-gray-faint);
  font-style: italic;
}

.ps-emailsubscription .btn-newsletter-subscribe {
  height: 50px;
  padding: 10px 60px;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.5px;
  /* En el 1.7 el botón va en caja normal ("Suscribirse"), no en mayúsculas */
  text-transform: none;
  background-color: transparent !important;
  border: 1px solid var(--dcu-white) !important;
  color: var(--dcu-white) !important;
  cursor: pointer;
  border-radius: 0 !important;
  display: inline-block;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.ps-emailsubscription .btn-newsletter-subscribe:hover {
  background-color: var(--dcu-white) !important;
  color: var(--dcu-btn-dark) !important;
  border-color: var(--dcu-white) !important;
}

.ps-emailsubscription .alert {
  border-radius: 0;
  font-size: 14px;
}

.ps-emailsubscription .text-body-secondary {
  color: var(--dcu-gray-warm) !important;
  font-size: 12px !important;
  margin-top: 0.5rem;
}

/* Mailchimp jQuery validation error label styling */
.ps-emailsubscription label.error {
  color: var(--dcu-danger) !important;
  font-size: 14px;
  margin-top: 8px;
  display: block;
  text-align: center;
  font-weight: 500;
}

@media (max-width: 767px) {
  .ps-emailsubscription {
    padding: 2.5rem 0;
  }

  .ps-emailsubscription .newsletter-title {
    font-size: 25px !important;
  }

  .ps-emailsubscription .newsletter-subtitle {
    font-size: 15px !important;
  }

  .ps-emailsubscription .btn-newsletter-subscribe {
    padding: 10px 40px;
    font-size: 16px !important;
    width: 100%;
  }
}

/* INSTAGRAM HOME */


.top_instagram h3.h3.title-block {
  display: none
}

.top_instagram {
  background: #A76C7D;
  padding: 15px 25px;
  /* El 1.7 hereda aquí 14px/17,5px de interlineado: los dos textos (23px) se
     alinean abajo y la barra queda en 56px. En Hummingbird se heredaba 16px/24px,
     que descuadraba el enlace de la derecha e inflaba la barra a 73px. */
  font-size: 14px;
  line-height: 1.25em
}

a.ph-insta-display-name {
  color: var(--dcu-white);
  font-size: 23px;
  margin-bottom: 3px;
  font-style: normal;
  font-weight: 500
}

a.ph-insta-follow-us {
  font-size: 23px;
  background: transparent;
  text-decoration: underline
}

body#index .laberFooter-top {
  margin-top: -1px
}

li.instagram_item_img {
  padding: 0px;
}

.instagram_list_img {
  clear: both;
  margin: 0px 0px 0;
  width: calc(100%);
}

/* Fila a todo el ancho: las <li> traen col-lg-2 (16,66% fijo) del módulo, así que
   con menos de 6 fotos quedaba hueco blanco a la derecha. Se anula el ancho de la
   columna Bootstrap y se reparten a partes iguales (mismo criterio que el 1.7). */
#Home_instagram {
  display: flex;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

#Home_instagram li.instagram_item_img {
  flex: 1 1 0;
  width: auto;
  max-width: none;
  margin: 0;
}

/* El módulo hace la foto cuadrada con `padding-top:100%` sobre el <a> y esconde
   el <img> (usa background-image). Aquí mandamos el <img> con object-fit, así que
   hay que anular ese padding: si no, el contenido del <a> se queda en los ~72px
   que sobran bajo el padding y la foto sale repetida en una franja abajo. */
#Home_instagram li.instagram_item_img a {
  display: block;
  width: 100%;
  height: 450px;
  padding: 0;
  overflow: hidden;
}

#Home_instagram li.instagram_item_img a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ybc_instagram.block_instagram {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

/* Hueco hasta el footer, global: Hummingbird pone `.page:not(body)
   {padding-bottom:2rem}` = 32px en #center-column; el 1.7 deja 80px en todas
   las subpáginas (categoría, producto, CMS…). La home es la excepción: allí
   el contenido llega pegado al footer, igual que en el 1.7. */
#center-column.page {
  padding-bottom: 80px;
}

/* …y que ese hueco sea el MISMO en todas: Hummingbird cuelga márgenes
   inferiores del paginador (50px en `.pagination__container` + 24px en
   `.products__pagination`) que se escapan del <section> y hacían que los
   listados acabaran con 130px de hueco frente a los 80 del resto. */
#center-column .pagination__container,
#center-column .products__pagination,
#center-column .ps-crossselling {
  margin-bottom: 0;
}

body#index #center-column.page {
  padding-bottom: 0;
}

@media (max-width:992px) {
  #Home_instagram {
    flex-wrap: wrap
  }

  #Home_instagram li.instagram_item_img {
    flex: 1 1 33.33%
  }
}

@media (max-width:768px) {
  .top_instagram {
    justify-content: center;
    align-items: center;
    -webkit-align-items: center
  }

  #Home_instagram li.instagram_item_img {
    flex: 1 1 50%
  }
}

/* Mailchimp response alerts styling */
.ps-emailsubscription #mce-responses {
  max-width: 600px;
  margin: 0 auto 1.5rem auto;
}

/* El payment.css de un módulo de pago declara `.alert { margin: 10px 10px 0 0 }`
   para toda la web: el aviso quedaba 10 px más estrecho que el campo y descentrado. */
.ps-emailsubscription #mce-responses .alert {
  margin: 0;
}

.ps-emailsubscription #mce-success-response.alert-success {
  background-color: var(--dcu-success-bg);
  color: var(--dcu-ink);
  border: 1px solid var(--dcu-success);
  border-radius: 4px;
  padding: 12px 20px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.ps-emailsubscription #mce-error-response.alert-danger {
  background-color: var(--dcu-danger-bg);
  color: var(--dcu-ink);
  border: 1px solid var(--dcu-danger);
  border-radius: 4px;
  padding: 12px 20px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

/* ---------- Listado de categoría (réplica del 1.7) ---------- */

/* El 1.7 esconde la cabecera de categoría ENTERA (`.block-category
   {display:none}`: H1, descripción y foto de portada) y la fila de
   subcategorías: la página arranca en el breadcrumb + la barra de ordenación.
   En Hummingbird ese bloque es `.category__header` (contiene
   `.category__description`, que es la explicación que salía en Accesorios). */
#category .category__header,
#category .page-title-section,
#category .subcategory {
  display: none;
}

/* Sidebar de categoría — caja compacta del 1.7 (categoría actual + hijos
   directos), no el árbol raíz→hoja completo que pinta ps_categorytree por
   defecto. Medidas del custom.css del tema Laber (.block-categories). */
.dcu-category-box {
  margin-bottom: var(--dcu-space-lg);
  /* .left-block (Hummingbird) trae su propio filete inferior: con los
     divisores de cada .dcu-category-box__item sobraba y salía una tercera
     línea suelta debajo del último elemento. */
  border-bottom: none;
}

.dcu-category-box__title {
  background: #f3f3f3;
  padding: var(--dcu-space-md);
  margin: 0 0 var(--dcu-space-lg);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dcu-category-box__title-link {
  color: var(--dcu-ink);
  font-size: var(--dcu-fs-lg);
  font-weight: var(--dcu-fw-medium);
  line-height: 1;
}

.dcu-category-box__toggle {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-inline-start: var(--dcu-space-xs);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--dcu-ink);
  font-size: var(--dcu-fs-lg);
  line-height: 1;
  cursor: pointer;
}

.dcu-category-box.is-collapsed .dcu-category-box__list {
  display: none;
}

.dcu-category-box__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dcu-category-box__item {
  border-bottom: 1px solid var(--dcu-border);
}

.dcu-category-box__item-link {
  display: block;
  width: 100%;
  color: var(--dcu-gray-faint);
  font-size: var(--dcu-fs-sm);
  font-weight: var(--dcu-fw-normal);
  line-height: 40px;
}

.dcu-category-box__item-link:hover {
  color: var(--dcu-red);
}

/* Selector de ordenación: caja gris plana alineada a la derecha (1.7: #EBEBEB,
   14px, 275x34, sin radio). Se conserva el valor actual visible ("Relevancia"),
   que en el 1.7 sale vacío por un fallo de su propia plantilla. */
#category .products__sort-dropdown-button {
  background-color: var(--dcu-border);
  border: 1px solid var(--dcu-border);
  border-radius: 0;
  color: var(--dcu-ink);
  font-size: 14px;
  font-weight: 400;
  height: 34px;
  /* ancho fijo del 1.7; sin esto el botón se estira con el flex del contenedor */
  width: 275px;
  flex: 0 0 auto;
  padding: 0 20px;
  text-align: left;
}

#category .products__sort-dropdown-button:hover,
#category .products__sort-dropdown-button:focus {
  background-color: var(--dcu-border);
  border-color: var(--dcu-border);
  color: var(--dcu-ink);
}

/* El contenedor del desplegable se estira (flex:1 1 auto) y deja el botón
   despegado del borde derecho; se encoge para que quede pegado como en el 1.7 */
#category .products__sort-dropdown {
  flex: 0 0 auto;
  width: auto;
}

/* Opciones del desplegable: el 1.7 usa 13px con 10px/20px de padding y pinta el
   hover en rojo de marca con el texto en blanco (`.products-sort-order
   .select-list:hover`). Hummingbird trae 16px y un hover gris claro. */
#category .products__sort-dropdown .dropdown-item {
  font-size: 13px;
  line-height: 17.5px;
  padding: 10px 20px;
  color: var(--dcu-ink-alt);
  border-radius: 0;
}

#category .products__sort-dropdown .dropdown-item:hover,
#category .products__sort-dropdown .dropdown-item:focus,
#category .products__sort-dropdown .dropdown-item.active {
  background-color: var(--dcu-red, var(--dcu-red));
  color: var(--dcu-white);
}

/* La barra es un grid de dos columnas (contador | ordenación); la de la derecha
   alinea su contenido al final para que el botón quede pegado al margen */
#category .products__sort {
  justify-content: flex-end;
}

/* En móvil Hummingbird oculta "Ordenar por:" y el botón de 275px quedaba a la
   derecha con un hueco vacío a su izquierda. Se muestra la etiqueta y el
   desplegable ocupa el resto de la fila. */
@media (max-width: 767.98px) {
  #category .products__sort {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: var(--dcu-space-xs);
  }

  #category .products__sort-label {
    display: flex;
    font-size: var(--dcu-fs-sm);
  }

  #category .products__sort-dropdown {
    flex: 1 1 auto;
    min-width: 0;
  }

  #category .products__sort-dropdown-button {
    width: 100%;
    justify-content: space-between;
  }
}

/* ---------- Ficha de producto en listado ---------- */

/* Fuera la sombra y el zoom del hover de Hummingbird: el 1.7 no los tiene, lo
   que hace al pasar el ratón es cambiar a la segunda foto. */
.product-miniature__inner:hover {
  box-shadow: none;
}

.product-miniature__inner:hover .product-miniature__image {
  transform: none;
}

.product-miniature__top {
  position: relative;
}

/* Segunda imagen: superpuesta y transparente hasta el hover (la pinta
   templates/catalog/_partials/miniatures/product.tpl del child) */
.product-miniature__image-hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Fondo propio: si la segunda foto es un PNG transparente, sin él se ve la
     portada a través (pasó con el GEOTRACK, 15-10) */
  background-color: var(--dcu-white);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.product-miniature__inner:hover .product-miniature__image-hover {
  opacity: 1;
}

/* La "Vista rápida" está desactivada en el 1.7 (.laberQuick va con display:none).
   Además su botón se superpone a la zona de acciones y se comía el click del
   botón de carrito. */
.product-miniature__quickview-button,
.product-miniature__quickview-touch {
  display: none;
}

/* Recuadro de la foto y líneas que enmarcan el precio (1.7: #EBEBEB y #ECECEC) */
.product-miniature__image,
.product-miniature__image-hover {
  border: 1px solid var(--dcu-border);
}

.product-miniature__prices {
  border-top: 1px solid var(--dcu-border-soft);
  border-bottom: 1px solid var(--dcu-border-soft);
  padding: 6px 0;
  margin-top: 10px;
}

/* Tipografía de la ficha, medida en el 1.7.
   Alto fijo de 2 líneas (2 × 20px): los de una línea se rellenan con min-height
   y los de tres o más se recortan con puntos suspensivos. Así la referencia y el
   precio caen siempre a la misma altura en toda la fila. */
.product-miniature__title {
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  min-height: 40px;
  text-transform: uppercase;
  color: var(--dcu-ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* El texto del botón lo esconde Hummingbird cuando el botón es de solo icono */
.product-miniature__add-text {
  display: inline;
}

.product-miniature__reference {
  font-size: 14px;
  color: var(--dcu-ink);
  margin-top: 4px;
}

.product-miniature__price {
  font-size: 18px;
  font-weight: 500;
  color: var(--dcu-red-dark);
}

/* Precio y botón comparten la MISMA franja al pie de la ficha (así el 1.7 se
   ahorra una fila y la tarjeta mide 445 en vez de 513): al pasar el ratón el
   precio se desvanece hacia arriba y el botón entra desde abajo.
   Reglas calcadas del 1.7 (.laber-product-price-and-shipping / .laberActions). */
/* 47 = alto del bloque de precio (41: filetes + 6/6 de padding + 27 de línea)
   + 6 de aire sobre la referencia. Con 39 el filete se montaba 2px encima
   de "Ref." (más apretado abajo que arriba). */
.product-miniature__bottom {
  position: relative;
  padding-bottom: 47px;
}

/* Hummingbird separa nombre y referencia con un gap de 8px que, sumado al
   margin de 4 de la referencia, dejaba 12px: el 1.7 los lleva casi juntos. */
.product-miniature__infos {
  gap: 0;
}

/* left/right = padding lateral de __bottom: al ser absolutos se posicionan
   contra la caja de padding del padre, así que sin esto el precio y el botón
   quedaban 8px a la izquierda del título y la referencia. */
.product-miniature__prices,
.product-miniature__actions {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  transition: opacity 0.3s ease, bottom 0.3s ease;
}

.product-miniature__prices {
  background-color: var(--dcu-white);
}

/* Mismas condiciones que las que muestran el botón (abajo): con solo :hover,
   en móvil el foco se quedaba en la tarjeta tras tocarla, el botón seguía
   visible y el precio volvía encima de él. */
.product-miniature__inner:hover .product-miniature__prices,
.product-miniature__inner:focus-within .product-miniature__prices {
  opacity: 0;
  bottom: 15px;
}

.product-miniature__actions {
  opacity: 0;
  bottom: -15px;
}

.product-miniature__inner:hover .product-miniature__actions,
.product-miniature__inner:focus-within .product-miniature__actions {
  opacity: 1;
  bottom: 0;
}

/* Icono de bolsa a la izquierda del texto, como el 1.7 (18px, hover rojo) */
.product-miniature__add.btn.btn-primary .material-icons {
  font-size: 18px;
  line-height: 1;
  margin-right: 7px;
  vertical-align: -4px;
}

.product-miniature__add.btn.btn-primary {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-color: var(--dcu-ink);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-hover-color: var(--dcu-red);
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-color: var(--dcu-red);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  padding: 0;
  height: 35px;
}

/* ---------- Paginador del listado ----------------------------------------
   Resumen + pills centrados como grupo, flechas en círculo gris y números en
   cuadro (esquinas rectas) con borde marcado; la página actual en blanco con
   borde negro. */
.pagination__container {
  margin-top: 50px;
  margin-bottom: 50px;
  justify-content: center;
  column-gap: 0;
}

.pagination__number {
  color: var(--dcu-ink);
  font-size: 17px;
  padding-right: 20px;
}

.pagination__nav .pagination {
  gap: 8px;
}

.pagination .page-item {
  display: flex;
}

.pagination .page-link {
  /* El fondo de la casilla ES --dcu-border (#ebebeb), asi que el filete
     tiene que ir del borde FUERTE o la caja se queda sin contorno.
     El 1.7 usa #dcdcdc, un punto por debajo de este #ddd. */
  --bs-pagination-bg: var(--dcu-border);
  --bs-pagination-color: var(--dcu-ink);
  --bs-pagination-border-width: var(--dcu-border-width-thick);
  --bs-pagination-border-color: var(--dcu-border-strong);
  --bs-pagination-hover-bg: var(--dcu-border);
  --bs-pagination-hover-color: var(--dcu-ink);
  --bs-pagination-hover-border-color: var(--dcu-ink);
  --bs-pagination-focus-bg: var(--dcu-border);
  --bs-pagination-focus-color: var(--dcu-ink);
  --bs-pagination-active-bg: var(--dcu-white);
  --bs-pagination-active-color: var(--dcu-ink);
  --bs-pagination-active-border-color: var(--dcu-ink);
  --bs-pagination-disabled-bg: var(--dcu-border);
  --bs-pagination-disabled-color: var(--dcu-ink);
  --bs-pagination-disabled-border-color: var(--dcu-border-strong);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 6px;
  border-radius: 0;
  border-style: solid;
  font-size: 15px;
  line-height: 1;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Página actual: fondo blanco + borde negro */
.pagination .page-item.active .page-link {
  background-color: var(--dcu-white);
  border-color: var(--dcu-ink);
  color: var(--dcu-ink);
  font-weight: 500;
}

/* Flechas anterior/siguiente: círculo */
.pagination .page-link.previous,
.pagination .page-link.next {
  width: 34px;
  padding: 0;
  border-radius: 50%;
}

.pagination .page-link .material-icons {
  font-size: 20px;
  line-height: 1;
}

.pagination .page-link.disabled .material-icons {
  opacity: 0.45;
}

/* Los textos "Anterior"/"Siguiente" solo quedan para lectores de pantalla
   (no se pelea con las utilidades d-none/d-xl-flex de Bootstrap: ganan por
   !important dentro de su cascade layer). */
.pagination .page-link.previous>span,
.pagination .page-link.next>span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

/* El separador "…" va suelto, sin caja */
.pagination span.page-link {
  background-color: transparent;
  border-color: transparent;
  min-width: 16px;
  padding: 0 2px;
}

/* ---------- Modal "producto añadido al carrito" ---------------------------
   Réplica del 1.7: caja ancha pegada arriba, cabecera negra centrada, dos
   columnas separadas por línea y los botones dentro de la columna derecha.
   El markup lo pone themes/dcutec/modules/ps_shoppingcart/modal.tpl. */
/* El ancho descuenta los márgenes laterales: con `width:100%` + 8px a cada
   lado, en móvil la caja se salía 16px por la derecha y cortaba "Ir a caja". */
.blockcart-modal .modal-dialog {
  max-width: 1140px;
  width: calc(100% - 2 * var(--bs-modal-margin, 8px));
  margin-top: 30px;
}

/* Hummingbird deja colgado el translateY(-50px) de la animación de Bootstrap
   (su `.modal.show .modal-dialog{transform:none}` pierde por cascade layer):
   sin caja centrada verticalmente el modal se salía 50px por arriba.
   Hay que matar TAMBIÉN la transición: una transición en curso gana en la
   cascada incluso a los !important, así que sin esto el transform se queda
   clavado en -50px. */
.blockcart-modal .modal-dialog {
  transition: none;
}

.blockcart-modal.show .modal-dialog {
  transform: none;
}

.blockcart-modal .modal-content {
  border: 0;
  border-radius: 0;
}

.blockcart-modal .modal-header {
  background: var(--dcu-surface-dark);
  border: 0;
  border-radius: 0;
  padding: 18px 20px;
  justify-content: center;
  position: relative;
}

/* El check va bastante separado del texto, como en el 1.7
   (#blockcart-modal .modal-title i{margin-right:1.875rem}) */
.blockcart-modal__title {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 0;
  color: var(--dcu-white);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}

.blockcart-modal__title-icon {
  color: var(--dcu-white);
  font-size: 22px;
  line-height: 1;
}

.blockcart-modal__close {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: var(--dcu-white);
  color: var(--dcu-ink);
  font-size: 22px;
  line-height: 1;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.blockcart-modal__close:hover,
.blockcart-modal__close:focus {
  background: var(--dcu-red);
  color: var(--dcu-white);
}

.blockcart-modal .modal-body {
  background: var(--dcu-white);
  padding: 30px;
  font-size: 15px;
  color: var(--dcu-gray-soft);
}

/* Línea divisoria entre producto y resumen (solo cuando van en paralelo);
   el resumen entra 40px, como el .cart-content del 1.7. */
@media (min-width: 992px) {
  .blockcart-modal__product {
    border-right: 1px solid var(--dcu-gray-mid);
  }

  .blockcart-modal__summary {
    padding-left: 40px;
  }
}

.blockcart-modal__image {
  width: 100%;
}

.blockcart-modal__name {
  color: var(--dcu-gray-soft);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 14px;
}

.blockcart-modal__price,
.blockcart-modal__property,
.blockcart-modal__quantity {
  color: var(--dcu-gray-soft);
  font-size: 15px;
  margin-bottom: 14px;
}

.blockcart-modal__summary {
  color: var(--dcu-gray-soft);
  font-size: 15px;
}

.blockcart-modal__nb-products {
  color: var(--dcu-gray-soft);
  font-size: 18px;
  margin-bottom: 20px;
}

/* Etiqueta y valor en la misma línea (Hummingbird los reparte con
   space-between; el 1.7 los pone seguidos). */
.blockcart-modal__total {
  display: block;
  margin-bottom: 14px;
}

/* Etiquetas en gris muy oscuro (#232323, el color base del modal 1.7),
   nunca negro puro; los valores quedan en el gris del cuerpo. */
.blockcart-modal__total .label,
.blockcart-modal__quantity strong,
.blockcart-modal__property strong {
  color: var(--dcu-ink-alt);
  font-weight: 700;
}

/* Botones al pie de la columna derecha, alineados a la izquierda y planos
   como los del 1.7 */
.blockcart-modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 5px;
  margin-top: 26px;
}

.blockcart-modal__actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--dcu-border-soft);
  border-radius: 0;
  background: var(--dcu-white);
  color: var(--dcu-ink);
  font-size: 15px;
  font-weight: 400;
  padding: 12px 20px;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.blockcart-modal__actions .btn:hover,
.blockcart-modal__actions .btn:focus {
  border-color: var(--dcu-red);
  color: var(--dcu-red);
}

.blockcart-modal__actions .material-icons {
  font-size: 18px;
  line-height: 1;
}

@media (max-width: 991.98px) {
  .blockcart-modal__summary {
    margin-top: 20px;
  }
}

/* En móvil el título va en dos líneas y se metía debajo del botón de cerrar
   (absoluto a la derecha): se le reserva su hueco y se acerca el check. */
@media (max-width: 767.98px) {
  .blockcart-modal .modal-header {
    justify-content: flex-start;
    padding: 15px 64px 15px 15px;
  }

  .blockcart-modal__title {
    gap: 12px;
    font-size: var(--dcu-fs-sm);
    text-align: left;
  }

  .blockcart-modal__close {
    right: 15px;
  }

  .blockcart-modal .modal-body {
    padding: 20px 15px;
  }

  /* Los dos botones a partes iguales, de borde a borde */
  .blockcart-modal__actions .btn {
    flex: 1 1 0;
    justify-content: center;
    padding-left: 6px;
    padding-right: 6px;
    font-size: var(--dcu-fs-sm);
    white-space: nowrap;
  }
}


/* ---------- Páginas CMS + localizador de tiendas (réplica del 1.7) ---------- */

/* El 1.7 esconde el título de TODAS las páginas CMS
   (`.page-cms .page-header { display:none }`) */
#cms .page-title-section {
  display: none;
}

/* Localizador (módulo storelocatornofees). El módulo trae su propio CSS con
   los colores de Bootstrap/Leaflet por defecto (botón cyan, clusters
   amarillo/naranja/verde según el número); el 1.7 los repinta con los de la
   marca. Reglas portadas de `laber_siemonsalazar_homepage5/assets/css/custom.css`
   ("STORE LOCATION", líneas 184-235). */
.storelocatornofees-form-group>span:first-child,
.storelocatornofees-form-group .storelocatornofees-form-field:first-child,
.storelocatornofees-form-group>span:last-child,
.storelocatornofees-form-group .storelocatornofees-form-field:last-child {
  border-radius: 0 !important;
}

/* "Encuentra mi ubicación": degradado rojo con texto blanco, no el btn-info
   cyan de Bootstrap (que además pinta el texto en negro vía --bs-btn-color) */
button[class*="locate-me"].btn.btn-info {
  background-image: linear-gradient(80deg, rgb(157, 28, 5), rgb(176, 27, 67)) !important;
  border-color: rgb(157, 28, 5) !important;
  --bs-btn-color: var(--dcu-white);
  --bs-btn-hover-color: var(--dcu-white);
  --bs-btn-active-color: var(--dcu-white);
  color: var(--dcu-white);
  /* El .btn de Hummingbird es `inline-flex`: eso convierte el <b> y el <span>
     del módulo en dos cajas una al lado de otra y se come el <br>. El 1.7 lo
     pinta como bloque → dos líneas centradas (título + nota pequeña). */
  display: block;
  width: 100%;
  /* el módulo usa `btn-block` de Bootstrap 4, clase que BS5 eliminó */
  padding: 8px 16px;
  line-height: 1.25;
  /* 20px como el 1.7; HB trae 24px y el botón queda 8px más alto */
}

.filter-storelocatornofees select {
  background: #bfc1c1 none;
}

/* Dots del mapa en rojo de marca con el número en blanco */
.marker-cluster-large,
.marker-cluster-medium,
.marker-cluster-small,
.marker-cluster-large div,
.marker-cluster-medium div,
.marker-cluster-small div {
  background-color: rgba(255, 29, 18, .6);
}

.marker-cluster-large div span,
.marker-cluster-medium div span,
.marker-cluster-small div span {
  color: var(--dcu-white) !important;
}

/* Listado lateral: el módulo usa `.display-4`, que en Hummingbird sale en
   Helvetica 20,8px/300 y negro — en el 1.7 son Rubik 16px/14,4px, gris
   #656d74 (título Y dirección) y 10px de margen inferior en los dos. */
#storesList-contentBottom .store-element h4.display-4 {
  font-family: Rubik, sans-serif;
  font-size: 1rem !important;
  font-weight: 400;
  color: var(--dcu-gray);
  margin-bottom: 10px;
}

#storesList-contentBottom .store-element h4.display-4:last-of-type {
  font-size: 0.9rem !important;
}

/* Popups del mapa: el módulo marca esos bloques con `.text-white`, y en
   Bootstrap 5 eso es `color: rgba(var(--bs-white-rgb), …) !important` DENTRO
   de una cascade layer de Hummingbird → un `!important` nuestro (sin layer)
   NO puede ganarle (mismo gotcha que los .d-none del header). En vez de pelear
   el `color`, se redefine la variable que resuelve: el gris oscuro del 1.7. */
#map_contentBottom {
  --bs-white-rgb: 67, 67, 66;
}

/* Los enlaces del popup (email/teléfono) van del mismo gris, no del rojo de
   enlace del tema (en el 1.7 también son #434342) */
#map_contentBottom .text-white a {
  color: var(--dcu-gray-warm);
}

.leaflet-popup-content span.text-center.text-break {
  font-size: 1rem !important;
  color: var(--dcu-gray-warm);
}

.leaflet-popup-content hr.mt-0 {
  margin-bottom: 4% !important;
  margin-top: 4% !important;
}

/* ==========================================================================
   FICHA DE PRODUCTO — portado de laber_siemonsalazar_homepage5 (1.7)
   ========================================================================== */
/* Color de acento de la ficha: tine el H1, el fondo de las pestanas y el del
   panel al 10%.

   DECISION DEL CLIENTE (2026-08-25): UNA SOLA TIERRA para todas las fichas.
   El 1.7 tiene una tabla de 40 categorias con 8 colores, de los cuales dos son
   frios (un azul-gris y un verde azulado) y desentonan en un tema de rojos y
   tierras. En vez de ir corrigiendo los frios uno a uno, el cliente prefiere el
   marron #a1776c —el grupo mas grande del original, 13 categorias— para todo.

   La tabla original queda comentada debajo: para recuperar el comportamiento
   por categoria basta con descomentarla, y vuelve a mandar sobre esta regla por
   especificidad. Se conserva con los colores TAL CUAL los tiene produccion,
   azul incluido.

   Nota sobre el 1.7 (medido en vivo): su CSS aparenta tener un rosa por defecto
   en una regla anterior a la tabla, pero no funciona. Cuando --cat-color no
   esta definida, `background-color: var(--cat-color)` no cae a la regla de
   antes: es invalida en tiempo de calculo, gana igual la cascada y resetea a
   `transparent`. Por eso en produccion las fichas de las ~100 categorias sin
   color tienen la pestana inactiva transparente CON TEXTO BLANCO (ilegible) y
   el panel sin fondo. Con una sola tierra ese agujero desaparece. */
body#product {
  --cat-color: #a1776c;
  --cat-color-10: rgba(161, 119, 108, 0.1);
}

/* ---- Tabla por categoria del 1.7 (DESACTIVADA, descomentar para recuperarla)
body#product.product-id-category-130,
body#product.product-id-category-181 { --cat-color: #a85c71; --cat-color-10: rgba(168, 92, 113, 0.1); }
body#product.product-id-category-111,
body#product.product-id-category-176 { --cat-color: #7c99a3; --cat-color-10: rgba(124, 153, 163, 0.1); }
body#product.product-id-category-20,
body#product.product-id-category-30,
body#product.product-id-category-126,
body#product.product-id-category-29,
body#product.product-id-category-116,
body#product.product-id-category-167,
body#product.product-id-category-28,
body#product.product-id-category-94,
body#product.product-id-category-87 { --cat-color: #3b8080; --cat-color-10: rgba(59, 128, 128, 0.1); }
body#product.product-id-category-112 { --cat-color: #d59890; --cat-color-10: rgba(213, 152, 144, 0.1); }
body#product.product-id-category-122,
body#product.product-id-category-40,
body#product.product-id-category-168,
body#product.product-id-category-42,
body#product.product-id-category-85,
body#product.product-id-category-92,
body#product.product-id-category-93,
body#product.product-id-category-99,
body#product.product-id-category-91,
body#product.product-id-category-123,
body#product.product-id-category-170 { --cat-color: #808080; --cat-color-10: rgba(128, 128, 128, 0.1); }
body#product.product-id-category-105 { --cat-color: #d6c7bb; --cat-color-10: rgba(214, 199, 187, 0.1); }
body#product.product-id-category-18,
body#product.product-id-category-25,
body#product.product-id-category-27,
body#product.product-id-category-113,
body#product.product-id-category-23,
body#product.product-id-category-24,
body#product.product-id-category-26,
body#product.product-id-category-178,
body#product.product-id-category-115,
body#product.product-id-category-171,
body#product.product-id-category-177,
body#product.product-id-category-139,
body#product.product-id-category-124 { --cat-color: #a1776c; --cat-color-10: rgba(161, 119, 108, 0.1); }
body#product.product-id-category-103 { --cat-color: #cdd0cb; --cat-color-10: rgba(205, 208, 203, 0.1); }
   ---- fin de la tabla por categoria ---- */

/* --- Cabecera: título tintado + referencia --- */
body#product .product__name {
  font-size: 26px;
  font-weight: 500;
  text-align: left;
  color: var(--cat-color);
  padding-top: 20px;
  margin-bottom: 0;
}

body#product p.reff {
  text-align: left;
  font-size: 16px;
  margin: 0 0 10px;
  color: var(--dcu-gray);
}

/* --- Precios: filete superior y precio en rojo oscuro --- */
body#product .product__prices {
  text-align: left;
  /* Sin el filete superior del 1.7 (quitado a petición, 2026-10-23) */
  padding-top: 5px;
  /* HB deja 32px; con los 25 de .product__tax-infos sumaban 57px hasta el
     filete de la descripción corta. Compactado a 15 (2026-10-23). */
  margin-bottom: 15px;
}

body#product .product__prices .current-price span,
body#product .product__prices .product__price {
  color: var(--dcu-red-dark);
  font-size: 25px;
  font-weight: 500;
  line-height: 27.5px;
}

body#product .product__tax-infos {
  margin-bottom: 0;
  font-style: oblique;
}

/* --- Descuento (2026-10-08): precio final · anterior tachado · pastilla ---
   Antes salía encima y en pequeño "24,90 € (20% de descuento)". Ahora todo en
   la línea del precio, que es donde se mira. La pastilla es la misma que la
   etiqueta de la foto (ver .product-flags .badge.discount). */
body#product .dcu-price-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding-top: 8px;
}

body#product .product__prices .product__regular-price {
  color: var(--dcu-gray-faint);
  font-size: var(--dcu-fs-md);
  text-decoration: line-through;
}

.dcu-discount-pill {
  display: inline-block;
  padding: 3px 8px;
  background: var(--dcu-red);
  color: var(--dcu-white);
  font-size: var(--dcu-fs-sm);
  font-weight: var(--dcu-fw-medium);
  line-height: 1.3;
}

/* Etiqueta "-20%" de la foto (listado y ficha): roja maciza con texto blanco.
   HB la pintaba de contorno fino, que casi no se veía. Mismo truco de
   variables que "Próximamente" (su fondo es !important dentro de una capa). */
.product-flags .badge.discount {
  --bs-primary-rgb: 255, 29, 18;
  --bs-primary: var(--dcu-red);
  background-color: var(--dcu-red);
  border-color: var(--dcu-red);
  color: var(--dcu-white) !important;
}

/* Precio anterior del listado, igual que en la ficha: gris claro y más
   pequeño que el rebajado, que es el que tiene que mandar. */
.product-miniature__regular-price {
  color: var(--dcu-gray-faint);
  font-size: var(--dcu-fs-sm);
}

/* En la ficha las migas van sin filete: el 1.7 solo lo pone en los listados */
body#product .breadcrumb {
  border-bottom: 0;
}

/* --- Descripción corta: encajonada entre filetes --- */
body#product .product__description-short {
  text-align: justify;
  padding: 20px 0;
  border-top: 1px solid var(--dcu-border);
  border-bottom: 1px solid var(--dcu-border);
  margin-bottom: 0;
  /* Texto de la ficha como el 1.7: gris #656d74, 14px */
  color: var(--dcu-gray);
  font-size: 14px;
  line-height: 1.55;
}

body#product .product__description-short p,
body#product .product__description-short li,
body#product .product__description-short span {
  color: var(--dcu-gray);
}

/* --- Bloque "Disponibilidad" --- */
body#product .row.info-garantia {
  color: var(--dcu-gray-faint);
  margin: 20px 0;
}

body#product .info-garantia .disponibilidad {
  font-size: 17px;
  color: var(--dcu-ink);
}

body#product .info-garantia .disponibilidad .titulo {
  font-weight: 500;
  font-size: 17px;
  color: var(--dcu-ink);
  margin-bottom: 6px;
}

/* «A partir de 25-11-2026» en la misma línea que el título: peso normal */
body#product .info-garantia .disponibilidad .titulo .proximamente {
  font-weight: normal;
}

body#product .info-garantia .disponibilidad .opcion {
  display: flex;
  align-items: center;
  margin: 4px 0;
}

body#product .info-garantia .disponibilidad .icono {
  width: 35px;
  height: 35px;
  margin: 0 10px 0 0;
  flex-shrink: 0;
  object-fit: contain;
}

body#product .availability.proximamente {
  color: var(--dcu-red-dark);
}

/* --- Franja "Servicio técnico / garantía" --- */
body#product .info-rojo-producto {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin: 20px 0;
  padding-top: 20px;
  border-top: 1px solid var(--dcu-border);
}

body#product .info-rojo-producto .item {
  display: flex;
  align-items: center;
  gap: 10px;
}

body#product .info-rojo-producto .icono {
  width: 37px;
  height: 37px;
  flex-shrink: 0;
  object-fit: contain;
}

body#product .info-rojo-producto span {
  color: var(--dcu-red-dark);
  font-size: 16px;
  font-weight: normal;
}

/* --- Fila de iconos de la subtienda Inversores --- */
body#product .info-garantia-inversores {
  text-align: center;
  margin-bottom: 20px;
}

body#product .info-garantia-inversores .laberLinks {
  margin-bottom: 20px;
}

/* Medidas de producción: escudos de ~85px y rótulo gris de 13px. A 108px y
   16px la fila de 6 se salía de la columna por la derecha. La .row tampoco
   lleva márgenes negativos aquí (sus columnas ya tienen canalón). */
body#product .info-garantia-inversores {
  margin-left: 0;
  margin-right: 0;
}

body#product .info-garantia-inversores .laberLinks {
  padding-left: 4px;
  padding-right: 4px;
  font-size: var(--dcu-fs-xs);
  line-height: 1.35;
  color: var(--dcu-gray);
}

body#product .info-garantia-inversores img {
  max-height: 85px;
  margin-bottom: 10px;
}

/* En móvil los escudos a 108px se comían la pantalla (3 filas de 160px).
   Producción los pinta a ~70px a ese ancho. */
@media (max-width: 767px) {
  body#product .info-garantia-inversores img {
    max-height: 70px;
    margin-bottom: var(--dcu-space-2xs);
  }

  body#product .info-garantia-inversores .laberLinks {
    margin-bottom: var(--dcu-space-md);
    font-size: var(--dcu-fs-xs);
  }
}

/* --- Presupuesto para profesionales (solo Inversores, como el .soli-presu
   del 1.7): filetes arriba y abajo, título y botón. El botón es el
   .btn-primary global, sin repintar. */
/* --- Fecha de reposición (como el 1.7: rojo, 17px, 500, mayúsculas) --- */
body#product .product-availability-date {
  margin: var(--dcu-space-lg) 0;
  /* El rojo de precios, "Próximamente" y "Servicio técnico": el de marca
     (#FF1D12) chocaba aquí (2026-10-19). */
  color: var(--dcu-red-dark);
  font-size: 17px;
  font-weight: var(--dcu-fw-medium);
  text-transform: uppercase;
  text-align: center;
}

/* Escritorio: a la izquierda, como producción. En móvil se centra (decidido
   2026-10-08) para leerse en columna con la rejilla de escudos de debajo. */
@media (max-width: 767.98px) {
  body#product .soli-presu {
    text-align: center;
  }
}

body#product .soli-presu {
  margin: var(--dcu-space-lg) 0;
  padding: var(--dcu-space-lg) 0;
  border-top: 1px solid var(--dcu-border);
  border-bottom: 1px solid var(--dcu-border);
}

body#product .soli-presu__title {
  margin: 0 0 var(--dcu-space-xs);
  color: var(--dcu-ink);
  font-size: var(--dcu-fs-base);
  font-weight: var(--dcu-fw-medium);
}

/* --- Banner informativo por idioma ---
   Producción lo mantiene en el DOM pero OCULTO (es un placeholder que el
   cliente nunca sustituyó: "Excellence is not a skill…"). Replicamos igual
   con display:none — misma regla que el 1.7 (body#product img.info-prod). */
body#product .product-information .info-prod {
  display: none;
}

/* Las pestañas van a TODO el ancho como en el 1.7. Hummingbird las mete en la
   columna izquierda de un grid de 2 (.product__bottom), con la derecha para el
   reassurance —que hemos movido, así que queda vacía—. Se colapsa el grid a una
   sola columna y se oculta la derecha vacía. */
body#product .product__bottom {
  display: block;
}

body#product .product__bottom-right {
  display: none;
}

/* --- Pestañas (el 1.7 usa tabs con esquina cortada, no acordeón) --- */
body#product .tabs.laberTabs {
  margin-bottom: 30px;
  padding: 0 0 30px;
}

body#product .tabs .nav-tabs {
  text-align: left;
  border-bottom: none;
  /* Sin solape: las pestañas asientan justo sobre el contenido (no -4px, que
     las metía 5px dentro del panel y dejaba a los tabs oscuros pisando el
     contenido). El tab activo comparte color con el panel -> se funde igual. */
  margin-bottom: 0;
}

body#product .tabs .nav-tabs ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 20px 0 0;
}

body#product .tabs .nav-tabs .nav-item {
  margin: 0;
  padding: 0;
}

/* El 1.7 da el alto de la pestana con `line-height: 45px` y padding vertical
   CERO, no con padding (medido en vivo: 45px de alto). Con padding de 12px
   salian 48px y la activa quedaba a la misma altura que las inactivas, cuando
   en el original se hunde respecto a ellas. */
body#product .tabs .nav-tabs .nav-link {
  display: block;
  background-color: var(--cat-color);
  color: var(--dcu-white);
  padding: 0 var(--dcu-space-lg);
  line-height: var(--dcu-tab-height);
  border: none;
  border-radius: var(--dcu-radius);
  font-size: var(--dcu-fs-md);
  text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0 100%);
}

/* Hummingbird pinta la lista de "Detalles del producto" en una caja gris que
   arranca a 30px arriba y a la derecha: su esquina caía justo sobre la diagonal
   del corte de 60px del panel. En el 1.7 no hay caja (empieza con texto). */
body#product #product-details .details__list {
  background-color: transparent;
}

body#product .tabs .nav-tabs .nav-link.active {
  background-color: var(--cat-color-10);
  color: var(--dcu-ink);
  /* el 1.7 usa 24px; 25 es el paso de la escala, la diferencia no se ve */
  padding: 0 var(--dcu-space-xl);
  /* Peso 500 simulado con un trazo: con font-weight la palabra se ensancha y
     la pestaña cambiaba de tamaño al activarla (en móvil, donde el padding de
     las tres es el mismo, saltaba la fila entera). El trazo no ocupa ancho. */
  -webkit-text-stroke: 0.35px currentColor;
  border: none;
}

body#product div#description,
body#product div#product-details,
body#product div#attachments,
body#product .tab-content>.tab-pane {
  background-color: var(--cat-color-10);
  border: none;
  padding: var(--dcu-space-2xl);
  clip-path: polygon(0 0, calc(100% - 60px) 0, 100% 60px, 100% 100%, 0 100%);
  /* Dentro de las pestanas el 1.7 escribe en gris y a 14px con la linea muy
     junta (17,5px). En dcu9 salia a 16px y casi negro: por eso la ficha
     tecnica se veia como una lista de parrafos sueltos y muy aireada. */
  color: var(--dcu-gray);
  font-size: var(--dcu-fs-sm);
  line-height: 1.25;
}

/* Hummingbird pone su propio interlineado en el envoltorio `.rich-text` de la
   descripcion, asi que el 1.25 del panel no llegaba al texto (salia a 21px en
   vez de 17,5 y la ficha tecnica parecia una lista de parrafos sueltos). */
body#product .tab-content>.tab-pane .rich-text,
body#product .tab-content>.tab-pane .product-description {
  line-height: inherit;
}

/* Y el 1rem de separacion entre parrafos de Bootstrap: el 1.7 usa 10px. Con
   16px, una ficha tecnica de 15 lineas (un parrafo por dato) se lee como una
   lista de bloques sueltos en vez de una tabla.
   El 25px de interlineado tambien es del 1.7 (medido): el envoltorio va a
   17,5px pero los parrafos lo pisan y respiran mas. */
body#product .tab-content>.tab-pane p {
  margin-bottom: var(--dcu-space-xs);
  line-height: 25px;
}

/* La ficha técnica va dentro de la misma pestaña que los detalles */
body#product .details__section-title {
  font-size: 18px;
  font-weight: 500;
  margin: 30px 0 10px;
}

body#product .product-attachments h4 {
  font-size: 16px;
  margin-bottom: 4px;
}

/* Títulos de las secciones inferiores ("También podría interesarle" y
   "Productos similares"): mismo formato — izquierda, negro, 24px, sin
   mayúsculas (el 1.7 los pone así, no centrados ni en versalitas). */
body#product .product__accessories .section-title,
body#product .ps-categoryproducts .section-title {
  text-align: left;
  color: var(--dcu-ink);
  font-weight: 500;
  font-size: 24px;
  text-transform: none;
  margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
  body#product .info-rojo-producto {
    justify-content: center;
  }

  /* Las 3 pestañas en UNA fila: con 20-25px de lado no cabían ("Adjuntos"
     saltaba a otra línea y descuadraba el panel). 10px + el corte de 15px. */
  body#product .tabs .nav-tabs {
    flex-wrap: nowrap;
  }

  body#product .tabs .nav-tabs .nav-link,
  body#product .tabs .nav-tabs .nav-link.active {
    font-size: 12px;
    padding: 0 18px 0 10px;
    white-space: nowrap;
  }

  body#product div#description,
  body#product div#product-details,
  body#product div#attachments,
  body#product .tab-content>.tab-pane {
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
    padding: var(--dcu-space-xl) var(--dcu-space-md);
  }
}

/* El texto de las descripciones viene pegado de otro editor con
   `style="background-color:#fff"` en cada párrafo: sobre la tierra del panel
   salían rectángulos blancos. Es contenido del BO, por eso el !important. */
body#product .tab-content>.tab-pane [style*="background"] {
  background-color: transparent !important;
}

/* Y las listas traen `padding-left:0` en línea: las viñetas se salían del
   panel por la izquierda. */
body#product .tab-content>.tab-pane ul,
body#product .tab-content>.tab-pane ol {
  padding-left: 1.25em !important;
}

/* Columnas 50/50 como el 1.7 (Hummingbird reparte 55% / resto en desktop) */
@media (min-width: 992px) {
  body#product .product__container {
    grid-template-columns: 50% minmax(0, 1fr);
  }
}

/* --- Miniaturas en una sola fila con flechas (como el 1.7) --- */
body#product .product__thumbnails.dcu-thumbs {
  position: relative;
  padding: 0 26px;
}

body#product .dcu-thumbs .product__thumbnails-list {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 8px;
  margin: 0;
  padding: 0;
  scrollbar-width: none;
}

body#product .dcu-thumbs .product__thumbnails-list::-webkit-scrollbar {
  display: none;
}

body#product .dcu-thumbs .product__thumbnail {
  flex: 0 0 auto;
  width: 92px;
}

body#product .dcu-thumbs__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 40px;
  padding: 0;
  border: none;
  background: none;
  color: var(--dcu-ink);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  /* solo se ven cuando hay algo que desplazar */
  display: none;
}

body#product .dcu-thumbs--scrollable .dcu-thumbs__arrow {
  display: block;
}

body#product .dcu-thumbs__arrow--prev {
  left: 0;
}

body#product .dcu-thumbs__arrow--next {
  right: 0;
}

body#product .dcu-thumbs__arrow:disabled {
  opacity: 0.25;
  cursor: default;
}

/* --- Selector de cantidad y botón, con las medidas del 1.7 --- */
body#product .product__actions-qty-add {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  /* aire entre el filete inferior de la descripción y las botoneras (el 1.7
     deja hueco; sin esto la cantidad queda pegada a la línea) */
  margin-top: 22px;
}

/* Selector de cantidad — COMPONENTE COMPARTIDO ficha + carrito.
   El 1.7 tenía dos estilos distintos para lo mismo (píldora gris en la ficha,
   spinner con flechitas en el carrito). Se unifica con el de la ficha: no hay
   motivo para que el mismo control se vea de dos maneras. */
body#product .quantity-button__group,
body#cart .quantity-button__group {
  display: flex;
  align-items: center;
  gap: 7px;
  width: auto;
}

body#product .quantity-button__group .btn.decrement,
body#product .quantity-button__group .btn.increment,
body#cart .quantity-button__group .btn.decrement,
body#cart .quantity-button__group .btn.increment {
  width: 30px;
  height: 30px;
  min-width: 0;
  padding: 0;
  border: none;
  border-radius: 40px;
  background: var(--dcu-surface-muted);
  color: var(--dcu-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body#product .quantity-button__group .btn.decrement:hover,
body#product .quantity-button__group .btn.increment:hover,
body#cart .quantity-button__group .btn.decrement:hover,
body#cart .quantity-button__group .btn.increment:hover {
  background: #cfd3cc;
  color: var(--dcu-ink);
}

body#product .quantity-button__group .btn .material-icons,
body#cart .quantity-button__group .btn .material-icons {
  font-size: 18px;
  /* sin line-height:1 — descuadraba el glifo Material Icons hacia arriba
     respecto al centrado flex del botón (+/− de cantidad). */
}

body#product #quantity_wanted,
body#product .quantity-button__group .form-control,
body#cart .quantity-button__group .form-control {
  width: 70px;
  max-width: 70px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: var(--dcu-surface-muted);
  color: var(--dcu-ink-alt);
  text-align: center;
}

/* Aquí NO se repinta el botón: color, borde, radio, tamaño y hover salen de
   la regla global `.btn-primary`. Lo único propio de la ficha es que el botón
   ajusta al contenido (~195px; Hummingbird lo estira al 100%) y lleva más aire
   a los lados.
   ⚠️ Antes esta regla repetía `background-color` a pelo, y eso MATABA el hover:
   una declaración directa con esta especificidad gana al `.btn:hover` de
   Bootstrap, que pinta con `var(--bs-btn-hover-bg)`. El botón se quedaba
   muerto al pasar por encima. */
body#product .product__add-to-cart-button {
  padding-left: 45px;
  padding-right: 45px;
  min-width: auto;
  width: auto;
}

/* el contenedor del botón no debe forzar el ancho completo */
body#product .product__add-to-cart.add {
  width: auto;
}

/* El botón del 1.7 no lleva icono de carrito */
body#product .product__add-to-cart-button .material-icons {
  display: none;
}

/* --- Fila de compra en móvil: cantidad · botón · corazón en UNA línea,
   como producción. Con 12px de hueco y el botón a 20px de lado no cabía y
   el corazón saltaba a otra fila. Si a 320px no cabe, baja solo (wrap). */
@media screen and (max-width: 767px) {
  body#product .product__actions-qty-add {
    gap: var(--dcu-space-2xs);
  }

  body#product .product__actions-qty-add .product-actions__quantity,
  body#product .product__actions-qty-add .product__add-to-cart.add {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
  }

  body#product .product__add-to-cart-button {
    padding: 4px 16px;
  }
}

/* El corazón, pegado al borde derecho de la fila (alineado con los filetes).
   ⚠️ En @layer vendors: Hummingbird fija `.wishlist-button-add
   {margin-left:0 !important}` dentro de su capa ps-modules, y para los
   !important una regla sin capa es la que MENOS pesa. El -7px compensa el
   aire del botón (38px) alrededor del icono (24px). */
@layer vendors {
  body#product .product__actions-qty-add .wishlist-button-product {
    margin-left: auto !important;
    margin-right: -7px !important;
  }
}

/* La línea de disponibilidad de Hummingbird (icono + "Fuera de stock" /
   "En stock") no existe en el 1.7: allí ese dato solo sale en el bloque
   "Disponibilidad" de arriba. Se oculta para no duplicarlo. */
body#product #product-availability {
  display: none;
}

/* --- Comparador (link a PDF) — como el 1.7 -------------------------------
   Solo se muestra en las 3 categorías que tienen PDF: 130 smartwatches,
   176 auriculares, 167 soportes de pared TV. Todas las filas están en el
   DOM y el CSS enseña solo la del idioma actual. Se coloca en la misma
   línea que "Añadir al carrito" (ambos inline-block dentro de
   .product__actions). */
body#product .compara-smart,
body#product .compara-auris,
body#product .compara-soportes {
  display: none;
  margin: 22px 0 0 10px;
  vertical-align: top;
}

body#product.product-id-category-130 .compara-smart.smart-es:lang(es),
body#product.product-id-category-130 .compara-smart.smart-ca:lang(ca),
body#product.product-id-category-130 .compara-smart.smart-en:lang(en),
body#product.product-id-category-130 .compara-smart.smart-fr:lang(fr),
body#product.product-id-category-130 .compara-smart.smart-pt:lang(pt),
body#product.product-id-category-176 .compara-auris.auris-es:lang(es),
body#product.product-id-category-176 .compara-auris.auris-ca:lang(ca),
body#product.product-id-category-176 .compara-auris.auris-en:lang(en),
body#product.product-id-category-176 .compara-auris.auris-fr:lang(fr),
body#product.product-id-category-176 .compara-auris.auris-pt:lang(pt),
body#product.product-id-category-167 .compara-soportes.soportes-es:lang(es),
body#product.product-id-category-167 .compara-soportes.soportes-ca:lang(ca),
body#product.product-id-category-167 .compara-soportes.soportes-en:lang(en),
body#product.product-id-category-167 .compara-soportes.soportes-fr:lang(fr),
body#product.product-id-category-167 .compara-soportes.soportes-pt:lang(pt) {
  display: inline-block;
}

/* Cuando hay comparador visible, el <form> del add-to-cart (hijo directo de
   .product__actions) se encoge al contenido para que el comparador quepa a
   su derecha en la misma línea, como el 1.7. */
body#product.product-id-category-130 .product__actions>form,
body#product.product-id-category-176 .product__actions>form,
body#product.product-id-category-167 .product__actions>form {
  display: inline-block;
  vertical-align: top;
  width: auto;
}

body#product a.compare-pdf-link {
  display: block;
  height: 35px;
  padding: 5px 20px;
  border: 1px solid var(--dcu-btn-dark);
  border-radius: 0;
  background-color: transparent;
  color: var(--dcu-btn-dark);
  font-size: 14px;
  font-weight: normal;
  line-height: 25px;
  text-align: center;
  text-decoration: none;
  box-shadow: none;
}

body#product a.compare-pdf-link:hover {
  background-color: var(--dcu-btn-dark);
  color: var(--dcu-white);
}

/* En móvil no se comparten línea: el form y el comparador se apilan (1.7) */
@media screen and (max-width: 767px) {

  body#product.product-id-category-130 .product__actions>form,
  body#product.product-id-category-176 .product__actions>form,
  body#product.product-id-category-167 .product__actions>form {
    display: block;
    width: auto;
  }

  body#product .compara-smart,
  body#product .compara-auris,
  body#product .compara-soportes {
    margin-left: 0;
  }

  body#product a.compare-pdf-link {
    display: inline-block;
  }
}

/* Fichas CON comparador (130/176/167): fila de compra ordenada.
   - Escritorio: cantidad · "Añadir" · "Comparador" en línea y corazón pegado a
     la derecha (pedido 2026-10-08: antes el corazón caía ENTRE los botones).
   - Móvil: fila 1 = cantidad + "Añadir" estirado; fila 2 = "Comparador" y
     corazón.
   El comparador va FUERA del <form> y el corazón DENTRO, y no se pueden mover
   en el DOM: Hummingbird rehace el bloque de compra por AJAX al cambiar de
   combinación. Por eso `display: contents` en los tres envoltorios: sus hijos
   pasan a ser items del flex de .product__actions y se ordenan con `order`
   sin tocar el HTML. Lo demás de la columna (avisos, presupuesto,
   disponibilidad…) va detrás a ancho completo. */
body#product:is(.product-id-category-130, .product-id-category-176, .product-id-category-167) .product__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  row-gap: var(--dcu-space-md);
  padding-top: 22px;
}

/* Por defecto, todo al final y a ancho completo — también lo que sale de
   los envoltorios con `contents` (p. ej. .product__additional-info, vacío:
   sin esto se colaba el primero de la fila y empujaba la cantidad). */
body#product:is(.product-id-category-130, .product-id-category-176, .product-id-category-167) .product__actions> :not(form),
body#product:is(.product-id-category-130, .product-id-category-176, .product-id-category-167) .product__actions>form>*,
body#product:is(.product-id-category-130, .product-id-category-176, .product-id-category-167) .product__add-to-cart-container>*,
body#product:is(.product-id-category-130, .product-id-category-176, .product-id-category-167) .product__actions-qty-add>* {
  flex: 0 0 100%;
  order: 5;
}

body#product:is(.product-id-category-130, .product-id-category-176, .product-id-category-167) .product__actions>form,
body#product:is(.product-id-category-130, .product-id-category-176, .product-id-category-167) .product__add-to-cart-container,
body#product:is(.product-id-category-130, .product-id-category-176, .product-id-category-167) .product__actions-qty-add {
  display: contents;
}

body#product:is(.product-id-category-130, .product-id-category-176, .product-id-category-167) .product-actions__quantity {
  order: 1;
  flex: 0 0 auto;
}

body#product:is(.product-id-category-130, .product-id-category-176, .product-id-category-167) .product__add-to-cart.add {
  order: 2;
  flex: 0 0 auto;
  min-width: 0;
}

body#product:is(.product-id-category-130, .product-id-category-176, .product-id-category-167) .product__actions> :is(.compara-smart, .compara-auris, .compara-soportes) {
  order: 3;
  flex: 0 0 auto;
  margin: 0;
}

body#product:is(.product-id-category-130, .product-id-category-176, .product-id-category-167) .product__actions .laberLinks {
  padding: 0;
}

body#product:is(.product-id-category-130, .product-id-category-176, .product-id-category-167) .product__actions .wishlist-button-product {
  order: 4;
  flex: 0 0 auto;
}

@media (max-width: 767.98px) {
  body#product:is(.product-id-category-130, .product-id-category-176, .product-id-category-167) .product__actions {
    column-gap: var(--dcu-space-2xs);
  }

  body#product:is(.product-id-category-130, .product-id-category-176, .product-id-category-167) .product__add-to-cart.add {
    /* todo lo que deja la cantidad (142px) y el hueco: así el comparador y
       el corazón no caben y bajan a la segunda fila */
    flex: 1 0 calc(100% - 142px - var(--dcu-space-2xs));
  }

  /* Los dos botones a la misma altura (35px, la del botón del tema): el de
     "Añadir" venía a 31px por el padding reducido del móvil. */
  body#product:is(.product-id-category-130, .product-id-category-176, .product-id-category-167) .product__add-to-cart-button {
    width: 100%;
    justify-content: center;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  /* "Comparador" con el mismo ancho que la cantidad que tiene encima: así
     las dos filas forman una rejilla en vez de bloques sueltos. */
  body#product:is(.product-id-category-130, .product-id-category-176, .product-id-category-167) .product__actions a.compare-pdf-link {
    width: 142px;
    padding-left: 0;
    padding-right: 0;
  }
}

/* "Disponibilidad" iba 12px hacia dentro del resto de la columna (canalón de
   la .col dentro de una .row sin márgenes negativos). */
body#product .info-garantia .disponibilidad {
  padding-left: 0;
  padding-right: 0;
}

/* ==========================================================================
   BADGES DE PRODUCTO — rejilla ESTANDARIZADA (decidido con cliente 2026-08-11)
   Tres tipos de badge, cada uno con una zona FIJA (igual en listado y ficha):
     · Flags nativas PS (Fuera de stock / Nuevo / -X%) -> ARRIBA-IZQUIERDA
     · Text stickers (imgstickers: "GPS integrado"...) -> ABAJO-IZQUIERDA
     · Image sticker (icono "SMW Kids")               -> ARRIBA-DERECHA
   Se IGNORA el `imgstickers_align` del modulo (venia mal repartido ya en el 1.7);
   el override de plantilla (themes/dcutec/modules/imgstickers/.../hook*.tpl) emite
   wrappers .dcu-stickers--img / --txt y aqui se posicionan. Contenedores relativos:
   listado .product-miniature__top ; ficha .product__carousel (ya position:relative).
   ========================================================================== */
.product-miniature__top {
  position: relative;
}

/* --- Flags nativas: arriba-izquierda, apiladas (listado Y ficha) ---
   HB ya las pone absolutas arriba-izquierda con padding .5rem; aqui solo se
   apilan en columna (HB las pone en fila, que con dos flags se come el ancho)
   y se quita el width:100% + padding-right:4rem suyo, que estiraba la caja
   por debajo del icono de la esquina derecha. */
.product-miniature__top .product-flags,
.product__carousel>.product-flags {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: auto;
  padding: 8px;
  list-style: none;
  z-index: 10;
}

/* Inversores: 4 productos por fila junto a la columna de categorías, como
   producción. Hummingbird pone 3 cuando hay columna lateral. La tienda
   principal no se toca: sus categorías van a ancho completo y ya salen 4. */
@media (min-width: 1200px) {
  body:has(.dcu-header--inversores) .layout-left-column .products,
  body.layout-left-column:has(.dcu-header--inversores) .products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Sin stock = "Próximamente" en NEGRO, como producción (no el rojo de HB).
   ⚠️ HB pinta el fondo con `RGBA(var(--bs-primary-rgb)) !important` dentro de
   una capa: no se le gana con una declaración, se redefine la variable. */
.product-miniature__top .product-flags .badge.out_of_stock,
.product__carousel>.product-flags .badge.out_of_stock {
  --bs-primary-rgb: 41, 41, 41;
  --bs-primary: var(--dcu-ink);
  /* el borde de 1px usa var(--bs-primary): sin esto salía rojo */
  border-color: var(--dcu-ink);
  color: var(--dcu-white);
}

/* El 1.7 repetía "Próximamente" también en rojo bajo el precio. Se queda solo
   la etiqueta (decidido 2026-10-08): el texto duplicaba el aviso y, como el
   bloque de precios va absoluto al pie de la tarjeta, la descuadraba. */

/* --- Wrappers de stickers (posicion por zona, no por align del modulo) --- */
.dcu-stickers {
  position: absolute;
  z-index: 9;
  pointer-events: none;
  display: flex;
  gap: 4px;
}

/* Icono (image sticker): arriba-derecha. Ocupa todo el ancho para que el
   width:N% del icono siga siendo relativo a la imagen, alineado a la derecha. */
.dcu-stickers--img {
  top: 8px;
  left: 0;
  right: 0;
  padding-right: 8px;
  flex-direction: row;
  justify-content: flex-end;
}

.dcu-sticker-img {
  display: block;
  height: auto;
}

/* Text stickers: abajo-izquierda, apilados hacia arriba */
.dcu-stickers--txt {
  left: 0;
  bottom: 8px;
  flex-direction: column;
  align-items: flex-start;
}

/* Corazón de favoritos: la cuarta esquina, abajo-DERECHA.
   Hummingbird lo pone arriba-derecha, que es justo donde va el sticker de
   imagen (el icono "SMW Kids"), y como el corazón lleva z-index 10 contra el 9
   del sticker, se lo comía. Abajo-derecha es la única esquina libre: los
   stickers de texto van abajo-izquierda y las flags arriba-izquierda.
   ⚠️ Esto NO existe en producción: el 1.7 tiene `blockwishlist` instalado pero
   su tema no pinta el botón en ninguna parte —ni en listado ni en ficha—, así
   que aquí no hay nada que replicar. Se mantiene por decisión del cliente
   (2026-08-26) como mejora sobre la web actual.
   Solo afecta al listado: en la ficha el corazón va en línea junto al botón de
   comprar y no pisa nada.
   ⚠️⚠️ POR QUÉ ESTA REGLA VA DENTRO DE UN @layer. Hummingbird declara
   `.wishlist-button-add { top: .5rem !important; height: inherit !important }`
   **dentro de la capa `ps-modules`**. Para las declaraciones `!important` el
   orden de capas se INVIERTE y lo no-encapsulado pasa a ser lo más débil, así
   que una regla nuestra sin capa no le gana ni poniéndole `!important` ni
   subiendo la especificidad. Y mientras su `top` gane, poner `bottom` deja el
   absoluto con top Y bottom a la vez: se estira (medía 38×290 en vez de 38×38).
   `vendors` es la primera capa del orden que declara el tema
   (`@layer vendors, bs-base, …, ps-modules, utilities`), o sea la que MÁS pesa
   para `!important`. No se usa para nada más: si algún día hay que sobrescribir
   otro `!important` encapsulado del padre, este es el sitio. */
@layer vendors {
  .products article .product-miniature__top .wishlist-button-add {
    top: auto !important;
    bottom: 8px !important;
    right: 8px;
    height: 2.5rem !important;
  }
}

/* ==========================================================================
   Zoom de la foto de la ficha (assets/js/dcu-zoom.js) — réplica del
   hwczoomimage del 1.7 en modo ventana: lupa sobre la foto y ventana de 450
   a la derecha, ENCIMA de la columna de datos (como en producción).
   El JS crea los dos nodos y los coloca; aquí solo el aspecto.
   ========================================================================== */
body#product .product__images {
  position: relative;
}

.dcu-zoom-lens,
.dcu-zoom-window {
  position: absolute;
  display: none;
  pointer-events: none;
  /* el ratón sigue "viendo" la foto de debajo */
}

.dcu-zoom-lens.is-on,
.dcu-zoom-window.is-on {
  display: block;
}

.dcu-zoom-lens {
  z-index: 11;
  /* por encima de flags (10) y stickers (9) */
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--dcu-gray-mid);
  cursor: crosshair;
}

.dcu-zoom-window {
  z-index: 1050;
  /* por encima de la columna de datos y del header sticky */
  background-color: var(--dcu-white);
  background-repeat: no-repeat;
  border: 4px solid var(--dcu-gray-mid);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

/* Galería ampliada de la lupa (botón de la esquina de la foto). Hummingbird la
   abre como modal-xl (1140 px) y la foto se come la pantalla entera: se limita
   a 760 px de ancho y a lo que quepa de alto. */
.product-images-modal .modal-dialog {
  max-width: min(760px, 92vw);
}

.product-images-modal .carousel-item img {
  max-height: 70vh;
  /* + cabecera y márgenes del modal: cabe en 950 px de alto */
  display: block;
  width: auto;
  margin: 0 auto;
  object-fit: contain;
}

/* Base del sticker de texto (equivale al front.css del modulo) */
.custom_txt_sticker {
  display: inline-block;
  padding: 0.3125rem 0.625rem;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--dcu-white);
  background: #f39d72;
}

/* Un fondo por sticker (mismos colores que el 1.7, por id_textstickers) */
.custom_txt_sticker_1 {
  background-color: var(--dcu-success);
}

/* Ideal deporte */
.custom_txt_sticker_2 {
  background-color: #a98277;
}

/* Ideal oficina */
.custom_txt_sticker_3 {
  background-color: #ffde59;
}

/* De 6 a 12 años */
.custom_txt_sticker_4 {
  background-color: #ff751f;
}

/* De 6 a 10 años */
.custom_txt_sticker_5 {
  background-color: #e2a9f1;
}

/* De 8 a 14 años */
.custom_txt_sticker_6 {
  background-color: #e5dbd0;
}

/* Edición limitada */
.custom_txt_sticker_7 {
  background-color: #d32d21;
}

/* Más vendidos */
.custom_txt_sticker_8 {
  background-color: #949495;
}

/* Calidad-precio */
.custom_txt_sticker_9 {
  background-color: #1800ad;
}

/* Ideal Viajes */
.custom_txt_sticker_10 {
  background-color: #90acb5;
}

/* Ideal running */
.custom_txt_sticker_11 {
  background-color: #ededec;
}

/* Profesional */
.custom_txt_sticker_12 {
  background-color: var(--dcu-black);
}

/* Elegante */
.custom_txt_sticker_13 {
  background-color: #f48880;
}

/* Infantil */
.custom_txt_sticker_14 {
  background-color: #656566;
}

/* Senior */
.custom_txt_sticker_15 {
  background-color: #5f9291;
}

/* GPS integrado */
.custom_txt_sticker_16 {
  background-color: #74220b;
}

/* Ideal regalo */

/* Legibilidad: cuatro fondos son tan claros que el texto blanco del 1.7 no se
   lee (amarillo, lila, beige y gris casi blanco). Unico punto donde la rejilla
   NO replica el 1.7 — mejora, igual que el placeholder del localizador.
   Si el cliente prefiere el blanco original, borrar este bloque. */
.custom_txt_sticker_3,
.custom_txt_sticker_5,
.custom_txt_sticker_6,
.custom_txt_sticker_11 {
  color: var(--dcu-ink);
}

/* ==========================================================================
   PÁGINA DE CARRITO — clonada del 1.7 (medidas tomadas en vivo 2026-08-24)
   Hummingbird la pinta con su propia tipografía (16px, seminegritas, títulos
   a la izquierda); el 1.7 usa 13/14px, todo peso normal y el título centrado.
   Cifras y colores portados uno a uno; la estructura la ajusta el override
   themes/dcutec/templates/checkout/cart.tpl.
   ========================================================================== */
/* El 1.7 oculta la miga de pan en el carrito */
body#cart .breadcrumb__wrapper {
  display: none;
}

/* Título: 30px normal, mayúsculas y centrado sobre el ancho completo */
body#cart h1.page-title-section {
  font-size: 30px;
  font-weight: 400;
  line-height: 40.5px;
  color: var(--dcu-ink);
  text-align: center;
  text-transform: uppercase;
  margin: 40px 0 30px;
}

/* Cajas: borde fino gris y esquinas rectas (HB las deja sin borde) */
body#cart .cart-overview,
body#cart .cart-grid__aside-wrapper {
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0;
  background: var(--dcu-white);
}

/* --- Línea de producto: TODO en una fila, como el 1.7 ---
   HB monta .product-line__content como un grid de 2 columnas y mete las
   acciones como tercer item, asi que la papelera cae a una segunda fila y el
   precio queda debajo de la cantidad. Se pasa todo a flex en una sola linea,
   alineado arriba (el 1.7 alinea al borde superior, no al centro). */
body#cart .cart-overview {
  padding: 0 27px;
}

/* HB mete un <hr> antes y despues de la lista; el 1.7 no los tiene */
body#cart .cart-overview>hr {
  display: none;
}

body#cart .cart__list {
  padding-top: 16px;
}

/* el 1.7 deja 33px hasta la 1ª foto */
body#cart .cart__item {
  margin: 0;
  border: 0;
}

body#cart .product-line {
  align-items: flex-start;
  padding: 16px 0;
}

body#cart .product-line__img {
  width: 125px;
  height: auto;
}

body#cart .product-line__price {
  min-width: 65px;
}

/* La fila en una sola linea SOLO en escritorio: por debajo se apila, como el
   1.7 (a 375px una fila de imagen+nombre+cantidad+precio+papelera no cabe). */
@media (min-width: 992px) {
  body#cart .product-line {
    gap: 86px;
  }

  body#cart .product-line__image {
    flex: 0 0 125px;
    width: 125px;
  }

  body#cart .product-line__content {
    display: flex;
    align-items: flex-start;
    gap: 0;
    flex: 1;
  }

  body#cart .product-line__content-left {
    flex: 1;
  }

  /* cantidad, precio y papelera centrados entre sí sobre la misma línea (con
     flex-start el precio quedaba desalineado con la píldora de cantidad) */
  body#cart .product-line__content-right {
    flex-direction: row;
    align-items: center;
    gap: 55px;
    min-height: 30px;
  }

  body#cart .product-line__quantity-button {
    width: 144px;
  }

  /* 30+7+70+7+30 */
  body#cart .product-line__price {
    display: flex;
    align-items: center;
    min-height: 30px;
  }

  body#cart .product-line__actions {
    flex: 0 0 auto;
    margin-left: 55px;
    align-items: center;
    min-height: 30px;
  }
}

/* El selector de cantidad usa el estilo compartido con la ficha (píldora gris
   de 30px + caja de 70px), definido más arriba en "COMPONENTE COMPARTIDO". */

body#cart .product-line__title {
  font-size: 13px;
  font-weight: 400;
  line-height: 17.5px;
  color: var(--dcu-ink-alt);
}

/* El 1.7 NO muestra el precio unitario bajo el nombre, solo el total de línea */
body#cart .product-line__item--prices {
  display: none;
}

body#cart .product-line__price {
  font-size: 17px;
  font-weight: 700;
  color: var(--dcu-ink-alt);
}

/* "Eliminar" -> icono papelera, como el 1.7 (Material Icons ya lo carga HB) */
body#cart .product-line__actions a[data-link-action="delete-from-cart"] {
  font-size: 0;
  line-height: 1;
  color: var(--dcu-ink-alt);
}

body#cart .product-line__actions a[data-link-action="delete-from-cart"]::before {
  content: "\e872";
  /* delete */
  font-family: "Material Icons";
  font-size: 24px;
  line-height: 1;
  -webkit-font-feature-settings: "liga";
}

/* --- Resumen (columna derecha) ---
   El 1.7 mete el contenido a 20px del borde de la caja, pinta TODAS las
   lineas en 14px gris #656d74 sin ninguna negrita, y separa los tres bloques
   (subtotales+vale / totales / boton) con filetes de 1px. */
/* El padding va en CADA bloque, no en el contenedor: así los filetes que los
   separan llegan de borde a borde de la caja, como en el 1.7. */
body#cart .cart-summary__totals,
body#checkout .cart-summary__totals {
  padding: 0;
}

/* Orden del 1.7: subtotales + vale ARRIBA, luego el total, luego el botón.
   HB coloca el vale entre el total y el botón. */
body#cart .cart-summary__totals,
body#checkout .cart-summary__totals {
  display: flex;
  flex-direction: column;
}

body#cart .cart-summary__subtotals,
body#checkout .cart-summary__subtotals {
  order: 1;
}

body#cart .cart-summary__voucher,
body#checkout .cart-summary__voucher {
  order: 2;
}

body#cart .cart-summary__total,
body#checkout .cart-summary__total {
  order: 3;
}

body#cart .cart-summary__actions,
body#checkout .cart-summary__actions {
  order: 4;
}

body#cart .cart-summary__line,
body#checkout .cart-summary__line {
  font-size: 14px;
  font-weight: 400;
  line-height: 17.5px;
  color: var(--dcu-gray);
  min-height: 0;
  padding: 0;
  margin: 0;
}

/* ⚠️ El gris #656d74 es solo el color HEREDADO del contenedor en el 1.7: los
   textos de verdad (etiqueta e importe) son #232323. */
body#cart .cart-summary__label,
body#checkout .cart-summary__label,
body#cart .cart-summary__value,
body#checkout .cart-summary__value {
  font-size: 14px;
  font-weight: 400;
  color: var(--dcu-ink-alt);
}

body#cart .cart-summary__subtotals,
body#checkout .cart-summary__subtotals {
  margin: 0;
  padding: 20px 20px 0;
}

body#cart .cart-summary__subtotals .cart-summary__line:first-child,
body#checkout .cart-summary__subtotals .cart-summary__line:first-child {
  margin-top: 0;
}

/* En el 1.7 el total NO va en negrita: misma tipografía que el resto */
body#cart .cart-summary__line--bold,
body#checkout .cart-summary__line--bold,
body#cart .cart-summary__line--bold .cart-summary__label,
body#checkout .cart-summary__line--bold .cart-summary__label,
body#cart .cart-summary__line--bold .cart-summary__value,
body#checkout .cart-summary__line--bold .cart-summary__value,
body#cart .cart-summary__value--bold,
body#checkout .cart-summary__value--bold {
  font-weight: 400;
}

/* Filetes de borde a borde y SIN doble linea (HB pinta los suyos) */
body#cart .cart-summary__total,
body#checkout .cart-summary__total {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.25);
  padding: 20px;
  margin: 0;
}

body#cart .cart-summary__actions,
body#checkout .cart-summary__actions {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.25);
  padding: 20px;
  margin: 0;
}

/* Vale: el 1.7 es un enlace suelto, no un acordeón con chevron ni caja */
body#cart .cart-summary__voucher,
body#checkout .cart-summary__voucher {
  padding: 20px 20px 0;
}

body#cart .cart-voucher__accordion,
body#checkout .cart-voucher__accordion,
body#cart .cart-voucher__accordion-item,
body#checkout .cart-voucher__accordion-item,
body#cart .cart-voucher__accordion-button,
body#checkout .cart-voucher__accordion-button {
  border: 0;
  background: none;
}

body#cart .cart-voucher__accordion-button,
body#checkout .cart-voucher__accordion-button {
  font-size: 14px;
  font-weight: 400;
  color: var(--dcu-slate);
  /* sin sangría: el 1.7 alinea este texto con las demás líneas del resumen */
  padding: 0;
  margin-bottom: 20px;
  background: none;
  box-shadow: none;
}

body#cart .cart-voucher__accordion-button::after,
body#checkout .cart-voucher__accordion-button::after {
  display: none;
}

/* Sin hover visible no se ve que el texto es pulsable (tampoco en el 1.7):
   se le da el rojo de marca, que es el hover de enlaces del resto del sitio. */
body#cart .cart-voucher__accordion-button:hover,
body#checkout .cart-voucher__accordion-button:hover,
body#cart .cart-voucher__accordion-button:focus,
body#checkout .cart-voucher__accordion-button:focus {
  color: var(--dcu-red);
}

/* Formulario del cupón: iba a 16px y con el botón gris de "Añadir al carrito".
   Se pone a la escala del resto del resumen y el "Aplicar" comparte estilo con
   "Ir a caja" (regla de arriba). Esto NO es como el 1.7: allí este bloque está
   igual de descuadrado, es mejora pedida por el cliente. */
body#cart .cart-voucher__form,
body#checkout .cart-voucher__form {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

body#cart .cart-voucher__form .form-control,
body#checkout .cart-voucher__form .form-control {
  font-size: 14px;
  line-height: 18px;
  height: 36px;
  padding: 8px 16px;
  border: 1px solid var(--dcu-border);
  border-radius: 3px;
}

body#cart .cart-voucher__accordion-collapse .accordion-body,
body#checkout .cart-voucher__accordion-collapse .accordion-body {
  padding: 0;
  font-size: 14px;
}

/* Botón "Ir a caja": ancho de contenido y centrado (HB lo estira al 100%).
   ⚠️ El .d-grid de Bootstrap es display:grid !important dentro de una cascade
   layer: un !important propio NO lo gana. No se pelea el display — se centra
   el item de la rejilla, que además deja de estirarse. */
body#cart .cart-summary__actions .d-grid,
body#checkout .cart-summary__actions .d-grid {
  justify-items: center;
}

/* ⚠️ ESTANDARIZADO 2026-08-25. Aquí había una segunda definición del botón
   oscuro (13px, radio 3px, hover invirtiendo a blanco), copiada del 1.7. Y era
   fiel: el 1.7 tiene DOS botones oscuros distintos —el de "Añadir al carrito"
   (plano, hover rojo) y el genérico de carrito/caja (redondeado, hover blanco)—
   porque el segundo es el `.btn-primary` que arrastra de PrestaShop classic,
   igual que el cian de los precios. No es una decisión de diseño, es un resto.
   Ahora los tres sitios usan la MISMA regla global `.btn-primary`. Aquí solo
   queda lo que es de esta página: que el botón no se estire. */
body#cart .cart-summary__actions .btn,
body#checkout .cart-summary__actions .btn,
body#cart .cart-voucher__form .btn,
body#checkout .cart-voucher__form .btn {
  display: inline-block;
  width: auto;
}

/* "Continuar comprando": enlace pequeño, no botón con borde */
body#cart .cart__continue-shopping {
  font-size: 13px;
  font-weight: 400;
  color: var(--dcu-ink-alt);
  background: none;
  border: 0;
  padding: 0;
}

/* ==========================================================================
   PÁGINA DE CAJA (checkout) — primera pasada, 2026-08-25
   Solo lo que NO depende de la decisión pendiente "acordeón del 1.7 vs stepper
   de Hummingbird": título, caja del resumen y tipografía. El resumen lateral
   reutiliza las reglas ya medidas del carrito (bloque de arriba: los selectores
   .cart-summary__* / .cart-voucher__* llevan también body#checkout).
   ========================================================================== */
/* Título "CAJA": hereda las medidas del título de página (bloque general), y
   aquí solo añade lo suyo — mayúsculas y que va suelto sobre los pasos. */
body#checkout .dcu-checkout-title h1.page-title-section {
  line-height: 40.5px;
  text-transform: uppercase;
  margin: 40px 0 30px;
}

/* Caja del resumen: borde fino y esquinas rectas, como en el carrito.
   HB la deja sin borde porque la envolvía en un acordeón (el override del
   .tpl lo quita: el 1.7 pinta una tarjeta suelta, sin cabecera ni plegado). */
body#checkout .checkout-grid__aside-wrapper {
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0;
  background: var(--dcu-white);
}

/* Cabecera del resumen ("N artículos" + "Mostrar detalles") y lista de
   productos: a la escala del resto del resumen (HB los pinta a 16px). */
body#checkout .cart-summary__top,
body#checkout .cart-summary__products {
  padding: 20px 20px 0;
}

body#checkout .cart-summary__products-number,
body#checkout .cart-summary__products-accordion .accordion-button,
body#checkout .cart-summary-product__link,
body#checkout .cart-summary-product__price {
  font-size: 14px;
  font-weight: 400;
  color: var(--dcu-ink-alt);
}

/* El desplegable "Mostrar detalles" es un enlace, no un botón con caja */
body#checkout .cart-summary__products-accordion,
body#checkout .cart-summary__products-accordion .accordion-item,
body#checkout .cart-summary__products-accordion .accordion-button {
  border: 0;
  background: none;
  box-shadow: none;
  padding: 0;
}

/* --- Los 4 pasos en acordeón vertical, como el 1.7 --------------------------
   Hummingbird los pinta como pestañas: barra de pasos arriba y un panel a la
   vez. El 1.7 los apila, todos visibles, con el activo abierto. El motor es el
   mismo (el checkout de PS es de una sola página desde la 1.7): esto es solo
   presentación. Medidas portadas del theme.css + custom.css del 1.7.

   ⚠️ La barra de pasos de HB NO se borra, solo se oculta: su JS la consulta
   (anillo de progreso, versión móvil, botones "atrás"). Y NO se usa `display`
   para esconderla desde el .tpl — se hace aquí, en un solo sitio. */
body#checkout .checkout-steps {
  display: none;
}

/* Cada paso: caja blanca con filete fino; los 4 forman una lista apilada.
   El 1.7 quita la sombra que trae el tema base y deja solo bordes .125. */
body#checkout .dcu-step {
  display: block;
  /* HB los oculta como .tab-pane */
  width: 100%;
  background: var(--dcu-white);
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-top: 0;
  border-radius: 0;
  padding: 15px;
  margin: 0;
}

body#checkout .dcu-step:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}

/* Título del paso: 14px, peso 500, mayúsculas — en el 1.7 es un .h3 y su
   custom.css deja TODOS los encabezados a 14px/500. Pulsable salvo que el paso
   aún no se pueda abrir. */
body#checkout .dcu-step__title {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--dcu-ink-alt);
  text-transform: uppercase;
  cursor: pointer;
  margin: 0;
}

body#checkout .step--unreachable .dcu-step__title {
  cursor: default;
}

/* Número del paso: visible mientras el paso NO está completado */
body#checkout .dcu-step__number {
  display: inline-block;
  padding: 10px;
}

/* Tick verde del paso completado */
body#checkout .dcu-step__done {
  display: none;
  color: var(--dcu-success);
  padding: 0 13px;
  margin-right: 25px;
}

/* "Modificar": gris, a la derecha y en minúsculas (el 1.7 lo pone así) */
body#checkout .dcu-step__edit {
  display: none;
  margin-left: auto;
  color: var(--dcu-gray-mid);
  text-transform: lowercase;
  font-weight: 400;
}

body#checkout .dcu-step__edit .material-icons {
  font-size: 16px;
  vertical-align: middle;
}

/* Paso completado y plegado: tick + "Modificar", sin número y sin contenido */
body#checkout .step--complete .dcu-step__done,
body#checkout .step--complete .dcu-step__edit {
  display: inline-block;
}

body#checkout .step--complete .dcu-step__number {
  display: none;
}

/* Solo el paso actual enseña su contenido: es LA regla del acordeón */
body#checkout .dcu-step__content {
  display: none;
  padding: 15px 0 0;
}

body#checkout .step--current .dcu-step__content {
  display: block;
}

/* HB pinta un <hr> bajo el título de cada paso; el 1.7 no lo tiene */
body#checkout .dcu-step__title+hr,
body#checkout .step__title hr {
  display: none;
}

/* --- Formulario y resumen de la caja, a la medida del 1.7 -------------------
   Segunda pasada, comparando capturas de dcutec.com contra dcu9 (2026-08-25).
   Hummingbird apila etiqueta sobre campo, a todo el ancho, con asteriscos rojos
   y textos de ayuda; el 1.7 usa formulario horizontal (etiqueta a la izquierda,
   campo estrecho a la derecha), sin asteriscos ni ayudas. Todo lo de aquí sale
   del theme.css/custom.css del tema Laber. */

/* Contenido del paso: el 1.7 lo mete a 37px de los lados (.content{padding:0
   2.313rem}) y el formulario baja 25px (#customer-form{margin-top:1.563rem}) */
body#checkout .dcu-step__content {
  padding: 25px 37px 15px;
}

/* ⚠️ La rejilla, las etiquetas, las cursivas de obligatorio y los campos YA NO
   se definen aquí: son el patrón general de formularios del tema (bloque
   "FORMULARIOS" al principio del fichero), que esta página comparte con las
   direcciones, la ficha del cliente, el registro y la contraseña. Aquí abajo
   solo queda lo que es EXCLUSIVO de la caja. */

/* El 1.7 esconde en la caja TODOS los textos de ayuda y los "muted"
   (body#checkout span.form-control-comment, body#checkout span.text-muted).
   Fuera de la caja sí se muestran: en una dirección el "Opcional" orienta. */
body#checkout .dcu-step__content .form-text,
body#checkout .dcu-step__content .form-check-label em,
body#checkout .dcu-step__content .text-muted {
  display: none;
}

/* --- Método de envío ---------------------------------------------------
   Hummingbird monta las opciones como UNA lista pegada: fondo gris continuo,
   divisorias entre filas y las esquinas de arriba y abajo redondeadas a 8px.
   El 1.7 las pinta como BLOQUES SUELTOS, planos y separados 15px
   (`.delivery-option{background:#f6f6f6;padding:.9375rem 0;margin-bottom:.9375rem}`).
   Se replica eso: nada de radios ni divisorias, que en este tema no pintan. */
body#checkout .delivery-option__item {
  background-color: var(--dcu-surface-soft);
  border: 0;
  border-radius: var(--dcu-radius);
  margin-bottom: var(--dcu-space-md);
}

/* HB redondea la primera y la última de la lista; el tema es plano */
body#checkout .delivery-options__list>.delivery-option__item:first-child,
body#checkout .delivery-options__list>.delivery-option__item:last-child {
  border-radius: var(--dcu-radius);
}

body#checkout .delivery-option__label {
  padding: var(--dcu-space-md);
}

/* El nombre del transportista, al peso "fuerte" del tema (500), no al 600 de
   Hummingbird. Las mayúsculas vienen del dato, no del CSS. */
body#checkout .delivery-option__carrier-name {
  font-weight: var(--dcu-fw-medium);
  color: var(--dcu-ink);
}

body#checkout .delivery-option__content {
  color: var(--dcu-gray);
  font-size: var(--dcu-fs-sm);
}

body#checkout .delivery-option__price {
  color: var(--dcu-ink);
  font-size: var(--dcu-fs-sm);
}

/* --- Tarjeta de dirección (paso 2) -------------------------------------
   Hummingbird la pinta como una ficha blanca con filete y esquinas
   redondeadas; el 1.7 usa el MISMO bloque gris claro que las opciones de
   envío, con un filete de 3px transparente que se colorea al seleccionar:
   `.address-item{background:#f6f6f6;border:3px solid transparent}` y
   `.address-item.selected{background:#fff;border:3px solid …}`.
   ⚠️ Ese "…" en el 1.7 es #2fb5d2, el cian de PrestaShop classic. Aquí se
   marca con el rojo de marca, que es lo que ya usa el tema para "activo"
   (el propio radio se pinta en rojo al marcarse). */
body#checkout .address-card {
  background-color: var(--dcu-surface-soft);
  border: 3px solid transparent;
  border-radius: var(--dcu-radius);
  margin-bottom: var(--dcu-space-xs);
}

body#checkout .address-card--radio.selected,
body#checkout .address-card--radio:hover {
  background-color: var(--dcu-white);
}

body#checkout .address-card--radio.selected {
  border-color: var(--dcu-red);
}

body#checkout .address-card--add-address {
  background-color: var(--dcu-surface-soft);
  border: 3px solid transparent;
  border-radius: var(--dcu-radius);
}

body#checkout .address-card--add-address:hover {
  background-color: var(--dcu-white);
  border-color: var(--dcu-border-strong);
}

/* Alias al peso "fuerte" del tema, no al 600 de HB */
body#checkout .address-card__alias {
  font-size: var(--dcu-fs-md);
  font-weight: var(--dcu-fw-medium);
  color: var(--dcu-ink);
}

/* El 1.7 sangra el cuerpo de la dirección 25px, para que caiga bajo el alias
   y no bajo el radio (`.address{margin-left:1.563rem}`) */
body#checkout .address-card__content,
body#checkout .address-card__extra {
  margin-left: var(--dcu-space-xl);
  font-size: var(--dcu-fs-sm);
  color: var(--dcu-gray-soft);
}

body#checkout .address-card__actions {
  margin-left: var(--dcu-space-xl);
  font-size: var(--dcu-fs-sm);
}

/* ==========================================================================
   CONFIRMACIÓN DE PEDIDO (2026-08-26)
   Hummingbird la monta con sus tamaños de serie: el "Su pedido está
   confirmado" a 32px en negrita, los títulos de sección como `h2.h2` y todo
   dentro de tarjetas con esquinas redondeadas. Se baja a la escala del tema.
   ⚠️ El título va dentro del `.alert`, no de `.page-header`, así que la regla
   general de títulos no lo alcanza (mismo caso que "CAJA" y la lista de
   deseos). Aquí NO se centra: comparte caja con el mensaje del email.
   ========================================================================== */
body#order-confirmation .alert .page-title-section {
  font-size: var(--dcu-fs-4xl);
  font-weight: var(--dcu-fw-normal);
  color: var(--dcu-ink);
  text-align: left;
  margin-bottom: var(--dcu-space-xs);
}

/* Títulos de sección ("Información de pago", "Detalles del pedido"): el
   mismo 24/500 que usan las secciones de la ficha de producto */
body#order-confirmation h2,
body#order-confirmation .h2,
body#order-confirmation h3.h3 {
  font-size: var(--dcu-fs-2xl);
  font-weight: var(--dcu-fw-medium);
  color: var(--dcu-ink);
  text-transform: none;
}

/* Tarjetas planas, como el resto del tema */
body#order-confirmation .card {
  border: var(--dcu-border-width) solid var(--dcu-border);
  border-radius: var(--dcu-radius);
}

body#order-confirmation .order-confirmation__details-list {
  font-size: var(--dcu-fs-sm);
  color: var(--dcu-ink);
}

/* Líneas de producto */
body#order-confirmation .order-confirmation__product-title {
  font-size: var(--dcu-fs-sm);
  font-weight: var(--dcu-fw-medium);
  color: var(--dcu-ink);
}

body#order-confirmation .order-confirmation__product-reference,
body#order-confirmation .order-confirmation__product-attributes {
  font-size: var(--dcu-fs-sm);
  color: var(--dcu-gray);
}

body#order-confirmation .order-confirmation__product-price,
body#order-confirmation .order-confirmation__product-prices {
  font-size: var(--dcu-fs-sm);
}

/* Subtítulo del bloque de pago ("Pago por transferencia bancaria"): HB lo
   pinta a 20px/600 con el gris azulado de Bootstrap (#6c757d), que no es
   ninguno de los del tema. */
body#order-confirmation .card-subtitle {
  font-size: var(--dcu-fs-lg);
  font-weight: var(--dcu-fw-medium);
}

/* Datos del pago. NO es una tabla: el módulo de la pasarela usa una lista de
   definición (`dl.dl-list`) que HB pinta a 16px con etiquetas en 600 y las
   esquinas redondeadas. Se baja a la escala del tema y se aplana. */
body#order-confirmation .dl-list {
  background-color: var(--dcu-surface-soft);
  border-radius: var(--dcu-radius);
  font-size: var(--dcu-fs-sm);
}

body#order-confirmation .dl-list dt,
body#order-confirmation .dl-list dd {
  border-color: var(--dcu-border);
  color: var(--dcu-ink);
  padding: var(--dcu-space-sm) var(--dcu-space-md);
}

body#order-confirmation .dl-list dt {
  font-weight: var(--dcu-fw-medium);
}

/* `.text-secondary` es una utilidad de Bootstrap: vive en la capa
   `utilities` CON !important, así que su gris azulado no se puede pisar
   desde fuera de una capa. Misma técnica que el corazón de favoritos. */
@layer vendors {
  body#order-confirmation .card-subtitle.text-secondary {
    color: var(--dcu-gray) !important;
  }
}

/* --- "Volver a …": es un enlace, no un botón ---------------------------
   Se le quitan fondo y borde en el bloque de más abajo, pero el botón de
   Hummingbird conserva `display:grid` y `justify-content:center` con el
   ancho completo de la fila: el texto salía CENTRADO en una caja de ~580px,
   o sea desalineado respecto al resto del paso. Aquí se le devuelve el
   comportamiento de enlace: ancho de contenido y pegado a la izquierda. */
body#checkout .buttons-wrapper .js-back {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
}

/* "Tratamiento" (Sr./Sra.): el 1.7 lo oculta en la caja
   (body#checkout #customer-form > section > .form-group.row:first-of-type) */
body#checkout #customer-form>section>.mb-3:first-child {
  display: none;
}

/* Campos: 14px y ancho de columna, no a sangre */
body#checkout .dcu-step__content .form-control,
body#checkout .dcu-step__content .form-select {
  font-size: 14px;
  line-height: 18px;
  padding: 8px 12px;
  border: 1px solid var(--dcu-border);
  border-radius: 0;
}

/* Casillas: todo en el gris oscuro del tema, sin verdes ni rojos de estado */
body#checkout .dcu-step__content .form-check-label,
body#checkout .dcu-step__content .form-check-label a {
  color: var(--dcu-ink-alt);
  font-size: 14px;
}

body#checkout .dcu-step__content .form-check-label a {
  text-decoration: underline;
}

/* Pestanyas invitado / iniciar sesión: el 1.7 las separa con una barra y no
   subraya la activa */
body#checkout .nav-underline {
  border: 0;
  gap: 0;
  margin-bottom: 20px;
}

body#checkout .nav-underline .nav-link {
  font-size: 14px;
  color: var(--dcu-gray-mid);
  border: 0;
  padding: 0 16px 0 0;
}

body#checkout .nav-underline .nav-link.active {
  color: var(--dcu-ink-alt);
  font-weight: 500;
}

body#checkout .nav-underline .nav-item+.nav-item .nav-link {
  border-left: 1px solid var(--dcu-border);
  padding-left: 16px;
}

/* Botón "Continuar": el 1.7 no le pone flecha. El aspecto sale de la regla
   global `.btn-primary` (ver la nota del bloque del carrito: aquí también
   había una copia con 13px y radio 3px). */
body#checkout .buttons-wrapper button.btn .material-icons {
  display: none;
}

/* --- Resumen de la caja ---
   Orden del 1.7: artículos + detalle, subtotales, VALE, y por último los
   totales. Hummingbird pone el vale al final del todo. */
body#checkout #js-checkout-summary {
  display: flex;
  flex-direction: column;
}

body#checkout .cart-summary__top {
  order: 1;
}

body#checkout .cart-summary__products {
  order: 2;
}

body#checkout .cart-summary__subtotals {
  order: 3;
}

body#checkout .cart-summary__voucher {
  order: 4;
}

body#checkout .cart-summary__total {
  order: 5;
}

/* En la caja los subtotales del 1.7 van en peso 500 y los totales en negrita
   (en el CARRITO es al revés: todo normal — de ahí que se separe aquí). */
body#checkout .cart-summary__subtotals .cart-summary__label,
body#checkout .cart-summary__subtotals .cart-summary__value {
  font-weight: 500;
}

body#checkout .cart-summary__line--bold,
body#checkout .cart-summary__line--bold .cart-summary__label,
body#checkout .cart-summary__line--bold .cart-summary__value {
  font-weight: 700;
}

/* Lista de productos: miniatura de 50px con filete, y el precio en el azul del
   1.7 (.product-price{color:#2fb5d2}) */
body#checkout .cart-summary__products {
  padding: 20px 20px 0;
}

body#checkout .cart-summary__products-number {
  font-size: 14px;
  color: var(--dcu-ink-alt);
}

body#checkout .cart-summary-product__img {
  width: 50px;
  height: auto;
  border: 1px solid var(--dcu-border);
}

body#checkout .cart-summary-product__link {
  font-size: 14px;
  color: var(--dcu-ink-alt);
}

body#checkout .cart-summary-product__price {
  font-size: 14px;
  color: var(--dcu-red-dark);
}

/* "Ver detalles": en el 1.7 es un enlace con aspecto de botón, sin chevron */
body#checkout .cart-summary__products-accordion .accordion-button {
  display: inline-block;
  width: auto;
  font-size: 13px;
  color: var(--dcu-ink-alt);
  border: 1px solid var(--dcu-border);
  padding: 8px 16px;
  background: none;
  box-shadow: none;
}

body#checkout .cart-summary__products-accordion .accordion-button::after {
  display: none;
}

/* --- Caja: repaso sobre capturas (2026-08-25, tercera pasada) --------------- */

/* "Crear una cuenta": Hummingbird mete la casilla y el campo de contraseña
   dentro del MISMO .mb-3, así que el campo caía en la columna de la derecha y
   su etiqueta se descolgaba. La casilla se queda en la columna de los campos y
   el desplegable ocupa las dos, para que la fila de contraseña quede alineada
   con Nombre / Apellidos / Correo. */
body#checkout .dcu-step__content .mb-3>.js-password-form__input-wrapper {
  grid-column: 1 / -1;
  margin-top: 8px;
}

body#checkout .dcu-step__content .js-password-form__input-wrapper .mb-3 {
  margin-bottom: 0;
}

/* Casillas en gris oscuro: el rojo de marca es para el resto del sitio, pero el
   1.7 pinta las de la caja con su borde/relleno oscuro (border:2px solid #232323).
   Revertible: basta con quitar este bloque para que vuelva el rojo. */
body#checkout .form-check-input:checked {
  background-color: var(--dcu-ink-alt);
  border-color: var(--dcu-ink-alt);
}

body#checkout .form-check-input:focus {
  border-color: var(--dcu-ink-alt);
  box-shadow: none;
}

/* "¿Olvidó su contraseña?" es un enlace, no un botón negro: la regla del botón
   de arriba lo alcanzaba porque comparte la clase .btn */
body#checkout .buttons-wrapper .btn-basic {
  font-size: 14px;
  font-weight: 400;
  color: var(--dcu-gray-mid);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
}

body#checkout .buttons-wrapper .btn-basic:hover {
  color: var(--dcu-red);
}

/* Botón del ojo de la contraseña: en el 1.7 es un botón claro con borde y el
   texto "Mostrar"; aquí al menos deja de ser un bloque negro */
body#checkout .password-field .btn,
body#checkout .js-password-form__input-wrapper .btn {
  --bs-btn-bg: var(--dcu-white);
  --bs-btn-color: var(--dcu-ink-alt);
  --bs-btn-border-color: var(--dcu-border);
  --bs-btn-hover-bg: var(--dcu-border);
  --bs-btn-hover-color: var(--dcu-ink-alt);
  --bs-btn-hover-border-color: var(--dcu-border);
  border-radius: 0;
}

/* Línea de producto del resumen: el 1.7 pone "nombre x2" y el importe de la
   línea en azul a la derecha; no enseña el precio unitario. */
body#checkout .cart-summary-product__price {
  display: none;
}

body#checkout .cart-summary-product__link {
  display: inline;
}

body#checkout .cart-summary-product__quantity {
  display: inline;
}

body#checkout .cart-summary-product__quantity .label {
  display: none;
}

body#checkout .cart-summary-product__total {
  font-size: 14px;
  font-weight: 400;
  color: var(--dcu-red-dark);
}

/* --- Paso 2 (direcciones) -------------------------------------------------- */

/* "Utilizar esta dirección para facturas también": aquí la casilla y su
   etiqueta cuelgan DIRECTAMENTE del .mb-3 (no hay .form-check que envolverlos,
   como sí lo hay en el paso 1), así que el grid del formulario los repartía uno
   en cada columna y dejaba un hueco enorme entre ambos. Esta fila no es una
   fila etiqueta+campo: se saca del grid y se sangra hasta la columna de los
   campos (195px de etiqueta + 20px de separación). */
body#checkout .dcu-step__content .mb-3:has(> .form-check-input) {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 215px;
}

/* Bootstrap saca la casilla 1.5em a la izquierda contando con el padding de su
   .form-check; aquí no hay wrapper, así que se anula para que arranque justo en
   la columna de los campos, igual que la del paso 1. */
body#checkout .dcu-step__content .mb-3>.form-check-input {
  margin-left: 0;
}

/* Los dos botones del paso van en filas distintas del DOM ("Continuar" dentro
   del formulario y "Volver" fuera), y eso dejaba un hueco vacío abajo a la
   derecha. custom.js los junta en una sola fila; aquí se reparten a los
   extremos, como en el 1.7. */
body#checkout .buttons-wrapper--end.dcu-buttons--merged {
  justify-content: space-between;
}

body#checkout .dcu-buttons--merged .js-back {
  margin: 0;
}

/* "Volver a ...": es un paso atrás, no la acción principal — enlace, no botón */
body#checkout .buttons-wrapper .btn-outline-primary.js-back {
  font-size: 13px;
  font-weight: 400;
  color: var(--dcu-gray-mid);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
}

body#checkout .buttons-wrapper .btn-outline-primary.js-back:hover {
  color: var(--dcu-red);
}

/* ==========================================================================
   LANDING DE INVERSORES (CMS 28, subtienda) — 2026-08-26
   Es la portada de la subtienda: foto de cabecera, titulo rojo, seis
   recuadros de servicios y la rejilla de 36 productos que pinta el modulo
   `dcucmsproducts`. En el 1.7 todo esto colgaba del `el_class` que el
   page-builder ponia en cada fila (`imatge-dcu`, `title-inversores`,
   `row-icons-landing`...), asi que el conversor de shortcodes conserva esas
   clases y aqui se reponen las medidas del tema viejo.
   Solo existe esta pagina con estas clases: el ambito `.cms-id-28` es exacto.
   ========================================================================== */

/* Foto de cabecera: en el 1.7 es el fondo de la fila, no un <img> */
body#cms.cms-id-28 .imatge-dcu {
  background-image: url("/img/cms/jscomposer/furgo.png");
  margin-bottom: 35px;
  min-height: 150px;
}

body#cms.cms-id-28 .page_title_area .page-heading {
  font-size: 31px;
  line-height: 1;
  letter-spacing: -1.5px;
  font-weight: var(--dcu-fw-medium);
  /* el 1.7 usa #b01b43; se adopta el rojo de precio del sistema */
  color: var(--dcu-red-dark);
  text-align: center;
  margin-bottom: 0;
}

@media (min-width: 768px) {
  body#cms.cms-id-28 .txt-icons-inversores {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* Los seis servicios: recuadro con el texto centrado en vertical.
   ⚠️ El filete va en la caja de DENTRO (`.text-icon`), no en la columna: el
   1.7 lo pone en su `.vc_column-inner`, que queda por dentro del canalon. Si
   se le pone a la columna, los seis recuadros salen pegados unos a otros.
   ⚠️ El #888 es medida del 1.7 y no tiene token equivalente (queda entre
   --dcu-gray y --dcu-gray-faint): se deja literal a proposito. */
body#cms.cms-id-28 .row-icons-landing .col-icons-landing>.text-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  padding: 15px 30px;
  border: 1px solid #888;
  font-size: var(--dcu-fs-md);
  line-height: 1.2;
  font-weight: var(--dcu-fw-bold);
  color: var(--dcu-gray);
  text-align: center;
}

/* El parrafo vacio que el editor dejaba detras de cada rotulo */
body#cms.cms-id-28 .row-icons-landing .col-icons-landing>p:empty {
  display: none;
}

/* La fila de catalogos va separada por un filete */
body#cms.cms-id-28 .catalogos-landing-inversores {
  padding-top: 45px;
  border-top: 1px solid var(--dcu-border);
}

body#cms.cms-id-28 .catalogos-landing-inversores h4 {
  text-align: center;
}

/* La rejilla de productos embebida respira como el resto del contenido */
.page-content--cms .dcu-cms-products {
  margin: var(--dcu-space-2xl) 0;
}

/* ==========================================================================
   HEADER EN TABLET (2026-08-28)
   El cliente vio que "todo se amontona" en pantallas de iPad. Medido: a 1024
   el bloque de login mide 245px y la columna de acciones solo tiene 356 para
   cuatro elementos que suman 448 → se desborda hacia la IZQUIERDA y el texto
   "Iniciar sesión / Registrarse" se pinta ENCIMA del logo. A 768 lo tapa.

   ⚠️ No era desbordamiento de página: `scrollWidth` daba 0 de sobra en las dos
   anchuras. Hay que medir el solape con getBoundingClientRect de los
   elementos, no el ancho del documento.

   El 1.7 tampoco tiene diseño de tablet —se apila en 310px de alto y encima
   tiene scroll horizontal— así que aquí no hay nada fiel que copiar: es
   mejora sobre producción, como el placeholder del localizador.
   ========================================================================== */

/* ⚠️ EL CORTE VA EN 1200, NO EN 992. La rejilla es `1fr auto 1fr`, así que
   cada columna lateral mide (ancho - logo) / 2. Con el logo a 198px y las
   acciones necesitando 448, el solape empieza por debajo de ~1094px. Se corta
   en 1280 y no en 1200 porque a 1200 quedaba un solape de 5px medido; a 1280
   sobran 35. Con 992
   el arreglo NO se aplicaba a 1024 (que además son 1009 de ancho útil, porque
   la barra de scroll se lleva 15). Coincide con el `xl` de Bootstrap. */
@media (max-width: 1279.98px) {

  /* Logo más contenido para dejar respirar a las dos columnas */
  .dcu-header__logo {
    padding: 0 var(--dcu-space-sm);
  }

  .dcu-header__logo img,
  .header-bottom .navbar-brand .logo {
    max-width: 120px;
  }

  /* Menos aire entre las acciones */
  .dcu-header__actions {
    gap: 0;
  }

  /* La topbar suelta la coletilla fina ("a Península española y Baleares"):
     con ella, texto y menú suman 936px y la frase salía cortada a media
     palabra. El mensaje que importa —el importe del envío gratis— se queda. */
  .dcu-topbar__ship span {
    display: none;
  }
}

@media (max-width: 991.98px) {

  /* La topbar deja solo el menú: el texto de envío gratis y los 6 enlaces
     suman 936px y no caben. En el 1.7 el texto sale cortado a media palabra. */
  .dcu-topbar__ship {
    display: none;
  }

  .dcu-topbar__row {
    justify-content: center;
  }

  /* 🔴 AQUÍ ESTÁ EL ARREGLO DE FONDO. La rejilla `1fr auto 1fr` centra el logo
     GEOMÉTRICAMENTE respecto a la página, y eso es lo que se rompe: con el
     logo ocupando 144px, a 390 de ancho quedan 65px por lado y solo el login
     y el carrito ya piden 133. Por debajo de `lg` se pasa a `auto 1fr auto`:
     hamburguesa y acciones ocupan lo suyo y el logo se centra en lo que
     sobra. Deja de estar centrado al píxel respecto a la página, pero ahí el
     menú ya es una hamburguesa, así que la asimetría no se nota — y nada se
     monta encima de nada a ningún ancho. */
  .dcu-header__row {
    grid-template-columns: auto 1fr auto;
  }

  .dcu-header__logo {
    justify-self: center;
  }

  /* A 768 las cuatro acciones sumaban 267 en una columna de 255: 12px de más.
     Se recorta el aire lateral de cada bloque en vez de esconder ninguno. */
  .dcu-header__actions>div {
    padding-left: var(--dcu-space-3xs);
    padding-right: var(--dcu-space-3xs);
  }
}

/* ⚠️ Va en @layer vendors A PROPÓSITO. El texto del login es
   `.header-block__title.d-none.d-md-inline`, y `.d-md-inline` vive en la capa
   `utilities` CON `!important`. Para las declaraciones `!important` el orden
   de capas se INVIERTE: lo no encapsulado es lo MÁS DÉBIL, así que una regla
   nuestra sin capa no gana ni con `!important`. `vendors` es la primera capa
   que declara Hummingbird y por tanto la que más pesa para `!important`. */
@layer vendors {
  @media (max-width: 1279.98px) {
    .dcu-header__actions .header-block__title {
      display: none !important;
    }
  }
}

@media (max-width: 767.98px) {

  /* En el móvil no cabían las tres cosas: 50px de margen por lado + logo de
     120 + hamburguesa + los dos iconos. Y había un fallo sutil de rejilla: la
     columna de acciones es un contenedor FLEX, así que su ancho mínimo
     colapsa —los hijos son encogibles— y la pista `auto` se quedaba en 88px
     mientras el login y el carrito pedían 133: se salían por la izquierda,
     encima del logo. `min-width: max-content` es lo que impide ese colapso. */
  .dcu-header .header-bottom__container {
    padding-left: var(--dcu-space-sm);
    padding-right: var(--dcu-space-sm);
  }

  .dcu-header__actions {
    min-width: max-content;
  }

  .dcu-header__logo img,
  .header-bottom .navbar-brand .logo {
    max-width: 90px;
  }
}

/* La tira de "Pago 100% seguro" del pie es un <img> suelto de 354px sin
   `max-width`: por debajo de 360 era lo único que sacaba barra de scroll
   horizontal en toda la home. */
.dcu-footer-cols img {
  max-width: 100%;
  height: auto;
}

.dcu-footer-cols picture {
  display: block;
}

@media (max-width: 767.98px) {

  /* El globo de ayuda va centrado sobre su icono, y el icono cae al final de
     la etiqueta —o sea, cerca del borde derecho—, así que en móvil se salía
     de la pantalla. ⚠️ Aunque esté oculto sí cuenta para el ancho del
     documento: era lo único que sacaba scroll horizontal en las CMS con
     formulario. Anclado a la derecha crece hacia dentro. */
  .wpcf7 .tool-tip .content-info-form {
    left: auto;
    right: 0;
    transform: none;
    max-width: calc(100vw - 3rem);
  }

  .wpcf7 .tool-tip .content-info-form::after {
    left: auto;
    right: 10px;
    margin-left: 0;
  }
}

/* ============================================================
   INVERSORES (shop2) — su header es otro
   ============================================================
   Producción (inversores.dcutec.com) no tiene topbar negra y reparte el header
   en una sola fila: logo a la IZQUIERDA (col-lg-2), menú (col-lg-6) y acciones
   (col-lg-4). El DOM se conserva (menú · logo · acciones) y se reordena con
   `order`, así el mismo .tpl vale para las dos tiendas.
   ⚠️ Solo desde 768px: con dos clases estas reglas ganaban a las de la
   cabecera MÓVIL (una clase) y en móvil el logo quedaba descolocado y los
   iconos a la izquierda. Por debajo manda la cabecera móvil común, que es
   también la de producción (logo centrado, iconos centrados debajo). */
@media (min-width: 768px) {
  .dcu-header--inversores .dcu-header__row {
    grid-template-columns: auto 1fr auto;
  }

  .dcu-header--inversores .dcu-header__logo {
    order: 1;
    text-align: left;
    padding: 0 1.5rem 0 0;
  }

  .dcu-header--inversores .dcu-header__menu {
    order: 2;
    justify-content: flex-start;
  }

  .dcu-header--inversores .dcu-header__actions {
    order: 3;
  }
}

/* Los ítems de CMS que ps_mainmenu no sabe agrupar (SOLUCIONES, Noticias,
   Contacto, DCU) van en dos <nav> propios, a los lados del widget. Toman las
   medidas del menú principal para que la fila lea como una sola. */
.dcu-inv-menu>ul {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: nowrap;
}

.dcu-inv-menu>ul>li {
  position: relative;
  /* ancla del desplegable */
  padding: 0 10px;
}

.dcu-inv-menu>ul>li>a {
  display: flex;
  align-items: center;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 400;
  color: var(--dcu-ink);
  line-height: 62px;
  text-decoration: none;
}

.dcu-inv-menu>ul>li>a:hover {
  color: var(--dcu-red);
}

.dcu-inv-menu>ul>li>a .material-icons {
  font-size: 15px;
}

/* El desplegable cuelga de un ítem de 62px, no de los 33px de la topbar. */
.dcu-inv-menu .dcu-dd>ul {
  top: 62px;
}

/* Por debajo de lg el menú colapsa a hamburguesa: estos dos <nav> sobran, y
   dejarlos empuja las acciones sobre el logo (el fallo que ya costó el header
   de tablet en agosto). */
@media (max-width: 991.98px) {
  .dcu-inv-menu {
    display: none;
  }
}

/* Rejilla de tarjetas de la home de Inversores.
   El HTML viene del bloque estático del 1.7: un contenedor con
   `margin-left:-15px; margin-right:-15px` y columnas `col-lg-*`. En el tema
   viejo (Bootstrap 3/4) cada columna traía su propio padding de 15px y el
   negativo cuadraba; en Hummingbird (BS5) el canalón vive en `.row`
   (--bs-gutter-x) y estas columnas no lo son, así que el bloque se salía 15px
   por la derecha — 15px de scroll horizontal en toda la home. */
/* El hijo directo lleva `margin: 0 -15px` inline (del editor del 1.7), asi que
   el padre tiene que poner los 15px que ese negativo descuenta; si no, el
   bloque mide 30px mas que su contenedor y la home arrastra scroll lateral. */
.dcu-inv-home {
  /* Contenido, no full-bleed: las tarjetas van en un contenedor centrado como
     la banda de Noticias (en producción el bloque es full-width pero las cards
     viven en un .container de ~1370px). 1320 = ancho del .container de HB. */
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

/* Solo las columnas que llevan una tarjeta: las `col-lg-8` del origen son
   contenedoras de otras columnas, y darles padding tambien se lo sumaba dos
   veces a las 4 tarjetas anidadas (285px frente a los 315 de la suelta). */
.dcu-inv-home [class*="col-"]:has(> .img) {
  padding-left: 15px;
  padding-right: 15px;
}

.dcu-inv-home .img img {
  display: block;
  width: 100%;
  height: auto;
}

/* Orden de la fila: DCU · [categorías del widget] · SOLUCIONES · Noticias ·
   Contacto, como en producción. Hummingbird le pone `order: 1` al widget de
   ps_mainmenu, así que sin esto los dos <nav> (order 0 por defecto) se colaban
   los dos por delante de las categorías. */
.dcu-inv-menu--pre {
  order: 0;
}

.dcu-inv-menu--post {
  order: 2;
}

/* Caption del slider en Inversores.
   Producción NO muestra el título del slide (el `h2`), solo el texto del
   caption, centrado sobre la foto. En shop1 el texto va dentro de la imagen y
   el caption se anula entero; aquí es al revés, así que hay que exceptuarlo.
   El ámbito va por `:has()` sobre el header porque Hummingbird NO pone la
   clase `shop-id-2` en el body de la home (solo aparece en la ficha). */
body:has(.dcu-header--inversores) .ps-imageslider figcaption h2 {
  display: none;
}

body:has(.dcu-header--inversores) .ps-imageslider__figcaption {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  margin-bottom: 0;
  z-index: 3;
}

/* En móvil Hummingbird oculta el caption (d-none d-lg-block). Se muestra el
   título del hero también en móvil (petición cliente); d-none es !important en
   la capa utilities, así que el override va en @layer vendors (la primera capa,
   que gana para !important). El texto se escala en bloque para caber sin pelear
   span a span. */
@layer vendors {
  @media (max-width: 767px) {
    body:has(.dcu-header--inversores) .ps-imageslider__figcaption {
      display: block !important;
    }
  }
}

@media (max-width: 767px) {

  /* Caja más ancha y tamaños de fuente REALES (no scale: el wrapping se decide
     con el tamaño real, así el título no se parte en 5 líneas). */
  body:has(.dcu-header--inversores) .ps-imageslider__figcaption {
    left: 2%;
    right: 2%;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
    /* legible sobre zonas claras */
  }

  body:has(.dcu-header--inversores) .ps-imageslider__figcaption .frase-slider-inici div:nth-of-type(1) span {
    font-size: 26px;
    line-height: 1.1;
    white-space: nowrap;
  }

  body:has(.dcu-header--inversores) .ps-imageslider__figcaption .frase-slider-inici div:nth-of-type(2) span {
    font-size: 15px;
  }
}

/* ==========================================================================
   HERO de Inversores reconstruido (2026-09-22).
   La foto del banner ahora es un rectángulo LIMPIO (el triángulo blanco se
   rellenó con nano-banana/gemini-3.1-flash-image). Antes el tema usaba
   object-fit:fill sobre una imagen con el corte horneado → estiraba la
   furgoneta y dejaba un hueco blanco. Ahora:
   - alto responsive con clamp (se ve bien de móvil a 4K, sin hueco),
   - object-fit:cover (sin distorsión), la furgoneta encuadrada al centro,
   - el corte diagonal se hace por CSS (clip-path), nítido y escalable.
   ========================================================================== */
body:has(.dcu-header--inversores) .ps-imageslider {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 86%);
}

body:has(.dcu-header--inversores) .ps-imageslider,
body:has(.dcu-header--inversores) .ps-imageslider .carousel,
body:has(.dcu-header--inversores) .ps-imageslider .carousel-inner,
body:has(.dcu-header--inversores) .ps-imageslider .carousel-item {
  height: clamp(360px, 44vw, 720px);
}

/* El <figure> que envuelve la imagen debe llenar el carousel-item; si no, se
   queda a la altura natural de la foto (~240px) y deja una banda blanca bajo el
   hero. Con esto el object-fit:cover del img tiene un alto real que llenar. */
body:has(.dcu-header--inversores) .ps-imageslider figure {
  height: 100%;
  margin: 0;
}

body:has(.dcu-header--inversores) .ps-imageslider .carousel-item img,
body:has(.dcu-header--inversores) .ps-imageslider figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* El hero de Inversores es un slide ÚNICO y fijo → fuera las flechas y el punto
   indicador (se veían sobre la foto, sin sentido en una imagen fija). */
body:has(.dcu-header--inversores) .ps-imageslider .carousel-control-prev,
body:has(.dcu-header--inversores) .ps-imageslider .carousel-control-next,
body:has(.dcu-header--inversores) .ps-imageslider .carousel-indicators {
  display: none !important;
}

/* Ajustes de móvil (2026-09-23): en móvil el hero quedaba muy alto, la diagonal
   dejaba una cuña blanca grande y había ~40px de hueco hasta las tarjetas; y las
   tarjetas apiladas mostraban huecos irregulares (wrappers de fila del jscomposer). */
@media (max-width: 767px) {

  body:has(.dcu-header--inversores) .ps-imageslider,
  body:has(.dcu-header--inversores) .ps-imageslider .carousel,
  body:has(.dcu-header--inversores) .ps-imageslider .carousel-inner,
  body:has(.dcu-header--inversores) .ps-imageslider .carousel-item {
    height: 300px;
  }

  /* En móvil se mantiene el corte diagonal (mask propio, algo más marcado que en
     escritorio para que se note en un hero corto). Ya no deja cuña blanca porque
     el figure llena el hero. */
  body:has(.dcu-header--inversores) .ps-imageslider {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 82%);
  }

  /* El hueco hero→tarjetas es el grid-gap de 40px de .page-content--home. Se
     tira solo esta sección hacia arriba (margen negativo) para pegarla al hero,
     sin tocar el gap del resto de secciones. */
  body:has(.dcu-header--inversores) .ps-customtext {
    margin-top: -12px;
    /* pega las tarjetas al hero pero deja respirar el corte */
  }

  /* Tarjetas de casos de uso: apiladas a ras, sin los huecos raros. */
  .dcu-inv-home [class*="col-"] {
    float: none;
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
  }

  /* Los wrappers de fila del jscomposer son flex con row-gap → 30px entre las
     dos filas apiladas. Se anula el gap y cualquier margen en móvil. */
  .dcu-inv-home,
  .dcu-inv-home>div,
  .dcu-inv-home [class*="col-"],
  .dcu-inv-home [class*="col-"]>div {
    gap: 0 !important;
    row-gap: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .dcu-inv-home .img,
  .dcu-inv-home .img-container,
  .dcu-inv-home .img img {
    display: block;
  }
}

/* Inversores lleva SEIS ítems y dos son largos ("INVERSORES DE CORRIENTE",
   "CARGADORES DE BATERÍA"): con el paso de 10px de shop1 la fila pedía 783px
   sobre los 726 disponibles y "CONTACTO" se metía bajo el icono de sesión.
   (Producción tiene el mismo problema y lo resuelve peor: parte el menú en dos
   líneas encima del slider.) */
.dcu-header--inversores .dcu-inv-menu>ul>li,
.dcu-header--inversores .dcu-header__menu .ps-mainmenu__tree-item {
  padding: 0 5px;
}

@media (max-width: 1279.98px) {

  .dcu-header--inversores .dcu-inv-menu>ul>li>a,
  .dcu-header--inversores .dcu-header__menu .ps-mainmenu__tree-link {
    font-size: 12px;
  }
}

/* ==========================================================================
   BLOG (módulo `sedestral`) — medidas del blog del 1.7 (2026-09-08)

   El cliente, comparando con dcutec.com/xipblog.html: sin migas de pan, la
   fecha debajo del título y otras fuentes. Todo medido en la réplica 1.7:
   el titular es el <a> de dentro del h3 (18px/500, `capitalize` — por eso en
   el original se lee "Catálogo 2026 Ya Disponible"), la fecha 13px en #999
   mayúsculas, y el resumen 14px gris justificado.
   La fecha la inserta `custom.js`: el módulo la lleva solo en un <meta>.
   ========================================================================== */
body[id^="module-sedestral"] .breadcrumb__wrapper {
  display: none;
}

.dcu-blog-date {
  display: block;
  font-size: var(--dcu-fs-xs);
  font-weight: var(--dcu-fw-normal);
  line-height: 1;
  color: var(--dcu-gray-faint);
  text-transform: uppercase;
  margin: 0 0 var(--dcu-space-xl);
}

/* ⚠️ El selector lleva `.blog-list` porque asi lo escribe el modulo
   (`.sedestral.blog-list .blog-post .snippet`): con uno mas corto pierde por
   especificidad y el resumen se queda con sus 16px en #333. */
.sedestral.blog-list .blog-post .snippet {
  font-size: var(--dcu-fs-sm);
  color: var(--dcu-gray);
  line-height: 2.1;
  text-align: justify;
  margin: 0 0 var(--dcu-space-2xl);
}

/* ==========================================================================
   ACORDEÓN DE LAS CMS (Preguntas Frecuentes) — medidas del 1.7 (2026-09-08)

   El conversor de shortcodes traduce el `vc_accordion` del page-builder al
   acordeón de Bootstrap que ya trae Hummingbird, pero con su aspecto de
   serie: rótulos de 18px en rojo, chevrón y filetes gruesos. El original es
   mucho más discreto — barras de 34px en gris muy claro con el texto a 14px.

   Medido en la réplica 1.7 (`.wpb_accordion`): cabecera `#f7f7f7` con filete
   `#ebebeb`, título 14px/500 en `#797979` con 7px/14px de padding, cuerpo
   blanco con 14px de padding e interlineado 18,2px, y 5px entre bloques.

   Se ajusta con las variables `--bs-accordion-*`, no repintando el componente:
   así el acordeón sigue siendo el de Bootstrap y no se rompe al actualizar.
   ========================================================================== */
.page-content--cms .accordion {
  --bs-accordion-color: var(--dcu-gray-mid);
  --bs-accordion-bg: var(--dcu-white);
  --bs-accordion-border-color: var(--dcu-border);
  --bs-accordion-border-width: var(--dcu-border-width);
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-btn-color: var(--dcu-gray-mid);
  --bs-accordion-btn-bg: #f7f7f7;
  --bs-accordion-btn-padding-x: 14px;
  --bs-accordion-btn-padding-y: 7px;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-active-color: var(--dcu-gray-mid);
  --bs-accordion-active-bg: #f7f7f7;
  --bs-accordion-body-padding-x: 14px;
  --bs-accordion-body-padding-y: 14px;
}

/* Cada bloque va suelto, con 5px de aire; el acordeón de Bootstrap los pega
   en una sola caja con esquinas redondeadas.
   ⚠️ Y por eso hay que REPONER el filete de arriba: Bootstrap se lo quita a
   todos menos al primero (`.accordion-item:not(:first-of-type){border-top:0}`)
   porque cuenta con que vayan pegados. Separados, cada uno necesita el suyo. */
.page-content--cms .accordion-item {
  margin-bottom: 5px;
  border-radius: 0;
  /* ⚠️ Bootstrap lo quita con el atajo `border-top: 0`, que además pone el
     estilo a `none`: reponer solo el grosor NO vale (con `style:none` el
     grosor calculado sigue siendo 0). Hay que dar estilo y color también. */
  border-top: var(--dcu-border-width) solid var(--dcu-border);
}

/* ⚠️ El `<h3>` de la cabecera es un encabezado del contenido CMS, así que le
   caían los 25px/10px de la regla general de encabezados: 10px de hueco
   blanco DENTRO de cada bloque cerrado (43px de alto en vez de 34) y 26px de
   más antes del primero. Aquí el h3 es estructura, no rótulo. */
.page-content--cms .accordion-header {
  font-size: inherit;
  margin: 0;
}

/* En el 1.7 el peso fuerte es del apartado ABIERTO; los cerrados van normales */
.page-content--cms .accordion-button {
  font-size: var(--dcu-fs-sm);
  font-weight: var(--dcu-fw-normal);
  line-height: 18.2px;
  text-align: left;
}

.page-content--cms .accordion-button:not(.collapsed) {
  font-weight: var(--dcu-fw-medium);
}

/* El original no pinta flecha (su icono de jQuery UI va oculto). Si algún día
   se quiere la pista visual, basta con borrar esta regla. */
.page-content--cms .accordion-button::after {
  display: none;
}

/* ⚠️ El interlineado del cuerpo NO es el de la cabecera. El contenedor del
   1.7 declara 18,2px, pero sus párrafos llevan los 25px del cuerpo del tema,
   que es lo que se ve. Aquí se deja heredar de `.page-content--cms`. */
.page-content--cms .accordion-body {
  font-size: var(--dcu-fs-sm);
  text-align: justify;
}

/* Los bloques de texto de dentro ya no necesitan su ritmo de 30px: el cuerpo
   del acordeón trae su propio padding. */
.page-content--cms .accordion-body>.dcu-cms-text:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   CABECERA, MENÚ MÓVIL, SLIDER Y BURBUJAS — feedback del cliente (2026-10-02)
   Todo medido en vivo sobre www.dcutec.com (360, 600, 1440 y 1920 px).
   ========================================================================== */

/* ---------- 1. Logo: crece con la pantalla, como el 1.7 ----------
   El 1.7 no tiene un tamaño fijo: el logo es el 75% de una columna col-lg-2
   (60% con la barra fija). Medido: 151px a 1440 y 211px a 1920; las dos salen
   exactas con (100vw - 232px) / 8, y la barra fija con /10 (168px a 1920).
   dcu9 lo tenía fijo en 150px: a 1440 coincide, pero en una pantalla grande
   se quedaba corto ("el logo es más pequeño"). */
.dcu-header__logo img,
.header-bottom .navbar-brand .logo {
  width: max(95px, calc((100vw - 232px) / 8));
  max-width: none;
  max-height: none;
  height: auto;
  margin: 10px 0;
  transition: width 300ms ease;
}

#header.dcu-scrolled .dcu-header__logo img,
#header.dcu-scrolled .header-bottom .navbar-brand .logo {
  width: max(95px, calc((100vw - 232px) / 10));
  max-width: none;
  max-height: none;
}

/* Portátil (1200-1439): el menú de escritorio pide 559px y su columna
   (mitad de la barra menos el logo) solo tiene 470 a 1200 → "Productos" se
   montaba encima del logo. El solape ya existía con el logo fijo; se gana el
   sitio recortando aire lateral, no tamaño de letra. */
@media (min-width: 1200px) and (max-width: 1439.98px) {
  .dcu-header .header-bottom__container {
    padding-left: 15px;
    padding-right: 15px;
  }

  .dcu-header__menu .ps-mainmenu__tree-item {
    padding: 0 5px;
  }

  .dcu-header__logo {
    padding: 0 8px;
  }
}

/* En tablet la rejilla es `auto 1fr auto` y la fórmula daría un logo de 70px:
   se deja fijo, que cabe sin tocar las acciones. */
@media (min-width: 768px) and (max-width: 991.98px) {

  .dcu-header__logo img,
  .header-bottom .navbar-brand .logo,
  #header.dcu-scrolled .dcu-header__logo img,
  #header.dcu-scrolled .header-bottom .navbar-brand .logo {
    width: 150px;
  }
}

/* ---------- 2. Hamburguesa propia ----------
   Sustituye al botón de Hummingbird, que abría el panel lateral. Sale en el
   mismo tramo en que HB esconde el menú de escritorio: por debajo de 1200. */
.ps-mainmenu__mobile-toggle {
  display: none;
}

.dcu-burger {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 12px;
  margin-left: -12px;
  border: 0;
  background: transparent;
  color: var(--dcu-ink);
  cursor: pointer;
}

.dcu-burger:hover {
  color: var(--dcu-red);
}

@media (max-width: 1199.98px) {
  .dcu-burger {
    display: flex;
  }
}

/* ---------- 3. Menú móvil (.dcu-mnav) ----------
   Medidas del 1.7 (#mobile_top_menu_wrapper): filas de 42px con filete
   #ebebeb, texto 15px en mayúsculas centrado y un ⊞ de 40×40 a la derecha. El
   segundo nivel va sangrado 20px por lado, a 14px en #999, con su propio
   filete y 8px de aire. */
.dcu-mnav {
  display: none;
  padding: 0 15px 15px;
  background: var(--dcu-white);
}

.dcu-mnav.is-open {
  display: block;
}

@media (min-width: 1200px) {

  .dcu-mnav,
  .dcu-mnav.is-open {
    display: none;
  }
}

.dcu-mnav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dcu-mnav__list>.dcu-mnav__item {
  padding: 0 10px;
  border-bottom: 1px solid var(--dcu-border);
}

.dcu-mnav__row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 41px;
  padding: 0 40px;
}

.dcu-mnav__link {
  display: block;
  padding: 0 5px;
  text-align: center;
  text-decoration: none;
}

.dcu-mnav__link[data-depth="1"] {
  font-size: 15px;
  line-height: 40px;
  text-transform: uppercase;
  color: var(--dcu-ink);
}

.dcu-mnav__link:hover,
.dcu-mnav__link:focus {
  color: var(--dcu-red);
}

/* El ⊞ / ⊟: cuadro con la cruz dibujada con dos degradados. El 1.7 usa el
   plus-square-o de FontAwesome, que dcu9 no carga. */
.dcu-mnav__toggle {
  position: absolute;
  top: 50%;
  right: -10px;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--dcu-gray-mid);
  cursor: pointer;
}

.dcu-mnav__toggle::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  margin: auto;
  border: 1px solid currentColor;
  border-radius: 2px;
  background:
    linear-gradient(currentColor, currentColor) center / 6px 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 6px no-repeat;
}

.dcu-mnav__item.is-open>.dcu-mnav__row>.dcu-mnav__toggle::before {
  background: linear-gradient(currentColor, currentColor) center / 6px 1px no-repeat;
}

.dcu-mnav__sub {
  display: none;
  margin: 0 10px 10px;
}

.dcu-mnav__item.is-open>.dcu-mnav__sub {
  display: block;
}

.dcu-mnav__sub .dcu-mnav__item {
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--dcu-border);
}

.dcu-mnav__sub .dcu-mnav__row {
  min-height: 20px;
}

.dcu-mnav__sub .dcu-mnav__link {
  font-size: 14px;
  line-height: 20px;
  color: var(--dcu-gray-faint);
}

/* En el 1.7 el ⊞ del segundo nivel cae pegado al borde derecho de su lista
   (que ya va sangrada), no al de la pantalla. */
.dcu-mnav__sub .dcu-mnav__toggle {
  right: 0;
  color: var(--dcu-ink);
}

/* Tercer nivel: un poco más de sangría y separado de su padre. */
.dcu-mnav__sub .dcu-mnav__sub {
  margin: 8px 20px 0;
}

/* ---------- 4. Cabecera en el móvil, como el 1.7 ----------
   Tres filas: barra negra con el envío gratis (dos líneas) · hamburguesa +
   logo de 50px de alto · iconos centrados (idioma, carrito, buscador,
   cuenta). Y no se queda fija al hacer scroll: en el 1.7 tampoco. */
@media (max-width: 767.98px) {
  #header.js-sticky-header {
    position: relative;
    top: 0;
  }

  .dcu-topbar {
    height: auto;
  }

  .dcu-topbar__menu {
    display: none;
  }

  /* Repone lo que el tramo de tablet esconde (el texto y la coletilla). */
  /* Sin altura fija: la marca el texto, como en producción (1 línea ≈ 20px,
     2 líneas si el ancho no da). Con min-height 37 se quedaba siempre a dos
     alturas aunque el texto cupiera en una. */
  .dcu-topbar__row {
    justify-content: center;
    min-height: 0;
  }

  .dcu-topbar__ship {
    display: block;
    padding: 1px 0;
    text-align: center;
    font-size: 11px;
    line-height: 17.5px;
  }

  .dcu-topbar__ship span {
    display: inline;
    font-size: 8.8px;
  }

  .dcu-header__row {
    position: relative;
    grid-template-columns: 1fr;
    grid-template-areas: "logo" "actions";
    min-height: 0;
  }

  .dcu-header__menu {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
  }

  .dcu-header__logo {
    grid-area: logo;
    justify-self: center;
    padding: 0 40px;
  }

  .dcu-header__logo img,
  .header-bottom .navbar-brand .logo {
    width: auto;
    height: 50px;
    margin: 10px 0 0;
  }

  .dcu-header__actions {
    grid-area: actions;
    justify-content: center;
    min-height: 62px;
  }

  /* Orden del 1.7: idioma · carrito · buscador · cuenta. El buscador lleva
     `order-2` con !important de Bootstrap, así que se ordena el resto a su
     alrededor. */
  .dcu-header__actions #_desktop_ps_languageselector {
    order: 0;
  }

  .dcu-header__actions #_desktop_ps_shoppingcart {
    order: 1;
  }

  .dcu-header__actions #_desktop_ps_customersignin {
    order: 3;
  }

  .dcu-header__actions #_desktop_ps_searchbar {
    padding: 0 12px;
  }

  /* El idioma queda ahora a la IZQUIERDA de la fila: anclado a la derecha,
     su desplegable de 160px se salía de la pantalla. */
  .dcu-lang__menu {
    left: 0;
    right: auto;
  }

  /* El campo del buscador se abre DEBAJO de la fila y a todo el ancho: si
     creciera en línea empujaría los otros iconos fuera de la pantalla. */
  .dcu-header__actions .ps-searchbar__form {
    position: static;
  }

  .dcu-header__actions .ps-searchbar__input {
    position: absolute;
    top: 100%;
    left: 15px;
    z-index: 5;
    background: var(--dcu-white);
  }

  .dcu-header__actions .ps-searchbar__form:focus-within .ps-searchbar__input,
  .dcu-header__actions .ps-searchbar.is-open .ps-searchbar__input {
    width: calc(100% - 30px);
  }

  /* Resultados y la × de borrar, referidos al mismo bloque que el campo: si
     no, los resultados salían a 360px de ancho (scroll horizontal) y tapaban
     el propio campo, y la × flotaba en la fila de los iconos. */
  .dcu-header__actions .ps-searchbar__dropdown {
    top: calc(100% + 33px);
    left: 15px;
    right: 15px;
    width: auto;
  }

  .dcu-header__actions .ps-searchbar__clear {
    top: calc(100% + 5px);
    right: 20px;
    left: auto;
    transform: none;
    z-index: 6;
  }
}

/* El buscador viene con `d-none d-md-flex`: utilidades con !important dentro
   de la capa `utilities`, a las que solo se gana desde @layer vendors (mismo
   caso que el corazón de favoritos). */
@layer vendors {
  @media (max-width: 767.98px) {
    .dcu-header__actions #_desktop_ps_searchbar {
      display: flex !important;
    }
  }
}

/* ---------- 5. Slider en el móvil ----------
   El 1.7 pinta el título del slide encima de la foto (Nord 30px, centrado) y
   la foto entera, en su proporción 2:1. Hummingbird escondía el texto
   (`d-none d-lg-block`) y fijaba la foto a 240px de alto, así que la
   deformaba. Las flechas, fuera: en el móvil del 1.7 tampoco salen (se pasa
   de foto deslizando). Inversores tiene sus propias reglas, más arriba. */
@layer vendors {
  @media (max-width: 767.98px) {
    .ps-imageslider__figcaption {
      display: block !important;
    }
  }
}

@media (max-width: 767.98px) {
  .ps-imageslider__figure {
    height: auto;
  }

  .ps-imageslider .carousel-item img {
    height: auto;
    object-fit: initial;
  }

  body:not(:has(.dcu-header--inversores)) .ps-imageslider__figcaption {
    top: 50%;
    bottom: auto;
    left: 10px;
    right: 10px;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
  }

  body:not(:has(.dcu-header--inversores)) .ps-imageslider figcaption h2 {
    margin: 0;
    padding: 0;
    font-size: 30px;
    line-height: 30px;
    font-weight: 600;
  }

  body:not(:has(.dcu-header--inversores)) .ps-imageslider figcaption p {
    display: none;
  }

  .ps-imageslider .carousel-control-prev,
  .ps-imageslider .carousel-control-next {
    display: none;
  }
}

/* ---------- 6. Botones flotantes en el móvil ----------
   El 1.7 oculta WhatsApp y "Pida cita" (Calendly) por debajo de 768 y deja
   solo el chat de Oct8ne, que era el que se montaba con el de WhatsApp.
   Calendly lleva estilos en línea: hace falta !important. */
@media (max-width: 767.98px) {

  .float-whatsapp,
  .calendly-badge-widget {
    display: none !important;
  }
}

/* ---------- 7. Chat de Oct8ne: barra "Pregúntanos" también en el móvil ----------
   Oct8ne decide el formato según el navegador (su servidor devuelve
   IsDevice): en un móvil pinta una burbuja de 60px a media pantalla, y la
   barra pegada abajo solo con navegador de escritorio. Pasa igual en
   producción. Decisión del cliente (2026-10-02): la barra también en móvil.
   El widget NO va en shadow DOM y su <style> no lleva !important (salvo el
   z-index), así que se le gana con !important. Medidas copiadas de su CSS de
   la barra. En modo burbuja no trae el texto: se pone con ::after, con el
   rótulo que Oct8ne tiene configurado en cada idioma. */
@media (max-width: 767.98px) {
  #livechat-wrapper {
    display: block !important;
    top: auto !important;
    bottom: 0 !important;
    /* Centrada (petición del cliente); Oct8ne la pega a 50px de la derecha. */
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 200px !important;
    height: 31px !important;
    padding: 3px 10px 0 !important;
    border-radius: 5px 5px 0 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    font-family: Verdana, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 27px !important;
    text-align: left !important;
  }

  #livechat-wrapper>svg,
  #livechat-wrapper #icon-chat {
    float: left;
    width: 28px;
    height: 28px;
  }

  /* En modo barra Oct8ne ya trae su texto: solo se añade en modo burbuja. */
  #livechat-wrapper:not(:has(.chat-widget-text))::after {
    content: "Pregúntanos";
    float: left;
    width: 147px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
  }

  html[lang^="ca"] #livechat-wrapper:not(:has(.chat-widget-text))::after {
    content: "Pregunta'ns";
  }

  html[lang^="fr"] #livechat-wrapper:not(:has(.chat-widget-text))::after {
    content: "Demande à un expert";
  }

  html[lang^="en"] #livechat-wrapper:not(:has(.chat-widget-text))::after {
    content: "Ask an Expert";
  }

  html[lang^="pt"] #livechat-wrapper:not(:has(.chat-widget-text))::after {
    content: "Conte connosco!";
  }
}
/* ==========================================================================
   LISTADO — BOTON "FILTRAR" Y PANEL DESPLEGABLE (como el 1.7)
   El boton va donde Hummingbird pone "Hay N productos"; el panel, debajo de
   la barra (product-list.tpl). Los facets de HB son acordeones plegados: dentro
   del panel se muestran abiertos, como en el 1.7, y repartidos en columnas.
   ========================================================================== */
.dcu-filters-toggle {
  padding: 0;
  border: 0;
  background: none;
  color: var(--dcu-ink);
  font-size: 23px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
}

.dcu-filters-toggle::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-4px) rotate(45deg);
  transition: transform .2s ease;
}

.dcu-filters-toggle[aria-expanded="true"]::after {
  transform: translateY(0) rotate(-135deg);
}

.dcu-filters-toggle:hover,
.dcu-filters-toggle:focus-visible {
  color: var(--dcu-red);
}

.dcu-filters-panel {
  margin: 0 0 30px;
  padding: 25px 30px;
  background: var(--dcu-white);
  border: 1px solid rgba(0, 0, 0, .08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}

.dcu-filters-panel[hidden] {
  display: none;
}

/* "Filtrar por" ya lo dice el boton. Va en @layer vendors: su .d-md-block es
   !important dentro de la capa utilities y una regla sin capa no le gana. */
@layer vendors {
  .dcu-filters-panel .left-block__title {
    display: none !important;
  }
}

.dcu-filters-panel .search-filters__clear {
  margin-bottom: 20px;
}

.dcu-filters-panel .accordion {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px 40px;
  --bs-accordion-border-width: 0;
  --bs-accordion-bg: transparent;
}

.dcu-filters-panel .accordion-item {
  border: 0;
  background: none;
}

/* Titulo del filtro: fijo, sin chevron ni plegado */
.dcu-filters-panel .accordion-button {
  padding: 0 0 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--dcu-border);
  background: none;
  box-shadow: none;
  color: #1f1f1f;
  font-size: var(--dcu-fs-lg);
  font-weight: 500;
  pointer-events: none;
}

.dcu-filters-panel .accordion-button::after {
  display: none;
}

.dcu-filters-panel .accordion-collapse.collapse {
  display: block;
  height: auto;
}

.dcu-filters-panel .accordion-body {
  padding: 0;
}

.dcu-filters-panel .facet-label,
.dcu-filters-panel .facet-label a,
.dcu-filters-panel .form-check-label {
  color: var(--dcu-gray-faint);
  font-size: var(--dcu-fs-sm);
  line-height: 25px;
}

.dcu-filters-panel .facet-label a:hover,
.dcu-filters-panel .form-check-label:hover {
  color: var(--dcu-ink);
}

.dcu-filters-panel .form-check-input:checked {
  background-color: var(--dcu-ink);
  border-color: var(--dcu-ink);
}

@media (max-width: 767.98px) {
  .dcu-filters-toggle {
    font-size: 18px;
  }

  .dcu-filters-panel {
    padding: 20px 15px;
  }
}

/* ---------- Pago no completado (Paycomet urlko) ----------
   Plantilla propia en modules/paytpv/views/templates/front/payment_fail.tpl */
.dcu-payment-fail {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.dcu-payment-fail__text {
  margin-bottom: 30px;
  font-size: var(--dcu-fs-base);
}

.dcu-payment-fail__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin-bottom: 25px;
}

.dcu-payment-fail__home a {
  color: var(--dcu-gray-mid);
  text-decoration: underline;
}

.dcu-payment-fail__home a:hover {
  color: var(--dcu-red);
}

/* ============================================================
   VIDEOS DE YOUTUBE EN DESCRIPCIONES Y CMS (2026-10-23)
   El contenido migrado del 1.7 los incrusta con width="80%" (o 560)
   y height="315" FIJO: en movil sale una caja estrecha y alta con
   franjas negras, y al girar la pantalla no se adapta. Se fuerza la
   proporcion 16:9 sobre el ancho disponible. Se excluyen los que ya
   van dentro de un .ratio de Bootstrap (CMS 10).
   ============================================================ */
.rich-text iframe[src*="youtube"]:not(.ratio > iframe),
.rich-text iframe[src*="youtu.be"]:not(.ratio > iframe) {
  display: block;
  width: 100%;
  max-width: 853px;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}



/* ==========================================================================
   Slider — variante PROMO (2026-10-16, ajustado 2026-10-22 a los banners
   nuevos de DCU: Pulsera DUAL, Power Bank Semi-Solid, Boston 2, CityEcho)
   Slide SIN título y con un encabezado en la descripción (lo detecta
   modules/ps_imageslider/views/templates/hook/slider.tpl del tema hijo):
   texto a la izquierda, ANTETÍTULO EN MAYÚSCULAS + título grande en
   minúsculas (+ botón blanco opcional). El resto de slides no cambia.
   Tamaños en vw con clamp(): la imagen es 2:1 y el texto escala con ella.
   Los saltos de línea del título son <br> en la descripción (Mayús+Intro
   en el editor), como en el diseño.
   ⚠️ Las reglas globales `figcaption h2` / `figcaption p` de arriba (las del
   slide normal) se pisan aquí por especificidad.
   ========================================================================== */

/* Velo suave a la izquierda para que el blanco se lea sobre fotos claras */
.ps-imageslider__figure--promo {
  position: relative;
}

.ps-imageslider__figure--promo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 60%);
  pointer-events: none;
}

/* Centrado en vertical; a la izquierda, DESPUÉS de la zona de la flecha
   "anterior" (Bootstrap le da el 15 % del ancho) */
.ps-imageslider__figcaption--promo.carousel-caption {
  top: 50%;
  bottom: auto;
  left: 15%;
  right: auto;
  z-index: 2;
  max-width: 62%;
  margin: 0;
  padding: 0;
  transform: translateY(-50%);
  color: var(--dcu-white);
  text-align: left;
}

/* Antetítulo: cualquier párrafo */
.ps-imageslider__figcaption--promo p {
  margin: 0 0 clamp(6px, 1.8vw, 34px);
  font-size: clamp(12px, 1.7vw, 32px);
  font-weight: var(--dcu-fw-normal);
  line-height: var(--dcu-lh-tight);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: inherit;
  text-align: left;
}

/* Título */
.ps-imageslider__figcaption--promo :is(h1, h2, h3) {
  margin: 0 0 clamp(10px, 2vw, 40px);
  padding: 0;
  /* Rubik y no Nord: Nord no tiene mayúsculas acentuadas ni Ñ. El !important
     es para ganar al 'figcaption h2 { font-family: Nord !important }' global. */
  font-family: var(--dcu-font-base) !important;
  font-size: clamp(20px, 3.3vw, 64px);
  font-weight: var(--dcu-fw-medium);
  line-height: var(--dcu-lh-tight);
  text-transform: none;
  color: inherit;
}

/* Sin botón el título es lo último: fuera el margen de abajo */
.ps-imageslider__figcaption--promo :is(h1, h2, h3):last-child {
  margin-bottom: 0;
}

/* Botón (opcional): el último párrafo que va DETRÁS del título. Es visual:
   todo el slide ya es el enlace. */
.ps-imageslider__figcaption--promo :is(h1, h2, h3) ~ p:last-child {
  display: inline-block;
  margin: 0;
  padding: 0.45em 1.4em;
  font-size: clamp(12px, 1.25vw, 22px);
  font-weight: var(--dcu-fw-medium);
  line-height: var(--dcu-lh-none);
  text-transform: none;
  letter-spacing: normal;
  color: var(--dcu-ink);
  background: var(--dcu-white);
  border-radius: var(--dcu-radius-sm);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.ps-imageslider__link:hover .ps-imageslider__figcaption--promo :is(h1, h2, h3) ~ p:last-child,
.ps-imageslider__link:focus-visible .ps-imageslider__figcaption--promo :is(h1, h2, h3) ~ p:last-child {
  background: var(--dcu-red);
  color: var(--dcu-white);
}

@media (max-width: 767.98px) {
  .ps-imageslider__figcaption--promo.carousel-caption {
    left: 12%;
    max-width: 74%;
  }

  .ps-imageslider__figcaption--promo p {
    font-size: 11px;
  }

  .ps-imageslider__figcaption--promo :is(h1, h2, h3) {
    font-size: 17px;
  }
}

/* ---------- Slider PROMO en el móvil (2026-10-25) ----------
   El bloque "5. Slider en el móvil" de más arriba esconde los <p> del slide
   (`display: none`) y pone el h2 a 30px, con selectores
   `body:not(:has(.dcu-header--inversores)) .ps-imageslider figcaption ...`
   (especificidad 0,2,3) que le ganaban a las reglas promo (0,1,1): en móvil
   desaparecía el antetítulo y el título no cabía. Aquí se repiten con
   `.ps-imageslider .ps-imageslider__figure--promo` delante (0,3,x) para
   ganarles SOLO en los slides promo; los normales siguen con su regla. */
@media (max-width: 767.98px) {
  .ps-imageslider .ps-imageslider__figure--promo .ps-imageslider__figcaption--promo.carousel-caption {
    top: 50%;
    bottom: auto;
    left: var(--dcu-space-md);
    right: auto;
    max-width: 68%;
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
  }

  .ps-imageslider .ps-imageslider__figure--promo .ps-imageslider__figcaption--promo p {
    display: block;
    margin: 0 0 var(--dcu-space-3xs);
    font-size: 9px;
    line-height: var(--dcu-lh-tight);
  }

  .ps-imageslider .ps-imageslider__figure--promo .ps-imageslider__figcaption--promo :is(h1, h2, h3) {
    margin: 0;
    padding: 0;
    font-size: 13px;
    line-height: 1.2;
    font-weight: var(--dcu-fw-medium);
  }

  /* Botón (si algún slide lo lleva): a juego con el texto pequeño */
  .ps-imageslider .ps-imageslider__figure--promo .ps-imageslider__figcaption--promo :is(h1, h2, h3) ~ p:last-child {
    display: inline-block;
    margin-top: var(--dcu-space-2xs);
    font-size: 11px;
  }
}