/**
 * Homepage parity with React storefront (localhost:3006).
 */

/* Utilities (also in input.css — duplicated so parity works without rebuild) */
.home-page .no-scrollbar::-webkit-scrollbar { display: none; }
.home-page .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.home-page .carousel-peek { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.home-page .carousel-peek > * { scroll-snap-align: start; scroll-snap-stop: always; }
.home-page .scroll-ios { -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }

.home-page .bg-promo\/90 { background-color: hsl(var(--promo) / 0.9); }
.home-page .text-promo { color: hsl(var(--promo)); }
.home-page .bg-promo { background-color: hsl(var(--promo)); }
.home-page .from-promo { --tw-gradient-from: hsl(var(--promo)); }
.home-page .to-promo { --tw-gradient-to: hsl(var(--promo)); }
.home-page .via-promo\/40 { --tw-gradient-via: hsl(var(--promo) / 0.4); }
.home-page .from-promo\/5 { --tw-gradient-from: hsl(var(--promo) / 0.05); }

#featured.bg-surface\/25 {
	background-color: hsl(var(--surface) / 0.25);
}

#flash-deals .flash-deals-grid {
	gap: 1rem;
}

/* FeaturedCollections — gradient card themes (React parity) */
#collections .from-yellow-500\/20 {
	--tw-gradient-from: rgb(234 179 8 / 0.2);
	--tw-gradient-to: rgb(234 179 8 / 0);
}
#collections .to-brand\/10 {
	--tw-gradient-to: hsl(var(--brand) / 0.1);
}
#collections .border-yellow-500\/20 { border-color: rgb(234 179 8 / 0.2); }
#collections .text-yellow-400 { color: rgb(250 204 21); }

#collections .from-blue-500\/20 { --tw-gradient-from: rgb(59 130 246 / 0.2); }
#collections .to-indigo-500\/10 { --tw-gradient-to: rgb(99 102 241 / 0.1); }
#collections .border-blue-500\/20 { border-color: rgb(59 130 246 / 0.2); }
#collections .text-blue-400 { color: rgb(96 165 250); }

#collections .from-emerald-500\/20 { --tw-gradient-from: rgb(16 185 129 / 0.2); }
#collections .to-teal-500\/10 { --tw-gradient-to: rgb(20 184 166 / 0.1); }
#collections .border-emerald-500\/20 { border-color: rgb(16 185 129 / 0.2); }
#collections .text-emerald-400 { color: rgb(52 211 153); }

#collections .from-rose-500\/20 { --tw-gradient-from: rgb(244 63 94 / 0.2); }
#collections .to-pink-500\/10 { --tw-gradient-to: rgb(236 72 153 / 0.1); }
#collections .border-rose-500\/20 { border-color: rgb(244 63 94 / 0.2); }
#collections .text-rose-400 { color: rgb(251 113 133); }

#collections .bg-gradient-to-br.from-yellow-500\/20.to-brand\/10,
#collections a.bg-gradient-to-br.from-yellow-500\/20 {
	background-image: linear-gradient(to bottom right, rgb(234 179 8 / 0.2), hsl(var(--brand) / 0.1));
}
#collections .bg-gradient-to-br.from-blue-500\/20.to-indigo-500\/10,
#collections a.bg-gradient-to-br.from-blue-500\/20 {
	background-image: linear-gradient(to bottom right, rgb(59 130 246 / 0.2), rgb(99 102 241 / 0.1));
}
#collections .bg-gradient-to-br.from-emerald-500\/20.to-teal-500\/10,
#collections a.bg-gradient-to-br.from-emerald-500\/20 {
	background-image: linear-gradient(to bottom right, rgb(16 185 129 / 0.2), rgb(20 184 166 / 0.1));
}
#collections .bg-gradient-to-br.from-rose-500\/20.to-pink-500\/10,
#collections a.bg-gradient-to-br.from-rose-500\/20 {
	background-image: linear-gradient(to bottom right, rgb(244 63 94 / 0.2), rgb(236 72 153 / 0.1));
}

.product-card-premium .desktop-hover-bar {
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Featured carousel — always show add-to-cart bar (React screenshot parity) */
@media (min-width: 768px) {
	#featured .product-card-premium .desktop-hover-bar {
		display: flex !important;
		transform: translateY(0) !important;
		opacity: 1 !important;
	}
}

