@charset "utf-8";

/* CSS Document */



        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }

        

        :root {

            --accent-color: #88ccc9;

            --light-color: #f8f5ef;

            --dark-color: #333;

            --text-color: #333;

        }

        

        body {

            overflow-x: hidden;

            color: var(--text-color);

            background-color: #fff;

            line-height: 1.6;

            font-family: 'Inter', sans-serif;

            font-weight: 400;

        }

        

        h1, h2, h3, h4, h5 {

            font-weight: 700;

            font-family: "Playfair Display", serif;

        }



		a { color: #333; text-decoration: none;    }



		a:hover { color: #c1a659;  text-decoration: underline;     }





.testo {text-align: justify; font-size: 1.1rem!important; max-width: 1000px; display: block; margin: auto; line-height: 1.8; margin-bottom: 20px; }





















/* Contenitore navbar */

.nav-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}



/* Menu desktop - lo spostiamo a destra */

.nav-links {

    display: flex;

    list-style: none;

    gap: 0px;

    margin: 0;

    margin-left: auto;  /* Spinge il menu verso destra */

}



/* Azioni a destra (carrello + hamburger) */

.nav-actions {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-left: 20px;  /* Spazio tra menu e carrello */

}



/* Icona carrello */

.cart-icon {

    position: relative;

}



.cart-icon a {

    color: #333;

    font-size: 22px;

    text-decoration: none;

    display: flex;

    align-items: center;

}



.cart-count {

    position: absolute;

    top: -8px;

    right: -12px;

    background-color: #c1a659;

    color: white;

    font-size: 11px;

    font-weight: bold;

    min-width: 18px;

    height: 18px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0 4px;

}



/* Hamburger - nascosto su desktop */

.hamburger {

    font-size: 24px;

    cursor: pointer;

    color: #333;

    display: none;

}



/* Mobile */

@media (max-width: 768px) {

    .nav-links {

        display: none;  /* Nasconde il menu desktop */

    }

    

    .hamburger {

        display: block;  /* Mostra l'hamburger */

    }

    

    .nav-actions {

        margin-left: 0;

    }

}































/* Prezzo */

.product-price {

    margin: 15px 0 10px 0;

}



.price-amount {

    font-size: 28px;

    font-weight: 700;

    color: #88ccc9;

}



/* Benefici con icone e layout mobile one-column */

.product-benefits ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



.product-benefits li {

    font-size: 15px;

    color: #555;

    margin-bottom: 10px;

    display: flex;

    align-items: flex-start;

    gap: 10px;

}



.product-benefits li i {

    color: #88ccc9;

    font-size: 15px;

    margin-top: 2px;

    flex-shrink: 0;

}



/* Sezione acquisto */

.product-purchase {

    display: flex;

    gap: 12px;

    align-items: center;

    margin: 20px 0 0 0;

    flex-wrap: wrap;

}



ù

.qty-btn {

    width: 38px;

    height: 38px;

    background: #f5f5f5;

    border: none;

    font-size: 18px;

    font-weight: bold;

    cursor: pointer;

    transition: all 0.3s;

}



.qty-btn:hover {

    background: #88ccc9;

    color: white;

}



ù

/* Pulsanti */

.btn-add-to-cart {

    background: #88ccc9;

    color: white;

    border: none;

    padding: 10px 20px;

    border-radius: 50px;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s;

    display: inline-flex;

    align-items: center;

    gap: 8px;

}



.btn-add-to-cart:hover {

    background: #6bb5b2;

    transform: translateY(-2px);

}



.btn-buy-now {

    background: white;

    color: #88ccc9;

    border: 2px solid #88ccc9;

    padding: 8px 18px;

    border-radius: 50px;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s;

    display: inline-flex;

    align-items: center;

    gap: 8px;

}



.btn-buy-now:hover {

    background: #88ccc9;

    color: white;

    transform: translateY(-2px);

}



/* Mobile: benefici in colonna singola */

@media (max-width: 768px) {

    .product-benefits li {

        font-size: 13px;

    }

    

    .product-purchase {

        flex-direction: column;

        align-items: stretch;

    }

    

    .btn-add-to-cart, .btn-buy-now {

        justify-content: center;

    }

}









    .testo-titoli {

        font-size: 45px;

    }









@media (max-width: 4800px) {

    .testo-titoli {

        font-size: 30px;

    }



}





















.cart-icon {

  position: relative;

}



.cart-count {

  position: absolute;

  top: -6px;

  right: -12px;

  background-color: #c1a659;

  color: white;

  font-size: 11px;

  font-weight: bold;

  min-width: 16px;

  height: 16px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0 4px;

  font-family: sans-serif;

}





/* Notifica di aggiunta al carrello */

.cart-notification {

    position: fixed;

    bottom: 30px;

    right: 30px;

    z-index: 1000;

    transform: translateX(120%);

    transition: transform 0.3s ease-out;

}



.cart-notification.show {

    transform: translateX(0);

}



.notification-content {

    background: white;

    border-radius: 16px;

    padding: 16px 20px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.15);

    display: flex;

    align-items: center;

    gap: 15px;

    border-left: 4px solid #c1a659;

}



.notification-content i {

    font-size: 24px;

    color: #c1a659;

}



.notification-text {

    font-size: 14px;

    color: #333;

}



.notification-text strong {

    display: block;

    font-weight: 600;

    margin-bottom: 0px;

}



.notification-btn {

    background: #c1a659;

    color: white;

    text-decoration: none;

    padding: 8px 20px;

    border-radius: 50px;

    font-size: 13px;

    font-weight: 500;

    transition: background 0.3s;

    white-space: nowrap;

}



