/*
 * ChinaHub — assets/css/products.css  v10.4  ✦ DEFINITIVE EDITION
 * ══════════════════════════════════════════════════════════════════
 * Design System: spacing 4/8/12/16/20/24/32  ·  type 12→24px
 * Premium refinement pass — production marketplace quality
 * prefix: chp-
 */

/* ══════════════════════════════════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════════════════════════════════ */
:root {
    /* — Spacing — */
    --s1:  4px;
    --s2:  8px;
    --s3:  12px;
    --s4:  16px;
    --s5:  20px;
    --s6:  24px;
    --s8:  32px;

    /* — Typography — */
    --t-xs:  12px;
    --t-sm:  13px;
    --t-base:14px;
    --t-md:  15px;
    --t-lg:  16px;
    --t-xl:  18px;
    --t-2xl: 20px;
    --t-3xl: 24px;

    /* — Font weights — */
    --fw-reg:  400;
    --fw-med:  500;
    --fw-semi: 600;
    --fw-bold: 700;

    /* — Border radii — */
    --r-card:  16px;
    --r-btn:   14px;
    --r-badge: 999px;
    --r-input: 12px;
    --r-chip:  999px;
    --r-sheet: 20px;

    /* — Brand colours — */
    --orange:       #FF6A00;
    --orange-dk:    #E55A00;
    --orange-lt:    rgba(255,106,0,.08);
    --red:          #FF3C1F;
    --green:        #16a34a;
    --green-lgt:    rgba(22,163,74,.08);
    --amber:        #F59E0B;

    /* — Neutrals — */
    --n50:  #FAFAFA;
    --n100: #F5F5F5;
    --n150: #EFEFEF;
    --n200: #E8E8E8;
    --n300: #D1D5DB;
    --n400: #9CA3AF;
    --n500: #6B7280;
    --n600: #4B5563;
    --n900: #111827;

    /* — Shadows — */
    --sh-card:   0 1px 2px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.06);
    --sh-hover:  0 0 0 1.5px rgba(255,106,0,.15), 0 8px 24px rgba(0,0,0,.10);
    --sh-panel:  0 8px 32px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.06);
    --sh-top:    0 -2px 8px rgba(0,0,0,.08);
    --sh-btn:    0 2px 8px rgba(255,106,0,.24);
    --sh-float:  0 4px 16px rgba(0,0,0,.12);

    /* — Alias vars (used in override section) — */
    --pri:        #FF6A00;
    --accent:     #FF6A00;
    --accent-red: #CC0000;
    --pri-dk:     #E05500;
    --pri-lt:     rgba(255,106,0,.08);
    --surface:    #FFFFFF;
    --bg:         #F2F2F2;
    --border:     #EBEBEB;
    --text:       #111111;
    --text-2:     #444444;
    --text-3:     #888888;
    --radius-md:  12px;
    --radius-sm:  8px;
}

/* ══════════════════════════════════════════════════════════════════
   GLOBAL
══════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box }
html {
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
}

/* ══════════════════════════════════════════════════════════════════
   KEYFRAMES
══════════════════════════════════════════════════════════════════ */
@keyframes chpRainbow  { to { background-position: -300% 0 } }
@keyframes chpFire     { from{transform:scale(1)rotate(-4deg)} to{transform:scale(1.2)rotate(4deg)} }
@keyframes chpTick     { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes chpIn       { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes chpPanelIn  { from{opacity:0;transform:translateY(-4px)scale(.97)} to{opacity:1;transform:none} }
@keyframes chpSheetUp  { from{transform:translateY(100%)} to{transform:translateY(0)} }
@keyframes chpSkel     { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@keyframes chpSpin     { to{transform:rotate(360deg)} }
@keyframes chpBlink    { 0%,100%{opacity:1} 50%{opacity:.1} }
@keyframes chpCartIn   { from{opacity:0;transform:scale(.7)} to{opacity:1;transform:scale(1)} }
@keyframes chpBarIn    { from{transform:translateY(100%)} to{transform:translateY(0)} }

/* ══════════════════════════════════════════════════════════════════
   FREE SHIPPING BAR
══════════════════════════════════════════════════════════════════ */
#chpShipBar {
    background: var(--n900); color: rgba(255,255,255,.72);
    padding: 5px var(--s4);
    display: flex; align-items: center; justify-content: center;
    gap: var(--s3); font-size: var(--t-xs); font-weight: var(--fw-med);
    min-height: 28px; /* compact */
}
.chp-ship-track {
    width: 72px; height: 3px;
    background: rgba(255,255,255,.1); border-radius: var(--r-badge);
    overflow: hidden; flex-shrink: 0;
}
.chp-ship-fill {
    height: 100%; background: var(--green);
    border-radius: var(--r-badge); transition: width .8s ease; width: 0%;
}
#chpShipBar strong { color: #4ADE80; font-weight: var(--fw-semi) }

/* ══════════════════════════════════════════════════════════════════
   FLASH SALE — COMPACT
══════════════════════════════════════════════════════════════════ */
#chpFlash {
    background: #0A0A0A; position: relative; overflow: hidden;
    display: flex; align-items: stretch; min-height: 38px;
}
#chpFlash::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg,var(--orange),var(--red),#F59E0B,var(--orange),var(--red),#F59E0B);
    background-size: 300% 100%; animation: chpRainbow 3s linear infinite;
}
.chp-fl-left {
    display: flex; align-items: center; gap: var(--s2);
    padding: 6px var(--s3); flex-shrink: 0;
    border-inline-end: 1px solid rgba(255,255,255,.07);
}
.chp-fp {
    display: inline-flex; align-items: center; gap: var(--s1);
    background: linear-gradient(90deg,var(--orange),var(--red));
    color: #fff; font-size: 8px; font-weight: 900; letter-spacing: 1.5px;
    text-transform: uppercase; padding: 3px var(--s2); border-radius: 4px;
}
.chp-fp-fire { animation: chpFire .55s ease-in-out infinite alternate; display: inline-block; font-size: 10px }
.chp-ft { display: flex; align-items: center; gap: var(--s1) }
.chp-fu-wrap { display: flex; flex-direction: column; align-items: center }
.chp-fu {
    background: rgba(255,106,0,.12); border: 1px solid rgba(255,106,0,.25);
    border-radius: 4px; min-width: 24px; padding: 1px var(--s1);
    font-size: 14px; font-weight: 900; color: var(--orange); text-align: center;
    font-variant-numeric: tabular-nums; line-height: 1.25;
}
.chp-fu-u { font-size: 6px; color: rgba(255,255,255,.28); text-transform: uppercase; letter-spacing: .4px; margin-top: 1px }
.chp-fsp { color: rgba(255,106,0,.45); font-size: 13px; font-weight: 900; margin: 0 1px; padding-bottom: 4px }
.chp-fl-ticker { flex: 1; overflow: hidden; display: flex; align-items: center; padding: 0 var(--s3); min-width: 0 }
.chp-ticker-track { display: flex; gap: 28px; white-space: nowrap; animation: chpTick 26s linear infinite }
.chp-ticker-track:hover { animation-play-state: paused }
.chp-tick-item { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: rgba(255,255,255,.55); flex-shrink: 0 }
.chp-tick-badge { background: rgba(255,106,0,.12); color: #FF9050; font-size: 7.5px; font-weight: 800; padding: 1px 5px; border-radius: 3px }

@media (max-width: 599px) {
    #chpFlash { min-height: 32px }
    .chp-fl-left { padding: 4px var(--s2) }
    .chp-fu { font-size: 12px; min-width: 20px }
    .chp-fl-ticker { display: none } /* space saving on mobile */
}

/* ══════════════════════════════════════════════════════════════════
   CATEGORY STRIP
══════════════════════════════════════════════════════════════════ */
#chpCats { background: #fff; border-bottom: 1px solid var(--n150) }
.chp-cs-inner {
    max-width: 1600px; margin: 0 auto; padding: var(--s1) var(--s2);
    display: flex; gap: var(--s1); overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}
.chp-cs-inner::-webkit-scrollbar { display: none }
.chp-cs-item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 5px var(--s2); border-radius: 10px; border: 1.5px solid transparent;
    cursor: pointer; transition: all .15s; flex-shrink: 0;
    text-decoration: none; background: var(--n100); min-width: 48px;
    scroll-snap-align: start;
}
.chp-cs-item:hover  { border-color: var(--orange); background: var(--orange-lt) }
.chp-cs-item.active {
    border-color: var(--orange); background: var(--orange-lt);
    box-shadow: 0 0 0 3px rgba(255,106,0,.09);
}
.chp-cs-ico { font-size: 16px; line-height: 1 }
.chp-cs-lbl {
    font-size: 10px; font-weight: var(--fw-semi); color: var(--n500);
    white-space: nowrap; text-align: center;
    max-width: none; overflow: visible; text-overflow: clip;
}
.chp-cs-item.active .chp-cs-lbl { color: var(--orange) }

/* ══════════════════════════════════════════════════════════════════
   FILTER BAR
══════════════════════════════════════════════════════════════════ */
#chpFbar {
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(16px) saturate(160%);
    border-bottom: 1px solid rgba(0,0,0,.06);
    position: sticky; top: 52px; z-index: 700;
    box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.03);
}
@media (min-width: 769px) { #chpFbar { top: 68px } }

.chp-fb-inner {
    max-width: 1600px; margin: 0 auto; padding: 6px var(--s3);
    display: flex; align-items: center; gap: var(--s1);
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.chp-fb-inner::-webkit-scrollbar { display: none }

.chp-fbs { position: relative; flex-shrink: 0 }
.chp-fbs input {
    border: 1.5px solid var(--n200); border-radius: var(--r-input);
    padding: 5px var(--s3) 5px 26px;
    font-size: var(--t-xs); width: 130px;
    outline: none; font-family: inherit; background: var(--n100); color: var(--n900);
    height: 34px; /* consistent with chips */
    transition: border-color .15s, width .2s, box-shadow .15s;
}
[dir=rtl] .chp-fbs input { padding: 5px 26px 5px var(--s3) }
.chp-fbs input:focus {
    border-color: var(--orange); background: #fff; width: 155px;
    box-shadow: 0 0 0 3px rgba(255,106,0,.09);
}
.chp-fbs-ico {
    position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
    font-size: 9.5px; color: var(--n300); pointer-events: none;
}
[dir=rtl] .chp-fbs-ico { left: auto; right: 9px }

/* Divider */
.chp-fbd { width: 1px; height: 14px; background: var(--n200); flex-shrink: 0; margin: 0 var(--s1) }

/* Pill chips — spec: height 34–38px, pill radius, 13–14px font */
.chp-pill {
    display: inline-flex; align-items: center; gap: 5px;
    height: 36px; /* spec: 34–38px */
    padding: 0 var(--s3);
    border-radius: var(--r-chip); border: 1.5px solid var(--n200);
    background: #fff; font-size: 13px; /* spec: 13–14px */
    font-weight: var(--fw-med);
    font-family: inherit; cursor: pointer; white-space: nowrap;
    color: var(--n500); transition: all .12s; flex-shrink: 0;
}
.chp-pill:hover, .chp-pill.on { border-color: var(--orange); color: var(--orange); background: var(--orange-lt) }
.chp-pill .arr { font-size: 6px; opacity: .4 }
label.chp-pill input { display: none }
label.chp-pill:has(input:checked) { border-color: var(--orange); color: var(--orange); background: var(--orange-lt) }

.chp-sort {
    border: 1.5px solid var(--n200); border-radius: var(--r-chip);
    padding: 0 var(--s3); height: 36px; /* match pill height */
    font-size: 13px; font-weight: var(--fw-med);
    font-family: inherit; background: #fff; color: var(--n500);
    cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .12s;
}
.chp-sort:focus { border-color: var(--orange) }

.chp-fbc { margin-inline-start: auto; font-size: var(--t-xs); color: var(--n400); white-space: nowrap; flex-shrink: 0 }
.chp-fbc b { color: var(--n600); font-weight: var(--fw-semi) }

/* Dropdown panel */
.chp-drop { position: relative }
.chp-panel {
    position: absolute; top: calc(100% + var(--s2)); inset-inline-start: 0;
    background: #fff; border: 1px solid rgba(0,0,0,.07); border-radius: var(--r-card);
    box-shadow: var(--sh-panel); padding: var(--s3); min-width: 185px;
    z-index: 900; display: none; animation: chpPanelIn .13s ease;
}
.chp-panel.open { display: block }
.chp-panel-title { font-size: var(--t-xs); font-weight: var(--fw-bold); color: var(--n300); text-transform: uppercase; letter-spacing: .7px; margin-bottom: var(--s2) }
.chp-scroll { max-height: 165px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s1) }
.chp-plabel { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-base); cursor: pointer; padding: var(--s1) 0; color: var(--n600) }
.chp-plabel input { accent-color: var(--orange); flex-shrink: 0 }
.chp-rat-list { display: flex; flex-direction: column; gap: var(--s1) }
.chp-rat-opt { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-base); cursor: pointer; padding: var(--s1) 0 }
.chp-rat-opt input { accent-color: var(--orange) }

/* Price slider */
.chp-sld-wrap { padding: var(--s1) 0 }
.chp-sld-track { position: relative; height: 4px; background: var(--n200); border-radius: var(--r-badge); margin-bottom: var(--s3) }
.chp-sld-fill  { position: absolute; height: 100%; background: linear-gradient(90deg,var(--orange),var(--red)); border-radius: var(--r-badge) }
.chp-sld-inputs { position: relative; height: 20px; margin-bottom: var(--s2) }
.chp-sld-r { position: absolute; width: 100%; height: 4px; -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; top: 0 }
.chp-sld-r::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--orange); cursor: pointer; pointer-events: all; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(255,106,0,.4); margin-top: -8px }
.chp-sld-r::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--orange); cursor: pointer; pointer-events: all; border: 2px solid #fff }
.chp-sld-vals { display: flex; justify-content: space-between; font-size: var(--t-xs); font-weight: var(--fw-bold); color: var(--n600); margin-bottom: var(--s2) }
.chp-sld-apply { width: 100%; background: var(--orange); color: #fff; border: none; border-radius: var(--r-btn); padding: var(--s2) var(--s3); font-size: var(--t-xs); font-weight: var(--fw-bold); font-family: inherit; cursor: pointer; height: 36px }

/* Density toggles */
.chp-vt { display: flex; gap: 3px; flex-shrink: 0 }
.chp-vt-btn { width: 28px; height: 28px; border-radius: var(--s2); border: 1.5px solid var(--n200); background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 11.5px; color: var(--n400); transition: all .12s }
.chp-vt-btn.on { border-color: var(--orange); background: var(--orange); color: #fff }

@media (max-width: 599px) {
    .chp-fb-inner { padding: 5px var(--s2) }
    .chp-fbs input { width: 110px }
    .chp-fbs input:focus { width: 140px }
    .chp-fbc, .chp-vt { display: none }
}

/* Active chips */
#chpChips {
    background: #fff; border-bottom: 1px solid var(--n150);
    padding: 5px var(--s3);
    display: flex; align-items: center; gap: 6px;
    overflow-x: auto; scrollbar-width: none;
}
#chpChips::-webkit-scrollbar { display: none }
.chp-chips-lbl { font-size: var(--t-xs); color: var(--n300); flex-shrink: 0; margin-inline-end: var(--s1) }
.chp-chip {
    display: inline-flex; align-items: center; gap: var(--s1);
    padding: 4px var(--s2); border-radius: var(--r-badge);
    background: rgba(255,106,0,.07); border: 1px solid rgba(255,106,0,.18);
    color: var(--orange-dk); font-size: var(--t-xs); font-weight: var(--fw-semi);
    text-decoration: none; white-space: nowrap; flex-shrink: 0;
}
.chp-chip-x { opacity: .5 }
.chp-chip-clear {
    display: inline-flex; align-items: center;
    padding: 4px var(--s2); border-radius: var(--r-badge);
    background: var(--n100); border: 1px solid var(--n200);
    color: var(--n500); font-size: var(--t-xs); font-weight: var(--fw-semi);
    text-decoration: none; white-space: nowrap; flex-shrink: 0; cursor: pointer;
}

/* Quick presets */
#chpPresets {
    background: var(--n50); border-bottom: 1px solid var(--n150);
    padding: 6px var(--s2);
    display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
}
#chpPresets::-webkit-scrollbar { display: none }
.chp-preset {
    display: inline-flex; align-items: center; gap: var(--s1);
    padding: 5px var(--s3); border-radius: var(--r-badge);
    border: 1.5px solid var(--n200); background: #fff;
    font-size: var(--t-xs); font-weight: var(--fw-semi); color: var(--n600);
    text-decoration: none; white-space: nowrap; flex-shrink: 0;
    transition: all .12s;
}
.chp-preset:hover { border-color: var(--orange); color: var(--orange); background: var(--orange-lt) }
.chp-preset.on { border-color: var(--orange); background: var(--orange-lt); color: var(--orange-dk) }

/* Results header */
#chpResultsHead {
    max-width: 1600px; margin: 0 auto;
    padding: var(--s3) var(--s4) 0;
    display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap;
}
#chpResultsHead h1 { font-size: var(--t-lg); font-weight: var(--fw-bold); color: var(--n900); margin: 0 }
.chp-rh-count { font-size: var(--t-xs); color: var(--n400) }

