/* ============================================================
   MOBILE HEADER — targets the storefront's real markup

       header > .header-inner
                  .brand
                  .location-pill
                  .search-wrap  (with .suggest-box inside)
                  .header-icons

   On a phone all four were sharing one flex row, so the search
   box was squeezed to a sliver on the right and its suggestion
   list followed it off the edge of the screen.

   Layout on phones:
       row 1   logo ............ icons
       row 2   search, full width
       row 3   delivery location
   ============================================================ */

@media (max-width: 767px) {

  .header-inner {
    flex-wrap: wrap !important;
    row-gap: 8px;
    padding: 10px 12px 8px !important;
  }

  /* Row 1 */
  .header-inner .brand {
    order: 1;
    font-size: 19px !important;
    flex: 0 0 auto;
  }
  .header-inner .header-icons {
    order: 2;
    margin-left: auto;
    gap: 14px !important;
  }
  .header-inner .icon-btn { font-size: 19px !important; }

  /* Row 2 — the marked space under the logo */
  .header-inner .search-wrap {
    order: 3;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .header-inner .search-bar {
    padding: 11px 14px !important;
    border-radius: 12px !important;
  }
  .header-inner .search-bar input {
    font-size: 16px !important;   /* 16px stops iOS zooming on focus */
  }
  .header-inner .search-extra { display: block !important; }

  /* Suggestion list now spans the full width under the box */
  .header-inner .suggest-box {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: 65vh !important;
    border-radius: 12px !important;
  }

  /* Row 3 — delivery location, slim */
  .header-inner .location-pill {
    order: 4;
    display: flex !important;
    align-items: center;
    gap: 5px;
    flex: 0 0 100%;
    font-size: 12px !important;
    padding: 0 2px;
  }
  .header-inner .location-pill strong {
    display: inline !important;
    font-size: 12.5px !important;
  }

  /* Product grid: two per row */
  .browse-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 9px !important; }
  .scroller .pcard { width: 44vw !important; min-width: 44vw; }
}

/* ============================================================
   SEARCH SUGGESTION ROWS — proper thumbnails, not colour blocks
   ============================================================ */
.suggest-item { display:flex; align-items:center; gap:10px; padding:7px 0 !important; }
.suggest-item .sg-thumb {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 8px; overflow: hidden;
  background: #F4F7F5;
  display: flex; align-items: center; justify-content: center;
}
.suggest-item .sg-thumb img { width:100%; height:100%; object-fit:contain; }
.suggest-item .sg-thumb .ph-box { width:100% !important; height:100% !important; }
.suggest-item .ph-box .ph-ic { width: 20px !important; height: 20px !important; }
.suggest-item .ph-box .ph-word { display: none !important; }
.suggest-item .sg-text { flex:1; min-width:0; line-height:1.3; }
.suggest-item .sg-name {
  font-size: 13px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.suggest-item .sg-price { font-size: 12px; color: var(--teal, #0F5257); font-weight: 700; }