/* ==========================================================================
   Wishlist page (YITH WooCommerce Wishlist)

   This file stands alone: woocommerce.css is not enqueued on /wishlist/,
   because is_woocommerce() does not cover the wishlist page. YITH's own
   style.css is enqueued before the theme's, so equal-specificity rules here
   win without needing !important.
   ========================================================================== */

/* YITH sets table.wishlist_table{font-size:80%}, which leaves the whole table
   noticeably smaller than the rest of the site. */
.woocommerce-wishlist table.wishlist_table {
    font-size: 0.9375rem;
    width: 100%;
}

.woocommerce-wishlist .wishlist-title h2 {
    margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   Wishlist footer

   YITH floats .yith_wcwl_wishlist_bulk_action left and
   .yith_wcwl_wishlist_update right with no clearfix, so the container
   collapsed to zero height and the floats escaped out of <main> and painted
   over the site footer. flow-root contains them without the side effects of
   overflow: hidden.
   -------------------------------------------------------------------------- */
.woocommerce-wishlist .yith_wcwl_wishlist_footer {
    display: flow-root;
    margin: 32px 0 64px;
}

.woocommerce-wishlist .yith-wcwl-share {
    margin: 0;
}

.woocommerce-wishlist .yith-wcwl-share h4.yith-wcwl-share-title {
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--lh-black);
}

.woocommerce-wishlist .yith-wcwl-share ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce-wishlist .yith-wcwl-share li a {
    min-width: 36px;
    min-height: 36px;
    border-radius: var(--lh-radius);
}

/* Empty state: YITH uses margin:100px 0, which strands the message. */
.woocommerce-wishlist .wishlist-empty,
.woocommerce-wishlist p.wishlist-empty {
    margin: 48px 0;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Add to cart button

   The theme styles .btn, not WooCommerce's .button, and woocommerce.css is not
   loaded on this page, so the loop button arrives with no brand styling at all.
   Give it the same appearance as .btn-primary.
   -------------------------------------------------------------------------- */
.woocommerce-wishlist table.wishlist_table td.product-add-to-cart .button {
    display: inline-block;
    padding: 10px 18px;
    background-color: var(--lh-primary);
    color: var(--lh-white);
    border: 1px solid var(--lh-primary);
    border-radius: var(--lh-radius);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--lh-transition);
}

.woocommerce-wishlist table.wishlist_table td.product-add-to-cart .button:hover {
    background-color: var(--lh-primary-dark);
    border-color: var(--lh-primary-dark);
    color: var(--lh-white);
}

/* "Added on ..." note and the "View cart" link WooCommerce appends after an
   AJAX add both share this cell; keep them off the button's line. */
.woocommerce-wishlist table.wishlist_table td.product-add-to-cart .dateadded {
    display: block;
    margin-bottom: 8px;
    font-size: 0.75rem;
    color: var(--lh-gray);
}

.woocommerce-wishlist table.wishlist_table td.product-add-to-cart .added_to_cart {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.8125rem;
    color: var(--lh-primary);
}

/* --------------------------------------------------------------------------
   Mobile: stack each row as a card

   YITH's only mobile rules cover bulk actions, so the six-column table is
   left to squash and overflow on a phone. Below, each row becomes a card with
   the thumbnail beside the details and a full-width Add to cart button.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

    .woocommerce-wishlist table.wishlist_table,
    .woocommerce-wishlist table.wishlist_table tbody {
        display: block;
        width: 100%;
        border: 0;
    }

    /* Column headings carry no meaning once the row is a card. */
    .woocommerce-wishlist table.wishlist_table thead {
        display: none;
    }

    .woocommerce-wishlist table.wishlist_table tbody tr {
        display: grid;
        grid-template-columns: 84px minmax(0, 1fr);
        column-gap: 14px;
        row-gap: 6px;
        align-items: center;
        position: relative;
        padding: 16px 40px 16px 16px;
        margin: 0 0 14px;
        border: 1px solid var(--lh-gray-medium);
        border-radius: var(--lh-radius-lg);
        background: var(--lh-white);
    }

    /* Reset the table-cell padding and rules inside the card. */
    .woocommerce-wishlist table.wishlist_table tbody td {
        display: block;
        padding: 0;
        border: 0;
        text-align: left;
        width: auto;
    }

    .woocommerce-wishlist table.wishlist_table tbody td.product-thumbnail {
        grid-column: 1;
        grid-row: 1 / span 3;
        align-self: start;
    }

    .woocommerce-wishlist table.wishlist_table tbody td.product-thumbnail img {
        width: 84px;
        height: auto;
        border-radius: var(--lh-radius);
    }

    .woocommerce-wishlist table.wishlist_table tbody td.product-name,
    .woocommerce-wishlist table.wishlist_table tbody td.product-price,
    .woocommerce-wishlist table.wishlist_table tbody td.product-stock-status {
        grid-column: 2;
    }

    .woocommerce-wishlist table.wishlist_table tbody td.product-name a {
        font-weight: 600;
        line-height: 1.35;
        color: var(--lh-black);
        text-decoration: none;
    }

    .woocommerce-wishlist table.wishlist_table tbody td.product-price {
        font-weight: 700;
        color: var(--lh-primary);
    }

    .woocommerce-wishlist table.wishlist_table tbody td.product-price del {
        font-weight: 400;
        color: var(--lh-gray);
        margin-right: 6px;
    }

    .woocommerce-wishlist table.wishlist_table tbody td.product-price ins {
        text-decoration: none;
    }

    .woocommerce-wishlist table.wishlist_table tbody td.product-stock-status {
        font-size: 0.8125rem;
        color: var(--lh-gray);
    }

    /* Full width across the card, below the thumbnail, so the tap target is
       not a cramped column. */
    .woocommerce-wishlist table.wishlist_table tbody td.product-add-to-cart {
        grid-column: 1 / -1;
        margin-top: 10px;
    }

    .woocommerce-wishlist table.wishlist_table tbody td.product-add-to-cart .button,
    .woocommerce-wishlist table.wishlist_table tbody td.product-add-to-cart a.button {
        display: block;
        width: 100%;
        padding: 12px 16px;
        text-align: center;
        font-size: 0.9375rem;
        border-radius: var(--lh-radius);
    }

    /* Remove control to the card corner, clear of the content. */
    .woocommerce-wishlist table.wishlist_table tbody td.product-remove {
        position: absolute;
        top: 8px;
        right: 8px;
        width: auto;
        margin: 0;
    }

    .woocommerce-wishlist table.wishlist_table tbody td.product-remove > div {
        justify-content: flex-end;
    }

    /* Footer controls stack rather than floating side by side. */
    .woocommerce-wishlist .yith_wcwl_wishlist_footer .yith_wcwl_wishlist_bulk_action,
    .woocommerce-wishlist .yith_wcwl_wishlist_footer .yith_wcwl_wishlist_update {
        float: none;
        width: 100%;
        margin-bottom: 12px;
    }

    .woocommerce-wishlist .yith_wcwl_wishlist_footer {
        margin-bottom: 48px;
    }
}