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

/********************************
 * Customizacion PrestaBlog
 ********************************/
#prestablog_menu_cat nav ul, img.logo_home{background-color:  #594739;}
#prestablog_menu_cat nav ul{min-height: auto;}
#prestablog_menu_cat nav ul li a{padding: 12px 10px 15px;font-family: 'Lato',sans-serif;font-size: 16px;font-weight: 700;}
#prestablog-fb-comments, #prestablog-comments, 
#prestablogfront, .prestablogExtra{border-color:#FFFFFF !important;padding: 10px 0px;}
time.date:before, .info_blog:before{border-color: #bf9330;}
#prestablogfront h1{color: #594739;font-weight: bold;}
.prestablogtitle{margin: 30px 0px;color: #594739;font-weight: bold;border-bottom: 1px solid #bf9330;}
#prestablog-comments h3{color: #594739;}
fieldset#prestablog-comment{padding: 0px;}
fieldset#prestablog-comment input.text,
fieldset#prestablog-comment textarea {
  display: block;
  width: 100%;
  font-size: 1rem;
  line-height: 1.25;
  background-color: #fff;
  background-image: none;
  background-clip: padding-box;
  border-radius: 0;
  color: #594739;
  border: 1px solid #bf9330;
  padding: .562rem .75rem;
  margin-bottom: 16px;
}
#prestablog_block_rss{padding: 0px;}
#prestablog_block_rss a {background-color: #2fb5d2;}
#prestablog_block_rss a:hover{background-color: #594739;}       
#prestablog_bloc_search .btn.button-search{background:transparent}
body#module-prestablog-blog #left-column .block-categories{padding: 0px;}
body#module-prestablog-blog #left-column .block-categories a span{color: #7a7a7a;}

/********************************
 * Customizacion sweetalert2
 ********************************/
.swal2-popup.swal2-toast .swal2-title.white-color{
  color: #FFFFFF!important;
}
.block-category.card-block{
  background-color: transparent !important;
}

/************************* NUEVO TEMA CALIDULCE ***********************************************/

/* ===========================================================================
   Commons
   =========================================================================== */

/* --- Variables de Color (ajusta según tus colores exactos) --- */
:root {
  --color-primary-purple: #9A3487;
  --color-secondary-purple: #4a0072;
  --color-text-on-purple: #ffffff;
  --color-text-on-white: #333333;
  --color-button-order-bg: #ffffff;
  --color-button-order-text: var(--color-primary-purple);
  --font-main: "Karla", sans-serif;
  --background-beige: #F7F0E8;
}

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

.container a:not(.btn):not(.js-search-link):not(.accessories-link) {
  color: #000000 !important;
}

.container a:hover:not(.btn):not(.js-search-link):not(.accessories-link) {
  color: #000000 !important;
  font-weight: bold !important;
}

.container .custom-checkbox input[type=checkbox]+span {
  border: 2px solid var(--color-primary-purple);
  background-color: transparent;
}

.container .custom-checkbox input[type=checkbox]:checked+span:before {
  background-color: transparent;
  background-image: url(/themes/new_calidulce/assets/img/checkbox.svg);
  background-size: 18px 18px;
  background-repeat: no-repeat;
  background-position: center;
  top: -1px;
  left: -1px;
  width: 18px;
  height: 18px;
}

.content .custom-radio input[type=radio]:checked+span,
.custom-radio input[type=radio]:checked+span {
  background-color: var(--color-primary-purple) !important;
}

.content .custom-radio {
  border: 1px solid slategray !important;
}

@media (max-width: 767.98px) {
  #main .page-header h1 {
    margin-top: 170px;
  }
}


/*********************************** BREADCRUMB ******************************************/

#wrapper .breadcrumb li a {
  color: black;
}

#wrapper .breadcrumb li:last-child {
  color: var(--color-primary-purple);
}

#wrapper .breadcrumb li:after {
  content: "|";
}

/************************************ BUTTONS *********************************************/

.btn-primary,
#noLoggedUserModal .modal-dialog .modal-content .modal-body .btn-primary {
  background-color: var(--color-primary-purple);
  border-radius: 5px;
  font-size: 15px;
  cursor: pointer;
  padding: 0.59rem 1.20rem;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
#noLoggedUserModal .modal-dialog .modal-content .modal-body .btn-primary:hover,
#noLoggedUserModal .modal-dialog .modal-content .modal-body .btn-primary:active,
#noLoggedUserModal .modal-dialog .modal-content .modal-body .btn-primary:focus {
  background-color: var(--color-secondary-purple);
}

.btn-secondary {
  background-color: white;
  border-radius: 5px;
  font-size: 12px;
  font-weight: normal;
  cursor: pointer;
  padding: 0.3rem 0.6rem;
}

/******************* ESTILOS BOTONES AÑADIR AL CARRITO (PRODUCT MINIATURES) **************************/

/* Selectores para los botones de añadir al carrito y similares en miniaturas */
#products .product-miniature .product-add-to-cart .btn-primary.no-logged,
.featured-products .product-miniature .product-add-to-cart .btn-primary.no-logged,
.product-accessories .product-miniature .product-add-to-cart .btn-primary.no-logged,
.product-miniature .product-add-to-cart .btn-primary.no-logged,
#products .product-miniature .product-add-to-cart .btn-primary,
.featured-products .product-miniature .product-add-to-cart .btn-primary,
.product-accessories .product-miniature .product-add-to-cart .btn-primary,
.product-miniature .product-add-to-cart .btn-primary,
.ets_mm_block_content article.product-miniature .product-add-to-cart .btn-primary.add-to-cart,
#product .product-container .btn-primary,
#checkout #payment-confirmation button,
#_desktop_cart .leo-cart-dropdown-action > a {
  background-color: #000000;
  color: #ffffff !important;
  border: none;
  padding: clamp(8px, 1.2vw, 12px) clamp(15px, 2.5vw, 25px);
  font-size: clamp(13px, 1.5vw, 15px);
  border-radius: 50px;
  text-decoration: none;
  font-weight: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-transform: none;
  line-height: 1.2;
  box-shadow: none;
  transition: background-color 0.3s ease, opacity 0.3s ease;
  max-width: 170px;
}

.ets_mm_block_content article.product-miniature .product-add-to-cart .btn-primary.add-to-cart {
  max-width: unset;
}

#products .product-miniature .product-price-and-shipping .product-unit-price,
.featured-products .product-miniature .product-price-and-shipping .product-unit-price,
.product-accessories .product-miniature .product-price-and-shipping .product-unit-price,
.product-miniature .product-miniature .product-price-and-shipping .product-unit-price {
  color: #000000;
}

.add-to-cart::before {
  content: 'shopping_cart';
  font-family: 'Material Icons';
  margin-right: 4px;
  margin-left: -5px;
  vertical-align: bottom;
  user-select: none;
}

/* Estado Hover para los botones de producto */
#products .product-miniature .product-add-to-cart .btn-primary.no-logged:hover,
.featured-products .product-miniature .product-add-to-cart .btn-primary.no-logged:hover,
.product-accessories .product-miniature .product-add-to-cart .btn-primary.no-logged:hover,
.product-miniature .product-add-to-cart .btn-primary.no-logged:hover,
#products .product-miniature .product-add-to-cart .btn-primary:hover,
.featured-products .product-miniature .product-add-to-cart .btn-primary:hover,
.product-accessories .product-miniature .product-add-to-cart .btn-primary:hover,
.product-miniature .product-add-to-cart .btn-primary:hover {
  background-color: #333333;
  opacity: 0.9;
  color: #ffffff !important;
}

/* Icono dentro del botón */
#products .product-miniature .product-add-to-cart .btn-primary i.material-icons,
.featured-products .product-miniature .product-add-to-cart .btn-primary i.material-icons,
.product-accessories .product-miniature .product-add-to-cart .btn-primary i.material-icons,
.product-miniature .product-add-to-cart .btn-primary i.material-icons {
  color: #ffffff;
  font-size: clamp(16px, 2vw, 18px);
  margin-right: 5px;
}

/* --- MEDIA QUERY PARA AJUSTAR MIN-WIDTH EN PANTALLAS PEQUEÑAS --- */
@media (max-width: 429.98px) {
  #products .product-miniature .product-add-to-cart .btn-primary.no-logged,
  .featured-products .product-miniature .product-add-to-cart .btn-primary.no-logged,
  .product-accessories .product-miniature .product-add-to-cart .btn-primary.no-logged,
  .product-miniature .product-add-to-cart .btn-primary.no-logged,
  #products .product-miniature .product-add-to-cart .btn-primary,
  .featured-products .product-miniature .product-add-to-cart .btn-primary,
  .product-accessories .product-miniature .product-add-to-cart .btn-primary,
  .product-miniature .product-add-to-cart .btn-primary {
    min-width: 150px;
    padding-left: clamp(10px, 2vw, 20px);
    padding-right: clamp(10px, 2vw, 20px);
    font-size: clamp(14px, 1.4vw, 14px) !important;
  }

  #products .product-miniature .product-add-to-cart .btn-primary i.material-icons,
  .featured-products .product-miniature .product-add-to-cart .btn-primary i.material-icons,
  .product-accessories .product-miniature .product-add-to-cart .btn-primary i.material-icons,
  .product-miniature .product-add-to-cart .btn-primary i.material-icons {
    font-size: clamp(14px, 1.8vw, 16px);
  }
}

/******* Flags (Common) ****************************************/

#product-availability {
  border-radius: 35px;
  padding: 5px 10px 6px 10px;
  position: absolute;
  margin: 10px;
}

#product-availability.out-of-stock {
  background-color: orange;
  color: black !important;
  font-weight: 400 !important;
  font-size: 13px;
}

#product-availability.on-demand {
  background-color: #3498DB;
  color: black !important;
  font-weight: 400 !important;
  font-size: 13px;
}

#product-availability.discontinued {
  background-color: rgba(142, 142, 142, 0.5) !important;
  color: black !important;
  font-weight: 400 !important;
  font-size: 13px;
}

.product-miniature:has(#product-availability.is-new) {
  position: relative;
  overflow: hidden;
}

#product-availability.is-new {
  border-radius: 0;
  margin: 11px;
  padding: 0;
  width: 189px;
  line-height: 25px;
  position: absolute;
  top: 15px;
  right: -74px;
  transform: rotate(45deg);
  background-color: #009688;
  color: white !important;
  font-weight: 600;
  font-size: 20px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

/********** Selector Cantidad (Common)*****************/

.miniature-add-container {
  display: flex;
  flex-flow: row nowrap;
  max-width: 250px;
}

.ets_mm_megamenu .miniature-add-container {
  justify-content: center;
}

.custom-quantity-selector {
  position: relative !important;
  border: 1px solid #000000;
  border-radius: 50px;
  height: 44px;
  width: 100px;
  overflow: hidden;
}

.custom-quantity-selector .custom_quantity_wanted {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 56px;
  height: 100%;
  border: none !important;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  color: #000;
  background-color: transparent;
  -moz-appearance: textfield;
}

.custom-quantity-selector .custom_quantity_wanted::-webkit-outer-spin-button,
.custom-quantity-selector .custom_quantity_wanted::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.custom-quantity-selector .qty-btn {
  position: absolute !important;
  right: 0;
  width: 50px;
  height: 50%;
  background-color: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 0;
  outline: none !important;
}

.custom-quantity-selector .qty-btn:hover {
  background-color: #f0f0f0;
}

.custom-quantity-selector .qty-up {
  top: 0;
  border-left: 1px solid #000000;
  border-bottom: 1px solid #000000;
  border-top: 0;
}

.custom-quantity-selector .qty-down {
  bottom: 0;
  border-left: 1px solid #000000;
  border-top: 0;
  border-bottom: 0;
}

.custom-quantity-selector .qty-up::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.custom-quantity-selector .qty-down::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/****** GDPR ************/

span > label > a,
span > label > span > a {
  text-decoration: underline;
}



/************************* PRODUCT LIST ***************************************/

#js-product-list .products {
  justify-content: center;
  gap: 20px;
}

/******************* ESTILOS MINIATURAS DE PRODUCTO **************************/

/* Contenedor general de la miniatura (ARTICLE) */
.product-miniature.js-product-miniature,
#header article.product-miniature.js-product-miniature {
  background-color: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 18px ;
  padding: 15px;
  text-align: left;
  display: flex;
  flex-direction: column;
  height: 100% ;
  outline: none;
  box-shadow: 1px 1px 5px rgba(104, 85, 70, 0.25);
  line-height: 0.9;
  min-width: 220px;
  max-width: 280px;
  min-height: 475px;
}
.product-miniature.js-product-miniature.type-commercial,
#header article.product-miniature.js-product-miniature.type-commercial {
  min-height: 400px;
}

.product-miniature.js-product-miniature:hover,
.product-miniature.js-product-miniature:focus,
.product-miniature.js-product-miniature:active {
  box-shadow: 2px 2px 6px rgba(104, 85, 70, 0.5);
  outline: none;
}

.product-miniature .product-thumbnail-container {
  position: relative;
  padding-top: 0;
  margin-top: 0;
  margin-bottom: 15px;
  border-bottom: 2px solid #e0e0e0 !important;
}

.product-miniature .thumbnail-container .product-thumbnail img {
  max-width: 250px;
}

/* Descripción del producto */
.product-miniature .product-description {
  flex-grow: 1 !important;
  display: flex;
  flex-direction: column;
  padding-top: 0;
  margin-top: 0 !important;
}

/* Categoría */
.product-miniature .product-category-name {
  font-family: var(--font-main, "Karla", sans-serif);
  font-size: clamp(10px, 1.1vw, 11px);
  color: #7f7f7f;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
  font-weight: 500;
}

/* Nombre del Producto  */
.product-miniature .h3.product-title {
  font-family: var(--font-main);
  font-size: clamp(20px, 2.8vw, 26px);
  margin-top: 6px !important;
  margin-bottom: 6px;
  line-height: 1.1 !important;
  letter-spacing: -0.6px;
  text-transform: none;
  text-align: left !important;
  min-height: 58px;
}
.product-miniature .h3.product-title a {
  color: inherit !important;
  text-decoration: none !important;
  font-size: 1.4rem !important;
  /*font-weight: normal !important;*/
}

/* Botón "See the price" */
.product-miniature .product-add-to-cart {
  display: flex;
  justify-content: center;
  margin-top: auto;
}

/* --- Ajustes para el selector de cantidad en miniaturas de producto --- */

/* 1. Hacemos el contenedor principal más estrecho */
.product-miniature .custom-quantity-selector {
  width: 70px;
  height: 40px;
}

/* 2. Ajustamos el ancho del campo del número para que deje espacio a los botones */
.product-miniature .custom-quantity-selector .custom_quantity_wanted {
  width: 50px;
  text-align: center;
}

/* 3. Hacemos los botones de +/- mucho más estrechos */
.product-miniature .custom-quantity-selector .qty-btn {
  width: 25px;
}

/* 4. Ajustamos la posición de las flechas dentro de los botones más pequeños */
.product-miniature .custom-quantity-selector .qty-up::before,
.product-miniature .custom-quantity-selector .qty-down::before {
  background-size: 20px; /* Ajusta este valor si la flecha se ve muy grande o pequeña */
  background-position: unset;
}


