/* ==========================================================================
   Zard Product Table - Frontend Styles (v1.4)
   Rewritten for clarity and to resolve layout bugs.
   ========================================================================== */

/* 1. Base Table Container Styles
   -------------------------------------------------------------------------- */
/* Use a highly specific selector to ensure these styles override theme defaults. */
table.shop_attributes.zpt-table {
    width: 100%;
    border-collapse: separate; /* separate is better for border-radius */
    border-spacing: 0;
    margin-bottom: 1.5em;
    font-size: 0.9em;
    border: none; /* Explicitly remove all borders */
    border-radius: 8px; /* Rounded corners for the container */
    overflow: hidden; /* This is crucial for the border-radius to work */
}

/* 2. Base Cell Styles (th, td)
   -------------------------------------------------------------------------- */
/* General styling for all table cells */
table.shop_attributes.zpt-table th,
table.shop_attributes.zpt-table td {
    padding: 8px 12px; /* Shorter rows */
    text-align: right;
    vertical-align: middle; /* Vertical centering */
    border: none; /* Ensure no cell has borders */
}

/* Style for the title cells (th) */
table.shop_attributes.zpt-table th {
    font-weight: 700;
    text-align: center;
}

/* Fix for extra margins added by WordPress's wpautop filter */
table.shop_attributes.zpt-table td p:last-child {
    margin: 0;
}

/* 3. Mobile-First Layout (Default)
   -------------------------------------------------------------------------- */
/* In the default 2-column mobile view, set a width for the title column. */
table.shop_attributes.zpt-table th {
    width: 25%;
}

/* Standard zebra-striping for mobile: every even <tr> gets a background color. */
table.shop_attributes.zpt-table tr:nth-child(even) > * {
    background-color: #f8faff; /* Light blue for even rows */
}

/* 4. Desktop Grid Layout
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
    /* Change the layout engine to CSS Grid for the table body */
    table.shop_attributes.zpt-table tbody {
        display: grid;
        grid-template-columns: 13% 37% 13% 37%; /* 4-column layout */
    }

    /* This is the magic part: make <tr> invisible to the layout engine,
       so its children (th, td) become the direct grid items. */
    table.shop_attributes.zpt-table tr {
        display: contents;
    }
    
    /* Let the grid control the width, not the mobile setting. */
    table.shop_attributes.zpt-table th {
        width: auto;
    }

    /* --- Desktop Zebra Striping --- */

    /* First, RESET the mobile striping completely to avoid conflicts. */
    table.shop_attributes.zpt-table tr:nth-child(even) > * {
        background-color: transparent;
    }
    table.shop_attributes.zpt-table tr:nth-child(odd) > * {
        background-color: transparent;
    }

    /* Now, apply the NEW striping logic for the 4-column grid.
       A visual row is made of two <tr> elements. We want to color every second visual row.
       This selector targets the 3rd & 4th <tr> (visual row 2), 
       then the 7th & 8th <tr> (visual row 4), and so on. */
    table.shop_attributes.zpt-table tr:nth-child(4n - 1) > *,
    table.shop_attributes.zpt-table tr:nth-child(4n) > * {
        background-color: #f8faff;
    }
}