:root {
    --brand: #1f3a8a;
    --brand-dark: #172b66;
    --accent: #f59e0b;
    --ink: #1e293b;
    --muted: #64748b;
    --line: #e5e9f0;
    --bg: #f6f8fb;
    --bs-primary: var(--brand);
    --bs-primary-rgb: 31, 58, 138;
    --bs-link-color: var(--brand);
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-body-color: var(--ink);
}
body { background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }
a { text-decoration: none; }
.btn-primary { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand-dark); --bs-btn-hover-border-color: var(--brand-dark); --bs-btn-active-bg: var(--brand-dark); --bs-btn-active-border-color: var(--brand-dark); --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand); }
.btn-outline-primary { --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); --bs-btn-active-bg: var(--brand); }
.btn { border-radius: 10px; font-weight: 600; transition: background-color .15s, transform .15s, box-shadow .15s; }
.btn-accent { background: var(--accent); color: #1f2937; border: 0; }
.btn-accent:hover { background: #d98a06; color: #111; }
.form-control, .form-select { border-radius: 10px; border-color: #d5dbe5; padding: .6rem .85rem; }
.form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(31, 58, 138, .12); }

/* Top bar & nav */
.topbar { background: var(--brand-dark); color: #dbe4ff; font-size: .82rem; }
.site-nav { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1030; }
.brand { font-weight: 800; font-size: 1.3rem; color: var(--brand); letter-spacing: -.02em; display: flex; align-items: center; gap: .5rem; }
.brand .logo { width: 38px; height: 38px; border-radius: 10px; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 1.15rem; }
.site-nav .nav-link { color: var(--ink); font-weight: 600; padding: .5rem .9rem; border-radius: 8px; }
.site-nav .nav-link:hover, .site-nav .nav-link.active { color: var(--brand); background: #eef2ff; }
.cart-btn { position: relative; }
.cart-badge { position: absolute; top: -6px; right: -6px; background: var(--accent); color: #111; font-size: .68rem; font-weight: 700; min-width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; padding: 0 5px; }

/* Hero */
.hero { background: linear-gradient(135deg, var(--brand) 0%, #2f55c8 100%); color: #fff; border-radius: 20px; overflow: hidden; position: relative; }
.hero::after { content: ''; position: absolute; right: -60px; top: -60px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255, 255, 255, .07); }
.hero h1 { font-weight: 800; letter-spacing: -.02em; }

/* Tiles & cards */
.tile { display: flex; align-items: center; gap: .85rem; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem; color: var(--ink); font-weight: 600; transition: transform .15s, box-shadow .15s, border-color .15s; height: 100%; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(30, 41, 59, .08); border-color: #c7d2fe; color: var(--brand); }
.tile .ico { width: 44px; height: 44px; border-radius: 12px; background: #eef2ff; color: var(--brand); display: grid; place-items: center; font-size: 1.3rem; flex: none; }
.section-title { font-weight: 800; letter-spacing: -.01em; }
.product-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; color: var(--ink); }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(30, 41, 59, .09); color: var(--ink); }
.thumb { aspect-ratio: 4/3; background: linear-gradient(135deg, #eef2ff, #e0e7ff); display: grid; place-items: center; color: #6f84d6; font-size: 2.6rem; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.price { font-weight: 800; color: var(--brand); }
.chip { display: inline-block; padding: .45rem 1rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-weight: 600; font-size: .92rem; white-space: nowrap; transition: all .15s; }
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.chips { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: thin; }
.badge-soft { background: #eef2ff; color: var(--brand); font-weight: 600; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.4rem; }
.size-btn { min-width: 52px; }
.btn-check:checked + .size-btn { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-check:disabled + .size-btn { opacity: .4; text-decoration: line-through; }
.steps { display: flex; gap: 1rem; flex-wrap: wrap; }
.trust { color: var(--muted); font-size: .9rem; }
.footer { background: #0f1b44; color: #b6c2e6; }
.footer a { color: #b6c2e6; }
.footer a:hover { color: #fff; }
.qty { max-width: 90px; }
.toast-container { z-index: 2000; }

@media (max-width: 575px) {
    .hero { border-radius: 16px; }
    .hero h1 { font-size: 1.7rem; }
    .brand { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }