:root{--bg:#f4f6fb;--panel:#ffffff;--ink:#172033;--muted:#667085;--line:#e4e7ec;--primary:#155eef;--danger:#c01048;--soft:#eef4ff;--good:#027a48;--warn:#b54708}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--ink)}
.layout{display:grid;grid-template-columns:320px 1fr;min-height:100vh}.sidebar{background:#111827;color:#fff;padding:22px;position:sticky;top:0;height:100vh;overflow:auto}.brand{display:flex;gap:12px;align-items:center;margin-bottom:22px}.brand h1{font-size:20px;margin:0}.brand p{font-size:12px;color:#cbd5e1;margin:4px 0 0}.logo{width:42px;height:42px;border-radius:12px;background:#fff;color:#111827;display:grid;place-items:center;font-weight:800}.panel{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:14px;margin-bottom:14px}.panel.compact{display:grid;gap:10px}.stat{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:#cbd5e1}.stat strong{color:#fff}.panel label{display:block;font-size:13px;color:#d1d5db;margin-bottom:8px}.mt12{margin-top:12px}.panel select,.searchbox input{width:100%;border:1px solid var(--line);border-radius:12px;padding:11px 12px;background:#fff;color:var(--ink)}.note p{font-size:12px;line-height:1.5;color:#cbd5e1;margin-bottom:0}.btn{border:1px solid var(--line);background:#fff;color:#111827;border-radius:12px;padding:10px 12px;cursor:pointer;font-weight:700;text-align:center;text-decoration:none;display:inline-block}.btn:hover{filter:brightness(.97)}.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn.danger{background:#fff;color:var(--danger);border-color:#fda4af}.btn.full{width:100%;margin-top:8px}.content{padding:24px;min-width:0}.topbar{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:18px}.topbar h2{margin:0;font-size:26px}.topbar p{margin:6px 0 0;color:var(--muted)}.searchbox{min-width:340px}.tablewrap{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:auto;box-shadow:0 8px 20px rgba(16,24,40,.06)}table{border-collapse:collapse;width:100%;font-size:13px}th,td{border-bottom:1px solid var(--line);padding:11px 12px;text-align:left;vertical-align:top}th{position:sticky;top:0;background:#f9fafb;z-index:1;font-size:12px;color:#475467;text-transform:uppercase;letter-spacing:.02em}tbody tr:hover{background:#f9fafb}.price{font-weight:800}.badge{display:inline-block;border-radius:999px;padding:4px 8px;background:var(--soft);color:#1d4ed8;font-size:12px}.status{color:var(--good);font-weight:700}.status.out,.status.instore{color:#b42318}.rowactions{display:flex;gap:6px}.mini{padding:6px 8px;border-radius:9px;font-size:12px}dialog{border:none;border-radius:18px;width:min(860px,94vw);padding:0;box-shadow:0 24px 70px rgba(0,0,0,.25)}dialog::backdrop{background:rgba(17,24,39,.55)}#productForm{padding:22px}#productForm h3{margin:0 0 16px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}#productForm label{font-size:13px;font-weight:700;color:#344054;display:block;margin-bottom:12px}#productForm input,#productForm textarea{width:100%;margin-top:6px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font:inherit}menu{display:flex;justify-content:flex-end;gap:8px;padding:0;margin:14px 0 0}.dialogBody{padding:22px;max-height:86vh;overflow:auto}.dialogHeader{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.dialogHeader h3{margin:0 0 6px}.dialogHeader p{margin:0;color:var(--muted)}.dupToolbar{display:flex;gap:12px;align-items:end;margin:18px 0}.dupToolbar label{font-size:13px;font-weight:700;color:#344054;display:block;flex:1}.dupToolbar select{width:100%;margin-top:6px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff}.dupHint{background:#fff7ed;border:1px solid #fed7aa;color:#7c2d12;border-radius:14px;padding:12px;font-size:13px;line-height:1.5;margin-bottom:14px}.dupResults{display:grid;gap:14px}.dupCard{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}.dupCardHead{display:flex;justify-content:space-between;gap:10px;background:#f9fafb;padding:12px 14px;border-bottom:1px solid var(--line)}.dupCardHead span{color:var(--muted);font-size:13px}.dupTableWrap{overflow:auto}.dupTable th,.dupTable td{font-size:12px;padding:9px}.dupActions{display:flex;gap:8px;justify-content:flex-end;padding:12px 14px;background:#fcfcfd}.emptyState{text-align:center;padding:24px;border:1px dashed var(--line);border-radius:16px;color:var(--muted);background:#fff}@media(max-width:900px){.layout{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.topbar{display:block}.searchbox{min-width:0;margin-top:14px}.grid2{grid-template-columns:1fr}.dupToolbar{display:block}.dupToolbar .btn{margin-top:10px;width:100%}}

.importLog{white-space:pre-wrap;background:#0f172a;color:#e5e7eb;border-radius:14px;padding:14px;min-height:120px;line-height:1.5;overflow:auto}.leftActions{justify-content:flex-start}.importGrid{margin-top:14px}.importGrid select{width:100%;margin-top:6px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;font:inherit}

.bulkPanel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;margin:14px 0}.bulkHeader{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:12px}.bulkHeader strong{display:block;font-size:14px}.bulkHeader p{margin:4px 0 0;color:var(--muted);font-size:13px}.bulkQuickActions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.bulkGrid{display:grid;grid-template-columns:280px 1fr;gap:14px}.bulkBox{background:#f9fafb;border:1px solid var(--line);border-radius:14px;padding:12px}.bulkBox h4{margin:0 0 6px;font-size:14px}.bulkBox p{margin:0 0 10px;color:var(--muted);font-size:12px;line-height:1.45}.bulkFormGrid{display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:10px}.bulkFormGrid label{font-size:12px;font-weight:700;color:#344054;display:block}.bulkFormGrid input,.bulkFormGrid select{width:100%;margin-top:6px;border:1px solid var(--line);border-radius:12px;padding:9px 10px;background:#fff;font:inherit}.checkLabel{display:flex;align-items:center;gap:8px;cursor:pointer}.dupTable input[type="checkbox"],.dupCardHead input[type="checkbox"]{width:16px;height:16px;cursor:pointer}@media(max-width:900px){.bulkHeader{display:block}.bulkQuickActions{justify-content:flex-start;margin-top:10px}.bulkGrid{grid-template-columns:1fr}.bulkFormGrid{grid-template-columns:1fr}}

.sourceExcludeBox{background:#f8fafc;border:1px solid var(--line);border-radius:16px;padding:14px;margin:0 0 14px}.sourceExcludeHead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:10px}.sourceExcludeHead strong{display:block;font-size:14px}.sourceExcludeHead p{margin:4px 0 0;color:var(--muted);font-size:13px}.sourceChipList{display:flex;flex-wrap:wrap;gap:8px}.sourceChip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:700;color:#344054;cursor:pointer}.sourceChip input{width:15px;height:15px;cursor:pointer}.mutedSmall{font-size:12px;color:var(--muted)}@media(max-width:900px){.sourceExcludeHead{display:block}.sourceExcludeHead .btn{margin-top:10px}}

/* v8 layout refinements */
.layout{grid-template-columns:290px minmax(0,1fr)}.sidebar{padding:18px}.content{padding:18px}.topbar{align-items:center}.searchbox{display:flex;gap:8px;align-items:center;min-width:380px}.searchbox input{min-width:260px}.searchOpenBtn{white-space:nowrap}#productTable{table-layout:fixed;min-width:980px}.col-id{width:54px}.col-product{width:260px}.col-price{width:86px}.col-category{width:150px}.col-source{width:130px}.col-status{width:92px}.col-notes{width:178px}.col-action{width:108px}#productTable td{word-break:break-word;line-height:1.35}.subtext{margin-top:4px;color:var(--muted);font-size:12px}.sourceCell{font-size:12px;color:#475467}.notesCell{font-size:12px;color:#475467;max-height:62px;overflow:hidden}.rowactions{flex-wrap:wrap}.tablewrap{max-width:100%}
.quickSearchDialog{width:min(820px,94vw)}.quickSearchBody{padding:24px}.quickSearchHeader{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:18px}.quickSearchHeader h3{margin:0;font-size:24px}.quickSearchHeader p{margin:6px 0 0;color:var(--muted);line-height:1.45}.quickSearchBody input[type="search"]{width:100%;border:2px solid #c7d7fe;border-radius:18px;padding:20px 22px;font-size:25px;font-weight:700;outline:none}.quickSearchBody input[type="search"]:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(21,94,239,.12)}.quickSearchFooter{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:14px;color:var(--muted);font-size:13px}
.missingActions{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}.missingResults{display:grid;gap:14px}.missingTableWrap{overflow:auto;border:1px solid var(--line);border-radius:16px;background:#fff}.missingTable{min-width:980px}.missingTable th,.missingTable td{font-size:12px;padding:9px}.missingToolbar{align-items:end}.missingToolbar label{min-width:210px}@media(max-width:900px){.layout{grid-template-columns:1fr}.searchbox{display:block;min-width:0}.searchOpenBtn{margin-top:8px;width:100%}.quickSearchBody input[type="search"]{font-size:18px;padding:16px}.quickSearchHeader{display:block}.quickSearchHeader .btn{margin-top:12px}.quickSearchFooter{display:block}.quickSearchFooter .btn{margin-top:10px;width:100%}.missingToolbar label{min-width:0}}

/* v9 compact sidebar and admin mode */
body.viewer .adminOnly{display:none!important}body.admin .viewerOnly{display:none!important}
.layout{grid-template-columns:270px minmax(0,1fr)}.compactSidebar{padding:14px 12px}.compactBrand{margin-bottom:12px}.compactBrand .logo{width:36px;height:36px;border-radius:10px}.compactBrand h1{font-size:18px;line-height:1.15}.compactBrand p{font-size:12px}.adminMiniPanel{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:10px;margin-bottom:10px;display:grid;gap:8px}.adminMiniPanel strong{display:block;font-size:13px}.adminMiniPanel span{display:block;font-size:11px;color:#cbd5e1;margin-top:2px}.adminMiniPanel .btn{width:100%;background:#fff}.statsGrid{grid-template-columns:1fr 1fr!important;gap:8px!important;padding:10px!important}.statsGrid .stat{display:block;background:rgba(255,255,255,.06);border-radius:10px;padding:8px}.statsGrid .stat span{display:block;font-size:11px;margin-bottom:4px}.statsGrid .stat strong{font-size:13px;word-break:break-word}.accordion{padding:0;overflow:hidden}.accordion summary{list-style:none;cursor:pointer;padding:10px 12px;font-weight:800;font-size:13px;color:#fff;border-bottom:1px solid rgba(255,255,255,.10)}.accordion summary::-webkit-details-marker{display:none}.accordion summary:after{content:'+';float:right;color:#cbd5e1}.accordion[open] summary:after{content:'−'}.accordion label,.accordion select,.accordion .btn,.accordion a.btn{margin-left:10px;margin-right:10px;width:calc(100% - 20px)}.accordion label{margin-top:10px}.accordion .btn:last-child,.accordion a.btn:last-child{margin-bottom:10px}.mt8{margin-top:8px!important}.compactNote{padding:10px}.compactNote p{font-size:11px;line-height:1.35}.content{padding:18px}.topbar h2{font-size:24px}.topbar p{font-size:13px;line-height:1.35}.loginDialog{width:min(420px,92vw)}#adminLoginForm{padding:22px}#adminLoginForm h3{margin:0 0 6px}#adminLoginForm p{margin:0 0 14px;color:var(--muted);line-height:1.45;font-size:13px}#adminLoginForm label{display:block;font-size:13px;font-weight:800;color:#344054;margin-bottom:12px}#adminLoginForm input{width:100%;margin-top:6px;border:1px solid var(--line);border-radius:12px;padding:11px 12px;font:inherit}.loginMessage{min-height:18px;color:var(--danger);font-size:12px;font-weight:700;margin-top:4px}body.viewer .col-action,body.viewer #productTable td.actionCell{display:none}body.admin #productTable td.actionCell{display:table-cell}.adminGate{font-size:12px;color:var(--muted);line-height:1.35}.adminLockNotice{background:#eef4ff;border:1px solid #c7d7fe;color:#1e3a8a;border-radius:14px;padding:10px 12px;margin:12px 0;font-size:13px;line-height:1.45}@media(max-width:900px){.layout{grid-template-columns:1fr}.compactSidebar{height:auto}.statsGrid{grid-template-columns:repeat(4,1fr)!important}.adminMiniPanel{grid-template-columns:1fr 130px;align-items:center}.adminMiniPanel .btn{margin:0}}@media(max-width:560px){.statsGrid{grid-template-columns:1fr 1fr!important}.adminMiniPanel{grid-template-columns:1fr}}

/* v11: ringkasan awal dan tabel lebih ramping */
#productTable{min-width:820px}
.col-product{width:300px}.col-source{width:145px}.col-status{width:100px}.col-action{width:110px}.col-notes{display:none}
.summaryDashboard{display:grid;gap:14px;margin-bottom:14px}.summaryHead{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 8px 20px rgba(16,24,40,.05)}.summaryHead h3{margin:0 0 6px;font-size:22px}.summaryHead p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}.summaryCards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.summaryCard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:0 8px 18px rgba(16,24,40,.04)}.summaryCard span{display:block;color:var(--muted);font-size:12px;margin-bottom:6px}.summaryCard strong{display:block;font-size:20px;color:var(--ink);word-break:break-word}.summarySplit{display:grid;grid-template-columns:1fr 1fr;gap:12px}.summaryPanel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:0 8px 18px rgba(16,24,40,.04)}.summaryPanel h4{margin:0 0 10px;font-size:15px}.summaryRow{width:100%;display:flex;justify-content:space-between;gap:12px;align-items:center;border:0;border-bottom:1px solid var(--line);background:transparent;padding:9px 0;text-align:left;cursor:pointer;color:var(--ink)}.summaryRow:last-child{border-bottom:0}.summaryRow:hover span{text-decoration:underline}.summaryRow span{font-size:13px}.summaryRow strong{font-size:13px}.listingNotice{background:#eef4ff;border:1px solid #c7d7fe;color:#1e3a8a;border-radius:16px;padding:13px 15px;margin-bottom:14px;font-size:13px}.emptyTableCell{text-align:center;color:var(--muted);padding:22px!important}.sourceCell{font-size:13px;color:#344054}.topbar p{max-width:680px}@media(max-width:1100px){.summaryCards{grid-template-columns:repeat(2,minmax(0,1fr))}.summarySplit{grid-template-columns:1fr}}@media(max-width:560px){.summaryCards{grid-template-columns:1fr}.summaryHead{display:block}.summaryHead .btn{margin-top:12px;width:100%}}

/* v12: dropdown summary and visual palette */
body.theme-pawon{--bg:#f7efe4;--panel:#fffaf3;--ink:#1f2933;--muted:#6f6258;--line:#eadcc8;--primary:#b45309;--primary-2:#f59e0b;--soft:#fff3df;--good:#047857;--danger:#be123c;--sidebar:#20170f;--sidebar-deep:#3a2414;--logo-bg:#fff7ed;--logo-ink:#9a3412;--table-head:#fff7ed;--focus:rgba(180,83,9,.18)}
body.theme-emerald{--bg:#eef8f4;--panel:#fbfffd;--ink:#10201b;--muted:#587066;--line:#cfe6db;--primary:#047857;--primary-2:#10b981;--soft:#dcfce7;--good:#047857;--danger:#be123c;--sidebar:#06281f;--sidebar-deep:#064e3b;--logo-bg:#ecfdf5;--logo-ink:#047857;--table-head:#ecfdf5;--focus:rgba(16,185,129,.18)}
body.theme-terracotta{--bg:#fbf1ec;--panel:#fffaf7;--ink:#2a1711;--muted:#7c6357;--line:#efd6cb;--primary:#c2410c;--primary-2:#fb923c;--soft:#ffedd5;--good:#15803d;--danger:#b91c1c;--sidebar:#2c1810;--sidebar-deep:#7c2d12;--logo-bg:#fff7ed;--logo-ink:#c2410c;--table-head:#fff7ed;--focus:rgba(194,65,12,.18)}
body.theme-indigo{--bg:#f2f5ff;--panel:#ffffff;--ink:#172033;--muted:#667085;--line:#dbe4ff;--primary:#4f46e5;--primary-2:#7c3aed;--soft:#eef2ff;--good:#047857;--danger:#c01048;--sidebar:#111827;--sidebar-deep:#312e81;--logo-bg:#eef2ff;--logo-ink:#4338ca;--table-head:#f5f7ff;--focus:rgba(79,70,229,.18)}
body{background:radial-gradient(circle at top left, rgba(255,255,255,.75), transparent 28rem), var(--bg);transition:background .2s ease,color .2s ease}.sidebar{background:linear-gradient(180deg,var(--sidebar),var(--sidebar-deep));box-shadow:12px 0 30px rgba(15,23,42,.10)}.logo{background:var(--logo-bg);color:var(--logo-ink);box-shadow:0 10px 25px rgba(0,0,0,.14)}.brand h1{letter-spacing:.01em}.panel{backdrop-filter:blur(8px)}.panel select,.searchbox input,#themeSelect{border-color:var(--line)}.panel select:focus,.searchbox input:focus,#productForm input:focus,#productForm textarea:focus,#adminLoginForm input:focus,.quickSearchBody input[type="search"]:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--focus)}.btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));border-color:transparent}.btn.danger{border-color:#fecdd3}.badge{background:var(--soft);color:var(--primary)}th{background:var(--table-head);color:#344054}.tablewrap,.summaryHead,.summaryCard,.summaryPanel{box-shadow:0 14px 28px rgba(16,24,40,.06)}.summaryCard.accent{border-color:color-mix(in srgb, var(--primary) 30%, var(--line));background:linear-gradient(135deg,var(--soft),#fff)}.summaryCard.accent strong{color:var(--primary)}
.accordion label[for="themeSelect"]{margin-bottom:8px}.accordion select#themeSelect{margin-bottom:10px}.summaryDropdown{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 24px rgba(16,24,40,.06);overflow:hidden}.summaryDropdown summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:14px 16px;background:linear-gradient(135deg,var(--panel),var(--soft));border-bottom:1px solid transparent}.summaryDropdown[open] summary{border-bottom-color:var(--line)}.summaryDropdown summary::-webkit-details-marker{display:none}.summaryDropdownTitle strong{display:block;font-size:16px}.summaryDropdownTitle span{display:block;margin-top:3px;font-size:12px;color:var(--muted);line-height:1.4}.summaryDropdownCue{white-space:nowrap;border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 10px;color:var(--primary);font-size:12px;font-weight:800}.summaryDropdown[open] .summaryDropdownCue{color:var(--muted)}.summaryDropdown[open] .summaryDropdownCue::before{content:'Tutup ';}.summaryDropdownBody{display:grid;gap:12px;padding:14px}.summaryDropdownActions{display:flex;justify-content:flex-end}.summaryCardsCompact{grid-template-columns:repeat(4,minmax(0,1fr))}.summaryCardsCompact .summaryCard{padding:11px}.summaryCardsCompact .summaryCard strong{font-size:17px}.listingNotice{background:linear-gradient(135deg,var(--soft),#fff);border-color:color-mix(in srgb, var(--primary) 28%, var(--line));color:var(--primary)}.quickSearchBody input[type="search"]{border-color:color-mix(in srgb, var(--primary) 35%, var(--line))}@media(max-width:1100px){.summaryCardsCompact{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.summaryDropdown summary{display:block}.summaryDropdownCue{display:inline-block;margin-top:10px}.summaryCardsCompact{grid-template-columns:1fr}.summaryDropdownActions .btn{width:100%}}

/* v13: sticky top header */
.content{padding-top:0}
.topbar{
  position:sticky;
  top:0;
  z-index:80;
  margin:0 -18px 18px -18px;
  padding:16px 18px;
  background:color-mix(in srgb, var(--bg) 88%, #fff 12%);
  border-bottom:1px solid var(--line);
  box-shadow:0 8px 24px rgba(16,24,40,.08);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.topbar h2{line-height:1.15}
.topbar .searchbox input{background:rgba(255,255,255,.94)}
.tablewrap th{top:0;z-index:3}
@media(max-width:900px){
  .topbar{position:sticky;top:0;margin:0 -18px 16px -18px;padding:14px 18px}
}

/* v14: mobile friendly layout */
.mobileMenuBtn{display:none}
.mobileSidebarBackdrop{display:none}
.topbarTitle{min-width:0}

@media(max-width:900px){
  body.sidebarOpen{overflow:hidden}
  .layout{display:block;min-height:100vh}
  .compactSidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:min(86vw,330px);
    height:100dvh;
    max-height:100dvh;
    transform:translateX(-108%);
    transition:transform .22s ease;
    z-index:220;
    border-radius:0 22px 22px 0;
    box-shadow:24px 0 60px rgba(15,23,42,.32);
    padding:14px 12px 22px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  body.sidebarOpen .compactSidebar{transform:translateX(0)}
  .mobileSidebarBackdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.48);
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease;
    z-index:210;
    backdrop-filter:blur(2px);
  }
  body.sidebarOpen .mobileSidebarBackdrop{opacity:1;pointer-events:auto}
  .mobileMenuBtn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;min-height:38px}
  .content{padding:0 12px 18px;min-width:0}
  .topbar{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:10px 12px;
    align-items:center;
    margin:0 -12px 14px;
    padding:12px;
    z-index:120;
  }
  .topbarTitle h2{font-size:20px;margin:0;letter-spacing:-.01em}
  .topbarTitle p{font-size:12px;line-height:1.35;margin-top:4px;max-width:none}
  .searchbox{grid-column:1 / -1;display:grid;grid-template-columns:1fr auto;gap:8px;min-width:0;margin-top:0;width:100%}
  .searchbox input{min-width:0;width:100%;font-size:14px;padding:11px 12px}
  .searchOpenBtn{margin-top:0;width:auto;min-height:42px}
  .summaryDashboard{gap:10px;margin-bottom:10px}
  .summaryHead{padding:14px;border-radius:16px}
  .summaryHead h3{font-size:18px}
  .summaryHead p{font-size:12px}
  .summaryCards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .summaryCard{padding:12px;border-radius:14px}
  .summaryCard span{font-size:11px}.summaryCard strong{font-size:18px}
  .summarySplit{grid-template-columns:1fr;gap:10px}
  .summaryPanel{padding:12px;border-radius:16px}
  .listingNotice{font-size:12px;border-radius:14px;padding:11px 12px}
  dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
  .dialogBody{max-height:100dvh;padding:16px;overflow:auto}
  .dialogHeader{display:grid;grid-template-columns:1fr auto;gap:12px}
  .dialogHeader h3{font-size:18px}.dialogHeader p{font-size:12px;line-height:1.4}
  .quickSearchDialog{width:100vw;max-width:100vw;height:100dvh}
  .quickSearchBody{padding:16px}.quickSearchHeader h3{font-size:20px}
  .quickSearchBody input[type="search"]{font-size:18px;padding:15px 16px;border-radius:16px}
  .grid2{grid-template-columns:1fr;gap:10px}
  menu{position:sticky;bottom:0;background:var(--panel);padding-top:10px}
}

@media(max-width:680px){
  #productTableWrap{
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
    overflow:visible;
  }
  #productTable{display:block;min-width:0;width:100%;table-layout:auto}
  #productTable thead{display:none}
  #productTable tbody{display:grid;gap:12px}
  #productTable tr{
    display:block;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 22px rgba(16,24,40,.06);
  }
  #productTable td{
    display:grid;
    grid-template-columns:104px minmax(0,1fr);
    gap:10px;
    align-items:start;
    border-bottom:1px solid var(--line);
    padding:9px 12px;
    font-size:13px;
    word-break:break-word;
  }
  #productTable td:last-child{border-bottom:0}
  #productTable td::before{
    content:attr(data-label);
    color:var(--muted);
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.02em;
  }
  #productTable td[data-label="Produk & Packing"]{
    grid-template-columns:1fr;
    background:linear-gradient(135deg,var(--soft),#fff);
  }
  #productTable td[data-label="Produk & Packing"]::before{display:none}
  #productTable td[data-label="Produk & Packing"] strong{font-size:15px;line-height:1.35;color:var(--ink)}
  #productTable td[data-label="Aksi"]{display:flex;gap:8px;justify-content:flex-end;padding:10px 12px;background:#fff}
  #productTable td[data-label="Aksi"]::before{display:none}
  #productTable td[data-label="Aksi"] .btn{flex:1;max-width:120px}
  body.viewer #productTable td[data-label="Aksi"]{display:none!important}
  .badge{white-space:normal;line-height:1.3}
  .price{font-size:14px}
  .summaryCards,.summaryCardsCompact{grid-template-columns:1fr 1fr!important}
  .summaryDropdown summary{padding:12px}.summaryDropdownTitle strong{font-size:14px}.summaryDropdownTitle span{font-size:11px}
  .summaryDropdownBody{padding:12px;gap:10px}
  .bulkHeader{display:block}.bulkQuickActions{justify-content:flex-start;margin-top:10px}.bulkQuickActions .btn{flex:1}
  .bulkGrid,.bulkFormGrid{grid-template-columns:1fr}.bulkBox{padding:12px}.bulkBox .btn{width:100%}
  .dupToolbar{display:grid;gap:10px}.dupToolbar label,.missingToolbar label{min-width:0}.dupToolbar .btn{width:100%}
  .dupActions{display:grid;grid-template-columns:1fr;gap:8px}.dupActions .btn{width:100%}
  .dupCardHead{display:grid;gap:8px}.dupCardHead .dupActions{grid-template-columns:1fr}
  .dupTableWrap,.missingTableWrap{overflow:auto;-webkit-overflow-scrolling:touch}
  .dupTable,.missingTable{min-width:760px}
  #productForm{padding:16px}.loginDialog #adminLoginForm,#adminLoginForm{padding:16px}
}

@media(max-width:420px){
  .topbar{grid-template-columns:1fr;gap:8px}
  .mobileMenuBtn{width:100%;justify-content:center}
  .searchbox{grid-template-columns:1fr}.searchOpenBtn{width:100%}
  .topbarTitle h2{font-size:19px}.topbarTitle p{display:none}
  .summaryCards,.summaryCardsCompact{grid-template-columns:1fr!important}
  #productTable td{grid-template-columns:92px minmax(0,1fr);padding:8px 10px}
  .compactSidebar{width:92vw}
}


/* v15: mobile search result cards without horizontal scroll */
.mobilePriceLine{display:none}
@media(max-width:680px){
  #productTableWrap{width:100%;max-width:100%;overflow:visible!important}
  #productTable{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;border-collapse:separate!important}
  #productTable thead{display:none!important}
  #productTable tbody{display:grid!important;width:100%!important;max-width:100%!important;gap:12px}
  #productTable tr{display:grid!important;width:100%!important;max-width:100%!important;grid-template-columns:1fr;overflow:hidden}
  #productTable td{display:grid!important;width:100%!important;max-width:100%!important;min-width:0!important;grid-template-columns:96px minmax(0,1fr);align-items:start;white-space:normal!important;overflow-wrap:anywhere;word-break:normal}
  #productTable td[data-label="Produk & Packing"]{display:block!important;width:100%;padding:14px;background:linear-gradient(135deg,var(--soft),#fff);border-bottom:1px solid var(--line)}
  #productTable td[data-label="Produk & Packing"] strong{display:block;font-size:16px;line-height:1.35;margin:0 0 6px}
  #productTable td[data-label="Produk & Packing"] .subtext{font-size:12px;margin-top:6px;color:var(--muted)}
  .mobilePriceLine{display:flex;align-items:center;gap:8px;margin:7px 0 4px;font-size:13px;color:var(--muted)}
  .mobilePriceLine strong{display:inline!important;margin:0!important;font-size:16px!important;color:var(--primary);line-height:1.2!important}
  .mobilePriceLine span{font-size:11px;text-transform:uppercase;letter-spacing:.03em;font-weight:800;color:var(--muted)}
  .mobilePriceLine.muted strong{font-size:13px!important;color:var(--muted)}
  #productTable td[data-label="Harga"]{display:none!important}
  #productTable td[data-label="ID"]{display:none!important}
  #productTable td[data-label="Kategori"]{grid-template-columns:96px minmax(0,1fr)}
  #productTable td[data-label="Sumber"]{grid-template-columns:96px minmax(0,1fr)}
  #productTable td[data-label="Status"]{grid-template-columns:96px minmax(0,1fr)}
  #productTable td[data-label="Aksi"]{display:flex!important;width:100%;justify-content:stretch;gap:8px;padding:11px 12px;background:#fff}
  #productTable td[data-label="Aksi"] .btn{max-width:none;flex:1;min-height:40px}
  body.viewer #productTable td[data-label="Aksi"]{display:none!important}
}
@media(max-width:420px){
  #productTable td{grid-template-columns:82px minmax(0,1fr)!important;font-size:12.5px}
  #productTable td[data-label="Produk & Packing"] strong{font-size:15px}
  .mobilePriceLine strong{font-size:15px!important}
}

/* v16: true mobile-first search cards and compact dropdown sidebar */
html,body{max-width:100%;overflow-x:hidden}
.mobileSearchHero{display:none}
.mobileProductCards{display:none}

@media(min-width:681px){
  .mobileProductCards{display:none!important}
}

@media(max-width:900px){
  .compactSidebar .accordion{margin-bottom:8px;border-radius:14px}
  .compactSidebar .accordion summary{padding:11px 12px;font-size:13px;display:flex;align-items:center;justify-content:space-between}
  .compactSidebar .accordion summary:after{float:none;margin-left:auto}
  .compactSidebar .accordion:not([open]){padding-bottom:0}
  .compactSidebar .accordion:not([open]) label,
  .compactSidebar .accordion:not([open]) select,
  .compactSidebar .accordion:not([open]) .btn,
  .compactSidebar .accordion:not([open]) a.btn{display:none!important}
  .compactBrand{gap:9px;margin-bottom:10px}
  .compactBrand .logo{width:34px;height:34px}
  .compactBrand h1{font-size:16px}
  .compactBrand p{font-size:11px;margin-top:2px}
  .adminMiniPanel{padding:9px;border-radius:12px;margin-bottom:8px;gap:6px}
  .adminMiniPanel strong{font-size:12px}.adminMiniPanel span{font-size:10.5px}
  .adminMiniPanel .btn{min-height:34px;padding:7px 8px}
  .panel select{padding:10px 11px}
  .sidebar .btn.full{min-height:38px;padding:9px 10px}
}

@media(max-width:680px){
  .content{width:100%;max-width:100%;padding-left:10px;padding-right:10px}
  .topbar{margin-left:-10px;margin-right:-10px;padding-left:10px;padding-right:10px}
  .topbarTitle h2{font-size:18px}
  .topbarTitle p{display:none}
  .searchbox{grid-template-columns:1fr;gap:7px}
  .searchbox input{border-radius:14px;min-height:42px}
  .searchOpenBtn{display:none}

  .mobileSearchHero{
    display:grid;
    gap:12px;
    margin:0 0 12px;
    background:linear-gradient(135deg,var(--panel),var(--soft));
    border:1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
    border-radius:20px;
    padding:15px;
    box-shadow:0 12px 24px rgba(16,24,40,.07);
  }
  .mobileSearchHeroText strong{display:block;font-size:18px;line-height:1.25;color:var(--ink)}
  .mobileSearchHeroText span{display:block;margin-top:5px;color:var(--muted);font-size:12px;line-height:1.45}
  #mobileHeroSearchInput{
    width:100%;
    max-width:100%;
    border:2px solid color-mix(in srgb, var(--primary) 34%, var(--line));
    border-radius:16px;
    padding:14px 15px;
    font:inherit;
    font-size:16px;
    font-weight:750;
    background:#fff;
    color:var(--ink);
    outline:none;
  }
  #mobileHeroSearchInput:focus{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent)}

  #productTableWrap{display:none!important}
  .mobileProductCards{
    width:100%;
    max-width:100%;
    grid-template-columns:minmax(0,1fr);
    gap:12px;
    overflow:hidden;
  }
  .mobileProductCard{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:hidden;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:0 10px 22px rgba(16,24,40,.07);
  }
  .mobileCardMain{
    padding:14px;
    background:linear-gradient(135deg,var(--soft),#fff);
    border-bottom:1px solid var(--line);
    min-width:0;
  }
  .mobileCardId{
    display:inline-flex;
    align-items:center;
    margin-bottom:7px;
    border:1px solid color-mix(in srgb, var(--primary) 20%, var(--line));
    background:#fff;
    color:var(--muted);
    border-radius:999px;
    padding:4px 8px;
    font-size:10.5px;
    font-weight:800;
    letter-spacing:.02em;
  }
  .mobileProductCard h3{
    margin:0;
    font-size:16px;
    line-height:1.35;
    color:var(--ink);
    overflow-wrap:anywhere;
    word-break:normal;
  }
  .mobileCardPrice{
    margin-top:9px;
    display:flex;
    align-items:baseline;
    gap:8px;
    flex-wrap:wrap;
  }
  .mobileCardPrice span{
    color:var(--muted);
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
  }
  .mobileCardPrice strong{
    color:var(--primary);
    font-size:20px;
    line-height:1.15;
  }
  .mobileCardPrice.muted strong{color:var(--muted);font-size:14px}
  .mobileCardPacking{
    margin-top:8px;
    color:#344054;
    font-size:13px;
    line-height:1.4;
    overflow-wrap:anywhere;
  }
  .mobileCardPacking.muted{color:var(--muted)}
  .mobileCardMeta{
    display:grid;
    grid-template-columns:1fr;
    gap:0;
  }
  .mobileCardMeta div{
    display:grid;
    grid-template-columns:82px minmax(0,1fr);
    gap:10px;
    padding:10px 14px;
    border-bottom:1px solid var(--line);
    min-width:0;
  }
  .mobileCardMeta div:last-child{border-bottom:0}
  .mobileCardMeta span{
    color:var(--muted);
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.03em;
  }
  .mobileCardMeta strong{
    color:var(--ink);
    font-size:13px;
    line-height:1.35;
    overflow-wrap:anywhere;
    min-width:0;
  }
  .mobileCardActions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:12px 14px;
    background:#fff;
    border-top:1px solid var(--line);
  }
  .mobileCardActions .btn{min-height:40px;width:100%;max-width:none}
  .mobileEmptyCard{
    background:var(--panel);
    border:1px dashed var(--line);
    border-radius:18px;
    padding:18px;
    text-align:center;
    color:var(--muted);
    font-size:13px;
  }
  .summaryDashboard,.listingNotice{width:100%;max-width:100%}
  .summaryHead,.summaryCard,.summaryPanel,.summaryDropdown{max-width:100%;overflow:hidden}
}

@media(max-width:420px){
  .mobileCardMeta div{grid-template-columns:74px minmax(0,1fr);padding:9px 12px}
  .mobileProductCard h3{font-size:15px}
  .mobileCardPrice strong{font-size:18px}
  .mobileSearchHero{padding:13px;border-radius:18px}
  .compactSidebar{width:88vw;max-width:310px}
}


/* v17: stricter mobile view, hidden sidebar dropdowns, no horizontal product scroll */
@media(max-width:980px){
  html,body{width:100%;max-width:100%;overflow-x:hidden!important}
  body.sidebarOpen{overflow:hidden}
  .layout{display:block;min-height:100vh;width:100%;max-width:100%;overflow-x:hidden}
  .compactSidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:min(88vw,330px);
    height:100dvh;
    max-height:100dvh;
    transform:translateX(-108%);
    transition:transform .22s ease;
    z-index:220;
    border-radius:0 22px 22px 0;
    box-shadow:24px 0 60px rgba(15,23,42,.32);
    padding:14px 12px 22px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  body.sidebarOpen .compactSidebar{transform:translateX(0)}
  .mobileSidebarBackdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.48);
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease;
    z-index:210;
    backdrop-filter:blur(2px);
  }
  body.sidebarOpen .mobileSidebarBackdrop{opacity:1;pointer-events:auto}
  .mobileMenuBtn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;min-height:38px}
  .content{width:100%;max-width:100%;min-width:0;padding:0 10px 18px;overflow-x:hidden}
  .topbar{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:10px 12px;
    align-items:center;
    margin:0 -10px 14px;
    padding:12px 10px;
    z-index:120;
  }
  .topbarTitle{min-width:0;max-width:100%}
  .topbarTitle h2{font-size:18px;margin:0;line-height:1.18;letter-spacing:-.01em}
  .topbarTitle p{display:none}
  .searchbox{grid-column:1 / -1;display:grid;grid-template-columns:1fr;gap:7px;min-width:0;width:100%;max-width:100%;margin-top:0}
  .searchbox input{min-width:0;width:100%;max-width:100%;font-size:15px;padding:12px 13px;border-radius:14px;min-height:44px}
  .searchOpenBtn{display:none}

  /* Sidebar sections start collapsed. Their controls appear only after the section is tapped. */
  .compactSidebar .accordion{margin-bottom:8px;border-radius:14px;overflow:hidden}
  .compactSidebar .accordion summary{padding:11px 12px;font-size:13px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}
  .compactSidebar .accordion:not([open]){padding-bottom:0}
  .compactSidebar .accordion:not([open]) > *:not(summary){display:none!important}
  .compactSidebar .accordion[open] > *:not(summary){display:block}
  .compactSidebar .accordion[open] .btn.full,
  .compactSidebar .accordion[open] a.btn.full{display:flex!important}
  .compactBrand{gap:9px;margin-bottom:10px}
  .compactBrand .logo{width:34px;height:34px}
  .compactBrand h1{font-size:16px}
  .compactBrand p{font-size:11px;margin-top:2px}
  .adminMiniPanel{padding:9px;border-radius:12px;margin-bottom:8px;gap:6px}
  .adminMiniPanel strong{font-size:12px}.adminMiniPanel span{font-size:10.5px}
  .adminMiniPanel .btn{min-height:34px;padding:7px 8px}
  .panel select{padding:10px 11px}
  .sidebar .btn.full{min-height:38px;padding:9px 10px}

  .mobileSearchHero{
    display:grid;
    width:100%;
    max-width:100%;
    gap:12px;
    margin:0 0 12px;
    background:linear-gradient(135deg,var(--panel),var(--soft));
    border:1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
    border-radius:20px;
    padding:15px;
    box-shadow:0 12px 24px rgba(16,24,40,.07);
  }
  .mobileSearchHeroText strong{display:block;font-size:18px;line-height:1.25;color:var(--ink)}
  .mobileSearchHeroText span{display:block;margin-top:5px;color:var(--muted);font-size:12px;line-height:1.45}
  #mobileHeroSearchInput{
    width:100%;max-width:100%;box-sizing:border-box;
    border:2px solid color-mix(in srgb, var(--primary) 34%, var(--line));
    border-radius:16px;padding:14px 15px;font:inherit;font-size:16px;font-weight:750;background:#fff;color:var(--ink);outline:none;
  }
  #mobileHeroSearchInput:focus{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent)}

  #productTableWrap{display:none!important;width:0!important;max-width:0!important;overflow:hidden!important}
  #productTable{display:none!important}
  .mobileProductCards{
    width:100%;
    max-width:100%;
    min-width:0;
    grid-template-columns:minmax(0,1fr);
    gap:12px;
    overflow:visible;
    box-sizing:border-box;
  }
  .mobileProductCard{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
    overflow:hidden;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:0 10px 22px rgba(16,24,40,.07);
  }
  .mobileCardMain{padding:14px;background:linear-gradient(135deg,var(--soft),#fff);border-bottom:1px solid var(--line);min-width:0;max-width:100%;box-sizing:border-box}
  .mobileCardId{display:inline-flex;align-items:center;margin-bottom:7px;border:1px solid color-mix(in srgb, var(--primary) 20%, var(--line));background:#fff;color:var(--muted);border-radius:999px;padding:4px 8px;font-size:10.5px;font-weight:800;letter-spacing:.02em}
  .mobileProductCard h3{margin:0;font-size:16px;line-height:1.35;color:var(--ink);overflow-wrap:anywhere;word-break:normal;max-width:100%}
  .mobileCardPrice{margin-top:9px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0;max-width:100%}
  .mobileCardPrice span{color:var(--muted);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
  .mobileCardPrice strong{color:var(--primary);font-size:20px;line-height:1.15;overflow-wrap:anywhere}
  .mobileCardPrice.muted strong{color:var(--muted);font-size:14px}
  .mobileCardPacking{margin-top:8px;color:#344054;font-size:13px;line-height:1.4;overflow-wrap:anywhere;max-width:100%}
  .mobileCardPacking.muted{color:var(--muted)}
  .mobileCardMeta{display:grid;grid-template-columns:1fr;gap:0;max-width:100%}
  .mobileCardMeta div{display:grid;grid-template-columns:82px minmax(0,1fr);gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);min-width:0;max-width:100%;box-sizing:border-box}
  .mobileCardMeta div:last-child{border-bottom:0}
  .mobileCardMeta span{color:var(--muted);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.03em;min-width:0}
  .mobileCardMeta strong{color:var(--ink);font-size:13px;line-height:1.35;overflow-wrap:anywhere;min-width:0;max-width:100%}
  .mobileCardActions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 14px;background:#fff;border-top:1px solid var(--line);max-width:100%;box-sizing:border-box}
  .mobileCardActions .btn{min-height:40px;width:100%;max-width:none}
  .mobileEmptyCard{background:var(--panel);border:1px dashed var(--line);border-radius:18px;padding:18px;text-align:center;color:var(--muted);font-size:13px}

  .summaryDashboard,.listingNotice{width:100%;max-width:100%;box-sizing:border-box;overflow:hidden}
  .summaryHead,.summaryCard,.summaryPanel,.summaryDropdown{max-width:100%;overflow:hidden;box-sizing:border-box}
  dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
  .dialogBody{max-height:100dvh;padding:16px;overflow:auto}
}
@media(max-width:420px){
  .topbar{grid-template-columns:1fr;gap:8px}
  .mobileMenuBtn{width:100%;justify-content:center}
  .mobileCardMeta div{grid-template-columns:74px minmax(0,1fr);padding:9px 12px}
  .mobileProductCard h3{font-size:15px}
  .mobileCardPrice strong{font-size:18px}
  .mobileSearchHero{padding:13px;border-radius:18px}
  .compactSidebar{width:88vw;max-width:310px}
}

/* v18: Final mobile search card layout refinement */
.mobileSourceLine{display:none}
@media(max-width:980px){
  *,*::before,*::after{box-sizing:border-box}
  html,body,.layout,.content{max-width:100%!important;overflow-x:hidden!important}
  #productTableWrap,#productTable{display:none!important;width:0!important;max-width:0!important;min-width:0!important;overflow:hidden!important}
  #mobileProductCards.mobileProductCards{
    display:grid;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px;
    overflow-x:hidden!important;
  }
  .mobileProductCard{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
    border-radius:18px;
  }
  .mobileCardMain,
  .mobileCardMeta,
  .mobileCardActions{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .mobileProductCard h3{
    margin-bottom:10px;
    overflow-wrap:anywhere;
    word-break:normal;
  }
  .mobileCardPacking,
  .mobileCardPrice,
  .mobileCardSource{
    display:grid!important;
    grid-template-columns:72px minmax(0,1fr)!important;
    align-items:start!important;
    gap:8px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-top:8px!important;
    padding:0!important;
    color:#344054;
    font-size:13px;
    line-height:1.35;
    overflow-wrap:anywhere;
  }
  .mobileCardPacking span,
  .mobileCardPrice span,
  .mobileCardSource span{
    color:var(--muted)!important;
    font-size:10.5px!important;
    font-weight:900!important;
    text-transform:uppercase!important;
    letter-spacing:.035em!important;
    line-height:1.35!important;
    min-width:0!important;
  }
  .mobileCardPacking strong,
  .mobileCardPrice strong,
  .mobileCardSource strong{
    display:block!important;
    min-width:0!important;
    max-width:100%!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
    color:var(--ink);
    font-size:13px;
    line-height:1.35;
  }
  .mobileCardPrice strong{
    color:var(--primary)!important;
    font-size:18px!important;
    font-weight:900!important;
    line-height:1.15!important;
  }
  .mobileCardPrice.muted strong,
  .mobileCardPacking.muted strong{
    color:var(--muted)!important;
    font-size:13px!important;
    font-weight:700!important;
  }
  .mobileCardSource strong{
    color:#475467!important;
    font-weight:800!important;
  }
  .mobileCardMeta div{
    grid-template-columns:72px minmax(0,1fr)!important;
  }
  .mobileSourceLine{display:flex;align-items:center;gap:8px;margin:4px 0 0;font-size:13px;color:var(--muted)}
  .mobileSourceLine span{font-size:11px;text-transform:uppercase;letter-spacing:.03em;font-weight:800;color:var(--muted)}
  .mobileSourceLine strong{font-size:13px;color:#475467;line-height:1.25;overflow-wrap:anywhere}
}
@media(max-width:420px){
  .mobileCardPacking,
  .mobileCardPrice,
  .mobileCardSource,
  .mobileCardMeta div{grid-template-columns:66px minmax(0,1fr)!important}
  .mobileCardPrice strong{font-size:17px!important}
}


/* v19: hard mobile-card enforcement and cache-bust fix */
@media(max-width:1200px){
  html,body{width:100%;max-width:100%;overflow-x:hidden!important}
}
body.mobileCardMode,
body.mobileCardMode .layout,
body.mobileCardMode .content{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-x:hidden!important;
}
body.mobileCardMode .layout{display:block!important}
body.mobileCardMode #productTableWrap,
body.mobileCardMode #productTable{
  display:none!important;
  width:0!important;
  max-width:0!important;
  min-width:0!important;
  height:0!important;
  overflow:hidden!important;
  visibility:hidden!important;
}
body.mobileCardMode #mobileProductCards.mobileProductCards{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  gap:12px!important;
  overflow-x:hidden!important;
}
body.mobileCardMode .mobileProductCard,
body.mobileCardMode .mobileProductCard *,
body.mobileCardMode .mobileCardMain,
body.mobileCardMode .mobileCardMeta,
body.mobileCardMode .mobileCardActions{
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
body.mobileCardMode .mobileProductCard{
  display:block!important;
  width:100%!important;
  overflow:hidden!important;
  border-radius:18px!important;
}
body.mobileCardMode .mobileCardMain{padding:14px!important}
body.mobileCardMode .mobileProductCard h3{
  margin:0 0 10px!important;
  font-size:16px!important;
  line-height:1.35!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}
body.mobileCardMode .mobileCardPacking,
body.mobileCardMode .mobileCardPrice,
body.mobileCardMode .mobileCardSource{
  display:grid!important;
  grid-template-columns:72px minmax(0,1fr)!important;
  gap:8px!important;
  align-items:start!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:8px 0 0!important;
  padding:0!important;
  overflow:hidden!important;
}
body.mobileCardMode .mobileCardPacking span,
body.mobileCardMode .mobileCardPrice span,
body.mobileCardMode .mobileCardSource span,
body.mobileCardMode .mobileCardMeta span{
  color:var(--muted)!important;
  font-size:10.5px!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  letter-spacing:.035em!important;
  line-height:1.35!important;
}
body.mobileCardMode .mobileCardPacking strong,
body.mobileCardMode .mobileCardPrice strong,
body.mobileCardMode .mobileCardSource strong,
body.mobileCardMode .mobileCardMeta strong{
  display:block!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  line-height:1.35!important;
}
body.mobileCardMode .mobileCardPrice strong{
  color:var(--primary)!important;
  font-size:18px!important;
  font-weight:900!important;
}
body.mobileCardMode .mobileCardSource strong{color:#475467!important;font-weight:800!important}
body.mobileCardMode .mobileCardMeta div{
  display:grid!important;
  grid-template-columns:72px minmax(0,1fr)!important;
  gap:8px!important;
  padding:10px 14px!important;
}
body.mobileCardMode .mobileCardActions{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
  padding:12px 14px!important;
}
body.mobileCardMode .mobileCardActions .btn{width:100%!important;min-height:40px!important}
body.mobileCardMode .summaryDashboard,
body.mobileCardMode .listingNotice,
body.mobileCardMode .summaryDropdown,
body.mobileCardMode .summaryHead,
body.mobileCardMode .summaryCard,
body.mobileCardMode .summaryPanel{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
body.mobileCardMode .compactSidebar{
  position:fixed!important;
  inset:0 auto 0 0!important;
  width:min(88vw,330px)!important;
  height:100dvh!important;
  max-height:100dvh!important;
  transform:translateX(-108%)!important;
  transition:transform .22s ease!important;
  z-index:220!important;
  border-radius:0 22px 22px 0!important;
  box-shadow:24px 0 60px rgba(15,23,42,.32)!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
}
body.mobileCardMode.sidebarOpen .compactSidebar{transform:translateX(0)!important}
body.mobileCardMode .mobileSidebarBackdrop{
  display:block!important;
  position:fixed!important;
  inset:0!important;
  background:rgba(15,23,42,.48)!important;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease!important;
  z-index:210!important;
}
body.mobileCardMode.sidebarOpen .mobileSidebarBackdrop{opacity:1!important;pointer-events:auto!important}
body.mobileCardMode .mobileMenuBtn{display:inline-flex!important}
@media(max-width:420px){
  body.mobileCardMode .mobileCardPacking,
  body.mobileCardMode .mobileCardPrice,
  body.mobileCardMode .mobileCardSource,
  body.mobileCardMode .mobileCardMeta div{grid-template-columns:66px minmax(0,1fr)!important}
  body.mobileCardMode .mobileProductCard h3{font-size:15px!important}
  body.mobileCardMode .mobileCardPrice strong{font-size:17px!important}
}

/* v20: CSS-only mobile enforcement. This does not depend on body.mobileCardMode. */
@media (max-width: 1200px), (pointer: coarse) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  .layout {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }
  .content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 20px !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  .topbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
  }
  .mobileMenuBtn {
    display: inline-flex !important;
    width: fit-content !important;
    min-height: 42px !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .searchbox {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 10px !important;
  }
  .searchbox input,
  .mobileSearchHero input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .searchOpenBtn { width: 100% !important; }

  /* Sidebar is hidden by default on phone. It appears only after tapping Menu. */
  .compactSidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(88vw, 330px) !important;
    max-width: 88vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    transform: translateX(-112%) !important;
    transition: transform .22s ease !important;
    z-index: 220 !important;
    border-radius: 0 22px 22px 0 !important;
    box-shadow: 24px 0 60px rgba(15,23,42,.32) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.sidebarOpen .compactSidebar {
    transform: translateX(0) !important;
  }
  .mobileSidebarBackdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15,23,42,.48) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .22s ease !important;
    z-index: 210 !important;
  }
  body.sidebarOpen .mobileSidebarBackdrop {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  #mainSidebar details.accordion:not([open]) > *:not(summary) {
    display: none !important;
  }

  /* Product result: never use the desktop table on phone. */
  #productTableWrap,
  #productTable {
    display: none !important;
    width: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
  }
  #mobileProductCards.mobileProductCards {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  #mobileProductCards:empty { display: none !important; }
  .mobileProductCard {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    background: var(--panel) !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 10px 22px rgba(16,24,40,.06) !important;
    box-sizing: border-box !important;
  }
  .mobileProductCard,
  .mobileProductCard * {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }
  .mobileCardMain { padding: 14px !important; }
  .mobileCardId {
    display: inline-flex !important;
    width: fit-content !important;
    margin-bottom: 8px !important;
    border-radius: 999px !important;
    padding: 4px 8px !important;
    background: var(--soft) !important;
    color: var(--primary) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
  }
  .mobileProductCard h3 {
    margin: 0 0 10px !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    color: var(--ink) !important;
    word-break: normal !important;
  }
  .mobileCardPacking,
  .mobileCardPrice,
  .mobileCardSource,
  .mobileCardMeta div {
    display: grid !important;
    grid-template-columns: 74px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
  }
  .mobileCardPacking span,
  .mobileCardPrice span,
  .mobileCardSource span,
  .mobileCardMeta span {
    color: var(--muted) !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .035em !important;
    line-height: 1.35 !important;
  }
  .mobileCardPacking strong,
  .mobileCardPrice strong,
  .mobileCardSource strong,
  .mobileCardMeta strong {
    display: block !important;
    line-height: 1.35 !important;
    word-break: normal !important;
  }
  .mobileCardPrice strong {
    color: var(--primary) !important;
    font-size: 18px !important;
    font-weight: 900 !important;
  }
  .mobileCardSource strong {
    color: #475467 !important;
    font-weight: 800 !important;
  }
  .mobileCardMeta {
    display: grid !important;
    gap: 0 !important;
    border-top: 1px solid var(--line) !important;
    background: rgba(255,255,255,.55) !important;
  }
  .mobileCardMeta div {
    padding: 10px 14px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .mobileCardMeta div:last-child { border-bottom: 0 !important; }
  .mobileCardActions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 12px 14px !important;
    border-top: 1px solid var(--line) !important;
  }
  .mobileCardActions .btn { width: 100% !important; min-height: 40px !important; }
}
@media (max-width: 430px) {
  .content { padding: 16px !important; }
  .mobileCardPacking,
  .mobileCardPrice,
  .mobileCardSource,
  .mobileCardMeta div {
    grid-template-columns: 66px minmax(0, 1fr) !important;
  }
  .mobileProductCard h3 { font-size: 15.5px !important; }
  .mobileCardPrice strong { font-size: 17px !important; }
}

/* v21: mobile marketplace-style cards. No horizontal scroll. No image. */
@media screen and (max-width: 1600px), (hover: none), (pointer: coarse) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body.mobileCardMode,
  body.mobileCardMode .layout,
  body.mobileCardMode .content,
  .layout,
  .content {
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .content {
    padding-left: clamp(14px, 4vw, 28px) !important;
    padding-right: clamp(14px, 4vw, 28px) !important;
  }

  .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
    padding: 12px 0 14px !important;
    margin: 0 0 12px !important;
    background: color-mix(in srgb, var(--bg) 92%, white) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent) !important;
    border-radius: 0 !important;
  }

  .mobileMenuBtn {
    display: inline-flex !important;
    margin-bottom: 10px !important;
    min-height: 40px !important;
    border-radius: 999px !important;
  }

  .topbarTitle h2 {
    font-size: 22px !important;
    line-height: 1.15 !important;
    margin-bottom: 4px !important;
  }

  .topbarTitle p {
    display: none !important;
  }

  .searchbox {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-top: 10px !important;
  }

  #searchInput,
  #mobileHeroSearchInput {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 54px !important;
    border-radius: 18px !important;
    font-size: 16px !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  .searchOpenBtn {
    width: 100% !important;
    min-height: 42px !important;
    border-radius: 16px !important;
  }

  .mobileSearchHero {
    display: none !important;
  }

  .summaryDashboard,
  .summaryDashboard *,
  .summaryDropdown,
  .summaryDropdown *,
  .listingNotice {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
  }

  #productTableWrap,
  #productTable {
    display: none !important;
    width: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #mobileProductCards.mobileProductCards {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .mobileProductCard,
  .mobileProductCard * {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .mobileProductCard {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    border: 1px solid color-mix(in srgb, var(--line) 85%, #fff) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08) !important;
  }

  .mobileCardMain {
    padding: 14px 13px 12px !important;
    background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--soft) 70%, #fff)) !important;
    border-bottom: 0 !important;
    min-height: 178px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .mobileCardId {
    display: none !important;
  }

  .mobileProductCard h3 {
    margin: 0 0 10px !important;
    color: var(--ink) !important;
    font-size: clamp(14px, 3.45vw, 16px) !important;
    line-height: 1.28 !important;
    font-weight: 900 !important;
    letter-spacing: -.01em !important;
    overflow-wrap: anywhere !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .mobileCardPacking,
  .mobileCardPrice,
  .mobileCardSource {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 0 8px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
  }

  .mobileCardPacking span,
  .mobileCardPrice span,
  .mobileCardSource span {
    display: block !important;
    margin-bottom: 2px !important;
    color: var(--muted) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
  }

  .mobileCardPacking strong,
  .mobileCardSource strong {
    display: block !important;
    color: #596272 !important;
    font-size: clamp(12px, 3vw, 13px) !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    overflow-wrap: anywhere !important;
  }

  .mobileCardPrice {
    margin-top: auto !important;
    margin-bottom: 8px !important;
  }

  .mobileCardPrice strong {
    display: block !important;
    color: var(--primary) !important;
    font-size: clamp(20px, 5.7vw, 26px) !important;
    line-height: 1.05 !important;
    font-weight: 950 !important;
    letter-spacing: -.03em !important;
    overflow-wrap: anywhere !important;
  }

  .mobileCardPrice.muted strong,
  .mobileCardPacking.muted strong {
    color: var(--muted) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
  }

  .mobileCardMeta {
    display: block !important;
    padding: 0 13px 13px !important;
    background: color-mix(in srgb, var(--soft) 55%, #fff) !important;
  }

  .mobileCardMeta div:first-child {
    display: none !important;
  }

  .mobileCardMeta div {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .mobileCardMeta span {
    display: none !important;
  }

  .mobileCardMeta strong.status {
    display: inline-flex !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 32px !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--primary) 10%, #fff) !important;
    color: color-mix(in srgb, var(--primary) 88%, #082f49) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    padding: 7px 10px !important;
  }

  .mobileCardActions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    padding: 0 13px 13px !important;
    background: color-mix(in srgb, var(--soft) 55%, #fff) !important;
    border: 0 !important;
  }

  .mobileCardActions .btn {
    width: 100% !important;
    min-height: 38px !important;
    border-radius: 13px !important;
  }

  .mobileEmptyCard {
    grid-column: 1 / -1 !important;
  }

  body.sidebarOpen .compactSidebar {
    transform: translateX(0) !important;
  }

  body:not(.sidebarOpen) .compactSidebar {
    transform: translateX(-110%) !important;
  }

  .compactSidebar details.accordion:not([open]) > *:not(summary) {
    display: none !important;
  }
}

@media screen and (max-width: 360px) {
  #mobileProductCards.mobileProductCards {
    grid-template-columns: 1fr !important;
  }
  .mobileCardMain {
    min-height: auto !important;
  }
}

/* v22: mobile search-first layout and collapsed summaries */
.resultCompactHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  padding:13px 15px;
  margin:0 0 10px;
  box-shadow:0 8px 18px rgba(16,24,40,.05);
}
.resultCompactHead strong{display:block;font-size:15px;color:var(--ink);line-height:1.25}
.resultCompactHead span{display:block;margin-top:3px;color:var(--muted);font-size:12px;line-height:1.35}
.resultCompactHead .btn{white-space:nowrap}
.summaryDropdownMini{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 8px 18px rgba(16,24,40,.05);
  margin:0 0 12px;
  overflow:hidden;
}
.summaryDropdownMini > summary{
  padding:13px 15px!important;
  cursor:pointer;
  list-style:none;
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.summaryDropdownMini > summary::-webkit-details-marker{display:none}
.summaryDropdownMini .summaryDropdownTitle strong{display:block;font-size:15px;line-height:1.25;color:var(--ink)}
.summaryDropdownMini .summaryDropdownTitle span{display:block;margin-top:3px;color:var(--muted);font-size:12px;line-height:1.35}
.summaryDropdownMini .summaryDropdownCue{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  background:#fff;
  color:var(--primary);
  border-radius:999px;
  min-height:32px;
  padding:6px 12px;
  font-size:12px;
  font-weight:900;
}
.summaryDropdownMini[open] .summaryDropdownCue::after{content:' tutup'}
.summaryDropdownMini .summaryDropdownBody{
  border-top:1px solid var(--line);
  padding:14px;
}
.startSummary .summaryDropdownBody{background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--soft) 42%,#fff))}

@media screen and (max-width:1600px), (hover:none), (pointer:coarse){
  .summaryDashboard{margin:0 0 10px!important}
  .listingNotice{display:none!important}
  .summaryDropdownMini{margin-bottom:10px!important;border-radius:18px!important}
  .summaryDropdownMini > summary{min-height:56px!important;padding:12px 14px!important}
  .summaryDropdownMini .summaryDropdownTitle strong{font-size:14px!important}
  .summaryDropdownMini .summaryDropdownTitle span{font-size:11.5px!important;line-height:1.35!important}
  .summaryDropdownMini .summaryDropdownBody{padding:12px!important}
  .resultCompactHead{border-radius:18px!important;padding:12px 14px!important;margin-bottom:10px!important}
  .resultCompactHead strong{font-size:14.5px!important}
  .resultCompactHead span{font-size:11.5px!important;line-height:1.35!important}

  body.mobileSearchCollapsed .searchbox{display:none!important}
  body.mobileSearchCollapsed .topbar{gap:6px!important;padding-bottom:8px!important;margin-bottom:8px!important}
  body.mobileSearchCollapsed .topbarTitle h2{font-size:18px!important;line-height:1.15!important;margin:0!important}
  body.mobileSearchCollapsed .topbarTitle p{display:none!important}
  body.mobileSearchCollapsed #mobileHeroSearchInput,
  body.mobileSearchCollapsed .mobileSearchHero{display:none!important}

  /* Initial screen: search is the main element; summary stays collapsed and small. */
  body:not(.mobileSearchCollapsed) .startSummary{margin-top:4px!important}
  body:not(.mobileSearchCollapsed) .startSummary .summaryDropdownBody{display:block}
  .startSummary:not([open]) .summaryDropdownBody{display:none!important}

  /* Search result cards stay close to the compact result header. */
  #mobileProductCards.mobileProductCards{margin-top:10px!important}
}

@media screen and (max-width:430px){
  .resultCompactHead{display:grid!important;grid-template-columns:1fr auto!important;gap:8px!important;padding:11px 12px!important}
  .resultCompactHead .btn{min-height:34px!important;padding:7px 10px!important;font-size:12px!important}
  .summaryDropdownMini > summary{padding:11px 12px!important}
  .summaryDropdownMini .summaryDropdownCue{min-height:30px!important;padding:5px 10px!important;font-size:11px!important}
}

/* v23: source/category row, source contact links, and no Ready badge in results */
.sourceCell strong{display:block;color:var(--ink);font-weight:900;line-height:1.25}
.sourceContact{display:flex;flex-wrap:wrap;gap:5px 7px;align-items:center;margin-top:5px;color:var(--muted);font-size:11px;line-height:1.25}
.sourceContact span{font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.sourceContact strong{display:inline;color:var(--ink);font-size:11px;font-weight:800}
.sourceContact a{display:inline-flex;align-items:center;justify-content:center;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--line));border-radius:999px;padding:3px 7px;background:color-mix(in srgb,var(--primary) 8%,#fff);color:var(--primary);font-weight:900;text-decoration:none}
.mobileSourceCategoryRow,
.mobileCardCategory,
.mobileCardContact,
.mobileCardStatus{box-sizing:border-box;min-width:0;max-width:100%}

@media screen and (max-width:1600px), (hover:none), (pointer:coarse){
  .mobileCardMeta{display:none!important}
  .mobileSourceCategoryRow{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(92px,42%)!important;
    gap:9px!important;
    align-items:start!important;
    width:100%!important;
    margin:8px 0 0!important;
    padding:0!important;
  }
  .mobileCardSourceBlock,
  .mobileCardCategory{
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
  }
  .mobileCardSource,
  .mobileCardCategory,
  .mobileCardContact,
  .mobileCardStatus{
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    overflow-wrap:anywhere!important;
  }
  .mobileCardCategory{
    text-align:right!important;
  }
  .mobileCardSource span,
  .mobileCardCategory span,
  .mobileCardContact span,
  .mobileCardStatus span{
    display:block!important;
    margin:0 0 2px!important;
    color:var(--muted)!important;
    font-size:10px!important;
    font-weight:900!important;
    letter-spacing:.04em!important;
    text-transform:uppercase!important;
    line-height:1.15!important;
  }
  .mobileCardSource strong,
  .mobileCardCategory strong,
  .mobileCardContact strong{
    display:block!important;
    margin:0!important;
    color:#475467!important;
    font-size:12px!important;
    font-weight:850!important;
    line-height:1.25!important;
    overflow-wrap:anywhere!important;
  }
  .mobileCardContact{
    margin-top:7px!important;
  }
  .contactActions{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:5px!important;
    margin-top:5px!important;
  }
  .contactActions a{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:26px!important;
    padding:5px 8px!important;
    border:1px solid color-mix(in srgb,var(--primary) 20%,var(--line))!important;
    border-radius:999px!important;
    background:color-mix(in srgb,var(--primary) 8%,#fff)!important;
    color:var(--primary)!important;
    font-size:11px!important;
    font-weight:900!important;
    line-height:1!important;
    text-decoration:none!important;
    white-space:nowrap!important;
  }
  .mobileCardStatus{
    margin-top:8px!important;
  }
  .mobileCardStatus strong.status{
    display:inline-flex!important;
    width:auto!important;
    max-width:100%!important;
    justify-content:center!important;
    align-items:center!important;
    min-height:28px!important;
    border-radius:999px!important;
    background:color-mix(in srgb,var(--danger) 9%,#fff)!important;
    color:var(--danger)!important;
    font-size:11px!important;
    font-weight:900!important;
    line-height:1.15!important;
    text-align:center!important;
    padding:6px 9px!important;
  }
}

@media screen and (max-width:430px){
  .mobileSourceCategoryRow{grid-template-columns:minmax(0,1fr) minmax(80px,38%)!important;gap:7px!important}
  .mobileCardSource strong,.mobileCardCategory strong,.mobileCardContact strong{font-size:11.5px!important}
  .contactActions a{font-size:10.5px!important;padding:5px 7px!important}
}

/* v25: logo, modern sticky header, and cashier receipt export */
.brandLogo{
  overflow:hidden!important;
  background:#fff!important;
  border:1px solid rgba(255,255,255,.22)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.18)!important;
}
.brandLogo img{width:100%;height:100%;object-fit:contain;display:block;padding:4px;box-sizing:border-box}
.modernTopbar{
  position:sticky!important;
  top:0!important;
  z-index:120!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(340px,520px)!important;
  align-items:center!important;
  gap:18px!important;
  padding:14px 16px!important;
  margin:-8px -8px 18px!important;
  background:linear-gradient(135deg, color-mix(in srgb,var(--panel) 90%,#fff), color-mix(in srgb,var(--soft) 58%,#fff))!important;
  border:1px solid color-mix(in srgb,var(--line) 72%,transparent)!important;
  border-radius:0 0 24px 24px!important;
  box-shadow:0 14px 34px rgba(16,24,40,.10)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}
.modernHeaderMain{display:flex;align-items:center;gap:12px;min-width:0}.topbarBrandBlock{display:flex;align-items:center;gap:14px;min-width:0}.topbarLogo{width:138px;max-width:28vw;height:auto;display:block;border-radius:16px;background:#fff;padding:7px 10px;border:1px solid var(--line);box-shadow:0 8px 18px rgba(16,24,40,.06)}.modernTopbar .topbarTitle{min-width:0}.modernTopbar .topbarTitle h2{font-size:22px!important;line-height:1.12!important;margin:0!important;letter-spacing:-.02em!important}.modernTopbar .topbarTitle p{font-size:12.5px!important;margin:4px 0 0!important;max-width:560px!important}.modernSearchBox{display:grid!important;grid-template-columns:minmax(0,1fr) auto auto!important;gap:8px!important;align-items:center!important;min-width:0!important}.modernSearchBox input{min-width:0!important;height:42px!important;border-radius:14px!important}.receiptTopBtn{white-space:nowrap!important;background:color-mix(in srgb,var(--primary) 9%,#fff)!important;color:var(--primary)!important;border-color:color-mix(in srgb,var(--primary) 22%,var(--line))!important}
.receiptDialog{width:min(920px,96vw)!important}.receiptDialogBody{max-height:88vh!important}.receiptControls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0}.receiptControls label{display:block;font-size:12px;font-weight:900;color:#344054}.receiptControls input,.receiptControls select{width:100%;margin-top:6px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;font:inherit;color:var(--ink)}.receiptOptions{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 12px}.receiptOptions label{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:8px 11px;background:#fff;font-size:12px;font-weight:800;color:#344054}.receiptActionBar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}.receiptMeta{font-size:12px;color:var(--muted);font-weight:800;margin:8px 0}.receiptPreview{white-space:pre-wrap;background:#fffdf7;border:1px dashed #d0a96d;border-radius:18px;padding:16px;min-height:240px;max-height:46vh;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.42;color:#1f2937;box-shadow:inset 0 0 0 4px rgba(255,255,255,.52)}
@media(max-width:1180px){.modernTopbar{grid-template-columns:1fr!important}.modernSearchBox{grid-template-columns:minmax(0,1fr) auto auto!important}.topbarLogo{width:126px;max-width:32vw}.receiptControls{grid-template-columns:1fr 1fr}}
@media screen and (max-width:760px), (hover:none), (pointer:coarse){
  .modernTopbar{position:sticky!important;top:0!important;margin:-20px -20px 14px!important;padding:14px 20px 12px!important;border-radius:0 0 22px 22px!important;grid-template-columns:1fr!important;gap:12px!important}
  .modernHeaderMain{width:100%;justify-content:space-between!important;gap:8px!important}.topbarBrandBlock{gap:10px!important;flex:1 1 auto!important}.topbarLogo{width:100px!important;max-width:32vw!important;padding:6px 8px!important;border-radius:14px!important}.modernTopbar .topbarTitle h2{font-size:18px!important}.modernTopbar .topbarTitle p{display:none!important}.modernSearchBox{grid-template-columns:1fr!important;gap:8px!important}.modernSearchBox .btn{width:100%!important;min-height:38px!important}.modernSearchBox input{height:46px!important}.receiptTopBtn{display:none!important}
  body.mobileSearchCollapsed .modernSearchBox{display:none!important}
  body.mobileSearchCollapsed .modernTopbar{padding-bottom:10px!important;margin-bottom:8px!important}
  .receiptControls{grid-template-columns:1fr!important}.receiptOptions{display:grid!important;grid-template-columns:1fr!important}.receiptActionBar{display:grid!important;grid-template-columns:1fr!important}.receiptActionBar .btn{width:100%!important}.receiptPreview{font-size:11px;max-height:48vh}
}