* {
  box-sizing: border-box;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
body {
  background-color: #fdfaf5;
  color: #1a1208;
  font-family: "DM Sans", sans-serif;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.025;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: multiply;
}

/* Nav */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  padding: 1rem 2rem;
  transition: background 0.4s;
}
nav.scrolled {
  background: rgba(253, 250, 245, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #e8ddd3;
}
.logo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
}
.logo-img {
  height: 42px;
  width: auto;
  display: block;
}
.logo-text {
  font-family: "Cormorant Garamond", serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1a1208;
  white-space: nowrap;
}
.lang-btn {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5rem 0.7rem;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid #c8beb4;
  color: #7a6e64;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s;
  font-family: "DM Sans", sans-serif;
}
.lang-btn.active {
  background: #1a1208;
  color: #fdfaf5;
  border-color: #1a1208;
}

/* Announce */
.announce-bar {
  background: #1a1208;
  color: #fdfaf5;
  text-align: center;
  padding: 0.55rem 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}
.announce-bar a {
  color: #4bbfa0;
  text-decoration: none;
  font-weight: 600;
}

/* Filter tabs */
.filter-tab {
  font-family: "DM Sans", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.45rem 1.3rem;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid #c8beb4;
  color: #7a6e64;
  background: transparent;
  cursor: pointer;
  transition: all 0.25s;
}
.filter-tab.active {
  background: #1a1208;
  color: #fdfaf5;
  border-color: #1a1208;
}
.filter-tab:hover:not(.active) {
  border-color: #4bbfa0;
  color: #1a1208;
}
.filter-mat {
  font-family: "DM Sans", sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 1rem;
  border-radius: 999px;
  border: 1px solid #e0d9d1;
  color: #9a9089;
  background: transparent;
  cursor: pointer;
  transition: all 0.25s;
}
.filter-mat.active {
  background: #4bbfa0;
  color: #fff;
  border-color: #4bbfa0;
}
.filter-mat:hover:not(.active) {
  border-color: #4bbfa0;
  color: #4bbfa0;
}

/* Product card */
.product-card {
  background: #fff;
  border: 1px solid #ede6dc;
  border-radius: 1rem;
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  cursor: pointer;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 50px rgba(26, 18, 8, 0.09);
}
.product-card .img-wrap {
  overflow: hidden;
  position: relative;
}
.product-card img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.5s ease;
  display: block;
}
.product-card:hover img {
  transform: scale(1.04);
}

/* Badges */
.badge {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.badge-lungo {
  background: rgba(75, 191, 160, 0.15);
  color: #3aa08a;
}
.badge-corto {
  background: rgba(232, 103, 58, 0.15);
  color: #c8562a;
}
.badge-kaftan {
  background: rgba(139, 115, 70, 0.15);
  color: #8b7346;
}
.badge-set {
  background: rgba(75, 120, 160, 0.15);
  color: #3a6b8c;
}
.badge-accessori {
  background: rgba(160, 130, 100, 0.15);
  color: #7a6e64;
}

/* Size selector */
.size-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #c8beb4;
  font-size: 0.6rem;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: #7a6e64;
  transition: all 0.2s;
  font-family: "DM Sans", sans-serif;
}
.size-btn:hover,
.size-btn.selected {
  background: #1a1208;
  color: #fff;
  border-color: #1a1208;
}

