/**
 * Retromaniacs Master Labels — Frontend Stylesheet v3.2.2
 *
 * All rules scoped under .retro-labels-wrap to avoid theme collisions.
 *
 * VARIABLES — edit Section 0 only to retheme everything at once.
 */

/* ── 0. Custom properties ─────────────────────────────────────────────────── */
/*
 * Defaults on :root — lowest specificity.
 * Override any variable in Additional CSS on .retro-labels-wrap and it will
 * always win regardless of stylesheet load order.
 *
 * Example:
 *   .retro-labels-wrap { --rml-color-primary: #ff0000; }
 */
:root {
    /* Colour palette */
    --rml-color-primary:   #7bdcb5;
    --rml-color-hover:     #00d084;
    --rml-color-active:    #0693e3;
    --rml-color-disabled:  #abb8c3;
    --rml-color-text:      #ffffff;
    --rml-color-text-dark: #000000;

    /* Shared sizing */
    --rml-btn-height:      44px;
    --rml-btn-padding-x:   14px;
    --rml-btn-font-size:   14px;
    --rml-btn-font-weight: 600;
    --rml-btn-radius:      4px;
    --rml-btn-border:      2px;

    /* Lightbox */
    --rml-lightbox-header-bg:     #1a0a2e;
    --rml-lightbox-header-text:   #ECD7FF;
    --rml-lightbox-border-color:  #1a0a2e;
    --rml-lightbox-border-width:  2px;
    --rml-lightbox-border-style:  solid;
    --rml-lightbox-border-radius: 10px;

    /* Image thumbnail size in table */
    --rml-img-max-size: 200px;

    /* Table */
    --rml-th-bg:       #1e2d40;
    --rml-th-color:    #e8f4ff;
    --rml-td-color:    #dce8f5;
    --rml-td-border:   #2e4057;
    --rml-tr-hover-bg: rgba(123, 220, 181, 0.08);
}

/* ── 1. Page layout ───────────────────────────────────────────────────────── */

/* ── 2. Filter form ───────────────────────────────────────────────────────── */

.retro-labels-wrap .retro-filter-form      { margin-bottom: 20px; }
.retro-labels-wrap .retro-filter-name-row  { margin-bottom: 10px; }
.retro-labels-wrap .retro-name-input       { width: 100%; max-width: 300px; }

.retro-labels-wrap .retro-filter-dropdowns {
    display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 10px;
}

.retro-labels-wrap .retro-filter-buttons {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* ── 3. Entry count ───────────────────────────────────────────────────────── */

.retro-labels-wrap .retro-entry-count {
    margin-bottom: 10px;
    color: var(--rml-td-color);
    font-size: 0.9em;
}

/* ── 4. Buttons — primary and secondary ──────────────────────────────────── */

.retro-labels-wrap .retro-button-primary,
.retro-labels-wrap .button.retro-button-primary,
.retro-labels-wrap input[type="submit"].retro-button-primary,
.retro-labels-wrap button.retro-button-primary {
    display:          inline-flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    height:           var(--rml-btn-height) !important;
    padding:          0 var(--rml-btn-padding-x) !important;
    font-size:        var(--rml-btn-font-size) !important;
    font-weight:      var(--rml-btn-font-weight) !important;
    line-height:      1 !important;
    box-sizing:       border-box;
    background-color: var(--rml-color-primary) !important;
    color:            var(--rml-color-text-dark) !important;
    border:           var(--rml-btn-border) solid var(--rml-color-primary) !important;
    border-radius:    var(--rml-btn-radius);
    cursor:           pointer;
    text-decoration:  none;
    transition:       all 0.2s ease;
}

.retro-labels-wrap .retro-button-primary:hover,
.retro-labels-wrap .button.retro-button-primary:hover,
.retro-labels-wrap input[type="submit"].retro-button-primary:hover,
.retro-labels-wrap button.retro-button-primary:hover {
    background-color: var(--rml-color-hover) !important;
    border-color:     var(--rml-color-hover) !important;
    color:            var(--rml-color-text) !important;
}

.retro-labels-wrap .retro-button-secondary,
.retro-labels-wrap .button.retro-button-secondary,
.retro-labels-wrap button.retro-button-secondary {
    display:          inline-flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    height:           var(--rml-btn-height) !important;
    padding:          0 var(--rml-btn-padding-x) !important;
    font-size:        var(--rml-btn-font-size) !important;
    font-weight:      var(--rml-btn-font-weight) !important;
    line-height:      1 !important;
    box-sizing:       border-box;
    background-color: var(--rml-color-primary) !important;
    color:            var(--rml-color-text-dark) !important;
    border:           var(--rml-btn-border) solid var(--rml-color-primary) !important;
    border-radius:    var(--rml-btn-radius);
    cursor:           pointer;
    text-decoration:  none;
    transition:       all 0.2s ease;
}

.retro-labels-wrap .retro-button-secondary:hover,
.retro-labels-wrap .button.retro-button-secondary:hover,
.retro-labels-wrap button.retro-button-secondary:hover {
    background-color: var(--rml-color-hover) !important;
    border-color:     var(--rml-color-hover) !important;
    color:            var(--rml-color-text) !important;
}

/* ── 5. Pagination layout ─────────────────────────────────────────────────── */

.retro-labels-wrap .retro-pagination {
    display:       flex !important;
    align-items:   center !important;
    gap:           10px;
    flex-wrap:     wrap;
    margin-bottom: 15px;
}

.retro-labels-wrap .retro-pagination-nav {
    display:     flex !important;
    align-items: center !important;
    gap:         4px;
    flex-wrap:   wrap;
    flex-shrink: 0;
}

.retro-labels-wrap .retro-jump-wrap {
    display:     flex !important;
    align-items: center !important;
    gap:         6px;
    flex-shrink: 0;
}

.retro-labels-wrap .retro-rows-wrap {
    display:     flex !important;
    align-items: center !important;
    gap:         6px;
    margin-left: auto;
    flex-shrink: 0;
}

.retro-labels-wrap .retro-pagination-label {
    margin:      0;
    white-space: nowrap;
    color:       var(--rml-td-color);
    font-size:   0.9em;
}

.retro-labels-wrap .ellipsis {
    color:     var(--rml-color-hover);
    font-size: var(--rml-btn-font-size);
}

/* ── 6. Page-number buttons ───────────────────────────────────────────────── */

.retro-labels-wrap .dt-paging-button {
    display:          inline-flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    height:           var(--rml-btn-height) !important;
    min-width:        var(--rml-btn-height);
    padding:          0 10px !important;
    font-size:        var(--rml-btn-font-size) !important;
    font-weight:      var(--rml-btn-font-weight) !important;
    line-height:      1 !important;
    box-sizing:       border-box;
    background-color: var(--rml-color-primary) !important;
    color:            var(--rml-color-text-dark) !important;
    border:           var(--rml-btn-border) solid var(--rml-color-primary) !important;
    border-radius:    var(--rml-btn-radius);
    cursor:           pointer;
    transition:       all 0.2s ease;
}

.retro-labels-wrap .dt-paging-button:hover:not(.disabled):not(.current) {
    background-color: var(--rml-color-hover) !important;
    border-color:     var(--rml-color-hover) !important;
    color:            var(--rml-color-text) !important;
}

.retro-labels-wrap .dt-paging-button.current {
    background-color: var(--rml-color-active) !important;
    border-color:     var(--rml-color-active) !important;
    color:            var(--rml-color-text) !important;
}

.retro-labels-wrap .dt-paging-button.disabled {
    background-color: var(--rml-color-disabled) !important;
    border-color:     var(--rml-color-disabled) !important;
    color:            var(--rml-color-text) !important;
    opacity:          0.6;
    cursor:           default;
}

/* ── 7. Jump input and rows select ───────────────────────────────────────── */

.retro-labels-wrap input.retro-jump-page,
.retro-labels-wrap select.retro-rows-select {
    height:      var(--rml-btn-height) !important;
    padding:     0 8px !important;
    margin:      0 !important;
    font-size:   var(--rml-btn-font-size);
    box-sizing:  border-box;
    border:      var(--rml-btn-border) solid var(--rml-color-primary) !important;
    border-radius: var(--rml-btn-radius);
    transition:  border-color 0.2s ease;
}

.retro-labels-wrap input.retro-jump-page  { width: 70px; }
.retro-labels-wrap select.retro-rows-select { width: 80px; appearance: none; -webkit-appearance: none; }

.retro-labels-wrap input.retro-jump-page:focus,
.retro-labels-wrap select.retro-rows-select:focus {
    border-color: var(--rml-color-hover) !important;
    outline:      none;
    box-shadow:   0 0 0 3px rgba(0, 208, 132, 0.15);
}

/* ── 8. Table ─────────────────────────────────────────────────────────────── */

.retro-labels-wrap .retromaniacs-labels-table {
    width: 100%; min-width: 650px; border-collapse: collapse;
}

.retro-labels-wrap .retromaniacs-labels-table thead th {
    background-color: #1e2d40 !important;
    background-color: var(--rml-th-bg, #1e2d40) !important;
    color:            #e8f4ff !important;
    color:            var(--rml-th-color, #e8f4ff) !important;
    font-size:        0.85em;
    font-weight:      700 !important;
    letter-spacing:   0.05em;
    text-transform:   uppercase;
    text-align:       center !important;
    vertical-align:   middle;
    padding:          10px 12px !important;
    border-bottom:    2px solid #7bdcb5 !important;
    border-bottom:    2px solid var(--rml-color-primary, #7bdcb5) !important;
    white-space:      nowrap;
    user-select:      none;
    cursor:           pointer;
}

.retro-labels-wrap .retromaniacs-labels-table th:hover {
    background-color: #263d54 !important;
    color:            var(--rml-color-primary) !important;
}

.retro-labels-wrap .retromaniacs-labels-table td {
    color:          var(--rml-td-color) !important;
    font-size:      0.9em;
    padding:        8px 12px;
    text-align:     center;
    vertical-align: middle;
    border-bottom:  1px solid var(--rml-td-border);
    max-width:      220px;
    overflow:       hidden;
}

.retro-labels-wrap .retromaniacs-labels-table tbody tr:hover td {
    background-color: var(--rml-tr-hover-bg);
}

.retro-labels-wrap .retromaniacs-labels-table img {
    display:    block;
    margin:     0 auto;
    max-width:  var(--rml-img-max-size, 200px) !important;
    max-height: var(--rml-img-max-size, 200px) !important;
    height:     auto;
}

.retro-labels-wrap .retro-lazy-image {
    max-width:  var(--rml-img-max-size, 200px) !important;
    max-height: var(--rml-img-max-size, 200px) !important;
    cursor:     zoom-in;
}

/* ── 9. Empty state ───────────────────────────────────────────────────────── */

.retro-labels-wrap .retro-empty-state {
    text-align: center; padding: 48px 24px;
    background: rgba(255,255,255,0.05);
    border: 1px dashed currentColor; border-radius: 8px;
    margin: 20px 0; color: var(--rml-td-color);
}
.retro-labels-wrap .retro-empty-icon  { font-size: 48px; margin-bottom: 12px; }
.retro-labels-wrap .retro-empty-title { font-size: 18px; margin: 0 0 8px; color: var(--rml-th-color); }
.retro-labels-wrap .retro-empty-subtitle { margin: 0 0 20px; opacity: 0.7; }

/* ── 10. Lightbox ─────────────────────────────────────────────────────────── */

/* Backdrop */
#retro-lightbox.retro-lightbox {
    display:          none;
    position:         fixed;
    z-index:          999999;
    left:             0; top: 0;
    width:            100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter:  blur(4px);
    cursor:           pointer;
    align-items:      center;
    justify-content:  center;
}

#retro-lightbox.retro-lightbox.retro-lightbox-open {
    display: flex !important;
}

/* Popup card */
#retro-lightbox .retro-lightbox-card {
    position:         relative;
    cursor:           default;
    background-color: var(--wp--preset--color--tertiary, #1e2d40);
    border-color:     var(--rml-lightbox-border-color) !important;
    border-width:     var(--rml-lightbox-border-width) !important;
    border-style:     var(--rml-lightbox-border-style) !important;
    border-radius:    var(--rml-lightbox-border-radius) !important;
    box-shadow:       0 20px 60px rgba(0, 0, 0, 0.8);
    max-width:        70vw;
    width:            fit-content;
    animation:        retro-popup 0.25s ease-out;
    overflow:         hidden;
}

@keyframes retro-popup {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

/* Title bar */
#retro-lightbox .retro-lightbox-titlebar {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    padding:          10px 16px;
    background-color: var(--rml-lightbox-header-bg) !important;
    border-bottom:    var(--rml-lightbox-border-width) var(--rml-lightbox-border-style) var(--rml-lightbox-border-color) !important;
}

#retro-lightbox .retro-lightbox-title {
    color:       var(--rml-lightbox-header-text) !important;
    font-size:   15px;
    font-weight: 600;
    margin:      0;
    flex:        1;
    text-align:  center;
}

/* Close button */
#retro-lightbox .retro-lightbox-close {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            28px;
    height:           28px;
    background:       var(--rml-color-primary) !important;
    color:            #000 !important;
    border-radius:    50%;
    font-size:        18px;
    font-weight:      bold;
    line-height:      1;
    cursor:           pointer;
    transition:       background-color 0.2s ease, color 0.2s ease;
    flex-shrink:      0;
    user-select:      none;
}