/* Category hero */
#chpCatHero { position: relative; background: #1A1A1A; overflow: hidden; min-height: 90px; display: flex; align-items: flex-end; background-size: cover; background-position: center }
#chpCatHero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top,rgba(0,0,0,.75) 0%,transparent 100%) }
.chp-ch-inner { position: relative; z-index: 2; padding: var(--s3) var(--s4); max-width: 1600px; margin: 0 auto; width: 100% }
.chp-ch-icon  { font-size: 22px; display: block; margin-bottom: var(--s1) }
.chp-ch-title { font-size: var(--t-xl); font-weight: 900; color: #fff; margin: 0 0 var(--s1) }
.chp-ch-sub   { font-size: var(--t-xs); color: rgba(255,255,255,.55) }

/* ══════════════════════════════════════════════════════════════════
   GRID
══════════════════════════════════════════════════════════════════ */
#chpWrap {
    max-width: 1600px; margin: 0 auto;
    padding: var(--s2) var(--s1) 104px; /* bottom for sticky cart */
    background: #F0F0F2; min-height: 80vh;
}
#chpGrid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: var(--s3);           /* 12px */
    align-items: start;       /* natural heights — body flex handles alignment */
}
@media (min-width: 480px)  { #chpGrid { grid-template-columns: repeat(3,1fr) } }
@media (min-width: 768px)  { #chpGrid { grid-template-columns: repeat(4,1fr); gap: var(--s4) } }
@media (min-width: 960px)  { #chpGrid { grid-template-columns: repeat(5,1fr) } }
@media (min-width: 1200px) { #chpGrid { grid-template-columns: repeat(6,1fr); gap: var(--s4) } }
@media (max-width: 479px) {
    #chpGrid.density-1 { grid-template-columns: 1fr !important; gap: var(--s3) }
    #chpGrid.density-3 { grid-template-columns: repeat(3,1fr) !important; gap: var(--s1) }
}

/* ══════════════════════════════════════════════════════════════════
   PRODUCT CARD — DESIGN SYSTEM
══════════════════════════════════════════════════════════════════ */
.chp-card {
    background: #fff;
    border-radius: var(--r-card);
    overflow: hidden;
    /* Flex column → body fills space → button at bottom */
    display: flex; flex-direction: column;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: var(--sh-card);
    transition:
        transform .28s cubic-bezier(.34,1.56,.64,1),
        box-shadow .2s ease,
        border-color .2s ease;
    animation: chpIn .25s ease both;
    cursor: pointer;
    contain: layout style; /* performance */
}
@media (min-width: 768px) {
    .chp-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--sh-hover);
        border-color: rgba(255,106,0,.15);
        z-index: 1;
    }
}
.chp-skel-card { cursor: default; pointer-events: none; animation: none }
.chp-skel-card:hover { transform: none !important; box-shadow: var(--sh-card) !important }

/* ── IMAGE — exact 1:1 aspect ratio ──────────────────────── */
.chp-img {
    position: relative;
    width: 100%;
    /* Modern: aspect-ratio */
    aspect-ratio: 1 / 1;
    /* Fallback for older browsers: padding-top hack */
    overflow: hidden;
    background: var(--n100);
    flex-shrink: 0;
    /* Ensure image corners match card radius at top */
    border-radius: var(--r-card) var(--r-card) 0 0;
}
/* Override aspect-ratio fallback when supported */
@supports (aspect-ratio: 1) {
    .chp-img { padding-top: 0 }
}
@supports not (aspect-ratio: 1) {
    .chp-img { padding-top: 100% }
    .chp-img > * { position: absolute; inset: 0 }
}
/* Bottom gradient */
.chp-img::before {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0;
    height: 30%; z-index: 2; pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,.05) 0%, transparent 100%);
}

/* Carousel slide track */
.chp-slide-track {
    position: absolute; inset: 0;
    display: flex; height: 100%;
    transition: transform .42s cubic-bezier(.25,.46,.45,.94);
    will-change: transform;
    backface-visibility: hidden;
}
/* Each image — fills 1:1 slot */
.chp-ci {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    flex-shrink: 0;
    /* Skeleton until loaded */
    background: linear-gradient(90deg,var(--n100) 25%,var(--n200) 50%,var(--n100) 75%);
    background-size: 200% 100%; animation: chpSkel 1.4s infinite;
    transition: transform .45s ease;
}
.chp-ci.loaded { background: none; animation: none }
@media (min-width: 768px) { .chp-card:hover .chp-ci { transform: scale(1.03) } }

