/* ============================================================
   COLORES: nada escrito a mano. Todo sale de la paleta del editor de tema
   (Diseño › Colores), que genera variables.css:
     --beshop-primary / --beshop-primary-contrast  botones, activos y su texto
     --beshop-text / -text-muted / -text-subtle     texto principal, secundario y tenue
     --beshop-bg-page / -bg-card / -bg-soft         fondo de página, de cajas y suave
     --beshop-line / --beshop-line-strong            separadores y bordes marcados
     --beshop-error / -success / -warning           avisos (fondos y bordes con color-mix)
   Excepciones: texto blanco sobre fotos, sombras y velos (rgba).
   ============================================================ */

/* =====================
   NOTIFICATIONS
   ===================== */
#notifications {
  /* position: sticky; */
  top: 0;
  /* z-index: 999; */
  /* margin-bottom: 20px; */
}

#notifications .notifications-container {
  padding: 0;

}

#notifications .alert {
  border-radius: 0;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 12px 24px;
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.06em;
  margin-bottom: 20px;
}

#notifications .alert ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#notifications .alert-info {
  background-color: var(--beshop-bg-soft);
  border-color: var(--beshop-line);
  color: var(--beshop-text);
}

#notifications .alert-success {
  background-color: color-mix(in srgb, var(--beshop-success) 6%, var(--beshop-bg-card));
  border-color: color-mix(in srgb, var(--beshop-success) 25%, var(--beshop-bg-card));
  color: var(--beshop-success);
}

#notifications .alert-warning {
  background-color: color-mix(in srgb, var(--beshop-warning) 6%, var(--beshop-bg-card));
  border-color: color-mix(in srgb, var(--beshop-warning) 25%, var(--beshop-bg-card));
  color: var(--beshop-warning);
}

#notifications .alert-danger {
  background-color: color-mix(in srgb, var(--beshop-error) 6%, var(--beshop-bg-card));
  border-color: color-mix(in srgb, var(--beshop-error) 25%, var(--beshop-bg-card));
  color: var(--beshop-error);
}

#header{
  box-shadow: none;
  background: var(--beshop-header-bg);
  color: var(--beshop-header-text);
}


/* ============================================================
   Base común: tipografía, foco, formularios, botones, cabecera, footer, miniaturas, quickview, alertas
   Movido desde el custom.sass de la web (v1.4.0)
   ============================================================ */
body {
  font-family: var(--beshop-font-secondary), sans-serif;
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.5;
  color: var(--beshop-text);
  background-color: var(--beshop-bg-page);
}
body p, body h1, body h2, body h3, body h4, body h5, body h6 {
  color: var(--beshop-text);
}
body p {
  font-size: var(--fs-base);
}
body a {
  color: var(--beshop-text);
}
body a:hover {
  color: var(--beshop-text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--beshop-font-primary), serif;
}

*:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

