/* Вариант «Цвета логотипа» (на основе «Этикетки»). Светлый верх с компактным знаком «Флагмана»; вместо бирюзы —
   тёмно-синий (#213071) и малиновый (#b41f6c) из логотипа: кнопки, полоса гильоша, значки, счётчик корзины. */

:root {
  --ink: #0b1b38;            /* этикетка: почти чёрный синий */
  --ink-2: #16305a;
  --ice: #a6e6f7;            /* рамки и вензель на тёмном */
  --ice-line: rgba(166, 230, 247, .5);
  --ice-line-2: rgba(166, 230, 247, .22);
  --on-ink: rgba(255, 255, 255, .8);
  --azure: #1688ea;          /* полоса: от лазури… */
  --turq: #12c8d8;           /* …к бирюзе; бирюза — кнопки */
  --turq-hover: #0bb7c8;
  --turq-soft: #dcf6fa;
  --turq-deep: #00758c;      /* бирюзовый текст на белом */
  --sky: #d9f0fc;            /* фон каталога — заметно небесный */
  --text: #0b1b38;
  --muted: #4a5d78;
  --line: #d3e2ee;
  --field: #8fa6bd;
  --err: #c0232b;
  --ok: #0a7a4a;
  --warn: #8a4b00;
  --hdr: 56px;
  --gut: 16px;
  --g-band: none;            /* узоры задаёт app.js (data:image/svg+xml) */
  --g-edge: none;
  --g-edge-v: none;
  --g-dark: none;
  --band-bg: linear-gradient(90deg, var(--azure), var(--band-2));
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --brand: 'Prata', Georgia, 'Times New Roman', serif;
}
@media (min-width: 1024px) {
  :root { --hdr: 72px; --gut: 32px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ink); }
body {
  margin: 0; min-height: 100vh; background: var(--sky); color: var(--text);
  font: 500 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; overflow-wrap: break-word;
}
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }
img.is-broken { visibility: hidden; }
h1, h2, h3, p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 22px; height: 22px; flex: none; }

:focus-visible { outline: 3px solid var(--turq-deep); outline-offset: 2px; }
.top :focus-visible, .hero :focus-visible, .bar :focus-visible, .side :focus-visible, .foot :focus-visible, .receipt__top :focus-visible {
  outline-color: #7fe9f8;
}

/* пустой каркас, пока грузятся данные: тёмная этикетка и полоса */
#app:empty { min-height: 100vh; background: linear-gradient(var(--ink) 236px, transparent 236px) no-repeat, linear-gradient(90deg, var(--azure), var(--band-2)) 0 236px / 100% 112px no-repeat, var(--sky); }
@media (min-width: 1024px) {
  #app:empty { background: linear-gradient(var(--ink) 350px, transparent 350px) no-repeat, linear-gradient(90deg, var(--azure), var(--band-2)) 0 350px / 100% 124px no-repeat, var(--sky); }
}

/* ---------- полоса гильоша ---------- */

.band {
  height: 112px; background-color: var(--azure);
  background-image: var(--g-band), var(--band-bg);
  background-repeat: repeat-x, no-repeat;
  background-position: 50% 50%, 0 0;
  background-size: auto 100%, 100% 100%;
}
.band--hero { position: relative; overflow: hidden; background: var(--band-bg); --tile: 672px; }
.band--hero::before {       /* узор медленно плывёт вбок — только transform */
  content: ''; position: absolute; top: 0; bottom: 0; left: calc(50% - var(--tile) * 1.5); width: calc(100% + var(--tile) * 3);
  background: var(--g-band) repeat-x 0 0 / auto 100%;
  animation: drift 90s linear infinite; will-change: transform;
}
@media (max-width: 380px) { .band--hero { height: 96px; --tile: 576px; } }
@keyframes drift { to { transform: translateX(calc(-1 * var(--tile))); } }
.band--thin {
  height: 12px;
  background-image: var(--g-edge), var(--band-bg);
}

/* ---------- кнопки ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: 12px;
  background: var(--turq); color: var(--ink); text-decoration: none;
  font: 800 16px/1.2 var(--font); letter-spacing: .005em;
  transition: background-color .15s, transform .15s;
}
.btn:hover { background: var(--turq-hover); }
.btn:active { transform: translateY(1px); }
.btn .ico { width: 20px; height: 20px; stroke-width: 2.2; }
.btn--add { width: 100%; min-height: 46px; padding: 0 10px; font-size: 15.5px; }
.btn--wide { width: 100%; }
.btn--big { width: 100%; min-height: 56px; font-size: 17px; border-radius: 14px; }
.btn--line { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--line:hover { background: var(--turq-soft); }
.btn:disabled { cursor: default; }
.btn.is-busy { background: #c9ecf3; color: var(--muted); cursor: progress; }

/* ---------- шапка ---------- */

