/*
Theme Name: Grismondi Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
:root {
  --azzurro: #009EE2;
  --fucsia: #E5007E;
  --giallo: #FFEC00;
  --antracite: #1C1C26;
  --ardesia: #505872;
  --avorio: #FFFAF0;
  --bianco: #fff;
  --container-width: 1530px;
  --gutter: 20px;
  --col-strip-width: 64px; 
  --edge: max(20px, calc((100vw - var(--container-width)) / 2));  
}

html{
    font-size: 18px;
}
body{
    line-height: 1.2 !important;
}
.h1, .h2, h1, h2 {
    line-height: 1.15 !important;
}
h1, h2, h3, h4, #masthead .nav>li>a,
#masthead .nav-dropdown>li>a{
    font-family: "Arboria", sans-serif;
}
p, ul li{
    font-family: "Figtree", sans-serif;
}
h1, .h1{
    font-size: 2.75rem;
    font-weight: 700;
    color: var(--antracite);
}
h2, .h2{
    font-size: 2.11rem;
    font-weight: 700;
    color: var(--antracite);    
}
h3, .h3{
    font-size: 1.44rem;
    font-weight: 500;
    color: var(--antracite);     
}
p{
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--ardesia); 
}
ul li{
    font-size: 1.2rem;
    font-weight: 400;
}
ul{
    margin: 24px 0;
}
.tag-title {
    font-size: 1.2rem;
    display: inline-block;
    position: relative;
    line-height: 1;
    z-index: 1;
    margin-bottom: 10px;
}
.tag-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 10px;
    /* background-color: #ffed00; */
    z-index: -1;
}
.tag-title.undergiallo::after{
    background-color: var(--giallo);
}
.tag-title.underazzurro::after{
    background-color: var(--azzurro);
}
.margineb .tag-title{
    margin-bottom: 0 !important;
}
h1, h2, h3, h4, h5, h6,
p{
    margin-bottom: 0;
}
.dark p,
.white.button.is-outline{
    color: var(--avorio);
}
h1 + p,
h2 + p,
h3 + p,
.stack-btn{
    margin-top: 32px;
}
.box-text p,
a.button {
    margin-bottom: 0 !important;
}
.row-h3-underline h3{
    width: auto;
}
p + p{
    padding-top: 24px;
}
p + a.button{
    margin-top: 24px !important;
}
.azzurro{
    color: var(--azzurro);
}
.giallo{
    color: var(--giallo);   
}
.avorio{
    color: var(--avorio);
}
.fucsia, .header-nav li.active>a{
    color: var(--fucsia) !important;
}
.bg-giallo{
    background-color: var(--giallo);
    color: var(--antracite);
}
#masthead .nav>li>a,
#masthead .nav-dropdown>li>a{
    color: var(--antracite);
    font-size: 1.10rem;
}
#masthead .nav>li{
    margin: 0 10px;
}
section{
    padding-top: 120px !important;
    padding-bottom: 120px !important;
}
.box-text .box-text-inner{
    padding: 32px;
}
.box-text{
    padding: 0;
}
.margineb{
    margin-bottom: 32px;
}
.row-fullwidth-left > .col:first-child{
    padding-left: max(15px, calc((100vw - 1300px) / 2));
    padding-right: 30px;    
}
.row-fullwidth-right > .col:nth-child(2){
    padding-right: max(15px, calc((100vw - 1300px) / 2));
    padding-left: 30px;    
}
/* immagini traslate */
.text-image__bg {
    width: 75.90909%;
    position: absolute;
    top: 0;
    left: 23px;
    bottom: 0;
    margin: auto;
    background: var(--bianco);
    z-index: -1;
    border: 2px solid var(--antracite);
}
.text-image__bg.destra{
    right: 0;
    left: 0;
    margin-right: 0;

}
.text-image__wrapper {
    width: calc(100% + 20px);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin: 0 -10px;
    position: relative;
    z-index: 0;
}
.immagine-up,
.immagine-up img {
    height: 100% !important;
    width: 100%;
    object-fit: cover;
    object-position: center; 
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);       
}

/* fine img traslate */
.sezioni-background{
    position: relative;
    overflow: hidden; /* per contenere eventuali sbordi dei simboli */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;    
}
.bg-azienda {
    background-image: url("https://www.grismondi.sviluppo.host/wp-content/uploads/bg-sfondo-azienda.jpg");
}
.bg-uomo {
    background-image: url("https://www.grismondi.sviluppo.host/wp-content/uploads/bg-sfondo-categoria-uomo.jpg");
}

.sezioni-background::before,
.sezioni-background::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 67px;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 1;
    pointer-events: none;
    background-image: url("https://www.grismondi.sviluppo.host/wp-content/uploads/segno-up.svg");
}

/* simbolo in alto a destra */
.sezioni-background::before {
    top: 0px;
    right: 5px;
}

