/* ! Reset */
body, html{ font-family: 'Josefin Sans', Arial, Helvetica, sans-serif; font-size: 16px; box-sizing: border-box;margin: 0;padding: 0;}
*,*:before,*:after{ box-sizing: border-box; }
h1,h2,h3,h4,h5,h6, p, ol, ul{margin: 0 0 1rem 0;padding: 0;}
ol,ul{list-style-type: none;}
img{height: auto;}
h1{font-size: 4rem;}
h2{font-size: 3rem;}
h3{font-size: 2rem;}
h4{font-size: 1rem;}
h5{font-size: 0.8rem;}
h6{font-size: 0.6rem;}
a{text-decoration:none}

/* -------------------------------------------------------------------------------- */
/* ! Css Var */
/* -------------------------------------------------------------------------------- */

:root {
  --purple: #493E5C;
  --purple-dark:#2E2258;
  --green: #55A632;
  --yellow: #FFC107;
  --white: #ffffff;
  --blu: #30837A;
  --orange: #DD7724;
  --red: #F44434;
}

body{background: var(--white); color: var(--purple);}
.spacer{height: 150px;}
.initial-spacer{height:180px;}

/* ! Title System */
.text-0 {font-size: 6rem;line-height: 1;}
h1, .text-1{font-size: 3.4rem;}
h2, .text-2{font-size: 2rem;}
h3, .text-3{font-size: 1.5rem;}
h4, .text-4{font-size: 1.3rem;line-height: 1.4;}
h5, .text-5{font-size: 1rem;line-height: 1.2;}
p{font-size: clamp(1rem, 0.956rem + 0.1408vw, 1.125rem);}

h1, h2, h3, h4{font-family: 'Josefin Sans', cursive;font-weight: normal;}
h1, h2, h3, h4, p, ol, ul {margin-bottom: 1rem;}

@media (max-width: 1024px){
.text-1{font-size: 2.8rem;}
.initial-spacer{height:190px;}
}

@media (max-width: 768px){
.text-1{font-size: 2rem;}
.initial-spacer{height:85px;}
}

/* -------------------------------------------------------------------------------- */
/* ! Button System */
/* -------------------------------------------------------------------------------- */

