/*
Theme Name: Sapori Keto (wordpress)
Author: DANC0D3R
Author URI: https://github.com/DANC0D3R
Description: Theme for website of food shop Sapori Keto
Text Domain: saporiketo
*/

/** ============= COMMON STYLES ============= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Rubik", sans-serif;
    /* font-family: 'Poppins', sans-serif; */
}

:root {
    --primary-color: #edc714;
    --secondary-color: #f1c40f;
    --tertiary-color: #fff8dc;
    --dark-color: #cc5302;
    --text-color: #833901;
    --white: #ffffff;
    --overay-color: rgba(0, 0, 0, 0.3);
    --title-size: 2.5rem;
}

body {
    margin: 0;
    padding: 0;
}

/** ----- GENERALI ----- */
.container {
    width: 85vw;
    margin: 0 auto;
    /* border: 1px solid red; // Debug */
}

.divider {
    height: 4px;
    background-color: var(--secondary-color);
    border: none;
    border-radius: 2px;
}

.title {
    color: var(--dark-color);
    font-size: var(--title-size);
}

.logo img {
    width: 150px;
    height: auto;
}

.button {
    display: inline-block;
    padding: 20px 25px;
    color: var(--white);
    border: 2px solid var(--white);
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    transition:
        background-color 0.3s ease,
        transform 0.3s ease;
}

.button:hover {
    color: var(--text-color);
    background-color: var(--secondary-color);
}

.overlay {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: var(--overay-color);
}

section {
    width: 100%;
    margin-bottom: 5rem;
}

.tooltip-container {
    position: relative;
    display: inline-block;
}

.tooltip-container:hover .custom-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}

.custom-tooltip {
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    background-color: var(--dark-color);
    color: var(--white);
    padding: 0.6rem 1rem;
    border-radius: 6px;
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        visibility 0.3s ease;
    z-index: 10;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.custom-tooltip.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-10px) scale(1);
}

.custom-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 8px;
    border-style: solid;
    border-color: var(--dark-color) transparent transparent transparent;
}

/** ----- HEADER ----- */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: #fff0b3;
    z-index: 1001;
    box-shadow: 0px 20px 20px -35px rgba(0, 0, 0, 0.81);
}

header .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    height: 100%;
    padding: 10px 0;
}

header #mobile-nav {
    display: none;
}

header nav {
    position: relative;
    display: inline-block;
    flex-grow: 1;
    text-align: center;
    padding: 0.8rem;
}

header .nav-indicator {
    position: absolute;
    bottom: 0;
    height: 100%;
    border: 1px solid #edc71450;
    background-color: #edc71450;
    border-radius: 8px;
    transition: all 0.4s ease;
    width: 0;
    left: 0;
}

header .nav-link {
    position: relative;
    margin: 0 15px;
    padding: 0.8rem;
    text-decoration: none;
    color: var(--dark-color);
    font-weight: bold;
    z-index: 1;
}

header .nav-link.active {
    color: var(--text-color);
}

header .social-icons {
    display: flex;
    gap: 0.5vw;
}

header .social-desktop {
    justify-content: right;
    width: 20vw;
}

header .social-mobile {
    display: none;
    width: 100%;
    max-width: 350px;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    margin-top: 2rem;
}

header .social-icons a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--white);
    text-decoration: none;
    font-size: 1.5rem;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

header .facebook {
    background-color: #1877f2;
}

header .instagram {
    background: radial-gradient(
        circle at 30% 107%,
        #fdf497 0%,
        #fdf497 5%,
        #fd5949 45%,
        #d6249f 60%,
        #285aeb 90%
    );
}

header .tiktok {
    background: #000000;
    filter: drop-shadow(2px 0px 0px #fd3e3e) drop-shadow(-2px -2px 0px #4de8f4);
}

header .whatsapp {
    background-color: #25d366;
}

header .email {
    background-color: var(--dark-color);
}

/** ----- BANNER ----- */
.info-banner {
    background: #fff4c3;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: calc(25vh - 80px);
    margin: 0;
    margin-top: 80px;
    padding: 1rem;
    border-top: 3px solid transparent;
    border-bottom: 3px solid var(--secondary-color);
    color: var(--text-color);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.info-banner .info-content {
    max-width: 800px;
    margin: 0 auto;
}

.info-banner h2 {
    font-size: 1.8rem;
    color: var(--dark-color);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-transform: uppercase;
}

.info-banner ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-banner li {
    font-size: 1.1rem;
    font-weight: bold;
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-color);
}

.info-banner i {
    color: #f39c12;
    font-size: 1.2rem;
}

/** ----- MAIN ----- */
main {
    margin-bottom: 10rem;
}

/** ----- INTRO ----- */
.intro-section {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 75vh;
    position: relative;
}

.intro-section .intro-content {
    display: flex;
    justify-content: right;
    align-items: center;
}

.intro-section .intro-text {
    text-align: left;
    max-width: 500px;
    border-radius: 12px;
}

.intro-section .intro-text h1 {
    text-align: left;
    margin-bottom: 2.5rem;
    font-size: 2.5rem;
    font-weight: normal;
    color: var(--white);
    text-transform: uppercase;
}

.intro-section .intro-text .divider {
    width: 6rem;
}

.intro-section .intro-text h2 {
    margin-bottom: 1rem;
    text-align: left;
    font-size: 3rem;
    line-height: 1.8;
    color: #ffe98d;
}

/** ------ TAPE SECTION ------ */
.tape-section {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.tape-section .tape-overlay {
    justify-content: right;
    flex-direction: column;
    padding: 12rem 0;
}

.tape-section .tape-text {
    text-align: center;
    width: 100%;
    color: var(--white);
}

.tape-section .tape-text-1 {
    font-weight: 600;
    margin-bottom: 2rem;
    font-size: 2rem;
    letter-spacing: 1px;
}

.tape-section .tape-text-2 {
    font-weight: 400;
    font-size: 1.5rem;
}

.triangle {
    --triangle-height: 6rem;
    position: absolute;
    width: 0;
    height: 0;
    border-left: 100vw solid transparent;
    border-right: 100vw solid transparent;
}

.triangle.top {
    left: 0;
    bottom: 0px;
    border-bottom: var(--triangle-height) solid var(--white);
}

.triangle.bottom {
    right: 0;
    top: 0px;
    border-top: var(--triangle-height) solid var(--white);
}

/** ----- MORE INFO ----- */
.more-info-section {
    background-image: url("assets/img/contact-us-image.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50vh;
}

.more-info-section .more-info-overlay {
    justify-content: center;
}

.more-info-section .more-info-text {
    text-align: center;
}

.more-info-section .more-info-text h2 {
    margin-bottom: 1rem;
    line-height: 1.8;
    font-weight: 500;
    color: var(--white);
}

/** ------ MODALE GUIDA ORDINE ------ */
.order-guide-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1002;
    opacity: 0;
    transition: opacity 0.3s ease;
    overflow-y: auto;
}

.order-guide-modal.active {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
}

.order-guide-modal .modal-content {
    background-color: var(--white);
    width: 90%;
    max-width: 800px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transform: translateY(-50px);
    transition: transform 0.4s ease;
    height: 75vh;
    display: flex;
    flex-direction: column;
}

.order-guide-modal.active .modal-content {
    transform: translateY(0);
}

/* Header della modale */
.order-guide-modal .modal-header {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
}

.order-guide-modal .modal-header h2 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 600;
}

.order-guide-modal .close-modal {
    background: none;
    border: none;
    color: var(--white);
    font-size: 2rem;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.order-guide-modal .close-modal:hover {
    transform: scale(1.2);
}

/* Navigazione della modale */
.order-guide-modal .modal-nav {
    display: flex;
    padding: 1rem;
    gap: 2rem;
    background-color: var(--tertiary-color);
    border-bottom: 2px solid var(--secondary-color);
}

.order-guide-modal .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: none;
    border: none;
    border: 2px solid var(--primary-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--dark-color);
    background: rgba(170, 170, 170, 0.1);
    font-weight: 500;
}

.order-guide-modal .nav-item i {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.order-guide-modal .nav-item.active {
    color: var(--text-color);
    border-color: var(--text-color);
    background-color: var(--secondary-color);
}

.order-guide-modal .nav-item:hover:not(.active) {
    background-color: rgba(241, 196, 15, 0.3);
}

/* Corpo della modale */
.order-guide-modal .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.order-guide-modal .guide-section {
    display: none;
    margin: 0;
}

.order-guide-modal .guide-section.active {
    display: block;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Step delle istruzioni */
.order-guide-modal .step {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border-radius: 12px;
    background-color: #f9f9f9;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.order-guide-modal .step:not(:last-child) {
    margin-bottom: 0.5rem;
}

.order-guide-modal .step-image {
    flex: 0 0 300px;
    margin-right: 1.5rem;
}

.order-guide-modal .step-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.order-guide-modal .step-text {
    flex: 1;
}

.order-guide-modal .step-text h3 {
    color: var(--dark-color);
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
}

.order-guide-modal .step-text p {
    color: var(--text-color);
    line-height: 1.5;
    margin: 0;
}

/** ------ MODALE MENU NATALIZIO E PASQUALE------ */
#christmas-modal,
#easter-modal {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    backdrop-filter: blur(8px);
}

#christmas-modal.active,
#easter-modal.active {
    display: flex;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#christmas-modal .modal-content,
#easter-modal .modal-content {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
    width: 90%;
    max-width: 520px;
    height: 95vh;
    max-height: 925px;
    padding: 11.5rem 5rem;
    border: none;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.3));
    animation: slideUp 0.4s ease;
}

