/* ITmees WC Table View - Table and Card Styles */

/* Hide WooCommerce's <li> wrappers that leak through from content-product.php template */
.itv-product-table tbody > li,
.itv-table-wrapper li.product {
    display: none !important;
}

.itv-table-wrapper { overflow-x: auto; width: 100%; flex-basis: 100%; }
.itv-product-table { width: 100%; border-collapse: collapse; background: var(--base-3, #fff); table-layout: fixed; }
.itv-product-table th { background: var(--accent, #3967c2); color: var(--base-2, #f5f7fa); padding: 12px 15px; text-align: left; font-weight: 700; white-space: nowrap; }
.itv-product-table td { padding: 10px 15px; border-bottom: 1px solid var(--base, #f0f0f0); vertical-align: middle; }
.itv-product-row:nth-child(even) { background: var(--base-2, #f5f7fa); }
.itv-sticky-header { position: sticky; top: 0; z-index: 10; }
th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort]:hover { background: var(--accent-3, #FF9400); }
th[data-sort]::after { content: ' \2195'; opacity: 0.8; font-size: 1.1em; margin-left: 5px; }
th.sort-asc::after { content: ' \2191'; opacity: 1; font-size: 1.1em; }
th.sort-desc::after { content: ' \2193'; opacity: 1; font-size: 1.1em; }
.itv-col-image { width: 60px; }
.itv-col-image img { display: block; width: 50px; height: 50px; object-fit: cover; }
.itv-col-sku { width: 100px; }
.itv-col-brand { width: 120px; }
.itv-col-price { width: 120px; }
.itv-col-cart { width: 70px; white-space: nowrap; }
.itv-col-name { overflow: hidden; }
.itv-col-name a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--contrast, #141414); text-decoration: none; transition: all 1s ease-in-out; }
.itv-col-name a:hover { white-space: normal; overflow: visible; color: var(--accent, #3967c2); }
.itv-product-table .quantity { width: 60px; display: inline-block; margin-right: 5px; }
.itv-product-table .button { padding: 8px 12px; font-size: 14px; }
.itv-product-table .add_to_cart_button { font-size: 0; width: 40px; height: 40px; position: relative; overflow: hidden; text-indent: -9999px; }
.itv-product-table .add_to_cart_button::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.6L5.2 14c-.1.3-.2.6-.2 1 0 1.1.9 2 2 2h12v-2H7.4c-.1 0-.2-.1-.2-.2v-.1l.9-1.7h7.4c.7 0 1.4-.4 1.7-1l3.9-7c.1-.2.2-.4.2-.6 0-.6-.4-1-1-1H5.2l-.9-2H1zm16 16c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E") center/20px no-repeat; text-indent: 0; }

/* ==========================================================================
   Mobile card layout - FALLBACK for edge cases
   Note: Most mobile devices won't load this CSS at all (wp_is_mobile check in PHP).
   This is a safety net for tablets or desktop users who resize their browser.
   ========================================================================== */
@media (max-width: 768px) {
    /* Reset table display - MUST include td */
    .itv-product-table,
    .itv-product-table tbody,
    .itv-product-table tr,
    .itv-product-table td {
        display: block !important;
    }
    
    .itv-product-table thead {
        display: none !important;
    }
    
    /* Card layout */
    .itv-product-row {
        display: grid !important;
        grid-template-columns: 70px 1fr;
        grid-template-rows: auto auto auto auto;
        gap: 5px 15px;
        padding: 15px;
        margin-bottom: 15px;
        background: var(--base-3, #fff);
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        border-bottom: none;
        text-align: center;
    }
    
    /* Image spans all rows on left */
    .itv-product-row .itv-col-image {
        grid-column: 1;
        grid-row: 1 / 5;
        padding: 0;
        border: none;
        width: auto;
    }
    
    .itv-product-row .itv-col-image img {
        width: 150px;
        height: 150px;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Content cells stack on right */
    .itv-product-row .itv-col-name {
        grid-column: 2;
        grid-row: 1;
        padding: 0;
        border: none;
    }
    
    .itv-product-row .itv-col-name a {
        white-space: normal;
        overflow: visible;
        font-weight: 600;
    }
    
    .itv-product-row .itv-col-sku {
        grid-column: 2;
        grid-row: 2;
        padding: 0;
        border: none;
        width: auto;
        font-size: 0.9em;
        color: var(--contrast-3, #595959);
    }
    
    .itv-product-row .itv-col-brand {
        grid-column: 2;
        grid-row: 3;
        padding: 0;
        border: none;
        width: auto;
        font-size: 0.9em;
    }
    
    .itv-product-row .itv-col-price {
        grid-column: 2;
        grid-row: 4;
        padding: 0;
        border: none;
        width: auto;
        font-weight: 700;
        color: var(--accent, #3967c2);
    }
    
    /* Cart button - full width at bottom */
    .itv-product-row .itv-col-cart {
        grid-column: 1 / -1;
        grid-row: 5;
        margin-top: 10px;
        padding: 10px 0 0 0;
        border-top: 1px solid var(--base, #f0f0f0);
        border-bottom: none;
        width: auto;
    }
    
    /* Mobile labels */
    .itv-product-row td::before {
        content: attr(data-label);
        font-weight: 700;
        margin-right: 0.5em;
        color: var(--contrast-3, #595959);
    }
    
    /* Hide labels for image and cart */
    .itv-col-image::before,
    .itv-col-cart::before {
        display: none !important;
        content: none !important;
    }
    
    /* Remove alternating row background on cards */
    .itv-product-row:nth-child(even) {
        background: var(--base-3, #fff);
    }
}