/* ==========================================================================
   HOME PAGE — hero, categories, product grids, promo banner, USPs,
   reviews, Instagram feed, newsletter
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--grad-hero);
  overflow: hidden;
}

/* Soft floral / leaf graphics floating in the background */
.hero__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero__decor span {
  position: absolute;
  display: block;
  border-radius: 50% 12% 50% 12%;
  background: var(--rose);
  opacity: 0.16;
  animation: floatY 9s ease-in-out infinite;
}
.hero__decor span:nth-child(1) { width: 120px; height: 120px; top: 12%; left: 4%; }
.hero__decor span:nth-child(2) { width: 70px; height: 70px; top: 62%; left: 12%; animation-delay: 1.4s; }
.hero__decor span:nth-child(3) { width: 150px; height: 150px; bottom: 6%; right: 6%; animation-delay: 2.2s; opacity: 0.12; }
.hero__decor span:nth-child(4) { width: 54px; height: 54px; top: 22%; right: 18%; animation-delay: 3s; }
.hero__decor span:nth-child(5) { width: 90px; height: 90px; top: 46%; right: 2%; animation-delay: 0.7s; opacity: 0.1; }

.hero__slides { position: relative; }

.hero__slide {
  display: none;
  align-items: center;
  gap: var(--sp-6);
  min-height: clamp(520px, 72vh, 720px);
}
.hero__slide.is-active { display: grid; grid-template-columns: 1fr 1fr; }
.hero__slide.is-active .hero__content > * { animation: fadeUp 0.8s var(--ease-out) backwards; }
.hero__slide.is-active .hero__content > *:nth-child(1) { animation-delay: 0.05s; }
.hero__slide.is-active .hero__content > *:nth-child(2) { animation-delay: 0.15s; }
.hero__slide.is-active .hero__content > *:nth-child(3) { animation-delay: 0.25s; }
.hero__slide.is-active .hero__content > *:nth-child(4) { animation-delay: 0.35s; }
.hero__slide.is-active .hero__content > *:nth-child(5) { animation-delay: 0.45s; }

.hero__content { padding-block: var(--sp-7); max-width: 560px; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--fs-xl);
  color: var(--rose);
  margin-bottom: var(--sp-3);
}
.hero__eyebrow svg { width: 18px; fill: var(--rose); }

.hero__title {
  font-size: var(--fs-4xl);
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.hero__title em {
  display: block;
  font-style: normal;
  color: var(--deep-rose);
}

.hero__rule {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block: var(--sp-4);
  max-width: 340px;
}
.hero__rule::before,
.hero__rule::after { content: ""; height: 1px; flex: 1; background: var(--line-strong); }
.hero__rule span { width: 9px; height: 9px; background: var(--rose); transform: rotate(45deg); border-radius: 2px; }

.hero__text { font-size: var(--fs-lg); max-width: 440px; }

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

.hero__stats {
  display: flex;
  gap: var(--sp-7);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.hero__stat strong {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  color: var(--deep-rose);
}
.hero__stat span { font-size: var(--fs-xs); color: var(--ink-muted); letter-spacing: var(--ls-wide); text-transform: uppercase; }

/* Arch-framed hero visual — centered so the frame sits at the same spot
   regardless of how many lines a slide's heading wraps to. */
.hero__media { position: relative; align-self: center; }
.hero__arch {
  position: relative;
  border-radius: var(--r-arch);
  overflow: hidden;
  background: var(--blush);
  box-shadow: var(--sh-lg);
  margin-left: auto;
  width: min(100%, 520px);
}
.hero__arch img { width: 100%; height: 100%; object-fit: cover; }

/* Glass badge floating over the hero image */
.hero__float {
  position: absolute;
  left: -10px;
  bottom: 12%;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--sh-md);
  animation: floatY 6s ease-in-out infinite;
}
.hero__float svg { width: 26px; color: var(--deep-rose); }
.hero__float strong { display: block; font-size: var(--fs-sm); color: var(--ink); }
.hero__float span { font-size: var(--fs-xs); color: var(--ink-muted); }

.hero__dots { position: absolute; left: 50%; translate: -50% 0; bottom: var(--sp-5); z-index: 4; }

/* --------------------------------------------------------------------------
   2. Top categories
   -------------------------------------------------------------------------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-4);
}

.cat-card {
  position: relative;
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--sh-xs);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.cat-card:hover { transform: translateY(-8px); box-shadow: var(--sh-md); }

.cat-card__media { aspect-ratio: 3 / 4; overflow: hidden; background: var(--blush-50); }
.cat-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.cat-card:hover .cat-card__media img { transform: scale(1.08); }

.cat-card__label {
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  background: var(--blush-50);
  transition: background var(--t-base);
}
.cat-card:hover .cat-card__label { background: var(--blush); }
.cat-card__label h3 {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink);
}
.cat-card__label span {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: var(--sp-2);
  border-radius: 50%;
  color: var(--deep-rose);
  transition: background var(--t-base), color var(--t-base), transform var(--t-base);
}
.cat-card:hover .cat-card__label span { background: var(--deep-rose); color: var(--white); transform: translateX(4px); }
.cat-card__label svg { width: 14px; }

/* --------------------------------------------------------------------------
   3. Product grids
   -------------------------------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
.product-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Loading skeleton shown while products render */
.skeleton {
  border-radius: var(--r-lg);
  background: linear-gradient(90deg, var(--blush-50) 25%, var(--white) 50%, var(--blush-50) 75%);
  background-size: 420px 100%;
  animation: shimmer 1.3s linear infinite;
  aspect-ratio: 7 / 11;
}

/* --------------------------------------------------------------------------
   4. Promotional banner
   -------------------------------------------------------------------------- */
.promo {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  min-height: 420px;
  display: grid;
  align-items: center;
  background: var(--blush);
}
.promo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.promo__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 245, 248, 0.96) 0%, rgba(255, 245, 248, 0.82) 40%, rgba(255, 245, 248, 0.1) 75%);
}
.promo__content {
  position: relative;
  z-index: 2;
  padding: clamp(2rem, 5vw, 4rem);
  max-width: 560px;
}
.promo__eyebrow {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--rose);
}
.promo__title {
  font-size: var(--fs-3xl);
  color: var(--deep-rose);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  margin-block: var(--sp-2) var(--sp-3);
}
.promo__off {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 4rem);
  color: var(--ink);
  line-height: 1;
}
.promo__off small { font-size: var(--fs-lg); color: var(--ink-soft); }

