/**
 * Layout tienda pública — espacio bajo cabecera fija (.cd-header en style.mr.css).
 * Paridad aproximada con design_reference / shop-shell hero.
 */

/* Raíz tienda (.mr-shop-html en layouts/shop.blade.php):
   - overflow-anchor: none → evita micro-scroll al recargar por cambios de layout arriba.
   - scroll-behavior: auto → anula el smooth del root (style.mr.css).
   Sin scrollbar-gutter: en recarga el hueco de barra puede cambiar de un frame a otro
   y la cabecera fija parece “deslizarse” sobre el fondo blanco. */
html.mr-shop-html,
html.mr-shop-html body.mr-shop-body {
  overflow-anchor: none;
  scroll-behavior: auto;
}

.mr-shop-body {
  margin: 0;
  /* Altura del bloque nav fijo (.mr-shop-fixed-chrome). La franja promo va en flujo tras el gap (paridad Prodesin). */
  --mr-header-offset: 6.75rem;
  /* Aire entre la franja promo (scroll) y el <main>. */
  --mr-shop-gap-after-promo-strip: 1.5rem;
}

/*
  Cromo fijo: nav + degradado en .mr-shop-header-bg (siempre visible). El fixed lo aporta el wrapper.
*/
/* 1030 ≈ Bootstrap $zindex-fixed: por encima del contenido y sticky, pero por debajo de
   offcanvas (1045) y modales — si no, el panel de filtros del catálogo queda tapado por la cabecera (logo UE). */
.mr-shop-fixed-chrome {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1030;
  box-sizing: border-box;
  overflow: visible;
}
body.mr-shop-body .mr-shop-fixed-chrome > header.cd-header {
  position: relative;
  width: 100%;
  top: auto;
  left: auto;
}
@media (max-width: 991.98px) {
  .mr-shop-body {
    --mr-shop-gap-after-promo-strip: 1.25rem;
  }
}

@media (max-width: 479.98px) {
  .mr-shop-body {
    --mr-header-offset: 3.85rem;
  }
}

@media (min-width: 480px) and (max-width: 991.98px) {
  .mr-shop-body {
    --mr-header-offset: 4.15rem;
  }
}

/* Hueco bajo la cabecera fija (solo nav); la promo va después en flujo y hace scroll. */
.mr-shop-fixed-header-gap {
  height: var(--mr-header-offset);
  flex-shrink: 0;
  pointer-events: none;
}

/* Aire entre franja promo (documento) y contenido principal. */
body.mr-shop-has-promo-strip .mr-shop-main {
  padding-top: var(--mr-shop-gap-after-promo-strip);
}

/* Index / layout home: sin hueco extra bajo la promo (el main ya es edge-to-edge). */
body.mr-shop-has-promo-strip .mr-shop-main.mr-shop-main--home {
  padding-top: 0;
}

/* Portada Club Amigos (breakout): el split va pegado bajo la promo, sin hueco extra. */
body.mr-shop-has-promo-strip .mr-shop-main.mr-shop-main--breakout {
  padding-top: 0;
}

/* Franja promo (envío / HTML admin): en flujo entre gap y <main>, ancho completo (paridad Prodesin vs hero). */
.mr-promo-strip {
  font-family: var(--mr-font-ui, "Poppins", sans-serif);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  background: #b49646;
  color: #fff;
  padding: 0.6rem 1rem;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}
