@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat/Montserrat-SemiBold.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat/Montserrat-Bold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat/Montserrat-SemiBold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat/Montserrat-Bold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat/Montserrat-SemiBold.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}





/* Notificación superior Bolsaval */

.bolsaval_notification {
    background-image: linear-gradient(
    to right,
    #ffffff 0%,     /* blanco */
    #d9f99d 5%,    /* verde claro */
    #d9f99d 95%,    /* verde claro */
    #ffffff 100%    /* blanco */
  ) !important;       
/*    color: #27272a; */
}

.bolsaval_notification a {
    color: inherit;
    text-decoration: none;
}

.bolsaval_notification a:hover,
.bolsaval_notification .hoverable:hover {
    color: #65a30d; /* lime-600 */
}

/* Fondo degradado verde para las filas */
.row-degradado {
    background: linear-gradient(83deg, #CDDE16, #9DA820);
    color: white;
    padding: 30px 20px;
}

.row-degradado h1,
.row-degradado h3,
.row-degradado p {
    color: white;
}

/* ============================
   Amasty Cookie – Checkboxes (Hyvä)
   Colores corporativos:
   - Base:  #9DA820
   - Hover: #CDDE16
   ============================ */

/* Transición y compatibilidad general */
.am-cookie-bar-settings input[type='checkbox'].amsettings-bar-input-toggle,
.am-cookie-sidebar      input[type='checkbox'].amsettings-bar-input-toggle {
  transition: all .2s ease-in-out;
  accent-color: #9DA820;          /* navegadores modernos */
  border-color: #9DA820;
}

/* === Estado MARCADO (✔ visible en blanco) === */
.am-cookie-bar-settings input[type='checkbox'].amsettings-bar-input-toggle:checked,
.am-cookie-sidebar      input[type='checkbox'].amsettings-bar-input-toggle:checked {
  background-color: #9DA820 !important;
  border-color: #9DA820 !important;
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3e%3c/svg%3e") !important;
  background-size: 1em 1em;
  background-position: center;
  background-repeat: no-repeat;
}

/* === Hover / Focus (solo si NO está disabled) === */
.am-cookie-bar-settings input[type='checkbox'].amsettings-bar-input-toggle:not(:disabled):hover,
.am-cookie-sidebar      input[type='checkbox'].amsettings-bar-input-toggle:not(:disabled):hover,
.am-cookie-bar-settings input[type='checkbox'].amsettings-bar-input-toggle:not(:disabled):focus,
.am-cookie-sidebar      input[type='checkbox'].amsettings-bar-input-toggle:not(:disabled):focus {
  background-color: #CDDE16 !important;
  border-color: #CDDE16 !important;
  accent-color: #CDDE16;
  outline: none;
  box-shadow: 0 0 0 3px rgba(205, 222, 22, 0.35);
}

/* === Estado DISABLED (esencial: fijo/no editable) ===
   Gris claro de fondo + ✔ y borde en tu verde para integrarlo */
.am-cookie-bar-settings input[type='checkbox'].amsettings-bar-input-toggle:disabled,
.am-cookie-sidebar      input[type='checkbox'].amsettings-bar-input-toggle:disabled {
  background-color: #e5e7eb !important;   /* gray-200 */
  border-color: #9DA820 !important;
  cursor: not-allowed;
  opacity: 1; /* mantener legible */
}

/* Disabled + marcado: ✔ en verde corporativo */
.am-cookie-bar-settings input[type='checkbox'].amsettings-bar-input-toggle:disabled:checked,
.am-cookie-sidebar      input[type='checkbox'].amsettings-bar-input-toggle:disabled:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%239DA820' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3e%3c/svg%3e") !important;
  background-size: 1em 1em;
  background-position: center;
  background-repeat: no-repeat;
}

/* ============================================
   Menú principal – fondo con degradado suave
   Verde lima claro en el centro (#d9f99d)
   un poco más oscuro en la parte superior e inferior
   ============================================ */

.bg-slate-200 {
  background: linear-gradient(
    to right,
    #ffffff 0%,     /* blanco */
    #d9f99d 5%,    /* verde claro */
    #d9f99d 95%,    /* verde claro */
    #ffffff 100%    /* blanco */
  ) !important;
}


/* Swatch seleccionado: borde lime más grueso */
div[option.value][class*="border-gray-900"] {
  border-color: #84cc16 !important; /* lime-500 */
  border-width: 3px !important;     /* borde más ancho */
}

/* Swatch seleccionado con doble borde (negro + verde lime) */
.product-info-main .swatch-attribute .border-gray-900,
.product-info-main [class*="swatch"] .border-gray-900,
.product-info-main .cursor-pointer .border-gray-900 {
  border: 2px solid #000 !important;       /* borde interior negro */
  box-shadow: 0 0 0 3px #84cc16 !important; /* borde exterior lime-500 */
  border-radius: 2px;                       /* igual que los swatches */
}


