:root {
    --p50: #f5f3ff;
    --p100: #ede9fe;
    --p200: #ddd6fe;
    --p300: #c4b5fd;
    --p400: #a78bfa;
    --p500: #8b5cf6;
    --p600: #7c3aed;
    --p700: #6d28d9;
    --p800: #5b21b6;
    --p900: #4c1d95;
    --g50: #f0fdf4;
    --g500: #22c55e;
}

html { scroll-behavior: smooth; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--p300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--p400); }

/* ── Pulsing dot indicator ── */
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.pulse-dot-green { background: var(--g500); animation: pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── Cart badge pop ── */
.cart-badge { animation: popIn .3s ease-out; }
@keyframes popIn { 0%{transform:scale(0)} 50%{transform:scale(1.3)} 100%{transform:scale(1)} }

/* ── Toast ── */
.toast-notification {
    position: fixed; top: 1rem; left: 50%; transform: translateX(-50%);
    z-index: 999; background: #1f2937; color: #fff; font-size: .875rem;
    font-weight: 500; padding: .75rem 1.5rem; border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
    animation: toastIn .3s ease-out;
}
@keyframes toastIn { from{opacity:0;transform:translateX(-50%) translateY(-.5rem)} to{opacity:1;transform:translateX(-50%) translateY(0)} }

/* ── Product card ── */
.product-card { transition: transform .2s ease, box-shadow .2s ease; }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px -8px rgba(124,58,237,.15); }
.product-card-img { transition: transform .4s ease; }
.product-card:hover .product-card-img { transform: scale(1.08); }

/* ── Skeleton ── */
.skeleton { background: linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── Scrollbar hide ── */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Safe area ── */
.safe-area-bottom { padding-bottom: max(.625rem, env(safe-area-inset-bottom)); }

/* ── Line clamp ── */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Mini cart ── */
.mini-cart-backdrop { transition: opacity .3s ease; }
.mini-cart-panel { transition: transform .3s cubic-bezier(.4,0,.2,1); }
.mini-cart-item + .mini-cart-item { border-top: 1px solid #f3f4f6; }
.qty-btn { transition: all .15s ease; }
.qty-btn:active { transform: scale(.9); }

/* ── Product page ── */
.product-gallery-img { transition: transform .4s ease; }
.product-gallery-img:hover { transform: scale(1.05); }
.sticky-cta { transition: transform .3s ease; }

/* ── RTL helpers ── */
[dir="rtl"] .mini-cart-panel { transform: translateX(100%); }
[dir="rtl"] .mini-cart-panel.open { transform: translateX(0); }

/* ── Category chip ── */
.chip { transition: all .15s ease; }
.chip:active { transform: scale(.95); }

/* ── Purple gradient utilities ── */
.purple-glow { box-shadow: 0 0 20px rgba(124,58,237,.15); }
.purple-glow-lg { box-shadow: 0 0 40px rgba(124,58,237,.12); }
.gradient-purple { background: linear-gradient(135deg, var(--p600), var(--p800)); }
.gradient-purple-light { background: linear-gradient(135deg, var(--p500), var(--p700)); }
.gradient-purple-subtle { background: linear-gradient(135deg, var(--p50), var(--p100)); }

/* ── Responsive table ── */
@media(max-width:640px){
    .responsive-table{display:block}
    .responsive-table thead{display:none}
    .responsive-table tbody tr{display:block;margin-bottom:1rem;border:1px solid #e5e7eb;border-radius:8px;padding:1rem}
    .responsive-table tbody td{display:flex;justify-content:space-between;padding:.5rem 0;border:none}
    .responsive-table tbody td::before{content:attr(data-label);font-weight:600;color:#6b7280}
}

/* ── Plan card ── */
.plan-card-featured { border: 2px solid var(--p500); transform: scale(1.02); }

/* ── Star rating fill ── */
.star-rating { color: #f59e0b; }