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

.dpt-table-wrapper { 
    /* Site settings → Appearance can change these (1.6.6). */
    font-family: var(--dpt-font, -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-export-csv-button {
    flex: 0 1 auto;
    background-color: #eef6ff;
    border: 1px solid #b8d9f7;
    color: #185fa5;
    padding: 0 20px;
    height: 42px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    order: 90;
}

.dpt-table-wrapper .dpt-export-csv-button:hover {
    background-color: #dcedfc;
    border-color: #a0c9ef;
}

.dpt-table-wrapper .dpt-export-csv-button:disabled {
    opacity: 0.6;
    cursor: default;
}

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

/* Results count + active-filter "breadcrumb" chips on one line. */
.dpt-table-wrapper .dpt-results-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: -12px 0 14px 2px;
}
.dpt-table-wrapper .dpt-results-bar .dpt-results-count { margin: 0; }
.dpt-table-wrapper .dpt-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.dpt-table-wrapper .dpt-active-filters:empty { display: none; }
.dpt-table-wrapper .dpt-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 3px 6px 3px 10px;
    border: 1px solid #b8d9f7;
    border-radius: 999px;
    background: #eef6ff;
    color: #185fa5;
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
}
.dpt-table-wrapper .dpt-filter-chip strong { font-weight: 600; }
.dpt-table-wrapper .dpt-filter-chip-label { opacity: 0.8; }
.dpt-table-wrapper .dpt-filter-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
}
.dpt-table-wrapper .dpt-filter-chip:hover { background: #dcedfc; border-color: #a0c9ef; }
.dpt-table-wrapper .dpt-filter-chip:hover .dpt-filter-chip-x { background: #185fa5; color: #fff; }
.dpt-table-wrapper .dpt-filter-chip:focus-visible { outline: 2px solid #3498db; outline-offset: 1px; }

.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;
    }
    .dpt-table-wrapper .dpt-export-csv-button {
        width: 100%;
        justify-content: center;
    }
}

/* --- Balanced filter bar (desktop) ---
   Equal-width grid instead of free-flowing boxes of different widths. The
   column count comes from dpt_get_filter_balance_script() (--dpt-filter-cols),
   chosen so every row is full; the fallback before it runs is "as many
   170px+ columns as fit". Phones keep the flex layout further down. */
@media screen and (min-width: 769px) {
    .dpt-table-wrapper .dpt-controls {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        grid-template-columns: repeat(var(--dpt-filter-cols, auto-fill), minmax(0, 1fr));
        align-items: stretch;
    }
    .dpt-table-wrapper .dpt-controls:not([style*="--dpt-filter-cols"]) {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    }
    .dpt-table-wrapper .dpt-controls > * {
        width: 100% !important;
        min-width: 0;
        max-width: none;
        margin: 0 !important;
    }
    .dpt-table-wrapper .dpt-controls select {
        text-overflow: ellipsis;
    }
    .dpt-table-wrapper .dpt-stock-filter-label,
    .dpt-table-wrapper .dpt-price-filter-label {
        white-space: nowrap;
        overflow: hidden;
    }
    .dpt-table-wrapper .dpt-clear-button,
    .dpt-table-wrapper .dpt-export-csv-button {
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }
    /* Keep "Clear Filters" hidden until JS shows it (display is set inline). */
    .dpt-table-wrapper .dpt-clear-button[style*="display: none"] {
        display: none !important;
    }
}

/* --- 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;
}

/* "Clickable rows → Turn off on mobile" (admin setting). */
@media screen and (max-width: 768px) {
    .dpt-clickable-mobile-off .dpt-row-link { display: none !important; }
    .dpt-clickable-mobile-off.dpt-has-clickable-rows tbody tr { cursor: auto; }
}

.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-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: var(--dpt-text-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: var(--dpt-heading-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; }

/* Centred to match every other column (was left-aligned). The mobile card
   layouts set their own image alignment further down. */
.dpt-image-wrapper { display: flex; align-items: center; justify-content: center; gap: 15px; }

.dpt-table-wrapper .dpt-table .dpt-cell-image { text-align: center; }
.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-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; }

/* --- 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;
}

/* --- Image pop-up (dpt-lightbox.js) --- */
html.dpt-lightbox-open, html.dpt-lightbox-open body { overflow: hidden; }
.dpt-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 64px;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background: rgba(12, 14, 18, 0.94);
    color: #fff;
    opacity: 0;
    transition: opacity 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-tap-highlight-color: transparent;
}
.dpt-lightbox[hidden] { display: none; }
.dpt-lightbox.is-open { opacity: 1; }
.dpt-lightbox svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.dpt-lightbox-toolbar {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
}
.dpt-lightbox-counter { font-size: 14px; opacity: 0.75; min-width: 3em; }
.dpt-lightbox-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.dpt-lightbox .dpt-lightbox-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 12px;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff !important;
    font: inherit;
    font-size: 13px;
    line-height: 1;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.dpt-lightbox .dpt-lightbox-btn:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.35); }
