@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

/* ══════════════════════════════════════════
   SHARED BASE
══════════════════════════════════════════ */
.ns-product-list-wrap *,
.ns-d-wrap * { box-sizing: border-box; }

/* ══════════════════════════════════════════
   PRODUCT LIST WIDGET
══════════════════════════════════════════ */

/* Filters */
.ns-list-filters {
    display: flex; flex-wrap: wrap; gap: 12px;
    align-items: center; margin-bottom: 24px;
}
.ns-search-wrap {
    position: relative; flex: 1; min-width: 180px; max-width: 280px;
}
.ns-search-input {
    width: 100%; background: #1a1a1a; border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px; color: #e8e3da; font-family: 'Outfit',sans-serif;
    font-size: .85rem; padding: 9px 36px 9px 14px; outline: none;
    transition: border-color .2s;
}
.ns-search-input:focus { border-color: rgba(245,197,24,.4); }
.ns-search-input::placeholder { color: rgba(255,255,255,.25); }
.ns-search-icon {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    font-size: 13px; pointer-events: none;
}
.ns-filter-tabs {
    display: flex; gap: 6px; flex-wrap: wrap;
}
.ns-filter-btn {
    font-family: 'DM Mono',monospace; font-size: .68rem; letter-spacing: .06em;
    text-transform: uppercase; padding: 6px 12px; border-radius: 6px;
    border: 1px solid rgba(255,255,255,.1); background: none;
    color: rgba(255,255,255,.4); cursor: pointer; transition: all .18s;
}
.ns-filter-btn:hover  { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.2); }
.ns-filter-btn.active { background: #f5c518; border-color: #f5c518; color: #111; font-weight: 600; }

.ns-extra-filters { display: flex; align-items: center; gap: 8px; }
.ns-disc-toggle {
    display: flex; align-items: center; gap: 7px; cursor: pointer;
    font-family: 'DM Mono',monospace; font-size: .7rem; color: rgba(255,255,255,.45);
    transition: color .2s;
}
.ns-disc-toggle:hover { color: rgba(255,255,255,.75); }
.ns-disc-check { accent-color: #f5c518; width: 14px; height: 14px; cursor: pointer; }

/* Grid */
.ns-products-grid {
    display: grid; gap: 16px;
}
.ns-cols-1 { grid-template-columns: 1fr; }
.ns-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ns-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ns-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
    .ns-cols-4, .ns-cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .ns-cols-4, .ns-cols-3, .ns-cols-2 { grid-template-columns: 1fr; }
}

/* List Card */
.ns-list-card {
    background: #1a1a1a; border-radius: 14px;
    border: 1px solid rgba(255,255,255,.07);
    overflow: hidden; text-decoration: none; color: inherit;
    display: flex; flex-direction: column;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.ns-list-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,.55);
    border-color: rgba(245,197,24,.2);
}
.ns-list-thumb {
    position: relative; width: 100%; height: 180px;
    overflow: hidden; background: #111; flex-shrink: 0;
}
.ns-list-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s ease; display: block;
}
.ns-list-card:hover .ns-list-thumb img { transform: scale(1.05); }
.ns-list-thumb-empty {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    background: #111;
}
.ns-list-thumb-empty span { font-size: 48px; color: rgba(245,197,24,.18); }
.ns-list-badge {
    position: absolute; top: 10px; left: 10px;
    background: #f5c518; color: #111;
    font-family: 'DM Mono',monospace; font-size: .6rem; font-weight: 700;
    letter-spacing: .06em; padding: 3px 7px; border-radius: 4px;
}
.ns-list-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; }
.ns-list-cat {
    font-family: 'DM Mono',monospace; font-size: .62rem;
    letter-spacing: .08em; text-transform: uppercase;
    color: #f5c518; margin-bottom: 5px; display: block;
}
.ns-list-title {
    font-family: 'Outfit',sans-serif; font-size: .95rem;
    font-weight: 600; color: #fff; line-height: 1.3;
    margin: 0 0 10px; flex: 1;
}
.ns-list-price-row { display: flex; align-items: center; gap: 7px; margin-top: auto; }
.ns-list-price-old {
    font-family: 'DM Mono',monospace; font-size: .75rem;
    color: rgba(255,255,255,.28); text-decoration: line-through;
}
.ns-list-price {
    font-family: 'DM Mono',monospace; font-size: .95rem;
    color: #f5c518; font-weight: 500;
}

