/* ============================================================
   LOVANDA SHOP — Main Stylesheet v2
   Palette: Lavender / Purple / Violet
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --lavender-50:  #f5f0ff;
  --lavender-100: #ede9fe;
  --lavender-200: #ddd6fe;
  --lavender-300: #c4b5fd;
  --lavender-400: #a78bfa;
  --lavender-500: #8b5cf6;
  --lavender-600: #7c3aed;
  --lavender-700: #6d28d9;
  --lavender-800: #5b21b6;
  --lavender-900: #4c1d95;
  --pink-light:   #fce7f3;
  --pink-mid:     #f9a8d4;
  --rose:         #e879f9;
  --white:        #ffffff;
  --text-dark:    #1e1b2e;
  --text-muted:   #6b6880;
  --surface:      #faf8ff;
  --shadow-sm:    0 2px 8px rgba(109,40,217,.08);
  --shadow-md:    0 8px 24px rgba(109,40,217,.15);
  --shadow-lg:    0 20px 60px rgba(109,40,217,.22);
  --shadow-glow:  0 0 30px rgba(139,92,246,.4);
  --radius-sm:    8px;
  --radius-md:    16px;
  --radius-lg:    24px;
  --radius-xl:    32px;
  --transition:   0.3s cubic-bezier(0.4,0,0.2,1);
  --transition-bounce: 0.45s cubic-bezier(0.34,1.56,0.64,1);
  --transition-spring: 0.6s cubic-bezier(0.16,1,0.3,1);
}

/* ── Reset & Base ──────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family:'Montserrat',sans-serif;
  background:var(--surface);
  color:var(--text-dark);
  overflow-x:hidden;
  line-height:1.6;
  cursor:none;
}
@media (pointer:coarse) { body { cursor:auto; } }
img { display:block; max-width:100%; }
a   { text-decoration:none; color:inherit; }
button { cursor:none; border:none; background:none; font-family:inherit; }
@media (pointer:coarse) { button { cursor:pointer; } }
ul { list-style:none; }
svg { display:inline-block; vertical-align:middle; flex-shrink:0; }

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--lavender-100); }
::-webkit-scrollbar-thumb {
  background:linear-gradient(180deg,var(--lavender-400),var(--rose));
  border-radius:99px;
}

/* ═══════════════════════════════════════════════════════════
   CUSTOM CURSOR
═══════════════════════════════════════════════════════════ */
.cursor {
  position:fixed;
  width:10px;
  height:10px;
  background:var(--lavender-600);
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .2s,height .2s,background .2s;
  mix-blend-mode:multiply;
}
.cursor-follower {
  position:fixed;
  width:36px;
  height:36px;
  border:2px solid var(--lavender-400);
  border-radius:50%;
  pointer-events:none;
  z-index:9998;
  transform:translate(-50%,-50%);
  transition:transform .12s ease, width .3s, height .3s, border-color .3s, opacity .3s;
  opacity:.6;
}
.cursor--hover .cursor           { width:18px; height:18px; background:var(--rose); }
.cursor--hover .cursor-follower  { width:52px; height:52px; border-color:var(--rose); opacity:.4; }
.cursor--click .cursor           { transform:translate(-50%,-50%) scale(.7); }
@media (pointer:coarse) { .cursor,.cursor-follower { display:none; } }

/* ═══════════════════════════════════════════════════════════
   PARTICLES
═══════════════════════════════════════════════════════════ */
#particles-canvas {
  position:fixed; inset:0;
  pointer-events:none; z-index:0; opacity:.55;
}

/* ═══════════════════════════════════════════════════════════
   SCROLL REVEAL CLASSES
═══════════════════════════════════════════════════════════ */
.reveal-fade, .reveal-up, .reveal-card {
  opacity:0;
  will-change:opacity,transform;
}
.reveal-fade  { animation:none; }
.reveal-up    { transform:translateY(32px); }
.reveal-card  { transform:translateY(24px) scale(.97); }

.reveal-delay-1 { transition-delay:.12s !important; }
.reveal-delay-2 { transition-delay:.24s !important; }
.reveal-delay-3 { transition-delay:.36s !important; }

.reveal-fade.is-visible,
.reveal-up.is-visible,
.reveal-card.is-visible {
  opacity:1;
  transform:translateY(0) scale(1);
  transition:opacity .7s var(--transition-spring),
             transform .7s var(--transition-spring);
}

/* ═══════════════════════════════════════════════════════════
   MAGNETIC BUTTON WRAPPER
═══════════════════════════════════════════════════════════ */
.magnetic { position:relative; }

/* ═══════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════ */
.header {
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid rgba(196,181,253,.3);
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--transition), background var(--transition);
  animation:headerSlideDown .6s var(--transition-spring) both;
}
.header.scrolled {
  box-shadow:var(--shadow-md);
  background:rgba(255,255,255,.95);
}
@keyframes headerSlideDown {
  from { transform:translateY(-100%); opacity:0; }
  to   { transform:translateY(0);     opacity:1; }
}

.header__inner {
  max-width:1280px; margin:0 auto; padding:0 24px;
  height:72px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}

/* Logo */
.header__logo {
  display:flex; align-items:center; gap:12px; flex-shrink:0;
}
.header__logo-img {
  height:44px; width:auto;
  filter:drop-shadow(0 2px 8px rgba(139,92,246,.3));
  transition:transform var(--transition-bounce), filter var(--transition);
}
.header__logo:hover .header__logo-img {
  transform:rotate(-8deg) scale(1.12);
  filter:drop-shadow(0 4px 16px rgba(139,92,246,.5));
}
.header__logo-text {
  font-family:'Playfair Display',serif;
  font-size:1.6rem; font-weight:700;
  background:linear-gradient(135deg,var(--lavender-600),var(--rose));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; letter-spacing:.03em;
  position:relative;
}
.header__logo-text::after {
  content:'';
  position:absolute; bottom:-2px; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--lavender-500),var(--rose));
  border-radius:99px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--transition-spring);
}
.header__logo:hover .header__logo-text::after { transform:scaleX(1); }

/* Nav */
.header__nav { display:flex; align-items:center; gap:4px; }
.nav__link {
  padding:8px 16px; border-radius:var(--radius-sm);
  font-size:.875rem; font-weight:500; color:var(--text-muted);
  transition:all var(--transition);
  position:relative; display:flex; align-items:center; gap:6px;
}
.nav__link::after {
  content:''; position:absolute; bottom:4px; left:50%;
  transform:translateX(-50%) scaleX(0);
  width:calc(100% - 32px); height:2px;
  background:linear-gradient(90deg,var(--lavender-500),var(--rose));
  border-radius:99px; transition:transform var(--transition);
}
.nav__link:hover { color:var(--lavender-700); background:var(--lavender-50); }
.nav__link:hover::after { transform:translateX(-50%) scaleX(1); }

