/*
 * Sandoit Creations: estilo cálido y artesanal sobre Hummingbird.
 * Colores sacados de la marca: marrón caramelo de los banners, rojo del corazón del logo y fondos crema.
 * Este fichero va fuera de las capas (@layer) de Hummingbird, así que gana a sus reglas sin !important.
 */

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/playfair-display-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/playfair-display-latin-700-normal.woff2") format("woff2");
}

:root {
  --sandoit-brand: #8b5a33;
  --sandoit-brand-rgb: 139, 90, 51;
  --sandoit-brand-dark: #6e4526;
  --sandoit-brand-darker: #573620;
  --sandoit-accent: #c81e2a;
  --sandoit-cream: #f8f3ec;
  --sandoit-cream-border: #e8d9c6;
  --sandoit-chocolate: #3b2a1e;
  --sandoit-heading: #3f2a1b;
  --sandoit-serif: "Playfair Display", Georgia, "Times New Roman", serif;

  --bs-blue: var(--sandoit-brand);
  --bs-primary: var(--sandoit-brand);
  --bs-primary-rgb: var(--sandoit-brand-rgb);
  --bs-primary-text-emphasis: var(--sandoit-brand-dark);
  --bs-primary-bg-subtle: var(--sandoit-cream);
  --bs-primary-border-subtle: var(--sandoit-cream-border);
  --bs-link-color: var(--sandoit-brand);
  --bs-link-color-rgb: var(--sandoit-brand-rgb);
  --bs-link-hover-color: var(--sandoit-brand-darker);
  --bs-link-hover-color-rgb: 87, 54, 32;
  --bs-focus-ring-color: rgba(var(--sandoit-brand-rgb), 0.25);
  --bs-tertiary-bg: var(--sandoit-cream);
  --bs-tertiary-bg-rgb: 248, 243, 236;

  /* Fondo de página crema muy suave en lugar de blanco puro */
  --sandoit-page-bg: #fbf7f2;
  --sandoit-bar-bg: #f3e9dc;
  --bs-body-bg: var(--sandoit-page-bg);
  --bs-body-bg-rgb: 251, 247, 242;
}

/* Lo que debe seguir en blanco: cabecera, campos de formulario, menús desplegables y tarjetas */
.header,
#header {
  background-color: #fff;
}

.form-control,
.form-select {
  background-color: #fff;
}

.dropdown-menu {
  --bs-dropdown-bg: #fff;
}

/* Productos en tarjetas blancas: así las fotos con fondo blanco quedan integradas sobre el crema */
.product-miniature__inner {
  height: 100%;
  padding: 0.75rem;
  background-color: #fff;
  border: 1px solid var(--sandoit-cream-border);
  border-radius: var(--bs-border-radius-lg);
}

/* Títulos con la tipografía serif de los banners */
h1, .h1, h2, .h2, h3, .h3,
.page-title, .section-title, .product__name {
  font-family: var(--sandoit-serif);
  color: var(--sandoit-heading);
  letter-spacing: 0.01em;
}

/*
 * Menú principal en una sola fila. Al lado del logo y el buscador solo caben ~650 px y las 8 categorías
 * necesitan ~1070 px, así que en escritorio (donde Hummingbird muestra el menú, desde 1200 px) el menú
 * pasa a su propia fila a todo el ancho, debajo del logo y el buscador. En móvil sigue la hamburguesa.
 */
@media (min-width: 1200px) {
  .header-bottom__row {
    flex-wrap: wrap;
  }

  .ps-mainmenu--desktop {
    order: 3;
    flex: 0 0 100%;
    max-width: 100%;
    border-top: 1px solid var(--sandoit-cream-border);
  }

  .ps-mainmenu__tree {
    flex-wrap: nowrap;
    justify-content: center;
  }

  /* Cada categoría ocupa lo que mide su nombre (Hummingbird las estira a partes iguales) */
  .ps-mainmenu__tree > .ps-mainmenu__tree-item {
    flex: 0 0 auto;
  }

  .ps-mainmenu__tree > .ps-mainmenu__tree-item > .ps-mainmenu__tree-item-wrapper > .ps-mainmenu__tree-link {
    padding-block: 0.75rem;
    white-space: nowrap;
  }
}


