/* Сайт-каталог магазина (шаблон утверждён 23.10.2026): белый фон, цвет магазина — акцент (--a). */
:root { --t: #14161A; --m: #4A4F59; --f: #8A8F99; --l: #EEF0F3; --b: #E3E5EA; --soft: #F4F5F8; --ok: #15803D; --bad: #B42318; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #FFFFFF; color: var(--t); font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  caret-color: transparent; }  /* у покупателя может быть включён «активный курсор» (F7) — мигает только в полях ввода */
input, textarea, select { caret-color: auto; }
a { color: inherit; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  caret-color: transparent; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.dt, .chip { caret-color: transparent; user-select: none; -webkit-user-select: none; }
.dt:focus:not(:focus-visible), .chip:focus:not(:focus-visible), .bt:focus:not(:focus-visible) { outline: none; }
.dt.on:focus:not(:focus-visible) { outline: 2px solid var(--a); }
:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; }
.muted { color: var(--f); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
[hidden] { display: none !important; }

/* шапка */
.hd { border-bottom: 1px solid var(--l); background: #fff; position: sticky; top: 0; z-index: 5; }
.hd-in { display: flex; align-items: center; gap: 16px; height: 62px; }
.logo { font-weight: 700; font-size: 19px; color: var(--a); text-decoration: none; white-space: nowrap; display: flex; align-items: center; }
.logo img { height: 36px; width: auto; max-width: 180px; object-fit: contain; display: block; }
.sr { flex: 1; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--b); border-radius: 10px; color: var(--f); max-width: 620px; }
.sr:focus-within { border-color: var(--a); }
.sr input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; color: var(--t); background: none; }
.wa { display: flex; align-items: center; gap: 6px; color: var(--m); text-decoration: none; white-space: nowrap; }
.wa svg { color: #25A244; }
.menu { display: flex; gap: 22px; height: 42px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.menu a { color: var(--m); text-decoration: none; white-space: nowrap; }
.menu a:hover, .menu a.on { color: var(--a); }
.menu a.on { font-weight: 600; }

/* список */
.crumb { color: var(--f); font-size: 13px; padding: 14px 0 6px; }
.crumb a { color: var(--f); text-decoration: none; }
.crumb a:hover { color: var(--a); }
.list-hd { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.list-hd h1 { font-size: 24px; font-weight: 600; margin: 0; }
.subcats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.subcats a { border: 1px solid var(--b); border-radius: 99px; padding: 5px 12px; text-decoration: none; color: var(--m); font-size: 13px; }
.subcats a:hover { border-color: var(--a); color: var(--a); }
.body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; padding-bottom: 40px; }
.flt-toggle { display: none; }
.fg { margin-bottom: 18px; }
.fg h4 { font-size: 13px; font-weight: 600; margin: 0 0 8px; }
.fg select, .price-in input { width: 100%; height: 34px; border: 1px solid var(--b); border-radius: 8px; padding: 0 8px; font: inherit; font-size: 13px; color: var(--t); background: #fff; }
.price-in { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cb { display: flex; align-items: center; gap: 7px; color: var(--m); font-size: 13.5px; padding: 3px 0; cursor: pointer; }
.cb input { width: 15px; height: 15px; accent-color: var(--a); margin: 0; }
.cb .sw { width: 13px; height: 13px; border-radius: 50%; border: 1px solid #D8DBE2; }
.fg:not(.all) .cb.extra { display: none; }
.fg.all .more-btn { display: none; }
.more-btn { color: var(--a); font-size: 13px; padding: 4px 0; }
.flt-act { display: flex; align-items: center; gap: 12px; }
.btn { height: 36px; padding: 0 16px; border-radius: 8px; background: var(--a); color: #fff; font-weight: 600; }
.reset { color: var(--f); font-size: 13px; }

/* карточки — строго одинаковые: фиксированные места и высоты */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.card { border: 1px solid var(--l); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; min-width: 0; transition: border-color .15s; }
.card:hover { border-color: var(--b); }
.ph { aspect-ratio: 1 / 1; border-radius: 9px; background: var(--soft); display: flex; align-items: center; justify-content: center; color: #B7BCC6; margin-bottom: 10px; position: relative; overflow: hidden; }
.ph svg { width: 44px; height: 44px; stroke-width: 1.3; }
.ph img { width: 100%; height: 100%; object-fit: contain; }
.tag { position: absolute; left: 8px; top: 8px; font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: 6px; background: #FDECEC; color: var(--bad); }
.nm { font-weight: 600; line-height: 18px; height: 36px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 8px; text-decoration: none; }
.nm:hover { color: var(--a); }
.row { height: 26px; display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; margin: 0 -3px 6px; padding: 0 3px; overflow: hidden; }
.chip { flex: 0 0 auto; height: 24px; min-width: 54px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--b); border-radius: 6px; font-size: 12px; color: var(--m); white-space: nowrap; }
.chip.on { border-color: var(--a); color: var(--a); }
.chip.off { color: #C5C9D2; text-decoration: line-through; }
.dt { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 1px solid #D8DBE2; background: #fff; }
.dt.on { outline: 2px solid var(--a); outline-offset: 1px; }
.dt.off { opacity: .45; }
.more { flex: 0 0 auto; font-size: 12px; color: var(--f); }
.pr { height: 22px; font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.old { height: 18px; font-size: 12.5px; color: #9AA0AA; white-space: nowrap; }
.st { height: 20px; font-size: 12.5px; margin-top: 2px; }
.ok { color: var(--ok); } .no { color: var(--f); }
.card .bt { margin-top: 10px; height: 38px; display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--a); color: #fff; border-radius: 9px; font-weight: 600; white-space: nowrap; }
.card .bt[data-act="notify"] { background: #fff; color: var(--a); border: 1px solid var(--a); }
.pages { display: flex; gap: 6px; justify-content: center; margin: 24px 0 0; }
.pages a, .pages span { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--b); border-radius: 8px; text-decoration: none; color: var(--m); }
.pages .on { border-color: var(--a); color: var(--a); font-weight: 600; }
.empty { padding: 40px 0; text-align: center; }

/* страница товара */
.pp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px; padding: 6px 0 24px; }
.gal .main { aspect-ratio: 1 / 1; border-radius: 14px; background: var(--soft); display: flex; align-items: center; justify-content: center; color: #B7BCC6; position: relative; overflow: hidden; }
.gal .main svg { width: 110px; height: 110px; stroke-width: 1; }
.gal .main img { width: 100%; height: 100%; object-fit: contain; }
.thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 8px; }
.th { aspect-ratio: 1 / 1; border-radius: 9px; background: var(--soft); border: 1px solid transparent; overflow: hidden; }
.th img { width: 100%; height: 100%; object-fit: contain; }
.th.on { border-color: var(--a); }
.info h1 { font-size: 26px; font-weight: 600; margin: 4px 0 6px; line-height: 1.25; }
.meta { color: var(--f); font-size: 13px; margin-bottom: 16px; }
.lbl { font-size: 13px; color: var(--m); margin: 14px 0 8px; }
.lbl-v { color: var(--t); }
.opts { display: flex; gap: 8px; flex-wrap: wrap; }
.opts .dt { width: 30px; height: 30px; }
.opts .dt.on { outline-offset: 2px; }
.opts .chip { height: 34px; min-width: 76px; padding: 0 10px; font-size: 13.5px; border-radius: 8px; }
.price { display: flex; align-items: baseline; gap: 10px; margin-top: 20px; }
.price b { font-size: 28px; font-weight: 700; }
.price s { color: #9AA0AA; font-size: 15px; }
.stock { font-size: 14px; margin-top: 4px; }
.where { font-size: 13px; margin-top: 4px; }
.btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; max-width: 460px; }
.bt { height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.b1 { background: var(--a); color: #fff; }
.b1[data-act="notify"] { background: #fff; color: var(--a); border: 1px solid var(--a); }
.b2 { border: 1px solid var(--a); color: var(--a); }
.dlv { margin-top: 16px; border: 1px solid var(--l); border-radius: 11px; padding: 10px 12px; color: var(--m); font-size: 13.5px; max-width: 520px; }
.dlv > div { display: flex; gap: 8px; align-items: flex-start; padding: 3px 0; }
.dlv svg { margin-top: 1px; color: var(--f); }
.dlv a { color: var(--a); }
.pick.dim { opacity: .5; }
.sec { border-top: 1px solid var(--l); padding: 20px 0; }
.sec h2 { font-size: 18px; font-weight: 600; margin: 0 0 10px; }
.sec table { width: 100%; max-width: 720px; border-collapse: collapse; }
.sec td { padding: 7px 0; border-bottom: 1px dashed var(--l); vertical-align: top; }
.sec td:first-child { color: var(--f); width: 45%; }
.desc { color: var(--m); line-height: 1.65; white-space: pre-line; max-width: 760px; }

/* корзина в шапке и подсказка «В корзине · Оформить» */
.cartl { position: relative; display: flex; align-items: center; gap: 6px; color: var(--m); text-decoration: none; white-space: nowrap; }
.cartl:hover { color: var(--a); }
.cart-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--a); color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: .2s;
  background: var(--t); color: #fff; border-radius: 11px; padding: 11px 16px; display: flex; gap: 14px; align-items: center; z-index: 20; font-size: 14px; }
.toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast a { color: #fff; font-weight: 600; text-decoration: underline; }

/* страница корзины */
.cart { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; padding: 6px 0 40px; }
.c-box { border: 1px solid var(--l); border-radius: 14px; padding: 18px; }
.c-box h1, .c-box h2 { font-size: 20px; font-weight: 600; margin: 0 0 8px; }
.c-line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--l); }
.c-line.bad .c-nm { color: var(--bad); }
.c-ph { width: 64px; height: 64px; border-radius: 9px; background: var(--soft); overflow: hidden; display: block; }
.c-ph img { width: 100%; height: 100%; object-fit: cover; }
.c-nm { font-weight: 600; text-decoration: none; display: block; }
.c-stp { display: inline-flex; align-items: center; border: 1px solid var(--b); border-radius: 8px; margin-top: 6px; }
.c-stp button { width: 30px; height: 28px; font-size: 16px; }
.c-stp button:disabled { color: #C4C8CF; cursor: default; }
.c-stp span { min-width: 26px; text-align: center; }
.c-warn { color: var(--bad); font-size: 13px; margin-top: 4px; }
.c-warn.soft { color: #A15C07; }
.c-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.c-pr { font-weight: 600; white-space: nowrap; }
.c-x { color: var(--f); font-size: 20px; line-height: 1; padding: 4px; margin-top: auto; }
.c-x:hover { color: var(--bad); }
.c-sum > div { display: flex; justify-content: space-between; padding-top: 8px; }
.c-total { font-size: 18px; font-weight: 700; }
.c-note { font-size: 12.5px; margin: 10px 0 0; }
.c-empty { padding: 20px 0; }
.c-empty .bt { display: inline-flex; padding: 0 22px; text-decoration: none; }
.c-f { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--m); margin-bottom: 12px; }
.c-f input, .c-f textarea { height: 40px; border: 1px solid var(--b); border-radius: 9px; padding: 0 12px; font: inherit; font-size: 15px; color: var(--t); }
.c-f textarea { height: auto; padding: 9px 12px; resize: vertical; }
.c-f input:focus, .c-f textarea:focus { outline: none; border-color: var(--a); }
.seg3 { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--b); border-radius: 9px; overflow: hidden; }
.seg3.two { grid-template-columns: repeat(2, 1fr); }
.seg3 label { cursor: pointer; }
.seg3 input { position: absolute; opacity: 0; pointer-events: none; }
.seg3 span { display: block; text-align: center; padding: 9px 4px; color: var(--t); font-size: 14px; }
.seg3 input:checked + span { background: var(--a); color: #fff; }
.seg3 input:disabled + span { color: #C4C8CF; cursor: default; }
.seg3 input:focus-visible + span { outline: 2px solid var(--a); outline-offset: -2px; }
.c-place { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--b); border-radius: 9px; padding: 9px 12px; margin-bottom: 7px; cursor: pointer; font-size: 14px; }
.c-place:has(input:checked) { border-color: var(--a); box-shadow: inset 0 0 0 1px var(--a); }
.c-place.off { cursor: default; color: var(--f); }
.c-place input { margin-top: 3px; accent-color: var(--a); }
.c-place .ok { color: var(--ok); }
.c-place .warn { color: #A15C07; }
.c-sub { display: block; font-size: 12.5px; }
.c-hint { font-size: 12.5px; margin: -4px 0 12px; }
.c-center { text-align: center; margin: 10px 0 0; }
.c-err { color: var(--bad); font-size: 13.5px; margin: 0 0 10px; }
.c-go { width: 100%; }
.c-go:disabled { opacity: .5; cursor: default; }
.c-done { grid-column: 1 / -1; max-width: 460px; margin: 20px auto; text-align: center; }
.c-done svg { width: 44px; height: 44px; color: var(--ok); }
.c-done-act { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.c-done-act .bt { padding: 0 18px; text-decoration: none; }

/* «Где забрать» — карта 2ГИС по точкам */
.maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.map-card { border: 1px solid var(--l); border-radius: 12px; padding: 12px; }
.map-card .muted { font-size: 13px; margin: 2px 0 8px; }
.map-card iframe { width: 100%; height: 240px; border: 0; border-radius: 9px; background: var(--soft); display: block; }
.map-act { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.map-act .bt { height: 38px; font-size: 14px; text-decoration: none; }
.ft a { color: inherit; }

/* подвал */
.ft { border-top: 1px solid var(--l); color: #9AA0AA; font-size: 13px; margin-top: 20px; }
.ft-in { display: flex; gap: 8px 20px; flex-wrap: wrap; padding: 16px 20px 90px; }
.made { margin-left: auto; color: #9AA0AA; text-decoration: none; }
.made:hover { color: var(--a); }

/* телефон: 2 колонки, фильтры — в кнопке «Фильтры» */
@media (max-width: 760px) {
  .wrap { padding: 0 14px; }
  .hd-in { height: auto; flex-wrap: wrap; padding: 10px 14px; gap: 10px; }
  .sr { order: 3; flex-basis: 100%; max-width: none; }
  .wa span, .cartl span { display: none; }
  .wa { margin-left: auto; }
  .cart { grid-template-columns: 1fr; }
  .maps { grid-template-columns: 1fr; }
  .c-box { padding: 14px; }
  .body { grid-template-columns: 1fr; gap: 12px; }
  .flt-box { border: 1px solid var(--b); border-radius: 10px; }
  .flt-toggle { display: block; width: 100%; text-align: left; padding: 10px 12px; font-weight: 600; }
  .flt-in { display: none; padding: 4px 12px 12px; }
  .flt-box.open .flt-in { display: block; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card { padding: 9px; }
  .chip { min-width: 46px; font-size: 11.5px; }
  .card .bt { height: 36px; font-size: 13px; }
  .pr { font-size: 15.5px; }
  .pp { grid-template-columns: 1fr; gap: 16px; }
  .info h1 { font-size: 21px; }
  .btns { max-width: none; }
  .made { margin-left: 0; }
}