/*
 * Maquetación del tema hijo "speedhobbys": el diseño de la maqueta de
 * 2026-10-07 (docs/02_diseno_tienda/) sobre el classic.
 *
 * Escrita a mano (a diferencia de custom.css, que es GENERADO y sólo lleva
 * colores). Se carga después de theme.css y de custom.css (priority en
 * config/theme.yml). Los bloques sh-* de la portada los pinta el módulo
 * speedhobbyshome; el resto son clases del classic.
 */

:root {
  --sh-rojo: #e30613;
  --sh-rojo-oscuro: #c00510;
  --sh-amarillo: #ffc20e;
  --sh-fondo: #f2f3f5;
  --sh-tarjeta: #fff;
  --sh-borde: #e4e6ea;
  --sh-texto: #1d1d1f;
  --sh-texto-suave: #6b6f76;
  --sh-verde: #1e9e3e;
  --sh-pie: #262626;
  --sh-radio: 6px;
  --sh-sombra: 0 1px 3px rgba(0, 0, 0, .06);
}

body,
#wrapper {
  background: var(--sh-fondo);
  color: var(--sh-texto);
}

/* ===================================================== Cabecera ========= */

#header {
  box-shadow: none;
}

/* Barra superior (lema / teléfono / tienda) */
#header .header-nav {
  max-height: none;
  border-bottom: 1px solid var(--sh-borde);
  background: #f7f7f8;
}

.sh-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 2.25rem;
  font-size: .8125rem;
}

.sh-topbar-lema {
  color: var(--sh-texto);
  font-weight: 600;
}

.sh-topbar-enlaces a {
  display: inline-flex;
  align-items: center;
  margin-left: 1.5rem;
  color: var(--sh-texto);
  font-weight: 600;
}

.sh-topbar-enlaces a + a {
  padding-left: 1.5rem;
  border-left: 1px solid #c9ccd1;
}

.sh-topbar-enlaces .material-icons {
  margin-right: .3rem;
  font-size: 1.15rem;
  color: var(--sh-rojo);
}

/* Fila logo / buscador / iconos */
#header .header-top {
  padding: 1rem 0;
  background: #fff;
}

.sh-cabecera {
  display: flex;
  align-items: center;
}

#header .sh-cabecera #_desktop_logo h1 {
  margin: 0;
}

#header .sh-cabecera .logo {
  max-height: 4.5rem;
  width: auto;
}

/* Buscador: caja ancha con botón rojo (con #header para ganar a las
   reglas .header-top .search-widgets del classic) */
#header .sh-buscador.search-widgets {
  float: none;
  width: 100%;
  max-width: none;
  overflow: visible;
}

#header .sh-buscador form {
  position: relative;
  display: flex;
}

#header .sh-buscador form input[type=text] {
  flex: 1;
  min-width: 0;
  height: 2.75rem;
  padding: 0 3.5rem 0 1rem;
  border: 1px solid #cfd2d7;
  border-radius: var(--sh-radio);
  background: #fff;
  color: var(--sh-texto);
  font-size: .875rem;
}

#header .sh-buscador form input[type=text]:focus {
  border-color: var(--sh-rojo);
  outline: 0;
}

#header .sh-buscador form button[type=submit] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 3rem;
  padding: 0;
  border: 0;
  border-radius: 0 var(--sh-radio) var(--sh-radio) 0;
  background: var(--sh-rojo);
  color: #fff;
  cursor: pointer;
  transform: none;
}

#header .sh-buscador form button[type=submit]:hover {
  background: var(--sh-rojo-oscuro);
}

#header .sh-buscador form button .material-icons {
  position: static;
  padding: 0;
  color: #fff;
}

#header .sh-buscador form i.clear {
  right: 3.25rem;
}

/* Cuenta y carrito: icono encima del texto */
.sh-cabecera-iconos {
  display: flex;
  justify-content: flex-end;
  gap: 1.75rem;
}

.sh-cabecera-iconos .user-info {
  display: flex;
  gap: 1rem;
  margin: 0;
}

.sh-cabecera-iconos .user-info a,
.sh-cabecera-iconos .blockcart a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  color: var(--sh-texto);
  font-size: .8125rem;
  line-height: 1.2;
  white-space: nowrap;
}