#christmas-modal .modal-content {
    background-image: url("assets/img/christmas-menu.png");
}

#easter-modal .modal-content {
    background-image: url("assets/img/easter/easter-menu.webp");
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 8rem 5rem;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#christmas-modal .modal-close,
#easter-modal .modal-close {
    position: absolute;
    top: 11rem;
    right: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    font-size: 2rem;
    color: #006838;
    background: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

#christmas-modal .modal-close:hover,
#easter-modal .modal-close:hover {
    transform: scale(1.1);
}

#christmas-modal .modal-header,
#easter-modal .modal-header {
    text-align: center;
    margin-bottom: 1rem;
    padding-right: 1.5rem;
}

#christmas-modal .modal-header h2,
#easter-modal .modal-header h2 {
    font-size: 1.8rem;
    margin: 0;
    color: #b2151b;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
    letter-spacing: 1px;
}

#christmas-modal .modal-body,
#easter-modal .modal-body {
    text-align: center;
    margin-bottom: 1rem;
}

#christmas-modal .modal-body p,
#easter-modal .modal-body p {
    margin-bottom: 0.5rem;
    line-height: 1.6;
    font-size: 1.1rem;
}

#christmas-modal .modal-features,
#easter-modal .modal-features {
    margin-bottom: 1.5rem;
}

#christmas-modal .feature-item,
#easter-modal .feature-item {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border-radius: 8px;
}

#christmas-modal .feature-item i,
#easter-modal .feature-item i {
    color: var(--primary-color);
    margin-right: 1rem;
    font-size: 1.2rem;
}

#christmas-modal .feature-item span,
#easter-modal .feature-item span {
    font-weight: 500;
    color: #006838;
}

#christmas-modal .modal-footer,
#easter-modal .modal-footer {
    display: flex;
    gap: 1rem;
    justify-content: center;
    /* flex-wrap: wrap; */
}

#christmas-modal .button,
#easter-modal .button {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    min-width: 160px;
}

#christmas-modal .primary-button {
    background: #006838;
    color: white;
}

#christmas-modal .primary-button:hover {
    background: #b2151b;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

#easter-modal .primary-button {
    background: var(--dark-color);
    color: white;
}

#easter-modal .primary-button:hover {
    background: var(--primary-color);
    color: var(--text-color);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

#christmas-modal .secondary-button {
    background: rgba(0, 0, 0, 0.1);
    color: #006838;
    border: 2px solid #006838;
}

#christmas-modal .secondary-button:hover {
    background: #006838;
    color: white;
    transform: translateY(-2px);
}

#easter-modal .secondary-button {
    background: var(--tertiary-color);
    color: var(--text-color);
}

#easter-modal .secondary-button:hover {
    background: var(--primary-color);
    transform: translateY(-2px);
}

#christmas-modal .snowflakes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 2;
}

#christmas-modal .snowflake-wrapper {
    position: absolute;
    pointer-events: none;
}

#christmas-modal .snowflake {
    opacity: 0.9;
    user-select: none;
    display: inline-block;
    transform: translateY(-10vh);
    /* Oscillazione orizzontale */
    --sway-distance: 50px;
}

@keyframes fall {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(120vh);
        opacity: 0;
    }
}

@keyframes sway {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(var(--sway-distance));
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/** ------ FLOATING BUTTONS ------ */
.order-guide-float-button,
.whatsapp-float-button {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: var(--white);
    text-decoration: none;
    cursor: pointer;
    z-index: 800;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.order-guide-float-button {
    bottom: 85px;
    right: 15px;
    font-size: 1.9rem;
    background-color: var(--dark-color);
}

.whatsapp-float-button {
    bottom: 15px;
    right: 15px;
    font-size: 2rem;
    background-color: #25d366;
}

.order-guide-float-button:hover,
.whatsapp-float-button:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.order-guide-float-button:hover .custom-tooltip,
.whatsapp-float-button:hover .custom-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}

.order-guide-float-button .custom-tooltip {
    text-align: center;
    transform: translateX(-50%) scale(0.9);
    left: 42%;
}

.order-guide-float-button .custom-tooltip.show-once {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.whatsapp-float-button .custom-tooltip {
    transform: translateX(-50%) scale(0.9);
    left: -175%;
    bottom: 20%;
}

.order-guide-float-button .custom-tooltip::after {
    top: 98%;
    left: 52%;
}

.whatsapp-float-button .custom-tooltip::after {
    top: auto;
    left: auto;
    right: -9.4%;
    bottom: 22%;
    transform: rotate(270deg);
}

.tooltip-letter {
    opacity: 0;
    display: inline-block;
    transform: translateY(5px);
    animation: fadeInLetter 0.4s ease forwards;
}

@keyframes fadeInLetter {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/** ----- FOOTER ----- */
footer {
    color: white;
    margin-bottom: 3rem;
    text-align: center;
}

footer .footer-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

footer .footer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 330px;
    text-decoration: none;
}

footer .footer-item i {
    font-size: 3rem;
    margin-bottom: 15px;
    color: var(--dark-color);
    transition: color 0.3s ease;
}

footer .footer-item:hover i {
    color: var(--primary-color);
}

footer .footer-item p {
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
    color: var(--text-color);
}

footer hr {
    width: 100%;
    margin: 0 auto;
    border: none;
    height: 2px;
    background-color: var(--text-color);
}

footer .footer-logo img {
    width: 250px;
}

footer .vat {
    text-align: left;
    width: 250px;
    color: var(--text-color);
}

/** ============= HOME PAGE ============= */
/** ----- INTRO ----- */
#home-page .intro-section {
    background-image: url("assets/img/home-main-image.webp");
}

/** ----- BOX NATALIZIE E PASQUALI HOMEPAGE ----- */
#home-page .christmas-box-banner,
#home-page .easter-box-banner {
    background: linear-gradient(
        135deg,
        var(--dark-color) 0%,
        var(--text-color) 100%
    );
    color: var(--white);
    padding: 3rem 0;
    margin-bottom: 3rem;
    border-bottom: 3px solid var(--secondary-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

#home-page .christmas-box-banner .banner-content,
#home-page .easter-box-banner .banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
}

#home-page .christmas-box-banner .banner-text,
#home-page .easter-box-banner .banner-text {
    flex: 1;
}

