/* =========================================================
   DPT TABLE STYLES - FULL FIX & LIST VIEW (DESKTOP & MOBILE)
   ========================================================= */

.dpt-table-wrapper { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    color: #444; 
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
}

/* --- 1. ADAPTIVE CONTROLS & FILTERS --- */

.dpt-table-wrapper .dpt-controls { 
    display: flex; 
    flex-wrap: wrap; 
    align-items: center; 
    gap: 12px; 
    margin-bottom: 25px; 
    width: 100%;
}

.dpt-table-wrapper .dpt-controls input[type="text"], 
.dpt-table-wrapper .dpt-controls input[type="search"], 
.dpt-table-wrapper .dpt-controls select,
.dpt-table-wrapper .dpt-stock-filter-label,
.dpt-table-wrapper .dpt-price-filter-label { 
    margin: 0;
    padding: 0 15px; 
    font-size: 14px; 
    border: 1px solid #ddd; 
    border-radius: 6px; 
    background-color: #fff; 
    height: 42px; 
    box-sizing: border-box;
    display: flex;
    align-items: center;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* input[type="search"] gets its own native rendering in Safari/Chrome
   (a rounded "search field" appearance with its own internal padding) that
   fights with the height/box-sizing set above, making it visually taller or
   offset compared to the select/checkbox next to it. Resetting appearance
   makes it behave like a normal box-sized text input. */
.dpt-table-wrapper .dpt-controls input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
}
.dpt-table-wrapper .dpt-controls input[type="search"]::-webkit-search-decoration,
.dpt-table-wrapper .dpt-controls input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.dpt-table-wrapper #dpt-live-search { 
    flex: 2 1 300px; 
    max-width: 100%; 
    margin-top: 0 !important;
}

/* Defensive override: guarantees this wins over any stray rule setting a
   negative margin-top on the search box (e.g. old cached CSS, theme
   Customizer Additional CSS, or a page builder's custom CSS field) even if
   that rule also uses !important and loads later in the page - repeating
   the ID selector deliberately boosts specificity above a plain double-ID
   rule like `#dpt-table-wrapper #dpt-live-search`. */
#dpt-table-wrapper #dpt-live-search#dpt-live-search {
    margin-top: 0 !important;
}

.dpt-table-wrapper .dpt-controls select,
.dpt-table-wrapper .dpt-stock-filter-label,
.dpt-table-wrapper .dpt-price-filter-label {
    flex: 1 1 180px; 
    cursor: pointer;
}

.dpt-table-wrapper #dpt-stock-filter,
.dpt-table-wrapper #dpt-price-toggle {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin: 0 8px 0 0 !important; 
    cursor: pointer;
}

.dpt-table-wrapper .dpt-clear-button {
    flex: 0 1 auto; 
    background-color: #f0f0f1; 
    border: 1px solid #ddd; 
    padding: 0 20px;
    height: 42px;
    font-size: 13px; 
    font-weight: 600;
    border-radius: 6px; 
    cursor: pointer; 
    margin-left: auto; 
    order: 100;
}

.dpt-table-wrapper .dpt-clear-button:hover { 
    background-color: #e0e0e0; 
    border-color: #ccc; 
}

.dpt-table-wrapper .dpt-results-count {
    font-size: 13px;
    color: #777;
    margin: -12px 0 14px 2px;
}

