:root{ --bg:#fff; --text:#0f172a; --muted:#64748b; --primary:#1f2a9a; --border:#e8edf6; }
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Roboto,Arial,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

.container{max-width:1200px;margin:0 auto;padding:0 16px}

/* Topbar */
.topbar{position:sticky;top:0;background:#ffffffee;border-bottom:1px solid var(--border);backdrop-filter:saturate(1.2) blur(6px);z-index:100}
.topbar.scrolled{box-shadow:0 8px 18px rgba(2,6,23,.06)}
.topbar-inner{display:flex;align-items:center;gap:10px;min-height:60px}
.brand{display:flex;align-items:center;gap:8px;min-width:0}
.brand .logo{width:36px;height:36px;background:#fff;border:1px solid var(--border);border-radius:50%;display:grid;place-items:center;overflow:hidden;flex:0 0 auto}
.brand .title{font-weight:900;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill{background:#f3f6fb;border:1px solid var(--border);padding:8px 10px;border-radius:10px;cursor:pointer;white-space:nowrap;position:relative;flex:0 0 auto}
.search{flex:1 1 auto;display:flex;align-items:center;gap:8px;background:#f6f8fc;border:1px solid var(--border);padding:10px;border-radius:12px;min-width:120px}
.search input{border:0;background:transparent;outline:0;width:100%}
.actions{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.actions .chip{background:#f8fafc;border:1px solid var(--border);padding:8px 10px;border-radius:10px;font-weight:700;white-space:nowrap}
.login{background:var(--primary);color:#fff;border-radius:12px;padding:10px 12px;font-weight:900;border:0;white-space:nowrap}

/* Navbar */
.navbar{position:sticky;top:60px;background:#fff;border-bottom:1px solid var(--border);z-index:90}
.navlinks{display:flex;gap:14px;overflow:auto;padding:8px 0;scrollbar-width:none}
.navlinks::-webkit-scrollbar{display:none}
.navlinks a{padding:6px 2px;font-weight:800;color:#0f172acc;position:relative;white-space:nowrap;font-size:15px}
.navlinks a.active{color:#000}
.navlinks a.active::after{content:"";position:absolute;left:0;bottom:-8px;width:100%;height:3px;background:#000;border-radius:6px}

/* Dropdown */
.dropdown{position:absolute;top:60px;left:170px;background:#fff;border:1px solid var(--border);box-shadow:0 12px 24px rgba(2,6,23,.1);border-radius:12px;padding:8px;z-index:110;min-width:240px;display:none;max-height:60vh;overflow:auto}
.dropdown a{display:block;padding:10px 12px;border-radius:10px;border:1px solid transparent}
.dropdown a:hover{background:#f7f9ff;border-color:#e6ecf9}

/* Slider */
.slider{position:relative;overflow:hidden;background:#000}
.slides{display:flex;transition:transform .6s ease;will-change:transform}
.slide{min-width:100%;height:40vh;min-height:240px;max-height:500px;display:grid;place-items:center;background:#000}
.slide .img-wrap{width:100%;height:100%;display:grid;place-items:center}
.slide .img-wrap img{width:100%;height:100%;object-fit:contain}
.slider .nav{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.slider .nav button{pointer-events:auto;width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:#ffffffcc;cursor:pointer;font-weight:900}

/* Sections */
.section-title{font-size:22px;margin:0 0 6px}
.section-underline{height:4px;width:110px;background:#fde047;border-radius:999px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.card{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 6px 12px rgba(8,15,45,.04);display:flex;flex-direction:column}
.card .thumb.full{height:210px;background:#000;display:grid;place-items:center;position:relative}
.card .thumb.full img{width:100%;height:100%;object-fit:contain}
.badge{position:absolute;top:10px;left:10px;background:#111827;color:#fff;border-radius:999px;padding:6px 10px;font-size:12px}
.card .body{padding:12px;display:flex;flex-direction:column;gap:8px}
.card .row{display:flex;gap:8px;color:var(--muted);font-size:14px;flex-wrap:wrap}
.price-row{display:flex; gap:10px; align-items:center; font-weight:900; margin-top:6px}
.price-row .old{color:#ef4444; text-decoration:line-through; opacity:.9}
.price-row .now{color:#0b3a16; background:#dcfce7; padding:2px 8px; border-radius:10px}
.btn{display:inline-block;padding:8px 12px;border-radius:10px;border:1px solid var(--border);font-weight:800;cursor:pointer}
.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.cta{display:flex;gap:10px;margin-top:2px;flex-wrap:wrap}

/* Footer */
.site-footer{background:#0b1b74;color:#e5e7eb;margin-top:32px}
.footer-top{padding:22px 0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:12px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.2);display:flex;justify-content:space-between;gap:12px;padding:10px 0 14px;color:#cbd5e1}

/* Auth */
.auth-wrap{max-width:680px;margin:20px auto;padding:0 16px;display:grid;gap:14px}
.auth-card{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 8px 18px rgba(2,6,23,.05);padding:16px}
.kd-input{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.kd-input input{border:1px solid #e6ebf4;border-radius:10px;padding:10px;background:#f9fbff}

/* Breakpoints */
@media (max-width: 1024px){
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 860px){
  .brand .title{font-size:17px}
  .search{display:none}
  .grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .slide{height:36vh;min-height:220px;max-height:380px}
  .card .thumb.full{height:190px}
  .container{padding-left:12px;padding-right:12px}
  .dropdown{left:12px;right:12px;min-width:auto}
}
@media (max-width: 480px){
  .topbar-inner{gap:8px;min-height:56px}
  .brand .logo{width:32px;height:32px}
  .brand .title{font-size:16px}
  .pill{padding:6px 8px}
  .actions .chip{padding:6px 8px;font-size:13px}
  .login{padding:8px 10px;font-size:13px}
  .navbar{top:56px}
  .dropdown{top:56px}
  .navlinks a{font-size:14px}
  .slide{height:34vh;min-height:200px;max-height:340px}
  /* Optional: hide phone/bell if space tight */
  [href^="tel:"],[data-bell]{display:none}
}