/* Dots */
.chp-img-dots {
    position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 4px; z-index: 5; pointer-events: none;
}
.chp-dot { width: 4px; height: 4px; border-radius: var(--r-badge); background: rgba(255,255,255,.45); transition: all .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2) }
.chp-dot.active { background: #fff; width: 12px }

/* In-cart top strip */
.chp-in-cart-tag {
    display: none; position: absolute; top: 0; left: 0; right: 0; z-index: 6;
    background: var(--green); color: #fff;
    font-size: var(--t-xs); font-weight: var(--fw-bold);
    text-align: center; padding: 4px var(--s2);
    letter-spacing: .5px; text-transform: uppercase;
}
.chp-card.in-cart { border-color: rgba(22,163,74,.25); box-shadow: 0 0 0 2px rgba(22,163,74,.1) }
.chp-card.in-cart .chp-in-cart-tag { display: block }
.chp-card.in-cart .chp-cart { background: var(--green) }

/* Badges — top-left stack */
.chp-bdgs {
    position: absolute; top: 0; inset-inline-start: 0;
    padding: var(--s2); display: flex; flex-direction: column; gap: 4px;
    z-index: 4; pointer-events: none;
}
.chp-b {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 5px 10px; /* spec: 6px 10px — using 5px for compact mobile */
    border-radius: var(--r-badge); /* pill */
    font-size: 11px; font-weight: 700; line-height: 1;
    width: fit-content; letter-spacing: .3px; text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.chp-b-flash { background: linear-gradient(90deg,var(--orange),var(--red)); color: #fff }
.chp-b-best  { background: linear-gradient(90deg,#F59E0B,#D97706); color: #fff }
.chp-b-hot   { background: #EF4444; color: #fff }
.chp-b-trend { background: #8B5CF6; color: #fff }
.chp-b-new   { background: #22C55E; color: #fff }

/* Top-right: wishlist + discount */
.chp-img-tr {
    position: absolute; top: var(--s2); inset-inline-end: var(--s2);
    z-index: 4; display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
}
.chp-wish {
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,.9); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 6px rgba(0,0,0,.12); backdrop-filter: blur(6px);
    transition: transform .18s cubic-bezier(.34,1.56,.64,1), background .12s;
    position: relative;
}
.chp-wish::before { content: ''; position: absolute; inset: -5px; border-radius: 50% } /* tap area */
.chp-wish:hover { transform: scale(1.1); background: #fff }
.chp-wish.on svg { fill: #FF3B30; stroke: #FF3B30 }

/* Discount badge — pill, 8px from edge (parent offset) */
.chp-disc-badge {
    background: #ff4d4f; /* spec: #ff4d4f */
    color: #fff;
    border-radius: var(--r-badge); /* pill */
    padding: 4px var(--s2); /* 4px 8px */
    font-size: 12px; /* spec: 12px */
    font-weight: var(--fw-bold);
    line-height: 1;
    pointer-events: none; white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
    letter-spacing: -.1px;
}

/* Video */
.chp-vid-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 5; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.5); border: 2px solid rgba(255,255,255,.85); cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; transition: transform .18s, background .13s }
.chp-vid-btn:hover { transform: translate(-50%,-50%) scale(1.1); background: rgba(255,106,0,.85) }
.chp-vid-badge { position: absolute; bottom: 28px; inset-inline-start: var(--s2); z-index: 5; background: rgba(0,0,0,.62); color: #fff; border-radius: 4px; font-size: 8px; font-weight: 700; padding: 2px 6px; display: flex; align-items: center; gap: 2px }
.chp-vid-ovl { position: absolute; inset: 0; z-index: 8; background: #000 }
.chp-vid-ovl video { width: 100%; height: 100%; object-fit: cover }
.chp-vid-close { position: absolute; top: 6px; inset-inline-end: 6px; background: rgba(0,0,0,.6); color: #fff; border: none; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; z-index: 9 }

/* Desktop: cart button */
.chp-cart {
    position: absolute; bottom: var(--s2); inset-inline-end: var(--s2); z-index: 4;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--orange); border: 2px solid #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--sh-btn);
    opacity: 0; transform: scale(.7);
    transition: opacity .18s, transform .2s cubic-bezier(.34,1.56,.64,1), background .12s;
}
@media (min-width: 768px) {
    .chp-card:hover .chp-cart { opacity: 1; transform: scale(1); animation: chpCartIn .2s ease }
}
.chp-cart:hover { background: var(--orange-dk); transform: scale(1.1) !important }
.chp-cart.done  { background: var(--green) }
.chp-cart.busy  { opacity: .4; pointer-events: none }
@media (max-width: 767px) { .chp-cart { display: none !important } }

/* Desktop: QV strip */
.chp-qv-btn {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 5;
    background: rgba(0,0,0,.56); backdrop-filter: blur(10px);
    color: rgba(255,255,255,.9); border: none; cursor: pointer;
    font-size: 8.5px; font-weight: var(--fw-bold); font-family: inherit;
    letter-spacing: .7px; text-transform: uppercase; padding: 8px;
    opacity: 0; transform: translateY(4px);
    transition: opacity .18s, transform .18s;
    display: flex; align-items: center; justify-content: center; gap: 4px;
}
@media (min-width: 768px) { .chp-card:hover .chp-qv-btn { opacity: 1; transform: translateY(0) } }
@media (max-width: 767px) { .chp-qv-btn { display: none } }

/* Compare */
.chp-cmp-chk {
    position: absolute; bottom: var(--s2); inset-inline-start: var(--s2); z-index: 4;
    display: flex; align-items: center; gap: var(--s1);
    background: rgba(255,255,255,.88); border-radius: var(--r-badge);
    padding: 3px var(--s2); font-size: 8.5px; font-weight: var(--fw-bold); color: var(--n500);
    cursor: pointer; backdrop-filter: blur(4px);
    opacity: 0; transition: opacity .18s;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.chp-cmp-chk input { accent-color: var(--orange); width: 11px; height: 11px; cursor: pointer }
@media (min-width: 768px) { .chp-card:hover .chp-cmp-chk { opacity: 1 } }
.chp-cmp-chk:has(input:checked) { opacity: 1; background: var(--orange-lt); color: var(--orange) }
@media (max-width: 767px) { .chp-cmp-chk { display: none } }

/* Progress bar */
.chp-prog-wrap { height: 2px; background: var(--n200); flex-shrink: 0; overflow: hidden }
.chp-prog-bar  { height: 100%; background: var(--orange); transition: width 1s ease }

/* ══════════════════════════════════════════════════════════════════
   CARD BODY — STRICT VERTICAL RHYTHM (spec-aligned)
   Gap sequence: 12px top | title 8px↓ | rating 8px↓ | price | auto | button
══════════════════════════════════════════════════════════════════ */
.chp-body {
    padding: var(--s3); /* 12px — image→title gap (via top padding) */
    display: flex; flex-direction: column;
    flex: 1; /* fills remaining card height */
}

/* TITLE — fixed 2-line height for alignment across cards */
.chp-title {
    font-size: var(--t-md); /* 15px */
    font-weight: var(--fw-semi); /* 600 */
    color: var(--n900);
    line-height: 1.35; /* spec: ~1.35 */
    /* Fixed height: 15 × 1.35 × 2 = 40.5px → 40px */
    height: 40px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: var(--s2); /* 8px — title → rating */
    text-decoration: none;
    transition: color .12s;
}
.chp-title:hover { color: var(--orange) }

/* RATING — light, perfectly aligned */
.chp-meta {
    display: flex; align-items: center;
    gap: 6px; /* spec: 6–8px */
    font-size: var(--t-sm); /* 13px */
    color: var(--n400);
    margin-bottom: var(--s2); /* 8px — rating → price */
    white-space: nowrap; overflow: hidden;
    flex-shrink: 0; height: 20px; /* stable row height */
}
.chp-meta-rat  { display: inline-flex; align-items: center; gap: 2px; font-weight: var(--fw-semi); color: var(--amber); flex-shrink: 0 }
.chp-meta-star { font-size: 11px }
.chp-meta-dot  { color: var(--n300); font-size: 9px; flex-shrink: 0 }
.chp-meta-cnt  { color: var(--n400) }
.chp-meta-sold { color: var(--n500); overflow: hidden; text-overflow: ellipsis }

/* PRICE — strongest element below image */
.chp-price-block {
    display: flex; align-items: baseline;
    gap: 6px; flex-wrap: wrap;
    /* No bottom margin — spacer handles price→button gap */
    flex-shrink: 0; min-height: 24px;
}
.chp-price-main {
    font-size: 18px; /* exact spec */
    font-weight: var(--fw-bold); line-height: 1;
    background: linear-gradient(135deg,var(--orange) 30%,var(--red) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    font-variant-numeric: tabular-nums; letter-spacing: -.3px;
}
.chp-price-was {
    font-size: 14px; /* exact spec */
    color: var(--n400); text-decoration: line-through; font-weight: var(--fw-reg);
    align-self: baseline;
}
.chp-save-chip {
    display: inline-flex; align-items: center;
    background: rgba(239,68,68,.07); border: 1px solid rgba(239,68,68,.14);
    color: #DC2626; font-size: 12px; /* exact spec */
    font-weight: var(--fw-semi);
    padding: 2px var(--s2); border-radius: var(--r-badge); white-space: nowrap;
    margin-top: var(--s1); /* own line if wraps */
}

/* Scarcity */
.chp-scar {
    display: flex; align-items: center; gap: var(--s1);
    font-size: var(--t-xs); font-weight: var(--fw-semi); color: #DC2626;
    margin-top: var(--s1); flex-shrink: 0;
}
.chp-sdot { width: 5px; height: 5px; border-radius: 50%; background: #DC2626; flex-shrink: 0; animation: chpBlink .9s infinite }

/* ══════════════════════════════════════════════════════════════════
   CTA BUTTON — 44px height, spec-exact gradient, aligned at bottom
══════════════════════════════════════════════════════════════════ */
.chp-add-bar {
    /* Push to bottom via flex column parent */
    margin-top: auto;
    flex-shrink: 0;

    /* Space above (price → button = 12px) */
    padding-top: var(--s3);

    /* Visual */
    display: none; /* only mobile */
    width: 100%;
    height: 44px; /* spec: 44–48px */
    background: linear-gradient(135deg,#ff6a00,#ff3c1f); /* exact spec colors */
    color: #fff; border: none;
    border-radius: 14px; /* spec: 14–16px */
    font-size: 13px; font-weight: var(--fw-semi);
    font-family: inherit; cursor: pointer;
    align-items: center; justify-content: center; gap: 6px;
    box-shadow: 0 2px 8px rgba(255,106,0,.22);
    /* Transition covers both add→incart (200ms) and press */
    transition:
        background .2s ease,    /* spec: 180–220ms */
        opacity .15s ease,
        transform .15s ease;
    touch-action: manipulation;
    -webkit-user-select: none; user-select: none;
}
.chp-add-bar:active { transform: scale(.97); opacity: .88 } /* spec: scale 0.97, 0.15s */
/* IN CART state — refined green, smooth 200ms */
.chp-add-bar.done {
    background: linear-gradient(135deg,#22c55e,#16a34a); /* spec: #22c55e or #16a34a */
    box-shadow: 0 2px 8px rgba(22,163,74,.2);
}
.chp-add-bar.busy { opacity: .5; pointer-events: none }
@media (max-width: 767px) { .chp-add-bar { display: flex } }
@media (min-width: 768px) { .chp-add-bar { display: none !important } }

/* ── Empty state ─────────────────────────────────────── */
.chp-empty { grid-column: 1/-1; text-align: center; padding: var(--s8) var(--s5) }
.chp-empty .ei { font-size: 42px; margin-bottom: var(--s3) }
.chp-empty h3 { font-size: var(--t-lg); color: var(--n500); margin-bottom: var(--s2); font-weight: var(--fw-semi) }
.chp-empty p  { font-size: var(--t-base); color: var(--n400); margin-bottom: var(--s5) }
.chp-empty-actions { display: flex; gap: var(--s2); justify-content: center; flex-wrap: wrap }
.chp-empty-btn { display: inline-flex; align-items: center; padding: var(--s3) var(--s5); border-radius: var(--r-btn); font-size: var(--t-base); font-weight: var(--fw-semi); text-decoration: none; cursor: pointer; border: none; font-family: inherit }
.chp-empty-btn-primary   { background: var(--orange); color: #fff }
.chp-empty-btn-secondary { background: var(--n200); color: var(--n600) }

/* ── Skeleton ─────────────────────────────────────────── */
.chp-skel { background: linear-gradient(90deg,var(--n100) 25%,var(--n200) 50%,var(--n100) 75%); background-size: 200% 100%; animation: chpSkel 1.4s infinite; border-radius: 4px }

/* ── Sentinel + Load More ─────────────────────────────── */
#chpSentinel { height: 48px; display: flex; align-items: center; justify-content: center; gap: var(--s3); margin-top: var(--s2) }
#chpSpinner { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--n200); border-top-color: var(--orange); animation: chpSpin .55s linear infinite; display: none }
#chpSpinner.show { display: block }
#chpLoadBtn { display: none; margin: 0 auto; background: #fff; color: var(--n600); border: 1.5px solid var(--n200); border-radius: var(--r-badge); padding: var(--s2) var(--s6); font-size: var(--t-base); font-weight: var(--fw-semi); cursor: pointer; font-family: inherit; transition: all .12s }
#chpLoadBtn:hover { border-color: var(--orange); color: var(--orange) }
#chpLoadBtn.visible { display: block }
.chp-pagination { max-width: 1600px; margin: 0 auto; padding: var(--s3) var(--s4); display: flex; gap: var(--s2); justify-content: center; flex-wrap: wrap }
.chp-page-link { display: inline-flex; align-items: center; padding: var(--s2) var(--s4); border-radius: var(--r-badge); border: 1.5px solid var(--n200); background: #fff; font-size: var(--t-xs); font-weight: var(--fw-semi); color: var(--n600); text-decoration: none; transition: all .12s }
.chp-page-link:hover { border-color: var(--orange); color: var(--orange) }

/* ── Toast ──────────────────────────────────────────────── */
#chpToast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(6px); background: rgba(12,12,12,.88); color: #fff; padding: var(--s2) var(--s5); border-radius: var(--r-badge); font-size: var(--t-xs); font-weight: var(--fw-semi); box-shadow: var(--sh-float); backdrop-filter: blur(12px); z-index: 9999; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s cubic-bezier(.34,1.56,.64,1); white-space: nowrap }
#chpToast.show { opacity: 1; transform: translateX(-50%) translateY(0) }

/* ── Recently viewed ────────────────────────────────────── */
#chpRV { background: #fff; border-top: 1px solid var(--n150); padding: var(--s4) 0; display: none }
.chp-rv-head { max-width: 1600px; margin: 0 auto; padding: 0 var(--s3) var(--s2); display: flex; align-items: center; justify-content: space-between }
.chp-rv-title { font-size: var(--t-base); font-weight: var(--fw-bold); color: var(--n900) }
.chp-rv-clear { font-size: var(--t-xs); color: var(--n400); cursor: pointer; background: none; border: none; font-family: inherit }
.chp-rv-track { max-width: 1600px; margin: 0 auto; padding: 0 var(--s3); display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch }
.chp-rv-track::-webkit-scrollbar { display: none }
.chp-rv-card { flex-shrink: 0; width: 80px; text-decoration: none }
.chp-rv-img { width: 80px; height: 80px; border-radius: var(--s2); object-fit: cover; background: var(--n100); display: block; border: 1px solid var(--n150) }
.chp-rv-name { font-size: 9px; color: var(--n500); line-height: 1.35; margin-top: var(--s1); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.chp-rv-price { font-size: var(--t-xs); font-weight: var(--fw-bold); color: var(--orange); margin-top: var(--s1) }

/* ══════════════════════════════════════════════════════════════════
   MINI CART — COMPACT BOTTOM TOAST (spec: mobile-native, 2–2.5s)
   Slide from bottom, not center modal, max-width ~90%
══════════════════════════════════════════════════════════════════ */
#chpMiniCart {
    position: fixed;
    bottom: var(--s4); /* 16px from bottom — not edge-to-edge */
    left: 50%; transform: translateX(-50%) translateY(120%);
    z-index: 9985;
    background: #fff;
    border-radius: var(--r-card); /* 16px — compact, not full-width */
    box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
    width: 90%; max-width: 400px; /* spec: max-width ~90% */
    overflow: hidden;
    transition: transform .32s cubic-bezier(.34,1.56,.64,1), opacity .28s ease;
    opacity: 0;
}
#chpMiniCart.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
/* Remove the ::before handle bar (compact toast doesn't need it) */
#chpMiniCart::before { display: none }
.chp-mc-header {
    background: none; color: var(--n900);
    padding: var(--s3) var(--s4) var(--s2);
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--n150);
}
.chp-mc-header span {
    font-size: var(--t-sm); font-weight: var(--fw-bold);
    display: flex; align-items: center; gap: var(--s2); color: var(--green);
}
.chp-mc-header span::before {
    content: '✓'; width: 18px; height: 18px;
    background: var(--green); color: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 900; flex-shrink: 0;
}
.chp-mc-x {
    background: var(--n100); border: none; color: var(--n500);
    font-size: 14px; cursor: pointer;
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; line-height: 1;
}
.chp-mc-body { display: flex; gap: var(--s3); padding: var(--s2) var(--s4); align-items: center }
.chp-mc-img { width: 48px; height: 48px; border-radius: var(--s2); object-fit: cover; flex-shrink: 0; background: var(--n100); border: 1px solid var(--n150) }
.chp-mc-info { flex: 1; min-width: 0 }
.chp-mc-name { font-size: var(--t-xs); font-weight: var(--fw-med); color: var(--n900); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden }
.chp-mc-price { font-size: 15px; font-weight: var(--fw-bold); color: var(--orange); margin-top: 3px }
.chp-mc-foot { display: flex; gap: var(--s2); padding: 0 var(--s4) var(--s3) }
.chp-mc-continue { flex: 1; background: var(--n100); border: 1px solid var(--n200); border-radius: var(--r-btn); padding: 0; height: 40px; font-size: var(--t-xs); font-weight: var(--fw-semi); cursor: pointer; font-family: inherit; color: var(--n600); display: flex; align-items: center; justify-content: center }
.chp-mc-goto { flex: 1; background: var(--n900); color: #fff; border: none; border-radius: var(--r-btn); height: 40px; font-size: var(--t-xs); font-weight: var(--fw-bold); cursor: pointer; font-family: inherit; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: var(--s1) }

/* ══════════════════════════════════════════════════════════════════
   STICKY CART BAR — spec: 56–64px, premium native-app quality
══════════════════════════════════════════════════════════════════ */
#chpStickyCart {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 9950;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,.06);
    padding: var(--s2) var(--s4);
    box-shadow: 0 -2px 8px rgba(0,0,0,.08); /* spec shadow */
    align-items: center; gap: var(--s4);
    min-height: 60px; /* spec: 56–64px */
    padding-bottom: calc(var(--s2) + env(safe-area-inset-bottom, 0));
    animation: chpBarIn .3s cubic-bezier(.34,1.56,.64,1);
}
@media (max-width: 767px) { #chpStickyCart.visible { display: flex } }
/* Left: text hierarchy */
.chp-sc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px }
.chp-sc-lbl { font-size: 11px; color: var(--n400); font-weight: var(--fw-med); line-height: 1 }
.chp-sc-val { font-size: 15px; font-weight: var(--fw-bold); color: var(--n900); line-height: 1; display: flex; align-items: center; gap: 4px }
/* Right: Buy Now button */
.chp-sc-btn {
    background: linear-gradient(135deg,#ff6a00,#ff3c1f);
    color: #fff; border: none;
    border-radius: var(--r-btn); /* 14px */
    padding: 0 var(--s5); height: 44px;
    font-size: 14px; font-weight: var(--fw-semi);
    cursor: pointer; font-family: inherit;
    text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; box-shadow: 0 2px 8px rgba(255,106,0,.22);
    touch-action: manipulation;
    transition: opacity .12s;
}
.chp-sc-btn:active { opacity: .88 }

/* Compare */
#chpCmpBar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9960; background: var(--n900); color: #fff; padding: var(--s3) var(--s4); display: flex; align-items: center; gap: var(--s2); transform: translateY(100%); transition: transform .3s cubic-bezier(.34,1.56,.64,1); box-shadow: 0 -4px 20px rgba(0,0,0,.3) }
#chpCmpBar.show { transform: translateY(0) }
.chp-cmp-items { display: flex; gap: var(--s2); flex: 1 }
.chp-cmp-slot { width: 40px; height: 40px; border-radius: var(--s2); border: 2px dashed rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; flex-shrink: 0 }
.chp-cmp-slot img { width: 100%; height: 100%; object-fit: cover }
.chp-cmp-slot .chp-cmp-rm { position: absolute; top: -2px; inset-inline-end: -2px; width: 14px; height: 14px; background: #FF3B30; border-radius: 50%; border: none; color: #fff; font-size: 9px; cursor: pointer; display: flex; align-items: center; justify-content: center }
.chp-cmp-go  { background: var(--orange); color: #fff; border: none; border-radius: var(--r-btn); padding: 0 var(--s4); height: 40px; font-size: var(--t-sm); font-weight: var(--fw-bold); cursor: pointer; font-family: inherit; flex-shrink: 0 }
.chp-cmp-clr { background: transparent; color: rgba(255,255,255,.45); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-btn); padding: 0 var(--s3); height: 40px; font-size: var(--t-xs); cursor: pointer; font-family: inherit; flex-shrink: 0 }
#chpCmpModal { position: fixed; inset: 0; z-index: 9975; background: rgba(0,0,0,.6); display: none; align-items: center; justify-content: center; padding: var(--s4) }
#chpCmpModal.open { display: flex }
.chp-cmp-box { background: #fff; border-radius: var(--r-card); max-width: 640px; width: 100%; max-height: 88vh; overflow-y: auto }
.chp-cmp-box-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s4) var(--s5); border-bottom: 1px solid var(--n150) }
.chp-cmp-box-head h3 { font-size: var(--t-lg); font-weight: var(--fw-bold); margin: 0 }
.chp-cmp-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--n400) }
.chp-cmp-table { width: 100%; border-collapse: collapse }
.chp-cmp-table td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--n150); font-size: var(--t-sm); vertical-align: top }
.chp-cmp-table td:first-child { color: var(--n400); font-size: var(--t-xs); font-weight: var(--fw-semi); text-transform: uppercase; letter-spacing: .4px; width: 80px }
.chp-cmp-prod-img { width: 100%; height: 100px; object-fit: cover; border-radius: var(--s2); margin-bottom: 5px }

/* ── Quick View ──────────────────────────────────────────── */
#chpQVModal { position: fixed; inset: 0; z-index: 9990; background: rgba(0,0,0,0); pointer-events: none; transition: background .25s }
#chpQVModal.open { background: rgba(0,0,0,.52); pointer-events: all }
.chp-qv-sheet { position: absolute; bottom: 0; left: 0; right: 0; background: #fff; border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding: var(--s3) var(--s4) var(--s8); transform: translateY(100%); transition: transform .3s cubic-bezier(.34,1.56,.64,1); max-height: 84vh; overflow-y: auto; touch-action: pan-y }
#chpQVModal.open .chp-qv-sheet { transform: translateY(0) }
.chp-qv-handle { width: 32px; height: 4px; background: var(--n200); border-radius: var(--r-badge); margin: 0 auto var(--s3) }
.chp-qv-top { display: flex; gap: var(--s3); margin-bottom: var(--s3) }
.chp-qv-img { width: 108px; height: 108px; border-radius: var(--s3); object-fit: cover; flex-shrink: 0; background: var(--n100) }
.chp-qv-info { flex: 1; min-width: 0 }
.chp-qv-name { font-size: var(--t-base); font-weight: var(--fw-semi); color: var(--n900); line-height: 1.4; margin-bottom: var(--s2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.chp-qv-price { font-size: 26px; font-weight: var(--fw-bold); margin-bottom: var(--s1); line-height: 1; background: linear-gradient(135deg,var(--orange) 30%,var(--red) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text }
.chp-qv-old { font-size: var(--t-xs); color: var(--n400); text-decoration: line-through; margin-inline-end: 5px }
.chp-qv-disc-badge { font-size: 9px; font-weight: var(--fw-bold); color: #fff; background: #EF4444; padding: 2px 6px; border-radius: var(--r-badge); vertical-align: middle }
.chp-qv-stats { display: flex; gap: var(--s2); margin-bottom: var(--s3); flex-wrap: wrap }
.chp-qv-stat { background: var(--n100); border-radius: var(--s3); padding: var(--s2) var(--s3); font-size: var(--t-xs); color: var(--n400); display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; min-width: 52px }
.chp-qv-stat strong { font-size: var(--t-lg); color: var(--n900); font-weight: var(--fw-bold) }
.chp-qv-qty-row { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3) }
.chp-qv-qty-lbl { font-size: var(--t-sm); color: var(--n500); font-weight: var(--fw-semi) }
.chp-qty-ctrl { display: flex; align-items: center; border: 1.5px solid var(--n200); border-radius: var(--s3); overflow: hidden }
.chp-qty-btn { width: 36px; height: 36px; border: none; background: #fff; font-size: 18px; font-weight: 300; color: var(--n600); cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: inherit }
.chp-qty-val { min-width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: var(--t-base); font-weight: var(--fw-bold); color: var(--n900); border-inline: 1.5px solid var(--n200) }
.chp-qv-actions { display: flex; gap: var(--s2) }
.chp-qv-cart-btn { flex: 1; border: none; border-radius: var(--r-btn); height: 48px; font-size: var(--t-base); font-weight: var(--fw-bold); font-family: inherit; cursor: pointer; background: linear-gradient(135deg,var(--orange),var(--red)); color: #fff; box-shadow: var(--sh-btn); transition: opacity .12s }
.chp-qv-link { height: 48px; padding: 0 var(--s4); border: 1.5px solid var(--n200); border-radius: var(--r-btn); font-size: var(--t-sm); font-weight: var(--fw-semi); color: var(--n600); text-decoration: none; display: flex; align-items: center; transition: all .12s; white-space: nowrap }
.chp-qv-link:hover { border-color: var(--orange); color: var(--orange) }

/* ── Autocomplete ─────────────────────────────────────────── */
#chpAutoList { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; background: #fff; border: 1px solid rgba(0,0,0,.07); border-radius: var(--r-card); box-shadow: var(--sh-panel); min-width: 215px; max-height: 240px; overflow-y: auto; z-index: 950; display: none }
#chpAutoList.open { display: block }
.chp-auto-section-lbl { font-size: var(--t-xs); font-weight: var(--fw-bold); color: var(--n300); text-transform: uppercase; letter-spacing: .5px; padding: var(--s2) var(--s3) var(--s1) }
.chp-auto-item { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); cursor: pointer; transition: background .1s; font-size: var(--t-sm); color: var(--n600); text-decoration: none }
.chp-auto-item:hover { background: var(--n50) }
.chp-auto-item img { width: 30px; height: 30px; border-radius: var(--s1); object-fit: cover; flex-shrink: 0; background: var(--n100) }
.chp-auto-item-icon { width: 30px; height: 30px; border-radius: var(--s1); background: var(--n100); display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0 }
.chp-auto-item-name { font-weight: var(--fw-med); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.chp-auto-item-sub { font-size: var(--t-xs); color: var(--n400) }
.chp-auto-rm { margin-inline-start: auto; background: none; border: none; color: var(--n300); cursor: pointer; font-size: 13px; padding: 0 var(--s1) }

/* ── Share ───────────────────────────────────────────────── */
.chp-share-popup { position: fixed; z-index: 9980; background: #fff; border-radius: var(--r-card); box-shadow: var(--sh-panel); padding: var(--s2); display: none; animation: chpPanelIn .12s ease }
.chp-share-popup.open { display: block }
.chp-share-opt { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-radius: var(--s2); cursor: pointer; font-size: var(--t-sm); color: var(--n600); background: none; border: none; font-family: inherit; width: 100%; text-align: start; transition: background .1s }
.chp-share-opt:hover { background: var(--n50) }
.chp-share { width: 24px; height: 24px; border-radius: 50%; background: var(--n100); border: 1px solid var(--n150); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .12s; color: var(--n400) }
.chp-share:hover { background: var(--n150); color: var(--orange) }

/* ── Social proof ────────────────────────────────────────── */
#chpProof { position: fixed; bottom: 88px; inset-inline-start: var(--s3); background: rgba(255,255,255,.92); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.8); border-radius: var(--r-card); box-shadow: var(--sh-float); padding: var(--s2) var(--s3); max-width: 230px; z-index: 9998; display: flex; align-items: center; gap: var(--s2); opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .38s, transform .38s cubic-bezier(.34,1.56,.64,1); pointer-events: none }
#chpProof.show { opacity: 1; transform: none }
.chp-proof-ico  { width: 36px; height: 36px; border-radius: var(--s2); object-fit: cover; flex-shrink: 0; background: var(--n100) }
.chp-proof-body { flex: 1; min-width: 0 }
.chp-proof-name { font-size: var(--t-xs); font-weight: var(--fw-bold); color: var(--n900); margin-bottom: 1px }
.chp-proof-msg  { font-size: 9px; color: var(--n500); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.chp-proof-time { font-size: 8.5px; color: var(--n300); margin-top: 2px }

/* ── Back to top ─────────────────────────────────────────── */
#chpTop {
    position: fixed;
    /* 60px (sticky cart) + 12px gap = 72px above bottom */
    bottom: 72px;
    inset-inline-end: var(--s4); /* 16px from edge */
    z-index: 9980;
    width: 34px; height: 34px; /* slightly smaller per spec */
    border-radius: 50%;
    background: rgba(255,255,255,.92); border: 1px solid rgba(0,0,0,.07);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06); /* subtle layered */
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: var(--n500);
    opacity: 0; transform: translateY(8px) scale(.9); pointer-events: none;
    transition: opacity .22s, transform .22s cubic-bezier(.34,1.56,.64,1);
}
#chpTop.show { opacity: 1; transform: none; pointer-events: all }
#chpTop:hover { background: #fff; color: var(--orange) }

/* ── SEO text ─────────────────────────────────────────────── */
#chpSeoText { max-width: 1600px; margin: 0 auto; padding: var(--s5) var(--s4) var(--s2); background: #F0F0F2 }
#chpSeoText .chp-seo-inner { background: #fff; border-radius: var(--r-card); padding: var(--s4) var(--s5); border: 1px solid var(--n150) }
#chpSeoText h2 { font-size: var(--t-base); font-weight: var(--fw-bold); color: var(--n900); margin-bottom: var(--s2) }
#chpSeoText p  { font-size: var(--t-xs); color: var(--n500); line-height: 1.7; margin: 0 }


/* === V5 card polish overrides === */
/* Flash overrides moved to v13 section below */

#chpGrid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr)) !important;}
@media (max-width:767px){#chpGrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important;}}
@media (min-width:768px) and (max-width:1023px){#chpGrid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}}
@media (min-width:1024px) and (max-width:1399px){#chpGrid{grid-template-columns:repeat(5,minmax(0,1fr)) !important;}}
@media (min-width:1400px){#chpGrid{grid-template-columns:repeat(6,minmax(0,1fr)) !important;}}

.chp-slide-track{transition:transform .35s ease, opacity .35s ease !important;}
.chp-ci{transition:opacity .35s ease, transform .45s ease !important;}



/* ═══════════════════════════════════════════════════════════════
   CHINAHUB v13 — FULL DESIGN SYSTEM
   Palette: #FF3A00 primary · #0A0F1E text · #EBEBEE bg · #fff card
   ═══════════════════════════════════════════════════════════════ */

/* ── Design tokens ──────────────────────────────────────────── */
:root {
  --pri:        #FF3A00;
  --pri-dk:     #CC2E00;
  --pri-lt:     rgba(255,58,0,.08);
  --bg:         #EBEBEE;
  --surface:    #ffffff;
  --text:       #0A0F1E;
  --text-2:     #4B5563;
  --text-3:     #9CA3AF;
  --border:     rgba(0,0,0,.08);
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --accent:     #FF3A00; /* per-card override */
}

body, #chpWrap { background: var(--bg) !important; }
#chpWrap { padding: 10px 8px 48px !important; }

/* ════════════════════════════════════
   FREE SHIPPING BAR
════════════════════════════════════ */
#chpShipBar {
  background: #0A0F1E !important;
  color: rgba(255,255,255,.75) !important;
  padding: 7px 16px !important;
  min-height: 32px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  gap: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#chpShipBar strong { color: #4ADE80 !important; font-weight: 700 !important; }
.chp-ship-track {
  width: 80px !important; height: 4px !important;
  background: rgba(255,255,255,.12) !important;
  border-radius: 99px !important;
}
.chp-ship-fill {
  background: linear-gradient(90deg, #22C55E, #4ADE80) !important;
  box-shadow: 0 0 6px rgba(74,222,128,.5) !important;
}

/* ════════════════════════════════════
   FLASH SALE BAR
════════════════════════════════════ */

/* ─── Show categories, hide filters/presets/chips ───────── */
#chpFbar,
#chpChips,
#chpPresets,
#chpResultsHead { display: none !important; }
#chpCats { display: block !important; }

/* ════════════════════════════════════
   FLASH SALE — Centered
════════════════════════════════════ */
#chpFlash {
  background: linear-gradient(135deg, #7A0000 0%, #B01800 30%, #D93000 60%, #FF5000 100%) !important;
  min-height: 60px !important;
  position: relative !important; overflow: hidden !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  border-bottom: 2px solid rgba(255,150,0,.35) !important;
}
#chpFlash::before {
  content: '' !important; position: absolute !important; inset: 0 !important;
  background:
    radial-gradient(ellipse at 0% 50%, rgba(255,255,255,.1) 0%, transparent 45%),
    radial-gradient(ellipse at 100% 50%, rgba(255,150,0,.15) 0%, transparent 45%) !important;
  pointer-events: none !important;
}
#chpFlash::after {
  content: '' !important; position: absolute !important; inset: 0 !important;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.07) 50%, transparent 80%) !important;
  animation: chpFlashShimmer 4s ease-in-out infinite !important;
  pointer-events: none !important;
}
@keyframes chpFlashShimmer { 0%{transform:translateX(-120%)} 100%{transform:translateX(220%)} }

.chp-fl-inner {
  display: flex !important; align-items: center !important;
  justify-content: center !important; gap: 18px !important;
  position: relative !important; z-index: 1 !important;
  flex-wrap: nowrap !important;
}

.chp-fp {
  background: rgba(255,255,255,.15) !important;
  border: 1.5px solid rgba(255,255,255,.28) !important;
  font-size: 13px !important; font-weight: 900 !important; letter-spacing: 2px !important;
  padding: 6px 16px !important; border-radius: 8px !important; color: #fff !important;
  display: inline-flex !important; align-items: center !important; gap: 7px !important;
  text-transform: uppercase !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.2) !important;
}
.chp-fp-bolt {
  font-size: 15px !important;
  animation: chpFire .5s ease-in-out infinite alternate !important;
  filter: drop-shadow(0 0 5px rgba(255,220,0,1)) !important;
}
.chp-fp-sub {
  font-size: 9.5px !important; color: rgba(255,255,255,.6) !important;
  letter-spacing: .8px !important; text-transform: uppercase !important;
  white-space: nowrap !important;
}
.chp-ft      { display: flex !important; align-items: center !important; gap: 5px !important; }
.chp-fu-wrap { display: flex !important; flex-direction: row !important; align-items: center !important;ap: 2px !important; }
.chp-fu {
  min-width: 38px !important; height: 38px !important;
  background: rgba(0,0,0,.28) !important;
  border: 1.5px solid rgba(255,255,255,.2) !important; border-radius: 9px !important;
  color: #fff !important; font-size: 18px !important; font-weight: 900 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 3px 8px rgba(0,0,0,.3) !important;
  font-variant-numeric: tabular-nums !important; letter-spacing: -1px !important;
}
.chp-fu-u { font-size: 7px !important; color: rgba(255,255,255,.5) !important; text-transform: uppercase !important; font-weight: 700 !important; }
.chp-fsp  { font-size: 20px !important; color: rgba(255,255,255,.4) !important; font-weight: 900 !important; padding-bottom: 6px !important; line-height: 1 !important; }

@media(max-width:599px) {
  #chpFlash      { min-height: 52px !important; }
  .chp-fl-inner  { gap: 12px !important; }
  .chp-fu        { min-width: 30px !important; height: 30px !important; font-size: 15px !important; border-radius: 7px !important; }
  .chp-fsp       { font-size: 15px !important; padding-bottom: 4px !important; }
  .chp-fp        { font-size: 11px !important; padding: 5px 12px !important; letter-spacing: 1.4px !important; }
  .chp-fp-sub    { display: none !important; }
}

/* ════════════════════════════════════
   STICKY CART — Ultra compact single row
════════════════════════════════════ */
#chpStickyCart {
  position: fixed !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 9900 !important;
  background: #fff !important;
  border-top: 1px solid rgba(0,0,0,.1) !important;
  box-shadow: 0 -3px 16px rgba(0,0,0,.11) !important;
  display: none;
  flex-direction: column !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}
#chpStickyCart.visible { display: flex !important; }

/* Free shipping thin strip */
.chp-sc-ship {
  display: flex !important; align-items: center !important;
  gap: 8px !important; padding: 4px 14px !important;
  background: #F0FDF4 !important;
  border-bottom: 1px solid rgba(34,197,94,.12) !important;
}
.chp-sc-ship-track {
  width: 70px !important; height: 3px !important; flex-shrink: 0 !important;
  background: #D1FAE5 !important; border-radius: 99px !important; overflow: hidden !important;
}
.chp-sc-ship-fill {
  height: 100% !important; width: 0% !important;
  background: linear-gradient(90deg,#16A34A,#22C55E) !important;
  border-radius: 99px !important;
  transition: width .5s cubic-bezier(.34,1.56,.64,1) !important;
}
.chp-sc-ship-txt {
  font-size: 10.5px !important; color: #15803D !important; font-weight: 600 !important;
}
.chp-sc-ship-txt strong { font-weight: 900 !important; }

/* Congrats */
.chp-sc-congrats {
  display: none;
  align-items: center !important; justify-content: center !important;
  padding: 4px 14px !important;
  background: #F0FDF4 !important;
  border-bottom: 1px solid rgba(34,197,94,.12) !important;
  font-size: 11px !important; font-weight: 700 !important; color: #15803D !important;
  gap: 5px !important;
}

/* Main row — one compact line */
.chp-sc-main {
  display: flex !important; align-items: center !important;
  gap: 10px !important; padding: 8px 14px !important;
}
.chp-sc-info { flex: 1 !important; min-width: 0 !important; }
.chp-sc-lbl  { display: none !important; } /* hide label — save space */
.chp-sc-val  {
  font-size: 13.5px !important; font-weight: 800 !important; color: #111827 !important;
  display: flex !important; align-items: center !important; gap: 5px !important;
}
.chp-sc-dot  { color: #D1D5DB !important; }
.chp-sc-val #chpSCTotal { color: var(--pri) !important; }
.chp-sc-btn {
  flex-shrink: 0 !important; background: var(--pri) !important; color: #fff !important;
  padding: 8px 18px !important; border-radius: 9px !important;
  font-size: 13px !important; font-weight: 800 !important;
  text-decoration: none !important; white-space: nowrap !important;
  box-shadow: 0 3px 10px rgba(255,58,0,.3) !important;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1) !important;
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
}
.chp-sc-btn:active { transform: scale(.94) !important; }
  min-height: 72px !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  border-bottom: 2px solid rgba(255,150,0,.4) !important;
}
/* Subtle noise texture overlay */
#chpFlash::before {
  content: '' !important;
  position: absolute !important; inset: 0 !important;
  background:
    radial-gradient(ellipse at 0% 50%, rgba(255,255,255,.1) 0%, transparent 45%),
    radial-gradient(ellipse at 100% 50%, rgba(255,150,0,.15) 0%, transparent 45%) !important;
  pointer-events: none !important; z-index: 0 !important;
}
/* Shimmer sweep */
#chpFlash::after {
  content: '' !important;
  position: absolute !important; inset: 0 !important;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.07) 50%, transparent 80%) !important;
  animation: chpFlashShimmer 4s ease-in-out infinite !important;
  pointer-events: none !important; z-index: 0 !important;
}
@keyframes chpFlashShimmer { 0%{transform:translateX(-120%)} 100%{transform:translateX(220%)} }


/* ════════════════════════════════════
   STICKY CART — Ultra compact single row
════════════════════════════════════ */
#chpStickyCart {
  position: fixed !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 9900 !important;
  background: #fff !important;
  border-top: 1px solid rgba(0,0,0,.1) !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,.13) !important;
  display: none;
  flex-direction: column !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  transform: translateY(0) !important; /* prevent page scroll interaction */
}
#chpStickyCart.visible { display: flex !important; }

/* Free shipping strip — thin top line */
.chp-sc-ship {
  display: flex !important; align-items: center !important;
  gap: 8px !important; padding: 5px 14px !important;
  background: #F0FDF4 !important;
  border-bottom: 1px solid rgba(34,197,94,.15) !important;
}
.chp-sc-ship-track {
  width: 80px !important; height: 4px !important; flex-shrink: 0 !important;
  background: #D1FAE5 !important; border-radius: 99px !important; overflow: hidden !important;
}
.chp-sc-ship-fill {
  height: 100% !important; width: 0% !important;
  background: linear-gradient(90deg,#16A34A,#22C55E) !important;
  border-radius: 99px !important;
  transition: width .5s cubic-bezier(.34,1.56,.64,1) !important;
}
.chp-sc-ship-txt {
  font-size: 11px !important; color: #15803D !important;
  font-weight: 600 !important; flex: 1 !important;
}
.chp-sc-ship-txt strong { font-weight: 900 !important; }

/* Congrats strip */
.chp-sc-congrats {
  display: none;
  align-items: center !important; justify-content: center !important;
  gap: 5px !important; padding: 5px 14px !important;
  background: #F0FDF4 !important;
  border-bottom: 1px solid rgba(34,197,94,.15) !important;
  font-size: 11.5px !important; font-weight: 700 !important; color: #15803D !important;
}

/* Single compact row */
.chp-sc-main {
  display: flex !important; align-items: center !important;
  gap: 10px !important; padding: 9px 14px 10px !important;
}
.chp-sc-info {
  flex: 1 !important; display: flex !important;
  flex-direction: column !important; gap: 1px !important; min-width: 0 !important;
}
.chp-sc-lbl {
  font-size: 10px !important; color: #9CA3AF !important;
  font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .4px !important;
}
.chp-sc-val {
  font-size: 14px !important; font-weight: 800 !important; color: #111827 !important;
  display: flex !important; align-items: center !important; gap: 5px !important;
  white-space: nowrap !important;
}
.chp-sc-dot { color: #E5E7EB !important; font-size: 12px !important; }
.chp-sc-val #chpSCTotal { color: var(--pri) !important; }

.chp-sc-btn {
  flex-shrink: 0 !important;
  background: var(--pri) !important; color: #fff !important;
  padding: 10px 20px !important; border-radius: 10px !important;
  font-size: 13px !important; font-weight: 800 !important;
  text-decoration: none !important; white-space: nowrap !important;
  box-shadow: 0 3px 12px rgba(255,58,0,.35) !important;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1) !important;
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
}
.chp-sc-btn:hover  { transform: scale(1.03) !important; }
.chp-sc-btn:active { transform: scale(.95) !important; }
  min-height: 72px !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

/* Radial glow decoration */
#chpFlash::before {
  content: '' !important;
  position: absolute !important; inset: 0 !important;
  background:
    radial-gradient(circle at 5% 50%, rgba(255,255,255,.1) 0%, transparent 30%),
    radial-gradient(circle at 95% 50%, rgba(255,200,50,.1) 0%, transparent 30%) !important;
  pointer-events: none !important; z-index: 0 !important;
}
/* Shimmer sweep */
#chpFlash::after {
  content: '' !important;
  position: absolute !important; inset: 0 !important;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.07) 50%, transparent 75%) !important;
  animation: chpFlashShimmer 4s ease-in-out infinite !important;
  pointer-events: none !important; z-index: 0 !important;
}
@keyframes chpFlashShimmer { 0%{transform:translateX(-120%)} 100%{transform:translateX(220%)} }

/* ── LEFT: Brand block ──────────────────────────────────── */
.chp-fl-left {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 10px 16px !important;
  flex-shrink: 0 !important;
  border-inline-end: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(0,0,0,.15) !important;
  gap: 4px !important;
  position: relative !important; z-index: 1 !important;
  min-height: 72px !important;
}
.chp-fl-brand { display: flex !important; flex-direction: column !important; gap: 3px !important; }
.chp-fp {
  background: rgba(255,255,255,.15) !important;
  border: 1.5px solid rgba(255,255,255,.25) !important;
  font-size: 12px !important; font-weight: 900 !important; letter-spacing: 1.8px !important;
  padding: 5px 14px !important; border-radius: 7px !important;
  color: #fff !important;
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
.chp-fp-bolt { font-size: 14px !important; animation: chpFire .5s ease-in-out infinite alternate !important; filter: drop-shadow(0 0 4px rgba(255,220,0,.9)) !important; }
.chp-fp-sub  { font-size: 9px !important; color: rgba(255,255,255,.55) !important; letter-spacing: 1px !important; text-transform: uppercase !important; white-space: nowrap !important; padding-left: 2px !important; }

/* ── CENTER: Timer ──────────────────────────────────────── */
.chp-fl-timer {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 16px !important;
  flex-shrink: 0 !important;
  border-inline-end: 1px solid rgba(255,255,255,.12) !important;
  position: relative !important; z-index: 1 !important;
  min-height: 72px !important;
}
.chp-ft    { display: flex !important; align-items: center !important; gap: 4px !important; }
.chp-fu-wrap { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 2px !important; }
.chp-fu {
  min-width: 36px !important; height: 36px !important;
  background: rgba(0,0,0,.3) !important;
  border: 1.5px solid rgba(255,255,255,.18) !important;
  border-radius: 9px !important;
  color: #fff !important; font-size: 17px !important; font-weight: 900 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 3px 8px rgba(0,0,0,.25) !important;
  font-variant-numeric: tabular-nums !important; letter-spacing: -1px !important;
}
.chp-fu-u { font-size: 7.5px !important; color: rgba(255,255,255,.5) !important; text-transform: uppercase !important; letter-spacing: .4px !important; font-weight: 700 !important; }
.chp-fsp  { font-size: 18px !important; color: rgba(255,255,255,.4) !important; font-weight: 900 !important; margin: 0 1px !important; padding-bottom: 6px !important; line-height: 1 !important; }

/* ── RIGHT: Product thumbnails ──────────────────────────── */
.chp-fl-products {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px 8px 14px !important;
  flex: 1 !important;
  overflow: hidden !important;
  position: relative !important; z-index: 1 !important;
  min-height: 72px !important;
}

/* Each product thumbnail */
.chp-fl-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  position: relative !important;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1) !important;
}
.chp-fl-item:hover { transform: translateY(-2px) scale(1.04) !important; }

.chp-fl-item img {
  width: 48px !important; height: 48px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  border: 2px solid rgba(255,255,255,.25) !important;
  background: rgba(0,0,0,.2) !important;
  display: block !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.3) !important;
  transition: border-color .15s !important;
}
.chp-fl-item:hover img { border-color: rgba(255,255,255,.7) !important; }

.chp-fl-item-price {
  font-size: 11px !important; font-weight: 900 !important;
  color: #fff !important; white-space: nowrap !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.4) !important;
  letter-spacing: -.2px !important;
}

.chp-fl-item-disc {
  position: absolute !important; top: -4px !important; right: -5px !important;
  background: #FFD700 !important; color: #7B0000 !important;
  font-size: 7.5px !important; font-weight: 900 !important;
  padding: 1px 5px !important; border-radius: 99px !important;
  z-index: 2 !important; white-space: nowrap !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.3) !important;
  line-height: 1.4 !important;
}

/* See all arrow button */
.chp-fl-see-all {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  width: 44px !important; height: 56px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.15) !important;
  border: 1.5px solid rgba(255,255,255,.2) !important;
  color: #fff !important; font-size: 10px !important; font-weight: 700 !important;
  text-align: center !important; line-height: 1.3 !important;
  transition: background .15s !important;
  white-space: nowrap !important;
}
.chp-fl-see-all:hover { background: rgba(255,255,255,.25) !important; }

/* ── Mobile ─────────────────────────────────────────────── */
@media(max-width:767px) {
  #chpFlash         { min-height: 62px !important; }
  .chp-fl-left      { padding: 8px 12px !important; min-height: 62px !important; }
  .chp-fl-timer     { padding: 0 10px !important; min-height: 62px !important; }
  .chp-fl-products  { padding: 6px 10px !important; gap: 7px !important; min-height: 62px !important; }
  .chp-fu           { min-width: 28px !important; height: 28px !important; font-size: 14px !important; border-radius: 7px !important; }
  .chp-fsp          { font-size: 14px !important; padding-bottom: 4px !important; }
  .chp-fp           { font-size: 10px !important; padding: 4px 10px !important; letter-spacing: 1.2px !important; }
  .chp-fp-sub       { display: none !important; }
  .chp-fl-item img  { width: 40px !important; height: 40px !important; border-radius: 8px !important; }
  .chp-fl-item-price{ font-size: 10px !important; }
  .chp-fl-see-all   { width: 36px !important; height: 48px !important; font-size: 9px !important; }
}
@media(max-width:400px) {
  .chp-fl-timer { display: none !important; }
  .chp-fl-products { padding-left: 10px !important; }
}

/* ════════════════════════════════════
   CATEGORY STRIP
════════════════════════════════════ */
#chpCats {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.04) !important;
}
.chp-cs-inner {
  padding: 8px 10px !important;
  gap: 6px !important;
  max-width: 1600px !important; margin: 0 auto !important;
}
.chp-cs-item {
  padding: 6px 12px !important;
  border-radius: 99px !important;
  border: 1.5px solid var(--border) !important;
  background: #F5F5F7 !important;
  gap: 4px !important;
  min-width: auto !important;
  transition: all .15s !important;
  display: flex !important; flex-direction: column !important; align-items: center !important;
}
.chp-cs-item:hover {
  border-color: var(--pri) !important;
  background: var(--pri-lt) !important;
}
.chp-cs-item.active {
  border-color: var(--pri) !important;
  background: var(--pri) !important;
  box-shadow: 0 3px 10px rgba(255,58,0,.35) !important;
}
.chp-cs-item.active .chp-cs-lbl { color: #fff !important; }
.chp-cs-ico { font-size: 16px !important; line-height: 1 !important; flex-shrink: 0 !important; }
.chp-cs-lbl {
  font-size: 10px !important; font-weight: 700 !important;
  color: var(--text-2) !important; white-space: nowrap !important;
  letter-spacing: .2px !important;
  max-width: none !important; overflow: visible !important;
  text-overflow: clip !important;
}

/* ════════════════════════════════════
   FILTER BAR
════════════════════════════════════ */
#chpFbar {
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
  position: sticky !important;
  top: 52px !important; z-index: 700 !important;
}
@media(min-width:769px) { #chpFbar { top: 68px !important; } }

.chp-fb-inner {
  padding: 7px 12px !important;
  gap: 6px !important;
  max-width: 1600px !important; margin: 0 auto !important;
}

/* Search input */
.chp-fbs input {
  background: #F5F5F7 !important;
  border: 1.5px solid transparent !important;
  border-radius: 99px !important;
  height: 34px !important; font-size: 12px !important;
  padding: 0 12px 0 28px !important;
  width: 120px !important;
  transition: all .18s !important;
}
.chp-fbs input:focus {
  background: #fff !important;
  border-color: var(--pri) !important;
  width: 150px !important;
  box-shadow: 0 0 0 3px var(--pri-lt) !important;
}
[dir=rtl] .chp-fbs input { padding: 0 28px 0 12px !important; }

/* Filter pills */
.chp-pill {
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: 99px !important;
  border: 1.5px solid var(--border) !important;
  background: #F5F5F7 !important;
  font-size: 12px !important; font-weight: 600 !important;
  color: var(--text-2) !important;
  transition: all .15s !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
}
.chp-pill:hover { border-color: var(--pri) !important; color: var(--pri) !important; background: var(--pri-lt) !important; }
.chp-pill.on, label.chp-pill:has(input:checked) {
  background: var(--pri) !important; border-color: var(--pri) !important;
  color: #fff !important; font-weight: 700 !important;
  box-shadow: 0 3px 10px rgba(255,106,0,.3) !important;
}
.chp-pill .arr { font-size: 7px !important; opacity: .5 !important; }

/* Sort select */
.chp-sort {
  height: 32px !important;
  padding: 0 10px !important;
  border-radius: 99px !important;
  border: 1.5px solid var(--border) !important;
  background: #F5F5F7 !important;
  font-size: 12px !important; font-weight: 600 !important;
  color: var(--text-2) !important;
  cursor: pointer !important;
}
.chp-sort:focus { border-color: var(--pri) !important; outline: none !important; }

/* Dropdown panels */
.chp-panel {
  border-radius: var(--radius-md) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.14), 0 1px 4px rgba(0,0,0,.06) !important;
  border: 1px solid var(--border) !important;
}
.chp-panel-title { font-size: 10px !important; color: var(--text-3) !important; font-weight: 800 !important; letter-spacing: .8px !important; }
.chp-plabel { font-size: 13px !important; color: var(--text) !important; }
.chp-plabel input { accent-color: var(--pri) !important; }
.chp-rat-opt input { accent-color: var(--pri) !important; }
.chp-sld-fill  { background: linear-gradient(90deg, var(--pri), #FF6500) !important; }
.chp-sld-r::-webkit-slider-thumb { background: var(--pri) !important; box-shadow: 0 2px 6px rgba(255,58,0,.4) !important; }
.chp-sld-apply { background: var(--pri) !important; border-radius: var(--radius-sm) !important; font-weight: 700 !important; }

/* Count badge */
.chp-fbc { font-size: 11px !important; color: var(--text-3) !important; }
.chp-fbc b { color: var(--text-2) !important; font-weight: 700 !important; }

/* Density buttons */
.chp-vt-btn { border-radius: 6px !important; border-color: var(--border) !important; }
.chp-vt-btn.on { border-color: var(--pri) !important; background: var(--pri) !important; color: #fff !important; }

@media(max-width:599px) {
  .chp-fb-inner { padding: 6px 10px !important; gap: 5px !important; }
  .chp-fbs input { width: 100px !important; font-size: 11px !important; }
  .chp-fbs input:focus { width: 130px !important; }
  .chp-fbc, .chp-vt, .chp-fbd { display: none !important; }
  .chp-pill { height: 30px !important; padding: 0 10px !important; font-size: 11px !important; }
}

/* ════════════════════════════════════
   ACTIVE FILTER CHIPS
════════════════════════════════════ */
#chpChips {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 6px 12px !important;
  gap: 6px !important;
}
.chp-chips-lbl { font-size: 11px !important; color: var(--text-3) !important; font-weight: 700 !important; }
.chp-chip {
  background: var(--pri-lt) !important;
  border: 1px solid rgba(255,58,0,.2) !important;
  color: var(--pri-dk) !important;
  font-size: 11px !important; font-weight: 600 !important;
  padding: 3px 10px !important; border-radius: 99px !important;
}
.chp-chip-x { opacity: .6 !important; }
.chp-chip-clear {
  font-size: 11px !important; font-weight: 700 !important;
  color: var(--text-3) !important; text-decoration: none !important;
  padding: 3px 8px !important; border-radius: 99px !important;
  border: 1px solid var(--border) !important; background: #F5F5F7 !important;
}

/* ════════════════════════════════════
   QUICK PRESETS
════════════════════════════════════ */
#chpPresets {
  padding: 8px 10px !important;
  display: flex !important; gap: 6px !important;
  overflow-x: auto !important; scrollbar-width: none !important;
  background: var(--bg) !important;
}
#chpPresets::-webkit-scrollbar { display: none !important; }
.chp-preset {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  padding: 6px 14px !important; border-radius: 99px !important;
  border: 1.5px solid var(--border) !important;
  background: var(--surface) !important;
  font-size: 12px !important; font-weight: 600 !important;
  color: var(--text-2) !important; text-decoration: none !important;
  white-space: nowrap !important; flex-shrink: 0 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
  transition: all .15s !important;
}
.chp-preset:hover { border-color: var(--pri) !important; color: var(--pri) !important; background: var(--pri-lt) !important; }
.chp-preset.on {
  background: var(--pri) !important; border-color: var(--pri) !important;
  color: #fff !important; font-weight: 700 !important;
  box-shadow: 0 3px 10px rgba(255,58,0,.3) !important;
}

/* ════════════════════════════════════
   RESULTS HEADER
════════════════════════════════════ */
#chpResultsHead {
  padding: 10px 12px 6px !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
}
#chpResultsHead h1 {
  font-size: 15px !important; font-weight: 800 !important;
  color: var(--text) !important; letter-spacing: -.3px !important;
}
.chp-rh-count {
  font-size: 11px !important; color: var(--text-3) !important;
  background: #F5F5F7 !important; border: 1px solid var(--border) !important;
  padding: 3px 10px !important; border-radius: 99px !important; font-weight: 600 !important;
}

/* ════════════════════════════════════
   GRID
════════════════════════════════════ */
#chpGrid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 7px !important;
  padding: 0 !important;
  max-width: 1600px !important; margin: 0 auto !important;
}
@media(min-width: 480px)  { #chpGrid { grid-template-columns: repeat(3,1fr) !important; } }
@media(min-width: 768px)  { #chpGrid { grid-template-columns: repeat(4,1fr) !important; } }
@media(min-width: 960px)  { #chpGrid { grid-template-columns: repeat(5,1fr) !important; } }
@media(min-width: 1200px) { #chpGrid { grid-template-columns: repeat(6,1fr) !important; } }

/* ════════════════════════════════════
   CARD
════════════════════════════════════ */
.chp-card {
  background: var(--surface) !important;
  border: 1.5px solid rgba(0,0,0,.07) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.07) !important;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, border-color .15s !important;
  animation: chpIn .3s ease both !important;
  display: flex !important; flex-direction: column !important;
}
@media(min-width:768px) {
  .chp-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.14), 0 0 0 2px var(--accent) !important;
    border-color: var(--accent) !important;
  }
}

/* ── IMAGE — square ─────────────────────────────────────── */
.chp-img {
  position: relative !important;
  width: 100% !important; height: 0 !important;
  padding-bottom: 100% !important;
  overflow: hidden !important; background: #F0F1F4 !important;
  flex-shrink: 0 !important; border-radius: 0 !important;
}
.chp-img::before {
  content: '' !important; position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  height: 55% !important; z-index: 2 !important; pointer-events: none !important;
  background: linear-gradient(transparent, rgba(0,0,0,.6)) !important;
}
.chp-slide-track {
  position: absolute !important; top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
  display: flex !important;
  transition: transform .38s cubic-bezier(.25,.46,.45,.94) !important;
}
.chp-ci {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: center top !important;
  flex-shrink: 0 !important;
  filter: saturate(1.1) contrast(1.03) brightness(1.02) !important;
  transition: transform .42s ease !important;
}
@media(min-width:768px) { .chp-card:hover .chp-ci { transform: scale(1.06) !important; } }

/* Price overlay */
.chp-img-price-ovl {
  position: absolute !important; bottom: 8px !important; left: 9px !important;
  z-index: 5 !important; display: flex !important; align-items: baseline !important; gap: 4px !important; pointer-events: none !important;
}
[dir=rtl] .chp-img-price-ovl { left: auto !important; right: 9px !important; }
.chp-ipo-price {
  font-size: 20px !important; font-weight: 900 !important; color: #fff !important;
  line-height: 1 !important; letter-spacing: -.5px !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.55) !important; font-variant-numeric: tabular-nums !important;
  -webkit-text-fill-color: #fff !important; background: none !important;
}
.chp-ipo-was { font-size: 11px !important; color: rgba(255,255,255,.6) !important; text-decoration: line-through !important; margin-bottom: 1px !important; }

/* Discount badge */
.chp-disc-badge {
  position: absolute !important; bottom: 8px !important; right: 8px !important; top: auto !important;
  padding: 3px 9px !important; font-size: 11px !important; font-weight: 900 !important;
  border-radius: 99px !important; background: var(--accent) !important; color: #fff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.28) !important; z-index: 5 !important;
}
.chp-img-tr .chp-disc-badge { display: none !important; }

/* Badges */
.chp-bdgs { padding: 6px !important; gap: 4px !important; z-index: 6 !important; }
.chp-b { padding: 3px 7px !important; border-radius: 99px !important; font-size: 8.5px !important; font-weight: 900 !important; letter-spacing: .5px !important; text-transform: uppercase !important; box-shadow: 0 2px 6px rgba(0,0,0,.22) !important; }
.chp-b-new   { background: #22C55E !important; color: #fff !important; }
.chp-b-hot   { background: var(--accent) !important; color: #fff !important; }
.chp-b-flash { background: var(--accent) !important; color: #fff !important; }
.chp-b-best  { background: #F59E0B !important; color: #fff !important; }
.chp-b-trend { background: #8B5CF6 !important; color: #fff !important; }

/* Heart */
.chp-img-tr { top: 6px !important; right: 6px !important; gap: 4px !important; z-index: 6 !important; }
[dir=rtl] .chp-img-tr { left: 6px !important; right: auto !important; }
.chp-wish {
  width: 28px !important; height: 28px !important;
  background: rgba(255,255,255,.88) !important; backdrop-filter: blur(6px) !important;
  border: none !important; box-shadow: 0 1px 6px rgba(0,0,0,.2) !important;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1) !important;
}
.chp-wish:hover { transform: scale(1.18) !important; }
.chp-wish.on svg { fill: #FF3B30 !important; stroke: #FF3B30 !important; }

/* Sold progress */
.chp-prog-wrap { height: 3px !important; background: #E5E5EA !important; flex-shrink: 0 !important; }
.chp-prog-bar  { height: 100% !important; background: var(--accent) !important; transition: width 1s ease !important; }

/* ── BODY ───────────────────────────────────────────────── */
.chp-body { padding: 8px 9px 10px !important; display: flex !important; flex-direction: column !important; flex: 1 !important; gap: 0 !important; background: #fff !important; }

.chp-title {
  font-size: 11.5px !important; font-weight: 700 !important;
  color: var(--text) !important; line-height: 1.35 !important;
  display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
  overflow: hidden !important; height: auto !important; max-height: 30px !important;
  margin: 0 0 5px !important; text-decoration: none !important;
}
.chp-title:hover { color: var(--accent) !important; }

.chp-meta { display: flex !important; align-items: center !important; gap: 3px !important; margin: 0 0 5px !important; flex-wrap: nowrap !important; overflow: hidden !important; white-space: nowrap !important; height: auto !important; }
.chp-meta-stars { font-size: 9px !important; color: #F59E0B !important; flex-shrink: 0 !important; }
.chp-meta-rat   { font-size: 10px !important; font-weight: 800 !important; color: var(--text) !important; background: none !important; background-clip: unset !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: currentColor !important; }
.chp-meta-cnt   { font-size: 9px !important; color: var(--text-3) !important; }
.chp-meta-sold  { font-size: 9px !important; color: var(--accent) !important; font-weight: 700 !important; }

.chp-price-block { display: flex !important; align-items: center !important; gap: 5px !important; flex-wrap: nowrap !important; margin: 0 0 5px !important; }
.chp-price-main  { font-size: 17px !important; font-weight: 900 !important; line-height: 1 !important; color: var(--accent) !important; background: none !important; background-clip: unset !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: currentColor !important; letter-spacing: -.3px !important; }
.chp-price-was   { font-size: 10px !important; color: #C0C4CC !important; text-decoration: line-through !important; }
.chp-off-chip    { display: inline-flex !important; align-items: center !important; padding: 2px 5px !important; border-radius: 99px !important; background: #FFF0EE !important; border: 1px solid #FECACA !important; color: var(--pri) !important; font-size: 8.5px !important; font-weight: 800 !important; }

.chp-scar {
  display: flex !important; align-items: center !important; gap: 4px !important;
  padding: 3px 7px !important; border-radius: 99px !important;
  background: #FFF1F0 !important; border: 1px solid #FECACA !important;
  color: #EF4444 !important; font-size: 8.5px !important; font-weight: 800 !important;
  margin: 0 0 5px !important; align-self: flex-start !important;
  animation: chpScarPulse 2s ease infinite !important;
}
@keyframes chpScarPulse { 0%,88%,100%{opacity:1} 94%{opacity:.5} }
.chp-sdot { display: none !important; }

/* Timer */
.chp-sale-timer {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  background: var(--accent) !important; border: none !important; border-radius: var(--radius-sm) !important;
  padding: 5px 8px !important; margin: 0 0 6px !important; order: 0 !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.18) !important;
}
.chp-sale-timer.ending { animation: chpTimerPulse 1s ease-in-out infinite !important; }
@keyframes chpTimerPulse { 0%,100%{opacity:1} 50%{opacity:.72} }
.chp-sale-label { display: flex !important; align-items: center !important; gap: 3px !important; font-size: 8px !important; font-weight: 900 !important; letter-spacing: .5px !important; text-transform: uppercase !important; color: rgba(255,255,255,.9) !important; flex-shrink: 0 !important; max-width: none !important; }
.chp-sale-label::before { content: '⚡'; font-size: 9px; }
.chp-sale-timevals { gap: 2px !important; }
.chp-sale-box { min-width: 22px !important; height: 20px !important; border-radius: 5px !important; background: rgba(255,255,255,.22) !important; border: 1px solid rgba(255,255,255,.15) !important; color: #fff !important; font-size: 12px !important; font-weight: 900 !important; box-shadow: none !important; font-variant-numeric: tabular-nums !important; }
.chp-sale-sep { font-size: 10px !important; color: rgba(255,255,255,.7) !important; font-weight: 900 !important; }

/* Add to Cart — ALWAYS VISIBLE */
.chp-add-bar {
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important;
  margin-top: auto !important; width: 100% !important; height: 36px !important; padding: 0 !important;
  border: none !important; border-radius: var(--radius-sm) !important;
  background: var(--accent) !important; color: #fff !important;
  font-size: 11.5px !important; font-weight: 800 !important; font-family: inherit !important;
  cursor: pointer !important; letter-spacing: .1px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.18) !important;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), opacity .15s, background .18s !important;
}
.chp-add-bar:hover  { transform: scale(1.02) !important; }
.chp-add-bar:active { transform: scale(.94) !important; opacity: .88 !important; }
.chp-add-bar.done   { background: #16A34A !important; box-shadow: 0 4px 12px rgba(22,163,74,.32) !important; }
.chp-add-bar.busy   { opacity: .5 !important; pointer-events: none !important; }

/* In-cart */
.chp-in-cart-tag { font-size: 8.5px !important; padding: 3px !important; z-index: 7 !important; }
.chp-card.in-cart { border-color: rgba(22,163,74,.35) !important; }
.chp-card.in-cart .chp-add-bar { background: #16A34A !important; }
.chp-cart { background: var(--accent) !important; }
.chp-cart.done { background: #16A34A !important; }

/* Dots */
.chp-img-dots { bottom: 26px !important; z-index: 6 !important; }
.chp-dot        { width: 3px !important; height: 3px !important; background: rgba(255,255,255,.5) !important; }
.chp-dot.active { width: 10px !important; background: #fff !important; }

/* ════════════════════════════════════
   MISC
════════════════════════════════════ */
/* Old sticky cart overridden — new styles in flash section above */
#chpTop     { bottom: 80px !important; background: var(--text) !important; color: #fff !important; border-radius: 50% !important; width: 40px !important; height: 40px !important; border: none !important; }
#chpSentinel   { padding: 14px 0 4px !important; }
.chp-pagination { display: none !important; }
#chpLoadBtn     { display: none !important; background: var(--pri) !important; color: #fff !important; border: none !important; border-radius: 99px !important; padding: 10px 28px !important; font-size: 13px !important; font-weight: 700 !important; cursor: pointer !important; margin: 0 auto !important; }
#chpLoadBtn.visible { display: block !important; }

/* Autocomplete */
#chpAutoList { border-radius: var(--radius-md) !important; box-shadow: 0 8px 28px rgba(0,0,0,.14) !important; border: 1px solid var(--border) !important; }

/* ── Mobile ─────────────────────────────────────────────── */
@media(max-width:599px) {
  #chpWrap         { padding: 8px 7px 100px !important; } /* extra bottom for sticky cart */
  .chp-body        { padding: 6px 7px 8px !important; }
  .chp-title       { font-size: 11px !important; }
  .chp-ipo-price   { font-size: 18px !important; }
  .chp-sale-box    { min-width: 20px !important; height: 18px !important; font-size: 11px !important; }
  .chp-add-bar     { height: 33px !important; font-size: 10.5px !important; }
  .chp-price-block { display: none !important; }
  .chp-meta-cnt    { display: none !important; }
}

/* ═══════════════════════════════════════════════════════
   FINAL OVERRIDES — Flash Sale bigger + Sticky Cart 1cm
   ═══════════════════════════════════════════════════════ */

/* ── Flash Sale — bigger ───────────────────────────────── */
#chpFlash {
  min-height: 80px !important;
  background: linear-gradient(135deg,#7A0000 0%,#B01800 30%,#D93000 60%,#FF5000 100%) !important;
}
.chp-fl-inner {
  display: flex !important; align-items: center !important;
  justify-content: center !important; gap: 22px !important;
  flex-wrap: nowrap !important; position: relative !important; z-index: 1 !important;
  padding: 0 20px !important;
}
.chp-fp {
  font-size: 15px !important; letter-spacing: 2.5px !important;
  padding: 8px 20px !important; border-radius: 10px !important;
  gap: 8px !important;
}
.chp-fp-bolt { font-size: 18px !important; }
.chp-fp-sub  { font-size: 11px !important; letter-spacing: 1px !important; }
.chp-fu      { min-width: 46px !important; height: 46px !important; font-size: 22px !important; border-radius: 10px !important; }
.chp-fsp     { font-size: 24px !important; padding-bottom: 8px !important; }
.chp-fu-u    { font-size: 8px !important; margin-top: 2px !important; }
@media(max-width:599px){
  #chpFlash  { min-height: 64px !important; }
  .chp-fp    { font-size: 12px !important; padding: 6px 14px !important; letter-spacing: 1.8px !important; }
  .chp-fp-sub{ font-size: 9px !important; }
  .chp-fu    { min-width: 34px !important; height: 34px !important; font-size: 16px !important; }
  .chp-fsp   { font-size: 18px !important; }
}

/* ── Sticky Cart — exactly 1cm (~38px) ─────────────────── */
/* Nuclear reset — override everything */
#chpStickyCart,
#chpStickyCart.visible {
  position: fixed !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  top: auto !important;
  z-index: 99999 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  background: #fff !important;
  border-top: 1.5px solid rgba(0,0,0,.1) !important;
  box-shadow: 0 -3px 14px rgba(0,0,0,.12) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
#chpStickyCart         { display: none !important; flex-direction: column !important; }
#chpStickyCart.visible { display: flex !important; flex-direction: column !important; }

/* Shipping strip — very thin */
.chp-sc-ship {
  display: flex !important; align-items: center !important;
  gap: 8px !important; padding: 3px 14px !important;
  background: #F0FDF4 !important;
  border-bottom: 1px solid rgba(34,197,94,.15) !important;
  min-height: 0 !important;
}
.chp-sc-ship-track {
  width: 60px !important; height: 3px !important; flex-shrink: 0 !important;
  background: #D1FAE5 !important; border-radius: 99px !important; overflow: hidden !important;
}
.chp-sc-ship-fill {
  height: 100% !important; width: 0% !important;
  background: linear-gradient(90deg,#16A34A,#22C55E) !important;
  border-radius: 99px !important;
  transition: width .5s ease !important;
}
.chp-sc-ship-txt {
  font-size: 10px !important; color: #15803D !important; font-weight: 600 !important;
  flex: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
.chp-sc-ship-txt strong { font-weight: 900 !important; }

.chp-sc-congrats {
  display: none;
  align-items: center !important; justify-content: center !important;
  padding: 3px 14px !important;
  background: #F0FDF4 !important; border-bottom: 1px solid rgba(34,197,94,.15) !important;
  font-size: 10px !important; font-weight: 700 !important; color: #15803D !important; gap: 5px !important;
}

/* Main row — exactly 1cm = 38px */
.chp-sc-main {
  display: flex !important; align-items: center !important;
  gap: 10px !important;
  padding: 0 14px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}
.chp-sc-info { flex: 1 !important; min-width: 0 !important; display: flex !important; align-items: center !important; gap: 6px !important; }
.chp-sc-lbl  { display: none !important; }
.chp-sc-val  {
  font-size: 13px !important; font-weight: 800 !important; color: #111827 !important;
  display: flex !important; align-items: center !important; gap: 5px !important;
  white-space: nowrap !important; line-height: 1 !important;
}
.chp-sc-dot  { color: #D1D5DB !important; font-size: 11px !important; }
.chp-sc-val #chpSCTotal { color: #FF3A00 !important; }
.chp-sc-btn {
  flex-shrink: 0 !important;
  background: #FF3A00 !important; color: #fff !important;
  padding: 0 16px !important; height: 28px !important;
  border-radius: 7px !important; border: none !important;
  font-size: 12px !important; font-weight: 800 !important;
  text-decoration: none !important; white-space: nowrap !important;
  box-shadow: 0 2px 8px rgba(255,58,0,.3) !important;
  display: inline-flex !important; align-items: center !important;
  cursor: pointer !important; font-family: inherit !important;
}

/* ── Kill animation on sticky cart (breaks position:fixed) ── */
#chpStickyCart,
#chpStickyCart.visible,
#chpStickyCart * {
  animation: none !important;
  will-change: auto !important;
}
/* Force truly fixed — no transform, no will-change */
#chpStickyCart {
  position: fixed !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important;
  transform: none !important;
  -webkit-transform: none !important;
  transition: none !important;
}

/* Fix congrats initial state */
#chpSCCongrats { display: none !important; }

/* ══════════════════════════════════════════
   STICKY CART — Vibrant + Encouraging
══════════════════════════════════════════ */

/* Main bar — warm gradient */
#chpStickyCart.visible .chp-sc-main {
  background: linear-gradient(135deg, #FF4500 0%, #FF6B00 100%) !important;
}
.chp-sc-val,
.chp-sc-val #chpSCTotal,
.chp-sc-dot { color: rgba(255,255,255,.9) !important; }
.chp-sc-lbl { color: rgba(255,255,255,.65) !important; }

/* Checkout button — white on orange */
.chp-sc-btn {
  background: #fff !important;
  color: #FF4500 !important;
  box-shadow: 0 3px 12px rgba(0,0,0,.18) !important;
  font-weight: 900 !important;
  animation: chpCartBtnPulse 2s ease-in-out infinite !important;
}
@keyframes chpCartBtnPulse {
  0%,100% { box-shadow: 0 3px 12px rgba(0,0,0,.18); transform: scale(1); }
  50%     { box-shadow: 0 4px 18px rgba(255,255,255,.4); transform: scale(1.04); }
}

/* Shipping strip — stays green */
.chp-sc-ship {
  background: rgba(0,0,0,.15) !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
}
.chp-sc-ship-track { background: rgba(255,255,255,.2) !important; }
.chp-sc-ship-fill  { background: linear-gradient(90deg,#4ADE80,#86EFAC) !important; }
.chp-sc-ship-txt   { color: rgba(255,255,255,.85) !important; }
.chp-sc-ship-txt strong { color: #fff !important; }

/* Congrats — gold shimmer */
.chp-sc-congrats {
  background: linear-gradient(135deg, #F59E0B, #FBBF24) !important;
  border-bottom: 1px solid rgba(255,255,255,.2) !important;
  color: #7C2D12 !important; font-weight: 800 !important;
  animation: chpCongratsShimmer 2.5s ease-in-out infinite !important;
}
@keyframes chpCongratsShimmer {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}

/* Bar entry — slide up (no transform during animation to keep fixed) */
@keyframes chpCartSlideUp {
  from { opacity:0; }
  to   { opacity:1; }
}
#chpStickyCart.visible {
  animation: chpCartSlideUp .25s ease !important;
}

/* Subtle top border glow */
#chpStickyCart.visible::before {
  content: '' !important;
  position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg,#FF4500,#FFD700,#FF4500) !important;
  background-size: 200% !important;
  animation: chpRainbow 2s linear infinite !important;
}
#chpStickyCart { overflow: visible !important; }

/* ══════════════════════════════════════════════════════════
   STICKY CART — FINAL CLEAN VERSION
   position:fixed مضمون — no animation, no transform
══════════════════════════════════════════════════════════ */

/* Nuclear reset of all previous conflicting rules */
#chpStickyCart {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  z-index: 999999 !important;
  transform: none !important;
  -webkit-transform: none !important;
  will-change: unset !important;
  animation: none !important;
  -webkit-animation: none !important;
  transition: opacity .2s ease !important;
  display: none !important;
  flex-direction: column !important;
  background: linear-gradient(135deg,#FF4500,#FF6B00) !important;
  border-top: none !important;
  box-shadow: 0 -2px 16px rgba(255,69,0,.35) !important;
  overflow: hidden !important;
}
#chpStickyCart * {
  animation: none !important;
  transform: none !important;
  will-change: unset !important;
}
#chpStickyCart.visible {
  display: flex !important;
  opacity: 1 !important;
}

/* Rainbow top line — pure CSS no transform */
#chpStickyCart.visible::before {
  content: '' !important;
  display: block !important;
  height: 2px !important;
  background: linear-gradient(90deg,#FF4500,#FFD700,#FF6B00,#FFD700,#FF4500) !important;
  background-size: 200% !important;
  animation: chpRainbow 2s linear infinite !important;
  flex-shrink: 0 !important;
}

/* Shipping strip */
.chp-sc-ship {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 3px 14px !important;
  background: rgba(0,0,0,.18) !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
  flex-shrink: 0 !important;
}
.chp-sc-ship-track {
  width: 55px !important; height: 3px !important;
  background: rgba(255,255,255,.25) !important;
  border-radius: 99px !important; overflow: hidden !important; flex-shrink: 0 !important;
}
.chp-sc-ship-fill {
  height: 100% !important; width: 0% !important;
  background: linear-gradient(90deg,#4ADE80,#86EFAC) !important;
  border-radius: 99px !important;
  transition: width .5s ease !important;
  transform: none !important;
}
.chp-sc-ship-txt {
  font-size: 10px !important; font-weight: 600 !important;
  color: rgba(255,255,255,.85) !important;
  flex: 1 !important; white-space: nowrap !important;
  overflow: hidden !important; text-overflow: ellipsis !important;
}
.chp-sc-ship-txt strong { color: #fff !important; font-weight: 900 !important; }

/* Congrats */
#chpSCCongrats {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 14px !important;
  background: linear-gradient(135deg,#F59E0B,#FBBF24) !important;
  font-size: 11px !important; font-weight: 800 !important; color: #7C2D12 !important;
  gap: 5px !important; flex-shrink: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.2) !important;
}

/* Main row — 38px fixed height */
.chp-sc-main {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 14px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  flex-shrink: 0 !important;
  box-sizing: content-box !important;
  padding-bottom: env(safe-area-inset-bottom,0px) !important;
}
.chp-sc-info {
  flex: 1 !important; min-width: 0 !important;
  display: flex !important; align-items: center !important;
}
.chp-sc-lbl { display: none !important; }
.chp-sc-val {
  font-size: 13px !important; font-weight: 800 !important;
  color: #fff !important;
  display: flex !important; align-items: center !important; gap: 5px !important;
  white-space: nowrap !important; line-height: 1 !important;
}
.chp-sc-dot { color: rgba(255,255,255,.5) !important; }
.chp-sc-val #chpSCTotal { color: #fff !important; font-weight: 900 !important; }

/* Checkout button — white, pulses */
.chp-sc-btn {
  flex-shrink: 0 !important;
  background: #fff !important;
  color: #FF4500 !important;
  padding: 0 16px !important;
  height: 28px !important;
  border-radius: 7px !important;
  border: none !important;
  font-size: 12px !important; font-weight: 900 !important;
  text-decoration: none !important; white-space: nowrap !important;
  display: inline-flex !important; align-items: center !important;
  cursor: pointer !important; font-family: inherit !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.2) !important;
  transform: none !important;
  animation: chpBtnPulse 2.5s ease-in-out infinite !important;
}
@keyframes chpBtnPulse {
  0%,100% { box-shadow: 0 2px 8px rgba(0,0,0,.2); }
  50%     { box-shadow: 0 3px 14px rgba(0,0,0,.3); }
}

/* ═══════════════════════════════════════════
   URGENCY — Spec §13 rotating messages
   Added v11.0
═══════════════════════════════════════════ */
.chp-urg {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 800;
    color: #DC2626;
    background: #FFF5F5;
    border: 1px solid #FECACA;
    border-radius: 6px;
    padding: 3px 8px;
    margin: 4px 0 5px;
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chp-urg::before {
    content: '🔥';
    font-size: 10px;
    flex-shrink: 0;
}

/* Mobile */
@media (max-width: 480px) {
    .chp-urg {
        font-size: 9.5px;
        padding: 2px 6px;
    }
}


/* ═══════════════════════════════════════════════════════
   CHINAHUB — products.css OVERRIDE  (matches main page)
═══════════════════════════════════════════════════════ */

/* Card */
.chp-card {
    border-radius: 12px !important;
    border: 1px solid #EBEBEB !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.07) !important;
    transition: box-shadow .22s, transform .22s !important;
}
.chp-card:hover {
    box-shadow: 0 8px 28px rgba(255,106,0,.13), 0 2px 8px rgba(0,0,0,.08) !important;
    transform: translateY(-3px) !important;
    border-color: #F0D0B0 !important;
}

/* Image */
.chp-img {
    border-radius: 12px 12px 0 0 !important;
    aspect-ratio: 1/1 !important;
}

/* Badge style */
.chp-b {
    border-radius: 4px !important;
    font-size: 9px !important;
    padding: 3px 7px !important;
}
.chp-bdgs { padding: 0 !important }
.chp-b-flash { background: linear-gradient(135deg,#CC0000,#FF3A00) !important }
.chp-b-best  { background: linear-gradient(135deg,#FF6A00,#FFAA00) !important }
.chp-b-hot   { background: linear-gradient(135deg,#FF4500,#FF8C00) !important }
.chp-b-trend { background: linear-gradient(135deg,#6A00CC,#AA44FF) !important }
.chp-b-new   { background: linear-gradient(135deg,#00897B,#00CC6A) !important }

/* Progress bar */
.chp-prog-wrap { height: 2px !important; background: #F0F0F0 !important }
.chp-prog-bar  { background: var(--orange) !important }

/* Body */
.chp-body { padding: 10px 10px 11px !important }

/* Title */
.chp-title {
    font-size: 12.5px !important;
    font-weight: 400 !important;
    color: #1A1A1A !important;
    line-height: 1.4 !important;
    height: 35px !important;
    margin-bottom: 7px !important;
}
.chp-title:hover { color: #FF6A00 !important }

/* Stars row */
.chp-meta {
    font-size: 11px !important;
    gap: 3px !important;
    margin-bottom: 4px !important;
    height: auto !important;
}
.chp-meta-stars { color: #FFB800; font-size: 11px }
.chp-meta-rat   { color: #444 !important; font-size: 10.5px !important; font-weight: 800 !important }
.chp-meta-cnt   { color: #AAA !important; font-size: 10px !important }
.chp-meta-sold  { display: none !important } /* moved to stats row */

/* Stats row */
.chp-stats-row {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 6px;
    overflow: hidden;
    flex-wrap: nowrap;
}
.chp-sold-pill {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: 10px; font-weight: 700; color: #E65C00;
    background: #FFF3E0; border-radius: 4px;
    padding: 2px 6px; white-space: nowrap;
    margin-right: 6px; flex-shrink: 0;
}
.chp-best-pill {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: 10px; font-weight: 700;
    color: #B45309; background: #FFFBEB;
    border-radius: 4px; padding: 2px 6px;
    white-space: nowrap; flex-shrink: 0;
}

/* Price block — flex row with price left + round button right */
.chp-price-block {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    min-height: auto !important;
    flex-wrap: nowrap !important;
    margin-bottom: 5px !important;
}
.chp-price-left {
    display: flex;
    align-items: baseline;
    gap: 5px;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}
.chp-price-main {
    font-size: 18px !important;
    font-weight: 900 !important;
    color: #CC0000 !important;
    background: none !important;
    -webkit-text-fill-color: #CC0000 !important;
    letter-spacing: -.3px !important;
    line-height: 1 !important;
}
.chp-price-was {
    font-size: 11px !important;
    color: #BBBBBB !important;
    font-weight: 400 !important;
}
.chp-off-chip { display: none !important }

/* Round cart button next to price */
.chp-atc-round {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF6A00, #FF4500);
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: transform .15s, box-shadow .15s;
    box-shadow: 0 3px 12px rgba(255,106,0,.4);
}
.chp-atc-round:hover { transform: scale(1.1); box-shadow: 0 5px 18px rgba(255,106,0,.55) }
.chp-atc-round:active { transform: scale(.93) }
.chp-atc-round svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2.5; fill: none }
.chp-atc-round.done { background: linear-gradient(135deg,#22c55e,#16a34a) }

/* Scarcity */
.chp-scar {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: linear-gradient(90deg,#E55300,#FF6D00);
    border-radius: 4px;
    padding: 2px 7px;
    display: inline-flex;
    width: fit-content;
    margin-top: 3px !important;
}

/* Hide desktop add-bar, show round button instead */
.chp-add-bar { display: none !important }
@media (max-width: 767px) {
    .chp-atc-round { width: 32px !important; height: 32px !important }
    .chp-atc-round svg { width: 14px !important; height: 14px !important }
    .chp-price-main { font-size: 15px !important }
    .chp-title { font-size: 11.5px !important; height: 32px !important }
    .chp-body { padding: 7px 8px 9px !important }
}

/* Desktop cart button on image overlay — keep but smaller */
.chp-cart { display: none !important }

/* Sale timer — hide if no active sale */
.chp-sale-timer:not([data-active]) { display: none }


/* ═══════════════════════════════════════════════════════════════
   CHINAHUB — FINAL CARD OVERRIDE
   Makes .chp-card look identical to homepage .pc card
   6 cols desktop | 2 cols mobile
═══════════════════════════════════════════════════════════════ */

/* Grid */
#chpGrid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 2px !important;
  background: #E8E8E8 !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}
@media(max-width:1280px){#chpGrid{grid-template-columns:repeat(5,1fr)!important}}
@media(max-width:960px) {#chpGrid{grid-template-columns:repeat(4,1fr)!important}}
@media(max-width:768px) {#chpGrid{grid-template-columns:repeat(2,1fr)!important;gap:2px!important}}

/* Card reset */
.chp-card {
  background: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  transform: none !important;
  transition: box-shadow .15s !important;
  animation: none !important;
}
.chp-card:hover {
  box-shadow: inset 0 0 0 2px #FF6A00 !important;
  transform: none !important;
  z-index: 2 !important;
}

/* Image — square, no dark overlay */
.chp-img {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1/1 !important;
  height: auto !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
  background: #F5F5F5 !important;
  flex-shrink: 0 !important;
}
.chp-img::before { display: none !important; content: none !important; }
.chp-ci {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .35s ease !important;
}
.chp-card:hover .chp-ci { transform: scale(1.05) !important; }
.chp-slide-track {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  transition: transform .35s ease !important;
}

/* Badges — small, top-left */
.chp-bdgs {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  z-index: 4 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.chp-b {
  font-size: 9px !important;
  font-weight: 900 !important;
  padding: 3px 8px !important;
  border-radius: 0 0 6px 0 !important;
  text-transform: uppercase !important;
  letter-spacing: .3px !important;
  box-shadow: none !important;
  line-height: 1.3 !important;
  display: inline-block !important;
}
.chp-b-new   { background: #16A34A !important; color: #fff !important; }
.chp-b-flash { background: #CC0000 !important; color: #fff !important; }
.chp-b-best  { background: #D97706 !important; color: #fff !important; }
.chp-b-hot   { background: #EA580C !important; color: #fff !important; }
.chp-b-trend { background: #7C3AED !important; color: #fff !important; }

/* Discount badge — top-right, small */
.chp-disc-badge {
  position: absolute !important;
  top: 6px !important; right: 6px !important;
  bottom: auto !important; left: auto !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  padding: 3px 7px !important;
  border-radius: 4px !important;
  background: #CC0000 !important;
  color: #fff !important;
  box-shadow: none !important;
  z-index: 4 !important;
  line-height: 1.3 !important;
}
.chp-card:hover .chp-disc-badge { opacity: 0 !important; }

/* Wishlist */
.chp-img-tr {
  position: absolute !important;
  top: 6px !important; right: 6px !important;
  opacity: 0 !important;
  transition: opacity .15s !important;
  z-index: 5 !important;
}
.chp-card:hover .chp-img-tr { opacity: 1 !important; }
.chp-wish {
  width: 28px !important; height: 28px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(4px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.15) !important;
  border: none !important;
}

/* Hide clutter */
.chp-qv-btn,
.chp-cmp-chk,
.chp-img-price-ovl,
.chp-in-cart-tag,
.chp-vid-btn,
.chp-vid-badge,
.chp-img-dots,
.chp-cart { display: none !important; }

/* Progress bar */
.chp-prog-wrap { height: 2px !important; background: #F0F0F0 !important; }
.chp-prog-bar  { background: linear-gradient(90deg,#FF6A00,#FF4500) !important; height: 100% !important; }

/* Body */
.chp-body {
  padding: 8px 9px 9px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}
.chp-sale-timer { display: none !important; }

/* Title — 2 lines fixed height */
.chp-title {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #111 !important;
  line-height: 1.4 !important;
  height: 34px !important;
  margin-bottom: 5px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-decoration: none !important;
}
.chp-title:hover { color: #FF6A00 !important; }

/* Price row = price + round cart btn */
.chp-price-block {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  margin-bottom: 4px !important;
  order: 1 !important;
}
.chp-price-left {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  flex: 1 !important;
  min-width: 0 !important;
}
.chp-price-main {
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #CC0000 !important;
  -webkit-text-fill-color: #CC0000 !important;
  background: none !important;
  line-height: 1 !important;
  letter-spacing: -.3px !important;
}
.chp-price-was {
  font-size: 11px !important;
  color: #C0C0C0 !important;
  text-decoration: line-through !important;
  font-weight: 400 !important;
}
.chp-off-chip { display: none !important; }

/* Round cart button */
.chp-atc-round {
  width: 33px !important; height: 33px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg,#FF6A00,#FF4500) !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 3px 10px rgba(255,106,0,.35) !important;
  transition: transform .15s, box-shadow .15s !important;
}
.chp-atc-round:hover { transform: scale(1.1) !important; box-shadow: 0 4px 14px rgba(255,106,0,.5) !important; }
.chp-atc-round:active { transform: scale(.92) !important; }
.chp-atc-round svg { width: 13px !important; height: 13px !important; stroke: #fff !important; fill: none !important; stroke-width: 2.5 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
.chp-atc-round.done { background: linear-gradient(135deg,#16a34a,#15803d) !important; }

/* Stars row */
.chp-meta, .chp-meta.chp-meta-v2 {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  margin-bottom: 3px !important;
  overflow: hidden !important;
  order: 2 !important;
}
.chp-meta-stars, .chp-stars-row {
  display: flex !important;
  align-items: center !important;
  font-size: 11px !important;
  color: #FFB800 !important;
  flex-shrink: 0 !important;
}
.sf { color: #FFB800 !important; font-style: normal !important; }
.sh { color: #FFB800 !important; font-style: normal !important; opacity: .4 !important; }
.se { color: #E0E0E0 !important; font-style: normal !important; }
.chp-meta-rat, .chp-meta-rat-v { font-size: 10px !important; font-weight: 700 !important; color: #333 !important; flex-shrink: 0 !important; margin-left: 1px !important; }
.chp-meta-cnt, .chp-meta-cnt-v { font-size: 10px !important; color: #AAA !important; flex-shrink: 0 !important; }
.chp-meta-sold { font-size: 10px !important; color: #EA580C !important; font-weight: 600 !important; }

/* Sold/badges row */
.chp-badges-row, .chp-stats-row {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  overflow: hidden !important;
  flex-wrap: nowrap !important;
  margin-bottom: 2px !important;
  order: 3 !important;
}
.chp-sold-badge, .chp-sold-pill {
  font-size: 9px !important; font-weight: 700 !important;
  color: #EA580C !important; background: #FFF7ED !important;
  border-radius: 3px !important; padding: 1px 5px !important;
  white-space: nowrap !important; flex-shrink: 0 !important;
}
.chp-best-pill {
  font-size: 9px !important; font-weight: 700 !important;
  color: #D97706 !important; background: #FFFBEB !important;
  border-radius: 3px !important; padding: 1px 5px !important;
  white-space: nowrap !important; flex-shrink: 0 !important;
}

/* Scarcity */
.chp-scar {
  font-size: 9.5px !important; font-weight: 700 !important;
  color: #CC0000 !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-top: 2px !important;
  order: 4 !important;
}

/* Mobile add bar */
.chp-add-bar { display: none !important; }
@media(max-width:767px) {
  .chp-add-bar {
    display: flex !important;
    background: linear-gradient(135deg,#FF6A00,#FF4500) !important;
    border-radius: 8px !important; padding: 9px !important;
    font-size: 12px !important; font-weight: 700 !important;
    width: 100% !important; align-items: center !important;
    justify-content: center !important; gap: 5px !important;
    margin-top: 4px !important;
    box-shadow: 0 3px 10px rgba(255,106,0,.3) !important;
    border: none !important; cursor: pointer !important;
    font-family: inherit !important; order: 5 !important;
  }
  .chp-atc-round { display: none !important; }
  .chp-price-main { font-size: 14px !important; }
  .chp-title { font-size: 11px !important; height: 30px !important; }
  .chp-body { padding: 6px 7px 7px !important; }
  .chp-badges-row, .chp-stats-row { display: none !important; }
}

/* Cat strip — full names, row layout */
.chp-cs-item {
  flex-direction: row !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 11px !important;
  border-radius: 99px !important;
  border: 1.5px solid transparent !important;
  background: #F5F5F5 !important;
  transition: all .15s !important;
  display: flex !important;
  white-space: nowrap !important;
}
.chp-cs-ico { font-size: 14px !important; flex-shrink: 0 !important; }
.chp-cs-lbl {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #555 !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}
.chp-cs-item:hover { border-color: #FF6A00 !important; background: #FFF3EC !important; }
.chp-cs-item:hover .chp-cs-lbl { color: #FF6A00 !important; }
.chp-cs-item.active { background: #FF6A00 !important; border-color: #FF6A00 !important; }
.chp-cs-item.active .chp-cs-lbl { color: #fff !important; font-weight: 700 !important; }
.chp-cs-item.active .chp-cs-ico { filter: brightness(10) !important; }


/* ═══ TARGETED FIXES ═══ */

/* Root accent fix */
:root { --accent: #FF6A00 !important; }

/* Grid — 6 cols FORCED */
#chpGrid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 2px !important;
  background: #E8E8E8 !important;
}
@media (max-width: 1280px) { #chpGrid { grid-template-columns: repeat(5, minmax(0,1fr)) !important; } }
@media (max-width: 960px)  { #chpGrid { grid-template-columns: repeat(4, minmax(0,1fr)) !important; } }
@media (max-width: 767px)  { #chpGrid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }

/* Image container — clip everything inside */
.chp-img {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  background: #F5F5F5 !important;
  display: block !important;
}
.chp-img::before,
.chp-img::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* Slide track — constrained inside image */
.chp-slide-track {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  overflow: hidden !important;
}
/* First image takes full space */
.chp-ci:first-child {
  min-width: 100% !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}
.chp-ci {
  flex-shrink: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Disc badge — tiny top-right */
.chp-disc-badge {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 3px 7px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  border-radius: 4px !important;
  background: #CC0000 !important;
  color: #fff !important;
  line-height: 1.3 !important;
  z-index: 6 !important;
  box-shadow: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
}

/* Card — no inline accent affecting layout */
.chp-card {
  --accent: #FF6A00 !important;
  background: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: box-shadow .15s !important;
  animation: none !important;
  transform: none !important;
}
.chp-card:hover {
  box-shadow: inset 0 0 0 2px #FF6A00 !important;
  transform: none !important;
}


/* ═══ IMAGE FIX — Show only first image like homepage ═══ */

/* Hide all images except first — single static image like .pc */
.chp-ci:not(:first-child) { display: none !important; }

/* Slide track — exact same size as container, no overflow */
.chp-slide-track {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: hidden !important;
}

/* First (only) image fills full square */
.chp-ci:first-child {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .35s ease !important;
  flex-shrink: unset !important;
  min-width: unset !important;
}
.chp-card:hover .chp-ci:first-child { transform: scale(1.05) !important; }

/* Badge positioning — match homepage exactly */
.chp-bdgs {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  z-index: 5 !important;
  padding: 0 !important;
}
.chp-b {
  display: inline-block !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  padding: 4px 9px !important;
  border-radius: 0 0 8px 0 !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
  line-height: 1.3 !important;
  box-shadow: none !important;
}
/* Disc badge — small top-right */
.chp-disc-badge {
  position: absolute !important;
  top: 6px !important; right: 6px !important;
  left: auto !important; bottom: auto !important;
  display: inline-block !important;
  width: auto !important; height: auto !important;
  font-size: 10px !important; font-weight: 900 !important;
  padding: 3px 7px !important;
  border-radius: 4px !important;
  background: #CC0000 !important;
  color: #fff !important;
  z-index: 6 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}
/* Hide disc badge on hover (wishlist shows instead) */
.chp-card:hover .chp-disc-badge { display: none !important; }

/* Hide dots */
.chp-img-dots { display: none !important; }


/* ═══ FINAL FIX — 6 cols grid + homepage card match ═══ */

/* Remove any max-width constraints on grid wrapper */
#chpWrap { padding: 0 !important; max-width: 100% !important; }

/* GRID — force 6 cols, ignore all breakpoints above */
#chpGrid,
div#chpGrid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 2px !important;
  background: #EBEBEB !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}
@media screen and (max-width: 1023px) { #chpGrid { grid-template-columns: repeat(4, minmax(0,1fr)) !important; } }
@media screen and (max-width: 767px)  { #chpGrid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }

/* Card — full match to homepage .pc */
.chp-card {
  background: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  transition: box-shadow .15s !important;
  animation: none !important;
  transform: none !important;
  --accent: #FF6A00 !important;
}
.chp-card:hover {
  box-shadow: inset 0 0 0 2px #FF6A00 !important;
  transform: none !important;
  z-index: 2 !important;
}

/* Image */
.chp-img {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #F5F5F5 !important;
  display: block !important;
  flex-shrink: 0 !important;
}
.chp-img::before { display: none !important; background: none !important; content: none !important; }

/* Carousel — show first image only, fill full square */
.chp-slide-track {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: hidden !important;
}
.chp-ci { display: none !important; }
.chp-ci:first-child {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .35s ease !important;
}
.chp-card:hover .chp-ci:first-child { transform: scale(1.05) !important; }
.chp-img-dots { display: none !important; }

/* Body */
.chp-body {
  padding: 8px 10px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}
.chp-sale-timer { display: none !important; }

/* Title */
.chp-title {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #111 !important;
  line-height: 1.4 !important;
  height: 34px !important;
  margin-bottom: 6px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-decoration: none !important;
}
.chp-title:hover { color: #FF6A00 !important; }

/* Price row */
.chp-price-block {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  margin-bottom: 5px !important;
}
.chp-price-left {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  flex: 1 !important;
  min-width: 0 !important;
}
.chp-price-main {
  font-size: 17px !important;
  font-weight: 900 !important;
  color: #CC0000 !important;
  -webkit-text-fill-color: #CC0000 !important;
  background: none !important;
  line-height: 1 !important;
  letter-spacing: -.3px !important;
}
.chp-price-was {
  font-size: 11px !important;
  color: #C0C0C0 !important;
  text-decoration: line-through !important;
}
.chp-off-chip { display: none !important; }

/* Cart button */
.chp-atc-round {
  width: 34px !important; height: 34px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #FF6A00, #FF4500) !important;
  border: none !important; cursor: pointer !important;
  display: flex !important;
  align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 3px 10px rgba(255,106,0,.4) !important;
  transition: transform .15s !important;
}
.chp-atc-round:hover { transform: scale(1.1) !important; }
.chp-atc-round:active { transform: scale(.92) !important; }
.chp-atc-round svg { width: 14px !important; height: 14px !important; stroke: #fff !important; fill: none !important; stroke-width: 2.5 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
.chp-atc-round.done { background: linear-gradient(135deg,#16a34a,#15803d) !important; }
.chp-cart { display: none !important; }

/* Stars row */
.chp-meta, .chp-meta.chp-meta-v2 {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  margin-bottom: 4px !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}
.chp-meta-stars, .chp-stars-row { display: flex !important; align-items: center !important; font-size: 11px !important; color: #FFB800 !important; }
.chp-meta-rat, .chp-meta-rat-v { font-size: 10px !important; font-weight: 700 !important; color: #333 !important; margin-left: 2px !important; }
.chp-meta-cnt, .chp-meta-cnt-v { font-size: 10px !important; color: #AAA !important; }
.chp-meta-sold { font-size: 10px !important; color: #FF6A00 !important; font-weight: 600 !important; }
.sf { color: #FFB800 !important; font-style: normal !important; }
.sh { color: #FFB800 !important; font-style: normal !important; opacity: .4 !important; }
.se { color: #E0E0E0 !important; font-style: normal !important; }

/* Sold + Best-Selling row — SHOW like homepage */
.chp-stats-row, .chp-badges-row {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  margin-top: 2px !important;
}
.chp-sold-pill, .chp-sold-badge {
  font-size: 9.5px !important; font-weight: 700 !important;
  color: #EA580C !important; display: inline-flex !important;
  align-items: center !important; gap: 2px !important;
  white-space: nowrap !important; flex-shrink: 0 !important;
}
.chp-best-pill {
  font-size: 9.5px !important; font-weight: 600 !important;
  color: #D97706 !important; display: inline-flex !important;
  align-items: center !important; gap: 2px !important;
  white-space: nowrap !important; flex-shrink: 0 !important;
}
.chp-scar {
  font-size: 9.5px !important; font-weight: 700 !important;
  color: #CC0000 !important; display: inline-flex !important;
  align-items: center !important; gap: 2px !important;
  margin-top: 2px !important;
}
.chp-prog-wrap { height: 2px !important; background: #F0F0F0 !important; }
.chp-prog-bar { background: linear-gradient(90deg,#FF6A00,#FF4500) !important; }

/* Hide clutter */
.chp-qv-btn, .chp-cmp-chk, .chp-img-price-ovl,
.chp-in-cart-tag, .chp-vid-btn, .chp-vid-badge { display: none !important; }
.chp-img-tr { opacity: 0 !important; transition: opacity .15s !important; }
.chp-card:hover .chp-img-tr { opacity: 1 !important; }

/* Mobile */
.chp-add-bar { display: none !important; }
@media screen and (max-width: 767px) {
  .chp-add-bar {
    display: flex !important;
    background: linear-gradient(135deg,#FF6A00,#FF4500) !important;
    border-radius: 8px !important; padding: 9px !important;
    font-size: 12px !important; font-weight: 700 !important;
    width: 100% !important; align-items: center !important;
    justify-content: center !important; gap: 5px !important;
    margin-top: 5px !important; border: none !important;
    cursor: pointer !important; font-family: inherit !important;
  }
  .chp-atc-round { display: none !important; }
  .chp-price-main { font-size: 14px !important; }
  .chp-title { font-size: 11px !important; height: 30px !important; }
  .chp-body { padding: 6px 7px 8px !important; }
  .chp-stats-row, .chp-badges-row { display: none !important; }
}


/* ═══════════════════════════════════════════════════════
   TEMU-LEVEL FINAL OVERRIDE — High specificity
═══════════════════════════════════════════════════════ */

/* Grid — highest specificity + !important to beat JS */
html body #chpWrap #chpGrid,
html body div#chpGrid,
body #chpGrid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 2px !important;
  background: #EBEBEB !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}
@media (max-width: 1023px) {
  html body #chpWrap #chpGrid,
  html body div#chpGrid,
  body #chpGrid { grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
}
@media (max-width: 767px) {
  html body #chpWrap #chpGrid,
  html body div#chpGrid,
  body #chpGrid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

/* Wrapper — no padding eating grid space */
html body #chpWrap {
  padding: 0 0 80px 0 !important;
  max-width: 100% !important;
  background: #F2F2F2 !important;
}

/* ── CARD — Temu quality ── */
html body #chpGrid .chp-card {
  background: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  transition: box-shadow .18s !important;
  --accent: #FF6A00 !important;
}
html body #chpGrid .chp-card:hover {
  box-shadow: inset 0 0 0 2px #FF6A00 !important;
  z-index: 2 !important;
}

/* Image — perfect 1:1 */
html body #chpGrid .chp-img {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #F7F7F7 !important;
  display: block !important;
  flex-shrink: 0 !important;
}
html body #chpGrid .chp-img::before,
html body #chpGrid .chp-img::after {
  display: none !important;
  content: none !important;
}
html body #chpGrid .chp-slide-track {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: hidden !important;
}
html body #chpGrid .chp-ci { display: none !important; }
html body #chpGrid .chp-ci:first-child {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform .4s ease !important;
}
html body #chpGrid .chp-card:hover .chp-ci:first-child {
  transform: scale(1.06) !important;
}

/* Badges — Temu style */
html body #chpGrid .chp-bdgs {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  z-index: 5 !important; padding: 0 !important;
}
html body #chpGrid .chp-b {
  display: inline-block !important;
  font-size: 9px !important; font-weight: 900 !important;
  padding: 4px 8px !important;
  border-radius: 0 0 6px 0 !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
  line-height: 1.3 !important;
  box-shadow: none !important;
}
html body #chpGrid .chp-b-new   { background: #00A86B !important; color: #fff !important; }
html body #chpGrid .chp-b-flash { background: #CC0000 !important; color: #fff !important; }
html body #chpGrid .chp-b-best  { background: #E67E00 !important; color: #fff !important; }
html body #chpGrid .chp-b-hot   { background: #FF4500 !important; color: #fff !important; }
html body #chpGrid .chp-b-trend { background: #7C3AED !important; color: #fff !important; }

html body #chpGrid .chp-disc-badge {
  position: absolute !important;
  top: 6px !important; right: 6px !important;
  bottom: auto !important; left: auto !important;
  width: auto !important; height: auto !important;
  font-size: 10px !important; font-weight: 900 !important;
  padding: 3px 7px !important; border-radius: 4px !important;
  background: #CC0000 !important; color: #fff !important;
  z-index: 6 !important; line-height: 1.3 !important;
  white-space: nowrap !important; box-shadow: none !important;
  display: inline-block !important;
}
html body #chpGrid .chp-card:hover .chp-disc-badge { display: none !important; }
html body #chpGrid .chp-img-dots { display: none !important; }

/* Wishlist */
html body #chpGrid .chp-img-tr {
  position: absolute !important;
  top: 6px !important; right: 6px !important;
  opacity: 0 !important; z-index: 7 !important;
  transition: opacity .15s !important;
}
html body #chpGrid .chp-card:hover .chp-img-tr { opacity: 1 !important; }
html body #chpGrid .chp-wish {
  width: 28px !important; height: 28px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.94) !important;
  backdrop-filter: blur(4px) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.15) !important; border: none !important;
}

/* Progress bar */
html body #chpGrid .chp-prog-wrap { height: 2px !important; background: #EFEFEF !important; }
html body #chpGrid .chp-prog-bar  { background: #FF6A00 !important; }

/* Hide clutter */
html body #chpGrid .chp-qv-btn,
html body #chpGrid .chp-cmp-chk,
html body #chpGrid .chp-img-price-ovl,
html body #chpGrid .chp-in-cart-tag,
html body #chpGrid .chp-vid-btn,
html body #chpGrid .chp-vid-badge,
html body #chpGrid .chp-sale-timer { display: none !important; }
html body #chpGrid .chp-cart { display: none !important; }

/* Body */
html body #chpGrid .chp-body {
  padding: 8px 10px 10px !important;
  display: flex !important; flex-direction: column !important; flex: 1 !important;
}

/* Title */
html body #chpGrid .chp-title {
  font-size: 12px !important; font-weight: 400 !important;
  color: #111 !important; line-height: 1.4 !important;
  height: 34px !important; margin-bottom: 6px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
  overflow: hidden !important; text-decoration: none !important;
}
html body #chpGrid .chp-title:hover { color: #FF6A00 !important; }

/* Price + cart row */
html body #chpGrid .chp-price-block {
  display: flex !important; align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important; margin-bottom: 5px !important;
}
html body #chpGrid .chp-price-left {
  display: flex !important; align-items: baseline !important;
  gap: 5px !important; flex: 1 !important; min-width: 0 !important;
}
html body #chpGrid .chp-price-main {
  font-size: 17px !important; font-weight: 900 !important;
  color: #CC0000 !important; -webkit-text-fill-color: #CC0000 !important;
  background: none !important; line-height: 1 !important; letter-spacing: -.3px !important;
}
html body #chpGrid .chp-price-was {
  font-size: 11px !important; color: #BDBDBD !important;
  text-decoration: line-through !important; font-weight: 400 !important;
}
html body #chpGrid .chp-off-chip { display: none !important; }

/* Round cart button */
html body #chpGrid .chp-atc-round {
  width: 34px !important; height: 34px !important; border-radius: 50% !important;
  background: linear-gradient(135deg, #FF6A00, #FF4500) !important;
  border: none !important; cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 3px 12px rgba(255,106,0,.4) !important;
  transition: transform .15s, box-shadow .15s !important;
}
html body #chpGrid .chp-atc-round:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 5px 18px rgba(255,106,0,.55) !important;
}
html body #chpGrid .chp-atc-round:active { transform: scale(.92) !important; }
html body #chpGrid .chp-atc-round svg {
  width: 14px !important; height: 14px !important;
  stroke: #fff !important; fill: none !important;
  stroke-width: 2.5 !important; stroke-linecap: round !important; stroke-linejoin: round !important;
}
html body #chpGrid .chp-atc-round.done { background: linear-gradient(135deg,#16a34a,#15803d) !important; }

/* Stars row */
html body #chpGrid .chp-meta,
html body #chpGrid .chp-meta.chp-meta-v2 {
  display: flex !important; align-items: center !important;
  gap: 3px !important; margin-bottom: 4px !important;
  overflow: hidden !important;
}
html body #chpGrid .chp-meta-stars,
html body #chpGrid .chp-stars-row {
  display: flex !important; font-size: 11px !important; color: #FFB800 !important;
}
.sf { color: #FFB800 !important; font-style: normal !important; }
.sh { color: #FFB800 !important; font-style: normal !important; opacity: .4 !important; }
.se { color: #E0E0E0 !important; font-style: normal !important; }
html body #chpGrid .chp-meta-rat,
html body #chpGrid .chp-meta-rat-v {
  font-size: 10px !important; font-weight: 700 !important; color: #333 !important; margin-left: 2px !important;
}
html body #chpGrid .chp-meta-cnt,
html body #chpGrid .chp-meta-cnt-v { font-size: 10px !important; color: #AAA !important; }

/* Sold + Best-Selling row */
html body #chpGrid .chp-stats-row,
html body #chpGrid .chp-badges-row {
  display: flex !important; align-items: center !important;
  gap: 4px !important; overflow: hidden !important;
  flex-wrap: nowrap !important; margin-top: 2px !important;
}
html body #chpGrid .chp-sold-pill,
html body #chpGrid .chp-sold-badge {
  font-size: 9.5px !important; font-weight: 700 !important;
  color: #EA580C !important;
  white-space: nowrap !important; flex-shrink: 0 !important;
}
html body #chpGrid .chp-best-pill {
  font-size: 9.5px !important; font-weight: 600 !important;
  color: #B45309 !important;
  white-space: nowrap !important; flex-shrink: 0 !important;
}
html body #chpGrid .chp-scar {
  font-size: 9.5px !important; font-weight: 700 !important;
  color: #CC0000 !important; margin-top: 2px !important;
}

/* Mobile add bar */
html body #chpGrid .chp-add-bar { display: none !important; }
@media (max-width: 767px) {
  html body #chpGrid .chp-add-bar {
    display: flex !important;
    background: linear-gradient(135deg,#FF6A00,#FF4500) !important;
    border-radius: 8px !important; padding: 9px !important;
    font-size: 12px !important; font-weight: 700 !important; color: #fff !important;
    width: 100% !important; align-items: center !important;
    justify-content: center !important; gap: 5px !important;
    margin-top: 5px !important; border: none !important;
    cursor: pointer !important; font-family: inherit !important;
  }
  html body #chpGrid .chp-atc-round { display: none !important; }
  html body #chpGrid .chp-price-main { font-size: 14px !important; }
  html body #chpGrid .chp-title { font-size: 11px !important; height: 30px !important; }
  html body #chpGrid .chp-body { padding: 6px 7px 8px !important; }
  html body #chpGrid .chp-stats-row,
  html body #chpGrid .chp-badges-row { display: none !important; }
}


/* ═══ BADGES — Premium Temu Style ═══ */

/* NEW badge — top left */
html body #chpGrid .chp-bdgs {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  z-index: 5 !important; padding: 0 !important;
  display: flex !important; flex-direction: column !important; gap: 2px !important;
}
html body #chpGrid .chp-b {
  display: inline-flex !important;
  align-items: center !important; gap: 3px !important;
  font-size: 10px !important; font-weight: 900 !important;
  padding: 5px 10px !important;
  border-radius: 0 0 10px 0 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  line-height: 1 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.2) !important;
}
html body #chpGrid .chp-b-new {
  background: linear-gradient(135deg, #00A86B, #00CC7A) !important;
  color: #fff !important;
}
html body #chpGrid .chp-b-flash {
  background: linear-gradient(135deg, #CC0000, #FF3A00) !important;
  color: #fff !important;
}
html body #chpGrid .chp-b-best {
  background: linear-gradient(135deg, #D97706, #F59E0B) !important;
  color: #fff !important;
}
html body #chpGrid .chp-b-hot {
  background: linear-gradient(135deg, #FF4500, #FF6A00) !important;
  color: #fff !important;
}
html body #chpGrid .chp-b-trend {
  background: linear-gradient(135deg, #7C3AED, #A855F7) !important;
  color: #fff !important;
}

/* Discount badge — top right, pill style */
html body #chpGrid .chp-disc-badge {
  position: absolute !important;
  top: 8px !important; right: 8px !important;
  bottom: auto !important; left: auto !important;
  width: auto !important; height: auto !important;
  font-size: 11px !important; font-weight: 900 !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, #CC0000, #FF3A00) !important;
  color: #fff !important;
  z-index: 6 !important; line-height: 1.2 !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 8px rgba(204,0,0,.35) !important;
  display: inline-block !important;
  letter-spacing: -.2px !important;
}
html body #chpGrid .chp-card:hover .chp-disc-badge { display: none !important; }