/* Custom Table — Kart-Boat Widget
   ------------------------------------------------------------------ */

.ct-kart-boat-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ct-kart-boat-table {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 2px;
    width: 100%;
    min-width: 900px;
    background: transparent;
    font-family: inherit;
}

.ct-row {
    display: contents;
}

.ct-cell {
    padding: 18px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 60px;
    line-height: 1.4;
    box-sizing: border-box;
    word-break: break-word;
}

/* Header row */
.ct-header-row .ct-cell {
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.3px;
}

/* Data row label (first cell) */
.ct-data-row .ct-cell.ct-label,
.ct-feature-row .ct-cell.ct-label {
    font-weight: 500;
    font-size: 16px;
}

/* Data row values */
.ct-data-row .ct-cell:not(.ct-label) {
    font-size: 18px;
    font-weight: 500;
}

/* Feature row */
.ct-feature-row .ct-cell:not(.ct-label) {
    flex-direction: column;
    padding: 22px 18px;
    text-align: center;
    justify-content: center;
}

.ct-feature-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.3;
}

.ct-feature-desc {
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.9;
}

/* ------------------------------------------------------------------
   Responsive — transpose into 3 per-column "store cards" on mobile.
   Each card shows its store title as a colored header, then
   every row label + its value for that store.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {

    .ct-kart-boat-wrap {
        overflow-x: visible;
    }

    .ct-kart-boat-table {
        display: flex;
        flex-direction: column;
        min-width: 0;
        gap: 0;
    }

    /* keep .ct-row's children as direct flex items of the table */
    .ct-row { display: contents; }

    /* Hide the entire Model column on mobile — row labels are
       surfaced inline via [data-label] instead. */
    .ct-cell.ct-model { display: none !important; }

    /* Group the remaining cells into 3 vertical stacks */
    .ct-col1 { order: 1; }
    .ct-col2 { order: 2; }
    .ct-col3 { order: 3; }

    /* Visual gap between the 3 cards (first card has no top margin) */
    .ct-header-row .ct-col2,
    .ct-header-row .ct-col3 {
        margin-top: 22px;
    }

    /* Card header styling */
    .ct-header-row .ct-cell {
        font-size: 20px;
        padding: 16px 18px;
        border-radius: 10px 10px 0 0;
        min-height: 0;
    }

    /* --- Data rows: label inline with value --- */
    .ct-data-row .ct-cell {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        padding: 13px 18px;
        min-height: 48px;
        gap: 14px;
        font-size: 16px;
    }

    .ct-data-row .ct-cell::before {
        content: attr(data-label);
        font-size: 14px;
        font-weight: 500;
        opacity: 0.72;
        flex: 1 1 auto;
    }

    /* --- Feature row: stacked content with a small caps label --- */
    .ct-feature-row .ct-cell {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        padding: 16px 18px 20px;
        border-radius: 0 0 10px 10px;
    }

    .ct-feature-row .ct-cell::before {
        content: attr(data-label);
        display: block;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        opacity: 0.65;
        margin-bottom: 10px;
    }

    .ct-feature-title {
        font-size: 17px;
        margin-bottom: 6px;
    }

    .ct-feature-desc {
        font-size: 14px;
    }
}