/* Sisfarma Home — portada de compra rápida */

:root {
  --sfh-verde: #0f8a5f;
  --sfh-verde-osc: #0b6b4a;
  --sfh-tinta: #17323f;
  --sfh-gris: #5b6b73;
  --sfh-borde: #e3e9ec;
  --sfh-fondo: #f5f8f9;
}

/* --- Cabecera aligerada: fuera la barra gris y el buscador duplicado ---
   Login y carrito no se ocultan: se reposicionan como pastilla flotante. Se
   mueven los bloques nativos de PrestaShop (no se reimplementan) para no perder
   el refresco por ajax del carrito ni su desplegable. */
#header .header-nav #_desktop_contact_link { display: none; }
#header .header-top #search_widget { display: none; }

@media (min-width: 768px) {
  #header .header-nav {
    min-height: 0;
    padding: 0;
    margin: 0;
    border-bottom: 0;
    box-shadow: none;
    background: transparent;
  }

  /* Un solo botón partido en dos mitades: blanca (cuenta) y verde (carrito).
     Sin paddings sueltos alrededor: el alto lo marcan los propios enlaces. */
  #header .header-nav .right-nav {
    position: fixed;
    bottom: 22px;
    right: 22px;
    z-index: 1000;
    display: flex;
    align-items: stretch;
    gap: 0;
    float: none;
    width: auto;
    max-width: none;
    padding: 0;
    height: 42px;
    background: #fff;
    border: 1px solid var(--sfh-borde);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: 0 8px 26px rgba(23, 50, 63, .18);
  }
  #header .header-nav .right-nav > div {
    margin: 0;
    float: none;
    display: flex;
    align-items: stretch;
  }

  /* Solo iconos: el banner verde ocupa todo el ancho y con texto la pastilla
     se comía el final del mensaje. El texto se mantiene para lectores de
     pantalla, no se hace display:none. */
  #header .header-nav .right-nav .user-info a > span,
  #header .header-nav .right-nav .blockcart a > span:not(.cart-products-count) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* El tema mete margin-left:40px aquí y padding:12px en .blockcart; con eso
     el botón se hincha aunque los enlaces sean pequeños. */
  #header .header-nav .right-nav .user-info {
    display: flex;
    align-items: stretch;
    margin: 0;
  }
  #header .header-nav .right-nav .user-info a {
    display: flex;
    align-items: center;
    padding: 0 11px 0 14px;
    color: var(--sfh-tinta);
  }
  #header .header-nav .right-nav .user-info a:hover {
    color: var(--sfh-verde-osc);
    background: var(--sfh-fondo);
  }
  #header .header-nav .right-nav .user-info i { font-size: 19px; line-height: 1; }

  /* El tema fija height:48px en .blockcart; sin anular eso desborda la pastilla
     y arrastra el icono 4px por debajo del centro. */
  #header .header-nav .right-nav .blockcart {
    background: var(--sfh-verde);
    border-radius: 0;
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    align-items: stretch;
  }
  #header .header-nav .right-nav .blockcart,
  #header .header-nav .right-nav .blockcart a,
  #header .header-nav .right-nav .blockcart i { color: #fff; }
  /* El tema le da 48px de alto a este enlace y desborda la pastilla de 42.
     Centrándolo (en vez de estirarlo) el icono queda a la misma altura que el
     de la cuenta, y el verde lo sigue pintando .blockcart, que sí se estira. */
  #header .header-nav .right-nav .blockcart .header {
    display: flex;
    align-items: center;
    margin: 0;
    height: 100%;
  }
  #header .header-nav .right-nav .blockcart .header > a {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 14px 0 11px;
  }
  #header .header-nav .right-nav .blockcart i { font-size: 19px; line-height: 1; }
  #header .header-nav .right-nav .blockcart .cart-products-count { font-size: 13px; font-weight: 600; line-height: 1; }
  #header .header-nav .right-nav .user-info a,
  #header .header-nav .right-nav .blockcart .header > a { line-height: 1; }
}


/* En móvil la barra nativa ya lleva menú, logo y carrito: se fija solo esa fila
   (no el header entero, que incluye la franja y ocuparía media pantalla). */