#home-page .christmas-box-banner .banner-text h2,
#home-page .easter-box-banner .banner-text h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: var(--white);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    font-weight: 600;
}

#home-page .christmas-box-banner .banner-text h2 i,
#home-page .easter-box-banner .banner-text h2 i {
    color: var(--primary-color);
    margin-right: 0.5rem;
    font-size: 2.2rem;
}

#home-page .christmas-box-banner .banner-text p,
#home-page .easter-box-banner .banner-text p {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    color: var(--tertiary-color);
    font-weight: 500;
    line-height: 1.6;
}

#home-page .christmas-box-banner .banner-features,
#home-page .easter-box-banner .banner-features {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 2rem 0;
}

#home-page .christmas-box-banner .banner-features span,
#home-page .easter-box-banner .banner-features span {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-weight: 600;
    color: var(--primary-color);
    font-size: 1.1rem;
}

#home-page .christmas-box-banner .banner-features i,
#home-page .easter-box-banner .banner-features i {
    font-size: 1.3rem;
}

#home-page .christmas-box-banner .christmas-button,
#home-page .easter-box-banner .easter-button {
    background: transparent;
    border: 2px solid var(--white);
    color: var(--white);
    font-weight: bold;
    padding: 18px 35px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    font-size: 1.2rem;
    margin-top: 1rem;
}

#home-page .christmas-box-banner .christmas-button:hover,
#home-page .easter-box-banner .easter-button:hover {
    background: var(--primary-color);
    color: var(--text-color);
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

#home-page .christmas-box-banner .banner-image,
#home-page .easter-box-banner .banner-image {
    flex: 0 0 300px;
}

#home-page .christmas-box-banner .banner-image img,
#home-page .easter-box-banner .banner-image img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    border: 3px solid var(--primary-color);
}

/** ----- PRESENTATION ----- */
#home-page .presentation-section .presentation-content {
    text-align: center;
    line-height: 1.6;
}

#home-page .presentation-section .section-title {
    margin-bottom: 20px;
}

#home-page .presentation-section .divider {
    width: 8rem;
    margin: 0 auto 30px auto;
}

#home-page .presentation-section .presentation-text,
#home-page .presentation-section .additional-info,
#home-page .presentation-section .target-group {
    font-size: 1.1rem;
    margin-bottom: 20px;
    text-align: center;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

#home-page .presentation-section .key-benefits {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    margin: 40px 0;
}

#home-page .presentation-section .benefit-item {
    display: flex;
    flex: 1 1 30%;
    justify-content: center;
    align-items: center;
    width: 30%;
    min-width: 200px;
    padding: 1rem;
    border: 2px solid var(--secondary-color);
    border-radius: 12px;
    background-color: #fff8dc;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

#home-page .presentation-section .benefit-item p {
    margin: 0;
    font-size: 1.2rem;
}

#home-page .presentation-section .product-button {
    border-color: var(--secondary-color);
    color: var(--text-color);
    background-color: var(--white);
    padding: 10px 20px;
    text-decoration: none;
    font-size: 1.1rem;
    border-radius: 12px;
    display: inline-block;
    margin-top: 30px;
    transition: all 0.3s ease;
}

#home-page .presentation-section .product-button:hover {
    border-color: var(--text-color);
    color: var(--text-color);
    background-color: var(--secondary-color);
}

/** ----- TAPE SECTION ----- */
#home-page .tape-section {
    background-image: url("assets/img/prodotti/salato/pizzette.webp");
}

/** ----- HINT ----- */
#home-page #hint-section {
    margin: 0;
}

/** ----- STORE ----- */
#home-page .store-section {
    position: relative;
    color: var(--text-color);
    background-color: var(--white);
    overflow: hidden;
}

#home-page .store-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 300%;
    height: 400px;
    background-color: var(--primary-color);
    z-index: -1;
    border-radius: 50% 50% 0 0;
}

#home-page .store-section .store-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    position: relative;
    max-width: 1200px;
    z-index: 1;
}

#home-page .store-section .store-content:last-child {
    margin-top: 3rem;
}

#home-page .store-section .store-content:last-child .store-text {
    width: 100%;
}

#home-page .store-section .store-content.reverse {
    flex-direction: row-reverse;
}

#home-page .store-section .store-text {
    max-width: 500px;
    text-align: left;
    line-height: 1.5;
}

#home-page .store-section h2 {
    color: var(--dark-color);
    margin-bottom: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
}

#home-page .store-section .store-content:last-child .store-text {
    text-align: center;
    max-width: 100%;
}

#home-page
    .store-section
    .store-content
    .store-text:not(:last-child)
    h2::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 80px;
    height: 4px;
    background-color: var(--secondary-color);
}

#home-page .store-section p {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: var(--text-color);
    line-height: 1.6;
}

#home-page .store-section .store-img {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition:
        transform 0.4s ease,
        box-shadow 0.3s ease;
}

/** ----- FEEDBACK ----- */
#home-page .feedback-section {
    text-align: center;
    color: var(--text-color);
}

#home-page .feedback-section .section-title {
    font-family: "Fredericka the Great", cursive;
    font-weight: 400;
    text-align: center;
    margin-bottom: 3rem;
}

#home-page .feedback-section .feedback-cards {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

#home-page .feedback-section .feedback-card {
    background-color: var(--white);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    width: 100%;
    width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

#home-page .feedback-section .feedback-text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-color);
    overflow-y: auto;
    max-height: 120px;
    margin-bottom: 2rem;
}

#home-page .feedback-section .feedback-text::-webkit-scrollbar {
    width: 5px;
}

#home-page .feedback-section .feedback-text::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
}

#home-page .feedback-section .feedback-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 1rem;
}

#home-page .feedback-section .reviewer-name {
    font-size: 1.3rem;
    font-weight: bold;
}

#home-page .feedback-section .logo-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0.5rem 0;
}

#home-page .feedback-section .review-logo {
    max-width: 30px;
    height: auto;
}

#home-page .feedback-section .review-platform {
    font-style: italic;
    font-size: 1.3rem;
}

#home-page .feedback-section .rating {
    display: flex;
    gap: 3px;
}

#home-page .feedback-section .star {
    font-size: 1.5rem;
    color: #f39c12;
}

/** =============== PRODUCTS PAGE =============== */
/** ----- INTRO ----- */
#products-page .intro-section {
    margin-bottom: 2rem;
    background-image: url("assets/img/prodotti/salato/crackers-mandorle-formaggio.webp");
}

/** ----- BOX NATALIZIE E PASQUALI----- */
#products-page .christmas-boxes-section,
#products-page .easter-boxes-section {
    padding: 4rem 0;
    background: linear-gradient(135deg, #fffbe6 0%, #fff0b3 100%);
    margin-bottom: 5rem;
    border-top: 3px solid var(--secondary-color);
    border-bottom: 3px solid var(--secondary-color);
}

#products-page .christmas-boxes-section .christmas-container,
#products-page .easter-boxes-section .easter-container {
    max-width: 1500px;
}

#products-page .christmas-boxes-section .section-header,
#products-page .easter-boxes-section .section-header {
    text-align: center;
    margin-bottom: 3rem;
}

#products-page .christmas-boxes-section .section-header .section-title,
#products-page .easter-boxes-section .section-header .section-title {
    color: var(--dark-color);
    font-size: 2.8rem;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    font-weight: 600;
}

#products-page .christmas-boxes-section .section-header .section-subtitle,
#products-page .easter-boxes-section .section-header .section-subtitle {
    color: var(--text-color);
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

