@media (min-width: 621px) {
  .filter-primary,
  .filter-advanced {
    display: contents;
  }

  #searchField { order: 0; }
  .search-box { order: 1; }
  #filterBtn { order: 2; }
  #filterToggle { display: none; }
  #startDate { order: 3; }
  .date-separator { order: 4; }
  #endDate { order: 5; }
  #resetFilterBtn { order: 6; }
  #shareSearchBtn { order: 7; }
}

@media (max-width: 620px) {
  .filter-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    padding: 8px !important;
    margin-bottom: 9px !important;
  }

  .filter-primary {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 6px !important;
  }

  .filter-bar select,
  .filter-bar input {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 6px 10px !important;
    font-size: 16px !important;
  }

  .filter-bar select { width: 100% !important; }
  .search-box {
    flex: 1 1 0 !important;
    width: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .filter-advanced {
    display: none !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .filter-bar.filter-open .filter-advanced {
    display: grid !important;
    margin-top: 2px !important;
    padding-top: 7px !important;
    border-top: 1px solid var(--line) !important;
  }

  .filter-bar input[type="date"] { width: 100% !important; }
  .date-separator { display: none !important; }

  #filterToggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    padding: 0 11px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  .filter-bar button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 38px !important;
    padding: 7px 10px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  #resetFilterBtn,
  #shareSearchBtn { width: 100% !important; }
}

.share-product{display:none}
.share-card-result{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;background:#f5f6f8}
.share-card-result.hidden{display:none}
.share-card-result-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;background:#fff;border-bottom:1px solid var(--line)}
.share-card-result-head b{font-size:18px}
.share-card-result-head button{width:36px;height:36px;border:0;border-radius:50%;background:#f0f2f5;color:#333b42;font:inherit;font-size:22px;line-height:1;cursor:pointer}
.share-card-result-body{flex:1;min-height:0;overflow:auto;display:grid;justify-items:center;align-content:start;gap:12px;padding:18px}
.share-card-preview{display:block;width:min(100%,440px);height:auto;border-radius:10px;background:#fff;box-shadow:0 8px 24px rgba(22,30,40,.12)}
.share-card-tip{margin:0;color:var(--muted);font-size:13px;text-align:center}
.share-card-download{display:inline-flex;align-items:center;justify-content:center;width:min(100%,320px);text-decoration:none}
.share-card-button{grid-column:1/-1}

@media (max-width:620px){
  .topbar{background:#fff}
  .topbar-inner{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"brand auth" "nav nav";
    align-items:center;
    column-gap:10px;
    row-gap:4px;
    padding:6px 0 4px;
  }
  .brand{grid-area:brand;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;line-height:1.2}
  .auth-area{grid-area:auth;flex:0 0 auto;max-width:none;gap:4px}
  .mainnav{grid-area:nav;order:0;display:flex;flex:0 0 auto;width:100%;margin-right:0;justify-content:flex-start;gap:5px;overflow-x:auto;overscroll-behavior-x:contain;padding:1px 0 2px;scrollbar-width:none}
  .mainnav::-webkit-scrollbar{display:none}
  .mainnav a,.merchant-nav > button{min-height:30px;padding:0 8px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:12px;white-space:nowrap;box-shadow:none;transform:none !important}
  .mainnav a{display:inline-flex;align-items:center;justify-content:center;align-self:center;height:28px;min-height:28px;padding:0 5px;line-height:1}
  .mainnav a.active{border-color:#ffc9c2}
  .merchant-nav > button.active{border-color:var(--primary-dark);background:var(--primary);color:#fff}
  .merchant-nav-icon{display:none}
  .merchant-nav > button{gap:4px}
  .merchant-nav-current{max-width:34vw;height:18px;line-height:18px;padding:0 5px;font-size:11px}
  #languageToggle,#authButton,#logoutButton{min-height:30px;padding:0 8px;font-size:12px;border-radius:999px;box-shadow:none}
  #authName{max-width:18vw;font-size:11px}
  .merchant-menu{top:calc(100% + 4px);left:0;right:auto;width:min(240px,calc(100vw - 36px));min-width:0}
  .merchant-menu button{padding:8px 9px;font-size:13px}

  .layout{gap:6px;padding-top:7px}
  .layout > *{min-width:0}
  .content{width:100%;max-width:100%;min-width:0}
  .sidebar{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;max-height:none}
  .side-title{display:none}
  .category-tree{flex:0 0 auto;gap:5px;overflow-x:auto;overscroll-behavior-x:contain;padding:0 0 2px;-webkit-overflow-scrolling:touch}
  .category-tree button{min-height:29px;gap:4px;padding:0 8px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:12px}
  .category-tree button.active{border-color:var(--primary-dark);background:var(--primary);color:#fff}
  .category-tree .count{font-size:10px;font-weight:800}
  .category-tree button.active .count{color:rgba(255,255,255,.88)}
  .content-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:7px;margin-bottom:6px}
  .category-heading{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;gap:5px}
  .content-head h1{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;line-height:1.2}
  .category-notice{display:none !important}
  #productCount{flex:0 0 auto;font-size:10px;white-space:nowrap}

  .product{display:flex;flex-direction:column;height:100%}
  .product-info{flex:1 1 auto;display:flex;flex-direction:column}
  .product-info .price-row{margin-top:auto;padding-top:4px}

  .pagination:not(.hidden){
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-areas:"first prev select input" "jump info next last";
    align-items:center;
    gap:5px;
    padding:7px;
    margin-top:9px;
  }
  #firstPageBtn{grid-area:first}
  #prevPageBtn{grid-area:prev}
  #pageSelect{grid-area:select}
  #pageInput{grid-area:input}
  #jumpPageBtn{grid-area:jump}
  #pageInfo{grid-area:info;display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-align:center;font-size:9px;line-height:1.2}
  #nextPageBtn{grid-area:next}
  #lastPageBtn{grid-area:last}
  .pagination select,.pagination input,.pagination button{width:100%;min-width:0;min-height:32px;padding:0 5px;font-size:12px}
  .pagination #jumpPageBtn{padding:0 5px}

  .share-qr-modal{background:#f5f6f8}
  .share-qr-panel{display:flex;flex-direction:column;width:100%;min-height:100%;min-height:100dvh;border-radius:0;background:#f5f6f8}
  .share-qr-panel .modal-head{background:#fff}
  .share-qr-panel .modal-head h2{margin:0;font-size:17px}
  .share-qr-body{justify-items:stretch;width:100%;max-width:440px;margin:0 auto;gap:8px;padding:10px 10px 10px}
  .share-product{display:grid;width:min(68vw,260px);margin:0 auto;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:12px;text-align:left}
  .share-product-image{display:block;width:100%;aspect-ratio:1;object-fit:contain;background:#f1f3f5}
  .share-product-title{display:block;overflow:hidden;padding:8px 10px;font-size:13px;font-weight:800;line-height:1.4;text-overflow:ellipsis;white-space:nowrap}
  .share-qr-image{width:min(55vw,210px);height:auto;aspect-ratio:1;margin:0 auto;padding:8px;border-radius:12px}
  .share-qr-actions{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));width:min(100%,320px);margin:0 auto}
  .share-qr-actions{gap:6px}
  .share-qr-actions.has-product{grid-template-columns:repeat(2,minmax(0,1fr))}
  .share-qr-actions.has-product .share-card-button{order:1;grid-column:auto}
  .share-qr-actions.has-product [data-share-action="copy"]{order:2}
  .share-qr-actions.has-product .qr-copy-only{order:3;grid-column:1/-1}
  .share-qr-actions.has-product [data-share-action="copy"]{border:1px solid #2547ff;background:#fff;color:#2547ff;box-shadow:0 2px 8px rgba(37,71,255,.14)}
  .share-qr-actions.has-product [data-share-action="copy"]:hover{background:#eef2ff}
  .share-qr-button{min-height:36px;font-size:12px}
  .share-qr-tip{max-width:320px;margin:0 auto;font-size:11px;line-height:1.35}
  .share-card-result-head{padding:11px 12px}
  .share-card-result-head b{font-size:16px}
  .share-card-result-head button{width:32px;height:32px;font-size:19px}
  .share-card-result-body{gap:10px;padding:12px}
  .share-card-tip{font-size:12px}
}