/* ==================== MAISON ACCRA — CLOTHING STYLES ==================== */

html { scroll-behavior: smooth; }
body { font-family: 'Work Sans', sans-serif; background-color: #FBF5EC; color: #1B1410; }
h1, h2, h3, h4, .font-display { font-family: 'Playfair Display', serif; }

::selection { background: #A0522D; color: #FBF5EC; }

/* Woven kente-inspired divider — signature element */
.woven {
  height: 3px;
  background-image: repeating-linear-gradient(90deg, #A0522D 0 8px, #D4A017 8px 16px, transparent 16px 24px);
  background-repeat: repeat-x;
}
.woven-v {
  width: 3px;
  background-image: repeating-linear-gradient(180deg, #A0522D 0 8px, #D4A017 8px 16px, transparent 16px 24px);
}

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Hover lift */
.lift {
  transition: transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .55s ease, border-color .35s ease;
}
.lift:hover {
  transform: translateY(-10px);
  box-shadow: 0 28px 56px -14px rgba(27,20,16,.4);
}

/* Image zoom on hover */
.zoom-wrap { overflow: hidden; position: relative; }
.zoom-wrap img { transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.zoom-wrap:hover img { transform: scale(1.1); }

/* Floating hero images */
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-18px) rotate(1.2deg); }
}
.float-a { animation: floaty 6.5s ease-in-out infinite; }
.float-b { animation: floaty 8s ease-in-out infinite; animation-delay: -2.5s; }

/* Glassmorphism */
.glass {
  background: rgba(251,245,236,0.7);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(160,82,45,0.2);
}
.glass-dark {
  background: rgba(27,20,16,0.6);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(160,82,45,0.18);
}

/* Ripple */
.ripple { position: relative; overflow: hidden; }
.ripple-circle {
  position: absolute;
  border-radius: 9999px;
  transform: scale(0);
  background: rgba(255,252,246,0.45);
  animation: ripple-anim .65s ease-out forwards;
  pointer-events: none;
}
@keyframes ripple-anim { to { transform: scale(3.2); opacity: 0; } }

.badge { font-family: 'Work Sans', sans-serif; letter-spacing: .08em; }

/* No-scrollbar utility */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Accordion */
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .55s cubic-bezier(.2,.8,.2,1);
}

/* Back to top */
#backToTop { transition: opacity .4s ease, transform .4s ease; }

/* Vertical text accent */
.vtext { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .3em; }

/* Quick view overlay on product cards */
.qv {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  transform: translateY(100%);
  transition: transform .4s ease;
}
.lift:hover .qv { transform: translateY(0); }

/* Focus ring */
input:focus, button:focus, a:focus, select:focus {
  outline: 2px solid #A0522D;
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .float-a, .float-b { animation: none; }
  .reveal { transition: none; }
  .zoom-wrap:hover img { transform: none; }
}