/* haoshangbuy (号港商城) UI — hsb-ui-20261016
   Harbour cyan, retail list layout. Deliberately different from haoshangpifa (navy/amber grid). */
:root{--hb-sea:#0b6e8f;--hb-sea-2:#08566f;--hb-sea-soft:#e9f5f8;--hb-ink:#15232b;--hb-text:#37474f;--hb-muted:#6b7b83;--hb-line:#dde7eb;--hb-bg:#f3f7f8;--hb-price:#d9480f}
body{background:var(--hb-bg)}
.site-logo-text{background:linear-gradient(110deg,#0b6e8f 0%,#19a3b8 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;font-weight:800!important}
.section-title:before,.section-title::before,.sidebar-title:before,.sidebar-title::before{background:var(--hb-sea)!important;border-radius:0!important;width:3px!important}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--hb-sea);outline-offset:2px}


/* ---- recolor: theme indigo -> harbour cyan (generated from frontend-cascade) ---- */
.pjax-bar{background:linear-gradient(90deg,#0b6e8f,#3a95b3)}
.site-announcement__head{background:#eef7fa}
.site-announcement__head .site-announcement__icon{background:linear-gradient(135deg,#0b6e8f 0%,#3a95b3 100%);box-shadow:0 2px 6px rgba(11,110,143,0.25)}
.site-logo-text{background:linear-gradient(135deg,#0b6e8f 0%,#2b7de9 100%)}
.main-nav a::after{background:linear-gradient(90deg,#0b6e8f,#3a95b3)}
.main-nav a:hover{color:#0b6e8f}
.main-nav a.active{color:#0b6e8f}
.nav-dropdown-menu a::before{background:#0b6e8f}
.nav-dropdown-menu a:hover{background:#eef7fa;color:#0b6e8f}
.header-action-btn:hover{background:#eef7fa;color:#0b6e8f}
.header-action-btn--text{background:#eef7fa;color:#0b6e8f}
.header-user:hover,.header-user-dropdown:hover .header-user{background:#eef7fa}
.header-user-menu-item:hover i.fa{color:#0b6e8f}
.header-menu-btn:hover{background:#eef7fa}
.mobile-nav-item:hover,.mobile-nav-item.active{background:#eef7fa;color:#0b6e8f}
.mobile-nav-sub-item:hover{background:#eef7fa;color:#0b6e8f}
.btn-primary{background:#0b6e8f;box-shadow:0 2px 8px rgba(11,110,143,0.25)}
.btn-primary:hover{background:#08566f;box-shadow:0 4px 12px rgba(11,110,143,0.35)}
.btn-outline:hover{border-color:#0b6e8f;color:#0b6e8f;background:#eef7fa}
.goods-card:hover .card-title{color:#0b6e8f}
.article-card:hover .card-title{color:#0b6e8f}
.article-grid .card:hover .card-title{color:#0b6e8f}
.breadcrumb a:hover{color:#0b6e8f}
.section-title::before{background:#0b6e8f}
.section-more:hover{color:#0b6e8f}
.hero-carousel{background:linear-gradient(135deg,#0b6e8f 0%,#1a6dd6 100%)}
.hero-slide{background:linear-gradient(135deg,#0b6e8f 0%,#1a6dd6 100%)}
.hero-slide .btn:hover,.hero .btn:hover{color:#0b6e8f}
.detail-thumb.active{border-color:#0b6e8f}
.spec-btn:hover{border-color:#0b6e8f;color:#0b6e8f}
.spec-btn.active{border-color:#0b6e8f;background:#e9f5f8;color:#0b6e8f}
.detail-form-field-input:focus{border-color:#0b6e8f;box-shadow:0 0 0 3px rgba(11,110,143,0.1)}
.detail-meta-tab-btn.active{color:#0b6e8f;border-bottom-color:#0b6e8f}
.detail-payment-item:hover{border-color:#0b6e8f}
.detail-payment-item.active{border-color:#0b6e8f;background:#e9f5f8;color:#0b6e8f}
.article-nav a:hover{color:#0b6e8f}
.search-input:focus{border-color:#0b6e8f;box-shadow:0 0 0 3px rgba(11,110,143,0.08)}
.empty-state .empty-icon{background:#e9f5f8;color:#0b6e8f}
.empty-btn{background:#0b6e8f;border:1px solid #0b6e8f}
.empty-btn:hover{background:#08566f;border-color:#08566f}
.empty-btn--ghost{color:#0b6e8f;border-color:#c9e4ec}
.empty-btn--ghost:hover{background:#e9f5f8;color:#0b6e8f;border-color:#b7dbe6}
.empty-tips i{color:#c9e4ec}
.empty-decor__dot--1{background:#c9e4ec}
.empty-decor__ring{border:2px dashed #dcedf3}
.empty-icon--glow::before,.empty-icon--glow::after{border:2px solid #c9e4ec}
.empty-feature:hover{border-color:#dcedf3;box-shadow:0 6px 18px rgba(11,110,143,0.08)}
.not-found-code{color:#0b6e8f}
.sidebar-title::before{background:#0b6e8f}
.sidebar-list a:hover{color:#0b6e8f}
.sidebar-post:hover{color:#0b6e8f}
.sidebar-rank.top{background:#0b6e8f}
.sidebar-tag:hover{border-color:#0b6e8f;color:#0b6e8f;background:#eef7fa}
.sidebar-goods-item:hover .sidebar-goods-name{color:#0b6e8f}
.sidebar-cat-parent:hover{color:#0b6e8f}
.sidebar-cat-child:hover{color:#0b6e8f}
.sidebar-user-btn--primary{background:#0b6e8f!important}
.sidebar-user-btn--primary:hover{background:#08566f!important}
.category-tab:hover{border-color:#0b6e8f;color:#0b6e8f}
.category-tab.active{background:#0b6e8f;border-color:#0b6e8f;box-shadow:0 2px 6px rgba(11,110,143,0.25)}
.category-tabs--sub .category-tab.active{background:#0b6e8f;border-color:#0b6e8f}
.goods-sort-link:hover{border-color:#0b6e8f;color:#0b6e8f}
.goods-sort-link.active{background:#0b6e8f;border-color:#0b6e8f}
.blog-article-card:hover .blog-article-title{color:#0b6e8f}
.sidebar-article-item:hover .sidebar-article-title{color:#0b6e8f}
.search-modal-tab.active{color:#0b6e8f}
.search-modal-bar button{color:#0b6e8f}
.search-modal-bar button:hover{color:#08566f}
.search-type-tab:hover{color:#0b6e8f}
.search-type-tab.active{color:#0b6e8f;border-bottom-color:#0b6e8f}
.pagination-btn:hover,.pagination-num:hover{border-color:#0b6e8f;color:#0b6e8f}
.pagination-num.active{background:#0b6e8f;border-color:#0b6e8f}
.comment-count{color:#0b6e8f}
.comment-textarea:focus{border-color:#0b6e8f;box-shadow:0 0 0 3px rgba(11,110,143,.1)}
.comment-submit-btn{background:#0b6e8f}
.comment-submit-btn:hover{background:#08566f;box-shadow:0 4px 12px rgba(11,110,143,.3)}
.comment-login-btn{color:#0b6e8f;border:1px solid #0b6e8f}
.comment-login-btn:hover{background:#0b6e8f}
.comment-reply-to b{color:#0b6e8f}
.comment-action-btn:hover{color:#0b6e8f}
.comment-load-replies-btn{color:#0b6e8f}
.comment-load-replies-btn:hover{color:#08566f}
.comment-page-btn:hover{border-color:#0b6e8f;color:#0b6e8f}
.comment-page-btn.active{background:#0b6e8f;border-color:#0b6e8f}
.article-tag{color:#3a95b3;background:#e9f5f8}
.article-tag:hover{background:#3a95b3}
.article-tag-label{color:#3a95b3;background:#e9f5f8}
.sidebar-tag:hover{background:#3a95b3}
.tag-page-icon{background:linear-gradient(135deg,#3a95b3,#3d6fe0)}
.tag-page-item.active{background:#3a95b3}
.auth-input-wrap:focus-within{border-color:#0b6e8f;box-shadow:0 0 0 3px rgba(11,110,143,0.1)}
.auth-input-wrap:focus-within>i.fa{color:#0b6e8f}
.auth-submit{background:linear-gradient(135deg,#0b6e8f,#2b7de9);box-shadow:0 4px 16px rgba(11,110,143,0.25)}
.auth-submit:hover{box-shadow:0 6px 24px rgba(11,110,143,0.35)}
.auth-footer a{color:#0b6e8f}
.coupon-intro i{color:#0b6e8f}
.coupon-card:hover{box-shadow:0 6px 20px rgba(11,110,143,0.12)}
.coupon-card__left{background:linear-gradient(135deg,#0b6e8f,#2b7de9)}
.coupon-card__tag{background:#e9f5f8;color:#0b6e8f}
.coupon-card__code-val{color:#0b6e8f}
.coupon-btn-ghost{color:#0b6e8f;border-color:#0b6e8f}
.coupon-btn-ghost:hover{background:#e9f5f8}
.coupon-btn-primary{background:#0b6e8f}
.coupon-btn-primary:hover{background:#08566f;box-shadow:0 2px 8px rgba(11,110,143,0.3)}
.detail-addr-item:hover{border-color:#b7dbe6}
.btn--outline:hover{color:#0b6e8f}

/* ---- notice: one-line bar everywhere, expand on demand (JS adds .hsb-open + button) ---- */
.site-announcement{display:flex;align-items:flex-start;gap:12px;background:var(--hb-sea-soft)!important;border:1px solid #cfe5ec!important;border-radius:10px!important;box-shadow:none!important;padding:10px 14px!important;margin:16px 0!important}
.site-announcement__head{flex:0 0 auto;background:none!important;border:0!important;padding:0!important;gap:8px!important}
.site-announcement__head .site-announcement__icon{background:var(--hb-sea)!important;box-shadow:none!important;width:24px!important;height:24px!important;border-radius:50%!important}
.site-announcement__title{color:var(--hb-sea-2)!important;font-size:13.5px!important}
.site-announcement__title-sep{display:none}
.site-announcement__body{flex:1 1 auto;min-width:0;padding:1px 0 0!important;background:none!important;font-size:13.5px!important;line-height:1.75!important;color:var(--hb-text)!important}
.site-announcement__body>p:first-child{display:none}
.site-announcement__body ul{margin:0!important;padding:0!important;list-style:none!important}
.site-announcement__body li{margin:0 0 4px!important}
.site-announcement__body strong{font-weight:600!important;color:var(--hb-ink)!important}
.site-announcement__body a{color:var(--hb-sea)!important;font-weight:600}
.site-announcement.hsb-collapsed .site-announcement__body{max-height:24px;overflow:hidden;white-space:nowrap}
.site-announcement.hsb-collapsed .site-announcement__body li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hsb-ann-toggle{flex:0 0 auto;align-self:flex-start;border:0;background:#fff;color:var(--hb-sea-2);font-size:12.5px;font-weight:600;border-radius:999px;padding:3px 11px;cursor:pointer;line-height:1.6}

/* ---- category tabs: one horizontal strip with arrows ---- */
.hsb-strip{position:relative;margin:0 0 6px}
.hsb-strip .category-tabs:not(.category-tabs--sub){display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding:2px 40px 6px 2px!important;gap:8px!important;mask-image:linear-gradient(90deg,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
.hsb-strip .category-tabs::-webkit-scrollbar{display:none}
.hsb-strip .category-tab{flex:0 0 auto!important;white-space:nowrap;border-radius:999px!important}
.hsb-strip .category-tab.active{background:var(--hb-sea)!important;border-color:var(--hb-sea)!important;color:#fff!important}
.hsb-strip .category-tab.active .category-tab-count{background:rgba(255,255,255,.22)!important;color:#fff!important}
.category-tab-icon[style]{background:var(--hb-sea-soft)!important;color:var(--hb-sea)!important}
.hsb-strip-btn{position:absolute;top:50%;transform:translateY(-60%);width:32px;height:32px;border-radius:50%;border:1px solid var(--hb-line);background:#fff;color:var(--hb-sea-2);font-size:18px;line-height:1;cursor:pointer;z-index:2;box-shadow:0 2px 6px rgba(21,35,43,.08)}
.hsb-strip-btn.prev{left:-6px}.hsb-strip-btn.next{right:-6px}
.hsb-strip-btn[hidden]{display:none}

/* ---- goods: retail list rows (image | title + stock | price + buy) ---- */
.goods-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
.goods-card{display:grid!important;grid-template-columns:76px minmax(0,1fr) auto;grid-template-rows:auto auto;grid-template-areas:"img title price" "img stats buy";column-gap:14px;row-gap:6px;align-items:center;padding:12px 14px!important;background:#fff!important;border:1px solid var(--hb-line)!important;border-radius:12px!important;box-shadow:none!important;transition:border-color .15s ease}
.goods-card:hover{border-color:#9fcbd9!important;transform:none!important;box-shadow:none!important}
.goods-card .card-img{grid-area:img;width:76px;height:76px;aspect-ratio:auto!important;border:0!important;border-radius:12px;background:#f2f6f7!important;display:flex;align-items:center;justify-content:center;overflow:hidden}
.goods-card .card-img img{width:62px!important;height:62px!important;object-fit:contain!important;border-radius:12px;transform:none!important}
.goods-card .goods-badge{display:none!important}
.goods-card .card-body{display:contents!important}
.goods-card .card-title{grid-area:title;margin:0!important;font-size:14px!important;font-weight:600!important;line-height:1.5!important;color:var(--hb-ink)!important;height:auto!important;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.goods-card .card-stats{grid-area:stats;margin:0!important;font-size:12.5px!important;color:var(--hb-muted)!important}
.goods-card .card-stats:after{content:" · 自动发货";color:var(--hb-sea)}
.goods-card .card-bottom{grid-area:price;margin:0!important;padding:0!important;border:0!important;justify-self:end;align-self:start}
.goods-card .price{font-size:18px!important;font-weight:800!important;color:var(--hb-price)!important;white-space:nowrap}
.goods-card:after{content:"购买";grid-area:buy;justify-self:end;align-self:end;padding:4px 14px;border-radius:999px;background:var(--hb-sea);color:#fff;font-size:12.5px;font-weight:700}
.goods-card:hover:after{background:var(--hb-sea-2)}

/* ---- long text (product description, articles): rule-under headings ---- */
.article-detail .detail-body{font-size:15px;line-height:1.85;color:var(--hb-text)}
.article-detail .detail-body h2{font-size:18px!important;font-weight:700!important;color:var(--hb-ink)!important;margin:30px 0 12px!important;padding:0 0 8px!important;border-bottom:2px solid var(--hb-sea-soft);line-height:1.4!important}
.article-detail .detail-body>h2:first-child,.article-detail .detail-body>article>:first-child{margin-top:0!important}
.article-detail .detail-body h3{font-size:16px!important;font-weight:700!important;color:var(--hb-sea-2)!important;margin:22px 0 8px!important}
.article-detail .detail-body p{margin:0 0 12px!important}
.article-detail .detail-body ul,.article-detail .detail-body ol{margin:0 0 14px!important;padding-left:22px!important}
.article-detail .detail-body ul{list-style:square outside!important}
.article-detail .detail-body ol{list-style:decimal outside!important}
.article-detail .detail-body li{display:list-item!important;margin:4px 0!important}
.article-detail .detail-body li::marker{color:var(--hb-sea)}
.article-detail .detail-body table{width:100%;border-collapse:collapse;margin:6px 0 16px;font-size:14px}
.article-detail .detail-body th,.article-detail .detail-body td{border-bottom:1px solid var(--hb-line);padding:9px 10px;text-align:left}
.article-detail .detail-body th{color:var(--hb-muted);font-weight:600;width:30%}
.article-detail .detail-body a{color:var(--hb-sea)}
.detail-actions .btn-primary{border-radius:999px!important;min-width:180px;font-weight:700}

/* related goods: single-column numbered list */
.seo-related-goods{padding:20px 22px!important}
.seo-related-goods>h2{font-size:17px!important;font-weight:700!important;margin:0 0 10px!important;color:var(--hb-ink)}
.seo-related-goods>ul{list-style:none!important;margin:0!important;padding:0!important;counter-reset:hsb;line-height:1.6!important}
.seo-related-goods>ul>li{counter-increment:hsb;border-top:1px solid var(--hb-line)}
.seo-related-goods>ul>li:first-child{border-top:0}
.seo-related-goods>ul>li>a{display:flex;align-items:baseline;gap:12px;padding:10px 4px;color:var(--hb-ink)!important;text-decoration:none!important;font-size:14px}
.seo-related-goods>ul>li>a:before{content:counter(hsb,decimal-leading-zero);flex:0 0 auto;font-size:12px;font-weight:700;color:var(--hb-sea);font-variant-numeric:tabular-nums}
.seo-related-goods>ul>li>a:hover{color:var(--hb-sea)!important}

/* placeholder covers -> text rows */
figure[data-article-cover]:has(img[src$="article-logo-cover.png"]){display:none!important}
.blog-article-card:has(img[src$="article-logo-cover.png"]) .blog-article-img,.sidebar-article-item:has(img[src$="article-logo-cover.png"]) .sidebar-article-img{display:none!important}
.blog-article-card:has(img[src$="article-logo-cover.png"]){padding:16px 18px!important;border-left:3px solid var(--hb-sea)!important}

@media (max-width:900px){
 .goods-grid{grid-template-columns:1fr!important}
}
@media (max-width:640px){
 .site-announcement{flex-wrap:wrap}
 .site-announcement__body{flex-basis:100%;order:3}
 .hsb-ann-toggle{margin-left:auto}
 .goods-card{grid-template-columns:64px minmax(0,1fr) auto;padding:10px 12px!important;column-gap:12px}
 .goods-card .card-img{width:64px;height:64px}
 .goods-card .card-img img{width:52px!important;height:52px!important}
 .goods-card .card-title{font-size:13.5px!important}
 .goods-card .price{font-size:16px!important}
 .hsb-strip-btn{display:none!important}
 .hsb-strip .category-tabs:not(.category-tabs--sub){padding-right:24px!important}
}
/* fixes: strip must not widen the page; stock line left-aligned */
.hsb-strip{min-width:0;max-width:100%;width:100%;overflow:hidden}
.hsb-strip .category-tabs:not(.category-tabs--sub){min-width:0;max-width:100%}
.hsb-strip-btn.prev{left:0}.hsb-strip-btn.next{right:0}
.goods-card .card-stats{display:block!important}
.goods-card .card-stats>span{display:inline!important}
body{grid-template-columns:minmax(0,1fr)!important}
body>*{min-width:0}

/* Show every category without a carousel or collapsed height, 20261020 */
.category-tabs,.hsb-strip .category-tabs,.category-tabs.hsp-tabs-collapsed{display:flex!important;flex-wrap:wrap!important;align-items:center;gap:10px!important;overflow:visible!important;overflow-x:visible!important;max-height:none!important;height:auto!important;white-space:normal!important;scroll-snap-type:none!important;padding:0!important;mask-image:none!important;-webkit-mask-image:none!important}
.category-tabs .category-tab{flex:0 0 auto!important;max-width:100%!important;box-sizing:border-box;white-space:normal!important}
.category-tab .category-tab-name{overflow-wrap:anywhere}
.hsb-strip-btn,.hsp-tabs-more{display:none!important}
.hsb-strip{overflow:visible!important;padding:0!important}
@media(max-width:600px){.category-tabs,.hsb-strip .category-tabs{gap:8px!important}.category-tabs .category-tab{font-size:13px!important;padding:8px 10px!important}}

/* Hide empty category tabs only; keep records and direct URLs intact. */
.category-tabs .category-tab[data-empty-category="true"]{display:none!important}