*:focus-visible {
  outline: 2px solid var(--beshop-primary) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

.input-group.focus {
  outline: none;
}

/* ============================================================
   FORMULARIOS — NORMA ÚNICA PARA TODA LA WEB
   Campos de 46 px con borde completo (--bs-field-border) y etiqueta encima del campo;
   casillas cuadradas y radios redondos de 18 px con el mismo borde.
   Va con :is(#wrapper, .modal) (contenido y ventanas: vista rápida, carrito, lista de
   deseos) para ganar a reglas de módulos y temas; cabecera y pie (buscador,
   newsletter) tienen su excepción más abajo: campo de una sola línea inferior.
   Un módulo nuevo no necesita estilos propios para sus campos: basta con el marcado
   de PrestaShop (.form-group, .form-control, .custom-checkbox, .custom-radio).
   Si un módulo pinta sus campos distinto, se corrige en ESE módulo.
   ============================================================ */

/* Colores de los campos, a partir de la paleta. El borde es el texto al 45 % sobre el
   fondo de los campos: con los colores base sale #939393, el gris más claro que cumple
   el contraste mínimo 3:1 de WCAG (si se cambia el fondo o el texto, se mantiene) */
:root {
  --bs-field-border: color-mix(in srgb, var(--beshop-text) 45%, var(--beshop-bg-card));
  --bs-field-border-focus: var(--beshop-primary);
}

/* Campos */
:is(#wrapper, .modal) input[type=text], :is(#wrapper, .modal) input[type=email], :is(#wrapper, .modal) input[type=password], :is(#wrapper, .modal) input[type=tel], :is(#wrapper, .modal) input[type=date], :is(#wrapper, .modal) input[type=search], :is(#wrapper, .modal) input[type=url], :is(#wrapper, .modal) input[type=number]:not(.quantity-input):not(.js-cart-line-product-quantity):not(#quantity_wanted), :is(#wrapper, .modal) select, :is(#wrapper, .modal) textarea {
  font-family: var(--beshop-font-secondary), sans-serif !important;
  font-size: var(--text-body, 15px) !important;
  color: var(--beshop-text) !important;
  background-color: var(--beshop-bg-card) !important;
  border: 1px solid var(--bs-field-border) !important;
  border-radius: var(--beshop-radius-field, 0) !important;
  box-shadow: none !important;
  height: 46px !important;
  padding: 0 14px !important;
  outline: none;
}
:is(#wrapper, .modal) input::placeholder,
:is(#wrapper, .modal) textarea::placeholder {
  color: var(--beshop-text-subtle) !important;
}
:is(#wrapper, .modal) input:focus,
:is(#wrapper, .modal) select:focus,
:is(#wrapper, .modal) textarea:focus {
  border-color: var(--bs-field-border-focus) !important;
}
:is(#wrapper, .modal) input:focus-visible,
:is(#wrapper, .modal) select:focus-visible,
:is(#wrapper, .modal) textarea:focus-visible {
  outline: 1px solid var(--bs-field-border-focus) !important;
  outline-offset: -2px !important;
}
:is(#wrapper, .modal) textarea {
  height: auto !important;
  min-height: 140px;
  padding: 12px 14px !important;
  line-height: 1.6;
  resize: vertical;
}
:is(#wrapper, .modal) select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px !important;
  /* Flecha "v" de trazo fino con dos degradados en el color del texto (un SVG
     incrustado llevaría el color fijo) */
  background-image:
    linear-gradient(45deg, transparent 43%, currentColor 43%, currentColor 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, currentColor 43%, currentColor 57%, transparent 57%) !important;
  background-size: 7px 7px, 7px 7px !important;
  background-repeat: no-repeat !important;
  background-position: right 21px center, right 14px center !important;
}
/* Etiquetas a la izquierda (classic las alinea a la derecha para formularios en
   columnas; aquí van siempre encima del campo). Sin especificidad: cualquier
   regla de un módulo con otra alineación gana */
:where(#wrapper, .modal) label {
  text-align: start;
}

/* Campos dentro de otro recuadro (adjunto, selector de cantidad): sin borde propio */
:is(#wrapper, .modal) .bootstrap-filestyle input[type=text],
:is(#wrapper, .modal) .bootstrap-touchspin input {
  border: none !important;
  height: 44px !important;
}

/* Campo + botón pegado (contraseña "Mostrar") */
:is(#wrapper, .modal) .input-group .form-control {
  border-right: 0 !important;
}
:is(#wrapper, .modal) .input-group .input-group-btn .btn {
  height: 46px;
  border: 1px solid var(--bs-field-border) !important;
  border-radius: var(--beshop-radius-btn, 0) !important;
  background: var(--beshop-bg-card) !important;
  color: var(--beshop-text) !important;
  font-size: var(--text-button, 12px);
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: none !important;
}
:is(#wrapper, .modal) .input-group .input-group-btn .btn:hover {
  background: var(--beshop-primary) !important;
  color: var(--beshop-primary-contrast) !important;
}

/* Etiqueta encima del campo (estructura estándar de PrestaShop: .form-group.row) */
:is(#wrapper, .modal) .form-group.row {
  display: block !important;
  margin: 0 0 1.25rem !important;
}
:is(#wrapper, .modal) .form-group.row > [class*=col-] {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  margin-left: 0 !important;
  padding: 0 !important;
}
:is(#wrapper, .modal) .form-control-label {
  display: block;
  text-align: left !important;
  font-size: var(--text-label, 12px) !important;
  font-weight: 500 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: var(--beshop-text) !important;
  padding: 0 0 6px !important;
  margin: 0 !important;
}
:is(#wrapper, .modal) .form-control-comment,
:is(#wrapper, .modal) .form-group small,
:is(#wrapper, .modal) .form-group .form-text {
  display: block;
  font-size: var(--text-caption, 11px) !important;
  color: var(--beshop-text-subtle) !important;
  padding: 4px 0 0 !important;
  margin: 0 !important;
  text-align: left;
}

/* Ancho cómodo de lectura en formularios de cliente */
#customer-form,
.js-address-form {
  max-width: 560px;
}

/* Botón de envío: negro y a todo el ancho del formulario */
:is(#wrapper, .modal) .form-footer {
  display: block !important;
  float: none !important;
  text-align: left !important;
}
:is(#wrapper, .modal) .form-footer .btn,
:is(#wrapper, .modal) .form-footer input[type=submit] {
  display: block !important;
  width: 100% !important;
  padding: 14px !important;
  border-radius: var(--beshop-radius-btn, 0) !important;
  float: none !important;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* Excepción: campos en línea de cabecera y footer (buscador, newsletter) */
#header input[type=text], #header input[type=email], #header input[type=search],
#footer input[type=text], #footer input[type=email], #footer input[type=search] {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--beshop-line) !important;
  height: auto;
  padding: 8px 0 !important;
}

.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.focus, .btn-primary.active, .btn-primary:active:focus, .btn-primary:active:hover, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary.active.focus, .btn-primary:active.focus {
  background-color: var(--beshop-bg-card);
  border-color: transparent;
  color: var(--beshop-text);
}
.btn-primary:hover {
  background-color: var(--beshop-bg-card);
}

.btn-primary, .btn-secondary {
  font-weight: 400;
}

.container {
  width: 100%;
}

#wrapper {
  background: var(--beshop-bg-page);
}

.btn-light {
  display: inline-block !important;
  padding: var(--beshop-btn-pad, 11px 32px) !important;
  font-family: var(--beshop-font-secondary), sans-serif;
  font-size: var(--fs-2xs);
  font-weight: 400 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--beshop-text) !important;
  background: transparent !important;
  border: 1px solid var(--beshop-primary);
  border-radius: var(--beshop-radius-btn, 0);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.35s ease;
  z-index: 1;
}
.btn-light::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--beshop-primary);
  color: var(--beshop-text);
  transition: left 0.35s ease;
  z-index: -1;
}
.btn-light:hover {
  color: var(--beshop-primary-contrast) !important;
}
.btn-light:hover::before {
  left: 0;
}

.btn-primary, .btn-dark, input[type=submit] {
  display: inline-block;
  padding: var(--beshop-btn-pad, 11px 32px) !important;
  font-family: var(--beshop-font-secondary), sans-serif;
  font-size: var(--fs-2xs);
  font-weight: 400 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--beshop-primary-contrast) !important;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: var(--beshop-radius-btn, 0);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.35s ease;
  z-index: 1;
  background: var(--beshop-primary) !important;
  border: 1px solid var(--beshop-primary);
}
.btn-primary::before, .btn-dark::before, input[type=submit]::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--beshop-bg-card) !important;
  transition: left 0.35s ease;
  z-index: -1;
}
.btn-primary:hover, .btn-dark:hover, input[type=submit]:hover {
  color: var(--beshop-text) !important;
}
.btn-primary:hover::before, .btn-dark:hover::before, input[type=submit]:hover::before {
  left: 0;
}

.product-miniature .product-reference {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--beshop-text-muted);
  text-align: center;
  text-decoration: none;
}
/* Misma altura en toda la fila: la tarjeta ocupa su hueco y la compra va abajo del todo,
   tenga la tarjeta colores, descuento o un nombre largo */
.product-miniature {
  height: 100%;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
}
.product-miniature .thumbnail-container {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.product-miniature .product-description {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.product-miniature .product-choose-options,
.product-miniature .add-to-cart-or-refresh {
  margin-top: auto;
}
/* classic da a la foto height: calc(100% - 70px); con la tarjeta flexible ese porcentaje cuenta
   y la encoge: el alto lo marca su proporción */
.product-miniature .thumbnail-container .product-thumbnail {
  height: auto;
}
.product-miniature .thumbnail-container:hover .product-description::after, .product-miniature .thumbnail-container:focus .product-description::after {
  display: none;
}
.product-miniature .product-thumbnail {
  display: block;
  overflow: hidden;
  position: relative;
  aspect-ratio: var(--beshop-product-ratio, 1);
}
.product-miniature .product-thumbnail .pm-img {
  display: block;
  width: 100%;
  height: 100%;
}
.product-miniature .product-thumbnail .pm-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-miniature .product-thumbnail .pm-img--main {
  transition: opacity 0.45s ease;
}
.product-miniature .product-thumbnail .pm-img--hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.product-miniature .product-thumbnail.has-hover-image:hover .pm-img--main {
  opacity: 0;
}
.product-miniature .product-thumbnail.has-hover-image:hover .pm-img--hover {
  opacity: 1;
}
/* Descripción corta (Catálogo › Miniatura): dos líneas como mucho */
.product-miniature .pm-description {
  margin: 0.25rem 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--beshop-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Con un color elegido, la segunda foto (de la combinación por defecto) ya no corresponde */
.product-miniature .product-thumbnail.pm-variant-chosen:hover .pm-img--main {
  opacity: 1;
}
.product-miniature .product-thumbnail.pm-variant-chosen .pm-img--hover {
  display: none;
}

/* Muestras de color (variant-swatches.tpl + miniature-variants.js). Hueco mínimo para
   que cada muestra tenga 24px de zona táctil aunque se vea más pequeña. */
.pm-swatches {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: max(10px, 24px - var(--pm-swatch-size));
  padding: 0.5rem 0.25rem;
  background: var(--beshop-bg-card);
}
/* Sobre la foto: abajo, en una pastilla semitransparente que se ve sobre cualquier imagen */
.pm-swatches--over {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 5;
  width: fit-content;
  margin: 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--beshop-bg-card);
  background: color-mix(in srgb, var(--beshop-bg-card) 85%, transparent);
}
.pm-swatch {
  flex: none;
  width: var(--pm-swatch-size);
  height: var(--pm-swatch-size);
  margin: 0;
  padding: 0;
  border: 1px solid var(--bs-field-border);
  background-color: var(--beshop-bg-soft);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  appearance: none;
  position: relative;
}
.pm-swatches--round .pm-swatch {
  border-radius: 50%;
}
/* Marco de la elegida en un ::after: la regla general :focus:not(:focus-visible) quita
   con !important la sombra y el contorno del botón al pulsarlo */
.pm-swatch::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid transparent;
  border-radius: inherit;
  transition: border-color 0.15s ease;
  pointer-events: none;
}
.pm-swatch:hover::after,
.pm-swatch[aria-pressed="true"]::after {
  border-color: var(--beshop-text);
}
.pm-swatch:focus-visible {
  outline: 2px solid var(--beshop-text);
  outline-offset: 3px;
}
.pm-swatch-more {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: 0.8125rem;
  color: var(--beshop-text-muted);
}
.pm-swatch-more:hover {
  color: var(--beshop-text);
}
.product-miniature .wishlist-button-add {
  position: absolute;
  top: 0.635rem;
  right: 0.635rem;
  z-index: 10;
  box-shadow: none;
  background: transparent;
}
.product-miniature .wishlist-button-add i {
  color: var(--beshop-text);
}
.product-miniature .pm-actions {
  position: absolute;
  top: 10px;
  right: 0.635rem;
  z-index: 10;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  width: 2.5rem;
  min-width: 2.5rem;
  padding-top: 0.1875rem;
  background-color: transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.2s ease-out;
  border: none;
}
.product-miniature .pm-actions svg {
  width: calc(24px * var(--beshop-icon-scale, 1));
  height: calc(24px * var(--beshop-icon-scale, 1));
}
.product-miniature .product-quantity-div {
  display: flex;
  flex: 0 0 auto;
}
.product-miniature .product-quantity-miniature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
/* Botones - y + de cantidad: quitar el aspecto del navegador; el diseño lo ponen las reglas de cada sitio */
button.quantity-button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: 1;
  appearance: none;
}
.product-miniature .quantity-button {
  width: 25px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--beshop-primary);
  cursor: pointer;
  font-size: var(--fs-md);
  user-select: none;
  transition: background 0.2s, color 0.2s;
}
.product-miniature .quantity-button:hover {
  background: var(--beshop-primary);
  color: var(--beshop-primary-contrast);
}
.product-miniature .quantity-input {
  width: 34px;
  height: 40px;
  text-align: center;
  border: 1px solid var(--beshop-line-strong);
  border-left: none;
  border-right: none;
  padding: 0;
  font-family: var(--beshop-font-secondary), sans-serif;
  font-size: var(--fs-xs);
  -moz-appearance: textfield;
}
.product-miniature .quantity-input::-webkit-outer-spin-button, .product-miniature .quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.product-miniature .add-to-cart {
  font-size: 13px;
  height: 40px;
  min-height: 40px;
  height: auto;
  white-space: normal;
  line-height: 1.15;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.product-miniature .choose-options {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 12px;
  min-height: 40px;
  height: auto;
  padding: 6px 8px;
  white-space: normal;
  line-height: 1.2;
  text-align: center;
}
/* .btn-light pone display y padding con !important: en la miniatura, texto centrado */
.product-miniature .choose-options.btn-light,
.product-miniature .add-to-cart.btn-light {
  display: flex !important;
}
/* Tarjeta estrecha (sliders de muchas por fila, móvil): sin selector de cantidad (se añade 1;
   la cantidad se cambia en el carrito) y «Añadir» a todo el ancho, como «Escoger…» */
@container (max-width: 250px) {
  .product-miniature .product-quantity-div {
    display: none;
  }
  .product-miniature .add-to-cart {
    flex: 1 1 100%;
  }
  /* Mismo alto para los dos botones aunque «Escoger…» ocupe dos líneas; menos relleno lateral
     (el de .btn-light va con !important) para que quepan en una */
  .product-miniature .add-to-cart,
  .product-miniature .choose-options {
    min-height: 50px;
    letter-spacing: 0.06em;
  }
  .product-miniature .choose-options.btn-light,
  .product-miniature .add-to-cart.btn-light {
    padding: 6px 12px !important;
  }
}
.product-miniature .product-title a {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.beshop-ps .js-product {
  width: 100% !important;
}

#header .header-top-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 64px;
  padding: 0 32px;
}
#header .header-top-inner .header-top-left {
  justify-self: start;
}
#header .header-top-inner .header-top-left .bte-logo {
  max-width: 180px;
}
/* El <img> lleva width/height reales (reserva de espacio): el alto debe seguir
   al ancho, si no, al limitar el ancho la imagen se deforma */