.button{font-size: 1rem; text-transform: lowercase; font-weight: 700; background:var(--green); color: var(--white); padding: 10px 25px; display: inline-block; border-radius: 4px; border-style: none;}
.button:hover{background: #458a27;}

.button--yellow{background:var(--yellow); color: var(--purple)!important; }
.button--yellow:hover{background: #ffd901;}

.button--blu{background:var(--blu); color: var(--white); }
.button--blu:hover{background:#37a866;}

.button--purple{background:var(--purple); color: var(--white); }
.button--purple:hover{background: var(--purple-dark);}
.button--purple-light{background: #6F5D8E;}
.button--purple-dark{background: var(--purple-dark);}
.button--purple-dark:hover{background: #6F5D8E;}
.button--purple-gradient{background:linear-gradient(131deg,rgba(31, 26, 40, 1) 0%, rgba(111, 93, 142, 1) 100%);}
.button--purple-gradient:hover{background:linear-gradient(131deg,rgba(111, 93, 142, 1) 0%,rgba(31, 26, 40, 1) 100%);}

.button--red{background:var(--red); color: var(--white)!important; }
.button--red:hover{background:#e42f22;}

button.button.button--yellow{padding:10px 25px !important}

.icon-button:hover{transform: scale(0.8);}

@media (max-width: 1024px) {
.button--add-to-cart{padding:10px;}
}

/* -------------------------------------------------------------------------------- */
/* ! List System */
/* -------------------------------------------------------------------------------- */

ul.bullet--green{list-style-type: square; list-style-position: inside;}
.bullet--green li{font-size: 1.2rem;padding:10px 20px;}
.bullet--green li::marker {color: var(--green); font-size: 1rem;}

/* -------------------------------------------------------------------------------- */
/* ! Animation */
/* -------------------------------------------------------------------------------- */

.fade-in{opacity: 0;transform: translateY(1rem);}
.fade-up{opacity: 0;transform: translateY(3rem);}
.text-reveal{transform: translateY(1rem); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);}
.slide-right{position: relative; right:-200px;}
.slide-left{position: relative; left:-200px;}

/* -------------------------------------------------------------------------------- */
/* ! Components */
/* -------------------------------------------------------------------------------- */

/* ! Skip Link */
.skip-link {position: absolute; left: -9999px;width: 1px; height: 1px;overflow: hidden; z-index: -1;}
.skip-link:focus {left: auto; width: auto;height: auto; overflow: auto;z-index: 9999;display: inline-block;padding: 10px 15px;background-color: grey; color: white;text-decoration: none;border: 2px solid black;margin: 10px;}

/* !Cursor */
*{cursor:none;}
.outline {width: 50px;height: 50px;border-radius: 100%;border: 1px solid #fff;transition: all 200ms ease-out;position: fixed;pointer-events: none;left:0;top: 0; z-index:9999;}
.cursor {width: 15px;height: 15px;border-radius: 100%;background: var(--blu);opacity: .5;position: fixed;left: 0;top: 0;pointer-events: none;z-index:9999;}
.hover {opacity: 0.5;border: 4px solid var(--red);z-index:9999;}

/* ! Topbar */
.topbar{background: var(--yellow); width: 100%; height: 40px; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; padding: 10px 20px; position: fixed; z-index: 999; top:0; left: 0;overflow: visible;}
.topbar__menu, .topbar__social{margin: 0px; padding: 5px;}
.topbar__menu li, .topbar__social li{display: inline-block;}
.topbar__menu li a, .topbar__social li a{color:var(--purple); font-weight: 600; padding: 5px; font-size: 1rem;}
.topbar__social img{color: var(--purple); width:20px; height:20px; display: inline-block;margin-top: 5px;}
.topbar__menu img{ width:25px; height:25px; display: inline-block;margin-bottom: -5px; border:2px solid var(--purple); border-radius: 50%;}

/* Dropdown Topbar */
.dropdown__menu {position: absolute;display: none;background: #ccc;border-radius: 6px;box-shadow: 0 8px 25px rgba(0,0,0,0.25);min-width: 135px;margin:5px 12px;z-index: 10000;}
.dropdown__menu::before {content: ""; position: absolute;top: -7px; left: 20px; width: 16px; height: 8px;background: #ccc;clip-path: polygon(50% 0%, 0% 100%, 100% 100%);z-index: 10001;}
.dropdown__menu li a {display: block;padding: 10px 15px;color: var(--purple);text-decoration: none;border-bottom: 1px solid var(--purple-dark);}
.dropdown__menu li:last-child a{border-bottom: 0px;}
.dropdown__menu li a:hover {background: var(--yellow);}
.dropdown__menu li:first-child a {border-top-left-radius: 8px;border-top-right-radius: 8px;}
.dropdown__menu li:last-child a {border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;}

/* ! Header */
.header{background: #6F5D8E; background: linear-gradient(90deg, rgba(111, 93, 142, 1) 0%, rgba(58, 49, 73, 1) 100%); display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 10px 30px; position: fixed; top:3vh; left:0;z-index: 999; height:auto;}
.header a{color:var(--white); display: block; padding: 15px;font-size: 1.2rem;}
.header__content{background: #6F5D8E; background: linear-gradient(90deg, rgba(111, 93, 142, 1) 0%, rgba(58, 49, 73, 1) 100%); display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0px; position: fixed; top:40px; left:0; z-index: 999;}
.header__content a{color:var(--white); display: block; padding: 15px;font-size: 1.2rem;}
.header__menu{display: flex; flex-direction: row; align-items: center; justify-content: flex-end; width: 100%;flex-wrap: wrap;}
.header__menu-items{margin-bottom: 0;padding: 30px 0px 20px;}
.header__menu-items li{display: inline-block;}
.header__menu-cart{margin-bottom: 0px;padding: 0px 15px; position: relative; display: inline-block;}

.header__logo{max-width: 300px;height: 300px;padding:20px; background-color: var(--purple); border-radius: 100%; border: 1px solid white; display: flex; flex-direction: column; align-content:center; justify-content:center; position: absolute;top: -90px; left:10px; z-index:9999;}
.scroll-down .header__logo{max-width: 240px;height: 240px;padding:20px; background-color: var(--purple); border-radius: 100%; border: 1px solid white; display: flex; flex-direction: column; align-content:center; justify-content:center; position: absolute;top: -90px; left:10px; z-index:9999; transition: all 0.2s cubic-bezier(.215, .61, .355, 1);}
.header__logo img{width:100%; max-width: 225px;margin-top: 10px;}
.header__hamburger{display: none;}

/* ! Sub Header */
.subheader{background: #282828; background: linear-gradient(90deg, rgba(40, 40, 40, 1) 0%, rgba(30, 30, 30, 1) 100%);display: flex; justify-content: space-between; align-items: center; width: 100%; height: 50px; padding: 10px 30px; z-index: 990;}
.subheader a{color:var(--white); display: block; padding: 6px 10px;font-size: 1.1rem; font-weight: 500;}
.subheader__menu{display: flex; flex-direction: row; align-items: center; justify-content: flex-end; width: 100%; column-gap: 8px;}
.subheader__menu-buttons{margin-bottom: 0;}
.subheader__menu-buttons li{display: inline-block; margin-top: 0px;}

#category, .category {width: 300px; padding: 5px; border: 1px solid #ccc; border-radius: 4px; font-size: 1.1.rem;}
#category option { padding: 5px;}
label.select-category {display: inline; margin-bottom: 5px;color: var(--white);}
label.checkbox {display: inline; margin-bottom: 5px;color: var(--purple);}
label.label-inline{display: inline; margin-bottom: 5px;color: var(--purple);width: 100%;max-width: 120px;}

@media (max-width: 1124px){
.header__logo{max-width: 200px;height: 200px;padding:10px;}
.scroll-down .header__logo {max-width: 140px; height: 140px; top:-75px;padding:5px; transition: all 0.2s cubic-bezier(.215, .61, .355, 1);}  
.subheader{height: auto;}
.subheader__menu{margin-left: 0px;}
}

@media (min-width: 768px) {
.scroll-down .header__content {top:0;transition: all 0.4s cubic-bezier(.215, .61, .355, 1); top:0;}
.scroll-down .subheader{top:100px; transition: all 0.2s cubic-bezier(.215, .61, .355, 1);}
.scroll-down .header__logo img{ max-width: 180px; transition: all 0.1s cubic-bezier(.215, .61, .355, 1);}
/* .scroll-down .topbar{ top:-100%;} */
}
@media (max-width: 855px){
  label.select-category,
  #category{display: none;}
}

@media (max-width: 768px) {
.header{padding: 1%;height: 70px;top:4vh;justify-content: flex-end;max-width: 100vw;}
.header__logo{max-width: 140px;height: 140px;padding:10px;justify-content: center; top: -60px;}
.scroll-down .header__logo {max-width: 140px; height: 140px; top:-60px; transition: all 0.2s cubic-bezier(.215, .61, .355, 1);}
.topbar{min-width: 100vw; padding: 0px;}
.subheader{padding: 0 1rem;background: transparent;}
.subheader__menu{flex-direction: column; align-items: stretch; gap:0px;}
.subheader__menu-buttons li{margin-top:10px;}
.subheader a{padding: 15px!important;font-size: 1.2rem;border:none!important;}
.header__menu{background: #333;position: absolute; top:55px; left:0; display: block; z-index:99;height: 0; width:100%; overflow:hidden; transition: all 1s cubic-bezier(.215, .61, .355, 1);}
.scroll-down .header__menu {top: 60px;}
.header__menu-items{padding: 0px;}
.header__menu-cart{padding: 0;}
.menu-open .header__menu{height: 100vh;}
.menu-open {overflow: hidden;}
.header__menu li{display:block;}
.header__menu li a{display:block; text-align: left;padding: 8% 5%;border-top: 1px solid #666;}
.header__hamburger{display:block; width: 40px; height: 35px;margin-top: 9px; margin-right:4px;}
.header__hamburger span{height:2px; width: 33px; margin-top: 8px; background: #fff; display:block;transition: all 0.15s cubic-bezier(.215, .61, .355, 1);}
.menu-open .header__hamburger span:nth-child(1){transform: translateY(5px) rotate(45deg);}
.menu-open .header__hamburger span:nth-child(2){transform: translateY(-5px) rotate(-45deg);}
}

/* ! Carrello */
.cart-icon {position: relative;}
.cart-icon img {width: 100%;height: 100%;}

/* Carrello DESKTOP dentro il menu */
@media (min-width: 769px) {
.cart-mobile {display: none;}
.cart-desktop {display: inline-flex; align-items: center; position: relative; padding: 0px 15px;}
.cart-desktop img {width: 25px; height: 25px;}
.cart-desktop .cart-count {display: block; position: absolute; top: 0px; left: 14px; background-color: #fff; color: var(--green); font-size: 13px; font-weight: bold; width: 25px; height: 25px; padding-top: 2px; border-radius: 50%; text-align: center; line-height: 20px; border: 2px solid var(--green);}

}

/* Carrello MOBILE accanto all’hamburger */
@media (max-width: 768px) {
.cart-desktop {display: none;}
.cart-mobile {display: flex; align-items: center; justify-content: center; position: relative; margin-right: 10px; z-index: 9999;}
.cart-mobile img {width: 30px; height: 30px;}
.cart-mobile .cart-count {display: block; position: absolute; top: 5px; left: 0px; background-color: #fff; color: var(--green); font-size: 0.8rem; font-weight: bold; width: 25px; height: 25px; line-height: 22px; text-align: center; border-radius: 50%; border: 2px solid var(--green);}
}


/* ! Cover */
.cover{background: #e4e4e4; padding:10%;min-height: 100vh;display: flex;flex-flow: column;justify-content: center;align-items: flex-start; position: relative;}
.cover--slider{background: #fff; padding:0%;height: 100%; display: flex;flex-flow: column;justify-content: center;align-items: flex-start; position: relative;padding: 100px 0px 0px;}
.cover--dark{background: #666;height: 500px;color:#fff;}
.cover--intro{overflow: hidden;}

.cover__content{max-width: 600px;width: 100%; padding: 0px; z-index:1; position: relative;}
.cover__content h2 {max-width: 600px;}
.cover__content p{font-weight: 300;}
.cover__content--center{min-width: 100%;text-align: center;}
.cover--image{min-height: 600px;justify-content: flex-end;color:#fff;text-align: left;}
.cover--image h1,.cover--image h2{font-size: 2.4rem;}
.cover--image h3{font-size: 1.4rem;text-transform: uppercase;font-weight: normal;}
.cover--image .cover__content{max-width: 1250px;width: 100%;}

.cover__bg{position: absolute; top: 0;left: 0;width: 100%;height: 100%;background: url(img/cover.png) center center ; background-size: cover; z-index:0; border: 0px solid #e4e4e4;}
.cover__bg:after{content:' ';position: absolute; top: 0;left: 0;width: 100%;height: 100%; background: linear-gradient(0deg, rgba(255,255,255,0) 50%, rgba(0,0,0,0.5) 100%); }

.cover--about{background: #E4E4E4; padding: 250px 6rem 80px;min-height: 100vh;display: flex;flex-direction: column;justify-content: center;align-items: flex-start; position: relative;}
.cover__bg--about{position: absolute; top: 0;left: 0;width: 100%;height: 100%;background: url(img/about-hero-img.jpg) center center ; background-size: cover; z-index:0; border: 0px solid #e4e4e4;}

.cover--agente-di-commercio{background: #E4E4E4; padding: 250px 6rem 80px;min-height: 100vh;display: flex;flex-direction: column;justify-content: center;align-items: flex-start; position: relative;}
.cover__bg--agente-di-commercio{position: absolute; top: 0;left: 0;width: 100%;height: 100%;background: url(img/agente-di-commercio-hero-img.jpg) center right ; background-size: cover; z-index:0; border: 0px solid #e4e4e4;}

.cover--lavora-con-noi{background: #E4E4E4; padding: 250px 6rem 80px;min-height: 100vh;flex-direction: column;display: flex;;justify-content: center;align-items: flex-end; position: relative;}
.cover__bg--lavora-con-noi{position: absolute; top: 0;left: 0;width: 100%;height: 100%;background: url(img/lavora-con-noi-hero-img.jpg) center center ; background-size: cover; z-index:0; border: 0px solid #e4e4e4;}

.cover--categoria{background:transparent; padding: 250px 6rem 80px;min-height: 40vh;display: flex;flex-flow: column;justify-content: center;align-items: flex-end; position: relative;}
.cover__bg--categoria{position: absolute; top: 0;left: 0;width: 100%;height: 100%;background:var(--yellow); z-index:-1; border: 0px solid var(--yellow);}

.cover--categoria .cover__content {max-width: 70%;width: 100%; padding: 0px; z-index:1; position: relative;align-content: center;}

@media (max-width: 1024px) {
.cover--slider{padding:0px;}
.cover--slider{padding:0px;}
.cover--about, .cover--agente-di-commercio, .cover--lavora-con-noi{min-height: 70vh;}
}

@media (max-width: 768px) {
.cover--categoria, .cover--about, .cover--agente-di-commercio, .cover--lavora-con-noi{padding:160px 2rem 60px;}
.cover--categoria .cover__content{max-width: 100%;}
}


/* ! Slider */
.splide__slide{padding: 30px;}
.splide__arrow {background: #F5B829; border-radius: 20%; width: 2.5rem;height: 2.5rem;opacity: 1;}
#hero-home-slider .splide__slide{padding: 0px;}
#hero-home-slider .tiles{height:100vh; border-radius:0px; color:#fff; position: relative; overflow: hidden; display: flex; width: 100vw; flex-direction: column; align-items: stretch; justify-content: center;}
#hero-home-slider .tiles:after{content:' ';position: absolute; top: 0;left: 0;width: 100%;height: 100%; background: linear-gradient(120deg,rgba(0, 0, 0, 0.35) 0%, rgba(255, 255, 255, 0) 100%);}
#hero-home-slider .tiles__content{padding:8%; background: transparent;z-index: 1;}
#hero-home-slider .tiles__content p{max-width: 600px;}

#nuovi-prodotti-slider .splide__slide{padding: 0px;}
#nuovi-prodotti-slider .splide__track{margin: 0px 4%;}
#nuovi-prodotti-slider .tiles{min-height:0px;border-radius: 0px;color:#fff;position: relative; overflow: hidden;display: block;}
#nuovi-prodotti-slider .tiles__content{min-height: 300px;border-radius: 30px;color:#fff;position: relative; overflow: hidden;display: flex; flex-direction: column; background: transparent; row-gap: 20px; padding:0px 18px;}
#nuovi-prodotti-slider .tiles__image{color:#fff; background: #D9D9D9; border-radius:25px; padding: 8px; position: relative;}
#nuovi-prodotti-slider .tiles__image img{border-radius: 25px; height: 100%; width: 100%; min-height: 350px; object-fit: cover;}
.tiles__info{border-radius: 30px; color:#fff; display: flex; flex-direction: column; background: var(--purple); padding:20px;position: relative;justify-content:space-between;}

#testimonial-slider .splide__slide{padding: 0px;}
#testimonial-slider .splide__track{margin: 0px 4%;}
#testimonial-slider .tiles{min-height:0px;border-radius: 0px;color:#fff;position: relative; overflow: hidden;display: block;}
#testimonial-slider .tiles__content{border-radius: 30px;position: relative; overflow: hidden;display: flex; flex-direction: column; justify-content: center; background: transparent; row-gap: 20px; height: 300px;}
#testimonial-slider blockquote{margin: 0px auto; max-width: 65%; color:var(--purple); font-size: 1.7rem;text-align: center;}
#testimonial-slider .tiles__content:before{display: block;content: "";background-image: url("img/quote-left-saying-speech.png");background-size: contain; background-repeat: no-repeat;background-position: center center; position: absolute;width: 100%; height: 100%; max-width: 60px;max-height: 60px;bottom: 20px;right: 20px;z-index: 99;transform: rotate(180deg);}
#testimonial-slider .tiles__content:after{display: block;content: "";background-image: url("img/quote-left-saying-speech.png");background-size: contain; background-repeat: no-repeat;background-position: center center; position: absolute;width: 100%; height: 100%; max-width: 60px;max-height: 60px;top: 20px;left: 20px;z-index: 99;}
#testimonial-slider .tiles__content img{width:100%;max-width: 260px; text-align: center;margin: 0px auto;padding: 20px 10px;}

#testimonial-slider .rating {display: flex; justify-content: center; gap: 10px; margin-top: 10px;}
#testimonial-slider .star {font-size: 2rem;color: #E4E4E4;}
#testimonial-slider .star.filled {color: var(--yellow);}

#offerte-slider .splide__slide{padding: 0px;}
#offerte-slider .splide__track{margin: 0px 4%;}
#offerte-slider .tiles{min-height:0px;border-radius: 0px;color:#fff;position: relative; overflow: hidden;display: block;}
#offerte-slider .tiles__content{min-height: 300px;border-radius: 30px;color:#fff;position: relative; overflow: hidden;display: flex; flex-direction: column; background: transparent; row-gap: 20px; padding:0px 18px;}
#offerte-slider .tiles__image{color:#fff; background: #D9D9D9; border-radius:25px; padding: 8px; position: relative;}
#offerte-slider .tiles__image img{border-radius: 25px; height: 100%; width: 100%; min-height: 350px; object-fit: cover;}


@media (max-width: 1024px){
#hero-home-slider .splide__arrow--next{right:1rem;}
#hero-home-slider .splide__arrow--prev{left:1rem;}
.splide__arrow--next{right:0;}
.splide__arrow--prev{left:0;}
#testimonial-slider .tiles__content:before,
#testimonial-slider .tiles__content:after{max-width: 50px;max-height: 50px;}
#testimonial-slider .tiles__content img{width: 200px;}
}

@media (max-width: 768px) {
.splide__arrow { width: 2rem;height: 2rem;}

#hero-home-slider .tiles__content{padding:60px;}
#hero-home-slider .splide__arrow--next{right:0.1rem;}
#hero-home-slider .splide__arrow--prev{left:0.1rem;}

#testimonial-slider blockquote{max-width: 100%; font-size: 1.1rem;}
#testimonial-slider .tiles__content:before{max-width: 30px;max-height: 30px;bottom: 10px;right: 0px;}
#testimonial-slider .tiles__content:after{max-width: 30px;max-height: 30px;top: 10px;left: 0px;}
#testimonial-slider .tiles__content img{width: 150px;}

#nuovi-prodotti-slider .splide__track,
#offerte-slider .splide__track{margin: 0px;}
#nuovi-prodotti-slider .tiles__info,
#offerte-slider .splide__track{padding: 20px;}

.tiles__info{height: auto !important;}
.tiles__counter, .tiles__counter--single{display: flex;flex-direction: column;justify-content: space-between;align-items: flex-start;flex-wrap: wrap;align-content: flex-start;gap: 20px;}
}

/* ! Shop Filter Bar */
.shop-filter{width: 100%;}
.shop-filter__content{padding:20px; background: var(--purple); color:#fff; border-radius: 10px;border: none;}
.shop-filter__content form{display: flex; flex-direction: row; justify-content: space-between; gap: 20px; flex-wrap: nowrap;}

@media (max-width: 1024px) {
.shop-filter__content form{display: flex;flex-direction: column;justify-content: flex-start;gap: 20px;flex-wrap: wrap;align-items: stretch;align-content: center;}
.shop-filter__content form .category{width:100%;}
}

/* ! Card */
.card{background-color: var(--purple); text-align: center; border-radius: 20px; padding: 25px; color:var(--white); position: relative;height: 550px;width: 400px;}
.card__overlay {position: absolute;top: 0;bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: var(--purple); border-radius: 20px;}
.card:hover .card__overlay {opacity: 1;}
.card__text {color: white; font-size: 20px; position: absolute;  top: 50%;left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; padding:20px; width: 100%;height: 100%;}

.card--category{display: flex; flex-direction: row; align-items: center; padding:0px; background: var(--purple); color: var(--white); border-radius: 30px;}
.card--category__img{height: 400px;}
.card--category__img img{height: 100%;width: 100%;object-fit: cover;}

@media (max-width: 1024px) {
.card{height: auto;}
.card--category{display: flex; flex-direction: column; align-items: left; padding:20px;row-gap:20px;}

}

/* ! Prodotto */
.tag-list{display: inline-flex; flex-direction: row; flex-wrap: wrap; gap:15px;}
.tag-list li{padding: 10px 20px; background: var(--purple); border: none; border-radius: 30px;}
.tag-list li a{color: var(--white); font-weight: bold; font-size: 0.9rem; letter-spacing: 1.1px;}

.product-details{display: inline-flex; flex-direction: row; flex-wrap: wrap; gap: 20px; justify-content: start; align-items: center;}
.product-details__stock{padding: 10px 20px; color: var(--green); border: 2px solid var(--green);border-radius: 10px; margin-bottom: 0px; font-weight: bold;}
.product-details__price{padding: 10px 20px; color: var(--purple); border: 2px solid var(--purple);border-radius: 10px;margin-bottom: 0px; font-weight: bold;}

/* ! Ribbons */
.ribbon-wrapper-first{position: absolute;width: 170px;height: 55px;bottom: 50px;left: -15px;z-index: 99;}
.ribbon-wrapper-second{position: absolute;width:170px;height: 55px;bottom: 100px;left: -15px;z-index: 99;}
.ribbon-wrapper-third{position: absolute;width: 170px;height: 55px;bottom: 150px;left: -15px;z-index: 99;}

.nuovo-arrivo-ribbon-wrapper{display: block;content: "";background-image: url("img/nuovi-arrivi-ribbon-yellow.png");background-repeat: no-repeat;background-position: left center;background-size: contain;}
.in-offerta-ribbon-wrapper{display: block;content: "";background-image: url("img/in-offerta-ribbon-purple.png");background-repeat: no-repeat;background-position: left center;background-size: contain;}
.best-seller-ribbon-wrapper{display: block;content: "";background-image: url("img/best-seller-ribbon-azzurro.png");background-repeat: no-repeat;background-position: left center;background-size: contain;}
.sold-out-ribbon-wrapper{display: block;content: "";background-image: url("img/sold-out-ribbon-red.png");background-repeat: no-repeat;background-position: left center;background-size: contain;}
.fine-stock-ribbon-wrapper{display: block;content: "";background-image: url("img/fine-stock-ribbon-orange.png");background-repeat: no-repeat;background-position: left center;background-size: contain;}
.in-evidenza-ribbon-wrapper{display: block;content: "";background-image: url("img/in-evidenza-ribbon-green.png");background-repeat: no-repeat;background-position: left center;background-size: contain;}

.in-offerta-ribbon-content, .best-seller-ribbon-content, .sold-out-ribbon-content, .fine-stock-ribbon-content, .in-evidenza-ribbon-content
{margin: 0px;padding: 20px 0px 20px 38px; color: var(--white);font-style: 1rem; transform: translate(0px, 6px);}
.nuovo-arrivo-ribbon-content{margin: 0px;padding: 20px 0px 20px 38px; color: var(--purple);font-style: 1rem; transform: translate(0px, 6px);}

.product-code-ribbon-wrapper{display: block;content: "";background-image: url("img/product-code-ribbon-yellow.png");background-repeat: no-repeat;background-position: right center;background-size: contain; position: absolute;width: 140px;height: 50px;top: 75px;right: -12px;z-index: 99;}
.product-code-ribbon-content{margin: 0px; padding: 20px 40px 20px 0px; color: var(--white);text-align: right;font-size: 1rem;transform: translateY(2px);}

@media (max-width: 768px) {
.product-code-ribbon-wrapper{width: 150px;height: 55px;top: 60px;right: -13px;z-index: 99;}
.product-code-ribbon-content{padding: 22px 40px 20px 0px; font-size: 0.9rem;}
}

/* ! Hearts */
.heart-wrapper{position: absolute;bottom: 20px;right: 20px;z-index: 99;}
.heart-icon {font-size: 1.5rem;color: grey;cursor: pointer;transition: color 0.3s ease;}
.heart-icon.filled {color:var(--purple);}

/* ! Counter */
.increment, .decrement{background-color: var(--green);font-size: 1.8rem;width: 40px;height: 40px;padding: 4px 10px;font-weight: 600;border: none !important;border-radius: 8px;}
.count{color: var(--purple);background: var(--white);padding: 10px 20px;border: none !important;border-radius: 8px;font-weight: 600;font-size: 1.3rem;display: inline-block;height: 39px;width: 60px;text-align: center!important;}

.counters {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;}
.counter {font-size: 4rem;font-weight: bold;padding: 10px;width: 100%;text-align: center; color:var(--blu)}
.counter::before{content:'+';display: inline-block;}

@media (max-width: 768px){
.counters {display: grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;}
}

/* ! Ordine */
.riepilogo-ordine{border: 2px solid var(--purple);padding: 20px 20px 40px 20px;border-radius: 20px;position: relative;margin-bottom: 4rem;}
.riepilogo-ordine__info{display: flex; background-color: var(--yellow); border-radius: 20px; padding: 8px 15px;margin-top: -40px; margin-bottom:10px;align-items: flex-end;align-content: center;flex-direction: row;flex-wrap: wrap;justify-content: space-between;gap: 10px;}
.riepilogo-ordine__info p{font-size: 1rem; display: inline-block; margin:0px;text-align: center;text-wrap: nowrap;}
.riepilogo-ordine__info a{font-size: 1rem; display: inline-block; margin:0px; padding:3px 5px!important; font-weight:normal; text-align: center;text-wrap: nowrap;}
.riepilogo-ordine__info__buttons{display: flex;flex-direction: row;align-content: flex-end;align-items: flex-end;gap: 10px;}
.riepilogo-ordine__item{display: flex; background-color: #E4E4E4; border-radius: 20px; padding:15px;justify-content: space-between;align-items: stretch;flex-direction: row;}
.riepilogo-ordine__item__info{display: flex; gap:20px;}
.riepilogo-ordine__info__text{display: flex;flex-direction: column;justify-content: center;align-items: flex-start;flex-wrap: wrap;width: 350px;}
.riepilogo-ordine__info__text__details{display: flex;flex-direction: row;justify-content: space-between;align-items: center; width: 100%;}
.riepilogo-ordine__info__text__details p:nth-child(2){background-color: var(--white); padding:5px;}
.riepilogo-ordine__item__info img{border-radius:20px; width: 100%; max-width: 150px; height: 100%; max-height: 150px; object-fit: cover;}
.riepilogo-ordine__items__actions{display: flex;flex-direction: column;width: 25%;align-items: stretch;justify-content: flex-start;text-align: center;}

.button--expand{position: absolute; bottom:-20px; left:50%;transform: translateX(-50%); background: var(--green);}
.button--dettagli-expand{font-size: 1rem; padding: 3px 5px;background-color: var(--purple); font-weight: normal;}
.button--dettagli-expand:active, .button--dettagli-expand:focus{background-color: var(--green);}
.content--dettagli-expand {display: none;width: 100%;border: 2px solid;margin-top: 0px;padding: 20px;border-radius: 20px;height: 100%;overflow: hidden;transition:height 0.8s ease-out, padding 0.8s ease-out;}
.content--dettagli-expand.show {display: block;height: 100%; padding: 20px;}
.content--dettagli-expand__title{background: var(--yellow); color: var(--purple); font-size: 1rem; font-weight: bold;padding:2px 6px; border-radius: 8px;}

.more{display: none; transition: all 1s cubic-bezier(.215, .61, .355, 1);}
.mio-carrello__info{display: flex; background-color: var(--yellow); border-radius: 20px; padding: 10px 15px;align-items: flex-end;align-content: center;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;gap: 10px;}

@media (max-width:1024px){
  .mio-carrello__info{flex-wrap: nowrap;}
}

@media (max-width: 768px){

.riepilogo-ordine__item{display: flex;flex-direction: column;row-gap: 30px;}
.riepilogo-ordine__item__info{display: flex; flex-direction: column;}
.riepilogo-ordine__info{display: flex;flex-direction: column; align-items: center;}
.riepilogo-ordine__info__buttons{display: flex;flex-direction: column;align-items: stretch;}
.riepilogo-ordine__info__text{width: 100%;}
.riepilogo-ordine__items__actions{width: 100%;}
.riepilogo-ordine__item__info img{width: 100%; max-width: 100%;height: 100%; max-height: 100%;}

.mio-carrello__info{display: none;}
}

/* ! Newsletter */
.newsletter{background: url('img/newsletter-block-img-bg.jpg');background-size: cover;background-repeat: no-repeat;background-position: center bottom;}
.newsletter__content{min-height: 500px;align-content: center;}
.newsletter__content p, .newsletter__content h2{max-width: 40%;}
.newsletter__content .form-inline input{width: 400px; border-radius: 10px;text-transform: capitalize !important;}

@media (max-width: 1024px){
.newsletter__content{min-height: auto;}
}
@media (max-width: 768px){
.newsletter__content .form-inline input{width: 100%;}
.newsletter__content p, .newsletter__content h2{max-width: 100%;}
}

/* ! Banner */
.banner{background: url('img/about-agente-di-commercio-img-bg.jpg') no-repeat center right;background-size: cover;}
.banner__content{min-height: 500px;align-content: center;}

@media (max-width: 1024px){
.banner__content{min-height: auto;}
}
@media (max-width: 768px){
.banner__content .form-inline input{width: 100%;}
}

/* ! Tiles */
.tiles{min-height: 500px;border-radius: 30px;color:#fff;position: relative;overflow: hidden;display: block;}
.tiles__content{background: linear-gradient(0deg, rgba(255,255,255,0) 50%, rgba(0,0,0,1) 100%);padding: 30px;}
.tiles__label{position: absolute;bottom:30px;left:30px;}

.shop-tiles__container{display: grid; grid-template-columns: repeat(4, 1fr);}
.shop-tiles__container--grid-3{display: grid; grid-template-columns: repeat(3, 1fr);row-gap: 30px;}

.shop-tiles{min-height:0px;border-radius: 0px;color:#fff;position: relative; overflow: hidden;display: block;}
.shop-tiles__content{min-height: 300px;border-radius: 30px;color:#fff;position: relative; overflow: hidden;display: flex; flex-direction: column; background: transparent; row-gap: 20px; padding:0px 15px;}
.shop-tiles__image{color:#fff; background: #D9D9D9; border-radius:25px; padding: 8px; position: relative;}
.shop-tiles__image img{border-radius: 25px; height: 100%; width: 100%; min-height: 350px; object-fit: cover;}
.shop-tiles__info{border-radius: 30px; color:#fff; display: flex; flex-direction: column; background: var(--purple); padding:20px;position: relative;}
.shop-tiles__info h3{font-size:1.8rem;}

.single-product-tiles{position: relative; display: block;}
.single-product-tiles__image img{border-radius: 30px;}

.tiles__table-row{display: flex; border-bottom: 1px solid white;}
.tiles__table-row .col-50, .tiles__table-row .col-25, .tiles__table-row p{margin:0px !important; padding:1px !important;}

.tiles__counter{display: flex;flex-direction: row;justify-content: space-between;align-items: center;flex-wrap: wrap;gap: 10px;}
.tiles__counter--single-product{justify-content:flex-end;}

.tiles__counter:not(:has(.counter-container)) {flex-direction: column;align-items: flex-start;}

.preferiti{display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; gap:20px;}
.preferiti-tiles{background-color: #E8E8E8;border-radius: 20px;padding: 10px;position: relative;}
.preferiti-tiles__content{display: flex;column-gap: 20px; align-items: center; flex-wrap: nowrap;}
.preferiti-tiles__image img{width: 150px; height: 100%; max-height:150px; object-fit: cover; border-radius: 20px;}
.preferiti-tiles__info{display: flex;flex-direction: column;align-content: flex-start;align-items: flex-start;justify-content: flex-end;}
.preferiti-tiles__info h3{font-size:1.2rem;font-weight: bold;}

.checkout-tiles__grid{display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; gap:20px;}
.checkout__summary{display: flex; flex-direction: row; gap:20px;}
.mio-carrello-tiles{background-color: #E8E8E8;border-radius: 20px;padding: 10px;position: relative;}
.mio-carrello-tiles__content{display: flex;column-gap: 10px; align-items: center; flex-wrap: nowrap;justify-content: flex-start;}
.mio-carrello-tiles__image{display: flex;flex-direction: row;justify-content: flex-start;flex-wrap: nowrap;align-items: center;gap: 20px;}
.mio-carrello-tiles__image img{width: 150px; height: 100%; max-height:150px; object-fit: cover; border-radius: 20px;}
.mio-carrello-tiles__image h3{font-size:1.2rem;font-weight: bold;color: var(--purple);}
.mio-carrello-tiles__totale{display: flex;flex-direction: row;justify-content: flex-start;flex-wrap: nowrap;align-items: center;gap: 20px;}
.mio-carrello-tiles__totale img{width: 100%; max-width: 28px;}
.mio-carrello__summary{display: flex;flex-direction: row; align-items: flex-end;}

@media (max-width: 1024px) {
.shop-tiles__container{grid-template-columns: repeat(2, 1fr);row-gap: 20px;}
}

@media (max-width: 768px){
.preferiti{display: grid; grid-template-columns: repeat(1, 1fr); grid-template-rows: auto; gap:20px;}
.preferiti-tiles__content{display: flex;flex-direction: column;align-items:stretch;row-gap: 20px;}
.preferiti-tiles__image img{width: 100%;height: 100%;max-width: 100%;max-height: 100%;}
.checkout-tiles__grid{grid-template-columns: auto;gap:30px;}
.shop-tiles__container,
.shop-tiles__container--grid-3{grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));row-gap: 20px;}
.mio-carrello-tiles__image{display: flex;flex-direction: column; row-gap: 20px;align-items:stretch;}
.mio-carrello-tiles__image img{width: 100%;height: 100%;max-height: 100%;}
.mio-carrello-tiles__totale{justify-content: space-between;}
.mio-carrello-tiles__content{display:flex; flex-direction:column; row-gap: 15px;}
}

/* ! Search NO Result */
.no-results{min-height: 50vh;}
.no-results__content {display: block;flex-direction: column;align-items: center;justify-content: center;padding: 20px;background-color: #f9f9f9;border: 2px dashed var(--purple);border-radius: 10px;text-align: center;color: var(--purple); margin: 20px 15px;}
.no-results__content.show { display: flex;}
.no-results__content h3 {margin: 10px 0;font-size: 2rem;color:var(--purple);font-weight: bold;}
.no-results__content p {font-size: 1rem;color: var(--purple);}

/* ! Aside */
.aside{border-left: 1px solid var(--yellow); min-height: 100vh;}
.aside-tiles{min-height: 350px;position: relative;}
.aside-tiles__info{display: flex;flex-direction: column;}
.aside-tiles__content{position: absolute; bottom:30px; left:0px; width: 100%;}
.aside-tiles__title{width: 95%;clip-path: polygon(0% 0, 100% 0%, 89% 100%, 0% 100%);padding: 20px;background-color: var(--purple);color: var(--white);text-transform: uppercase;font-size: 1.2rem;display: flex;align-content: center;flex-direction: row;justify-content: flex-start;align-items: center;}
.aside-tiles__title h3{margin-bottom: 0px!important; font-size: 0.9rem;max-width: 80%;}
.aside-tiles__banner{width: 95%;clip-path:polygon(0% 0%, 89% 0%, 100% 100%, 0% 100%);padding: 20px; background-color: var(--purple);color: var(--white);font-size: 1.2rem;margin-bottom: 0px !important;display: flex;flex-direction: row;align-content: center;justify-content: flex-start;align-items: center;}
.aside-tiles__banner p{margin-bottom: 0px !important; font-size: 0.9rem; text-align: left;}
.aside-tiles__banner--green{background-color: var(--green); color: var(--white);}
.aside-tiles__banner--yellow{background-color: var(--yellow); color: var(--purple);}
.aside-tiles__banner--orange{background-color: var(--orange); color: var(--white);}
.aside-tiles__banner--blu{background-color: var(--blu); color: var(--white);}
.aside-tiles__banner--red{background-color: var(--red); color: var(--white);}
.aside-tiles__banner--purple-dark{background-color: var(--purple-dark); color: var(--white);}

.aside--dashboard__menu ul li{display: inline-block;width: 100%;margin: 5px 0px;}
.aside--dashboard__menu ul li a{display: inline-flex; flex-direction: row; align-content: center; align-items: center; width: 100%;column-gap: 10px; background-color: #D9D9D9;color: var(--purple);padding: 5px 15px 5px 5px; border-radius: 10px;}
.aside--dashboard__menu-icon{background-color: var(--purple); border-radius: 10px; width: 100%; max-width: 80px;min-width: 80px; padding: 5px;text-align: center;}
.aside--dashboard__menu-icon img{width: 22px; height: auto; margin-top: 5px;}

.aside--dashboard__menu ul li a:hover,.aside--dashboard__menu ul li a:active, .aside--dashboard__menu ul li a.aside-menu-li-active{background-color:var(--yellow);}

@media (min-width:768px) and (max-width: 1024px){
 .aside-tiles__title, .aside-tiles__banner{width: 55%;}
}

/* ! Pagination */
.pagination {display: inline-block;}
.pagination__content{margin: 0px auto;display: flex; flex-direction: row; align-content: center; align-items: center; gap: 15px;flex-wrap: wrap;justify-content: center;}
.pagination a {color: var(--purple); float: left; padding: 15px 20px; text-decoration: none; border: 2px solid var(--yellow); font-size: 1.1rem; border-radius: 8px;}

@media (max-width: 768px){
.pagination a {padding:5px 10px; font-size: 1rem; }
}

/* ! Box Modal & Lightbox */
.box-indirizzo-di-spedizione{background-color: #E8E8E8; padding: 20px;border-radius: 30px;position: relative;min-height:100%;}
.box-indirizzo-di-spedizione--bg-light-green{background: rgba(105, 178, 27, 0.2);}
.box-indirizzo-di-spedizione img{position: absolute; top:-5px; right: -5px;width: 30px;height: 30px;}
.box-indirizzo-di-spedizione > .js-modify-address {position: absolute;bottom: -10px;right: 10px;}

#form-aggiorna-profilo .col-100{display: flex; flex-direction: row; column-gap:10px; flex-wrap: nowrap;}
#form-aggiorna-profilo .col-100 a.button{align-items: flex-end;}

/* Lightbox */
.gallery {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(2, 1fr);gap: 20px;align-items: stretch;}
.gallery img {width: 100%;height: auto;object-fit: cover;cursor: pointer;border-radius: 20px;transition: transform 0.2s;}
.gallery img:hover {transform: scale(1.05);}
.lightbox {display: none;position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.9);justify-content: center;align-items: center;flex-direction: column;z-index: 1000;padding: 20px;box-sizing: border-box;text-align: center;}
.lightbox.active {display: flex;}
.lightbox img {max-width: 90%;max-height: 60vh;border-radius: 8px;margin-bottom: 15px;}
.lightbox .info {color: white;max-width: 80%;}
.lightbox .info h2 {margin: 10px 0 5px;font-size: 24px;}
.lightbox .info p {margin: 0;font-size: 16px;}
.close-btn,
.prev-btn,
.next-btn {position: absolute; top: 50%;transform: translateY(-50%);color: white;font-size: 2rem;background: transparent;border: none;padding: 10px;cursor: pointer;border-radius: 50%;}
.close-btn {top: 20px;right: 20px;transform: none;font-size: 4.5rem;}
.prev-btn {left: 30px;}
.next-btn {right: 30px;}
.close-btn:hover,
.prev-btn:hover,
.next-btn:hover {background: transparent;}

/* ! FAQ Accordion */
.tab {position: relative;}
.tab input {position: absolute;opacity: 0;z-index: -1;}
.tab label{font-size: 1.1rem;}
.tab__content {max-height: 0;overflow: hidden;transition: all 0.35s; margin: 10px 0px; border: 1px solid var(--white); border-radius: 20px;}
.tab input:checked ~ .tab__content {max-height: 10rem;border: 1px solid var(--green);margin: 10px 0px;border-radius: 20px;}

.accordion {color: var(--purple);overflow: hidden;}
.tab__label,
.tab__close {display: flex;color: white;background: var(--purple);cursor: pointer}
.tab__label {justify-content: space-between;padding: 20px;border-radius:20px;}
.tab__label:hover{background-color: var(--green);}

.tab__label::after {content: "\276F";width: 1em;height: 1em;text-align: center;transform: rotate(90deg);transition: all 0.35s;}
.tab input:checked + .tab__label::after{transform: rotate(270deg);}
.tab input:checked + .tab__label {background-color: var(--green)}
.tab__content p {margin: 0;padding: 20px;}
.tab__close {justify-content: flex-end;padding: 0.5rem 1rem;font-size: 0.75rem;}

.tab input:not(:checked) + .tab__label:hover::after {animation: bounce .5s infinite;}
@keyframes bounce {
  25% {
    transform: rotate(90deg) translate(.25rem);
  }
  75% {
    transform: rotate(90deg) translate(-.25rem);
  }
}

/* !Form */
.form-inline {display: flex; flex-flow: row wrap; align-items: center;}
.form-inline label {margin: 5px 10px 5px 0;}
.form-inline input {vertical-align: middle;margin: 5px 10px 5px 0;padding: 10px;background-color: #fff;border: 1px solid #ddd}
.form-inline button {padding: 10px 20px;background-color: (--yellow);border: none;border-radius: 8px;color: (--purple);}
.form-inline button:hover {background-color: (--purple);color: (--white);}

.form__field--inline{display: grid; grid-template-columns: 140px 1fr; column-gap: 10px;align-items: center;}

label{display:none;}

.form {display: flex; flex-flow: column wrap;row-gap:12px}
.form label {margin: 5px 10px 5px 0;}
.form input[type='checkbox'],.form input[type='radio'] {display: inline!important;width: auto; margin-top: -0.5px;}
.form input, .form textarea {vertical-align: middle;margin: 5px 0px;padding: 10px;background-color: rgba(250, 191, 3, 0.3);border: none; border-radius: 5px;width: 100%;font-size: 1.1rem;}
.form button {padding: 10px 20px;background-color: (--yellow);border: none;border-radius: 8px;color: (--purple);}
.form button:hover {background-color: (--purple);color: (--white);}
.form .display-flex{justify-content: flex-start!important;}
.form input[type='file'],.form input[type='radio'] {display: inline!important;width: auto; background: transparent;}
.form--grey input, .form--grey textarea, .form--grey select {background-color: #D9D9D9; width: 100%;}

.form--login{padding: 40px; border-radius: 10px; background: var(--purple); color:var(--white);}
.form--login label.checkbox{color:var(--white); font-size: 1.2rem;}
.form--login p a{color: var(--white);}
.form--login input{background-color: var(--white);}

::placeholder{font-size: 1rem;}

/* Campo invalido */
.form__field--inline.is-invalid input {border: 1px solid red; background-color: rgba(217, 48, 37, 0.05);}
/* Messaggio errore */
.form__field--inline.is-invalid .error-message {display: block;color:red;font-size: 0.85rem;}
/* errore sotto l’input */
.form__field--inline .error-message {grid-column: 2;}
/* Messaggio Form non valida */
.form-error-message {margin-top: 10px; padding: 10px; background-color: rgba(217, 48, 37, 0.05); border: 1px solid red; border-radius: 5px; color: red; font-size: 0.85rem; display: block; /* visibile di default */}
.form > div > a.button {margin-bottom: 5px;}

#form-crea-nuovo-account, .form-aggiorna-profilo{display: flex;flex-direction: row; row-gap:20px; column-gap: 100px; flex-wrap: nowrap;}
.col-1, .col-2{display: flex;flex-direction: column;row-gap: 10px;flex-wrap: wrap; align-items: stretch;width: 50%;padding: 0px!important;}
#ordini-e-resi-periodo{background-color: #E4E4E4;padding: 5px; border: none;}
#checkout__metodo-di-pagamento{display: flex; justify-content: space-between;}
#checkout__metodo-di-pagamento div{display: flex; align-items: flex-start; align-content: flex-start;flex-direction: column;justify-content: flex-start;}
#checkout__metodo-di-pagamento img{width: 50%;min-width: 50px;height: 100%;max-height: 30px;object-fit: contain;padding-left: 20px;}
#checkout__metodo-di-pagamento .button{padding: 5px;font-weight: normal; font-size: 0.9rem;margin-left: 20px;}

/* Modali */
.modal {position: fixed;inset: 0;z-index: 9999;pointer-events: none;opacity: 0;transition: opacity 0.3s ease;}
.modal__overlay {position: fixed;inset: 0;background: rgba(0,0,0,0.6);opacity: 0;transition: opacity 0.3s ease;}
.modal__content {position: fixed; top: 50%;left: 50%;transform: translate(-50%, -50%) scale(0.95);    width: 90%;max-width: 500px;background: #fff; padding: 30px;border-radius: 8px;box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);opacity: 0;transition: opacity 0.3s ease, transform 0.3s ease; max-height: 90vh; overflow-y: auto; box-sizing: border-box;}
.modal.active { pointer-events: auto;     /* riattiva click */opacity: 1;}
.modal.active .modal__overlay {opacity: 1;}
.modal.active .modal__content { opacity: 1; transform: translate(-50%, -50%) scale(1);}
.modal__close {border: none;background: transparent;font-size: 34px;cursor: pointer;padding: 0;line-height: 1;position: absolute; top: 10px;right: 10px;background:var(--yellow);}
/* Blocca scroll del body quando modale aperto */
body.modal-open {overflow: hidden;}

@media (max-width: 1024px) {
  .form-inline input {margin: 10px 0;}
  .form-inline {flex-direction: column;align-items: flex-start;}
  #form-crea-nuovo-account,#form-aggiorna-profilo{flex-wrap: wrap;}
  .col-1, .col-2 {width: 100%;}
}
@media (max-width: 768px) {
  .form-inline {flex-direction: column;align-items: stretch;}
  #checkout__metodo-di-pagamento{display: flex;justify-content: space-between;flex-direction: column;align-items: flex-start;gap: 15px;}
  .form-aggiorna-profilo{display: flex;flex-direction: column;}
  #form-aggiorna-profilo .col-100{flex-wrap: wrap;row-gap: 30px;}
}

/* ! Footer */
.footer{ background-color:#E8E8E8; display: flex; flex-direction: row; align-items: stretch; justify-content: flex-start; flex-wrap: wrap;}
.footer__info{padding: 3%!important; background: var(--purple);}
.footer__info img{width:100%; max-width: 190px!important; padding-bottom: 30px;}
.footer__info p{margin-bottom:5px!important; font-size: 1rem; font-weight: 400;}
.footer__info a{color:var(--green)!important;}
.footer__menu{display:flex; flex-direction: column; padding:3% 1% 1% 3% !important; flex-wrap: wrap;}
.footer__menu .col-100{display: flex; flex-direction: row; column-gap:50px; flex-wrap: nowrap;}
.footer__menu h3{font-size: 1.5rem!important; margin-bottom: 0px;}
.footer__menu ul{padding:10px 0px!important;}
.footer__menu li a{text-transform: uppercase; color: var(--purple);padding-bottom: 8px; display: block;font-size: 0.9rem;}
.footer__form{display: flex; flex-direction: row; align-items: center; column-gap:30px; row-gap: 0px; padding:10px; flex-wrap: wrap;}
.footer__form form{display: inline-flex;flex-direction: row; padding:0px;}
.footer__form input{padding:10px; border: none; border-radius: 10px; text-transform: capitalize!important;}
.footer__form input[type="email"]{width: 400px; margin-right: 15px;}
.footer__social{display: flex; justify-content: flex-end; flex-direction: row; align-items: center; column-gap: 15px;}
.footer__social img{color: var(--purple); width:30px; height:30px; display: inline-block; padding: 0px; margin-top: 20px;}
.footer__social li a{padding-bottom: 0px !important;margin-top: 20px;}
.footer__social--icons{display: contents;}
.subfooter{display: flex; flex-direction: row; background: #3E7D29; padding: 10px 2rem;align-items: center;}
.subfooter__payments{display: flex; flex-direction: row; gap: 20px;align-items: center; justify-content: flex-start;}
.subfooter__credits{display:flex; justify-content: flex-end;}
.subfooter p{margin-bottom:0px;margin-top: 3px;}
.subfooter ul{display: flex; flex-direction: row; gap: 20px;align-items: center; margin-bottom: 0px; flex-wrap: wrap;}
.subfooter ul img{width:100%; max-width: 50px;}
.subfooter a{color:var(--white);}

@media (max-width: 1024px){
.footer__menu {padding:1rem!important}
.footer__form form{padding:0px;}
.footer__social img,
.footer__social li a {margin-top: 0px;}
}

@media (max-width: 768px){
.footer__form input[type="email"]{width: 100%;}
.footer__social{justify-content: start;margin-top: 20px;}
.subfooter{flex-direction: column; padding: 1rem;}
.subfooter__payments{flex-direction: column;gap: 10px; align-items: flex-start; justify-content: flex-start; padding:0px}
.subfooter__credits{display:flex; justify-content: flex-start;}
}

/* -------------------------------------------------------------------------------- */
/* ! Grid System */
/* -------------------------------------------------------------------------------- */

.grid{display:flex; flex-wrap: wrap; max-width: 1920px; margin: 0px auto;}
.grid--small{max-width: 900px;}
.grid--full{max-width: 100%;}
.grid--center{justify-content: center;}

.grid-container {display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 0px; background-color: var(--white); padding: 0px; border: 1px solid var(--purple);}
.grid-container--text{display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 0px; background-color: var(--white); padding: 0px; border: none;}
.grid-item {background-color: var(--white);border: 1px solid var(--purple);padding: 10px;font-size: 1.1rem;text-align: left;}
.grid-container--text>.grid-item {background-color: var(--white);border: none;padding: 10px;font-size: 1rem;}
.grid-item--bg-green{background-color:#EAF4DF;}

    .col-20{width: 20%;}
    .col-25{width: 25%;}
    .col-30{width: 30%;}
    .col-33{width: 33.33%;}
    .col-40{width: 40%;}
    .col-50{width: 50%;}
    .col-60{width: 60%;}
    .col-70{width: 70%;}
    .col-80{width: 80%;}
    .col-90{width: 90%;}
    .col-100{width: 100%;}


    [class*='col-']{padding:10px;}

    .grid--full [class*='col-'],
    .grid [class*='col-']{padding:20px;}

/* -------------------------------------------------------------------------------- */
/* ! Helpers */
/* -------------------------------------------------------------------------------- */

    .overflow{overflow: hidden;}

    /* ! Img */
    .img-res{width: 100%;}
    .img-blurred{filter: blur(10px);}
    .img-icon{width: 100%;max-width: 150px; height: 150px; object-fit: contain;}
    .img-rounded{border-radius: 10px;}

    /* ! Video */
    .video-res{width: 100%;height: 100%;overflow: hidden;}
    .video-res video{width: 100%;height: 100%;object-fit: cover;}

    /* ! Background */
    .bg-grey{background: #E4E4E4;}
    .bg-green{background: var(--green);}
    .bg-black{background: #000;padding: 30px;}
    .bg-yellow{background: var(--yellow);}


    .icon-small{width: 40px;padding: 8px;}
    .icon-white{filter: invert(1);}
    .v-sep{border:1px solid var(--purple); margin: 0px 5px;}
    
    /* ! Text */
    .text-white{color: #fff;}
    .text-green{color: #458a27!important;}
    .text-yellow{color:#F5B829!important;}
    .text-strike{text-decoration: line-through;}
    .text-small{font-size:0.8rem!important;}
    .text-big{font-size:1.2rem!important;}
    .text-bold{font-weight: bold;}
    .text-barrato{text-decoration:line-through;}
    .text-center{text-align: center;}
    .text-left{text-align: left;}
    .text-right{text-align: right;}
    .v-center{display: flex; flex-flow: column; justify-content: center; align-items: center;}
    .h-center{display: flex; flex-flow: row; justify-content: center; align-items: center;}
    .align-right{text-align: right;}
    .align-left{text-align: left;}
    .font-normal{font-weight: 400;}
    .font-bold{font-weight: 700;}
    .font-light{font-weight: 200;}
    .uppercase{text-transform: uppercase;}

    /* ! Height */
    .vh-100{height: 100vh;}
    .vh-50{height: 50vh;}

    /* ! Display */
    .display-grid-4{display: grid; align-items: start; grid-gap: 30px; grid-template-columns: repeat(4, 1fr);justify-items: center;}
    .display-grid-3{display: grid; align-items: start; grid-gap: 30px; grid-template-columns: repeat(3, 1fr);justify-content: center;justify-items: center;}
    .display-grid-2{display: grid; align-items: start; grid-gap: 30px; grid-template-columns: repeat(2, 1fr);justify-content: center; justify-items: center;}
    .display-flex{display: flex;flex-direction: row;justify-content: space-between;flex-wrap: wrap;align-content: flex-start;align-items: center;gap:0px;column-gap: 10px;}
    .align-stretch{align-items: stretch;}
    .flex-start{display: flex;flex-direction: row;justify-content: flex-start;flex-wrap: wrap; align-content: center;align-items: center;row-gap: 20px; column-gap: 20px;}
    .row-gap-none{row-gap:0px;}
    .column-gap-none{column-gap:0px;}
    .none{display: none;}

    /* ! Divider */
    .divider{height: 2px; width: 100%; background-color: var(--yellow); margin: 10px 0px; display: block;}
    .divider--green{background-color: var(--green);}
    .divider--white{background-color: var(--white);}
    .divider--small{width: 50%!important}
    .drawLine{position:relative;}
    .drawLine:before{content:"";position:absolute;top:50%; left:0;width:100%;height:2px;background:var(--yellow);}
    .drawLine span{display:inline-block;background:#fff;position:relative;padding-right:25px;}
    .titolo-inline{display: inline-flex; align-items: center; gap: 50px; flex-direction: row;width: 100%; justify-content: space-between;}

    /* ! Margin & Padding */
    .mt-0{margin-top: 0;}
    .mt-1{margin-top: 1rem!important;}
    .mt-2{margin-top: 2rem!important;}
    .mt-3{margin-top: 3rem;}
    .mt-4{margin-top: 4rem;}
    .mt-6{margin-top: 6rem;}

    .mb-0{margin-bottom: 0;}
    .mb-1{margin-bottom: 1rem!important;}
    .mb-2{margin-bottom: 2rem!important;}
    .mb-3{margin-bottom: 3rem;}
    .mb-4{margin-bottom: 4rem;}
    .mb-6{margin-bottom: 6rem;}

    .mr-2{margin-right: 2rem!important;}

    .p-0{padding: 0!important;}
    .p-1{padding: 1rem;}
    .p-2{padding: 2rem;}
    .p-3{padding: 3rem;}
    .p-4{padding: 4rem;}
    .p-6{padding: 6rem;}

    .pt-0{padding-top: 0;}
    .pt-1{padding-top: 1rem;}
    .pt-2{padding-top: 2rem;}
    .pt-3{padding-top: 3rem;}
    .pt-4{padding-top: 4rem;}
    .pt-6{padding-top: 6rem;}

    .pb-0{padding-bottom: 0;}
    .pb-1{padding-bottom: 1rem;}
    .pb-2{padding-bottom: 2rem;}
    .pb-3{padding-bottom: 3rem;}
    .pb-4{padding-bottom: 4rem;}
    .pb-6{padding-bottom: 6rem;}

    .pl-2{padding-left: 2rem;}
    .pr-2{padding-right: 2rem;}
    .pl-3{padding-left: 3rem;}
    .pr-3{padding-right: 3rem;}

@media (max-width: 1124px) {
      .display-flex{justify-content:center;}
      .flex-start{justify-content: flex-start!important;}
      .vh-50{height: 100vh;}
}

@media (max-width: 1024px) {

    .display-grid-4,
    .display-grid-3, .grid-container{grid-template-columns: repeat(2, 1fr);}
    .display-flex{display: flex;flex-direction: column;justify-content: flex-start;flex-wrap: wrap;align-content: flex-start;align-items: flex-start;gap:30px;}
    .mt-2{margin-top: 1rem;}
    .mb-2{margin-top: 1rem;}
    .mb-6{margin-bottom: 4rem;}
    .mt-6{margin-top: 4rem;}
    .p-6{padding: 4rem 1rem;}
    .pl-2{padding-left: 1rem;}
    .pr-2{padding-right: 1rem;}
    .pl-3{padding-left: 1rem;}
    .pr-3{padding-right: 1rem;}
    .pt-6{padding-top: 4rem;}
    .pb-6{padding-bottom: 4rem;}

    [class*='col-']{width: 100%;}
    [class*='col-']{padding:1rem;}
    .grid [class*='col-']{padding:20px 0px;}
}

@media (max-width: 768px) {

.grid{display: flex;row-gap: 30px;flex-direction: column; align-items: stretch;}
.display-grid-4, .display-grid-3, .display-grid-2 .grid-container{grid-template-columns: repeat(1, 1fr);}
.grid-container--text>.grid-item {background-color: var(--white);border: none;padding: 10px;font-size: 1rem; text-align: left;}
.titolo-inline{display: inline-flex; align-items: center; gap: 0px; flex-direction: column;}
.footer__menu .col-100{flex-wrap: wrap;}

.cursor, .outline{display: none;}

.drawLine span{text-align: center;}
.vh-100{height: 50vh;}
.vh-50{height:50vh;display: flex;display: flex;align-items: center;justify-content: center;flex-direction: column;flex-wrap: wrap;gap: 10px;align-content: center;}
.sma-none{display: none;}
.text-0 {font-size: 3.5rem;}
.grid [class*='col-']{padding:0px;}
[class*='col-']{width: 100%;padding:0px}
.sma-33{width: 33.33%;}
.sma-50{width: 50%;}
.sma-25{width: 25%;}
.sma-margin-none{margin:0!important;}
}