/* ============================================================
   GoGiftings — Premium 3D Animation System  v4.0
   Pure visual enhancement layer. Zero layout or commerce changes.
   ============================================================ */

/* ── 0. Design Tokens ──────────────────────────────────────── */
:root {
  --gg-ease-premium:   cubic-bezier(.22,1,.36,1);
  --gg-ease-smooth:    cubic-bezier(.16,.84,.44,1);
  --gg-ease-bounce:    cubic-bezier(.34,1.56,.64,1);
  --gg-ease-out:       cubic-bezier(.16,1,.3,1);
  --gg-t-xs:   120ms;
  --gg-t-sm:   220ms;
  --gg-t-md:   420ms;
  --gg-t-lg:   700ms;
  --gg-t-xl:   1000ms;
  --gg-pink:      #f62780;
  --gg-plum:      #5a1a93;
  --gg-rose:      #eb4d97;
  --gg-lavender:  #b45cff;
  --gg-gold:      #ffd166;
  --gg-cream:     #fff7fa;
  --gg-grad-primary:  linear-gradient(135deg, #f62780 0%, #9b30c8 52%, #5a1a93 100%);
  --gg-grad-shimmer:  linear-gradient(115deg, transparent 0%, rgba(255,255,255,.6) 45%, transparent 72%);
  --gg-grad-card:     linear-gradient(145deg, rgba(255,255,255,.97) 0%, rgba(255,247,252,.90) 100%);
  --gg-grad-glass:    linear-gradient(135deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.56) 100%);
  --gg-shadow-xs:   0 2px 8px rgba(90,26,147,.07);
  --gg-shadow-sm:   0 6px 20px rgba(90,26,147,.10);
  --gg-shadow-md:   0 14px 40px rgba(90,26,147,.14), 0 2px 8px rgba(246,39,128,.08);
  --gg-shadow-lg:   0 24px 64px rgba(90,26,147,.18), 0 8px 20px rgba(246,39,128,.12);
  --gg-shadow-xl:   0 40px 100px rgba(90,26,147,.22), 0 16px 40px rgba(246,39,128,.16);
  --gg-shadow-glow: 0 0 0 4px rgba(246,39,128,.14), 0 14px 40px rgba(246,39,128,.22);
  --gg-shadow-inset: inset 0 1px 0 rgba(255,255,255,.72), inset 0 -1px 0 rgba(90,26,147,.06);
  --gg-glass-bg:     rgba(255,255,255,.84);
  --gg-glass-border: rgba(255,255,255,.72);
  --gg-r-sm:   12px;
  --gg-r-md:   18px;
  --gg-r-lg:   24px;
  --gg-r-xl:   32px;
  --gg-r-pill: 999px;
  --gg-perspective: 1100px;
  --gg-rot-x: 0deg;
  --gg-rot-y: 0deg;
  --gg-lift:  0px;
  --gg-mx: 0px;
  --gg-my: 0px;
  --gg-px: 0px;
  --gg-py: 0px;
  --gg-stagger: 0ms;
}

/* ── 1. Global Ambient ─────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  background-image:
    radial-gradient(circle at 6%  8%, rgba(246,39,128,.06), transparent 22%),
    radial-gradient(circle at 92% 6%, rgba(180,92,255,.07), transparent 26%),
    radial-gradient(circle at 50% 98%, rgba(255,211,110,.07), transparent 28%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(128deg, rgba(255,255,255,.16), transparent 34%, rgba(255,221,242,.10));
}

/* ── 2. Falling Petals ────────────────────────────────────── */
.gg-petals-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }

.gg-petal {
  position: absolute;
  border-radius: 50% 0 50% 0;
  opacity: 0;
  will-change: transform, opacity;
  animation: ggPetalFall linear infinite;
}

@keyframes ggPetalFall {
  0%   { opacity: 0;   transform: translateY(-20px) rotate(0deg) scale(.8); }
  8%   { opacity: .50; }
  80%  { opacity: .28; }
  100% { opacity: 0;   transform: translateY(100vh) rotate(720deg) translateX(55px) scale(1.05); }
}

