/* COMMON */
section#wrapper {
  padding: 0 !important;
}

body#index,
body#category #wrapper {
  background-color: #f7f7f7;
}

body#product #wrapper {
  background: #f7f7f7;
  padding-top: 81px !important;
}

.em_featured-text {
  color: #2ad2c9;
}

/* HEADER */
#desktop-header #cbp-hrmenu .cbp-tab-title {
  font-weight: 600;
  white-space: nowrap;
}

#desktop-header .iqit-megamenu-container {
  width: 100%;
  max-width: 100%;
  background-color: #fff;
}
#desktop-header .col-header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 32px;
}
#desktop-header .col-header-right > * {
  margin: 0;
}
#desktop-header .col-header-right a,
#desktop-header .col-header-right .expand-more {
  font-weight: 600;
  white-space: nowrap;
}
#desktop-header .col-header-right #user_info .text-faded {
  margin: 0 4px;
}

#search_widget input {
  border: none;
  border-bottom: solid 1px #502c1e;
  padding: 5px 0 5px 2rem;
}
#search_widget .search-btn {
  left: 0;
  right: auto;
}

/* PRODUCTOS MENU (vertical menu moved into the header) */
#desktop-header-container .col-header-left {
  display: flex;
  align-items: center;
  gap: 24px;
}
#desktop-header-container .header-products-menu {
  margin-left: 0;
}
/* iqitthemeeditor/custom_s_1.css fuerza ".cbp-not-on-top #cbp-hrmenu1-ul{position:relative}"
   (ID + clase, gana a la regla absolute de iqitmegamenu/front.css). Eso deja el <ul> del
   desplegable oculto pero presente en el flujo (44px), empujando el botón "Productos" hacia
   arriba dentro de .col-header-left. Se restaura position:absolute para que vuelva a ser
   un flyout y el botón quede centrado con el logo/buscador/iconos. */
#desktop-header-container #cbp-hrmenu1-ul {
  position: absolute !important;
}
#desktop-header-container .header-products-menu .cbp-vertical-title {
  display: flex !important;
  align-items: center;
  gap: 10px;
  background-color: #502c1e !important;
  color: #fff;
  border-radius: 50px;
  padding: 12px 24px;
  line-height: normal !important;
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
}
#desktop-header-container .header-products-menu .cbp-iconbars {
  color: #fff;
  font-size: 16px;
}
#desktop-header-container .header-products-menu .cbp-vertical-title-text {
  display: inline-block !important;
  color: #fff;
}
#language_selector * {
  text-transform: capitalize;
}
#header .header-nav #iqithtmlandbanners-block-2 .rte-content {
  display: flex !important;
  flex-direction: row;
  gap: 86px;
}
#header .header-nav p {
  margin-bottom: 0;
  font-size: 16px;
  line-height: 100%;
}

/* INDEX */
.em_index-category-tab-carousel button {
  background-color: #fff;
  border-radius: 40px;
  font-size: 16px;
  color: #502c1e;
  margin-bottom: 10px;
  font-weight: 600;
}

.em_index-category-tab-carousel-categories
  > .elementor-container
  > .elementor-row {
  gap: 10px;
}

.em_index-category-cluster button {
  border-radius: 40px;
  border: 1px solid #fff;
  background-color: #502c1e;
  color: #fff;
  font-size: 16px;
  margin-bottom: 10px;
  font-weight: 600;
}

.em_index-category-cluster button:hover,
.em_index-category-cluster button:focus,
.em_index-category-cluster button:active,
.em_index-category-cluster button:focus-visible {
  background-color: #fff !important;
  color: #502c1e !important;
}

.em_index-category-cluster button.active {
  background-color: #fff !important;
  color: #502c1e !important;
}

[class*="clustertext-"],
[class*="subcatcarousel-"] {
  display: none;
}

[class*="clustertext-"].visible,
[class*="subcatcarousel-"].visible {
  display: block;
}

/* PRODUCT CAROUSEL */
.js-product-miniature-wrapper.product-carousel {
  width: 344px;
  height: 525px;
}

.js-product-miniature-wrapper .product-miniature {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.js-product-miniature-wrapper .product-functional-buttons {
  display: none;
}

.js-product-miniature-wrapper .product-flags {
  left: 10px;
  top: 10px;
  display: flex;
}

.js-product-miniature-wrapper .product-flags .product-flag {
  margin-right: 10px;
  padding: 6px 12px;
  line-height: 14px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0;
}

.js-product-miniature-wrapper .btn-product-list.add-to-cart {
  padding: 8px 14px;
  border-radius: 40px;
  font-size: 14px;
  white-space: nowrap;
}

/* =============================================
   PRECIO CON/SIN IVA EN MINIATURA (grid de categoría y carruseles)
   Misma plantilla product-miniature-1.tpl se usa en body#category y en los
   carruseles de body#index/body#product, así que un solo bloque de CSS cubre
   los dos sitios. El precio nativo (.product-price / .current-price-value) se
   conserva intacto porque paypal y advancedvatmanager dependen de esas clases;
   solo se le añade la etiqueta "con IVA" al lado y se sube el precio sin IVA
   delante, todo en una sola línea (a diferencia de la ficha de producto, que
   sí los apila en dos).
   ============================================= */
.sdi-cat-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 6px;
  row-gap: 2px;
}

.sdi-cat-price-main {
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
  color: #502c1e;
  text-decoration: none;
}