.product-miniature .product-add-to-cart .btn-primary {
  background-color: #1a1a1a;
  color: #ffffff;
  border: none;
  padding: 0 clamp(17px, 2.5vw, 25px);
  height: 42px;
  box-sizing: border-box;
  font-size: clamp(13px, 1.5vw, 14px);
  border-radius: 25px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-transform: none;
  box-shadow: none;
  transition: background-color 0.3s ease, opacity 0.3s ease;
  width: 100%;
  max-width: 200px;
  letter-spacing: -0.2px;
  flex-basis: 60%;
  margin-left: 10px;
}

.product-miniature .product-add-to-cart form {
  width: 100%;
}

.miniature-links {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  gap: 8px;
  justify-content: space-between; /* solo si están las referencias y no los enlaces de categorías*/
}

.miniature-links .product-category {
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 0;
}

.miniature-links .accessories-link {
  flex-grow: 0;
  flex-shrink: 0;
  font-size: 10px;
  color: var(--color-primary-purple) !important;
  font-weight: 900 !important;
  text-decoration: underline;
}

.product-miniature .product-description .product-category a {
  font-family: var(--font-main, "Karla", sans-serif) !important;
  font-size: clamp(11px, 1vw, 12px) !important;
  color: #888 !important;
}

@media (min-width: 768px) {
  .product-miniature .custom-quantity-selector {
    width: 100px;
  }
}

/******* Flags Miniaturas ****************************************/

.product-miniature #product-availability:not(.is-new) {
  bottom: 0;
  right: 0;
}

@media (max-width: 429.98px) {
  .product-miniature .product-add-to-cart .btn-primary {
    min-width: 130px !important;
    width: 100% !important;
    font-size: clamp(12px, 2.5vw, 13px) !important;
  }
}
.product-miniature .product-add-to-cart .btn-primary:hover {
  background-color: #333333 !important;
  opacity: 1 !important;
}
.product-miniature .product-add-to-cart .btn-primary i.material-icons {
  color: #ffffff !important;
  font-size: clamp(17px, 2vw, 19px) !important;
  margin-right: 6px !important;
}

article.product-miniature .product-thumbnail-container:hover {
  border: none !important;
}

/**** Ajustes wishlist *****/

.wishlist-button-add {
  display: none !important;
}

.product-container .wishlist,
.product-thumbnail-container .wishlist {
  float: right;
  position: relative;
  z-index: 1;
}

.product-container .wishlist  .leo-wishlist-button .wishlist-icon,
.product-thumbnail-container .wishlist .leo-wishlist-button .wishlist-icon {
  background-image: url(/themes/new_calidulce/assets/img/icon-wishlist.svg);
}

.product-container .wishlist  .leo-wishlist-button .wishlist-icon:hover,
.product-thumbnail-container .wishlist .leo-wishlist-button .wishlist-icon:hover {
  background-image: url(/themes/new_calidulce/assets/img/icon-wishlist-hover.svg);
}

.product-container .wishlist, .product-thumbnail-container .wishlist {
  float: right;
}

.product-container .wishlist .leo-wishlist-button.added .wishlist-icon,
.product-thumbnail-container .wishlist .leo-wishlist-button.added .wishlist-icon {
  height: 22px;
  width: 22px;
  background-image: url(/themes/new_calidulce/assets/img/icon-wishlist-hover.svg);
  background-size: 22px;
  background-repeat: no-repeat;
}

.modal.leo-modal.leo-modal-wishlist.fade.in > div > div > div.modal-header > div,
.modal.leo-modal.leo-modal-wishlist.fade.in > div > div > div.modal-header > div > a {
  color: #000000;
}

.modal.leo-modal.leo-modal-wishlist.fade.in > div > div > div.modal-header {
  border: 1px solid var(--color-primary-purple);
}

/**** Referencia *****/

#products .product-miniature .product-description .product-reference,
.featured-products .product-miniature .product-description .product-reference,
.product-accessories .product-miniature .product-description .product-reference,
.product-miniature .product-miniature .product-description .product-reference,
.product-miniature .product-description .product-category {
  font-family: var(--font-main, "Karla", sans-serif);
  /*font-size: clamp(10px, 0.9vw, 11px); para los enlaces de categorías*/
  font-size: clamp(15px, 1.2vw, 17px); /* para la referencia */
  color: #888;
  text-transform: uppercase;
  /*margin-bottom: 15px;*/
  display: block;
  letter-spacing: 0.2px;
  text-align: left !important;
}

/*** Precio ****/

#products .product-miniature .product-price-and-shipping .price,
.featured-products .product-miniature .product-price-and-shipping .price,
.product-accessories .product-miniature .product-price-and-shipping .price,
.product-miniature .product-miniature .product-price-and-shipping .price,
.custom-mega-menu .mm_block_type_product .product-price-and-shipping .price {
  color: unset;
  font-size: unset;
}

.products article div.product-description-short {
  font-size: 12px;
  font-weight: normal;
  padding-top: 10px;
  padding-bottom: 10px;
}

/******** Flags Producto *****************************/

#product .images-container #product-availability {
  top: 0;
  right: 0;
  margin-top: 10px;
}

/* ===========================================================================
   Header
   =========================================================================== */

#header .custom-header-layout {
  width: 100%;
}

#header .custom-header-layout .container-fluid {
  max-width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

/* --- Barra Superior --- */
#header > div.custom-header-layout > div.custom-top-bar > div > div {
  display: flex !important;
  justify-content: space-between;
  padding-left: 4%;
  padding-right: 4%;
}

#header .custom-top-bar {
  background-color: var(--color-primary-purple);
  color: var(--color-text-on-purple);
  font-size: 0.9em;
  height: auto;
  vertical-align: center;
  padding-top: 3px;
  padding-bottom: 3px;
}

#header .custom-top-bar-left,
#header .custom-top-bar-right {
  display: flex;
  align-items: center;
  width: 100%;
}

#header .custom-top-bar-left {
  flex-basis: 55%;
  margin-left: 4%;
}

#header .top-left-links {
  display: inline-flex;
}

#header .top-left-links{
  min-width: 230px;
}

#header .top-left-links.logged {
  min-width: 295px;
}


#header .custom-top-bar-left a {
  font-size: clamp(8px, 1vw, 15px);
}

#header .custom-top-bar-left .info-item {
  align-self: center;
}

#header .header-b2b-text {
  font-size: clamp(8px, 1vw, 15px);
  padding-left: 5px;
}

#header span.icon-container {
  margin: 5px;
}

#header span.icon-container > img,
#header .search-widget img,
#header .user-info {
  width: 25px;
}

#header .user-info {
  margin-left: 0;
  text-align: left;
  white-space: nowrap;
  position: relative;
  padding-right: 160px;
  z-index: unset;
}

.dropdown-users {
  position: absolute;
  right: 0;
  background-color: #fff;
  padding: 8px 9px;
  box-shadow: 0 5px 25px rgba(0,0,0,.18);
  top: calc(100% + 10px);
  min-width: 260px;
  border: 1px solid #9A3487;
  border-radius: 10px 0 10px 10px;
  display: none;
  z-index: 20;
}

.dropdown-users a.online .login {
  color: #9A3487;
}

#header .user-info .account.online {
  padding-left: 0;
  margin-left: 0;
  border-left: unset;
}

#header #contact-link > div > a {
  display: inline-flex;
  align-items: center;
}

#header .custom-top-bar-right {
  justify-content: flex-end;
  flex-basis: 38%;
}

#header #_desktop_user_info .user-info a svg * {
  stroke: white !important;
  stroke-width: 2px !important;
  fill: none !important;
}

#header .custom-top-bar .custom-icon-placeholder {
  margin-left: 15px;
  font-size: 1.2em;
  cursor: pointer;
}

#header .custom-top-bar .custom-icon-placeholder:first-child {
  margin-left: 0;
}

/* Estilos para los módulos dentro de la barra superior */
#header .custom-top-bar .ps_customersignin,
#header .custom-top-bar .ps_languageselector,
#header .custom-top-bar .blockcart {
  margin-left: 15px;
}

#header .custom-top-bar a {
  color: var(--color-text-on-purple);
  margin-right: 10px;
}

#header .custom-top-bar a:nth-child(3) {
  /*margin-right: 40px;*/
}

/* --- Barra de Logo y Carrito  --- */
#header .custom-logo-bar {
  background-color: #ffffff;
  padding: 10px 3%;
  margin-left: 3%;
  width: 100%;
}

#header #_desktop_logo {
  flex-basis: 20%;
}

#header .custom-logo-bar .logo {
  max-height: 70px;
  width: auto;
  min-width: 150px;
}

#header .custom-logo-bar-left {
  flex-basis: 40%;
}

#header .custom-logo-bar-left .text-header-static {
  font-size: 1.1em;
  font-weight: bold;
  color: var(--color-primary-purple);
  width: 100%;
  margin-left: 30px;
  display: inline-flex;
  text-transform: capitalize;
}

/* Estilos para el hook displayTop */
#header_top .custom-logo-bar-center div[id^="hook-display-top"] {
  /* Estilos específicos para el contenido de displayTop */
}

#header .custom-logo-bar-right .btn-custom-cart {
  background-color: var(--color-primary-purple);
  color: var(--color-text-on-purple);
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 0.9em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#header .custom-logo-bar-right .btn-custom-cart:hover {
  background-color: var(--color-secondary-purple);
}

#header .custom-logo-bar-right .btn-custom-cart .fa {
  margin: 0 5px;
}

#header .search-widget {
  min-width: unset;
  margin-right: 10px;
}

#header .search-widget form {
  max-width: 40px;
}

#header .search-widget form input[type=text] {
  display: none;
  max-width: 40px;
}

#header .search-widget form button[type=submit] {
  position: relative;
  bottom: unset;
  right: unset;
  cursor: pointer;
}

#header .span-blk {
  color: black;
}

/* --- Barra de Navegación Principal desktop --- */
#header .custom-main-nav .top-menu-contanier {
  display: inline-flex;
  flex-flow: row nowrap;
  background-color: var(--color-primary-purple);
  color: var(--color-text-on-purple);
  padding: 0 3%;
  width: 100%;
  min-height: 52px;
}

#header .user-info .logout {
  text-decoration: underline;
}

#header .user-info .logout::before {
  display: none;
}

#header .user-info .logout span {
  padding-left: 15px;
}

/********************* Menú *****************************/

#header > div > div > nav > div > div > div.custom-main-nav-left {
  float: none;
  width: unset;
  flex-basis: 20%;
  padding-right: 0;
  font-size: clamp(12px, 1vw, 13px);
  font-weight: bold;
}

#header span.especialista-text {
  font-size: clamp(8px, 1vw, 15px);
}

#header .custom-mega-menu .mm_menu_content_title {
  padding: 5px 17px 0 18px;
  font-size: clamp(14px, 1.1vw, 18px);
  font-weight: normal;
}

#header .custom-mega-menu .mm_menu_content_title:hover {
  text-decoration: underline;
  color: white;
}

#header .custom-mega-menu .mm_menus_ul {
  display: inline-flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  gap: clamp(8px, 2vw, 90px);
  padding-left: 0;
  padding-right: 0;
}

#header > div.hidden-sm-down > div > nav > div > div > div.custom-main-nav-center > div > div > div > ul > i {
  margin-left: -18px !important;
}

#header div.hidden-sm-down .mm_columns_ul {
  font-size: 14px;
  left: 0;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  margin-left: -3vw;
  width: 100vw !important;
}

#header .custom-main-nav-center > div > div > div > ul > li.mm_menus_li.mm_sub_align_full.mm_has_sub.clickable.menu_hover > ul > li {
  margin-left: 3vw;
}

#header .ets_mm_megamenu.bg_submenu[data-bggray="bg_gray"]:before {
  opacity: 1;
  margin-left: -2.3vw;
  width: 101vw;
}

#header .ets_mm_block * {
  font-size: clamp(15px, 2vw, 17px);
}

#header > div.hidden-sm-down > div > nav > div > div > div.custom-main-nav-center > div > div > div > ul > li.mm_menus_li.mm_sub_align_full.mm_has_sub.clickable.menu_hover > ul > li > ul > li > div.ets_mm_block.mm_block_type_category.mm_hide_title > div > ul li > a {
  font-size: clamp(12px, 2vw, 16px);
  margin-left: -7px;
}

#header > div.hidden-sm-down > div > nav > div > div > div.custom-main-nav-center > div > div > div > ul > li.mm_menus_li.mm_sub_align_full.mm_has_sub.clickable.menu_hover > ul > li > ul > li > div.ets_mm_block.mm_block_type_category.mm_hide_title > div > ul > li > ul li > a {
  font-size: clamp(10px, 1.5vw, 15px);
}

#header li.mm_menus_li > ul > li > ul > li > .mm_hide_title > div > ul > li {
  list-style-type: disc;
  color: var(--color-primary-purple);
  font-size: 20px;
}

#header li > .mm_block_type_category li > a:hover {
  color: var(--color-primary-purple);
  font-weight: 600;
}

#header li.mm_menus_li > ul > li > ul > li > .mm_hide_title > div > ul > li > ul > li {
  list-style-type: disc;
  color: black;
}

#header .custom-mega-menu .mm_menus_ul .mm_menus_li.mm_has_sub.menu_hover .ets_mm_block_content .ets_mm_categories li {
  margin: 0;
  padding-bottom: 2px;
}

#header .mm_blocks_li {
  padding: 0px 15px 0 0px;
}

#header .ets_mm_block_content ul li ul {
  margin-left: 0;
}

#header .custom-main-nav-center li.mm_menus_li.mm_sub_align_full.mm_has_sub.clickable.menu_hover > ul > li > ul > li > div.ets_mm_block.mm_block_type_category.mm_hide_title > div > ul > li > ul > li {
  list-style: unset;
  margin-left: -6px;
}

#header ul > li.mm_menus_li.mm_has_sub.menu_hover > ul > li > ul > li > div.ets_mm_block.mm_block_type_category.mm_hide_title > div > ul > li.has-sub.categories-item-container > ul {
  margin-top: 10px;
  margin-bottom: 10px;
}

#header article {
  margin-left: -35px;
}

#header article > div.product-add-to-cart > button.btn-primary {
  background-color: var(--color-primary-purple);
  border-radius: 5px;
  padding: 0;
}

#header .custom-mega-menu .mm_block_type_product {
  -webkit-box-shadow: unset;
}

#header .custom-mega-menu .mm_block_type_product .mm-product-description .product-title .product-reference {
  padding-top: 3px;
  padding-bottom: 10px;
}

#header > nav > div > div.desktop-wrap.row.align-items-center > div.col-md-6.custom-main-nav-center > div > div > div > ul > li.mm_menus_li.mm_sub_align_full.mm_has_sub.menu_hover > ul > li > ul > li {
  padding-left: 0;
}

#header .custom-mega-menu .mm_block_type_product .product-price-and-shipping {
  text-align: center !important;
}

.custom-mega-menu.layout_layout1 .mm_menus_li.active > a,
#header .custom-mega-menu.layout_layout1 .mm_menus_li.menu_hover > a,
.custom-mega-menu.layout_layout1:hover .ybc-menu-vertical-button,
.layout_layout1 .mm_extra_item button[type="submit"]:hover i,
#header .custom-mega-menu.layout_layout1 .mm_menus_li.active > a {
  text-decoration: underline !important;
  border-bottom: 2px solid white;
  color: white;
  font-weight: 600 !important;
}

/* Imagen Icono Packinbox del menu Desktop ***/

#header > div.hidden-sm-down > div > nav > div > div > div.custom-main-nav-center > div > div > div > ul > li:nth-child(4) > a > span {
  display: flex !important;
  flex-flow: column-reverse !important;
}