/* Si Hyvä usa anillo (ring) azul en vez de borde, lo pasamos a verde corporativo */
.product-info-main .ring-blue-500,
.product-info-main .focus\:ring-blue-500:focus {
  --tw-ring-color: #84cc16 !important; /* lime-500 */
}

/* (Opcional) también en hover del seleccionado, por si quieres reforzarlo visualmente */
.product-info-main .border-gray-900:hover {
  border-color: #a3e635 !important;    /* lime-400 para un toque al pasar el ratón */
}



/*html { */
/*  scrollbar-color: #84cc16 #e5e7eb; */
/*  scrollbar-width: thin; */
/*} */


/* ============================================
   Footer Bolsaval – 3 franjas
   - top: gris clarito
   - middle: verde clarito
   - bottom: gris oscuro con texto blanco
   ============================================ */

/* 1) Parte superior: tarjetas (gris clarito visible) */
/* Franja superior: tarjetas (gris degradado) */
.page-footer .footer-top {
  background: linear-gradient(
    90deg,
    #f3f4f6 0%,    /* gris muy claro al inicio */
    #e5e7eb 5%,   /* gris clarito */
    #d1d5db 55%,   /* gris medio */
    #f3f4f6 100%   /* vuelve a claro al final */
  );
  color: #374151; /* texto slate-700 */
}

/* 2) Parte central: enlaces + redes (verde clarito) */
/* Franja central: enlaces + redes (verde degradado) */
.page-footer .footer-middle {
  background: linear-gradient(
    90deg,
    #f7fee7 0%,    /* verde casi blanco al inicio */
    #ecfccb 5%,   /* lime-100 */
    #d9f99d 95%,   /* lime-200 */
    #f7fee7 100%   /* vuelve a clarito */
  );
  color: #27272a; /* texto zinc-800 */
}
/* Social icons estilo botón oscuro para buen contraste */
.page-footer .footer-middle .social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #334155;   /* slate-700 */
  color: #ffffff;
  padding: 4px;                /* pequeño padding al círculo */
  transition: transform .15s ease, filter .15s ease, background-color .15s ease;
  border-radius: 9999px;
}
.page-footer .footer-middle .social-icon:hover {
  background-color: #475569;   /* slate-600 */
  transform: translateY(-1px);
}

/* 3) Parte inferior: copyright + legales (oscuro) */

.page-footer .footer-bottom {
  background: linear-gradient(
    90deg,
    #4b5563 0%,    /* slate-600: gris más claro pero aún oscuro */
    #27272a 5%,   /* zinc-800: casi negro */
    #27272a 95%,   /* zinc-800: casi negro */
    #4b5563 100%   /* slate-600: gris más claro pero aún oscuro */
  );
  color: #ffffff;
  border-top: 1px solid #374151; /* divisor sutil */
}

.page-footer .footer-bottom a {
  color: #ffffff;
}
.page-footer .footer-bottom a:hover {
  text-decoration: underline;
}


/* Copyright: blanco y negrita */
.page-footer .footer-bottom small,
.page-footer .footer-bottom .copyright {
  color: #ffffff !important;
  font-weight: 700 !important; /* bold */
}/* Copyright: blanco y negrita */
.page-footer .footer-bottom small,
.page-footer .footer-bottom .copyright {
  color: #ffffff !important;
  font-weight: 700 !important; /* bold */
}

/*  IMAGEN CONTACTO  --- */

/* Contenedor con el fondo: usa el BANNER con clase creacontact-img */
.pagebuilder-banner.creacontact-img,
.pagebuilder-column.creacontact-img {
  position: relative;
  overflow: hidden;
}

/* Quita rellenos de los “Text” del PB que estrechan y desplazan */
.creacontact-img > [data-content-type="text"] {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}
.creacontact-img [data-content-type="text"] p { margin: 0 !important; }

/* ---- ALTURAS (% respecto al contenedor con la imagen) ---- */
/* Email arriba (5%), de lado a lado */
.pagebuilder-banner.creacontact-img  > [data-content-type="text"].creacontact-email,
.pagebuilder-column.creacontact-img > [data-content-type="text"].creacontact-email {
  position: absolute !important;
  top: 5% !important;
  left: 0; right: 0;
  text-align: center;
  z-index: 3;
}

