/* ═══════════════════════════════════════════════════════════
   VAAZHA — homepage-redesign.css v3.12
   Hero polish, collection tiles hover reveal, brand story, IG grid,
   newsletter CTA band.
═══════════════════════════════════════════════════════════ */

/* ── Hero polish ─────────────────────────────────────────── */
.vzh-hero { position: relative; }
.vzh-slide { transition: opacity 0.7s ease; }
.vzh-slide.active .vzh-slide-bg {
  animation: vzh-ken-burns 12s ease-out forwards;
}
@keyframes vzh-ken-burns {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.12) translate(-1%, -1%); }
}
.vzh-slider-dots {
  display: inline-flex;
  gap: 10px;
  padding: 6px 12px;
  background: rgba(13,26,15,0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
}
.vzh-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: all 0.25s ease;
}
.vzh-dot.active {
  background: var(--clr-lime, #c8f55a);
  width: 24px;
  border-radius: 999px;
}
.vzh-slider-prev,
.vzh-slider-next {
  background: rgba(13,26,15,0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
}
.vzh-slider-prev:hover,
.vzh-slider-next:hover {
  background: var(--clr-lime, #c8f55a);
  color: var(--clr-forest, #0d1a0f);
  transform: translateY(-50%) scale(1.06);
}

/* ── Collection tiles hover reveal ──────────────────────── */
.vzh-collection-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.vzh-collection-card img {
  transition: transform 0.6s ease, filter 0.35s ease;
}
.vzh-collection-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.15); }
.vzh-collection-card:hover img { transform: scale(1.08); filter: brightness(0.85); }
.vzh-collection-info {
  transition: transform 0.35s ease;
}
.vzh-collection-cta {
  display: inline-block;
  padding: 8px 16px;
  background: var(--clr-lime, #c8f55a);
  color: var(--clr-forest, #0d1a0f);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.35s ease;
}
.vzh-collection-card:hover .vzh-collection-cta { opacity: 1; transform: translateY(0); }

/* Three-column tile grid (Oversized / Raglan / Acid Wash) */
.vzh-collections-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) {
  .vzh-collections-grid { grid-template-columns: 1fr; }
}

/* ── New Drops carousel ──────────────────────────────────── */
.vzh-carousel {
  position: relative;
  margin-top: 32px;
}
.vzh-carousel-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 4px 20px;
  scrollbar-width: none;
}
.vzh-carousel-track::-webkit-scrollbar { display: none; }
.vzh-carousel-track > * {
  flex: 0 0 calc(25% - 15px);
  scroll-snap-align: start;
  min-width: 260px;
}
@media (max-width: 900px) {
  .vzh-carousel-track > * { flex: 0 0 calc(50% - 10px); min-width: 220px; }
}
@media (max-width: 560px) {
  .vzh-carousel-track > * { flex: 0 0 78%; }
}
.vzh-carousel-nav {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #ece7dc;
  color: var(--clr-forest, #0d1a0f);
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 6px 20px rgba(13,26,15,0.08);
}
.vzh-carousel-nav:hover {
  background: var(--clr-forest, #0d1a0f);
  color: var(--clr-lime, #c8f55a);
  border-color: var(--clr-forest, #0d1a0f);
}
.vzh-carousel-nav.prev { left: -18px; }
.vzh-carousel-nav.next { right: -18px; }
@media (max-width: 900px) { .vzh-carousel-nav { display: none; } }

/* ── Instagram grid ─────────────────────────────────────── */
.vzh-instagram-section {
  padding: 80px 0 60px;
  background: #fff;
}
.vzh-ig-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-top: 32px;
}
@media (max-width: 900px) { .vzh-ig-grid { grid-template-columns: repeat(3, 1fr); } }
.vzh-ig-tile {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 6px;
  position: relative;
  background: #faf8f3;
  cursor: pointer;
  display: block;
}
.vzh-ig-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.3s ease;
}
.vzh-ig-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(13,26,15,0.55) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8f55a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='2' width='20' height='20' rx='5' ry='5'/><path d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/><line x1='17.5' y1='6.5' x2='17.51' y2='6.5'/></svg>") center/24px no-repeat;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.vzh-ig-tile:hover img { transform: scale(1.08); }
.vzh-ig-tile:hover::after { opacity: 1; }
.vzh-ig-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(13,26,15,0.15);
  background: linear-gradient(135deg, #faf8f3, #ece7dc);
}
.vzh-ig-cta { text-align: center; margin-top: 22px; }
.vzh-ig-cta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: transparent;
  border: 1.5px solid var(--clr-forest, #0d1a0f);
  color: var(--clr-forest, #0d1a0f);
  border-radius: 999px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.2s ease;
}
.vzh-ig-cta a:hover { background: var(--clr-forest, #0d1a0f); color: var(--clr-lime, #c8f55a); }

/* ── Newsletter CTA band (before footer) ─────────────────── */
.vzh-newsletter-band {
  background: linear-gradient(135deg, #0d1a0f 0%, #1a4a1f 100%);
  padding: 60px 24px;
  position: relative;
  overflow: hidden;
}
.vzh-newsletter-band::before,
.vzh-newsletter-band::after {
  content: '';
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,245,90,0.15), transparent 70%);
  pointer-events: none;
}
.vzh-newsletter-band::before { left: -60px; top: -60px; }
.vzh-newsletter-band::after { right: -60px; bottom: -60px; }
.vzh-newsletter-band-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.vzh-newsletter-band .vzh-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--clr-lime, #c8f55a);
  margin-bottom: 12px;
}
.vzh-newsletter-band h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 12px;
  line-height: 1.1;
}
.vzh-newsletter-band p {
  color: rgba(255,255,255,0.75);
  font-size: 15px;
  margin: 0 0 24px;
}
.vzh-newsletter-band-form {
  display: flex;
  gap: 8px;
  max-width: 460px;
  margin: 0 auto;
}
.vzh-newsletter-band-form input {
  flex: 1;
  padding: 14px 18px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 14px;
  outline: none;
}
.vzh-newsletter-band-form input::placeholder { color: rgba(255,255,255,0.5); }
.vzh-newsletter-band-form input:focus { border-color: var(--clr-lime, #c8f55a); }
.vzh-newsletter-band-form button {
  padding: 14px 26px;
  background: var(--clr-lime, #c8f55a);
  color: var(--clr-forest, #0d1a0f);
  border: 0;
  border-radius: 999px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.vzh-newsletter-band-form button:hover { transform: translateY(-1px); }
@media (max-width: 560px) {
  .vzh-newsletter-band-form { flex-direction: column; }
}

/* ── Brand story polish ─────────────────────────────────── */
.vzh-brand-story-img { position: relative; }
.vzh-leaf-deco {
  position: absolute;
  right: -30px;
  bottom: -30px;
  opacity: 0.6;
  pointer-events: none;
  animation: vzh-leaf-float 6s ease-in-out infinite;
}
@keyframes vzh-leaf-float {
  0%,100% { transform: translateY(0) rotate(-4deg); }
  50%     { transform: translateY(-10px) rotate(4deg); }
}