.refresh-btn {
  background:none;
  border:none;
  cursor:pointer;
  font-size:13px;
  padding:0 8px;
  color:#ee4d2d;
  transition:transform 0.5s ease;
  vertical-align:middle;
  outline:none;
}

.refresh-btn:hover {
  transform:rotate(180deg);
}

.refresh-btn:disabled {
  opacity:.5;
  cursor:not-allowed;
}

.refresh-btn.loading {
  animation:spin 1s linear infinite;
}

@keyframes spin {
  100% {
    transform:rotate(360deg);
  }
}

#shop-filter {
  min-width:100px;
  flex-shrink:0;
  cursor:pointer;
}

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  background:#dfdfdf;
  padding:8px 0;
}

.container {
  max-width:1280px;
  margin:0 auto;
  padding:8px;
}

h1 {
  text-align:center;
  margin:12px 0 16px;
  color:#ff4723;
  font-size:20px;
}

.controls {
  background:#fff;
  padding:10px;
  border-radius:12px;
  box-shadow:0 2px 12px rgb(0 0 0 / .08);
  margin-bottom:16px;
}

.search-bar {
  display:flex;
  margin-bottom:12px;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 2px 8px rgb(238 77 45 / .15);
}

.input-group {
  position:relative;
  flex:1;
}

#search {
  width:100%;
  padding:10px 40px 10px 10px;
  font-size:14px;
  border:1px solid #ee4d2d;
  border-right:none;
  border-radius:8px 0 0 8px;
  outline:none;
}

.clear-btn {
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  font-size:25px;
  color:#ff0d0d;
  background:none;
  border:none;
  cursor:pointer;
  display:none;
  width:30px;
  height:30px;
  align-items:center;
  justify-content:center;
}

#shop-filter {
  flex:0 0 110px;
  width:80px;
  max-width:80px;
  padding:0 24px;
  font-size:13px;
  border:1px solid #ee4d2d;
  border-left:none;
  border-radius:0 8px 8px 0;
  background:#fff;
  cursor:pointer;
  color:#000;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.filters {
  text-align:center;
  margin-bottom:8px;
  white-space:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:4px;
}

.filters::-webkit-scrollbar {
  display:none;
}

.time-btn {
  padding:6px 12px;
  margin:0 2px;
  background:#fff;
  border:1px solid #ee4d2d;
  border-radius:20px;
  cursor:pointer;
  font-weight:700;
  font-size:13px;
  transition:all 0.3s;
  white-space:nowrap;
  color: #0070ff;
}

.time-btn.active,
.time-btn:hover {
  background:#ee4d2d;
  color:#fff;
}

.refresh-info {
  text-align:center;
  color:#666;
  font-size:12px;
  margin-top:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
}

.grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}

.card {
  background:#fff;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 2px 8px rgb(0 0 0 / .05);
  transition:transform 0.2s;
  cursor:pointer;
  position:relative;
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
}

.card:active {
  transform:scale(.98);
}

.card img {
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:contain;
  background:#fff;
  display:block;
  padding-bottom:0;
}

.discount {
  position:absolute;
  top:6px;
  right:6px;
  z-index:5;
  background:rgb(238 77 45 / .95);
  color:#fff;
  padding:2px 6px;
  border-radius:4px;
  font-size:11px;
  font-weight:700;
  box-shadow:0 2px 4px rgb(0 0 0 / .1);
}

.info {
  margin-top:-30% !important;
  padding:8px;
  background:#fff;
  margin-top:-45px;
  position:relative;
  z-index:2;
  border-top-left-radius:12px;
  border-top-right-radius:12px;
  box-shadow:0 -2px 8px rgb(0 0 0 / .05);
  flex-grow:1;
}

.title {
  font-size:14px !important;
  ;
  height:36px;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  margin-bottom:4px;
  color:#000000 !important;
  ;
  line-height:1.3;
  font-weight:500 !important;
}

.price-line {
  font-size:16px;
  font-weight:700;
  color:#ee4d2d;
  margin:4px 0;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
}

.original {
  text-decoration:line-through;
  color:#999;
  font-size:11px;
  margin-left:4px;
}

.shop {
  color:#555;
  font-size:11px;
  margin:2px 0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.time {
  font-size:12px;
  margin-top:4px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.time-label {
  color:#ee4d2d;
  font-weight:600;
  font-size:11px;
}

.stock {
  color:#00b14f;
  font-weight:700;
  font-size:15px !important;
}

.stock.out {
  color:#ee4d2d;
}

.no-result {
  grid-column:1 / -1;
  text-align:center;
  padding:40px;
  color:#999;
}

#back-to-top {
  position:fixed;
  bottom:20px;
  right:15px;
  width:45px;
  height:45px;
  background:#ee4d2d;
  color:#fff;
  border:none;
  border-radius:50%;
  box-shadow:0 4px 10px rgb(238 77 45 / .3);
  cursor:pointer;
  z-index:1000;
  font-size:20px;
  opacity:0;
  visibility:hidden;
  transition:all 0.3s;
  transform:translateY(20px);
}

#back-to-top.show {
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

@media (min-width:480px) {
  .grid {
    gap:12px;
  }
  .info {
    margin-top:-50px;
  }
}

@media (min-width:768px) {
  .grid {
    grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
    gap:16px;
  }
  .info {
    padding:12px;
    margin-top:-60px;
  }
  .discount {
    font-size:12px;
    padding:3px 8px;
  }
}

@media (min-width:1024px) {
  .grid {
    grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  }
  h1 {
    font-size:24px;
  }
}

@media (min-width:1280px) {
  .container {
    padding:0 8px;
  }
  .grid {
    grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
    gap:20px;
  }
  .card:hover {
    transform:translateY(-5px);
    box-shadow:0 8px 20px rgb(0 0 0 / .1);
  }
  .title {
    font-size:14px;
    height:40px;
  }
  .price-line {
    font-size:18px;
  }
  .original {
    font-size:13px;
  }
  .shop {
    font-size:13px;
  }
  .time-label,
  .stock {
    font-size:13px;
  }
}