/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */



html,
body {
  font-family: 'Axiforma', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Axiforma', inherit;
}

html,
body {
  font-variant-ligatures: none;
  -webkit-font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0, "calt" 0;
  text-rendering: optimizeSpeed;
  /* evita forzar ligaduras */
}


/* Bloque base: asegura que el overlay pueda posicionarse bien */
.luz-invertida1 .elementor-image {
  position: relative;
  display: inline-block;
  /* mantiene el tamaño del <img> */
  overflow: hidden;
  /* respeta bordes redondeados si los hubiera */
}

/* Overlay con la imagen de hover */
.luz-invertida1 .elementor-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/img/cms/DKo-HOME-Pro-Design-2.jpg') center/cover no-repeat;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  /* no bloquea clics */
  z-index: 1;
}

/* Al pasar el mouse (o tap en mobile) muestra la imagen nueva */
.luz-invertida1:hover .elementor-image::after,
.luz-invertida1:active .elementor-image::after {
  opacity: 1;
}

/* (Opcional) evita que el <img> salte de tamaño */
.luz-invertida1 .elementor-image img {
  display: block;
  width: 100%;
  height: auto;
}




/* Bloque base: asegura que el overlay pueda posicionarse bien */
.luz-invertida2 .elementor-image {
  position: relative;
  display: inline-block;
  /* mantiene el tamaño del <img> */
  overflow: hidden;
  /* respeta bordes redondeados si los hubiera */
}

/* Overlay con la imagen de hover */
.luz-invertida2 .elementor-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/img/cms/luz-cambiada2b.jpg') center/cover no-repeat;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  /* no bloquea clics */
  z-index: 1;
}

/* Al pasar el mouse (o tap en mobile) muestra la imagen nueva */
.luz-invertida2:hover .elementor-image::after,
.luz-invertida2:active .elementor-image::after {
  opacity: 1;
}

/* (Opcional) evita que el <img> salte de tamaño */
.luz-invertida2 .elementor-image img {
  display: block;
}

/* Banner Campaña Izquierdo */
.banner-campana-izquierdo .elementor-image {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.banner-campana-izquierdo .elementor-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/img/cms/banner-campana-izq-hover.jpg') center/cover no-repeat;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 1;
}

.banner-campana-izquierdo:hover .elementor-image::after,
.banner-campana-izquierdo:active .elementor-image::after {
  opacity: 1;
}

.banner-campana-izquierdo .elementor-image img {
  display: block;
}

width: 100%;
height: auto;
}

/* id de uno */
/* #mobile-header{


  }

  #mobile-header #mobile-header-sticky {
    background: #283a5a;
  }


  stuck stuck-down
  mobile-header-sticky */


/* Suaviza el cambio */
#mobile-header-sticky {
  transition: background-color .25s ease, box-shadow .25s ease;
}

/* Estado inicial (scroll 0): SIN clases => transparente */
#mobile-header-sticky:not(.stuck):not(.stuck-down) {
  background-color: rgb(40, 58, 90, 0) !important;

}

/* Estado con scroll: cuando el tema agrega las clases */
#mobile-header-sticky.stuck.stuck-down {
  background: #283a5a !important;
  /* azul sólido, cambialo si querés */

}

#mobile-header {
  background: rgb(40, 58, 90, 0) !important;
  border-bottom: 0;
}


.nav-tabs .nav-link.active {

  border-bottom: solid 3px #283a5a !important;
}

.nav-tabs .nav-link:hover {

  border-bottom: solid 3px #283a5a !important;
}


.elementor-element.elementor-element-pxl81gx .nav-tabs {
  justify-content: right !important;
}



/* Quitar la línea inferior global de las tabs */
.nav-tabs {
  border-bottom: 0 !important;
}

/* Estado base: sin bordes, pill-ready */
.nav-tabs .nav-link {
  border: 0 !important;
  border-radius: 9999px;
  /* forma de píldora */
  padding: 10px 10px 14px 10px;
  /* ajustá al gusto */
  background: transparent !important;
  color: #283a5a;
  opacity: 1;
  /* como en tu referencia */
  /* transition: all .2s ease; */
  font-weight: 500 !important;
  font-size: 15px;
}

/* Hover/focus en no-activa */
/* .nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  opacity: .85;
  text-decoration: none;
} */

