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

 .logo-header img {
    max-height: 140px;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
  }
  .section-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #4b3f2f;
  }
  
  .ap-html p {
    font-size: 1rem;
    color: #444;
    margin-bottom: 0.75rem;
  }
  
  .ap-html .btn {
    background-color: #b48b59;
    color: white;
    padding: 0.6em 1.2em;
    border-radius: 4px;
    text-decoration: none;
  }
  .kaffa-history-image-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
  }
  
  .kaffa-history-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
  }
  .btn-overlay {
    position: absolute;
    left: 57%;
    top: 59%;
    width: 27%;
    height: 11%;
    transform: translateX(-50%);
    display: block;
    z-index: 2;
    cursor: pointer;
}
@media (max-width: 768px) {
  .btn-overlay {
    top: 80%;
    width: 50%;
    height: 10%;
    left: 50%;
    transform: translateX(-50%);
  }
}
.banner-beneficios img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.footer-logo p,
.footer-contact p,
.footer-links ul li a {
  font-size: 14px;
  color: #444;
  text-decoration: none;
}

.footer-links h4,
.footer-contact h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #3c2f23;
}

.footer-links ul li {
  margin-bottom: 6px;
}

.footer-links ul li a:hover {
  text-decoration: underline;
}

.cat-card-text .wr-text {
  text-align: center;
  padding-top: 5px;
  margin-top: -40px; /* SUBE el texto hacia la imagen */
}

.cat-card-text .cate-name {
  font-size: 14px !important;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.2px;
  color: #3c2f23;
  margin-top: -10px;
  margin-bottom: 4px;
  display: block;
  text-align: center;
}


.cat-card-text .items {
  display: none !important;
}
footer,
footer * {
  font-family: 'Poppins', sans-serif !important;
}

 .footer-stacked {
  background-color: #f9f6f1;
  padding: 40px 20px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
}

.footer-stacked .footer-logo {
  max-width: 140px;
  margin-bottom: 15px;
}

.footer-stacked .footer-tagline {
  font-size: 15px;
  color: #444;
  margin-bottom: 25px;
}

.footer-stacked .footer-nav {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-stacked .footer-nav li a {
  text-decoration: none;
  color: #444;
  font-size: 14px;
}

.footer-stacked .footer-nav li a:hover {
  text-decoration: underline;
}

.footer-stacked .footer-social a {
  margin: 0 10px;
  font-size: 14px;
  color: #444;
  text-decoration: none;
}

.footer-stacked .footer-social a:hover {
  color: #000;
}

.footer-stacked .footer-copy {
  font-size: 13px;
  color: #777;
  margin-top: 20px;
}

.breadcrumb {
  font-size: 14px;
  font-family: 'Poppins', sans-serif;
  color: #c2bab4;
}

.breadcrumb a {
  color: #c2bab4;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}
.page-heading {
  font-size: 36px;
  font-weight: 600;
  color: #ffffff;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
h1.h1 {
  font-size: 36px;
  color: #ffffff;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.form-control-select {
  background-color: #fff !important;
  color: #000 !important;
  border: 1px solid #ccc;
}

.leo-quicklogin-nav.leo-quicklogin.leo-dropdown.dropdown-toggle {
  position: relative;
  top: 16px; /* Ajusta entre 1px y 5px según lo veas alineado */
  padding: 0;
  margin: 0;
  line-height: normal;
  display: flex;
  align-items: center;
}


.leo-quicklogin-nav .hidden-sm-down {
  display: inline-block;
  vertical-align: middle;
}

.ApColumn a.logout,
.ApColumn a.account {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  line-height: 1.5;
  font-size: 14px;
  vertical-align: middle;
  position: relative;
  top: 16px; /* Ajusta este valor si se ve desalineado */
}

.ApColumn a.logout i,
.ApColumn a.account i {
  font-size: 20px;
  margin-right: 5px;
  vertical-align: middle;
}
.leo-quickview .modal-content h1.h1 {
  color: #000 !important; /* Cambia a tu color preferido */
}
picture img.guia-moliendas {
  display: block;
  margin: 0 auto;
  max-width: 560px;
  width: 100%;     /* Safari respeta esto */
  height: auto;
}
@media (max-width: 767px) {
  picture img.guia-moliendas {
    max-width: 420px;
  }
}
#collapseMoliendas .panel-body {
  text-align: center;   /* centra el contenido */
}

#collapseMoliendas .guia-moliendas {
  display: inline-block;  /* se centra dentro del text-align */
  max-width: 80%;         /* proporcional al ancho del botón */
}

/* MENU MOBILE */

/* ===== MOBILE ===== */
@media (max-width: 767.98px) {
  .kl-header-mobile {
    display:flex; align-items:center; padding:8px 12px;
    justify-content: center;
  }
  .kl-header-mobile .ApColumn {
    width:auto !important; float:none !important;
    display:flex; align-items:center;
  }
/* Quita límites de altura en todos los envoltorios del logo */
  .kl-col-logo,
  .kl-col-logo .ApImage,
  .kl-logo,
  .kl-logo a,
  .kl-logo figure {
    height: auto !important;
    max-height: none !important;
    line-height: normal !important;
    overflow: visible !important;
    display: inline-flex;           /* centra verticalmente el img */
    align-items: center;
  }

  /* Evita que la columna “apriete” el logo */
  .kl-col-logo { flex: 0 0 auto; min-width: 150px; }

  /* Tamaño del logo (ajusta 64/72/80 a gusto) */
  .kl-logo img {
    height: 140px !important;        /* ↑ cambia aquí */
    max-height: none !important;
    width: auto !important;
  }

  /* Por si el header tenía altura fija que lo recortaba */
  #header, .header-top { height: auto !important; min-height: unset !important; }

  /* Acciones a la derecha */
  .kl-col-actions { margin-left:auto; display:flex; align-items:center; gap:12px; z-index:1001; }

 

  /* Oculta SOLO el contenedor horizontal */
  #leo-megamenu .navbar-collapse,
  .leo-megamenu .navbar-collapse { display:none !important; }

  /* Asegura que el toggle sea visible y clickeable */
  #leo-megamenu .navbar-toggle,
  .leo-megamenu .navbar-toggle,
  #leo-megamenu .btn-navbar,
  .leo-megamenu .btn-navbar,
  #header .btn-navbar {
    display:inline-flex !important;
    width:44px; height:44px;
    align-items:center; justify-content:center;
    margin:0 !important; position:static !important; transform:none !important;
    visibility:visible; opacity:1;
  }
}

  /* Reseñas landingpage */