/*
 * Slider de portada al ancho del contenido en vez de a toda la pantalla: a pantalla completa medía
 * 571 px de alto en un portátil de 1366 px (y 812 px a 1920 px) y tapaba todo lo demás. No se recorta
 * la imagen porque los banners llevan el texto dentro.
 */
@media (min-width: 768px) {
  .ps-imageslider {
    width: calc(100% - 3rem);
    max-width: 1000px;
    margin: 1.5rem auto 0;
  }

  .ps-imageslider .carousel-inner {
    border-radius: var(--bs-border-radius-lg);
  }
}

@media (min-width: 1400px) {
  .ps-imageslider {
    max-width: 1140px;
  }
}

/*
 * Móvil. Hummingbird recorta el slider por el centro a 240 px de alto y se perdía el texto de los
 * banners, que está a la izquierda: se anclan a la izquierda y algo más altos, así se ve el ~60 %
 * izquierdo de cada banner (todo el texto) y más grande. La barra de confianza pasa de tres filas
 * (185 px) a tres columnas con icono y título, sin la descripción.
 */
@media (max-width: 767.98px) {
  /* Banner completo, sin recortar (antes se veía solo el 60 % izquierdo y quedaba cortado) */
  .ps-imageslider .carousel-item,
  .ps-imageslider .carousel-item figure {
    height: auto;
  }

  .ps-imageslider .carousel-item img {
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
  }

  /* Las flechas tapaban el titular y los indicadores la frase de debajo: en el móvil se pasa
     deslizando con el dedo y los indicadores van debajo de la imagen */
  .ps-imageslider .carousel-control-prev,
  .ps-imageslider .carousel-control-next {
    display: none;
  }

  .ps-imageslider .carousel {
    display: flex;
    flex-direction: column;
  }

  .ps-imageslider .carousel-indicators {
    position: static;
    order: 2;
    margin: 0.5rem 0 0;
  }

  .ps-imageslider .carousel-indicators [data-bs-target] {
    background-color: var(--sandoit-brand);
  }

  .blockreassurance--horizontal {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 0.5rem;
    padding-block: 0.5rem;
  }

  /* Las tres columnas alineadas arriba: iconos en la misma línea y títulos empezando a la misma altura
     (antes cada columna se centraba en vertical según su texto y quedaban escalonadas) */
  .blockreassurance--horizontal .reassurance {
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    align-self: flex-start;
    gap: 0.25rem;
    margin: 0;
    text-align: center;
  }

  .blockreassurance--horizontal .reassurance__content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .blockreassurance--horizontal .reassurance__image svg {
    width: 26px;
    height: 26px;
  }

  .blockreassurance--horizontal .reassurance__title {
    font-size: 0.75rem;
    line-height: 1.2;
  }

  .blockreassurance--horizontal .reassurance__content br,
  .blockreassurance--horizontal .reassurance__desc {
    display: none;
  }
}

/* Tablet: los tres avisos de la barra de confianza en una sola fila (el tercero bajaba de línea) */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .blockreassurance--horizontal {
    flex-wrap: nowrap;
    gap: 1rem;
  }

  .blockreassurance--horizontal .reassurance {
    flex: 1 1 0;
  }
}

/* Logo: el nuevo es más compacto (casi 2:1) y con el límite de Hummingbird (48 px de alto) quedaba pequeño */
@media (min-width: 768px) {
  .navbar-brand {
    max-height: none;
  }

  .navbar-brand .logo {
    max-height: 3.75rem;
    max-width: 10rem;
  }
}

/* Desplegables del menú: las subcategorías de la derecha (p. ej. Eventos > Bodas > Para Firmar, Carteles…)
   salían en 20 px y negrita; ahora con la misma letra y tamaño que la columna de la izquierda ("Bodas") */
.ps-mainmenu .menu-item__group-main-item {
  font-size: 1rem;
  font-weight: 400;
}

/* Página 404 (templates/errors/404.tpl, script 52) */
.sandoit-404__intro {
  max-width: 44rem;
  margin: 1.5rem auto 2.5rem;
}

.sandoit-404__code {
  margin: 0;
  font-family: var(--sandoit-serif);
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--sandoit-cream-border);
}