/* Cart button */
.cart-btn {
  position:relative; display:flex; align-items:center; gap:8px;
  padding:10px 20px;
  background:linear-gradient(135deg,var(--lavender-500),var(--lavender-700));
  color:white; border-radius:var(--radius-md);
  font-size:.875rem; font-weight:600;
  box-shadow:0 4px 16px rgba(139,92,246,.35);
  transition:all var(--transition-bounce);
  white-space:nowrap; overflow:visible;
  isolation:isolate;
}
.cart-btn::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,var(--lavender-400),var(--rose));
  opacity:0; transition:opacity var(--transition);
  border-radius:var(--radius-md);
  z-index:-1;
}
.cart-btn:hover { transform:translateY(-3px) scale(1.04); box-shadow:0 8px 28px rgba(139,92,246,.55); }
.cart-btn:hover::before { opacity:1; }
.cart-btn:active { transform:scale(.96); }
.cart-btn__icon { transition:transform var(--transition-bounce); flex-shrink:0; }
.cart-btn:hover .cart-btn__icon { transform:rotate(-12deg) scale(1.1); }

.cart-btn__count {
  position:absolute; top:-8px; right:-8px;
  background:var(--rose); color:white;
  font-size:.7rem; font-weight:700;
  width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:2px solid white;
  transform:scale(0);
  transition:transform var(--transition-bounce);
  animation:none;
}
.cart-btn__count.visible  { transform:scale(1); }
.cart-btn__count.bump     { animation:countBump .35s var(--transition-bounce); }
@keyframes countBump {
  0%   { transform:scale(1); }
  50%  { transform:scale(1.6); }
  100% { transform:scale(1); }
}

/* ═══════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════ */
.hero {
  position:relative; overflow:hidden;
  padding:110px 24px 90px;
  background:linear-gradient(135deg,#f5f0ff 0%,#ede9fe 40%,#fce7f3 100%);
  text-align:center;
  isolation:isolate;
}

/* Orbs */
.hero__orb {
  position:absolute; border-radius:50%;
  pointer-events:none; z-index:0;
  filter:blur(60px);
}
.hero__orb--1 {
  width:600px; height:600px;
  top:-150px; left:-150px;
  background:radial-gradient(circle,rgba(167,139,250,.3) 0%,transparent 70%);
  animation:orbFloat1 12s ease-in-out infinite;
}
.hero__orb--2 {
  width:500px; height:500px;
  bottom:-100px; right:-100px;
  background:radial-gradient(circle,rgba(232,121,249,.25) 0%,transparent 70%);
  animation:orbFloat2 15s ease-in-out infinite;
}
.hero__orb--3 {
  width:300px; height:300px;
  top:50%; left:50%; transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(196,181,253,.2) 0%,transparent 70%);
  animation:orbFloat3 9s ease-in-out infinite;
}
@keyframes orbFloat1 {
  0%,100% { transform:translate(0,0) scale(1); }
  33%     { transform:translate(40px,-30px) scale(1.05); }
  66%     { transform:translate(-20px,20px) scale(.95); }
}
@keyframes orbFloat2 {
  0%,100% { transform:translate(0,0); }
  50%     { transform:translate(-40px,-30px); }
}
@keyframes orbFloat3 {
  0%,100% { transform:translate(-50%,-50%) scale(1); }
  50%     { transform:translate(-50%,-50%) scale(1.2); }
}

/* ── Hero floating photos ──────────────────────────────────── */
.hero__photo {
  position: absolute;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(109, 40, 217, 0.25), 0 0 0 4px rgba(255,255,255,0.6);
  pointer-events: none;
  z-index: 1;
  transition: transform .4s var(--transition-spring);
}
.hero__photo img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.hero__photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(109,40,217,.15));
}

.hero__photo--1 {
  width: 140px; height: 170px;
  top: 12%; left: 4%;
  animation: photoFloat1 7s ease-in-out infinite;
  transform: rotate(-6deg);
}
.hero__photo--2 {
  width: 120px; height: 150px;
  top: 8%; right: 5%;
  animation: photoFloat2 9s ease-in-out infinite;
  transform: rotate(5deg);
}
.hero__photo--3 {
  width: 130px; height: 160px;
  bottom: 12%; left: 3%;
  animation: photoFloat3 8s ease-in-out infinite;
  transform: rotate(4deg);
}
.hero__photo--4 {
  width: 110px; height: 140px;
  bottom: 15%; right: 4%;
  animation: photoFloat4 10s ease-in-out infinite;
  transform: rotate(-4deg);
}

@keyframes photoFloat1 {
  0%,100% { transform: rotate(-6deg) translateY(0px);   }
  50%     { transform: rotate(-4deg) translateY(-14px);  }
}
@keyframes photoFloat2 {
  0%,100% { transform: rotate(5deg) translateY(0px);    }
  50%     { transform: rotate(7deg) translateY(-18px);   }
}
@keyframes photoFloat3 {
  0%,100% { transform: rotate(4deg) translateY(0px);    }
  50%     { transform: rotate(2deg) translateY(-12px);   }
}
@keyframes photoFloat4 {
  0%,100% { transform: rotate(-4deg) translateY(0px);   }
  50%     { transform: rotate(-6deg) translateY(-16px);  }
}

@media (max-width: 900px) {
  .hero__photo--1, .hero__photo--3 { left: -20px; }
  .hero__photo--2, .hero__photo--4 { right: -20px; }
  .hero__photo { width: 90px; height: 115px; }
}
@media (max-width: 600px) {
  .hero__photo { display: none; }
}

/* Rotating rings */
.hero__ring {
  position:absolute; pointer-events:none; z-index:0;
}
.hero__ring--1 {
  width:200px; height:200px;
  top:10%; right:8%;
  animation:ringRotate 20s linear infinite;
}
.hero__ring--2 {
  width:300px; height:300px;
  bottom:5%; left:5%;
  animation:ringRotate 30s linear infinite reverse;
}
@keyframes ringRotate {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}

.hero__inner { position:relative; z-index:1; max-width:760px; margin:0 auto; }