.sdi-cat-price .product-price,
.sdi-cat-price-tax-label,
.sdi-cat-price-per-unit {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: #502c1e;
}

/* =============================================
   TOUCHSPIN — Pill unificado en TODOS los contextos
   (ficha de producto, carrito, carrito lateral, listados y carruseles)
   Pill fijo 100x40 según spec de diseño (Frame 205 en Figma), antes
   aplicado solo a la miniatura y ahora generalizado a .bootstrap-touchspin
   para que se vea exactamente igual en cualquier sitio donde aparezca.
   ============================================= */

/* Contenedor de la ficha de producto: el tema padre le pone width:80px
   (pensado para el input suelto original), lo que recortaba el pill de
   100px a 80px vía su max-width heredado. */
.product-quantity .qty {
  width: 100% !important;
  height: auto !important;
}

/* Wrapper pill */
.input-group.bootstrap-touchspin,
.bootstrap-touchspin {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  flex: 0 0 100px !important;
  width: 100% !important;
  max-width: none !important;
  height: 40px !important;
  min-height: unset !important;
  align-self: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid #2ad2c9 !important;
  border-radius: 40px !important;
  overflow: hidden !important;
  background: #fff;
  box-shadow: none !important;
}

/* Botones contenedor: vuelve al flujo (anula el "block vertical" del tema) */
.bootstrap-touchspin .input-group-btn-vertical {
  display: contents !important;
}

/* Los iconos vuelven al flujo. El tema padre los saca con
   `.bootstrap-touchspin .input-group-btn-vertical i{position:absolute}`
   (pensado para el layout vertical original de touchspin); al combinarse con
   el `display:contents` de arriba se anclaban al pill en lugar de a su botón,
   dejando los botones con ancho 0 y cada chevron a una altura distinta. */
.bootstrap-touchspin .input-group-btn-vertical i,
.bootstrap-touchspin i {
  position: static !important;
  top: auto !important;
  left: auto !important;
  font-size: 14px !important;
  line-height: 1 !important;
  pointer-events: none;
  color: #2ad2c9 !important;
  display: block;
}

/* Chevrons: caja 14x14 (40 − 13 arriba − 13 abajo). El centrado vertical
   equivale a los 13px de margen del mockup. En horizontal, 23px desde la caja
   de contenido = 24px desde el borde exterior del pill (descontado el 1px
   de borde). */
.bootstrap-touchspin .bootstrap-touchspin-down {
  position: static !important;
  order: 1;
  flex: 0 0 14px !important;
  width: 14px !important;
  height: 14px !important;
  align-self: center !important;
  margin: 0 0 0 23px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 1 !important;
  z-index: 1;
}

/* Input → centro del pill */
.bootstrap-touchspin input[type="text"],
.bootstrap-touchspin input[type="number"] {
  order: 2;
  flex: 1 1 0% !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: center !important;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  color: #00ab8e !important;
  height: auto !important;
  box-shadow: none !important;
  outline: none !important;
  -moz-appearance: textfield;
}

/* Oculta flechas nativas del navegador */
.bootstrap-touchspin input[type="number"]::-webkit-outer-spin-button,
.bootstrap-touchspin input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Botón incrementar (+) */
.bootstrap-touchspin .bootstrap-touchspin-up {
  position: static !important;
  order: 3;
  flex: 0 0 14px !important;
  width: 14px !important;
  height: 14px !important;
  align-self: center !important;
  margin: 0 23px 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  height: auto !important;
  line-height: 1 !important;
}

/* Hover / focus */
.bootstrap-touchspin .bootstrap-touchspin-up:hover,
.bootstrap-touchspin .bootstrap-touchspin-up:focus,
.bootstrap-touchspin .bootstrap-touchspin-down:hover,
.bootstrap-touchspin .bootstrap-touchspin-down:focus {
  background: rgba(42, 210, 201, 0.12) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Anula estilos base de .btn-touchspin del tema */
.bootstrap-touchspin .btn-touchspin {
  border: none !important;
  background: transparent !important;
  height: auto !important;
  min-width: unset !important;
}

/* Oculta prefix/postfix vacíos */
.bootstrap-touchspin .bootstrap-touchspin-prefix,
.bootstrap-touchspin .bootstrap-touchspin-postfix {
  display: none !important;
}

/* =============================================
   LISTADO DE CATEGORÍA — rejilla
   Se pasa de la fila flex de Bootstrap a CSS Grid: así el ancho de cada
   columna descuenta los huecos por sí solo y siguen entrando 4 por fila sin
   depender de los gutters (que el tema ya traía anulados a 0).
   Se neutraliza el width de las clases col-* porque en Grid se aplicaría
   sobre la celda y encogería la ficha.
   ============================================= */
#js-product-list .products.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 10px;
  row-gap: 50px;
  margin: 0;
}

#js-product-list .products.products-grid > * {
  width: auto;
  max-width: none;
}

