/* ============================ ÍNDICE ============================ */
/* 
Theme
- Botones estándar
- Botones con borde negro
- Breadcrumbs

Header
- Menú (estilos cuando está scrolled)
- Topbar (estilos cuando está scrolled)

Contacto
- Puntos de venta (acordeón responsive)

Modales
- Botones de características/ingredientes
- Modal general (estructura base)
- Modal de ingredientes (lista)
- Modal de características (cards)
*/

/*============================ 404 ============================*/
#pagenotfound .wrapper {
  padding: 0;
}

/*============================ REGISTRO ============================*/
.stsb_registration_form .elementor-field-group-login {
  display: flex;
  justify-content: center;
  font-size: 20px;
  line-height: 1.2em;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05rem;
  margin-bottom: 40px;
}

.stsb_registration_form .elementor-field-group-login a {
  color: #3d3d3d;
}

.stsb_registration_form .elementor-field-group-login a span {
  color: #9e9c9c;
  text-decoration: underline;
}

.stsb_registration_form .elementor-field-group .elementor-field-textual {
  padding: 0 0 10px 0;
  margin-bottom: 24px;
}

.stsb_registration_form .elementor-field-type-checkbox label span,
.stsb_registration_form .stsb-show-password {
  display: none;
}

.stsb_registration_form .elementor-field-type-checkbox {
  margin-bottom: 20px;
}

/*============================ THEME ============================*/

/* Botones - Estándar */
/* Estilos base para todos los botones de Elementor */
.elementor-widget-button a {
  font-size: 18px !important;
  line-height: 100%;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase !important;
  min-height: 54px;
  display: flex;
  align-items: center;
  width: max-content;
  border-radius: 50px !important;
  padding: 5px 40px;
  justify-content: center;
}

/* Botones - Borde negro xs */
/* Botones con estilo de borde negro y fondo transparente */
.elementor-element.elementor-button-danger .elementor-button {
  padding-left: 30px;
  padding-right: 30px;
  border: 1px solid #0d1c2d;
  color: #0d1c2d;
  font-weight: 700;
  background-color: transparent;
}

div[data-elementor-type="sidecart"] {
  z-index: 10000;
}

.product-right-column:has(.modal.open) {
  z-index: 1050;
}

/* Responsive: Botones borde negro en móvil */
@media (max-width: 992px) {
  .elementor-element.elementor-button-danger .elementor-button {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 14px !important;
  }

  .filter-buttons .elementor-element.elementor-button-danger .elementor-button {
    min-height: 37px;
    padding-left: 12px;
    padding-right: 12px;
   
  }

  .filter-buttons .elementor-element.elementor-button-danger .elementor-button .elementor-button-text{
    font-size: 14px !important;
  }
}

/* Breadcrumbs */
/* Estilos para la navegación de migas de pan */
.elementor-widget-stbreadcrumb ul {
  padding: 0 30px;
  min-height: 38px;
  border-radius: 50px;
  border: 1px solid #9e9c9c;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02rem;
  gap: 10px;
  color: #9e9c9c;
}

/* Enlaces de breadcrumbs */
.elementor-widget-stbreadcrumb ul a {
  color: #0d1c2d;
}

@media (max-width: 992px) {
  .elementor-widget-stbreadcrumb ul {
    flex-wrap: nowrap;
    gap: 4px;
  }

  .elementor-widget-stbreadcrumb ul a {
    white-space: nowrap;
  }

  .stsb_breadcrumb {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    /* separación para que la barra quede “despegada” del contenido */
    padding-bottom: 8px;

    /* Firefox: barra fina */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.35) transparent;
  }

  .stsb_breadcrumb_ul {
    flex-wrap: nowrap !important;
    white-space: nowrap;
    width: max-content;
  }

  /* Chrome / Edge / Safari (desktop y algunos Android) */
  .stsb_breadcrumb::-webkit-scrollbar {
    height: 1px; /* <- el alto que quieres */
  }

  .stsb_breadcrumb::-webkit-scrollbar-track {
    background: transparent;
    margin-top: 0; /* no afecta en X, pero lo dejo neutro */
    margin-bottom: 0;
  }

  .stsb_breadcrumb::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.35);
    border-radius: 999px;
  }

  /* opcional: que al tocar no seleccione texto */
  .stsb_breadcrumb * {
    user-select: none;
  }
}

