/* Mobile First Styles */
.taaable-container {
    font-family: inherit;
    margin: 20px 0;
}

.taaable-table-wrapper {
    display: none; /* Hidden on mobile */
}

.taaable-cards-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* Card Styles */
.taaable-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    /* overflow: hidden; REMOVED to allow tooltip to overflow */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    position: relative;
}

.taaable-card-header {
    position: relative;
    padding: 15px;
    text-align: center;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 8px 8px 0 0; /* Restore rounded corners */
}

.taaable-card-header img {
    max-height: 150px;
    width: auto;
    display: inline-block;
}

.taaable-card-body {
    padding: 15px;
}

.taaable-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #e91e63;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    z-index: 1;
}

.taaable-card-brand {
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.taaable-card-title {
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 10px 0;
    line-height: 1.4; /* 16px * 1.4 = 22.4px per line */
    
    /* STRICT 2-line limit with fixed height */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    
    /* Force height to always equal 2 lines */
    min-height: 2.8em; 
    height: 2.8em;
}

.taaable-card-title a {
    color: #333;
    text-decoration: none;
}

.taaable-card-price {
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: bold;
}

.taaable-old-price {
    text-decoration: line-through;
    color: #999;
    font-size: 0.8em;
    margin-right: 5px;
}

.taaable-current-price {
    color: #333;
}

.taaable-current-price.sale {
    color: #e91e63;
}

.taaable-btn-cta {
    display: inline-block;
    background: #4caf50;
    color: #fff;
    padding: 8px 12px;
    text-decoration: none;
    border-radius: 4px;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    line-height: 1.2;
    transition: background 0.3s;
    white-space: nowrap;
}

.taaable-btn-cta:hover {
    background: #43a047;
    color: #fff;
}

.taaable-btn-cta.block {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.taaable-controls {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.taaable-filter-group select {
    padding: 8px 30px 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    min-width: 180px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 10px center;
    background-size: 10px;
    cursor: pointer;
}

.taaable-sort-group button {
    padding: 8px 15px;
    background: #f1f1f1 !important;
    border: 1px solid #ccc !important;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 5px;
    color: #333 !important;
    font-size: 14px;
    line-height: 1.4;
}

.taaable-sort-group button:hover {
    background: #e1e1e1 !important;
    color: #000 !important;
}

/* Slider Mode Styles (Mobile) */
.taaable-layout-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 15px;
    padding-bottom: 20px; /* Space for scrollbar/dots */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

.taaable-layout-slider::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.taaable-layout-slider .taaable-card {
    flex: 0 0 85%;
    width: 85%;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    height: 100%; /* Fill slider height */
}

.taaable-slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.taaable-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ddd;
    cursor: pointer;
    transition: background 0.3s;
}

.taaable-dot.active {
    background: #e91e63; /* Pink accent */
}

@media (min-width: 768px) {
    .taaable-slider-dots {
        display: none;
    }

    .taaable-cards-wrapper {
        display: none;
    }

    .taaable-table-wrapper {
        display: block;
        overflow-x: auto;
    }

    .taaable-table {
        width: 100%;
        border-collapse: collapse;
        background: #fff;
    }

    .taaable-table th {
        background: #e91e63;
        color: #fff;
        padding: 15px;
        text-align: center; /* Centered headers */
        font-weight: bold;
    }

    .taaable-table td {
        padding: 15px;
        border-bottom: 1px solid #eee;
        vertical-align: middle;
    }
    
    /* Zebra Striping */
    .taaable-table tbody tr:nth-child(even) {
        background-color: #fef8fc; /* Updated custom color */
    }
    
    .taaable-table tbody tr:nth-child(odd) {
        background-color: #fff; /* White background for odd rows */
    }

    .taaable-col-photo {
        width: 120px;
        text-align: center;
    }

    .taaable-img-wrapper {
        position: relative;
        display: inline-block;
    }
    
    .taaable-img-link {
        display: block;
        text-decoration: none;
        border: none;
    }
    
    .taaable-img-wrapper img {
        max-width: 100px;
        height: auto;
    }

    .taaable-product-name {
        display: block;
        margin: 0 0 10px 0;
        font-size: 16px;
        font-weight: bold;
        line-height: 1.4;
    }

    .taaable-col-brand {
        width: 100px;
        text-align: center;
    }

    .taaable-col-price {
        width: 150px;
        text-align: center;
    }
    
    .taaable-price-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }
}

/* Discount Badge */
.taaable-discount-badge {
    display: inline-block;
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 12px;
    margin-left: 5px;
    vertical-align: middle;
    animation: taaable-pulse 2s infinite;
}

@keyframes taaable-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Replacement Label */
.taaable-replacement-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #ff9800, #f57c00);
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 12px;
    margin: 8px 0;
    cursor: help;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.taaable-replacement-icon {
    font-size: 12px;
}

/* Tooltip for Replacement Label */
.taaable-replacement-label::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.4;
    width: max-content;
    max-width: 220px; /* Allow flexibility */
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 9999; /* High z-index */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    pointer-events: none;
    white-space: normal; /* Ensure text wraps */
}

@media (max-width: 480px) {
    .taaable-replacement-label::after {
        max-width: 200px;
        width: 200px;
    }
}

.taaable-replacement-label::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: #333;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

/* Desktop adjustment for photo column placement */
@media (min-width: 768px) {
    .taaable-col-photo .taaable-replacement-label::after {
        left: 0;
        transform: none;
        text-align: left;
    }
    
    .taaable-col-photo .taaable-replacement-label::before {
        left: 20px;
        transform: translateX(-50%);
    }
}

.taaable-replacement-label:hover::after,
.taaable-replacement-label:hover::before,
.taaable-replacement-label:focus::after,
.taaable-replacement-label:focus::before {
    opacity: 1;
    visibility: visible;
}

/* Mobile touch support */
@media (hover: none) {
    .taaable-replacement-label:active::after,
    .taaable-replacement-label:active::before {
        opacity: 1;
        visibility: visible;
    }
}

/* Card specific adjustments */
.taaable-card-body .taaable-replacement-label {
    display: inline-flex;
    margin: 5px auto 10px;
}

.taaable-card-price .taaable-discount-badge {
    display: inline-block;
    margin: 0 0 0 5px;
    width: auto;
}