/*

TemplateMo 559 Zay Shop

https://templatemo.com/tm-559-zay-shop

---------------------------------------------
Table of contents
------------------------------------------------
1. Typography
2. General
3. Nav
4. Hero Carousel
5. Accordion
6. Shop
7. Product
8. Carousel Hero
9. Carousel Brand
10. Services
11. Contact map
12. Footer
13. Small devices (landscape phones, 576px and up)
14. Medium devices (tablets, 768px and up)
15. Large devices (desktops, 992px and up)
16. Extra large devices (large desktops, 1200px and up)
--------------------------------------------- */




/* Typography */
body, ul, li, p, a, label, input, div {
  font-family: 'Roboto', sans-serif;
  font-size: 18px !important;
  font-weight: 300 !important;
}
.h1 {
  font-family: 'Roboto', sans-serif;
  font-size: 48px !important;
  font-weight: 200 !important;
}
.h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 30px !important;
  font-weight: 300;
}
.h3 {
  font-family: 'Roboto', sans-serif;
  font-size: 22px !important;
}
/* General */
.logo { font-weight: 500 !important;}
.text-warning {  color: #ede861 !important;}
.text-muted { color: #bcbcbc !important;}
.text-success { color: #C00000 !important;}
.text-light { color: #cfd6e1 !important;}
.bg-dark { background-color: #000000 !important;}
.bg-light { background-color: #969696 !important;}
.bg-black { background-color: #000000 !important;}
.bg-success { background-color: #C00000 !important;}
.btn-success {
  background-color: #C00000 !important;
  border-color: #b62020 !important;
}
.pagination .page-link:hover {color: #000;}
.pagination .page-link:hover, .pagination .page-link.active {
  background-color: #b62020;
  color: #fff;
}
/* Nav */
#templatemo_nav_top { min-height: 40px;}
#templatemo_nav_top * { font-size: .9em !important;}
#templatemo_main_nav a { color: #212934;}
#templatemo_main_nav a:hover { color: #b62020;}
#templatemo_main_nav .navbar .nav-icon { margin-right: 20px;}

/* Hero Carousel */
#template-mo-zay-hero-carousel { background: #efefef !important;}
/* Accordion */
.templatemo-accordion a { color: #000;}
.templatemo-accordion a:hover { color: #333d4a;}
/* Shop */
.shop-top-menu a:hover { color: #b62020 !important;}
/* Product */
.product-wap { box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.10);}
.product-wap .product-color-dot.color-dot-red { background:#f71515;}
.product-wap .product-color-dot.color-dot-blue { background:#6db4fe;}
.product-wap .product-color-dot.color-dot-black { background:#000000;}
.product-wap .product-color-dot.color-dot-light { background:#e0e0e0;}
.product-wap .product-color-dot.color-dot-green { background:#0bff7e;}
.card.product-wap .card .product-overlay {
  background: rgba(0,0,0,.2);
  visibility: hidden;
  opacity: 0;
  transition: .3s;
}
.card.product-wap:hover .card .product-overlay {
  visibility: visible;
  opacity: 1;
}
.card.product-wap a { color: #000;}
#carousel-related-product .slick-slide:focus { outline: none !important;}
#carousel-related-product .slick-dots li button:before {
  font-size: 15px;
  margin-top: 20px;
}
/* Brand */
.brand-img {
  filter: grayscale(100%);
  opacity: 0.5;
  transition: .5s;
}
.brand-img:hover {
  filter: grayscale(0%);
  opacity: 1;
}
/* Carousel Hero */
#template-mo-zay-hero-carousel .carousel-indicators li {
  margin-top: -50px;
  background-color: #C00000;
}
#template-mo-zay-hero-carousel .carousel-control-next i,
#template-mo-zay-hero-carousel .carousel-control-prev i {
  color: #C00000 !important;
  font-size: 2.8em !important;
}
/* Carousel Brand */
.tempaltemo-carousel .h1 {
  font-size: .5em !important;
  color: #000 !important;
}
/* Services */
.services-icon-wap {transition: .3s;}
.services-icon-wap:hover, .services-icon-wap:hover i {color: #fff;}
.services-icon-wap:hover {background: #b62020;}
/* Contact map */
.leaflet-control a, .leaflet-control { font-size: 10px !important;}
.form-control { border: 1px solid #e8e8e8;}
/* Footer */
#tempaltemo_footer a { color: #dcdde1;}
#tempaltemo_footer a:hover { color: #b62020;}
#tempaltemo_footer ul.footer-link-list li { padding-top: 10px;}
#tempaltemo_footer ul.footer-icons li {
  width: 2.6em;
  height: 2.6em;
  line-height: 2.6em;
}
#tempaltemo_footer ul.footer-icons li:hover {
  background-color: #cfd6e1;
  transition: .5s;
}
#tempaltemo_footer ul.footer-icons li:hover i {
  color: #212934;
  transition: .5s;
}
#tempaltemo_footer .border-light { border-color: #2d343f !important;}
/*
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
*/
/* Small devices (landscape phones, 576px and up)*/
.product-wap .h3, .product-wap li, .product-wap i, .product-wap p {
  font-size: 12px !important;
}
.product-wap .product-color-dot {
  width: 6px;
  height: 6px;
}

.dropdown {
  display: none;
  position: absolute;
  background-color: white;
  border-radius: 10px;
  border: 1px solid #ccc;
  z-index: 1;
  padding: 10px;
  margin-top: 5px;
}
.nav-icon:hover .dropdown {
  display: block;
}

#mensaje_email{
  font-family: Arial;
  font-size: 12px;
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}
.primera_linea{
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #b62020;
}

/* Estilos generales para el menú del carrito */
.carrito-panel {
  position: fixed;
  top: 0;
  right: -33.33%; /* Oculto inicialmente fuera de la pantalla */
  width: 33.33%; /* 1/3 de la pantalla */
  height: 100%;
  background-color: white;
  border-left: 1px solid #ddd;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
  padding: 20px;
  transition: right 0.3s ease-in-out;
  z-index: 1000;
}

.carrito-panel.visible {
  right: 0; /* Muestra el carrito deslizándolo desde la derecha */
}

/* Estilos del botón y del contenido */
.carrito-panel h3 {
  margin-top: 0;
}

.carrito-panel ul {
  list-style-type: none;
  padding: 0;
}

.carrito-panel ul li {
  margin: 10px 0;
}

.carrito-panel ul li {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.carrito-imagen {
  width: 100px;       /* Tamaño de la imagen en miniatura */
  height: 150px;
  object-fit: cover; /* Ajuste de la imagen */
  margin-right: 10px;
  border-radius: 5px;
}

.eliminar-btn {
  background-color: #ff4d4d;
  color: white;
  border: none;
  padding: 5px 10px;
  margin-left: 10px;
  cursor: pointer;
  border-radius: 3px;
}

.eliminar-btn:hover {
  background-color: #ff3333;
}

.eliminar-btn {
  background-color: #ff4d4d;
  color: white;
  border: none;
  padding: 5px 10px;
  margin-left: 10px;
  cursor: pointer;
  border-radius: 3px;
}

.eliminar-btn:hover {
  background-color: #ff3333;
}

.comprar-btn {
  background-color: #2B2A29;
  color: white;
  border: none;
  padding: 5px 10px;
  margin-left: 10px;
  cursor: pointer;
  border-radius: 3px;
}

.comprar-btn:hover {
  background-color: black;
}

.comprar_total {
  display: flex;
  align-items: center;
}

#boton-comprar,#cerrar-cupones ,.ver-cupones-btn{
  background-color: #ff4d4d;
  color: white;
  border: none;
  padding: 5px 10px;
  margin-left: 10px;
  cursor: pointer;
  border-radius: 3px;
}
#cerrar-cupones{
  margin-top: 15px;
}
#boton-comprar:hover,#cerrar-cupones:hover ,.ver-cupones-btn:hover{
  background-color: #ff3333;
}

#boton-comprar:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.historial-panel {
  position: fixed;
  top: 0;
  right: -33.33%; /* Oculto inicialmente fuera de la pantalla */
  width: 33.33%; /* 1/3 de la pantalla */
  height: 100%;
  background-color: white;
  border-left: 1px solid #ddd;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
  padding: 20px;
  transition: right 0.3s ease-in-out;
  z-index: 1000;
}

.historial-panel.visible {
  right: 0; /* Muestra el historial deslizándolo desde la derecha */
}

/* Estilos del botón y del contenido */
.historial-panel h3 {
  margin-top: 0;
}

.historial-panel ul {
  list-style-type: none;
  padding: 0;
}

.historial-panel ul li {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.historial-imagen {
  width: 100px;       /* Tamaño de la imagen en miniatura */
  height: 150px;
  object-fit: cover; /* Ajuste de la imagen */
  margin-right: 10px;
  border-radius: 5px;
}

.historial-panel.visible {
  display: block;
}

/* Estilo para el modal */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-contenido {
  background-color: white;
  margin: 15% auto;
  padding: 20px;
  width: 80%;
  max-width: 600px;
}

.cerrar {
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  top: 0;
  right: 25px;
  padding: 10px;
}

.cerrar:hover,
.cerrar:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

#cupones-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  z-index: 1001; /* Asegurarse de que esté encima del fondo */
  border-radius: 10px;
  padding: 20px;
  width: 80%; /* Ajusta el tamaño de la página */
  max-width: 1200px; /* Tamaño máximo para pantallas grandes */
  display: none;
}

#cupones-panel.visible {
  display: block;  
}

#lista-cupones {
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 5 cupones por fila */
  gap: 20px; /* Espaciado entre los cupones */
  padding: 0;
  margin: 0;
}

#lista-cupones li {
  background-color: #f8f8f8;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#lista-cupones li:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

#lista-cupones img {
  width: 100%;
  border-radius: 8px;
  height: auto;
}

#lista-cupones div {
  margin-top: 10px;
}

#lista-cupones div strong {
  display: block;
  font-size: 1.2rem;
  color: #333;
}

#lista-cupones div code {
  display: block;
  margin-top: 5px;
  font-size: 1.1rem;
  color: #555;
}

.cupones-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  max-width: 80%;
  max-height: 80%;
  overflow-y: auto;
  display: none; /* Oculto por defecto */
}

.cupones-panel.visible {
  display: block;
}

.cupon-imagen {
  width: 100px;
  height: auto;
  margin-right: 10px;
}

.thumbnail-image {
  width: 10rem;  /* Ajusta el tamaño aquí */
  height: 12rem; /* Ajusta el tamaño aquí */
  object-fit: cover; /* Mantiene la proporción y evita deformaciones */
  cursor: pointer; /* Apunta al usuario que es interactivo */
}
.product-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
}

.product-container .image-gallery {
  flex: 1 1 40%;
  padding-right: 15px;
}

.product-container .image-gallery img {
  width: 100%; /* Ajusta la imagen a la caja */
  height: auto;
}

.product-container .details {
  flex: 1 1 55%;
  padding-left: 15px;
}

@media (min-width: 576px) {
  .tempaltemo-carousel .h1 { font-size: 1em !important;}
}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  #templatemo_main_nav .navbar-nav {max-width: 450px;}
 }

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  #templatemo_main_nav .navbar-nav {max-width: 550px;}
  #template-mo-zay-hero-carousel .carousel-item {min-height: 30rem !important;}
  .product-wap .h3, .product-wap li, .product-wap i, .product-wap p {font-size: 18px !important;}
  .product-wap .product-color-dot {
    width: 12px;
    height: 12px;
  }
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {}