/**
 * 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 solo tras scroll (ver shop-header-scrim.js). 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: 767.98px) {
  .mr-shop-body {
    --mr-header-offset: 5.25rem;
    --mr-shop-gap-after-promo-strip: 1.25rem;
  }
}

/* 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: var(--mr-plum, #261620);
  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: var(--mr-gold, #b49646);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mr-promo-strip a:hover {
  color: #fff;
}

/* 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): Poppins como la web corporativa; anula Noto Serif de style.mr.css h1.titular */
.mr-page-hero h1.titular,
.mr-home-hero-slide-panel h1.titular {
  font-family: var(--mr-font-ui, "Poppins", sans-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-ui, "Poppins", sans-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: 767.98px) {
  .mr-home-hero-breakout {
    --mr-header-offset: 5.25rem;
    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;
  background-color: var(--mr-plum, #261620);
  pointer-events: none;
  box-sizing: border-box;
}

/* Cabecera fija: fila de contenido; overflow visible para .dropdown-menu.
   Degradado solo al hacer scroll (shop-header-scrim.js → html.mr-shop-header-bar-scrolled). */
.mr-shop-header-bg {
  position: relative;
  overflow: visible;
  background: transparent;
  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: transparent;
}

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

.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 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%;
}

/* 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%;
}