/* Buttons */
.btn-primary {
  background: #1a1208;
  color: #fdfaf5;
  padding: 0.8rem 1.8rem;
  border-radius: 0.5rem;
  font-weight: 500;
  font-family: "DM Sans", sans-serif;
  font-size: 0.85rem;
  cursor: pointer;
  border: none;
  transition:
    background 0.2s,
    transform 0.15s;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
}
.btn-primary:hover {
  background: #3aa08a;
  transform: translateY(-1px);
}
.btn-wa {
  background: transparent;
  color: #25d366;
  padding: 0.7rem 1.4rem;
  border-radius: 0.5rem;
  font-weight: 500;
  font-family: "DM Sans", sans-serif;
  font-size: 0.82rem;
  cursor: pointer;
  border: 1.5px solid #25d366;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
}
.btn-wa:hover {
  background: #25d366;
  color: #fff;
}
.btn-preorder {
  background: #1a1208;
  color: #fdfaf5;
  padding: 0.7rem 1.2rem;
  border-radius: 0.5rem;
  font-weight: 500;
  font-family: "DM Sans", sans-serif;
  font-size: 0.8rem;
  cursor: pointer;
  border: none;
  transition:
    background 0.2s,
    transform 0.15s;
  width: 100%;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.btn-preorder:hover {
  background: #4bbfa0;
  transform: translateY(-1px);
}
.btn-notify {
  background: transparent;
  color: #7a6e64;
  padding: 0.65rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  cursor: pointer;
  border: 1px solid #d5cfc7;
  width: 100%;
  transition: all 0.2s;
  font-family: "DM Sans", sans-serif;
}
.btn-notify:hover {
  border-color: #4bbfa0;
  color: #1a1208;
}
.btn-nl {
  background: #4bbfa0;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 0.85rem;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  font-family: "DM Sans";
  letter-spacing: 0.02em;
}
.btn-nl:hover {
  background: #3aa08a;
}

/* Newsletter input */
.nl-input {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 1rem; /* 16px — prevent iOS zoom on focus */
  color: #fdfaf5;
  font-family: "DM Sans", sans-serif;
  outline: none;
  width: 100%;
}
.nl-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.nl-input:focus {
  border-color: #4bbfa0;
}

/* Trust bar */
.trust-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding: 0.75rem 1.5rem;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  scroll-snap-align: start;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: #5a5248;
}

/* Lookbook carousel */
.lookbook-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 1.5rem;
}
.lookbook-track::-webkit-scrollbar {
  display: none;
}
.lookbook-slide {
  flex: 0 0 280px;
  scroll-snap-align: start;
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
}
@media (max-width: 767px) {
  .lookbook-slide {
    flex: 0 0 220px;
  }
}
.lookbook-slide img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.5s ease;
  display: block;
}
.lookbook-slide:hover img {
  transform: scale(1.04);
}
.lookbook-slide .slide-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem 1rem 0.8rem;
  background: linear-gradient(transparent, rgba(26, 18, 8, 0.6));
  color: #fdfaf5;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.1rem;
  font-weight: 600;
}
.lookbook-slide .slide-price {
  font-family: "DM Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.8;
}
.carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
.carousel-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #c8beb4;
  background: transparent;
  color: #1a1208;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.carousel-btn:hover {
  background: #1a1208;
  color: #fdfaf5;
  border-color: #1a1208;
}
.carousel-dots {
  display: flex;
  gap: 6px;
}
.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d5cfc7;
  transition: all 0.3s;
}
.carousel-dot.active {
  background: #1a1208;
  width: 24px;
  border-radius: 4px;
}

/* FAQ */
.faq-item {
  border-bottom: 1px solid #ede6dc;
  padding: 0.9rem 0;
}
.faq-q {
  font-weight: 500;
  font-size: 0.82rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #1a1208;
}
.faq-q::after {
  content: "+";
  font-size: 1.1rem;
  color: #7a6e64;
  transition: transform 0.2s;
}
.faq-item.open .faq-q::after {
  transform: rotate(45deg);
}
.faq-a {
  font-size: 0.78rem;
  color: #7a6e64;
  margin-top: 0.5rem;
  line-height: 1.6;
  display: none;
}
.faq-item.open .faq-a {
  display: block;
}

/* Floating WA */
.floating-wa {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
  display: none;
  align-items: center;
  gap: 8px;
  background: #25d366;
  color: #fff;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s;
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
}
.floating-wa:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.2);
}
@media (max-width: 767px) {
  .floating-wa {
    padding: 14px;
    border-radius: 50%;
  }
  .floating-wa .wa-label {
    display: none;
  }
}

/* Back to top */
.back-to-top {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 100;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1a1208;
  color: #fdfaf5;
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transition:
    transform 0.2s,
    opacity 0.3s;
  opacity: 0;
}
.back-to-top.visible {
  display: flex;
  opacity: 1;
}
.back-to-top:hover {
  transform: translateY(-2px);
  background: #3aa08a;
}

