/* =====================================================================
   BESTIMARKET · CSS personalizado (tema Nest)
   Apariencia → CSS personalizado. Sustituye TODO el contenido por esto.
   Valores tomados del Figma "Bestimarket" (frame 7:3377).

   Índice
   0. Fuentes
   1. Variables (colores y medidas)
   2. Barra superior
   3. Cabecera: fila principal, logo y menú
   4. Cabecera: buscador
   5. Cabecera: iconos y carrito
   6. Banner principal (vídeo)
   7. Mosaico de colecciones
   8. Tarjetas de producto (toda la web)
   9. Portada: nuevos lanzamientos
  10. Portada: más vendidos
  11. Pie de página
   ===================================================================== */


/* 0. FUENTES -----------------------------------------------------------
   General Sans en toda la web: 400 texto, 500 navegación y etiquetas,
   600 títulos de producto y botones, 700 titulares. */
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');


/* 1. VARIABLES ---------------------------------------------------------
   Cambia aquí los valores y se aplican en todo el archivo. */
:root {
  /* Colores del diseño */
  --bm-black:        #0E0E1A;   /* fondos negros, botón carrito */
  --bm-ink:          #111111;   /* texto principal */
  --bm-yellow:       #F0C842;   /* amarillo de títulos y botón */
  --bm-yellow-hover: #F5D56A;
  --bm-yellow-dot:   #FDC700;   /* puntito de "YA DISPONIBLE" */
  --bm-white:        #FFFFFF;
  --bm-line:         #E0DDD8;   /* bordes */
  --bm-cream:        #F2F0EB;   /* fondo del buscador */
  --bm-sand:         #F4F2EE;   /* fondo de "Más vendidos" */
  --bm-footer-bg:    #0A0A12;   /* fondo del pie */
  --bm-footer-line:  rgba(255, 255, 255, .07);
  --bm-placeholder:  rgba(17, 17, 17, .5);
  --bm-icon-muted:   #6B6560;   /* lupa del buscador */

  /* Tipografía */
  --bm-font:         'General Sans', sans-serif;

  /* Espaciado */
  --bm-space-1:      4px;
  --bm-space-2:      8px;
  --bm-space-3:      12px;
  --bm-space-4:      16px;
  --bm-space-5:      20px;
  --bm-space-6:      24px;
  --bm-space-8:      32px;
  --bm-space-10:     40px;
  --bm-space-12:     48px;

  /* Radios */
  --bm-radius-sm:    4px;
  --bm-radius-md:    8px;
  --bm-radius-lg:    12px;
  --bm-radius-xl:    16px;
  --bm-radius-pill:  999px;

  /* Medidas de la cabecera (Figma, frame Header) */
  --bm-container:    1280px;
  --bm-header-h:     56px;
  --bm-topbar-h:     32px;
  --bm-search-w:     280px;
  --bm-search-h:     39px;

  /* Tarjetas de producto */
  --bm-muted:        #8A8A93;   /* textos secundarios */
  --bm-card-radius:  var(--bm-radius-xl);   /* esquinas de las tarjetas de producto */

  /* Medidas del banner */
  --bm-hero-h:       457px;
  --bm-gutter:       var(--bm-space-6);   /* margen lateral de banner y colecciones */

  /* Imagen de reserva del banner mientras carga el vídeo (opcional).
     Ejemplo: url('https://bestimarket.com/storage/portada/hero-fondo-1920x700.jpg') */
  --bm-hero-fallback: none;
}


/* General Sans también en lo que pinta Nest (textos, títulos y formularios) */
:root {
  --font-text:    var(--bm-font);
  --font-heading: var(--bm-font);
}
body,
button,
input,
select,
textarea,
h1, h2, h3, h4, h5, h6 { font-family: var(--bm-font); }


/* 2. BARRA SUPERIOR ----------------------------------------------------
   Figma: 32px de alto, fondo negro, texto 12/16 medium con 1.2px de tracking. */
.header-top {
  min-height: 0 !important;
  padding: 8px 0 !important;
  border: 0 !important;
  background: var(--bm-black) !important;
}
.header-top * {
  color: var(--bm-white) !important;
  font-family: var(--bm-font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.2px;
}
.header-top .header-info-right,            /* idioma y moneda */
.header-top i,
.header-top svg,
.header-top img { display: none !important; }

#news-flash,
#news-flash ul,
#news-flash li { white-space: nowrap; }
#news-flash li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  line-height: 16px !important;
}
#news-flash li a {
  margin-left: 6px;
  font-weight: 600;
  text-decoration: underline;
}


/* 3. CABECERA: FILA PRINCIPAL, LOGO Y MENÚ -----------------------------
   Figma: fila de 56px, 24px de margen lateral, 16px entre bloques.
   El JS mueve el menú junto al logo (.bm-header) y crea el logo en texto. */