/* Tag */
.hero__tag {
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 18px;
  background:linear-gradient(135deg,var(--lavender-500),var(--rose));
  color:white; font-size:.75rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  border-radius:99px; margin-bottom:28px;
  box-shadow:0 4px 20px rgba(139,92,246,.35);
  animation:fadeInDown .7s var(--transition-spring) .1s both;
}
.hero__tag svg { animation:sparkleRotate 3s ease-in-out infinite; }
.hero__tag svg:last-child { animation-delay:1.5s; }
@keyframes sparkleRotate {
  0%,100% { transform:rotate(0deg) scale(1); }
  50%     { transform:rotate(20deg) scale(1.3); }
}

/* Title */
.hero__title {
  font-family:'Playfair Display',serif;
  font-size:clamp(2.5rem,6vw,4.5rem);
  font-weight:700; line-height:1.15;
  color:var(--text-dark); margin-bottom:22px;
  animation:fadeInUp .8s var(--transition-spring) .2s both;
}
.hero__title-gradient {
  background:linear-gradient(135deg,var(--lavender-600) 0%,var(--rose) 60%,#f472b6 100%);
  background-size:200% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:gradientShift 4s ease-in-out infinite;
}
@keyframes gradientShift {
  0%,100% { background-position:0% center; }
  50%     { background-position:100% center; }
}

/* Subtitle */
.hero__subtitle {
  font-size:1.1rem; color:var(--text-muted);
  max-width:520px; margin:0 auto 44px;
  line-height:1.8;
  animation:fadeInUp .8s var(--transition-spring) .3s both;
}

/* Actions */
.hero__actions {
  display:flex; align-items:center; justify-content:center;
  gap:16px; flex-wrap:wrap;
  animation:fadeInUp .8s var(--transition-spring) .4s both;
}

/* Stats */
.hero__stats {
  display:flex; align-items:center; justify-content:center;
  gap:0; margin-top:60px;
  padding-top:40px;
  border-top:1px solid rgba(196,181,253,.4);
  animation:fadeInUp .8s var(--transition-spring) .5s both;
  flex-wrap:wrap;
}
.hero__stat { padding:0 36px; text-align:center; }
.hero__stat-divider {
  width:1px; height:40px;
  background:linear-gradient(180deg,transparent,rgba(196,181,253,.6),transparent);
}
.hero__stat-value {
  font-family:'Playfair Display',serif;
  font-size:2rem; font-weight:700;
  color:var(--lavender-700);
  transition:transform var(--transition-bounce);
}
.hero__stat:hover .hero__stat-value { transform:scale(1.1); }
.hero__stat-label {
  font-size:.78rem; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.08em;
  font-weight:500; margin-top:4px;
}

/* Scroll hint */
.hero__scroll-hint {
  margin-top:48px;
  display:flex; justify-content:center;
  color:var(--lavender-400);
  animation:scrollBounce 2.5s ease-in-out infinite, fadeInUp .8s var(--transition-spring) .7s both;
}
@keyframes scrollBounce {
  0%,100% { transform:translateY(0); opacity:.8; }
  50%     { transform:translateY(8px); opacity:.4; }
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════ */
.btn-primary {
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 34px;
  background:linear-gradient(135deg,var(--lavender-500) 0%,var(--lavender-700) 100%);
  background-size:200% auto;
  color:white; font-size:1rem; font-weight:600;
  border-radius:var(--radius-md);
  box-shadow:0 8px 24px rgba(109,40,217,.35);
  transition:all var(--transition-bounce);
  overflow:hidden; position:relative; isolation:isolate;
}
.btn-primary::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,var(--rose),var(--lavender-700));
  opacity:0; transition:opacity var(--transition);
  z-index:-1;
}
.btn-primary:hover {
  transform:translateY(-4px) scale(1.03);
  box-shadow:0 16px 40px rgba(109,40,217,.5);
}
.btn-primary:hover::after { opacity:1; }
.btn-primary svg:last-child { transition:transform var(--transition-bounce); }
.btn-primary:hover svg:last-child { transform:translateX(5px); }

.btn-secondary {
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 34px;
  background:white; color:var(--lavender-700);
  font-size:1rem; font-weight:600;
  border-radius:var(--radius-md);
  border:2px solid var(--lavender-200);
  transition:all var(--transition-bounce);
}
.btn-secondary:hover {
  border-color:var(--lavender-400);
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  background:var(--lavender-50);
}
.btn-secondary svg { transition:transform var(--transition-bounce); }
.btn-secondary:hover svg { transform:rotate(15deg); }

/* ═══════════════════════════════════════════════════════════
   SECTION COMMON
═══════════════════════════════════════════════════════════ */
.section-header {
  text-align:center; margin-bottom:56px;
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  align-items:center; gap:4px;
}

.section-tag {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 16px;
  background:var(--lavender-100); color:var(--lavender-700);
  font-size:.74rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  border-radius:99px; margin-bottom:10px;
  transition:all var(--transition);
}
.section-tag:hover { background:var(--lavender-200); }

.section-title {
  font-family:'Playfair Display',serif;
  font-size:clamp(1.8rem,4vw,2.8rem);
  font-weight:700; color:var(--text-dark);
  margin-bottom:18px;
  position:relative; display:block;
}
.section-title::after {
  content:''; display:block;
  width:60px; height:3px;
  background:linear-gradient(90deg,var(--lavender-500),var(--rose));
  border-radius:99px;
  margin:8px auto 0;
}
.section-desc { color:var(--text-muted); font-size:1rem; max-width:480px; margin:0 auto; }

/* ═══════════════════════════════════════════════════════════
   CATALOG
═══════════════════════════════════════════════════════════ */
.catalog {
  max-width:1280px; margin:0 auto;
  padding:80px 24px;
  position: relative;
}

/* decorative soft SVG dot pattern */
.catalog::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--lavender-300) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: .12;
  pointer-events: none;
  z-index: 0;
}

/* Filters */
.catalog__filters {
  display:flex; align-items:center; justify-content:center;
  gap:10px; margin-bottom:48px; flex-wrap:wrap;
  position: relative; z-index: 1;
}
.filter-btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 22px; border-radius:99px;
  font-size:.85rem; font-weight:600;
  color:var(--text-muted); background:white;
  border:2px solid var(--lavender-200);
  transition:all var(--transition-bounce);
  position:relative;
}
.filter-btn svg { flex-shrink:0; }
.filter-btn:hover {
  color:var(--lavender-700);
  border-color:var(--lavender-400);
  background:var(--lavender-50);
  box-shadow:0 4px 18px rgba(139,92,246,.2);
  transform:translateY(-2px);
}
.filter-btn.active {
  color:white;
  border-color:transparent;
  background:linear-gradient(135deg,var(--lavender-500),var(--lavender-700));
  box-shadow:0 4px 18px rgba(139,92,246,.4);
  transform:translateY(-2px);
}

