/*
Theme Name: IBS WP Theme
Theme URI: https://paganibros.com/
Author: Paganibros
Author URI: https://paganibros.com/
Description: Tema WordPress per IBS
Version: 7
License: GNU General Public License v2 or later
Text Domain: ibs-wptheme
Domain Path: /languages
*/
  


/* ==========================================================================
   CUSTOM PROPERTIES
   ========================================================================== */

:root {
    --main-color: #003657;
    --dark-color: #001E3D;
    --light-color: #F2F2F2; 
    --white-color: #FFF;
    --axent-color: #CE4448;
    --grey-color: #0036573a;
    --transition: all 0.6s cubic-bezier(0,.68,.27,1);
    --rounded: 20px;
    --transition-infoline: all 0.4s cubic-bezier(0.531, 0, 0, 0.992);
}

/* ==========================================================================
   BASE RESET
   ========================================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   LENIS SMOOTH SCROLL — regole ufficiali
   Prevengono conflitti tra Lenis e i comportamenti scroll nativi del browser.
   ========================================================================== */

html.lenis,
html.lenis body {
    height: auto; /* Lenis gestisce l'altezza internamente */
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important; /* Disabilita CSS scroll-behavior che conflita con Lenis */
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain; /* Isola lo scroll di elementi con scroll interno */
}

.lenis.lenis-stopped {
    overflow: hidden; /* Blocca lo scroll nativo quando Lenis è fermato (modal, overlay) */
}

.lenis.lenis-smooth iframe {
    pointer-events: none; /* Evita conflitti con iframe durante lo smooth scroll */
}

/* html {
    overflow-x: hidden !important;
} */
/* 
html, body, a {
    cursor: none !important;
} */

/* html {
  overflow-y: scroll;
} */

.fancybox__dialog a, #matter-menu-label {
    cursor: pointer !important;
}
/* 
::selection {
    background-color: var(--axent-color);
    color: var(--main-color);
} */

body {
    overflow-x: hidden !important;
    font-size: 16px;
    font-family: "Schibsted Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

body.noscroll {
    overflow-y: hidden !important;
}

a {
    cursor: pointer;
    color: var(--light-color);
    text-decoration: none;
    transition: var(--transition);
}

.p3 {
    padding: 1.5rem !important;
}

.px3 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.pl3 {
    padding-left: 1.5rem !important;
}

.pr3 {
    padding-right: 1.5rem !important;
}

/* ==========================================================================
   LAYOUT UTILITIES
   ========================================================================== */

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: transparent;
    z-index: 110;
}

.header.is-sticky {
    position: fixed;
    top: 0px;
    /* padding-top: 10px; */
    margin: 0 auto;
    z-index: 110;
}

.header.is-sticky .header-container {
    padding: 1rem;
    /* transition: all 0.5s ease; */
    z-index: 110;
}

.header-container {
    z-index: 110;
    padding: 1rem;
}

.header .header-container .header-content {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    z-index: 110;
    /* GPU layer promotion: riduce il costo di backdrop-filter su schermi grandi,
       evitando repaint del background ad ogni frame di scroll */
    transform: translateZ(0);
    will-change: transform;
}

.header.is-sticky .header-container .header-content {
    box-shadow: 0px 4px 14px #001e3d1a;
    background-color: rgba(255, 255, 255, 0.497);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px); 
    z-index: 110;
}

main, .header-content, .footer-content {
    max-width: 100vw;
    margin: 0 auto;
}

.header-content {
    background-color: var(--white-color);
    z-index: 110;
    /* ⚡ transition: all → specifiche: evita che il browser monitore
       TUTTE le proprietà CSS durante lo scroll (causa reflow su larga scala) */
    transition: background-color 500ms cubic-bezier(0.534, 0.001, 0, 1.007) 80ms,
                box-shadow      500ms cubic-bezier(0.534, 0.001, 0, 1.007) 80ms;
}

.header-content.turn-dark,
.header.is-sticky .header-content.turn-dark {
    background-color: var(--dark-color);
    transition: background-color 1000ms cubic-bezier(0.534, 0.001, 0, 1.007) 0ms;
}

.header-content.turn-dark .menu-item a {
    color: var(--light-color);
    transition: color    1000ms cubic-bezier(0.534, 0.001, 0, 1.007) 0ms,
                opacity  1000ms cubic-bezier(0.534, 0.001, 0, 1.007) 0ms;
}

.header-content.turn-dark .menu-item:after {
    background-color: var(--light-color);
}

.header-content.turn-dark #menu-item-35::before,
.header-content.turn-dark #menu-item-116::before {
    background-color: var(--light-color); /* Basta cambiare il colore */
}

/* .header-content.turn-dark #menu-item-35:hover::before,
.header-content.turn-dark #menu-item-116:hover::before {
    transform: rotate(180deg);
    background-size: contain;
} */

.header-content.turn-dark .menu-indicator {
    background-color: var(--light-color);
}

.w-reduce {
    /* margin: 0rem 1.5rem; */
    /* margin: 0 auto; */
    /* transform: scaleX(0.965); */
}

/* ==========================================================================
   SCROLL PERFORMANCE — GPU layer promotion
   will-change: transform su tutti gli elementi animati da GSAP ScrollTrigger
   con scrub, evitando repaint su ogni pixel di scroll.
   NON usare su elementi statici: consuma VRAM inutilmente.
   ========================================================================== */

.parallax,
.parallax-small,
.parallax-mid,
.parallax-grid {
    will-change: transform;
}

