/*
 * GeSmart Theme Config 0.4.0
 * Homepage Evoluta.
 *
 * Caricato soltanto quando la Homepage Evoluta
 * è attiva per il negozio corrente.
 */


/* ==========================================================
   BASE HOMEPAGE
   ========================================================== */

#index #wrapper{
  background:#f7f7f5;
  padding-top:28px
}

#index #wrapper > .container{
  width:100%;
  max-width:1240px
}


/* ==========================================================
   HERO NATIVO PS_IMAGESLIDER
   ========================================================== */

#index #carousel{
  overflow:hidden;
  margin:0 0 44px;
  border-radius:24px;
  background:#fff;
  box-shadow:0 18px 50px rgba(38,50,56,.08)
}

#index #carousel .carousel-inner,
#index #carousel .carousel-item,
#index #carousel figure{
  margin:0;
  border-radius:inherit
}

#index #carousel figure{
  overflow:hidden
}

#index #carousel img{
  display:block;
  width:100%;
  height:auto
}

#index #carousel .caption{
  right:auto;
  bottom:42px;
  left:42px;
  max-width:520px;
  padding:22px 26px;
  border-radius:16px;
  background:rgba(255,255,255,.92);
  color:var(--gstc-menu-text,#263238);
  box-shadow:0 12px 34px rgba(38,50,56,.10)
}

#index #carousel .caption h2{
  margin:0 0 8px;
  color:var(--gstc-menu-text,#263238);
  font-size:30px;
  line-height:1.1;
  font-weight:600;
  letter-spacing:-.02em;
  text-transform:none!important
}

#index #carousel .caption-description{
  color:#70777b;
  font-size:14px;
  line-height:1.55
}

#index #carousel .carousel-indicators{
  bottom:14px
}

#index #carousel .carousel-indicators li{
  width:7px;
  height:7px;
  margin:0 4px;
  border:0;
  border-radius:999px;
  background:rgba(38,50,56,.25)
}

#index #carousel .carousel-indicators li.active{
  width:22px;
  background:var(--gstc-accent,#718894)
}


/* ==========================================================
   INTRO EDITORIALE
   ========================================================== */

#index .gstc-homepage{
  width:100%;
  padding-bottom:42px
}

#index .gstc-homepage__intro{
  max-width:840px;
  margin:4px auto 56px;
  padding:0 24px;
  text-align:center
}

#index .gstc-homepage__eyebrow{
  margin-bottom:12px;
  color:var(--gstc-accent,#718894);
  font-size:12px;
  line-height:1.4;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase
}

#index .gstc-homepage__title{
  margin:0;
  color:var(--gstc-menu-text,#263238);
  font-size:36px;
  line-height:1.12;
  font-weight:600;
  letter-spacing:-.025em;
  text-transform:none
}

#index .gstc-homepage__subtitle{
  max-width:700px;
  margin:18px auto 0;
  color:#70777b;
  font-size:15px;
  line-height:1.7
}


/* ==========================================================
   MODULI DISPLAYHOME ESISTENTI
   ========================================================== */

#index .gstc-homepage__modules > .featured-products{
  position:relative;
  margin:0 0 54px!important;
  padding-top:38px;
  border-top:1px solid #e4e6e7
}

#index .gstc-homepage__modules > .featured-products:first-child{
  padding-top:0;
  border-top:0
}

#index .gstc-homepage__modules .products-section-title{
  margin:0 0 28px;
  color:var(--gstc-menu-text,#263238);
  font-size:30px;
  line-height:1.15;
  font-weight:600;
  letter-spacing:-.02em;
  text-align:left;
  text-transform:none!important
}

#index .gstc-homepage__modules .all-product-link{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-top:24px;
  padding:10px 15px;
  border:1px solid #e1e4e6;
  border-radius:999px;
  background:#fff;
  color:var(--gstc-menu-text,#263238)!important;
  font-size:12px;
  font-weight:600;
  text-transform:none
}

#index .gstc-homepage__modules .all-product-link:hover{
  border-color:var(--gstc-accent,#718894);
  color:var(--gstc-accent,#718894)!important;
  text-decoration:none
}

#index .gstc-homepage__modules .all-product-link .material-icons{
  margin:0;
  font-size:18px
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:767px){

  #index #wrapper{
    padding-top:14px
  }

  #index #carousel{
    margin-bottom:28px;
    border-radius:14px
  }

  #index #carousel .caption{
    right:14px;
    bottom:18px;
    left:14px;
    max-width:none;
    padding:15px 17px;
    border-radius:12px
  }

  #index #carousel .caption h2{
    font-size:22px
  }

  #index .gstc-homepage__intro{
    margin-bottom:38px;
    padding:0 10px
  }

  #index .gstc-homepage__title{
    font-size:29px
  }

  #index .gstc-homepage__subtitle{
    font-size:14px
  }

  #index .gstc-homepage__modules > .featured-products{
    margin-bottom:40px!important;
    padding-top:30px
  }

  #index .gstc-homepage__modules .products-section-title{
    margin-bottom:22px;
    font-size:25px
  }
}


/* ==========================================================
   GSTC_HOMEPAGE_PRODUCT_GRID_P3B1
   Sezioni prodotto Homepage Evoluta.

   Usa tutta la larghezza disponibile senza modificare
   catalogo, ricerca, lista o vista compatta.
   ========================================================== */

@media (min-width:768px){

  #index .gstc-homepage__modules{
    width:100%
  }

  #index .gstc-homepage__modules > .featured-products{
    width:100%;
    max-width:none;
    float:none
  }









  #index .gstc-homepage__modules
    .products-section-title{
    width:100%;
    margin-bottom:26px;
    text-align:left
  }

  #index .gstc-homepage__modules
    .all-product-link{
    float:none!important;
    margin-top:26px
  }
}

@media (max-width:767px){




}


/* ==========================================================
   GSTC_HOMEPAGE_FULL_WIDTH_P3B2
   Homepage Evoluta a larghezza piena.

   Il layout PrestaShop può assegnare alla index il template
   layout-left-column. Quando questa feature è attiva,
   la colonna laterale viene esclusa e il contenuto principale
   utilizza l'intera larghezza del container.
   ========================================================== */

body#index.layout-left-column #left-column{
  display:none!important
}

body#index.layout-left-column #content-wrapper{
  flex:0 0 100%!important;
  width:100%!important;
  max-width:100%!important
}

body#index.layout-left-column
  #content-wrapper.left-column{
  float:none!important
}