/* Verda Living — minimalist luxury custom styles */

html, body { overflow-x: hidden; max-width: 100%; }

.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }

/* ── Mobile hamburger menu ── */
.mob-menu-btn { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; cursor: pointer; }
.mob-menu-btn span { display: block; height: 1.5px; background: #F5F5F5; transition: transform .3s, opacity .3s; }
.mob-menu-btn.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.mob-menu-btn.open span:nth-child(2) { opacity: 0; }
.mob-menu-btn.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

#mob-nav {
  display: flex;
  flex-direction: column;
  background: #1A1A1A;
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 0;
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s ease, padding .35s ease;
}
#mob-nav.open {
  max-height: 400px;
  padding: 8px 0 16px;
}
#mob-nav a, #mob-nav button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 24px;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #F5F5F5;
  border: none;
  background: none;
  cursor: pointer;
}
#mob-nav a:active, #mob-nav button:active { background: rgba(255,255,255,.05); }

/* Desktop: hide mobile elements */
.mob-bar { display: none; }
.mob-menu-btn { display: none; }

@media (max-width: 639px) {
  .mob-bar { display: flex; }
  .mob-menu-btn { display: flex; }
  header nav.desk-nav { display: none !important; }
}

@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.animated-gradient {
  background: linear-gradient(120deg, #F5F5F5, #E8E8E8, #D4D4D4, #F5F5F5);
  background-size: 300% 300%;
  animation: gradient-shift 18s ease infinite;
}

@keyframes float-slow {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-22px) rotate(4deg); }
}
.float-slow { animation: float-slow 9s ease-in-out infinite; }

@keyframes fade-up {
  from { opacity:0; transform: translateY(28px); }
  to   { opacity:1; transform: translateY(0); }
}
.reveal { opacity:0; }
.reveal.in { animation: fade-up .9s ease forwards; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-track { animation: marquee 38s linear infinite; }

/* Floating label */
.float-field { position: relative; }
.float-field input,
.float-field textarea {
  width:100%; background:transparent; border:none;
  border-bottom:1px solid #404040; padding:18px 0 8px; outline:none;
  color:#0A0A0A; font-size:15px;
}
.float-field label {
  position:absolute; left:0; top:18px; color:#808080;
  pointer-events:none; transition: all .25s ease; font-size:15px;
}
.float-field input:focus, .float-field textarea:focus { border-color:#1A1A1A; }
.float-field input:focus + label,
.float-field input:not(:placeholder-shown) + label,
.float-field textarea:focus + label,
.float-field textarea:not(:placeholder-shown) + label {
  top:0; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#1A1A1A;
}

/* FAQ accordion */
.faq-item .faq-body {
  max-height:0; overflow:hidden; transition: max-height .5s ease;
}
.faq-item.open .faq-body { max-height: 400px; }
.faq-item .faq-icon { transition: transform .4s ease; }
.faq-item.open .faq-icon { transform: rotate(45deg); }

/* Nav underline */
.nav-link { position:relative; }
.nav-link::after {
  content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0;
  background:currentColor; transition: width .35s ease;
}
.nav-link:hover::after, .nav-link.active::after { width:100%; }

/* Cart drawer */
.drawer { transform: translateX(100%); transition: transform .45s cubic-bezier(.4,0,.2,1); }
.drawer.open { transform: translateX(0); }

/* Card hover */
.lift { transition: transform .5s ease, box-shadow .5s ease; }
.lift:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 30px 60px -25px rgba(0,0,0,.25); }

/* Parallax */
.parallax-bg { will-change: transform; transition: transform .15s linear; }