.sh-cabecera-iconos .material-icons {
  font-size: 1.9rem;
  color: var(--sh-texto);
}

.sh-cabecera-iconos .user-info a:hover,
.sh-cabecera-iconos .user-info a:hover .material-icons,
.sh-cabecera-iconos .blockcart a:hover,
.sh-cabecera-iconos .blockcart a:hover .material-icons {
  color: var(--sh-rojo);
}

#header .sh-cabecera-iconos .blockcart,
#header .sh-cabecera-iconos .blockcart.active {
  height: auto;
  margin: 0;
  padding: 0;
  background: none;
}

/* Insignia con el número de productos (también en la cabecera móvil) */
#header .blockcart .cart-products-count {
  position: absolute;
  top: -.35rem;
  left: 50%;
  min-width: 1.15rem;
  height: 1.15rem;
  margin-left: .35rem;
  padding: 0 .25rem;
  border-radius: 1rem;
  background: var(--sh-rojo);
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1.15rem;
  text-align: center;
}

/* Menú rojo a todo el ancho */
.sh-menu {
  position: relative;
  background: var(--sh-rojo);
  border-bottom: 3px solid var(--sh-amarillo);
}

.sh-menu .menu {
  padding: 0;
}

.sh-menu .top-menu[data-depth="0"] {
  display: flex;
  margin: 0;
}

.sh-menu .top-menu[data-depth="0"] > li {
  flex: 1 1 auto;
  text-align: center;
}

#header .sh-menu .top-menu a[data-depth="0"] {
  display: block;
  padding: .85rem 1rem;
  color: #fff;
  font-size: .9375rem;
  font-weight: 600;
  text-transform: none;
}

#header .sh-menu .top-menu > li:hover > a[data-depth="0"],
#header .sh-menu .top-menu a[data-depth="0"]:hover {
  background: var(--sh-rojo-oscuro);
  color: #fff;
}

/* Botón "Categorías" (sólo las padre) delante del menú configurable */
.sh-menu-fila {
  display: flex;
  align-items: stretch;
}

.sh-menu-fila #_desktop_top_menu {
  flex: 1;
  min-width: 0;
}

.sh-menu-categorias {
  position: relative;
  flex: 0 0 auto;
}

.sh-menu-categorias-boton {
  display: flex;
  align-items: center;
  gap: .4rem;
  height: 100%;
  padding: .85rem 1.1rem;
  border: 0;
  background: var(--sh-rojo-oscuro);
  color: #fff;
  font-size: .9375rem;
  font-weight: 700;
  cursor: pointer;
}

.sh-menu-categorias-boton:hover,
.sh-menu-categorias-boton[aria-expanded="true"] {
  background: #9e040d;
}

/* Sin max-height ni overflow: recortarían el panel lateral de las hijas.
   Está en el flujo de la página (la cabecera no es fija): si no cabe, se
   ve con el scroll normal. */
.sh-menu-categorias-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  width: 290px;
  padding: .4rem 0;
  border: 1px solid var(--sh-borde);
  border-top: 3px solid var(--sh-amarillo);
  border-radius: 0 0 0 var(--sh-radio);
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}

.sh-menu-categorias-panel[hidden] {
  display: none;
}

.sh-menu-categorias-panel ul {
  margin: 0;
}

.sh-menu-categorias-padre > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .5rem 1rem;
  color: var(--sh-texto);
  font-weight: 600;
}

.sh-menu-categorias-padre > a .material-icons {
  font-size: 1.1rem;
  color: #b0b4ba;
}

.sh-menu-categorias-padre.sh-activa > a,
.sh-menu-categorias-padre > a:hover,
.sh-menu-categorias-padre > a:focus {
  background: var(--sh-fondo);
  color: var(--sh-rojo);
}

.sh-menu-categorias-padre.sh-activa > a .material-icons {
  color: var(--sh-rojo);
}

