/** Shopify CDN: Minification failed

Line 18:0 Unexpected "<"
Line 213:0 Unexpected "<"

**/
/*// =============================================================================
// Ella Custom CSS - Customize The Style For Layout
// =============================================================================

// =============================================================================
//
// IMPORTANT DISCLAIMER
// Shopify is notifying shop owners about the need to convert scss files to css files.
// Please use only CSS to style the layout.
//
// =============================================================================*/
<style>
/* --- General Table Styling (Applied universally, then overridden) --- */
.comparison-table-container {
    margin: 20px auto; /* Center the table container */
    max-width: 1200px; /* Max width for desktop display */
    font-family: Arial, sans-serif;
    color: #333;
    overflow-x: auto; /* Allows horizontal scrolling if table is too wide on very narrow screens (desktop) */
}

.comparison-table-container table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.comparison-table-container th,
.comparison-table-container td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    vertical-align: top;
    white-space: normal; /* Allow text wrapping */
}

/* --- Desktop Specific Styling (Min-width media query for clarity) --- */
@media screen and (min-width: 769px) {
    .comparison-table-container thead th {
        background-color: #f2f2f2;
        font-weight: bold;
        color: #555;
        text-transform: uppercase;
        font-size: 0.9em;
        position: static;
    }

    .comparison-table-container th.feature-header {
        background-color: #f2f2f2;
        width: 15%; /* Feature column */
    }
    .comparison-table-container th:nth-of-type(2),
    .comparison-table-container td:nth-of-type(2) {
        width: 22%; /* Relaxus */
    }
    .comparison-table-container th:nth-of-type(3),
    .comparison-table-container td:nth-of-type(3) {
        width: 35%; /* Silhouet-Tone */
    }
    .comparison-table-container th:nth-of-type(4),
    .comparison-table-container td:nth-of-type(4) {
        width: 28%; /* Earthlite */
    }
    /* Total width: 15% + 22% + 35% + 28% = 100% */

    .comparison-table-container tbody tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    .comparison-table-container tbody tr:hover {
        background-color: #f1f1f1;
    }
}


/* --- Mobile Specific Styling (Feature-Centric View with Brand Prefixes) --- */
@media screen and (max-width: 768px) {
    .comparison-table-container {
        padding: 0 10px; /* Padding on sides for small screens */
        overflow-x: hidden; /* Prevent horizontal scrolling on mobile, as we're stacking */
    }

    .comparison-table-container table {
        border: 0;
        box-shadow: none;
        width: 100%;
    }

    .comparison-table-container thead {
        display: none; /* Hide the main table header on mobile */
    }

    /* Each table row (<tr>) becomes a distinct "feature card" */
    .comparison-table-container tr {
        display: block;
        margin-bottom: 20px;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        overflow: hidden; /* Ensures border-radius applies nicely */
        background-color: #fff;
        padding-top: 0; /* Reset default padding */
    }

    /* Style for the main Feature Name heading for each card (e.g., "Length") */
    .comparison-table-container td.feature-name {
        display: block;
        background-color: #f0f0f0;
        font-weight: bold;
        padding: 12px 15px;
        text-align: center; /* Center the feature name heading */
        color: #333;
        border-bottom: 1px solid #ddd;
        font-size: 1.1em; /* Slightly larger for emphasis */
        margin-bottom: 5px; /* Space between feature header and first product detail */
    }

    /* Hide the "Company" feature name and its value as it's typically not needed in this layout */
    .comparison-table-container tr:first-of-type td.feature-name {
        display: none; /* Hide 'Company' label */
    }

    .comparison-table-container tr:first-of-type td:not(.feature-name) {
        display: none; /* Hide 'Relaxus', 'Silhouet-Tone', 'Earthlite' values for 'Company' */
    }

    /* Styles for the individual product data points within each feature card */
    .comparison-table-container tbody td:not(.feature-name) {
        display: flex; /* Use flexbox for brand name + value pairing */
        flex-direction: row; /* Default: brand name and value side-by-side */
        justify-content: space-between; /* Push brand name left, value right */
        align-items: flex-start; /* Align content to top within flex item */
        flex-wrap: wrap; /* Allow content to wrap */
        padding: 8px 15px; /* Padding for each product detail line */
        border-bottom: 1px dashed #eee; /* Light separator for each product detail */
        position: relative;
    }

    .comparison-table-container tbody td:not(.feature-name):last-of-type {
        border-bottom: none; /* No border for the last product detail in a feature card */
    }

    /* --- Inject the Brand Names into each feature's detail line --- */
    .comparison-table-container tbody td:nth-of-type(2)::before {
        content: "Relaxus: Apollo: "; /* Explicitly add brand name + colon */
        display: inline; /* Keep on same line with value */
        font-weight: bold;
        color: #007bff; /* Highlight brand name */
        flex-shrink: 0; /* Prevent from shrinking */
        flex-basis: 45%; /* Allocate space for the brand name */
        text-align: left;
        padding-right: 5px; /* Small gap between brand name and value */
    }
    .comparison-table-container tbody td:nth-of-type(3)::before {
        content: "Silhouet-Tone: Laguna Edge: ";
        display: inline;
        font-weight: bold;
        color: #007bff;
        flex-shrink: 0;
        flex-basis: 45%;
        text-align: left;
        padding-right: 5px;
    }
    .comparison-table-container tbody td:nth-of-type(4)::before {
        content: "Earthlite: Ellora LX: ";
        display: inline;
        font-weight: bold;
        color: #007bff;
        flex-shrink: 0;
        flex-basis: 45%;
        text-align: left;
        padding-right: 5px;
    }

    /* Style the actual value content (the text inside the td) */
    .comparison-table-container tbody td:not(.feature-name) {
        /* The actual value content will take the remaining space */
        flex-grow: 1; /* Allow value to grow and take space */
        flex-basis: auto; /* Let content dictate base size */
        text-align: right; /* Align value to the right */
        padding-left: 0; /* Reset internal padding if needed */
        padding-right: 0; /* Reset internal padding if needed */
    }

    /* Further optimization for very small screens (e.g., < 480px) */
    @media screen and (max-width: 480px) {
        .comparison-table-container tbody td:not(.feature-name) {
            flex-direction: column; /* Stack brand name above value */
            align-items: flex-start; /* Align all to the left */
            padding: 8px 15px; /* Maintain padding */
        }
        .comparison-table-container tbody td:not(.feature-name)::before { /* Brand Name */
            width: 100%; /* Take full width */
            text-align: left;
            margin-bottom: 3px; /* Space between brand name and value */
            padding-right: 0;
        }
        /* Style the actual value content when stacked vertically */
        .comparison-table-container tbody td:not(.feature-name) {
            width: 100%; /* Value takes full width */
            text-align: left;
            padding-top: 0; /* Remove top padding if already handled by margin-bottom on brand name */
        }
    }
}
</style>