/*
  Zala Boutique Stylesheet
  This CSS defines the look and feel of the Zala Boutique website. The design
  emphasises a luxurious, high‑end aesthetic with an image‑driven approach
  throughout the homepage. Sections use alternating neutral backgrounds and
  frosted‑glass cards for subtle depth. The layout is responsive and adapts
  gracefully to smaller screens with a slide‑out hamburger menu. Hover states
  and scroll animations provide gentle interactivity without compromising
  sophistication. All buttons feature strong colour contrast on hover for
  accessibility.
*/

/* Root variables for colours and fonts */
:root {
  --colour-bg: #f7f3e9;               /* primary beige background */
  --colour-bg-alt: #f4eadc;           /* secondary light beige for alternating sections */
  --colour-accent: #6a3c6d;           /* deep purple accent */
  --colour-accent-dark: #432056;      /* darker purple for hover states */
  --colour-text: #2e2c2b;             /* dark brownish grey for primary text */
  --colour-text-light: #ffffff;       /* white for light text */
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Helvetica Neue', Arial, sans-serif;
}

/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  color: var(--colour-text);
  background-color: var(--colour-bg);
  line-height: 1.6;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--colour-accent);
  font-weight: 700;
}

p {
  font-size: 1rem;
  margin-bottom: 1rem;
}

a {
  color: var(--colour-accent);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--colour-accent-dark);
}

/* Utility classes */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: var(--colour-accent);
  color: var(--colour-text-light);
  border: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.btn.small {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}
.btn:hover {
  background-color: var(--colour-accent-dark);
  color: var(--colour-text-light);
}

/* Header and navigation */
header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--colour-bg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  z-index: 1000;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

.logo {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  color: var(--colour-accent);
  font-weight: 700;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 2rem;
}

nav ul li a {
  font-size: 1rem;
  color: var(--colour-text);
  position: relative;
  padding-bottom: 0.25rem;
}

nav ul li a:hover {
  color: var(--colour-accent);
}

/* Hamburger menu */
.menu-toggle {
  display: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
}
.menu-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--colour-accent);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Transform bars into a cross when nav is open */
header.nav-open .menu-toggle span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
header.nav-open .menu-toggle span:nth-child(2) {
  opacity: 0;
}
header.nav-open .menu-toggle span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Hero section */
.hero {
  margin-top: 80px; /* offset header height */
}

.carousel {
  position: relative;
  overflow: hidden;
  height: 75vh;
}
.carousel .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 1s ease, transform 1s ease;
}
.carousel .slide.active {
  opacity: 1;
  transform: translateX(0);
}

.slide-content h2 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}
.slide-content p {
  max-width: 600px;
  margin: 0 auto 1.5rem;
  font-size: 1rem;
  color: var(--colour-text);
}

/* Collections / Featured categories */
.collections {
  padding: 4rem 0;
  background-color: var(--colour-bg);
}
.collections h2 {
  text-align: center;
  margin-bottom: 2rem;
}
.featured-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 1.5rem;
}
.category-card {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.category-card .card-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: brightness(0.85);
}
.category-card .card-overlay {
  position: relative;
  padding: 2rem;
  background-color: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px);
}
.category-card h3 {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  color: var(--colour-accent);
}
.category-card p {
  font-size: 0.9rem;
  margin-bottom: 1rem;
  color: var(--colour-text);
}

/* Product carousel */
.product-carousel {
  padding: 4rem 0;
  background-color: var(--colour-bg-alt);
}
.product-carousel h2 {
  text-align: center;
  margin-bottom: 2rem;
}
.carousel-wrapper {
  position: relative;
}
.carousel-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 2rem;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar {
  display: none;
}
.product-card {
  flex: 0 0 auto;
  width: 280px;
  padding: 1.5rem;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  scroll-snap-align: start;
}
.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
}
.product-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  margin-bottom: 1rem;
}
.product-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.4rem;
  color: var(--colour-accent);
}
.product-card p {
  font-size: 0.85rem;
  margin-bottom: 0.6rem;
  color: var(--colour-text);
}
.shop-link {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--colour-accent);
  text-decoration: none;
}
.shop-link:hover {
  text-decoration: underline;
  color: var(--colour-accent-dark);
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(92, 34, 108, 0.75);
  color: #fff;
  border: none;
  padding: 0.75rem;
  cursor: pointer;
  font-size: 1.5rem;
  z-index: 10;
  transition: background-color 0.3s ease;
}
.carousel-btn:hover {
  background-color: rgba(67, 32, 86, 0.85);
}
.carousel-btn.prev {
  left: 0.5rem;
}
.carousel-btn.next {
  right: 0.5rem;
}

