/* ============================================================
   Viacare Marketplace — public e-commerce theme
   Inspired by the best of Jumia / AliExpress UX
   ============================================================ */
:root {
    --sc-orange: #f68b1e;
    --sc-orange-dark: #e07f14;
    --sc-orange-soft: #fff3e4;
    --sc-navy: #14243b;
    --sc-navy-2: #1d3557;
    --sc-ink: #212529;
    --sc-muted: #6b7280;
    --sc-faint: #9ca3af;
    --sc-bg: #f4f6f9;
    --sc-card: #ffffff;
    --sc-border: #e6e9ef;
    --sc-green: #0b7d5a;
    --sc-red: #e0354b;
    --sc-gold: #ffc107;
    --sc-radius: 14px;
    --sc-shadow: 0 4px 18px rgba(20, 36, 59, .08);
    --sc-shadow-hover: 0 14px 34px rgba(20, 36, 59, .16);
    --sc-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--sc-font);
    background: var(--sc-bg);
    color: var(--sc-ink);
    font-size: 14px;
    line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4, h5 { margin: 0; }

.sc-container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 16px; }

/* ---------- Buttons ---------- */
.sc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: none; border-radius: 10px; font-weight: 700; font-size: 13.5px; padding: 11px 20px;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.sc-btn:active { transform: scale(.97); }
.sc-btn-primary { background: var(--sc-orange); color: #fff; box-shadow: 0 8px 18px rgba(246, 139, 30, .35); }
.sc-btn-primary:hover { background: var(--sc-orange-dark); box-shadow: 0 10px 22px rgba(246, 139, 30, .45); }
.sc-btn-dark { background: var(--sc-navy); color: #fff; }
.sc-btn-dark:hover { background: var(--sc-navy-2); }
.sc-btn-outline { background: #fff; color: var(--sc-navy); border: 1.5px solid var(--sc-border); }
.sc-btn-outline:hover { border-color: var(--sc-orange); color: var(--sc-orange); }
.sc-btn-green { background: var(--sc-green); color: #fff; }
.sc-btn-ghost { background: transparent; color: var(--sc-navy); }
.sc-btn-sm { padding: 8px 14px; font-size: 12.5px; border-radius: 9px; }
.sc-btn-block { width: 100%; }

/* ---------- Header ---------- */
.sc-header { position: sticky; top: 0; z-index: 1200; background: var(--sc-navy); box-shadow: 0 4px 20px rgba(20,36,59,.35); }
.sc-header-inner { display: flex; align-items: center; gap: 18px; padding: 12px 0; flex-wrap: wrap; }
.sc-brand { display: flex; align-items: center; gap: 10px; color: #fff; }
.sc-brand img { height: 40px; width: auto; }
.sc-brand b { font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
.sc-brand b span { color: var(--sc-orange); }
.sc-search { flex: 1 1 320px; position: relative; }
.sc-search input {
    width: 100%; padding: 12px 46px 12px 18px; border: none; border-radius: 30px;
    font-size: 13.5px; background: rgba(255,255,255,.12); color: #fff; outline: none;
    transition: background .2s ease, box-shadow .2s ease;
}
.sc-search input::placeholder { color: #9fb3cc; }
.sc-search input:focus { background: rgba(255,255,255,.2); box-shadow: 0 0 0 3px rgba(246,139,30,.45); }
.sc-search button {
    position: absolute; right: 4px; top: 4px; bottom: 4px; width: 38px; border: none; border-radius: 50%;
    background: var(--sc-orange); color: #fff; font-size: 17px;
}
.sc-head-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.sc-head-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px;
    color: #dbe6f5; font-weight: 600; font-size: 13px; transition: background .2s ease, color .2s ease;
}
.sc-head-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.sc-head-btn i { font-size: 19px; }
.sc-head-btn .sc-cart-badge {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 20px; font-size: 11px; font-weight: 800;
    background: var(--sc-orange); color: #fff; display: inline-flex; align-items: center; justify-content: center;
}
.sc-user-chip { display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border-radius: 30px; background: rgba(255,255,255,.1); }
.sc-user-chip .sc-ava {
    width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--sc-orange), #ff9a3c);
    display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: #fff;
}
.sc-user-chip b { font-size: 12.5px; color: #fff; font-weight: 700; }

/* ---------- Category strip ---------- */
.sc-cats { background: #fff; border-bottom: 1px solid var(--sc-border); position: sticky; top: 64px; z-index: 1100; }
.sc-cats-inner { display: flex; align-items: center; gap: 4px; overflow-x: auto; padding: 8px 0; scrollbar-width: none; }
.sc-cats-inner::-webkit-scrollbar { display: none; }
.sc-cat {
    white-space: nowrap; padding: 8px 16px; border-radius: 30px; font-size: 12.5px; font-weight: 600;
    color: var(--sc-muted); transition: all .18s ease; display: inline-flex; align-items: center; gap: 6px;
}
.sc-cat i { font-size: 15px; }
.sc-cat:hover { color: var(--sc-orange); background: var(--sc-orange-soft); }
.sc-cat.sc-on { background: var(--sc-orange); color: #fff; box-shadow: 0 6px 14px rgba(246,139,30,.35); }

/* ---------- Hero ---------- */
.sc-hero {
    margin: 18px 0; border-radius: 20px; overflow: hidden; position: relative; color: #fff;
    background: linear-gradient(115deg, #14243b 0%, #1d3557 48%, #3d5a80 100%);
    box-shadow: 0 18px 44px rgba(20,36,59,.35);
}
.sc-hero::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(640px 260px at 88% -30%, rgba(246,139,30,.35), transparent 60%),
        radial-gradient(520px 240px at 4% 130%, rgba(64,145,255,.28), transparent 60%);
    pointer-events: none;
}
.sc-hero-inner { position: relative; padding: 42px 40px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.sc-hero h1 { font-size: clamp(22px, 3.4vw, 34px); font-weight: 900; letter-spacing: -.6px; margin-bottom: 10px; }
.sc-hero h1 span { color: var(--sc-orange); }
.sc-hero p { margin: 0; color: #c9d8ea; font-size: 14.5px; max-width: 520px; }
.sc-hero-stats { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 20px; }
.sc-hero-stat { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 14px; padding: 12px 18px; }
.sc-hero-stat b { display: block; font-size: 20px; font-weight: 900; }
.sc-hero-stat span { font-size: 11.5px; color: #9fb3cc; }
.sc-hero-cta { margin-left: auto; }

/* ---------- Sections ---------- */
.sc-section { margin: 26px 0 14px; display: flex; align-items: center; gap: 12px; }
.sc-section h2 { font-size: 19px; font-weight: 800; letter-spacing: -.3px; display: flex; align-items: center; gap: 10px; }
.sc-section h2::before { content: ''; width: 5px; height: 20px; border-radius: 4px; background: var(--sc-orange); display: inline-block; }
.sc-section .sc-link { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--sc-orange); }
.sc-section .sc-link:hover { text-decoration: underline; }

/* ---------- Product cards ---------- */
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.sc-card {
    background: var(--sc-card); border: 1px solid var(--sc-border); border-radius: var(--sc-radius);
    overflow: hidden; box-shadow: var(--sc-shadow); display: flex; flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease; position: relative;
}
.sc-card:hover { transform: translateY(-4px); box-shadow: var(--sc-shadow-hover); }
.sc-card-media { position: relative; aspect-ratio: 1/1; background: #fff; display: flex; align-items: center; justify-content: center; padding: 10px; }
.sc-card-media img { width: 100%; height: 100%; object-fit: contain; }
.sc-card-badge {
    position: absolute; top: 10px; left: 10px; font-size: 10.5px; font-weight: 800; color: #fff;
    padding: 4px 10px; border-radius: 20px; z-index: 2;
}
.sc-badge-off { background: linear-gradient(135deg, #e0354b, #f0683a); box-shadow: 0 4px 10px rgba(224,53,75,.4); }
.sc-badge-new { background: linear-gradient(135deg, #0b7d5a, #14a06f); box-shadow: 0 4px 10px rgba(11,125,90,.4); }
.sc-card-wish, .sc-card-like {
    position: absolute; top: 10px; width: 34px; height: 34px; border-radius: 50%; border: none; z-index: 3;
    background: rgba(255,255,255,.92); color: var(--sc-faint); font-size: 17px; display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(20,36,59,.15); transition: all .2s ease;
}
.sc-card-wish { right: 10px; }
.sc-card-like { right: 50px; }
.sc-card-wish:hover, .sc-card-like:hover { transform: scale(1.12); }
.sc-card-wish.sc-on { color: var(--sc-red); }
.sc-card-like.sc-on { color: var(--sc-orange); }
.sc-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.sc-card-seller { font-size: 10.5px; font-weight: 700; color: var(--sc-orange); display: flex; align-items: center; gap: 5px; }
.sc-card-seller img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.sc-card-name {
    font-size: 13px; font-weight: 600; color: var(--sc-ink); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 35px;
}
.sc-card-name:hover { color: var(--sc-orange); }
.sc-card-stars { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--sc-gold); }
.sc-card-stars .cnt { color: var(--sc-faint); font-size: 11.5px; }
.sc-card-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.sc-card-price b { font-size: 17px; font-weight: 900; color: var(--sc-ink); }
.sc-card-price s { font-size: 12px; color: var(--sc-faint); }
.sc-card-foot { display: flex; gap: 8px; }
.sc-add {
    flex: 1; border: none; border-radius: 10px; padding: 10px 8px; font-weight: 800; font-size: 12.5px;
    background: var(--sc-orange); color: #fff; transition: all .2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.sc-add:hover { background: var(--sc-orange-dark); box-shadow: 0 8px 18px rgba(246,139,30,.4); }
.sc-buy {
    border: 1.5px solid var(--sc-border); background: #fff; color: var(--sc-navy); border-radius: 10px;
    padding: 10px 14px; font-weight: 800; font-size: 12.5px; transition: all .2s ease;
}
.sc-buy:hover { border-color: var(--sc-orange); color: var(--sc-orange); }

/* ---------- Shop cards ---------- */
.sc-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.sc-shop-card {
    background: #fff; border: 1px solid var(--sc-border); border-radius: var(--sc-radius); padding: 20px;
    box-shadow: var(--sc-shadow); transition: transform .2s ease, box-shadow .2s ease; display: flex; gap: 14px; align-items: center;
}
.sc-shop-card:hover { transform: translateY(-3px); box-shadow: var(--sc-shadow-hover); }
.sc-shop-logo { width: 58px; height: 58px; border-radius: 16px; object-fit: cover; background: var(--sc-bg); flex: 0 0 auto; border: 2px solid var(--sc-orange-soft); }
.sc-shop-info { min-width: 0; }
.sc-shop-info b { display: block; font-size: 14.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-shop-info small { color: var(--sc-muted); font-size: 12px; display: flex; align-items: center; gap: 4px; }
.sc-shop-info .sc-tag { margin-top: 7px; }
.sc-tag { font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 20px; background: var(--sc-orange-soft); color: var(--sc-orange); display: inline-block; }

/* ---------- Shop page header ---------- */
.sc-shop-hero {
    margin: 18px 0; border-radius: 20px; overflow: hidden; background: linear-gradient(115deg, #14243b, #2b4770);
    color: #fff; box-shadow: 0 16px 40px rgba(20,36,59,.3); position: relative;
}
.sc-shop-hero-inner { padding: 28px 30px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; position: relative; }
.sc-shop-hero .sc-shop-logo { width: 82px; height: 82px; border-radius: 22px; border: 3px solid rgba(255,255,255,.35); background: #fff; }
.sc-shop-hero-info { min-width: 220px; flex: 1; }
.sc-shop-hero-info h1 { font-size: 22px; font-weight: 900; letter-spacing: -.4px; }
.sc-shop-hero-info p { margin: 6px 0 0; color: #c9d8ea; font-size: 13px; display: flex; gap: 14px; flex-wrap: wrap; }
.sc-shop-hero-info p span { display: inline-flex; align-items: center; gap: 5px; }
.sc-shop-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Product detail ---------- */
.sc-pd { display: grid; grid-template-columns: 420px 1fr; gap: 30px; background: #fff; border: 1px solid var(--sc-border); border-radius: 20px; padding: 26px; box-shadow: var(--sc-shadow); margin: 18px 0; }
.sc-pd-media { position: relative; background: var(--sc-bg); border-radius: 16px; min-height: 340px; display: flex; align-items: center; justify-content: center; }
.sc-pd-media img { max-height: 380px; max-width: 100%; object-fit: contain; }
.sc-pd h1 { font-size: 21px; font-weight: 800; line-height: 1.3; margin-bottom: 8px; }
.sc-pd-seller { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sc-orange); font-weight: 700; margin-bottom: 14px; }
.sc-pd-seller img { width: 22px; height: 22px; border-radius: 50%; }
.sc-pd-stars { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 14px; }
.sc-pd-stars .sc-stars { font-size: 17px; color: var(--sc-gold); }
.sc-pd-price { background: var(--sc-orange-soft); border: 1px solid #ffe1bb; border-radius: 14px; padding: 16px 18px; margin: 14px 0 18px; }
.sc-pd-price b { font-size: 30px; font-weight: 900; color: var(--sc-ink); }
.sc-pd-price s { font-size: 15px; color: var(--sc-muted); margin-left: 10px; }
.sc-pd-price .off { font-size: 13px; font-weight: 800; color: var(--sc-red); margin-left: 10px; }
.sc-pd-desc { color: var(--sc-muted); font-size: 13.5px; line-height: 1.65; margin: 10px 0 20px; white-space: pre-line; }
.sc-pd-meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--sc-muted); margin-bottom: 20px; }
.sc-pd-meta span { display: inline-flex; align-items: center; gap: 6px; }
.sc-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--sc-border); border-radius: 10px; overflow: hidden; }
.sc-qty button { width: 38px; height: 40px; border: none; background: #fff; font-size: 17px; color: var(--sc-navy); }
.sc-qty button:hover { background: var(--sc-bg); }
.sc-qty input { width: 52px; text-align: center; border: none; font-weight: 800; font-size: 14px; outline: none; -moz-appearance: textfield; appearance: textfield; }
.sc-qty input::-webkit-outer-spin-button,
.sc-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sc-qty input:disabled { background: #f6f7f9; color: var(--sc-muted); }
.sc-qty button:disabled { cursor: not-allowed; }
.sc-qty button:disabled:hover { background: #fff; }

/* ---------- Reviews ---------- */
.sc-reviews { background: #fff; border: 1px solid var(--sc-border); border-radius: 20px; padding: 24px; box-shadow: var(--sc-shadow); margin-bottom: 24px; }
.sc-rating-summary { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--sc-border); padding-bottom: 18px; margin-bottom: 18px; }
.sc-rating-big { text-align: center; }
.sc-rating-big b { font-size: 44px; font-weight: 900; display: block; line-height: 1; }
.sc-rating-big span { color: var(--sc-faint); font-size: 12px; }
.sc-review-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px dashed var(--sc-border); }
.sc-review-item:last-child { border-bottom: none; }
.sc-review-ava { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--sc-navy), var(--sc-orange)); color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.sc-review-body b { font-size: 13.5px; }
.sc-review-body .dt { color: var(--sc-faint); font-size: 11.5px; margin-left: 8px; }
.sc-review-body .st { color: var(--sc-gold); font-size: 13px; }
.sc-review-body p { margin: 6px 0 0; color: var(--sc-muted); font-size: 13px; }
.sc-star-input { display: inline-flex; gap: 4px; font-size: 26px; color: #d3d8e0; cursor: pointer; }
.sc-star-input i.sc-on { color: var(--sc-gold); }
.sc-rev-form { background: var(--sc-bg); border-radius: 14px; padding: 18px; margin-bottom: 18px; }

/* ---------- Cart page ---------- */
.sc-cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; margin: 18px 0; }
.sc-cart-groups { display: flex; flex-direction: column; gap: 16px; }
.sc-cart-group { background: #fff; border: 1px solid var(--sc-border); border-radius: var(--sc-radius); box-shadow: var(--sc-shadow); overflow: hidden; }
.sc-cart-group-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--sc-border); background: var(--sc-bg); }
.sc-cart-group-head img { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; }
.sc-cart-group-head b { font-size: 14.5px; flex: 1; }
.sc-cart-group-head small { color: var(--sc-muted); font-weight: 600; }
.sc-cart-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px dashed var(--sc-border); }
.sc-cart-row:last-child { border-bottom: none; }
.sc-cart-row img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: var(--sc-bg); flex: 0 0 auto; }
.sc-cart-row .sc-ci { flex: 1; min-width: 0; }
.sc-cart-row .sc-ci b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-cart-row .sc-ci small { color: var(--sc-faint); font-size: 11.5px; }
.sc-cart-row .sc-ci .pr { font-weight: 900; color: var(--sc-ink); font-size: 14px; margin-top: 3px; }
.sc-cart-remove { border: none; background: none; color: var(--sc-faint); font-size: 17px; }
.sc-cart-remove:hover { color: var(--sc-red); }
.sc-summary { background: #fff; border: 1px solid var(--sc-border); border-radius: var(--sc-radius); box-shadow: var(--sc-shadow); padding: 20px; position: sticky; top: 140px; }
.sc-summary h3 { font-size: 16px; font-weight: 800; margin-bottom: 14px; }
.sc-summary-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--sc-muted); padding: 7px 0; }
.sc-summary-row b { color: var(--sc-ink); }
.sc-summary-total { border-top: 1.5px dashed var(--sc-border); margin-top: 10px; padding-top: 12px; font-size: 14px; }
.sc-summary-total b { font-size: 19px; color: var(--sc-orange); }
.sc-empty { text-align: center; padding: 60px 20px; color: var(--sc-faint); }
.sc-empty i { font-size: 64px; display: block; margin-bottom: 14px; opacity: .5; }
.sc-empty b { display: block; font-size: 16px; color: var(--sc-ink); margin-bottom: 4px; }

/* ---------- Auth / account ---------- */
.sc-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 16px; background: linear-gradient(135deg, #14243b, #1d3557 55%, #3d5a80); position: relative; }
.sc-auth::before { content: ''; position: absolute; inset: 0; background: radial-gradient(500px 300px at 15% 10%, rgba(246,139,30,.25), transparent 60%), radial-gradient(500px 300px at 90% 90%, rgba(64,145,255,.2), transparent 60%); }
.sc-auth-card { position: relative; width: 440px; max-width: 100%; background: #fff; border-radius: 22px; padding: 32px; box-shadow: 0 30px 70px rgba(0,0,0,.35); }
.sc-auth-card h1 { font-size: 20px; font-weight: 900; margin-bottom: 4px; }
.sc-auth-card .sub { color: var(--sc-muted); font-size: 13px; margin-bottom: 20px; }
.sc-field { margin-bottom: 14px; }
.sc-field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--sc-ink); margin-bottom: 6px; }
.sc-field input, .sc-field select, .sc-field textarea {
    width: 100%; padding: 12px 14px; border: 1.5px solid var(--sc-border); border-radius: 10px; font-size: 13.5px; outline: none; font-family: inherit;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.sc-field input:focus, .sc-field textarea:focus { border-color: var(--sc-orange); box-shadow: 0 0 0 3px rgba(246,139,30,.15); }
.sc-note { font-size: 12px; color: var(--sc-muted); margin-top: 12px; text-align: center; }
.sc-note a { color: var(--sc-orange); font-weight: 700; }
.sc-auth-brand { text-align: center; margin-bottom: 18px; }
.sc-auth-brand img { height: 44px; }
.sc-auth-brand b { font-size: 18px; font-weight: 900; color: #fff; display: block; }
.sc-auth-brand b span { color: var(--sc-orange); }

/* ---------- Account / orders ---------- */
.sc-account { display: grid; grid-template-columns: 280px 1fr; gap: 20px; align-items: start; margin: 18px 0; }
.sc-account-nav { background: #fff; border: 1px solid var(--sc-border); border-radius: var(--sc-radius); box-shadow: var(--sc-shadow); overflow: hidden; position: sticky; top: 140px; }
.sc-account-nav .sc-user { padding: 20px; text-align: center; border-bottom: 1px solid var(--sc-border); background: linear-gradient(135deg, #14243b, #2b4770); color: #fff; }
.sc-account-nav .sc-user .sc-ava { width: 62px; height: 62px; border-radius: 50%; background: linear-gradient(135deg, var(--sc-orange), #ff9a3c); display: inline-flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 900; margin-bottom: 8px; }
.sc-account-nav .sc-user b { display: block; font-size: 15px; }
.sc-account-nav .sc-user small { color: #9fb3cc; }
.sc-account-nav a { display: flex; align-items: center; gap: 12px; padding: 13px 20px; color: var(--sc-muted); font-weight: 600; font-size: 13.5px; border-bottom: 1px solid #f1f3f7; transition: all .15s ease; }
.sc-account-nav a:hover { color: var(--sc-orange); background: var(--sc-orange-soft); }
.sc-account-nav a.sc-on { color: var(--sc-orange); background: var(--sc-orange-soft); border-left: 3px solid var(--sc-orange); }
.sc-account-nav a i { font-size: 17px; }
.sc-account-nav a .sc-ac-cart-count { margin-left: auto; background: var(--sc-orange); color: #fff; font-size: 11px; font-weight: 800; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.sc-account-nav a .sc-ac-cart-count[hidden] { display: none; }
.sc-account-panel { background: #fff; border: 1px solid var(--sc-border); border-radius: var(--sc-radius); box-shadow: var(--sc-shadow); padding: 22px; }
.sc-account-panel h3 { font-size: 16px; font-weight: 800; margin-bottom: 16px; }

/* ---------- Orders ---------- */
.sc-order { border: 1px solid var(--sc-border); border-radius: 14px; padding: 16px; margin-bottom: 14px; background: #fff; box-shadow: var(--sc-shadow); }
.sc-order-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sc-order-code { font-weight: 900; font-size: 14px; color: var(--sc-navy); }
.sc-order-code span { color: var(--sc-faint); font-weight: 600; }
.sc-order-status { font-size: 10.5px; font-weight: 800; padding: 4px 12px; border-radius: 20px; color: #fff; }
.sc-st-pending { background: linear-gradient(135deg, #f59e0b, #f97316); }
.sc-st-processing { background: linear-gradient(135deg, #2c7be5, #22d3ee); }
.sc-st-delivered { background: linear-gradient(135deg, #0b7d5a, #14a06f); }
.sc-st-cancelled { background: linear-gradient(135deg, #64748b, #475569); }
.sc-order-shop { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--sc-muted); font-weight: 700; }
.sc-order-shop img { width: 20px; height: 20px; border-radius: 6px; }
.sc-order-items { font-size: 12.5px; color: var(--sc-muted); margin-bottom: 8px; }
.sc-order-foot { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--sc-muted); border-top: 1px dashed var(--sc-border); padding-top: 10px; }
.sc-order-foot b { color: var(--sc-orange); font-size: 15px; }
.sc-order-shop .sc-order-chat { margin-left: 10px; color: var(--sc-orange); font-weight: 700; font-size: 11.5px; border: 1px solid var(--sc-orange); border-radius: 20px; padding: 3px 12px; }
.sc-order-tracks { display: flex; gap: 4px; flex-wrap: wrap; margin: 10px 0 6px; }
.sc-order-tracks span { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: var(--sc-faint); padding: 5px 10px; border-radius: 20px; background: #f1f3f7; }
.sc-order-tracks span.sc-done { color: #fff; background: linear-gradient(135deg, #0b7d5a, #14a06f); }
.sc-st-confirmed { background: linear-gradient(135deg, #0b7d5a, #14a06f); }
.sc-st-sent { background: linear-gradient(135deg, #1d4ed8, #38bdf8); }
.sc-st-on_the_way { background: linear-gradient(135deg, #f59e0b, #f97316); }
.sc-order-proof { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: 12px; color: var(--sc-muted); border-top: 1px dashed var(--sc-border); }
.sc-order-proof img, .sc-order-car img { width: 54px; height: 54px; object-fit: cover; border-radius: 10px; border: 1px solid var(--sc-border); cursor: zoom-in; }
.sc-order-car { border-top: 1px dashed var(--sc-border); padding: 10px 0 6px; font-size: 12.5px; color: var(--sc-muted); }
.sc-order-car-head { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; color: var(--sc-navy); margin-bottom: 4px; }
.sc-order-car p { margin: 2px 0 6px; }

/* ---------- Shop code lookup ---------- */
.sc-shop-code { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--sc-border); border-radius: 14px; padding: 10px 12px; box-shadow: var(--sc-shadow); }
.sc-shop-code > i { color: var(--sc-orange); font-size: 22px; margin-left: 4px; }
.sc-shop-code input { flex: 1; border: none; outline: none; font-size: 13.5px; font-family: inherit; min-width: 0; }
.sc-shop-code .sc-btn { white-space: nowrap; }

/* ---------- Checkout MoMo payment ---------- */
.sc-momo-slot { margin-top: 10px; }
.sc-momo-box { background: #fff8ee; border: 1.5px dashed var(--sc-orange); border-radius: 12px; padding: 14px; }
.sc-momo-head { font-weight: 800; font-size: 13px; color: var(--sc-navy); margin-bottom: 6px; display: flex; align-items: center; gap: 7px; }
.sc-momo-head i { color: var(--sc-orange); font-size: 17px; }
.sc-momo-num b { display: block; font-size: 20px; color: var(--sc-orange); letter-spacing: 1px; }
.sc-momo-num small { color: var(--sc-muted); }
/* payment reference the customer quotes when sending the money */
.sc-momo-ref { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 9px 12px; background: #fff; border: 1.5px solid var(--sc-orange); border-radius: 10px; }
.sc-momo-ref span { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--sc-muted); display: inline-flex; align-items: center; gap: 6px; }
.sc-momo-ref span i { color: var(--sc-orange); font-size: 16px; }
.sc-momo-ref b { font-family: 'Courier New', monospace; font-size: 22px; font-weight: 800; letter-spacing: 4px; color: var(--sc-navy); }
.sc-momo-tip { font-size: 11.5px; color: var(--sc-muted); margin: 8px 0 10px; }
.sc-proof { display: flex; align-items: center; gap: 8px; border: 1.5px dashed var(--sc-border); border-radius: 10px; padding: 10px 12px; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--sc-ink); background: #fff; }
.sc-proof:hover { border-color: var(--sc-orange); color: var(--sc-orange); }
.sc-proof input { display: none; }
.sc-proof-name { display: block; margin-top: 6px; font-size: 11px; color: var(--sc-green); font-weight: 700; }
.sc-momo-loading, .sc-momo-err { font-size: 12px; color: var(--sc-faint); padding: 8px 0; }
.sc-momo-err { color: var(--sc-red); }

/* ---------- Toasts ---------- */
.sc-toast-wrap { position: fixed; top: 20px; right: 20px; z-index: 5000; display: flex; flex-direction: column; gap: 10px; }
.sc-toast {
    background: #fff; border-radius: 12px; box-shadow: 0 14px 34px rgba(20,36,59,.25); padding: 13px 18px;
    display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; min-width: 240px; max-width: 340px;
    animation: scToastIn .3s cubic-bezier(.22,1,.36,1);
    border-left: 4px solid var(--sc-orange);
}
.sc-toast.sc-ok { border-left-color: var(--sc-green); }
.sc-toast.sc-err { border-left-color: var(--sc-red); }
.sc-toast i { font-size: 19px; }
.sc-toast.sc-ok i { color: var(--sc-green); }
.sc-toast.sc-err i { color: var(--sc-red); }
@keyframes scToastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
.sc-toast.sc-out { animation: scToastOut .3s ease forwards; }
@keyframes scToastOut { to { opacity: 0; transform: translateX(40px); } }

/* ---------- Cart drawer ---------- */
.sc-mask { position: fixed; inset: 0; background: rgba(10,20,35,.55); backdrop-filter: blur(2px); z-index: 2000; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.sc-mask.sc-open { opacity: 1; pointer-events: auto; }
.sc-drawer { position: fixed; top: 0; right: 0; height: 100%; width: 400px; max-width: 94vw; background: #fff; z-index: 2001; box-shadow: -20px 0 60px rgba(0,0,0,.3); transform: translateX(105%); transition: transform .3s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; }
.sc-drawer.sc-open { transform: translateX(0); }
.sc-drawer-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--sc-border); }
.sc-drawer-head h3 { font-size: 16px; font-weight: 800; flex: 1; }
.sc-drawer-head .sc-cart-count { background: var(--sc-orange); color: #fff; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 20px; }
.sc-drawer-close { width: 34px; height: 34px; border: none; border-radius: 10px; background: var(--sc-bg); color: var(--sc-ink); font-size: 16px; }
.sc-drawer-body { flex: 1; overflow-y: auto; padding: 14px 18px; }
.sc-drawer-foot { padding: 14px 18px; border-top: 1px solid var(--sc-border); }

/* ---------- Loader / skeleton ---------- */
.sc-loader-overlay { position: fixed; inset: 0; background: #f4f6f9; z-index: 9000; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity .4s ease; }
.sc-loader-overlay.sc-done { opacity: 0; pointer-events: none; }
.sc-loader-ring { width: 56px; height: 56px; border-radius: 50%; border: 4px solid var(--sc-orange-soft); border-top-color: var(--sc-orange); animation: scSpin 1s linear infinite; }
@keyframes scSpin { to { transform: rotate(360deg); } }
.sc-loader-overlay b { margin-top: 16px; font-size: 15px; font-weight: 800; color: var(--sc-navy); }
.sc-loader-overlay small { color: var(--sc-faint); font-size: 12px; }
.sc-skeleton { background: linear-gradient(90deg, #eef1f5 25%, #f7f9fc 50%, #eef1f5 75%); background-size: 200% 100%; animation: scShimmer 1.3s infinite; border-radius: 10px; }
@keyframes scShimmer { to { background-position: -200% 0; } }

/* ---------- Footer ---------- */
.sc-footer { background: var(--sc-navy); color: #9fb3cc; margin-top: 44px; }
.sc-footer-inner { padding: 40px 0 24px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; }
.sc-footer h4 { color: #fff; font-size: 14px; margin-bottom: 14px; }
.sc-footer a { display: block; font-size: 13px; padding: 4px 0; transition: color .15s ease; }
.sc-footer a:hover { color: var(--sc-orange); }
.sc-footer .sc-brand { color: #fff; margin-bottom: 12px; }
.sc-footer p { font-size: 13px; line-height: 1.7; margin: 0; }
.sc-footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 16px 0; text-align: center; font-size: 12.5px; }

/* ---------- Misc ---------- */
.sc-muted { color: var(--sc-muted); }
.sc-faint { color: var(--sc-faint); }
.sc-divider { border: none; border-top: 1px solid var(--sc-border); margin: 16px 0; }
.sc-crumb { font-size: 12.5px; color: var(--sc-faint); margin: 16px 0 0; }
.sc-crumb a:hover { color: var(--sc-orange); }
.sc-crumb b { color: var(--sc-ink); }
.sc-alert { border-radius: 12px; padding: 14px 18px; font-size: 13px; margin: 14px 0; display: flex; gap: 10px; align-items: center; }
.sc-alert-info { background: #e8f1ff; color: #1d4ed8; }
.sc-alert-warn { background: var(--sc-orange-soft); color: #b06a12; }

/* ---------- Chat ---------- */
.sc-chat-layout { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; margin: 16px 0 30px; min-height: 480px; }
.sc-chat-list { background: var(--sc-card); border: 1px solid var(--sc-border); border-radius: var(--sc-radius); overflow: hidden; box-shadow: var(--sc-shadow); }
.sc-chat-list-head { padding: 14px 16px; font-weight: 800; font-size: 14px; border-bottom: 1px solid var(--sc-border); display: flex; align-items: center; gap: 8px; color: var(--sc-navy); }
.sc-chat-list-head i { color: var(--sc-orange); }
.sc-conv { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-bottom: 1px solid #f1f3f7; color: var(--sc-ink); transition: background .15s ease; }
.sc-conv:hover { background: var(--sc-bg); }
.sc-conv.sc-on { background: var(--sc-orange-soft); border-left: 3px solid var(--sc-orange); }
.sc-conv-ava { position: relative; display: inline-flex; flex: none; }
.sc-conv-ava img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 1px solid var(--sc-border); background: #fff; }
.sc-conv-dot, .sc-dot { width: 11px; height: 11px; border-radius: 50%; background: #cbd5e1; border: 2px solid #fff; position: absolute; bottom: 0; right: 0; }
.sc-conv .sc-conv-dot { position: static; margin-left: auto; border: none; }
.sc-dot.sc-on, .sc-conv-dot.sc-on { background: #22c55e; }
.sc-conv-body { flex: 1; min-width: 0; }
.sc-conv-body b { display: block; font-size: 13px; color: var(--sc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-conv-body small { display: block; font-size: 11.5px; color: var(--sc-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-conv-unread { background: var(--sc-red); color: #fff; font-size: 10.5px; font-weight: 800; border-radius: 20px; padding: 2px 8px; flex: none; }
.sc-chat-box { background: var(--sc-card); border: 1px solid var(--sc-border); border-radius: var(--sc-radius); overflow: hidden; box-shadow: var(--sc-shadow); display: flex; flex-direction: column; min-height: 480px; }
.sc-chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--sc-border); }
.sc-chat-head small { color: var(--sc-faint); font-size: 12px; }
.sc-chat-msgs { flex: 1; overflow-y: auto; padding: 16px; max-height: 420px; background: #f7f9fc; }
.sc-msg { display: flex; margin-bottom: 10px; }
.sc-msg.sc-in { justify-content: flex-start; }
.sc-msg.sc-out { justify-content: flex-end; }
.sc-bubble { max-width: 70%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; box-shadow: 0 2px 6px rgba(20, 36, 59, .08); word-break: break-word; }
.sc-msg.sc-in .sc-bubble { background: #fff; border-bottom-left-radius: 4px; }
.sc-msg.sc-out .sc-bubble { background: var(--sc-orange); color: #fff; border-bottom-right-radius: 4px; }
.sc-bubble small { display: block; font-size: 10px; opacity: .65; margin-top: 3px; }
.sc-pop { animation: scMsgPop .2s ease; }
.sc-msg.sc-pending .sc-bubble { opacity: .6; }
@keyframes scMsgPop { from { opacity: 0; transform: translateY(8px); } }
.sc-chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--sc-border); }
.sc-chat-form input { flex: 1; border: 1.5px solid var(--sc-border); border-radius: 10px; padding: 11px 13px; font-size: 13.5px; outline: none; font-family: inherit; }
.sc-chat-form input:focus { border-color: var(--sc-orange); }
.sc-chat-welcome { text-align: center; color: var(--sc-faint); font-size: 13px; padding: 40px 20px; }
.sc-chat-welcome i { font-size: 36px; display: block; margin-bottom: 10px; color: var(--sc-orange); }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .sc-cart-layout, .sc-account { grid-template-columns: 1fr; }
    .sc-summary, .sc-account-nav { position: static; }
    .sc-pd { grid-template-columns: 1fr; }
    .sc-footer-inner { grid-template-columns: 1fr 1fr; }
    .sc-hero-cta { margin-left: 0; }
}
@media (max-width: 767.98px) {
    .sc-header-inner { gap: 10px; }
    .sc-head-btn span.sc-hl { display: none; }
    .sc-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .sc-card-name { font-size: 12px; min-height: 31px; }
    .sc-card-price b { font-size: 15px; }
    .sc-hero-inner { padding: 26px 20px; }
    .sc-shop-hero-inner { padding: 20px; }
    .sc-footer-inner { grid-template-columns: 1fr; gap: 20px; }
    .sc-cats { top: 60px; }
}