#retro-lightbox .retro-lightbox-close:hover {
    background-color: var(--rml-color-hover) !important;
    color:            #fff !important;
}

/* Image area */
#retro-lightbox .retro-lightbox-body {
    padding:    16px;
    text-align: center;
}

#retro-lightbox .retro-lightbox-content {
    display:       block;
    max-width:     100%;
    max-height:    75vh;
    height:        auto;
    margin:        0 auto;
    border-radius: 4px;
}

/* Caption */
#retro-lightbox .retro-lightbox-caption {
    padding:    8px 16px 14px;
    text-align: center;
    color:      var(--rml-lightbox-header-text);
    font-size:  14px;
    opacity:    0.85;
}

/* ── 11. Image protection ─────────────────────────────────────────────────── */

.retro-labels-wrap .retro-protected-image {
    user-select: none; -webkit-user-select: none;
    -webkit-user-drag: none; pointer-events: auto;
}

/* ── 12. Responsive / mobile ──────────────────────────────────────────────── */

/* Wrap the TablePress table in a horizontal scroller */
.retro-labels-wrap .tablepress-table-description,
.retro-labels-wrap .dataTables_wrapper,
.retro-labels-wrap .tablepress-scroll-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}


@media (max-width: 768px) {
    /* Filter form: stack labels and inputs vertically */
    .retro-labels-wrap .retro-filter-form .retro-filter-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .retro-labels-wrap .retro-filter-form label {
        min-width: unset !important;
        width: 100% !important;
    }
    .retro-labels-wrap .retro-filter-form select,
    .retro-labels-wrap .retro-filter-form input[type="text"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Pagination: center everything and remove auto margin on mobile */
    .retro-labels-wrap .retro-pagination {
        justify-content: center !important;
        gap: 6px !important;
    }
    .retro-labels-wrap .retro-pagination-nav {
        justify-content: center !important;
        width: 100% !important;
    }
    .retro-labels-wrap .retro-jump-wrap {
        justify-content: center !important;
    }
    .retro-labels-wrap .retro-rows-wrap {
        justify-content: center !important;
        margin-left: 0 !important;
    }
    .retro-labels-wrap .dt-paging-button {
        min-width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
    }

    /* Filter buttons full width */
    .retro-labels-wrap .retro-filter-buttons {
        flex-direction: column !important;
        width: 100% !important;
    }
    .retro-labels-wrap .retro-filter-buttons .retro-button-primary,
    .retro-labels-wrap .retro-filter-buttons .retro-button-secondary {
        width: 100% !important;
    }

    /* Lightbox card full width on mobile */
    #retro-lightbox .retro-lightbox-card {
        max-width: 95vw !important;
    }
}

