xtu_mall/public/assets/xtu/search-page.css

.xtu-search-page{background:#fff;min-height:calc(100vh - 92px)}
.xtu-search-shell{padding:30px 0 56px}
.xtu-search-shell-inner{max-width:1180px}
.xtu-search-empty-shell{padding:72px 0 90px}
.xtu-search-empty-inner{max-width:860px}
.xtu-search-simple-form{margin:0}
.xtu-search-simple-box{display:flex;align-items:center;height:48px;padding:0 16px;border-radius:999px;background:#f5f5f5;border:1px solid #ececec}
.xtu-search-simple-box-large{height:56px;padding:0 20px;background:#f7f7f7}
.xtu-search-simple-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:0 0 20px;font-size:18px;color:#666}
.xtu-search-simple-input{flex:1;min-width:0;height:100%;border:none;background:transparent;padding:0 12px;font-size:15px;color:#111827}
.xtu-search-simple-input:focus{outline:none}
.xtu-search-simple-input::placeholder{color:#98a2b3}
.xtu-search-simple-tabs{display:flex;align-items:center;gap:28px;margin-top:20px;padding-bottom:12px;border-bottom:1px solid #ececec;overflow-x:auto;scrollbar-width:none}
.xtu-search-simple-tabs::-webkit-scrollbar{display:none}
.xtu-search-simple-tabs-empty{justify-content:center;border-bottom:none;padding-bottom:0;margin-top:18px}
.xtu-search-simple-tab{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 2px 10px;border:none;background:transparent;font-size:15px;color:#667085;font-weight:500;white-space:nowrap;cursor:pointer;transition:color .2s ease}
.xtu-search-simple-tab:hover{color:#111827}
.xtu-search-simple-tab em{font-style:normal;color:#98a2b3;font-size:13px;transition:color .2s ease}
.xtu-search-simple-tab.is-active{color:#111827;font-weight:600}
.xtu-search-simple-tab.is-active em{color:#111827}
.xtu-search-simple-tab.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-13px;height:2px;background:#111827}
.xtu-search-simple-tab:focus{outline:none}
.xtu-search-simple-tab:focus-visible{box-shadow:0 0 0 3px rgba(0,114,206,.14);border-radius:8px}
.xtu-search-tab-panels{margin-top:4px}
.xtu-search-tab-panel{display:none}
.xtu-search-tab-panel.is-active{display:block}
.xtu-search-simple-list{display:flex;flex-direction:column}
.xtu-search-simple-item{display:grid;grid-template-columns:160px minmax(0,1fr);gap:24px;padding:28px 0;border-bottom:1px solid #f0f0f0}
.xtu-search-simple-media{display:block;background:#f3f4f6;min-height:120px;overflow:hidden}
.xtu-search-simple-media img{width:100%;height:100%;object-fit:contain}
.xtu-search-simple-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:120px;font-size:28px;font-weight:700;color:#9ca3af;background:#f3f4f6}
.xtu-search-simple-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;color:#667085;font-size:13px}
.xtu-search-simple-meta .dot{width:4px;height:4px;border-radius:999px;background:#c2cad5}
.xtu-search-simple-title{margin:10px 0 12px;font-size:20px;line-height:1.4;font-weight:600;color:#111827}
.xtu-search-simple-title a{color:inherit}
.xtu-search-simple-title em,.xtu-search-simple-desc em{font-style:normal;color:#0072ce;background:rgba(0,114,206,.08);padding:0 4px;border-radius:4px}
.xtu-search-simple-desc{color:#475467;font-size:14px;line-height:1.9}
.xtu-search-pagination{margin-top:26px}
.xtu-search-pagination .pagination,.xtu-search-pagination-inner{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.xtu-search-page-btn,.xtu-search-pagination a,.xtu-search-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;border-radius:999px;border:1px solid #dde5ee;background:#fff;color:#344054;font-size:14px;font-weight:500}
.xtu-search-page-btn.is-active,.xtu-search-pagination .active span,.xtu-search-pagination .pagination .active a{background:#111827;border-color:#111827;color:#fff}
.xtu-search-page-nav{min-width:84px}
.xtu-search-help-list{display:flex;flex-direction:column}
.xtu-search-help-item{padding:24px 0;border-bottom:1px solid #f0f0f0}
.xtu-search-help-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;color:#667085;font-size:13px}
.xtu-search-help-meta .dot{width:4px;height:4px;border-radius:999px;background:#c2cad5}
.xtu-search-help-title{margin:10px 0 10px;font-size:18px;line-height:1.45;font-weight:600;color:#111827}
.xtu-search-help-title a{color:inherit}
.xtu-search-help-title em,.xtu-search-help-desc em{font-style:normal;color:#0072ce;background:rgba(0,114,206,.08);padding:0 4px;border-radius:4px}
.xtu-search-help-desc{color:#475467;font-size:14px;line-height:1.9}
.xtu-search-empty{padding:60px 24px;text-align:center}
.xtu-search-empty h3{margin:0 0 10px;font-size:28px;color:#111827}
.xtu-search-empty p{margin:0;color:#667085;font-size:15px;line-height:1.9}
@media (max-width:767px){
  .xtu-search-shell{padding:20px 0 42px}
  .xtu-search-empty-shell{padding:42px 0 56px}
  .xtu-search-simple-box,.xtu-search-simple-box-large{height:44px;padding:0 14px}
  .xtu-search-simple-input{font-size:14px}
  .xtu-search-simple-item{grid-template-columns:1fr;gap:18px;padding:22px 0}
  .xtu-search-simple-media,.xtu-search-simple-placeholder{min-height:200px}
  .xtu-search-simple-title{font-size:18px}
}