@media (max-width: 767px) {
  /* fixed y no sticky: sticky solo se pega dentro de su padre, y el <header>
     mide poco más que la propia barra, así que se iría con el scroll. */
  #header .header-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    background: #fff;
    box-shadow: 0 2px 10px rgba(23, 50, 63, .08);
  }
  #header { padding-top: 50px; }
  /* Esta fila queda vacía en móvil, pero no se puede ocultar: dentro vive el
     panel desplegable del menú hamburguesa. */
  #header .header-top { padding-top: 0; padding-bottom: 0; }

  /* El carrito del tema viene con un bloque gris que desentona: mismo verde
     que en escritorio. */
  #header .header-nav #_mobile_cart { margin: .3rem .6rem .3rem 0; }
  #header .header-nav #_mobile_cart .blockcart {
    background: var(--sfh-verde);
    border-radius: 999px;
    padding: .3rem .7rem;
  }
  #header .header-nav #_mobile_cart .blockcart,
  #header .header-nav #_mobile_cart .blockcart a,
  #header .header-nav #_mobile_cart .blockcart i,
  #header .header-nav #_mobile_cart .blockcart span { color: #fff; }
}

/* --- Banner verde: marca + promesa de entrega en una línea --- */
.sfh-franja {
  background: var(--sfh-verde);
  color: #fff;
}
.sfh-franja__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  padding: .55rem 1rem;
  text-align: center;
}
.sfh-franja__logo { flex: 0 0 auto; display: flex; align-items: center; }
.sfh-franja__logo img {
  height: 34px;
  width: auto;
  display: block;
}
.sfh-franja__sep { flex: 0 0 auto; opacity: .5; font-size: 1.1rem; }
.sfh-franja__texto { display: flex; flex-direction: column; line-height: 1.25; }
.sfh-franja__texto strong { font-size: .98rem; font-weight: 700; }
.sfh-franja__texto small { font-size: .78rem; opacity: .9; }

/* La fila blanca de la cabecera queda vacía: el logo pasó al banner y el
   mega-menú está desactivado. Se colapsa, pero sin display:none porque dentro
   vive el panel del menú hamburguesa de móvil. */
#header .header-top { padding-top: 0; padding-bottom: 0; }
#header .header-top #_desktop_logo { display: none; }

@media (max-width: 767px) {
  /* El logo ya va en la barra fija de arriba: en el banner sobra. */
  .sfh-franja__logo,
  .sfh-franja__sep { display: none; }
  .sfh-franja__inner { padding: .5rem .9rem; }
  .sfh-franja__texto strong { font-size: .92rem; }
  .sfh-franja__texto small { font-size: .72rem; }
}

/* --- Buscador grande --- */
.sfh-hero {
  background: linear-gradient(180deg, var(--sfh-fondo) 0%, #fff 100%);
  padding: 2.5rem 1rem 2rem;
  margin-bottom: 2rem;
}
.sfh-hero__inner { max-width: 760px; margin: 0 auto; text-align: center; }
.sfh-hero__titulo {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sfh-tinta);
  margin: 0 0 .4rem;
}
.sfh-hero__sub { color: var(--sfh-gris); margin: 0 0 1.4rem; font-size: 1rem; }

/* El menú de categorías nativo de PrestaShop (todas las familias en una fila)
   se sustituye por el botón + panel de abajo; se oculta solo en escritorio,
   el menú hamburguesa de móvil se deja tal cual. */
#_desktop_top_menu { display: none !important; }

.sfh-buscabar {
  display: flex;
  align-items: stretch;
  gap: .6rem;
  position: relative;
}

.sfh-catmenu { position: relative; flex: 0 0 auto; }
.sfh-catmenu__btn {
  display: flex;
  align-items: center;
  gap: .5rem;
  height: 100%;
  background: #fff;
  border: 2px solid var(--sfh-borde);
  border-radius: 999px;
  padding: .85rem 1.1rem;
  font-weight: 600;
  font-size: .95rem;
  color: var(--sfh-tinta);
  cursor: pointer;
  white-space: nowrap;
}
.sfh-catmenu__btn:hover { border-color: var(--sfh-verde); color: var(--sfh-verde-osc); }