/* ── 3. Preloader ─────────────────────────────────────────── */
.site-preloader { background: linear-gradient(145deg,#fff 0%,#fdf0f8 50%,#f5e8ff 100%) !important; }
.preloader-petal { background: linear-gradient(135deg,#f62780,#b45cff) !important; box-shadow: 0 8px 24px rgba(246,39,128,.28) !important; }
.preloader-logo-mark { background: var(--gg-grad-primary) !important; box-shadow: 0 12px 32px rgba(246,39,128,.35) !important; }
.preloader-progress span { background: var(--gg-grad-primary) !important; box-shadow: 0 0 12px rgba(246,39,128,.4) !important; }

/* ── 4. Header & Nav ──────────────────────────────────────── */
.header-main {
  backdrop-filter: blur(22px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.4) !important;
  background: rgba(255,255,255,.88) !important;
  border-bottom: 1px solid rgba(255,255,255,.72) !important;
  box-shadow: 0 4px 28px rgba(90,26,147,.08), 0 1px 0 rgba(255,255,255,.72) !important;
  transition: box-shadow var(--gg-t-md) var(--gg-ease-smooth), background var(--gg-t-md) !important;
}
.header-main.gg-scrolled {
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 8px 40px rgba(90,26,147,.14) !important;
}

.logo-mark {
  background: var(--gg-grad-primary) !important;
  box-shadow: 0 8px 22px rgba(246,39,128,.30) !important;
  border-radius: 14px !important;
  transition: transform var(--gg-t-md) var(--gg-ease-bounce), box-shadow var(--gg-t-md) !important;
}
.logo:hover .logo-mark { transform: rotate(-8deg) scale(1.08) !important; box-shadow: 0 14px 32px rgba(246,39,128,.42) !important; }

.nav-pill {
  position: relative;
  transition: color var(--gg-t-sm), transform var(--gg-t-sm) var(--gg-ease-bounce) !important;
}
.nav-pill::after {
  content: "";
  position: absolute;
  left: 14%; right: 14%;
  bottom: -4px;
  height: 2px;
  border-radius: var(--gg-r-pill);
  background: var(--gg-grad-primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--gg-t-md) var(--gg-ease-premium);
}
.nav-pill:hover::after, .nav-pill.active::after { transform: scaleX(1); }
.nav-pill:hover { transform: translateY(-1px) !important; }

.search-modern { transition: box-shadow var(--gg-t-sm), border-color var(--gg-t-sm) !important; }
.search-modern:focus-within { box-shadow: var(--gg-shadow-glow) !important; border-color: rgba(246,39,128,.4) !important; }

.icon-btn {
  border-radius: 14px !important;
  transition: transform var(--gg-t-md) var(--gg-ease-bounce), box-shadow var(--gg-t-md), background var(--gg-t-sm) !important;
}
.icon-btn:hover { transform: translateY(-3px) scale(1.06) !important; box-shadow: var(--gg-shadow-md) !important; }

.icon-btn .badge { transition: transform var(--gg-t-sm) var(--gg-ease-bounce) !important; }
.icon-btn.gg-cart-bounce .badge { animation: ggBounce 500ms var(--gg-ease-bounce) !important; }

.topbar { background: var(--gg-grad-primary) !important; box-shadow: 0 2px 12px rgba(90,26,147,.18) !important; }

/* ── 5. Buttons ───────────────────────────────────────────── */
.btn, .quick-add, .icon-btn, [data-addon-open] {
  transition: transform var(--gg-t-md) var(--gg-ease-bounce), box-shadow var(--gg-t-md), filter var(--gg-t-sm), background var(--gg-t-md) !important;
}

.btn-primary, .quick-add, .add-cart-premium-btn, .buy-now-theme-btn, .final-premium-cta {
  position: relative !important;
  overflow: hidden !important;
  border-radius: var(--gg-r-pill) !important;
  box-shadow: 0 12px 30px rgba(246,39,128,.24), var(--gg-shadow-inset) !important;
}
.btn-primary::before, .quick-add::before, .add-cart-premium-btn::before, .buy-now-theme-btn::before {
  content: "";
  position: absolute;
  inset: -80% -20%;
  background: var(--gg-grad-shimmer);
  transform: translateX(-130%) rotate(10deg);
  transition: transform 900ms var(--gg-ease-premium);
  pointer-events: none;
  z-index: 1;
}
.btn-primary:hover::before, .quick-add:hover::before,
.add-cart-premium-btn:hover::before, .buy-now-theme-btn:hover::before { transform: translateX(130%) rotate(10deg); }
.btn-primary:hover, .quick-add:hover { transform: translateY(-3px) scale(1.025) !important; box-shadow: 0 20px 50px rgba(246,39,128,.36) !important; }
.btn-primary:active, .quick-add:active { transform: scale(.97) !important; }

.btn-secondary {
  border: 1.5px solid rgba(246,39,128,.35) !important;
  transition: transform var(--gg-t-md) var(--gg-ease-bounce), box-shadow var(--gg-t-md), border-color var(--gg-t-sm), background var(--gg-t-sm) !important;
}
.btn-secondary:hover { border-color: rgba(246,39,128,.7) !important; background: rgba(246,39,128,.06) !important; transform: translateY(-2px) !important; box-shadow: var(--gg-shadow-sm) !important; }

.gg-magnetic { will-change: transform; transform: translate3d(var(--gg-mx), var(--gg-my), 0) !important; }

/* ── 6. Hero ──────────────────────────────────────────────── */
.hero-card-image {
  overflow: hidden !important;
  box-shadow: var(--gg-shadow-xl) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
}
.hero-card-image::after {
  content: "";
  position: absolute;
  inset: -40% -20%;
  background:
    radial-gradient(circle at 18% 40%, rgba(246,39,128,.18), transparent 32%),
    radial-gradient(circle at 82% 20%, rgba(90,26,147,.14), transparent 28%);
  pointer-events: none;
  z-index: 0;
  opacity: .7;
  transition: opacity var(--gg-t-md);
}
.hero-card-image:hover::after { opacity: 1; }

.hero-banner-photo, .gg-butterfly-hero-image {
  animation: ggHeroFloat 7s var(--gg-ease-smooth) infinite !important;
  will-change: transform;
}

.hero-image-side::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 28% 26%, rgba(255,255,255,.18) 0%, transparent 14%),
    radial-gradient(circle at 72% 74%, rgba(255,255,255,.12) 0%, transparent 12%);
  pointer-events: none;
  z-index: 2;
  animation: ggSparkleShift 5s ease-in-out infinite alternate;
}
@keyframes ggSparkleShift { from { opacity: .5; } to { opacity: 1; } }

.hero-copy-image .hero-tagline { animation: ggRevealUp var(--gg-t-lg) var(--gg-ease-premium) both; }
.hero-copy-image h1            { animation: ggRevealUp var(--gg-t-lg) var(--gg-ease-premium) 60ms both; }
.hero-copy-image .hero-desc    { animation: ggRevealUp var(--gg-t-lg) var(--gg-ease-premium) 140ms both; }
.hero-copy-image .hero-trust-badges { animation: ggRevealUp var(--gg-t-lg) var(--gg-ease-premium) 220ms both; }
.hero-copy-image .cta-row      { animation: ggRevealUp var(--gg-t-lg) var(--gg-ease-premium) 300ms both; }

.hero-slider-arrow {
  transition: transform var(--gg-t-md) var(--gg-ease-bounce), box-shadow var(--gg-t-md), background var(--gg-t-sm) !important;
}
.hero-slider-arrow:hover { transform: translateY(-50%) scale(1.12) !important; box-shadow: var(--gg-shadow-md) !important; }

/* ── 7. Product Cards ─────────────────────────────────────── */
.product-card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: var(--gg-r-lg) !important;
  background: var(--gg-grad-card) !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  box-shadow: var(--gg-shadow-sm) !important;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, box-shadow;
  transition: transform var(--gg-t-md) var(--gg-ease-premium), box-shadow var(--gg-t-md), border-color var(--gg-t-sm) !important;
}

.product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.52) 0%, transparent 30%, rgba(255,255,255,.14) 62%, rgba(255,255,255,.44) 100%);
  opacity: 0;
  transition: opacity var(--gg-t-md);
  pointer-events: none;
  z-index: 2;
}

