/* PocoPrint — доведення мобільної версії.
   Усе під @media: десктоп не чіпаємо. Нічого потрібного покупцю не ховаємо —
   лише те, що дублюється (слово «PocoPrint» поруч із власною іконкою). */

/* Логотипи платіжних систем у футері стояли в один нерозривний рядок
   і на вузькому екрані вилазили за край. */
.poco-footer .poco-pay{flex-wrap:wrap;row-gap:6px}

/* ── найвужчі екрани: 320–400 px ────────────────────────────── */
@media (max-width:400px){
  /* нижня смужка головної: англійською «Choose a printer» не вміщалось */
  .poco-mobile-bar{gap:8px;padding-inline:12px}
  .poco-mobile-bar .poco-btn{flex:1 1 0;min-width:0;padding-inline:10px;font-size:14px}

  /* БЛОКЕР: бургер + логотип + три іконки не вміщались у 320 px, і кнопка
     кошика повністю виходила за екран. Слово поруч з іконкою-принтером
     прибираємо — сам знак лишається клікабельним і веде на головну. */
  .poco-logo span{display:none}
  .poco-header__in{gap:8px}
  .poco-header__tools{gap:8px}
  .poco-btn{padding-inline:18px}
  .poco-hero__cta .poco-btn{width:100%}

  /* заголовок на вузькому екрані має бути 28–32 px, а не 38 */
  h1{font-size:30px}
  .poco-hero__title{padding:14px 14px}

}

/* ── телефони й планшети ────────────────────────────────────── */
@media (max-width:900px){

  /* ── цілі дотику ──────────────────────────────────────────── */
  /* у смужці оголошень посилання було 14 px заввишки */
  .poco-announce a{display:inline-flex;align-items:center;min-height:40px;padding-inline:2px}

  /* перемикач мов */
  .poco-lang{gap:2px}
  .poco-lang__i{min-width:44px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;padding-inline:10px}

  /* текстові кнопки-посилання (підкреслений текст висотою 15 px) */
  .poco-btn--ghost{min-height:44px;display:inline-flex;align-items:center;padding-block:10px}

  /* навігаційні крихти */
  .poco-crumbs a,.woocommerce-breadcrumb a{display:inline-block;padding-block:9px}

  /* посилання в тексті сторінок: на «Контактах» це телефон, пошта, Telegram */
  .poco-post li a{display:inline-block;padding-block:9px}

  /* ── форми ────────────────────────────────────────────────── */
  /* Safari на iPhone зумить сторінку, якщо шрифт поля менший за 16 px.
     Тому саме 16, а не 15 — це не косметика, а поведінка браузера. */
  .poco-field input,.poco-field select,.poco-field textarea,
  .poco-legal .form-row input,.poco-legal .form-row select,
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row textarea,
  .woocommerce form .form-row select,
  .poco-chat__compose textarea,
  .poco-dock__form input,.poco-dock__form textarea,
  .poco-filters input,.poco-filters select,
  select.orderby,input[type=search],input[type=tel],input[type=email],input[type=text],input[type=number]{font-size:16px}

  select.orderby,.woocommerce-ordering select.orderby{min-height:44px;padding:10px 12px;border-radius:var(--r-input)}

  /* прапорці фільтрів: ціль — увесь рядок, а не квадратик 18 px */
  .poco-filters__group label{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
  .poco-filters__group input[type=checkbox]{width:22px;height:22px;flex:none;accent-color:var(--poco-yellow)}

  /* ── сітки товарів ────────────────────────────────────────── */
  /* `1fr` не дозволяє колонці стати вужчою за вміст картки, тому на
     порожньому кошику сітка розсувалась до 341 px у контейнері 280 px.
     minmax(0,1fr) знімає це обмеження. */
  .poco-products,.poco-products--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .poco-card,.poco-articles>*,.poco-scenarios>*,.poco-tiers>*{min-width:0}
  .poco-card__title,.poco-card__meta{overflow-wrap:anywhere}

  /* ── дрібний текст ────────────────────────────────────────── */
  p.poco-mono,.poco-card__meta{font-size:13px}
  /* службові мітки лишаємо дрібними — вони задумані як «печатка» */
  .poco-eyebrow,.poco-badge,.poco-steps-bar li{font-size:11.5px}
}

/* ── фіксовані елементи не мають накладатись ────────────────── */
/* На головній унизу є смужка «Папір / Обрати принтер» (.poco-mobile-bar),
   і кнопка звʼязку сідала просто на неї. */
@media (max-width:720px){
  body.home .poco-dock{bottom:calc(88px + env(safe-area-inset-bottom))}
  body.home .poco-install{bottom:calc(88px + env(safe-area-inset-bottom))}
}