/* ==========================================================================
   Чудо мельница — каталог пекарни
   Оформление: светлая база, тёмная тема по настройкам системы или тумблеру.
   Единственный «винтажный» элемент — сам логотип; интерфейс вокруг него
   намеренно нейтральный, чтобы знак читался как знак, а не как стилизация.
   ========================================================================== */

/* --- токены: светлая тема ------------------------------------------------- */
:root{
  --bg:         #FAFAF8;
  --surface:    #FFFFFF;
  --surface-2:  #F3F2EE;
  --ink:        #16140F;
  --ink-2:      #45413A;
  --muted:      #746F66;
  --line:       rgba(22,20,15,.10);
  --line-soft:  rgba(22,20,15,.06);

  --accent:     #A96C12;          /* охра логотипа, поднятая до рабочего контраста */
  --accent-ink: #FFFFFF;
  --accent-bg:  rgba(169,108,18,.10);
  --ok:         #1B8F4E;

  --shadow-1: 0 1px 2px rgba(22,20,15,.05), 0 4px 14px -8px rgba(22,20,15,.18);
  --shadow-2: 0 2px 6px rgba(22,20,15,.06), 0 18px 40px -22px rgba(22,20,15,.35);

  --logo-light: block;    /* какую версию знака показывать */
  --logo-dark: none;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  --sans: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --shell: 1180px;
  --gut: clamp(16px, 3.6vw, 44px);
  --head-h: 68px;
}

/* --- тёмная тема: системная (если пользователь не выбрал светлую) ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:         #121110;
    --surface:    #1A1917;
    --surface-2:  #232120;
    --ink:        #F6F4F0;
    --ink-2:      #CFC9BF;
    --muted:      #9E988E;
    --line:       rgba(246,244,240,.12);
    --line-soft:  rgba(246,244,240,.07);

    --accent:     #E0A54D;
    --accent-ink: #201705;
    --accent-bg:  rgba(224,165,77,.14);
    --ok:         #4FCF8B;

    --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px -8px rgba(0,0,0,.6);
    --shadow-2: 0 2px 6px rgba(0,0,0,.45), 0 18px 40px -22px rgba(0,0,0,.8);

    /* знак нарисован тёмно-коричневым: на тёмном фоне показываем версию
       с инвертированной светлотой — форма та же, надпись читается */
    --logo-light: none;
    --logo-dark: block;
  }
}

/* --- тёмная тема: выбрана тумблером --------------------------------------- */
:root[data-theme="dark"]{
  --bg:         #121110;
  --surface:    #1A1917;
  --surface-2:  #232120;
  --ink:        #F6F4F0;
  --ink-2:      #CFC9BF;
  --muted:      #9E988E;
  --line:       rgba(246,244,240,.12);
  --line-soft:  rgba(246,244,240,.07);

  --accent:     #E0A54D;
  --accent-ink: #201705;
  --accent-bg:  rgba(224,165,77,.14);
  --ok:         #4FCF8B;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px -8px rgba(0,0,0,.6);
  --shadow-2: 0 2px 6px rgba(0,0,0,.45), 0 18px 40px -22px rgba(0,0,0,.8);

  --logo-light: none;
  --logo-dark: block;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--bg) }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  -webkit-tap-highlight-color:transparent;
  background:var(--bg);
  color:var(--ink);
  font:400 16px/1.55 var(--sans);
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background-color .3s, color .3s;
}

img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
input{ font:inherit; color:inherit }
h1,h2,h3,h4{ margin:0; font-weight:700; line-height:1.04; letter-spacing:-.035em }
p{ margin:0 }
figure{ margin:0 }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px }
svg:not([viewBox]):not([width]){ width:18px; height:18px }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut) }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

.label{
  font-size:11.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted);
}

/* --- кнопки --------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 22px; border-radius:var(--r-pill);
  font-size:14.5px; font-weight:600; letter-spacing:-.01em; line-height:1;
  white-space:nowrap; cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), background-color .18s, border-color .18s, box-shadow .18s;
}
.btn:active{ transform:scale(.98) }
.btn svg{ width:17px; height:17px; flex:none; display:block }

.btn--primary{ background:var(--ink); color:var(--bg) }
.btn--primary:hover{ box-shadow:var(--shadow-2); transform:translateY(-1px) }

.btn--soft{ background:var(--surface); color:var(--ink); border:1px solid var(--line) }
.btn--soft:hover{ border-color:var(--ink); transform:translateY(-1px) }

.btn--accent{ background:var(--accent); color:var(--accent-ink) }
.btn--accent:hover{ transform:translateY(-1px); box-shadow:var(--shadow-2) }

/* ==========================================================================
   Шапка
   ========================================================================== */
