.bs-grid-header__logo img {
    max-width: 80px;
    max-height: 80px;
}

.bs-grid-header__logo {
    margin-left: 35px;
}

.bs-grid-header {
    background: #f6f6f6;

    .bs-grid-header__menu {
    background: #ffd63f;
    }

    .bs-grid-header__cart {
        background: #ffd63f;
    }

    .bs-grid-header__catalogos {
        background: #ffd63f;
    }

    .bs-grid-header__pagos {
        background: #ffd63f;
    }
}



@media screen and (min-width: 992px) {
    .navbar-toggler,
    .btn-cart,
    .btn-login,
    .btn-search,
    .btn-catalogo,
    .btn-pagos {
        color: #082863;
        border: 2px solid #082863;
        border-radius: var(--btn-border-radius);
    }
}

.navbar-toggler:hover,
.btn-cart:hover,
.btn-login:hover,
.btn-search:hover,
.btn-catalogo:hover,
.btn-pagos:hover {
    background: #7D9EF0;
    color: #ffffff;
}

.navbar-toggler,
.btn-cart,
.btn-login,
.btn-search,
.btn-catalogo,
.btn-pagos {
    color: #082863;
    background: #7D9EF0;
}

.announcement-bar {
    color: #000000;
    background: #007bff;
    border-color: #7D9EF0;
}

.announcement-bar__text {
    color: white;
}

.bs-categories__item {
    background: #7D9EF0;
}

/* Botones de catálogo y whatsapp en slider principal */ 
/* Contenedor de botones en la primera slide */
.slide-buttons {
  position: absolute;
  bottom: 10px;     
  left: 22px;       
  display: flex;
  flex-direction: column; /* botones en columna */
  gap: 6px;        
  z-index: 5;
}

/* Botones generales */
.btn-slide {
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.3s ease, transform 0.2s ease;
  width: max-content; 
}


/* WhatsApp */
.btn-whatsapp {
  background: #25d366;
  color: #fff;
}
.btn-whatsapp:hover {
  background: #1ebe57;
  transform: scale(1.05);
}

/* Catálogo */
.btn-catalogo-slider {
  background: #007bff;
  color: #fff;
}

.btn-catalogo-slider:hover {
  background: #0056b3;
  color: #fff;
  transform: scale(1.05);
}

/* ???? Versión Mobile: Botones abajo-derecha */
@media (max-width: 768px) {
  .slide-buttons {
    position: absolute;
    bottom: 35px;    /* Pegado abajo */
    right: 8px;     /* Pegado a la derecha */
    left: auto;      /* Anula posición izquierda */
    top: auto;       /* Anula posición superior */
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end; /* Alinea botones a la derecha */
  }

  .btn-slide {
    padding: 5px 11px;
    font-size: 12px;
    border-radius: 4px;
    width: max-content; /* Ajusta al contenido */
  }
}


/* formato mobile para mensaje superior de la página */
/* Versión móvil */
@media (max-width: 768px) {
  .announcement-bar {
    padding: 10px 20px 10px 20px !important;
    text-align: center;
    position: relative;
    display: flex !important;
    flex-direction: column;
    align-items: center;
  }

  /* Contenedor ícono + texto */
  .announcement-bar > div {
    display: flex;
    align-items: flex-start; /* Alinea ícono con primera línea */
    position: relative;
    width: 100%;
    justify-content: center;
    padding-right: 20px; /* Espacio para la X */
  }

  /* Texto (2 líneas) */
  .announcement-bar__text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    white-space: normal !important;
    line-height: 1.2;
    flex: 1;
    margin: 0;
  }

  /* Ícono alineado con primera línea */
  .announcement-bar__icon {
    margin-top: -12px; /* Ajuste fino de alineación */
    flex-shrink: 0;
  }

  /* Cruz de cierre */
  .announcement-bar__close {
    position: absolute !important;
    right: 0;
    top: 0.15em; /* Misma alineación que el ícono */
    margin: 0;
    padding: 6px;
  }

  /* Botón WhatsApp */
  .announcement-bar .btn {
    margin-top: -6px;
    align-self: center;
  }
}}

/* Evita que cualquier elemento se salga del ancho de la pantalla */
body, html {
  max-width: 100%;
  overflow-x: hidden;
}


/* SOLO afecta en móviles */
@media (max-width: 768px) {
  .fr-video iframe {
    width: 100% !important;   /* ocupa todo el ancho disponible */
    height: auto !important;  /* altura proporcional */
    aspect-ratio: 16 / 9;     /* mantiene proporción del video */
  }
}