.scroll-expand,
.scroll-expand-hero {
    /* will-change: clip-path; */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.img-scale {
    will-change: transform, opacity;
}

.gap {
    gap: 20px;
    row-gap: 20px;
}

.logo {
    width: 80px;
    /* transform-origin: center center !important; */
    /* transition: var(--transition); */
}

.logo svg path {
    /* ⚡ Solo fill: l'unica proprietà che cambia realmente sul logo */
    transition: fill 0.5s ease;
}

.header.turn-light .logo svg path {
    fill: var(--white-color) !important;
    transition: fill 0.5s ease;
}

body.off-canvas-open .header.turn-light .logo svg path {
    fill: var(--dark-color) !important;
    transition: fill 1000ms cubic-bezier(0.534, 0.001, 0, 1.007) 200ms;
}

.logo.invert-logo svg path {
    fill: var(--light-color) !important;
    transition: fill 1000ms cubic-bezier(0.534, 0.001, 0, 1.007) 200ms;
}

/* .header.is-sticky .logo {
    width: 80px;
} */

/* ==========================================================================
   BORDER UTILITIES
   ========================================================================== */

.rounded-20 {
    border-radius: 20px;
}

.border-bottom {
    border-bottom: 1px solid var(--dark-color);
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

.main-title {
    font-size: clamp(2.75rem, 1rem + 10.8vw, 14.63rem);
    /* font-size: calc(50px + 4vw); */
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -3.8px;
    color: var(--main-color);
    white-space: nowrap;
    cursor:default;
}

.subtitle {
    /* font-size: calc(2rem + 2vw); */
    font-size: clamp(1.8rem, 1.5rem + 2.6vw, 4.3rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -1.33px;
    font-family: "Schibsted Grotesk", sans-serif;
}

.subtitle-max {
    font-size: 3rem;
    /* font-size: clamp(3.75rem, 2.8398rem + 3.8835vw, 7.5rem); */
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -1.33px;
    font-family: "Schibsted Grotesk", sans-serif;
}

.subtitle-epigrafe {
    font-size: 1.78rem;
    /* font-size: clamp(1.5625rem, 0.8799rem + 2.9126vw, 4.375rem); */
    font-family: "Schibsted Grotesk", sans-serif;
    font-weight: 500;
    line-height: 1.16;
    max-width: 290px;
}

.lead {
    font-size: 20px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.38px;
}

.lead-max {
    font-size: 2.4rem;
    font-weight: 500;
}

.body {
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
}

.small {
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.14px;
    text-transform: uppercase;
}

.uppercase {
    text-transform: uppercase;
}

/* ==========================================================================
   COLOR UTILITIES
   ========================================================================== */

.main-color {
    color: var(--main-color);
}

.dark-color {
    color: var(--dark-color);
}

.light-color {
    color: var(--light-color);
}

.white-color {
    color: var(--white-color);
}

.axent-color {
    color: var(--axent-color);
}

.grey-color {
    color: var(--grey-color);
}

.opt-half {
    opacity: 0.6;
}


/* ==========================================================================
   OBJECT UTILITIES
   ========================================================================== */

.cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.scroll-dot {
    width: 4px;
    height: 4px;
    background-color: var(--main-color);
    border-radius: 100vw;
    animation: scrolldot 2s infinite;
}

@keyframes scrolldot {
    0% {
        transform: translateY(-200%);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateY(200%);
        opacity: 0;
    }
}


/* ==========================================================================
   COMPONENTS - BUTTONS
   ========================================================================== */

.btn {
    text-decoration: none;
    color: var(--main-color);
    padding-right: 30px;
    font-size: 1.2rem;
    font-weight: 500;
    position: relative;
    transition: var(--transition);
    text-transform: uppercase;
    width: fit-content;
    height: 20px;
    text-decoration: none !important;
}

.btn-text {
    width: fit-content;
    transform: translateY(-1px);
    transition: var(--transition);
    text-decoration: none;
}

.btn:after {
    content: '';
    background-image: url(assets/img/btn-arrow.svg);
    position: absolute;
    width: 12px;
    height: 12px;
    right: 2px;
    bottom: 5px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: var(--transition)
}

.btn:hover::after {
    transform: rotate(-45deg);
    bottom: 5px;
}

.btn:hover .btn-text {
    transform: translateY(-27px);
    opacity: 0.5;
}

/* ==========================================================================
   COMPONENTS - NAVIGATION
   ========================================================================== */

.nav-links {
    list-style: none;
    display: flex;
    /* gap: 40px; */
}

.menu-item {
    position: relative;
}

/* .menu-item:after {
    content: '';
    width: 5px;
    height: 5px;
    display: flex;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    background-color: var(--main-color);
    opacity: 0;
    transition: all 0.5s ease;
} */

/* .menu-item:hover {
    opacity: 0.5;
} */

/* .menu-item:hover:after {
    opacity: 1;
} */

.menu-indicator {
    width: 5px;
    height: 5px;
    position: absolute;
    bottom: -10px;
    border-radius: 50%;
    background-color: var(--main-color);
    transition: all 0.5s ease;
    pointer-events: none;
}

.header.turn-light .menu-indicator {
    background-color: var(--white-color);
    transition: all 0.5s ease;
}

.menu-indicator.active {
    opacity: 1;
}

.main-nav .menu-item.current-menu-item:after {
    opacity: 1;
}

.menu-item a {
    text-decoration: none;
    color: var(--main-color);
    text-transform: uppercase;
    font-size: 16px;
    transition: all 0.5s ease;
    padding: 50px 20px;
    font-family: "Hanken Grotesk", sans-serif !important;
    font-weight: 600;
}

header.turn-light .menu-item a {
    color: var(--white-color);
}

header.turn-light .offcanvas-menu .menu-item a {
    color: var(--dark-color);
}

/* .menu-item.current-menu-item a {
    font-weight: 700;
} */

#menu-main-menu:hover .menu-item a, #menu-main-menu:hover .menu-item::before {
    opacity: 0.3;
}

#menu-main-menu .menu-item a:hover, #menu-main-menu .menu-item:hover::before {
    opacity: 1;
}

.main-nav {
    display: none;
}

.mobile-nav .menu-item {
    margin-bottom: 20px;
    list-style: none;
    text-align: center;
    width: 100%;
}

.mobile-nav .menu-item a {
    white-space: nowrap;
    font-size: 1.5rem;
    margin-left: 50px;
    position: relative;
}

.mobile-nav {
    width: 100%;
}


/* li.current-menu-item a:after {
    content: '';
    display: flex;
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--main-color);
    border-radius: 100vw;
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
} */

li.current-menu-item a {
    color: var(--axent-color);
}

body.off-canvas-open .mobile-nav .menu-item a {
    margin-left: 0px;
    padding: 0px 0px;
}

.mobile-lang-selector-links .lang-item-it, .mobile-lang-selector-links .lang-item-en {
    float: left;
}

.mobile-lang-selector-links .lang-item-it a, .mobile-lang-selector-links .lang-item-en a {
    font-size: 1rem;
}

.mobile-lang-selector-links .lang-item-it {
    margin-right: 10px
}

.mobile-lang-selector-links .menu-item-115 {
    margin-bottom: 4rem;
}

.mobile-nav-links .lang-item-it, .mobile-nav-links .lang-item-en {
    display: none;
}

.mobile-lang-selector-links {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 80px;
}

.mobile-lang-selector-links .lang-item {
    width: 30px;
}

#menu-item-35::before,
#menu-item-116::before,
#menu-item-388::before,
#menu-item-389::before {
    content: "";
    position: absolute;
    top: 30%;
    right: 0px;
    width: 10px;
    height: 10px;
    background-color: var(--main-color); /* Il colore diventa animabile */
    -webkit-mask-image: url('assets/img/dropdown.svg');
    mask-image: url('assets/img/dropdown.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: background-color 0.5s ease; /* Solo color, non "all" */
    transform: translateX(-5px);
}

.header.turn-light #menu-item-35::before,
.header.turn-light #menu-item-116::before,
.header.turn-light #menu-item-388::before,
.header.turn-light #menu-item-389::before {
    background-color: var(--white-color);
}


