/* Comparison Section */
.comparison-section {
    background: #f7f3f3;
}

.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.section-title {
    font-size: 32px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 8px;
}

/* Comparison Table - CLEAN NO BORDERS */
.comparison-table {
    overflow: hidden;
}

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* ADD THIS FOR CHROME */
}

/* Set column widths for Chrome */
th:nth-child(1), td:nth-child(1) { width: 40%; } /* Qualities column */
th:nth-child(2), td:nth-child(2) { width: 18.5%; } /* GTG */
th:nth-child(3), td:nth-child(3) { width: 18.5%; } /* Arose */
th:nth-child(4), td:nth-child(4) { width: 18.5%; } /* Bella */
th:nth-child(5), td:nth-child(5) { width: 18.5%; } /* Daisies */

th {
    padding: 10px 20px;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    color: #1a1a1a;
}

th:first-child {
    text-align: left;
}

/* Brand Header Cells */
.brand-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    width: 100%; /* ADD THIS */
}

.brand-logo {
    width: 80px; /* MATCH IMAGE SIZE */
    height: 80px; /* MATCH IMAGE SIZE */
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: white;
    overflow: hidden; /* ADD THIS */
}

/* Fix image sizing */
.gtg-logo img,
.arose-logo img,
.bella-logo img,
.daisies-logo img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover; /* ADD THIS */
    display: block; /* ADD THIS */
}

.brand-name {
    margin-top: 12px;
    font-size: 16px;
    font-weight: 300;
}

/* Body Rows - NO VERTICAL BORDERS */
tbody tr {
    border-bottom: 2px solid #f0f0f0;
}

tbody tr:last-child {
    border-bottom: none;
}

td {
    padding: 8px;
    text-align: center;
    font-size: 16px;
    color: #1a1a1a;
    vertical-align: middle; /* ADD THIS */
}

td:first-child {
    text-align: left;
    font-weight: 500;
}

/* Quality Cells - First Column */
.quality-name {
    font-size: 15px;
    font-weight: 500;
    color: #333;
}

/* Value Cells */
.value-cell {
    font-size: 16px;
    font-weight: 500;
}

/* GTG Cells - Highlighted */
.gtg-cell {
    font-weight: 700;
}

/* Icon Cells - EXACT ICONS FROM IMAGE */
.icon-cell {
    font-size: 22px;
    vertical-align: middle; /* ADD THIS */
}

.check-icon {
    color: #28a745;
}

.cross-icon {
    color: #dc3545;
}

/* Number Cells */
.number-cell {
    font-size: 18px;
    font-weight: 600;
    vertical-align: middle; /* ADD THIS */
}

/* First column special formatting - NO ICONS */
td:first-child .quality-name {
    padding-left: 0;
}

.icon-cell-check {
    background-color: #ddf8e5;
}

/* Fix for content alignment in cells */
td, th {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Responsive */
@media (max-width: 992px) {
    .comparison-table {
        overflow-x: auto;
        display: block;
    }

    table {
        min-width: 800px;
    }

    th,
    td {
        padding: 18px 15px;
    }
}

@media (max-width: 768px) {
    section {
        padding: 60px 0;
    }

    .section-title {
        font-size: 28px;
    }

    th,
    td {
        padding: 16px 12px;
        font-size: 14px;
    }

    .brand-name {
        font-size: 16px;
    }

    .brand-logo {
        width: 60px; /* Smaller on mobile */
        height: 60px; /* Smaller on mobile */
        font-size: 20px;
    }

    .number-cell {
        font-size: 16px;
    }

    .icon-cell {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    .section-title {
        font-size: 24px;
    }

    th,
    td {
        padding: 14px 10px;
    }

    .quality-name {
        font-size: 14px;
    }

    .brand-logo {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }

    .brand-name {
        font-size: 14px;
    }

    .icon-cell {
        font-size: 18px;
    }
}