.sandoit-404__search {
  display: flex;
  gap: 0.5rem;
  max-width: 32rem;
  margin: 1.25rem auto;
}

.sandoit-404__search .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.sandoit-404__cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.sandoit-404__cats a {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  background-color: var(--sandoit-cream);
  border: 1px solid var(--sandoit-cream-border);
  border-radius: 999px;
  color: var(--sandoit-brand-dark);
  text-decoration: none;
}

.sandoit-404__cats a:hover {
  background-color: #efe2cc;
}

.sandoit-404__help {
  font-size: 0.875rem;
}

/* Botón "Proyectos para Empresas" en la barra superior, junto a "Llámanos" (ps_contactinfo/nav.tpl, script 51).
   En el móvil PrestaShop mueve este bloque al pie del menú desplegable. */
.ps-contactinfo:has(.sandoit-empresas-btn) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

/* La columna izquierda de la barra (col-md-4) no daba para teléfono + botón en una línea: ocupa el espacio libre y
   la derecha (cuenta y carrito) solo lo que mide */
@media (min-width: 768px) {
  .header-top .row:has(> .header-top__left .sandoit-empresas-btn) {
    flex-wrap: nowrap;
  }

  .header-top__left:has(.sandoit-empresas-btn) {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  .header-top__left:has(.sandoit-empresas-btn) ~ * {
    flex: 0 0 auto;
    width: auto;
  }
}

.sandoit-empresas-btn {
  display: inline-block;
  padding: 0.125rem 0.75rem;
  background-color: #efe2cc;
  border: 1px solid var(--sandoit-cream-border);
  border-radius: 999px;
  color: var(--sandoit-brand-dark);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.6;
  text-decoration: none;
  white-space: nowrap;
}

.sandoit-empresas-btn:hover,
.sandoit-empresas-btn:focus-visible {
  background-color: #e8d7bb;
  color: var(--sandoit-brand-darker);
}

/* Guía de personalización en la ficha (templates/catalog/_partials/product-customization.tpl, script 49) */
.sandoit-guia-perso {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  background-color: var(--sandoit-cream);
  border: 1px solid var(--sandoit-cream-border);
  border-left: 4px solid var(--sandoit-brand);
  border-radius: var(--bs-border-radius);
  font-size: 0.875rem;
  line-height: 1.45;
}

.sandoit-guia-perso__title {
  margin: 0 0 0.375rem;
  font-weight: 600;
  color: var(--sandoit-heading);
}

.sandoit-guia-perso__list {
  margin: 0;
  padding-left: 1.125rem;
  list-style: disc;
}

.sandoit-guia-perso__list li::marker {
  color: var(--sandoit-brand);
}

.sandoit-guia-perso__list li + li {
  margin-top: 0.25rem;
}

/* Botones */
.btn-primary {
  --bs-btn-bg: var(--sandoit-brand);
  --bs-btn-border-color: var(--sandoit-brand);
  --bs-btn-hover-bg: var(--sandoit-brand-dark);
  --bs-btn-hover-border-color: var(--sandoit-brand-dark);
  --bs-btn-focus-shadow-rgb: var(--sandoit-brand-rgb);
  --bs-btn-active-bg: var(--sandoit-brand-darker);
  --bs-btn-active-border-color: var(--sandoit-brand-darker);
  --bs-btn-disabled-bg: var(--sandoit-brand);
  --bs-btn-disabled-border-color: var(--sandoit-brand);
}

.btn-outline-primary {
  --bs-btn-color: var(--sandoit-brand);
  --bs-btn-border-color: var(--sandoit-brand);
  --bs-btn-hover-bg: var(--sandoit-brand);
  --bs-btn-hover-border-color: var(--sandoit-brand);
  --bs-btn-focus-shadow-rgb: var(--sandoit-brand-rgb);
  --bs-btn-active-bg: var(--sandoit-brand-dark);
  --bs-btn-active-border-color: var(--sandoit-brand-dark);
  --bs-btn-disabled-color: var(--sandoit-brand);
  --bs-btn-disabled-border-color: var(--sandoit-brand);
}

/* Formularios, desplegables y paginación */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--sandoit-cream-border);
  box-shadow: 0 0 0 0.25rem rgba(var(--sandoit-brand-rgb), 0.25);
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--sandoit-brand);
  border-color: var(--sandoit-brand);
}