/* Mismo ancho para todos los contenedores de Nest (cabecera, secciones,
   pie...), para que todo quede alineado con el banner y el mosaico. */
.container {
  max-width: var(--bm-container) !important;
  padding-left: var(--bm-gutter) !important;
  padding-right: var(--bm-gutter) !important;
}

.header-area,
.header-style-1,
.sticky-bar { margin: 0 !important; }

.header-middle,
.header-middle-ptb-1 {
  padding: 0 !important;
  background: var(--bm-white) !important;
  border-bottom: 1px solid var(--bm-line) !important;
}
.header-middle .header-wrap,
.header-middle .header-right,
.header-middle .header-action-right,
.header-middle .search-style-2,
.header-middle .main-menu {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.header-middle .header-wrap { min-height: 0 !important; }

/* Elementos de Nest que no usamos */
.hotline,
.main-categori-wrap { display: none !important; }   /* teléfono y "Browse All Categories" */

/* Logo en texto: cuadrado negro con la B + BESTIMARKET + flecha */
.header-middle .logo {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}
.header-middle .logo img { display: none !important; }   /* el logo de imagen de Nest */
.bm-logo {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  color: var(--bm-ink) !important;
  text-decoration: none !important;
}
.bm-logo-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--bm-radius-md);
  background: var(--bm-black);
  color: var(--bm-white);
  font-family: var(--bm-font);
  font-size: 18px;
  font-weight: 700;
  line-height: 18px;
}
.bm-logo-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--bm-font);
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -.2px;
}
.bm-logo-text svg { margin-top: 1px; }

/* Escritorio: todo en una fila */
@media (min-width: 992px) {
  .bm-header .header-bottom { display: none !important; }

  .bm-header .header-middle .header-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    height: var(--bm-header-h);
  }
  .bm-header .header-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
  }

  .bm-header .main-menu.bm-moved { flex: 0 0 auto; margin: 0 !important; }
  .bm-header .main-menu.bm-moved > nav > ul {
    display: flex;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .bm-header .main-menu.bm-moved > nav > ul > li {
    margin: 0 !important;
    padding: 0 !important;
  }
  .bm-header .main-menu.bm-moved > nav > ul > li > a {
    display: inline-flex !important;
    align-items: center;
    padding: 8px 10px !important;
    border-radius: 8px;
    color: var(--bm-ink) !important;
    font-family: var(--bm-font) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    letter-spacing: -.15px;
  }
  .bm-header .main-menu.bm-moved > nav > ul > li > a:hover { background: var(--bm-cream); }
  /* El diseño no lleva flechas en el menú (los desplegables siguen funcionando) */
  .bm-header .main-menu.bm-moved > nav > ul > li > a i,
  .bm-header .main-menu.bm-moved > nav > ul > li > a svg { display: none !important; }
}


/* 4. CABECERA: BUSCADOR ------------------------------------------------
   Figma: 280 × 39px, fondo crema, borde 1.5px, radio 12px, lupa de 15px
   a 10.5px del borde y texto a 36px. El JS pone la lupa del diseño. */
.search-style-2 {
  flex: 0 0 var(--bm-search-w) !important;
  width: var(--bm-search-w) !important;
  min-width: 0 !important;
  max-width: var(--bm-search-w) !important;
}
.search-style-2 form {
  position: relative;
  display: flex !important;
  align-items: center;
  height: var(--bm-search-h) !important;
  padding: 0 !important;
  background: var(--bm-cream) !important;
  border: 1.5px solid var(--bm-line) !important;
  border-radius: var(--bm-radius-lg) !important;
  overflow: hidden;
}

/* Fuera el selector "All Categories" */
.search-style-2 form select,
.search-style-2 form .select2,
.search-style-2 .select2-container,
.search-style-2 .form-group,
.search-style-2 form [class*="categor"],
.search-style-2 form > *:not(input):not(button):not(:has(input)) { display: none !important; }

/* Lupa */
.search-style-2 form button {
  position: absolute !important;
  top: 50% !important;
  left: 10.5px !important;
  right: auto !important;
  display: grid;
  place-items: center;
  width: 15px !important;
  height: 15px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  transform: translateY(-50%) !important;
}
.search-style-2 form button > :not(.bm-icon) { display: none !important; }   /* icono de Nest */

.search-style-2 form input {
  flex: 1;
  width: 100% !important;
  height: 100% !important;
  padding: 0 16px 0 36px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--bm-ink) !important;
  font-family: var(--bm-font) !important;
  font-size: 14px !important;
  letter-spacing: -.15px;
}
.search-style-2 form input::placeholder { color: var(--bm-placeholder); }


/* 5. CABECERA: ICONOS Y CARRITO ----------------------------------------
   Figma: botones de 8px de relleno con iconos de 18px, 4px entre ellos;
   carrito negro 16/8px de relleno, icono de 16px y "Carrito" 14/20 bold.
   El JS pone los iconos del diseño (.bm-icon) y oculta los de Nest. */