/* #menu-item-35:hover::before,
#menu-item-116:hover::before,
#menu-item-388:hover::before,
#menu-item-389:hover::before {
    transform: rotate(180deg);
} */

.team-image {
    height: 290px;
    overflow: hidden;
}

/* ==========================================================================         
   COMPONENTS - GAME MODE
   ========================================================================== */
.game-mode-container {
    bottom: 115px;
    right: 2rem;
    display: flex;
    justify-content: space-between;
    height: 350px;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    z-index: 100;
    padding: 20px 0px 10px 0px;
    border-radius: 100px;
    transition: all 0.5s ease;
    width: 55px;
    transform: translate(12px,11px) scale(0.79) !important

}

.game-mode-container.bg,
.game-mode-container:hover {
    background-color: var(--light-color);
}


.game-switch {
    width: 40px;
    height: 80px;
    border-radius: 50px;
    padding: 5px;
    background-color: #D7E2ED;
    position: relative;
    display: flex;
    justify-content: center;
    transition: var(--transition);
}

.game-dot {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background-color: var(--main-color);
    transition: var(--transition);
    top: 20px;
    position: absolute;
    transform: translateY(-50%);
}

.game-switch.on .game-dot {
    top: 60px;
    background-color: var(--light-color);
}

.game-switch.on {
    background-color: var(--axent-color);
}

.game-switch-anim {
    left: -15px;
    transform: rotate(-15deg);
    bottom: 122px;
}

.game-switch-anim img {
    width: 15px;
}

#game-video {
    transform: translateY(80px) scale(0.35);
    position: absolute;
    
}

/* ==========================================================================         
   COMPONENTS - HERO
   ========================================================================== */
   
.hero-image {
    height: 600px;
}

.hero-image-file {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-paragraph {
    display: flex;
    color: var(--main-color);
    order: 1;
    padding-right: 0rem;
    font-family: "Hanken Grotesk", sans-serif !important;
}

.hero-logo {
    order: 1;
    padding: 30px;}

body.single-loyaltie .hero-logo {
    padding: 1rem;
    width: fit-content;
    max-width: fit-content;
    min-width: fit-content;
    background-color:rgb(231 233 239) !important;
    border-radius: var(--rounded);
}

body.single-loyaltie h1 > .main-title {
    margin-bottom: 0.5rem;
}

.hero-span-2 {
    padding-left: 0rem;
    margin-bottom: 4rem;
}

body.single-loyaltie .hero-span-2 {
    padding-left: 0px;
}

/* ==========================================================================
   COMPONENTS - INFO LINE
   ========================================================================== */

.info-line {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    /* margin-bottom: 20px; */
    /* width: 100%; */
    /* padding: 20px 0; */
    position: relative;
    transition: all 0.5s ease;
    cursor: none;
}

.info-line::after {
    content: '';
    display: flex;
    position: absolute;
    width: 100%;
    height: 1px;
    background: var(--main-color);
    bottom: 0px;
    left: 0px;
    cursor: none;
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* .info-line-separator {
    width: 100%;
    max-width: 100%;
    height: 1px;
    background-color: var(--dark-color);
} */

.info-line-image-container {
    width: 100%;
    height: 200px;
    overflow: hidden;
    transition: all 1s ease-out;
    margin-bottom: 10px;
    margin-right: 0px;
}

/* .info-line-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    transform: scale(1);
    transition: var(--transition-infoline)
} */

.info-line-title {
    font-size: 30px;
    z-index: 2;
    transition: var(--transition-infoline);
}

.info-line-description {
    min-width: 100%;
    margin-top: 10px;
    opacity: 0.6;
    text-align: left;
    transition: var(--transition-infoline);
    z-index: 2;
}

.infoline-dark-bg {
    background-color: var(--dark-color);
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100%; /* Sempre al 100%, non cambia mai */
    transform: scaleY(0);
    transform-origin: bottom; /* Cresce dal basso */
    transition: var(--transition-infoline);
    z-index: 1;
}

.info-line:hover .infoline-dark-bg {
    transform: scaleY(1);
}

.info-line:hover .info-line-title,
.info-line:hover .info-line-description {
    color: var(--light-color);
}

body#page-107 .info-line-container .info-line:nth-child(1),
body#page-107 .info-line-container .info-line:nth-child(2),
body#page-351 .info-line-container .info-line:nth-child(1),
body#page-351 .info-line-container .info-line:nth-child(2) {
    display: none;
}

/* ==========================================================================
   COMPONENTS - EPIGRAFE
   ========================================================================== */

.epigrafe {
    background-color: var(--dark-color);
    height: 500px;
}

.epigrafe.partners {
    height: auto;
    padding: 100px 0px;
}

.epigrafe-title:after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background-color: var(--light-color);
    margin: 10px auto 0 auto;
    border-radius: 100px;
}

.epigrafe > h3 {
    min-width: 90vw;
}

/* ==========================================================================
   COMPONENTS - CARDS
   ========================================================================== */
.collection-title {
    margin-bottom: 2rem;
}
   
.collection-card {
    cursor: pointer;
}

.hover-ready.collection-card,
.hover-ready.card-loyalty,
.hover-ready.mega-menu-card-container {
  opacity: 1 !important;
  transition: opacity 0.6s ease !important
}

.hover-ready.collection-card.dimmed,
.hover-ready.card-loyalty.dimmed,
.hover-ready.mega-menu-card-container.dimmed {
    opacity: 0.4 !important;
    transition: opacity 0.6s ease !important
}

.card-collection-title {
    font-family: "Hanken Grotesk", sans-serif !important;
}

/* .collection-card:hover .card-collection-title,
.mega-menu-card-container:hover .card-collection-title,
.card-loyalty:hover .card-collection-title {
    font-weight: bolder;
    transition: all 0.6s ease;
} */

.collection-card div:nth-child(2),
.mega-menu-card-container div:nth-child(2),
.card-loyalty div:nth-child(2) {
    transition: padding 0.4s ease-out;
    padding: 0px 0px 0px 0px;
}

.collection-card:hover div:nth-child(2),
.mega-menu-card-container:hover div:nth-child(2),
.card-loyalty:hover div:nth-child(2) {
    padding: 0px 20px 0px 0px;
}

.scopri {
    display: none;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-family: "Hanken Grotesk", sans-serif !important;
}

.scopri, .card-collection-title {
    transition: all 0.4s ease-out !important;
}

