/**
 * ProductBay Frontend Styles
 * 
 * Scoped to .productbay-wrapper for CSS isolation.
 * Works identically in:
 *   - Frontend shortcode (any theme)
 *   - Admin Live Preview iframe
 */

/* ========================================================================
   1. SCOPED RESET
   Prevents theme/admin CSS from leaking into the table.
   ======================================================================== */

.productbay-wrapper,
.productbay-wrapper *,
.productbay-wrapper *::before,
.productbay-wrapper *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    text-decoration: none;
    line-height: 1.5;
}

.productbay-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-size: 14px;
    color: #334155;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================================================
   2. TOOLBAR (Search & Bulk Actions)
   ======================================================================== */

.productbay-wrapper .productbay-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Toolbar layout follows select column position:
   - select=first (default): [Bulk Button] --- [Search]  (button on left)
   - select=last:            [Search] --- [Bulk Button]  (button on right)  */
.productbay-wrapper[data-select-position="first"] .productbay-bulk-actions,
.productbay-wrapper:not([data-select-position]) .productbay-bulk-actions {
    order: 1;
}

.productbay-wrapper[data-select-position="first"] .productbay-search,
.productbay-wrapper:not([data-select-position]) .productbay-search {
    order: 2;
}

.productbay-wrapper[data-select-position="last"] .productbay-bulk-actions {
    order: 2;
}

.productbay-wrapper[data-select-position="last"] .productbay-search {
    order: 1;
}

/* --- Search --- */

.productbay-wrapper .productbay-search {
    position: relative;
    flex: 1;
    max-width: 300px;
}

.productbay-wrapper .productbay-search input[type="text"] {
    width: 100%;
    padding: 10px 36px 10px 15px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    color: #334155;
    line-height: 1.5;
    transition: all 0.2s ease;
    background: #f8fafc;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    outline: none;
}

.productbay-wrapper .productbay-search input[type="text"]:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Search Icon on the RIGHT side */
.productbay-wrapper .productbay-search::before {
    content: '';
    position: absolute;
    right: 12px;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
}

/* Hide search icon when input has value (clear button takes over) */
.productbay-wrapper .productbay-search.has-value::before {
    display: none;
}

/* Hide search icon when loading (spinner takes over) */
.productbay-wrapper .productbay-search.loading::before {
    display: none;
}

/* Clear Button — shown after loading completes when input has value */
.productbay-wrapper .productbay-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    cursor: pointer;
    display: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 18L18 6M6 6l12 12' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    font-size: 0 !important;
}

.productbay-wrapper .productbay-search-clear:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 18L18 6M6 6l12 12' /%3E%3C/svg%3E");
}

/* Show clear when has value AND not loading */
.productbay-wrapper .productbay-search.has-value .productbay-search-clear {
    display: block;
}

/* Hide clear during loading (spinner takes priority) */
.productbay-wrapper .productbay-search.has-value.loading .productbay-search-clear {
    display: none !important;
}

/* --- Search Loader --- */
.productbay-wrapper .productbay-search.loading::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: productbay-spin 0.6s linear infinite;
    display: block;
}

.productbay-wrapper .productbay-search.loading .productbay-search-clear {
    display: none !important;
}

@keyframes productbay-spin {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

/* --- Bulk Actions --- */

.productbay-wrapper .productbay-bulk-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.productbay-wrapper .productbay-btn-bulk {
    padding: 8px 16px;
    background-color: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none !important;
    box-shadow: none;
    outline: none;
    white-space: nowrap;
}

.productbay-wrapper .productbay-btn-bulk:hover {
    background-color: #2563eb;
}

.productbay-wrapper .productbay-btn-bulk:disabled {
    background-color: #94a3b8;
    cursor: not-allowed;
    opacity: 0.7;
}

/* --- Button Group --- */

.productbay-wrapper .productbay-btn-group {
    display: inline-flex;
    align-items: stretch;
    gap: 1px;
}

.productbay-wrapper .productbay-btn-group .productbay-button {
    margin: 0;
}

.productbay-wrapper .productbay-btn-group .productbay-button:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.productbay-wrapper .productbay-btn-group .productbay-button:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* --- Panel Button within Group --- */

.productbay-wrapper .productbay-btn-panel {
    padding: 8px 8px;
    background-color: #3b82f6;
    color: #fff;
    border: none;
    font-family: inherit;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none !important;
    box-shadow: none;
    outline: none;
    white-space: nowrap;
}

.productbay-wrapper .productbay-btn-panel:hover {
    background-color: #2563eb;
}

.productbay-wrapper .productbay-btn-panel:disabled {
    background-color: #94a3b8;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Cart icon inside bulk button (inline SVG) */
.productbay-wrapper .productbay-btn-bulk .productbay-icon-cart {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ========================================================================
   3. TABLE
   ======================================================================== */

.productbay-wrapper .productbay-table-container {
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    /* Horizontal-scroll affordance: subtle shadows at the left/right edges
       that fade out when scrolled to the start/end. Pure CSS (no JS) via the
       local-background gradient technique; the min-width emitted per table
       makes this appear only when there are enough columns to scroll. */
    background-color: #fff;
    background-image:
        linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)),
        linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)),
        radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, 0.12), rgba(15, 23, 42, 0)),
        radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, 0.12), rgba(15, 23, 42, 0));
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}

.productbay-wrapper .productbay-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 14px;
    color: #334155;
    table-layout: auto;
}