/*============================ FOOTER ============================*/

footer
  .elementor-widget-footer-list
  .elementor-widget-container
  .stsb_accordion.stsb_expanded
  .stsb_accordion_content {
  padding-top: 15px;
}

/*============================ HEADER ============================*/

/* Menú */
/* Estilos del menú cuando el header tiene la clase 'scrolled' */
body#cart .scrolled,
body#product .scrolled,
body#checkout .scrolled,
body#authentication .scrolled,
body#registration .scrolled,
body#password .scrolled,
body#pagenotfound .scrolled,
body#my-account .scrolled,
body#identity .scrolled,
body#addresses .scrolled,
body#order-history .scrolled,
body#order-follow .scrolled,
body#address .scrolled,
body#password-infos .scrolled,
body#password-email .scrolled,
body#password-new .scrolled,
body#password-reset .scrolled,
body#password-change .scrolled,
body#order-confirmation .scrolled,
body#history .scrolled,
body#order-detail .scrolled,
body#order-slip .scrolled,
body#module-psgdpr-gdpr .scrolled {
  position: static;
  width: 100%;
}

.scrolled .megamenu-remo {
  background-color: #fff;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
}

/* Tabs del menú cuando no están seleccionadas */
.scrolled .elementor-widget-n-tabs .e-n-tab-title[aria-selected="false"] a {
  color: #0d1c2d !important;
}

.scrolled
  .elementor-widget-n-tabs
  .e-n-tab-title[aria-selected="false"]
  a:hover {
  color: rgba(0, 157, 210, 1) !important;
}

/* Topbar */
/* Estilos de la barra superior cuando el header está scrolled */
.scrolled .topbar-remo {
  background-color: rgba(246, 244, 242, 1);
}

/* Texto del topbar cuando está scrolled */
.scrolled .topbar-remo p {
  color: rgba(0, 157, 210, 1) !important;
}

@media (max-width: 992px) {
  .full-header-remo {
    position: static;
  }

  .listado-iconos-header svg {
    filter: brightness(0) saturate(100%) invert(8%) sepia(17%) saturate(2457%)
      hue-rotate(173deg) brightness(94%) contrast(95%);
  }
}

.scrolled .listado-iconos-header svg {
  filter: brightness(0) saturate(100%) invert(8%) sepia(17%) saturate(2457%)
    hue-rotate(173deg) brightness(94%) contrast(95%);
}

/*============================ CARRITO ============================*/

div[data-elementor-type="cart_min"]
  .stsb_pm_cart_product_button_remove
  .stsb_flex_wrapper {
  gap: 7px;
  flex-direction: row-reverse;
}

div[data-elementor-type="cart_min"] .elementor-widget-pm-cart-product-price {
  font-family: var(--e-global-typography-accent-font-family), Sans-serif;
  font-size: var(--e-global-typography-accent-font-size);
  font-weight: var(--e-global-typography-accent-font-weight);
  text-transform: var(--e-global-typography-accent-text-transform);
  color: #9e9c9c;
}

div[data-elementor-type="cart_min"] .stsb_cart_quantity_input {
  -max-width: 150px;
}

div[data-elementor-type="cart_min"] .stsb_qty_plus,
.stsb_qty_wrap .stsb_qty_plus {
  right: 30px;
}

div[data-elementor-type="cart_min"] .stsb_qty_minus,
.stsb_qty_wrap .stsb_qty_minus {
  left: 30px;
}

#product .stsb_pro_quantity {
  border-radius: 50px;
  color: #0d1c2d;
  border: 1px solid #0d1c2d;
}