/* Grid */
.catalog__grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(285px,1fr));
  gap:28px;
  position: relative; z-index: 1;
}

/* ═══════════════════════════════════════════════════════════
   PRODUCT CARD
═══════════════════════════════════════════════════════════ */
.product-card {
  background:white; border-radius:var(--radius-lg);
  overflow:hidden; position:relative; cursor:none;
  border:1px solid rgba(196,181,253,.2);
  transition:transform .4s var(--transition-spring),
             box-shadow .4s var(--transition-spring),
             border-color .3s;
  opacity:0; transform:translateY(28px) scale(.97);
}
@media (pointer:coarse) { .product-card { cursor:pointer; } }
.product-card.is-visible {
  opacity:1; transform:translateY(0) scale(1);
  transition:opacity .6s var(--transition-spring),
             transform .6s var(--transition-spring);
}
.product-card:hover {
  transform:translateY(-10px) scale(1.01) !important;
  box-shadow:0 24px 64px rgba(109,40,217,.22), 0 0 0 1px rgba(167,139,250,.4);
  border-color:rgba(167,139,250,.5);
}

/* Badge */
.product-card__badge {
  position:absolute; top:14px; left:14px; z-index:2;
  padding:4px 12px; border-radius:99px;
  font-size:.68rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:white;
  animation:badgePop .4s var(--transition-bounce) .2s both;
}
@keyframes badgePop {
  from { transform:scale(0) rotate(-15deg); opacity:0; }
  to   { transform:scale(1) rotate(0);      opacity:1; }
}
.badge--hit   { background:linear-gradient(135deg,#f59e0b,#ef4444); }
.badge--trend { background:linear-gradient(135deg,var(--rose),#e879f9); }
.badge--new   { background:linear-gradient(135deg,#10b981,#059669); }
.badge--gift  { background:linear-gradient(135deg,var(--lavender-500),var(--lavender-700)); }

/* Wishlist */
.product-card__wishlist {
  position:absolute; top:14px; right:14px; z-index:2;
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm); cursor:none;
  opacity:0; transition:all var(--transition-bounce);
  color:var(--text-muted);
}
@media (pointer:coarse) { .product-card__wishlist { cursor:pointer; } }
.product-card:hover .product-card__wishlist { opacity:1; }
.product-card__wishlist:hover { transform:scale(1.2); color:#e11d48; background:var(--pink-light); }
.product-card__wishlist.liked { opacity:1; background:var(--pink-light); color:#e11d48; }
.product-card__wishlist.liked svg { animation:heartBeat .5s var(--transition-bounce); }
@keyframes heartBeat {
  0%   { transform:scale(1); }
  30%  { transform:scale(1.4); }
  60%  { transform:scale(.9); }
  100% { transform:scale(1); }
}

/* Image */
.product-card__image-wrap {
  position:relative; aspect-ratio:1/1; overflow:hidden;
  background:linear-gradient(135deg,var(--lavender-50),var(--lavender-100));
}
.product-card__image {
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(0.4,0,0.2,1);
}
.product-card:hover .product-card__image { transform:scale(1.1); }

/* Hover overlay */
.product-card__overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(109,40,217,.25));
  opacity:0; transition:opacity var(--transition);
  display:flex; align-items:center; justify-content:center;
}
.product-card:hover .product-card__overlay { opacity:1; }
.product-card__view-hint {
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%) translateY(8px);
  background:rgba(255,255,255,.95); color:var(--lavender-700);
  padding:7px 18px; border-radius:99px; font-size:.75rem; font-weight:700;
  display:flex; align-items:center; gap:6px; white-space:nowrap;
  transition:all var(--transition-bounce); opacity:0;
  box-shadow:var(--shadow-sm);
}
.product-card:hover .product-card__view-hint {
  opacity:1; transform:translateX(-50%) translateY(0);
}

/* Dots */
.product-card__dots {
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  display:flex; gap:5px;
}
.product-card__dot {
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.5); transition:all var(--transition);
}
.product-card__dot.active { background:white; width:18px; border-radius:3px; }

/* Body */
.product-card__body { padding:20px; }
.product-card__name {
  font-family:'Playfair Display',serif;
  font-size:1.05rem; font-weight:600;
  color:var(--text-dark); margin-bottom:6px; line-height:1.35;
}
.product-card__desc {
  font-size:.82rem; color:var(--text-muted);
  margin-bottom:12px; line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.product-card__stars { display:flex; align-items:center; gap:3px; margin-bottom:16px; }
.star { font-size:.8rem; color:#fbbf24; }
.product-card__review-count { font-size:.75rem; color:var(--text-muted); margin-left:4px; }
.product-card__no-reviews  { font-size:.75rem; color:var(--lavender-300); font-style:italic; }

/* Footer */
.product-card__footer { display:flex; align-items:center; justify-content:space-between; gap:8px; }

/* ── Блок цены в карточке ──────────────────────────────────── */
.product-card__price-wrap {
  display:flex; flex-direction:column; gap:3px; min-width:0;
}

/* Строка: перечёркнутая цена + бейдж скидки */
.product-card__price-top {
  display:flex; align-items:center; gap:6px;
  min-height:18px;
}

.product-card__price-old {
  font-size:.76rem; font-weight:500;
  color:var(--text-muted); font-family:'Montserrat',sans-serif;
  text-decoration:line-through;
  text-decoration-color:rgba(107,104,128,.5);
}

.product-card__discount {
  display:inline-flex; align-items:center;
  font-size:.65rem; font-weight:800; letter-spacing:.03em;
  background:linear-gradient(135deg,#ef4444,#f97316);
  color:white; padding:2px 7px; border-radius:99px;
  box-shadow:0 2px 8px rgba(239,68,68,.35);
  animation:discountPop .4s var(--transition-bounce) both;
}
@keyframes discountPop {
  from { transform:scale(0) rotate(-10deg); opacity:0; }
  to   { transform:scale(1) rotate(0);      opacity:1; }
}

/* Основная цена (акцентная, крупная) */
.product-card__price {
  font-family:'Playfair Display',serif;
  font-size:1.35rem; font-weight:700;
  color:var(--lavender-700);
  display:inline-flex; align-items:baseline; gap:2px;
  line-height:1;
}
.product-card__price span {
  font-size:.72rem; color:var(--text-muted);
  font-family:'Montserrat',sans-serif; font-weight:500;
  margin-left:1px;
}

.add-to-cart-btn {
  display:flex; align-items:center; gap:7px;
  padding:10px 18px;
  background:linear-gradient(135deg,var(--lavender-400),var(--lavender-600));
  color:white; border-radius:var(--radius-sm);
  font-size:.82rem; font-weight:600;
  transition:all var(--transition-bounce); white-space:nowrap;
  box-shadow:0 4px 12px rgba(139,92,246,.25);
  overflow:hidden; position:relative; cursor:none;
  isolation:isolate;
}
@media (pointer:coarse) { .add-to-cart-btn { cursor:pointer; } }
.add-to-cart-btn::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,var(--rose),var(--lavender-600));
  opacity:0; transition:opacity var(--transition);
  z-index:-1;
}
.add-to-cart-btn:hover { transform:translateY(-3px) scale(1.06); box-shadow:0 8px 22px rgba(139,92,246,.45); }
.add-to-cart-btn:hover::before { opacity:1; }
.add-to-cart-btn:active { transform:scale(.94); }
.add-to-cart-btn.in-cart { background:linear-gradient(135deg,#10b981,#059669); }
.add-to-cart-btn.in-cart::before { display:none; }
.add-to-cart-btn svg { transition:transform var(--transition-bounce); flex-shrink:0; }
.add-to-cart-btn:hover svg { transform:rotate(-15deg) scale(1.1); }

/* ═══════════════════════════════════════════════════════════
   CART SIDEBAR
═══════════════════════════════════════════════════════════ */
.cart-overlay {
  position:fixed; inset:0;
  background:rgba(30,27,46,.55);
  backdrop-filter:blur(6px);
  z-index:200; opacity:0; pointer-events:none;
  transition:opacity var(--transition);
}
.cart-overlay.open { opacity:1; pointer-events:all; }

.cart-sidebar {
  position:fixed; top:0; right:0;
  width:420px; max-width:100vw; height:100vh;
  background:white; z-index:201;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-lg);
  transform:translateX(100%);
  transition:transform .45s cubic-bezier(0.4,0,0.2,1);
}
.cart-sidebar.open { transform:translateX(0); }

.cart-sidebar__header {
  padding:24px;
  border-bottom:1px solid var(--lavender-100);
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(135deg,var(--lavender-50),white);
}
.cart-sidebar__title {
  font-family:'Playfair Display',serif;
  font-size:1.4rem; font-weight:700; color:var(--text-dark);
  display:flex; align-items:center; gap:10px;
}
.cart-sidebar__close {
  width:36px; height:36px; border-radius:50%;
  background:var(--lavender-100); display:flex;
  align-items:center; justify-content:center;
  color:var(--lavender-700); transition:all var(--transition);
  cursor:none;
}
@media (pointer:coarse) { .cart-sidebar__close { cursor:pointer; } }
.cart-sidebar__close:hover { background:var(--lavender-200); transform:rotate(90deg) scale(1.1); }

.cart-sidebar__body { flex:1; overflow-y:auto; padding:20px; }

.cart-empty {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  height:100%; gap:16px; text-align:center; color:var(--text-muted);
}
.cart-empty__icon { color:var(--lavender-200); animation:emptyFloat 3s ease-in-out infinite; }
@keyframes emptyFloat {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-10px); }
}
.cart-empty__text { font-size:1rem; font-weight:600; }
.cart-empty__sub  { font-size:.85rem; }

/* Cart items */
.cart-item {
  display:flex; align-items:center; gap:14px;
  padding:14px 0; border-bottom:1px solid var(--lavender-50);
  animation:fadeInRight .35s var(--transition-spring) both;
}
.cart-item__image {
  width:72px; height:72px; border-radius:var(--radius-sm);
  object-fit:cover; background:var(--lavender-50); flex-shrink:0;
  transition:transform var(--transition-bounce);
}
.cart-item:hover .cart-item__image { transform:scale(1.05); }
.cart-item__info { flex:1; min-width:0; }
.cart-item__name {
  font-size:.88rem; font-weight:600; color:var(--text-dark);
  margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cart-item__price { font-size:1rem; font-weight:700; color:var(--lavender-700); }
.cart-item__controls { display:flex; align-items:center; gap:8px; margin-top:8px; }
.qty-btn {
  width:28px; height:28px; border-radius:50%;
  background:var(--lavender-100); color:var(--lavender-700);
  display:flex; align-items:center; justify-content:center;
  transition:all var(--transition-bounce); cursor:none;
}
@media (pointer:coarse) { .qty-btn { cursor:pointer; } }
.qty-btn:hover { background:var(--lavender-500); color:white; transform:scale(1.15); }
.qty-value { font-size:.9rem; font-weight:600; min-width:20px; text-align:center; }
.cart-item__remove {
  padding:6px; color:var(--text-muted);
  border-radius:var(--radius-sm); transition:all var(--transition);
  cursor:none;
}
@media (pointer:coarse) { .cart-item__remove { cursor:pointer; } }
.cart-item__remove:hover { color:#ef4444; background:#fef2f2; transform:scale(1.1) rotate(5deg); }

.cart-sidebar__footer {
  padding:20px 24px;
  border-top:1px solid var(--lavender-100);
  background:linear-gradient(180deg,white,var(--lavender-50));
}
.cart-total { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.cart-total__label { font-size:.9rem; color:var(--text-muted); font-weight:500; }
.cart-total__value {
  font-family:'Playfair Display',serif;
  font-size:1.5rem; font-weight:700; color:var(--lavender-700);
}

.checkout-btn {
  width:100%; padding:16px;
  background:linear-gradient(135deg,var(--lavender-500),var(--lavender-700),#5b21b6);
  background-size:200% auto;
  color:white; font-size:1rem; font-weight:700;
  border-radius:var(--radius-md);
  box-shadow:0 8px 24px rgba(109,40,217,.35);
  transition:all var(--transition);
  display:flex; align-items:center; justify-content:center; gap:10px;
  letter-spacing:.02em; cursor:none; overflow:hidden; position:relative; isolation:isolate;
}
@media (pointer:coarse) { .checkout-btn { cursor:pointer; } }
.checkout-btn::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,var(--rose),var(--lavender-700));
  opacity:0; transition:opacity var(--transition);
  z-index:-1;
}
.checkout-btn:hover { transform:translateY(-2px); box-shadow:0 14px 36px rgba(109,40,217,.5); }
.checkout-btn:hover::after { opacity:.3; }
.checkout-btn:disabled { opacity:.45; cursor:not-allowed; transform:none; }

.cart-note {
  margin-top:12px; text-align:center;
  font-size:.73rem; color:var(--text-muted);
  display:flex; align-items:center; justify-content:center; gap:6px;
}

/* ═══════════════════════════════════════════════════════════
   MODAL
═══════════════════════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(30,27,46,.72);
  backdrop-filter:blur(10px);
  z-index:300; display:flex;
  align-items:center; justify-content:center;
  padding:24px; opacity:0; pointer-events:none;
  transition:opacity .35s;
}
.modal-overlay.open { opacity:1; pointer-events:all; }

.modal {
  background:white; border-radius:var(--radius-xl);
  max-width:900px; width:100%; max-height:90vh;
  overflow-y:auto; box-shadow:var(--shadow-lg);
  position:relative;
  transform:scale(.88) translateY(30px);
  transition:transform .45s var(--transition-spring);
}
.modal-overlay.open .modal { transform:scale(1) translateY(0); }

.modal__close {
  position:absolute; top:16px; right:16px; z-index:10;
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.95); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-dark); box-shadow:var(--shadow-sm);
  transition:all var(--transition-bounce); cursor:none;
}
@media (pointer:coarse) { .modal__close { cursor:pointer; } }
.modal__close:hover { transform:rotate(90deg) scale(1.1); background:var(--lavender-100); color:var(--lavender-700); }

.modal__body { display:grid; grid-template-columns:1fr 1fr; }

/* Gallery */
.modal__gallery {
  background:linear-gradient(135deg,var(--lavender-50),var(--lavender-100));
  border-radius:var(--radius-xl) 0 0 var(--radius-xl);
  overflow:hidden;
}
.gallery__main { aspect-ratio:1/1; overflow:hidden; position:relative; }
.gallery__main-img {
  width:100%; height:100%; object-fit:cover;
  transition:opacity .3s ease, transform .5s ease;
}
.gallery__main-img.switching { opacity:0; transform:scale(1.04); }

/* Gallery arrows */
.gallery__arrow {
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.9); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  color:var(--lavender-700); box-shadow:var(--shadow-sm);
  transition:all var(--transition-bounce);
  opacity:0; cursor:none; z-index:2;
}
@media (pointer:coarse) { .gallery__arrow { cursor:pointer; opacity:1; } }
.gallery__arrow--prev { left:12px; }
.gallery__arrow--next { right:12px; }
.gallery__main:hover .gallery__arrow { opacity:1; }
.gallery__arrow:hover { background:white; transform:translateY(-50%) scale(1.1); color:var(--rose); }

.gallery__thumbs { display:flex; gap:8px; padding:12px; overflow-x:auto; }
.gallery__thumb {
  width:60px; height:60px; border-radius:var(--radius-sm);
  object-fit:cover; cursor:none; border:2px solid transparent;
  transition:all var(--transition-bounce); flex-shrink:0; opacity:.55;
}
@media (pointer:coarse) { .gallery__thumb { cursor:pointer; } }
.gallery__thumb:hover { opacity:.9; transform:scale(1.08); }
.gallery__thumb.active { border-color:var(--lavender-500); opacity:1; transform:scale(1.05); }

/* Modal info */
.modal__info { padding:36px 32px; display:flex; flex-direction:column; gap:20px; }
.modal__badge {
  display:inline-flex; align-self:flex-start;
  padding:4px 12px; border-radius:99px;
  font-size:.72rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:white;
}
.modal__name {
  font-family:'Playfair Display',serif;
  font-size:1.6rem; font-weight:700; color:var(--text-dark); line-height:1.3;
}
.modal__desc { font-size:.9rem; color:var(--text-muted); line-height:1.75; }
/* ── Блок цены в модальном окне ───────────────────────────── */
.modal__price {
  display:flex; align-items:center; flex-wrap:wrap;
  gap:12px; padding:16px 20px;
  background:linear-gradient(135deg, var(--lavender-50), #fdf4ff);
  border-radius:var(--radius-md);
  border:1px solid rgba(196,181,253,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}

.modal__price-current {
  font-family:'Playfair Display',serif;
  font-size:2.2rem; font-weight:700;
  color:var(--lavender-700);
  display:inline-flex; align-items:baseline; gap:4px;
  line-height:1;
  text-shadow:0 2px 12px rgba(109,40,217,.15);
}
.modal__price-currency {
  font-size:1rem; font-weight:500;
  color:var(--lavender-500); font-family:'Montserrat',sans-serif;
}

.modal__price-old {
  font-size:1rem; font-weight:400;
  color:var(--text-muted); font-family:'Montserrat',sans-serif;
  text-decoration:line-through;
  text-decoration-color:rgba(107,104,128,.45);
  align-self:flex-end; padding-bottom:3px;
}

.modal__price-discount {
  display:inline-flex; align-items:center; gap:4px;
  font-size:.82rem; font-weight:800; letter-spacing:.04em;
  background:linear-gradient(135deg,#ef4444,#f97316);
  color:white; padding:5px 14px; border-radius:99px;
  box-shadow:0 4px 14px rgba(239,68,68,.4);
  margin-left:auto;
  position:relative; overflow:hidden;
}
.modal__price-discount::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.2),transparent);
  border-radius:99px;
}

.modal__actions { display:flex; flex-direction:column; gap:12px; }
.modal__add-btn {
  padding:14px;
  background:linear-gradient(135deg,var(--lavender-500),var(--lavender-700));
  color:white; border-radius:var(--radius-md);
  font-size:1rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:all var(--transition-bounce);
  box-shadow:0 8px 24px rgba(109,40,217,.3); cursor:none; overflow:hidden; position:relative;
  isolation:isolate;
}
@media (pointer:coarse) { .modal__add-btn { cursor:pointer; } }
.modal__add-btn::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,var(--rose),var(--lavender-700));
  opacity:0; transition:opacity var(--transition);
  z-index:-1;
}
.modal__add-btn:hover { transform:translateY(-2px); box-shadow:0 14px 36px rgba(109,40,217,.45); }
.modal__add-btn:hover::after { opacity:.4; }
.modal__add-btn.in-cart { background:linear-gradient(135deg,#10b981,#059669); }
.modal__add-btn.in-cart::after { display:none; }

.modal__wb-btn {
  padding:13px;
  background:white; color:var(--lavender-700);
  border-radius:var(--radius-md); font-size:.9rem; font-weight:700;
  border:2px solid var(--lavender-200);
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:all var(--transition); cursor:none;
}
@media (pointer:coarse) { .modal__wb-btn { cursor:pointer; } }
.modal__wb-btn:hover { border-color:var(--lavender-400); background:var(--lavender-50); transform:translateY(-1px); }
.modal__wb-btn:disabled { opacity:.4; cursor:not-allowed; transform:none; }

/* Reviews */
.modal__reviews { border-top:1px solid var(--lavender-100); padding-top:20px; }
.modal__reviews-title {
  font-size:.82rem; font-weight:700; color:var(--text-dark);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px;
  display:flex; align-items:center; gap:8px;
}
.review-item {
  background:var(--lavender-50); border-radius:var(--radius-md);
  padding:14px; margin-bottom:10px;
  transition:all var(--transition); border:1px solid transparent;
}
.review-item:hover { border-color:var(--lavender-200); transform:translateX(4px); }
.review-item__header { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.review-item__author { font-size:.82rem; font-weight:600; color:var(--text-dark); }
.review-item__stars  { display:flex; gap:2px; }
.review-item__text   { font-size:.82rem; color:var(--text-muted); line-height:1.6; }
.reviews-empty {
  font-size:.82rem; color:var(--text-muted);
  text-align:center; padding:16px; font-style:italic;
}

/* ═══════════════════════════════════════════════════════════
   MOODBOARD
═══════════════════════════════════════════════════════════ */
.moodboard {
  background: linear-gradient(180deg, var(--surface) 0%, var(--lavender-50) 100%);
  padding: 80px 24px;
  overflow: hidden;
}

.moodboard__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 64px;
  align-items: center;
}

/* Text side */
.moodboard__text { display: flex; flex-direction: column; gap: 16px; }
.moodboard__text .section-header { align-items: flex-start; text-align: left; }
.moodboard__text .section-title::after { margin-left: 0; }
.moodboard__text .section-desc { text-align: left; margin: 0; }

.moodboard__quote {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 24px;
  background: white;
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--lavender-400);
  box-shadow: var(--shadow-sm);
  margin-top: 8px;
}
.moodboard__quote span {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.7;
}

/* Bento grid */
.moodboard__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 180px 180px;
  gap: 12px;
}

.moodboard__item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: none;
  box-shadow: var(--shadow-sm);
  transition: all .45s var(--transition-spring);
}
@media (pointer: coarse) { .moodboard__item { cursor: default; } }

.moodboard__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(0.4,0,0.2,1);
  display: block;
}