/* simbolo in basso a sinistra */
.sezioni-background::after {
    bottom: 0px;
    left: 5px;
    transform: rotate(180deg);
}
.section-footer{
    padding-top: 64px !important;
    padding-bottom: 64px !important;
}
#footer p{
    font-size: 19px;
}
.col-social .stack .img{
    width: 30px !important;
}
.slider-style-focus .flickity-slider>:not(.is-selected){
    opacity: 1;
}
.gallery-prodotti .flickity-prev-next-button{
    display: none;
}
.gallery-prodotti + p{
    background-color: var(--fucsia);
}
.gallery-prodotti-uomo + p{
    background-color: var(--azzurro);
}
.gallery-bambini + p{
    background-color: var(--giallo);
    color: var(--antracite);
    padding: 12px;
}
.gallery-prodotti + p,
.gallery-prodotti-uomo + p{
    padding: 12px;
    color: var(--bianco);
}
.pr-0{
    padding-right: 0;
}
.pl-0{
    padding-left: 0;
}
.slide-prodotti .flickity-prev-next-button,
.slide-prodotti-dx .flickity-prev-next-button,
.slide-prodotti-sx .flickity-prev-next-button{
    opacity: 1 !important;
    top: 100%;
    width: 48px;
    height: 48px;
    margin-top: 24px;
    transform: translateX(0) !important;
}
.slide-prodotti .next{
    left: 15%;
    right: 0;
}
.slide-prodotti-dx .flickity-prev-next-button.previous,
.slide-prodotti-sx .flickity-prev-next-button.previous{
    left: auto;
    right: 13%;   
}
.slide-prodotti .flickity-prev-next-button svg,
.slide-prodotti-dx .flickity-prev-next-button svg,
.slide-prodotti-sx .flickity-prev-next-button svg{
    background-color: var(--fucsia);
}
.flickity-prev-next-button:disabled,
button.flickity-prev-next-button[disabled]{
    opacity: 0.35 !important;
}

.slide-prodotti .slider:hover .flickity-prev-next-button{
    transform: none !important;
}

.slide-prodotti-dx .slider-style-container .flickity-slider>:not(.is-selected),
.slide-prodotti-sx .slider-style-container .flickity-slider>:not(.is-selected){
    opacity: 1;
}

.slide-prodotti-dx .flickity-slider .col-inner,
.slide-prodotti-sx .flickity-slider .col-inner{
    padding: 0 4px;
}

.slide-prodotti-dx .box-text .box-text-inner,
.slide-prodotti-sx .box-text .box-text-inner{
    padding: 10px 0px;
}

.slide-prodotti-dx .box-text,
.slide-prodotti-sx .box-text{
    padding: 0;
}

.section-collection__image {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding-top: 36.18%;
    margin-bottom: -104px;
    position: relative;
}

.visible-xs-block {
    display: none !important;
}

.col-text-header .col-inner{
    padding: 48px 72px 0;
}

.uomo .box-text-inner{
    background-color: var(--azzurro);
}

.uomo .box-text-inner p{
    margin-top: 0;
    color: var(--bianco);    
}

.gallery-prodotti-uomo .flickity-prev-next-button{
    display: none;
}

.gallery-col .col-inner{
    padding: 0 !important;
}

