/* Homepage-specific styles building on base.css */

/* Layout tokens */
:root {
  --header-height: 64px;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 16px;
  background: var(--color-accent);
  color: #0d0d0d;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  transition: top var(--duration-fast) var(--ease-standard);
  z-index: 9999;
}
.skip-link:focus { top: 8px; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: saturate(140%) blur(10px);
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  border-bottom: 1px solid var(--gray-200);
}
.header-inner {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand-link { font-weight: 800; font-size: 1.25rem; color: var(--color-text); }
.brand-accent { color: var(--color-accent); }

.mobile-toggle {
  display: none;
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  align-items: center; justify-content: center;
}
.mobile-toggle .bar {
  width: 22px; height: 2px; background: var(--color-text); display: block; margin: 3px 0;
  transition: transform var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
}

.primary-nav { display: block; }
.nav-list { display: flex; gap: var(--space-2); align-items: center; }
.nav-list a { font-weight: 600; }

@media (max-width: 920px) {
  .mobile-toggle { display: inline-flex; }
  .primary-nav { position: fixed; inset: var(--header-height) 0 auto 0; background: var(--color-surface); border-bottom: 1px solid var(--gray-200); box-shadow: var(--shadow-md); transform: translateY(-110%); transition: transform var(--duration-normal) var(--ease-entrance); }
  .primary-nav.open { transform: translateY(0); }
  .nav-list { flex-direction: column; align-items: stretch; padding: var(--space-4); gap: var(--space-2); }
  .nav-list .nav-link { padding: 12px; }
}

/* Hero */
.hero { padding: clamp(48px, 6vw, 96px) 0; }
.hero-inner { display: grid; gap: var(--space-8); grid-template-columns: 1.1fr 0.9fr; align-items: center; }
.hero-copy p { font-size: var(--font-size-lg); color: var(--gray-700); }
.hero-ctas { margin-top: 34px; margin-bottom: 34px; display: flex; gap: var(--space-3); }
.hero-highlights { padding-left: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-5); font-weight: 600; }
.icon-check { display: inline-block; width: 18px; height: 18px; border-radius: 4px; background: var(--color-primary); margin-right: 8px; position: relative; top: 3px; }
.icon-check::after { content: '\2713'; position: absolute; color: #081018; font-size: 14px; left: 3px; top: -1px; }
.hero-media .media-cover { min-height: 320px; background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 16%, var(--gray-100)) 0%, transparent 60%), linear-gradient(0deg, color-mix(in srgb, var(--color-accent) 12%, transparent) 0%, transparent 40%); }

@media (max-width: 1024px) { .hero-inner { grid-template-columns: 1fr; } .hero-highlights { grid-template-columns: 1fr; } }

/* Sections */
.section { padding: clamp(40px, 5vw, 80px) 0; }
.section-head { margin-bottom: var(--space-5); }

.cards-grid { gap: var(--space-5); }
@media (max-width: 1024px) { .grid-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .grid-cols-3 { grid-template-columns: 1fr; } .grid-cols-4 { grid-template-columns: 1fr; } }

.card footer { margin-top: var(--space-4); }
.badges { padding-left: 0; display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Promotions */
.section-promos .promo-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center; }
.promo-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.promo-cta { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-3); }
.countdown { font-weight: 700; color: var(--color-accent); }
@media (max-width: 960px) { .section-promos .promo-wrap { grid-template-columns: 1fr; } }

/* Recommendations */
.reco-item .rating { display: inline-flex; gap: 4px; }
.reco-item .star { width: 16px; height: 16px; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); background: color-mix(in srgb, var(--color-accent) 85%, #000); }
.reco-item .star.half { background: linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 85%, #000) 50%, var(--gray-300) 50%); }

/* Essentials */
.essentials-wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-6); align-items: center; }
.essentials-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.checks { padding-left: 0; display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.cta-row { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
@media (max-width: 960px) { .essentials-wrap { grid-template-columns: 1fr; } }

/* Reviews */
.reviews-wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-6); align-items: center; }
.reviews-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.review-slider { position: relative; min-height: 140px; }
.review { display: none; font-size: var(--font-size-lg); line-height: var(--line-height-relaxed); }
.review.active { display: block; }
.review footer { margin-top: var(--space-2); font-weight: 600; color: var(--gray-600); }
@media (max-width: 960px) { .reviews-wrap { grid-template-columns: 1fr; } }

/* Team */
.team-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center; }
.team-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
@media (max-width: 960px) { .team-wrap { grid-template-columns: 1fr; } }

/* Newsletter */
.newsletter-wrap { max-width: 880px; }
.newsletter-form .form-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); margin-top: var(--space-2); }
@media (max-width: 640px) { .newsletter-form .form-row { grid-template-columns: 1fr; } }

/* Lookbooks */
.lookbook-grid { gap: var(--space-5); }
.lookbook-card {
  display: block; border-radius: var(--radius-lg); padding: var(--space-6);
  background: radial-gradient(120% 120% at 80% 0%, color-mix(in srgb, var(--color-primary) 18%, transparent) 0%, transparent 60%),
              linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 8%, var(--gray-100)) 0%, var(--color-surface) 60%);
  border: 1px solid var(--gray-200); box-shadow: var(--shadow-md);
}
.lookbook-inner h3 { margin-bottom: var(--space-2); }

/* Checkout */
.section-checkout .checkout-wrap { display: grid; grid-template-columns: 1fr auto; gap: var(--space-4); align-items: center; }
.pay-icons { display: flex; gap: 12px; font-size: 22px; margin-top: var(--space-3); }
@media (max-width: 720px) { .section-checkout .checkout-wrap { grid-template-columns: 1fr; } }

/* Connect */
.connect-wrap { text-align: center; }
.socials { margin-top: var(--space-3); display: inline-flex; gap: var(--space-3); }
.social-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-full); border: 1px solid var(--gray-300); color: var(--color-text); font-weight: 700; }
.social-link:hover { background: color-mix(in srgb, var(--color-primary) 10%, transparent); color: var(--color-primary); }

/* Footer */
.site-footer { border-top: 1px solid var(--gray-200); background: var(--color-surface); }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--space-6); padding-top: var(--space-8); padding-bottom: var(--space-6); }
.footer-title { font-size: var(--font-size-lg); margin-bottom: var(--space-3); }
.footer-links { display: grid; gap: 10px; }
.footer-bottom { padding-bottom: var(--space-6); }
@media (max-width: 920px) { .footer-grid { grid-template-columns: 1fr; } }

/* Cookie Consent */
.cookie-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100; }
.cookie-inner { margin: 0 auto var(--space-4); max-width: 960px; background: var(--color-surface); border: 1px solid var(--gray-300); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); padding: var(--space-4); display: grid; gap: var(--space-3); }
.cookie-actions { display: flex; gap: var(--space-3); justify-content: flex-end; flex-wrap: wrap; }

/* Reveal on view */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity var(--duration-slow) var(--ease-entrance), transform var(--duration-slow) var(--ease-entrance); }
.reveal.in { opacity: 1; transform: none; }