.header-action-2 {
  display: flex;
  align-items: center;
  gap: 4px;
}
.header-action-2 .header-action-icon-2 {
  box-sizing: border-box;
  display: flex !important;
  align-items: center;
  height: 34px;                          /* 8 + 18 + 8 */
  margin: 0 !important;
  padding: 8px !important;
  border-radius: var(--bm-radius-lg);
}
.header-action-2 .header-action-icon-2 a {
  position: static !important;
  display: flex !important;
  align-items: center;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1;
}
.header-action-2 .header-action-icon-2 a > img,
.header-action-2 .header-action-icon-2 a > svg:not(.bm-icon),
.header-action-2 .header-action-icon-2 a > i { display: none !important; }   /* iconos de Nest */
.header-action-2 .lable { display: none !important; }                        /* textos de Nest */
.header-action-icon-2:has(a[href*="compare"]) { display: none !important; }

/* Orden: usuario, favoritos, carrito */
.header-action-icon-2:has(a[href*="login"]),
.header-action-icon-2:has(a[href*="account"]),
.header-action-icon-2:has(a[href*="customer"]) { order: 1; }
.header-action-icon-2:has(a[href*="wishlist"])  { order: 2; }
.header-action-icon-2:has(a[href*="cart"])      { order: 3; }

/* Contadores (el JS añade .bm-empty cuando valen 0) */
.header-action-2 .pro-count {
  background: var(--bm-yellow) !important;
  color: var(--bm-ink) !important;
}
.pro-count.bm-empty { display: none !important; }

/* Carrito */
.header-action-2 .header-action-icon-2:has(a[href*="cart"]) {
  position: relative;
  gap: 8px;
  height: 36px;                          /* 8 + 20 + 8 */
  padding: 8px 16px !important;
  border-radius: var(--bm-radius-md);
  background: var(--bm-black);
}
.header-action-icon-2:has(a[href*="cart"]) a { gap: 8px; }
.header-action-icon-2:has(a[href*="cart"]) span:not(.pro-count) { position: static !important; }
.header-action-icon-2:has(a[href*="cart"]) .lable {
  display: inline !important;
  margin: 0 !important;
  color: var(--bm-white) !important;
  font-family: var(--bm-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px !important;
  letter-spacing: -.15px;
}
.header-action-icon-2:has(a[href*="cart"]) .pro-count {
  position: absolute !important;
  top: -7px !important;
  right: -7px !important;
  left: auto !important;
}

/* Tamaños fijos de los iconos del Figma (Nest pone los suyos más grandes) */
.bm-icon {
  display: block;
  flex: 0 0 auto;
  max-width: none !important;
}
.header-action-2 .bm-icon                                  { width: 18px !important; height: 18px !important; }
.header-action-2 .header-action-icon-2:has(a[href*="cart"]) .bm-icon { width: 16px !important; height: 16px !important; }
.search-style-2 .bm-icon                                   { width: 15px !important; height: 15px !important; }
.bm-logo-text .bm-icon                                     { width: 20px !important; height: 20px !important; }


/* 6. BANNER PRINCIPAL (VÍDEO) -----------------------------------------
   Estructura creada por el JS: .bm-hero > .bm-video-bg + .bm-hero-content
   El vídeo va en una caja con el mismo ancho que el mosaico de colecciones
   (--bm-container menos --bm-gutter a cada lado). */
.bm-hero {
  position: relative !important;
  min-height: var(--bm-hero-h);
  margin: 0 !important;
  overflow: hidden;
  border-radius: 0 !important;
  background: var(--bm-black);
}
.bm-hero > *:not(.bm-video-bg):not(.bm-hero-content) { display: none !important; }

/* Fondo: imagen de reserva + vídeo + degradado para leer el texto */
.bm-video-bg {
  --bm-side: max(var(--bm-gutter), calc((100% - var(--bm-container)) / 2 + var(--bm-gutter)));
  position: absolute;
  inset: 16px var(--bm-side) 0;
  z-index: 0;
  overflow: hidden;
  border-radius: 14px;
  pointer-events: none;
  background: var(--bm-black) var(--bm-hero-fallback) center / cover no-repeat;
}
.bm-video-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .8s ease;
}
.bm-video-bg.is-ready video { opacity: 1; }
.bm-video-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(14, 14, 26, .92) 0%,
    rgba(14, 14, 26, .7)  40%,
    rgba(14, 14, 26, .15) 100%);
}

/* Contenido */
.bm-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: var(--bm-hero-h);
}
.bm-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  max-width: var(--bm-container);
  margin: 0 auto;
  padding: 56px calc(var(--bm-gutter) + 40px) 40px;   /* texto alineado con el de las colecciones */
}

.bm-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--bm-radius-pill);
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, .8);
  font-family: var(--bm-font);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}
.bm-badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bm-yellow-dot);
  opacity: .8;
}