/*============================ CATEGORÍAS ============================*/

div[data-elementor-id="308"] {
  height: 100%;
}

.stsb_search_box button {
  display: none;
}

#stsb-header
  .elementor-2
  .elementor-element.elementor-element-7f23a61
  .stsb_customer_link:hover
  svg {
  fill: transparent !important;
}

.scrolled .elementor-widget-n-tabs .e-n-tab-title .e-n-tab-icon svg {
  filter: brightness(0) saturate(100%) invert(8%) sepia(17%) saturate(2457%)
    hue-rotate(173deg) brightness(94%) contrast(95%);
}

.elementor-widget-n-tabs .e-n-tab-title:hover svg {
  filter: brightness(0) saturate(100%) invert(45%) sepia(99%) saturate(2857%)
    hue-rotate(166deg) brightness(96%) contrast(101%) !important;
}

#search_filters .facet-title,
#search_filters .h6 {
  display: none !important;
}

#search_filters ul {
  display: flex !important;
  visibility: visible;
  position: static;
  border-radius: 0;
  border: none;
  background-color: transparent;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

#search_filters .facet .collapse, #search_filters_brands .facet .collapse, #search_filters_suppliers .facet .collapse{
  margin:0;
}

#search_filters .facet, #search_filters_brands .facet, #search_filters_suppliers .facet{
  padding:0;
}

#search_filters, #search_filters_brands, #search_filters_suppliers{
  background-color: transparent;
}

#search_filters .clear-all-wrapper {
  display: none;
}

#search_filters .facet-label {
  font-size: 18px !important;
  line-height: 100%;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase !important;
  min-height: 54px;
  display: flex;
  align-items: center;
  width: max-content;
  border-radius: 50px !important;
  padding: 5px 40px;
  padding-left: 30px;
  padding-right: 30px;
  border: 1px solid #0d1c2d;
  color: #0d1c2d;
  font-weight: 700;
  background-color: transparent;
  font-weight: 500;
}



#search_filters .facet .facet-label a, #search_filters_brands .facet .facet-label a, #search_filters_suppliers .facet .facet-label a{
  font-size: 18px;
  margin-top:0 !important;
  width: 100%;
}

#search_filters .custom-radio{
  display: none !important;
}

@media (max-width: 992px) {
  #search_filters .facet-label {
    min-height: 37px;
    padding-left: 12px;
    padding-right: 12px;
  }

  #search_filters ul{
    gap:10px;
  }

  #search_filters .facet-label a{
    font-size: 14px !important;

  } 

  #search_filters .accordion-body {
    gap: 10px;
  }
}

[data-elementor-type="product_min"]{
	display:flex;
}

.stsb_grid_wrapper:not(
    :has(
        [data-elementor-type="product_min"]
          ~ [data-elementor-type="product_min"]
          ~ [data-elementor-type="product_min"]
          ~ [data-elementor-type="product_min"]
      )
  )
  .elementor-repeater-item-9db40c9,
.stsb_grid_wrapper:not(
    :has(
        [data-elementor-type="product_min"]
          ~ [data-elementor-type="product_min"]
          ~ [data-elementor-type="product_min"]
          ~ [data-elementor-type="product_min"]
      )
  )
  .elementor-repeater-item-11c068f {
  display: none !important;
}

.search_filters .search_filters-link {
  font-weight: 600 !important;
}

#search_filters .form-check {
  padding: 0;
  margin: 0;
}

#search_filters .form-check input {
  display: none;
}

#search_filters .form-check input:checked + .facet-label {
  border-color: #0d1c2d;
  color: #0d1c2d;
}

.search_filters .search_filters-label {
  margin: 0;
}

#search_filters .accordion-item {
  background-color: transparent;
}

#search_filters .accordion-body {
  padding: 0 !important;
}

#search_filters .accordion-collapse {
  display: block;
}