#header > div.hidden-sm-down > div > nav > div > div > div.custom-main-nav-center > div > div > div > ul > li:nth-child(4) > a > span > img {
  width: 70px !important;
  padding: 5px 0 0 5px !important;
  display: block !important;
}

/******** FIN Menú **********************/

#header > nav > div > div.desktop-wrap.row.align-items-center > .custom-main-nav-center {
  flex-basis: 55%;
}

#header .custom-main-nav-right {
  flex-basis: 19%;
}

#header .custom-main-nav-right > div > button {
  max-height: 38px !important;
}

#header > div.custom-logo-bar > div > div > div.col-md-3.col-sm-12.custom-logo-bar-left {
  width: 100%;
  text-align: right;
}

#header article.product-miniature.js-product-miniature {
  min-width: 220px;
}

#header .btn-cart-header-container {
  display: flex;
  justify-content: flex-end;
  padding-right: 10px;
}

#header .btn-cart-header-container {
  width: 100%;
}

#header .btn-cart-header-container .btn-go-cart {
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
  font-weight: normal;
  font-size: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 15px;
  padding-right: 15px;
}

#header .btn-cart-header-container .btn-go-cart-text {
  padding-left: 10px;
  padding-right: 10px;
  font-size: 17px;
}

#header .btn-order-header-container {
  min-width: 131px;
}

#header .btn-order-header-container > button > span {
  margin-left: 10px;
}

#header > div.custom-logo-bar > div > div > div.col-md-3.col-sm-12.custom-logo-bar-left > span > button > span {
  margin-left: 10px;
}

/* Estilos para el módulo de menú en displayNavFullWidth */
#header_nav .custom-main-nav-center div[id^="hook-display-nav-full-width"] ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
}

#header_nav .custom-main-nav-center div[id^="hook-display-nav-full-width"] ul li {
  margin: 0 15px;
}

#header_nav .custom-main-nav-center div[id^="hook-display-nav-full-width"] ul li a {
  color: var(--color-text-on-purple);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  padding: 5px 0;
  display: block;
}

#header_nav .custom-main-nav-center div[id^="hook-display-nav-full-width"] ul li a:hover {
  opacity: 0.8;
}

#header .custom-main-nav-right .btn-custom-order,
#header .custom-main-nav-right .easyquickorderform_button_header a { /* Si easyquickorderform genera un botón con esta clase o similar */
  background-color: var(--color-button-order-bg);
  color: var(--color-button-order-text) !important; /* !important si el módulo pone colores inline */
  border: 1px solid var(--color-button-order-text);
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 0.9em;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

#header .custom-main-nav-right .btn-custom-order:hover,
#header .custom-main-nav-right .easyquickorderform_button_header a:hover {
  background-color: var(--color-button-order-text);
  color: var(--color-button-order-bg) !important;
}

#header .custom-main-nav-right .btn-custom-order .fa,
#header .custom-main-nav-right .easyquickorderform_button_header a .fa {
  margin-left: 8px;
}

#header .mm_columns_li.column_size_2 {
  width: 13.6667%;
}

/* --- Estructura Móvil --- */
#header .mobile-custom-header {
  padding: 10px 0;
}

#header .mobile-custom-header .top-logo img {
  max-height: 40px;
  width: auto;
}

/* Ajustes para Menu móvil */
#header .mobile-custom-header .ybc-menu-toggle {
  /* estilos para el botón de menú */
}

#header .mobile-custom-header #_mobile_cart .blockcart {
  /* Estilos para el icono del carrito móvil */
}

/* --- Clases Bootstrap --- */
#header .align-items-center {
  display: flex;
  align-items: center !important;
  width: 100%;
  justify-content: space-between;
  flex-wrap: nowrap;
}

#header .text-right { text-align: right !important; }
#header .text-center { text-align: center !important; }
#header .d-flex { display: flex !important; }
#header .justify-content-end { justify-content: flex-end !important; }

#header .ets_mm_megamenu .btn-secondary {
  border: 1px solid var(--color-primary-purple);
  margin-left: -10px;
  font-size: 13px;
  cursor: pointer !important;
  position: relative;
  z-index: 10;
}

#header .ets_mm_block_content:has(.btn-secondary) {
  margin-top: -6px;
  margin-bottom: 10px;
  cursor: pointer !important;
}

@media (min-width: 768px) {
  #header .custom-mega-menu.layout_layout1.ets_mm_megamenu .mm_columns_ul, .custom-mega-menu.layout_layout1.ybc_vertical_menu .mm_menus_ul {
    text-align: left;
    width: 100%;
    font-size: 14px;
    padding-left: 12vw;
    padding-right: 2vw;
  }

  #header .mm_columns_li.column_size_3 {
    width: 20%;
  }
}

@media (max-width: 767.98px) {
  #header #_mobile_top_menu .ets_mm_block.mm_block_type_html > div > a {
    display: none;
  }
}


/******************** HEADER - MOBILE ************************************/

/*
* ===================================================================
* ===   MENÚ MÓVIL (LOOK & FEEL)   ===
* ===================================================================
*/

/* --- BOTÓN DE HAMBURGUESA --- */
.btn-mobile-menu {
  background: transparent; border: none; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px; transform: scale(1.2);
  margin-right: 4px;
}
.btn-mobile-menu .icon-bar {
  display: block; width: 25px; height: 3px;
  background-color: #000; border-radius: 3px;
}

/* --- PANEL PRINCIPAL DEL MENÚ DESPLEGABLE --- */
#mobile_top_menu_wrapper {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 1000;
  background-color: #ffffff !important;
  border-top: 1px solid #e0e0e0;
  box-shadow: 0 5px 10px rgba(0,0,0,0.1);
  padding: 0;
  color: black !important;
}

/* --- CONTENIDO DEL MENÚ --- */
#_mobile_top_menu .mm_menus_ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#_mobile_top_menu > .mm_menus_ul > .mm_menus_li {
  border-bottom: 1px solid #e0e0e0;
  position: relative;
}

#_mobile_top_menu .mm_menus_ul {
  background-color: white !important;
}

#_mobile_top_menu i.material-icons,
#_mobile_top_menu .mm_menus_li > .arrow::before,
#_mobile_top_menu .icons-top-row {
  display: none !important;
}

/* Enlaces principales */
#_mobile_top_menu .mm_menus_li > a {
  display: block;
  padding: 10px 60px 10px 20px;
  color: #000000;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: uppercase;
}
#_mobile_top_menu .mm_menus_li.mm_has_sub { cursor: pointer; }

/* --- SUBMENÚS --- */
#_mobile_top_menu .mm_columns_ul {
  display: none;
  background-color: #ffffff;
  padding: 10px 60px 10px 20px;
  list-style: unset;
  color: #000000;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}
#_mobile_top_menu .mm_columns_ul a {
  display: block;
  padding: 0px 60px 10px 0px;
  color: #000000;
  text-decoration: none;
  border-bottom: 1px solid #e0e0e0;
  font-size: 0.9rem; text-transform: none;
}
#_mobile_top_menu .mm_columns_ul li:last-child a { border-bottom: none; }

#_mobile_top_menu .mm_menus_ul .arrow::after {
  border-left: none !important;
  left: unset !important;
}

#_mobile_top_menu > ul > li.hidden-sm-up {
  display: none;
}

/* ================================================================ */
/* === ESTILO FLEXBOX FINAL, COMPLETO Y CON ESTILO CORRECTO === */
/* ================================================================ */

/* Contenedor principal del menú reconstruido */
#_mobile_top_menu .menu-movil-reconstruido {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 1. Cada <li> principal es un contenedor Flexbox */
#_mobile_top_menu .item-menu-reconstruido {
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* 2. El enlace <a> principal ocupa el espacio sobrante */
#_mobile_top_menu .item-menu-reconstruido > a {
  flex-grow: 1;
  padding: 15px 20px;
  color: #000;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: uppercase;
}

/* 3. Nuestro botón con el SVG tiene un tamaño fijo */
#_mobile_top_menu .boton-desplegar-reconstruido {
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 50px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
}
#_mobile_top_menu .boton-desplegar-reconstruido svg {
  width: 28px;
  height: 28px;
}

/* 4. El submenú ocupa todo el ancho */
#_mobile_top_menu .submenu-reconstruido {
  flex-basis: 100%;
  width: 100%;
  background-color: #ffffff;
  padding: 0px 20px 20px 0px;
}

/* 5. Estilo para las listas DENTRO del submenú */
#_mobile_top_menu .submenu-reconstruido ul {
  list-style: none;
  padding-left: 20px; /* Hacemos espacio a la izquierda para las viñetas */
  margin: 0;
}

/* 6. Estilo para el texto de los enlaces DENTRO de los sub-elementos */
#_mobile_top_menu .submenu-reconstruido li a {
  color: #000000; /* Aseguramos que el texto del enlace es negro */
  text-decoration: none; /* Quitamos el subrayado por defecto */
  font-weight: normal; /* Podemos ajustar el peso de la fuente si es necesario */
  text-transform: none; /* Quitamos el uppercase para los sub-elementos */
}

.boton-desplegar-reconstruido {
  /* IMPORTANTE: Añadimos una transición para la propiedad 'transform'.
     Esto hace que el giro sea suave y dure 0.4 segundos. */
  transition: transform 0.4s ease-in-out;

  /* Opcional: quitamos los estilos por defecto del botón para que se vea solo el SVG */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.boton-desplegar-reconstruido.rotado {
  /* Cuando el botón tenga esta clase, se rotará 90 grados */
  transform: rotate(-90deg);
}

/*
*   REGLA PARA ESCRITORIO:
*   A partir de 768px en adelante, el header de escritorio es visible por defecto
*   por la clase 'hidden-sm-down'. Solo ocultar el móvil.
*/
@media (min-width: 768px) {
  /* Ocultamos el header móvil y su menú */
  #header .mobile-header-wrapper,
  #header #mobile_top_menu_wrapper {
    display: none !important;
  }
}

/* --- ESTILOS PARA LA CABECERA MÓVIL  --- */
@media (max-width: 767.98px) {

  /*
*   REGLA PARA MÓVIL:
*   Hasta 767.98px, el header móvil es visible por defecto por la clase
*   'hidden-md-up'. Solo se oculta el de escritorio.
*/
  #header .hidden-sm-down {
    display: none !important;
  }

  /* --- 1. BARRA SUPERIOR MORADA (CSS CORREGIDO) --- */
  .mobile-header-top {
    display: flex;
    justify-content: space-between; /* Empuja los dos contenedores a los extremos */
    align-items: center;
    background-color: var(--color-primary-purple);
    padding: 6px 15px;
    color: white;
  }

  /* Contenedor para los elementos del hook (teléfono, ayuda, favoritos...) */
  .mobile-top-left-items {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  /* Estilo para los elementos generados por el hook */
  .mobile-top-left-items .header-nav-item a,
  .mobile-top-left-items a {
    color: #fff !important;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
  }

  .mobile-top-left-items .header-nav-item i {
    font-size: 20px !important;
    margin-right: 5px;
  }

  /* Estilo para el icono de Instagram */
  .mobile-top-right-items .instagram-icon-mobile {
    width: 22px;
    height: 22px;
    filter: brightness(0) invert(1);
    display: block;
  }
  .mobile-top-item a,
  .mobile-top-item .header-nav-item a {
    color: #fff !important;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
  }

  .mobile-top-item .material-icons,
  .mobile-top-item .header-nav-item i {
    font-size: 20px !important;
    margin-right: 5px;
  }

  .mobile-top-item .instagram-icon-mobile {
    width: 22px;
    height: 22px;
    filter: brightness(0) invert(1);
  }

  /* --- 2. CABECERA PRINCIPAL BLANCA --- */
  .mobile-header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px;
    background: #fff;
    border-bottom: 1px solid rgba(142, 142, 142, 0.2);
  }

  .main-header-left {
    flex-shrink: 0;
  }

  .main-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  #_mobile_logo img {
    max-width: 150px !important;
  }

  .slogan-mobile {
    font-size: 11px;
    color: var(--color-primary-purple);
    margin-top: 15px;
    font-weight: 600;
  }

  /* Iconos superiores (Buscar, Favoritos, Usuario, Carrito) */
  .icons-top-row {
    display: flex;
    align-items: center;
    gap: 0px;
    margin-bottom: 22px;
  }

  .icons-top-row .hidden-sm-down, .user-info > a > span {
    display: none !important;
  }

  .mobile-header-wrapper .slogan-mobile.name-customer {
    margin-top: 0px;
    align-self: flex-end;
    margin-top: -15px;
    margin-bottom: 10px;
  }

  .icons-top-row .material-icons, .icons-top-row #header_wishlist i {
    font-size: 26px;
    color: var(--color-primary-purple);
  }
  .icons-top-row .blockcart a { color: var(--color-primary-purple); }

  /* Fila inferior: Menú Hamburguesa */
  .icons-bottom-row .ybc-menu-toggle {
    padding: 0;
    transform: scale(1.2);
  }
  .icons-bottom-row .icon-bar {
    background-color: #000;
    height: 3px;
    width: 25px;
    border-radius: 30px;
    margin-bottom: 1px;
  }

  span.btn-cart-count {
    color: white;
    background-color: var(--color-primary-purple);
    border-radius: 10px;
    position: absolute;
    bottom: 0px;
    right: 26px;
    font-weight: 800;
    padding: 3px 4px 1px 4px;
    font-size: 12px;
  }
}
/* ===========================================================================
   Footer
   =========================================================================== */


footer#footer {
  padding-top: 0;
  margin-top: -35px;
}

/* Logo, Links, Social */
#footer .footer-main-content {
  padding-top: 10px;
  padding-bottom: 5px;
}

#footer .footer-container {
  background-color: white;
  padding-top: 0px;
  margin-top: 1.25rem !important;
}

#footer .footer-decor-container {
  display: inline-flex;
  width: 100%;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin-bottom: 30px;
}

#footer .decor-left {
  background-color: var(--color-primary-purple);
  flex-basis: 41.25%;
  width: 100%;
  border-bottom-left-radius: 133.33px;
}

#footer .decor-right {
  background-color: var(--color-primary-purple);
  flex-basis: 41.25%;
  width: 100%;
  border-bottom-right-radius: 133.33px;
}

#footer .footer-logo-section {
  flex-basis: 17.5%;
  text-align: center;
  vertical-align: center;
}

#footer .footer-logo-section .logo {
  max-height: 55px;
  width: auto;
}

#footer .footer-links-wrapper {
  display: flex;
  flex-flow: column wrap;
  align-content: center;
}

#footer .footer-links-wrapper .col-md-6.wrapper {
  display: flex;
  flex-flow: column;
  flex-wrap: wrap;
  text-align: left;
  width: auto;
  text-align: left;
  padding-left: 70px;
  padding-right: 70px;
}

#footer .footer-links-wrapper .col-md-6.wrapper ul {
  display: flex;
  flex-flow: column;
  flex-wrap: wrap;
  /*align-content: space-around;*/
}

#footer #block_myaccount_infos {
  margin-bottom: 0px !important;
}

#footer .footer-links-wrapper .links {
  text-align: left;
  margin-bottom: 20px;
  width: auto;
}

#footer .footer-links-wrapper .h3,
#footer .footer-links-wrapper .block-title,
#footer .footer-links-wrapper .text-uppercase.block_title {
  font-size: 16px;
  font-weight: bold;
  color: #000000;
  margin-bottom: 15px;
  text-transform: none;
  padding-left: 0;
}

