/* ════════════════════════════════════════════════════════
   ChinaHub — products.css  v2.0  (April 2026)
   Temu-Level Product Listing UI
   Builds ON main.css — zero conflicts
   All classes: chp-* prefix
════════════════════════════════════════════════════════ */

/* ── Flash sale banner ───────────────────────────────── */
#chpFlash {
    display:flex; align-items:center; justify-content:center;
    gap:10px; padding:7px 14px;
    background:#111; border-bottom:2px solid #FF6A00;
    flex-wrap:nowrap; overflow:hidden;
}
.chp-flash-pill {
    display:inline-flex; align-items:center; gap:5px; flex-shrink:0;
    background:linear-gradient(90deg,#FF6A00,#D32F2F);
    color:#fff; font-size:9.5px; font-weight:900;
    letter-spacing:1.5px; text-transform:uppercase;
    padding:4px 11px; border-radius:4px;
}
.chp-flash-pulse { animation:chpPulse .85s ease infinite; display:inline-block }
@keyframes chpPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.6)} }
.chp-flash-label { color:#777; font-size:11px; flex-shrink:0 }
.chp-flash-timer { display:flex; align-items:center; gap:3px; flex-shrink:0 }
.chp-flash-unit {
    background:#1A1A1A; border:1px solid #2A2A2A; border-radius:4px;
    padding:2px 7px; font-size:14px; font-weight:800; min-width:28px;
    text-align:center; font-variant-numeric:tabular-nums; color:#FF6A00;
}
.chp-flash-sep { color:#333; font-weight:900; font-size:12px; margin:0 1px }

/* ── Filter bar ──────────────────────────────────────── */
#chpFbar {
    background:#fff; border-bottom:1px solid #EAEAEA;
    position:sticky;
    top:52px;   /* mobile nav height */
    z-index:700;
    box-shadow:0 1px 6px rgba(0,0,0,.06);
}
@media(min-width:769px) { #chpFbar { top:68px } } /* desktop nav height */

.chp-fbar-inner {
    max-width:1600px; margin:0 auto;
    padding:7px 12px;
    display:flex; align-items:center; gap:5px;
    overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}
.chp-fbar-inner::-webkit-scrollbar { display:none }

/* Search */
.chp-fsearch { position:relative; flex-shrink:0 }
.chp-fsearch input {
    border:1.5px solid #E0E0E0; border-radius:999px;
    padding:6px 12px 6px 28px; font-size:11.5px;
    width:140px; outline:none;
    font-family:inherit; background:#F7F7F7; color:#111;
    transition:border-color .15s, background .15s;
}
[dir=rtl] .chp-fsearch input { padding:6px 28px 6px 12px }
.chp-fsearch input:focus { border-color:#FF6A00; background:#fff }
.chp-fsi {
    position:absolute; left:9px; top:50%; transform:translateY(-50%);
    color:#AAA; font-size:10px; pointer-events:none;
}
[dir=rtl] .chp-fsi { left:auto; right:9px }

/* Divider */
.chp-fdiv { width:1px; height:18px; background:#E5E5E5; flex-shrink:0; margin:0 2px }

/* Filter chip buttons */
.chp-chip {
    display:inline-flex; align-items:center; gap:3px;
    padding:5px 10px; border-radius:999px;
    border:1.5px solid #E0E0E0; background:#fff;
    font-size:11px; font-weight:500; font-family:inherit;
    cursor:pointer; white-space:nowrap; color:#555;
    transition:.14s ease; flex-shrink:0;
}
.chp-chip:hover, .chp-chip.on {
    border-color:#FF6A00; color:#FF6A00; background:rgba(255,106,0,.07)
}
.chp-chip .caret { font-size:8px; opacity:.4 }
label.chp-chip input { display:none }
label.chp-chip:has(input:checked) {
    border-color:#FF6A00; color:#FF6A00; background:rgba(255,106,0,.07)
}

/* Sort select */
.chp-sort {
    border:1.5px solid #E0E0E0; border-radius:999px;
    padding:5px 10px; font-size:11px; font-weight:500;
    font-family:inherit; background:#fff; color:#555;
    cursor:pointer; outline:none; flex-shrink:0;
    transition:border-color .14s;
}
.chp-sort:focus { border-color:#FF6A00 }

/* Result count */
.chp-rcount {
    margin-inline-start:auto; font-size:10.5px;
    color:#AAA; white-space:nowrap; flex-shrink:0;
}
.chp-rcount strong { color:#111; font-weight:700 }

/* Dropdown panels */
.chp-drop { position:relative }
.chp-panel {
    position:absolute; top:calc(100% + 8px); inset-inline-start:0;
    background:#fff; border:1px solid #E8E8E8; border-radius:12px;
    box-shadow:0 8px 28px rgba(0,0,0,.12);
    padding:13px; min-width:190px; z-index:900;
    display:none; animation:chpPanelIn .12s ease;
}
.chp-panel.open { display:block }
@keyframes chpPanelIn {
    from { opacity:0; transform:translateY(-4px) }
    to   { opacity:1; transform:translateY(0) }
}
.chp-panel h5 {
    font-size:9px; font-weight:700; color:#999;
    text-transform:uppercase; letter-spacing:.6px; margin-bottom:9px;
}
.chp-fp-scroll {
    max-height:175px; overflow-y:auto;
    display:flex; flex-direction:column; gap:4px;
}
.chp-fp-label {
    display:flex; align-items:center; gap:7px;
    font-size:12px; cursor:pointer; padding:2px 0; color:#333;
}
.chp-fp-label input { accent-color:#FF6A00; flex-shrink:0 }
.chp-pr { display:flex; gap:6px; align-items:center }
.chp-pr input {
    flex:1; width:0; border:1.5px solid #E0E0E0; border-radius:6px;
    padding:6px 7px; font-size:12px; font-family:inherit; outline:none;
}
.chp-pr input:focus { border-color:#FF6A00 }
.chp-pr span { color:#BBB; font-size:11px }
.chp-apply {
    width:100%; margin-top:9px; background:#FF6A00; color:#fff;
    border:none; border-radius:6px; padding:8px;
    font-size:12px; font-weight:700; font-family:inherit; cursor:pointer;
    transition:background .14s;
}
.chp-apply:hover { background:#E05500 }
.chp-rl { display:flex; flex-direction:column; gap:5px }
.chp-ro { display:flex; align-items:center; gap:7px; font-size:12px; cursor:pointer; padding:2px 0 }
.chp-ro input { accent-color:#FF6A00 }

/* ── Page wrapper ─────────────────────────────────── */
#chpWrap {
    max-width:1600px; margin:0 auto;
    padding:6px 5px 60px;
    background:#EDEEF2;
    min-height:80vh;
}

/* ── Product grid ─────────────────────────────────── */
#chpGrid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:5px;
}
@media(min-width:480px)  { #chpGrid { grid-template-columns:repeat(3,1fr) } }
@media(min-width:768px)  { #chpGrid { grid-template-columns:repeat(4,1fr); gap:7px } }
@media(min-width:960px)  { #chpGrid { grid-template-columns:repeat(5,1fr) } }
@media(min-width:1200px) { #chpGrid { grid-template-columns:repeat(6,1fr); gap:8px } }

/* ════════════════════════════════════════════════════
   PRODUCT CARD
════════════════════════════════════════════════════ */
.chp-card {
    background:#fff;
    border-radius:10px;
    overflow:hidden;
    position:relative;
    display:flex; flex-direction:column;
    border:none;
    box-shadow:0 1px 2px rgba(0,0,0,.07), 0 2px 6px rgba(0,0,0,.04);
    transition:box-shadow .15s ease, transform .15s ease;
    animation:chpCardIn .22s ease both;
    cursor:pointer;
}
.chp-card:hover {
    box-shadow:0 4px 18px rgba(0,0,0,.13);
    transform:translateY(-2px);
}
@keyframes chpCardIn {
    from { opacity:0; transform:translateY(7px) }
    to   { opacity:1; transform:translateY(0) }
}

/* ── Image area ──────────────────────────────────── */
.chp-img-wrap {
    position:relative;
    width:100%; padding-top:100%; /* strict 1:1 */
    overflow:hidden;
    background:#F4F4F4;
    flex-shrink:0;
}
.chp-img-wrap img {
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    transition:transform .4s ease;
}
.chp-card:hover .chp-img-wrap img { transform:scale(1.05) }

/* ── Badges ──────────────────────────────────────── */
.chp-badges {
    position:absolute; top:0; inset-inline-start:0;
    padding:5px;
    display:flex; flex-direction:column; gap:3px;
    z-index:3; pointer-events:none;
}
.chp-bdg {
    display:inline-flex; align-items:center; gap:2px;
    padding:2px 5px; border-radius:3px;
    font-size:8px; font-weight:900; line-height:1.4;
    width:fit-content; letter-spacing:.2px;
    text-transform:uppercase; white-space:nowrap;
}
.chp-bdg-flash { background:linear-gradient(90deg,#FF6A00,#D32F2F); color:#fff }
.chp-bdg-best  { background:#F59E0B; color:#5C3000 }
.chp-bdg-hot   { background:#D32F2F; color:#fff }
.chp-bdg-trend { background:#7B2FBE; color:#fff }
.chp-bdg-new   { background:#1A8A55; color:#fff }
.chp-bdg-disc  { background:#D32F2F; color:#fff }

/* ── Wishlist ────────────────────────────────────── */
.chp-wish {
    position:absolute; top:5px; inset-inline-end:5px; z-index:4;
    width:28px; height:28px; border-radius:50%;
    background:rgba(255,255,255,.92); border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 1px 5px rgba(0,0,0,.18);
    transition:transform .15s;
}
.chp-wish:hover { transform:scale(1.1) }
.chp-wish.on svg { fill:#FF3B30; stroke:#FF3B30 }

/* ── Fast shipping strip ─────────────────────────── */
.chp-fast-strip {
    position:absolute; bottom:0; left:0; right:0;
    background:linear-gradient(0deg,rgba(0,0,0,.55),transparent);
    color:#fff; font-size:8px; font-weight:700;
    padding:16px 7px 5px; letter-spacing:.4px; text-transform:uppercase;
    display:flex; align-items:center; gap:3px; pointer-events:none;
}

/* ── Floating cart button ────────────────────────── */
.chp-cart-btn {
    position:absolute; bottom:7px; inset-inline-end:7px; z-index:4;
    width:30px; height:30px; border-radius:50%;
    background:#FF6A00; border:2.5px solid #fff; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 8px rgba(255,106,0,.5);
    transition:background .15s, transform .15s;
}
.chp-cart-btn:hover { background:#E05500; transform:scale(1.08) }
.chp-cart-btn.done  { background:#1A8A55 }
.chp-cart-btn.busy  { opacity:.65; pointer-events:none }
.chp-cart-btn svg   { pointer-events:none }

/* ── Card body ───────────────────────────────────── */
.chp-body { padding:6px 8px 9px; display:flex; flex-direction:column; gap:0; flex:1 }

.chp-cat {
    font-size:9.5px; color:#FF6A00; font-weight:600;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    margin-bottom:2px;
}
.chp-title {
    font-size:12px; font-weight:400; color:#111; line-height:1.4;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; margin-bottom:3px; text-decoration:none;
}
.chp-title:hover { color:#FF6A00 }

/* Stars */
.chp-stars { display:flex; align-items:center; gap:2px; margin-bottom:3px }
.chp-star-f { color:#FFB800; font-size:11px; font-style:normal }
.chp-star-h { color:#FFB800; font-size:11px; font-style:normal; opacity:.5 }
.chp-star-e { color:#DDD;    font-size:11px; font-style:normal }
.chp-rat-val { font-size:10.5px; font-weight:700; color:#333; margin-inline-start:2px }
.chp-rat-cnt { font-size:10px; color:#AAA }

/* Price */
.chp-price-new {
    display:block;
    font-size:17px; font-weight:900; color:#111;
    font-variant-numeric:tabular-nums; letter-spacing:-.4px;
    line-height:1.1; margin-bottom:2px;
}
.chp-price-row { display:flex; align-items:center; gap:5px }
.chp-price-old { font-size:10.5px; color:#BBB; text-decoration:line-through }
.chp-disc-pct {
    font-size:9.5px; font-weight:800; color:#fff;
    background:#D32F2F; padding:1px 5px; border-radius:3px;
}

/* Sold */
.chp-sold { display:flex; align-items:center; gap:3px; font-size:9.5px; color:#999; margin-top:2px }
.chp-sold strong { color:#555; font-weight:700 }

/* Scarcity */
.chp-scarcity {
    font-size:10px; font-weight:700; color:#FF6A00;
    margin-top:2px; display:flex; align-items:center; gap:3px;
}
.chp-scarcity-dot {
    width:5px; height:5px; border-radius:50%;
    background:#FF6A00; flex-shrink:0;
    animation:chpBlink .9s infinite;
}
@keyframes chpBlink { 0%,100%{opacity:1} 50%{opacity:.15} }

/* Verified */
.chp-verified {
    display:flex; align-items:center; gap:3px;
    font-size:9.5px; font-weight:600; color:#1A8A55; margin-top:2px;
}

/* ── Skeleton ────────────────────────────────────── */
.chp-skel {
    background:linear-gradient(90deg,#F0F0F0 25%,#E8E8E8 50%,#F0F0F0 75%);
    background-size:200% 100%;
    animation:chpSkelAnim 1.4s infinite;
    border-radius:4px;
}
@keyframes chpSkelAnim { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── Empty state ─────────────────────────────────── */
.chp-empty { grid-column:1/-1; text-align:center; padding:60px 20px; color:#AAA }
.chp-empty .ei { font-size:42px; margin-bottom:12px }
.chp-empty h3  { font-size:16px; color:#777; margin-bottom:6px }

/* ── Infinite scroll ─────────────────────────────── */
#chpSentinel { height:50px; display:flex; align-items:center; justify-content:center; margin-top:8px }
.chp-spinner { width:24px; height:24px; border-radius:50%; border:3px solid #E0E0E0; border-top-color:#FF6A00; animation:chpSpin .6s linear infinite; display:none }
.chp-spinner.show { display:block }
@keyframes chpSpin { to { transform:rotate(360deg) } }

/* ── Toast ───────────────────────────────────────── */
#chpToast {
    position:fixed; bottom:72px; left:50%; transform:translateX(-50%);
    background:rgba(0,0,0,.85); color:#fff;
    padding:9px 20px; border-radius:999px;
    font-size:12.5px; font-weight:600;
    box-shadow:0 4px 18px rgba(0,0,0,.25);
    z-index:9999; opacity:0; pointer-events:none;
    transition:opacity .2s ease; white-space:nowrap;
}
#chpToast.show { opacity:1 }