.moodboard__item:hover {
  transform: scale(1.04) translateY(-4px);
  box-shadow: var(--shadow-lg);
  z-index: 2;
}
.moodboard__item:hover img { transform: scale(1.1); }

/* Overlay */
.moodboard__item-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 20px 14px 12px;
  background: linear-gradient(0deg, rgba(76,29,149,.7) 0%, transparent 100%);
  color: white;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: all var(--transition-bounce);
}
.moodboard__item:hover .moodboard__item-overlay {
  opacity: 1;
  transform: translateY(0);
}

/* Tall item spans 2 rows */
.moodboard__item--tall {
  grid-row: span 2;
}
/* Wide item spans 2 columns */
.moodboard__item--wide {
  grid-column: span 2;
}

@media (max-width: 1024px) {
  .moodboard__inner { grid-template-columns: 1fr; gap: 40px; }
  .moodboard__text .section-title { text-align: center; }
  .moodboard__text .section-title::after { left: 50%; transform: translateX(-50%); }
  .moodboard__text .section-tag  { align-self: center; }
  .moodboard__text .section-desc { text-align: center; }
}

@media (max-width: 600px) {
  .moodboard__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
  .moodboard__item--tall  { grid-row: span 1; }
  .moodboard__item--wide  { grid-column: span 2; }
}