/* Modal */
.product-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 18, 8, 0.5);
  backdrop-filter: blur(6px);
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.product-modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.product-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  z-index: 501;
  background: #fff;
  border-radius: 1.25rem;
  overflow: hidden;
  max-width: 880px;
  width: 92%;
  max-height: 90vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  opacity: 0;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-modal.open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
@media (max-width: 767px) {
  .product-modal {
    grid-template-columns: 1fr;
    max-height: 92vh;
  }
}
.modal-img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
}
.modal-body {
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(253, 250, 245, 0.9);
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  color: #1a1208;
}
.modal-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 0.4rem 0;
  border-bottom: 1px solid #f0e8dc;
  font-size: 0.75rem;
}
.modal-detail-label {
  color: #7a6e64;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.65rem;
}
.modal-detail-value {
  color: #1a1208;
  font-weight: 500;
  text-align: right;
  font-size: 0.75rem;
}

/* Toast */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  background: #1a1208;
  color: #fdfaf5;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
  z-index: 600;
  opacity: 0;
  transition: all 0.3s;
  pointer-events: none;
}
.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Exit popup */
.exit-popup-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 18, 8, 0.55);
  backdrop-filter: blur(6px);
  z-index: 400;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.exit-popup-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.exit-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  z-index: 401;
  background: #fdfaf5;
  border-radius: 1.25rem;
  padding: 2.5rem 2rem;
  max-width: 420px;
  width: 90%;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.exit-popup.open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.exit-popup-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #7a6e64;
}

/* Reveal — GSAP imposta stato iniziale via JS */
/* Accessibilità — Focus visible */
:focus-visible {
  outline: 2px solid #c9a96e;
  outline-offset: 3px;
  border-radius: 4px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr-only:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 9999;
  width: auto;
  height: auto;
  padding: 12px 24px;
  margin: 0;
  overflow: visible;
  clip: auto;
  background: #1a1208;
  color: #fdfaf5;
  font-size: 14px;
  border-radius: 8px;
  text-decoration: none;
}
/* Reduced motion — disabilita tutte le animazioni */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Nav link underline animata */
nav a[href^="#"]::after {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  background: #c9a96e;
  transition: width 0.3s ease;
}
nav a[href^="#"]:hover::after {
  width: 100%;
}
/* FAQ smooth height */
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.4s ease,
    margin 0.3s ease;
  display: block !important;
  margin-top: 0;
}
.faq-item.open .faq-a {
  max-height: 200px;
  margin-top: 0.5rem;
}
/* Content visibility rimosso — causava spazi vuoti durante lo scroll */

/* ═══ SCROLL PROGRESS BAR ═══ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #c9a96e;
  transform-origin: left;
  z-index: 9998;
  animation: grow-bar linear;
  animation-timeline: scroll(root);
}
@keyframes grow-bar {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* Custom cursor rimosso — rallentava l'esperienza */

/* ═══ GRAIN OVERLAY ANIMATO ═══ */
body::before {
  content: "";
  position: fixed;
  inset: -200%;
  z-index: 9997;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  animation: grain 0.5s steps(6) infinite;
}
@keyframes grain {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-5%, -10%);
  }
  40% {
    transform: translate(-15%, 5%);
  }
  60% {
    transform: translate(7%, -15%);
  }
  80% {
    transform: translate(-10%, 12%);
  }
  100% {
    transform: translate(3%, -7%);
  }
}

/* ═══ NAV GLASS EFFECT UPGRADE ═══ */
nav.scrolled {
  background: rgba(253, 250, 245, 0.88);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid rgba(201, 169, 110, 0.15);
}

/* ═══ SFONDI RADICALI — MARE, SABBIA, SOLE, ESTATE ═══ */

/* Hero — cielo al tramonto: dall'azzurro chiaro al sabbia dorato */
body > section:first-of-type {
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(135, 206, 235, 0.25) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 10% 90%,
      rgba(232, 167, 98, 0.2) 0%,
      transparent 40%
    ),
    linear-gradient(170deg, #e8f4f8 0%, #f5ede0 40%, #fdfaf5 70%);
}