/* lg: 3 por fila (equivale a col-lg-4 del tema) */
@media (min-width: 992px) {
  #js-product-list .products.products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* xl: 4 por fila (equivale a col-xl-3 del tema) */
@media (min-width: 1200px) {
  #js-product-list .products.products-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* =============================================
   MINIATURA — rejilla consistente entre fichas
   Los productos de familia reciben el bloque .pgm de productgrouper (selects
   Medidas/Color + su propia fila de compra) y el módulo oculta el
   .product-add-cart nativo del tema. Los que no son familia sólo pintan el
   nativo, así que su columna de contenido es más corta y el
   `justify-content:space-between` de .product-miniature repartía ese hueco
   por encima del título, desalineándolo. Aquí cada bloque reserva su sitio.
   ============================================= */

/* Título: siempre 2 líneas (line-height 1.2 → 2.4em), con puntos suspensivos
   si el nombre no cabe. Sin esto, los nombres de 3 líneas desplazan hacia
   abajo el título de las fichas vecinas más cortas dentro de la misma fila. */
.js-product-miniature .product-title {
  height: 2.4em;
  overflow: hidden;
}

.js-product-miniature .product-title a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Selects a la misma altura que el pill de cantidad y el botón (40px).
   El padding lateral del módulo (18/34) dejaba "Capacidad" 0,4px por encima
   del ancho disponible tras estrechar las fichas para los huecos de 10px,
   así que se recorta lo justo para que quepa con holgura. */
.pgm-select {
  height: 40px;
  padding: 0 30px 0 14px;
}

/* Ficha SIN variantes: reserva el hueco que ocuparía la fila de selects
   (12px margen + 40px alto + 12px margen de .pgm-selectors), para que la fila
   de compra caiga a la misma altura que en las fichas con variantes.
   Cuando sí hay variantes este bloque está oculto y el margen es inocuo. */
.js-product-miniature .product-add-cart {
  margin-top: 64px;
}

/* Fila de compra: ancho completo y misma separación que entre los selects. */
.js-product-miniature .input-group-add-cart {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  width: 100% !important;
}

.js-product-miniature .input-group-add-cart .btn-product-list {
  flex: 1 1 auto !important;
  height: 40px !important;
}

/* Fallback "Ver" (producto sin compra directa): mismo ancho y alto. */
.js-product-miniature .product-add-cart > .btn-product-list {
  display: block;
  width: 100%;
  height: 40px;
}

/* TAB CAROUSEL */
.sdi-categories-tabs .swiper-arrows-above .swiper-button-prev {
  left: auto;
  right: 32px;
}

.sdi-categories-tabs .swiper-slide {
  margin-right: 10px;
  width: 285px !important;
  height: 400px;
}

.sdi-categories-tabs .sdi-category-item {
  width: 285px;
  height: 400px;
}

/* SDI CATEGORIES WITH TABS — category card with image + text overlay */
.sdi-categories-tabs .sdi-category-link {
  display: block;
  text-decoration: none;
}

.sdi-categories-tabs .sdi-category-img-wrapper {
  position: relative;
  width: 285px;
  height: 400px;
  margin: 0 auto;
  overflow: hidden;
  flex-shrink: 0;
}

.sdi-categories-tabs .sdi-category-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sdi-categories-tabs .sdi-category-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 20px 16px;
  box-sizing: border-box;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.35) 55%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
}

.sdi-categories-tabs .sdi-category-name {
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 32px;
  letter-spacing: 0;
  color: #fff;
  margin: 0 0 10px;
}

.sdi-categories-tabs .sdi-category-more {
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 14px;
  letter-spacing: 0;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sdi-categories-tabs .sdi-category-more i {
  font-size: 14px;
}

.sdi-categories-tabs ul.nav.nav-tabs {
  border: none;
}

.sdi-categories-tabs ul.nav.nav-tabs li.nav-item a {
  border-radius: 40px;
  font-size: 16px;
  font-weight: 600;
  padding: 11px 40px;
  opacity: 1;
  height: 41px;
  line-height: 100%;
}

.sdi-categories-tabs ul.nav.nav-tabs li.nav-item a:hover,
.sdi-categories-tabs ul.nav.nav-tabs li.nav-item a:active,
.sdi-categories-tabs ul.nav.nav-tabs li.nav-item a:focus,
.sdi-categories-tabs ul.nav.nav-tabs li.nav-item a:focus-visible,
.sdi-categories-tabs ul.nav.nav-tabs li.nav-item a.active {
  border-bottom: none;
}

/* Fila compartida: tabs a la izquierda, flechas del carousel siempre ancladas al final */
.sdi-categories-tabs-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 30px;
}

.sdi-categories-tabs-header .nav-tabs {
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
  row-gap: 10px;
}

.sdi-categories-tabs-header .nav-tabs .nav-item {
  flex: 0 0 auto;
}

.sdi-category-arrows {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  align-self: center;
}

.sdi-category-arrows-pair {
  display: none;
  align-items: center;
  gap: 8px;
}

.sdi-category-arrows-pair.active {
  display: flex;
}

.sdi-category-arrows-pair .swiper-button-prev,
.sdi-category-arrows-pair .swiper-button-next {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  margin-top: 0;
}

.card-header-tabs .nav-item,
.nav-tabs .nav-item {
  margin-right: 10px;
}

.swiper-button-prev {
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
}

.swiper-button-next {
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
}

.sdi-categories-tabs .sdi-category-arrows .sdi-category-arrows-pair {
  background: #fff;
  border-radius: 40px;
  height: 41px;
  overflow: hidden;
}

/* =============================================
   SDI PRODUCT SUBCATEGORY TABS
   Cabecera: pestañas (subcategorías) a la izquierda; a la derecha,
   por pestaña activa, botón enlace + flechas del carousel.
   ============================================= */
.sdi-product-subcategory-tabs-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.sdi-product-subcategory-tabs-header .nav-tabs {
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
  row-gap: 10px;
  border: none;
}

.sdi-product-subcategory-tabs-header .nav-tabs .nav-item {
  flex: 0 0 auto;
}

