/* ==========================================================================
   NEMI SPECIALTY COFFEE - REDISEÑO TIENDA & CATÁLOGO (ESTILO KAWAS)
   Hero Banner Inmersivo, Layout de 2 Columnas y Cuadrícula Minimalista
   ========================================================================== */

/* ==========================================================================
   1. HERO BANNER DE CATEGORÍA ("CAFÉ TOSTADO")
   ========================================================================== */
.nemi-shop-hero-banner {
  position: relative;
  width: 100%;
  min-height: 290px;
  background-color: #120D0A;
  background-image: url('../images/hero-cafe-tostado.jpg');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-bottom: 2.25rem;
}

.nemi-shop-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(14, 9, 7, 0.90) 0%,
    rgba(14, 9, 7, 0.65) 45%,
    rgba(14, 9, 7, 0.20) 100%
  );
  z-index: 1;
}

.nemi-shop-hero-container {
  position: relative;
  z-index: 2;
  max-width: 1360px;
  width: 100%;
  margin: 0 auto;
  padding: 3.5rem 2rem;
  box-sizing: border-box;
}

.nemi-shop-hero-title {
  font-family: var(--nemi-font-display);
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  color: #FFFFFF !important;
  margin: 0 0 0.85rem 0;
  line-height: 1.05;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.nemi-shop-hero-desc {
  max-width: 580px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 245, 238, 0.92);
}

.nemi-shop-hero-desc strong {
  color: #FFFFFF;
  font-weight: 700;
}

.nemi-shop-hero-desc p {
  margin: 0;
}

/* ==========================================================================
   2. LAYOUT DE TIENDA DE DOS COLUMNAS (SIDEBAR + GRID)
   ========================================================================== */
.nemi-shop-catalog-wrapper {
  max-width: 1360px;
  margin: 1.5rem auto 5rem auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 3rem;
  align-items: start;
  box-sizing: border-box;
}

/* ==========================================================================
   3. COLUMNA IZQUIERDA: SIDEBAR DE FILTROS MINIMALISTA (ESTILO KAWAS)
   ========================================================================== */
.nemi-shop-sidebar-area {
  position: sticky;
  top: 100px;
  z-index: 10;
}

.nemi-sidebar-header {
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
}

.nemi-sidebar-title {
  font-family: var(--nemi-font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: #1A1A1A;
  margin: 0;
}

/* Acordeones de Filtros */
.nemi-filter-accordion {
  border-top: 1px solid rgba(59, 83, 70, 0.12);
  padding: 0.25rem 0;
}

.nemi-filter-accordion:last-child {
  border-bottom: 1px solid rgba(59, 83, 70, 0.12);
}

.nemi-filter-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0.75rem 0.65rem;
  margin: 0 -0.65rem;
  border-radius: 6px;
  font-family: var(--nemi-font-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: #2B2B2B;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
}

.nemi-filter-toggle:hover {
  background-color: var(--nemi-secondary); /* Verde oscuro del marquee */
  color: #FFF5EE !important; /* Blanco marfil */
}

.nemi-filter-toggle:hover .nemi-chevron path {
  stroke: #FFF5EE;
}

.nemi-chevron {
  transition: transform 0.25s ease;
}

.nemi-filter-accordion.open .nemi-chevron {
  transform: rotate(180deg);
}

.nemi-filter-body {
  padding-bottom: 1.25rem;
}

.nemi-filter-accordion:not(.open) .nemi-filter-body {
  display: none;
}

/* Inputs de Rango de Precio */
.nemi-price-inputs {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.nemi-price-input-group {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #D6CBC5;
  border-radius: 4px;
  padding: 0.35rem 0.6rem;
  flex: 1;
}

.nemi-price-input-group .currency {
  font-size: 0.85rem;
  color: #7A7570;
  margin-right: 0.25rem;
}

.nemi-price-input-group input {
  border: none;
  background: transparent;
  width: 100%;
  font-size: 0.88rem;
  font-family: var(--nemi-font-body);
  color: #2B2B2B;
  outline: none;
  padding: 0;
}

.nemi-price-inputs .divider {
  font-size: 0.85rem;
  color: #7A7570;
}

.nemi-price-hint {
  font-size: 0.78rem;
  color: #7A7570;
  margin: 0.35rem 0 0 0;
}

/* Listado de Checkboxes */
.nemi-checkbox-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nemi-checkbox-list li {
  margin-bottom: 0.25rem;
}

.nemi-checkbox-list label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.88rem;
  color: #4A4A4A;
  cursor: pointer;
  padding: 0.35rem 0.65rem;
  margin: 0 -0.65rem;
  border-radius: 6px;
  transition: all 0.2s ease;
  user-select: none;
}

.nemi-checkbox-list label:hover {
  background-color: var(--nemi-secondary); /* Verde oscuro exacto del marquee */
  color: #FFF5EE !important; /* Blanco marfil claro */
}

.nemi-checkbox-list label:hover span {
  color: #FFF5EE !important;
}

.nemi-checkbox-list input[type="checkbox"] {
  width: 16px;
  height: 16px;
  border: 1.5px solid #A89F99;
  border-radius: 3px;
  cursor: pointer;
  accent-color: var(--nemi-accent);
  margin: 0;
  transition: all 0.2s ease;
}

.nemi-checkbox-list label:hover input[type="checkbox"] {
  border-color: #FFF5EE;
}

/* ==========================================================================
   4. COLUMNA DERECHA: TOOLBAR Y CUADRÍCULA DE PRODUCTOS
   ========================================================================== */
.nemi-shop-products-area {
  width: 100%;
}

/* Barra de Herramientas Superior */
.nemi-shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(59, 83, 70, 0.10);
}