.topbar{
  position:sticky; top:0; z-index:70;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(1.6) blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .25s, background-color .3s;
}
.topbar.is-stuck{ border-bottom-color:var(--line-soft) }
.topbar__inner{ display:flex; align-items:center; gap:14px; height:var(--head-h) }

/* знак показываем целиком: он квадратный, поэтому задаём высоту,
   а ширину отдаём картинке — никаких масок и обрезки */
.topbar__logo{ display:inline-flex; align-items:center; gap:10px; flex:none }
.topbar__name{ display:grid; line-height:1.05; font-weight:700; font-size:16px; letter-spacing:-.03em }
.topbar__name i{
  font-style:normal; font-size:10.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.topbar__logo .logo{ height:52px; width:auto }
.topbar__logo .logo--light{ display:var(--logo-light) }
.topbar__logo .logo--dark{ display:var(--logo-dark) }

.topbar__spacer{ margin-inline:auto }
.topbar__meta{ display:flex; align-items:center; gap:8px }

.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line);
  font-size:13.5px; font-weight:500; color:var(--ink-2);
  white-space:nowrap;
}
.pill--link{ transition:border-color .2s, color .2s }
.pill--link:hover{ border-color:var(--ink); color:var(--ink) }
.pill svg{ width:15px; height:15px; color:var(--muted) }

.status i{
  width:7px; height:7px; border-radius:50%; background:var(--ok);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent);
  flex:none;
}
.status.is-closed i{ background:#C4542C; box-shadow:0 0 0 3px rgba(196,84,44,.22) }

.iconbtn{
  width:38px; height:38px; display:grid; place-items:center;
  border-radius:var(--r-pill); border:1px solid var(--line);
  background:var(--surface); color:var(--ink-2);
  transition:border-color .2s, color .2s, transform .18s;
}
.iconbtn:hover{ border-color:var(--ink); color:var(--ink) }
.iconbtn:active{ transform:scale(.94) }
.iconbtn svg{ width:17px; height:17px }
.theme__moon{ display:none }
:root[data-theme="dark"] .theme__sun{ display:none }
:root[data-theme="dark"] .theme__moon{ display:block }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme__sun{ display:none }
  :root:not([data-theme="light"]) .theme__moon{ display:block }
}

/* ==========================================================================
   Первый экран
   ========================================================================== */
.hero{ padding-block:clamp(26px,4vw,52px) clamp(18px,2.6vw,32px) }
.hero__grid{ display:grid; gap:clamp(20px,3vw,32px) }

.hero h1{ font-size:clamp(38px,6.4vw,76px); font-weight:800; text-wrap:balance; max-width:14ch }
.hero h1 span{ display:block; color:var(--muted); font-size:.72em; letter-spacing:-.03em; margin-top:.12em }
.hero__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(18px,2.4vw,26px) }



/* ==========================================================================
   Каталог
   ========================================================================== */
.catalog{ padding-bottom:clamp(48px,7vw,96px) }


.toolbar{
  position:sticky; top:var(--head-h); z-index:60;
  padding-block:12px;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.6) blur(16px);
}
.toolbar::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--line-soft); opacity:0; transition:opacity .25s;
}
.toolbar.is-compact::after{ opacity:1 }
.toolbar__row{ display:flex; align-items:center; gap:9px; flex-wrap:wrap }

.search{ position:relative; flex:1 1 280px; min-width:0 }
.search input{
  width:100%; padding:13px 42px 13px 44px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-pill); font-size:16px; letter-spacing:-.011em;  /* меньше 16px — Safari зумит страницу при фокусе */
  transition:border-color .2s, box-shadow .2s;
}
.search input::placeholder{ color:var(--muted) }
.search input:focus{ outline:0; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-bg) }
.search__icon{ position:absolute; left:16px; top:50%; translate:0 -50%; width:17px; height:17px; color:var(--muted); pointer-events:none }
.search__clear{
  position:absolute; right:7px; top:50%; translate:0 -50%;
  width:28px; height:28px; display:none; place-items:center;
  border-radius:50%; color:var(--muted);
}
.search__clear svg{ width:14px; height:14px }
.search__clear:hover{ background:var(--surface-2); color:var(--ink) }
.search.has-value .search__clear{ display:grid }

