/* ==== FF OD shop: mobile sheet + grid corrections ========================
   Companion to ff-od-shop.php (which already ships the OD filter styling).
   Only fixes two measured defects; invents nothing.

   1. FILTER CARD OFFSET
      The sheet is the OUTER <aside> (promoted from .ff-shop-aside by
      ff-od-shop-filter.php). Elementor nests its own positioned wrapper and a
      .elementor-shortcode div inside it, and those inherit the parent grid's
      column offset - pushing the filter card to x=152.1 and out of the 348px
      sheet. Measured OD: card x=16. Reset the inner wrappers, open sheet only.

   2. PRODUCT GRID COLUMNS
      OD is TWO columns at 390px. Elementor stamps `columns-3` plus a fixed
      358px track on ul.products, which rendered as a single column.
   ======================================================================== */

/* ==== TOOLBAR POSITION (all viewports) ===================================
   ff-od-shop.php lays the archive wrapper out as a GRID and pins every known
   child to an explicit row:
     .woocommerce-notices-wrapper  grid-row 1
     .woocommerce-result-count     grid-row 2, col 1
     .woocommerce-ordering         grid-row 2, col 2
     ul.products                   grid-row 3
     .woocommerce-pagination       grid-row 4
   .ff-results-summary is NEW markup, so it had grid-row:auto and was
   auto-placed AFTER every pinned item - rendering below the product grid
   (mobile y=2749, desktop y=2591). OD puts Filters + count on the toolbar
   row, left, with sort on the right, at EVERY width.
   Pin it to row 2 / col 1 and hide Woo's own count, which it replaces. */
html body .ff-od-page .ff-shop-main .woocommerce > .ff-results-summary{
  grid-column:1 !important;
  grid-row:2 !important;
  align-self:center !important;
  margin:0 0 18px !important;
  min-width:0 !important;}

html body .ff-od-page .ff-shop-main .woocommerce > .woocommerce-result-count{
  display:none !important;}

/* the count must not be clipped by the sort control on narrow phones
   (measured: count right edge crossed the select's left edge at 375/390px) */
html body .ff-od-page .ff-result-count{
  white-space:nowrap;
  overflow:visible;}

@media (max-width: 880px) {

  /* The sort select is pinned to max-width:190px by ff-od-shop.php. At 375px
     that leaves the grid's first column too narrow and the select overlapped
     the count by 16.4px (measured). OD's select is 155px wide at 390px, so
     cap it and let the toolbar column take the remainder. */
  html body .ff-od-page .ff-shop-main .woocommerce-ordering select{
    max-width:155px !important;
    width:100% !important;}
  html body .ff-od-page .ff-shop-main .woocommerce > .woocommerce-ordering{
    justify-self:end !important;
    min-width:0 !important;}

  /* ROOT CAUSE (measured, not guessed): the sheet is display:flex/column and
     both children are 316px wide, but the SECOND child laid out at x=348 while
     the heading sat correctly at x=16 - i.e. the flex column was WRAPPING into
     a second column. No CSS rule positioned it (position:static, left:auto,
     margin:0), so it was pure flex layout. Pin nowrap on the container. */
  html body .ff-od-page #ff-filters-panel.ff-filters-open{
    flex-wrap:nowrap !important;
    align-content:flex-start !important;
    overflow-x:hidden !important;}

  html body .ff-od-page #ff-filters-panel.ff-filters-open > *,
  html body .ff-od-page #ff-filters-panel.ff-filters-open .elementor-shortcode{
    position:static !important;
    left:auto !important;
    right:auto !important;
    inset:auto !important;
    transform:none !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    flex:0 0 auto !important;
    align-self:stretch !important;}

  html body .ff-od-page ul.products.elementor-grid,
  html body .ff-od-page ul.products{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:14px !important;}
}