:root {
  --brand: #c8161d;
  --brand-2: #8b0f14;
  --accent: #d4863a;
  --bg: #faf9f7;
  --surface: #ffffff;
  --surface-2: #f4f3f1;
  --text: #1a1a1a;
  --muted: #6b6b6b;
  --border: #e0ddd8;
  --grad: linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
body { font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem); line-height: 1.6; color: var(--text); background: var(--bg); overflow-x: hidden; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 600; }
.skip { position: absolute; top: -100vh; left: 0; background: var(--brand); color: #fff; padding: 0.5rem 1rem; z-index: 9999; }
.skip:focus { top: 0; }
.mono { font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-size: 0.9em; letter-spacing: -0.02em; }

/* === Shell + Rail === */
.shell { display: flex; min-height: 100vh; }
.rail { position: fixed; top: 0; left: 0; width: 16rem; height: 100vh; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 1.5rem 0; z-index: 100; transition: transform 0.25s var(--ease-out); }
@media (max-width: 900px) {
  .rail { transform: translateX(-100%); }
  .rail.open { transform: translateX(0); box-shadow: var(--shadow-3); }
}
.rail-toggle { position: fixed; top: 1rem; left: 1rem; z-index: 101; width: 2.75rem; height: 2.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: 2px; cursor: pointer; display: none; align-items: center; justify-content: center; transition: background 0.15s; }
.rail-toggle:hover { background: var(--surface-2); }
@media (max-width: 900px) { .rail-toggle { display: flex; } }
.rail-toggle .ic { width: 1.25rem; height: 1.25rem; }

.brand { display: flex; align-items: center; gap: 0.75rem; padding: 0 1.5rem; margin-bottom: 2rem; font-weight: 700; font-size: 1.125rem; color: var(--text); }
.brand-mark { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; background: var(--grad); color: #fff; font-size: 1.25rem; font-weight: 800; border-radius: 2px; flex-shrink: 0; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.2; }
.brand-txt b { color: var(--brand); }
.brand-txt em { font-style: normal; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 500; margin-top: 0.125rem; }
.brand.small { font-size: 1rem; }
.brand.small .brand-mark { width: 2rem; height: 2rem; font-size: 1rem; }

.rail-nav { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; padding: 0 1rem; }
.rail-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; border-radius: 2px; transition: background 0.15s; position: relative; font-weight: 500; }
.rail-link .ic { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
.rail-link:hover { background: var(--surface-2); }
.rail-link.on { background: var(--brand); color: #fff; }
.rail-link.accent { color: var(--brand); font-weight: 600; }
.cart-badge { position: absolute; top: 0.375rem; left: 1.875rem; background: var(--accent); color: #fff; font-size: 0.625rem; font-weight: 700; padding: 0.125rem 0.375rem; border-radius: 2px; min-width: 1rem; text-align: center; }
.rail-foot { padding: 1rem 1rem 0; border-top: 1px solid var(--border); margin-top: 1rem; display: flex; flex-direction: column; gap: 0.25rem; }
.muted-link { color: var(--muted); font-size: 0.875rem; }

.main-wrap { flex: 1; margin-left: 16rem; }
@media (max-width: 900px) { .main-wrap { margin-left: 0; } }
.content { max-width: 80rem; margin: 0 auto; padding: clamp(2rem, 4vw, 4rem) clamp(1rem, 4vw, 3rem); }

/* === Typography & Layout === */
h1, h2, h3, h4 { font-weight: 700; line-height: 1.2; margin-bottom: 0.5rem; }
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: clamp(1.125rem, 2vw, 1.375rem); }
h4 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.lead { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.5; color: var(--muted); }
.muted { color: var(--muted); }
.sm { font-size: 0.875rem; }
.eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--brand); margin-bottom: 0.75rem; }
.eyebrow .ic { width: 0.875rem; height: 0.875rem; }
.hl { background: linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.page-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.page-head h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); margin-bottom: 0.5rem; }
.page-sub { font-size: 1.125rem; color: var(--muted); margin-top: 0.75rem; }
.sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.sec-head h2 { margin: 0; }
.link-more { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.9375rem; font-weight: 500; color: var(--brand); transition: gap 0.2s; }
.link-more:hover { gap: 0.625rem; }
.link-more .ic { width: 0.875rem; height: 0.875rem; }
.crumbs { display: flex; gap: 0.5rem; font-size: 0.875rem; margin-bottom: 1.5rem; color: var(--muted); }
.crumbs a { transition: color 0.15s; }
.crumbs a:hover { color: var(--brand); }

