/*************************************************************************************************************
    2021 - Federico Sfiligoi
    CSS COUNTDOWN
**************************************************************************************************************/
:root {
	--fs-expire-base:        1rem;     /* font-size wrapper expire 16px */
	--fs-expire-scheda-prod: 0.750rem; /* font-size wrapper expire scheda prodotto  12px*/
	/* Numeri */
    --fs-num-big:         2.500rem; /* font-size numbers max 40px */
	--fs-num-base-mobile: 1.500rem; /* font-size numbers base 24px;*/
	--fs-num-scheda-prod: 1.250rem; /* font-size numbers scheda prodotto 18px */	
	/* Titolo giorni-ore-minuti-secondi */
	--fs-title-big:         0.563rem; /* font-size title max 9px */
	--fs-title-scheda-prod: 0.500rem; /* font-size numbers scheda prodotto 8px */
	/* Separatore */
	--fs-separatore-base:        1.125rem; /* font-size separatore 18px */
	--fs-separatore-scheda-prod: 0.750rem; /* font-size separatore  12px*/
	/* Colori */
	--color-num-base:   #231f20;  /* colore base per i numeri */
	--color-title-base: #231f20;  /* colore base per i titoli */
	
	--color-num-winter-sales:   #213D46; /* colore base per i numeri WINTER SALES 2021 */
	--color-title-winter-sales: #213D46; /* colore base per i titoli WINTER SALES 2021 */
	
	--color-num-summer-sales:   #213D46; /* colore base per i numeri SUMMER SALES 2021 */
	--color-title-summer-sales: #213D46; /* colore base per i titoli SUMMER SALES 2021 */
	
	/**** DA CAPIRE SE QUESTA PARTE E REALIZZABILE O SE QUESTI COLORI VANNO SOVRASCRITTI NELL'AUTOLOAD*/
	--color-num-bf-sales:   #213D46;  /* colore base per i numeri BLACK FRIDAY 2021 */
	--color-title-bf-sales: #213D46;  /* colore base per i titoli BLACK FRIDAY 2021 */
	
	--color-num-cm-sales:   #213D46;  /* colore base per i numeri CYBER MONDAY 2021 */
	--color-title-cm-sales: #213D46;  /* colore base per i titoli CYBER MONDAY 2021 */
}



@media screen and (max-width: 991px) {}
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 375px){}




/**********************************************************************************
	CSS BASE PER COUNTDOWN
	 - Ovunque venga messo questo countdown sarà centrato senza la necessità
       di un wrapper di diverse dimensioni
     - Utilizza la grandezza massima del font, in pratica è la versione per la 
       landing page.
**********************************************************************************/
#countdown{
	display:flex;    
    flex-direction:column;
    width:100%;
		in-width:350px;
    height:auto;
    font-size:12px;
    padding: 0;
}

/* wrapper di eventuale scade tra */
#countdown .wrapper-expire{
    flex:0 1 100%;
    display:flex;
    align-items: center;
    justify-content: center;
	font-size: var(--fs-expire-base);
    margin-bottom: 10px;
}
/* wrapper dei numeri */
#countdown .wrapper-numbers{
    flex:0 1 100%;
    display:flex;
    align-items: center;
    justify-content: center;
    
}
#countdown div[class^="cont-"]{
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
	width: auto;
	/*min-width: 60px;*/
	margin: 0;
}
/* contenitore numeri */
#countdown .cd_numbers{
    font-size:var(--fs-num-big);
    font-weight:700;
	color: var(--color-num-base);
}
/* contenitore titoli giorni-ore-minuti-secondi */
#countdown div[class^="title-"]{
	font-size:var(--fs-title-big); 
	color: var(--color-title-base);
	letter-spacing: .6px;
}
/* separatore */
#countdown .cd-separator {
	font-size: var(--fs-separatore-base);  
	align-self: flex-start;
	padding-top: .8%;
	margin: 0 1.6%;
}

/* MOBILE */
@media screen and (max-width: 600px) {
	/* contenitore numeri */
	#countdown .cd_numbers{ font-size:var(--fs-num-base-mobile); }
}

/* FINE COUNTDOWN BASE */

/**********************************************************************************
	CSS COUNTDOWN SCHEDA PRODOTTO ZONA PREZZO + BANNER CARRELLO COL SX
	 - Classe del wrapper: .wrapper__intropromo
**********************************************************************************/

/* classe contenitore del countdown */
.wrapper__intropromo{
	margin-bottom:13px;
} 
/* wrapper di eventuale scade tra */
.wrapper__intropromo #countdown .wrapper-expire{
	font-size: var(--fs-expire-scheda-prod);
    margin-bottom: 0;/*reset*/
}
/* dimensione numeri */
.wrapper__intropromo #countdown .cd_numbers{
	font-size: var(--fs-num-scheda-prod);
	font-weight: 500;
}
/* contenitore titoli giorni-ore-minuti-secondi */
.wrapper__intropromo #countdown div[class^="title-"] {
	font-size: var(--fs-title-scheda-prod);
}
/* separatore scheda prodotto */
.wrapper__intropromo #countdown .cd-separator { font-size: var(--fs-separatore-scheda-prod); }
/* reset width contenitore numeri */
.wrapper__intropromo #countdown div[class^="cont-"]{
	min-width: 0;
	margin: 0 3px;
}
/* FINE COUNTDOWN SCHEDA PRODOTTO ZONA PREZZO + BANNER CARRELLO COL SX */

/**********************************************************************************
	CSS COUNTDOWN BANNER CATEGORY 
	 - Il Countdown si posiziona in maniera assoluta dentro il div #container-cat
	 - Classe del wrapper: .wrapper__abs-category
	 - N.B. in mobile il wrapper si riposiziona in maniera relative, ovvero sotto
	   il bannerTop
**********************************************************************************/

.wrapper__abs-category{
	position:absolute;
	right:3%;
	height:100%;
	top:0;
}

.wrapper__abs-category #countdown{
	height:100%;
	justify-content: center;	
}

.wrapper__abs-category #countdown .wrapper-expire{flex:none;font-size: 26px;}
.wrapper__abs-category #countdown .wrapper-numbers {flex-basis:auto;}
/* dimensione numeri */
.wrapper__abs-category #countdown .cd_numbers{font-size: clamp(18px, 2.6316vw, 30px);}
.wrapper__abs-category #countdown .cd-separator {
	align-self: center;
	padding-top: 3px;
	margin: 0 10px;
	font-size: 13px;
}

@media screen and (max-width: 600px) {
	.wrapper__abs-category{
		position:relative;
		height:auto;
	}
}