.sdi-product-subcategory-tabs ul.nav.nav-tabs li.nav-item a {
  border-radius: 40px;
  font-size: 16px;
  font-weight: 600;
  padding: 11px 40px;
  opacity: 1;
  white-space: nowrap;
}

.sdi-product-subcategory-tabs ul.nav.nav-tabs li.nav-item a:hover,
.sdi-product-subcategory-tabs ul.nav.nav-tabs li.nav-item a:active,
.sdi-product-subcategory-tabs ul.nav.nav-tabs li.nav-item a:focus,
.sdi-product-subcategory-tabs ul.nav.nav-tabs li.nav-item a:focus-visible,
.sdi-product-subcategory-tabs ul.nav.nav-tabs li.nav-item a.active {
  border-bottom: none;
}

.sdi-product-subcategory-tabs .swiper-wrapper {
  gap: 10px;
}

.sdi-product-subcategory-tabs .swiper-wrapper .swiper-slide {
  width: 344px !important;
}

.sdi-pst-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  align-self: center;
}

.sdi-pst-actions-group {
  display: none;
  align-items: center;
  gap: 12px;
}

.sdi-pst-actions-group.active {
  display: flex;
}

.sdi-pst-link {
  background-color: #2ad2c9;
  color: #fff !important;
  border-radius: 40px;
  font-size: 16px;
  font-weight: 600;
  padding: 11px 24px;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.sdi-pst-link:hover,
.sdi-pst-link:focus,
.sdi-pst-link:focus-visible {
  color: #fff !important;
  opacity: 0.9;
  text-decoration: none;
}

.sdi-pst-arrows {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 40px;
  height: 41px;
  overflow: hidden;
}

.sdi-pst-arrows .swiper-button-prev,
.sdi-pst-arrows .swiper-button-next {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  margin-top: 0;
}

.card-header-tabs,
.nav-tabs {
  margin-bottom: 0;
}
/* =============================================
   CABECERA DE CATEGORÍA (banner)
   ============================================= */
.category-banner-placeholder-no-image,
.category-banner-with-image {
  padding: 60px 0 0;
  margin: 0 0 27px;
}

.category-banner-with-image .category-banner-placeholder {
  position: relative;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  padding: 34px 34px 38px;
  overflow: hidden;
}

.category-banner-with-image .category-banner-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(35, 18, 11, 0.82) 0%,
    rgba(35, 18, 11, 0.6) 55%,
    rgba(35, 18, 11, 0.25) 100%
  );
}

.category-banner-with-image .category-banner-inner {
  position: relative;
}

.category-banner-with-image .category-banner-title h1,
.category-banner-with-image .category-banner-back {
  color: #fff;
}

.category-banner-inner .breadcrumb {
  margin: 0 0 4px;
  padding: 0;
  background: none;
}

.category-banner-inner .breadcrumb > .container,
.category-banner-inner > .container {
  width: auto;
  max-width: none;
  padding: 0;
}

.category-banner-title {
  display: flex;
  align-items: center;
  gap: 14px;
}

.category-banner-back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #502c1e;
  line-height: 0;
  transition: transform 0.18s ease;
}

.category-banner-back:hover,
.category-banner-back:focus,
.category-banner-back:focus-visible {
  color: #502c1e;
  transform: translateX(-3px);
}

.category-banner-title h1 {
  margin: 0;
  color: #502c1e;
  font-size: 40px;
  font-weight: 700;
  line-height: 40px;
}

.category-banner-description {
  position: relative;
  max-width: 980px;
  margin-top: 27px;
  color: #502c1e;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
}

.category-banner-description p {
  margin: 0;
}

.category-banner-description-text.rte-content {
  padding: 0;
}

/* Recortada a 2 líneas mientras no se expanda. */
.category-banner-description-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.category-banner-description.is-expanded .category-banner-description-text {
  display: block;
  -webkit-line-clamp: none;
  line-clamp: none;
  overflow: visible;
}

.category-banner-more {
  padding: 0;
  border: 0;
  background: none;
  color: #2ad2c9;
  font-size: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.category-banner-description:not(.is-expanded) .category-banner-more {
  position: absolute;
  right: 0;
  bottom: 0;
  padding-left: 90px;
  background: linear-gradient(90deg, rgba(247, 247, 247, 0) 0, #f7f7f7 70px);
}

.category-banner-with-image
  .category-banner-description:not(.is-expanded)
  .category-banner-more {
  background: none;
  padding-left: 8px;
}

@media (max-width: 767px) {
  .category-banner-title h1 {
    font-size: 28px;
  }

  .category-banner-title {
    gap: 10px;
  }

  .category-banner-back svg {
    width: 22px;
    height: 22px;
  }

  .category-banner-description {
    font-size: 16px;
  }
}

/* =============================================
   FACETAS
   ============================================= */
#search_filters_wrapper .block-facets,
#search_filters_wrapper .block.block-facets {
  margin: 0;
  padding: 0;
  border: 0;
}

#search_filters .facets-title {
  margin: 0;
  padding: 0 0 21px;
  border-bottom: 1px solid rgba(80, 44, 30, 0.45);
  color: #502c1e;
  font-size: 18px;
  line-height: 20px;
  font-weight: 500;
}

#search_filters .facet,
#search_filters details.facet,
#search_filters .facet:first-child {
  padding: 0;
  border-bottom: 1px solid rgba(80, 44, 30, 0.45);
}

