@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=DM+Sans:wght@300;400;500;600&display=swap");@tailwind base;@tailwind components;@tailwind utilities;:root{--bg-primary:#0a0a0a;--bg-secondary:#121212;--bg-card:#181818;--bg-sidebar:#0e0e0e;--gold:#c5a059;--gold-light:#e6c88b;--gold-dim:#8e6d3d;--accent-red:#8b0000;--accent-red-light:#b22222;--text-primary:#fff;--text-secondary:#b0b0b0;--text-muted:#666;--border:#262626;--border-light:#333;--red-badge:#8b0000;--green:#2e7d52;--header-height:72px;--sidebar-width:240px}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background-color:var(--bg-primary);color:var(--text-primary);font-family:DM Sans,sans-serif;-webkit-font-smoothing:antialiased}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--gold-dim);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--gold)}.font-display{font-family:Playfair Display,serif}.text-gold{color:var(--gold)}.text-gold-light{color:var(--gold-light)}.text-secondary{color:var(--text-secondary)}.text-muted{color:var(--text-muted)}.bg-card{background-color:var(--bg-card)}.border-custom{border-color:var(--border)}.gold-divider{width:40px;height:2px;background:linear-gradient(90deg,var(--gold),transparent);box-shadow:0 0 8px rgba(197,160,89,.3)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.animate-fade-in-up{animation:fadeInUp .4s ease forwards}.card-hover{transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}.card-hover:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,.5),0 0 0 1px rgba(201,168,76,.15);border-color:rgba(201,168,76,.3)!important}.btn-primary{background:linear-gradient(135deg,var(--accent-red),var(--accent-red-light));color:#fff;font-weight:600;font-size:.8125rem;letter-spacing:.03em;padding:.5rem 1.1rem;border-radius:4px;border:none;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px rgba(139,0,0,.25)}.btn-primary:hover{opacity:.95;transform:translateY(-1px);box-shadow:0 6px 16px rgba(139,0,0,.35)}.btn-outline{background:transparent;color:var(--gold);font-weight:500;font-size:.8125rem;letter-spacing:.03em;padding:.5rem 1.1rem;border-radius:4px;border:1px solid rgba(197,160,89,.35);cursor:pointer;transition:all .2s ease}.btn-outline:hover{background:rgba(197,160,89,.08);border-color:var(--gold);color:var(--gold-light)}.sidebar-item{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:6px;cursor:pointer;font-size:.875rem;font-weight:400;color:var(--text-secondary);transition:background .2s,color .2s;border:1px solid transparent}.sidebar-item:hover{background:rgba(201,168,76,.06);color:var(--text-primary)}.sidebar-item.active{background:rgba(201,168,76,.1);color:var(--gold-light);border-color:rgba(201,168,76,.2);font-weight:500}.badge{display:inline-flex;align-items:center;font-size:.6875rem;font-weight:600;letter-spacing:.06em;padding:2px 8px;border-radius:3px;text-transform:uppercase}.badge-hot{background:var(--accent-red);color:#fff}.badge-bestseller{background:var(--gold);color:#000}.badge-new{background:#2e7d52;color:#fff}.badge-soldout{background:#333;color:var(--text-muted)}.search-input{background:hsla(0,0%,100%,.05);border:1px solid var(--border-light);border-radius:6px;color:var(--text-primary);padding:8px 14px 8px 38px;font-size:.875rem;font-family:DM Sans,sans-serif;outline:none;transition:border-color .2s,background .2s;width:240px}.search-input::placeholder{color:var(--text-muted)}.search-input:focus{border-color:rgba(201,168,76,.4);background:hsla(0,0%,100%,.07)}@media (max-width:768px){:root{--sidebar-width:0px;--header-height:60px}.search-input{width:160px}}.btn-cart-gold{position:relative;overflow:hidden;background:linear-gradient(135deg,#c9a227,#e6c88b 50%,#c9a227);background-size:200% 100%;color:#0a0803;font-weight:700;font-size:.8125rem;letter-spacing:.04em;padding:.5rem 1.1rem;border-radius:4px;border:none;cursor:pointer;transition:background-position .4s ease,box-shadow .2s;box-shadow:0 2px 12px rgba(201,162,39,.25);font-family:DM Sans,sans-serif}.btn-cart-gold:after{content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.35),transparent);transform:skewX(-20deg);transition:left .45s ease}.btn-cart-gold:hover{background-position:100% 0;box-shadow:0 4px 20px rgba(201,162,39,.45)}.btn-cart-gold:hover:after{left:160%}@keyframes flyToCart{0%{transform:scale(1) translate(0);opacity:1}60%{transform:scale(.35) translate(var(--fly-x),var(--fly-y));opacity:.7}to{transform:scale(.05) translate(var(--fly-x),var(--fly-y));opacity:0}}.fly-img{position:fixed;width:80px;height:80px;border-radius:8px;object-fit:cover;pointer-events:none;z-index:9999;animation:flyToCart .65s cubic-bezier(.4,0,.2,1) forwards}@keyframes blinkDot{0%,to{opacity:1}50%{opacity:.15}}@keyframes barShimmer{0%{filter:brightness(1) contrast(1)}50%{filter:brightness(1.35) contrast(1.15) saturate(1.2)}to{filter:brightness(1) contrast(1)}}.chart-metallic canvas{animation:barShimmer 2s ease-in-out infinite}.btn-review-ruby{position:relative;overflow:hidden;background:linear-gradient(135deg,#c0392b,#8b0000 50%,#6b0000);color:#fff;font-weight:700;font-size:.8125rem;letter-spacing:.04em;padding:.5rem 1.1rem;border-radius:4px;border:1px solid hsla(0,100%,70%,.2);cursor:pointer;font-family:DM Sans,sans-serif;box-shadow:0 2px 12px rgba(139,0,0,.35)}.btn-review-ruby:after{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;background:linear-gradient(90deg,transparent,hsla(0,100%,93%,.55),transparent);transform:skewX(-22deg);animation:rubyFlare 3s ease-in-out infinite}@keyframes rubyFlare{0%{left:-120%}30%{left:160%}to{left:160%}}@keyframes cartPulse{0%{transform:scale(1)}40%{transform:scale(1.45)}to{transform:scale(1)}}.cart-badge-pulse{animation:cartPulse .35s ease}@keyframes tagSwing{0%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}to{transform:rotate(-6deg)}}.price-tag-swing{animation:tagSwing 2.4s ease-in-out infinite;transform-origin:top right}