#header .bte-logo {
  height: auto;
}
#header .header-top-inner .header-top-center {
  justify-self: center;
}
#header .header-top-inner .header-top-right {
  justify-self: end;
}

#header.mm-mobile-mode .header-top-inner {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 56px;
  padding: 0 16px;
}
#header.mm-mobile-mode .header-top-inner .header-top-left {
  display: flex;
  align-items: center;
  flex: 1;
}
#header.mm-mobile-mode .header-top-inner .header-top-left .bte-logo-link {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
#header.mm-mobile-mode .header-top-inner .header-top-center {
  display: none;
}
#header.mm-mobile-mode .header-top-inner .header-top-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  justify-content: flex-end;
  position: relative;
  z-index: 2;
  padding-right: 0;
}

.beshop-container-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
  flex-wrap: wrap;
  font-family: var(--beshop-font-secondary), sans-serif;
  background: var(--beshop-bg-soft);
  padding: 60px 100px;
  color: var(--beshop-text);
}
.beshop-container-footer #blockEmailSubscription_displayBeshopNewsletter {
  background: var(--beshop-bg-soft);
}
.beshop-container-footer .mf-footer {
  flex: 1;
}
.beshop-container-footer .block_newsletter {
  flex: 1;
  max-width: 460px;
}

.quickview .modal-content {
  background: var(--beshop-bg-card);
}
.quickview .modal-content .product-cover {
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
}
.quickview .modal-content .product-cover picture, .quickview .modal-content .product-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.quickview .modal-content .product-images {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.quickview .modal-content .thumb-container {
  cursor: pointer;
}
.quickview .modal-content .thumb-container .thumb {
  display: block;
  border: 0.5px solid var(--beshop-line);
  transition: border-color 0.2s ease;
}
.quickview .modal-content .thumb-container:hover .thumb,
.quickview .modal-content .thumb-container .thumb.selected {
  border-color: var(--beshop-primary);
}
.quickview .modal-content h1.h1 {
  font-family: var(--beshop-font-primary), serif;
  font-size: var(--fs-2xl);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--beshop-text);
  margin: 0 0 20px;
  line-height: 1.2;
}
.quickview .modal-content .product-prices {
  margin-bottom: 24px;
}
.quickview .modal-content .current-price-value {
  font-family: var(--beshop-font-secondary), sans-serif;
  font-size: var(--fs-lg);
  font-weight: 300;
  color: var(--beshop-text);
  letter-spacing: 0.02em;
}
.quickview .modal-content .tax-shipping-delivery-label {
  font-size: var(--fs-2xs);
  color: var(--beshop-text-subtle);
  font-weight: 300;
  margin-top: 6px;
  letter-spacing: 0.02em;
}
.quickview .modal-content .short-description {
  font-family: var(--beshop-font-secondary), sans-serif;
  font-size: var(--fs-sm);
  font-weight: 300;
  color: var(--beshop-text-muted);
  line-height: 1.9;
  margin-bottom: 28px;
}
.quickview .modal-content .short-description p {
  margin: 0;
}
.quickview .modal-content .product-variants {
  margin-bottom: 28px;
}
.quickview .modal-content .product-variants .product-variants-item .control-label {
  font-family: var(--beshop-font-secondary), sans-serif;
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--beshop-text);
  display: block;
  margin-bottom: 10px;
}
.quickview .modal-content .product-variants select.form-control-select {
  font-family: var(--beshop-font-secondary), sans-serif;
  font-size: var(--fs-base);
  font-weight: 300;
  color: var(--beshop-text);
  background: var(--beshop-bg-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230e0e0e' stroke-width='1' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 0.5px solid var(--beshop-line);
  border-radius: var(--beshop-radius-field, 0);
  padding: 9px 36px 9px 12px;
  appearance: none;
  cursor: pointer;
  min-width: 120px;
  transition: border-color 0.2s ease;
}
.quickview .modal-content .product-variants select.form-control-select:hover, .quickview .modal-content .product-variants select.form-control-select:focus {
  border-color: var(--beshop-primary);
}
.quickview .modal-content .product-add-to-cart {
  margin-bottom: 28px;
}
.quickview .modal-content .control-label {
  font-family: var(--beshop-font-secondary), sans-serif;
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--beshop-text);
  display: block;
  margin-bottom: 10px;
}
.quickview .modal-content .product-quantity {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.quickview .modal-content .qty .quantity-nav {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--beshop-line-strong);
  background: var(--beshop-bg-card);
}
.quickview .modal-content .qty .quantity-button {
  width: 40px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
  font-weight: 300;
  cursor: pointer;
  color: var(--beshop-text);
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.quickview .modal-content .qty .quantity-button:hover {
  background: var(--beshop-primary);
  color: var(--beshop-primary-contrast);
}
.quickview .modal-content .qty input[type=number] {
  width: 48px;
  height: 46px;
  text-align: center;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-left: 1px solid var(--beshop-line-strong) !important;
  border-right: 1px solid var(--beshop-line-strong) !important;
  border-radius: var(--beshop-radius-field, 0) !important;
  font-family: var(--beshop-font-secondary), sans-serif;
  font-size: var(--fs-sm);
  font-weight: 300;
  color: var(--beshop-text);
  -moz-appearance: textfield;
}
.quickview .modal-content .qty input[type=number]::-webkit-outer-spin-button, .quickview .modal-content .qty input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.quickview .modal-content .add {
  display: flex;
  align-items: center;
  gap: 10px;
}
.quickview .modal-content .add .add-to-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 32px;
  background: var(--beshop-primary);
  color: var(--beshop-primary-contrast);
  border: 1px solid var(--beshop-primary);
  border-radius: var(--beshop-radius-btn, 0);
  font-family: var(--beshop-font-secondary), sans-serif;
  font-size: var(--fs-2xs);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
  white-space: nowrap;
}
.quickview .modal-content .add .add-to-cart i {
  font-size: var(--fs-md);
}
.quickview .modal-content .add .add-to-cart:hover {
  background: var(--beshop-bg-card);
  color: var(--beshop-text);
}
.quickview .modal-content .wishlist-button-product {
  width: 46px;
  height: 46px;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.2s ease;
  box-shadow: none;
}
.quickview .modal-content .wishlist-button-product i {
  font-size: var(--fs-md);
  color: var(--beshop-text);
}
.quickview .modal-content .wishlist-button-product i:hover {
  border-color: var(--beshop-primary);
}

.alert {
  border-radius: 0;
  border: none;
  border-left: 2px solid currentColor;
  padding: 12px 16px;
  font-size: var(--fs-base);
  font-family: var(--beshop-font-secondary), sans-serif;
}

.alert-info {
  background: var(--beshop-bg-soft);
  color: var(--beshop-text-muted);
  border-color: var(--beshop-line);
}

.alert-success {
  background: color-mix(in srgb, var(--beshop-success) 6%, var(--beshop-bg-card));
  color: var(--beshop-success);
  border-color: var(--beshop-success);
}

.alert-warning {
  background: color-mix(in srgb, var(--beshop-warning) 6%, var(--beshop-bg-card));
  color: var(--beshop-warning);
  border-color: var(--beshop-warning);
}

.alert-danger {
  background: color-mix(in srgb, var(--beshop-error) 6%, var(--beshop-bg-card));
  color: var(--beshop-error);
  border-color: var(--beshop-error);
}

body #header a:hover {
  color: initial;
}

.mm-menu__link--chevron-only {
  display: none !important;
}

/* ============================================================
   ICONOS DE LA CABECERA: misma caja, mismo tamaño, alineados
   Tamaño y grosor: --beshop-icon-size-header y --beshop-icon-stroke
   (editor de tema › Iconos). Color: --beshop-icon-color (la cabecera
   transparente lo cambia)
   ============================================================ */