/* ═══════════════════════════════════════════════════════════
   FEATURES
═══════════════════════════════════════════════════════════ */
.features {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(167,139,250,.18) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(232,121,249,.14) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 90%, rgba(124,58,237,.12) 0%, transparent 45%),
    linear-gradient(135deg, #3b1f6e 0%, #1e1b2e 55%, #2d1b69 100%);
  padding:90px 24px;
  position:relative; overflow:hidden;
}
.features .section-title { color:white; }
.features .section-tag { background:rgba(255,255,255,.15); color:white; border:1px solid rgba(255,255,255,.2); }
.features .section-desc { color:rgba(255,255,255,.65); }
.features .section-title::after { background:linear-gradient(90deg,rgba(255,255,255,.8),var(--pink-mid)); }

/* Morphing blob */
.features__blob {
  position:absolute; top:-200px; right:-200px;
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle,rgba(232,121,249,.12) 0%,transparent 70%);
  animation:blobMorph 12s ease-in-out infinite;
  pointer-events:none;
}

/* Dot grid */
.features__pattern {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Corner rings */
.features__ring {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.features__ring--tl {
  top: -80px; left: -80px;
  width: 300px; height: 300px;
}
.features__ring--br {
  bottom: -80px; right: -80px;
  width: 300px; height: 300px;
}
@keyframes blobMorph {
  0%,100% { border-radius:60% 40% 30% 70%/60% 30% 70% 40%; transform:rotate(0deg); }
  25%     { border-radius:30% 60% 70% 40%/50% 60% 30% 60%; transform:rotate(90deg); }
  50%     { border-radius:50% 60% 30% 60%/30% 50% 60% 40%; transform:rotate(180deg); }
  75%     { border-radius:60% 40% 60% 30%/70% 30% 50% 60%; transform:rotate(270deg); }
}

.features__inner { max-width:1280px; margin:0 auto; position:relative; z-index:1;
}
.features__grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:24px; margin-top:48px;
}

/* Feature card */
.feature-card {
  text-align:center; padding:36px 24px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(8px);
  transition:all var(--transition-spring);
  position:relative; overflow:hidden;
}
.feature-card::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.08),transparent);
  opacity:0; transition:opacity var(--transition);
}
.feature-card:hover::before { opacity:1; }
.feature-card:hover {
  background:rgba(255,255,255,.12);
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 20px 50px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.15);
}