/* Segundo nivel: panel lateral, a la altura de todo el panel de padres */
.sh-menu-categorias-hijas {
  display: none;
  position: absolute;
  top: -3px;
  left: 100%;
  width: 480px;
  min-height: calc(100% + 3px);
  padding: 1rem 1.25rem;
  border: 1px solid var(--sh-borde);
  border-top: 3px solid var(--sh-amarillo);
  border-radius: 0 0 var(--sh-radio) 0;
  background: #fff;
  box-shadow: 8px 8px 24px rgba(0, 0, 0, .12);
}

.sh-menu-categorias-padre.sh-activa .sh-menu-categorias-hijas {
  display: block;
}

.sh-menu-categorias-titulo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .6rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--sh-borde);
  color: var(--sh-texto);
  font-size: 1.05rem;
  font-weight: 700;
}

.sh-menu-categorias-titulo span {
  color: var(--sh-rojo);
  font-size: .8125rem;
  font-weight: 600;
}

.sh-menu-categorias-hijas ul.sh-dos-columnas {
  column-count: 2;
  column-gap: 1.5rem;
}

/* Tablet: el panel lateral no puede pasar del borde de la pantalla */
@media (max-width: 1199px) {
  .sh-menu-categorias-hijas {
    width: min(480px, calc(100vw - 290px - 4rem));
  }
}

@media (max-width: 991px) {
  .sh-menu-categorias-hijas ul.sh-dos-columnas {
    column-count: 1;
  }
}

.sh-menu-categorias-hijas li {
  break-inside: avoid;
}

.sh-menu-categorias-hijas li a {
  display: block;
  padding: .3rem 0;
  color: var(--sh-texto);
}

.sh-menu-categorias-hijas li a:hover,
.sh-menu-categorias-hijas li a:focus,
.sh-menu-categorias-titulo:hover {
  color: var(--sh-rojo);
}

/* Ofertas en amarillo, esté donde esté: el menú lo puede reordenar la
   tienda (ps_mainmenu genera el id a partir de la etiqueta del enlace). */
#header .sh-menu .top-menu[data-depth="0"] > li#lnk-ofertas > a {
  background: var(--sh-amarillo);
  color: var(--sh-texto);
}

#header .sh-menu .top-menu[data-depth="0"] > li#lnk-ofertas > a:hover {
  background: #f5b400;
}

/* Desplegable de "Productos": pegado bajo la barra */
.sh-menu .top-menu .sub-menu {
  top: 100%;
  margin-left: 0;
  text-align: left;
}

#header .sh-menu .top-menu .sub-menu a {
  color: var(--sh-texto);
}

#header .sh-menu .top-menu .sub-menu a:hover {
  color: var(--sh-rojo);
}

/* Tablet (768-1199): el menú no cabe en una línea. Se compacta y, si aun
   así no cabe, pasa a dos filas (nunca se corta: Ofertas quedaba fuera de
   la pantalla). No se usa scroll horizontal: recortaría los desplegables. */
@media (max-width: 1199px) {
  .sh-menu .top-menu[data-depth="0"] {
    flex-wrap: wrap;
  }

  /* Sin estirarse: en la segunda fila quedaban bloques enormes */
  .sh-menu .top-menu[data-depth="0"] > li {
    flex: 0 0 auto;
  }

  #header .sh-menu .top-menu a[data-depth="0"] {
    padding: .75rem .7rem;
    font-size: .875rem;
  }

  .sh-menu-categorias-boton {
    padding: .75rem .9rem;
  }
}

/* Móvil: la barra queda vacía (el JS del classic se lleva el menú a la hamburguesa) */
@media (max-width: 767px) {
  .sh-menu {
    height: 4px;
    border-bottom: 0;
    background: var(--sh-rojo);
  }

  .sh-menu .container {
    display: none;
  }

  #header .header-top {
    padding: .5rem 0;
  }

  #header .header-nav .top-logo .logo {
    max-height: 2.5rem;
    width: auto;
  }

  #header .header-nav .blockcart {
    position: relative;
    background: none;
  }

  #header .header-nav .blockcart .cart-products-count {
    top: .35rem;
  }
}

/* ================================================== Portada (sh-*) ====== */

#wrapper {
  padding-top: 1.25rem;
}

.page-home .sh-seccion,
.page-home .sh-tienda,
.page-home .sh-garantias,
.page-home .sh-hero {
  margin-bottom: 1.75rem;
}