.productbay-wrapper .productbay-table th,
.productbay-wrapper .productbay-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: middle;
    line-height: 1.5;
}

.productbay-wrapper .productbay-table th {
    background-color: #f8fafc;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.05em;
}

.productbay-wrapper .productbay-table tbody tr:last-child td {
    border-bottom: none;
}

/* ========================================================================
   4. CHECKBOX COLUMN
   ======================================================================== */

.productbay-wrapper .productbay-col-select {
    width: 20px;
    text-align: center;
    white-space: nowrap;
}

.productbay-wrapper .productbay-col-select input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 0;
    accent-color: #3b82f6;
}

/* Bulk-select toggle. The checkbox is the source of truth; the wrapping
   <label> + text is transparent on desktop (just the checkbox shows) and is
   restyled into a "Select" button on mobile stacked cards (section 18). The
   text is kept in the accessibility tree here (visually hidden, not display:none)
   so the checkbox has an accessible name that reflects its state. */
.productbay-wrapper .productbay-select-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.productbay-wrapper .productbay-select-toggle-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.productbay-wrapper .productbay-select-text-on {
    display: none;
}
.productbay-wrapper .productbay-select-toggle:has(:checked) .productbay-select-text-add {
    display: none;
}
.productbay-wrapper .productbay-select-toggle:has(:checked) .productbay-select-text-on {
    display: inline;
}

/* ========================================================================
   5. PRODUCT CELLS
   ======================================================================== */

/* --- Image --- */
.productbay-wrapper img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    padding: 2px;
    border-radius: 3px;
    border: 0;
    outline: 0;
}

.productbay-wrapper .productbay-product-image img {
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid #e2e8f0;
}

/* --- Product Title --- */
.productbay-wrapper .productbay-product-title {
    font-weight: 600;
    color: #1e293b;
    text-decoration: none !important;
    transition: color 0.15s;
}

.productbay-wrapper .productbay-product-title:hover {
    color: #3b82f6;
    text-decoration: none !important;
}

/* --- Price --- */
.productbay-wrapper .productbay-price del {
    color: #94a3b8;
    text-decoration: line-through;
    font-size: 0.9em;
    margin-right: 4px;
}

.productbay-wrapper .productbay-price ins {
    color: #16a34a;
    font-weight: 600;
    text-decoration: none;
}

/* WC price HTML overrides */
.productbay-wrapper del .woocommerce-Price-amount {
    color: #94a3b8;
}

.productbay-wrapper ins .woocommerce-Price-amount {
    color: #16a34a;
}

/* Hide WC screen-reader text */
.productbay-wrapper .screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ========================================================================
   6. BUTTONS (WC Add to Cart, etc.)
   ======================================================================== */

.productbay-wrapper .productbay-button,
.productbay-wrapper a.productbay-button,
.productbay-wrapper .productbay-table .productbay-button,
.productbay-wrapper .productbay-table a.productbay-button {
    padding: 8px 18px;
    background-color: #3b82f6;
    color: #fff !important;
    border: none !important;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background-color 0.2s;
    white-space: nowrap;
    outline: none !important;
}

.productbay-wrapper .productbay-button:hover,
.productbay-wrapper a.productbay-button:hover,
.productbay-wrapper .productbay-table .productbay-button:hover,
.productbay-wrapper .productbay-table a.productbay-button:hover {
    background-color: #2563eb;
    color: #fff !important;
    text-decoration: none !important;
}


/* ========================================================================
   7. LINKS (prevent theme overrides)
   ======================================================================== */

.productbay-wrapper a {
    color: #1e293b;
    text-decoration: none !important;
    transition: color 0.15s;
}

.productbay-wrapper a:hover {
    color: #3b82f6;
    text-decoration: none !important;
}

/* ========================================================================
   8. EMPTY STATE
   ======================================================================== */

.productbay-wrapper .productbay-empty {
    text-align: center;
    color: #94a3b8;
    font-style: italic;
    padding: 24px 16px;
}

/* ========================================================================
   9. PAGINATION
   ======================================================================== */

.productbay-wrapper .productbay-pagination {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    gap: 4px;
}

.productbay-wrapper .productbay-pagination .page-numbers {
    padding: 6px 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    border-radius: 6px;
    text-decoration: none !important;
    font-size: 14px;
    line-height: 1.5;
    transition: all 0.2s;
}

.productbay-wrapper .productbay-pagination .page-numbers.current,
.productbay-wrapper .productbay-pagination .page-numbers:hover {
    background-color: #f1f5f9;
    color: #334155;
    border-color: #cbd5e1;
}

/* ========================================================================
   10. LOADING OVERLAY
   ======================================================================== */

.productbay-wrapper.productbay-loading {
    position: relative;
}

.productbay-wrapper.productbay-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
}

/* ========================================================================
   11. WC STOCK STATUS
   ======================================================================== */

.productbay-wrapper .stock {
    font-size: 13px;
    font-weight: 500;
}

.productbay-wrapper .stock.in-stock {
    color: #16a34a;
}

.productbay-wrapper .stock.out-of-stock {
    color: #dc2626;
}

/* ========================================================================
   12. QUANTITY INPUT
   ======================================================================== */

.productbay-wrapper .productbay-qty-wrap {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #94a3b8;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    transition: border-color var(--pb-transition),
        box-shadow var(--pb-transition);
    height: 32px;
}