#footer .footer-links-wrapper ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

#footer .footer-links-wrapper li:before {
  display: none;
}

#footer .footer-links-wrapper ul li a {
  color: #333333;
  text-decoration: underline;
  font-size: 14px;
}

#footer .footer-links-wrapper ul li a:hover {
  text-decoration: underline;
  color: #555555;
}

#footer .footer-social-icons {
  padding-top: 10px;
}

#footer .footer-social-icons .social-icon-link {
  display: inline-block;
}

#footer .footer-social-icons .social-icon-img {
  width: 35px;
}

/* --- ESTILOS PARA LA BARRA DE COPYRIGHT / PEDIDO MÍNIMO DEL FOOTER ANIMADA --- */

/* 1. Barra contenedora (se mantienen) */
#footer .footer-copyright-bar {
  background-color: var(--color-primary-purple);
  color: #FFFFFF;
  padding: 12px 0;
  font-size: 13px;
}

/* 2. Contenedor "ventana" del marquee */
.copyright-marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* 3. La "cinta" con el contenido */
.copyright-marquee__content {
  display: flex;         /* Pone los textos en una sola línea */
  width: max-content;
  white-space: nowrap;
  animation: marquee-scroll 40s linear infinite;
}

/* 4. Pausar la animación al pasar el ratón */
.copyright-marquee:hover .copyright-marquee__content {
  animation-play-state: paused;
}

/* 5. Cada bloque de texto individual con su espaciado */
.copyright-text {
  /* Espacio a los lados de cada frase para que no se peguen */
  padding: 0 2em;
  display: inline-block;
}

.copyright-text a {
  color: white !important;
}

.copyright-text strong {
  font-weight: 700;
  color: white !important;
}

/* 6. La definición de la animación  */
@keyframes marquee-scroll {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-50%);
  }
}

/*----------------------------------------------------------------------------*/

/* Legal Text & Sponsor Logos  */
#footer .footer-legal-sponsors {
  background-color: #FFFFFF;
  padding: 10px;
  color: black;
}

#footer .footer-legal-sponsors .legal-text {
  margin-bottom: 10px;
  font-weight: bold;
  color: black;
  font-size: clamp(12px, 2.2vw, 14px);
}
#footer .footer-legal-sponsors .funding-text {
  margin-bottom: 20px;
  line-height: 1.5;
  color: black;
  font-size: clamp(10px, 1.2vw, 12px);
}

#footer .sponsors-logos-container .sponsor-logo {
  max-height: 45px;
  width: auto;
  margin: 5px 10px;
  vertical-align: middle;
}

/* Responsive sponsor logos */
@media (max-width: 767px) {
  #footer .sponsors-logos-container .sponsor-logo {
    max-height: 35px;
    margin: 5px;
  }

  #footer div.row.footer-links-wrapper.justify-content-center > div > div > div:nth-child(2) {
    margin-top: 15px;
  }

  #footer .footer-links-wrapper .links {
    /* text-align: center; */
  }

  #footer .footer-links-wrapper .h3,
  #footer .footer-links-wrapper .block-title,
  #footer .footer-links-wrapper .text-uppercase.block_title {
    /* text-align: center; */
  }
}

/* ===========================================================================
   Home - Index
   =========================================================================== */

/******** SLIDER *************************/

#index .container {
  margin: 0;
  padding: 0;
  width: 100%;
}

#index .carousel .carousel-inner {
  height: 21vw;
}

.carousel-inner>.carousel-item>a>img, .carousel-inner>.carousel-item>img {

}
/************ CATEGORY BANNER - links *********/

#index .featured-products .home-category-banners-wrapper {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin-bottom: 30px;
  padding: 0;
  padding-left: 4%;
  padding-right: 4%;
}

#index .featured-products .home-category-banner {
  box-sizing: border-box;
  flex: 1 1 33.33%;
  text-align: -webkit-center;
}

#index .featured-products .home-category-banner a {
  display: block;
  text-decoration: none;
}

#index .featured-products .home-category-banner img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 370px;
  /*min-width: 321px;*/
}

/* --- Responsive --- */

@media (max-width: 991.98px) {
  #index .featured-products .home-category-banner {
    flex-basis: 100%;
  }

  #index .featured-products .home-category-banner:not(:last-child) {
    margin-bottom: 15px;
  }
  #index .featured-products .home-category-banners-wrapper {
    gap: 0;
  }
}

@media (max-width: 767.98px) {

  #index .featured-products .home-category-banners-wrapper {
    flex-wrap: wrap;
  }

  #index .featured-products .home-category-banner {
    flex-basis: 100%; /* Cada banner ocupa todo el ancho disponible */
  }

  #index .featured-products .home-category-banner:not(:last-child) {
    margin-bottom: 15px;
  }
  #index .featured-products .home-category-banners-wrapper {
    gap: 0;
  }

  #index #content > section > div.products > div {
    text-align: -webkit-center;
  }

}

/******** FEATURED PRODUCTS *************************/

#index .featured-products {
  max-width: 1400px;
}

#index .featured-products .products {
  flex-flow: row wrap;
  margin-left: 4%;
  margin-right: 4%;
  margin-left: 15px;
  margin-right: 15px;
  justify-content: center;
  gap: 20px;
}

#index .featured-products .products-section-title {
  text-transform: unset;
  color: black;
  text-align: left;
  padding: 0 4% 0 4%;
  font-size: clamp(21px, 3vw, 40px);
  line-height: 1.5;
}

#index .featured-products .products-section-title > span {
  color: var(--color-primary-purple);
}

@media (max-width: 767px) {
  #index .featured-products .products {
    flex-flow: row wrap;
  }

  #index .featured-products .products .col-sm-4.col-xs-6 {
    margin-bottom: 15px;
  }
}

@media (max-width: 430px) {
  #index .featured-products .products {
    flex-flow: column wrap;
  }

  #index .featured-products .products .col-sm-4.col-xs-6 {
    width: 100%;
    margin-bottom: 5px;
  }
}

/******************* CATALOG BANNER **************************/

#index .home-catalog-banner-section {
  width: 100%;
  box-sizing: border-box;
}

#index .carousel-indicators {
  display:none;
}

#index .container-catalog {
  padding-top: 20px;
  padding-left: clamp(10px, 3vw, 20px);
  padding-right: clamp(10px, 3vw, 20px);
}

#index .home-catalog-banner-wrapper {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  background-color: #F7F0E8;
  border-radius: 20px;
  padding: clamp(15px, 2.5vw, 25px) clamp(10px, 1.5vw, 20px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  justify-content: center;
  align-content: normal;
}

/* Columna Izquierda: Contenedor de la Imagen */
#index .home-catalog-col-left {
  flex: 0 1 clamp(80px, 20vw, 250px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: clamp(5px, 1vw, 10px);
  transform: scale(1.4);
  top: -60px;
}

/* Columna Izquierda: Contenedor de la Imagen */
#index .home-catalog-col-left {
  flex: 0 1 clamp(120px, 28vw, 350px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: clamp(5px, 1vw, 10px);
}

#index .home-catalog-col-left img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  position: relative;
  top: -20px;
  z-index: 5;
}

#index .home-catalog-col-center {
  text-align: center;
}

#index .home-catalog-col-center h3 {
  font-size: clamp(14px, 2.5vw, 22px);
  font-weight: bold;
  color: #333;
  margin-top: 0;
  margin-bottom: clamp(8px, 1.5vw, 15px);
  line-height: 1.3;
}

#index .home-catalog-col-center .btn-catalog-download {
  background-color: #000000;
  color: #ffffff;
  border: none;
  padding: clamp(8px, 1.2vw, 12px) clamp(12px, 2vw, 20px);
  font-size: clamp(12px, 2.2vw, 15px);
  border-radius: 50px;
  text-decoration: none;
  font-weight: normal;
  display: inline-block;
  white-space: nowrap;
  transition: background-color 0.3s ease, transform 0.2s ease;
  min-width: 200px;
}

#index .home-catalog-col-center .btn-catalog-download:hover {
  background-color: #333333;
  transform: translateY(-2px);
}

/* Columna Derecha: Espaciador */
#index .home-catalog-col-right {
  flex: 0 1 clamp(80px, 20vw, 250px);
}

/******************* BANNER PRODUCTOS PERSONALIZADOS **************************/

#index .custom-products-banner-section {
  width: 100%;
  box-sizing: border-box;
}

#index .container-custom-products {
  border: none !important;
}

#index .custom-text {
  margin-top: 0 !important;
  margin-bottom: 70px;
  border: none !important;
}

#index .custom-text .btn-primary {
  margin-top: 0 !important;
  margin-left: 0 !important;
  min-width: 200px;
  font-weight: normal !important;
  padding:clamp(8px, 1.2vw, 12px) clamp(12px, 2vw, 20px);
}

#index .custom-products-banner-wrapper {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  background-color: #F7F0E8;
;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 4%;
  padding-right: 4%;
  overflow: hidden;
  position: relative;
  margin-top: 20px;
}

/* Columna Izquierda: Logo, Título, Texto, Botón */
#index .custom-products-col-left {
  flex: 1 1 55%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding-right: clamp(20px, 4vw, 50px);
  min-width: 0;
  z-index: 2;
  position: relative;
}

#index .custom-products-logo {
  margin-bottom: clamp(15px, 2.5vw, 25px);
}

#index .custom-products-logo img {
  max-width: clamp(150px, 20vw, 220px);
  height: auto;
  display: block;
}

#index .custom-products-title {
  font-size: clamp(17px, 3.9vw, 40px);
  font-weight: bold;
  color: #1a1a1a;
  margin-top: 0;
  margin-bottom: clamp(15px, 2vw, 20px);
  line-height: 1.2;
}

#index .custom-products-text {
  font-size: clamp(14px, 1.8vw, 16px);
  color: #555;
  line-height: 1.6;
  margin-bottom: clamp(20px, 3vw, 35px);
  max-width: 550px;
  text-transform: unset;
}

#index .custom-products-col-left .btn-custom-products-cta {
  background-color: #000000;
  color: #ffffff;
  border: none;
  padding: clamp(10px, 1.5vw, 14px) clamp(20px, 3vw, 30px);
  font-size: clamp(14px, 1.8vw, 16px);
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  align-self: flex-start;
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

#index .custom-products-col-left .btn-custom-products-cta:hover {
  background-color: #333333;
  opacity: 0.9;
}

/* Columna Derecha: Imagen de Productos */
#index .custom-products-col-right {
  flex: 1 1 45%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

#index .custom-products-col-right img {
  width: 100%;
  max-width: 480px;
  min-width: 200px;
  height: auto;
  display: block;
  object-fit: contain;
}

/* --- AJUSTES RESPONSIVE --- */

@media (min-width: 768px) {
  #index .home-catalog-col-center {
    margin-left: -5vw;
  }
}

@media (min-width: 930px) {
  #index .home-catalog-col-center {
    margin-left: -4vw;
  }
}

@media (min-width: 1200px) {
  #index .home-catalog-col-center {
    margin-left: -3.5vw;
  }
}

@media (min-width: 2100px) {
  #index .home-catalog-col-center {
    margin-left: -2vw;
  }
}

@media (max-width: 767.98px) {
  #index .custom-products-banner-wrapper {
    padding-bottom: 0;
  }

  #index .home-catalog-col-center .btn-catalog-download {
    min-width: 140px;
  }
}

@media (max-width: 429.98px) {
  #index .custom-products-banner-wrapper {
    padding-top: clamp(25px, 6vw, 40px);
    padding-bottom: clamp(10px, 3vw, 20px);
    padding-left: clamp(15px, 4vw, 20px);
    padding-right: clamp(15px, 4vw, 20px);
    min-height: 380px; /* AJUSTA */
  }

  #index .custom-products-col-left {
    width: 100%;
    max-width: 70%;
    align-items: flex-start;
    text-align: left;
    margin-bottom: 0;
    z-index: 2;
    position: relative;
    padding-bottom: clamp(10px, 2vw, 20px);
  }

  #index .custom-text .btn-primary {
    min-width: 125px;
  }

  #index .custom-products-text {
    font-size: clamp(13px, 3.2vw, 14px);
    line-height: 1.1;
  }
  #index .custom-products-title {
    font-size: clamp(18px, 5vw, 26px);
  }
  #index .custom-products-col-left .btn-custom-products-cta {
    padding: clamp(8px, 1.2vw, 12px) clamp(15px, 2.5vw, 25px);
    font-size: clamp(13px, 1.5vw, 14px);
  }

  #index .custom-products-col-right {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: clamp(150px, 55vw, 250px);
    height: auto;
    z-index: 1;
    opacity: 0.9;
  }

  #index .custom-products-col-right img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
  }

  #index #content > div.custom-text > div > div > div > div.custom-products-col-left > a {
    margin: 1.3em 0;
  }
}

/* ===========================================================================
   Categorías - Product List
   =========================================================================== */

#category .block-category {
  min-height: unset;
}

#category .block-category.card-block {
  align-content: flex-start;
}

#category .block-category .category-cover img {
  position: relative;
}

#category .block-category .category-cover img {
  width: 100%;
  height: auto;
  object-position: unset;
  posistion: relative;
  max-height: 10vw;
}

#category #wrapper {
  margin-top: 149px;
}

#category #js-product-list {
  background-color: #F7F0E8;
  padding: 1.3vw 1.5vw;
  border-radius: 5px;
  box-shadow: 1px 1px 5px rgba(104, 85, 70, 0.25);
}

/* Contenedor principal del dropdown */
#category .products-sort-order.dropdown {

}

/* Estilos para el botón del dropdown */
#category .products-sort-order .select-title {
  height: 35px;
  background-color: #FFFFFF;
  border: 1px solid #909090;
  border-radius: 50px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 15px;
  padding-right: 10px;

  font-size: 14px;
  color: #333333;
  text-align: left;
  line-height: normal;

  cursor: pointer;
  box-sizing: border-box;
  outline: none;

}

/* Estilo para el icono */
#category .products-sort-order .select-title .material-icons {
  font-size: 20px;
}

#category .sort-by-label {
  margin-right: 8px;
  font-size: 14px;
  color: #333333;
  vertical-align: middle;
}

#category #js-product-list > .products > div {
  /*margin-bottom: 15px;*/
}

#category .product-reference {
  padding-bottom: 0 !important;
}

#category #left-column > div {
  text-transform: uppercase;
  font-weight: 600;
  font-size: clamp(11px, 1vw, 16px);
  margin-top: 10px;
}

#category .h1.category-title {
  text-transform: capitalize;
  color: var(--color-primary-purple);
  font-size: clamp(12px, 1.5vw, 20px);
}

#category #left-column .block-categories.hidden-sm-down {
  display:none;
}

#category .cat-sub {
  margin-top: 20px;
  margin-bottom: 10px;
}

#category .block-categories {
  padding: 5px;
}

#category #search_filters {
  margin-top: 20px;
}

#category #search_filters p {
  color: black;
  font-size: clamp(11px, 1vw, 16px);
}

#category #search_filters .facet .facet-label a {
  color: black;
  font-size: clamp(11px, 0.9vw, 14px);
  font-weight: 400;
  text-transform: capitalize;
  padding-top: 0.4vw;
}

#category .facet ul li {
  padding-bottom: 10px;
}

#category  li > label > span > span {
  width: 19px;
  height: 19px;
}

