/* =========================================================
 * Salud y Vida — capa de marca sobre el template ShopWise
 * Carga DESPUÉS de main.css. No editar main.css.
 * Color de marca: verde #159945 (extraído del sitio actual)
 * ========================================================= */

:root {
  --accent-color: #159945;          /* verde SyV: botones, enlaces, acentos */
  --heading-color: #143c22;         /* verde muy oscuro para títulos */
  --nav-hover-color: #159945;
  --nav-dropdown-hover-color: #159945;

  /* tonos derivados del verde de marca */
  --syv-green: #159945;
  --syv-green-dark: #0f7a37;
  --syv-green-800: #0c5f2b;
  --syv-green-tint: #e6f5ec;
  --syv-yellow: #eea419;            /* acento secundario existente */
}

/* ShopWise solo estiliza .btn-primary-action dentro de contenedores concretos
   (.hero, .about-2, .promo-cards...). Definimos un ESTILO BASE GLOBAL para que
   funcione como botón verde en cualquier página migrada (Ver más, footer, etc.).
   Las reglas más específicas del template siguen ganando donde existen. */
.btn-primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 12px 28px;
  background-color: var(--syv-green);
  color: #fff;
  border: 1px solid var(--syv-green);
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: all .25s ease;
  cursor: pointer;
}
.btn-primary-action:hover,
.btn-proceed:hover,
.cart-btn:hover,
.search-submit:hover {
  background-color: var(--syv-green-dark);
  border-color: var(--syv-green-dark);
  color: #fff;
}

/* Logo textual del template: lo ocultamos en favor de la imagen SyV */
.header .logo .sitename { font-weight: 700; }

/* Badge de conteo (carrito/favoritos) con verde de marca */
.header .badge-count { background-color: var(--syv-green); }

/* Botón outline verde (usado fuera de los contenedores donde ShopWise lo estiliza) */
.btn-outline-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 11px 28px;
  background-color: transparent;
  color: var(--syv-green);
  border: 1px solid var(--syv-green);
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: all .25s ease;
  cursor: pointer;
}
.btn-outline-action:hover {
  background-color: var(--syv-green);
  color: #fff;
}

/* Badge de estatus de pedido (fallback verde si no lleva variante de color) */
.status-tag {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 50px;
  font-size: .8rem;
  font-weight: 600;
  background-color: var(--syv-green-tint);
  color: var(--syv-green-800);
}

/* Paginación con verde de marca (el Paginator emite .pagination/.page-link de Bootstrap) */
.pagination .page-item.active .page-link,
.pagination .active > .page-link,
.pagination .active > a {
  background-color: var(--syv-green);
  border-color: var(--syv-green);
  color: #fff;
}
.pagination .page-link { color: var(--syv-green); }
.pagination .page-link:hover { color: var(--syv-green-dark); }

/* WhatsApp flotante heredado */
.btn-whatsapp {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 998;
}
.btn-whatsapp img { display: block; }

/* ============================================================
   Documentos legales (privacidad.php, terminos_condiciones.php)
   Texto largo verbatim: se prioriza legibilidad, no tarjetas.
   ============================================================ */
.legal-doc {
  padding: 32px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 8px;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--default-color), transparent 92%);
}
.legal-doc > h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--syv-green);
  margin: 32px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--syv-green), transparent 82%);
}
.legal-doc > h3:first-child { margin-top: 0; }
.legal-doc p {
  text-align: justify;
  line-height: 1.75;
  margin-bottom: 14px;
}
.legal-doc a { color: var(--syv-green); }
.legal-doc a:hover { color: var(--syv-green-dark); }
.legal-doc .legal-firma {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  font-size: 14px;
}
.legal-doc ol, .legal-doc ul { line-height: 1.75; margin-bottom: 14px; }
@media (max-width: 575px) { .legal-doc { padding: 20px; } }

/* ============================================================
   Megamenú de Productos (products-megamenu-2)
   Celdas vacías: el grid del template es por filas de 4, así que
   los huecos necesitan un <a> que ocupe lugar sin verse ni ser
   clicable.
   ============================================================ */