.sh-tarjeta {
  background: var(--sh-tarjeta);
  border: 1px solid var(--sh-borde);
  border-radius: var(--sh-radio);
  box-shadow: var(--sh-sombra);
}

.sh-seccion-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.sh-seccion-titulo,
#main .sh-seccion .products-section-title {
  margin: 0 0 .9rem;
  color: var(--sh-texto);
  font-size: 1.5rem;
  font-weight: 700;
  text-align: left;
  text-transform: none;
}

.sh-ver-todos {
  display: inline-flex;
  align-items: center;
  color: var(--sh-rojo);
  font-weight: 600;
}

.sh-ver-todos .material-icons {
  margin-left: .3rem;
  font-size: 1.1rem;
}

/* Hero */
.sh-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 300px;
  overflow: hidden;
  border-radius: var(--sh-radio);
  background:
    linear-gradient(100deg, #fff 0 42%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(160deg, #dfe9f2 0%, #f7f9fb 60%, #fff 100%);
  box-shadow: var(--sh-sombra);
}

.sh-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 55%;
  height: 14px;
  background: linear-gradient(90deg, var(--sh-rojo) 0 70%, var(--sh-amarillo) 70%);
  clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
}

.sh-hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 35%;
  height: 12px;
  background: linear-gradient(90deg, var(--sh-amarillo) 0 30%, var(--sh-rojo) 30%);
  clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%);
}

.sh-hero-texto {
  position: relative;
  z-index: 1;
  flex: 0 0 48%;
  padding: 2.5rem 1rem 2.5rem 2.5rem;
}

.sh-hero-marca {
  margin: 0;
  color: var(--sh-rojo);
  font-size: 4.25rem;
  font-weight: 900;
  font-style: italic;
  line-height: .95;
  letter-spacing: -.02em;
}

.sh-hero-titulo {
  margin: .4rem 0 .6rem;
  color: var(--sh-texto);
  font-size: 2.1rem;
  font-weight: 800;
  font-style: italic;
  line-height: 1.1;
  text-transform: none;
}

.sh-hero-sub {
  margin-bottom: 1.25rem;
  color: var(--sh-texto);
  font-size: 1rem;
}

.sh-hero-boton.btn {
  display: inline-flex;
  align-items: center;
  padding: .7rem 1.4rem;
  border-radius: var(--sh-radio);
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: none;
}

.sh-hero-boton .material-icons {
  margin-left: .5rem;
}

.sh-hero-imagen {
  flex: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 2rem 1.5rem 0;
}

.sh-hero-imagen img {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* Garantías */
.sh-garantias {
  display: flex;
  background: var(--sh-tarjeta);
  border: 1px solid var(--sh-borde);
  border-radius: var(--sh-radio);
  box-shadow: var(--sh-sombra);
}

.sh-garantia {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 1rem;
  color: var(--sh-texto);
  font-weight: 600;
}

.sh-garantia + .sh-garantia {
  border-left: 1px solid var(--sh-borde);
}

a.sh-garantia:hover {
  color: var(--sh-rojo);
}

.sh-garantia .material-icons {
  font-size: 2.1rem;
  color: var(--sh-rojo);
}

/* Rejilla de categorías */
.sh-categorias-rejilla {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .75rem;
}

.sh-categoria {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem .75rem;
  color: var(--sh-texto);
  transition: border-color .15s, box-shadow .15s;
}

.sh-categoria:hover {
  border-color: var(--sh-rojo);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
  color: var(--sh-rojo);
}

.sh-categoria-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: .6rem;
}

.sh-categoria-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.sh-categoria-nombre {
  font-weight: 600;
  text-align: center;
}

/* Marcas */
.sh-marcas-fila {
  display: flex;
  align-items: center;
  padding: .75rem 0;
}

.sh-marca {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: 0 1rem;
  color: var(--sh-texto);
}

.sh-marca + .sh-marca {
  border-left: 1px solid var(--sh-borde);
}

.sh-marca img {
  max-width: 100%;
  max-height: 3rem;
  object-fit: contain;
}