/* Trust bar — sabbia bagnata dalla risacca */
.bg-sand-deep {
  background: linear-gradient(
    180deg,
    #ddd2be 0%,
    #e5d9c5 50%,
    #ddd2be 100%
  ) !important;
}

/* Storia — sabbia dorata calda con sole che batte */
#storia {
  background:
    radial-gradient(
      circle at 80% 5%,
      rgba(255, 200, 100, 0.35) 0%,
      transparent 35%
    ),
    radial-gradient(
      circle at 10% 70%,
      rgba(75, 191, 160, 0.15) 0%,
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #f5ede0 0%,
      #f0e4d0 30%,
      #ebd9be 60%,
      #f0e4d0 80%,
      #f5ede0 100%
    );
}

/* Sole decorativo nella storia — cerchio dorato visibile */
#storia::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 200, 100, 0.3) 0%,
    rgba(255, 180, 80, 0.15) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* Collezione — mare calmo: gradiente da sabbia a acqua */
#collection {
  background:
    radial-gradient(
      ellipse at 50% 120%,
      rgba(75, 191, 160, 0.2) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 0% 0%,
      rgba(135, 206, 235, 0.15) 0%,
      transparent 40%
    ),
    linear-gradient(
      180deg,
      #f5ede0 0%,
      #ede8df 25%,
      #e5ebe8 50%,
      #dde8e4 75%,
      #e5ebe8 100%
    );
}

/* Come funziona — acqua cristallina, turchese leggero */
#come-funziona {
  background:
    radial-gradient(
      ellipse at 30% 20%,
      rgba(75, 191, 160, 0.18) 0%,
      transparent 40%
    ),
    radial-gradient(
      ellipse at 80% 80%,
      rgba(135, 206, 235, 0.12) 0%,
      transparent 35%
    ),
    linear-gradient(180deg, #e5ebe8 0%, #e8efec 50%, #f0f3f1 100%);
}

/* Lookbook — cielo al pomeriggio */
#lookbook {
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(135, 206, 235, 0.2) 0%,
      transparent 50%
    ),
    linear-gradient(180deg, #f0f3f1 0%, #ebe8e0 50%, #f0e8d8 100%);
}

/* Waitlist — notte sul mare, profondo con riflessi di luna e tramonto */
#waitlist {
  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(232, 103, 58, 0.25) 0%,
      transparent 40%
    ),
    radial-gradient(
      ellipse at 20% 100%,
      rgba(75, 191, 160, 0.15) 0%,
      transparent 35%
    ),
    radial-gradient(
      ellipse at 80% 60%,
      rgba(100, 140, 180, 0.12) 0%,
      transparent 35%
    ),
    linear-gradient(180deg, #1e1810 0%, #15202a 50%, #1a1208 100%) !important;
}

/* B2B — sabbia profonda, calore del tardo pomeriggio */
#b2b {
  background:
    radial-gradient(
      circle at 60% 30%,
      rgba(255, 200, 100, 0.2) 0%,
      transparent 40%
    ),
    linear-gradient(180deg, #e5d9c5 0%, #ddd0b8 50%, #e5d9c5 100%) !important;
}

/* Footer — notte fonda, mare scuro */
footer {
  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(75, 191, 160, 0.08) 0%,
      transparent 50%
    ),
    #0f0b06;
}

/* ═══ HERO — ANGOLI DECORATIVI ═══ */
.hero-frame-tl,
.hero-frame-br {
  position: absolute;
  width: 48px;
  height: 48px;
  z-index: 3;
  pointer-events: none;
}
.hero-frame-tl {
  top: 12px;
  left: 12px;
  border-top: 1.5px solid rgba(201, 169, 110, 0.5);
  border-left: 1.5px solid rgba(201, 169, 110, 0.5);
}
.hero-frame-br {
  bottom: 12px;
  right: 12px;
  border-bottom: 1.5px solid rgba(201, 169, 110, 0.5);
  border-right: 1.5px solid rgba(201, 169, 110, 0.5);
}

