/**
 * Prop Shack — card enhancements (card-click navigation + layout/image styling).
 * The quick-view (eye) button was removed: it duplicated Booqable's cart button,
 * which already opens the same product modal.
 */
/* Make sure the cursor on hijacked cards reflects clickability. */
.booqable-product[data-ps-enhanced="1"] {
    cursor: pointer;
}

/* ════════════════════════════════════════
   CARD INTERNALS — Booqable v2 storefront (bq-* classes)
   ════════════════════════════════════════
   IMPORTANT: the official plugin wraps the grid and card root in booqable-*
   classes (.booqable-product-list-grid, .booqable-product), but the embedded
   JS storefront ("store_v2") renders the card CONTENTS with a different prefix:
   bq-*. So name/price/title styling must target bq-*, NOT booqable-*. Earlier
   rules using .booqable-product-name matched nothing — this is the fix. */

/* ── Product name: wrap instead of truncate ──
   DevTools showed .bq-product-title-wrapper sized to 290 x 17px — i.e. clamped
   to a single line with the overflow hidden. Release the height on both the
   wrapper and the name so it wraps to as many lines as needed. */
.bq-product-title-wrapper,
.bq-product-name {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: horizontal !important;
    display: block !important;
    height: auto !important;
    max-height: none !important;
    min-width: 0 !important;
    overflow-wrap: break-word !important;
}

/* ── Equal-height cards — full-width name, price + button on bottom row ──
   CRITICAL specificity note: Booqable styles card internals with deep
   !important rules like
     .booqable-component .booqable-product-wrapper .booqable-product-inner .bq-details {...}
   A single-class override (even with !important) LOSES the cascade to those,
   because among !important declarations specificity wins. So every rule that
   touches a bq-* element is written at matching/greater depth (≥0,5,0) to beat
   Booqable. This is why the earlier full-width / position:relative rules were
   silently ignored.

   Layout: name full width (top), price pinned to the bottom-left, cart button
   absolutely anchored bottom-right beside the price. The flex chain on the
   wrappers gives equal-height cards; .bq-details is the positioning context. */
.booqable-product-list-grid {
    align-items: stretch !important;
}
/* box-sizing: border-box so width:100% + padding stays inside the card.
   THE MOBILE BUTTON-CROP BUG: under content-box, .bq-details was width:100% PLUS
   30px padding = ~27px wider than the 165px card, so the right-anchored button
   hung past the overflow:hidden edge and got clipped to a sliver. border-box
   folds the padding into the 100%, collapsing .bq-details back to card width. */
.booqable-product-list-grid .booqable-product,
.booqable-product-list-grid .booqable-product .booqable-product-wrapper,
.booqable-product-list-grid .booqable-product .booqable-product-wrapper .booqable-product-inner,
.booqable-product-list-grid .booqable-product .booqable-product-wrapper .booqable-product-inner .bq-details,
.booqable-product-list-grid .booqable-product .booqable-product-wrapper .booqable-product-inner .bq-details .bq-product-title-wrapper,
.booqable-product-list-grid .booqable-product .booqable-product-wrapper .booqable-product-inner .bq-details .bq-price-details {
    box-sizing: border-box !important;
}
.booqable-product {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    position: relative !important;   /* positioning context for the cart button */
    overflow: hidden !important;     /* the clip boundary the button stays inside */
}
.booqable-product-list-grid .booqable-product .booqable-product-wrapper,
.booqable-product-list-grid .booqable-product .booqable-product-wrapper .booqable-product-inner {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
}
/* .bq-details: a flex ROW that wraps. The name takes a full-width first line;
   the price and button wrap onto a second line together. align-content:
   space-between pushes the name to the top (under the image) and the
   price+button line to the bottom. Everything is IN FLOW — no absolute
   positioning — so the button can never be clipped regardless of widths. */
.booqable-product-list-grid .booqable-product .booqable-product-wrapper .booqable-product-inner .bq-details {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-content: space-between !important;
    align-items: center !important;
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    gap: 8px 10px !important;
}
/* Name: full-width first line. Beats Booqable's .bq-has-prices width rule. */
.booqable-product-list-grid .booqable-product .booqable-product-wrapper .booqable-product-inner .bq-details .bq-product-title-wrapper,
.booqable-product-list-grid .booqable-product .booqable-product-wrapper .booqable-product-inner .bq-details .bq-product-title-wrapper.bq-has-prices,
.booqable-product-list-grid .booqable-product .booqable-product-wrapper .booqable-product-inner .bq-details .bq-product-name {
    order: 1 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}
