:root {
  --brand:#0e1bd1;
  --brand-dark:#0a14a0;
  --brand-soft:#e8eaff;
  --ink:#1a1d23;
  --ink-2:#4a5260;
  --muted:#7a828f;
  --line:#dfe3ea;
  --line-soft:#eef1f5;
  --ground:#ffffff;
  --surface:#f7f8fb;
  --raised:#ffffff;
  --ok:#1c7a4b;
  --ok-soft:#e4f5ec;
  --bad:#c0392b;
  --bad-soft:#fdeceb;
  --warn:#8a5711;
  --warn-soft:#fdf3e2;
  --head:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --body:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:Consolas,"Cascadia Mono",ui-monospace,monospace;
  --pad:16px;
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.55;
  display:flex; flex-direction:column; min-height:100vh; min-height:100dvh;
  overflow-wrap:break-word;
}
a { color:var(--brand); }
img { max-width:100%; height:auto; display:block; }
h1,h2,h3 { font-family:var(--head); font-weight:700; margin:0 0 .5em; line-height:1.2; text-wrap:balance; }
h1 { font-size:clamp(24px,4vw,34px); }
h2 { font-size:clamp(20px,3vw,26px); }
h3 { font-size:18px; }
p { margin:0 0 1em; }

.wrap {
  width:100%; max-width:1200px; margin:0 auto;
  padding-left:calc(var(--pad) + var(--safe-l));
  padding-right:calc(var(--pad) + var(--safe-r));
}

/* ---------------------------------------------------------------- шапка */
.site-head { background:#fff; border-bottom:1px solid var(--line); }
.site-head .wrap { display:flex; align-items:center; gap:14px; padding-top:12px; padding-bottom:12px; flex-wrap:wrap; }
.logo { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--brand); flex:1 1 auto; min-width:0; }
.logo img { width:52px; height:auto; flex:none; }
.logo b { font-size:clamp(22px,4vw,34px); font-weight:700; letter-spacing:.01em; }
.head-contact { display:flex; align-items:center; gap:14px; flex:none; }
.head-contact a.phone { font-size:clamp(15px,2.4vw,21px); font-style:italic; font-weight:600; white-space:nowrap; text-decoration:none; }
.cart-link {
  display:inline-flex; align-items:center; gap:7px; text-decoration:none; color:var(--ink);
  border:1px solid var(--line); padding:8px 12px; min-height:42px; white-space:nowrap;
}
.cart-link b { color:var(--brand); }