/* Floating sticky horizontal scrollbar */
/* Table scroll wrapper — drag-to-scroll on mobile */
.retro-labels-wrap .retro-table-scroll {
    overflow: visible;
    width: 100%;
    max-width: 100%;
    display: block;
    position: relative;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}
.retro-labels-wrap .retro-table-scroll:active {
    cursor: grabbing;
}

/* Scroll-hint gradient edges */
.retro-labels-wrap .retro-table-scroll::after,
.retro-labels-wrap .retro-table-scroll::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 32px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 2;
}
.retro-labels-wrap .retro-table-scroll::after {
    right: 0;
    background: linear-gradient(to left, rgba(26,10,46,0.7), transparent);
}
.retro-labels-wrap .retro-table-scroll::before {
    left: 0;
    background: linear-gradient(to right, rgba(26,10,46,0.7), transparent);
}
.retro-labels-wrap .retro-table-scroll.retro-scroll-hint-right::after { opacity: 1; }
.retro-labels-wrap .retro-table-scroll.retro-scroll-hint-left::before  { opacity: 1; }


/* ── 13. AWB vertical centering override ─────────────────────────────────── */
/* AWB fullheight + content-valign-center centers content when rows are few.
   Force top alignment always. */
.nk-awb-wrap-content.is-layout-constrained {
    align-items:     flex-start !important;
    justify-content: flex-start !important;
}
.nk-awb .retro-labels-wrap {
    width: 100%;
}

/* Target the actual valign class AWB uses */
.nk-awb-content-valign-center > .nk-awb-wrap-content,
.nk-awb-content-valign-center .nk-awb-wrap-content,
.nk-awb-fullheight > .nk-awb-wrap-content,
.nk-awb-fullheight .nk-awb-wrap-content {
    align-self:      flex-start !important;
    margin-top:      0 !important;
    margin-bottom:   auto !important;
    position:        relative !important;
    top:             0 !important;
    transform:       none !important;
}

/* ── CORRECT fix: target the outer flex container, not the inner content div ── */
/* AWB applies align-items:center to .wp-block-nk-awb when valign-center is set */
.wp-block-nk-awb.nk-awb-content-valign-center,
.wp-block-nk-awb.nk-awb-fullheight {
    align-items:     flex-start !important;
    justify-content: flex-start !important;
}