#products-page .christmas-boxes-section .section-header .divider,
#products-page .easter-boxes-section .section-header .divider {
    width: 120px;
    height: 4px;
    margin: 0 auto;
    background-color: var(--secondary-color);
    border: none;
    border-radius: 2px;
}

#products-page .christmas-boxes-section .christmas-boxes-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2.5rem;
    margin: 3rem 0;
}

#products-page .easter-boxes-section .easter-boxes-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#products-page .christmas-boxes-section .christmas-box,
#products-page .easter-boxes-section .easter-box {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 2px solid var(--text-color);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    position: relative;
    transition: all 0.3s ease;
}

#products-page .easter-boxes-section .easter-box {
    width: 35%;
}

#products-page .christmas-boxes-section .box-badge,
#products-page .easter-boxes-section .box-badge {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    color: var(--text-color);
    background-color: var(--primary-color);
    padding: 0.3rem 0.4rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

#products-page .christmas-boxes-section .box-header,
#products-page .easter-boxes-section .box-header {
    padding: 2.5rem 2rem;
    background: linear-gradient(
        135deg,
        var(--dark-color) 0%,
        var(--text-color) 100%
    );
    color: var(--white);
    text-align: center;
}

#products-page .christmas-boxes-section .box-header h3,
#products-page .easter-boxes-section .box-header h3 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 600;
}

#products-page .christmas-boxes-section .box-subtitle,
#products-page .easter-boxes-section .box-subtitle {
    margin: 1rem 0 0;
    opacity: 0.9;
    font-size: 1.1rem;
    font-weight: 400;
}

#products-page .christmas-boxes-section .box-content,
#products-page .easter-boxes-section .box-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem;
}

#products-page .easter-boxes-section .box-content {
    width: 100%;
    padding: 0.6rem;
}

#products-page .easter-boxes-section .box-image-wrapper {
    width: 100%;
    height: fit-content;
}

#products-page .easter-boxes-section .box-image-wrapper img {
    width: 100%;
    border-radius: 0 0 12px 12px;
}

#products-page .christmas-boxes-section .box-items,
#products-page .easter-boxes-section .box-items {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
}

#products-page .christmas-boxes-section .box-items li,
#products-page .easter-boxes-section .box-items li {
    padding: 0.8rem 0;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 2rem;
    color: var(--text-color);
    font-weight: 500;
}

#products-page .christmas-boxes-section .box-items li:before,
#products-page .easter-boxes-section .box-items li:before {
    content: "✦";
    position: absolute;
    left: 0;
    color: var(--dark-color);
    font-weight: bold;
    font-size: 1.1rem;
}

#products-page .easter-boxes-section .box-items li:last-child,
#products-page .christmas-boxes-section .box-items li:last-child {
    border-bottom: none;
}

#products-page .christmas-boxes-section .box-price,
#products-page .easter-boxes-section .box-price {
    text-align: center;
}

#products-page .christmas-boxes-section .price,
#products-page .easter-boxes-section .price {
    font-size: 2rem;
    font-weight: bold;
    color: var(--dark-color);
}

#products-page .christmas-boxes-section .box-features,
#products-page .easter-boxes-section .box-features {
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--secondary-color);
}

#products-page .christmas-boxes-section .feature,
#products-page .easter-boxes-section .feature {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-weight: 600;
    color: var(--text-color);
    font-size: 1.1rem;
}

#products-page .christmas-boxes-section .feature i,
#products-page .easter-boxes-section .feature i {
    color: var(--dark-color);
    font-size: 1.4rem;
}

/** ----- NAVIGAZIONE MENU ----- */
#products-page .menu-navigation {
    position: sticky;
    top: 80px;
    margin: 0;
    padding: 1rem 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    z-index: 700;
    transition: all 0.3s ease;
}
#products-page .menu-nav-container {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

#products-page .menu-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.8rem 1.2rem;
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    background: rgba(170, 170, 170, 0.1);
    min-width: 90px;
    border: 2px solid transparent;
    cursor: pointer;
}

#products-page .menu-nav-link i {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
    color: var(--primary-color);
}

#products-page .menu-nav-link span {
    font-size: 0.9rem;
    text-align: center;
    transition: all 0.3s ease;
}

#products-page .menu-nav-link:hover {
    color: var(--primary-color);
}

#products-page .menu-nav-link:hover i {
    color: var(--primary-dark);
}

#products-page .menu-nav-link.active {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

#products-page .menu-nav-link.active i {
    color: var(--primary-dark);
}

#products-page .menu-nav-link.active::before {
    transform: scaleX(1);
    background: var(--primary-dark);
}

/* Animazione per il cambio sezione */
#products-page .menu-section {
    scroll-margin-top: calc(80px + 8rem);
    transition: opacity 0.5s ease;
}

/* * ----- MENÙ ----- */
#products-page .menu-section {
    min-height: 100vh;
    margin-top: 10rem;
}

#products-page .menu-section .section-title {
    margin-bottom: 1.5rem;
    color: var(--dark-color);
    text-align: center;
}

#products-page .menu-section .divider {
    width: 8rem;
    margin: 0 auto 30px auto;
}

#products-page .menu-section .disclaimer {
    text-align: left;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    margin-bottom: 1rem;
    font-size: 0.8rem;
}

#products-page .menu-section .menu-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 1500px;
    margin: 0 auto;
}

#products-page .menu-section .menu-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 12px;
    padding: 1.5rem;
    background-color: rgba(170, 170, 170, 0.125);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    position: relative;
    height: 100%;
    overflow: hidden;
}

#products-page .menu-section .menu-item .item-header {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

#products-page .menu-section .item-image {
    position: relative;
    width: 80px;
    height: 80px;
    /* overflow: hidden; */
}

#products-page .menu-section .item-image img {
    border-radius: 50%;
    object-fit: cover;
}

#products-page .menu-section .item-image .product-image {
    width: 100%;
    height: 100%;
    border: 4px solid var(--primary-color);
}

#products-page .new-badge {
    width: 60%;
    height: 60%;
    position: absolute;
    top: 0px;
    right: 0px;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    animation: pulse 1.5s infinite ease-in-out;
}

#products-page .menu-section .new-badge img {
    width: 100%;
    height: 100%;
    transform: translateX(15%) translateY(-30%);
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

#products-page .menu-section .item-details {
    width: calc(100% - (80px + 0.5rem));
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: start;
    margin-top: 0.5rem;
    justify-content: flex-start;
}

#products-page .menu-section .item-name {
    margin-bottom: 0.2rem;
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--text-color);
    text-transform: uppercase;
    text-align: left;
}

#products-page .menu-section .item-subtitle {
    font-size: 1.1rem;
    color: var(--text-color);
    font-style: italic;
    text-align: left;
    margin-top: 0;
}

#products-page .menu-section .item-ingredients,
#products-page .menu-section .item-nutrition {
    font-size: 1rem;
    color: var(--text-color);
    line-height: 1.6;
    text-align: left;
}

#products-page .menu-section .item-ingredients {
    margin-bottom: 1rem;
}

#products-page .menu-section .item-badges {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    height: 3rem;
    align-items: center;
}

#products-page .menu-section .badge-icon {
    position: relative;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    cursor: default;
}

#products-page .menu-section .badge-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#products-page .menu-section .custom-tooltip {
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%) scale(0.8);
}

#products-page .menu-section .custom-tooltip {
    left: 100%;
}

#products-page .menu-section .custom-tooltip::after {
    top: 99%;
    left: 30%;
}

#products-page .menu-section .item-price {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--primary-color);
    padding: 5px 15px;
    border-radius: 12px;
}

/** Biscotti  */
#products-page .tape-section {
    background-image: url("assets/img/cookie-image.webp");
}

#products-page .tape-section .tape-overlay {
    padding: 2rem 0;
}