#category .ps-shown-by-js:before {
  width: 17px;
  height: 17px;
  left: -1px;
  top:-1px;
}

/********************* LOGO y BOTÓN PACKAGING ******************/

#category .cat-customprod-float {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

#category .cat-customprod-col {
  width: auto;
}

#category .cat-customprod-container {
  display:flex;
  flex-flow: column nowrap;
  justify-content: center;
  gap: 10px;
  margin-top: 25px;
}

#category .cat-custom-prod-button-text {
  text-transform: uppercase;
}

#category .cat-custom-prod-icon {
  margin-right: 10px;
}

@media (max-width: 767.98px) {
  #category .cat-customprod-float {
    justify-content: center;
  }
}

/*
#category:not(.category-packaging) .cat-customprod-float {
  display: none;
}*/

/************************************************************/

#content.page-not-found input {
  border: 1px solid #000000;
  border-radius: 35px;
}
/*** 4 columnas de productos en widescreen***/

@media (min-width: 1500px) {
 #category .container {
    width: 100vw;
  }
}

/********* Pagination ****************/

/* =================================================================== */
/* ESTILOS DE ESCRITORIO (BASE)                                       */
/* =================================================================== */

.pagination {
  display: flex;
  justify-content: center;
  width: 100%;
}

.pagination .pagination-container {
  max-width: 50vw;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination .pagination__previous a,
.pagination .pagination__next a {
  color: #000000;
  font-weight: bold;
  text-decoration: none;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.pagination .pagination__previous a .material-icons,
.pagination .pagination__next a .material-icons {
  color: var(--color-primary-purple);
}

.pagination .pagination__numbers {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
  flex-grow: 1;
  background: none;
  flex-wrap: wrap;
  margin: 0 1rem;
  line-height: 1.2;
}

.pagination .pagination__numbers li {
  margin: 0;
  padding: 0 2px;
  display: flex;
  align-items: center;
}

.pagination .pagination__numbers li.current a {
  color: var(--color-primary-purple);
  border: none;
  border-radius: unset;
  width: unset;
  font-weight: bold;
}

.pagination .pag-bullet {
  margin: 0 5px;
  padding-left: 0;
  color: #363a41;
}

.pagination a {
  text-decoration: none;
  color: #000000;
}

/* =================================================================== */
/* ESTILOS RESPONSIVE PARA MÓVILES (PANTALLAS < 768px)                 */
/* =================================================================== */

@media (max-width: 767px) {

  .pagination .pagination-container {
    max-width: 90vw;
    flex-direction: row; /* Intentamos poner en fila */
    flex-wrap: wrap;     /* Pero permitimos que salten de línea */
    justify-content: space-between; /* Para separar los botones cuando estén en su propia línea */
  }

  .pagination .pagination__numbers {
    width: 100%; /* Ocupa toda la primera "fila", empujando a los otros debajo */
    order: 1;    /* Se asegura de que vaya primero */
    margin: 0 0 1rem 0; /* Margen inferior para separar de los botones */
    line-height: 1.4;
  }

  .pagination .pagination__previous {
    order: 2;
    flex-grow: 1;    /* Crece para ocupar espacio */
    flex-basis: 0;   /* Base de crecimiento */
    text-align: left;
  }

  .pagination .pagination__next {
    order: 3;
    flex-grow: 1;    /* Crece para ocupar espacio */
    flex-basis: 0;   /* Base de crecimiento */
    text-align: right;
  }

}
/* ===========================================================================
  Product
   =========================================================================== */

#product .product-container .h1 {
  font-size: clamp(15px, 3vw, 27px);
  color: black;
}

#product .product-cover {
  box-shadow: 1px 1px 5px rgba(104, 85, 70, 0.25);
}

#product .scroll-box-arrows i {
  color: black;
}

#product .js-qv-mask {
  display: none;
}

#product #main > div:nth-child(2) > div > div:nth-child(2) > div.product-information > div:nth-child(1) {
  display: none;
}

#product .product-information {
  margin-top: .7rem;
}

#product div.product-information > div.product-features.js-product-features > section > div.data-sheet-features {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  justify-content: space-between;
}

#product div.product-information > div.product-features.js-product-features > section > div.data-sheet-features .feature-container {
  display: flex;
  justify-content: space-between;
}

#product div.product-information > div.product-features.js-product-features > section > div.data-sheet-features .feature-container .data-name,
#product div.product-information > div.product-features.js-product-features > section > div.data-sheet-features .feature-container .data-value {
  padding: 5px;
  align-self: baseline;
}

#product div.product-information > div.product-features.js-product-features > section > div {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  justify-content: space-between;
}

/**** Mail Alerts - Avísame cuando esté disponible */

#product .product-additional-info .js-mailalert {
  background-color: var(--background-beige);
  padding: 2vw 2.5vw;
  border-radius: 5px;
  box-shadow: 1px 1px 5px rgba(104, 85, 70, 0.25);
}

#product .product-additional-info .js-mailalert input {
  border: 1px solid #000000;
  border-radius: 35px;
}

#product .product-additional-info .js-mailalert-add.btn-primary {
  max-width: unset;
}

/***** Productos relacionados ****************/

#product-accessories {
  scroll-margin-top: 160px; /* altura del scroll de productos relacionados cuando se llega con un enlace */
}

.accessories-link:hover {
  color: black !important;
  text-decoration: underline;
}

#product .product-accessories {
  background-color: var(--background-beige);
  padding: 4% 4%;
}

#product .product-accessories > .container {
  text-align: -webkit-center;
}

#product section.product-accessories .container > div {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  gap: 30px;
}

#product .product-accessories .product-miniature .h3.product-title {
  font-size: clamp(20px, 2.8vw, 26px);
}

#product .product-accessories > .container > p.h5 {
  font-size: clamp(20px, 3vw, 27px);
  color: var(--color-primary-purple);
  font-weight: normal;
  text-align: left;
  text-transform: unset !important;
}

#product .product-accessories .add-to-cart {
  background-color: #000000;
}

#product .product-accessories .product-description .product-title a {
  font-weight: 700;
  text-transform: none;
}

#product .product-accessories .product-price-and-shipping {
  padding-top: 20px;
  padding-bottom: 0px;
}

#product .product-accessories .add-to-cart {
  margin-top: 0px;
}

#product .product-accessories .product-description .product-reference {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 10px;
}
*/
/****************************************************/

/* --- Contenedor de la columna de información --- */
#product .product-info-column {
  position: relative; /* Para el posicionamiento del wishlist */
  padding-left: 30px;
}

/* --- Breadcrumbs (revisado para asegurar que no afecta a otras páginas) --- */
body#product #wrapper .breadcrumb {
  margin-bottom: 25px;
  font-size: 14px;
}
body#product #wrapper .breadcrumb li:not(:last-child)::after {
  content: "|" !important;
  margin: 0 0.5rem;
  color: #ccc;
  font-size: 1em;
}

#product .product-info-column .leo-wishlist-button .wishlist-icon {
  background-image: none !important;
  width: auto;
  height: auto;
}

#product .product-info-column .leo-wishlist-button .wishlist-icon::before {
  font-family: 'Material Icons';
  content: 'favorite_border';
  font-size: 28px;
  color: var(--color-primary-purple);
  display: block;
}

#product .product-info-column .leo-wishlist-button.added .wishlist-icon::before,
#product .product-info-column .leo-wishlist-button:hover .wishlist-icon::before {
  content: 'favorite';
  color: var(--color-primary-purple);
}

/* --- Título, Referencia y Descripción --- */
#product .h1[itemprop="name"] {
  font-size: clamp(25px ,4vw, 30px);
  font-weight: 600;
  color: #000;
  margin-top: 10px;
  margin-bottom: 5px;
  padding-right: 40px; /* Espacio para el corazón */
}

#product .product-reference {
  color: #7A7A7A;
  font-size: 0.875rem; /* 14px */
  text-transform: uppercase;
}

#product .product-description {
  color: #333;
}

/* --- Contenedor de Características --- */
#product .product-features-container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 25px;
  border-bottom: 1px solid #e8e8e8;
}

#product .product-container .product-features {
  color: #000000;
}

#product .feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
#product .feature-icon {
  font-size: 28px;
  color: var(--color-primary-purple);
}
#product .feature-details {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
#product .feature-name {
  color: #7A7A7A;
  font-size: 0.875rem; /* 14px */
}
#product .feature-value {
  font-weight: 600;
  color: #000;
  font-size: 1rem; /* 16px */
}

#product .product-container .separator {
  margin: 5px 0;
}

#product .product-container .separator {
  border-top: 1px solid #e9e9e9;
}

/************************* --- Precios --- *******************************/

#product .product-container .product-prices {
  margin-bottom: 15px;
}

#product .product-prices .current-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: #000000;
}

#product .product-prices .current-price > .price_total {
  font-weight: 600;
  font-size: clamp(23px, 3.8vw, 27px);
}

#product .product-prices .price {
  font-size: 2.5rem;
  font-weight: 700;
  color: #000;
}

#product .product-prices .product-unit-price {
  font-size: 14px;
  color: #000000 !important;
  padding-bottom: 8px;
  font-weight: normal;
}

#product .product-prices .product-unit-price > .unit-price-text {
  padding-right: 5px;
  font-size: 14px !important;
}

#product .product-prices .product-unit-price > .only-unit-price {
  font-size: clamp(25px, 5vw, 28px); !important;
  font-weight: normal;
}

.product-prices div {
  margin-bottom: 0;
}

/***************************** FIN PRECIOS *************************************/

/* --- Sección de Compra --- */
#product .product-purchase-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 15px;
}

#product .add-container {
  display: inline-flex;
  width: 100%;
}

#product .product-add-container {
  flex-basis: 70%;
}

#product .product-container .product-quantity .add {
  width: 100% !important;
  justify-content: center;
}

/* === ESTILOS PARA EL SELECTOR DE CANTIDAD (PÁGINA PRODUCTO) === */

#product .product-quantity-container {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  padding-right: 10px;
  flex-basis: 30%;
}

#product .product-container .product-actions .control-label {
  color: #000000;
  font-weight: normal;
  text-align: center;
  font-size: 13px;
}

#product .product-container .product-actions .product-variants-item .control-label {
  text-align: left;
}

/***********************************************************************/

/* Botones */
#product .add-to-cart-container {
  flex-grow: 1;
}
#product .product-actions .btn.add-to-cart {
  background-color: #000;
  color: #fff;
  border-color: #000;
  border-radius: 50px;
  height: 44px;
  font-weight: 600;
  text-transform: none;
  font-size: 1rem;
  width: 100%;
  max-width: 250px;
}
#product .btn.add-to-cart:hover {
  background-color: #333;
  border-color: #333;
}
#product .stock-checker {
  background-color: #fff;
  color: #000;
  border-color: #000;
  border-radius: 50px;
  height: 44px;
  font-weight: 600;
  text-transform: none;
  font-size: 1rem;
  width: 100%;
  max-width: 250px;
}
#product .stock-checker:hover {
  background-color: #f2f2f2;
}

#product .product-container .product-quantity .add .add-to-cart {
  min-width: 220px;
}

@media (max-width: 767.98px) {

  body#product #wrapper {
    margin-top: 175px !important;
  }

  #product section.product-accessories .container > div {
    justify-content: center;
  }
}

/*
================================================================================
  CHECKOUT
================================================================================
*/

#checkout .container a:not(.btn):not(.label) {
  color: #000000 !important;
  text-decoration: underline!important;
  font-weight: normal !important;
}

#checkout .container a:hover:not(.btn) {
  color: #000000 !important;
  text-decoration: underline !important;
  font-weight: bold !important;
}

#checkout #content > h1.checkout-title {
  color: var(--color-primary-purple);
  text-align: left;
  font-size: clamp(18px, 2vw, 25px);
  padding-top: 30px;
  padding-bottom: 10px;
}

#checkout #content > h1::before {
  content: 'shopping_cart';
  font-family: 'Material Icons';
  margin-right: 10px;
  vertical-align: bottom;
}

/* --- 1. Contenedor de cada Producto (LI) --- */
#checkout .cart-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

#checkout .cart-item {
  border: 1px solid #e9e9e9;
  margin-bottom: 20px;
  display: block; /* Anular flexbox del LI */
}

#checkout .product-line-info {
  display: flex;
  flex-flow: column-reverse nowrap;
}

#checkout .product-line-info .reference {
  text-transform: uppercase;
  font-size: clamp(10px, .6vw, 12px) !important;
  color: #000000 !important;
}

#checkout .product-line-info a.label {
  text-align: left;
  text-transform: uppercase;
}

/* --- 2. Estructura de Filas (Cabecera y Producto) --- */
#checkout .cart-products-header,
#checkout .product-line-grid {
  display: flex;
  width: 100%;
  align-items: center;
}

/* Fila de la Cabecera: Forzamos fondo blanco y ajustamos padding */
#checkout .cart-products-header {
  background-color: #fff !important; /* LA SOLUCIÓN: !important fuerza el fondo blanco */
  border-bottom: 1px solid #e9e9e9;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 13px;
  color: #333;
}

/* --- 3. Definición y Estilo de Columnas --- */

/* Anchos y padding reducido para que no sean tan altas */
#checkout .header-article, #checkout .cart-col-article { flex: 0 0 35%; padding: 20px 10px 20px 10px; }
#checkout .header-price,   #checkout .cart-col-price   { flex: 0 0 17%; padding: 12px 15px; text-align: center; }
#checkout .header-quantity,#checkout .cart-col-quantity{ flex: 0 0 21%; padding: 12px 15px; text-align: center; }
#checkout .header-subtotal,#checkout .cart-col-subtotal{ flex: 0 0 17%; padding: 12px 15px; text-align: center; }
#checkout .header-action,  #checkout .cart-col-action  { flex: 0 0 10%; text-align: center; }

/* Bordes verticales entre columnas */
#checkout .header-col:not(:last-child),
#checkout .cart-col:not(:last-child) {
  border-right: 1px solid #e9e9e9;
}


/* --- 4. Estilos específicos del contenido de cada columna --- */

/* Columna 1: Artículo */
#checkout .cart-col-article {
  display: flex;
  align-items: center;
  gap: 15px;
  max-width: 278px;
}
#checkout .product-line-image img { width: 60px; height: auto; }
#checkout .product-line-info .label {
  font-weight: bold;
  font-size: 0.8rem;
  text-transform: unset !important;
}
#checkout .product-line-info .reference {
  text-transform: uppercase;
  font-size: 0.8rem !important;
  color: #666;
  margin-top: 4px;
}

/* Columna 3: Unidades (Sin botones) */

/*

#checkout .cart-col-quantity .qty {
  display: flex;
  flex-direction: column;
  align-items: center;
}

 */
/* Ocultamos botones +/- y flechas nativas */

/*
#checkout .bootstrap-touchspin .btn {
  display: none !important;
}
#checkout .js-cart-line-product-quantity::-webkit-outer-spin-button,
#checkout .js-cart-line-product-quantity::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#checkout .js-cart-line-product-quantity {
  -moz-appearance: textfield;
}

/* Estilo final del input redondeado */

/*
#checkout .bootstrap-touchspin .js-cart-line-product-quantity {
  width: 80px !important;
  height: 40px !important;
  border: 1px solid #ccc !important;
  border-radius: 25px !important;
  text-align: center !important;
  font-size: 1rem;
  font-weight: normal;
  color: #333;
  box-shadow: none !important;
}

 */