/* ── 14. Quick search & column toggles ───────────────────────────────────── */
.retro-labels-wrap .retro-table-controls {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    gap:             12px;
    margin-bottom:   12px;
}
.retro-labels-wrap .retro-quick-search-wrap {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex:        1 1 200px;
}
.retro-labels-wrap .retro-quick-search {
    background:    rgba(255,255,255,0.08);
    border:        1px solid var(--rml-color-primary, #7bdcb5);
    border-radius: var(--rml-btn-radius, 4px);
    color:         var(--rml-color-text, #fff);
    padding:       6px 10px;
    font-size:     13px;
    width:         180px;
}
.retro-labels-wrap .retro-quick-search::placeholder { color: rgba(255,255,255,0.4); }
.retro-labels-wrap .retro-quick-search:focus { outline: none; border-color: var(--rml-color-hover, #00d084); }
.retro-labels-wrap .retro-quick-search-hint { font-size: 11px; opacity: 0.5; white-space: nowrap; }

.retro-labels-wrap .retro-col-toggles {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         5px;
}
.retro-labels-wrap .retro-col-toggles-label { font-size: 12px; opacity: 0.6; margin-right: 2px; }
.retro-labels-wrap .retro-col-toggle {
    background:    rgba(255,255,255,0.08);
    border:        1px solid rgba(255,255,255,0.2);
    border-radius: 3px;
    color:         rgba(255,255,255,0.6);
    font-size:     11px;
    padding:       3px 7px;
    cursor:        pointer;
    transition:    all 0.15s ease;
    line-height:   1.4;
}
.retro-labels-wrap .retro-col-toggle.active {
    background: var(--rml-color-primary, #7bdcb5);
    border-color: var(--rml-color-primary, #7bdcb5);
    color: #000;
}
.retro-labels-wrap .retro-col-toggle:hover { opacity: 0.85; }

/* ── 15. Swipe hint animation ────────────────────────────────────────────── */
@keyframes rml-swipe-hint {
    0%   { transform: translateX(0px); }
    20%  { transform: translateX(-28px); }
    50%  { transform: translateX(-28px); }
    75%  { transform: translateX(4px); }
    100% { transform: translateX(0px); }
}
.rml-swipe-hint { animation: rml-swipe-hint 0.8s ease-in-out; }

/* ── 16. Override WordPress is-layout-constrained inside AWB block ───────── */
.wp-block-nk-awb .nk-awb-wrap-content.is-layout-constrained {
    max-width: 100% !important;
    width:     100% !important;
}
.wp-block-nk-awb .nk-awb-wrap-content.is-layout-constrained > * {
    max-width: 100% !important;
}

/* ── 17. Like / Favorite buttons ─────────────────────────────────────────── */
.retro-like-btn,
.retro-fav-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1.5px solid rgba(132,108,182,0.5);
    background: transparent;
    color: var(--rml-color-text, #fff);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .1s;
    white-space: nowrap;
    margin: 2px;
    font-family: inherit;
}
.retro-like-btn:hover  { border-color: #e05c5c; background: rgba(224,92,92,0.12); }
.retro-fav-btn:hover   { border-color: #f0c040; background: rgba(240,192,64,0.12); }
.retro-like-btn.retro-lf-active  { background: rgba(224,92,92,0.22); border-color: #e05c5c; }
.retro-fav-btn.retro-lf-active   { background: rgba(240,192,64,0.22); border-color: #f0c040; }
.retro-like-btn:active, .retro-fav-btn:active { transform: scale(0.92); }
.retro-like-btn:disabled, .retro-fav-btn:disabled { opacity: .5; cursor: wait; }

/* Lightbox versions — slightly larger */
.retro-lb-action-btn {
    height: 26px;
    border-radius: 4px;
    margin-right: 4px;
    font-size: 12px;
}

/* Filter bar interaction checkboxes */
.retro-filter-interactions {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-top: 10px;
    flex-wrap: wrap;
}
.retro-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.retro-labels-wrap .retro-filter-form .retro-checkbox-label {
    color: #ECD7FF;
}
.retro-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #846CB6;
    cursor: pointer;
}

/* ── Label style badges ─────────────────────────────────────────────────── */
.retro-labels-wrap .rml-style-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    vertical-align: middle;
    white-space: nowrap;
}
.retro-labels-wrap .rml-badge-pair {
    background: rgba(132,108,182,0.18);
    border: 1px solid #846CB6;
    color: #c4a8f5;
}
.retro-labels-wrap .rml-badge-front {
    background: rgba(34,113,177,0.15);
    border: 1px solid #2271b1;
    color: #7bbef5;
}
.retro-labels-wrap .rml-badge-end {
    background: rgba(109,63,201,0.15);
    border: 1px solid #6d3fc9;
    color: #b89ef5;
}
.retro-labels-wrap .rml-badge-wrap {
    background: rgba(180,83,9,0.15);
    border: 1px solid #b45309;
    color: #f5c06a;
}

/* ── Paired image stacking ──────────────────────────────────────────────── */
.retro-labels-wrap .rml-img-pair {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}
.retro-labels-wrap .rml-img-slot {
    position: relative;
    display: inline-block;
    line-height: 0;
}
.retro-labels-wrap .rml-img-slot-badge {
    position: absolute;
    bottom: 4px;
    left: 4px;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    background: rgba(0,0,0,0.60);
    color: #fff;
    border: none;
    pointer-events: none;
    z-index: 1;
    line-height: 1.4;
}

/* ── Widget shortcodes: Random Label & Recently Viewed ───────────────────── */
.retro-labels-wrap.rml-widget {
    margin: 0 0 28px;
}
.rml-widget-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e0e0e0;
    color: #1d2327;
}
.rml-widget-empty {
    color: #888;
    font-style: italic;
}

/* Random Label card */
.rml-random-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    background: #fafafa;
    border: 1px solid #e5e7ea;
    border-radius: 8px;
}
.rml-random-img-link {
    flex-shrink: 0;
}
.rml-random-img {
    width: 120px;
    height: auto;
    border-radius: 4px;
    display: block;
    -webkit-user-drag: none;
    pointer-events: none;
}
.rml-random-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rml-random-name {
    font-weight: 600;
    font-size: 1rem;
    color: #1d2327;
    line-height: 1.3;
}
.rml-random-id {
    font-size: 0.8rem;
    color: #888;
    font-family: monospace;
}
.rml-random-link {
    display: inline-block;
    font-size: 0.85rem;
    color: #2271b1;
    text-decoration: none;
    font-weight: 600;
}
.rml-random-link:hover {
    text-decoration: underline;
}
.rml-refresh-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 6px 14px;
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    color: #2271b1;
    transition: background 0.15s;
}
.rml-refresh-btn:hover {
    background: #f0f4ff;
}

/* Recently Viewed grid */
.rml-recent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
}
.rml-recent-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    padding: 8px 6px;
    border: 1px solid #e5e7ea;
    border-radius: 6px;
    background: #fafafa;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.rml-recent-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    border-color: #2271b1;
}
.rml-recent-img {
    width: 100%;
    max-width: 90px;
    height: auto;
    border-radius: 3px;
    display: block;
    -webkit-user-drag: none;
    pointer-events: none;
}
.rml-recent-no-img {
    width: 90px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    background: #eee;
    border-radius: 3px;
}
.rml-recent-name {
    font-size: 0.72rem;
    color: #444;
    text-align: center;
    line-height: 1.3;
    word-break: break-word;
}

@media (max-width: 480px) {
    .rml-random-card {
        flex-direction: column;
        text-align: center;
    }
    .rml-random-img {
        width: 80px;
    }
    .rml-recent-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }
}


/* ── My Liked / My Favorites — collection header ────────────────────────── */
.rml-collection-wrap {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 16px 32px;
    box-sizing: border-box;
}
.rml-collection-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid #2d3748;
}
.rml-collection-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: #e2e8f0;
}
.rml-collection-meta {
    display: flex;
    align-items: center;
    gap: 16px;
}
.rml-collection-count {
    font-size: 0.85rem;
    color: #718096;
}
.rml-view-all-link {
    font-size: 0.85rem;
    color: #90cdf4;
    text-decoration: none;
    font-weight: 600;
}
.rml-view-all-link:hover { text-decoration: underline; }
.rml-collection-empty {
    padding: 32px 20px;
    text-align: center;
    background: #1e2535;
    border: 1px dashed #2d3748;
    border-radius: 8px;
    color: #a0aec0;
    font-size: 1rem;
    line-height: 1.7;
}