.notification-btn:hover {

    background:#AE9344;

    color: white;

}



/* Versione mobile */

@media (max-width: 768px) {

    .cart-notification {

        bottom: 20px;

        right: 20px;

        left: 20px;

    }

    

    .notification-content {

        padding: 12px 15px;

        flex-wrap: wrap;

        justify-content: center;

        text-align: center;

    }

    

    .notification-btn {

        width: 100%;

        text-align: center;

        margin-top: 5px;

    }

}









.btn-add-to-cart {

    background: #88ccc9;

    color: white;

    border: none;

    padding: 12px 25px;

    border-radius: 50px;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s;

    width: 100%;

}



.btn-add-to-cart:hover {

    background: #6bb5b2;

    transform: translateY(-2px);

}













/* Stato iniziale invisibile */

.animate-on-scroll {

  opacity: 0;

  transform: translateY(40px);

  transition: opacity 0.6s ease-out, transform 0.6s ease-out;

}



/* Quando è visibile */

.animate-on-scroll.visible {

  opacity: 1;

  transform: translateY(0);

}



.cart-item-quantity .animate-on-scroll {

    opacity: 1 !important;

    transform: translateY(0) !important;

    transition: none !important;

}









        .container {

            max-width: 1280px;

            margin: 0 auto;

            width: 100%;

            padding: 0 30px;

        }

        

        .header-home {

            position: relative;

            height: 100vh;

            min-height: 600px;

            background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('../img/header.jpg');

            background-size: cover;

            background-position: right;

            display: flex;

            flex-direction: column;

            color: white;

			justify-content: center; 

        }

        

        nav {

            display: flex;

            justify-content: space-between;

            align-items: center;

            padding: 10px 0;

            background-color: #fff;

            position: fixed;

            width: 100%;

            z-index: 1000;

            transition: all 0.4s ease;

            box-shadow: 0 2px 10px rgba(0,0,0,0.1);

			top:0px;

        }

        

        .nav-container {

            max-width: 1280px;

            width: 100%;

            margin: 0 auto;

            display: flex;

            justify-content: space-between;

            align-items: center;

            padding: 0 30px;

        }

        

        .logo {

            width: 180px;

            align-items: center;

        }

        

        .nav-links {

            display: flex;

            list-style: none;

        }

        

        .nav-links li {

            margin-left: 30px;

        }

        

        .nav-links a {

            text-decoration: none;

            color: var(--dark-color);

            font-weight: 600;

            font-size: 16px;

            padding: 8px 0;

            text-transform: uppercase;

            letter-spacing: 1px;

            transition: all 0.3s ease;

            position: relative;

        }

        

        .nav-links a:after {

            content: '';

            position: absolute;

            width: 0;

            height: 2px;

            background: #c1a659;

            bottom: 0;

            left: 0;

            transition: width 0.3s ease;

        }

        

        .nav-links a:hover:after,

        .nav-links a.active:after {

            width: 100%;

        }

        

        .nav-links a:hover,

        .nav-links a.active {

            color: #c1a659;

        }

        

        .hamburger {

            display: none;

            cursor: pointer;

            font-size: 24px;

            color: var(--dark-color);

        }

        

        .header-content {

            max-width: 50%;

            padding: 0;

            flex: 1;

            display: flex;

            flex-direction: column;

            justify-content: center;

            width: 100%;

            z-index: 2;

            margin-top: 60px;

        }

        

        .header-content h1 {

            font-size: 3.5rem;

            margin-bottom: 25px;

            line-height: 1.15;

            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);

        }

        

        .header-content p {

            font-size: 1.3rem;

            margin-bottom: 0px;

            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);

            font-weight: 300;

        }

        

        .btn-scroll {

            color: #c1a659;

            text-decoration: none;

            font-weight: 600;

            font-size: 18px;

            transform: translateY(30px);

            display: inline-block;

        }

        

        .btn-scroll span {

            margin-bottom: 10px;

            display: block;

        }

        

        .btn-scroll i {

            font-size: 24px;

            animation: bounce 1.5s infinite;

        }

        

        @keyframes bounce {

            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }

            40% { transform: translateY(-15px); }

            60% { transform: translateY(-10px); }

        }

        

        main {

            padding: 0 30px;

        }

        

        .section-title {

            font-size: 3em;

            text-align: center;

            padding: 40px 0 0px;

            color: var(--dark-color);

        }

        

        .section-subtitle {

            text-align: center;

            margin-bottom: 20px;

            font-size: 1.4em;

            position: relative;

            padding-bottom: 20px;

        }

        

        

        .features {

            display: flex;

            flex-wrap: wrap;

            justify-content: space-between;

            margin-bottom: 20px;

        }

        

        .feature {

            flex: 0 0 100%;

            display: flex;

            margin-bottom: 60px;

            background: transparent;

            overflow: hidden;

        }

        

        .feature-content {

            flex: 1;

            padding: 40px 40px 0px 0px;

            display: flex;

            flex-direction: column;

            justify-content: center;

            text-align: left;

        }



        .feature-content2 {

            flex: 1;

            padding: 40px 0px 0px 40px;

            display: flex;

            flex-direction: column;

            justify-content: center;

            text-align: left;

        }



        

        .feature-image {

            flex: 1.5;

            min-height: 500px;

            background-size: cover;

            background-position: center;

        }

        

        .feature:nth-child(even) {

            flex-direction: row-reverse;

        }

        

        .feature:nth-child(even) .feature-content {

            padding: 40px 0px 40px 40px;

            text-align: left;

        }



        .feature:nth-child(even) .feature-content2 {

            padding: 40px 0px 40px 40px;

            text-align: left;

        }



        

        .feature:nth-child(even) .feature-image {

        }

        

        .feature h3 {

            font-size: 2.2rem;

            margin-bottom: 20px;

            color: var(--dark-color);

        }

        

        .feature p {

            margin-bottom: 25px;

            font-size: 1.1rem;

            line-height: 1.8;

            color: #555;

            font-weight: 300;

        }

        

        .btn-outline {

            display: inline-flex;

            align-items: center;

            color: var(--accent-color);

            text-decoration: none;

            font-weight: 600;

            font-size: 18px;

            transition: all 0.3s ease;

            border: 2px solid var(--accent-color);

            border-radius: 30px;

            padding: 10px 25px;

            max-width: 190px;

        }

        

        .btn-outline i {

            margin-left: 10px;

            transition: transform 0.3s ease;

        }

        

        .btn-outline:hover {

            background: var(--accent-color);

            color: white;

			text-decoration: none;



        }

        

        .btn-outline:hover i {

            transform: translateX(5px);

        }





        .btn-invio {

            display: inline-flex;

            align-items: center;

            color: #fff;

            text-decoration: none;

            font-weight: 600;

            font-size: 18px;

            transition: all 0.3s ease;

            background: #c1a659;

            border-radius: 30px;

            padding: 15px 25px;

            max-width: 300px;

			border: 0px;

        }

        

        .btn-invio i {

            margin-left: 10px;

            transition: transform 0.3s ease;

        }

        

        .btn-invio:hover {

            background: #dcc47f;

            color: white;

			text-decoration: none;



        }

        

        .btn-invio:hover i {

            transform: translateX(5px);

        }









        

        .btn-custom {

            display: inline-flex;

            align-items: center;

            color: #000;

            text-decoration: none;

            font-weight: 600;

            font-size: 18px;

            transition: all 0.3s ease;

            border: 2px solid #000;

            border-radius: 30px;

            padding: 10px 25px;

        }

        

        .btn-custom i {

            margin-left: 10px;

            transition: transform 0.3s ease;

        }

        

        .btn-custom:hover {

            background: #000;

            color: white;

			text-decoration: none;

        }

        

        .btn-custom:hover i {

            transform: translateX(5px);

        }





        .btn-custom2 {

            display: inline-flex;

            align-items: center;

            color: #fff;

            text-decoration: none;

            font-weight: 600;

            font-size: 18px;

            transition: all 0.3s ease;

            border: 2px solid #fff;

            border-radius: 30px;

            padding: 15px 60px;

        }

        

        .btn-custom2 i {

            margin-left: 10px;

            transition: transform 0.3s ease;

        }

        

        .btn-custom2:hover {

            background: #fff;

            color: #88ccc9;

			text-decoration: none;

        }

        

        .btn-custom2:hover i {

            transform: translateX(5px);

        }



        

        .promo-banner {

            background: var(--light-color);

            padding: 70px 0;

            width: 100%;

        }

        

        .promo-content {

            display: flex;

            justify-content: space-between;

            align-items: center;

            max-width: 1280px;

            margin: 0 auto;

            padding: 0 30px;

        }

        

        .promo-text {

            flex: 2;

            padding-right: 40px;

            max-width: 900px;

        }

        

        .promo-text h3 {

            font-size: 2.2rem;

			line-height: 1.4;

            margin-bottom: 20px;

            color: var(--dark-color);

        }

        

        .promo-btn {

            text-align: right;

        }

        

        .mobile-menu {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: #fff;

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            z-index: 2000;

            transform: translateY(-100%);

            transition: transform 0.5s ease;

        }

        

        .mobile-menu.active {

            transform: translateY(0);

        }

        

        .mobile-menu .close-btn {

            position: absolute;

            top: 30px;

            right: 30px;

            font-size: 30px;

            color: var(--dark-color);

            cursor: pointer;

        }

        

        .mobile-links {

            list-style: none;

            text-align: center;

            margin-bottom: 40px;

        }

        

        .mobile-links li {

            margin: 25px 0;

        }

        

        .mobile-links a {

            color: var(--dark-color);

            text-decoration: none;

            font-size: 22px;

            font-weight: 600;

            transition: all 0.3s ease;

            text-transform: uppercase;

            letter-spacing: 1px;

        }

        

        .mobile-links a:hover,

        .mobile-links a.active {

            color: #c1a659;

        }

        

        .mobile-social {

            margin-top: 20px;

            display: flex;

            font-size: 12px;

            text-decoration: none;

        }

        

        .mobile-social a {

            display: flex;

            align-items: center;

            justify-content: center;

            width: 45px;

            height: 45px;

            border-radius: 50%;

            background: rgba(0, 0, 0, 0.05);

            margin: 0 10px;

            color: var(--dark-color);

            font-size: 18px;

            transition: all 0.3s ease;

            text-decoration: none;

        }

        

        .mobile-social a:hover {

            background: #c1a659;

            color: white;

            transform: translateY(-3px);

        }

        

        footer {

            background: #fff;

            color: var(--dark-color);

            padding: 40px 0 30px;

            border-top: 1px solid #eee;

        }

        

        .footer-content {

            max-width: 1280px;

            margin: 0 auto;

            display: flex;

            padding: 0 30px;

        }

        

        .footer-logo {

            margin-right: 60px;

            flex-shrink: 0;

        }

        

        .footer-logo .logo {

            width: 130px;

        }

        

        .footer-info {

            flex: 1;

        }

        

        .footer-info p {

            font-size: 16px;

            line-height: 1.6;

            margin-bottom: 8px;

        }

        

        .footer-separator {

            display: inline-block;

            margin: 0 10px;

            color: #aaa;

        }

        

        .nowrap {

            white-space: nowrap;

        }

        

        .copyright {

            padding-top: 20px;

            text-align: center;

            border-top: 1px solid #eee;

            margin-top: 20px;

            font-size: 14px;

            opacity: 0.7;

        }

        

        /* Animazioni */

        .animate {

            opacity: 1 !important;

            transform: translate(0, 0) !important;

            transition: all 0.8s ease-out;

        }

        

        /* Responsive design */

        @media (max-width: 1024px) {

            .header-content {

                max-width: 60%;

            }

            

            .header-content h1 {

                font-size: 3rem;

            }

            

            .feature {

                flex-direction: column;

                margin-bottom: 40px;

            }

            

            .feature:nth-child(even) {

                flex-direction: column;

            }

            

            .feature-image {

                min-height: 400px;

            }

            

            .feature-content, 

            .feature:nth-child(even) .feature-content {

                padding: 0px 0 0 0;

                text-align: center;

            }

            

            .feature:nth-child(even) .feature-content {

                text-align: center;

            }

			

			            .feature-content2, 

            .feature:nth-child(even) .feature-content2 {

                padding: 0px 0 0 0;

                text-align: center;

            }

            

            .feature:nth-child(even) .feature-content2{

                text-align: center;

            }



            

            .btn-outline {

                margin: 0 auto;

            }

			

			            .btn-invio {

                margin: 0 auto;

            }



        }

        

        @media (max-width: 1024px) {

            .container {

                padding: 0 30px;

            }

            

            .nav-links {

                display: none;

            }

            

            .hamburger {

                display: block;

            }

            

            .header-content {

                max-width: 100%;

                text-align: center;

                padding: 0 20px;

                margin-top: 0;

            }

            

            .header-content h1 {

                font-size: 2.5rem;

            }

            

            .section-title {

                font-size: 2.5rem;

                padding: 40px 0 10px;

            }

            

            .section-subtitle {

                font-size: 1.2rem;

                margin-bottom: 30px;

            }

            

            .promo-content {

                flex-direction: column;

                text-align: center;

            }

            

            .promo-text {

                padding-right: 0;

                margin-bottom: 30px;

				max-width: 700px;

            }

            

            .promo-text h3 {

                font-size: 1.8rem;

            }

            

            .promo-btn {

                text-align: center;

            }

            

            .footer-content {

                flex-direction: column;

                text-align: center;

            }

            

            .footer-logo {

				        margin: auto;

        padding-bottom: 20px;

            }

            

            .footer-info {

                width: 100%;

            }

            

            .footer-separator {

                display: none;

            }

            

            .nowrap {

                display: block;

                margin: 5px 0;

            }

			

			

			        .section-subtitle:after {

            content: '';

            position: absolute;

            bottom: 0;

            left: 50%;

            transform: translateX(-50%);

            width: 100px;

            height: 2px;

            background: var(--accent-color);

        }



			

			

        }

        

        @media (max-width: 480px) {

            header{

			padding-top: 80px;

			}

			

			.header-content h1 {

                font-size: 2.5rem;

            }

            

            .header-content p {

                font-size: 1rem;

            }

            

            .section-title {

                font-size: 2rem;

                padding: 50px 0 10px;

            }

            

            .section-subtitle {

                font-size: 1.3rem;

            }

            

            .feature h3 {

                font-size: 1.8rem;

            }

            

            .feature p {

                font-size: 1rem;

            }

            

            .promo-banner {

                padding: 50px 0;

            }

            

            .promo-text h3 {

                font-size: 1.8rem;

            }

            

            .btn-custom {

                font-size: 1rem;

                padding: 8px 20px;

            }

			            .btn-custom2 {

                font-size: 1rem;

                padding: 8px 20px;

            }



        }





	        /* Hero Section prodotti */

        .promo-banner-products {

            background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('../img/prodotti-cosmetici-soterbach.jpg') no-repeat center center/cover;

            height: 500px;

            display: flex;

            align-items: center;

            justify-content: center;

            text-align: center;

            color: white;

			padding-top: 70px;

        }



        .promo-banner-products2 {

            background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../img/about-us-soter-bach.jpg') no-repeat center center/cover;

            height: 500px;

            display: flex;

            align-items: center;

            justify-content: center;

            text-align: center;

            color: white;

			padding-top: 70px;

        }





        .intro-banner-cuore {

            background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('../img/cosmetici-naturali-fiori-bach.jpg') no-repeat center center/cover;

            height: 500px;

            display: flex;

            align-items: center;

            justify-content: center;

            text-align: center;

            color: white;

			padding-top: 70px;

        }



        .intro-banner-contatti {

            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/contatti-soterbach.jpg') no-repeat center center/cover;

            height: 500px;

            display: flex;

            align-items: center;

            justify-content: center;

            text-align: center;

            color: white;

			padding-top: 70px;

        }









        .floriterapia {

            background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('../img/cosmetici-naturali-fiori-bach.jpg') no-repeat   center/cover;



            height: auto;

            display: flex;

            align-items: center;

            justify-content: center;

            text-align: center;

            color: white;

			padding-top: 70px;

			padding-bottom: 70px;

        }







        

        .promo-content-products {

            max-width: 1200px;

            padding: 0 20px;

        }

        

        .promo-content-products h1 {

            font-size: 3.5rem;

			line-height: 1.1;

            font-weight: 300;

            margin-bottom: 20px;

            letter-spacing: 2px;

        }

        

        .promo-content-products p {

            font-size: 1.2rem;

            max-width: 600px;

            margin: 0 auto;

        }

		

		

		

		



		

		

        .products-grid {

            display: grid;

            grid-template-columns: 1fr;

            gap: 60px;

        }

        

        .product-card {

            display: flex;

            gap: 20px;

            background: white;

            border-radius: 20px;

            overflow: hidden;

        }

        

        

        .product-gallery {

            flex: 1;

            padding: 50px 30px;

            background: #fff;

            flex-direction: column;

            align-items: center;

        }

        

        .product-main-image {

            width: 100%;

            max-width: 500px;

            height: 400px;

            object-fit: cover;

            border-radius: 20px;

display: block;

    margin: auto;

    margin-bottom: 30px;        }

        

        .product-thumbnails {

            display: flex;

            gap: 15px;

            justify-content: center;

            flex-wrap: wrap;

        }

        

        .thumbnail {

            width: 70px;

            height: 70px;

            border-radius:0px;

            overflow: hidden;

            cursor: pointer;

            border: 2px solid transparent;

            transition: all 0.3s ease;

        }

        

        .thumbnail:hover {

            border-color: var(--accent-color);

            transform: translateY(-5px);

        }

        

        .thumbnail.active {

            border-color: #c1a659;

            transform: scale(1.05);

        }

        

        .thumbnail img {

            width: 100%;

            height: 100%;

            object-fit: cover;

            display: block;

        }

        

        .product-info {

            flex: 1;

            padding: 40px 30px 40px 30px;

            display: flex;

            flex-direction: column;

        }

		

		 .product-info2 {

            flex: 1;

            padding: 40px 30px 40px 50px;

            display: flex;

            flex-direction: column;

        }

        

        .product-title {

            font-family: 'Playfair Display', serif;

            font-size: 2.2rem;

            margin-bottom: 10px;

            color: var(--dark-color);

            position: relative;

            padding-bottom: 10px;

        }

        

        .product-title:after {

            content: '';

            position: absolute;

            bottom: 0;

            left: 0;

            width: 60px;

            height: 3px;

            background: var(--accent-color);

        }





        .contact-title {

            font-family: 'Playfair Display', serif;

            font-size: 2.2rem;

            margin-bottom: 20px;

            color: var(--dark-color);

            position: relative;

            padding-bottom: 15px;

			text-align: left;

        }

        

        .contact-title:after {

            content: '';

            position: absolute;

            bottom: 0;

            left: 0;

            width: 60px;

            height: 3px;

            background: #dcc47f;

        }



        

        .product-description {

            font-size: 1.1rem;

            margin-bottom: 25px;

            line-height: 1.8;

        }

        

        .product-benefits {

            margin-top: auto;

        }

        

        .benefits-title {

            font-size: 1.3rem;

            margin-bottom: 15px;

            color: #88ccc9;

            font-weight: 600;

        }

        

        .benefits-list {

            padding-left: 5px;

			list-style-type:none;

        }

        

        .benefits-list li {

            margin-bottom: 9px;

            position: relative;

            padding-left: 20px;

        }

        

        .benefits-list li:before {

            content: '';

            position: absolute;

            left: 0;

            top: 10px;

            width: 5px;

            height: 5px;

            background: #88ccc9;

            border-radius: 50%;

        }

		

			.mobile {display: none;}

			.no-mobile {display: block;}

		

					.titolo {font-size: 3.4em}





        

        /* Responsive design */

        @media (max-width: 1024px) {

            .product-card {

                flex-direction: column;

                gap: 0px;

            }

            

            .product-gallery {

                padding: 50px;

            }

            

            .product-info {

		padding: 0px 50px 50px 50px;



            }

			

		.product-info2 {

		padding: 50px 50px 0px 50px;

            }



            

            .product-main-image {

                height: 350px;

        }

						.mobile {display: block; margin: }

			.no-mobile {display: none;}

}

        

        @media (max-width: 768px) {

            .section-title h2 {

                font-size: 2.3rem;

            }

            

            .product-main-image {

                height: 300px;

            }

            

            .thumbnail {

                width: 60px;

                height: 60px;

            }

        }

        

        @media (max-width: 480px) {

            .section-title h2 {

                font-size: 2rem;

            }

            

            .section-title p {

                font-size: 1.1rem;

            }

            

            .product-title {

                font-size: 1.8rem;

            }

			

			            .contact-title {

                font-size: 1.8rem;

            }



            

            .product-main-image {

                height: 250px;

				border-radius: 0px;

            }

            

            .thumbnail {

                width: 50px;

                height: 50px;

            }

			            .product-gallery {

                padding: 0px 0px 30px 0px;

            }

			

			            .product-info {

		padding: 0px 20px 20px 20px;



            }

			

		.product-info2 {padding: 0px 20px 20px 20px;}

			

			

			.titolo {font-size: 2.9em}

			

			

			        .promo-content-products h1 {

            font-size: 2rem;

        }







        }

		

		