/* No results */
.ns-no-results {
    font-family: 'Outfit',sans-serif; color: rgba(255,255,255,.35);
    font-size: .9rem; text-align: center; padding: 40px; grid-column: 1/-1;
}

/* Load more */
.ns-load-more-wrap { text-align: center; margin-top: 24px; }
.ns-load-more-btn {
    font-family: 'DM Mono',monospace; font-size: .72rem; letter-spacing: .07em;
    text-transform: uppercase; padding: 11px 28px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,.15); background: none;
    color: rgba(255,255,255,.5); cursor: pointer; transition: all .18s;
}
.ns-load-more-btn:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.ns-load-more-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ══════════════════════════════════════════
   PRODUCT DETAIL WIDGET
══════════════════════════════════════════ */
.ns-d-card {
    background: #1a1a1a; border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px; overflow: hidden;
    font-family: 'Outfit',sans-serif; color: #f0ede8;
    max-width: 560px; position: relative;
    transition: box-shadow .3s;
}
.ns-d-card:hover { box-shadow: 0 0 0 1px rgba(245,197,24,.18), 0 16px 60px rgba(0,0,0,.7); }

/* Cover */
.ns-d-cover { position: relative; height: 220px; overflow: hidden; background: #111; }
.ns-d-cover img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s; }
.ns-d-card:hover .ns-d-cover img { transform: scale(1.04); }
.ns-d-cover-fade { position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.15) 0%,rgba(20,18,14,.95) 100%); }
.ns-d-cover-empty { height:100%;display:flex;align-items:center;justify-content:center;background:#111; }
.ns-d-staff { position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:24px 0; }
.ns-d-staff span { height:1px;background:rgba(255,255,255,.05); }
.ns-d-clef { position:relative;z-index:1;font-size:72px;color:rgba(245,197,24,.18); }
.ns-d-watermark { position:absolute;right:-10px;bottom:10px;font-size:4rem;font-weight:700;color:rgba(255,255,255,.05);pointer-events:none;text-transform:capitalize; }
.ns-d-cover-hero { position:absolute;bottom:0;left:0;right:0;padding:18px 22px 20px;z-index:2; }
.ns-d-eyebrow { font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);font-family:'DM Mono',monospace;margin-bottom:5px; }
.ns-d-cover-title { font-size:1.5rem;font-weight:700;line-height:1.2;color:#fff;margin-bottom:6px; }
.ns-d-cover-cat { display:inline-block;background:#f5c518;color:#111;font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:4px;font-family:'DM Mono',monospace; }

/* Body */
.ns-d-body { padding: 18px 20px 22px; }
.ns-d-cat-tabs { display:flex;gap:18px;margin-bottom:18px;border-bottom:1px solid rgba(255,255,255,.07);padding-bottom:12px;overflow-x:auto;scrollbar-width:none; }
.ns-d-cat-tabs::-webkit-scrollbar { display:none; }
.ns-d-cat-tab { font-size:.78rem;font-weight:500;color:rgba(255,255,255,.3);white-space:nowrap;cursor:pointer;padding-bottom:10px;margin-bottom:-13px;border-bottom:2px solid transparent;transition:color .2s,border-color .2s; }
.ns-d-cat-tab.active { color:#f5c518;border-bottom-color:#f5c518; }

.ns-d-meta { display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap; }
.ns-d-title { font-size:1.05rem;font-weight:600;line-height:1.25;color:#fff;margin-bottom:6px; }
.ns-d-stars { display:flex;align-items:center;gap:2px; }
.ns-d-star { font-size:12px; }
.ns-d-star-f { color:#f5c518; }
.ns-d-star-e { color:rgba(255,255,255,.18); }
.ns-d-rnum { font-size:.68rem;color:rgba(255,255,255,.4);margin-left:4px;font-family:'DM Mono',monospace; }
.ns-d-price-block { display:flex;flex-wrap:wrap;align-items:center;gap:6px;justify-content:flex-end; }
.ns-d-price-reg,.ns-d-price-new { font-family:'DM Mono',monospace;font-size:1rem;color:#f5c518;font-weight:500; }
.ns-d-price-old { font-family:'DM Mono',monospace;font-size:.78rem;color:rgba(255,255,255,.28);text-decoration:line-through; }
.ns-d-badge { background:rgba(245,197,24,.12);color:#f5c518;border:1px solid rgba(245,197,24,.28);font-family:'DM Mono',monospace;font-size:.62rem;padding:2px 6px;border-radius:3px;letter-spacing:.04em; }

/* Video */
.ns-d-video { position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:10px;margin-bottom:16px;background:#000;border:1px solid rgba(255,255,255,.07); }
.ns-d-video iframe { position:absolute;inset:0;width:100%;height:100%;border:none; }

/* Siblings */
.ns-d-siblings { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px; }
.ns-d-sib { background:#242424;border-radius:10px;padding:10px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.05);transition:border-color .2s; }
.ns-d-sib:hover { border-color:rgba(245,197,24,.22); }
.ns-d-sib-thumb { width:100%;height:76px;border-radius:7px;overflow:hidden;background:#1a1a1a;display:flex;align-items:center;justify-content:center;margin-bottom:8px; }
.ns-d-sib-thumb img { width:100%;height:100%;object-fit:cover; }
.ns-d-sib-thumb span { font-size:28px;color:rgba(245,197,24,.18); }
.ns-d-sib-name { font-size:.72rem;font-weight:500;color:#e0dbd4;margin-bottom:3px;line-height:1.2; }
.ns-d-sib-price { font-size:.78rem;color:#f5c518;font-family:'DM Mono',monospace; }
.ns-d-add-btn { position:absolute;bottom:10px;right:10px;width:26px;height:26px;border-radius:6px;background:#f5c518;color:#111;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700;text-decoration:none;transition:transform .15s; }
.ns-d-add-btn:hover { transform:scale(1.1); }

/* Buttons */
.ns-d-btn { display:inline-flex;align-items:center;gap:8px;font-family:'DM Mono',monospace;font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;padding:11px 18px;border-radius:10px;border:1px solid;cursor:pointer;text-decoration:none;transition:all .18s;background:none; }
.ns-d-btn:hover { transform:translateY(-1px); }
.ns-d-btn:active { transform:translateY(0); }
.ns-d-btn-buy { background:#f5c518;color:#111;border-color:#f5c518;width:100%;justify-content:center;font-weight:700;padding:14px;box-shadow:0 4px 20px rgba(245,197,24,.22); }
.ns-d-btn-buy:hover { background:#ffd740;box-shadow:0 8px 28px rgba(245,197,24,.38); }
.ns-d-btn-buy:disabled { opacity:.65;cursor:not-allowed;transform:none; }
.ns-d-btn-price { margin-left:auto;opacity:.55;font-size:.7rem; }
.ns-d-dl-row { display:flex;gap:8px; }
.ns-d-btn-pdf { color:#e8e3da;border-color:rgba(255,255,255,.12);flex:1;justify-content:center; }
.ns-d-btn-pdf:hover { background:rgba(255,255,255,.06); }
.ns-d-btn-mp3 { color:#8fb8c4;border-color:rgba(143,184,196,.22);flex:1;justify-content:center; }
.ns-d-btn-mp3:hover { background:rgba(143,184,196,.07); }
.ns-d-btn-login { color:rgba(255,255,255,.35);border-color:rgba(255,255,255,.1);width:100%;justify-content:center; }
.ns-d-btn-login:hover { color:#fff;border-color:rgba(255,255,255,.25); }

/* Timer */
.ns-d-timer { display:inline-flex;align-items:center;gap:6px;font-family:'DM Mono',monospace;font-size:.68rem;color:#8fb8c4;letter-spacing:.05em;margin-bottom:8px; }
.ns-d-pulse { width:6px;height:6px;border-radius:50%;background:#8fb8c4;flex-shrink:0;animation:nsPulse 1.4s ease-in-out infinite; }
@keyframes nsPulse { 0%,100%{opacity:1}50%{opacity:.2} }

/* Expired */
.ns-d-expired-msg { display:flex;align-items:center;gap:7px;font-size:.78rem;color:#c47a5a;font-family:'DM Mono',monospace;margin-bottom:10px; }

/* Trending */
.ns-d-trending { margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.07); }
.ns-d-tr-head { display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px; }
.ns-d-tr-lbl { font-size:.9rem;font-weight:600;color:#fff; }
.ns-d-tr-va { font-size:.68rem;color:rgba(255,255,255,.3);text-decoration:none;font-family:'DM Mono',monospace;transition:color .2s; }
.ns-d-tr-va:hover { color:rgba(255,255,255,.65); }
.ns-d-tr-item { display:flex;align-items:center;gap:12px;background:#222;border-radius:10px;padding:10px 12px;margin-bottom:8px;text-decoration:none;border:1px solid rgba(255,255,255,.05);transition:background .18s,border-color .18s; }
.ns-d-tr-item:last-child { margin-bottom:0; }
.ns-d-tr-item:hover { background:#282828;border-color:rgba(245,197,24,.15); }
.ns-d-tr-thumb { width:46px;height:46px;border-radius:8px;overflow:hidden;background:#1a1a1a;flex-shrink:0;display:flex;align-items:center;justify-content:center; }
.ns-d-tr-thumb img { width:100%;height:100%;object-fit:cover; }
.ns-d-tr-thumb span { font-size:22px;color:rgba(245,197,24,.18); }
.ns-d-tr-info { flex:1;min-width:0; }
.ns-d-tr-name { font-size:.78rem;font-weight:500;color:#e8e3da;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.ns-d-tr-stars { display:flex;align-items:center;gap:1px;margin-bottom:3px; }
.ns-d-tr-star-f { color:#f5c518;font-size:10px; }
.ns-d-tr-star-e { color:rgba(255,255,255,.15);font-size:10px; }
.ns-d-tr-rnum { font-size:.62rem;color:rgba(255,255,255,.35);margin-left:3px;font-family:'DM Mono',monospace; }
.ns-d-tr-price { font-size:.75rem;color:#f5c518;font-family:'DM Mono',monospace; }
.ns-d-tr-arrow { font-size:1.3rem;color:#f5c518;flex-shrink:0; }

/* ══════════════════════════════════════════
   QPAY MODAL (shared)
══════════════════════════════════════════ */
.ns-modal { display:none;position:fixed;inset:0;z-index:999999;background:rgba(8,8,8,.87);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);align-items:center;justify-content:center; }
.ns-modal.is-open { display:flex;animation:nsFadeIn .2s ease; }
@keyframes nsFadeIn { from{opacity:0}to{opacity:1} }
@keyframes nsSlideUp { from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)} }
.ns-modal-box { background:#1a1a1a;border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:32px;min-width:300px;max-width:400px;width:92vw;position:relative;text-align:center;animation:nsSlideUp .25s ease;box-shadow:0 32px 80px rgba(0,0,0,.7); }
.ns-modal-close { position:absolute;top:14px;right:16px;background:none;border:none;color:rgba(255,255,255,.3);font-size:1rem;cursor:pointer;font-family:'DM Mono',monospace;padding:4px;transition:color .15s; }
.ns-modal-close:hover { color:#fff; }
.ns-modal-title { font-family:'DM Mono',monospace;font-size:.65rem;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.3);margin-bottom:20px; }
.ns-modal-body { min-height:130px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px; }
.ns-modal-body .ns-qr img { width:180px;height:180px;border-radius:4px; }
.ns-modal-body .ns-qr-hint { font-family:'DM Mono',monospace;font-size:.65rem;color:rgba(255,255,255,.3);letter-spacing:.04em; }
.ns-deeplink-btn { display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:8px;background:rgba(245,197,24,.1);color:#f5c518;border:1px solid rgba(245,197,24,.25);font-family:'DM Mono',monospace;font-size:.72rem;text-decoration:none;letter-spacing:.05em;transition:background .2s; }
.ns-deeplink-btn:hover { background:rgba(245,197,24,.18); }
.ns-pulse-row { display:flex;align-items:center;gap:7px;font-family:'DM Mono',monospace;font-size:.65rem;color:rgba(255,255,255,.3); }
.ns-pulse-dot { width:6px;height:6px;border-radius:50%;background:#8fb8c4;flex-shrink:0;animation:nsPulse 1.4s ease-in-out infinite; }
.ns-spinner { width:30px;height:30px;border:2px solid rgba(255,255,255,.08);border-top-color:#f5c518;border-radius:50%;animation:nsSpin .7s linear infinite; }
@keyframes nsSpin { to{transform:rotate(360deg)} }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 480px) {
    .ns-d-body { padding: 14px 14px 18px; }
    .ns-d-siblings { grid-template-columns: 1fr; }
    .ns-d-dl-row { flex-direction: column; }
    .ns-d-cover { height: 180px; }
    .ns-d-cover-title { font-size: 1.2rem; }
    .ns-list-filters { flex-direction: column; align-items: stretch; }
    .ns-search-wrap { max-width: 100%; }
}