/* --- Variante de cabecera: va pegado al logo, en la fila del buscador --- */
.sfh-catmenu--header {
  float: left;
  margin: 1.35rem 1rem 0 0;
}
.sfh-catmenu--header .sfh-catmenu__btn {
  background: var(--sfh-verde);
  border-color: var(--sfh-verde);
  color: #fff;
  padding: .6rem 1.1rem;
  font-size: .92rem;
}
.sfh-catmenu--header .sfh-catmenu__btn:hover {
  background: var(--sfh-verde-osc);
  border-color: var(--sfh-verde-osc);
  color: #fff;
}
/* En móvil manda el menú hamburguesa propio del tema */
@media (max-width: 767px) {
  .sfh-catmenu--header { display: none; }
}
.sfh-catmenu__caret { transition: transform .15s; }
.sfh-catmenu__btn[aria-expanded="true"] .sfh-catmenu__caret { transform: rotate(180deg); }

/* --- Mega-menú: familias a la izquierda, subfamilias a la derecha --- */
.sfh-catmenu__panel {
  position: absolute;
  top: calc(100% + .6rem);
  left: 0;
  z-index: 40;
  display: flex;
  width: 820px;
  max-width: calc(100vw - 3rem);
  background: #fff;
  border: 1px solid var(--sfh-borde);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(23, 50, 63, .18);
  max-height: 80vh;
  overflow: hidden;
}

/* Las 12 familias deben caber enteras: sin scroll, que si no parece cortado. */
.sfh-catmenu__familias {
  flex: 0 0 292px;
  list-style: none;
  margin: 0;
  padding: .45rem;
  background: var(--sfh-fondo);
  border-right: 1px solid var(--sfh-borde);
}
.sfh-catmenu__familia {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .5rem .7rem;
  border-radius: 9px;
  color: var(--sfh-tinta);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.25;
  transition: background .12s, color .12s;
}
.sfh-catmenu__familia:hover,
.sfh-catmenu__familia.is-activa {
  background: #fff;
  color: var(--sfh-verde-osc);
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(23, 50, 63, .08);
}
.sfh-catmenu__icono {
  flex: 0 0 auto;
  display: flex;
  color: var(--sfh-verde);
}
.sfh-catmenu__icono svg { width: 20px; height: 20px; }
.sfh-catmenu__nombre { flex: 1 1 auto; }
.sfh-catmenu__flecha { flex: 0 0 auto; color: var(--sfh-gris); opacity: 0; }
.sfh-catmenu__familia:hover .sfh-catmenu__flecha,
.sfh-catmenu__familia.is-activa .sfh-catmenu__flecha { opacity: 1; }

.sfh-catmenu__detalle {
  flex: 1 1 auto;
  min-width: 0;
  padding: 1.1rem 1.25rem;
  overflow-y: auto;
}
.sfh-catmenu__subpanel { display: none; }
.sfh-catmenu__subpanel.is-activa { display: block; }

.sfh-catmenu__titulo {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin-bottom: .85rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--sfh-borde);
  color: var(--sfh-tinta);
  font-size: 1.02rem;
  font-weight: 700;
}
.sfh-catmenu__titulo:hover { color: var(--sfh-verde-osc); text-decoration: none; }
.sfh-catmenu__titulo span {
  font-size: .78rem;
  font-weight: 600;
  color: var(--sfh-verde);
  text-transform: uppercase;
  letter-spacing: .02em;
}

.sfh-catmenu__subs {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 3;
  column-gap: 1.4rem;
}
.sfh-catmenu__subs li {
  break-inside: avoid;
  margin-bottom: .48rem;
}
.sfh-catmenu__subs a {
  font-size: .87rem;
  line-height: 1.3;
  color: var(--sfh-gris);
}
.sfh-catmenu__subs a:hover { color: var(--sfh-verde-osc); text-decoration: underline; }

@media (max-width: 1100px) {
  .sfh-catmenu__panel { width: 640px; }
  .sfh-catmenu__subs { columns: 2; }
}