/* CUORE */



	 /* Edward Bach Section */

        .bach-section {

            background: #f8f5ef;

            border-radius: 20px;

            padding: 60px 60px 30px 60px;

            margin: 80px 0px 0px 0px ;

        }

        

        .bach-container {

            display: flex;

            gap: 50px;

            align-items: flex-start;

        }

        

        .bach-title-container {

            flex: 0 0 30%;

            text-align: right;

            padding-right: 30px;

            border-right: 2px solid #c1a659;

        }

        

        .bach-title {

            font-size: 1.1rem;

            font-weight: 300;

            color: #333;

            line-height: 0.9;

            margin-bottom: 5px;

			text-transform: uppercase;

        }

        

        .bach-subtitle {

            font-size: 3rem;

            color: #c1a659;

            font-weight: 500;

			line-height: 1.2;

        }

        

        .bach-content {

            flex: 1;

        }



        .section-text {

            font-size: 1.1rem;

            color: #555;

            line-height: 1.9;

            margin-bottom: 30px;

        }

        

        .section-text p {

            margin-bottom: 25px;

        }









        /* Responsive */

        @media (max-width: 992px) {

            .bach-container {

                flex-direction: column;

                gap: 30px;

            }

            

            .bach-title-container {

                text-align: center;

                padding-right: 0;

                border-right: none;

                border-bottom: 2px solid #c1a659;

                padding-bottom: 30px;

                width: 100%;

            }

            

        }

        

        @media (max-width: 768px) {

            

            

            .bach-title {

                font-size: 0.9rem;

            }

            

            .bach-subtitle {

                font-size: 2.4rem;

            }

                        

            .bach-section, .floriterapia-section {

                padding: 40px 20px;

            }

        }



	

	

	

	

	

	

	

	

	

	        /* Floriterapia Section */

        .floriterapia-section {

            position: relative;

            margin: 80px 0;

        }

        

        .floriterapia-container {

            display: flex;

            gap: 50px;

            align-items: center;

        }

        

        .floriterapia-text {

            flex: 0.7;

        }

        

        .floriterapia-image {

            max-width: 50%;

            overflow: hidden;

        }

        

        .floriterapia-image:hover {

        }

        

        .floriterapia-image img {

            width: 100%;

            height: auto;

            display: block;

        }





        @media (max-width: 1024px) {

                        

            .floriterapia-container {

                flex-direction: column;

            }

            

            .floriterapia-image {

                width: 100%;

            }

            

        }

        

        @media (max-width: 768px) {

            

            .bach-section, .floriterapia-section {

                padding: 40px 20px;

            }

        }



	

	

	

	

	

	

	        .benefits-grid {

            display: grid;

            grid-template-columns: repeat(3, 1fr);

            gap: 30px;

            margin-top: 50px;

        }

        

        .benefit-card {

            text-align: center;

            padding: 40px 30px;

            background: #f8f5ef;

            border-radius: 10px;

            transition: transform 0.3s ease;

        }

        

        .benefit-card:hover {

            transform: translateY(-10px);

        }

        

        .benefit-icon {

            font-size: 3rem;

            color: #c1a659;

            margin-bottom: 25px;



        }

        

        .benefit-title {

            font-size: 1.4rem;

            margin-bottom: 15px;

            color: #333;

        }

        

        /* Disclaimer */

        .disclaimer {

            background: linear-gradient(to right, rgba(136, 204, 201, 0.1) 0%, rgba(136, 204, 201, 0.05) 100%);

            padding: 40px;

            border-radius: 10px;

            border-left: 4px solid #88ccc9;

            margin-top: 60px;

            font-size: 1.1rem;

            color: #333;

			font-weight: 500;

        }



        .disclaimer-2 {

            background: #f8f5ef;

            padding: 40px;

            border-radius: 10px;

            border-left: 4px solid #c1a659;

            margin-top: 60px;

            font-size: 1.1rem;

            color: #333;

			font-weight: 500;

        }





        

        /* Responsive */

        @media (max-width: 992px) {

            

            .benefits-grid {

                grid-template-columns: repeat(2, 1fr);

            }

        }

        

        @media (max-width: 768px) {

            

            .benefits-grid {

                grid-template-columns: 1fr;

            }

            

        }



	

	

	

	

	

	

	

	

	

	

	

	

	

	

	

	

	

	

	

	