.bm-eyebrow {
  margin: 0;
  color: var(--bm-white);
  opacity: .45;
  font-family: var(--bm-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 4.8px;
}

.bm-title {
  margin: -10px 0 0;                 /* pega el título al "POKÉMON" como en el Figma */
  padding-top: 6px;
  color: var(--bm-white) !important;
  font-family: var(--bm-font) !important;
  font-size: clamp(44px, 5.6vw, 80px);
  font-weight: 700;
  line-height: .88;
  letter-spacing: -.02em;
}
.bm-title span { color: var(--bm-yellow); }

.bm-text {
  max-width: 448px;
  margin: 0;
  color: var(--bm-white);
  opacity: .65;
  font-family: var(--bm-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: -.3px;
}

.bm-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.bm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border-radius: 10px;
  font-family: var(--bm-font);
  font-size: 15px;
  line-height: 22.5px;
  letter-spacing: 1.5px;
  transition: all .2s ease;
}
.bm-btn-primary {
  padding-left: 32px;
  padding-right: 32px;
  background: var(--bm-yellow);
  color: var(--bm-ink) !important;
  font-weight: 700;
}
.bm-btn-primary:hover {
  background: var(--bm-yellow-hover);
  transform: translateY(-1px);
}
.bm-btn-ghost {
  border: 1.5px solid rgba(255, 255, 255, .28);
  color: rgba(255, 255, 255, .8) !important;
  font-weight: 600;
}
.bm-btn-ghost:hover {
  border-color: var(--bm-white);
  color: var(--bm-white) !important;
  background: rgba(255, 255, 255, .08);
}

@media (max-width: 768px) {
  .bm-hero,
  .bm-hero-content { min-height: 440px; }
  :root            { --bm-gutter: 16px; }
  .bm-hero-inner   { padding: 44px calc(var(--bm-gutter) + 20px) 28px; }
  .bm-text         { font-size: 15px; }
  .bm-btn          { padding: 12px 18px; font-size: 13px; }
}


/* 7. MOSAICO DE COLECCIONES -------------------------------------------
   Estructura creada por el JS: .bm-collections > .bm-collections-grid > .bm-tile
   Cada tile recibe --tile-img, --tile-shade (r, g, b) y --tile-accent. */
.bm-collections { background: var(--bm-black); }
.bm-collections-inner {
  max-width: var(--bm-container);
  margin: 0 auto;
  padding: 0 var(--bm-gutter) 16px;
}

/* Cabecera "COLECCIONES ——     VER TODAS →" */
.bm-collections-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0 8px;
}
.bm-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, .4);
  font-family: var(--bm-font);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 3px;
}
.bm-kicker i {
  width: 24px;
  height: 1px;
  background: rgba(255, 255, 255, .5);
}
.bm-view-all {
  color: rgba(255, 255, 255, .4) !important;
  font-family: var(--bm-font);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 1.44px;
  transition: color .15s ease;
}
.bm-view-all:hover { color: var(--bm-white) !important; }

/* Rejilla: 5 columnas, 2 filas */
.bm-collections-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: 110px 106px;
  gap: 6px;
}

/* Tile base */
.bm-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 14px;
  background: rgb(var(--tile-shade));
  color: var(--bm-white) !important;
}
.bm-tile::before,
.bm-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}
.bm-tile::before {                                   /* imagen */
  background: var(--tile-img, none) center / cover no-repeat;
  transition: transform .4s ease;
}
.bm-tile::after {                                    /* degradado */
  background: linear-gradient(0deg,
    rgba(var(--tile-shade), .93) 0%,
    rgba(var(--tile-shade), .5)  55%,
    rgba(var(--tile-shade), .05) 100%);
}
.bm-tile:hover::before { transform: scale(1.04); }

/* Posiciones */
.bm-tile--big   { grid-column: 1 / span 2; grid-row: 1 / span 2; justify-content: flex-end; }
.bm-tile--tall  { grid-column: 3;          grid-row: 1 / span 2; justify-content: flex-end; }
.bm-tile--wide  { grid-column: 4 / span 2; grid-row: 1; }
.bm-tile--small { grid-row: 2; }

/* Etiqueta de color */
.bm-tile-tag {
  margin-bottom: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--bm-font);
  font-size: 9px;
  font-weight: 600;
  line-height: 13.5px;
  letter-spacing: .9px;
}

/* Subtítulo (solo en el grande) */
.bm-tile-sub {
  margin-bottom: 3px;
  font-family: var(--bm-font);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 1.08px;
  text-transform: uppercase;
}

/* Título + enlace */
.bm-tile-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.bm-tile-title {
  margin: 0;
  color: var(--bm-white) !important;
  font-family: var(--bm-font) !important;
  font-weight: 700;
  letter-spacing: -.01em;
}
.bm-tile--big   .bm-tile-title { font-size: 41px;   line-height: 41px; }
.bm-tile--tall  .bm-tile-title { font-size: 23.4px; line-height: 23.4px; }
.bm-tile--wide  .bm-tile-title { font-size: 29.3px; line-height: 29.3px; }
.bm-tile--small .bm-tile-title { font-size: 16px;   line-height: 20px; }