.bg-gradient-to-br.from-brand.via-brand.to-brand-soft,
.from-brand.via-brand.to-brand-soft {
	background-image: linear-gradient(to bottom right, hsl(var(--brand)), hsl(var(--brand)), hsl(var(--brand-soft))) !important;
}

.home-page .to-brand-soft {
	--tw-gradient-to: hsl(var(--brand-soft));
}

/* ── Typography scale (matches globals.css, extended for large viewports) ── */
@media (min-width: 1280px) {
  .home-page {
    --text-section: clamp(2rem, 3.2vw, 4rem);
    --text-hero: clamp(2.8rem, 5vw, 5.75rem);
  }
}

@media (min-width: 1920px) {
  .home-page {
    --text-section: clamp(2.25rem, 2.6vw, 4.25rem);
    --text-hero: clamp(3rem, 3.8vw, 6.25rem);
    --text-card: clamp(1rem, 1.2vw, 1.35rem);
  }

  .home-page .container {
    max-width: 84rem;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }

  #hero-section .max-w-7xl {
    max-width: 88rem;
  }

  #hero-section h1 {
    font-size: clamp(3rem, 4.2vw, 5.75rem) !important;
  }

  .home-page .store-section-title {
    font-size: var(--text-section);
  }

  #promotions .promo-banner-title {
    font-size: clamp(2.25rem, 2.2vw, 3.25rem) !important;
  }

  #promotions .promo-banner-subtitle {
    font-size: 1.125rem;
    max-width: 28rem;
  }

  #promotions .relative.aspect-square {
    max-width: 420px;
  }

  #promotions .grid.md\:grid-cols-2 {
    gap: 2.5rem;
    padding: 2.75rem 3rem;
  }

  #promotions img {
    image-rendering: auto;
  }
}

@media (min-width: 2560px) {
  .home-page {
    --text-section: clamp(2.5rem, 2.2vw, 4.75rem);
    --text-hero: clamp(3.25rem, 3.2vw, 7rem);
  }

  .home-page .container {
    max-width: 90rem;
  }

  #hero-section .max-w-7xl {
    max-width: 96rem;
  }

  #promotions .relative.aspect-square {
    max-width: 460px;
  }

  #promotions .promo-banner-title {
    font-size: clamp(2.5rem, 1.9vw, 3.5rem) !important;
  }

  #flash-deals .flash-deals-grid {
    gap: 1.5rem;
  }

  #featured .featured-carousel-track {
    gap: 1.5rem;
  }
}

/* ── Promotions card (React: glass-card + mesh-gradient + accent bar) ── */
#promotions .glass-card {
  background: hsl(var(--surface) / 0.4);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

#promotions .mesh-gradient {
  background:
    radial-gradient(ellipse 80% 60% at 15% 30%, hsla(43, 68%, 47%, 0.09) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 70%, hsla(220, 50%, 25%, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 0%, hsla(43, 68%, 47%, 0.06) 0%, transparent 50%);
}

#promotions .text-brand {
  color: hsl(var(--brand)) !important;
}

/* ── Desktop: preserve React column order for promotions ── */
@media (min-width: 768px) {
  #promotions .order-2.md\:order-1 {
    order: 1;
  }

  #promotions .order-1.md\:order-2 {
    order: 2;
  }

  #promotions .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Hero / section gradients locked to React tokens ── */
.home-page .premium-gradient-text {
  background-image: linear-gradient(to bottom right, #fff, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.55));
}

.home-page .gold-gradient-text {
  background-image: linear-gradient(to bottom right, #fde68a, #eab308, #92400e);
}

.home-page .accent-gradient-text {
  background-image: linear-gradient(to right, #fde68a, #eab308, #ca8a04);
}

.home-page .accent-gradient {
  background-image: linear-gradient(to bottom right, #f59e0b, #d97706, #92400e);
}

/* ── Crisp product imagery on high-DPI ── */
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  .home-page #promotions img,
  .home-page #hero-section img,
  .home-page .product-card-premium img {
    image-rendering: -webkit-optimize-contrast;
  }
}