/* ==========================================================================
   Doki Site Kit – shop mobile nav fix (shopmobile, 2026-10-10)
   Scope: WooCommerce archives with left sidebar, <=921px only.
   Desktop (>=922px) is untouched.

   ROOT CAUSE: Astra Pro (addon 4.13.x) now wraps the shop sidebar widgets in
   <div class="ast-filter-wrap">. Our mobile layout makes #secondary and
   .sidebar-main `display:contents` so each widget becomes its own item in the
   .ast-container grid (search row 3, shop-nav row 4, filter row 6 ...). The
   new wrapper is NOT display:contents, so all widgets collapse into ONE
   auto-placed grid item that lands in column 1 of `minmax(0,1fr) auto` and
   shrinks to ~43% of the width. Inside that ~140px box the 4-col tile grid
   gets ~29px columns: the fixed 46px-tall images are squeezed by
   max-width:100% into ovals, and the nowrap labels overflow into each other.

   Every selector starts with `html body...` so it wins over the existing
   Additional CSS rules regardless of load order (enqueued file or pasted).
   ========================================================================== */
@media (max-width: 921px) {
  /* 1) Root fix: let Astra Pro's wrapper pass through to the grid. */
  html body.woocommerce.archive.ast-left-sidebar #secondary .ast-filter-wrap {
    display: contents;
  }

  /* 2) Even 2-col grid for the filter + sort row (was minmax(0,1fr) auto). */
  html body.woocommerce.archive.ast-left-sidebar .site-content > .ast-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html body.woocommerce.archive.ast-left-sidebar #secondary .widget:has(.doki-shop-nav) {
    grid-column: 1 / -1 !important;
    width: 100%;
    min-width: 0;
  }
  html body.woocommerce.archive.ast-left-sidebar #secondary .widget:has(.wc-block-product-filters) {
    grid-column: 1 !important;
    justify-self: stretch !important;
    align-self: center;
    min-width: 0;
  }
  html body.woocommerce.archive.ast-left-sidebar .woocommerce-ordering {
    grid-column: 2 !important;
    justify-self: stretch !important;
    align-self: center;
    min-width: 0;
  }

  /* 3) Category tiles: even grid, round icons, labels below. */
  html body.woocommerce.archive.ast-left-sidebar .doki-shop-nav__tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .5rem;
    width: 100%;
  }
  html body.woocommerce.archive.ast-left-sidebar .doki-shop-nav__tiles a {
    min-width: 0;
    justify-content: flex-start;
    gap: .4rem;
    padding: .45rem .15rem;
    font-size: .74rem;
    letter-spacing: 0;
    line-height: 1.2;
  }
  html body.woocommerce.archive.ast-left-sidebar .doki-shop-nav__tiles img {
    flex: 0 0 auto;
    width: clamp(44px, 13vw, 60px) !important;
    max-width: 100%;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
  }
  html body.woocommerce.archive.ast-left-sidebar .doki-shop-nav__tiles span {
    display: block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    hyphens: manual;
    text-align: center;
  }

  /* 4) Pills: one line, equal 44px height, site gold/white pill style kept. */
  html body.woocommerce.archive.ast-left-sidebar .doki-shop-nav.is-enhanced .doki-shop-nav__more {
    min-height: 44px;
    white-space: nowrap;
    line-height: 1.2 !important;
  }
  html body.woocommerce.archive.ast-left-sidebar .doki-shop-nav.is-enhanced .doki-shop-nav__more > span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html body.woocommerce.archive.ast-left-sidebar .doki-shop-filters.is-mobile-overlay {
    display: flex !important;
    width: 100% !important;
  }
  html body.woocommerce.archive.ast-left-sidebar .doki-shop-filters .wc-block-product-filters__open-overlay {
    display: flex !important;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    white-space: nowrap;
    line-height: 1.2 !important;
  }
  html body.woocommerce.archive.ast-left-sidebar .woocommerce-ordering select {
    width: 100% !important;
    max-width: none !important;
    min-height: 44px;
  }
}

/* Small phones: 2x2 tiles so labels like "Merchandise" never collide. */
@media (max-width: 379px) {
  html body.woocommerce.archive.ast-left-sidebar .doki-shop-nav__tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Small phones: "Filter products" + "Sort by latest" don't both fit at 50/50,
   so stack them full width (sort below filter) and shift the rows below. */
@media (max-width: 379px) {
  html body.woocommerce.archive.ast-left-sidebar #secondary .widget:has(.wc-block-product-filters),
  html body.woocommerce.archive.ast-left-sidebar .woocommerce-ordering {
    grid-column: 1 / -1 !important;
  }
  html body.woocommerce.archive.ast-left-sidebar .woocommerce-ordering {
    margin-top: .6rem !important;
  }
  /* with brand row (shop / brand-row archives): filter 6, sort 7 */
  html body.woocommerce.archive.ast-left-sidebar:has(.doki-shop-brands) .woocommerce-ordering { grid-row: 7 !important; }
  html body.woocommerce.archive.ast-left-sidebar:has(.doki-shop-brands) .woocommerce-result-count { grid-row: 8 !important; }
  html body.woocommerce.archive.ast-left-sidebar:has(.doki-shop-brands) :is(ul.products, .woocommerce-no-products-found, .ast-woocommerce-container > .woocommerce-info) { grid-row: 9 !important; }
  html body.woocommerce.archive.ast-left-sidebar:has(.doki-shop-brands) :is(nav.woocommerce-pagination, .woocommerce-pagination) { grid-row: 10 !important; }
  /* without brand row: filter 5, sort 6 */
  html body.woocommerce.archive.ast-left-sidebar:not(:has(.doki-shop-brands)) .woocommerce-ordering { grid-row: 6 !important; }
  html body.woocommerce.archive.ast-left-sidebar:not(:has(.doki-shop-brands)) .woocommerce-result-count { grid-row: 7 !important; }
  html body.woocommerce.archive.ast-left-sidebar:not(:has(.doki-shop-brands)) :is(ul.products, .woocommerce-no-products-found, .ast-woocommerce-container > .woocommerce-info) { grid-row: 8 !important; }
  html body.woocommerce.archive.ast-left-sidebar:not(:has(.doki-shop-brands)) :is(nav.woocommerce-pagination, .woocommerce-pagination) { grid-row: 9 !important; }
}