/* ============================================================
   Dropshipper Tool — product-local styles
   Brand: Breezefree (#005373 primary)
   Accent: amber/orange (#d97706) — distinct from Planning (green) and Marketing (purple)

   Load order (see index.html):
     1. /_family/family-tokens.css   (shared tokens)
     2. /_family/family-menu.css     (cog menu)
     3. /_family/family-base.css     (shared components)
     4. styles.css                   (THIS FILE — product overrides + view internals)

   This file now ONLY carries:
     - Product brand/accent token values
     - Dark palette product overrides
     - Text-size scale (reassigns --fs-*)
     - Dropshipper-specific UI bits not yet in family-base
     - View internals (delegated to views/*.css if present)
   Everything else lives in the shared family files.
   ============================================================ */

:root {
  /* Brand (Breezefree) — product-specific identity */
  --brand: #005373;
  --brand-rgb: 0, 83, 115;

  /* Dropshipper accent — amber, distinct from Planning (green) and Marketing (purple) */
  --accent: #d97706;
  --accent-soft: #fef3c7;
  --accent-ink: #ffffff;
  --accent-hover: #b45309;
}

/* Dark palette — product-specific brand override.
   Neutrals can be moved up to family-tokens later if we share dark mode. */
html[data-palette="dark"],
html.palette-dark {
  --bg: #0a1422;
  --surface: #11203a;
  --surface-2: #0d1a2e;
  --ink: #e7ecf3;
  --ink-muted: #b8c2d1;
  --ink-dim: #8a96a8;
  --line: #1f3458;
  --line-soft: #18294a;
  --brand: #2a8bb5;
  --accent-soft: #3d2200;
}

/* Text size scales — reassigns --fs-* tokens per user setting. */
html[data-text-size="small"]  { --fs-body: 13px; --fs-sm: 11px; --fs-lg: 14px; }
html[data-text-size="medium"] { --fs-body: 14px; --fs-sm: 12px; --fs-lg: 16px; }
html[data-text-size="large"]  { --fs-body: 16px; --fs-sm: 13px; --fs-lg: 18px; }

/* ---------- Dropshipper-specific UI ---------- */

/* Coming soon panel (stub views) */
.coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  gap: var(--space-md);
  color: var(--ink-muted);
}
.coming-soon h2 {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.coming-soon p {
  margin: 0;
  font-size: var(--fs-body);
  max-width: 360px;
}
.coming-soon .cs-icon {
  font-size: 48px;
  opacity: 0.4;
}

/* Products (and other) empty-state — centered, prominent product icon */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-md);
  padding: var(--space-2xl) var(--space-lg);
}
.empty-state .empty-icon {
  font-size: 120px;
  line-height: 1;
  opacity: 0.7;
}

/* Trial banner (subscription state) */
.trial-banner {
  background: var(--status-trial-bg);
  color: var(--status-trial-ink);
  border-bottom: 1px solid var(--status-trial-line);
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--fs-sm);
  text-align: center;
}

/* Gated banner (subscription state) */
.gated-banner {
  background: var(--status-loading-bg);
  color: var(--status-loading-ink);
  border-bottom: 1px solid var(--status-trial-line);
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--fs-sm);
  text-align: center;
}