/* Price: grows to fill the bottom line, left of the button. flex-basis 0 (not
   auto) so on a narrow mobile card the price+button still share ONE line — the
   price text wraps inside its own box rather than pushing the button onto a
   line of its own (which made mobile inconsistent with desktop). */
.booqable-product-list-grid .booqable-product .booqable-product-wrapper .booqable-product-inner .bq-details .bq-price-details {
    order: 2 !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
}
/* Force the duration ("1 day") and amount ("AED 360.00") spans to wrap inside
   the price box. They're nowrap by default, so on a narrow card they overflowed
   rightward and slid under the cart button. Wrapping keeps them contained. */
.booqable-product-list-grid .booqable-product .booqable-product-wrapper .booqable-product-inner .bq-details .bq-price-details,
.booqable-product-list-grid .booqable-product .booqable-product-wrapper .booqable-product-inner .bq-details .bq-price-details * {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}
/* On narrow (phone) cards, stack the duration and amount on their own lines —
   "1 day" then "AED 330.00" — which reads cleaner than the inline text wrapping
   mid-amount. Mobile only; desktop keeps them inline on one row. They stay
   inside the price's own flex box, so they never reach the button beside it. */
@media (max-width: 600px) {
    .booqable-product-list-grid .booqable-product .booqable-product-wrapper .booqable-product-inner .bq-details .bq-price-details .bq-duration,
    .booqable-product-list-grid .booqable-product .booqable-product-wrapper .booqable-product-inner .bq-details .bq-price-details .bq-price {
        display: block !important;
    }
    /* Reclaim horizontal room on narrow phones so the amount fits on one line
       (two-line price block instead of three): tighter card padding, smaller
       button, smaller gap. */
    .booqable-product-list-grid .booqable-product .booqable-product-wrapper .booqable-product-inner .bq-details {
        padding: 12px !important;
        gap: 6px 6px !important;
    }
    .booqable-product-list-grid .booqable-product .booqable-product-wrapper .booqable-product-inner .bq-details .bq-button {
        width: 40px !important;
        height: 40px !important;
        flex-basis: 40px !important;
    }
}
/* Cart button: small square on the bottom line, right of the price. IN FLOW. */
.booqable-product-list-grid .booqable-product .booqable-product-wrapper .booqable-product-inner .bq-details .bq-button {
    order: 3 !important;
    flex: 0 0 44px !important;
    position: static !important;
    float: none !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ── Square (1:1) white-padded image frame ──
   The CONTAINER (div with the height attribute) becomes a full-width 1:1 square
   with a white background; the image(s) inside are absolutely positioned to
   fill it with object-fit:contain. Absolute fill (rather than in-flow sizing)
   means Booqable's layered images (blur placeholder + real photo) overlay each
   other instead of stacking to double height, and the image is always exactly
   the frame size — so every card's image area is an identical square, with
   non-square photos letterboxed in white and constrained to the column width
   (which also stops the card overflowing and clipping the button on mobile). */
.booqable-product-list-grid .booqable-product .booqable-product-wrapper .booqable-product-inner div[height] {
    box-sizing: border-box !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    background: #ffffff !important;
    overflow: hidden !important;
    display: block !important;
}
.booqable-product-list-grid .booqable-product .booqable-product-wrapper .booqable-product-inner div[height] img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
}

/* ── Responsive product grid (single global owner) ──
   This stylesheet loads on EVERY page that renders Booqable cards — collections,
   search, AND the homepage "Latest Additions" strip — so the grid is defined
   here once rather than split across mobile-filter.css (collection/search only)
   and the theme's Additional CSS. Mobile-first: 2 columns by default, widening
   on larger screens. minmax(0, 1fr) (not 1fr) lets each track shrink below its
   content's intrinsic width so an uncapped image can't overflow the row. */
.booqable-product-list-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 12px !important;
}
@media (min-width: 901px) {
    .booqable-product-list-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }
}
@media (min-width: 1200px) {
    .booqable-product-list-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* Cards fit their cell; images can't set the track's min-content width.
   These must live here too, because the homepage never loads mobile-filter.css. */
.booqable-product-list-grid .booqable-product {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
.booqable-product-list-grid .booqable-product img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Keep the list wrapper from ever exceeding the viewport. */
.booqable-product-list,
.booqable-component {
    max-width: 100% !important;
}