/* Styles used only by the catalog section. */
@scope (#reference-content[data-section="catalog"]) {
:scope{
      --bg:#f7f9fc;
      --panel:#ffffff;
      --panel-2:#f8fafc;
      --border:#e2e8f0;
      --text:#0f172a;
      --muted:#64748b;
      --blue:#2563eb;
      --blue-100:#dbeafe;
      --blue-50:#eff6ff;
      --nav:#0f2747;
      --nav-2:#122f56;
      --green:#16a34a;
      --green-50:#dcfce7;
      --orange:#f59e0b;
      --orange-50:#fef3c7;
      --purple:#8b5cf6;
      --purple-50:#ede9fe;
      --red:#ef4444;
      --red-50:#fee2e2;
      --shadow:0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .04);
      --radius:14px;
      --radius-sm:10px;
      --sidebar-w:240px;
      --drawer-w:520px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      color:var(--text);
      background:var(--bg);
    }

    a{color:inherit;text-decoration:none}
    button{
      font:inherit;
      border:none;
      background:none;
      cursor:pointer;
    }

    .catalog-layout{
      min-height:100vh;
      display:grid;
      grid-template-columns: var(--sidebar-w) 1fr;
    }

    /* Sidebar */
    .sidebar{
      background:linear-gradient(180deg, #0b1f3a 0%, #0f2747 100%);
      color:#fff;
      display:flex;
      flex-direction:column;
      padding:20px 14px 16px;
      position:sticky;
      top:0;
      height:100vh;
    }

    .logo{
      display:flex;
      align-items:center;
      gap:10px;
      margin-bottom:18px;
      padding:2px 6px 8px;
    }

    .logo-mark{
      font-weight:800;
      font-size:40px;
      line-height:1;
      letter-spacing:-2px;
    }

    .logo-label{
      display:flex;
      flex-direction:column;
      line-height:1.05;
    }

    .logo-label b{
      font-size:18px;
      font-weight:700;
    }

    .nav{
      display:flex;
      flex-direction:column;
      gap:4px;
      overflow:auto;
      padding-right:2px;
    }

    .nav-section{
      margin-top:4px;
    }

    .nav-item, .sub-item{
      display:flex;
      align-items:center;
      gap:10px;
      min-height:42px;
      border-radius:10px;
      padding:0 12px;
      color:rgba(255,255,255,.92);
      transition:.2s ease;
      font-size:14px;
    }

    .nav-item:hover, .sub-item:hover{background:rgba(255,255,255,.08)}
    .nav-item.active{
      background:#1d4ed8;
      color:#fff;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
    }

    .subnav{
      margin:4px 0 8px 10px;
      padding-left:8px;
      border-left:1px solid rgba(255,255,255,.12);
      display:flex;
      flex-direction:column;
      gap:4px;
    }

    .sub-item.active{
      background:#163b6f;
      color:#fff;
    }

    .nav-ico{
      width:18px;
      flex:0 0 18px;
      text-align:center;
      opacity:.92;
    }

    .sidebar-footer{
      margin-top:auto;
      padding-top:12px;
      border-top:1px solid rgba(255,255,255,.1);
    }

    /* Main layout */
    .main{
      display:flex;
      flex-direction:column;
      min-width:0;
    }

    .topbar{
      height:72px;
      background:#fff;
      border-bottom:1px solid var(--border);
      display:flex;
      align-items:center;
      gap:14px;
      padding:0 22px;
    }

    .top-select{
      height:42px;
      padding:0 14px;
      border:1px solid var(--border);
      border-radius:12px;
      background:#fff;
      display:flex;
      align-items:center;
      gap:10px;
      color:#0f172a;
      font-size:14px;
      white-space:nowrap;
    }

    .search{
      flex:1;
      min-width:220px;
      height:44px;
      border:1px solid var(--border);
      background:var(--panel-2);
      border-radius:12px;
      display:flex;
      align-items:center;
      gap:10px;
      padding:0 14px;
      color:var(--muted);
      font-size:14px;
    }

    .kbd{
      margin-left:auto;
      font-size:12px;
      color:#64748b;
      padding:4px 8px;
      background:#fff;
      border:1px solid var(--border);
      border-radius:8px;
    }

    .top-actions{
      display:flex;
      align-items:center;
      gap:12px;
      margin-left:auto;
    }

    .circle-btn{
      width:42px;height:42px;
      border-radius:12px;
      display:grid;
      place-items:center;
      border:1px solid var(--border);
      background:#fff;
      position:relative;
      color:#334155;
    }

    .circle-btn.primary{
      background:var(--blue);
      color:#fff;
      border-color:var(--blue);
    }

    .badge-count{
      position:absolute;
      top:-4px;
      right:-4px;
      min-width:18px;
      height:18px;
      padding:0 5px;
      border-radius:999px;
      background:var(--red);
      color:#fff;
      font-size:11px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:700;
      border:2px solid #fff;
    }

    .profile{
      display:flex;
      align-items:center;
      gap:12px;
      padding-left:4px;
      white-space:nowrap;
    }

    .avatar{
      width:40px;height:40px;
      border-radius:50%;
      background:linear-gradient(180deg, #fde68a, #f59e0b);
      display:grid;place-items:center;
      color:#111827;
      font-size:12px;
      font-weight:700;
    }

    .profile-meta{
      display:flex;
      flex-direction:column;
      line-height:1.2;
    }

    .profile-meta b{font-size:14px}
    .profile-meta span{font-size:12px;color:var(--muted)}

    /* Workspace area */
    .workspace{
      display:grid;
      grid-template-columns: 1fr var(--drawer-w);
      gap:0;
      min-height:calc(100vh - 72px);
    }

    .content{
      min-width:0;
      padding:20px 22px 24px;
    }

    .drawer{
      background:#fff;
      border-left:1px solid var(--border);
      min-width:0;
      display:flex;
      flex-direction:column;
    }

    .breadcrumbs{
      display:flex;
      align-items:center;
      gap:10px;
      color:var(--muted);
      font-size:13px;
      margin-bottom:10px;
    }

    .page-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:16px;
      margin-bottom:18px;
    }

    .page-head h1{
      margin:0;
      font-size:28px;
      line-height:1.15;
      font-weight:800;
      letter-spacing:-.02em;
    }

    .page-sub{
      margin-top:6px;
      color:var(--muted);
      font-size:14px;
    }

    .head-actions{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
    }

    .btn{
      height:42px;
      padding:0 16px;
      border-radius:12px;
      border:1px solid var(--border);
      background:#fff;
      color:#0f172a;
      display:inline-flex;
      align-items:center;
      gap:10px;
      font-weight:600;
      font-size:14px;
    }

    .btn.primary{
      background:var(--blue);
      color:#fff;
      border-color:var(--blue);
    }

    .btn.ghost{
      background:transparent;
    }

    .toolbar-card{
      background:#fff;
      border:1px solid var(--border);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:14px;
      margin-bottom:12px;
    }

    .filters-grid{
      display:grid;
      grid-template-columns: 1.4fr repeat(3, 1fr);
      gap:10px;
      margin-bottom:10px;
    }

    .filters-grid.second{
      grid-template-columns: repeat(4, 1fr) auto;
      margin-bottom:0;
    }

    .field{
      height:44px;
      border:1px solid var(--border);
      border-radius:12px;
      background:#fff;
      color:#0f172a;
      padding:0 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      font-size:14px;
      min-width:0;
    }

    .field.muted{color:var(--muted)}
    .field.search-like{
      justify-content:flex-start;
      gap:10px;
      color:var(--muted);
      background:#f8fafc;
    }

    .link-reset{
      align-self:center;
      color:var(--blue);
      font-size:14px;
      font-weight:600;
      padding:0 6px;
      white-space:nowrap;
    }

    .bulkbar{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      padding:0 2px 12px;
    }

    .bulkbar .selected{
      display:flex;align-items:center;gap:10px;
      color:#334155;font-size:14px;font-weight:600;
      margin-right:2px;
    }

    .check{
      width:18px;height:18px;border-radius:5px;
      border:1px solid #93c5fd;
      background:var(--blue);
      color:#fff;
      display:grid;place-items:center;
      font-size:12px;
      line-height:1;
    }

    /* Table */
    .table-card{
      background:#fff;
      border:1px solid var(--border);
      border-radius:var(--radius);
      overflow:hidden;
      box-shadow:var(--shadow);
    }

    .table-wrap{
      overflow:auto;
    }

    table{
      width:100%;
      border-collapse:separate;
      border-spacing:0;
      min-width:1180px;
      font-size:13px;
    }

    thead th{
      text-align:left;
      padding:14px 12px;
      background:#f8fafc;
      color:#475569;
      font-weight:700;
      border-bottom:1px solid var(--border);
      white-space:nowrap;
    }

    tbody td{
      padding:12px;
      border-bottom:1px solid var(--border);
      vertical-align:top;
      color:#0f172a;
    }

    tbody tr:hover{background:#fbfdff}
    tbody tr.selected{background:#eff6ff}

    .cell-product{
      display:flex;
      align-items:flex-start;
      gap:10px;
      min-width:0;
    }

    .thumb{
      width:38px;height:38px;
      border-radius:10px;
      border:1px solid var(--border);
      background:linear-gradient(180deg,#eef2f7,#fff);
      display:grid;place-items:center;
      font-size:18px;
      flex:0 0 38px;
    }

    .thumb.dark{background:linear-gradient(180deg,#1e293b,#475569); color:#fff}
    .thumb.card{background:linear-gradient(180deg,#e2e8f0,#fff)}
    .thumb.box{background:linear-gradient(180deg,#fde68a,#fef3c7)}
    .thumb.wire{background:linear-gradient(180deg,#e5e7eb,#fff)}
    .thumb.board{background:linear-gradient(180deg,#bbf7d0,#dcfce7)}
    .thumb.screw{background:linear-gradient(180deg,#f1f5f9,#fff)}
    .product-name{
      font-weight:600;
      line-height:1.3;
      color:#0f172a;
    }

    .subtle{
      color:var(--muted);
      font-size:12px;
      margin-top:4px;
      line-height:1.3;
    }

    .mono{
      font-variant-numeric: tabular-nums;
      font-feature-settings: "tnum" 1;
      font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    }

    .status{
      display:inline-flex;
      align-items:center;
      gap:6px;
      height:24px;
      padding:0 10px;
      border-radius:999px;
      font-size:12px;
      font-weight:700;
      white-space:nowrap;
      border:1px solid transparent;
    }

    .dot{
      width:8px;height:8px;border-radius:50%;
      display:inline-block;
    }

    .status.green{background:var(--green-50);color:#15803d;border-color:#bbf7d0}
    .status.green .dot{background:var(--green)}
    .status.blue{background:var(--blue-50);color:#1d4ed8;border-color:#bfdbfe}
    .status.blue .dot{background:var(--blue)}
    .status.orange{background:var(--orange-50);color:#b45309;border-color:#fde68a}
    .status.orange .dot{background:var(--orange)}
    .status.purple{background:var(--purple-50);color:#7c3aed;border-color:#ddd6fe}
    .status.purple .dot{background:var(--purple)}
    .status.red{background:var(--red-50);color:#dc2626;border-color:#fecaca}
    .status.red .dot{background:var(--red)}
    .status.neutral{background:#f1f5f9;color:#475569;border-color:#e2e8f0}
    .status.neutral .dot{background:#94a3b8}

    .ok-icon{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:18px;height:18px;
      border-radius:50%;
      background:#dcfce7;
      color:#15803d;
      font-size:12px;
      font-weight:700;
    }

    .bom-missing{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:18px;height:18px;
      color:#dc2626;
      font-size:18px;
      line-height:1;
      font-weight:800;
    }

    .danger{
      color:#dc2626;
      font-weight:700;
    }

    .table-actions{
      width:72px;
      text-align:right;
      color:#94a3b8;
      font-weight:700;
      letter-spacing:1px;
    }

    .table-footer{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:14px 16px;
      color:#475569;
      font-size:13px;
      background:#fff;
    }

    .pager{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
    }

    .page-btn{
      width:34px;height:34px;border-radius:10px;
      display:grid;place-items:center;
      border:1px solid var(--border);
      background:#fff;
      color:#475569;
      font-weight:600;
    }

    .page-btn.active{
      background:var(--blue);
      border-color:var(--blue);
      color:#fff;
    }

    .rows-select{
      display:flex;
      align-items:center;
      gap:8px;
    }

    .mini-select{
      min-width:72px;
      height:36px;
      border:1px solid var(--border);
      border-radius:10px;
      display:flex;align-items:center;justify-content:center;
      background:#fff;
      color:#0f172a;
      padding:0 10px;
    }

    /* Drawer */
    .drawer-head{
      padding:18px 18px 12px;
      border-bottom:1px solid var(--border);
    }

    .drawer-top{
      display:flex;
      align-items:flex-start;
      gap:14px;
    }

    .product-preview{
      width:82px;height:82px;
      border-radius:14px;
      border:1px solid var(--border);
      background:linear-gradient(180deg,#f8fafc,#fff);
      display:grid;place-items:center;
      font-size:38px;
      flex:0 0 82px;
    }

    .drawer-title-wrap{
      flex:1;
      min-width:0;
    }

    .title-row{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }

    .drawer-title{
      font-size:16px;
      font-weight:800;
      margin:0;
    }

    .drawer-meta{
      margin-top:8px;
      display:grid;
      gap:4px;
      color:var(--muted);
      font-size:13px;
    }

    .drawer-close{
      margin-left:auto;
      color:#94a3b8;
      font-size:24px;
      line-height:1;
      padding:0 4px;
    }

    .tabs{
      display:flex;
      gap:18px;
      padding:12px 18px 0;
      border-bottom:1px solid var(--border);
      overflow:auto;
    }

    .tab{
      padding:12px 0;
      color:#64748b;
      white-space:nowrap;
      border-bottom:2px solid transparent;
      font-size:13px;
      font-weight:700;
    }

    .tab.active{
      color:var(--blue);
      border-color:var(--blue);
    }

    .drawer-body{
      overflow:auto;
      padding:18px;
      display:flex;
      flex-direction:column;
      gap:22px;
    }

    .section-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:12px;
    }

    .section-title{
      margin:0;
      font-size:16px;
      font-weight:800;
    }

    .text-btn{
      color:var(--blue);
      font-weight:700;
      font-size:13px;
    }

    .info-grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:12px 16px;
    }

    .info-row{
      display:grid;
      grid-template-columns: 120px 1fr;
      gap:10px;
      align-items:start;
      font-size:14px;
    }

    .info-row.full{
      grid-column:1 / -1;
    }

    .label{
      color:var(--muted);
    }

    .value{
      color:#0f172a;
      line-height:1.45;
    }

    .copy{
      color:var(--blue);
      font-weight:700;
      margin-left:6px;
    }

    .inline-badge{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:0 10px;
      height:24px;
      border-radius:999px;
      background:#ecfdf5;
      border:1px solid #bbf7d0;
      color:#15803d;
      font-size:12px;
      font-weight:700;
    }

    .kv-cards{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:12px;
      margin-top:2px;
    }

    .kv-card{
      border:1px solid var(--border);
      border-radius:12px;
      padding:14px;
      background:#fff;
      min-height:72px;
    }

    .kv-card .k{
      color:var(--muted);
      font-size:12px;
      margin-bottom:6px;
    }

    .kv-card .v{
      font-size:28px;
      line-height:1;
      font-weight:800;
      letter-spacing:-.02em;
    }

    .kv-card .v.small{
      font-size:20px;
      line-height:1.2;
    }

    .muted-note{
      color:var(--muted);
      font-size:12px;
      margin-top:6px;
    }

    .bom-grid{
      display:grid;
      grid-template-columns: 1.1fr 1fr;
      gap:12px;
    }

    .panel-box{
      border:1px solid var(--border);
      border-radius:12px;
      padding:14px;
      background:#fff;
    }

    .panel-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      flex-wrap:wrap;
    }

    .progress{
      height:8px;
      border-radius:999px;
      background:#e5e7eb;
      overflow:hidden;
      margin:10px 0 6px;
    }

    .progress > span{
      display:block;
      height:100%;
      width:87%;
      background:linear-gradient(90deg, #22c55e, #16a34a);
    }

    .market-grid{
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap:12px;
    }

    .marketplace-mapping-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:12px;
    }

    .marketplace-mapping-intro{
      display:flex;
      flex-direction:column;
      gap:4px;
      margin-bottom:14px;
      padding:10px 12px;
      border:1px solid #dce7f5;
      border-radius:10px;
      background:#f7faff;
      color:var(--muted);
      font-size:12px;
      line-height:1.4;
    }

    .marketplace-mapping-intro strong{color:#102846;font-size:14px}
    .marketplace-mapping-intro p{margin:4px 0 0}

    .marketplace-mapping-card{
      display:flex;
      flex-direction:column;
      gap:8px;
      min-height:150px;
      padding:12px;
      border:1px solid var(--border);
      border-radius:12px;
      background:#f8fafc;
    }

    .marketplace-mapping-card .market-logo{width:28px;height:28px}
    .marketplace-mapping-card p{flex:1;margin:0;color:var(--muted);font-size:12px;line-height:1.35}
    .marketplace-mapping-card .btn{align-self:flex-start}

    .market-card{
      border:1px solid var(--border);
      border-radius:12px;
      padding:14px;
      background:#fff;
      min-height:120px;
    }

    .market-top{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:10px;
      margin-bottom:10px;
    }

    .market-logo{
      width:32px;
      height:32px;
      display:block;
      object-fit:contain;
      border-radius:8px;
      flex:0 0 32px;
    }

    .brand{
      width:28px;height:28px;border-radius:8px;
      display:grid;place-items:center;
      color:#fff;
      font-weight:800;
      font-size:12px;
    }

    .ozon{background:#0ea5e9}
    .wb{background:#a21caf}
    .ya{background:#f59e0b}
    .mega{background:#8b5cf6}

    .market-name{
      font-weight:700;
      font-size:14px;
    }

    .market-top .status{margin-top:0!important;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

    .market-meta{
      font-size:13px;
      color:var(--muted);
      line-height:1.5;
    }

    .linked-orders{
      width:100%;
      border-collapse:collapse;
      min-width:auto;
    }

    .linked-orders th,
    .linked-orders td{
      padding:10px 0;
      border-bottom:1px solid var(--border);
      font-size:13px;
      text-align:left;
    }

    .linked-orders th{
      color:var(--muted);
      font-weight:700;
      background:transparent;
    }

    .order-link{
      color:var(--blue);
      font-weight:700;
    }

    /* Responsive */
    @media (max-width: 1480px){
      .workspace{
        grid-template-columns: 1fr;
      }
      .drawer{
        border-left:none;
        border-top:1px solid var(--border);
      }
    }

    @media (max-width: 1200px){
      .catalog-layout{grid-template-columns: 92px 1fr;}
      .sidebar{padding-left:10px;padding-right:10px}
      .logo-label, .nav-item span.label-txt, .sub-item span.label-txt, .sidebar-footer .label-txt{display:none}
      .subnav{margin-left:0;padding-left:0;border-left:none}
      .nav-item, .sub-item{justify-content:center;padding:0}
      .filters-grid, .filters-grid.second{
        grid-template-columns: repeat(2, 1fr);
      }
      .kv-cards, .market-grid, .marketplace-mapping-grid, .bom-grid{
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 900px){
      .topbar{
        flex-wrap:wrap;
        height:auto;
        padding:12px;
      }
      .content{padding:16px}
      .page-head{flex-direction:column;align-items:stretch}
      .filters-grid, .filters-grid.second,
      .info-grid,
      .kv-cards,
      .market-grid,
      .marketplace-mapping-grid,
      .bom-grid{
        grid-template-columns: 1fr;
      }
      .info-row{
        grid-template-columns: 1fr;
        gap:4px;
      }
      .top-actions{width:100%;justify-content:flex-end}
    }

    @media (max-width: 640px){
      .catalog-layout{grid-template-columns: 1fr}
      .sidebar{display:none}
      .search{min-width:0}
      .table-footer{
        flex-direction:column;
        align-items:flex-start;
      }
      .drawer-head,
      .tabs,
      .drawer-body{
        padding-left:14px;
        padding-right:14px;
      }
    }

/* Catalog refinements */
/* Catalog page density and proportions tuned to the supplied 1536x1024 reference. */
:scope { --sidebar-w:224px; --drawer-w:526px; }
.topbar { height:52px; flex:0 0 52px; gap:10px; padding:0 20px; }
.top-select { height:34px; border-radius:6px; padding:0 10px; font-size:12px; }
.topbar .search { height:32px; border-radius:6px; padding:0 10px; font-size:12px; }
.circle-btn { width:34px; height:34px; border-radius:6px; }
.avatar { width:30px; height:30px; }
.workspace { grid-template-columns:minmax(0,1fr) var(--drawer-w); min-height:calc(100vh - 52px); }
.content { padding:14px 12px 12px; }
.breadcrumbs { font-size:12px; margin-bottom:8px; }
.page-head { align-items:center; gap:10px; margin-bottom:12px; }
.page-head h1 { font-size:26px; }
.page-sub { margin-top:3px; font-size:12px; white-space:nowrap; }
.head-actions { flex-wrap:nowrap; gap:8px; flex:0 0 auto; }
.head-actions .btn { height:34px; padding:0 10px; border-radius:6px; gap:7px; font-size:12px; white-space:nowrap; }
.toolbar-card { padding:10px 12px; margin-bottom:10px; border-radius:8px; }
.filters-grid { gap:8px; margin-bottom:8px; }
.filters-grid.second { gap:8px; }
.field,.catalog-select { height:34px; border-radius:6px; padding:0 10px; gap:6px; font-size:11px; }
.field .catalog-select { flex:1; min-width:0; width:100%; height:100%; padding:0; appearance:none; border:0; outline:0; background:transparent; color:#0f172a; font:inherit; }
.search-like { overflow:hidden; }
.catalog-search-icon { display:grid; place-items:center; flex:0 0 16px; color:#7891ad; font-size:13px; }
.search-like input { flex:1 1 auto; min-width:0; width:auto; height:100%; border:0; outline:0; background:transparent; padding:0; font-size:11px; }
.search-like input:focus { box-shadow:none; }
.link-reset { font-size:11px; }
.bulkbar { gap:8px; padding:0 2px 8px; }
.bulkbar .selected { gap:8px; font-size:11px; }
.bulkbar .btn { height:32px; padding:0 10px; border-radius:6px; gap:6px; font-size:11px; }
.table-wrap { overflow:hidden; }
.table-card table { width:100%; min-width:0; table-layout:fixed; font-size:10px; }
.table-card thead th { padding:9px 5px; font-size:10px; white-space:normal; line-height:1.15; }
.table-card tbody td { padding:8px 5px; font-size:10px; line-height:1.25; overflow-wrap:anywhere; }
.table-card th:nth-child(1),.table-card td:nth-child(1) { width:24px; }
.table-card th:nth-child(2),.table-card td:nth-child(2) { width:102px; }
.table-card th:nth-child(3),.table-card td:nth-child(3) { width:55px; }
.table-card th:nth-child(4),.table-card td:nth-child(4) { width:60px; }
.table-card th:nth-child(5),.table-card td:nth-child(5) { width:56px; }
.table-card th:nth-child(6),.table-card td:nth-child(6) { width:72px; }
.table-card th:nth-child(7),.table-card td:nth-child(7),.table-card th:nth-child(8),.table-card td:nth-child(8) { width:45px; }
.table-card th:nth-child(9),.table-card td:nth-child(9) { width:40px; }
.table-card th:nth-child(10),.table-card td:nth-child(10) { width:27px; }
.table-card th:nth-child(11),.table-card td:nth-child(11) { width:28px; }
.table-card th:nth-child(12),.table-card td:nth-child(12) { width:53px; }
.table-card th:nth-child(13),.table-card td:nth-child(13) { width:72px; }
.table-card .cell-product { gap:5px; align-items:center; }
.table-card .thumb { width:30px; height:30px; flex-basis:30px; border-radius:6px; font-size:14px; }
.table-card .product-name { font-size:10px; line-height:1.2; font-weight:500; }
.table-card .product-name { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; max-height:2.4em; }
.table-card .status { height:20px; padding:0 5px; gap:4px; font-size:9px; }
.table-card .status .dot { width:6px; height:6px; }
.table-card .table-actions button { padding:4px 6px; font-size:10px; line-height:1.1; }
.table-footer { min-height:42px; padding:6px 12px; font-size:10px; }
.page-btn { width:28px; height:28px; border-radius:5px; font-size:11px; }
.drawer-head { padding:10px 16px 8px; }
.drawer-top { gap:12px; }
.product-preview { width:80px; height:80px; flex-basis:80px; border-radius:8px; }
.drawer-title { font-size:15px; }
.drawer-meta { margin-top:6px; gap:3px; font-size:11px; }
.drawer-head .status { height:20px; padding:0 7px; font-size:10px; }
.drawer-close { font-size:21px; }
.tabs { gap:16px; padding:6px 16px 0; }
.tab { padding:8px 0; font-size:11px; }
.drawer-body { padding:14px 16px; gap:16px; }
.section-head { margin-bottom:8px; }
.section-title { font-size:14px; }
.text-btn,.drawer-body .btn { font-size:11px; }
.info-grid { gap:8px 12px; }
.info-row { grid-template-columns:100px 1fr; gap:8px; font-size:11px; }
.value { line-height:1.35; }
.inline-badge { height:20px; padding:0 7px; font-size:10px; }
.kv-cards { gap:8px; }
.kv-card { min-height:68px; padding:10px; border-radius:8px; }
.kv-card .k,.muted-note { font-size:10px; }
.kv-card .v { font-size:20px; }
.kv-card .v.small { font-size:15px; }
.bom-grid { gap:8px; }
.panel-box { padding:10px; border-radius:8px; }
.progress { height:6px; margin:8px 0 5px; }
.market-grid { gap:8px; }
.market-card { min-height:92px; padding:8px; border-radius:8px; }
.market-top { gap:6px; margin-bottom:6px; }
.brand { width:24px; height:24px; border-radius:6px; }
.market-name { font-size:11px; }
.market-meta { font-size:10px; line-height:1.35; }
.linked-orders { font-size:10px; }
.linked-orders th,.linked-orders td { padding:6px 5px; }
@media (max-width:1400px) {
  :scope { --drawer-w:430px; }
  .workspace { grid-template-columns:minmax(0,1fr) var(--drawer-w); }
  .content { padding-left:10px; padding-right:10px; }
  .page-head h1 { font-size:23px; }
  .page-sub { white-space:normal; }
  .head-actions .btn { padding:0 7px; font-size:10px; }
  .table-card th:nth-child(2),.table-card td:nth-child(2) { width:88px; }
  .table-card th:nth-child(3),.table-card td:nth-child(3) { width:48px; }
  .table-card th:nth-child(6),.table-card td:nth-child(6) { width:65px; }
}
@media (max-width:1100px) {
  .workspace { grid-template-columns:minmax(0,1fr); }
  .drawer { border-left:0; border-top:1px solid var(--border); }
  .page-head { align-items:flex-start; flex-wrap:wrap; }
  .head-actions { margin-left:auto; }
  .table-wrap { overflow:auto; }
  .table-card table { min-width:760px; }
}
.content { padding-top:22px; }
.breadcrumbs,.page-head { margin-left:10px; }
.page-head { margin-bottom:22px; }
.bulkbar { padding-bottom:20px; }
.table-card tbody td { padding-top:11px; padding-bottom:11px; }
.sidebar { padding-top:8px; }
.logo { margin-bottom:12px; }
.nav-item,.sub-item { min-height:40px; gap:8px; padding:0 10px; font-size:13px; white-space:nowrap; }
.subnav { margin-left:8px; padding-left:6px; }
.nav-item .label-txt,.sub-item .label-txt { overflow:hidden; text-overflow:ellipsis; }
.sidebar { padding-left:6px; padding-right:6px; }
.logo { padding-left:12px; }
.nav { gap:3px; }
.nav-item,.sub-item { min-height:36px; }
@media (min-width:1401px) { .bulkbar { padding-bottom:34px; } }
.table-card tbody td { padding-top:12px; padding-bottom:12px; }

/* Start with the full catalog; selecting a row opens a right-hand detail pane. */
.workspace { grid-template-columns:minmax(0,1fr); }
.workspace.no-selection { grid-template-columns:minmax(0,1fr); }
.workspace.no-selection .drawer { display:none; }
.workspace.has-selection { grid-template-columns:minmax(0,1fr) minmax(430px,34vw); }
.workspace.has-selection .drawer { min-width:0; overflow:hidden; }
.workspace.has-selection .content { min-width:0; }
.workspace.has-selection .table-card { min-width:0; overflow:visible; }
.workspace.has-selection .table-card table { table-layout:auto; width:max-content; min-width:980px; }
.workspace.has-selection .table-card th:nth-child(2),.workspace.has-selection .table-card td:nth-child(2) { width:34%; }
.workspace.has-selection .table-card th:nth-child(3),.workspace.has-selection .table-card td:nth-child(3) { width:24%; }
.workspace.has-selection .table-card th:nth-child(6),.workspace.has-selection .table-card td:nth-child(6) { width:24%; }
.workspace.has-selection .table-card th:nth-child(9),.workspace.has-selection .table-card td:nth-child(9) { width:12%; }
.workspace.has-selection .table-card th:nth-child(13),.workspace.has-selection .table-card td:nth-child(13) { width:72px; }
.tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; padding:0 16px; overflow:visible; }
.tabs .tab { min-width:0; text-align:center; white-space:nowrap; padding:9px 4px; }
.tabs .tab.active { border-bottom:2px solid var(--blue); }
.drawer-body { overflow-y:auto; overflow-x:hidden; }
.drawer-body > .detail-tab-panel[hidden] { display:none!important; }
.catalog-data-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.catalog-data-cards .kv-card { min-width:0; }
.workspace.has-selection .drawer-title-wrap { min-width:0; }
.catalog-row-delete { border:0; background:transparent; color:#dc2626; cursor:pointer; font-size:15px; line-height:1; padding:3px; border-radius:4px; }
.catalog-row-delete:hover { background:#fee2e2; }
.catalog-select-all,.catalog-check{accent-color:#2563eb;cursor:pointer;width:15px;height:15px}
.catalog-select-all-host{display:inline-flex;align-items:center}
.catalog-select{width:100%;height:100%;min-height:32px;border:0;background:transparent;color:#183153;font:inherit;cursor:pointer}
.catalog-page-size{min-width:66px;height:30px;border:1px solid #d7e0ed;border-radius:6px;background:#fff;padding:0 6px;cursor:pointer}
.catalog-more,.catalog-row-actions{position:relative}
.catalog-more summary,.catalog-row-actions summary{list-style:none;cursor:pointer}
.catalog-more summary::-webkit-details-marker,.catalog-row-actions summary::-webkit-details-marker{display:none}
.catalog-menu{display:grid;min-width:170px;padding:5px;background:#fff;border:1px solid #dbe4ef;border-radius:7px;box-shadow:0 10px 28px #12233d25;z-index:120}
.catalog-more .catalog-menu{position:absolute;top:100%;right:0}
.catalog-row-actions .catalog-menu{position:fixed}
.catalog-menu button{border:0;background:#fff;text-align:left;padding:8px 10px;color:#183153;cursor:pointer;border-radius:4px;white-space:nowrap}
.catalog-menu button:hover{background:#edf4ff}
.catalog-menu button[data-row-action="delete"]{color:#dc2626}
.catalog-image-preview{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.catalog-image-preview label{display:grid;gap:3px;font-size:11px}
.catalog-image-preview img{display:block;width:180px!important;height:180px!important;max-width:100%;object-fit:contain;border:1px solid #dbe4ef;border-radius:5px}
.cell-product .thumb img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.product-preview img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.table-actions { white-space:nowrap; }
.catalog-row-buttons { display:flex; align-items:center; justify-content:flex-end; gap:4px; letter-spacing:0; }
.catalog-row-buttons button { width:28px; height:24px; padding:0; display:inline-grid; place-items:center; border:1px solid #cddbea; border-radius:5px; background:#fff; color:#145ee8; cursor:pointer; font:inherit; white-space:nowrap; }
.catalog-row-buttons button { width:44px; min-width:44px; height:44px; min-height:44px; }
.catalog-row-buttons .catalog-row-bom { font-size:10px; font-weight:700; }
.catalog-row-buttons button .ui-icon { font-size:13px; }
.catalog-row-buttons button:hover { background:#edf4ff; }
.catalog-row-buttons .catalog-row-delete { border-color:#fecaca; color:#dc2626; }
.catalog-row-buttons .catalog-row-delete:hover { background:#fee2e2; }
.group-manager-intro { margin-bottom:16px; padding:12px 14px; border:1px solid #dbe7f5; border-radius:10px; background:#f5f9ff; color:#49627e; line-height:1.45; }
.group-manager .field select { font-family: inherit; }
.category-picker { position:relative; }
.category-picker-trigger { width:100%; min-height:38px; padding:8px 34px 8px 11px; border:1px solid #cddbea; border-radius:7px; background:#fff; color:#183153; text-align:left; font:inherit; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; position:relative; }
.category-picker-trigger::after { content:'⌄'; position:absolute; right:11px; top:50%; transform:translateY(-50%); color:#6d8199; }
.category-picker-trigger[aria-expanded="true"] { border-color:#1464e8; box-shadow:0 0 0 3px rgba(20,100,232,.12); }
.category-picker-popover { position:absolute; z-index:30; top:calc(100% + 6px); left:0; right:0; padding:9px; border:1px solid #cddbea; border-radius:9px; background:#fff; box-shadow:0 14px 30px rgba(17,44,78,.18); }
.category-picker-search { width:100%; margin-bottom:8px; padding:8px 10px; border:1px solid #d6e1ed; border-radius:6px; color:#183153; font:inherit; box-sizing:border-box; }
.category-tree { max-height:300px; overflow:auto; padding:2px 2px 3px; color:#183153; }
.category-tree-root, .category-tree-option { display:flex; align-items:center; gap:7px; width:100%; min-height:31px; padding:4px 7px; border:0; background:transparent; color:#28527f; text-align:left; font:inherit; font-size:12px; cursor:pointer; border-radius:5px; }
.category-tree-root:hover, .category-tree-option:hover { background:#edf4ff; }
.category-tree-root.is-selected, .category-tree-option.is-selected { background:#e7f0ff; color:#0b5cff; font-weight:700; }
.category-tree-line { display:flex; align-items:center; min-height:31px; padding-left:calc(var(--tree-depth) * 20px); position:relative; }
.category-tree-line::before { content:''; position:absolute; left:calc(var(--tree-depth) * 20px + 8px); top:0; bottom:0; border-left:1px solid #c8d5e3; }
.category-tree-line::after { content:''; position:absolute; left:calc(var(--tree-depth) * 20px + 8px); top:50%; width:11px; border-top:1px solid #c8d5e3; }
.category-tree-node:first-child > .category-tree-line::before { top:50%; }
.category-tree-node:last-child > .category-tree-line::before { bottom:50%; }
.category-tree-toggle { z-index:1; width:18px; height:22px; padding:0; border:0; background:#fff; color:#52708f; font-weight:700; cursor:pointer; }
.category-tree-toggle:disabled { cursor:default; }
.category-tree-option { flex:1; position:relative; z-index:1; }
.category-tree-dot { width:10px; height:10px; flex:0 0 10px; border:1px solid #5c9cce; border-radius:50%; background:#9cc7e8; }
.category-tree-check { margin-left:auto; color:#0b5cff; font-weight:800; }
.category-tree-children { margin:0; }
.category-picker + .field-help { margin-top:5px; }
.drawer-body > section:first-child { position:relative; }
.detail-gallery { float:right; width:178px; margin:0 0 14px 18px; padding:10px; border:1px solid #dbe4ef; border-radius:10px; background:#fff; text-align:center; }
.detail-gallery-main { width:156px; height:138px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:#f5f8fc; overflow:hidden; }
.detail-gallery-main img { width:100%; height:100%; object-fit:contain; }
.detail-gallery-button { width:100%; margin-top:8px; padding:7px 8px; border:1px solid #cddbea; border-radius:7px; background:#fff; color:#145ee8; font:inherit; font-size:11px; cursor:pointer; }
.detail-gallery-thumbs { display:flex; gap:5px; margin-top:8px; overflow:hidden; }
.detail-gallery-thumbs img { width:42px; height:36px; object-fit:cover; border:1px solid #dbe4ef; border-radius:5px; }
.detail-gallery-empty { min-height:138px; display:flex; flex-direction:column; justify-content:center; color:#8798ad; font-size:12px; }
.detail-gallery-empty span { margin-top:5px; font-size:10px; }
@media (max-width:700px) { .detail-gallery { float:none; width:auto; margin:0 0 14px; } .detail-gallery-main { width:100%; } }

/* Product detail card follows the compact reference layout. */
.workspace.has-selection .drawer { --detail-blue:#0b5cff; }
.workspace.has-selection .drawer-head { padding:10px 16px 8px; }
.workspace.has-selection .drawer-top { gap:12px; }
.workspace.has-selection .product-preview { width:80px; height:80px; flex-basis:80px; border-radius:8px; }
.workspace.has-selection .drawer-title { font-size:15px; line-height:1.18; }
.workspace.has-selection .drawer-meta { margin-top:5px; gap:2px; font-size:11px; }
.workspace.has-selection .tabs { gap:18px; padding:9px 16px 0; }
.workspace.has-selection .tab { padding:9px 0; font-size:11px; font-weight:600; }
.workspace.has-selection .drawer-body { padding:14px 16px 28px; gap:18px; }
.workspace.has-selection .section-head { margin-bottom:10px; }
.workspace.has-selection .section-title { font-size:15px; }
.workspace.has-selection .text-btn { font-size:11px; }
.workspace.has-selection .info-grid { display:block; padding-right:0; }
.workspace.has-selection .info-row { display:grid; grid-template-columns:120px minmax(0,1fr); gap:8px; margin:0 0 8px; font-size:11px; }
.workspace.has-selection .info-row.full { display:grid; }
.workspace.has-selection .info-row .value { line-height:1.35; }
.workspace.has-selection .inline-badge { height:20px; padding:0 7px; font-size:10px; }
.workspace.has-selection .detail-gallery { float:none; width:100%; margin:0 0 8px; padding:7px; border-radius:7px; }
.workspace.has-selection .detail-gallery-main { width:100%; height:auto; min-height:0; aspect-ratio:1; }
.workspace.has-selection .detail-gallery-main img { width:100%; height:100%; object-fit:contain; }
.workspace.has-selection .detail-gallery-button { margin-top:5px; padding:5px; font-size:10px; }
.workspace.has-selection .detail-gallery-thumbs { margin-top:5px; }
.workspace.has-selection .detail-gallery-thumbs img { width:90px; height:81px; }
.workspace.has-selection .detail-gallery-empty { min-height:92px; font-size:10px; }
.workspace.has-selection .kv-cards { clear:both; gap:8px; margin-top:12px; }
.workspace.has-selection .kv-card { min-height:60px; padding:9px; border-radius:8px; }
.workspace.has-selection .kv-card .k { font-size:10px; margin-bottom:4px; }
.workspace.has-selection .kv-card .v.small { font-size:14px; }
.workspace.has-selection .kv-card .muted-note { font-size:9px; margin-top:4px; }
.workspace.has-selection .bom-grid { gap:8px; }
.workspace.has-selection .panel-box { padding:9px; border-radius:8px; }
.workspace.has-selection .panel-box h4 { font-size:11px; }
.workspace.has-selection .market-grid { gap:7px; }
.workspace.has-selection .market-card { min-height:90px; padding:8px; border-radius:8px; }
.workspace.has-selection .market-top { gap:6px; margin-bottom:6px; }
.workspace.has-selection .brand { width:22px; height:22px; font-size:9px; }
.workspace.has-selection .market-logo { width:26px; height:26px; flex-basis:26px; }
.workspace.has-selection .market-name { font-size:10px; }
.workspace.has-selection .market-meta { font-size:9px; line-height:1.35; }
.workspace.has-selection .linked-orders th,.workspace.has-selection .linked-orders td { padding:6px 0; font-size:10px; }
/* The reference card keeps production and marketplace context below the main data. */
.workspace.has-selection .tabs { display:flex !important; overflow-x:auto; }
.workspace.has-selection .drawer-body > section + section { margin-top:12px; }
.workspace.has-selection .characteristics-block { clear:both; margin-top:16px; padding-top:12px; border-top:1px solid #e7edf5; }
.workspace.has-selection .characteristics-title { margin-bottom:8px; color:#0f2340; font-size:12px; font-weight:800; }
.workspace.has-selection .characteristics-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.workspace.has-selection .characteristics-category { grid-column:1 / -1; margin-top:10px; padding:7px 9px 5px; border-bottom:1px solid #dfe8f4; color:#1c4f91; font-size:11px; font-weight:800; }
.workspace.has-selection .characteristics-category:first-child { margin-top:0; }
.workspace.has-selection .characteristic { min-height:44px; padding:7px 8px; border:1px solid #e1e8f1; border-radius:7px; background:#fbfdff; }
.workspace.has-selection .characteristic .k { color:#71839a; font-size:9px; margin-bottom:3px; }
.workspace.has-selection .characteristic .v { color:#102846; font-size:10px; font-weight:700; line-height:1.2; overflow-wrap:anywhere; }
.catalog-attributes-heading { grid-column:1 / -1; margin-top:8px; padding-top:12px; border-top:1px solid #e3eaf3; color:#102846; font-size:13px; font-weight:800; }
.catalog-product-form .catalog-attributes-category { grid-column:1 / -1; margin-top:14px; padding:9px 11px 8px; border:1px solid #d5e2f2; border-left:4px solid #2d6cdf; border-radius:8px; background:#f2f7fd; color:#174b8c; font-size:11px; font-weight:800; letter-spacing:.01em; }
.catalog-product-form .catalog-attributes-category:first-of-type { margin-top:0; }
.catalog-product-form .catalog-attribute-field { min-height:58px; padding:9px 10px 8px; border:1px solid #e1e8f1; border-radius:8px; background:#fbfdff; }
.catalog-product-form .catalog-attribute-field label { color:#526b88; font-size:10px; line-height:1.2; }
.catalog-product-form .catalog-attribute-field input,
.catalog-product-form .catalog-attribute-field select { margin-top:1px; background:#fff; }
.required-mark { color:#d43838; font-weight:800; margin-left:2px; }
.catalog-product-form .field label { display:flex; flex-direction:column; gap:10px; }
.modal-open { overflow:hidden; }
.modal-dialog { contain:layout paint; }
.workspace.has-selection .bom-version-row { display:flex; align-items:center; gap:8px; min-height:62px; }
.workspace.has-selection .bom-check { width:20px; height:20px; flex:0 0 20px; display:grid; place-items:center; border-radius:50%; background:#14b86e; color:#fff; font-size:12px; font-weight:900; }
.workspace.has-selection .bom-version-copy { min-width:0; flex:1; }
.workspace.has-selection .bom-version-copy .inline-badge { white-space:nowrap; }
.workspace.has-selection .bom-version-row .status { flex:0 0 auto; white-space:nowrap; }
.workspace.has-selection .market-card .market-top { align-items:flex-start; }
.workspace.has-selection .market-card .status { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:8px; padding:0 5px; }
.workspace.has-selection .market-card .market-name { font-size:9px; white-space:nowrap; }
.workspace.has-selection .market-card .market-meta { font-size:9px; }
.workspace.has-selection #catalog-detail-tab-4 .bom-grid { margin-bottom:12px; }
.workspace.has-selection #catalog-detail-tab-4 .section-head + .linked-orders { margin-top:2px; }
.workspace.has-selection #catalog-detail-tab-5 .section-head { margin-bottom:8px; }
.workspace.has-selection .market-grid { min-width:0; }
.workspace.has-selection .market-card { min-width:0; overflow:hidden; }
.workspace.has-selection #catalog-detail-tab-4,
.workspace.has-selection #catalog-detail-tab-5 { margin-top:18px; }
@media (min-width:1101px) {
  .catalog-layout .workspace.has-selection { grid-template-columns:minmax(0,1fr) 522px; }
  .catalog-layout .workspace.has-selection .drawer { width:522px; max-width:522px; }
}
@media (min-width:1500px) {
  .workspace.has-selection { grid-template-columns:minmax(0,1fr) 526px; }
}
@media (max-width:1100px) {
  .workspace.has-selection { grid-template-columns:minmax(0,1fr) minmax(390px,40vw); }
}
@media (max-width:820px) {
  .workspace.has-selection { grid-template-columns:minmax(0,1fr); }
.workspace.has-selection .drawer { position:fixed; inset:52px 0 0 0; z-index:20; background:#fff; }
}

.catalog-layout{display:block;min-height:calc(100vh - 64px)}
.catalog-layout>.main{width:100%;min-width:0}
.catalog-layout .workspace{min-height:calc(100vh - 64px)}


/* Tablet and phone content grid. */
.catalog-layout .content,.catalog-layout .workspace,.catalog-layout .table-card{min-width:0}
@media(max-width:1024px){
 .catalog-layout .workspace{grid-template-columns:minmax(0,1fr)}
 .catalog-layout .table-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
 .catalog-layout .table-card table{min-width:760px}
}
@media(max-width:700px){
 .catalog-layout .content{padding:16px 12px}
 .catalog-layout .page-head{display:grid;grid-template-columns:minmax(0,1fr)}
 .catalog-layout .head-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));width:100%}
 .catalog-layout .filters-grid,.catalog-layout .filters-grid.second{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
 .catalog-layout .toolbar-card{min-width:0}
 .catalog-layout .drawer{max-width:100vw}
 .catalog-layout .workspace.has-selection .drawer{inset:64px 0 0 0;width:100vw;overflow-y:auto}
}


}

/* Global modal refinements: modal is mounted outside scoped catalog root */
#modal .marketplace-mapping-intro{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:14px;
  padding:10px 12px;
  border:1px solid #dce7f5;
  border-radius:10px;
  background:#f7faff;
  color:#64748b;
  font-size:12px;
  line-height:1.4;
}
#modal .marketplace-mapping-intro strong{color:#102846;font-size:14px}
#modal .marketplace-mapping-intro p{margin:4px 0 0}
#modal .marketplace-mapping-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#modal .marketplace-mapping-card{display:flex;flex-direction:column;gap:8px;min-height:150px;padding:12px;border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc}
#modal .marketplace-mapping-card .market-logo{display:block;width:28px!important;height:28px!important;max-width:28px!important;max-height:28px!important;object-fit:contain;border-radius:8px}
#modal .marketplace-mapping-card p{flex:1;margin:0;color:#64748b;font-size:12px;line-height:1.35}
#modal .marketplace-mapping-card .btn{align-self:flex-start}
#modal .catalog-image-preview img{display:block;width:180px!important;height:180px!important;max-width:100%;object-fit:contain;border:1px solid #dbe4ef;border-radius:5px}
#modal .catalog-product-form .field label{display:flex;flex-direction:column;gap:10px}
#modal.modal-open{overflow:hidden}
body.modal-open{overflow:hidden}
#modal .modal-dialog{contain:layout paint;height:min(900px,calc(100dvh - 36px));display:flex;flex-direction:column;overflow:hidden}
#modal .modal-dialog form{min-height:0;display:flex;flex:1;flex-direction:column}
#modal .modal-body{min-height:0;flex:1 1 auto;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column}
#modal:has(.marketplace-mapping-grid) .modal-dialog{height:auto}
#modal:has(.marketplace-mapping-grid) .modal-dialog form{flex:0 0 auto}
#modal:has(.marketplace-mapping-grid) .modal-body{overflow:visible}
#modal .catalog-image-preview{align-items:flex-start}
#modal .catalog-image-preview label{gap:6px}
#modal .catalog-image-preview input[type="checkbox"]{margin:2px 4px 0 0;vertical-align:middle}

/* Compact product editor: keep the primary fields visible while editing. */
#modal .modal-dialog { width:min(920px,calc(100vw - 28px)); max-height:calc(100dvh - 28px); }
#modal:has(.group-manager) .modal-dialog { height:auto; }
#modal:has(.group-manager) .modal-body { overflow:visible; }
#modal .modal-head { padding:12px 18px; }
#modal .modal-head h2 { font-size:16px; }
#modal .modal-body { padding:14px 18px; }
#modal .modal-foot { padding:10px 18px; position:sticky; bottom:0; z-index:2; background:#fff; }
#modal .catalog-product-form { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px 10px; }
#modal .catalog-product-form > .field { min-width:0; }
#modal .catalog-product-form .field label { gap:5px; margin:0; font-size:10px; line-height:1.15; }
#modal .catalog-product-form .field input,
#modal .catalog-product-form .field select { min-height:34px; height:34px; padding:0 9px; font-size:11px; }
#modal .catalog-product-form .field textarea { min-height:62px; padding:8px 9px; font-size:11px; }
#modal .catalog-product-form .catalog-attributes-heading { grid-column:1 / -1; margin-top:5px; padding:8px 0 2px; font-size:12px; }
#modal .catalog-product-form .catalog-attributes-category { margin-top:8px; padding:7px 10px 6px; }
#modal .catalog-product-form .catalog-attribute-field { min-height:50px; padding:7px 9px 6px; }
#modal .catalog-product-form .catalog-attribute-field input,
#modal .catalog-product-form .catalog-attribute-field select { min-height:30px; height:30px; }
#modal .catalog-product-form .catalog-image-preview img { width:96px!important; height:96px!important; }
#modal .catalog-product-form .catalog-image-preview { gap:6px; margin-top:5px; }
#modal .catalog-product-form { display:block; }
#modal .catalog-form-intro { margin:0 0 10px; padding:8px 10px; border:1px solid #dce7f5; border-radius:8px; background:#f7faff; color:#5b708c; font-size:10px; line-height:1.35; }
#modal .catalog-form-section { margin:0 0 10px; padding:12px 14px 14px; border:1px solid #dce6f2; border-radius:10px; background:#fff; box-shadow:0 2px 8px rgba(28,65,112,.04); }
#modal .catalog-section-title { display:flex; align-items:flex-start; gap:9px; margin:0 0 10px; color:#102846; }
#modal .catalog-section-title strong { display:block; font-size:14px; line-height:1.2; }
#modal .catalog-section-title small { display:block; margin-top:3px; color:#6d829e; font-size:10px; font-weight:500; }
#modal .catalog-section-icon { width:22px; height:22px; flex:0 0 22px; display:grid; place-items:center; border-radius:6px; color:#1769ed; background:#eaf2ff; font-size:10px; }
#modal .catalog-section-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px 10px; }
#modal .catalog-section-grid .catalog-field-wide { grid-column:1 / -1; }
#modal .catalog-characteristics-section .catalog-section-grid { gap:8px; }
#modal .catalog-characteristics-section .catalog-attributes-category { grid-column:1 / -1; margin-top:7px; }
#modal .catalog-characteristics-section .catalog-attributes-category:first-child { margin-top:0; }
#modal .catalog-characteristics-section .catalog-attributes-category { display:flex; align-items:center; gap:8px; margin-top:14px; padding:10px 12px; border:1px solid #b9d2f4; border-left:5px solid #1769ed; border-radius:8px; background:linear-gradient(90deg,#eaf3ff 0%,#f7faff 100%); color:#0b4a9f; font-size:12px; font-weight:800; letter-spacing:.01em; box-shadow:0 2px 7px rgba(23,105,237,.10); }
#modal .catalog-characteristics-section .catalog-attributes-category::before { content:'◆'; color:#1769ed; font-size:8px; }
#modal .catalog-attribute-group { grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px 10px; margin-top:7px; }
#modal .catalog-attribute-group:not([open]) > .catalog-attribute-field { display:none; }
#modal .catalog-attribute-group > .catalog-attributes-category { grid-column:1 / -1; margin-top:0; cursor:pointer; list-style:none; }
#modal .catalog-attribute-group > .catalog-attributes-category::-webkit-details-marker { display:none; }
#modal .catalog-attribute-group > .catalog-attributes-category span { margin-left:auto; color:#5379b5; font-size:14px; transition:transform .15s ease; }
#modal .catalog-attribute-group:not([open]) > .catalog-attributes-category span { transform:rotate(-90deg); }
#modal .catalog-main-section .field:nth-child(2) { grid-column:span 2; }
#modal .catalog-technical-section .field { min-width:0; }
@media (max-width:700px) {
  #modal .marketplace-mapping-grid { grid-template-columns:1fr; }
  #modal .modal-dialog { width:calc(100vw - 16px); }
  #modal .catalog-section-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:480px) {
  #modal .catalog-section-grid { grid-template-columns:1fr; }
  #modal .catalog-section-grid .catalog-field-wide,
  #modal .catalog-product-form .catalog-attributes-heading,
  #modal .catalog-product-form .catalog-attributes-category { grid-column:1 / -1; }
  #modal .catalog-main-section .field:nth-child(2) { grid-column:1; }
}
/* Keep wide catalog tables usable without a permanent scrollbar. */
.catalog-layout .table-wrap { overflow-x:auto; overflow-y:hidden; scrollbar-width:none; overscroll-behavior-x:contain; }
.catalog-layout .table-wrap::-webkit-scrollbar { height:0; }
.catalog-layout .table-wrap:hover { scrollbar-width:thin; }
.catalog-layout .table-wrap:hover::-webkit-scrollbar { height:8px; }
.catalog-layout .table-wrap:hover::-webkit-scrollbar-thumb { background:#a9bedc; border-radius:8px; }
.catalog-layout .table-wrap:hover::-webkit-scrollbar-track { background:#eef4fb; }
.catalog-layout .table-card table { min-width:980px; }
.catalog-layout .table-card thead th { font-size:12px; line-height:1.25; }
.catalog-layout .table-card tbody td { font-size:12px; line-height:1.35; }
.catalog-layout .table-card .product-name { font-size:12px; }
.catalog-layout .table-card .status { min-height:24px; font-size:11px; }
.catalog-layout .workspace.has-selection .table-card { overflow:visible; }
.catalog-layout .workspace.has-selection .table-wrap { overflow-x:auto; }
.catalog-layout .table-card tbody td:nth-child(n+7):nth-child(-n+12),
.catalog-layout .table-card thead th:nth-child(n+7):nth-child(-n+12) { text-align:center; }
.catalog-name-dialog { border:1px solid #b9d2f4; border-radius:10px; padding:16px; box-shadow:0 10px 30px rgba(17,45,83,.18); }
.catalog-name-dialog form { display:grid; gap:12px; min-width:260px; }
.catalog-name-dialog label { display:grid; gap:6px; color:#183153; font-size:12px; }
.catalog-name-dialog input { height:34px; border:1px solid #c8d8ee; border-radius:6px; padding:0 8px; }
.catalog-name-dialog form > div { display:flex; justify-content:flex-end; gap:8px; }
.modal-error { margin-bottom:10px; padding:8px 10px; border:1px solid #f2b8b5; border-radius:6px; color:#9b1c1c; background:#fff5f5; }
.filters-grid.second .field.is-disabled { opacity:.62; cursor:not-allowed; }
.filters-grid.second .field.is-disabled span { cursor:not-allowed; }
@media (pointer:coarse) {
  .catalog-layout .pager .page-btn,
  .catalog-layout .tabs .tab { min-width:44px; min-height:44px; }
  .catalog-layout .catalog-select-all,
  .catalog-layout .catalog-check { width:24px; height:24px; }
}
@media (max-width:700px) {
  body.erp-shell #reference-content.erp-tables .catalog-layout .erp-table-scroll td.catalog-empty,
  body.erp-shell #reference-content.erp-tables .catalog-layout .erp-table-scroll td.catalog-table-error { text-align:left!important; }
}
 :scope { --drawer-w:380px; }
#modal .bom-lines-preview { margin:0 0 12px; padding:10px 12px; border:1px solid #dce6f2; border-radius:8px; background:#f7faff; display:flex; flex:1 1 auto; min-height:0; flex-direction:column; gap:7px; }
#modal .bom-lines-preview > strong { color:#102846; font-size:12px; }
#modal .bom-lines-preview > .muted-note { margin:0; }
#modal .bom-lines-table-wrap { overflow:auto; flex:1 1 auto; min-height:0; max-height:none; }
#modal .bom-lines-table { width:100%; border-collapse:collapse; font-size:11px; }
#modal .bom-lines-table th,#modal .bom-lines-table td { padding:6px 7px; border-bottom:1px solid #e3eaf3; text-align:left; white-space:nowrap; }
#modal .bom-lines-table th { color:#5b708c; font-weight:700; }
#modal .bom-editor-intro { display:grid; gap:3px; margin-bottom:10px; color:#183153; font-size:11px; }
#modal .bom-editor-intro strong { font-size:12px; }
#modal .bom-editor-intro p { margin:2px 0 0; color:#5b708c; }
#modal .bom-entry-grid { display:grid; grid-template-columns:minmax(0,2fr) repeat(3,minmax(100px,1fr)); gap:7px 9px; }
#modal .bom-entry-grid .field { min-width:0; }
#modal .bom-entry-grid .bom-version-field { grid-column:span 2; }
#modal .bom-entry-grid .bom-component-field { grid-column:span 1; }
#modal .bom-entry-grid .bom-note-field { grid-column:1/-1; }
#modal .bom-entry-grid .field label { gap:3px; font-size:10px; }
#modal .bom-entry-grid .field input,#modal .bom-entry-grid .field select,#modal .bom-entry-grid .field textarea { min-height:31px; height:31px; padding:5px 8px; font-size:11px; }
#modal .bom-entry-grid .field textarea { height:76px; min-height:76px; resize:vertical; }
@media (max-width:760px) {
  #modal .bom-entry-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #modal .bom-entry-grid .bom-version-field,#modal .bom-entry-grid .bom-component-field,#modal .bom-entry-grid .bom-note-field { grid-column:1/-1; }
}
@media (max-width:560px) {
  #modal .bom-lines-preview { flex:0 0 220px; min-height:220px; max-height:280px; overflow:hidden; }
  #modal .bom-lines-table-wrap { min-height:100px; max-height:160px; }
}