.dpt-table-wrapper .dpt-controls input:focus,
.dpt-table-wrapper .dpt-controls select:focus {
    border-color: #3498db;
    outline: none;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

@media screen and (max-width: 1100px) {
    .dpt-table-wrapper .dpt-clear-button {
        margin-left: 0; 
        width: 100%; 
        justify-content: center;
    }
}

/* --- 2. CLICKABLE ROWS & Z-INDEX LOGIC --- */

/* "Show Price" visitor filter toggle - hides price everywhere it can
   appear: the desktop header, the desktop/Stack price cell, and the
   mobile Collapse card's merged-in price (which lives inside the Name
   cell by the time this toggle could run, via the JS name/price merge). */
.dpt-price-hidden .dpt-header-price,
.dpt-price-hidden td.dpt-cell-price,
.dpt-price-hidden .dpt-price-inline {
    display: none !important;
}

.dpt-pcd-customisable-badge {
    display: none;
}

.dpt-pcd-message-badge {
    display: none;
}

.dpt-cell-pcd-message {
    display: none;
}

.dpt-has-clickable-rows tbody tr {
    position: relative !important;
    transform: scale(1); 
    cursor: pointer;
}

.dpt-row-link {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1; 
    text-indent: -9999px;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
}

.dpt-has-clickable-rows td {
    position: static !important;
}

.dpt-table-wrapper .dpt-table td a:not(.dpt-row-link), 
.dpt-table-wrapper .dpt-table td button, 
.dpt-table-wrapper .dpt-table td select, 
.dpt-table-wrapper .dpt-table td input,
.dpt-table-wrapper .dpt-table td .dpt-view-product-button,
.dpt-table-wrapper .dpt-table td .dpt-expander-icon,
.dpt-image-wrapper {
    position: relative;
    z-index: 10 !important; 
}

/* --- 3. TABLE LAYOUT & DECORATION --- */

.dpt-table thead th {
    position: sticky;
    z-index: 10;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.dpt-table-wrapper .dpt-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 14px;
    line-height: 1.5;
}

.dpt-table-wrapper .dpt-table th, .dpt-table-wrapper .dpt-table td { padding: 15px; text-align: center; vertical-align: middle; border-bottom: 1px solid #e1e8ed; box-sizing: content-box; }
.dpt-table-wrapper .dpt-table thead { background-color: #f5f7fa; }
.dpt-table-wrapper .dpt-table th { font-weight: 600; color: #2c3e50; text-transform: uppercase; letter-spacing: 0.5px; font-size: 12px; border-bottom: 2px solid #e1e8ed; }
.dpt-table-wrapper .dpt-table tbody tr:last-of-type { border-bottom: none; }

.dpt-table-wrapper .dpt-table .dpt-header-name, 
.dpt-table-wrapper .dpt-table .dpt-cell-name { text-align: left; }

.dpt-image-wrapper { display: flex; align-items: center; justify-content: flex-start; gap: 15px; }

.dpt-table-wrapper .dpt-table .dpt-cell-image { text-align: left; }
.dpt-table-wrapper .dpt-table td.dpt-cell-image img { width: 75px; height: 75px; object-fit: cover; border-radius: 6px; display: block; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

.dpt-table-wrapper .dpt-table td.dpt-cell-name a { font-weight: 600; color: #2c3e50; text-decoration: none; }
.dpt-table-wrapper .dpt-table td.dpt-cell-sku a { color: inherit; text-decoration: none; }
.dpt-table-wrapper .dpt-table td.dpt-cell-name a:hover { color: #0073aa; }

.dpt-table-wrapper .dpt-table .stock { font-weight: bold; }
.dpt-table-wrapper .dpt-table .in-stock { color: #27ae60; }
.dpt-table-wrapper .dpt-table td.dpt-cell-stock { padding: 15px; }
.dpt-table-wrapper .dpt-table td.dpt-cell-stock p.stock { margin: 0; float: none !important; }
.dpt-table-wrapper .dpt-table td.dpt-cell-stock .out-of-stock { color: #e74c3c !important; font-weight: bold; }
.dpt-table-wrapper .dpt-table .dpt-cell-price bdi { font-size: 18px; }

.dpt-table-wrapper .dpt-view-product-button { 
    display: inline-block !important; 
    visibility: visible !important; 
    background-color: #555; 
    color: #fff !important; 
    text-decoration: none !important; 
    padding: 8px 16px; 
    border-radius: 4px; 
    text-align: center; 
    line-height: 1.5; 
    font-size: 13px;
    font-weight: 600;
}
.dpt-table-wrapper .dpt-view-product-button:hover { background-color: #222; }

.dpt-table-wrapper .dpt-variation-select, 
.dpt-table-wrapper .dpt-pcd-select, 
.dpt-table-wrapper .dpt-et-select { padding: 5px; border-radius: 4px; border: 1px solid #ccc; min-width: 100px; }

.dpt-pcd-message { font-style: italic; font-size: 12px; color: #555; text-align: center; margin-top: 5px; display: block; }

.dpt-table-wrapper .dpt-pagination { margin-top: 20px; text-align: center; }
.dpt-table-wrapper .dpt-pagination .page-numbers { text-decoration: none; padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; color: #0073aa; background-color: #f9f9f9; transition: background-color 0.2s, color 0.2s; margin: 0 2px; }
.dpt-table-wrapper .dpt-pagination .page-numbers:hover { background-color: #f0f0f1; border-color: #ccc; }
.dpt-table-wrapper .dpt-pagination .page-numbers.current { background-color: #0073aa; color: #fff; border-color: #0073aa; font-weight: bold; }

/* Table Container - Mobile Scrolling Failsafe for Desktop/Tablet */
.dpt-table-container { 
    position: relative; 
    min-height: 200px; 
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important; 
    display: block !important; 
}

.dpt-table-wrapper .dpt-table-container table.dpt-table {
    width: 100% !important;
    max-width: none !important; 
}

.dpt-loading-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.7); z-index: 10; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
.dpt-table-container.is-loading .dpt-loading-overlay { opacity: 1; visibility: visible; }

.dpt-spinner { border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Skeleton loading rows shown on first paint, before any real data has
   loaded (see dpt_get_skeleton_rows_html()). */
.dpt-skeleton-row td { border-bottom: 1px solid #f0f0f0 !important; padding: 14px 15px !important; }
.dpt-skeleton {
    background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
    background-size: 400% 100%;
    animation: dpt-skeleton-shimmer 1.4s ease infinite;
    border-radius: 4px;
}
.dpt-skeleton-bar { height: 14px; }
.dpt-skeleton-thumb { width: 50px; height: 50px; border-radius: 6px; }
@keyframes dpt-skeleton-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

.dpt-hidden-desktop { display: none; }
.dpt-expander-cell { display: none; }
span.dpt-expander-icon { font-size: 25px; font-weight: 700; color: green; margin-right: 10px; cursor: pointer; }

/* --- 4. IMAGE ZOOM EFFECTS --- */

.dpt-table img, .dpt-image-wrapper img {
    cursor: zoom-in !important;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.dpt-table img:hover, .dpt-image-wrapper img:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    z-index: 10;
    position: relative;
}

#dpt-global-lightbox { cursor: zoom-out; }

/* --- 5. BULLETPROOF HOVER FIX FOR ALL BROWSERS & LEGACY TABLES --- */

.dpt-table-wrapper table.dpt-table tbody tr {
    transition: background-color 0.2s ease !important;
}

.dpt-table-wrapper table.dpt-table tbody td {
    transition: background-color 0.2s ease !important;
    background-color: transparent; 
}

.dpt-table-wrapper table.dpt-table tbody tr:hover,
.dpt-table-wrapper table.dpt-table tbody tr:hover > td,
.dpt-table-container table.dpt-table tbody tr:hover,
.dpt-table-container table.dpt-table tbody tr:hover > td {
    background-color: #e8eef2 !important; 
}


/* =========================================================
   6. MOBILE RESPONSIVENESS (CLEAN LIST VIEW)
   ========================================================= */

@media screen and (max-width: 768px) {
    
    /* Adaptive Controls (shared across all three mobile behaviors) */
    .dpt-table-wrapper .dpt-controls { 
        display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 8px !important; width: 100% !important;
    }
    .dpt-table-wrapper .dpt-controls input[type="text"], 
    .dpt-table-wrapper .dpt-controls input[type="search"], 
    .dpt-table-wrapper .dpt-controls select,
    .dpt-table-wrapper .dpt-stock-filter-label,
    .dpt-table-wrapper .dpt-price-filter-label { 
        height: 38px !important; line-height: 1 !important; min-height: 0 !important; padding: 0 10px !important; margin: 0 !important; box-sizing: border-box !important;
    }
    .dpt-table-wrapper #dpt-live-search { flex: 1 1 100% !important; width: 100% !important; order: 1; }
    .dpt-table-wrapper .dpt-controls select,
    .dpt-table-wrapper .dpt-stock-filter-label,
    .dpt-table-wrapper .dpt-price-filter-label { flex: 1 1 calc(50% - 4px) !important; width: calc(50% - 4px) !important; order: 2; }
    .dpt-table-wrapper .dpt-clear-button { flex: 1 1 100% !important; width: 100% !important; height: 38px !important; order: 3; margin-top: 5px !important; display: flex !important; justify-content: center !important; align-items: center !important; }
    .dpt-table-wrapper .dpt-stock-filter-label input,
    .dpt-table-wrapper .dpt-price-filter-label input { margin-right: 8px !important; height: auto !important; }

    /* ==========================================================
       SCROLL MODE
       Previously identical to Stack/Collapse - the "Scroll" radio
       option in settings had no effect at all. This now keeps the
       real <table> markup intact and just makes it horizontally
       scrollable, which is what "Scroll" implies.
       ========================================================== */
    .dpt-mobile-scroll .dpt-table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .dpt-mobile-scroll table.dpt-table {
        min-width: 620px; /* keeps columns readable instead of being squeezed */
    }

    /* ==========================================================
       STACK + COLLAPSE MODES (shared card layout)
       ========================================================== */
    .dpt-mobile-stack .dpt-table-container,
    .dpt-mobile-collapse .dpt-table-container { overflow-x: visible !important; }
    .dpt-mobile-stack table.dpt-table,
    .dpt-mobile-collapse table.dpt-table { min-width: 0 !important; border: none !important; }
    .dpt-mobile-stack table.dpt-table thead,
    .dpt-mobile-collapse table.dpt-table thead { display: none !important; }

    .dpt-mobile-stack table.dpt-table tbody,
    .dpt-mobile-collapse table.dpt-table tbody { display: block !important; }

    .dpt-mobile-stack table.dpt-table tr,
    .dpt-mobile-collapse table.dpt-table tr {
        display: grid !important;
        grid-template-columns: auto 1fr;
        column-gap: 15px;
        margin-bottom: 15px !important;
        background: #fff !important;
        border: 1px solid #e1e8ed !important;
        border-radius: 8px !important;
        padding: 15px !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.04) !important;
        position: relative;
    }

    .dpt-mobile-stack table.dpt-table td,
    .dpt-mobile-collapse table.dpt-table td {
        grid-column: 2; 
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 6px 0 !important;
        border-bottom: 1px dashed #f0f0f0 !important;
        text-align: right !important;
        font-size: 13px !important;
    }
    .dpt-mobile-stack table.dpt-table td:last-child,
    .dpt-mobile-collapse table.dpt-table td:last-child {
        border-bottom: none !important;
    }

    .dpt-mobile-stack table.dpt-table td.dpt-cell-image,
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-image {
        grid-column: 1;
        grid-row: 1 / -1;
        border-bottom: none !important;
        padding: 0 !important;
        display: block !important;
        align-self: start;
    }
    .dpt-mobile-stack table.dpt-table td.dpt-cell-image .dpt-image-wrapper,
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-image .dpt-image-wrapper { justify-content: center; }
    .dpt-mobile-stack table.dpt-table td.dpt-cell-image img,
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-image img {
        width: 85px !important;
        height: 85px !important;
        object-fit: contain !important;
        border-radius: 6px;
    }

    .dpt-mobile-stack table.dpt-table td::before,
    .dpt-mobile-collapse table.dpt-table td::before {
        content: attr(data-label);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 11px;
        color: #888;
        margin-right: 15px;
        text-align: left;
    }

    /* Collapse mode: the image used to consume its own grid column (sized to
       fit it, ~85px), which meant a genuine 50/50 split for PCD/Offset was
       impossible - one side always inherited that narrow leftover width.
       The image is now taken out of grid flow entirely (position: absolute,
       positioned against the row's own padding) so the grid itself can just
       be two clean, equal-width columns. Name/Price get left padding to
       avoid sitting under the image; everything else (which renders below
       the image's height anyway) doesn't need to. */
    .dpt-mobile-collapse table.dpt-table tr {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: minmax(85px, auto);
        column-gap: 10px;
    }
    .dpt-mobile-collapse table.dpt-table td {
        grid-column: 1 / -1;
    }
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-image {
        position: absolute !important;
        top: 15px !important;
        left: 15px !important;
        width: 85px !important;
        z-index: 1;
        grid-column: auto;
        grid-row: auto;
    }
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-name {
        grid-column: 1 / -1;
        grid-row: 1;
        padding-left: 95px !important;
    }
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-name .dpt-price-inline {
        display: block;
        margin-top: 4px;
        font-size: 16px;
        font-weight: 800;
        color: #111;
    }
    td.dpt-cell-name.dpt-hidden-desktop.dpt-mobile-initial-visible > div > span > bdi {
        font-size: 21px;
    }
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-price {
        grid-column: 1 / -1;
        grid-row: 2;
        padding-left: 95px !important;
        position: relative !important;
        z-index: 2;
    }
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-pcd:not(.dpt-mobile-initial-visible):not(.dpt-cell-image) {
        grid-column: 1;
        grid-row: auto;
    }
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-et:not(.dpt-mobile-initial-visible):not(.dpt-cell-image) {
        grid-column: 2;
        grid-row: auto;
    }
    /* When Offset has no actual dropdown (single_dropdown groups, or
       non-grouped products), it isn't part of a PCD/Offset pair - treat it
       as a normal full-width spec row instead, right-aligned like every
       other row (Model, Colour, SKU, etc), rather than half-width and
       left-aligned as if a dropdown sat there. */
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-et.dpt-cell-et-plain:not(.dpt-mobile-initial-visible):not(.dpt-cell-image) {
        grid-column: 1 / -1;
        justify-content: space-between !important;
    }
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-et.dpt-cell-et-plain:not(.dpt-mobile-initial-visible):not(.dpt-cell-image)::before {
        display: block !important;
    }
    /* Same treatment for PCD when the product isn't grouped at all, so no
       dropdown renders there either. */
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-pcd.dpt-cell-pcd-plain:not(.dpt-mobile-initial-visible):not(.dpt-cell-image) {
        grid-column: 1 / -1;
        justify-content: space-between !important;
    }
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-pcd.dpt-cell-pcd-plain:not(.dpt-mobile-initial-visible):not(.dpt-cell-image)::before {
        display: block !important;
    }
    /* PCD/Offset moved to appear after SKU on mobile specifically, rather
       than wherever they happen to sit in the admin's configured column
       order (which controls the desktop table's column sequence).
       BUGFIX: this previously had lower specificity than the generic
       reveal rule further down (which also sets order: 5), so it silently
       lost that fight and PCD/Offset stayed wherever the admin's column
       order put them. Matching that rule's tr.is-expanded prefix here
       guarantees this wins instead. */
    .dpt-mobile-collapse table.dpt-table tr.is-expanded td.dpt-cell-pcd:not(.dpt-mobile-initial-visible):not(.dpt-cell-image),
    .dpt-mobile-collapse table.dpt-table tr.is-expanded td.dpt-cell-et:not(.dpt-mobile-initial-visible):not(.dpt-cell-image) {
        order: 7;
    }
    .dpt-mobile-collapse table.dpt-table tr.is-expanded td.dpt-cell-pcd-message:not(.dpt-mobile-initial-visible):not(.dpt-cell-image) {
        order: 8;
        display: none !important;
    }
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-pcd:not(.dpt-mobile-initial-visible):not(.dpt-cell-image)::before,
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-et:not(.dpt-mobile-initial-visible):not(.dpt-cell-image)::before {
        display: none;
    }
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-pcd:not(.dpt-mobile-initial-visible):not(.dpt-cell-image),
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-et:not(.dpt-mobile-initial-visible):not(.dpt-cell-image) {
        justify-content: flex-start !important;
    }
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-pcd select,
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-et select {
        width: 100%;
        max-width: 100% !important;
    }
    /* The inline "drilled from blank" message (kept for desktop/Stack) is
       hidden in Collapse mode - the standalone version below takes over. */
    .dpt-mobile-collapse .dpt-pcd-custom-message-inline {
        display: none !important;
    }
    .dpt-mobile-stack table.dpt-table td.dpt-cell-pcd-message {
        display: none !important;
    }
    .dpt-mobile-collapse table.dpt-table tr.is-expanded td.dpt-cell-pcd-message:not(.dpt-mobile-initial-visible):not(.dpt-cell-image) {
        display: block !important;
        text-align: left !important;
        border-bottom: none !important;
        padding-top: 0 !important;
        padding-bottom: 10px !important;
    }
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-pcd-message::before {
        display: none;
    }

    .dpt-mobile-stack table.dpt-table td.dpt-cell-image::before,
    .dpt-mobile-stack table.dpt-table td.dpt-cell-name::before,
    .dpt-mobile-stack table.dpt-table td.dpt-cell-order::before,
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-image::before,
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-name::before,
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-order::before {
        display: none !important; 
    }

    .dpt-mobile-stack table.dpt-table td.dpt-cell-name,
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-name {
        padding-top: 0 !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        display: block !important;
        text-align: left !important;
        border-bottom: none !important;
        margin-bottom: 2px;
        line-height: 1.3;
    }

    .dpt-mobile-stack table.dpt-table td.dpt-cell-price,
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-price {
        font-size: 16px !important;
        font-weight: 800 !important;
        color: #111 !important;
        padding-top: 10px !important;
    }

    .dpt-mobile-stack table.dpt-table td.dpt-cell-order,
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-order {
        display: block !important; 
        padding-top: 12px !important;
        padding-bottom: 0 !important;
        border-bottom: none !important;
        margin-top: auto;
    }
    .dpt-mobile-stack table.dpt-table td.dpt-cell-order a.button,
    .dpt-mobile-stack table.dpt-table td.dpt-cell-order .dpt-view-product-button,
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-order a.button,
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-order .dpt-view-product-button {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        text-align: center;
        padding: 10px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }

    .dpt-mobile-stack table.dpt-table td select,
    .dpt-mobile-collapse table.dpt-table td select {
        max-width: 55% !important;
    }

    .dpt-mobile-stack .dpt-row-link,
    .dpt-mobile-collapse .dpt-row-link {
        display: none !important;
        pointer-events: none !important;
    }

    /* ==========================================================
       COLLAPSE MODE ONLY - the actual accordion behaviour.
       dpt-main.js already toggled an `is-expanded` class on the row
       on tap (and PHP already marks the admin-chosen "always show on
       mobile" columns with .dpt-mobile-initial-visible) - there was
       just no CSS reacting to either, so tapping a row visibly did
       nothing. This hides every cell except the image and whichever
       columns are set as "Collapsed View Columns" until the row is
       expanded, and adds a tap indicator.
       ========================================================== */
    .dpt-mobile-collapse table.dpt-table tr {
        cursor: pointer;
        padding-right: 40px !important;
    }
    .dpt-mobile-collapse table.dpt-table tr::after {
        content: '+';
        position: absolute;
        top: 15px;
        right: 15px;
        width: 22px;
        height: 22px;
        line-height: 20px;
        text-align: center;
        font-size: 15px;
        font-weight: 700;
        color: #888;
        border: 1px solid #ddd;
        border-radius: 50%;
        box-sizing: border-box;
    }
    .dpt-mobile-collapse table.dpt-table tr.is-expanded::after {
        content: '\2212'; /* minus sign */
    }
    .dpt-mobile-collapse table.dpt-table td:not(.dpt-mobile-initial-visible):not(.dpt-cell-image) {
        display: none !important;
    }
    /* BUGFIX: these reveal rules previously had LOWER specificity than the
       hide rule above (its two :not() clauses each count as a class,
       outweighing the extra element selectors here), so expanding a row
       toggled the +/- icon but never actually revealed the hidden detail
       columns. Each reveal rule below repeats the hide rule's exact
       :not(...):not(...) clauses so it's mathematically guaranteed to win. */
    .dpt-mobile-collapse table.dpt-table tr.is-expanded td:not(.dpt-mobile-initial-visible):not(.dpt-cell-image) {
        display: flex !important;
        order: 5;
        padding: 5px 0 !important;
        font-size: 13px !important;
        border-bottom: 1px solid #eef0f2 !important;
    }
    .dpt-mobile-collapse table.dpt-table tr.is-expanded td:not(.dpt-mobile-initial-visible):not(.dpt-cell-image)::before {
        content: "• " attr(data-label);
        font-size: 11px !important;
    }
    /* Real inline SVG icons for known wheel-spec columns (self-contained data
       URIs - no external icon font/CDN dependency to fail or slow things
       down). Falls back to the plain bullet above for any column that isn't
       one of these known types (e.g. a custom attribute). */
    .dpt-mobile-collapse table.dpt-table tr.is-expanded td.dpt-cell-model:not(.dpt-mobile-initial-visible):not(.dpt-cell-image)::before,
    .dpt-mobile-collapse table.dpt-table tr.is-expanded td.dpt-cell-diameter:not(.dpt-mobile-initial-visible):not(.dpt-cell-image)::before,
    .dpt-mobile-collapse table.dpt-table tr.is-expanded td.dpt-cell-width:not(.dpt-mobile-initial-visible):not(.dpt-cell-image)::before,
    .dpt-mobile-collapse table.dpt-table tr.is-expanded td.dpt-cell-pcd:not(.dpt-mobile-initial-visible):not(.dpt-cell-image)::before,
    .dpt-mobile-collapse table.dpt-table tr.is-expanded td.dpt-cell-et:not(.dpt-mobile-initial-visible):not(.dpt-cell-image)::before,
    .dpt-mobile-collapse table.dpt-table tr.is-expanded td.dpt-cell-colour:not(.dpt-mobile-initial-visible):not(.dpt-cell-image)::before,
    .dpt-mobile-collapse table.dpt-table tr.is-expanded td.dpt-cell-weight-loading:not(.dpt-mobile-initial-visible):not(.dpt-cell-image)::before,
    .dpt-mobile-collapse table.dpt-table tr.is-expanded td.dpt-cell-sku:not(.dpt-mobile-initial-visible):not(.dpt-cell-image)::before {
        content: attr(data-label);
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 12px 12px;
        padding-left: 17px;
    }
    .dpt-mobile-collapse table.dpt-table tr.is-expanded td.dpt-cell-model:not(.dpt-mobile-initial-visible):not(.dpt-cell-image)::before {
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235f5e5a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l8%208a2%202%200%200%201%200%203l-6%206a2%202%200%200%201%20-3%200l-8%20-8v-7a2%202%200%200%201%202%20-2h7%22/%3E%3Ccircle%20cx%3D%228%22%20cy%3D%229%22%20r%3D%221.2%22%20fill%3D%22%235f5e5a%22%20stroke%3D%22none%22/%3E%3C/svg%3E");
    }
    .dpt-mobile-collapse table.dpt-table tr.is-expanded td.dpt-cell-diameter:not(.dpt-mobile-initial-visible):not(.dpt-cell-image)::before {
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235f5e5a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228%22/%3E%3Cpath%20d%3D%22M12%204v3M12%2017v3M4%2012h3M17%2012h3%22/%3E%3C/svg%3E");
    }
    .dpt-mobile-collapse table.dpt-table tr.is-expanded td.dpt-cell-width:not(.dpt-mobile-initial-visible):not(.dpt-cell-image)::before {
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235f5e5a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%208v8M20%208v8M4%2012h16M4%2012l3%20-3M4%2012l3%203M20%2012l-3%20-3M20%2012l-3%203%22/%3E%3C/svg%3E");
    }
    .dpt-mobile-collapse table.dpt-table tr.is-expanded td.dpt-cell-pcd:not(.dpt-mobile-initial-visible):not(.dpt-cell-image)::before {
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235f5e5a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%226%22%20r%3D%221.3%22%20fill%3D%22%235f5e5a%22%20stroke%3D%22none%22/%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%229.5%22%20r%3D%221.3%22%20fill%3D%22%235f5e5a%22%20stroke%3D%22none%22/%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2215.5%22%20r%3D%221.3%22%20fill%3D%22%235f5e5a%22%20stroke%3D%22none%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2215.5%22%20r%3D%221.3%22%20fill%3D%22%235f5e5a%22%20stroke%3D%22none%22/%3E%3Ccircle%20cx%3D%227%22%20cy%3D%229.5%22%20r%3D%221.3%22%20fill%3D%22%235f5e5a%22%20stroke%3D%22none%22/%3E%3C/svg%3E");
    }
    .dpt-mobile-collapse table.dpt-table tr.is-expanded td.dpt-cell-et:not(.dpt-mobile-initial-visible):not(.dpt-cell-image)::before {
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235f5e5a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%204v16M8%208l-4%20-4M8%208l4%20-4M16%2016l4%204M16%2016l-4%204%22/%3E%3C/svg%3E");
    }
    .dpt-mobile-collapse table.dpt-table tr.is-expanded td.dpt-cell-colour:not(.dpt-mobile-initial-visible):not(.dpt-cell-image)::before {
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235f5e5a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203c4%204%206%207%206%2010a6%206%200%200%201%20-12%200c0%20-3%202%20-6%206%20-10z%22/%3E%3C/svg%3E");
    }
    .dpt-mobile-collapse table.dpt-table tr.is-expanded td.dpt-cell-weight-loading:not(.dpt-mobile-initial-visible):not(.dpt-cell-image)::before {
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235f5e5a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%229%22%20width%3D%223%22%20height%3D%226%22%20rx%3D%221%22/%3E%3Crect%20x%3D%2218%22%20y%3D%229%22%20width%3D%223%22%20height%3D%226%22%20rx%3D%221%22/%3E%3Cpath%20d%3D%22M6%2012h12%22/%3E%3Crect%20x%3D%228%22%20y%3D%227%22%20width%3D%222%22%20height%3D%2210%22%20rx%3D%220.5%22/%3E%3Crect%20x%3D%2214%22%20y%3D%227%22%20width%3D%222%22%20height%3D%2210%22%20rx%3D%220.5%22/%3E%3C/svg%3E");
    }
    .dpt-mobile-collapse table.dpt-table tr.is-expanded td.dpt-cell-sku:not(.dpt-mobile-initial-visible):not(.dpt-cell-image)::before {
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235f5e5a%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206v12M7%206v12M10%206v12M13%206v12M15%206v12M18%206v12M20%206v12%22/%3E%3C/svg%3E");
    }
    .dpt-mobile-collapse table.dpt-table tr.is-expanded td.dpt-cell-image {
        display: block !important;
    }
    .dpt-mobile-collapse table.dpt-table tr.is-expanded td.dpt-cell-name:not(.dpt-mobile-initial-visible):not(.dpt-cell-image),
    .dpt-mobile-collapse table.dpt-table tr.is-expanded td.dpt-cell-order:not(.dpt-mobile-initial-visible):not(.dpt-cell-image) {
        display: block !important;
    }
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-order,
    .dpt-mobile-collapse table.dpt-table tr.is-expanded td.dpt-cell-order:not(.dpt-mobile-initial-visible):not(.dpt-cell-image) {
        order: 25;
        margin-top: 8px;
    }
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-sku,
    .dpt-mobile-collapse table.dpt-table tr.is-expanded td.dpt-cell-sku:not(.dpt-mobile-initial-visible):not(.dpt-cell-image) {
        color: var(--dpt-collapse-value-color, #444) !important;
    }
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-sku * {
        color: inherit !important;
    }

    /* ==========================================================
       COLLAPSE MODE - "Option A" collapsed-card redesign.
       Reorders the collapsed summary to name -> price -> stock
       regardless of the admin's configured column order, drops the
       redundant "PRICE"/"STOCK" label prefixes, and turns stock into
       a small colored pill instead of a plain label+value row.
       ========================================================== */
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-name,
    .dpt-mobile-collapse table.dpt-table tr.is-expanded td.dpt-cell-name:not(.dpt-mobile-initial-visible):not(.dpt-cell-image) {
        order: 1;
    }
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-price,
    .dpt-mobile-collapse table.dpt-table tr.is-expanded td.dpt-cell-price:not(.dpt-mobile-initial-visible):not(.dpt-cell-image) {
        order: 2;
    }
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-stock,
    .dpt-mobile-collapse table.dpt-table tr.is-expanded td.dpt-cell-stock:not(.dpt-mobile-initial-visible):not(.dpt-cell-image) {
        order: 20;
    }

    .dpt-mobile-collapse table.dpt-table td.dpt-cell-price::before,
    .dpt-mobile-collapse table.dpt-table tr.is-expanded td.dpt-cell-price:not(.dpt-mobile-initial-visible):not(.dpt-cell-image)::before,
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-stock::before,
    .dpt-mobile-collapse table.dpt-table tr.is-expanded td.dpt-cell-stock:not(.dpt-mobile-initial-visible):not(.dpt-cell-image)::before {
        display: none !important;
    }

    .dpt-mobile-collapse table.dpt-table td.dpt-cell-price,
    .dpt-mobile-collapse table.dpt-table tr.is-expanded td.dpt-cell-price:not(.dpt-mobile-initial-visible):not(.dpt-cell-image) {
        display: block !important;
        text-align: left !important;
        border-bottom: none !important;
        font-size: 16px !important;
        font-weight: 800 !important;
        color: #111 !important;
        padding-top: 2px !important;
        padding-bottom: 8px !important;
    }

    .dpt-mobile-collapse table.dpt-table td.dpt-cell-stock,
    .dpt-mobile-collapse table.dpt-table tr.is-expanded td.dpt-cell-stock:not(.dpt-mobile-initial-visible):not(.dpt-cell-image) {
        display: flex !important;
        align-items: center !important;
        gap: 6px;
        border-bottom: none !important;
        padding-top: 0 !important;
        flex-wrap: nowrap;
    }
    /* Collapsed state: pills stay indented to clear the thumbnail image,
       regardless of the expanded-alignment setting below (that setting
       only applies once the card is actually open). */
    .dpt-mobile-collapse table.dpt-table tr:not(.is-expanded) td.dpt-cell-stock {
        padding-left: 95px !important;
        justify-content: flex-start !important;
    }
    /* Expanded state: alignment follows the admin's "Expanded Card Pills
       Alignment" setting (a class on the wrapper) - image height has long
       been cleared by this point in the card, so there's no longer a
       technical reason to keep the indent. */
    .dpt-expanded-pills-left.dpt-mobile-collapse table.dpt-table tr.is-expanded td.dpt-cell-stock {
        padding-left: 0 !important;
        justify-content: flex-start !important;
    }
    .dpt-expanded-pills-right.dpt-mobile-collapse table.dpt-table tr.is-expanded td.dpt-cell-stock {
        padding-left: 0 !important;
        justify-content: flex-end !important;
    }
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-stock p.stock,
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-stock .dpt-pcd-customisable-badge,
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-stock .dpt-pcd-message-badge {
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-stock p.stock {
        margin: 0;
        font-size: 12px !important;
        font-weight: 600;
        padding: 3px 10px;
        border-radius: 10px;
    }
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-stock p.stock.in-stock {
        background: #e4f5e9;
        color: #1e7e42;
    }
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-stock p.stock.out-of-stock {
        background: #fbe7e7;
        color: #a02525;
    }
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-stock p.stock.on-backorder {
        background: #fdf1de;
        color: #8a5a10;
    }
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-stock .dpt-pcd-customisable-badge {
        display: inline-block;
        font-size: 12px;
        font-weight: 600;
        padding: 3px 10px;
        border-radius: 10px;
        background: #e6f1fb;
        color: #185fa5;
    }
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-stock .dpt-pcd-message-badge {
        display: inline-block;
        font-size: 12px;
        font-weight: 600;
        padding: 3px 10px;
        border-radius: 10px;
        background: #f1eefc;
        color: #5b3aa8;
    }

} /* <--- CRITICAL CLOSING BRACKET FOR MOBILE QUERY */