.product-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.88) 40%, rgba(255,255,255,.88) 60%, transparent);
  border-radius: var(--gg-r-lg) var(--gg-r-lg) 0 0;
  pointer-events: none;
  z-index: 3;
}

.product-card:hover {
  box-shadow: var(--gg-shadow-lg) !important;
  border-color: rgba(246,39,128,.22) !important;
  transform: translateY(-8px) perspective(var(--gg-perspective)) rotateX(var(--gg-rot-x)) rotateY(var(--gg-rot-y)) !important;
}
.product-card:hover::before { opacity: 1; }

.thumb-wrap, .product-thumb { overflow: hidden; border-radius: calc(var(--gg-r-lg) - 6px); }
.product-card .thumb-wrap img,
.product-card .product-thumb img,
.product-card .photo-fit {
  transition: transform var(--gg-t-lg) var(--gg-ease-smooth) !important;
  will-change: transform;
}
.product-card:hover .thumb-wrap img,
.product-card:hover .photo-fit { transform: scale(1.08) translateY(-3px) !important; }

.tag, .sale-badge, .product-card .tag, .badge-label {
  border-radius: var(--gg-r-pill) !important;
  box-shadow: 0 6px 18px rgba(246,39,128,.22) !important;
  animation: ggBadgePulse 3s var(--gg-ease-smooth) infinite !important;
}
.quick-add { border-radius: var(--gg-r-pill) !important; overflow: hidden !important; position: relative !important; }

