/* Versione mobile (sotto i 900 px): barra delle schede in basso come nelle app, ricerca a portata di pollice,
   barre in alto più basse, filtri a scomparsa, descrizioni di categoria accorciate, home più compatta,
   banner dei cookie piccolo. Sopra i 900 px questo file non cambia niente. */

.search-btn,.tabbar,.filtri-btn,.leggi-tutto{display:none}

@media (max-width:899px){
  /* --- barre in alto: una riga, testo più piccolo */
  .preview-bar{font-size:.72rem;padding:3px 8px}
  .topbar{font-size:.72rem;padding:4px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar .wrap{overflow:hidden;text-overflow:ellipsis}
  .header-in{height:56px;gap:4px}
  .logo img{height:28px;width:auto}

  /* --- ricerca: icona nell'header, la casella si apre sotto a tutta larghezza */
  .search-btn{display:grid;margin-left:auto}
  .cart-btn{margin-left:0}
  .header.cerca-aperta .search{display:block;position:absolute;left:0;right:0;top:100%;padding:8px 12px 10px;
    background:#fff;border-bottom:1px solid var(--line);box-shadow:0 8px 18px rgba(0,0,0,.08)}
  .header.cerca-aperta .search>button{top:12px;right:16px}
  .header.cerca-aperta .suggest{left:12px;right:12px}
  .search input{font-size:16px}          /* sotto i 16 px iPhone ingrandisce la pagina quando tocchi il campo */

  /* --- barra delle schede in basso */
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:45;
    background:rgba(255,255,255,.97);backdrop-filter:saturate(1.4) blur(8px);border-top:1px solid var(--line);
    padding:4px 0 calc(4px + env(safe-area-inset-bottom))}
  .tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:50px;
    background:none;border:0;color:var(--muted);font:inherit;font-size:.68rem;text-decoration:none;position:relative;cursor:pointer}
  .tabbar svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .tabbar [aria-current="page"],.tabbar .on{color:var(--navy);font-weight:600}
  .tabbar .badge{position:absolute;top:3px;left:calc(50% + 4px);min-width:17px;height:17px;font-size:.62rem;line-height:17px;padding:0 4px}
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom))}
  .wa-float{bottom:calc(74px + env(safe-area-inset-bottom));width:50px;height:50px;right:12px}
  .wa-float svg{width:26px;height:26px}
  body:has(.sticky-buy:not([hidden])) .wa-float{bottom:calc(140px + env(safe-area-inset-bottom))}
  .sticky-buy{bottom:calc(58px + env(safe-area-inset-bottom));padding:8px 12px}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom))}
  .page-checkout .tabbar{display:none}
  .page-checkout{padding-bottom:0}

  /* --- catalogo: descrizione accorciata, filtri a scomparsa */
  .list-head h1{font-size:1.45rem;margin-bottom:2px}
  .cat-desc.corta{max-height:5.2em;overflow:hidden;position:relative}
  .cat-desc.corta::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.4em;background:linear-gradient(rgba(255,255,255,0),#fff)}
  .leggi-tutto{display:inline-block;background:none;border:0;padding:4px 0;color:var(--accent);font:inherit;font-size:.9rem;font-weight:600;cursor:pointer}
  .filtri-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin:4px 0 12px;
    border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
  .filtri-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .filtri-btn .n{background:var(--navy);color:#fff;border-radius:999px;font-size:.72rem;padding:1px 7px}
  .filters.chiusi{display:none}
  .filters{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .filters label,.filters select{width:100%}
  .filters .f-compat{grid-column:1/-1}
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .chips::-webkit-scrollbar{display:none}

  /* --- home: i tre servizi scorrono di lato invece di occupare tre schermate */
  .pillars{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:0 16px 8px;margin:-28px -16px 0;scrollbar-width:none}
  .pillars::-webkit-scrollbar{display:none}
  .pillar{flex:0 0 78%;scroll-snap-align:start}
  .pillar-img{aspect-ratio:16/9;object-fit:cover;height:auto}
  .pillar h2{font-size:1.05rem}
  .pillar p{font-size:.86rem}

  /* --- scheda prodotto: titolo e prezzo più vicini alla foto */
  .g-main img{max-height:300px;object-fit:contain}

  /* --- cookie: riquadro piccolo in basso, sopra la barra delle schede */
  .ck{left:8px;right:8px;width:auto;bottom:calc(66px + env(safe-area-inset-bottom));padding:12px 14px;font-size:.84rem;max-height:60vh;overflow:auto}
  .ck p{margin:0 0 8px}
  .ck .ck-lungo{display:none}
}
@media (max-width:899px) and (prefers-reduced-motion:no-preference){
  .pillars{scroll-behavior:smooth}
}