/* ============================================================
 * Mr Robot — Product-card fixes
 * Decision 1 (out-of-stock): Option E — white image stage in both themes,
 *                            OOS pill lifted off the image to the TOP-RIGHT
 *                            corner, out-of-stock photo dimmed.
 * Decision 2 (price/button): Option 2 — price stacked (current over old),
 *                            action button pinned to the trailing edge.
 *
 * HOW TO USE: append this block to the END of
 *   public/assets/customer/css/customer.css
 * (or save as public/assets/customer/css/product-card-fixes.css and load it
 *  AFTER customer.css). Every rule is append-only and wins by specificity +
 *  source order + !important, so NOTHING in the existing file must be deleted.
 *
 * Requires one Blade change: add the `is-oos` class to <img class="product-image">
 * when the product is out of stock — see README.md, step B.
 * ============================================================ */

/* ---- Decision 1 · Option E --------------------------------------------- */

/* E1 · White image stage in DARK mode too.
   Light mode is already white (customer.css:907); this overrides the dark
   override at customer.css:953 that forced #14161E and made photos look
   inconsistent + hid the pill. Higher specificity + !important. */
html.dark .product-card .product-image-container,
html.dark .category-product-card .product-image-container{
    background:#fff !important;
}

/* E2 · Lift the "Out of stock" pill OFF the image seam to the TOP-RIGHT
   corner. Top-LEFT is taken by the sale ribbon (customer.css:994), so a
   product that is both on-sale and out-of-stock would collide there —
   top-right is always free. Overrides customer.css:1190 and :1404. */
.product-card .oos-tag,
.category-product-card .oos-tag{
    top:12px !important;
    bottom:auto !important;
    inset-inline-start:auto !important;   /* clear the old left pin (RTL-safe) */
    inset-inline-end:12px !important;      /* → right in LTR, left in RTL */
}

/* E3 · Keep the pill readable in dark mode. The stage is white now, so the
   old translucent-white dark-mode pill (customer.css:1191) would vanish —
   force the dark translucent chip in both themes. */
html.dark .product-card .oos-tag,
html.dark .category-product-card .oos-tag{
    background:rgba(5,5,7,.72) !important;
    color:#fff !important;
}

/* E4 · Dim + desaturate the out-of-stock photo so availability reads at a
   glance. opacity/filter ONLY — no box-model change, so the image square and
   every card stay pixel-identical in size. Needs the `is-oos` class (step B). */
.product-card .product-image.is-oos,
.category-product-card .product-image.is-oos{
    opacity:.55;
    filter:grayscale(.2);
}

/* ---- Decision 2 · Option 2 --------------------------------------------- */

/* 2a · Stop the cart/bell button wrapping to a second line when a compare-at
   (old) price widens the price box. Overrides the flex-wrap:wrap at
   customer.css:920. */
.product-card .product-foot,
.category-product-card .product-foot{
    flex-wrap:nowrap !important;
}

/* 2b · Stack the price as current-over-old and let it flex, so the round
   button stays pinned to the trailing edge and vertically centred on EVERY
   card — sale or not. Overrides customer.css:921. */
.product-card .product-price,
.category-product-card .product-price{
    flex:1 1 auto !important;
    min-width:0;
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    align-items:flex-start !important;
    gap:0 !important;
}