/* Catalog widgets are loaded once, not retransmitted with every category fragment. */
.home .category-recommendations {
    background:
        radial-gradient(ellipse at 5% 100%, rgba(96, 165, 250, .19), transparent 55%),
        radial-gradient(ellipse at 40% 110%, rgba(52, 211, 153, .14), transparent 55%),
        radial-gradient(ellipse at 78% 110%, rgba(251, 191, 36, .15), transparent 52%),
        radial-gradient(ellipse at 100% 60%, rgba(244, 114, 182, .12), transparent 52%),
        radial-gradient(ellipse at 95% 0%, rgba(167, 139, 250, .13), transparent 55%), #fff;
}
.home .category-recommendations > .panel-heading { border-bottom: 0 !important; padding-bottom: 4px !important; }
.home .category-recommendations > .panel-heading > h4 { margin-bottom: 6px; }
.home .category-recommendations > .panel-body.goods-list { padding-top: 8px !important; padding-bottom: 8px !important; }
/* Recommendations use the same compact list spacing, independently of grid mode. */
#shuiping-catalog .category-recommendations > .panel-body.goods-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: 0;
    padding: 10px !important;
}
#shuiping-catalog .category-recommendations > .goods-list::before,
#shuiping-catalog .category-recommendations > .goods-list::after { display: none; }
#shuiping-catalog .category-recommendations .goods-column {
    float: none; width: auto; min-width: 0; padding: 0 !important;
}
#shuiping-catalog .category-recommendations .table-goods { height: 100%; margin: 0 !important; }
@media (min-width: 768px) {
    #shuiping-catalog .category-recommendations > .panel-body.goods-list {
        gap: 15px 28px;
        padding: 15px 28px !important;
    }
}
@media (min-width: 992px) {
    #shuiping-catalog .category-recommendations > .panel-body.goods-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
#shuiping-catalog .category-recommendations {
    /* Remove the theme's extra panel padding; the goods-list owns all card spacing. */
    padding-left: 0 !important;
    padding-right: 0 !important;
    border: 1px solid #cbd5e1 !important;
}
#shuiping-catalog .category-recommendations > .panel-heading {
    padding-left: 20px !important;
    padding-right: 20px !important;
}
@media (max-width: 767px) {
    #shuiping-catalog .category-recommendations > .panel-heading {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}
.home .category-recommendations .info-wrapper .title {
    display: block; height: 23px; max-height: 23px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    -webkit-line-clamp: unset;
}
.home .category-recommendations > .panel-heading,
.home .category-recommendations > .panel-body { background: transparent; }
.home .category-recommendations .recommendation-title-icon {
    display: inline-block; width: 20px; height: 20px; margin-right: 6px; vertical-align: -3px;
}
.home .purchase-guide-btn { margin-left: 10px; padding: 2px 9px; font-size: 14px; font-weight: 500; line-height: 1.2; border-radius: 6px; vertical-align: middle; }
.purchase-guide-modal .modal-body { max-height: 65vh; overflow-y: auto; overflow-wrap: anywhere; }
.purchase-guide-item + .purchase-guide-item { margin-top: 24px; padding-top: 16px; border-top: 1px solid #eee; }
.purchase-guide-item h4 { font-size: 15px; font-weight: 500; margin: 0 0 12px; }
.purchase-guide-product-link { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; color: #337ab7; }
.purchase-guide-product-link:hover, .purchase-guide-product-link:focus { color: #23527c; text-decoration: underline; }
.purchase-guide-product-link svg { width: 14px; height: 14px; flex: 0 0 14px; }
.purchase-guide-content img, .purchase-guide-content video { max-width: 100%; height: auto; }
.purchase-guide-content { overflow-x: auto; }
.site-footer { background: #fff; color: #6f7b85; font-size: 14px; line-height: 1.6; }
.footer-inner { max-width: 1100px; margin: 0 auto; padding: 20px 16px 24px; text-align: left; }
.footer-title { margin-bottom: 8px; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; margin-top: 10px; font-size: 13px; }
.footer-links a { position: relative; padding: 0 9px; color: #6f7b85; text-decoration: none; }
.footer-links a:hover { color: #111; }
.footer-links a::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 12px; margin-top: -6px; background: #ddd; }
.footer-links a:first-child { padding-left: 0; }
.footer-links a:first-child::before { display: none; }
.footer-details { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.footer-details .footer-brand { min-width: 0; }
.footer-partners { flex-shrink: 0; text-align: right; font-size: 13px; }
@media (max-width: 767px) {
    .footer-details { display: block; }
    .footer-partners { display: none !important; }
}
.footer-partners a { color: #6f7b85; text-decoration: none; }
.footer-partners a:hover { color: #111; }
.footer-copy { margin-top: 24px; padding-top: 16px; border-top: 1px solid #eee; font-size: 13px; }
#shuiping-home-sidebar[hidden], #shuiping-home-footer[hidden] { display: none !important; }

/* Stock replaces sales at the right of the price row; align both boxes at the bottom. */
#shuiping-catalog .catalog-products .tag-list { align-items: flex-end; }
#shuiping-catalog .catalog-products .tag-list > .price-value,
#shuiping-catalog .catalog-products .tag-list > .stock-badge { align-self: flex-end; }
#shuiping-catalog .catalog-products .tag-list > .stock-badge {
    display: block;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0 5px;
    border: 1px solid #d3e8fa;
    border-radius: 5px;
    background: #edf6ff;
    color: #5287b5;
    font-size: 11px;
    line-height: 18px;
    white-space: nowrap;
}

#shuiping-catalog .catalog-products .tag-list > .stock-badge-empty {
    color: #d94b58;
    background: #fff0f1;
    border-color: #f3bcc2;
}

/* Only home/category catalogs. Recommendations keep their layout. */
/* Pointer-only hover feedback: no layout shift or sticky touch hover. */
@media (hover: hover) and (pointer: fine) {
    #shuiping-catalog .table-goods {
        position: relative;
        transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    #shuiping-catalog .table-goods:hover {
        transform: translateY(-3px);
        border-color: #9ed3ff;
        box-shadow: 0 8px 20px rgba(35, 80, 125, .12), inset 0 0 0 1px rgba(74, 173, 255, .25) !important;
    }
}
#shuiping-catalog .table-goods .item-link:focus-visible {
    outline: 2px solid #238ee6;
    outline-offset: 3px;
    border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) {
    #shuiping-catalog .table-goods {
        transition: none;
    }
    #shuiping-catalog .table-goods:hover {
        transform: none;
    }
}
/* Stretch the sidebar to the product column so sticky notices follow the page. */
@media (min-width: 1200px) {
    #shuiping-catalog > .row { display: flex; align-items: stretch; }
    #shuiping-catalog > .row::before,
    #shuiping-catalog > .row::after { display: none; }
    #shuiping-catalog > .row > div { min-width: 0; }
    #shuiping-catalog .catalog-sidebar-sticky {
        position: sticky;
        top: 88px;
        max-height: calc(100vh - 104px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        padding: 2px 2px 4px;
    }
}
#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-catalog .category-btn.branch-earn-btn {
    color: #fff;
    background: linear-gradient(135deg, #ff9a44 0%, #ff5b45 100%);
    border-color: #ff7845 !important;
}
#shuiping-catalog .category-btn.branch-earn-btn:hover,
#shuiping-catalog .category-btn.branch-earn-btn:active {
    color: #fff;
    background: linear-gradient(135deg, #ff8833 0%, #f54838 100%);
    border-color: #f76538 !important;
}
#shuiping-categories[hidden] { display: none !important; }
#shuiping-catalog #shuiping-category-navigation { margin-bottom: 16px; }
/* 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 { filter: grayscale(1); }
#shuiping-results { clear: both; position: relative; }
#shuiping-results[aria-busy="true"] { min-height: 110px; pointer-events: none; }
#shuiping-results[aria-busy="true"] > * { opacity: .35; }
/* aria-busy is reset by catalog navigation on success, failure and cancellation. */
#shuiping-results[aria-busy="true"]::before {
    content: "";
    position: absolute;
    top: 56px;
    left: calc(50% - 16px);
    z-index: 5;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    border: 3px solid #d6eaff;
    border-top-color: #4aadff;
    border-radius: 50%;
    animation: shuiping-category-spin .7s linear infinite;
}
@keyframes shuiping-category-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    #shuiping-results[aria-busy="true"]::before { animation: none; }
}
#shuiping-catalog .catalog-empty { padding: 35px 15px; text-align: center; color: #888; }
/* Keep a rounded outer outline without a background card or shadow. */
#shuiping-catalog .catalog-products > .catalog-all-panel,
#shuiping-catalog .catalog-products > .catalog-category {
    background: transparent !important;
    border: 1px solid #e1e5ea !important;
    box-shadow: none !important;
    border-radius: 10px !important;
}
#shuiping-catalog .catalog-products > .catalog-all-panel,
#shuiping-catalog .catalog-products > fieldset.catalog-category {
    min-width: 0;
    padding: 0;
}
/* Bootstrap's negative row margins escape a fieldset: normalize both views. */
#shuiping-catalog .catalog-products > .catalog-all-panel > .goods-list,
#shuiping-catalog .catalog-products > .catalog-category > .goods-list {
    margin-left: 0;
    margin-right: 0;
}
/* Remove the old heading-button offset so the outline gap is symmetric. */
#shuiping-catalog .catalog-guide-actions > .purchase-guide-btn {
    display: block;
    margin: 0;
}
/* Native legend interrupts the outline without painting over the transparent background. */
#shuiping-catalog .catalog-category > legend.catalog-guide-actions {
    float: none;
    display: table;
    width: auto;
    max-width: calc(100% - 32px);
    margin: 0 0 0 16px;
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}
#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="list"] .catalog-products .goods-list {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        margin: 0;
        padding: 10px !important;
    }
    #shuiping-catalog[data-mobile-mode="list"] .catalog-products .goods-list::before,
    #shuiping-catalog[data-mobile-mode="list"] .catalog-products .goods-list::after { display: none; }
    #shuiping-catalog[data-mobile-mode="list"] .catalog-products .goods-column {
        float: none; width: auto; min-width: 0; padding: 0 !important;
    }
    #shuiping-catalog[data-mobile-mode="list"] .catalog-products .table-goods {
        margin: 0;
    }
    #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 .item-link { display: block; }
    #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; min-height: 0; overflow: visible; }
    #shuiping-catalog[data-mobile-mode="grid"] .catalog-products .info-wrapper .title {
        word-break: break-all;
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
        margin: 0 0 5px; height: 40px; max-height: 40px; font-size: 13px; line-height: 20px;
        white-space: normal; overflow-wrap: anywhere; 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) {
    /* Match the outside spacing to the centre gap, making each list card narrower. */
    #shuiping-catalog[data-pc-mode="list"] .catalog-products .goods-list {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 15px 28px;
        margin: 0;
        padding: 15px 28px !important;
    }
    #shuiping-catalog[data-pc-mode="list"] .catalog-products .goods-list::before,
    #shuiping-catalog[data-pc-mode="list"] .catalog-products .goods-list::after { display: none; }
    #shuiping-catalog[data-pc-mode="list"] .catalog-products .goods-column {
        float: none; width: auto; min-width: 0; padding: 0 !important;
    }
    #shuiping-catalog[data-pc-mode="list"] .catalog-products .table-goods {
        height: 100%; margin: 0;
    }
    /* One spacing layer: equal outer gutters and inter-card gaps. */
    #shuiping-catalog[data-pc-mode="grid"] .catalog-products > .catalog-all-panel,
    #shuiping-catalog[data-pc-mode="grid"] .catalog-products > .catalog-category { padding-left: 0; padding-right: 0; }
    #shuiping-catalog[data-pc-mode="grid"] .catalog-products .goods-list {
        display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px;
        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 .item-link { display: block; }
    #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; min-height: 0; overflow: visible; }
    #shuiping-catalog[data-pc-mode="grid"] .catalog-products .info-wrapper .title {
        word-break: break-all;
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
        margin: 0 0 5px; height: 44px; max-height: 44px; line-height: 22px;
        white-space: normal; overflow-wrap: anywhere; 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; }
}

/* Browser zoom reduces CSS viewport width: use four columns below this wide-screen breakpoint. */
@media (min-width: 992px) {
    #shuiping-catalog[data-pc-mode="list"] .catalog-products .goods-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #shuiping-catalog[data-pc-mode="grid"] .catalog-products .goods-list {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 16px;
    }
}