/* ── Card grid — 2-3 columns ─────────────────────────────────────────────── */
.rml-collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

/* Individual card */
.rml-coll-card {
    display: flex;
    flex-direction: column;
    background: #1a1f2e;
    border: 1px solid #2d3748;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0,0,0,0.4);
    transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}
.rml-coll-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.6);
    border-color: #4a5568;
    transform: translateY(-3px);
}

/* Image area */
.rml-coll-card-images {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 16px 10px;
    background: #111520;
}
.rml-coll-no-img {
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 2rem;
    color: #4a5568;
}
.rml-coll-no-img span {
    font-size: 0.75rem;
    color: #4a5568;
}
/* Each image slot — position:relative so badge can overlay */
.rml-coll-img-slot {
    position: relative;
    display: inline-block;
    line-height: 0;
    max-width: 100%;
}
.rml-coll-img {
    max-width: 100%;
    max-height: 200px;
    width: auto;
    height: auto;
    display: block;
    border-radius: 4px;
}
.rml-coll-img-end {
    max-height: 80px;
}
/* Reuse the existing badge styles from rml-detail-img-badge */
.rml-coll-img-slot .rml-detail-img-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
}

/* Card body */
.rml-coll-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 14px 16px 16px;
    gap: 12px;
}
.rml-coll-card-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.rml-coll-card-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #e2e8f0;
    line-height: 1.3;
    flex: 1;
}
.rml-coll-card-id {
    font-size: 0.7rem;
    color: #4a5568;
    font-family: monospace;
    white-space: nowrap;
    padding-top: 2px;
}