.productbay-wrapper .productbay-qty-wrap:focus-within {
    border-color: var(--pb-color-accent);
    box-shadow: 0 0 0 3px var(--pb-color-accent-light);
}

.productbay-wrapper .productbay-qty {
    width: 36px;
    padding: 0 4px;
    border: none;
    border-radius: 0;
    font-family: inherit;
    font-size: 13px;
    color: #334155;
    text-align: center;
    line-height: 32px;
    background: #fff;
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield;
}

.productbay-wrapper .productbay-qty::-webkit-inner-spin-button,
.productbay-wrapper .productbay-qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.productbay-wrapper .productbay-qty-btns {
    display: flex;
    flex-direction: column;
    border-left: 1px solid #94a3b8;
}

.productbay-wrapper .productbay-qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    flex: 1;
    border: none;
    background: #f8fafc;
    color: #64748b;
    font-size: 7px;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    line-height: 1;
    padding: 0;
    user-select: none;
}

.productbay-wrapper .productbay-qty-plus {
    border-bottom: 1px solid #94a3b8;
}

.productbay-wrapper .productbay-qty-btn:hover {
    background: #e2e8f0;
    color: #1e293b;
}

.productbay-wrapper .productbay-qty-btn:active {
    background: #cbd5e1;
}

.productbay-wrapper .productbay-qty-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: #f8fafc;
}

/* ========================================================================
   13. BUTTON CELL LAYOUT
   ======================================================================== */

.productbay-wrapper .productbay-btn-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

/* ========================================================================
   14. VARIATION DROPDOWNS
   ======================================================================== */


.productbay-wrapper .productbay-variation-selects {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    width: 100%;
    margin-bottom: 8px;
}

.productbay-wrapper .productbay-variation-select {
    flex: 1;
    min-width: 0;
    max-width: 200px;
    /* Smart width boundary */
    padding: 6px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    color: #334155;
    line-height: 1.5;
    background-color: #fff;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
    appearance: auto;
}

.productbay-wrapper .productbay-variation-select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.productbay-wrapper .productbay-variable-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
    max-width: max-content;
    margin-left: auto;
}

.productbay-wrapper .productbay-variable-wrap .productbay-btn-cell {
    width: 100%;
}