/* Icon wrap */
.feature-card__icon-wrap {
  position:relative; width:72px; height:72px;
  border-radius:50%; margin:0 auto 20px;
  background:rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  transition:all var(--transition-bounce);
}
.feature-card:hover .feature-card__icon-wrap {
  background:rgba(255,255,255,.2);
  transform:scale(1.15) rotate(5deg);
}
.feature-card__icon {
  color:rgba(255,255,255,.9);
  transition:transform var(--transition-bounce);
}
.feature-card:hover .feature-card__icon { transform:scale(1.1); }

/* Glow */
.feature-card__icon-glow {
  position:absolute; inset:-8px; border-radius:50%;
  background:radial-gradient(circle,rgba(232,121,249,.25),transparent 70%);
  opacity:0; transition:opacity var(--transition);
  animation:iconGlowPulse 2s ease-in-out infinite paused;
}
.feature-card:hover .feature-card__icon-glow {
  opacity:1; animation-play-state:running;
}
@keyframes iconGlowPulse {
  0%,100% { transform:scale(1); opacity:.6; }
  50%     { transform:scale(1.3); opacity:.2; }
}

.feature-card__title { font-size:1rem; font-weight:700; color:white; margin-bottom:8px; }
.feature-card__text  { font-size:.85rem; color:rgba(255,255,255,.62); line-height:1.68; }