.dpt-lightbox .dpt-lightbox-btn:focus-visible,
.dpt-lightbox .dpt-lightbox-nav:focus-visible { outline: 2px solid #5aa9f0; outline-offset: 2px; }
.dpt-lightbox .dpt-lightbox-close { padding: 0; width: 38px; justify-content: center; margin-left: 6px; }

.dpt-lightbox-stage {
    grid-column: 2;
    grid-row: 2;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
}
.dpt-lightbox .dpt-lightbox-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    cursor: zoom-in;
    transition: transform 0.25s ease;
    /* Undo the table's thumbnail hover styles. */
    width: auto;
    height: auto;
    position: static;
}
.dpt-lightbox .dpt-lightbox-img:hover { transform: none; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); }
.dpt-lightbox.is-zoomed .dpt-lightbox-img,
.dpt-lightbox.is-zoomed .dpt-lightbox-img:hover { transform: scale(2.2); cursor: zoom-out; transition: transform 0.25s ease, transform-origin 0.05s linear; }

.dpt-lightbox .dpt-lightbox-nav {
    grid-row: 2;
    align-self: center;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease;
}
.dpt-lightbox .dpt-lightbox-nav:hover { background: rgba(255, 255, 255, 0.25); }
.dpt-lightbox .dpt-lightbox-nav svg { width: 26px; height: 26px; }
.dpt-lightbox-prev { grid-column: 1; }
.dpt-lightbox-next { grid-column: 3; }

.dpt-lightbox-caption {
    grid-column: 1 / -1;
    padding: 14px 20px 20px;
    text-align: center;
    font-size: 15px;
    line-height: 1.4;
    opacity: 0.9;
}

.dpt-lightbox-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    animation: dpt-lightbox-spin 0.8s linear infinite;
    transition: opacity 0.2s ease;
}
.dpt-lightbox.is-loading .dpt-lightbox-spinner { opacity: 1; }
@keyframes dpt-lightbox-spin { to { transform: rotate(360deg); } }