.bm-tile-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-top: 8px;
  color: var(--tile-accent);
  font-family: var(--bm-font);
  font-size: 11px;
  font-weight: 600;
  line-height: 16.5px;
  white-space: nowrap;
}
.bm-tile-cta b {
  font-family: var(--bm-font);
  font-size: 13px;
  font-weight: 400;
  transition: transform .2s ease;
}
.bm-tile:hover .bm-tile-cta b { transform: translateX(3px); }

.bm-tile--tall .bm-tile-cta { padding-top: 18px; }   /* hueco de 10px del Figma */

/* En los pequeños, el enlace va a la derecha del título */
.bm-tile--small .bm-tile-row {
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
}

/* Tablet y móvil */
@media (max-width: 991px) {
  .bm-collections-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: minmax(150px, auto);
  }
  .bm-tile--big   { grid-column: 1 / span 2; grid-row: auto; min-height: 230px; }
  .bm-tile--tall  { grid-column: 1; grid-row: auto / span 2; justify-content: flex-end; }
  .bm-tile--wide  { grid-column: 2; grid-row: auto; }
  .bm-tile--small { grid-column: 2; grid-row: auto; }
  .bm-tile--small:last-child { grid-column: 1 / span 2; }
  .bm-tile { padding: 16px; }
  .bm-tile--big   .bm-tile-title { font-size: 32px; line-height: 32px; }
  .bm-tile--wide  .bm-tile-title { font-size: 18px; line-height: 20px; overflow-wrap: anywhere; }
  .bm-tile--small .bm-tile-row { flex-direction: column; align-items: flex-start; gap: 0; }
  .bm-tile--small:last-child .bm-tile-row { flex-direction: row; align-items: flex-end; gap: 8px; }
}



/* 8. TARJETAS DE PRODUCTO (TODA LA WEB) --------------------------------
   Tarjeta estándar de Nest: .product-cart-wrap
   La imagen de cada producto ya trae fondo, producto y bandera. */
.product-cart-wrap {
  height: auto !important;
  border: 1px solid var(--bm-line) !important;
  border-radius: var(--bm-card-radius) !important;
  background: var(--bm-white);
  box-shadow: none !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
.product-cart-wrap:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(14, 14, 26, .08) !important;
}

/* Imagen cuadrada 1:1, a sangre.
   La caja marca la proporción y la foto se ajusta a ella (posición absoluta),
   así las alturas que Nest pone por dentro no la deforman. */
.product-cart-wrap .product-img-action-wrap {
  position: relative;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;               /* Nest le pone margin-bottom: 25px */
  padding: 0 !important;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: calc(var(--bm-card-radius) - 1px) calc(var(--bm-card-radius) - 1px) 0 0;   /* radio menos el borde */
}
.product-cart-wrap .product-img,
.product-cart-wrap .product-img a {
  position: absolute !important;
  inset: 0;
  display: block;
  height: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
.product-cart-wrap .product-img img {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
}

/* Fuera lo que el diseño no lleva */
.product-cart-wrap .product-action-1,
.product-cart-wrap .product-badges,
.product-cart-wrap .product-rate-cover,
.product-cart-wrap .product-content-wrap .font-small,
.product-cart-wrap .product-content-wrap > div:has(> .font-small) { display: none !important; }

/* Textos */
.product-cart-wrap .product-content-wrap {
  height: auto !important;
  padding: 14px 12px 12px !important;
}
.product-cart-wrap .product-category {
  margin-bottom: 2px !important;
  line-height: 16px;
}
.product-cart-wrap .product-category a {
  color: var(--bm-muted) !important;
  font-family: var(--bm-font);
  font-size: 13px !important;
  font-weight: 400;
}
.product-cart-wrap .product-content-wrap h2,
.product-cart-wrap .product-content-wrap h3 {
  margin: 0 !important;
  white-space: normal !important;
}
.product-cart-wrap .product-content-wrap h2 a,
.product-cart-wrap .product-content-wrap h3 a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 38px;
  color: var(--bm-ink) !important;
  font-family: var(--bm-font) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 19px !important;
  letter-spacing: -.01em;
}