.select{
  display:inline-flex; align-items:center; gap:8px; line-height:1;
  padding:11px 16px; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line);
  font-size:13.5px; color:var(--muted);
}
.select select{
  appearance:none; border:0; background:none; cursor:pointer; line-height:1;
  font-size:13.5px; font-weight:600; color:var(--ink); padding-right:16px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:right 5px center, right 1px center;
  background-size:4px 4px, 4px 4px; background-repeat:no-repeat;
}
.select select:focus{ outline:0 }

.viewswitch{ display:inline-flex; gap:2px; padding:3px; border-radius:var(--r-pill); background:var(--surface-2) }
.viewswitch button{
  width:38px; height:38px; display:grid; place-items:center;
  border-radius:var(--r-pill); color:var(--muted);
  transition:background-color .2s, color .2s;
}
.viewswitch button svg{ width:17px; height:17px }
.viewswitch button[aria-pressed="true"]{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1) }

.chips{
  display:flex; gap:8px; margin-top:10px;
  overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity;
  padding-bottom:2px; scroll-padding-inline:var(--gut);
  overscroll-behavior-x:contain;
}
/* распорка, чтобы последний раздел не упирался в край */
.chips::after{ content:""; flex:none; width:8px }
.chips::-webkit-scrollbar{ display:none }
.chip{
  scroll-snap-align:start; flex:none; white-space:nowrap;
  padding:9px 16px; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line);
  font-size:13.5px; font-weight:600; color:var(--ink-2);
  transition:background-color .2s, color .2s, border-color .2s;
}
.chip:hover{ border-color:var(--ink) }
.chip.is-active{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink) }
.chip b{ font-weight:600; opacity:.6; margin-left:7px }
.chip.is-active b{ opacity:.7 }

.counter{ margin-top:11px; font-size:13.5px; color:var(--muted) }
.counter b{ color:var(--ink); font-weight:600 }
.toolbar.is-compact .counter{ height:0; margin:0; opacity:0; overflow:hidden }
.toolbar.is-compact.has-filter .counter{ height:auto; margin-top:11px; opacity:1; overflow:visible }
.counter{ transition:opacity .2s, height .2s, margin .2s }

/* --- разделы и позиции ---------------------------------------------------- */
.items{ margin-top:clamp(18px,2.4vw,28px); display:grid; gap:clamp(10px,1.2vw,14px); min-width:0 }
[data-view="grid"] .items{ grid-template-columns:repeat(auto-fill, minmax(272px,1fr)) }
[data-view="list"] .items{ grid-template-columns:1fr; gap:0 }

.group__head{
  grid-column:1 / -1;
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin-top:clamp(26px,3.4vw,44px); margin-bottom:2px;
  scroll-margin-top:calc(var(--head-h) + 150px);
}
.group__head:first-child{ margin-top:0 }
.group__head[hidden]{ display:none }
.group__head h3{ font-size:clamp(19px,2vw,25px); font-weight:700 }
.group__head span{ font-size:13px; color:var(--muted) }

.item{
  position:relative; display:flex; flex-direction:column; min-width:0;
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--r-lg); overflow:hidden;
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s;
}

/* пока фотографий нет — фирменная плашка с рисунком по виду выпечки */
.item__media{
  position:relative; overflow:hidden;
  aspect-ratio:4/3; display:grid; place-items:center; flex:none;
  background:
    radial-gradient(120% 100% at 50% 0%, var(--accent-bg), transparent 70%),
    var(--surface-2);
  border-bottom:1px solid var(--line-soft);
}
/* Позиционируем абсолютно: в grid-контейнере с центрированием height:100%
   не разрешается (высота зависит от содержимого, содержимое — от высоты),
   и фотография вылезала из карточки своим натуральным размером. */
.item__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }

/* «целиком»: снимок виден полностью, поля закрывает его же размытая копия */
.item__media--contain::before{
  content:""; position:absolute; inset:0;
  background:var(--photo) center/cover no-repeat;
  filter:blur(18px) saturate(1.1) brightness(.96);
  transform:scale(1.15);
}
.item__media--contain img{ object-fit:contain; z-index:1 }
.item__icon{ width:38%; max-width:76px; height:auto; color:var(--icon, var(--accent)); opacity:.55 }