.collection-card, 
.mega-menu-card {
    width: 49%;
    transition: opacity 0.6s ease, flex 0.4s ease;
    padding: 0px;
    padding-bottom: 20px;
    overflow: hidden;
}

.collection-card:last-child,
.collection-card:nth-child(5),
.card-loyalty:last-child {
    padding-right: 0px;
}

.loyaltie-card-container .card-loyalty:nth-child(6) > div > img {
    filter: brightness(0);
}

.loyaltie-card-container {
    row-gap: 20px;
}

.loyaltie-card-container a.Val .loyal-arch,
.loyaltie-card-container a.CCG .loyal-arch,
.loyaltie-card-container a.Head .loyal-arch {
    background-color: #f4f4f4 !important;
}


.collection-card-image-container {
    height: 400px;
    will-change: transform;
    transform: translateZ(0); /* forza GPU layer */
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: var(--rounded);
    aspect-ratio: 4/5;
}

.mega-menu-card-image-container {
    /* height: 250px; */
    overflow: hidden;
    border-radius: var(--rounded);
    aspect-ratio: 1/1;
}


.mega-menu-card-image-container .collection-image {
    transition: transform 0.6s ease-out; 
}

.mega-menu-card-image-container .collection-image:hover {
    transform: scale(1.1);
}

.collection-image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    /* transform: scale(1.7); */
    transition: transform 0.6s ease-out;
}

.collection-image:hover {
    transform: scale(1);
}

.expand-card.expand .collection-image {
    /* transform: scale(1.7); */
    width: 100.2%;
}

.location-card, .cerfitificatori-card, .kiwa-card {
    background-color: var(--light-color);
}

.location-card {
    flex-direction: column-reverse;
}

.location-card div:nth-child(2) {
    margin-bottom: 50px;
}

.location-card .pin img {
    width: 20px !important;
}

.kiwa-card {
    padding: 2rem !important;
}

.kiwa-card img {
    width: 150px;
}

.cerfitificatori-card {
    height: 300px;
}

.cerfitificatori-card img {
    max-width: 200px;
}

.cerfitificatori-card .tuv {
    max-width: 100px;
}

.card-number {
    margin-bottom: 100px;
}

.collection-card-container {
    /* gap: 10px; */
    row-gap: 20px;
}

.loyal-mega, .loyal-arch {
    max-height: 300px;
    aspect-ratio: 4/5;
}

.loyal-mega img, .loyal-arch img {
    transition: all 0.6s ease-out;
}

.loyal-mega:hover img, .loyal-arch:hover img {
    transform: scale(1);
}

/* ==========================================================================
   COMPONENTS - BRANDS
   ========================================================================== */

.brand-logo-container {
    /* width: 47%; */
    /* height: 200px; */
    aspect-ratio: 1/1;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--dark-color);
    border-radius: var(--rounded);
}

.brand-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.loyalties {
    display: flex;
    flex-direction: column;
}



.loyalties .content {
    order: 1;
    margin-bottom: 60px;
}

.Lego img {
    transform: scale(1.1);
}

.CCG img {
    transform: scale(0.9);
}

.Zipit img {
    transform: scale(1.35);
}

.Head img {
    transform: scale(0.9);
}


/* 
body.single-loyaltie.postid-105 .hero-logo img {
    width: 300px !important;
}

body.single-loyaltie.postid-106 .hero-logo img {
    width: 390px !important;
}

body.single-loyaltie.postid-103 .hero-logo img {
    width: 390px !important;
}

body.single-loyaltie.postid-104 .hero-logo img {
    width: 330px !important;
}

body.single-loyaltie.postid-101 .hero-logo img {
    width: 160px !important;
}

body.single-collezione .hero-logo img {
    width: 80% !important;
}
*/

body.single-loyaltie .hero-logo img {
    max-width: 100% !important;
    width: 390px !important;
}

body.single-loyaltie.postid-105 .hero-logo img {
    width: 300px !important;
}

body.single-loyaltie.postid-75 .hero-logo img,
body.single-loyaltie.postid-101 .hero-logo img,
body.single-loyaltie.postid-375 .hero-logo img,
body.single-loyaltie.postid-374 .hero-logo img {
    width: 200px !important;
}

body.single-loyaltie.postid-104 .logo-loyal-in-page,
body.single-loyaltie.postid-371 .logo-loyal-in-page {
    filter: brightness(10);
}



/* ==========================================================================
   COMPONENTS - MARQUEE e CURSOR
   ========================================================================== */

.marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    background: var(--dark-color);
    cursor: none;
}

.marquee.light {
    background: var(--light-color);
}

.marquee .marquee-text {
    display: inline-block;
    font-size: 90px;
    color: var(--white-color);
    animation: marquee 30s linear infinite;
    pointer-events: none;
}

.marquee.light .marquee-text {
    color: var(--dark-color);
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

.cursor-arrow .arrow-content {
    transition: opacity 0.15s ease;
    position: relative;
    /* transform: scale(0.5);
    left: 50%;
    top: 50%; */
}

.cursor-arrow circle {
    transition: fill 0.3s ease;
}

.cursor-arrow {
    transition: opacity 0.3s ease;
    top: 0;
    left: 0;
    cursor: none;
    opacity: 0;
    pointer-events: none;
    position: fixed;
}

/* Nelle zone con arrow cursor, il cursore di sistema è nascosto */
.info-line-container,
.mega-menu-cards-row,
.loyaltie-card-container {
    cursor: none;
}

.cursor, .cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1003;
    opacity: 0; /* nascosto di default: viene mostrato via JS solo sulle info-line */
}

.cursor-dot,
.cursor-arrow {
    display: none;
}
/* .cursor-dot {
    width: 6px;
    height: 6px;
    background: var(--axent-color);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    display: none;
} */

.cursor.cursor--link {
  width: 100px;
  height: 100px;
  background-color: #6f8da02a;
  border: none;
  transition: all 0.2s ease-out;
    z-index: 1003;
}

.cursor.cursor--link .cursor-dot {
    opacity: 0;
}

/* Cursore swiper */
.cursor--swiper-drag {
  width: auto !important;
  height: auto !important;
  background: none !important;
  border: none !important;
  pointer-events: none !important;
}

.cursor--swiper-drag svg {
  display: block;
  transition: transform 0.15s ease;
}

/* Cursore mentre si trascina - movimento immediato */
.cursor--swiper-dragging {
  transition: transform none !important;
}

.cursor--swiper-dragging svg {
  transform: scale(1.1);
}

/* Effetto scale-down sulle slide durante il drag */
.mySwiper .swiper-slide {
  transition: all 0.3s ease;
}

.mySwiper .swiper-slide.clicked {
  transform: scale(1.1);
}