.wishlist-btn, [data-wishlist], .wish-btn {
  transition: transform var(--gg-t-sm) var(--gg-ease-bounce), color var(--gg-t-sm), filter var(--gg-t-sm) !important;
}
.wishlist-btn:hover, [data-wishlist]:hover { transform: scale(1.28) !important; filter: drop-shadow(0 4px 10px rgba(246,39,128,.40)) !important; }

.product-row .product-card:nth-child(1) { --gg-stagger: 0ms; }
.product-row .product-card:nth-child(2) { --gg-stagger: 55ms; }
.product-row .product-card:nth-child(3) { --gg-stagger: 110ms; }
.product-row .product-card:nth-child(4) { --gg-stagger: 165ms; }
.product-row .product-card:nth-child(5) { --gg-stagger: 220ms; }
.product-row .product-card:nth-child(6) { --gg-stagger: 275ms; }
.product-row .product-card:nth-child(7) { --gg-stagger: 330ms; }
.product-row .product-card:nth-child(8) { --gg-stagger: 385ms; }

/* ── 8. Occasion / Category Cards ────────────────────────── */
.occasion-card, .category-card, .category-occasion-card, .side-category-card, .mini-card {
  border-radius: var(--gg-r-lg) !important;
  background: var(--gg-grad-card) !important;
  box-shadow: var(--gg-shadow-xs) !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  transition: transform var(--gg-t-md) var(--gg-ease-bounce), box-shadow var(--gg-t-md), border-color var(--gg-t-sm) !important;
  will-change: transform;
}
.occasion-card:hover, .category-card:hover, .category-occasion-card:hover,
.side-category-card:hover, .mini-card:hover {
  transform: translateY(-6px) scale(1.025) !important;
  box-shadow: var(--gg-shadow-md) !important;
  border-color: rgba(246,39,128,.3) !important;
}
.oc-ico, .side-category-icon {
  transition: transform var(--gg-t-md) var(--gg-ease-bounce), filter var(--gg-t-md) !important;
}
.occasion-card:hover .oc-ico, .side-category-card:hover .side-category-icon {
  transform: translateY(-4px) scale(1.12) !important;
  filter: drop-shadow(0 6px 12px rgba(246,39,128,.30)) !important;
}

