/* ============================================================
   Product Sound Table — Frontend Styles
   ============================================================ */

/* ── CSS Custom Properties ── */
.pst-wrapper {
    --pst-bg:           #ffffff;
    --pst-surface:      #f7f8fa;
    --pst-border:       #e2e6ea;
    --pst-text:         #1a1d23;
    --pst-text-muted:   #6b7280;
    --pst-accent:       #6c63ff;
    --pst-accent-glow:  rgba(108,99,255,0.25);
    --pst-row-hover:    #f0f0ff;
    --pst-btn-bg:       #6c63ff;
    --pst-btn-text:     #ffffff;
    --pst-play-size:    40px;
    --pst-radius:       8px;
    --pst-shadow:       0 2px 12px rgba(0,0,0,0.06);
    --pst-font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --pst-transition:   0.2s ease;

    font-family: var(--pst-font);
    color: var(--pst-text);
    background: var(--pst-bg);
    border-radius: var(--pst-radius);
    padding: 24px;
    box-shadow: var(--pst-shadow);
    transition: background var(--pst-transition), color var(--pst-transition);
    position: relative;
}

/* ── Dark Mode ── */
.pst-wrapper.dark-mode {
    --pst-bg:          #0f1117;
    --pst-surface:     #181c27;
    --pst-border:      #2a2f3d;
    --pst-text:        #e8eaf0;
    --pst-text-muted:  #7b8299;
    --pst-accent:      #8b84ff;
    --pst-accent-glow: rgba(139,132,255,0.3);
    --pst-row-hover:   #1e2235;
    --pst-btn-bg:      #8b84ff;
    --pst-btn-text:    #0f1117;
}