/* ACTIVA: “globito” con borde */
.nav-tabs .nav-link.active {
  opacity: 1;
  border: 2px solid #283a5a !important;
  background: transparent !important;
  /* o #fff según tu fondo */
  color: #283a5a !important;
  box-shadow: none;
  font-weight: 500 !important;
  font-size: 15px;
}

/* Separación entre tabs (opcional) */
.nav-tabs .nav-item {
  margin-right: 2rem;
}

/* ajustá el gap */

.nav-tabs .nav-link:hover {
  /* border-bottom: 0 !important; */
}

/* No cambies nada de la activa al hacer hover */
.nav-tabs .nav-link.active:hover {
  border: 2px solid #283a5a !important;
  /* lo que ya usás para el pill */
  border-bottom-color: #283a5a !important;
  /* por si el tema mete color por defecto */
}

/* En las NO activas, anulá el subrayado en hover/focus */
.nav-tabs .nav-link:not(.active):hover,
.nav-tabs .nav-link:not(.active):focus {
  border-bottom: 0 !important;
  border-color: transparent !important;
  /* Bootstrap suele setear border en hover */
  box-shadow: none !important;
  /* por si el tema usa sombra como “línea” */
  background: transparent !important;
  /* evita “blanqueo” si la regla de hover pinta fondo */
  font-weight: 500 !important;
  font-size: 15px;
}

/* Si el tema dibuja la línea con ::after (algunas skins), apagalo también */
.nav-tabs .nav-link:not(.active):hover::after,
.nav-tabs .nav-link:not(.active):focus::after {
  content: none !important;
  border: 0 !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  font-size: 15px;
}





/*fooooter*/

#footer-container-first {
  display: none !important;
}

/* ===== Footer Brand Strip ===== */
#footer-brand-strip {
  padding-top: 20px;
  padding-bottom: 10px;
  margin-left: 20px;
  margin-right: 20px;
}

/* Logo */
#footer-brand-strip .footer-logo img {
  max-width: 253px;
  /* ajustá si lo necesitás más grande/chico */
}

/* Grid imágenes de tiendas */
.footer-stores-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 991px) {
  .footer-stores-grid {
    grid-template-columns: 1fr;
  }
}

/* Tarjeta de tienda con overlay + botón pill */
.store-card {
  position: relative;
  display: block;
  border-radius: 8px;
  overflow: hidden;
  background: #1f2c45;
  /* fallback si no carga imagen */
}

.store-card img {
  width: 100%;
  height: 140px;
  /* ajustá a tu alto deseado */
  object-fit: cover;
  display: block;
  filter: brightness(.95);
  transition: transform .25s ease, filter .25s ease;
}

.store-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .25);
  opacity: 0;
  transition: opacity .25s ease;
}

.store-card .store-cta {
  position: absolute;
  left: 1%;
  bottom: 30%;
  padding: 8px 16px;
  border-radius: 9999px;
  background: #ffffff;
  color: #283a5a;
  border: 2px solid #ffffff;
  font-weight: 600;
  line-height: 1;
  opacity: 0;
  transform: translateY(6px);
  transition: all .25s ease;
  white-space: nowrap;
}

.store-card:hover img {
  transform: scale(1.02);
  filter: brightness(.85);
}

.store-card:hover::after {
  opacity: 1;
}

.store-card:hover .store-cta {
  opacity: 1;
  transform: translateY(0);
}

/* Redes compactas alineadas a la derecha */
.footer-social-compact {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
  margin-bottom: 5px;
}

.footer-social-compact a {
  opacity: .9;
}

.footer-social-compact a:hover {
  opacity: 1;
}

/* Línea divisoria superior antes de copyrights (si querés reforzarla) */
#footer-container-main .container,
#footer-brand-strip .container {
  border-bottom: 1px solid rgba(255, 255, 255, .2);
}

#footer-container-main {
  margin-left: 20px;
  margin-right: 20px;
}

/* ===== Columna de contactos (footer) ===== */
.footer-contacts {
  display: grid;
  gap: 14px;
}

.fc-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  /* icono + textos */
  gap: 14px;
  align-items: center;
  text-decoration: none !important;
  color: #dfe6f0;
  /* texto claro */
}

.fc-icon {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .18);
  /* cuadrado oscuro como en el render */
  display: grid;
  place-items: center;
  color: #e9eef6;
  /* color del trazo del ícono */
}

.fc-icon svg {
  width: 26px;
  height: 26px;
  display: block;
}

.fc-text {
  line-height: 1.15;
}