/* ── 9. Banner Cards ──────────────────────────────────────── */
.banner {
  border-radius: var(--gg-r-lg) !important;
  box-shadow: var(--gg-shadow-sm) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  overflow: hidden !important;
  transition: transform var(--gg-t-md) var(--gg-ease-premium), box-shadow var(--gg-t-md), border-color var(--gg-t-sm) !important;
}
.banner:hover { transform: translateY(-5px) !important; box-shadow: var(--gg-shadow-lg) !important; }

/* ── 10. Why / Stat Mini Cards ───────────────────────────── */
.why-mini, .stat-item {
  border-radius: var(--gg-r-md) !important;
  background: linear-gradient(145deg,#fff,#fffafc) !important;
  box-shadow: var(--gg-shadow-xs) !important;
  border: 1px solid rgba(255,255,255,.88) !important;
  transition: transform var(--gg-t-md) var(--gg-ease-bounce), box-shadow var(--gg-t-md), border-color var(--gg-t-sm) !important;
}
.why-mini:hover, .stat-item:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: var(--gg-shadow-md) !important;
  border-color: rgba(246,39,128,.22) !important;
}

/* ── 11. Section Heads ────────────────────────────────────── */
.section-head h2 {
  background: linear-gradient(135deg, #1a0a2e, #572a72);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-head .eyebrow, .eyebrow { color: var(--gg-pink) !important; font-weight: 800 !important; letter-spacing: .14em !important; }

/* ── 12. Reveal Animations ───────────────────────────────── */
.gg-reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(.97);
  filter: blur(6px);
  transition: opacity var(--gg-t-lg) var(--gg-ease-premium) var(--gg-stagger), transform var(--gg-t-lg) var(--gg-ease-premium) var(--gg-stagger), filter 600ms var(--gg-ease-smooth) var(--gg-stagger);
}
.gg-reveal.is-visible { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0); }

.gg-reveal-left { opacity: 0; transform: translate3d(-32px, 0, 0); transition: opacity var(--gg-t-lg) var(--gg-ease-premium) var(--gg-stagger), transform var(--gg-t-lg) var(--gg-ease-premium) var(--gg-stagger); }
.gg-reveal-left.is-visible { opacity: 1; transform: translate3d(0,0,0); }
.gg-reveal-right { opacity: 0; transform: translate3d(32px, 0, 0); transition: opacity var(--gg-t-lg) var(--gg-ease-premium) var(--gg-stagger), transform var(--gg-t-lg) var(--gg-ease-premium) var(--gg-stagger); }
.gg-reveal-right.is-visible { opacity: 1; transform: translate3d(0,0,0); }

/* ── 13. 3D Card Tilt ────────────────────────────────────── */
.gg-tilt {
  will-change: transform;
  transform: perspective(var(--gg-perspective)) rotateX(var(--gg-rot-x)) rotateY(var(--gg-rot-y)) translateY(var(--gg-lift)) !important;
}
.gg-tilt:hover { --gg-lift: -6px; }

/* ── 14. Skeleton Shimmer ────────────────────────────────── */
.gg-shimmer { position: relative !important; overflow: hidden !important; background: #f3ecf7 !important; color: transparent !important; }
.gg-shimmer::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.72) 45%, rgba(255,255,255,.72) 55%, transparent 100%);
  background-size: 300% 100%;
  animation: ggShimmer 1.7s linear infinite;
}

