﻿
html{scroll-behavior: smooth;}/* ── Scrollbar ── */
::-webkit-scrollbar {width: 6px;}::-webkit-scrollbar-track{background: #fafafa;}::-webkit-scrollbar-thumb{background: #e2d9f3;border-radius: 10px;}::-webkit-scrollbar-thumb:hover{background: #9b59b6;}/* ── Animations ── */
@keyframes fadeInDown {from{opacity: 0;transform: translateY(-16px);}to{opacity: 1;transform: translateY(0);}}@keyframes fadeInUp{from{opacity: 0;transform: translateY(24px);}to{opacity: 1;transform: translateY(0);}}@keyframes fadeInRight{from{opacity: 0;transform: translateX(24px);}to{opacity: 1;transform: translateX(0);}}@keyframes fadeInLeft{from{opacity: 0;transform: translateX(-24px);}to{opacity: 1;transform: translateX(0);}}@keyframes scaleIn{from{opacity: 0;transform: scale(0.88);}to{opacity: 1;transform: scale(1);}}@keyframes float{0%, 100%{transform: translateY(0px) rotate(0deg);}33%{transform: translateY(-14px) rotate(2deg);}66%{transform: translateY(-7px) rotate(-1deg);}}@keyframes floatReverse{0%, 100%{transform: translateY(0px) rotate(0deg);}33%{transform: translateY(10px) rotate(-2deg);}66%{transform: translateY(5px) rotate(1deg);}}@keyframes shimmer{0%{background-position: -200% center;}100%{background-position: 200% center;}}@keyframes spinSlow{from{transform: rotate(0deg);}to{transform: rotate(360deg);}}@keyframes pulse-ring{0%{transform: scale(1);opacity: 0.6;}100%{transform: scale(1.55);opacity: 0;}}@keyframes ticker{0%{transform: translateX(0);}100%{transform: translateX(-50%);}}@keyframes gradMove{0%, 100%{background-position: 0% 50%;}50%{background-position: 100% 50%;}}@keyframes heartBeat{0%, 100%{transform: scale(1);}14%{transform: scale(1.3);}28%{transform: scale(1);}42%{transform: scale(1.2);}70%{transform: scale(1);}}@keyframes slideUp{from{opacity: 0;transform: translateY(40px);}to{opacity: 1;transform: translateY(0);}}@keyframes toastIn{from{opacity: 0;transform: translateX(100%) scale(0.9);}to{opacity: 1;transform: translateX(0) scale(1);}}@keyframes toastOut{from{opacity: 1;transform: translateX(0) scale(1);}to{opacity: 0;transform: translateX(100%) scale(0.9);}}.anim-fade-down{animation: fadeInDown 0.6s ease both;}.anim-fade-up{animation: fadeInUp 0.7s ease both;}.anim-fade-right{animation: fadeInRight 0.6s ease both;}.anim-fade-left{animation: fadeInLeft 0.6s ease both;}.anim-scale-in{animation: scaleIn 0.5s ease both;}.float-1{animation: float 5s ease-in-out infinite;}.float-2{animation: floatReverse 6s ease-in-out infinite;}.float-3{animation: float 7s ease-in-out infinite 1s;}.spin-slow{animation: spinSlow 18s linear infinite;}.toast-in{animation: toastIn 0.35s cubic-bezier(.22, 1, .36, 1) both;}.toast-out{animation: toastOut 0.3s ease both;}/* ── Gradient Text ── */
.grad-text {background: linear-gradient(135deg, #9b59b6 0%, #e91e8c 50%, #ff6b35 100%);background-size: 200% auto;-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;animation: gradMove 4s linear infinite;}.grad-text-2{background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);background-size: 200% auto;-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;animation: gradMove 5s linear infinite;}/* ── Shine Button ── */
.btn-shine {position: relative;overflow: hidden;}.btn-shine::after{content: '';position: absolute;inset: 0;background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.28) 50%, transparent 60%);background-size: 200% auto;transition: background-position 0.4s;}.btn-shine:hover::after{background-position: -200% center;}/* ── Card Hover ── */
.product-card {transition: transform 0.3s cubic-bezier(.22, 1, .36, 1), box-shadow 0.3s ease;}.product-card:hover{transform: translateY(-6px);box-shadow: 0 20px 50px -10px rgba(155, 89, 182, 0.18);}/* ── Blob ── */
.blob {border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;animation: float 8s ease-in-out infinite;}.blob-2{border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;animation: floatReverse 9s ease-in-out infinite;}/* ── Ticker ── */
.ticker-track {display: flex;width: max-content;animation: ticker 28s linear infinite;}.ticker-track:hover{animation-play-state: paused;}/* ── Glass ── */
.glass {background: rgba(255, 255, 255, 0.72);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);}.glass-dark{background: rgba(30, 10, 50, 0.55);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);}/* ── Pulse Ring ── */
.pulse-ring::before {content: '';position: absolute;inset: -6px;border-radius: 50%;border: 2px solid #e91e8c;animation: pulse-ring 1.6s ease-out infinite;}/* ── Heart ── */
.heart-beat {animation: heartBeat 1.2s ease-in-out;}/* ── Marquee ── */
@keyframes marquee {0%{transform: translateX(0);}100%{transform: translateX(-50%);}}.marquee-track{display: flex;width: max-content;animation: marquee 22s linear infinite;}/* ── Image Overlay ── */
.img-overlay {position: absolute;inset: 0;background: linear-gradient(to top, rgba(30, 0, 50, 0.7) 0%, transparent 60%);}/* ── Range Slider ── */
input[type=range] {accent-color: #9b59b6;}/* ── Custom checkbox ── */
.custom-check:checked {accent-color: #9b59b6;}/* ── Section line ── */
.section-line {width: 48px;height: 4px;background: linear-gradient(90deg, #9b59b6, #e91e8c);border-radius: 99px;margin: 8px auto 0;}/* ── Drawer & Modal scroll lock ── */
.no-scroll {overflow: hidden;}/* ── Stars ── */
.star-filled {color: #f59e0b;}.star-empty{color: #e2e8f0;}/* ── Size selector ── */
.size-btn {width: 40px;height: 40px;border-radius: 10px;border: 2px solid #e9d5f7;display: flex;align-items: center;justify-content: center;font-size: 12px;font-weight: 700;cursor: pointer;transition: all 0.2s;}.size-btn:hover{border-color: #9b59b6;color: #9b59b6;}.size-btn.active{background: #9b59b6;border-color: #9b59b6;color: white;}/* ── Color swatch ── */
.swatch {width: 28px;height: 28px;border-radius: 50%;cursor: pointer;border: 3px solid transparent;transition: all 0.2s;}.swatch.active{border-color: #9b59b6;transform: scale(1.2);}.swatch:hover{transform: scale(1.15);}/* ── Badge ── */
.badge-new {background: linear-gradient(135deg, #10b981, #059669);}.badge-hot{background: linear-gradient(135deg, #f59e0b, #f97316);}.badge-sale{background: linear-gradient(135deg, #e91e8c, #9b59b6);}.badge-ltd{background: linear-gradient(135deg, #ef4444, #dc2626);}