/* --- Selector de Cantidad Personalizado Estilo Píldora para el Checkout --- */

/* 1. Contenedor principal de la píldora. */
#checkout .bootstrap-touchspin {
  position: relative !important;
  border: 1px solid #000;
  border-radius: 50px;
  height: 40px;
  width: 85px;
  overflow: hidden;
  margin: 0 auto;
}

/* 2. El campo del número. */
#checkout .bootstrap-touchspin input.form-control {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 45px !important;
  height: 100% !important;
  text-align: center !important;
  border: none !important;
  background: transparent !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  color: black;
  z-index: 1;
}

/* 3. Posicionamos y damos tamaño a los <span> que contienen los botones. */
/* El span que contiene el botón de SUBIR (+) va arriba. */
#checkout .bootstrap-touchspin .input-group-btn:has(.bootstrap-touchspin-up) {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 44px !important;
  height: 50% !important; /* Ocupa la mitad superior */
  border-bottom: 1px solid #000 !important;
}

/* El span que contiene el botón de BAJAR (-) va abajo. */
#checkout .bootstrap-touchspin .input-group-btn:has(.bootstrap-touchspin-down) {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 44px !important;
  height: 50% !important; /* Ocupa la mitad inferior */
}

/* 4. Estilizamos el botón <button> para que se encoja correctamente. */
#checkout .bootstrap-touchspin .btn.js-touchspin {
  width: 100% !important;
  height: 100% !important; /* El botón llena su contenedor <span> */
  min-height: unset !important; /* Anula la altura mínima. */
  padding: 0 !important;
  border: none !important;
  border-left: 1px solid #000 !important;
  background: transparent !important;
  font-size: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 5. El estado :hover  */
#checkout .bootstrap-touchspin .btn.js-touchspin:hover {
  background-color: #f0f0f0 !important;
}

/* 6. Iconos de flecha (centrado con Flexbox). */
#checkout .bootstrap-touchspin .btn.js-touchspin::before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#checkout .bootstrap-touchspin .bootstrap-touchspin-up::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%3E%3C/svg%3E");
}
#checkout .bootstrap-touchspin .bootstrap-touchspin-down::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E");
}

/* 7. Ocultamos addons innecesarios. */
#checkout .bootstrap-touchspin .input-group-addon {
  display: none !important;
}

/***** FIN Selector de cantidad *********/

#checkout .qty-label { font-size: 0.8rem; color: #888; }


/* Columna 4: Subtotal (en azul) */
#checkout .cart-col-subtotal {
  font-size: 1.1rem;
  font-weight: bold;
  color: #000000 !important;
}
#checkout .cart-col-subtotal strong {
  color:  #000000 !important;
}


/* Columna 5: Acción */
#checkout .remove-from-cart { color: #7a7a7a; }
#checkout .remove-from-cart:hover { color: #d00; }
#checkout .remove-from-cart .material-icons-outlined { font-size: 26px; }

#checkout .btn-container {
  display: none;
}

/*
================================================================================
  CHECKOUT - Resumen del Pedido
================================================================================
*/

#checkout .flex-space-center {
  align-items: unset;
  padding-bottom: 0;
}

#checkout .cart-item {
  padding-top: 0;
}

/* --- 1. Contenedor principal: Eliminamos el estilo de "tarjeta" --- */
#checkout #js-checkout-summary.card {
  background: none !important; /* Elimina el fondo gris */
  border: none !important; /* Elimina el borde */
  box-shadow: none !important;
}
/* Reseteamos también el padding interno */
#checkout #js-checkout-summary .card-block {
  padding: 0 !important;
}

/* --- 2. Título "Resumen de mi Pedido" --- */
#checkout #js-checkout-summary .cart-title {
  color: var(--color-primary-purple) !important; /* Color morado */
  font-size: clamp(15px, 1.5vw, 22px);
  font-weight: bold;
  text-align: left;
  padding-top: 20px;
  padding-bottom: 15px;
  margin-bottom: 20px;
  border-bottom: 1px solid #e9e9e9; /* Línea separadora */
}

#checkout #js-checkout-summary .cart-title::after {
  content: ':';
}

/* --- 3. Líneas de desglose (Artículos, Portes, Descuento) --- */
/* Contenedor de las líneas antes del total */
#checkout .cart-summary-subtotals-container {
  font-size: 1rem;
}
#checkout .cart-summary-subtotals-container .cart-summary-line {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
/* Para el texto "Falta X para que sea gratuito" */
#checkout #cart-subtotal-shipping .value + small {
  display: block;
  flex-basis: 100%;
  text-align: left;
  font-style: italic;
  color: #666;
  margin-top: -5px;
  margin-bottom: 10px;
}

/* --- 4. Bloque de Totales  --- */
/* Contenedor de los totales finales */
#checkout .cart-summary-totals {
  border-top: 2px solid #333; /* Línea gruesa separadora */
  margin-top: 20px;
  padding-top: 15px;
}
/* Cada línea de total (Total Sin IVA, Total Con IVA) */
#checkout .cart-summary-totals .cart-summary-line {
  display: flex;
  justify-content: space-between;
  font-size: 1.15rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: #000000 !important;
}

/* --- 5. Ocultamos el separador y el bloque de código promocional --- */
#checkout .cart-summary .separator,
#checkout .cart-summary .block-promo {
  display: none !important;
}

#checkout .page-checkout #js-checkout-summary.card .card-block.cart-summary-totals .cart-total .value {
  color: #000000 !important;
}

#checkout section h1:not(.checkout-title) {
  color: #000000 !important;
  text-transform: unset;
  font-size: clamp(15px, 1.5vw, 22px);
}

#checkout .step-number {
  color: var(--color-primary-purple) !important;
  font-size: clamp(15px, 1.5vw, 22px);
  padding-right: 5px;
}

#checkout h2 {
  color: #000000 !important;
  font-size: clamp(18px, 1vw, 22px);
  font-weight: bolder;
  text-transform: unset;
}

#checkout section.checkout-step .step-title {
  padding: 5px;
  padding-left: 10px;
  border-radius: 5px;
}

#checkout section.checkout-step.-clickable.-reachable:hover:not(.js-current-step):not(.-unreachable) .step-title {
  color: white !important;
  background: var(--color-primary-purple);
  opacity: 0.5;
}

#checkout section.checkout-step.js-current-step .step-title {
  color: white !important;
  background: var(--color-primary-purple);
  opacity: 1;
  margin-bottom: 20px;
}

#checkout section.checkout-step.js-current-step .step-number {
  color: white !important;
}

#checkout .use_same_address:before {
  color: var(--color-primary-purple) !important;
}

#checkout .cart-grid-right section {
  border-bottom: 1px solid #e9e9e9;
  padding-top: 10px;
  padding-bottom: 10px;
}

#checkout-comment-order-step label {
  text-align: left;
}

#checkout #order_commnet {
  border: 1px solid lightslategrey;
}

#checkout label[for^=payment-option] {
  text-align: left;
}

.page-checkout #js-checkout-summary.card .label,
.page-checkout #js-checkout-summary.card .value {
  color: black !important;
  flex-basis: 50%;
  text-align: right;
}

#checkout .promo-code-button {
  text-align: right;
}

#checkout .promo-code-button a {
  margin-right: 30px;
}

.page-checkout #js-checkout-summary.card .card-block.cart-summary-totals .cart-total .value {
  color: black !important;
}

.page-checkout .checkout-step .content p {
  color: #000000 !important;
}

.page-checkout .checkout-step .content p a {
  font-weight: 700;
  color: #000000 !important;
}

.page-checkout .checkout-step #delivery-addresses .address-item .address {
  margin-right: 0.9375rem
}

.page-checkout .checkout-step #delivery-addresses .address-item {
  background: none;
  border: 1px solid #e9e9e9;
}

.page-checkout .checkout-step .address-alias,
.page-checkout .checkout-step #delivery-addresses .address-item .address {
  color: #000000;
}

.page-checkout .checkout-step #delivery-addresses .address-item .radio-block {
  width: unset !important;
}

#checkout #payment-confirmation button {
  min-width: 300px;
}

.page-checkout .checkout-step .content .btn-complete {
  text-align: center;
}

@media (max-width: 767.98px) {

  /* 1. Ocultar la cabecera de la tabla de escritorio */
  #checkout .cart-products-header {
    display: none;
  }

  /* 2. Ajustar bordes y espaciado de cada item de producto */
  #checkout .cart-item {
    border: none; /* Reset inicial */
    border-bottom: 1px solid #e9e9e9; /* Borde inferior para todos (actúa como separador y borde final) */
    padding: 20px 0; /* Espaciado vertical interno */
    margin: 0;
  }

  #checkout .cart-item:first-child {
    border-top: 1px solid #e9e9e9; /* Borde superior SOLO para el primer item */
  }


  /* 3. Convertir el contenedor de la línea de producto a CSS Grid */
  #checkout .product-line-grid {
    display: grid;
    grid-template-columns: auto 1fr auto; /* 3 columnas: [imagen+cantidad+precio_unit], [subtotal], [papelera] */
    grid-template-rows: auto auto auto; /* 3 filas: [info_prod], [cantidad+subtotal], [precio_unit] */
    gap: 5px 15px; /* Espacio entre filas y columnas */
    align-items: center;
    padding: 0 10px; /* Añadimos un poco de padding lateral para que no pegue a los bordes */
  }

  /* 4. Resetear los estilos de las columnas de escritorio */
  #checkout .cart-col {
    flex: unset !important;
    width: auto !important;
    padding: 0 !important;
    border: none !important;
    text-align: left !important;
  }

  /* 5. Posicionar cada elemento en la nueva grid */

  /* Columna Artículo (Imagen + Info): Fila 1, columnas 1 y 2 */
  #checkout .cart-col-article {
    grid-row: 1;
    grid-column: 1 / span 2;
    align-self: start; /* Alinear al principio de la celda */
  }

  /* Columna Precio (Unitario): Fila 3, columna 1 */
  #checkout .cart-col-price {
    grid-row: 3;
    grid-column: 1;
    font-size: 0.9rem;
    color: #555;
  }
  #checkout .cart-col-price .price::before {
    content: 'Precio Unidad: ';
    font-weight: normal;
  }

  /* Columna Cantidad: Fila 2, columna 1 */
  #checkout .cart-col-quantity {
    grid-row: 2;
    grid-column: 1;
  }

  /* Ajustar el input de cantidad y su label para que estén en columna */
  /*
  #checkout .cart-col-quantity .qty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  #checkout .bootstrap-touchspin .js-cart-line-product-quantity {
    width: 100px !important;
    height: 45px !important;
    border-radius: 25px !important;
    text-align: center !important;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
  }


   */
  #checkout .qty-label {
    order: initial;
    padding-left: 5px;
  }


  /* Columna Subtotal: Fila 2, columna 2 */
  #checkout .cart-col-subtotal {
    grid-row: 2;
    grid-column: 2;
    font-size: 1.1rem;
    font-weight: bold;
    color: #000 !important;
    justify-self: start;
    display: flex; /* Para controlar la alineación del 'x' */
    align-items: center; /* Centrar verticalmente el 'x' con el precio */
  }
  /* Añadir la 'x' antes del subtotal */
  #checkout .cart-col-subtotal .product-price::before {
    content: 'x';
    margin-right: 8px;
    font-weight: normal;
    color: #555; /* Le damos un color más suave como en la imagen */
  }


  /* Columna Acción (Papelera): Fila 2, columna 3 */
  #checkout .cart-col-action {
    grid-row: 2;
    grid-column: 3;
    justify-self: end;
  }

  /* 6. Estilos finales */
  #checkout .product-line-image img {
    width: 100px;
  }
  #checkout .product-line-info .label {
    font-size: 1rem;
  }
  #checkout .product-line-info .reference {
    font-size: 0.8rem !important;
  }

  #checkout .container {
    padding-left: 20px;
    padding-right: 35px;
  }

}

/*
================================================================================
  CARRITO DESPLEGABLE - LEO FEATURE
================================================================================
*/

#_desktop_cart span.total-value,
#_desktop_cart h3.header-dropdown,
#_desktop_cart .product-name.label,
#_desktop_cart .current-price,
#_desktop_cart .leo-input-product-quantity {
  color: #000000;
}

#_desktop_cart h3.header-dropdown {
  border-bottom: 1px solid #e9e9e9;
}

#_desktop_cart .wrap-leo-actions {
  background-color: unset;
  border: 1px solid #e9e9e9;
}

#_desktop_cart .leo-cart-dropdown-action {
  text-align: center;
}

#_desktop_cart .leo-cart-dropdown-action > a {
  margin: 20px 20px;
  min-width: 220px;
}

#_desktop_cart .leo-cart-item-info {
  display: flex;
  flex-flow: row nowrap;
}

#_desktop_cart .product-name.label {
  font-weight: normal;
}

#_desktop_cart .wrap-leo-actions {
  color: #000000;
}

/*
================================================================================
  AUTENTICACIÓN
================================================================================
*/

/******************************* LOGIN *****************************************/

#authentication #content .box-container {
  padding: 0;
}

#authentication #main {
  padding-top: 15px;
}

#authentication #main .page-header {
  margin-bottom: 0;
}

#authentication #login-form  {
  background-color: var(--background-beige);
  padding: 2vw 2.5vw;
  border-radius: 5px;
  box-shadow: 1px 1px 5px rgba(104, 85, 70, 0.25);
}

#authentication label.form-control-label,
#authentication .page-header h1 {
  color: #000000;
}

#authentication input,
#authentication select {
  border: 1px solid #000000;
  border-radius: 35px;
}

#authentication hr {
  background-color: #000000;
}

#authentication .no-account a {
  color: #000000;
}

#authentication .input-group .input-group-btn>.btn[data-action=show-password] {
  background: transparent;
}

#authentication .form-group .input-group.js-parent-focus {
  position: relative;
}

#authentication .form-group .input-group button[data-action="show-password"] {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  z-index: 10;

  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;

  font-size: 0;
  color: transparent;

  width: 25px;
  height: 25px;
  cursor: pointer;
}

#authentication .form-group .input-group button[data-action="show-password"]:focus,
#authentication .form-group .input-group button[data-action="show-password"]:active,
#authentication .form-group .input-group button[data-action="show-password"]:hover {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

#authentication .form-group .input-group button[data-action="show-password"]::before {
  font-family: "FontAwesome";
  font-size: 16px;
  color: #555;

  display: inline-block;
  vertical-align: middle;
}

#authentication .form-group .input-group input[type="password"] + .input-group-btn .btn::before {
  content: "\f06e";
}

#authentication .form-group .input-group input[type="text"].js-visible-password + .input-group-btn .btn::before {
  content: "\f070";
}

#authentication .form-group .input-group .js-visible-password {
  padding-right: 40px;
}

#authentication #login-form > footer {
  text-align: center;
}

@media (min-width: 768px) {

  #authentication #login-form .form-group .form-control-label,
  #authentication #login-form .form-group .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }

  #authentication #login-form .form-group .form-control-label {
    text-align: left;
    margin-bottom: 5px;
  }
}

@media (max-width: 767.98px) {
  #authentication #main .page-header h1 {
    margin-top: 0px;
  }
}

/***************************** REGISTRO *********************** **************************************************/

#authentication section.register-form {
  background-color: var(--background-beige);
  padding: 2vw 2.5vw;
  border-radius: 5px;
  box-shadow: 1px 1px 5px rgba(104, 85, 70, 0.25);
}