#search_filters summary.facet-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 19px 0;
  border: 0;
  color: #502c1e;
  font-size: 20px;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
  list-style: none;
}

#search_filters summary.facet-title::-webkit-details-marker,
#search_filters summary.facet-title::marker {
  display: none;
  content: "";
}

#search_filters summary.facet-title:focus-visible {
  outline: 2px solid #2ad2c9;
  outline-offset: 2px;
}

#search_filters summary.facet-title::after {
  content: "+";
  flex: 0 0 auto;
  color: #502c1e;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

#search_filters details[open] > summary.facet-title {
  border-bottom: 1px solid rgba(80, 44, 30, 0.45);
}

#search_filters details[open] > summary.facet-title::after {
  content: "\2013";
}

/* Lista de opciones */
#search_filters .facet > ul {
  margin: 0;
  padding: 16px 0 18px;
  max-height: 320px;
  overflow-x: hidden;
  overflow-y: auto;
}

#search_filters .facet .facet-label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 9px;
}

#search_filters .facet .facet-label:last-child {
  /* margin-bottom: 0; */
}

#search_filters .facet .facet-label a {
  color: #502c1e;
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
}

#search_filters .facet .facet-label.active a,
#search_filters .facet .facet-label:hover a {
  color: #502c1e;
}

#search_filters .facet .facet-label .magnitude {
  color: #a5a5a5;
}

/* Marcas circulares tipo radio (según diseño), tanto para checkbox como radio.
   Ojo: los grupos multiselección siguen siendo multiselección; el círculo es
   solo aspecto visual. */
#search_filters .custom-checkbox,
#search_filters .custom-radio {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0;
  box-shadow: none;
}

#search_filters .custom-checkbox input[type="checkbox"],
#search_filters .custom-radio input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

#search_filters .custom-checkbox input[type="checkbox"] + span:not(.color),
#search_filters .custom-radio {
  display: block;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid #b3aaa5;
  border-radius: 50%;
  background: #fff;
  box-shadow: none;
}

/* Seleccionado: anillo turquesa + punto central, sin el check del tema. */
#search_filters
  .custom-checkbox
  input[type="checkbox"]:checked
  + span:not(.color) {
  border-color: #2ad2c9;
  box-shadow:
    inset 0 0 0 2px #fff,
    inset 0 0 0 8px #2ad2c9;
}

#search_filters
  .custom-checkbox
  input[type="checkbox"]:checked
  + span
  .checkbox-checked {
  display: none;
}

#search_filters .custom-radio input[type="radio"]:checked + span {
  width: 8px;
  height: 8px;
  background: #2ad2c9;
}

#search_filters .custom-radio:has(input[type="radio"]:checked) {
  border-color: #2ad2c9;
}

/* =============================================
   BARRA SUPERIOR DEL LISTADO (#js-product-list-top)
   ============================================= */
#js-product-list-top.products-selection {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}

#js-product-list-top > .row {
  margin: 0;
  justify-content: flex-end !important;
}

#js-product-list-top .view-switcher,
#js-product-list-top .showing,
#js-product-list-top .products-nb-per-page,
#js-product-list-top .pagination-wrapper,
#js-product-list-top .facated-toggler:empty {
  display: none !important;
}

#js-product-list-top .products-sort-order {
  display: block;
}

#js-product-list-top > .row > .col:has(.products-sort-order),
#js-product-list-top > .row > .col-auto:has(.products-sort-order) {
  padding-right: 0;
}

#js-product-list-top .products-sort-order .select-title.form-control {
  display: flex;
  align-items: center;
  min-width: 250px;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #777;
  font-size: 15px;
  line-height: 1.25;
  cursor: pointer;
}

#js-product-list-top .products-sort-order .select-title.form-control::before {
  content: "Ordenar por\00a0";
  text-transform: none;
}

#js-product-list-top .products-sort-order .select-title-name {
  text-transform: lowercase;
}

#js-product-list-top .products-sort-order .select-title .fa-angle-down {
  margin-left: auto;
  padding-left: 24px;
  color: #777;
  font-size: 16px;
}

#js-product-list-top .products-sort-order .select-title:hover,
#js-product-list-top .products-sort-order .select-title:hover .fa-angle-down {
  color: #502c1e;
}

#js-product-list-top .products-sort-order .dropdown-menu {
  right: 0;
  left: auto;
  min-width: 250px;
}

@media (max-width: 767px) {
  #js-product-list-top > .row {
    justify-content: space-between;
  }

  #js-product-list-top .products-sort-order .select-title.form-control {
    min-width: 0;
  }

  #js-product-list-top .products-sort-order .select-title .fa-angle-down {
    padding-left: 10px;
  }
}

#category nav.pagination li {
  border: none;
}
#category nav.pagination {
  margin-top: 75px;
}
#category .sdicc-clusters {
  margin: 0 0 33px;
}

/* =============================================
   FICHA DE PRODUCTO — cabecera (fase 1)
   Tres columnas: galería / información / caja de compra pegajosa.
   La plantilla es themes/envasesdelmediterraneo/templates/catalog/product.tpl.
   ============================================= */

body#product .sdi-pp-hero {
  margin-bottom: 60px;
}
body#product .product-additional-info {
  border-top: none;
}
body#product .product-grouper-associations {
  display: flex;
  align-items: center;
  gap: 85px;
}

/* ---------- Galería ---------- */

/* Tarjeta blanca con borde fino. El marco va en .images-container (no en
   .product-cover) para que la tira de miniaturas, que es hermana de la imagen
   grande, quede dentro de la tarjeta y no suelta debajo. */