/* Mission Section */

.mission-section {

    background-color: #fff;

}

.mission-content {

    display: flex;

    gap: 50px;

    align-items: center;

}

.mission-text {

    flex: 1;

    margin: auto;

    padding-top: 40px;

    padding-bottom: 40px;

    text-align: center;

}

.mission-text h3 {

    font-size: 2.2rem;

    margin-bottom: 25px;

    color: var(--accent-color);

}

.mission-text p {

    font-size: 1.3rem;

    margin-bottom: 20px;

    line-height: 1.8;

}

.mission-image {

    flex: 1;

    border-radius: 10px;

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(0,0,0,0.1);

}

.mission-image img {

    width: 100%;

    height: auto;

    display: block;

}

/* Values Section */

.values-section {

    background-color: #fff;

}

.values-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 40px;

    margin-top: 50px;

}

.value-card {

    background: #f8f5ef;

    padding: 40px;

    border-radius: 10px;

    text-align: center;

    transition: transform 0.3s ease;

}

.value-card:hover {

    transform: translateY(-10px);

}

.value-icon {

    font-size: 3rem;

    color: #c1a659;

    margin-bottom: 20px;

}

.value-card h3 {

    font-size: 1.8rem;

    margin-bottom: 15px;

}

.btn-white {

    display: inline-flex;

    align-items: center;

    background: white;

    color: var(--accent-color);

    text-decoration: none;

    font-weight: 600;

    font-size: 18px;

    transition: all 0.3s ease;

    border: 2px solid white;

    border-radius: 30px;

    padding: 12px 30px;

}