.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--sandoit-brand);
}

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--sandoit-brand);
}

.list-group {
  --bs-list-group-active-bg: var(--sandoit-brand);
  --bs-list-group-active-border-color: var(--sandoit-brand);
}

.pagination {
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--sandoit-brand-rgb), 0.25);
}

/* Contador del carrito y etiquetas de producto con el rojo del logo */
.header-block__badge {
  background: var(--sandoit-accent);
  color: #fff;
}

.product-flags .badge:not(.discount) {
  background-color: var(--sandoit-accent);
  border-color: var(--sandoit-accent);
}

.product-flags .badge.discount {
  border-color: var(--sandoit-accent);
  color: var(--sandoit-accent);
}

/* Barra de confianza en crema con iconos marrones */
.blockreassurance--light {
  background-color: var(--sandoit-bar-bg);
  border-bottom: 1px solid var(--sandoit-cream-border);
}

/* Botón de WhatsApp dentro de "Atención personalizada" (barra de confianza) */
.reassurance--link,
.reassurance--link:hover {
  color: inherit;
  text-decoration: none;
}

.sandoit-wa {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.15rem;
  padding: 0.1rem 0.55rem;
  border-radius: 50rem;
  /* Verde salvia apagado: se reconoce como WhatsApp pero casa con los marrones y cremas del tema
     (el verde oficial #25d366 chocaba). Contraste del texto blanco por encima de 4,5:1. */
  background: #457a50;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  vertical-align: middle;
}

.sandoit-wa .material-icons {
  font-size: 0.9rem;
}

.reassurance--link:hover .sandoit-wa {
  background: #386542;
}

@media (max-width: 767.98px) {
  /* En el móvil la barra solo enseña títulos: en este apartado se muestra también el botón */
  .blockreassurance--horizontal .reassurance--link .reassurance__desc {
    display: block;
  }

  .sandoit-wa {
    margin: 0.2rem 0 0;
  }
}

/* Pie de página en chocolate en lugar de casi negro */
.footer__main {
  background: var(--sandoit-chocolate);
  color: #eadfd2;
}

.footer__main a {
  color: #f3e9dd;
}

.footer__main a:hover {
  color: #fff;
}

/* Bloque "Nuestras categorías" de la portada */
.sandoit-categorias a span {
  color: var(--sandoit-heading);
}

.sandoit-categorias a:hover span {
  color: var(--sandoit-brand);
}

.sandoit-categorias img {
  transition: transform 0.2s ease;
}

.sandoit-categorias a:hover img {
  transform: scale(1.03);
}

/* Página "Ingeniería y prototipado para empresas" (CMS; PrestaShop filtra <section>, por eso van <div>) */
.sandoit-b2b__section {
  margin-bottom: 2.5rem;
}

.sandoit-b2b__lead {
  font-size: 1.1rem;
  line-height: 1.6;
}

.sandoit-b2b__sectors {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sandoit-b2b__sectors span,
.sandoit-b2b__tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--sandoit-cream-border);
  border-radius: 50rem;
  background: var(--sandoit-cream);
  color: var(--sandoit-brand-dark);
  font-size: 0.85rem;
}

.sandoit-b2b__card {
  height: 100%;
  padding: 1.25rem;
  border: 1px solid var(--sandoit-cream-border);
  border-radius: var(--bs-border-radius-lg);
  background: #fff;
}

.sandoit-b2b__card .material-icons {
  font-size: 2rem;
  color: var(--sandoit-brand);
}

.sandoit-b2b__card h3 {
  margin: 0.5rem 0;
  font-size: 1.1rem;
}

.sandoit-b2b__card p {
  margin: 0;
  font-size: 0.95rem;
}

.sandoit-b2b__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1rem;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

.sandoit-b2b__steps li {
  position: relative;
  padding: 2.75rem 1rem 1rem;
  border-top: 3px solid var(--sandoit-brand);
  background: #fff;
  border-radius: 0 0 var(--bs-border-radius-lg) var(--bs-border-radius-lg);
  counter-increment: paso;
}

