.ranking-outer-wrapper { background-color: #fefaf4; padding: 40px 15px; border-radius: 30px; font-family: sans-serif; color: #4a3d33; }
.ranking-header { text-align: center; margin-bottom: 25px; }
.ranking-period { display: inline-block; background: #a5845e; color: #fff; padding: 6px 24px; border-radius: 20px; font-size: 0.95em; font-weight: bold; }
.ranking-controls { margin-bottom: 35px; text-align: center; }
#rank-cat-filter, #rank-limit-filter { padding: 10px 15px; border-radius: 12px; border: 2px solid #f2e9dc; background: #fff; color: #a5845e; font-weight: bold; outline: none; margin: 0 5px; }
.ranking-container { display: flex; flex-wrap: wrap; gap: 20px; max-width: 1200px; margin: 0 auto; }
.product-card { position: relative; display: flex; width: calc(50% - 10px); min-height: 170px; background: #fff; border-radius: 15px; overflow: hidden; text-decoration: none; color: inherit; border: 1px solid #f2e9dc; }
.rank-badge { position: absolute; top: 0; left: 0; background: #d4a373; color: #fff; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-weight: bold; border-radius: 0 0 10px 0; z-index: 2; }
.card-left { width: 35%; min-width: 130px; }
.product-img { width: 100%; height: 100%; object-fit: cover; }
.card-right { width: 65%; padding: 15px; display: flex; flex-direction: column; }
.product-name { font-weight: bold; height: 2.8em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 8px; }
.product-desc { font-size: 0.85em; line-height: 1.5; height: 6em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; color: #666; }
.cat-tag { align-self: flex-start; padding: 3px 8px; background: #fdf2e4; color: #b58450; border-radius: 5px; font-size: 0.7em; font-weight: bold; margin-top: auto; }
.end-msg { width: 100%; text-align: center; padding: 30px; color: #a5845e; font-weight: bold; border-top: 1px dashed #f2e9dc; }
@media (max-width: 768px) { .product-card { width: 100%; } .product-desc { -webkit-line-clamp: 3; height: 4.5em; } }