/**
 * Admin Modern UI — Shared styles for store owner pages
 * Used across: stores, store-settings, store-orders, products, import-list,
 *              account, settings, affiliate, and related pages.
 */

/* ============================================================
   PAGE HEADERS
   ============================================================ */
.page-header,.ss-header,.il-header,.set-header,.prod-header,.stores-header,.cs-header,.cn-header,.del-header{padding:20px 0 16px}
.page-title,.ss-title,.il-title,.set-title,.prod-title,.stores-title,.cs-title,.cn-title,.del-title{font-size:22px;font-weight:700;color:var(--text);margin:0 0 6px}
.page-sub,.il-sub,.set-sub,.prod-sub,.stores-sub,.cs-sub,.cn-sub{font-size:13px;color:#718096;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.page-back,.cs-back,.cn-back,.del-back{font-size:12px;color:var(--text-muted);font-weight:500;text-decoration:none;display:inline-flex;align-items:center;gap:4px;margin-bottom:8px}
.page-back:hover,.cs-back:hover,.cn-back:hover,.del-back:hover{color:var(--primary,#3b82f6);text-decoration:none}

/* Store info bar (dashboard, store-settings) */
.store-bar{background:linear-gradient(135deg,#f0f4ff 0%,#e8eeff 100%);border:1px solid #d4deff;border-radius:10px;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.store-bar .store-info{display:flex;align-items:center;gap:12px}
.store-bar .store-icon{width:38px;height:38px;border-radius:8px;background:var(--primary,#3b82f6);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px}
.store-bar .store-name{font-weight:600;font-size:14px;color:var(--text)}
.store-bar .store-url{font-size:12px;color:#718096}
.store-bar .store-actions{display:flex;gap:6px}
.store-bar .store-actions .btn{font-size:12px;padding:6px 14px;border-radius:6px;font-weight:600}

/* ============================================================
   CARDS
   ============================================================ */
.card-modern{background:var(--surface);border:1px solid #edf2f7;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.04);margin-bottom:20px;overflow:hidden}
.card-modern__header{padding:16px 24px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;gap:10px}
.card-modern__header i{color:#94a3b8;font-size:14px;width:18px;text-align:center}
.card-modern__header h3{margin:0;font-size:15px;font-weight:700;color:var(--text)}
.card-modern__header p{margin:0;font-size:12px;color:#94a3b8}
.card-modern__body{padding:24px}

/* Action bar (list headers with title + button) */
.action-bar{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid #f1f5f9}
.action-bar h3{margin:0;font-size:15px;font-weight:700;color:var(--text)}
.action-bar .btn{border-radius:6px;font-weight:600;font-size:12px}

/* Save footer */
.save-footer{padding:20px 24px;border-top:1px solid #f1f5f9;display:flex;justify-content:flex-end;background:var(--surface-2);border-radius:0 0 10px 10px}
.save-footer .btn{border-radius:8px;font-weight:600;font-size:13px;padding:10px 24px}

/* Divider */
.divider-modern{border:none;border-top:1px solid #f1f5f9;margin:0}

/* ============================================================
   TAB NAVIGATION (horizontal scrollable)
   ============================================================ */
.tabs-modern{display:flex;gap:4px;overflow-x:auto;border-bottom:2px solid #edf2f7;padding-bottom:0;margin-bottom:20px;scrollbar-width:none}
.tabs-modern::-webkit-scrollbar{display:none}
.tab-modern{display:flex;align-items:center;gap:6px;padding:10px 16px;font-size:13px;font-weight:600;color:var(--text-muted);text-decoration:none;white-space:nowrap;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;background:none}
.tab-modern:hover{color:var(--text-muted);text-decoration:none;background:none}
.tab-modern.active,.tabs-modern .nav-link.active{color:var(--primary,#3b82f6);border-bottom-color:var(--primary,#3b82f6);background:none}
.tab-modern i{font-size:13px;width:16px;text-align:center}

/* ============================================================
   FORMS
   ============================================================ */

/* Two-column form section (label left, fields right) */
.form-section{display:grid;grid-template-columns:260px 1fr;gap:32px;padding:24px}
@media(max-width:991px){.form-section{grid-template-columns:1fr;gap:12px}}
.form-section__left h3,.form-section__left h4{font-size:14px;font-weight:700;color:var(--text);margin:0 0 4px}
.form-section__left p{font-size:12px;color:#94a3b8;margin:0;line-height:1.5}

/* Field */
.field-modern{margin-bottom:18px}
.field-modern:last-child{margin-bottom:0}

/* Labels */
.label-modern{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);margin-bottom:6px}
.label-modern .required{color:#ef4444;margin-left:2px}

/* Hint text */
.hint-modern{font-size:11px;color:#94a3b8;margin-top:4px;line-height:1.4}

/* Modern input styling (applied to .form-control inside .card-modern or with .input-modern) */
.input-modern,.card-modern .form-control{border-radius:8px;border-color:#e2e8f0;font-size:13px;padding:9px 14px;transition:border-color .2s,box-shadow .2s;outline:none}
.input-modern:focus,.card-modern .form-control:focus{border-color:var(--primary,#3b82f6);box-shadow:0 0 0 3px rgba(59,130,246,.08)}
.input-modern[type="color"]{height:42px;padding:4px 8px;cursor:pointer}
select.input-modern{cursor:pointer;appearance:auto}
textarea.input-modern{resize:vertical;min-height:60px}

/* Grid layouts */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:767px){.grid-2{grid-template-columns:1fr}}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
@media(max-width:767px){.grid-3{grid-template-columns:1fr}}

/* Switch toggle */
.switch-modern{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface-2);border-radius:8px;border:1px solid #edf2f7;margin-bottom:10px}
.switch-modern:last-child{margin-bottom:0}
.switch-modern label{margin:0;font-size:13px;color:var(--text-muted);font-weight:500;cursor:pointer}

/* Color picker inline */
.color-picker-group{display:flex;align-items:center;gap:8px}
.color-picker-group input[type="color"]{width:44px;height:38px;padding:2px;border:1px solid #e2e8f0;border-radius:6px;cursor:pointer;flex-shrink:0}
.color-picker-group input[type="text"]{flex:1}

/* Image preview */
.img-preview-modern,.ss-img-preview{display:inline-block;padding:8px;background:var(--surface-2);border:1px solid #edf2f7;border-radius:8px;margin-bottom:8px}
.img-preview-modern img,.ss-img-preview img{display:block;max-height:60px;max-width:200px;border-radius:4px}

/* ============================================================
   TABLES
   ============================================================ */
.table-modern{width:100%;border-collapse:separate;border-spacing:0}
.table-modern thead th{background:var(--surface-2);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#94a3b8;padding:12px 16px;border-bottom:2px solid #e2e8f0;white-space:nowrap}
.table-modern tbody td{padding:12px 16px;border-bottom:1px solid #f1f5f9;font-size:13px;color:var(--text-muted);vertical-align:middle}
.table-modern tbody tr:hover td{background:var(--surface-2)}
.table-modern tbody tr:last-child td{border-bottom:none}

/* Checkbox modern */
.table-modern input[type="checkbox"]{width:18px;height:18px;border-radius:4px;border:2px solid #cbd5e1;cursor:pointer;accent-color:var(--primary,#3b82f6);background:var(--surface)}

/* ============================================================
   STATUS BADGES (extend existing status-badge system)
   ============================================================ */
/* Already defined in dashboard-modern.css or wrapper, these are safe fallbacks */

/* ============================================================
   EMPTY STATES
   ============================================================ */
.empty-modern{text-align:center;padding:48px 20px}
.empty-modern i{font-size:40px;color:#e2e8f0;margin-bottom:12px;display:block}
.empty-modern img{max-width:240px;margin-bottom:20px;opacity:.7}
.empty-modern h3{font-size:16px;font-weight:600;color:var(--text-muted);margin-bottom:4px}
.empty-modern p{font-size:13px;color:#94a3b8;margin-bottom:16px}

/* ============================================================
   SLIDE-OVER PANEL (products page)
   ============================================================ */
.slide-overlay{position:fixed;inset:0;background:rgba(15,23,42,.4);z-index:99998;display:none;backdrop-filter:blur(2px)}
.slide-overlay.active{display:block}
.slide-panel{position:fixed;top:0;right:-480px;width:480px;max-width:100%;height:100vh;background:var(--surface);z-index:99999;transition:right .3s ease;box-shadow:-10px 0 30px rgba(0,0,0,.12);display:flex;flex-direction:column}
.slide-panel.active{right:0}
@media(max-width:576px){.slide-panel{width:100%}}
.slide-header{padding:16px 24px;border-bottom:1px solid #f1f5f9;display:flex;align-items:flex-start;justify-content:space-between;flex-shrink:0;background:var(--surface-2)}
.slide-header h3{font-size:15px;font-weight:700;color:var(--text);margin:0;max-width:380px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.slide-close{background:none;border:none;font-size:22px;color:#94a3b8;cursor:pointer;padding:0;line-height:1}
.slide-close:hover{color:var(--text-muted)}
.slide-body{flex:1;overflow-y:auto;padding:20px 24px}
.slide-footer{padding:14px 24px;border-top:1px solid #f1f5f9;display:flex;flex-direction:column;gap:6px;flex-shrink:0;background:var(--surface-2)}
.slide-footer .btn{border-radius:6px;font-weight:600;font-size:12px;padding:8px 14px;display:flex;align-items:center;justify-content:center;gap:6px}
.slide-section{margin-bottom:20px}
.slide-section-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#94a3b8;margin-bottom:8px}

/* ============================================================
   LOADING OVERLAY
   ============================================================ */
.lds-dual-ring.hidden{display:none}
.lds-dual-ring{display:inline-block;width:80px;height:80px}
.lds-dual-ring:after{content:" ";display:block;width:64px;height:64px;margin:20% auto;border-radius:50%;border:6px solid #fff;border-color:#fff transparent #fff transparent;animation:lds-dual-ring 1.2s linear infinite}
@keyframes lds-dual-ring{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.overlay{position:fixed;top:0;left:0;width:100%;height:100vh;background:rgba(0,0,0,.8);z-index:999;opacity:1;transition:all .5s;display:flex;align-items:center;justify-content:center}
.overlay.hidden{display:none}
.loader{border:16px solid #f3f3f3;border-radius:50%;border-top:16px solid #3498db;width:120px;height:120px;animation:spin 2s linear infinite}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* ============================================================
   MODAL OVERLAY (store-orders action modal)
   ============================================================ */
.so-modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:9999;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(2px)}
.so-modal-overlay.active{display:flex}
.so-modal{background:var(--surface);border-radius:12px;width:100%;max-width:460px;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);animation:soModalIn .25s ease}
@keyframes soModalIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ============================================================
   ACCOUNT PAGES
   ============================================================ */
.acct-header{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.acct-avatar{width:56px;height:56px;border-radius:12px;object-fit:cover;border:2px solid #edf2f7}
.acct-info h2{font-size:20px;font-weight:700;color:var(--text);margin:0 0 4px}
/* Grouped account settings (issue #326, restyled as cards #553).
   Each group is its OWN card so it is obvious which links belong together.
   Cards use the shared design tokens: white surface on the cream page, a soft
   border, rounded corners, vermilion accent, #303030 text, Tajawal. The links
   inside a card stack as a clean vertical list, not one long shared strip.
   Light-first and RTL-correct (logical properties, English digits). */
.acct-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-4);margin-bottom:var(--sp-5);align-items:start}
.acct-group{display:flex;flex-direction:column;min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-4);box-shadow:var(--shadow-xs);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.acct-group--active{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.acct-group__head{display:flex;flex-direction:column;gap:2px;margin-bottom:var(--sp-3);padding-bottom:var(--sp-3);border-bottom:1px solid var(--border)}
.acct-group__title{font-size:14px;font-weight:700;color:var(--text)}
.acct-group--active .acct-group__title{color:var(--accent)}
.acct-group__desc{font-size:12px;color:var(--text-muted);line-height:1.5}

/* The group's links stack as a clear vertical list inside the card. */
.acct-tabs{display:flex;flex-direction:column;gap:2px}
.acct-tabs .acct-tab{display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:13px;font-weight:600;color:var(--text-muted);text-decoration:none;border-radius:var(--r-sm);border-inline-start:3px solid transparent;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.acct-tabs .acct-tab:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.acct-tabs .acct-tab.active{background:var(--accent-weak);color:var(--accent);border-inline-start-color:var(--accent)}
.acct-tabs .acct-tab i{font-size:13px;width:16px;text-align:center;flex:none}

.acct-help{display:flex;align-items:flex-start;gap:8px;margin-bottom:16px;padding:10px 14px;background:var(--bg);border-radius:var(--r-md);border-inline-start:3px solid var(--accent);color:var(--text-muted);font-size:13px;line-height:1.6}
.acct-help i{flex:none;margin-top:3px;color:var(--accent)}

@media (max-width:600px){
    .acct-groups{grid-template-columns:1fr;gap:var(--sp-3)}
}

/* ============================================================
   MISC UTILITIES
   ============================================================ */
.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-16{gap:16px}

/* ============================================================
   STORE SETTINGS PAGE (ss-*)
   ============================================================ */
/* Store Settings — Vertical Sidebar Layout */
.ss-layout{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:start}
@media(max-width:991px){.ss-layout{grid-template-columns:1fr;gap:0}}

/* Sidebar — sticky, scrollable, Shopify-style */
.ss-sidebar{background:var(--surface);border:1px solid #edf2f7;border-radius:10px;padding:8px;position:sticky;top:20px;box-shadow:0 1px 3px rgba(0,0,0,.04);max-height:calc(100vh - 40px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#e2e8f0 transparent}
.ss-sidebar::-webkit-scrollbar{width:4px}
.ss-sidebar::-webkit-scrollbar-track{background:transparent}
.ss-sidebar::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:4px}
.ss-sidebar::-webkit-scrollbar-thumb:hover{background:#cbd5e1}

/* Store mini card at top of sidebar */
.ss-sidebar-store{display:flex;align-items:center;gap:10px;padding:12px;margin-bottom:8px;border-bottom:1px solid #f1f5f9}
.ss-sidebar-store-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0}
.ss-sidebar-store-name{font-size:13px;font-weight:700;color:var(--text);line-height:1.2;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-sidebar-store-status{font-size:11px;color:#94a3b8;display:flex;align-items:center;gap:4px;margin-top:2px}
.ss-sidebar-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.ss-sidebar-dot--live{background:#10b981}
.ss-sidebar-dot--setup{background:#f59e0b}
.ss-sidebar-dot--paused{background:#94a3b8}
.ss-sidebar-dot--suspended{background:#ef4444}

/* Sidebar groups & labels */
.ss-sidebar-group{margin-bottom:4px}
.ss-sidebar-group:last-child{margin-bottom:0}
.ss-sidebar-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:#94a3b8;padding:10px 12px 4px;margin-top:4px}
.ss-sidebar-group:first-child .ss-sidebar-label{margin-top:0}

/* Nav items — left border accent on active */
.ss-nav{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:13px;font-weight:500;color:var(--text-muted);text-decoration:none;border-radius:6px;transition:all .15s;white-space:nowrap;border-left:3px solid transparent;position:relative}
.ss-nav span{flex:1}
.ss-nav:hover{background:var(--surface-2);color:var(--text-muted);text-decoration:none}
.ss-nav.active{background:#f0f4ff;color:var(--primary,#3b82f6);font-weight:600;border-left-color:var(--primary,#3b82f6)}
.ss-nav.active:hover{background:#f0f4ff;color:var(--primary,#3b82f6)}
.ss-nav.active i{color:var(--primary,#3b82f6)}
.ss-nav i{width:16px;text-align:center;font-size:13px;flex-shrink:0;color:#94a3b8;transition:color .15s}
.ss-nav:hover i{color:var(--text-muted)}

/* Nav badges (subscriber count, pending reviews) */
.ss-nav-badge{font-size:10px;font-weight:700;background:#e2e8f0;color:var(--text-muted);padding:1px 6px;border-radius:10px;margin-left:auto;min-width:18px;text-align:center;line-height:1.5}
.ss-nav.active .ss-nav-badge{background:var(--primary,#3b82f6);color:#fff}
.ss-nav-badge--warn{background:#fef3c7;color:#d97706}
.ss-nav.active .ss-nav-badge--warn{background:#fbbf24;color:#fff}

.ss-content{min-width:0}

/* Mobile: sidebar becomes horizontal scroll */
@media(max-width:991px){
.ss-sidebar{position:static;display:flex;overflow-x:auto;border-radius:10px 10px 0 0;padding:6px;gap:2px;scrollbar-width:none;margin-bottom:-1px;max-height:none;flex-wrap:nowrap}
.ss-sidebar::-webkit-scrollbar{display:none}
.ss-sidebar-store{display:none}
.ss-sidebar-group{display:flex;gap:2px;flex-shrink:0}
.ss-sidebar-label{display:none}
.ss-nav{border-left:none;border-radius:6px;padding:8px 14px;font-size:12px}
.ss-nav.active{border-left:none;background:var(--primary,#3b82f6);color:#fff}
.ss-nav.active i{color:#fff}
.ss-nav-badge{display:none}
}

.ss-header{padding:20px 0 16px}
.ss-title{font-size:22px;font-weight:700;color:var(--text);margin:0 0 6px}
.ss-store-bar{background:linear-gradient(135deg,#f0f4ff 0%,#e8eeff 100%);border:1px solid #d4deff;border-radius:10px;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.ss-store-bar .store-info{display:flex;align-items:center;gap:12px}
.ss-store-bar .store-icon{width:38px;height:38px;border-radius:8px;background:var(--primary,#3b82f6);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px}
.ss-store-bar .store-name{font-weight:600;font-size:14px;color:var(--text)}
.ss-store-bar .store-url{font-size:12px;color:#718096}
.ss-store-bar .store-actions{display:flex;gap:6px}
.ss-store-bar .store-actions .btn{font-size:12px;padding:6px 14px;border-radius:6px;font-weight:600}
.setup-progress{background:#fffbeb;border:1px solid #fbbf24;border-radius:10px;padding:16px 20px;margin-bottom:20px}
.setup-progress__title{font-size:14px;font-weight:700;color:#92400e;margin-bottom:8px}
.setup-progress__bar{height:6px;background:#fde68a;border-radius:3px;overflow:hidden;margin-bottom:10px}
.setup-progress__fill{height:100%;background:#f59e0b;border-radius:3px;transition:width .3s}
.setup-progress__items{display:flex;flex-wrap:wrap;gap:12px}
.setup-progress__item{font-size:12px;color:#92400e;display:flex;align-items:center;gap:4px}
.setup-progress__item i.done{color:#10b981}
.setup-progress__item i.pending{color:#d1d5db}
/* ss-tabs kept for backward compat but hidden — replaced by ss-sidebar */
.ss-tabs{display:none}
.ss-card{background:var(--surface);border:1px solid #edf2f7;border-radius:10px;margin-bottom:20px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.ss-card__header{padding:16px 24px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;gap:10px}
.ss-card__header i{color:#94a3b8;font-size:14px;width:18px;text-align:center}
.ss-card__header h3{margin:0;font-size:15px;font-weight:700;color:var(--text)}
.ss-card__header p{margin:0;font-size:12px;color:#94a3b8}
.ss-card__body{padding:24px}
.ss-field{margin-bottom:18px}
.ss-field:last-child{margin-bottom:0}
.ss-label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);margin-bottom:6px}
.ss-label .required{color:#ef4444;margin-left:2px}
.ss-hint{font-size:11px;color:#94a3b8;margin-top:4px;line-height:1.4}
.ss-input{width:100%;padding:9px 14px;border:1px solid #e2e8f0;border-radius:8px;font-size:13px;color:var(--text-muted);transition:border-color .2s,box-shadow .2s;outline:none;font-family:inherit;background:var(--surface)}
.ss-input:focus{border-color:var(--primary,#3b82f6);box-shadow:0 0 0 3px rgba(59,130,246,.08)}
.ss-input[type="color"]{height:42px;padding:4px 8px;cursor:pointer}
select.ss-input{cursor:pointer;appearance:auto}
textarea.ss-input{resize:vertical;min-height:60px}
/* Issue #1428 — a short list of choices that are ALL visible at once, built on
   native radios so the keyboard and the screen reader keep working. Same
   border, radius and focus ring as .ss-input, so it reads as one form. It
   wraps to one choice per line on a phone. */
.ss-choice{display:flex;flex-wrap:wrap;gap:8px}
.ss-choice__option{display:flex;align-items:center;gap:8px;flex:1 1 170px;margin:0;padding:9px 14px;border:1px solid #e2e8f0;border-radius:8px;background:var(--surface);font-size:13px;font-weight:600;color:var(--text-muted);cursor:pointer;transition:border-color .2s,box-shadow .2s,background-color .2s}
.ss-choice__option:hover{border-color:#cbd5e1}
.ss-choice__option input{margin:0;flex:none;accent-color:var(--primary,#3b82f6);cursor:pointer}
.ss-choice__option:focus-within{border-color:var(--primary,#3b82f6);box-shadow:0 0 0 3px rgba(59,130,246,.08)}
.ss-choice__option:has(input:checked){border-color:var(--primary,#3b82f6);background:rgba(148,163,184,.08);background:color-mix(in srgb,var(--primary,#3b82f6) 6%,transparent)}
.ss-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:767px){.ss-row{grid-template-columns:1fr}}
.ss-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
@media(max-width:767px){.ss-row-3{grid-template-columns:1fr}}
.ss-divider{border:none;border-top:1px solid #f1f5f9;margin:24px 0}
.ss-form-section{padding:24px}
.ss-form-section__left{margin-bottom:20px}
.ss-form-section__left h4{font-size:15px;font-weight:700;color:var(--text);margin:0 0 4px;display:flex;align-items:center;gap:8px}
.ss-form-section__left p{font-size:12px;color:#94a3b8;margin:0;line-height:1.5}
.ss-switch{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface-2);border-radius:8px;border:1px solid #edf2f7;margin-bottom:10px}
.ss-switch:last-child{margin-bottom:0}
.ss-switch label{margin:0;font-size:13px;color:var(--text-muted);font-weight:500;cursor:pointer}
.ss-save{padding:20px 24px;border-top:1px solid #f1f5f9;display:flex;justify-content:flex-end;background:var(--surface-2);border-radius:0 0 10px 10px}
.ss-save .btn{border-radius:8px;font-weight:600;font-size:13px;padding:10px 24px}
.ss-table{width:100%;border-collapse:separate;border-spacing:0}
.ss-table thead th{background:var(--surface-2);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#94a3b8;padding:12px 16px;border-bottom:2px solid #e2e8f0;white-space:nowrap}
.ss-table tbody td{padding:12px 16px;border-bottom:1px solid #f1f5f9;font-size:13px;color:var(--text-muted);vertical-align:middle}
.ss-table tbody tr:hover td{background:var(--surface-2)}
.ss-table tbody tr:last-child td{border-bottom:none}
.ss-empty{text-align:center;padding:48px 20px}
.ss-empty i{font-size:40px;color:#e2e8f0;margin-bottom:12px;display:block}
.ss-empty p{font-size:13px;color:#94a3b8;margin-bottom:16px}
/* Theme picker: the only page that uses it is Store Settings, and
   store-settings.css owns every .theme-card rule there (issue #289).
   The old copy that used to live here fought that sheet and forced a
   fixed 180px card with a 100px preview, so the thumbnails were tiny. */

.ss-action-bar{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid #f1f5f9}
.ss-action-bar h3{margin:0;font-size:15px;font-weight:700;color:var(--text)}
.ss-action-bar .btn{border-radius:6px;font-weight:600;font-size:12px}
.ss-back{font-size:12px;color:var(--text-muted);font-weight:500;text-decoration:none;display:inline-flex;align-items:center;gap:4px;margin-bottom:12px}
.ss-back:hover{color:var(--primary,#3b82f6);text-decoration:none}

/* ============================================================
   STORE ORDERS PAGE
   ============================================================ */
#statusTabs .nav-link.active{position:relative}
#statusTabs .nav-link.active::after{content:'';position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff}
#store_orders_table{border-collapse:separate;border-spacing:0}
#store_orders_table thead th{background:var(--surface-2);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#94a3b8;padding:14px 16px;border-bottom:2px solid #e2e8f0;white-space:nowrap}
#store_orders_table tbody td{padding:12px 16px;border-bottom:1px solid #f1f5f9;font-size:13px;color:var(--text-muted);vertical-align:middle}
#store_orders_table tbody tr:hover td{background:var(--surface-2)}
#store_orders_table tbody tr:last-child td{border-bottom:none}
.order-num{font-weight:700;color:var(--text);font-size:13px;cursor:pointer;text-decoration:none}
.order-num:hover{color:var(--primary);text-decoration:underline}
.order-date{font-size:12px;color:#94a3b8}
.order-customer{font-weight:600;color:var(--text);font-size:13px}
.order-customer small{color:#94a3b8;font-weight:400}
.order-total{font-weight:700;color:var(--text);font-size:14px}
.order-total small{font-weight:400;color:#94a3b8;font-size:11px}
.order-actions{display:flex;gap:4px;flex-wrap:nowrap}
.order-actions .btn{border-radius:6px;padding:5px 10px;font-size:12px}
.so-modal-header{padding:20px 24px 0;display:flex;justify-content:space-between;align-items:flex-start}
.so-modal-header h3{font-size:16px;font-weight:700;color:var(--text);margin:0}
.so-modal-header .so-order-num{font-size:12px;color:var(--text-muted);margin-top:2px}
.so-modal-close{background:none;border:none;font-size:20px;color:#94a3b8;cursor:pointer;padding:4px;line-height:1}
.so-modal-close:hover{color:var(--text-muted)}
.so-modal-body{padding:20px 24px}
.so-modal-body .field{margin-bottom:16px}
.so-modal-body .field:last-child{margin-bottom:0}
.so-modal-body .field label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#94a3b8;margin-bottom:6px}
.so-modal-body .field input,.so-modal-body .field select,.so-modal-body .field textarea{width:100%;padding:9px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:13px;color:var(--text-muted);transition:border-color .2s;outline:none;font-family:inherit}
.so-modal-body .field input:focus,.so-modal-body .field select:focus,.so-modal-body .field textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(62,111,219,.08)}
.so-modal-body .field textarea{resize:vertical;min-height:60px}
.so-modal-footer{padding:0 24px 20px;display:flex;gap:8px;justify-content:flex-end}
.so-modal-footer .btn{border-radius:8px;font-weight:600;font-size:13px;padding:9px 20px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tracking-field{display:none}
.tracking-field.show{display:block}

/* ============================================================
   STORE ORDER VIEW PAGE
   ============================================================ */
.ov-top{background:linear-gradient(135deg,var(--surface-2) 0%,#f1f5f9 100%);border-bottom:1px solid #e2e8f0;padding:20px 0}
.ov-top-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.ov-back{font-size:12px;color:var(--text-muted);font-weight:500;text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.ov-back:hover{color:var(--primary)}
.ov-title{font-size:22px;font-weight:700;color:var(--text);margin:4px 0 0}
.ov-meta{display:flex;align-items:center;gap:12px;margin-top:4px;font-size:12px;color:#94a3b8}
.ov-meta i{font-size:11px}
.ov-quick-actions{display:flex;gap:8px;align-items:center}
.ov-quick-actions .btn{border-radius:8px;font-weight:600;font-size:12px;padding:8px 16px}
.items-table{width:100%;border-collapse:separate;border-spacing:0}
.items-table thead th{background:var(--surface-2);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#94a3b8;padding:12px 16px;border-bottom:2px solid #e2e8f0}
.items-table tbody td{padding:14px 16px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
.items-table tbody tr:last-child td{border-bottom:none}
.items-table tbody tr:hover td{background:var(--surface-2)}
.item-product{display:flex;align-items:center;gap:12px}
.item-img{width:48px;height:48px;object-fit:cover;border-radius:8px;border:1px solid #edf2f7;flex-shrink:0}
.item-img-placeholder{width:48px;height:48px;border-radius:8px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;color:#cbd5e1;flex-shrink:0}
.item-name{font-size:13px;font-weight:500;color:var(--text);max-width:250px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.totals-wrap{max-width:300px;margin-inline-start:auto;padding:16px 20px}
.total-row{display:flex;justify-content:space-between;padding:6px 0;font-size:13px;color:var(--text-muted)}
.total-row span:last-child{color:var(--text-muted);font-weight:500}
.total-final{display:flex;justify-content:space-between;padding:12px 0 0;margin-top:8px;border-top:2px solid #e2e8f0;font-size:18px;font-weight:700;color:var(--text)}
.side-card{background:var(--surface);border:1px solid #e2e8f0;border-radius:10px;margin-bottom:16px;overflow:hidden}
.side-card-header{padding:14px 18px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--text-muted)}
.side-card-header i{color:#94a3b8;font-size:13px;width:16px;text-align:center}
.side-card-body{padding:16px 18px}
.side-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;font-size:13px}
.side-row:not(:last-child){border-bottom:1px solid #f8fafc}
.side-label{color:#94a3b8;font-weight:500}
.side-value{color:var(--text);font-weight:600;text-align:end;max-width:60%}
.cust-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:768px){.cust-grid{grid-template-columns:1fr}}
.cust-section-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:#94a3b8;margin-bottom:8px}
.cust-line{font-size:13px;color:var(--text-muted);padding:4px 0}
.cust-line strong{font-weight:600;color:var(--text)}
.upd-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#94a3b8;margin-bottom:6px}
.upd-input{width:100%;padding:8px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:13px;color:var(--text-muted);transition:border-color .2s;outline:none;font-family:inherit}
.upd-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(62,111,219,.08)}

/* ============================================================
   PRODUCTS PAGE (prod-*)
   ============================================================ */
.prod-header{padding:20px 0 16px}
.prod-title{font-size:22px;font-weight:700;color:var(--text);margin:0 0 6px}
.prod-sub{font-size:13px;color:#718096;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.prod-add-bar{display:flex;justify-content:flex-end;margin-bottom:16px}
.prod-card{background:var(--surface);border:1px solid #edf2f7;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.04);overflow:hidden}
.prod-toolbar{padding:14px 20px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.prod-toolbar .count{font-size:13px;color:var(--text-muted);font-weight:500}
.prod-table{width:100%;border-collapse:separate;border-spacing:0}
.prod-table thead th{background:var(--surface-2);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#94a3b8;padding:12px 16px;border-bottom:2px solid #e2e8f0;white-space:nowrap}
.prod-table tbody td{padding:14px 16px;border-bottom:1px solid #f1f5f9;font-size:13px;color:var(--text-muted);vertical-align:middle}
.prod-table tbody tr:hover td{background:var(--surface-2)}
.prod-table tbody tr:last-child td{border-bottom:none}
.prod-item{display:flex;align-items:center;gap:12px}
.prod-img{width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid #edf2f7;flex-shrink:0}
.prod-name{font-size:13px;font-weight:600;color:var(--text);max-width:300px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer;text-decoration:none}
.prod-name:hover{color:var(--primary,#3b82f6);text-decoration:underline}
.prod-date{font-size:12px;color:#94a3b8}
.prod-actions{display:flex;gap:4px}
.prod-actions .btn{border-radius:6px;padding:5px 10px;font-size:12px}
.prod-table input[type="checkbox"]{width:18px;height:18px;border-radius:4px;border:2px solid #cbd5e1;cursor:pointer;accent-color:var(--primary,#3b82f6);background:var(--surface)}
.prod-table input[type="checkbox"]:checked{border-color:var(--primary,#3b82f6)}
.bulk-action-bar{display:flex;align-items:center;gap:10px}
.bulk-action-bar .btn{border-radius:6px;font-weight:600;font-size:12px;padding:7px 16px}
.price-option{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface-2);border:1px solid #edf2f7;border-radius:8px;margin-bottom:6px;cursor:pointer;transition:all .2s}
.price-option:hover{border-color:#cbd5e1}
.price-option.selected{border-color:var(--primary,#3b82f6);background:#f0f4ff}
.price-option input[type="radio"]{accent-color:var(--primary,#3b82f6);width:16px;height:16px;flex-shrink:0}
.price-option label{margin:0;font-size:13px;color:var(--text-muted);font-weight:500;cursor:pointer}
.slide-carousel{border-radius:10px;overflow:hidden;border:1px solid #edf2f7;margin-bottom:16px}
.slide-carousel .carousel-item img{width:100%;height:280px;object-fit:contain;background:var(--surface-2)}
.slide-carousel .carousel-control-prev,.slide-carousel .carousel-control-next{width:36px;height:36px;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.4);border-radius:50%;opacity:1}
.slide-stats{display:flex;gap:12px;margin-bottom:16px}
.slide-stat{flex:1;padding:12px;background:var(--surface-2);border:1px solid #edf2f7;border-radius:8px;text-align:center}
.slide-stat__val{font-size:18px;font-weight:700;color:var(--text)}
.slide-stat__label{font-size:11px;color:#94a3b8;font-weight:500;margin-top:2px}
.prod-empty{text-align:center;padding:60px 20px}
.prod-empty img{max-width:240px;margin-bottom:20px;opacity:.7}
.prod-empty h3{font-size:16px;font-weight:600;color:var(--text-muted);margin-bottom:4px}
.prod-empty p{font-size:13px;color:#94a3b8}
/* Issue #1471: an empty screen now offers the action that fills it. */
.prod-empty .btn{margin-top:16px}
/* The orders empty state is drawn inside the DataTable's own empty cell. */
td.dataTables_empty{text-align:center}
td.dataTables_empty .so-empty{padding:44px 20px}
td.dataTables_empty .so-empty img{max-width:180px}

/* Native products list (issue #159): price, stock and the hidden status pill */
.prod-price{font-weight:600;color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums}
.prod-stock{font-weight:600;color:var(--text-muted);font-variant-numeric:tabular-nums}
.status-badge--off{background:#F1F5F9;color:var(--text-muted)}
.status-badge--muted{background:#FFF1EB;color:#B33208;border:1px solid #FFD9CC}

/* Bulk bar: shows only after the merchant picks rows (issue #159) */
.prod-bulk{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.prod-bulk[hidden]{display:none}
.prod-bulk-count{font-size:12px;font-weight:700;color:var(--text);background:#FFF1EB;border:1px solid #FFD9CC;border-radius:999px;padding:4px 12px;font-variant-numeric:tabular-nums}
.prod-bulk .btn{border-radius:8px;font-weight:600;font-size:12px;padding:6px 14px}

/* Legacy notice on the Salla products page (issue #159) */
.legacy-banner{display:flex;align-items:flex-start;gap:12px;background:var(--bg);border:1px solid #FFD9CC;border-inline-start:4px solid #FD3F0F;border-radius:10px;padding:14px 16px;margin-bottom:16px}
.legacy-banner__icon{color:#FD3F0F;font-size:16px;margin-top:2px;flex-shrink:0}
.legacy-banner__title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:2px}
.legacy-banner__text{font-size:13px;color:var(--text-muted);line-height:1.6}

/* ============================================================
   IMPORT LIST PAGE (il-*)
   ============================================================ */
.il-header{padding:20px 0 16px}
.il-title{font-size:22px;font-weight:700;color:var(--text);margin:0 0 6px}
.il-sub{font-size:13px;color:#718096;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.il-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.il-toolbar .btn{border-radius:8px;font-weight:600;font-size:13px}
.il-product-card{background:var(--surface);border:1px solid #edf2f7;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.04);margin-bottom:20px;overflow:hidden}
.il-product-card>.nav-tabs{border-bottom:2px solid #edf2f7;padding:0 16px;background:var(--surface-2);margin:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.il-product-card>.nav-tabs::-webkit-scrollbar{display:none}
.il-product-card>.nav-tabs .nav-item{margin-bottom:-2px}
.il-product-card>.nav-tabs .nav-link{border:none;border-bottom:2px solid transparent;padding:12px 16px;font-size:12px;font-weight:600;color:var(--text-muted);white-space:nowrap;transition:all .2s}
.il-product-card>.nav-tabs .nav-link:hover{color:var(--text-muted);background:transparent}
.il-product-card>.nav-tabs .nav-link.active{color:var(--primary,#3b82f6);border-bottom-color:var(--primary,#3b82f6);background:transparent}
.il-product-card .tab-content{padding:20px}
.il-product-card .il-tab-actions{margin-left:auto;display:flex;align-items:center;gap:6px;padding:8px 0;flex-wrap:wrap}
.il-product-card .il-tab-actions .btn{border-radius:6px;font-size:11px;font-weight:600;padding:6px 14px}
.il-product-card .col-md-3 img,.il-product-card .col-lg-3 img{border-radius:8px;border:1px solid #edf2f7;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.il-product-card .form-control{border-radius:8px;border-color:#e2e8f0;font-size:13px;padding:9px 14px;transition:border-color .2s,box-shadow .2s}
.il-product-card .form-control:focus{border-color:var(--primary,#3b82f6);box-shadow:0 0 0 3px rgba(59,130,246,.08)}
.il-product-card label{font-size:12px;font-weight:600;color:var(--text-muted)}
.il-product-card .table-bordered{border-collapse:separate;border-spacing:0;border:1px solid #edf2f7;border-radius:8px;overflow:hidden}
.il-product-card .table-bordered thead th{background:var(--surface-2);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#94a3b8;padding:10px 12px;border-bottom:2px solid #e2e8f0;border-color:#edf2f7}
.il-product-card .table-bordered tbody td{padding:10px 12px;border-color:#f1f5f9;font-size:13px;color:var(--text-muted);vertical-align:middle}
.il-product-card .table-bordered tbody tr:hover td{background:var(--surface-2)}
.il-product-card .img-thumbnail{border-radius:6px;border-color:#edf2f7;box-shadow:0 1px 4px rgba(0,0,0,.06)!important}
.il-product-card .input-images{display:flex;flex-wrap:wrap;gap:10px;padding:12px 0}
.il-product-card .fixed-header tbody{display:block;max-height:350px;overflow-y:auto}
.il-product-card .fixed-header thead,.il-product-card .fixed-header tbody tr{display:table;width:100%;table-layout:fixed}
.il-product-card .fixed-header ::-webkit-scrollbar{width:3px}
.il-product-card .fixed-header ::-webkit-scrollbar-track{background:#f1f5f9}
.il-product-card .fixed-header ::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}
.il-product-card input[type="checkbox"]{accent-color:var(--primary,#3b82f6)}
.loading-dots{display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--text);margin-top:20px}
.loading-text{margin-right:10px}
.dot{animation:dotAnimation 1s infinite;opacity:0;display:inline-block;margin-right:3px}
@keyframes dotAnimation{0%,20%{opacity:0}50%{opacity:1}100%{opacity:0}}
span.badge{white-space:normal!important}
.blinking-faint-red{color:#ef4444;font-size:12px;font-weight:600}
.il-vat-warning{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#fef2f2;border-top:1px solid #fca5a5;color:#991b1b;font-size:12px;font-weight:600}
.il-vat-warning i{color:#ef4444;font-size:11px;flex-shrink:0}
.modal .table-bordered{border-radius:8px;overflow:hidden}
.modal .table-bordered th{background:var(--surface-2);font-size:12px;font-weight:600;color:var(--text-muted)}
/* Product Info layout (flexbox instead of float) */
.il-product-info{display:flex;gap:20px;align-items:flex-start}
.il-product-img-wrap{flex-shrink:0}
.il-product-img{width:160px;height:160px;object-fit:cover;border-radius:10px;border:1px solid #edf2f7;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.il-product-fields{flex:1;min-width:0}
.il-original-title{font-size:13px;font-weight:600;color:#94a3b8;margin-bottom:12px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Pricing hint */
.il-pricing-hint{font-size:13px;font-weight:600;color:var(--primary,#3b82f6);margin-bottom:14px;padding:8px 14px;background:rgba(59,130,246,.04);border-radius:6px;border-left:3px solid var(--primary,#3b82f6)}
/* Shipping bar */
.il-shipping-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;background:var(--surface-2);border-radius:8px;border:1px solid #edf2f7;margin-top:8px;font-size:13px;color:var(--text-muted)}
.il-shipping-bar .btn{margin-inline-start:auto}
/* Pricing settings */
.il-pricing-settings h6{font-size:14px;font-weight:700;color:var(--text-muted);margin-bottom:12px}
.il-radio-group{display:flex;gap:20px;flex-wrap:wrap}
.il-radio{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--text-muted);cursor:pointer;padding:8px 16px;background:var(--surface-2);border:1px solid #edf2f7;border-radius:8px;transition:all .2s}
.il-radio:hover{border-color:var(--primary,#3b82f6)}
.il-radio input[type="radio"]{accent-color:var(--primary,#3b82f6)}
/* Description note */
.il-desc-note{font-size:12px;color:#ef4444;font-weight:600;margin-bottom:10px}
/* Empty state */
.il-empty{text-align:center;padding:60px 20px}
.il-empty img{max-width:240px;margin-bottom:20px;opacity:.7}
.il-empty h3{font-size:16px;font-weight:600;color:var(--text-muted);margin-bottom:4px}
.il-empty p{font-size:13px;color:#94a3b8}
/* Responsive: product info stacks on mobile */
@media(max-width:767px){
  .il-product-info{flex-direction:column;align-items:center;text-align:center}
  .il-product-img{width:120px;height:120px}
  .il-product-fields{width:100%}
  .il-radio-group{flex-direction:column;gap:8px}
  .il-shipping-bar{flex-direction:column;align-items:flex-start}
  .il-shipping-bar .btn{margin-inline-start:0;width:100%}
}

/* ============================================================
   SETTINGS PAGE (set-*)
   ============================================================ */
.set-header{padding:20px 0 16px}
.set-title{font-size:22px;font-weight:700;color:var(--text);margin:0 0 6px}
.set-sub{font-size:13px;color:#718096;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.set-tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:2px solid #edf2f7;padding-bottom:0;margin-bottom:20px;scrollbar-width:none}
.set-tabs::-webkit-scrollbar{display:none}
.set-tabs .nav-item{margin-bottom:-2px}
.set-tabs .nav-link{display:flex;align-items:center;gap:6px;padding:10px 16px;font-size:13px;font-weight:600;color:var(--text-muted);border:none;border-bottom:2px solid transparent;white-space:nowrap;transition:all .2s;background:none}
.set-tabs .nav-link:hover{color:var(--text-muted)}
.set-tabs .nav-link.active{color:var(--primary,#3b82f6);border-bottom-color:var(--primary,#3b82f6)}
/* The inline "what is this" line (issue #1426). It is the same block the store
   settings page draws as `.ss-help`, on purpose: the two settings screens have
   to feel like one product. It never has a dismiss button, so a merchant who
   comes back in a month still reads it.
   `--page` is the line about the WHOLE screen and carries the link to the other
   settings page; the plain class is the line under one tab heading. */
.set-help{display:flex;align-items:flex-start;gap:8px;margin:0 0 16px;padding:10px 14px;background:var(--surface-2);border-radius:10px;border-inline-start:3px solid var(--accent,#FD3F0F);color:var(--text-muted);font-size:13px;line-height:1.6}
.set-help i{flex:none;margin-block-start:3px;color:var(--accent,#FD3F0F)}
.set-help a{color:var(--accent,#FD3F0F);font-weight:600;text-decoration:underline}
.set-help--page{margin-bottom:20px}
.set-card h3 + .set-help{margin-top:-8px}
.set-card{background:var(--surface);border:1px solid #edf2f7;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.04);padding:24px;margin-bottom:20px}
.set-card h3{font-size:15px;font-weight:700;color:var(--text);margin:0 0 16px}
.set-card .form-control{border-radius:8px;border-color:#e2e8f0;font-size:13px;padding:9px 14px;transition:border-color .2s,box-shadow .2s}
.set-card .form-control:focus{border-color:var(--primary,#3b82f6);box-shadow:0 0 0 3px rgba(59,130,246,.08)}
.set-card label{font-size:13px;color:var(--text-muted);cursor:pointer}
.set-card strong{font-size:14px;color:var(--text)}
.set-option{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:6px;margin-bottom:4px;transition:background .2s}
.set-option:hover{background:var(--surface-2)}
.set-option input[type="radio"],.set-option input[type="checkbox"]{accent-color:var(--primary,#3b82f6);width:16px;height:16px;flex-shrink:0}
.set-card .table-bordered{border-collapse:separate;border-spacing:0;border:1px solid #edf2f7;border-radius:8px;overflow:hidden}
.set-card .table-bordered th{background:var(--surface-2);font-size:12px;font-weight:600;color:var(--text-muted);padding:10px 12px;border-color:#edf2f7}
.set-card .table-bordered td{padding:10px 12px;border-color:#f1f5f9;font-size:13px;vertical-align:middle}
.setting-button{width:130px!important}

/* ------------------------------------------------------------
   Settings > Legacy (Salla)  — issue #168
   This area is on purpose quieter than the rest of the page.
   Salla still works, but it is not the path we push, so nothing
   here uses the vermilion primary button.
   ------------------------------------------------------------ */
/* ---- AliExpress account (issue #176) ---- */
.set-aec__desc{font-size:13px;color:var(--text);max-width:62ch;margin:0 0 var(--sp-4)}
.set-aec__status{display:flex;align-items:center;gap:var(--sp-2);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);margin:0 0 var(--sp-4)}
.set-aec__status-label{font-size:12px;color:var(--text-muted)}
.set-aec__status-value{font-size:14px;font-weight:700;color:var(--text)}
.set-aec__status--connected{border-color:var(--success);background:var(--success-bg)}
.set-aec__status--connected .set-aec__status-value{color:var(--success)}
.set-aec__status--expiring_soon{border-color:var(--warning);background:var(--warning-bg)}
.set-aec__status--expiring_soon .set-aec__status-value{color:var(--warning)}
.set-aec__status--expired{border-color:var(--danger);background:var(--danger-bg)}
.set-aec__status--expired .set-aec__status-value{color:var(--danger)}
.set-aec__facts{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-1) var(--sp-4);margin:0 0 var(--sp-4);font-size:13px}
.set-aec__facts dt{color:var(--text-muted);font-weight:600;margin:0}
.set-aec__facts dd{color:var(--text);margin:0}
.set-aec__actions{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin:0 0 var(--sp-3)}
.set-aec__form{margin:0}
.set-aec__connect{background:var(--accent);border-color:var(--accent)}
.set-aec__connect:hover,.set-aec__connect:focus{background:var(--accent-hover);border-color:var(--accent-hover)}
.set-aec__help{font-size:12px;color:var(--text-muted);max-width:62ch;margin:0}
/* ---- end AliExpress account ---- */

.set-legacy{background:var(--bg);border-color:#eadfd6}
.set-legacy__head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.set-legacy__head h3{margin:0}
.set-legacy__badge{font-size:11px;font-weight:600;color:#8a6d4d;background:#f3e7da;border-radius:999px;padding:3px 10px}
.set-legacy__desc{font-size:13px;color:var(--text);max-width:62ch;margin:0 0 18px}
.set-legacy__form{border-top:1px solid #eadfd6;padding-top:16px}
.set-legacy__toggle{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--text);margin:0 0 6px}
.set-legacy__toggle input[type="checkbox"]{accent-color:#FD3F0F;width:16px;height:16px;flex-shrink:0}
.set-legacy__help{font-size:12px;color:var(--text-muted);max-width:62ch;margin:0 0 14px}
.set-legacy__block{border-top:1px solid #eadfd6;padding-top:16px;margin-top:18px}
.set-legacy__block h4{font-size:14px;font-weight:700;color:var(--text);margin:0 0 6px}
.set-legacy__block--note{background:#f7efe7;border-radius:8px;padding:14px;border-top:0}
.set-legacy__link{display:inline-flex;align-items:center;font-size:13px;color:var(--text);text-decoration:underline;margin-left:18px}
.set-legacy__link:hover{color:#FD3F0F}

/* Closed Salla connect row (#1281). The dead button and the live native-store
   link sit on one line. The wrapper, not the button, carries the hover message,
   so it also carries the "you cannot press this" cursor. */
.set-legacy__actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:12px}
.set-legacy__actions .set-legacy__link{margin-left:0;margin-right:0}
.set-legacy__closed{cursor:not-allowed}
.set-legacy__closed .btn:disabled{opacity:.55;pointer-events:none}

/* Salla order webhook box (#1234). Same quiet legacy look. */
.set-legacy__webhook-status{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:13px;margin:0 0 12px}
.set-legacy__webhook-label{font-weight:700;color:var(--text)}
.set-legacy__webhook-value{color:var(--text-muted);max-width:62ch}
.set-legacy__webhook-status--exists .set-legacy__webhook-value{color:#2f7a4d}
.set-legacy__webhook-status--missing .set-legacy__webhook-value,
.set-legacy__webhook-status--mismatch .set-legacy__webhook-value{color:#a4522b}
.set-legacy__webhook-caption{display:block;font-size:12px;font-weight:600;color:var(--text-muted);margin:0 0 4px}
.set-legacy__webhook-url{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.set-legacy__webhook-url input{flex:1;min-width:240px;font-family:monospace;font-size:12px;background:#faf5f0}
.set-legacy__webhook .set-legacy__form{border-top:0;padding-top:0;margin:12px 0}
/* The manual steps (#1268). They are on the screen every time, so they stay
   quiet: no colour of their own, just a readable numbered list. */
.set-legacy__webhook-seen{color:var(--text-muted);font-size:12px}
.set-legacy__webhook-steps{margin:0 0 12px;padding-inline-start:20px;font-size:13px;color:var(--text-muted);max-width:62ch}
.set-legacy__webhook-steps li{margin:0 0 4px}

/* ============================================================
   STORES MANAGEMENT PAGE
   ============================================================ */
.stores-header{padding:20px 0 16px}
.stores-title{font-size:22px;font-weight:700;color:var(--text);margin:0 0 6px}
.stores-sub{font-size:13px;color:#718096;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.stores-usage{display:flex;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.usage-chip{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--surface);border:1px solid #edf2f7;border-radius:8px;font-size:13px;color:var(--text-muted)}
.usage-chip i{color:#94a3b8;font-size:14px}
.usage-chip strong{color:var(--text)}
.usage-chip .count{font-weight:700;color:var(--primary,#3b82f6)}
.usage-chip .limit{color:#94a3b8}
.usage-chip.at-limit{border-color:#fbbf24;background:#fffbeb}
.usage-chip.at-limit .count{color:#d97706}
.store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
@media(max-width:575px){.store-grid{grid-template-columns:1fr}}
.store-card{background:var(--surface);border:1px solid #edf2f7;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.04);overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s}
.store-card:hover{border-color:#cbd5e1}
.store-card.active{border-color:var(--primary,#3b82f6);border-width:2px}
.store-card__header{padding:16px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #f1f5f9}
.store-card__header .platform-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;padding:3px 8px;border-radius:4px}
.store-card__header .platform-badge--native{background:#dbeafe;color:#1d4ed8}
.store-card__header .platform-badge--salla{background:#1e293b;color:#fff}
.store-card__header .active-indicator{font-size:11px;font-weight:600;color:#10b981;display:flex;align-items:center;gap:4px}
.store-card__body{padding:20px;flex:1}
.store-card__info{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.store-card__avatar{width:44px;height:44px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:#fff;flex-shrink:0}
.store-card__avatar img{width:44px;height:44px;border-radius:8px;object-fit:cover}
.store-card__name{font-size:15px;font-weight:700;color:var(--text);margin:0}
.store-card__url{font-size:12px;color:#94a3b8;margin:0;word-break:break-all}
.store-card__badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.store-card__progress{margin-top:8px}
.store-card__progress-label{font-size:11px;color:#94a3b8;font-weight:500;margin-bottom:4px}
.store-card__progress-bar{height:5px;background:#edf2f7;border-radius:3px;overflow:hidden}
.store-card__progress-fill{height:100%;background:var(--primary,#3b82f6);border-radius:3px;transition:width .3s}
.store-card__footer{padding:12px 20px;border-top:1px solid #f1f5f9;display:flex;gap:6px;flex-wrap:wrap;background:var(--surface-2)}
.store-card__footer .btn{border-radius:6px;font-size:11px;font-weight:600;padding:6px 12px}

/* Store create type selection */
.cs-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:800px;margin:0 auto}
@media(max-width:767px){.cs-grid{grid-template-columns:1fr}}
.cs-option{background:var(--surface);border:2px solid #edf2f7;border-radius:12px;padding:32px 28px;text-align:center;transition:all .2s;position:relative;display:flex;flex-direction:column}
.cs-option:hover:not(.disabled){border-color:var(--primary,#3b82f6);box-shadow:0 4px 12px rgba(59,130,246,.1)}
.cs-option.disabled{opacity:.5;pointer-events:none}
.cs-option__icon{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;margin:0 auto 16px}
.cs-option__icon--native{background:#dbeafe;color:#1d4ed8}
.cs-option__icon--salla{background:#1e293b;color:#fff}
.cs-option__title{font-size:18px;font-weight:700;color:var(--text);margin-bottom:6px}
.cs-option__desc{font-size:13px;color:var(--text-muted);margin-bottom:16px;line-height:1.5}
.cs-option__features{list-style:none;padding:0;margin:0 0 20px;text-align:left}
.cs-option__features li{font-size:13px;color:var(--text-muted);padding:5px 0;display:flex;align-items:center;gap:8px}
.cs-option__features li i{color:#10b981;font-size:12px;flex-shrink:0}
.cs-option__usage{font-size:11px;color:#94a3b8;margin-bottom:12px;font-weight:500}
.cs-option__usage strong{color:var(--text-muted)}
.cs-option__btn{margin-top:auto}
.cs-option__btn .btn{border-radius:8px;font-weight:600;font-size:13px;padding:10px 24px;width:100%}
.cs-limit-badge{position:absolute;top:12px;right:12px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 8px;border-radius:4px;background:#fef3c7;color:#d97706}

/* Store create native form */
.cn-card{background:var(--surface);border:1px solid #edf2f7;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.04);overflow:hidden}
.cn-card__body{padding:32px}
.cn-step{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--primary,#3b82f6);margin-bottom:6px;display:flex;align-items:center;gap:8px}
.cn-step span{width:22px;height:22px;background:var(--primary,#3b82f6);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px}
.cn-divider{border:none;border-top:1px solid #f1f5f9;margin:28px 0}
.cn-card .form-control{border-radius:8px;border-color:#e2e8f0;font-size:13px;padding:10px 14px;transition:border-color .2s,box-shadow .2s}
.cn-card .form-control:focus{border-color:var(--primary,#3b82f6);box-shadow:0 0 0 3px rgba(59,130,246,.08)}
.cn-card .form-control-lg{font-size:14px;padding:12px 16px}
.cn-card label{font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px}
.cn-card .input-group-text{border-radius:0 8px 8px 0;border-color:#e2e8f0;background:var(--surface-2);font-size:13px;color:var(--text-muted)}
.cn-save{padding:24px 32px;border-top:1px solid #f1f5f9;background:var(--surface-2)}
.cn-save .btn{border-radius:8px;font-weight:600;font-size:14px;padding:12px}

/* Store create salla form */
.cs-card{background:var(--surface);border:1px solid #edf2f7;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.04);overflow:hidden}
.cs-card__body{padding:32px}
.cs-step{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:6px;display:flex;align-items:center;gap:8px}
.cs-step span{width:22px;height:22px;background:#1e293b;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px}
.cs-divider{border:none;border-top:1px solid #f1f5f9;margin:28px 0}
.cs-card .form-control{border-radius:8px;border-color:#e2e8f0;font-size:13px;padding:10px 14px;transition:border-color .2s,box-shadow .2s}
.cs-card .form-control:focus{border-color:var(--primary,#3b82f6);box-shadow:0 0 0 3px rgba(59,130,246,.08)}
.cs-card .form-control-lg{font-size:14px;padding:12px 16px}
.cs-card label{font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px}
.cs-how-it-works{background:var(--surface-2);border:1px solid #edf2f7;border-radius:8px;padding:16px 20px}
.cs-how-it-works li{font-size:13px;color:var(--text-muted);padding:6px 0;display:flex;align-items:center;gap:8px}
.cs-how-it-works li i{color:#10b981;font-size:13px;flex-shrink:0}
.cs-save{padding:24px 32px;border-top:1px solid #f1f5f9;background:var(--surface-2)}
.cs-save .btn{border-radius:8px;font-weight:600;font-size:14px;padding:12px}

/* Store delete page */
.del-card{background:var(--surface);border:2px solid #fecaca;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.04);overflow:hidden}
.del-card__header{padding:16px 24px;background:#fef2f2;border-bottom:1px solid #fecaca;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#dc2626}
.del-card__body{padding:24px}
.del-store-info{display:flex;align-items:center;gap:12px;padding:16px;background:var(--surface-2);border:1px solid #edf2f7;border-radius:8px;margin-bottom:16px}
.del-store-avatar{width:44px;height:44px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:#fff;flex-shrink:0}
.del-store-name{font-size:15px;font-weight:700;color:var(--text);margin:0}
.del-store-meta{font-size:12px;color:#94a3b8;margin:0}
.del-warning{background:#fffbeb;border:1px solid #fbbf24;border-radius:8px;padding:14px 18px;margin-bottom:20px;font-size:13px;color:#92400e;line-height:1.6}
.del-warning strong{color:#78350f}
.del-card__footer{padding:16px 24px;border-top:1px solid #f1f5f9;background:var(--surface-2);display:flex;flex-direction:column;gap:8px}
.del-card__footer .btn{border-radius:8px;font-weight:600;font-size:13px;padding:10px}

/* ============================================================
   ACCOUNT PAGE (acct-*)
   ============================================================ */
.acct-card{background:var(--surface);border:1px solid #edf2f7;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.04);margin-bottom:20px}
.acct-section{display:grid;grid-template-columns:260px 1fr;gap:32px;padding:24px}
@media(max-width:991px){.acct-section{grid-template-columns:1fr;gap:12px}}
.acct-section__left h3{font-size:14px;font-weight:700;color:var(--text);margin:0 0 4px}
.acct-section__left p{font-size:12px;color:#94a3b8;margin:0;line-height:1.5}
.acct-divider{border:none;border-top:1px solid #f1f5f9;margin:0}
.acct-card .form-control{border-radius:8px;border-color:#e2e8f0;font-size:13px;padding:9px 14px;transition:border-color .2s,box-shadow .2s}
.acct-card .form-control:focus{border-color:var(--primary,#3b82f6);box-shadow:0 0 0 3px rgba(59,130,246,.08)}
.acct-card label{font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px}
.acct-save{padding:20px 24px;border-top:1px solid #f1f5f9;display:flex;justify-content:flex-end;background:var(--surface-2);border-radius:0 0 10px 10px}
.acct-save .btn{border-radius:8px;font-weight:600;font-size:13px;padding:10px 24px}

/* Transfer requests row (issue #691): a plain link, not a button. The count is
   the only loud part, so a store somebody sent you is still hard to miss.
   Logical properties only, so the row reads correctly in Arabic RTL. */
.acct-inbox-link{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--accent,#FD3F0F);text-decoration:none;padding-block:6px}
.acct-inbox-link:hover,.acct-inbox-link:focus{color:var(--accent,#FD3F0F);text-decoration:underline}
.acct-inbox-link:focus-visible{outline:2px solid var(--accent,#FD3F0F);outline-offset:3px;border-radius:6px}
.acct-inbox-count{background:var(--danger-bg,#FEE2E2);color:var(--danger,#B91C1C);border-radius:999px;font-size:11px;font-weight:700;line-height:1;padding-block:4px;padding-inline:8px;font-variant-numeric:tabular-nums}

/* ============================================================
   AFFILIATE DASHBOARD
   ============================================================ */
#iban_certificate_preview{width:200px;height:200px;border:2px solid #e2e8f0;border-radius:8px;display:none;position:relative}
#iban_certificate_preview img{max-width:100%;max-height:100%;border-radius:6px}
.delete-icon,.view-icon{position:absolute;top:-2px;cursor:pointer;display:none}
.delete-icon{right:-29px}
.view-icon{right:-29px;top:27px}
.btn-xs{padding:4px 8px;font-size:12px;line-height:1.5;border-radius:4px}
.hidden{display:none}
/* Only for grids that set their columns inline (affiliate dashboard). The
   merchant KPI grid keeps its own responsive columns from dashboard-home.css. */
@media(max-width:767px){.stat-grid[style]{grid-template-columns:1fr!important}}

/* ============================================================
   PRODUCTS LIST — table, action icons, tooltips (issue #447)
   Warm brand palette: cream #FFFBF7, vermilion #FD3F0F, text #303030.
   These rules come after the older .prod-* rules on purpose, so they win.
   ============================================================ */

/* No scroll box on desktop: it would clip the tooltip above the first row.
   Below 900px the table becomes cards, so there is nothing to scroll. */
.prod-table-wrap{overflow:visible}

.prod-card{border-color:#F1E7E0;border-radius:14px;box-shadow:0 1px 2px rgba(48,48,48,.04)}
.prod-toolbar{border-bottom-color:#F1E7E0;background:var(--bg);padding:14px 20px}
.prod-toolbar .count{color:var(--text-muted);font-weight:600}

.prod-table thead th{background:var(--bg);color:#8A7F79;font-size:11px;font-weight:700;letter-spacing:.5px;padding:13px 18px;border-bottom:1px solid #F1E7E0}
.prod-table tbody td{padding:14px 18px;border-bottom:1px solid #F5EFEA;color:var(--text);font-size:13px}
.prod-table tbody tr:hover td{background:var(--bg)}
.prod-table tbody tr:last-child td{border-bottom:none}

/* Product cell: picture + name */
.prod-item{display:flex;align-items:center;gap:14px}
.prod-img{width:52px;height:52px;border-radius:10px;border:1px solid #F1E7E0;object-fit:cover;flex-shrink:0;background:var(--bg)}
.prod-img--empty{display:inline-flex;align-items:center;justify-content:center;color:#C9BDB6;font-size:16px}
.prod-name{font-size:13.5px;font-weight:600;color:var(--text);line-height:1.5}
.prod-name:hover{color:#FD3F0F;text-decoration:none}

/* Numbers stay English digits and line up column to column */
.prod-price{font-weight:700;color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums}
.prod-cur{font-size:11px;font-weight:600;color:#9A8F88}
.prod-stock{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.prod-stock--out{color:#C0392B}

/* ---- action buttons: one square target per action ---- */
.prod-actions{display:flex;align-items:center;gap:6px}
.prod-act{position:relative;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #F1E7E0;border-radius:9px;background:var(--surface);color:var(--text-muted);font-size:13px;line-height:1;cursor:pointer;padding:0;transition:background .15s,color .15s,border-color .15s}
.prod-act:hover{background:#FFF1EB;border-color:#FFD9CC;color:#FD3F0F;text-decoration:none}
.prod-act:focus-visible{outline:2px solid #FD3F0F;outline-offset:2px}
.prod-act--add{background:#FD3F0F;border-color:#FD3F0F;color:#fff}
.prod-act--add:hover{background:#E23508;border-color:#E23508;color:#fff}
.prod-act--toggle.is-live{color:#065F46;border-color:#CFEEE0}
.prod-act--toggle.is-off{color:#9A8F88;border-color:#EDE5E0;background:var(--bg)}
.prod-act--delete:hover{background:#FDECEA;border-color:#F7C9C2;color:#C0392B}

/* ---- tooltip: pure CSS, so JS-rebuilt buttons keep it with no re-init ---- */
.prod-act::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#303030;color:#fff;font-size:11px;font-weight:600;line-height:1.4;white-space:nowrap;padding:5px 9px;border-radius:6px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s;z-index:20}
.prod-act::before{content:"";position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#303030;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s;z-index:20}
.prod-act:hover::after,.prod-act:hover::before,.prod-act:focus-visible::after,.prod-act:focus-visible::before{opacity:1;visibility:visible}

@media(prefers-reduced-motion:reduce){.prod-act,.prod-act::after,.prod-act::before{transition:none}}

/* ---- phone: every row becomes a card, nothing is squished ---- */
@media(max-width:900px){
  .prod-table,.prod-table tbody,.prod-table tbody tr,.prod-table tbody td{display:block;width:100%}
  .prod-table thead{display:none}
  .prod-table tbody tr{border:1px solid #F1E7E0;border-radius:12px;background:var(--surface);padding:12px 14px;margin-bottom:12px}
  .prod-table tbody tr:hover td{background:transparent}
  .prod-table tbody td{border-bottom:1px solid #F5EFEA;padding:9px 0;display:flex;align-items:center;justify-content:space-between;gap:14px}
  .prod-table tbody td:last-child{border-bottom:none}
  .prod-table tbody td::before{content:attr(data-label);font-size:11px;font-weight:700;color:#9A8F88;flex-shrink:0}
  .prod-table tbody td.prod-cell-name::before{content:none}
  .prod-table tbody td.prod-cell-pick{justify-content:flex-start}
  .prod-name{max-width:none}
  .prod-actions{justify-content:flex-end;flex-wrap:wrap}
  /* Touch screens have no hover, so the bubble would stick after a tap. */
  .prod-act::after,.prod-act::before{display:none}
}