.pd-archive *{box-sizing:border-box}
    .pd-archive a{color:inherit; text-decoration:none}
    .pd-archive :focus-visible{outline:3px solid color-mix(in srgb,var(--violet) 35%,transparent); outline-offset:3px; border-radius:10px}
    .pd-archive{
      width:min(var(--max), calc(100% - 32px));
      margin:0 auto;
      padding:18px 0 72px;
    }
    .pd-archive .frame{
      background:var(--paper);
      border:1px solid var(--border);
      border-radius:var(--radius-xl);
      padding:44px;
      box-shadow:var(--shadow-soft);
      margin:0 0 22px 0;
      position:relative;
      overflow:hidden;
    }
    .pd-archive .frame.soft{background:linear-gradient(165.39deg, var(--surface) -52.42%, #F5F7FB 152.42%);}
    .pd-archive .frame.dark{
      color:#fff;
      border-color:rgba(255,255,255,.08);
      background:
        radial-gradient(900px 500px at 80% 0%, color-mix(in srgb,var(--violet) 28%,transparent) 0%, color-mix(in srgb,var(--violet) 0%,transparent) 60%),
        radial-gradient(700px 420px at 15% 20%, color-mix(in srgb,var(--cyan) 18%,transparent) 0%, color-mix(in srgb,var(--cyan) 0%,transparent) 62%),
        linear-gradient(145deg, #0A1428 0%, #0D1731 40%, #081827 100%);
      box-shadow:0 20px 70px rgba(10,20,40,.35);
    }
    .pd-archive .frame-label{
      display:inline-flex;
      align-items:center;
      gap:10px;
      font-size:12px;
      font-weight:800;
      letter-spacing:.10em;
      color:var(--violet);
      background:color-mix(in srgb,var(--violet) 10%,transparent);
      border:1px solid color-mix(in srgb,var(--violet) 18%,transparent);
      border-radius:999px;
      padding:8px 12px;
      margin:0 0 18px 0;
    }
    .pd-archive .dark .frame-label{
      color:#fff;
      background:rgba(255,255,255,.10);
      border-color:rgba(255,255,255,.16);
    }
    .pd-archive .hr{height:1px; background:var(--divider); margin:28px 0;}
    .pd-archive .dark .hr{background:rgba(255,255,255,.14)}
    .pd-archive .row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; min-width:0}
    .pd-archive .stack{display:flex; flex-direction:column; gap:12px; min-width:0}
    .pd-archive .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:20px; min-width:0}
    .pd-archive .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; min-width:0}
    .pd-archive .grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; min-width:0}
    .pd-archive .grid-5{display:grid; grid-template-columns:repeat(5,1fr); gap:12px; min-width:0}

    .pd-archive h1,.pd-archive h2,.pd-archive h3,.pd-archive h4,.pd-archive p{margin:0 0 10px 0}
    .pd-archive h1{
      font-size:44px;
      line-height:1.15;
      letter-spacing:-1px;
      margin-bottom:14px;
    }
    .pd-archive h2{
      font-size:30px;
      line-height:1.25;
      letter-spacing:-.5px;
      margin-bottom:10px;
    }
    .pd-archive h3{font-size:18px; line-height:1.45; margin-bottom:8px;}
    .pd-archive h4{font-size:14px; margin-bottom:8px;}
    .pd-archive p{font-size:14px; color:color-mix(in srgb,var(--ink) 78%,transparent)}
    .pd-archive .dark p{color:rgba(255,255,255,.78)}
    .pd-archive .lead{font-size:16px; line-height:1.95; color:color-mix(in srgb,var(--ink) 78%,transparent); max-width:980px}
    .pd-archive .dark .lead{color:rgba(255,255,255,.82)}
    .pd-archive .kicker{
      font-size:12px;
      font-weight:800;
      letter-spacing:.18em;
      text-transform:uppercase;
      color:color-mix(in srgb,var(--violet) 95%,transparent);
      margin-bottom:10px;
    }
    .pd-archive .dark .kicker{color:rgba(255,255,255,.80)}
    .pd-archive .tag{
      display:inline-flex;
      align-items:center;
      height:26px;
      padding:0 10px;
      border-radius:999px;
      border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
      background:rgba(255,255,255,.70);
      color:color-mix(in srgb,var(--ink) 76%,transparent);
      font-size:11px;
      font-weight:700;
      gap:8px;
      white-space:nowrap;
    }
    .pd-archive .tag.dot:before{
      content:"";
      width:7px; height:7px; border-radius:999px;
      background:var(--violet);
      display:inline-block;
      flex:0 0 auto;
    }
    .pd-archive .chip{
      height:28px;
      padding:0 10px;
      border-radius:999px;
      background:color-mix(in srgb,var(--ink) 6%,transparent);
      color:var(--ink);
      display:inline-flex;
      align-items:center;
      font-size:11px;
      font-weight:800;
      border:1px solid color-mix(in srgb,var(--ink) 8%,transparent);
      gap:8px;
      white-space:nowrap;
    }

    .pd-archive .card{
      background:var(--paper);
      border:1px solid var(--border);
      border-radius:var(--radius-lg);
      padding:18px;
      min-width:0;
    }
    .pd-archive .soft .card{background:rgba(255,255,255,.75)}
    .pd-archive .dark .card{
      background:rgba(255,255,255,.06);
      border-color:rgba(255,255,255,.12);
    }
    .pd-archive .card p{margin:0; font-size:13px; color:color-mix(in srgb,var(--ink) 76%,transparent)}
    .pd-archive .dark .card p{color:rgba(255,255,255,.76)}
    .pd-archive .note{
      border-right:3px solid var(--violet);
      background:color-mix(in srgb,var(--violet) 8%,transparent);
      border-radius:var(--radius-md);
      padding:12px 14px;
      font-size:12px;
      color:color-mix(in srgb,var(--ink) 78%,transparent);
    }
    .pd-archive .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      min-width:0;
    }
    .pd-archive .brand{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }
    .pd-archive .brandMark{
      width:40px; height:40px; border-radius:999px;
      background:#fff;
      border:3px solid var(--ink-2);
      display:grid; place-items:center;
      color:var(--ink-2);
      font-weight:900;
      font-size:12px;
      flex:0 0 auto;
    }
    .pd-archive .brandName{
      display:flex;
      flex-direction:column;
      gap:2px;
      min-width:0;
    }
    .pd-archive .brandName strong{
      font-weight:900;
      font-size:16px;
      line-height:1.15;
      direction:ltr;
      white-space:nowrap;
    }
    .pd-archive .brandName span{
      font-size:11px;
      color:color-mix(in srgb,var(--ink) 62%,transparent);
      line-height:1.3;
      max-width:360px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      direction:ltr;
      text-align:right;
    }

    .pd-archive .headerActions{
      display:flex;
      gap:8px;
      align-items:center;
      flex-wrap:wrap;
      min-width:0;
    }
    .pd-archive .button{
      height:40px;
      border-radius:10px;
      padding:0 14px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      font-size:12px;
      font-weight:900;
      border:1px solid transparent;
      user-select:none;
      white-space:nowrap;
      cursor:default;
      min-width:0;
    }
    .pd-archive .button.primary{background:var(--violet); color:#fff; border-color:var(--violet)}
    .pd-archive .button.secondary{background:#F8FAFF; color:var(--ink); border-color:#E5E7EB}
    .pd-archive .button.outline{background:#fff; color:var(--violet); border-color:color-mix(in srgb,var(--violet) 75%,transparent)}
    .pd-archive .button.text{background:transparent; color:var(--violet); border-color:transparent; padding:0 10px}
    .pd-archive .button.danger{background:var(--danger); color:#fff; border-color:var(--danger)}
    .pd-archive .button.disabled{opacity:.55; filter:saturate(.7)}
    .pd-archive .button.small{height:34px; font-size:11px; padding:0 12px; border-radius:10px}
    .pd-archive .button.iconOnly{width:40px; padding:0; justify-content:center}
    .pd-archive .button.full{width:100%}
    .pd-archive .icon{
      width:18px; height:18px;
      display:inline-block;
      flex:0 0 auto;
    }
    .pd-archive .icon svg{width:100%; height:100%; display:block}
    .pd-archive .iconStroke svg{stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
    .pd-archive .fieldGroup{display:flex; flex-direction:column; gap:6px; min-width:0}
    .pd-archive .label{font-size:12px; font-weight:900; color:color-mix(in srgb,var(--ink) 84%,transparent)}
    .pd-archive .help{font-size:12px; color:color-mix(in srgb,var(--ink) 62%,transparent)}
    .pd-archive .error{font-size:12px; color:var(--danger); font-weight:800}

    .pd-archive .control{
      height:42px;
      border:1px solid #E5E7EB;
      border-radius:10px;
      padding:0 12px;
      background:#fff;
      display:flex;
      align-items:center;
      color:color-mix(in srgb,var(--ink) 86%,transparent);
      font-size:13px;
      min-width:0;
      gap:10px;
    }
    .pd-archive .control.muted{color:color-mix(in srgb,var(--ink) 55%,transparent)}
    .pd-archive .control:focus-within{outline:3px solid color-mix(in srgb,var(--violet) 22%,transparent); outline-offset:2px}
    .pd-archive .control.leftIcon .icon{color:color-mix(in srgb,var(--ink) 55%,transparent)}
    .pd-archive .control .grow{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
    .pd-archive .control .suffix{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:color-mix(in srgb,var(--ink) 55%,transparent);
      font-size:12px;
      white-space:nowrap;
    }
    .pd-archive .search{
      display:flex;
      border:1px solid #E5E7EB;
      border-radius:12px;
      overflow:hidden;
      background:#fff;
      height:44px;
      min-width:0;
    }
    .pd-archive .search .field{
      flex:1;
      display:flex;
      align-items:center;
      padding:0 12px;
      color:color-mix(in srgb,var(--ink) 62%,transparent);
      font-size:13px;
      gap:10px;
      min-width:0;
    }
    .pd-archive .search .field .text{
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .pd-archive .search .go{
      width:48px;
      display:grid;
      place-items:center;
      background:var(--violet);
      color:#fff;
      font-weight:900;
      border-right:1px solid rgba(255,255,255,.18);
      flex:0 0 auto;
    }
    .pd-archive .search .go .icon{color:#fff}
    .pd-archive .searchSuggest{
      margin-top:10px;
      border:1px solid var(--border);
      background:#fff;
      border-radius:16px;
      overflow:hidden;
      box-shadow:var(--shadow-soft);
    }
    .pd-archive .suggestRow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:12px 14px;
      border-bottom:1px solid var(--divider);
      min-width:0;
    }
    .pd-archive .suggestRow:last-child{border-bottom:0}
    .pd-archive .suggestMain{display:flex; flex-direction:column; gap:2px; min-width:0}
    .pd-archive .suggestMain b{font-size:13px; line-height:1.3}
    .pd-archive .suggestMain span{font-size:12px; color:color-mix(in srgb,var(--ink) 62%,transparent); direction:ltr; text-align:right}
    .pd-archive .suggestMeta{display:flex; align-items:center; gap:8px; flex:0 0 auto}
    .pd-archive .kbd{
      font-size:11px;
      direction:ltr;
      padding:5px 8px;
      border-radius:10px;
      border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
      background:color-mix(in srgb,var(--ink) 4%,transparent);
      color:color-mix(in srgb,var(--ink) 70%,transparent);
      font-weight:800;
      white-space:nowrap;
    }
    .pd-archive .badge{
      height:24px;
      padding:0 10px;
      border-radius:10px;
      font-size:11px;
      font-weight:900;
      display:inline-flex;
      align-items:center;
      border:1px solid transparent;
      white-space:nowrap;
      gap:8px;
    }
    .pd-archive .badge.instock{background:color-mix(in srgb,var(--green) 12%,transparent); color:#168A49; border-color:color-mix(in srgb,var(--green) 18%,transparent)}
    .pd-archive .badge.new{background:var(--violet); color:#fff}
    .pd-archive .badge.sale{background:var(--danger); color:#fff}
    .pd-archive .badge.warn{background:rgba(242,153,74,.14); color:#A85E13; border-color:rgba(242,153,74,.22)}
    .pd-archive .alert{
      border-radius:16px;
      border:1px solid var(--border);
      background:#fff;
      padding:14px;
      display:flex;
      gap:12px;
      align-items:flex-start;
      min-width:0;
    }
    .pd-archive .alert .pill{
      width:34px; height:34px;
      border-radius:12px;
      display:grid; place-items:center;
      flex:0 0 auto;
      border:1px solid transparent;
    }
    .pd-archive .alert .content{min-width:0}
    .pd-archive .alert .content b{display:block; font-size:13px; margin-bottom:2px}
    .pd-archive .alert .content p{margin:0; font-size:12px; color:color-mix(in srgb,var(--ink) 70%,transparent)}
    .pd-archive .alert.info .pill{background:color-mix(in srgb,var(--cyan) 16%,transparent); border-color:color-mix(in srgb,var(--cyan) 26%,transparent); color:#0A6E94}
    .pd-archive .alert.success .pill{background:color-mix(in srgb,var(--green) 12%,transparent); border-color:color-mix(in srgb,var(--green) 18%,transparent); color:#168A49}
    .pd-archive .alert.warning .pill{background:rgba(242,153,74,.14); border-color:rgba(242,153,74,.22); color:#A85E13}
    .pd-archive .alert.danger .pill{background:color-mix(in srgb,var(--danger) 12%,transparent); border-color:color-mix(in srgb,var(--danger) 20%,transparent); color:#B91C1C}
    .pd-archive .alertActions{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
    .pd-archive .breadcrumb{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
      font-size:12px;
      color:color-mix(in srgb,var(--ink) 70%,transparent);
      min-width:0;
    }
    .pd-archive .breadcrumb a{color:color-mix(in srgb,var(--ink) 74%,transparent)}
    .pd-archive .breadcrumb .sep{opacity:.55}
    .pd-archive .breadcrumb .current{font-weight:900; color:color-mix(in srgb,var(--ink) 86%,transparent)}
    .pd-archive .tabs{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      padding:6px;
      border-radius:16px;
      border:1px solid var(--border);
      background:rgba(255,255,255,.7);
    }
    .pd-archive .tab{
      height:36px;
      padding:0 14px;
      border-radius:12px;
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size:12px;
      font-weight:900;
      border:1px solid transparent;
      color:color-mix(in srgb,var(--ink) 72%,transparent);
      background:transparent;
      white-space:nowrap;
    }
    .pd-archive .tab.active{
      background:color-mix(in srgb,var(--violet) 12%,transparent);
      border-color:color-mix(in srgb,var(--violet) 22%,transparent);
      color:color-mix(in srgb,var(--ink) 90%,transparent);
    }
    .pd-archive .accordion{display:flex; flex-direction:column; gap:10px}
    .pd-archive details.acc{
      border:1px solid var(--border);
      border-radius:16px;
      background:#fff;
      overflow:hidden;
    }
    .pd-archive summary.accHead{
      list-style:none;
      cursor:default;
      padding:14px 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      font-weight:900;
      font-size:13px;
      color:color-mix(in srgb,var(--ink) 90%,transparent);
    }
    .pd-archive summary.accHead::-webkit-details-marker{display:none}
    .pd-archive .accBody{
      padding:0 14px 14px 14px;
      color:color-mix(in srgb,var(--ink) 74%,transparent);
      font-size:13px;
      border-top:1px solid var(--divider);
    }
    .pd-archive .chev{
      width:34px; height:34px;
      border-radius:12px;
      border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);
      background:color-mix(in srgb,var(--ink) 3%,transparent);
      display:grid; place-items:center;
      color:color-mix(in srgb,var(--ink) 70%,transparent);
      flex:0 0 auto;
    }
    .pd-archive .pagination{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
    }
    .pd-archive .pageBtn{
      width:38px; height:38px;
      border-radius:12px;
      border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
      background:#fff;
      display:grid; place-items:center;
      font-weight:900;
      font-size:12px;
      color:color-mix(in srgb,var(--ink) 78%,transparent);
    }
    .pd-archive .pageBtn.active{
      background:color-mix(in srgb,var(--violet) 12%,transparent);
      border-color:color-mix(in srgb,var(--violet) 28%,transparent);
      color:color-mix(in srgb,var(--ink) 92%,transparent);
    }
    .pd-archive .pageBtn.muted{opacity:.55}
    .pd-archive .pageInfo{font-size:12px; color:color-mix(in srgb,var(--ink) 62%,transparent); white-space:nowrap}
    .pd-archive .filterBar{
      border:1px solid var(--border);
      background:#fff;
      border-radius:18px;
      padding:14px;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      min-width:0;
    }
    .pd-archive .filterLeft{
      display:flex;
      flex-direction:column;
      gap:10px;
      min-width:0;
      flex:1;
    }
    .pd-archive .filterChips{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
    .pd-archive .filterRight{
      display:flex;
      gap:8px;
      align-items:center;
      flex-wrap:wrap;
      flex:0 0 auto;
    }
    .pd-archive .table{
      width:100%;
      border-collapse:separate;
      border-spacing:0;
      border:1px solid var(--border);
      border-radius:16px;
      overflow:hidden;
      background:var(--paper);
    }
    .pd-archive .table th,.pd-archive .table td{
      padding:14px 14px;
      text-align:right;
      border-bottom:1px solid var(--divider);
      font-size:12px;
      vertical-align:top;
    }
    .pd-archive .table th{
      font-size:11px;
      color:color-mix(in srgb,var(--ink) 70%,transparent);
      background:color-mix(in srgb,var(--violet) 6%,transparent);
      font-weight:900;
    }
    .pd-archive .table tr:last-child td{border-bottom:0}
    .pd-archive .table td:first-child{font-weight:900}

    .pd-archive .list{
      border:1px solid var(--border);
      border-radius:18px;
      overflow:hidden;
      background:#fff;
    }
    .pd-archive .listItem{
      padding:14px;
      border-bottom:1px solid var(--divider);
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      min-width:0;
    }
    .pd-archive .listItem:last-child{border-bottom:0}
    .pd-archive .liMain{min-width:0}
    .pd-archive .liMain b{display:block; font-size:13px; margin-bottom:2px}
    .pd-archive .liMain span{display:block; font-size:12px; color:color-mix(in srgb,var(--ink) 62%,transparent); direction:ltr; text-align:right}
    .pd-archive .liMeta{display:flex; align-items:center; gap:10px; flex:0 0 auto}
    .pd-archive .range{
      border:1px solid var(--border);
      border-radius:18px;
      background:#fff;
      padding:14px;
      min-width:0;
    }
    .pd-archive .rangeTrack{
      height:8px;
      border-radius:999px;
      background:linear-gradient(to left, var(--violet) 0%, var(--violet) 78%, #E5E7EB 78%);
      position:relative;
      border:1px solid color-mix(in srgb,var(--ink) 6%,transparent);
      overflow:hidden;
    }
    .pd-archive .rangeThumb{
      position:absolute;
      top:50%;
      transform:translateY(-50%);
      width:18px; height:18px;
      border-radius:999px;
      background:#fff;
      border:3px solid var(--violet);
      box-shadow:0 10px 22px color-mix(in srgb,var(--violet) 20%,transparent);
      right:22%;
    }
    .pd-archive .rangeMeta{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-top:10px;
      flex-wrap:wrap;
    }
    .pd-archive .rangeMeta span{font-size:12px; color:color-mix(in srgb,var(--ink) 62%,transparent)}
    .pd-archive .rangeMeta b{font-size:12px; font-weight:900}
    .pd-archive .modalStage{
      border:1px solid var(--border);
      border-radius:22px;
      background:linear-gradient(165.39deg, rgba(251,252,255,.9) -52.42%, rgba(245,247,251,.9) 152.42%);
      padding:18px;
      position:relative;
      overflow:hidden;
      min-height:280px;
    }
    .pd-archive .backdrop{
      position:absolute;
      inset:0;
      background:color-mix(in srgb,var(--ink) 26%,transparent);
    }
    .pd-archive .modal{
      position:absolute;
      right:18px;
      left:18px;
      top:50%;
      transform:translateY(-50%);
      margin:auto;
      max-width:560px;
      border-radius:18px;
      background:#fff;
      border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
      box-shadow:0 24px 70px color-mix(in srgb,var(--ink) 22%,transparent);
      overflow:hidden;
    }
    .pd-archive .modalHead{
      padding:14px 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      border-bottom:1px solid var(--divider);
    }
    .pd-archive .modalHead b{font-size:14px}
    .pd-archive .modalBody{padding:14px}
    .pd-archive .modalFoot{
      padding:14px;
      border-top:1px solid var(--divider);
      display:flex;
      gap:10px;
      justify-content:flex-start;
      flex-wrap:wrap;
    }
    .pd-archive .xBtn{
      width:38px; height:38px;
      border-radius:12px;
      border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
      background:color-mix(in srgb,var(--ink) 3%,transparent);
      display:grid; place-items:center;
      color:color-mix(in srgb,var(--ink) 72%,transparent);
      flex:0 0 auto;
    }
    .pd-archive .stateGrid{display:grid; grid-template-columns:repeat(4, 1fr); gap:12px}
    .pd-archive .skeleton{
      border:1px solid color-mix(in srgb,var(--ink) 8%,transparent);
      background:linear-gradient(90deg, color-mix(in srgb,var(--ink) 4%,transparent), color-mix(in srgb,var(--ink) 2%,transparent), color-mix(in srgb,var(--ink) 4%,transparent));
      border-radius:14px;
      padding:14px;
      overflow:hidden;
    }
    .pd-archive .skLine{height:10px; border-radius:999px; background:color-mix(in srgb,var(--ink) 10%,transparent)}
    .pd-archive .skLine.light{background:color-mix(in srgb,var(--ink) 7%,transparent)}
    .pd-archive .skBlock{height:74px; border-radius:12px; background:color-mix(in srgb,var(--ink) 8%,transparent); margin-top:12px}
    .pd-archive .emptyState, .pd-archive .errorState{
      border:1px solid var(--border);
      border-radius:18px;
      background:#fff;
      padding:18px;
      display:flex;
      flex-direction:column;
      gap:10px;
      min-width:0;
    }
    .pd-archive .stateTop{
      display:flex;
      gap:12px;
      align-items:flex-start;
      min-width:0;
    }
    .pd-archive .stateIcon{
      width:44px; height:44px;
      border-radius:14px;
      border:1px solid color-mix(in srgb,var(--violet) 18%,transparent);
      background:color-mix(in srgb,var(--violet) 10%,transparent);
      color:var(--ink);
      display:grid;
      place-items:center;
      font-weight:900;
      flex:0 0 auto;
    }
    .pd-archive .stateText{min-width:0}
    .pd-archive .stateText b{display:block; font-size:13px}
    .pd-archive .stateText p{margin:0; font-size:12px; color:color-mix(in srgb,var(--ink) 70%,transparent)}
    .pd-archive .stateActions{display:flex; gap:8px; flex-wrap:wrap}
    .pd-archive .footerInner{
      width:min(var(--max), calc(100% - 32px));
      margin:0 auto;
      padding:26px 0 34px;
      display:flex;
      flex-direction:column;
      gap:18px;
      min-width:0;
    }
    .pd-archive .footerGrid{
      display:grid;
      grid-template-columns:1.2fr .8fr .8fr 1fr;
      gap:14px;
      min-width:0;
    }
    .pd-archive .footerCol{
      border:1px solid var(--border);
      background:#fff;
      border-radius:18px;
      padding:16px;
      min-width:0;
    }
    .pd-archive .footerCol h4{margin:0 0 10px 0}
    .pd-archive .footerLinks{display:flex; flex-direction:column; gap:8px; font-size:13px; color:color-mix(in srgb,var(--ink) 74%,transparent)}
    .pd-archive .footerMeta{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
      font-size:12px;
      color:color-mix(in srgb,var(--ink) 62%,transparent);
      direction:ltr;
    }
    .pd-archive main.page{min-width:0}
    @media (max-width: 1040px){
      .pd-archive .grid-4{grid-template-columns:repeat(2,1fr)}
      .pd-archive .grid-5{grid-template-columns:repeat(3,1fr)}
      .pd-archive .stateGrid{grid-template-columns:repeat(2,1fr)}
      .pd-archive .footerGrid{grid-template-columns:1fr 1fr}
    }
    @media (max-width: 840px){
      .pd-archive .frame{padding:22px; border-radius:18px}
      .pd-archive .grid-2,.pd-archive .grid-3{grid-template-columns:1fr}
      .pd-archive .grid-4{grid-template-columns:1fr}
      .pd-archive .grid-5{grid-template-columns:1fr}
      .pd-archive h1{font-size:34px}
      .pd-archive h2{font-size:26px}
      .pd-archive .brandName span{max-width:220px}
      .pd-archive .search{height:44px}
      .pd-archive .stateGrid{grid-template-columns:1fr}
      .pd-archive .footerGrid{grid-template-columns:1fr}
      .pd-archive .modal{max-width:unset}
    }
    .pd-archive .archivePage{display:flex;flex-direction:column;gap:22px;min-width:0}
    .pd-archive .archiveIntro{display:flex;flex-direction:column;gap:14px;min-width:0}
    .pd-archive .archiveBreadcrumb{direction:ltr;text-align:left;justify-content:flex-start}
    .pd-archive .archiveBreadcrumb .current{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

    .pd-archive .categoryBoard{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;min-width:0}
    .pd-archive .categoryTile{display:flex;align-items:center;gap:12px;direction:ltr;text-align:left;padding:12px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--paper);min-width:0;box-shadow:var(--shadow-mini)}
    .pd-archive .categoryThumb{width:54px;height:54px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);display:grid;place-items:center;flex:0 0 auto;overflow:hidden}
    .pd-archive .categoryThumb img{width:100%;height:100%;display:block;object-fit:cover}
    .pd-archive .categoryName{font-size:13px;font-weight:900;line-height:1.4;overflow:hidden;text-overflow:ellipsis}
    .pd-archive .categoryMeta{font-size:11px;color:color-mix(in srgb,var(--ink) 62%,transparent);margin-top:3px}

    .pd-archive .discoverySection{scroll-margin-top:120px}
    .pd-archive .filterScroller{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 10px;scroll-snap-type:x proximity;min-width:0}
    .pd-archive .filterScroller::-webkit-scrollbar{height:8px}.pd-archive .filterScroller::-webkit-scrollbar-thumb{background:var(--divider);border-radius:999px}
    .pd-archive .filterCard{flex:0 0 274px;scroll-snap-align:start;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--paper);padding:14px;min-width:0}
    .pd-archive .filterHead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px;direction:ltr;text-align:left}
    .pd-archive .filterTitle{font-size:13px;font-weight:900;line-height:1.3;word-break:break-word}
    .pd-archive .filterUnit{font-size:11px;color:color-mix(in srgb,var(--ink) 56%,transparent);margin-top:3px}
    .pd-archive .filterSearch{width:100%;height:38px;border:1px solid #E5E7EB;border-radius:10px;padding:0 11px;background:#fff;color:var(--ink);font:inherit;font-size:12px;direction:ltr;text-align:left;outline:none}
    .pd-archive .filterSearch:focus{outline:3px solid color-mix(in srgb,var(--violet) 18%,transparent);outline-offset:1px}
    .pd-archive .filterOptions{display:flex;flex-direction:column;gap:7px;margin-top:10px;max-height:174px;overflow:auto;padding-inline-end:3px}
    .pd-archive .filterOption{display:flex;align-items:center;gap:8px;direction:ltr;text-align:left;font-size:12px;min-width:0}
    .pd-archive .filterOption input{width:16px;height:16px;flex:0 0 auto;accent-color:var(--violet)}
    .pd-archive .filterOption span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .pd-archive .filterOption small{margin-left:auto;color:color-mix(in srgb,var(--ink) 48%,transparent);font-size:10px}
    .pd-archive .filterOption.is-disabled{opacity:.45}
    .pd-archive .rangeControls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--divider)}
    .pd-archive .rangeControl{display:flex;flex-direction:column;gap:5px;min-width:0}
    .pd-archive .rangeControl label{font-size:10px;color:color-mix(in srgb,var(--ink) 62%,transparent);direction:rtl;text-align:right}
    .pd-archive .rangeControl select{height:36px;border:1px solid #E5E7EB;border-radius:10px;background:#fff;padding:0 8px;color:var(--ink);font:inherit;font-size:11px;min-width:0;direction:ltr}

    .pd-archive .filterActionBar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--divider)}
    .pd-archive .resultCount{font-size:13px;font-weight:900}
    .pd-archive .filterActions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
    .pd-archive .stateIndicator{width:15px;height:15px;border-radius:5px;border:1px solid color-mix(in srgb,var(--ink) 24%,transparent);display:grid;place-items:center;background:#fff;flex:0 0 auto}
    .pd-archive .stateIndicator:after{content:"";width:7px;height:7px;border-radius:3px;background:transparent}
    .pd-archive .button.is-active .stateIndicator:after{background:currentColor}

    .pd-archive .tableSection{min-width:0}
    .pd-archive .tableToolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
    .pd-archive .tableToolbarText{min-width:0}.pd-archive .tableToolbarText b{display:block;font-size:14px}.pd-archive .tableToolbarText span{display:block;font-size:12px;color:color-mix(in srgb,var(--ink) 62%,transparent);margin-top:2px}
    .pd-archive .tableShell{position:relative;min-width:0}
    .pd-archive .techTableViewport{max-height:640px;overflow:auto;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--paper);position:relative}
    .pd-archive .techTable{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0;direction:ltr;background:var(--paper)}
    .pd-archive .techTable th,.pd-archive .techTable td{padding:12px 12px;border-bottom:1px solid var(--divider);border-right:1px solid var(--divider);vertical-align:top;font-size:12px;background:var(--paper);min-width:142px;text-align:left}
    .pd-archive .techTable th{position:sticky;top:0;z-index:4;background:var(--surface);font-size:11px;font-weight:900;color:color-mix(in srgb,var(--ink) 76%,transparent);white-space:nowrap}
    .pd-archive .techTable th:first-child,.pd-archive .techTable td:first-child{position:sticky;left:0;z-index:3;min-width:220px;width:220px;border-left:0;box-shadow:8px 0 16px color-mix(in srgb,var(--ink-2) 5%,transparent)}
    .pd-archive .techTable th:first-child{z-index:6;background:var(--surface)}
    .pd-archive .techTable tr:last-child td{border-bottom:0}
    .pd-archive .techTable td.imageCol,.pd-archive .techTable th.imageCol{min-width:100px;width:100px;text-align:center}
    .pd-archive .techTable td.nameCol,.pd-archive .techTable th.nameCol{min-width:250px;width:250px}
    .pd-archive .sortButton{border:0;background:transparent;padding:0;display:inline-flex;align-items:center;gap:7px;color:inherit;font:inherit;font-weight:900;cursor:pointer;direction:ltr}
    .pd-archive .sortGlyph{width:18px;height:18px;border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);border-radius:7px;display:grid;place-items:center;font-size:10px;line-height:1}
    .pd-archive .sortButton.is-sorted .sortGlyph{border-color:color-mix(in srgb,var(--violet) 28%,transparent);background:color-mix(in srgb,var(--violet) 8%,transparent)}

    .pd-archive .actionCell{direction:rtl;text-align:right;background:var(--paper)}
    .pd-archive .datasheetLink{display:inline-flex;align-items:center;gap:7px;font-weight:900;color:var(--violet);margin-bottom:9px}
    .pd-archive .priceStart{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:9px;font-size:11px}.pd-archive .priceStart b{font-size:13px;color:var(--ink)}
    .pd-archive .cartControl{display:grid;grid-template-columns:34px 1fr 34px 38px;gap:5px;direction:ltr;align-items:center}
    .pd-archive .qtyBtn,.pd-archive .cartIconBtn{height:34px;border:1px solid #E5E7EB;border-radius:10px;background:#fff;display:grid;place-items:center;font-weight:900;color:var(--ink);cursor:pointer}
    .pd-archive .cartIconBtn{background:var(--violet);color:#fff;border-color:var(--violet)}
    .pd-archive .qtyInput{height:34px;min-width:0;width:100%;border:1px solid #E5E7EB;border-radius:10px;text-align:center;font:inherit;font-size:12px;color:var(--ink);background:#fff}
    .pd-archive .qtyLimits{font-size:10px;color:color-mix(in srgb,var(--ink) 56%,transparent);margin-top:6px;direction:rtl;text-align:right}
    .pd-archive .viewProductLink{display:inline-flex;margin-top:2px;font-weight:900;color:var(--violet)}
    .pd-archive .rowStatus{font-size:10px;margin-top:6px;min-height:16px;color:color-mix(in srgb,var(--ink) 62%,transparent)}

    .pd-archive .productImage{width:66px;height:66px;border:1px solid var(--border);border-radius:12px;object-fit:contain;background:var(--surface);display:block;margin:auto}
    .pd-archive .productPlaceholder{width:66px;height:66px;border:1px dashed color-mix(in srgb,var(--ink) 18%,transparent);border-radius:12px;background:var(--surface);display:grid;place-items:center;margin:auto;color:color-mix(in srgb,var(--ink) 42%,transparent)}
    .pd-archive .productPlaceholder svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.5}
    .pd-archive .productNames{display:flex;flex-direction:column;gap:4px;direction:rtl;text-align:right}.pd-archive .productNames .faName{font-weight:900;color:var(--ink);line-height:1.45}.pd-archive .productNames .enName{direction:ltr;text-align:left;color:color-mix(in srgb,var(--ink) 68%,transparent);font-size:11px;line-height:1.4}
    .pd-archive .attrValue{direction:ltr;text-align:left;white-space:nowrap}

    .pd-archive .tableFade{position:relative;margin-top:-92px;height:92px;z-index:8;display:flex;align-items:flex-end;justify-content:center;padding:18px;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.92) 54%,var(--paper) 100%);border-radius:0 0 var(--radius-lg) var(--radius-lg)}
    .pd-archive .tableFadeContent{pointer-events:auto;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;text-align:center;direction:rtl}
    .pd-archive .fadeMessage{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:900}
    .pd-archive .fadeLinks{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.pd-archive .fadeLinks button{border:0;background:transparent;padding:0;font:inherit;font-size:12px;font-weight:900;color:var(--violet);cursor:pointer}
    .pd-archive .fadeLinks button[disabled]{opacity:.45;cursor:default}

    .pd-archive .emptyResults{padding:28px;text-align:center;direction:rtl;color:color-mix(in srgb,var(--ink) 66%,transparent)}

    @media (max-width:1040px){.pd-archive .categoryBoard{grid-template-columns:repeat(2,minmax(0,1fr))}}
    @media (max-width:840px){.pd-archive .categoryBoard{grid-template-columns:1fr}.pd-archive .filterCard{flex-basis:250px}.pd-archive .filterActionBar{align-items:flex-start}.pd-archive .filterActions{width:100%}.pd-archive .filterActions .button{flex:1 1 auto}.pd-archive .techTableViewport{max-height:560px}}
    .pd-archive .filterSearch{display:flex;align-items:center;justify-content:space-between;gap:8px;user-select:none}
    .pd-archive .filterSearch .placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:color-mix(in srgb,var(--ink) 52%,transparent)}
    .pd-archive .filterSearch .icon{width:16px;height:16px;color:color-mix(in srgb,var(--ink) 50%,transparent)}
    .pd-archive .filterOption{min-height:24px}
    .pd-archive .optionCheck{width:16px;height:16px;flex:0 0 auto;border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);border-radius:5px;background:#fff;display:grid;place-items:center;color:#fff}
    .pd-archive .optionCheck.checked{background:var(--violet);border-color:var(--violet)}
    .pd-archive .optionCheck.checked:after{content:"";width:6px;height:3px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg) translateY(-1px)}
    .pd-archive .rangeSelect{height:36px;border:1px solid #E5E7EB;border-radius:10px;background:#fff;padding:0 9px;color:color-mix(in srgb,var(--ink) 70%,transparent);font-size:11px;min-width:0;direction:ltr;display:flex;align-items:center;justify-content:space-between;gap:8px}
    .pd-archive .rangeSelect .chevronMini{font-size:10px;color:color-mix(in srgb,var(--ink) 46%,transparent)}
    .pd-archive .buttonStatic{cursor:default}
    .pd-archive .sortButton{cursor:default}
    .pd-archive .qtyBtn,.pd-archive .cartIconBtn{cursor:default}
    .pd-archive .fadeLinks a{border:0;background:transparent;padding:0;font:inherit;font-size:12px;font-weight:900;color:var(--violet);cursor:default;text-decoration:none}
    .pd-archive .productImageSvg{display:grid;place-items:center;overflow:hidden;padding:0}
    .pd-archive .productImageSvg svg{width:100%;height:100%;display:block}
    .pd-archive .staticNoDatasheet{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:color-mix(in srgb,var(--ink) 50%,transparent);margin-bottom:9px}
    .pd-archive .tableDesignNote{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px;direction:rtl}
    .pd-archive .tableDesignNote span{font-size:11px;color:color-mix(in srgb,var(--ink) 58%,transparent)}

/* Native controls keep the exact reference geometry. */
.pd-archive .archiveTitle{font-size:30px;margin:0 0 12px;line-height:1.25}
.pd-archive .discoveryHeading{align-items:flex-start;margin-bottom:14px}
.pd-archive .discoveryHeading h2{margin-bottom:5px}
.pd-archive .discoveryHeading p{margin:0}
.pd-archive input,.pd-archive select,.pd-archive button{font:inherit}
.pd-archive button{cursor:pointer}
.pd-archive .filterSearch input{width:100%;min-width:0;border:0;outline:0;background:transparent;font-size:11px}
.pd-archive .filterOption input{appearance:auto;accent-color:var(--violet);margin:0;flex-shrink:0}
.pd-archive .filterOption:has(input:disabled){opacity:.45}
.pd-archive .filterOption[hidden]{display:none}
.pd-archive .rangeSelect{width:100%;font-size:11px;color:var(--ink)}
.pd-archive .cartControl .quantity{min-width:0}
.pd-archive .cartControl input.qty{width:48px;min-width:0;height:32px;border:0;text-align:center;background:transparent;font-size:12px;padding:0}
.pd-archive .cartControl .qtyBtn,.pd-archive .cartIconBtn{border:0}
.pd-archive .sortButton{font:inherit;border:0;background:transparent;color:inherit;width:100%}
.pd-archive th[aria-sort=ascending],.pd-archive th[aria-sort=descending]{background:color-mix(in srgb,var(--violet) 12%,var(--paper))}
.pd-archive .productImage img{width:66px;height:66px;object-fit:contain}
.pd-archive .categoryThumb svg{width:48px;height:48px;fill:none;stroke:currentColor;stroke-width:1.5}
.pd-archive .categoryThumb img{width:64px;height:59px;object-fit:contain}
.pd-archive[aria-busy=true] .tableShell{opacity:.55}
.pd-archive .tableFade{position:relative;inset:auto;margin-top:0}
.pd-archive .techTableViewport{max-height:760px}
.pd-archive .catalog-empty td{padding:40px;text-align:center;white-space:normal}