/* mobile.css — 030 Pekan Market: the new parts of 030 on every width + the phone and tablet layer the LAKRES sample never had
   (LAKRES is desktop only: at 390 its page is 938 px wide). Loaded last on every page (src/base.html), so it wins by order.
   Breakpoints: 1100 — tablet (header collapses to the burger) · 760 — phone (one column, swipe rows, bottom sheets).
   Sources of the phone decisions — the «мобайл:» line of every block in logic/NEW_MAP*.md. */

/* ---------- new parts on every width ---------- */
.logo { width: calc(250 * var(--px)); }
.logo__img { display: block; width: 100%; height: auto; }
.logo__img--sm { width: 190px; }
.hdr--split .logo { width: calc(200 * var(--px)); }
.burger, .tool--search, .hdr__mcart, .pbar, .cat__filters, .panel__top, .panel__foot { display: none; }
.burger { width: 44px; height: 44px; flex: none; align-items: center; justify-content: center; flex-direction: column; gap: 5px; margin-left: -10px; }
.burger i { display: block; width: 20px; height: 1.6px; background: var(--ink); border-radius: 2px; }
html.noscroll, html.noscroll body { overflow: hidden; }
.price__ask { font-size: calc(15 * var(--px)) !important; font-weight: 600; color: var(--ink-2); }
.mega__note { font-size: calc(13.5 * var(--px)); color: var(--ink-2); margin-top: 8px; max-width: 46ch; }
.mega__sub a small { margin-left: 6px; color: var(--ink-2); font-size: .85em; }

/* the panel of 030 carries long client names («Подарочные наборы для учителей и воспитателей») — chips wrap inside the column */
.cat__body > * { min-width: 0; }
.panel .chip { white-space: normal; height: auto; min-height: calc(36 * var(--px)); padding-block: 6px; line-height: 1.25; text-align: left; }

.addons__row > * { min-width: 0; }

/* weight chips «Объем» on a card and on the product page */
.card__vols { display: flex; flex-wrap: wrap; gap: 6px; margin-top: calc(8 * var(--px)); }
.vchip { height: calc(32 * var(--px)); min-width: calc(58 * var(--px)); padding: 0 calc(10 * var(--px)); border-radius: 999px; border: 1px solid var(--line);
  background: var(--white); font-size: calc(13 * var(--px)); white-space: nowrap; }