.fc-line1 {
  font-size: 13px;
  opacity: .85;
}

.fc-line2 {
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
}

.fc-item:hover .fc-icon {
  background: rgba(0, 0, 0, .26);
}

.fc-item:hover .fc-line2 {
  text-decoration: underline;
}

/* Responsive: separaciones */
@media (max-width: 991.98px) {
  .fc-item {
    grid-template-columns: 48px 1fr;
  }

  .fc-icon {
    width: 48px;
    height: 48px;
  }

  .fc-icon svg {
    width: 22px;
    height: 22px;
  }

  .fc-line2 {
    font-size: 15px;
  }
}




/* 1) El contenedor que envuelve la imagen + tabs debe ser relativo */
.tags-tabs {
  position: relative;
}

/* 2) Solo las nav-tabs dentro de esa sección se posicionan sobre la imagen */
.tags-tabs .nav.nav-tabs {
  position: absolute;
  right: 4%;
  bottom: 5%;
  /* equivalente a top: 88%, pero más robusto */
  color: #fff;
  z-index: 5;
  /* por encima de la imagen */
}

/* (Opcional) estilito pill como acordamos antes */
.tags-tabs .nav-tabs {
  border-bottom: 0;
}

.tags-tabs .nav-tabs .nav-link {

  color: #fff;

}

.tags-tabs .nav-tabs .nav-link.active {

  color: #fff !important;
  border: 2px solid #fff !important;
}

/* Responsive: en mobile bajalas al centro y con fondo para legibilidad */
@media (max-width: 767px) {
  .tags-tabs .nav.nav-tabs {
    left: 50%;
    right: auto;
    bottom: 8%;
    transform: translateX(-50%);
  }

  .tags-tabs .nav-tabs .nav-link {
    background: rgba(0, 0, 0, .45);
  }

  .tags-tabs .nav-tabs .nav-link.active {
    background: #fff;
    color: #283a5a;
  }
}



/* pagina de producto */

/* --- Utilidad para romper el container y ocupar todo el viewport --- */
.fullbleed {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}

/* --- Banner base --- */
.product-wide-banner {

  padding: 60px 0;
  /* respira arriba/abajo si usás <img> */
}

/* Variante con <img> */
.product-wide-banner img {
  display: block;
  width: 100%;
  height: auto;
  /* mantiene proporción */
  object-fit: cover;
  /* por si recorta en pantallas raras */
}


/* Separación con el contenido de producto */
.product-wide-banner {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Responsive fino */
@media (max-width: 768px) {
  .product-wide-banner {
    padding: 12px 0;
  }

  .product-wide-banner.is-bg {
    min-height: 110px;
  }
}



/*productos relacionados*/

/* Centrar y estilizar el título de Productos Relacionados */
.page-product .product-accessories.block.block-section .section-title {
  text-align: center;
  color: #283a5a !important;
  /* cambia aquí el color */
  font-weight: 500 !important;
  font-size: 25px !important;
  letter-spacing: .2px;
  /* opcional */
  margin: 5px 0 16px;
  /* separaciones */
}

/* Si el tema dibuja una línea decorativa a la izquierda, la anulamos */
.page-product .product-accessories.block.block-section .section-title::before,
.page-product .product-accessories.block.block-section .section-title::after {
  content: none !important;
}

/* Si el título es un h3/h2 dentro de .section-title, forzamos el centrado/color también */
.page-product .product-accessories.block.block-section .section-title h2,
.page-product .product-accessories.block.block-section .section-title h3 {
  text-align: inherit;
  color: inherit;
  margin: 0;
}



/* Sólo en la sección de relacionados */
.product-accessories.block.block-section .related-titlewrap {
  text-align: center;
  margin: 8px 0 18px;
}

/* Kicker (categoría) arriba del título */
.product-accessories.block.block-section .related-kicker {
  margin: 0 0 4px;
  font-size: 14px;
  color: #b8c3d4;
  /* gris azulado suave */
  letter-spacing: .2px;
  text-transform: capitalize;
}

.js-mobile-menu__tab-title {

  text-transform: none !important;
  text-transform: none !important;
  font-weight: 500;
}

.mobile-menu__link {
  text-transform: none !important;
}

#wrap {
  padding: 5% !important;
}