.kl-recent-reviews{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.kl-review-card{border:1px solid #eee;border-radius:12px;padding:12px;background:#fff}
.kl-review-thumb img{width:100%;height:auto;border-radius:10px;display:block}
.kl-review-head{display:flex;align-items:center;gap:.5rem;margin:.25rem 0 .5rem}
.kl-stars{position:relative;display:inline-block;width:100px;height:18px;filter:grayscale(0.15)}
.kl-stars::before{content:"☆☆☆☆☆";position:absolute;left:0;top:0;line-height:18px}
.kl-stars-fill{position:absolute;left:0;top:0;height:100%;overflow:hidden}
.kl-stars-fill::before{content:"★★★★★";line-height:18px}
.kl-review-title{margin:.25rem 0;font-size:1rem}
.kl-review-text{font-size:.95rem;line-height:1.45;color:#333}
.kl-review-meta{margin-top:.5rem;font-size:.85rem;color:#666;display:flex;gap:.5rem;flex-wrap:wrap}
/* ===== KL Reviews – estilo elegante ===== */
:root{
  --kl-card-bg:#fff;
  --kl-border:#e9edf3;
  --kl-shadow:0 6px 18px rgba(18, 38, 63, .06);
  --kl-text:#1f2d3d;
  --kl-muted:#6b7a90;
  --kl-primary:var(--theme-color, #0ea5e9); /* usa el primary del tema si existe */
  --kl-star:#ffb300;
  --kl-star-empty:#d7dde5;
}

.kl-recent-reviews{
  display:grid;
  gap:1.25rem;
  grid-template-columns:repeat(12, minmax(0,1fr));
  align-items:stretch;
  margin-block: .5rem 1rem;
}
@media (max-width: 480px){
  .kl-recent-reviews{ gap:1rem; }
}

/* 3 cards en desktop, 2 en tablet, 1 en móvil */
.kl-recent-reviews > .kl-review-card{
  grid-column: span 4;
}
@media (max-width: 1024px){
  .kl-recent-reviews > .kl-review-card{ grid-column: span 6; }
}
@media (max-width: 640px){
  .kl-recent-reviews > .kl-review-card{ grid-column: 1 / -1; }
}

.kl-review-card{
  background:var(--kl-card-bg);
  border:1px solid var(--kl-border);
  border-radius:14px;
  padding:16px 18px;
  box-shadow:var(--kl-shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display:flex; flex-direction:column; gap:.6rem;
}
.kl-review-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(18, 38, 63, .08);
  border-color:#dfe6ee;
}

/* Miniatura del producto (opcional si existe) */
.kl-review-thumb img{
  width:100%; height:auto; display:block;
  border-radius:10px; object-fit:cover;
}

/* Cabecera: estrellas + nota numérica */
.kl-review-head{
  display:flex; align-items:center; gap:.5rem;
  margin:.15rem 0 .35rem;
}
.kl-grade{
  font-weight:600; font-size:.95rem; color:var(--kl-text);
}

/* Estrellas (relleno por ancho) */
.kl-stars{
  position:relative; display:inline-block;
  width:100px; height:18px; line-height:18px;
  color:var(--kl-star-empty); font-size:18px; letter-spacing:.15ch;
}
.kl-stars::before{ content:"★★★★★"; }
.kl-stars-fill{
  position:absolute; inset:0 auto 0 0; width:0; overflow:hidden;
  color:var(--kl-star);
}
.kl-stars-fill::before{ content:"★★★★★"; }

/* Títulos y texto */
.kl-review-title{
  margin:.15rem 0; font-size:1rem; font-weight:600; color:var(--kl-text);
}
.kl-review-text{
  color:var(--kl-text); line-height:1.55; font-size:.95rem;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5; overflow:hidden;
}

/* Meta (autor · producto · fecha) */
.kl-review-meta{
  margin-top:.35rem; display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
  font-size:.88rem; color:var(--kl-muted);
}
.kl-review-meta .kl-product{
  color:var(--kl-primary); text-decoration:none;
}
.kl-review-meta .kl-product:hover{ text-decoration:underline; }

/* Estado vacío */
.kl-empty{
  grid-column:1/-1; text-align:center; padding:24px; border:1px dashed var(--kl-border);
  color:var(--kl-muted); border-radius:12px; background:#fafbfc;
}

/* Compact mode (si quieres cards más bajas): añade .is-compact a .kl-recent-reviews */
.kl-recent-reviews.is-compact .kl-review-text{-webkit-line-clamp:3}
.kl-recent-reviews.is-compact .kl-review-card{padding:14px 16px}

/* Dark mode opcional */
@media (prefers-color-scheme: dark){
  :root{
    --kl-card-bg:#0f172a;
    --kl-border:#233044;
    --kl-text:#e5eef7;
    --kl-muted:#95a3b6;
    --kl-shadow:0 8px 20px rgba(0,0,0,.35);
  }
  .kl-empty{ background:#0b1220; }
}
/* ===== KL Reviews — modo compacto (~75% del tamaño) ===== */
.kl-recent-reviews.is-compact{ gap:.75rem; }

/* Card más pequeña */
.kl-recent-reviews.is-compact .kl-review-card{
  padding:12px 14px;            /* antes 16px 18px */
  border-radius:12px; 
  box-shadow:var(--kl-shadow);
}

/* Miniatura más baja (si hay imagen) */
.kl-recent-reviews.is-compact .kl-review-thumb img{
  max-height:140px;             /* recorta altura visual */
  object-fit:cover;
  border-radius:8px;
}

/* Cabecera: estrellas y nota */
.kl-recent-reviews.is-compact .kl-review-head{ gap:.4rem; margin:.1rem 0 .3rem; }
.kl-recent-reviews.is-compact .kl-stars{
  width:80px;                   /* antes 100px */
  font-size:16px;               /* antes 18px */
  letter-spacing:.12ch;
}
.kl-recent-reviews.is-compact .kl-grade{ font-size:.9rem; }

/* Tipografías más contenidas */
.kl-recent-reviews.is-compact .kl-review-title{ font-size:.95rem; margin:.1rem 0; }
.kl-recent-reviews.is-compact .kl-review-text{
  font-size:.9rem; 
  line-height:1.45;
  -webkit-line-clamp:3;         /* menos líneas para bajar altura */
}

/* Meta más compacta */
.kl-recent-reviews.is-compact .kl-review-meta{ font-size:.82rem; gap:.4rem; margin-top:.3rem; }

/* Espaciado general entre tarjetas en móvil ya estaba controlado */
@media (max-width:640px){
  .kl-recent-reviews.is-compact{ gap:.65rem; }
}

/* ===== KL Reviews — MODO MINI (aún más pequeño que compact) ===== */
.kl-recent-reviews.is-mini{ gap:.6rem; }

/* Más tarjetas por fila en desktop */
.kl-recent-reviews.is-mini > .kl-review-card{ grid-column: span 4; } /* 12/3 = 4 por fila */
@media (max-width:1200px){
  .kl-recent-reviews.is-mini > .kl-review-card{ grid-column: span 4; } /* 3 por fila */
}
@media (max-width:1024px){
  .kl-recent-reviews.is-mini > .kl-review-card{ grid-column: span 6; } /* 2 por fila */
}
@media (max-width:640px){
  .kl-recent-reviews.is-mini > .kl-review-card{ grid-column: 1 / -1; } /* 1 por fila */
}

/* Más espacio entre tarjetas (especialmente en escritorio) */
.kl-recent-reviews{ gap:1.75rem; }            /* antes 1.25rem */
@media (max-width:1024px){ .kl-recent-reviews{ gap:1.25rem; } }
@media (max-width:640px){  .kl-recent-reviews{ gap:1rem;    } }

/* Si estás en modo mini, mantenemos el aire nuevo igualmente */
.kl-recent-reviews.is-mini{ gap:1.25rem; }

/* Tarjeta más contenida */
.kl-recent-reviews.is-mini .kl-review-card{
  padding:10px 12px;            /* antes 12–14 */
  border-radius:10px; 
}

/* Imagen más baja */
.kl-recent-reviews.is-mini .kl-review-thumb img{
  max-height:110px;
  border-radius:8px;
  object-fit:cover;
}

/* Más espacio entre estrellas y la nota */
.kl-recent-reviews .kl-review-head{ gap:.6rem; } /* antes .35rem */

/* Evitar que la 5ª estrella quede “a medias” por el letter-spacing */
.kl-recent-reviews .kl-stars{
  width:102px;            /* recupera ancho cómodo */
  font-size:16px;
  letter-spacing:0;       /* ← clave para que el 100% pinte completo */
  line-height:1;
  position:relative;
}
.kl-recent-reviews .kl-stars-fill{
  top:0; left:0; height:100%; position:absolute; overflow:hidden;
  /* pequeño “fudge” para cubrir del todo el borde de la 5ª estrella */
  /* en 100% agrega 1px más; no afecta valores <100% */
}
.kl-recent-reviews .kl-grade{ font-weight:600; }


/* Tipografía compacta y menos líneas de texto */
.kl-recent-reviews.is-mini .kl-review-title{ font-size:.9rem; margin:.08rem 0; }
.kl-recent-reviews.is-mini .kl-review-text{
  font-size:.86rem; 
  line-height:1.4;
  -webkit-line-clamp:2;         /* 2 líneas para bajar altura */
}

/* Meta más discreta */
.kl-recent-reviews.is-mini .kl-review-meta{
  font-size:.78rem; 
  gap:.35rem; 
  margin-top:.25rem;
}

/* Opcional: si prefieres 3 líneas de texto en mini, añade también esta clase al contenedor:
   <div class="kl-recent-reviews grid is-compact is-mini keep-3-lines"> */
.kl-recent-reviews.is-mini.keep-3-lines .kl-review-text{ -webkit-line-clamp:3; }

/* ===== Slider básico (3 visibles, 6 ítems, flechas) ===== */
.kl-reviews-carousel{
  position:relative;
  display:block;
  margin: .5rem 0 1rem;
}
.kl-reviews-carousel .kl-track{
  display:flex;
  gap:1.5rem;                 /* ← MÁS aire entre tarjetas */
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling: touch;
  padding: .25rem 2.25rem;    /* deja espacio para flechas */
}
.kl-reviews-carousel .kl-slide{
  flex:0 0 calc((100% - 2*1.5rem)/3); /* 3 visibles con el gap arriba */
  scroll-snap-align:start;
}
@media (max-width:1024px){
  .kl-reviews-carousel .kl-slide{ flex-basis: calc((100% - 1*1.25rem)/2); } /* 2 por vista */
  .kl-reviews-carousel .kl-track{ gap:1.25rem; }
}
@media (max-width:640px){
  .kl-reviews-carousel .kl-slide{ flex-basis: 100%; } /* 1 por vista */
  .kl-reviews-carousel .kl-track{ gap:1rem; padding-left:2.25rem; padding-right:2.25rem; }
}

/* Flechas */
.kl-reviews-carousel .kl-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:999px; border:1px solid var(--kl-border);
  background:#fff; box-shadow:var(--kl-shadow);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; user-select:none; font-size:22px; line-height:1;
  transition:transform .18s ease, box-shadow .18s ease;
  z-index:2;
}
.kl-reviews-carousel .kl-nav:hover{ transform:translateY(-50%) scale(1.06); }
.kl-reviews-carousel .kl-prev{ left:.25rem; }
.kl-reviews-carousel .kl-next{ right:.25rem; }

/* Reutilizamos estilos de la tarjeta existente */
.kl-reviews-carousel .kl-review-card{ height:100%; }

/* === Estrellas: más espacio y 5/5 lleno (vale para grid + slider) === */
.kl-recent-reviews .kl-review-head,
.kl-reviews-carousel .kl-review-head{ gap:.6rem; }

.kl-recent-reviews .kl-stars,
.kl-reviews-carousel .kl-stars{
  width:102px;          /* si ves filo en 5/5, sube a 102px */
  font-size:16px;
  letter-spacing:0;     /* clave para que 100% pinte completo */
  line-height:1;
  position:relative;
}
.kl-recent-reviews .kl-stars-fill,
.kl-reviews-carousel .kl-stars-fill{
  position:absolute; inset:0 auto 0 0; height:100%; overflow:hidden;
}

/* === Grid: 3 por fila + más aire entre tarjetas === */
.kl-recent-reviews > .kl-review-card{ grid-column: span 4; } /* 12/4 = 3 */
.kl-recent-reviews{ gap:1.75rem; } /* más separación */
@media (max-width:1024px){ .kl-recent-reviews{ gap:1.25rem; } }
@media (max-width:640px){  .kl-recent-reviews{ gap:1rem;    } }

/* === Slider: 3 visibles, más separación entre tarjetas === */
.kl-reviews-carousel .kl-track{ gap:1.5rem; padding:.25rem 2.25rem; }
.kl-reviews-carousel .kl-slide{ flex:0 0 calc((100% - 2*1.5rem)/3); }
@media (max-width:1024px){
  .kl-reviews-carousel .kl-track{ gap:1.25rem; }
  .kl-reviews-carousel .kl-slide{ flex-basis: calc((100% - 1*1.25rem)/2); }
}
@media (max-width:640px){
  .kl-reviews-carousel .kl-track{ gap:1rem; padding-left:2.25rem; padding-right:2.25rem; }
  .kl-reviews-carousel .kl-slide{ flex-basis: 100%; }
}

/* === MODO MINI: aplica tanto a grid como a slider === */
.kl-recent-reviews.is-mini .kl-review-card,
.kl-reviews-carousel.is-mini .kl-review-card{
  padding:10px 12px;
  border-radius:10px;
}

.kl-recent-reviews.is-mini .kl-review-thumb img,
.kl-reviews-carousel.is-mini .kl-review-thumb img{
  max-height:110px; object-fit:cover; border-radius:8px;
}

.kl-recent-reviews.is-mini .kl-stars,
.kl-reviews-carousel.is-mini .kl-stars{
  width:70px; font-size:15px;
}

.kl-recent-reviews.is-mini .kl-review-title,
.kl-reviews-carousel.is-mini .kl-review-title{ font-size:.9rem; margin:.08rem 0; }

.kl-recent-reviews.is-mini .kl-review-text,
.kl-reviews-carousel.is-mini .kl-review-text{
  font-size:.86rem; line-height:1.4; -webkit-line-clamp:3;
}

.kl-recent-reviews.is-mini .kl-review-meta,
.kl-reviews-carousel.is-mini .kl-review-meta{
  font-size:.78rem; gap:.35rem; margin-top:.25rem;
}

/* Slider en mini: conserva 3 visibles y algo menos de gap si quieres aún más compacto */
.kl-reviews-carousel.is-mini .kl-track{ gap:1.75rem; }
.kl-reviews-carousel.is-mini .kl-slide{ flex-basis: calc((100% - 2*1.25rem)/3); }

/* Oculta scrollbar pero conserva desplazamiento (arrows / swipe) */
.kl-reviews-carousel .kl-track{
  overflow-x:auto;                   /* seguimos usando scroll interno */
  -webkit-overflow-scrolling: touch; /* suave en iOS */
  scrollbar-width: none;             /* Firefox */
  -ms-overflow-style: none;          /* IE/Edge heredado */
}
.kl-reviews-carousel .kl-track::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;                      /* Chrome/Safari */
}
/* Flecha deshabilitada */
.kl-reviews-carousel .kl-nav[disabled]{
  opacity:.35;
  pointer-events:none;
  box-shadow:none;
  transform:translateY(-50%) scale(1); /* sin “hover bump” */
}

/* Ocultar flechas cuando hay pocas slides */
.kl-reviews-carousel.hide-arrows .kl-nav{
  display:none;
}

/* Oculta scrollbar pero mantiene swipe (como antes) */
.kl-reviews-carousel .kl-track{
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.kl-reviews-carousel .kl-track::-webkit-scrollbar{ display:none; width:0; height:0; }

/* Evita rebotes raros de desplazamiento horizontal */
.kl-reviews-carousel .kl-track{
  overscroll-behavior-x: contain;
}
@media (min-width: 992px) {
  /* Centra el contenido del header */
  #header .header-top .container > .row {
    display: flex;
    align-items: center;
  }

  /* Ajuste vertical SOLO del menú */
  #header .leo-megamenu.navbar {
    margin-top: 25px; /* ajusta entre 5–15px según lo necesites */
  }
}

/* Ajuste vertical del bloque de login */
  #header .leo-quicklogin-nav {
    display: flex;
    align-items: center;
    margin-top: 25px; /* usa el mismo valor que el menú */
  }
/* Ajuste vertical del bloque de login */
  #header .logout {
    display: flex;
    align-items: left;
    margin-top: 25px; /* usa el mismo valor que el menú */
  }  

/* blog */
/* Estilos base del Leo Blog */
.blog-item, .blog-container {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 1rem;
}

.blog-item img {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
}

.blog-item .blog-title {
  font-weight: 600;
  font-size: 1.3rem;
  color: #2a2a2a;
}

.blog-item .blog-short-description {
  color: #555;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* --- KAFFALOVE: estilo elegante para el selector de Molienda --- */

/* Estado pendiente: placeholder visible o sin selección */
.product-variants-item.needs-grind {
  border: 1.5px solid rgba(203, 50, 50, 0.25); /* rojo vino suave */
  border-radius: 0.6rem;
  padding: 0.75rem 1rem;
  background-color: rgba(203, 50, 50, 0.05); /* leve tinte rosado */
  box-shadow: 0 0 0 3px rgba(203, 50, 50, 0.05);
  transition: all 0.25s ease;
}

/* Etiqueta "Molienda" en estado pendiente */
.product-variants-item.needs-grind .control-label {
  color: #b94a48; /* rojo vino más cálido */
  font-weight: 500;
}

/* Estado válido: selección hecha */
.product-variants-item:not(.needs-grind) select.form-control-select {
  border-color: rgba(60, 179, 113, 0.45); /* verde suave tipo menta */
  box-shadow: 0 0 0 3px rgba(60, 179, 113, 0.08);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Transición general de todos los estados */
.product-variants-item {
  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Ajuste fino del select cuando está enfocado */
.product-variants-item select.form-control-select:focus {
  outline: none;
  border-color: rgba(60, 179, 113, 0.55);
  box-shadow: 0 0 0 4px rgba(60, 179, 113, 0.15);
}

/* Mostrar Quick View en mobile aunque tenga hidden-md-down */
@media (max-width: 991.98px) {
  .quickview.hidden-md-down {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Si el tema lo muestra solo por hover, fuerzo a que se vea siempre */
  .product-miniature .leo-buttons,
  .quickview.hidden-md-down {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  /* Asegurar botón visible y con algo de separación */
  .quickview.hidden-md-down .quick-view {
    display: inline-flex !important;
    align-items: center;
    margin-top: .5rem;
  }
}

/* Borde rojo para el select en error */
.kl-grind-select.kl-grind-error {
  border-color: #e3342f !important;
  box-shadow: 0 0 0 1px rgba(227, 52, 47, 0.25);
}

/* Mensaje de error bajo el select */
.kl-grind-error-msg {
  color: #e3342f;
  font-size: 0.85rem;
  margin-top: 0.25rem;
}