/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
.footer {
  background:var(--text-dark); color:rgba(255,255,255,.7);
  padding:0 0 32px; position:relative;
}
.footer__wave {
  width:100%; height:60px; display:block;
  margin-bottom:40px;
}
.footer__inner {
  max-width:1280px; margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:2fr 1fr 1fr;
  gap:48px; margin-bottom:48px;
}
.footer__brand-name {
  font-family:'Playfair Display',serif;
  font-size:1.5rem; font-weight:700;
  background:linear-gradient(135deg,var(--lavender-300),var(--rose));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; margin-top:12px; margin-bottom:12px;
}
.footer__desc { font-size:.85rem; line-height:1.75; max-width:300px; }
.footer__col-title {
  font-size:.78rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:white; margin-bottom:16px;
}
.footer__links { display:flex; flex-direction:column; gap:10px; }
.footer__links a {
  font-size:.85rem; transition:all var(--transition);
  display:flex; align-items:center; gap:7px;
}
.footer__links a:hover { color:var(--lavender-300); transform:translateX(4px); }
.footer__bottom {
  border-top:1px solid rgba(255,255,255,.08);
  padding:24px 24px 0;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
  max-width:1280px; margin:0 auto;
}
.footer__copy { font-size:.8rem; }
.footer__socials {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.footer__social-link {
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 18px;
  background:linear-gradient(135deg,#e1306c,#f77737);
  color:white; border-radius:var(--radius-sm);
  font-size:.82rem; font-weight:600; transition:all var(--transition-bounce);
}
.footer__social-link:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(225,48,108,.45); }
.footer__wb-link {
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 18px;
  background:linear-gradient(135deg,var(--lavender-600),var(--lavender-800));
  color:white; border-radius:var(--radius-sm);
  font-size:.82rem; font-weight:600; transition:all var(--transition-bounce);
}
.footer__wb-link:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(139,92,246,.45); }

/* ═══════════════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════════════ */
.toast-container {
  position:fixed; bottom:24px; right:24px; z-index:500;
  display:flex; flex-direction:column; gap:10px; pointer-events:none;
}
.toast {
  background:white; border-radius:var(--radius-md);
  padding:14px 20px; box-shadow:var(--shadow-md);
  font-size:.88rem; font-weight:500;
  display:flex; align-items:center; gap:10px;
  border-left:4px solid var(--lavender-500);
  pointer-events:all;
  animation:toastIn .4s var(--transition-bounce) both;
  max-width:320px;
}
.toast svg { flex-shrink:0; color:var(--lavender-500); }
.toast.removing { animation:toastOut .25s ease both; }
.toast--success { border-left-color:#10b981; }
.toast--success svg { color:#10b981; }
.toast--error   { border-left-color:#ef4444; }
.toast--error   svg { color:#ef4444; }

/* ═══════════════════════════════════════════════════════════
   KEYFRAMES
═══════════════════════════════════════════════════════════ */
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeInDown {
  from { opacity:0; transform:translateY(-18px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeInRight {
  from { opacity:0; transform:translateX(18px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes fadeOutRight {
  from { opacity:1; transform:translateX(0);    max-height:120px; margin-bottom:0; }
  to   { opacity:0; transform:translateX(32px); max-height:0;     margin-bottom:-1px; }
}
@keyframes toastIn {
  from { opacity:0; transform:translateX(64px) scale(.9); }
  to   { opacity:1; transform:translateX(0) scale(1); }
}
@keyframes toastOut {
  from { opacity:1; transform:translateX(0); }
  to   { opacity:0; transform:translateX(64px); }
}
@keyframes pulse-glow {
  0%,100% { box-shadow:0 0 0 0 rgba(139,92,246,.45); }
  50%     { box-shadow:0 0 0 12px rgba(139,92,246,0); }
}
@keyframes shimmer {
  0%   { background-position:-200% center; }
  100% { background-position:200% center; }
}

/* ═══════════════════════════════════════════════════════════
   SKELETON LOADER
═══════════════════════════════════════════════════════════ */
.skeleton-card {
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(196,181,253,.15);
}
.skeleton {
  background: linear-gradient(90deg,
    var(--lavender-100) 25%,
    var(--lavender-50)  50%,
    var(--lavender-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}
.skeleton-img  { height: 260px; border-radius: 0; }
.skeleton-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.skeleton-line { height: .85rem; margin-bottom: 2px; }
.skeleton-btn  { width: 100px; height: 38px; border-radius: var(--radius-sm); flex-shrink: 0; }

@keyframes shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width:768px) {
  .header__nav { display:none; }
  .hero { padding:72px 20px 60px; }
  .hero__stats { gap:0; flex-wrap:nowrap; overflow-x:auto; padding-bottom:8px; }
  .hero__stat { padding:0 20px; flex-shrink:0; }
  .catalog__grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:16px; }
  .modal__body { grid-template-columns:1fr; }
  .modal__gallery { border-radius:var(--radius-xl) var(--radius-xl) 0 0; }
  .footer__inner { grid-template-columns:1fr; gap:32px; }
  .hero__ring--2 { display:none; }
}
@media (max-width:480px) {
  .cart-sidebar { width:100vw; }
  .modal { border-radius:var(--radius-lg); }
  .hero__title { font-size:2rem; }
  .hero__actions { flex-direction:column; align-items:stretch; }
  .btn-primary,.btn-secondary { justify-content:center; }
}