/*Product list*/

#products .products,
.block_featured_slider .products,
.featured-products .products,
.product-accessories .products,
.product-miniature .products {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -moz-flex;
  display: -ms-flexbox;
  -js-display: flex;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  box-lines: multiple;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  box-pack: start;
  -moz-justify-content: flex-start;
  -ms-justify-content: flex-start;
  -o-justify-content: flex-start;
  justify-content: flex-start;
  -ms-flex-pack: start
}
#products .product-thumbnail,
.block_featured_slider .products,
.featured-products .product-thumbnail,
.product-accessories .product-thumbnail,
.product-miniature .product-thumbnail {
  display: block;
}
.description-informations,
.product_variants{
  display: none;
}
.product_thumbnail_content img{
  max-width: 100%;
}
.button_block_prtoduct_list .quick-view:hover{
  color: #3498db;
}
.button_block_prtoduct_list .quick-view{
  display: block;
  float: initial;
  /* border: 1px solid #dadada; */
  /* padding: 5px; */
  /* border-radius: 3px; */
  /* margin-left: 10px; */
  /* color: #ffffff; */
}
.button_block_prtoduct_list .product-add-to-cart{
  float: left;
}
.button_block_prtoduct_list{
  width: 100%;
  display: ruby-text;
}
.product-description{
  width: 100%;
  margin-bottom: 15px;
}
.product-description .variant-links{
  margin-left: -5px;
  margin-bottom: 13px;
}
.product-description .variant-links .color{
  width: 86px;
  height: 86px;
}
.product-flags-list{
  position: absolute;
  top: 0px;
  left: 0px;
  max-width: 110px;
  text-align: left;
  text-shadow: 2px 2px black;
}
.product-flags-list li{
  margin-bottom: 5px;
  background-color: #1a0f00;
  padding: 6px 9px;
  text-align: center;
  min-width: 60px;
  text-transform: uppercase;
  font-size: 13px;
  color: #ffffff;
  display: inline-block;
  font-weight: bold;
}
.product-flags-list .online-only{
  background-color: #3498db;
}

.product-flags-list .new{
  background-color: #9e9e9e;
}
.product-flags-list .on-sale{
  background-color: #9e9e9e;
}
.product-miniature .product-thumbnail::before{
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: block;
  content: '';
  width: 0px;
  height: 0px;
  background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0;
  opacity: 1;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  -webkit-transition: all 1s ease 0s;
  -moz-transition: all 1s ease 0s;
  -ms-transition: all 1s ease 0s;
  -o-transition: all 1s ease 0s;
  transition: all 1s ease 0s;
}
.product-miniature .product-thumbnail:hover::before {
  opacity: 0;
  width: 100%;
  height: 100%;
}
.product-miniature .product-thumbnail:hover  img{
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  -moz-transform: scale(1.1);
}
.product-miniature .product-thumbnail img {
  max-width: 100%;
  transition: all 600ms ease 0s;
  -webkit-transition: all 600ms ease 0s;
  -moz-transition: all 600ms ease 0s;
  -ms-transition: all 600ms ease 0s;
  -o-transition: all 600ms ease 0s;
}
.product_thumbnail_content{
  overflow: hidden;
  position: relative;
}


/*Product list grid*/

#products.grid .thumbnail-container,
.featured-products .thumbnail-container,
.block_featured_slider .thumbnail-container,
.product-accessories .thumbnail-container{
  position: relative;
  width: 285px;
  padding: 8px;
  /* border: 1px solid #dbb93f; */
  margin: 0 auto;
  background-color: #22112222;
}
#products.grid .product-miniature,
.featured-products .product-miniature,
.block_featured_slider .product-miniature,
.product-accessories .product-miniature{
  padding: 10px;
  margin: 0 auto;
}
#products.grid .products-section-title,
.featured-products .products-section-title,
.block_featured_slider .products-section-title,
.product-accessories .products-section-title{
 /*text-align: center; */
  margin-bottom: 1.5rem
}
#products.grid .product_thumbnail_content,
.featured-products .product_thumbnail_content,
.block_featured_slider .product_thumbnail_content,
.product-accessories .product_thumbnail_content{
  margin-bottom: 15px;
  position: relative;
}

/*Product list list*/

#products.list .product-miniature{
  width: 100%;
  padding: 10px;
}
#products.list .product_variants{
  display: block;
      margin-bottom: 15px;
	  font-size: 14px;
}
#products.list .description-informations{
  display: block;
}
#products.list .product_thumbnail_content{
  border: 1px solid #dbb93f;
  width: 285px;
  float: left;
  position: relative;
  height: 285px;
  padding: 8px;
}
#products.list .highlighted-informations{
  float: left;
  width: calc( 100% - 285px);
  padding-left: 30px;
}
#products.list .thumbnail-container{
  border-bottom: 1px solid #f0f0f0;
  position: relative;
  padding: 5px 0px 25px 0px;
  /* background-color: #fff; */
}
#products.list .product-flags-list{
  top: 10px;
  left: 10px;
}