.mr-promo-strip a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mr-promo-strip a:hover {
  color: var(--mr-plum, #261620);
}

/* CTA del enlace por defecto (catálogo): pastilla clara sobre franja oro */
.mr-promo-strip a.mr-promo-strip__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 0 0.35rem;
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mr-plum, #261620) !important;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
  vertical-align: middle;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.mr-promo-strip a.mr-promo-strip__cta:hover {
  color: #fff !important;
  background: var(--mr-plum, #261620);
  border-color: var(--mr-plum, #261620);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.2);
}

.mr-promo-strip a.mr-promo-strip__cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Solo portada (main home): franja promo semitransparente sobre la foto bajo la nav */
body:has(main.mr-shop-main--home) .mr-promo-strip {
  background: rgba(180, 150, 70, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@media (prefers-reduced-motion: reduce) {
  body:has(main.mr-shop-main--home) .mr-promo-strip {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Barra inferior fija: chip promo + botón cookies (antes en style.mr.css). */
.mr-shop-bottom-pinned {
  position: fixed;
  bottom: 15px;
  right: 15px;
  left: auto;
  z-index: 2147483646;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: calc(100vw - 30px);
  pointer-events: none;
}

.mr-shop-bottom-pinned > * {
  pointer-events: auto;
}

#cookie-settings-link {
  position: relative;
  flex: 0 0 auto;
  width: fit-content;
  max-width: none;
  display: inline-block;
  line-height: 0;
}

/* Recordatorio promo al hacer scroll: junto al botón de cookies (.mr-shop-bottom-pinned). */
a.mr-promo-strip-chip {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  z-index: 1;
  display: none;
  align-items: center;
  gap: 0.45rem;
  max-width: min(calc(100vw - 5.5rem), 36rem);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: #b49646;
  color: #fff;
  font-family: var(--mr-font-ui, "Montserrat", sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  line-height: 1.25;
}
a.mr-promo-strip-chip:not([hidden]) {
  display: flex;
}
a.mr-promo-strip-chip:hover {
  color: #fff;
  filter: brightness(1.05);
}
.mr-promo-strip-chip__text {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
  a.mr-promo-strip-chip {
    max-width: min(calc(100vw - 4.5rem), 32rem);
    font-size: 0.68rem;
    padding: 0.3rem 0.65rem;
  }
}

/* Botones que abren popups informativos (barra inferior, checkout, etc.) */
.mr-info-popup-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  max-width: min(calc(100vw - 5.5rem), 20rem);
  padding: 0.35rem 0.7rem;
  border: none;
  border-radius: 999px;
  background: #b49646;
  color: #fff;
  font-family: var(--mr-font-ui, "Poppins", sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  text-decoration: none;
}
.mr-info-popup-btn:hover,
.mr-info-popup-btn:focus-visible {
  color: #fff;
  filter: brightness(1.05);
}
.mr-info-popup-btn__icon {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 0.65rem;
  font-weight: 700;
  font-style: italic;
  font-family: var(--mr-font-ui, "Poppins", sans-serif);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mr-info-popup-btn__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mr-info-popup-btn--inline {
  padding: 0.15rem 0.45rem;
  font-size: 0.68rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  max-width: 14rem;
}
.mr-info-popup-btn--inline .mr-info-popup-btn__icon {
  width: 1rem;
  height: 1rem;
  font-size: 0.6rem;
}

/* Barra inferior: chip promo + botón popup (misma altura visual) */
.mr-shop-bottom-pinned .mr-info-popup-btn,
.mr-shop-bottom-pinned a.mr-promo-strip-chip {
  min-height: 1.85rem;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
  line-height: 1.25;
  box-sizing: border-box;
  align-items: center;
}

.mr-shop-bottom-pinned .mr-info-popup-btn__icon {
  width: 1rem;
  height: 1rem;
  font-size: 0.58rem;
  border-width: 1.25px;
}

@media (max-width: 767.98px) {
  .mr-shop-bottom-pinned .mr-info-popup-btn,
  .mr-shop-bottom-pinned a.mr-promo-strip-chip {
    min-height: 1.75rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    font-size: 0.68rem;
  }
}

.mr-info-popup-modal .modal-title {
  font-family: var(--mr-font-ui, "Poppins", sans-serif);
}
.mr-info-popup-modal__content {
  font-family: var(--mr-font-body, "Baskervville", serif);
  font-size: 0.95rem;
  line-height: 1.55;
}
.mr-info-popup-modal__content p:last-child {
  margin-bottom: 0;
}
.mr-info-popup-modal__img {
  display: block;
  max-width: 100%;
  max-height: 220px;
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: 0.35rem;
}

/* Home: hero a ancho completo. La cabecera (.cd-header) es fixed: el fondo del hero debe
   subir bajo ella (como en la web corporativa), no empezar debajo — si no, el degradé del
   header se ve sobre el body y queda una franja “sin foto”. */
.mr-shop-main.mr-shop-main--home {
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  /* Evita colapso de márgenes con el hero (margin-top negativo); sin esto el main puede “encogerse” y verse franja blanca debajo */
  display: flow-root;
}
/* Con franja promo: padding general arriba; excepción index → .mr-shop-main--home. */

.mr-shop-main--inner {
  padding-top: 0.75rem;
}

/* Cabecera interior (paridad design_reference/tienda-componentes.html).
   El offset de la cabecera fija NO puede ir como padding del wrapper sin fondo: si no, bajo el
   degradé transparente del .cd-header solo se ve el body (blanco). El fondo debe empezar en y=0
   y el padding aplicarse al bloque que lleva background-image (.mr-page-hero__bg). */
.mr-page-hero {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.mr-page-hero__bg {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Gap reserva solo nav fijo; promo va en flujo entre gap y main. */
  padding-top: 3rem;
  padding-bottom: 3rem;
  min-height: 400px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* Títulos hero (portada + páginas interiores): Noto Serif Display (solo h1; cuerpo en main sigue Baskervville vía shop-typography.mr.css) */
.mr-page-hero h1.titular,
.mr-home-hero-slide-panel h1.titular {
  font-family: var(--mr-font-display, "Noto Serif Display", serif) !important;
}

@media (max-width: 767.98px) {
  .mr-page-hero__bg {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
    min-height: 280px;
  }
}

.mr-shop-main--inner-page {
  /* Gap (nav) y promo ya están resueltos en el layout antes de este <main>. */
  padding-top: 0;
  padding-bottom: 2.5rem;
  min-height: 50vh;
  max-width: none;
  width: 100%;
}

/* Contenido a ancho completo (p. ej. portada Club Amigos mockup-07). */
.mr-shop-main--inner-page.mr-shop-main--breakout {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  overflow: visible;
}

@media (max-width: 767.98px) {
  .mr-shop-main--inner-page {
    padding-top: 0;
  }
}

/* Título de página en flujo (sustituye al titular sobre foto del hero interior). */
.mr-shop-inner-heading h1 {
  font-family: var(--mr-font-display, "Noto Serif Display", serif) !important;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 600;
}

/* Hero portada — paridad fullPage: cubre exactamente el primer pantallazo.
   margin-top: -offset sube el bloque, por eso height = 100dvh + offset (no solo 100dvh). */
.mr-home-hero-breakout {
  --mr-header-offset: 6.75rem;
  --mr-home-hero-void: #0a0a0a;
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: calc(-1 * var(--mr-header-offset));
  margin-bottom: 0;
  overflow: hidden;
  box-sizing: border-box;
  /* Nunca blanco entre slides ni en los bordes durante el transform */
  background-color: var(--mr-home-hero-void);
  /* height = viewport + offset: compensa el margin-top negativo */
  height: calc(100dvh + var(--mr-header-offset));
  min-height: calc(100dvh + var(--mr-header-offset));
}

.mr-home-hero-carousel-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding-top: var(--mr-header-offset);
  box-sizing: border-box;
  background-color: var(--mr-home-hero-void);
}

/* El carrusel ocupa el hueco bajo la cabecera fija dentro del bloque 100dvh (flex, sin re-restar mal el viewport) */
#mrHomeHero.mr-home-hero-carousel {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.mr-home-hero-carousel .carousel-inner {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  background-color: var(--mr-home-hero-void);
  /* slide horizontal Bootstrap: el inner se mueve con transform; fondo oscuro evita destellos */
}

.mr-home-hero-carousel .carousel-item {
  position: relative;
  /* float:left + margin-right:-100% de Bootstrap: necesario para slide; no usar float:none */
  height: 100%;
  min-height: 100%;
  background-color: var(--mr-home-hero-void);
  /* easing más suave sobre la transición transform que aplica Bootstrap al slide */
  transition-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
}

.mr-home-hero-slide-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: var(--mr-home-hero-void);
}

.mr-home-hero-slide-panel {
  z-index: 10;
  pointer-events: none;
}

.mr-home-hero-slide-panel img,
.mr-home-hero-slide-panel h1,
.mr-home-hero-slide-panel span,
.mr-home-hero-slide-panel .mr-home-hero-cta-wrap {
  pointer-events: auto;
}

.mr-home-hero-featured {
  max-height: min(360px, 42vh);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.35));
}

.mr-home-hero-layout-split .titular {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.mr-home-hero-logo {
  width: 100%;
  max-width: 450px;
  height: auto;
}

/*
  Indicadores como fullPage .fp-slidesNav (diseño_pagina/js/fullpage.css, overrides finales).
  Bootstrap 5 pinta [data-bs-target] como barras: hay que resetear con la misma especificidad.
*/
.carousel-indicators.mr-home-hero-dots {
  position: absolute;
  left: 50% !important;
  right: auto !important;
  bottom: 35px !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 12;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  list-style: none;
}

.carousel-indicators.mr-home-hero-dots [data-bs-target] {
  box-sizing: border-box !important;
  flex: none !important;
  display: inline-block;
  width: 14px !important;
  height: 14px !important;
  margin: 0 6px !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-clip: border-box !important;
  opacity: 1 !important;
  text-indent: -9999px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  border-radius: 50%;
  transition: none;
}

.carousel-indicators.mr-home-hero-dots [data-bs-target]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: rgba(190, 160, 70, 0.65);
  transition: background 0.2s ease-in-out;
}

.carousel-indicators.mr-home-hero-dots [data-bs-target].active::after,
.carousel-indicators.mr-home-hero-dots [data-bs-target]:hover::after {
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  background: #c7a74a;
}

@media (max-width: 479.98px) {
  .mr-home-hero-breakout {
    --mr-header-offset: 3.85rem;
    height: calc(100dvh + var(--mr-header-offset));
    min-height: calc(100dvh + var(--mr-header-offset));
  }
}

@media (min-width: 480px) and (max-width: 991.98px) {
  .mr-home-hero-breakout {
    --mr-header-offset: 4.15rem;
    height: calc(100dvh + var(--mr-header-offset));
    min-height: calc(100dvh + var(--mr-header-offset));
  }

  .mr-home-hero-slide-panel h1.titular {
    font-size: clamp(1.5rem, 7vw, 2.25rem);
  }

  .mr-home-hero-slide-panel .font_inmueble {
    font-size: 1rem;
  }

  .mr-home-hero-featured {
    max-height: min(220px, 35vh);
  }
}

.mr-shop-main {
  min-height: 50vh;
  padding-top: 0;
  /*padding-bottom: 2.5rem;*/
}

@media (max-width: 767.98px) {
  .mr-shop-main {
    padding-top: 0;
  }
}

/* Home — bloque «Exquisita selección de vinos» + Slick (paridad diseño_pagina index) */
.mr-home-wine-breakout {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.mr-home-wine-section {
  background-color: #e8e4dc;
  background-image: url("../images/fondo-vinos.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

.mr-slider-vinos-wrap .fotos_galeria {
  display: block;
  margin: 0 auto;
  max-height: 280px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.mr-slider-caption {
  font-family: var(--mr-font-ui, Poppins, sans-serif);
  color: var(--mr-text, #212120);
}

.mr-home-wine-section .mr-slider-vinos-wrap .slick-dots {
  bottom: -2.25rem;
}

.mr-home-wine-section .mr-slider-vinos-wrap .slick-dots li button:before {
  color: #cccccc;
  opacity: 1;
  font-size: 10px;
}

.mr-home-wine-section .mr-slider-vinos-wrap .slick-dots li.slick-active button:before {
  color: #000000;
  opacity: 1;
}

/* Bloque nav a ancho del <header> fijo (canvas 3D va en .mr-shop-wine-liquid-band, en flujo). */
header.cd-header.mr-shop-header-shell .mr-shop-header-nav-block {
  position: relative;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
}

header.cd-header.mr-shop-header-shell .mr-shop-header-nav-block > .container-fluid {
  position: relative;
  z-index: 1;
}

/* Franja líquido en flujo: sube sobre el hueco de la nav fija (misma altura que --mr-header-offset)
   para que el canvas llegue hasta el borde inferior del header, no empiece “más abajo”. */
.mr-shop-wine-liquid-band {
  position: relative;
  width: 100%;
  margin-top: calc(-1 * var(--mr-header-offset));
  min-height: calc(var(--mr-header-offset) + var(--mr-wine-flow-band-height, 3.5rem));
  overflow: hidden;
  /* Fallback mientras carga la foto de cabecera */
  background-color: #1f1a14;
  pointer-events: none;
  box-sizing: border-box;
}

/* Franja bajo la nav fija: misma lógica de encuadre que en portada (center + fixed; variable --mr-shop-wine-bg-inner desde shop.blade). */
.mr-shop-wine-liquid-band.mr-wine-liquid-root > .mr-shop-header-wine-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background-color: #1f1a14;
  background-image: var(--mr-shop-wine-bg-inner, url("../images/cabecero-24.jpg"));
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

@media (prefers-reduced-motion: reduce) {
  .mr-shop-wine-liquid-band.mr-wine-liquid-root > .mr-shop-header-wine-backdrop {
    background-attachment: scroll;
  }
}

.mr-shop-wine-liquid-band.mr-wine-liquid-root .mr-shop-header-wine-canvas {
  display: none;
}

/* Cabecera fija: fila de contenido; overflow visible para .dropdown-menu.
   Degradado siempre (lectura sobre foto de cabecero). */
.mr-shop-header-bg {
  position: relative;
  overflow: visible;
  background: var(--mr-header-bar-gradient);
  transition: background 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .mr-shop-header-bg {
    transition: none;
  }
}

header.cd-header.mr-shop-header-shell .mr-shop-header-bg {
  background: var(--mr-header-bar-gradient);
}

/* Solo portada: en scroll 0 el degradado del header es más transparente (se ve el fondo); al bajar vuelve al token. */
body.mr-shop-header--at-top:has(main.mr-shop-main--home) .mr-shop-fixed-chrome header.cd-header.mr-shop-header-shell .mr-shop-header-bg {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.58) 38%,
    rgba(0, 0, 0, 0.42) 55%,
    rgba(0, 0, 0, 0.24) 72%,
    rgba(0, 0, 0, 0.08) 88%,
    rgba(0, 0, 0, 0) 100%
  );
}

.mr-shop-header-wine-backdrop .mr-shop-header-wine-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

/* Sin sombra bajo el header: evita línea / doble borde con la franja siguiente (vino / contenido). */
header.cd-header.mr-shop-header-shell {
  background: transparent;
  box-shadow: none;
}

.mr-shop-header-bg__content {
  position: relative;
  z-index: 2;
}

/* Logo cabecera: paridad diseño_pagina/css/style.css (.logo) + nuestras-bodegas/index.html.
   En ≥md la columna es display:block (no flex) para que el img width:100% use todo col-md-2. */
header.cd-header.mr-shop-header-shell .mr-shop-header-brand-logo {
  height: auto;
  display: block;
}

@media (max-width: 767.98px) {
  header.cd-header.mr-shop-header-shell .mr-shop-header-logo-col {
    align-self: center;
    min-height: 3.15rem;
    padding-top: 0.15rem;
    padding-bottom: 0.35rem;
  }

  header.cd-header.mr-shop-header-shell .mr-shop-header-brand-logo {
    width: auto;
    max-width: 13.25rem;
  }
}

/* iPad vertical (~768–835px): mismo .logo que diseño_pagina/css/style.css @media max-width 835px */
@media (min-width: 768px) and (max-width: 835.98px) {
  header.cd-header.mr-shop-header-shell .mr-shop-header-brand-logo {
    width: 150px;
    max-width: 150px;
  }
}

@media (min-width: 836px) {
  header.cd-header.mr-shop-header-shell .mr-shop-header-brand-logo {
    width: 100%;
    max-width: 250px;
  }
}

/* ESP | ENG: una sola línea (col estrecha + flex-wrap rompía tras |). */
header.cd-header.mr-shop-header-shell .mr-shop-header-lang {
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 0;
  line-height: 1.2;
}

header.cd-header.mr-shop-header-shell .mr-shop-header-lang__esp,
header.cd-header.mr-shop-header-shell .mr-shop-header-lang__sep,
header.cd-header.mr-shop-header-shell .mr-shop-header-lang__eng {
  flex-shrink: 0;
}

header.cd-header.mr-shop-header-shell .mr-shop-header-lang__sep {
  white-space: nowrap;
}

/* ESP|ENG alineado con la columna de CTAs (.pt-2) sin añadir col-* extra que rompa la fila del nav. */
@media (min-width: 768px) {
  header.cd-header.mr-shop-header-shell .mr-shop-header-meta-lang {
    padding-top: 0.5rem;
  }
}

/* Franja UE + carrito/cuenta + hamburguesa: una sola línea alineada en móvil */
header.cd-header.mr-shop-header-shell .mr-shop-header-ue__img {
  width: auto;
  max-width: 3.25rem;
  height: auto;
  display: block;
}

@media (min-width: 992px) {
  header.cd-header.mr-shop-header-shell .mr-shop-header-ue__img {
    max-width: 74px;
  }
}

header.cd-header.mr-shop-header-shell .mr-shop-header-actions-inner {
  max-width: 100%;
}

/* Separación visual entre el último enlace del menú (p. ej. Contacto) y carrito/cuenta (solo ≥lg). */
header.cd-header.mr-shop-header-shell .mr-shop-header-nav-tools-sep {
  width: 1px;
  align-self: stretch;
  min-height: 1.35rem;
  margin: 0 0.35rem 0 0.65rem;
  background: rgba(255, 255, 255, 0.38);
}

/* CTA Tienda: el hover global (.nav-link:hover → oro) sobre fondo oro anulaba el texto;
   además style.mr.css (max-width: 1500px) ponía padding-bottom:1px en hover y “aplastaba” el enlace. */
header.cd-header.mr-shop-header-shell .nav-link.mr-nav-link-tienda {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  flex-shrink: 0;
  background-color: var(--mr-gold, #b49646);
  border-radius: 20px;
  color: #fff !important;
  border-bottom: none !important;
  text-decoration: none;
}

header.cd-header.mr-shop-header-shell .nav-link.mr-nav-link-tienda:hover,
header.cd-header.mr-shop-header-shell .nav-link.mr-nav-link-tienda:focus-visible {
  color: #fff !important;
  background-color: #a8863d;
  border-bottom: none !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

@media only screen and (max-width: 1500px) {
  header.cd-header.mr-shop-header-shell .nav-link.mr-nav-link-tienda:hover,
  header.cd-header.mr-shop-header-shell .nav-link.mr-nav-link-tienda:focus-visible {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}

/* .solomovil tenía d-flex (!important) y ganaba a style.mr.css display:none en desktop */
@media (min-width: 992px) {
  header.cd-header.mr-shop-header-shell .solomovil {
    display: none !important;
  }
}

/* Portada editorial: imagen de fondo a ancho completo del main hasta el final del opener (incl. hueco bajo cabecera fija). */
.mr-home-hero-video-stack {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.mr-home-hero-video-stack__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Migas de pan (tienda interior, todas las secciones salvo home) */
.mr-shop-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0 0 1.35rem;
  padding: 0.55rem 1rem 0.55rem 0.85rem;
  font-family: var(--mr-font-ui, "Poppins", sans-serif);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 248, 245, 0.98) 100%);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 10px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.mr-shop-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  color: var(--mr-heading-plum, #3a3543);
}

.mr-shop-breadcrumb__item + .mr-shop-breadcrumb__item::before {
  content: "›";
  margin: 0 0.5rem;
  color: var(--mr-gold, #b49646);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1;
  opacity: 0.9;
}

.mr-shop-breadcrumb__item a {
  color: var(--mr-gold, #b49646);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.mr-shop-breadcrumb__item a:hover {
  color: var(--mr-plum, #261620);
  border-bottom-color: rgba(180, 150, 70, 0.55);
}

.mr-shop-breadcrumb__item[aria-current="page"] {
  color: var(--mr-heading-plum, #3a3543);
  font-weight: 600;
  max-width: 100%;
}

/* Mini-carrito (dropdown cabecera) + pulso del icono tras AJAX */
.mr-shop-cart-dropdown .mr-shop-cart-trigger {
  color: #fff;
}

.mr-shop-cart-dropdown .mr-shop-cart-trigger:hover,
.mr-shop-cart-dropdown .mr-shop-cart-trigger:focus-visible {
  color: #fff;
}

.mr-shop-cart-dropdown .mr-shop-cart-trigger:focus-visible {
  outline: 2px solid var(--mr-gold, #b49646);
  outline-offset: 2px;
}

/* Sobre style.mr.css (.dropdown-menu semitransparente oscuro): panel 100 % opaco y legible */
.mr-shop-header-tools .mr-shop-cart-menu.dropdown-menu,
.mr-shop-cart-menu.dropdown-menu,
.mr-embed-mini-root .mr-shop-cart-menu {
  --bs-dropdown-bg: #fdfcfa;
  --mr-shop-cart-menu-radius: 12px;
  background: #fdfcfa !important;
  background-color: #fdfcfa !important;
  border: 1px solid rgba(38, 22, 32, 0.14) !important;
  border-radius: var(--mr-shop-cart-menu-radius) !important;
  box-shadow: 0 0.75rem 2rem rgba(38, 22, 32, 0.22) !important;
  padding: 0 !important;
  margin-top: 0.35rem !important;
  min-width: min(100vw - 2rem, 22rem) !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--mr-text, #212120);
  /* Recorta hijos al radio del panel (evita rectángulos en esquinas superiores/inferiores). */
  overflow: hidden !important;
}

/* Sin .show el menú debe permanecer oculto (Bootstrap usa display:none; no forzar flex aquí). */
.mr-shop-header-tools .mr-shop-cart-menu.dropdown-menu.show,
.mr-shop-cart-menu.dropdown-menu.show,
.mr-embed-mini-root .mr-shop-cart-menu {
  display: flex !important;
  flex-direction: column;
}

.mr-shop-cart-menu {
  width: min(100vw - 2rem, 22rem);
  max-height: min(85vh, 28rem);
  z-index: 1050;
}

.mr-embed-mini-root .mr-shop-cart-menu {
  width: 100%;
  max-height: none;
  z-index: auto;
}

.mr-shop-cart-menu > .border-bottom {
  background-color: #fdfcfa;
  border-color: rgba(38, 22, 32, 0.1) !important;
  border-top-left-radius: var(--mr-shop-cart-menu-radius, 12px);
  border-top-right-radius: var(--mr-shop-cart-menu-radius, 12px);
}

.mr-shop-cart-menu-close {
  color: var(--mr-heading-plum, #3a3543) !important;
  line-height: 1;
  opacity: 0.75;
  text-decoration: none !important;
}

.mr-shop-cart-menu-close:hover {
  opacity: 1;
  color: var(--mr-plum, #261620) !important;
}

.mr-shop-cart-menu-close:focus-visible {
  outline: 2px solid var(--mr-gold, #b49646);
  outline-offset: 2px;
  border-radius: 4px;
  opacity: 1;
}

.mr-shop-cart-menu__scroll {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 14rem;
  background-color: #fff;
}

.mr-shop-cart-panel {
  color: var(--mr-text, #212120) !important;
}

.mr-shop-cart-panel .text-muted {
  color: var(--mr-muted, #8c8c8c) !important;
}

.mr-shop-cart-footer {
  background-color: #f3eee6 !important;
  border-color: rgba(38, 22, 32, 0.1) !important;
  border-bottom-left-radius: var(--mr-shop-cart-menu-radius, 12px);
  border-bottom-right-radius: var(--mr-shop-cart-menu-radius, 12px);
}

/* Mismo formato para Checkout (primario) y Ver carrito (secundario) */
.mr-shop-cart-footer .mr-shop-cart-footer__btn {
  font-family: var(--mr-font-ui, "Poppins", sans-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.55rem 1rem;
  border-radius: var(--mr-radius-pill, 20px);
  margin-top: 0 !important;
  line-height: 1.25;
  border-width: 1px;
  border-style: solid;
  box-sizing: border-box;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.mr-shop-cart-footer .mr-shop-cart-btn--primary {
  color: #fff !important;
  background-color: var(--mr-gold, #b49646) !important;
  border-color: var(--mr-gold, #b49646) !important;
}

.mr-shop-cart-footer .mr-shop-cart-btn--primary:hover {
  color: #fff !important;
  background-color: var(--mr-btn-reserva-hover, #333) !important;
  border-color: var(--mr-btn-reserva-hover, #333) !important;
}

.mr-shop-cart-footer .mr-shop-cart-btn--secondary {
  color: var(--mr-gold, #b49646) !important;
  background-color: #fff !important;
  border-color: var(--mr-gold, #b49646) !important;
}

.mr-shop-cart-footer .mr-shop-cart-btn--secondary:hover {
  color: var(--mr-plum, #261620) !important;
  background-color: rgba(180, 150, 70, 0.12) !important;
  border-color: var(--mr-gold, #b49646) !important;
}

.mr-shop-cart-footer .mr-shop-cart-btn-checkout.disabled,
.mr-shop-cart-footer .mr-shop-cart-btn-checkout[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* CTA dentro del panel (carrito vacío) — mismo lenguaje que secundario del pie */
.mr-shop-cart-panel .mr-shop-cart-panel__cta {
  font-family: var(--mr-font-ui, "Poppins", sans-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.55rem 1rem;
  border-radius: var(--mr-radius-pill, 20px);
  border: 1px solid var(--mr-gold, #b49646);
  color: var(--mr-gold, #b49646) !important;
  background-color: #fff !important;
  text-decoration: none !important;
  display: inline-block;
  margin-top: 0.5rem;
}

.mr-shop-cart-panel .mr-shop-cart-panel__cta:hover {
  color: var(--mr-plum, #261620) !important;
  background-color: rgba(180, 150, 70, 0.1) !important;
}

.mr-shop-cart-lines .mr-shop-cart-line:last-child {
  border-bottom: none !important;
}

.mr-shop-cart-line__thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
}

.mr-shop-cart-line__thumb-link {
  flex-shrink: 0;
}

.mr-shop-cart-line__thumb--empty {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}

@keyframes mr-shop-cart-pulse-kf {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.18);
  }
  100% {
    transform: scale(1);
  }
}

.mr-shop-cart-icon.mr-shop-cart-pulse {
  animation: mr-shop-cart-pulse-kf 0.48s ease-out;
  display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
  .mr-shop-cart-icon.mr-shop-cart-pulse {
    animation: none;
  }
}

/* Migas de pan tienda / cuenta / amigos (antes solo en shop-amigos.css; layout carga esto siempre) */
.mr-amigos-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0 0 1.35rem;
  padding: 0.55rem 1rem 0.55rem 0.85rem;
  font-family: var(--mr-font-ui, "Poppins", sans-serif);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 248, 245, 0.98) 100%);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 10px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.mr-amigos-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  color: var(--mr-heading-plum, #3a3543);
}

.mr-amigos-breadcrumb__item + .mr-amigos-breadcrumb__item::before {
  content: "›";
  margin: 0 0.5rem;
  color: var(--mr-gold, #b49646);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1;
  opacity: 0.9;
}

.mr-amigos-breadcrumb__item a {
  color: var(--mr-gold, #b49646);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.mr-amigos-breadcrumb__item a:hover {
  color: var(--mr-plum, #261620);
  border-bottom-color: rgba(180, 150, 70, 0.55);
}

.mr-amigos-breadcrumb__item[aria-current="page"] {
  color: var(--mr-heading-plum, #3a3543);
  font-weight: 600;
  max-width: 100%;
}