/*
 * Mobile home/shop density capability. Load AFTER style, card-usability and
 * price-range-layout (and Manager presentation sheets). No second observer.
 * Slick retains native two-slide widths; only the shared fitter may request
 * fewer slides after complete native rows fail their computed readable floor.
 * Other routes, Quick Buy, Wishlist and product summaries are not adapters.
 */
@media (max-width: 767px) {
  :is(
    body.home.bb-modernization-enabled main.site-main :is(.products-slider, .row.products),
    body.bb-modernization-enabled:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag)
      .shop-page-wrapper ul.products
  ) {
    --bb-catalog-card-density: compact-two-v1;
  }

  /* Replace the native 24px per-cell right padding and overflowing list width
   * with an explicit gap. Measured wider-cell reflow still wins when necessary.
   * Never turn a Slick list/track into a CSS grid or override its inline widths.
   */
  :is(
    body.home.bb-modernization-enabled main.site-main :is(.products-slider, .row.products),
    body.bb-modernization-enabled:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag)
      .shop-page-wrapper ul.products
  ):not(.slick-slider) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem .25rem;
    width: 100% !important;
    margin-inline: 0 !important;
  }
  :is(
    body.home.bb-modernization-enabled main.site-main :is(.products-slider, .row.products),
    body.bb-modernization-enabled:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag)
      .shop-page-wrapper ul.products
  ):not(.slick-slider)[data-bbfaq-price-reflow="grid"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--bbfaq-price-min-cell)), 1fr)) !important;
  }
  /* Woo clearfix pseudo-elements must not become blank grid cells. */
  :is(
    body.home.bb-modernization-enabled main.site-main :is(.products-slider, .row.products),
    body.bb-modernization-enabled:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag)
      .shop-page-wrapper ul.products
  ):not(.slick-slider)::before,
  :is(
    body.home.bb-modernization-enabled main.site-main :is(.products-slider, .row.products),
    body.bb-modernization-enabled:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag)
      .shop-page-wrapper ul.products
  ):not(.slick-slider)::after {
    content: none !important;
    display: none !important;
  }
  :is(
    body.home.bb-modernization-enabled main.site-main :is(.products-slider, .row.products),
    body.bb-modernization-enabled:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag)
      .shop-page-wrapper ul.products
  ):not(.slick-slider) > :is(.product.item, li.product) {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }
  /* Native mobile slider cells carry 8px padding on each side plus 30px
   * below. Reclaim that gutter without touching Slick's measured cell width.
   */
  body.home.bb-modernization-enabled main.site-main
    :is(.products-slider, .row.products).slick-slider :is(.product.item, li.product).slick-slide {
    box-sizing: border-box;
    padding: 0 1px .5rem;
    margin-inline: 0;
  }

  :is(
    body.home.bb-modernization-enabled main.site-main :is(.products-slider, .row.products) :is(.product.item, li.product),
    body.bb-modernization-enabled:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag)
      .shop-page-wrapper ul.products li.product
  ) .product-inner-wrapper {
    padding: .75rem 2px;
    gap: .375rem;
    /* Native home blocks otherwise retain a 667px minimum on narrow cards. */
    min-height: 0 !important;
  }
  :is(
    body.home.bb-modernization-enabled main.site-main :is(.products-slider, .row.products) :is(.product.item, li.product),
    body.bb-modernization-enabled:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag)
      .shop-page-wrapper ul.products li.product
  ) .product-inner-wrapper > .woocommerce-loop-product__link {
    gap: .375rem;
  }
  :is(
    body.home.bb-modernization-enabled main.site-main :is(.products-slider, .row.products) :is(.product.item, li.product),
    body.bb-modernization-enabled:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag)
      .shop-page-wrapper ul.products li.product
  ) .product-inner-wrapper .woocommerce-loop-product__link img {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: 160px;
    aspect-ratio: 1;
    object-fit: contain;
  }
  :is(
    body.home.bb-modernization-enabled main.site-main :is(.products-slider, .row.products) :is(.product.item, li.product),
    body.bb-modernization-enabled:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag)
      .shop-page-wrapper ul.products li.product
  ) .product-inner-wrapper .woocommerce-loop-product__title {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin-block: .375rem .25rem !important;
  }
  /* Duplicate class deliberately beats the native variable-product 7rem
   * reserve as well as the later card-usability sheet. No font-size override:
   * the single fitter derives the native size and never enlarges smaller type.
   */
  :is(
    body.home.bb-modernization-enabled main.site-main :is(.products-slider, .row.products) :is(.product.item, li.product),
    body.bb-modernization-enabled:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag)
      .shop-page-wrapper ul.products li.product
  ) .product-inner-wrapper .price.price {
    min-height: 0 !important;
    height: auto !important;
    padding-block: .25rem !important;
    row-gap: .25rem !important;
    margin-top: auto !important;
  }
  /* Reserve only the actual regular-price row on non-sale cards, not 7rem.
   * The native del pill keeps its colours, radius and compact padding.
   * Flexible full titles grow first; prices remain bottom-aligned in each row.
   */
  :is(
    body.home.bb-modernization-enabled main.site-main :is(.products-slider, .row.products) :is(.product.item, li.product),
    body.bb-modernization-enabled:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag)
      .shop-page-wrapper ul.products li.product
  ) .product-inner-wrapper .price.price:not(:has(> del))::before {
    content: "";
    display: block;
    height: calc(var(--bb-density-native-line-height, 1.5em) + .16rem);
    margin-bottom: .25rem;
  }
  /* Keep the native pill's vertical padding, shape and colours; reclaim only
   * four horizontal pixels per side. With a 4px grid gap this leaves 162px
   * price content at the probed 360px / 24px-frame boundary, rather than 160px.
   * Complete rows still go through the measured >=16px fitter.
   */
  :is(
    body.home.bb-modernization-enabled main.site-main :is(.products-slider, .row.products) :is(.product.item, li.product),
    body.bb-modernization-enabled:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag)
      .shop-page-wrapper ul.products li.product
  ) .product-inner-wrapper .price.price > del {
    padding-inline: 4px !important;
  }
  :is(
    body.home.bb-modernization-enabled main.site-main :is(.products-slider, .row.products) :is(.product.item, li.product),
    body.bb-modernization-enabled:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag)
      .shop-page-wrapper ul.products li.product
  ) .product-inner-wrapper .you_save_price {
    min-height: 0;
    margin-top: .25rem !important;
  }
  :is(
    body.home.bb-modernization-enabled main.site-main :is(.products-slider, .row.products) :is(.product.item, li.product),
    body.bb-modernization-enabled:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag)
      .shop-page-wrapper ul.products li.product
  ) .product-inner-wrapper > .button {
    min-height: 44px;
    height: auto;
    max-width: 100%;
    white-space: normal;
    margin-top: .5rem !important;
  }
}