/* ==================================================
   css/pages/wishlist.css — the wishlist page's styles
   ================================================== */

/* The container is empty in the HTML and filled by js/features/wishlist.js after the first
   paint, so the footer was painted straight under the title and then pushed down — a 0.27
   layout shift in Lighthouse. This holds the height of the empty-wishlist message (381px on
   a phone, 368px on a desktop), so an empty wishlist does not move at all and a row of
   cards moves the footer by the difference only.

   The cards no longer fade in (fadeSlideIn, from opacity 0): they are the whole first
   screen and hold its largest image, and since the cards are drawn from localStorage and
   then redrawn when the stock arrives, the fade played twice. */
#wishlist-container {
    min-height: 23rem;
}

/* Two cards per row on a phone, matching the products grid. The card
   markup is built by js/features/wishlist.js and carries the same
   col-lg-4, so the same hook works and the JavaScript is untouched.

   The two blocks replaced here (575 and 320) both said 100% and both
   said !important — the second was a copy of a rule that was already
   forcing one card per row, kept for "tiny phones" where the first
   already applied. */
@media (max-width: 575px) {
    #wishlist-container {
        --bs-gutter-x: 0.75rem;
    }

    #wishlist-container .col-lg-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Same stepper arithmetic as the products grid — see the comment in
       store/pages/products.css. */
    #wishlist-container .quantity-box .btn {
        width: 34px !important;
        height: 34px !important;
        min-height: 34px;
        font-size: 1rem !important;
    }
    #wishlist-container .quantity-input {
        width: 40px !important;
        height: 34px !important;
        padding: 0 2px !important;
        font-size: 0.9rem !important;
    }

    #wishlist-container .card-body .btn {
        padding: 6px 4px;
        font-size: 0.8rem;
    }
    #wishlist-container .new-price.fs-5 {
        font-size: 1rem !important;
    }
}