/* ── Presets ── */
.pst-wrapper.pst-preset-golden {
    --pst-accent:      #c9a84c;
    --pst-accent-glow: rgba(201,168,76,0.3);
    --pst-btn-bg:      linear-gradient(135deg,#c9a84c,#f0d080,#c9a84c);
    --pst-btn-text:    #1a1100;
    --pst-row-hover:   rgba(201,168,76,0.07);
}
.pst-wrapper.pst-preset-golden.dark-mode {
    --pst-bg:          #0e0c06;
    --pst-surface:     #1a1609;
    --pst-border:      #3a3010;
    --pst-text:        #f5e9b0;
    --pst-text-muted:  #9a8850;
    --pst-row-hover:   rgba(201,168,76,0.08);
}
.pst-wrapper.pst-preset-golden .pst-preview-btn {
    background: linear-gradient(135deg,#c9a84c,#f0d080,#c9a84c);
    color: #1a1100;
}
.pst-wrapper.pst-preset-gradient {
    --pst-accent:      #a855f7;
    --pst-accent-glow: rgba(168,85,247,0.3);
    --pst-btn-bg:      #a855f7;
    background: linear-gradient(135deg,#0f0c29,#302b63,#24243e);
    --pst-text:        #f0ecff;
    --pst-surface:     rgba(255,255,255,0.05);
    --pst-border:      rgba(255,255,255,0.1);
    --pst-row-hover:   rgba(168,85,247,0.1);
}
.pst-wrapper.pst-preset-light {
    --pst-bg:        #fafafa;
    --pst-surface:   #ffffff;
    --pst-border:    #dde1e7;
    --pst-text:      #111827;
    --pst-accent:    #3b82f6;
    --pst-btn-bg:    #3b82f6;
    --pst-row-hover: #eff6ff;
}

/* ============================================================
   Controls bar
   ============================================================ */
.pst-controls {
    display: flex;
    align-items: center;
    justify-content: center;   /* desktop: centre search + discover + sort */
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

/* ── Search ── */
.pst-search-wrap {
    position: relative;
    flex: 1 1 200px;
    max-width: 420px;
    display: flex;
    align-items: center;
}
.pst-search {
    width: 100%;
    /* right padding: 8px gap + 38px submit + 6px gap + 22px clear + 6px */
    padding: 9px 86px 9px 14px;
    background: var(--pst-surface);
    border: 1px solid var(--pst-border);
    border-radius: 24px;
    color: var(--pst-text);
    font-size: 14px;
    outline: none;
    transition: border-color var(--pst-transition), box-shadow var(--pst-transition);
    box-sizing: border-box;
}
.pst-search:focus {
    border-color: var(--pst-accent);
    box-shadow: 0 0 0 3px var(--pst-accent-glow);
}
/* Submit button — always visible, flush to the right inside the pill */
.pst-search-submit {
    position: absolute;
    right: 8px;
    background: var(--pst-accent);
    border: none;
    border-radius: 20px;
    cursor: pointer;
    color: var(--pst-btn-text, #fff);
    font-size: 16px;
    font-weight: 700;
    padding: 0 12px;
    height: 30px;
    line-height: 1;
    transition: opacity var(--pst-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pst-search-submit:hover { opacity: .82; }
/* Clear button — shown when there is text, sits to the left of submit */
.pst-search-clear {
    position: absolute;
    right: 52px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--pst-text-muted);
    font-size: 13px;
    padding: 0;
    line-height: 1;
    transition: color var(--pst-transition);
}
.pst-search-clear:hover { color: var(--pst-text); }

/* ── Discover button ── */
/* ── Discover button — wheel of fortune ── */
.pst-discover-btn {
    display:        inline-flex;
    align-items:    center;
    gap:            10px;
    padding:        0 18px 0 10px;
    height:         46px;
    background:     transparent;
    border:         1.5px solid var(--pst-accent);
    border-radius:  23px;
    cursor:         pointer;
    font-family:    var(--pst-font);
    white-space:    nowrap;
    position:       relative;
    overflow:       hidden;
    transition:     border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

/* Shimmer sweep on hover */
.pst-discover-btn::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient( 120deg,
        transparent 0%,
        color-mix( in srgb, var(--pst-accent) 18%, transparent ) 50%,
        transparent 100% );
    transform:  translateX( -100% );
    transition: transform 0.55s ease;
    pointer-events: none;
}
.pst-discover-btn:hover::before {
    transform: translateX( 100% );
}

.pst-discover-btn:hover {
    border-color: var(--pst-accent);
    box-shadow:   0 0 12px color-mix( in srgb, var(--pst-accent) 35%, transparent );
    background:   color-mix( in srgb, var(--pst-accent) 8%, transparent );
}

/* ── Wheel container ── */
.pst-disc-wheel {
    position:   relative;
    width:      36px;
    height:     36px;
    flex-shrink: 0;
    display:    flex;
    align-items: center;
    justify-content: center;
}

/* ── SVG ring ── */
.pst-disc-svg {
    width:    36px;
    height:   36px;
    overflow: visible;
    transition: filter 0.25s ease;
}

/* Orbit dashed ring */
.pst-disc-orbit {
    fill:             none;
    stroke:           var(--pst-accent);
    stroke-width:     1;
    stroke-dasharray: 3 4;
    opacity:          0.55;
}

/* Tick marks */
.pst-disc-tick {
    stroke:       var(--pst-accent);
    stroke-width: 1.2;
    stroke-linecap: round;
    opacity:      0.6;
}

/* Diamond nodes */
.pst-disc-diamond {
    fill:    var(--pst-accent);
    opacity: 0.7;
}

/* Inner accent circle */
.pst-disc-inner {
    fill:           none;
    stroke:         var(--pst-accent);
    stroke-width:   1;
    opacity:        0.35;
}

/* Center sparkle */
.pst-disc-star {
    fill:        var(--pst-accent);
    font-size:   10px;
    font-family: inherit;
    opacity:     0.9;
    transition:  opacity 0.2s ease;
}

/* ── Label ── */
.pst-disc-label {
    font-size:      13px;
    font-weight:    700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--pst-accent);
    transition:     color 0.25s ease;
}

/* ── SPIN animation — triggered by JS class on click ── */
@keyframes pst-wheel-spin {
    from { transform: rotate(   0deg ); }
    to   { transform: rotate( 720deg ); }
}

.pst-discover-btn.pst-spinning .pst-disc-svg {
    animation: pst-wheel-spin 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* Boost glow while spinning */
.pst-discover-btn.pst-spinning {
    box-shadow: 0 0 20px color-mix( in srgb, var(--pst-accent) 50%, transparent );
}

/* ── ACTIVE state (discover mode on) ── */
.pst-discover-btn.pst-discover-active {
    background:   var(--pst-accent);
    border-color: var(--pst-accent);
    box-shadow:   0 0 16px color-mix( in srgb, var(--pst-accent) 45%, transparent );
}
.pst-discover-btn.pst-discover-active .pst-disc-orbit,
.pst-discover-btn.pst-discover-active .pst-disc-tick,
.pst-discover-btn.pst-discover-active .pst-disc-diamond,
.pst-discover-btn.pst-discover-active .pst-disc-inner,
.pst-discover-btn.pst-discover-active .pst-disc-star {
    stroke: var(--pst-btn-text, #fff);
    fill:   var(--pst-btn-text, #fff);
    color:  var(--pst-btn-text, #fff);
}
.pst-discover-btn.pst-discover-active .pst-disc-label {
    color: var(--pst-btn-text, #fff);
}

/* Keep orbit and inner circle stroked not filled */
.pst-discover-btn.pst-discover-active .pst-disc-orbit,
.pst-discover-btn.pst-discover-active .pst-disc-inner {
    fill: none;
}

/* ── Sort dropdown — pill with "Sort by" label ── */
.pst-sort-wrap {
    display: inline-flex;
    align-items: center;
    height: 38px;
    border: 1px solid var(--pst-border);
    border-radius: 24px;
    background: var(--pst-surface);
    overflow: hidden;
    transition: border-color var(--pst-transition);
}
.pst-sort-wrap:focus-within { border-color: var(--pst-accent); }
.pst-sort-label {
    padding: 0 10px 0 14px;
    font-size: 13px;
    color: var(--pst-text-muted);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    border-right: 1px solid var(--pst-border);
    height: 100%;
    display: flex;
    align-items: center;
}
.pst-sort {
    padding: 0 12px 0 10px;
    background: transparent;
    border: none;
    color: var(--pst-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    height: 100%;
    appearance: auto;
}
.pst-sort:focus { outline: none; }

/* ── Active filter badges ── */
.pst-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    min-height: 0;
}
.pst-active-tag-wrap,
.pst-discover-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: color-mix(in srgb, var(--pst-accent) 12%, transparent);
    border: 1px solid var(--pst-accent);
    border-radius: 20px;
    padding: 3px 10px 3px 12px;
    font-size: 12px;
    color: var(--pst-text);
}
/* hidden by default — JS calls .show() / .hide() */
.pst-active-tag-wrap { display: none; }
.pst-discover-badge  { display: none; }
.pst-badge-label { font-weight: 600; }
.pst-active-tag-name { color: var(--pst-accent); font-weight: 600; }
.pst-clear-tag,
.pst-clear-discover {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--pst-text-muted);
    font-size: 14px;
    padding: 0 0 0 2px;
    line-height: 1;
    transition: color var(--pst-transition);
}
.pst-clear-tag:hover, .pst-clear-discover:hover { color: var(--pst-text); }

/* ============================================================
   Layout
   ============================================================ */
.pst-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.pst-layout.pst-cat-pos-sidebar { flex-direction: row; }
.pst-layout.pst-cat-pos-top     { flex-direction: column; }
.pst-main { flex: 1; min-width: 0; }

/* ============================================================
   Category filter — sidebar (desktop) & dropdown (mobile)
   ============================================================ */
.pst-category-filter {
    background: var(--pst-surface);
    border: 1px solid var(--pst-border);
    border-radius: var(--pst-radius);
    padding: 14px;
}
.pst-category-filter.pst-cat-sidebar {
    width: 190px;
    flex-shrink: 0;
    position: sticky;
    top: 80px;
}
.pst-category-filter.pst-cat-top { width: 100%; }

.pst-cat-heading {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--pst-text-muted);
    margin-bottom: 10px;
}

/* Desktop: vertical stacked list (column direction so All is above others) */
.pst-cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column; /* ← vertical, All on top */
    gap: 5px;
}
.pst-cat-btn {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 1px solid var(--pst-border);
    border-radius: 6px;
    padding: 6px 12px;
    color: var(--pst-text-muted);
    font-size: 13px;
    cursor: pointer;
    transition: all var(--pst-transition);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pst-cat-btn:hover,
.pst-cat-btn.active {
    background: var(--pst-accent);
    border-color: var(--pst-accent);
    color: var(--pst-btn-text, #fff);
}
.pst-cat-count { font-size: 11px; opacity: 0.7; margin-left: 4px; }

/* Mobile category dropdown — hidden on desktop */
.pst-cat-mobile-select {
    display: none;
    width: 100%;
    padding: 9px 12px;
    background: var(--pst-surface);
    border: 1px solid var(--pst-border);
    border-radius: 8px;
    color: var(--pst-text);
    font-size: 14px;
    cursor: pointer;
    outline: none;
    appearance: auto;
}

/* ============================================================
   Result count
   ============================================================ */
.pst-result-count {
    font-size: 13px;
    color: var(--pst-text-muted);
    margin-bottom: 10px;
}

/* ============================================================
   Table — Desktop
   ============================================================ */
.pst-table-wrap {
    overflow-x: auto;
    border-radius: var(--pst-radius);
    border: 1px solid var(--pst-border);
    position: relative;
}
.pst-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    /* Fixed layout: column widths are set by <col> / th rules and never
       grow/shrink based on cell content. This prevents the title column
       from widening (or narrowing) as products load, giving a stable,
       consistent table on every page load and across all breakpoints. */
    table-layout: fixed;
}
.pst-table thead tr {
    background: var(--pst-surface);
    border-bottom: 2px solid var(--pst-border);
}
.pst-table th {
    padding: 10px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--pst-text-muted);
    white-space: nowrap;  /* header labels stay on one line; widths are set by fixed layout */
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pst-row {
    border-bottom: 1px solid var(--pst-border);
    transition: background var(--pst-transition);
}
.pst-row:last-child { border-bottom: none; }
.pst-row:hover      { background: var(--pst-row-hover); }
.pst-table td {
    padding: 10px 14px;
    vertical-align: middle;
    color: var(--pst-text);
}

/* Loading overlay */
.pst-table-wrap.pst-loading { pointer-events: none; }
.pst-table-wrap.pst-loading tbody { opacity: 0.5; transition: opacity 0.15s; }
.pst-loading-spinner {
    display: none;
    position: absolute;
    top: 12px; right: 12px;
    width: 18px; height: 18px;
    border: 2.5px solid var(--pst-border);
    border-top-color: var(--pst-accent);
    border-radius: 50%;
    animation: pst-spin 0.5s linear infinite;
    z-index: 10;
}
.pst-loading .pst-loading-spinner { display: block; }
@keyframes pst-spin { to { transform: rotate(360deg); } }

/* Empty row */
.pst-empty-row td {
    text-align: center;
    padding: 36px;
    color: var(--pst-text-muted);
    font-style: italic;
}
.pst-error-cell { color: #c0392b !important; font-style: normal; }

/* ── Column: Title ── */
/* Fixed width so the column never changes size based on title length.
   Long titles wrap onto multiple lines (both desktop and mobile) rather
   than pushing other columns out of place. */
.pst-col-title {
    width: 35%;          /* proportional share of the fixed-layout table */
    min-width: 0;        /* override any inherited min-width               */
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal; /* always wrap — never let the title expand the column */
}
.pst-product-title {
    display: block;      /* block so word-wrap works across the full cell width */
    color: var(--pst-text);
    text-decoration: none;
    font-weight: 500;
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    transition: color var(--pst-transition);
}
.pst-product-title:hover { color: var(--pst-accent); }

/* ── Column: Preview ── */
/* Explicit fixed width; table-layout:fixed honours this exactly. */
.pst-col-preview { width: 220px; min-width: 0; }
.pst-preview-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
/* Canvas waveform — inherits CSS variables from the wrapper */
.pst-waveform {
    flex: 1;
    height: 36px;
    min-width: 0;
    display: block;
    cursor: pointer;
    border-radius: 3px;
    /* Expose theme tokens so JS can read them via getComputedStyle */
    --pst-text: var(--pst-text);
    --pst-text-muted: var(--pst-text-muted);
}
.pst-preview-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--pst-play-size);
    height: var(--pst-play-size);
    border-radius: 50%;
    background: var(--pst-btn-bg);
    color: var(--pst-btn-text, #fff);
    border: none;
    cursor: pointer;
    transition: transform var(--pst-transition), box-shadow var(--pst-transition);
    flex-shrink: 0;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.pst-preview-btn::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 3px solid transparent;
    box-sizing: border-box;
    transition: opacity 0.15s;
}
/* Laser ring: spinning bright arc outside the button while loading */
.pst-btn-loading::after {
    border-top-color: #00ff88;          /* vivid neon green leading edge */
    border-right-color: #a855f7;        /* purple trailing tail          */
    border-bottom-color: rgba(0,255,136,0.15);
    animation: pst-laser 0.5s linear infinite;
    opacity: 1 !important;
}
@keyframes pst-laser {
    to { transform: rotate(360deg); }
}
.pst-preview-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 0 0 6px var(--pst-accent-glow);
}
.pst-icon-play::before {
    content: '';
    display: block;
    width: 0; height: 0;
    border-style: solid;
    border-width: 7px 0 7px 13px;
    border-color: transparent transparent transparent currentColor;
    margin-left: 3px;
}
.pst-icon-pause::before {
    content: '';
    display: block;
    width: 10px; height: 14px;
    background: currentColor;
    box-shadow: -5px 0 0 currentColor;
    border-radius: 1px;
}
/* ── Column: Download ── */
/* min-width ensures the full "Download" heading is never cropped */
.pst-col-download { width: auto; min-width: 90px; text-align: center; }
.pst-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 8px;
    border: 1.5px solid var(--pst-border);
    background: var(--pst-surface);
    color: var(--pst-text-muted);
    text-decoration: none;
    font-size: 18px;
    cursor: pointer;
    transition: all var(--pst-transition);
    position: relative;
}
.pst-download-btn:hover { border-color: var(--pst-accent); color: var(--pst-accent); }
.pst-download-disabled {
    opacity: 1;
    cursor: not-allowed;
    pointer-events: auto !important;
    border-color: var(--pst-text-muted);
    color: var(--pst-text-muted);
    background: var(--pst-surface);
    /* Prevent long-press context menu and text selection on mobile */
    -webkit-user-select: none;
    user-select: none;
    /* Remove 300 ms tap delay; suppress double-tap zoom interference */
    touch-action: manipulation;
    /* Suppress the default iOS/Android blue tap flash */
    -webkit-tap-highlight-color: transparent;
}
/* Expand the touch hit-area outward by 8 px on every side without
   changing the visible button size — fixes missed taps at the border. */
.pst-download-disabled::before {
    content: '';
    position: absolute;
    inset: -8px;
}
.pst-download-real { color: var(--pst-accent); border-color: var(--pst-accent); }
.pst-download-real:hover { background: var(--pst-accent); color: var(--pst-btn-text,#fff); }

/* JS-driven subscribe tooltip — appended to <body> so it is never
   inside any element with reduced opacity. Shown/hidden via JS. */
.pst-subscribe-tip {
    position: fixed;
    z-index: 999999;
    background: #1a1d23;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 5px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.45);
    /* Arrow */
    display: flex;
    align-items: center;
}
.pst-subscribe-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1a1d23;
}
.pst-subscribe-tip.pst-tip-visible {
    opacity: 1;
}

/* ── Column: Variations / Tags ── */
.pst-col-variations { min-width: 130px; }
.pst-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.pst-tag-btn {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--pst-border);
    border-radius: 20px;
    padding: 2px 9px;
    color: var(--pst-text-muted);
    font-size: 11px;
    font-family: var(--pst-font);
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.6;
    transition: background var(--pst-transition), color var(--pst-transition), border-color var(--pst-transition);
}
.pst-tag-btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: var(--pst-accent);
    color: var(--pst-accent);
}
.pst-tag-btn.pst-tag-active {
    background: var(--pst-accent);
    border-color: var(--pst-accent);
    color: #fff;
    font-weight: 600;
}
.pst-tag-sep { display: none; } /* tags now use pill buttons, no separator needed */

/* Dash placeholders */
.pst-no-preview, .pst-no-download, .pst-no-tags {
    color: var(--pst-text-muted);
    opacity: 0.4;
}

/* ============================================================
   Pagination
   ============================================================ */
.pst-pagination {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0 4px;
    font-size: 14px;
    color: var(--pst-text-muted);
}
.pst-page-btn {
    padding: 8px 16px;
    background: var(--pst-surface);
    border: 1px solid var(--pst-border);
    border-radius: 8px;
    color: var(--pst-text);
    cursor: pointer;
    transition: all var(--pst-transition);
    font-size: 14px;
    text-decoration: none; /* anchor reset */
    display: inline-block; /* anchor reset */
}
.pst-page-btn:hover:not([disabled]):not(.pst-disabled) {
    background: var(--pst-accent);
    border-color: var(--pst-accent);
    color: var(--pst-btn-text, #fff);
}
.pst-page-btn[disabled],
.pst-page-btn.pst-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.pst-page-info { font-size: 13px; }

/* SEO page-link index — visually hidden but crawlable (not cloaking:
   same URLs appear in the visible Prev/Next anchors above). */
.pst-seo-page-links {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ============================================================
   Golden preset extras
   ============================================================ */
.pst-preset-golden .pst-table thead {
    background: linear-gradient(135deg,#1a1400,#2d2200,#1a1400);
}
.pst-preset-golden.dark-mode .pst-table th { color: #c9a84c; }

/* ============================================================
   MOBILE — detected via wp_is_mobile() (server-side UA detection)
   Fallback: @media (max-width: 480px) for narrow viewports / embeds
   ============================================================ */

/* ── Scoped to .pst-is-mobile (set by wp_is_mobile() in PHP) ── */
.pst-is-mobile.pst-wrapper {
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}
.pst-is-mobile .pst-controls {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start; /* cancel desktop centering on mobile */
    gap: 6px;
    margin-bottom: 4px;
    padding: 10px 12px;
}
/* Push Discover below Sort using flex order — no HTML change needed */
.pst-is-mobile .pst-sort-wrap   { order: 1; }
.pst-is-mobile .pst-discover-btn {
    order: 2;
    justify-content: center;
    height: 46px;
}
.pst-is-mobile .pst-search-wrap {
    flex: 0 0 auto;
    max-width: 100%;
    align-items: stretch;
}
.pst-is-mobile .pst-active-filters {
    margin-bottom: 4px;
    min-height: 0;
    padding: 0;
}
.pst-is-mobile .pst-result-count { padding: 0 10px; margin-bottom: 8px; }

.pst-is-mobile .pst-layout.pst-cat-pos-sidebar { flex-direction: column; gap: 0; }
.pst-is-mobile .pst-category-filter.pst-cat-sidebar {
    width: 100%;
    position: static;
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding: 8px 10px;
    margin-bottom: 8px;
}
.pst-is-mobile .pst-cat-list { display: none; }
.pst-is-mobile .pst-cat-heading { margin-bottom: 4px; }
.pst-is-mobile .pst-cat-mobile-select { display: block; }

.pst-is-mobile .pst-main { width: 100%; }

.pst-is-mobile .pst-table-wrap {
    border: none;
    border-radius: 0;
    overflow-x: visible;
}

.pst-is-mobile .pst-table thead { display: none; }
.pst-is-mobile .pst-table { border-collapse: collapse; }
.pst-is-mobile .pst-table tbody { display: block; width: 100%; }

.pst-is-mobile .pst-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--pst-border);
    border-radius: 0;
    margin: 0;
    padding: 10px;
    background: transparent;
    box-sizing: border-box;
}
.pst-is-mobile .pst-row:last-child { border-bottom: none; }
.pst-is-mobile .pst-row:hover { background: var(--pst-row-hover); }

.pst-is-mobile .pst-row td {
    display: none;
    padding: 0;
    border: none;
}

/* ── Row 1: Title (full width) ── */
.pst-is-mobile .pst-row .pst-col-title {
    display: block;
    width: 100%;
    order: 1;
    padding: 0 0 6px 0;
}
.pst-is-mobile .pst-row .pst-col-title .pst-product-title {
    font-size: 14px;
    font-weight: 600;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ── Row 2: Play button + Waveform (full width) ── */
/* ── Row 3: Download + Pencil + Tags ── */
.pst-is-mobile .pst-row .pst-col-preview {
    display: flex;
    align-items: center;
    padding: 0;
    order: 2;
    width: 100%;         /* full row so waveform has real layout space */
    min-width: 0;
    margin-right: 0;
    margin-bottom: 6px;  /* gap between waveform row and action row */
}
.pst-is-mobile .pst-row .pst-preview-wrap {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;           /* space between play button and waveform */
}
/* Waveform is visible and stretches to fill remaining preview-wrap width */
.pst-is-mobile .pst-row .pst-waveform {
    display: block;
    flex: 1;
    min-width: 0;
    height: 32px;        /* slightly shorter than desktop (36px) for compact mobile rows */
}

.pst-is-mobile .pst-row .pst-col-download {
    display: inline-flex;
    align-items: center;
    padding: 0;
    order: 3;
    flex-shrink: 0;
    margin-right: 8px;
}

.pst-is-mobile .pst-row .pst-download-btn {
    border: 1.5px solid var(--pst-border);
    background: var(--pst-surface);
}
.pst-is-mobile .pst-row .pst-download-btn:hover {
    background: transparent;
    color: var(--pst-accent);
    border-color: var(--pst-accent);
}
.pst-is-mobile .pst-row .pst-download-real {
    border: 1.5px solid var(--pst-accent);
    background: transparent;
    color: var(--pst-accent);
}
.pst-is-mobile .pst-row .pst-download-disabled {
    border: 1.5px solid var(--pst-text-muted);
    background: var(--pst-surface);
}

/* ── Row 2 continued: Pencil (order 4) then Tags (order 5) ──
   Layout: ▶ · ↓ · ✎ · [tag] [tag] [tag]…
   Pencil sits inline between download and tags.
   Tags get flex:1 so they absorb all leftover space and wrap
   naturally when a product has 4+ tags.                        */
.pst-is-mobile .pst-row td[class^="pst-col-custom"],
.pst-is-mobile .pst-row td[class*=" pst-col-custom"] {
    display: inline-flex;
    align-items: center;
    order: 4;
    flex-shrink: 0;
    padding: 0;
    margin-right: 6px;  /* subtle gap before tags */
}
.pst-is-mobile .pst-row td[class^="pst-col-custom"] > *,
.pst-is-mobile .pst-row td[class*=" pst-col-custom"] > * {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Tags: flex:1 fills all remaining row-2 space */
.pst-is-mobile .pst-row .pst-col-variations {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    order: 5;
    flex: 1;
    min-width: 0;
    padding: 0;
    margin-left: 0;
    gap: 4px;
}

.pst-is-mobile .pst-pagination {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
}
.pst-is-mobile .pst-page-btn { flex: 1; text-align: center; }

/* ── Narrow-viewport fallback (embeds, unusual viewports) ── */
@media ( max-width: 480px ) {
    .pst-wrapper {
        padding: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .pst-controls {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start; /* cancel desktop centering */
        gap: 6px;
        margin-bottom: 4px;
        padding: 10px 12px;
    }
    .pst-sort-wrap    { order: 1; }
    .pst-discover-btn {
        order: 2;
        justify-content: center;
        height: 46px;
    }
    .pst-search-wrap {
        flex: 0 0 auto;
        max-width: 100%;
        align-items: stretch;
    }
    .pst-active-filters { margin-bottom: 4px; min-height: 0; padding: 0; }
    .pst-result-count { padding: 0 10px; margin-bottom: 8px; }
    .pst-layout.pst-cat-pos-sidebar { flex-direction: column; gap: 0; }
    .pst-category-filter.pst-cat-sidebar {
        width: 100%; position: static; border-radius: 0;
        border-left: none; border-right: none; padding: 8px 10px; margin-bottom: 8px;
    }
    .pst-cat-list { display: none; }
    .pst-cat-heading { margin-bottom: 4px; }
    .pst-cat-mobile-select { display: block; }
    .pst-main { width: 100%; }
    .pst-table-wrap { border: none; border-radius: 0; overflow-x: visible; }
    .pst-table thead { display: none; }
    .pst-table { border-collapse: collapse; }
    .pst-table tbody { display: block; width: 100%; }
    .pst-row {
        display: flex; flex-wrap: wrap; align-items: center;
        width: 100%; border: none;
        border-bottom: 1px solid var(--pst-border); border-radius: 0;
        margin: 0; padding: 10px; background: transparent; box-sizing: border-box;
    }
    .pst-row:last-child { border-bottom: none; }
    .pst-row:hover { background: var(--pst-row-hover); }
    .pst-row td { display: none; padding: 0; border: none; }
    /* Row 1: title */
    .pst-row .pst-col-title { display: block; width: 100%; order: 1; padding: 0 0 6px 0; }
    .pst-row .pst-col-title .pst-product-title { font-size: 14px; font-weight: 600; white-space: normal; word-break: break-word; overflow-wrap: break-word; }
    /* Row 2: play button + waveform (full width) */
    .pst-row .pst-col-preview {
        display: flex; align-items: center; padding: 0;
        order: 2; width: 100%; min-width: 0;
        margin-right: 0; margin-bottom: 6px;
    }
    .pst-row .pst-preview-wrap { display: flex; align-items: center; width: 100%; gap: 10px; }
    .pst-row .pst-waveform { display: block; flex: 1; min-width: 0; height: 32px; }
    /* Row 3: download + pencil + tags */
    .pst-row .pst-col-download {
        display: inline-flex; align-items: center; padding: 0;
        order: 3; flex-shrink: 0; margin-right: 8px;
    }
    /* Pencil (order 4) — inline between download and tags */
    .pst-row td[class^="pst-col-custom"],
    .pst-row td[class*=" pst-col-custom"] {
        display: inline-flex; align-items: center;
        order: 4; flex-shrink: 0; padding: 0; margin-right: 6px;
    }
    .pst-row td[class^="pst-col-custom"] > *,
    .pst-row td[class*=" pst-col-custom"] > * { display: inline-block; vertical-align: middle; flex-shrink: 0; }
    /* Tags (order 5) — flex:1 absorbs remaining row space */
    .pst-row .pst-col-variations {
        display: inline-flex; flex-wrap: wrap; align-items: center;
        order: 5; flex: 1; min-width: 0; padding: 0; margin-left: 0; gap: 4px;
    }
    .pst-pagination { flex-wrap: wrap; gap: 8px; padding: 10px; }
    .pst-page-btn { flex: 1; text-align: center; }
}

/* When admin ticked "hide column headers on mobile" */
.pst-is-mobile.pst-hide-headers-mobile .pst-table thead { display: none; }
@media ( max-width: 480px ) {
    .pst-hide-headers-mobile .pst-table thead { display: none; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .pst-wrapper, .pst-preview-btn, .pst-row {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================
   Shop override
   ============================================================ */
.pst-shop-override-wrap {
    width: 100% !important; max-width: 100% !important;
    float: none !important; clear: both !important;
    margin: 0 !important; padding: 0 !important;
}
.woocommerce-page .pst-shop-override-wrap ~ *,
body.woocommerce .pst-shop-override-wrap ~ * { display: none !important; }

/* ── Element: Download Button (download_btn type) ── */
.pst-el-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: var(--pst-accent);
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    transition: opacity .15s;
}
.pst-el-download-btn:hover { opacity: .82; color: #fff; text-decoration: none; }
.pst-el-no-file { color: var(--pst-text-muted); }