/***************************** PASSWORD (FORM OLVIDO CONTRASEÑA **************************************************/

#password #content .box-container {
  padding: 0;
}

#password #main {
  padding-top: 15px;
}

#password #main .page-header {
  margin-bottom: 0;
}

#password #content {
  background-color: var(--background-beige);
  padding: 2vw 2.5vw;
  border-radius: 5px;
  box-shadow: 1px 1px 5px rgba(104, 85, 70, 0.25);
}

#password label.form-control-label,
#password .page-header h1 {
  color: #000000;
  width: unset;
}

#password section.form-fields.renew-password .form-group.row {
  display: flex;
  flex-direction: column; /* Apila los elementos verticalmente */
  align-items: center;
}

/* Anulamos el ancho y el margen de las columnas de la rejilla */
#password section.form-fields.renew-password .form-group.row > [class*="col-"],
#password section.form-fields.renew-password .form-group.row > [class*="offset-"] {
  max-width: 100%;
  flex-basis: 100%;
  margin-left: 0;
  padding-left: 0; /* Opcional, para quitar el espaciado de la columna */
  padding-right: 0; /* Opcional, para quitar el espaciado de la columna */
}

#password .renew-password [type=submit] {
  margin-left: 0px;
}


#password input {
  border: 1px solid #000000;
  border-radius: 35px;
}

#password .form-group .input-group.js-parent-focus {
  position: relative;
}

#password .form-group .input-group button[data-action="show-password"] {
  position: absolute; top: 50%; right: 10px; transform: translateY(-50%); z-index: 10;
  background: transparent; border: none; box-shadow: none; padding: 0; margin: 0;
  font-size: 0; color: transparent; width: 25px; height: 25px; cursor: pointer;
}

#password .form-group .input-group button[data-action="show-password"]:focus,
#password .form-group .input-group button[data-action="show-password"]:active,
#password .form-group .input-group button[data-action="show-password"]:hover {
  background-color: transparent !important; box-shadow: none !important;
  border: none !important; outline: none !important;
}

#password .form-group .input-group button[data-action="show-password"]::before {
  font-family: "FontAwesome"; font-size: 16px; color: #000;
  display: inline-block; vertical-align: middle;
}

#password .form-group .input-group input[type="password"] + .input-group-btn .btn::before { content: "\f06e"; }
#password .form-group .input-group input[type="text"].js-visible-password + .input-group-btn .btn::before { content: "\f070"; }
#password .form-group .input-group .js-visible-password { padding-right: 40px; }

@media (min-width: 768px) {
  #login-form .form-group .form-control-label,
  #login-form .form-group .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    text-align: left;
    margin-bottom: 8px;
  }

  #password .forgotten-password .form-group.center-email-fields {
    display: flex;
    flex-wrap: wrap;
    max-width: 70%;
    margin: 0 auto;
  }

  #password .forgotten-password .form-group.center-email-fields > * {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    text-align: left;
  }

  #password .forgotten-password .form-group.center-email-fields > *:not(:last-child) {
    margin-bottom: 10px;
  }

  #password .forgotten-password .form-group.center-email-fields button {
    text-align: center;
  }
}

@media (max-width: 767.98px) {
  #password #main .page-header h1 {
    margin-top: 0px;
  }
}

/*
================================================================================
  ÁREA DE CLIENTE
================================================================================
*/

#my-account #content .box-container {
  padding: 0;
}

#my-account #main {
  padding-top: 15px;
}

#my-account #main .page-header {
  margin-bottom: 0;
}

#my-account section.top-box {
  background-color: var(--background-beige);
  padding: 2vw 2.5vw;
  border-radius: 5px;
  box-shadow: 1px 1px 5px rgba(104, 85, 70, 0.25);
  color: #000000;
}

#my-account h2.account-title {
  text-transform: unset;
  padding: 0;
  margin-bottom: 0;
}

#my-account .top-beetween {
  margin: 0;
}

#my-account .my-account .customer-photo {
  background-color: var(--color-secondary-purple);
}

#my-account .account-title,
#my-account .my-account .top-box h3,
#my-account .my-account .customer-infobox b,
#my-account .my-account .btn-collapser,
#my-account #more_info p {
  color: #000000;
}

#my-account .my-account .wrap-collapse .btn-collapse img {
  width: 40px;
}

#my-account .my-account .accordion-sections .wrap-collapse:first-of-type {
  border-top: 1px solid #efefef;
}

#my-account .my-account .wrap-collapse {
  border-bottom: 1px solid #efefef;
}

#my-account .modal .modal-content .modal-header {
  background-color: var(--color-primary-purple);
}

#my-account .my-account .table td,
#my-account .my-account .table th {
  color: #000000;
  background-color: rgba(142, 142, 142, 0.1);
  order-top: 2px solid #e0e0e0;
  border-bottom: 2px solid #e0e0e0;
  text-align: center;
}

#my-account .my-account .table thead > tr > th {
  background-color: #FFFFFF;
  text-transform: uppercase;
}

#my-account .my-account .table td a {
  font-weight: bold;
}

#my-account .my-account .table td input {
  border: 1px solid #000000;
  border-radius: 35px;
}

#my-account .my-account .table td a:hover {
  font-weight: bold;
  text-decoration: underline;
}

#my-account .collapse-box .btn-primary {
  background-color: #000000;
  color: #ffffff !important;
  border: none;
  padding: clamp(8px, 1.2vw, 12px) clamp(15px, 2.5vw, 25px);
  font-size: clamp(13px, 1.5vw, 15px);
  border-radius: 50px;
  text-decoration: none;
  font-weight: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-transform: none;
  line-height: 1.2;
  box-shadow: none;
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

#addresses #main header.page-header h1 {
  color: #000000;
}

#my-account .btn-link {
  color: var(--color-primary-purple);
  cursor: pointer;
}

#my-account table form > button {
  background-color: #000000;
  color: #ffffff !important;
  border: none;
  padding: clamp(8px, 1.2vw, 12px) clamp(15px, 2.5vw, 25px);
  font-size: clamp(13px, 1.5vw, 15px);
  border-radius: 50px;
  text-decoration: none;
  font-weight: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-transform: none;
  line-height: 1.2;
  box-shadow: none;
  transition: background-color 0.3s ease, opacity 0.3s ease;
  cursor: pointer;
}

#my-account b,
#my-account #order-topbox > div:nth-child(4) > div.col-md-4 > p,
#my-account #order-topbox > div:nth-child(4) > div.col-md-4,
#my-account .order-details p,
#my-account .order-totals div,
#my-account .order-totals h3,
#my-account h6 {
  color: black;
}

#customer-accordions > div.order-details > div.table-responsive > table > tbody > tr > td > b {
  cursor: pointer;
}

#customer-accordions #order-topbox > div:nth-child(1) > div.col-md-4.text-right > a {
  margin-bottom: 15px;
}

#my-account .add-to-cart::before {
  content: '';
  margin-right: unset;
}

#my-account div.logout-container {
  display: none;
}

.my-account .customers .customer-link .photo {
  background-color: var(--color-secondary-purple);
}

.my-account .customers div.customer-results > a > div > div.data > span > span,
.my-account .customers div.customer-results > a > div > div.data > span > b {
  color: black;
}

#my-account .accordion-sections > section > div.top-floaters {
  margin: 5px;
  margin-bottom: 15px;
  position: relative;
  top: 0;
  right: 0;
  width: 100%;
  text-align: right;
}

#my-account .accordion-sections > section > div.top-floaters a {
  display: inline-flex;
  min-width: 100px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  margin-right: 10px;
}

#my-account .accordion-sections > section > div.top-floaters > a > span.hidden-xs-down {
  font-size: clamp(12px, 1vw, 16px);
}

#my-account #content > div > div.col-md-4.col-md-4.left-sidebar > div > div.top-beetween > div > div > button {
  margin-left: 0;
}

#my-account #input-search {
  border: 1px solid #000000;
  border-radius: 35px;
}

.dropdown-users a .wrap-icon {
  background-color: var(--color-secondary-purple);
}

@media screen and (max-width: 767.98px) {

  #my-account .pb-1 {
    padding-bottom: 15px;
  }

  #my-account #content > div > div.col-md-4.col-md-4.left-sidebar > div > div.top-beetween {
    justify-content: center;
  }

  #my-account div.logout-container {
    display: block;
  }

  #my-account div.logout-container {
    text-align: center;
    margin-bottom: 20px;
    display: none;
  }

  #my-account a.logout {
    background-color: #000000;
    color: #ffffff !important;
    border: none;
    padding: clamp(8px, 1.2vw, 12px) clamp(15px, 2.5vw, 25px);
    font-size: clamp(13px, 1.5vw, 15px);
    border-radius: 50px;
    text-decoration: none;
    font-weight: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-transform: none;
    line-height: 1.2;
    box-shadow: none;
    transition: background-color 0.3s ease, opacity 0.3s ease;
  }

  #my-account a.logout .icon-logout {
    margin-left: 10px;
  }

  .my-account .flex-info {
    justify-content: center;
  }

  .my-account .flex-info .customer-infobox {
    padding-left: 10px;
  }

  #customer-accordions > div.accordion-sections > section > div.flex-info > div.customer-photo.icon-round-center {
    display: none;
  }

  .my-account .flex-info h3,
  .my-account .flex-info p {
    text-align: center;
    font-size: clamp(12px, 1vw, 16px);
    width: 100%;
  }

  .my-account .accordion-sections > section > div.flex-info > div.customer-infobox > span {
    width: 100%;
    text-align: center;
  }

  .my-account .wrap-collapse {
    background-color: white;
    padding-left: 10px;
    width: 100%;
  }

  .my-account .wrap-collapse .btn-collapse {
    padding: 10px 11px 3px 0;
    text-transform: uppercase;
    font-weight: 300;
    font-size: clamp(12px, 1vw, 16px);
  }

  #my-account .accordion-sections {
    position: fixed;
    left: 0;
    bottom: 0px;
    background-color: var(--background-beige) !important;
    z-index: 100;
    border-radius: 10px;
    box-shadow: 5px 5px 5px rgba(104, 85, 70, 0.25);
    width: 100%;
    overflow-y: visible;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
  }

  #my-account .my-account .wrap-collapse .btn-collapse img {
    width: 25px;
  }

  #my-account section.top-box {
    border-radius: unset;
    box-shadow: unset;
  }

  #my-account .accordion-sections > section > div.top-floaters > a > span.hidden-xs-down {
    display: block !important;
  }

  #my-account .customer-results,
  #my-account .my-account {
    min-height: 90vw;
  }

  #my-account #content-wrapper {
    padding-top: 0;
  }

}

@media screen and (max-width: 575.98px) {

  #my-account .accordion-sections > section > div.top-floaters {
    text-align: center;
  }

  #my-account .my-account table tbody tr td {
    border-top: unset;
  }
}



/* ################# CONFIRMACIÓN PEDIDO ############################ */


#order-confirmation h2,
#order-confirmation h3,
#order-confirmation .details > strong,
#order-confirmation .details,
#order-confirmation .row #order-items span,
#order-confirmation #order-items,
#order-confirmation #order-details > div > div > ul > li b,
#order-confirmation #order-details #order-comment > b,
#order-confirmation #order-details > div > div > ul  li {
  color: #000000;
}

#order-confirmation .order_confirmation,
#order-confirmation #order-items > div.row.head-row {
  border-bottom: 1px solid #e0e0e0;
}

.page-order-confirmation .order-confirmation-table {
  border-top: unset !important;
}

#order-confirmation .order-line.row {
  border-bottom: 1px solid #e0e0e0;
}

#order-confirmation  #order-items .order-line hr {
  border-color: white;
}


/*
================================================================================
  PÁGINA / LISTADO DE FAVORITOS
================================================================================
*/


#module-leofeature-mywishlist .container {
  background-color: var(--background-beige);
  padding: 2vw 2.5vw;
  border-radius: 5px;
  box-shadow: 1px 1px 5px rgba(104, 85, 70, 0.25);
  color: #000000;
}

#module-leofeature-mywishlist #wishlist_name {
  border: 1px solid #000000;
  border-radius: 35px;
}

#module-leofeature-mywishlist .table td,
#module-leofeature-mywishlist .table th {
  color: #000000;
  background-color: rgba(142, 142, 142, 0.1);
  order-top: 2px solid #e0e0e0;
  border-bottom: 2px solid #e0e0e0;
  text-align: center;
}

#module-leofeature-mywishlist .table thead > tr > th {
  background-color: #FFFFFF;
  text-transform: uppercase;
}

#module-leofeature-mywishlist .table td a {
  font-weight: bold;
}

#module-leofeature-mywishlist .table td input,
.wishlist-product-info div > input,
.wishlist-product-info div > select,
#module-leofeature-mywishlist > div.modal.leo-modal.leo-modal-send-wishlist div.modal-body > div > form div > input {
  border: 1px solid #000000;
  border-radius: 35px;
}

#module-leofeature-mywishlist .table td a:hover {
  font-weight: bold;
  text-decoration: underline;
}

#module-leofeature-mywishlist #mywishlist > div.list-wishlist > table > tbody > tr > td:nth-child(1) > a {
  display: flex;
  align-items: end;
}

#module-leofeature-mywishlist #mywishlist > ul > li.pull-xs-left > a,
div.delete-wishlist-product.clearfix > a > i {
  color: black;
}

#module-leofeature-mywishlist #mywishlist > ul > li > a {
  display: none;
}

#module-leofeature-mywishlist .btn-info,
div.wishlist-product-action > div > form > button {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: none !important;
  padding: clamp(8px, 1.2vw, 12px) clamp(15px, 2.5vw, 25px);
  font-size: clamp(13px, 1.5vw, 15px);
  border-radius: 50px;
  text-decoration: none;
  font-weight: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-transform: none;
  line-height: 1.2;
  box-shadow: none;
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

#module-leofeature-mywishlist > div.modal.leo-modal.leo-modal-send-wishlist div.modal-header > div,
#module-leofeature-mywishlist > div.modal.leo-modal.leo-modal-send-wishlist div.modal-body > div > form div > label {
  color: black;

}

#module-leofeature-mywishlist .list-wishlist tr.show {
  background-color: unset !important;
}

#module-leofeature-mywishlist #mywishlist > div.send-wishlist {
  text-align: center;
}

#module-leofeature-mywishlist .product-miniature.leo-wishlistproduct-item {
  margin: 0 auto;
  margin-bottom: 20px;
}

/*
================================================================================
  PÁGINAS CMS / CONÓCENOS
================================================================================
*/

#cms.cms-id-22 h1 {
  color: var(--color-primary-purple);
}

#cms.cms-id-22 p {
  color: #000000;
}

/* ======================================= */
/* ===  SECCIÓN PRINCIPAL (FLEXBOX)    === */
/* ======================================= */

#cms.cms-id-22 .main-content-flex {
  display: flex;
  flex-direction: column; /* Vista Móvil: Texto arriba, Imagen abajo */
}

/* El bloque de la imagen necesita un margen superior en móvil para separarse del texto */
#cms.cms-id-22 .image-content {
  margin-top: 1.5rem;
  text-align: center;
}

/* ======================================= */
/* ===    SECCIÓN DE ICONOS            === */
/* ======================================= */

#cms.cms-id-22 .icon-wrapper {
  background-color: #f9f7f6;
  border-radius: 8px;
  width: 90px;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin-right: 20px;
}

#cms.cms-id-22 .icon-block {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
}