/* ── 15. Cart & Drawer ────────────────────────────────────── */
.addon-drawer, .product-drawer-panel, [class*="drawer-panel"] {
  transition: transform var(--gg-t-lg) var(--gg-ease-premium), opacity var(--gg-t-lg) var(--gg-ease-smooth) !important;
}
.addon-option, .drawer-item, .cart-item {
  border-radius: var(--gg-r-md) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  background: var(--gg-grad-card) !important;
  box-shadow: var(--gg-shadow-xs) !important;
  transition: transform var(--gg-t-md) var(--gg-ease-premium), box-shadow var(--gg-t-md), opacity var(--gg-t-md) !important;
}
.addon-option:hover, .drawer-item:hover { transform: translateY(-3px) !important; box-shadow: var(--gg-shadow-md) !important; }
.addon-option.is-selected, .addon-option[aria-pressed="true"] {
  border-color: rgba(246,39,128,.4) !important;
  box-shadow: var(--gg-shadow-glow) !important;
  transform: translateY(-4px) !important;
}

.gg-cart-pop { animation: ggCartPop 560ms var(--gg-ease-bounce) !important; }
.gg-added-flash { animation: ggAddedFlash 900ms var(--gg-ease-premium) !important; }

.qty-btn, [class*="qty-"] {
  transition: transform var(--gg-t-sm) var(--gg-ease-bounce), background var(--gg-t-sm) !important;
}
.qty-btn:hover { transform: scale(1.15) !important; }
.qty-btn:active { transform: scale(.92) !important; }

/* ── 16. Checkout & Forms ────────────────────────────────── */
.checkout-card, .summary-card, .form-card {
  border-radius: var(--gg-r-lg) !important;
  background: var(--gg-glass-bg) !important;
  backdrop-filter: blur(14px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  box-shadow: var(--gg-shadow-sm) !important;
  transition: box-shadow var(--gg-t-md) !important;
}
.checkout-card:hover { box-shadow: var(--gg-shadow-md) !important; }

.payment-method, .payment-option {
  border-radius: var(--gg-r-md) !important;
  border: 1.5px solid rgba(200,180,220,.35) !important;
  transition: transform var(--gg-t-md) var(--gg-ease-bounce), box-shadow var(--gg-t-md), border-color var(--gg-t-sm) !important;
}
.payment-method:hover { transform: translateY(-2px) !important; }
.payment-method.active, .payment-method.selected { border-color: rgba(246,39,128,.5) !important; box-shadow: var(--gg-shadow-glow) !important; transform: translateY(-3px) !important; }

.address-card {
  border-radius: var(--gg-r-lg) !important;
  border: 1.5px solid rgba(200,180,220,.3) !important;
  background: var(--gg-grad-card) !important;
  transition: transform var(--gg-t-md) var(--gg-ease-bounce), box-shadow var(--gg-t-md), border-color var(--gg-t-sm) !important;
}
.address-card:hover { transform: translateY(-3px) !important; }
.address-card.active, .address-card.selected { border-color: rgba(246,39,128,.45) !important; box-shadow: var(--gg-shadow-glow) !important; transform: translateY(-4px) !important; }

input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], input[type="date"],
input[type="search"], select, textarea {
  border-radius: var(--gg-r-sm) !important;
  border: 1.5px solid rgba(200,180,220,.45) !important;
  transition: border-color var(--gg-t-sm), box-shadow var(--gg-t-sm), background var(--gg-t-sm), transform var(--gg-t-sm) var(--gg-ease-bounce) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: rgba(246,39,128,.55) !important;
  box-shadow: 0 0 0 4px rgba(246,39,128,.12), 0 8px 22px rgba(90,26,147,.08) !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}

/* ── 17. Product Detail ───────────────────────────────────── */
.main-visual, .visual-wrap, .product-gallery {
  border-radius: var(--gg-r-xl) !important;
  box-shadow: var(--gg-shadow-lg) !important;
  overflow: hidden !important;
  transition: box-shadow var(--gg-t-md) !important;
}
.main-visual:hover { box-shadow: var(--gg-shadow-xl) !important; }
.main-visual img { transition: transform var(--gg-t-lg) var(--gg-ease-smooth) !important; }
.main-visual:hover img { transform: scale(1.04) !important; }

