/* Home page specific, built atop base.css */

/* General section spacing */
.section-pad { padding-block: var(--space-18); }

/* Hero */
.hero { position: relative; background: radial-gradient(1200px 600px at 10% 10%, rgba(255,212,0,0.22), transparent 60%), radial-gradient(900px 500px at 90% 20%, rgba(20,184,166,0.18), transparent 60%), radial-gradient(800px 600px at 50% 100%, rgba(217,70,239,0.16), transparent 60%); }
.hero__wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-10); align-items: center; }
.hero__content p { font-size: var(--fs-lg); }
.hero__media { margin: 0; }
.hero__media img { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.hero__actions { margin-top: var(--space-5); }

@media (max-width: 900px) {
  .hero__wrap { grid-template-columns: 1fr; }
}

/* Cards and interactive visuals */
.card h3 { margin-block: var(--space-2) var(--space-2); }

/* Moodboard */
.moodboard { text-align: center; }
.moodboard img { border-radius: var(--radius-lg); }
.moodboard__caption { margin-top: var(--space-3); color: var(--gray-600); }
.moodboard__actions { justify-content: center; margin-top: var(--space-3); }

/* Category tooltips */
.category { position: relative; }
.category[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  background: var(--color-navy);
  color: #fff;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-in-out);
}
.category:hover::after, .category:focus-visible::after { opacity: 1; }

/* Recommendations & products */
.rec-list .product p { color: var(--gray-700); }

/* New arrivals image */
.new-arrivals img { border-radius: var(--radius-lg); }

/* Tracking progress */
.tracker { display: grid; gap: var(--space-4); }
.tracker__bar { height: 10px; background: var(--gray-200); border-radius: var(--radius-pill); overflow: hidden; }
.tracker__progress { display: block; height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); border-radius: inherit; box-shadow: inset 0 0 8px rgba(0,0,0,0.12); }
.tracker__steps { display: grid; grid-template-columns: repeat(4, 1fr); font-size: var(--fs-sm); color: var(--gray-600); }
.tracker__steps span { text-align: center; }