/* ═══ PRODUCT CARD PREMIUM HOVER ═══ */
.product-card {
  border: 1px solid rgba(201, 169, 110, 0.12);
  transition:
    transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(26, 18, 8, 0.12);
  border-color: rgba(201, 169, 110, 0.3);
}
.product-card .img-wrap {
  position: relative;
  overflow: hidden;
}
.product-card .img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(to top, rgba(26, 18, 8, 0.5) 0%, transparent 50%);
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.product-card:hover .img-wrap::after {
  clip-path: inset(0 0 0 0);
}
.product-card .img-wrap .hover-label {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 4;
  font-family: "DM Sans", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fdfaf5;
  opacity: 0;
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
  white-space: nowrap;
}
.product-card:hover .img-wrap .hover-label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ═══ MAGNETIC BUTTON WRAPPER ═══ */
.magnetic-wrap {
  display: inline-block;
  padding: 0;
}

/* ═══ NAV LINK HOVER — UNDERLINE LEFT-TO-RIGHT ═══ */
nav a[href^="#"]::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #c9a96e;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
nav a[href^="#"]:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ═══ VISION SECTION — DECORATIVE BORDERS ═══ */
.vision-decorative {
  position: relative;
}
.vision-decorative::before,
.vision-decorative::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 1px;
  background: linear-gradient(to right, transparent, #c9a96e, transparent);
}
.vision-decorative::before {
  top: 0;
}
.vision-decorative::after {
  bottom: 0;
}

/* ═══ DECORAZIONI MARINE ═══ */

/* Onda SVG separatore tra sezioni */
.wave-divider {
  width: 100%;
  height: 60px;
  overflow: hidden;
  position: relative;
  margin: -1px 0; /* rimuove gap tra sezioni */
}
.wave-divider svg {
  width: 100%;
  height: 100%;
  display: block;
}
.wave-divider.flip {
  transform: scaleY(-1);
}

/* Conchiglia decorativa */
.deco-shell {
  position: absolute;
  pointer-events: none;
  opacity: 0.06;
}
.deco-shell.right {
  right: 3%;
}
.deco-shell.left {
  left: 3%;
}

/* Raggi solari radiali */
.sun-rays {
  position: absolute;
  pointer-events: none;
  opacity: 0.04;
  width: 400px;
  height: 400px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(201, 169, 110, 0.3) 2deg,
    transparent 4deg,
    transparent 15deg,
    rgba(201, 169, 110, 0.3) 17deg,
    transparent 19deg,
    transparent 30deg,
    rgba(201, 169, 110, 0.3) 32deg,
    transparent 34deg,
    transparent 45deg,
    rgba(201, 169, 110, 0.3) 47deg,
    transparent 49deg,
    transparent 60deg,
    rgba(201, 169, 110, 0.3) 62deg,
    transparent 64deg,
    transparent 75deg,
    rgba(201, 169, 110, 0.3) 77deg,
    transparent 79deg,
    transparent 90deg,
    rgba(201, 169, 110, 0.3) 92deg,
    transparent 94deg,
    transparent 105deg,
    rgba(201, 169, 110, 0.3) 107deg,
    transparent 109deg,
    transparent 120deg,
    rgba(201, 169, 110, 0.3) 122deg,
    transparent 124deg,
    transparent 135deg,
    rgba(201, 169, 110, 0.3) 137deg,
    transparent 139deg,
    transparent 150deg,
    rgba(201, 169, 110, 0.3) 152deg,
    transparent 154deg,
    transparent 165deg,
    rgba(201, 169, 110, 0.3) 167deg,
    transparent 169deg,
    transparent 180deg,
    rgba(201, 169, 110, 0.3) 182deg,
    transparent 184deg,
    transparent 195deg,
    rgba(201, 169, 110, 0.3) 197deg,
    transparent 199deg,
    transparent 210deg,
    rgba(201, 169, 110, 0.3) 212deg,
    transparent 214deg,
    transparent 225deg,
    rgba(201, 169, 110, 0.3) 227deg,
    transparent 229deg,
    transparent 240deg,
    rgba(201, 169, 110, 0.3) 242deg,
    transparent 244deg,
    transparent 255deg,
    rgba(201, 169, 110, 0.3) 257deg,
    transparent 259deg,
    transparent 270deg,
    rgba(201, 169, 110, 0.3) 272deg,
    transparent 274deg,
    transparent 285deg,
    rgba(201, 169, 110, 0.3) 287deg,
    transparent 289deg,
    transparent 300deg,
    rgba(201, 169, 110, 0.3) 302deg,
    transparent 304deg,
    transparent 315deg,
    rgba(201, 169, 110, 0.3) 317deg,
    transparent 319deg,
    transparent 330deg,
    rgba(201, 169, 110, 0.3) 332deg,
    transparent 334deg,
    transparent 345deg,
    rgba(201, 169, 110, 0.3) 347deg,
    transparent 349deg,
    transparent 360deg
  );
  border-radius: 50%;
}