.btn-white:hover {

    background: transparent;

    color: white;

	text-decoration: none;

}

.promo-banner-about {

    background: #88ccc9;

    padding: 50px 0px 50px 0px;

    width: 100%;

}

.promo-banner-about h1 {

    font-size: 3rem;

}

.promo-content-about {

    display: flex;

    justify-content: space-between;

    align-items: center;

    max-width: 1280px;

    margin: 0 auto;

    padding: 10px 30px 0px 30px;

}

.promo-content-about2 {

    align-items: center;

    max-width: 1280px;

    margin: 0 auto;

    padding: 60px 30px 0px 30px;

}

.promo-banner-about p {

    font-size: 1.5rem;

    line-height: 1.5;

    margin-bottom: 20px;

    color: #fff;

    max-width: 850px;

    margin: auto;

}

.promo-text-about {

    flex: 2;

    padding-right: 40px;

}

.promo-text-about h3 {

    font-size: 2.2rem;

    line-height: 1.4;

    margin-bottom: 20px;

    color: var(--dark-color);

}

.promo-btn-about {

    text-align: right;

}

.highlight {

    display: inline-block;

    padding: 30px;

    margin: 40px 0;

    font-style: italic;

    font-size: 1.3rem;

    position: relative;

    color: var(--accent-color);

    text-align: center;

    margin: auto;

}