.productbay-wrapper .productbay-variation-price {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.productbay-wrapper .productbay-variation-price del {
    color: #94a3b8;
    text-decoration: line-through;
    font-size: 0.9em;
    margin-right: 4px;
    font-weight: 400;
}

.productbay-wrapper .productbay-variation-price ins {
    color: #16a34a;
    font-weight: 600;
    text-decoration: none;
}

/* ========================================================================
   15. ADDED-TO-CART BADGE & VIEW CART
   ======================================================================== */

/* Checkmark badge on button after adding, e.g. "Add to Cart (✓ 3)" */
.productbay-wrapper .productbay-added-badge {
    font-size: 0.85em;
    opacity: 0.85;
    margin-left: 2px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.productbay-wrapper .productbay-check-icon {
    display: inline-block;
    vertical-align: middle;
}

/* ========================================================================
   GROUPED PRODUCT INLINE SELECT
   ======================================================================== */

.productbay-wrapper .productbay-grouped-inline-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.productbay-wrapper .productbay-grouped-child-select {
    max-width: 180px;
    min-width: 120px;
    padding: 7px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    color: #0f172a;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
    outline: none;
}

.productbay-wrapper .productbay-grouped-child-select:focus {
    border-color: #434343;
    box-shadow: 0 0 0 3px #e0f2fe;
}

.productbay-wrapper .productbay-grouped-inline-price {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
}

/* Disabled state for grouped inline controls */
.productbay-wrapper .productbay-grouped-inline-wrap .productbay-qty:disabled,
.productbay-wrapper .productbay-grouped-inline-wrap .productbay-grouped-add-btn:disabled,
.productbay-wrapper .productbay-grouped-inline-wrap .productbay-qty-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.productbay-wrapper .productbay-grouped-inline-wrap .productbay-select-product:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.productbay-wrapper .productbay-grouped-inline-wrap .productbay-select-product {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #3b82f6;
    margin: 0;
}

/* ========================================================================
   16. VARIATION BADGES
   ======================================================================== */

.productbay-wrapper .productbay-variation-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    margin: 6px 0;
    width: 100%;
    max-width: 250px;
}

.productbay-wrapper .productbay-variation-badge {
    display: inline-flex;
    align-items: flex-start;
    gap: 3px;
    padding: 2px 8px;
    font-size: 11px;
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    border-radius: 9999px;
    white-space: normal;
    word-break: break-word;
    text-align: left;
    line-height: 1.3;
}

/* ========================================================================
   17. PRODUCT TYPE BUTTON VARIANTS
   ======================================================================== */

/* Out of Stock & Disabled buttons */
.productbay-wrapper .productbay-btn-outofstock,
.productbay-wrapper .productbay-btn-addtocart:disabled {
    background-color: #e2e8f0 !important;
    color: #94a3b8 !important;
    cursor: not-allowed;
    opacity: 0.8;
}

.productbay-wrapper .productbay-btn-outofstock:hover,
.productbay-wrapper .productbay-btn-addtocart:disabled:hover {
    background-color: #e2e8f0 !important;
    color: #94a3b8 !important;
}

/* External link button */
.productbay-wrapper .productbay-btn-external {
    background-color: #8b5cf6;
    color: #fff !important;
}

.productbay-wrapper .productbay-btn-external:hover {
    background-color: #7c3aed;
    color: #fff !important;
}

/* Grouped (View Options) button */
.productbay-wrapper .productbay-btn-grouped {
    background-color: #64748b;
    color: #fff !important;
}

.productbay-wrapper .productbay-btn-grouped:hover {
    background-color: #475569;
    color: #fff !important;
}

/* ========================================================================
   18. REMOVE SELECTIONS
   ======================================================================== */

.productbay-wrapper .productbay-btn-clear-all {
    padding: 8px 12px;
    background-color: #f1f5f9;
    color: #475569;
    border: none;
    font-family: inherit;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none !important;
    box-shadow: none;
    outline: none;
    white-space: nowrap;
}

.productbay-wrapper .productbay-btn-clear-all:hover {
    background-color: #ef4444 !important;
    color: #fff !important;
}

/* ========================================================================
   16. OUT-OF-STOCK ROW & DISABLED CHECKBOX
   ======================================================================== */

.productbay-wrapper .productbay-table tbody tr[data-in-stock="0"] {
    opacity: 0.6;
}

.productbay-wrapper .productbay-col-select input[type="checkbox"]:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ========================================================================
   17. RESPONSIVE COLUMN VISIBILITY
   Breakpoints: Mobile ≤767px | Tablet 768–1023px | Desktop ≥1024px
   ======================================================================== */

/* Desktop only: hide on mobile & tablet */
@media (max-width: 1023px) {
    .productbay-wrapper .productbay-desktop-only {
        display: none !important;
    }
}

/* Tablet only: hide on mobile & desktop */
@media (max-width: 767px) {
    .productbay-wrapper .productbay-tablet-only {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .productbay-wrapper .productbay-tablet-only {
        display: none !important;
    }
}

/* Mobile only: hide on tablet & desktop */
@media (min-width: 768px) {
    .productbay-wrapper .productbay-mobile-only {
        display: none !important;
    }
}

/* Hide on mobile (visible on tablet & desktop) */
@media (max-width: 767px) {
    .productbay-wrapper .productbay-hide-mobile {
        display: none !important;
    }
}

/* Hide on desktop (visible on mobile & tablet) */
@media (min-width: 1024px) {
    .productbay-wrapper .productbay-hide-desktop {
        display: none !important;
    }
}

/* Hide on tablet (visible on mobile & desktop) */
@media (min-width: 768px) and (max-width: 1023px) {
    .productbay-wrapper .productbay-hide-tablet {
        display: none !important;
    }
}

/* Min-tablet: visible on tablet & desktop, hidden on mobile */
@media (max-width: 767px) {
    .productbay-wrapper .productbay-min-tablet {
        display: none !important;
    }
}

/* ========================================================================
   18. RESPONSIVE LAYOUTS (STACKED CARDS)
   On phones (<=767px) a table can reflow so an arbitrary number of columns
   never overflows. The mode is set on .productbay-wrapper[data-responsive]
   by the renderer:
     stack  -> each row becomes a labeled card (default)
     scroll -> keep the table and scroll horizontally (no rules needed)
   The per-column show/hide utility classes (section 17) still apply inside
   cards. !important is used only where a rule must beat a per-table scoped
   `#id ...` style: width/min-width (vs `#id .productbay-table{min-width}` /
   `.productbay-col-x{width}`) and the container border/border-radius reset
   below (vs `#id .productbay-table-container{border}` from generate_styles) --
   each card supplies its own border, so the outer frame would be redundant.
   It is deliberately NOT used on `display`, so a "hide on mobile" column
   stays hidden inside a card.
   ======================================================================== */

@media (max-width: 767px) {

    /* ---- Card layout ---- */
    .productbay-wrapper[data-responsive="stack"] .productbay-table-container {
        overflow-x: visible;
        border: 0 !important;
        box-shadow: none;
        background: transparent;
        border-radius: 0 !important;
    }

    .productbay-wrapper[data-responsive="stack"] .productbay-table {
        min-width: 0 !important;
        width: 100% !important;
    }

    .productbay-wrapper[data-responsive="stack"] .productbay-table thead {
        display: none;
    }

    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody,
    .productbay-wrapper[data-responsive="stack"] .productbay-table tr,
    .productbay-wrapper[data-responsive="stack"] .productbay-table td {
        display: block;
        width: 100% !important;
    }

    /* Card container */
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody tr {
        margin: 0 0 12px;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
        overflow: hidden;
    }

    /* Label / value row */
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        text-align: right;
        white-space: normal;
        border-bottom: 1px solid #f1f5f9;
        padding: 10px 14px;
    }

    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody tr td:last-child {
        border-bottom: 0;
    }

    /* Row label from the column heading (data-label). Only cells carrying a
       NON-EMPTY data-label get a label column; label-less cells (bulk-select,
       image columns, and Pro variation / nested rows) just fill the width --
       this prevents a blank 40% spacer on any cell without a heading. */
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        flex: 0 0 40%;
        text-align: left;
        font-weight: 600;
        color: #475569;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 0.04em;
    }

    /* Cells with an explicitly empty label center their single value */
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td[data-label=""] {
        justify-content: center;
        text-align: center;
    }

    /* Image cell: center the thumbnail, never show a label (covers image
       columns and any custom-field cell that renders an <img>). */
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td:has(img) {
        justify-content: center;
        text-align: center;
    }
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td:has(img)::before {
        content: none !important;
    }

    /* Pro nested-variation container: a full-width structural row, not a card. */
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody tr.productbay-pro-nested-row-container {
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td.productbay-pro-nested-row-content {
        display: block;
        padding: 0;
    }
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td.productbay-pro-nested-row-content::before {
        content: none !important;
    }

    /* ---- Name header on top, actions stacked full-width at the bottom ----
       The card is a flex column. Value rows and both action cells span the full
       width; the product name is lifted to a top header (order:-1); the
       add-to-cart cell (dropdown + quantity + button) drops below the info, and
       the bulk-select toggle ("Add to bulk list") sits full-width beneath it.
       Full-width (not side-by-side) so variable/grouped cards -- whose action
       cell is a tall dropdown+qty+button stack -- stay consistent with simple
       ones. Hooks are content-based (:has) because columns carry only dynamic
       per-column ids. Desktop keeps the checkbox column. */
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody tr {
        display: flex;
        flex-direction: column;
        position: relative;
    }

    /* Name cell -> card title, lifted to the top, left-aligned, no label */
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td:has(.productbay-product-title) {
        order: -1;
        display: block;
        text-align: left;
    }
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td:has(.productbay-product-title)::before {
        content: none !important;
    }
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td:has(.productbay-product-title) .productbay-product-title {
        display: block;
        font-size: 15px;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    /* Grouped/variable sub-heading (e.g. "3 options available") stacks under
       the name as muted secondary text instead of running inline with it. */
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td .productbay-product-subtitle {
        display: block;
        margin-top: 2px;
        font-size: 12px;
        font-weight: 400;
        color: #64748b;
    }

    /* Bottom actions, stacked full-width: the add-to-cart cell (dropdown + qty
       + button) then the bulk-select toggle beneath it. The Pro nested-variation
       content cell is excluded so it keeps its own layout. */
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td:has(.productbay-button):not(.productbay-pro-nested-row-content) {
        order: 5;
        display: block;
        text-align: left;
        padding: 12px 14px 8px;
        border-bottom: 0;
    }
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td:has(.productbay-button):not(.productbay-pro-nested-row-content)::before {
        content: none !important;
    }
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td.productbay-col-select {
        order: 6;
        display: block;
        width: auto !important;
        padding: 0 14px 14px;
        border-bottom: 0;
    }

    /* Select checkbox -> "Add to bulk list" / "Added" toggle button. The
       checkbox is clip-hidden (kept focusable + announced), the <label> becomes
       the button, and :has(:checked) drives the pressed look and the +/checkmark
       glyph. */
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td.productbay-col-select input.productbay-select-product {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td.productbay-col-select .productbay-select-toggle {
        width: 100%;
        gap: 6px;
        padding: 10px 14px;
        border: 1px solid #93b4f6;
        border-radius: 6px;
        background: #fff;
        color: #2563eb;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.5;
        white-space: nowrap;
        cursor: pointer;
        transition: background-color .15s, border-color .15s, color .15s;
    }
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td.productbay-col-select .productbay-select-toggle::before {
        content: "+";
        font-size: 16px;
        line-height: 1;
    }
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td.productbay-col-select .productbay-select-toggle-text {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
    }
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td.productbay-col-select .productbay-select-toggle:has(:checked) {
        background: #eff6ff;
        color: #1d4ed8;
        border-color: #3b82f6;
    }
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td.productbay-col-select .productbay-select-toggle:has(:checked)::before {
        content: "\2713";
        font-size: 12px;
        font-weight: 700;
    }
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td.productbay-col-select .productbay-select-toggle:has(:disabled) {
        opacity: .45;
        cursor: not-allowed;
    }
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td.productbay-col-select .productbay-select-toggle:focus-within {
        outline: 2px solid #3b82f6;
        outline-offset: 2px;
    }

    /* Let the value side shrink to the card width so long content (buttons,
       titles) wraps instead of overflowing. Flex items default to
       min-width:auto, which would otherwise force horizontal overflow. */
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td > * {
        min-width: 0;
        max-width: 100%;
    }

    /* Make interactive controls comfortable to tap */
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td .productbay-button,
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td select {
        width: 100%;
        justify-content: center;
        white-space: normal;
    }

    /* Filters bar: wrap and let the dropdowns fit the viewport on phones
       (applies to every responsive mode, including horizontal scroll). */
    .productbay-wrapper .productbay-taxonomy-filters {
        flex-wrap: wrap;
        /* This group is itself a flex item of .productbay-filters-bar, and
           min-width:auto stopped it shrinking below its widest select -- so
           letting the select shrink was not enough on its own, the container
           had to be allowed to shrink first. */
        min-width: 0;
    }

    /* The filters bar sits outside the card cells, so it needs the touch
       minimum applied directly. */
    .productbay-wrapper .productbay-filters-clear {
        min-height: 44px;
        padding-left: 16px;
        padding-right: 16px;
    }
    .productbay-wrapper .productbay-filter-select {
        /* max-width:100% is measured against the whole bar, but the inline
           "Filter" label shares the line, so the select still overran the
           viewport on very narrow phones. As a flex item it defaults to
           min-width:auto and refuses to shrink below its longest option;
           min-width:0 lets it take just the space the label leaves. */
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
    }

    /* One height for every control that can sit on a card's action row, so a
       select, the quantity stepper and the button line up when they share it.
       44px is the WCAG 2.5.5 / iOS minimum touch target, and applying it here
       raises every card control to it at once. */
    .productbay-wrapper[data-responsive="stack"] {
        --pb-card-control-h: 44px;
    }

    /* ---- Action controls fill the card ----
       The add-to-cart controls are laid out for a desktop table cell:
       right-aligned against the cell's right edge and capped (selects at
       200px / 180px) so they never dominate a narrow column. Inside a card
       the cell IS the card, so those caps leave a dead gutter down the left
       and strand each control on its own row. Below, each product type is
       re-flowed to the card width.

       Note the DOM differs per type, which is what decides the pairing:
       - variable: the selects live in .productbay-variation-selects, a
         SIBLING ABOVE .productbay-btn-cell, so they cannot share a row with
         the quantity input without restructuring the markup. There can also
         be several of them (one per attribute). They go full width instead,
         and quantity pairs with the button it modifies.
       - grouped: select, price, quantity and button are ALL siblings in
         .productbay-grouped-inline-wrap, and there is exactly one select --
         so there the select and quantity do share a row. */

    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td .productbay-variable-wrap {
        max-width: none;
        width: 100%;
        align-items: stretch;
        margin-left: 0;
    }

    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td .productbay-variation-selects {
        align-items: stretch;
    }

    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td .productbay-variation-select {
        max-width: none;
    }

    /* Quantity + Add to Cart share one row (simple and variable products). */
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td .productbay-btn-cell {
        flex-wrap: nowrap;
        justify-content: flex-start;
        /* Stretch so the button matches the stepper's height on the row. */
        align-items: stretch;
        width: 100%;
    }

    /* Beats the `td .productbay-button { width: 100% }` tap-target rule above
       via the extra class, so the button flexes beside the stepper. */
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td .productbay-btn-cell .productbay-button {
        flex: 1 1 auto;
        width: auto;
        /* align-items:stretch sizes this against the quantity stepper, but a
           product with quantity disabled has no tall sibling to stretch
           against and would fall back to its natural 36px. */
        min-height: var(--pb-card-control-h);
    }

    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td .productbay-qty-wrap {
        flex: 0 0 auto;
        height: var(--pb-card-control-h);
    }

    /* Selects ship at their desktop height (30px variation / 32px grouped),
       which reads as misaligned beside the stepper -- most visibly in a
       grouped row, where the select sits directly next to it. */
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td .productbay-variation-select,
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td .productbay-grouped-child-select {
        /* flex:0 0 auto is load-bearing: .productbay-variation-selects is a
           COLUMN flex container, so the select's `flex: 1` sizes it on the
           vertical axis and silently beats `height`. */
        flex: 0 0 auto;
        height: var(--pb-card-control-h);
    }

    /* ---- Quantity stepper: [-] [field] [+] ----
       On desktop the stepper stacks a 22x20px up/down pair beside the field.
       That is far under the 44px touch minimum and cannot be fixed by
       enlarging in place: two buttons stacked inside one control can never
       each be 44px tall unless the control is 88px. Laying them out either
       side of the field gives two full-height targets instead.

       display:contents on the button container is what makes this possible in
       CSS alone -- it dissolves the wrapper so the two buttons become flex
       items of .productbay-qty-wrap and can be ordered around the field, which
       sits between them in source order. */
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td .productbay-qty-btns {
        display: contents;
    }

    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td .productbay-qty-minus {
        order: 1;
        border-right: 1px solid #94a3b8;
    }

    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td .productbay-qty {
        order: 2;
        flex: 0 0 auto;
        width: 44px;
        height: auto;
        line-height: normal;
        font-size: 15px;
    }

    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td .productbay-qty-plus {
        order: 3;
        border-left: 1px solid #94a3b8;
        /* Reset the divider it carries in the stacked desktop layout. */
        border-bottom: 0;
    }

    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td .productbay-qty-btn {
        flex: 0 0 auto;
        width: var(--pb-card-control-h);
        /* The 7px triangles are replaced with real -/+ glyphs; the button's
           own text is zeroed out rather than removed, so the markup and its
           aria-labels are untouched. */
        font-size: 0;
    }

    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td .productbay-qty-btn::before {
        font-size: 20px;
        font-weight: 500;
        line-height: 1;
    }

    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td .productbay-qty-minus::before {
        content: "\2212";
    }

    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td .productbay-qty-plus::before {
        content: "+";
    }

    /* ---- Grouped: [ select ][ qty ] then a full-width button ---- */
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td .productbay-grouped-inline-wrap {
        flex-wrap: wrap;
        justify-content: flex-start;
        /* Back to center: this wrap has a price span on the row that should
           not be stretched to the stepper's height. */
        align-items: center;
    }

    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td .productbay-grouped-child-select {
        /* flex-basis 0, not auto. With `auto` the select's base size is its
           content width (~260px for "Select a product..."), and flexbox
           decides wrapping from base sizes BEFORE it shrinks anything -- so
           the quantity stepper was pushed to a second row even though both
           would have fit once the select shrank. A zero basis lets the select
           take only the leftover space, keeping the pair on one line.

           min-width is the floor that decides what "too small to share a row"
           means: below it the stepper wraps, which is the right outcome once
           the select would be too narrow to read. 110px + the 10px gap + the
           134px stepper fits a 320px phone with room to spare. */
        flex: 1 1 0;
        min-width: 110px;
        max-width: none;
        width: auto;
    }

    /* flex-basis:100% pushes the button onto its own row below the pair. The
       row centres rather than stretches (the price span must not be pulled
       tall), so the button needs the height set explicitly. */
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td .productbay-grouped-inline-wrap .productbay-grouped-add-btn {
        flex: 1 0 100%;
        min-height: var(--pb-card-control-h);
    }

    /* Empty state stays a normal centered block */
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td.productbay-empty {
        display: block;
        text-align: center;
    }
    .productbay-wrapper[data-responsive="stack"] .productbay-table tbody td.productbay-empty::before {
        content: none;
    }
}

/* ========================================================================
   19. BULK LIST POPUP
   ======================================================================== */

.productbay-selected-popup {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 100;
    width: 380px;
    max-height: 480px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    display: none;
    flex-direction: column;
}

.productbay-selected-popup.is-open {
    display: flex;
}

.productbay-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
    /* Matches .productbay-popup-footer so the chrome brackets the item list,
       which stays white as the readable content well. */
    background: #f8fafc;
    border-radius: 8px 8px 0 0;
    font-size: 14px;
    color: #1e293b;
}

.productbay-popup-count {
    color: #64748b;
    font-weight: normal;
    font-size: 13px;
    margin-left: 4px;
}

.productbay-popup-close {
    background: #f1f5f9;
    border: none;
    border-radius: 10%;
    width: 32px;
    height: 32px;
    font-size: 28px;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.productbay-popup-close:hover {
    color: #ef4444;
}

.productbay-popup-items {
    padding: 8px 0;
    overflow-y: auto;
    max-height: 320px;
}

.productbay-popup-items::-webkit-scrollbar {
    width: 6px;
}

.productbay-popup-items::-webkit-scrollbar-track {
    background: transparent;
}

.productbay-popup-items::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 4px;
}

.productbay-popup-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    gap: 12px;
}

.productbay-popup-item:hover {
    background-color: #f8fafc;
}

.productbay-popup-thumb {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 4px;
    border: 1px solid #f1f5f9;
}

.productbay-popup-info {
    flex: 1;
    min-width: 0;
}

.productbay-popup-name {
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.productbay-popup-variation {
    font-size: 11px;
    color: #64748b;
    margin-bottom: 4px;
}

.productbay-popup-pricing {
    font-size: 12px;
    color: #475569;
}

.productbay-popup-remove {
    background: none;
    border: none;
    border-radius: 100%;
    width: 32px;
    height: 32px;
    color: #cbd5e1;
    font-size: 24px;
    cursor: pointer;
    transition: color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.productbay-popup-remove:hover {
    background: #ef4444;
    color: #fff;
}

.productbay-popup-footer {
    padding: 12px 16px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 0 0 8px 8px;
}

.productbay-popup-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #1e293b;
    margin-bottom: 12px;
}

.productbay-popup-total strong {
    font-size: 16px;
}

.productbay-popup-add-all {
    width: 100%;
    margin: 0 !important;
}

/* ========================================================================
   20. FILTERS BAR
   ======================================================================== */

.productbay-wrapper .productbay-filters-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    gap: 12px;
    margin: 18px 0px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 12px 16px;
}

/* Filter heading "Filter" */
.productbay-wrapper .productbay-filters-heading {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    padding-right: 4px;
}

/* Separator between filter groups */
.productbay-wrapper .productbay-filter-separator {
    display: block;
    width: 1px;
    height: 24px;
    background: #cbd5e1;
    flex-shrink: 0;
}


/* Taxonomy & Type Filters */
.productbay-wrapper .productbay-taxonomy-filters {
    display: flex;
    align-items: center;
    gap: 10px;
}

.productbay-wrapper .productbay-filter-label {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
}

.productbay-wrapper .productbay-filter-select {
    display: inline-block;
    padding: 6px 38px 6px 14px;
    height: 45px;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.5;
    color: #334155;
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Custom multi-select checkbox dropdown */
.productbay-wrapper .productbay-multiselect {
    position: relative;
    display: inline-block;
}

.productbay-wrapper .productbay-multiselect-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 38px 6px 14px;
    height: 45px;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.5;
    color: #334155;
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    white-space: nowrap;
    font-family: inherit;
}

.productbay-wrapper .productbay-multiselect-trigger:hover {
    border-color: #94a3b8;
}

.productbay-wrapper .productbay-multiselect-open .productbay-multiselect-trigger {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='18 15 12 9 6 15'%3e%3c/polyline%3e%3c/svg%3e");
}

/* Arrow is now handled by background-image swap above */

.productbay-wrapper .productbay-multiselect-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 200px;
    max-height: 220px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
    padding: 4px 0;
}

