/* Phone layout for the shop pages (js/phone-bar.js). Loaded after each page's own styles so it wins on phones only. */
#phone-bar, #phone-sheet { display: none; }

@media (max-width: 768px) {
  /* A calm, single-row top bar: the menu moves to the bottom of the screen. */
  body.has-phone-bar header { padding: 0.55rem 1rem; height: 52px; box-sizing: border-box; display: flex; align-items: center; }
  body.has-phone-bar header nav { width: 100%; }
  body.has-phone-bar header nav ul, body.has-phone-bar .nav-icons { display: none !important; }
  body.has-phone-bar .logo { font-size: 1.15rem; white-space: nowrap; letter-spacing: .02em; }
  body.has-phone-bar { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  body.has-phone-bar main, body.has-phone-bar .main-content { padding-left: 12px; padding-right: 12px; }
  body.has-phone-bar .main-content { margin: 12px auto; padding-top: 12px; }

  /* Hero: smaller, so products start on the first screen. */
  body.has-phone-bar .hero { padding: 1.6rem 1rem; }
  body.has-phone-bar .hero h1 { font-size: 1.5rem; margin: 0 0 .4rem; }
  body.has-phone-bar .hero p { margin: 0; }
  body.has-phone-bar .search-container { margin: 12px 0 8px; }
  body.has-phone-bar .search-container #product-search-input { width: 100%; box-sizing: border-box; }

  /* Category chips: one scrolling row under the top bar, never a tall block that covers the products. */
  body.has-phone-bar .category-bar {
    flex-wrap: nowrap !important; overflow-x: auto; justify-content: flex-start !important; gap: .5rem !important;
    position: sticky !important; top: 52px !important; z-index: 900 !important; margin: 0 -12px 12px !important; padding: .5rem 12px !important;
    border-radius: 0 !important; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  body.has-phone-bar .category-bar::-webkit-scrollbar { display: none; }
  body.has-phone-bar .category-bar button { flex: 0 0 auto; margin: 0 !important; padding: .45rem 1rem !important; font-size: .9rem !important; white-space: nowrap; }

  /* Products: two per row, buttons the same width. */
  body.has-phone-bar .products h2 { font-size: 1.4rem; margin: .5rem 0 .75rem; }
  body.has-phone-bar .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .75rem !important; }
  body.has-phone-bar .product-item { min-height: 0 !important; padding: .6rem .5rem .8rem !important; min-width: 0; }
  body.has-phone-bar .product-item img.main-img { height: 110px !important; max-width: 100% !important; width: 100%; object-fit: cover; }
  body.has-phone-bar .product-item h3 { font-size: .95rem; margin: .4rem 0 .2rem; overflow-wrap: anywhere; }
  body.has-phone-bar .product-item .add-to-cart-btn, body.has-phone-bar .product-item .rate-seller-btn { display: block; width: 100%; box-sizing: border-box; margin: .35rem 0 0; }
  body.has-phone-bar .product-item .rate-seller-btn { font-size: .78rem; padding: .45rem .3rem; }

  /* The support chat bubble rides above the bottom bar. */
  body.has-phone-bar #hg-chat-widget { bottom: calc(80px + env(safe-area-inset-bottom)) !important; right: 14px !important; }

  /* Bottom bar. Fixed to the edge, above the iPhone home bar. */
  #phone-bar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050; background: rgba(255,255,255,.97);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid #dfe3e8;
    padding-bottom: env(safe-area-inset-bottom); transform: translateZ(0);
  }
  #phone-bar ul { list-style: none; margin: 0 auto; padding: 0 4px; max-width: 560px; display: flex; }
  #phone-bar li { flex: 1 1 0; min-width: 0; display: flex; }
  .pb-tab {
    position: relative; flex: 1; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 6px 2px; background: none; border: 0; color: #6b7280; font: 600 11px/1 Arial, sans-serif; text-decoration: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .pb-tab svg { width: 22px; height: 22px; }
  .pb-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pb-tab[aria-current="page"], .pb-tab[aria-expanded="true"] { color: #007bff; }
  .pb-badge { position: absolute; top: 4px; left: 54%; min-width: 16px; padding: 1px 4px; border-radius: 9px; background: #dc3545; color: #fff; font: 700 10px/14px Arial, sans-serif; text-align: center; }
  .pb-tab:focus-visible, .ps-item:focus-visible { outline: 2px solid #007bff; outline-offset: -2px; }

  /* "More" sheet. */
  #phone-sheet:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 1060; }
  .ps-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); border: 0; padding: 0; }
  .ps-panel {
    position: absolute; left: 0; right: 0; bottom: 0; max-height: 80vh; max-height: 80dvh; overflow-y: auto; overscroll-behavior: contain; background: #fff;
    border-radius: 20px 20px 0 0; padding: 12px 14px calc(84px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 40px rgba(0,0,0,.25);
  }
  .ps-grip { display: block; width: 44px; height: 5px; border-radius: 3px; background: #cfd4da; margin: 0 auto 10px; }
  .ps-title { margin: 0 4px 4px; font-size: 1.1rem; font-weight: 800; color: #222; }
  .ps-who { margin: 0 4px 10px; font-size: .85rem; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ps-grid { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .ps-foot { margin-top: 12px; display: grid; gap: 8px; }
  .ps-item {
    width: 100%; min-height: 78px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 10px 6px;
    border-radius: 14px; background: #f1f3f5; border: 1px solid #e3e6ea; color: #333; font: 600 12.5px/1.2 Arial, sans-serif; text-align: center; text-decoration: none; cursor: pointer; box-sizing: border-box;
  }
  .ps-item svg { width: 22px; height: 22px; }
  .ps-item[aria-current="page"] { color: #007bff; border-color: #9ec5fe; }
  .ps-wide { flex-direction: row; justify-content: center; min-height: 50px; gap: 10px; font-size: 14px; }
  .ps-danger { background: #fdecee; border-color: #f5c2c7; color: #b02a37; }
  body.phone-sheet-open { overflow: hidden; }
}