/* ═══════════════════════════════════════════════════════════════
   MMART — ULTRA PREMIUM VISUAL THEME v2
   Pure CSS overlay · zero functionality changes
   Blue + Purple gradient luxury system
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,600&display=swap');

/* ════════════════════════════════════════════════
   DESIGN TOKENS
   ════════════════════════════════════════════════ */
:root {
  /* Core palette */
  --p-blue-400: #60A5FA;
  --p-blue-500: #3B82F6;
  --p-blue-600: #2563EB;
  --p-blue-700: #1D4ED8;
  --p-navy:     #1E3A8A;
  --p-purple:   #7C3AED;
  --p-indigo:   #4F46E5;
  --p-violet:   #8B5CF6;

  /* Gradients */
  --p-grad:          linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
  --p-grad-h:        linear-gradient(135deg, #1D4ED8 0%, #6D28D9 100%);
  --p-grad-nav:      linear-gradient(90deg, #1E3A8A 0%, #4F46E5 50%, #7C3AED 100%);
  --p-grad-hero:     linear-gradient(135deg, #080D1A 0%, #1E3A8A 45%, #5B21B6 100%);
  --p-grad-badge:    linear-gradient(135deg, #7C3AED 0%, #2563EB 100%);
  --p-grad-gold:     linear-gradient(135deg, #F59E0B 0%, #FBBF24 60%, #F59E0B 100%);

  /* Surfaces */
  --p-white:    #FFFFFF;
  --p-surface:  #F5F7FF;
  --p-surface2: #EEF2FF;
  --p-glass:    rgba(255,255,255,0.08);
  --p-glass-h:  rgba(255,255,255,0.14);

  /* Glow shadows */
  --p-glow-blue:   0 0 30px rgba(37,99,235,0.35), 0 0 60px rgba(37,99,235,0.15);
  --p-glow-purple: 0 0 30px rgba(124,58,237,0.35), 0 0 60px rgba(124,58,237,0.15);
  --p-glow-both:   0 0 40px rgba(79,70,229,0.30), 0 0 80px rgba(37,99,235,0.12);

  /* Layered shadows */
  --p-shadow-xs: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --p-shadow-sm: 0 4px 16px rgba(30,58,138,0.10), 0 1px 4px rgba(0,0,0,0.05);
  --p-shadow-md: 0 8px 32px rgba(30,58,138,0.14), 0 2px 8px rgba(0,0,0,0.06);
  --p-shadow-lg: 0 20px 60px rgba(30,58,138,0.18), 0 6px 20px rgba(0,0,0,0.08);
  --p-shadow-xl: 0 32px 80px rgba(30,58,138,0.22), 0 8px 28px rgba(0,0,0,0.10);
  --p-shadow-2xl:0 48px 120px rgba(30,58,138,0.28), 0 12px 40px rgba(0,0,0,0.12);

  /* Button shadows */
  --p-btn-shadow:   0 4px 20px rgba(79,70,229,0.40), 0 1px 6px rgba(37,99,235,0.25),
                    inset 0 1px 0 rgba(255,255,255,0.18);
  --p-btn-shadow-h: 0 8px 32px rgba(79,70,229,0.55), 0 2px 10px rgba(37,99,235,0.35),
                    inset 0 1px 0 rgba(255,255,255,0.22);

  /* Card 3D depth */
  --p-card-shadow:  0 2px 8px rgba(15,23,42,0.06),
                    0 8px 24px rgba(30,58,138,0.08),
                    0 24px 48px rgba(30,58,138,0.10),
                    0 0 0 1px rgba(226,232,247,0.6);
  --p-card-shadow-h:0 4px 16px rgba(15,23,42,0.10),
                    0 16px 48px rgba(30,58,138,0.18),
                    0 48px 80px rgba(79,70,229,0.14),
                    0 0 0 1px rgba(79,70,229,0.12),
                    var(--p-glow-both);

  /* Radii */
  --p-r-sm:   8px;
  --p-r-md:   14px;
  --p-r-lg:   18px;
  --p-r-xl:   22px;
  --p-r-2xl:  28px;
  --p-r-full: 9999px;

  /* Motion */
  --p-ease:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --p-spring:  cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --p-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --p-t-fast:  all 0.18s var(--p-ease);
  --p-t-base:  all 0.30s var(--p-ease);
  --p-t-slow:  all 0.48s var(--p-expo);
}

/* ════════════════════════════════════════════════
   GLOBAL RESET & BASE
   ════════════════════════════════════════════════ */
*, *::before, *::after {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
  background: var(--p-surface);
  font-family: 'Inter', 'Poppins', sans-serif;
  color: #0F172A;
}

/* ════════════════════════════════════════════════
   KEYFRAMES
   ════════════════════════════════════════════════ */
@keyframes p-fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes p-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes p-scale-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes p-shimmer {
  0%   { background-position: -300% center; }
  100% { background-position:  300% center; }
}
@keyframes p-float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-6px) rotate(0.5deg); }
  66%       { transform: translateY(-3px) rotate(-0.3deg); }
}
@keyframes p-hdr-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.82; }
}
@keyframes p-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes p-glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(79,70,229,0.3), 0 0 40px rgba(37,99,235,0.1); }
  50%       { box-shadow: 0 0 40px rgba(79,70,229,0.5), 0 0 80px rgba(37,99,235,0.25); }
}
@keyframes p-badge-glow {
  0%, 100% { box-shadow: 0 0 12px rgba(124,58,237,0.45), 0 2px 8px rgba(37,99,235,0.35); }
  50%       { box-shadow: 0 0 24px rgba(124,58,237,0.65), 0 4px 16px rgba(37,99,235,0.50); }
}
@keyframes p-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes p-border-glow {
  0%, 100% { opacity: 0.18; }
  50%       { opacity: 0.32; }
}