.nemi-toolbar-count {
  font-size: 0.88rem;
  color: #7A7570;
  font-weight: 500;
}

.nemi-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

/* Selector de Ordenamiento Minimalista */
.nemi-toolbar-actions select.orderby {
  border: none;
  background: transparent;
  font-family: var(--nemi-font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: #2B2B2B;
  cursor: pointer;
  outline: none;
  padding-right: 1.5rem;
}

/* Botones de Vista (Grid / Lista) */
.nemi-grid-view-toggles {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.nemi-grid-toggle {
  background: none;
  border: none;
  color: #A89F99;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  transition: color 0.15s ease;
}

.nemi-grid-toggle.active,
.nemi-grid-toggle:hover {
  color: #1A1A1A;
}

/* ==========================================================================
   5. CUADRÍCULA DE PRODUCTOS VERTICALES (5 COLUMNAS EN DESKTOP)
   ========================================================================== */
.woocommerce .nemi-shop-products-area ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)) !important;
  gap: 2.25rem 1.25rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce .nemi-shop-products-area ul.products li.product {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  float: none !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative;
  transition: transform 0.25s ease;
}

.woocommerce .nemi-shop-products-area ul.products li.product:hover {
  transform: translateY(-3px);
}

/* Envoltorio de Imagen en Estudio Claro */
.woocommerce .nemi-shop-products-area ul.products li.product a.woocommerce-LoopProduct-link {
  display: block;
  position: relative;
  background-color: #F8F6F4;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.75rem;
  aspect-ratio: 1 / 1.18;
  display: flex;
  align-items: center;
  justify-content: center;
}

.woocommerce .nemi-shop-products-area ul.products li.product a img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  margin: 0 !important;
  padding: 1.25rem !important;
  box-sizing: border-box;
  transition: transform 0.35s ease;
}

.woocommerce .nemi-shop-products-area ul.products li.product:hover a img {
  transform: scale(1.05);
}

/* Badge Superior "Microlot" (Estilo Kawas) */
.nemi-badge-microlot {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  background-color: #B52828;
  color: #FFFFFF;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.55rem;
  border-radius: 2px;
  line-height: 1;
}

/* Marca "Nemi" sobre el Título */
.nemi-card-brand {
  font-size: 0.76rem;
  color: #8C8681;
  text-transform: capitalize;
  margin-bottom: 0.2rem;
  font-weight: 500;
}