/* Precio + botón */
.product-cart-wrap .product-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 14px !important;
}
.product-cart-wrap .product-price { padding: 0 !important; }
.product-cart-wrap .product-price span {
  color: var(--bm-ink) !important;
  font-family: var(--bm-font);
  font-size: 18px !important;
  font-weight: 700;
}
.product-cart-wrap .product-price .old-price {
  margin-left: 4px;
  color: var(--bm-muted) !important;
  font-size: 12px !important;
  font-weight: 500;
  text-decoration: line-through;
}
/* Selector largo a propósito: Nest da estilo al botón con reglas más específicas */
body .product-cart-wrap .product-card-bottom .add-cart .add {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  height: auto !important;
  min-height: 0 !important;
  line-height: 15px !important;
  transform: none !important;
  padding: 7px 14px !important;
  border: 0 !important;
  border-radius: var(--bm-radius-md) !important;
  background: var(--bm-black) !important;
  font-family: var(--bm-font);
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: background .15s ease;
}
body .product-cart-wrap .product-card-bottom .add-cart .add,
body .product-cart-wrap .product-card-bottom .add-cart .add * {
  color: var(--bm-white) !important;
  -webkit-text-fill-color: var(--bm-white);
}
body .product-cart-wrap .product-card-bottom .add-cart .add:hover { background: #2A2A3A !important; }
body .product-cart-wrap .product-card-bottom .add-cart .add i { display: none !important; }


/* 9. PORTADA: NUEVOS LANZAMIENTOS -------------------------------------
   El JS marca la sección con .bm-releases y añade cabecera, barra de
   reserva (.bm-preorder) y el botón final (.bm-more). */
.bm-releases { padding: var(--bm-space-12) 0 !important; background: var(--bm-white); }

/* Cabecera de sección (se reutiliza en "Más vendidos") */
.bm-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.bm-section-title {
  margin: 0 !important;
  color: var(--bm-ink) !important;
  font-family: var(--bm-font) !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  line-height: 40px !important;
  letter-spacing: -.02em;
}
.bm-section-sub {
  margin: 6px 0 0 !important;
  color: var(--bm-muted);
  font-family: var(--bm-font);
  font-size: 16px;
  line-height: 20px;
}
.bm-section-link {
  flex: 0 0 auto;
  color: var(--bm-ink) !important;
  font-family: var(--bm-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Barra "Reserva ya" */
.bm-preorder {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 76px;                      /* alto total del Figma */
  margin-bottom: 20px;
  padding: 14px 16px 14px 18px;
  border-radius: var(--bm-radius-lg);
  background:
    linear-gradient(90deg,
      var(--bm-black)        0%,
      var(--bm-black)        30%,
      rgba(14, 14, 26, .55)  50%,
      rgba(14, 14, 26, 0)    75%),
    var(--preorder-img, none) right center / cover no-repeat,
    var(--bm-black);
  color: var(--bm-white) !important;
}
.bm-preorder-icon {
  display: grid;
  place-items: center;
  flex: 0 0 44px;                        /* igual que el bloque de texto */
  height: 44px;
  border: 1px solid rgba(240, 200, 66, .25);
  border-radius: var(--bm-radius-md);
  background: rgba(240, 200, 66, .12);
  color: var(--bm-yellow);
}
.bm-preorder-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.bm-preorder-text b {
  font-family: var(--bm-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: .5px;
}
.bm-preorder-text small {
  margin-top: 4px;
  color: rgba(255, 255, 255, .6);
  font-family: var(--bm-font);
  font-size: 16px;
  line-height: 20px;
}
.bm-preorder-btn {
  flex: 0 0 auto;
  padding: 11px 20px;
  border-radius: var(--bm-radius-md);
  background: var(--bm-yellow);
  color: var(--bm-ink);
  font-family: var(--bm-font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  transition: background .15s ease;
}
.bm-preorder:hover .bm-preorder-btn { background: var(--bm-yellow-hover); }

/* Pestañas como "pastillas" (medidas del diseño, sin efecto al pasar el ratón).
   El título de Nest se oculta: va en .bm-section-head */
.bm-releases .section-title {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.bm-releases .section-title h3,
.bm-releases .section-title h2 { display: none !important; }
.bm-releases .nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px !important;          /* aire entre pastillas y productos */
  border: 0 !important;
}
.bm-releases .nav-tabs li { margin: 0 !important; }
.bm-releases .nav-tabs .nav-link,
.bm-releases .nav-tabs .nav-link:hover,
.bm-releases .nav-tabs .nav-link:focus {
  display: inline-flex !important;
  align-items: center;
  height: 36px;
  margin: 0 !important;
  padding: 0 var(--bm-space-4) !important;
  border: 1px solid #DDDAD4 !important;
  border-radius: var(--bm-radius-pill) !important;
  background: var(--bm-white) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
  color: #55555F !important;
  font-family: var(--bm-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}
.bm-releases .nav-tabs .nav-link.active,
.bm-releases .nav-tabs .nav-link.active:hover {
  border-color: var(--bm-ink) !important;
  background: var(--bm-ink) !important;
  color: var(--bm-white) !important;
}

/* Rejilla de productos (Nuevos lanzamientos y Más vendidos).
   Sustituye las columnas de Bootstrap de Nest por una rejilla CSS:
   5 columnas, 14px de separación y sin márgenes, alineada con el resto. */
:is(.bm-releases, .bm-bestsellers) .row:has(> * > .product-cart-wrap) {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 0 !important;
}
:is(.bm-releases, .bm-bestsellers) .row:has(> * > .product-cart-wrap) > * {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
:is(.bm-releases, .bm-bestsellers) .product-cart-wrap { margin: 0 !important; }

@media (max-width: 991px) {
  :is(.bm-releases, .bm-bestsellers) .row:has(> * > .product-cart-wrap) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  :is(.bm-releases, .bm-bestsellers) .row:has(> * > .product-cart-wrap) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* Botón final */
.bm-more {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}
.bm-more-btn {
  padding: 12px 28px;
  border: 1.5px solid var(--bm-ink);
  border-radius: 10px;
  color: var(--bm-ink) !important;
  font-family: var(--bm-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  transition: all .15s ease;
}
.bm-more-btn:hover {
  background: var(--bm-ink);
  color: var(--bm-white) !important;
}

@media (max-width: 768px) {
  .bm-releases { padding: 32px 0 !important; }
  .bm-preorder { flex-wrap: wrap; }
  .bm-preorder-btn { width: 100%; text-align: center; }
  .bm-section-link  { display: none; }
  .bm-section-title { font-size: 30px !important; line-height: 32px !important; }
}



/* 10. PORTADA: MÁS VENDIDOS -------------------------------------------
   El JS marca el 2.º bloque "Colecciones de productos" con .bm-bestsellers,
   añade la cabecera y la barra final (.bm-infobar) y oculta las pestañas.
   Los números 1-5 salen con un contador CSS, en el orden de la colección. */
.bm-bestsellers {
  padding: var(--bm-space-12) 0 !important;
  background: var(--bm-sand) !important;
}
.bm-bestsellers .section-title h2,
.bm-bestsellers .section-title h3 { display: none !important; }
.bm-bestsellers .section-title {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* La rejilla es la de la sección 9 */

/* Número de ranking: 36 × 36, sobresale por la esquina superior izquierda.
   El número lo cuenta el CSS; el color lo decide el JS con data-rank="1", "2"... */
.bm-bestsellers { counter-reset: bm-rank; }
.bm-bestsellers .product-cart-wrap {
  position: relative;
  overflow: visible !important;              /* Nest recorta lo que sobresale */
  counter-increment: bm-rank;
}
.bm-bestsellers .product-cart-wrap::before {
  content: counter(bm-rank);
  position: absolute;
  top: -10px;
  left: -7px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--bm-radius-md);
  background: #E8E6E1;                       /* del 4.º en adelante */
  color: #6B6B73;
  font-family: var(--bm-font);
  font-size: 15px;
  font-weight: 700;
}
.bm-bestsellers .product-cart-wrap[data-rank="1"]::before {
  background: var(--bm-yellow);
  color: var(--bm-ink);
}
.bm-bestsellers .product-cart-wrap[data-rank="2"]::before,
.bm-bestsellers .product-cart-wrap[data-rank="3"]::before {
  background: var(--bm-black);
  color: var(--bm-yellow);
}
/* Hueco arriba para que el número no quede pegado al subtítulo */
.bm-bestsellers .row:has(> * > .product-cart-wrap) { padding-top: 10px !important; }

/* Barra final */
.bm-infobar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding: 14px 16px 14px 20px;
  border-radius: var(--bm-radius-lg);
  background: var(--bm-black);
}
.bm-infobar-text {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, .85);
  font-family: var(--bm-font);
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
}
.bm-infobar-text i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, .18);
}
.bm-infobar-btn {
  flex: 0 0 auto;
  padding: 12px 22px;
  border-radius: var(--bm-radius-md);
  background: var(--bm-yellow);
  color: var(--bm-ink) !important;
  font-family: var(--bm-font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  transition: background .15s ease;
}
.bm-infobar-btn:hover { background: var(--bm-yellow-hover); }

@media (max-width: 768px) {
  .bm-bestsellers { padding: 32px 0 !important; }
  .bm-infobar { flex-wrap: wrap; }
  .bm-infobar-btn { width: 100%; text-align: center; }
}



/* 11. PIE DE PÁGINA ---------------------------------------------------
   El JS crea el pie .bm-footer y añade .bm-footer-ready al body,
   que oculta el pie de Nest. Medidas del Figma (frame Footer). */
.bm-footer-ready footer:not(.bm-footer) { display: none !important; }

.bm-footer {
  background: var(--bm-footer-bg);
  color: var(--bm-white);
  font-family: var(--bm-font);
}
.bm-footer a { color: inherit; text-decoration: none; }
.bm-footer ul { margin: 0; padding: 0; list-style: none; }
.bm-footer-inner {
  max-width: var(--bm-container);
  margin: 0 auto;
  padding: 0 var(--bm-gutter);
}
.bm-footer-row { border-top: 1px solid var(--bm-footer-line); }
.bm-footer-row:first-child { border-top: 0; border-bottom: 1px solid var(--bm-footer-line); }

/* Franja de ventajas */
.bm-footer-perks .bm-footer-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding-top: 24px;
  padding-bottom: 24px;
}
.bm-perk {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bm-perk-icon { font-size: 24px; line-height: 32px; }
.bm-perk b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -.15px;
}
.bm-perk small {
  display: block;
  color: rgba(255, 255, 255, .45);
  font-size: 12px;
  line-height: 16px;
}

/* Marca + columnas */
.bm-footer-main {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 32px;
  padding-top: 48px;
  padding-bottom: 48px;
}
.bm-footer-brand { grid-column: 1 / span 2; }
.bm-footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--bm-font);
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -.5px;
}
.bm-footer-logo span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--bm-radius-sm);
  background: rgba(255, 255, 255, .1);
  font-size: 18px;
}
.bm-footer-brand p {
  max-width: 240px;
  margin: 16px 0 0;
  color: rgba(255, 255, 255, .45);
  font-size: 14px;
  line-height: 22.75px;
  letter-spacing: -.15px;
}
.bm-socials {
  display: flex;
  gap: 12px;
  padding-top: 16px;
}
.bm-social {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: var(--bm-radius-sm);
  color: rgba(255, 255, 255, .5) !important;
  font-family: var(--bm-font);
  font-size: 12px;
  font-weight: 600;
}
.bm-social:hover { color: var(--bm-white) !important; border-color: rgba(255, 255, 255, .4); }

.bm-footer-col h4 {
  margin: 0;
  color: rgba(255, 255, 255, .35) !important;
  font-family: var(--bm-font) !important;
  font-size: 12px !important;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 1.2px;
}
.bm-footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
}
.bm-footer-col li { line-height: 24px; }
.bm-footer-col a {
  color: rgba(255, 255, 255, .5) !important;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -.15px;
}
.bm-footer-col a:hover { color: var(--bm-white) !important; }