/* вес — плашкой в углу картинки: читается и на рисунке, и на будущем фото */
.item__weight{
  position:absolute; top:10px; right:10px;
  padding:5px 10px; border-radius:var(--r-pill);
  /* плотнее, чем кажется нужным: поверх светлой фотографии полупрозрачная
     плашка сливается с фоном и вес перестаёт читаться */
  background:color-mix(in srgb, var(--surface) 93%, transparent);
  backdrop-filter:blur(12px) saturate(1.4);
  border:1px solid var(--line);
  font-size:11.5px; font-weight:700; color:var(--ink);
  letter-spacing:-.005em; white-space:nowrap;
  box-shadow:0 2px 8px rgba(22,20,15,.18);
}
.item__body{ display:flex; flex-direction:column; gap:6px; flex:1; padding:clamp(14px,1.5vw,17px) }
/* характеристики позиции */
.item__specs{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px }
.spec{
  padding:4px 9px; border-radius:var(--r-pill);
  background:var(--surface-2); border:1px solid var(--line-soft);
  font-size:11.5px; font-weight:600; color:var(--ink-2);
}
.item__comp{
  font-size:12.5px; line-height:1.45; color:var(--muted);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.item__comp span{
  font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); opacity:.75; margin-right:6px;
}

.item__foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:10px }
/* без tabular-nums: табличные цифры дают всем знакам одну ширину,
   и узкая «1» в «100» выглядит оторванной от нулей */
.item__price{ font-size:16.5px; font-weight:700; letter-spacing:-.02em }
.item__price.is-empty{ color:var(--muted); font-weight:600 }
.item[hidden]{ display:none }
.item:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); border-color:var(--line) }
.item__name{ font-size:17.5px; font-weight:600; letter-spacing:-.02em; line-height:1.25 }
.item__desc{ font-size:13.5px; line-height:1.5; color:var(--muted) }
/* метка раздела нужна, только когда сами разделы не показаны:
   при поиске и в порядке «по алфавиту» */
/* метка раздела нужна, только когда сами разделы не показаны:
   при поиске и в порядке «по алфавиту» */
.item__tag{ display:none }
[data-flat="1"] .item__tag{
  display:block; font-size:11px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--muted);
}

/* компактный список */
[data-view="list"] .item{
  flex-direction:row; align-items:center; gap:14px;
  border:0; border-radius:var(--r-md); border-bottom:1px solid var(--line-soft);
  padding:10px 8px; background:none;
}
[data-view="list"] .item:hover{ transform:none; box-shadow:none; background:var(--surface-2) }
[data-view="list"] .item__media{
  width:96px; height:auto; aspect-ratio:4/3; border:0; border-radius:var(--r-sm); flex:none;
}
[data-view="list"] .item__icon{ width:30px }
[data-view="list"] .item__weight{ display:none }  /* на миниатюре плашке не место */
[data-view="list"] .item__body{ flex-direction:row; align-items:center; gap:14px; padding:0; flex:1 1 auto; min-width:0 }
[data-view="list"] .item__name{ flex:none; max-width:38% }
[data-view="list"] .item__desc{ flex:1 1 auto }
[data-view="list"] .item__specs,
[data-view="list"] .item__comp{ display:none }
[data-view="list"] .item__foot{ margin:0; padding:0; flex:none; gap:14px }

.empty{ margin-top:clamp(48px,7vw,90px); margin-bottom:24px; text-align:center; color:var(--muted) }
.empty h3{ font-size:clamp(22px,3vw,32px); font-weight:700; color:var(--ink) }
.empty p{ margin-top:9px; font-size:14.5px }
.empty .btn{ margin-top:18px }


/* ==========================================================================
   Подвал
   ========================================================================== */
.footer{ border-top:1px solid var(--line-soft); padding-block:clamp(28px,3.6vw,44px) }
.footer__facts{
  display:flex; flex-wrap:wrap; justify-content:center; text-align:center;
  gap:18px clamp(24px,3.4vw,56px);
}
.footer__facts > div{ flex:0 1 auto; min-width:180px; max-width:280px }
.footer__facts .label{ display:block; margin-bottom:3px }
.footer__facts b{ font-weight:500; font-size:14.5px; color:var(--ink) }
.footer__facts a:hover{ color:var(--accent) }