#products-page #cookies-menu {
    margin: 8rem 0;
}

#products-page #cookies-menu .menu-item {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

#products-page #cookies-menu,
#products-page #cookies-menu .section-title,
#products-page #cookies-menu .item-name,
#products-page #cookies-menu .item-subtitle,
#products-page #cookies-menu .item-ingredients,
#products-page #cookies-menu .item-nutrition {
    color: var(--white);
}

/** =============== CONTACTS PAGE =============== */
/** ----- INTRO ----- */
#contacts-page .intro-section {
    background-image: url("assets/img/contacts-main-image.webp");
}

/** ----- INFO ----- */
#contacts-page .tape-section {
    background-attachment: fixed;
    background-image: url("assets/img/info-image.webp");
}

#contacts-page #info-section {
    margin: 0;
}

/** ----- COLLABORATION ------ */
#contacts-page .collab-section {
    text-align: center;
    color: var(--text-color);
}

#contacts-page .collab-section .collab-title {
    margin-bottom: 1rem;
    font-weight: 700;
    color: var(--dark-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}

#contacts-page .collab-section .collab-icon {
    font-size: 3rem;
    color: var(--secondary-color);
    margin-bottom: 1rem;
}

#contacts-page .collab-section .collab-intro {
    font-size: 1.3rem;
    margin-bottom: 3rem;
    color: var(--text-color);
    font-weight: 500;
}

#contacts-page .collab-section .collab-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

#contacts-page .collab-section .collab-card {
    background-color: var(--tertiary-color);
    border: 2px solid var(--secondary-color);
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
    padding: 2rem;
    max-width: 300px;
    flex: 1 1 250px;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

#contacts-page .collab-section .collab-card h3 {
    font-size: 1.6rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-weight: bold;
}

#contacts-page .collab-section .collab-card p {
    font-size: 1.2rem;
    color: var(--text-color);
}

/** ----- CONTACT US ----- */
#contacts-page .contact-section {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: nowrap;
    flex-direction: row;
    background-color: var(--tertiary-color);
}

#contacts-page .contact-section .contact-left,
#contacts-page .contact-section .contact-right {
    display: flex;
    flex-direction: column;
    width: 50%;
    margin: 1.5rem;
    padding: 4rem;
}

#contacts-page .contact-section .contact-left {
    width: 35%;
}

#contacts-page .contact-section .contact-right {
    width: 65%;
    background-color: var(--white);
}

#contacts-page .contact-section .section-title {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--dark-color);
}

#contacts-page .contact-section .contact-buttons {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 1rem;
    max-width: 500px;
    margin: 0 auto;
    margin-bottom: 6em;
}

#contacts-page .contact-section .contact-left .contact-buttons a {
    margin: 0 auto;
    padding: 1rem;
    color: var(--text-color);
    border-color: var(--primary-color);
}

#contacts-page .contact-section .contact-left .contact-buttons a:hover {
    margin: 0 auto;
    color: var(--text-color);
    border-color: var(--text);
    background-color: var(--primary-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

#contacts-page .contact-section .contact-left .contact-buttons a:hover {
    transform: translateY(-8px);
}

#contacts-page .contact-section .contact-left .contact-buttons a i {
    font-size: 2.5rem;
}

#contacts-page .contact-section .contact-left .contact-icons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

#contacts-page .contact-section .contact-left .contact-icon-box {
    text-align: center;
    width: 85%;
    padding: 1rem;
}

#contacts-page .contact-section .contact-left .contact-icon-box i {
    font-size: 3rem;
    color: var(--secondary-color);
    margin-bottom: 1rem;
}

#contacts-page .contact-section .contact-left .contact-icon-box p {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--text-color);
    line-height: 1.5;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
}

#contacts-page .contact-section .contact-left .opening-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 350px;
}

#contacts-page .contact-section .contact-left .opening-days {
    text-align: left;
    width: 50%;
}

#contacts-page .contact-section .contact-left .opening-hours {
    text-align: right;
    width: 50%;
}

#contacts-page .contact-section .contact-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

#contacts-page .contact-section .contact-form .form-group {
    width: 100%;
    margin-bottom: 2rem;
}

#contacts-page .contact-section .contact-form .floating-input {
    position: relative;
}

#contacts-page .contact-section .contact-form .floating-input:not(:last-child) {
    margin-bottom: 2.5rem;
}

#contacts-page .contact-section .contact-form .floating-input {
    position: relative;
    margin-bottom: 2rem;
    width: 100%;
}

#contacts-page .contact-section .contact-form .floating-input input,
#contacts-page .contact-section .contact-form .floating-input textarea {
    width: 100%;
    padding: 1rem 0.5rem 0.5rem 0;
    border: none;
    border-bottom: 2px solid var(--secondary-color);
    font-size: 1rem;
    background: transparent;
    color: var(--text-color);
    transition: border-color 0.3s ease;
}

#contacts-page .contact-section .contact-form .floating-input input:focus,
#contacts-page .contact-section .contact-form .floating-input textarea:focus {
    outline: none;
    border-color: var(--dark-color);
}

#contacts-page .contact-section .contact-form .floating-input label {
    position: absolute;
    left: 0;
    top: 1rem;
    font-size: 1rem;
    color: #777;
    pointer-events: none;
    transition: all 0.2s ease;
}

#contacts-page
    .contact-section
    .contact-form
    .floating-input
    input:focus
    + label,
#contacts-page
    .contact-section
    .contact-form
    .floating-input
    textarea:focus
    + label {
    top: -0.8rem;
    left: 0;
    font-size: 0.85rem;
    color: var(--dark-color);
    padding: 0 0.3rem;
}

#contacts-page
    .contact-section
    .contact-form
    .floating-input.has-text
    input
    + label,
#contacts-page
    .contact-section
    .contact-form
    .floating-input.has-text
    textarea
    + label {
    top: -0.8rem;
    left: 0;
    font-size: 0.85rem;
    color: var(--dark-color);
    padding: 0 0.3rem;
}

#contacts-page
    .contact-section
    .contact-form
    .floating-input
    input::placeholder,
#contacts-page
    .contact-section
    .contact-form
    .floating-input
    textarea::placeholder {
    color: transparent;
}

#contacts-page .contact-section .contact-form .privacy-policy {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--text-color);
    margin-top: 1rem;
}

#contacts-page
    .contact-section
    .contact-form
    .privacy-policy
    input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 8px;
    border: 2px solid var(--primary-color);
    border-radius: 4px;
    background-color: #fff;
    position: relative;
    cursor: pointer;
    transition:
        background-color 0.2s,
        border-color 0.2s;
}

#contacts-page
    .contact-section
    .contact-form
    .privacy-policy
    input[type="checkbox"]::before {
    content: "";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--dark-color);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}

#contacts-page
    .contact-section
    .contact-form
    .privacy-policy
    input[type="checkbox"]:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

#contacts-page
    .contact-section
    .contact-form
    .privacy-policy
    input[type="checkbox"]:checked::before {
    content: "\f00c";
    opacity: 1;
}

#contacts-page .contact-section .contact-form .privacy-policy p {
    margin: 0;
    line-height: 1.4;
}

#contacts-page .contact-section .contact-form .privacy-policy span {
    color: var(--dark-color);
    transition: color 0.2s;
    cursor: pointer;
}

#contacts-page .contact-section .contact-form .privacy-policy span:hover {
    color: var(--primary-color);
    cursor: pointer;
}

/* Modale privecy policy */
#contacts-page .contact-section .contact-form .privacy-modal-overlay {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: flex-start;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