/* Ecosistema Besti (bajo la descripción de la marca) */
.bm-eco { padding-top: var(--bm-space-4); }
.bm-eco small {
  display: block;
  margin-bottom: var(--bm-space-1);
  color: rgba(255, 255, 255, .35);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 1.2px;
}
.bm-eco div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.bm-eco i {
  color: rgba(255, 255, 255, .25);
  font-style: normal;
}
.bm-eco-item { color: rgba(255, 255, 255, .5) !important; }
.bm-eco-item.is-current { color: var(--bm-white) !important; }
a.bm-eco-item:hover { color: var(--bm-white) !important; }

/* Boletín */
.bm-newsletter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 32px;
  padding-bottom: 32px;
}
.bm-newsletter b {
  display: block;
  font-family: var(--bm-font);
  font-size: 18px;
  font-weight: 700;
  line-height: 27px;
}
.bm-newsletter small {
  display: block;
  color: rgba(255, 255, 255, .4);
  font-size: 12px;
  line-height: 16px;
}
.bm-newsletter-form {
  position: relative;
  display: flex;
  gap: 8px;
  width: 400px;
  max-width: 100%;
  margin: 0;
}
.bm-newsletter-form input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--bm-radius-sm);
  background: rgba(255, 255, 255, .08);
  color: var(--bm-white);
  font-family: var(--bm-font);
  font-size: 14px;
  letter-spacing: -.15px;
  outline: none;
}
.bm-newsletter-form input::placeholder { color: rgba(255, 255, 255, .5); }
.bm-newsletter-form input:focus { border-color: rgba(255, 255, 255, .35); }
.bm-newsletter-form button {
  padding: 0 20px;
  border: 0;
  border-radius: var(--bm-radius-sm);
  background: var(--bm-yellow);
  color: var(--bm-ink);
  font-family: var(--bm-font);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 1.12px;
  cursor: pointer;
}
.bm-newsletter-msg {
  position: absolute;
  top: 100%;
  left: 0;
  margin: 6px 0 0;
  color: #4ADE80;
  font-size: 12px;
}
.bm-newsletter-msg.is-error { color: #FCA5A5; }

/* Copyright + legales */
.bm-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.bm-footer-bottom small,
.bm-footer-bottom a {
  color: rgba(255, 255, 255, .3) !important;
  font-size: 12px;
  line-height: 16px;
}
.bm-footer-bottom ul { display: flex; gap: 16px; line-height: 16px; }
.bm-footer-bottom a:hover { color: rgba(255, 255, 255, .7) !important; }

/* Tablet y móvil */
@media (max-width: 991px) {
  .bm-footer-perks .bm-footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bm-footer-main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bm-footer-brand { grid-column: 1 / -1; }
  .bm-newsletter { flex-direction: column; align-items: flex-start; }
  .bm-newsletter-form { width: 100%; }
}
@media (max-width: 575px) {
  .bm-footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bm-footer-bottom { flex-direction: column; align-items: flex-start; }
}