/* =========================================================================
   iTecnoworld — Capa de modernización visual
   Generado por Claude a partir de las pruebas en vivo de esta conversación.

   CÓMO USAR:
   Este archivo NO reemplaza theme-original-backup.css. Se añade DESPUÉS
   de él (para que sus reglas !important tengan prioridad). En PrestaShop:
   Apariencia → Temas → [tema activo] → Configurar → CSS personalizado
   → pega todo este archivo tal cual.
   ========================================================================= */

:root {
  --brand: #376467;
  --brand-dark: #2a4c4e;
  --brand-light: #eef4f4;
  --accent: #ff8a3d;
  --radius-lg: 16px;
  --radius-md: 10px;
  --shadow-sm: 0 2px 8px rgba(20, 30, 30, 0.06);
  --shadow-md: 0 8px 24px rgba(20, 30, 30, 0.10);
  --shadow-lg: 0 16px 40px rgba(20, 30, 30, 0.14);
}

/* Antes era "* { ... }" (todos los elementos de la pagina). Con el
   sitio ya listo para produccion se acota a los elementos que
   realmente cambian box-shadow/transform/background-color/
   border-color en algun :hover/:focus/:active de este archivo (auditado
   uno a uno) -> en una pagina de categoria con decenas de productos,
   aplicar transicion a CADA nodo del DOM (textos, spans, celdas de
   tabla que nunca animan nada) tiene coste real de recalculo de
   estilo sin ningun beneficio visual. La mayoria de elementos "vistosos"
   (flechas del carrusel, tarjetas de "Su cuenta", tarjeta de blog,
   opciones de envio/pago, flecha del mega-menu...) ya traen su propia
   "transition" explicita mas abajo en este archivo y no dependen de
   esta regla; lo que sigue aqui cubre el resto (enlaces, botones,
   inputs, filas de tabla, tarjetas de producto/blog, icono del
   carrito) que solo tenian transicion gracias al selector universal. */
a, button, input, select, textarea, li, tr,
.thumbnail-container,
.blog-post,
#_desktop_cart .header,
#_desktop_cart .header * {
  transition: box-shadow .25s ease, transform .25s ease,
              background-color .2s ease, border-color .2s ease;
}

body {
  background: #fafbfb !important;
  letter-spacing: .1px;
}
/* En monitores muy anchos (ultrawide, 4K...) la pagina se estiraba sin
   limite: el buscador se volvia larguisimo, el banner principal quedaba
   deformado y los huecos entre columnas del listado de productos se
   disparaban. Se limita el ancho maximo de todo el contenido (header +
   wrapper + footer, que cuelgan de <main>) a 2560px y se centra; mas
   alla de eso queda espacio en blanco a los lados en vez de estirar los
   elementos. Por debajo de 2560px de viewport esto no tiene ningun
   efecto (el max-width nunca se alcanza). */
body > main {
  max-width: 2560px !important;
  margin: 0 auto !important;
}

/* Aviso de cookies (GDPR): el panel se centraba verticalmente con
   align-items:center pero sin limite de alto ni scroll interno. Si el
   contenido (946px aprox, fijo por el texto) es mas alto que la
   ventana, el panel se sale por arriba Y por abajo a la vez sin forma
   de llegar a los botones "Ocultar mensaje" / "No acepto" — quedaban
   fuera del area visible sin ningun scroll que los alcance. Se limita
   el panel a 90vh y se convierte en columna flex: el titulo y los
   botones se quedan fijos (flex-shrink:0) y solo el bloque de texto
   largo (.gdpr_content) scrollea internamente, asi los botones estan
   siempre visibles sin importar la altura de la ventana. */
.gdpr_notice_wap {
  max-height: 90vh !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.gdpr_content {
  overflow-y: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
.gdpr_title:not(.item) {
  flex-shrink: 0 !important;
}
.gdpr_button {
  flex-shrink: 0 !important;
}

/* ===== Header ===== */
/* Hubo un efecto cristal (glassmorphism: fondo translucido +
   "backdrop-filter: blur") en toda la cabecera (barra de busqueda +
   barra del mega-menu). Pedido explicito del usuario: quitarlo del
   todo, la cabecera entera (incluida ".header-top", la fila del
   logo+buscador) debe quedar solida, sin transparencia. Ademas, en
   pruebas en vivo se detecto que ".ets_mm_megamenu" (barra del mega-menu)
   nunca llegaba a mostrar la transparencia heredada del header por un
   conflicto con el propio mecanismo nativo del plugin ("sticky_enabled"/
   "transition_floating") -> otro motivo mas para dejar todo solido. */
#header {
  position: sticky !important;
  top: 0;
  z-index: 999;
  background: #ffffff !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .05) !important;
  border-bottom: none !important;
}
.header-top { background: transparent !important; }
/* En movil la pantalla es un recurso escaso, pedido explicito del
   usuario: reducir el margen por encima/debajo de la barra de
   busqueda SOLO en movil. Nativo: ".header-top" trae "padding:20px 0"
   fijo (pensado para el hueco que deja el logo/menu en escritorio),
   y "#search_widget" suma ademas "margin-bottom:10px" propio -> en
   movil (donde la barra de busqueda ocupa su propia fila entera,
   suelta) esos 20+20+10px de aire se notan mucho mas que en
   escritorio. Solo se toca por debajo de 767px (mismo breakpoint que
   ya se usa en el resto del archivo para movil/tablet chico); en
   escritorio se deja intacto. */
@media (max-width: 767px) {
  .header-top { padding: 8px 0 !important; }
  #search_widget { margin: 0 !important; }
}
/* Mismo pedido, aplicado ahora a la barra del menu ("☰ MENÚ", justo
   debajo de la barra de busqueda): ".ets_mm_megamenu_content_content"
   trae "padding:8px 0" y el propio boton hamburguesa
   (".ybc-menu-toggle") suma otros "padding:10px 0" -> tambien se
   reduce, solo en movil. */
@media (max-width: 767px) {
  .ets_mm_megamenu_content_content { padding: 4px 0 !important; }
  .ybc-menu-toggle { padding: 6px 0 !important; }
}
/* Sin transparencia (pedido explicito del usuario, ver comentario de
   "#header" mas arriba): fondo blanco solido, igual que el resto de la
   cabecera. */
.ets_mm_megamenu { background: #ffffff !important; }
/* Pedido explicito del usuario: la barra del mega-menu debe quedarse
   SIEMPRE en su posicion original (debajo de la barra de busqueda),
   nunca saltar arriba del todo. El propio plugin del mega-menu tiene su
   propio mecanismo nativo de "flotar al hacer scroll": pasado cierto
   scroll se auto-añade la clase "scroll_heading" y se convierte EL
   MISMO en "position:fixed;top:0", pegandose al borde superior de la
   ventana -> como nuestro propio "#header" YA es "position:sticky;top:0"
   (mas arriba en este archivo), el menu terminaba con DOS mecanismos de
   "quedarse arriba" compitiendo entre si, y el nativo (mas especifico,
   fixed en vez de sticky) ganaba, sacando al menu de su sitio natural
   dentro del header y pegandolo literalmente en el borde superior de la
   ventana, tapando la fila de whatsapp/idioma que YA estaba ahi debido a
   nuestro propio sticky. Se anula el mecanismo nativo por completo: el
   menu vuelve a depender solo del "#header{position:sticky}" para
   quedarse visible al hacer scroll, sin saltar de su posicion relativa
   dentro de el (siempre debajo de logo+buscador). */
.ets_mm_megamenu.scroll_heading {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}
/* El logo se renderizaba a un tamaño distinto segun la plantilla de
   pagina (p.ej. mucho mas grande en el checkout que en portada). Causa
   real: el tema nativo trae una regla especifica del checkout
   ("body#checkout #_desktop_logo img.logo", con
   "max-height:80px !important" -> con la relacion de aspecto real del
   logo (1217x253) esos 80px de alto tiran del ancho hasta unos 384px).
   Dos fallos distintos en el primer intento de arreglar esto, los dos
   confirmados con capturas reales en el checkout de produccion (no solo
   en pruebas):
   1) La regla propia nunca tocaba "max-height", solo width/max-width
      -> aunque esa parte SI ganara, "max-height:80px" nativo seguia
      ganando por su cuenta y era el que de verdad mandaba en el tamaño
      final (una vez que max-height fija el alto, el ancho se deriva de
      la relacion de aspecto pase lo que diga max-width). Se añade
      "max-height" aqui tambien, con el valor que le corresponde a un
      logo de 230px de ancho segun su relacion de aspecto real
      (230 / (1217/253) ≈ 48px).
   2) "body#checkout #_desktop_logo img.logo" (repitiendo el selector
      nativo tal cual, 2 IDs) empataba en especificidad exacta con la
      regla nativa (tambien 2 IDs) -> el comentario original asumia que
      el empate se resolveria a favor nuestro por orden de aparicion
      (inyectado despues), pero en el CSS COMPILADO de produccion el
      bloque nativo del checkout queda colocado despues del nuestro en
      esta seccion concreta -> con especificidad literalmente empatada,
      gana el ultimo del archivo final, que resulto ser el nativo. Se
      añade un elemento extra al principio ("html") para desempatar la
      especificidad de forma real (mismos IDs y clases, pero un
      elemento mas), ganando siempre sin importar el orden final. */
img.logo,
#_desktop_logo img.logo,
#_mobile_logo img.logo,
html body#checkout #_desktop_logo img.logo {
  width: 100% !important;
  height: auto !important;
  max-width: 230px !important;
  min-width: 90px !important;
  max-height: 48px !important;
  /* Reserva el hueco real (1217x253) ANTES de que la imagen termine de
     cargar -> sin esto, el navegador no sabe el alto hasta descargar
     la imagen, y salta de un tamaño provisional al definitivo (medido
     en produccion: microsaltos del logo en el header, ver tambien la
     misma regla ya existente en critical.css - esta copia hace que
     funcione tambien con el critical CSS desactivado, que es el
     estado actual). */
  aspect-ratio: 1217 / 253 !important;
}
/* SOLO en el checkout: el logo quedaba pegado arriba de su franja de
   cabecera en vez de centrado con el boton de WhatsApp. Causa: la fila
   que los contiene (.row) es display:block (no flex), asi que cada
   columna simplemente se apila desde arriba segun su propia altura de
   contenido en vez de centrarse entre si — la columna del logo
   (47.8px) es mas baja que la columna del boton de WhatsApp (59px).
   OJO: la primera version de esta regla usaba el selector generico
   "#header .header-nav .container > .row", que tambien coincide con
   la fila de "Cerrar sesión / Hola / Carrito" en TODAS las paginas
   (esa fila depende de floats, no de flex, para separar izquierda de
   derecha) — forzarla a flex la rompia, amontonando esos elementos a
   la izquierda en vez de mantenerlos a la derecha. Se acota con
   :has(#_desktop_logo) para pillar solo la fila del logo, y con
   body#checkout para que no afecte a ninguna otra pagina. */
body#checkout #header .container > .row:has(#_desktop_logo) {
  display: flex !important;
  align-items: center !important;
}

/* ===== Buscador ===== */
#search_widget, .search-widget { position: relative !important; }
.search-widget input, #search_widget input, input[name="s"] {
  border-radius: 999px !important;
  border: 1.5px solid #e2e6e6 !important;
  padding: 10px 18px 10px 44px !important;
  box-shadow: none !important;
}
.search-widget input:focus, input[name="s"]:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px rgba(55, 100, 103, .12) !important;
}
/* "#5a6a6a" (antes "#8a9494") es el gris "secundario/apagado" que se
   reutiliza en TODO el archivo (precios "con IVA", texto de ayuda de
   formularios, iconos, enlaces "cancelar"...) -> Google PageSpeed
   marcaba "contraste insuficiente" en varios de estos sitios: sobre
   fondo blanco, "#8a9494" solo llegaba a un ratio de 3.11:1 (hace
   falta minimo 4.5:1 para texto normal). Se sustituye ese MISMO gris,
   en las 11 apariciones del archivo, por uno mas oscuro (ratio
   ~5.1-5.7:1 segun el fondo) que sigue leyendose como "texto
   secundario" (mas claro que el texto principal) pero ya cumple el
   minimo de accesibilidad en todos los sitios donde se usa. */
#search_widget .material-icons.search, .search-widget .material-icons.search {
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-58%) !important;
  color: #5a6a6a;
  font-size: 20px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
}
#search_widget .material-icons.clear, .search-widget .material-icons.clear {
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
/* El desplegable de resultados del buscador es nativamente
   "position:relative" y jQuery UI calcula su "top" una sola vez
   (offset negativo enorme) asumiendo que se desplaza junto con el
   documento. Con #header en "position:sticky" (efecto cristal fijo
   al hacer scroll) eso ya no es cierto: el buscador se queda pinned
   arriba pero el desplegable, en flujo normal, se va con el scroll.
   PRIMER INTENTO: forzar "position:fixed" y recalcular top/left en
   viewport. Funcionaba para el anclaje, pero rompia otra cosa: el
   propio tema tiene JS nativo que, al abrirse el desplegable, encoge
   el <input> de busqueda (via "max-width" inline) para que coincida
   con el ancho del propio desplegable -> esa animacion dejo de
   dispararse en cuanto el desplegable pasaba a "fixed" (confirmado
   probando en aislado: con "fixed" el input se queda a ancho completo,
   con "absolute" el input se encoge correctamente). La causa mas
   probable es que ese JS nativo dependa de "offsetParent" (que
   siempre es "null" para "position:fixed" por especificacion, pero
   SI resuelve normalmente para "position:absolute") para calcular el
   ancho del desplegable antes de aplicarlo al input.
   SOLUCION: dejar "position:absolute" (no "fixed"), que es compatible
   con ese mecanismo nativo, y en el JS calcular top/left en
   coordenadas de DOCUMENTO (sumando "window.scrollY/scrollX" a la
   posicion en viewport del input) en vez de coordenadas de viewport
   -> el resultado visual es el mismo anclaje bajo el buscador en
   cada scroll, pero sin tocar "position" y por tanto sin romper el
   encogimiento nativo del input.
   El fondo solido NO se puede forzar aqui: el propio contenedor lleva
   una regla nativa "#ui-id-N.ui-widget.ui-widget-content{background:
   transparent!important}" con el ID concreto de esta instancia
   compuesto directamente en el selector -> su especificidad (1 ID + 2
   clases) gana a cualquier regla nuestra basada solo en clases, y al
   ser el ID dinamico (jQuery UI lo autoincrementa) no se puede igualar
   con un selector fijo aqui. Se fuerza via JS con estilo inline
   ("alignSearchAutocomplete" en el bookmarklet), que si le gana. */
.ui-autocomplete.ui-front {
  position: absolute !important;
}
/* El cuadro de resultados instantaneos de Jolisearch por debajo de
   720px: pedido primero ocultarlo, despues (nuevo pedido) reactivarlo
   pero que se vea bien. Por debajo de ese ancho el propio tema esconde
   el desplegable con un "display:none" nativo (via CSS, sin importar
   lo que el modulo quiera mostrar) y ademas aplica un
   "transform:translateX(...)" pensado para centrar varias columnas en
   pantallas anchas que a este ancho lo saca de la pantalla. Ninguna de
   las dos cosas se puede arreglar aqui con un selector fijo (el
   "display:none" nativo puede ganar o perder el pulso segun el ancho
   sin patron fijo, y el "transform" varia con cada apertura) -> se
   resuelve en JS, ver "alignSearchAutocomplete" en
   "build-bookmarklet.js"/"custom.js", que sobreescribe ambas
   propiedades via estilo inline con prioridad "important" cada vez que
   el propio modulo abre el desplegable. */

/* ===== Botones ===== */
.btn, button, a.button, .btn-primary, .btn-register {
  border-radius: 999px !important;
  font-weight: 600 !important;
  border: none !important;
  box-shadow: var(--shadow-sm);
}
.btn-primary, .btn-register, .add-to-cart {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark)) !important;
}
.btn-primary:hover, .btn-register:hover, .add-to-cart:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--brand-dark), var(--brand)) !important;
}
.btn-touchspin { border-radius: 8px !important; }

/* ===== Banner / carrusel =====
   [class*="banner"] tambien atrapaba .banner-text/.banner-text-top/
   .banner-text-bottom (los overlays de texto sobre la imagen de banners
   como "¿No encuentra su repuesto?"): overflow:hidden les recortaba el
   texto y box-shadow (pensado para la tarjeta del banner) se veia como
   un fondo difuso detras de las letras. Se excluyen explicitamente. */
[class*="banner"]:not([class*="banner-text"]), .featured-banner, .rc-slider, .homeslider {
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-md) !important;
}
/* .banner-box mide su alto en automatico a partir de la imagen, pero
   sigue con overflow:hidden (para las esquinas redondeadas) -> cuando el
   texto de abajo (superpuesto sobre la foto) envuelve a una segunda
   linea (p.ej. "¿Empresa o autonomo del sector?"), esa segunda linea
   sobresale por debajo del borde de la caja y el "?" queda recortado.
   padding-bottom le da a la caja unos px reales de mas abajo antes de
   que el overflow:hidden corte; el line-height mayor en .banner-text-top
   evita que esa segunda linea vaya pegada/apretada. */
.banner-box {
  padding-bottom: 14px !important;
}
.banner-text-top {
  line-height: 24px !important;
}

/* ===== Carrusel principal (home, #carousel) =====
   No matchea ninguno de los selectores de banner de arriba (su clase es
   "carousel slide"), asi que quedaba plano: esquinas cuadradas, sin
   sombra, desconectado del resto de banners del sitio.
   TODO el bloque queda restringido a >=986px a peticion explicita del
   usuario: por debajo de ese ancho el carrusel debe verse exactamente
   como antes de estos cambios (sin recorte object-fit, sin flechas
   circulares, sin esquinas redondeadas). */
@media (min-width: 986px) {
  #carousel {
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-md) !important;
  }
  /* BUG nativo revelado por el overflow:hidden de arriba (antes invisible
     porque el hueco se fundia con el fondo gris de la pagina): las 3 fotos
     del carrusel son 1920x340px reales, pero el <img> solo trae width:100%;
     height:auto (regla nativa) -> a lo ancho del contenedor (~1490px) esa
     proporcion da ~264px de alto, no los 340px fijos de cada slide, dejando
     un hueco en blanco debajo de la foto dentro de cada <li>.
     Se fuerza a la foto (y a sus envoltorios <a>/<figure>, que son inline/
     inline-block nativamente y por eso ignoran su propio height) a llenar
     el 100% del alto fijo del slide con object-fit:cover, recortando el
     sobrante a los lados en vez de dejar espacio muerto abajo. */
  .carousel-item a {
    display: block !important;
    height: 100% !important;
  }
  .carousel-item figure {
    display: block !important;
    height: 100% !important;
    margin: 0 !important;
  }
  .carousel-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  /* Segundo bug revelado por el mismo overflow:hidden: ".carousel-inner"
     trae un margin-bottom:16px nativo que antes "escapaba" del alto de
     #carousel (colapsaba hacia afuera, sin overflow:hidden que lo
     contuviera); con overflow:hidden ese margen queda atrapado DENTRO de
     #carousel y se ve como una franja blanca vacia debajo de la foto. */
  .carousel-inner {
    margin-bottom: 0 !important;
  }
  /* Tercer bug, mas serio: el alto del slide es fijo (340px, regla nativa)
     pero el ANCHO es responsive -> en monitores anchos (la pagina soporta
     hasta 2560px) el contenedor puede llegar a medir MAS de 1920px (el
     ancho real de las 3 fotos). Pasado ese punto, object-fit:cover deja de
     recortar por los LADOS y empieza a recortar por ARRIBA/ABAJO (la unica
     forma de "cubrir" un contenedor que ya es proporcionalmente mas ancho
     que la propia foto) -> la foto se ve invadida/cortada por arriba.
     Se limita el carrusel a los 1920px reales de las fotos (centrado con
     margin:auto) para que nunca entre en ese regimen: por debajo de 1920px
     sigue ocupando el 100% del ancho disponible como siempre. */
  #carousel {
    max-width: 1920px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Flechas prev/next: antes solo un glifo blanco flotando sobre la foto,
     sin fondo ni feedback de hover. Se les da boton circular semi-
     transparente, con inset de 16px para no quedar pegadas al borde
     redondeado del carrusel (recortadas por el overflow:hidden de arriba). */
  .icon-prev,
  .icon-next {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    margin-top: -20px !important;
    border-radius: 50% !important;
    background: rgba(20, 30, 30, .35) !important;
    transition: background-color .2s ease, transform .2s ease;
  }
  .icon-prev { left: 16px !important; margin-left: 0 !important; }
  .icon-next { right: 16px !important; margin-right: 0 !important; }
  .carousel-control:hover .icon-prev,
  .carousel-control:hover .icon-next {
    background: rgba(20, 30, 30, .55) !important;
    transform: scale(1.08);
  }
  .icon-prev i, .icon-next i {
    font-size: 22px !important;
  }
}

/* ===== Franja de confianza (pago/envío/ahorro) ===== */
.value-props, .footer-features, [class*="reassurance"] {
  background: var(--brand-light) !important;
  border-radius: var(--radius-lg) !important;
  padding: 20px !important;
}
/* #block-reassurance (pagina de inicio): los 3 items venian como filas
   apiladas verticalmente con separadores horizontales, icono pequeño a
   la izquierda del texto. Se convierte en una fila de 3 columnas
   iguales, icono encima del texto y centrado, con separadores
   verticales finos entre columnas en vez de horizontales entre filas. */
#block-reassurance ul {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#block-reassurance li {
  border-right: 1px solid rgba(55, 100, 103, .12) !important;
  /* El tema nativo trae un border-bottom en todos los <li> menos el
     ultimo (pensado para el diseño apilado original, como separador
     entre filas). Al pasar a grid horizontal ese resto se veia como
     una linea fina e inconsistente debajo de 2 de los 3 items. Se
     quita del todo: los separadores ahora son solo verticales
     (border-right, arriba). */
  border-bottom: none !important;
}
#block-reassurance li:last-child {
  border-right: none !important;
}
#block-reassurance .block-reassurance-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 10px !important;
  padding: 8px 20px !important;
  /* Reportado por el usuario: dependiendo del idioma (texto mas largo
     en aleman, por ejemplo) el numero de lineas que ocupa cada ".h6"
     varia, y como esta caja (con el fondo mint, ver la regla generica
     ".value-props, [class*='reassurance']" mas abajo en el archivo)
     NO se estiraba para llenar su "<li>" -que si se estira solo, por
     ser un item directo del grid de mas arriba-, cada caja terminaba
     con una altura distinta segun cuanto texto tuviera, dando un
     aspecto de "tamaños distintos" entre las 3. Con "height:100%" la
     caja ocupa siempre el alto completo (igualado por el propio grid
     a la fila mas alta de las 3) y con el icono+texto centrados
     verticalmente dentro, quedando las 3 cajas con el mismo tamaño
     pase lo que pase con la longitud del texto. */
  height: 100% !important;
  box-sizing: border-box !important;
}
#block-reassurance .block-reassurance-item img {
  width: 36px !important;
  height: 36px !important;
  object-fit: contain;
}
#block-reassurance .block-reassurance-item .h6 {
  font-weight: 600 !important;
  color: var(--brand-dark) !important;
  font-size: 13.5px !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}
/* Por debajo de ~440px las 3 columnas del grid ya no caben con su
   padding + el texto mas largo (p.ej. "Ahorre comprando en nuestra
   web..."): el grid (siempre "repeat(3, 1fr)", fijo, sin punto de
   quiebre propio) se desbordaba por la derecha -> como el body tiene
   "overflow-x:hidden" en todo el sitio, ese desborde no se veia como
   scroll horizontal sino como contenido CORTADO e inalcanzable (la
   tercera columna quedaba con el texto a medias, reportado por el
   usuario como el bloque "se ve descentrado"). Por debajo del umbral
   se apilan las 3 en una sola columna (cada item ya centra su propio
   contenido via ".block-reassurance-item"), con separadores
   horizontales en vez de verticales entre ellas. */
@media (max-width: 440px) {
  #block-reassurance ul {
    grid-template-columns: 1fr !important;
  }
  #block-reassurance li {
    border-right: none !important;
    border-bottom: 1px solid rgba(55, 100, 103, .12) !important;
  }
  #block-reassurance li:last-child {
    border-bottom: none !important;
  }
}

/* ===== Tarjetas de producto =====
   IMPORTANTE: .product-miniature y .thumbnail-container están anidados
   en el HTML (uno dentro del otro). Solo el interior lleva la tarjeta
   visual; si se estiliza también el exterior queda una tarjeta duplicada. */
.product-miniature {
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.thumbnail-container {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden;
  background: #fff !important;
}
.thumbnail-container:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-4px);
}
.product-title { font-weight: 600 !important; color: #1d1d1d !important; }
.product-title a { color: inherit !important; }
.price {
  font-weight: 700 !important;
  color: var(--brand-dark) !important;
  font-size: 1.1em !important;
}

/* ===== Tipografía general ===== */
h1, h2, h3 { font-weight: 700 !important; letter-spacing: -.01em; }
h1 { color: #1d1d1d !important; }

.card, .block {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  border: none !important;
}

/* ===== Footer ===== */
/* --brand-dark cubriendo todo el footer se veia demasiado pesado/intenso
   en un area tan grande -> se usa --brand (mas claro) en su lugar. */
#footer, .footer-container {
  background: var(--brand) !important;
  color: #eaf4f3 !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
#footer a { color: #e1f0ee !important; }
#footer a:hover { color: #ffffff !important; }
/* En movil cada columna del footer es un acordeon nativo (Bootstrap
   ".collapse"); ese ".collapse" trae su PROPIO fondo gris claro
   (#f6f6f6) de fabrica, pensado para un footer blanco -> al desplegar
   una columna (p.ej. "iTecnoworld") el contenido se veia con fondo claro
   mientras el titulo de la columna seguia en el teal de marca, un
   mordisco visual claro entre cabecera y contenido de la misma columna.
   En vez de transparente puro (que fundia el contenido desplegado con
   el titulo de la columna, sin separacion visual alguna), se usa un
   negro translucido leve por ENCIMA del teal de marca -> queda un poco
   mas oscuro que el resto del footer, diferenciando la zona desplegada
   sin salirse de la paleta del sitio.
   Solo en movil: en escritorio ".collapse" ya viene siempre expandido
   (el tema lo fuerza a display:block permanente, no es un acordeon ahi)
   y este fondo se veia como una caja mas oscura suelta bajo cada
   columna, un cambio no deseado respecto al aspecto de siempre en PC. */
@media (max-width: 767px) {
  .footer-container .collapse {
    background: rgba(0, 0, 0, .12) !important;
  }
}
/* BUG con nuestro limite de ancho maximo (body > main, arriba del
   todo): el tema nativo hace un "full-bleed breakout" de la primera
   fila del footer con width:100vw + margin-left:calc(-50vw + 50%),
   para que el fondo llegue de borde a borde de la VENTANA. Esa cuenta
   asume que el contenedor esta centrado respecto al viewport completo.
   En monitores mas anchos que 2560px eso ya no es cierto (el viewport
   real es mas ancho que <main>), asi que la fila se desplaza fuera del
   area visible y queda recortada por el overflow:hidden de
   .footer-container -> la primera columna ("iTecnoworld") desaparecia
   por completo. El fondo teal ya lo cubre .footer-container por si
   solo (ocupa el 100% de <main>), asi que el breakout no hace falta:
   se neutraliza y la fila vuelve a un ancho normal dentro de su
   .container.
   ACTUALIZACION: el usuario seguia viendo la fila de columnas del
   footer (Productos/Su cuenta/Informacion de la tienda) totalmente
   descolocada al quitar zoom mas alla de cierto punto (pantallas/zoom
   muy anchos). Causa: esta regla y la nativa que neutraliza tienen
   EXACTAMENTE el mismo selector -> misma especificidad, y al llevar
   las dos "!important" el empate lo decide el orden en el CSS
   compilado final, que en produccion queda a veces con la nativa
   DESPUES de esta (mismo problema de "orden de origen" ya visto varias
   veces en ".tabs"/logo del checkout/breadcrumb/etc.) -> se sube la
   especificidad con "html body" para ganar siempre, sea cual sea el
   orden. */
html body .footer-container > .container > .row:first-child {
  width: 100% !important;
  margin-left: 0 !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Pedido explicito del usuario: la columna de la izquierda ("iTecnoworld",
   la primera de las 4) quedaba demasiado pegada al borde -> un poco
   mas de aire a su izquierda. Solo esta columna (no las demas, que ya
   tenian el "padding-left:15px" normal del grid de Bootstrap y se
   veian bien).
   SOLO ESCRITORIO (min-width:768px): en movil ".col-md-6.links" no es
   una columna suelta, es el contenedor que ENVUELVE a la vez
   "iTecnoworld" Y "Productos" (acordeon, ver mas abajo) -> este
   padding sin acotar empujaba a las DOS hacia la derecha mientras "Su
   cuenta"/"Informacion de la tienda" (columnas hermanas, fuera de este
   contenedor) se quedaban pegadas al borde -> los 4 titulos del
   acordeon salian desalineados entre si (reportado por el usuario). */
@media (min-width: 768px) {
  .footer-container > .container > .row > .col-md-6.links {
    padding-left: 35px !important;
  }
}
/* Los titulos de columna (".h3"/".title") y la info de contacto traen su
   propio color oscuro (pensado para fondo claro) del tema -> ilegibles
   sobre el footer oscuro. */
#footer .h3, #footer .title, #footer strong { color: #ffffff !important; }
#footer p, #footer .block-contact { color: #e1f0ee !important; }
/* Pedido explicito del usuario: el modal "Conditions générales" del
   ultimo paso del checkout se veia casi ilegible (texto claro sobre
   fondo tambien claro). Causa: ese modal (".js-checkout-modal") esta
   -por estructura nativa del tema, no por algo que hayamos puesto
   nosotros- METIDO DENTRO del <footer> en el HTML, asi que HEREDA los
   colores claros de arriba (pensados para el fondo oscuro del pie de
   pagina), aunque el propio modal tenga fondo claro/blanco. Hace falta
   sobreescribirlo aqui, apuntando directo a cada tipo de texto (no
   solo al contenedor: los "p"/"strong" de arriba ya tienen su propia
   regla con "!important" que gana por herencia normal, asi que hay que
   igualarla en especificidad apuntando tambien directo al tag). */
#footer .modal-content,
#footer .modal-content p,
#footer .modal-content li,
#footer .modal-content span,
#footer .modal-content div,
#footer .modal-content strong,
#footer .modal-content b,
#footer .modal-content em {
  color: #333333 !important;
}
#footer .modal-content h2,
#footer .modal-content h3 {
  color: var(--brand-dark) !important;
}

/* El bloque de newsletter traia fondo blanco solido propio, quedando
   como un recuadro suelto sobre el footer oscuro. Se funde como una
   tarjeta translucida en vez de romper el fondo. */
.block_newsletter {
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--radius-lg) !important;
  padding: 24px !important;
  margin: 0 auto 24px !important; /* auto en vez de un valor fijo: es una
    columna Bootstrap (col-lg-8) que por defecto se pega a la izquierda;
    con margin-left/right fijos en vez de auto quedaba muy descentrada */
  max-width: 900px;
}
.block_newsletter #block-newsletter-label { color: #ffffff !important; font-weight: 700 !important; }
.block_newsletter p { color: #e1f0ee !important; }
.block_newsletter input[name="email"] {
  border-radius: 999px !important;
  border: none !important;
  padding: 10px 16px !important;
  width: 100%;
}

a { color: var(--brand); }
a:hover { color: var(--accent); }

/* =========================================================================
   Menú principal (mega-menú ETS) — integración con el header
   ========================================================================= */
/* Todo este bloque (aspecto del mega-menu) queda restringido a
   escritorio (>=1200px, el mismo punto donde el propio tema oculta este
   menu para pasar a movil/tablet). A peticion explicita del usuario, el
   menu movil (".ybc-menu-toggle" + panel ".mm_menus_ul.active") debe
   verse exactamente como el tema nativo, sin ninguna de estas
   modificaciones (colores, pildoras, radios, sombras, etc.) - ya hubo
   dos rondas de bugs (menu horizontal roto, parpadeo) causados
   precisamente por estas reglas colandose sin querer en el menu movil
   por especificidad/orden variable segun el breakpoint. Envolver TODO
   el bloque en el media query es la forma mas robusta de garantizar
   cero interferencia, en vez de perseguir cada regla suelta. */
@media (min-width: 1200px) {
  .ets_mm_megamenu {
    background: #ffffff !important; /* mismo blanco solido que #header y el buscador */
    box-shadow: var(--shadow-sm) !important;
    border-top: 1px solid rgba(0, 0, 0, .05);
  }
  /* autoChangeStatus() (ets_megamenu/views/js/megamenu.js, plugin de
     terceros) decide UNA sola vez, en document.ready, si el menu
     "cabe" en horizontal midiendo con JS el ancho real de cada item
     contra el contenedor -> no se puede saber de antemano en CSS puro.
     Si no cabe, añade ".changestatus" al vuelo, que cambia de golpe
     decenas de reglas de este menu (ver mas abajo, bloque
     ".changestatus ..."). Confirmado en una traza real de produccion:
     hasta 0.40 de CLS cuando esa decision llega tarde (red/CPU
     lentas). Mismo patron que ".tabs" mas abajo en este fichero: el
     menu se queda invisible hasta que custom.js confirma que
     autoChangeStatus() ya corrio (clase "itw-menu-ready"), asi el
     usuario nunca ve la posicion/anchura provisional. */
  .ets_mm_megamenu:not(.itw-menu-ready) ul.mm_menus_ul {
    visibility: hidden !important;
    transition: none !important;
  }
  /* Encontrado en vivo (ver conversacion Claude): el propio plugin trae,
     SIN NINGUN media query (osea, activa siempre, en cualquier ancho),
     una regla ".transition_floating .mm_menus_ul" pensada solo para el
     panel movil deslizante -"position:fixed; width:70%;
     transform:translateX(-100%); visibility:hidden; opacity:.6"-, TODO
     con "!important". ".transition_floating" es una clase que el propio
     plugin pone SIEMPRE en el menu (forma parte de su configuracion de
     layout, no algo que cambie con el ancho) -> como esa regla del
     plugin ya trae "!important" y nuestra regla de aqui abajo
     (".ets_mm_megamenu .mm_menus_ul") no lo tenia en estas propiedades,
     la del plugin podia ganar (empate de "!important" resuelto por
     especificidad/orden) -> el menu horizontal quedaba colapsado a
     ~18px (el "ul" real, de mas de 1200px de alto por el
     "position:fixed", quedaba oculto detras, recortado por el
     "overflow:hidden" de sus contenedores padre). Se neutraliza aqui,
     con MAS especificidad (prefijo "#header") para ganar tambien en
     caso de empate por orden de aparicion en el CSS combinado final
     (donde este fichero y el del plugin se concatenan, y el que va
     DESPUES gana en un empate de "!important" + especificidad igual).
     Motivo de la intermitencia observada: que copia exacta de esta
     regla del plugin (hay variantes, algunas SI llevan un media query
     que limita cuando se aplica) acaba en el bundle CSS combinado
     depende de que ficheros entren en esa combinacion en cada momento
     -> variaba segun el estado de cache en cada carga. */
  /* ".itw-menu-ready" en el selector a proposito (no solo ".ets_mm_megamenu"):
     asi esta regla no compite con ".ets_mm_megamenu:not(.itw-menu-ready)
     ul.mm_menus_ul{visibility:hidden}" de arriba (el gateo intencional
     que evita el flash de layout provisional antes de que
     autoChangeStatus() termine) -> antes de estar listo, ese gateo
     sigue mandando sin interferencia; a partir de estar listo, esta
     regla (mas especifica que la del plugin gracias al "#header") toma
     el relevo y neutraliza el "position:fixed" etc. del plugin.
     "transition:none" en las DOS reglas (esta y la de arriba) a
     proposito: la regla del plugin trae ademas "transition:transform
     .35s!important" (pensada para animar la apertura/cierre del panel
     movil) -> sin anular eso aqui, el cambio real de "transform"
     (de "translateX(-100%)" del plugin, activo mientras no esta listo,
     a "none" de esta regla, activo en cuanto se añade ".itw-menu-ready")
     SI dispara la transicion (el navegador usa la duracion definida en
     el estilo COMPUTADO en el momento del cambio, no le importa que
     regla puso cada valor) -> el menu quedaba "deslizandose desde la
     izquierda" en cada carga, visible durante ese medio segundo,
     reportado por el usuario. Con "transition:none" en ambas reglas
     (antes Y despues de estar listo) el cambio de "transform" es
     instantaneo siempre, sin animacion en ningun sentido. */
  #header .ets_mm_megamenu.itw-menu-ready .mm_menus_ul {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    max-width: none !important;
    width: auto !important;
    min-width: 0 !important;
    transform: none !important;
    transition: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    z-index: auto !important;
    float: none !important;
  }
  /* Segunda tanda del MISMO problema de fondo (ver comentario de arriba,
     ver conversacion Claude): no era solo una regla suelta del plugin
     sin media query, es un BLOQUE ENTERO de estilos pensados para movil
     (`width:100vw`, `margin:0`, `padding:0`, `left:0`, `right:0`,
     `overflow:hidden`) que existe DUPLICADO sin ningun media query que
     lo limite, afectando tambien a escritorio. Confirmado en vivo con
     un navegador real: el desplegable de un item del menu quedaba
     recortado a los ~220x41px del propio boton (por "overflow:hidden"
     en ".mm_menus_ul > li", tambien sin media query), y la barra entera
     del mega-menu no llegaba al borde derecho (por el bloque de
     "width:100vw"/"margin:0" etc. peleando con el ancho real del
     contenedor). Se neutralizan aqui, con la misma tecnica (mas
     especificidad via "#header", solo una vez el menu esta listo). */
  #header .ets_mm_megamenu.itw-menu-ready .mm_menus_li {
    overflow: visible !important;
  }
  #header .ets_mm_megamenu.itw-menu-ready,
  #header .ets_mm_megamenu.itw-menu-ready .container,
  #header .ets_mm_megamenu.itw-menu-ready .ets_mm_megamenu_content,
  #header .ets_mm_megamenu.itw-menu-ready .ets_mm_megamenu_content_content {
    width: auto !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important;
    right: auto !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  /* El "padding:0" del mismo bloque sin media query tambien pisaba este
     valor (mismo empate de especificidad+"!important", ver arriba) ->
     se repite aqui el valor de escritorio ya definido mas arriba en
     este fichero para ".ets_mm_megamenu_content_content", con mas
     especificidad para ganar siempre. */
  #header .ets_mm_megamenu.itw-menu-ready .ets_mm_megamenu_content_content {
    padding: 4px 0 !important;
  }
  .ets_mm_megamenu .mm_menus_ul {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important; /* menú siempre a la izquierda */
    gap: 4px;
    padding: 4px 12px !important;
  }

  /* Sin líneas divisorias entre ítems: el espaciado + la píldora ya marcan
     la separación, no hacen falta bordes verticales. */
  .mm_menus_li, .mm_menus_li.hover, .mm_menus_li.mm_has_sub {
    border-left: none !important;
    border-right: none !important;
  }
  .mm_menus_li { position: relative; }

  .mm_menus_li > a.ets_mm_url {
    display: flex !important;
    align-items: center;
    gap: 4px;
    height: 40px !important;       /* altura fija: con radius 999px sobre la
                                       altura completa de la fila (60px) el
                                       redondeo se aplanaba y parecía cuadrado */
    max-height: 40px !important;
    margin: 0 2px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    color: #384848 !important;
    font-weight: 600 !important;
    font-size: 14.5px !important;
    letter-spacing: .01em;
    box-sizing: border-box !important;
  }
  .mm_menus_li:hover > a.ets_mm_url {
    background: var(--brand-light) !important;
    color: var(--brand-dark) !important;
  }
  /* Nota: el tema aplica una clase ".hover" a varios <li> de forma ESTÁTICA
     (no solo en :hover real). No engancharse a ".hover" para el fondo, o
     el menú se ve permanentemente "seleccionado". Usar solo :hover. */

  .mm_menus_li .arrow {
    transition: transform .2s ease !important;
    opacity: .6;
  }
  .mm_menus_li:hover .arrow { transform: rotate(180deg); opacity: 1; }

  /* El propio módulo de mega-menú añade una franja de 1px (#254845) vía
     ::before en cada link como indicador de hover — se elimina porque
     choca con la píldora redondeada. */
  .mm_menus_li > a.ets_mm_url::before,
  .mm_menus_li > a.ets_mm_url::after {
    display: none !important;
    content: none !important;
  }

  /* Paneles desplegables (mega-menú) */
  .mm_columns_ul, ul.mm_columns_ul {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    border: 1px solid rgba(0, 0, 0, .05) !important;
    padding: 20px !important;
    margin-top: 0 !important; /* un margen aquí crea un hueco muerto entre el
                                  link y el panel: el cursor "sale" del área
                                  hoverable al bajar y el menú se cierra solo */
    background: #fff !important;
    /* margin-top:0 no alcanzaba: el JS del modulo fija el panel con
       position:absolute y un "top" en PX calculado en base a la altura
       ORIGINAL del link disparador (~44px). Como el link ahora mide 40px
       (ver .mm_menus_li > a.ets_mm_url mas arriba, para que la píldora no
       se aplane), quedaban ~4px de hueco muerto real entre el borde
       inferior del trigger y el panel — justo la franja donde el cursor
       "perdía" el hover y el menu se cerraba solo al entrar. Se fuerza el
       top a los mismos 40px del trigger para que queden pegados sin hueco. */
    top: 40px !important;
  }
  .ets_mm_block .h4, .ets_mm_block span.h4 {
    color: var(--brand-dark) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 13px !important;
    letter-spacing: .04em;
    border-bottom: none !important;
    padding-bottom: 8px;
    display: block;
    margin-bottom: 10px !important;
    /* El titulo nativo trae white-space:nowrap + text-overflow:ellipsis a
       font-size:16px (mas grande que el 13px final de arriba) -> con
       categorias largas ("Carcasas top cover (sin teclado)") se cortaba a
       mitad de palabra. Se deja hacer wrap a 2 lineas en vez de truncar:
       no se pierde informacion y a este tamaño de fuente casi siempre
       entra en una sola linea igual. */
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.25 !important;
  }
  /* El modulo agrega una viñeta ficticia antes de cada link: un "."
     renderizado a font-size:34px con line-height:0 para que colapse en un
     punto (truco clasico de CSS). Con las filas ya resaltando en hover
     (ver mas abajo) la viñeta suelta se ve anticuada/innecesaria. */
  .ets_mm_categories a::before,
  .mm_blocks_li a.ets_mm_url::before {
    display: none !important;
  }
  .ets_mm_categories a, .mm_blocks_li a.ets_mm_url {
    border-radius: 8px !important;
    padding: 8px 10px !important;
    display: block !important;
    color: #4a5757 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
  }
  /* Separacion real entre filas ahora que no está la viñeta marcando el
     límite de cada item visualmente. */
  .ets_mm_categories li + li {
    margin-top: 2px;
  }
  .ets_mm_categories a:hover, .mm_blocks_li a.ets_mm_url:hover {
    background: var(--brand-light) !important;
    color: var(--brand-dark) !important;
  }
}

/* Menu movil/tablet del mega-menu ETS (el panel ".mm_menus_ul.active"
   que aparece por debajo de 1198px, el mismo breakpoint que usa el
   propio modulo -> ver "@media (max-width:1198px)" en su CSS nativo).
   A peticion explicita del usuario se le da el mismo tratamiento
   visual que al menu de escritorio (arriba). Todos los selectores
   van anclados a "#header" (el <div id="header"> que envuelve el
   megamenu) porque el modulo define sus propias reglas nativas para
   estos mismos elementos TAMBIEN ancladas a "#header ..." -> sin ese
   prefijo, un !important normal (incluso con selectores muy largos)
   pierde el empate de especificidad porque la regla nativa tiene esa
   misma "ventaja" del ID. Confirmado en vivo probando con colores de
   choque (rojo/verde) hasta encontrar el prefijo exacto que gana. */
@media (max-width: 1198px) {
  #header .ets_mm_megamenu ul.mm_menus_ul.active {
    background: #fff !important;
  }
  /* "position:relative" aqui es la clave para que ".arrow" (mas abajo)
     se pueda anclar SIEMPRE al propio <li>, no a un ancestro mas
     arriba -> asi su "position:absolute" nunca añade altura de flujo
     propia y todas las filas (tengan o no submenu) miden EXACTAMENTE
     lo mismo. Pedido explicito del usuario: "todos los elementos deben
     tener el mismo tamaño". */
  #header .ets_mm_megamenu ul.mm_menus_ul.active li.mm_menus_li {
    position: relative !important;
    border-bottom: 1px solid rgba(0, 0, 0, .06) !important;
    background: #fff !important;
  }
  /* El color va repetido con ":link"/":visited" (ademas del selector
     normal) por un motivo muy especifico: los items de nivel superior
     con submenu ("Repuestos para portatiles/consolas") salian en el
     gris de enlace visitado por defecto del navegador, aunque la
     regla de color de abajo ya tuviera !important. Un enlace real
     visitado usa una cascada aparte y PRIVADA para las pocas
     propiedades "sensibles" (color incluido) que solo puede anular
     otra regla que use ":visited" explicitamente en el selector -
     una regla "normal" (sin ":visited"), por muy especifica que sea,
     no cuenta para esa cascada aparte. Sin este duplicado, cualquier
     visitante que ya haya entrado antes a esa categoria veria el
     link en gris apagado en vez del color de marca.
     "min-height + padding" fijos (en vez de heredar el padding nativo,
     que variaba segun si el link traia icono/submenu) son el segundo
     ingrediente para la altura uniforme -> el padding derecho deja
     sitio fijo para la flecha sin invadir el texto. */
  #header .ets_mm_megamenu ul.mm_menus_ul.active li.mm_menus_li > a.ets_mm_url,
  #header .ets_mm_megamenu ul.mm_menus_ul.active li.mm_menus_li > a.ets_mm_url:link,
  #header .ets_mm_megamenu ul.mm_menus_ul.active li.mm_menus_li > a.ets_mm_url:visited {
    display: flex !important;
    align-items: center !important;
    min-height: 24px !important;
    padding: 15px 48px 15px 20px !important;
    box-sizing: border-box !important;
    color: #263434 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    transition: background .15s ease, color .15s ease !important;
  }
  /* El icono de "Página principal" es el UNICO link de nivel superior
     con un <i> dentro del titulo -> sin fijar su tamaño se veia mas
     grande/desalineado que el resto de filas (que solo tienen texto). */
  #header .ets_mm_megamenu ul.mm_menus_ul.active .mm_menu_content_title {
    display: flex !important;
    align-items: center !important;
  }
  #header .ets_mm_megamenu ul.mm_menus_ul.active .mm_menu_content_title i.fa {
    font-size: 16px !important;
    width: 20px !important;
    margin-right: 8px !important;
    text-align: center !important;
  }
  /* ".mm_arrow" (span vacio que el modulo mete DENTRO del titulo, junto
     al texto) no se usa aqui -> el indicador real es ".arrow" (fuera
     del link, ver mas abajo). Se oculta para que no deje un hueco
     fantasma junto al texto. */
  #header .ets_mm_megamenu ul.mm_menus_ul.active .mm_menu_content_title .mm_arrow {
    display: none !important;
  }
  /* Los items CON submenu ("mm_has_sub") necesitan su propio duplicado
     con mas especificidad que la regla general de arriba: el modulo
     nativo tiene una regla de color Y fondo solo para estos (los deja
     con un fondo verdoso propio y mas apagados, para diferenciarlos
     visualmente de los que no despliegan nada) y esa regla nativa
     (servida desde el CSS COMPILADO del tema, en el CDN -> no se puede
     inspeccionar su selector exacto desde el propio navegador por
     estar en otro origen, confirmado probando a ciegas con "html body"
     de mas hasta ganar el empate) gana el empate salvo que se iguale
     aqui su misma especificidad exacta. Sin este reset de fondo, las
     dos filas con submenu quedaban con un tinte de fondo que las demas
     filas no tenian -> la otra mitad (junto con la altura) de que "no
     se vieran del mismo tamaño/aspecto". */
  html body #header .ets_mm_megamenu ul.mm_menus_ul.active li.mm_menus_li.mm_has_sub > a.ets_mm_url,
  html body #header .ets_mm_megamenu ul.mm_menus_ul.active li.mm_menus_li.mm_has_sub > a.ets_mm_url:link,
  html body #header .ets_mm_megamenu ul.mm_menus_ul.active li.mm_menus_li.mm_has_sub > a.ets_mm_url:visited {
    color: #263434 !important;
    background: transparent !important;
  }
  #header .ets_mm_megamenu ul.mm_menus_ul.active li.mm_menus_li > a.ets_mm_url:active {
    background: var(--brand-light) !important;
    color: var(--brand-dark) !important;
  }
  /* OJO: el modulo mete una clase ".hover" ESTATICA en TODOS los <li>
     de nivel superior (no solo al pasar el cursor, ver nota de mas
     arriba sobre el menu de escritorio) -> enganchar el fondo
     "destacado" a ".mm_has_sub.hover" (primer intento) lo dejaba
     SIEMPRE encendido en los items con submenu, permanentemente mas
     oscuros que el resto sin motivo -> esa era la causa real de que
     "no se vieran del mismo tamaño/aspecto". El estado real de
     abierto/cerrado que el modulo anima es ".opened" en ".arrow" (el
     span HERMANO del link, no una clase en el propio <li>) -> se
     engancha ahi via ":has()" (probado en vivo: sin esto, o bien queda
     siempre encendido -bug original-, o bien nunca se enciende si se
     apunta a una clase ".open" que el modulo, en esta version, no
     llega a poner en el <li>). En reposo (cerrado) todas las filas son
     identicas, y solo se tiñe la que el usuario ha desplegado de
     verdad. */
  html body #header .ets_mm_megamenu ul.mm_menus_ul.active li.mm_menus_li.mm_has_sub:has(> .arrow.opened) > a.ets_mm_url {
    background: var(--brand-light) !important;
    color: var(--brand-dark) !important;
  }
  /* El "+/-" nativo (".arrow") se sustituye por un pico/chevron: tecnica
     clasica de un cuadrado pequeño con SOLO 2 bordes visibles (derecho
     + inferior) que, segun el angulo de rotacion, apunta hacia donde
     haga falta. Pedido explicito del usuario: cerrado apunta hacia
     ABAJO (rotate(45deg)) -indica "esto se despliega hacia abajo"- y al
     desplegar gira otros 180° (45deg -> 225deg) quedando hacia ARRIBA,
     indicando "ya desplegado, pulsa para recoger". Se ancla con
     "position:absolute" (no "relative": ese fue el primer intento, pero
     al quedar en el flujo normal el propio elemento sumaba ~24px de
     alto de mas SOLO en las filas con submenu, que es precisamente la
     inconsistencia de tamaño reportada en otra ronda) al <li> (ver
     "position:relative" mas arriba), centrada verticalmente y sin
     ocupar espacio de flujo -> asi el alto de la fila lo deciden
     unicamente el padding/min-height de ".ets_mm_url" de arriba, igual
     para todas las filas. */
  #header .ets_mm_megamenu ul.mm_menus_ul.active li.mm_menus_li .arrow {
    position: absolute !important;
    top: 50% !important;
    right: 20px !important;
    left: auto !important;
    bottom: auto !important;
    width: 9px !important;
    height: 9px !important;
    margin: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: 2px solid var(--brand-dark) !important;
    border-bottom: 2px solid var(--brand-dark) !important;
    transform: translateY(-50%) rotate(45deg) !important;
    transition: transform .25s ease !important;
  }
  #header .ets_mm_megamenu ul.mm_menus_ul.active li.mm_menus_li .arrow::before,
  #header .ets_mm_megamenu ul.mm_menus_ul.active li.mm_menus_li .arrow::after {
    content: none !important;
    display: none !important;
  }
  #header .ets_mm_megamenu ul.mm_menus_ul.active li.mm_menus_li .arrow.opened {
    transform: translateY(-50%) rotate(225deg) !important;
  }
  /* "padding" (a diferencia de "height") NO se pone a 0 solo porque el
     panel este colapsado ("height:0" nativo) -> un padding sin height
     sigue dibujando su caja (aqui ~20px de alto muerto) SOLO en las
     filas con submenu, que era la otra mitad de la inconsistencia de
     tamaño reportada (la primera mitad era la propia flecha, ver
     arriba). El padding/fondo "abierto" solo se aplica cuando el <li>
     tiene de verdad la clase ".open"; en el resto de casos (cerrado)
     se fuerza a 0 explicitamente en vez de heredar lo que traiga el
     estado nativo. */
  #header .ets_mm_megamenu ul.mm_menus_ul.active ul.mm_columns_ul {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }
  #header .ets_mm_megamenu ul.mm_menus_ul.active li.mm_menus_li.mm_has_sub:has(> .arrow.opened) > ul.mm_columns_ul {
    background: #fafcfc !important;
    padding: 4px 16px 16px !important;
  }
  #header .ets_mm_megamenu ul.mm_menus_ul.active .ets_mm_block .h4,
  #header .ets_mm_megamenu ul.mm_menus_ul.active .ets_mm_block span.h4 {
    color: var(--brand-dark) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 12.5px !important;
    letter-spacing: .04em !important;
  }
  /* Misma vineta ficticia (un "." a font-size:34px) que en escritorio
     -> ver comentario en el bloque de arriba, aqui se oculta igual. */
  #header .ets_mm_megamenu ul.mm_menus_ul.active .ets_mm_categories a::before,
  #header .ets_mm_megamenu ul.mm_menus_ul.active .mm_blocks_li a.ets_mm_url::before {
    display: none !important;
  }
  #header .ets_mm_megamenu ul.mm_menus_ul.active .ets_mm_categories a,
  #header .ets_mm_megamenu ul.mm_menus_ul.active .mm_blocks_li a.ets_mm_url,
  #header .ets_mm_megamenu ul.mm_menus_ul.active .ets_mm_categories li a:link,
  #header .ets_mm_megamenu ul.mm_menus_ul.active .ets_mm_categories li a:visited,
  #header .ets_mm_megamenu ul.mm_menus_ul.active .mm_blocks_li a.ets_mm_url:link,
  #header .ets_mm_megamenu ul.mm_menus_ul.active .mm_blocks_li a.ets_mm_url:visited {
    border-radius: 8px !important;
    color: #4a5757 !important;
    font-weight: 500 !important;
    display: block !important;
  }
  #header .ets_mm_megamenu ul.mm_menus_ul.active .ets_mm_categories a:active,
  #header .ets_mm_megamenu ul.mm_menus_ul.active .mm_blocks_li a.ets_mm_url:active {
    background: var(--brand-light) !important;
    color: var(--brand-dark) !important;
  }
  /* Cabecera del panel (".close_menu": fila "☰ Menú" / "‹ Volver" que
     se repite en todos los niveles). Pedido explicito del usuario:
     "Menú" centrado y SIN el icono de tres lineas delante, y "Volver"
     sustituido por un icono de cerrar.
     "position:relative" en el contenedor + "position:absolute" en
     ".pull-left" es necesario para centrar "Menú" de verdad respecto
     a TODA la barra -> con flex "justify-content:space-between" (el
     que ya trae el modulo) el centrado solo sale bien si los dos lados
     miden lo mismo, y aqui no es el caso. */
  #header .ets_mm_megamenu ul.mm_menus_ul.active li.close_menu {
    position: relative !important;
  }
  #header .ets_mm_megamenu ul.mm_menus_ul.active li.close_menu .mm_menus_back {
    display: none !important;
  }
  #header .ets_mm_megamenu ul.mm_menus_ul.active li.close_menu .pull-left {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Con ".pull-left" ya fuera del flujo (absolute), ".pull-right" queda
     como unico hijo flex de la fila -> sin empuje propio se iria a la
     izquierda (un flex-item solo no "sabe" que antes habia otro al
     lado). "margin-left:auto" lo manda al borde derecho igual que
     antes, sin depender del "justify-content" nativo de la fila. */
  #header .ets_mm_megamenu ul.mm_menus_ul.active li.close_menu .pull-right {
    margin-left: auto !important;
    /* "Volver" es un nodo de texto suelto junto a ".mm_menus_back_icon"
       (no un <span> propio) -> no se puede ocultar solo el texto con un
       selector normal. Mismo truco que ya usa esta hoja para el boton
       "Añadir al carrito" en movil: "font-size:0" apaga cualquier texto
       directo sin afectar al icono, que se dibuja aparte con bordes a
       tamaño fijo en pixeles (ver abajo), no con unidades de fuente. */
    font-size: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  /* Icono de cerrar ("X"): misma tecnica de dos barras que el resto de
     iconos custom de esta hoja (bordes con border-radius, no un
     caracter de fuente, para que el grosor/color sean siempre
     consistentes). El propio ".mm_menus_back_icon" nativo YA es una
     flecha "‹" dibujada con "border-top + border-left" + rotate(-45deg)
     puestos directamente en el elemento (no en ::before/::after) -> sin
     neutralizar ese border/transform aqui, la "X" de abajo se dibujaba
     ENCIMA de esa flecha nativa en vez de sustituirla (confirmado en
     vivo: se veian las dos formas superpuestas). */
  #header .ets_mm_megamenu ul.mm_menus_ul.active li.close_menu .mm_menus_back_icon {
    position: relative !important;
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    border: none !important;
    background: none !important;
    transform: none !important;
  }
  #header .ets_mm_megamenu ul.mm_menus_ul.active li.close_menu .mm_menus_back_icon::before,
  #header .ets_mm_megamenu ul.mm_menus_ul.active li.close_menu .mm_menus_back_icon::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 16px !important;
    height: 2px !important;
    background: var(--brand-dark) !important;
    border-radius: 2px !important;
  }
  #header .ets_mm_megamenu ul.mm_menus_ul.active li.close_menu .mm_menus_back_icon::before {
    transform: translate(-50%, -50%) rotate(45deg) !important;
  }
  #header .ets_mm_megamenu ul.mm_menus_ul.active li.close_menu .mm_menus_back_icon::after {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
  }
}

/* Cuando el mega-menu pasa a flotante al hacer scroll (clase nativa
   ".scroll_heading", ver JS "relocateHeaderIcons") y el propio JS
   decide que hay hueco de sobra, reubica ahi "a.btn-register" (Crear
   cuenta, solo cuando existe -> sesion no iniciada), "#_desktop_user_info"
   (solo el saludo/login, no el logout, ver mas abajo) y "#_desktop_cart"
   -> se les da acomodo visual como un grupo mas a la derecha del
   menu, separado con un margen automatico que los empuja al borde.
   "padding-right" deja aire visible en el borde derecho del todo
   (pedido explicito del usuario: quedaba "todo apiñonado" pegado al
   borde) -> el valor debe coincidir con "RIGHT_MARGIN" en el JS, que
   usa ese mismo hueco para decidir si cabe o no (si se cambia aqui,
   cambiar tambien alla).
   Pedido explicito: la tipografia (tipo Y tamaño) de estos elementos
   debe igualar la de los propios enlaces del mega-menu
   (".mm_menus_li > a.ets_mm_url": 14.5px, peso 600, mismo
   "font-family" heredado del body en todo el sitio). "#_desktop_user_info
   a"/"#_desktop_cart .header" ya traen font-weight:600 de una regla
   general de mas abajo, pero su tamaño (13px) venia de
   ".header-nav, .header-nav span, .header-nav a" -> una regla que ya
   NO aplica una vez movidos fuera de ".header-nav" (quedaria heredando
   el tamaño por defecto del mega-menu en su lugar, que no coincide
   exactamente) -> se fija aqui explicitamente. "a.btn-register" trae
   su propio 13px de una regla especifica (ver mas abajo en el
   archivo) que tambien hay que igualar aqui. */
.js-header-icons-slot {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
  padding-left: 16px !important;
  padding-right: 24px !important;
}
.js-header-icons-slot #_desktop_user_info a,
.js-header-icons-slot #_desktop_cart .header,
.js-header-icons-slot a.btn-register {
  white-space: nowrap !important;
  font-size: 14.5px !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
}
/* "Crear cuenta" salia 6px mas abajo que "Iniciar sesion"/"Carrito"
   (reportado por el usuario: "sale desalineado"). Causa: una regla
   nativa del tema (en la hoja de estilos principal, de origen cruzado
   -> no se puede inspeccionar su selector exacto via CSSOM, solo
   confirmar el efecto por computed style) le pone
   "position:relative; top:6px" pensado para su posicion ORIGINAL
   dentro de ".header-nav" (probablemente para compensar algun
   desajuste vertical especifico de esa fila) -> ese desplazamiento ya
   no tiene sentido una vez movido a este otro contenedor flex, que ya
   centra verticalmente por si solo con "align-items:center". Se
   anula aqui. */
.js-header-icons-slot a.btn-register {
  position: static !important;
  top: auto !important;
}
/* Pedido explicito: dentro del mega-menu NO se muestra "Cerrar
   sesion", solo el saludo ("Hola, X") y el carrito -> el JS ya deja
   de mover el link de logout a este contenedor, pero como
   "#_desktop_user_info" es un solo <div> con AMBOS enlaces dentro
   (logout + saludo), se oculta aqui especificamente el de logout sin
   afectar a su aspecto en la fila original (".header-nav"), donde
   sigue viendose normal cuando no esta flotante. */
.js-header-icons-slot #_desktop_user_info .logout {
  display: none !important;
}

/* El propio tema deja un hueco nativo entre 767px y 1199px donde ni el
   menu de escritorio (se oculta por debajo de 1200px) ni el boton
   hamburguesa (".ybc-menu-toggle", solo aparece por debajo de 767px)
   se ven. Un primer intento de adelantar el boton a 1199px quedo
   revertido: en ese rango otros elementos de la cabecera (logo,
   buscador, iconos) seguian con su disposicion de escritorio con
   breakpoints propios no sincronizados, asi que el boton forzado
   quedaba superpuesto sobre contenido de escritorio en vez de
   sustituirlo. Pendiente de retomar con un arreglo que tambien
   sincronice esos otros elementos. */

/* =========================================================================
   Barra superior (.header-nav real) — WhatsApp / horario / idioma /
   cuenta / carrito / crear cuenta
   ========================================================================= */
.header-nav {
  background: var(--brand-light) !important;
  border-bottom: 1px solid rgba(0, 0, 0, .04) !important;
  padding: 6px 0 !important;
}
.header-nav, .header-nav span, .header-nav a { font-size: 13px !important; }

#contact-link a[href*="wa.me"] {
  background: #fff !important;
  border-radius: 999px !important;
  padding: 5px 12px 5px 8px !important;
  font-weight: 600 !important;
  color: #1f6b45 !important;
  box-shadow: var(--shadow-sm);
}
#contact-link a[href*="wa.me"] img { width: 16px !important; height: 16px !important; }
/* "#6b7a7a" (antes) solo llegaba a un ratio de contraste de 4.03:1
   sobre el fondo de la barra ("--brand-light") -> Google PageSpeed lo
   marcaba como insuficiente (hace falta 4.5:1 minimo). Se oscurece a
   "#5a6a6a" (mismo gris que el resto de textos secundarios del
   archivo, ver mas arriba) -> 5.10:1, ya cumple. */
#contact-link span {
  color: #5a6a6a !important;
  font-weight: 500 !important;
  margin-left: 10px !important;
}

.language-selector button.btn-unstyle {
  border-radius: 999px !important;
  padding: 5px 12px !important;
  font-weight: 600 !important;
  color: #384848 !important;
}
.language-selector button.btn-unstyle:hover { background: rgba(255, 255, 255, .8) !important; }
/* Desplegable de idiomas: solo aspecto visual, el abrir/cerrar se deja
   intacto tal cual lo maneja el JS nativo del tema (click). El <ul>
   nativo salia pegado al borde, cuadrado y sin resaltar el idioma
   activo. z-index alto para que quede por encima del resto del header
   y del contenido de la pagina (sin el, quedaba con tamaño real pero
   tapado/detras de otros elementos del layout). */
.language-selector .dropdown-menu {
  border-radius: var(--radius-md) !important;
  border: 1px solid rgba(0, 0, 0, .06) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 8px !important;
  margin-top: 8px !important;
  min-width: 170px !important;
  z-index: 1050 !important;
}
.language-selector .dropdown-menu li { margin: 2px 0 !important; }
.language-selector .dropdown-item {
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #384848 !important;
  display: block !important;
}
.language-selector .dropdown-item:hover {
  background: var(--brand-light) !important;
  color: var(--brand-dark) !important;
}
.language-selector li.current .dropdown-item {
  background: var(--brand-light) !important;
  color: var(--brand-dark) !important;
  font-weight: 700 !important;
}

/* inline-flex, no flex: estos <a> son hermanos dentro de un contenedor
   que NO es flex (.user-info, ver mas abajo) -> con "flex" a secas cada
   uno pasa a ser block-level y se apilan uno debajo del otro ("Cerrar
   sesion" montado sobre "Hola, Nombre") en vez de quedar en la misma
   linea. inline-flex mantiene el flujo inline entre ellos y el flex
   interno para alinear icono+texto dentro de cada uno. */
#_desktop_user_info a, #_desktop_cart .header {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  font-weight: 600 !important;
  color: #384848 !important;
  cursor: pointer;
}
#_desktop_user_info a:hover, #_desktop_cart:hover .header {
  background: rgba(255, 255, 255, .8) !important;
  color: var(--brand-dark) !important;
}
/* .user-info (el contenedor de "Cerrar sesion" + "Hola, Nombre") es
   display:block nativo -> aun con inline-flex arriba, alinea los dos
   links por baseline de texto, y como miden alto distinto (el icono de
   "Cerrar sesion" es visible, el de "Hola, Nombre" esta oculto en
   desktop via clase nativa hidden-md-up) quedaban con un desnivel
   vertical notorio ("descentrado"). align-items:center los centra entre
   si sin importar la diferencia de alto. */
.user-info {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
/* La regla de arriba pinta ".header" (el div contenedor) pero el tema
   nativo pone su PROPIO color:#fff directo en el <a>/<i>/<span> de
   adentro ("Carrito" + icono carrito) — una declaracion directa en el
   hijo gana aunque el padre diga otro color, la herencia no alcanza a
   pisarla. Contra el fondo blanco del header quedaba invisible. Con
   #_desktop_user_info (el link de "Iniciar sesion") no pasaba porque
   esa regla ya apunta directo al <a>, no a un contenedor intermedio. */
#_desktop_cart .header a,
#_desktop_cart .header i,
#_desktop_cart .header span:not(.cart-products-count) {
  color: #384848 !important;
}
#_desktop_cart:hover .header a,
#_desktop_cart:hover .header i,
#_desktop_cart:hover .header span:not(.cart-products-count) {
  color: var(--brand-dark) !important;
}
#_desktop_cart .cart-products-count {
  background: var(--brand) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 0 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
/* Por debajo de 767px el tema deja de usar "#_desktop_cart" y muestra un
   bloque paralelo distinto, "#_mobile_cart" (mismo carrito, otro <div>
   en el DOM) que nuestras reglas de arriba nunca tocaban -> el icono se
   veia blanco (color nativo pensado para su fondo verde original) sobre
   el header ya blanco/transparente, practicamente invisible. */
@media (max-width: 767px) {
  #_mobile_cart .header i,
  #_mobile_cart .header a,
  #_mobile_cart .blockcart {
    color: #000000 !important;
  }
  #_mobile_cart .blockcart {
    background: transparent !important;
  }
}

/* "Crear cuenta" traía un padding fijo (10px 20px) desde un <style>
   incrustado en el propio HTML de la pagina, mas alto que el resto de
   la barra (5px 12px) -> quedaba desalineado en altura. Se iguala aqui. */
a.btn-register {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 34px !important; /* fuerza la misma altura que Iniciar sesion/
    Carrito en vez de pelear con su padding original (10px 20px), que
    ganaba el empate de especificidad y dejaba el boton mas alto */
  padding: 0 16px !important;
  font-size: 13px !important;
  line-height: normal !important;
  box-sizing: border-box !important;
}

/* .blockcart trae su propia caja gris (fondo + padding) del tema
   original -> "Carrito" se veia distinto a "Iniciar sesion", que no
   tiene ese wrapper. Se neutraliza para que ambos sean píldoras iguales. */
.blockcart {
  background: transparent !important;
  padding: 0 !important;
}

/* Centra verticalmente los tres bloques (idioma/cuenta/carrito/crear
   cuenta) entre si dentro de la barra superior. */
.header-nav .right-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}
#_desktop_user_info, #_desktop_cart { display: flex !important; align-items: center !important; }
/* Orden fijo de "Crear cuenta" / "Iniciar sesion" / "Carrito", pedido
   explicito del usuario: debe verse asi DESDE EL PRIMER INSTANTE -esta
   misma regla vive tambien en el CSS critico
   (itwcriticalcsstest2/views/css/critical.css) para que aplique ya en
   el primer pintado, antes de que este fichero (diferido) llegue a
   cargar; se repite aqui para que el orden se mantenga igual una vez
   theme.css toma el relevo-. El orden nativo del servidor es "Iniciar
   sesion, Carrito, Crear cuenta" (comprobado en el HTML real sin JS);
   el deseado es "Crear cuenta, Iniciar sesion, Carrito". Tanto
   ".right-nav" (arriba) como ".js-header-icons-slot" (dentro del
   mega-menu al hacer scroll, ver mas abajo) ya son flex -> "order"
   puro en los propios elementos basta para los DOS contenedores por
   igual, sin depender de que JS ("relocateHeaderIcons" en custom.js)
   reordene nodos del DOM (eso llegaba un par de frames tarde,
   causando el salto visible reportado). */
#_desktop_language_selector { order: 0; }
a.btn-register { order: 1; }
#_desktop_user_info { order: 2; }
#_desktop_cart { order: 3; }

/* =========================================================================
   Ficha de producto — precio, referencia/estado, cantidad, añadir al
   carrito, iconos de confianza, pestañas
   ========================================================================= */
.h1 {
  margin-bottom: 14px !important;
  letter-spacing: -.015em;
}

/* El precio tiene "color: green" y tamaños puestos en linea (inline)
   directo en el HTML; se sobreescribe con !important para mantener
   consistencia con el resto de la paleta. */
.product-prices .current-price span[itemprop="price"] {
  color: var(--brand-dark) !important;
  font-weight: 800 !important;
  font-size: 2em !important;
  letter-spacing: -.01em;
}
/* Pedido explicito: que el "(con IVA)" destaque un poco mas, sin
   pasarse -osea sin competir con el precio principal-. Se mantiene el
   mismo gris ya usado en todo el sitio (accesible, ratio de contraste
   ya comprobado) y se sube algo el peso/tamaño (500->700, .5em->.6em),
   sin tocar el color ni acercarlo al tamaño del precio grande (2em). */
.product-prices .current-price span[itemprop="price"] > span {
  color: #5a6a6a !important;
  font-weight: 700 !important;
  font-size: .6em !important;
  font-style: normal !important;
  margin-left: 6px;
}
.product-prices .current-price span[itemprop="price"] > span span {
  font-style: normal !important;
}

.ps-extra-info {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px !important;
  margin: 16px 0 !important;
}
.ps-ref, .ps-cond {
  background: var(--brand-light) !important;
  color: var(--brand-dark) !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.ps-ref strong, .ps-cond strong { font-weight: 700; margin-right: 4px; }

#product-availability {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--brand-light) !important;
  color: var(--brand-dark) !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.bootstrap-touchspin {
  border-radius: 999px !important;
  overflow: hidden;
  border: 1.5px solid #e2e6e6 !important;
  display: inline-flex !important;
}
#quantity_wanted {
  border: none !important;
  text-align: center !important;
  font-weight: 700 !important;
  padding: 8px 6px !important;
}

.product-add-to-cart .add-to-cart {
  padding: 12px 28px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  gap: 8px;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap;
  /* Nativo: ".btn-primary,.btn-secondary{text-transform:uppercase}" ponia
     el texto TODO en mayusculas sea cual sea el idioma/traduccion.
     Pedido explicito del usuario: solo la primera letra en mayuscula.
     Se neutraliza aqui la transformacion nativa (para que no haya un
     parpadeo en mayusculas antes de que corra el JS) pero la
     capitalizacion real (minuscula + primera letra mayuscula) se hace
     por JS sobre el nodo de texto, NO con ::first-letter: ese
     pseudo-elemento solo se genera si el elemento forma una caja de
     bloque (block/inline-block/list-item/...) y este boton es
     "display:inline-flex" (necesario para alinear icono+texto) -> los
     contenedores flex/grid quedan explicitamente excluidos de
     first-letter/first-line en la spec, por eso el intento inicial con
     CSS puro no se aplicaba nunca (se veia todo en minuscula, sin la
     inicial). Ver alignTabs()/jsLogic en build-bookmarklet.js. */
  text-transform: none !important;
  /* Pedido explicito del usuario: que destaque del resto de botones
     (que usan todos el mismo verde --brand). Se usa --accent (el mismo
     naranja ya reservado en esta hoja para "llamar la atencion": hover
     de enlaces, barra de acento) en vez de otro color nuevo, para que
     sea la UNICA llamada a la accion en ese tono y así se distinga con
     claridad de "Iniciar sesion"/"Crear cuenta"/etc. La sombra tambien
     se tine del mismo naranja (en vez del gris neutro --shadow-md que
     usa el resto de botones) para reforzar el efecto "destacado". */
  background: linear-gradient(135deg, var(--accent), #e2661f) !important;
  box-shadow: 0 6px 18px rgba(255, 138, 61, .45) !important;
}
.product-add-to-cart .add-to-cart:hover {
  background: linear-gradient(135deg, #e2661f, var(--accent)) !important;
  box-shadow: 0 8px 22px rgba(255, 138, 61, .55) !important;
}
/* Nativo: ".product-quantity{display:flex; ...}" sin flex-wrap (nowrap
   por defecto) -> con el texto del boton visible (idiomas mas largos:
   aleman, italiano...) el selector de cantidad + boton podian no caber
   en la misma fila a anchos intermedios y quedarse recortados/desbordados
   en vez de "chocar". Se permite que el boton baje a su propia linea en
   vez de forzar una fila que no cabe. */
.product-quantity {
  flex-wrap: wrap !important;
}

/* .blockreassurance_product tiene la misma funcion que .value-props del
   home pero es una clase distinta (modulo separado) -> mismo tratamiento.
   El HTML nativo trae un <div class="clearfix"></div> extra como 4to
   hijo (resabio del layout flotante original, para que el padre midiera
   bien su alto). Al pasar el padre a flex ese div vacio se convierte en
   una 4ta tarjeta fantasma con el mismo fondo/padding que las otras 3 ->
   se oculta explicitamente, ya no hace falta con flex. */
.blockreassurance_product {
  display: flex !important;
  align-items: stretch !important;
  gap: 12px !important;
  margin-top: 24px !important;
  flex-wrap: wrap;
}
.blockreassurance_product > div.clearfix { display: none !important; }
/* Cada tarjeta pasa a columna flex, alineada a la izquierda (texto
   centrado quedaba raro, sobre todo con titulos de 2-3 lineas como
   "Ahorre comprando en nuestra web:"). margin-top:auto en el <p> lo
   empuja al fondo de la tarjeta: como las 3 tarjetas ya se estiran a la
   misma altura (align-items:stretch arriba), el texto pequeño queda
   siempre a la MISMA altura entre tarjetas sin importar si el titulo de
   arriba ocupa 1, 2 o 3 lineas. */
.blockreassurance_product > div:not(.clearfix) {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  flex: 1 1 150px;
  background: var(--brand-light) !important;
  border-radius: var(--radius-lg) !important;
  padding: 14px !important;
}
.blockreassurance_product .item-product { display: block !important; }
.blockreassurance_product .block-title {
  color: var(--brand-dark) !important;
  font-weight: 700 !important;
  display: block;
  margin-top: 6px;
}
.blockreassurance_product p {
  color: #5a6a6a !important;
  font-size: 12px !important;
  margin: 0 !important;
  margin-top: auto !important;
  padding-top: 8px !important;
}

/* El icono "Ahorre comprando" es un JPG con fondo blanco solido (sin
   alfa), a diferencia de los otros dos iconos del bloque que ya vienen
   con fondo transparente -> quedaba como un cuadrado blanco pegado
   sobre el fondo claro de la tarjeta. mix-blend-mode:multiply funde el
   blanco con lo que sea que haya detras (el blanco no aporta color al
   multiplicar) dejando solo el dibujo; el filtro de contraste limpia
   el ruido de compresion JPEG del blanco para que el fundido sea limpio. */
img[src*="img2.jpg"] {
  mix-blend-mode: multiply !important;
  filter: contrast(1.4) !important;
  background: transparent !important;
}

.nav-tabs {
  border-bottom: none !important;
  gap: 6px;
  display: flex !important;
}
.nav-tabs .nav-link {
  border-radius: 999px !important;
  border: none !important;
  padding: 8px 18px !important;
  font-weight: 600 !important;
  color: #5a6a6a !important;
  background: transparent !important;
}
.nav-tabs .nav-link.active {
  background: var(--brand-light) !important;
  color: var(--brand-dark) !important;
}
.tab-content { padding-top: 16px !important; }

/* Imagen principal del producto: se envuelve en una tarjeta blanca con
   esquinas redondeadas. La capa .layer del zoom al pasar el cursor no se
   toca - solo se agregan bordes redondeados y un fondo propio para que
   el contenedor ya no se vea "pelado" contra el fondo de la pagina. */
.images-container {
  background: #fff !important;
  border-radius: var(--radius-lg) !important;
  padding: 16px !important;
  box-shadow: var(--shadow-sm) !important;
}
/* El <picture> ya traia un clip-path propio del tema (inset(7px 7px 8px
   9px)) recortando un borde de la foto original; se pide 2px extra por
   arriba. */
.product-cover picture { clip-path: inset(9px 7px 8px 9px) !important; }
.product-cover {
  border-radius: 12px !important;
  overflow: hidden !important;
}
.product-cover img.js-qv-product-cover {
  border-radius: 12px !important;
  /* Reserva el hueco real de la foto principal (siempre cuadrada,
     1:1) ANTES de que termine de cargar -> confirmado con una traza
     real en un producto NUNCA visitado antes (sin cache de thumbnail
     generado): la galeria (.js-qv-mask) bajaba y crecia ~100px de
     golpe cuando la imagen terminaba de decidir su alto real, uno de
     los mayores saltos de layout medidos en toda la sesion (0.10 de
     CLS). Esta misma regla ya existia en critical.css, pero NUNCA se
     habia copiado a theme.css -> sin efecto mientras el experimento
     de critical CSS estuviera desactivado (como esta ahora). */
  aspect-ratio: 1 / 1 !important;
}
.js-qv-mask { margin-top: 12px !important; }
.thumb-container .thumb {
  border-radius: 8px !important;
  overflow: hidden;
}
/* Recorte pedido solo para la PRIMERA miniatura: 3px por lado en TODOS
   los lados, incluido arriba (subido paso a paso desde 1px, pedido
   explicito del usuario; ojo, "quitale/insertale un pixel mas"
   significa recortar un pixel MAS de la foto, es decir SUBIR el
   numero, no bajarlo) -> como "inserto" blanco -> el tamaño de la
   caja (98x98) no cambia ("la foto debe quedar igual de grande").
   Cuando esta seleccionada o en hover se usa 3px tambien arriba
   (recorte uniforme), ya que en ese estado el propio borde verde ya
   "compensa" visualmente el margen. Ademas, solo en ese estado
   (seleccionada/hover): abajo 3px EXTRA (total 6px) y arriba,
   izquierda y derecha 2px EXTRA cada uno (total 5px) -> pedidos
   explicitos del usuario, sin tocar el resto de valores ya ajustados
   (el estado normal/sin seleccionar sigue en 2px arriba, 3px lados
   y abajo).
   HISTORIAL DE INTENTOS FALLIDOS (los dos version anteriores parecian
   funcionar por CSS computado pero NO se veian de verdad en pantalla):
   1) clip-path: recorta de verdad los pixeles, pero clip-path recorta
      TODO lo que pinta el elemento, incluido su propio "border" ->
      ".thumb-container .thumb.selected" / ".thumb:hover" ponen un
      border real de 3px solid en el propio <img>, y ese border quedaba
      invisible justo en la franja que el clip-path elimina.
   2) box-shadow inset: en teoria "se pinta por dentro del borde sin
      recortarlo", pero en un <img> (elemento reemplazado) el PIXEL de
      la foto se pinta por ENCIMA de su propio box-shadow (el shadow
      queda en la capa de "fondo", debajo del contenido) -> con una
      imagen opaca que ocupa toda la caja, el inset quedaba 100%
      tapado por la propia foto. Se confirmo inyectando un inset de
      20px en rojo puro como prueba: el computed style lo mostraba
      aplicado pero no se veia ni un pixel en pantalla.
   SOLUCION: separar "el recorte" de "el borde de seleccion/hover" en
   dos elementos distintos. clip-path SIEMPRE activo en el <img> (el
   recorte real de pixeles, siempre visible, hover/selected incluido).
   El aro verde nativo se sustituye por uno propio pintado con un
   ::after en el <li>, que NO esta recortado por el clip-path del
   <img> (son elementos distintos) y se activa con :hover (el hover
   del <img> tambien activa el :hover del <li>, es su padre) y con
   :has(img.selected) para el estado de seleccion.
   IMPORTANTE: todo el bloque va acotado con el ancestro
   ".js-qv-product-images" (la lista de miniaturas de la pagina de
   producto normal). El modal de zoom/pantalla completa
   ("#product-modal") reutiliza EXACTAMENTE las mismas clases
   ".thumb-container.js-thumb-container" y "img.thumb" para su propia
   tira de miniaturas, pero esa lista lleva la clase
   ".js-modal-product-images" en vez de ".js-qv-product-images" -> sin
   acotar, este recorte se colaba tambien dentro del modal (pedido
   explicito del usuario: el recorte NO debe afectar a la vista de
   pantalla completa). */
.js-qv-product-images .thumb-container.js-thumb-container:first-child {
  background: #fff !important;
  position: relative;
}
.js-qv-product-images .thumb-container.js-thumb-container:first-child img.thumb {
  clip-path: inset(3px) !important;
}
.js-qv-product-images .thumb-container.js-thumb-container:first-child img.thumb:hover,
.js-qv-product-images .thumb-container.js-thumb-container:first-child img.thumb.selected {
  clip-path: inset(5px 5px 6px 5px) !important;
}
.js-qv-product-images .thumb-container.js-thumb-container:first-child::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-sizing: border-box;
  border-radius: 8px;
}
.js-qv-product-images .thumb-container.js-thumb-container:first-child:hover::after,
.js-qv-product-images .thumb-container.js-thumb-container:first-child:has(img.selected)::after {
  border: 3px solid #376467;
}

/* Vista de pantalla completa/zoom ("#product-modal"): recorte de 13px
   por cada lado en la foto grande, pedido explicito del usuario,
   mismo "inserto" blanco que en las miniaturas (clip-path + fondo
   blanco en el contenedor para que el recorte se vea blanco solido).
   A diferencia de las miniaturas de la pagina normal, esta imagen no
   tiene border nativo de seleccion/hover que proteger (no es
   seleccionable), asi que no hace falta la logica extra del "::after"
   -> clip-path solo, sin acotar hover/selected. */
#product-modal .main-image-container {
  background: #fff !important;
  border-radius: 16px !important;
  overflow: hidden;
}
/* Pedido posterior del usuario: recortar 3px mas por arriba y por abajo
   que a los lados (13px -> 16px arriba/abajo, se deja igual a los
   lados). Por eso pasa de la forma corta "inset(13px round 12px)"
   (mismo valor en los 4 lados) a la forma larga de 4 valores
   (arriba derecha abajo izquierda). */
#product-modal .main-image-container img.js-modal-product-cover {
  clip-path: inset(16px 13px 16px 13px round 12px) !important;
}
/* La vista de zoom se salia del area visible en ventanas de poca
   altura (portatiles, monitor externo mas ancho que alto, ventana del
   navegador sin maximizar) -> pedido explicito del usuario: "necesito
   que se ajuste siempre al tamaño de la ventana sin romper su
   aspecto". Nada de este archivo limitaba antes la ALTURA del modal,
   solo el ancho.
   TRES RONDAS FALLIDAS antes de esta version (cada una confirmada con
   capturas reales, no solo con la teoria -> las dejo documentadas
   porque son tentaciones logicas de volver a probar si esto se toca
   otra vez):
   1) Compensar el "transform:scale(1.3)" nativo de ".modal-content"
      dividiendo el max-height deseado entre 1.3. Parecia funcionar en
      una prueba puntual, pero el propio ".modal-content" TAMBIEN trae
      "width:130%; height:130%" nativos (ademas del transform) -> los
      dos efectos se combinan de forma imprevisible con el resto de
      porcentajes anidados de sus hijos (aprox x1.69 en vez de x1.3
      segun el elemento), asi que el resultado real variaba segun el
      producto/idioma en vez de ser predecible.
   2) Dentro de ese mismo intento, poner "display:flex;
      align-items:center; justify-content:center" en
      ".main-image-container" para centrar la imagen SI reducia el
      "cuadro" de la imagen, pero ".figure > .shipping-overlay" (el
      sello de "envio desde España / X dias a [pais]" superpuesto,
      distinto segun el idioma) es "position:absolute" y esperaba que
      la imagen llenara su contenedor de borde a borde -> con la
      imagen mas pequeña y centrada dentro de un contenedor que NO se
      encogia a su vez, el sello quedaba flotando en un sitio
      equivocado (reportado por el usuario: "tu ajuste esta afectando
      a la posicion de las imagenes que tengo superpuestas... en los
      otros idiomas").
   3) Anular solo el transform ("transform:none") sin revisar el resto
      evitaba esos problemas de raiz, pero dejaba activa la regla
      nativa "#product-modal .modal-content .modal-body{margin-left:
      -35%}" (el mismo mecanismo de "hacerlo mas grande", pensado para
      compensar el propio width:130%) -> con mi ancho normal (100%,
      sin el 130% nativo) ese margen negativo del 35% ya no compensaba
      nada, solo desplazaba toda la imagen hacia la izquierda dentro
      de su propio contenedor (reportado por el usuario: "la imagen
      principal sale movida a la izquierda").
   SOLUCION DEFINITIVA: neutralizar TODO el mecanismo nativo de golpe
   (transform, width/height:130% Y el margin-left:-35% del modal-body)
   en vez de ir compensando cada pieza suelta, y fijar el tamaño maximo
   directamente en "max-width"/"max-height" con numeros normales (sin
   porcentajes por encima de 100%, sin transform) -> asi el
   comportamiento es predecible en cualquier resolucion y no depende
   de que varias reglas nativas fragiles sigan encajando entre si. */
#product-modal .modal-dialog {
  max-width: 1500px !important;
  width: calc(100% - 40px) !important;
  max-height: 90vh !important;
  margin: 5vh auto !important;
}
#product-modal .modal-content {
  transform: none !important;
  width: 100% !important;
  height: auto !important;
  max-height: 90vh !important;
  overflow: hidden !important;
  background: #fff !important;
}
/* Sin esto, el fondo blanco solo lo pone ".main-image-container" (mas
   abajo) -> la franja de ".modal-content" donde viven las miniaturas
   quedaba TRANSPARENTE, dejando ver el contenido de la pagina de detras
   a traves del fondo oscuro semitransparente del modal (".modal-backdrop").
   Aunque por posicion/tamaño las miniaturas SI estaban dentro del
   recuadro del modal, visualmente parecian una columna suelta, flotando
   fuera de el, "cortada" del resto -> justo lo reportado por el usuario
   ("el contenedor de miniaturas laterales sale cortado por la derecha").
   Con el fondo blanco en todo ".modal-content" toda la caja queda de
   una sola pieza, sea cual sea el ancho que ocupen las miniaturas. */
#product-modal .modal-content .modal-body {
  width: 100% !important;
  max-height: 90vh !important;
  margin-left: 0 !important;
  display: flex !important;
}
#product-modal .main-image-container {
  max-height: 90vh !important;
}
#product-modal .main-image-container img.js-modal-product-cover {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: calc(90vh - 40px) !important;
  object-fit: contain !important;
}
/* Con "max-width:900px" el zoom se veia casi del mismo tamaño que la
   foto normal de la ficha de producto, perdiendo el sentido de ser un
   "zoom" (reportado por el usuario). Subido a 1500px para que en
   pantallas grandes la foto crezca de verdad; en pantallas mas
   pequeñas sigue acotado por "calc(100% - 40px)" arriba y por
   "max-height" en la imagen, asi que nunca se desborda.
   Efecto secundario de subir el ancho: al ser mas ancho que alto en
   la mayoria de casos (la altura manda por el max-height de la
   imagen), quedaba un hueco vacio a la derecha de la foto en vez de
   quedar centrada -> reportado por el usuario en un caso anterior
   como "la imagen sale movida a la izquierda", mismo sintoma que
   reaparece aqui con otra causa distinta (esta vez no es el
   margin-left:-35% nativo, es que "figure" ocupa el 100% del ancho
   del contenedor aunque la imagen de dentro sea mas estrecha).
   "text-align:center" en el contenedor NO bastaba (figure ya ocupa
   todo el ancho disponible, no hay "texto" que centrar dentro de un
   bloque que ya es tan ancho como su padre). Se fuerza a "figure" a
   encogerse a su contenido real ("width:fit-content") y despues se
   centra ese bloque ya encogido con margenes automaticos - asi la
   imagen (y el sello superpuesto, que sigue pegado a "figure") queda
   centrada sea cual sea la relacion ancho/alto final. */
#product-modal .main-image-container figure {
  width: fit-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#product-modal .thumbnails {
  max-height: 90vh !important;
  overflow-y: auto !important;
}
/* Bug nativo latente, expuesto al ampliar el modal a 1500px: cada
   miniatura es un <li class="thumb-container"> nativo con
   "display:inline" que envuelve un ".thumb-wrapper" (picture) con
   "display:inline-block !important" -> se comportan como texto dentro
   de su <ul>, en vez de apilarse en columna. Con el modal estrecho
   (ancho anterior) solo cabia una miniatura por fila y el bug no se
   notaba; al ensanchar el modal para el zoom (ver mas arriba) empezo
   a caber mas de una por fila, provocando un zigzag/escalonado
   reportado por el usuario ("salen desalineadas las miniaturas
   laterales en resoluciones altas"). Se fuerza cada <li> a ocupar
   toda la fila disponible para que siempre quede en columna. */
#product-modal .thumbnails li.thumb-container {
  display: block !important;
  width: 100% !important;
}
/* Con el fix anterior (li a "width:100%") segui viendo las miniaturas
   recortadas por la derecha ("sigo viendo cortadas las miniaturas de
   la derecha", reportado por el usuario tras confirmar que el fondo
   blanco ya envolvia bien todo el contenedor). Causa real, encontrada
   midiendo "getBoundingClientRect()" de cada nivel:
   1) El <ul class="product-images"> nativo trae "margin-left: 40px"
      de fabrica (probablemente pensado para dejar hueco a una flecha
      "prev" en otro contexto) -> le come 40px de ancho utilizable al
      contenedor de miniaturas sin que se vea a simple vista.
   2) ".thumb-wrapper" (el <picture>) tiene un ancho FIJO nativo de
      ~148px (viene del atributo width="148" del <img> de la miniatura).
      Al quedar el <li> mas estrecho que esos 148px (por el 40px
      "robado" en el punto 1, y ademas porque ".thumbnails" es un
      elemento flex que se encoge para repartir sitio con la imagen
      grande), el <picture> se queda mas ancho que su <li> padre.
      Como ".thumbnails" tiene "overflow-y:auto" (ver regla de arriba),
      el navegador activa tambien "overflow-x:auto" automáticamente
      (asi funciona la propiedad "overflow" cuando solo se fija un eje)
      -> el trozo de miniatura que sobresale por la derecha se recorta
      en vez de verse completo.
   Arreglo: 1) quitar el margen nativo del <ul>, 2) evitar que
   ".thumbnails" se encoja por debajo del ancho real de una miniatura
   (148px) fijando "flex-shrink:0" con un "min-width" ligeramente mayor
   -> asi nunca le falta sitio y nunca hace falta recortar nada; el
   que cede espacio si hace falta es la imagen grande (que ya tiene su
   propio limite en "max-height", nunca se queda sin sitio). */
#product-modal .thumbnails {
  flex: 0 0 auto !important;
  min-width: 172px !important;
  padding: 20px 0 12px !important;
}
/* Padding-top subido de 12px a 20px: el usuario seguia viendo el
   recuadro verde de la PRIMERA miniatura rozando/cortandose un poco
   por arriba pese al padding anterior -> mas aire arriba (el abajo se
   deja igual, 12px, ya de sobra ahi).
   Se probo subirlo mas (32px) pero el usuario prefirio volver a 20px
   ("se veia mejor") -> se deja en 20px. */
/* Pedido explicito del usuario tras seguir viendo el recuadro verde
   cortado "a veces": bajar todas las miniaturas un poco y separarlas
   entre si (no solo dar aire arriba/abajo del contenedor, que ya
   estaba). Con las miniaturas pegadas unas a otras, la ampliacion
   nativa del 5% en hover (".thumb-wrapper:hover", ver mas abajo) hace
   que la miniatura sobre la que pasa el raton invada visualmente el
   hueco de la vecina, dando sensacion de recorte/solape aunque
   tecnicamente nada se recortara; con una separacion real entre cada
   miniatura, esa ampliacion tiene sitio de sobra sin tocar a la de al
   lado. El sello superpuesto (".shipping-overlay-thumb") esta
   posicionado en absoluto DENTRO de cada ".thumb-wrapper" (su propio
   contenedor, no el <li>), asi que este margen entre <li> no lo mueve
   -> comprobado con getBoundingClientRect() comparando su posicion
   relativa a su propio wrapper antes/despues, identica. */
#product-modal .thumbnails li.thumb-container {
  margin-bottom: 10px !important;
}
#product-modal .thumbnails li.thumb-container:last-child {
  margin-bottom: 0 !important;
}
#product-modal .thumbnails ul.product-images {
  margin-left: 0 !important;
}
/* Reportado tras el arreglo anterior: "tiene cortado el borde verde
   superior cuando esta seleccionado" y "en la vista hover ampliada el
   cuadro verde se sale fuera del area de visualizacion". Medido con
   getBoundingClientRect(): la PRIMERA miniatura queda pegada al borde
   superior de ".thumbnails" (0px de margen), y ese contenedor tiene
   "overflow-y:auto" (ver regla de mas arriba) -> por especificacion
   CSS, fijar solo "overflow-y" convierte tambien "overflow-x" en
   "auto" automaticamente, así que TODO lo que se pinte fuera de la
   caja del contenedor se recorta, en cualquier eje.
   Dos cosas se pintan fuera de esa caja sin sumar a su tamaño de
   layout (por eso no se veian en las medidas anteriores):
   1) El "outline" verde de seleccion/hover (3px, ver mas abajo) -> un
      outline NUNCA afecta al box model/getBoundingClientRect, solo se
      pinta por fuera, y como no habia ni un pixel de margen arriba,
      se recortaba el 100% de su mitad superior.
   2) Ademas, recien descubierto: el propio tema trae un
      "transform:scale(1.05)" NATIVO en ".thumb-wrapper:hover" (no
      añadido por nosotros) que amplia la miniatura un 5% al pasar el
      raton -> esa ampliacion crece desde el CENTRO hacia los 4 lados,
      empeorando el recorte superior (y agotando casi todo el margen
      lateral) justo en el momento de hover, que es el "cuadro verde"
      ampliado que el usuario veia salirse del area visible.
   Arreglo: dar aire real alrededor con "padding" en ".thumbnails" (10px
   arriba/abajo) y ensanchar un poco el "min-width" (156px -> 172px,
   ver regla de arriba) para que sobre margen lateral tambien durante el
   5% de ampliacion en hover -> verificado con
   getBoundingClientRect(): con el raton encima (hover) Y con la
   miniatura seleccionada (sin hover) sobran ~3px por encima del
   outline en ambos casos, nunca se recorta.
   (El recorte/"clip-path" de la foto en si -13px, 2px hover, 6px
   seleccionada, ver mas abajo- ya se aplicaba correctamente en todo
   momento; lo que impedia verlo bien en la parte de arriba de la foto
   durante el hover era este mismo recorte del contenedor, no un fallo
   del propio clip-path). */
/* Primera miniatura de esa misma vista de zoom: 4px por cada lado,
   pedido explicito del usuario, bajando a 2px en hover y subiendo a
   6px en seleccionada (clicada) -> tambien pedido explicito.
   CORRECCION (4 rondas).
   Rondas 1-2: el aro verde se sustituyo primero por un ::after en el
   <li>, luego en ".thumb-wrapper" (el <picture> que envuelve la
   foto) -> mejor, pero el usuario seguia reportando que en hover "no
   se ve el recorte". Causa: ".thumb-wrapper" es un <picture>, que
   por defecto es "display:inline" -> un elemento inline como
   containing block para un ::after con "position:absolute; inset:0"
   da resultados incorrectos (el ::after salia con un tamaño que no
   coincidia con el del propio <picture>), dejando el borde de 3px
   mal posicionado segun el estado.
   Ronda 3: se sustituyo el ::after por un "border" REAL en el propio
   ".thumb-wrapper" (un border no depende de ningun calculo de
   posicionamiento absoluto adicional) -> el recorte y el borde ya
   convivian bien, PERO el usuario reporto una regresion nueva: la
   miniatura se veia MAS GRANDE que las demas. Causa encontrada
   probando con el persist totalmente desactivado (pagina recien
   cargada, cero CSS propio): esto es un BUG NATIVO del propio sitio,
   preexistente, nada que ver con nuestros cambios -> SOLO en esta
   miniatura concreta (":first-child"), el <img> trae de forma nativa
   "display:block" en vez de "display:inline" como sus hermanas, y
   como resultado su altura calculada sale distorsionada
   (148x152px, NO cuadrada) en vez de cuadrada (148x148px, igual que
   el resto). Esa altura de mas (4px) se propaga al contenedor,
   haciendolo mas alto que los demas.
   SOLUCION DEFINITIVA: 1) forzar "height:148px" en el <img> para
   corregir el bug nativo de altura distorsionada (deja el cuadrado
   148x148 correcto). 2) cambiar el "border" real por un "outline"
   (nunca participa en el modelo de caja/layout, a diferencia del
   border, que si suma tamaño en contextos "shrink-to-fit" como este
   aunque se use box-sizing:border-box) -> asi el aro verde no puede
   volver a alterar el tamaño del contenedor, pase lo que pase con el
   resto de reglas. Verificado con ":has(img.selected)" (evitando la
   simulacion de ":hover" del entorno de pruebas, poco fiable aqui) Y
   con captura de pantalla real: tamaño identico a las miniaturas
   vecinas, outline+recorte correctos. */
#product-modal .thumb-container.js-thumb-container:first-child img.thumb {
  height: 148px !important;
}
/* El usuario seguia viendo el aro verde cortado por arriba en hover
   PESE a ir subiendo el padding de ".thumbnails" varias veces (12 ->
   20 -> 32px), incluso cuando las mediciones aqui (getBoundingClientRect)
   mostraban de sobra margen positivo -> el margen que hace falta en la
   practica depende del navegador/pantalla real del usuario, dificil de
   fijar a base de probar numeros de padding a ciegas.
   SOLUCION ROBUSTA (no depende de ningun padding): en vez de que el
   outline "sobresalga" hacia fuera del wrapper (donde el contenedor
   con overflow:auto lo puede recortar), se dibuja hacia ADENTRO con
   "outline-offset" NEGATIVO (mismo truco que ya usa el propio tema
   nativo en el resto de miniaturas no-primeras, visto en el CSS de
   produccion: "outline:5px solid ...;outline-offset:-5px"). Con offset
   negativo el aro queda pintado dentro de los limites del propio
   wrapper, nunca fuera de el -> es IMPOSIBLE que ningun contenedor
   ancestro con overflow lo recorte, sea cual sea el padding
   disponible. */
#product-modal .thumb-container.js-thumb-container:first-child .thumb-wrapper {
  display: inline-block !important;
  position: relative;
  background: #fff !important;
  border-radius: 8px !important;
  overflow: hidden;
  outline: 3px solid transparent !important;
  outline-offset: -3px !important;
}
#product-modal .thumb-container.js-thumb-container:first-child .thumb-wrapper:hover,
#product-modal .thumb-container.js-thumb-container:first-child .thumb-wrapper:has(img.selected) {
  outline-color: #376467 !important;
}
/* +2px en los 3 estados (4->6, 2->4, 6->8), pedido explicito del
   usuario despues de comprobar que el recorte ya se veia bien: "un par
   de pixeles mas de recorte a todos los lados". Se mantiene la misma
   diferencia relativa entre estados (hover mas fino, seleccionada mas
   gruesa) que ya estaba pedida antes. */
#product-modal .thumb-container.js-thumb-container:first-child img.thumb {
  clip-path: inset(6px) !important;
}
#product-modal .thumb-container.js-thumb-container:first-child img.thumb:hover {
  clip-path: inset(4px) !important;
}
/* Estado seleccionado (clicada, no solo hover): recorte propio, mas
   pronunciado que el de hover -> pedido explicito del usuario,
   separando ambos estados en vez de compartir el mismo valor. */
#product-modal .thumb-container.js-thumb-container:first-child img.thumb.selected {
  clip-path: inset(8px) !important;
}
/* Reportado tras el arreglo del padding de arriba: seguia cortandose
   por arriba/abajo en hover, y al pasar el raton por esta miniatura
   estando OTRA seleccionada, el recorte de la foto "desaparecia".
   Causa encontrada descargando el CSS COMPILADO real de produccion
   (no este archivo) y buscando el color de marca "#376467": hay un
   bloque de reglas SUELTO, de una version MUY anterior de este mismo
   componente (antes de pasar al diseño actual de "outline en el
   thumb-wrapper"), que sigue pegado en "CSS personalizado" sin haberse
   sustituido nunca (parece que en algun momento se pego contenido
   nuevo ENCIMA del viejo en vez de reemplazarlo entero):
     img.js-modal-thumb.selected { outline:5px solid #376467; outline-offset:-5px; border:none; }
     img.js-modal-thumb:hover { border:2px solid #376467; box-sizing:border-box; }
     img.thumb.js-modal-thumb { clip-path:inset(1px 0 1px 0); }
     img.thumb.js-modal-thumb { display:block; width:148px; height:152px; margin-top:-2px; }
   Ese "border:2px solid" real en hover se pinta ENCIMA de la foto,
   tapando visualmente el hueco blanco del clip-path (de ahi que
   pareciera que "no se aplica el recorte" en hover). Y ese
   "margin-top:-2px" desplaza la miniatura hacia arriba, comiendose el
   padding que se le dio a ".thumbnails" mas arriba (de ahi que
   siguiera cortandose por arriba pese a ese padding).
   Como ninguna de esas reglas viejas lleva "!important", cualquier
   valor nuestro con "!important" en el mismo elemento gana siempre,
   sin depender de la especificidad ni del orden -> basta con anular
   aqui mismo "outline", "border" y "margin-top" en el <img> (nuestro
   propio indicador de seleccion/hover vive en el "outline" del
   ".thumb-wrapper", nunca en el propio <img>, asi que no hace falta
   ningun outline/border ahi).
   OJO: esto es un parche defensivo, no la solucion real -> lo
   correcto es sustituir el contenido COMPLETO de "CSS personalizado"
   por el de este archivo (borrar todo lo que hubiera antes y pegar de
   cero), no pegar encima. */
#product-modal .thumb-container.js-thumb-container:first-child img.thumb {
  outline: none !important;
  border: none !important;
  margin-top: 0 !important;
}

/* Bug nativo del tema (no introducido por nada de este archivo,
   confirmado inspeccionando el CSS compilado de produccion): por
   debajo de 766px hay una regla nativa
   ".product-cover,.product-cover img,.thumb-container,.thumb-container
   img{width:100%!important;...}" pensada para que la FOTO grande
   ocupe todo el ancho en movil, pero que por error mete tambien a
   ".thumb-container" (cada miniatura, normalmente una cajita de
   98x98px) en el mismo saco -> cada miniatura pasaba a medir el
   ancho COMPLETO de la pantalla, mostrando una sola gigante en vez de
   la fila de varias pequeñas (reportado por el usuario: "las
   miniaturas... estan rotas... version movil"). Se resetea solo el
   contenedor ("li.thumb-container") a su tamaño natural
   (shrink-to-fit del div interno de 98x98 que ya trae el propio
   tema); OJO, no tocar "thumb-container img" aqui, ese SI necesita
   seguir en width:100% (pero relativo a su propia cajita de 98px, no
   a la pantalla). */
@media (max-width: 766px) {
  /* "html body" de mas (no solo ".thumb-container") por el mismo motivo
     que en ".tabs"/logo del checkout/breadcrumb: un simple
     ".thumb-container { width: auto !important }" empata en
     especificidad con la regla nativa de arriba, y el resultado de ese
     empate depende de en que orden quede cada una en el CSS compilado
     final -> se sube la especificidad para ganar siempre. */
  html body .thumb-container {
    width: auto !important;
    display: inline-block !important;
  }
}

/* .tabs usa un margen negativo para salirse de su columna y ocupar todo
   el ancho. Su separacion base (margin-top) queda con un valor prudente
   aqui; como la altura real de la imagen varia por producto (aspecto,
   numero de fotos) y ahora la imagen ocupa todo el ancho de su columna
   (mas abajo: #content.page-content sin max-width), un numero fijo no
   es fiable para todos los productos. El ajuste fino final que garantiza
   que nunca se solape, sea cual sea el producto o el ancho de ventana,
   se hace por JS al final del bookmarklet (mide la altura real de
   .images-container y sube el margen de .tabs si hace falta). */
.tabs { margin-top: 60px !important; }
/* alignTabs() (custom.js) mide el ancho real de ".product-container" y
   fija el width/margin-left/margin-top de ".tabs" por JS -> a
   diferencia del breadcrumb/accesorios (offset fijo por padding), este
   valor SI depende legitimamente del contenido (titulo mas largo o mas
   corto reparte distinto el flex de las dos columnas), no hay ninguna
   constante CSS que lo sustituya. Confirmado en una traza real: eso
   causaba un salto de layout real (~0.05 de CLS) porque el usuario ve
   ".tabs" pintado con el ancho/margen NATIVO (roto, ver comentario mas
   abajo del truco "width:200%") un instante, y luego "saltar" al valor
   correcto en cuanto corre el JS.
   Mitigacion (no hay fix en CSS puro posible aqui): mantenerlo
   invisible hasta que alignTabs() calcule su tamaño real y le añada la
   clase "itw-tabs-ready" (ver custom.js) -> el usuario nunca ve la
   posicion incorrecta, así que no cuenta como salto de layout. Sigue
   ocupando su sitio en el documento (solo "visibility", no "display")
   para no arrastrar TODO lo de abajo cuando aparece. */
.tabs:not(.itw-tabs-ready) {
  visibility: hidden !important;
}
/* El tema le pone a .tabs un borde izquierdo verde nativo (tipo cita/
   blockquote) que no pega con la paleta del sitio y no aporta nada.
   Un simple ".tabs { border-left: none !important; }" no bastaba en
   produccion (aunque en las pruebas si funcionaba): en el CSS final
   compilado por PrestaShop, la regla nativa responsable
   (".tabs{border-left:5px solid #007b5e!important;...}") queda
   colocada DESPUES de la nuestra pese a que "CSS personalizado" deberia
   ir al final -> con la MISMA especificidad (una sola clase, ambas
   !important) gana la que viene despues en el orden del archivo, es
   decir la nativa. Se sube la especificidad con el prefijo "html body"
   (selector de elemento + elemento) para ganar el empate sin depender
   de en que posicion exacta del bundle final quede cada una. */
html body .tabs { border-left: none !important; }
/* Sin margen real entre el final de las pestañas (descripcion/opiniones)
   y la seccion "también podría interesarle" — quedaban pegadas. */
.product-accessories { margin-top: 40px !important; }
/* Alineacion de ".product-accessories" con .images-container, en CSS
   puro (sustituye a la funcion JS alignAccessories() de custom.js, por
   el MISMO motivo que el fix de nav.breadcrumb de mas arriba: medir y
   fijar un margin-left inline DESPUES del primer pintado es, por
   diseño, un salto de layout visible siempre. Confirmado en una traza
   real del usuario: 0.11-0.12 de CLS repetido en escritorio, en
   productos con accesorios configurados -> por eso no salia en las
   pruebas anteriores, que usaban productos sin accesorios.
   En movil no hace falta nada: el padding nativo ya deja
   .product-accessories alineado con .images-container sin corregir
   (medido: 0 de diferencia). Solo en escritorio (>=768px) hace falta
   el margen, y es un valor fijo (40px), no dependiente del producto. */
@media (min-width: 768px) {
  body#product .product-accessories {
    margin-left: 40px !important;
  }
}

/* La TARJETA de producto quedaba encogida a ~450px de ancho fijo por un
   max-width nativo del tema en #content.page-content, dejando un hueco
   vacio grande a los lados (mas visible a la izquierda) aunque la
   columna disponible fuera mucho mas ancha. Se quita para que la tarjeta
   aproveche todo el ancho de su columna. No afecta a la columna derecha
   (blog/reseñas) porque esta regla es especifica de la columna de imagen.
   OJO: solo se ensancha la TARJETA/fondo blanco - la foto en si conserva
   su tamaño original. La imagen lleva la clase nativa "img-fluid" de
   Bootstrap (max-width:100%), que por si sola ya la hace crecer para
   llenar el contenedor disponible -> hace falta un max-width propio en
   .product-cover para devolverla a su tamaño previo, centrada dentro de
   la tarjeta ahora mas ancha. #content.page-content se reutiliza en
   otras paginas de la cuenta (Mi cuenta, Direcciones...) con su propio
   ancho/centrado -> se ancla a "#product" (id de <body> de la ficha de
   producto) para no romper esas otras paginas. */
#product #content.page-content {
  max-width: none !important;
  width: 100% !important;
  /* Nativo trae padding-left/right:20px en #content, pero SOLO la foto
     vive dentro de #content (el titulo/precio esta en la columna
     hermana, fuera de #content) -> con el layout apilado a menos de
     767px la foto quedaba 20px mas a la derecha que el titulo/breadcrumb,
     una desalineacion clara entre elementos que deberian compartir el
     mismo borde izquierdo. */
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Se limita el ancho de la tarjeta (antes 100% de la columna, ~526px)
   a un maximo que abraza la foto (420px + padding) sin dejar franjas de
   blanco vacio a los lados. Sin margin:auto a proposito: al ser block
   se queda pegada al mismo borde izquierdo que ya tenia, en vez de
   recentrarse en la columna. */
.images-container {
  width: 100% !important;
  max-width: 480px !important;
  display: block !important;
  box-sizing: border-box !important;
  text-align: center;
}
.product-cover {
  max-width: 420px !important;
  margin: 0 auto !important;
  display: block !important;
}
/* Las flechas < > del carrusel de miniaturas viven en un hermano aparte
   (.scroll-box-arrows), no dentro de .images-container. Se le da el
   mismo max-width para que sus bordes coincidan con los de la tarjeta.
   OJO: .scroll-box-arrows trae position:static del tema, así que sus
   iconos (position:absolute; right:0/left:0) NO se posicionan contra
   ESTE contenedor sino contra el ancestro posicionado mas cercano, que
   resulta ser #content.page-content (mucho mas ancho) -> la flecha
   derecha aparecia lejísimos del borde. Al declarar aqui position:
   relative, .scroll-box-arrows pasa a ser el contenedor de referencia
   de sus propios iconos y ambos quedan pegados a sus bordes reales. */
.scroll-box-arrows {
  max-width: 480px !important;
  position: relative !important;
}
/* Achicar .images-container dejo la COLUMNA (.col-md-6, grid de Bootstrap
   al 50%/50%) sin achicarse con ella: son dos cosas independientes. El
   resultado era un hueco muerto enorme entre la tarjeta y la columna de
   precio/titulo, porque esta ultima seguia arrancando en el 50% fijo del
   row sin importar cuanto contenido ocupara la primera.
   Se pasa la fila (.product-container) a flex y la columna de la imagen
   a flex:0 0 auto/width:auto, para que se achique al ancho real de su
   contenido (la tarjeta) y la columna de precio se acomode justo despues.
   flex-wrap:wrap conserva el apilado en movil: por debajo de md Bootstrap
   ya pone width:100% en .col-md-6, así que cada columna sigue ocupando
   toda la fila y pasa a la siguiente linea igual que con el grid nativo. */
.product-container {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 32px !important; /* separa las dos columnas en escritorio Y da
    aire entre la tarjeta y el titulo cuando el titulo baja debajo (antes
    0px de margen real en ese caso: el titulo arrancaba pegado al borde
    inferior de la tarjeta). */
}
.product-container > .col-md-6:first-child {
  /* Ancho FIJO (480px, el mismo max-width que ya tiene .images-container
     un poco mas abajo), no "flex:0 0 auto/width:auto" (contenido) como
     antes. Con ancho basado en contenido, el navegador necesita conocer
     el tamaño REAL de la imagen para calcular cuanto ocupa la columna
     -> antes de que eso se sepa (imagen aun sin cargar lo suficiente
     para leer sus dimensiones, tipico en un producto SIN cache de
     thumbnail, recien visitado por primera vez) usa un ancho de
     reserva mas pequeño y salta al definitivo en cuanto la imagen
     resuelve su tamaño. Confirmado con una traza real en un producto
     nunca cargado antes: la columna (y en cascada .images-container,
     .product-cover y la fila de miniaturas) saltaba de ~294px a
     ~420-452px de ancho, uno de los mayores saltos de layout medidos
     en toda la sesion. Con un ancho fijo, la columna nunca depende del
     tamaño de la imagen -> cero salto, sea cual sea la velocidad de
     carga. Esta misma regla YA estaba bien en critical.css
     ("flex:0 0 480px!important;width:480px!important") desde antes;
     aqui solo se replica para que theme.css (activo ahora mismo, con
     el experimento de critical CSS desactivado) tenga el mismo
     comportamiento. */
  flex: 0 0 480px !important;
  width: 480px !important;
  max-width: 100% !important;
}
/* La columna de titulo/precio seguia con su "width:50%" (col-md-6)
   nativo de fabrica incluso cuando ya no cabia al lado de la tarjeta y
   bajaba a su propia fila -> quedaba a MEDIO ancho igual, dejando un
   hueco vacio grande a la derecha en vez de aprovechar el ancho libre
   (reportado entre 767px y 1408px, el rango donde el layout apila).
   flex:1 hace que ocupe el espacio restante junto a la tarjeta cuando
   SI caben ambas en la misma fila, y el 100% de la fila cuando le toca
   ir sola debajo — sin necesidad de fijar un breakpoint a mano. */
.product-container > .col-md-6:not(:first-child) {
  flex: 1 1 320px !important;
  width: auto !important;
  max-width: 100% !important;
  /* BUG: los flex items traen min-width:auto por defecto (no min-width:0),
     lo que significa "nunca me encojas mas alla del ancho minimo de mi
     contenido" — con textos largos (titulo, referencia, etc.) ese minimo
     podia superar el espacio libre junto a la foto, forzando flex-wrap a
     mandar la columna a su propia linea INCLUSO en pantallas anchas donde
     sobraba sitio de sobra (reportado: "ni a pantalla completa se ve el
     titulo a la derecha"). min-width:0 permite encogerse por debajo del
     ancho de su contenido (el texto ya envuelve en varias lineas de
     todas formas), dejando que flex-wrap solo entre en juego cuando de
     verdad no cabe. */
  min-width: 0 !important;
}

/* Boton "Añadir al carrito": en escritorio/tablet se mantiene el texto
   nativo del idioma de la tienda (regla base de mas arriba, sin media
   query); SOLO en movil pasa a icono-solo (mismo alto que los botones
   +/- de cantidad para que los tres queden alineados en fila) -> aqui
   es donde de verdad falta espacio para el texto junto al selector de
   cantidad. Pedido explicito del usuario: mostrar el texto siempre que
   no choque con nada, exceptuando la version movil. */
@media (max-width: 767px) {
  .product-add-to-cart .add-to-cart {
    padding: 10px 16px !important;
    height: 44px !important;
    box-sizing: border-box !important;
    font-size: 0 !important;
  }
  /* El boton se veia cuadrado en movil en vez de redondo como en
     escritorio (pedido explicito del usuario: "quiero que se vea como en
     la version desktop"). Causa: el tema trae una regla especifica de
     movil, ".product-add-to-cart .btn.btn-primary.add-to-cart" (4
     clases), que fuerza "border-radius:0" pensada para un boton de ancho
     completo tipo barra -> tiene mas especificidad que nuestra regla de
     arriba (2 clases) y ganaba siempre, sin importar el orden. Se iguala
     el selector nativo exacto (mismas 4 clases) y se le añade "html body"
     de mas para no depender de en que orden quede cada una en el CSS
     compilado final (mismo patron ya visto varias veces en esta hoja). */
  html body .product-add-to-cart .btn.btn-primary.add-to-cart {
    border-radius: 999px !important;
  }
  .product-add-to-cart .add-to-cart .material-icons {
    font-size: 20px !important;
    margin: 0 !important;
  }
}

/* Imagenes de articulos del blog (portada del home y sidebar "Últimas
   publicaciones" en fichas de producto) */
.blog-post-image {
  border-radius: 12px !important;
  overflow: hidden;
}

/* =========================================================================
   Widget lateral "Últimas publicaciones del Blog" (#latestBlogPosts) —
   solo aparece en el sidebar de fichas de producto, NO en el home (ahi
   el bloque de blog usa otra estructura sin la clase .blog-post).
   Nativo: h2 con color:black inline, <ul> sin viñetas pero cada item
   separado solo con dos <br> sueltos (sin margen real) y sin ninguna
   tarjeta -> imagen + titulo negro plano pegados al fondo de la pagina,
   inconsistente con el resto del sitio (que ya usa tarjetas blancas
   redondeadas en todos lados: productos, banners, etc). Se convierte
   cada item en una tarjeta igual a las demas del sitio.
   ========================================================================= */
/* El wrapper nativo del modulo (.columns_everblog_wrapper) trae su
   propio fondo blanco CUADRADO con sombra dura, envolviendo a las
   tarjetas redondeadas de abajo -> se veia una tarjeta redonda metida
   dentro de una caja cuadrada, dos "cajas" compitiendo. Se neutraliza
   para que las tarjetas individuales sean el unico elemento visual,
   flotando directo sobre el fondo de la pagina (igual que el banner
   "¿No encuentra su repuesto?" que esta justo arriba en la misma
   columna lateral). */
.columns_everblog_wrapper {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
#latestBlogPosts h2, #latestBlogPosts h2 a {
  color: var(--brand-dark) !important;
  font-size: 1.05em !important;
  letter-spacing: .02em;
}
.latest-blog-posts {
  list-style: none !important;
  padding: 0 !important;
  margin: 16px 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.blog-post {
  background: #fff !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden !important;
}
.blog-post:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px);
}
.blog-post a { display: block !important; color: inherit !important; }
/* El HTML nativo usa <br><br> sueltos tras el <h3> para separar del
   siguiente item en vez de margin -> se ocultan, el gap del <ul> de
   arriba ya se encarga del espaciado real entre tarjetas. */
.blog-post a br { display: none !important; }
/* La imagen ya trae su propio border-radius:12px (regla de arriba); aqui
   se anula DENTRO de la tarjeta para que no compita con el radius:16px
   del propio .blog-post (que ya la recorta via overflow:hidden) -> sin
   esto quedaba un filo blanco visible en las esquinas superiores. */
.blog-post .blog-post-image { border-radius: 0 !important; margin: 0 !important; }
.blog-post h3 {
  color: #1d1d1d !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: normal;
  margin: 10px 14px 12px !important;
  line-height: 1.35;
}

/* =========================================================================
   Formulario "de registro" — inputs, radios/checkboxes y el aviso
   "Importante" (empresa/autonomo). Aparece en DOS lugares con DOS
   contenedores distintos que comparten el mismo formulario interno
   (#customer-form): la pagina standalone /registro (envuelta en
   <section class="register-form">) y el paso 1 "Datos personales" del
   checkout como invitado (envuelta en #checkout-guest-form, SIN la
   clase .register-form). :is() cubre ambos casos con una sola regla.
   #content.page-content ya recibe radius+shadow via ".card, .block" de
   arriba (el tema lo marca con esas clases nativas) asi que la TARJETA
   exterior ya se veia bien; lo anticuado eran los controles de adentro:
   inputs cuadrados grises lisos, radios/checkboxes del navegador sin
   estilo y un aviso amarillo generico de Bootstrap que no pega con la
   paleta del sitio. */
:is(.register-form, #customer-form, #checkout-guest-form, .login-form, #login-form, #checkout-login-form) input.form-control {
  border-radius: 12px !important;
  border: 1.5px solid #e2e6e6 !important;
  padding: 10px 14px !important;
  box-shadow: none !important;
}
:is(.register-form, #customer-form, #checkout-guest-form, .login-form, #login-form, #checkout-login-form) input.form-control:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px rgba(55, 100, 103, .12) !important;
  outline: none !important;
}
:is(.register-form, #customer-form, #checkout-guest-form, .login-form, #login-form, #checkout-login-form) .form-control-label {
  color: #384848 !important;
  font-weight: 600 !important;
}
:is(.register-form, #customer-form, #checkout-guest-form, .login-form, #login-form, #checkout-login-form) .form-control-comment {
  color: #5a6a6a !important;
  font-size: 12px !important;
}
:is(.register-form, #customer-form, #checkout-guest-form, .login-form, #login-form, #checkout-login-form) .form-group {
  margin-bottom: 18px !important;
}
/* El tema dibuja radios/checkboxes "falsos": esconde el input nativo
   (radio via opacity:0, checkbox via display:none - mecanismos distintos,
   hay que cubrir ambos) y muestra un <span> a continuacion con su propio
   dibujo. Se restaura el input NATIVO (mas simple y prolijo que pelear
   con el sprite/pseudo-elemento del span) y se colorea con accent-color,
   soportado en navegadores modernos; el span "falso" se oculta para que
   no quede duplicado al lado del control nativo ya visible. */
:is(.register-form, #customer-form, #checkout-guest-form, .login-form, #login-form, #checkout-login-form) input[type="radio"],
:is(.register-form, #customer-form, #checkout-guest-form, .login-form, #login-form, #checkout-login-form) input[type="checkbox"] {
  display: inline-block !important;
  opacity: 1 !important;
  position: static !important;
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--brand) !important;
  cursor: pointer;
  margin-right: 6px !important;
  vertical-align: middle;
}
:is(.register-form, #customer-form, #checkout-guest-form, .login-form, #login-form, #checkout-login-form) .custom-radio span,
:is(.register-form, #customer-form, #checkout-guest-form, .login-form, #login-form, #checkout-login-form) label > span:has(i.checkbox-checked) {
  display: none !important;
}
/* El span EXTERIOR ".custom-radio" (el que envuelve input + el span
   interior de arriba) tambien trae su propio dibujo de circulo (borde
   gris, fondo blanco, border-radius:50%, 18x18) independiente del span
   interior que ya se oculto. Sin neutralizar esto quedaban DOS circulos
   pegados por cada radio: el de este wrapper + el del input nativo ya
   visible al lado. */
:is(.register-form, #customer-form, #checkout-guest-form, .login-form, #login-form, #checkout-login-form) .custom-radio {
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
}
/* El aviso "Importante: si es usted empresa..." trae sus colores por
   estilo INLINE en el HTML (no por clase), asi que no hay selector de
   clase para engancharse: se apunta al color de fondo especifico del
   inline style para no tocar otros parrafos del formulario. Selector SIN
   el :is() de register/login: en /datos-personales (#identity) este
   parrafo vive fuera de #customer-form (es hermano, dentro de .mx-auto),
   asi que restringir a esos contenedores lo dejaba sin efecto ahi. El
   fragmento de color es especifico de sobra como para no enganchar
   parrafos ajenos. */
p[style*="fff3cd"] {
  background: var(--brand-light) !important;
  border: 1px solid rgba(55, 100, 103, .15) !important;
  color: var(--brand-dark) !important;
  border-radius: var(--radius-md) !important;
  padding: 12px 16px !important;
}

/* Aviso "Descuento especial para profesional aplicado" en la ficha de
   producto (clientes con tarifa profesional): venia en texto morado
   plano y en negrita, chocando con la paleta. Se engancha por el
   estilo inline (color: purple), NO por el texto: el texto lo genera
   el modulo de precios y cambia segun el idioma de la tienda (visto en
   aleman: "SPEZIELLER RABATT...", en espanol: "DESCUENTO ESPECIAL..."),
   pero el estilo inline que el modulo aplica es siempre el mismo sea
   cual sea el idioma.
   En el HTML el aviso queda ANTES que el precio (mismo <div
   class="current-price">), lo que lo ponia arriba/al lado del numero.
   Para que se vea DEBAJO del precio sin tocar el HTML, se pasa el
   contenedor a flex-column y se reordena con `order`. Color suave
   (mint/--brand-dark, igual que el resto de badges secundarios del
   sitio) en vez del acento naranja: un badge tan fuerte al lado del
   precio competia visualmente con el precio mismo. */
.product-prices .current-price {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}
.product-prices .current-price span[itemprop="price"] {
  order: 1 !important;
}
/* Pastel calido (durazno) en vez del --brand-light/mint: ese mint es el
   mismo tono que usan el resto de badges secundarios del sitio (stock,
   ps-ref/ps-cond) y este aviso quedaba demasiado escondido/confundido
   entre ellos. Necesita distinguirse un poco sin ser un color fuerte. */
p[style*="color: purple"] {
  order: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: #fdecd9 !important;
  color: #a15c1f !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  margin: 6px 0 0 !important;
  width: fit-content !important;
}
p[style*="color: purple"]::before {
  content: "\2605" !important;
  font-size: 10px !important;
  color: #d98a3d !important;
}

/* Descripcion corta del producto (id="product-description-short-{id}",
   distinto por cada producto -> selector por prefijo de id). */
[id^="product-description-short-"] {
  background: transparent !important;
}

/* =========================================================================
   "Su cuenta" (/mi-cuenta) — grilla de accesos (Informacion, Direcciones,
   Pedidos, etc). Nativo: 9 celdas planas sin separacion real, icono negro
   generico, sin hover, tipico grid viejo de PrestaShop.

   OJO estructura real (contraintuitiva, verificada en vivo con el DOM):
   #content.page-content > .row > .links > (a | li) x9
   Es decir ".links" es un UNICO div que envuelve los 9 tiles directamente
   como hijos (NO hay un ".links" por tile). ".row" en cambio es generico
   y se reutiliza en header/footer, por eso el selector va anclado a
   "#content.page-content > .row" (hijo directo) para no pescar de rebote
   otras filas de la pagina.
   Uno de los 9 items ("Gestionar datos personales") es un <li> en vez de
   <a> (el modulo GDPR lo arma distinto) -> se cubren ambos tags.

   Se usa CSS GRID (no flexbox) a proposito: con flexbox y flex-grow, un
   item que queda solo en su propia fila se estira para llenar TODA la
   fila -> una tarjeta gigante deforme. Grid con columnas fijas evita eso
   de raiz.
   3 columnas fijas (no auto-fill) a pedido explicito: siempre 3 por
   fila -> con 9 items da exactamente 3 filas completas, todas las
   tarjetas del mismo tamaño. max-width + margin:auto centra la grilla
   en la pagina en vez de que se estire de punta a punta. */
#content.page-content > .row > .links {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
#content.page-content > .row > .links > a,
#content.page-content > .row > .links > li {
  width: auto !important;
  max-width: none !important;
  float: none !important;
  background: #fff !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-sm) !important;
  border: none !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  list-style: none;
  transition: box-shadow .25s ease, transform .25s ease;
}
/* Barra de acento que "desliza" en hover — oculta por defecto via
   scaleX(0), sin necesidad de display:none/block (permite animarla). */
#content.page-content > .row > .links > a::before,
#content.page-content > .row > .links > li::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
#content.page-content > .row > .links > a:hover,
#content.page-content > .row > .links > li:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-4px);
}
#content.page-content > .row > .links > a:hover::before,
#content.page-content > .row > .links > li:hover::before {
  transform: scaleX(1);
}
#content.page-content .link-item {
  padding: 32px 20px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  font-weight: 700 !important;
  color: #384848 !important;
  font-size: 13.5px !important;
  letter-spacing: .03em;
}
/* El icono es un glifo real de "Material Icons" (caracter Unicode de
   zona privada, no un simple <i> vacio) -> alcanza con recolorearlo y
   darle un badge circular; no hace falta reemplazar el mecanismo.
   Badge solido en color de marca SIEMPRE visible (no solo al hover) a
   pedido explicito: el look de hover gustó mas que el estado por
   defecto anterior (circulo tenue), asi que ese pasa a ser el estado
   base; el hover ahora suma enfasis extra (mas oscuro + un poco mas
   grande + halo) en vez de ser el unico momento con color. */
#content.page-content .link-item .material-icons {
  color: #fff !important;
  font-size: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  background: var(--brand) !important;
  border-radius: 50% !important;
  margin: 0 auto 14px !important;
  flex: none !important;
  transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
#content.page-content > .row > .links > a:hover .material-icons,
#content.page-content > .row > .links > li:hover .material-icons {
  background: var(--brand-dark) !important;
  color: #fff !important;
  transform: scale(1.1);
  box-shadow: 0 0 0 6px var(--brand-light);
}

/* 3 de los 9 iconos ("Mis datos personales", "Gestionar datos
   personales", "Valorar mis pedidos") NUNCA cargaron el glifo real: el
   propio tema (sin ningun CSS nuestro de por medio, verificado con el
   estilo desactivado) muestra el texto literal "account_box"/"lock"/
   "grade" en vez del icono -> a la fuente "Material Icons" que usa el
   sitio le faltan esos 3 glifos especificos (no es un problema de
   ligadura: se probaron ~15 codepoints estandar de esa zona y TODOS
   salen como caja vacia/tofu, incluso cargando la fuente oficial
   completa de Google Fonts aparte -> el navegador no llegaba a usarla,
   probablemente bloqueado por la politica del sitio). Como consecuencia
   esos 3 se veian con tamaños/formas distintas al resto (texto en vez
   de icono).
   Fix: "Mis datos personales" reutiliza el MISMO glifo ya confirmado
   funcionando en "Información" (0xE853, persona) - incluso tiene
   sentido semantico (ambos son datos de la cuenta). Para "Gestionar..."
   y "Valorar..." no hay un glifo ya-funcionando semanticamente cercano
   en el subset del sitio, asi que se usan simbolos Unicode planos
   (⚙ engranaje / ★ estrella) que no dependen de ninguna fuente
   especial. position:absolute + translate(-50%,-50%) centra el simbolo
   de forma exacta dentro del badge (la alineacion flex del contenedor,
   pensada para el <i> con texto invisible font-size:0, no alcanza a
   centrar el ::before de forma fiable). */
#psgdpr-link .material-icons,
#gdpr-link .material-icons,
#account-reviews-link .material-icons {
  font-size: 0 !important;
}
#psgdpr-link .material-icons::before {
  content: "\e853";
  font-family: "Material Icons";
  font-size: 28px;
}
#gdpr-link .material-icons {
  position: relative !important;
}
#gdpr-link .material-icons::before {
  content: "\2699";
  font-family: initial;
  font-size: 34px;
  font-weight: 700;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  line-height: 1 !important;
}
#account-reviews-link .material-icons {
  position: relative !important;
}
#account-reviews-link .material-icons::before {
  content: "\2605";
  font-family: initial;
  font-size: 32px;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  line-height: 1 !important;
}

/* =========================================================================
   "Sus direcciones" (/direcciones) — nativo: direcciones como texto
   plano sin tarjeta, "Actualizar"/"Eliminar" como simples links sueltos,
   y un hueco vacio raro entre la direccion y esos links.

   El hueco resulto ser DOS causas apiladas, ninguna obvia sin inspeccionar
   el DOM en vivo:
   1. #content.page-content trae como hijo un <div class="clearfix"></div>
      VACIO (resabio del layout flotante original). Al pasar el padre a
      flex, ese div vacio se estira via align-items:stretch a la misma
      altura que la tarjeta de al lado (su unico hermano con contenido) y
      esa altura extra se filtraba hacia abajo por flex:1 en
      .address-body. Se oculta + align-items:flex-start en el padre.
   2. .address-body traia un margin-bottom:30px nativo (aparte de su
      padding) que index sumaba un hueco real antes de .address-footer
      (los margenes NO colapsan entre flex items en una columna). Un
      simple margin:0 lo resuelve.
   Tambien #notifications (aside vacio para mensajes flash, primer hijo)
   sin ancho fijo quedaba absorbiendo espacio como item flex y empujaba
   la tarjeta hacia la derecha -> se le fuerza flex-basis:100% para que
   ocupe su propia fila (como banner de ancho completo si algun dia
   muestra contenido) y no compita por espacio con las tarjetas.
   #content.page-content se reutiliza en otras paginas de la cuenta
   (Mi cuenta, ficha de producto...) con su propio layout -> se ancla
   a "#addresses" (id de <body> de esta pagina especifica, el listado
   /direcciones) para no pisar esas otras reglas. */
#addresses #content.page-content {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 18px !important;
}
#addresses #content.page-content > #notifications {
  flex-basis: 100% !important;
  width: 100% !important;
}
#addresses #content.page-content > .col-lg-4 {
  width: auto !important;
  max-width: 340px !important;
  flex: 1 1 300px !important;
  padding: 0 !important;
}
#addresses #content.page-content > .clearfix {
  display: none !important;
}
article.address {
  background: #fff !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden;
  height: auto;
  display: flex;
  flex-direction: column;
  transition: box-shadow .25s ease, transform .25s ease;
}
article.address:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-3px);
}
.address-body {
  padding: 22px 22px 18px !important;
  margin: 0 !important;
  flex: 1;
}
.address-body h4 {
  color: var(--brand-dark) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  margin-bottom: 10px !important;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* <address> trae font-style:italic + margin-block de 1em por defecto
   del user-agent -> se resetean ambos junto con el resto de la
   tipografia. */
.address-body address {
  font-style: normal !important;
  color: #4a5757 !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
.address-footer {
  display: flex !important;
  border-top: 1px solid rgba(0, 0, 0, .06) !important;
  background: var(--brand-light) !important;
}
.address-footer a {
  flex: 1;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
  padding: 12px 8px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--brand-dark) !important;
  cursor: pointer;
}
.address-footer a:hover {
  background: rgba(255, 255, 255, .6) !important;
}
.address-footer a[data-link-action="delete-address"] {
  color: #b5493f !important;
}
.addresses-footer {
  width: 100%;
  margin-top: 4px;
}
.addresses-footer a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;
  background: #fff !important;
  border: 2px dashed rgba(55, 100, 103, .35) !important;
  border-radius: 999px !important;
  padding: 10px 20px !important;
  font-weight: 700 !important;
  color: var(--brand-dark) !important;
}
.addresses-footer a:hover {
  background: var(--brand-light) !important;
  border-color: var(--brand) !important;
}

/* =========================================================================
   Formulario de direccion (/direccion, "Actualizar su direccion" /
   "Crear nueva direccion") — mismo patron input.form-control/.form-group
   que el registro/login (ver seccion mas arriba), pero en un contenedor
   distinto (.address-form) no cubierto por ese :is() -> reglas propias.
   A diferencia del registro, aca TAMBIEN hay <select class="form-control">
   (Pais/Provincia), asi que se cubre input Y select en la misma regla.
   #content en esta pagina especifica no trae clase "card" nativa (a
   diferencia de otras paginas de cuenta) pero SI tiene fondo blanco +
   padding propios -> solo se le suman esquinas redondeadas y sombra para
   que combine con el resto del sitio. Se ancla a "#address #content"
   (id de <body> especifico de esta pagina) para no afectar el #content
   de otras paginas donde ya tiene otro tratamiento (ej. la ficha de
   producto). */
#address #content.page-content {
  border-radius: 18px !important;
  box-shadow: var(--shadow-sm) !important;
}
.address-form input.form-control,
.address-form select.form-control {
  border-radius: 10px !important;
  border: 1.5px solid #e2e6e6 !important;
  padding: 10px 14px !important;
  box-shadow: none !important;
  background-color: #fff !important;
  height: auto !important;
}
.address-form input.form-control:focus,
.address-form select.form-control:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px rgba(55, 100, 103, .12) !important;
  outline: none !important;
}
.address-form .form-control-label {
  color: #384848 !important;
  font-weight: 600 !important;
}
.address-form .form-group {
  margin-bottom: 16px !important;
}

/* =========================================================================
   "Historial de pedidos" (/historial-compra) — nativo: tabla Bootstrap
   estandar (table-striped + table-bordered), filas a rayas grises/
   blancas, badges de estado y botones "Datos"/"Pedir de nuevo" como
   texto plano sin estilo. Se moderniza sin tocar la semantica: el color
   de cada badge de estado (Enviado, Completado, etc.) viene por style
   INLINE desde el backend segun el estado real del pedido -> no se
   toca ese color (perderia el significado), solo forma/tipografia.
   #content.page-content se reutiliza en varias paginas de la cuenta con
   tratamientos distintos (la grilla de "Su cuenta", el formulario de
   direccion) -> se ancla a "#history" (id de <body> de esta pagina
   especifica) para no pisar esas otras reglas. */
#history #content.page-content {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden;
  padding: 0 !important;
  padding-top: 24px !important;
  border: none !important;
}
#history #content.page-content > p {
  padding: 20px 24px 0 !important;
  color: #5a6a6a !important;
}
table.table {
  border: none !important;
  margin-bottom: 0 !important;
}
table.table thead th {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--brand-light) !important;
  color: #5a6a6a !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 14px 16px !important;
}
/* La columna "Precio total" alinea sus VALORES a la derecha
   (.text-xs-right, clase nativa) pero el <th> del encabezado no trae
   esa clase -> sin esto el titulo queda a la izquierda mientras los
   numeros de abajo caen a la derecha. */
table.table thead th:nth-child(3) {
  text-align: right !important;
}
/* table-striped pone fondo gris a las filas pares via nth-child -> se
   anula para que todas las filas sean blancas, con el separador de
   abajo (border-bottom en las celdas) marcando cada fila en su lugar. */
table.table.table-striped tbody tr {
  background: #fff !important;
}
table.table tbody td, table.table tbody th {
  border: none !important;
  border-bottom: 1px solid #f0f2f2 !important;
  padding: 16px !important;
  color: #384848 !important;
  vertical-align: middle !important;
}
table.table tbody tr:hover td, table.table tbody tr:hover th {
  background: var(--brand-light) !important;
}
table.table tbody th[scope="row"] {
  font-weight: 700 !important;
  color: var(--brand-dark) !important;
}
table.table td.text-xs-right {
  font-weight: 700 !important;
  color: var(--brand-dark) !important;
}
.label.label-pill {
  border-radius: 999px !important;
  padding: 5px 12px !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  letter-spacing: .02em;
  display: inline-block;
}
.order-actions a {
  display: inline-flex !important;
  align-items: center;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  margin: 2px !important;
}
.order-actions a.view-order-details-link {
  background: var(--brand-light) !important;
  color: var(--brand-dark) !important;
}
.order-actions a.view-order-details-link:hover {
  background: #dfe9e9 !important;
}
.order-actions a.reorder-link {
  background: var(--brand) !important;
  color: #fff !important;
}
.order-actions a.reorder-link:hover {
  background: var(--brand-dark) !important;
}

/* =========================================================================
   Formulario de contacto (/contactenos). El HTML nativo mete TODO
   (intro, bloque de whatsapp y cada campo) dentro de un unico
   <div class="form-group row"><div class="col-md-9 col-md-offset-3">,
   heredado del grid de Bootstrap pensado para convivir con una columna
   izquierda que aqui no existe — de ahi el offset injustificado y las
   filas label/input en horizontal con inputs a media anchura. Se
   reconstruye a un layout vertical (label arriba, campo a lo ancho)
   con flexbox + `order`, sin tocar el HTML. Los campos "Referencia del
   pedido" y "Mensaje" usan contenedores col-md-6/col-md-9 distintos asi
   que hace falta cubrir ambos casos por separado. */
#contact #content.page-content {
  max-width: 820px !important;
  margin: 24px auto !important;
  padding: 40px 44px !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  border: none !important;
}
#contact .form-fields > .form-group.row {
  display: block !important;
  margin: 0 !important;
}
#contact .form-fields > .form-group.row > div[class*="col-md-9"] {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  padding: 0 !important;
  float: none !important;
}
/* Fila vacia que el tema deja tras el campo Mensaje (resto de grid sin
   contenido util, solo un div.offset-md-3 vacio: se descarta). */
#contact .form-fields .col-md-9 > .form-group.row:has(> .offset-md-3):not(:has(label)) {
  display: none !important;
}
#contact .contact-form p:empty { display: none !important; }
#contact .contact-form br { display: none !important; }
#contact .contact-form h3 {
  color: var(--brand-dark) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 26px 0 14px !important;
}
#contact .contact-form h3:first-of-type { margin-top: 2px !important; }
#contact .contact-form > form > section.form-fields > .form-group.row > div[class*="col-md-9"] > p {
  color: #4a5757 !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  margin: 0 0 20px !important;
}
/* Bloque de Whatsapp: el mismo parrafo generico de arriba se convierte
   en una pildora de aviso, distinguible por contener el enlace wa.me. */
#contact .contact-form p:has(a[href*="wa.me"]) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #e9f9ef !important;
  border: 1.5px solid #b7e8c6 !important;
  border-radius: 999px !important;
  padding: 10px 22px !important;
  margin: 0 0 8px !important;
}
#contact .contact-form p:has(a[href*="wa.me"]) a {
  color: #1d8a4a !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
#contact .contact-form p:has(a[href*="wa.me"]) img { width: 22px !important; }
/* Cada campo (Asunto, Email, Referencia, Archivo, Mensaje): fila flex en
   wrap, con `order` para forzar label+"opcional" en la primera linea y
   el control ocupando toda la segunda linea (flex-basis 100%). */
#contact .form-fields .col-md-9 > .form-group.row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  margin: 0 0 22px !important;
}
#contact .form-fields .col-md-9 > .form-group.row > label.form-control-label {
  width: auto !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin: 0 0 8px !important;
  order: 1;
  color: #384848 !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
}
#contact .form-fields .col-md-9 > .form-group.row > .form-control-comment {
  order: 2 !important;
  margin-left: auto !important;
  padding: 0 !important;
  width: auto !important;
  font-size: 11px !important;
  color: #5a6a6a !important;
  text-transform: uppercase;
  letter-spacing: .04em;
}
#contact .form-fields .col-md-9 > .form-group.row > div[class*="col-md-6"],
#contact .form-fields .col-md-9 > .form-group.row > div[class="col-md-9"] {
  order: 3 !important;
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}
#contact .form-control {
  border-radius: var(--radius-md) !important;
  border: 1.5px solid #e2e6e6 !important;
  padding: 11px 16px !important;
  box-shadow: none !important;
  background-color: #fff !important;
  height: auto !important;
  font-size: 14px !important;
}
#contact .form-control:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px rgba(55, 100, 103, .12) !important;
  outline: none !important;
}
#contact textarea.form-control {
  min-height: 140px !important;
  resize: vertical !important;
}
#contact .bootstrap-filestyle .form-control {
  border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
}
#contact .bootstrap-filestyle .btn-default {
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
  background: var(--brand-light) !important;
  border: 1.5px solid #e2e6e6 !important;
  border-left: none !important;
  color: var(--brand-dark) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
#contact .form-footer {
  margin-top: 8px !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(0, 0, 0, .06) !important;
}

/* Pagina 404 (body#pagenotfound) y busquedas/categorias sin resultados:
   el propio tema le pone a #content.page-content un fondo blanco solido
   con padding, que se ve como una caja rectangular suelta flotando
   sobre el fondo gris de la pagina. Se quita para que el mensaje "No
   hay productos disponibles" + buscador queden planos sobre la pagina,
   sin caja. */
#content.page-content.page-not-found {
  background: transparent !important;
  padding: 0 !important;
}

/* =========================================================================
   "Sus datos personales" (/datos-personales, body#identity). Esta pagina
   SOLO es accesible con sesion ya iniciada (es la edicion de "Mi
   cuenta"), asi que toda la intro que el tema antepone al formulario
   real (#customer-form, ya cubierto por el bloque :is(...) de mas
   arriba) esta pensada para un usuario nuevo, no para uno ya logueado:
   el reclamo "omitir el registro iniciando sesion con Google", el
   titulo "Formulario de registro" y el aviso "Importante: si es usted
   empresa, registrese primero..." (piensa en un ALTA, no en editar un
   perfil existente). Se oculta ese bloque completo (.mx-auto) de una
   vez en lugar de ocultar cada elemento suelto. */
#identity .mx-auto { display: none !important; }
#identity .form-footer {
  margin-top: 10px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(0, 0, 0, .06) !important;
}

/* =========================================================================
   Textos de las miniaturas de producto (listados/home: .product-miniature).
   Titulo y precio traen sus colores/sombras por estilo INLINE generado
   por el tema (no por clase), muy distinto del precio "real" que se ve
   dentro de la ficha de producto (.product-prices, mas arriba: numero
   grande en --brand-dark + "(con IVA)" chico en gris). Aca se reproduce
   ese mismo esquema para que el precio se vea igual en todo el sitio. */
.product-miniature .product-title {
  text-shadow: none !important;
  color: #1d1d1d !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}
.product-miniature .price {
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  flex-wrap: wrap;
  gap: 6px !important;
  width: 100%;
}
/* El <br> inicial del tema empujaba el precio a su propia linea; con el
   precio ya en flex horizontal (numero + IVA lado a lado, igual que en
   la ficha de producto) sobra. */
.product-miniature .price br { display: none !important; }
.product-miniature .price span[style*="color: #32a852"] {
  color: var(--brand-dark) !important;
  font-weight: 800 !important;
  font-size: 1.05em !important;
}
.product-miniature .price span[style*="color: black"] {
  color: #5a6a6a !important;
  font-weight: 500 !important;
  font-size: .8em !important;
}

/* =========================================================================
   Miniaturas del buscador instantaneo (JoliSearch): el desplegable que
   aparece al escribir en la caja de busqueda (li.product.ui-menu-item)
   es OTRO componente, con su propio marcado (.jolisearch-*), no
   .product-miniature — de ahi que la correccion de arriba no lo tocara.
   Mismo criterio que ahi: el precio imita el esquema de la ficha de
   producto (numero en --brand-dark + "con IVA" chico en gris) y el
   badge de disponibilidad pasa del verde generico del tema a la
   paleta de marca. Se deja el <br> nativo entre precio e IVA (a
   diferencia de la miniatura ancha, esta tarjeta es angosta y
   forzarlos a la misma linea generaba saltos de linea feos). */
.jolisearch-name {
  color: #1d1d1d !important;
  font-weight: 600 !important;
}
.jolisearch-price span[style*="color:green"] {
  color: var(--brand-dark) !important;
  font-weight: 800 !important;
  font-size: 1.05em !important;
}
.jolisearch-price small {
  color: #5a6a6a !important;
  font-weight: 500 !important;
  font-size: .85em !important;
  font-style: normal !important;
}
/* El badge de disponibilidad traia forma/tamano propios del tema
   (radio 12px, padding 2px 6px, 12px de fuente) muy distintos del
   badge-pildora que usan las miniaturas (#product-availability: radio
   999px, padding 8px 14px, 13px). Se iguala la forma para TODOS los
   estados (no solo el verde) y el color de marca + el check solo para
   el estado "disponible", dejando intacto cualquier otro color de
   estado (p.ej. "bajo pedido") por si el tema lo usa aca tambien. */
.jolisearch-stock {
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-top: 6px !important;
}
.jolisearch-stock[style*="rgb(0, 128, 0)"] {
  color: var(--brand-dark) !important;
  background-color: var(--brand-light) !important;
}
.jolisearch-stock[style*="rgb(0, 128, 0)"]::before {
  content: "\2713";
  margin-right: 5px;
  font-weight: 700;
}
/* El usuario seguia viendo el fondo verde nativo (no el de marca) en
   esta pastilla pese a la regla de arriba. Causa, encontrada
   descargando el CSS compilado real de produccion: otro resto suelto
   de CSS antiguo, de una version anterior de esta misma pastilla
   (antes de pasar al esquema de marca actual), que sigue pegado en
   "CSS personalizado" sin sustituir -> "#ui-id-1 .jolisearch-stock
   {background:rgb(230,255,230)!important}" ("ui-id-1" es el ID que
   pone jQuery UI al desplegable del buscador). Esa regla usa un ID en
   el selector -> le gana en especificidad a la de arriba (que solo
   tiene clase + atributo), pase lo que pase con el orden. Se iguala el
   selector (mismo ID) añadiendo ademas el atributo, para tener
   especificidad estrictamente mayor y ganar siempre. */
#ui-id-1 .jolisearch-stock[style*="rgb(0, 128, 0)"] {
  background: var(--brand-light) !important;
  background-color: var(--brand-light) !important;
}

/* =========================================================================
   Descripcion larga del producto (pestana "Descripcion", #description
   .product-description). El contenido lo carga el proveedor/CMS con
   parrafos y listas sueltas, sin limpiar: quedan <p><strong></strong></p>
   y <p></p> vacios (huecos en blanco sin motivo) y cada <li> envuelve su
   texto en un <p> propio — como <p> es de bloque y trae su propio
   margen, la vineta del <li> queda "flotando" sola arriba y el texto
   cae en la linea de abajo. Se ocultan los parrafos vacios, se colapsa
   el <p> interno de cada <li> para que quede en la misma linea que su
   vineta, y se sustituye el bullet nativo por un punto pequeno en el
   color de marca. Los <strong> sueltos (que el proveedor usa como
   subtitulos: "Kompatible modelle:", etc.) pasan a --brand-dark para
   que se lean como secciones, no como texto en negrita suelto. */
#description .product-description p:empty,
#description .product-description p:has(> strong:empty) {
  display: none !important;
}
#description .product-description {
  color: #4a5757 !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
}
#description .product-description p strong {
  color: var(--brand-dark) !important;
  font-weight: 700 !important;
}
#description .product-description > p:first-child strong {
  font-size: 17px !important;
}
#description .product-description ul {
  list-style: none !important;
  margin: 10px 0 20px !important;
  padding: 0 !important;
}
#description .product-description li {
  position: relative !important;
  padding-left: 22px !important;
  margin-bottom: 8px !important;
}
#description .product-description li p {
  margin: 0 !important;
  display: inline !important;
}
#description .product-description li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.6em !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--brand) !important;
}

/* =========================================================================
   Migas de pan (nav.breadcrumb). Nativas: 16px (grande para una miga),
   separador "/" oscuro (el mismo color que los enlaces, generado via
   li::after — no hay clase para engancharse, se pisa por selector de
   posicion) y el ultimo item (pagina actual, sin <a>, solo <span>) sin
   ningun enfasis que lo distinga de los enlaces anteriores. */
nav.breadcrumb {
  padding: 0 !important;
  margin: 0 0 20px !important;
  font-size: 13px !important;
}
/* El tema fuerza width:100%!important con margin-left:0!important. El
   JS de mas abajo (alignBreadcrumb) le suma un margin-left dinamico
   para alinearlo con el contenido de la pagina, pero un margen no
   reduce un width:100% -> el borde derecho se salia esa misma cantidad
   por fuera del viewport (reportado por el usuario: "el breadcrumb...
   se acerca demasiado a la derecha", el mismo sintoma descrito aqui
   antes de tener capturas para confirmarlo). width:auto deja que el
   ancho se achique solo, como cualquier bloque normal con margen.
   Un simple "nav.breadcrumb { width: auto !important; }" (la version
   anterior de esta regla) no bastaba en produccion: en el CSS
   compilado, la regla nativa de ancho queda colocada DESPUES de la
   nuestra en esta seccion -> con la MISMA especificidad (una sola
   clase de tipo, ambas !important) gana la que va despues, es decir la
   nativa. Mismo patron ya visto con ".tabs" (franja verde) y con el
   logo del checkout -> se resuelve igual, subiendo la especificidad
   con el prefijo "html body" para ganar el empate sin depender de en
   que posicion del bundle final quede cada una. */
html body nav.breadcrumb {
  width: auto !important;
}
/* Alineacion del breadcrumb con el contenido de mas abajo, EN CSS PURO
   (sustituye a la funcion JS alignBreadcrumb() de custom.js, que medía
   la posicion de .images-container/#js-product-list-header y aplicaba
   un margin-left inline tras el primer pintado -> eso es, por diseño,
   un salto de layout real siempre: el usuario ve el breadcrumb pegado
   al borde izquierdo un instante y luego "saltar" a su posicion
   correcta. Confirmado con Performance Insights/CLSCulprits: ese salto
   media 0.0366 de CLS en movil, el mayor de la pagina).
   Los valores de abajo son constantes (suma de paddings anidados del
   grid, no dependen de la imagen ni del producto) medidos directamente
   con getBoundingClientRect() en produccion:
     - Categoria (#js-product-list-header): 40px, movil Y escritorio.
     - Producto (.images-container): 40px en movil (una sola columna,
       sin nivel extra de columna), 60px en escritorio (la galeria va
       en su propia columna con un padding adicional de 20px).
   La funcion alignBreadcrumb() (y su listener de "resize") se ha
   quitado de custom.js -> si el grid cambia alguna vez y estos valores
   dejan de cuadrar, no hay ningun JS de emergencia corrigiendolo en
   caliente, hay que remedir y actualizar los numeros de aqui. */
nav.breadcrumb {
  margin-left: 40px !important;
}
@media (min-width: 768px) {
  body#product nav.breadcrumb {
    margin-left: 60px !important;
  }
}
nav.breadcrumb ol {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
nav.breadcrumb li {
  display: inline-flex !important;
  align-items: center !important;
}
nav.breadcrumb li a {
  /* "#6b7a7a" (antes) daba ~4.32:1 sobre el fondo casi blanco de la
     pagina -> Lighthouse lo marca como contraste insuficiente (hace
     falta 4.5:1). Mismo fix que "#contact-link span" mas arriba:
     oscurecer a "#5a6a6a" -> ~5.46:1, ya cumple.
     El padding es para el area tactil: los enlaces median ~20px de
     alto (bajo el minimo de 24px de WCAG 2.5.8); con este padding
     quedan en ~28px. Sin margin negativo compensando el padding: en
     movil el breadcrumb envuelve (flex-wrap) en varias lineas, y un
     margin negativo hacia que las lineas envueltas se superpusieran
     entre si (quedaban a 20px de separacion en vez de 24px) -> Lighthouse
     seguia marcando "target-size" por espaciado insuficiente aunque el
     tamano del elemento ya era correcto. El espacio extra entre lineas
     es el coste real de cumplir el minimo, no se puede evitar. */
  color: #5a6a6a !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  padding: 4px 2px !important;
}
nav.breadcrumb li a:hover { color: var(--brand) !important; }
nav.breadcrumb li a span { color: inherit !important; }
nav.breadcrumb li:last-child > span {
  color: var(--brand-dark) !important;
  font-weight: 700 !important;
}
nav.breadcrumb li:not(:last-child)::after {
  content: "\203A" !important;
  margin: 0 8px !important;
  color: #c3cccc !important;
  font-weight: 400 !important;
}
nav.breadcrumb li:last-child::after { content: none !important; }

/* =========================================================================
   Cabecera de categoria (nombre + descripcion, #js-product-list-header
   > .block-category). El HTML anida DOS contenedores con estilo de
   tarjeta propio: el exterior (#js-product-list-header) ya trae de
   nativo fondo blanco, borde fino y sombra con esquinas redondeadas
   SOLO arriba (border-bottom:none inline); el interior (.block-category
   .card.card-block) recibe ADEMAS nuestra regla generica ".card,.block"
   (radio + sombra propios). El resultado son dos tarjetas superpuestas
   con esquinas/sombras que no calzan entre si — se ve "duplicado". Se
   deja una sola tarjeta limpia: el exterior con radio uniforme en las
   4 esquinas y su sombra estandar del sitio; el interior queda plano
   (sin fondo/radio/sombra propios) para que no compita visualmente. */
#js-product-list-header {
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}
#js-product-list-header .block-category {
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
#category-description {
  color: #4a5757 !important;
  line-height: 1.65 !important;
}
#category-description picture img {
  border-radius: var(--radius-md) !important;
}

/* =========================================================================
   Grilla de productos en paginas de categoria. IMPORTANTE: la lista de
   productos de la home (bloque "Algunos de nuestros productos") y la
   de "Vielleicht gefallt Ihnen auch" en la ficha de producto usan EL
   MISMO marcado (.products.row > .js-product) — esas dos ya se veian
   bien, asi que hay que escoger un selector que solo agarre la grilla
   de categoria. #js-product-list es exclusivo de esa pagina (no existe
   en home ni en ficha de producto), se usa como ancla de todo el
   bloque.
   El problema en si: nativo es flexbox con flex:0 0 20% e items que
   NO crecen (flex-grow:0) — con el gap fijo entre tarjetas, 5 columnas
   al 20% ya no entran en el ancho real de la columna de contenido (que
   quedo mas angosta por nuestros propios ajustes de layout), asi que
   el tema achica a 4 por fila pero NADIE ocupa el resto: queda una
   franja vacia a la derecha en cada fila. CSS Grid con auto-fill +
   minmax evita el problema: reparte SIEMPRE el ancho real disponible
   entre las columnas que entran, sin dejar sobrante. */
#js-product-list .products.row {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 24px !important;
}
#js-product-list .js-product {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  margin: 0 !important;
}
/* El tema trae ADEMAS reglas nativas por breakpoint tipo ".col-xl-4
   { max-width: 20% }" (misma especificidad que ".js-product": una
   sola clase) que la regla de arriba no alcanza a pisar de forma
   confiable segun el orden de carga. Con !important puro no alcanza
   si la regla nativa tambien es !important o carga despues; hace
   falta una especificidad mayor de forma explicita, combinando varias
   de las clases propias del elemento. Sin esto, ese max-width:20% se
   recalculaba contra el ancho de la CELDA del grid (no de la fila
   completa) dando columnas de ~60px: las tarjetas quedaban angostas
   y la primera se salia parcialmente del viewport por la izquierda. */
#js-product-list .js-product.product.col-xl-4,
#js-product-list .js-product.col-sm-6.col-xl-4 {
  max-width: none !important;
  width: auto !important;
  min-width: 0 !important;
}

/* =========================================================================
   Paginador de categoria (nav.pagination). Nativo: numeros como texto
   plano dentro de columnas Bootstrap vacias/con offset (col-md-4 sin
   uso + col-md-6 offset-md-2), sin ningun tratamiento visual para la
   pagina activa mas alla de una clase "disabled". Se convierte en
   pildoras: numero actual solido en color de marca, resto en blanco
   con sombra suave, "Weiter/Zuruck" en pildora clara que se oscurece
   en hover. Esta misma regla tambien alcanza al duplicado de arriba
   (.js-pagination-top, ver build-bookmarklet.js) porque comparte el
   mismo marcado/clases. */
nav.pagination {
  display: flex !important;
  justify-content: center !important;
  margin: 28px 0 !important;
}
nav.pagination .col-md-4 { display: none !important; }
nav.pagination .col-md-6 {
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  padding: 0 !important;
  float: none !important;
}
nav.pagination .page-list {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
nav.pagination .page-list li a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #384848 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
}
nav.pagination .page-list li a:hover {
  background: var(--brand-light) !important;
  color: var(--brand-dark) !important;
}
nav.pagination .page-list li.current a {
  background: var(--brand) !important;
  color: #fff !important;
  cursor: default;
}
nav.pagination .page-list li a.next,
nav.pagination .page-list li a.previous {
  background: transparent !important;
  color: var(--brand-dark) !important;
  gap: 4px;
}
nav.pagination .page-list li a.next:hover,
nav.pagination .page-list li a.previous:hover {
  background: var(--brand-light) !important;
  color: var(--brand-dark) !important;
}
nav.pagination .page-list li a.next i,
nav.pagination .page-list li a.previous i {
  font-size: 18px !important;
}

/* Pagina del carrito (Warenkorb): cada linea de producto flotaba suelta,
   sin separacion visual entre articulos ni con el fondo. Se le da
   tratamiento de tarjeta individual. */
.cart-item {
  background: #fff !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
}
.cart-item .alert-warning {
  border-radius: var(--radius-md) !important;
  margin-bottom: 14px !important;
}
.cart-item .product-image img {
  border-radius: var(--radius-md) !important;
}
.cart-item .product-line-info .label {
  color: #1d1d1d !important;
  font-weight: 600 !important;
}
.cart-item .product-price .price,
.cart-item .product-price.h5 .price {
  color: var(--brand-dark) !important;
  font-weight: 600 !important;
}
.cart-item .product-line-grid-right .price strong {
  color: var(--brand-dark) !important;
  font-weight: 800 !important;
  font-size: 1.05em !important;
}
/* El selector de cantidad del carrito usa una estructura distinta a la
   ficha de producto: los botones +/- van apilados verticalmente dentro
   de .input-group-btn-vertical en vez de ir uno a cada lado. Se usa
   display:contents para que ese wrapper deje de pintar su propia caja y
   sus dos botones hijos entren directamente en el flex row del input,
   reordenandolos con order para que quede - [cantidad] + en horizontal. */
.cart-item .qty .bootstrap-touchspin {
  display: inline-flex !important;
  align-items: stretch !important;
}
.cart-item .input-group-btn-vertical {
  display: contents !important;
}
.cart-item .js-cart-line-product-quantity {
  border: none !important;
  width: 44px !important;
  text-align: center !important;
  font-weight: 700 !important;
  order: 2 !important;
}
.cart-item .js-decrease-product-quantity { order: 1 !important; }
.cart-item .js-increase-product-quantity { order: 3 !important; }
/* Los botones +/- traian de fabrica un borde gris (pensado para la
   pila vertical nativa, donde ese borde separaba un boton del otro) y
   un "box-shadow" nativo de boton -el borde se quitaba subiendo la
   especificidad con "html body", pero el "box-shadow" resistia incluso
   asi (hay una regla nativa que SOLO fija esa propiedad con
   especificidad igual o mayor + "!important" propio, comprobado en
   vivo): hace falta repetir la clase ("btn-touchspin.btn-touchspin.
   btn-touchspin") para subir la especificidad lo suficiente y ganar
   tambien ahi. Ademas traian un margen negativo distinto CADA UNO
   (".js-decrease..." con "-2px 0 0 -1px", ".js-increase..." con "0 0
   2px -1px") pensado para que las dos pastillas se solaparan un pixel
   en la pila vertical original -> al pasarlos a fila horizontal
   (":contents" + "order" de arriba) ese desfase ya no tiene sentido y
   deja un boton mas arriba que el otro (reportado por el usuario);
   se anula con "margin:0". */
html body .cart-item .btn-touchspin.btn-touchspin.btn-touchspin {
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  background: var(--brand-light) !important;
  color: var(--brand-dark) !important;
  width: 36px !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}
.cart-item .btn-touchspin:hover {
  background: var(--brand) !important;
  color: #fff !important;
}
/* El glifo de "Material Icons" de touchspin-up/down no queda centrado
   por flexbox (el propio icono se renderiza pegado a la esquina
   superior izquierda, no se ha podido determinar por que via CSS
   estandar), asi que se centra a la fuerza con posicionamiento
   absoluto respecto al boton en vez de confiar en align-items. */
.cart-item .btn-touchspin i.material-icons {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  display: block !important;
}
.cart-item .remove-from-cart {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  color: #5a6a6a !important;
}
.cart-item .remove-from-cart:hover {
  background: #fdecea !important;
  color: #c0392b !important;
}

/* Cuadro de codigo promocional: input y boton se funden en una sola
   pildora visual (radio compartido, sin separacion entre ambos). */
.promo-code .promo-input {
  border-radius: 999px 0 0 999px !important;
  border: 1.5px solid #e2e6e6 !important;
  border-right: none !important;
  padding: 10px 16px !important;
  box-shadow: none !important;
}
.promo-code .promo-input:focus {
  border-color: var(--brand) !important;
  outline: none !important;
}
.promo-code form { display: flex !important; }
.promo-code .btn-primary {
  border-radius: 0 999px 999px 0 !important;
  white-space: nowrap;
}
.promo-code .alert-danger {
  border-radius: var(--radius-md) !important;
  margin-top: 10px !important;
}
.promo-code .cancel-promo {
  display: block !important;
  margin-top: 10px !important;
  color: #5a6a6a !important;
  font-size: 13px !important;
  text-align: center;
}

/* Recorta las miniaturas del carrito: 3px arriba/lados, 5px abajo. OJO: la
   primera version de esto ponia display:block en .product-image (un
   <span> que originalmente es inline y se dimensiona solo por el
   tamaño de la imagen), lo que hacia que el span se estirara al ancho
   completo de la columna y la imagen (al 100%+4px de ESE ancho) se
   viera enorme. clip-path no toca el display ni el tamaño de caja: solo
   recorta la imagen ya renderizada, dejando el hueco resultante
   transparente (se ve el fondo blanco de la tarjeta). */
.cart-item .product-image img {
  clip-path: inset(3px 3px 5px 3px) !important;
}

/* Paso 3 del checkout (Versandart / metodo de envio): el aviso de
   "sale hoy del almacen" y la fila de metodo de envio usaban estilos en
   linea del propio backend (colores/bordes hardcodeados), asi que se
   pisan con !important para unificar con el resto de la tienda. */
#mensaje-envio {
  background: #e6f7ed !important;
  border: 1px solid #c9ecd7 !important;
  border-radius: var(--radius-md) !important;
  color: var(--brand-dark) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 16px 20px !important;
}
.delivery-options .js-delivery-option {
  background: #fff !important;
  border: 1.5px solid #e2e6e6 !important;
  border-radius: var(--radius-md) !important;
  padding: 14px 12px !important;
  margin: 0 !important;
  transition: border-color .15s ease, box-shadow .15s ease;
  cursor: pointer;
}
.delivery-options .js-delivery-option:hover {
  border-color: var(--brand) !important;
  box-shadow: var(--shadow-sm) !important;
}
.delivery-options .js-delivery-option:has(input:checked) {
  border-color: var(--brand-dark) !important;
  background: var(--brand-light) !important;
  box-shadow: var(--shadow-sm) !important;
}
.delivery-options .carrier-name,
.delivery-options .carrier-price {
  color: var(--brand-dark) !important;
  font-weight: 700 !important;
}
/* El punto de seleccion tiene ancho 0 en estado no marcado y crece al
   marcarse (animacion nativa de "relleno"); fijarlo a un tamaño y offset
   top/left estaticos (top/left:2px original, pensado para su tamaño mas
   pequeño) lo deja descentrado en cuanto cambia de tamaño al marcar/
   desmarcar. Se centra de forma robusta con position absolute +
   translate, igual que se hizo con los iconos del touchspin del
   carrito: asi da igual el ancho que tenga en cada estado. */
.delivery-options .custom-radio span {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 10px !important;
  height: 10px !important;
  margin: 0 !important;
}
/* Fila de confirmacion de fecha de envio: tambien viene con estilos en
   linea (display:flex inline), se envuelve visualmente en tarjeta
   pastel amarilla en vez del bloque plano original. */
div:has(> #confirmacion_envio) {
  background: #fff8ea !important;
  border: 1.5px solid #f5deb3 !important;
  border-radius: var(--radius-md) !important;
  padding: 14px 18px !important;
}
#confirmacion_envio {
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--brand) !important;
  cursor: pointer;
}

/* Contenedor de los 4 pasos del checkout: cada .checkout-step ya tiene
   fondo blanco propio pero van pegados sin radio, formando un bloque de
   esquinas cuadradas. En vez de redondear cada paso por separado (lo
   que dejaria un hueco cuadrado entre ellos), se redondea el wrapper
   que los agrupa y se le recorta el contenido con overflow:hidden para
   que solo se vean redondeadas las esquinas exteriores (arriba del
   paso 1, abajo del paso 4). */
/* Sin fondo propio, el hueco que deja overflow:hidden al recortar las
   esquinas cuadradas de los .checkout-step contra el marco redondeado
   dejaba ver el fondo de la pagina (gris) en vez de blanco. */
.cart-grid-body {
  background: #fff !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
}
/* En la pagina del Carrito (no en checkout), .cart-grid-body envuelve
   un DIV.card.cart-container que ADEMAS recibe radio+sombra+fondo via
   la regla generica ".card, .block" de mas arriba -> dos tarjetas
   blancas redondeadas superpuestas, se ve como "doble borde". Se
   aplana la interior para que solo quede el marco exterior. */
.cart-grid-body .card.cart-container {
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* Un poco mas de aire por encima del paso 1 (pegaba casi directo con
   el borde redondeado de arriba). */
.checkout-step:first-of-type {
  padding-top: 24px !important;
}

/* Paso 4 del checkout (Zahlung): las opciones de pago eran filas planas
   sin separacion visual. Se les da el mismo tratamiento de tarjeta
   seleccionable que a las opciones de envio del paso 3. */
.payment-options .payment-option {
  background: #fff !important;
  border: 1.5px solid #e2e6e6 !important;
  border-radius: var(--radius-md) !important;
  padding: 14px 16px !important;
  margin: 0 0 10px 0 !important;
  display: flex !important;
  align-items: center !important;
  transition: border-color .15s ease, box-shadow .15s ease;
  cursor: pointer;
}
.payment-options .payment-option:hover {
  border-color: var(--brand) !important;
  box-shadow: var(--shadow-sm) !important;
}
.payment-options .payment-option:has(input:checked) {
  border-color: var(--brand-dark) !important;
  background: var(--brand-light) !important;
}
.payment-options .payment-option label {
  font-weight: 600 !important;
  color: var(--brand-dark) !important;
  margin: 0 !important;
  cursor: pointer;
}
.payment-options .custom-radio {
  margin-right: 10px !important;
}
/* Mismo ajuste robusto que en .delivery-options: centrado por
   position absolute + translate en vez de un offset fijo, para que no
   se descentre al cambiar de tamaño entre marcado/desmarcado. */
.payment-options .custom-radio span {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 10px !important;
  height: 10px !important;
  margin: 0 !important;
}

/* Paso 2 del checkout ("Direcciones") cuando la direccion de
   facturacion difiere de la de envio (?use_same_address=0): sin
   modernizar, era un formulario nativo plano (inputs cuadrados sin
   estilo, sin tarjeta para elegir direccion de envio, "Cancelar"
   como link suelto). Se reutilizan los MISMOS patrones ya
   establecidos en el resto del sitio en vez de inventar uno nuevo:
   la tarjeta seleccionable de ".delivery-options .js-delivery-option"
   / ".payment-options .payment-option" (pasos 3 y 4) para el listado
   de direcciones de envio, y el input redondeado de ".address-form"
   (pagina de cuenta "Direcciones") para el formulario de facturacion
   -> visualmente coherente con el resto del checkout sin duplicar
   variables ni colores. El formulario de facturacion NO usa la clase
   ".address-form" (esa es solo de la pagina de cuenta) sino
   ".js-address-form", de ahi reglas propias en vez de reutilizar el
   selector existente. */
#delivery-addresses .js-address-item {
  background: #fff !important;
  border: 1.5px solid #e2e6e6 !important;
  border-radius: var(--radius-md) !important;
  padding: 14px 16px !important;
  margin-bottom: 10px !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#delivery-addresses .js-address-item:hover {
  border-color: var(--brand) !important;
  box-shadow: var(--shadow-sm) !important;
}
#delivery-addresses .js-address-item.selected {
  border-color: var(--brand-dark) !important;
  background: var(--brand-light) !important;
  box-shadow: var(--shadow-sm) !important;
}
/* El <hr> nativo entre la direccion y el footer de la tarjeta ya no
   hace falta: el propio borde+fondo de la tarjeta separa visualmente
   cada direccion, el <hr> solo añadia una linea redundante dentro. */
#delivery-addresses .js-address-item hr {
  display: none !important;
}
#delivery-addresses .radio-block {
  cursor: pointer;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}
#delivery-addresses .custom-radio {
  position: relative;
  flex-shrink: 0;
  margin-top: 2px;
}
#delivery-addresses .custom-radio span {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 10px !important;
  height: 10px !important;
  margin: 0 !important;
}
#delivery-addresses .address-alias {
  color: var(--brand-dark) !important;
  font-weight: 700 !important;
}
#delivery-addresses .address {
  color: #5a6a6a !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}
#delivery-addresses .address-footer {
  display: flex !important;
  gap: 6px;
  margin-top: 10px !important;
}
/* Por debajo de 389px la tarjeta de direccion se salia del area de
   visualizacion (y dejaba de estar centrada), reportado por el
   usuario. Causa: el <article class="address-item"> nativo trae
   "flex:0 0 49%" (pensado para 2 tarjetas en fila, en pantallas mas
   anchas) MAS otra regla nativa suelta que le pone ademas
   "flex-grow:1" -> en movil, con flex-shrink:0, la tarjeta nunca
   podia encogerse por debajo de ese 49%+crecimiento, desbordando el
   contenedor. Ademas, incluso fijando el ancho al 100% del
   contenedor, el texto de la direccion (linea larga sin espacios como
   "INFORMATICA SERINFOR...") seguia desbordando visualmente porque
   ".radio-block" pone el titulo y la direccion en la MISMA fila
   (flex), dejando muy poco ancho real a la columna de texto.
   Solucion en movil: 1) la tarjeta pasa a ocupar el 100% (ya no
   depende del 49% nativo). 2) el titulo y la direccion se apilan en
   lineas separadas (".radio-block" con flex-wrap) en vez de ir codo
   con codo, dandole a la direccion todo el ancho disponible para que
   el texto rompa linea con normalidad. */
@media (max-width: 480px) {
  body#checkout .address-item {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  #delivery-addresses .radio-block {
    flex-wrap: wrap !important;
  }
  #delivery-addresses .address {
    flex-basis: 100% !important;
    width: 100% !important;
    margin-left: 26px !important;
  }
}
/* Seguia rompiendose por debajo de 335px: el pie de la tarjeta
   ("Bearbeiten"/"Löschen") trae "display:flex" pero SIN "flex-wrap"
   (por tanto "nowrap" por defecto) -> los dos botones en fila no caben
   en una tarjeta tan estrecha, y el segundo ("Löschen") se sale
   entero de la tarjeta y de la pantalla en vez de encogerse o bajar de
   linea. Se apilan verticalmente en vez de en fila cuando no hay
   sitio. */
@media (max-width: 480px) {
  #delivery-addresses .address-footer {
    flex-wrap: wrap !important;
  }
}
/* "+ Añadir nueva direccion": mismo patron de boton punteado que ya
   se usa en ".addresses-footer a" (pagina de cuenta "Direcciones"). */
p.add-address a {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: #fff !important;
  border: 2px dashed rgba(55, 100, 103, .35) !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  font-weight: 700 !important;
  color: var(--brand-dark) !important;
}
p.add-address a:hover {
  background: var(--brand-light) !important;
  border-color: var(--brand) !important;
}
.js-address-form input.form-control,
.js-address-form select.form-control {
  border-radius: var(--radius-md) !important;
  border: 1.5px solid #e2e6e6 !important;
  padding: 10px 14px !important;
  box-shadow: none !important;
  background-color: #fff !important;
  height: auto !important;
}
.js-address-form input.form-control:focus,
.js-address-form select.form-control:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px rgba(55, 100, 103, .12) !important;
  outline: none !important;
}
.js-address-form .form-control-label {
  color: #384848 !important;
  font-weight: 600 !important;
}
.js-address-form .form-control-comment {
  color: #5a6a6a !important;
  font-size: 12px !important;
}
.js-address-form .form-group.row {
  margin-bottom: 16px !important;
  align-items: center !important;
}
.js-address-form .form-footer {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-top: 20px !important;
}
.js-address-form .cancel-address {
  color: #5a6a6a !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
.js-address-form .cancel-address:hover {
  color: var(--brand-dark) !important;
}

#conditions-to-approve {
  background: #f7f9f9 !important;
  border-radius: var(--radius-md) !important;
  padding: 14px 16px !important;
  margin: 16px 0 !important;
}
#conditions-to-approve li {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
#payment-confirmation {
  margin-top: 16px !important;
}

/* =========================================================================
   Pagina "Detalles del pedido" (/index.php?controller=order-detail):
   nativa era una sucesion de secciones ".box" sin ningun tratamiento
   visual (fondo blanco liso sin bordes, pegadas unas a otras, botones
   "Pedir de nuevo"/"Volver a su cuenta" como simples links de texto).
   Se le da a cada ".box" el mismo tratamiento de tarjeta que ya usa el
   resto del sitio (".card, .block"), acotado a "#order-detail" (id de
   <body> de esta pagina) para no afectar otras paginas que reutilicen
   la clase generica ".box". Las TABLAS de dentro (estado del pedido,
   productos, transportista) ya heredan el estilo generico de
   "table.table" definido mas arriba (usado tambien en "Historial de
   pedidos") sin necesidad de reglas nuevas -> aqui solo se cubre lo
   que esas reglas generales no tocan: las propias tarjetas ".box", el
   boton "Pedir de nuevo" (clase nativa ".button-primary", DISTINTA de
   ".btn-primary" -> no heredaba nada del boton generico), los
   encabezados de las direcciones, el formulario de "Añadir un
   mensaje" (usa ".form-control" suelto, fuera de cualquier :is() ya
   cubierto) y los enlaces de vuelta del pie de pagina. */
#order-detail .box {
  background: #fff !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 20px 24px !important;
  margin-bottom: 20px !important;
  box-sizing: border-box !important;
}
#order-detail .box h3 {
  margin-top: 0 !important;
  color: var(--brand-dark) !important;
  font-size: 16px !important;
}
#order-detail #order-infos ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
#order-detail #order-infos ul strong {
  color: var(--brand-dark) !important;
  margin-right: 6px !important;
}
/* "Pedir de nuevo": clase nativa ".button-primary" (con GUION, no
   confundir con ".btn-primary" del resto del sitio) -> no heredaba
   ningun estilo generico de boton, se replica aqui el mismo gradiente
   pastilla. */
#order-detail .button-primary {
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark)) !important;
  box-shadow: var(--shadow-sm);
}
#order-detail .button-primary:hover {
  background: linear-gradient(135deg, var(--brand-dark), var(--brand)) !important;
  box-shadow: var(--shadow-md);
}
#order-detail .addresses .box h4 {
  color: var(--brand-dark) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  margin-bottom: 10px !important;
}
#order-detail .addresses .box address {
  font-style: normal !important;
  color: #4a5757 !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}
#order-detail .order-message-form .form-control {
  border-radius: var(--radius-md) !important;
  border: 1.5px solid #e2e6e6 !important;
  padding: 10px 14px !important;
  box-shadow: none !important;
  background-color: #fff !important;
  height: auto !important;
}
#order-detail .order-message-form .form-control:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px rgba(55, 100, 103, .12) !important;
  outline: none !important;
}
#order-detail .order-message-form .form-control-label {
  color: #384848 !important;
  font-weight: 600 !important;
}
#order-detail .order-message-form textarea.form-control {
  resize: vertical !important;
}
#order-detail .page-footer {
  display: flex !important;
  gap: 12px !important;
  margin-top: 8px !important;
}
#order-detail .page-footer .account-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #fff !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  font-weight: 600 !important;
  color: #384848 !important;
  box-shadow: var(--shadow-sm);
}
#order-detail .page-footer .account-link:hover {
  background: var(--brand-light) !important;
  color: var(--brand-dark) !important;
}

/* ===== Modal "producto añadido al carrito" ===== */
/* Se acota todo a #myModalLabel (el titulo de ESTE modal en concreto)
   para no afectar a otros modales del sitio (login, quick-view, etc.)
   que tambien usan .modal-content / .modal-header genericos. */
#myModalLabel {
  color: var(--brand-dark) !important;
  font-weight: 700 !important;
}
#myModalLabel i.material-icons {
  color: #2fae5e !important;
  vertical-align: middle;
  margin-right: 6px;
}
.modal:has(#myModalLabel) .modal-content {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  border: none !important;
  overflow: hidden;
}
.modal:has(#myModalLabel) .modal-header {
  background: #eef9f1 !important;
  border-bottom: none !important;
  padding: 18px 24px !important;
  align-items: center;
}
/* El boton de cerrar nativo va posicionado por flujo normal (no
   absolute), asi que sacarlo del layout normal para convertirlo en un
   circulo con hover no descuadra nada mas del header. */
.modal:has(#myModalLabel) .modal-header .close {
  position: absolute !important;
  top: 14px !important;
  right: 16px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  transition: background-color .15s ease;
}
.modal:has(#myModalLabel) .modal-header .close:hover {
  background: rgba(0, 0, 0, .08) !important;
}
.modal:has(#myModalLabel) .modal-body {
  padding: 24px !important;
}
.modal:has(#myModalLabel) .divide-right {
  border-right: 1px solid #e2e6e6 !important;
}
/* Recorte de 5px arriba/lados y 18px abajo en la miniatura, mismo
   truco que en el carrito: clip-path no toca el tamaño de caja (a
   diferencia de forzar width/height mayor), asi que no hay riesgo de
   que la imagen se vea agrandada como paso la primera vez que se probo
   esto en el carrito. */
.modal:has(#myModalLabel) .product-image {
  clip-path: inset(5px 5px 18px 5px) !important;
  border-radius: 10px !important;
}
.modal:has(#myModalLabel) .product-name {
  color: var(--brand-dark) !important;
  font-weight: 700 !important;
}
.modal:has(#myModalLabel) .cart-content-btn {
  display: flex !important;
  gap: 12px !important;
  margin-top: 16px !important;
}
.modal:has(#myModalLabel) .cart-content-btn .btn {
  border-radius: 999px !important;
  font-weight: 700 !important;
}

/* Miniaturas del resumen de pedido en el checkout ("Zeige Details").
   Mismo recorte via clip-path que en el resto del sitio (no toca el
   tamaño de caja, sin riesgo de agrandar la imagen): 3px arriba/lados,
   10px abajo. */
body#checkout .media-list .media-object {
  clip-path: inset(3px 3px 10px 3px) !important;
  border-radius: 6px !important;
}

/* ===== Bloque "¿No encuentra su repuesto?" (pagina de inicio) =====
   #custom-text es contenido libre de un modulo de texto: la imagen de
   banner (nombre distinto segun idioma, pero siempre 1110x68) mas un
   parrafo. Antes era una caja blanca plana pegada casi al borde. Se le
   da tratamiento de tarjeta (fondo suave, radio, sombra) y se anade un
   boton real de contacto (ver JS: addHelpCTA en build-bookmarklet.js). */
#custom-text {
  background: var(--brand-light) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 32px 40px !important;
  overflow: hidden;
}
/* Pedido explicito: recortar el ancho por la izquierda de la imagen
   (zona con un logo/recuadro que no se queria mostrar) y volver
   transparentes sus pixeles blancos para que se funda con el fondo
   verde pastel de la tarjeta en vez de verse como un recuadro blanco
   suelto encima. mix-blend-mode:multiply hace justamente eso: el
   blanco (255,255,255) multiplicado por cualquier color de fondo da
   ese mismo color (efecto "transparente"), mientras que los pixeles
   oscuros de la ilustracion y el texto se mantienen visibles.
   ACTUALIZACION (reportado por el usuario): el recorte se hizo antes
   con un valor fijo en pixeles ("180px"), pero la imagen se renderiza
   a un ancho VARIABLE segun el ancho de pantalla (es responsive, ver
   "imgComputedWidth" distinto en cada prueba) -> un recorte fijo en px
   quita una PROPORCION distinta de la imagen segun el ancho real en
   cada momento (mucho mas en movil que en escritorio), y ademas
   "clip-path" NO reduce el tamaño de caja de la imagen (solo el
   pintado), dejando siempre un hueco en blanco ANTES del contenido
   visible que lo descuadra del centro real de la tarjeta (y del boton
   de abajo, que si esta centrado) -> con un recorte en PORCENTAJE
   (180/1110 = 16.2162%, la proporcion real pedida sobre el diseño
   original de 1110px) el recorte escala igual sea cual sea el ancho
   renderizado, y con "transform:translateX()" -tambien en porcentaje,
   relativo al ancho del propio elemento- se desplaza el conjunto
   (recorte incluido) la mitad de esa proporcion hacia la izquierda,
   re-centrando el contenido VISIBLE respecto al resto de la tarjeta
   (comprobado en vivo: el centro del texto visible, el centro de la
   tarjeta y el centro del boton "Contacte con nosotros" coinciden
   pixel a pixel en varios anchos e idiomas). */
#custom-text img {
  clip-path: inset(0 0 0 16.2162%) !important;
  transform: translateX(-8.1081%) !important;
  mix-blend-mode: multiply !important;
}
#custom-text p:last-of-type {
  color: var(--brand-dark) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  max-width: 700px;
  margin: 8px auto 0 !important;
}
#custom-text .js-help-cta {
  display: inline-flex !important;
  align-items: center;
  margin-top: 18px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  padding: 10px 24px !important;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark)) !important;
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ===== Bloque "Ultimos articulos de nuestro blog" (SOLO portada) =====
   El tema nativo trae una regla especifica ".bloghome .article.everpsblog
   { display:flex!important; width:100%!important; ... }" que fuerza
   cada articulo a ser una fila horizontal a todo el ancho apilada una
   debajo de otra — a pesar de que el propio HTML ya trae col-md-3 en
   cada articulo (pensado para un grid de 4 columnas que esa regla
   anula). Se revierte a un grid de tarjetas real (imagen arriba,
   titulo y extracto debajo), que es como se ve un area de blog de
   verdad. Todo acotado a body.page-index (la portada) para no tocar
   la pagina de listado del blog completo, que ya usa su propio estilo
   ":not(.bloghome) .article.everpsblog" nativo. */
body.page-index .bloghome.mt-2 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
}
/* auto-fit con minmax(250px,1fr) creaba una columna "fantasma" extra
   (el navegador reserva pistas de 250px+ mientras quepan, sin contar
   cuantos items hay realmente) dejando un hueco vacio del ancho de una
   tarjeta al final de la fila en pantallas anchas. Como siempre son
   4 articulos fijos, se fuerza repeat(4,1fr) para que ocupen todo el
   ancho sin huecos; por debajo de 900px se vuelve a auto-fit para que
   sigan apilandose/ajustandose en pantallas estrechas. */
@media (max-width: 900px) {
  body.page-index .bloghome.mt-2 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  }
}
/* El 4º articulo viene envuelto en un ".row" extra (cuestion de la
   plantilla, aloja tambien el boton "ver todas"); display:contents lo
   saca de en medio para que ese articulo entre al grid como un item
   mas, igual que sus 3 hermanos directos. */
body.page-index .bloghome.mt-2 > .row {
  display: contents !important;
}
body.page-index .bloghome .article.everpsblog {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
body.page-index .bloghome .article.everpsblog:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-4px);
}
body.page-index .bloghome .article.everpsblog .article-img {
  flex: none !important;
  margin: 0 !important;
  width: 100% !important;
  height: 160px !important;
  overflow: hidden;
  display: block !important;
}
body.page-index .bloghome .article.everpsblog .article-img img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}
body.page-index .bloghome .article.everpsblog br {
  display: none !important;
}
body.page-index .bloghome .article.everpsblog > div:last-child {
  padding: 18px 20px 20px !important;
}
body.page-index .bloghome .article.everpsblog h3.everpsblog {
  margin: 0 0 8px !important;
}
body.page-index .bloghome .article.everpsblog h3.everpsblog a {
  color: var(--brand-dark) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.3;
}
/* Recorta el extracto a 3 lineas para que todas las tarjetas del grid
   queden con la misma altura aunque el texto original tenga longitudes
   distintas. */
body.page-index .bloghome .article.everpsblog .everpsblogcontent {
  font-size: 13.5px !important;
  color: #6b7575 !important;
  line-height: 1.5 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =========================================================================
   Contraste de color (avisos de Google PageSpeed/Lighthouse)
   ========================================================================= */
/* Carrusel de "Ultimas opiniones" (modulo de reseñas, ".slide-container"):
   el titulo, el texto de la reseña y la fecha traen de fabrica un gris
   claro (#777) que sobre el fondo casi blanco de cada tarjeta
   (#fbfbfb) solo da un ratio de contraste de 4.33:1 (hace falta 4.5:1
   minimo) -> marcado por PageSpeed. Se oscurece un poco, a #666,
   5.55:1. */
.slide-container .slide-title,
.slide-container .comment-text,
.slide-container .slide-date {
  color: #666666 !important;
}

/* =========================================================================
   Carrusel de reseñas de la portada (modulo lgcomments, "#lgcomments-owl").
   Pedido explicito del usuario: modernizar el aspecto -antes era una
   tarjeta plana (fondo gris #fbfbfb, sin sombra ni bordes redondeados,
   flechas nativas con borde gris fino). Se aplica el mismo lenguaje
   visual que el resto de tarjetas del sitio (".thumbnail-container",
   ".card": esquinas redondeadas + sombra + ligera elevacion al hover).
   Todo acotado con el ID "#lgcomments-owl" (no ".owl-carousel"/".item"
   a secas, clases genericas de Owl Carousel que TAMBIEN usa el otro
   carrusel de productos relacionados de la pagina -> con el ID delante
   el cambio queda solo en el de reseñas). */
#lgcomments-owl .slide-container {
  background: #fff !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 20px !important;
  transition: box-shadow .25s ease, transform .25s ease;
}
#lgcomments-owl .owl-item:hover .slide-container {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-3px);
}
#lgcomments-owl .slide-title {
  color: var(--brand-dark) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}
#lgcomments-owl .slide-thumbnail {
  text-align: center !important;
}
#lgcomments-owl .slide-comment {
  text-align: center !important;
}
#lgcomments-owl .slide-comment .comment-text {
  font-size: 14.5px !important;
  line-height: 1.5 !important;
}
/* Nombre + fecha: antes iban pegados en la misma linea, mismo gris que
   el resto del texto (dificil distinguir quien dijo que). Se separan
   con un borde superior sutil (mismo tono que el resto del sitio para
   separadores, ver ".language-selector .dropdown-menu") y el nombre
   pasa a negrita en el color de marca para que destaque del texto de
   la reseña. */
#lgcomments-owl .slide-name,
#lgcomments-owl .slide-date {
  display: block !important;
  text-align: center !important;
}
#lgcomments-owl .slide-name {
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(55, 100, 103, .12) !important;
  color: var(--brand-dark) !important;
  font-weight: 700 !important;
}
#lgcomments-owl .slide-date {
  color: #8a9494 !important;
  font-size: 12.5px !important;
}
/* Flechas prev/next: antes un circulo blanco con borde gris fino y
   flecha tambien gris (poco visible). Se pasa a la misma paleta de
   "pastilla" del sitio (fondo mint claro, texto teal oscuro, blanco
   sobre marca al pasar el raton). */
#lgcomments-owl .owl-nav .owl-prev,
#lgcomments-owl .owl-nav .owl-next {
  width: 40px !important;
  height: 40px !important;
  border: none !important;
  border-radius: 50% !important;
  background: var(--brand-light) !important;
  box-shadow: var(--shadow-sm) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color .2s ease, transform .2s ease;
}
#lgcomments-owl .owl-nav .owl-prev span,
#lgcomments-owl .owl-nav .owl-next span {
  color: var(--brand-dark) !important;
  font-size: 20px !important;
  line-height: 1 !important;
}
#lgcomments-owl .owl-nav .owl-prev:hover,
#lgcomments-owl .owl-nav .owl-next:hover {
  background: var(--brand) !important;
  transform: scale(1.08);
}
#lgcomments-owl .owl-nav .owl-prev:hover span,
#lgcomments-owl .owl-nav .owl-next:hover span {
  color: #fff !important;
}

/* =========================================================================
   Pagina de reseñas completa (modulo lgcomments, "/module/lgcomments/
   reviews", "body#module-lgcomments-reviews"). Pedido explicito del
   usuario: modernizarla. Antes era un diseño muy plano/antiguo: cajas
   blancas con borde gris de 1px y una sombra oscura sin desenfoque
   (tipico "well" de Bootstrap 3), el resumen y el filtro usando
   TABLAS HTML de verdad (<table><tr><td>) con su alineacion rigida
   nativa, y las tarjetas de reseña individuales con el mismo estilo
   plano. Se aplica el mismo lenguaje visual que el resto del sitio
   (tarjeta blanca con esquinas redondeadas + sombra suave, jerarquia
   tipografica con el color de marca) y se "rompen" las tablas nativas
   con "display:block/flex" (mismo patron que en el checkout) para
   poder alinearlas como filas modernas sin tocar el HTML. */
body#module-lgcomments-reviews .lgcomment_summary {
  background: #fff !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 28px !important;
}
body#module-lgcomments-reviews .lgcomment_summary .title {
  color: var(--brand-dark) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: left !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(55, 100, 103, .12) !important;
  margin-bottom: 12px !important;
}
/* Cada tabla (".row > div") tiene una cantidad de columnas distinta:
   la de la izquierda ("Resumen") trae 4 (logo/texto, icono, %,
   contador); la de la derecha ("Filtrar") trae 2 (estrellas, contador).
   Ademas, en la tabla de la izquierda la PRIMERA columna cambia de
   ancho fila a fila (el logo mide ~100px, pero "Puntuación media:
   10/10" o "Número de opiniones 5" son mas anchos) -> con un simple
   "display:flex" por FILA (probado primero) cada fila terminaba
   calculando su propio ancho de columna de forma independiente y los
   iconos positive/neutral/negative quedaban descolocados entre si
   (reportado por el usuario). Se resuelve con CSS Grid: la tabla pasa
   a "display:grid" con columnas FIJAS compartidas por toda la tabla, y
   "tbody"/"tr" pasan a "display:contents" (dejan de pintar su propia
   caja, sus celdas <td> entran directas como items del grid) -> asi
   SI se alinean en columnas de verdad, igual que una tabla nativa pero
   con el ancho que se quiera. */
body#module-lgcomments-reviews .lgcomment_summary table {
  display: grid !important;
  column-gap: 14px;
  row-gap: 12px;
  width: 100% !important;
}
body#module-lgcomments-reviews .lgcomment_summary .row > div:first-child table {
  grid-template-columns: 200px 32px 60px 1fr;
}
body#module-lgcomments-reviews .lgcomment_summary .row > div:last-child table {
  grid-template-columns: repeat(2, 1fr);
}
body#module-lgcomments-reviews .lgcomment_summary tbody,
body#module-lgcomments-reviews .lgcomment_summary tr {
  display: contents !important;
}
body#module-lgcomments-reviews .lgcomment_summary td,
body#module-lgcomments-reviews .lgcomment_summary th {
  display: flex !important;
  align-items: center !important;
  text-align: left !important;
  padding: 0 !important;
}
body#module-lgcomments-reviews .lgcomment_summary th {
  grid-column: 1 / -1;
}
body#module-lgcomments-reviews .lgcomment_summary .small {
  font-size: 13.5px !important;
  color: #5a6a6a !important;
  margin: 0 !important;
}
body#module-lgcomments-reviews .lgcomment_summary .small b {
  color: var(--brand-dark) !important;
  font-size: 15px !important;
}
/* El logo mide "width=100" fijo en el HTML nativo -sin este limite
   seguiria a 100px de ancho aunque la columna del grid (mas abajo) se
   quede mas estrecha que eso en movil, desbordandose de la tarjeta. */
body#module-lgcomments-reviews .lgcomment_summary img {
  max-width: 100% !important;
  height: auto !important;
}
body#module-lgcomments-reviews .lgcomments_law_block {
  color: #8a9494 !important;
  font-size: 13px !important;
  justify-content: center !important;
  margin: 8px 0 24px !important;
}
/* Tarjetas de reseñas individuales (".lgcomment_block.lgcomment_review",
   una por cliente): rejilla de 2 columnas en escritorio/tablet, 1 sola
   en movil. */
body#module-lgcomments-reviews .lgcomment_reviews {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
}
body#module-lgcomments-reviews .lgcomment_block.lgcomment_review {
  display: block !important;
  background: #fff !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 20px !important;
  transition: box-shadow .25s ease, transform .25s ease;
}
body#module-lgcomments-reviews .lgcomment_block.lgcomment_review:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-3px);
}
body#module-lgcomments-reviews .lgcomment_block .credits {
  color: var(--brand-dark) !important;
  font-weight: 700 !important;
}
body#module-lgcomments-reviews .lgcomment_block .title {
  color: #1d1d1d !important;
  font-size: 16px !important;
  margin: 10px 0 6px !important;
}
body#module-lgcomments-reviews .lgcomment_block .comment {
  color: #5a6a6a !important;
  line-height: 1.5 !important;
}
@media (max-width: 767px) {
  body#module-lgcomments-reviews .lgcomment_reviews {
    grid-template-columns: 1fr !important;
  }
  body#module-lgcomments-reviews .lgcomment_summary .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  /* Las columnas fijas en px (200/32/60) de escritorio no caben en el
     ancho de un movil -se probo en vivo, el logo/texto de la primera
     columna se salia de la tarjeta-, asi que aqui la 1a y 4a columna
     pasan a "minmax(0,1fr)" (se encogen con el hueco disponible en vez
     de un numero fijo) y se reduce el hueco entre columnas. */
  body#module-lgcomments-reviews .lgcomment_summary .row > div:first-child table {
    grid-template-columns: minmax(0, 1fr) 26px 42px minmax(0, 1fr) !important;
    column-gap: 8px !important;
  }
  body#module-lgcomments-reviews .lgcomment_summary .row > div:last-child table {
    column-gap: 8px !important;
  }
}

/* =========================================================================
   Blog - listado (pagina "/blog" y similares, ".page-everblog"). Pedido
   explicito del usuario: modernizar SOLO esta pagina, sin afectar al
   resto del sitio (ni al widget de "ultimas entradas" de la portada,
   que es OTRO componente ya con su propio estilo, ver mas abajo
   ".page-index .bloghome").
   HALLAZGO: al investigar esta pagina en directo aparecio un bloque de
   reglas COMPLETO (tarjetas con sombra, imagen con zoom en hover, y un
   truco ::before para que tambien se pueda pinchar sobre la imagen,
   no solo sobre el titulo) que ya estaba activo en produccion pero
   que NO estaba en este archivo -> otro resto de una sesion anterior
   no reflejada aqui (mismo patron que en el modal de zoom, el footer
   y la pastilla del buscador). Se incorpora tal cual (es funcional y
   la logica del "click en la imagen" es delicada, mejor no tocarla)
   y ENCIMA se afinan solo los colores/sombras/radios para que sigan
   la misma paleta de marca que el resto del sitio (variables
   --brand-dark/--radius-lg/--shadow-sm, en vez de negro/grises
   sueltos). */
:root { --blog-img-w: 35%; }
:not(.bloghome) .article.everpsblog {
  width: 100%;
  margin: 20px 0;
  background: #fff;
  border-radius: 10px;
  overflow: visible;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
  font-family: inherit;
  position: relative;
}
:not(.bloghome) .article.everpsblog .row {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: stretch;
  margin: 0;
  position: relative;
}
:not(.bloghome) .article.everpsblog .article-img {
  flex: 0 0 var(--blog-img-w);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
:not(.bloghome) .article.everpsblog .article-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
:not(.bloghome) .article.everpsblog .article-img:hover img {
  transform: scale(1.05);
}
:not(.bloghome) .article.everpsblog .col-md-8 {
  flex: 1;
  background: #fafafa;
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
}
:not(.bloghome) .article.everpsblog .everpsblog.article-content a,
:not(.bloghome) .article.everpsblog h3 a {
  color: #000 !important;
  font-size: 1.4rem;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.2;
}
:not(.bloghome) .article.everpsblog .everpsblog.article-content a * {
  position: relative;
  z-index: 4;
}
/* Truco del "area clicable ampliada": el titulo es el unico <a> real,
   pero este ::after (con offset negativo, del ancho exacto de la
   columna de imagen) se solapa VISUALMENTE encima de la imagen -> al
   pinchar la imagen tambien se sigue el enlace del titulo, sin
   necesidad de envolver la imagen en su propio <a> (que no trae el
   marcado nativo). */
:not(.bloghome) .article.everpsblog .everpsblog.article-content a::before,
:not(.bloghome) .article.everpsblog h3 a::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(-1 * var(--blog-img-w));
  width: var(--blog-img-w);
  height: 100%;
  background: transparent;
  z-index: 3;
  cursor: pointer;
  pointer-events: auto;
}
:not(.bloghome) .article.everpsblog .everpsblogcontent {
  color: #555;
  font-size: 1rem;
  line-height: 1.6;
  margin-top: 10px;
}
:not(.bloghome) .article.everpsblog:hover {
  box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
  transition: box-shadow .3s ease;
}
@media (max-width: 992px) {
  :not(.bloghome) .article.everpsblog .row {
    flex-direction: column;
  }
  :not(.bloghome) .article.everpsblog .article-img,
  :not(.bloghome) .article.everpsblog .col-md-8 {
    width: 100%;
    flex: none;
  }
  :not(.bloghome) .article.everpsblog .article-img img {
    height: auto;
  }
  :not(.bloghome) .article.everpsblog .everpsblog.article-content a::before,
  :not(.bloghome) .article.everpsblog h3 a::before {
    left: 0 !important;
    width: 100% !important;
    height: 240px !important;
  }
}
/* Afinado de paleta (solo colores/sombras/radios, sin tocar el layout
   ni el truco del click de arriba). Los selectores usan varias clases
   a proposito (".everpsblog" repetido, ".white" -clase nativa del
   propio enlace del titulo-) para igualar o superar la especificidad
   de las reglas de arriba y ganar siempre, sin depender del orden en
   que queden una y otra en el CSS compilado final (mismo motivo que
   en ".tabs"/checkout/breadcrumb: un simple "!important" no basta si
   la otra regla tambien lo lleva y tiene igual o mas peso). */
body.page-everblog article.everpsblog {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  margin: 24px 0 !important;
}
body.page-everblog article.everpsblog:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-3px);
}
body.page-everblog article.everpsblog h3.everpsblog a.white,
body.page-everblog article.everpsblog .everpsblog.article-content a.white {
  color: var(--brand-dark) !important;
  transition: color .15s ease;
}
body.page-everblog article.everpsblog:hover h3.everpsblog a.white {
  color: var(--brand) !important;
}
body.page-everblog article.everpsblog .everpsblogcontent {
  color: #5a6a6a !important;
}
body.page-everblog h1 {
  color: var(--brand-dark) !important;
  font-weight: 800 !important;
}
body.page-everblog #content.page-content {
  background: #fff !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 32px !important;
}
/* Pedido explicito del usuario: en la pagina de UN articulo del blog
   (no en el listado), el titulo se muestra de forma nativa superpuesto
   SOBRE la foto de cabecera (texto blanco, caja semi-transparente,
   "position:absolute" puesto por el propio modulo de blog) -diseño
   pensado para pantallas anchas-. Por debajo de 600px se pide que el
   titulo salga ENCIMA de la foto (en flujo normal, ANTES que la
   imagen), no superpuesto. El h1 y la foto (".post-header") son
   hermanos dentro del mismo ".container" -se usa ":has()" para
   apuntar SOLO a ese contenedor concreto, no a los demas ".container"
   de la pagina (clase generica de Bootstrap reutilizada en todo el
   sitio)- y se reordena con flexbox sin tocar el HTML.
   El "display:flex"/"order" del contenedor y la foto SI ganan por CSS
   (el tema nativo no los toca). El propio h1 necesita ademas anular
   "position:absolute" + los colores de la superposicion (texto blanco,
   caja semi-transparente) que trae el tema con una especificidad que
   ni repitiendo la clase varias veces se logra superar por CSS (su
   hoja es de otro origen, no se puede inspeccionar por CORS) -> esa
   parte se resuelve por JS (ver "custom.js"/"build-bookmarklet.js",
   funcion "fixBlogPostTitleOverlay"), que al escribir en el estilo
   INLINE del elemento siempre gana sin importar la especificidad de
   la hoja externa. */
@media (max-width: 599px) {
  body.page-everblog-post .container:has(> .post-header) {
    display: flex !important;
    flex-direction: column !important;
  }
  body.page-everblog-post .container:has(> .post-header) > .post-header {
    order: 2 !important;
  }
  body.page-everblog-post .container:has(> .post-header) > br {
    display: none !important;
  }
}

/* =========================================================================
   Logos de fabricantes (".manufacturer-logo", dentro de
   ".product-manufacturer" en la ficha de producto, pero tambien en
   fichas de marca/listados donde reutilice la misma clase) — pedido
   explicito del usuario: "hacer transparentes los pixeles blancos".
   Los propios archivos son ".jpg" servidos desde el CDN del proveedor
   (p.ej. "cdn.itecnoworld.com/img/m/17.jpg") -> un JPG no tiene canal
   alfa, es opaco por formato, asi que no existe ningun "pixel blanco
   transparente" real que activar en el archivo en si. La solucion
   universal para este caso (logo con fondo blanco solido, sin usar
   una version en PNG) es "mix-blend-mode: multiply": al multiplicar
   cada pixel de la imagen contra lo que haya DETRAS, el blanco (255)
   actua como si fuera transparente (no oscurece nada) y el resto de
   colores del logo (mas oscuros) se mantienen visibles con su tono
   real -> funciona sobre cualquier fondo claro (blanco o el verde muy
   claro "--brand-light" que usan otras tarjetas de este tema), que es
   donde vive este logo en la practica. */
.manufacturer-logo {
  mix-blend-mode: multiply !important;
}

/* =========================================================================
   Checkout — pasos renovados. Pedido explicito del usuario: dar un
   aspecto renovado a "1 Datos personales / 2 Direcciones / 3 Método de
   envío / 4 Pago", y solo la primera letra en mayuscula (el texto en
   mayusculas viene de "text-transform:uppercase" nativo, no del HTML:
   el string real ya llega en minusculas o en Title Case segun el paso
   -"Método de envío" trae la "d"/"e" en minuscula, "Datos Personales"
   no- asi que no basta con neutralizar el CSS, hace falta re-escribir
   el texto -> ver "applyCheckoutStepCase" en el JS, mismo patron ya
   usado para el boton "Añadir al carrito"). Aqui solo se neutraliza el
   "text-transform" nativo (evita el parpadeo en mayusculas antes de
   que corra el JS). */
.checkout-step .step-title {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  text-transform: none !important;
  color: #263434 !important;
  font-weight: 700 !important;
}
.checkout-step.-unreachable .step-title {
  color: #9aa5a5 !important;
}
/* Insignia numerada: circulo solido en vez del circulo hueco nativo,
   con los 3 estados ya presentes en el HTML (mm_has_sub aparte):
   pendiente (gris apagado), alcanzable/completado (verde claro de
   marca) y actual (degradado solido + sombra, igual que el resto de
   "badges" destacados de esta hoja). */
.checkout-step .step-number {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 999px !important;
  background: var(--brand-light) !important;
  color: var(--brand-dark) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  border: none !important;
  box-sizing: border-box !important;
}
.checkout-step.-current .step-number {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark)) !important;
  color: #fff !important;
  box-shadow: var(--shadow-md) !important;
}
.checkout-step.-unreachable .step-number {
  background: #f1f3f3 !important;
  color: #b9c2c2 !important;
}
/* El paso ACTUAL se destaca envolviendo su propia cabecera en una
   "pildora" con el verde claro de marca -> sustituye a la simple linea
   divisoria (que se queda para el resto de pasos, ver mas abajo). */
.checkout-step.-current .step-title {
  background: var(--brand-light) !important;
  border-radius: var(--radius-md) !important;
  padding: 14px 16px !important;
  border-bottom: none !important;
  margin-bottom: 8px !important;
}
.checkout-step:not(.-current) .step-title {
  border-bottom: 1px solid rgba(0, 0, 0, .06) !important;
  padding-bottom: 22px !important;
}
/* "Modificar": de simple texto gris a pildora con los colores de
   marca, coherente con el resto de badges/botones de esta hoja. */
.checkout-step .step-edit {
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--brand-dark) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  transition: background .15s ease, color .15s ease !important;
}
.checkout-step .step-edit:hover {
  background: var(--brand) !important;
  color: #fff !important;
}
.checkout-step .step-edit .material-icons {
  font-size: 16px !important;
}
/* BUG reportado por el usuario: en pasos con poco contenido (p.ej.
   paso 3, "Método de envío") el footer aparecia pegado muy arriba,
   dejando una franja blanca vacia debajo. Causa real (confirmado
   midiendo con getBoundingClientRect en la propia pagina): el panel
   desplegable del mega-menu de escritorio (".mm_columns_ul", oculto
   con "visibility:hidden" pero con una altura real fijada por su
   propio JS, para poder animar la visibilidad/opacidad) sigue
   ocupando espacio de LAYOUT aunque sea invisible (a diferencia de
   "display:none") -> como nada entre el mega-menu y <body> recorta ese
   desbordamiento, el area total desplazable de la pagina crece para
   "hacerle sitio" a un panel que nadie ve. En paginas largas (inicio,
   categorias) esto pasa desapercibido porque el contenido real ya
   supera esa altura fantasma; en el checkout (poco contenido) el hueco
   de sobra se nota como una franja en blanco bajo el footer.
   PRIMER INTENTO (descartado): forzar "height:0/overflow:hidden" en el
   propio ".mm_columns_ul" cuando su <li> padre no esta en hover.
   Confirmado en vivo que NO funciona de forma fiable: el propio modulo
   reescribe el "height" inline por su cuenta (measure-and-set, para la
   transicion) de forma CONTINUA, así que en cuanto nuestra regla lo
   pisa, el modulo lo vuelve a pisar a el, sin ganador estable.
   SOLUCION real: recortar mas arriba, en "<header>" (que el modulo NO
   toca), donde nuestra regla ya no tiene que competir con nada. Con
   "overflow:hidden" ahi, el panel fantasma (y cualquier otro
   desbordamiento del header) deja de contar para el alto scrolleable
   de la pagina. El desplegable REAL (cuando el usuario pasa el cursor
   por un item con submenu) necesita poder salirse de esa caja para
   verse completo -> ":has()" detecta ese hover exacto y devuelve
   "overflow:visible" solo mientras dura, así que el mega-menu de
   escritorio se ve y funciona exactamente igual que antes; probado en
   vivo pasando el cursor por "Repuestos para portátiles" con esta
   regla activa: el panel se despliega completo, sin recortar. Acotado
   a "body.page-order" (el checkout) para no tocar ninguna otra pagina
   sin necesidad. */
body.page-order header:not(:has(.mm_menus_li.mm_has_sub:hover)) {
  overflow: hidden !important;
}
/* Pedido explicito del usuario: "el footer debe salir abajo del todo en
   todos los pasos del checkout" -> lo anterior solo evita el
   desplazamiento fantasma, pero no obliga al footer a pegarse al borde
   inferior cuando el contenido real es mas bajo que la pantalla (nada
   en el HTML nativo lo obligaba a eso). "<header>"/"<footer>" NO son
   hijos directos de <body> en esta plantilla, sino de
   "<main>" (junto a "<section id=wrapper>", el contenido real) -> el
   patron clasico de "sticky footer" (flex-column + contenido con
   flex:1 que se estira, footer con su alto natural) se aplica ahi:
   "<main>" pasa a columna flex de al menos 100vh, "#wrapper" absorbe
   TODO el espacio libre (flex:1 0 auto) y "#footer" mantiene su alto
   propio sin encogerse -> con contenido corto (paso 3) el hueco extra
   lo absorbe "#wrapper" (queda con mas aire debajo, no el footer
   suelto en mitad de la pantalla) y el footer siempre queda pegado
   abajo del todo, sea cual sea el paso. */
body.page-order main {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}
body.page-order main #wrapper {
  flex: 1 0 auto !important;
}
body.page-order main #footer {
  flex-shrink: 0 !important;
}

/* FIN DEL REDISE�O VERANO 2026 */


/* Carrito */
#header .header-nav .blockcart{
    height:38px !important;
    padding:0 .75rem !important;
    display:flex;
    align-items:center;
    position:relative;
    top:7px;
}

/* Crear cuenta */
a.btn-register{
    position:relative;
    top:6px;
}


/* Eliminar TODOS los recuadros de enfoque */
*:focus,
*:active,
*:focus-visible,
*:focus-within {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

/* Solo para el �rea de productos */
.product-miniature *:focus,
.product-miniature *:active,
.product-miniature *:focus-visible,
.product-miniature *:focus-within {
    outline: none !important;
    box-shadow: none !important;
}



a.btn-register{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:38px;
    padding:0 18px;
    margin-left:10px;
    vertical-align:middle;
    align-self:center;
    line-height:1;
}

#js-product-list-header {
  border: 2px solid #d1d5db !important;
  border-bottom: none !important;
  border-radius: 14px 14px 0 0 !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.alert.alert-danger {
  background: #fdecea;
  border-left: 5px solid #e53935;
  border-radius: 6px;
  padding: 14px 16px;
  margin: 20px 0;
  font-size: 0.95rem;
  color: #333;
}

.alert.alert-danger ul {
  margin: 0;
  padding-left: 18px;
}

.alert.alert-danger li {
  margin: 0;
}

.alert.alert-warning {
  background: #fff4e5;
  border-left: 5px solid #ff9800;
  border-radius: 6px;
  padding: 16px 18px;
  margin: 20px 0;
  font-size: 0.95rem;
  color: #333;
  line-height: 1.5;
}

/* destacar solo lo importante */
.alert.alert-warning b {
  display: block;
  margin-top: 8px;
  font-weight: 600;
}

#compatibility-alert-rendered {
  background-color: #e8f7ee;     /* verde suave */
  border: 1px solid #28a745;     /* borde verde */
  color: #1e4620;                /* texto m�s oscuro */
  padding: 15px 20px;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 15px 0;
}

/* quitar el negrita bruto del <b> */
#compatibility-alert-rendered b {
  font-weight: 500;
}





html body *:not(.material-icons):not(.material-icons-outlined):not(.material-icons-round):not(.material-icons-sharp):not(.material-icons-two-tone):not(.fa):not(.fas):not(.far):not(.fab) {
  font-family: -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
}


/* ============================================
   🧭 MEGA MENÚ - SOLO PARA RESOLUCIONES ≤ 1198px
   ============================================ */

@media (max-width: 1198px) {

  /* ===== CONTENEDOR PRINCIPAL (borde derecho más discreto) ===== */
  .mm_menus_ul {
    width: calc(100% - 25px) !important;
    max-width: calc(100% - 25px) !important;
    min-width: calc(100% - 25px) !important;
    background: #fff;
    box-shadow: 1px 0 8px rgba(0,0,0,0.2);
  }

  /* ===== CONTENEDOR PADRE ===== */
  .ets_mm_megamenu,
  .ets_mm_megamenu_content {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
  }

  /* ===== ELIMINAR COLUMNAS ===== */
  .mm_columns_ul {
    display: block !important;
    width: 100% !important;
  }

  .mm_columns_li {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }

  /* ===== BLOQUES INTERNOS ===== */
  .mm_blocks_ul,
  .mm_blocks_li {
    width: 100% !important;
    display: block !important;
  }

  /* ===== PADDING AJUSTADO ===== */
  .mm_blocks_li {
    padding: 8px 12px !important;
  }

  /* ===== TÍTULOS ===== */
  .mm_blocks_li .h4 {
    font-size: 15px !important;
    margin-bottom: 5px;
  }

  /* ===== ENLACES ===== */
  .ets_mm_categories li a {
    display: block;
    width: 100%;
    font-size: 14px !important;
    word-break: break-word;
    padding: 6px 0;
  }

  /* ===== ELEMENTOS PRINCIPALES ===== */
  .mm_menu_content_title {
    font-size: 15px !important;
  }

  /* ===== HEADER DEL MENÚ ===== */
  .close_menu .pull-left {
    padding-left: 10px;
  }

  /* ===== OPCIONAL: separación visual suave ===== */
  .mm_blocks_li {
    border-bottom: 1px solid #eee;
  }

  .close_menu .pull-left {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .close_menu .mm_menus_back {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .close_menu .mm_menus_back i {
    display: block;
    margin: 2px 0;
  }
}

/* ============================================
   🧭 MEGA MENÚ - ACORDEÓN MÓVIL (max-width: 765px)
   ============================================ */
@media (max-width: 765px) {

  /* ===== CONTENEDOR GENERAL (SCROLL GLOBAL) ===== */
  .mm_menus_ul {
    background: #fff;
    padding: 0 !important;
    max-height: 100vh;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ===== HEADER MENÚ ===== */
  .close_menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: #f2f2f2;
    font-size: 15px;
    font-weight: 600;
  }

  /* ===== ITEMS PRINCIPALES ===== */
  .mm_menus_li {
    width: 100% !important;
    border-bottom: 1px solid #e5e5e5;
  }

  .mm_menus_li > a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 14px 20px !important;
    font-size: 15px !important;
    line-height: 1.3;
  }

  /* ===== ICONOS ===== */
  .mm_menu_content_title i {
    margin-right: 8px;
    width: 18px;
    text-align: center;
  }

  /* 🔥 FIX ICONO CASA (por si FontAwesome falla) */
  .mm_menu_content_title .fa-home:before {
    content: "\f015" !important;
    font-family: "FontAwesome" !important;
  }

  /* ===== FLECHAS ===== */
  .mm_arrow,
  .arrow {
    font-size: 12px;
    margin-left: auto;
  }

  /* ===== SUBMENÚS (ACORDEÓN SIN LÍMITES) ===== */
  .mm_columns_ul {
    display: block !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fafafa;
    transition: all 0.3s ease;
    border-left: 3px solid #eee;
  }

  /* ===== ESTADO ABIERTO ===== */
  .mm_has_sub.open > .mm_columns_ul,
  .mm_columns_ul.active,
  .mm_columns_ul[style*="display: block"] {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 12px 0 8px !important;
  }

  /* ===== ELIMINAR COLUMNAS ===== */
  .mm_columns_li {
    width: 100% !important;
    display: block !important;
    padding-left: 20px !important;
    margin: 0 !important;
  }

  /* ===== BLOQUES ===== */
  .mm_blocks_ul {
    padding: 0 !important;
    margin: 0 !important;
  }

  .mm_blocks_li {
    margin-bottom: 10px;
  }

  /* ===== TITULOS ===== */
  .mm_blocks_li .h4 {
    font-size: 13px !important;
    font-weight: 600;
    margin: 10px 0 5px;
    padding-left: 10px;
    color: #333;
  }

  /* separación entre bloques */
  .mm_blocks_li + .mm_blocks_li .h4 {
    margin-top: 15px !important;
  }

  /* ===== LINKS ===== */
  .ets_mm_categories li {
    padding-left: 10px;
  }

  .ets_mm_categories li a {
    display: block;
    font-size: 13px !important;
    padding: 8px 0 8px 20px !important;
    line-height: 1.4;
    color: #555;
  }

  /* ===== EFECTO TÁCTIL ===== */
  .mm_menus_li > a:active,
  .ets_mm_categories li a:active {
    background: #f0f0f0;
  }
}


/* ============================================
   🎯 BANNERS
   ============================================ */
#right-column .banner-box {
  margin-bottom: 55px !important;  /* ?? espacio entre banners */
}

.banner-box .banner-text {
  position: relative !important;
  top: 5px !important;   /* ?? baja el bloque entero */
}

.banner-box .banner-text * { color: #000 !important; font-size: 1.1rem !important; /* tamaño base */ }


/* ============================================
   📦 PRODUCTOS
   ============================================ */
#products {
  margin-top: 50px !important;
}


/* ============================================
   🔘 BOTONES TOUCHSPIN (+ / -)
   ============================================ */
.bootstrap-touchspin .btn-touchspin {
  border: 1px solid #ccc !important;
  border-radius: 6px !important;
  background-clip: padding-box;
}

/* Separación interna del touchspin */
.bootstrap-touchspin .input-group-btn-vertical {
  margin-left: 4px;
}

.bootstrap-touchspin .bootstrap-touchspin-up {
  margin-bottom: 2px;
}

.bootstrap-touchspin .bootstrap-touchspin-down {
  margin-top: 2px;
}

/* ===== SEPARACIÓN CON BOTÓN CARRITO (IMPORTANTE) ===== */
.product-quantity {
  display: flex;
  align-items: center;
  gap: 10px;
}


/* ============================================
   🧩 SUBCATEGORÍAS
   ============================================ */
/* ===== SEPARADOR FULL WIDTH ===== */
ul.subcategories-list {
  position: relative;
  margin-bottom: 25px;
  padding-bottom: 15px;
}

ul.subcategories-list::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: #e5e5e5;
  bottom: 0;
}

@media (max-width: 553px) and (min-width: 350px) {

  /* CONTENEDOR */
  ul.subcategories-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0px !important;
    padding: 0 !important;
  }

  /* TARJETAS */
  ul.subcategories-list > li {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 6px !important;
    margin: -6px !important;

    transform: scale(0.84);
    transform-origin: center;

    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  }

  ul.subcategories-list > li:hover {
    transform: scale(0.88) !important;
  }

  /* Último ocupa todo si queda solo */
  ul.subcategories-list > li:last-child:nth-child(odd) {
    grid-column: span 2 !important;
  }

  /* IMAGEN */
  .subcategory-image {
    display: flex;
    justify-content: center;
  }

  .subcategory-image img {
    width: 100% !important;
    max-width: 180px !important;
    height: auto !important;
  }

  /* TÍTULO */
  .subcategory-name {
    display: block;
    font-size: 13px;
    line-height: 1.2;
    min-height: 32px;
  }
}


/* ============================================
   📝 BLOG
   ============================================ */
#content.page-content .everpsblog.article {
  margin-bottom: 35px;
}

#content.page-content .everpsblog.article:last-child {
  margin-bottom: 0;
}


/* ============================================
   🔑 GOOGLE LOGIN
   ============================================ */
.g_id_signin {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 420px) {
  .g_id_signin {
    transform: scale(0.9);
    transform-origin: center;
  }
}

@media (max-width: 380px) {
  .g_id_signin {
    transform: scale(0.85);
    transform-origin: center;
  }
}

@media (max-width: 340px) {
  .g_id_signin {
    transform: scale(0.8);
    transform-origin: center;
  }
}


/* ============================================
   📱 MEDIA QUERIES - RESET Y LAYOUT GENERAL
   ============================================ */
@media (max-width: 500px) {

  /* ===== RESET TOTAL CONTENEDORES ===== */
  #content-wrapper,
  #content,
  .container,
  .row {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* ===== ELIMINAR GRID BOOTSTRAP ===== */
  [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  /* ===== GRID CHECKOUT ===== */
  .cart-grid-body,
  .cart-grid-right {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ===== ORDEN: CONTENIDO ARRIBA, RESUMEN ABAJO ===== */
  .cart-grid-body {
    order: 1;
  }

  .cart-grid-right {
    order: 2;
    margin-top: 10px !important;
  }

  /* ===== PASOS CHECKOUT ===== */
  .checkout-step {
    padding: 12px 10px !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  .checkout-step .content {
    padding: 0 !important;
  }

  /* ===== TITULOS ===== */
  .step-title {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    font-size: 15px !important;
  }

  .material-icons {
    font-size: 18px !important;
  }

  /* ===== DIRECCIONES ===== */
  .address-item {
    padding: 10px !important;
    border-radius: 6px;
  }

  .address {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  /* ===== ENVÍO (ESTILO APP) ===== */
  .delivery-option {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 10px !important;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 8px;
  }

  .delivery-option-2 {
    width: 100% !important;
    padding: 0 !important;
  }

  .delivery-option .row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 5px;
  }

  /* RADIO */
  .delivery-option .custom-radio {
    margin-top: 5px;
  }

  .delivery-option input[type="radio"] {
    transform: scale(1.2);
  }

  /* CARRIER */
  .carrier {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .carrier-logo img {
    max-width: 60px !important;
    height: auto !important;
  }

  .carriere-name-container {
    flex: 1 !important;
  }

  .carrier-name {
    font-size: 14px !important;
  }

  /* PRECIO + TIEMPO */
  .delivery-option .row > div:nth-child(2),
  .delivery-option .row > div:nth-child(3) {
    display: inline-block !important;
    width: auto !important;
    margin-right: 10px;
  }

  .carrier-delay {
    font-size: 13px !important;
    color: #666;
  }

  .carrier-price {
    font-size: 13px !important;
    font-weight: bold;
    color: #000;
  }

  /* ===== MENSAJE ENVÍO ===== */
  #mensaje-envio {
    font-size: 15px !important;
    padding: 10px !important;
  }

  /* ===== FORMULARIOS ===== */
  .form-fields,
  .delivery-options,
  .delivery-options-list {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ===== BOTONES ===== */
  .btn {
    width: 100% !important;
    padding: 10px !important;
    font-size: 14px !important;
  }

  /* CHECKBOX + BOTÓN */
  #js-delivery > div[style*="flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  /* ===== RESUMEN PEDIDO ===== */
  #js-checkout-summary {
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .media {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .media img {
    max-width: 60px !important;
  }

  .media-body {
    font-size: 13px !important;
  }

}


/* ============================================
   📱 MEDIA QUERIES - AJUSTES ESPECÍFICOS
   ============================================ */
@media (max-width: 650px) {
  #mensaje-envio {
    font-family: inherit !important;
    font-size: 14px !important;
    padding: 0.7rem !important;
    line-height: 1.3 !important;
  }

  .tabs .tab-content .product-description,
  .tabs .tab-content .js-product-details {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .product-accessories {
    margin-top: 30px !important;
  }

  #custom-text img {
    display: none !important;
  }

  .products-section-title {
    font-size: 16px !important;
  }

  h2.display-1 {
    font-size: 1.1rem !important;
  }

  h1.h1 {
    font-size: 1.1rem !important;
    line-height: 1.1 !important;
  }

  /* Contenedor del checkbox */
  #js-delivery > div[style*="display:flex"] {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* Label completo */
  #js-delivery label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 6px;
    width: 100%;
  }

  /* Checkbox */
  #js-delivery input[type="checkbox"] {
    flex: 0 0 auto;
    margin-top: 3px;
  }

  /* TEXTO PROBLEMÁTICO */
  #texto_confirmacion_envio {
    display: block;
    font-size: 13px;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
  }

  /* Botón debajo */
  #js-delivery button.continue {
    width: 100%;
    margin-top: 8px;
  }

  /* ===== TITULOS DE PASOS ===== */
  .checkout-step .step-title {
    font-size: 1rem !important;
    line-height: 1.1 !important;
    padding: 8px 10px !important;
  }

  /* Número del paso */
  .checkout-step .step-number {
    font-size: 0.8rem !important;
  }

  /* "Modificar" */
  .checkout-step .step-edit {
    font-size: 0.75rem !important;
  }

  /* Iconos */
  .checkout-step .material-icons {
    font-size: 16px !important;
  }

  /* ===== CONTENIDO ===== */
  .checkout-step .content {
    font-size: 13px;
    padding: 8px !important;
  }

  /* Botones */
  .checkout-step .btn {
    font-size: 13px !important;
    padding: 6px 10px !important;
  }
}


@media (max-width: 450px) {
  #wrapper .container {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  #content.page-content.card,
  #content.page-content.card-block {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #content.page-content .row.mt-2 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #content.page-content .everpsblog.article {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #content.page-content .everpsblog .row > div {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}


#main:has(a[href*="correosexpress"], a[href*="fedex"]) div:has(#YQContainer1) {
    display: none !important;
}


#order-history + .box {
    background: linear-gradient(135deg, #fff3cd, #ffe8a3);
    border: 2px solid #f0c36d;
    border-radius: 10px;
    padding: 18px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    position: relative;
}

#order-history + .box p {
    font-weight: 600;
    color: #7a5a00;
    margin-bottom: 8px;
}

#order-history + .box a {
    display: inline-block;
    margin-top: 10px;
    padding: 12px 16px;
    background: #ffcc00;
    border: 1px solid #e0b000;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    color: #000;
    word-break: break-all;
    transition: all 0.2s ease;
}

#order-history + .box a:hover {
    background: #ffdb4d;
    transform: translateY(-1px);
}

.page-product .input-group-btn-vertical {
  display: flex;
  flex-direction: column;
}

.page-product .bootstrap-touchspin-up {
  order: 2;
}

.page-product .bootstrap-touchspin-down {
  order: 1;
}

/* ===============================
   BOTONES + / - CANTIDAD
================================ */

/* Botones */
.product-quantity .bootstrap-touchspin-up,
.product-quantity .bootstrap-touchspin-down {
    position: relative !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;

    background: #376467 !important;
    border-color: #376467 !important;
    color: #fff !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    transition: 0.3s ease !important;
    box-shadow: 0 2px 3px rgba(0,0,0,.1);
}

/* Hover */
.product-quantity .bootstrap-touchspin-up:hover,
.product-quantity .bootstrap-touchspin-down:hover {
    background: #254845 !important;
    border-color: #254845 !important;
    box-shadow: 0 3px 5px rgba(0,0,0,.15);
}

/* Click */
.product-quantity .bootstrap-touchspin-up:active,
.product-quantity .bootstrap-touchspin-down:active {
    background: #1a3533 !important;
    transform: translateY(1px);
}

/* Ocultar iconos originales */
.product-quantity .material-icons.touchspin-up,
.product-quantity .material-icons.touchspin-down {
    display: none !important;
}

/* Símbolos + y - */
.product-quantity .bootstrap-touchspin-up::after,
.product-quantity .bootstrap-touchspin-down::after {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;

    font-size: 18px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    color: #fff !important;
}

.product-quantity .bootstrap-touchspin-up::after { content: "+"; }
.product-quantity .bootstrap-touchspin-down::after { content: "-"; }

/* Campo cantidad */
.product-quantity .input-group.form-control {
    background: #fff !important;
    border-color: #dee2e6 !important;
    color: #333 !important;
    font-weight: 600 !important;
    text-align: center !important;
}

/* Separación botones */
.product-quantity .input-group-btn-vertical {
    margin-left: 5px !important;
}




/* SOLO arreglar el botón en 768-891px sin tocar nada más */
@media (min-width: 768px) and (max-width: 891px) {
    /* Contenedor completo de cantidad + botón añadir */
    .product-add-to-cart > .product-quantity.clearfix {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
    }
    
    /* Primera línea: input de cantidad + botones +/- */
    .product-add-to-cart .qty {
        width: 100% !important;
        max-width: 250px !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    /* Input group con los botones +/- */
    .product-add-to-cart .input-group.bootstrap-touchspin {
        display: flex !important;
        width: auto !important;
        min-width: 180px !important;
    }
    
    /* Botones +/- */
    .product-add-to-cart .input-group-btn-vertical {
        display: flex !important;
        gap: 8px !important;
    }
    
    /* Segunda línea: botón "Añadir al carrito" */
    .product-add-to-cart .add {
        width: 100% !important;
        margin-top: 0 !important;
    }
    
    .product-add-to-cart .btn-primary.add-to-cart {
        max-width: 250px !important;
        width: 100% !important;
    }
}

/* Esto afecta SOLO a la página de producto */
#wrapper .product-container .input-group.bootstrap-touchspin {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    align-items: center !important;
}

#wrapper .product-container .input-group-btn-vertical {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
}

#wrapper .product-container .bootstrap-touchspin-down,
#wrapper .product-container .bootstrap-touchspin-up {
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    float: none !important;
    display: inline-block !important;
    text-align: center !important;
    line-height: 44px !important;
    padding: 0 !important;
}

/* Opcional: para iconos en la página de producto */
#wrapper .product-container .bootstrap-touchspin-down i,
#wrapper .product-container .bootstrap-touchspin-up i {
    vertical-align: middle !important;
}

.stars-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 4px;
}

.stars-container img {
  width: 120px;
  height: auto;
  max-height: 46px;
  aspect-ratio: 200 / 46;
  display: block;
}

/* ==================================================
   TARJETAS CATEGORÍA + SUBCATEGORÍAS �?ITECNOWORLD
   ================================================== */

/* --------------------------------------------------
   CONTENEDORES PRINCIPALES
-------------------------------------------------- */

#js-product-list-header,
#subcategories {
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    padding: 20px;
    margin-bottom: 30px;
}

/* eliminar estilos nativos */
#js-product-list-header .block-category,
#subcategories.card {
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}

/* --------------------------------------------------
   HEADER DE CATEGORÍA
-------------------------------------------------- */

#js-product-list-header h1 {
    font-weight: 800;
    margin-bottom: 10px;
}

/* --------------------------------------------------
   SUBCATEGORÍAS
-------------------------------------------------- */

#subcategories .subcategories-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
}

/* tarjeta */
#subcategories .subcategories-list li {
    list-style: none;
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #ededed;
    overflow: hidden;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

/* hover */
#subcategories .subcategories-list li:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}

/* --------------------------------------------------
   IMAGEN (NO SE AGRANDA �?NO PIERDE CALIDAD)
-------------------------------------------------- */

#subcategories .subcategory-image {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
    background: #ffffff;
}

#subcategories .subcategory-image,
#subcategories .subcategory-image a,
#subcategories .subcategory-image picture {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    display: block;
}

#subcategories .subcategory-image img {
    width: auto;
    max-width: 160px;
    max-height: 200px;
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* --------------------------------------------------
   CONTENIDO
-------------------------------------------------- */

#subcategories h5 {
    margin: 12px 15px 6px;
    font-weight: 800;
    text-align: center;
}

#subcategories .subcategory-name {
    color: #222;
    text-decoration: none;
}

#subcategories .subcategory-name:hover {
    color: #376467;
}

#subcategories .cat_desc {
    padding: 0 15px 15px;
    font-size: 14px;
    color: #666;
    line-height: 1.4;
    text-align: center;
}





#js-delivery > div:last-child > label {
    background-color: #fff9e6;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid #ffed99;
    margin: 10px 0;
    display: flex;
    align-items: center;
}

#js-delivery > div:last-child > label input[type="checkbox"] {
    margin-right: 10px;
    width: 18px;
    height: 18px;
}

#mensaje-envio {
    margin-top: 1rem;
    padding: 18px 20px;
    font-size: 22px;
    font-weight: 900;
    text-align: center;

    color: #376467 !important;
    background-color: rgba(55, 100, 103, 0.12);
    border: 3px solid #376467;
    border-radius: 8px;

    /* todo en minúsculas */
    text-transform: lowercase;
    letter-spacing: 1px;

    /* parpadea*/
    animation: aviso-parpadeo 1.5s 1;
}

/* SOLO la primera letra en mayúscula */
#mensaje-envio::first-letter {
    text-transform: uppercase;
}

@keyframes aviso-parpadeo {
    0% {
        box-shadow: 0 0 0 rgba(55, 100, 103, 0);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 28px rgba(55, 100, 103, 0.9);
        transform: scale(1.04);
    }
    100% {
        box-shadow: 0 0 0 rgba(55, 100, 103, 0);
        transform: scale(1);
    }
}


article.product-miniature .product-description .js-product-availability {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100%;
}

article.product-miniature .product-description .js-product-availability > div {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}


#_desktop_logo img.logo {
  max-width: 230px;
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

#product-availability {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px;
    line-height: 1.2;
}

#product-availability img {
    display: inline-block !important;
    vertical-align: middle !important;
}




.subcategory-image {
  display: flex;
  align-items: center;
  justify-content: center;
}

.subcategory-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

#fcp-placeholder {
  display: none;
}



body {
  font-family:
    "Manrope",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
}

.comment_anchor span {
    font-size: 11px;
}

@media (min-width: 992px) {
  body#product #content-wrapper {
    width: calc(100% - 260px) !important;
    max-width: calc(100% - 260px) !important;
  }

  body#product #right-column {
    width: 260px !important;
  }
}

@media (min-width: 992px) {

  .footer-container > .container > .row:first-child {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    max-width: none !important;

    /* más ancho real */
    padding-left: 100px;
    padding-right: 100px;
  }

}


#right-column {
  padding-left: 0 !important;
  margin-left: auto;
  transform: translateX(-15px); /* ajusta fino */
}



.lgcomment_summary img.logo {
  max-width: 1600px;     /* ajusta a tu gusto */
  max-height: 40px;    /* ajusta a tu gusto */
  width: auto;
  height: auto;
  object-fit: contain;
}





@media (max-width: 767px) {

    #blockcart-modal img.product-image {
        width: 100%;
        height: auto;
        display: block;
    }

    #blockcart-modal .col-md-6:first-child {
        position: relative;
    }

    #blockcart-modal .col-md-6:first-child::after {
        content: "";
        position: absolute;

        /* Proporciones válidas únicamente en móvil */
        top: 90.88%;
        left: 60.88%;
        width: 21.63%;
        height: 5.5%;

        background: white;
        pointer-events: none;
        z-index: 20;
    }
}



@media (max-width: 767px) {
    .product-cover > img[alt="Shipping info"] {
        width: 35% !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
        bottom: 5% !important;
        right: 3% !important;
        position: absolute !important;
        transform: none !important;
    }
}


@media (max-width: 767px) {
    .js-qv-product-images .thumb-container > div > img[alt="Shipping info"] {
        position: absolute !important;
        bottom: 8px !important;
        right: 4px !important;

        width: 40% !important;   /* Ajusta si lo necesitas */
        height: auto !important;

        top: auto !important;
        left: auto !important;

        object-fit: contain !important;
        pointer-events: none !important;

        transform: none !important;
    }
}




/* =========================================
   SOLO EN LA PÁGINA DE CHECKOUT (PEDIDO)
   ========================================= */

/* Centrar verticalmente el logo en su columna */
body#checkout #_desktop_logo {
    display: flex;
    align-items: center;
}

/* Reducir el logo y evitar que se corte */
body#checkout #_desktop_logo img.logo {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 80px !important;  /* Ajusta si lo quieres más pequeño */
    margin-top: 0 !important;
    display: block;
}

/* Alinear el teléfono/WhatsApp hacia la derecha */
body#checkout .col-md-6.text-xs-right.hidden-sm-down #contact-link {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Separar el WhatsApp del texto Horario */
body#checkout #contact-link a {
    margin-right: 10px;
}

/* Bajar el teléfono un poco */
body#checkout #_desktop_contact_link {
    margin-top: 8px;   /* Ajusta: 5�?5px según te guste */
}






/* 🔧 Ajuste para tablets: entre 768px y 974px aprox */
@media (max-width: 991.98px) and (min-width: 768px) {
  .row.product-container.js-product-container 
    .product-add-to-cart #product-availability.availability-green {
      font-size: 1.3em;        /* un poco más pequeño */
      padding: 14px 18px;      /* menos padding */
      gap: 12px;               /* menos separación */
      width: 100%;             /* que use todo el ancho de su columna */
      box-sizing: border-box;
      flex-wrap: wrap;         /* que el texto pueda saltar debajo del icono si hace falta */
    }

  .row.product-container.js-product-container 
    .product-add-to-cart #product-availability.availability-green img {
      width: 32px;
      height: 32px;
    }
}




/* ===================== */
/* SOLO MODAL DE IMÁGENES */
/* ===================== */

/* Recorte de 3px por arriba en la imagen grande del modal */


#product-modal img.js-modal-product-cover {
    clip-path: inset(3px 0 0 0);
}

/* Necesario para posicionar bien el botón de cierre */
#product-modal .modal-content {
    position: relative !important;
}

/* Botón de cierre (la X de la esquina) solo en el modal */
#product-modal .close-overlay-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(0,0,0,.6);
    color: #fff;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    z-index: 9999;
}

/* Marco grueso hacia el interior en la miniatura seleccionada (solo modal) */
#product-modal .modal-content .modal-body .product-images img.js-modal-thumb.selected {
    outline: 5px solid #376467;  /* grosor del marco */
    outline-offset: -5px;        /* lo mete hacia dentro */
    border: none;
}

/* Hover más fino que la seleccionada (solo modal) */
#product-modal .modal-content .modal-body .product-images img.js-modal-thumb:hover {
    border: 2px solid #376467;
    box-sizing: border-box;
}

/* =============================== */
/* RECORTE SOLO EN EL MODAL, NO FICHA */
/* Primera miniatura del modal     */
/* =============================== */

/* �?Solo recortamos la imagen de la primera miniatura del modal */
#product-modal .js-modal-product-images > li.thumb-container:first-child img.thumb.js-modal-thumb {
    clip-path: inset(1px 0 1px 0); /* 2px arriba y 2px abajo */
}

/* Imagen de esa PRIMERA miniatura:
   más alta para poder cortar 2px arriba y 2px abajo */
#product-modal .js-modal-product-images > li.thumb-container:first-child img.thumb.js-modal-thumb {
    display: block;
    width: 148px;
    height: 152px;   /* 148 + 4px = 2px arriba + 2px abajo */
    margin-top: -2px;
}





/* Cualquier enlace dentro del label que contenga un checkbox */
#customer-form .custom-checkbox label:has(input[type="checkbox"]) a {
  display: block;              /* Siempre a línea aparte */
  text-decoration: underline;  /* Siempre subrayado */
  margin: 4px 0 0 !important;  /* Espacio limpio arriba */
}

#customer-form .custom-checkbox label:has(input[type="checkbox"]) > a {
  display: block;
  text-decoration: underline;
  margin: 2px 0 0 !important;
}


#lgcomment .productComment .nick .order {
  display: inline;         
  margin-left: 6px;
  color: #34c759;
  font-weight: 600;
  font-size: 0.85rem;
  background: none;
  padding: 0;
  vertical-align: baseline;
  text-decoration: underline;
  text-decoration-color: #a8e6a3;  /* verde más suave */
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;      /* separa un poco del texto */
}


.lgcomments_law_block {
  background: none !important;
  padding: 0 !important;
  border: none !important;
  margin-top: 10px !important;
  text-align: left !important;   /* fuerza la alineación */
}


/* CLS: #lgcomment llega VACÍO en el HTML servido por el servidor y el
   propio módulo lgcomments le inyecta el contenido por JS unos ms después
   de terminar de cargar (aviso legal como mínimo, o reseñas reales si las
   hay), pasando de 0px a ~20px+ de golpe. Confirmado con PerformanceObserver
   real: h pasa de 0.0 a 20.0 en la carga. Reservamos la altura del caso
   mínimo (solo aviso legal, sin reseñas) para eliminar ese salto en el caso
   más habitual; si el producto sí tiene reseñas reales el bloque crecerá
   por encima de este mínimo al rellenarse, igual que cualquier contenido
   dinámico cuyo tamaño final no puede conocerse de antemano en CSS puro. */
#lgcomment {
  min-height: 20px;
}


/* ===============================
   Badge de Compra Verificada
   =============================== */
.verified-badge {
  display: inline-block;    /* la pastilla se adapta al texto */
  font-weight: 600;
  padding: 3px 6px;
  border: 1px solid #2e7d32;
  border-radius: 5px;
  background: #e8f5e9;
  line-height: 1.2;
  color: #2e7d32;
  font-size: 12px;
}



/* ===============================
   SOLO afecta a #favoriteproducts_block_account
   =============================== */

/* Ancho del formulario y centrado */
#favoriteproducts_block_account form {
  max-width: 850px;
  margin: 0 auto;
}

/* Recuadros por sección (fieldset) */
#favoriteproducts_block_account fieldset {
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
  padding: 40px 15px 15px !important;  /* aire arriba para el legend */
  margin-bottom: 15px !important;
  background: #fafafa !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  position: relative;
}

/* Títulos de sección dentro del recuadro (bajados) */
#favoriteproducts_block_account legend.info-title {
  display: block;
  float: none;
  width: auto;
  margin: 20px 0 12px 0;  /* baja el título */
  padding: 0;
  line-height: 1.2;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

/* Tablas internas sin bordes/sombras */
#favoriteproducts_block_account .std.table,
#favoriteproducts_block_account .std.table thead,
#favoriteproducts_block_account .std.table tbody,
#favoriteproducts_block_account .std.table tr,
#favoriteproducts_block_account .std.table th,
#favoriteproducts_block_account .std.table td {
  border: 0 !important;
  box-shadow: none !important;
}
#favoriteproducts_block_account .std.table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Estrellas dentro del bloque (más grandes/claras) */
#favoriteproducts_block_account img[alt="rating"] {
  width: 65px !important;   /* ajusta aquí (p.ej., 60/70) */
  height: auto !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Campos del formulario �?estilo limpio */
#favoriteproducts_block_account input:not([type="hidden"]),
#favoriteproducts_block_account textarea,
#favoriteproducts_block_account select,
#favoriteproducts_block_account .form-control {
  border: 1px solid #ccc !important;
  background: #fff !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 14px;
}

/* Textarea de TÍTULO más alto (solo los títulos) */
#favoriteproducts_block_account textarea[name^="product_title"],
#favoriteproducts_block_account textarea[name="title_store"] {
  height: 40px !important;   /* antes 34px */
  resize: none;
}

/* Campo “Nombre�?pequeño */
#favoriteproducts_block_account #lg_nick {
  width: 250px !important;
  height: 30px !important;
  resize: none;
  display: block;
}

/* Focus agradable */
#favoriteproducts_block_account input:not([type="hidden"]):focus,
#favoriteproducts_block_account textarea:focus,
#favoriteproducts_block_account select:focus,
#favoriteproducts_block_account .form-control:focus {
  border-color: #376467 !important;
  box-shadow: 0 0 0 2px rgba(55,100,103,.15) !important;
  outline: none !important;
}

/* Wrappers comunes sin bordes/sombras */
#favoriteproducts_block_account .form-group,
#favoriteproducts_block_account .input-group,
#favoriteproducts_block_account .item,
#favoriteproducts_block_account .history_link {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Botón Enviar (opcional, por coherencia) */
#favoriteproducts_block_account #sendcomments.button,
#favoriteproducts_block_account #sendcomments.btn {
  color: #fff !important;
  font-weight: 700 !important;
  border: none !important;
  background-color: #376467 !important;
  border-radius: 6px !important;
  padding: 8px 14px !important;
  box-shadow: none !important;
  cursor: pointer;
}
#favoriteproducts_block_account #sendcomments.button:hover,
#favoriteproducts_block_account #sendcomments.btn:hover {
  filter: brightness(1.1);
}


/* Bloque general del comentario */
.productComment {
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 8px 10px;
  margin: 10px 0;
  font-family: Arial, sans-serif;
}

/* Cabecera: �?+ meta en 1ª fila, Título en 2ª fila */
.productComment .info-block {
  display: grid !important;
  grid-template-columns: max-content max-content;  /* �?| meta */
  grid-template-areas:
    "stars meta"
    "title title";
  column-gap: 6px;    /* separación mínima entre �?y meta */
  row-gap: 4px;       /* separación con el título */
  align-items: center;
  justify-content: start;
}

/* Estrellas (1ª fila, col 1) */
.productComment .info-block img[alt="rating"] {
  grid-area: stars;
  width: 95px !important;
  height: auto !important;
  margin: 0;
}

/* Meta (fecha + autor) �?al lado de las estrellas */
.productComment .info-block .row {
  grid-area: meta;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;   /* baja un poco el bloque meta */
  flex-wrap: nowrap;
  position: relative;
  top: 2px;          /* 👈 ajuste fino para alinearlo con las estrellas */
}

/* Neutralizar Bootstrap dentro de este bloque */
.productComment .info-block .row > [class^="col-"] {
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}

/* Fecha y autor */
.productComment .date {
  font-size: 13px;
  color: #666;
  white-space: nowrap;
  margin: 0;
}
.productComment .nick {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.productComment .nick span {
  font-size: 14px;
  font-weight: 600;
  color: #376467;
}

/* Título (debajo de la cabecera) */
.productComment .title {
  grid-area: title;
  font-size: 14px;
  font-weight: 700;
  color: #333;
  margin: 0;
}

/* Descripción (último bloque) */
.productComment .content-block {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.4;
  color: #444;
}



.content-button .lgcomment_button {
  color: #fff !important;       /* texto blanco */
  font-weight: bold !important; /* negrita */
}

/* También forzamos al span interior por si Bootstrap lo sobreescribe */
.content-button .lgcomment_button span {
  color: #fff !important;
  font-weight: bold !important;
}



/* Solo español: lang="es" o "es-ES" */
html[lang|="es"] form#post-product-comment-form label.form-label[for="comment_title"]{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:0; /* oculta el texto original */
}
html[lang|="es"] form#post-product-comment-form label.form-label[for="comment_title"]::before{
  content:"Título";
  font-size:14px;
  font-weight:bold; /* en negrita */
}
html[lang|="es"] form#post-product-comment-form label.form-label[for="comment_title"] > sup{
  font-size:12px;
  font-weight:normal;
}

/* "Reseña" -> "Opinión" */
html[lang|="es"] form#post-product-comment-form label.form-label[for="comment_content"]{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:0;
}
html[lang|="es"] form#post-product-comment-form label.form-label[for="comment_content"]::before{
  content:"Opinión";
  font-size:14px;
  font-weight:bold;
}
html[lang|="es"] form#post-product-comment-form label.form-label[for="comment_content"] > sup{
  font-size:12px;
  font-weight:normal;
}

/* Aviso del rating */
html[lang|="es"] form#post-product-comment-form #ratingNotChosen{
  font-size:0;
}
html[lang|="es"] form#post-product-comment-form #ratingNotChosen::before{
  content:"* Por favor, elija el nivel de satisfacción para su opinión";
  font-size:13px;
}



.transition_floating .close_menu,
.transition_floating .close_menu * {
    background-color: #fff !important;  /* Fondo blanco */
    color: #000 !important;             /* Texto negro */
    text-transform: capitalize !important; /* Primera letra mayúscula */
    font-weight: 700 !important;        /* Mantener grosor */
    font-size: 20px !important;
    line-height: 26px !important;
    text-align: center !important;
    cursor: pointer !important;
}

.transition_floating .close_menu .icon-bar {
    background-color: #000 !important;
}

.transition_floating .close_menu .mm_menus_back_icon {
    border-left-color: #000 !important;
    border-top-color: #000 !important;
}

.transition_floating .close_menu .mm_menus_back,
.transition_floating .close_menu .mm_menus_back_icon {
    display: inline-block !important;
    vertical-align: middle !important;
}

@media (max-width: 1199px) {
    .transition_floating .mm_menus_ul {
        max-width: none !important;
        width: 70% !important;
        transform: translateX(-100%) !important;
        transition: transform 0.35s ease !important;
        visibility: hidden !important;
        opacity: 0.6 !important;
    }

    .transition_floating .mm_menus_ul.active {
        transform: translateX(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .transition_floating .ybc-menu-toggle.opened:before {
        background-color: rgba(0, 0, 0, 0.4) !important;
        position: fixed !important;
        top: 0 !important;
        left: 70% !important;
        width: 30% !important;
        height: 100% !important;
        z-index: 9998 !important;
        content: '' !important;
    }
}




#js-product-list .products {
  display: flex;
  flex-wrap: wrap;
  gap: 42px; /* más separación */
}

#js-product-list .products .thumbnail-container {
  flex: 1 1 calc(25% - 12px);
  min-width: 180px;
  background: #fff;
  border-radius: 8px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}


/* Contenedor principal de la miniatura */
.thumbnail-container {
  display: block;
  background: #fff; /* igual que en dropdown */
  border-radius: 8px;
  padding: 10px;
  box-sizing: border-box;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden; /* para que border-radius afecte a todo */
  text-align: center;
}

/* Hover con sombra ligera + mínimo zoom */
.thumbnail-container:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transform: translateZ(0) scale(1.01);
  z-index: 2;
}

/* Imagen ajustada */
.thumbnail-container img {
  border-radius: 6px;
  display: block;
  width: 100%;
  height: auto;
}

/* Texto "Ver producto" siempre visible */
.thumbnail-container .go-to-product {
  display: inline-block;
  margin-top: 10px; /* separa del borde inferior o imagen */
  color: #000 !important; /* negro */
  text-decoration: none;
  font-weight: 600; /* más llamativo */
  font-size: 0.95em;
  transition: color 0.25s ease;
}

/* Icono lupa en negro */
.thumbnail-container .go-to-product .material-icons {
  color: #000 !important;
  vertical-align: middle;
  margin-right: 4px;
  font-size: 18px;
}

/* Hover para el enlace */
.thumbnail-container .go-to-product:hover {
  color: #333 !important; /* gris oscuro */
}

/* OPCIONAL: Si quieres que "Ver producto" solo aparezca al pasar el mouse */
.thumbnail-container .go-to-product {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  margin-top: 10px;
}

.thumbnail-container:hover .go-to-product {
  opacity: 1;
  pointer-events: auto;
}




/* Fondo del dropdown completo (usa el id real del <ul>) */
#ui-id-1 {
  position: relative;
  border: none !important;
  padding: 16px !important; /* más espacio interno */
  border-radius: 10px !important;
  background: transparent !important; /* lo pinta el ::before */
}

/* Capa de fondo que cubre 100% aunque haya wrappers con estilos raros */
#ui-id-1::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #f6f6f6; /* Color de fondo del listado */
  border-radius: 10px;
  z-index: 0;
}

/* Todo el contenido por encima del fondo */
#ui-id-1 > * {
  position: relative;
  z-index: 1;
}

/* Limpieza de wrappers que meten fondos */
#ui-id-1.ui-widget.ui-widget-content,
#ui-id-1 .ui-menu,
#ui-id-1 .ui-menu-item-wrapper,
#ui-id-1 .ui-state-hover,
#ui-id-1 .ui-state-active,
#ui-id-1 .separator {
  background: transparent !important;
  border: none !important;
}

/* Items - más separación entre ellos */
#ui-id-1 .ui-menu-item {
  margin: 12px 0; /* antes 6px, ahora más espacio */
  padding: 0;
  list-style: none;
}

/* Miniatura SIEMPRE blanca y a ancho completo */
#ui-id-1 .ui-menu-item > a.product.ui-corner-all {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: #fff !important;
  border-radius: 8px;
  padding: 10px;
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Hover más sutil: sombra ligera + mínimo zoom */
#ui-id-1 .ui-menu-item > a.product.ui-corner-all:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); /* sombra más suave */
  transform: translateZ(0) scale(1.01); /* menos zoom */
  z-index: 2;
}

/* Mantén el chip de stock con su color */
#ui-id-1 .jolisearch-stock {
  background: rgb(230, 255, 230) !important;
}




@media (max-width: 650px) {
  #js-product-list .products {
    display: grid !important;
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 10px;
    margin: 0 !important;
    padding: 0 !important;
  }

  .js-product.product {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
    box-sizing: border-box !important;
  }
}




/* Diseño normal (pantallas grandes): tu código actual */
.bloghome .article.everpsblog {
  display: flex !important;
  align-items: center !important;
  background: #fff !important;
  padding: 25px 15px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
}

.bloghome .article.everpsblog .article-img {
  flex: 0 0 200px !important;
  margin-right: 20px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.bloghome .article.everpsblog .article-img img {
  width: 100% !important;
  height: auto !important;
  max-height: 120px !important;
  object-fit: cover !important;
  border-radius: 5px !important;
}

.bloghome .article.everpsblog .article-content {
  flex: 1 !important;
  text-align: left !important;
}

/* �?Responsive: cambia el layout en pantallas pequeñas */
@media (max-width: 768px) {
  .bloghome .article.everpsblog {
    flex-direction: column !important; /* imagen arriba, texto abajo */
    text-align: center !important;
    padding: 15px !important;
  }

  .bloghome .article.everpsblog .article-img {
    flex: unset !important; /* anula el ancho fijo */
    margin-right: 0 !important;
    margin-bottom: 15px !important; /* separa imagen del texto */
    width: 100% !important; /* imagen ocupa todo el ancho */
    max-width: 300px !important; /* opcional, para no hacerla gigante */
  }

  .bloghome .article.everpsblog .article-img img {
    max-height: 200px !important; /* aumenta un poco en mobile */
  }

  .bloghome .article.everpsblog .article-content {
    text-align: center !important;
  }
}




.jolisearch-image {
    display: block;
    width: auto;
    height: auto;
    object-fit: cover;
    clip-path: polygon(
        5px 5px,                              /* esquina superior izquierda */
        calc(100% - 5px) 5px,                 /* esquina superior derecha */
        calc(100% - 5px) calc(100% - 25px),   /* lado derecho subiendo 25px */
        50% calc(100% - 25px),                /* punto central superior del corte */
        50% calc(100% - 6px),                 /* punto central inferior */
        5px calc(100% - 6px)                  /* esquina inferior izquierda */
    );
}



.bloghome {
  display: flex !important;
  flex-direction: column !important;
  gap: 30px !important; /* más espacio entre artículos */
  width: 100% !important;
}





.product.ui-menu-item a { display: block !important; border: 1px solid #eee !important; /* contorno más claro */ border-radius: 8px !important; /* bordes redondeados */ overflow: hidden !important; background-color: #fff !important; box-sizing: border-box; width: 100%; } .jolisearch-image { display: block; width: 100%; height: auto; object-fit: cover; clip-path: polygon( 5px 5px, /* esquina superior izquierda */ calc(100% - 5px) 5px, /* esquina superior derecha */ calc(100% - 5px) calc(100% - 25px), /* derecha inferior recortada 25px */ 50% calc(100% - 25px), /* punto central inferior recortado 25px */ 50% calc(100% - 10px), /* escalón hacia arriba desde la izquierda */ 5px calc(100% - 10px) /* esquina inferior izquierda (ahora 10px) */ ); } /* Texto que escribe el usuario */ #checkout-guest-form input.form-control { font-weight: bold !important; color: #000000 !important; } /* Placeholder */ #checkout-guest-form input::placeholder { font-weight: bold !important; color: #000000 !important; } /* Etiquetas */ #checkout-guest-form label { font-weight: bold !important; color: #000000 !important; } #checkout-guest-form, #checkout-guest-form *:not(.btn):not(.btn-primary):not(button) { font-family: Verdana, Arial, sans-serif !important; color: #707070 !important; } #checkout-guest-form { color: #707070 !important; /* texto general en gris */ } #checkout-guest-form h2 { font-weight: bold !important; font-size: 1.8em !important; /* aumenta el tamaño del título */ color: #707070 !important; /* asegura el mismo gris para títulos */ } #checkout-guest-form a { color: #198195 !important; /* color corporativo para hipervínculos */ font-weight: bold !important; /* enlaces en negrita */ } /* === RESET de reglas problemáticas === */ :not(.bloghome) .article.everpsblog .everpsblog.article-content a, :not(.bloghome) .article.everpsblog h3 a { display: inline-block !important; position: static !important; width: auto !important; height: auto !important; padding: 0 !important; box-sizing: border-box !important; text-decoration: none !important; } /* === Layout base (foto 35% - texto 65%) === */ :root { --blog-img-w: 35%; } :not(.bloghome) .article.everpsblog { width: 100%; margin: 20px 0; background: #fff; border-radius: 10px; overflow: visible; box-shadow: 0 4px 12px rgba(0,0,0,0.08); font-family: inherit; position: relative; } :not(.bloghome) .article.everpsblog .row { display: flex !important; flex-wrap: nowrap; align-items: stretch; margin: 0; position: relative; } :not(.bloghome) .article.everpsblog .article-img { flex: 0 0 var(--blog-img-w); overflow: hidden; position: relative; z-index: 1; } :not(.bloghome) .article.everpsblog .article-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; } :not(.bloghome) .article.everpsblog .article-img:hover img { transform: scale(1.05); } :not(.bloghome) .article.everpsblog .col-md-8 { flex: 1; background: #fafafa; padding: 25px; display: flex; flex-direction: column; justify-content: flex-start; position: relative; } /* estilo del título */ :not(.bloghome) .article.everpsblog .everpsblog.article-content a, :not(.bloghome) .article.everpsblog h3 a { color: #000 !important; font-size: 1.4rem; font-weight: bold; text-decoration: none; line-height: 1.2; } :not(.bloghome) .article.everpsblog .everpsblog.article-content a * { position: relative; z-index: 4; } /* pseudo-elemento para extender área clicable */ :not(.bloghome) .article.everpsblog .everpsblog.article-content a::before, :not(.bloghome) .article.everpsblog h3 a::before { content: ""; position: absolute; top: 0; left: calc(-1 * var(--blog-img-w)); width: var(--blog-img-w); height: 100%; background: transparent; z-index: 3; cursor: pointer; pointer-events: auto; } /* resumen / extracto */ :not(.bloghome) .article.everpsblog .everpsblogcontent { color: #555; font-size: 1rem; line-height: 1.6; margin-top: 10px; } /* efecto hover */ :not(.bloghome) .article.everpsblog:hover { box-shadow: 0 8px 18px rgba(0,0,0,0.12); transition: box-shadow .3s ease; } /* === Responsive === */ @media (max-width: 992px) { :not(.bloghome) .article.everpsblog .row { flex-direction: column; } :not(.bloghome) .article.everpsblog .article-img, :not(.bloghome) .article.everpsblog .col-md-8 { width: 100%; flex: none; } :not(.bloghome) .article.everpsblog .article-img img { height: auto; } :not(.bloghome) .article.everpsblog .everpsblog.article-content a::before, :not(.bloghome) .article.everpsblog h3 a::before { left: 0 !important; width: 100% !important; height: 240px !important; } } #search-box { width: 100% !important; max-width: 100% !important; } body.joli-open #search-box { max-width: 723px !important; } .jolisearch-title { display: none !important; } #module-everpsblog-post #content-wrapper .postcontent > p:first-of-type { position: relative; line-height: 1.6; } #module-everpsblog-post #content-wrapper .postcontent > p:first-of-type::first-letter { position: absolute; top: 0; left: 0; font-size: 2.5rem; font-weight: bold; color: #000; font-family: 'Georgia', serif; margin-right: 10px; line-height: 1; } #module-everpsblog-post #content-wrapper .container, #module-everpsblog-post #content-wrapper .row { margin: 0 !important; padding: 0 !important; } #module-everpsblog-post #content-wrapper .postcontent, #module-everpsblog-post #content-wrapper .postcontent * { color: #000 !important; } #module-everpsblog-post #content-wrapper #content { display: flex; flex-direction: column; align-items: center; } #module-everpsblog-post #content-wrapper .content > .container { position: relative; max-width: 800px; margin: 0 auto 20px auto; } #module-everpsblog-post #content-wrapper .content > .container > br { display: none !important; } #module-everpsblog-post #content-wrapper .post-header { width: 100%; } #module-everpsblog-post #content-wrapper .post-header img.post-featured-image { display: block; width: 100%; max-width: 800px; margin: 0 auto; border-radius: 12px; } #module-everpsblog-post #content-wrapper .content > .container > h1.text-center { position: absolute !important; left: 40px !important; bottom: 16px !important; transform: none !important; margin: 0 !important; text-align: left !important; color: #fff !important; background: rgba(0, 0, 0, 0.5) !important; padding: 10px 15px !important; border-radius: 6px !important; font-size: 2rem !important; font-weight: 700 !important; line-height: 1.2 !important; max-width: calc(100% - 80px) !important; box-sizing: border-box !important; z-index: 2; } #module-everpsblog-post #content-wrapper .postcontent { width: 100%; max-width: 800px; margin: 0 auto; padding: 25px 40px; background: #fff; border-radius: 12px; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05); text-align: justify; } #module-everpsblog-post #content-wrapper .postcontent * { box-sizing: border-box; max-width: 100%; } @media (max-width: 768px) { #module-everpsblog-post #content-wrapper .content > .container > h1.text-center { font-size: 1.4rem !important; padding: 8px 12px !important; left: 20px !important; bottom: 12px !important; max-width: calc(100% - 40px) !important; } #module-everpsblog-post #content-wrapper .postcontent { padding: 20px; text-align: left; } } #checkout-personal-information-step .content > .mx-auto:has(.g_id_signin):has(~ .tab-content .g_id_signin) { display: none !important; } /* Animación del temblor */ @keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } } /* Si el formulario es inválido y el botón se pulsa, tiembla */ #customer-form:invalid .continue:active { animation: shake 0.4s ease; } /* Además, si quieres que se vea gris cuando está incompleto */ #customer-form:invalid .continue.btn-primary { background-color: #ccc !important; border-color: #ccc !important; color: #666 !important; } button.btn[data-action="show-password"] { background-color: #376467 !important; color: #fff !important; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; } button.btn[data-action="show-password"]:hover { background-color: #2d5253 !important; /* Un tono más oscuro al pasar el ratón */ } /* Botón Mostrar/Ocultar */ button.btn[data-action="show-password"], /* Botón Continuar */ button.continue.btn.btn-primary { background-color: #376467 !important; color: #fff !important; border: none !important; padding: 8px 16px !important; border-radius: 4px !important; cursor: pointer; font-weight: bold; } /* SOLO en el formulario de registro: requisitos de contraseña */ #customer-form .password-requirements i.material-icons { text-indent: -9999px; /* oculta el texto visualmente */ overflow: hidden; display: inline-block; width: 24px; height: 24px; background: no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23BDBDBD" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1.41 14.41L6.7 12.7a.996.996 0 111.41-1.41L11 13.17l4.88-4.88a.996.996 0 111.41 1.41l-5.59 5.59z"/></svg>'); } /* Estado correcto (verde) */ #customer-form .password-requirements i.material-icons.text-success { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%2328a745" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1.41 14.41L6.7 12.7a.996.996 0 111.41-1.41L11 13.17l4.88-4.88a.996.996 0 111.41 1.41l-5.59 5.59z"/></svg>'); } /* Opcional: estado error (rojo) si lo usas */ #customer-form .password-requirements i.material-icons.text-danger { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23dc3545" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1.41 14.41L6.7 12.7a.996.996 0 111.41-1.41L11 13.17l4.88-4.88a.996.996 0 111.41 1.41l-5.59 5.59z"/></svg>'); } /* Contenedor del checkbox */ .custom-checkbox { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 15px; font-size: 14px; color: #333; } /* Ocultamos el input real */ .custom-checkbox input[type="checkbox"] { display: none; } /* Estilo del span que actúa como checkbox */ .custom-checkbox label span { width: 20px; height: 20px; border: 2px solid #376467; border-radius: 4px; display: inline-block; position: relative; background: #fff; transition: all 0.3s ease; } /* Check cuando está marcado */ .custom-checkbox input[type="checkbox"]:checked + span { background-color: #376467; border-color: #376467; } .custom-checkbox input[type="checkbox"]:checked + span::after { content: ""; position: absolute; top: 4px; left: 6px; width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } /* Eliminamos completamente el ícono de material icons */ .custom-checkbox .material-icons { display: none !important; } /* Texto adicional debajo del checkbox */ .custom-checkbox em { display: block; font-size: 12px; color: #666; margin-top: 4px; font-style: normal; }





.tab-content,
.tab-content * {
  font-family: 'Arial', sans-serif !important;
  font-size: 14px !important;
  color: #333333 !important;
  line-height: 1.5 !important;
  font-weight: normal !important;
  margin: 0 0 1em 0 !important;
}

.tab-content strong,
.tab-content b {
  font-weight: bold !important;
}

#product-modal .modal-content {
  transform: scale(1.3); /* 30% más grande */
  transform-origin: top left;
  width: 130%;
  height: 130%;
}

.mm_columns_ul {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 40px;
  width: 70vw !important;
  max-width: none !important;
  font-size: 12px;
  top: 40px;
  overflow-x: auto;
  overflow-y: auto;
  max-height: 450px;
  position: absolute;
  left: 15vw;
  background: white;
  border: 1px solid #ccc;
  padding: 20px 35px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  z-index: 9999;
  border-radius: 6px;
  white-space: nowrap;
  scrollbar-width: thick; /* Firefox */
  scrollbar-color: #999 #e0e0e0; /* Firefox */
}

/* Scrollbar para navegadores WebKit */
.mm_columns_ul::-webkit-scrollbar {
  height: 12px;
  width: 12px;
}

.mm_columns_ul::-webkit-scrollbar-track {
  background: #e0e0e0;
  border-radius: 10px;
}

.mm_columns_ul::-webkit-scrollbar-thumb {
  background-color: #999;
  border-radius: 10px;
  border: 2px solid #e0e0e0;
}

/* Estilo de las categorías */
.ets_mm_block.mm_block_type_category {
  font-size: 12px;
  font-weight: normal;
}

/* Título de categoría */
.ets_mm_block.mm_block_type_category > .h4 {
  font-size: 14px !important;
  font-weight: bold;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 460px;
}

/* Subcategorías */
.ets_mm_block.mm_block_type_category li,
.ets_mm_block.mm_block_type_category a {
  font-size: 12px !important;
  font-weight: normal !important;
  white-space: normal;
}



/* Quitar fondo en todos los spans */
#order-history table.table tbody tr span.label.label-pill.bright,
#order-history table.table tbody tr td {
  background-color: transparent !important;
}

/* Primera fila: negrita en los spans y en todos los TD */
#order-history table.table tbody tr:nth-child(1) span.label.label-pill.bright,
#order-history table.table tbody tr:nth-child(1) td {
  font-weight: bold !important;
}

/* Primera columna: negrita en los TD */
#order-history table.table tbody tr td:first-child {
  font-weight: bold !important;
}

/* Resto filas y columnas: texto normal */
#order-history table.table tbody tr:not(:nth-child(1)) span.label.label-pill.bright,
#order-history table.table tbody tr:not(:nth-child(1)) td,
#order-history table.table tbody tr td:not(:first-child) {
  font-weight: normal !important;
}

#YQContainer1 {
  border: 1px solid rgb(224, 224, 224);
  box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 1px 0px;
  overflow: hidden; /* para que no se vea nada fuera */
  height: 500px; /* ajusta al tamaño del iframe recortado */
  position: relative;
}

#YQContainer1 iframe {
  border: none !important;
  clip-path: inset(56px 0 135px 0) !important;
  width: 100%;
  height: 100%; /* para que llene el contenedor */
  display: block;
}


#YQContainer1 iframe {
  width: 100%;
  height: 500px; /* lo que necesites para mostrar */
  border: none;
  clip-path: inset(56px 0 0 0); /* recorta 300px desde arriba */
}


.gdpr_wrapper.footer {
    padding: 1px !important;
}

.gdpr_button .gdpr_btn_accept {
    margin-left: 15px !important;
}

.ets_mm_megamenu.bg_submenu::before,
.ets_mm_megamenu.bg_submenu::after {
    display: none !important;
    background: transparent !important;
}

.bloghome .row {
    background-color: white;
}

.bloghome .bloghometitle {
    background-color: transparent;
}

.bloghome .article {
    background-color: white;
    padding: 30px 0;
}

.bloghome .bloghometitle h2 {
    background-color: transparent;
}

.blockreassurance_product {
    margin-left: 20px;
}

#right-column a img {
  background: white;
  display: block;
  clip-path: inset(2px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
  margin: 10px 0;
  position: relative;
  z-index: 1;
}

#latestBlogPosts img {
  box-shadow: none;
}

#right-column a:nth-of-type(2)::after {
  content: '';
  display: block;
  height: 20px;
}

#latestBlogPosts {
  margin-top: 20px;
}

#custom-text img {
  filter: brightness(1.18);
}

.header-nav {
  margin-top: 0 !important;
  padding-top: 5px !important;
  margin-bottom: 0 !important;
}

.mm_menu_content_title {
    min-height: 40px !important;
}

#contact-link {
  display: flex;
  align-items: center;
  height: 51px;
}

#contact-link a {
  display: flex;
  align-items: center;
  margin-right: 12px;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

#contact-link img {
  width: 20px;
  height: 20px;
  display: block;
  margin-right: 5px;
}

#contact-link span {
  line-height: 1;
  display: flex;
  align-items: center;
  height: 100%;
}

.tabs {
  border-left: 5px solid #007b5e !important;
  border-radius: 8px !important;
  padding: 20px 25px !important;
  margin-top: 55px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
  background: none !important;
}

.tabs .nav-tabs .nav-link {
  color: #444 !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  transition: 0.3s !important;
  background-color: transparent !important;
}

.tabs .nav-tabs .nav-link.active {
  color: #007b5e !important;
  border-bottom: 3px solid #007b5e !important;
  background-color: transparent !important;
}

.tabs .tab-content {
  margin-top: 20px !important;
}

.tabs .product-description {
  font-size: 1.15em !important;
  color: #2c2c2c !important;
  line-height: 1.75em !important;
  font-family: "Arial", sans-serif !important;
}

.product-flags li.product-flag {
  display: none !important;
}

/* Antes solo aplicaba con ".ss-show" (clase que añade ets_superspeed
   via AJAX, en modules/ets_superspeed/views/js/ets_superspeed.js,
   cuando refresca el precio para poder cachear la pagina completa sin
   precios "quemados" en el HTML) -> el precio se pintaba primero SIN
   este margen y saltaba 15px a la derecha en cuanto esa peticion AJAX
   terminaba, unos cientos de ms despues del primer pintado (reportado
   por el usuario, visible comparando capturas antes/despues de
   cargar). El margen en si no depende de nada dinamico del precio
   (mismo valor siempre) -> se aplica sin condicion, desde el primer
   pintado, para que no haya nada que saltar despues. */
.product-prices {
  margin-left: 15px;
}

.mm_menu_content_title {
  text-transform: none !important;
}

.mm_menu_content_title::first-letter {
  text-transform: uppercase !important;
}

@media (min-width: 986px) {
  h2.text-uppercase.products-section-title {
    text-align: left !important;
    text-transform: none !important;
    font-weight: bold !important;
  }

  h2.text-uppercase.products-section-title::first-letter {
    text-transform: uppercase !important;
  }
}

@media (min-width: 300px) {
  .product-cover picture {
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
    clip-path: inset(7px 7px 8px 9px);
  }

  .product-cover img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
  }

    .thumbnail-container {
        width: 252px !important;
        min-width: 252px !important;
        max-width: 252px !important;
        box-sizing: border-box;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 6px;
        padding: 0;
        background: #fff;
        overflow: hidden;
    }

  .thumbnail-top picture {
    display: block;
    width: 250px;
    height: 250px;
    clip-path: inset(6px 5px 10px 5px);
    overflow: hidden;
  }

  .thumbnail-top img {
    width: 250px;
    height: 250px;
    object-fit: cover;
    display: block;
  }
}

@media (min-width: 986px) {
  #carousel .carousel-item {
    position: relative;
    overflow: hidden;
  }

  #carousel .caption {
    position: absolute;
    top: 5%;
    left: 5%;
    z-index: 10;
    background-color: rgba(26, 24, 24, 0.4);
    padding: 15px 20px;
    border-radius: 8px;
    color: white;
    text-align: left;
    max-width: 600px;
    display: table;
  }

  #carousel .caption * {
    margin: 0;
    padding: 0;
  }

  #carousel .caption-description p:empty,
  #carousel .caption-description h3:empty {
    display: none;
  }

  #carousel .caption h2 {
    font-size: 1.1rem;
    margin-bottom: 10px;
  }

  #carousel .caption-description {
    font-size: 1rem;
  }
}

.hide-language-selector {
  display: none !important;
}

@media (max-width: 766px) {
  #menu-icon {
    visibility: hidden !important;
    width: 0px !important;
    display: inline-block !important;
  }
}

@media (max-width: 766px) {
  .ets_mm_megamenu,
  .ets_mm_megamenu .container,
  .ets_mm_megamenu_content,
  .ets_mm_megamenu_content_content,
  .mm_menus_ul,
  .mm_columns_ul,
  .mm_blocks_ul,
  .mm_blocks_li,
  .mm_menus_li,
  .ybc-menu-toggle {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
  }

  .ets_mm_megamenu_content_content {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .ybc-menu-toggle {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    height: auto !important;
    line-height: normal !important;
    font-size: 1rem !important;
    margin-left: 20px !important;
    display: block !important;
    width: auto !important;
  }

  body {
    overflow-x: hidden !important;
  }
}

@media (max-width: 766px) {
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
  }

  .container,
  .container-fluid,
  .row,
  .product-container,
  .col-md-6,
  .page-content,
  .images-container,
  .product-add-to-cart,
  .product-description,
  .product-prices,
  .tabs,
  .blockreassurance_product,
  .product-information {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .product-cover,
  .product-cover img,
  .thumb-container,
  .thumb-container img {
    width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block;
  }

  .product-cover {
    text-align: center;
  }

  .product-add-to-cart .btn.btn-primary.add-to-cart {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .row.no-gutters {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

.product-description h1 {
  font-size: 1rem !important;
  font-weight: normal !important;
  line-height: 1.5 !important;
}

#product-availability {
  display: inline-block;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  line-height: 24px;
  color: #333;
  font-weight: 400 !important;
  margin-top: 0.5rem;
  padding-left: 0;
}

.ed_item, .ed_item * {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.ed_item::before {
    content: "";
    display: block;
    margin-bottom: 10px;
    border-top: 1px solid #ccc;
}

@media (min-width: 768px) {
  .product-container .col-md-6:last-child .tabs {
    width: 200%;
    margin-left: -100%;
    margin-bottom: 2rem;
  }
}

@media (max-width: 1200px) {
  .add-to-cart {
    font-size: 0 !important;
  }

  .add-to-cart .material-icons {
    font-size: 20px !important;
  }
}

#wrapper > .container {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

#wrapper > .container > .row {
  margin-left: 0;
  margin-right: 0;
}

header .container,
footer .container {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

#left-column {
  padding-left: 0;
}

#right-column {
  padding-right: 0;
  max-width: 280px !important;
  flex: 0 0 280px !important;
  box-sizing: border-box;
}

#content-wrapper:not(.left-column),
#center_column:not(.left-column) {
  padding-left: 20px;
}

#content-wrapper:not(.right-column),
#center_column:not(.right-column) {
  padding-right: 20px;
}

#content-wrapper,
#center_column {
  padding-top: 10px;
  padding-bottom: 20px;
  box-sizing: border-box;
}

.product-miniature {
  width: 100%;
  box-sizing: border-box;
}

.product-thumbnail {
  display: block;
  text-align: center;
}
.product-thumbnail img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

body {
  overflow-x: hidden;
}

#content,
.page-content,
.main-content,
#center_column > *,
#content-wrapper > * {
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

.page-content,
.main-content,
#content-wrapper,
#center_column {
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box;
}

.product-container,
.product-information,
.product-add-to-cart,
.product-description,
.product-prices,
.product-features,
.product-variants,
.product-customization,
.product-availability {
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

nav.breadcrumb,
.breadcrumb,
.breadcrumb ol {
  padding-left: 20px !important;
  padding-right: 20px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
  width: 100% !important;
  display: block;
}

@media (min-width: 1600px) {
  .products .product {
    width: 20% !important;
    flex: 0 0 20% !important;
    max-width: 20% !important;
  }
}

a.banner {
  display: block;
  width: fit-content;
  margin: 0 auto;
  text-align: center;
}
a.banner img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.product-miniature .product-description {
  text-align: center;
  margin: 10px auto 0 auto;
  max-width: 250px;
}

.footer-container > .container {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}



.bootstrap-touchspin .input-group-btn-vertical{position:relative;white-space:nowrap;width:1%;vertical-align:middle;display:table-cell}

.bootstrap-touchspin .input-group-btn-vertical>.btn{display:block;float:none;width:100%;max-width:100%;padding:8px 10px;margin-left:-1px;position:relative}

.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up{border-radius:0;border-top-right-radius:4px}

.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down{margin-top:-2px;border-radius:0;border-bottom-right-radius:4px}

.bootstrap-touchspin .input-group-btn-vertical i{position:absolute;top:3px;left:5px;font-size:9px;font-weight:400}

@font-face {
  font-family: "Manrope";
  src:
    url("../css/52260854eea2d38939bf.woff2") format("woff2"),
    url("../css/0f099f4e4d67aeb18ab6.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src:
    url("../css/250c120c3f8b2b0bb58e.woff2") format("woff2"),
    url("../css/c80d4fb11dcc2140b260.woff") format("woff");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

body,html{font-family:"Manrope",sans-serif}

*,:after,:before{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;font-smoothing:antialiased}


/*!
 * Bootstrap v4.0.0-alpha.5 (https://getbootstrap.com)
 * Copyright 2011-2016 The Bootstrap Authors
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
/*! normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */
@-webkit-keyframes progress-bar-stripes{0%{background-position:1rem 0}

to{background-position:0 0}

}

@keyframes progress-bar-stripes{0%{background-position:1rem 0}

to{background-position:0 0}

}

html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:16px;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}

body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background-color:#fff}

article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}

audio,canvas,output,progress,video{display:inline-block}

audio:not([controls]){display:none;height:0}

progress,sub,sup{vertical-align:baseline}

template{display:none}

a{background-color:transparent;-webkit-text-decoration-skip:objects;color:#198195;text-decoration: none;font-weight: bold}


a:active,a:hover{outline-width:0}

abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}

b,strong{font-weight:bolder}

dfn{font-style:italic}

h1{font-size:2em;margin:.67em 0}

mark{color:#000}

sub,sup{font-size:75%;line-height:0;position:relative}

sub{bottom:-.25em}

sup{top:-.5em}

img{border-style:none;vertical-align:middle}

svg:not(:root){overflow:hidden}

samp{font-size:1em}

figure{margin:1em 40px}

hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;margin-top:1rem;margin-bottom:1rem;border:0;border-top:1px solid rgba(0,0,0,.1)}

button,input,optgroup,select,textarea{font:inherit;margin:0}

dt,optgroup{font-weight:700}

button,hr,input{overflow:visible}

#mobile_top_menu_wrapper .top-menu .sub-menu ul[data-depth="1"]>li a,button,select{text-transform:none}

[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}

[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}

[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}

fieldset{min-width:0;padding:0;margin:0;border:0}

legend{color:inherit;display:table;max-width:100%;white-space:normal;display:block;width:100%;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit}

textarea{overflow:auto}

[type=checkbox],[type=radio],legend{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}

[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}

[type=search]{-webkit-appearance:textfield;outline-offset:-2px}

[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}

::-webkit-input-placeholder{color:inherit;opacity:.54}

::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}

*,::after,::before{-webkit-box-sizing:inherit;box-sizing:inherit}

@-ms-viewport{width:device-width}

[tabindex="-1"]:focus{outline:0!important}

h1,h2,h3,h4,h5,h6{margin-top:0}

.page-content.page-cms ul,dl,ol,p,ul{margin-top:0;margin-bottom:1rem}

abbr[data-original-title],abbr[title]{cursor:help;border-bottom:1px dotted #f6f6f6}

address{margin-bottom:1rem;font-style:normal;line-height:inherit}

ol ol,ol ul,ul ol,ul ul{margin-bottom:0}

dd{margin-bottom:.5rem;margin-left:0}

blockquote,figure{margin:0 0 1rem}

a:focus,a:hover{color:#198195;text-decoration:underline}

a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}

a:not([href]):not([tabindex]){color:inherit;text-decoration:none}

a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}

a:not([href]):not([tabindex]):focus{outline:0}

pre{overflow:auto}

[role=button]{cursor:pointer}

[role=button],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}

table{border-collapse:collapse;background-color:transparent}

caption{padding-top:.75rem;padding-bottom:.75rem;color:#707070;caption-side:bottom}

caption,th{text-align:left}

label{display:inline-block;margin-bottom:.5rem}

button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}

button,input,select,textarea{line-height:inherit}

input[type=checkbox]:disabled,input[type=radio]:disabled{cursor:not-allowed}

input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}

textarea{resize:vertical}

input[type=search]{-webkit-appearance:none}

[hidden]{display:none!important}

h1,h2,h3,h4,h5,h6{font-weight:700;color:inherit}

.h1,.h2,.h3{font-weight:700}

.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-bottom:.5rem;font-family:inherit;line-height:1.1}

.h5,.h6{font-weight:700;color:inherit}

.h1,h1{font-size:1.375rem}

.h2,h2{font-size:1.3125rem}

.h3,.h4,h3,h4{font-size:1.125rem}

.h5,h5{font-size:1rem}

.h6,body#checkout section.checkout-step .add-address a i,h6{font-size:.9375rem}

.lead{font-size:1.25rem;font-weight:300}

.display-1{font-size:3.125rem;font-weight:600}

.display-2{font-size:2.188rem;font-weight:400}

.display-3,.display-4{font-size:1.563rem;font-weight:400}

.display-4{font-size:1.25rem}

.small,small{font-size:80%;font-weight:400}

.mark,mark{padding:.2em;background-color:#fcf8e3}

.list-inline,.list-unstyled{padding-left:0;list-style:none}

.list-inline-item{display:inline-block}

.list-inline-item:not(:last-child){margin-right:5px}

.initialism{font-size:90%;text-transform:uppercase}

.blockquote{padding:.5rem 1rem;margin-bottom:1rem;font-size:1.25rem;border-left:.25rem solid #f6f6f6}

.blockquote-footer{display:block;font-size:80%;color:#f6f6f6}

.blockquote-footer::before{content:"\2014 \00A0"}

.blockquote-reverse{padding-right:1rem;padding-left:0;text-align:right;border-right:.25rem solid #f6f6f6;border-left:0}

.blockquote-reverse .blockquote-footer::before{content:""}

.blockquote-reverse .blockquote-footer::after{content:"\00A0 \2014"}

dl.row>dd+dt{clear:left}

.carousel-inner>.carousel-item>a>img,.carousel-inner>.carousel-item>img,.img-fluid,.img-thumbnail{max-width:100%;height:auto}

.img-thumbnail{padding:.25rem;background-color:#fff;border:1px solid #ddd;border-radius:0;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}

.figure{display:inline-block}

.figure-img{margin-bottom:.5rem;line-height:1}

.figure-caption{font-size:90%;color:#f6f6f6}

code,kbd,pre,samp{font-family:Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}

code,pre code{border-radius:0}

code{color:#bd4147;background-color:#f7f7f9}

code,kbd,pre{font-size:90%}

code,kbd{padding:.2rem .4rem}

kbd{color:#fff;background-color:#333;border-radius:.2rem}

kbd kbd{padding:0;font-size:100%;font-weight:700}

pre{display:block;margin-top:0;margin-bottom:1rem;color:#363a42}

pre code{padding:0;font-size:inherit;color:inherit;background-color:transparent}

.pre-scrollable{max-height:340px;overflow-y:scroll}

.container,.container-fluid{margin-left:auto;margin-right:auto;padding-left:15px;padding-right:15px}

.container-fluid::after,.container::after,.row::after{content:"";display:table;clear:both}

.row{margin-right:-15px;margin-left:-15px}

.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xs,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{position:relative;min-height:1px;padding-right:15px;padding-left:15px}

.col-xs-1{float:left;width:8.33333%}

.col-xs-2,.col-xs-3{float:left;width:16.66667%}

.col-xs-3{width:25%}

.col-xs-4,.col-xs-5{float:left;width:33.33333%}

.col-xs-5{width:41.66667%}

.col-xs-6,.col-xs-7{float:left;width:50%}

.col-xs-7{width:58.33333%}

.col-xs-8,.col-xs-9{float:left;width:66.66667%}

.col-xs-9{width:75%}

.col-xs-10{float:left;width:83.33333%}

.col-xs-11{float:left;width:91.66667%}

.col-xs-12{float:left;width:100%}

.pull-xs-0{right:auto}

.pull-xs-1{right:8.33333%}

.pull-xs-2{right:16.66667%}

.pull-xs-3{right:25%}

.pull-xs-4{right:33.33333%}

.pull-xs-5{right:41.66667%}

.pull-xs-6{right:50%}

.pull-xs-7{right:58.33333%}

.pull-xs-8{right:66.66667%}

.pull-xs-9{right:75%}

.pull-xs-10{right:83.33333%}

.pull-xs-11{right:91.66667%}

.pull-xs-12{right:100%}

.push-xs-0{left:auto}

.push-xs-1{left:8.33333%}

.push-xs-2{left:16.66667%}

.push-xs-3{left:25%}

.push-xs-4{left:33.33333%}

.push-xs-5{left:41.66667%}

.push-xs-6{left:50%}

.push-xs-7{left:58.33333%}

.push-xs-8{left:66.66667%}

.push-xs-9{left:75%}

.push-xs-10{left:83.33333%}

.push-xs-11{left:91.66667%}

.push-xs-12{left:100%}

.offset-xs-1{margin-left:8.33333%}

.offset-xs-2{margin-left:16.66667%}

.offset-xs-3{margin-left:25%}

.offset-xs-4{margin-left:33.33333%}

.offset-xs-5{margin-left:41.66667%}

.offset-xs-6{margin-left:50%}

.offset-xs-7{margin-left:58.33333%}

.offset-xs-8{margin-left:66.66667%}

.offset-xs-9{margin-left:75%}

.offset-xs-10{margin-left:83.33333%}

.offset-xs-11{margin-left:91.66667%}

.table{width:100%;max-width:100%;margin-bottom:1rem}

.table td,.table th{padding:.75rem;vertical-align:top;border-top:1px solid #f6f6f6}

.table thead th{vertical-align:bottom;border-bottom:2px solid #f6f6f6}

.table tbody+tbody{border-top:2px solid #f6f6f6}

.table .table{background-color:#fff}

.table-sm td,.table-sm th{padding:.3rem}

.table-bordered,.table-bordered td,.table-bordered th{border:1px solid #f6f6f6}

.table-bordered thead td,.table-bordered thead th{border-bottom-width:2px}

.table-striped tbody tr:nth-of-type(odd){background-color:rgba(0,0,0,.05)}

.table-active,.table-active>td,.table-active>th,.table-hover .table-active:hover,.table-hover .table-active:hover>td,.table-hover .table-active:hover>th,.table-hover tbody tr:hover{background-color:rgba(0,0,0,.075)}

.table-success,.table-success>td,.table-success>th{background-color:#dff0d8}

.table-hover .table-success:hover,.table-hover .table-success:hover>td,.table-hover .table-success:hover>th{background-color:#d0e9c6}

.table-info,.table-info>td,.table-info>th{background-color:#d9edf7}

.table-hover .table-info:hover,.table-hover .table-info:hover>td,.table-hover .table-info:hover>th{background-color:#c4e3f3}

.table-warning,.table-warning>td,.table-warning>th{background-color:#fcf8e3}

.table-hover .table-warning:hover,.table-hover .table-warning:hover>td,.table-hover .table-warning:hover>th{background-color:#faf2cc}

.table-danger,.table-danger>td,.table-danger>th{background-color:#f2dede}

.table-hover .table-danger:hover,.table-hover .table-danger:hover>td,.table-hover .table-danger:hover>th{background-color:#ebcccc}

.table-inverse,.thead-inverse th{color:#fff;background-color:#363a42}

.thead-default th{color:#707070;background-color:#f6f6f6}

.table-inverse{color:#f6f6f6}

.table-inverse td,.table-inverse th,.table-inverse thead th{border-color:#707070}

.table-inverse.table-bordered{border:0}

.table-responsive{display:block;width:100%;min-height:0%;overflow-x:auto}

.table-reflow thead,.table-reflow tr{float:left}

.table-reflow tbody{display:block;white-space:nowrap}

.table-reflow td,.table-reflow th{border-top:1px solid #f6f6f6;border-left:1px solid #f6f6f6}

.table-reflow td:last-child,.table-reflow th:last-child{border-right:1px solid #f6f6f6}

.table-reflow tbody:last-child tr:last-child td,.table-reflow tbody:last-child tr:last-child th,.table-reflow tfoot:last-child tr:last-child td,.table-reflow tfoot:last-child tr:last-child th,.table-reflow thead:last-child tr:last-child td,.table-reflow thead:last-child tr:last-child th{border-bottom:1px solid #f6f6f6}

.table-reflow tr td,.table-reflow tr th{display:block!important;border:1px solid #f6f6f6}

.form-control{display:block;width:100%;font-size:1rem;line-height:1.25;background-color:#fff;background-image:none;background-clip:padding-box;border-radius:0}

.form-control::-ms-expand{background-color:transparent;border:0}

.form-control:focus{border-color:#66afe9;outline:0}

.form-control::-webkit-input-placeholder{color:#999;opacity:1}

.form-control::-moz-placeholder{color:#999;opacity:1}

.form-control:-ms-input-placeholder{color:#999;opacity:1}

.form-control::-ms-input-placeholder{color:#999;opacity:1}

.form-control::placeholder{color:#999;opacity:1}

.form-control:disabled,.form-control[readonly]{background-color:#f6f6f6;opacity:1}

.form-control:disabled{cursor:not-allowed}

select.form-control:not([size]):not([multiple]){height:calc(2.5rem - 2px)}

select.form-control:focus::-ms-value{color:#707070;background-color:#fff}

.form-control-file,.form-control-range{display:block}

.col-form-label{padding-top:.5rem;padding-bottom:.5rem;margin-bottom:0}

.col-form-label-lg{padding-top:.75rem;padding-bottom:.75rem;font-size:.9375rem}

.col-form-label-sm{padding-top:.25rem;padding-bottom:.25rem;font-size:.875rem}

.col-form-legend{padding-top:.5rem;padding-bottom:.5rem;margin-bottom:0;font-size:1rem}

.form-control-static{padding-top:.5rem;padding-bottom:.5rem;line-height:1.25;border:solid transparent;border-width:1px 0}

.form-control-static.form-control-lg,.form-control-static.form-control-sm,.input-group-lg>.form-control-static.form-control,.input-group-lg>.form-control-static.input-group-addon,.input-group-lg>.input-group-btn>.form-control-static.btn,.input-group-sm>.form-control-static.form-control,.input-group-sm>.form-control-static.input-group-addon,.input-group-sm>.input-group-btn>.form-control-static.btn{padding-right:0;padding-left:0}

.form-control-sm,.input-group-sm>.form-control,.input-group-sm>.input-group-btn>.btn{padding:.25rem .5rem;font-size:.875rem;border-radius:.2rem}

.input-group-sm>.input-group-btn>select.btn:not([size]):not([multiple]),.input-group-sm>select.form-control:not([size]):not([multiple]),.input-group-sm>select.input-group-addon:not([size]):not([multiple]),select.form-control-sm:not([size]):not([multiple]){height:1.8125rem}

.form-control-lg,.input-group-lg>.form-control,.input-group-lg>.input-group-btn>.btn{padding:.75rem 1.5rem;font-size:.9375rem;border-radius:.3rem}

.input-group-lg>.input-group-btn>select.btn:not([size]):not([multiple]),.input-group-lg>select.form-control:not([size]):not([multiple]),.input-group-lg>select.input-group-addon:not([size]):not([multiple]),select.form-control-lg:not([size]):not([multiple]){height:2.75rem}

.form-group{margin-bottom:1rem}

.form-text{display:block;margin-top:.25rem}

.form-check{position:relative;display:block;margin-bottom:.75rem}

.form-check+.form-check{margin-top:-.25rem}

.form-check.disabled .form-check-label{color:#707070;cursor:not-allowed}

.form-check-label{padding-left:1.25rem;margin-bottom:0;cursor:pointer}

.form-check-input{position:absolute;margin-top:.25rem;margin-left:-1.25rem}

.form-check-input:only-child{position:static}

.form-check-inline{position:relative;display:inline-block;padding-left:1.25rem;margin-bottom:0;vertical-align:middle;cursor:pointer}

.form-check-inline+.form-check-inline{margin-left:.75rem}

.form-check-inline.disabled{color:#707070;cursor:not-allowed}

.form-control-feedback{margin-top:.25rem}

.form-control-danger,.form-control-success,.form-control-warning{padding-right:2.25rem;background-repeat:no-repeat;background-position:center right .625rem;background-size:1.25rem 1.25rem}

.has-success .custom-control,.has-success .form-check-inline,.has-success .form-check-label,.has-success .form-control-feedback,.has-success .form-control-label{color:#4cbb6c}

.has-success .form-control{border-color:#4cbb6c}

.has-success .form-control:focus{-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #96d7a9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #96d7a9}

.has-success .input-group-addon{color:#4cbb6c;border-color:#4cbb6c;background-color:#e0f3e5}

.has-success .form-control-success{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 8 8%27%3E%3Cpath fill=%27#4cbb6c%27 d=%27M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z%27/%3E%3C/svg%3E")}

.has-warning .custom-control,.has-warning .form-check-inline,.has-warning .form-check-label,.has-warning .form-control-feedback,.has-warning .form-control-label{color:#ff9a52}

.has-warning .form-control{border-color:#ff9a52}

.has-warning .form-control:focus{-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ffd6b8;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ffd6b8}

.has-warning .input-group-addon{color:#ff9a52;border-color:#ff9a52;background-color:#fff}

.has-warning .form-control-warning{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 8 8%27%3E%3Cpath fill=%27#ff9a52%27 d=%27M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z%27/%3E%3C/svg%3E")}

.has-danger .custom-control,.has-danger .form-check-inline,.has-danger .form-check-label,.has-danger .form-control-feedback,.has-danger .form-control-label{color:#ff4c4c}

.has-danger .form-control{border-color:#ff4c4c}

.has-danger .form-control:focus{-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ffb2b2;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ffb2b2}

.has-danger .input-group-addon{color:#ff4c4c;border-color:#ff4c4c;background-color:#fff}

.has-danger .form-control-danger{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27#ff4c4c%27 viewBox=%27-2 -2 7 7%27%3E%3Cpath stroke=%27%23d9534f%27 d=%27M0 0l3 3m0-3L0 3%27/%3E%3Ccircle r=%27.5%27/%3E%3Ccircle cx=%273%27 r=%27.5%27/%3E%3Ccircle cy=%273%27 r=%27.5%27/%3E%3Ccircle cx=%273%27 cy=%273%27 r=%27.5%27/%3E%3C/svg%3E")}

.btn{display:inline-block;font-weight:400;line-height:1.25;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;padding:.5rem 1rem;font-size:1rem;border-radius:0}

.btn.active.focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn:active:focus,.btn:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}

.btn:focus,.btn:hover{text-decoration:none}

.btn.focus{text-decoration:none}

.btn.active,.btn:active{background-image:none;outline:0}

.btn.disabled,.btn:disabled{cursor:not-allowed;opacity:.65}

a.btn.disabled,fieldset[disabled] a.btn{pointer-events:none}

.btn-primary,.btn-primary:hover{color:#fff;background-color:#376467;border-color:transparent}

.btn-primary:hover{background-color:#254845}

.btn-primary.focus,.btn-primary:focus{color:#fff;background-color:#254845;border-color:transparent}

.btn-primary.active,.btn-primary:active,.open>.btn-primary.dropdown-toggle{color:#fff;background-color:#254845;border-color:transparent;background-image:none}

.btn-primary.active.focus,.btn-primary.active:focus,.btn-primary.active:hover,.btn-primary:active.focus,.btn-primary:active:focus,.btn-primary:active:hover,.open>.btn-primary.dropdown-toggle.focus,.open>.btn-primary.dropdown-toggle:focus,.open>.btn-primary.dropdown-toggle:hover{color:#fff;background-color:#18798d;border-color:transparent}

.btn-primary.disabled.focus,.btn-primary.disabled:focus,.btn-primary:disabled.focus,.btn-primary:disabled:focus{background-color:#376467;border-color:transparent}

.btn-primary.disabled:hover,.btn-primary:disabled:hover{background-color:#376467;border-color:transparent}

.btn-secondary{color:#232323;background-color:#f6f6f6}

.btn-secondary,.btn-tertiary{border-color:transparent}

.btn-secondary:hover,.btn-tertiary:hover{color:#232323;background-color:#ddd;border-color:transparent}

.btn-secondary.focus,.btn-secondary:focus,.btn-tertiary:focus,.focus.btn-tertiary{color:#232323;background-color:#ddd;border-color:transparent}

.active.btn-tertiary,.btn-secondary.active,.btn-secondary:active,.btn-tertiary:active,.open>.btn-secondary.dropdown-toggle,.open>.dropdown-toggle.btn-tertiary{color:#232323;background-color:#ddd;border-color:transparent;background-image:none}

.active.btn-tertiary:focus,.active.btn-tertiary:hover,.active.focus.btn-tertiary,.btn-secondary.active.focus,.btn-secondary.active:focus,.btn-secondary.active:hover,.btn-secondary:active.focus,.btn-secondary:active:focus,.btn-secondary:active:hover,.btn-tertiary:active.focus,.btn-tertiary:active:focus,.btn-tertiary:active:hover,.open>.btn-secondary.dropdown-toggle.focus,.open>.btn-secondary.dropdown-toggle:focus,.open>.btn-secondary.dropdown-toggle:hover,.open>.dropdown-toggle.btn-tertiary:focus,.open>.dropdown-toggle.btn-tertiary:hover,.open>.dropdown-toggle.focus.btn-tertiary{color:#232323;background-color:#cbcbcb;border-color:transparent}

.btn-secondary.disabled.focus,.btn-secondary.disabled:focus,.btn-secondary:disabled.focus,.btn-secondary:disabled:focus,.btn-tertiary:disabled.focus,.btn-tertiary:disabled:focus,.disabled.btn-tertiary:focus,.disabled.focus.btn-tertiary{background-color:#f6f6f6;border-color:transparent}

.btn-secondary.disabled:hover,.btn-secondary:disabled:hover,.btn-tertiary:disabled:hover,.disabled.btn-tertiary:hover{background-color:#f6f6f6;border-color:transparent}

.btn-info{color:#fff;background-color:#376467;border-color:#376467}

.btn-info:hover{color:#fff;background-color:#254845;border-color:#2aabd2}

.btn-info.focus,.btn-info:focus{color:#fff;background-color:#254845;border-color:#2aabd2}

.btn-info.active,.btn-info:active,.open>.btn-info.dropdown-toggle{color:#fff;background-color:#254845;border-color:#2aabd2;background-image:none}

.btn-info.active.focus,.btn-info.active:focus,.btn-info.active:hover,.btn-info:active.focus,.btn-info:active:focus,.btn-info:active:hover,.open>.btn-info.dropdown-toggle.focus,.open>.btn-info.dropdown-toggle:focus,.open>.btn-info.dropdown-toggle:hover{color:#fff;background-color:#254845;border-color:#1f7e9a}

.btn-info.disabled.focus,.btn-info.disabled:focus,.btn-info:disabled.focus,.btn-info:disabled:focus{background-color:#376467;border-color:#376467}

.btn-info.disabled:hover,.btn-info:disabled:hover{background-color:#376467;border-color:#376467}

.btn-success{color:#fff;background-color:#4cbb6c;border-color:#4cbb6c}

.btn-success:hover{color:#fff;background-color:#3a9a56;border-color:#389252}

.btn-success.focus,.btn-success:focus{color:#fff;background-color:#3a9a56;border-color:#389252}

.btn-success.active,.btn-success:active,.open>.btn-success.dropdown-toggle{color:#fff;background-color:#3a9a56;border-color:#389252;background-image:none}

.btn-success.active.focus,.btn-success.active:focus,.btn-success.active:hover,.btn-success:active.focus,.btn-success:active:focus,.btn-success:active:hover,.open>.btn-success.dropdown-toggle.focus,.open>.btn-success.dropdown-toggle:focus,.open>.btn-success.dropdown-toggle:hover{color:#fff;background-color:#318047;border-color:#256237}

.btn-success.disabled.focus,.btn-success.disabled:focus,.btn-success:disabled.focus,.btn-success:disabled:focus{background-color:#4cbb6c;border-color:#4cbb6c}

.btn-success.disabled:hover,.btn-success:disabled:hover{background-color:#4cbb6c;border-color:#4cbb6c}

.btn-warning{color:#fff;background-color:#ff9a52;border-color:#ff9a52}

.btn-warning:hover{color:#fff;background-color:#ff7c1f;border-color:#ff7615}

.btn-warning.focus,.btn-warning:focus{color:#fff;background-color:#ff7c1f;border-color:#ff7615}

.btn-warning.active,.btn-warning:active,.open>.btn-warning.dropdown-toggle{color:#fff;background-color:#ff7c1f;border-color:#ff7615;background-image:none}

.btn-warning.active.focus,.btn-warning.active:focus,.btn-warning.active:hover,.btn-warning:active.focus,.btn-warning:active:focus,.btn-warning:active:hover,.open>.btn-warning.dropdown-toggle.focus,.open>.btn-warning.dropdown-toggle:focus,.open>.btn-warning.dropdown-toggle:hover{color:#fff;background-color:#fa6800;border-color:#d25700}

.btn-warning.disabled.focus,.btn-warning.disabled:focus,.btn-warning:disabled.focus,.btn-warning:disabled:focus{background-color:#ff9a52;border-color:#ff9a52}

.btn-warning.disabled:hover,.btn-warning:disabled:hover{background-color:#ff9a52;border-color:#ff9a52}

.btn-danger{color:#fff;background-color:#ff4c4c;border-color:#ff4c4c}

.btn-danger:hover{color:#fff;background-color:#ff1919;border-color:#ff0f0f}

.btn-danger.focus,.btn-danger:focus{color:#fff;background-color:#ff1919;border-color:#ff0f0f}

.btn-danger.active,.btn-danger:active,.open>.btn-danger.dropdown-toggle{color:#fff;background-color:#ff1919;border-color:#ff0f0f;background-image:none}

.btn-danger.active.focus,.btn-danger.active:focus,.btn-danger.active:hover,.btn-danger:active.focus,.btn-danger:active:focus,.btn-danger:active:hover,.open>.btn-danger.dropdown-toggle.focus,.open>.btn-danger.dropdown-toggle:focus,.open>.btn-danger.dropdown-toggle:hover{color:#fff;background-color:#f40000;border-color:#c00}

.btn-danger.disabled.focus,.btn-danger.disabled:focus,.btn-danger:disabled.focus,.btn-danger:disabled:focus{background-color:#ff4c4c;border-color:#ff4c4c}

.btn-danger.disabled:hover,.btn-danger:disabled:hover{background-color:#ff4c4c;border-color:#ff4c4c}

.btn-outline-primary{color:#376467;background-image:none;background-color:transparent;border-color:#376467}

.btn-outline-primary:hover{color:#fff;background-color:#376467;border-color:#376467}

.btn-outline-primary.focus,.btn-outline-primary:focus{color:#fff;background-color:#376467;border-color:#376467}

.btn-outline-primary.active,.btn-outline-primary:active,.open>.btn-outline-primary.dropdown-toggle{color:#fff;background-color:#376467;border-color:#376467}

.btn-outline-primary.active.focus,.btn-outline-primary.active:focus,.btn-outline-primary.active:hover,.btn-outline-primary:active.focus,.btn-outline-primary:active:focus,.btn-outline-primary:active:hover,.open>.btn-outline-primary.dropdown-toggle.focus,.open>.btn-outline-primary.dropdown-toggle:focus,.open>.btn-outline-primary.dropdown-toggle:hover{color:#fff;background-color:#18798d;border-color:#125b6a}

.btn-outline-primary.disabled.focus,.btn-outline-primary.disabled:focus,.btn-outline-primary:disabled.focus,.btn-outline-primary:disabled:focus{border-color:#79d6e8}

.btn-outline-primary.disabled:hover,.btn-outline-primary:disabled:hover{border-color:#79d6e8}

.btn-outline-secondary,.btn-outline-secondary:hover{background-color:transparent;border-color:transparent}

.btn-outline-secondary{color:transparent;background-image:none}

.btn-outline-secondary:hover{color:#fff}

.btn-outline-secondary.focus,.btn-outline-secondary:focus{color:#fff;background-color:transparent;border-color:transparent}

.btn-outline-secondary.active,.btn-outline-secondary:active,.open>.btn-outline-secondary.dropdown-toggle{color:#fff;background-color:transparent;border-color:transparent}

.btn-outline-secondary.active.focus,.btn-outline-secondary.active:focus,.btn-outline-secondary.active:hover,.btn-outline-secondary:active.focus,.btn-outline-secondary:active:focus,.btn-outline-secondary:active:hover,.open>.btn-outline-secondary.dropdown-toggle.focus,.open>.btn-outline-secondary.dropdown-toggle:focus,.open>.btn-outline-secondary.dropdown-toggle:hover{color:#fff;background-color:transparent;border-color:transparent}

.btn-outline-secondary.disabled.focus,.btn-outline-secondary.disabled:focus,.btn-outline-secondary:disabled.focus,.btn-outline-secondary:disabled:focus{border-color:transparent}

.btn-outline-secondary.disabled:hover,.btn-outline-secondary:disabled:hover{border-color:transparent}

.btn-outline-info{color:#376467;background-image:none;background-color:transparent;border-color:#376467}

.btn-outline-info:hover{color:#fff;background-color:#376467;border-color:#376467}

.btn-outline-info.focus,.btn-outline-info:focus{color:#fff;background-color:#376467;border-color:#376467}

.btn-outline-info.active,.btn-outline-info:active,.open>.btn-outline-info.dropdown-toggle{color:#fff;background-color:#376467;border-color:#376467}

.btn-outline-info.active.focus,.btn-outline-info.active:focus,.btn-outline-info.active:hover,.btn-outline-info:active.focus,.btn-outline-info:active:focus,.btn-outline-info:active:hover,.open>.btn-outline-info.dropdown-toggle.focus,.open>.btn-outline-info.dropdown-toggle:focus,.open>.btn-outline-info.dropdown-toggle:hover{color:#fff;background-color:#254845;border-color:#1f7e9a}

.btn-outline-info.disabled.focus,.btn-outline-info.disabled:focus,.btn-outline-info:disabled.focus,.btn-outline-info:disabled:focus{border-color:#b0e1ef}

.btn-outline-info.disabled:hover,.btn-outline-info:disabled:hover{border-color:#b0e1ef}

.btn-outline-success{color:#4cbb6c;background-image:none;background-color:transparent;border-color:#4cbb6c}

.btn-outline-success:hover{color:#fff;background-color:#4cbb6c;border-color:#4cbb6c}

.btn-outline-success.focus,.btn-outline-success:focus{color:#fff;background-color:#4cbb6c;border-color:#4cbb6c}

.btn-outline-success.active,.btn-outline-success:active,.open>.btn-outline-success.dropdown-toggle{color:#fff;background-color:#4cbb6c;border-color:#4cbb6c}

.btn-outline-success.active.focus,.btn-outline-success.active:focus,.btn-outline-success.active:hover,.btn-outline-success:active.focus,.btn-outline-success:active:focus,.btn-outline-success:active:hover,.open>.btn-outline-success.dropdown-toggle.focus,.open>.btn-outline-success.dropdown-toggle:focus,.open>.btn-outline-success.dropdown-toggle:hover{color:#fff;background-color:#318047;border-color:#256237}

.btn-outline-success.disabled.focus,.btn-outline-success.disabled:focus,.btn-outline-success:disabled.focus,.btn-outline-success:disabled:focus{border-color:#96d7a9}

.btn-outline-success.disabled:hover,.btn-outline-success:disabled:hover{border-color:#96d7a9}

.btn-outline-warning{color:#ff9a52;background-image:none;background-color:transparent;border-color:#ff9a52}

.btn-outline-warning:hover{color:#fff;background-color:#ff9a52;border-color:#ff9a52}

.btn-outline-warning.focus,.btn-outline-warning:focus{color:#fff;background-color:#ff9a52;border-color:#ff9a52}

.btn-outline-warning.active,.btn-outline-warning:active,.open>.btn-outline-warning.dropdown-toggle{color:#fff;background-color:#ff9a52;border-color:#ff9a52}

.btn-outline-warning.active.focus,.btn-outline-warning.active:focus,.btn-outline-warning.active:hover,.btn-outline-warning:active.focus,.btn-outline-warning:active:focus,.btn-outline-warning:active:hover,.open>.btn-outline-warning.dropdown-toggle.focus,.open>.btn-outline-warning.dropdown-toggle:focus,.open>.btn-outline-warning.dropdown-toggle:hover{color:#fff;background-color:#fa6800;border-color:#d25700}

.btn-outline-warning.disabled.focus,.btn-outline-warning.disabled:focus,.btn-outline-warning:disabled.focus,.btn-outline-warning:disabled:focus{border-color:#ffd6b8}

.btn-outline-warning.disabled:hover,.btn-outline-warning:disabled:hover{border-color:#ffd6b8}

.btn-outline-danger{color:#ff4c4c;background-image:none;background-color:transparent;border-color:#ff4c4c}

.btn-outline-danger:hover{color:#fff;background-color:#ff4c4c;border-color:#ff4c4c}

.btn-outline-danger.focus,.btn-outline-danger:focus{color:#fff;background-color:#ff4c4c;border-color:#ff4c4c}

.btn-outline-danger.active,.btn-outline-danger:active,.open>.btn-outline-danger.dropdown-toggle{color:#fff;background-color:#ff4c4c;border-color:#ff4c4c}

.btn-outline-danger.active.focus,.btn-outline-danger.active:focus,.btn-outline-danger.active:hover,.btn-outline-danger:active.focus,.btn-outline-danger:active:focus,.btn-outline-danger:active:hover,.open>.btn-outline-danger.dropdown-toggle.focus,.open>.btn-outline-danger.dropdown-toggle:focus,.open>.btn-outline-danger.dropdown-toggle:hover{color:#fff;background-color:#f40000;border-color:#c00}

.btn-outline-danger.disabled.focus,.btn-outline-danger.disabled:focus,.btn-outline-danger:disabled.focus,.btn-outline-danger:disabled:focus{border-color:#ffb2b2}

.btn-outline-danger.disabled:hover,.btn-outline-danger:disabled:hover{border-color:#ffb2b2}

.btn-link{font-weight:400;color:#376467;border-radius:0}

.btn-link,.btn-link.active,.btn-link:active,.btn-link:disabled{background-color:transparent}

.btn-link,.btn-link:active,.btn-link:focus{border-color:transparent}

.btn-link:hover{border-color:transparent}

.btn-link:focus,.btn-link:hover{color:#198195;text-decoration:underline;background-color:transparent}

.btn-link:disabled:focus,.btn-link:disabled:hover{color:#f6f6f6;text-decoration:none}

.btn-group-lg>.btn,.btn-lg{padding:.75rem 1.5rem;font-size:.9375rem;border-radius:.3rem}

.btn-group-sm>.btn,.btn-sm{padding:.25rem .5rem;font-size:.875rem;border-radius:.2rem}

.btn-block{display:block;width:100%}

.btn-block+.btn-block{margin-top:.5rem}

#order-items table,#pagenotfound .page-content #search_widget,#pagenotfound .page-not-found .search-widget input,#products .page-not-found .search-widget input,.advertising-block img,input[type=button].btn-block,input[type=reset].btn-block,input[type=submit].btn-block{width:100%}

.fade{opacity:0;-webkit-transition:opacity .15s linear;transition:opacity .15s linear}

.fade.in{opacity:1}

.collapse{display:none}

.collapse.in{display:block}

tr.collapse.in{display:table-row}

tbody.collapse.in{display:table-row-group}

.collapsing{height:0;overflow:hidden;-webkit-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-duration:.35s;transition-duration:.35s;-webkit-transition-property:height;transition-property:height}

.collapsing,.dropdown,.dropup{position:relative}

.dropdown-toggle::after{display:inline-block;width:0;height:0;margin-left:.3em;vertical-align:middle;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-left:.3em solid transparent}

.dropdown-toggle:focus{outline:0}

.dropup .dropdown-toggle::after{border-top:0;border-bottom:.3em solid}

.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:10rem;padding:.5rem 0;margin:.125rem 0 0;font-size:1rem;color:#363a42;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:0}

.dropdown-divider{height:1px;margin:.5rem 0;overflow:hidden;background-color:#e5e5e5}

.dropdown-item{display:block;width:100%;padding:3px 1.5rem;clear:both;font-weight:400;color:#363a42;text-align:inherit;white-space:nowrap;background:0 0;border:0}

.dropdown-item:focus,.dropdown-item:hover{background-color:#f5f5f5}

.dropdown-item.active,.dropdown-item.active:focus,.dropdown-item.active:hover{color:#fff;text-decoration:none;background-color:#376467;outline:0}

.dropdown-item.disabled,.dropdown-item.disabled:focus,.dropdown-item.disabled:hover{color:#f6f6f6}

.dropdown-item.disabled:focus,.dropdown-item.disabled:hover{text-decoration:none;cursor:not-allowed;background-color:transparent;background-image:none;filter:"progid:DXImageTransform.Microsoft.gradient(enabled = false)"}

.open>.dropdown-menu{display:block}

.open>a{outline:0}

.dropdown-menu-right{right:0;left:auto}

.dropdown-menu-left{right:auto;left:0}

.dropdown-header{display:block;padding:.5rem 1.5rem;margin-bottom:0;font-size:.875rem;color:#f6f6f6;white-space:nowrap}

.dropdown-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:990}

.dropup .caret,.navbar-fixed-bottom .dropdown .caret{content:"";border-top:0;border-bottom:.3em solid}

.dropup .dropdown-menu,.navbar-fixed-bottom .dropdown .dropdown-menu{top:auto;bottom:100%;margin-bottom:.125rem}

.btn-group,.btn-group-vertical{position:relative;display:inline-block;vertical-align:middle}

.btn-group>.btn{float:left}

.btn-group-vertical>.btn,.btn-group>.btn{position:relative;margin-bottom:0}

.btn-group-vertical>.btn.active,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn:focus,.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus{z-index:2}

.btn-group-vertical>.btn:hover,.btn-group>.btn:hover{z-index:2}

.btn-group .btn+.btn,.btn-group .btn+.btn-group,.btn-group .btn-group+.btn,.btn-group .btn-group+.btn-group{margin-left:-1px}

.btn-toolbar{margin-left:-.5rem}

.btn-toolbar::after{content:"";display:table;clear:both}

.btn-toolbar .btn-group,.btn-toolbar .input-group{float:left}

.btn-toolbar>.btn,.btn-toolbar>.btn-group,.btn-toolbar>.input-group{margin-left:.5rem}

.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius:0}

.btn-group>.btn:first-child{margin-left:0}

.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle){border-bottom-right-radius:0;border-top-right-radius:0}

.btn-group>.btn:last-child:not(:first-child),.btn-group>.dropdown-toggle:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}

.btn-group>.btn-group{float:left}

.btn-group>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0}

.btn-group>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-bottom-right-radius:0;border-top-right-radius:0}

.btn-group>.btn-group:last-child:not(:first-child)>.btn:first-child{border-bottom-left-radius:0;border-top-left-radius:0}

.btn-group .dropdown-toggle:active,.btn-group.open .dropdown-toggle{outline:0}

.btn+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}

.btn+.dropdown-toggle-split::after{margin-left:0}

.btn-group-sm>.btn+.dropdown-toggle-split,.btn-sm+.dropdown-toggle-split{padding-right:.375rem;padding-left:.375rem}

.btn-group-lg>.btn+.dropdown-toggle-split,.btn-lg+.dropdown-toggle-split{padding-right:1.125rem;padding-left:1.125rem}

.btn .caret{margin-left:0}

.btn-group-lg>.btn .caret,.btn-lg .caret{border-width:.3em .3em 0}

.dropup .btn-group-lg>.btn .caret,.dropup .btn-lg .caret{border-width:0 .3em .3em}

.btn-group-vertical>.btn,.btn-group-vertical>.btn-group,.btn-group-vertical>.btn-group>.btn{display:block;width:100%;max-width:100%;float:none}

.btn-group-vertical>.btn-group::after{content:"";display:table;clear:both}

.btn-group-vertical>.btn+.btn,.btn-group-vertical>.btn+.btn-group,.btn-group-vertical>.btn-group+.btn,.btn-group-vertical>.btn-group+.btn-group{margin-top:-1px;margin-left:0}

.btn-group-vertical>.btn-group:not(:first-child):not(:last-child)>.btn,.btn-group-vertical>.btn:not(:first-child):not(:last-child){border-radius:0}

.btn-group-vertical>.btn:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0}

.btn-group-vertical>.btn:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0}

.btn-group-vertical>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group-vertical>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-bottom-right-radius:0;border-bottom-left-radius:0}

.btn-group-vertical>.btn-group:last-child:not(:first-child)>.btn:first-child{border-top-right-radius:0;border-top-left-radius:0}

[data-toggle=buttons]>.btn input[type=checkbox],[data-toggle=buttons]>.btn input[type=radio],[data-toggle=buttons]>.btn-group>.btn input[type=checkbox],[data-toggle=buttons]>.btn-group>.btn input[type=radio]{position:absolute;clip:rect(0,0,0,0);pointer-events:none}

.input-group{position:relative;width:100%;display:table;border-collapse:separate}

.input-group .form-control{position:relative;z-index:2;float:left;width:100%;margin-bottom:0}

.input-group .form-control:active,.input-group .form-control:focus,.input-group .form-control:hover{z-index:3}

.input-group .form-control,.input-group-addon,.input-group-btn{display:table-cell}

.input-group .form-control:not(:first-child):not(:last-child),.input-group-addon:not(:first-child):not(:last-child),.input-group-btn:not(:first-child):not(:last-child){border-radius:0}

.input-group-addon{white-space:nowrap}

.input-group-addon,.input-group-btn{width:1%;vertical-align:middle}

.input-group-addon{padding:.5rem .75rem;margin-bottom:0;font-size:1rem;font-weight:400;line-height:1.25;color:#707070;text-align:center;background-color:#f6f6f6;border:1px solid rgba(0,0,0,.25);border-radius:0}

.input-group-addon.form-control-sm,.input-group-sm>.input-group-addon,.input-group-sm>.input-group-btn>.input-group-addon.btn{padding:.25rem .5rem;font-size:.875rem;border-radius:.2rem}

.input-group-addon.form-control-lg,.input-group-lg>.input-group-addon,.input-group-lg>.input-group-btn>.input-group-addon.btn{padding:.75rem 1.5rem;font-size:.9375rem;border-radius:.3rem}

.input-group-addon input[type=checkbox],.input-group-addon input[type=radio]{margin-top:0}

.input-group .form-control:not(:last-child),.input-group-addon:not(:last-child),.input-group-btn:not(:first-child)>.btn-group:not(:last-child)>.btn,.input-group-btn:not(:first-child)>.btn:not(:last-child):not(.dropdown-toggle),.input-group-btn:not(:last-child)>.btn,.input-group-btn:not(:last-child)>.btn-group>.btn,.input-group-btn:not(:last-child)>.dropdown-toggle{border-bottom-right-radius:0;border-top-right-radius:0}

.input-group-addon:not(:last-child){border-right:0}

.input-group .form-control:not(:first-child),.input-group-addon:not(:first-child),.input-group-btn:not(:first-child)>.btn,.input-group-btn:not(:first-child)>.btn-group>.btn,.input-group-btn:not(:first-child)>.dropdown-toggle,.input-group-btn:not(:last-child)>.btn-group:not(:first-child)>.btn,.input-group-btn:not(:last-child)>.btn:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}

.form-control+.input-group-addon:not(:first-child){border-left:0}

.input-group-btn{font-size:0;white-space:nowrap}

.input-group-btn,.input-group-btn>.btn{position:relative}

.input-group-btn>.btn+.btn{margin-left:-1px}

.input-group-btn>.btn:active,.input-group-btn>.btn:focus,.input-group-btn>.btn:hover{z-index:3}

.input-group-btn:not(:last-child)>.btn,.input-group-btn:not(:last-child)>.btn-group{margin-right:-1px}

.input-group-btn:not(:first-child)>.btn,.input-group-btn:not(:first-child)>.btn-group{z-index:2;margin-left:-1px}

.input-group-btn:not(:first-child)>.btn-group:active,.input-group-btn:not(:first-child)>.btn-group:focus,.input-group-btn:not(:first-child)>.btn-group:hover,.input-group-btn:not(:first-child)>.btn:active,.input-group-btn:not(:first-child)>.btn:focus,.input-group-btn:not(:first-child)>.btn:hover{z-index:3}

.custom-control{position:relative;display:inline-block;padding-left:1.5rem;cursor:pointer}

.custom-control+.custom-control{margin-left:1rem}

.custom-control-input{position:absolute;z-index:-1;opacity:0}

.custom-control-input:checked~.custom-control-indicator{color:#fff;background-color:#0074d9}

.custom-control-input:focus~.custom-control-indicator{-webkit-box-shadow:0 0 0 .075rem #fff,0 0 0 .2rem #0074d9;box-shadow:0 0 0 .075rem #fff,0 0 0 .2rem #0074d9}

.custom-control-input:active~.custom-control-indicator{color:#fff;background-color:#84c6ff}

.custom-control-input:disabled~.custom-control-indicator{cursor:not-allowed;background-color:#eee}

.custom-control-input:disabled~.custom-control-description{color:#767676;cursor:not-allowed}

.custom-control-indicator{position:absolute;top:.25rem;left:0;display:block;width:1rem;height:1rem;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:#ddd;background-repeat:no-repeat;background-position:center center;background-size:50% 50%}

.custom-checkbox .custom-control-indicator{border-radius:0}

.custom-checkbox .custom-control-input:checked~.custom-control-indicator{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 8 8%27%3E%3Cpath fill=%27#fff%27 d=%27M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z%27/%3E%3C/svg%3E")}

.custom-checkbox .custom-control-input:indeterminate~.custom-control-indicator{background-color:#0074d9;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 4 4%27%3E%3Cpath stroke=%27#fff%27 d=%27M0 2h4%27/%3E%3C/svg%3E")}

.custom-radio .custom-control-indicator{border-radius:50%}

.custom-radio .custom-control-input:checked~.custom-control-indicator{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3E%3Ccircle r=%273%27 fill=%27#fff%27/%3E%3C/svg%3E")}

.custom-controls-stacked .custom-control{float:left;clear:left}

.custom-controls-stacked .custom-control+.custom-control{margin-left:0}

.custom-select{display:inline-block;max-width:100%;height:calc(2.5rem - 2px);padding:.375rem 1.75rem .375rem .75rem;padding-right:.75rem \9;color:#707070;vertical-align:middle;background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 4 5%27%3E%3Cpath fill=%27#333%27 d=%27M2 0L0 2h4zm0 5L0 3h4z%27/%3E%3C/svg%3E") no-repeat right .75rem center;background-image:none \9;background-size:8px 10px;border:1px solid rgba(0,0,0,.25);border-radius:0;-moz-appearance:none;-webkit-appearance:none}

.custom-select:focus{border-color:#51a7e8;outline:0}

.custom-select:focus::-ms-value{color:#707070;background-color:#fff}

.custom-select:disabled{color:#f6f6f6;cursor:not-allowed;background-color:#f6f6f6}

.custom-select::-ms-expand{opacity:0}

.custom-select-sm{padding-top:.375rem;padding-bottom:.375rem;font-size:75%}

.custom-file{position:relative;display:inline-block;max-width:100%;height:2.5rem;cursor:pointer}

.custom-file-input{min-width:14rem;max-width:100%;margin:0;filter:alpha(opacity=0);opacity:0}

.custom-file-control{position:absolute;top:0;right:0;left:0;z-index:5;height:2.5rem;padding:.5rem 1rem;line-height:1.5;color:#555;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:#fff;border:1px solid #ddd;border-radius:0}

.custom-file-control:lang(en)::after{content:"Choose file..."}

.custom-file-control::before{position:absolute;top:-1px;right:-1px;bottom:-1px;z-index:6;display:block;height:2.5rem;padding:.5rem 1rem;line-height:1.5;color:#555;background-color:#eee;border:1px solid #ddd;border-radius:0 0 0 0}

.custom-file-control:lang(en)::before{content:"Browse"}

.nav{padding-left:0;margin-bottom:0;list-style:none}

.nav-link{display:inline-block}

.nav-link:focus,.nav-link:hover{text-decoration:none}

.nav-link.disabled{color:#f6f6f6}

.nav-link.disabled,.nav-link.disabled:focus,.nav-link.disabled:hover{color:#f6f6f6;cursor:not-allowed;background-color:transparent}

.nav-inline .nav-item{display:inline-block}

.nav-inline .nav-item+.nav-item,.nav-inline .nav-link+.nav-link{margin-left:1rem}

.nav-tabs{border-bottom:1px solid #ddd}

.nav-pills::after,.nav-tabs::after,.navbar::after{content:"";display:table;clear:both}

.nav-tabs .nav-item{float:left;margin-bottom:-1px}

.nav-tabs .nav-item+.nav-item{margin-left:.2rem}

.nav-tabs .nav-link{display:block;padding:.5em 1em;border:1px solid transparent;border-top-right-radius:0;border-top-left-radius:0}

.nav-tabs .nav-link:focus,.nav-tabs .nav-link:hover{border-color:#f6f6f6 #f6f6f6 #ddd}

.nav-tabs .nav-link.disabled,.nav-tabs .nav-link.disabled:focus,.nav-tabs .nav-link.disabled:hover{color:#f6f6f6;background-color:transparent;border-color:transparent}

.nav-tabs .nav-item.open .nav-link,.nav-tabs .nav-item.open .nav-link:focus,.nav-tabs .nav-item.open .nav-link:hover,.nav-tabs .nav-link.active,.nav-tabs .nav-link.active:focus,.nav-tabs .nav-link.active:hover{color:#707070;background-color:#fff;border-color:#ddd #ddd transparent}

.nav-tabs .dropdown-menu{margin-top:-1px;border-top-right-radius:0;border-top-left-radius:0}

.nav-pills .nav-item{float:left}

.nav-pills .nav-item+.nav-item{margin-left:.2rem}

.nav-pills .nav-link{display:block;padding:.5em 1em;border-radius:0}

.nav-pills .nav-item.open .nav-link,.nav-pills .nav-item.open .nav-link:focus,.nav-pills .nav-item.open .nav-link:hover,.nav-pills .nav-link.active,.nav-pills .nav-link.active:focus,.nav-pills .nav-link.active:hover{color:#fff;cursor:default;background-color:#376467}

.nav-stacked .nav-item{display:block;float:none}

.nav-stacked .nav-item+.nav-item{margin-top:.2rem;margin-left:0}

#checkout #search_widget,#mobile_top_menu_wrapper .top-menu .collapse-icons .remove,#mobile_top_menu_wrapper .top-menu .collapse-icons[aria-expanded=true] .add,.tab-content>.tab-pane{display:none}

.tab-content>.active{display:block}

.navbar{position:relative;padding:.5rem 1rem}

.navbar-full{z-index:1000}

.navbar-fixed-bottom,.navbar-fixed-top{position:fixed;right:0;left:0;z-index:1030}

.navbar-fixed-top{top:0}

.navbar-fixed-bottom{bottom:0}

.navbar-sticky-top{position:sticky;top:0;z-index:1030;width:100%}

.navbar-brand{float:left;padding-top:.25rem;padding-bottom:.25rem;margin-right:1rem;font-size:.9375rem;line-height:inherit}

.navbar-brand:focus,.navbar-brand:hover,.navbar-toggler:focus,.navbar-toggler:hover{text-decoration:none}

.navbar-divider,.navbar-text{padding-top:.425rem;padding-bottom:.425rem}

.navbar-divider{float:left;width:1px;margin-right:1rem;margin-left:1rem;overflow:hidden}

.navbar-divider::before{content:"\00a0"}

.navbar-text{display:inline-block}

.navbar-toggler{width:2.5em;height:2em;padding:.5rem .75rem;font-size:.9375rem;line-height:1;background:no-repeat center center;background-size:24px 24px;border:1px solid transparent;border-radius:0}

.breadcrumb::after,.card-block::after,.card-footer::after,.card-header::after,.modal-footer::after,.modal-header::after,.navbar-toggleable-lg::after,.navbar-toggleable-md::after,.navbar-toggleable-sm::after,.navbar-toggleable-xl::after,.navbar-toggleable-xs::after{content:"";display:table;clear:both}

.navbar-toggleable-xl{display:block}

.navbar-toggleable-xl .navbar-brand{display:block;float:none;margin-top:.5rem;margin-right:0}

.navbar-toggleable-xl .navbar-nav{margin-top:.5rem;margin-bottom:.5rem}

.navbar-toggleable-xl .navbar-nav .dropdown-menu{position:static;float:none}

.navbar-nav .nav-item{float:left}

.navbar-nav .nav-link{display:block;padding-top:.425rem;padding-bottom:.425rem}

.navbar-nav .nav-item+.nav-item,.navbar-nav .nav-link+.nav-link{margin-left:1rem}

.navbar-light .navbar-brand,.navbar-light .navbar-toggler{color:rgba(0,0,0,.9)}

.navbar-light .navbar-brand:focus,.navbar-light .navbar-brand:hover,.navbar-light .navbar-toggler:focus,.navbar-light .navbar-toggler:hover{color:rgba(0,0,0,.9)}

.navbar-light .navbar-nav .nav-link{color:rgba(0,0,0,.5)}

.navbar-light .navbar-nav .nav-link:focus,.navbar-light .navbar-nav .nav-link:hover{color:rgba(0,0,0,.7)}

.navbar-light .navbar-nav .active>.nav-link,.navbar-light .navbar-nav .active>.nav-link:focus,.navbar-light .navbar-nav .active>.nav-link:hover,.navbar-light .navbar-nav .nav-link.active,.navbar-light .navbar-nav .nav-link.active:focus,.navbar-light .navbar-nav .nav-link.active:hover,.navbar-light .navbar-nav .nav-link.open,.navbar-light .navbar-nav .nav-link.open:focus,.navbar-light .navbar-nav .nav-link.open:hover,.navbar-light .navbar-nav .open>.nav-link,.navbar-light .navbar-nav .open>.nav-link:focus,.navbar-light .navbar-nav .open>.nav-link:hover{color:rgba(0,0,0,.9)}

.navbar-light .navbar-toggler{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox=%270 0 32 32%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath stroke=%27rgba%280,0,0,0.5%29%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-miterlimit=%2710%27 d=%27M4 8h24M4 16h24M4 24h24%27/%3E%3C/svg%3E");border-color:rgba(0,0,0,.1)}

.navbar-light .navbar-divider{background-color:rgba(0,0,0,.075)}

.navbar-dark .navbar-brand,.navbar-dark .navbar-toggler{color:#fff}

.navbar-dark .navbar-brand:focus,.navbar-dark .navbar-brand:hover,.navbar-dark .navbar-toggler:focus,.navbar-dark .navbar-toggler:hover{color:#fff}

.navbar-dark .navbar-nav .nav-link{color:rgba(255,255,255,.5)}

.navbar-dark .navbar-nav .nav-link:focus,.navbar-dark .navbar-nav .nav-link:hover{color:rgba(255,255,255,.75)}

.navbar-dark .navbar-nav .active>.nav-link,.navbar-dark .navbar-nav .active>.nav-link:focus,.navbar-dark .navbar-nav .active>.nav-link:hover,.navbar-dark .navbar-nav .nav-link.active,.navbar-dark .navbar-nav .nav-link.active:focus,.navbar-dark .navbar-nav .nav-link.active:hover,.navbar-dark .navbar-nav .nav-link.open,.navbar-dark .navbar-nav .nav-link.open:focus,.navbar-dark .navbar-nav .nav-link.open:hover,.navbar-dark .navbar-nav .open>.nav-link,.navbar-dark .navbar-nav .open>.nav-link:focus,.navbar-dark .navbar-nav .open>.nav-link:hover{color:#fff}

.navbar-dark .navbar-toggler{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox=%270 0 32 32%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath stroke=%27rgba%28255,255,255,0.5%29%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-miterlimit=%2710%27 d=%27M4 8h24M4 16h24M4 24h24%27/%3E%3C/svg%3E");border-color:rgba(255,255,255,.1)}

.navbar-dark .navbar-divider{background-color:rgba(255,255,255,.075)}

.card{position:relative;display:block;background-color:#fff;border-radius:0;border:1px solid rgba(0,0,0,.125)}

.card,.card-title{margin-bottom:.75rem}

.card-subtitle{margin-top:-.375rem;margin-bottom:0}

.card-text:last-child{margin-bottom:0}

.card-link:hover{text-decoration:none}

.card-link+.card-link{margin-left:1.25rem}

.card>.list-group:first-child .list-group-item:first-child{border-top-right-radius:0;border-top-left-radius:0}

.card>.list-group:last-child .list-group-item:last-child{border-bottom-right-radius:0;border-bottom-left-radius:0}

.card-header{padding:.75rem 1.25rem;margin-bottom:0;background-color:#f5f5f5;border-bottom:1px solid rgba(0,0,0,.125)}

.card-header:first-child{border-radius:calc(0 - 1px) calc(0 - 1px) 0 0}

.card-footer{padding:.75rem 1.25rem;background-color:#f5f5f5;border-top:1px solid rgba(0,0,0,.125)}

.card-footer:last-child{border-radius:0 0 calc(0 - 1px) calc(0 - 1px)}

.card-header-tabs{margin-bottom:-.75rem;border-bottom:0}

.card-header-pills,.card-header-tabs{margin-right:-.625rem;margin-left:-.625rem}

.card-primary{background-color:#376467;border-color:#376467}

.card-danger .card-footer,.card-danger .card-header,.card-info .card-footer,.card-info .card-header,.card-primary .card-footer,.card-primary .card-header,.card-success .card-footer,.card-success .card-header,.card-warning .card-footer,.card-warning .card-header{background-color:transparent}

.card-success{background-color:#4cbb6c;border-color:#4cbb6c}

.card-info{background-color:#376467;border-color:#376467}

.card-warning{background-color:#ff9a52;border-color:#ff9a52}

.card-danger{background-color:#ff4c4c;border-color:#ff4c4c}

.card-outline-primary,.card-outline-secondary{background-color:transparent;border-color:#376467}

.card-outline-secondary{border-color:transparent}

.card-outline-info,.card-outline-success{background-color:transparent;border-color:#376467}

.card-outline-success{border-color:#4cbb6c}

.card-outline-danger,.card-outline-warning{background-color:transparent;border-color:#ff9a52}

.card-outline-danger{border-color:#ff4c4c}

.card-inverse .card-footer,.card-inverse .card-header{border-color:rgba(255,255,255,.2)}

.card-inverse .card-blockquote,.card-inverse .card-footer,.card-inverse .card-header,.card-inverse .card-title{color:#fff}

.card-inverse .card-blockquote .blockquote-footer,.card-inverse .card-link,.card-inverse .card-subtitle,.card-inverse .card-text{color:rgba(255,255,255,.65)}

.card-inverse .card-link:focus,.card-inverse .card-link:hover{color:#fff}

.card-blockquote{padding:0;margin-bottom:0;border-left:0}

.card-img{border-radius:calc(0 - 1px)}

.card-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:1.25rem}

.card-img-top{border-top-right-radius:calc(0 - 1px);border-top-left-radius:calc(0 - 1px)}

.card-img-bottom{border-bottom-right-radius:calc(0 - 1px);border-bottom-left-radius:calc(0 - 1px)}

.breadcrumb{padding:.75rem 1rem;margin-bottom:1rem;list-style:none;background-color:#f6f6f6;border-radius:0}

.breadcrumb-item{float:left}

.breadcrumb-item+.breadcrumb-item::before{display:inline-block;padding-right:.5rem;padding-left:.5rem;color:#f6f6f6;content:"/"}

.breadcrumb-item+.breadcrumb-item:hover::before{text-decoration:none}

.breadcrumb-item.active{color:#f6f6f6}

.pagination{display:inline-block;padding-left:0;margin-top:1rem;margin-bottom:1rem;border-radius:0}

.page-item{display:inline}

.page-item:first-child .page-link{margin-left:0;border-bottom-left-radius:0;border-top-left-radius:0}

.page-item:last-child .page-link{border-bottom-right-radius:0;border-top-right-radius:0}

.page-item.active .page-link,.page-item.active .page-link:focus,.page-item.active .page-link:hover{z-index:2;color:#fff;cursor:default;background-color:#376467;border-color:#376467}

.page-item.disabled .page-link,.page-item.disabled .page-link:focus,.page-item.disabled .page-link:hover{color:#f6f6f6;pointer-events:none;cursor:not-allowed;background-color:#fff;border-color:#ddd}

.page-link{position:relative;float:left;padding:.5rem .75rem;margin-left:-1px;color:#376467;text-decoration:none;background-color:#fff;border:1px solid #ddd}

.page-link:focus,.page-link:hover{color:#198195;background-color:#f6f6f6;border-color:#ddd}

.pagination-lg .page-link{padding:.75rem 1.5rem;font-size:.9375rem}

.pagination-lg .page-item:first-child .page-link{border-bottom-left-radius:.3rem;border-top-left-radius:.3rem}

.pagination-lg .page-item:last-child .page-link{border-bottom-right-radius:.3rem;border-top-right-radius:.3rem}

.pagination-sm .page-link{padding:.275rem .75rem;font-size:.875rem}

.pagination-sm .page-item:first-child .page-link{border-bottom-left-radius:.2rem;border-top-left-radius:.2rem}

.pagination-sm .page-item:last-child .page-link{border-bottom-right-radius:.2rem;border-top-right-radius:.2rem}

.tag{display:inline-block;padding:.25em .4em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:0}

.tag:empty{display:none}

.btn .tag{position:relative;top:-1px}

a.tag:focus,a.tag:hover{color:#fff;text-decoration:none;cursor:pointer}

.tag-pill{padding-right:.6em;padding-left:.6em;border-radius:10rem}

.tag-default{background-color:#f6f6f6}

.tag-default[href]:focus,.tag-default[href]:hover{background-color:#ddd}

.tag-primary{background-color:#376467}

.tag-primary[href]:focus,.tag-primary[href]:hover{background-color:#254845}

.tag-success{background-color:#4cbb6c}

.tag-success[href]:focus,.tag-success[href]:hover{background-color:#3a9a56}

.tag-info{background-color:#376467}

.tag-info[href]:focus,.tag-info[href]:hover{background-color:#254845}

.tag-warning{background-color:#ff9a52}

.tag-warning[href]:focus,.tag-warning[href]:hover{background-color:#ff7c1f}

.tag-danger{background-color:#ff4c4c}

.tag-danger[href]:focus,.tag-danger[href]:hover{background-color:#ff1919}

.jumbotron{padding:2rem 1rem;margin-bottom:2rem;background-color:#f6f6f6;border-radius:.3rem}

.jumbotron-hr{border-top-color:#ddd}

.jumbotron-fluid{padding-right:0;padding-left:0;border-radius:0}

.alert{padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:0}

.alert-heading{color:inherit}

.alert-link{font-weight:700}

.alert-dismissible{padding-right:2.5rem}

.alert-dismissible .close{position:relative;top:-.125rem;right:-1.25rem;color:inherit}

.alert-success{background-color:#dff0d8;border-color:#d0e9c6;color:#3c763d}

.alert-success hr{border-top-color:#c1e2b3}

.alert-success .alert-link{color:#2b542c}

.alert-info{background-color:#d9edf7;border-color:#bcdff1;color:#31708f}

.alert-info hr{border-top-color:#a6d5ec}

.alert-info .alert-link{color:#245269}

.alert-warning{background-color:rgba(255,154,82,.3);border-color:#ff9a52;color:#232323}

.alert-warning hr{border-top-color:#ff8b39}

.alert-danger{background-color:#f2dede;border-color:#ebcccc;color:#a94442}

.alert-danger hr{border-top-color:#e4b9b9}

.alert-danger .alert-link{color:#843534}

.progress{display:block;width:100%;height:1rem;margin-bottom:1rem}

.progress[value]{background-color:#eee;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0}

.progress[value]::-ms-fill{background-color:#0074d9;border:0}

.progress[value]::-moz-progress-bar{background-color:#0074d9;border-bottom-left-radius:0;border-top-left-radius:0}

.progress[value]::-webkit-progress-value{background-color:#0074d9;border-bottom-left-radius:0;border-top-left-radius:0}

.progress[value="100"]::-moz-progress-bar{border-bottom-right-radius:0;border-top-right-radius:0}

.progress[value="100"]::-webkit-progress-value{border-bottom-right-radius:0;border-top-right-radius:0}

.progress[value]::-webkit-progress-bar{background-color:#eee;border-radius:0}

.progress[value],base::-moz-progress-bar{background-color:#eee;border-radius:0}

.progress-striped[value]::-webkit-progress-value{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}

.progress-striped[value]::-moz-progress-bar{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}

.progress-striped[value]::-ms-fill{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}

.progress-animated[value]::-webkit-progress-value{-webkit-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite}

.progress-animated[value]::-moz-progress-bar{animation:progress-bar-stripes 2s linear infinite}

.progress-success[value]::-webkit-progress-value{background-color:#4cbb6c}

.progress-success[value]::-moz-progress-bar{background-color:#4cbb6c}

.progress-success[value]::-ms-fill{background-color:#4cbb6c}

.progress-info[value]::-webkit-progress-value{background-color:#376467}

.progress-info[value]::-moz-progress-bar{background-color:#376467}

.progress-info[value]::-ms-fill{background-color:#376467}

.progress-warning[value]::-webkit-progress-value{background-color:#ff9a52}

.progress-warning[value]::-moz-progress-bar{background-color:#ff9a52}

.progress-warning[value]::-ms-fill{background-color:#ff9a52}

.progress-danger[value]::-webkit-progress-value{background-color:#ff4c4c}

.progress-danger[value]::-moz-progress-bar{background-color:#ff4c4c}

.progress-danger[value]::-ms-fill{background-color:#ff4c4c}

.media,.media-body{overflow:hidden}

.media-body{width:10000px}

.media-body,.media-left,.media-right{display:table-cell;vertical-align:top}

.media-middle{vertical-align:middle}

.media-bottom{vertical-align:bottom}

.media-object{display:block}

.media-object.img-thumbnail{max-width:none}

.media-right{padding-left:10px}

.media-left{padding-right:10px}

.media-heading{margin-top:0;margin-bottom:5px}

.media-list,ul{padding-left:0;list-style:none}

#wrapper .breadcrumb ol,.list-group{padding-left:0;margin-bottom:0}

.list-group-item{position:relative;display:block;padding:.75rem 1.25rem;margin-bottom:-1px;background-color:#fff;border:1px solid #ddd}

.list-group-item:first-child{border-top-right-radius:0;border-top-left-radius:0}

.list-group-item:last-child{margin-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}

.list-group-item.disabled,.list-group-item.disabled:focus,.list-group-item.disabled:hover{color:#f6f6f6;cursor:not-allowed;background-color:#f6f6f6}

.list-group-item.disabled .list-group-item-heading,.list-group-item.disabled:focus .list-group-item-heading,.list-group-item.disabled:hover .list-group-item-heading{color:inherit}

.list-group-item.disabled .list-group-item-text,.list-group-item.disabled:focus .list-group-item-text,.list-group-item.disabled:hover .list-group-item-text{color:#f6f6f6}

.list-group-item.active,.list-group-item.active:focus,.list-group-item.active:hover{z-index:2;color:#fff;text-decoration:none;background-color:#376467;border-color:#376467}

.list-group-item.active .list-group-item-heading,.list-group-item.active .list-group-item-heading>.small,.list-group-item.active .list-group-item-heading>small,.list-group-item.active:focus .list-group-item-heading,.list-group-item.active:focus .list-group-item-heading>.small,.list-group-item.active:focus .list-group-item-heading>small,.list-group-item.active:hover .list-group-item-heading,.list-group-item.active:hover .list-group-item-heading>.small,.list-group-item.active:hover .list-group-item-heading>small{color:inherit}

.list-group-item.active .list-group-item-text,.list-group-item.active:focus .list-group-item-text,.list-group-item.active:hover .list-group-item-text{color:#d0f1f7}

.list-group-flush .list-group-item{border-right:0;border-left:0;border-radius:0}

.list-group-item-action{width:100%;color:#555;text-align:inherit}

.list-group-item-action .list-group-item-heading{color:#333}

.list-group-item-action:focus,.list-group-item-action:hover{color:#555;text-decoration:none;background-color:#f5f5f5}

.list-group-item-success{color:#3c763d;background-color:#dff0d8}

a.list-group-item-success,button.list-group-item-success{color:#3c763d}

a.list-group-item-danger .list-group-item-heading,a.list-group-item-info .list-group-item-heading,a.list-group-item-success .list-group-item-heading,a.list-group-item-warning .list-group-item-heading,button.list-group-item-danger .list-group-item-heading,button.list-group-item-info .list-group-item-heading,button.list-group-item-success .list-group-item-heading,button.list-group-item-warning .list-group-item-heading{color:inherit}

a.list-group-item-success:focus,a.list-group-item-success:hover,button.list-group-item-success:focus,button.list-group-item-success:hover{color:#3c763d;background-color:#d0e9c6}

a.list-group-item-success.active,a.list-group-item-success.active:focus,a.list-group-item-success.active:hover,button.list-group-item-success.active,button.list-group-item-success.active:focus,button.list-group-item-success.active:hover{color:#fff;background-color:#3c763d;border-color:#3c763d}

.list-group-item-info{color:#31708f;background-color:#d9edf7}

a.list-group-item-info,button.list-group-item-info{color:#31708f}

a.list-group-item-info:focus,a.list-group-item-info:hover,button.list-group-item-info:focus,button.list-group-item-info:hover{color:#31708f;background-color:#c4e3f3}

a.list-group-item-info.active,a.list-group-item-info.active:focus,a.list-group-item-info.active:hover,button.list-group-item-info.active,button.list-group-item-info.active:focus,button.list-group-item-info.active:hover{color:#fff;background-color:#31708f;border-color:#31708f}

.list-group-item-warning{color:#8a6d3b;background-color:#fcf8e3}

a.list-group-item-warning,button.list-group-item-warning{color:#8a6d3b}

a.list-group-item-warning:focus,a.list-group-item-warning:hover,button.list-group-item-warning:focus,button.list-group-item-warning:hover{color:#8a6d3b;background-color:#faf2cc}

a.list-group-item-warning.active,a.list-group-item-warning.active:focus,a.list-group-item-warning.active:hover,button.list-group-item-warning.active,button.list-group-item-warning.active:focus,button.list-group-item-warning.active:hover{color:#fff;background-color:#8a6d3b;border-color:#8a6d3b}

.list-group-item-danger{color:#a94442;background-color:#f2dede}

a.list-group-item-danger,button.list-group-item-danger{color:#a94442}

a.list-group-item-danger:focus,a.list-group-item-danger:hover,button.list-group-item-danger:focus,button.list-group-item-danger:hover{color:#a94442;background-color:#ebcccc}

a.list-group-item-danger.active,a.list-group-item-danger.active:focus,a.list-group-item-danger.active:hover,button.list-group-item-danger.active,button.list-group-item-danger.active:focus,button.list-group-item-danger.active:hover{color:#fff;background-color:#a94442;border-color:#a94442}

.list-group-item-heading{margin-top:0;margin-bottom:5px}

.list-group-item-text{margin-bottom:0;line-height:1.3}

.embed-responsive{position:relative;display:block;height:0;padding:0;overflow:hidden}

.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}

.embed-responsive-21by9{padding-bottom:42.85714%}

.embed-responsive-16by9{padding-bottom:56.25%}

.embed-responsive-4by3{padding-bottom:75%}

.embed-responsive-1by1{padding-bottom:100%}

.close{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}

.close:focus,.close:hover{color:#000;text-decoration:none;cursor:pointer;opacity:.5}

button.close{padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none}

.modal,.modal-open{overflow:hidden}

.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;display:none;outline:0}

.modal.fade .modal-dialog{-webkit-transition:-webkit-transform .3s ease-out;transition:transform .3s ease-out;transition:transform .3s ease-out,-webkit-transform .3s ease-out;-webkit-transform:translate(0,-25%);transform:translate(0,-25%)}

.modal.in .modal-dialog{-webkit-transform:translate(0,0);transform:translate(0,0)}

.modal-open .modal{overflow-x:hidden;overflow-y:auto}

.modal-dialog{position:relative;width:auto;margin:10px}

.modal-content{position:relative;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem;outline:0}

.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000}

.modal-backdrop.fade{opacity:0}

.modal-backdrop.in{opacity:.5}

.modal-header{padding:15px;border-bottom:1px solid #e5e5e5}

.modal-header .close{margin-top:-2px}

.modal-title{margin:0;line-height:1.5}

.modal-body{position:relative;padding:15px}

.modal-footer{padding:15px;text-align:right;border-top:1px solid #e5e5e5}

.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}

.tooltip{position:absolute;z-index:1070;display:block;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-style:normal;font-weight:400;letter-spacing:normal;line-break:auto;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;font-size:.875rem;word-wrap:break-word;opacity:0}

.tooltip.in{opacity:.9}

.tooltip.bs-tether-element-attached-bottom,.tooltip.tooltip-top{padding:5px 0;margin-top:-3px}

.tooltip.bs-tether-element-attached-bottom .tooltip-inner::before,.tooltip.tooltip-top .tooltip-inner::before{bottom:0;left:50%;margin-left:-5px;content:"";border-width:5px 5px 0;border-top-color:#ff4c4c}

.tooltip.bs-tether-element-attached-left,.tooltip.tooltip-right{padding:0 5px;margin-left:3px}

.tooltip.bs-tether-element-attached-left .tooltip-inner::before,.tooltip.tooltip-right .tooltip-inner::before{top:50%;left:0;margin-top:-5px;content:"";border-width:5px 5px 5px 0;border-right-color:#ff4c4c}

.tooltip.bs-tether-element-attached-top,.tooltip.tooltip-bottom{padding:5px 0;margin-top:3px}

.tooltip.bs-tether-element-attached-top .tooltip-inner::before,.tooltip.tooltip-bottom .tooltip-inner::before{top:0;left:50%;margin-left:-5px;content:"";border-width:0 5px 5px;border-bottom-color:#ff4c4c}

.tooltip.bs-tether-element-attached-right,.tooltip.tooltip-left{padding:0 5px;margin-left:-3px}

.tooltip.bs-tether-element-attached-right .tooltip-inner::before,.tooltip.tooltip-left .tooltip-inner::before{top:50%;right:0;margin-top:-5px;content:"";border-width:5px 0 5px 5px;border-left-color:#ff4c4c}

.tooltip-inner{max-width:200px;padding:3px 8px;color:#fff;text-align:center;background-color:#ff4c4c;border-radius:0}

.tooltip-inner::before{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}

.popover{position:absolute;top:0;left:0;z-index:1060;display:block;max-width:276px;padding:1px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-style:normal;font-weight:400;letter-spacing:normal;line-break:auto;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;font-size:.875rem;word-wrap:break-word;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem}

.popover.bs-tether-element-attached-bottom,.popover.popover-top{margin-top:-10px}

.popover.bs-tether-element-attached-bottom::after,.popover.bs-tether-element-attached-bottom::before,.popover.popover-top::after,.popover.popover-top::before{left:50%;border-bottom-width:0}

.popover.bs-tether-element-attached-bottom::before,.popover.popover-top::before{bottom:-11px;margin-left:-11px;border-top-color:rgba(0,0,0,.25)}

.popover.bs-tether-element-attached-bottom::after,.popover.popover-top::after{bottom:-10px;margin-left:-10px;border-top-color:#fff}

.popover.bs-tether-element-attached-left,.popover.popover-right{margin-left:10px}

.popover.bs-tether-element-attached-left::after,.popover.bs-tether-element-attached-left::before,.popover.popover-right::after,.popover.popover-right::before{top:50%;border-left-width:0}

.popover.bs-tether-element-attached-left::before,.popover.popover-right::before{left:-11px;margin-top:-11px;border-right-color:rgba(0,0,0,.25)}

.popover.bs-tether-element-attached-left::after,.popover.popover-right::after{left:-10px;margin-top:-10px;border-right-color:#fff}

.popover.popover-bottom{margin-top:10px}

.popover.bs-tether-element-attached-top::after,.popover.bs-tether-element-attached-top::before,.popover.popover-bottom::after,.popover.popover-bottom::before{left:50%;border-top-width:0}

.popover.bs-tether-element-attached-top::before,.popover.popover-bottom::before{top:-11px;margin-left:-11px;border-bottom-color:rgba(0,0,0,.25)}

.popover.bs-tether-element-attached-top::after,.popover.popover-bottom::after{top:-10px;margin-left:-10px;border-bottom-color:#f7f7f7}

.popover.bs-tether-element-attached-top .popover-title::before,.popover.popover-bottom .popover-title::before{position:absolute;top:0;left:50%;display:block;width:20px;margin-left:-10px;content:"";border-bottom:1px solid #f7f7f7}

.popover.bs-tether-element-attached-right,.popover.popover-left{margin-left:-10px}

.popover.bs-tether-element-attached-right::after,.popover.bs-tether-element-attached-right::before,.popover.popover-left::after,.popover.popover-left::before{top:50%;border-right-width:0}

.popover.bs-tether-element-attached-right::before,.popover.popover-left::before{right:-11px;margin-top:-11px;border-left-color:rgba(0,0,0,.25)}

.popover.bs-tether-element-attached-right::after,.popover.popover-left::after{right:-10px;margin-top:-10px;border-left-color:#fff}

.popover-title{padding:8px 14px;margin:0;font-size:1rem;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;border-radius:.2375rem .2375rem 0 0}

.popover-title:empty{display:none}

.popover-content{padding:9px 14px}

.popover::after,.popover::before{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}

.popover::before{content:"";border-width:11px}

.popover::after{content:"";border-width:10px}

.carousel,.carousel-inner,.search-widget form{position:relative}

.carousel-inner{width:100%;overflow:hidden}

.carousel-inner>.carousel-item{position:relative;display:none;-webkit-transition:.6s ease-in-out left;transition:.6s ease-in-out left}

.carousel-inner>.carousel-item>a>img,.carousel-inner>.carousel-item>img{line-height:1}

#mobile_top_menu_wrapper .top-menu .collapse-icons[aria-expanded=true] .remove,#mobile_top_menu_wrapper .top-menu .collapse.in,#mobile_top_menu_wrapper .top-menu .sub-menu.collapse.in,.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block}

.carousel-inner>.active,.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0}

.carousel-control,.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%}

.carousel-inner>.next{left:100%}

.carousel-inner>.active.left,.carousel-inner>.prev{left:-100%}

.carousel-inner>.active.right{left:100%}

.carousel-control{bottom:0;left:0;width:15%;font-size:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6);opacity:.5}

.carousel-control.left{background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001)));background-image:linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1)}

.carousel-control.right{right:0;left:auto;background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));background-image:linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1)}

.carousel-control:focus,.carousel-control:hover{color:#fff;text-decoration:none;outline:0;opacity:.9}

.carousel-control .icon-next,.carousel-control .icon-prev{position:absolute;top:50%;z-index:5;display:inline-block;width:20px;height:20px;margin-top:-10px;font-family:serif;line-height:1}

.carousel-control .icon-prev{left:50%;margin-left:-10px}

.carousel-control .icon-next{right:50%;margin-right:-10px}

.carousel-control .icon-prev::before{content:"\2039"}

.carousel-control .icon-next::before{content:"\203a"}

.carousel-indicators{position:absolute;bottom:10px;left:50%;z-index:15;width:60%;padding-left:0;margin-left:-30%;text-align:center;list-style:none}

.carousel-indicators li{display:inline-block;width:10px;height:10px;margin:1px;text-indent:-999px;cursor:pointer;background-color:transparent;border:1px solid #fff;border-radius:10px;border-color:#707070}

.carousel-indicators .active{width:12px;height:12px;margin:0}

.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}

.carousel-caption .btn{text-shadow:none}

.align-baseline{vertical-align:baseline!important}

.align-top{vertical-align:top!important}

.align-middle{vertical-align:middle!important}

.align-bottom{vertical-align:bottom!important}

.align-text-bottom{vertical-align:text-bottom!important}

.align-text-top{vertical-align:text-top!important}

.bg-faded{background-color:#f7f7f9}

.bg-primary{background-color:#376467!important}

a.bg-primary:focus,a.bg-primary:hover{background-color:#254845!important}

.bg-success{background-color:#4cbb6c!important}

a.bg-success:focus,a.bg-success:hover{background-color:#3a9a56!important}

.bg-info{background-color:#376467!important}

a.bg-info:focus,a.bg-info:hover{background-color:#254845!important}

.bg-warning{background-color:#ff9a52!important}

a.bg-warning:focus,a.bg-warning:hover{background-color:#ff7c1f!important}

.bg-danger{background-color:#ff4c4c!important}

a.bg-danger:focus,a.bg-danger:hover{background-color:#ff1919!important}

.bg-inverse{background-color:#363a42!important}

a.bg-inverse:focus,a.bg-inverse:hover{background-color:#1f2126!important}

.rounded{border-radius:0}

.rounded-top{border-top-right-radius:0;border-top-left-radius:0}

.rounded-right{border-bottom-right-radius:0;border-top-right-radius:0}

.rounded-bottom{border-bottom-right-radius:0;border-bottom-left-radius:0}

.rounded-left{border-bottom-left-radius:0;border-top-left-radius:0}

.rounded-circle{border-radius:50%}

.clearfix::after{content:"";display:table;clear:both}

.d-block{display:block!important}

.d-inline-block{display:inline-block!important}

.d-inline{display:inline!important}

.float-xs-left{float:left!important}

.float-xs-right{float:right!important}

.float-xs-none{float:none!important}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}

.w-100{width:100%!important}

.h-100{height:100%!important}

.mx-auto{margin-right:auto!important;margin-left:auto!important}

.m-0{margin:0!important}

.mt-0{margin-top:0!important}

.mr-0{margin-right:0!important}

.mb-0{margin-bottom:0!important}

.ml-0,.mx-0{margin-left:0!important}

.mx-0{margin-right:0!important}

.my-0{margin-top:0!important;margin-bottom:0!important}

.m-1{margin:1rem!important}

.mt-1{margin-top:1rem!important}

.mr-1{margin-right:1rem!important}

.mb-1{margin-bottom:1rem!important}

.ml-1,.mx-1{margin-left:1rem!important}

.mx-1{margin-right:1rem!important}

.my-1{margin-top:1rem!important;margin-bottom:1rem!important}

.m-2{margin:1.5rem!important}

.mt-2{margin-top:1.5rem!important}

.mr-2{margin-right:1.5rem!important}

.mb-2{margin-bottom:1.5rem!important}

.ml-2,.mx-2{margin-left:1.5rem!important}

.mx-2{margin-right:1.5rem!important}

.my-2{margin-top:1.5rem!important;margin-bottom:1.5rem!important}

.m-3{margin:3rem!important}

.mt-3{margin-top:3rem!important}

.mr-3{margin-right:3rem!important}

.mb-3{margin-bottom:3rem!important}

.ml-3,.mx-3{margin-left:3rem!important}

.mx-3{margin-right:3rem!important}

.my-3{margin-top:3rem!important;margin-bottom:3rem!important}

.p-0{padding:0!important}

.pt-0{padding-top:0!important}

.pr-0{padding-right:0!important}

.pb-0{padding-bottom:0!important}

.pl-0,.px-0{padding-left:0!important}

.px-0{padding-right:0!important}

.py-0{padding-top:0!important;padding-bottom:0!important}

.p-1{padding:1rem!important}

.pt-1{padding-top:1rem!important}

.pr-1{padding-right:1rem!important}

.pb-1{padding-bottom:1rem!important}

.pl-1,.px-1{padding-left:1rem!important}

.px-1{padding-right:1rem!important}

.py-1{padding-top:1rem!important;padding-bottom:1rem!important}

.p-2{padding:1.5rem!important}

.pt-2{padding-top:1.5rem!important}

.pr-2{padding-right:1.5rem!important}

.pb-2{padding-bottom:1.5rem!important}

.pl-2,.px-2{padding-left:1.5rem!important}

.px-2{padding-right:1.5rem!important}

.py-2{padding-top:1.5rem!important;padding-bottom:1.5rem!important}

.p-3{padding:3rem!important}

.pt-3{padding-top:3rem!important}

.pr-3{padding-right:3rem!important}

.pb-3{padding-bottom:3rem!important}

.pl-3,.px-3{padding-left:3rem!important}

.px-3{padding-right:3rem!important}

.py-3{padding-top:3rem!important;padding-bottom:3rem!important}

.pos-f-t{position:fixed;top:0;right:0;left:0;z-index:1030}

.text-justify{text-align:justify!important}

.text-nowrap{white-space:nowrap!important}

.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.text-xs-left{text-align:left!important}

.text-xs-right{text-align:right!important}

.text-xs-center{text-align:center!important}

.text-lowercase{text-transform:lowercase!important}

.text-uppercase{text-transform:uppercase!important}

.text-capitalize{text-transform:capitalize!important}

.font-weight-normal{font-weight:400}

.font-weight-bold{font-weight:700}

.font-italic{font-style:italic}

.text-white{color:#fff!important}

.text-muted{color:#707070!important}

a.text-muted:focus,a.text-muted:hover{color:#616161!important}

.text-primary{color:#376467!important}

a.text-primary:focus,a.text-primary:hover{color:#254845!important}

.text-success{color:#4cbb6c!important}

a.text-success:focus,a.text-success:hover{color:#3a9a56!important}

.text-info{color:#376467!important}

a.text-info:focus,a.text-info:hover{color:#254845!important}

.text-warning{color:#ff9a52!important}

a.text-warning:focus,a.text-warning:hover{color:#ff7c1f!important}

.text-danger{color:#ff4c4c!important}

a.text-danger:focus,a.text-danger:hover{color:#ff1919!important}

.text-gray-dark{color:#363a42!important}

a.text-gray-dark:focus,a.text-gray-dark:hover{color:#1f2126!important}

.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}

.invisible{visibility:hidden!important}

.hidden-xl-down,.hidden-xs-up,.visible-print-block,.visible-print-inline,.visible-print-inline-block{display:none!important}

@font-face{font-family:"Material Icons";font-style:normal;font-weight:400;font-display:swap;src:url(../css/479700ea91d964d295d7.eot);src:local("Material Icons"),local("MaterialIcons-Regular"),url(../css/12a47ed5fd5585f0f422.woff2) format("woff2"),url(../css/f2a0933406f783065152.woff) format("woff"),url(../css/00b1fb69fb78ff50fd55.ttf) format("truetype")}

.material-icons{display:inline-block;width:1em;height:1em;font-family:"Material Icons",Arial,sans-serif;font-size:24px;font-style:normal;font-weight:500;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;vertical-align:middle;text-rendering:optimizeLegibility;-webkit-font-feature-settings:"liga";font-feature-settings:"liga"}

body,html{height:100%}

.material-icons,body{direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

body{font-family:Manrope,sans-serif;font-size:1rem;line-height:1.25em}

#header .top-menu a[data-depth="0"]:hover,a:hover{color:#376467;text-decoration:none}

.page-content.page-cms ul,p{font-size:.9375rem;font-weight:400;color:#707070}

.custom-checkbox input[type=checkbox]+span.color,.variant-links .color,label .color{display:inline-block;width:1.125rem;height:1.125rem;margin:.3125rem .5rem .3125rem .3125rem;cursor:pointer;background-size:contain;border:1px solid #979797}

.custom-checkbox input[type=checkbox]+span.color.active,.custom-checkbox input[type=checkbox]+span.color:hover,.variant-links .color.active,.variant-links .color:hover,label .color.active,label .color:hover{border:2px solid #232323}

.facet-label.active .custom-checkbox span.color,.facet-label:hover .custom-checkbox span.color{border:1px solid #979797}

.h1,.h2,.h3,.h4,body{color:#232323}

.h4{font-weight:700}

.btn-primary,.btn-secondary{padding:.5rem 1.25rem;font-weight:600;text-transform:uppercase}

.btn-primary .material-icons,.btn-secondary .material-icons,.btn-tertiary .material-icons{margin-right:.625rem}

.btn-tertiary{padding:.25rem;margin:.25rem 0;font-size:.875rem;font-weight:400;color:#707070;text-transform:lowercase;background-color:#f7f7f7}

.btn-tertiary .material-icons,body#checkout section.checkout-step .step-edit .edit{font-size:1rem}

.btn-tertiary:hover{border:1px solid rgba(35,35,35,.2)}

.btn-unstyle{padding:0;text-align:inherit;background-color:transparent;border:0}

.btn-unstyle:focus{outline:0}

.block_newsletter form input[type=text]:focus+button .search,.btn-unstyle:focus .expand-more,.search-widget form input[type=text]:focus+button .search{color:#376467}

.card{border:0}

.label,label{font-size:.875rem;color:#232323;text-align:right}

small.label,small.value{font-size:.8125rem}

.form-control-label{padding-top:.625rem}

.form-control{padding:.5rem 1rem;color:#707070;background:#f6f6f6;border:1px solid rgba(0,0,0,.25)}

.form-control:focus{color:#232323;background-color:#fff;outline:.1875rem solid #376467}

.input-group,body#checkout .custom-checkbox{display:-webkit-box;display:-ms-flexbox;display:flex}

.input-group.focus{outline:.1875rem solid #376467}

.input-group .form-control:focus{outline:0}

.input-group .input-group-btn{display:block;width:auto}

.input-group .input-group-btn>.btn{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;padding:.25rem 1rem;margin-left:0;font-size:.6875rem;font-weight:500;color:#fff;text-transform:uppercase;border:0;-webkit-box-shadow:none;box-shadow:none}

.input-group .input-group-btn>.btn[data-action=show-password]{padding:.78rem 1rem;background:#707070}

input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#707070}

input::-moz-placeholder,textarea::-moz-placeholder{color:#707070}

input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#707070}

input:-moz-placeholder,textarea:-moz-placeholder{color:#707070}

input:active::-webkit-input-placeholder,textarea:active::-webkit-input-placeholder{color:#232323}

input:active::-moz-placeholder,textarea:active::-moz-placeholder{color:#232323}

input:active:-ms-input-placeholder,textarea:active:-ms-input-placeholder{color:#232323}

input:active:-moz-placeholder,textarea:active:-moz-placeholder{color:#232323}

.form-control-select{height:2.625rem;padding:0 .5rem;background:#f6f6f6 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAAPklEQVR4Ae3TwREAEBQD0V/6do4SXPZg7EsBhsQ8IEmSMOsiuEfg3gL3oXC7wK0bd1G4o8X9F4yIkyQfSrIByQBjp7QuND8AAAAASUVORK5CYII=) no-repeat right .5rem center/1.25rem 1.25rem;-moz-appearance:none;-webkit-appearance:none}

.form-control-valign{padding-top:.5rem}

.form-control-comment{padding-top:.5rem;font-size:.875rem;color:#707070}

.form-control-submit.disabled{color:#fff;background:#376467}

.form-group.has-error input,.form-group.has-error select{outline:.1875rem solid #ff4c4c}

.form-group.has-error .help-block{color:#ff4c4c}

#mobile_top_menu_wrapper .top-menu .sub-menu ul[data-depth="1"],.group-span-filestyle label,.page-order-detail #order-infos ul,body#checkout section.checkout-step hr{margin:0}

.bootstrap-touchspin .group-span-filestyle .btn-touchspin,.group-span-filestyle .bootstrap-touchspin .btn-touchspin,.group-span-filestyle .btn-default{padding:.5rem 1rem;font-size:.875rem;color:#fff;text-transform:uppercase;background:#376467;border-radius:0}

.bootstrap-touchspin{display:inline-block;float:left;width:auto}

.bootstrap-touchspin input:focus{outline:0}

.bootstrap-touchspin input.form-control,.bootstrap-touchspin input.input-group{float:left;width:3rem;height:2.5rem;padding:.175rem .5rem;color:#232323;background-color:#fff;border:1px solid rgba(0,0,0,.25)}

.bootstrap-touchspin .btn-touchspin{height:1.3125rem;background-color:#fff;border:1px solid rgba(0,0,0,.25)}

#order-items table tr.total-value,.bootstrap-touchspin .btn-touchspin:hover{background-color:#f6f6f6}

.bootstrap-touchspin .input-group-btn-vertical{float:left;width:auto;color:#232323}

.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down,.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up{border-radius:0}

.bootstrap-touchspin .input-group-btn-vertical .touchspin-up::after{content:"\E5CE"}

.bootstrap-touchspin .input-group-btn-vertical .touchspin-down::after{content:"\E5CF"}

.bootstrap-touchspin .input-group-btn-vertical i{top:.0625rem;left:.1875rem;font-size:.9375rem}

.radio-inline .custom-radio{margin-right:.5rem}

.radio-inline:first-of-type{margin-right:1rem}

form section .form-informations{display:inline-block;margin-top:.25rem;margin-bottom:1rem;color:#232323}

form section .form-informations-option,form section .form-informations-title{display:inline-block;margin-bottom:1rem;font-size:1.25rem}

form .form-control-label{font-size:.875rem;font-weight:700;color:#232323}

.custom-radio{position:relative;display:inline-block;width:18px;height:18px;margin-right:.5rem;vertical-align:middle;cursor:pointer;background:#fff;border:#979797 1px solid;border-radius:50%}

.custom-radio input[type=radio]{cursor:pointer;opacity:0}

.custom-radio input[type=radio]:checked+span{position:absolute;top:.125rem;left:.125rem;display:block;width:12px;height:12px;background-color:#376467;border-radius:50%}

.custom-checkbox input[type=checkbox]:focus+span,.custom-radio input[type=radio]:focus+span{border-color:#707070}

.custom-checkbox{position:relative;word-break:break-word}

.custom-checkbox input[type=checkbox]{position:absolute;width:18px;height:18px;margin-top:.25rem;cursor:pointer;opacity:0}

.custom-checkbox input[type=checkbox]+span{display:inline-block;width:1.125rem;height:1.125rem;margin-right:.5rem;vertical-align:middle;pointer-events:none;cursor:pointer;border:1px #979797 solid}

.custom-checkbox input[type=checkbox]+span .checkbox-checked{display:none;margin:-.125rem;font-size:1.25rem;color:#232323}

.custom-checkbox input[type=checkbox]:checked+span .checkbox-checked{display:block}

.custom-checkbox label,body#checkout #delivery>label,body#checkout section.checkout-step #customer-form .form-control-label,body#checkout section.checkout-step #delivery-address .form-control-label,body#checkout section.checkout-step #invoice-address .form-control-label,body#checkout section.checkout-step #login-form .form-control-label{text-align:left}

.text-muted{font-size:.875rem}

.done{display:inline-block;padding:0 .8125rem;margin-right:1.563rem;color:#4cbb6c}

.thumb-mask>.mask{position:relative;width:3.438rem;height:3.438rem;margin:.625rem 0;overflow:hidden;border:#f6f6f6 1px solid}

.thumb-mask>.mask img{width:55px;height:55px}

.definition-list dl{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}

.definition-list dl dt{font-weight:500}

.definition-list dl dd,.definition-list dl dt{-webkit-box-flex:0;-ms-flex:0 0 45%;flex:0 0 45%;padding:.625rem;margin:.125rem;background:#f6f6f6}

.definition-list dl dd:nth-of-type(even),.definition-list dl dt:nth-of-type(even),.product-features>dl.data-sheet dd.value:nth-of-type(even),.product-features>dl.data-sheet dt.name:nth-of-type(even){background:#f6f6f6}

.help-block{margin-top:.625rem}

.btn.disabled,.btn.disabled:hover{color:#ddd;background:#f6f6f6;opacity:1}

.alert-warning .material-icons{padding-top:.3125rem;margin-right:.625rem;font-size:2rem;color:#ff9a52}

.alert-warning .alert-text{padding-top:.625rem;font-size:.9375rem}

.alert-warning .alert-link{padding:.3125rem 1.25rem;margin-left:.625rem;font-size:.8125rem;font-weight:600;color:#6c868e;border-width:2px;border-radius:2px}

.alert-warning ul li:last-child .alert-link{color:#fff}

.alert-warning .warning-buttons{margin-top:.3125rem}

.btn-tertiary-outline{color:#6c868e;background-color:transparent;background-image:none;border:.15rem solid #6c868e;border-color:#6c868e}

.btn-tertiary-outline:hover{color:#bbcdd2;border-color:#bbcdd2}

.alert{font-size:.8125rem}

.nav-item .nav-link,.nav-item .nav-separtor{font-weight:600;color:#707070}

#mobile_top_menu_wrapper .top-menu,.nav-item .nav-link.active,.nav-item .nav-separtor.active,.page-addresses .address .address-footer a:hover,body#checkout,body#checkout section.checkout-step .add-address a{color:#232323}

.separator{margin:0;border-color:rgba(0,0,0,.25)}

.modal-dialog-centered{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:calc(100% - (30px*2))}

.popover{font-family:inherit}

input[type=number]{-moz-appearance:textfield}

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

.ui-autocomplete.ui-front{z-index:999}

.ps-alert-error{margin-bottom:0}

.ps-alert-error .item{background-color:#ff4c4c}

.ps-alert-error .item,.ps-alert-success .item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:1rem;border:2px #ff4c4c solid}

.ps-alert-error .item i,.ps-alert-success .item i{display:-webkit-box;display:-ms-flexbox;display:flex;border:15px #ff4c4c solid}

.ps-alert-error .item i svg{width:24px;height:24px;background-color:#ff4c4c}

.ps-alert-success .item i svg{width:24px;height:24px}

.page-content.page-cms .ps-alert-error .item ul,.page-content.page-cms .ps-alert-success .item ul,.ps-alert-error .item .page-content.page-cms ul,.ps-alert-error .item p,.ps-alert-success .item .page-content.page-cms ul,.ps-alert-success .item p{width:100%;padding:18px 20px;margin:0;background-color:#fff}

.ps-alert-success{padding:.25rem .25rem 2.75rem}

.ps-alert-success .item,.ps-alert-success .item i{border-color:#4cbb6c}

.ps-alert-success .item,.ps-alert-success .item i svg{background-color:#4cbb6c}

#mobile_top_menu_wrapper .js-top-menu-bottom a,.dropdown,body#checkout section.checkout-step small{color:#707070}

.carousel .carousel-control .icon-next:hover i,.carousel .carousel-control .icon-prev:hover i,.dropdown:hover .expand-more,.page-my-account #content .links a:hover i,.search-widget form button[type=submit] .search:hover,.top-menu .sub-menu a:hover{color:#376467}

.dropdown .expand-more{color:#232323;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}

.dropdown .active{max-height:200px;overflow-y:hidden;visibility:visible}

.dropdown select{color:#232323;background:#fff;border:0;outline:0;-moz-appearance:none}

.dropdown-item:focus,.dropdown-item:hover{color:#376467;text-decoration:none;background:0 0}

.page-not-found .search-widget form,.search-widget,body#checkout section.checkout-step.-reachable.-complete h1 .done{display:inline-block}

.block_newsletter form input[type=text],.search-widget form input[type=text]{min-width:255px;padding:10px;color:#707070;border:0;border:1px solid rgba(0,0,0,.25)}

.search-widget form input[type=text]:focus{color:#232323;background:#fff;outline:3px #376467 solid}

.block_newsletter form button[type=submit],.search-widget form button[type=submit]{position:absolute;right:.125rem;bottom:.3125rem;color:#707070;background:0 0;border:0}

.header-top .search-widgets form input[type=text]{width:100%;min-width:inherit;color:#9b9b9b;background:#f6f6f6}

.header-top .search-widgets form input[type=text]:focus{background:#fff}

.header-top .search-widgets form button[type=submit]{top:50%;bottom:inherit;-webkit-transform:translateY(-50%);transform:translateY(-50%)}

.header-top #search_widget input{padding-right:1rem}

.top-menu[data-depth="1"]{margin:.625rem}

.top-menu[data-depth="0"]{margin-bottom:0}

.top-menu a:not([data-depth="0"]){display:block;padding:.625rem;font-weight:400;color:#707070}

.top-menu a.dropdown-submenu{font-weight:600;color:#232323;text-transform:uppercase}

.top-menu a[data-depth="0"]{padding:.625rem;font-size:1rem;font-weight:600}

.top-menu a[data-depth="1"],.top-menu a[data-depth="2"]{padding:0 .625rem .625rem 0}

.top-menu .collapse{display:inherit}

.top-menu .sub-menu{z-index:18;width:calc(100% - 30px);min-width:calc(100% - 30px);margin-left:.9375rem;border:0;-webkit-box-shadow:2px 1px 11px 2px rgba(0,0,0,.1);box-shadow:2px 1px 11px 2px rgba(0,0,0,.1);-webkit-transition:opacity .5s ease,visibility .5s ease;transition:opacity .5s ease,visibility .5s ease}

.top-menu .sub-menu,.top-menu .sub-menu.collapse{visibility:hidden;opacity:0}

#_desktop_top_menu .top-menu[data-depth="0"] li:hover .sub-menu,.top-menu .sub-menu.collapse.in{visibility:visible;opacity:1}

.top-menu .sub-menu ul[data-depth="1"]>li{float:left;margin:0 1.25rem}

.top-menu .popover{max-width:inherit;border-radius:0}

.popover.bs-tether-element-attached-top,body#checkout #checkout section.checkout-step .checkbox-field+.checkbox-field div{margin-top:0}

#mobile_top_menu_wrapper{padding:15px;background:#fff}

#mobile_top_menu_wrapper #top-menu,#order-details ul li{margin-bottom:.625rem}

#mobile_top_menu_wrapper .top-menu .navbar-toggler{display:inline-block;padding:0}

#mobile_top_menu_wrapper .top-menu a[data-depth="0"]{padding:.625rem;border-bottom:1px solid #f6f6f6}

#mobile_top_menu_wrapper .top-menu .collapse,#mobile_top_menu_wrapper .top-menu .sub-menu.collapse{display:none}

#mobile_top_menu_wrapper .top-menu .sub-menu{position:static;z-index:inherit;display:block;width:100%;min-width:100%;margin-left:0;overflow:hidden;background:#fff;-webkit-box-shadow:none;box-shadow:none}

#mobile_top_menu_wrapper .top-menu .sub-menu ul[data-depth="0"]>li{border-bottom:1px solid #707070}

#mobile_top_menu_wrapper .top-menu .sub-menu ul[data-depth="1"]>li{float:none;margin:0}

#mobile_top_menu_wrapper .top-menu .sub-menu ul,body#checkout section.checkout-step #customer-form .radio-inline,body#checkout section.checkout-step #delivery-address .radio-inline,body#checkout section.checkout-step #invoice-address .radio-inline,body#checkout section.checkout-step #login-form .radio-inline{padding:0}

#mobile_top_menu_wrapper .top-menu .sub-menu li>a{padding:.625rem;font-weight:600;border-bottom:1px solid #fff}

#mobile_top_menu_wrapper .top-menu .sub-menu ul[data-depth="2"] li a{padding-left:1.25rem}

#mobile_top_menu_wrapper .top-menu .sub-menu ul[data-depth="3"] li a{padding-left:2.5rem}

#mobile_top_menu_wrapper .top-menu .sub-menu ul[data-depth="4"] li a{padding-left:3.75rem}

#mobile_top_menu_wrapper .js-top-menu-bottom #contact-link,#mobile_top_menu_wrapper .js-top-menu-bottom .currency-selector,#mobile_top_menu_wrapper .js-top-menu-bottom .language-selector-wrapper{padding:.625rem}

#mobile_top_menu_wrapper .js-top-menu-bottom .language-selector-wrapper .language-selector,.active_filters ul,.pagination .page-list li,body#checkout section.checkout-step .radio-field label{display:inline}

#mobile_top_menu_wrapper .js-top-menu-bottom .user-info{padding:0 .625rem}

#mobile_top_menu_wrapper .js-top-menu-bottom .user-info a{display:block;width:100%;padding:.625rem 0}

body#checkout #header .header-nav{width: 100%; display: flex; justify-content: center; align-items: center; max-height:none; padding:.9375rem 0; margin-bottom:0; border:0}

body#checkout #header .header-nav .logo{width:auto;max-height:4.375rem}

body#checkout .cart-grid-right .card{border:0;-webkit-box-shadow:none;box-shadow:none}

body#checkout .cart-grid-right .card .cart-total{background-color:inherit}

body#checkout .cart-grid-right .card .cart-summary-subtotals-container{padding:1rem 0;border-top:1px solid #ddd;border-bottom:1px solid #ddd}

body#checkout .cart-grid-right .card .cart-summary-subtotals-container .cart-summary-line{margin-bottom:0}

body#checkout .cart-grid-right .card .cart-summary-subtotals-container .cart-summary-line .label{font-size:1rem;font-weight:400}

body#checkout .cart-grid-right .card .cart-summary-subtotals-container .cart-summary-line .value{font-size:1rem;font-weight:600}

body#checkout .cart-grid-right .card .cart-summary-subtotals-container .cart-summary-line:not(:last-child){margin-bottom:.825rem}

body#checkout .custom-checkbox>label{padding-left:1.5rem}

body#checkout .custom-checkbox span{position:absolute;top:.025rem;left:0;-webkit-box-flex:0;-ms-flex:0 0 15px;flex:0 0 15px;margin-top:.1rem}

body#checkout a:hover{color:#1a8196}

body#checkout section#content{margin-bottom:1.563rem}

body#checkout .container{min-height:100%}

body#checkout section.checkout-step{padding:.625rem;background-color:#fff}

#block-reassurance li:last-child,body#checkout section.checkout-step:last-child{border:0}

body#checkout section.checkout-step .step-title{padding-bottom:1.25rem;margin-bottom:0;font-size:1.5rem;font-weight:500;text-transform:uppercase;cursor:pointer;border-bottom:1px solid #ddd}

body#checkout section.checkout-step.-current+.checkout-step .step-title{padding-top:1.25rem;border-top:1px solid #ddd}

body#checkout section.checkout-step.-complete:first-of-type .step-title{padding-top:.625rem}

body#checkout section.checkout-step .content{padding:0 2.313rem;padding-top:1rem}

body#checkout section.checkout-step .step-edit{font-weight:500;text-transform:lowercase}

body#checkout section.checkout-step .not-allowed,body#checkout section.checkout-step.-unreachable .step-title{cursor:not-allowed;opacity:.5}

body#checkout section.checkout-step .content,body#checkout section.checkout-step .done,body#checkout section.checkout-step .step-edit,body#checkout section.checkout-step.-current.-reachable.-complete .done,body#checkout section.checkout-step.-current.-reachable.-complete .step-edit,body#checkout section.checkout-step.-reachable.-complete h1 .step-number{display:none}

body#checkout section.checkout-step.-current .step-title{cursor:default}

body#checkout section.checkout-step.-current.-reachable.-complete .step-number,body#checkout section.checkout-step.-reachable.-current .step-number{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}

.js-payment-binary.disabled .accept-cgv,body#checkout section.checkout-step.-current .content,body#checkout section.checkout-step.-current.-reachable.-complete .content{display:block}

body#checkout section.checkout-step.-reachable.-current .step-number{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:33px;height:33px;margin-right:.65rem;font-size:1rem;color:#fff;vertical-align:middle;background-color:#00c062;border:0;border-radius:50%}

body#checkout section.checkout-step.-reachable.-complete h1 .step-edit{display:block;float:right;margin-right:.125rem;color:#707070;cursor:pointer}

.js-payment-binary,.js-payment-binary .accept-cgv,body#checkout section.checkout-step.-reachable.-complete .content{display:none}

body#checkout section.checkout-step .default-input{min-width:40%}

body#checkout section.checkout-step .default-input[name=address1],body#checkout section.checkout-step .default-input[name=address2]{min-width:60%}

body#checkout section.checkout-step .radio-field{margin-top:1.875rem}

body#checkout section.checkout-step .checkbox-field div{margin-top:3.75rem}

body#checkout section.checkout-step .select-field div{padding:.625rem 3.125rem;background:#f6f6f6}

.block-promo .promo-code form,.page-order table thead th,.page-order-detail #order-products.return td.qty .select select,body#checkout #order-summary-content .summary-selected-carrier .logo-container,body#checkout section.checkout-step .form-footer{text-align:center}

body#checkout section.checkout-step #conditions-to-approve{padding-top:1rem}

body#checkout section.checkout-step .payment-options label{display:table-cell}

body#checkout section.checkout-step .payment-options .custom-radio{margin-right:.5rem}

.page-order-detail .messages .message>div,body#checkout section.checkout-step .payment-options .payment-option{margin-bottom:.5rem}

body#checkout section.checkout-step .step-number{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:33px;height:33px;margin-right:1rem;margin-left:.5rem;font-size:1rem;vertical-align:middle;border:1px solid #232323;border-radius:50%}

body#checkout section.checkout-step .address-selector{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}

body#checkout section.checkout-step .address-item{-webkit-box-flex:0;-ms-flex:0 0 49%;flex:0 0 49%;margin-bottom:.625rem;background:#f6f6f6;border:3px solid transparent}

body#checkout section.checkout-step .address-item>header{min-height:11.7rem}

body#checkout section.checkout-step .address-item.selected{background:#fff;border:#376467 3px solid}

body#checkout section.checkout-step .address-alias{display:inline-block;margin-bottom:.625rem;font-weight:600}

body#checkout section.checkout-step .address{margin-left:1.563rem;font-weight:500}

body#checkout section.checkout-step .radio-block{padding:.9375rem;text-align:left;cursor:pointer}

body#checkout section.checkout-step .custom-radio input[type=radio]{width:1.25rem;height:1.25rem}

body#checkout section.checkout-step .delete-address,body#checkout section.checkout-step .edit-address{display:inline-block;margin:0 .3125rem;color:#707070}

body#checkout section.checkout-step .delete-address .delete,body#checkout section.checkout-step .delete-address .edit,body#checkout section.checkout-step .edit-address .delete,body#checkout section.checkout-step .edit-address .edit{font-size:1rem}

body#checkout section.checkout-step .address-footer{padding:.625rem;text-align:center}

body#checkout section.checkout-step #delivery-addresses,body#checkout section.checkout-step #invoice-addresses,body#checkout section.checkout-step .add-address{margin-top:1.25rem}

body#checkout section.checkout-step .delivery-options>.row{border-right:.1rem solid #c3c3c3}

body#checkout section.checkout-step .delivery-options .delivery-option{min-height:80px;padding:.9375rem 0;margin-bottom:.9375rem;background:#f6f6f6}

body#checkout section.checkout-step .delivery-options .delivery-option,body#checkout section.checkout-step .delivery-options .delivery-option .carrier,body#checkout section.checkout-step .delivery-options .delivery-option label>.row{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}

body#checkout section.checkout-step .delivery-options .delivery-option label{margin-bottom:0;text-align:inherit}

body#checkout section.checkout-step .delivery-options .delivery-option label .carrier{margin-left:0}

body#checkout section.checkout-step .delivery-options .delivery-option label .carrier:not(.carrier-hasLogo)>.col-xs-12{padding-left:calc(33.33333% + 15px)}

body#checkout #order-summary-content .summary-selected-carrier .logo-container img,body#checkout section.checkout-step .delivery-options .delivery-option img{width:3.125rem}

body#checkout section.checkout-step .carrier-delay,body#checkout section.checkout-step .carrier-name{display:inline-block;margin-bottom:0;text-align:left;word-break:break-word}

body#checkout section.checkout-step #customer-form,body#checkout section.checkout-step #delivery-address,body#checkout section.checkout-step #invoice-address,body#checkout section.checkout-step #login-form{margin-top:1.563rem;margin-left:.3125rem}

body#checkout #cart-summary-product-list,body#checkout section.checkout-step .sign-in{font-size:.875rem}

body#checkout section.checkout-step .forgot-password{margin-left:14.38rem}

body#checkout .additional-information{margin-top:1.25rem;margin-left:2.875rem;font-size:.875rem}

body#checkout .condition-label{padding-left:1.625rem;margin-top:.625rem}

body#checkout .condition-label label{text-align:inherit}

body#checkout .cancel-address{display:block;margin:.625rem;color:#707070;text-decoration:underline}

body#checkout .modal-content{padding:1.25rem;background-color:#f6f6f6}

body#checkout #cart-summary-product-list img{width:3.125rem;border:#f6f6f6 1px solid}

.table-labeled td,.table-labeled th,body#checkout #cart-summary-product-list .media-body{vertical-align:middle}

body#checkout #order-summary-content{padding-top:.9375rem}

body#checkout #order-summary-content h4.h4{margin-top:.625rem;margin-bottom:1.25rem;color:#232323}

body#checkout #order-summary-content h4.black{color:#000}

body#checkout #order-summary-content h4.addresshead{margin-top:.1875rem}

body#checkout #order-summary-content .noshadow{-webkit-box-shadow:none;box-shadow:none}

body#checkout #order-summary-content #order-items{border-right:0}

body#checkout #order-summary-content #order-items h3.h3{margin-top:1.25rem;color:#232323}

body#checkout #order-summary-content #order-items table tr:first-child td{border-top:0}

body#checkout #order-summary-content .order-confirmation-table{padding:1rem;margin-bottom:2rem;background-color:#fff;border:3px solid #e5e5e5;border-radius:0}

body#checkout #order-summary-content .summary-selected-carrier{padding:1rem;margin-bottom:.75rem;background-color:#fff;border:1px solid #e5e5e5;border-radius:0}

body#checkout #order-summary-content .step-edit{display:inline;color:#707070}

body#checkout #order-summary-content .step-edit:hover{cursor:pointer}

#history .orders .order a h3,body#checkout #order-summary-content a .step-edit{color:#707070}

body#checkout #delivery,body#checkout #gift_message{max-width:100%;border-color:#232323}

body#checkout #delivery textarea,body#checkout #gift_message textarea{max-width:100%;margin-bottom:10px}

body#checkout #footer{padding:.9375rem;color:#707070;background:#fff}

body#checkout #hook-display-after-carrier{margin-top:20px}

body#checkout #hook-display-after-carrier>[class^=col]{display:inline-block;float:inherit}

body#checkout #hook-display-after-carrier>[class^=col].links .row>[class^=col]{width:auto}

#order-details{padding-left:1.3rem;margin-top:1.25rem}

#order-details>.card-title{margin-bottom:1.875rem}

#order-details ul{margin-bottom:1.25rem}

#order-items{border-right:#f6f6f6 1px solid}

#order-items .h3,.page-addresses .address .address-footer a i,.page-addresses .addresses-footer a i,.page-footer .account-link i{font-size:1rem}

#order-items hr{border-top-color:#232323}

#order-items table tr{height:1.875rem}

#order-items table tr td{padding:.5rem;font-size:.875rem}

#order-items table tr td:last-child{text-align:right}

#order-items table tr.taxes td{text-align:left}

#order-items table tr.taxes td .value{padding-top:0}

#order-items .order-line{margin-top:1rem}

#order-items .image img{width:100%;margin-bottom:1rem;border:1px solid gray-lighter}

#order-items .details,#order-items .qty{margin-bottom:1rem}

#order-items .details .customizations{margin-top:.625rem}

#order-confirmation #registration-form{width:50%;margin:0 auto 1rem}

.js-payment-binary.disabled{cursor:not-allowed;opacity:.6}

.js-payment-binary.disabled::before{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;content:""}

.table-labeled .label{padding:.25rem .375rem;margin:.125rem;font-size:inherit;font-weight:400;color:#fff;white-space:nowrap;border-radius:3px}

.page-order .table{margin-bottom:0}

.page-order table td,.page-order table th{padding:.5rem}

#authentication .tooltip.tooltip-bottom{padding:0;margin:0}

#authentication .custom-checkbox{display:-webkit-box;display:-ms-flexbox;display:flex}

#authentication .custom-checkbox span{-webkit-box-flex:0;-ms-flex:0 0 .9375rem;flex:0 0 .9375rem}

#authentication .custom-checkbox label{padding-left:.625rem}

#authentication .radio-inline,#identity .radio-inline{padding:0}

#authentication .radio-inline .custom-radio,#identity .radio-inline .custom-radio{margin-right:0}

.page-customer-account #content{padding:1rem;background:#fff;font-size:.875rem;color:#707070}

.page-customer-account #content .order-actions a{padding:0 .125rem}

.page-customer-account #content .forgot-password{padding-bottom:.9375rem;margin-top:1rem;font-size:.875rem;text-align:center}

.page-customer-account #content .no-account{font-size:1rem;text-align:center}

.page-authentication #content,.page-registration #content{padding:1rem;background:#fff;max-width:640px;margin:0 auto}

.page-addresses .address{margin-bottom:1.875rem;font-size:.875rem;color:#232323;background:#fff}

.page-addresses .address .address-body{padding:1rem}

.page-addresses .address .address-body h4,.page-order-detail .addresses h4,.page-order-detail h3{font-size:1rem;font-weight:700}

.page-addresses .address .address-body address{min-height:9rem}

.page-addresses .address .address-footer{padding:.5rem 1rem;border-top:1px solid #707070}

.page-addresses .address .address-footer a{margin-right:.5rem;color:#707070}

.page-addresses .address .address-footer a span{font-size:.9375rem;vertical-align:middle}

.page-addresses .addresses-footer{margin:0 .9375rem}

#order-return-infos .thead-default th,.page-addresses .addresses-footer a,.page-addresses .addresses-footer a:hover,.page-my-account #content .links a:hover{color:#232323}

.page-addresses .addresses-footer a span{margin-top:.625rem;font-size:1rem;vertical-align:middle}

.page-order-detail #content{font-size:.875rem}

.page-order-detail .box{padding:1rem;background:#fff;margin-bottom:1rem}

.page-order-detail h3{margin-bottom:1rem;color:#232323;text-transform:uppercase}

.page-order-detail #order-history .history-lines .history-line{padding:.5rem 0;border-bottom:1px solid #f6f6f6}

.page-order-detail #order-history .history-lines .history-line:last-child{border-bottom:0}

#history .orders .order .label,.page-order-detail #order-history .history-lines .history-line .label{display:inline-block;padding:.25rem .375rem;margin:.25rem 0;color:#fff;border-radius:3px}

.page-order-detail .addresses{margin:0 -.9375rem}

.page-order-detail #order-products.return{margin-bottom:1rem}

.page-order-detail #order-products.return th.head-checkbox{width:30px}

.page-order-detail #order-products.return td{padding:1.375rem .75rem}

.page-order-detail #order-products.return td.qty{min-width:125px}

.page-order-detail #order-products.return td.qty .current{float:left;width:30%;padding-right:.5rem;text-align:right}

.page-order-detail #order-products.return td.qty .select{float:left;width:70%;padding-left:.25rem;margin:-.625rem 0}

.page-order-detail .order-items{padding:0!important}

.page-order-detail .order-items .order-item{padding:1rem 1rem 0;border-bottom:1px solid #f6f6f6}

.page-order-detail .order-items .order-item .checkbox{float:left;width:30px;padding:0 .9375rem}

.page-order-detail .order-items .order-item .content{float:left;width:calc(100% - 30px);padding:0 .9375rem}

.page-order-detail .order-items .order-item .desc,.page-order-detail .order-items .order-item .qty{margin-bottom:1rem}

#blockcart-modal .cart-content .page-content.page-cms ul .label,#blockcart-modal .cart-content .page-content.page-cms ul .value,#blockcart-modal .cart-content p .label,#blockcart-modal .cart-content p .value,.page-content.page-cms #blockcart-modal .cart-content ul .label,.page-content.page-cms #blockcart-modal .cart-content ul .value,.page-order-detail .order-items .order-item .desc .name{font-weight:600}

.page-order-detail .order-items .order-item .qty .q,.page-order-detail .order-items .order-item .qty .s{margin-bottom:.25rem}

.page-order-detail .messages .message{margin-top:.5rem;border-bottom:1px solid #f6f6f6}

#history .orders .order:last-child,.page-order-detail .messages .message:last-child{border-bottom:0}

#order-return-infos .customization,.page-order-detail .customization{margin-top:.75rem}

.page-my-account #content .links{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}

.page-my-account #content .links a{display:inline-block;padding:0 .9375rem;margin-bottom:1.875rem;font-size:1rem;font-weight:700;color:#707070;text-align:center;text-transform:uppercase}

.page-my-account #content .links a span.link-item{display:block;height:100%;padding:1rem;background:#fff}

.page-my-account #content .links a i{display:block;width:100%;padding-bottom:3.4rem;font-size:2.6rem;color:#232323}

#history .orders{margin:0 -1rem}

#history .orders .order{padding:.75rem 1rem;border-bottom:1px solid #f6f6f6}

.page-footer .account-link{margin-right:1rem}

.page-footer .account-link span{font-size:.875rem;vertical-align:middle}

.login-form{margin-top:15px}

.forgotten-password{padding:4px}

.forgotten-password .form-fields .center-email-fields{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}

.forgotten-password .form-fields .center-email-fields button,.forgotten-password .form-fields .email input{height:38px}

.forgotten-password .form-fields .email{width:430px;padding-right:0;padding-left:0}

.forgotten-password .form-fields label.required{width:130px}

.send-renew-password-link{padding-right:10px;padding-left:10px}

.renew-password{margin-left:10px}

.renew-password .email{padding-bottom:30px}

.renew-password [type=submit]{margin-left:50px}

.carousel{margin-bottom:1.5rem}

.carousel .direction{z-index:auto}

.carousel .carousel-inner{height:340px}

.carousel .carousel-item{height:100%}

.carousel .carousel-item img{width:100%;max-width:100%;height:auto}

.carousel .carousel-item .caption{position:absolute;bottom:28px;left:90px;max-width:340px;color:#fff}

.carousel .carousel-item .caption .caption-description .page-content.page-cms ul,.carousel .carousel-item .caption .caption-description p,.page-content.page-cms .carousel .carousel-item .caption .caption-description ul{font-size:1rem;color:#fff}

.carousel .carousel-item .caption .caption-description h3{font-size:1.25rem;font-weight:600}

.carousel .carousel-item .caption .display-1{font-size:3rem;font-weight:700}

.carousel .carousel-item figure{display:inline-block;margin:0}

.carousel .carousel-control{opacity:1}

.lang-rtl #products .all-product-link .material-icons,.lang-rtl .carousel .carousel-control .icon-next .material-icons,.lang-rtl .carousel .carousel-control .icon-prev .material-icons,.lang-rtl .featured-products .all-product-link .material-icons,.lang-rtl .product-accessories .all-product-link .material-icons{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}

.carousel .carousel-control .icon-next::before,.carousel .carousel-control .icon-prev::before{content:""}

.carousel .carousel-control .icon-next i,.carousel .carousel-control .icon-prev i{font-size:3.125rem;color:#fff}

.carousel .carousel-control .icon-prev{left:1rem}

.carousel .carousel-control .icon-next{right:2rem}

.carousel .carousel-control.left,.carousel .carousel-control.right{background:0 0}

.carousel-indicators .active{background-color:#707070}

#products .products,.featured-products .products,.product-accessories .products{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}

#products .products-section-title,.featured-products .products-section-title,.product-accessories .products-section-title{margin:2.5rem 0;font-weight:500;text-align:center}

#products .all-product-link,.featured-products .all-product-link,.product-accessories .all-product-link{margin-top:1.5rem;margin-bottom:1.5rem;clear:both;font-weight:500;color:#707070}

.product-miniature,.product-miniature .product{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}

.product-miniature .product{padding:0;margin:0 .8125rem}

.page-index .product-miniature .product,.page-search .product-miniature .product{width:25%;min-width:250px}

.product-miniature .product-thumbnail{display:block}

.product-miniature .product-title a{font-size:.875rem;font-weight:400;color:#707070;text-align:center;text-decoration:none}

.product-miniature .thumbnail-container{position:relative;height:auto;margin-bottom:1.563rem;overflow:hidden;background:#fff}

.product-miniature .thumbnail-container:focus .highlighted-informations,.product-miniature .thumbnail-container:hover .highlighted-informations{top:calc(100% - 4.4rem)}

.product-miniature .thumbnail-container:focus .highlighted-informations::after,.product-miniature .thumbnail-container:hover .highlighted-informations::after{opacity:1}

.product-miniature .thumbnail-container:focus .highlighted-informations.no-variants,.product-miniature .thumbnail-container:hover .highlighted-informations.no-variants{top:calc(100% - 2.5rem)}

.product-miniature .thumbnail-container:focus .product-description::after,.product-miniature .thumbnail-container:hover .product-description::after{position:absolute;top:0;left:10%;width:80%;content:"";border-top:#707070 1px solid;opacity:.25}

.product-miniature .thumbnail-container .product-thumbnail{position:relative;height:calc(100% - 70px)}

.product-miniature .thumbnail-container .product-thumbnail img{position:relative;display:block;max-width:100%;height:auto;margin:auto}

.product-miniature .product-title{margin-top:.7rem;text-align:center;text-transform:capitalize}

.product-miniature .product-price-and-shipping{font-weight:700;color:#232323;text-align:center}

.product-miniature .product-price-and-shipping .discount-product{display:none}

.product-miniature .variant-links{position:relative;top:-.25em;width:100%;min-height:2.5rem;padding-top:.1875rem;text-align:center;background:#fff}

.product-miniature .thumbnail-top{position:relative;overflow:hidden}

.product-miniature .highlighted-informations{position:absolute;top:100%;z-index:2;width:100%;height:auto;padding:.825rem 0;text-align:center;background:#fff;-webkit-transition:.3s;transition:.5s}

.product-miniature .highlighted-informations .quick-view{font-size:1rem;color:#707070}

.product-miniature .highlighted-informations .quick-view:hover{color:#376467}

.product-miniature .product-description{position:relative;bottom:0;height:auto;padding:.25rem .25rem .7rem;background:#fff}

.product-miniature .product-flags li.product-flag{min-width:3.125rem;min-height:1.875rem;font-weight:600}

.product-miniature .product-flags li.product-flag.online-only{top:13.1rem}

.product-miniature .comments_note{color:#707070;text-align:center}

.product-miniature .regular-price{display:inline-block;font-size:.875rem;color:#707070;text-decoration:line-through}

.product-miniature .count{position:relative;bottom:.5rem;font-weight:700;color:#707070}

#custom-text{padding:3.125rem;margin-bottom:1.5rem;text-align:center;background:#fff;border-radius:2px}

#custom-text h2{font-size:1.5rem;font-weight:500;color:#232323;text-transform:uppercase}

#custom-text .page-content.page-cms ul,#custom-text p,.page-content.page-cms #custom-text ul{font-size:.875rem;font-weight:400;color:#232323}

#custom-text .page-content.page-cms ul .dark,#custom-text p .dark,.page-content.page-cms #custom-text ul .dark{font-size:1.125rem;font-weight:600;color:#232323}

#custom-text img{max-width:100%;height:100%}

.page-content.page-cms{padding:1.25rem;text-align:justify;background:#fff}

.page-content.page-cms .cms-box img{max-width:100%}

.page-content.page-cms ul{list-style:disc inside none}

#products{color:#707070}

#products .products-select{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}

#products .up{margin-bottom:1rem}

#products .up .btn-secondary,#products .up .btn-tertiary{color:#707070;text-transform:inherit}

#products .up .btn-secondary .material-icons,#products .up .btn-tertiary .material-icons{margin-right:0}

.block-category{min-height:0rem;margin-bottom:0rem}

.block-category h1{margin-bottom:1rem;font-size:2rem}

.block-category .block-category-inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}

.block-category .block-category-inner #category-description .page-content.page-cms ul,.block-category .block-category-inner #category-description p,.page-content.page-cms .block-category .block-category-inner #category-description ul{font-weight:400;margin-bottom:0;color:#232323;word-break:break-word}

.block-category .block-category-inner #category-description strong{font-weight:400;color:#707070}

.block-category .block-category-inner #category-description .page-content.page-cms ul:first-child,.block-category .block-category-inner #category-description p:first-child,.page-content.page-cms .block-category .block-category-inner #category-description ul:first-child{margin-bottom:1.25rem}

.block-category .block-category-inner .category-cover img{width:141px;height:180px}

.products-selection .sort-by-row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}

.products-selection .sort-by{margin-right:-.9375rem;margin-left:.9375rem;text-align:right;word-break:break-word;white-space:normal}

.products-selection .total-products,.products-selection h1{padding-top:.625rem}

.page-content.page-cms .products-selection ul,.page-content.page-cms .products-selection ul .select-title,.page-content.page-cms .products-selection ul .sort-by,.products-selection .page-content.page-cms ul,.products-selection .page-content.page-cms ul .select-title,.products-selection .page-content.page-cms ul .sort-by,.products-selection .sort-by-row,.products-selection .sort-by-row .select-title,.products-selection .sort-by-row .sort-by,.products-selection p,.products-selection p .select-title,.products-selection p .sort-by{font-size:.875rem}

.page-content.page-cms .products-selection ul .select-title i,.page-content.page-cms .products-selection ul .sort-by i,.page-content.page-cms .products-selection ul i,.products-selection .page-content.page-cms ul .select-title i,.products-selection .page-content.page-cms ul .sort-by i,.products-selection .page-content.page-cms ul i,.products-selection .sort-by-row .select-title i,.products-selection .sort-by-row .sort-by i,.products-selection .sort-by-row i,.products-selection p .select-title i,.products-selection p .sort-by i,.products-selection p i{height:inherit;line-height:inherit}

.products-selection .filter-button .btn-secondary,.products-selection .filter-button .btn-tertiary{padding:.75rem .5rem .6875rem}

.brands-sort,.products-sort-order,.suppliers-sort{color:#707070}

.brands-sort .select-title,.products-sort-order .select-title,.suppliers-sort .select-title{display:inline-block;width:100%;padding:.625rem;color:#232323;cursor:pointer;background:#fff;border:1px solid rgba(0,0,0,.25)}

.brands-sort .select-list,.products-sort-order .select-list,.suppliers-sort .select-list{display:block;padding:.625rem 1.25rem;color:#232323}

.brands-sort .select-list:hover,.products-sort-order .select-list:hover,.suppliers-sort .select-list:hover{color:#fff;text-decoration:none;background:#376467}

.brands-sort .dropdown-menu,.products-sort-order .dropdown-menu,.suppliers-sort .dropdown-menu{left:auto;width:16.88rem;margin:0;background:#f6f6f6;border:0;border-radius:0;-webkit-box-shadow:2px 2px 4px 0 rgba(0,0,0,.1);box-shadow:2px 2px 4px 0 rgba(0,0,0,.1)}

.facet-dropdown{-webkit-box-sizing:border-box;box-sizing:border-box;padding-right:0;padding-left:0;color:#707070;background:#f6f6f6;border:3px solid transparent;-webkit-box-shadow:1px 1px 1px 1px #f6f6f6;box-shadow:1px 1px 1px 1px #f6f6f6}

.facet-dropdown.open{border:0}

.facet-dropdown.open>.select-title{background:#f6f6f6;border:3px solid #376467}

.facet-dropdown .select-title{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;padding:.625rem .625rem .625rem 1.25rem;margin-left:0;color:#232323;cursor:pointer;background:#f6f6f6}

.facet-dropdown .select-title>i{margin-left:auto}

.facet-dropdown .select-list{display:block;padding:.625rem 1.25rem;color:#232323;background:#f6f6f6}

.facet-dropdown .select-list:hover{color:#fff;text-decoration:none;background:#376467}

.facet-dropdown .dropdown-menu{left:auto;width:100%;padding:0;margin-top:3px;background:#f6f6f6;border:0;-webkit-box-shadow:1px 1px 1px 1px #f6f6f6;box-shadow:1px 1px 1px 1px #f6f6f6}

#search_filters,#search_filters_brands,#search_filters_suppliers{padding:1.563rem 1.25rem;margin-bottom:1.563rem;background:#fff}

#search_filters>.h6,#search_filters_brands>.h6,#search_filters_suppliers>.h6{font-size:1.5rem;font-weight:500}

#search_filters .facet,#search_filters_brands .facet,#search_filters_suppliers .facet{padding-top:.625rem}

#search_filters .facet .collapse,#search_filters_brands .facet .collapse,#search_filters_suppliers .facet .collapse{display:block}

#search_filters .facet .facet-title,#search_filters_brands .facet .facet-title,#search_filters_suppliers .facet .facet-title{font-size:1rem;color:#232323}

#product-modal .modal-content .modal-body .image-caption .page-content.page-cms ul,#product-modal .modal-content .modal-body .image-caption p,#search_filters .facet .facet-label,#search_filters_brands .facet .facet-label,#search_filters_suppliers .facet .facet-label,.page-content.page-cms #product-modal .modal-content .modal-body .image-caption ul,.social-sharing ul{margin-bottom:0}

#search_filters .facet .facet-label a,#search_filters_brands .facet .facet-label a,#search_filters_suppliers .facet .facet-label a{display:inline-block;margin-top:.4375rem;font-size:.9375rem;color:#232323}

#search_filters_brands .facet,#search_filters_suppliers .facet{padding-top:0}

#search_filters_brands .facet .facet-label,#search_filters_suppliers .facet .facet-label{margin-bottom:.3125rem}

.pagination{width:100%;font-size:.875rem}

.pagination>div:first-child{padding-left:0;line-height:2.5rem}

.pagination .page-list{padding:.375rem;margin-bottom:0;background:#fff}

.pagination a{font-weight:600;color:#000}

.pagination a:not(.previous):not(.next){letter-spacing:.125rem}

.pagination .previous{float:left}

.pagination .next{float:right}

.pagination .disabled{color:#707070}

.pagination .current a{font-size:1.25rem;color:#376467;text-decoration:none}

.active_filters{padding:.625rem 1.875rem 0;margin-bottom:1.25rem;background:#dededd}

.active_filters .active-filter-title{display:inline;margin-right:.625rem;font-weight:600}

.active_filters .filter-block{display:inline-block;padding:.625rem;margin-right:.625rem;margin-bottom:.625rem;font-size:.8125rem;color:#232323;background:#fff}

.active_filters .filter-block .close{margin-top:.1875rem;margin-left:.3125rem;font-size:.9375rem;color:#232323;opacity:1}

.block-categories{padding:1.563rem 1.25rem;margin-bottom:1.563rem;background:#fff}

.block-categories .h6{font-size:1.5rem;font-weight:500}

.block-categories .category-sub-menu{margin-top:1rem}

.block-categories .category-sub-menu .category-sub-link{font-size:.875rem}

.block-categories .category-sub-menu li{position:relative}

.block-categories .category-sub-menu li[data-depth="1"],.product-prices div{margin-bottom:.625rem}

.block-categories .category-sub-menu li[data-depth="0"]>a{display:inline-block;width:100%;padding-bottom:.1875rem;margin:.3125rem 0 0;font-weight:600}

.block-categories .category-sub-menu li:not([data-depth="0"]):not([data-depth="1"]){padding-left:.3125rem}

.block-categories .category-sub-menu li:not([data-depth="0"]):not([data-depth="1"])::before{margin-right:.3125rem;content:"-"}

.block-categories a,.facets-title{color:#232323}

.block-categories .collapse-icons{position:absolute;top:0;right:0;padding:0;cursor:pointer}

.block-categories .collapse-icons .remove,.block-categories .collapse-icons[aria-expanded=true] .add{display:none}

.block-categories .collapse-icons[aria-expanded=true] .remove{display:block}

#subcategories ul li .subcategory-name:hover,.block-categories .arrows .arrow-down:hover,.block-categories .arrows .arrow-right:hover,.block-categories .collapse-icons .add:hover,.block-categories .collapse-icons .remove:hover,.cart-grid-body a.label:hover{color:#376467}

.block-categories .arrows .arrow-down,.block-categories .arrows .arrow-right{margin-left:2px;font-size:.875rem;cursor:pointer}

.block-categories .arrows .arrow-down,.block-categories .arrows[aria-expanded=true] .arrow-right{display:none}

#manufacturer #main ul .brand-infos a,.block-categories .arrows[aria-expanded=true] .arrow-down{display:inline-block}

.advertising-block{margin-bottom:1.563rem}

#subcategories{margin-bottom:20px;border-top:1px solid #f6f6f6}

#subcategories .subcategory-heading{margin-bottom:20px;font-weight:500}

#subcategories ul{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 -10px}

#subcategories ul li{width:calc(100%/4 - 20px);min-width:200px;margin:10px;text-align:center}

#subcategories ul li .subcategory-image{padding:0 0 8px}

#subcategories ul li .subcategory-image a{display:block;padding:9px;border:1px solid #f6f6f6}

#subcategories ul li .subcategory-image a img{max-width:100%;vertical-align:top}

#subcategories ul li .subcategory-name{text-transform:uppercase}

#subcategories ul li .cat_desc{display:none}

#subcategories ul li:hover .subcategory-image a{padding:5px;border:5px solid #376467}

#product #content{position:relative;max-width:452px;margin:0 auto}

.product-price{display:inline-block;max-width:100%;color:#376467}

#blockcart-modal,#product-description-short{color:#232323}

#product-description-short ol,#product-description-short ul{padding-left:0;list-style-position:inside}

#product-description-short ol li,#product-description-short ul li,.product-information .product-description ol li,.product-information .product-description ul li{font-size:.9375rem;color:#707070}

.product-information{font-size:.9375rem;color:#232323}

.product-information .manufacturer-logo{max-height:4rem;margin-bottom:1rem;border:2px solid #f6f6f6}

.product-information .product-description img{max-width:100%;height:auto}

.product-information .product-description ol,.product-information .product-description ul{padding-left:.75rem;list-style-position:inside}

#product-description-short ul,.product-information .product-description ul{list-style-type:disc}

.input-color{position:absolute;width:1.25rem;height:1.25rem;cursor:pointer;opacity:0}

.input-container{position:relative}

.input-radio{position:absolute;top:0;width:100%;height:100%;cursor:pointer;opacity:0}

.input-color:checked+span,.input-color:hover+span,.input-radio:checked+span,.input-radio:hover+span{border:2px solid #232323}

.radio-label{display:inline-block;padding:.125rem .625rem;font-weight:600;background:#fff;border:2px solid #fff}

.product-actions .control-label{display:block;width:100%;margin-bottom:.375rem}

.product-actions .add-to-cart{height:2.75rem;padding-top:.625rem;line-height:inherit}

.product-actions .add-to-cart .material-icons{line-height:inherit}

.product-actions .product-add-to-cart{word-wrap:break-word}

.block-social ul,.product-quantity{display:-webkit-box;display:-ms-flexbox;display:flex}

.product-quantity .add,.product-quantity .qty{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;float:left;margin-bottom:.5rem}

.product-quantity .qty{margin-right:.4rem}

.product-quantity #quantity_wanted{width:3rem;height:2.75rem;padding:.175rem .5rem;color:#232323;background-color:#fff}
.product-quantity .qty{min-width:10rem !important}

.product-quantity .input-group-btn-vertical{width:auto}

.product-quantity .input-group-btn-vertical .btn{padding:.5rem 1.1875rem}

.product-quantity .input-group-btn-vertical .btn i{top:.125rem;left:.6875rem;font-size:1rem}

.product-quantity .btn-touchspin{height:1.438rem}

.product-discounts{margin-bottom:1.5rem}

.product-discounts>.product-discounts-title{font-size:.875rem;font-weight:600}

.product-discounts>.table-product-discounts thead tr th{width:33%;padding:.625rem 1.25rem;text-align:center;background:#fff;border:.3125rem #f6f6f6 solid}

.product-discounts>.table-product-discounts tbody tr{background:#f6f6f6}

.product-discounts>.table-product-discounts tbody tr:nth-of-type(even){background:#fff}

.product-discounts>.table-product-discounts tbody tr td{padding:.625rem 1.25rem;text-align:center;border:.3125rem #f6f6f6 solid}

.product-prices{margin-top:1.25rem}

.product-prices .tax-shipping-delivery-label{font-size:.8125rem;color:#707070;word-wrap:break-word}

.product-prices .tax-shipping-delivery-label {padding:0 0 0 2px;font-weight:700}

.product-prices .tax-shipping-delivery-label {padding:0 2px 0 0;content:"-"}

.product-customization small,.product-discount{color:#707070}

.product-discount .regular-price{margin-right:.625rem;font-weight:500;text-decoration:line-through}

.has-discount .page-content.page-cms ul,.has-discount p,.has-discount.product-price,.page-content.page-cms .has-discount ul{color:#f39d72}

.has-discount .discount{display:inline-block;padding:.3125rem .625rem;margin-left:.625rem;font-size:1rem;font-weight:600;color:#fff;text-transform:uppercase;background:#f39d72}

.has-discount .product-unit-price,.product-unit-price{margin-bottom:0;overflow:hidden;font-size:.8125rem;color:#707070;text-overflow:ellipsis}

.tabs{padding:1.25rem 1.875rem;margin-top:2rem;background:#fff}

.tabs .tab-pane{padding-top:1.25rem}

.tabs .nav-tabs{border:0;border-bottom:#f6f6f6 2px solid}

.tabs .nav-tabs .nav-link{color:#707070;border:0 solid transparent}

.tabs .nav-tabs .nav-link.active{color:#376467}

.tabs .nav-tabs .nav-link.active,.tabs .nav-tabs .nav-link:hover{border:0;border-bottom:#376467 3px solid}

.tabs .nav-tabs .nav-item{float:left;margin-bottom:-.125rem}

.product-cover{position:relative;margin-bottom:1.25rem}

#product-modal .modal-content .modal-body .product-cover-modal,.product-cover img{background:#fff}

.product-cover .layer{position:absolute;top:0;left:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;text-align:center;cursor:pointer;background:#000;background:rgba(0,0,0,.6);opacity:0}

.product-cover .layer:hover{opacity:1}

.product-cover .layer .zoom-in{font-size:3.125rem;color:#fff}

#product-modal .modal-content{padding:0;background:0 0;border:0}

#product-modal .modal-content .modal-body{display:-webkit-box;display:-ms-flexbox;display:flex;margin-left:-35%}

#product-modal .modal-content .modal-body .image-caption{width:100%;padding:.625rem 1.25rem;background:#fff;border-top:#f6f6f6 1px solid}

#product-modal .modal-content .modal-body .thumbnails,.block_newsletter form{position:relative}

#product-modal .modal-content .modal-body .mask{position:relative;z-index:1;max-height:49.38rem;margin-top:2.188rem;overflow:hidden}

#product-modal .modal-content .modal-body .mask.nomargin{margin-top:0}

#product-modal .modal-content .modal-body .product-images img{width:9.25rem;cursor:pointer;background:#fff}

#product-modal .modal-content .modal-body .product-images img:hover{border:#376467 3px solid}

#product-modal .modal-content .modal-body .arrows{position:absolute;top:0;right:1.875rem;z-index:0;width:100%;height:100%;color:#fff;text-align:center;cursor:pointer}

#product-modal .modal-content .modal-body .arrows .arrow-up{position:absolute;top:-2rem;opacity:.2}

#product-modal .modal-content .modal-body .arrows .arrow-down{position:absolute;bottom:-2rem}

#product-modal .modal-content .modal-body .arrows i{display:inline;font-size:6.25rem}

#blockcart-modal .modal-header,#product #block-reassurance{background:#fff}

#blockcart-modal .modal-header .close{opacity:1}

#blockcart-modal .modal-header .close .material-icons{color:#363a42}

#blockcart-modal .modal-body{padding:3.125rem 1.875rem;background:#fff}

#blockcart-modal .modal-body .divide-right span{display:inline-block;margin-bottom:.3125rem}

#blockcart-modal .modal-dialog{width:100%;max-width:1140px}

#blockcart-modal .product-image{display:block;width:100%;max-width:9.375rem;margin:0 0 0 auto}

#blockcart-modal .modal-title{font-size:1rem;font-weight:400;color:#353943}

#blockcart-modal .modal-title i.material-icons{margin-right:1.875rem;color:#4cbb6c}

#blockcart-modal .product-name{font-size:1.125rem;color:#376467}

#blockcart-modal .product-price{display:block;color:#363a42}

#blockcart-modal .cart-content .btn,#stores .page-stores .store-item-footer li{margin-bottom:.625rem}

#blockcart-modal .cart-content .page-content.page-cms ul,#blockcart-modal .cart-content p,.page-content.page-cms #blockcart-modal .cart-content ul{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:0 .5rem;color:#363a42}

#blockcart-modal .cart-content .page-content.page-cms ul.product-total,#blockcart-modal .cart-content p.product-total,.page-content.page-cms #blockcart-modal .cart-content ul.product-total{padding:.5rem;background-color:#f6f6f6}

#blockcart-modal .cart-content .page-content.page-cms ul.cart-products-count,#blockcart-modal .cart-content p.cart-products-count,.page-content.page-cms #blockcart-modal .cart-content ul.cart-products-count{font-size:1rem;font-weight:600;color:#6c868e}

#blockcart-modal .cart-content .page-content.page-cms ul.product-tax,#blockcart-modal .cart-content p.product-tax,.page-content.page-cms #blockcart-modal .cart-content ul.product-tax{display:inherit;font-size:.875rem}

#blockcart-modal .cart-content .cart-content-btn{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}

#blockcart-modal .cart-content .cart-content-btn button{margin-right:.9rem}

#blockcart-modal .cart-content .cart-content-btn .btn{white-space:inherit}

#blockcart-modal .divide-right{border-right:1px solid #dbdbdb}

#wrapper .breadcrumb li,.product-images>li.thumb-container{display:inline}

.product-images>li.thumb-container .thumb{margin-bottom:.625rem;cursor:pointer}

.images-container .product-images>li.thumb-container .thumb{margin-right:.8125rem}

.product-images>li.thumb-container .thumb.selected,.product-images>li.thumb-container .thumb:hover{border:#376467 3px solid}

#main .images-container .js-qv-mask{overflow:hidden;white-space:nowrap}

#main .images-container .js-qv-mask.scroll{width:calc(100% - 60px);margin:0 auto}

.scroll-box-arrows{display:none}

.scroll-box-arrows.scroll{display:block}

.scroll-box-arrows i{position:absolute;bottom:1.625rem;height:100px;line-height:100px;cursor:pointer}

.scroll-box-arrows .left{left:0}

.scroll-box-arrows .right{right:0}

#product-availability{display:inline;margin-top:.625rem;font-weight:700}

#product-availability .material-icons{line-height:inherit}

#product-availability .product-available{color:#4cbb6c}

#product-availability .product-last-items,#product-availability .product-unavailable{color:#ff9a52}

#product-details .label{font-size:1rem;font-weight:500;color:#232323}

.product-features{margin-top:1.25rem;margin-left:.3125rem}

.product-features>dl.data-sheet,.product-flags{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}

.product-features>dl.data-sheet{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}

.product-features>dl.data-sheet dd.value,.product-features>dl.data-sheet dt.name{-webkit-box-flex:1;-ms-flex:1 0 40%;flex:1 0 40%;min-height:2.5rem;padding:.625rem;margin-right:.625rem;margin-bottom:.5rem;font-weight:500;text-transform:capitalize;word-break:normal;background:#f6f6f6}

.product-customization .product-customization-item,.product-variants>.product-variants-item{margin:1.25rem 0}

.product-variants>.product-variants-item select{width:auto;padding-right:1.875rem;background-color:#fff}

.product-variants>.product-variants-item ul li{margin-right:.625rem}

.product-variants>.product-variants-item .color{margin-top:0;margin-left:0}

.product-flags{position:absolute;top:0;left:0;z-index:2;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;pointer-events:none}

.product-flags li.product-flag{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding:.3125rem .4375rem;margin-top:.625rem;font-size:1rem;font-weight:700;color:#fff;text-transform:uppercase;word-break:break-word;pointer-events:auto;background:#376467}

.product-flags li.product-flag.online-only{position:absolute;top:25rem;right:0;z-index:1;margin-top:0;font-size:.8125rem}

.product-flags li.product-flag.online-only::before{margin:.3125rem;font-family:"Material Icons",Arial,sans-serif;vertical-align:middle;content:"\E30A"}

.product-flags li.product-flag.discount,.product-flags li.product-flag.discount-amount,.product-flags li.product-flag.discount-percentage{background-color:#f39d72}

.product-flags li.product-flag.on-sale{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1;width:100%;margin-top:0!important;text-align:center;background:#f39d72}

.product-customization{margin:2.5rem 0}

.product-customization .product-message{width:100%;height:3.125rem;padding:.625rem;resize:none;background:#f6f6f6;border:0}

.product-customization .product-message:focus{background-color:#fff;outline:.1875rem solid #376467}

.product-customization .file-input{position:absolute;left:0;z-index:1;width:100%;height:2.625rem;overflow:hidden;cursor:pointer;opacity:0}

.product-customization .customization-message{margin-top:20px}

.product-customization .customization-message .customization-label{text-align:left;word-break:break-word}

.product-customization .custom-file{position:relative;display:block;width:100%;height:2.625rem;margin-top:1.25rem;line-height:2.625rem;color:#707070;text-indent:.625rem;background:#f6f6f6}

.product-customization .custom-file button{position:absolute;top:0;right:0;z-index:0;height:inherit}

.product-pack{margin-top:2.5rem}

.product-pack .pack-product-container{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around}

.product-pack .pack-product-container .pack-product-name{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;font-size:.875rem;color:#707070}

.product-pack .pack-product-container .pack-product-quantity{padding-left:.625rem;border-left:#f6f6f6 2px solid}

.product-pack .pack-product-container .pack-product-name,.product-pack .pack-product-container .pack-product-price,.product-pack .pack-product-container .pack-product-quantity{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}

.product-refresh{margin-top:1.25rem}

.social-sharing{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;margin-top:1.5rem}

.social-sharing li{display:inline-block;width:2.5rem;height:2.5rem;margin-left:.5rem;cursor:pointer;background-color:#fff;background-repeat:no-repeat;background-position:.25rem .25rem;background-size:2rem 2rem;border-radius:50%}

.social-sharing li a{display:block;width:100%;height:100%;overflow:hidden;text-indent:100%;white-space:nowrap}

.block-social ul li a:hover,.social-sharing li a:hover{color:transparent}

.products-selection{margin-bottom:1.25rem}

#header .header-nav .blockcart a,.account-list a,.products-selection .title{color:#707070}

.cart-grid{margin-bottom:1rem}

#header #_desktop_logo h1,#notifications ul,.block-promo .page-content.page-cms ul,.block-promo p,.cart-items,.page-content.page-cms .block-promo ul{margin-bottom:0}

.cart-item{padding:1rem 0}

.card-block{padding:1.25rem 1.25rem .5rem}

.card-block.checkout{padding-top:0;padding-bottom:1.75rem}

.card-block.checkout .btn-primary{width:100%;white-space:normal}

.card-block.cart-detailed-subtotals+.cart-summary-totals .cart-total{border-top:1px solid #ddd}

.card-block.cart-summary-totals .cart-summary-line{padding:.5rem .2rem 0}

.card-block.cart-summary-totals .cart-summary-line:last-child{margin-bottom:0}

.card-block.cart-summary-totals .cart-summary-line.cart-total{padding:1rem 0}

#product #block-reassurance span,.card-block.cart-summary-totals .cart-summary-line.cart-total .label,.card-block.cart-summary-totals .cart-summary-line.cart-total .value{font-weight:700}

.card-block.cart-summary-totals .cart-summary-line.cart-total .label,.card-block.cart-summary-totals .cart-summary-line.cart-total .value{font-size:1rem}

.card-block.cart-summary-totals .cart-summary-line span.sub{float:none;font-size:.88rem;text-align:left}

.cart-summary-line{margin-bottom:.315rem;clear:both}

.cart-summary-line::after{content:"";display:table;clear:both}

.cart-summary-line:not(:last-child){margin-bottom:1rem}

.cart-summary-line .label{padding-left:0;font-weight:400;color:#363a42;white-space:inherit}

.cart-summary-line .value{float:right;font-weight:600;color:#232323}

.cart-summary-line.cart-summary-subtotals .label,.cart-summary-line.cart-summary-subtotals .value{font-weight:500}

.cart-summary-line .label,.cart-summary-line .value{font-size:1rem}

.cart-grid-body{margin-bottom:.75rem}

.cart-grid-body .card-block,.cart-grid-body .cart-overview{padding:1rem}

.cart-grid-body .card-block h1{margin-bottom:0;font-size:1.5rem;font-weight:400}

.cart-grid-right .promo-discounts{padding-top:.5rem;padding-bottom:.5rem;margin-bottom:0;text-align:center}

.cart-grid-right .promo-discounts .cart-summary-line .label{font-size:1rem;color:#707070}

.cart-grid-right .promo-discounts .cart-summary-line .label .code{color:#f49d6e;cursor:pointer}

.cart-grid-right .cart-summary-line.cart-subtotal-products .label,.cart-grid-right .cart-summary-line.cart-subtotal-products .value{font-weight:600}

.cart-grid-right .cart-summary-line.cart-subtotal-products .value{font-size:1rem}

.block-promo{margin-bottom:1rem}

.block-promo .promo-code{padding:1rem}

.block-promo .promo-code .alert-danger{position:relative;display:none;margin-top:1.25rem;color:#fff;background:#ff4c4c}

.block-promo .promo-code .alert-danger::after{position:absolute;bottom:100%;left:10%;width:0;height:0;margin-left:-10px;pointer-events:none;content:" ";border:solid transparent;border-width:10px;border-bottom-color:#ff4c4c}

.block-promo .promo-input{width:50%;height:2.5rem;margin-right:-.24rem;color:#232323;text-indent:.625rem;border:#707070 1px solid}

.block-promo .promo-input+button{margin-top:-4px;margin-left:-1px;text-transform:capitalize;border:2px solid #376467}

.block-promo .cart-summary-line .label,.block-promo .promo-name{margin-bottom:0;font-weight:600;color:#ff9a52}

.block-promo .cart-summary-line .label a,.block-promo .promo-name a{display:inline-block;font-weight:500;color:#232323}

.block-promo .promo-name .cart-summary-line .label{font-weight:500;color:#363a42}

.block-promo .promo-name .cart-summary-line span{color:#f49d6e}

.block-promo .promo-name .material-icons{margin-left:.4rem;font-size:1.2rem}

.block-promo .promo-code-button{display:block;padding:0 0 1rem;text-align:center}

.block-promo .promo-code-button.with-discounts{display:none}

.block-promo .promo-code-button.cancel-promo{margin-bottom:0;color:#376467}

.block-promo .promo-code-button.cancel-promo[aria-expanded=true]{display:block;padding:0;margin-top:1rem}

.block-promo.promo-highlighted{padding:0 1rem;margin-bottom:0;text-align:center}

#stores .page-stores .store-picture img,.product-line-grid-left img{max-width:100%}

.product-line-grid-body>.product-line-info>.label{padding:0;font-weight:600;line-height:inherit;text-align:left;white-space:inherit}

.product-line-grid-body>.product-line-info>.out-of-stock{color:red}

.product-line-grid-body>.product-line-info>.available{color:#4cbb6c}

.product-line-grid-body>.product-line-info .unit-price-cart{overflow:hidden;font-size:.875rem;font-weight:500;color:#707070;text-overflow:ellipsis}

.product-line-grid-right .cart-line-product-actions,.product-line-grid-right .product-price{line-height:36px;color:#232323}

.product-line-grid-right .cart-line-product-actions .remove-from-cart,.product-line-grid-right .product-price .remove-from-cart{display:inline-block;margin-top:.3125rem;color:#232323}

#block-reassurance{margin-top:2rem}

#block-reassurance img{width:1.563rem;margin-right:.625rem}

#block-reassurance li{border-bottom:1px solid rgba(0,0,0,.25)}

#block-reassurance li .block-reassurance-item{padding:1rem 1.5rem}

.quickview .modal-dialog{width:calc(100% - 30px);max-width:64rem}

.quickview .modal-content{width:100%;min-height:28.13rem;background:#f6f6f6}

.quickview .modal-header{padding:.625rem;border:0}

.quickview .modal-body{min-height:23.75rem}

.quickview .modal-footer{border-top:1px solid rgba(122,122,122,.3)}

.quickview .layer{display:none}

.quickview .product-cover img{width:100%;height:auto}

.quickview .images-container{z-index:1;display:-webkit-box;display:-ms-flexbox;display:flex;min-height:21.88rem}

.quickview .images-container .product-images>li.thumb-container .thumb{width:100%;max-width:4.938rem;height:auto;margin-bottom:.8125rem;background:#fff}

.quickview .mask{width:35%;max-height:22.5rem;margin-left:.625rem;overflow:hidden}

.quickview .arrows{position:absolute;top:0;right:5rem;bottom:0;z-index:0;max-height:22.5rem}

.quickview .arrows .arrow-up{margin-top:-3.125rem;cursor:pointer;opacity:.2}

.quickview .arrows .arrow-down{position:absolute;bottom:-1.875rem;cursor:pointer}

.quickview .social-sharing{margin-top:0;margin-left:2.5rem}

#stores .page-stores{width:85%;margin:0 auto}

#stores .page-stores .store-item{padding-right:.75rem;padding-left:.75rem}

#stores .page-stores .store-item-container,#stores .page-stores .store-item-footer{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around}

#stores .page-stores .store-item-container{-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:1.875rem 0}

#stores .page-stores .store-item-container ul{margin-bottom:0;font-size:.9375rem}

#stores .page-stores .store-item-container .divide-left{border-left:#f6f6f6 1px solid}

#stores .page-stores .store-item-container .divide-left tr{height:1.563rem}

#stores .page-stores .store-item-container .divide-left td{padding-left:.375rem}

#stores .page-stores .store-item-container .divide-left th{text-align:right}

#stores .page-stores .store-item-container .store-description{font-size:1rem}

#stores .page-stores .store-item-footer{padding-top:.5rem;margin-top:.5rem}

#stores .page-stores .store-item-footer.divide-top{border-top:#f6f6f6 1px solid}

#stores .page-stores .store-item-footer div:first-child{-webkit-box-flex:0;-ms-flex:0 0 65%;flex:0 0 65%}

#stores .page-stores .store-item-footer i.material-icons{margin-right:.625rem;font-size:1rem;color:#707070}

#footer{padding-top:2.5rem}

#blockEmailSubscription_displayFooterBefore{float:inherit;width:100%;margin:auto}

.block-contact,.footer-container li a{font-size:.875rem;color:#707070}

#block_myaccount_infos .myaccount-title a,#header a,#wrapper .breadcrumb li a,.block-contact .block-contact-title,.block-contact .navbar-toggler .material-icons,.linklist .blockcms-title a{color:#232323}

.account-list a:hover,.block_newsletter form button[type=submit] .search:hover,.footer-container li a:hover{color:#376467}

.block-contact-title,.blockcms-title,.myaccount-title,.myaccount-title a{font-size:1rem;font-weight:700}

.block-social{text-align:right}

.block-social ul li{display:inline-block;width:2.5rem;height:2.5rem;margin:.125rem;cursor:pointer;background-color:#f6f6f6;background-repeat:no-repeat}

.block-social ul li:hover{background-color:#376467}

.block-social ul li a{display:block;height:100%;overflow:hidden;text-indent:100%;white-space:nowrap}

.facebook{background-image:url(../css/04be689c12d686c59503.svg)}

.facebook::before{content:""}

.facebook.icon-gray{background-image:url(../css/b252849e892c264f4f22.svg)}

.facebook.icon-gray:hover,.facebook::before{background-image:url(../css/fa3993a997a0b84e9900.svg)}

.twitter{background-image:url(../css/f56d95737d55e2bdba95.svg)}

.twitter::before{content:""}

.twitter.icon-gray{background-image:url(../css/740f1557cae714dc4b18.svg)}

.twitter.icon-gray:hover,.twitter::before{background-image:url(../css/0ba57b3ea460c3d7d0c4.svg)}

.linkedin{background-image:url(../css/b2efa71e4ca1cd26b0f4.svg);background-position:center center}

.rss{background-image:url(../css/cbeba06698c00a61e822.svg)}

.youtube{background-image:url(../css/726b87682d18d1e83076.svg)}

.googleplus{background-image:url(../css/c472ea2ef3e5b3743873.svg)}

.googleplus::before{content:""}

.googleplus.icon-gray{background-image:url(../css/7acb0ff3a9a16ba3806d.svg)}

.googleplus.icon-gray:hover,.googleplus::before{background-image:url(../css/47f13bcaf75af86613bc.svg)}

.pinterest{background-image:url(../css/33e7446832ac7aa84b95.svg)}

.pinterest::before{content:""}

.pinterest.icon-gray{background-image:url(../css/91fc2885f1aa34fb73f6.svg)}

.pinterest.icon-gray:hover,.pinterest::before{background-image:url(../css/882e1291e47c7d9d5dd7.svg)}

.vimeo{background-image:url(../css/4903fb37c04676f5a805.svg)}

.instagram{background-image:url(../css/3a94078d659136527abf.svg)}

.footer-container{padding-top:2.5rem;overflow:hidden}

.footer-container .h3,.footer-container .h4{margin-bottom:1rem;font-size:1rem}

.footer-container li{margin-bottom:.3125rem}

.footer-container li a{cursor:pointer}

.links .collapse{display:inherit}

.contact-rich{color:#707070;word-wrap:break-word}

.contact-rich,.contact-rich h4{margin-bottom:2rem}

.contact-rich .block{height:auto;overflow:hidden}

.contact-rich .block .icon{float:left;width:3.5rem}

.contact-rich .block .icon i{font-size:2rem}

.contact-rich .block .data{width:auto;overflow:hidden;font-size:.875rem;color:#232323}

.contact-rich .block .data.email{padding-top:.375rem}

.contact-rich .block a[href^="mailto:"]{margin-top:1rem;clear:both}

.contact-form{width:100%;padding:1rem;color:#707070;background:#fff}

.contact-form h3,.contact-rich h4{color:#232323;text-transform:uppercase}

#pagenotfound #main .page-header,#products #main .page-header{margin:2rem 0 3rem}

#pagenotfound #main .page-content,#products #main .page-content{margin-bottom:10rem}

#pagenotfound .page-not-found,#products .page-not-found{max-width:570px;padding:1rem;margin:0 auto;overflow:auto;font-size:.875rem;color:#707070;background:#fff}

#pagenotfound .page-not-found h4,#products .page-not-found h4{margin:.5rem 0 1rem;font-size:1rem;font-weight:700}

#pagenotfound .page-not-found .search-widget,#products .page-not-found .search-widget{float:none}

.customization-modal .modal-content{border:1px solid #f6f6f6;border-radius:0}

#footer .block_newsletter #block-newsletter-label,.customization-modal .modal-content .modal-body{padding-top:0}

.customization-modal .modal-content .modal-body .product-customization-line{padding-top:.9375rem;padding-bottom:.9375rem;border-bottom:1px solid #f6f6f6}

.customization-modal .modal-content .modal-body .product-customization-line .label{font-weight:600;text-align:right}

.customization-modal .modal-content .modal-body .product-customization-line .value{word-wrap:break-word}

.customization-modal .modal-content .modal-body .product-customization-line:last-child{padding-bottom:0;border-bottom:0}

.sitemap-title{text-transform:capitalize}

#header .header-nav ,.sitemap{margin-top:.9375rem}

.sitemap h2{width:100%;height:35px;margin-left:-15px;font-size:1.1rem;font-weight:600;color:#232323;text-transform:uppercase;border-bottom:1px solid #707070}

.sitemap ul{margin-top:20px;margin-left:-15px}

.sitemap ul.nested{margin-left:20px}

.sitemap ul li{margin-bottom:1rem;font-size:.9rem}

.block_newsletter{float:inherit;width:100%;max-width:50rem;margin:auto;margin-bottom:.625rem;clear:both;font-size:.875rem;background:#fff}

.block_newsletter form input[type=text]:focus{color:#232323;background:#fff;outline:3px #376467 solid}

.block_newsletter #block-newsletter-label{font-size:1.3125rem;line-height:1.75rem;color:#232323}

.block_newsletter form .input-wrapper{overflow:hidden}

.block_newsletter form .row .col-xs-12:last-of-type .page-content.page-cms ul,.block_newsletter form .row .col-xs-12:last-of-type p,.page-content.page-cms .block_newsletter form .row .col-xs-12:last-of-type ul{font-size:.75rem;color:#707070}

.block_newsletter form .row .col-xs-12:first-of-type .btn-primary:first-of-type{margin-left:.5rem}

.block_newsletter form input[type=email]{width:100%;padding:11px;border:1px solid #ddd}

.block_newsletter form input[type=email]:focus{padding:8px 8px 9px;border:3px #376467 solid;outline:0}

.block_newsletter form input{height:42px;-webkit-box-shadow:none;box-shadow:none}

#footer .block_newsletter .page-content.page-cms ul,#footer .block_newsletter p,.page-content.page-cms #footer .block_newsletter ul{padding-top:.625rem}

#left-column .block_newsletter{padding:1.563rem 1.25rem;margin-bottom:1.563rem}

#manufacturer #main ul{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}

#manufacturer #main ul .brand{position:relative;width:calc(20% - 10px);min-width:210px;padding:10px;margin:5px;text-align:center;background:#fff;-webkit-transition:.4s ease-out;transition:.4s ease-out}

#manufacturer #main ul .brand:hover{-webkit-box-shadow:0 0 8px 0 rgba(0,0,0,.2);box-shadow:0 0 8px 0 rgba(0,0,0,.2)}

#manufacturer #main ul .brand-products{display:none}

#manufacturer #main ul .brand-img{position:relative;width:200px;margin:auto}

#manufacturer #main ul .brand-img a::before{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;content:""}

#header{position:relative;z-index:999;color:#707070;background:#fff;-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,.11);box-shadow:0 2px 5px 0 rgba(0,0,0,.11)}

#header .logo{max-width:100%;height:auto}

#header a:hover{color:#376467;text-decoration:none}

#header .menu,#header .menu>ul>li{display:inline-block}

#header .header-nav{border-bottom:#f6f6f6 2px solid}
/* CLS: el "max-height:50px" nativo de esta regla recortaba la barra
   (whatsapp/idioma/registro/carrito) a 50px hasta que "watchHeaderNavAutoHide()"
   (custom.js) medía su altura real (~63px) y la corregía por inline style,
   ya avanzada la carga (custom.js es "defer" + puede tardar >1s bajo
   CPU/red lentos). Confirmado con PerformanceObserver real: los hijos de
   ".header-nav" (whatsapp, selector de idioma, botón "S'inscrire", carrito)
   YA tenían su tamaño final desde el primer instante — solo el contenedor
   estaba recortado por este "max-height" — así que al quitarlo la barra
   nace directamente a su altura correcta, sin ningún salto. El propio JS
   sigue encargándose de colapsarla/expandirla al hacer scroll (le pone su
   propio "max-height" inline en cada caso), así que no necesita ningún
   valor de partida en el CSS estático. */
#header .header-nav{max-height:none;}

#header .header-nav #menu-icon{margin:0 1rem;vertical-align:middle;cursor:pointer}

#header .header-nav #menu-icon .material-icons{line-height:50px}

#header .header-nav .right-nav{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}

#header .header-nav .currency-selector{margin-top:.9375rem;margin-left:.9375rem;white-space:nowrap}

#header .header-nav .user-info{margin-left:2.5rem;text-align:right}

#header .header-nav .user-info .account{margin-left:.625rem}

#header .header-nav .language-selector,#header .header-nav .user-info{margin-top:.9375rem;white-space:nowrap}

#header .header-nav .cart-preview.active{background:#376467}

#header .header-nav .blockcart.active a:hover,#header .header-nav .cart-preview.active a,#header .header-nav .cart-preview.active i{color:#fff}

#header .header-nav .cart-preview .shopping-cart{color:#707070;vertical-align:middle}

#header .header-nav .cart-preview .body{display:none}

#header .header-nav .blockcart{height:3rem;padding:.75rem;margin-left:.9375rem;text-align:center;white-space:nowrap;background:#f6f6f6}

#header .header-nav .blockcart a:hover{color:#376467}

#header .header-nav .blockcart .header{margin-top:.125rem}

#header .header-nav {display: flex; justify-content: center; align-items: center;}

#header .header-nav .search-widget{margin-top:.2rem}

#header .header-nav .material-icons{line-height:inherit}

#header .header-nav .material-icons.expand-more{margin-left:-.375rem}

#header .header-top{padding:1.25rem 0}

#header .header-top>.container{position:relative}

#header .header-top>.container>.row:first-of-type{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}

#header .header-top .menu{padding-left:15px}

#header .header-top .position-static{position:static}

#header .header-top a[data-depth="0"]{color:#707070;text-transform:uppercase}

#header .header-top .search-widget{float:right}

#header .top-menu-link{margin-left:1.25rem}

#wrapper{padding-top:1.563rem;background:#f6f6f6}

#wrapper .banner{display:block;margin-bottom:1.5rem}

#wrapper .breadcrumb{padding:0;background:0 0}

#wrapper .breadcrumb[data-depth="1"]{display:none}

#wrapper .breadcrumb li::after{margin:.3125rem;color:#707070;content:"/"}

#wrapper .breadcrumb li:last-child{margin:0;color:#707070;content:"/"}

#wrapper .breadcrumb li:last-child::after{content:""}

#main .page-content,#main .page-footer,#main .page-header{margin-bottom:1.563rem}

#main .page-content h6{margin-bottom:1.125rem}

#main .page-content #notifications{margin-right:-15px;margin-left:-15px}

.progress{background:#dbdbdb}

.progress-bar{height:100%;-webkit-transition:.25s ease-out;transition:.25s ease-out}

@media print{*,.page-content.page-cms ul::first-line,::after,::before,::first-letter,blockquote::first-line,div::first-line,li::first-line,p::first-line{text-shadow:none!important;-webkit-box-shadow:none!important;box-shadow:none!important}

a,a:visited{text-decoration:underline}

abbr[title]::after{content:" (" attr(title) ")"}

pre{white-space:pre-wrap!important}

blockquote,pre{border:1px solid #999}

thead{display:table-header-group}

blockquote,img,pre,tr{page-break-inside:avoid}

.page-content.page-cms ul,h2,h3,p{orphans:3;widows:3}

h2,h3{page-break-after:avoid}

.navbar{display:none}

.btn>.caret,.dropup>.btn>.caret{border-top-color:#000!important}

.tag{border:1px solid #000}

.table{border-collapse:collapse!important}

.table td,.table th{background-color:#fff!important}

.table-bordered td,.table-bordered th{border:1px solid #ddd!important}

.visible-print-block{display:block!important}

.visible-print-inline{display:inline!important}

.visible-print-inline-block{display:inline-block!important}

.hidden-print{display:none!important}

}

@media (min-width:576px){.container{width:540px;max-width:100%}

.row{margin-right:-15px;margin-left:-15px}

.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xs,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{padding-right:15px;padding-left:15px}

.col-sm-1{float:left;width:8.33333%}

.col-sm-2,.col-sm-3{float:left;width:16.66667%}

.col-sm-3{width:25%}

.col-sm-4,.col-sm-5{float:left;width:33.33333%}

.col-sm-5{width:41.66667%}

.col-sm-6,.col-sm-7{float:left;width:50%}

.col-sm-7{width:58.33333%}

.col-sm-8,.col-sm-9{float:left;width:66.66667%}

.col-sm-9{width:75%}

.col-sm-10{float:left;width:83.33333%}

.col-sm-11{float:left;width:91.66667%}

.col-sm-12{float:left;width:100%}

.pull-sm-0{right:auto}

.pull-sm-1{right:8.33333%}

.pull-sm-2{right:16.66667%}

.pull-sm-3{right:25%}

.pull-sm-4{right:33.33333%}

.pull-sm-5{right:41.66667%}

.pull-sm-6{right:50%}

.pull-sm-7{right:58.33333%}

.pull-sm-8{right:66.66667%}

.pull-sm-9{right:75%}

.pull-sm-10{right:83.33333%}

.pull-sm-11{right:91.66667%}

.pull-sm-12{right:100%}

.push-sm-0{left:auto}

.push-sm-1{left:8.33333%}

.push-sm-2{left:16.66667%}

.push-sm-3{left:25%}

.push-sm-4{left:33.33333%}

.push-sm-5{left:41.66667%}

.push-sm-6{left:50%}

.push-sm-7{left:58.33333%}

.push-sm-8{left:66.66667%}

.push-sm-9{left:75%}

.push-sm-10{left:83.33333%}

.push-sm-11{left:91.66667%}

.push-sm-12{left:100%}

.offset-sm-0{margin-left:0}

.offset-sm-1{margin-left:8.33333%}

.offset-sm-2{margin-left:16.66667%}

.offset-sm-3{margin-left:25%}

.offset-sm-4{margin-left:33.33333%}

.offset-sm-5{margin-left:41.66667%}

.offset-sm-6{margin-left:50%}

.offset-sm-7{margin-left:58.33333%}

.offset-sm-8{margin-left:66.66667%}

.offset-sm-9{margin-left:75%}

.offset-sm-10{margin-left:83.33333%}

.offset-sm-11{margin-left:91.66667%}

.form-inline .form-group{display:inline-block;margin-bottom:0;vertical-align:middle}

.form-inline .form-control{display:inline-block;width:auto;vertical-align:middle}

.form-inline .form-control-static{display:inline-block}

.form-inline .input-group{display:inline-table;width:auto;vertical-align:middle}

.form-inline .input-group .form-control,.form-inline .input-group .input-group-addon,.form-inline .input-group .input-group-btn{width:auto}

.form-inline .input-group>.form-control{width:100%}

.form-inline .form-check,.form-inline .form-control-label{margin-bottom:0;vertical-align:middle}

.form-inline .form-check{display:inline-block;margin-top:0}

.form-inline .form-check-label{padding-left:0}

.form-inline .form-check-input{position:relative;margin-left:0}

.form-inline .has-feedback .form-control-feedback{top:0}

.navbar,.navbar-fixed-bottom,.navbar-fixed-top,.navbar-full,.navbar-sticky-top{border-radius:0}

.navbar-toggleable-xs{display:block!important}

.card-deck{display:table;width:100%;margin-bottom:.75rem;table-layout:fixed;border-spacing:1.25rem 0}

.card-deck .card{margin-bottom:0}

.card-deck-wrapper{margin-right:-1.25rem;margin-left:-1.25rem}

.card-group{display:table;width:100%;table-layout:fixed}

.card-deck .card,.card-group .card{display:table-cell;vertical-align:top}

.card-group .card+.card{margin-left:0;border-left:0}

.card-group .card:first-child{border-bottom-right-radius:0;border-top-right-radius:0}

.card-group .card:first-child .card-img-top{border-top-right-radius:0}

.card-group .card:first-child .card-img-bottom{border-bottom-right-radius:0}

.card-group .card:last-child{border-bottom-left-radius:0;border-top-left-radius:0}

.card-group .card:last-child .card-img-top{border-top-left-radius:0}

.card-group .card:last-child .card-img-bottom{border-bottom-left-radius:0}

.card-group .card:not(:first-child):not(:last-child),.card-group .card:not(:first-child):not(:last-child) .card-img-bottom,.card-group .card:not(:first-child):not(:last-child) .card-img-top{border-radius:0}

.card-columns{-webkit-column-count:3;-moz-column-count:3;column-count:3;-webkit-column-gap:1.25rem;-moz-column-gap:1.25rem;column-gap:1.25rem}

.card-columns .card{display:inline-block;width:100%}

.jumbotron{padding:4rem 2rem}

.modal-dialog{max-width:600px;margin:30px auto}

.modal-sm{max-width:300px}

.carousel-control .icon-next,.carousel-control .icon-prev{width:30px;height:30px;margin-top:-15px;font-size:30px}

.carousel-control .icon-prev{margin-left:-15px}

.carousel-control .icon-next{margin-right:-15px}

.carousel-caption{right:20%;left:20%;padding-bottom:30px}

.carousel-indicators{bottom:20px}

.float-sm-left{float:left!important}

.float-sm-right{float:right!important}

.float-sm-none{float:none!important}

.text-sm-left{text-align:left!important}

.text-sm-right{text-align:right!important}

.text-sm-center{text-align:center!important}

.hidden-sm-up{display:none!important}

.header-top .search-widgets{max-width:13rem}

.contact-rich .block a[href^="mailto:"]{font-size:.815rem}

}

@media (min-width:768px){.container{width:720px;max-width:100%}

.row{margin-right:-15px;margin-left:-15px}

.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xs,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{padding-right:15px;padding-left:15px}

.col-md-1{float:left;width:8.33333%}

.col-md-2,.col-md-3{float:left;width:16.66667%}

.col-md-3{width:25%}

.col-md-4,.col-md-5{float:left;width:33.33333%}

.col-md-5{width:41.66667%}

.col-md-6,.col-md-7{float:left;width:50%}

.col-md-7{width:58.33333%}

.col-md-8,.col-md-9{float:left;width:66.66667%}

.col-md-9{width:75%}

.col-md-10{float:left;width:83.33333%}

.col-md-11{float:left;width:91.66667%}

.col-md-12{float:left;width:100%}

.pull-md-0{right:auto}

.pull-md-1{right:8.33333%}

.pull-md-2{right:16.66667%}

.pull-md-3{right:25%}

.pull-md-4{right:33.33333%}

.pull-md-5{right:41.66667%}

.pull-md-6{right:50%}

.pull-md-7{right:58.33333%}

.pull-md-8{right:66.66667%}

.pull-md-9{right:75%}

.pull-md-10{right:83.33333%}

.pull-md-11{right:91.66667%}

.pull-md-12{right:100%}

.push-md-0{left:auto}

.push-md-1{left:8.33333%}

.push-md-2{left:16.66667%}

.push-md-3{left:25%}

.push-md-4{left:33.33333%}

.push-md-5{left:41.66667%}

.push-md-6{left:50%}

.push-md-7{left:58.33333%}

.push-md-8{left:66.66667%}

.push-md-9{left:75%}

.push-md-10{left:83.33333%}

.push-md-11{left:91.66667%}

.push-md-12{left:100%}

.offset-md-0{margin-left:0}

.offset-md-1{margin-left:8.33333%}

.offset-md-2{margin-left:16.66667%}

.offset-md-3{margin-left:25%}

.offset-md-4{margin-left:33.33333%}

.offset-md-5{margin-left:41.66667%}

.offset-md-6{margin-left:50%}

.offset-md-7{margin-left:58.33333%}

.offset-md-8{margin-left:66.66667%}

.offset-md-9{margin-left:75%}

.offset-md-10{margin-left:83.33333%}

.offset-md-11{margin-left:91.66667%}

.navbar-toggleable-sm{display:block!important}

.float-md-left{float:left!important}

.float-md-right{float:right!important}

.float-md-none{float:none!important}

.text-md-left{text-align:left!important}

.text-md-right{text-align:right!important}

.text-md-center{text-align:center!important}

.hidden-md-up{display:none!important}

.search-widget{min-width:15.63rem}

#blockcart-modal .cart-content{padding-left:2.5rem}

}

@media (min-width:992px){.container{width:960px;max-width:100%}

.row{margin-right:-15px;margin-left:-15px}

.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xs,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{padding-right:15px;padding-left:15px}

.col-lg-1{float:left;width:8.33333%}

.col-lg-2,.col-lg-3{float:left;width:16.66667%}

.col-lg-3{width:25%}

.col-lg-4,.col-lg-5{float:left;width:33.33333%}

.col-lg-5{width:41.66667%}

.col-lg-6,.col-lg-7{float:left;width:50%}

.col-lg-7{width:58.33333%}

.col-lg-8,.col-lg-9{float:left;width:66.66667%}

.col-lg-9{width:75%}

.col-lg-10{float:left;width:83.33333%}

.col-lg-11{float:left;width:91.66667%}

.col-lg-12{float:left;width:100%}

.pull-lg-0{right:auto}

.pull-lg-1{right:8.33333%}

.pull-lg-2{right:16.66667%}

.pull-lg-3{right:25%}

.pull-lg-4{right:33.33333%}

.pull-lg-5{right:41.66667%}

.pull-lg-6{right:50%}

.pull-lg-7{right:58.33333%}

.pull-lg-8{right:66.66667%}

.pull-lg-9{right:75%}

.pull-lg-10{right:83.33333%}

.pull-lg-11{right:91.66667%}

.pull-lg-12{right:100%}

.push-lg-0{left:auto}

.push-lg-1{left:8.33333%}

.push-lg-2{left:16.66667%}

.push-lg-3{left:25%}

.push-lg-4{left:33.33333%}

.push-lg-5{left:41.66667%}

.push-lg-6{left:50%}

.push-lg-7{left:58.33333%}

.push-lg-8{left:66.66667%}

.push-lg-9{left:75%}

.push-lg-10{left:83.33333%}

.push-lg-11{left:91.66667%}

.push-lg-12{left:100%}

.offset-lg-0{margin-left:0}

.offset-lg-1{margin-left:8.33333%}

.offset-lg-2{margin-left:16.66667%}

.offset-lg-3{margin-left:25%}

.offset-lg-4{margin-left:33.33333%}

.offset-lg-5{margin-left:41.66667%}

.offset-lg-6{margin-left:50%}

.offset-lg-7{margin-left:58.33333%}

.offset-lg-8{margin-left:66.66667%}

.offset-lg-9{margin-left:75%}

.offset-lg-10{margin-left:83.33333%}

.offset-lg-11{margin-left:91.66667%}

.navbar-toggleable-md{display:block!important}

.modal-lg{max-width:900px}

.float-lg-left{float:left!important}

.float-lg-right{float:right!important}

.float-lg-none{float:none!important}

.text-lg-left{text-align:left!important}

.text-lg-right{text-align:right!important}

.text-lg-center{text-align:center!important}

.hidden-lg-up{display:none!important}

.carousel .carousel-indicators{display:none}

#product-modal .modal-content .modal-body .product-images{margin-left:2.5rem}

}

@media (min-width:1200px){.container{width:1140px;max-width:100%}

.row{margin-right:-15px;margin-left:-15px}

.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xs,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{padding-right:15px;padding-left:15px}

.col-xl-1{float:left;width:8.33333%}

.col-xl-2,.col-xl-3{float:left;width:16.66667%}

.col-xl-3{width:25%}

.col-xl-4,.col-xl-5{float:left;width:33.33333%}

.col-xl-5{width:41.66667%}

.col-xl-6,.col-xl-7{float:left;width:50%}

.col-xl-7{width:58.33333%}

.col-xl-8,.col-xl-9{float:left;width:66.66667%}

.col-xl-9{width:75%}

.col-xl-10{float:left;width:83.33333%}

.col-xl-11{float:left;width:91.66667%}

.col-xl-12{float:left;width:100%}

.pull-xl-0{right:auto}

.pull-xl-1{right:8.33333%}

.pull-xl-2{right:16.66667%}

.pull-xl-3{right:25%}

.pull-xl-4{right:33.33333%}

.pull-xl-5{right:41.66667%}

.pull-xl-6{right:50%}

.pull-xl-7{right:58.33333%}

.pull-xl-8{right:66.66667%}

.pull-xl-9{right:75%}

.pull-xl-10{right:83.33333%}

.pull-xl-11{right:91.66667%}

.pull-xl-12{right:100%}

.push-xl-0{left:auto}

.push-xl-1{left:8.33333%}

.push-xl-2{left:16.66667%}

.push-xl-3{left:25%}

.push-xl-4{left:33.33333%}

.push-xl-5{left:41.66667%}

.push-xl-6{left:50%}

.push-xl-7{left:58.33333%}

.push-xl-8{left:66.66667%}

.push-xl-9{left:75%}

.push-xl-10{left:83.33333%}

.push-xl-11{left:91.66667%}

.push-xl-12{left:100%}

.offset-xl-0{margin-left:0}

.offset-xl-1{margin-left:8.33333%}

.offset-xl-2{margin-left:16.66667%}

.offset-xl-3{margin-left:25%}

.offset-xl-4{margin-left:33.33333%}

.offset-xl-5{margin-left:41.66667%}

.offset-xl-6{margin-left:50%}

.offset-xl-7{margin-left:58.33333%}

.offset-xl-8{margin-left:66.66667%}

.offset-xl-9{margin-left:75%}

.offset-xl-10{margin-left:83.33333%}

.offset-xl-11{margin-left:91.66667%}

.navbar-toggleable-lg{display:block}

.float-xl-left{float:left!important}

.float-xl-right{float:right!important}

.float-xl-none{float:none!important}

.text-xl-left{text-align:left!important}

.text-xl-right{text-align:right!important}

.text-xl-center{text-align:center!important}

.hidden-xl-up{display:none!important}

}

@media (max-width:575px){.navbar-toggleable-xs .navbar-brand{display:block;float:none;margin-top:.5rem;margin-right:0}

.navbar-toggleable-xs .navbar-nav{margin-top:.5rem;margin-bottom:.5rem}

.navbar-toggleable-xs .navbar-nav .dropdown-menu{position:static;float:none}

.navbar-toggleable-xs .navbar-nav .nav-item{float:none;margin-left:0}

.hidden-xs-down{display:none!important}

.header-top-right{width:100%;padding-right:15px}

body#checkout section.checkout-step .content{padding:.9375rem 0}

#payment-confirmation button{font-size:.875rem}

#payment-confirmation button.btn{white-space:normal}

.product-miniature .thumbnail-container:focus .product-description::after,.product-miniature .thumbnail-container:hover .product-description::after{display:none}

.product-miniature .highlighted-informations{display:none}

.products-selection .filter-button{padding-left:0}

#category #left-column #search_filters_wrapper{margin-right:-15px;margin-left:-15px}

.cart-items{padding:1rem 0}

.cart-item{border-bottom:1px solid #f6f6f6}

.cart-item:last-child{border-bottom:0}

.cart-grid-body .cart-overview{padding:0}

.cart-grid-body .no-items{display:inline-block;padding:1rem}

.product-line-grid-left{padding-right:0!important}

#stores .page-stores .store-item-container,#stores .page-stores .store-item-footer{display:block}

#stores .page-stores .store-item-container .divide-left{border-left:none}

#stores .page-stores .store-item-container .store-description a,#stores .page-stores .store-item-container .store-description address{margin-bottom:.5rem}

#stores .page-stores .store-item-footer.divide-top{border-top:#f6f6f6 1px solid}

#stores .page-stores .store-item-footer li{margin-bottom:.625rem}

#stores .page-stores .store-item-footer .card-block{padding:.75rem .75rem 0}

.sitemap{margin-top:0}

}

@media (max-width:767px){.navbar-toggleable-sm .navbar-brand{display:block;float:none;margin-top:.5rem;margin-right:0}

.navbar-toggleable-sm .navbar-nav{margin-top:.5rem;margin-bottom:.5rem}

.navbar-toggleable-sm .navbar-nav .dropdown-menu{position:static;float:none}

.navbar-toggleable-sm .navbar-nav .nav-item{float:none;margin-left:0}

.hidden-sm-down{display:none!important}

.header-top .search-widget{float:none}

.header-top .search-widget form{margin:0 auto}

.header-top .search-widget form input[type=text]{min-width:inherit;background:#fff}

.top-menu .sub-menu{visibility:visible;opacity:1;-webkit-transition:.5s ease-out;transition:.5s ease-out}

body#checkout section.checkout-step .forgot-password{margin-bottom:.625rem;margin-left:0}

body#checkout section.checkout-step.-reachable.-complete h1 .step-edit{float:none;margin-top:.25rem;margin-left:1.25rem}

body#checkout #header .header-nav{max-height:none;padding:0}

body#checkout section.checkout-step .content{padding:.9375rem}

body#checkout .form-group{margin-bottom:.5rem}

#order-items{margin-bottom:2.5rem;border-right:0}

#order-details .card-title,#order-items .card-title{padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid #f6f6f6}

#order-items hr{border-top-color:#f6f6f6}

.bold{font-weight:600}

#order-details{padding-left:.9375rem}

body#checkout section.checkout-step .delivery-options .delivery-option label .carrier:not(.carrier-hasLogo) .col-xs-12{padding-left:0}

.forgotten-password .form-fields .center-email-fields{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}

.forgotten-password .form-fields .center-email-fields button{width:calc(100% - 20px);margin:10px}

.forgotten-password .form-fields .email{width:100%;padding-right:10px;padding-left:10px}

.carousel .carousel-item .caption .display-1{font-size:1.3rem}

.carousel .carousel-control .icon-next i,.carousel .carousel-control .icon-prev i{font-size:2rem}

#category #left-column #search_filters_wrapper{margin-right:-30px;margin-left:-30px}

#category #left-column #search_filter_controls,.products-selection h1{margin-bottom:1rem;text-align:center}

#category #left-column #search_filter_controls button{margin:0 .5rem}

#category #left-column #search_filters{padding:0;margin-bottom:20px;border-top:1px solid #f6f6f6;-webkit-box-shadow:none;box-shadow:none}

#category #left-column #search_filters .ui-slider-horizontal{margin-bottom:20px}

#category #left-column #search_filters .facet{padding-top:0;border-bottom:1px solid #f6f6f6}

#category #left-column #search_filters .facet .title{-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer}

#category #left-column #search_filters .facet .title .collapse-icons .remove,#category #left-column #search_filters .facet .title[aria-expanded=true] .collapse-icons .add{display:none}

#category #left-column #search_filters .facet .collapse.in,#category #left-column #search_filters .facet .title[aria-expanded=true] .collapse-icons .remove{display:block}

#category #left-column #search_filters .facet .facet-title{color:#232323;text-transform:uppercase}

#category #left-column #search_filters .facet .h6{display:inline-block;padding:1.25rem;margin-bottom:0}

#category #left-column #search_filters .facet .navbar-toggler{display:inline-block;height:inherit;padding:0 .625rem 0 0}

#category #left-column #search_filters .facet .collapse{display:none}

#category #left-column #search_filters .facet .facet-label a{margin-top:0}

#category #left-column #search_filters .facet ul{margin-bottom:0}

#category #left-column #search_filters .facet ul li{padding:1.25rem;border-top:1px solid #f6f6f6}

#category #search_filter_toggler{width:100%}

.products-sort-order .select-title{margin-left:0}

.products-selection h1{padding-top:0}

.products-selection .showing{padding-top:1rem}

#subcategories ul{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}

#blockcart-modal .modal-body .divide-right span{display:block;padding:0 .5rem}

#blockcart-modal .product-name,#blockcart-modal .product-price{padding:0 .5rem}

#blockcart-modal .divide-right{border-right:none}

#blockcart-modal .modal-body{padding:1rem}

.product-line-grid-body{margin-bottom:1rem}

#stores .page-stores{width:100%}

#stores .page-stores .store-item-container{padding:1rem 0}

.block-contact #contact-infos{padding:.625rem;padding-top:0}

.block-social ul{-ms-flex-flow:wrap;flex-flow:wrap}

.block-social ul li{width:2rem;height:2rem;margin-right:1.3rem;margin-bottom:1.3rem;background-size:contain}

.block_newsletter{padding-bottom:.625rem;border-bottom:1px solid #f6f6f6}

.footer-container{margin-top:0;-webkit-box-shadow:none;box-shadow:none}

.footer-container .wrapper{padding-right:0!important;padding-left:0!important}

.footer-container .links .h3{font-size:1rem;line-height:1.5}

.footer-container .links ul{margin-bottom:0;background-color:#f6f6f6}

.footer-container .links ul>li{padding:.625rem;font-weight:600;border-bottom:1px solid #fff}

.footer-container .links ul>li a{color:#232323}

.links .collapse,.links .title .collapse-icons .remove,.links .title[aria-expanded=true] .collapse-icons .add{display:none}

.links .collapse.in,.links .title[aria-expanded=true] .collapse-icons .remove{display:block}

.links .title{padding:.625rem;cursor:pointer;border-bottom:1px solid #f6f6f6}

.links .navbar-toggler{display:inline-block;padding:0}

.block_newsletter{padding-top:1rem}

#header .top-logo{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:50px}

#header .top-logo img{width:auto;max-height:2rem}

#header .top-logo>h1{margin:0}

}

@media (max-width:991px){.navbar-toggleable-md .navbar-brand{display:block;float:none;margin-top:.5rem;margin-right:0}

.navbar-toggleable-md .navbar-nav{margin-top:.5rem;margin-bottom:.5rem}

.navbar-toggleable-md .navbar-nav .dropdown-menu{position:static;float:none}

.navbar-toggleable-md .navbar-nav .nav-item{float:none;margin-left:0}

.hidden-md-down{display:none!important}

#order-items .h3._desktop-title{display:none}

.done{padding:0;margin-right:.625rem}

body#checkout section.checkout-step .address-item{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}

#product-modal .modal-content .modal-body,body#checkout section.checkout-step .delivery-option-2{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}

.delivery-option{display:-webkit-box;display:-ms-flexbox;display:flex;margin:auto}

.delivery-option .custom-radio{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}

.condition-label label[for="conditions_to_approve[terms-and-conditions]"]{text-align:left}

#order-confirmation #registration-form{width:100%}

body#checkout section.checkout-step .delivery-options .delivery-option .carrier>.col-xs-12{padding-left:0}

.carousel{left:50%;width:100vw;padding-bottom:.5rem;margin-left:-50vw;background-color:#f6f6f6;-webkit-box-shadow:none;box-shadow:none}

.carousel .carousel-control .icon-next,.carousel .carousel-control .icon-prev{width:auto;height:auto}

.carousel .carousel-item .caption{position:static;margin:1.275rem auto 2.5rem;text-align:center}

.carousel .carousel-item .caption .display-1{font-size:2rem;font-weight:500;color:#232323}

.carousel .carousel-item .caption .caption-description .page-content.page-cms ul,.carousel .carousel-item .caption .caption-description h3,.carousel .carousel-item .caption .caption-description p,.page-content.page-cms .carousel .carousel-item .caption .caption-description ul{color:#707070}

.carousel .carousel-item .caption .caption-description h3{font-size:1rem}

.carousel .direction{position:absolute;top:calc(50%);width:100%}

.carousel .direction .carousel-control .icon-prev{left:0;margin-left:0}

.carousel .direction .carousel-control .icon-next{right:0;margin-right:0}

.carousel .direction .carousel-control i{background:rgba(122,122,122,.5)}

.carousel-indicators li{width:8px;height:8px}

.carousel-indicators .active{width:8px;height:8px;margin:1px}

#products .products,.featured-products .products{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}

#block-cmsinfo{padding:1.25rem 1.875rem}

#product-modal .modal-content .modal-body .product-cover-modal{max-width:100%;height:auto}

#blockcart-modal .product-image{max-width:70%;margin:0 auto 1rem}

.product-cover img{width:100%;height:auto}

#product-modal .modal-content .modal-body{margin-left:0}

#product-modal .modal-content .modal-body .arrows{display:none}

#product-modal .modal-content .modal-body .image-caption{width:100%}

#blockcart-modal .modal-dialog{width:calc(100% - 20px)}

#blockcart-modal .modal-body{padding:1.875rem}

.product-images>li.thumb-container>.thumb:not(.selected){border:0}

.block-social{text-align:center}

.block-contact{padding-left:1.5rem}

#manufacturer #main ul{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}

}

@media (max-width:1199px){.navbar-toggleable-lg .navbar-brand{display:block;float:none;margin-top:.5rem;margin-right:0}

.navbar-toggleable-lg .navbar-nav{margin-top:.5rem;margin-bottom:.5rem}

.navbar-toggleable-lg .navbar-nav .dropdown-menu{position:static;float:none}

.hidden-lg-down{display:none!important}

.carousel .carousel-inner{height:auto}

}

@media screen and (min-width:0\0){.progress{background-color:#eee;border-radius:0}

.progress-bar{display:inline-block;height:1rem;text-indent:-999rem;background-color:#0074d9;border-bottom-left-radius:0;border-top-left-radius:0}

.progress[width="100%"]{border-bottom-right-radius:0;border-top-right-radius:0}

.progress-bar-striped{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}

.progress-animated .progress-bar-striped{-webkit-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite}

.progress-success .progress-bar{background-color:#4cbb6c}

.progress-info .progress-bar{background-color:#376467}

.progress-warning .progress-bar{background-color:#ff9a52}

.progress-danger .progress-bar{background-color:#ff4c4c}

}

@media all and (transform-3d),(-webkit-transform-3d){.carousel-inner>.carousel-item{-webkit-transition:-webkit-transform .6s ease-in-out;transition:transform .6s ease-in-out;transition:transform .6s ease-in-out,-webkit-transform .6s ease-in-out;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000px;perspective:1000px}

.carousel-inner>.carousel-item.active.right,.carousel-inner>.carousel-item.next{left:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}

.carousel-inner>.carousel-item.active.left,.carousel-inner>.carousel-item.prev{left:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}

.carousel-inner>.carousel-item.active,.carousel-inner>.carousel-item.next.left,.carousel-inner>.carousel-item.prev.right{left:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}

}

@media screen and (max-width:767px){.category-cover{display:none}

.block-category{min-height:0;margin-bottom:0}

.card-block{padding:0}

.card{background-color:inherit;border:0;-webkit-box-shadow:none;box-shadow:none}

}

@media (max-width:360px){.product-line-grid-right .price,.product-line-grid-right .qty{width:100%}

}



.contact-link {
    display: none;
}



#left-column {
    display: none;
}





.header-top-right {
  display: flex; /* Align children in a row */
  align-items: center;
  width: 100%; /* Ensure full width usage */
}



#search_widget {
  flex-grow: 1; /* Allow expansion to use remaining space */
  width: 100%;
  max-width: none; /* Prevent unnecessary restrictions */
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Include padding/borders in width calculations */
}




/* Forzar el hover de .btn-primary */
.btn-primary:hover {
  background-color: #254845 !important;
  border-color: transparent !important;
}

@media (max-width: 767px) {

  /* Evita el uso de la fuente */
  .fa,
  .fas,
  .far,
  .fal,
  .fab,
  [class^="fa-"],
  [class*=" fa-"] {
    font-family: system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, Arial, sans-serif !important;
    font-weight: normal !important;
  }

}

/* ===============================
   FUENTES �?OPTIMIZACIÓN MÓVIL
   =============================== */
@media (max-width: 768px) {
  body,
  html {
    font-family:
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      Arial,
      sans-serif !important;
  }
}

/* ===================================================
   OPTIMIZACIÓN MÓVIL SEGURA (NO ROMPE PRESTASHOP)
   =================================================== */

@media (max-width: 767px) {

  /* ─────────────────────────────────────
     1. Quitar SOLO sombras decorativas
     ───────────────────────────────────── */
  .thumbnail-container,
  .product-miniature,
  .bloghome .article,
  #right-column a img {
    box-shadow: none !important;
  }

  /* ─────────────────────────────────────
     2. Hover estético innecesario en móvil
     ───────────────────────────────────── */
  .thumbnail-container:hover,
  .product-miniature:hover {
    box-shadow: none !important;
    transform: none !important;
  }

  /* ─────────────────────────────────────
     3. Fuente sistema SOLO base (seguro)
     ───────────────────────────────────── */
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, Arial, sans-serif;
  }

  /* ─────────────────────────────────────
     4. Ocultar módulos no críticos
     (sin afectar JS ni layout)
     ───────────────────────────────────── */
  #latestBlogPosts,
  .bloghome,
  .blockreassurance_product {
    display: none !important;
  }

  /* ─────────────────────────────────────
     5. Optimización de imágenes (muy segura)
     ───────────────────────────────────── */
  img {
    content-visibility: auto;
    contain-intrinsic-size: 300px 300px;
  }

}
@media (max-width: 767px) {
  .product-cover img {
    fetchpriority: high;
  }
}