#header .header-top-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Cada botón de icono: un cuadrado de 32 × 32 con el icono centrado.
   Solo los que llevan el icono directamente dentro (:has), para no tocar
   los enlaces de los desplegables (idiomas, cuenta, carrito…) */
#header .header-top-right a:has(> svg),
#header .header-top-right a:has(> .beshop-icon),
#header .header-top-right button:has(> svg),
#header .header-top-right .bsb-trigger,
#header .header-top-right .ls-current,
#header .header-top-right .ls-globe-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max(32px, calc(var(--beshop-icon-size-header, 22px) + 6px));
  height: max(32px, calc(var(--beshop-icon-size-header, 22px) + 6px));
  margin: 0 !important;
  padding: 0 !important;
  background: none;
  border: 0;
  line-height: 1;
  vertical-align: middle;
  position: relative;
  color: var(--beshop-icon-color, var(--beshop-header-text));
}

/* Todos los iconos, iguales (solo los iconos, no las imágenes de los desplegables).
   El color va en el propio icono (.beshop-icon), así da igual dentro de qué
   envoltorio lo meta cada módulo */
#header .header-top-right a > svg,
#header .header-top-right button > svg,
#header .header-top-right .ls-globe-icon > svg,
#header .header-top-right .beshop-icon {
  display: block;
  width: var(--beshop-icon-size-header, 22px) !important;
  height: var(--beshop-icon-size-header, 22px) !important;
  color: var(--beshop-icon-color, var(--beshop-header-text)) !important;
  opacity: 1 !important;
  stroke-width: var(--beshop-icon-stroke, 1.5) !important;
  flex-shrink: 0;
}

a:focus, .cart-grid-body a.label:hover {
  color: initial;
}
#header .header-top-right .beshopcart_numberproducts {
  position: absolute;
   top: -3px;
  right: -8px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--beshop-primary);
  color: var(--beshop-primary-contrast) !important;
  font-size: 9px;
  font-weight: 500;
  line-height: 15px;
  text-align: center;
}
/* ============================================================
   ETIQUETAS DE PRODUCTO (Nuevo, descuento, agotado…)
   Colores en variables para poder cambiarlos por web
   ============================================================ */