#cms.cms-id-22 .icon-text h4 {
  margin-bottom: 0.25rem;
  font-size: 1rem;
  font-weight: bold;
  text-align: left;
}

#cms.cms-id-22 .icon-text p {
  margin-bottom: 0;
  font-size: 0.9rem;
  text-align: left;
}

/* ======================================= */
/* ===         VISTA DESKTOP           === */
/* ======================================= */
@media (min-width: 768px) {

  /* --- Lógica Flexbox para la sección principal --- */
  #cms.cms-id-22 .main-content-flex {
    flex-direction: row;
    gap: 3rem;
    margin-bottom: 5rem;
    /* --- Añadido para limitar el ancho en pantallas grandes --- */
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
  }

  #cms.cms-id-22 .text-content {
    order: 1; /* Texto a la izquierda */
    flex-basis: 58%; /* Ocupa ~7/12 del espacio */
  }

  #cms.cms-id-22 .image-content {
    order: 2; /* Imagen a la derecha */
    flex-basis: 42%; /* Ocupa ~5/12 del espacio */
    margin-top: 0; /* Quitamos el margen superior que solo era para móvil */
    display: flex; /* Para controlar la imagen interior */
    justify-content: center;
  }

  #cms.cms-id-22 .image-content img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    max-width: 300px;
  }

  /* --- Ajustes para el resto de la página --- */
  #cms.cms-id-22 .icon-block {
    margin-bottom: 0;
  }

  #cms.cms-id-22 p.p-block-end {
    margin-top: 4vw;
  }
}

/* ======================================= */
/* ===          VISTA MÓVIL            === */
/* ======================================= */
@media (max-width: 767.98px) {
  #cms.cms-id-22 .icon-block {
    margin-top: 4vw;
  }

  #cms.cms-id-22 p.p-block.p-block-last {
    margin-bottom: 1vw;
  }

  #cms.cms-id-22 p.p-block-end {
    margin-top: 1vw;
  }
}

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


.page-contact .page-content {
  border-left: 1px solid white;
}

#contact #left-column > div > div > h4 {
  color: var(--color-primary-purple);
  text-transform: unset;
  margin-bottom: 10px;
}

#contact #left-column .d-inline-block {
  padding-top: 0px !important;
  padding-bottom: 5px !important;
}

#contact .contact-info-title {
  display: flex;
  flex-flow: row nowrap;
}

#contact .contact-info-title img {
  margin-right: 10px;
}

#contact .contact-info-title h4,
#contact .contact-info-title h3 {
  font-size: clamp(14px, 3vw, 17px);
}

/* 1. Contenedor del mapa */
#contact-map {
  position: relative;
  padding-bottom: 75%;
  height: 0;
  overflow: hidden;
}

/* 2. El iframe dentro del contenedor */
#contact-map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.contact-rich .block .data {
  margin-bottom: 20px;
  display: flex;
  flex-flow: column nowrap;
}

#contact #content > section > div > h3 {
  text-transform: unset;
  color: var(--color-primary-purple);
}

#contact section.form-fields {
  margin-top: 40px;
  background-color: var(--background-beige);
  padding: 2vw 2.5vw;
  border-radius: 5px;
  box-shadow: 1px 1px 5px rgba(104, 85, 70, 0.25);
  color: #000000;
}

#content > section > form > section > div > div > h3 {
  color: var(--color-primary-purple);
  text-transform: unset;
  margin-top: 20px;
}

#contact input,
#contact select,
#contact textarea {
  border: 1px solid #000000;
  border-radius: 35px;
}

#contact label {
  color: #000000;
}

#contact .group-span-filestyle .btn-default {
  background: unset !important;
  padding: 0;
}

#contact .buttonText,
#contact #content > section > form > footer > input.btn.btn-primary {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: none !important;
  padding: clamp(8px, 1.2vw, 12px) clamp(15px, 2.5vw, 25px);
  font-size: clamp(13px, 1.5vw, 15px);
  border-radius: 50px;
  text-decoration: none;
  font-weight: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-transform: none;
  line-height: 1.2;
  box-shadow: none;
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

#contact #content > section > form > footer > input.btn.btn-primary {
  margin-top: 30px;
  min-width: 200px;
}

@media (max-width: 767.98px) {
  #contact section.form-fields {
    padding: 1vw 7vw;
  }

  #contact section.contact-form {
    padding: 0;
  }

  #contact #content > section > form > footer {
    text-align: center;
  }
}

/* ==========================================================================
   ESTILOS para la página de Productos Personalizados
   ========================================================================== */

/* --- 1. Contenedor principal y estilos base --- */
body#module-contactform_customproducts-support #main .custom-page-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

body#module-contactform_customproducts-support .top-image-container img {
  width: 100%;
  height: auto;
  display: block;
}

body#module-contactform_customproducts-support .section-full-width.cms-content {
  background-color: var(--background-beige);
  padding: 2vw 2.5vw;
  border-radius: 5px;
  box-shadow: 1px 1px 5px rgba(104, 85, 70, 0.25);
}

body#module-contactform_customproducts-support #content > div > div:nth-child(9) {
  margin-top: 20px;
}

body#module-contactform_customproducts-support .title-section {
  padding: 30px;
  text-transform: uppercase;
}

body#module-contactform_customproducts-support .section-full-width.cms-content h2 {
  color: var(--color-primary-purple);
  text-transform: unset;
}

body#module-contactform_customproducts-support .section-full-width.cms-content h3 {
  margin-top: 20px;
  margin-left: 40px;
}

/* --- 2. CUADRÍCULA 'QUE PERSONNALISONS-NOUS ?' --- */
body#module-contactform_customproducts-support #main .custom-page-wrapper .section-grid.grid-image-captions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 30px 15px !important;
  padding: 20px 10px !important;
}

body#module-contactform_customproducts-support #main .custom-page-wrapper .grid-image-captions .grid-column {
  flex: 0 0 15% !important;
  max-width: 15% !important;
  text-align: center;
}

body#module-contactform_customproducts-support #main .custom-page-wrapper .grid-image-captions .grid-column img {
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto 10px auto !important;
  display: block !important;
}

body#module-contactform_customproducts-support #main .custom-page-wrapper .grid-image-captions .grid-column figcaption {
  color: #0c0c0c;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
}


/* --- 3. SECCIÓN 'A VOTRE ECOUTE !' Y 'ANALYSE...'  --- */
body#module-contactform_customproducts-support #main .custom-page-wrapper .grid-item-numbers {
  display: grid;
  /* Usamos auto-fit para que sea flexible y robusto */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px 20px; /* Aumentamos el espacio para que no se solapen */
  padding: 20px 10px;
  background-color: white !important;
  margin-top: 20px;
}

body#module-contactform_customproducts-support #main .custom-page-wrapper .image-box-item {
  display: flex; /* Mantenemos flex para alinear imagen y texto */
  align-items: center;
  gap: 15px; /* Espacio entre la imagen y el bloque de texto */
}

body#module-contactform_customproducts-support #main .custom-page-wrapper .image-box-item img {
  width: auto; /* Dejamos que la imagen tenga su tamaño */
  height: 60px; /* Fijamos la altura para consistencia */
  flex-shrink: 0; /* Evita que la imagen se encoja */
}

body#module-contactform_customproducts-support #main .custom-page-wrapper .image-box-item > div {
  /* Le decimos al contenedor del texto que ocupe el resto del espacio flexible */
  flex: 1;
  /* Evita que el texto se salga de su contenedor */
  min-width: 0;
}

body#module-contactform_customproducts-support #main .custom-page-wrapper .image-box-item .title {
  color: black;
  font-size: 16px;
  margin: 0 0 5px 0;
  font-weight: normal;
}
body#module-contactform_customproducts-support #main .custom-page-wrapper .image-box-item .title b {
  font-weight: 900;
}
body#module-contactform_customproducts-support #main .custom-page-wrapper .image-box-item .description {
  color: black;
  font-size: 13px;
  margin: 0;
  word-wrap: break-word; /* Rompe el texto si es necesario */
}

body#module-contactform_customproducts-support #main .custom-product-form-wrapper input,
body#module-contactform_customproducts-support #main .custom-product-form-wrapper select,
body#module-contactform_customproducts-support #main .custom-product-form-wrapper textarea {
  border: 1px solid #000000;
  border-radius: 35px;
}

body#module-contactform_customproducts-support #main .custom-product-form-wrapper .form-control {
  border: 1px solid #000000;
  border-radius: 35px;
  cursor: pointer;
  /*background-color: #efefef;*/
}

/* --- 4. OTRAS SECCIONES (Clientes, Iconos inferiores, etc.) --- */
body#module-contactform_customproducts-support #main .bottom-icons-section {
  display: flex; justify-content: center; padding: 40px 10px; text-align: center;
}
body#module-contactform_customproducts-support #main .icon-block { flex: 1; }
body#module-contactform_customproducts-support #main .icon-block img { max-width: 100px; margin-bottom: 15px; }
body#module-contactform_customproducts-support #main .icon-block p { font-size: 14px; margin: 0; color: black;}

body#module-contactform_customproducts-support #main .clients-gallery {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 10px;
}
body#module-contactform_customproducts-support #main .gallery-column img {
  width: 100%; height: auto; display: block;
}

/*------------------------------------------------------------------*/

/* --- ESTILOS BASE (MÓVIL - 1 COLUMNA) --- */
body#module-contactform_customproducts-support #main .text-content-final {
  display: flex !important;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px 0px;
}

body#module-contactform_customproducts-support #main .text-content-final .why-us-grid {
  /* En móvil, cada tarjeta ocupa el 100% del ancho */
  flex: 1 1 100%;
  box-sizing: border-box;
  background-color: #ffffff;
  border: 1px solid #e9e9e9;
  border-radius: 4px;
  padding: 20px;
  text-align: left;
  display: flex;
  flex-direction: column;
}

body#module-contactform_customproducts-support #main .text-content-final .why-us-grid img {
  max-width: 100%;
  width: 100%;
  height: auto; /* En móvil, la altura es automática para mantener la proporción */
  aspect-ratio: 16 / 9; /* Opcional: da una proporción fija a la imagen, como 16:9 */
  object-fit: cover;
  display: block;
  margin-bottom: 20px;
}

body#module-contactform_customproducts-support #main .text-content-final .why-us-grid h3 {
  font-size: 1.2em;
  margin: 0 0 10px 0;
}

body#module-contactform_customproducts-support #main .text-content-final .why-us-grid p {
  font-size: 0.9em;
  line-height: 1.6;
  color: #555;
  margin: 0;
}

body#module-contactform_customproducts-support #main .text-content-final .why-us-grid ul,
body#module-contactform_customproducts-support #main .text-content-final .why-us-grid ol {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
  line-height: 1.6;
  color: #555;
}

body#module-contactform_customproducts-support #main .text-content-final .why-us-grid li {
  margin-bottom: 5px;
}

body#module-contactform_customproducts-support #main .text-content-final .why-us-grid ul {
  list-style: disc; /* O list-style: auto; */
  padding-left: 20px; /* Devuelve el espacio para los bullets */
}

body#module-contactform_customproducts-support #main .text-content-final .why-us-grid ol {
  list-style: decimal; /* O list-style: auto; */
  padding-left: 20px; /* Devuelve el espacio para que los números no se solapen con el texto */
}


/* --- MEDIA QUERY PARA TABLETS (A PARTIR DE 600px - 2 COLUMNAS) --- */
@media (min-width: 600px) {
  body#module-contactform_customproducts-support #main .text-content-final .why-us-grid {
    /* 2 columnas: cada una ocupa el 50% menos la mitad del gap */
    flex: 1 1 calc(50% - 10px);
  }
}


/* --- MEDIA QUERY PARA ESCRITORIO (A PARTIR DE 992px - 3 COLUMNAS) --- */
@media (min-width: 992px) {
  body#module-contactform_customproducts-support #main .text-content-final .why-us-grid {
    /* 3 columnas: sobrescribe la regla de tablet */
    flex: 1 1 calc((100% - 40px) / 3);
  }

  body#module-contactform_customproducts-support #main .text-content-final .why-us-grid img {
    /* Solo en escritorio, forzamos la altura fija para alinear las filas */
    height: 180px;
  }
}

/*------------------------------------------------------------------*/

body#module-contactform_customproducts-support #main .text-content-final h2 {
  font-size: 1.5em; margin-top: 2em; margin-bottom: 1em;
}

/* --- 5. RESPONSIVIDAD (Todo junto y ordenado) --- */
@media (max-width: 1200px) {
  body#module-contactform_customproducts-support #main .custom-page-wrapper .grid-image-captions .grid-column {
    flex: 0 0 22% !important; max-width: 22% !important;
  }
}

@media (max-width: 992px) {
  body#module-contactform_customproducts-support #main .custom-page-wrapper .grid-item-numbers {
    /* Pasamos a 2 columnas en tablets */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

@media (max-width: 767px) {
  body#module-contactform_customproducts-support #main .custom-page-wrapper .grid-image-captions .grid-column {
    flex: 0 0 45% !important; max-width: 45% !important;
  }
  body#module-contactform_customproducts-support #main .custom-page-wrapper .grid-item-numbers {
    /* Pasamos a 1 columna en móviles */
    grid-template-columns: 1fr;
  }
  body#module-contactform_customproducts-support #main .clients-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  body#module-contactform_customproducts-support #main .bottom-icons-section {
    flex-direction: column; align-items: center;
    gap: 20px;
  }
  body#module-contactform_customproducts-support #main .icon-block {
    max-width: 70%;
  }
}

/* Contenedor principal de la cuadrícula */
body#module-contactform_customproducts-support #main .category-grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  padding: 20px 10px;
  background-color: #f7f3f0;
}

/* LA TARJETA INDIVIDUAL */
body#module-contactform_customproducts-support #main .category-card {
  position: relative; /* Base para el posicionamiento absoluto del enlace */
  padding: 20px 15px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  cursor: pointer; /* Indica que toda la tarjeta es clickeable */
}

/* El efecto hover va en la tarjeta */
body#module-contactform_customproducts-support #main .category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* EL ENLACE QUE CUBRE TODA LA TARJETA (LA CORRECCIÓN ESTÁ AQUÍ) */
body#module-contactform_customproducts-support #main .card-full-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 0; /* Oculta cualquier texto residual del enlace */
  z-index: 3; /* ¡LA CLAVE! Se pone por encima de todo lo demás */
}

/* Título e imagen de la tarjeta */
body#module-contactform_customproducts-support #main .category-card h3,
body#module-contactform_customproducts-support #main .category-card img {
  /* No necesitan z-index, quedarán por debajo del enlace */
}

body#module-contactform_customproducts-support #main .category-card h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 15px 0;
  color: #333;
}

body#module-contactform_customproducts-support #main .category-card img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* --- RESPONSIVIDAD --- */
@media (max-width: 992px) {
  body#module-contactform_customproducts-support #main .category-grid-container {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 767px) {
  body#module-contactform_customproducts-support #main .category-grid-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  body#module-contactform_customproducts-support #main .category-card h3 {
    font-size: 14px;
  }
}

#noLoggedUserModal .modal-dialog .modal-content .modal-body .content {
  border: 1px solid #efefef;
}

#noLoggedUserModal .modal-dialog .modal-content .modal-body .content {
  padding: 3rem;
}

#noLoggedUserModal .modal-dialog .modal-content .modal-body .content .title,
#noLoggedUserModal .modal-dialog .modal-content .modal-body .content p {
  color: #000000;
}