/* ============================================================
   ShopVibe — Production CSS
   Brand: #960010 | Font: Inter | Glassmorphism + Wood
   ============================================================ */

/* ── Variables ────────────────────────────────────────────── */
:root {
  --brand:#960010;--brand-dark:#6e000b;--brand-light:#c8002c;
  --brand-pale:#fff0f2;--accent:#ff6b35;
  --dark:#1a1a2e;--text:#2d2d2d;--text-muted:#6b7280;
  --bg:#f7f3ef;--card-bg:#fff;--border:#e5e7eb;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06);
  --shadow:0 4px 20px rgba(0,0,0,.08);
  --shadow-lg:0 10px 40px rgba(0,0,0,.12);
  --radius:12px;--radius-lg:20px;
  --transition:all .25s cubic-bezier(.4,0,.2,1);
  --font:'Inter',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:15px;line-height:1.6;margin:0;}
body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;z-index:-1;}
img{max-width:100%;height:auto;}
a{color:var(--brand);text-decoration:none;transition:var(--transition);}
a:hover{color:var(--brand-dark);}

/* ── Topbar ─────────────────────────────────────────────── */
.topbar{background:var(--dark);color:rgba(255,255,255,.8);padding:6px 0;font-size:12.5px;}
.topbar a{color:rgba(255,255,255,.8);}.topbar a:hover{color:#fff;}
.topbar-right{gap:16px!important;}

/* ── Navbar ─────────────────────────────────────────────── */
.sv-navbar{background:rgba(255,255,255,.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:12px 0;box-shadow:0 2px 12px rgba(0,0,0,.06);position:sticky;top:0;z-index:1040;}
.brand-icon{width:38px;height:38px;background:var(--brand);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;}
.brand-name{font-weight:800;font-size:22px;color:var(--dark);letter-spacing:-.5px;}
.brand-accent{color:var(--brand);}
.search-group{border-radius:40px;overflow:hidden;border:2px solid var(--border);transition:var(--transition);display:flex;}
.search-group:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(150,0,16,.1);}
.search-input{border:0;padding:10px 18px;font-size:14px;background:#f9fafb;flex:1;outline:none;font-family:var(--font);}
.btn-search{background:var(--brand);color:#fff;border:0;padding:10px 18px;cursor:pointer;transition:var(--transition);}
.btn-search:hover{background:var(--brand-dark);}
.nav-icon-btn{position:relative;width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--dark);font-size:18px;transition:var(--transition);border:none;background:transparent;cursor:pointer;}
.nav-icon-btn:hover{background:var(--brand-pale);color:var(--brand);}
.icon-badge{position:absolute;top:2px;right:2px;min-width:18px;height:18px;background:var(--brand);color:#fff;border-radius:50%;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #fff;}
.sv-nav-link{font-weight:500;color:var(--text);padding:8px 14px;border-radius:8px;transition:var(--transition);font-size:14.5px;cursor:pointer;border:none;background:none;}
.sv-nav-link:hover,.sv-nav-link.active{color:var(--brand);background:var(--brand-pale);}
.dropdown-menu{border:none;box-shadow:var(--shadow-lg);border-radius:var(--radius);padding:8px;}
.dropdown-item{border-radius:8px;padding:8px 14px;font-size:14px;color:var(--text);}
.dropdown-item:hover{background:var(--brand-pale);color:var(--brand);}

/* ── Search suggestions ──────────────────────────────────── */
.search-suggestions{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:9999;max-height:380px;overflow-y:auto;margin-top:4px;}
.suggestion-item{padding:10px 16px;cursor:pointer;display:flex;align-items:center;gap:12px;transition:var(--transition);}
.suggestion-item:hover{background:var(--brand-pale);}
.suggestion-img{width:40px;height:40px;object-fit:cover;border-radius:6px;}

/* ── Buttons ─────────────────────────────────────────────── */
.sv-btn-primary{background:var(--brand);color:#fff;border:2px solid var(--brand);padding:10px 24px;border-radius:8px;font-weight:600;font-size:14px;transition:var(--transition);display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:var(--font);}
.sv-btn-primary:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff;transform:translateY(-1px);box-shadow:0 4px 16px rgba(150,0,16,.3);}
.sv-btn-outline{background:transparent;color:var(--brand);border:2px solid var(--brand);padding:10px 24px;border-radius:8px;font-weight:600;font-size:14px;transition:var(--transition);display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:var(--font);}
.sv-btn-outline:hover{background:var(--brand);color:#fff;transform:translateY(-1px);}
.btn-wish{background:none;border:none;padding:0;cursor:pointer;color:var(--text-muted);transition:var(--transition);}
.btn-wish:hover,.btn-wish.active{color:#e53e3e;}

/* ── Hero ────────────────────────────────────────────────── */
.hero-section{background:linear-gradient(135deg,var(--dark) 0%,#2d1b2e 50%,var(--brand-dark) 100%);min-height:540px;display:flex;align-items:center;position:relative;overflow:hidden;}
.hero-section::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 70% 50%,rgba(150,0,16,.4) 0%,transparent 60%);}
.hero-content{position:relative;z-index:2;}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);padding:6px 16px;border-radius:40px;color:rgba(255,255,255,.9);font-size:13px;font-weight:500;margin-bottom:16px;}
.hero-title{font-size:clamp(2rem,5vw,3.5rem);font-weight:900;color:#fff;line-height:1.15;letter-spacing:-.5px;margin-bottom:16px;}
.hero-title span{color:#ff4d6d;}
.hero-subtitle{color:rgba(255,255,255,.75);font-size:17px;margin-bottom:32px;max-width:500px;}
.hero-badge{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:8px 16px;color:rgba(255,255,255,.85);font-size:13px;}
.hero-floating{position:absolute;background:#fff;border-radius:var(--radius);padding:12px 16px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:10px;font-size:13px;animation:float 3s ease-in-out infinite;}
.hero-floating.top{top:20px;right:-20px;animation-delay:.3s;}
.hero-floating.bottom{bottom:20px;left:-20px;animation-delay:.7s;}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ── Section headers ─────────────────────────────────────── */
.section-eyebrow{display:inline-block;background:var(--brand-pale);color:var(--brand);padding:4px 16px;border-radius:40px;font-size:12.5px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;margin-bottom:10px;}
.section-title{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;color:var(--dark);margin-bottom:8px;}
.section-subtitle{color:var(--text-muted);font-size:15px;max-width:520px;margin:0 auto;}

/* ── Category cards ─────────────────────────────────────── */
.category-card{background:var(--card-bg);border-radius:var(--radius-lg);padding:24px 16px;text-align:center;transition:var(--transition);border:2px solid transparent;cursor:pointer;box-shadow:var(--shadow-sm);}
.category-card:hover{transform:translateY(-6px);border-color:var(--brand);box-shadow:var(--shadow-lg);}
.category-icon{width:72px;height:72px;background:var(--brand-pale);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:28px;color:var(--brand);transition:var(--transition);}
.category-card:hover .category-icon{background:var(--brand);color:#fff;}
.category-name{font-weight:700;color:var(--dark);font-size:15px;}
.category-count{color:var(--text-muted);font-size:12px;margin-top:4px;}

/* ── Product cards ───────────────────────────────────────── */
.product-card{background:var(--card-bg);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:var(--transition);position:relative;height:100%;display:flex;flex-direction:column;}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.product-img-wrap{position:relative;overflow:hidden;background:#f9fafb;aspect-ratio:1/1;}
.product-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.product-card:hover .product-img-wrap img{transform:scale(1.06);}
.product-badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:4px;z-index:2;}
.badge-sale{background:var(--brand);color:#fff;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;}
.badge-new{background:#10b981;color:#fff;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;}
.badge-urgent{background:#d97706;color:#fff;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;animation:pulse 1.5s infinite;}
.product-actions{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:6px;opacity:0;transform:translateX(10px);transition:var(--transition);z-index:3;}
.product-card:hover .product-actions{opacity:1;transform:translateX(0);}
.product-action-btn{width:36px;height:36px;background:#fff;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;color:var(--text);box-shadow:var(--shadow);transition:var(--transition);}
.product-action-btn:hover{background:var(--brand);color:#fff;}
.product-body{padding:14px 16px 16px;flex:1;display:flex;flex-direction:column;}
.product-category{font-size:11.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;}
.product-name{font-weight:600;color:var(--dark);font-size:14.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:8px;flex:1;}
.product-rating{display:flex;align-items:center;gap:6px;font-size:12px;margin-bottom:10px;}
.rating-count{color:var(--text-muted);}
.product-price{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
.price-current{font-size:18px;font-weight:800;color:var(--brand);}
.price-original{font-size:13px;text-decoration:line-through;color:var(--text-muted);}
.price-discount{background:var(--brand-pale);color:var(--brand);font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;}
.btn-add-cart{width:100%;background:var(--dark);color:#fff;border:none;padding:10px;border-radius:8px;font-weight:600;font-size:13.5px;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font);}
.btn-add-cart:hover{background:var(--brand);}
.btn-add-cart:disabled{background:#ccc;cursor:not-allowed;}
.out-of-stock-label{text-align:center;color:#e53e3e;font-size:13px;font-weight:600;padding:8px;}
.stock-warning{font-size:12px;color:#d97706;font-weight:600;text-align:center;margin-bottom:6px;}

/* ── Skeleton loaders ───────────────────────────────────── */
.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:6px;}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);}
.skeleton-img{height:200px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;}
.skeleton-line{height:12px;margin-bottom:8px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:4px;}
.skeleton-body{padding:14px;}

/* ── Load More button ───────────────────────────────────── */
.load-more-btn{background:#fff;color:var(--dark);border:2px solid var(--border);padding:12px 32px;border-radius:30px;font-weight:700;font-size:14.5px;cursor:pointer;transition:var(--transition);display:inline-flex;align-items:center;gap:8px;font-family:var(--font);}
.load-more-btn:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-pale);}
.load-more-btn:disabled{opacity:.5;cursor:not-allowed;}

/* ── Quick view modal ───────────────────────────────────── */
#quickViewModal .modal-content{border-radius:var(--radius-lg);border:none;overflow:hidden;}
#quickViewModal .modal-body{padding:0;}
.qv-image{width:100%;aspect-ratio:1/1;object-fit:cover;}
.qv-body{padding:28px;}
.qv-price{font-size:24px;font-weight:900;color:var(--brand);}
.qv-original{font-size:15px;text-decoration:line-through;color:var(--text-muted);}

/* ── Floating cart ───────────────────────────────────────── */
.floating-cart{position:fixed;bottom:24px;right:24px;width:56px;height:56px;background:var(--brand);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 6px 24px rgba(150,0,16,.4);z-index:999;transition:var(--transition);cursor:pointer;border:none;}
.floating-cart:hover{transform:scale(1.1);background:var(--brand-dark);}
.floating-cart-count{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;background:var(--dark);color:#fff;border-radius:50%;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #fff;}

/* ── Back to top ─────────────────────────────────────────── */
#backToTop{position:fixed;bottom:90px;right:24px;width:44px;height:44px;background:#fff;border:2px solid var(--border);border-radius:50%;display:none;align-items:center;justify-content:center;font-size:18px;color:var(--text-muted);cursor:pointer;z-index:998;transition:var(--transition);box-shadow:var(--shadow);}
#backToTop:hover{background:var(--brand);color:#fff;border-color:var(--brand);}
#backToTop.show{display:flex;}

/* ── WhatsApp button ─────────────────────────────────────── */
#whatsappBtn{position:fixed;bottom:144px;right:24px;width:44px;height:44px;background:#25d366;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;cursor:pointer;z-index:997;transition:var(--transition);box-shadow:0 4px 16px rgba(37,211,102,.4);}
#whatsappBtn:hover{transform:scale(1.1);}

/* ── Cookie consent ──────────────────────────────────────── */
#cookieConsent{position:fixed;bottom:0;left:0;right:0;background:var(--dark);color:#fff;padding:16px 24px;z-index:9998;transform:translateY(100%);transition:transform .4s ease;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
#cookieConsent.show{transform:translateY(0);}
#cookieConsent p{margin:0;font-size:13.5px;color:rgba(255,255,255,.8);}
#cookieConsent a{color:#ff4d6d;}

/* ── Share buttons ────────────────────────────────────────── */
.share-buttons{display:flex;gap:8px;flex-wrap:wrap;}
.share-btn{width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;transition:var(--transition);}
.share-btn:hover{transform:scale(1.1);}
.share-whatsapp{background:#25d366;}
.share-twitter{background:#1da1f2;}
.share-facebook{background:#1877f2;}
.share-copy{background:#6b7280;}

/* ── Cards / forms / utils ────────────────────────────────── */
.sv-card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);border:none;}
.sv-card .sv-card-header,.sv-card .card-header{background:transparent;border-bottom:1px solid var(--border);padding:16px 20px;font-weight:700;font-size:15px;}
.stat-card{background:var(--card-bg);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);display:flex;align-items:center;gap:16px;transition:var(--transition);}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.stat-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.si-red{background:#fff0f2;color:var(--brand);}.si-green{background:#f0fdf4;color:#16a34a;}
.si-blue{background:#eff6ff;color:#2563eb;}.si-orange{background:#fff7ed;color:#ea580c;}
.si-purple{background:#faf5ff;color:#7c3aed;}
.stat-value{font-size:24px;font-weight:800;color:var(--dark);line-height:1;}
.stat-label{font-size:13px;color:var(--text-muted);margin-top:3px;}
.sv-label{font-weight:600;font-size:13.5px;color:var(--text);margin-bottom:6px;display:block;}
.sv-input{width:100%;border:1.5px solid var(--border);border-radius:8px;padding:10px 14px;font-size:14px;transition:var(--transition);background:#fff;color:var(--text);font-family:var(--font);outline:none;}
.sv-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(150,0,16,.08);}
.sv-form-group{margin-bottom:18px;}
.sv-table{width:100%;border-collapse:collapse;}
.sv-table th{font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);padding:12px 16px;background:#f9fafb;border-bottom:1px solid var(--border);}
.sv-table td{padding:14px 16px;border-bottom:1px solid var(--border);font-size:14px;color:var(--text);vertical-align:middle;}
.sv-table tr:hover td{background:#fafafa;}
.sv-table tr:last-child td{border-bottom:none;}
.sv-pagination{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.sv-page-btn{width:36px;height:36px;border-radius:8px;border:1px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;cursor:pointer;transition:var(--transition);color:var(--text);text-decoration:none;}
.sv-page-btn:hover,.sv-page-btn.active{background:var(--brand);color:#fff;border-color:var(--brand);}
.sv-page-btn.disabled{opacity:.4;pointer-events:none;}

/* ── Auth ──────────────────────────────────────────────────── */
.auth-page{background:linear-gradient(135deg,var(--dark) 0%,#2d1b2e 100%);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 16px;position:relative;}
.auth-page::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23960010' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");}
.auth-card{background:rgba(255,255,255,.97);border-radius:var(--radius-lg);padding:40px;width:100%;max-width:440px;position:relative;box-shadow:0 25px 80px rgba(0,0,0,.4);}
.auth-title{font-size:24px;font-weight:800;color:var(--dark);margin-bottom:4px;}
.auth-subtitle{color:var(--text-muted);font-size:14px;}
.auth-divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--text-muted);font-size:13px;}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border);}
.strength-bar{height:4px;border-radius:4px;transition:var(--transition);}

/* ── Checkout ──────────────────────────────────────────────── */
.checkout-steps{display:flex;align-items:center;margin-bottom:2rem;}
.checkout-step{display:flex;align-items:center;flex:1;}
.step-circle{width:36px;height:36px;border-radius:50%;background:var(--border);color:var(--text-muted);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0;transition:var(--transition);}
.step-active .step-circle{background:var(--brand);color:#fff;}
.step-done .step-circle{background:#16a34a;color:#fff;}
.step-label{font-size:12px;font-weight:600;color:var(--text-muted);margin-left:8px;white-space:nowrap;}
.step-active .step-label{color:var(--brand);}
.step-line{flex:1;height:2px;background:var(--border);margin:0 4px;}
.summary-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:14px;}
.summary-row.total{font-weight:800;font-size:18px;border-top:2px solid var(--border);margin-top:8px;padding-top:14px;color:var(--brand);}
.order-summary{background:var(--card-bg);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);}
.qty-control{display:flex;align-items:center;border:1px solid var(--border);border-radius:8px;overflow:hidden;width:fit-content;}
.qty-btn{background:#f9fafb;border:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;font-weight:700;transition:var(--transition);color:var(--text);}
.qty-btn:hover{background:var(--brand);color:#fff;}
.qty-input,.qty-input-el{border:none;border-left:1px solid var(--border);border-right:1px solid var(--border);width:48px;height:32px;text-align:center;font-weight:600;font-size:14px;background:#fff;}
.qty-input:focus,.qty-input-el:focus{outline:none;}

/* ── Cart ───────────────────────────────────────────────────── */
.cart-item-img{width:80px;height:80px;border-radius:10px;object-fit:cover;flex-shrink:0;background:#f9fafb;}
.cart-item-name{font-weight:600;color:var(--dark);font-size:14.5px;}
.cart-item-meta{color:var(--text-muted);font-size:12.5px;margin-top:2px;}
.cart-item-price{font-weight:700;color:var(--brand);font-size:16px;}

/* ── Order timeline ─────────────────────────────────────────── */
.order-timeline{position:relative;padding:0 0 0 24px;}
.order-timeline::before{content:'';position:absolute;left:7px;top:0;bottom:0;width:2px;background:var(--border);}
.timeline-item{position:relative;padding-bottom:24px;}
.timeline-dot{position:absolute;left:-20px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--border);border:2px solid #fff;}
.tl-done .timeline-dot{background:#16a34a;}
.tl-active .timeline-dot{background:var(--brand);box-shadow:0 0 0 4px rgba(150,0,16,.2);}
.timeline-title{font-weight:700;font-size:14px;color:var(--dark);}
.timeline-desc{font-size:12.5px;color:var(--text-muted);margin-top:2px;}

/* ── Dashboard ──────────────────────────────────────────────── */
.dashboard-sidebar{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;}
.sidebar-avatar{width:72px;height:72px;border-radius:50%;background:var(--brand-pale);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;color:var(--brand);margin:0 auto 10px;}
.sidebar-name{font-weight:700;text-align:center;margin-bottom:2px;}
.sidebar-email{font-size:12.5px;color:var(--text-muted);text-align:center;}
.sidebar-menu{margin-top:16px;}
.sidebar-link{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;color:var(--text);font-weight:500;font-size:14px;transition:var(--transition);margin-bottom:2px;cursor:pointer;border:none;background:none;width:100%;}
.sidebar-link:hover,.sidebar-link.active{background:var(--brand-pale);color:var(--brand);}
.sidebar-link i{width:18px;text-align:center;}

/* ── Admin ──────────────────────────────────────────────────── */
.admin-sidebar{width:260px;min-height:100vh;background:var(--dark);position:fixed;top:0;left:0;bottom:0;overflow-y:auto;z-index:1000;transition:var(--transition);}
.admin-sidebar-brand{padding:20px;border-bottom:1px solid rgba(255,255,255,.08);}
.admin-nav-section{padding:16px 24px 6px;font-size:10.5px;font-weight:700;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.8px;}
.admin-nav-item{padding:0 12px;margin-bottom:2px;}
.admin-nav-link{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:8px;color:rgba(255,255,255,.7);font-size:14px;font-weight:500;transition:var(--transition);cursor:pointer;border:none;background:none;width:100%;text-align:left;}
.admin-nav-link:hover{background:rgba(255,255,255,.08);color:#fff;}
.admin-nav-link.active{background:var(--brand);color:#fff;}
.admin-nav-link i{width:18px;text-align:center;}
.admin-content{margin-left:260px;min-height:100vh;}
.admin-topbar{background:#fff;border-bottom:1px solid var(--border);padding:14px 24px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:var(--shadow-sm);}
.admin-page{padding:24px;}

/* ── Footer ─────────────────────────────────────────────────── */
.sv-footer{background:var(--dark);}
.footer-top{padding:60px 0 40px;}
.footer-heading{color:#fff;font-weight:700;font-size:14px;margin-bottom:14px;}
.footer-text{color:rgba(255,255,255,.5);font-size:13.5px;line-height:1.7;}
.footer-links{list-style:none;padding:0;margin:0;}
.footer-links li{margin-bottom:8px;}
.footer-links a{color:rgba(255,255,255,.55);font-size:13.5px;transition:var(--transition);}
.footer-links a:hover{color:var(--brand-light);padding-left:4px;}
.social-btn{width:36px;height:36px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);font-size:14px;transition:var(--transition);margin-right:6px;}
.social-btn:hover{background:var(--brand);border-color:var(--brand);color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:18px 0;color:rgba(255,255,255,.4);font-size:13px;}
.newsletter-form .form-control{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:#fff;padding:10px 14px;border-radius:8px 0 0 8px;}
.newsletter-form .form-control::placeholder{color:rgba(255,255,255,.4);}
.newsletter-form .btn{border-radius:0 8px 8px 0;background:var(--brand);color:#fff;border:none;padding:10px 18px;font-weight:700;}
.badge-trust{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.8);padding:4px 10px;border-radius:20px;font-size:12px;border:1px solid rgba(255,255,255,.15);}

/* ── Toasts + Alerts ────────────────────────────────────────── */
.toast{background:var(--dark);color:#fff;border-radius:var(--radius);}
.alert{border:none;border-radius:10px;font-size:14px;}
.alert-success{background:#f0fdf4;color:#166534;}
.alert-danger{background:#fff0f2;color:#991b1b;}
.alert-warning{background:#fffbeb;color:#92400e;}
.alert-info{background:#eff6ff;color:#1e40af;}

/* ── Animations ─────────────────────────────────────────────── */
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.fade-in-up{animation:fadeInUp .5s ease forwards;}

/* ── Empty states ───────────────────────────────────────────── */
.empty-state{text-align:center;padding:60px 20px;}
.empty-state-icon{font-size:64px;margin-bottom:16px;opacity:.4;}
.empty-state h4{font-weight:700;color:var(--dark);margin-bottom:8px;}
.empty-state p{color:var(--text-muted);max-width:320px;margin:0 auto 24px;}

/* ── Newsletter section ─────────────────────────────────────── */
.newsletter-section{background:linear-gradient(135deg,var(--dark),#2d1b2e);padding:60px 0;position:relative;overflow:hidden;}
.newsletter-section::after{content:'';position:absolute;right:-10%;bottom:-20%;width:400px;height:400px;background:radial-gradient(circle,rgba(150,0,16,.3),transparent 60%);border-radius:50%;}

/* ── Responsive ─────────────────────────────────────────────── */
@media(max-width:991px){.admin-sidebar{transform:translateX(-100%);}.admin-sidebar.show{transform:translateX(0);}.admin-content{margin-left:0;}}
@media(max-width:575px){.auth-card{padding:24px 20px;}.sv-btn-primary,.sv-btn-outline{padding:10px 18px;}}

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:#f1f1f1;}
::-webkit-scrollbar-thumb{background:var(--brand);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--brand-dark);}

/* ── Print ──────────────────────────────────────────────────── */
@media print{.sv-navbar,.sv-footer,.floating-cart,#backToTop,#whatsappBtn,.topbar,.admin-sidebar,#cookieConsent{display:none!important;}.admin-content{margin:0!important;}}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS — Full Coverage
   1200px Desktop | 992px Laptop | 768px Tablet | 576px Mobile | 360px Small
══════════════════════════════════════════════════════════════ */

/* ── Tablet (≤ 992px) ──────────────────────────────────────── */
@media (max-width:992px) {

  /* Hero */
  .hero-section { min-height: 420px; padding: 40px 0; }
  .hero-title { font-size: clamp(1.8rem, 5vw, 2.8rem); }
  .hero-subtitle { font-size: 15px; }
  .hero-floating { display: none; } /* hide floating badges on tablet/mobile */

  /* Navbar */
  .sv-navbar .container { flex-wrap: nowrap; }

  /* Cart item image */
  .cart-item-img { width: 70px; height: 70px; }

  /* Checkout steps — hide labels on tablet */
  .step-label { display: none !important; }
  .step-circle { width: 32px; height: 32px; font-size: 13px; }
  .step-line { margin: 0 2px; }

  /* Dashboard sidebar — stack on mobile */
  .dashboard-sidebar { margin-bottom: 24px; }

  /* Order summary — full width on tablet */
  .order-summary { position: static !important; }

  /* Floating cart + back-to-top — adjust for smaller right edge */
  .floating-cart { width: 50px; height: 50px; font-size: 18px; bottom: 20px; right: 16px; }
  #backToTop    { width: 40px; height: 40px; bottom: 80px; right: 16px; }
  #whatsappBtn  { width: 40px; height: 40px; bottom: 132px; right: 16px; }

  /* Product gallery */
  .gallery-thumb { width: 60px; height: 60px; }
}

/* ── Mobile (≤ 768px) ──────────────────────────────────────── */
@media (max-width:768px) {

  /* Global */
  body { font-size: 14px; }
  .container { padding-left: 16px; padding-right: 16px; }

  /* Topbar — hide on very small */
  .topbar { display: none; }

  /* Navbar */
  .brand-name { font-size: 18px; }
  .brand-icon { width: 32px; height: 32px; font-size: 15px; }

  /* Hero */
  .hero-section { min-height: auto; padding: 32px 0 28px; text-align: center; }
  .hero-title { font-size: clamp(1.6rem, 6vw, 2.4rem); }
  .hero-subtitle { font-size: 14px; margin-bottom: 20px; max-width: 100%; }
  .hero-actions { justify-content: center; }
  .hero-badge { font-size: 12px; padding: 6px 12px; }
  .hero-content { padding: 0 8px; }

  /* Sections */
  .section-title { font-size: clamp(1.3rem, 5vw, 1.8rem); }
  .py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }

  /* Category cards */
  .category-icon { width: 56px; height: 56px; font-size: 22px; }
  .category-name { font-size: 13px; }
  .category-count { font-size: 11px; }
  .category-card { padding: 18px 12px; }

  /* Product cards */
  .product-name { font-size: 13px; }
  .price-current { font-size: 15px; }
  .btn-add-cart { font-size: 12px; padding: 8px 10px; }
  .product-body { padding: 10px; }
  .product-actions { opacity: 1; transform: none; } /* always visible on touch */

  /* Cart */
  .cart-item-img { width: 60px; height: 60px; border-radius: 8px; }
  .cart-item-name { font-size: 13px; }
  .qty-input, .qty-input-el { width: 40px; height: 30px; font-size: 13px; }
  .qty-btn { width: 28px; height: 30px; font-size: 14px; }

  /* Checkout */
  .checkout-steps { margin-bottom: 1.2rem; }
  .step-circle { width: 28px; height: 28px; font-size: 12px; }

  /* Order summary */
  .order-summary { margin-top: 16px; }
  .summary-row { font-size: 13px; }
  .summary-row.total { font-size: 16px; }

  /* Buttons */
  .sv-btn-primary, .sv-btn-outline { padding: 10px 16px; font-size: 13.5px; }

  /* Auth cards */
  .auth-card { padding: 24px 18px; border-radius: 16px; }
  .auth-title { font-size: 20px; }

  /* Footer */
  .footer-top { padding: 36px 0 24px; }
  .social-btn { width: 32px; height: 32px; font-size: 13px; }

  /* Floating buttons */
  .floating-cart { width: 48px; height: 48px; font-size: 18px; bottom: 16px; right: 14px; }
  #backToTop    { width: 38px; height: 38px; font-size: 16px; bottom: 74px; right: 14px; }
  #whatsappBtn  { width: 38px; height: 38px; font-size: 18px; bottom: 122px; right: 14px; }

  /* Cookie consent — tighter on mobile */
  #cookieConsent { padding: 12px 16px; flex-direction: column; align-items: flex-start; gap: 10px; }

  /* Dashboard sidebar */
  .sidebar-avatar { width: 60px; height: 60px; font-size: 22px; }
  .sidebar-name { font-size: 14px; }

  /* Product detail */
  .product-detail-title { font-size: 1.3rem; }
  .product-gallery-thumbs { gap: 6px; }
  .gallery-thumb { width: 52px; height: 52px; border-radius: 8px; }

  /* Reviews */
  .review-card { padding: 14px; }
  .reviewer-avatar { width: 36px; height: 36px; font-size: 14px; }

  /* Pagination */
  .sv-pagination .page-link { padding: 6px 10px; font-size: 13px; }

  /* Share buttons */
  .share-btn { width: 34px; height: 34px; font-size: 14px; }

  /* Invoice table wrapper */
  .invoice-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Skeleton loaders */
  .skeleton-img { height: 150px; }
}

/* ── Small Mobile (≤ 576px) ────────────────────────────────── */
@media (max-width:576px) {

  /* Topbar stays hidden */

  /* Hero — compact */
  .hero-section { padding: 24px 0; }
  .hero-actions .sv-btn-primary,
  .hero-actions .sv-btn-outline { flex: 1; justify-content: center; max-width: 160px; }

  /* Product cards — 2 per row, smaller */
  .product-img-wrap { aspect-ratio: 1/1; }
  .product-name { -webkit-line-clamp: 1; font-size: 12.5px; }
  .price-current { font-size: 14px; }
  .price-original { font-size: 11px; }
  .price-discount { font-size: 10px; }
  .badge-sale, .badge-new { font-size: 10px; padding: 2px 7px; }

  /* Cart — stack image and info */
  .cart-item-img { width: 54px; height: 54px; }

  /* Checkout — compact form */
  .sv-label { font-size: 13px; }
  .sv-input { font-size: 14px; padding: 9px 12px; }

  /* Order summary — compact */
  .order-summary { padding: 14px; }

  /* Footer — center everything */
  .footer-bottom .d-flex { flex-direction: column; text-align: center; gap: 6px !important; }
  .newsletter-form .form-control { font-size: 13px; }

  /* Load more button */
  .load-more-btn { width: 100%; justify-content: center; }

  /* Section header */
  .section-header .d-flex { flex-direction: column; gap: 8px !important; }
  .section-header .sv-btn-outline { align-self: flex-start; }

  /* Dashboard stats cards */
  .stat-card { padding: 14px; }
  .stat-value { font-size: 1.4rem; }

  /* Track order steps */
  .step-bar { gap: 2px; }
  .step-bar-dot { width: 28px; height: 28px; font-size: 11px; }
}

/* ── Extra Small (≤ 390px — iPhone SE, older Androids) ────── */
@media (max-width:390px) {

  body { font-size: 13px; }

  .hero-title { font-size: 1.5rem; }
  .hero-actions { flex-direction: column; }
  .hero-actions a, .hero-actions button { width: 100%; text-align: center; justify-content: center; }

  .category-card { padding: 14px 8px; }
  .category-icon { width: 48px; height: 48px; font-size: 18px; }
  .category-name { font-size: 12px; }

  .sv-btn-primary, .sv-btn-outline { padding: 9px 14px; font-size: 13px; }

  .auth-card { padding: 20px 14px; }
  .auth-title { font-size: 18px; }

  .cart-item-img { width: 50px; height: 50px; }
  .cart-item-name { font-size: 12.5px; }

  /* Floating buttons — smaller and closer to edge */
  .floating-cart { width: 44px; height: 44px; font-size: 16px; bottom: 14px; right: 10px; }
  #backToTop    { width: 36px; height: 36px; bottom: 68px; right: 10px; }
  #whatsappBtn  { width: 36px; height: 36px; bottom: 114px; right: 10px; }

  /* Product name single line on tiny screens */
  .product-name { font-size: 12px; }
  .btn-add-cart { font-size: 11.5px; padding: 7px 8px; }
}

/* ── Landscape phone ────────────────────────────────────────── */
@media (max-width:768px) and (orientation:landscape) {
  .hero-section { min-height: 280px; padding: 20px 0; }
  .hero-title { font-size: 1.6rem; }
}

/* ── Touch devices — show product actions always ───────────── */
@media (hover:none) {
  .product-actions { opacity: 1 !important; transform: none !important; }
  .product-card:hover { transform: none; } /* disable hover lift on touch */
  .category-card:hover { transform: none; }
  .sv-btn-primary:hover { transform: none; }
  .sv-btn-outline:hover { transform: none; }
}