:root {
  --bs-flag-new-bg: var(--beshop-bg-card);
  --bs-flag-new-color: var(--beshop-text);
  --bs-flag-sale-bg: var(--beshop-primary);
  --bs-flag-sale-color: var(--beshop-primary-contrast);
  --bs-flag-muted: var(--beshop-text-muted);
}
.product-flags {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0 !important;
  padding: 10px;
  pointer-events: none;
}
.product-flags li.product-flag {
  margin: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 4px 8px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 0;
  box-shadow: none;
  background: var(--bs-flag-sale-bg) !important;
  color: var(--bs-flag-sale-color) !important;
  border: 1px solid var(--bs-flag-sale-bg);
}
.product-flags li.product-flag.new {
  background: var(--bs-flag-new-bg) !important;
  color: var(--bs-flag-new-color) !important;
  border-color: var(--bs-flag-new-color);
}
.product-flags li.product-flag.discount,
.product-flags li.product-flag.on-sale {
  background: var(--bs-flag-sale-bg) !important;
  color: var(--bs-flag-sale-color) !important;
  border-color: var(--bs-flag-sale-bg);
}
.product-flags li.product-flag.out_of_stock {
  background: var(--beshop-bg-card) !important;
  color: var(--bs-flag-muted) !important;
  border-color: var(--bs-flag-muted);
}
.discount-percentage,
.discount-amount {
  background: none !important;
  color: var(--beshop-text) !important;
  padding: 0 !important;
  font-size: 12px;
  font-weight: 500;
}


#header {
  position: relative;
}
#header .mm-nav--desktop {
  position: static;
}
#header .mm-menu__item--has-dd {
  position: static;
}
#header .mm-dropdown {
  margin-top: 0;
}
#header .mm-dropdown--fullwidth {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  margin-top: 0;
}

.custom-checkbox {
  display: flex;
  align-items: center;
}
.custom-checkbox input[type=checkbox] {
  width: 12px;
  height: 12px;
  accent-color: var(--beshop-primary);
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
}
.custom-checkbox .ps-shown-by-js {
  display: none;
}

.container-b2b-form {
  max-width: 1530px;
  margin: auto;
}
.container-b2b-form h2 {
  margin-bottom: 25px;
  text-decoration: underline;
}

#header .mm-mobile-list li {
  border: none !important;
  display: block;
}
#header .mm-mobile-item-row {
  display: flex;
}

.modal-backdrop {
  z-index: 998;
}

@media (max-width: 1530px) {
  .beshop-container-footer {
    padding: 60px 40px;
    gap: 18px;
  }
}
@media (max-width: 1304px) {
  .beshop-container-footer {
    padding: 40px;
    display: block;
  }
  .beshop-container-footer .block_newsletter {
    float: none;
    margin: inherit;
    padding-left: 0;
  }
}
@media (max-width: 767px) {
  .beshop-container-footer {
    padding: 40px;
    display: block;
  }
  .beshop-container-footer .block_newsletter {
    float: none;
    margin: inherit;
    padding-left: 0;
  }
}
@media (max-width: 575px) {
  /* El logo va en el flujo, tras la hamburguesa, y encoge si los iconos de la
     derecha necesitan sitio (antes, absoluto al 33 %, se montaba sobre ellos) */
  #header.mm-mobile-mode .header-top-inner .header-top-left {
    min-width: 0;
  }
  #header.mm-mobile-mode .header-top-inner .header-top-left .bte-logo-link {
    position: static;
    transform: none;
    flex: 0 1 180px; /* ancho máximo del logo; encoge si no cabe */
    order: 1; /* después de la hamburguesa (en el HTML va antes) */
    min-width: 0;
    margin: 0 8px;
  }
  #header.mm-mobile-mode .header-top-inner .header-top-left .bte-logo {
    display: block;
    width: 100%;
    height: auto;
  }
  #header.mm-mobile-mode .header-top-inner .header-top-right {
    flex: 0 0 auto;
    width: auto; /* theme.css le da width:100% */
  }
  .col-sm-6 {
    width: 50%;
  }
  .breadcrumb {
    display: none !important;
  }
}
@media (max-width: 430px) {
  #header .header-top-inner .header-top-left .bte-logo {
    max-width: 150px;
  }
  #header.mm-mobile-mode .header-top-inner .header-top-left .bte-logo-link {
    flex-basis: 150px;
  }
  #header.mm-mobile-mode .header-top-inner .header-top-right {
    gap: 6px;
  }
}

/* ============================================================
   Aviso B2B en la barra superior (hook displayBanner)
   ============================================================ */
.bs-b2b-banner,
#header .header-banner .bs-b2b-banner {
  background: var(--beshop-b2b-banner-bg, #000) !important;
  text-align: center;
}
.bs-b2b-banner__link {
  display: block;
  padding: 9px 16px;
  color: var(--beshop-b2b-banner-color, #fff) !important;
  font-size: var(--text-caption, 11px);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
}
.bs-b2b-banner__link strong {
  font-weight: 600;
  margin-left: 6px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bs-b2b-banner__link span {
  margin-left: 6px;
  transition: margin-left .2s;
}
.bs-b2b-banner__link:hover span {
  margin-left: 10px;
}


/* ============================================================
   TÍTULO DE PÁGINA (H1) — igual en todas las páginas
   Centrado, en mayúsculas espaciadas, con línea a cada lado.
   Afecta a la cabecera estándar de PrestaShop (.page-header):
   CMS, login, registro, mi cuenta, tiendas, etc.
   ============================================================ */
#wrapper .page-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 0 0 48px;
  text-align: center;
}
#wrapper .page-header::before,
#wrapper .page-header::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--beshop-line-strong);
}
#wrapper .page-header h1 {
  font-size: var(--fs-md, 18px);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  margin: 0;
}
@media (max-width: 575px) {
  #wrapper .page-header {
    gap: 12px;
    margin-bottom: 32px;
  }
  #wrapper .page-header h1 {
    white-space: normal;
  }
}

/* ============================================================
   SELECTOR DE CANTIDAD (touchspin): carrito y ficha de producto
   Un único recuadro negro: número a la izquierda, flechas a la derecha
   (con body y no #wrapper: el carrito de algunos temas va fuera de #wrapper)
   ============================================================ */