.highlight:before, .highlight:after {

    content: '"';

    position: absolute;

    font-size: 4rem;

    font-family: Georgia, serif;

    color: rgba(136, 204, 201, 0.2);

    text-align: center;

    margin: auto;

}

.highlight:before {

    top: -20px;

    left: -20px;

}

.highlight:after {

    bottom: -40px;

    right: -20px;

}

.section-title-about {

    text-align: center;

    padding: 40px 0 0px;

    color: var(--dark-color);

}



/* Responsive Design */

@media (max-width: 1024px) {

.mission-content {

    flex-direction: column;

}

.mission-image {

    max-width: 600px;

    margin: 0 auto;

}

.about-header h1 {

    font-size: 3.2rem;

}

}



@media (max-width: 1024px) {

.about-header {

    height: 60vh;

}

.about-header h1 {

    font-size: 2.5rem;

}

.about-header p {

    font-size: 1.2rem;

}

.section-title-abot {

    font-size: 2.5rem;

    padding: 40px 0 10px;

}

.promo-content-about {

    flex-direction: column;

    text-align: center;

    padding: 0px;

}

.promo-text-about {

    flex: 2;

    padding-right: 30px;

    padding-left: 30px;

    max-width: 900px;

}

.promo-text-about h3 {

    font-size: 1.8rem;

    margin-bottom: 20px;

    color: var(--dark-color);

}

}