.gallery-thumb {
  border-radius: var(--gg-r-sm) !important;
  overflow: hidden !important;
  border: 2px solid transparent !important;
  transition: transform var(--gg-t-md) var(--gg-ease-bounce), border-color var(--gg-t-sm), box-shadow var(--gg-t-sm) !important;
  cursor: pointer;
}
.gallery-thumb:hover, .gallery-thumb.active { transform: scale(1.07) !important; border-color: rgba(246,39,128,.5) !important; box-shadow: var(--gg-shadow-sm) !important; }

.variant-card {
  border-radius: var(--gg-r-md) !important;
  border: 1.5px solid rgba(200,180,220,.3) !important;
  background: var(--gg-grad-card) !important;
  transition: transform var(--gg-t-md) var(--gg-ease-bounce), box-shadow var(--gg-t-md), border-color var(--gg-t-sm) !important;
}
.variant-card:hover { transform: translateY(-3px) !important; }
.variant-card.active, .variant-card.selected { border-color: rgba(246,39,128,.5) !important; box-shadow: var(--gg-shadow-glow) !important; transform: translateY(-4px) !important; }

.badge-pill, .trust-badge, .feature-badge {
  border-radius: var(--gg-r-pill) !important;
  background: var(--gg-glass-bg) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  box-shadow: var(--gg-shadow-xs) !important;
  transition: transform var(--gg-t-md) var(--gg-ease-bounce) !important;
}

/* ── 18. AI Banner ────────────────────────────────────────── */
.ai-mini-banner { position: relative; overflow: hidden; }
.ai-mini-banner::before {
  content: "";
  position: absolute; inset: -50% -20%;
  background: var(--gg-grad-shimmer);
  transform: translateX(-150%) rotate(12deg);
  transition: transform 1.2s var(--gg-ease-premium);
  pointer-events: none; z-index: 1; opacity: .55;
}
.ai-mini-banner:hover::before { transform: translateX(150%) rotate(12deg); }

