/* mobile.css — 031 Shar-ON24: the phone layer the LAKRES sample does not have (14.10.2026).
   One break: ≤ 760 px (360–430 phones, the main screen of the buyer — PORTRAIT.md «мама с телефоном»).
   Same tokens, same content (Baymard: nothing of the client disappears on the phone), new arrangement:
   burger + logo + cart in the header · bottom tab bar «Каталог · Поиск · WhatsApp · Корзина» · drawer menu ·
   filters as a sheet · cards two in a row · one column everywhere else. Loaded on every page after the page css. */
@media (max-width: 760px) {
  :root { --px: 1px; --pad: 16px; --gap: 12px; --sec: 64px; --hdr: 56px; --util: 0px; }
  body { font-size: 15px; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .h1 { font-size: 30px; line-height: 1.08; }
  .h2 { font-size: 28px; }
  .h3 { font-size: 22px; }
  .over { font-size: 14px; }
  .sec-head { margin-bottom: 22px; align-items: center; }
  .btn { height: 48px; padding: 0 24px; }
  .btn--big { height: 52px; }

  /* header */
  .util { display: none; }
  .hdr, .hdr--split { position: sticky; top: 0; height: var(--hdr); background: var(--lilac); }
  .hdr__in, .hdr--split .hdr__in { gap: 8px; justify-content: space-between; }
  .hdr__burger { display: inline-flex; width: 40px; justify-content: center; }
  .hdr .nav, .hdr__hole, .hdr .search, .hdr__wa, .hdr__tools .nav { display: none !important; }
  .hdr__half { display: contents; }
  .logo, .hdr--split .logo { width: 128px; }
  .hdr__tools { margin-left: 0; gap: 4px; }
  .hdr--float { display: none !important; }
  .mega { display: none !important; }
  .cartbtn { height: 40px; padding: 0 12px; font-size: 13px; }

  /* tab bar */
  .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: var(--white); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  .tabbar > * { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 60px;
    font-size: 11px; color: var(--ink-2); }
  .tabbar .ico { width: 22px; height: 22px; }
  .tabbar__wa { color: var(--white) !important; background: #25a244; }
  .tabbar__n { position: absolute; top: 7px; left: calc(50% + 6px); min-width: 18px; height: 18px; border-radius: 999px; background: var(--magenta);
    color: #fff; font: 700 10px/18px var(--f-text); text-align: center; display: none; }
  .tabbar .has .tabbar__n, a.has .tabbar__n { display: block; }

  /* drawer */
  .drawer { display: block; position: fixed; inset: 0; z-index: 70; pointer-events: none; }
  .drawer__bg { position: absolute; inset: 0; background: rgba(42, 30, 51, .38); opacity: 0; transition: opacity .25s var(--ease); }
  .drawer__box { position: absolute; left: 0; top: 0; bottom: 0; width: min(88vw, 360px); background: var(--white); overflow: auto;
    padding: 12px 16px 28px; transform: translateX(-100%); transition: transform .3s var(--ease); }
  .drawer.open { pointer-events: auto; }
  .drawer.open .drawer__bg { opacity: 1; }
  .drawer.open .drawer__box { transform: none; }
  .drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .drawer__top .logo { width: 120px; }
  .drawer__h { font: 400 13px/1 var(--f-mono); color: var(--magenta); text-transform: uppercase; margin: 22px 0 10px; }
  .drawer__list li a { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line);
    font: 300 17px/1.2 var(--f-mono); text-transform: uppercase; }
  .drawer__list small { font: 400 12px var(--f-mono); color: var(--ink-2); }
  .drawer__list--info li a { font: 400 15px/1.2 var(--f-text); text-transform: none; }
  .drawer .chips { gap: 6px; }
  .drawer .chip { height: 34px; font-size: 13px; padding: 0 12px; }
  .drawer__contact { margin-top: 24px; display: grid; gap: 10px; }
  .drawer__contact .util__tel { font-size: 20px; }

  /* cards: two in a row */
  .grid, .recs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px 12px !important; }
  .card__name { font-size: 14px; margin-top: 10px; }
  .price b { font-size: 17px; }
  .card__dl { font-size: 12px; }
  .card__buy { gap: 8px; }
  .card__buy .btn { height: 40px; padding: 0 14px; font-size: 11px; width: 100%; }
  .card__one { display: none; }
  .lbl { height: 20px; font-size: 10px; padding: 0 8px; }

  /* forms, layers, toast */
  .layer { align-items: flex-end; padding: 0; }
  .layer__box { width: 100%; max-height: 92svh; border-radius: 18px 18px 0 0; padding: 26px 18px calc(22px + env(safe-area-inset-bottom)); }
  .toast { top: auto; bottom: calc(72px + env(safe-area-inset-bottom)); right: 12px; left: 12px; width: auto; }
  .inp { height: 50px; font-size: 16px; }   /* 16 px: iOS does not zoom into the field */

  /* footer */
  .ftr { padding-block: 40px 28px; }
  .ftr__in { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .ftr__brand { grid-column: 1 / -1; }
  .ftr__in > div:last-child { grid-column: 1 / -1; }
  .ftr__bot { flex-direction: column; align-items: flex-start; gap: 10px; }
  .crumbs { font-size: 12px; padding-top: 14px; }
  .offers { grid-template-columns: 1fr !important; }
  .offer { min-height: 0; padding: 24px 20px; }
  .offer h3, .offer p { max-width: 100%; }
  .offer .sil { opacity: .5; width: 45%; }
}

/* catalog on the phone: one column, filters as a full-height sheet (opened by «Фильтры») */
@media (max-width: 760px) {
  .cat__head { padding-block: 14px 18px; }
  .cat__h1 { font-size: 28px; }
  .cat__body { display: block; }
  .panel { position: fixed !important; inset: 0; top: 0 !important; z-index: 80; background: var(--white); border-radius: 0; overflow: auto;
    transform: translateY(100%); transition: transform .3s var(--ease); padding: 0 16px 90px; }
  .filters-open .panel { transform: none; }
  .filters-open { overflow: hidden; }
  .panel__top { display: flex; justify-content: space-between; align-items: center; height: 56px; position: sticky; top: 0; background: var(--white); z-index: 2;
    font: 400 18px/1 var(--f-mono); text-transform: uppercase; }
  .panel__foot { display: block; position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--white);
    border-top: 1px solid var(--line); }
  .pmini { display: none; }
  .bar { flex-wrap: wrap; gap: 10px; }
  .bar__filters { display: inline-flex; height: 40px; padding: 0 16px; }
  .bar__filters .ico { width: 18px; height: 18px; }
  .sort span { display: none; }
  .subs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .pager__more { width: 100%; }
  .custom { padding: 28px 20px; }
}

/* product card on the phone: photo full width, thumbnails in a row under it, buy column below; the buy button sticks above the tab bar */
@media (max-width: 760px) {
  .pd { grid-template-columns: 1fr; gap: 18px; padding-top: 10px; }
  .pd__gal { position: static; grid-template-columns: 1fr; }
  .pd__thumbs { grid-row: 2; grid-auto-flow: column; grid-auto-columns: 64px; overflow-x: auto; scrollbar-width: none; }
  .pd__main { max-height: none; }
  .pd__buy h1 { font-size: 22px; }
  .pd__row { margin: 14px 0 12px; }
  .pd__buy [data-add] { position: sticky; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 5; box-shadow: 0 10px 30px -12px rgba(42, 30, 51, .45); }
  .pd__checks { grid-template-columns: 1fr !important; }
  .addons__row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; }
  .addon { grid-template-columns: 1fr !important; }
  .tip__b { left: auto !important; right: 0; width: min(260px, 70vw) !important; }
}