@media (max-width: 480px) {

.about-header {

    height: 50vh;

    min-height: 400px;

}

.about-header h1 {

    font-size: 2rem;

}

.highlight {

    font-size: 1.4rem;

    padding: 20px;

}

.section-title-about {

    padding: 50px 0 10px;

}

.section-title-about {

    padding: 50px 0 10px;

}

}



		





        /* Contact Section */

        .contact-section {

            display: flex;

            flex-wrap: wrap;

            gap: 50px;

            margin-bottom: 40px;

            position: relative;

        }

        

        .contact-form {

            flex: 1;

            min-width: 300px;

            padding-right: 50px;

        }

        

        .contact-info {

            flex: 1;

            min-width: 300px;

            padding-left: 50px;

        }

        

        /* Vertical separator */

        .vertical-separator {

            position: absolute;

            left: 50%;

            top: 0;

            bottom: 0;

            width: 1px;

            background: #e0dcd1;

            margin: 30px 0;

        }

        

        

        .form-group {

            margin-bottom: 25px;

        }

        

        label {

            display: block;

            margin-bottom: 8px;

            font-weight: 500;

            color: #555;

            font-size: 0.95rem;

        }

        

        input, textarea {

            width: 100%;

            padding: 14px 18px;

            border: 1px solid #e0dcd1;

            border-radius: 8px;

            font-size: 1rem;

            transition: all 0.3s ease;

            background-color: white;

            color: #555;

        }

        

        input:focus, textarea:focus {

            outline: none;

            border-color: #88ccc9;

        }

        

        textarea {

            height: 180px;

            resize: vertical;

        }

        

        .submit-btn {

            background: #88ccc9;

            color: white;

            border: none;

            padding: 15px 40px;

            border-radius: 30px;

            font-size: 1.1rem;

            cursor: pointer;

            transition: all 0.3s ease;

            font-weight: 500;

            letter-spacing: 1px;

            display: inline-block;

            position: relative;

            overflow: hidden;

        }

        

        .submit-btn:hover {

            background: #76b9b6;

        }

        

        .submit-btn:after {

            content: "→";

            position: absolute;

            opacity: 0;

            right: 15px;

            transition: all 0.3s ease;

        }

        

        .submit-btn:hover:after {

            opacity: 1;

            right: 25px;

        }

        

        .info-item {

            display: flex;

            margin-bottom: 30px;

            align-items: flex-start;

        }

        

        .info-icon {

            width: 30px;

            height: 30px;

            background: #c1a659;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            margin-right: 20px;

            flex-shrink: 0;

        }

        

        .info-icon i {

            font-size: 0.7rem;

            color: white;

        }

        

        .info-content h3 {

            font-size: 1.2rem;

            margin-bottom: 10px;

            color: #333;

            font-weight: 500;

        }

        

        .info-content p, .info-content a {

            color: #555;

            text-decoration: none;

            transition: color 0.3s ease;

            font-size: 0.95rem;

        }

        

        .info-content a:hover {

            color: #c1a659;

        }

        

        .social-links {

            display: flex;

            gap: 12px;

            margin-top: 10px;

        }

        

        .social-link {

            width: 40px;

            height: 40px;

            border-radius: 50%;

            background: #f0f0f0;

            display: flex;

            align-items: center;

            justify-content: center;

            transition: all 0.3s ease;

            color: #555;

            font-size: 1.1rem;

        }

        

        .social-link:hover {

            background: #c1a659;

            color: #fff!important;

        }

        

        .whatsapp-btn {

            display: inline-flex;

            align-items: center;

            background: #25D366;

            color: white;

            padding: 12px 25px;

            border-radius: 30px;

            text-decoration: none;

            font-weight: 500;

            margin-top: 20px;

            transition: all 0.3s ease;

            position: relative;

            overflow: hidden;

        }

        

        .whatsapp-btn i {

            font-size: 1.4rem;

            margin-right: 10px;

        }

        

        .whatsapp-btn:hover {

            background: #128C7E;

        }

        

        /* Map Section */

        .map-section {

            margin-bottom: 80px;

        }

        

        #map {

            height: 500px;

            border-radius: 15px;

            overflow: hidden;

            border: 1px solid #e8e5df;

        }

        

        .map-overlay {

            position: absolute;

            bottom: 20px;

            left: 20px;

            background: rgba(255, 255, 255, 0.95);

            padding: 20px;

            border-radius: 10px;

            max-width: 300px;

            border: 1px solid #f0f0f0;

        }

        

        .map-overlay h3 {

            font-size: 1.3rem;

            margin-bottom: 10px;

            color: #333;

            font-weight: 500;

        }

        

        .map-overlay p {

            color: #555;

            margin-bottom: 5px;

            font-size: 0.95rem;

        }

        



        /* Message Status */

        .message-status {

            padding: 15px;

            margin: 20px 0;

            border-radius: 8px;

            text-align: center;

            display: none;

        }

        

        .success {

            background-color: #d4edda;

            color: #155724;

            border: 1px solid #c3e6cb;

        }

        

        .error {

            background-color: #f8d7da;

            color: #721c24;

            border: 1px solid #f5c6cb;

        }

        

        

        /* Responsive */

        @media (max-width: 992px) {

            .contact-section {

                flex-direction: column;

            }

            

            .vertical-separator {

                display: none;

            }

            

            .contact-form, .contact-info {

                padding: 0;

            }

            

            .hero-title {

                font-size: 2.8rem;

            }

            

            #map {

                height: 400px;

            }

        }

        

        @media (max-width: 768px) {

            .hero-title {

                font-size: 2.2rem;

            }

            

            .section-title h2 {

                font-size: 1.8rem;

            }

            

            #map {

                height: 300px;

            }

            

            

            .map-overlay {

                position: relative;

                max-width: 100%;

                left: 0;

                bottom: 0;

                margin-top: 20px;

            }

        }



		





        /* STILI COOKIE  */

        .cookie-banner {

            position: fixed;

            bottom: 0;

            left: 0;

            right: 0;

            background: rgba(255, 255, 255, 0.98);

            box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);

            padding: 20px;

            z-index: 10000;

            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

            border-top: 4px solid #c1a659;

            display: none;

        }

        

        .cookie-content {

            max-width: 1200px;

            margin: 0 auto;

            display: flex;

            flex-wrap: wrap;

            align-items: center;

            gap: 20px;

        }

        

        .cookie-text {

            flex: 1 1 600px;

            color: #333;

        }

        

        .cookie-text h3 {

            color: #c1a659;

            margin-bottom: 10px;

            font-size: 1.5rem;

        }

        

        .cookie-text p {

            line-height: 1.6;

            margin-bottom: 10px;

            color: #555;

        }

        

        .cookie-buttons {

            display: flex;

            gap: 12px;

            flex-wrap: wrap;

        }

        

        .cookie-btn {

            padding: 12px 24px;

            border: none;

            border-radius: 6px;

            cursor: pointer;

            font-weight: 600;

            transition: all 0.3s ease;

            font-size: 0.95rem;

        }

        

        .cookie-btn-accept {

            background: #c1a659;

            color: white;

        }

        

        .cookie-btn-accept:hover {

            background: #dcc47f;

        }

        

        .cookie-btn-reject {

            background: #f0f0f0;

            color: #333;

        }

        

        .cookie-btn-reject:hover {

            background: #e0e0e0;

        }

        

        .cookie-btn-settings {

            background: transparent;

            color: #c1a659;

            border: 1px solid #c1a659;

        }

        

        .cookie-btn-settings:hover {

            background: #f8f5ef;

        }

        

        .cookie-settings {

            display: none;

            margin-top: 20px;

            padding: 20px;

            background: #f8f9fa;

            border-radius: 8px;

            border-left: 4px solid #c1a659;

            width: 100%;

        }

        

        .cookie-setting {

            margin-bottom: 15px;

            padding-bottom: 15px;

            border-bottom: 1px solid #eaeaea;

        }

        

        .cookie-setting:last-child {

            border-bottom: none;

            margin-bottom: 0;

            padding-bottom: 0;

        }

        

        .cookie-setting label {

            display: flex;

            align-items: center;

            cursor: pointer;

            font-weight: 500;

            color: #333;

        }

        

        .cookie-setting input {

            margin-right: 12px;

            width: 18px;

            height: 18px;

        }

        

        .cookie-setting p {

            margin: 8px 0 0 30px;

            font-size: 0.9rem;

            color: #666;

            line-height: 1.5;

        }

        

        .cookie-link {

            color: #c1a659;

            text-decoration: none;

        }

        

        .cookie-link:hover {

            text-decoration: underline;

        }

        

        @media (max-width: 768px) {

            .cookie-content {

                flex-direction: column;

                text-align: center;

            }

            

            .cookie-buttons {

                justify-content: center;

                width: 100%;

            }

            

            .cookie-btn {

                flex: 1;

                min-width: 120px;

            }

            

            .cookie-setting label {

                justify-content: center;

            }

            

            .cookie-setting p {

                margin-left: 0;

                text-align: left;

            }

        }

        

        @media (max-width: 480px) {

            .cookie-banner {

                padding: 15px;

            }

            

            .cookie-btn {

                padding: 10px 16px;

                font-size: 0.9rem;

            }

            

            .cookie-text h3 {

                font-size: 1.3rem;

            }

        }