.mySwiper {
    touch-action: pan-y;
    cursor: none;
}

.cls-1 {
    fill: transparent !important;
}

footer .cls-1 {
    fill: var(--light-color) !important;
}

footer.light .cls-1 {
    fill: var(--dark-color) !important;
}

/* ==========================================================================
   COMPONENTS - MEGA MENU
   ========================================================================== */

.mega-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0;
    pointer-events: none;
    transition: all 500ms cubic-bezier(0.534, 0.001, 0, 1.007) 80ms;
    z-index: 101;
}

.mega-menu-overlay.open {
    opacity: 0.2;
    pointer-events: auto;
}


.mega-menu {
    /* transition: var(--transition); */
    /* transition: all 0.5s ease-out; */
    top: 80px;
    /* margin: 0px 1rem; */
    border-radius: 0px 0px 20px 20px;
}

.mega-menu-inner {
    background-color: var(--dark-color);
    border-radius: 0px 0px 20px 20px;
    width: 100%;
}

.header.is-sticky .mega-menu {
    top: 80px;
    box-shadow: 0px 4px 14px #001e3d1a;
    background-color: var(--dark-color);
    /* backdrop-filter: blur(20px); */
    margin: 0px 1rem;
    border: 1px solid var(--dark-color);
}

.mega-collection {
    opacity: 1;
    pointer-events: none;
    z-index: 99;
    /* height: 0px; */
    min-height: 0px;
    overflow: hidden;
    transition: all 1000ms cubic-bezier(0.534, 0.001, 0, 1.007);
    transform: translateY(-150%);
}

/* .mega-menu-card-container {
  opacity: 0;
  transform: translateY(-40px);
} */

.mega-menu-card-container:nth-child(6), .mega-menu-card-container:nth-child(7), .mega-menu-card-container:nth-child(8), .mega-menu-card-container:nth-child(9), .mega-menu-card-container:nth-child(10) {
    margin-bottom: 0px !important;
}

.mega-loyalties {
    opacity: 1;
    pointer-events: none;
    z-index: 99;
    /* height: 0px; */
    transform: translateY(-150%);
    min-height: 0px;
    overflow: hidden;
    transition: all 1000ms cubic-bezier(0.534, 0.001, 0, 1.007)
}

.mega-collection.open {
    opacity: 1;
    pointer-events: auto;
    /* height: 90vh; */
    transform: translateY(-7%);
    /* min-height: 1080px; */
}

.mega-loyalties.open {
    opacity: 1;
    pointer-events: auto;
    /* height: 40vh; */
    transform: translateY(-15%);
    /* min-height: 330px; */

}

.mega-container {
    height: 95lvh;
    overflow: hidden;
    pointer-events: none;
    position: fixed;
    z-index: 102;
}


.mega-collection-introduction {
    font-size: 40px;
}

.mega-loyalties > div a:last-child > div > img {
    filter: brightness(0);
}

/* .mega-loyalties > div a:nth-child(5) > div > img {
    filter: brightness(100);
} */


/* ==========================================================================
   COMPONENTS - OFF CANVAS MENU
   ========================================================================== */

.offcanvas-menu {
    background-color: var(--light-color);
    z-index: 1;
    width: 100vw;
    height: 100lvh;
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 200px 0px 40px 0px;
    /* display: none; */
    transform: translateX(100%);
    transition: all 0.7s ease;
    overflow: hidden;
}

body.off-canvas-open .offcanvas-menu {
    display: flex;
    width: 100vw;
    padding: 200px 1rem 1rem 1rem;
    transform: translateX(0%);
}

.toggle-off-canvas {
    display: block;
}

.header.turn-light .toggle-off-canvas .line {
    background-color: var(--white-color);
}

body.off-canvas-open .header.turn-light .toggle-off-canvas .line {
    background-color: var(--dark-color);
}

.line {
    width: 35px;
    height: 2px;
    background-color: var(--dark-color);
    margin-bottom: 6px;
    transform-origin: center center;
    transition: var(--transition);
}

line .bottom {
    margin-bottom: 0px;
}

body.off-canvas-open {
    overflow-y: hidden !important;
}

body.off-canvas-open .line.top {
    transform: rotate(45deg) translate(4px, 3px);
}

body.off-canvas-open .line.middle {
    opacity: 0;
}

body.off-canvas-open .line.bottom {
    transform: rotate(-45deg) translate(2.9px, -2.3px);
}

/* ==========================================================================
   COMPONENTS - FOOTER
   ========================================================================== */

footer {
    bottom: 0;
    z-index: 2;
    color: var(--light-color);
    text-decoration: none;
    position: relative;
    background-color: var(--white-color);
}

footer > div {
    background-color: var(--dark-color);
    min-height: 500px;
    height: fit-content;
}

footer.light {
    background-color: var(--dark-color);
}

footer.light > div {
    background-color: var(--light-color);
}

footer svg path:nth-child(2),
footer svg path:nth-child(4) {
    fill: var(--light-color);
}

footer.light svg path:nth-child(2),
footer.light svg path:nth-child(4) {
    fill: var(--main-color);
}

footer.light svg path:nth-child(1),
footer.light svg path:nth-child(3) {
    fill: var(--main-color);
}


footer.light * {
    color: var(--dark-color);
}

footer a:hover {
    opacity: 0.5;
}

footer a, 
footer p {
    font-size: 0.8rem;
}

.copyright {
    text-align: left;
}

.low-footer-copyright p, .low-footer-links a {
    color: #4b5a6a;
    transition: all 0.5s ease;
}

.low-footer-links a:hover {
    color: var(--white-color);
}

body.single-collezione .low-footer-links a, body.single-collezione .low-footer-copyright p {
    color: #b9bfc6;
    transition: all 0.5s ease;
}

body.single-collezione .low-footer-links a:hover {
    color: var(--main-color);
}


/* ==========================================================================
   COMPONENTS - MISC
   ========================================================================== */

.map-svg {
    scale: 2;
    translate: -122px;
}

.map-svg .st0 {
    fill: var(--white-color);
}

.logo-flag {
    /* top: 32%; */
    z-index: 100;
    left: 50%;
    transform: translateX(-47%);
}

.logo-flag-inside-map {
    transform: translate(46.9%, 12%) scale(0.5);
}

.pin {
    border-radius: 100vw;
    padding: 5px;
    background-color: var(--white-color);
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    width: 50px;
}

.svg-container {
    background-color: var(--light-color);
    height: 780px;
}

.num {
    font-size: 60px;
    font-weight: 600;
}

body.page-template-tailor-made .hero-image-file {
    scale: 1.4;
    object-fit: cover;
}

body.page-template-index .swiper-slide,
body.single-collezione .swiper-slide {
    height: 390px !important;
    transition: all 0.5s ease;
}