.productbay-wrapper .productbay-multiselect-open .productbay-multiselect-dropdown {
    display: block;
}

.productbay-wrapper .productbay-multiselect-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 13px;
    color: #334155;
    cursor: pointer;
    transition: background 0.15s ease;
    white-space: nowrap;
}

.productbay-wrapper .productbay-multiselect-option:hover {
    background: #f1f5f9;
}

.productbay-wrapper .productbay-multiselect-option input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
    accent-color: #3b82f6;
}

.productbay-wrapper .productbay-filter-select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='18 15 12 9 6 15'%3e%3c/polyline%3e%3c/svg%3e");
}

.productbay-wrapper .productbay-filter-select:hover {
    border-color: #94a3b8;
}

/* Clear All Filters button */
.productbay-wrapper .productbay-filters-clear {
    margin-left: auto;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.productbay-wrapper .productbay-filters-clear:hover {
    color: #dc2626;
    background: #fef2f2;
    border-color: #fca5a5;
}

/* ==========================================================================
   Lightbox
   ========================================================================== */

dialog.productbay-lightbox {
    border: none;
    background: transparent;
    max-width: 90vw;
    max-height: 90vh;
    padding: 0;
    margin: auto;
    overflow: visible;
    box-sizing: border-box;
}

/* Remove display block override as it can break native dialog behavior */

dialog.productbay-lightbox::backdrop {
    background: rgba(0, 0, 0, 0.9);
}

.productbay-lightbox-backdrop {
    display: none;
    /* Native backdrop ::backdrop is used, but keeping this for potential polyfills */
}

.productbay-lightbox-content {
    position: relative;
    background: #fff;
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.productbay-lightbox-img {
    display: block;
    max-width: 100%;
    max-height: calc(90vh - 16px);
    object-fit: contain;
    border-radius: 4px;
}

.productbay-lightbox-actions {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    gap: 8px;
    z-index: 10;
}

.productbay-lightbox-close,
.productbay-lightbox-fullscreen {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111827;
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.2s;
    backdrop-filter: blur(4px);
}

.productbay-lightbox-close:hover,
.productbay-lightbox-fullscreen:hover {
    background: #fff;
    transform: scale(1.05);
}

/* Fullscreen Modifier */
.productbay-lightbox-is-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: #000 !important;
    z-index: 2147483647 !important;
    /* Maximum possible z-index */
    overflow: hidden !important;
}

.productbay-lightbox-is-fullscreen .productbay-lightbox-content {
    border-radius: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.productbay-lightbox-is-fullscreen .productbay-lightbox-img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
}

.productbay-lightbox-trigger {
    cursor: zoom-in;
    display: inline-block;
    transition: transform 0.2s ease;
}

.productbay-lightbox-trigger:hover {
    transform: scale(1.02);
}

/* ========================================================================
   21. MOBILE STICKY ACTION BAR
   On phones (<=767px) the bulk actions leave the toolbar entirely and
   become a bar fixed to the bottom of the viewport, shown only while at
   least one product is selected (JS toggles .productbay-has-selection on
   the wrapper). Rationale:
     - bottom = thumb reach; a top-sticky bar lands in the hardest-to-reach
       zone and collides with theme/admin fixed headers,
     - the bulk button is disabled at zero selections, so an always-visible
       bar would spend scarce vertical space on a dead control.
   The bar is deliberately outside the toolbar's flow on mobile (rather than
   toggling between static and fixed), so promoting it never reflows the
   search field.
   ======================================================================== */

@media (max-width: 767px) {

    /* Hidden until something is selected. */
    .productbay-wrapper .productbay-bulk-actions {
        display: none;
    }

    .productbay-wrapper.productbay-has-selection .productbay-bulk-actions {
        display: flex;
        position: fixed;
        /* Inset from the edges so the rounding is actually visible -- a
           full-bleed bar has no corners to round. Bottom clears the iOS home
           indicator. */
        left: 12px;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        z-index: 999;
        justify-content: center;
        gap: 8px;
        padding: 8px;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 999px;
        /* Shadow on all sides now that it floats rather than sits on the edge. */
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
    }

    /* The bar overlays the page, so reserve room below the table for the
       last card / pagination to stay reachable. */
    .productbay-wrapper.productbay-has-selection {
        padding-bottom: 84px;
    }

    /* Fill the bar so the primary action is a wide target, and clip to the
       pill -- the group's children carry `border-radius: 0 !important` from
       the base button-group rules, so overflow is what rounds their ends. */
    .productbay-wrapper.productbay-has-selection .productbay-btn-group {
        width: 100%;
        border-radius: inherit;
        overflow: hidden;
    }

    .productbay-wrapper.productbay-has-selection .productbay-btn-group .productbay-button:first-child {
        padding-left: 16px;
    }

    .productbay-wrapper.productbay-has-selection .productbay-btn-group .productbay-button:last-child {
        padding-right: 16px;
    }

    .productbay-wrapper.productbay-has-selection .productbay-btn-bulk {
        flex: 1 1 auto;
        justify-content: center;
        padding: 12px 16px;
        /* min-width:0 is required, not decorative: a flex item defaults to
           min-width:auto and so refuses to shrink below its nowrap label.
           Without it the group overflows its own `overflow: hidden` on narrow
           phones and silently clips the last button off the pill. The long
           label ellipsises instead. */
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        line-height: 1.5;
    }

    .productbay-wrapper.productbay-has-selection .productbay-btn-panel,
    .productbay-wrapper.productbay-has-selection .productbay-btn-clear-all {
        flex: 0 0 auto;
        padding: 12px;
    }

    /* --- Bulk list popup as a bottom sheet --- */

    /* Anchored to the bar's top edge, so no hard-coded bar height. */
    .productbay-wrapper .productbay-selected-popup {
        position: absolute;
        top: auto;
        bottom: calc(100% + 8px);
        left: 8px;
        right: 8px;
        width: auto;
        max-height: 60vh;
    }
}