/* ===== FORZAR LIST FIJO SIN TOCAR ESTRUCTURA ===== */

/* Ocultar el botón grid */
.display_list_grid .grid,
.display_list_grid li.grid,
#grid,
[data-view="grid"] {
  display: none !important;
}

/* Dejar visible el list */
.display_list_grid .list,
.display_list_grid li.list {
  display: block !important;
}

/* Marcar list como activo visualmente */
.display_list_grid .list a,
.display_list_grid li.list a {
  pointer-events: none !important;
  cursor: default !important;
}

/* Aunque entre con clase grid, que use la apariencia de list */
#products.grid .product-miniature {
  width: 100%;
  padding: 10px;
}

#products.grid .product_variants {
  display: block;
  margin-bottom: 15px;
  font-size: 14px;
}

#products.grid .description-informations {
  display: block;
}

#products.grid .product_thumbnail_content {
  border: 1px solid #dbb93f;
  width: 285px;
  float: left;
  position: relative;
  height: 285px;
  padding: 8px;
}

#products.grid .highlighted-informations {
  float: left;
  width: calc(100% - 285px);
  padding-left: 30px;
}

#products.grid .thumbnail-container {
  border-bottom: 1px solid #f0f0f0;
  position: relative;
  /* padding: 5px 0px 25px 0px; */
  width: 100%;
  margin: 0;
  background: transparent;
}

#products.grid .product-flags-list {
  top: 10px;
  left: 10px;
}


/* =========================================
   AJUSTE SOLO MÓVIL PARA PRODUCT-LIST
   (sin tocar la estructura existente)
========================================= */
@media (max-width: 767px) {

  #products.list .product-miniature,
  #products.grid .product-miniature {
    width: 100%;
    padding: 10px 0;
  }

  #products.list .thumbnail-container,
  #products.grid .thumbnail-container {
    width: 100%;
    margin: 0;
    padding: 10px 0 20px 0;
    box-sizing: border-box;
  }

  #products.list .product_thumbnail_content,
  #products.grid .product_thumbnail_content {
    width: 100%;
    height: auto;
    float: none;
    display: block;
    margin: 0 0 15px 0;
    padding: 8px;
    box-sizing: border-box;
  }

  #products.list .product-thumbnail,
  #products.grid .product-thumbnail {
    display: block;
    width: 100%;
  }

  #products.list .product-thumbnail img,
  #products.grid .product-thumbnail img,
  #products.list .product_thumbnail_content img,
  #products.grid .product_thumbnail_content img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
  }

  #products.list .highlighted-informations,
  #products.grid .highlighted-informations {
    width: 100%;
    float: none;
    display: block;
    padding-left: 0;
    box-sizing: border-box;
  }

  #products.list .product-description,
  #products.grid .product-description {
    width: 100%;
    margin-bottom: 10px;
  }

  #products.list .button_block_prtoduct_list,
  #products.grid .button_block_prtoduct_list {
    width: 100%;
    clear: both;
  }

  #products.list .button_block_prtoduct_list .product-add-to-cart,
  #products.grid .button_block_prtoduct_list .product-add-to-cart,
  #products.list .button_block_prtoduct_list .quick-view,
  #products.grid .button_block_prtoduct_list .quick-view {
    float: none;
    display: inline-block;
    margin: 0 8px 8px 0;
  }

  #products.list .product_variants,
  #products.grid .product_variants {
    margin-bottom: 10px;
  }

  #products.list .product-flags-list,
  #products.grid .product-flags-list {
    top: 10px;
    left: 10px;
    max-width: calc(100% - 20px);
    z-index: 3;
  }

  #products.list .product-flags-list li,
  #products.grid .product-flags-list li {
    font-size: 11px;
    padding: 5px 7px;
    min-width: auto;
  }

  #products.list .thumbnail-container::after,
  #products.grid .thumbnail-container::after,
  #products.list .product-miniature::after,
  #products.grid .product-miniature::after {
    content: "";
    display: block;
    clear: both;
  }
}

/* ============================================================
   FIX COMPLETO CARRUSEL PRODUCTOS RELACIONADOS / MISMA CATEGORÍA
   PrestaShop 1.7.8 + Flatshop + Slick
   PONER AL FINAL DE product_list.css
============================================================ */


