:root {
  --bg: #f7f8fc;
  --surface: #ffffff;
  --surface-muted: #f1f3fb;
  --text: #1f2430;
  --text-soft: #5e6678;
  --accent: #5b6cff;
  --accent-contrast: #ffffff;
  --border: #dfe3f2;
  --shadow: 0 10px 30px rgba(24, 33, 77, 0.08);
  --radius: 16px;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text); background: var(--bg); line-height: 1.5; }
.container { width: min(1120px, 92vw); margin: 0 auto; }
.header { position: sticky; top: 0; z-index: 20; background: rgba(247,248,252,.92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border); }
.header__inner, .footer__inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 0; }
.logo { font-weight: 800; letter-spacing: .08em; text-decoration: none; color: var(--text); }
.nav { display:flex; gap:1.05rem; flex-wrap: wrap; }
.nav a, .footer a { color: var(--text-soft); text-decoration: none; }
.nav__tab { display:inline-flex; align-items:center; padding:.25rem .2rem; border-bottom:2px solid transparent; }
.nav__tab--active { color: var(--text); border-bottom-color:#bfc7ff; font-weight:600; }
.hero { padding: 3.5rem 0 2rem; }
.hero__grid { display:grid; grid-template-columns: 1.4fr 1fr; gap:1.25rem; }
.eyebrow { color: var(--accent); font-weight:700; margin: 0 0 .5rem; }
h1 { font-size: clamp(1.75rem, 4.5vw, 3rem); line-height: 1.15; margin:.2rem 0 1rem; }
h2 { margin:.2rem 0 1rem; font-size: clamp(1.2rem,2.3vw,1.8rem); }
.lead,.meta { color: var(--text-soft); }
.hero__actions,.product__actions { display:flex; gap:.6rem; margin-top:1rem; flex-wrap:wrap; }
.hero__card,.card,.product,.note { background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.hero__card,.card,.product,.note { padding: 1rem; }
.hero__card--slogans { background: linear-gradient(135deg, #ffffff 0%, #f5f7ff 100%); }
.hero__card--slogans h2 { margin-bottom: .8rem; }
.hero__slogan { margin: 0 0 .75rem; color: #39425d; font-size: 1.05rem; line-height: 1.45; }
.hero__slogan:last-child { margin-bottom: 0; }
.section { padding: 2.2rem 0; }
.section--muted { background: var(--surface-muted); }
.section__head { display:flex; justify-content: space-between; align-items: center; gap: 1rem; }
.cards { display:grid; gap:1rem; }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.product__placeholder { aspect-ratio: 4/3; border-radius: 12px; display:grid; place-items:center; background:#eef1ff; color:#6a7393; margin-bottom:.75rem; overflow:hidden; }
.product__placeholder--lg { aspect-ratio: 1/1; }
.product__image { width:100%; height:100%; object-fit:cover; display:block; }
.product h3 { margin:0 0 .25rem; }
.price { font-weight: 700; margin:.2rem 0; }
.split { display:grid; grid-template-columns: 1.2fr 1fr; gap:1rem; align-items:start; }

.btn { display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--accent); background:var(--accent); color:var(--accent-contrast); border-radius:999px; padding:.62rem 1rem; font-weight:600; text-decoration:none; cursor:pointer; transition: transform .15s ease, box-shadow .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn--ghost { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn--small { width:100%; border-radius:12px; }
.btn:disabled { opacity: .75; cursor: default; }
.chips { display:flex; gap:.5rem; flex-wrap:wrap; }
.chip { border:1px solid var(--border); background:var(--surface); color:var(--text-soft); border-radius:999px; padding:.4rem .8rem; cursor:pointer; }
.chip--active { background:#e9ecff; border-color:#cfd6ff; color:#303d9f; }

.header__actions { display:flex; align-items:center; gap:.55rem; }
.cart-badge { border:1px solid var(--border); background:var(--surface); padding:.5rem .75rem; border-radius:999px; color:var(--text-soft); text-decoration:none; font-weight:600; }
.catalog-title { margin-bottom:0; }
.top-gap { margin-top: 1rem; }

.form { display:grid; gap:.65rem; }
label { display:grid; gap:.35rem; font-weight:600; font-size:.95rem; }
input, textarea, select { width:100%; border:1px solid var(--border); background:#fff; border-radius:12px; padding:.62rem .75rem; font:inherit; color:var(--text); }
textarea { min-height: 90px; resize: vertical; }
input:focus, textarea:focus, select:focus, button:focus, a:focus, summary:focus { outline: 3px solid #bcc5ff; outline-offset: 1px; }
.total { margin-top: .7rem; font-size: 1.1rem; }
.row { display:grid; grid-template-columns: 1.3fr auto auto auto; align-items:center; gap:.7rem; padding:.7rem 0; border-bottom:1px dashed var(--border); }
.qty { display:flex; align-items:center; gap:.5rem; }
.empty { color: var(--text-soft); padding:.7rem 0; }
.table { width:100%; border-collapse: collapse; }
.table th,.table td { border:1px solid var(--border); padding:.55rem; text-align:left; }
.auth { max-width: 520px; }
.prose { max-width: 820px; }
details summary { cursor: pointer; font-weight: 700; }
.footer { border-top: 1px solid var(--border); margin-top: 2rem; }

@media (max-width: 980px) {
  .hero__grid,.cards--4,.cards--3,.split { grid-template-columns: 1fr 1fr; }
  .nav { display:none; }
}
@media (max-width: 680px) {
  .hero__grid,.cards--4,.cards--3,.split { grid-template-columns: 1fr; }
  .header__inner,.footer__inner { flex-direction: column; align-items: flex-start; }
  .row { grid-template-columns: 1fr; }
}


.controls { display:grid; grid-template-columns: 1fr 280px; gap:.7rem; }
@media (max-width: 680px) { .controls { grid-template-columns: 1fr; } }

.link-reset { color: inherit; text-decoration: none; }
.link-reset:hover { text-decoration: underline; }

.hidden-field { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.admin-image-preview { width: 180px; height: 140px; object-fit: cover; border-radius: 12px; border:1px solid var(--border); }
.admin-stat-card { width: 100%; text-align: left; cursor: pointer; }
.admin-stat-card h3,
.admin-stat-card p { margin: 0; }
.admin-stat-card p { margin-top: .7rem; }
.admin-stat-card--active { border-color: #bfc7ff; box-shadow: 0 10px 24px rgba(43, 60, 187, 0.15); }
.row--admin-order { grid-template-columns: minmax(180px, 1.5fr) auto auto minmax(260px, 1fr); }
.row--admin-order [data-admin-order-content] { grid-column: 1 / -1; }
.admin-panel { display: none; }
.admin-panel.admin-panel--active { display: block; }