/* =============================================================
   WISHLIST PAGE  (TI WooCommerce Wishlist plugin)
   Plugin selectors: .tinv-wishlist, .tinvwl-table-manage-list

   Refreshed to match the site-wide redesign (cart / checkout /
   category): Inter typography, red (#c8102e) primary buttons with
   outline-red secondaries, 6px radii, and the shared neutral palette
   (--vb-text #1a1a1a, --vb-muted #6b6b6b, --vb-border #e5e5e5).
   ============================================================= */

/* ---------- Tokens ----------------------------------------- */
.tinv-wishlist {
    --wl-red:           #c8102e;
    --wl-red-hover:     #a50d26;
    --wl-red-soft:      rgba(200, 16, 46, 0.05);
    --wl-btn-bg:        #c8102e;   /* legacy alias → now red */
    --wl-btn-bg-hover:  #a50d26;
    --wl-border:        #e5e5e5;
    --wl-input-border:  #e5e5e5;
    --wl-text:          #1a1a1a;
    --wl-muted:         #6b6b6b;
    --wl-radius:        6px;
}

/* ---------- Base typography (Inter everywhere) ------------- */
/* The wishlist page isn't checkout/cart, so it doesn't load checkout.css.
   Apply Inter within the wishlist scope, and again on form controls with
   `*` since inputs/selects/buttons don't inherit font-family. */
.tinv-wishlist,
.tinv-wishlist * {
    font-family: 'Inter', sans-serif;
}
.tinv-wishlist {
    color: var(--wl-text);
}

/* ---------- Page heading ----------------------------------- */
.tinv-wishlist .tinv-header h2 {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.45px;
    color: var(--wl-text);
    margin: 0 0 1rem;
}

/* Hide header entirely for guests (plugin shows login prompt instead) */
body:not(.logged-in) .tinv-wishlist .tinv-header { display: none; }

/* ---------- Table layout ----------------------------------- */
.tinv-wishlist table {
    border-collapse: collapse;
    width: 100%;
}
.tinv-wishlist table td,
.tinv-wishlist table th {
    padding: 15px 1em;
    vertical-align: middle;
}
.tinvwl-table-manage-list thead th {
    font-weight: 600;
    color: var(--wl-text);
    border-bottom: 2px solid var(--wl-border);
}
.tinvwl-table-manage-list tbody tr {
    border-bottom: 1px solid var(--wl-border);
    transition: background-color 0.15s ease;
}
.tinvwl-table-manage-list tbody tr:hover {
    background-color: #fafafa;
}
.tinvwl-table-manage-list tfoot tr   { border-bottom: 0; }
.tinvwl-table-manage-list tfoot td   { padding: 25px 0; }

/* ---------- Product thumbnail ------------------------------ */
.tinv-wishlist td.product-thumbnail a {
    display: block;
    position: relative;
}
.tinv-wishlist .product-thumbnail img {
    width: 100px;
    max-width: none;
    height: auto;
    object-fit: contain;
}
@media (min-width: 768px) {
    .tinv-wishlist td.product-thumbnail,
    .tinv-wishlist th.product-thumbnail {
        width: 132px;
        max-width: 132px;
    }
}
@media (min-width: 1200px) {
    .tinv-wishlist td.product-name { width: 40%; }
}