/* Responsive: <= 1067px */
@media (max-width: 1067px) {

  .elementor-element.elementor-element-a5tzxzb {

    padding: 0px !important;
  }


  .titulo-tabs {

    padding-bottom: 50px;

  }

  .elementor-element.elementor-element-pxl81gx .nav-tabs {
    justify-content: center !important;
  }

  .tags-tabs .nav.nav-tabs {

    position: relative;


  }

  .nav-tabs .nav-link {
    color: #283a5a !important;
  }

  .tags-tabs .nav-tabs .nav-link.active {
    background: #fff;
    color: #000 !important;
  }

}



/* ===== Solo en /contacto (body id="contact") ===== */

/* Asegurar que el wrapper esté centrado */
body#contact #inner-wrapper.container {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Centrar la columna del formulario (sin tocar el grid global) */
body#contact .page-content .col-sm-8 {
  float: none !important;
  /* BS3: desactiva el float de la col */
  margin-left: auto !important;
  /* centra horizontalmente */
  margin-right: auto !important;
  max-width: 760px;
  /* ancho cómodo en desktop */
}

/* Si querés forzar centrado del bloque usando flex SOLO en esta página: */
body#contact .page-content .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* centra hijos (la .col-sm-8) */
}

/* Título centrado solo en la página de contacto */
body#contact .page-header .page-title {
  text-align: center;
}

/* (Opcional) Botón "Enviar" centrado */
body#contact .contact-form .form-footer {
  text-align: center !important;
}



.tab-home1 .product-miniature {

  box-shadow: 0 0 0 15px #fff !important;
}

.destacados-mes .product-miniature {

  box-shadow: 0 0 0 15px #fff !important;
}



#search_center_filter_toggler {

  background: #283a5a !important;
  color: #fff;

}

.footer-social-compact {
  display: flex;
  justify-content: left !important;
  margin-top: 12px;
  margin-bottom: 5px;
}

.bubble_wsp .wsp-icon {

  width: 3.20rem !important;

}

.busca-espacio {
  position: relative;
  top: -2%;
}

.tc-tabs .tc-link {
  color: #283a5a !important;
  font-size: 17px;
  font-weight: 500 !important;
}

.tc-tabs .tc-name {
  font-weight: 500 !important;
}

#blog_for_prestashop_column .post-additional-info {
  display: none !important;
}

#blog_for_prestashop_column {
  background-color: #fff !important;
}

#blog_for_prestashop_column .product-content {
  padding-bottom: 15px;
}







/* ===== Blog grid: card limpia con imagen cuadrada y overlay ===== */

/* 1) Reset visual de la card del módulo */
.simpleblog__listing__post__wrapper.cardblog.post-item {
  position: relative;
  border: 0;
  box-shadow: none;
  background: transparent;
  overflow: hidden;
  /* recorta overlay */
  border-radius: 14px;
  /* radios suaves como el render */
}

/* 2) El contenedor de la imagen: FORZAR CUADRADO */
.simpleblog__listing__post__wrapper a[href].simpleblog__listing__post__wrapper__image {
  position: relative;
  display: block;
  width: 100%;
  /* método compatible (fallback): */
  height: 0;
  padding-top: 100%;
  /* 100% => 1:1 */
  overflow: hidden;
  border-radius: 14px;
}

/* Si el navegador soporta aspect-ratio, mejor: */
@supports (aspect-ratio: 1 / 1) {
  .simpleblog__listing__post__wrapper a[href].simpleblog__listing__post__wrapper__image {
    height: auto;
    padding-top: 0;
    aspect-ratio: 1/1;
  }
}

/* La imagen se adapta y cubre */
.simpleblog__listing__post__wrapper__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
  transition: transform .5s ease;
}

/* Pequeño zoom al hover */
.simpleblog__listing__post__wrapper:hover .simpleblog__listing__post__wrapper__image img {
  transform: scale(1.06);
}

/* 3) Overlay con contenido que sube desde abajo — ahora BLANCO y texto azul */
.simpleblog__listing__post__wrapper .simpleblog__listing__post__wrapper__content.card-block {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  /* antes: gradiente oscuro */
  color: #283a5a;
  /* antes: #fff */
  padding: 16px 18px 18px;
  transform: translateY(100%);
  /* oculto abajo */
  transition: transform .45s ease;
  min-height: 42%;
  pointer-events: none;
  /* deja clickeable la imagen/link */
  box-shadow: 0 -1px 0 rgba(0, 0, 0, .06), 0 -8px 24px rgba(0, 0, 0, .06);
  /* sutil separación */
}