/* Título de Producto */
.woocommerce .nemi-shop-products-area ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--nemi-font-body) !important;
  font-size: 0.94rem !important;
  font-weight: 600 !important;
  color: #1A1A1A !important;
  line-height: 1.35 !important;
  margin: 0 0 0.4rem 0 !important;
  padding: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 2.7em;
}

/* Precio */
.woocommerce .nemi-shop-products-area ul.products li.product .price {
  font-family: var(--nemi-font-body) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
  margin: 0 !important;
}

.woocommerce .nemi-shop-products-area ul.products li.product .price del {
  color: #9C9590 !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  margin-right: 0.35rem;
}

.woocommerce .nemi-shop-products-area ul.products li.product .price ins {
  text-decoration: none !important;
}

/* Ocultar botón agresivo de 'Añadir al carrito' en el loop de catálogo */
/* En café de especialidad el usuario primero debe ingresar para elegir el tipo de molienda */
.woocommerce .nemi-shop-products-area ul.products li.product .button.add_to_cart_button {
  display: none !important;
}

/* ==========================================================================
   6. RESPONSIVE MOBILE & TABLET (< 960px)
   ========================================================================== */
@media (max-width: 960px) {
  .nemi-shop-catalog-wrapper {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 0 1rem;
  }

  .nemi-shop-sidebar-area {
    position: static;
    background: #FFFDFB;
    border: 1px solid rgba(59, 83, 70, 0.12);
    border-radius: 8px;
    padding: 1rem 1.25rem;
  }

  .woocommerce .nemi-shop-products-area ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem 0.85rem !important;
  }

  .nemi-shop-hero-banner {
    min-height: 220px;
  }

  .nemi-shop-hero-container {
    padding: 2.5rem 1.25rem;
  }
}

/* ==========================================================================
   7. FICHA TÉCNICA, PERFIL SENSORIAL & STORYTELLING (SINGLE PRODUCT)
   ========================================================================== */

/* Tarjeta contenedora de especificaciones en single product */
.nemi-product-coffee-card {
  background: #FFFFFF;
  border: 1px solid rgba(59, 83, 70, 0.12);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  box-shadow: 0 4px 20px rgba(59, 83, 70, 0.04);
}

/* Fila de Insignias (SCA, Tueste, Proceso) */
.nemi-coffee-badges-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.nemi-badge-sca {
  background: linear-gradient(135deg, #2E4537 0%, #1D3025 100%);
  color: #F7D59A;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
}

.nemi-badge-tueste {
  background: #FFF5EE;
  color: #D96B43;
  border: 1px solid rgba(217, 107, 67, 0.3);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nemi-badge-tueste svg {
  width: 14px;
  height: 14px;
}

.nemi-badge-proceso {
  background: #F4ECE6;
  color: #3B5346;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
}

/* Grilla de Datos Esenciales (Origen, Varietal, Altitud) */
.nemi-specs-table-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.85rem;
  padding: 1rem;
  background: #FAF7F5;
  border-radius: 8px;
  margin-bottom: 1.25rem;
}

.nemi-spec-box .nemi-spec-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  color: #8A827B;
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
  font-weight: 600;
}

.nemi-spec-box .nemi-spec-val {
  font-size: 0.92rem;
  color: #2B2B2B;
  font-weight: 600;
  line-height: 1.3;
}

/* Caja de Notas de Cata Destacadas */
.nemi-sensory-notes-box {
  background: #FFFDF9;
  border: 1px dashed rgba(217, 107, 67, 0.4);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.nemi-sensory-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}

.nemi-sensory-icon-wrap {
  color: #D96B43;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nemi-sensory-icon-wrap svg {
  width: 22px;
  height: 22px;
}

.nemi-sensory-title {
  font-family: var(--nemi-font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: #3B5346;
}

.nemi-sensory-text {
  font-family: var(--nemi-font-display);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
  color: #4A3C31;
  margin: 0;
}

/* Diales de Intensidad/Cuerpo y Acidez */
.nemi-dials-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 480px) {
  .nemi-dials-row {
    grid-template-columns: 1fr;
  }
}

