/* ============================================================
   Телефон як застосунок (ppp-mobile.php, ppp-mobile.js) — 02.10.2026
   Нижня панель на 5 кнопок, аркуш каталогу, власне вікно пошуку,
   шапка без дублів. Панель — лише ≤900px (там, де була стара).
   Кольори «кузні»: темна панель зі швом-градієнтом, як під шапкою;
   активна кнопка — помаранчева «таблетка» під іконкою.
   ============================================================ */

:root{--tbar-h:64px}
.tbar,.csheet,.psheet-bg{display:none}

@media (max-width:900px){
  /* ---------- відступ знизу: стара панель давала 64px усім сторінкам, нова — лише там, де вона є ---------- */
  body.ppp{padding-bottom:0}
  body.ppp.ppp-tbar-on{padding-bottom:calc(var(--tbar-h) + env(safe-area-inset-bottom))}

  /* ---------- нижня панель ---------- */
  .tbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
    height:calc(var(--tbar-h) + env(safe-area-inset-bottom));padding:0 4px env(safe-area-inset-bottom);
    background:rgba(16,19,25,.97);-webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px);
    box-shadow:0 -12px 30px -14px rgba(16,19,25,.55)}
  /* шов згори — та сама смужка-градієнт, що під шапкою */
  .tbar::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--cta);pointer-events:none}
  body.ppp .tbar__i,body.ppp .tbar__i:hover,body.ppp .tbar__i:focus,body.ppp .tbar__i:active{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    min-width:0;height:var(--tbar-h);margin:0;padding:3px 0 0;border:0;border-radius:0;background:transparent;box-shadow:none;
    color:var(--muted-dark);font-family:var(--f-t);font-size:11px;font-weight:600;line-height:1.1;letter-spacing:.01em;
    text-transform:none;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:0}
  .tbar__ic{position:relative;display:grid;place-items:center;width:54px;height:30px;border-radius:999px;transition:background .2s,color .2s,transform .15s}
  .tbar__ic svg{display:block}
  .tbar__ic--mark .tbar__mark{width:22px;height:26px}
  .tbar__t{max-width:100%;padding:0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.ppp .tbar__i.is-on,body.ppp .tbar__i[aria-expanded="true"]{color:#fff}
  .tbar__i.is-on .tbar__ic,.tbar__i[aria-expanded="true"] .tbar__ic{background:rgba(255,106,26,.18);color:var(--flame)}
  /* поки відкрито аркуш, підсвічена лише його кнопка */
  html.ppp-sheet-open body.ppp .tbar__i.is-on:not([aria-expanded="true"]){color:var(--muted-dark)}
  html.ppp-sheet-open .tbar__i.is-on:not([aria-expanded="true"]) .tbar__ic{background:transparent;color:inherit}
  .tbar__i:active .tbar__ic{transform:scale(.92)}
  body.ppp .tbar__i:focus-visible .tbar__ic{outline:2px solid var(--amber);outline-offset:2px}
  /* лічильник кошика (той самий елемент, що в шапці; фрагменти WooCommerce можуть поміняти йому клас — тому за атрибутом) */
  body.ppp .tbar [data-ppp-cart-count]{position:absolute;top:-4px;left:calc(50% + 5px);right:auto;display:block;min-width:18px;height:18px;margin:0;padding:0 5px;
    border-radius:999px;background:var(--flame);color:#fff;font-family:var(--f-t);font-style:normal;font-size:11px;font-weight:700;line-height:18px;text-align:center;
    box-shadow:0 0 0 2px var(--ink-900)}
  body.ppp .tbar [data-ppp-cart-count][hidden]{display:none}

  /* ---------- кнопка «Зв’язок», «нагору», липка «Купити», тост — над панеллю ---------- */
  body.ppp.ppp-tbar-on .dock{bottom:calc(var(--tbar-h) + 14px + env(safe-area-inset-bottom))}
  body.ppp.ppp-tbar-on:has(.stickybuy.is-on) .dock{bottom:calc(var(--tbar-h) + 73px + env(safe-area-inset-bottom))}
  body.ppp:not(.ppp-tbar-on) .dock{bottom:calc(16px + env(safe-area-inset-bottom))}
  body.ppp.ppp-tbar-on .stickybuy{bottom:calc(var(--tbar-h) + env(safe-area-inset-bottom))}
  body.ppp:not(.ppp-tbar-on) .stickybuy{bottom:0;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  body.ppp.ppp-tbar-on .toast{left:16px;right:16px;bottom:calc(var(--tbar-h) + 12px + env(safe-area-inset-bottom))}
  /* наприкінці сторінки кнопкам «Зв’язок» і «нагору» є де стати — не на способах оплати в підвалі */
  body.ppp.ppp-tbar-on .ftr{padding-bottom:128px}
  body.ppp:not(.ppp-tbar-on) .ftr{padding-bottom:96px}

  /* ---------- шапка: без дублів нижньої панелі (каталог, кабінет, кошик), поле пошуку відкриває вікно ---------- */
  body.ppp .hdr .hdr__cat-btn,
  body.ppp .hdr .hdr__act--cart,
  body.ppp .hdr a.hdr__act[href*="/cabinet"],
  body.ppp .hdr a.hdr__act[href*="/my-account"]{display:none}
  body.ppp .hdr__search.is-trigger,body.ppp .hdr__search.is-trigger input{cursor:pointer}
  body.ppp .hdr__search.is-trigger .hdr__search-go{display:none}
  body.ppp .hdr__search.is-trigger{padding-right:14px}
  /* перемикач мов: зони натискання були 34×20 */
  body.ppp .langsw--mob .langsw__i{display:inline-grid;place-items:center;min-width:36px;min-height:32px;padding:0 6px}
  /* рядок розділів під шапкою: посилання були 30px заввишки */
  body.ppp .hdr__cats a{padding:11px 0}
  body.ppp .hdr__cats a::after{bottom:4px}

  /* ---------- підвал: зони натискання 40px ---------- */
  body.ppp .ftr__col ul{gap:0}
  body.ppp .ftr__col ul a{min-height:40px;padding:8px 0}
  body.ppp .ftr__col .ftr__phone{min-height:44px;margin-bottom:10px}
  body.ppp .ftr__col .ftr__pill{height:40px}
}

/* ============================================================
   Аркуш каталогу (кнопка «Каталог» панелі)
   ============================================================ */
@media (max-width:900px){
  .psheet-bg{display:block;position:fixed;inset:0;z-index:140;background:rgba(10,12,16,.55);opacity:0;transition:opacity .25s ease}
  .psheet-bg.is-open{opacity:1}
  .psheet-bg[hidden]{display:none}
  html.ppp-sheet-cat .tbar{z-index:160}

  .csheet{display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:calc(var(--tbar-h) + env(safe-area-inset-bottom));z-index:150;
    max-height:calc(100vh - var(--tbar-h) - 48px);max-height:calc(100dvh - var(--tbar-h) - env(safe-area-inset-bottom) - 48px);
    background:var(--paper);border-radius:24px 24px 0 0;box-shadow:0 -24px 60px -12px rgba(10,12,16,.5);outline:0;overflow:hidden;
    transform:translateY(calc(100% + var(--tbar-h) + 40px));transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  .csheet.is-open{transform:none}
  .csheet[hidden]{display:none}
  body.ppp .csheet:focus,body.ppp .csheet:focus-visible{outline:0}
  .csheet__grab{flex:none;width:44px;height:5px;margin:10px auto 0;border-radius:5px;background:#C9CFD8}
  .csheet__head{flex:none;display:flex;align-items:center;gap:8px;padding:8px 12px 12px 20px;border-bottom:1px solid var(--line);touch-action:none}
  body.ppp .csheet__h{flex:1 1 auto;min-width:0;margin:0;font-family:var(--f-d);font-weight:800;font-size:22px;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
  body.ppp .csheet__all{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 6px;font-size:14px;font-weight:600;color:var(--flame);white-space:nowrap}
  body.ppp .csheet__x,body.ppp .csheet__x:hover,body.ppp .csheet__x:focus{flex:none;display:grid;place-items:center;width:40px;height:40px;margin:0;padding:0;
    border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);box-shadow:none}
  .csheet__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:14px 16px 22px}

  /* «Підбір за 30 секунд» — темна плашка з вогником, як острови на головній */
  body.ppp .csheet__wiz{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:14px;border-radius:18px;color:#fff;
    background:radial-gradient(120% 160% at 100% 0,rgba(255,106,26,.32),transparent 58%),var(--ink-900)}
  .csheet__wiz-ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--cta);color:var(--ink-900)}
  .csheet__wiz-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
  .csheet__wiz-t b{font-family:var(--f-d);font-weight:700;font-size:15px;line-height:1.25;color:#fff}
  .csheet__wiz-t small{font-size:12.5px;line-height:1.4;color:var(--muted-dark)}
  .csheet__wiz > svg{flex:none;color:var(--amber)}

  .csheet__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
  .ccat{margin:0;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
  body.ppp .ccat__row{display:flex;align-items:center;gap:12px;min-height:68px;padding:8px 14px 8px 8px;color:var(--ink);-webkit-tap-highlight-color:transparent}
  body.ppp .ccat__row:active{background:var(--paper)}
  .ccat__img{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:var(--paper);overflow:hidden}
  body.ppp .ccat__img img{width:100%;height:100%;max-width:none;object-fit:contain;padding:5px;mix-blend-mode:multiply}
  .ccat__n{flex:1 1 auto;min-width:0;font-family:var(--f-d);font-weight:600;font-size:15px;line-height:1.25;overflow-wrap:break-word}
  .ccat__row > svg{flex:none;color:var(--secondary)}
  .ccat__kids{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 12px 72px}
  body.ppp .ccat__kids a{display:inline-flex;align-items:center;min-height:40px;padding:0 13px;border-radius:999px;background:var(--paper);
    border:1px solid var(--line);font-size:13.5px;font-weight:500;line-height:1.2;color:var(--ink)}
  body.ppp .ccat__kids a:active{border-color:var(--flame);color:var(--flame)}

  .csheet__more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0 0}
  body.ppp .csheet__more a{display:flex;align-items:center;gap:10px;min-height:50px;padding:0 14px;border-radius:14px;background:#fff;
    border:1px solid var(--line);font-size:14px;font-weight:600;color:var(--ink)}
  .csheet__more svg{flex:none;color:var(--flame)}
  .csheet__more span{min-width:0;overflow-wrap:anywhere;line-height:1.2}

  html.ppp-sheet-open,html.ppp-sheet-open body{overflow:hidden}
}
/* на планшеті аркуш не на всю ширину — по центру, як картка */
@media (min-width:600px) and (max-width:900px){
  .csheet{max-width:640px;margin:0 auto}
}
/* на телефоні підрозділи — під фото, щоб два чипи вміщались в один ряд */
@media (max-width:480px){
  .ccat__kids{padding-left:9px}
}

/* ============================================================
   Вікно пошуку (кнопка «Пошук» панелі й поле в шапці)
   ============================================================ */
.ssheet{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;background:var(--paper)}
.ssheet[hidden]{display:none}
html.ppp-sheet-search,html.ppp-sheet-search body{overflow:hidden}
.ssheet__bar{position:relative;flex:none;display:flex;align-items:center;gap:6px;margin:0;padding:calc(10px + env(safe-area-inset-top)) 12px 12px 6px;background:#fff}
.ssheet__bar::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:var(--cta);z-index:1}
body.ppp .ssheet__back,body.ppp .ssheet__back:hover,body.ppp .ssheet__back:focus{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;
  border:0;border-radius:12px;background:transparent;color:var(--ink);box-shadow:none;cursor:pointer}
body.ppp .ssheet__back:active{background:var(--paper)}
.ssheet__field{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;height:48px;margin:0;padding:0 6px 0 14px;
  border:1.5px solid var(--line);border-radius:var(--r-inp);background:var(--paper);color:var(--secondary);transition:border-color .2s,box-shadow .2s,background .2s}
.ssheet__field:focus-within{border-color:var(--flame);background:#fff;box-shadow:0 0 0 3px rgba(255,106,26,.15)}
.ssheet__field > svg{flex:none}
body.ppp .ssheet__field input[type=search],body.ppp .ssheet__field input[type=search]:focus{flex:1 1 auto;min-width:0;width:auto;height:100%;margin:0;padding:0;
  border:0;border-radius:0;outline:0;background:transparent;box-shadow:none;font-family:var(--f-t);font-size:16px;color:var(--ink);-webkit-appearance:none;appearance:none}
.ssheet__field input[type=search]::placeholder{color:#8B94A5;opacity:1}
.ssheet__field input[type=search]::-webkit-search-cancel-button{display:none}
body.ppp .ssheet__clear,body.ppp .ssheet__clear:hover,body.ppp .ssheet__clear:focus{flex:none;display:grid;place-items:center;width:36px;height:36px;margin:0;padding:0;
  border:0;border-radius:10px;background:#E9ECF1;color:var(--ink);box-shadow:none;cursor:pointer}
body.ppp .ssheet__clear[hidden]{display:none}
.ssheet__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:8px 16px calc(28px + env(safe-area-inset-bottom))}

.sq-sec{margin:20px 0 0}
.sq-sec__h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
body.ppp .sq-sec__h h3{margin:0;font-family:var(--f-m);font-weight:500;font-size:11.5px;letter-spacing:.14em;line-height:1.3;text-transform:uppercase;color:var(--secondary)}
body.ppp .sq-link,body.ppp .sq-link:hover,body.ppp .sq-link:focus{min-height:36px;margin:0;padding:0 2px;border:0;background:none;box-shadow:none;
  font-family:var(--f-t);font-size:13px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--flame);cursor:pointer}
.sq-chips{display:flex;flex-wrap:wrap;gap:8px}
body.ppp .sq-chip,body.ppp .sq-chip:hover,body.ppp .sq-chip:focus{display:inline-flex;align-items:center;gap:7px;min-height:40px;margin:0;padding:0 15px;
  border:1px solid var(--line);border-radius:999px;background:#fff;box-shadow:none;font-family:var(--f-t);font-size:14px;font-weight:500;line-height:1.2;
  text-transform:none;letter-spacing:0;color:var(--ink);cursor:pointer}
body.ppp .sq-chip:active{border-color:var(--flame);color:var(--flame)}
.sq-chip svg{flex:none;color:var(--secondary)}
.sq-cats{display:flex;flex-wrap:wrap;gap:8px}
body.ppp .sq-cat{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:12px;background:var(--ink-900);
  font-size:14px;font-weight:600;line-height:1.2;color:#fff}
.sq-cat i{font-style:normal;font-family:var(--f-m);font-size:11px;color:var(--amber)}
.sq-list{display:flex;flex-direction:column;gap:8px}
body.ppp .sq-row{display:flex;align-items:center;gap:12px;padding:8px 12px 8px 8px;border:1px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);
  -webkit-tap-highlight-color:transparent}
body.ppp .sq-row:active{border-color:var(--flame)}
.sq-row__img{flex:none;display:grid;place-items:center;width:60px;height:60px;border-radius:12px;background:#fff;border:1px solid var(--line);overflow:hidden}
body.ppp .sq-row__img img{width:100%;height:100%;max-width:none;object-fit:contain;padding:4px}
.sq-row.is-out .sq-row__img img{filter:grayscale(1);opacity:.6}
.sq-row__b{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:5px}
.sq-row__n{font-size:14px;font-weight:500;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sq-row__m{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
.sq-row__m b{font-family:var(--f-d);font-weight:700;font-size:15px;white-space:nowrap}
.sq-row__m i{font-style:normal;font-size:11.5px;font-weight:600;line-height:1.5;padding:1px 8px;border-radius:999px;background:var(--paper);color:var(--secondary);white-space:nowrap}
.sq-row__m i.is-in{background:#E9F9EF;color:#15803D}
.sq-row__m small{font-family:var(--f-m);font-size:11px;letter-spacing:.04em;color:var(--secondary)}
body.ppp .sq-art{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px;border:1px solid var(--line);border-radius:16px;background:#fff;
  font-size:14px;font-weight:500;line-height:1.35;color:var(--ink)}
body.ppp .sq-art:active{border-color:var(--flame)}
.sq-art > svg{flex:none;color:var(--flame)}
.ssheet mark{padding:0 1px;border-radius:3px;background:rgba(255,197,61,.55);color:inherit}
.sq-cat mark{background:rgba(255,197,61,.3);color:#fff}
body.ppp .sq-all{display:flex;width:100%;margin:16px 0 0}
.sq-note{margin:18px 2px 0;font-size:15px;line-height:1.55;color:var(--secondary)}
.sq-note b{color:var(--ink);font-weight:600}

@media (max-width:900px){
  .ssheet.is-open{animation:pppSheetIn .22s cubic-bezier(.2,.8,.2,1)}
}
@keyframes pppSheetIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* на великому екрані (якщо вікно відкрили) — по центру */
@media (min-width:901px){
  .ssheet{inset:40px auto auto 50%;transform:translateX(-50%);width:min(680px,calc(100vw - 48px));max-height:calc(100vh - 80px);border-radius:20px;
    box-shadow:0 30px 80px rgba(16,19,25,.3);overflow:hidden}
}

/* ============================================================
   Перевірка мобільної версії 02.10.2026 — точкові правки
   ============================================================ */

/* Перший екран головної: колонка 1fr = minmax(auto,1fr) роздувалась під мінімальну ширину сцени
   (min-height 300px × aspect-ratio 5/4 = 375px) — текст і кнопки обрізались справа на 360–390px */
@media (max-width:1100px){
  body.ppp .hero__in{grid-template-columns:minmax(0,1fr)}
  body.ppp .hero__in > *{min-width:0}
}

/* Плитки розділів (головна «Стенд майстра», /shop/): Unbounded 22px у вузьких колонках рвав слова
   посередині («Паяльн-ики», «Автотов-ари»), на планшеті назви налазили на фото, біля першої плитки
   лишалась дірка (друга плитка — на дві колонки). */
@media (max-width:1100px){
  body.ppp .cattiles{grid-auto-flow:dense}
  body.ppp .cattile__name{overflow-wrap:break-word;word-break:normal;hyphens:manual}
  body.ppp .cattile__go{flex:0 0 32px;width:32px;height:32px}
  body.ppp .cattiles > .cattile > .cattile__go{display:none}
}
@media (min-width:641px) and (max-width:1100px){
  body.ppp .cattile{padding:18px 16px 18px 20px}
  body.ppp .cattile__name{font-size:clamp(17px,2.4vw,21px)}
  body.ppp .cattile__img{flex:0 0 96px;height:96px}
  body.ppp .cattile__img img{max-height:96px}
}
@media (max-width:640px){
  body.ppp .cattiles{grid-template-columns:minmax(0,1fr);gap:10px}
  body.ppp .cattile,body.ppp .cattile--wide{grid-column:auto;flex-direction:row;align-items:center;gap:12px;min-height:0;padding:14px 12px 14px 18px}
  body.ppp .cattile__img{order:2;flex:0 0 84px;height:76px}
  body.ppp .cattile__img img{max-height:76px}
  body.ppp .cattile__name{font-size:clamp(15px,4.6vw,18px);margin:0 0 4px}
  body.ppp .cattile__txt .cattile__go{margin-top:10px}
}

/* «Фіскальний чек» на оформленні: span із display:inline-flex розкладав назву й текст у дві колонки,
   а значок переносився окремим рядком */
body.ppp .ppp-receipt{flex-wrap:nowrap;align-items:flex-start;gap:10px}
body.ppp .ppp-receipt > svg{flex:0 0 auto;margin-top:2px}
body.ppp .ppp-receipt > span{display:block;min-width:0;line-height:1.5}

/* «Гарантія»: кроки «Як повернути» мали зайвий відступ зліва від Astra (ol) */
body.ppp ol.wsteps{margin-left:0;margin-right:0;padding:0}

/* Зони натискання менші за 40px (телефон і планшет) */
@media (max-width:900px){
  body.ppp .sec__more,body.ppp .artrow__h a{min-height:40px}
  body.ppp .opt{height:40px}
  body.ppp .achip{height:40px}
  body.ppp .cvar{min-height:32px}
  body.ppp .cvars--color .cvar{width:32px}
  body.ppp .hero__play{width:36px;height:36px}
  body.ppp .kit .kit__rest summary{min-height:40px;padding-top:6px}
  body.ppp .lg-print{min-height:40px}
  body.ppp .nav-links a{display:inline-flex;align-items:center;min-height:40px}
  body.ppp.woocommerce-cart .ppp-xs__add{height:40px}
  body.ppp.woocommerce-cart .ppp-cart-back{min-height:40px}
  body.ppp.woocommerce-cart .ppp-step .ppp-step__b{width:40px}
}
@media (max-width:640px){
  /* підвал: «Каталог» і «Інформація» — по два в ряд, щоб 40-піксельні посилання не розтягнули його вдвічі */
  body.ppp .ftr__col:not(.ftr__col--brand):not(.ftr__col--contacts) ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
  body.ppp .ftr__col:not(.ftr__col--brand):not(.ftr__col--contacts) ul a{line-height:1.3}
}

/* «Головна»: справжній знак (темний пазл) на темній панелі — на світлій плашці, інакше зливався (02.10.2026) */
body.ppp .tbar__ic--mark .tbar__mark{background:#fff;border-radius:7px;padding:2px 3px;box-sizing:content-box;object-fit:contain;
  box-shadow:0 0 0 1px rgba(255,255,255,.08)}