#search_filters .select-title {
  display: none;
}

/*============================ CONTACTO ============================*/

/* Puntos de venta */
/* Contenedor principal con columnas múltiples en desktop */
.listado-puntos-venta .stsb_read_more_box {
  columns: 4;
}

/* Lista de puntos de venta */
.listado-puntos-venta ul {
  list-style: none !important;
  color: #000000;
  font-size: 20px;
  line-height: 1.4em;
  margin-bottom: 50px;
}

/* Espaciado entre items de la lista */
.listado-puntos-venta ul li:not(:last-child) {
  margin-bottom: 12px;
}

/* Títulos de sección de puntos de venta */
.listado-puntos-venta p {
  color: #000;
  font-size: 30px;
}

/* Responsive: Puntos de venta en móvil */
/* En móvil se convierte en un acordeón interactivo */
@media (max-width: 992px) {
  /* Una sola columna en móvil */
  .listado-puntos-venta .stsb_read_more_box {
    columns: 1;
  }

  /* Párrafos clickeables que actúan como encabezados del acordeón */
  .listado-puntos-venta .stsb_read_more_box p {
    cursor: pointer;
    margin: 0;
    padding: 16px 22px;
    border-bottom: 1px solid #00000033;
    position: relative;
    font-size: 20px;
  }

  /* Espaciado reducido entre items en móvil */
  .listado-puntos-venta ul li:not(:last-child) {
    margin-bottom: 5px;
  }

  /* Icono chevron que indica que es expandible */
  .listado-puntos-venta .stsb_read_more_box p::after {
    content: "";
    position: absolute;
    right: 15px;
    top: 50%;
    width: 12px;
    height: 10px;
    transform: translateY(-50%) rotate(0deg);
    background-image: url("/img/cms/icons/icon-chevron-down-remo-dark.svg");
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
    background-position: center;
  }

  /* Rotación del chevron cuando el acordeón está abierto */
  .listado-puntos-venta .stsb_read_more_box p.active::after {
    transform: translateY(-50%) rotate(180deg);
  }

  /* Lista que se expande/contrae con animación */
  .listado-puntos-venta .stsb_read_more_box ul {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    margin: 0;
    padding-left: 22px;
    padding-top: 10px;
    font-size: 16px;
  }

  /* Estado abierto del acordeón */
  .listado-puntos-venta .stsb_read_more_box ul.open {
    max-height: 100%;
    margin-bottom: 10px;
  }
}

/*============================ MODALES ============================*/

/* Botones de características/ingredientes */
/* Primer botón con borde superior */
.btn-caracteristicas:first-child {
  border-top: 1px solid #00000033;
}

/* Estilos del botón que abre los modales */
.btn-caracteristicas {
  background: none;
  border: none;
  color: #0d1c2d;
  font-size: 22px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.06rem;
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 1em;
  border-bottom: 1px solid #00000033 !important;
  border-radius: 0;
  width: 100%;
}

@media (max-width: 992px) {
  .btn-caracteristicas {
    font-size: 18px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0px !important;
    line-height: 1.6em !important;
    padding: 8px 0 !important;
  }
}

/* Modal - Estructura base */
/* Previene el scroll del body cuando un modal está abierto */
body.modal-open {
  overflow: hidden;
}

/* Contenedor del modal (overlay) */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
  padding: 10px;
  z-index: 1050;
}