/* Testimonials section */
.testimonials {
  padding: 4rem 0;
  background-color: var(--colour-bg);
}
.testimonials h2 {
  text-align: center;
  margin-bottom: 2rem;
}
.testimonial-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}
.testimonial-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2rem;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}
.testimonial-item:hover {
  transform: translateY(-5px);
}
.testimonial-item q {
  font-style: italic;
  font-size: 0.95rem;
  color: var(--colour-text);
}
.testimonial-item .author {
  margin-top: 1rem;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--colour-accent);
  align-self: flex-end;
}

/* Perks / Why Shop With Us */
.perks {
  padding: 4rem 0;
  background-color: var(--colour-bg-alt);
}
.perks h2 {
  text-align: center;
  margin-bottom: 2rem;
}
.perks-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}
.perk {
  text-align: center;
  padding: 2rem;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}
.perk:hover {
  transform: translateY(-5px);
}
.perk-icon {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  color: var(--colour-accent);
}
.perk h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: var(--colour-accent);
}
.perk p {
  font-size: 0.9rem;
  color: var(--colour-text);
}

/* Sustainability section */
.section.sustainability {
  padding: 4rem 0;
  background-color: var(--colour-accent);
  text-align: center;
  color: var(--colour-text-light);
}
.section.sustainability h2 {
  color: var(--colour-text-light);
  margin-bottom: 1rem;
}
.section.sustainability p {
  max-width: 600px;
  margin: 0 auto 2rem;
  font-size: 1rem;
  color: var(--colour-bg);
}
.section.sustainability .btn {
  background-color: #ffffff;
  color: var(--colour-accent);
}
.section.sustainability .btn:hover {
  background-color: var(--colour-bg);
  color: var(--colour-accent-dark);
}

/* About section */
.about-section {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 4rem 0;
  background-color: var(--colour-bg);
}
.about-text {
  flex: 1;
  min-width: 280px;
}
.about-text h2 {
  margin-bottom: 1rem;
  color: var(--colour-accent);
}
.about-text p {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--colour-text);
}
.about-image {
  flex: 1;
  min-height: 300px;
  background-image: url('hero2.png');
  background-size: cover;
  background-position: center;
}

/* Newsletter sign‑up */
.newsletter {
  padding: 4rem 0;
  background-color: var(--colour-bg-alt);
}
.newsletter .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
}
.newsletter-info {
  flex: 1;
  min-width: 260px;
}
.newsletter-info h2 {
  margin-bottom: 1rem;
}
.newsletter-form {
  flex: 1;
  min-width: 260px;
}
.newsletter form {
  display: flex;
  gap: 0.5rem;
}
.newsletter input[type="email"] {
  flex: 1;
  padding: 1rem;
  border: 1px solid #ddd;
  font-size: 1rem;
}
.newsletter button {
  padding: 1rem 1.5rem;
  background-color: var(--colour-accent);
  color: var(--colour-text-light);
  border: none;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}
.newsletter button:hover {
  background-color: var(--colour-accent-dark);
  color: var(--colour-text-light);
}

/* Footer */
footer {
  padding: 4rem 0;
  background-color: var(--colour-bg);
  border-top: 1px solid #e7e2d9;
  color: var(--colour-text);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}
.footer-grid h4 {
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
  color: var(--colour-accent);
}
.footer-grid ul {
  list-style: none;
}
.footer-grid li {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}
.footer-grid a {
  color: var(--colour-text);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-grid a:hover {
  color: var(--colour-accent);
}
.social-links {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.social-links a {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  background-color: var(--colour-accent);
  color: var(--colour-text-light);
  border-radius: 50%;
  font-weight: bold;
  transition: background-color 0.3s ease;
}
.social-links a:hover {
  background-color: var(--colour-accent-dark);
}

/* Scroll animations */
.animate {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 70%;
    height: 100vh;
    background-color: var(--colour-bg);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    padding-top: 5rem;
    z-index: 999;
  }
  header.nav-open nav {
    transform: translateX(0);
  }
  nav ul {
    flex-direction: column;
    gap: 1.5rem;
    padding-left: 2rem;
  }
  .menu-toggle {
    display: flex;
  }
  .featured-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .category-card {
    min-height: 300px;
  }
  .about-section {
    flex-direction: column;
  }
  .about-image {
    min-height: 250px;
  }
  .carousel-btn.prev {
    left: 0;
  }
  .carousel-btn.next {
    right: 0;
  }
  .newsletter .container {
    flex-direction: column;
    align-items: stretch;
  }
}