/* Metadata table — mirrors label detail page */
.rml-coll-meta-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.rml-coll-meta-table th {
    text-align: left;
    color: #718096;
    font-weight: 600;
    padding: 3px 10px 3px 0;
    width: 80px;
    vertical-align: top;
}
.rml-coll-meta-table td {
    color: #cbd5e0;
    padding: 3px 0;
    vertical-align: top;
}
.rml-coll-meta-table tr + tr th,
.rml-coll-meta-table tr + tr td {
    border-top: 1px solid #1e2535;
}

/* View button — structural only; colors shared with .rml-widget-btn below */
.rml-coll-view-btn {
    display: block;
    text-align: center;
    margin-top: auto;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Widget buttons — Label Spotlight, Recently Viewed, Browse collection,
   My Collection view button. Base colors here; Additional CSS overrides
   via --rm-* variables to keep everything in sync with the site palette. */
.rml-widget-btn,
.rml-coll-view-btn {
    background: #2c3e6b;
    color: #90cdf4;
    border: 1px solid #3d5a8a;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.rml-widget-btn:hover,
.rml-coll-view-btn:hover {
    background: #3d5a8a;
    border-color: #90cdf4;
    color: #ffffff;
}

/* Widget text links — View full history, View in full table */
.rml-widget-link {
    color: #90cdf4;
    text-decoration: none;
    transition: color 0.15s;
}
.rml-widget-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

@media (max-width: 640px) {
    .rml-collection-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 14px;
    }
}

/* ── WooCommerce Add to Cart section ───────────────────────────────────── */
.rml-cart-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 2px solid var(--rml-lightbox-border-color, #1a0a2e);
}
.rml-cart-heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--rml-color-text, #FB90C4);
    margin: 0 0 12px;
}
.rml-cart-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}
.rml-cart-btn {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 6px;
    border: 2px solid;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s, transform 0.1s;
    font-family: inherit;
}
.rml-cart-btn:hover {
    opacity: 0.85;
}
.rml-cart-btn:active {
    transform: scale(0.98);
}
.rml-cart-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.rml-cart-btn-front {
    background: rgba(34,113,177,0.2);
    border-color: #2271b1;
    color: #7bbef5;
}
.rml-cart-btn-end {
    background: rgba(109,63,201,0.2);
    border-color: #6d3fc9;
    color: #c4a8f5;
}
.rml-cart-btn-wrap {
    background: rgba(180,83,9,0.2);
    border-color: #b45309;
    color: #f5c06a;
}
.rml-cart-feedback {
    margin-top: 10px;
    font-size: 0.85rem;
    min-height: 20px;
}
.rml-cart-feedback.success {
    color: #48bb78;
}
.rml-cart-feedback.error {
    color: #fc8181;
}
.rml-cart-view-link {
    display: inline-block;
    margin-top: 6px;
    color: #90cdf4;
    font-size: 0.8rem;
    text-decoration: underline;
}

/* ── Table image slot cart button ───────────────────────────────────────── */
.rml-img-slot {
    position: relative;
    display: inline-block;
}
.rml-table-cart-btn {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 3px 6px;
    border-radius: 4px;
    border: 1px solid;
    font-size: 13px;
    cursor: pointer;
    background: transparent;
    transition: opacity 0.15s;
    font-family: inherit;
    line-height: 1.4;
}
.rml-table-cart-btn:hover {
    opacity: 0.75;
}
.rml-table-cart-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.rml-cart-table-front {
    border-color: #2271b1;
    color: #7bbef5;
}
.rml-cart-table-end {
    border-color: #6d3fc9;
    color: #c4a8f5;
}
.rml-cart-table-wraparound {
    border-color: #b45309;
    color: #f5c06a;
}