.sfh-buscador {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  background: #fff;
  border: 2px solid var(--sfh-verde);
  border-radius: 999px;
  padding: .35rem .35rem .35rem 1rem;
  box-shadow: 0 6px 22px rgba(15, 138, 95, .12);
}
.sfh-buscador__lupa { color: var(--sfh-verde); display: inline-flex; flex: 0 0 auto; }
.sfh-buscador__input {
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  font-size: 1.05rem;
  padding: .85rem .75rem;
  min-width: 0;
  background: transparent;
  color: var(--sfh-tinta);
}
.sfh-buscador__btn {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: var(--sfh-verde);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  padding: .8rem 1.6rem;
  cursor: pointer;
}
.sfh-buscador__btn:hover { background: var(--sfh-verde-osc); }

/* --- Secciones --- */
.sfh-seccion { margin: 0 auto 2.5rem; max-width: 1200px; padding: 0 1rem; }
.sfh-seccion__cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--sfh-borde);
  padding-bottom: .5rem;
}
.sfh-seccion__cab h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--sfh-tinta);
  margin: 0;
}
.sfh-seccion__vertodo {
  flex: 0 0 auto;
  font-size: .9rem;
  font-weight: 600;
  color: var(--sfh-verde);
}

/* Columnas que dividen exacto los 6 productos por bloque (6 / 3 / 2), para que
   nunca quede una última fila coja con un hueco. */
.sfh-rejilla {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}
.sfh-rejilla .product-miniature { width: 100%; margin: 0; }

@media (max-width: 1199px) {
  .sfh-rejilla { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .sfh-rejilla { grid-template-columns: repeat(2, 1fr); }
}

/* --- Categorías destacadas --- */
.sfh-cats__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .9rem;
}
.sfh-cats__enlace {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding: 1.1rem .6rem;
  border: 1px solid var(--sfh-borde);
  border-radius: 14px;
  background: #fff;
  color: var(--sfh-tinta);
  text-align: center;
  height: 100%;
  transition: border-color .15s, transform .15s;
}
.sfh-cats__enlace:hover {
  border-color: var(--sfh-verde);
  transform: translateY(-2px);
  color: var(--sfh-verde-osc);
  text-decoration: none;
}
.sfh-cats__img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 50%;
}
.sfh-cats__img--vacia {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sfh-relleno, var(--sfh-fondo));
  color: currentColor;
  font-weight: 700;
  font-size: 1.5rem;
}
/* Con el icono relleno, el círculo de color competía con el propio dibujo y la
   rejilla quedaba saturada: el fondo cede y pasa a ser una ficha blanca. */
.sfh-cats__img--icono {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--sfh-borde);
  border-radius: 14px;
  color: var(--sfh-verde-osc);
}
.sfh-cats__img--icono svg { width: 30px; height: 30px; }

/* Duotono: el cuerpo del icono se rellena con el tinte claro de la familia y el
   trazo va en el tono fuerte. El generador marca qué forma es el cuerpo. */
.sfh-cats__img--icono .sfh-icono__forma { fill: var(--sfh-relleno, transparent); }

/* La ficha se tiñe muy levemente al pasar por encima, para que se note que es
   pulsable sin volver al bloque de color. */
.sfh-cats__enlace:hover .sfh-cats__img--icono {
  background: var(--sfh-relleno, var(--sfh-fondo));
  border-color: currentColor;
}

/* Un tinte por familia. El número lo asigna el módulo a partir del id de la
   categoría, no de su posición, porque la rejilla se reordena por ventas y el
   color tiene que quedarse quieto para que sirva de referencia. */