/* Countdown timer */
.countdown { display: flex; gap: var(--sp-3); margin-block: var(--sp-5); }
.countdown__unit {
  min-width: 68px;
  padding: var(--sp-3) var(--sp-2);
  text-align: center;
  border-radius: var(--r-md);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--sh-xs);
}
.countdown__num {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  color: var(--deep-rose);
  line-height: 1;
}
.countdown__label { font-size: 10px; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   5. Why choose us
   -------------------------------------------------------------------------- */
.usp-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-4);
}
.usp {
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--sh-xs);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.usp:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }
.usp__icon {
  width: 62px;
  height: 62px;
  margin: 0 auto var(--sp-4);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--grad-blush);
  color: var(--deep-rose);
  transition: background var(--t-base), color var(--t-base), transform var(--t-base);
}
.usp:hover .usp__icon { background: var(--grad-rose); color: var(--white); transform: rotate(-6deg) scale(1.05); }
.usp__icon svg { width: 26px; height: 26px; }
.usp h3 {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--sp-1);
}
.usp p { font-size: var(--fs-xs); }

/* --------------------------------------------------------------------------
   6. Customer reviews
   -------------------------------------------------------------------------- */
.review-card {
  position: relative;
  height: 100%;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--sh-xs);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.review-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }
.review-card::before {
  content: "\201C";
  position: absolute;
  top: 4px;
  right: var(--sp-5);
  font-family: var(--font-heading);
  font-size: 80px;
  line-height: 1;
  color: var(--blush);
}
.review-card__text {
  position: relative;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  margin-block: var(--sp-3) var(--sp-5);
}
.review-card__author { display: flex; align-items: center; gap: var(--sp-3); }
.review-card__avatar {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--grad-rose);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: var(--fs-md);
}
.review-card__name { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.review-card__meta { font-size: var(--fs-xs); color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   7. Instagram feed
   -------------------------------------------------------------------------- */
.insta-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-3);
}
.insta-tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--blush-50);
}
.insta-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.insta-tile:hover img { transform: scale(1.09); }
.insta-tile__hover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(198, 90, 124, 0.55);
  color: var(--white);
  opacity: 0;
  transition: opacity var(--t-base);
}
.insta-tile:hover .insta-tile__hover { opacity: 1; }
.insta-tile__hover svg { width: 26px; height: 26px; fill: currentColor; }

.insta-handle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--deep-rose);
}
.insta-handle svg { width: 18px; fill: currentColor; }

/* --------------------------------------------------------------------------
   8. Newsletter
   -------------------------------------------------------------------------- */
.newsletter {
  background: var(--grad-rose);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.newsletter::before,
.newsletter::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}
.newsletter::before { width: 260px; height: 260px; top: -120px; left: -60px; }
.newsletter::after { width: 200px; height: 200px; bottom: -110px; right: 8%; }

.newsletter__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--sp-6);
  padding-block: var(--sp-8);
}
.newsletter__title { color: var(--white); font-size: var(--fs-2xl); }
.newsletter p { color: rgba(255, 255, 255, 0.9); font-size: var(--fs-sm); margin-top: var(--sp-2); }
.newsletter .btn {
  --btn-bg: var(--white);
  --btn-color: var(--deep-rose);
  box-shadow: none;
}
.newsletter .btn:hover { color: var(--deep-rose); }
.newsletter__note { font-size: var(--fs-xs); opacity: 0.85; margin-top: var(--sp-3); }
.newsletter__head { display: flex; align-items: center; gap: var(--sp-4); }
.newsletter__head svg { width: 46px; flex: none; color: var(--white); }