.navmenu .products-megamenu-2 .category-links .sw-celda-vacia {
  pointer-events: none;
  visibility: hidden;
}
.navmenu .products-megamenu-2 .featured-section .sw-atajos {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.navmenu .products-megamenu-2 .featured-section .sw-atajos a {
  flex: 1;
  text-align: center;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--syv-green), transparent 60%);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--syv-green);
  text-decoration: none;
}
.navmenu .products-megamenu-2 .featured-section .sw-atajos a:hover {
  background: var(--syv-green);
  color: #fff;
}
.navmenu .products-megamenu-2 .featured-section .sw-panel-marca {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  padding: 26px 24px;
  border-radius: 10px;
  background: linear-gradient(150deg, var(--syv-green) 0%, var(--syv-green-dark) 100%);
  color: #fff;
}
.navmenu .products-megamenu-2 .featured-section .sw-panel-marca i {
  font-size: 30px;
  opacity: .85;
  margin-bottom: 10px;
}
.navmenu .products-megamenu-2 .featured-section .sw-panel-marca h3 {
  color: #fff;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 8px;
}
.navmenu .products-megamenu-2 .featured-section .sw-panel-marca p {
  font-size: 13px;
  line-height: 1.5;
  opacity: .9;
  margin: 0 0 16px;
}
.navmenu .products-megamenu-2 .featured-section .sw-panel-marca .btn-shop {
  background: #fff;
  color: var(--syv-green);
  border: 0;
  padding: 9px 20px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.navmenu .products-megamenu-2 .featured-section .sw-panel-marca .btn-shop:hover { background: #f0f0f0; }

/* El megamenú no puede pasarse del alto de pantalla: con overflow hidden
   los últimos enlaces quedaban invisibles e inalcanzables en portátiles. */
.navmenu .products-megamenu-2 .desktop-megamenu {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}
/* Los atajos del panel van apilados: son 3 y en fila no caben legibles */
.navmenu .products-megamenu-2 .featured-section .sw-atajos {
  flex-direction: column;
  gap: 8px;
}

/* El panel verde no debe comerse el espacio de los atajos */
.navmenu .products-megamenu-2 .featured-section {
  display: flex;
  flex-direction: column;
}
.navmenu .products-megamenu-2 .featured-section .sw-panel-marca {
  height: auto;
  flex: 0 1 auto;
}

/* ============================================================
   categorias.php — fichas de categoría SIN imagen
   Antes cada categoría mostraba la foto de un producto cualquiera,
   que no la representaba. Estas fichas no dependen de ningún
   archivo: una categoría nueva se ve bien desde el primer día.
   ============================================================ */
.category-list .cat-intro {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
}
.category-list .cat-intro p { color: var(--syv-green); font-size: 15px; }

.category-list .cat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  min-height: 160px;
  padding: 24px 16px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 10px;
  background: var(--surface-color);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.category-list .cat-tile:hover {
  transform: translateY(-4px);
  border-color: var(--syv-green);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--syv-green), transparent 85%);
}
.category-list .cat-tile-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--syv-green-tint);
  color: var(--syv-green);
  font-size: 24px;
  transition: background .18s ease, color .18s ease;
}
.category-list .cat-tile:hover .cat-tile-icono {
  background: var(--syv-green);
  color: #fff;
}
.category-list .cat-tile-nombre {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  color: var(--heading-color);
  margin-bottom: 4px;
}
.category-list .cat-tile:hover .cat-tile-nombre { color: var(--syv-green); }
.category-list .cat-tile-conteo { font-size: 13px; color: var(--syv-muted, #6b7280); }

@media (max-width: 575px) {
  .category-list .cat-tile { min-height: 140px; padding: 18px 10px; }
  .category-list .cat-tile-icono { width: 46px; height: 46px; font-size: 20px; margin-bottom: 10px; }
  .category-list .cat-tile-nombre { font-size: 14px; }
}

/* ============================================================
   Blog (blog.php, blog_detalle.php) — tarjetas que NO dependen
   de una imagen: sin foto muestran un bloque de marca.
   ============================================================ */
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 10px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.blog-card:hover {
  transform: translateY(-4px);
  border-color: var(--syv-green);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--syv-green), transparent 86%);
}
.blog-card-cover {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(150deg, var(--syv-green) 0%, var(--syv-green-dark) 100%);
}
.blog-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card-cover.sin-foto img { display: none; }
.blog-card-fallback,
.blog-card-cover.sin-foto::after {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.9);
  font-size: 44px;
}
.blog-card-cover.sin-foto::after { content: "\F685"; font-family: "bootstrap-icons"; }
.blog-card-cat {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: var(--syv-green);
  font-size: 12px;
  font-weight: 600;
}
.blog-card-body { display: flex; flex-direction: column; padding: 18px; flex: 1; }
.blog-card-fecha { font-size: 12.5px; color: var(--syv-muted, #6b7280); margin-bottom: 6px; }
.blog-card-titulo { font-size: 17px; line-height: 1.35; margin: 0 0 8px; }
.blog-card-titulo a { color: var(--heading-color); text-decoration: none; }
.blog-card-titulo a:hover { color: var(--syv-green); }
.blog-card-resumen { font-size: 14px; color: var(--default-color); margin-bottom: 14px; flex: 1; }
.blog-card-link { font-weight: 600; font-size: 14px; color: var(--syv-green); text-decoration: none; margin-top: auto; }
.blog-card-link i { transition: transform .15s ease; }
.blog-card-link:hover i { transform: translateX(3px); }

/* --- Detalle del artículo --- */
.blog-article-meta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 13.5px; color: var(--syv-muted, #6b7280); margin-bottom: 18px; }
.blog-article-cat { padding: 4px 12px; border-radius: 999px; background: var(--syv-green-tint); color: var(--syv-green); font-weight: 600; }
.blog-article-cover { border-radius: 12px; overflow: hidden; margin-bottom: 24px; }
.blog-article-lead { font-size: 18px; line-height: 1.6; color: var(--heading-color); font-weight: 500; margin-bottom: 22px; }
.blog-article-body { font-size: 16px; line-height: 1.8; }
.blog-article-body h2 { font-size: 22px; margin: 28px 0 12px; color: var(--syv-green); }
.blog-article-body ul, .blog-article-body ol { line-height: 1.8; margin-bottom: 16px; }
.blog-article-body p { margin-bottom: 16px; }
.blog-article-foot { margin-top: 32px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 88%); }
.blog-recientes { margin-top: 56px; padding-top: 8px; }

/* FAQ: bloque de cierre */
.faq .faq-cta { padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%); }

/* ============================================================
   Etiquetas (badges) de producto: DENTRO del marco de la foto
   Las fotos traen un marco verde propio horneado, con margen
   blanco. El badge en la esquina (12px) caía sobre la línea del
   marco. Se mete más adentro y se hace sólido para que lea claro.
   ============================================================ */
.best-sellers .badge-label,
.category-product-list .badge-label {
  top: 20px;
  left: 20px;
  padding: 4px 12px;
  font-weight: 600;
  border: 0;
  background: var(--syv-green);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.best-sellers .badge-label.trending,
.category-product-list .badge-label.trending {
  background: #d98a00;   /* ámbar accesible */
  color: #fff;
}
.best-sellers .badge-label.discount,
.category-product-list .badge-label.discount {
  background: #159945;   /* Recomendado en verde de marca */
  color: #fff;
}

/* ============================================================
   Carrusel de productos (Swiper) en el index
   ============================================================ */
.best-sellers .product-carousel { position: relative; padding: 8px 0 44px; }
/* El slide es la tarjeta directamente (sw_product_card la emite con
   clase swiper-slide): que ocupe bien y tenga altura pareja. */
.best-sellers .product-carousel .swiper-slide { height: auto; }
.best-sellers .product-carousel .swiper-slide .product-card { height: 100%; }

.best-sellers .product-carousel .swiper-pagination { bottom: 8px; }
.best-sellers .product-carousel .swiper-pagination-bullet {
  background: color-mix(in srgb, var(--syv-green), transparent 55%);
  opacity: 1;
}
.best-sellers .product-carousel .swiper-pagination-bullet-active { background: var(--syv-green); }

.best-sellers .product-carousel .swiper-button-prev,
.best-sellers .product-carousel .swiper-button-next {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 86%);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  color: var(--syv-green);
  top: 40%;
}
.best-sellers .product-carousel .swiper-button-prev:hover,
.best-sellers .product-carousel .swiper-button-next:hover {
  background: var(--syv-green);
  color: #fff;
  border-color: var(--syv-green);
}
.best-sellers .product-carousel .swiper-button-prev::after,
.best-sellers .product-carousel .swiper-button-next::after { font-size: 16px; font-weight: 700; }
.best-sellers .product-carousel .swiper-button-prev { left: -6px; }
.best-sellers .product-carousel .swiper-button-next { right: -6px; }
@media (max-width: 992px) {
  .best-sellers .product-carousel .swiper-button-prev,
  .best-sellers .product-carousel .swiper-button-next { display: none; }
}

/* Etiqueta Gluten Free: top-right, convive con la etiqueta principal
   (que va top-left). Verde de marca, como la de Recomendado. */
.best-sellers .badge-label.badge-gf,
.category-product-list .badge-label.badge-gf {
  left: auto;
  right: 20px;
  top: 20px;
  background: #0f7a37;
  color: #fff;
  gap: 4px;
}
.best-sellers .badge-label.badge-gf i,
.category-product-list .badge-label.badge-gf i { font-size: 12px; }