/* ── CSV Import view ─────────────────────────────────────── */
.view-import .imp-typebar{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 12px}
.imp-type-btn{padding:8px 16px;border:1px solid var(--line,#d8d6d0);background:#fff;border-radius:20px;cursor:pointer;font-size:.9rem;transition:background .14s,color .14s,border-color .14s}
.imp-type-btn.active{background:var(--brand,#005373);color:#fff;border-color:var(--brand,#005373)}
.imp-note{color:#666;font-size:.85rem;margin:0 0 12px}
.imp-file-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.imp-card{border:1px solid var(--line,#d8d6d0);border-radius:10px;padding:14px 16px;margin-bottom:16px;background:#fff}
.imp-card h3{margin:0 0 6px;font-size:1rem}
.imp-card h4{margin:14px 0 6px;font-size:.9rem}
.imp-dim{color:#888;font-weight:400;font-size:.8rem}
.imp-req{color:#c0392b}
.imp-map{width:100%;border-collapse:collapse;font-size:.85rem}
.imp-map td,.imp-map th{padding:6px 8px;text-align:left;border-bottom:1px solid #eee}
.imp-map select{width:100%;max-width:280px;padding:5px 8px;border:1px solid var(--line,#d8d6d0);border-radius:6px}
.imp-scroll{max-height:320px;overflow:auto;border:1px solid #eee;border-radius:8px}
.imp-sample{width:100%;border-collapse:collapse;font-size:.78rem;white-space:nowrap}
.imp-sample th,.imp-sample td{padding:5px 8px;border-bottom:1px solid #f0f0f0;text-align:left}
.imp-sample thead th{position:sticky;top:0;background:#f7f6f3;z-index:1}
.imp-stats{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0}
.imp-stat{padding:4px 12px;border-radius:14px;font-size:.85rem;font-weight:600}
.imp-stat.ok{background:var(--status-ok-bg,#e8f5e9);color:var(--status-ok-ink,#1b5e20)}
.imp-stat.upd{background:var(--status-info-bg,#e8f4ff);color:var(--status-info-ink,#0c5a9e)}
.imp-stat.skip{background:var(--status-warn-bg,#fff3cd);color:var(--status-warn-ink,#7a5500)}
.imp-err{color:#c0392b;font-weight:500}
@media(max-width:768px){.imp-map select{max-width:100%}}

/* ── Product edit modal — align to family styling ─────────── */
.dsp-modal-backdrop{position:fixed;inset:0;background:var(--modal-backdrop,rgba(0,0,0,.45));z-index:100050;display:flex;align-items:center;justify-content:center;padding:24px}
.dsp-modal-backdrop[hidden]{display:none}
.dsp-modal{background:var(--surface,#fff);color:var(--ink,#1a1a1a);border-radius:var(--modal-radius,12px);box-shadow:0 24px 64px rgba(0,0,0,.28);width:100%;max-width:560px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;animation:fam-modal-in var(--dur-enter,240ms) var(--ease-emphasis,cubic-bezier(.4,0,.2,1)) both}
.dsp-modal-lg{max-width:680px}
.dsp-modal .modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line,#e4e2dd)}
.dsp-modal .modal-header h3{margin:0;font-size:1.1rem}
.dsp-modal .modal-close-btn{background:none;border:none;font-size:1.6rem;line-height:1;cursor:pointer;color:#888;padding:0 4px;border-radius:6px}
.dsp-modal .modal-close-btn:hover{color:#222;background:rgba(0,0,0,.05)}
.dsp-modal .modal-body{padding:20px;overflow-y:auto}
.dsp-modal .form-row{margin-bottom:16px}
.dsp-modal .form-row-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dsp-modal .form-row-3col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.dsp-modal .form-label{display:block;font-size:.82rem;font-weight:600;color:#444;margin-bottom:5px}
.dsp-modal .form-input,.dsp-modal .form-select,.dsp-modal .form-textarea{width:100%;padding:9px 11px;border:1px solid var(--line,#d8d6d0);border-radius:8px;font-size:.92rem;font-family:inherit;background:#fff;color:var(--ink,#1a1a1a);box-sizing:border-box}
.dsp-modal .form-input:focus,.dsp-modal .form-select:focus,.dsp-modal .form-textarea:focus{outline:none;border-color:var(--brand,#005373);box-shadow:0 0 0 3px rgba(0,83,115,.15)}
.dsp-modal .form-textarea{resize:vertical;min-height:64px}
.dsp-modal fieldset{border:1px solid var(--line,#e4e2dd);border-radius:10px;padding:14px 16px;margin:0 0 16px}
.dsp-modal legend{font-size:.82rem;font-weight:700;color:var(--brand,#005373);padding:0 6px}
.dsp-modal .image-upload-placeholder{display:flex;align-items:center;gap:10px;padding:14px;border:1px dashed var(--line,#d8d6d0);border-radius:8px;color:#888;font-size:.85rem;background:#faf9f7}
.dsp-modal .image-upload-placeholder .upload-icon{font-size:1.3rem}
.dsp-modal .modal-footer,.dsp-modal .modal-actions{display:flex;justify-content:flex-end;gap:10px;padding:16px 20px;border-top:1px solid var(--line,#e4e2dd)}
@media(max-width:768px){
  .dsp-modal-backdrop{padding:0}
  .dsp-modal,.dsp-modal-lg{max-width:100vw;width:100%;height:100vh;max-height:100vh;border-radius:0}
  .dsp-modal .form-row-2col,.dsp-modal .form-row-3col{grid-template-columns:1fr}
}

/* Fix: .view-root's transform-based entry animation creates a containing block
   that traps position:fixed modals (off-centre). Use opacity-only entry so the
   product modal centres against the viewport. Dropshipper-local override. */
.view-root{animation:fam-fade-in var(--dur-enter,240ms) var(--ease-standard,ease) both}

/* ── Buttons — family-aligned (Wave-2 used these classes but never styled them) ── */
.btn,.btn-primary,.btn-secondary,.btn-ghost,.btn-danger{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:inherit;font-size:.9rem;font-weight:600;line-height:1;
  padding:9px 16px;border-radius:8px;border:1px solid transparent;cursor:pointer;
  transition:background .14s var(--ease-standard,ease),border-color .14s,color .14s,opacity .14s;
  white-space:nowrap;text-decoration:none}
.btn-primary{background:var(--brand,#005373);color:#fff;border-color:var(--brand,#005373)}
.btn-primary:hover{opacity:.9}
.btn-secondary{background:var(--surface,#fff);color:var(--ink,#1a1a1a);border-color:var(--line,#d8d6d0)}
.btn-secondary:hover{background:#f4f3f0}
.btn-ghost{background:transparent;color:var(--ink,#1a1a1a);border-color:var(--line,#d8d6d0)}
.btn-ghost:hover{background:rgba(0,0,0,.05)}
.btn-danger{background:transparent;color:#c0392b;border-color:rgba(192,57,43,.4)}
.btn-danger:hover{background:rgba(192,57,43,.08)}
.btn-sm{padding:6px 11px;font-size:.82rem;border-radius:7px}
.btn-xs{padding:3px 8px;font-size:.75rem;border-radius:6px}
.btn-primary:disabled,.btn-ghost:disabled,.btn-secondary:disabled,.btn-danger:disabled{opacity:.45;cursor:not-allowed}
.btn:focus-visible,.btn-primary:focus-visible,.btn-secondary:focus-visible,.btn-ghost:focus-visible,.btn-danger:focus-visible{outline:2px solid var(--brand,#005373);outline-offset:2px}

/* ── Data tables — family look + zebra + sticky header ── */
.table-wrap{border:1px solid var(--line,#e4e2dd);border-radius:10px;overflow:auto;max-height:62vh;background:#fff}
.dsp-table,.data-table{width:100%;border-collapse:collapse;font-size:.86rem}
.dsp-table th,.data-table th,.dsp-table td,.data-table td{padding:10px 14px;text-align:left;border-bottom:1px solid #efedea;vertical-align:middle}
.dsp-table thead th,.data-table thead th{position:sticky;top:0;z-index:2;background:#f7f6f3;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#666;white-space:nowrap}
.dsp-table tbody tr:nth-child(even),.data-table tbody tr:nth-child(even){background:var(--zebra,#faf9f7)}
.dsp-table tbody tr:hover,.data-table tbody tr:hover{background:#f0efe9}
.dsp-table .col-actions,.data-table .col-actions{text-align:right;white-space:nowrap}
.dsp-table .col-actions .btn-sm{margin-left:6px}
.product-thumb{width:40px;height:40px;border-radius:6px;object-fit:cover;border:1px solid var(--line,#e4e2dd)}
.product-thumb-placeholder{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:6px;background:#f4f3f0;font-size:1.1rem}
.product-title{font-weight:600}
@media(max-width:768px){.table-wrap{max-height:none}.dsp-table .col-supplier,.dsp-table .col-updated{display:none}}

/* ── View toolbar — spacing so action buttons don't touch the table ── */
.view-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:4px 0 16px}
.view-title{margin:0;font-size:1.25rem}
.toolbar-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ── Categories panel — right-side drawer (Wave-2 left it unstyled) ── */
.dsp-side-panel{position:fixed;top:0;right:0;height:100%;width:min(360px,90vw);background:var(--surface,#fff);color:var(--ink,#1a1a1a);box-shadow:-8px 0 32px rgba(0,0,0,.18);z-index:100040;display:flex;flex-direction:column;padding:0;animation:fam-drawer-in var(--dur-enter,240ms) var(--ease-emphasis,cubic-bezier(.4,0,.2,1)) both}
.dsp-side-panel[hidden]{display:none}
@keyframes fam-drawer-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.side-panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line,#e4e2dd)}
.side-panel-header h3{margin:0;font-size:1.05rem}
.panel-close-btn{background:none;border:none;font-size:1.6rem;line-height:1;cursor:pointer;color:#888;padding:0 4px;border-radius:6px}
.panel-close-btn:hover{color:#222;background:rgba(0,0,0,.05)}
.cat-list{flex:1 1 auto;overflow-y:auto;padding:10px 18px}
.cat-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 0;border-bottom:1px solid #efedea}
.cat-name{font-size:.9rem}
.cat-add-form{display:flex;gap:8px;padding:14px 18px;border-top:1px solid var(--line,#e4e2dd)}
.cat-add-form input{flex:1 1 auto;padding:9px 11px;border:1px solid var(--line,#d8d6d0);border-radius:8px;font-size:.9rem;font-family:inherit}
.cat-add-form input:focus{outline:none;border-color:var(--brand,#005373);box-shadow:0 0 0 3px rgba(0,83,115,.15)}

/* ── Supplier modal (modal-backdrop/modal-box/modal-form) — match product modal ── */
.modal-backdrop{position:fixed;inset:0;background:var(--modal-backdrop,rgba(0,0,0,.45));z-index:100050;display:flex;align-items:center;justify-content:center;padding:24px}
.modal-backdrop[hidden]{display:none}
.modal-box{background:var(--surface,#fff);color:var(--ink,#1a1a1a);border-radius:var(--modal-radius,12px);box-shadow:0 24px 64px rgba(0,0,0,.28);width:100%;max-width:520px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;animation:fam-modal-in var(--dur-enter,240ms) var(--ease-emphasis,cubic-bezier(.4,0,.2,1)) both}
.modal-box .modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line,#e4e2dd)}
.modal-box .modal-header h3{margin:0;font-size:1.1rem}
.modal-box .modal-close{background:none;border:none;font-size:1.6rem;line-height:1;cursor:pointer;color:#888;padding:0 4px;border-radius:6px}
.modal-box .modal-close:hover{color:#222;background:rgba(0,0,0,.05)}
.modal-form{padding:20px;overflow-y:auto}
.modal-form .form-row{margin-bottom:16px}
.modal-form .form-row label{display:block;font-size:.82rem;font-weight:600;color:#444;margin-bottom:5px}
.modal-form .form-row input,.modal-form .form-row select,.modal-form .form-row textarea{width:100%;padding:9px 11px;border:1px solid var(--line,#d8d6d0);border-radius:8px;font-size:.92rem;font-family:inherit;background:#fff;color:var(--ink,#1a1a1a);box-sizing:border-box}
.modal-form .form-row input:focus,.modal-form .form-row select:focus,.modal-form .form-row textarea:focus{outline:none;border-color:var(--brand,#005373);box-shadow:0 0 0 3px rgba(0,83,115,.15)}
.modal-form .form-row textarea{resize:vertical;min-height:64px}
.modal-form .form-error{color:#c0392b;font-size:.85rem;margin-bottom:12px}
.modal-form .form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}
@media(max-width:768px){.modal-backdrop{padding:0}.modal-box{max-width:100vw;width:100%;height:100vh;max-height:100vh;border-radius:0}}

/* Import modal — wider to fit mapping + preview tables */
.dsp-import-box{max-width:680px}
.dsp-import-box .imp-file-row{margin-top:4px}

/* ── Mobile: collapse product/supplier tables into cards (matches marketing) ── */
@media(max-width:768px){
  .table-wrap{border:0;overflow:visible;max-height:none;background:transparent}
  .dsp-table,.data-table{display:block;font-size:13px}
  .dsp-table thead,.data-table thead{display:none}
  .dsp-table tbody,.data-table tbody,.dsp-table tr,.data-table tr{display:block;width:100%}
  .dsp-table tbody tr,.data-table tbody tr{
    margin-bottom:10px;padding:12px 14px;background:var(--surface,#fff);
    border:1px solid var(--line,#e2e6eb);border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.04);
    display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center}
  .dsp-table tbody tr:hover,.data-table tbody tr:hover{background:var(--surface,#fff)}
  .dsp-table tbody td,.data-table tbody td{display:block;border:0;padding:2px 0;font-size:13px;white-space:normal}
  /* re-show columns the desktop view hid */
  .dsp-table .col-supplier,.dsp-table .col-updated{display:block}
  /* leading label from data-label */
  .dsp-table tbody td[data-label]::before,.data-table tbody td[data-label]::before{
    content:attr(data-label) ": ";font-size:11px;font-weight:700;color:#666;text-transform:uppercase;letter-spacing:.3px;margin-right:6px}
  /* title cell — full width, bigger, no label */
  .dsp-table tbody td.col-title,.data-table tbody td.col-title{
    grid-column:1 / -1;font-size:15px;font-weight:600;padding-bottom:6px;border-bottom:1px dashed #ececec;margin-bottom:4px}
  /* thumbnail — hide in card view to keep it clean */
  .dsp-table tbody td.col-thumb{display:none}
  /* action buttons row — span full width, left aligned, wrap */
  .dsp-table tbody td.col-actions,.data-table tbody td.action-cell{
    grid-column:1 / -1;text-align:left;white-space:normal;padding-top:8px;margin-top:4px;border-top:1px dashed #ececec;display:flex;flex-wrap:wrap;gap:6px}
  .dsp-table tbody td.col-actions .btn-sm{margin-left:0}
  /* 44px tap targets on mobile */
  .dsp-table .btn-sm,.data-table .btn-sm{min-height:40px}
}

/* ── Storefront / Store Settings view ───────────────────────── */
.store-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.store-form-col,.store-preview-col{min-width:0}
.settings-section{border:1px solid var(--line,#e4e2dd);border-radius:10px;padding:16px 18px;margin:0 0 18px}
.settings-section legend,.settings-section > h3{font-size:.82rem;font-weight:700;color:var(--brand,#005373);padding:0 6px;text-transform:uppercase;letter-spacing:.04em}
/* generic (non-modal) form controls — storefront uses bare .form-* */
.store-form-col .form-row,.dsp-store-view .form-row{margin-bottom:14px}
.dsp-store-view .form-row-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dsp-store-view .form-label{display:block;font-size:.82rem;font-weight:600;color:#444;margin-bottom:5px}
.dsp-store-view .form-input,.dsp-store-view .form-select,.dsp-store-view .form-textarea{width:100%;padding:9px 11px;border:1px solid var(--line,#d8d6d0);border-radius:8px;font-size:.92rem;font-family:inherit;background:#fff;color:var(--ink,#1a1a1a);box-sizing:border-box}
.dsp-store-view .form-input:focus,.dsp-store-view .form-select:focus,.dsp-store-view .form-textarea:focus{outline:none;border-color:var(--brand,#005373);box-shadow:0 0 0 3px rgba(0,83,115,.15)}
.dsp-store-view .form-textarea{resize:vertical;min-height:72px}
.dsp-store-view .form-hint{font-size:.76rem;color:#888;margin:5px 0 0}
.dsp-store-view .form-actions{display:flex;align-items:center;gap:12px;margin-top:6px}
.save-status{font-size:.85rem;color:#1b5e20}
.slug-wrap{display:flex;align-items:stretch;border:1px solid var(--line,#d8d6d0);border-radius:8px;overflow:hidden}
.slug-prefix{display:flex;align-items:center;padding:0 10px;background:#f4f3f0;color:#777;font-size:.8rem;white-space:nowrap;border-right:1px solid var(--line,#d8d6d0)}
.slug-input{border:0!important;border-radius:0!important;box-shadow:none!important}
.colour-input-wrap{display:flex;align-items:center;gap:8px}
.colour-swatch{width:38px;height:38px;padding:0;border:1px solid var(--line,#d8d6d0);border-radius:8px;cursor:pointer;background:none;flex:0 0 auto}
.preview-label{font-size:.82rem;font-weight:700;color:#666;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
/* preview mockup */
.storefront-preview{border:1px solid var(--line,#e4e2dd);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.sf-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;background:var(--sf-primary,var(--brand,#005373));color:#fff;flex-wrap:wrap}
.sf-logo-wrap{display:flex;align-items:center;gap:8px}
.sf-logo{height:28px;width:auto;border-radius:4px}
.sf-store-name{font-weight:700;font-size:1rem}
.sf-nav{display:flex;gap:14px}
.sf-nav-link{font-size:.8rem;opacity:.9}
.sf-body{padding:0}
.sf-hero{padding:28px 20px;text-align:center;background:linear-gradient(135deg,rgba(0,0,0,.03),rgba(0,0,0,.06))}
.sf-hero-title{margin:0 0 6px;font-size:1.15rem}
.sf-hero-sub{margin:0 0 14px;color:#666;font-size:.85rem}
.sf-cta{background:var(--sf-accent,var(--accent,#e85d26));color:#fff;border:none;padding:9px 20px;border-radius:8px;font-weight:600;cursor:pointer;font-size:.85rem}
.sf-product-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px}
.sf-product-card{border:1px solid var(--line,#eee);border-radius:8px;overflow:hidden;background:#fff}
.sf-product-img-placeholder{display:flex;align-items:center;justify-content:center;height:90px;background:#f4f3f0;font-size:1.8rem}
.sf-product-info{padding:8px 10px}
.sf-product-name{font-size:.82rem;font-weight:600}
.sf-product-price{font-size:.85rem;color:var(--sf-accent,var(--accent,#e85d26));font-weight:700;margin-top:2px}
.sf-footer{padding:12px 16px;border-top:1px solid #eee;font-size:.78rem;color:#777;text-align:center}
.sf-policy-link{text-decoration:underline;cursor:pointer}
.preview-disclaimer{font-size:.74rem;color:#999;margin-top:8px;text-align:center}
@media(max-width:900px){
  .store-layout{grid-template-columns:1fr}
  .store-preview-col{order:2}
}
@media(max-width:768px){
  .dsp-store-view .form-row-2col{grid-template-columns:1fr}
}

/* ── Shared "Not subscribed" panel — consistent across all dropshipper tabs ── */
.dsp-not-subscribed{background:var(--surface,#fff);border:1px dashed var(--line,#d8d6d0);border-radius:var(--radius,10px);padding:48px 24px;text-align:center;max-width:520px;margin:24px auto;}
.dsp-not-subscribed h3{margin:0 0 6px;font-size:18px;color:var(--brand,#005373);}
.dsp-not-subscribed p{margin:0 0 22px;color:var(--ink-muted,#666);font-size:14px;}
.dsp-not-subscribed button{background:var(--brand,#005373);color:#fff;border:none;padding:10px 20px;border-radius:8px;font-weight:600;font-size:14px;cursor:pointer;font-family:inherit;}
.dsp-not-subscribed button:hover{opacity:.9;}
.dsp-not-subscribed button:disabled{opacity:.5;cursor:default;}