/* Sin logo: el nombre, en grande */
.sh-marca span {
  font-size: 1.5rem;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.sh-marca:hover span {
  color: var(--sh-rojo);
}

/* Tienda física */
.sh-tienda {
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.sh-tienda-img {
  flex: 0 0 47%;
}

.sh-tienda-img img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 220px;
  object-fit: cover;
}

.sh-tienda-texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 1.5rem 2rem;
}

.sh-tienda-texto h2 {
  margin-bottom: .3rem;
  font-size: 1.35rem;
  font-weight: 700;
  text-transform: none;
}

.sh-tienda-texto p {
  margin-bottom: 1rem;
  color: var(--sh-texto-suave);
}

.sh-boton-borde.btn {
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--sh-rojo);
  border-radius: var(--sh-radio);
  background: #fff;
  color: var(--sh-rojo);
  font-weight: 700;
  text-transform: none;
}

.sh-boton-borde.btn:hover {
  background: var(--sh-rojo);
  color: #fff;
}

.sh-boton-borde .material-icons {
  margin-left: .35rem;
  font-size: 1.1rem;
}

/* ======================================= Miniatura de producto ========= */
/* Portada, categorías y buscador (templates/catalog/_partials/miniatures/) */

.product-miniature .thumbnail-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--sh-borde);
  border-radius: var(--sh-radio);
  background: #fff;
  box-shadow: var(--sh-sombra);
  overflow: hidden;
}

.product-miniature .thumbnail-container:hover,
.product-miniature .thumbnail-container:focus {
  box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
}

.product-miniature .thumbnail-container:hover .product-description::after {
  display: none;
}

.product-miniature .product-description {
  position: static;
  flex: 1;
  display: flex;
  flex-direction: column;
  width: auto;
  height: auto;
  padding: .75rem 1rem 1rem;
  text-align: left;
  background: #fff;
}

#wrapper .product-miniature .product-title {
  margin: 0 0 .35rem;
  text-align: left;
  text-transform: none;
}

.product-miniature .product-title a {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 2.6em;
  color: var(--sh-texto);
  text-align: left;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.3;
}

.product-miniature .product-title a:hover {
  color: var(--sh-rojo);
}

.sh-disponibilidad {
  display: flex;
  align-items: center;
  margin: 0 0 .2rem;
  font-size: .8125rem;
  font-weight: 600;
}

.sh-disponibilidad::before {
  content: "";
  width: .55rem;
  height: .55rem;
  margin-right: .4rem;
  border-radius: 50%;
  background: currentColor;
}

.sh-disponibilidad-available { color: var(--sh-verde); }
.sh-disponibilidad-last_remaining_items { color: #d98200; }
.sh-disponibilidad-unavailable { color: #a0a4ab; }

.sh-referencia {
  margin: 0 0 .4rem;
  color: var(--sh-texto-suave);
  font-size: .75rem;
}

.product-miniature .product-price-and-shipping {
  margin-top: auto;
  text-align: left;
}

.product-miniature .product-price-and-shipping .price {
  color: var(--sh-texto);
  font-size: 1.5rem;
  font-weight: 800;
}

.sh-miniatura-accion {
  margin-top: .6rem;
}

.sh-boton-carrito.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: .55rem .5rem;
  border-radius: var(--sh-radio);
  font-weight: 700;
  text-transform: none;
}

.sh-boton-carrito .material-icons {
  margin-right: .45rem;
  font-size: 1.2rem;
}

/* "Nuevo" saldría en todo el catálogo: la fecha de alta en PrestaShop es la
   del export desde Odoo, no la de entrada del producto en la tienda. */
.product-miniature .product-flags .product-flag.new {
  display: none;
}

/* El hueco del quick view del classic tapaba el botón al pasar el ratón */
.product-miniature .highlighted-informations {
  display: none;
}

/* Rejilla de miniaturas: misma altura por fila */
.products.row {
  display: flex;
  flex-wrap: wrap;
}

.products .js-product {
  display: flex;
  margin-bottom: 1.25rem;
}

.products .js-product .product-miniature {
  width: 100%;
  margin: 0;
}

/* ============================================ Subcategorías (categoría) */
/* Tarjetas como las de la portada. Las categorías que llegan de Odoo no
   traen imagen: el classic dejaba el recuadro vacío encima del nombre y al
   pasar el ratón le ponía un borde de 5px que quedaba sobre el texto. */

#subcategories ul li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: .75rem;
  border: 1px solid var(--sh-borde);
  border-radius: var(--sh-radio);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}