#contacts-page
    .contact-section
    .contact-form
    .privacy-modal-overlay
    .privacy-modal {
    position: relative;
    max-width: 800px;
    margin: 2rem;
    border-radius: 12px;
    color: var(--text-color);
    background-color: var(--white);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

#contacts-page
    .contact-section
    .contact-form
    .privacy-modal-overlay
    .privacy-modal-content {
    width: 100%;
    max-height: 90vh;
    padding: 1.5rem;
    overflow-y: auto;
}

#contacts-page
    .contact-section
    .contact-form
    .privacy-modal-overlay
    .privacy-modal-close {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 2rem;
    color: var(--primary-color);
    cursor: pointer;
    transition: color 0.2s;
}

#contacts-page
    .contact-section
    .contact-form
    .privacy-modal-overlay
    .privacy-modal-close:hover {
    color: var(--dark-color);
}

#contacts-page .contact-section .contact-form .privacy-modal-overlay p {
    margin-top: 1rem;
}

#contacts-page .contact-section .contact-form .send-button {
    color: var(--text-color);
    background-color: var(--white);
    border-color: var(--primary-color);
    cursor: pointer;
}

#contacts-page .contact-section .contact-form .send-button:hover {
    border-color: var(--text-color);
    background-color: var(--primary-color);
}

/** ----- FAQ ----- */
#contacts-page .faq-section {
    background: url("../assets/img/faq-image.webp") center center/cover
        no-repeat;
    background-attachment: fixed;
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 1;
}

#contacts-page .faq-section .faq-content {
    max-width: 1200px;
    width: 80%;
    margin: 3rem auto;
    padding: 2rem 0;
    text-align: center;
    border-radius: 12px;
}

#contacts-page .faq-section .section-title {
    font-size: 2.5rem;
    margin: 0.5rem 0 1rem 0;
    color: var(--white);
    text-transform: uppercase;
}

#contacts-page .faq-section .section-subtitle {
    margin-bottom: 3rem;
    color: var(--white);
}

#contacts-page .faq-section .accordion {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

#contacts-page .faq-section .accordion-item {
    background-color: var(--white);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.3s ease;
    overflow: hidden;
}

#contacts-page .faq-section .accordion-header {
    padding: 1rem 1.5rem;
    background-color: var(--secondary-color);
    color: var(--white);
    font-size: 1.2rem;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

#contacts-page .faq-section .accordion-header h3 {
    text-align: left;
    font-size: 1.5rem;
}

#contacts-page .faq-section .accordion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 1rem;
    font-size: 0.9rem;
    border-radius: 50%;
    background-color: var(--white);
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

#contacts-page .faq-section .accordion-icon i {
    color: var(--primary-color);
}

#contacts-page .faq-section .accordion-body {
    background-color: var(--tertiary-color);
    color: var(--text-color);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition:
        max-height 0.5s ease-in-out,
        opacity 0.4s ease-in-out;
}

#contacts-page .faq-section .accordion-body-content {
    padding: 1.5rem;
    font-size: 1.05rem;
    line-height: 1.7;
}

#contacts-page .faq-section .accordion-body-content p {
    font-size: 1.2rem;
    margin: 0 0 1rem 0;
}

#contacts-page .faq-section .accordion-body-content p:last-child {
    margin-bottom: 0;
}

#contacts-page .faq-section .accordion-body-content a {
    font-weight: bold;
    text-decoration: none;
    color: var(--dark-color);
}

#contacts-page .faq-section .accordion-body-content a:hover {
    text-decoration: none;
}

#contacts-page .faq-section .accordion-item.active .accordion-body {
    opacity: 1;
    /* max-height è impostato da JavaScript */
}

#contacts-page .faq-section .accordion-item.active .accordion-icon {
    transform: rotate(180deg);
}

/** ----- REVIEWS ----- */
#contacts-page .reviewers-section {
    margin-bottom: 5rem;
    text-align: center;
}

#contacts-page .reviewers-section .section-title {
    margin: 0.5rem auto;
    text-align: center;
    font-size: 2.5rem;
    color: var(--dark-color);
}

#contacts-page .reviewers-section .section-subtitle {
    margin-bottom: 3rem;
    color: var(--dark-color);
}

#contacts-page .reviewers-section .reviewer-box {
    max-width: 300px;
    margin: 0 auto;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    position: relative;
}

#contacts-page .reviewers-section .reviewer-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

#contacts-page .reviewers-section .reviewer-card {
    flex: 0 0 100%;
    width: 100%;
    padding: 1.5rem;
    background-color: var(--white);
    border-radius: 12px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
}

#contacts-page .reviewers-section .reviewer-card .rating {
    display: flex;
    gap: 3px;
    margin-bottom: 0.8rem;
}

#contacts-page .reviewers-section .reviewer-card .star-image {
    width: 30px;
    height: auto;
    vertical-align: middle;
}

#contacts-page .reviewers-section .reviewer-card .review-title {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 0.8rem;
    color: var(--dark-color);
}

#contacts-page .reviewers-section .reviewer-card .review-text {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-color);
    overflow-y: auto;
    max-height: 100px;
    margin-bottom: 1rem;
    padding-right: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

#contacts-page
    .reviewers-section
    .reviewer-card
    .review-text::-webkit-scrollbar {
    width: 5px;
}

#contacts-page
    .reviewers-section
    .reviewer-card
    .review-text::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

#contacts-page .reviewers-section .reviewer-card .reviewer-info {
    display: flex;
    align-items: center;
    margin-top: auto;
    gap: 15px;
}

#contacts-page .reviewers-section .reviewer-card .author-details {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

#contacts-page .reviewers-section .reviewer-card .reviewer-name {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--text-color);
}

#contacts-page .reviewers-section .reviewer-card .review-date {
    font-size: 0.9rem;
    color: var(--text-color);
}

#contacts-page .reviewers-section .reviewer-card .author-photo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--primary-color);
}

#contacts-page .reviewers-section .reviewer-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 1.5rem;
}

#contacts-page .reviewers-section .reviewer-pagination .dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: var(--primary-color);
    transition: background-color 0.3s;
    cursor: pointer;
}

#contacts-page .reviewers-section .reviewer-pagination .dot.active {
    background-color: var(--dark-color);
}

/* Responsive: per DESKTOP */
@media screen and (min-width: 769px) {
    /** ============= COMMON STYLES ============= */
    header .logo {
        position: relative;
        display: flex;
        justify-content: left;
        align-items: center;
        width: 20vw;
        height: 100%;
    }

    header .logo img {
        height: 70%;
        width: auto;
        max-width: 205px;
    }

    header .logo .christmas-hat {
        position: absolute;
        top: 7px;
        left: -10px;
        width: 28px;
        height: auto;
    }

    header .logo .easter-egg-1 {
        position: absolute;
        top: 12px;
        left: 57px;
        width: 2.3rem;
        height: auto;
    }

    header .logo .easter-egg-2 {
        position: absolute;
        top: 9px;
        left: 178px;
        width: 2.3rem;
        height: auto;
    }

    header .social-icons a:hover {
        transform: translateY(-8px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    }

    /** ============= HOME PAGE ============= */
    #home-page .feedback-section .feedback-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

    #home-page .store-section {
        padding-top: 2rem;
    }

    #home-page .store-section .store-img:hover {
        transform: scale(1.05);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    }

    /** ============= PRODUCTS PAGE ============= */
    #products-page .christmas-boxes-section .christmas-box {
        height: 550px;
    }

    #products-page .christmas-boxes-section .box-content {
        display: flex;
        flex-direction: column;
        height: 68%;
        min-height: 300px;
    }

    #products-page .christmas-boxes-section .box-items {
        flex-grow: 1;
    }

    #products-page .christmas-boxes-section .box-price {
        margin-top: auto;
        padding-top: 1rem;
    }

    #products-page .menu-nav-link:hover {
        background: rgba(170, 170, 170, 0.2);
        border-color: rgba(0, 0, 0, 0.1);
    }

    #products-page .menu-nav-link:hover i {
        transform: translateY(-3px);
    }

    #products-page .menu-nav-link.active {
        transform: translateY(-2px);
    }

    #products-page .menu-nav-link.active i {
        transform: scale(1.1) translateY(-3px);
    }

    /** ============= CONTACTS PAGE ============= */
}