.dpt-lightbox-toast {
    position: absolute;
    left: 50%;
    bottom: 70px;
    transform: translate(-50%, 10px);
    padding: 10px 16px;
    border-radius: 8px;
    background: #fff;
    color: #1d2327;
    font-size: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
    max-width: calc(100% - 32px);
    overflow: hidden;
    text-overflow: ellipsis;
}
.dpt-lightbox-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media screen and (max-width: 768px) {
    .dpt-lightbox { grid-template-columns: 0 minmax(0, 1fr) 0; }
    .dpt-lightbox-toolbar { padding: 10px; }
    /* Icons only on phones, to fit the toolbar on one line. */
    .dpt-lightbox .dpt-lightbox-btn span { display: none; }
    .dpt-lightbox .dpt-lightbox-btn { width: 40px; padding: 0; justify-content: center; }
    /* Arrows overlay the image edges; swiping also works. */
    .dpt-lightbox .dpt-lightbox-nav { position: absolute; top: 50%; margin-top: -22px; width: 44px; height: 44px; z-index: 2; background: rgba(0, 0, 0, 0.45); }
    .dpt-lightbox-prev { left: 8px; }
    .dpt-lightbox-next { right: 8px; }
    .dpt-lightbox-stage { padding: 0 8px; }
    .dpt-lightbox-caption { font-size: 14px; padding: 12px 16px 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .dpt-lightbox, .dpt-lightbox .dpt-lightbox-img, .dpt-lightbox-toast { transition: none; }
}

/* --- 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-export-csv-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-clear-button { flex: 1 1 100% !important; width: 100% !important; height: 38px !important; order: 4; 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 */
/* --- Column sorting (1.2.5) --- */
.dpt-table-wrapper .dpt-table th.dpt-sortable { padding: 0; }
.dpt-table-wrapper .dpt-table th .dpt-sort-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 15px;
    margin: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    box-sizing: border-box;
}
.dpt-table-wrapper .dpt-table th .dpt-sort-button:hover { color: #3498db; }
.dpt-table-wrapper .dpt-table th .dpt-sort-button:focus-visible { outline: 2px solid #3498db; outline-offset: -2px; }
/* Small up/down arrows: both faint when unsorted, one solid when sorted. */
.dpt-table-wrapper .dpt-sort-icon {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
}
.dpt-table-wrapper .dpt-sort-icon::before,
.dpt-table-wrapper .dpt-sort-icon::after {
    content: "";
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    opacity: 0.3;
}
.dpt-table-wrapper .dpt-sort-icon::before { border-bottom: 4px solid currentColor; }
.dpt-table-wrapper .dpt-sort-icon::after { border-top: 4px solid currentColor; }
.dpt-table-wrapper th.dpt-sorted-asc .dpt-sort-icon::before,
.dpt-table-wrapper th.dpt-sorted-desc .dpt-sort-icon::after { opacity: 1; }
.dpt-table-wrapper th.dpt-sorted-asc,
.dpt-table-wrapper th.dpt-sorted-desc { color: #3498db; }

/* The "Sort by" dropdown is only for phone card layouts, which hide the
   column headers. Everywhere else, sort by clicking the headers. */
.dpt-table-wrapper .dpt-controls select.dpt-sort-select { display: none; }
@media screen and (max-width: 768px) {
    .dpt-table-wrapper.dpt-mobile-stack .dpt-controls select.dpt-sort-select,
    .dpt-table-wrapper.dpt-mobile-collapse .dpt-controls select.dpt-sort-select { display: block; }
}

/* The default order's column shows its arrow in the normal header colour
   (a visitor-chosen sort is highlighted blue). */
.dpt-table-wrapper th.dpt-sort-default { color: inherit; }
.dpt-table-wrapper th.dpt-sort-default .dpt-sort-icon::before,
.dpt-table-wrapper th.dpt-sort-default .dpt-sort-icon::after { opacity: 0.3; }
.dpt-table-wrapper th.dpt-sort-default.dpt-sorted-asc .dpt-sort-icon::before,
.dpt-table-wrapper th.dpt-sort-default.dpt-sorted-desc .dpt-sort-icon::after { opacity: 0.8; }

/* --- Magnifier badge on table thumbnails (1.3.2) ---
   A small round "enlarge" icon on the image's bottom-right corner, so it's
   obvious the picture opens larger. .dpt-thumb hugs the image. */
.dpt-table-wrapper .dpt-thumb {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    line-height: 0;
    border-radius: 6px;
    cursor: zoom-in;
}
.dpt-table-wrapper .dpt-thumb:focus-visible { outline: 2px solid #3498db; outline-offset: 2px; }
.dpt-table-wrapper .dpt-zoom-badge {
    position: absolute;
    right: 4px;
    bottom: 4px;
    z-index: 11; /* above the thumbnail, which lifts to 10 on hover */
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c3e50' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.dpt-table-wrapper .dpt-thumb:hover .dpt-zoom-badge,
.dpt-table-wrapper .dpt-thumb:focus-visible .dpt-zoom-badge { transform: scale(1.15); background-color: #fff; }

/* --- In production column (1.4.0) ---
   A bold amber pill so incoming stock stands out from the stock column. */
.dpt-table-wrapper .dpt-in-production {
    display: inline-block;
    min-width: 28px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #fff4d6;
    border: 1px solid #f0c24b;
    color: #8a5a00;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
}
.dpt-table-wrapper th.dpt-header-in_production { white-space: nowrap; }

/* --- Column hover tooltips (1.4.1) --- */
.dpt-tooltip {
    position: fixed;
    z-index: 99999;
    max-width: 280px;
    padding: 8px 11px;
    border-radius: 6px;
    background: #1d2327;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.4;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    pointer-events: none; /* clicks go straight through to the row/product */
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}
.dpt-tooltip[hidden] { display: none; }
.dpt-tooltip.is-visible { opacity: 1; transform: none; }
/* A dotted underline hint on cells that have a tooltip. */
@media (hover: hover) and (pointer: fine) {
    .dpt-table-wrapper .dpt-table td[data-dpt-tip] { text-decoration: underline dotted rgba(0, 0, 0, 0.25); text-underline-offset: 3px; }
}

/* --- Sticky filter bar + header row (1.4.1, desktop) ---
   See initSticky() in dpt-main.js. The header copy is positioned just
   below the bar (not inside its flow), so showing it never moves the page. */
.dpt-table-wrapper .dpt-sticky-head { display: none; }
@media screen and (min-width: 769px) {
    .dpt-table-wrapper.dpt-sticky-enabled .dpt-sticky-bar {
        position: sticky;
        top: var(--dpt-sticky-top, 0px);
        z-index: 60;
        background: var(--dpt-sticky-bg, #fff);
    }
    .dpt-table-wrapper.dpt-sticky-enabled .dpt-sticky-bar.is-stuck {
        box-shadow: 0 8px 12px -10px rgba(0, 0, 0, 0.3);
    }
    .dpt-table-wrapper .dpt-sticky-bar.has-head .dpt-sticky-head {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        overflow: hidden;
        background: var(--dpt-sticky-bg, #fff);
        box-shadow: 0 8px 12px -10px rgba(0, 0, 0, 0.3);
    }
    .dpt-table-wrapper .dpt-sticky-bar.has-head { box-shadow: none; }
    .dpt-table-wrapper .dpt-sticky-table {
        table-layout: fixed;
        margin: 0 !important;
        border-collapse: collapse;
    }
    .dpt-table-wrapper .dpt-sticky-table th {
        box-sizing: border-box !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .dpt-table-wrapper .dpt-sticky-bar-empty { height: 0; }
}

/* --- In production on phone cards (1.5.0) ---
   Hide the line when that product has nothing in production, and give it
   an icon like the other spec lines so its title lines up with theirs. */
@media screen and (max-width: 768px) {
    .dpt-mobile-collapse table.dpt-table tr.is-expanded td.dpt-cell-in_production.dpt-cell-empty:not(.dpt-mobile-initial-visible):not(.dpt-cell-image),
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-in_production.dpt-cell-empty,
    .dpt-mobile-stack table.dpt-table td.dpt-cell-in_production.dpt-cell-empty {
        display: none !important;
    }
    .dpt-mobile-collapse table.dpt-table tr.is-expanded td.dpt-cell-in_production: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;
        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%207.5v4.5l3%202%22/%3E%3C/svg%3E");
    }
    .dpt-mobile-collapse table.dpt-table td.dpt-cell-in_production .dpt-in-production,
    .dpt-mobile-stack table.dpt-table td.dpt-cell-in_production .dpt-in-production {
        margin-left: auto;
        font-size: 12px;
        padding: 2px 9px;
    }
}

/* ==========================================================================
   1.6.0 - brand colour, prefix/suffix, magnifier badge, image pop-up tools
   ========================================================================== */

/* Brand colour (Product Tables → Appearance & speed). Only applied when a
   colour other than the default is chosen, so default tables look exactly
   as before. */
.dpt-table-wrapper.dpt-custom-accent th.dpt-sorted-asc,
.dpt-table-wrapper.dpt-custom-accent th.dpt-sorted-desc,
.dpt-table-wrapper.dpt-custom-accent .dpt-table th .dpt-sort-button:hover,
.dpt-table-wrapper.dpt-custom-accent .dpt-table td.dpt-cell-name a:hover,
.dpt-table-wrapper.dpt-custom-accent .dpt-pagination .page-numbers { color: var(--dpt-accent); }
.dpt-table-wrapper.dpt-custom-accent .dpt-pagination .page-numbers.current { background-color: var(--dpt-accent); border-color: var(--dpt-accent); color: #fff; }
.dpt-table-wrapper.dpt-custom-accent .dpt-controls input:focus,
.dpt-table-wrapper.dpt-custom-accent .dpt-controls select:focus { border-color: var(--dpt-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dpt-accent) 15%, transparent); }
.dpt-table-wrapper.dpt-custom-accent .dpt-filter-chip:focus-visible,
.dpt-table-wrapper.dpt-custom-accent .dpt-table th .dpt-sort-button:focus-visible,
.dpt-table-wrapper.dpt-custom-accent .dpt-thumb:focus-visible { outline-color: var(--dpt-accent); }
.dpt-table-wrapper.dpt-custom-accent .dpt-export-csv-button,
.dpt-table-wrapper.dpt-custom-accent .dpt-filter-chip {
    background-color: color-mix(in srgb, var(--dpt-accent) 9%, #fff);
    border-color: color-mix(in srgb, var(--dpt-accent) 35%, #fff);
    color: color-mix(in srgb, var(--dpt-accent) 75%, #000);
}
.dpt-table-wrapper.dpt-custom-accent .dpt-export-csv-button:hover,
.dpt-table-wrapper.dpt-custom-accent .dpt-filter-chip:hover {
    background-color: color-mix(in srgb, var(--dpt-accent) 16%, #fff);
    border-color: color-mix(in srgb, var(--dpt-accent) 50%, #fff);
}
.dpt-table-wrapper.dpt-custom-accent .dpt-filter-chip:hover .dpt-filter-chip-x { background: var(--dpt-accent); }
.dpt-table-wrapper.dpt-custom-accent .dpt-spinner { border-top-color: var(--dpt-accent); }

/* Column prefix / suffix around HTML cells (price, stock number). */
.dpt-table-wrapper .dpt-affix { white-space: pre-wrap; }

/* Magnifier badge switched off for this table. */
.dpt-table-wrapper.dpt-no-zoom-badge .dpt-zoom-badge { display: none; }

/* Image pop-up with "Click to zoom" off. */
.dpt-lightbox.dpt-lightbox-no-zoom .dpt-lightbox-img,
.dpt-lightbox.dpt-lightbox-no-zoom .dpt-lightbox-img:hover { cursor: default; transform: none; }

/* ==========================================================================
   1.6.2 - column pills (Table columns → Options → Show as: Pill).
   Colours set per column are added by the table (scoped <style>).
   ========================================================================== */
.dpt-table-wrapper .dpt-pill {
    display: inline-block;
    max-width: 100%;
    padding: 3px 10px;
    border-radius: 999px;
    background: #eef2f6;
    border: 1px solid #d5dde6;
    color: #2c3e50;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.35;
    vertical-align: middle;
}
.dpt-table-wrapper .dpt-table td .dpt-pill a { color: inherit; }
.dpt-table-wrapper .dpt-table .dpt-cell-price .dpt-pill bdi { font-size: 15px; }
/* Stock pills: tinted by stock status (like the phone cards). */
.dpt-table-wrapper .dpt-pill p.stock {
    display: inline;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    font-size: inherit !important;
}
.dpt-table-wrapper .dpt-pill.dpt-pill-instock { background: #e4f5e9; border-color: #bfe5cb; }
.dpt-table-wrapper .dpt-pill.dpt-pill-instock .stock { color: #1e7e42; }
.dpt-table-wrapper .dpt-pill.dpt-pill-backorder { background: #fdf1de; border-color: #f3d9ad; }
.dpt-table-wrapper .dpt-pill.dpt-pill-backorder .stock { color: #8a5a10; }
.dpt-table-wrapper .dpt-pill.dpt-pill-outofstock { background: #fbe7e7; border-color: #f2c4c4; }
/* In production as plain text (it's a pill by default). */
.dpt-table-wrapper .dpt-in-production.dpt-plain {
    display: inline;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: inherit;
    font-weight: inherit;
    font-size: inherit;
}

/* Summary line (Table settings → Search engines, 1.7.0) */
.dpt-table-wrapper .dpt-summary {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.5;
    color: #555;
}
.dpt-table-wrapper .dpt-summary-below { margin: 14px 0 0; }

/* One font for everything in a table (1.7.0). Dropdowns, buttons and
   inputs don't inherit fonts by default (they fell back to the browser's
   plain "sans-serif"), and themes may set their own fonts on links,
   prices or form controls - so every element follows the table's font
   (Site settings → Appearance → Font; the system font by default).
   Icon fonts are left alone. The image pop-up and hover tooltip take the
   font of the table they were opened from (dpt-lightbox.js / dpt-main.js). */
.dpt-table-wrapper *:not(i):not(.dashicons):not([class*="fa-"]):not([class*="icon"]),
.dpt-lightbox *:not(i):not(.dashicons):not([class*="fa-"]):not([class*="icon"]) {
    font-family: inherit !important;
}