section { margin-bottom: clamp(3rem, 6vw, 5rem); }
.stack-lg > * + * { margin-top: 1.5rem; }
.ic { width: 1.25rem; height: 1.25rem; stroke-width: 1.8; }
.ic.sm { width: 1rem; height: 1rem; }

/* === Hero === */
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-bottom: clamp(3rem, 6vw, 5rem); }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } }
.hero-copy h1 { margin-bottom: 1rem; }
.hero-copy .lead { margin-bottom: 2rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }
.hero-stats { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 1.5rem; }
.hero-stats li { display: flex; flex-direction: column; }
.hero-stats b { font-size: 1.75rem; font-weight: 700; color: var(--brand); margin-bottom: 0.25rem; }
.hero-stats span { font-size: 0.875rem; color: var(--muted); }

.hero-visual { position: relative; }
.hero-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 2px; overflow: hidden; z-index: 2; transform: translateY(-1rem); }
.hero-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.hero-tag { position: absolute; bottom: 1rem; left: 1rem; background: var(--surface); border: 1px solid var(--border); padding: 0.5rem 0.75rem; font-size: 0.8125rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 2px; }
.hero-blob { position: absolute; top: 0; right: 0; width: 18rem; height: 18rem; background: radial-gradient(circle at 30% 40%, var(--brand) 0%, transparent 70%), radial-gradient(circle at 70% 60%, var(--accent) 0%, transparent 60%); opacity: 0.08; z-index: 1; border-radius: 2px; }

/* === Buttons & Forms === */
.btn, .btn-ghost, .btn.light { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; font-weight: 600; border-radius: 2px; transition: all 0.2s; cursor: pointer; border: none; font-size: 1rem; justify-content: center; }
.btn { background: var(--grad); color: #fff; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(200, 22, 29, 0.25); }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--brand); }
.btn.light { background: #fff; color: var(--brand); }
.btn.light:hover { background: var(--surface-2); }
.btn.full { width: 100%; }
.btn .ic, .btn-ghost .ic { width: 1rem; height: 1rem; }
.link-btn { background: none; border: none; cursor: pointer; padding: 0; color: var(--muted); transition: color 0.15s; }
.link-btn:hover { color: var(--brand); }
.link-btn.del { color: var(--brand); }

label { display: block; font-weight: 500; font-size: 0.9375rem; margin-bottom: 1rem; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], textarea, select { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: 2px; background: var(--surface); margin-top: 0.375rem; transition: border-color 0.15s; font-size: 1rem; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--brand); }
textarea { resize: vertical; }
.check-line { display: flex; align-items: flex-start; gap: 0.625rem; font-weight: 400; }
.check-line input[type="checkbox"] { margin-top: 0.25rem; width: 1.125rem; height: 1.125rem; flex-shrink: 0; accent-color: var(--brand); cursor: pointer; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .frow { grid-template-columns: 1fr; } }

/* === Cards & Surfaces === */
.surface { background: var(--surface); border: 1px solid var(--border); border-radius: 2px; }
.surface.pad { padding: clamp(1.5rem, 3vw, 2rem); }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 1rem; }
.cat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: 2px; padding: 1.5rem 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; transition: all 0.2s; }
.cat-tile:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.cat-ic { width: 2.5rem; height: 2.5rem; color: var(--brand); }
.cat-name { font-weight: 600; font-size: 0.9375rem; text-align: center; }