/* ── 19. Footer ───────────────────────────────────────────── */
.premium-footer, .site-footer { background: linear-gradient(180deg,#fff 0%,#fbf2f9 50%,#f1e4ef 100%) !important; border-top: 1px solid rgba(246,39,128,.10) !important; }
.footer-ribbon-card, .footer-newsletter { position: relative; overflow: hidden; border-radius: var(--gg-r-xl) !important; }
.footer-ribbon-card::before, .footer-newsletter::before {
  content: "";
  position: absolute; inset: -50% -10%;
  background: var(--gg-grad-shimmer);
  transform: translateX(-150%) rotate(14deg);
  transition: transform 1.4s var(--gg-ease-premium);
  pointer-events: none; z-index: 1; opacity: .35;
}
.footer-ribbon-card:hover::before, .footer-newsletter:hover::before { transform: translateX(150%) rotate(14deg); }
.footer-col a { transition: color var(--gg-t-sm), transform var(--gg-t-sm) var(--gg-ease-bounce) !important; }
.footer-col a:hover { color: var(--gg-pink) !important; transform: translateX(4px) !important; }

/* ── 20. Event / Plan / Blog / Account Cards ─────────────── */
.event-card, .subscription-card, .plan-card, .blog-card, .profile-card, .account-card, .order-card {
  border-radius: var(--gg-r-lg) !important;
  background: var(--gg-grad-card) !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  box-shadow: var(--gg-shadow-sm) !important;
  overflow: hidden !important;
  transition: transform var(--gg-t-md) var(--gg-ease-premium), box-shadow var(--gg-t-md), border-color var(--gg-t-sm) !important;
}
.event-card:hover, .subscription-card:hover, .plan-card:hover { transform: translateY(-8px) !important; box-shadow: var(--gg-shadow-lg) !important; }
.blog-card:hover, .profile-card:hover, .account-card:hover, .order-card:hover { transform: translateY(-5px) !important; box-shadow: var(--gg-shadow-md) !important; }
.blog-card img { transition: transform var(--gg-t-lg) var(--gg-ease-smooth) !important; }
.blog-card:hover img { transform: scale(1.06) !important; }

/* ── 21. Modals / Overlays ───────────────────────────────── */
.location-modal {
  border-radius: 30px 30px 0 0 !important;
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  box-shadow: 0 -24px 80px rgba(90,26,147,.18) !important;
}
.city-pill {
  border-radius: var(--gg-r-pill) !important;
  transition: transform var(--gg-t-md) var(--gg-ease-bounce), box-shadow var(--gg-t-md), border-color var(--gg-t-sm), background var(--gg-t-sm) !important;
}
.city-pill:hover { transform: translateY(-3px) scale(1.04) !important; box-shadow: var(--gg-shadow-sm) !important; }

/* ── 22. Sparkle Particles ───────────────────────────────── */
.gg-sparkle { position: fixed; border-radius: 50%; pointer-events: none; z-index: 99998; animation: ggSparkleFade .7s var(--gg-ease-out) forwards; }

/* ── 23. 2K / 4K Scaling ─────────────────────────────────── */
@media (min-width: 1600px) {
  .container { max-width: min(1560px, calc(100vw - 80px)) !important; }
  .product-card { border-radius: var(--gg-r-xl) !important; }
  .hero-card-image { min-height: 520px !important; }
}
@media (min-width: 2400px) {
  .container { max-width: min(2200px, calc(100vw - 120px)) !important; }
  :root { --gg-perspective: 1800px; }
}

/* ── 24. Mobile ───────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --gg-r-lg: 18px; --gg-r-xl: 24px; }
  .btn, .quick-add, .icon-btn { min-height: 44px !important; }
  .product-card:hover, .occasion-card:hover, .event-card:hover { transform: none !important; }
  .sticky-checkout, .checkout-actions, .cta-wide-sticky { position: sticky !important; bottom: 12px !important; z-index: 40 !important; box-shadow: var(--gg-shadow-lg) !important; }
  .hero-copy-image { padding: 24px 18px !important; }
  .checkout-card { padding: 18px !important; }
}
@media (max-width: 480px) {
  .hero-copy-image h1 { font-size: 28px !important; }
}

/* ── 25. Keyframes ────────────────────────────────────────── */
@keyframes ggHeroFloat { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-11px,0); } }
@keyframes ggRevealUp { from { opacity:0; transform:translateY(24px) scale(.97); filter:blur(6px); } to { opacity:1; transform:translateY(0) scale(1); filter:blur(0); } }
@keyframes ggBadgePulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.04); } }
@keyframes ggCartPop { 0% { transform:scale(1) rotate(0deg); } 35% { transform:scale(1.22) rotate(-6deg); } 65% { transform:scale(.96) rotate(3deg); } 100% { transform:scale(1) rotate(0deg); } }
@keyframes ggAddedFlash { 0% { box-shadow:var(--gg-shadow-sm); } 40% { box-shadow:0 0 0 8px rgba(246,39,128,.12),var(--gg-shadow-lg); } 100% { box-shadow:var(--gg-shadow-sm); } }
@keyframes ggShimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }
@keyframes ggBounce { 0% { transform:scale(1); } 40% { transform:scale(1.38) translateY(-4px); } 70% { transform:scale(.92); } 100% { transform:scale(1); } }
@keyframes ggSparkleFade { 0% { opacity:1; transform:scale(1) translateY(0); } 60% { opacity:.7; transform:scale(.65) translateY(-10px); } 100% { opacity:0; transform:scale(.2) translateY(-22px); } }

/* ── 26. Reduced Motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .gg-reveal, .gg-reveal-left, .gg-reveal-right { opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
  .gg-tilt, .gg-magnetic, .hero-banner-photo, .gg-butterfly-hero-image { transform:none !important; animation:none !important; }
  .hero-copy-image *, .hero-copy-image h1 { animation:none !important; opacity:1 !important; }
  .gg-petal { display:none !important; }
}