/* ── Clear Cart button ──────────────────────────────────────────────────── */
.rml-clear-cart-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--rm-ui-border, #2d3748);
}
.rml-clear-cart-btn {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border-radius: 5px;
    border: 1px solid #fc8181;
    background: rgba(252,129,129,0.1);
    color: #fc8181;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
    transition: opacity 0.15s;
}
.rml-clear-cart-btn:hover { opacity: 0.75; }
.rml-clear-cart-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.rml-clear-cart-feedback { font-size: 12px; color: #fc8181; text-align: center; }

/* ── Proceed to Checkout button ─────────────────────────────────────────── */
.rml-checkout-btn {
    display: block !important;
    width: 100% !important;
    padding: 12px 16px !important;
    border-radius: 6px !important;
    background: var(--rm-pink, #FF007A) !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: opacity 0.15s !important;
}
.rml-checkout-btn:hover { opacity: 0.85 !important; color: #fff !important; }

/* ── Clear Cart confirmation modal ──────────────────────────────────────── */
#rml-clear-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.rml-modal-card {
    background: #1a0a2e;
    border: 2px solid #846CB6;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
    width: 360px;
    max-width: 90vw;
    overflow: hidden;
    animation: rmlModalPop 0.2s ease-out;
}
@keyframes rmlModalPop {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}
.rml-modal-header {
    background: #0a0619;
    border-bottom: 2px solid #846CB6;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 15px;
    color: #ECD7FF;
}
.rml-modal-close {
    background: #846CB6;
    border: none;
    color: #fff;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.rml-modal-body {
    padding: 22px 20px 16px;
    color: #ECD7FF;
    font-size: 14px;
    line-height: 1.6;
}
.rml-modal-body p { margin: 0 0 8px; }
.rml-modal-body strong { color: #fc8181; }
.rml-modal-sub {
    font-size: 12px;
    color: var(--rm-ui-muted, #718096);
}
.rml-modal-footer {
    padding: 0 18px 18px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.rml-modal-btn-cancel {
    background: transparent;
    border: 1px solid #846CB6;
    color: #ECD7FF;
    padding: 8px 18px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
}
.rml-modal-btn-cancel:hover { background: rgba(132,108,182,0.2); }
.rml-modal-btn-confirm {
    background: rgba(252,129,129,0.15);
    border: 1px solid #fc8181;
    color: #fc8181;
    padding: 8px 18px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
}
.rml-modal-btn-confirm:hover { background: rgba(252,129,129,0.28); }

/* ── Order confirmation label layout ────────────────────────────────────── */
.woocommerce-table--order-details {
    border-collapse: collapse;
    width: 100%;
}
.woocommerce-table--order-details thead th {
    border-bottom: 2px solid var(--rm-purple, #846CB6);
    padding: 8px 12px;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--rm-lavender, #ECD7FF);
}
.woocommerce-table--order-details tbody tr {
    border-bottom: 1px solid rgba(132,108,182,0.2);
}
.woocommerce-table--order-details td.product-name {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px;
    vertical-align: top;
}
.woocommerce-table--order-details td.product-total {
    padding: 12px;
    vertical-align: middle;
    white-space: nowrap;
    font-weight: 700;
}
.woocommerce-table--order-details .wc-item-meta {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    color: var(--rm-ui-muted, #718096);
}
.woocommerce-table--order-details .wc-item-meta li {
    margin: 2px 0;
}
.woocommerce-table--order-details .product-quantity {
    color: var(--rm-ui-muted, #718096);
    font-weight: 400;
    font-size: 13px;
}

/* ── Order confirmation 3-column layout ─────────────────────────────────── */
.woocommerce-table--order-details .product-name.rml-restructured {
    vertical-align: top;
}
.woocommerce-table--order-details .rml-order-inner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.woocommerce-table--order-details .rml-order-inner .rml-order-thumb {
    flex-shrink: 0;
    width: 72px;
    height: auto;
    border-radius: 4px;
    object-fit: contain;
    display: block;
    margin-top: 2px;
}
.woocommerce-table--order-details .rml-order-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.woocommerce-table--order-details .rml-order-header {
    display: block;
}
.woocommerce-table--order-details .rml-order-header a {
    font-weight: 700;
    color: var(--rm-pink, #FF007A);
}
.woocommerce-table--order-details .rml-order-header .product-quantity {
    display: inline;
    margin-left: 4px;
    font-weight: 600;
    opacity: 0.8;
}
.woocommerce-table--order-details .rml-order-content .wc-item-meta {
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
    opacity: 0.85;
    list-style: none;
    width: 100%;
}
.woocommerce-table--order-details .rml-order-content .wc-item-meta li {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.woocommerce-table--order-details .rml-order-content .wc-item-meta p {
    margin: 0;
    display: inline;
}

/* ── Order item quantity inline with product link ───────────────────────── */
.woocommerce-table--order-details .rml-order-content .product-quantity {
    display: inline;
    margin-left: 4px;
    font-weight: 600;
    opacity: 0.8;
}