/* Granelli di sabbia — puntini decorativi */
.sand-dots {
  position: absolute;
  pointer-events: none;
  opacity: 0.08;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle, #c9a96e 0.5px, transparent 0.5px);
  background-size: 24px 24px;
}

/* Linea d'onda decorativa sottile */
.wave-line {
  display: block;
  margin: 0 auto;
  opacity: 0.2;
}

/* ═══ SEZIONE STORIA FOTO — WARM TREATMENT ═══ */
#storia .overflow-hidden img {
  filter: saturate(0.92) sepia(0.05) contrast(1.02);
  transition:
    filter 0.5s ease,
    transform 0.5s ease;
}
#storia .overflow-hidden:hover img {
  filter: saturate(1) sepia(0) contrast(1.05);
  transform: scale(1.02);
}

/* ═══ PRELOADER ═══ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #fdfaf5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition:
    opacity 0.5s ease,
    visibility 0.5s ease;
}
.preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader-logo {
  height: 60px;
  width: auto;
  animation: preloader-pulse 1.5s ease-in-out infinite;
}
.preloader-line {
  width: 40px;
  height: 1px;
  background: #c9a96e;
  margin-top: 16px;
  animation: preloader-grow 1.5s ease-in-out infinite;
}
@keyframes preloader-pulse {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}
@keyframes preloader-grow {
  0%,
  100% {
    transform: scaleX(0.5);
  }
  50% {
    transform: scaleX(1);
  }
}

/* ═══ SEARCH BAR ═══ */
.search-wrap {
  position: relative;
  max-width: 320px;
  margin: 0 auto 1rem;
}
.search-input {
  width: 100%;
  padding: 0.6rem 1rem 0.6rem 2.5rem;
  border: 1px solid #d5cfc7;
  border-radius: 999px;
  font-size: 0.8rem;
  font-family: "DM Sans", sans-serif;
  background: #fff;
  color: #1a1208;
  outline: none;
  transition: border-color 0.2s;
}
.search-input:focus {
  border-color: #4bbfa0;
}
.search-icon {
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  color: #7a6e64;
  pointer-events: none;
}

/* ═══ CROSS-SELL ═══ */
.cross-sell {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #f0e8dc;
}
.cross-sell-card {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.5rem;
  border-radius: 0.75rem;
  border: 1px solid #ede6dc;
  cursor: pointer;
  transition: border-color 0.2s;
}
.cross-sell-card:hover {
  border-color: #c9a96e;
}
.cross-sell-card img {
  width: 56px;
  height: 56px;
  border-radius: 0.5rem;
  object-fit: cover;
}
.cross-sell-info {
  flex: 1;
}
.cross-sell-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #1a1208;
}
.cross-sell-price {
  font-size: 0.7rem;
  color: #4bbfa0;
  font-weight: 600;
}

/* ═══ INSTAGRAM FEED ═══ */
.ig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
@media (min-width: 768px) {
  .ig-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}
.ig-item {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  aspect-ratio: 1;
}
.ig-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.ig-item:hover img {
  transform: scale(1.06);
}
.ig-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(26, 18, 8, 0.3);
  opacity: 0;
  transition: opacity 0.3s;
}
.ig-item:hover::after {
  opacity: 1;
}
.ig-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s;
}
.ig-item:hover .ig-icon {
  opacity: 1;
}