body .bootstrap-touchspin {
  display: inline-flex !important;
  align-items: stretch !important;
  width: auto !important;
  float: none !important;
  border: 1px solid var(--beshop-line-strong) !important;
  background: var(--beshop-bg-card) !important;
  box-shadow: none !important;
}
body .bootstrap-touchspin input,
body .bootstrap-touchspin input.form-control,
body .js-cart-line-product-quantity {
  width: 52px !important;
  height: 42px !important;
  border: none !important;
  padding: 0 !important;
  text-align: center;
  color: var(--beshop-text) !important;
  background: transparent !important;
  font-size: var(--text-body, 15px) !important;
  box-shadow: none !important;
  -moz-appearance: textfield;
}
body .bootstrap-touchspin input::-webkit-outer-spin-button,
body .bootstrap-touchspin input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
body .bootstrap-touchspin .input-group-btn-vertical {
  display: flex !important;
  flex-direction: column !important;
  width: 30px !important;
  border-left: 1px solid var(--beshop-primary) !important;
}
body .bootstrap-touchspin .input-group-btn-vertical .btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto !important;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: var(--beshop-bg-card) !important;
  color: var(--beshop-text) !important;
  box-shadow: none !important;
  position: static !important;
}
body .bootstrap-touchspin .input-group-btn-vertical .btn + .btn,
body .bootstrap-touchspin .bootstrap-touchspin-down {
  border-top: 1px solid var(--beshop-primary) !important;
}
body .bootstrap-touchspin .input-group-btn-vertical .btn:hover {
  background: var(--beshop-primary) !important;
  color: var(--beshop-primary-contrast) !important;
}
body .bootstrap-touchspin .input-group-btn-vertical i,
body .bootstrap-touchspin .input-group-btn-vertical .material-icons {
  position: static !important;
  font-size: 16px;
  line-height: 1;
}
/* ------------------------------------------------------------------
   Esquinas (Diseño › Esquinas y botones). Botones, campos y rellenos de botón se aplican en
   sus reglas de arriba; aquí, tarjetas y ventanas.
   ------------------------------------------------------------------ */
.product-miniature .thumbnail-top,
.card,
#js-product-list-header .beshop-cat-hero,
#subcategories.beshop-subcats--square .subcat-img,
#subcategories:not(.beshop-subcats--image) .subcat-item {
  border-radius: var(--beshop-radius-card, 0);
}
.modal-content {
  border-radius: var(--beshop-radius-modal, 0.3rem);
}
#product .product-cover,
#product .thumb-container .thumb {
  border-radius: var(--beshop-radius-card, 0);
}
/* Cantidad (ficha y miniatura): las esquinas de fuera, como los campos */
#product .qty .quantity-nav {
  border-radius: var(--beshop-radius-field, 0);
  overflow: hidden;
}
.product-miniature .product-quantity-div > :first-child {
  border-radius: var(--beshop-radius-field, 0) 0 0 var(--beshop-radius-field, 0);
}
.product-miniature .product-quantity-div > :last-child {
  border-radius: 0 var(--beshop-radius-field, 0) var(--beshop-radius-field, 0) 0;
}

/* Flechas en la foto de la miniatura (Catálogo › Miniatura › Fotos; miniature-photos.js) */
.product-miniature .thumbnail-top {
  position: relative;
}
.product-miniature .product-thumbnail .pm-img--slide {
  position: absolute;
  inset: 0;
}
.product-miniature .product-thumbnail .pm-img--slide img:not([src]) {
  visibility: hidden;
}
.product-miniature .pm-photo-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--beshop-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.product-miniature .pm-photo-nav--prev {
  left: 8px;
}
.product-miniature .pm-photo-nav--next {
  right: 8px;
}
.product-miniature:hover .pm-photo-nav {
  opacity: 1;
}
/* Pantallas táctiles: sin ratón encima, las flechas se ven siempre */
@media (hover: none) {
  .product-miniature .pm-photo-nav {
    opacity: 1;
    width: 28px;
    height: 28px;
    margin-top: -14px;
  }
}
/* Casillas de beshop_consent (consent_block.tpl): el módulo deja el aspecto al tema; mismo
   cuadro que .custom-checkbox, con la marca dibujada en CSS (su plantilla no lleva el icono) */
.beshop_consent__item {
  position: relative;
}
.beshop_consent .beshop_checkboxoriginal {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  opacity: 0;
}
.beshop_consent .beshop_checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: auto;
  margin: 0;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  font-weight: inherit;
  cursor: pointer;
}
.beshop_consent .beshop_checkboxbox {
  position: relative;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 0.1em;
  border: 1px solid var(--bs-field-border, var(--beshop-line-strong));
  border-radius: var(--beshop-radius-field, 0);
  background: var(--beshop-bg-card, #fff);
}
.beshop_consent .beshop_checkboxoriginal:checked + .beshop_checkbox .beshop_checkboxbox::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid var(--beshop-text);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.beshop_consent .beshop_checkboxoriginal:focus-visible + .beshop_checkbox .beshop_checkboxbox {
  outline: 2px solid var(--beshop-primary);
  outline-offset: 2px;
}
.beshop_consent .has-error .beshop_checkboxbox {
  border-color: var(--ctn-error, #c62828);
}
/* El desplegable y el error, alineados con el texto de la casilla (no en los textos informativos) */
.beshop_consent .beshop_checkbox ~ .beshop_consent__more,
.beshop_consent .beshop_checkbox ~ .beshop_consent__error {
  margin-left: calc(18px + 0.5rem);
  text-align: left;
}

/* ------------------------------------------------------------------
   Disposición de la cabecera (Cabecera › Disposición; header.tpl)
   ------------------------------------------------------------------ */
#header .header-top-center .bte-logo {
  max-width: 180px;
}
/* Menú · logo · iconos: el menú ocupa su columna entera para medir si cabe */
#header .hdr-layout--center .header-top-inner .header-top-left {
  justify-self: stretch;
  display: flex;
  align-items: center;
  min-width: 0;
}
/* Editorial: logo más grande arriba y el menú debajo, centrado */
#header:not(.mm-mobile-mode) .hdr-layout--editorial .header-top-inner {
  height: 88px;
}
#header:not(.mm-mobile-mode) .hdr-layout--editorial .header-top-center .bte-logo {
  max-width: 240px;
}
#header .hdr-layout--editorial .header-top-menu {
  display: flex;
  justify-content: center;
  padding: 0 32px;
  border-top: 1px solid var(--beshop-line);
}
#header.mm-mobile-mode .hdr-layout--editorial .header-top-menu {
  display: none;
}
/* Modo hamburguesa con el logo en la columna central: centrado encima, como en la clásica */
#header.mm-mobile-mode .header-top:not(.hdr-layout--classic) .header-top-inner .header-top-center {
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
/* Hamburguesa en ordenador (siempre, o porque el menú no cabe a un lado del logo): la altura
   y los márgenes de ordenador */