.swiper-slide.clicked {
    scale: 0.8;
    transition: all 0.5s ease;
}

.mySwiper .swiper-slide img {
    aspect-ratio: 4/5;
}

.swiper-pagination {
    transform: translateY(-11px) !important;
}

/* ==========================================================================
   PRELOADER & PAGE TRANSITION
   ========================================================================== */
body.page-template-index .preloader-container {
    display: flex;
}

.preloader-container {
    z-index: 112;
    position: absolute;
    top: 0;
    left: 0;
    display: none
}

.preloader {
    top: 0;
    z-index: 1001;
}

.logo-preloader, .video-preloader, .text-preloader {
    opacity: 0;
}

#loader-video {
    height: 100px;
    width: 70px;
    z-index: 1001;
}

#reveal-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1000;
    pointer-events: none;
}

/* .circle-mask {
    height: 100lvh;
    width: 100vw;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 111;
    transform: translateY(-4rem);
} */

/* .circle-radar {
    opacity: 0;
} */

/* Page transition */
#page-transition-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--awb-color1);
	z-index: 99999;
	pointer-events: none;
	opacity: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

#page-transition-overlay svg {
	width: 150px;
	opacity: 0.2;
}

.pop-button {
    bottom: 50%;
    right: 50%;
    border: none;
    background: none;
    position: fixed;
    width: fit-content;
    height: fit-content;
    z-index: 100;
}

.pop-button svg {
    border-radius: 100%;
    background-color: var(--light-color);
    padding: 5px;
    transition: all 0.3s ease;
}

.bg-pop-button {
    background-color: var(--light-color);
    position: fixed;
    top: 50%;
    left: 50%;
    width: 2000px;
    height: 2000px;
    z-index: 99;
    transform: translate(-50%, -50%);
    aspect-ratio: 1/1;
    border-radius: 100%;
}

.intro {
    z-index: 100;
    top: 55%;
    left: 50%;
    transform: translate(-50%, 50%);
}

.pop-button svg:hover {
    transform: scale(0.8) !important;
}

.make-me-pop {
    bottom: 30.5px;
    right: 90px;
    position: fixed;
    background-color: var(--light-color);
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0px 20px 0px 20px;
    border-radius: 50px;
    transform-origin: 120% 50%;
    scale: 0;
    z-index: 99;
}

/* ==========================================================================
   FORM
   ========================================================================== */


.wpcf7-form input::placeholder, .wpcf7 textarea::placeholder {
    color: #0036573a
}

.wpcf7-form-control {
    border: 0px;
    border-bottom: 1px solid var(--main-color);
    color: var(--main-color);
    height: 50px;
    font-size: 1.5rem;
    width: 100%;
    margin-bottom: 3rem;
}

.wpcf7-not-valid-tip {
    margin-top: -40px !important;
}

.input-form-row {
    margin-bottom: 0px;
}

.input-form-row p {
    /* display: flex; */
    gap: 0px;
    flex-wrap: wrap;
}

.wpcf7-form-control-wrap {
    flex-grow: 1;
    margin-bottom: 40px;
}

.wpcf7-textarea {
    height: 200px;
    font-family: 'Schibsted Grotesk';
    color: var(--main-color);
}

.wpcf7-textarea::placeholder {
    color: var(--main-color);
}

.invio-container {
    flex-direction: column;
    align-items: start;
    gap: 20px;
    margin-top: 50px;
}

.invio-container > a {
    pointer-events: none;
}

.form-privacy {
    margin: 0px 0px 20px 0px;
}

.form-privacy .wpcf7-form-control {
    border: none;
}

.form-privacy .wpcf7-form-control label {
    display: flex;
    align-items: center;
}

.form-privacy .wpcf7-form-control label .wpcf7-list-item-label {
    margin-left: 10px;
}

.form-privacy .wpcf7-list-item {
    margin: 0px;
}

.form-privacy .wpcf7-list-item-label {
    font-size: 1rem;
}

.wpcf7-submit {
    border: 1px solid var(--main-color);
    border-radius: 100vw;
    padding: 10px 20px;
    font-size: 16px;
    font-family: "Schibsted Grotesk", sans-serif;
    cursor: pointer;
    transition: all 0.5s ease;
    background-color: var(--white-color);
    opacity: 0.5;
}

.wpcf7-submit:hover {
    background-color: var(--main-color);
    color: var(--light-color);
    opacity: 1;
}

.wpcf7-submit[disabled] {
  pointer-events: none !important;
  opacity: 0.4;
  cursor: not-allowed !important;
}

.wpcf7-submit:not([disabled]) {
  pointer-events: auto;
  opacity: 1;
  cursor: pointer;
}


.wpcf7-form input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #333;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  aspect-ratio: 1/1;
}

.wpcf7-form input[type="checkbox"]:hover {
  border-color: #000;
}

.wpcf7-form input[type="checkbox"]:checked {
  background-color: #333;
  border-color: #333;
}

.wpcf7-form input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
}

.wpcf7-response-output {
    border-radius: 20px;
    padding: 30px 30px !important;
    margin: 20px 0px 0px 0px !important;
    font-size: 20px !important;
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   SINGLE COLLEZIONE
   ========================================================================== */

.prodotti-list-container {
    background-color: var(--dark-color);
    position: sticky;
    top: 0px;
    z-index: 10;
    min-height: 100lvh;
}

.prodotti-list {
    white-space: break-spaces;
    font-weight: bolder;
    font-family: "Hanken Grotesk", sans-serif !important;
    color: var(--light-color);
    line-height: 80px;
}

.galleria-prodotti {
    z-index: 10;
    gap: 50px;
    row-gap: 150px;
    margin-top: -90vh;
}

.immagine-prodotto {
    flex-basis: 40%;
    max-width: 45%;
    height: fit-content;
}

.immagine-prodotto.more-margin {
    margin-top: 200px;
}

.immagine-prodotto img {
    width: 160%;
    height: auto;
    object-fit: contain;
    border-radius: 20px;
}

/* ==========================================================================
   SINGLE LOYELTIES
   ========================================================================== */

.loyaltie-hero-image-file {
    filter: brightness(0.5);
}

.masonry-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colonne */
    gap: 20px;
    grid-auto-rows: 10px; /* Unità base piccola per il layout */
    margin-bottom: 4rem;
}

.masonry-item {
    width: 100%;
    height: fit-content;
}

.masonry-item img {
    width: 100%;
    border-radius: 20px;
    display: block;
}

/* Responsive */
@media (max-width: 768px) {
    .masonry-grid {
        grid-template-columns: repeat(1, 1fr); /* 2 colonna su mobile */
    }
}