.sfh-cats__img--c1 { --sfh-relleno: #eaf3de; color: #3b6d11; }
.sfh-cats__img--c2 { --sfh-relleno: #e6f1fb; color: #185fa5; }
.sfh-cats__img--c3 { --sfh-relleno: #faece7; color: #993c1d; }
.sfh-cats__img--c4 { --sfh-relleno: #e1f5ee; color: #0f6e56; }
.sfh-cats__img--c5 { --sfh-relleno: #eeedfe; color: #534ab7; }
.sfh-cats__img--c6 { --sfh-relleno: #faeeda; color: #854f0b; }
.sfh-cats__img--c7 { --sfh-relleno: #fbeaf0; color: #993556; }
.sfh-cats__img--c8 { --sfh-relleno: #fcebeb; color: #a32d2d; }
.sfh-cats__img--c9 { --sfh-relleno: #f1efe8; color: #5f5e5a; }
.sfh-cats__img--c10 { --sfh-relleno: #d9f0f4; color: #0e6b78; }
.sfh-cats__img--c11 { --sfh-relleno: #e4e6f7; color: #2f3f8f; }
.sfh-cats__img--c12 { --sfh-relleno: #f0eadd; color: #6b5424; }
.sfh-cats__nombre { font-size: .92rem; font-weight: 600; line-height: 1.25; }

@media (max-width: 575px) {
  .sfh-hero { padding: 1.75rem .9rem 1.5rem; }
  .sfh-hero__titulo { font-size: 1.5rem; }
  .sfh-buscador { padding-left: .75rem; }
  .sfh-buscador__input { font-size: 1rem; padding: .7rem .5rem; }
  .sfh-buscador__btn { padding: .7rem 1.1rem; font-size: .92rem; }
  .sfh-rejilla { gap: .75rem; }
}

/* ===================================================================
   Páginas de categoría
   =================================================================== */

/* El tema reserva una tarjeta con sitio para la descripción y la foto de
   portada de la categoría. Como ninguna categoría tiene ni una cosa ni otra,
   quedaba una caja blanca de 220px con el título flotando dentro.
   :has() permite plegarla sólo cuando de verdad está vacía, así que el día que
   se escriba una descripción vuelve a aparecer sola. */
#js-product-list-header .block-category {
  min-height: 0;          /* el tema fija 13.75rem, que es el hueco que sobraba */
  padding: 0;
  margin-bottom: 1rem;
  background: transparent;
  border: 0;
  box-shadow: none;
}
#js-product-list-header .block-category h1 {
  margin: 0;
  color: var(--sfh-tinta);
}
#js-product-list-header .block-category .block-category-inner:not(:has(*)) { display: none; }

/* Las subcategorías se pintaban como fichas con hueco para una miniatura que no
   existe: trece recuadros vacíos con el nombre debajo. Se convierten en una
   rejilla de pastillas, que es lo que realmente se usa aquí (navegar rápido). */
#subcategories { padding: 1.1rem 1.25rem 1.25rem; }
#subcategories .subcategory-heading {
  margin: 0 0 .85rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--sfh-tinta);
}
/* Los selectores van con `ul li` porque el tema usa esa misma forma
   (#subcategories ul li ...) y si no, gana él: min-width 200px, mayúsculas y
   el marco de la miniatura inexistente. */
#subcategories ul li .subcategory-image { display: none; }
#subcategories ul.subcategories-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
#subcategories ul.subcategories-list li {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  text-align: left;
  list-style: none;
}
#subcategories ul li h5 { margin: 0; }
#subcategories ul li .subcategory-name {
  display: block;
  padding: .65rem .8rem;
  border: 1px solid var(--sfh-borde);
  border-radius: 10px;
  background: #fff;
  color: var(--sfh-verde-osc);
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.3;
  text-transform: none;
  transition: border-color .15s, background .15s;
}
#subcategories ul li .subcategory-name:hover {
  border-color: var(--sfh-verde);
  background: var(--sfh-fondo);
  text-decoration: none;
}

/* Nombre de producto a dos líneas completas: antes se cortaba a media palabra
   y en una farmacia el formato ("50 ml", "30 comprimidos") es lo que distingue
   un producto de otro. */
#products .product-title,
.featured-products .product-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.4em;
  font-size: .86rem;
  line-height: 1.32;
}
#products .product-title a { color: var(--sfh-tinta); }

@media (max-width: 767px) {
  /* El tema coloca la columna lateral por delante del contenido. En un móvil
     eso obliga a bajar por las 12 categorías y el bloque de marcas —786px—
     antes de ver el primer producto. Se invierte el orden: primero lo que se
     ha venido a ver, y la navegación debajo. */
  .row:has(> #left-column) { display: flex; flex-direction: column; }
  .row > #content-wrapper { order: 1; }
  .row > #left-column { order: 2; }

  /* El menú superior está oculto por decisión de diseño, así que este botón
     abría un panel vacío. */
  #header #menu-icon { display: none; }
}

@media (max-width: 575px) {
  #subcategories { padding: .9rem 1rem 1rem; }
  #subcategories ul.subcategories-list { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}