.nemi-dial-item {
  background: #FAF7F5;
  border-radius: 8px;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nemi-dial-title-line {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #5C554E;
}

.nemi-dial-title-line svg {
  width: 16px;
  height: 16px;
  color: #3B5346;
}

.nemi-dots-gauge {
  display: flex;
  gap: 6px;
  align-items: center;
}

.nemi-gauge-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #E2D9D2;
  transition: all 0.2s ease;
}

.nemi-gauge-dot.active {
  background: #3B5346;
  transform: scale(1.1);
}

.nemi-acidity-pill {
  align-self: flex-start;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 12px;
  letter-spacing: 0.02em;
}

.nemi-acidity--baja {
  background: #E8EFEA;
  color: #3B5346;
}

.nemi-acidity--media {
  background: #FFF3E6;
  color: #D96B43;
}

.nemi-acidity--brillante {
  background: #FDF4D4;
  color: #8A6400;
}

/* Métodos de Preparación */
.nemi-brew-methods-container {
  margin-bottom: 1.25rem;
}

.nemi-brew-heading {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #5C554E;
  margin-bottom: 0.5rem;
}

.nemi-brew-pills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.nemi-brew-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  background: #FFFFFF;
  border: 1px solid #D6CBC5;
  border-radius: 20px;
  padding: 0.35rem 0.75rem;
  color: #3B5346;
  transition: all 0.2s ease;
}

.nemi-brew-pill svg {
  width: 16px;
  height: 16px;
  color: #3B5346;
}

.nemi-brew-pill:hover {
  border-color: #3B5346;
  background: #FFF5EE;
}

/* Sello de Fecha de Tueste / Curaduría */
.nemi-roast-date-stamp {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: #665E57;
  background: #F6F3EF;
  padding: 0.6rem 0.85rem;
  border-radius: 6px;
}

.nemi-roast-date-stamp svg {
  width: 18px;
  height: 18px;
  color: #D96B43;
  flex-shrink: 0;
}

.nemi-roast-date-stamp strong {
  color: #1A1A1A;
}

/* ==========================================================================
   8. SECCIÓN EDITORIAL DE STORYTELLING DEL PRODUCTOR & FINCA
   ========================================================================== */
.nemi-producer-storytelling-section {
  background-color: #FFF5EE;
  border-top: 1px solid rgba(59, 83, 70, 0.12);
  border-bottom: 1px solid rgba(59, 83, 70, 0.12);
  padding: 4.5rem 1.5rem;
  margin: 3.5rem 0 2rem 0;
  position: relative;
  overflow: hidden;
}

.nemi-storytelling-wrapper {
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.nemi-storytelling-watermark {
  position: absolute;
  top: -20px;
  right: -40px;
  width: 240px;
  height: 240px;
  opacity: 0.08;
  color: #3B5346;
  pointer-events: none;
  z-index: 1;
}

.nemi-storytelling-watermark svg {
  width: 100%;
  height: 100%;
}

.nemi-storytelling-header {
  text-align: center;
  margin-bottom: 2.25rem;
}

.nemi-storytelling-kicker {
  display: block;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: #D96B43;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.nemi-storytelling-title {
  font-family: var(--nemi-font-display);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 700;
  color: #3B5346;
  margin: 0 0 0.5rem 0;
  line-height: 1.15;
}

.nemi-storytelling-subtitle {
  font-size: 1.05rem;
  color: #6E655E;
  margin: 0 0 1.25rem 0;
  font-style: italic;
}

.nemi-storytelling-divider {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  color: #3B5346;
  opacity: 0.6;
  max-width: 320px;
}

.nemi-storytelling-content {
  font-family: var(--nemi-font-body);
  font-size: 1.08rem;
  line-height: 1.85;
  color: #2C2825;
}

.nemi-storytelling-content p {
  margin-bottom: 1.35rem;
}

.nemi-storytelling-content blockquote {
  border-left: 3px solid #D96B43;
  padding-left: 1.5rem;
  margin: 1.75rem 0;
  font-family: var(--nemi-font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: #3B5346;
}

/* Dual Pricing ARS Conversion Equivalent */
.nemi-ars-approx {
  display: inline-block;
  margin-left: 0.35rem;
  color: var(--nemi-text-muted, #726A64);
  font-size: 0.85em;
  font-weight: 500;
}