/* ---------------------------------------------------------------- меню */
.site-nav { background:var(--brand); position:sticky; top:0; z-index:40; }
.site-nav .wrap { display:flex; align-items:stretch; gap:0; overflow-x:auto; scrollbar-width:none; }
.site-nav .wrap::-webkit-scrollbar { display:none; }
.site-nav a {
  color:#fff; text-decoration:none; font-weight:600; font-size:14.5px;
  padding:14px 16px; white-space:nowrap; display:flex; align-items:center; min-height:48px;
}
.site-nav a[aria-current="page"], .site-nav a:hover { background:rgba(255,255,255,.22); }
.site-nav form { margin-left:auto; display:flex; align-items:center; padding:6px 0; flex:none; }
.site-nav input {
  border:0; padding:9px 12px; min-height:38px; width:190px; font-size:15px; background:#fff; color:var(--ink);
}
.site-nav button { border:0; background:var(--brand-dark); color:#fff; padding:9px 14px; min-height:38px; cursor:pointer; }

main.site { flex:1; padding-bottom:40px; }
.crumbs { font-size:13.5px; color:var(--muted); padding:14px 0 4px; }
.crumbs a { color:var(--muted); }

/* ---------------------------------------------------------------- главная */
.hero { padding:36px 0 12px; }
.hero h1 { margin-bottom:.4em; }
.hero p { max-width:62ch; color:var(--ink-2); font-size:17px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
.features { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin:26px 0 10px; }
.features div { background:var(--surface); border:1px solid var(--line); padding:18px; }
.features h3 { color:var(--brand); }
.features p { margin:0; color:var(--ink-2); font-size:15px; }

/* ---------------------------------------------------------------- сетки */
.section-title { margin:34px 0 16px; }
.tiles { display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.tile {
  position:relative; display:block; text-decoration:none; color:#fff;
  border:1px solid var(--line); background:var(--surface); overflow:hidden; min-height:260px;
}
.tile img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.tile .tile-body {
  position:relative; z-index:1; height:100%; min-height:260px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  text-align:center; padding:22px; background:linear-gradient(180deg,rgba(20,24,40,.18),rgba(20,24,40,.52));
}
.tile h3 { color:#fff; font-size:22px; margin:0; text-shadow:0 1px 6px rgba(0,0,0,.5); }
.tile p { color:#f0f2ff; margin:0; font-size:14px; text-shadow:0 1px 5px rgba(0,0,0,.5); }
.tile .count { font-size:13px; opacity:.9; }

.cards { display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.card { border:1px solid var(--line); background:#fff; display:flex; flex-direction:column; }
.card .thumb { aspect-ratio:4/3; background:var(--surface); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.card .thumb img { width:100%; height:100%; object-fit:cover; }
.card .thumb .no-img { color:var(--muted); font-size:13px; }
.card .body { padding:14px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card .name { font-weight:600; text-decoration:none; color:var(--ink); }
.card .sku { font-family:var(--mono); font-size:12px; color:var(--muted); }
.card .price { font-size:19px; font-weight:700; color:var(--brand); margin-top:auto; }
.card .price s { font-size:14px; font-weight:400; color:var(--muted); margin-left:8px; }
.card .price .ask { font-size:15px; font-weight:600; color:var(--ink-2); }

/* ---------------------------------------------------------------- кнопки и формы */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--brand); color:#fff; border:1px solid var(--brand);
  padding:11px 20px; min-height:46px; font-size:15px; font-weight:600;
  text-decoration:none; cursor:pointer; font-family:var(--body);
}
.btn:hover { background:var(--brand-dark); border-color:var(--brand-dark); }
.btn.ghost { background:#fff; color:var(--brand); }
.btn.ghost:hover { background:var(--brand-soft); }
.btn.small { padding:7px 13px; min-height:38px; font-size:13.5px; }
.btn.danger { background:var(--bad); border-color:var(--bad); }
.btn[disabled] { opacity:.5; cursor:not-allowed; }

label { display:block; font-size:13.5px; color:var(--ink-2); margin-bottom:5px; }
input, select, textarea {
  width:100%; font-family:inherit; font-size:16px; color:var(--ink);
  background:#fff; border:1px solid var(--line); padding:10px 12px; min-height:46px; border-radius:0;
}
textarea { min-height:120px; resize:vertical; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--brand); outline-offset:-1px; }
.field { margin-bottom:14px; }
.form-grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.check { display:flex; align-items:center; gap:9px; font-size:15px; }
.check input { width:auto; min-height:0; }

.notice { padding:12px 15px; border:1px solid; margin:16px 0; font-size:14.5px; }
.notice.ok { color:var(--ok); background:var(--ok-soft); border-color:currentColor; }
.notice.bad { color:var(--bad); background:var(--bad-soft); border-color:currentColor; }
.notice.warn { color:var(--warn); background:var(--warn-soft); border-color:currentColor; }
.notice ul { margin:6px 0 0; padding-left:20px; }

/* ---------------------------------------------------------------- товар */
.product { display:grid; gap:28px; grid-template-columns:1fr; margin-top:18px; }
.gallery .main-img { border:1px solid var(--line); background:var(--surface); }
.gallery .thumbs { display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; }
.gallery .thumbs img { width:72px; height:72px; object-fit:cover; border:1px solid var(--line); cursor:pointer; }
.product .price-box { font-size:28px; font-weight:700; color:var(--brand); margin:10px 0 18px; }
.product .price-box s { font-size:18px; font-weight:400; color:var(--muted); margin-left:10px; }
.buy { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.buy input[type=number] { width:92px; }
.prop { display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--line-soft); font-size:15px; }
.prop span:first-child { color:var(--muted); flex:0 0 45%; }

/* ---------------------------------------------------------------- корзина */
.cart-table { width:100%; border-collapse:collapse; }
.cart-table th { text-align:left; font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:10px; border-bottom:1px solid var(--line); }
.cart-table td { padding:12px 10px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
.cart-table img { width:64px; height:64px; object-fit:cover; border:1px solid var(--line); }
.cart-table .qty { width:80px; }
.cart-total { display:flex; justify-content:flex-end; align-items:center; gap:20px; padding:18px 10px; font-size:20px; font-weight:700; }
.summary { background:var(--surface); border:1px solid var(--line); padding:16px; }
.summary .row { display:flex; justify-content:space-between; padding:6px 0; font-size:15px; }
.summary .row.total { font-size:19px; font-weight:700; border-top:1px solid var(--line); margin-top:8px; padding-top:12px; }

/* ---------------------------------------------------------------- подвал */
.site-foot { background:var(--brand); color:#fff; margin-top:auto; padding:26px 0; }
.site-foot .wrap { display:flex; gap:20px; flex-wrap:wrap; justify-content:space-between; align-items:center; }
.site-foot a { color:#fff; }
.site-foot .cols { display:flex; gap:26px; flex-wrap:wrap; font-size:14.5px; }

/* ---------------------------------------------------------------- адаптив */
@media (min-width:760px) {
  .product { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  input, select, textarea { font-size:15px; min-height:44px; }
}
@media (min-width:1000px) {
  .product { grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:40px; }
}
@media (max-width:640px) {
  .head-contact a.phone { font-size:15px; }
  .logo img { width:40px; }
  .site-nav input { width:130px; }
  .cart-table thead { display:none; }
  .cart-table tr { display:grid; grid-template-columns:72px 1fr; gap:6px 12px; padding:12px 0; border-bottom:1px solid var(--line-soft); }
  .cart-table td { border:0; padding:2px 0; }
  .cart-table td:first-child { grid-row:span 4; }
}
@media (hover:none) {
  .site-nav a:hover { background:transparent; }
}
@media (prefers-reduced-motion:reduce) { * { animation:none!important; transition:none!important; } }