/* Aparece al hover (igual que antes) */
.simpleblog__listing__post__wrapper:hover .simpleblog__listing__post__wrapper__content.card-block {
  transform: translateY(0);
  pointer-events: auto;
}

/* Título y excerpt dentro del overlay — azul */
.simpleblog__listing__post__wrapper .simpleblog__listing__post__wrapper__content.card-block h3,
.simpleblog__listing__post__wrapper .simpleblog__listing__post__wrapper__content.card-block .post-title {
  margin: 0 0 .35rem;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 700;
  color: #283a5a;
  /* antes: #fff */
}

.simpleblog__listing__post__wrapper .simpleblog__listing__post__wrapper__content.card-block p {
  margin: 0;
  color: #283a5a;
  /* antes: #e9edf3 */
  font-size: 14px;
  line-height: 1.4;
}

/* Links dentro del overlay — azul con subrayado sutil */
.simpleblog__listing__post__wrapper .simpleblog__listing__post__wrapper__content.card-block a {
  color: #283a5a;
  text-decoration: none;
  border-bottom: 1px solid rgba(40, 58, 90, .25);
}

.simpleblog__listing__post__wrapper .simpleblog__listing__post__wrapper__content.card-block a:hover {
  border-bottom-color: #283a5a;
}

/* 4) Ocultar elementos que sobran fuera del overlay (categorías, tags, meta) */
.simpleblog__listing__post__wrapper .simpleblog__listing__post__wrapper__content+.post-meta,
.simpleblog__listing__post__wrapper .post-meta,
.simpleblog__listing__post__wrapper .simpleblog__listing__post__wrapper__content~* {
  display: none !important;
}

/* 5) Accesibilidad: si el usuario prefiere menos movimiento, sin animación */
@media (prefers-reduced-motion: reduce) {

  .simpleblog__listing__post__wrapper .simpleblog__listing__post__wrapper__content.card-block,
  .simpleblog__listing__post__wrapper__image img {
    transition: none;
  }
}


/* === Imagen VERTICAL (4:5) usando el <a> inicial como contenedor === */
.simpleblog__listing__post__wrapper>a:first-child {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-top: 105%;
  /* fallback 4:5 */
  overflow: hidden;
  border-radius: 14px;
}

/* Si hay clase __image en algunos casos, que use lo mismo */
.simpleblog__listing__post__wrapper a.simpleblog__listing__post__wrapper__image {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-top: 125%;
  overflow: hidden;
  border-radius: 14px;
}

/* Usar aspect-ratio cuando el navegador lo soporte */
@supports (aspect-ratio: 4 / 5) {

  .simpleblog__listing__post__wrapper>a:first-child,
  .simpleblog__listing__post__wrapper a.simpleblog__listing__post__wrapper__image {
    height: auto;
    padding-top: 0;
    aspect-ratio: 4/5;
  }
}

/* Foto centrada con un “zoom” base para llenar bien el portrait */
.simpleblog__listing__post__wrapper>a:first-child img,
.simpleblog__listing__post__wrapper a.simpleblog__listing__post__wrapper__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  /* centro levemente arriba; ajustá 40–60% si hace falta */
  transform: scale(1);
  transition: transform .5s ease;
}

.simpleblog__listing__post__wrapper:hover>a:first-child img,
.simpleblog__listing__post__wrapper:hover a.simpleblog__listing__post__wrapper__image img {
  transform: scale(1);
}

/* Overlay: que no cubra tanto */
.simpleblog__listing__post__wrapper .simpleblog__listing__post__wrapper__content.card-block {
  min-height: 34%;
  /* antes 42%. Probá 32–38% según el texto */
}


@media (max-width:768px) {
  .simpleblog__listing__post__wrapper .simpleblog__listing__post__wrapper__content.card-block {
    min-height: 40%;
  }
}

.btn-blog {
  margin-top: -3%;
}

.elementor-element.elementor-element-3iqv146 .elementor-button {
  border-color: #283a5a !important;
}




/* Stacking del precio debajo del título en las cards de listado */
.products .product-miniature .row.extra-small-gutters {
  display: flex;
  flex-wrap: wrap;
  /* permite que la segunda col baje */
  align-items: flex-start;
}

/* Columna izquierda (categoría, título, ref) ocupa todo el ancho */
.products .product-miniature .row.extra-small-gutters>.col {
  order: 1;
  flex: 0 0 100%;
  max-width: 100%;
}