/* Teléfono abajo encima del horario */
.pagebuilder-banner.creacontact-img  > [data-content-type="text"].creacontact-phone,
.pagebuilder-column.creacontact-img > [data-content-type="text"].creacontact-phone {
  position: absolute !important;
  bottom: 12% !important;   /* ajusta si lo quieres aún más abajo/arriba */
  left: 0; right: 0;
  text-align: center;
  z-index: 3;
}

/* Horario al pie */
.pagebuilder-banner.creacontact-img  > [data-content-type="text"].creacontact-hours,
.pagebuilder-column.creacontact-img > [data-content-type="text"].creacontact-hours {
  position: absolute !important;
  bottom: 6% !important;
  left: 0; right: 0;
  text-align: center;
  z-index: 3;
}

/* ---- Estilo de texto (blanco + borde, tamaños fluidos y forzados) ---- */
.creacontact-email, .creacontact-email * {
  color:#fff !important; font-weight:700 !important;
  text-shadow:0 0 3px rgba(0,0,0,1), 0 0 6px rgba(0,0,0,1) !important;
  font-size:clamp(18px, 4vw, 34px) !important; line-height:1.15 !important;
}
.creacontact-phone, .creacontact-phone * {
  color:#fff !important; font-weight:800 !important;
  text-shadow:0 0 3px rgba(0,0,0,1), 0 0 6px rgba(0,0,0,1) !important;
  font-size:clamp(25px, 5.5vw, 45px) !important; line-height:1.1 !important;
}
.creacontact-hours, .creacontact-hours * {
  color:#fff !important;
  text-shadow:0 0 2px rgba(0,0,0,1), 0 0 4px rgba(0,0,0,1) !important;
  font-size:clamp(8px, 3.2vw, 24px) !important; line-height:1.2 !important;
}

/* --- Ajuste de ALTURAS --- */
.pagebuilder-column.creacontact-img > [data-content-type="text"].creacontact-phone,
.pagebuilder-banner.creacontact-img  > [data-content-type="text"].creacontact-phone {
  bottom: 18% !important;   /* antes 12% → sube un poco el teléfono */
}

.pagebuilder-column.creacontact-img > [data-content-type="text"].creacontact-hours,
.pagebuilder-banner.creacontact-img  > [data-content-type="text"].creacontact-hours {
  bottom: 8% !important;    /* deja un poco más de aire bajo el horario */
}

/* --- Halo/sombra más gruesa (mejor legibilidad) --- */


  /* “borde” negro suave + halo */
/*  text-shadow:
    0 0 3px rgba(39, 39, 42, 0.7),
    0 0 6px rgba(39, 39, 42, 0.6),
    1px 1px 0 rgba(39, 39, 42, 0.85),
   -1px 1px 0 rgba(39, 39, 42, 0.85),
    1px -1px 0 rgba(39, 39, 42, 0.85),
   -1px -1px 0 rgba(39, 39, 42, 0.85) !important;

 -webkit-text-stroke: 0.8px #dddfe4;

  color: #FFF !important;
}
*/
.creacontact-email, .creacontact-email *,
.creacontact-phone, .creacontact-phone *,
.creacontact-hours, .creacontact-hours * {

    text-shadow: none !important;
    filter: drop-shadow(0 0 1.5px rgba(85,85,85,0.7));
    paint-order: stroke fill;
}


/*  SLIDER 1 SLIDER 1 SLIDER 1 SLIDER 1 SLIDER 1 --- */


/* Banner: Montserrat con stroke gris + halo, centrado */
.creapageslider-label1 { text-align: center; }

.creapageslider-label1 h1,
.creapageslider-label1 h2,
.creapageslider-label1 h3,
.creapageslider-label1 h4,
.creapageslider-label1 h1 *,
.creapageslider-label1 h2 *,
.creapageslider-label1 h3 *,
.creapageslider-label1 h4 * {
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: 0.8px #555;                 /* contorno más fino */
  text-shadow: none !important;
  filter: drop-shadow(0 0 1px rgba(85,85,85,.65))   /* halo suave */
          drop-shadow(0 0 2px rgba(85,85,85,.45));
  paint-order: stroke fill;
}

/* Tamaños y pesos */
.creapageslider-label1 h1 { font-size: clamp(2.2rem, 4.6v	w, 4.6rem); font-weight: 900; line-height: 1.2; margin: 0 0 15px; }
.creapageslider-label1 h2 { font-size: clamp(2rem, 4vw, 4rem); font-weight: 900; line-height: 1.2; margin: 0 0 15px; }
.creapageslider-label1 h3 { font-size: clamp(1.1rem, 2vw, 1.8rem); font-weight: 600; line-height: 1.35; margin: 0 0 10px; }
.creapageslider-label1 h4 { font-size: clamp(1rem, 1.8vw, 1.4rem); font-weight: 600; line-height: 1.35; margin: 0; }