/* cart on the phone: steps in one column, the total under them */
@media (max-width: 760px) {
  .co { grid-template-columns: 1fr !important; gap: 24px; }
  .sum { position: static !important; }
  .when, .fgrid, .opts--2, .opts--3, .opts--4 { grid-template-columns: 1fr !important; }
  .line { grid-template-columns: 64px 1fr auto !important; row-gap: 8px; }
  .line .qty { grid-column: 2; }
  .page-h { font-size: 28px; }
}

/* info pages on the phone */
@media (max-width: 760px) {
  .heroes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
  .hero-t__n { font-size: 12px; }
  .ihead--row { display: grid !important; gap: 14px; }
  .phero { min-height: 0 !important; }
  .phero__ph { position: relative !important; height: 220px !important; }
  .phero__card { width: auto !important; border-radius: 18px !important; margin-top: -40px; padding: 22px 18px !important; }
  .ct { grid-template-columns: 1fr !important; }
  .done__card { width: auto !important; }
  .rvs { columns: 1 !important; }
  .doc { padding-inline: 0 !important; }
}

/* section heads on the phone: the title on its own line, «все →» under it */
@media (max-width: 760px) {
  .sec-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* home on the phone: the gallery becomes a row of three, the centre frame big; tiles one column; carousel scrolls by finger */
@media (max-width: 760px) {
  .hdr--split .hdr__half--r .hdr__tools { display: none; }
  .hdr__mcart { display: inline-flex !important; width: 40px; justify-content: center; background: var(--white); }
  .hero { padding-bottom: 28px; }
  .gal { display: grid !important; grid-template-columns: 1fr 1.7fr 1fr !important; gap: 8px !important; padding: 12px 16px 0 !important; align-items: end; }
  .gal__f { height: auto !important; aspect-ratio: 1; border-radius: 12px !important; }
  .gal__f--o { display: none !important; }
  .gal__f--c { aspect-ratio: 1; }
  .gal__f img { width: 100%; height: 100%; object-fit: cover; }
  .hero__blobs { display: none; }
  .hero__txt { padding-top: 18px !important; }
  .hero__h1 { font-size: 27px; }
  .hero__h1 span { display: inline; }
  .hero__sub { font-size: 15px; margin-top: 12px !important; }
  .hero__act { flex-direction: column; align-items: stretch; margin-top: 18px !important; }
  .hero__prom { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; font-size: 12.5px; }
  .tiles { grid-template-columns: 1fr; gap: 12px; }
  .tile { aspect-ratio: 16 / 11; }
  .tile__name { font-size: 22px; }
  .tile__txt { left: 16px; bottom: 16px; max-width: 48%; }
  .car__arr { display: none; }
  .car__view { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0; padding: 0 16px !important; }
  .car__track { grid-auto-columns: 72% !important; gap: 12px !important; transform: none !important; }
  .car__track > * { scroll-snap-align: start; }
  .pick__row { grid-template-columns: 1fr !important; gap: 10px; padding: 16px 0 !important; }
  .chip--lg { height: 38px; font-size: 14px; padding: 0 14px; }
  .band { padding: 48px 16px !important; }
  .band__h { font-size: 26px; }
  .band__addr { font-size: 14px !important; text-align: left; }
  .hrv { grid-template-columns: 1fr; }
  .hrv__i { padding: 20px; }
  .faq { grid-template-columns: 1fr !important; gap: 18px !important; }
  .faq__h { position: static !important; }
  .acc__q { font-size: 17px !important; }
  .acc__a { padding-right: 0 !important; }
  .reach { min-height: 0 !important; display: block !important; }
  .reach__ph { position: relative !important; height: 200px !important; }
  .reach__cap { width: auto !important; border-radius: 20px !important; margin: -36px 16px 0 !important; padding: 24px 20px !important; }
}

/* r0 fixes: the cart steps took the min-content width of the add-on row (723 px on 390); long buttons wrap */
@media (max-width: 760px) {
  .co__steps { grid-template-columns: minmax(0, 1fr); }
  .co__addlist { grid-template-columns: 1fr !important; }
  .step { min-width: 0; }
  .btn { white-space: normal; text-align: center; height: auto; min-height: 48px; padding-block: 10px; line-height: 1.25; }
  .ihead .btn { align-self: stretch; }
}

@media (max-width: 760px) {
  .pd__opts { grid-template-columns: 1fr; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .tabs .chip { flex: none; }
}

/* r1 eye fixes: info heads in one column; the photo hero stacks (photo, then the white card); phone links get a 44 px target */
@media (max-width: 760px) {
  .ihead, .ihead--row { grid-template-columns: 1fr !important; align-items: start; gap: 12px; }
  .ihead__h { font-size: 34px; }
  .ihead .btn { width: 100%; border-radius: 999px; }
  .phero { display: block !important; }
  .phero__in { padding: 0 16px 8px !important; }
  .phero .crumbs { display: none; }
  .phero__card .h1 { font-size: 30px; }
  .ftr__tel, .util__tel, .ct__tel, .reach__tel, .done__tel a { display: inline-block; padding-block: 10px; }
}