.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.5rem; }
.pcard { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 2px; overflow: hidden; transition: all 0.2s; }
.pcard:hover { transform: translateY(-3px); box-shadow: 0 4px 16px rgba(0,0,0,0.08); border-color: var(--brand); }
.pcard-img { position: relative; aspect-ratio: 1; background: var(--surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; }
.ph-letter { font-size: 3rem; font-weight: 700; color: var(--border); }
.ph-letter.big { font-size: 6rem; }
.pcard-out { position: absolute; top: 0.75rem; left: 0.75rem; background: rgba(0,0,0,0.75); color: #fff; padding: 0.375rem 0.625rem; font-size: 0.75rem; font-weight: 600; border-radius: 2px; }
.pcard-cat { position: absolute; bottom: 0.75rem; right: 0.75rem; background: var(--surface); border: 1px solid var(--border); padding: 0.25rem 0.5rem; font-size: 0.6875rem; font-weight: 600; border-radius: 2px; }
.pcard-body { padding: 1rem; display: flex; flex-direction: column; flex: 1; }
.pcard-title { font-weight: 600; font-size: 0.9375rem; margin-bottom: 0.5rem; line-height: 1.3; }
.pcard-seller { font-size: 0.8125rem; color: var(--muted); display: flex; align-items: center; gap: 0.375rem; margin-bottom: auto; }
.pcard-seller .ic { width: 0.875rem; height: 0.875rem; }
.pcard-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.pcard-price { font-weight: 700; font-size: 1.125rem; color: var(--brand); }
.pcard-go { width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border-radius: 2px; color: var(--muted); transition: all 0.15s; }
.pcard:hover .pcard-go { background: var(--brand); color: #fff; }

/* === Product Detail === */
.product { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; margin-bottom: 3rem; }
@media (max-width: 900px) { .product { grid-template-columns: 1fr; } }
.product-media { position: sticky; top: 2rem; background: var(--surface); border: 1px solid var(--border); border-radius: 2px; overflow: hidden; }
.product-media img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.product-info { display: flex; flex-direction: column; gap: 1rem; }
.tag { display: inline-flex; padding: 0.375rem 0.75rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 2px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; width: fit-content; }
.seller-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; color: var(--muted); transition: color 0.15s; width: fit-content; }
.seller-link:hover { color: var(--brand); }
.seller-link .ic { width: 1rem; height: 1rem; }
.ver-inline { font-size: 0.8125rem; color: var(--accent); display: inline-flex; align-items: center; gap: 0.25rem; }
.ver-inline .ic { width: 0.75rem; height: 0.75rem; }
.price-row { display: flex; align-items: center; gap: 1.5rem; padding: 1rem 0; }
.big-price { font-size: 2rem; font-weight: 700; color: var(--brand); }
.stock { font-size: 0.875rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border-radius: 2px; }
.stock.in { background: rgba(52, 168, 83, 0.1); color: #34a853; }
.stock.out { background: var(--surface-2); color: var(--muted); }
.stock .ic { width: 0.875rem; height: 0.875rem; }
.product-desc { color: var(--muted); line-height: 1.6; }
.buy-form { display: flex; gap: 0.75rem; margin: 1rem 0; }
.qty-in { width: 5rem; text-align: center; font-weight: 600; }
.prod-notes { list-style: none; padding: 1rem; background: var(--surface-2); border-radius: 2px; font-size: 0.875rem; display: flex; flex-direction: column; gap: 0.5rem; }
.prod-notes li { display: flex; align-items: center; gap: 0.5rem; }
.prod-notes .ic { width: 1rem; height: 1rem; color: var(--brand); }

/* === Sellers === */
.seller-row { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 0.5rem; }
.seller-chip { display: flex; align-items: center; gap: 0.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: 2px; padding: 0.75rem 1rem; min-width: 15rem; transition: all 0.2s; position: relative; }
.seller-chip:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.seller-ava { width: 2.5rem; height: 2.5rem; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.125rem; border-radius: 2px; flex-shrink: 0; }
.seller-ava.lg { width: 3.5rem; height: 3.5rem; font-size: 1.5rem; }
.seller-ava.xl { width: 5rem; height: 5rem; font-size: 2rem; }
.seller-meta { display: flex; flex-direction: column; }
.seller-meta b { font-size: 0.9375rem; }
.seller-meta em { font-style: normal; font-size: 0.8125rem; color: var(--muted); display: flex; align-items: center; gap: 0.25rem; margin-top: 0.125rem; }
.seller-meta .ic { width: 0.75rem; height: 0.75rem; }
.ver-badge { position: absolute; top: 0.5rem; right: 0.5rem; background: var(--accent); color: #fff; padding: 0.25rem 0.5rem; font-size: 0.6875rem; font-weight: 600; border-radius: 2px; display: inline-flex; align-items: center; gap: 0.25rem; }
.ver-badge .ic { width: 0.75rem; height: 0.75rem; }

.seller-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1.5rem; }
.seller-card { background: var(--surface); border: 1px solid var(--border); border-radius: 2px; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; transition: all 0.2s; position: relative; }
.seller-card:hover { transform: translateY(-3px); border-color: var(--brand); box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.seller-top { display: flex; align-items: flex-start; justify-content: space-between; }
.seller-card h3 { margin: 0; font-size: 1.125rem; }
.seller-card p { font-size: 0.875rem; line-height: 1.5; flex: 1; }
.seller-card-foot { display: flex; justify-content: space-between; font-size: 0.8125rem; color: var(--muted); padding-top: 0.75rem; border-top: 1px solid var(--border); }
.seller-card-foot .ic { width: 0.75rem; height: 0.75rem; }

.seller-hero { display: flex; align-items: flex-start; gap: 1.5rem; margin-bottom: 3rem; padding: 2rem; background: var(--surface); border: 1px solid var(--border); border-radius: 2px; }
@media (max-width: 640px) { .seller-hero { flex-direction: column; } }
.seller-hero h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: 0.75rem; }
.seller-contacts { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; font-size: 0.9375rem; }
.seller-contacts span, .seller-contacts a { display: inline-flex; align-items: center; gap: 0.375rem; }
.seller-contacts .ic { width: 0.875rem; height: 0.875rem; }
.seller-contacts a:hover { color: var(--brand); }

/* === Cart === */
.cart-layout { display: grid; grid-template-columns: 1fr 22rem; gap: 2rem; align-items: start; }
@media (max-width: 900px) { .cart-layout { grid-template-columns: 1fr; } }
.cart-items { display: flex; flex-direction: column; gap: 1rem; }
.cart-item { display: grid; grid-template-columns: 5rem 1fr auto auto auto; gap: 1rem; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 2px; padding: 1rem; }
@media (max-width: 640px) { .cart-item { grid-template-columns: 4rem 1fr; } .cart-item .ci-qty, .cart-item .ci-sum, .cart-item .ci-del { grid-column: 1 / -1; } }
.ci-img { width: 5rem; height: 5rem; background: var(--surface-2); border-radius: 2px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ci-img img { width: 100%; height: 100%; object-fit: cover; }
.ci-main { display: flex; flex-direction: column; gap: 0.25rem; }
.ci-title { font-weight: 600; font-size: 0.9375rem; transition: color 0.15s; }
.ci-title:hover { color: var(--brand); }
.ci-seller { font-size: 0.8125rem; color: var(--muted); display: flex; align-items: center; gap: 0.375rem; }
.ci-seller .ic { width: 0.75rem; height: 0.75rem; }
.ci-qty input { width: 4rem; text-align: center; font-weight: 600; }
.ci-sum { font-weight: 700; color: var(--brand); font-size: 1.125rem; }
.ci-del button { width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 2px; transition: background 0.15s; }
.ci-del button:hover { background: rgba(200, 22, 29, 0.1); }
.cart-clear { text-align: right; }
.cart-summary { position: sticky; top: 2rem; }
.cart-summary h3 { margin-bottom: 1rem; }
.sum-row { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid var(--border); font-size: 0.9375rem; }
.sum-row b { font-weight: 600; }
.sum-total { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; font-size: 1.125rem; }
.sum-total b { font-size: 1.5rem; font-weight: 700; color: var(--brand); }
.cart-summary .btn { margin-top: 1rem; }
.cart-summary p { margin-top: 1rem; text-align: center; }

/* === Checkout === */
.checkout-form { display: flex; flex-direction: column; gap: 1rem; }
.checkout-form h3 { margin-bottom: 0.5rem; }
.alert { background: rgba(200, 22, 29, 0.1); border: 1px solid var(--brand); border-radius: 2px; padding: 1rem; margin-bottom: 1.5rem; color: var(--brand); font-weight: 500; font-size: 0.9375rem; }
.alert.ok { background: rgba(52, 168, 83, 0.1); border-color: #34a853; color: #34a853; display: flex; align-items: center; gap: 0.5rem; }
.alert.ok .ic { width: 1rem; height: 1rem; }
.thanks { text-align: center; padding: 3rem 1rem; }
.thanks-ic { width: 5rem; height: 5rem; color: #34a853; margin: 0 auto 1.5rem; }
.thanks h1 { margin-bottom: 1rem; }
.thanks .lead { margin-bottom: 2rem; }

/* === Catalog === */
.cat-layout { display: grid; grid-template-columns: 16rem 1fr; gap: 2rem; }
@media (max-width: 900px) { .cat-layout { grid-template-columns: 1fr; } }
.filters { position: sticky; top: 2rem; align-self: start; }
.search-box { position: relative; margin-bottom: 1.5rem; }
.search-box input { padding-left: 2.75rem; }
.search-box .ic { position: absolute; top: 50%; left: 0.875rem; transform: translateY(-50%); color: var(--muted); }
.filter-block { margin-bottom: 1.5rem; }
.filter-block h4 { margin-bottom: 0.75rem; }
.fchip { display: block; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 2px; margin-bottom: 0.5rem; font-size: 0.875rem; transition: all 0.15s; }
.fchip:hover { background: var(--surface-2); }
.fchip.on { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; }
.cat-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
@media (max-width: 640px) { .cat-bar { flex-direction: column; align-items: stretch; gap: 1rem; } }
.sort-box { display: flex; align-items: center; gap: 0.75rem; }
.sort-box label { margin: 0; font-weight: 500; font-size: 0.875rem; }
.sort-box select { margin: 0; padding: 0.5rem 0.75rem; width: auto; font-size: 0.875rem; }

/* === Account === */
.dash-actions { display: flex; gap: 1rem; margin-bottom: 2rem; }
.order-list { display: flex; flex-direction: column; gap: 0.75rem; }
.order-row { display: grid; grid-template-columns: 4rem 1fr auto auto auto; gap: 1rem; align-items: center; padding: 0.875rem; background: var(--surface-2); border-radius: 2px; font-size: 0.875rem; }
@media (max-width: 640px) { .order-row { grid-template-columns: 1fr auto; } .order-row > * { grid-column: 1 / -1; } }
.order-row.wide { grid-template-columns: 4rem 1fr 1fr auto; }
.status-pill { padding: 0.375rem 0.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: 2px; font-weight: 600; font-size: 0.8125rem; }
.status-form select { margin: 0; padding: 0.375rem 0.625rem; font-size: 0.8125rem; }
.addr-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem; background: var(--surface-2); border-radius: 2px; margin-bottom: 0.5rem; font-size: 0.875rem; }
.addr-row .ic { width: 1rem; height: 1rem; color: var(--brand); flex-shrink: 0; }
.mini-form { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }
.mini-form input, .mini-form textarea, .mini-form select { margin: 0; }

.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 2px; padding: 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; }
.stat-ic { width: 2rem; height: 2rem; color: var(--brand); }
.stat-card b { font-size: 1.75rem; font-weight: 700; color: var(--brand); }
.stat-card em { font-style: normal; font-size: 0.875rem; color: var(--muted); }
.mng-list { display: flex; flex-direction: column; gap: 0.75rem; }
.mng-row { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 1rem; align-items: center; padding: 0.875rem; background: var(--surface-2); border-radius: 2px; font-size: 0.875rem; }
@media (max-width: 640px) { .mng-row { grid-template-columns: 1fr auto; } }
.mng-title { font-weight: 600; transition: color 0.15s; }
.mng-title:hover { color: var(--brand); }
.info-side h3 { margin-bottom: 1rem; }
.steps { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; }
.steps li { font-size: 0.9375rem; line-height: 1.5; }
.steps b { color: var(--brand); margin-right: 0.5rem; }
.mini-note { display: flex; align-items: flex-start; gap: 0.5rem; background: var(--surface-2); padding: 1rem; border-radius: 2px; font-size: 0.875rem; line-height: 1.5; }
.mini-note .ic { width: 1rem; height: 1rem; color: var(--brand); flex-shrink: 0; margin-top: 0.125rem; }

/* === Static pages === */
.band { padding: clamp(2rem, 5vw, 4rem) 0; }
.band-inner { max-width: 60rem; margin: 0 auto; }
.band h2 { text-align: center; margin-bottom: 2rem; }
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2rem; }
.feat-grid.plain { gap: 1.5rem; margin: 3rem 0; }
.feat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; }
.feat-ic { width: 3rem; height: 3rem; color: var(--brand); }
.feat h3 { font-size: 1.125rem; margin-bottom: 0.25rem; }
.feat p { font-size: 0.9375rem; color: var(--muted); line-height: 1.5; }

.zone-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.5rem; margin-bottom: 3rem; }
.zone-card { text-align: center; padding: 2rem 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.zone-ic { width: 3rem; height: 3rem; color: var(--brand); margin: 0 auto; }
.zone-card h3 { margin-bottom: 0.25rem; }
.zone-card p { font-size: 0.875rem; color: var(--muted); line-height: 1.5; flex: 1; }
.zone-card b { padding-top: 0.75rem; border-top: 1px solid var(--border); font-weight: 600; font-size: 0.875rem; }

.prose { max-width: 48rem; margin: 0 auto; font-size: 1.0625rem; line-height: 1.7; }
.prose h2 { margin-top: 2rem; margin-bottom: 0.75rem; }
.prose p { margin-bottom: 1rem; }
.prose a { color: var(--brand); text-decoration: underline; }
.prose a:hover { color: var(--accent); }

.about-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; margin-bottom: 3rem; }
@media (max-width: 900px) { .about-hero { grid-template-columns: 1fr; } }
.about-copy { padding: 1.5rem; }
.about-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 2px; }