/* Estado abierto del modal */
.modal.open {
  display: flex !important;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Contenedor del contenido del modal */
.modal-dialog {
  width: 100%;
  max-width: 830px;
}

.btn-caracteristicas:first-child {
  border-top: 1px solid #00000033;
}

.btn-caracteristicas {
  background: none;
  border: none;
  color: #0d1c2d;
  font-size: 22px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.06rem;
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 1em;
  border-bottom: 1px solid #00000033 !important;
  border-radius: 0;
  width: 100%;
}

/* Contenido principal del modal */
.modal-content {
  border-radius: 0px;
  border: none;
}

/* Ajustes del dialog cuando tiene clase fade */
.modal.fade .modal-dialog {
  margin: 0px;
  transform: none;
}

/* Encabezado del modal con título y botón cerrar */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Padding común para header y footer */
.modal-header,
.modal-footer {
  padding: 18px 22px;
  border-bottom: 1px solid #e5e5e5;
}

/* Modal de ingredientes - Lista */
/* Estilos de la lista de ingredientes */
.modal-caracteristicas .modal-body > ul {
  font-size: 20px;
  color: #3d3d3d;
}

/* Espaciado entre items de ingredientes */
.modal-caracteristicas .modal-body > ul li:not(:last-child) {
  margin-bottom: 10px;
}

/* Layout de cada item de ingrediente con icono */
.modal-caracteristicas .modal-body > ul li {
  display: flex;
  align-items: center;
  gap: 7px;
}

/* Pie del modal */
.modal-footer {
  border-top: 1px solid #e5e5e5;
  border-bottom: none;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  min-height: 150px;
  align-items: center;
}

/* Cuerpo del modal */
.modal-body {
  padding: 30px;
  font-size: 16px;
  color: #0d1c2d;
  min-height: 500px;
}

/* Texto del footer del modal */
.modal-footer-text {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.25em;
  letter-spacing: 0%;
  text-align: center;
  text-transform: uppercase;
  color: #000000;
}

/* Título del modal */
.modal-title {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  text-transform: uppercase;
  color: #000000;
  font-family: "SemiExpanded Bold";
  line-height: 1.25em;
}

/* Botón de cerrar del modal */
.modal .close {
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: #0d1c2d;
}

.modal .btn {
  padding: 10px 18px;
  border-radius: 4px;
  border: 1px solid #0d1c2d;
  background: #0d1c2d;
  color: #fff;
  cursor: pointer;
}

/* Botón secundario del modal */
.modal .btn.btn-secondary {
  background: #fff;
  color: #0d1c2d;
}

/* Padding adicional para el contenido del modal de características */
.modal-caracteristicas .modal-content {
  padding: 10px;
  max-height: 95vh;
  overflow: hidden;
}

/* Modal de características - Cards */
/* Contenedor de la card con borde */
.modal-caracteristicas .card {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px 30px;
  border: 1px solid #00000033;
  border-radius: 0;
}

.modal-header::after{ display:none; }

/* Item individual de la card (nombre y valor) */
.modal-caracteristicas .card-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

/* Separador punteado entre nombre y valor */
.modal-caracteristicas .card-item .separador {
  flex: 1;
  height: 1px;
  border-top: 1px dashed #00000033;
}

/* Último item sin borde inferior */
.modal-caracteristicas .card-item:last-child {
  border-bottom: none;
}

/* Nombre de la característica */
.modal-caracteristicas .card-name {
  font-size: 20px;
  color: #3d3d3d;
  font-weight: 400;
  width: 100px;
  font-family: "SemiExpanded Bold";
}

/* Valor de la característica */
.modal-caracteristicas .card-value {
  font-size: 20px;
  color: #3d3d3d;
  font-weight: 400;
  width: 130px;
}

@media (max-width: 992px) {
  .modal-caracteristicas .modal-content {
    padding: 20px;
  }

  .modal-header,
  .modal-footer {
    padding: 0;
  }

  .modal-header {
    padding-bottom: 17px;
  }

  .modal-footer {
    padding-top: 24px;
    min-height: 0px;
  }

  .modal-title {
    font-size: 25px;
  }

  .modal-body {
    padding: 20px 0;
  }

  .modal-footer-text {
    font-size: 15px;
  }

  .modal-header button img {
    width: 44px;
  }

  .modal-caracteristicas .card {
    padding: 25px 10px;
  }

  .modal-caracteristicas .card-value {
    max-width: 115px;
  }

  .modal-caracteristicas .card-item {
    gap: 140px;
  }
}