/* ════════════════════════════════════════════════
   ANNOUNCEMENT BAR
   ════════════════════════════════════════════════ */
.bg-\[\#0F172A\],
.bg-\[\#1a0533\],
.bg-\[\#0c1445\],
.bg-\[\#0D1526\],
.bg-\[\#0A0F1E\] {
  background: linear-gradient(90deg, #0A0F2E 0%, #1E3A8A 35%, #4F46E5 65%, #0A0F2E 100%) !important;
  background-size: 200% 100% !important;
  animation: p-gradient-shift 8s ease infinite !important;
}

/* ════════════════════════════════════════════════
   NAVBAR — PREMIUM GLASS
   ════════════════════════════════════════════════ */

/* Main storefront nav */
.h-16.bg-white\/80,
.sticky.top-0.bg-white,
.bg-white.border-b,
.bg-white\/95 {
  background: rgba(255,255,255,0.96) !important;
  backdrop-filter: blur(24px) saturate(200%) brightness(1.02) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(1.02) !important;
  border-bottom: 1px solid rgba(79,70,229,0.08) !important;
  box-shadow:
    0 1px 0 rgba(79,70,229,0.06),
    0 4px 24px rgba(30,58,138,0.07),
    0 0 0 0.5px rgba(79,70,229,0.05) !important;
}

/* Logo */
a[href="/"] .font-bold,
a[href="/"] .font-extrabold,
.logo-text {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em;
  background: var(--p-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Nav links */
nav a, .nav-link {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
  position: relative;
  transition: color 0.22s var(--p-ease), opacity 0.22s var(--p-ease) !important;
}

nav a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--p-grad);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.28s var(--p-expo);
  box-shadow: 0 1px 6px rgba(79,70,229,0.40);
}
nav a:hover::after,
nav a[aria-current="page"]::after,
nav a.active::after { transform: scaleX(1); }

/* "Browse Categories" nav pill */
.bg-\[\#1E3A8A\].rounded-full,
.bg-\[\#1E3A8A\].rounded-lg {
  background: var(--p-grad) !important;
  box-shadow: var(--p-btn-shadow) !important;
  transition: var(--p-t-base) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
}
.bg-\[\#1E3A8A\].rounded-full:hover,
.bg-\[\#1E3A8A\].rounded-lg:hover {
  background: var(--p-grad-h) !important;
  box-shadow: var(--p-btn-shadow-h) !important;
  transform: translateY(-2px) scale(1.02) !important;
}

/* Cart badge */
.absolute.-top-0\.5.-right-0\.5,
[class*="-top-0.5 -right-0.5"] {
  background: var(--p-grad) !important;
  box-shadow: 0 2px 8px rgba(79,70,229,0.45) !important;
  animation: p-badge-glow 2.5s ease-in-out infinite !important;
}

/* ════════════════════════════════════════════════
   PREMIUM SEARCH BAR
   ════════════════════════════════════════════════ */
input[type="search"],
input[placeholder*="Search"],
input[placeholder*="search"],
input[placeholder*="products"],
.flex-1.rounded-full.h-13 {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(79,70,229,0.14) !important;
  border-radius: var(--p-r-full) !important;
  box-shadow:
    inset 0 1px 4px rgba(30,58,138,0.06),
    0 2px 12px rgba(0,0,0,0.04) !important;
  transition: var(--p-t-base) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9rem !important;
  color: #0F172A !important;
}
input[type="search"]:focus,
input[placeholder*="Search"]:focus,
input[placeholder*="search"]:focus,
input[placeholder*="products"]:focus {
  border-color: rgba(79,70,229,0.38) !important;
  box-shadow:
    inset 0 1px 4px rgba(30,58,138,0.04),
    0 0 0 4px rgba(79,70,229,0.10),
    0 4px 20px rgba(79,70,229,0.14) !important;
  outline: none !important;
}

/* Search container */
.rounded-full.bg-\[\#F1F5F9\],
.rounded-full.border {
  border-radius: var(--p-r-full) !important;
  transition: var(--p-t-base) !important;
}

/* Search icon button */
button[aria-label*="search" i],
button[aria-label*="Search" i] {
  background: var(--p-grad) !important;
  box-shadow: var(--p-btn-shadow) !important;
  transition: var(--p-t-base) !important;
  border-radius: var(--p-r-full) !important;
}
button[aria-label*="search" i]:hover,
button[aria-label*="Search" i]:hover {
  background: var(--p-grad-h) !important;
  box-shadow: var(--p-btn-shadow-h) !important;
  transform: scale(1.06) !important;
}

/* ════════════════════════════════════════════════
   HERO BANNER — HDR PREMIUM TREATMENT
   ════════════════════════════════════════════════ */

/* Hero container */
.relative.h-\[92vh\] {
  box-shadow: 0 40px 100px rgba(30,58,138,0.30) !important;
}

/* The base gradient background layer — deepen and intensify it */
.absolute.inset-0.bg-gradient-to-br.from-\[\#080D1A\] {
  background: linear-gradient(145deg,
    #050915 0%,
    #0D1B4A 25%,
    #1E3A8A 50%,
    #4C1D95 75%,
    #2D1B69 100%) !important;
  filter: saturate(1.15) !important;
}

/* The secondary gradient layer */
.absolute.inset-0.bg-gradient-to-r.from-\[\#0F172A\] {
  background: linear-gradient(125deg,
    rgba(5,9,21,0.92) 0%,
    rgba(30,58,138,0.65) 45%,
    rgba(124,58,237,0.55) 80%,
    rgba(109,40,217,0.40) 100%) !important;
  mix-blend-mode: screen !important;
  opacity: 0.80 !important;
}

/* Top scrim — keep subtle */
.absolute.top-0.inset-x-0.h-24 {
  background: linear-gradient(to bottom,
    rgba(5,9,21,0.55) 0%,
    transparent 100%) !important;
}

/* Bottom scrim */
.absolute.bottom-0.inset-x-0.h-1\/3 {
  background: linear-gradient(to top,
    rgba(5,9,21,0.80) 0%,
    rgba(30,58,138,0.20) 60%,
    transparent 100%) !important;
}

/* Hero orbs — make them more dramatic */
.orb {
  border-radius: 50% !important;
  pointer-events: none !important;
  filter: blur(60px) !important;
}

/* HDR shimmer line on hero */
.shimmer-line {
  height: 1px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(124,58,237,0.6) 25%,
    rgba(255,255,255,0.9) 50%,
    rgba(37,99,235,0.6) 75%,
    transparent 100%) !important;
  background-size: 300% 100% !important;
  animation: p-shimmer 4s linear infinite !important;
}

/* Hero banner image — when present */
img[src="/mmart-banner.png"] ~ [class*="bg-gradient-to-br"] {
  opacity: 0 !important;
  mix-blend-mode: normal !important;
}
img[src="/mmart-banner.png"] ~ [class*="from-black/20"] { opacity: 0.20 !important; }
img[src="/mmart-banner.png"] ~ [class*="from-black/50"] { opacity: 0.28 !important; }
img[src="/mmart-banner.png"] {
  object-fit: cover !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  filter: brightness(1.10) contrast(1.06) saturate(1.12) !important;
}

/* Badge on hero (NEW ARRIVAL / SUMMER SALE) */
.badge-glass {
  background: rgba(79,70,229,0.20) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  box-shadow:
    0 4px 20px rgba(0,0,0,0.18),
    0 0 0 1px rgba(124,58,237,0.30),
    inset 0 1px 0 rgba(255,255,255,0.35) !important;
  border-radius: var(--p-r-full) !important;
  animation: p-float 5s var(--p-ease) infinite, p-badge-glow 3s ease-in-out infinite !important;
}

/* Generic backdrop-blur glass panels */
[class*="backdrop-blur"] {
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

/* ════════════════════════════════════════════════
   LUXURY CTA BUTTONS
   ════════════════════════════════════════════════ */

/* Primary — blue→purple gradient */
button.bg-gradient-to-r.from-\[\#1E3A8A\],
a.bg-gradient-to-r.from-\[\#1E3A8A\],
button.bg-\[\#1E3A8A\],
a.bg-\[\#1E3A8A\],
.flex-1.h-12.bg-gradient-to-r.from-\[\#1E3A8A\],
.flex-1.px-4.py-2\.5.rounded-xl.bg-gradient-to-r.from-\[\#1E3A8A\],
.flex-1.py-2\.5.rounded-xl.bg-gradient-to-r.from-\[\#1E3A8A\],
.w-full.py-3.rounded-xl.bg-gradient-to-r.from-\[\#1E3A8A\],
.w-full.rounded-t-lg.bg-gradient-to-t.from-\[\#1E3A8A\] {
  background: linear-gradient(135deg, #1E3A8A 0%, #4F46E5 50%, #7C3AED 100%) !important;
  background-size: 200% 200% !important;
  box-shadow: var(--p-btn-shadow) !important;
  border: none !important;
  font-family: 'Poppins', 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  position: relative;
  overflow: hidden;
  transition: var(--p-t-base) !important;
}
button.bg-gradient-to-r.from-\[\#1E3A8A\]::after,
.flex-1.h-12.bg-gradient-to-r.from-\[\#1E3A8A\]::after,
.w-full.py-3.rounded-xl.bg-gradient-to-r.from-\[\#1E3A8A\]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.15) 0%,
    rgba(255,255,255,0.05) 50%,
    transparent 100%);
  pointer-events: none;
  border-radius: inherit;
}
button.bg-gradient-to-r.from-\[\#1E3A8A\]:hover,
a.bg-gradient-to-r.from-\[\#1E3A8A\]:hover,
button.bg-\[\#1E3A8A\]:hover,
a.bg-\[\#1E3A8A\]:hover,
.flex-1.h-12.bg-gradient-to-r.from-\[\#1E3A8A\]:hover,
.w-full.py-3.rounded-xl.bg-gradient-to-r.from-\[\#1E3A8A\]:hover {
  background: linear-gradient(135deg, #1D4ED8 0%, #4338CA 50%, #6D28D9 100%) !important;
  box-shadow: var(--p-btn-shadow-h) !important;
  transform: translateY(-3px) scale(1.01) !important;
}

/* Purple accent buttons */
button.bg-\[\#7C3AED\],
a.bg-\[\#7C3AED\],
button.bg-gradient-to-r.from-\[\#7C3AED\],
a.bg-gradient-to-r.from-\[\#7C3AED\],
[class*="bg-gradient-to-r"][class*="from-\[#7C3AED\]"] {
  background: linear-gradient(135deg, #7C3AED 0%, #4F46E5 100%) !important;
  box-shadow: 0 6px 24px rgba(124,58,237,0.40), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  font-weight: 600 !important;
  transition: var(--p-t-base) !important;
}
button.bg-\[\#7C3AED\]:hover,
a.bg-\[\#7C3AED\]:hover,
button.bg-gradient-to-r.from-\[\#7C3AED\]:hover,
a.bg-gradient-to-r.from-\[\#7C3AED\]:hover {
  background: linear-gradient(135deg, #6D28D9 0%, #4338CA 100%) !important;
  box-shadow: 0 10px 36px rgba(124,58,237,0.55), inset 0 1px 0 rgba(255,255,255,0.22) !important;
  transform: translateY(-3px) scale(1.01) !important;
}

/* Gold/amber buttons */
button.bg-gradient-to-r.from-\[\#C9A84C\],
a.bg-gradient-to-r.from-\[\#C9A84C\],
button.bg-\[\#C9A84C\],
a.bg-\[\#C9A84C\] {
  background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 60%, #F59E0B 100%) !important;
  background-size: 200% 100% !important;
  box-shadow: 0 6px 20px rgba(245,158,11,0.42), inset 0 1px 0 rgba(255,255,255,0.30) !important;
  color: #1a1200 !important;
  font-weight: 700 !important;
  transition: var(--p-t-base) !important;
}
button.bg-gradient-to-r.from-\[\#C9A84C\]:hover,
a.bg-gradient-to-r.from-\[\#C9A84C\]:hover,
button.bg-\[\#C9A84C\]:hover,
a.bg-\[\#C9A84C\]:hover {
  background: linear-gradient(135deg, #D97706 0%, #F59E0B 60%, #D97706 100%) !important;
  box-shadow: 0 10px 36px rgba(217,119,6,0.50), inset 0 1px 0 rgba(255,255,255,0.25) !important;
  transform: translateY(-3px) scale(1.01) !important;
}

/* Outline / ghost buttons */
button.border-\[\#1E3A8A\],
a.border-\[\#1E3A8A\],
button.border-\[\#C9A84C\],
a.border-\[\#C9A84C\] {
  border: 1.5px solid rgba(79,70,229,0.50) !important;
  color: #4F46E5 !important;
  transition: var(--p-t-base) !important;
  background: rgba(79,70,229,0.03) !important;
}
button.border-\[\#1E3A8A\]:hover,
a.border-\[\#1E3A8A\]:hover,
button.border-\[\#C9A84C\]:hover,
a.border-\[\#C9A84C\]:hover {
  background: rgba(79,70,229,0.08) !important;
  border-color: #4F46E5 !important;
  box-shadow: 0 4px 20px rgba(79,70,229,0.20), 0 0 0 3px rgba(79,70,229,0.08) !important;
  transform: translateY(-2px) !important;
}

/* Active press feedback */
button:active, [role="button"]:active {
  transform: scale(0.96) translateY(1px) !important;
  transition: transform 0.08s !important;
}

/* ════════════════════════════════════════════════
   GLASSMORPHISM PRODUCT CARDS
   ════════════════════════════════════════════════ */

/* card-3d — product + category cards with 3D depth */
.card-3d {
  transform-style: preserve-3d !important;
  box-shadow: var(--p-card-shadow) !important;
  border: 1px solid rgba(226,232,247,0.7) !important;
  transition:
    transform 0.48s var(--p-expo),
    box-shadow 0.48s var(--p-expo),
    border-color 0.48s var(--p-expo) !important;
  will-change: transform, box-shadow !important;
}
.card-3d:hover {
  transform: translateY(-10px) scale(1.018) rotateX(1.5deg) !important;
  box-shadow: var(--p-card-shadow-h) !important;
  border-color: rgba(79,70,229,0.16) !important;
}

/* card-frost — feature/info cards glass look */
.card-frost {
  background: rgba(255,255,255,0.88) !important;
  backdrop-filter: blur(22px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(190%) !important;
  border: 1px solid rgba(226,232,247,0.80) !important;
  box-shadow: var(--p-card-shadow) !important;
  border-radius: var(--p-r-xl) !important;
  transition: var(--p-t-slow) !important;
  will-change: transform, box-shadow !important;
  position: relative !important;
  overflow: hidden !important;
}
.card-frost::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.10) 40%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}
.card-frost:hover {
  transform: translateY(-8px) scale(1.015) !important;
  box-shadow: var(--p-card-shadow-h) !important;
  border-color: rgba(79,70,229,0.18) !important;
  background: rgba(255,255,255,0.92) !important;
}

/* card-glow — glow effect */
.card-glow {
  position: relative !important;
}
.card-glow::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--p-grad);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.40s var(--p-expo);
  filter: blur(16px);
}
.card-glow:hover::after {
  opacity: 0.22;
}

/* Standard white cards (product listings) */
.rounded-2xl.bg-white.shadow,
.rounded-3xl.bg-white,
.rounded-2xl.overflow-hidden,
.rounded-xl.bg-white {
  background: #ffffff !important;
  border: 1px solid rgba(226,232,247,0.75) !important;
  box-shadow: var(--p-card-shadow) !important;
  border-radius: var(--p-r-xl) !important;
  transition:
    transform 0.44s var(--p-expo),
    box-shadow 0.44s var(--p-expo),
    border-color 0.44s var(--p-expo) !important;
  will-change: transform, box-shadow !important;
  position: relative !important;
}
.rounded-2xl.bg-white.shadow::before,
.rounded-2xl.overflow-hidden::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.70) 0%,
    rgba(255,255,255,0) 100%);
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}
.rounded-2xl.bg-white.shadow:hover,
.rounded-3xl.bg-white:hover,
.rounded-2xl.overflow-hidden:hover,
.rounded-xl.bg-white:hover {
  box-shadow: var(--p-card-shadow-h) !important;
  border-color: rgba(79,70,229,0.14) !important;
  transform: translateY(-8px) scale(1.014) !important;
}

/* Product image zoom on hover */
.rounded-2xl.overflow-hidden img,
.rounded-3xl.overflow-hidden img,
.aspect-\[3\/4\] img,
.aspect-square img,
.card-3d img {
  transition: transform 0.60s var(--p-expo), filter 0.60s var(--p-expo) !important;
  will-change: transform, filter;
}
.rounded-2xl.overflow-hidden:hover img,
.rounded-3xl.overflow-hidden:hover img,
.card-3d:hover img,
.group:hover .group-hover\:scale-105,
.group:hover .group-hover\:scale-102 {
  transform: scale(1.09) !important;
  filter: saturate(1.12) contrast(1.04) brightness(1.02) !important;
}

/* hover-gradient-border — animated border */
.hover-gradient-border {
  position: relative !important;
  transition: var(--p-t-slow) !important;
}
.hover-gradient-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--p-grad);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.40s var(--p-expo);
}
.hover-gradient-border:hover::before {
  opacity: 1;
}
.hover-gradient-border:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--p-shadow-lg) !important;
}

/* Wishlist / quick-action round buttons on cards */
.rounded-full.bg-white.shadow,
.rounded-full.border.border-gray {
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: var(--p-shadow-sm) !important;
  border: 1px solid rgba(226,232,247,0.7) !important;
  transition: var(--p-t-base) !important;
}
.rounded-full.bg-white.shadow:hover,
.rounded-full.border.border-gray:hover {
  transform: scale(1.16) !important;
  box-shadow: var(--p-shadow-md), var(--p-glow-both) !important;
  border-color: rgba(79,70,229,0.25) !important;
}

/* ════════════════════════════════════════════════
   BEAUTIFUL CATEGORY CARDS
   ════════════════════════════════════════════════ */

/* Category card hover — the gradient bottom overlay intensifies */
.group.relative.h-\[500px\].rounded-3xl:hover
  .absolute.inset-0.bg-gradient-to-t.from-black\/70 {
  background: linear-gradient(to top,
    rgba(5,9,21,0.90) 0%,
    rgba(30,58,138,0.40) 55%,
    rgba(124,58,237,0.15) 80%,
    transparent 100%) !important;
}

/* Category card with the overlay on hover */
[class*="from-black/70"]:hover,
.group:hover [class*="from-black/70"] {
  background: linear-gradient(to top,
    rgba(5,9,21,0.92) 0%,
    rgba(30,58,138,0.42) 55%,
    transparent 90%) !important;
}

/* ════════════════════════════════════════════════
   PREMIUM OFFER BADGES
   ════════════════════════════════════════════════ */

/* Discount / SALE badge */
.bg-gradient-to-r.from-\[\#C9A84C\].to-\[\#F0D080\],
.bg-\[\#b8952a\] {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
  box-shadow: 0 2px 10px rgba(239,68,68,0.40), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
}

/* Top-left badge on product cards */
.absolute.top-3.left-3,
[class*="absolute top-3 left-3"] {
  box-shadow: 0 2px 10px rgba(0,0,0,0.25) !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
}

/* NEW badge */
.bg-emerald-500, .bg-green-500 {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
  box-shadow: 0 2px 10px rgba(16,185,129,0.40) !important;
}

/* SALE / red badge */
.bg-red-500, .bg-rose-500 {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
  box-shadow: 0 2px 10px rgba(239,68,68,0.40) !important;
}

/* Blue/Purple accent badge */
.rounded-full.bg-\[\#C9A84C\],
.rounded-full.bg-\[\#7C3AED\] {
  background: var(--p-grad) !important;
  box-shadow: 0 2px 12px rgba(79,70,229,0.45) !important;
  font-weight: 700 !important;
}

/* Flash sale timer chips */
.bg-\[\#1E3A8A\].text-white.rounded,
.bg-\[\#1E3A8A\].text-white.rounded-lg {
  background: var(--p-grad) !important;
  box-shadow: var(--p-shadow-sm), 0 0 12px rgba(79,70,229,0.30) !important;
  font-family: 'Poppins', monospace !important;
  font-weight: 700 !important;
}

/* ════════════════════════════════════════════════
   PRODUCT IMAGE PRESENTATION
   ════════════════════════════════════════════════ */

/* Main product image container on detail page */
.aspect-\[3\/4\].rounded-3xl {
  box-shadow: var(--p-shadow-2xl) !important;
  border: 1px solid rgba(226,232,247,0.95) !important;
  background: linear-gradient(150deg, #ffffff 0%, #EEF2FF 50%, #F5F3FF 100%) !important;
  overflow: hidden !important;
}

/* Thumbnail images */
.aspect-\[3\/4\].rounded-2xl {
  box-shadow: var(--p-shadow-xs) !important;
  transition: var(--p-t-base) !important;
  border: 1px solid rgba(226,232,247,0.8) !important;
}
.aspect-\[3\/4\].rounded-2xl:hover {
  transform: translateY(-4px) scale(1.03) !important;
  box-shadow: var(--p-shadow-md) !important;
  border-color: rgba(79,70,229,0.20) !important;
}

/* Image color boost */
.aspect-\[3\/4\] img,
.object-cover {
  filter: saturate(1.06) contrast(1.03);
  transition: filter 0.55s var(--p-expo) !important;
  image-rendering: -webkit-optimize-contrast;
}
.aspect-\[3\/4\]:hover img,
.group:hover .object-cover {
  filter: saturate(1.14) contrast(1.06) brightness(1.03) !important;
}

/* ════════════════════════════════════════════════
   ELEGANT SECTION HEADINGS
   ════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  text-rendering: optimizeLegibility;
}

.text-3xl, .text-4xl, .text-5xl {
  letter-spacing: -0.025em;
}

/* Gradient heading accent */
.text-gradient-gold,
h2[class*="text-4xl"],
h2[class*="text-3xl"] {
  background: linear-gradient(135deg, #1E3A8A 0%, #4F46E5 50%, #7C3AED 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Navy headings */
.text-\[\#1E3A8A\],
h1.text-\[\#1E3A8A\],
h2.text-\[\#1E3A8A\] {
  color: #1E3A8A !important;
  font-weight: 700 !important;
}

/* Gold→blue accent text */
.text-\[\#C9A84C\],
[class*="C9A84C"]:not(button):not(a):not(input):not(select) {
  color: #4F46E5 !important;
  -webkit-text-fill-color: initial !important;
}

/* Section underline accent */
.section-heading-line,
h2 + .w-16,
h2 + .h-1,
h3 + .w-12 {
  background: var(--p-grad) !important;
  border-radius: 2px !important;
  height: 3px !important;
  box-shadow: 0 2px 8px rgba(79,70,229,0.35) !important;
}

/* "View All" / CTA text links */
a.text-\[\#1E3A8A\],
button.text-\[\#1E3A8A\] {
  color: #4F46E5 !important;
  font-weight: 600 !important;
  transition: var(--p-t-fast) !important;
}
a.text-\[\#1E3A8A\]:hover,
button.text-\[\#1E3A8A\]:hover {
  color: #6D28D9 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Poppins for display text */
.font-playfair, h1.font-playfair, h2.font-playfair, h3.font-playfair {
  font-family: 'Poppins', sans-serif !important;
  letter-spacing: -0.025em;
}

/* ════════════════════════════════════════════════
   SECTION BACKGROUNDS
   ════════════════════════════════════════════════ */
.bg-\[\#F8F9FC\],
.bg-\[\#F8FAFC\] {
  background: linear-gradient(175deg,
    #F5F7FF 0%,
    #EEF2FF 40%,
    #F3F4FF 70%,
    #F5F7FF 100%) !important;
}

section.bg-white, .section-white {
  background: #ffffff !important;
}

/* Promo / info banner cards */
.rounded-2xl.bg-white.border.border-gray,
.rounded-2xl.border.border-gray-100 {
  border: 1px solid rgba(79,70,229,0.09) !important;
  box-shadow: var(--p-card-shadow) !important;
  transition: var(--p-t-base) !important;
}
.rounded-2xl.bg-white.border.border-gray:hover,
.rounded-2xl.border.border-gray-100:hover {
  border-color: rgba(79,70,229,0.20) !important;
  box-shadow: var(--p-card-shadow-h) !important;
  transform: translateY(-5px) !important;
}

/* Features row (Free Shipping / Returns / Secure) */
.rounded-2xl.bg-white.border,
.rounded-xl.bg-white.border {
  border: 1px solid rgba(79,70,229,0.09) !important;
  box-shadow: var(--p-shadow-xs) !important;
  transition: var(--p-t-base) !important;
}
.rounded-2xl.bg-white.border:hover,
.rounded-xl.bg-white.border:hover {
  border-color: rgba(79,70,229,0.22) !important;
  box-shadow: var(--p-shadow-md) !important;
  transform: translateY(-4px) !important;
}

/* Icon circles */
.rounded-full.bg-\[\#F8F9FC\],
.rounded-full.bg-blue-50,
.rounded-full.bg-\[\#F0F4FF\] {
  background: linear-gradient(135deg, #EEF2FF, #E0E7FF) !important;
  box-shadow: 0 2px 10px rgba(79,70,229,0.15) !important;
}

/* ════════════════════════════════════════════════
   DIVIDERS & BORDERS
   ════════════════════════════════════════════════ */
hr, .border-t, .divide-y > * + * {
  border-color: rgba(79,70,229,0.07) !important;
}

.border-\[\#C9A84C\], .border-b-\[\#C9A84C\] {
  border-color: rgba(79,70,229,0.28) !important;
}

/* Size selector active ring */
.border-\[\#C9A84C\] {
  border-color: #4F46E5 !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,0.20), 0 2px 8px rgba(79,70,229,0.20) !important;
}

/* ════════════════════════════════════════════════
   GLASSMORPHISM MODALS & OVERLAYS
   ════════════════════════════════════════════════ */
.fixed.inset-0.bg-black\/40,
.fixed.inset-0.bg-black\/50 {
  backdrop-filter: blur(10px) !important;
  background: rgba(5,9,21,0.45) !important;
}

.bg-white.rounded-2xl.shadow-2xl,
.bg-white.rounded-3xl.shadow-2xl {
  box-shadow: var(--p-shadow-2xl) !important;
  border: 1px solid rgba(226,232,247,0.9) !important;
  border-radius: var(--p-r-2xl) !important;
}

.fixed.inset-0.bg-black\/50.backdrop-blur-sm,
.fixed.inset-0.bg-black\/40.backdrop-blur-sm {
  backdrop-filter: blur(12px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
}

/* ════════════════════════════════════════════════
   FORM INPUTS
   ════════════════════════════════════════════════ */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="search"]),
select,
textarea {
  background: #ffffff !important;
  border: 1.5px solid rgba(79,70,229,0.14) !important;
  border-radius: var(--p-r-md) !important;
  transition: var(--p-t-base) !important;
  font-family: 'Inter', sans-serif !important;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="search"]):focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: rgba(79,70,229,0.42) !important;
  box-shadow:
    0 0 0 4px rgba(79,70,229,0.10),
    0 2px 10px rgba(0,0,0,0.04) !important;
}

/* Quantity controls */
.rounded-xl.border.border-gray-200,
.rounded-full.border.border-gray-200 {
  border: 1.5px solid rgba(79,70,229,0.12) !important;
  box-shadow: var(--p-shadow-xs) !important;
  transition: var(--p-t-base) !important;
}
.rounded-xl.border.border-gray-200:hover,
.rounded-full.border.border-gray-200:hover {
  border-color: rgba(79,70,229,0.32) !important;
  box-shadow: 0 4px 16px rgba(79,70,229,0.16) !important;
}

/* ════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════ */
footer,
.bg-\[\#0F172A\] {
  background: linear-gradient(160deg,
    #04071A 0%,
    #0A1230 30%,
    #0F1D3D 60%,
    #04071A 100%) !important;
  border-top: 1px solid rgba(79,70,229,0.16) !important;
}

footer a {
  transition: var(--p-t-fast) !important;
}
footer a:hover {
  color: #818CF8 !important;
}

/* ════════════════════════════════════════════════
   LOADING & SKELETONS
   ════════════════════════════════════════════════ */
.animate-pulse {
  background: linear-gradient(90deg,
    #EEF2FF 25%,
    #E0E7FF 50%,
    #EEF2FF 75%) !important;
  background-size: 300% 100% !important;
  animation: p-shimmer 2.0s ease-in-out infinite !important;
  border-radius: var(--p-r-sm) !important;
}

.animate-spin {
  border-color: rgba(79,70,229,0.18) !important;
  border-top-color: #4F46E5 !important;
}

/* ════════════════════════════════════════════════
   TOAST / ALERTS
   ════════════════════════════════════════════════ */
[role="alert"], [role="status"], .toast {
  box-shadow: var(--p-shadow-lg) !important;
  border-radius: var(--p-r-lg) !important;
  font-family: 'Inter', sans-serif !important;
}

/* ════════════════════════════════════════════════
   HOVER GLOWS — ICON BUTTONS
   ════════════════════════════════════════════════ */
button[aria-label*="wishlist"]:hover,
button[aria-label*="like"]:hover,
button[aria-label*="favorite"]:hover {
  color: #EF4444 !important;
  filter: drop-shadow(0 0 6px rgba(239,68,68,0.55));
}
button[aria-label*="cart"]:hover,
a[href="/cart"]:hover {
  color: #4F46E5 !important;
  filter: drop-shadow(0 0 6px rgba(79,70,229,0.50));
}

/* ════════════════════════════════════════════════
   BREADCRUMBS
   ════════════════════════════════════════════════ */
.text-gray-400 a:hover,
nav[aria-label="breadcrumb"] a:hover {
  color: #4F46E5 !important;
}

/* ════════════════════════════════════════════════
   SCROLL ANIMATIONS (progressive enhancement)
   ════════════════════════════════════════════════ */
@supports (animation-timeline: scroll()) {
  .grid > * {
    animation: p-fade-up 0.50s var(--p-expo) both;
    animation-timeline: view();
    animation-range: entry 0% entry 24%;
  }
}

/* Page entry */
#root > * {
  animation: p-fade-in 0.38s var(--p-ease) both;
}

/* ════════════════════════════════════════════════
   SCROLLBAR
   ════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #F5F7FF; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #818CF8, #4F46E5);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #6366F1, #3730A3);
}

/* ════════════════════════════════════════════════
   MOBILE REFINEMENTS
   ════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .card-3d:hover {
    transform: translateY(-5px) scale(1.008) !important;
  }
  .rounded-2xl.overflow-hidden:hover {
    transform: translateY(-4px) scale(1.008) !important;
  }
  .card-frost:hover {
    transform: translateY(-4px) scale(1.008) !important;
  }
}

/* ════════════════════════════════════════════════
   REDUCED MOTION
   ════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ════════════════════════════════════════════════
   PREMIUM ANIMATION ENGINE — JS-DRIVEN CLASSES
   Added by premium-anim.js
   ════════════════════════════════════════════════ */

/* ── LOADING SCREEN ──────────────────────────── */
#pm-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #050915 0%, #0D1B4A 50%, #2D1B69 100%);
  transition: opacity 0.45s cubic-bezier(0.16,1,0.3,1),
              transform 0.45s cubic-bezier(0.16,1,0.3,1);
}
#pm-loader.pm-loader-out {
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
}
.pm-loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  animation: pm-loader-enter 0.5s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes pm-loader-enter {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: none; }
}
.pm-loader-logo {
  animation: pm-logo-float 2s ease-in-out infinite;
  filter: drop-shadow(0 0 24px rgba(124,58,237,0.6));
}
@keyframes pm-logo-float {
  0%,100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-7px) scale(1.03); }
}
.pm-loader-bar {
  width: 160px;
  height: 3px;
  background: rgba(255,255,255,0.10);
  border-radius: 999px;
  overflow: hidden;
}
.pm-loader-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563EB, #7C3AED, #2563EB);
  background-size: 200% 100%;
  animation: pm-bar-slide 0.8s cubic-bezier(0.16,1,0.3,1) forwards,
             pm-shimmer 1.4s linear infinite;
}
@keyframes pm-bar-slide {
  from { width: 0; }
  to   { width: 100%; }
}
.pm-loader-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── PAGE TRANSITION OVERLAY ─────────────────── */
#pm-page-overlay {
  position: fixed;
  inset: 0;
  z-index: 98888;
  background: linear-gradient(145deg, #050915 0%, #0D1B4A 50%, #2D1B69 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.28s cubic-bezier(0.16,1,0.3,1);
}
#pm-page-overlay.pm-overlay-in {
  opacity: 1;
  pointer-events: all;
}
#pm-page-overlay.pm-overlay-arrive {
  opacity: 0.6;
  transition: none;
}

/* ── FLOATING BACKGROUND ORBS ────────────────── */
#pm-orbs {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.pm-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: pm-orb-drift ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes pm-orb-drift {
  0%   { transform: translate(0,   0)   scale(1.00); }
  33%  { transform: translate(30px,-20px) scale(1.06); }
  66%  { transform: translate(-20px,15px) scale(0.96); }
  100% { transform: translate(15px, 25px) scale(1.04); }
}

/* ── SCROLL REVEAL ───────────────────────────── */
.pm-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.62s cubic-bezier(0.16,1,0.3,1),
    transform 0.62s cubic-bezier(0.16,1,0.3,1);
  will-change: opacity, transform;
}
.pm-reveal.pm-visible {
  opacity: 1;
  transform: none;
}
/* Don't hide nav / fixed elements */
nav .pm-reveal,
header .pm-reveal,
.pm-reveal[class*="fixed"],
.pm-reveal[class*="sticky"] {
  opacity: 1 !important;
  transform: none !important;
}

/* ── BUTTON RIPPLE ───────────────────────────── */
.pm-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  transform: scale(0);
  animation: pm-ripple-out 0.55s cubic-bezier(0.16,1,0.3,1) forwards;
  pointer-events: none;
  z-index: 10;
}
@keyframes pm-ripple-out {
  to { transform: scale(1); opacity: 0; }
}

/* ── IMAGE SOFT ENTRANCE ─────────────────────── */
.pm-img-reveal {
  opacity: 0;
  transform: scale(0.97);
  filter: blur(4px);
  transition:
    opacity 0.55s cubic-bezier(0.16,1,0.3,1),
    transform 0.55s cubic-bezier(0.16,1,0.3,1),
    filter 0.55s cubic-bezier(0.16,1,0.3,1);
  will-change: opacity, transform, filter;
}
.pm-img-reveal.pm-img-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ── GLOW CURSOR ─────────────────────────────── */
#pm-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79,70,229,0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: 99998;
  opacity: 0;
  transition: opacity 0.3s, width 0.25s cubic-bezier(0.16,1,0.3,1),
              height 0.25s cubic-bezier(0.16,1,0.3,1),
              margin 0.25s cubic-bezier(0.16,1,0.3,1);
  will-change: transform;
  mix-blend-mode: multiply;
}
#pm-cursor.pm-cursor-visible { opacity: 1; }
#pm-cursor.pm-cursor-hover {
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  background: radial-gradient(circle, rgba(124,58,237,0.14) 0%, transparent 70%);
}
#pm-cursor.pm-cursor-click {
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  background: radial-gradient(circle, rgba(37,99,235,0.30) 0%, transparent 70%);
}

/* ── NAV SCROLL SHRINK ───────────────────────── */
nav.pm-nav-scrolled,
header.pm-nav-scrolled {
  box-shadow:
    0 1px 0 rgba(79,70,229,0.08),
    0 6px 32px rgba(30,58,138,0.10) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ── HEADINGS ACCENT ─────────────────────────── */
.pm-heading {
  position: relative;
}

/* ── TOAST ENTRANCE ──────────────────────────── */
.pm-toast-enter {
  animation: pm-toast-pop 0.45s cubic-bezier(0.175,0.885,0.32,1.275) both;
}
@keyframes pm-toast-pop {
  from { opacity: 0; transform: translateY(16px) scale(0.93); }
  to   { opacity: 1; transform: none; }
}

/* ── PREMIUM GLASS REFLECTION SHEEN ─────────── */
.rounded-2xl.bg-white.shadow::after,
.rounded-3xl.bg-white::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.45) 50%,
    transparent 60%
  );
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: left 0.6s cubic-bezier(0.16,1,0.3,1), opacity 0.3s;
}
.rounded-2xl.bg-white.shadow:hover::after,
.rounded-3xl.bg-white:hover::after {
  left: 120%;
  opacity: 1;
}

/* ── SOFT PULSE — PRICE TAG ──────────────────── */
[class*="text-2xl"][class*="font-bold"],
[class*="text-3xl"][class*="font-bold"] {
  animation: pm-price-pulse 3.5s ease-in-out infinite;
}
@keyframes pm-price-pulse {
  0%,100% { text-shadow: none; }
  50%      { text-shadow: 0 0 12px rgba(37,99,235,0.18); }
}

/* ── ICON FLOAT MICRO-INTERACTION ────────────── */
.rounded-full.bg-white.shadow:hover svg,
.rounded-full.border.border-gray:hover svg {
  animation: pm-icon-bounce 0.45s cubic-bezier(0.175,0.885,0.32,1.275);
}
@keyframes pm-icon-bounce {
  0%   { transform: scale(1) rotate(0deg); }
  40%  { transform: scale(1.28) rotate(-8deg); }
  70%  { transform: scale(0.92) rotate(4deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ── STAGGERED FADE-IN KEYFRAME (used by CSS grid) ── */
@keyframes pm-stagger-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* ── PREMIUM GLOW — ACTIVE NAV LINK ─────────── */
nav a.active,
nav a[aria-current="page"] {
  color: #4F46E5 !important;
  text-shadow: 0 0 12px rgba(79,70,229,0.35);
}

/* ── SECTION ENTRANCE SHIMMER LINE ──────────── */
@keyframes pm-line-enter {
  from { width: 0; opacity: 0; }
  to   { width: 64px; opacity: 1; }
}
h2 + .w-16.h-1,
h2 + div > .w-16.h-1 {
  animation: pm-line-enter 0.6s 0.3s cubic-bezier(0.16,1,0.3,1) both;
}

/* ── PRODUCT DETAIL — IMAGE GLOW PULSE ───────── */
.aspect-\[3\/4\].rounded-3xl {
  animation: pm-img-glow 4s ease-in-out infinite;
}
@keyframes pm-img-glow {
  0%,100% { box-shadow: var(--p-shadow-2xl); }
  50%     { box-shadow: var(--p-shadow-2xl), 0 0 60px rgba(79,70,229,0.12); }
}

/* ── PREMIUM BADGE ENTRANCE ──────────────────── */
.absolute.top-3.left-3 {
  animation: pm-badge-drop 0.5s cubic-bezier(0.175,0.885,0.32,1.275) both;
}
@keyframes pm-badge-drop {
  from { opacity: 0; transform: translateY(-8px) scale(0.8); }
  to   { opacity: 1; transform: none; }
}

/* ── SCROLL-DRIVEN (where supported) ────────── */
@supports (animation-timeline: scroll()) {
  .pm-reveal {
    animation: pm-stagger-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 28%;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── MOBILE: reduce tilt / parallax intensity ── */
@media (max-width: 768px) {
  .pm-img-reveal { transition-duration: 0.38s; }
  .pm-reveal { transition-duration: 0.45s; }
  #pm-cursor { display: none !important; }
}

/* ── REDUCED MOTION OVERRIDE ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pm-reveal,
  .pm-img-reveal,
  .pm-orb,
  .pm-loader-logo,
  .pm-loader-fill,
  #pm-cursor { animation: none !important; transition-duration: 0.01ms !important; }
  .pm-reveal  { opacity: 1 !important; transform: none !important; }
  .pm-img-reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
}