@media screen and (min-width: 769px) and (max-width: 1500px) {
    /** ------ MODALE MENU NATALIZIO E PASQUALE ------ */
    #christmas-modal .modal-content,
    #easter-modal .modal-content {
        width: 100%;
        max-width: 370px;
        height: 100%;
        max-height: 650px;
        padding: 8rem 2.9rem;
    }

    #christmas-modal .modal-close,
    #easter-modal .modal-close {
        top: 6.5rem;
        right: 2.5rem;
        font-size: 1.2rem;
    }

    #christmas-modal .modal-header,
    #easter-modal .modal-header {
        padding: 0;
    }

    #christmas-modal .modal-header h2,
    #easter-modal .modal-header h2 {
        font-size: 0.8rem;
    }

    #christmas-modal .modal-header h2 i {
        font-size: 1.5rem;
    }

    #christmas-modal .modal-body p,
    #christmas-modal .modal-features,
    #easter-modal .modal-body p,
    #easter-modal .modal-features {
        font-size: 0.8rem;
    }

    #christmas-modal .modal-features .feature-item,
    #easter-modal .modal-features .feature-item {
        padding: 0;
        padding-left: 0.5rem;
        margin-bottom: 0.5rem;
    }

    #christmas-modal .button,
    #easter-modal .button {
        padding: 0.2rem 0.5rem;
        font-size: 0.7rem;
    }

    #christmas-modal .primary-button,
    #easter-modal .primary-button {
        min-width: 59%;
    }

    #christmas-modal .secondary-button,
    #easter-modal .secondary-button {
        min-width: 39%;
    }
}

