/* mobile.css — SharyVau demo 032 (14.10.2026): the parts LAKRES did not have + the tablet and phone layers.
   LAKRES is desktop only (028 site/ADAPTIVE.md); 032 is desktop and mobile (start prompt). Contract — ../ADAPTIVE.md.
   Breakpoints: ≤ 1199 px tablet and phone (one layout, burger, bottom bar) · ≤ 639 px phone (one column). Loaded last. */

/* ---------- 032 parts on every width ---------- */
.logo img { height: calc(46 * var(--px)); width: auto; }
.hdr--split .logo { width: auto; }
.burger, .hdr__mcart, .mbar, .pbar, .cat__filters, .panel__top, .panel__bot { display: none; }
.tool--tel { display: none; }
.util__more { margin-left: 18px; color: var(--ink-2); }
.price__q { margin-left: 8px; font: 400 calc(13 * var(--px))/1 var(--f-text); color: var(--ink-2); }
.pd__var { margin: 4px 0 14px; }
.pd__var select { width: 100%; }
.pd__when { margin: 18px 0 8px; padding: 14px 16px; border-radius: var(--r); background: var(--powder); }
.pd__when li { font-size: calc(14 * var(--px)); }
.pd__wish { margin-top: 18px; }
.pd__wish textarea { min-height: 64px; }
.opts--3 { grid-template-columns: repeat(3, 1fr); }
.sum__warn { margin: 6px 0 0; color: var(--magenta); }
.doc__li { padding-left: 4px; }
.burger { width: 40px; height: 40px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; flex: none; }
.burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--ink); }

/* home reviews (1.B7) */
.rvw { display: grid; grid-template-columns: calc(260 * var(--px)) repeat(3, 1fr); gap: var(--gap); align-items: stretch; }
.rvw__score { display: flex; flex-direction: column; gap: 10px; padding: calc(26 * var(--px)); border-radius: var(--r); background: var(--lilac); }
.rvw__score b { font: 300 calc(72 * var(--px))/1 var(--f-mono); color: var(--violet); }
.rvw__score span { color: var(--ink-2); font-size: calc(14 * var(--px)); }
.rvw__card { margin: 0; display: flex; flex-direction: column; gap: 12px; padding: calc(26 * var(--px)); border: 1px solid var(--line); border-radius: var(--r); background: var(--white); }
.rvw__card blockquote { margin: 0; flex: 1; font-size: calc(15 * var(--px)); line-height: 1.55; }
.rvw__card blockquote p + p { margin-top: 6px; }
.rvw__card figcaption { font-size: calc(13 * var(--px)); color: var(--ink-2); }
.rvw__stars, .rv__stars { color: var(--magenta); letter-spacing: .12em; font-size: calc(15 * var(--px)); }
.rv__top { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.rv__ans { margin-top: 12px; padding: 12px 16px; border-left: 2px solid var(--lilac); background: var(--pill); border-radius: 0 8px 8px 0; }
.rv__ans p { margin-top: 4px; font-size: calc(14 * var(--px)); color: var(--ink-2); }
.rvs__src { margin-top: 24px; }

/* drawer (phone menu) */
.drawer { position: fixed; inset: 0; z-index: 70; display: none; }
.drawer.open { display: block; }
.drawer__bg { position: absolute; inset: 0; background: rgba(39, 26, 54, .42); }
.drawer__box { position: absolute; left: 0; top: 0; bottom: 0; width: min(88vw, 380px); overflow-y: auto; background: var(--white);
  padding: 16px 20px 28px; display: flex; flex-direction: column; gap: 12px; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; }
.drawer__top .logo img { height: 40px; }
.drawer__top .layer__x { position: static; }
.drawer__list li { border-bottom: 1px solid var(--line); }
.drawer__list a { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; font-size: 15px; }
.drawer__list small { color: var(--ink-2); font-size: 12px; }
.drawer__list--info a { font-weight: 600; }
.drawer__contact { margin-top: 8px; display: grid; gap: 8px; }
.drawer__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
html.noscroll, html.noscroll body { overflow: hidden; }

/* bottom bar (phone, all pages) and the sticky buy bar of a product */
.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--white); border-top: 1px solid var(--line);
  grid-template-columns: repeat(4, 1fr); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
.mbar a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; color: var(--ink); }
.mbar .ico { width: 22px; height: 22px; }
.mbar .cartbtn__n { position: absolute; top: -2px; right: 22%; }
.mbar [data-cartsum] { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbar { position: fixed; left: 0; right: 0; bottom: calc(58px + env(safe-area-inset-bottom)); z-index: 49; background: var(--white);
  border-top: 1px solid var(--line); padding: 10px 16px; align-items: center; justify-content: space-between; gap: 12px;
  transform: translateY(120%); transition: transform .3s var(--ease); }
.pbar.on { transform: none; }
.pbar b { font: 700 18px/1 var(--f-text); }

/* ---------- motion: balloons sway (032), off for reduced motion and shots ---------- */
@keyframes sway { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(.6deg); } }
.gal__f img { transform-origin: 50% 100%; }
html.js:not(.rm):not(.shot) .gal__f--c img { animation: sway 7s ease-in-out infinite; }
html.js:not(.rm):not(.shot) .gal__f--s img { animation: sway 8.5s ease-in-out -2s infinite; }