/* Estilos para los enlaces de texto (verde corporativo con hover más oscuro) */
/* Forzar color en enlaces de la zona de texto */
[data-content-type="text"] a.decorated-link {
  color: #bad405 !important;         /* verde corporativo */
  text-decoration: none !important;
  font-weight: 500;
}

[data-content-type="text"] a.decorated-link:hover {
  color: #a0b804 !important;         /* verde más oscuro en hover */
  text-decoration: underline !important;
}


/* ===========================
   Precios en listado de productos (Hyvä + Amasty)
   =========================== */

/* 0) Precio + "cada bolsa" en la MISMA línea */
.price-box .price-wrapper,
.price-box .am-price-per-unit {
  display: inline !important;
  white-space: nowrap;
}
.price-box .am-price-per-unit { margin-left: .25em; }

/* 1) Precio actual (FINAL) en verde — con y sin oferta */
.price-box [data-price-type="finalPrice"],
.price-box [data-price-type="finalPrice"] .price {
  color: #65a30d !important;
  font-weight: 600;
}

/* 2) Precio habitual (OLD) tachado cuando hay oferta */
.price-box [data-price-type="oldPrice"],
.price-box .old-price .price-wrapper,
.price-box .old-price .price-wrapper .price,
.price-box .old-price .price {
  color: #6b7280 !important;   /* gris oscuro */
  text-decoration: line-through;
  font-weight: 400;
}

/* 3) Precio mínimo por cantidades (tier / "As low as") */
.price-box .minimal-price-link .price-wrapper,
.price-box .minimal-price-link .price {
  color: #ea580c !important;   /* naranja llamativo */
  font-weight: 500;
}

/* ===== PDP (Hyvä + Amasty) ===== */

/* 0) MISMA LÍNEA: precio + "cada bolsa"
   OJO: usamos ~ en vez de + porque hay <template> entre medias */
.final-price .price-wrapper,
.final-price ~ .am-price-per-unit,
.tier-price-container .price-wrapper,
.tier-price-container .price-tier_price {
  display: inline !important;
  white-space: nowrap;
}
.final-price ~ .am-price-per-unit,
.tier-price-container .price-tier_price {
  margin-left: .35em;
  color: #6b7280; /* unidad en gris */
}

/* 1) Precio actual (final) en verde */
.final-price .price-wrapper,
.final-price .price-wrapper .price {
  color: #65a30d !important;
  font-weight: 700;
}

/* 2) Precio habitual (old) tachado */
.old-price .price-wrapper,
.old-price .price-wrapper .price,
.old-price .price {
  color: #6b7280 !important;
  text-decoration: line-through;
  font-weight: 400;
}

/* 3) Tiers ("Comprar X por ...") en naranja */
.tier-price-container .price-wrapper,
.tier-price-container .price-wrapper .price,
.tier-price-container .price {
  color: #ea580c !important;
  font-weight: 600;
}

/* (Opcional) borde de cada tier en verde suave */
.tier-price-container .item { border-color: #22c55e !important; }

}


/* Disabled + marcado: ✔ en verde corporativo */
.am-cookie-bar-settings input[type='checkbox'].amsettings-bar-input-toggle:disabled:checked,
.am-cookie-sidebar      input[type='checkbox'].amsettings-bar-input-toggle:disabled:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%239DA820' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3e%3c/svg%3e") !important;
  background-size: 1em 1em;
  background-position: center;
  background-repeat: no-repeat;
}

/* =============================
   MENÚ NIVEL 0 - ESTILO CORPORATIVO
   ============================= */

/* Base: sin rayas por defecto */
nav .level-0 > a,
nav .level-0 > button {
  border-bottom: 2px solid transparent; /* espacio reservado para la raya */
  text-decoration: none !important;
  color: inherit;
}

/* Hover: texto + raya verde corporativo */
nav .level-0 > a:hover,
nav .level-0 > button:hover {
  border-bottom-color: #84cc16 !important; /* lime-400 */
  color: #65a30d !important;              /* lime-600 */
}

/* Activo (cuando está en la página o desplegado el submenú) */
nav .level-0 > a[aria-current="page"],
nav .level-0 > button[aria-expanded="true"] {
  border-bottom-color: #84cc16 !important;
  color: #65a30d !important;
}

/* =============================
   NIVELES INTERNOS
   ============================= */

/* Hover en subniveles: solo color, sin raya */
/*nav .level-1 > a:hover,
nav .level-2 > a:hover,
nav .level-3 > a:hover {
  color: #65a30d !important;
  text-decoration: none !important;
} */



[id^="desktop-menu-category-"] {
  background-color: #F8FAE6; /* verde corporativo claro sólido */
}