/* «ЦГ Опт» — клиентские страницы /p/* (проект 183). Светлая тема, сначала телефон.
   Цвета — брендбук ЦГ (KB#3759): тёмно-синий #1D2638, голубой #2B9DD9, маджента #EF046D. */
:root {
  --navy: #1D2638; --blue: #2B9DD9; --pink: #EF046D; --bg: #f3f5f8; --card: #fff; --line: #dde2e8;
  --ink: #1b2330; --ink2: #5b6573; --ok: #1e7b34; --okbg: #e3f4e7; --warn: #9a5a00; --warnbg: #fff2dc;
  --err: #b3261e; --errbg: #fde7e5; --r: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Fira Sans", Arial, sans-serif;
  -webkit-text-size-adjust: 100%; }
a { color: var(--blue); }
h1 { font-size: 22px; margin: 4px 0 6px; }
h2 { font-size: 18px; margin: 4px 0 8px; }
main { max-width: 760px; margin: 0 auto; padding: 8px 12px calc(150px + env(safe-area-inset-bottom)); }
body.auth main { padding-bottom: 40px; }
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff; border-bottom: 1px solid var(--line); padding: calc(6px + env(safe-area-inset-top)) 12px 6px; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.brand img { height: 30px; width: auto; }
.brand .opt { font-weight: 700; color: var(--pink); font-size: 18px; letter-spacing: .02em; }
.who { font-size: 13px; color: var(--ink2); text-decoration: none; max-width: 48%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; margin: 10px 0; }
.card.narrow { max-width: 460px; margin: 16px auto; }
.sub { color: var(--ink2); font-size: 14px; }
.sub.ok, .ok { color: var(--ok); }
.no { color: var(--err); }
.center { text-align: center; }
.msg { border-radius: 12px; padding: 10px 12px; margin: 8px 0; font-weight: 600; }
.msg.ok { background: var(--okbg); color: var(--ok); }
.msg.warn { background: var(--warnbg); color: var(--warn); }
.msg.err { background: var(--errbg); color: var(--err); }
.msg details { font-weight: 400; margin-top: 6px; }
.banner { background: linear-gradient(90deg, #fde3ef, #e6f4fc); border-radius: 12px; padding: 10px 12px; margin: 8px 0; font-weight: 600; color: var(--navy); }
.banner.sm { font-size: 14px; padding: 6px 10px; }
.form label { display: block; margin: 10px 0; font-size: 14px; color: var(--ink2); }
.form input, .form textarea, input[type=search] { display: block; width: 100%; margin-top: 4px; padding: 12px; font: inherit; color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.form small { color: var(--ink2); }
.form .check { display: flex; gap: 10px; align-items: flex-start; color: var(--ink); }
.form .check input { width: 22px; height: 22px; margin: 2px 0 0; flex: 0 0 auto; }
.seg { border: 0; padding: 0; margin: 6px 0; display: flex; gap: 6px; flex-wrap: wrap; }
.seg legend { font-size: 14px; color: var(--ink2); margin-bottom: 4px; }
.segi { margin: 0 !important; }
.segi input { position: absolute; opacity: 0; }
.segi span { display: inline-block; padding: 9px 16px; border: 1px solid var(--line); border-radius: 99px; color: var(--ink); background: #fff; }
.segi input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 8px 16px; border-radius: 12px;
  border: 1px solid var(--line); background: #fff; color: var(--navy); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn.main { background: var(--pink); border-color: var(--pink); color: #fff; }
.form .btn.main, .sh-in .btn.main { width: 100%; min-height: 54px; font-size: 18px; margin-top: 8px; }
.btn.sm { min-height: 38px; padding: 6px 12px; font-size: 14px; }
.btn.ghost { background: transparent; color: var(--ink2); }
.btn[disabled] { opacity: .6; }
button.link { background: none; border: 0; color: var(--ink2); text-decoration: underline; font: inherit; padding: 10px; cursor: pointer; }
.row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.kv > div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.kv span { color: var(--ink2); }
.steps { padding-left: 20px; } .steps li { margin: 6px 0; }
.plain { padding-left: 18px; font-size: 14px; color: var(--ink2); }
.head { padding: 4px 2px; }
.head .myline { display: block; margin: 6px 0; padding: 10px 12px; border-radius: 12px; background: #e8f4fb; color: var(--navy); text-decoration: none; font-weight: 600; }
.cd.soon { color: var(--err); font-weight: 700; }
/* фильтры */
.blk { scroll-margin-top: calc(110px + env(safe-area-inset-top)); }
details.req > summary { cursor: pointer; font-weight: 700; }
.reqf { margin: 8px 0 4px; }
.reqf input { width: 100%; box-sizing: border-box; }
.reqf .row { flex-wrap: nowrap; margin-top: 8px; }
.reqf .row input { flex: 1; min-width: 0; }
.reqf .btn { margin-top: 8px; width: 100%; }
.sbar { position: sticky; top: calc(43px + env(safe-area-inset-top)); z-index: 10; background: var(--bg); padding: 6px 0; }
.sbar input[type=search] { margin: 0; padding: 10px 12px; }
.filters { padding: 2px 0 4px; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; padding: 7px 12px; border-radius: 99px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-size: 14px; text-decoration: none; cursor: pointer; }
.chip.on { background: var(--navy); color: #fff; border-color: var(--navy); }
/* позиции */
.blk h2 { margin: 16px 2px 6px; }
.blk.hl h2 { color: var(--pink); }
.it { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); padding: 8px; margin: 6px 0; }
.it.in { border-color: var(--pink); box-shadow: 0 0 0 1px var(--pink) inset; }
.it[hidden], .blk[hidden] { display: none; }
.ph { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: #f0f2f5; display: flex; align-items: center; justify-content: center; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph img.ph0 { width: 60%; height: 60%; object-fit: contain; opacity: .35; }
.nm { font-weight: 600; font-size: 15px; }
.cc { font-size: 12px; color: var(--ink2); font-weight: 400; border: 1px solid var(--line); border-radius: 6px; padding: 0 4px; }
.tags { display: flex; gap: 4px; flex-wrap: wrap; margin: 2px 0; }
.tg { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 99px; text-transform: uppercase; letter-spacing: .02em; }
.tp { background: var(--pink); color: #fff; } .tn { background: var(--blue); color: #fff; } .tr { background: #6b4bb8; color: #fff; }
.tt { background: #e8f4fb; color: var(--navy); } .tl { background: var(--warnbg); color: var(--warn); }
.pr { font-size: 14px; } .pr s { color: var(--ink2); }
.st { font-size: 13px; color: var(--ink2); }
.qty { display: flex; align-items: center; gap: 4px; }
.qty button { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-size: 22px; line-height: 1; color: var(--navy); cursor: pointer; }
.qty .pl { background: var(--navy); color: #fff; border-color: var(--navy); }
.qty .n { min-width: 46px; text-align: center; font-weight: 700; }
/* корзина */
.cartbar { position: fixed; left: 0; right: 0; bottom: calc(58px + env(safe-area-inset-bottom)); z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -4px 14px rgba(0,0,0,.06); padding: 8px 12px; }
.cartbar[hidden] { display: none; }
.cartbar .ct { font-size: 14px; }
.cartbar form { margin: 0; }
.sheet { position: fixed; inset: 0; z-index: 40; background: rgba(20,27,39,.45); display: flex; align-items: flex-end; }
.sheet[hidden] { display: none; }
.sh-in { background: #fff; width: 100%; max-height: 88vh; overflow-y: auto; border-radius: 18px 18px 0 0; padding: 14px 14px calc(16px + env(safe-area-inset-bottom)); }
.shr { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.shn { font-weight: 600; font-size: 14px; }
.sh-tot { font-weight: 700; margin: 10px 0; }
/* заказ */
.ol { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ol .ol-q { text-align: right; }
.ol .ol-a { grid-column: 1 / -1; display: flex; gap: 6px; }
.ol .ol-a form { margin: 0; }
.ol.tot { border-bottom: 0; font-weight: 700; }
.ord-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.badge { font-size: 12px; padding: 2px 8px; border-radius: 99px; background: #eceff3; color: var(--ink2); white-space: nowrap; }
.badge.s-open { background: var(--okbg); color: var(--ok); }
.badge.s-plan { background: #e8f4fb; color: var(--navy); }
.card.cal.hot { border-color: var(--pink); }
/* нижнее меню */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: grid; grid-template-columns: repeat(4, 1fr); background: #fff;
  border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.tabs a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 2px 6px; font-size: 12px; color: var(--ink2); text-decoration: none; }
.tabs a.on { color: var(--pink); font-weight: 700; }
.ic { width: 22px; height: 22px; background: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.ic-shop { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E"); }
.ic-cal { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }
.ic-list { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E"); }
.ic-me { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1'/%3E%3C/svg%3E"); }
@media (min-width: 700px) {
  .it { grid-template-columns: 80px 1fr auto; }
  .ph { width: 80px; height: 80px; }
}