#subcategories ul li:hover {
  border-color: var(--sh-rojo);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}

#subcategories ul li .subcategory-image a,
#subcategories ul li:hover .subcategory-image a {
  padding: 0;
  border: 0;
}

#subcategories ul li .subcategory-image:not(:has(img)) {
  display: none;
}

#subcategories ul li h5 {
  margin: 0;
}

#subcategories ul li .subcategory-name {
  color: var(--sh-texto);
  font-weight: 600;
  text-transform: none;
}

#subcategories ul li:hover .subcategory-name {
  color: var(--sh-rojo);
}

/* ================================================================ Pie === */

.footer-container {
  margin-top: 2rem;
  padding-top: 2rem;
  background: var(--sh-pie);
  box-shadow: none;
}

.footer-container,
.footer-container li a,
.footer-container .block-contact,
.footer-container .block-contact a,
#footer .footer-container .h3,
.footer-container .h4,
.footer-container p,
.footer-container .text-sm-center a {
  color: #d6d6d6;
}

.footer-container .h3,
.footer-container .h4,
.footer-container .block-contact-title {
  color: #fff;
  font-size: .9375rem;
  font-weight: 700;
  text-transform: none;
}

.footer-container li a:hover,
.footer-container .block-contact a:hover {
  color: #fff;
}

.sh-pie-logo .logo {
  max-width: 100%;
  height: auto;
  padding: .5rem;
  border-radius: var(--sh-radio);
  background: #fff;
}

@media (max-width: 767px) {
  .footer-container .wrapper .title,
  .footer-container .links .title {
    border-bottom-color: #3b3b3b;
  }

  .footer-container .links ul {
    background: var(--sh-pie);
  }

  .footer-container .links ul > li {
    border-bottom-color: #3b3b3b;
  }

  /* El classic los pone en #232323 (pensado para su fondo claro): en
     nuestro pie oscuro los desplegables se abrían pero no se veía nada. */
  .footer-container .links ul > li a,
  .footer-container .block-contact #contact-infos,
  .footer-container .block-contact #contact-infos a {
    color: #d6d6d6;
  }

  .footer-container .links .h3,
  .footer-container .links .navbar-toggler .material-icons {
    color: #fff;
  }
}

/* ============================================================ Responsive */

@media (max-width: 991px) {
  .sh-categorias-rejilla {
    grid-template-columns: repeat(3, 1fr);
  }

  .sh-hero-marca {
    font-size: 3rem;
  }

  .sh-hero-titulo {
    font-size: 1.6rem;
  }

  .sh-marca span {
    font-size: 1.1rem;
  }
}

@media (max-width: 767px) {
  .sh-hero {
    flex-direction: column-reverse;
    align-items: stretch;
    background: #fff;
  }

  .sh-hero-texto {
    padding: 1.25rem 1.25rem 1.75rem;
  }

  .sh-hero-imagen {
    padding: 1.5rem 1rem 0;
  }

  .sh-hero-imagen img {
    max-height: 200px;
  }

  .sh-garantias {
    flex-direction: column;
  }

  .sh-garantia {
    justify-content: flex-start;
    padding: .6rem 1rem;
  }

  .sh-garantia + .sh-garantia {
    border-left: 0;
    border-top: 1px solid var(--sh-borde);
  }

  .sh-categorias-rejilla {
    grid-template-columns: repeat(2, 1fr);
  }

  .sh-marcas-fila {
    flex-wrap: wrap;
  }

  .sh-marca {
    flex: 0 0 50%;
  }

  .sh-marca + .sh-marca {
    border-left: 0;
  }

  .sh-tienda {
    flex-direction: column;
  }

  .sh-tienda-texto {
    padding: 1.25rem;
  }

  .sh-seccion-titulo {
    font-size: 1.25rem;
  }

  .products .js-product {
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: .4rem;
    padding-right: .4rem;
  }

  .product-miniature .product-price-and-shipping .price {
    font-size: 1.2rem;
  }

  .sh-boton-carrito.btn {
    font-size: .8125rem;
  }
}