/* ============================================================
   LS FABRICATION — SHOP GRID, PHONE AND TABLET
   Moved out of an inline <style id="ls-mobile-fix"> block that was
   living inside the Theme Builder FOOTER layout 183058 (an odd place
   for shop-archive CSS — nobody would have found it there). Moved
   2026-08-31. Enqueued by wp-content/mu-plugins/lsfab-css-loader.php.

   SELECTORS ARE DELIBERATELY OVER-QUALIFIED. As an inline <style> at the very
   end of <body> these rules won ties on source order alone. As a <head> sheet
   they sit BEFORE Divi's customizer output (et-divi-customizer-global-cached-
   inline-styles), which sets width / font-size / line-height on
   li.product .button.add_to_cart_button at exactly the same specificity with
   !important. Every selector below therefore carries one extra repeated class
   so it wins on specificity and no longer depends on where it is loaded.

   Kept as its own file rather than merged into css/woocommerce.css:
   overwriting a stylesheet the live site is actively serving over the
   Mountain Duck mount has previously left the file missing for several
   minutes. Fold it into woocommerce.css section 10 next time that file
   is being rewritten anyway.
   ============================================================ */

/* Divi's style-static-cpt.min.css forces width:48% and margin:4% on li.product
   inside its phone breakpoint, with an ID in the selector, so it outranks the
   theme's reclaim rule and each card fills only half a single-column grid
   track. Restated here inside Divi's scope with one extra class so it wins. */
@media (max-width: 980px) {
    .et-db #et-boc .et-l .woocommerce ul.products.products li.product.product.product,
    .et-db #et-boc .et-l .et_pb_shop ul.products.products li.product.product.product,
    .woocommerce.et-db #et-boc .et-l ul.products.products li.product.product.product,
    body.product-columns-4 ul.products.products li.product.product.product:nth-child(n),
    body.product-columns-3 ul.products.products li.product.product.product:nth-child(n) {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        float: none !important;
        clear: none !important;
    }
}

/* Two cards per row on phones. The theme's css/woocommerce.css section 10 drops
   the grid to a single column below 600px; this puts it back to two and scales
   the card's type, spacing and button down so a ~170px card does not read as
   cramped. */
@media (max-width: 600px) {
    body.product-columns-4 ul.products.products,
    body.product-columns-3 ul.products.products,
    body.product-columns-2 ul.products.products,
    .et-db #et-boc .et-l .woocommerce ul.products.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px 10px !important;
    }
    .et-db #et-boc .et-l .woocommerce ul.products.products li.product.product .et_shop_image,
    .woocommerce ul.products.products li.product.product .et_shop_image {
        max-height: 200px !important;
        margin-bottom: 12px !important;
    }
    .et-db #et-boc .et-l .woocommerce ul.products.products li.product.product .et_shop_image img,
    .woocommerce ul.products.products li.product.product .et_shop_image img {
        max-height: 200px !important;
    }
    .woocommerce.et-db #et-boc .et-l .woocommerce ul.products.products li.product.product.instock .woocommerce-loop-product__title,
    .woocommerce.et-db #et-boc .et-l .woocommerce ul.products.products li.product.product.outofstock .woocommerce-loop-product__title,
    .et-db #et-boc .et-l .woocommerce ul.products.products li.product.product .woocommerce-loop-product__title {
        font-size: 15px !important;
        line-height: 1.25 !important;
        padding: 0 10px 8px !important;
    }
    .woocommerce.et-db #et-boc .et-l .woocommerce ul.products.products li.product.product.instock .price,
    .woocommerce.et-db #et-boc .et-l .woocommerce ul.products.products li.product.product.outofstock .price,
    .et-db #et-boc .et-l .woocommerce ul.products.products li.product.product .price {
        font-size: 15px !important;
        padding: 0 10px !important;
        margin-bottom: 10px !important;
    }
    .woocommerce.et-db #et-boc .et-l .woocommerce ul.products.products li.product.product.instock .star-rating,
    .woocommerce.et-db #et-boc .et-l .woocommerce ul.products.products li.product.product.outofstock .star-rating,
    .et-db #et-boc .et-l .woocommerce ul.products.products li.product.product .star-rating {
        font-size: 12px !important;
        margin: 0 10px 8px !important;
    }
    .woocommerce.et-db #et-boc .et-l .woocommerce ul.products.products li.product.product.instock .button,
    .woocommerce.et-db #et-boc .et-l .woocommerce ul.products.products li.product.product.outofstock .button {
        width: calc(100% - 20px) !important;
        /* The cap has to be restated, not just the width. woocommerce.css
           section 9 sets BOTH width and max-width to calc(100% - 32px) on this
           button with !important, and max-width survives into this breakpoint
           because nothing here overrode it -- so the 151px width above was
           being clamped to 139px. The 12px difference all landed on the right,
           which is why the button sat 11px from the left edge of the card and
           23px from the right. Measured at 375px: 173px card, now 11px clear
           on both sides. Change the two together or it goes lopsided again. */
        max-width: calc(100% - 20px) !important;
        min-height: 40px !important;
        margin: 0 10px 12px !important;
        padding: 0 6px !important;
        font-size: 12px !important;
        letter-spacing: 0.06em !important;
    }
}
