/* ============================================
   shop-phone.css — Phone-only Sticker Shop header
   Everything here is scoped to max-width:768px and touches only markup
   introduced for the phone header/floating tab pill/filter sheet.
   Desktop (#shop-header-bar, .shop-filter-panel, .shop-mobile-filter-panel)
   is untouched — see shop.css / shop-header.css.
   ============================================ */

@media (max-width: 768px) {

  /* ---- Phone header: search field between hamburger and basket ---- */
  #mobile-header.shop-mode {
    gap: 8px;
  }

  /* Search field used to be the only flex-grow item (flex:1), so it consumed
     100% of the leftover row space (S = header content width − 40px hamburger
     clearance − 8px gap − ~30px basket button). Shrinking it to 85% of S and
     giving the other 15% to spacer pseudo-elements (7.5% each) — instead of
     adding fixed pixels — keeps the 85/7.5/7.5 split exact at any viewport
     width, since flex-grow always divides the SAME leftover pool S in these
     ratios. ::before sits before the search field (adding to its existing
     fixed 40px margin, which stays as the hamburger's safety clearance);
     ::after sits after the basket button, pushing it in from the edge. */
  #mobile-header.shop-mode::before,
  #mobile-header.shop-mode::after {
    content: '';
    flex-grow: 0.075;
    flex-shrink: 0;
    flex-basis: 0%;
  }

  /* #mobile-hamburger (mobile.css) is position:absolute with z-index:auto.
     .shop-phone-search-wrap below is also positioned (relative, for its
     absolutely-positioned clear/filter children) and comes later in the DOM,
     so without an explicit z-index here it paints on top of — and hides —
     the hamburger (CSS2.1 painting order: same-level positioned descendants
     stack in tree order). Bump the hamburger's stack level so it always
     wins regardless of DOM order, and keep the search field clear of its
     tap target with margin-left. */
  #mobile-header.shop-mode #mobile-hamburger {
    z-index: 2;
  }

  .shop-phone-search-wrap {
    position: relative;
    flex-grow: 0.85;
    flex-shrink: 0;
    flex-basis: 0%;
    min-width: 0;
    margin-left: 40px;
    display: flex;
    align-items: center;
  }

  .shop-phone-search-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e5e5e5;
    background: #f4f4f5;
    border-radius: 999px;
    padding: 8px 68px 8px 14px;
    font-family: 'Poppins', sans-serif;
    outline: none;
    /* Safety net only: if a placeholder still doesn't fit (narrow phone or a
       future longer label), it ends in an ellipsis instead of cutting off
       mid-word. Typed text (16px, set inline on the element for iOS zoom)
       is unaffected — this only changes how overflow is rendered. */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* Placeholder-only font size — the typed value keeps the inline 16px
     (iOS zoom prevention). Prefixed forms are separate rulesets on purpose:
     a selector list containing an unsupported pseudo-element invalidates the
     whole rule in some engines, so each vendor form gets its own block. */
  .shop-phone-search-input::placeholder {
    font-size: 14px;
  }
  .shop-phone-search-input::-webkit-input-placeholder {
    font-size: 14px;
  }
  .shop-phone-search-input::-moz-placeholder {
    font-size: 14px;
  }
  .shop-phone-search-input:-ms-input-placeholder {
    font-size: 14px;
  }

  .shop-phone-search-clear {
    position: absolute;
    right: 34px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #71717a;
    cursor: pointer;
  }

  .shop-phone-search-clear svg {
    width: 16px;
    height: 16px;
  }

  #shop-phone-filter-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
  }

  #shop-phone-filter-btn svg {
    width: 20px;
    height: 20px;
  }

  /* ---- Floating category tab pill ---- */
  .shop-category-seg.shop-phone-tabs-float {
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 150;
    width: auto;
    display: inline-flex;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
  }

  .shop-phone-tabs-float .shop-category-seg-btn {
    flex: initial;
    padding: 9px 18px;
  }

  /* Grid needs enough bottom padding to scroll fully clear of the floating pill */
  #shop-panel-stickers .shop-grid,
  #shop-panel-sheets .shop-sheets-grid,
  #shop-panel-backgrounds .shop-backgrounds-grid {
    padding-bottom: 76px;
  }

  /* .shop-swipe-panel (shop.css) is what actually scrolls vertically on
     phone — one per tab (#shop-panel-stickers/sheets/backgrounds), each
     overflow-y:auto. Its scrollbar-hiding rule in shop.css is scoped to
     desktop only (min-width:769px); this is the same fix for phone,
     without touching shop.css. Scrolling itself is untouched — only the
     indicator is hidden. */
  .shop-swipe-panel {
    scrollbar-width: none;
  }

  .shop-swipe-panel::-webkit-scrollbar {
    display: none;
  }

  /* ---- One scroller only (Oct 2026) ----
     The Shop fills exactly the space under the phone header, so only the
     tab panels scroll. The shell used to be min-height:100vh, taller than
     #feed-area, which turned #feed-area into a second scroller: it could
     slide the grid up under the header and it fought the panels for
     swipes (scrolling felt dead after closing an item card). */
  body.shop-active #main-content {
    padding-top: calc(48px + env(safe-area-inset-top, 0px)); /* header is 48px in shop mode */
  }

  #feed-area:has(> .shop-shell) {
    overflow: hidden;
    padding-bottom: 0;
  }

  #feed-area > .shop-shell {
    min-height: 0;
    height: 100%;
  }
}

@media (min-width: 769px) {
  /* Desktop never shows the phone-only floating pill or search field */
  .shop-phone-tabs-float {
    display: none;
  }
}