.loader-circle {
  width: 80px;
  height: 80px;
  border: 4px solid #000;
  border-top-color: transparent;
  border-radius: 50%;
  margin: 0 auto 15px;
}

.loader-text {
  font-family: sans-serif;
  font-size: 1rem;
  color: #000;
}


/* ==========================================================================
   COMPONENTS FANCYBOX
   ========================================================================== */

   .f-html {
        padding: 1rem !important;
        width: 350px;
   }

   .fancy-cta {
        padding: 1rem 2rem;
        border: 0;
        background: var(--main-color);
        border-radius: 10px;
        width: 100%;
   }

   .fancy-cta:hover {
        opacity: 0.8;
   }

   .is-close-button {
        right: 50% !important;
        transform: translateX(50%) !important;
        top: -40px !important;
   }

   .fancybox__viewport.is-draggable {
        cursor: auto !important;
   }



/* Canvas Matter.js */
#matter-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100lvh;
    /* pointer-events: none; */
    z-index: 99;
    cursor: default !important;
    display: none;
}

/* Label menu sulle forme */
.matter-menu-label {
    position: absolute;
    color: black;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    z-index: 99;
    transition: opacity 0.3s ease;
    opacity: 0.2;
    text-transform: uppercase;
}

.coll-name {
        margin-left: 0rem;
        margin-bottom: 3rem;    
    }



/* Nascondi il testo completo e sostituisci con abbreviazione */