/* ---------- Product meta ----------------------------------- */
.tinv-wishlist .product-stock span,
.tinv-wishlist time.entry-date {
    font-size: 14px;
    white-space: nowrap;
}
.tinv-wishlist time.entry-date { color: var(--wl-muted); }
.tinv-wishlist .product-stock i {
    margin-right: 5px;
    vertical-align: middle;
}
/* Stock status colour cues (matches redesign green / red) */
.tinv-wishlist .product-stock .stock.in-stock   { color: #00a63e; }
.tinv-wishlist .product-stock .stock.out-of-stock { color: var(--wl-red); }

/* Product name link */
.tinv-wishlist td.product-name a {
    color: var(--wl-text);
    font-weight: 500;
    text-decoration: none;
}
.tinv-wishlist td.product-name a:hover { color: var(--wl-red); }

/* Unit price */
.tinv-wishlist td.product-price .amount { color: var(--wl-text); font-weight: 600; }

/* ---------- Custom checkbox (replaces native) -------------- */
.tinvwl-table-manage-list .product-cb {
    position: relative;
    width: 40px;
}
.tinv-wishlist table input[type=checkbox] {
    width: 20px;
    height: 20px;
    opacity: 0;             /* hide native; click-through stays */
    position: relative;
    z-index: 2;
    cursor: pointer;
}
.tinvwl-table-manage-list .product-cb::before {
    /* Faux checkbox box */
    content: "";
    position: absolute;
    left: 15px;
    top: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    border: 1px solid var(--wl-input-border);
    background: #fff;
    border-radius: 3px;
}
.tinvwl-table-manage-list .product-cb.check::before {
    /* Fill the box red when selected */
    border-color: var(--wl-red);
    background: var(--wl-red);
}
.tinvwl-table-manage-list .product-cb.check::after {
    /* Checkmark when .check class added by plugin */
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 12px;
    margin: -8px 0 0 -3px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ---------- Remove (×) button ------------------------------ */
.tinv-wishlist .product-remove button {
    background: transparent;
    border: 0;
    padding: 0;
    width: 20px;
    height: 20px;
    font-size: 24px;
    line-height: 1;
    color: var(--wl-muted);
    cursor: pointer;
    transition: color 0.15s ease;
}
.tinv-wishlist .product-remove button:hover { color: #c8102e; }

/* ---------- Action buttons --------------------------------- */
/* Base shape shared by every wishlist button (matches the redesigned
   cart/checkout CTAs: Inter, 6px radius, solid weight). Covers the
   per-row Add to Cart, Apply Action, Add Selected/All to Cart,
   navigation "Return to shop", and modal buttons. */
.woocommerce .tinvwl-table-manage-list button.button,
.tinvwl-table-manage-list .product-action button.button.alt,
.tinvwl-input-group button.button,
.tinv-wishlist ul.navigation-button > li:nth-child(2) a {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 15px;
    padding: 11px 22px;
    line-height: 1.5;
    border-radius: var(--wl-radius);
    outline: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Primary — solid red. The main bulk CTAs (Apply Action, Add Selected
   to Cart, Add All to Cart) and any other plugin button default here. */
.woocommerce .tinvwl-table-manage-list button.button,
.tinvwl-input-group button.button {
    background-color: var(--wl-red);
    border: 1px solid var(--wl-red);
    color: #fff;
}
.woocommerce .tinvwl-table-manage-list button.button:hover,
.tinvwl-input-group button.button:hover {
    background-color: var(--wl-red-hover);
    border-color: var(--wl-red-hover);
    color: #fff;
    text-decoration: none;
}

/* Secondary — outline red. Per-row Add to Cart and the footer
   "Return to shop" link: red border + red text, fills red on hover. */
.tinvwl-table-manage-list .product-action button.button.alt,
.tinv-wishlist ul.navigation-button > li:nth-child(2) a {
    background-color: #fff;
    border: 1px solid var(--wl-red);
    color: var(--wl-red);
}
.tinvwl-table-manage-list .product-action button.button.alt:hover,
.tinv-wishlist ul.navigation-button > li:nth-child(2) a:hover {
    background-color: var(--wl-red);
    border-color: var(--wl-red);
    color: #fff;
    text-decoration: none;
}
.tinvwl-table-manage-list .product-action button.button.alt i,
.tinv-wishlist ul.navigation-button > li:nth-child(2) a i {
    color: inherit;
}

.tinv-wishlist .product-action { width: 160px; }

/* Empty-state "Return To Shop" button (ti-wishlist-empty.php) — outline red */
.tinv-wishlist .return-to-shop a.button {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 15px;
    padding: 11px 22px;
    line-height: 1.5;
    border-radius: var(--wl-radius);
    background-color: #fff;
    border: 1px solid var(--wl-red);
    color: var(--wl-red);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.tinv-wishlist .return-to-shop a.button:hover {
    background-color: var(--wl-red);
    color: #fff;
    text-decoration: none;
}

/* Hide the duplicate Update-Cart button the plugin emits */
button.button.tinvwl-button[value="product_update"] { display: none !important; }

/* ---------- Actions dropdown + Apply button (inline group) -- */
.tinvwl-input-group {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    flex-wrap: nowrap;
    vertical-align: middle;
}
.vb-wishlist-select label {
    position: relative;
    display: inline-block;
}
.tinvwl-input-group .form-control,
#vb-wishlist-select {
    border-radius: var(--wl-radius);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #fff;
    padding: 10px 40px 10px 14px;   /* room for arrow on right */
    border: 1px solid var(--wl-input-border);
    height: auto;
    line-height: 1.5;
    margin: 0;
    flex: 0 0 auto;
    min-width: 180px;
}

/* Button sits flush against the select */
.tinvwl-input-group .tinvwl-input-group-btn,
.tinvwl-input-group .input-group-btn,
.tinvwl-input-group .input-group-append {
    display: inline-flex;
    margin-left: 0;
}
.tinvwl-input-group button.button {
    margin-left: -1px;   /* collapse adjacent borders */
    white-space: nowrap;
}

/* Down-chevron arrow — anchor to the SELECT, not the whole group,
   so it stays on the dropdown even when a button follows. */
.tinvwl-input-group {
    /* container has no ::after now */
}
.tinvwl-input-group .form-control:focus,
#vb-wishlist-select:focus {
    border-color: var(--wl-red);
    box-shadow: none;
    outline: none;
}
.tinvwl-input-group > .form-control,
#vb-wishlist-select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%236b6b6b' d='M6 8L0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
}
.vb-wishlist-select label::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 12px;
    height: 8px;
    pointer-events: none;
    transform: translateY(-50%);
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%236b6b6b' d='M6 8L0 0h12z'/></svg>") no-repeat center / contain;
}

/* ---------- Footer navigation (Return to Shop etc.) -------- */
.tinv-wishlist ul.navigation-button {
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0;
}
.tinv-wishlist ul.navigation-button > li {
    display: inline-block;
    float: none;
}
.tinv-wishlist ul.navigation-button > li:first-child { display: none; } /* hide "Wishlists" parent link */
.tinv-wishlist ul.navigation-button > li:nth-child(2) i {
    margin-right: 5px;
    vertical-align: middle;
}

/* ---------- Share/social buttons --------------------------- */
.tinv-wishlist .social-buttons li a.social {
    transition: opacity 0.3s ease;
}
.tinv-wishlist .social-buttons li a.social:hover { opacity: 0.8; }

/* =============================================================
   RESPONSIVE
   ============================================================= */

/* Tablet range: 641–991px
   Matches the TinvWL plugin's own stacking breakpoint (640px).
   - Keep table columns intact (date, stock visible) — real table layout
   - Per-row "Add to Cart" becomes icon-only (text hidden) to save width
   - tfoot rows wrap naturally:
       row 1: Actions dropdown + Apply Action
       row 2: Add Selected to Cart + Add All to Cart
   At ≤640px, the plugin AND our mobile rules stack cells together.   */
@media (min-width: 641px) and (max-width: 991px) {
    .tinv-wishlist .tinv-header h2 { font-size: 18px; }

    /* Add to Cart button per row — show text + icon, auto-sized so it
       doesn't stretch to a full-width empty bar when the plugin stacks
       cells at this viewport. */
    .tinv-wishlist .product-action button.button .tinvwl-txt {
        display: inline !important;
    }
    .tinv-wishlist .product-action button.button {
        display: inline-block !important;
        width: auto !important;
        min-width: 0;
        max-width: 100%;
        padding: 10px 22px;
        white-space: nowrap;
    }
    .tinv-wishlist .product-action button.button i {
        margin-right: 6px;
        font-size: 16px;
    }
    .tinv-wishlist .product-action {
        width: auto !important;
        text-align: center;
    }

    /* Tighten the remove column */
    .tinv-wishlist .tinvwl-table-manage-list .product-remove {
        padding: 0;
        width: 30px;
    }

    /* tfoot footer: allow content blocks to wrap onto multiple rows */
    .tinv-wishlist tfoot td {
        padding: 20px 0;
    }
    .tinv-wishlist tfoot .tinvwl-to-left,
    .tinv-wishlist tfoot .tinvwl-to-right {
        float: none !important;
        width: 100% !important;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
        margin: 0 0 12px;
        text-align: left !important;
    }
    .tinv-wishlist tfoot .tinvwl-to-right:last-child { margin-bottom: 0; }

    /* Actions dropdown + Apply Action stay inline as an input-group,
       but don't stretch full width. */
    .tinvwl-input-group {
        width: auto;
        max-width: 100%;
        flex-wrap: nowrap;
    }
    .tinvwl-input-group .form-control,
    #vb-wishlist-select {
        min-width: 0;
        width: 200px;
    }
    .tinvwl-input-group button.button {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* "Add Selected to Cart" / "Add All to Cart" — sit on their own row, side-by-side */
    .tinv-wishlist tfoot .tinvwl-to-right.look_in {
        gap: 12px;
    }
    .tinv-wishlist tfoot .tinvwl-to-right.look_in button.button {
        flex: 0 0 auto;
    }
}

/* Mobile — stack table cells vertically.
   Matches the TinvWL plugin's max-width: 640px breakpoint so our rules
   align with the plugin's own stacking instead of fighting it. */
@media (max-width: 640px) {
    .tinv-wishlist table.tinvwl-table-manage-list thead th.product-name,
    .tinv-wishlist table.tinvwl-table-manage-lists thead th.wishlist-name {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
    .tinv-wishlist table.tinvwl-table-manage-list tbody td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        border-bottom: 0;
    }
    .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-remove {
        display: block;
        width: auto !important;
        float: left;
        padding-left: 0;
    }
    .tinv-wishlist .tinvwl-table-manage-list .product-cb.check::after {
        left: 50%;
        margin-left: 1px;
    }
    .tinv-wishlist tfoot .tinvwl-to-left:not(:empty),
    .tinv-wishlist tfoot .tinvwl-to-left + .tinvwl-to-right {
        float: none;
        width: 100% !important;
    }
    .tinv-wishlist .social-buttons { text-align: left; }
    .tinv-wishlist .product-stock span { display: inline-block; }
    .vb-wishlist-select { float: left; margin-top: 10px; }
    .tinv-wishlist ul.navigation-button,
    .tinv-wishlist ul.navigation-button > li {
        width: 100% !important;
        max-width: 100%;
    }
    .tinv-wishlist ul.navigation-button > li:nth-child(2) a {
        width: 100%;
        text-align: center;
    }

    /* Per-row Add to Cart: show the text again on mobile (the tablet
       icon-only rule doesn't apply here), and constrain width so it
       doesn't stretch to the full td. */
    .tinv-wishlist .product-action button.button .tinvwl-txt {
        display: inline !important;
    }
    .tinv-wishlist .product-action button.button {
        display: inline-block;
        width: auto;
        max-width: 100%;
        padding: 12px 24px;
    }
    .tinv-wishlist .product-action button.button i {
        margin-right: 6px;
    }

    /* Actions dropdown + Apply Action — STACK VERTICALLY on mobile
       so the Apply button doesn't get pushed off-screen. */
    .tinvwl-input-group {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        gap: 10px;
    }
    .tinvwl-input-group .vb-wishlist-select,
    .tinvwl-input-group .input-group-btn,
    .tinvwl-input-group > span,
    .tinvwl-input-group > div {
        width: 100%;
        margin: 0;
    }
    .tinvwl-input-group .form-control,
    .tinvwl-input-group #vb-wishlist-select,
    #vb-wishlist-select {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
    .tinvwl-input-group button.button {
        width: 100%;
        margin-left: 0 !important;   /* undo desktop's -1px border collapse */
        padding: 12px 16px;
        white-space: nowrap;
    }

    /* Add Selected / Add All to Cart — half-and-half on the same row */
    .tinv-wishlist tfoot .tinvwl-to-right.look_in {
        display: flex;
        gap: 10px;
        margin-top: 12px;
    }
    .tinv-wishlist tfoot .tinvwl-to-right.look_in button.button {
        flex: 1 1 50%;
        min-width: 0;
        padding: 10px 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tinv-wishlist .tinvwl-table-manage-list tfoot .tinvwl-to-right .button,
    .tinv-wishlist .tinvwl-table-manage-list tfoot .tinvwl-to-right button {
        margin: unset;
    }

    .tinv-wishlist .tinvwl-to-left .tinvwl-input-group .form-control+.tinvwl-input-group-btn {
        padding: unset;
    }
}