/* Gallery schede prodotto */
.custom-slideshow {
  position: relative;
  width: 100%;
  aspect-ratio: 540 / 674;
  overflow: hidden;
}
.custom-slideshow-track {
  display: flex;
  height: 100%;
}
.custom-slideshow-track img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}
/* fine gallery */
.align-centro{
    align-items: center;
}
.width-fit{
    width: fit-content;
}
.width-fit .icon-box-text{
    padding-left: 12px !important;
}
.section-servizi:before{
    content: '';
    position: absolute;
    top: 32px;
    right: 32px;
    bottom: 32px;
    left: 32px;
    z-index: 5;
    border: 1px solid var(--antracite);
    pointer-events: none;
}
.section-servizi.bordobianco:before{
    border: 1px solid var(--avorio);
}
.section-servizi .row-fullwidth-left > .col:nth-child(2),
.section-servizi .row-fullwidth-right > .col:first-child{
    padding: 0 !important;
}
@media only screen and (max-width: 850px) {
    .gtl{
        --gtl-dot:36px;
        --gtl-line-h:3px;
        --gtl-btn:44px;
        --gtl-year-h:34px;
        --gtl-year-w:70px;
        --gtl-gap:20px;
    }    
    h1, .h1{
        font-size: 2rem;
    }
    h2, .h2{
        font-size: 1.8rem;  
    }
    h3, .h3{
        font-size: 1.3rem;   
    }
    p{
        font-size: 1.05rem;
    }
    .tag-title {
        font-size: 1.05rem;
    }      
    .text-image__bg{
        display: none;
    }
    .text-image__wrapper{
        margin: auto;
    }
    .row-fullwidth-left > .col:first-child{
        padding-left: 30px;
        padding-right: 30px;    
    }
    .row-fullwidth-right > .col:nth-child(2){
        padding-right: 30px
        padding-left: 30px;    
    }    
    .repair-col-text .col-inner{
        box-shadow: 0 1px 3px -2px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
        padding: 32px;
        background-color: var(--bianco);  
        margin-top: -30px;      
    }
    .slide-prodotti .flickity-slider .row-full-width,
    .slide-prodotti-dx .flickity-slider .row-full-width,
    .slide-prodotti-sx .flickity-slider .row-full-width{
        max-width: 100% !important;
    }    
    .slide-prodotti .slider{
        padding-bottom: 0 !important;
    }    
    .col-text-header .col-inner{
        padding: 48px 32px 0;
    }
    .pbm-0{
        padding-bottom: 0 !important;
    }
    .row-fullwidth-left .pr-0{
        padding-left: 0;
    }
    .gtl__slide{
        grid-template-columns:1fr;
    }
    .gtl__img{
        min-height:0;
        aspect-ratio:4 / 3;
    }
    .gtl__txt{
        padding-bottom:0;
    }
    .gtl__nav{
        position:static;
        justify-content:center;
        margin-top:20px;
    }    
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
    section{
        padding-top: 64px;
        padding-bottom: 64px;
    }
    section {
        padding-top: 80px !important;
        padding-bottom: 80px !important;
    }    
    .sezioni-background::after {
        bottom: 0px;
    }  
    .slide-prodotti .flickity-slider .row-full-width,
    .slide-prodotti-dx .flickity-slider .row-full-width,
    .slide-prodotti-sx .flickity-slider .row-full-width{
        max-width: 100% !important;
    }    
}

@media only screen and (min-width: 850px) {
    .col {
        padding-bottom: 0 !important;
    }
    .margin-first{
        margin-bottom: 64px;
    }    
    .repair-col-text{
        padding-bottom: 80px !important;
    }
    .immagine-up {
        -webkit-transform: translateY(60px);
        transform: translateY(60px);
    }  
    .repair-col-text{
        padding: 80px !important;
    } 
    .slide-prodotti .flickity-slider .row-full-width,
    .slide-prodotti-dx .flickity-slider .row-full-width,
    .slide-prodotti-sx .flickity-slider .row-full-width{
        max-width: 90% !important;
    }
    #menu-item-47 ul.sub-menu{
        padding-left: 0;
        padding-right: 0;
    } 
    #menu-item-47 ul.sub-menu li{
        padding-left: 8px;
        padding-right: 8px;
    }          
}

@media screen and (min-width: 850px) and (max-width: 890px) {
    .margineb h3{
        font-size: 1.15rem;;
    }
    .box-text .box-text-inner {
        padding: 32px 16px;
    }    
    .row-h3-underline > .col-prodotti .box-text-inner .button i{
        display: none;
    }    
}

@media screen and (min-width: 850px) and (max-width: 1024px) {
    .section-servizi .row-fullwidth-left .medium-col-first {
        order: -1;
    }
    .section-servizi .row-fullwidth-left .medium-12,
    .section-servizi .row-fullwidth-right .medium-12{
        flex-basis: 100%;
        max-width: 100%;
    }

}