/* Columna derecha (precio) abajo y full-width */
.products .product-miniature .row.extra-small-gutters>.product-miniature-right {
  order: 2;
  flex: 0 0 100% !important;
  max-width: 100% !important;
  text-align: left;
  /* alinear precio a la izquierda */
  margin-top: .25rem;
}

/* Ajustes finos */
.products .product-miniature .product-title {
  margin-bottom: .2rem;
}

.products .product-miniature .product-price-and-shipping {
  margin-top: .1rem;
}








/* ===== Facetas – layout general ===== */
#search_filters {
  display: grid;
  gap: 28px;
}

@media (min-width: 768px) {
  #search_filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1150px) {
  #search_filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

#search_filters .facet {
  background: #fff;
  border: 1px solid #e9edf3;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 2px 10px rgba(25, 35, 58, .05);
}

/* Títulos */
#search_filters .facet-title {
  margin: 15px 0 14px;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  color: #1f2a44;
}

/* ===== Listado de opciones como "chips/cards" ===== */
#search_filters .facet-type-checkbox {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 576px) {
  #search_filters .facet-type-checkbox {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#search_filters .facet-label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  border: 1px solid #e6eaf2;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: .2s ease-in-out;
}

#search_filters .facet-label:hover {
  border-color: #c9d6ef;
  box-shadow: 0 2px 8px rgba(31, 42, 68, .06);
}

/* Checkbox “custom” */
#search_filters .custom-checkbox {
  position: relative;
  width: 22px;
  height: 22px;
}

#search_filters .custom-checkbox input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

#search_filters .custom-checkbox .ps-shown-by-js {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #b8c3da;
  border-radius: 6px;
  background: #fff;
}

#search_filters .custom-checkbox .checkbox-checked {
  display: none;
}

/* Texto + badge */
#search_filters .facet-label>a {
  flex: 1 1 auto;
  text-decoration: none;
  color: #1f2a44;
  font-weight: 600;
}

#search_filters .facet-label .magnitude {
  margin-left: 8px;
  padding: .1rem .45rem;
  border-radius: 999px;
  /* background:#eef2fb;
  color:#55658a; */
  font-size: 12px;
  font-weight: 700;
}

/* ===== Estado seleccionado (usa :has, soportado por navegadores modernos) ===== */
#search_filters .facet-label:has(input:checked) {
  border-color: #2f66ff;
  background: #eef3ff;
  box-shadow: 0 0 0 3px rgba(47, 102, 255, .12);
}

#search_filters .facet-label:has(input:checked) .custom-checkbox .ps-shown-by-js {
  border-color: #2f66ff;
  background: #2f66ff;
}

#search_filters .facet-label:has(input:checked) .checkbox-checked {
  display: block;
  color: #fff;
  font-size: 12px;
  line-height: 1;
}

/* ===== Modo “drawer” mobile ===== */
@media (max-width: 991.98px) {

  /* contenedor */
  #search_filters_wrapper {
    border-radius: 16px 16px 0 0;
    background: #fff;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, .18);
  }

  /* barra de acciones del core (ya existe en tu HTML) */
  #search_filter_controls {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    gap: 10px;
    background: #ffffffcc;
    backdrop-filter: saturate(180%) blur(8px);
    padding: 12px 16px;
    margin-top: 14px;
    border-top: 1px solid #e9edf3;
  }

  #search_filter_controls .btn {
    flex: 1 1 0;
    border-radius: 999px;
    font-weight: 700;
  }

  #search_filter_controls .btn.btn-secondary {
    background: #f1f4fb;
    color: #1f2a44;
    border: 1px solid #e6eaf2;
  }

  #search_filter_controls .btn.ok {
    background: #2f66ff;
    border-color: #2f66ff;
  }
}

/* Detalles visuales */
#facets_search_center {
  background: #f6f8fc;
  padding: 14px;
  border-radius: 18px;
}

.block-facets {
  background: transparent;
  border: 0;
}

/* 
#facets_search_center #search_filters .facet {
  padding-top: 15px !important;
} */


#back-to-top {
  bottom: 109px !important;
}


/* .block-categories li, .product-miniature-default, .product-miniature-default .thumbnail-container {
  position: relative;
  height: 310px;
} */




.product-miniature-grid {
  font-weight: 700;
}

/* Ocultar transporte en el carrito lateral */
#cart-subtotal-shipping-blockcart {
  display: none !important;
}