/* HW_CLAUDE_NARROW_SEARCH_FIELD_v1 — l91-narrow-search DRAFT (not deployed)
   Problem (audit RU-UI-01, P1): on narrow screens the header search opens the
   Diginetica overlay with no visible input: the Aspro layer stays parked at
   top:-200px (searchtitle.css:80-88; .show removed by the outside-click handler
   in main.min.js because the button is outside .inline-search-block), while the
   digi overlay has no input row and its desktop product grid (40px 40px 40px)
   is squeezed into a 30px column at x>=336 -> clipped cards.
   Fix: while the digi overlay is open (digi_open) on <=600px, lift the Aspro
   search bar above the overlay and let suggestion columns wrap to viewport. */

@media (max-width: 600px) {

  /* 0) injection sentinel for probe verification (draft only) */
  :root { --hw-ns-draft: 1; }

  /* 1) Field fully in viewport: show the Aspro search bar above the digi overlay
        (digi_open) or while the search input keeps focus (overlay may dismiss on
        the click into the field — bar must not sink back under the pointer) */
  body:has(#digi-shield.digi_open) .inline-search-block,
  body:has(.inline-search-block input:focus) .inline-search-block {
    top: 0 !important;
    z-index: 10000000 !important; /* above #digi-shield (9999999) */
  }

  /* 2) Suggestions panel below the bar so it never covers the field */
  body:has(#digi-shield.digi_open) #digi-shield .digi-ac {
    top: 56px !important; /* = .inline-search-block height on mobile (--input-mobile-height row) */
  }

  /* 3) Suggestion columns fit the screen: wrap, no clipped cards */
  body:has(#digi-shield.digi_open) #digi-shield .digi-ac__wrapper {
    flex-wrap: wrap;
    max-width: 100%;
  }
  body:has(#digi-shield.digi_open) #digi-shield .digi-ac__set_products {
    width: 100%;
    max-width: 100%;
  }
  body:has(#digi-shield.digi_open) #digi-shield .digi-products-grid {
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  }
  body:has(#digi-shield.digi_open) #digi-shield .digi-product_ac {
    width: 100%;
  }
}