@media (min-width: 992px) {
  #header.mm-mobile-mode :is(.hdr-layout--burger, .hdr-layout--center) .header-top-inner {
    height: 64px;
    padding: 0 32px;
  }
}
/* ------------------------------------------------------------------
   Parallax en los banners del Page Builder. Se activa escribiendo en el campo «Clase CSS»
   del banner, o del grupo para todo un carrusel:
     pb-parallax                  la foto se mueve más despacio que la página
     pb-parallax--suave           (además de pb-parallax) menos movimiento y menos recorte
     pb-parallax--texto           (además de pb-parallax) el texto sube y se desvanece al salir el banner
     pb-parallax--fijo            (además de pb-parallax) la foto quieta y el banner como ventana (ver abajo)
   Solo CSS (animaciones ligadas al scroll, en el compositor: sin JS ni saltos de página).
   Sin soporte (Firefox de momento) o con «reducir movimiento», el banner se ve normal.
   Cuánto se mueve la foto depende de cuánto más grande es que el banner: se amplía (--pb-zoom)
   y recorre ese sobrante (--pb-move, la mitad de lo ampliado). Con el 50 % va un 15-20 % más
   despacio que la página en ordenador; recorta la foto, así que el motivo, en el centro.
   ------------------------------------------------------------------ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    :is(.pb-banner.pb-parallax, .pb-parallax .pb-banner) {
      view-timeline: --pb-parallax block;
    }
    /* overflow:hidden convierte la caja en contenedor de scroll y el banner mediría el scroll
       de esa caja (que no se mueve); clip recorta igual sin serlo */
    .pb-parallax :is(.pb-block, .glide, .glide__track, .glide__slides),
    .pb-block:has(> .pb-banner.pb-parallax) {
      overflow: clip;
    }
    :is(.pb-banner.pb-parallax, .pb-parallax .pb-banner) img {
      animation: pb-parallax-img linear both;
      animation-timeline: --pb-parallax;
      will-change: transform;
    }
    :is(.pb-banner.pb-parallax--texto, .pb-parallax--texto .pb-banner) .container-txt {
      animation: pb-parallax-txt linear both;
      animation-timeline: --pb-parallax;
      animation-range: exit 0% exit 70%;
    }
  }
}
:is(.pb-banner.pb-parallax, .pb-parallax .pb-banner) {
  --pb-zoom: 1.5;
  --pb-move: 25%;
}
:is(.pb-banner.pb-parallax--suave, .pb-parallax--suave .pb-banner) {
  --pb-zoom: 1.22;
  --pb-move: 11%;
}
@keyframes pb-parallax-img {
  from { transform: translateY(calc(var(--pb-move) * -1)) scale(var(--pb-zoom)); }
  to   { transform: translateY(var(--pb-move)) scale(var(--pb-zoom)); }
}
@keyframes pb-parallax-txt {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-48px); }
}
/* Parallax sin animaciones ligadas al scroll: parallax.js pone .pb-parallax-js en <html> y
   las variables --pb-p y --pb-t en cada banner (mismo recorrido que las animaciones de arriba) */
.pb-parallax-js :is(.pb-banner.pb-parallax, .pb-parallax .pb-banner) img {
  transform: translateY(calc(var(--pb-p, 0) * var(--pb-move))) scale(var(--pb-zoom));
  will-change: transform;
}
.pb-parallax-js :is(.pb-banner.pb-parallax--texto, .pb-parallax--texto .pb-banner) .container-txt {
  opacity: calc(1 - var(--pb-t, 0));
  transform: translateY(calc(var(--pb-t, 0) * -48px));
}

/* Parallax «fijo» (pb-parallax pb-parallax--fijo; banners estáticos, no en carrusel): la foto
   se queda quieta y el banner la recorre como una ventana, como background-attachment:fixed
   pero con la <img> de siempre (sus tamaños, carga diferida y prioridad), sin repintar en cada
   scroll y también en iPhone. La foto ocupa el alto de la pantalla, así que en banners muy
   anchos recorta por los lados; el banner guarda su alto con la proporción de su foto
   (--pb-ratio, del Page Builder). Desde 768 px: en el móvil la foto apaisada a todo el alto de
   la pantalla se vería ampliadísima, así que queda el parallax normal. Con «reducir
   movimiento», normal. */
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  .pb-banner.pb-parallax--fijo,
  .pb-parallax--fijo:not(.pb-group--swiper):not(.pb-group--slider) .pb-banner {
    aspect-ratio: var(--pb-ratio, 3 / 1);
    clip-path: inset(0);
  }
  .pb-banner.pb-parallax--fijo img,
  .pb-parallax--fijo:not(.pb-group--swiper):not(.pb-group--slider) .pb-banner img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100vh !important;
    /* Alto con la barra del navegador escondida: no salta al aparecer o esconderse */
    height: 100lvh !important;
    object-fit: cover;
    /* Lo mueve el tema por otra vía: ni la animación ni el respaldo de pb-parallax */
    animation: none !important;
    transform: none !important;
  }
  @media (max-width: 991px) {
    .pb-banner.pb-parallax--fijo,
    .pb-parallax--fijo:not(.pb-group--swiper):not(.pb-group--slider) .pb-banner {
      aspect-ratio: var(--pb-ratio-t, var(--pb-ratio, 3 / 1));
    }
  }
}