/* Responsive: per MOBILE*/
@media screen and (max-width: 768px) {
    /** ============= COMMON STYLES ============= */
    /** ----- GENERALI -----  */
    section {
        margin-bottom: 3rem;
    }

    .title {
        font-size: 1.5rem;
    }

    /** ----- HEADER ----- */
    header .header-content {
        width: 100%;
        padding: 10px 20px;
    }

    header .header-content .logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    header .header-content .logo img {
        width: 200px;
        height: auto;
    }

    header .header-content .logo .christmas-hat {
        position: absolute;
        top: -3px;
        left: -8.5px;
        width: 26px;
        height: auto;
    }

    header .header-content .logo .easter-egg-1 {
        position: absolute;
        top: 0;
        left: 54.5px;
        width: 2.3rem;
        height: auto;
    }

    header .header-content .logo .easter-egg-2 {
        position: absolute;
        top: 0;
        left: 173px;
        width: 2.3rem;
        height: auto;
    }

    header #desktop-nav {
        display: none;
    }

    header .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 30px;
        height: 30px;
        cursor: pointer;
        z-index: 1100;
    }

    header .hamburger span {
        display: block;
        height: 3px;
        background-color: var(--dark-color);
        border-radius: 2px;
        transition: all 0.4s ease;
    }

    header .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(7px, 7px);
    }

    header .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    header .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }

    header #mobile-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: #fff0b3;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        padding: 8rem 1rem;
        transform: translateY(-100%);
        transition: transform 0.4s ease;
        z-index: 1000;
    }

    header #mobile-nav.active {
        transform: translateY(0);
    }

    header #mobile-nav .nav-link.active::after {
        content: "";
        display: block;
        margin: 0 auto;
        margin-top: 4px;
        width: 50%;
        height: 3px;
        background-color: var(--text-color);
        border-radius: 2px;
        transition: width 0.3s ease;
    }

    header .nav-link {
        font-size: 2.5rem;
    }

    header .social-desktop {
        display: none;
    }

    header .social-mobile {
        display: flex;
    }

    header .social-mobile a {
        width: 50px;
        height: 50px;
        font-size: 2rem;
    }

    /** ----- BANNER ----- */
    .info-banner h2 {
        font-size: 1.8rem;
    }

    .info-banner li {
        font-size: 1rem;
    }

    /** ----- MAIN ----- */
    main {
        margin-bottom: 5rem;
    }

    /** ----- INTRO ----- */
    .intro-section {
        height: 50vh;
    }

    .intro-section .intro-text {
        max-width: 300px;
    }

    .intro-section .intro-text h1 {
        margin-bottom: 1rem;
        font-size: 2rem;
    }

    .intro-section .intro-text h2 {
        font-size: 2rem;
        line-height: 1.5;
    }

    /** ----- TAPE SECTION ----- */
    .tape-section .tape-overlay {
        padding: 8rem 0;
    }

    .tape-section .tape-text-1 {
        font-size: 1.5rem;
    }

    .tape-section .tape-text-2 {
        font-size: 1.2rem;
    }

    .triangle {
        --triangle-height: 3rem;
    }

    /** ------ MORE INFO ------ */
    .more-info-section {
        height: 40vh;
    }

    /** ------ MODALE MENU NATALIZIO E PASQUALE ------ */
    #christmas-modal .modal-content,
    #easter-modal .modal-content {
        width: 100%;
        max-width: 350px;
        height: 100%;
        max-height: 600px;
        padding: 4.5rem 3rem;
    }

    #christmas-modal .modal-close,
    #easter-modal .modal-close {
        top: 6.5rem;
        right: 2.5rem;
        font-size: 1.2rem;
    }

    #christmas-modal .modal-header,
    #easter-modal .modal-header {
        padding: 0;
    }

    #christmas-modal .modal-header h2,
    #easter-modal .modal-header h2 {
        font-size: 0.8rem;
    }

    #christmas-modal .modal-header h2 i,
    #easter-modal .modal-header h2 i {
        font-size: 0.5rem;
    }

    #christmas-modal .modal-body p,
    #christmas-modal .modal-features,
    #easter-modal .modal-body p,
    #easter-modal .modal-features {
        font-size: 0.8rem;
    }

    #christmas-modal .modal-features .feature-item,
    #easter-modal .modal-features .feature-item {
        padding: 0;
        padding-left: 0.5rem;
        margin-bottom: 0.5rem;
    }

    #christmas-modal .modal-footer,
    #easter-modal .modal-footer {
        justify-content: space-between;
    }

    #christmas-modal .button,
    #easter-modal .button {
        padding: 0.2rem 0.5rem;
        font-size: 0.7rem;
    }

    #christmas-modal .primary-button,
    #easter-modal .primary-button {
        min-width: 59%;
        padding: 1rem 0.6rem;
    }

    #christmas-modal .secondary-button,
    #easter-modal .secondary-button {
        min-width: 39%;
        padding: 1rem 0.6rem;
    }

    /** ------ MODALE GUIDA ORDINE ------ */
    .order-guide-modal .modal-content {
        width: 95%;
        height: 85vh;
    }

    .order-guide-modal .modal-header {
        padding: 0.5rem 1rem;
    }

    .order-guide-modal .modal-header h2 {
        font-size: 1.5rem;
    }

    .order-guide-modal .modal-nav {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .order-guide-modal .nav-item {
        flex-direction: row;
        justify-content: flex-start;
        padding: 0.5rem;
    }

    .order-guide-modal .nav-item i {
        margin-bottom: 0;
        margin-right: 0.8rem;
        font-size: 1.3rem;
    }

    .order-guide-modal .step {
        flex-direction: column-reverse;
        text-align: left;
    }

    .order-guide-modal .step-image {
        margin-right: 0;
        flex: 0 0 auto;
    }

    .order-guide-modal .step-image img {
        max-width: 100%;
    }

    .order-guide-modal .step-text {
        margin-bottom: 1rem;
    }

    /** ------ FLOATING BUTTONS ------ */
    .order-guide-float-button,
    .whatsapp-float-button {
        width: 50px;
        height: 50px;
    }

    .order-guide-float-button {
        bottom: 75px;
        font-size: 1.4rem;
    }

    .whatsapp-float-button {
        font-size: 1.5rem;
    }

    .order-guide-float-button .custom-tooltip {
        left: 42%;
    }

    .whatsapp-float-button .custom-tooltip {
        left: -200%;
        bottom: 20%;
    }

    .order-guide-float-button .custom-tooltip::after {
        top: 98%;
        left: 52%;
    }

    .whatsapp-float-button .custom-tooltip::after {
        right: -9.2%;
        bottom: 22%;
    }

    /** ------ FOOTER ------ */
    footer .footer-container {
        flex-direction: column;
        gap: 20px;
    }

    footer .footer-logo {
        margin-bottom: 1.5rem;
    }

    footer .footer-item i {
        font-size: 2rem;
    }

    footer .vat {
        text-align: center;
        width: 100%;
    }

    /** ============= HOME PAGE ============= */
    /** ----- BOX NATALIZIE & PASQUALI ----- */
    #home-page .christmas-box-banner .christmas-box-banner,
    #home-page .easter-box-banner .christmas-box-banner {
        padding: 2rem 0;
    }

    #home-page .christmas-box-banner .banner-content,
    #home-page .easter-box-banner .banner-content {
        flex-direction: column;
        text-align: center;
        gap: 2.5rem;
    }

    #home-page .christmas-box-banner .banner-text h2,
    #home-page .easter-box-banner .banner-text h2 {
        font-size: 1.7rem;
    }

    #home-page .christmas-box-banner .banner-text h2 i,
    #home-page .easter-box-banner .banner-text h2 i {
        font-size: 1.6rem;
    }

    #home-page .christmas-box-banner .banner-text p,
    #home-page .easter-box-banner .banner-text p {
        font-size: 1rem;
    }

    #home-page .christmas-box-banner .banner-features,
    #home-page .easter-box-banner .banner-features {
        justify-content: center;
        font-size: 1rem;
    }

    #home-page .christmas-box-banner .banner-image,
    #home-page .easter-box-banner .banner-image {
        flex: 0 0 auto;
        max-width: 280px;
        width: 100%;
    }

    #home-page .christmas-box-banner .christmas-button,
    #home-page .easter-box-banner .easter-button {
        padding: 16px 30px;
        font-size: 1.1rem;
    }

    /** ----- PRESENTATION ----- */
    #home-page .presentation-section .key-benefits {
        flex-direction: column;
        align-items: center;
    }

    #home-page .presentation-section .benefit-item {
        width: 80%;
        margin-bottom: 15px;
    }

    #home-page .presentation-section .product-button {
        padding: 12px 25px;
        font-size: 1.2rem;
    }

    /** ----- STORE ----- */
    #home-page .store-section .store-content,
    #home-page .store-section .store-content.reverse {
        flex-direction: column;
        margin-bottom: 4rem;
    }

    #home-page .store-section .store-content:last-child {
        margin-bottom: 1rem;
    }

    #home-page .store-section .store-content p {
        margin: 0;
    }

    /** ----- FEEDBACK -----  */
    #home-page .feedback-section .feedback-card {
        margin: 0 auto;
    }

    #home-page .feedback-section .section-title {
        font-size: 2rem;
    }

    /** ============= PRODUCTS PAGE ============= */
    /** ----- INTRO ----- */
    #products-page .intro-section {
        margin-bottom: 1rem;
    }

    /** ----- BOX NATALIZIE & PASQUALI----- */
    #products-page .christmas-boxes-section,
    #products-page .easter-boxes-section {
        padding: 2rem 0;
    }

    #products-page .christmas-boxes-section .christmas-boxes-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    #products-page .easter-boxes-section .easter-boxes-container {
        flex-direction: column;
    }

    #products-page .easter-boxes-section .easter-box {
        width: 100%;
    }

    #products-page .easter-boxes-section .easter-box:not(:last-child) {
        margin-bottom: 2rem;
    }

    #products-page .christmas-boxes-section .box-header,
    #products-page .easter-boxes-section .box-header {
        padding: 2.1rem 1rem;
    }

    #products-page .christmas-boxes-section .box-header h3,
    #products-page .easter-boxes-section .box-header h3 {
        font-size: 1.5rem;
    }

    #products-page .christmas-boxes-section .box-badge,
    #products-page .easter-boxes-section .box-badge {
        top: 0.25rem;
        right: 0.25rem;
        font-size: 0.65rem;
    }

    #products-page .christmas-boxes-section .box-content,
    #products-page .easter-boxes-section .box-content {
        padding: 1.5rem;
    }

    #products-page .christmas-boxes-section .box-features,
    #products-page .easter-boxes-section .box-features {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    /** ----- NAVIGAZIONE MENU ----- */
    #products-page .menu-navigation {
        top: 80px;
        margin-top: 0;
        padding: 0.8rem 0;
    }

    #products-page .menu-navigation .container {
        width: 100%;
        margin: 0;
    }

    #products-page .menu-nav-container {
        gap: 0.5rem;
        align-items: center;
        justify-items: center;
        flex-wrap: wrap;
    }

    #products-page .menu-nav-container::-webkit-scrollbar {
        display: none;
    }

    #products-page .menu-nav-link {
        flex-direction: row;
        justify-content: flex-start;
        padding: 0.3rem 0.8rem;
        border-radius: 25px;
        min-width: auto;
    }

    #products-page .menu-nav-link i {
        font-size: 1rem;
        margin: 0;
        margin-right: 0.6rem;
    }

    #products-page .menu-nav-link span {
        font-size: 0.8rem;
        text-align: left;
    }

    #products-page .menu-section {
        scroll-margin-top: calc(80px + 8rem);
    }

    /** ------ MENU ------ */
    #products-page .menu-section {
        margin-top: 0;
    }

    #products-page .menu-section .disclaimer {
        font-size: 0.7rem;
    }

    #products-page .menu-section .menu-container {
        grid-template-columns: 1fr;
    }

    #products-page .menu-section .menu-item {
        flex-direction: column;
    }

    #products-page .menu-section .item-image {
        margin-right: 0;
        margin-bottom: 1rem;
    }

    /** ============= CONTACTS PAGE ============= */
    /** ----- COLLABORATION ----- */
    #contacts-page .collab-section .collab-icon {
        font-size: 2rem;
    }

    #contacts-page .contact-section {
        flex-direction: column;
    }

    /** ----- CONTACT US ----- */
    #contacts-page .contact-section .contact-left,
    #contacts-page .contact-section .contact-right {
        width: 85vw;
        margin: 0 auto;
        margin-top: 2rem;
        padding: 0;
    }

    #contacts-page .contact-section .contact-left .contact-buttons {
        margin-bottom: 4rem;
    }

    #contacts-page .contact-section .contact-left .contact-icon-box {
        margin-bottom: 2rem;
    }

    #contacts-page .contact-section .contact-left .contact-icon-box i {
        font-size: 2rem;
    }

    #contacts-page .contact-section .contact-left .opening-container {
        font-size: 1rem;
    }

    #contacts-page .contact-section .contact-right {
        padding: 1rem;
        margin-bottom: 1rem;
    }

    #contacts-page .contact-section .contact-form .privacy-modal-overlay {
        align-items: center;
    }

    #contacts-page
        .contact-section
        .contact-form
        .privacy-modal-overlay
        .privacy-modal {
        margin: 1rem;
    }

    /** ----- FAQ ----- */
    #contacts-page .faq-section .section-title {
        color: var(--white);
    }

    #contacts-page .faq-section .accordion-header h3 {
        font-size: 1.2rem;
    }

    #contacts-page .faq-section .accordion-body-content p {
        font-size: 1.1rem;
    }
}