body#product .sdi-pp-gallery .images-container {
  border: 1px solid #e9e9e9;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  padding: 24px;
}

/* Alto de la imagen grande: las fotos del catálogo son verticales y con mucho
   blanco, así que se acota la altura y se encaja la foto dentro sin recortar. */
body#product .sdi-pp-gallery .product-lmage-large {
  height: 420px;
}

body#product .sdi-pp-gallery .product-images-large img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Miniaturas dentro de la tarjeta, más discretas que las del tema. */
body#product .sdi-pp-gallery .js-qv-mask {
  margin-top: 16px;
}

body#product .sdi-pp-gallery .thumb-container img.thumb {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border: 1px solid #e9e9e9;
  border-radius: 8px;
  padding: 4px;
}

body#product .sdi-pp-gallery .thumb-container img.thumb.selected {
  border-color: #2ad2c9;
}

/* Flags (Pack, Sin stock…) dentro del marco, arriba a la izquierda y con la
   misma pastilla que ya usan las miniaturas. */
body#product .sdi-pp-gallery .product-flags {
  left: 16px;
  top: 16px;
  display: flex;
  gap: 10px;
  z-index: 2;
}

body#product .sdi-pp-gallery .product-flags .product-flag {
  margin: 0;
  padding: 6px 12px;
  line-height: 14px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 40px;
  display: flex;
  align-items: center;
}

/* ---------- Columna de información ---------- */

body#product .sdi-pp-header {
  border-bottom: 1px solid #000000;
  padding-bottom: 37px;
}

body#product .sdi-pp-header .page-title {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  margin: 0;
}

body#product .sdi-pp-ref {
  margin: 6px 0 0;
  font-size: 14px;
  color: #8c8c8c;
}

/* Separadores entre bloques de la columna central (variantes,
   características, descripción), como en el diseño. */
body#product .col-product-info .product-information > * {
  border-bottom: 1px solid #000000;
  padding-bottom: 23px;
}
body#product .sdi-pp-features {
  padding-top: 18px;
}
body#product .sdi-pp-block-label {
  padding-bottom: 15px;
}

body#product .col-product-info .product-information > *:last-child {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Etiqueta de cada bloque ("Características", y los <h2> que pinta
   productgrouper con el nombre de la familia). */
body#product .sdi-pp-block-label,
body#product .product-grouper-associations h2 {
  display: block;
  font-size: 16px;
  line-height: 16px;
  font-weight: 600;
  color: #502c1e;
  text-transform: none;
  letter-spacing: 0;
}

/* En la cabecera no queremos compartir en redes, tags ni el resumen de
   opiniones: vienen arrastrados dentro de .js-product-additional-info porque es
   el contenedor que PrestaShop refresca por AJAX, pero el diseño los coloca en
   otras secciones de la página. */
body#product .col-product-info .js-product-additional-info .social-sharing,
body#product .col-product-info .js-product-additional-info .product-tags,
body#product
  .col-product-info
  .js-product-additional-info
  #product-comments-additional-info {
  display: none;
}

/* ---------- Selectores de familia (productgrouper) ---------- */

/* El módulo pinta <ul class="groupul"> con <li> que traen clases col-* de
   Bootstrap y, en el eje configurado como principal (PGFEAT), un <div> con
   estilos en línea (float:left) más la miniatura del producto. Aquí se
   normalizan los dos ejes al mismo control tipo radio del diseño. */
body#product .product-grouper-associations .groupul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 12px;
  margin: 0;
  padding: 0;
  /* La lista viene flotada del módulo: al quedar fuera del flujo, la etiqueta
     del eje siguiente se montaba encima de las opciones. */
  float: none !important;
  width: 100%;
  list-style: none;
}

body#product .product-grouper-associations .groupul > li {
  width: auto;
  max-width: none;
  flex: none;
  margin: 0;
  padding: 0;
  float: none;
  list-style: none;
}

/* El eje principal (PGFEAT) envuelve la opción en un <div> con estilos en
   línea. Se saca del flujo con display:contents para que el enlace pase a ser
   hijo directo del <li> y no haya que pelear con sus márgenes ni su float. */
body#product .product-grouper-associations .groupul > li > div {
  display: contents !important;
}

/* El diseño de esta pantalla muestra los ejes como radios de texto, sin la
   miniatura del producto que el módulo saca en el eje principal. */
body#product .product-grouper-associations .climg,
body#product .product-grouper-associations .grouplinki {
  display: none !important;
}

/* Separación entre ejes (Capacidad, Color…). El primero no la necesita porque
   ya la aporta el bloque. */
body#product .product-grouper-associations .groupul + h2 {
  margin-top: 20px;
}

/* Cada opción = círculo de radio + etiqueta.
   El !important del borde es para ganarle al <style> en línea que inyecta
   productgrouper (`.selecteda{border-color:#502c1e!important}`), que si no
   dibuja un rectángulo alrededor de la opción activa. */
body#product .product-grouper-associations .grouplink {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0 !important;
  background: none;
  /* El ancla viene flotada: dejaba en altura 0 el contenedor y la etiqueta del
     eje siguiente se subía encima de las opciones. */
  float: none !important;
  font-size: 14px;
  line-height: 1.2;
  color: #502c1e;
  text-decoration: none;
}

body#product .product-grouper-associations .grouplink::before {
  content: "";
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border: 1px solid #c9c9c9;
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
}

