/**
 * bs-algolia-category-facets.css
 *
 * Shop archive (/shop/) Algolia facets — page-specific styles.
 *
 * Loaded after:
 *   bs-algolia-facets.css         — toolbar, sidebar, price slider, backdrop,
 *                                    pagination, .bs-facets-hits-grid base grid
 *   bs-product-archive.css        — card anatomy scoped to .wd-products.products
 *
 * This file covers only what those two files don't:
 *   1. #bs-shop-hits wrapper — mounts into Elementor layout correctly
 *   2. Hits grid override — matches WoodMart's 4-column shop grid
 *   3. Card rules for #bs-shop-hits — extends bs-product-archive.css selectors
 *      to the JS-rendered context (cards live in #bs-shop-hits, not .wd-products)
 *   4. OOS badge overlay
 *   5. Hide WoodMart's native sort toolbar (we supply ours)
 *   6. Shop-specific toolbar margin
 *   7. Responsive column adjustments
 *
 * renderHit() produces WoodMart's actual card structure:
 *   .wd-product > .wd-product-wrapper > (.wd-product-thumb + .product-element-bottom)
 * so selectors in bs-product-archive.css are mirrored here with #bs-shop-hits scope.
 *
 * @package BlackSpace
 */


/* ═══════════════════════════════════════════════════════════
   1. HITS WRAPPER — layout mount
   ═══════════════════════════════════════════════════════════
   #bs-shop-hits is inserted after .wd-shop-product inside its
   .e-con parent. It needs to fill the full column width so it
   occupies the same space as the hidden native widget. */

#bs-shop-hits {
    width: 100%;
    min-width: 0;
}


/* ═══════════════════════════════════════════════════════════
   2. HITS GRID — 4-column, matches WoodMart shop grid
   ═══════════════════════════════════════════════════════════
   Overrides the shared .bs-facets-hits-grid base (auto-fill,
   minmax 200px) to match WoodMart's fixed 4-column layout and
   gap values from bs-product-archive.css. */

#bs-shop-hits .bs-facets-hits-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 32px 10px !important;
    margin-bottom: 0;
}


/* ═══════════════════════════════════════════════════════════
   3. CARD RULES — mirror bs-product-archive.css for #bs-shop-hits
   ═══════════════════════════════════════════════════════════
   bs-product-archive.css scopes everything to .wd-products.products.
   JS-rendered cards live in #bs-shop-hits .bs-facets-hits-grid,
   so we re-declare the essential rules with the #bs-shop-hits scope.
   !important matches bs-product-archive.css priority level.
   ═══════════════════════════════════════════════════════════ */

/* Card wrapper */
#bs-shop-hits .wd-product-wrapper {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    height: 100% !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease !important;
    padding: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

#bs-shop-hits .wd-product-wrapper:hover {
    border-color: #e6e6e6 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09) !important;
    transform: translateY(-2px) !important;
}

/* Image container — square aspect ratio, clipped */
#bs-shop-hits .wd-product-thumb {
    position: relative !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    background: #f5f0eb !important;
    border-radius: 10px 10px 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#bs-shop-hits .wd-product-thumb a.wd-product-img-link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

#bs-shop-hits .wd-product-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 0 !important;
    transition: transform 0.4s ease !important;
}

#bs-shop-hits .wd-product-wrapper:hover .wd-product-thumb img {
    transform: scale(1.04) !important;
}

/* Image placeholder (no image available) */
#bs-shop-hits .wd-product-image-placeholder {
    width: 100% !important;
    height: 100% !important;
    background: #eee !important;
}

/* Card body */
#bs-shop-hits .product-element-bottom {
    position: relative !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 12px 14px 14px !important;
    gap: 4px !important;
    text-align: left !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Title — 2-line clamp */
#bs-shop-hits .wd-entities-title {
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #1a1a1a !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    min-height: calc(1.35em * 2) !important;
}

#bs-shop-hits .wd-entities-title a {
    color: #1a1a1a !important;
    text-decoration: none !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

#bs-shop-hits .wd-entities-title a:hover {
    color: #b0743e !important;
}

/* Price — push to bottom of card body */
#bs-shop-hits .product-element-bottom > .price {
    margin: auto 0 0 0 !important;
    order: 5 !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 2px !important;
    line-height: 1.4 !important;
    padding: 0 !important;
}

#bs-shop-hits .price .woocommerce-Price-amount,
#bs-shop-hits .price bdi,
#bs-shop-hits .price .woocommerce-Price-currencySymbol {
    color: #1a1a1a !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

/* Sale price — bronze accent */
#bs-shop-hits .price ins,
#bs-shop-hits .price ins .woocommerce-Price-amount,
#bs-shop-hits .price ins bdi {
    color: #b0743e !important;
    text-decoration: none !important;
    font-weight: 700 !important;
}

/* Original price strikethrough */
#bs-shop-hits .price del {
    color: #999999 !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
    margin-right: 6px !important;
}

#bs-shop-hits .price del .woocommerce-Price-amount,
#bs-shop-hits .price del bdi {
    color: #999999 !important;
    font-weight: 400 !important;
}


/* ═══════════════════════════════════════════════════════════
   4. OOS BADGE
   ═══════════════════════════════════════════════════════════
   Absolute overlay on the image, bottom-left. Styled to match
   the BlackSpace badge palette from bs-product-archive.css. */

.bs-hit-oos-badge {
    position: absolute !important;
    bottom: 10px !important;
    left: 10px !important;
    z-index: 2 !important;
    display: inline-block !important;
    font-size: 0.5625rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #474747 !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border-radius: 50px !important;
    padding: 3px 10px !important;
    line-height: 1.2 !important;
    pointer-events: none !important;
}


/* ═══════════════════════════════════════════════════════════
   5. HIDE WOODMART NATIVE SORT TOOLBAR
   ═══════════════════════════════════════════════════════════
   BSFacets provides its own sort dropdown in the toolbar.
   Mirror of the category page rule from bs-product-category-page.css
   but scoped to the shop archive body class. */

body.post-type-archive-product .woocommerce-ordering {
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════
   6. SHOP TOOLBAR SPACING
   ═══════════════════════════════════════════════════════════ */

body.post-type-archive-product #bs-facets-toolbar {
    margin-bottom: 16px;
}


/* ═══════════════════════════════════════════════════════════
   7. RESPONSIVE
   ═══════════════════════════════════════════════════════════
   Mirrors bs-product-archive.css breakpoints. */

@media (max-width: 1100px) {
    #bs-shop-hits .bs-facets-hits-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    #bs-shop-hits .bs-facets-hits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 24px 10px !important;
    }

    #bs-shop-hits .product-element-bottom {
        padding: 10px 12px 12px !important;
    }

    #bs-shop-hits .wd-entities-title {
        font-size: 0.75rem !important;
    }

    #bs-shop-hits .price,
    #bs-shop-hits .price .woocommerce-Price-amount,
    #bs-shop-hits .price bdi {
        font-size: 0.75rem !important;
    }
}

@media (max-width: 480px) {
    #bs-shop-hits .bs-facets-hits-grid {
        gap: 20px 8px !important;
    }
}