.top { position: sticky; top: 0; z-index: 30; min-height: var(--hdr); background: var(--ink); color: #fff; }
.top__in {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 1240px; min-height: var(--hdr); margin: 0 auto; padding: 4px var(--gut);
}
.top__brand {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 44px;
  text-decoration: none; line-height: 1; transition: opacity .25s, transform .25s, visibility .25s;
}
.top.is-home .top__brand { opacity: 0; transform: translateY(8px); visibility: hidden; }
.top__name { font: 400 19px/1 var(--brand); letter-spacing: .2em; margin-right: -.2em; text-transform: uppercase; }
.top__sub { margin-top: 5px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; color: var(--ice); }
.top__cart { margin-left: 8px; }
.top__phone-slot { margin-left: auto; display: flex; }

.hcart {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  min-width: 48px; min-height: 44px; padding: 0 12px;
  border-radius: 12px; color: #fff; text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--ice-line);
  font-weight: 700; font-size: 15px; transition: box-shadow .15s, background-color .15s;
}
.hcart:hover { box-shadow: inset 0 0 0 1px var(--ice); background: var(--ink-2); }
.hcart__txt { display: none; }
.hcart__n {
  display: grid; place-items: center; min-width: 22px; min-height: 22px; padding: 1px 6px; line-height: 1.1;
  border-radius: 11px; background: var(--turq); color: var(--ink); font-size: 13px; font-weight: 800;
}
.hcart__sum { display: none; white-space: nowrap; }

/* ---------- первый экран: этикетка ---------- */

.hero { background: var(--ink); color: #fff; padding: 0 var(--gut) 16px; }
.hero__in { max-width: 1240px; margin: 0 auto; }
.hero__label {
  position: relative; padding: 18px 14px 20px; text-align: center;
  border: 1px solid var(--ice-line); border-radius: 16px;
}
.hero__label::after {       /* вторая, внутренняя линия рамки */
  content: ''; position: absolute; inset: 4px; border: 1px solid var(--ice-line-2); border-radius: 12px; pointer-events: none;
}
.orn { display: block; width: 168px; height: auto; margin: 0 auto; color: var(--ice); }
.orn__drop { color: var(--turq); fill: var(--turq); }

.brand { margin: 8px 0 0; font-weight: 400; }
.brand__name {
  display: block; font: 400 clamp(38px, 11.6vw, 48px)/1.05 var(--brand);
  letter-spacing: .15em; margin-right: -.15em; text-transform: uppercase; color: #fff;
}
.brand__sub {
  display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px;
  font: 600 15px/1.2 var(--font); letter-spacing: .1em; color: var(--ice);
}
.brand__sub::before, .brand__sub::after { content: ''; width: 30px; height: 1px; background: currentColor; opacity: .7; }

/* условия доставки — сразу под полосой, на белом */
.facts { background: #fff; padding: 14px 0 16px; }
.facts__in { max-width: 1240px; margin: 0 auto; padding: 0 var(--gut); }   /* края — как у каталога */
.facts__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.facts__list li { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; line-height: 1.3; }
.facts__list .ico {
  width: 36px; height: 36px; padding: 8px; border-radius: 50%;
  background: var(--turq); color: var(--ink); stroke-width: 2;
}
.facts__note { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.4; color: var(--muted); }

/* ---------- каталог ---------- */

.shop { padding: 20px 0 44px; }
.shop__in { max-width: 1240px; margin: 0 auto; padding: 0 var(--gut); }
.sec-title { display: flex; align-items: center; gap: 16px; margin: 0 0 14px; font: 800 26px/1.15 var(--font); letter-spacing: -.01em; }
.sec-title::after {          /* двойная линейка, как на этикетке */
  content: ''; flex: 1; height: 5px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); opacity: .2;
}

.shop__main { container-type: inline-size; min-width: 0; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }

/* карточка — маленькая этикетка: тонкая тёмная рамка и вторая линия внутри */
.card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  padding: 6px; border-radius: 16px; background: #fff;
  border: 1px solid rgba(11, 27, 56, .85);
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px rgba(11, 27, 56, .16);
  transition: border-color .2s, box-shadow .2s;
}
.card.is-in { border-color: var(--turq-deep); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4.5px var(--turq); }
.card__ph {
  position: relative; display: flex; flex-direction: column; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 11px 11px 3px 3px; background: #e5f1fb;
}
.card__img { display: block; flex: 1; min-height: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.card__ph::after {           /* кромка-гильош под фото — как полоса воды на этикетке */
  content: ''; flex: none; height: 11px;
  background-color: var(--azure); background-image: var(--g-edge), var(--band-bg);
  background-repeat: repeat-x, no-repeat; background-size: auto 100%, 100% 100%;
}
.card__body { display: flex; flex-direction: column; flex: 1; padding: 12px 5px 5px; text-align: center; }
.card__name { font: 700 15px/1.3 var(--font); letter-spacing: -.005em; text-wrap: balance; }
.card__short { margin-top: 4px; font-size: 14.5px; line-height: 1.35; color: var(--muted); }
.card__desc {
  margin-top: 6px; font-size: 13.5px; line-height: 1.4; color: var(--muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.card__short--desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
/* Названия товаров задаёт админ-панель: длинное слово («Водоочистительный») переносим, а не выпускаем за рамку.
   Переносы по слогам — только у длинных слов (от 12 букв), обычные названия переносятся как раньше, по пробелам. */
.card__name, .card__short, .line__name, .side__name, .receipt__name {
  overflow-wrap: break-word; -webkit-hyphens: manual; hyphens: manual;
}
.card__foot { margin-top: auto; padding-top: 12px; }
.card__price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: 5px; line-height: 1.15; }
.card__price b { font-size: 23px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.card__price > span { font-size: 14px; font-weight: 600; color: var(--muted); }
.card__min {
  display: inline-block; margin-top: 7px; padding: 2px 10px; border-radius: 999px;
  font-size: 14px; font-weight: 700; color: var(--turq-deep); box-shadow: inset 0 0 0 1px rgba(0, 117, 140, .45);
}
.card__ctl { margin-top: 12px; }

.step {
  display: flex; align-items: center; justify-content: space-between; min-height: 46px;
  border-radius: 12px; background: var(--turq-soft); box-shadow: inset 0 0 0 1.5px var(--turq);
}
.step__b {
  flex: none; display: grid; place-items: center; width: 44px; min-height: 46px; align-self: stretch; padding: 0;
  border: 0; border-radius: 12px; background: transparent; color: var(--ink);
}
.step__b:hover:not(:disabled) { background: rgba(18, 200, 216, .25); }
.step__b:disabled { color: #9fb0c0; cursor: default; }
.step__b .ico { width: 20px; height: 20px; stroke-width: 2.3; }
/* число — поле ввода (нажал и вписал); под ним — единица */
.step__val { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; max-width: 100px; padding: 3px 0; line-height: 1.1; text-align: center; cursor: text; }
.step__in {
  display: block; width: 100%; min-width: 0; height: auto; min-height: 32px; margin: 0; padding: 2px 2px; border: 1.5px solid transparent; border-radius: 8px;
  background: rgba(255, 255, 255, .75); font: 800 18px/1.15 var(--font); color: var(--ink); text-align: center; outline: none;
  -moz-appearance: textfield; appearance: none;
}
.step__in:hover { border-color: rgba(33, 48, 113, .3); }
.step__in:focus { border-color: var(--navy); background: #fff; box-shadow: 0 0 0 3px rgba(180, 31, 108, .16); }
.step__val span { margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--muted); }
.step__val--line { flex-direction: row; flex-wrap: wrap; gap: 0 4px; max-width: none; min-width: 92px; justify-content: center; }
.step__val--line .step__in { width: calc(var(--n, 1) * 1.1ch + 26px); min-width: 54px; max-width: 110px; }
.step__val--line span { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }

.side { display: none; }

@media (max-width: 699px) {
  /* нечётное число товаров: последний — во всю ширину, фото слева */
  .grid > .card:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: 42% minmax(0, 1fr); }
  .grid > .card:last-child:nth-child(odd) .card__ph { flex-direction: row; aspect-ratio: auto; height: 100%; min-height: 210px; border-radius: 11px 3px 3px 11px; }
  .grid > .card:last-child:nth-child(odd) .card__img { min-width: 0; }
  .grid > .card:last-child:nth-child(odd) .card__ph::after {
    width: 11px; height: auto;
    background-image: var(--g-edge-v), linear-gradient(180deg, var(--azure), var(--band-2));
    background-repeat: repeat-y, no-repeat; background-size: 100% auto, 100% 100%;
  }
  .grid > .card:last-child:nth-child(odd) .card__body { padding: 14px 8px 6px 14px; }

  /* счётчик в узкой карточке: число крупно, «бутыли» мелко под ним — не жмётся к кнопкам */
  .card .step__in { font-size: 18px; }
  .card .step__val span { font-size: 13px; }
}


/* ---------- нижняя панель (телефон) ---------- */

.bar {
  position: relative;
  padding: 12px var(--gut) calc(12px + env(safe-area-inset-bottom));
  background: var(--ink); color: #fff; box-shadow: 0 -10px 30px -12px rgba(4, 30, 60, .45);
}
.bar::before {
  content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px;
  background-color: var(--azure); background-image: var(--g-edge), var(--band-bg);
  background-repeat: repeat-x, no-repeat; background-size: auto 100%, 100% 100%;
}
.bar.is-in { animation: bar-in .3s ease-out; }
@keyframes bar-in { from { transform: translateY(100%); } to { transform: none; } }
.bar__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; max-width: 700px; margin: 0 auto; }
.bar__info { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.bar__count { font-size: 14.5px; font-weight: 600; color: var(--ice); overflow-wrap: anywhere; }
.bar__sum { font-size: 21px; font-weight: 800; white-space: nowrap; }
.bar__btn { flex: none; min-height: 50px; padding: 0 18px; }
/* липнет к нижнему краю экрана; когда страница доехала до конца — стоит под подвалом и ничего не закрывает (высота — какая нужна) */
#bar-slot { position: sticky; bottom: 0; z-index: 25; }

/* ---------- подвал ---------- */

.foot { position: relative; background: var(--ink); color: var(--on-ink); padding: 44px var(--gut) 40px; text-align: center; }
.foot::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 12px;
  background-color: var(--azure); background-image: var(--g-edge), var(--band-bg);
  background-repeat: repeat-x, no-repeat; background-size: auto 100%, 100% 100%;
}
.foot__in { max-width: 720px; margin: 0 auto; }
.foot .orn { width: 124px; }
.foot__name { margin-top: 10px; font: 400 26px/1 var(--brand); letter-spacing: .18em; margin-right: -.18em; text-transform: uppercase; color: #fff; }
.foot__sub { margin-top: 8px; font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--ice); }
.foot__tag { max-width: 420px; margin: 20px auto 0; font-size: 15px; line-height: 1.5; color: #fff; }
.foot__note { margin-top: 12px; font-size: 13.5px; line-height: 1.45; color: var(--ice); }

/* ---------- этикетка-панель (оформление, пустая корзина) ---------- */

.tag {
  position: relative; background: #fff; border: 1px solid rgba(11, 27, 56, .85); border-radius: 18px;
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px rgba(11, 27, 56, .14);
}

/* ---------- оформление ---------- */

.page { padding: 8px 0 48px; min-height: 60vh; }
.page__in { max-width: 1240px; margin: 0 auto; padding: 0 var(--gut); }
.back {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-right: 8px;
  font-weight: 700; font-size: 15px; text-decoration: none; color: var(--ink);
}
.back .ico { width: 20px; height: 20px; }
.back:hover span { text-decoration: underline; text-underline-offset: 3px; }
.page__title { margin: 4px 0 18px; font: 800 28px/1.15 var(--font); letter-spacing: -.015em; }

.panel { padding: 20px 16px 22px; }
.panel + .panel { margin-top: 16px; }
.panel__title { margin: 0 0 6px; font: 800 20px/1.2 var(--font); }

.lines { list-style: none; margin: 0; padding: 0; }
.line { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.line__ph { width: 64px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 10px; background: #e6f1fa; }
.line__ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.line__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.line__top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0 8px; }
.line__info { flex: 1 1 9em; min-width: 0; }
.line__name { font-weight: 700; font-size: 15px; line-height: 1.3; }
.line__price { margin-top: 2px; font-size: 14.5px; color: var(--muted); }
.line__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.line__ctl { min-width: 0; }
.line__ctl .step { min-height: 44px; }
.line__sum { margin-left: auto; font-size: 17px; font-weight: 800; white-space: nowrap; text-align: right; }
.line__rm {
  flex: none; min-height: 44px; margin: -12px -8px -8px 0; padding: 0 8px;
  border: 0; background: none; font-size: 14.5px; font-weight: 600; color: var(--muted);
  text-decoration: underline; text-decoration-color: rgba(74, 93, 120, .4); text-underline-offset: 3px;
}
.line__rm:hover { color: var(--err); }

.tare {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px 12px; align-items: center;
  margin-top: 16px; padding: 14px; border-radius: 14px; background: var(--sky);
  box-shadow: inset 0 0 0 1px rgba(0, 117, 140, .3);
}
.tare__ph { width: 44px; aspect-ratio: 3 / 4; overflow: hidden; }
.tare__ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; transform: scale(1.35); }
.tare__txt { font-size: 15px; line-height: 1.4; }
.tare__txt b { display: block; margin-top: 4px; }
.tare .btn { grid-column: 1 / -1; width: 100%; min-height: 46px; padding: 0 12px; font-size: 15px; }
.tare .btn .ico { width: 18px; height: 18px; }

.sum { margin: 14px 0 0; }
.sum > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 12px; padding: 5px 0; }
.sum dd { margin-left: auto; }
.sum dt { color: var(--muted); }
.sum dd { margin: 0; font-weight: 700; text-align: right; }
.sum__free { color: var(--turq-deep); }
.sum .sum__total { margin-top: 8px; padding-top: 12px; border-top: 3px double rgba(11, 27, 56, .5); }
.sum .sum__total dt { color: var(--ink); font-weight: 800; font-size: 18px; }
.sum .sum__total dd { font-size: 24px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }

.order__form .panel__title { margin-bottom: 16px; }
.field { margin: 0 0 18px; }
.field label { display: block; margin-bottom: 7px; font-size: 15px; font-weight: 700; }
.field label small { margin-left: 6px; font-size: 14.5px; font-weight: 500; color: var(--muted); }
.field input, .field textarea {
  display: block; width: 100%; min-height: 52px; padding: 13px 14px;
  font: 500 16px/1.4 var(--font); color: var(--ink); background: #fff;
  border: 1.5px solid var(--field); border-radius: 12px; outline: none;
  transition: border-color .15s, box-shadow .15s;
  scroll-margin-top: calc(var(--hdr) + 12px);
}
.field textarea { min-height: 96px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #5b6784; opacity: 1; }
.field input:hover, .field textarea:hover { border-color: var(--ink); }
.field input:focus, .field textarea:focus { border-color: var(--turq-deep); box-shadow: 0 0 0 4px rgba(18, 200, 216, .3); }
.field [aria-invalid="true"] { border-color: var(--err); background: #fff7f7; }
.field [aria-invalid="true"]:focus { border-color: var(--err); box-shadow: 0 0 0 4px rgba(192, 35, 43, .18); }
.field__hint { margin-top: 6px; font-size: 14.5px; line-height: 1.4; color: var(--muted); }
.field__err, .form-err { display: flex; gap: 6px; margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--err); }
.field__err::before { content: ''; flex: none; width: 8px; height: 8px; margin-top: .45em; border-radius: 50%; background: currentColor; }
.field__err:empty, .form-err:empty { display: none; }
.form-err { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: #fff1f1; }

/* поле адреса с подсказками (разметку создаёт основа) */
.addr {
  --addr-bg: #fff; --addr-fg: var(--ink); --addr-border: var(--ink); --addr-radius: 12px;
  --addr-active: var(--turq-soft); --addr-muted: var(--muted);
  --addr-ok: var(--ok); --addr-warn: var(--warn); --addr-error: var(--err);
}
.addr[data-state="loading"]::after {
  content: ''; position: absolute; right: 14px; top: 16px; width: 18px; height: 18px;
  border: 2px solid #cdeaf3; border-top-color: var(--turq-deep); border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.addr[data-state="loading"] .addr-input { padding-right: 44px; }
.addr-list {
  margin: 6px 0 0; padding: 0; background: #fff; border: 1px solid var(--ink); border-radius: 12px;
  box-shadow: 0 16px 32px -16px rgba(11, 27, 56, .35); overflow: hidden;
}
.addr-option { padding: 10px 14px; }
.addr-option + .addr-option { border-top: 1px solid #e3ecf3; }
.addr-option[aria-selected="true"], .addr-option:hover { background: var(--turq-soft); }
.addr-main { font-weight: 600; }
.addr-option b { font-weight: 800; color: var(--turq-deep); }
.addr-note:empty { display: none; }
.addr-note { display: flex; gap: 7px; align-items: baseline; margin-top: 8px; font-size: 14px; font-weight: 700; }
.addr-note::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; transform: translateY(-1px); }
.addr-note[data-tone="info"] { color: var(--turq-deep); }

/* ---------- пустая корзина ---------- */

.empty { max-width: 520px; margin: 12px auto 24px; padding: 40px 28px 36px; text-align: center; }
.empty .orn { width: 150px; color: var(--ink); }
.empty .orn__drop { fill: var(--turq); }
.empty__title { margin-top: 18px; font: 800 26px/1.2 var(--font); }
.empty__hint { max-width: 300px; margin: 8px auto 22px; color: var(--muted); }

/* ---------- заказ принят ---------- */

.done { padding: 20px var(--gut) 48px; }
.done__in { max-width: 560px; margin: 0 auto; }
.receipt { overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 27, 56, .85); }
.receipt__top { position: relative; padding: 26px 22px 24px; background: var(--ink); color: #fff; text-align: center; }
.receipt__top::after {
  content: ''; position: absolute; inset: 8px; border: 1px solid var(--ice-line); border-radius: 14px; pointer-events: none;
  box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 4px var(--ice-line-2);
}
.receipt__top .orn { width: 150px; }
.done__mark {
  display: grid; place-items: center; width: 52px; height: 52px; margin: 14px auto 12px;
  border-radius: 50%; background: var(--turq); color: var(--ink);
}
.done__mark .ico { width: 28px; height: 28px; stroke-width: 2.6; }
.done__title { font: 800 30px/1.15 var(--font); letter-spacing: -.01em; }
.done__num { margin-top: 6px; font-size: 16px; font-weight: 600; color: var(--ice); }
.band--receipt { height: 56px; }
.receipt__body { padding: 20px 18px 22px; }
.receipt__call {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
  background: var(--sky); font-weight: 700; line-height: 1.35;
}
.receipt__call .ico { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--turq); color: var(--ink); }
.receipt__h { margin: 22px 0 4px; font: 800 18px/1.2 var(--font); }
.receipt__items { list-style: none; margin: 0; padding: 0; }
.receipt__items li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "qty sum";
  gap: 2px 12px; padding: 11px 0; border-bottom: 1px solid var(--line);
}
.receipt__name { grid-area: name; font-weight: 600; line-height: 1.35; }
.receipt__qty { grid-area: qty; color: var(--muted); font-size: 15px; }
.receipt__sum { grid-area: sum; font-weight: 800; white-space: nowrap; }
.sum--receipt { margin-top: 6px; }
.receipt__info { margin: 22px 0; padding: 16px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.receipt__info > div + div { margin-top: 12px; }
.receipt__info dt { font-size: 14.5px; color: var(--muted); }
.receipt__info dd { margin: 2px 0 0; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.receipt__note { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--turq-deep); }

.fail { max-width: 480px; margin: 40px auto; padding: 0 var(--gut); text-align: center; color: #fff; }
.fail p { margin-bottom: 16px; }

/* ---------- узкий телефон (360) ---------- */

@media (max-width: 380px) {
  .panel { padding: 18px 14px 20px; }
  .line { column-gap: 10px; }
  .tare { padding: 12px; }
  .tare .btn { font-size: 14.5px; }
  .tare .btn .ico { display: none; }
}

/* ---------- планшет ---------- */

@media (min-width: 700px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .hcart__txt { display: inline; }
  .facts__list { grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px 28px; }
  .panel { padding: 26px 26px 28px; }
  .line { grid-template-columns: 72px minmax(0, 1fr); }
  .line__ph { width: 72px; }
  .line__body { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "info ctl sum" "rm rm rm"; align-items: center; gap: 0 16px; }
  .line__top, .line__row { display: contents; }
  .line__info { grid-area: info; }
  .line__ctl { grid-area: ctl; }
  .line__sum { grid-area: sum; min-width: 84px; margin-left: 0; }
  .line__rm { grid-area: rm; justify-self: start; margin: -6px 0 0 -8px; }
  .tare { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .tare .btn { grid-column: auto; width: auto; }

  /* три колонки, в последнем ряду две карточки: последняя занимает две колонки и ложится набок.
     Фото — ровно той же ширины, что у соседней карточки (половина минус зазор и рамка). */
  .grid > .card:last-child:nth-child(3n+2) {
    --wide-ph: calc(50% - 16px);
    grid-column: span 2; display: grid; grid-template-columns: var(--wide-ph) minmax(0, 1fr);
  }
  .grid > .card:last-child:nth-child(3n+2) .card__ph {
    flex-direction: row; aspect-ratio: auto; height: 100%; border-radius: 11px 3px 3px 11px;
  }
  .grid > .card:last-child:nth-child(3n+2) .card__img { min-width: 0; }
  .grid > .card:last-child:nth-child(3n+2) .card__ph::after {
    width: 12px; height: auto;
    background-image: var(--g-edge-v), linear-gradient(180deg, var(--azure), var(--band-2));
    background-repeat: repeat-y, no-repeat; background-size: 100% auto, 100% 100%;
  }
  .grid > .card:last-child:nth-child(3n+2) .card__body { justify-content: center; padding: 24px 28px; }
  .grid > .card:last-child:nth-child(3n+2) .card__name { font-size: 19px; }
  .grid > .card:last-child:nth-child(3n+2) .card__short { font-size: 15px; }
  .grid > .card:last-child:nth-child(3n+2) .card__price b { font-size: 30px; }
  .grid > .card:last-child:nth-child(3n+2) .card__foot { margin-top: 0; padding-top: 18px; }
  .grid > .card:last-child:nth-child(3n+2) .card__ctl { max-width: 280px; margin-left: auto; margin-right: auto; }
}

/* ---------- компьютер ---------- */

@media (min-width: 1024px) {
  .top__name { font-size: 22px; }
  .top__sub { font-size: 12px; }
  .hcart { padding: 0 16px; gap: 10px; }
  .hcart__sum { display: inline; font-weight: 800; }

  .hero {
    padding: 0 var(--gut) 26px;
    background-image: var(--g-dark); background-repeat: repeat-x; background-position: 50% calc(50% - 15px); background-size: auto 250px;
  }
  .hero__label { padding: 28px 40px 32px; background: var(--ink); max-width: 860px; margin: 0 auto; }
  .hero__label::after { inset: 5px; }
  .orn { width: 230px; }
  .brand { margin-top: 10px; }
  .brand__name { font-size: 84px; letter-spacing: .17em; margin-right: -.17em; }
  .brand__sub { margin-top: 16px; font-size: 19px; gap: 18px; }
  .brand__sub::before, .brand__sub::after { width: 56px; }

  .band--hero { height: 124px; --tile: 744px; }
  .facts { padding: 18px 0; }
  .facts__list { gap: 12px 36px; }

  .shop { padding: 30px 0 72px; }
  .shop__in { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 36px; align-items: start; }
  .sec-title { font-size: 32px; margin-bottom: 22px; }
  .grid { gap: 22px 20px; }
  .grid > .card:last-child:nth-child(3n+2) { --wide-ph: calc(50% - 18px); }
  .card { padding: 7px; }
  .card__body { padding: 16px 8px 8px; }
  .card__name { font-size: 16.5px; }
  .card__short { font-size: 14px; }
  .card__price b { font-size: 26px; }
  .card__price > span { font-size: 14px; }

  .side { display: block; position: sticky; top: calc(var(--hdr) + 24px); margin-top: 59px; }
  .side__box {
    position: relative; padding: 26px 24px 24px; border-radius: 20px; background: var(--ink); color: #fff; overflow: hidden;
  }
  .side__box::before {
    content: ''; position: absolute; inset: 6px; border: 1px solid var(--ice-line); border-radius: 15px; pointer-events: none;
  }
  .side__box.is-empty {          /* пустая — светлая этикетка, как карточки */
    padding: 24px; background: #fff; color: var(--ink);
    border: 1px solid rgba(11, 27, 56, .85); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px rgba(11, 27, 56, .16);
  }
  .side__box.is-empty::before { content: none; }
  .side__box.is-empty > .ico {
    width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--turq-soft); color: var(--turq-deep); stroke-width: 1.9;
  }
  .side__box.is-empty .side__empty { margin-top: 14px; font-size: 20px; font-weight: 800; line-height: 1.25; }
  .side__box.is-empty .side__hint { color: var(--muted); }
  .side__title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font: 800 22px/1.2 var(--font); }
  .side__title span { font-size: 14px; font-weight: 600; color: var(--ice); }
  .side__empty { margin-top: 18px; font-weight: 700; font-size: 17px; }
  .side__hint { margin-top: 6px; color: var(--on-ink); font-size: 14.5px; line-height: 1.45; }
  .side__lines { list-style: none; margin: 16px 0 0; padding: 0; }
  .side__lines li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 11px 0; border-top: 1px solid var(--ice-line-2); }
  .side__name { grid-column: 1 / -1; font-size: 14.5px; font-weight: 600; line-height: 1.35; }
  .side__qty { font-size: 14px; color: var(--ice); }
  .side__sum { font-weight: 800; white-space: nowrap; }
  .side__row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0 0; border-top: 1px solid var(--ice-line-2); font-size: 15px; color: var(--on-ink); }
  .side__free { color: #5fe1f2; font-weight: 700; }
  .side__row--total { margin-top: 10px; padding-top: 12px; border-top: 3px double var(--ice-line); color: #fff; font-weight: 800; font-size: 17px; align-items: baseline; }
  .side__row--total b { font-size: 26px; white-space: nowrap; }
  .side .btn { position: relative; z-index: 1; margin-top: 18px; min-height: 52px; }

  .bar, #bar-slot { display: none; }

  .foot { padding: 60px var(--gut) 52px; }

  .band--thin { height: 14px; }
  .page { padding: 20px 0 72px; }
  .page__title { font-size: 36px; margin: 8px 0 26px; }
  .order { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 28px; align-items: start; }
  .panel + .panel { margin-top: 0; }
  .panel { padding: 30px 32px 32px; }
  .panel__title { font-size: 22px; }

  .done { padding: 48px var(--gut) 72px; }
  .done__in { max-width: 640px; }
  .receipt__top { padding: 36px 40px 30px; }
  .done__title { font-size: 36px; }
  .band--receipt { height: 72px; }
  .receipt__body { padding: 28px 40px 36px; }
  .receipt__items li { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name qty sum"; gap: 16px; align-items: baseline; }
  .receipt__sum { min-width: 84px; text-align: right; }
  .receipt__info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 24px; }
  .receipt__info > div + div { margin-top: 0; }
  .receipt__info > .is-wide { grid-column: 1 / -1; }
}

/* ---------- широкий экран: факты о доставке в одну строку ---------- */

@media (min-width: 1280px) {
  .facts { padding: 20px 0; }
  /* пункты — в ряд (если не помещаются — переносятся), примечание про Московскую область — отдельной строкой под ними, как на телефоне:
     в одном ряду с четырьмя пунктами оно не помещалось и обрезалось по краю экрана */
  .facts__list { display: flex; flex-wrap: wrap; gap: 12px 36px; }
  .facts__list li { font-size: 17px; white-space: nowrap; }
  .facts__note { margin-top: 12px; padding-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* способ оплаты: физ. / юр. лицо (селекторы с .pay — сильнее общих правил .field label / .field input) */
.pay { border: 0; padding: 0; min-width: 0; }
.pay legend { padding: 0; margin-bottom: 7px; font-size: 15px; font-weight: 700; }
.pay .pay__opts { display: grid; gap: 8px; }
.pay .pay__opt {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; margin: 0; padding: 10px 14px;
  border: 1.5px solid var(--field); border-radius: 12px; background: #fff; cursor: pointer;
  font-size: 15px; font-weight: 600; line-height: 1.25; transition: border-color .15s, background-color .15s;
}
.pay .pay__opt:hover { border-color: var(--ink); }
.pay .pay__opt input {
  flex: none; appearance: none; -webkit-appearance: none; display: block;
  width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0;
  border: 1.5px solid var(--field); border-radius: 50%; background: #fff; box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
.pay .pay__opt input:checked { border-color: var(--turq-deep); box-shadow: inset 0 0 0 5px var(--turq-deep); }
.pay .pay__opt:has(input:checked) { border-color: var(--turq-deep); background: var(--turq-soft); }
.pay .pay__opt input:focus-visible { outline: 3px solid var(--turq-deep); outline-offset: 2px; }

/* ================= вариант «Цвета логотипа»: логотип «Флагмана» ================= */

/* цвета логотипа вместо бирюзы: тёмно-синий — кнопки и тёмные панели, малиновый — мелкие акценты */
:root {
  --navy: #213071;
  --navy-hover: #182559;
  --magenta: #b41f6c;
  --magenta-hover: #9a1a5c;
  --ink: #1a2560;            /* подвал, корзина, чек — тёмно-синий логотипа, чуть глубже */
  --ink-2: #26347a;
  --ice: #cdd2f2;            /* светлое на тёмном */
  --ice-line: rgba(205, 210, 242, .45);
  --ice-line-2: rgba(205, 210, 242, .2);
  --azure: #213071;          /* полоса: от тёмно-синего… */
  --band-2: #b41f6c;         /* …к малиновому */
  --turq: #213071;           /* кнопки */
  --turq-hover: #182559;
  --turq-soft: #eef0f9;
  --turq-deep: #b41f6c;      /* цветной текст и выбранное — малиновый */
  --sky: #eff1f8;
  --text: #141b45;
  --muted: #545a78;
  --line: #dfe2ef;
  --field: #a3a8c3;
}
html { background: #fff; }
#app:empty { background: #fff; }
:focus-visible { outline-color: var(--magenta); }
.top :focus-visible, .hero :focus-visible { outline-color: var(--magenta); }
.bar :focus-visible, .side :focus-visible, .foot :focus-visible, .receipt__top :focus-visible { outline-color: #ff9fcb; }

/* кнопки: тёмно-синие с белым текстом; на тёмном — малиновые */
.btn { color: #fff; }
.btn:hover { background: var(--navy-hover); }
.btn.is-busy { background: #d9dcee; color: var(--muted); }
.btn--line { color: var(--ink); background: #fff; }
.btn--line:hover { background: var(--turq-soft); }
.bar .btn, .side .btn { background: var(--magenta); }
.bar .btn:hover, .side .btn:hover { background: var(--magenta-hover); }
.step__b:hover:not(:disabled) { background: rgba(33, 48, 113, .1); }
.card__min { box-shadow: inset 0 0 0 1px rgba(180, 31, 108, .4); }
.tare { box-shadow: inset 0 0 0 1px rgba(33, 48, 113, .22); }
.field input:focus, .field textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 4px rgba(180, 31, 108, .16); }
.pay .pay__opt input:checked { border-color: var(--navy); box-shadow: inset 0 0 0 5px var(--navy); }
.pay .pay__opt:has(input:checked) { border-color: var(--navy); }
.addr[data-state="loading"]::after { border-color: #dfe2f2; border-top-color: var(--magenta); }
.side__free { color: #ff9fcb; }

/* шапка — светлая */
.top { background: #fff; color: var(--ink); box-shadow: 0 1px 0 var(--line); }
.top.is-home { box-shadow: none; }
.hcart { color: var(--ink); box-shadow: inset 0 0 0 1px #cfd3e6; }
.hcart:hover { background: var(--turq-soft); box-shadow: inset 0 0 0 1px var(--navy); }
.hcart__n { background: var(--magenta); color: #fff; }
.top__brand { flex-direction: row; align-items: center; gap: 10px; }
.top__logo { display: block; width: auto; height: 21px; }
.top__sub { margin: 0; padding: 3px 0 3px 10px; border-left: 1px solid #d3d6e8; font-size: 12.5px; font-weight: 700; letter-spacing: .03em; color: var(--muted); }

/* первый экран — светлая этикетка в тонкой рамке, компактно */
.hero { background: #fff; color: var(--ink); padding: 2px var(--gut) 16px; }
.hero__label { padding: 20px 14px 18px; border-color: #d6d9ec; }
.hero__label::after { border-color: #eceef7; }
.brand { margin: 0; }
.hero__logo { display: block; width: 204px; height: auto; margin: 0 auto; }
.brand__sub { margin-top: 14px; font-size: 15px; letter-spacing: .12em; color: var(--navy); }
.brand__sub::before, .brand__sub::after { width: 28px; opacity: .3; }

/* условия доставки: значки в переходе цвета логотипа */
.facts__list .ico { background: linear-gradient(135deg, var(--navy), var(--magenta)); color: #fff; }

/* чек «Заказ принят» и пустая корзина */
.orn__drop, .empty .orn__drop { fill: var(--magenta); }
.receipt__top .orn__drop { fill: #ff8cc0; }
.done__mark { background: var(--magenta); color: #fff; }
.receipt__call .ico { background: linear-gradient(135deg, var(--navy), var(--magenta)); color: #fff; }
.side__box.is-empty > .ico { color: var(--navy); }

.foot__logo { display: block; width: 184px; height: auto; margin: 0 auto; }
.foot__sub { margin-top: 14px; }

@media (min-width: 1024px) {
  .top__logo { height: 26px; }
  .top__sub { font-size: 13px; padding-left: 12px; }
  .top__brand { gap: 12px; }
  .hero { padding: 6px var(--gut) 26px; background-image: var(--g-light); }
  .hero__label { max-width: 760px; padding: 34px 40px 32px; background: #fff; }
  .hero__logo { width: 320px; }
  .brand__sub { margin-top: 20px; font-size: 18px; }
  .brand__sub::before, .brand__sub::after { width: 52px; }
  .foot__logo { width: 230px; }
}

/* знак из трёх полосок логотипа (пустая корзина, «Заказ принят») */
.mark { display: block; width: 26px; height: auto; margin: 0 auto 10px; }
.empty .mark { width: 30px; }
.receipt__top .mark { position: relative; }
.receipt__top .mark g { fill: #fff; }

/* ================= настоящий сайт: сообщения о сбое ================= */

/* не загрузились тексты сайта (совсем нет связи) — логотип, сообщение и «Обновить» на белом */
.fail { max-width: 420px; margin: 0 auto; padding: 72px var(--gut) 40px; text-align: center; color: var(--text); }
.fail__logo { display: block; width: 180px; height: auto; margin: 0 auto 28px; }
.fail p { margin-bottom: 20px; font-size: 17px; font-weight: 600; }
body:has(> #app > .fail) { background: #fff; }
.nojs { max-width: 420px; margin: 40px auto; padding: 0 var(--gut); text-align: center; font-weight: 600; }

/* не загрузились товары / товаров нет — вместо сетки: та же этикетка, что у пустой корзины */
.notice { margin: 0 auto 8px; background: #fff; }
.notice .empty__hint { margin-bottom: 22px; }
.notice:not(:has(.btn)) .empty__title { margin-bottom: 4px; }
@media (min-width: 1024px) {
  .shop--notice .shop__in { grid-template-columns: minmax(0, 1fr); }
  .notice { margin-top: 8px; }
}

/* телефон: цифры одинаковой ширины — подсказка и набранный номер совпадают по ширине */
#phone { font-variant-numeric: tabular-nums; }

/* ---------- узкий экран (до 380 px): по одной карточке в ряд, фото слева, текст справа ---------- */
@media (max-width: 379px) {
  .grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .grid > .card { display: grid; grid-template-columns: 40% minmax(0, 1fr); }
  .grid > .card .card__ph { flex-direction: row; aspect-ratio: auto; height: 100%; min-height: 196px; border-radius: 11px 3px 3px 11px; }
  .grid > .card .card__img { min-width: 0; }
  .grid > .card .card__ph::after {
    width: 11px; height: auto;
    background-image: var(--g-edge-v), linear-gradient(180deg, var(--azure), var(--band-2));
    background-repeat: repeat-y, no-repeat; background-size: 100% auto, 100% 100%;
  }
  .grid > .card .card__body { padding: 12px 6px 6px 12px; }
}

/* ================= контакты магазина, продавец и политика (данные — из админ-панели, «Настройки») ================= */

.nw { white-space: nowrap; }

/* телефон в шапке — только на компьютере и только если вписан */
.top__phone {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 48px; min-height: 44px; padding: 0 12px;
  border-radius: 12px; box-shadow: inset 0 0 0 1px #cfd3e6; color: var(--ink); text-decoration: none;
  font-weight: 700; font-size: 15.5px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.top__phone .ico { width: 22px; height: 22px; color: var(--magenta); }
.top__phone span { display: none; }                  /* на телефоне — значок «позвонить», номер виден в подвале и по нажатию */
.top__phone:hover { background: var(--turq-soft); }
@media (min-width: 1024px) {
  .top__phone { padding: 0 6px; box-shadow: none; }
  .top__phone .ico { width: 20px; height: 20px; }
  .top__phone span { display: inline; }
  .top__phone:hover { background: none; }
  .top__phone:hover span { text-decoration: underline; text-underline-offset: 3px; }
}

/* подвал: телефон и почта, ниже — продавец и политика */
.foot__contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; margin-top: 24px; }
.foot__c {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; max-width: 100%;
  border-radius: 12px; box-shadow: inset 0 0 0 1px var(--ice-line); color: #fff;
  font-weight: 700; font-size: 16px; text-decoration: none; transition: background-color .15s, box-shadow .15s;
}
.foot__c span { min-width: 0; overflow-wrap: anywhere; }
.foot__c .ico { flex: none; width: 20px; height: 20px; color: #ff9fcb; }
.foot__c:hover { background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--ice); }
.foot__legal { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--ice-line-2); font-size: 14.5px; line-height: 1.5; color: var(--ice); }
.foot__legal p + p { margin-top: 6px; }
.foot__legal a { color: #fff; text-decoration: underline; text-decoration-color: var(--ice-line); text-underline-offset: 3px; }
.foot__legal a:hover { text-decoration-color: #fff; }

/* строка под кнопкой «Отправить заказ» */
.pd { margin-top: 12px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.pd a, .foot__legal a { display: inline-block; padding: 12px 2px; margin: -12px -2px; }
.pd a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(26, 37, 96, .35); text-underline-offset: 3px; }
.pd a:hover { text-decoration-color: currentColor; }

/* «Заказ принят»: вопросы по заказу */
.receipt__ask { margin: 18px 0 20px; font-size: 15px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.receipt__ask .cbtns { margin-top: 12px; }

/* страница политики: светлая этикетка, удобная ширина строки */
.page--doc .page__in { max-width: 820px; }
.doc { padding: 22px 18px 26px; font-size: 15.5px; line-height: 1.6; color: var(--text); overflow-wrap: break-word; }
.doc__title { margin: 0 0 14px; font: 800 26px/1.2 var(--font); letter-spacing: -.01em; }
.doc h2 { margin: 26px 0 8px; font: 800 18.5px/1.3 var(--font); }
.doc p { margin: 0 0 10px; }
.doc ul { margin: 0 0 10px; padding-left: 20px; }
.doc li { margin: 0 0 6px; }
.doc li::marker { color: var(--magenta); }
.doc a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(26, 37, 96, .35); text-underline-offset: 3px; overflow-wrap: anywhere; }
.doc__ed { margin-top: 22px !important; font-size: 14px; color: var(--muted); }
.doc__err { margin-bottom: 16px; font-weight: 700; }
@media (min-width: 1024px) {
  .doc { padding: 36px 44px 40px; font-size: 16px; }
  .doc__title { font-size: 32px; margin-bottom: 18px; }
  .doc h2 { font-size: 20px; margin-top: 30px; }
}


/* ================= улучшения по итогам проверки ================= */

/* пока грузятся тексты и товары — шапка и «Загружаем товары…» вместо белого экрана (разметка лежит в index.html) */
.boot__bar { display: flex; align-items: center; min-height: 56px; padding: 4px var(--gut); box-shadow: 0 1px 0 var(--line); }
.boot__bar img { display: block; width: auto; height: 21px; }
.boot__txt { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 64px var(--gut); font-size: 17px; font-weight: 600; color: var(--muted); }
.boot__spin { width: 22px; height: 22px; border: 3px solid #dfe2f2; border-top-color: var(--magenta); border-radius: 50%; animation: spin .8s linear infinite; }

/* телефон: первый экран короче — товары видны почти сразу */
@media (max-width: 699px) {
  .hero { padding: 0 var(--gut) 8px; }
  .hero__label { padding: 10px 14px 10px; }
  .hero__logo { width: 132px; }
  .brand__sub { margin-top: 6px; font-size: 14px; }
  .band--hero { height: 48px; --tile: 288px; }
  .facts { padding: 8px 0 8px; }
  .facts__list { gap: 2px; }
  .facts__list li { font-size: 15px; gap: 10px; }
  .facts__list .ico { width: 28px; height: 28px; padding: 6px; }
  .facts__note { margin-top: 4px; padding-top: 4px; font-size: 14.5px; }
  .shop { padding: 10px 0 32px; }
  .sec-title { margin-bottom: 8px; font-size: 24px; }
  .card__ph { aspect-ratio: 5 / 6; }
}
.facts__list li span { min-width: 0; overflow-wrap: anywhere; }

/* заметки */
.note { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--sky); font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.note--warn { background: #fff4dc; color: var(--warn); }

/* «Заказать снова» */
.again { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin: 0 0 16px; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--navy); }
.again__txt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 13em; min-width: 0; font-size: 14.5px; color: var(--muted); }
.again__txt b { font-size: 16px; color: var(--ink); overflow-wrap: anywhere; }
.again__btn { flex: 1 1 auto; }

/* «Сейчас заказы не принимаются» */
.closed { margin: 0 0 16px; padding: 18px 16px; border-radius: 16px; background: #fff; border: 1.5px solid var(--magenta); }
.closed__t { font: 800 20px/1.25 var(--font); }
.closed__p { margin-top: 8px; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.closed-page { border: 1.5px solid var(--magenta); }
.closed-page .btn { margin-top: 14px; }

/* часы работы и кнопки связи */
.hours { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.hours .ico { width: 18px; height: 18px; margin-top: 2px; color: var(--magenta); }
.empty .hours, .closed-page .hours { justify-content: center; text-align: left; }
.cbtns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.cbtn { flex: 1 1 13em; min-height: 48px; max-width: 100%; text-align: center; overflow-wrap: anywhere; }
.empty .cbtns { justify-content: center; }
.receipt__call + #hours-slot .hours { margin: 10px 4px 0; }

/* залоговая тара: свёрнута для того, кто уже заказывал */
.tare--fold { display: block; padding: 0; }
.tare--fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 8px 14px; list-style: none; cursor: pointer; font-weight: 700; font-size: 15px; }
.tare--fold > summary::-webkit-details-marker { display: none; }
.tare--fold > summary::after { content: '+'; font-size: 24px; line-height: 1; color: var(--navy); }
.tare--fold[open] > summary::after { content: '−'; }
.tare__in { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px 12px; align-items: center; padding: 0 14px 14px; }
.tare__in .btn { grid-column: 1 / -1; width: 100%; min-height: 46px; padding: 0 12px; font-size: 15px; }
.tare__in .btn .ico { width: 18px; height: 18px; }
@media (min-width: 700px) {
  .tare__in { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .tare__in .btn { grid-column: auto; width: auto; }
}

/* поле адреса: «×» */
.addr-clear { position: absolute; right: 2px; top: 4px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--muted); }
.addr-clear[hidden] { display: none; }
.addr-clear .ico { width: 18px; height: 18px; }
.addr-clear:hover { color: var(--err); }
.addr:has(.addr-clear:not([hidden])) .addr-input { padding-right: 48px; }
.addr[data-state="loading"]:has(.addr-clear:not([hidden]))::after { right: 50px; }

/* сервер не принял состав — блок «Ваш заказ» на секунду подсвечивается */
.order__cart.is-flash { animation: flash 2.4s ease-out; }
@keyframes flash { 0%, 55% { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px rgba(11, 27, 56, .14), 0 0 0 4px rgba(180, 31, 108, .4); } 100% { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px rgba(11, 27, 56, .14), 0 0 0 4px rgba(180, 31, 108, 0); } }

/* крупный шрифт на телефоне: если две карточки в ряд уже не помещаются, они идут по одной, фото слева, текст справа */
@container (max-width: 21em) {
  .grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .grid > .card { display: grid; grid-template-columns: 40% minmax(0, 1fr); }
  .grid > .card .card__ph { flex-direction: row; aspect-ratio: auto; height: 100%; min-height: 196px; border-radius: 11px 3px 3px 11px; }
  .grid > .card .card__img { min-width: 0; }
  .grid > .card .card__ph::after {
    width: 11px; height: auto;
    background-image: var(--g-edge-v), linear-gradient(180deg, var(--azure), var(--band-2));
    background-repeat: repeat-y, no-repeat; background-size: 100% auto, 100% 100%;
  }
  .grid > .card .card__body { padding: 12px 6px 6px 12px; }
}
/* очень крупный шрифт: одна колонка и обычная карточка — фото сверху, текст на всю ширину (сбоку слова уже рвутся) */
@container (max-width: 14em) {
  .grid > .card, .grid > .card:last-child:nth-child(odd) { display: flex; flex-direction: column; }
  .grid > .card .card__ph, .grid > .card:last-child:nth-child(odd) .card__ph {
    flex-direction: column; aspect-ratio: 5 / 6; height: auto; min-height: 0; border-radius: 11px 11px 3px 3px;
  }
  .grid > .card .card__ph::after, .grid > .card:last-child:nth-child(odd) .card__ph::after {
    width: auto; height: 11px; background-image: var(--g-edge), var(--band-bg);
    background-repeat: repeat-x, no-repeat; background-size: auto 100%, 100% 100%;
  }
  .grid > .card .card__body, .grid > .card:last-child:nth-child(odd) .card__body { padding: 12px 5px 5px; }
}

/* приложение для Android: полоска над каталогом (только на телефонах с Android, «×» прячет её на этом устройстве) и страница /app */
.apk { display: flex; align-items: stretch; margin: 0 0 16px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); overflow: hidden; }
.apk__link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 6px 10px 12px; color: var(--ink); text-decoration: none; }
.apk__ico { flex: none; width: 44px; height: 44px; border-radius: 10px; box-shadow: 0 0 0 1px var(--line); }
.apk__txt { flex: 1; min-width: 0; display: grid; gap: 1px; font-size: 14px; line-height: 1.3; color: var(--muted); }
.apk__txt b { font-size: 16px; font-weight: 800; color: var(--ink); }
.apk__link > .ico { color: var(--magenta); }
.apk__x { flex: none; width: 48px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); }
.apk__x .ico { width: 20px; height: 20px; }
.apk__x:hover { background: var(--turq-soft); }
.app-page .app-get { max-width: 420px; margin: 4px 0 8px; }
.app-page .app-get + section, .app-page .app-qr + p { margin-top: 0; }
.app-steps { display: grid; gap: 8px; margin: 0 0 10px; padding-left: 22px; list-style: decimal; }
.app-steps li { margin: 0; padding-left: 4px; }
.app-steps li::marker { color: var(--magenta); font-weight: 800; }
.app-qr { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin: 6px 0 16px; }
.app-qr__img { flex: none; width: 176px; height: 176px; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.app-qr__img svg { display: block; width: 100%; height: 100%; }
.app-qr__txt { flex: 1 1 220px; min-width: 0; }
.app-qr__txt p { margin: 0 0 6px; }
.app-qr__url { font-weight: 800; color: var(--ink); overflow-wrap: anywhere; }
.doc a.btn { color: #fff; font-weight: 800; text-decoration: none; }
.doc a.btn--line { color: var(--ink); }