/* Seleccionado: el módulo marca la opción activa con .selecteda. */
body#product .product-grouper-associations .grouplink.selecteda {
  font-weight: 600;
  background: none !important;
}

body#product .product-grouper-associations .grouplink.selecteda::before {
  border: 5px solid #2ad2c9;
}

body#product .product-grouper-associations .grouplink:hover::before {
  border-color: #2ad2c9;
}

/* Eje de color: el círculo se rellena con el color real. Se selecciona por el
   atributo name, que el módulo rellena con el valor de la característica, así
   no hay que tocar el módulo. Son los 10 valores dados de alta en el catálogo.
   Al ir después de la regla de .selecteda, el color gana sobre el relleno
   blanco, y el estado activo se marca con el aro exterior de box-shadow. */
body#product .product-grouper-associations .grouplink[name="Blanco"]::before {
  background: #fff;
}
body#product .product-grouper-associations .grouplink[name="Negro"]::before {
  background: #1b1b1b;
}
body#product .product-grouper-associations .grouplink[name="Gris"]::before {
  background: #b0b0b0;
}
body#product .product-grouper-associations .grouplink[name="Rojo"]::before {
  background: #d0342c;
}
body#product .product-grouper-associations .grouplink[name="Verde"]::before {
  background: #4a9c3f;
}
body#product .product-grouper-associations .grouplink[name="Azul"]::before {
  background: #2f6fb5;
}
body#product .product-grouper-associations .grouplink[name="Amarillo"]::before {
  background: #f0c419;
}
body#product .product-grouper-associations .grouplink[name="Marrón"]::before {
  background: #502c1e;
}
body#product
  .product-grouper-associations
  .grouplink[name="Transparente"]::before {
  background: linear-gradient(135deg, #fff 0 50%, #e2e2e2 50% 100%);
}
body#product
  .product-grouper-associations
  .grouplink[name="Multicolor"]::before {
  background: conic-gradient(#d0342c, #f0c419, #4a9c3f, #2f6fb5, #d0342c);
}

/* Con relleno de color el borde de 5px taparía el color, así que el
   seleccionado de los colores se marca con aro exterior. */
body#product
  .product-grouper-associations
  .grouplink.selecteda[name="Blanco"]::before,
body#product
  .product-grouper-associations
  .grouplink.selecteda[name="Negro"]::before,
body#product
  .product-grouper-associations
  .grouplink.selecteda[name="Gris"]::before,
body#product
  .product-grouper-associations
  .grouplink.selecteda[name="Rojo"]::before,
body#product
  .product-grouper-associations
  .grouplink.selecteda[name="Verde"]::before,
body#product
  .product-grouper-associations
  .grouplink.selecteda[name="Azul"]::before,
body#product
  .product-grouper-associations
  .grouplink.selecteda[name="Amarillo"]::before,
body#product
  .product-grouper-associations
  .grouplink.selecteda[name="Marrón"]::before,
body#product
  .product-grouper-associations
  .grouplink.selecteda[name="Transparente"]::before,
body#product
  .product-grouper-associations
  .grouplink.selecteda[name="Multicolor"]::before {
  border: 1px solid #c9c9c9;
  box-shadow:
    0 0 0 2px #fff inset,
    0 0 0 2px #2ad2c9;
}

/* ---------- Características ---------- */

/* Cuatro por fila, como el col-3 de la ficha de producción, pero con ancho
   acotado: a 1fr los iconos se estiraban a todo el ancho de la columna y en el
   diseño son bastante más pequeños. Si un producto tiene más de cuatro
   características con icono, envuelven a la fila siguiente. */
body#product .sdi-pp-feature-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 80px));
  justify-content: start;
  gap: 16px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Antes era un <img> que ya traía el rótulo incrustado (JPEG de producción);
   ahora el icono es un glifo de Font Awesome y el rótulo se pinta aparte, así
   que hace falta apilarlos y centrarlos. */
body#product .sdi-pp-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0;
  text-align: center;
}

body#product .sdi-pp-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 1px solid #c5c5c5;
  border-radius: 50%;
  font-size: 26px;
  color: #502c1e;
  background: #fff;
}

body#product .sdi-pp-feature-label {
  font-weight: 500;
  font-size: 11px;
  line-height: 11px;
  text-transform: capitalize;
  color: #502c1e;
}

/* ---------- Descripción corta ---------- */

body#product .col-product-info .product-description {
  font-size: 15px;
  line-height: 1.6;
}

body#product .col-product-info .product-description p:last-child {
  margin-bottom: 0;
}

/* ---------- Caja de compra ---------- */

body#product .sdi-pp-buybox {
  position: sticky;
  top: 100px;
  border: 1px solid #e9e9e9;
  border-radius: 8px;
  background: #fff;
  padding: 23px 24px 37px 30px;
}

/* El tema añade padding-top al bloque de añadir al carrito pensando en la
   columna central; dentro de la caja ya lo aporta el propio contenedor. */
body#product .sdi-pp-buybox .product-add-to-cart {
  padding-top: 12px !important;
}

/* ---------- Precio ----------
   La plantilla conserva íntegro el bloque de precios del tema (referencia,
   precio nativo con su hook custom_price, descuentos, etiqueta de impuestos…) y
   solo AÑADE el precio sin IVA que pide el diseño. La jerarquía del mockup se
   consigue aquí: lo añadido va grande y el precio nativo se queda pequeño en la
   línea de debajo. Nada se oculta salvo los textos que el diseño duplica. */