@media screen and (min-width: 850px) and (max-width: 1150px) {
    .slide-prodotti .next {
        left: 25%;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1380px) {
    .section-servizi .row-fullwidth-right,
    .section-servizi .row-fullwidth-left{
        align-items: stretch !important; 
    }

    .section-servizi .row-fullwidth-right .col:first-child{
        min-height: 100%;
    }    
    .section-servizi .row-fullwidth-right .col:first-child .col-inner,
    .section-servizi .row-fullwidth-left .col:nth-child(2) .col-inner,
    .section-servizi .row-full-width .img,
    .section-servizi .row-full-width .img-inner,
    .section-servizi .row-full-width img{
        height: 100% !important;
    }
}

@media screen and (max-width: 1400px) {
    .section-servizi .row-fullwidth-left > .col:first-child,
    .section-servizi .row-fullwidth-right > .col:nth-child(2){
        padding: 64px !important;
    }
}

@media only screen and (min-width: 1700px) {
    .container-width, .full-width .ubermenu-nav, .container, .row {
        max-width: 1530px !important;
    }
    .row-fullwidth-left,
    .row-fullwidth-right{
        max-width: 100% !important;
    }
    .row-full-width {
        max-width: 100% !important;
    }    
    .row-fullwidth-left > .col:first-child{
        padding-left: max(15px, calc((100vw - 1530px) / 2));
        padding-right: 30px;    
    } 
    .row-fullwidth-right .col:nth-child(2){
        padding-right: max(15px, calc((100vw - 1530px) / 2));
    }
    .sezioni-background::before {
        top: 0;
    }

    /* simbolo in basso a sinistra */
    .sezioni-background::after {
        bottom: 0;
    }       
}

@media only screen and (max-width: 549px) {
    .slide-prodotti .flickity-prev-next-button,
    .slide-prodotti-dx .flickity-prev-next-button,
    .slide-prodotti-sx .flickity-prev-next-button{
        display: inherit;
        width: 40px !important;
        height: 40px !important;
    }
    .slide-prodotti-dx .flickity-prev-next-button.previous,
    .slide-prodotti-sx .flickity-prev-next-button.previous{
        right: 20%;
    }    
}

@media (max-width: 767px) {
    .hidden-xs {
        display: none !important;
    }

    .section-collection__image {
        padding-top: 100%;
        margin-bottom: -88px;
    }

    .visible-xs-block {
        display: block !important;
    }
}

@media (prefers-reduced-motion: reduce){
  .gtl{
    --gtl-speed:.01s;
  }
}

/* Slider Custom Home */
.av-slider{
  position:relative;
  width:100%;
  overflow:hidden;
  touch-action:pan-y;
}
.av-slider__track{
  display:flex;
  transition:transform .5s ease;
}
.av-slider__slide{
  flex:0 0 100%;
  min-width:100%;
}

/* Wrapper interno allineato al container del sito.
   Colonna testo e colonna immagine = larghezza UGUALE (1fr 1fr).
   La fascia "Accessori" ha larghezza fissa a parte. */
.av-slider__grid{
  width:100%;
  display:grid;
  grid-template-columns: 1fr 1fr var(--col-strip-width);
  min-height:480px;
}
/* Variante specchiata: fascia a sinistra, testo a destra */
.av-slider__grid--left{
  grid-template-columns: var(--col-strip-width) 1fr 1fr;
}

/* ---------- Colonna testo ---------- */
.av-col--text{
  background:var(--ardesia);
  color: var(--bianco);
  padding:40px 36px 40px var(--edge);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  text-align: center;
}
.av-slider__grid--left .av-col--text{
  padding:40px var(--edge) 40px 36px;
}
.av-col--text p{
    color: var(--avorio);
}
.av-col--text .thumb{
  margin-bottom:20px;
}
.av-col--text .btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  align-self:flex-start;
  border:1px solid var(--avorio);
  color: var(--avorio);
  text-decoration:none;
  padding:12px 20px;
  transition:background .25s,color .25s;
}
.av-col--text .btn:hover{
    background: var(--bianco); 
    color:var(--ardesia);
}

/* ---------- Colonna immagine ---------- */
.av-col--image{
  background: var(--bianco);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

/* ---------- Fascia "Accessori" + pulsante ---------- */
.av-col--strip{
  background:var(--azzurro);
  position:relative;
}

/* Gruppo label + pulsante, centrato verticalmente nella fascia */
.strip-group{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.strip-group .side-label{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:16px;
  color: var(--avorio);
  white-space:nowrap;
}

/* Pulsante cerchio */
.nav-btn{
  position:absolute;
  top:50%;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--fucsia);
  border:none;
  cursor:pointer;
  color: var(--bianco);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .2s;
  z-index:2;
}
/* fascia a destra -> pulsante appoggiato sul bordo sinistro della fascia */
.av-col--strip.is-right .nav-btn{
  left:0;
  transform:translate(-50%,-50%);
}
.av-col--strip.is-right .nav-btn:hover{
  transform:translate(-50%,-50%) scale(1.08);
}
/* fascia a sinistra -> pulsante appoggiato sul bordo destro della fascia */
.av-col--strip.is-left .nav-btn{
  right:0;
  left:auto;
  transform:translate(50%,-50%);
}
.av-col--strip.is-left .nav-btn:hover{
  transform:translate(50%,-50%) scale(1.08);
}
/* la freccia cambia direzione a seconda del lato (puramente estetico) */
.av-col--strip.is-left .nav-btn .arrow-icon{ transform:scaleX(-1); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px){
  .av-slider__grid,
  .av-slider__grid--left{
    min-height:auto;
  }
  /* la colonna immagine sparisce su mobile */
  .av-col--image{ display:none; }

  /* la fascia CTA resta visibile e diventa una colonna stretta
     accanto al testo, invece di essere impilata sotto */
  .av-col--strip{ display:block; min-height:120px; }

  /* slide standard: testo (largo) + fascia (stretta) */
  .av-slider__grid{
    grid-template-columns: 1fr var(--col-strip-width);
  }
  /* slide specchiata: fascia (stretta) + testo (largo) */
  .av-slider__grid--left{
    grid-template-columns: var(--col-strip-width) 1fr;
  }

  .av-col--text{ padding:28px 20px; }
}