.lang-item a {
  font-size: 11.7px;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.lang-item.current-lang a {
  opacity: 1;
}

.lang-item:not(.current-lang):hover {
  opacity: 0.8;
}

.lang-item-it, .lang-item-en {
    line-height: 17.5px;
}

.lang-item-it a {
    margin: 0px 5px 0px 20px;
    padding: 0px;
}

.lang-item-it a::after {
    content: "•";
    font-size: 7px;
    position: absolute;
    top: 46%;
    right: -14px;
    transform: translateY(-50%);
    opacity: 0.5;
}

.lang-item.current-lang a::after {
    opacity: 0.5;
}


.lang-item-en a {
    padding: 0px;
}


.img-scale {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.parallax,
.parallax-small,
.parallax-mid,
.parallax-grid,
.img-scale {
  will-change: transform;
}

body.error404 .menu-indicator {
    display: none;
}

body.postid-90 .main-title {
    font-size: clamp(2.75rem, 1rem + 10vw, 14.63rem);
}

/* ==========================================================================
   RESPONSIVE - TABLETS (min-width: 40em / 640px)
   Mobile-first: regole che si applicano da 640px in su
   ========================================================================== */

@media screen and (min-width: 40em) {

    .logo {
        width: 100px;
    }

    .p3 {
        padding: 2rem !important;
    }

    .px3 {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    .pl3 {
        padding-left: 2rem !important;
    }

    .pr3 {
        padding-right: 2rem !important;
    }

    .w-reduce {
        /* margin: 0rem 1.5rem; */
    }

    /* Layout */
    /* .w-reduce {
        width: 96%;
    } */

    .map-svg {
        scale: 2;
        translate: -226px;
    }

    /* Hero */
    .hero-image {
        height: 1080px;
    }

    .hero-span-2 {
        padding-left: 0rem;
    }
    
    .hero-logo {
        order: 1;
    }  

    /* Epigrafe */
    .epigrafe {
        height: 800px;
    }
    
    .epigrafe > h3 {
        min-width: 67vw;
    }

    .collection-card-image-container {
        max-height: 450px;
        width: 100%;
    }

    .collection-card-container {
        /* gap: 20px; */
        row-gap: 20px;
    }

    /* Brands */
    /* .brand-logo-container {
        width: 200px;
    } */

    .loyalties {
        flex-direction: row;
    }


    .loyalties .content {
        order: 0;
        height: fit-content;
        position: sticky;
        top: 100px;
    }

    /* Footer */
    .copyright {
        text-align: right;
    }

    .info-line-image-container {
        width: 100%;
        height: 200px;
        overflow: hidden;
        transition: all 1s ease-out;
        margin-bottom: 10px;
        margin-right: 0px;
    }


    /* form */
    .input-form-row {
        margin-bottom: 0px;
    }

    .input-form-row p {
        display: flex;
        flex-wrap: wrap;
        gap: 0px;
    }

    .wpcf7-form-control {
        margin-bottom: 3rem;
    }


    /* .hero-first-span {
        margin-left: -10px;
    } */

    .info-line-title {
        font-size: 30px;
    }  

    .coll-name {
        margin-left: 0rem;
        margin-bottom: 3rem;
    }

    .num {
        font-size: 120px;
    }

    .wpcf7-not-valid-tip {
        margin-top: 0px !important;
    }

    .subtitle-epigrafe {
        max-width: 540px;
        font-size: clamp(1.5625rem, 0.8799rem + 2.9126vw, 4.375rem);
        line-height: 1.15;
    }

    .subtitle-max {
        font-size: clamp(3.75rem, 2.8398rem + 3.8835vw, 7.5rem);
    }

    .location-card {
        flex-direction: row;
    }

    .location-card div:nth-child(2) {
        margin-bottom: 0px;
    }

    .immagine-prodotto img {
        width: 70%;
    }

    .location-card .pin img {
        width: 30px !important;
    }

    .location-card .pin {
        width: 70px;
    }

}

/* ==========================================================================
   RESPONSIVE - TABLETS LARGE (min-width: 52em / 832px)
   ========================================================================== */

@media screen and (min-width: 52em) {
    .lead-max {
    font-size: 2.8rem;
}

    .low-footer-links a:last-child {
        margin-right: 0 !important;
    }

    .w-reduce {
        /* margin: 0rem 2rem; */
    }

    body.page-template-tailor-made .hero-image-file {
        object-fit: cover;
    }

    .subtitle-epigrafe {
        max-width: 1330px;
    }

    body.single-collezione .hero-logo img {
        width: 100% !important;
    }

    .scopri {
        display: flex;
    }

    .hero-first-span {
        margin-left: -5px;
    }

    .info-line-title {
        font-size: 30px;
    }   

    /* .cursor, .cursor-dot  {
        display: flex !important;
    } */

    /* .collection-card, 
    .mega-menu-card {
        width: 49%;
    } */

    .hero-paragraph {
        order: 0;
        padding-right: 1rem;
        min-width: 280px;
    }

    .hero-logo {
        order: 1;
        max-width: 180px;
    }         

    body.single-loyaltie .hero-logo {
        padding: 2rem;
    }

    .hero-span-2 {
        padding-left: 2rem;
    }

    body.single-loyaltie .hero-span-2 {
        padding-left: 0px;
    }

    body.page-id-14 .hero-span-2 {
        padding-left: 6rem;
    }

    body.page-id-107 .hero-span-2 {
        padding-left: 6rem;
    }

    body.page-id-110 .hero-span-2 {
        padding-left: 6rem;
    }


    /* Info Line */
    .info-line {
        flex-direction: column;
        justify-content: space-between;
        align-items: start;
        margin-bottom: 0;
    }

    .info-line-description {
        min-width: 100%;
        max-width: 500px;
        margin-top: 0;
    }

    .info-line-image-container {
        width: 100%;
        height: 200px;
        overflow: hidden;
        transition: all 1s ease-out;
        margin-bottom: 10px;
        margin-right: 0px;
    }

    /* .info-line:hover .info-line-image-container {
        width: 400px;
        margin-right: 30px;
        transition: var(--transition-infoline)
    } */

    /* .info-line-image {
        object-position: right center;
        transform: scale(1.8);
        transition: var(--transition-infoline)
    } */

    /* .info-line:hover .info-line-image-container .info-line-image {
        object-position: center center;
        transform: scale(1.7);
        transition: var(--transition-infoline)
    } */

    /* Cards */
    .collection-card {
        width: 48%;
        padding-right: 10px;
        margin-bottom: 20px;
    }

    .collection-card .scopri,
    .mega-menu-card-container .scopri,
    .card-loyalty .scopri {
        opacity: 0;
    }

    .collection-card.expand-card {
        /* flex: 0 0 20%; */
        flex-basis: 20%;
        transition: flex 0.4s ease;
    }

    .collection-card:hover .collection-image {
        transform: scale(1.1) !important;
    }

    .collection-card.expand-card.expand {
        /* flex: 0.6 0 23%; */
    }

    .collection-card.expand-card.expand .scopri,
    .mega-menu-card-container:hover .scopri,
    .card-loyalty:hover .scopri {
        opacity: 0.6;
    }

    .collection-card.expand-card.shrink {
        /* flex: 0 1 19%; */
    }

    /* .mega-menu-card.expand-card {
        flex: 0 0 calc(20%);
    }

    .mega-menu-card.expand-card.expand {
        flex: 1 0 calc(20%);
    }

    .mega-menu-card.expand-card.shrink {
        flex: 0 1 calc(16%);
    } */

    /* form */
    .input-form-row {
        margin-bottom: 0px;
    }


    .invio-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 50px;
    }

    .form-privacy {
        margin-top: -23px ;
    }

    .game-mode-container {
        transform: translate(7px,48px) !important
    }

    .team-image {
        height: auto;
    }

    .card-loyalty:first-child {
        padding-left: 0px;
    }


    .prodotti-list {
        line-height: 100px;
    }

    .coll-name {
        margin-left: 4rem;
        line-height: 90px;
        margin-bottom: 0rem;
    }

    .wpcf7-form-control {
        margin-bottom: 10px;
    }

    .map-svg {
        scale: 1;
        translate: -0px;
    }

    .svg-container {
        height: 880px;
    }

    body.page-template-index .swiper-slide,
    body.single-collezione .swiper-slide {
        height: 490px !important;
        transition: all 0.5s ease;
    }


    .kiwa-card {
        padding: 4rem !important;
    }

    .kiwa-card img {
        width: 230px;
    }
    
    .hover-ready.collection-card.dimmed,
    .hover-ready.card-loyalty.dimmed,
    .hover-ready.mega-menu-card-container.dimmed  {
    opacity: 0.4 !important;
    transition: opacity 0.6s ease !important
    }

    .cursor {
        width: 30px;
        height: 30px;
        border: 2px solid #1774ad;
        border-radius: 50%;
        transition: all 0.3s ease-out;
        transform: translate(-50%, -50%);
        z-index: 1003;
        display: block;
    }

    .cursor-dot,
    .cursor-arrow {
        display: block;
    }
    
}

/* ==========================================================================
   RESPONSIVE - DESKTOP (min-width: 64em / 1024px)
   ========================================================================== */

@media screen and (min-width: 64em) {
    .info-line-description {
        min-width: 500px;
    }

    .collection-title {
        margin-bottom: 3rem;
    }

    

    /* .main-title {
        font-size: calc(200px + 2vw);
        line-height: 100%;
    } */

    /* .hero-paragraph {
        order: 0;
        width: 290px;
        padding-right: 4rem;
    } */

    /* Navigation */
    .main-nav {
        display: none;
    }

    .hero-logo {
        order: 0;
        min-width: 250px;
    }

    .hero-span-2 {
        padding-left: 4rem;
        margin-bottom: 0rem;
    }

    /* .hero-paragraph-about {
        order: 0;
        width: 310px;
    }

    .hero-paragraph-tailor {
        order: 0;
        width: 320px;
    }

    .hero-paragraph-quality {
        order: 0;
        width: 320px;
    } */

    .hero-first-span {
        margin-left: -12px;
        line-height: 90%;
    }

    .toggle-off-canvas {
        display: block;
    }

    .input-form-row p {
        gap: 20px;
    }

    /* Info Line */
    .info-line {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0;
    }

    .info-line-image-container {
        width: 0px;
        height: 200px;
        margin-bottom: 0;
        transition: var(--transition-infoline)
    }
    
    .info-line-title {
        font-size: 50px;
    }   

    .game-mode-container {
        transform: translate(5px,44px) !important;
    }

    li.current-menu-item a:after {
        display: none;
    }

    li.current-menu-item a {
        color: var(--dark-color);
    }

    body.page-id-14 .hero-span-2 {
        padding-left: 7rem;
    }

    .coll-name {
        margin-left: 4rem;
        line-height: 100px;
    }

    body.single-loyaltie .hero-span-2 {
        padding-left: 30px;
    }

    .lang-item {
        display: flex;
        align-items: center;
    }


    body.single-loyaltie h1 > .main-title {
        margin-bottom: 2rem;
    }

    .lang-item-it a::after {
        right: 2px;
    }

}

@media screen and (min-width: 77em) {
    /* Navigation */
    .main-nav {
        display: block;
    }

    .toggle-off-canvas {
        display: none;
    }

    .hero-logo {
        min-width: 310px;
    }

    .coll-name {
        margin-left: 4rem;
        line-height: 170px;
    }

    body.single-loyaltie .hero-span-2 {
        padding-left: 30px;
    }

    .lang-item-it {
        margin-top: 0px;
    }

    .lang-item-it + .lang-item-en::before {
        display: none !important;
    }
}


@media screen and (max-height: 800px ) {
    .mega-menu-inner {
        max-height: 80vh;
    }

    .mega-menu-card-image-container {
        aspect-ratio: 3/2;
    }

    .mega-collection.open {
        transform: translateY(-13%);
    }
}