:root { --bg:#0b0b0d; --fg:#e6e6ea; --muted:#a3a3ad; --accent:#5aa9ff; --card:#16161a; --border:#2a2a2f; --radius:12px; --container:1100px; --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Arial,sans-serif; }
*{ box-sizing:border-box; } html,body{ margin:0; padding:0; background:var(--bg); color:var(--fg); font-family:var(--font);} a{ color:var(--fg); text-decoration:none;} a:hover{text-decoration:underline;} img{ max-width:100%; border-radius:var(--radius);} .container{ width:100%; max-width:var(--container); margin:0 auto; padding:16px; } .row{ display:flex; gap:12px;} .between{ justify-content:space-between;} .center{ align-items:center;} .start{ align-items:flex-start; }
.topbar{ position:sticky; top:0; backdrop-filter:saturate(180%) blur(20px); background:rgba(22,22,26,.8); border-bottom:1px solid var(--border); z-index:10;} .brand{ font-weight:700; font-size:18px;} .nav a{ margin-left:12px;} .linklike{ background:none; border:none; color:var(--fg); cursor:pointer; font:inherit; padding:0; }
.hero{ padding:48px 0 24px; text-align:center;} .hero h1{ font-size:44px; margin:0 0 12px;} .hero p{ color:var(--muted); font-size:18px; margin:0; }
.search{ display:flex; gap:8px;} .search input{ padding:8px 10px; border:1px solid var(--border); background:#0f0f13; color:var(--fg); border-radius:8px; min-width:260px;} .search button, button{ background:var(--accent); color:#06111a; border:none; padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:600;} button:hover{ filter:brightness(1.1);} button.ghost{ background:transparent; color:var(--fg); border:1px solid var(--border);} 
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px;} .card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px;} .card h3{ margin-top:0; }
.form{ display:grid; gap:12px; max-width:480px;} .form input{ padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:#0f0f13; color:var(--fg);} .error{ background:#3a0f12; border:1px solid #842029; color:#f1c0c0; padding:10px; border-radius:8px;} .info{ background:#102233; border:1px solid #204a87; color:#d3e4ff; padding:10px; border-radius:8px;} .muted{ color:var(--muted);} 
.cart-list{ display:grid; gap:12px;} .cart-item{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:12px;} .orders{ display:grid; gap:12px;} .order{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:12px;} .order h4{ margin:0 0 8px; }
.modal-overlay{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.6); z-index:1000; padding:16px;} .modal{ width:100%; max-width:520px; background:#111115; border:1px solid var(--border); border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.45);} .modal-header{ padding:16px 18px 0 18px;} .modal-body{ padding:0 18px 18px 18px;} .modal-actions{ gap:10px; }
/* --- Layout fixes: center home blocks and mobile nav --- */
/* Center main sections on homepage */
#home-search, #featured { display:grid; justify-content:center; }
#home-search-form { width:min(720px,100%); margin:0 auto; }
#home-search-results { justify-content:center; }
#featured .card, #random-product-card.card { max-width:1100px; margin:0 auto; }
#random-product-card .featured-card { max-width:980px; margin:0 auto; }

/* Mobile header: menu under logo, aligned left; search centered */
@media (max-width: 820px){
  .topbar .container{ flex-direction:column; align-items:flex-start; gap:10px; }
  .topbar .brand{ margin-bottom:2px; }
  .topbar .search{ order:2; width:100%; justify-content:center; }
  .topbar .nav{ order:3; width:100%; display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-start; }
  .topbar .nav a{ margin-left:0; }
  .topbar .linklike{ margin-left:0; }
}

/* --- Home slogan instead of duplicate search --- */
#home-slogan{ display:grid; justify-content:center; margin:8px 0 18px; }
#home-slogan .slogan{ max-width:900px; text-align:center; color:var(--muted); font-size:clamp(18px,2.2vw,22px); padding:10px 14px; border:1px solid var(--border); border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,.03), transparent); }


/* --- Mobile search overflow fix --- */
@media (max-width: 820px){
  .topbar .search{ width:100%; max-width:100%; display:flex; gap:8px; }
  .topbar .search input{ min-width:0; width:100%; flex:1 1 auto; }
  .topbar .search button{ flex:0 0 auto; padding:10px 12px; }
}
@media (max-width: 360px){
  .topbar .search{ display:grid; grid-template-columns: 1fr; }
  .topbar .search button{ width:100%; }
}
.card img {
  width: 100%;
  height: 180px;       /* ??????? ?????? ??? ?????? */
  object-fit: cover;   /* ??????? ?? ?????????? */
  border-radius: 8px;
  background: #111;    /* ??? ??? SVG-??????????? */
}