.vchip:hover { border-color: var(--violet); color: var(--violet); }
.vchip.on { background: var(--violet); border-color: var(--violet); color: var(--white); }
.pd__vols { margin: calc(18 * var(--px)) 0 calc(6 * var(--px)); }
.pd__vols .chips .chip.on { background: var(--violet); border-color: var(--violet); color: var(--white); }
.pd__stock { display: flex; align-items: center; gap: 6px; font-size: calc(14 * var(--px)); color: #2e7d4f; margin: 6px 0 14px; }
.pd__stock .ico { width: 16px; height: 16px; }
.pd__more summary { cursor: pointer; color: var(--violet); font-size: calc(14 * var(--px)); margin-top: 6px; }

/* home: «на вес», reviews row, banner footnote */
.grid--4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(40 * var(--px)) var(--gap); }
.ves__lead { margin-top: calc(14 * var(--px)); max-width: 62ch; font-size: calc(16 * var(--px)); }
.ves__opt { margin-top: calc(26 * var(--px)); display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline; font-size: calc(16 * var(--px)); }
.band__note { margin-top: calc(18 * var(--px)); font-size: calc(12.5 * var(--px)); color: var(--ink-2); max-width: 70ch; margin-inline: auto; }
.band__addr li { justify-content: center; }
.hrv { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.hrv--4 { grid-template-columns: repeat(4, 1fr); }
.hrv__i { background: var(--pill); border-radius: var(--r); padding: calc(26 * var(--px)); display: flex; flex-direction: column; gap: calc(18 * var(--px)); }
.hrv__t { font-size: calc(15.5 * var(--px)); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.hrv__by { margin-top: auto; display: grid; gap: 2px; }

/* info pages: new pieces */
.ztable--5 { grid-template-columns: repeat(5, 1fr); }
.ztable__col { padding: calc(24 * var(--px)); border-left: 1px solid var(--line); }
.ztable__col:first-child { border-left: 0; }
.ztable__col .tag { display: block; margin-bottom: 8px; }
.pays__lead { margin-bottom: calc(18 * var(--px)); }
.pays__why { margin-top: calc(22 * var(--px)); max-width: 820px; }
.phero__lead { margin-top: calc(12 * var(--px)); font-size: calc(17 * var(--px)); }
.rvs__h { column-span: all; margin-bottom: calc(18 * var(--px)); display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; }
.rvs__more { column-span: all; margin-top: 10px; }
.rv__btns { display: flex; gap: 10px; }
.step__lead { margin: -4px 0 12px; }
.when__note { display: grid; gap: 10px; font-size: calc(15 * var(--px)); color: var(--ink-2); }
.sum__free { font-size: calc(14 * var(--px)); background: var(--white); border-radius: 10px; padding: 10px 12px; }
.sum__free b { color: var(--magenta); }
.mini__t small { display: block; color: var(--ink-2); font-size: .85em; }

/* «на вес»: own set banner and the kilo line (NEW_MAP 3.B3, 3.B4) */
.ownset { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: center; }
.ownset__txt { position: relative; z-index: 1; }
.ownset__txt p { max-width: 46ch; }
.ownset__packs { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ownset__packs .card { background: var(--white); border-radius: var(--r); padding: 10px; }
.kgline { margin-top: calc(30 * var(--px)); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: calc(18 * var(--px)) calc(24 * var(--px)); border-radius: var(--r); background: var(--lilac); font-size: calc(16 * var(--px)); }

/* the drawer (burger menu) — a sheet from the left; the page under it does not scroll */
.drawer { position: fixed; inset: 0; z-index: 70; display: none; }
.drawer.open { display: block; }
.drawer__bg { position: absolute; inset: 0; background: rgba(46, 31, 42, .38); animation: fadeIn .25s var(--ease); }
.drawer__box { position: absolute; left: 0; top: 0; bottom: 0; width: min(420px, 90vw); background: var(--white); overflow: auto;
  padding: 14px 18px 28px; display: flex; flex-direction: column; gap: 6px; animation: drawerIn .3s var(--ease); }
@keyframes drawerIn { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer__top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; }
.drawer__h { font: 400 13px/1 var(--f-mono); color: var(--magenta); text-transform: uppercase; margin: 16px 0 6px; }
.drawer__grp { border-bottom: 1px solid var(--line); }
.drawer__grp summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 48px; font: 300 17px/1.2 var(--f-mono); text-transform: uppercase; cursor: pointer; }
.drawer__grp summary::-webkit-details-marker { display: none; }
.drawer__grp summary small { color: var(--ink-2); font-size: 12px; }
.drawer__grp summary .chev { margin-left: auto; width: 10px; height: 10px; transition: transform .25s var(--ease); }
.drawer__grp[open] summary .chev { transform: rotate(180deg); }
.drawer__grp a { display: block; padding: 10px 0 10px 12px; font-size: 15px; color: var(--ink-2); }
.drawer__lnk { display: flex; align-items: center; min-height: 44px; font-size: 16px; border-bottom: 1px solid var(--line); }
.drawer .chips .chip { height: auto; min-height: 40px; white-space: normal; padding: 8px 14px; line-height: 1.3; }
.hero__prom li { text-align: center; }
.drawer__call { margin-top: auto; padding-top: 18px; display: grid; gap: 6px; }
.drawer__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.drawer__btns .btn { height: 48px; padding: 0 10px; }
.search--drawer { margin: 4px 0 6px; }
.search--drawer .search__in { width: 100%; height: 46px; background: var(--pill); }

/* ---------- small laptop: 1101–1360 — the header strip of LAKRES does not fit logo + six items + search ---------- */
@media (max-width: 1360px) {
  .hdr .logo { width: 190px; }
  .hdr__in { gap: 20px; }
  .nav { gap: 18px; font-size: 14px; }
  .hdr .search__in { width: 170px; }
  .hdr__tools { gap: 12px; }
}

/* ---------- tablet: ≤ 1100 — the header collapses to the burger ---------- */
@media (max-width: 1100px) {
  :root { --pad: 24px; --gap: 18px; --sec: 72px; --hdr: 60px; }
  .util__hours, .util__cb { display: none; }
  .hdr .nav, .hdr .search, .tool--acc, .hdr--split .hdr__tools .nav { display: none; }
  .burger, .tool--search { display: inline-flex; }
  .hdr__in { gap: 10px; }
  .hdr .logo, .hdr--split .logo { width: 210px; }
  .hdr--split { position: sticky; top: 0; background: var(--lilac); height: var(--hdr); }
  .hdr--split .hdr__in { display: flex; }
  .hdr--split .hdr__hole { display: none; }
  .hdr--split .hdr__half { display: flex; align-items: center; }
  .hdr--split .hdr__half--r { margin-left: auto; }
  .mega { display: none !important; }
  .grid, .recs { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .hrv, .hrv--4 { grid-template-columns: repeat(2, 1fr); }
  .ztable--5 { grid-template-columns: repeat(2, 1fr); }
  .ztable--5 .ztable__col { border-left: 0; border-top: 1px solid var(--line); }
  .pays, .steps3, .facts3, .rules__grid, .ct { grid-template-columns: 1fr 1fr; }
  .addons__row { grid-template-columns: repeat(2, 1fr); }
  .footer-cols, .ftr__in { grid-template-columns: 1fr 1fr; }
  .h1 { font-size: 40px; }
  .h2 { font-size: 34px; }
  .acct, .docs { grid-template-columns: 1fr; }
  .addons__row > * { min-width: 0; }
  /* catalogue: filters as a bottom sheet, «Показать N» sticks at its bottom */
  .cat__body { grid-template-columns: 1fr; }
  .cat__filters { display: inline-flex; width: 100%; margin-top: 14px; position: sticky; top: calc(var(--hdr) + 6px); z-index: 20; background: var(--white); }
  .cat__fn { color: var(--magenta); font-weight: 700; }
  .panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 75; height: 85svh; background: var(--white); border-radius: 18px 18px 0 0;
    box-shadow: 0 -20px 60px -20px rgba(46, 31, 42, .4); transform: translateY(105%); transition: transform .3s var(--ease);
    display: flex; flex-direction: column; }
  .panel.open { transform: none; }
  .panel__top { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
  .panel__in { overflow: auto; padding: 8px 18px 20px; flex: 1; }
  .panel__foot { display: block; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
  .pmini { display: none; }
  .bar { flex-wrap: wrap; }
  .cat__h1 { font-size: 26px; }
  .pager__more { width: 100%; }

}

/* ---------- phone: ≤ 760 ---------- */
@media (max-width: 760px) {
  :root { --pad: 16px; --gap: 14px; --sec: 56px; --hdr: 56px; --r: 10px; }
  body { font-size: 15px; }
  .h1 { font-size: 30px; line-height: 1.08; }
  .h2 { font-size: 27px; line-height: 1.1; }
  .h3 { font-size: 22px; }
  .h4 { font-size: 17px; }
  .lead { font-size: 15.5px; }
  .sec-head { margin-bottom: 22px; align-items: flex-end; gap: 12px; }
  .more { font-size: 13px; }
  .btn { height: 46px; padding: 0 22px; font-size: 12.5px; }
  .btn--big { height: 52px; }
  .chip { height: 40px; font-size: 14px; }
  .chip--lg { height: 44px; font-size: 14.5px; padding: 0 16px; }

  /* header: burger · logo · search · cart, sticky; the utility line keeps only the phone and WhatsApp */
  .util { height: 34px; }
  .util__l { display: none; }
  .util__in { justify-content: center; }
  .util__r { gap: 16px; }
  .util__tel { font-size: 14px; }
  .util__cart { display: none !important; }
  .hdr .logo, .hdr--split .logo, .hdr--float .logo { width: 150px; }
  .hdr__tools { gap: 2px; }
  .tool { height: 44px; min-width: 44px; justify-content: center; }
  .hdr--split .hdr__half--r .cartbtn { display: none; }
  .hdr__mcart { display: inline-flex; }
  .cartbtn { height: 40px; padding: 0 12px; font-size: 13px; }
  .hdr--float { display: none !important; }
  .toast { left: 12px; right: 12px; width: auto; top: auto; bottom: 12px; }

  /* home first screen: the gallery becomes a row of three over the headline */
  .hero { padding-bottom: 30px; --gch: 300px; --gsh: 220px; }
  .gal { grid-template-columns: 22% 56% 22%; column-gap: 8px; margin: 0 -8px; }
  .gal__f--o { display: none; }
  .gal__f--s { height: var(--gsh); }
  .gal__f--c { height: var(--gch); }
  .hero__txt { padding-top: 22px; }
  .hero__h1 { font-size: 29px; }
  .hero__sub { font-size: 15px; margin-top: 12px; }
  .hero__act .btn { width: 100%; }
  .hero__prom { flex-direction: column; gap: 6px; align-items: center; font-size: 13.5px; }
  .blob--tl, .blob--tr { width: 60%; height: 40%; }

  /* tiles: two columns, square photo, name under it — no circles and arches (they eat the photo at 390) */
  .tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tile { aspect-ratio: auto; display: flex; flex-direction: column; }
  .tile .tile__ph { position: relative !important; inset: auto !important; width: 100% !important; height: auto !important; aspect-ratio: 1; order: -1;
    clip-path: none !important; border-radius: 0 !important; display: block; }
  .tile .tile__ph img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border-radius: 0 !important; object-fit: cover; }
  .tile--circles .tile__ph img + img { display: none; }
  .tile .tile__txt { position: relative !important; inset: auto !important; width: auto !important; padding: 10px 12px 14px !important; display: grid; gap: 4px; }
  .tile__name { font-size: 15px; line-height: 1.2; }
  .tile__n { font-size: 12px; }

  /* swipe rows: carousel, reviews, chips */
  .car__arr { display: none; }
  .car__view { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); margin: 0; padding: 0 var(--pad) !important; scrollbar-width: none; }
  .car__view::-webkit-scrollbar { display: none; }
  .car__track { grid-auto-columns: 76%; gap: 12px; transform: none !important; }
  .car__track > * { scroll-snap-align: start; }
  .hrv, .hrv--4 { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); scroll-padding-inline: var(--pad); scrollbar-width: none; }
  .hrv__i { scroll-snap-align: start; padding: 18px; }
  .hrv__t { -webkit-line-clamp: 6; font-size: 14.5px; }
  .pick__row { display: grid !important; grid-template-columns: 1fr !important; gap: 8px; }
  .pick__row .chips, .subs.chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) 4px; scrollbar-width: none; }

  /* cards: two columns */
  .grid, .grid--4 { grid-template-columns: 1fr 1fr; gap: 22px 10px; }
  .card__ph { aspect-ratio: 1; }
  .card__name { font-size: 13.5px; -webkit-line-clamp: 3; min-height: 3.75em; margin-top: 10px; }
  .card .price b { font-size: 16px; }
  .card__dl { font-size: 11.5px; }
  .card__buy { gap: 8px; }
  .card__buy .btn { width: 100%; height: 42px; font-size: 11.5px; padding: 0 8px; }
  .card__one { display: none; }
  .card--big .card__one { display: inline; }
  .vchip { height: 34px; min-width: 0; flex: 1; padding: 0 4px; font-size: 12px; }

  /* banners */
  .band { padding: 46px var(--pad) 50px; }
  .band__sil { opacity: .5; }
  .band__addr { text-align: left; }
  .band__addr li { justify-content: flex-start; }
  .band .btn { width: 100%; }
  .offers, .pick2, .warr, .req, .docs, .acct, .ownset { grid-template-columns: 1fr; }
  .kgline .btn { width: 100%; }
  .offer { min-height: 0; padding: 24px 20px; }
  .offer h3, .offer p { max-width: 100%; }
  .offer .sil { opacity: .35; }
  .offer__btns .btn { flex: 1; }
  .faq { grid-template-columns: 1fr; gap: 18px; }
  .faq__h { position: static; }
  .faq__h br { display: none; }
  .reach { flex-direction: column; padding: 0; min-height: 0; align-items: stretch; }
  .reach__ph { position: relative; height: 40vh; }
  .reach__cap { width: auto; border-radius: 0; padding: 26px var(--pad); }
  .reach__cap .btn { width: 100%; }

  /* footer: columns stack */
  .ftr__in { grid-template-columns: 1fr; gap: 26px; }
  .ftr__bot { flex-direction: column; align-items: flex-start; }

  .cat__body > *, .pd > *, .co > *, .co__steps > *, .step > *, .pd__gal > *, .when > * { min-width: 0; }
  .bar .sort span { display: none; }

  .pager__nums { display: none; }

  /* product: one column, thumbs → swipe, sticky «В корзину» bar */
  .pd { grid-template-columns: 1fr; gap: 18px; }
  .pd__gal { display: block; }
  .pd__thumbs { display: flex !important; gap: 8px; overflow-x: auto; order: 2; margin-top: 8px; }
  .pd__th { flex: 0 0 64px; }
  .pd__buy .h3 { font-size: 21px; }
  .pbar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--white); border-top: 1px solid var(--line);
    padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom)); }
  .pbar__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .pbar__p b { font: 700 19px/1 var(--f-text); }
  .pbar .btn { flex: 1; max-width: 230px; height: 46px; }
  .pg-product .ftr { padding-bottom: 90px; }
  .addons__row { display: flex; overflow-x: auto; gap: 10px; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); }
  .addon { flex: 0 0 72%; }
  .addon--card { flex-basis: 86%; }
  .recs { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 76%; overflow-x: auto; gap: 12px; }

  /* cart: one column, the total under the form */
  .co { grid-template-columns: 1fr; gap: 20px; }
  .sum { position: static; }
  .when { grid-template-columns: 1fr; }
  .opts--2, .opts--4, .fgrid { grid-template-columns: 1fr; }
  .line { grid-template-columns: 64px 1fr auto !important; }
  .co__addlist { grid-template-columns: 1fr; }
  .mini *, .mini { min-width: 0; }

  /* info pages */
  .ihead, .steps3, .facts3, .pays, .rules__grid, .ct, .ztable--5 { grid-template-columns: 1fr; }
  .phero { min-height: 0; flex-direction: column; }
  .phero__ph { position: relative !important; height: 34vh; }
  .phero__in { padding: 0; }
  .phero__card { width: auto !important; margin: 0 !important; border-radius: 0 !important; padding: 22px var(--pad) !important; }
  .phero__card .h1 { font-size: 28px; }
  .rvs { columns: 1; }
  .done__card { width: auto; margin: 0 var(--pad); padding: 24px 20px; }
  .layer__box { width: 100vw; max-height: 100svh; height: 100svh; border-radius: 0; padding: 26px 18px; }
  .layer { padding: 0; }
}