/* Only home/category catalogs. Recommendations and hot-sale cards keep their layout. */
#shuiping-catalog .category-btn { color: #616161; border-color: #9ed3ff !important; }
#shuiping-catalog .category-btn:hover,
#shuiping-catalog .category-btn.active { color: #fff; background: #4aadff; border-color: #4aadff !important; }
#shuiping-catalog .category-btn .count { margin-left: 6px; padding: 2px 6px; color: #6e6e73; background: #f5f5f7; border-radius: 7px; font-size: 12px; line-height: 14px; }
#shuiping-catalog .category-btn:hover .count,
#shuiping-catalog .category-btn.active .count { color: #4aadff; background: #fff; }
#shuiping-catalog .category-btn:focus-visible { outline: 2px solid #238ee6; outline-offset: 3px; }
#shuiping-categories[hidden] { display: none !important; }
#shuiping-catalog .branch-earn-btn { border-color: #91d9b9 !important; }
#shuiping-catalog .branch-earn-btn:hover,
#shuiping-catalog .branch-earn-btn:active,
#shuiping-catalog .branch-earn-btn:focus { border-color: #23a975 !important; }
/* Keep sold-out products clickable; the gray overlay is visual only. */
#shuiping-catalog .is-sold-out { position: relative; }
#shuiping-catalog .is-sold-out::after {
    content: ""; position: absolute; inset: 0; z-index: 2;
    border-radius: inherit; background: rgba(105, 112, 120, .05); pointer-events: none;
}
#shuiping-catalog .is-sold-out .img-wrapper img,
#shuiping-catalog .is-sold-out .hot-sale-cover img { filter: grayscale(1); }
#shuiping-results { clear: both; }
#shuiping-results[aria-busy="true"] { opacity: .55; pointer-events: none; }
#shuiping-catalog .catalog-empty { padding: 35px 15px; text-align: center; color: #888; }
#shuiping-catalog .catalog-load-status { margin: 0 6px 16px; color: #666; }
#shuiping-catalog .catalog-load-status[hidden] { display: none; }
#shuiping-catalog .catalog-load-status button,
#shuiping-catalog .catalog-load-status a { margin-left: 10px; }
/* Match the template's existing announcement visibility breakpoint. */
@media (max-width: 1199.98px) {
    #shuiping-catalog > .row > :first-child { width: 100%; }
}

@media (max-width: 767.98px) {
    #shuiping-catalog[data-mobile-mode="grid"] .catalog-products .goods-list {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
        margin: 0; padding: 12px !important;
    }
    #shuiping-catalog[data-mobile-mode="grid"] .catalog-products .goods-list::before,
    #shuiping-catalog[data-mobile-mode="grid"] .catalog-products .goods-list::after { display: none; }
    #shuiping-catalog[data-mobile-mode="grid"] .catalog-products .goods-column { float: none; width: auto; min-width: 0; padding: 0 !important; }
    #shuiping-catalog[data-mobile-mode="grid"] .catalog-products .table-goods { height: 100%; min-height: 0; margin: 0; padding: 10px; }
    #shuiping-catalog[data-mobile-mode="grid"] .catalog-products .img-wrapper {
        position: relative; top: auto; left: auto; width: 100%; max-width: none; height: auto; aspect-ratio: auto; background: transparent;
        padding-top: calc((100% - min(82%, 110px)) / 2); margin: 0 0 12px;
    }
    #shuiping-catalog[data-mobile-mode="grid"] .catalog-products .img-wrapper img {
        position: static; inset: auto; transform: none; margin: 0 auto;
        width: 82%; max-width: 110px; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 8px;
    }
    #shuiping-catalog[data-mobile-mode="grid"] .catalog-products .info-wrapper { margin: 0; height: auto; overflow: visible; }
    #shuiping-catalog[data-mobile-mode="grid"] .catalog-products .info-wrapper .title {
        display: block; -webkit-line-clamp: unset;
        margin: 0 0 4px; height: 20px; font-size: 13px; line-height: 20px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    #shuiping-catalog[data-mobile-mode="grid"] .catalog-products .goods-tag { max-width: 100%; margin: 0 3px 5px 0; padding: 1px 4px; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
    #shuiping-catalog[data-mobile-mode="grid"] .catalog-products .tag-list { margin-top: 4px; height: auto; min-height: 24px; }
    #shuiping-catalog[data-mobile-mode="grid"] .catalog-products .price-value { height: auto; flex-wrap: wrap; white-space: normal; }
}

@media (min-width: 768px) {
    #shuiping-catalog[data-pc-mode="grid"] .catalog-products .goods-list {
        display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px;
        margin: 0; padding: 16px !important;
    }
    #shuiping-catalog[data-pc-mode="grid"] .catalog-products .goods-list::before,
    #shuiping-catalog[data-pc-mode="grid"] .catalog-products .goods-list::after { display: none; }
    #shuiping-catalog[data-pc-mode="grid"] .catalog-products .goods-column { float: none; width: auto; min-width: 0; padding: 0 !important; }
    #shuiping-catalog[data-pc-mode="grid"] .catalog-products .table-goods { height: 100%; min-height: 0; margin: 0; padding: 12px; }
    #shuiping-catalog[data-pc-mode="grid"] .catalog-products .img-wrapper {
        position: relative; top: auto; left: auto; width: 100%; max-width: none; height: auto; aspect-ratio: auto; background: transparent;
        padding-top: calc((100% - min(82%, 150px)) / 2); margin: 0 0 14px;
    }
    #shuiping-catalog[data-pc-mode="grid"] .catalog-products .img-wrapper img {
        position: static; inset: auto; transform: none; margin: 0 auto;
        width: 82%; max-width: 150px; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 8px;
    }
    #shuiping-catalog[data-pc-mode="grid"] .catalog-products .info-wrapper { margin: 0; height: auto; overflow: visible; }
    #shuiping-catalog[data-pc-mode="grid"] .catalog-products .info-wrapper .title {
        display: block; -webkit-line-clamp: unset;
        margin: 0 0 4px; height: 22px; line-height: 22px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    #shuiping-catalog[data-pc-mode="grid"] .catalog-products .goods-tag { max-width: 100%; margin: 0 4px 6px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
    #shuiping-catalog[data-pc-mode="grid"] .catalog-products .tag-list { margin-top: 4px; height: auto; min-height: 24px; }
    #shuiping-catalog[data-pc-mode="grid"] .catalog-products .price-value { height: auto; flex-wrap: wrap; white-space: normal; }
}

/* Wide desktop: four products per row, same as the tablet/desktop mode above. */
@media (min-width: 1200px) {
    #shuiping-catalog[data-pc-mode="grid"] .catalog-products .goods-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
    }
}