.sandoit-b2b__steps li::before {
  content: counter(paso);
  position: absolute;
  top: 0.75rem;
  left: 1rem;
  font-family: var(--sandoit-serif);
  font-size: 1.5rem;
  color: var(--sandoit-brand);
}

.sandoit-b2b__steps strong,
.sandoit-b2b__steps span {
  display: block;
}

.sandoit-b2b__steps span {
  margin-top: 0.25rem;
  font-size: 0.9rem;
}

.sandoit-b2b__case {
  margin-bottom: 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--sandoit-cream-border);
  border-radius: var(--bs-border-radius-lg);
  background: #fff;
}

.sandoit-b2b__case h3 {
  margin: 0.5rem 0;
}

.sandoit-b2b__caption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

.sandoit-b2b__software {
  margin-top: 1rem;
}

.sandoit-b2b__cta {
  padding: 2rem;
  border-radius: var(--bs-border-radius-lg);
  background: var(--sandoit-bar-bg);
  text-align: center;
}

.sandoit-b2b__cta .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

/* Página "Nuestras tiendas": aviso de tienda solo online */
.sandoit-online-only {
  max-width: 40rem;
  margin: 1rem auto 2rem;
  padding: 2rem;
  border: 1px solid var(--sandoit-cream-border);
  border-radius: var(--bs-border-radius-lg);
  background: #fff;
  text-align: center;
}

.sandoit-online-only__icon {
  font-size: 3rem;
  color: var(--sandoit-brand);
}

.sandoit-online-only__lead {
  font-family: var(--sandoit-serif);
  font-size: 1.4rem;
  color: var(--sandoit-heading);
}

.sandoit-online-only__contact {
  width: fit-content;
  margin: 0 auto 1.5rem;
  padding: 0;
  list-style: none;
  text-align: left;
}

.sandoit-online-only__contact li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.sandoit-online-only__hours {
  width: fit-content;
  min-width: 18rem;
  margin: 0 auto 1.5rem;
  text-align: left;
}

.sandoit-online-only__hours-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.sandoit-online-only__hours .table {
  margin: 0;
  --bs-table-bg: transparent;
}

.sandoit-online-only__hours th {
  padding-right: 1.5rem;
  font-weight: 500;
}

.sandoit-online-only__hours-title .material-icons,
.sandoit-online-only__contact .material-icons {
  font-size: 1.25rem;
  color: var(--sandoit-brand);
}

/* Captcha del formulario de contacto encima del botón de enviar (el módulo lo deja flotando a su lado) */
#captcha-box {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

#captcha-box > div {
  float: none !important;
}

/* Enlace "Configurar cookies" del módulo propio, sobre el pie chocolate */
.sandoitcookies-footer a,
.footer__main .sandoitcookies-footer a {
  color: #e3c9a8;
}

/* Página "Preguntas frecuentes" (CMS) */
.sandoit-faq {
  max-width: 50rem;
}

.sandoit-faq__intro {
  font-size: 1.05rem;
  line-height: 1.6;
}

.sandoit-faq h2 {
  margin: 2.25rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--sandoit-cream-border);
  color: var(--sandoit-brand);
  font-size: 1.4rem;
}

.sandoit-faq__item {
  margin-bottom: 0.75rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--sandoit-cream-border);
  border-radius: 0.5rem;
  background: #fff;
}

.sandoit-faq__item h3 {
  margin-bottom: 0.4rem;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--sandoit-heading);
}

.sandoit-faq__item p:last-child {
  margin-bottom: 0;
}
/* "Completa tu regalo" (ps_crossselling) */
.sandoit-crossselling__sub {
  margin-top: -0.5rem;
  margin-bottom: 1rem;
  color: #5c4a3d;
}

/* Ventana "Escriba su propia reseña": foto, nombre y agradecimiento */
.sandoit-resena-cabecera {
  text-align: center;
  margin-bottom: 1.25rem;
}
.sandoit-resena-cabecera__foto {
  display: block;
  width: 160px;
  max-width: 60%;
  height: auto;
  margin: 0 auto 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid #e8d9c6;
}
.sandoit-resena-cabecera__nombre {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.sandoit-resena-cabecera__gracias {
  color: #5c4a3d;
  margin-bottom: 0;
}