/* ---------- tablet and phone ≤ 1023 ---------- */
@media (max-width: 1199px) {
  :root { --px: 1px; --pad: 20px; --gap: 14px; --sec: 64px; --hdr: 60px; --util: 32px; }
  body { font-size: 15px; padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .h1 { font-size: 32px; line-height: 1.08; }
  .h2 { font-size: 27px; line-height: 1.1; }
  .h3 { font-size: 21px; }
  .h4 { font-size: 17px; }
  .lead { font-size: 16px; }
  .sec-head { margin-bottom: 22px; align-items: flex-end; }
  .btn { height: 46px; padding: 0 22px; font-size: 12.5px; }
  .btn--big { height: 52px; padding: 0 28px; font-size: 13px; }

  /* util line: only the promise; contacts live in the drawer and the bottom bar */
  .util__r, .util__more { display: none; }
  .util__l { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* header: burger · logo · phone · cart */
  .burger { display: inline-flex; }
  .hdr__in { gap: 10px; }
  .hdr .nav, .hdr .search, .mega { display: none !important; }
  .hdr__tools { margin-left: auto; gap: 6px; }
  .tool--tel { display: inline-flex; }
  .cartbtn [data-cartsum] { display: none; }
  .logo img { height: 40px; }
  .hdr--split { position: sticky; top: 0; background: var(--lilac); height: var(--hdr); }
  .hdr--split .hdr__hole, .hdr--split .hdr__half--r .hdr__tools, .hdr--float { display: none !important; }
  .hdr--split .hdr__half { gap: 10px; }
  .hdr--split .hdr__mcart { display: inline-flex; }
  .mbar { display: grid; }
  .toast { top: auto; bottom: calc(70px + env(safe-area-inset-bottom)); right: 12px; left: 12px; width: auto; }

  /* hero: three photos, the centre one large; text below */
  .hero { --gcw: 50vw; --gch: 60vw; --gsw: 21vw; --gg: 8px; padding-bottom: 28px; }
  .gal { grid-template-columns: var(--gsw) var(--gcw) var(--gsw); justify-content: center; }
  .gal__f--o { display: none; }
  .gal__f--s { height: calc(var(--gch) * .62); }
  .hero__txt { padding-top: 22px; }
  .hero__h1 { font-size: 30px; }
  .hero__h1 span { display: inline; }
  .hero__sub { font-size: 15px; margin-top: 12px; }
  .hero__act { margin-top: 18px; }
  .hero__prom { margin-top: 16px; gap: 8px 14px; flex-wrap: wrap; font-size: 13px; }

  .tiles { grid-template-columns: 1fr 1fr; }
  .tile { aspect-ratio: 4 / 3; }
  .car__arr { display: none; }
  .car__view { overflow: hidden; }
  .pick__row { grid-template-columns: 1fr; gap: 10px; padding: 16px 0; }
  .faq { grid-template-columns: 1fr; gap: 20px; }
  .faq__h { position: static; }
  .faq__h br { display: none; }
  .rvw { grid-template-columns: 1fr 1fr; }
  .reach { display: grid; }
  .reach__ph { height: 240px; width: 100%; object-fit: cover; }
  .reach__cap { position: static; transform: none; width: auto; margin: -40px 16px 0; }
  .band__in { padding: 36px 22px; }
  .band__h { font-size: 30px; }
  .band__sil { display: none; }

  .ftr__in { grid-template-columns: 1fr 1fr; gap: 26px 16px; }
  .ftr__brand { grid-column: 1 / -1; }
  .ftr__bot { flex-wrap: wrap; gap: 8px 16px; }

  /* catalog: the panel is a sheet */
  .cat__filters { display: inline-flex; margin: 4px 0 6px; }
  .cat__body { grid-template-columns: 1fr; }
  .panel { position: fixed; inset: 0; z-index: 75; display: none; background: var(--white); border-radius: 0; overflow: hidden; }
  .panel.open { display: flex; flex-direction: column; }
  .panel__top { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid var(--line); }
  .panel__top .layer__x { position: static; }
  .panel__in { flex: 1; overflow-y: auto; padding: 0 20px 20px; max-height: none; }
  .panel__bot { display: block; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
  .grid { grid-template-columns: 1fr 1fr; gap: 26px 12px; }
  .bar { flex-wrap: wrap; gap: 8px; }
  .card__buy { flex-wrap: wrap; gap: 8px; }
  .card__buy .btn { width: 100%; }
  .card__name { font-size: 15px; }

  /* product */
  .pd { grid-template-columns: 1fr; gap: 22px; }
  .pd__gal { position: static; grid-template-columns: 1fr; }
  .pd__thumbs { order: 2; display: flex; gap: 8px; overflow-x: auto; }
  .pd__th { flex: none; width: 64px; }
  .addons__row { grid-template-columns: 1fr 1fr; }
  .recs { grid-template-columns: 1fr 1fr; gap: 26px 12px; }
  .offers { grid-template-columns: 1fr; }
  .pbar { display: flex; }

  /* cart */
  .co { grid-template-columns: 1fr; gap: 26px; }
  .sum { position: static; }
  .opts--3, .opts--2, .opts--4 { grid-template-columns: 1fr; }
  .when { grid-template-columns: 1fr; }
  .fgrid { grid-template-columns: 1fr; }
  .co__addlist { grid-template-columns: 1fr; }
  .line { grid-template-columns: 64px 1fr auto; row-gap: 6px; }
  .line .qty { grid-column: 2; }
  .line__sum { grid-column: 3; grid-row: 1; }
  .line__del { grid-column: 3; }

  /* info pages */
  .ihead, .ihead--row { grid-template-columns: 1fr; gap: 18px; }
  .steps3, .facts3, .ztable, .pick2, .pays, .ct, .warr, .docs { grid-template-columns: 1fr; }
  .docs__nav { position: static; max-height: none; }
  .phero__in { padding-top: 16px; }
  .phero__card { width: auto; }
  .done__card { width: auto; }
  .layer__box { width: 100%; max-height: 92svh; overflow-y: auto; }
}

/* ---------- phone ≤ 639 ---------- */
@media (max-width: 639px) {
  :root { --pad: 16px; }
  .h1 { font-size: 28px; }
  .h2 { font-size: 24px; }
  .hero { --gcw: 56vw; --gch: 66vw; --gsw: 18vw; }
  .hero__h1 { font-size: 27px; }
  .tiles { grid-template-columns: 1fr; }
  .tile { aspect-ratio: 16 / 10; }
  .rvw { grid-template-columns: 1fr; }
  .ftr__in { grid-template-columns: 1fr; }
  .addons__row { grid-template-columns: 1fr; }
  .grid { gap: 22px 10px; }
  .card__one { font-size: 12.5px; }
  .price b { font-size: 16px; }
  .sec-head { flex-wrap: wrap; }
}
.addons__lead { margin: -28px 0 22px; color: var(--ink-2); font-size: calc(15 * var(--px)); }
/* util line: the two short client lines show only where they fit (accept_widths 14.10: 1440 overflowed by 8 px) */
@media (max-width: 1919px) { .util__more + .util__more { display: none; } }
@media (max-width: 1599px) { .util__more { display: none; } }
@media (min-width: 1200px) and (max-width: 1279px) { .util__cb, .util__tg { display: none; } }
/* accept_widths 14.10 r2: at 360 the long chip of a client category overflowed; small phone tool */
@media (max-width: 639px) {
  .chip, .chip--lg { white-space: normal; text-align: left; max-width: 100%; height: auto; min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
  .pick__row > *, .chips { min-width: 0; max-width: 100%; }
}
@media (max-width: 1199px) { .tool--tel { min-width: 40px; justify-content: center; } }
@media (max-width: 639px) {
  .rvs { columns: 1; }
  .rv { min-width: 0; }
  .rv__top { display: flex; flex-wrap: wrap; gap: 4px 12px; }
  .rv__top b { overflow-wrap: anywhere; }
}
@media (max-width: 1199px) { .rvs { columns: 1; } }
/* eye check r2 (14.10): on the tablet and phone the tile is a stack — photo on top, words under it (no overlap) */
@media (max-width: 1199px) {
  .tile { aspect-ratio: auto; display: flex; flex-direction: column-reverse; padding: 14px; gap: 12px; }
  .tile__txt, .tile--ph-r .tile__txt, .tile--ph-l .tile__txt, .tile--circles .tile__txt { position: static; max-width: none; gap: 6px; }
  .tile__ph, .tile--rect .tile__ph, .tile--arch .tile__ph, .tile--circles .tile__ph { position: relative; inset: auto; width: 100%; height: 200px; justify-content: center; gap: 12px; }
  .tile--circles .tile__ph img { width: auto; height: 100%; }
  .tile__name { font-size: 20px; }
  .pick2__deal .h2, .band__h { font-size: 24px; line-height: 1.15; }
}
@media (max-width: 1199px) { .car__track { grid-auto-columns: calc((100% - var(--gap)) / 2); gap: var(--gap); } }
@media (max-width: 639px) { .car__track { grid-auto-columns: 100%; } }