body#product .sdi-pp-buybox .product-prices {
  margin: 0;
}

/* La referencia nativa se pinta aquí porque pp_reference vale 'title', pero el
   diseño la coloca bajo el título del producto. Se deja en el DOM (iqitelementor
   la referencia) y se oculta solo en pantalla. */
body#product .sdi-pp-buybox .product-prices .product-reference {
  display: none;
}

/* Principal: precio sin IVA (elemento añadido). */
body#product .sdi-pp-price-main {
  display: block;
  font-size: 24px;
  font-weight: 700;
  line-height: 20px;
  color: #502C1E;
}

/* Precio nativo, ahora en secundario. Mantiene sus clases .current-price y
   .current-price-value intactas: paypal lee de ahí el importe para el banner de
   pago a plazos y advancedvatmanager inyecta ahí su precio. */
body#product .sdi-pp-buybox .current-price,
body#product .sdi-pp-price-tax-label-incl,
body#product .sdi-pp-price-per-unit {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: #8c8c8c;
}

body#product .sdi-pp-buybox .current-price .product-price {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

/* El precio por unidad va al final de la misma línea. */
body#product .sdi-pp-price-per-unit {
  margin-left: 12px;
}

body#product .sdi-pp-buybox .tax-shipping-delivery-label {
  font-size: 13px;
  color: #8c8c8c;
}

/* El texto nativo de impuestos lo dicen ya los rótulos "+ IVA" / "con IVA" del
   diseño. Se oculta solo ese span; el contenedor sigue visible porque dentro
   cuelgan los hooks de módulos y la información de entrega. */
body#product .sdi-pp-buybox .sdi-pp-native-tax-label {
  display: none;
}

body#product .product_p_price_container {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

body#product .sdi-pp-buybox .tax-shipping-delivery-label:empty {
  display: none;
}

/* La tabla nativa de descuentos por cantidad se conserva en el markup pero el
   diseño la sustituye por los tramos del módulo sdiquantitydiscount. */
body#product .sdi-pp-buybox .table-product-discounts {
  display: none;
}

/* Fila de cantidad. La plantilla mantiene el orden del tema padre —cantidad,
   botón de carrito y después las columnas que inyecta iqitwishlist por hook—, así
   que el orden del diseño (cantidad y corazón arriba, carrito a ancho completo
   debajo) se consigue reordenando con flexbox en vez de mover el markup. El pill
   de cantidad ya viene unificado del bloque TOUCHSPIN de más arriba. */
body#product .sdi-pp-buybox .product-quantity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
}

body#product .sdi-pp-buybox .product-quantity > .col,
body#product .sdi-pp-buybox .product-quantity > div {
  flex: 0 0 auto;
  width: calc(50% - 6px);
  max-width: none;
  padding: 0;
  margin: 0;
}

body#product .sdi-pp-buybox .col-add-qty {
  order: 1;
}

body#product .sdi-pp-buybox .col-add-wishlist {
  order: 2;
}

/* El botón baja a su propia línea, a ancho completo. */
body#product .sdi-pp-buybox .col-add-btn {
  order: 3;
  width: 100% !important;
}

/* Corazón: pastilla del mismo alto y trazo que la de cantidad, en vez del
   relleno sólido que trae del tema. Es el único botón icónico de la caja: el
   comparador (iqitcompare) está desactivado y el diseño no le reserva sitio. */
body#product .sdi-pp-buybox .col-add-wishlist .btn {
  width: 100%;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 40px;
  background: #fff;
  border: 1px solid #2ad2c9;
  color: #2ad2c9;
}

body#product .sdi-pp-buybox .col-add-wishlist .btn:hover {
  background: rgba(42, 210, 201, 0.12);
  border-color: #2ad2c9;
  color: #2ad2c9;
}

/* Añadir al carrito: ancho completo, pastilla, color de marca. */
body#product .sdi-pp-buybox .col-add-btn .add {
  width: 100%;
}

body#product .sdi-pp-buybox .add-to-cart {
  width: 100%;
  height: 48px;
  border-radius: 40px;
  background-color: #2ad2c9;
  border-color: #2ad2c9;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

body#product .sdi-pp-buybox .add-to-cart:hover:not(:disabled),
body#product .sdi-pp-buybox .add-to-cart:focus:not(:disabled) {
  background-color: #00ab8e;
  border-color: #00ab8e;
  color: #fff;
}

/* Reclamos de envío al pie de la caja. */
body#product .sdi-pp-claims {
  margin: 16px 0 0;
  list-style: none;
  font-size: 12px;
  line-height: 12px;
  color: #502c1e;
  font-weight: 600;
}

body#product .sdi-pp-claims li + li {
  margin-top: 4px;
}

/* Los banners que pinte el theme editor en la tercera columna quedan fuera de
   la tarjeta, debajo. */
body#product .col-product-buybox > div:not(.sdi-pp-buybox) {
  margin-top: 20px;
}

/* ---------- Responsive ---------- */

/* Por debajo de lg la caja de compra pasa a ancho completo y deja de ser
   pegajosa: apilada no tiene recorrido de scroll dentro de su columna. */
@media (max-width: 991px) {
  body#product .sdi-pp-buybox {
    position: static;
    margin-top: 24px;
  }
}

@media (max-width: 767px) {
  body#product .sdi-pp-hero {
    margin-bottom: 40px;
  }

  body#product .product-grouper-associations .groupul {
    grid-template-columns: repeat(2, 1fr);
  }
}