:root {
  --bg: #f7f7f9;
  --surface: #ffffff;
  --text: #111418;
  --muted: #6b737c;
  --accent: #ff3b30; /* основной красный */
  --accent-2: #ff6a60; /* градиентный красный */
  --accent-bg: #fff1f0; /* светлый фон для пилюль/бейджей */
  --border: #e6e8eb;
  --chip-border: #ffc9c4;
  --shadow: 0 6px 20px rgba(16,24,40,0.08);
}

* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); }

.navbar { display: flex; gap: 8px; align-items: center; padding: 12px 16px; background: var(--surface); position: sticky; top: 0; border-bottom: 1px solid var(--border); z-index: 10; }
.brand { font-weight: 800; letter-spacing: .2px; }
.nav-actions button { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.nav-actions button:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }

#app { max-width: 1040px; margin: 16px auto 82px; padding: 0 16px; }

/* Поиск */
.search { display: flex; align-items: center; gap: 8px; background: #f2f3f5; border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; }
.search input { flex: 1; border: none; background: transparent; outline: none; font-size: 16px; color: var(--text); }
.search .icon { width: 18px; height: 18px; opacity: .6; }

/* Чипсы */
.chips { display: flex; gap: 10px; overflow-x: auto; padding: 12px 2px; }
.chip { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--chip-border); border-radius: 16px; padding: 8px 12px; box-shadow: var(--shadow); white-space: nowrap; transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease; }
.chip:hover { border-color: var(--accent); background: var(--accent-bg); box-shadow: 0 6px 22px rgba(255,59,48,0.15); transform: translateY(-1px); }
.chip img { width: 28px; height: 28px; border-radius: 8px; }
.chip .caption { font-size: 12px; color: var(--muted); }

/* Малые бейджи/пилюли для скидок */
.badge { display: inline-block; background: var(--accent-bg); color: var(--accent); font-weight: 700; font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--chip-border); }

/* Баннер */
.banner { background: linear-gradient(90deg, #a20c0c, var(--accent)); color: #fff; border-radius: 16px; padding: 16px; box-shadow: var(--shadow); display: flex; justify-content: space-between; align-items: center; }
.banner .title { font-weight: 900; margin: 0 0 6px; }
.banner .desc { margin: 0; opacity: .95; }
.banner .btn { background: #ffffff; color: #111418; border-radius: 12px; padding: 10px 14px; font-weight: 800; border: 2px solid #fff; }

/* Карточки и таблицы */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px; box-shadow: var(--shadow); }
.btn { background: linear-gradient(180deg, var(--accent), var(--accent-2)); color: #fff; border: none; border-radius: 12px; padding: 12px 14px; font-weight: 800; cursor: pointer; box-shadow: 0 6px 18px rgba(255,59,48,0.25); transition: transform .12s ease, box-shadow .15s ease, filter .15s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(255,59,48,0.35); filter: brightness(1.02); }
.btn.secondary { background: #fff; color: var(--text); border: 2px solid var(--accent); box-shadow: none; }
.btn.secondary:hover { background: var(--accent-bg); }

.list { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.list th, .list td { padding: 12px 10px; border-bottom: 1px solid var(--border); }
.muted { color: var(--muted); }

.toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }

input[type="file"] { display: none; }
label.file-btn { display: inline-block; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 12px; cursor: pointer; background: #fff; }
label.file-btn:hover { border-color: var(--accent); background: var(--accent-bg); }

/* Нижняя навигация */
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; background: var(--surface); border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 8px; z-index: 20; }
.bottom-nav button { position: relative; background: transparent; border: none; padding: 8px 4px 12px; color: var(--muted); font-weight: 700; }
.bottom-nav button.active { color: var(--accent); }
.bottom-nav button.active::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 4px; height: 3px; background: var(--accent); border-radius: 3px; }

/* Категории под шапкой */
.categories { display: flex; gap: 12px; overflow-x: auto; padding: 10px 0; }
.categories .cat { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; background: #fff; border: 1px solid var(--border); border-radius: 12px; white-space: nowrap; font-weight: 700; }
.categories .cat.primary { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Крупный hero баннер (псевдослайдер) */
.hero { position: relative; border-radius: 16px; overflow: hidden; background: linear-gradient(90deg, #d12a1f, #ff7a72); color: #fff; padding: 22px 18px; margin: 8px 0 14px; }
.hero h2 { margin: 0 0 8px; font-size: 24px; line-height: 1.2; font-weight: 900; }
.hero p { margin: 0 0 12px; opacity: .95; }
.hero .hero-actions { display: flex; gap: 10px; }
.hero .pill { background: #fff; color: #111; padding: 10px 14px; border-radius: 999px; font-weight: 800; }

/* Сетка карточек товаров */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.pcard { position: relative; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.pcard .thumb { width: 100%; aspect-ratio: 1/1; background: #fafafa; border-radius: 10px; display: grid; place-items: center; font-size: 40px; }
.pcard .title { font-weight: 700; font-size: 14px; min-height: 36px; }
.pcard .price-row { display: flex; align-items: baseline; gap: 8px; }
.pcard .price { font-weight: 900; font-size: 18px; }
.pcard .old { color: var(--muted); text-decoration: line-through; font-size: 13px; }
.pcard .fav { position: absolute; top: 10px; right: 10px; background: #fff; border: 1px solid var(--border); border-radius: 999px; width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer; }
.pcard .badge { position: absolute; top: 10px; left: 10px; }