.totop{
  position:fixed; right:18px; bottom:18px; z-index:65;
  width:44px; height:44px; border-radius:50%;
  background:var(--ink); color:var(--bg);
  display:grid; place-items:center; box-shadow:var(--shadow-2);
  opacity:0; pointer-events:none; translate:0 10px;
  transition:opacity .25s, translate .25s;
}
.totop.is-on{ opacity:1; pointer-events:auto; translate:0 }
.totop svg{ width:18px; height:18px }

/* --- появление блоков (включает скрипт) ----------------------------------- */
.js-reveal .rise{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1) }
.js-reveal .rise.is-in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){ .js-reveal .rise{ opacity:1; transform:none; transition:none } }

/* ==========================================================================
   Адаптив
   ========================================================================== */
@media (max-width:900px){
  .hero__grid{ grid-template-columns:1fr; gap:26px }
}
@media (max-width:620px){
  :root{ --head-h:60px }

  [data-view="grid"] .items{ grid-template-columns:1fr }
  [data-view="list"] .item{ gap:12px }
  [data-view="list"] .item__name{ max-width:none }
  .hero__actions .btn{ flex:1 1 auto }
  .search{ flex:1 1 100% }
}


/* ==========================================================================
   Телефон: панель связи снизу, крупные касания, безопасные зоны
   ========================================================================== */
.dock{ display:none }

@media (max-width:620px){
  .dock{
    position:fixed; left:0; right:0; bottom:0; z-index:68;
    display:flex; gap:8px;
    padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
    background:color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter:saturate(1.6) blur(16px);
    border-top:1px solid var(--line-soft);
  }
  .dock{ gap:8px }
  .dock .btn{ min-height:50px; font-size:14px; padding:12px 16px; gap:8px }
  .dock .btn svg{ width:18px; height:18px }
  .dock .btn--icon{ flex:none; width:50px; padding:0 }
  .dock .btn--icon span{ display:none }
  .dock .btn--wide{ flex:1 1 0; min-width:0 }

  /* чтобы панель не накрывала последние карточки и подвал */
  body{ padding-bottom:calc(70px + env(safe-area-inset-bottom)) }
  .totop{ bottom:calc(78px + env(safe-area-inset-bottom)); right:14px; width:42px; height:42px }

  /* касания крупнее: 44 px — минимум, который уверенно попадается пальцем */
  .chip{ padding:11px 16px; font-size:14px }
  .viewswitch button{ width:44px; height:44px }
  .select{ padding:12px 16px; min-height:44px }
  .iconbtn{ width:42px; height:42px }
  .search input{ padding-block:15px }

  /* карточки компактнее — на телефоне их листают, а не разглядывают */
  .item{ border-radius:var(--r-md) }
  .item__body{ padding:13px 14px }
  .item__name{ font-size:16.5px }
  .item__desc{ font-size:13px }
  .item__media{ aspect-ratio:16/9 }
  .item__weight{ top:8px; right:8px; padding:4px 9px; font-size:11px }
  .topbar__logo .logo{ height:44px }
  .topbar__name{ display:none }
  [data-view="list"] .item__media{ width:76px; height:auto }
  [data-view="list"] .item__body{ flex-direction:column; align-items:flex-start; gap:4px }
  [data-view="list"] .item__name{ max-width:none }
  [data-view="list"] .item__foot{ padding-top:2px }

  .items{ gap:8px }
  .group__head{ margin-top:22px }
  .hero{ padding-block:18px 14px }
  .hero__grid{ gap:16px }
  /* WhatsApp уже есть в нижней панели — второй такой же кнопки не нужно */
  .hero__actions{ display:none }
  .toolbar{ padding-block:10px }
}

/* учёт «чёлки» и полей при повороте экрана */
@supports (padding: max(0px)){
  .shell{
    padding-left:max(var(--gut), env(safe-area-inset-left));
    padding-right:max(var(--gut), env(safe-area-inset-right));
  }
}

/* ==========================================================================
   Печать
   ========================================================================== */
@media print{
  .topbar, .toolbar, .totop, .dock, .hero__actions, .iconbtn{ display:none !important }
  body{ background:#fff; color:#000 }
  .item{ break-inside:avoid; border:0; border-bottom:1px solid #ddd; border-radius:0; padding:6pt 0; background:none }
  .group__head{ break-after:avoid }
}