/* 1. Evitar que el flex general del product_list rompa Slick */
#product .products.slick-initialized,
#product .product-accessories .products.slick-initialized,
#product .featured-products .products.slick-initialized,
#product .block_featured_slider .products.slick-initialized {
  display: block !important;
  flex-wrap: nowrap !important;
  -ms-flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  box-sizing: border-box !important;
}


/* 2. Estructura obligatoria de Slick */
#product .products.slick-initialized .slick-list {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#product .products.slick-initialized .slick-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  -ms-flex-wrap: nowrap !important;
  align-items: stretch !important;
  position: relative !important;
  box-sizing: border-box !important;
}

#product .products.slick-initialized .slick-slide {
  float: none !important;
  display: block !important;
  height: auto !important;
  min-height: 1px !important;
  box-sizing: border-box !important;
}


/* 3. Arreglo para el <strong> que Slick está cogiendo como slide */
#product .products.slick-initialized .slick-track > strong.slick-slide {
  display: contents !important;
  font-weight: inherit !important;
  color: inherit !important;
  text-decoration: none !important;
}


/* 4. Cada producto debe comportarse como tarjeta horizontal del carrusel */
#product .products.slick-initialized .slick-track > article.product-miniature,
#product .products.slick-initialized .slick-track > strong.slick-slide > article.product-miniature,
#product .products.slick-initialized article.product-miniature.slick-slide {
  flex: 0 0 313px !important;
  width: 313px !important;
  max-width: 313px !important;
  min-width: 313px !important;
  padding: 10px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
}


/* 5. Tarjeta del producto dentro del carrusel */
#product .products.slick-initialized .thumbnail-container {
  width: 100% !important;
  max-width: 285px !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 8px !important;
  position: relative !important;
  box-sizing: border-box !important;
  background-color: #22112222 !important;
}


/* 6. Imagen correcta */
#product .products.slick-initialized .product_thumbnail_content {
  width: 100% !important;
  height: auto !important;
  float: none !important;
  display: block !important;
  overflow: hidden !important;
  position: relative !important;
  margin-bottom: 15px !important;
  box-sizing: border-box !important;
}

#product .products.slick-initialized .product-thumbnail {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

#product .products.slick-initialized .product-thumbnail img,
#product .products.slick-initialized .product_thumbnail_content img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}


/* 7. Texto, precio y botones sin romper la tarjeta */
#product .products.slick-initialized .highlighted-informations {
  float: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
}

#product .products.slick-initialized .product-description {
  width: 100% !important;
  margin-bottom: 10px !important;
  display: block !important;
}

#product .products.slick-initialized .description-informations {
  display: none !important;
}

#product .products.slick-initialized .product-title,
#product .products.slick-initialized .product-title a {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  line-height: 18px !important;
  min-height: 36px !important;
}


/* 8. Botones estables */
#product .products.slick-initialized .button_block_prtoduct_list {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  clear: both !important;
  box-sizing: border-box !important;
}

#product .products.slick-initialized .button_block_prtoduct_list .product-add-to-cart {
  float: none !important;
  display: block !important;
}

#product .products.slick-initialized .button_block_prtoduct_list .quick-view {
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* 9. Flechas Slick por encima */
#product .products.slick-initialized .slick-arrow,
#product .slick-prev-products,
#product .slick-next-products {
  z-index: 20 !important;
}


/* 10. Evitar que clears internos corten el carrusel */
#product .products.slick-initialized .thumbnail-container > div[style*="clear"] {
  display: none !important;
}


/* 11. Responsive tablet */
@media (max-width: 991px) {
  #product .products.slick-initialized .slick-track > article.product-miniature,
  #product .products.slick-initialized .slick-track > strong.slick-slide > article.product-miniature,
  #product .products.slick-initialized article.product-miniature.slick-slide {
    flex: 0 0 250px !important;
    width: 250px !important;
    max-width: 250px !important;
    min-width: 250px !important;
  }

  #product .products.slick-initialized .thumbnail-container {
    max-width: 230px !important;
  }
}


/* 12. Responsive móvil */
@media (max-width: 767px) {
  #product .products.slick-initialized .slick-track > article.product-miniature,
  #product .products.slick-initialized .slick-track > strong.slick-slide > article.product-miniature,
  #product .products.slick-initialized article.product-miniature.slick-slide {
    flex: 0 0 220px !important;
    width: 220px !important;
    max-width: 220px !important;
    min-width: 220px !important;
    padding: 8px !important;
  }

  #product .products.slick-initialized .thumbnail-container {
    max-width: 205px !important;
  }

  #product .products.slick-initialized .product-title,
  #product .products.slick-initialized .product-title a {
    font-size: 13px !important;
    line-height: 16px !important;
    min-height: 32px !important;
  }
}