/* -------------------------------------------------- */
/* RESET & BASE */
/* -------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  background: #fff;
  color: #777;
  overflow-x: hidden;
}

/* -------------------------------------------------- */
/* HERO FRAME & IMAGE VARIABLES */
/* -------------------------------------------------- */
:root {
  --hero-height: 100vh;
  --hero-padding: 4vw;
  --hero-img-object-position: 50% 100%; /* bottom center */
  --hero-img-translateY: 0vh;
}

.hero-frame {
  width: 100vw;
  height: var(--hero-height);
  padding: var(--hero-padding);
  background: #fff;
  position: relative;
  overflow: hidden;
}

.hero {
  width: 100%;
  height: 100%;
  position: relative;
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-img-object-position);
  transform: translateY(var(--hero-img-translateY));
  margin: 0;
}

/* -------------------------------------------------- */
/* MENU SUPERIORE */
/* -------------------------------------------------- */
.top-menu {
  position: absolute;
  top: 1.5vw;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 20;
}

.top-menu nav {
  display: flex;
  gap: 8vw;
}

.top-menu nav a {
  text-decoration: none;
  color: #777;
  font-size: 1rem;
  letter-spacing: 2px;
  transition: opacity 0.3s, transform 0.3s;
}

.top-menu nav a:hover {
  color: #dda20f;
  transform: scale(1.05);
}

/* -------------------------------------------------- */
/* OVERLAY TEXT */
/* -------------------------------------------------- */
.overlay-text {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  letter-spacing: 1.5px;
}

.overlay-text h1 {
  font-size: 1rem;
  line-height: 1.2;
  margin-bottom: 0.3rem;
}

.overlay-text h2 {
  font-size: 0.6rem;
  line-height: 1.2;
  margin-top: 0;
}



/* -------------------------------------------------- */
/* COLLECTION GALLERY */
/* -------------------------------------------------- */
.collection-gallery {
    width: 92vw;
    max-width: 100%;
    height: calc(100% - 6vw);
    margin-top: 2vw;
    padding-bottom: 2vw;
    background: #fff;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.gallery-track {
    display: flex;
    gap: 1vw;
    width: 100%;
    max-width: 100%;
    height: 100%;
    align-items: stretch;
    overflow-x: hidden;
}

.gallery-item {
    flex: 0 0 auto;
    height: 100%;
    max-width: 100%;
    position: relative;
    overflow: hidden;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-track:active {
    cursor: grabbing !important;
}

.gallery-item:hover img {
    transform: scale(1.03);
}



/* =========================================================
   ROTATE MESSAGE — TUTTI I TABLET E MOBILE
========================================================= */
.rotate-message {
  display: none;
  position: fixed;
  inset: 0;
  background: #fff;
  color: #555;
  font-size: 6vw;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 300 !important;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  z-index: 999999;
}

@media screen and (max-width: 1280px) and (orientation: portrait) {
  .rotate-message {
    display: flex !important;
  }

  body > *:not(.rotate-message) {
    display: none !important;
  }
}

@media screen and (max-width: 1280px) and (orientation: landscape) {
  .rotate-message {
    display: none !important;
  }
}

@media (orientation: landscape) {
  .rotate-message {
    display: none !important;
  }

  body > *:not(.rotate-message) {
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* -------------------------------------------------- */
/* MEDIA QUERY HERO + TOP MENU + GALLERY (CORRETTE) */
/* -------------------------------------------------- */
@media (max-width: 1368px) {
 

  .top-menu nav {
    gap: 7vw;
  }

  .top-menu nav a {
    font-size: 1rem;
    letter-spacing: 2px;
  }
}

/* Tablet / Desktop piccolo 1280px */
@media (max-width: 1280px) {
 

  .top-menu nav {
    margin-top: -0.4vh;
    gap: 7.5vw;
  }

  .top-menu nav a {
    font-size: 0.95rem;
    letter-spacing: 1px;
  }
}



/* Altri breakpoint rimangono uguali come nel tuo CSS originale */



@media (max-width: 915px) {
 

  .top-menu nav {
    gap: 6vw;
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 20;
    top: 0vw; /* modifica questo valore per spostare il menu in alto o in basso */
  }

  .top-menu nav a {
    font-size: 0.9rem;
    letter-spacing: 0.5px;
  }
}

@media (max-width: 844px) {
  .collection-hero,
  .hero-frame {
    top: 1vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .top-menu {
    top: 1vw;
  }

  .top-menu nav {
    gap: 6vw; /* scegli il valore corretto tra 6vw e 4.5vw */
  }

  .top-menu nav a {
    font-size: 0.82rem; /* scegli il valore corretto */
    letter-spacing: 0.4px; /* scegli il valore corretto */
  }
}

/* Desktop piccolo / Tablet medio 812px */
@media (max-width: 812px) {
  .collection-hero,
  .hero-frame {
    top: 1vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .top-menu {
    top: 1vw;
  }

  .top-menu nav {
    gap: 6vw; /* scegli il valore corretto tra 6vw e 4.5vw */
  }

  .top-menu nav a {
    font-size: 0.82rem; /* scegli il valore corretto */
    letter-spacing: 0.4px; /* scegli il valore corretto */
  }
}


/* Tablet piccolo / Mobile grande 768px */
@media (max-width: 768px) {
 

  .top-menu nav {
    gap: 4vw;
  }

  .top-menu nav a {
    font-size: 0.9rem;
    letter-spacing: 0.5px;
  }
}

/* Tablet piccolo / Mobile grande 768px */
@media (max-width: 736px) {
  

  .top-menu nav {
    gap: 4vw;
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 20;
    top: 0vw; /* modifica questo valore per spostare il menu in alto o in basso */
  }

  .top-menu nav a {
    font-size: 0.9rem;
    letter-spacing: 0.5px;
  }
}


/* Mobile medio 667px */
@media (max-width: 667px) {
 

  .top-menu nav {
    gap: 3.5vw;
  }

  .top-menu nav a {
    font-size: 0.85rem;
    letter-spacing: 0.3px;
  }
}

@media (max-width: 568px) {
 

  .top-menu nav {
    gap: 4vw;
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 20;
    top: 0vw; /* modifica questo valore per spostare il menu in alto o in basso */
  }

  .top-menu nav a {
    font-size: 0.7rem;
    letter-spacing: 0.5px;
  }
}

/* Mobile piccolo 480px */
@media (max-width: 480px) {
 

  .top-menu nav {
    gap: 4vw;
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 20;
    top: 0vw; /* modifica questo valore per spostare il menu in alto o in basso */
  }

  .top-menu nav a {
    font-size: 0.6rem;
    letter-spacing: 0.5px;
  }
}