.cta-band { background: var(--grad); color: #fff; border-radius: 2px; padding: clamp(2rem, 5vw, 3rem); margin: clamp(3rem, 6vw, 5rem) 0; }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
@media (max-width: 640px) { .cta-inner { flex-direction: column; text-align: center; } }
.cta-band h2 { margin-bottom: 0.5rem; }
.cta-band p { opacity: 0.95; }

.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.contact-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; padding: 1.5rem 1rem; transition: all 0.2s; }
.contact-card:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.contact-card .ic { width: 2rem; height: 2rem; color: var(--brand); }
.contact-card b { font-size: 1.0625rem; }
.contact-card em { font-style: normal; font-size: 0.875rem; color: var(--muted); }

.faq { max-width: 48rem; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary { padding: 1.25rem 0; font-weight: 600; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; transition: color 0.15s; }
.faq-item summary:hover { color: var(--brand); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-plus { width: 1.5rem; height: 1.5rem; color: var(--brand); transition: transform 0.2s; flex-shrink: 0; }
.faq-item[open] .faq-plus { transform: rotate(45deg); }
.faq-item p { padding-bottom: 1.25rem; color: var(--muted); line-height: 1.6; }

.empty { text-align: center; padding: 4rem 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.empty.big h1 { font-size: 5rem; font-weight: 800; color: var(--border); margin-bottom: 0; }
.empty .ic { width: 4rem; height: 4rem; color: var(--border); }
.empty p { color: var(--muted); max-width: 28rem; }

/* === Footer === */
.site-footer { background: var(--surface); border-top: 1px solid var(--border); padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 4vw, 3rem); max-width: 80rem; margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 2rem; margin-bottom: 2rem; }
.footer-col { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-col h4 { margin-bottom: 0.25rem; font-size: 0.875rem; }
.footer-col a, .footer-col span { font-size: 0.9375rem; color: var(--muted); transition: color 0.15s; line-height: 1.6; }
.footer-col a:hover { color: var(--brand); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: 0.875rem; color: var(--muted); }
@media (max-width: 640px) { .footer-bottom { flex-direction: column; gap: 0.5rem; } }

/* === Animations === */
html.js .reveal { opacity: 0; transform: translateY(1.5rem); }
html.js .reveal.in { opacity: 1; transform: translateY(0); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html.js .reveal { opacity: 1; transform: none; }
}

/* --- Недостающие дизайн-токены (значения из theme.css платформы) --- */
:root{
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --shadow-3: 0 2px 4px rgba(20, 20, 40, .06), 0 24px 60px rgba(20, 20, 40, .14);
}