/* ════════════════════════════════════════════════════════════════
   ChinaHub v2 — Master Design System · Final Version
   RTL · Mobile-First · B2C Commerce
   ════════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ───────────────────────────────────────────── */
:root {
  /* ☞ Brand palette — Temu/AliExpress style */
  --pr:        #FF6A00;
  --pr-d:      #E05500;
  --pr-l:      #FF9A3C;
  --pr-bg:     rgba(255,106,0,.08);
  --pr-shadow: 0 10px 28px rgba(255,106,0,.34);

  /* ☞ Semantic accents */
  --orange:  #FF9A3C;
  --green:   #2D6A4F;
  --purple:  #7B2FBE;
  --yellow:  #FFB800;
  --blue:    #1677FF;

  /* ☞ Text */
  --t1: #1A1A1A;
  --t2: #555555;
  --t3: #999999;
  --t4: #BBBBBB;

  /* ☞ Surfaces */
  --bg:     #F5F5F5;
  --white:  #FFFFFF;
  --bdr:    #EBEBEB;
  --bdr2:   #F0F0F0;

  /* ☞ Legacy aliases (DO NOT REMOVE — used in other pages) */
  --or:#FF6A00; --gr:#40916C; --bl:#0EA5E9; --yl:#FFB800;
  --r:8px; --r2:12px; --r3:16px; --rc:999px;
  --sh:0 2px 8px rgba(0,0,0,.07);
  --sh2:0 4px 20px rgba(0,0,0,.12);
  --sh3:0 8px 32px rgba(0,0,0,.15);
  --nav-h:68px; --top-h:36px; --t:.18s ease;
  --bg2:#EBEBF0; --bg-gray:#F2F3F7; --bg-white:#fff;
  --border:#E4E4E8; --border2:#F0F0F4;
  --text:#0F1117; --text2:#4A4E5A; --text3:#9197A6;
  --shadow:0 2px 8px rgba(0,0,0,.07);
  --shadow2:0 4px 20px rgba(0,0,0,.12);
  --primary:#FF6A00; --primary-d:#E05500; --primary-bg:rgba(255,106,0,.08);

  /* ☞ Spacing scale (8pt grid) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:20px; --s6:24px; --s8:32px; --s10:40px;

  /* ☞ Radius scale */
  --rx-xs:   4px;
  --rx-sm:   6px;
  --rx-md:  10px;
  --rx-lg:  14px;
  --rx-xl:  20px;
  --rx-pill:999px;

  /* ☞ Shadow scale */
  --sx-xs: 0 1px 3px rgba(0,0,0,.05);
  --sx-sm: 0 1px 6px rgba(0,0,0,.07);
  --sx-md: 0 4px 16px rgba(0,0,0,.10);
  --sx-lg: 0 8px 32px rgba(0,0,0,.13);
}

/* ── RESET ───────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body {
  font-family:'Cairo',system-ui,sans-serif;
  background:var(--bg); color:var(--t1);
  /* direction is set by HTML dir attribute — do NOT hardcode here */
  font-size:14px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a   { color:inherit; text-decoration:none; transition:color var(--t) }
img { max-width:100%; height:auto; display:block }
input,select,textarea,button { font-family:inherit; font-size:inherit; outline:none }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6 { font-weight:700; line-height:1.3; color:var(--t1) }
::-webkit-scrollbar { width:4px; height:4px }
::-webkit-scrollbar-thumb { background:#ddd; border-radius:99px }
::-webkit-scrollbar-thumb:hover { background:var(--pr) }

/* ── LAYOUT ──────────────────────────────────────────────────── */
.ch-container   { max-width:1200px; margin:0 auto; padding:0 16px }
.ch-page        { padding:20px 0 60px; min-height:calc(100vh - var(--nav-h)) }
.ch-page-2col   { display:grid; grid-template-columns:220px 1fr; gap:16px; align-items:start }
.ch-2col        { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.ch-page-3col   { display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.ch-flex-between{ display:flex; align-items:center; justify-content:space-between; gap:8px }
.ch-page-title  { font-size:20px; font-weight:800; margin-bottom:20px; padding-bottom:12px; border-bottom:2px solid var(--pr) }
.ch-grid        { display:grid; grid-template-columns:repeat(6,1fr); gap:12px }
.ch-grid-5,
.ch-grid-6{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
@media(max-width:1100px){.ch-grid-6{grid-template-columns:repeat(5,1fr)}}
@media(max-width:880px){.ch-grid-6{grid-template-columns:repeat(4,1fr)}}
@media(max-width:640px){.ch-grid-6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:440px){.ch-grid-6{grid-template-columns:repeat(2,1fr)}}
.ch-grid-5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){ .ch-grid{ grid-template-columns:repeat(5,1fr) } }
@media(max-width:900px) { .ch-grid{ grid-template-columns:repeat(4,1fr) }
  .ch-page-2col{ grid-template-columns:1fr } .ch-grid-5{ grid-template-columns:repeat(3,1fr) } }
@media(max-width:680px) { .ch-grid{ grid-template-columns:repeat(3,1fr); gap:8px } }
@media(max-width:460px) { .ch-grid{ grid-template-columns:repeat(2,1fr); gap:8px } }
@media(max-width:640px) { .ch-page-3col{ grid-template-columns:1fr 1fr }
  .ch-2col{ grid-template-columns:1fr } .ch-grid-5{ grid-template-columns:repeat(2,1fr) } }

/* ════════════════════════════════════════════════════════════════
   TOPBAR
════════════════════════════════════════════════════════════════ */
.ch-topbar { background:#111; color:#888; font-size:11.5px; height:var(--top-h); display:flex; align-items:center }
.ch-topbar-inner { display:flex; align-items:center; justify-content:space-between; height:100%; width:100% }
.ch-topbar-start,.ch-topbar-end { display:flex; align-items:center; gap:14px }
.ch-topbar-link { color:#777; display:flex; align-items:center; gap:5px; white-space:nowrap; transition:color var(--t) }
.ch-topbar-link:hover { color:#fff }
@media(max-width:640px){ .ch-topbar{ display:none } }

/* ── LANG ── */
.ch-lang-switch { position:relative }
.ch-lang-btn { background:none; border:1px solid #444; border-radius:var(--r); color:#999; cursor:pointer; padding:3px 10px; display:flex; align-items:center; gap:5px; font-size:12px; transition:var(--t) }
.ch-lang-btn:hover { border-color:#888; color:#fff }
.ch-lang-dropdown { position:absolute; top:calc(100% + 6px); left:0; background:#fff; border:1px solid var(--bdr); border-radius:var(--r2); min-width:140px; box-shadow:var(--sh2); z-index:300; display:none; overflow:hidden }
.ch-lang-dropdown.open { display:block }
.ch-lang-opt { display:flex; align-items:center; gap:8px; padding:9px 14px; font-size:13px; color:var(--t1); transition:background var(--t) }
.ch-lang-opt:hover,.ch-lang-opt.active { background:var(--pr-bg); color:#FF6A00 }

/* ════════════════════════════════════════════════════════════════
   HEADER
════════════════════════════════════════════════════════════════ */
.ch-header { background:#fff; position:sticky; top:0; z-index:800; box-shadow:0 1px 0 var(--bdr), 0 2px 14px rgba(0,0,0,.06) }
.ch-header-main { padding:0 }
.ch-search-wrap { display:flex; border:2px solid var(--pr); border-radius:var(--rx-pill); overflow:hidden; height:42px; background:#fff }
.ch-search-input { flex:1; border:none; padding:0 16px; font-size:14px; color:var(--t1); background:transparent; min-width:0 }
.ch-search-input::placeholder { color:var(--t3) }
.ch-search-cat { border:none; border-right:1px solid var(--bdr); padding:0 8px 0 28px; background:#FAFAFA; color:var(--t2); font-size:12px; cursor:pointer; flex-shrink:0; max-width:120px; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:left 8px center }
.ch-search-btn { background:#FF6A00; color:#fff; border:none; padding:0 20px; cursor:pointer; display:flex; align-items:center; gap:5px; transition:background var(--t); flex-shrink:0; font-weight:700 }
.ch-search-btn:hover { background:linear-gradient(135deg,#FF3A20,#FF6A00) }
.ch-search-suggestions { position:absolute; top:calc(100% + 6px); right:0; left:0; background:#fff; border:1px solid var(--bdr); border-radius:var(--r2); box-shadow:var(--sh2); z-index:500; display:none; overflow:hidden; max-height:360px; overflow-y:auto }
.ch-search-suggestions.open { display:block }
.ch-sug-item { display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer; border-bottom:1px solid var(--bdr2); transition:background var(--t) }
.ch-sug-item:hover { background:var(--bg) }
.ch-sug-img { width:36px; height:36px; border-radius:6px; object-fit:cover; background:var(--bg); flex-shrink:0 }
.ch-sug-text { flex:1; min-width:0 }
.ch-sug-name { font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ch-sug-price { font-size:12px; color:#FF6A00; font-weight:700 }
.ch-sug-keywords { padding:8px 14px; border-bottom:1px solid var(--bdr2) }
.ch-sug-keywords span { display:inline-block; background:var(--bg); border:1px solid var(--bdr); border-radius:99px; padding:3px 10px; font-size:12px; color:var(--t2); margin:2px; cursor:pointer; transition:var(--t) }
.ch-sug-keywords span:hover { border-color:#FF6A00; color:#FF6A00 }

/* ── Header action buttons ── */
.ch-header-action { position:relative; width:40px; height:40px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--t2); border-radius:var(--r); transition:var(--t); cursor:pointer; border:none; background:transparent; gap:2px }
.ch-header-action:hover { color:#FF6A00; background:var(--pr-bg) }
.ch-header-action-label { font-size:9px; color:var(--t3); line-height:1 }
.ch-badge-dot { position:absolute; top:2px; left:2px; background:#FF6A00; color:#fff; font-size:10px; font-weight:700; min-width:16px; height:16px; border-radius:99px; display:flex; align-items:center; justify-content:center; padding:0 3px; border:2px solid #fff }
.ch-cart-action { background:linear-gradient(135deg,#FF3A20,#FF6A00)!important; color:#fff!important; border-radius:var(--r)!important }
.ch-cart-action:hover { background:linear-gradient(135deg,#FF3A20,#FF6A00)!important }
.ch-cart-action .ch-header-action-label { color:rgba(255,255,255,.8)!important }
.ch-cart-count { position:absolute; top:-4px; left:-4px; background:#fff; color:#FF6A00; font-size:10px; font-weight:800; min-width:16px; height:16px; border-radius:99px; display:flex; align-items:center; justify-content:center; padding:0 3px; border:2px solid var(--pr) }

/* ════════════════════════════════════════════════════════════════
   CATEGORY NAV (desktop)
════════════════════════════════════════════════════════════════ */
.ch-cat-nav { background:#fff; border-top:1px solid var(--bdr2); border-bottom:1px solid var(--bdr) }
.ch-cat-nav-list { display:flex; white-space:nowrap; overflow-x:auto; scrollbar-width:none; list-style:none }
.ch-cat-nav-list::-webkit-scrollbar { display:none }
.ch-cat-nav-list li a { display:flex; align-items:center; gap:5px; padding:9px 14px; font-size:13px; font-weight:600; color:var(--t2); border-bottom:2px solid transparent; transition:var(--t); white-space:nowrap }
.ch-cat-nav-list li a:hover { color:#FF6A00; border-bottom-color:#FF6A00 }
.ch-cat-nav-all  { color:#FF6A00!important; font-weight:700!important }
.ch-deals-link   { color:var(--orange)!important; font-weight:700!important }
@media(max-width:900px){ .ch-cat-nav{ display:none } }

/* ════════════════════════════════════════════════════════════════
   MOBILE MENU + BOTTOM NAV
════════════════════════════════════════════════════════════════ */
.ch-mobile-menu { position:fixed; inset:0; z-index:1000; pointer-events:none }
.ch-mobile-menu.open { pointer-events:all }
.ch-mobile-panel { position:absolute; top:0; right:-320px; width:300px; height:100%; background:#fff; box-shadow:var(--sh3); transition:right .3s ease; overflow-y:auto; display:flex; flex-direction:column }
.ch-mobile-menu.open .ch-mobile-panel { right:0 }
.ch-mobile-menu-header { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--bdr); background:var(--t1) }
.ch-close-btn { background:none; border:none; font-size:20px; cursor:pointer; color:#fff; line-height:1; padding:2px }
.ch-mob-search { width:calc(100% - 32px); padding:10px 14px; border:1px solid var(--bdr); border-radius:var(--rx-pill); font-size:14px; background:#fff; margin:12px 16px; display:block }
.ch-mobile-nav { flex:1 }
.ch-mobile-nav a { display:flex; align-items:center; gap:10px; padding:13px 20px; font-size:14px; font-weight:600; border-bottom:1px solid var(--bdr2); color:var(--t1) }
.ch-mobile-nav a:hover { background:var(--bg); color:#FF6A00 }
.ch-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:999; display:none }

/* Bottom Nav */
.ch-mobile-bottom-nav { display:none; position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid var(--bdr); z-index:700; padding:6px 0 max(6px,env(safe-area-inset-bottom)); box-shadow:0 -2px 16px rgba(0,0,0,.08) }
.ch-mob-nav-inner { display:grid; grid-template-columns:repeat(5,1fr) }
.ch-mob-nav-btn { display:flex; flex-direction:column; align-items:center; gap:3px; padding:4px 6px; color:var(--t3); font-size:10px; font-weight:600; border:none; background:none; cursor:pointer; transition:color var(--t); text-decoration:none }
.ch-mob-nav-btn svg { width:22px; height:22px; stroke-width:2 }
.ch-mob-nav-btn.active,.ch-mob-nav-btn:hover { color:#FF6A00 }
.ch-mob-nav-center { background:#FF6A00; color:#fff!important; border-radius:50%; width:46px; height:46px; margin:-12px auto 0; padding:0; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(255,106,0,.35) }
.ch-mob-nav-center:hover { background:linear-gradient(135deg,#FF3A20,#FF6A00) }
@media(max-width:768px){ .ch-mobile-bottom-nav{ display:block } body{ padding-bottom:calc(72px + env(safe-area-inset-bottom,0px)) } }

/* ════════════════════════════════════════════════════════════════
   SECTION HEADERS
════════════════════════════════════════════════════════════════ */
.ch-sec { margin-top:28px; padding-bottom:0 }
.ch-sec-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px; padding-bottom:13px;
  border-bottom:2px solid var(--bdr2);
}
.ch-sec-title {
  font-size:18px; font-weight:900; color:var(--t1);
  display:flex; align-items:center; gap:9px; letter-spacing:-.3px;
}
.ch-sec-title::before {
  content:''; display:inline-block; width:4px; height:20px;
  background:#FF6A00; border-radius:99px; flex-shrink:0;
}
.ch-sec-title span { font-size:20px; line-height:1 }
.ch-sec-link {
  font-size:12px; font-weight:700; color:#FF6A00;
  background:var(--pr-bg); padding:6px 14px;
  border-radius:var(--rx-pill); transition:all .18s; white-space:nowrap;
}
.ch-sec-link:hover { background:#FF6A00; color:#fff }
/* legacy compat */
.ch-section-header,.ch-section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--bdr) }
.ch-section-title { font-size:18px; font-weight:800; display:flex; align-items:center; gap:8px }
.ch-section-title::before { content:''; display:inline-block; width:4px; height:18px; background:#FF6A00; border-radius:2px; flex-shrink:0 }
@media(max-width:768px){ .ch-sec{ margin-top:20px } .ch-sec-title{ font-size:16px } }

/* ════════════════════════════════════════════════════════════════
   HERO SECTION
════════════════════════════════════════════════════════════════ */
.ch-hero-wrap { background:#0A0A0A; overflow:hidden; position:relative }
.ch-hero-slider-track { display:flex; transition:transform .65s cubic-bezier(.4,0,.2,1); will-change:transform }
.ch-hero-slide { min-width:100%; position:relative }
.ch-hero-slide-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center 35%;
  filter:brightness(.28) saturate(1.1);
  transform:scale(1.03); transition:transform 8s ease;
}
.ch-hero-slide.active .ch-hero-slide-bg { transform:scale(1) }
.ch-hero-slide-inner {
  display:grid; grid-template-columns:1fr 380px;
  min-height:310px; align-items:center; position:relative; z-index:1;
}
@media(max-width:900px){ .ch-hero-slide-inner{ grid-template-columns:1fr; min-height:235px } }
.ch-hero-content { padding:48px 40px }
@media(max-width:768px){ .ch-hero-content{ padding:28px 18px } }
.ch-hero-eyebrow {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.13); backdrop-filter:blur(12px);
  color:#fff; border-radius:var(--rx-pill);
  padding:5px 16px; font-size:11.5px; font-weight:700;
  margin-bottom:14px; border:1px solid rgba(255,255,255,.18);
  letter-spacing:.4px;
}
.ch-hero-title {
  font-size:clamp(22px,3.8vw,44px); font-weight:900; color:#fff;
  line-height:1.13; margin-bottom:12px; letter-spacing:-.6px;
}
.ch-hero-title span { color:var(--yellow); display:block }
.ch-hero-sub {
  font-size:14.5px; color:rgba(255,255,255,.72);
  margin-bottom:26px; max-width:410px; line-height:1.7;
}
.ch-hero-btns { display:flex; gap:10px; flex-wrap:wrap }
@media(max-width:640px){
  .ch-hero-title{ font-size:clamp(18px,5vw,26px); letter-spacing:-.2px }
  .ch-hero-sub  { font-size:13px; margin-bottom:18px }
}
.ch-hero-img-area { height:310px; overflow:hidden; position:relative }
.ch-hero-img-area img { width:100%; height:100%; object-fit:cover; mix-blend-mode:luminosity; opacity:.85 }
@media(max-width:900px){ .ch-hero-img-area{ display:none } }
/* Controls */
.ch-hero-dots { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:10 }
.ch-hero-dot { width:6px; height:6px; border-radius:99px; background:rgba(255,255,255,.3); cursor:pointer; transition:all .28s; border:none; padding:0 }
.ch-hero-dot.active { width:22px; background:#fff }
.ch-hero-prev,.ch-hero-next { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.1); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.15); color:#fff; width:38px; height:38px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:18px; z-index:10; transition:all .22s }
.ch-hero-prev:hover,.ch-hero-next:hover { background:rgba(255,255,255,.25) }
.ch-hero-prev { right:14px } .ch-hero-next { left:14px }
@media(max-width:640px){ .ch-hero-prev,.ch-hero-next{ display:none } }
.ch-hero-trust { display:flex; gap:16px; flex-wrap:wrap; margin-top:16px }
.ch-hero-trust-item { display:flex; align-items:center; gap:5px; color:rgba(255,255,255,.65); font-size:12px; font-weight:600 }

/* ════════════════════════════════════════════════════════════════
   BUTTONS — complete hierarchy
════════════════════════════════════════════════════════════════ */
.ch-btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:6px; border-radius:var(--rx-pill); font-weight:700; border:none;
  cursor:pointer; transition:all .18s; white-space:nowrap;
  line-height:1.4; font-size:14px; padding:10px 22px;
}
.ch-btn-lg   { padding:13px 28px; font-size:15px }
.ch-btn-sm   { padding:6px 14px; font-size:12px }
.ch-btn-full { width:100%; justify-content:center }
.ch-btn:disabled { opacity:.5; cursor:not-allowed }

.ch-btn-primary { background:linear-gradient(135deg,#FF3A20,#FF6A00); color:#fff; box-shadow:0 6px 20px rgba(255,106,0,.35) }
.ch-btn-primary:hover { background:linear-gradient(135deg,#FF3A20,#FF6A00); box-shadow:0 8px 26px rgba(255,106,0,.38); transform:translateY(-1px) }
.ch-btn-ghost  { background:rgba(255,255,255,.1); backdrop-filter:blur(8px); border:1.5px solid rgba(255,255,255,.35); color:#fff }
.ch-btn-ghost:hover { background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.6) }
.ch-btn-white  { background:rgba(255,255,255,.15); backdrop-filter:blur(8px); border:1.5px solid rgba(255,255,255,.3); color:#fff }
.ch-btn-white:hover { background:rgba(255,255,255,.28) }
.ch-btn-dark   { background:#1A1A1A; color:#fff } .ch-btn-dark:hover { background:#333 }
.ch-btn-outline{ background:transparent; color:#FF6A00; border:2px solid var(--pr) } .ch-btn-outline:hover{ background:#FF6A00; color:#fff }
.ch-btn-success{ background:var(--green); color:#fff }
.ch-btn-danger { background:#FF6A00; color:#fff }
/* Product page buy buttons */
.ch-add-to-cart-btn,.ch-buy-now-btn { padding:14px; font-size:15px; font-weight:700; border-radius:var(--rx-pill); border:none; cursor:pointer; width:100%; transition:var(--t) }
.ch-add-to-cart-btn { background:linear-gradient(135deg,#FF3A20,#FF6A00); color:#fff; margin-bottom:10px; box-shadow:0 6px 20px rgba(255,106,0,.35) }
.ch-add-to-cart-btn:hover { background:linear-gradient(135deg,#FF3A20,#FF6A00) }
.ch-buy-now-btn { background:var(--t1); color:#fff } .ch-buy-now-btn:hover { background:#333 }

/* ════════════════════════════════════════════════════════════════
   TRUST STRIP
════════════════════════════════════════════════════════════════ */
.ch-trust-strip {
  background:#fff; border:1px solid var(--bdr);
  border-radius:var(--rx-lg); padding:14px 20px;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:12px; margin:14px 0; box-shadow:var(--sx-xs);
}
@media(max-width:640px){ .ch-trust-strip{ grid-template-columns:repeat(2,1fr); gap:10px; padding:12px 14px } }
.ch-trust-item  { display:flex; align-items:center; gap:10px }
.ch-trust-icon  { font-size:20px; flex-shrink:0; width:40px; height:40px; background:#FFF3F3; border-radius:var(--rx-md); display:flex; align-items:center; justify-content:center }
.ch-trust-text strong { display:block; font-size:13px; font-weight:800; color:var(--t1); line-height:1.3 }
.ch-trust-text span   { font-size:10.5px; color:var(--t3) }

/* ════════════════════════════════════════════════════════════════
   QUICK CATEGORIES
════════════════════════════════════════════════════════════════ */
.ch-quick-cats { overflow:hidden; padding:4px 0 14px }
.ch-quick-cats-scroll { display:flex; gap:12px; overflow-x:auto; padding:4px 2px 8px; scrollbar-width:none; -webkit-overflow-scrolling:touch }
.ch-quick-cats-scroll::-webkit-scrollbar { display:none }
.ch-quick-cat { display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; min-width:62px; text-decoration:none; transition:transform .2s }
.ch-quick-cat:hover { transform:translateY(-3px) }
.ch-quick-cat-icon { width:58px; height:58px; border-radius:var(--rx-lg); background:#fff; border:1.5px solid var(--bdr); display:flex; align-items:center; justify-content:center; font-size:24px; transition:all .22s; box-shadow:var(--sx-xs) }
.ch-quick-cat:hover .ch-quick-cat-icon { border-color:#FF6A00; box-shadow:0 4px 14px rgba(255,106,0,.18) }
.ch-quick-cat-name { font-size:11px; font-weight:700; color:var(--t2); text-align:center; line-height:1.3 }
.ch-quick-cat:hover .ch-quick-cat-name { color:#FF6A00 }
.ch-qcat-all { background:linear-gradient(135deg,#FF6A00,#F2A23A)!important; border-color:transparent!important; color:#fff!important; font-size:18px!important }
@media(max-width:640px){ .ch-quick-cat-icon{ width:50px; height:50px; font-size:20px } .ch-quick-cat{ min-width:52px } }

/* ════════════════════════════════════════════════════════════════
   FLASH SALE
════════════════════════════════════════════════════════════════ */
.ch-flash {
  background:linear-gradient(135deg,#1a0d00 0%,#5a1f00 55%,#FF6A00 100%);
  border-radius:var(--rx-xl); overflow:hidden;
  box-shadow:0 10px 40px rgba(255,106,0,.28);
}
.ch-flash-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 20px; flex-wrap:wrap; gap:10px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.ch-flash-left  { display:flex; align-items:center; gap:12px }
.ch-flash-bolt  { font-size:26px; line-height:1; animation:pulse 1.5s infinite }
.ch-flash-title { font-size:18px; font-weight:900; color:#fff; letter-spacing:-.3px }
.ch-flash-ends  { font-size:11px; color:rgba(255,255,255,.5); margin-top:2px }
.ch-cdn { font-family:monospace; font-weight:900; color:var(--yellow); font-size:15px; letter-spacing:.5px }
.ch-flash-link  { color:var(--yellow); font-size:13px; font-weight:700; display:flex; align-items:center; gap:4px; white-space:nowrap }
.ch-flash-link:hover { color:#fff }
/* Grid */
.ch-flash-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:rgba(255,255,255,.06) }
@media(max-width:1000px){ .ch-flash-grid{ grid-template-columns:repeat(4,1fr) } }
@media(max-width:640px) { .ch-flash-grid{ grid-template-columns:repeat(3,1fr) } }
@media(max-width:380px) { .ch-flash-grid{ grid-template-columns:repeat(2,1fr) } }
/* Flash card */
.ch-flash-card { background:#fff; display:block; text-decoration:none; position:relative; overflow:hidden; transition:var(--t) }
.ch-flash-card:hover { z-index:2; box-shadow:0 4px 20px rgba(0,0,0,.2) }
.ch-flash-img { aspect-ratio:1; overflow:hidden; background:#F8F8F8; position:relative }
.ch-flash-img img { width:100%; height:100%; object-fit:cover; transition:transform .35s }
.ch-flash-card:hover .ch-flash-img img { transform:scale(1.07) }
.ch-flash-disc,.ch-flash-discount { position:absolute; top:7px; right:7px; background:#FF6A00; color:#fff; font-size:10px; font-weight:800; padding:2px 7px; border-radius:var(--rx-xs); z-index:2; line-height:1.5 }
.ch-flash-top,.ch-flash-hot-badge { position:absolute; bottom:6px; left:6px; background:var(--yellow); color:#1A1A1A; font-size:9px; font-weight:900; padding:2px 8px; border-radius:99px; line-height:1.5 }
.ch-flash-hot,.ch-flash-card-hot { outline:2px solid rgba(255,184,0,.45) }
.ch-flash-info { padding:8px 9px 10px }
.ch-flash-name { font-size:11.5px; color:var(--t1); line-height:1.4; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; min-height:32px; margin-bottom:4px }
.ch-flash-prices { display:flex; align-items:baseline; gap:5px; flex-wrap:wrap; margin:2px 0 4px }
.ch-flash-price-now { font-size:15px; font-weight:900; color:#FF6A00 }
.ch-flash-price-old,del.ch-flash-price-old { font-size:10px; color:#AAA; text-decoration:line-through; font-style:normal }
.ch-flash-progress,.ch-flash-progress-bar { margin-top:4px }
.ch-flash-progress-label { font-size:10px; color:var(--t3); margin-bottom:3px }
.ch-flash-bar { height:4px; background:rgba(0,0,0,.09); border-radius:99px; overflow:hidden }
.ch-flash-fill,.ch-flash-bar-fill { height:100%; background:linear-gradient(90deg,#F2A23A,#FF6A00); border-radius:99px }
.ch-flash-sold { font-size:10px; color:rgba(0,0,0,.4); margin-top:3px }

/* ════════════════════════════════════════════════════════════════
   MINI BANNERS
════════════════════════════════════════════════════════════════ */
.ch-mini-banners { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:4px 0 8px }
@media(max-width:640px){ .ch-mini-banners{ grid-template-columns:1fr 1fr } .ch-mini-banner:nth-child(3){ display:none } }
.ch-mini-banner { border-radius:var(--rx-lg); display:flex; align-items:center; gap:12px; padding:16px 18px; text-decoration:none; overflow:hidden; position:relative; transition:all .22s; box-shadow:0 2px 10px rgba(0,0,0,.10) }
.ch-mini-banner:hover { transform:translateY(-3px); box-shadow:0 6px 22px rgba(0,0,0,.18) }
.ch-mini-banner-icon  { font-size:28px; flex-shrink:0; z-index:1 }
.ch-mini-banner-text  { z-index:1 }
.ch-mini-banner-title { font-size:13.5px; font-weight:900; color:#fff; line-height:1.2 }
.ch-mini-banner-sub   { font-size:11px; color:rgba(255,255,255,.82); margin-top:2px }

/* ════════════════════════════════════════════════════════════════
   PRODUCT CARDS — Definitive System
   One system, zero duplicates, full coverage.
════════════════════════════════════════════════════════════════ */

/* ── Card shell ── */
.ch-card {
  background:#fff;
  border-radius:var(--rx-lg);
  overflow:hidden;
  border:1px solid #ECECEC;
  box-shadow:var(--sx-sm);
  transition:all .22s ease;
  display:flex;
  flex-direction:column;
  position:relative;
}
.ch-card:hover {
  box-shadow:var(--sx-md);
  border-color:#DCDCDC;
  transform:translateY(-3px);
}

/* ── Image area — tall, dominant ── */
.ch-card-img {
  display:block;
  position:relative;
  aspect-ratio: 1 / 1;
  overflow:hidden;
  background:#F7F7F7;
  flex-shrink:0;
}
.ch-card-img img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .42s ease;
}
.ch-card:hover .ch-card-img img { transform:scale(1.07) }
.ch-no-img { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:36px; background:#F5F5F5; min-height:120px }

/* ── Hover overlay: quick actions ── */
.ch-card-overlay,.ch-card-actions {
  position:absolute; top:8px; left:8px;
  display:flex; flex-direction:column; gap:5px;
  opacity:0; transform:translateX(-8px); transition:.22s;
  z-index:3;
}
.ch-card:hover .ch-card-overlay,
.ch-card:hover .ch-card-actions { opacity:1; transform:translateX(0) }

.ch-act-btn,.ch-card-act-btn {
  width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.95);
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  transition:.15s; color:var(--t2);
}
.ch-act-btn:hover,.ch-card-act-btn:hover {
  background:#fff; transform:scale(1.12); color:#FF6A00;
}

/* ── Badges — unified pill system ── */
.ch-badge {
  position:absolute; top:8px; right:8px;
  font-size:9.5px; font-weight:800;
  padding:3px 9px; border-radius:var(--rx-pill);
  color:#fff; z-index:2; line-height:1.5; letter-spacing:.2px;
}
.ch-badge-sale,.ch-badge.sale   { background:var(--pr) }
.ch-badge-trend,.ch-badge.hot   { background:var(--orange) }
.ch-badge-best,.ch-badge.feat   { background:var(--purple) }
.ch-badge-new,.ch-badge.new     { background:var(--green) }
.ch-badge.viral                 { background:#E91E63 }
.ch-badge-deal                  { background:#1677FF }

/* ── Card body ── */
.ch-card-body {
  padding:10px 10px 12px;
  flex:1; display:flex; flex-direction:column; gap:0;
}

/* ── Product name — 2 lines ── */
.ch-card-name,.ch-card-title {
  font-size:12.5px; color:var(--t1); font-weight:500;
  line-height:1.45; overflow:hidden; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical;
  min-height:36px; margin-bottom:4px;
  text-decoration:none; flex:1;
}
.ch-card-name:hover,.ch-card-title:hover { color:#FF6A00 }

/* ── Stars ── */
.ch-card-stars,.ch-stars {
  display:flex; align-items:center; gap:1px;
  font-size:11px; margin-bottom:4px; min-height:18px;
}
i.st-f { color:var(--yellow); font-style:normal }
i.st-h { color:var(--yellow); font-style:normal; opacity:.6 }
i.st-e { color:#DEDEDE; font-style:normal }
.ch-rv,.ch-rat-val  { font-size:11px; font-weight:700; color:var(--t2); margin-right:2px }
.ch-rc,.ch-rev-count,.ch-stars small { font-size:10px; color:var(--t3) }

/* ── Price — bold, prominent ── */
.ch-card-price,.ch-card-meta { display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-bottom:4px }
/* ═══════════════════════════════════════════════════════════════════
   CHINAHUB — HOMEPAGE v3  |  Clean consolidated CSS
   Covers: Hero, Trust, Categories, Flash Sale, Product Cards,
           Tabs, Why, Reviews, Stats, CTA, Mobile Nav, Toasts
   ═══════════════════════════════════════════════════════════════════ */

/* ── 0. Tokens ─────────────────────────────────────────────────── */
/* ── Homepage token aliases (map to base tokens) ── */
:root {
  --red:   var(--pr);
  --red-d: var(--pr-d);
  --gold:  var(--yellow);
  --card:  #FFFFFF;
  --sh:    0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.06);
  --sh-lg: 0 8px 28px rgba(0,0,0,.12);
}
body { background: var(--bg); }

/* ── 1. Layout ─────────────────────────────────────────────────── */
.ch-container { max-width: 1240px; margin: 0 auto; padding: 0 16px; }

/* ── 2. HERO ───────────────────────────────────────────────────── */
.ch-hero-wrap {
  position: relative; overflow: hidden;
  background: #070B14;
}
.ch-hero-slider-track {
  display: flex;
  direction: ltr;                          /* RTL fix */
  transition: transform .65s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.ch-hero-slide { min-width: 100%; position: relative; direction: rtl; }
.ch-hero-slide-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(.26);
  transition: transform 7s ease;
}
.ch-hero-slide.active .ch-hero-slide-bg { transform: scale(1.05); }

/* Hero inner: text left, image right (RTL: text right, image left) */
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 400px;
  align-items: center;
  gap: 28px;
  min-height: 360px;
  padding: 44px 0 40px;
  position: relative; z-index: 2;
}
.hero-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(200,107,23,.14); border: 1px solid rgba(200,107,23,.26);
  color: #fff; font-size: 12px; font-weight: 700;
  padding: 5px 13px; border-radius: 99px; margin-bottom: 16px;
  letter-spacing: .3px;
}
.hero-h {
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 900; color: #fff; line-height: 1.2;
  margin: 0 0 12px; letter-spacing: -.4px;
}
.hero-h span { color: #FFD60A; }
.hero-p {
  font-size: 14px; color: rgba(255,255,255,.75);
  margin: 0 0 24px; line-height: 1.7;
}
.hero-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.hbtn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 13px 24px; border-radius: 11px;
  font-size: 14.5px; font-weight: 700; cursor: pointer; border: none;
  transition: all .2s; text-decoration: none; white-space: nowrap;
  font-family: inherit;
}
.hbtn-primary {
  background: var(--red); color: #fff;
  box-shadow: 0 4px 18px rgba(255,106,0,.35);
}
.hbtn-primary:hover { background: var(--red-d); transform: translateY(-2px); box-shadow: 0 7px 22px rgba(255,106,0,.4); }
.hbtn-ghost {
  background: rgba(255,255,255,.12); color: #fff;
  border: 1.5px solid rgba(255,255,255,.3);
  backdrop-filter: blur(6px);
}
.hbtn-ghost:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); }

.hero-img {
  position: relative; height: 295px; border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
}
.hero-img img { width: 100%; height: 100%; object-fit: cover; }

/* Hero arrows */
.hero-arr {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.15); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .2s; line-height: 1;
}
.hero-arr:hover { background: rgba(255,255,255,.28); }
.hero-arr-r { right: 14px; }
.hero-arr-l { left:  14px; }

/* Dots */
.ch-hero-dots {
  position: absolute; bottom: 14px; left: 50%;
  transform: translateX(-50%); display: flex; gap: 6px; z-index: 5;
}
.ch-hero-dot {
  width: 7px; height: 7px; border-radius: 99px; border: none; padding: 0;
  background: rgba(255,255,255,.35); cursor: pointer; transition: all .32s;
}
.ch-hero-dot.active { background: #fff; width: 22px; }

@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
    min-height: auto; padding: 28px 0 22px; gap: 16px;
  }
  .hero-img { height: 200px; }
  .hero-h { font-size: 22px; }
  .hbtn { padding: 11px 20px; font-size: 13.5px; }
}
@media (max-width: 480px) {
  .hero-img { display: none; }
  .hero-inner { padding: 22px 0 18px; }
  .hero-h { font-size: 20px; }
}

/* ── 3. TRUST BAR ──────────────────────────────────────────────── */
/* ── Trust Ticker ── */
.ch-trust-ticker {
  overflow: hidden; background: #fff;
  border-radius: 12px; border: 1px solid var(--bdr);
  margin: 12px 0 0; box-shadow: var(--sh);
  padding: 10px 0;
}
.ch-trust-track {
  display: flex; align-items: center; gap: 0;
  width: max-content;
  animation: ch-trust-scroll 30s linear infinite;
  white-space: nowrap;
}
.ch-trust-track:hover { animation-play-state: paused; }
.ch-trust-track span {
  font-size: 12.5px; font-weight: 600; color: var(--t1);
  padding: 0 18px; white-space: nowrap;
}
.ch-trust-sep {
  color: var(--red) !important;
  font-size: 10px !important;
  padding: 0 4px !important;
}
@keyframes ch-trust-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
[dir="rtl"] .ch-trust-track { animation-direction: reverse; }

/* ── 4. CATEGORIES SCROLL ──────────────────────────────────────── */
.cats-scroll {
  display: flex; gap: 10px; overflow-x: auto;
  padding: 14px 2px 10px; scrollbar-width: none;
}
.cats-scroll::-webkit-scrollbar { display: none; }
.cat-item {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  min-width: 62px; max-width: 62px; text-decoration: none;
  flex-shrink: 0; transition: transform .2s;
}
.cat-item:hover { transform: translateY(-3px); }
.cat-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--card); border: 1.5px solid var(--bdr);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; transition: all .2s;
  box-shadow: var(--sh);
}
.cat-item:hover .cat-icon {
  border-color: var(--red); box-shadow: 0 4px 14px rgba(255,106,0,.2);
}
.cat-all .cat-icon {
  background: linear-gradient(135deg, var(--red), #FF8A2C);
  border: none; color: #fff; font-size: 18px;
}
.cat-name {
  font-size: 10.5px; font-weight: 600; color: var(--t2);
  text-align: center; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 62px;
}

/* ── 5. FLASH SALE ─────────────────────────────────────────────── */
.flash-wrap {
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(140deg, #0D0500 0%, #2A1100 60%, #0D0500 100%);
  box-shadow: 0 6px 30px rgba(255,60,0,.22);
}
.flash-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.flash-hd-l { display: flex; align-items: center; gap: 12px; }

.flash-bolt {
  font-size: 32px; line-height: 1;
  filter: drop-shadow(0 0 10px rgba(255,184,0,.8));
  animation: boltPulse 1.6s ease-in-out infinite;
}
@keyframes boltPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }

.flash-ttl { font-size: 20px; font-weight: 900; color: #fff; letter-spacing: .3px; }
.flash-sub { font-size: 11.5px; color: rgba(255,255,255,.5); margin-top: 2px; }

/* Countdown digits */
.flash-cd {
  display: inline-flex; align-items: center; gap: 3px;
}
.flash-cd span:not(.flash-cd-sep) {
  display: inline-flex; align-items: center; justify-content: center;
  background: #FF6A00; color: #fff; font-weight: 900;
  font-size: 15px; min-width: 28px; padding: 4px 6px;
  border-radius: 5px; font-variant-numeric: tabular-nums;
}
.flash-cd-sep { color: rgba(255,255,255,.5); font-weight: 900; font-size: 18px; margin: 0 1px; }
.flash-hd h2 { color: #fff; font-size: 16px; font-weight: 900; }

.flash-more {
  color: var(--gold); font-size: 12.5px; font-weight: 700;
  border: 1px solid rgba(255,184,0,.3); padding: 7px 14px;
  border-radius: 9px; text-decoration: none; transition: all .18s; white-space: nowrap;
}
.flash-more:hover { background: rgba(255,184,0,.1); color: #FFD60A; }

.flash-grid {
  display: flex; overflow-x: auto; gap: 0;
  padding: 16px 14px 18px; scrollbar-width: none;
}
.flash-grid::-webkit-scrollbar { display: none; }

.flash-card {
  flex-shrink: 0; width: 140px; margin-left: 10px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px; overflow: hidden; text-decoration: none;
  transition: all .22s; cursor: pointer; display: flex; flex-direction: column;
}
.flash-card:first-child { margin-right: 0; }
.flash-card:hover {
  transform: translateY(-4px); background: rgba(255,255,255,.1);
  border-color: rgba(255,59,59,.3); box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.flash-card-hot {
  width: 158px;
  background: rgba(255,59,59,.1); border-color: rgba(255,59,59,.25);
}
.flash-img {
  position: relative; aspect-ratio: 1; overflow: hidden; background: #1a0a00;
}
.flash-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.flash-card:hover .flash-img img { transform: scale(1.07); }

.flash-disc {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  background: var(--red); color: #fff; font-size: 10px; font-weight: 900;
  padding: 2px 6px; border-radius: 5px;
}
.flash-badge-hot {
  position: absolute; bottom: 5px; left: 5px; z-index: 2;
  background: rgba(0,0,0,.75); color: var(--gold); font-size: 9px; font-weight: 800;
  padding: 2px 6px; border-radius: 4px; backdrop-filter: blur(4px);
}
.flash-info { padding: 9px 9px 11px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.flash-name {
  font-size: 11px; color: rgba(255,255,255,.88); font-weight: 600;
  line-height: 1.38; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.flash-prices { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.flash-now { font-size: 15px; font-weight: 900; color: #FFB74D; }
.flash-old { font-size: 10px; color: rgba(255,255,255,.3); text-decoration: line-through; }
.flash-bar-wrap { display: flex; align-items: center; gap: 5px; margin-top: auto; }
.flash-bar { flex: 1; height: 4px; background: rgba(255,255,255,.1); border-radius: 99px; overflow: hidden; }
.flash-fill { height: 100%; background: linear-gradient(90deg, #FF6A00, var(--gold)); border-radius: 99px; }
.flash-sold { font-size: 9px; color: rgba(255,255,255,.4); white-space: nowrap; }

@media (max-width: 480px) {
  .flash-card { width: 120px; }
  .flash-card-hot { width: 136px; }
  .flash-ttl { font-size: 17px; }
}

/* ── 6. PRODUCT TABS ───────────────────────────────────────────── */
.prd-tabs {
  display: flex; align-items: center; gap: 2px;
  border-bottom: 2px solid var(--bdr); margin-bottom: 20px;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 0;
}
.prd-tabs::-webkit-scrollbar { display: none; }
.prd-tab-btn {
  padding: 10px 18px; font-size: 13.5px; font-weight: 700;
  border: none; background: none; cursor: pointer; color: var(--t3);
  border-bottom: 2.5px solid transparent; margin-bottom: -2px;
  border-radius: 8px 8px 0 0; transition: all .18s;
  white-space: nowrap; flex-shrink: 0; font-family: inherit;
}
.prd-tab-btn:hover { color: var(--red); background: rgba(255,59,59,.04); }
.prd-tab-btn.active { color: var(--red); border-bottom-color: var(--red); background: rgba(255,59,59,.05); }
.prd-view-all {
  margin-right: auto; margin-left: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--red);
  text-decoration: none; padding: 7px 14px;
  border: 1px solid rgba(255,59,59,.25); border-radius: 8px;
  transition: all .18s; white-space: nowrap; flex-shrink: 0;
}
.prd-view-all:hover { background: rgba(255,59,59,.06); }
.prd-tab-pane { display: none; animation: fadeUp .22s ease; }
.prd-tab-pane.active { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; }
@media(max-width:900px){ .prd-tab-pane.active { grid-template-columns: repeat(4,1fr); gap:10px; } }
@media(max-width:680px){ .prd-tab-pane.active { grid-template-columns: repeat(3,1fr); gap:8px; } }
@media(max-width:420px){ .prd-tab-pane.active { grid-template-columns: repeat(2,1fr); gap:6px; } }
@keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* ── 7. PRODUCT GRID ───────────────────────────────────────────── */
.prd-grid, .prd-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
@media (max-width: 1100px) { .prd-grid, .prd-grid-5 { grid-template-columns: repeat(5,1fr); gap: 12px; } }
@media (max-width: 900px)  { .prd-grid, .prd-grid-5 { grid-template-columns: repeat(4,1fr); gap: 10px; } }
@media (max-width: 680px)  { .prd-grid, .prd-grid-5 { grid-template-columns: repeat(3,1fr); gap: 8px; } }
@media (max-width: 420px)  { .prd-grid, .prd-grid-5 { grid-template-columns: repeat(2,1fr); gap: 6px; } }

/* ── 8. PRODUCT CARD ───────────────────────────────────────────── */
.pc {
  background: var(--card);
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--bdr);
  display: flex; flex-direction: column;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s;
  box-shadow: var(--sh);
}
.pc:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-lg);
  border-color: #D1D5DB;
}

/* — Image wrapper — */
.pc-img {
  display: block; text-decoration: none;
  /* aspect-ratio removed */
  overflow: hidden; background: #F9FAFB;
  position: relative; flex-shrink: 0;
}
.pc-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .45s ease;
}
.pc:hover .pc-img img { transform: scale(1.08); }

/* ─ BADGE SYSTEM — unified, distinct per type ─ */
.cb {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  font-size: 10.5px; font-weight: 900; padding: 3px 8px;
  border-radius: 6px; line-height: 1.4; white-space: nowrap;
  letter-spacing: .2px;
}
/* Flash deal: fiery gradient */
.cb-deal {
  background: linear-gradient(110deg, #FF6A00, #FF8A2C);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255,106,0,.35);
}
/* Sale: solid red */
.cb-sale { background: var(--red); color: #fff; }
/* Trending: amber warm */
.cb-trend {
  background: linear-gradient(110deg, #FF8A2C, #FFB800);
  color: #fff;
}
/* Best seller: regal purple */
.cb-best {
  background: linear-gradient(110deg, #6D28D9, #9333EA);
  color: #fff;
}
/* New arrival: fresh green */
.cb-new {
  background: linear-gradient(110deg, #059669, #10B981);
  color: #fff;
}

/* — Hover overlay — */
.pc-ov {
  position: absolute; top: 8px; left: 8px; z-index: 4;
  display: flex; flex-direction: column; gap: 5px;
  opacity: 0; transform: translateX(-10px); transition: all .22s;
}
.pc:hover .pc-ov { opacity: 1; transform: translateX(0); }
.pc-ov-btn {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(255,255,255,.96); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.15); transition: all .18s;
}
.pc-ov-btn:hover { background: var(--red); }
.pc-ov-btn:hover svg { stroke: #fff !important; }
.pc-wl-ov.wishlisted svg { fill: var(--red); stroke: var(--red) !important; }

/* — Body — */
.pc-body {
  padding: 10px 12px 12px;
  display: flex; flex-direction: column; gap: 4px; flex: 1;
}
.pc-name {
  font-size: 13px; font-weight: 600; color: var(--t1);
  line-height: 1.42; text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.pc-name:hover { color: var(--red); }

/* Stars */
.pc-meta { display: flex; align-items: center; gap: 4px; }
.pc-stars { display: flex; align-items: center; gap: 1px; }
.sf { color: var(--gold); font-size: 11px; font-style: normal; }
.sh { color: var(--gold); font-size: 11px; font-style: normal; opacity: .4; }
.se { color: #D1D5DB; font-size: 11px; font-style: normal; }
.pc-rv { font-size: 11px; font-weight: 700; color: var(--t2); margin-right: 3px; }
.pc-rc { font-size: 10.5px; color: var(--t3); }

/* — PRICE — most prominent element — */
.pc-price {
  display: flex; align-items: baseline; gap: 5px;
  flex-wrap: wrap; margin: 4px 0 2px;
}
.cp-now {
  font-size: 26px; font-weight: 950; color: #CC2200;
  line-height: 1; font-style: normal; letter-spacing: -.5px;
}
.cp-old {
  font-size: 13px; color: #AAA; text-decoration: line-through; font-style: normal; font-weight: 600;
}
.cp-pct {
  font-size: 12px; font-weight: 900; font-style: normal;
  color: #fff; background: #CC2200;
  padding: 3px 8px; border-radius: 5px;
}

/* — Social proof — */
.csoc {
  font-size: 11px; color: var(--t2); font-weight: 600;
  display: flex; align-items: center; gap: 3px; padding: 1px 0;
}
.csoc.hot { color: var(--red); }
.csoc.urg { color: #FF8A2C; }

/* — Footer row — */
.pc-foot {
  display: flex; gap: 7px; align-items: center;
  margin-top: auto; padding-top: 7px;
}
.pc-atc {
  flex: 1; height: 42px; border-radius: 8px;
  background: linear-gradient(90deg,#7A3E0C,#FF6A00); color: #fff; border: none; cursor: pointer;
  font-size: 13.5px; font-weight: 900; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all .2s; white-space: nowrap;
  box-shadow: 0 4px 16px rgba(150,0,0,.35);
}
.pc-atc:hover { background: linear-gradient(90deg,#880000,#CC2200); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(150,0,0,.5); }
.pc-atc.loading { background: #9CA3AF; pointer-events: none; box-shadow: none; }
.pc-atc.added   { background: linear-gradient(90deg,#2D6A4F,#40916C); box-shadow: 0 3px 12px rgba(0,165,80,.35); }
.pc-atc.loading svg, .pc-atc.added svg { stroke: #fff; }

.pc-wl {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px;
  background: #F9FAFB; border: 1.5px solid var(--bdr);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .2s;
}
.pc-wl:hover { border-color: var(--red); background: rgba(255,59,59,.05); }
.pc-wl:hover svg { stroke: var(--red) !important; }
.pc-wl.wishlisted { background: rgba(255,59,59,.07); border-color: var(--red); }
.pc-wl.wishlisted svg { fill: var(--red); stroke: var(--red) !important; }
.pc-wl.loading { opacity: .5; pointer-events: none; }

/* No image */
.ch-no-img {
  width: 100%; height: 100%; display: flex; align-items: center;
  justify-content: center; font-size: 48px; background: #F3F4F6;
}

/* Mobile card tweaks */
@media (max-width: 520px) {
  .pc-body { padding: 8px 9px 10px; gap: 3px; }
  .cp-now { font-size: 21px; }
  .cp-old, .cp-pct { font-size: 11px; }
  .pc-atc { height: 38px; font-size: 12px; border-radius: 8px; }
  .pc-wl { width: 34px; height: 34px; border-radius: 8px; }
  .pc-name { font-size: 12px; }
}

/* ── 9. WHY SECTION ────────────────────────────────────────────── */
.ch-why-sec {
  background: #f8fafc;
  padding: 48px 0;
}
.ch-why-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 28px;
}
@media(max-width:900px){ .ch-why-grid { grid-template-columns: repeat(2,1fr); gap:12px; } }
@media(max-width:480px){ .ch-why-grid { grid-template-columns: 1fr; gap:10px; } }

/* ── 10. REVIEWS ───────────────────────────────────────────────── */
.ch-reviews-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 14px;
}
.ch-review-card {
  background: var(--card); border-radius: 13px; border: 1px solid var(--bdr);
  padding: 16px; box-shadow: var(--sh); transition: all .2s;
}
.ch-review-card:hover { box-shadow: var(--sh-lg); transform: translateY(-2px); }
.ch-review-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ch-review-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: #fff;
}
.ch-review-name { font-size: 13px; font-weight: 700; color: var(--t1); }
.ch-review-loc { font-size: 11px; color: var(--t3); margin-top: 1px; }
.ch-review-stars { margin-right: auto; color: var(--gold); font-size: 12px; letter-spacing: 1px; }
.ch-review-text { font-size: 13px; color: var(--t2); line-height: 1.65; font-style: italic; margin-bottom: 10px; }
.ch-review-footer { font-size: 11px; color: var(--t3); }
@media (max-width: 760px) { .ch-reviews-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .ch-reviews-grid { grid-template-columns: 1fr; } }

/* ── 11. STATS ─────────────────────────────────────────────────── */
.ch-stats-row {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 12px;
}
.ch-stat-box {
  background: var(--card); border-radius: 13px; border: 1px solid var(--bdr);
  padding: 22px 16px; text-align: center; box-shadow: var(--sh);
}
.ch-stat-num { font-size: 28px; font-weight: 900; color: var(--red); margin-bottom: 4px; }
.ch-stat-lbl { font-size: 12px; color: var(--t2); font-weight: 600; }
@media (max-width: 560px) { .ch-stats-row { grid-template-columns: repeat(2,1fr); } }

/* ── 12. SECTION HEADERS ───────────────────────────────────────── */
.ch-sec-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 2px solid var(--bdr);
}
.ch-sec-title {
  font-size: 18px; font-weight: 900; color: var(--t1);
  display: flex; align-items: center; gap: 7px;
}
.ch-sec-title span { font-size: 20px; }
.ch-sec-link { font-size: 13px; color: var(--red); font-weight: 700; text-decoration: none; }
.ch-sec-link:hover { text-decoration: underline; }

/* ── 13. CTA ───────────────────────────────────────────────────── */
.ch-cta-sec {
  background: linear-gradient(135deg, var(--red) 0%, #FF8A2C 100%);
  border-radius: 18px; padding: 36px 28px; text-align: center;
  box-shadow: 0 8px 28px rgba(255,59,59,.32);
}
.ch-cta-sec h2 { font-size: 24px; font-weight: 900; color: #fff; margin: 0 0 8px; }
.ch-cta-sec p { font-size: 14px; color: rgba(255,255,255,.82); margin: 0 0 22px; }
.ch-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.ch-btn-white {
  background: #fff; color: var(--red); font-weight: 800;
  padding: 12px 24px; border-radius: 11px; text-decoration: none;
  font-size: 14px; transition: all .2s; display: inline-block;
}
.ch-btn-white:hover { transform: translateY(-2px); box-shadow: 0 5px 18px rgba(0,0,0,.15); }
.ch-btn-dark {
  background: rgba(0,0,0,.22); color: #fff; font-weight: 700;
  border: 1.5px solid rgba(255,255,255,.32);
  padding: 12px 24px; border-radius: 11px; text-decoration: none;
  font-size: 14px; transition: all .2s; display: inline-block;
}
.ch-btn-dark:hover { background: rgba(0,0,0,.35); transform: translateY(-2px); }

/* ── 14. MOBILE BOTTOM NAV ─────────────────────────────────────── */
.ch-mobile-bottom-nav { display: none; }
@media (max-width: 860px) {
  .ch-mobile-bottom-nav {
    display: block; position: fixed; bottom: 0; left: 0; right: 0; z-index: 800;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(16px) saturate(200%);
    -webkit-backdrop-filter: blur(16px) saturate(200%);
    border-top: 1px solid var(--bdr);
    box-shadow: 0 -4px 20px rgba(0,0,0,.08);
  }
  body { padding-bottom: 64px; }
}
.ch-mob-nav-inner {
  display: flex; align-items: center; height: 56px;
  padding: 0 4px; padding-bottom: env(safe-area-inset-bottom, 0);
}
.ch-mob-nav-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; padding: 5px 2px;
  color: var(--t3); text-decoration: none; border-radius: 10px;
  transition: all .18s; font-size: 10px; font-weight: 600;
}
.ch-mob-nav-btn svg { width: 22px; height: 22px; stroke-width: 1.8; }
.ch-mob-nav-btn.active { color: var(--red); }
.ch-mob-nav-btn.active svg { stroke: var(--red); }
.ch-mob-nav-btn:hover { color: var(--red); }
.ch-mob-nav-center {
  background: rgba(255,59,59,.08); border-radius: 14px;
  color: var(--red) !important;
}
.ch-mob-nav-center svg { stroke: var(--red) !important; }

/* ── 15. MODAL ─────────────────────────────────────────────────── */
.ch-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
}
.ch-modal-overlay.open { display: flex; }
.ch-modal {
  background: var(--card); border-radius: 16px;
  width: 92%; max-height: 86vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.ch-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--bdr);
}
.ch-modal-header h3 { font-size: 16px; font-weight: 800; color: var(--t1); margin: 0; }
.ch-modal-body { padding: 20px; }

/* ── 16. TOASTS ────────────────────────────────────────────────── */
#ch-toasts {
  position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%);
  z-index: 9999; display: flex; flex-direction: column;
  gap: 8px; align-items: center; pointer-events: none;
}
.ch-toast {
  background: var(--t1); color: #fff;
  font-size: 13.5px; font-weight: 600;
  padding: 10px 22px; border-radius: 99px; white-space: nowrap;
  animation: fadeUp .2s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  transition: opacity .35s, transform .35s;
}
.ch-toast.success { background: var(--green); }
.ch-toast.error   { background: var(--red); }

/* ── 17. UTILS ─────────────────────────────────────────────────── */
.ch-empty { text-align: center; padding: 48px 16px; color: var(--t3); }
.ch-empty-icon { font-size: 40px; margin-bottom: 10px; }
.ch-loading {
  width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid var(--bdr); border-top-color: var(--red);
  animation: spin .8s linear infinite; margin: 32px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ── 18. SPACING between sections ─────────────────────────────── */
.ch-section-gap { margin-top: 28px; }


/* ═══════════════════════════════════════════════════════════════
   HEADER CSS — Session 16 Recovery
   Missing classes: ch-header-inner, ch-hamburger, ch-logo,
   ch-search-form, ch-header-actions, ch-hide-mobile, logo text
   ═══════════════════════════════════════════════════════════════ */

/* ── Header Inner Layout ── */
.ch-header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--nav-h, 68px);
  padding: 0;
}

/* ── Logo ── */
.ch-logo {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; flex-shrink: 0;
  margin-left: 4px;
}
.ch-logo img { height: 42px; width: auto; display: block; }
.ch-logo-text {
  font-size: 24px; font-weight: 900; line-height: 1;
  letter-spacing: -.5px;
}
.ch-logo-china { color: var(--pr); }
.ch-logo-hub   { color: var(--t1); }

/* ── Search Form ── */
.ch-search-form {
  flex: 1; position: relative; min-width: 0;
}
.ch-search-wrap {
  display: flex; border: 2.5px solid var(--pr);
  border-radius: 99px; overflow: hidden;
  height: 46px; background: #fff;
  box-shadow: 0 2px 12px rgba(255,61,61,.13);
}
.ch-search-input {
  flex: 1; border: none; padding: 0 18px;
  font-size: 15px; color: var(--t1); background: transparent;
  min-width: 0; font-family: inherit;
}
.ch-search-input::placeholder { color: var(--t3); }
.ch-search-input:focus { outline: none; }
.ch-search-cat {
  border: none; border-right: 1px solid var(--bdr);
  padding: 0 32px 0 12px; background: #FAFAFA;
  color: var(--t2); font-size: 13px; cursor: pointer;
  flex-shrink: 0; max-width: 150px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 10px center;
  font-family: inherit;
}
.ch-search-btn {
  background: var(--pr); color: #fff; border: none;
  padding: 0 22px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s; flex-shrink: 0;
}
.ch-search-btn:hover { background: var(--pr-d); }
.ch-search-btn svg { flex-shrink: 0; width: 20px; height: 20px; }

/* Search suggestions */
.ch-search-suggestions {
  position: absolute; top: calc(100% + 6px); right: 0; left: 0;
  background: #fff; border: 1px solid var(--bdr);
  border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.14);
  z-index: 500; display: none; overflow: hidden;
  max-height: 380px; overflow-y: auto;
}
.ch-search-suggestions.open { display: block; }
.ch-sug-keywords {
  display: flex; gap: 6px; padding: 10px 12px;
  flex-wrap: wrap; border-bottom: 1px solid var(--bdr2);
}
.ch-sug-keywords span {
  font-size: 12px; color: var(--t2); background: var(--bg);
  padding: 4px 10px; border-radius: 99px; cursor: pointer;
  transition: all .15s;
}
.ch-sug-keywords span:hover { background: var(--pr-bg); color: var(--pr); }
.ch-sug-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; text-decoration: none; transition: background .15s;
}
.ch-sug-item:hover { background: var(--bg); }
.ch-sug-img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.ch-sug-name { font-size: 13px; color: var(--t1); font-weight: 500; }
.ch-sug-price { font-size: 12px; color: var(--pr); font-weight: 700; margin-top: 2px; }

/* ── Hamburger ── */
.ch-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: none; border: none; cursor: pointer;
  padding: 6px; border-radius: 8px;
  flex-shrink: 0; transition: background .18s;
}
.ch-hamburger:hover { background: var(--pr-bg); }
.ch-hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--t1); border-radius: 2px;
  transition: all .22s;
}
@media (max-width: 860px) { .ch-hamburger { display: flex; } }

/* ── Header Actions (right icons) ── */
.ch-header-actions {
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.ch-header-action {
  position: relative; width: 46px; height: 46px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--t2); border-radius: var(--r);
  transition: var(--t); cursor: pointer;
  border: none; background: transparent; gap: 3px;
  text-decoration: none;
}
.ch-header-action:hover { color: var(--pr); background: var(--pr-bg); }
.ch-header-action-label { font-size: 10px; color: var(--t3); line-height: 1; }

.ch-hide-mobile { }
@media (max-width: 860px) {
  .ch-hide-mobile { display: none !important; }
  .ch-search-cat  { display: none; }
  .ch-search-form { flex: 1; }
  .ch-header-inner { gap: 10px; }
}
@media (max-width: 480px) {
  .ch-search-form { max-width: calc(100vw - 150px); }
}

/* Cart action special styling */
.ch-cart-action {
  background: var(--pr) !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 0 10px !important;
  min-width: 44px;
  position: relative;
}
.ch-cart-action:hover { background: var(--pr-d) !important; }
.ch-cart-action .ch-header-action-label { color: rgba(255,255,255,.85) !important; }
.ch-cart-count {
  position: absolute; top: 4px; right: 4px;
  background: #fff; color: var(--pr);
  font-size: 9px; font-weight: 900;
  min-width: 16px; height: 16px; border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; line-height: 1;
}
.ch-cart-count:empty { display: none; }

/* Badge dot (notifications) */
.ch-badge-dot {
  position: absolute; top: 6px; right: 6px;
  background: var(--pr); color: #fff;
  font-size: 8px; font-weight: 900;
  min-width: 14px; height: 14px; border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; border: 2px solid #fff;
}

/* ── Mobile Side Menu ── */
.ch-mobile-menu {
  position: fixed; top: 0; right: -100%; width: min(320px, 88vw);
  height: 100vh; background: #fff; z-index: 1500;
  box-shadow: -4px 0 30px rgba(0,0,0,.15);
  transition: right .3s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
}
.ch-mobile-menu.open { right: 0; }
.ch-overlay {
  display: none; position: fixed; inset: 0; z-index: 1400;
  background: rgba(0,0,0,.45); backdrop-filter: blur(3px);
}
.ch-mobile-panel { padding: 0; }
.ch-mobile-menu-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px; border-bottom: 1px solid var(--bdr);
  background: #FAFAFA;
}
.ch-close-btn {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--bg); border: none; cursor: pointer;
  font-size: 16px; display: flex; align-items: center;
  justify-content: center; transition: all .18s; color: var(--t2);
}
.ch-close-btn:hover { background: var(--pr-bg); color: var(--pr); }
.ch-mob-search {
  display: block; width: 100%; padding: 10px 14px;
  border: none; border-bottom: 1px solid var(--bdr);
  font-size: 14px; color: var(--t1); background: #FAFAFA;
  font-family: inherit; box-sizing: border-box;
}
.ch-mob-search:focus { outline: none; background: #fff; }
.ch-mobile-nav {
  display: flex; flex-direction: column; padding: 8px 0;
}
.ch-mobile-nav a {
  display: block; padding: 12px 16px; font-size: 14px;
  color: var(--t1); text-decoration: none; font-weight: 500;
  border-bottom: 1px solid var(--bdr2); transition: all .15s;
}
.ch-mobile-nav a:hover { background: var(--pr-bg); color: var(--pr); }

/* ── Category Nav ── */
.ch-cat-nav {
  background: #fff; border-top: 1px solid var(--bdr2);
  border-bottom: 1px solid var(--bdr);
}
.ch-cat-nav-list {
  display: flex; white-space: nowrap; overflow-x: auto;
  scrollbar-width: none; list-style: none; margin: 0; padding: 0;
  height: 38px; align-items: stretch;
}
.ch-cat-nav-list::-webkit-scrollbar { display: none; }
.ch-cat-nav-list li { display: flex; align-items: stretch; }
.ch-cat-nav-list a {
  display: flex; align-items: center;
  padding: 0 12px; font-size: 12.5px; font-weight: 600;
  color: var(--t2); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: all .18s; gap: 4px;
}
.ch-cat-nav-list a:hover { color: var(--pr); border-bottom-color: var(--pr); background: var(--pr-bg); }
.ch-cat-nav-all { color: var(--pr) !important; font-weight: 700 !important; }
.ch-deals-link { color: var(--orange) !important; font-weight: 700 !important; }


/* ═══════════════════════════════════════════════════════════════
   PRODUCT CARD — Missing classes recovery
   ch-card-foot, ch-atc-btn, ch-wish-icon, ch-pnew/old/dis,
   ch-badge positioning, interaction states
   ═══════════════════════════════════════════════════════════════ */

/* Badge inside card image */
.ch-card-img .ch-badge {
  position: absolute; top: 8px; right: 8px; z-index: 2;
}

/* ── Card Footer (ATC + Wishlist row) ── */
.ch-card-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

/* ── Add to Cart Button ── */
.ch-atc-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--pr);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0 10px;
  height: 34px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s, transform .12s;
  font-family: inherit;
  white-space: nowrap;
  overflow: hidden;
}
.ch-atc-btn:hover  { background: var(--pr-d); }
.ch-atc-btn:active { transform: scale(.96); }

/* Loading state */
.ch-atc-btn.loading {
  background: var(--t3);
  pointer-events: none;
  opacity: .8;
}
/* Added/success state */
.ch-atc-btn.added {
  background: var(--green, #40916C) !important;
}
@keyframes bounce {
  0%,100% { transform: scale(1); }
  40%      { transform: scale(1.08); }
  70%      { transform: scale(.95); }
}
.ch-atc-btn.bounce { animation: bounce .35s ease; }

/* ── Wishlist Heart Icon ── */
.ch-wish-icon {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--bdr);
  border-radius: 8px;
  background: #fff;
  color: var(--t3);
  cursor: pointer;
  flex-shrink: 0;
  transition: all .18s;
  font-family: inherit;
}
.ch-wish-icon:hover { border-color: var(--pr); color: var(--pr); }
.ch-wish-icon.wishlisted {
  background: #FFF0F0;
  border-color: var(--pr);
  color: var(--pr);
}
.ch-wish-icon.wishlisted svg { fill: var(--pr); stroke: var(--pr); }
@keyframes pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.ch-wish-icon.pop { animation: pop .3s ease; }

/* ── Price Row ── */
.ch-card-price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
  margin: 4px 0 2px;
}
.ch-pnew {
  font-size: 16px;
  font-weight: 900;
  color: var(--pr);
  line-height: 1;
}
.ch-pold {
  font-size: 11px;
  color: var(--t3);
  text-decoration: line-through;
}
.ch-pdis {
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  color: var(--green, #40916C);
  background: rgba(0,185,107,.1);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ── Psych triggers ── */
.ch-psych {
  font-size: 11px;
  color: var(--t2);
  margin: 2px 0 4px;
}
.ch-psych-hot    { color: var(--orange, #FF8A2C); font-weight: 700; }
.ch-psych-urgent { color: var(--pr); font-weight: 700; }

/* ── Star ratings ── */
.ch-card-stars {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  margin: 2px 0;
  flex-wrap: wrap;
}
.st-f { color: var(--yellow, #FFB800); font-style: normal; }
.st-h { color: var(--yellow, #FFB800); font-style: normal; opacity: .5; }
.st-e { color: var(--t4); font-style: normal; }
.ch-rv { font-size: 11px; font-weight: 700; color: var(--t1); }
.ch-rc { font-size: 11px; color: var(--t3); }

/* ── Quick View button (bottom of image on hover) ── */
.ch-card-qv {
  position: absolute;
  bottom: 0; right: 0; left: 0;
  background: rgba(0,0,0,.7);
  color: #fff;
  border: none;
  font-size: 11px;
  font-weight: 600;
  padding: 8px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(100%);
  transition: all .22s;
  font-family: inherit;
}
.ch-card:hover .ch-card-qv {
  opacity: 1;
  transform: translateY(0);
}

/* ── Overlay action buttons (heart/eye on image hover) ── */
.ch-card-overlay {
  position: absolute; top: 8px; left: 8px;
  display: flex; flex-direction: column; gap: 5px;
  opacity: 0; transition: opacity .22s;
  z-index: 3;
}
.ch-card:hover .ch-card-overlay { opacity: 1; }
.ch-act-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--t2);
  transition: all .18s;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.ch-act-btn:hover { background: #fff; color: var(--pr); transform: scale(1.08); }


/* ═══════════════════════════════════════════════════════════════
   CART SIDEBAR — Fixed slide-in panel from right
   ═══════════════════════════════════════════════════════════════ */
.ch-cart-sidebar {
  position: fixed;
  top: 0; right: -100%;
  width: min(380px, 92vw);
  height: 100vh;
  background: #fff;
  z-index: 1600;
  box-shadow: -4px 0 30px rgba(0,0,0,.15);
  transition: right .3s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ch-cart-sidebar.open { right: 0; }

.ch-cart-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--bdr);
  background: #FAFAFA;
  flex-shrink: 0;
}
.ch-cart-sidebar-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--t1);
}
.ch-cart-sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.ch-cart-sidebar-footer {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--bdr);
  background: #FAFAFA;
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════
   FOOTER — Professional Dark Design
   ═══════════════════════════════════════════════════════════════ */

.ch-footer {
  background: #111827;
  color: #D1D5DB;
  margin-top: 60px;
  font-size: 14px;
  direction: rtl;
}

/* ── Trust Bar ── */
.ch-footer-trust {
  background: #FF6A00;
  padding: 12px 0;
  overflow: hidden;
}
.ch-footer-trust-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.ch-trust-item {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 20px;
  white-space: nowrap;
  border-left: 1px solid rgba(255,255,255,.3);
}
.ch-trust-item:last-child { border-left: none; }
@media(max-width:600px){
  .ch-trust-item { padding: 4px 12px; font-size: 12px; }
}

/* ── Footer Top Grid ── */
.ch-footer-top {
  padding: 52px 0 40px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ch-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  align-items: start;
}
@media(max-width:900px){
  .ch-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media(max-width:500px){
  .ch-footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ── Brand Column ── */
.ch-footer-brand {}

.ch-footer-logo {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1;
  margin-bottom: 12px;
}
.ch-footer-logo .ch-logo-china { color: #FF6A00; }
.ch-footer-logo .ch-logo-hub   { color: #fff; }

.ch-footer-tagline {
  color: #9CA3AF;
  font-size: 13px;
  line-height: 1.7;
  margin: 0 0 20px;
}

/* ── Social Icons ── */
.ch-footer-social-label,
.ch-footer-pay-label {
  font-size: 11px;
  font-weight: 700;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.ch-footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.ch-footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  transition: background .2s, transform .2s, border-color .2s;
  overflow: hidden;
  flex-shrink: 0;
}
.ch-footer-social a:hover {
  background: #FF6A00;
  border-color: #FF6A00;
  transform: translateY(-2px);
}
.ch-footer-social a img {
  width: 20px;
  height: 20px;
  display: block;
  filter: brightness(0) invert(1);
}

/* ── Payment Badges ── */
.ch-footer-payments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.ch-footer-payments img {
  height: 26px;
  width: auto;
  border-radius: 4px;
  background: rgba(255,255,255,.9);
  padding: 2px 5px;
  display: block;
  object-fit: contain;
}

/* ── Contact ── */
.ch-footer-contact {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ch-footer-contact a {
  color: #9CA3AF;
  text-decoration: none;
  font-size: 13px;
  transition: color .2s;
}
.ch-footer-contact a:hover { color: #FF6A00; }

/* ── Link Columns ── */
.ch-footer-col h4 {
  color: #F9FAFB;
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #FF6A00;
  display: inline-block;
}
.ch-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ch-footer-col ul li a {
  color: #9CA3AF;
  text-decoration: none;
  font-size: 13px;
  transition: color .2s, padding-right .2s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ch-footer-col ul li a:hover {
  color: #FF6A00;
  padding-right: 4px;
}

/* ── Bottom Bar ── */
.ch-footer-bottom {
  padding: 18px 0;
  background: #0D1117;
}
.ch-footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.ch-footer-bottom p {
  margin: 0;
  color: #6B7280;
  font-size: 13px;
}
.ch-footer-legal {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.ch-footer-legal a {
  color: #6B7280;
  text-decoration: none;
  font-size: 13px;
  transition: color .2s;
}
.ch-footer-legal a:hover { color: #FF6A00; }

/* ── Back to Top ── */
.ch-back-top {
  position: fixed;
  bottom: 80px;
  left: 20px;
  width: 42px; height: 42px;
  background: #FF6A00;
  color: #fff;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(255,106,0,.35);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .3s, transform .3s;
  z-index: 600;
}
.ch-back-top.visible { opacity: 1; transform: translateY(0); }
.ch-back-top:hover { background: #D93030; transform: translateY(-2px); }


/* ── Social Icons SVG Brand Colors ── */
.ch-footer-social a svg {
  width: 18px; height: 18px;
  fill: #9CA3AF;
  display: block;
  transition: fill .2s;
}
.ch-footer-social a:hover svg { fill: #fff; }

/* Brand color on hover per platform */
.ch-soc-wa:hover  { background: #25D366 !important; border-color: #25D366 !important; }
.ch-soc-tg:hover  { background: #229ED9 !important; border-color: #229ED9 !important; }
.ch-soc-yt:hover  { background: #FF0000 !important; border-color: #FF0000 !important; }
.ch-soc-tt:hover  { background: #010101 !important; border-color: #333 !important; }
.ch-soc-tw:hover  { background: #1DA1F2 !important; border-color: #1DA1F2 !important; }
.ch-soc-fb:hover  { background: #1877F2 !important; border-color: #1877F2 !important; }
.ch-soc-ig:hover  { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888) !important; border-color: #e6683c !important; }
.ch-soc-sc:hover  { background: #FFFC00 !important; border-color: #FFFC00 !important; }
.ch-soc-sc:hover svg { fill: #000 !important; }


/* ── Payment Badges HTML ── */
.ch-footer-payments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.ch-pay-badge {
  height: 30px;
  min-width: 52px;
  padding: 0 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .2s, box-shadow .2s;
  cursor: default;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.ch-pay-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
}


/* ═══════════════════════════════════════════════════════════════
   GLOBAL FEATURES — Live Stats, Map, Clocks, Track, Partners
   ═══════════════════════════════════════════════════════════════ */

/* ── Live Stats Bar ── */
.ch-live-bar {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  padding: 14px 0;
  border-bottom: 2px solid rgba(255,61,61,.3);
  position: relative;
  overflow: hidden;
}
.ch-live-bar::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,61,61,.15) 0%, transparent 70%);
}
.ch-live-bar-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  position: relative;
}
.ch-live-pulse {
  width: 10px; height: 10px;
  background: #40916C;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(0,185,107,.6);
  animation: livePulse 1.5s infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,185,107,.6); }
  70%  { box-shadow: 0 0 0 10px rgba(0,185,107,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,185,107,0); }
}
.ch-live-label { color: #94a3b8; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ch-live-stats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ch-live-stat { display: flex; align-items: center; gap: 8px; }
.ch-live-num {
  font-size: 20px; font-weight: 900;
  color: #fff;
  font-variant-numeric: tabular-nums;
  transition: color .4s;
  min-width: 60px;
  display: inline-block;
}
.ch-live-desc { font-size: 11px; color: #64748b; }
.ch-live-sep { color: #334155; font-size: 18px; }
@media(max-width:600px) {
  .ch-live-bar-inner { justify-content: center; }
  .ch-live-num { font-size: 16px; }
}

/* ── Flags Ticker ── */
.ch-flags-section {}
.ch-flags-ticker-wrap {
  overflow: hidden;
  position: relative;
  margin-top: 16px;
}
.ch-flags-ticker-wrap::before,
.ch-flags-ticker-wrap::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2;
}
.ch-flags-ticker-wrap::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.ch-flags-ticker-wrap::after  { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
.ch-flags-ticker {
  display: flex;
  gap: 0;
  animation: flagScroll 40s linear infinite;
  width: max-content;
}
.ch-flags-ticker:hover { animation-play-state: paused; }
@keyframes flagScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ch-flag-item {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--t2);
  white-space: nowrap;
  border-right: 1px solid var(--bdr);
  transition: color .2s, background .2s;
  cursor: default;
}
.ch-flag-item:hover { color: var(--pr); background: var(--pr-bg); }

/* ── World Map ── */
.ch-worldmap-sec {
  background: linear-gradient(135deg, #0a0f1e 0%, #111827 100%);
  padding: 60px 0;
  margin: 0 -0px;
}
.ch-worldmap-sec .ch-sec-title { color: #f1f5f9 !important; }
.ch-worldmap-sec .ch-sec-title span { filter: none; }
.ch-sec-sub { color: #64748b; font-size: 14px; margin: 6px 0 0; }
.ch-map-wrap { position: relative; }
.ch-world-svg {
  width: 100%;
  max-height: 400px;
  display: block;
}
.ch-map-land {
  fill: #1e293b;
  stroke: #334155;
  stroke-width: 1;
  transition: fill .3s;
}
.ch-map-land:hover { fill: #293548; }
.ch-map-highlight { fill: #1e3a5f !important; }
.ch-map-china { fill: #3d1515; stroke: #FF6A00; stroke-width: 1.5; }
.ch-route-line {
  stroke: rgba(255,61,61,.5);
  stroke-width: 1;
  fill: none;
  stroke-dasharray: 8 4;
  animation: routeDash 3s linear infinite;
}
@keyframes routeDash { to { stroke-dashoffset: -36; } }
.ch-pulse-ring {
  animation: mapPulse 2s ease-out infinite;
  transform-origin: center;
}
@keyframes mapPulse {
  0%   { r: 4; opacity: .8; }
  100% { r: 14; opacity: 0; }
}
.ch-map-stats {
  position: absolute;
  bottom: 16px; right: 16px;
  background: rgba(15,23,42,.9);
  border: 1px solid #1e293b;
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ch-map-stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #94a3b8;
}
.ch-map-stat-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
@media(max-width:600px) { .ch-map-stats { display: none; } }

/* ── World Clocks ── */
.ch-clocks-row {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}
.ch-clock-card {
  background: #fff;
  border: 2px solid var(--bdr);
  border-radius: 16px;
  padding: 20px 16px 16px;
  text-align: center;
  width: 130px;
  flex-shrink: 0;
  transition: border-color .3s, box-shadow .3s;
}
.ch-clock-card:hover,
.ch-clock-card.active {
  border-color: var(--pr);
  box-shadow: 0 4px 20px rgba(255,61,61,.15);
}
.ch-clock-face {
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 3px solid #e5e7eb;
  margin: 0 auto 10px;
  position: relative;
  background: radial-gradient(circle, #f9fafb, #fff);
}
.ch-clock-face::before,
.ch-clock-face::after {
  content: '';
  position: absolute;
  background: #d1d5db;
  border-radius: 2px;
}
/* Hour marks */
.ch-clock-face::before { width: 2px; height: 8px; top: 4px; left: calc(50% - 1px); }
.ch-clock-hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(0deg);
  border-radius: 3px 3px 0 0;
  transition: transform 0.1s ease;
}
.ch-clock-hour { width: 4px; height: 26px; background: #1a1a1a; }
.ch-clock-min  { width: 3px; height: 32px; background: #374151; }
.ch-clock-sec  { width: 1.5px; height: 34px; background: #FF6A00; }
.ch-clock-center {
  position: absolute;
  width: 8px; height: 8px;
  background: #FF6A00;
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.ch-clock-city { font-size: 13px; font-weight: 700; color: var(--t1); }
.ch-clock-time { font-size: 11px; color: var(--pr); font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 3px; }

/* ── Shipment Tracker ── */
.ch-shiptrack-sec {
  background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);
  padding: 60px 0;
}
.ch-track-path { position: relative; padding: 0 20px; }
.ch-track-line {
  position: absolute;
  top: 28px;
  left: 10%; right: 10%;
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
}
.ch-track-progress {
  height: 100%;
  background: linear-gradient(to left, #FF8A2C, #FF6A00);
  border-radius: 2px;
  width: 0%;
  transition: width 2s ease;
}
.ch-track-steps {
  display: flex;
  justify-content: space-between;
  position: relative;
}
.ch-track-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.ch-track-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #e5e7eb;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  border: 3px solid #e5e7eb;
  position: relative;
  z-index: 1;
  transition: all .3s;
}
.ch-track-step.done .ch-track-icon {
  background: #FF6A00;
  border-color: #FF6A00;
  filter: drop-shadow(0 4px 8px rgba(255,61,61,.3));
}
.ch-track-step.active .ch-track-icon {
  background: #FF8A2C;
  border-color: #FF8A2C;
  animation: trackPulse 1.5s infinite;
}
@keyframes trackPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,140,0,.5); }
  50%      { box-shadow: 0 0 0 12px rgba(255,140,0,0); }
}
.ch-track-label { font-size: 12px; font-weight: 700; color: var(--t1); text-align: center; }
.ch-track-sub   { font-size: 10px; color: var(--t3); text-align: center; }
.ch-track-step.done .ch-track-label { color: #FF6A00; }
.ch-track-step.active .ch-track-label { color: #FF8A2C; }
@media(max-width:600px) {
  .ch-track-icon { width: 40px; height: 40px; font-size: 16px; }
  .ch-track-label { font-size: 10px; }
  .ch-track-sub { display: none; }
}

/* ── Trust Partners ── */
.ch-partners-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
  padding: 24px 0;
}
.ch-partner-logo {
  background: #fff;
  border: 1.5px solid var(--bdr);
  border-radius: 12px;
  padding: 12px 20px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .3s, box-shadow .3s, transform .3s;
  filter: grayscale(60%);
  opacity: .7;
}
.ch-partner-logo:hover {
  filter: grayscale(0%);
  opacity: 1;
  border-color: var(--pr);
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  transform: translateY(-3px);
}
.ch-partner-logo svg { height: 28px; width: auto; display: block; }

/* ── Purchase Notifications ── */
.ch-buy-notif {
  position: fixed;
  bottom: 90px;
  left: 20px;
  background: #fff;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  z-index: 2000;
  min-width: 240px;
  max-width: 300px;
  border-right: 4px solid #FF6A00;
  transform: translateX(-120%);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.ch-buy-notif.show { transform: translateX(0); }
.ch-buy-notif-icon { font-size: 26px; flex-shrink: 0; }
.ch-buy-notif-body { flex: 1; min-width: 0; }
.ch-buy-notif-name { font-size: 12px; font-weight: 700; color: var(--t1); }
.ch-buy-notif-name span { font-weight: 400; color: var(--t3); }
.ch-buy-notif-product { font-size: 11px; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 2px 0; }
.ch-buy-notif-time { font-size: 10px; color: var(--t3); }

/* ── Currency Switcher (in header) ── */
.ch-curr-switcher {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 12px 0 4px;
  justify-content: center;
}
.ch-curr-btn {
  padding: 4px 10px;
  border: 1.5px solid var(--bdr);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  background: #fff;
  color: var(--t2);
  transition: all .2s;
}
.ch-curr-btn:hover,
.ch-curr-btn.active {
  background: var(--pr);
  border-color: var(--pr);
  color: #fff;
}


/* ══════════════════════════════════════════════════
   GLOBAL FEATURES CSS
══════════════════════════════════════════════════ */

/* ── Live Notification Popup ── */
@keyframes ch-slide-notif {
  from { opacity:0; transform:translateX(30px); }
  to   { opacity:1; transform:translateX(0); }
}

/* ── Live Stats Bar ── */
.ch-live-bar {
  background:linear-gradient(90deg,#0f172a 0%,#1e293b 50%,#0f172a 100%);
  border-bottom:1px solid #334155;
  padding:10px 0;
  overflow:hidden;
}
.ch-live-bar-inner {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}
.ch-live-item {
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.ch-live-dot {
  width:8px;height:8px;
  border-radius:50%;
  background:#00c97a;
  box-shadow:0 0 0 0 rgba(0,201,122,.5);
  animation:ch-pulse-dot 2s infinite;
  flex-shrink:0;
}
@keyframes ch-pulse-dot {
  0%   { box-shadow:0 0 0 0 rgba(0,201,122,.5); }
  70%  { box-shadow:0 0 0 8px rgba(0,201,122,0); }
  100% { box-shadow:0 0 0 0 rgba(0,201,122,0); }
}
.ch-live-num {
  font-size:15px;
  font-weight:800;
  color:#fff;
  min-width:24px;
}
.ch-live-lbl {
  font-size:12px;
  color:#94a3b8;
}
.ch-live-sep {
  color:#334155;
  font-size:18px;
}

/* ── Timezone Bar ── */
.ch-tz-bar {
  background:#1e293b;
  border-bottom:1px solid #334155;
  padding:8px 0;
  overflow:hidden;
}
.ch-tz-inner {
  display:flex;
  align-items:center;
  gap:0;
  overflow-x:auto;
  scrollbar-width:none;
}
.ch-tz-inner::-webkit-scrollbar{display:none}
.ch-tz-label {
  font-size:11px;
  color:#64748b;
  white-space:nowrap;
  padding-left:0;
  margin-inline-end:16px;
  font-weight:600;
  flex-shrink:0;
}
.ch-tz-list {
  display:flex;
  align-items:center;
  gap:0;
}
.ch-tz-item {
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 16px;
  border-inline-end:1px solid #334155;
  white-space:nowrap;
  flex-shrink:0;
}
.ch-tz-item:last-child { border:none; }
.ch-tz-flag { font-size:16px; }
.ch-tz-city { font-size:11px; color:#94a3b8; }
.ch-tz-time {
  font-size:12px;
  font-weight:700;
  color:#e2e8f0;
  font-variant-numeric:tabular-nums;
  min-width:40px;
}
.ch-tz-highlight .ch-tz-time { color:#FF6A00; }
.ch-tz-highlight .ch-tz-city { color:#fff; }

/* ── Countries Flags Ticker ── */
.ch-flags-sec {
  background:#f8fafc;
  border-top:1px solid #e8e8e8;
  border-bottom:1px solid #e8e8e8;
  padding:18px 0;
  overflow:hidden;
}
.ch-flags-title {
  text-align:center;
  font-size:13px;
  font-weight:700;
  color:#555;
  margin-bottom:12px;
  padding:0 16px;
}
.ch-flags-ticker {
  overflow:hidden;
  position:relative;
}
.ch-flags-ticker::before,
.ch-flags-ticker::after {
  content:'';
  position:absolute;
  top:0;bottom:0;
  width:60px;
  z-index:2;
  pointer-events:none;
}
.ch-flags-ticker::before { left:0; background:linear-gradient(90deg,#f8fafc,transparent); }
.ch-flags-ticker::after  { right:0; background:linear-gradient(270deg,#f8fafc,transparent); }
.ch-flags-track {
  display:flex;
  gap:0;
  animation:ch-ticker 60s linear infinite;
  width:max-content;
}
.ch-flags-track:hover { animation-play-state:paused; }
@keyframes ch-ticker {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}
.ch-flag-item {
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 20px;
  border-inline-end:1px solid #e8e8e8;
  flex-shrink:0;
}
.ch-flag-emoji { font-size:20px; }
.ch-flag-name  { font-size:12px; color:#555; white-space:nowrap; }

/* ── Shipment Route Tracker ── */
.ch-route-sec {
  background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);
  padding:60px 0;
}
.ch-route-sec .ch-sec-head h2,
.ch-route-sec .ch-sec-title {
  color:#fff !important;
}
.ch-route-track {
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:0;
  margin-top:40px;
  padding:0 20px;
}
.ch-route-line {
  position:absolute;
  top:36px;
  left:10%;right:10%;
  height:3px;
  background:linear-gradient(90deg,#FF6A00,#FF8A2C,#FFB800,#40916C,#1677FF);
  border-radius:2px;
  z-index:0;
}
.ch-route-step {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  z-index:1;
  flex:1;
  opacity:0;
  transform:translateY(20px);
  transition:all .5s ease var(--delay,0s);
}
.ch-route-step.active {
  opacity:1;
  transform:translateY(0);
}
.ch-route-icon {
  width:72px;height:72px;
  border-radius:50%;
  background:#1e293b;
  border:3px solid #334155;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  transition:border-color .3s,transform .3s;
  cursor:default;
}
.ch-route-step.active .ch-route-icon {
  border-color:#FF6A00;
  box-shadow:0 0 20px rgba(255,61,61,.3);
}
.ch-route-step:hover .ch-route-icon { transform:scale(1.12); }
.ch-route-label {
  font-size:13px;
  font-weight:700;
  color:#fff;
  text-align:center;
}
.ch-route-sub {
  font-size:11px;
  color:#64748b;
  text-align:center;
}
.ch-route-plane {
  position:absolute;
  top:14px;
  font-size:28px;
  animation:none;
  transition:left 1.5s ease,transform .3s;
  left:10%;
  z-index:3;
}
.ch-route-plane.flying {
  animation:ch-fly-plane 6s ease-in-out infinite;
}
@keyframes ch-fly-plane {
  0%   { left:10%; transform:rotate(0deg); }
  50%  { left:85%; transform:rotate(-10deg); }
  100% { left:10%; transform:rotate(0deg); }
}
@media(max-width:600px){
  .ch-route-track { flex-direction:column; align-items:flex-start; gap:16px; padding:0; }
  .ch-route-line  { display:none; }
  .ch-route-step  { flex-direction:row; gap:14px; align-items:center; }
  .ch-route-icon  { width:48px;height:48px;font-size:20px;flex-shrink:0; }
  .ch-route-plane { display:none; }
}

/* ── Logistics Partners ── */
/* ── Partners Section ── */
/* ── Partners Section ── */
.ch-partners-sec {
  background: linear-gradient(180deg,#f8fafc 0%,#fff 100%);
  padding: 48px 0;
}
.ch-partners-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 16px;
  margin-top: 28px;
}
@media(max-width:900px)  { .ch-partners-grid { grid-template-columns:repeat(4,1fr); gap:12px; } }
@media(max-width:600px)  { .ch-partners-grid { grid-template-columns:repeat(2,1fr); gap:10px; } }

.ch-partner-card {
  background:#fff;
  border-radius:16px;
  border:1.5px solid #e8e8e8;
  padding:0 0 14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
  overflow:hidden;
  transition:transform .2s,box-shadow .2s,border-color .2s;
  cursor:default;
}
.ch-partner-card:hover {
  transform:translateY(-5px);
  box-shadow:0 10px 32px rgba(0,0,0,.12);
  border-color:#FF6A00;
}
.ch-pc-logo {
  width:100%;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex-shrink:0;
}
.ch-pc-txt {
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:Arial,sans-serif;
  font-size:20px;
  font-weight:900;
  line-height:1;
  gap:0;
}
.ch-pc-name {
  font-size:12px;
  font-weight:700;
  color:#1A1A1A;
  line-height:1.3;
  padding:0 8px;
}
.ch-pc-tag {
  font-size:10.5px;
  font-weight:600;
  padding:3px 10px;
  border-radius:99px;
  line-height:1.4;
}
.ch-tag-cn    { background:#FFF3E0; color:#FF6A00; }
.ch-tag-global{ background:#E8F5E9; color:#1B5E20; }

/* ── RTL Ticker direction fix ── */
[dir="rtl"] .ch-flags-track { animation-direction:reverse; }
[dir="rtl"] .ch-flags-ticker::before { left:auto;right:0;background:linear-gradient(270deg,#f8fafc,transparent); }
[dir="rtl"] .ch-flags-ticker::after  { right:auto;left:0;background:linear-gradient(90deg,#f8fafc,transparent); }


/* ── Mobile fixes for global features ── */
@media(max-width:480px){
  .ch-tz-bar { display:none; } /* hide tz on very small screens */
  .ch-live-bar-inner { gap:8px; justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; padding:0 12px; }
  .ch-live-bar-inner::-webkit-scrollbar{display:none}
  .ch-live-num { font-size:13px; }
  .ch-live-lbl { font-size:11px; }
  .ch-live-sep { display:none; }
  .ch-route-track { gap:12px; padding:0 8px; }
  .ch-partners-grid { gap:8px; }
  .ch-partner-badge { height:40px; min-width:72px; font-size:12px; }
  .ch-flags-title { font-size:12px; }
}
@media(max-width:600px){
  .ch-tz-inner { gap:0; padding:0 4px; }
  .ch-tz-item { padding:4px 10px; }
  .ch-tz-label { display:none; }
}


/* ── 5-col card adjustments ── */
.prd-grid-5 .pc-name { font-size: 12px; -webkit-line-clamp: 2; }
.prd-grid-5 .cp-now  { font-size: 14px; }
.prd-grid-5 .pc-atc  { font-size: 11px; padding: 8px 6px; }


/* ══════════════════════════════════════════
   v2.5 — ANNOUNCEMENT BAR
══════════════════════════════════════════ */
.ch-announce-bar {
  background: linear-gradient(90deg, #0D0D0D 0%, #1A0A00 40%, #0D0D0D 100%);
  border-bottom: 1px solid rgba(255,61,61,.25);
  position: relative;
  overflow: hidden;
  height: 36px;
  display: flex;
  align-items: center;
}
.ch-announce-track {
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  width: max-content;
  animation: ch-announce-scroll 35s linear infinite;
}
.ch-announce-bar:hover .ch-announce-track { animation-play-state: paused; }
.ch-ann-item {
  font-size: 12.5px;
  color: rgba(255,255,255,.82);
  padding: 0 22px;
  white-space: nowrap;
}
.ch-ann-item b { color: #FF6B3D; }
.ch-ann-sep { color: #FF6A00; font-size: 8px; flex-shrink: 0; }
.ch-announce-close {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  left: 10px;
  background: rgba(255,255,255,.08);
  border: none; color: rgba(255,255,255,.5);
  width: 20px; height: 20px; border-radius: 50%;
  font-size: 10px; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
  z-index: 2;
  flex-shrink: 0;
}
.ch-announce-close:hover { background: rgba(255,255,255,.18); color: #fff; }
@keyframes ch-announce-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
[dir="rtl"] .ch-announce-track { animation-direction: reverse; }

/* ── Hero version badge ── */
.ch-hero-version-badge {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  color: #fff; font-size: 11.5px; font-weight: 700;
  padding: 4px 12px; border-radius: 99px;
  margin-bottom: 12px; letter-spacing: .3px;
  width: fit-content;
}
.ch-hero-version-badge::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: #00FF87;
  margin-left: 6px;
  animation: ch-blink 1.2s ease infinite;
}
@keyframes ch-blink { 0%,100%{opacity:1} 50%{opacity:.2} }

/* ── Section badge NEW ── */
.ch-sec-badge-new {
  display: inline-flex;
  background: linear-gradient(135deg, #FF6A00, #FF8A2C);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 99px;
  vertical-align: middle;
  margin-right: 6px;
  letter-spacing: .5px;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════
   v2.5 — WHY SECTION UPGRADE
══════════════════════════════════════════ */
.ch-why-card {
  background: #fff;
  border-radius: 16px;
  border: 1.5px solid #e8e8e8;
  padding: 24px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  transition: transform .22s, box-shadow .22s, border-color .22s;
  position: relative;
  overflow: hidden;
}
.ch-why-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 60px; height: 60px;
  background: radial-gradient(circle at top right, rgba(255,61,61,.06), transparent);
  pointer-events: none;
}
.ch-why-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 36px rgba(0,0,0,.1);
  border-color: #FF6A00;
}
.ch-why-icon-wrap {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.ch-why-ttl {
  font-size: 14px;
  font-weight: 800;
  color: #1A1A1A;
  margin: 0;
  line-height: 1.3;
}
.ch-why-sub {
  font-size: 12.5px;
  color: #777;
  margin: 0;
  line-height: 1.6;
}
.ch-why-stat {
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 800;
  color: #FF6A00;
  background: rgba(255,61,61,.07);
  padding: 3px 10px;
  border-radius: 99px;
  display: inline-block;
}

/* ══════════════════════════════════════════
   v2.5 — STATS ROW UPGRADE
══════════════════════════════════════════ */
.ch-stat-box {
  background: linear-gradient(145deg,#fff,#f8fafc);
  border-radius: 16px;
  border: 1.5px solid #e8e8e8;
  padding: 22px 16px;
  text-align: center;
  flex: 1;
  transition: transform .2s, box-shadow .2s;
}
.ch-stat-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
  border-color: #FF6A00;
}
.ch-stat-num {
  font-size: clamp(26px,3vw,40px);
  font-weight: 900;
  color: #FF6A00;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #FF6A00, #FF8A2C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ch-stat-lbl {
  font-size: 12px;
  color: #888;
  margin-top: 5px;
  font-weight: 600;
}


/* ══════════════════════════════════════════
   VERSION BAR
══════════════════════════════════════════ */
#ch-ver-bar {
  display: none; /* shown by JS after localStorage check */
  background: linear-gradient(90deg, #0f0f0f 0%, #1a0505 50%, #0f0f0f 100%);
  height: 36px;
  overflow: hidden;
  position: relative;
  z-index: 1100;
  border-bottom: 1px solid rgba(255,61,61,.25);
}
.ch-ver-inner {
  display: flex;
  align-items: center;
  height: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
  gap: 12px;
  overflow: hidden;
}
.ch-ver-badge {
  flex-shrink: 0;
  background: linear-gradient(135deg, #FF6A00, #FFB74D);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 99px;
  letter-spacing: .5px;
  white-space: nowrap;
  box-shadow: 0 0 12px rgba(255,61,61,.5);
}
.ch-ver-scroll {
  flex: 1;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.ch-ver-track {
  display: flex;
  align-items: center;
  gap: 20px;
  white-space: nowrap;
  animation: ch-ver-scroll 35s linear infinite;
  font-size: 12px;
  color: rgba(255,255,255,.8);
  font-weight: 500;
}
/* RTL: scroll opposite direction using separate keyframe */
[dir="rtl"] .ch-ver-track { animation-name: ch-ver-scroll-rtl; }
.ch-vs { color: #FF6A00; font-size: 8px; }
@keyframes ch-ver-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes ch-ver-scroll-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}
.ch-ver-cta {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(255,61,61,.5);
  color: #FFB74D;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 99px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
}
.ch-ver-cta:hover { background: rgba(255,61,61,.15); border-color: #FF6A00; color: #fff; }
.ch-ver-x {
  flex-shrink: 0;
  background: none;
  border: none;
  color: rgba(255,255,255,.4);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1;
  transition: color .2s;
}
.ch-ver-x:hover { color: #fff; }

/* ══════════════════════════════════════════
   CHANGELOG MODAL
══════════════════════════════════════════ */
#ch-changelog {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
}
.ch-cl-box {
  background: #fff;
  border-radius: 20px;
  max-width: 520px;
  width: 100%;
  max-height: 88vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,.3);
  animation: ch-cl-in .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes ch-cl-in {
  from { opacity:0; transform:scale(.9) translateY(20px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
.ch-cl-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid #f0f0f0;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d0000 100%);
}
.ch-cl-badge {
  flex-shrink: 0;
  background: linear-gradient(135deg, #FF6A00, #FFB74D);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  padding: 6px 14px;
  border-radius: 99px;
  box-shadow: 0 4px 14px rgba(255,106,0,.35);
}
.ch-cl-head-text { flex: 1; }
.ch-cl-title {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  margin: 0;
}
.ch-cl-date {
  font-size: 11px;
  color: rgba(255,255,255,.5);
  margin: 3px 0 0;
}
.ch-cl-close {
  background: rgba(255,255,255,.1);
  border: none;
  color: rgba(255,255,255,.7);
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all .2s;
}
.ch-cl-close:hover { background: rgba(255,61,61,.3); color:#fff; }
.ch-cl-body { overflow-y: auto; padding: 16px 20px 20px; }
.ch-cl-section { margin-bottom: 18px; }
.ch-cl-sec-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 99px;
  display: inline-block;
  margin-bottom: 12px;
}
.ch-cl-new  { background:#FFF3E0; color:#FF6A00; }
.ch-cl-impr { background:#E3F2FD; color:#0D47A1; }
.ch-cl-fix  { background:#E8F5E9; color:#1B5E20; }
.ch-cl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ch-cl-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #f0f0f0;
}
.ch-cl-ico {
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 1px;
}
.ch-cl-list b {
  font-size: 13px;
  color: #1a1a1a;
  display: block;
  margin-bottom: 2px;
}
.ch-cl-list p {
  font-size: 11.5px;
  color: #888;
  margin: 0;
  line-height: 1.4;
}
.ch-cl-footer {
  text-align: center;
  font-size: 12px;
  color: #bbb;
  padding: 12px 0 0;
  border-top: 1px solid #f0f0f0;
}

/* ══════════════════════════════════════════
   FLOATING VERSION FAB
══════════════════════════════════════════ */
.ch-ver-fab {
  position: fixed;
  bottom: 24px;
  left: 20px;
  z-index: 1400;
  background: linear-gradient(135deg, #1a1a1a, #2d0000);
  border: 1.5px solid rgba(255,106,0,.35);
  border-radius: 99px;
  padding: 8px 16px 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
  transition: transform .2s, box-shadow .2s;
}
[dir="rtl"] .ch-ver-fab { left: auto; right: 20px; }
.ch-ver-fab:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(255,61,61,.3); }
.ch-fab-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #FF6A00;
  position: relative;
  flex-shrink: 0;
}
.ch-fab-pulse::after {
  content:'';
  position:absolute;
  inset:-4px;
  border-radius:50%;
  background:rgba(255,61,61,.3);
  animation: ch-fab-ping 1.8s ease-out infinite;
}
@keyframes ch-fab-ping {
  0%   { transform:scale(.8); opacity:1; }
  100% { transform:scale(2.2); opacity:0; }
}
.ch-fab-inner {
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .5px;
}
@media(max-width:480px){
  .ch-ver-cta { display:none; }
  .ch-ver-badge { font-size:10px; padding:2px 8px; }
  .ch-ver-track { font-size:11px; }
  .ch-cl-box { max-height:92vh; }
}


/* ════════════════════════════════════════════════════════════════
   INDEX v32 — Addiction Engine Integration
   Added to main.css to support index.php components.
   Uses existing design tokens from above (--pr, --orange, etc.)
   ════════════════════════════════════════════════════════════════ */

/* ── Token Bridge (index.php aliases → main.css tokens) ── */
:root {
  /* index.php uses these — mapped to main.css palette */
  --or:         var(--pr);          /* primary: red */
  --or2:        var(--pr-d);        /* primary hover */
  --or3:        var(--pr-l);        /* primary light */
  --re:         var(--pr);          /* red alias */
  --gr:         var(--green);       /* green alias */
  --gd:         var(--yellow);      /* gold alias */
  --pu:         var(--purple);      /* purple alias */
  --bl:         var(--blue);        /* blue alias */
  --bg:         var(--bg);
  --surface:    var(--white);
  --border:     var(--bdr);
  --text-1:     var(--t1);
  --text-2:     var(--t2);
  --text-3:     var(--t3);
  --sh-sm:      var(--sx-xs);
  --sh-md:      var(--sx-md);
  --sh-lg:      var(--sx-lg);
  --sh-or:      var(--pr-shadow);
  --radius-sm:  var(--rx-sm);
  --radius-md:  var(--rx-md);
  --radius-lg:  var(--rx-lg);
}

/* ── Font override for index — Cairo already loaded ── */
body {
  font-family: 'Cairo', 'Noto Kufi Arabic', system-ui, sans-serif;
}

/* ════ LAYOUT ════════════════════════════════════════════════════ */
.X {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 18px;
}
.page-bg { background: var(--bg); }

/* ════ ANNOUNCE BAR ══════════════════════════════════════════════ */
.ann-bar {
  background: #111;
  height: 38px;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ann-track {
  display: flex;
  gap: 56px;
  white-space: nowrap;
  animation: ann-scroll 26s linear infinite;
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  align-items: center;
  padding-left: 20px;
}
.ann-track:hover { animation-play-state: paused; }
@keyframes ann-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ann-item {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.68);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ann-item b { color: var(--yellow); }
.ann-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--pr);
  flex-shrink: 0;
}
.ann-right {
  position: absolute;
  right: 0; top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 18px 0 40px;
  background: linear-gradient(90deg, transparent, #111 22%);
  font-size: 11.5px;
}
.ann-right a { color: rgba(255,255,255,.4); transition: color .15s; }
.ann-right a:hover { color: rgba(255,255,255,.8); }

/* ════ STREAK BAR ════════════════════════════════════════════════ */
#ae-streak-bar {
  background: linear-gradient(90deg, #1A0050, #3D00B8, #6600EE);
  padding: 9px 0;
  position: relative;
  overflow: hidden;
}
#ae-streak-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 1px, transparent 60px);
  pointer-events: none;
}
.streak-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.streak-left { display: flex; align-items: center; gap: 10px; }
.streak-flame { font-size: 22px; animation: i-flame .7s ease-in-out infinite alternate; }
@keyframes i-flame { from { transform: scale(1) rotate(-5deg); } to { transform: scale(1.18) rotate(5deg); } }
.streak-txt { font-size: 13px; font-weight: 700; color: #fff; }
.streak-txt em { color: var(--yellow); font-style: normal; }
.streak-days { display: flex; gap: 5px; }
.sd {
  width: 30px; height: 30px;
  border-radius: 7px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800;
  gap: 1px;
  border: 1.5px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.4);
  transition: all .2s;
}
.sd.done {
  background: linear-gradient(135deg, var(--yellow), #FF6A00);
  border-color: var(--yellow);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255,215,0,.4);
}
.sd.today {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.5);
  color: #fff;
  animation: i-today-pulse 1.5s ease-in-out infinite;
}
@keyframes i-today-pulse { 0%, 100% { border-color: rgba(255,255,255,.5); } 50% { border-color: var(--yellow); } }
.sd .sdn { font-size: 12px; font-weight: 900; }
.streak-actions { display: flex; gap: 8px; align-items: center; }
.streak-btn {
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.22);
  padding: 6px 14px;
  border-radius: var(--rx-pill);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all .18s;
  white-space: nowrap;
}
.streak-btn:hover { background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.4); }
.streak-claim-btn {
  background: var(--yellow);
  color: #111;
  border: none;
  padding: 7px 18px;
  border-radius: var(--rx-pill);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  font-family: inherit;
  transition: all .18s;
  white-space: nowrap;
}
.streak-claim-btn:hover { background: #FFC200; transform: scale(1.04); }
.streak-claim-btn:disabled { opacity: .5; cursor: default; transform: none; }

/* ════ LIVE TICKER ═══════════════════════════════════════════════ */
.ticker-wrap {
  background: linear-gradient(90deg, #FFF8F0, #FFFBF5);
  border-bottom: 1px solid #FFE0CC;
  padding: 7px 0;
  overflow: hidden;
}
.ticker-track {
  display: flex;
  gap: 40px;
  white-space: nowrap;
  animation: i-ticker 30s linear infinite;
}
.ticker-track:hover { animation-play-state: paused; }
@keyframes i-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tick-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--t2);
  font-weight: 500;
}
.tick-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  animation: i-tick-pulse 2s ease-in-out infinite;
}
@keyframes i-tick-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.4); } }
.tick-name { font-weight: 800; color: var(--t1); }
.tick-prod { font-weight: 700; color: var(--pr); }
.tick-ago { color: var(--t4); font-size: 11px; }

/* ════ FREE SHIPPING BAR (sticky) ════════════════════════════════ */
#ae-ship-bar {
  position: sticky;
  top: 0;
  z-index: 700;
  background: linear-gradient(90deg, #004D25, #2D6A4F, #00A650);
  padding: 8px 0;
  transition: all .3s;
  box-shadow: 0 2px 14px rgba(0,166,80,.28);
}
#ae-ship-bar.sb-done { background: linear-gradient(90deg, #1B4332, #40916C); }
.sb-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.sb-ico { font-size: 18px; flex-shrink: 0; }
.sb-txt {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex: 1;
  max-width: 340px;
  min-width: 0;
}
.sb-txt em { color: var(--yellow); font-style: normal; }
.sb-bar {
  flex: 1;
  max-width: 180px;
  height: 7px;
  background: rgba(255,255,255,.22);
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}
.sb-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--yellow), #FFF176);
  border-radius: 4px;
  transition: width .5s ease;
}
.sb-pct { color: rgba(255,255,255,.75); font-size: 11.5px; font-weight: 700; flex-shrink: 0; }
.sb-cta {
  background: var(--yellow);
  color: #111;
  border: none;
  padding: 6px 16px;
  border-radius: var(--rx-pill);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  font-family: inherit;
  transition: .15s;
  white-space: nowrap;
}
.sb-cta:hover { background: #FFC200; }

/* ════ HERO ══════════════════════════════════════════════════════ */
.hero {
  background: linear-gradient(135deg, #220000 0%, #440000 25%, #991100 50%, #880000 70%, var(--pr) 90%, var(--orange) 100%);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 60%, rgba(255,255,255,.07) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 25%, rgba(255,200,0,.08) 0%, transparent 45%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg, rgba(255,255,255,.015) 0, rgba(255,255,255,.015) 1px,
    transparent 1px, transparent 32px
  );
  pointer-events: none;
}
.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 28px;
  align-items: center;
  padding: 36px 0 0;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; padding: 28px 0 0; }
  .hero-right { display: none; }
}

/* Hero pill eyebrow */
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--rx-pill);
  padding: 6px 16px;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 16px;
  width: fit-content;
}
.pill-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 10px rgba(255,215,0,.9);
  animation: i-pill-blink 1.8s ease-in-out infinite;
}
@keyframes i-pill-blink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .2; transform: scale(.4); } }

/* Hero headline */
.hero-h1 {
  font-size: clamp(32px, 5.5vw, 68px);
  font-weight: 900;
  color: #fff;
  line-height: .95;
  letter-spacing: -2.5px;
  margin-bottom: 12px;
  text-shadow: 0 4px 24px rgba(0,0,0,.25);
}
.hero-h1 em {
  font-style: normal;
  background: linear-gradient(180deg, #FFE566, var(--yellow) 45%, var(--orange));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 24px rgba(255,215,0,.6));
}
.hero-sub {
  font-size: 15px;
  color: rgba(255,255,255,.82);
  line-height: 1.65;
  margin-bottom: 22px;
  max-width: 440px;
  font-weight: 400;
}

/* Value pills */
.vpills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.vp {
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  transition: all .22s;
  cursor: default;
}
.vp:hover { background: rgba(0,0,0,.38); border-color: rgba(255,215,0,.35); transform: translateY(-2px); }
.vp-ico { font-size: 20px; }
.vp-val { font-size: 20px; font-weight: 900; color: var(--yellow); line-height: 1; }
.vp-title { font-size: 12.5px; font-weight: 800; color: #fff; line-height: 1.2; }
.vp-sub { font-size: 10.5px; color: rgba(255,255,255,.6); line-height: 1; margin-top: 2px; }

/* Hero CTAs */
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.cta-main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: var(--pr);
  padding: 15px 36px;
  border-radius: var(--rx-pill);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -.2px;
  box-shadow: 0 8px 32px rgba(0,0,0,.25), 0 0 0 4px rgba(255,255,255,.12);
  transition: all .22s;
}
.cta-main:hover { transform: translateY(-3px); box-shadow: 0 14px 44px rgba(0,0,0,.32); background: #FFF8F5; }
.cta-arrow { display: inline-block; animation: i-arr .1s ease-in-out infinite; }
@keyframes i-arr { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(7px); } }
.cta-sec {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  color: #fff;
  padding: 15px 26px;
  border-radius: var(--rx-pill);
  font-size: 15px;
  font-weight: 700;
  border: 1.5px solid rgba(255,255,255,.28);
  transition: all .2s;
}
.cta-sec:hover { background: rgba(255,255,255,.25); }

/* Hero search */
.hero-search-wrap {
  background: rgba(0,0,0,.2);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 28px;
  padding: 16px 0;
}
.hero-search {
  display: flex;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  max-width: 720px;
  box-shadow: 0 6px 32px rgba(0,0,0,.22);
  transition: box-shadow .2s;
}
.hero-search:focus-within { box-shadow: 0 6px 32px rgba(0,0,0,.28), 0 0 0 3px rgba(255,215,0,.4); }
.hero-search select {
  background: #F7F7F7;
  border: none;
  border-left: 1px solid var(--bdr);
  color: var(--t2);
  font-size: 12.5px;
  font-weight: 700;
  padding: 0 14px;
  min-width: 96px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
}
.hero-search input {
  flex: 1;
  border: none;
  outline: none;
  color: var(--t1);
  font-size: 14px;
  font-family: inherit;
  padding: 15px 18px;
}
.hero-search input::placeholder { color: var(--t4); }
.hero-search button {
  background: var(--pr);
  color: #fff;
  padding: 0 28px;
  font-size: 22px;
  border: none;
  cursor: pointer;
  transition: background .15s;
  display: flex;
  align-items: center;
}
.hero-search button:hover { background: var(--pr-d); }

/* Hero right mosaic */
.hero-right { padding: 10px 0; }
.mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 138px);
  gap: 8px;
}
.mosaic-tile {
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  transition: all .28s;
  position: relative;
  cursor: pointer;
}
.mosaic-tile:hover { transform: scale(1.05); background: rgba(255,255,255,.22); box-shadow: 0 10px 28px rgba(0,0,0,.2); }
.mosaic-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .38s; }
.mosaic-tile:hover img { transform: scale(1.08); }
.mosaic-disc {
  position: absolute;
  top: 7px; left: 7px;
  background: var(--pr);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  padding: 3px 9px;
  border-radius: 5px;
}
.mosaic-hot {
  position: absolute;
  top: 7px; right: 7px;
  background: rgba(255,215,0,.95);
  color: #111;
  font-size: 9px;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 4px;
  animation: i-hot-blink 2s ease-in-out infinite;
}
@keyframes i-hot-blink { 0%, 100% { opacity: 1; } 50% { opacity: .65; } }

/* ════ TRUST BAR ════════════════════════════════════════════════ */
.trust-bar {
  background: var(--white);
  border-bottom: 1px solid var(--bdr);
  box-shadow: var(--sx-xs);
}
.trust-row {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  flex-wrap: wrap;
}
.ti {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  border-right: 1px solid var(--bdr2);
  flex: 1;
  min-width: 0;
  transition: background .18s;
  cursor: default;
}
.ti:last-child { border-right: none; }
.ti:hover { background: #FFF9F4; }
.ti-ico { font-size: 24px; flex-shrink: 0; }
.ti-title { font-size: 12.5px; font-weight: 800; color: var(--t1); }
.ti-sub { font-size: 11px; color: var(--t3); margin-top: 2px; }
@media (max-width: 640px) {
  .ti { min-width: 50%; border-right: none; border-bottom: 1px solid var(--bdr2); }
  .ti:nth-child(2n) { border-left: 1px solid var(--bdr2); }
}

/* ════ CATEGORIES ════════════════════════════════════════════════ */
.cats-section {
  background: var(--white);
  padding: 16px 0 12px;
  border-bottom: 1px solid var(--bdr);
}
/* .cats-scroll and .cat-item already defined above — extend here */
.cat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 12px;
  cursor: pointer;
  text-decoration: none;
  transition: all .18s;
  border-bottom: 2.5px solid transparent;
  min-width: 82px;
  position: relative;
}
.cat-item:hover, .cat-item.active { border-bottom-color: var(--pr); }
.cat-item:hover .cat-icon, .cat-item.active .cat-icon {
  border-color: var(--pr);
  background: #FFF4EC;
  box-shadow: 0 4px 14px rgba(255,45,45,.2);
  transform: translateY(-2px);
}
.cat-item:hover .cat-lbl, .cat-item.active .cat-lbl { color: var(--pr); font-weight: 800; }
.cat-icon {
  width: 58px; height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  background: #F8F8F8;
  border: 2px solid var(--bdr);
  transition: all .22s;
}
.cat-lbl {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--t2);
  white-space: nowrap;
  transition: all .18s;
}

/* ════ COUPON STRIP ══════════════════════════════════════════════ */
.coup-strip {
  background: linear-gradient(90deg, #FFF8F0, #FFFBF5, #FFF8F0);
  border-top: 2px solid #FFD9B3;
  border-bottom: 2px solid #FFD9B3;
  padding: 10px 0;
}
.coup-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 2px;
}
.coup-scroll::-webkit-scrollbar { display: none; }
.coup-card {
  flex-shrink: 0;
  background: var(--white);
  border: 2px dashed var(--pr);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  transition: all .22s;
  position: relative;
  overflow: hidden;
}
.coup-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--pr), var(--orange));
}
.coup-card:hover { border-color: var(--pr-d); transform: translateY(-2px); box-shadow: var(--sx-md); }
.coup-card::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,200,0,.12), transparent);
  transition: left .4s;
}
.coup-card:hover::after { left: 140%; }
.coup-val { font-size: 22px; font-weight: 950; color: var(--pr); line-height: 1; }
.coup-type { font-size: 8.5px; font-weight: 800; color: var(--orange); text-transform: uppercase; letter-spacing: .05em; }
.coup-title { font-size: 12px; font-weight: 700; color: #333; }
.coup-cond { font-size: 10px; color: var(--t3); margin-top: 2px; }
.coup-code {
  font-size: 11px; font-weight: 800; color: var(--pr);
  background: var(--pr-bg);
  padding: 3px 8px; border-radius: 4px;
  font-family: monospace; letter-spacing: .06em; white-space: nowrap;
}
.coup-btn {
  background: var(--pr);
  color: #fff;
  font-size: 10.5px; font-weight: 800;
  padding: 5px 13px;
  border-radius: var(--rx-pill);
  white-space: nowrap;
  transition: background .15s;
  flex-shrink: 0;
  border: none; cursor: pointer;
  font-family: inherit;
}
.coup-btn:hover { background: var(--pr-d); }

/* ════ SECTION WRAPPER ═══════════════════════════════════════════ */
.sec { padding: 14px 0; }
.sec-box {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--bdr);
  box-shadow: var(--sx-xs);
}
.sec-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--bdr2);
}
.sec-hd-left { display: flex; align-items: flex-end; gap: 14px; }
.sec-title {
  font-size: 19px; font-weight: 900;
  color: var(--t1); letter-spacing: -.4px;
  display: flex; align-items: center; gap: 9px;
}
.sec-sub { font-size: 12.5px; color: var(--t3); margin-bottom: 2px; }
.sec-va {
  font-size: 13px; font-weight: 700;
  color: var(--pr);
  display: flex; align-items: center; gap: 5px;
  padding: 6px 18px;
  border: 1.5px solid var(--pr-bg);
  border-radius: var(--rx-pill);
  transition: all .18s;
}
.sec-va:hover { background: var(--pr); color: #fff; border-color: var(--pr); }
.sec-body { padding: 18px 20px 20px; }

/* ════ FLASH DEAL HEADER (index version) ════════════════════════ */
/* Override .flash-hd for index.php usage (dark gradient header) */
.sec-box > .flash-hd {
  background: linear-gradient(90deg, #220000, #991100, #FF3A20, var(--pr), var(--orange));
  padding: 16px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  position: relative;
  overflow: hidden;
  border-bottom: none;
}
.sec-box > .flash-hd::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0, rgba(255,255,255,.025) 1px, transparent 1px, transparent 24px);
  pointer-events: none;
}
.flash-left { display: flex; align-items: center; gap: 14px; position: relative; }
.flash-ico {
  font-size: 30px;
  animation: i-flash-bolt .6s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 16px rgba(255,215,0,.9));
}
@keyframes i-flash-bolt { from { transform: scale(1) rotate(-7deg); } to { transform: scale(1.24) rotate(7deg); } }
.flash-ttl { font-size: 21px; font-weight: 950; color: #fff; letter-spacing: -.3px; }
.flash-sub { font-size: 11.5px; color: rgba(255,255,255,.76); margin-top: 3px; font-weight: 600; }
.flash-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; position: relative; }
.cd-lbl { font-size: 12.5px; color: rgba(255,255,255,.82); font-weight: 600; }
.cd-wrap { display: flex; align-items: center; gap: 5px; }
.cd-block {
  background: rgba(0,0,0,.32);
  border-radius: 7px;
  padding: 7px 12px;
  min-width: 44px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.1);
}
.cd-num { font-size: 22px; font-weight: 950; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
.cd-lbl2 { font-size: 8px; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.cd-sep { color: rgba(255,255,255,.35); font-size: 20px; padding-bottom: 14px; font-weight: 200; }
.flash-all-btn {
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(4px);
  color: #fff;
  padding: 9px 20px;
  border-radius: var(--rx-pill);
  font-size: 13px;
  font-weight: 700;
  border: 1.5px solid rgba(255,255,255,.28);
  transition: all .18s;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.flash-all-btn:hover { background: rgba(255,255,255,.3); }

/* Flash item cards (horizontal scroll) */
.flash-items {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  background: #FFF9F6;
}
.flash-items::-webkit-scrollbar { display: none; }
.fi {
  flex: 1;
  min-width: 155px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #FFEADB;
  cursor: pointer;
  transition: background .18s;
  text-decoration: none;
}
.fi:last-child { border-right: none; }
.fi:hover { background: #FFF5EE; }
.fi-img {
  aspect-ratio: 1;
  overflow: hidden;
  background: #F5F5F5;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}
.fi-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .38s; }
.fi:hover .fi-img img { transform: scale(1.08); }
.fi-disc {
  position: absolute;
  top: 0; left: 0;
  background: linear-gradient(135deg, var(--pr), var(--orange));
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  padding: 5px 12px;
  border-radius: 0 0 10px 0;
  letter-spacing: -.2px;
}
.fi-body { padding: 10px 12px 14px; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.fi-name {
  font-size: 12.5px; color: var(--t1); font-weight: 500;
  line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fi-prices { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; flex-wrap: wrap; }
.fi-now { font-size: 18px; font-weight: 900; color: var(--pr); }
.fi-old { font-size: 11.5px; color: var(--t4); text-decoration: line-through; }
.sold-wrap { margin-top: 4px; }
.sold-txt { font-size: 10.5px; color: var(--t3); margin-bottom: 3px; font-weight: 600; }
.sold-txt em { color: var(--pr); font-style: normal; font-weight: 700; }
.sold-bar { height: 5px; background: #FFE0D0; border-radius: 3px; overflow: hidden; }
.sold-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--orange), var(--pr));
  border-radius: 3px;
  transition: width .6s ease;
}
.viewers {
  font-size: 10.5px; color: var(--purple); font-weight: 700;
  display: flex; align-items: center; gap: 5px; margin-top: 3px;
}
.viewers::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--purple);
  box-shadow: 0 0 8px rgba(123,47,190,.8);
  flex-shrink: 0;
  animation: i-vdot 1.6s ease-in-out infinite;
}
@keyframes i-vdot { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.fi-atc {
  width: 100%;
  background: var(--pr);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 9px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all .2s;
  margin-top: 8px;
}
.fi-atc:hover { background: var(--pr-d); transform: translateY(-1px); }
.fi-atc.added { background: var(--green); }

/* ════ PRODUCT CARD EXTENSIONS (index additions) ════════════════ */
/* .pc already defined in main.css — add .pc-img-wrap + .pc-free-ship */
.pc-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 188px;
  min-height: 188px;
  overflow: hidden;
  background: #F8F8F8;
  position: relative;
  flex-shrink: 0;
}
.pc-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .42s ease; }
.pc:hover .pc-img-wrap img { transform: scale(1.09); }
.pc-ship { font-size: 11px; color: var(--green); font-weight: 600; }
.pc-overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 6px;
  padding: 9px;
  background: linear-gradient(to top, rgba(0,0,0,.18), transparent);
  transition: opacity .2s;
}
.pc:hover .pc-overlay { opacity: 1; }
.pco-btn {
  width: 33px; height: 33px;
  border-radius: 7px;
  background: rgba(255,255,255,.96);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transition: all .15s;
}
.pco-btn:hover { background: var(--pr); transform: scale(1.1); }
.pco-btn:hover svg { stroke: #fff !important; }
/* .pc-wl.pop animation */
.pc-wl.pop { animation: i-wl-pop .28s ease; }
@keyframes i-wl-pop { 0% { transform: scale(1); } 50% { transform: scale(1.32); } 100% { transform: scale(1); } }

/* ════ 6-COLUMN GRID ═════════════════════════════════════════════ */
.grid6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
@media (max-width: 1200px) { .grid6 { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 960px)  { .grid6 { grid-template-columns: repeat(4, 1fr); gap: 10px; } }
@media (max-width: 700px)  { .grid6 { grid-template-columns: repeat(3, 1fr); gap: 8px; } }
@media (max-width: 440px)  { .grid6 { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

/* ════ PROMO BANNERS ═════════════════════════════════════════════ */
.promo2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .promo2 { grid-template-columns: 1fr; } }
.pb {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  min-height: 138px;
  display: flex;
  align-items: center;
  padding: 24px 28px;
  transition: all .28s;
  text-decoration: none;
}
.pb:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.2); }
.pb::after {
  content: '';
  position: absolute;
  right: -32px; top: -32px;
  width: 170px; height: 170px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
}
.pb-l { position: relative; z-index: 2; }
.pb-t { font-size: 18px; font-weight: 900; color: #fff; margin-bottom: 6px; }
.pb-s { font-size: 13px; color: rgba(255,255,255,.82); margin-bottom: 15px; line-height: 1.55; }
.pb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  padding: 8px 22px;
  border-radius: var(--rx-pill);
  font-size: 13.5px;
  font-weight: 800;
  transition: all .2s;
}
.pb:hover .pb-btn { transform: scale(1.06); }
.pb1 { background: linear-gradient(135deg, #220000, #991100, var(--pr)); }
.pb1 .pb-btn { color: var(--pr-d); }
.pb2 { background: linear-gradient(135deg, #0A0040, #3300AA, #6600EE); }
.pb2 .pb-btn { color: #4400BB; }
.pb3 { background: linear-gradient(135deg, #002210, #005A28, var(--green)); }
.pb3 .pb-btn { color: #006B30; }
.pb4 { background: linear-gradient(135deg, #1A0040, #5B21B6, var(--purple)); }
.pb4 .pb-btn { color: #5B21B6; }

/* ════ WHY US ════════════════════════════════════════════════════ */
.why4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--bdr);
  border-radius: 12px;
  overflow: hidden;
}
@media (max-width: 768px) { .why4 { grid-template-columns: repeat(2, 1fr); } }
.why {
  padding: 24px 20px;
  border-right: 1px solid var(--bdr);
  text-align: center;
  background: var(--white);
  transition: background .2s;
}
.why:last-child { border-right: none; }
@media (max-width: 768px) {
  .why:nth-child(2) { border-right: none; }
  .why:nth-child(3) { border-right: 1px solid var(--bdr); border-top: 1px solid var(--bdr); }
  .why:nth-child(4) { border-top: 1px solid var(--bdr); }
}
.why:hover { background: #FFF9F4; }
.why-ico { font-size: 32px; margin-bottom: 12px; display: block; }
.why-t { font-size: 14px; font-weight: 800; color: var(--t1); margin-bottom: 6px; }
.why-d { font-size: 12px; color: var(--t2); line-height: 1.68; }
.why-s { font-size: 12px; font-weight: 700; color: var(--pr); margin-top: 8px; }

/* ════ STATS BAR ═════════════════════════════════════════════════ */
.stats-bar {
  background: linear-gradient(90deg, #220000, #6B0F00, #FF3A20, var(--pr), var(--orange));
  padding: 22px 0;
}
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 480px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-item {
  text-align: center;
  color: #fff;
  border-right: 1px solid rgba(255,255,255,.18);
  padding: 8px 0;
}
.stat-item:last-child { border: none; }
.stat-n { font-size: clamp(24px, 3vw, 38px); font-weight: 950; line-height: 1; letter-spacing: -1px; }
.stat-l { font-size: 11px; opacity: .8; margin-top: 5px; font-weight: 600; }

/* ════ REVIEWS SECTION ═══════════════════════════════════════════ */
.rev3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 700px) { .rev3 { grid-template-columns: 1fr; } }
.rev {
  background: var(--white);
  border: 1px solid var(--bdr);
  border-radius: 12px;
  padding: 22px;
  transition: all .24s;
  box-shadow: var(--sx-xs);
}
.rev:hover { box-shadow: var(--sx-lg); transform: translateY(-3px); }
.rev-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.rev-av {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 900; color: #fff; flex-shrink: 0;
}
.rev-nm { font-size: 14px; font-weight: 800; color: var(--t1); }
.rev-loc { font-size: 11px; color: var(--t3); }
.rev-ord { font-size: 11px; color: var(--green); font-weight: 700; margin-top: 2px; }
.rev-stars { font-size: 16px; color: var(--yellow); margin-bottom: 10px; }
.rev-tx { font-size: 13px; color: var(--t2); line-height: 1.72; }
.rev-del { font-size: 11.5px; color: var(--green); font-weight: 600; margin-top: 11px; display: flex; align-items: center; gap: 5px; }
.rev-badge {
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(0,185,107,.08); color: var(--green);
  font-size: 10.5px; font-weight: 700;
  padding: 3px 10px; border-radius: 4px; margin-top: 8px;
}

/* ════ NEWSLETTER ════════════════════════════════════════════════ */
.nl {
  background: linear-gradient(135deg, #220000, #991100, var(--pr));
  padding: 48px 0;
  position: relative;
  overflow: hidden;
}
.nl::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0, rgba(255,255,255,.025) 1px, transparent 1px, transparent 32px);
}
.nl-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 640px) { .nl-inner { grid-template-columns: 1fr; text-align: center; } }
.nl-t { font-size: clamp(20px, 2.8vw, 30px); font-weight: 950; color: #fff; letter-spacing: -.6px; margin-bottom: 7px; }
.nl-p { font-size: 13.5px; color: rgba(255,255,255,.8); line-height: 1.65; }
.nl-form {
  display: flex;
  gap: 8px;
  background: rgba(255,255,255,.1);
  border-radius: 11px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.18);
}
@media (max-width: 640px) { .nl-form { max-width: 390px; margin: 0 auto; } }
.nl-in {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  padding: 11px 14px;
  outline: none;
}
.nl-in::placeholder { color: rgba(255,255,255,.5); }
.nl-btn {
  background: #fff;
  color: var(--pr);
  font-size: 14px;
  font-weight: 900;
  padding: 11px 28px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
  white-space: nowrap;
}
.nl-btn:hover { background: #FFF5F2; transform: scale(1.04); }

/* ════ BOTTOM BAR ════════════════════════════════════════════════ */
.btm-bar {
  background: #111;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.btm-inner {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.btm-item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.5); }
.btm-ico { font-size: 20px; }

/* ════ MOBILE NAV (index .mob-nav) ══════════════════════════════ */
.mob-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 900;
  background: var(--white);
  border-top: 1px solid var(--bdr);
  box-shadow: 0 -4px 18px rgba(0,0,0,.1);
}
@media (max-width: 768px) { .mob-nav { display: block; } body { padding-bottom: 60px; } }
.mob-inner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 58px;
}
.mni {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  font-weight: 700;
  color: var(--t4);
  text-decoration: none;
  padding: 4px 12px;
  transition: color .15s;
  background: none;
  border: none;
  cursor: pointer;
}
.mni.active, .mni:hover { color: var(--pr); }
.mni svg { width: 23px; height: 23px; stroke-width: 2; }
.mni-center {
  background: linear-gradient(135deg, var(--pr), var(--orange));
  color: #fff !important;
  border-radius: 50%;
  width: 54px; height: 54px;
  margin-top: -16px;
  box-shadow: 0 6px 22px var(--pr-shadow);
  padding: 0;
  justify-content: center;
}
.mni-center svg { stroke: #fff; }
.mni-center span { display: none; }

/* ════ SCROLL REVEAL ═════════════════════════════════════════════ */
.rv { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.rv.vi { opacity: 1; transform: translateY(0); }

/* ════ SCROLL TOP ════════════════════════════════════════════════ */
#sctop {
  display: none;
  position: fixed;
  bottom: 72px; right: 16px;
  z-index: 800;
  width: 42px; height: 42px;
  background: var(--pr);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 17px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: var(--pr-shadow);
  transition: all .2s;
}
#sctop:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(255,45,45,.55); }

/* ════ TOAST SYSTEM ══════════════════════════════════════════════ */
#ch-toasts {
  position: fixed;
  bottom: 72px; right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ch-toast {
  background: var(--white);
  border-radius: 9px;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--t1);
  box-shadow: 0 4px 20px rgba(0,0,0,.13);
  animation: i-toast-in .22s ease;
  border-left: 3px solid var(--pr);
}
.ch-toast.success { border-left-color: var(--green); }
.ch-toast.info    { border-left-color: var(--blue); }
@keyframes i-toast-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }

/* ════ LIVE NOTIF ════════════════════════════════════════════════ */
#lnotif {
  display: none;
  position: fixed;
  bottom: 72px; left: 16px;
  z-index: 1500;
  max-width: 280px;
  width: 88vw;
}
.lnc {
  background: var(--white);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 7px 26px rgba(0,0,0,.14);
  display: flex;
  align-items: center;
  gap: 10px;
  border-left: 4px solid var(--pr);
}

/* ════════════════════════════════════════════════════════════════
   ADDICTION ENGINE STYLES
   ════════════════════════════════════════════════════════════════ */

/* ── Overlay base ── */
.ae-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(5px);
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ae-fade .25s ease;
}
@keyframes ae-fade { from { opacity: 0; } to { opacity: 1; } }
.ae-modal {
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
  position: relative;
  overflow: hidden;
  animation: ae-pop .34s cubic-bezier(.34,1.56,.64,1);
}
@keyframes ae-pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
.ae-close {
  position: absolute;
  top: 12px; right: 14px;
  background: rgba(0,0,0,.08);
  border: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  font-size: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t2);
  transition: .15s;
  z-index: 5;
}
.ae-close:hover { background: rgba(0,0,0,.16); }

/* ── Spin Wheel ── */
#ae-spin-modal { max-width: 370px; width: 92vw; }
.ae-spin-head {
  background: linear-gradient(135deg, #FF3A20, var(--pr), var(--orange), var(--yellow));
  padding: 22px 20px 14px;
  text-align: center;
  position: relative;
}
.ae-spin-head::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 20px;
  background: var(--white);
  clip-path: ellipse(52% 100% at 50% 100%);
}
.ae-spin-emoji { font-size: 40px; display: block; animation: ae-emoji-bounce .8s ease-in-out infinite alternate; }
@keyframes ae-emoji-bounce { from { transform: translateY(0); } to { transform: translateY(-8px); } }
.ae-spin-ttl { font-size: 22px; font-weight: 950; color: #fff; margin: 7px 0 4px; letter-spacing: -.4px; }
.ae-spin-sub { font-size: 12.5px; color: rgba(255,255,255,.85); font-weight: 600; }
.ae-spin-body { padding: 22px 24px 24px; text-align: center; }
#ae-wheel-wrap { position: relative; width: 240px; height: 240px; margin: 0 auto 20px; }
#ae-wheel { border-radius: 50%; box-shadow: 0 8px 32px rgba(255,45,45,.3); }
#ae-arrow { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-size: 28px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.3)); z-index: 2; }
.ae-coins-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFF8E7;
  border: 1.5px solid var(--yellow);
  border-radius: var(--rx-pill);
  padding: 5px 16px;
  font-size: 13px;
  font-weight: 800;
  color: var(--orange);
  margin-bottom: 16px;
}
#ae-spin-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--pr), var(--orange));
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
  font-family: inherit;
  box-shadow: var(--pr-shadow);
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
#ae-spin-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255,45,45,.55); }
#ae-spin-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.ae-spin-note { font-size: 11.5px; color: var(--t4); margin-top: 10px; }

/* ── Scratch Card ── */
#ae-scratch-modal { max-width: 330px; width: 92vw; }
.ae-scratch-head {
  background: linear-gradient(135deg, var(--purple), #A855F7);
  padding: 22px;
  text-align: center;
}
.ae-scratch-ttl { font-size: 20px; font-weight: 950; color: #fff; }
.ae-scratch-sub { font-size: 12px; color: rgba(255,255,255,.8); margin-top: 4px; }
.ae-scratch-body { padding: 22px; text-align: center; }
#ae-scratch-c { border-radius: 12px; cursor: crosshair; box-shadow: 0 4px 18px rgba(0,0,0,.15); touch-action: none; }
.ae-scratch-hint { font-size: 12px; color: var(--t4); margin-top: 10px; }
.ae-scratch-res {
  display: none;
  padding: 18px;
  background: linear-gradient(135deg, #FFF8E7, #FFFBF0);
  border-radius: 12px;
  border: 2px solid var(--yellow);
  margin-top: 16px;
  text-align: center;
}
.asr-val { font-size: 34px; font-weight: 950; color: var(--pr); }
.asr-code {
  font-family: monospace;
  font-size: 16px;
  font-weight: 800;
  color: var(--orange);
  background: rgba(255,140,0,.1);
  padding: 5px 14px;
  border-radius: 6px;
  letter-spacing: .08em;
}
.asr-copy {
  background: var(--pr);
  color: #fff;
  border: none;
  padding: 10px 26px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  margin-top: 13px;
  font-family: inherit;
  width: 100%;
  transition: .15s;
}
.asr-copy:hover { background: var(--pr-d); }

/* ── Exit Intent ── */
#ae-exit-modal { max-width: 390px; width: 92vw; }
.ae-exit-head {
  background: linear-gradient(135deg, #FF3A20, var(--pr), var(--orange));
  padding: 26px 22px;
  text-align: center;
}
.ae-exit-emoji { font-size: 52px; display: block; margin-bottom: 10px; }
.ae-exit-ttl { font-size: 25px; font-weight: 950; color: #fff; letter-spacing: -.5px; }
.ae-exit-sub { font-size: 13px; color: rgba(255,255,255,.82); margin-top: 6px; }
.ae-exit-body { padding: 24px; }
.ae-exit-offer {
  background: linear-gradient(135deg, #FFF8E7, #FFFBF0);
  border: 2px dashed var(--pr);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.ae-exit-pct { font-size: 56px; font-weight: 950; color: var(--pr); line-height: 1; }
.ae-exit-code {
  font-family: monospace;
  font-size: 19px;
  font-weight: 900;
  color: var(--orange);
  letter-spacing: .1em;
  background: var(--pr-bg);
  padding: 7px 20px;
  border-radius: 7px;
  margin-top: 8px;
  display: inline-block;
}
.ae-exit-timer {
  font-size: 12px;
  color: var(--pr);
  font-weight: 700;
  margin-top: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.ae-timer-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pr);
  display: inline-block;
  animation: ae-blink 1s step-end infinite;
}
@keyframes ae-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.ae-exit-btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, var(--pr), var(--orange));
  color: #fff;
  border: none;
  border-radius: 11px;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
  font-family: inherit;
  margin-bottom: 11px;
  box-shadow: var(--pr-shadow);
  transition: all .2s;
}
.ae-exit-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255,45,45,.55); }
.ae-exit-skip { width: 100%; background: none; border: none; color: var(--t4); font-size: 12.5px; cursor: pointer; font-family: inherit; padding: 4px; transition: .15s; }
.ae-exit-skip:hover { color: var(--t3); }

/* ── Mystery Box ── */
#ae-mystery-modal { max-width: 350px; width: 92vw; }
.ae-mys-head {
  background: linear-gradient(135deg, #2C0080, var(--purple), #A855F7);
  padding: 30px 22px;
  text-align: center;
}
.ae-mys-box { font-size: 68px; display: block; animation: ae-mys-shake 1s ease-in-out infinite; }
@keyframes ae-mys-shake { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.ae-mys-ttl { font-size: 23px; font-weight: 950; color: #fff; margin-top: 10px; }
.ae-mys-sub { font-size: 13px; color: rgba(255,255,255,.8); margin-top: 5px; }
.ae-mys-body { padding: 24px; text-align: center; }
.ae-mys-reveal { display: none; animation: ae-pop .4s cubic-bezier(.34,1.56,.64,1); }
.ae-mys-prod {
  background: linear-gradient(135deg, #F5F0FF, #EDE9FE);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 18px;
  border: 2px solid #A855F7;
}
.ae-mys-open-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--purple), #A855F7);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 5px 20px rgba(123,47,190,.4);
  transition: .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.ae-mys-open-btn:hover { transform: translateY(-2px); opacity: .95; }

/* ── Coins HUD ── */
#ae-coins-hud {
  position: fixed;
  bottom: 78px; right: 16px;
  z-index: 800;
  cursor: pointer;
  transition: all .3s;
}
#ae-coins-hud:hover { transform: scale(1.1); }
.ae-chud {
  background: linear-gradient(135deg, var(--yellow), var(--orange));
  border-radius: 13px;
  padding: 9px 13px;
  box-shadow: 0 5px 20px rgba(255,184,0,.55);
  display: flex;
  align-items: center;
  gap: 8px;
  animation: ae-coin-glow 2.5s ease-in-out infinite;
}
@keyframes ae-coin-glow {
  0%, 100% { box-shadow: 0 5px 20px rgba(255,184,0,.55); }
  50% { box-shadow: 0 5px 32px rgba(255,184,0,.9); }
}
.chud-ico { font-size: 21px; }
.chud-val { font-size: 18px; font-weight: 950; color: #fff; line-height: 1; }
.chud-lbl { font-size: 9.5px; color: rgba(255,255,255,.85); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: 1; margin-top: 2px; }

#ae-coins-popup {
  display: none;
  position: fixed;
  bottom: 135px; right: 16px;
  z-index: 810;
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 12px 48px rgba(0,0,0,.2);
  width: 225px;
  border: 2px solid var(--yellow);
  animation: ae-pop .25s ease;
}
.ae-cp-head {
  background: linear-gradient(135deg, var(--yellow), var(--orange));
  padding: 11px 16px;
  border-radius: 12px 12px 0 0;
  display: flex; align-items: center; gap: 9px;
}
.ae-cp-ttl { font-size: 14px; font-weight: 900; color: #fff; }
.ae-cp-body { padding: 14px 16px; }
.ae-cp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--bdr2);
  font-size: 12.5px;
}
.ae-cp-row:last-child { border-bottom: none; }
.ae-cp-lbl { color: var(--t2); font-weight: 600; }
.ae-cp-vl { font-weight: 800; color: var(--t1); }
.ae-cp-redeem {
  width: 100%;
  background: linear-gradient(135deg, var(--pr), var(--orange));
  color: #fff;
  border: none;
  padding: 9px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  margin-top: 9px;
  transition: .15s;
}
.ae-cp-redeem:hover { opacity: .9; }

/* ── Mystery Button ── */
#ae-mystery-btn {
  position: fixed;
  left: 16px; bottom: 78px;
  z-index: 800;
  background: linear-gradient(135deg, var(--purple), #A855F7);
  color: #fff;
  border: none;
  border-radius: 15px;
  padding: 11px 14px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 5px 20px rgba(123,47,190,.55);
  animation: ae-mys-float 3s ease-in-out infinite;
  transition: .2s;
}
@keyframes ae-mys-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.mys-ico { font-size: 24px; display: block; text-align: center; }
.mys-lbl { font-size: 10px; font-weight: 800; text-align: center; white-space: nowrap; }

/* ── FOMO Feed ── */
#ae-fomo-feed {
  position: fixed;
  bottom: 80px; left: 16px;
  z-index: 1400;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.ae-fomo {
  background: var(--white);
  border-radius: 11px;
  padding: 11px 14px;
  box-shadow: 0 5px 22px rgba(0,0,0,.15);
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: 275px;
  pointer-events: all;
  cursor: pointer;
  border-left: 4px solid var(--pr);
  animation: ae-fomo-in .36s cubic-bezier(.34,1.56,.64,1);
}
@keyframes ae-fomo-in { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: translateX(0); } }
.ae-fomo.fomo-out { animation: ae-fomo-out .3s ease forwards; }
@keyframes ae-fomo-out { to { opacity: 0; transform: translateX(-22px); } }
.fomo-type-buy   { border-left-color: var(--green); }
.fomo-type-view  { border-left-color: var(--purple); }
.fomo-type-stock { border-left-color: var(--pr); }
.fomo-ico { font-size: 26px; flex-shrink: 0; }
.fomo-txt { flex: 1; min-width: 0; }
.fomo-main { font-size: 12.5px; font-weight: 700; color: var(--t1); line-height: 1.38; }
.fomo-main em { color: var(--pr); font-style: normal; }
.fomo-sub { font-size: 11px; color: var(--t4); margin-top: 2px; }

/* ── Cart Progress Bar ── */
#ae-cart-prog {
  display: none;
  position: fixed;
  bottom: 58px; left: 0; right: 0;
  z-index: 690;
  background: var(--white);
  border-top: 2px solid var(--bdr);
  padding: 9px 18px;
  box-shadow: 0 -3px 14px rgba(0,0,0,.08);
}
.cpb-inner {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 13px;
}
.cpb-ico { font-size: 21px; flex-shrink: 0; }
.cpb-txt { font-size: 13px; font-weight: 700; color: var(--t1); flex: 1; min-width: 0; }
.cpb-txt em { color: var(--pr); font-style: normal; }
.cpb-bar {
  flex: 1;
  max-width: 160px;
  height: 7px;
  background: var(--bdr2);
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}
.cpb-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--pr), var(--yellow));
  border-radius: 4px;
  transition: width .4s ease;
}
.cpb-cta {
  background: var(--pr);
  color: #fff;
  border: none;
  padding: 7px 16px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: .15s;
}
.cpb-cta:hover { background: var(--pr-d); }

/* ── Savings HUD ── */
#ae-savings-hud {
  position: fixed;
  top: 108px;
  right: -210px;
  z-index: 800;
  transition: right .5s cubic-bezier(.34,1.56,.64,1);
}
#ae-savings-hud.show { right: 0; }
.ae-sav {
  background: linear-gradient(135deg, #2D6A4F, var(--green));
  border-radius: 11px 0 0 11px;
  padding: 9px 16px 9px 13px;
  display: flex;
  align-items: center;
  gap: 9px;
  box-shadow: 0 4px 20px rgba(0,185,107,.45);
}
.sav-ico { font-size: 19px; }
.sav-val { font-size: 17px; font-weight: 950; color: #fff; line-height: 1; }
.sav-lbl { font-size: 10px; color: rgba(255,255,255,.85); font-weight: 700; line-height: 1; margin-top: 2px; }

/* ── Confetti ── */
#ae-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 9999; }

/* ── Mobile responsive fixes ── */
@media (max-width: 600px) {
  #ae-streak-bar .streak-days { display: none; }
  #ae-coins-hud, #ae-mystery-btn { bottom: 74px; }
  #ae-fomo-feed { max-width: 55vw; }
  .ae-fomo { font-size: 11px; }
  .flash-items { flex-wrap: nowrap; }
  .fi { min-width: 130px; }
  .sec-hd { flex-wrap: wrap; gap: 8px; }
  .sec-hd-left { flex-wrap: wrap; }
  .hero-h1 { letter-spacing: -1.5px; }
  .vpills { gap: 7px; }
  .vp { padding: 8px 10px; }
}

/* ── Quick View / Modal shared ── */
.ch-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
}
.ch-modal-overlay.open { display: flex; }
.ch-modal {
  background: var(--white);
  border-radius: 14px;
  overflow: hidden;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.ch-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--bdr);
}
.ch-modal-body { padding: 20px; }
.ch-loading {
  width: 32px; height: 32px;
  border: 3px solid var(--bdr2);
  border-top-color: var(--pr);
  border-radius: 50%;
  animation: i-spin .7s linear infinite;
  margin: 20px auto;
}
@keyframes i-spin { to { transform: rotate(360deg); } }

/* ════ END INDEX v32 INTEGRATION ════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   INDEX v33 — New Classes (Hero Rebuild + Product Card Temu Level)
   Added to main.css — zero conflicts with existing rules
   ════════════════════════════════════════════════════════════════ */

/* ── Hero v33 ── */
.hero { background: linear-gradient(135deg,#110000 0%,#440000 28%,#991100 55%,#DD2200 78%,var(--pr) 92%,var(--orange) 100%); position: relative; overflow: hidden; }
.hero-bg-overlay { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 80% at 10% 50%, rgba(255,255,255,.06) 0%, transparent 60%), radial-gradient(ellipse 40% 60% at 85% 20%, rgba(255,200,0,.07) 0%, transparent 50%); }
.hero-inner { display: grid; grid-template-columns: 1fr 480px; gap: 32px; align-items: center; padding: 40px 0 32px; position: relative; z-index: 2; }
@media (max-width: 960px) { .hero-inner { grid-template-columns: 1fr; padding: 28px 0 20px; } }

.hero-text { }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.12); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.22); border-radius: var(--rx-pill); padding: 6px 16px; font-size: 12px; font-weight: 700; color: #fff; margin-bottom: 16px; letter-spacing: .04em; }
.hero-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 12px rgba(255,215,0,.9); flex-shrink: 0; animation: hbdot 1.6s ease-in-out infinite; }
@keyframes hbdot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.2;transform:scale(.4)} }

.hero-h1 { font-size: clamp(36px, 6vw, 72px); font-weight: 900; color: #fff; line-height: .96; letter-spacing: -2px; margin-bottom: 14px; text-shadow: 0 4px 28px rgba(0,0,0,.3); }
.hero-h1 span { background: linear-gradient(180deg,#FFE566,var(--yellow) 40%,#FF9500); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 28px rgba(255,215,0,.65)); display: block; }
.hero-sub { font-size: clamp(15px, 2vw, 20px); color: rgba(255,255,255,.88); font-weight: 600; margin-bottom: 20px; max-width: 460px; line-height: 1.5; }

.hero-micro-trust { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.hero-micro-trust span { background: rgba(0,0,0,.22); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.9); font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 6px; }

.hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.hero-cta-main { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: var(--pr-d); padding: 15px 40px; border-radius: var(--rx-pill); font-size: 17px; font-weight: 900; letter-spacing: -.2px; box-shadow: 0 10px 36px rgba(0,0,0,.28), 0 0 0 4px rgba(255,255,255,.14); transition: all .22s; }
.hero-cta-main:hover { transform: translateY(-3px); box-shadow: 0 16px 48px rgba(0,0,0,.34); background: #FFF6F3; }
.hero-cta-arrow { display: inline-block; animation: ctaarr 1s ease-in-out infinite; }
@keyframes ctaarr { 0%,100%{transform:translateX(0)} 50%{transform:translateX(7px)} }
.hero-cta-ghost { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.14); backdrop-filter: blur(6px); color: #fff; padding: 15px 26px; border-radius: var(--rx-pill); font-size: 15px; font-weight: 700; border: 1.5px solid rgba(255,255,255,.3); transition: all .2s; }
.hero-cta-ghost:hover { background: rgba(255,255,255,.28); }

.hero-live-count { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.8); }
.hlc-dot { width: 8px; height: 8px; border-radius: 50%; background: #00E676; flex-shrink: 0; box-shadow: 0 0 10px rgba(0,230,118,.8); animation: hlcpulse 1.6s ease-in-out infinite; }
@keyframes hlcpulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.6)} }
#hero-live-num { color: var(--yellow); font-weight: 900; }

/* Hero Mosaic */
.hero-mosaic-wrap { position: relative; }
.hero-mosaic { display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: 180px 130px; gap: 8px; }
.hm-tile { border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 28px; position: relative; cursor: pointer; transition: all .28s; }
.hm-tile:hover { transform: scale(1.04); box-shadow: 0 12px 32px rgba(0,0,0,.25); }
.hm-big { grid-column: span 2; }
.hm-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.hm-tile:hover img { transform: scale(1.07); }
.hm-placeholder { font-size: 32px; }
.hm-disc { position: absolute; top: 8px; left: 8px; background: var(--pr); color: #fff; font-size: 11px; font-weight: 900; padding: 3px 10px; border-radius: 5px; }
.hm-hot { position: absolute; top: 8px; right: 8px; background: rgba(255,215,0,.95); color: #111; font-size: 9.5px; font-weight: 900; padding: 2px 8px; border-radius: 4px; animation: hotpulse2 2s ease-in-out infinite; }
@keyframes hotpulse2 { 0%,100%{opacity:1} 50%{opacity:.65} }
@media (max-width: 960px) { .hero-mosaic-wrap { display: none; } }

/* Floating deal card */
.hero-float-card { position: absolute; bottom: -14px; right: 8px; background: #fff; border-radius: 12px; padding: 10px 14px; box-shadow: 0 8px 28px rgba(0,0,0,.22); display: flex; align-items: center; gap: 10px; animation: floatcard 3s ease-in-out infinite; z-index: 5; }
@keyframes floatcard { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.hfc-icon { font-size: 22px; }
.hfc-t { font-size: 12px; font-weight: 800; color: var(--t1); }
.hfc-s { font-size: 10px; color: var(--pr); font-weight: 700; }
.hfc-pct { font-size: 20px; font-weight: 950; color: var(--pr); margin-right: auto; }

/* Hero Search Bar */
.hero-search-bar { position: relative; z-index: 2; background: rgba(0,0,0,.22); backdrop-filter: blur(14px); border-top: 1px solid rgba(255,255,255,.1); padding: 14px 0 10px; }
.hsb-inner { display: flex; background: #fff; border-radius: 12px; overflow: hidden; max-width: 780px; box-shadow: 0 8px 36px rgba(0,0,0,.25); transition: box-shadow .2s; }
.hsb-inner:focus-within { box-shadow: 0 8px 36px rgba(0,0,0,.3), 0 0 0 4px rgba(255,215,0,.4); }
.hsb-cat { background: #F7F7F7; border: none; border-left: 1px solid var(--bdr); color: var(--t2); font-size: 12.5px; font-weight: 700; padding: 0 14px; min-width: 96px; font-family: inherit; outline: none; cursor: pointer; flex-shrink: 0; }
.hsb-input { flex: 1; border: none; outline: none; color: var(--t1); font-size: 14px; font-family: inherit; padding: 15px 18px; min-width: 0; }
.hsb-input::placeholder { color: var(--t4); }
.hsb-btn { background: var(--pr); color: #fff; padding: 0 28px; border: none; cursor: pointer; transition: background .15s; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; font-family: inherit; flex-shrink: 0; white-space: nowrap; }
.hsb-btn:hover { background: var(--pr-d); }
.hsb-popular { display: flex; align-items: center; gap: 7px; flex-wrap: nowrap; overflow: hidden; padding-top: 9px; max-width: 780px; }
.hsp-lbl { font-size: 12px; color: rgba(255,255,255,.65); font-weight: 600; white-space: nowrap; }
.hsp-tag { font-size: 12px; color: rgba(255,255,255,.85); font-weight: 600; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); padding: 4px 12px; border-radius: var(--rx-pill); white-space: nowrap; transition: all .15s; }
.hsp-tag:hover { background: rgba(255,255,255,.28); color: #fff; }

/* ── Categories v33 additions ── */
.cats-hd { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 10px; }
.cats-title { font-size: 17px; font-weight: 900; color: var(--t1); letter-spacing: -.3px; display: flex; align-items: center; gap: 8px; }
.cats-view-all { font-size: 13px; font-weight: 700; color: var(--pr); background: var(--pr-bg); padding: 7px 18px; border-radius: var(--rx-pill); transition: all .18s; white-space: nowrap; }
.cats-view-all:hover { background: var(--pr); color: #fff; }
.cat-item-all .cat-icon-all { background: linear-gradient(135deg,var(--pr),var(--orange)) !important; border-color: transparent !important; color: #fff; }
.cat-item-all .cat-icon-all svg { stroke: #fff; }
.cat-item-all .cat-lbl { color: var(--pr); font-weight: 700; }

/* ── Product Card v33 additions ── */
/* Badge — top left corner */
.pc .cb { position: absolute; top: 0; left: 0; font-size: 11px; font-weight: 900; padding: 4px 10px; border-radius: 0 0 8px 0; z-index: 3; letter-spacing: .1px; }
.pc .cb-fire { background: linear-gradient(110deg,var(--pr-d),var(--orange)); color: #fff; box-shadow: 0 2px 8px rgba(255,45,0,.4); }
.pc .cb-sale { background: var(--pr); color: #fff; }
.pc .cb-trend { background: var(--orange); color: #fff; }
.pc .cb-best { background: var(--purple); color: #fff; }
.pc .cb-new { background: var(--green); color: #fff; }

/* Wishlist button on image */
.pc-wl-img { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.92); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.12); transition: all .18s; z-index: 3; opacity: 0; }
.pc:hover .pc-wl-img { opacity: 1; }
.pc-wl-img:hover { background: #fff; transform: scale(1.12); }
.pc-wl-img.wishlisted { opacity: 1; }
.pc-wl-img.wishlisted svg { fill: var(--pr); stroke: var(--pr); }

/* Quick view bar */
.pc-qv-row { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.62); backdrop-filter: blur(4px); opacity: 0; transition: opacity .2s; display: flex; align-items: center; justify-content: center; padding: 8px; }
.pc:hover .pc-qv-row { opacity: 1; }
.pc-qv-btn { background: none; border: 1px solid rgba(255,255,255,.6); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 5px; font-family: inherit; transition: all .15s; }
.pc-qv-btn:hover { background: rgba(255,255,255,.2); }

/* Rating + sold row */
.pc-rating-row { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; margin-bottom: 2px; }
.pc-sold-inline { font-size: 10.5px; color: var(--t3); margin-right: auto; white-space: nowrap; }

/* Price row v51 */
.pc-price-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: 5px 0 3px; }
.cp-now { font-size: 26px; font-weight: 950; color: #CC2200; letter-spacing: -.5px; font-style: normal; line-height: 1; }
.cp-old { font-size: 13px; color: #AAA; text-decoration: line-through; font-style: normal; font-weight: 600; }
.cp-pct { font-size: 12px; font-weight: 900; font-style: normal; color: #fff; background: #CC2200; padding: 3px 8px; border-radius: 5px; }

/* Shipping + COD row */
.pc-ship-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.pc-free-ship { font-size: 11px; color: var(--green); font-weight: 700; }
.pc-cod { font-size: 10.5px; color: var(--t3); font-weight: 600; }

/* Urgency badge */
.pc-urgent { font-size: 11px; font-weight: 700; color: #CC2200; background: rgba(200,0,0,.07); border: 1px solid rgba(200,0,0,.15); border-radius: 5px; padding: 3px 9px; margin-bottom: 5px; display: inline-block; }

/* ATC — full width, dark red gradient */
.pc .pc-atc { width: 100%; padding: 11px; background: linear-gradient(90deg,#7A3E0C,#FF6A00); color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 900; cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all .2s; margin-top: 7px; box-shadow: 0 4px 16px rgba(150,0,0,.35); }
.pc .pc-atc:hover { background: linear-gradient(90deg,#880000,#CC2200); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(150,0,0,.5); }
.pc .pc-atc.added { background: linear-gradient(90deg,#2D6A4F,#40916C); box-shadow: 0 3px 14px rgba(0,185,107,.3); }
.pc .pc-atc:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* Image height */
.pc .pc-img-wrap { height: 190px; min-height: 190px; }
@media (max-width: 700px) { .pc .pc-img-wrap { height: 155px; min-height: 155px; } }
@media (max-width: 440px) { .pc .pc-img-wrap { height: 140px; min-height: 140px; } }

/* ── Section title accent bar ── */
.sec-title::after { content: ''; display: block; width: 3px; height: 20px; background: var(--pr); border-radius: 2px; margin-right: 4px; order: -1; }

/* ── Trust bar 5th column ── */
.trust-bar .trust-row .ti:nth-child(3) { background: linear-gradient(135deg,#FFFDF0,#FFF8E7); }
.trust-bar .trust-row .ti:nth-child(3) .ti-title { color: #CC8800; }
@media (max-width: 900px) { .trust-bar .trust-row .ti:nth-child(3) { display: none; } }

/* ── Responsive hero extras ── */
@media (max-width: 640px) {
  .hero-search-bar .hsb-popular { display: none; }
  .hero-h1 { letter-spacing: -1px; }
  .hero-cta-main { padding: 13px 28px; font-size: 15px; }
  .hero-badge { font-size: 11px; padding: 5px 12px; }
}

/* ════ END INDEX v33 NEW CLASSES ════════════════ */

/* ════ INDEX v51 — New Card Classes ════════════ */
/* Badge system */
.pcb { position: absolute; top: 8px; left: 8px; z-index: 3; font-size: 11.5px; font-weight: 900; padding: 4px 10px; border-radius: 20px; box-shadow: 0 2px 8px rgba(0,0,0,.2); letter-spacing: .1px; }
.pcb-fire { background: linear-gradient(90deg,#CC2200,#FF8A2C); color: #fff; animation: pcb-glow 2s ease-in-out infinite; }
@keyframes pcb-glow { 0%,100%{box-shadow:0 2px 8px rgba(180,0,0,.4)}50%{box-shadow:0 2px 20px rgba(255,60,0,.9)} }
.pcb-sale { background: #CC2200; color: #fff; }
.pcb-best { background: linear-gradient(90deg,#5B21B6,#7C3AED); color: #fff; }
.pcb-hot  { background: linear-gradient(90deg,#9F5310,#FF5500); color: #fff; }
.pcb-new  { background: linear-gradient(90deg,#2D6A4F,#40916C); color: #fff; }

/* Price block (new class names) */
.pc-price-block { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pc-price-now { font-size: 26px; font-weight: 950; color: #CC2200; line-height: 1; letter-spacing: -.5px; font-style: normal; }
.pc-price-was { font-size: 13px; color: #AAA; text-decoration: line-through; font-style: normal; font-weight: 600; }
.pc-disc-pct  { font-size: 12px; font-weight: 900; font-style: normal; color: #fff; background: #CC2200; padding: 3px 8px; border-radius: 5px; white-space: nowrap; }
.pc-save-lbl  { font-size: 11.5px; font-weight: 800; color: #00A650; background: rgba(0,166,80,.09); border: 1px solid rgba(0,166,80,.2); padding: 2px 9px; border-radius: 5px; display: inline-block; }

/* Social proof */
.pc-proof       { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #666; flex-wrap: wrap; }
.pc-stars-mini  { display: flex; align-items: center; gap: 2px; }
.pc-stars-mini b{ color: #FF6A00; font-weight: 800; }
.pc-dot         { color: #CCC; }
.pc-sold-c      { font-size: 11px; font-weight: 800; color: #CC2200; }

/* Sold bar */
.pc-sbar      { height: 5px; background: #FFE0D0; border-radius: 3px; overflow: hidden; }
.pc-sbar-fill { height: 100%; background: linear-gradient(90deg,#FF6A00,#CC2200); border-radius: 3px; }

/* Urgency banners */
.pcb-urg     { font-size: 11.5px; font-weight: 800; border-radius: 6px; padding: 5px 10px; display: flex; align-items: center; gap: 5px; }
.pcb-urg-red { background: linear-gradient(90deg,#7A3E0C,#9A4B0F); color: #fff; animation: urg-pulse .9s ease-in-out infinite; box-shadow: 0 2px 10px rgba(150,0,0,.4); }
@keyframes urg-pulse { 0%,100%{opacity:1}50%{opacity:.85} }
.pcb-urg-ora { background: rgba(200,50,0,.09); color: #BB2200; border: 1px solid rgba(180,40,0,.22); }
.pcb-urg-hot { background: rgba(180,0,0,.05); color: #BB0000; border: 1px solid rgba(180,0,0,.13); }

/* Trust line under ATC */
.pc-gtrust { font-size: 10px; color: #BBB; text-align: center; font-weight: 600; margin-top: 4px; }

/* Dopamine bomb */
@keyframes bomb-glow   { 0%,100%{box-shadow:0 0 16px rgba(180,0,0,.4)}50%{box-shadow:0 0 32px rgba(255,80,0,.7)} }
@keyframes bomb-bounce { from{transform:scale(1)}to{transform:scale(1.22)} }

/* Grid addiction */
.grid-addict { display: grid; grid-template-columns: repeat(6,1fr); gap: 12px; }
@media(max-width:1200px){ .grid-addict { grid-template-columns: repeat(5,1fr); } }
@media(max-width:960px)  { .grid-addict { grid-template-columns: repeat(4,1fr); gap: 9px; } }
@media(max-width:700px)  { .grid-addict { grid-template-columns: repeat(3,1fr); gap: 7px; } }
@media(max-width:440px)  { .grid-addict { grid-template-columns: repeat(2,1fr); gap: 7px; } }

/* Trust section */
#ch-trust-banner { background: #0D1F3C; padding: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.ctb-grid  { display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: none; }
.ctb-grid::-webkit-scrollbar { display: none; }
.ctb-card  { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-right: 1px solid rgba(255,255,255,.07); white-space: nowrap; flex-shrink: 0; }
.ctb-card:last-child { border-right: none; }
.ctb-gold  { background: rgba(255,215,0,.06); }
.ctb-ico   { font-size: 18px; flex-shrink: 0; line-height: 1; }
.ctb-title { font-size: 12px; font-weight: 800; color: #fff; white-space: nowrap; }
.ctb-desc  { font-size: 10.5px; color: rgba(255,255,255,.5); white-space: nowrap; }
.ctb-headline { display: none; }

/* Brand strip */
.brand-strip {
  background: #0D0D0D;
  padding: 0;
  overflow: hidden;
  position: relative;
  height: 52px;
  border-top: none;
  border-bottom: none;
}
.brand-strip::before,.brand-strip::after {
  content:''; position:absolute; top:0; width:80px; height:100%; z-index:2; pointer-events:none;
}
.brand-strip::before { left:0; background:linear-gradient(to right,#0D0D0D,transparent); }
.brand-strip::after  { right:0; background:linear-gradient(to left,#0D0D0D,transparent); }
.brand-track {
  display:flex; align-items:center; gap:36px;
  height:100%; white-space:nowrap;
  animation:brand-scroll 25s linear infinite;
  width:max-content; padding:0 20px;
}
.brand-track:hover { animation-play-state:paused }
@keyframes brand-scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.brand-item {
  display:inline-flex; align-items:center; justify-content:center;
  height:32px; flex-shrink:0; text-decoration:none;
  opacity:.55; transition:opacity .2s;
}
.brand-item:hover { opacity:1 }
.brand-item img {
  max-width:72px; max-height:24px; object-fit:contain;
  filter:grayscale(100%) brightness(10);
  transition:filter .2s;
}
.brand-item:hover img { filter:grayscale(0%) brightness(1.1) }
.brand-item span {
  font-size:13px; font-weight:800; color:rgba(255,255,255,.5);
  letter-spacing:.5px; text-transform:uppercase;
}
.brand-item:hover span { color:#fff }

/* Shock banner */
.shock-banner { background: linear-gradient(90deg,#110000,#5A0800,#9A4B0F,#FF4000,#FF6500); padding: 12px 0; overflow: hidden; box-shadow: 0 4px 20px rgba(180,0,0,.4); }
.shock-inner  { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.shock-left   { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; }
.shock-pct    { font-size: clamp(30px,5vw,52px); font-weight: 950; color: #FFD700; line-height: 1; letter-spacing: -2px; flex-shrink: 0; }
.shock-txt b  { display: block; font-size: clamp(13px,2vw,17px); font-weight: 900; color: #fff; margin-bottom: 3px; }
.shock-txt span { font-size: 11.5px; color: rgba(255,255,255,.75); font-weight: 600; }
.shock-cd     { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.shock-cd-block { background: rgba(0,0,0,.4); border: 1.5px solid rgba(255,215,0,.4); border-radius: 7px; padding: 6px 11px; min-width: 46px; text-align: center; }
.shock-cd-block span  { display: block; font-size: 22px; font-weight: 950; color: #FFD700; line-height: 1; font-variant-numeric: tabular-nums; }
.shock-cd-block small { display: block; font-size: 8.5px; color: rgba(255,255,255,.5); text-transform: uppercase; margin-top: 1px; }
.shock-cd-sep { color: rgba(255,215,0,.5); font-size: 22px; font-weight: 200; animation: blink 1s step-end infinite; padding-bottom: 10px; }
@keyframes blink { 0%,100%{opacity:1}50%{opacity:0} }
.shock-cta    { display: flex; flex-direction: column; align-items: center; background: #FFD700; color: #111; padding: 11px 28px; border-radius: 10px; font-size: 16px; font-weight: 950; text-decoration: none; flex-shrink: 0; transition: all .2s; }
.shock-cta:hover { transform: scale(1.07); }
.shock-cta-sub { font-size: 9.5px; font-weight: 600; color: rgba(0,0,0,.6); margin-top: 2px; }
@media(max-width:600px){ .shock-pct{font-size:32px} .shock-cta{padding:9px 18px;font-size:14px} .shock-cd-block span{font-size:18px} .shock-cd-block{min-width:36px} }

/* ════ END INDEX v51 ════ */



/* ══════════════════════════════════════════════════
   LTR OVERFLOW FIX — Language Switch White Space
   Root cause: .ch-mobile-menu uses right:-100%
   which creates horizontal overflow in LTR mode
══════════════════════════════════════════════════ */

/* Prevent ALL overflow */
html, body { overflow-x: hidden !important; }
*, *::before, *::after { max-width: 100vw; }

/* Mobile menu: RTL from right, LTR from left */
[dir="ltr"] .ch-mobile-menu {
  right: auto !important;
  left: -100% !important;
  transition: left .3s cubic-bezier(.4,0,.2,1) !important;
}
[dir="ltr"] .ch-mobile-menu.open {
  left: 0 !important;
  right: auto !important;
}

/* Mobile panel inside menu */
[dir="ltr"] .ch-mobile-panel {
  right: auto !important;
  left: -320px !important;
  transition: left .3s ease !important;
  box-shadow: 4px 0 24px rgba(0,0,0,.15) !important;
}
[dir="ltr"] .ch-mobile-menu.open .ch-mobile-panel {
  left: 0 !important;
  right: auto !important;
}

/* Header elements direction */
[dir="ltr"] .ch-header-inner,
[dir="ltr"] .ch-topbar-inner,
[dir="ltr"] .ch-cat-nav-list { direction: ltr; }

/* Badges */
[dir="ltr"] .ch-cart-count { left: auto !important; right: -4px !important; }
[dir="ltr"] .pcb { left: auto !important; right: 8px !important; }
[dir="ltr"] .pcb-ads { left: auto !important; right: 8px !important; }
[dir="ltr"] .pc-wl-img { right: auto !important; left: 8px !important; }

/* Lang dropdown */
[dir="ltr"] .ch-lang-dropdown { right: auto !important; left: 0 !important; }

/* Pills & scrolls */
[dir="ltr"] .ch-cat-nav-list,
[dir="ltr"] .catpill-scroll,
[dir="ltr"] .ch-quick-cats-scroll { direction: ltr; }

/* Products */
[dir="ltr"] .grid6, [dir="ltr"] .pc { direction: ltr; }

/* Footer */
[dir="ltr"] .ft-grid, [dir="ltr"] .ft-col,
[dir="ltr"] .ft-col-links, [dir="ltr"] .ft-col-title,
[dir="ltr"] .ft-langs { direction: ltr; text-align: left; }


/* ════════════════════════════════════════════════════════
   CHINAHUB MOBILE v4 — Safe, scoped to max-width:768px
════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

/* Base */
html,body{overflow-x:hidden!important;max-width:100vw}
body{background:#ECEDF2!important;padding-bottom:62px!important}
.ch-topbar,.ch-cat-nav{display:none!important}

/* Full-screen — no white sides */
.page-bg,#page-bg,.ch-page,.ch-main{width:100vw!important;max-width:100vw!important;padding-left:0!important;padding-right:0!important;margin:0!important}
.sec{padding:0!important}
.sec>.X,.sec>div>.X{max-width:100%!important;width:100%!important;padding:0!important;margin:0!important}
.sec-box{border-radius:0!important;border:none!important;box-shadow:none!important}
.sec-body{padding:0!important}
.sec-hd{padding:10px!important;border-top:none!important;border-bottom:none!important}
.ch-container,.X{padding-left:0!important;padding-right:0!important}

/* Header — hamburger | logo | search | cart */
.ch-header{position:sticky!important;top:0!important;z-index:900!important;background:#fff!important;box-shadow:0 1px 0 #E8E8EC!important;padding:0!important}
.ch-header-main{padding:0!important}
.ch-header-inner{display:flex!important;align-items:center!important;height:52px!important;padding:0 10px!important;gap:8px!important}
.ch-hamburger{order:1!important;flex-shrink:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:5px!important;width:32px!important;height:32px!important;background:none!important;border:none!important;padding:0!important}
.ch-hamburger span{display:block!important;width:20px!important;height:2px!important;background:#222!important;border-radius:2px!important}
.ch-logo{order:2!important;flex-shrink:0!important}
.ch-logo img{height:48px!important;width:auto!important;max-width:180px!important;object-fit:contain!important}
.ch-logo-text{font-size:17px!important;font-weight:900!important}
.ch-logo-china{color:#E5000A!important}
.ch-logo-hub{color:#111!important}
.ch-search-form{order:3!important;flex:1!important;min-width:0!important;position:relative!important}
.ch-search-wrap{height:36px!important;border-radius:999px!important;border:1.5px solid #E5000A!important;overflow:hidden!important;display:flex!important}
.ch-search-input{flex:1!important;min-width:0!important;border:none!important;padding:0 10px!important;font-size:13px!important;background:transparent!important;outline:none!important}
.ch-search-input::placeholder{color:#AAA!important}
.ch-search-cat{display:none!important}
.ch-search-btn{width:38px!important;flex-shrink:0!important;padding:0!important;background:#E5000A!important;border:none!important;display:flex!important;align-items:center!important;justify-content:center!important}
.ch-search-btn svg{stroke:#fff!important;width:15px!important;height:15px!important}
.ch-header-actions{order:4!important;flex-shrink:0!important}
.ch-hide-mobile,.ch-header-action:not(.ch-cart-action){display:none!important}
.ch-header-action-label{display:none!important}
.ch-cart-action{display:flex!important;align-items:center!important;justify-content:center!important;width:38px!important;height:38px!important;min-width:38px!important;border-radius:10px!important;padding:0!important;background:#E5000A!important;color:#fff!important;position:relative!important;text-decoration:none!important}
.ch-cart-action svg{width:18px!important;height:18px!important;stroke:#fff!important}
.ch-cart-count{position:absolute!important;top:-4px!important;right:-4px!important;left:auto!important;background:#fff!important;color:#E5000A!important;font-size:9px!important;font-weight:900!important;min-width:15px!important;height:15px!important;border-radius:99px!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:0 3px!important;border:1.5px solid #E5000A!important;line-height:1!important}

/* Product grid */
.grid6,.pgrid,.ch-grid,.grid-addict{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:6px!important;padding:4px 6px 10px!important}

/* Product card */
.pc{background:#fff!important;border-radius:10px!important;overflow:hidden!important;box-shadow:0 1px 3px rgba(0,0,0,.06)!important;border:none!important}
.pc-img-wrap,.pc-img{display:block!important;aspect-ratio:1/1!important;width:100%!important;height:auto!important;overflow:hidden!important;background:#F4F5F8!important;position:relative!important}
.pc-img-wrap img,.pc-img img{width:100%!important;height:100%!important;object-fit:cover!important}
.pcb{position:absolute!important;top:6px!important;right:6px!important;left:auto!important;width:auto!important;max-width:65%!important;display:inline-block!important;white-space:nowrap!important;font-size:10px!important;font-weight:900!important;padding:2px 7px!important;border-radius:10px!important;z-index:3!important}
.pc-ov{display:none!important}
.pc-body{padding:7px 8px 9px!important}
.pc-name{font-size:12px!important;font-weight:500!important;min-height:34px!important}
.cp-now,.pc-price-now{font-size:17px!important;font-weight:900!important;color:#E5000A!important}
.cp-was,.pc-price-was{font-size:11px!important;color:#bbb!important}
.pc-atc{font-size:12px!important;padding:8px!important}

/* Flash sale compact */
.flash-hd{padding:10px 12px!important}
.flash-sub{display:none!important}
.cd-block{width:30px!important;height:30px!important}
.cd-num{font-size:13px!important}
.cd-lbl2{font-size:6px!important}
.flash-items{display:flex!important;overflow-x:auto!important;scrollbar-width:none!important;gap:6px!important;padding:8px!important}
.flash-items::-webkit-scrollbar{display:none!important}
.fi{flex:0 0 130px!important;min-width:130px!important}
.fi-img{height:130px!important}
.fi-now{font-size:15px!important}

/* Bottom nav */
.ch-mobile-bottom-nav{position:fixed!important;bottom:0!important;left:0!important;right:0!important;height:58px!important;background:#fff!important;border-top:1px solid #E8E8EC!important;z-index:850!important;display:flex!important}
.ch-mob-nav-inner{display:flex!important;width:100%!important}
.ch-mob-nav-btn{flex:1!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;font-size:9.5px!important;font-weight:700!important;color:#AAA!important;border:none!important;background:none!important}
.ch-mob-nav-btn.active{color:#E5000A!important}
.ch-mob-nav-center{background:linear-gradient(135deg,#E5000A,#FF5200)!important;border-radius:50%!important;width:46px!important;height:46px!important;margin-top:-12px!important;box-shadow:0 4px 14px rgba(229,0,10,.35)!important}

}
/* end mobile */

@media (max-width:390px){
  .cp-now,.pc-price-now{font-size:15px!important}
  .pc-name{font-size:11.5px!important}
}


/* =========================================================
   ChinaHub Pro Max Orange Upgrade
   Orange-only theme + cleaner strips + stronger conversion UI
   ========================================================= */

/* Orange-first identity */
:root{
  --pr:#FF6A00 !important;
  --pr-d:#E85B00 !important;
  --pr-l:#FF9440 !important;
  --pr-bg:rgba(255,106,0,.08) !important;
  --pr-shadow:0 4px 18px rgba(255,106,0,.28) !important;

  --primary:#FF6A00 !important;
  --primary-d:#E85B00 !important;
  --primary-bg:rgba(255,106,0,.08) !important;

  --red:#FF6A00 !important;
  --red-d:#E85B00 !important;
  --orange:#FF8A2C !important;
  --gold:#FFC14D !important;
}

/* Trending / Best Sellers / New Arrivals buttons orange */
.prd-tab-btn,
.sec-va,
.ch-sec-link,
.flash-more{
  color:#FF6A00 !important;
}
.prd-tab-btn.active{
  color:#FF6A00 !important;
  border-bottom-color:#FF6A00 !important;
  background:rgba(255,106,0,.06) !important;
}
.prd-tab-btn:hover{
  color:#FF6A00 !important;
  background:rgba(255,106,0,.05) !important;
}
.prd-view-all,
.sec-va{
  background:#FFF4EC !important;
  border:1px solid #FFD9C2 !important;
  border-radius:999px !important;
}
.prd-view-all:hover,
.sec-va:hover{
  background:var(--pr) !important;
  color:#fff !important;
}

/* Streak bar — cleaner, more premium */
#ae-streak-bar{
  background:linear-gradient(90deg,#2B1608,#5A2B08,#7A3908,#2B1608) !important;
  padding:10px 0 !important;
  box-shadow:0 4px 18px rgba(255,106,0,.22) !important;
}
.streak-inner{
  gap:12px !important;
}
.streak-left{
  gap:10px !important;
}
.streak-flame{
  font-size:20px !important;
  filter:drop-shadow(0 0 10px rgba(255,193,77,.35));
}
.streak-txt{
  font-size:13px !important;
  color:#fff !important;
  font-weight:800 !important;
}
.streak-txt em,
.ch-live-n{
  color:#FFC14D !important;
}
.streak-live{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  padding:4px 10px !important;
  border-radius:999px !important;
  margin-inline-start:6px !important;
}
.streak-days{
  gap:6px !important;
}
.sd{
  width:28px !important;
  height:28px !important;
  border-radius:8px !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  color:rgba(255,255,255,.7) !important;
}
.sd.done{
  background:linear-gradient(135deg,#FF9A1F,#FF6A00) !important;
  border-color:#FFB84D !important;
  color:#fff !important;
  box-shadow:0 4px 12px rgba(255,106,0,.24) !important;
}
.sd.today{
  background:rgba(255,255,255,.14) !important;
  border-color:#FFB84D !important;
  color:#fff !important;
}
.streak-actions{
  gap:8px !important;
}
.streak-btn,
.streak-claim-btn{
  height:34px !important;
  padding:0 14px !important;
  border-radius:999px !important;
  font-size:12px !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}
.streak-btn{
  background:rgba(255,255,255,.10) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.16) !important;
}
.streak-btn:hover{
  background:rgba(255,255,255,.18) !important;
  border-color:rgba(255,255,255,.22) !important;
}
.streak-claim-btn{
  background:linear-gradient(135deg,#FF8A2C,#FF9A1F) !important;
  color:#fff !important;
  border:none !important;
  box-shadow:0 6px 16px rgba(255,106,0,.24) !important;
}
.streak-claim-btn:hover{
  background:linear-gradient(135deg,#E85B00,#FF8A2C) !important;
  transform:translateY(-1px) !important;
}

/* Free shipping strip — cleaner and orange, more compact */
#ae-ship-bar{
  background:linear-gradient(90deg,#FFF4EC,#FFF8F3) !important;
  border-top:1px solid #FFD9C2 !important;
  border-bottom:1px solid #FFD9C2 !important;
  box-shadow:none !important;
  padding:10px 0 !important;
}
.sb-inner{
  gap:12px !important;
  flex-wrap:nowrap !important;
}
.sb-ico{
  font-size:20px !important;
  flex-shrink:0 !important;
}
.sb-txt{
  color:#7C2D12 !important;
  font-size:13px !important;
  font-weight:900 !important;
  max-width:none !important;
  flex:0 1 auto !important;
}
.sb-txt em{
  color:#FF6A00 !important;
  font-style:normal !important;
}
.sb-bar{
  height:8px !important;
  background:#FFE5D6 !important;
  border-radius:999px !important;
  max-width:180px !important;
  flex:1 1 180px !important;
}
.sb-fill{
  background:linear-gradient(90deg,#FF9A1F,#FF6A00) !important;
  border-radius:999px !important;
}
.sb-pct{
  color:#C2410C !important;
  font-size:12px !important;
  font-weight:900 !important;
}
.sb-cta{
  background:linear-gradient(135deg,#FF6A00,#FF8A2C) !important;
  color:#fff !important;
  border:none !important;
  padding:8px 16px !important;
  border-radius:999px !important;
  font-size:12px !important;
  font-weight:900 !important;
  box-shadow:0 6px 14px rgba(255,106,0,.18) !important;
}
.sb-cta:hover{
  background:linear-gradient(135deg,#E85B00,#FF8A2C) !important;
}

/* Mobile strip cleanup */
@media(max-width:768px){
  .streak-inner{
    align-items:flex-start !important;
    gap:10px !important;
  }
  .streak-left{
    width:100% !important;
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
  }
  .streak-actions{
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:6px !important;
  }
  .streak-btn,
  .streak-claim-btn{
    width:100% !important;
    justify-content:center !important;
    padding:0 8px !important;
    font-size:11px !important;
  }
  .sd{
    width:24px !important;
    height:24px !important;
    font-size:8px !important;
  }
  .sb-inner{
    display:grid !important;
    grid-template-columns:auto 1fr auto !important;
    align-items:center !important;
    gap:8px !important;
  }
  .sb-txt{
    font-size:12px !important;
    line-height:1.35 !important;
  }
  .sb-bar{
    grid-column:1 / -1 !important;
    max-width:none !important;
    width:100% !important;
  }
  .sb-pct{
    justify-self:end !important;
  }
  .sb-cta{
    padding:7px 12px !important;
    font-size:11px !important;
  }
}


/* =========================================================
   ChinaHub Header + Streak + Ship Pro Cleanup
   ========================================================= */

/* Bigger logo */
.ch-logo img{
  height:48px !important;
  max-height:48px !important;
  width:auto !important;
  object-fit:contain !important;
}
@media(max-width:768px){
  .ch-logo img{
    height:40px !important;
    max-height:40px !important;
  }
}

/* Header spacing */
.ch-header{
  margin-bottom:6px !important;
}
.ch-cat-nav{
  margin-bottom:8px !important;
}

/* Streak bar cleaner */
#ae-streak-bar{
  padding:8px 0 !important;
  background:linear-gradient(90deg,#2a1808,#5b2f08,#7a4308,#2a1808) !important;
}
.streak-inner{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
}
.streak-left{
  flex:1 1 380px !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}
.streak-txt{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  font-size:13px !important;
}
.streak-live{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  padding:4px 10px !important;
  border-radius:999px !important;
}
.streak-days{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  flex-wrap:nowrap !important;
}
.sd{
  width:26px !important;
  height:26px !important;
  border-radius:8px !important;
}
.sd .sdn{
  font-size:11px !important;
}
.streak-actions{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  flex-wrap:wrap !important;
}
.streak-btn,
.streak-claim-btn{
  min-width:auto !important;
  height:34px !important;
  padding:0 14px !important;
  border-radius:999px !important;
  font-size:12px !important;
  font-weight:900 !important;
}
.streak-btn{
  background:#fff3ea !important;
  color:#ff6a00 !important;
  border:1px solid #ffd8bf !important;
}
.streak-btn:hover{
  background:#ffe7d7 !important;
  color:#e85b00 !important;
}
.streak-claim-btn{
  background:linear-gradient(135deg,#ff6a00,#ff8c00) !important;
  color:#fff !important;
  box-shadow:0 6px 16px rgba(255,106,0,.20) !important;
}
.streak-claim-btn:hover{
  background:linear-gradient(135deg,#e85b00,#ff7a00) !important;
}

/* Free shipping strip cleaner */
#ae-ship-bar{
  background:linear-gradient(90deg,#fff5ee,#fff9f5) !important;
  border-top:1px solid #ffe1cf !important;
  border-bottom:1px solid #ffe1cf !important;
  padding:8px 0 !important;
  margin-top:6px !important;
  box-shadow:none !important;
}
.sb-inner{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
}
.sb-ico{
  font-size:20px !important;
  flex-shrink:0 !important;
}
.sb-txt{
  font-size:13px !important;
  font-weight:900 !important;
  color:#8a3b0f !important;
  max-width:none !important;
}
.sb-txt em{
  color:#ff6a00 !important;
}
.sb-bar{
  flex:1 !important;
  max-width:260px !important;
  height:8px !important;
  background:#ffe6d6 !important;
  border-radius:999px !important;
}
.sb-fill{
  background:linear-gradient(90deg,#ff9a1f,#ff6a00) !important;
}
.sb-pct{
  font-size:12px !important;
  font-weight:900 !important;
  color:#c2570c !important;
}
.sb-cta{
  background:linear-gradient(135deg,#ff6a00,#ff8c00) !important;
  color:#fff !important;
  border:none !important;
  border-radius:999px !important;
  padding:8px 16px !important;
  box-shadow:0 6px 14px rgba(255,106,0,.18) !important;
}
.sb-cta:hover{
  background:linear-gradient(135deg,#e85b00,#ff7a00) !important;
}

/* Icon category pills cleaner */
.cat-item{
  min-width:72px !important;
  max-width:72px !important;
  gap:7px !important;
}
.cat-icon{
  width:56px !important;
  height:56px !important;
  border-radius:16px !important;
  box-shadow:0 2px 8px rgba(0,0,0,.05) !important;
  transition:all .2s ease !important;
}
.cat-item:hover .cat-icon{
  transform:translateY(-2px) !important;
  box-shadow:0 8px 18px rgba(255,106,0,.16) !important;
}
.cat-lbl,
.cat-name{
  font-size:11px !important;
  font-weight:800 !important;
}

/* Flash sale slightly cleaner */
.ch-flash,
.flash-wrap{
  background:linear-gradient(90deg,#ff7a00,#ff9a1f) !important;
}
.flash-hd,
.ch-flash-head{
  background:transparent !important;
}
.flash-ttl,
.ch-flash-title{
  font-size:19px !important;
}

/* Mobile cleanup */
@media(max-width:768px){
  .streak-left{
    flex:1 1 100% !important;
  }
  .streak-days{
    order:3 !important;
    width:100% !important;
    justify-content:center !important;
  }
  .streak-actions{
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:6px !important;
  }
  .streak-btn,
  .streak-claim-btn{
    width:100% !important;
    justify-content:center !important;
    font-size:11px !important;
    padding:0 8px !important;
  }
  .sb-inner{
    display:grid !important;
    grid-template-columns:auto 1fr auto !important;
    gap:8px !important;
    align-items:center !important;
  }
  .sb-bar{
    grid-column:1 / -1 !important;
    max-width:none !important;
    width:100% !important;
  }
  .cat-item{
    min-width:66px !important;
    max-width:66px !important;
  }
  .cat-icon{
    width:52px !important;
    height:52px !important;
    border-radius:14px !important;
  }
}


/* ════════════════════════════════════════════════════════════════
   ORANGE PRO MAX — Luxury Temu Override
════════════════════════════════════════════════════════════════ */
:root{
  --pro-1:#FF6A00;
  --pro-2:#FF9A3C;
  --pro-3:#CC2200;
  --pro-4:#F6B35A;
  --pro-5:#FFF4E8;
  --pro-shadow:0 12px 38px rgba(255,106,0,.28);
}
.ch-btn-primary,.ch-add-to-cart-btn,.ch-buy-now-btn,.pc-atc,.ch-search-btn,.ch-cart-action,.flash-all-btn{
  background:linear-gradient(135deg,var(--pro-1),var(--pro-2))!important;
  color:#fff!important;
  box-shadow:var(--pro-shadow)!important;
}
.ch-btn-primary:hover,.ch-add-to-cart-btn:hover,.ch-buy-now-btn:hover,.pc-atc:hover,.ch-search-btn:hover,.ch-cart-action:hover,.flash-all-btn:hover{
  background:linear-gradient(135deg,var(--pro-3),var(--pro-1))!important;
  color:#fff!important;
}
.ch-flash,.flash-wrap,.hero{
  box-shadow:0 16px 50px rgba(255,106,0,.22)!important;
}
.ch-flash,.flash-wrap{
  background:linear-gradient(140deg,#140700 0%,#432000 38%,#CC2200 72%,#FF6A00 100%)!important;
}
.ch-card,.pc,.flash-card,.ch-mini-banner,.ch-trust-strip{
  border-radius:18px!important;
}
.ch-card:hover,.pc:hover,.flash-card:hover{
  transform:translateY(-4px)!important;
  box-shadow:0 16px 36px rgba(0,0,0,.12),0 10px 28px rgba(255,106,0,.16)!important;
}
.ch-badge-sale,.pcb-fire,.pcb-sale,.pc-disc-pct,.ch-badge-dot,.flash-disc{
  background:linear-gradient(135deg,var(--pro-1),var(--pro-2))!important;
  color:#fff!important;
}
.pc-save-lbl{
  background:var(--pro-5)!important;
  color:var(--pro-1)!important;
  border-color:rgba(255,106,0,.22)!important;
}
.pc-sbar,.ch-flash-bar{background:#F6E0CB!important}
.pc-sbar-fill,.ch-flash-fill{background:linear-gradient(90deg,var(--pro-2),var(--pro-1))!important}
.ch-sec-title::before,.ch-page-title,.ch-cat-nav-list li a:hover,.ch-cat-nav-all,.ch-sec-link,.ch-header-action:hover,.ch-mob-nav-btn.active,.ch-mob-nav-btn:hover{
  color:var(--pro-1)!important;
  border-color:var(--pro-1)!important;
}


/* =========================================================
   ChinaHub Marketplace Flip v1
   Alibaba + AliExpress + Temu inspired master override
   ========================================================= */
:root{
  --pr:#ff6a00 !important;
  --pr-d:#e85b00 !important;
  --pr-l:#ff9b52 !important;
  --pr-bg:rgba(255,106,0,.08) !important;
  --pr-shadow:0 8px 28px rgba(255,106,0,.26) !important;
  --primary:#ff6a00 !important;
  --primary-d:#e85b00 !important;
  --primary-bg:rgba(255,106,0,.08) !important;
  --orange:#ff7a1a !important;
  --red:#ff6a00 !important;
  --red-d:#e85b00 !important;
  --bg:#f7f7f9 !important;
  --bg2:#f3f4f7 !important;
  --surface:#ffffff !important;
  --card:#ffffff !important;
  --border:#ececf1 !important;
  --bdr:#ececf1 !important;
  --bdr2:#f3f4f7 !important;
  --t1:#1f2329 !important;
  --t2:#5f6673 !important;
  --t3:#9ca3af !important;
  --text:#1f2329 !important;
  --text2:#5f6673 !important;
  --text3:#9ca3af !important;
}
html,body{background:#f7f7f9 !important;color:#1f2329 !important}

.ch-topbar{background:#1f2329 !important;color:#cfd3da !important}
.ch-topbar-link{color:#cfd3da !important}
.ch-topbar-link:hover{color:#fff !important}
.ch-header,.ch-cat-nav,.ch-mobile-bottom-nav,.ch-trust-strip,.cats-section,.ch-sec,.ch-card,.pc,.flash-card,.ch-flash-card,.cat-icon,.ch-quick-cat-icon,.ti,.brand-item{background:#fff !important}
.ch-header{box-shadow:0 1px 0 #ececf1,0 12px 28px rgba(17,24,39,.06)!important}
.ch-cat-nav{border-top:1px solid #f0f1f4 !important;border-bottom:1px solid #ececf1 !important}
.ch-cat-nav-list li a,.ch-mob-nav-btn,.ch-header-action{color:#5f6673 !important}
.ch-cat-nav-list li a:hover,.ch-header-action:hover,.ch-mob-nav-btn.active,.ch-mob-nav-btn:hover{color:#ff6a00 !important}
.ch-mob-nav-center{background:linear-gradient(135deg,#ff6a00,#ff8a1f)!important;box-shadow:0 10px 26px rgba(255,106,0,.34)!important}

.ch-search-wrap,.hero-search{border:2px solid #ff6a00 !important;box-shadow:0 10px 24px rgba(255,106,0,.08)!important}
.ch-search-btn,.hero-search button,.cta-main,.ch-btn-primary,.ch-add-to-cart-btn,.pc-atc,.sb-cta,.streak-claim-btn,.flash-more,.ch-cart-action{
  background:linear-gradient(135deg,#ff6a00,#ff8a1f)!important;
  color:#fff !important;
  box-shadow:0 10px 24px rgba(255,106,0,.24)!important;
}
.ch-search-btn:hover,.hero-search button:hover,.cta-main:hover,.ch-btn-primary:hover,.ch-add-to-cart-btn:hover,.pc-atc:hover,.sb-cta:hover,.streak-claim-btn:hover,.flash-more:hover,.ch-cart-action:hover{
  background:linear-gradient(135deg,#e85b00,#ff6a00)!important;
  color:#fff !important;
}
.ch-btn-outline,.cta-sec,.ch-buy-now-btn{border-color:#ff6a00 !important;color:#ff6a00 !important;background:#fff !important}
.ch-btn-outline:hover,.cta-sec:hover,.ch-buy-now-btn:hover{background:#fff2e8 !important;color:#e85b00 !important}

/* Hero and major promo strips */
.hero,.ch-hero,.ch-hero-wrap{
  background:linear-gradient(135deg,#ff5a1f 0%,#ff6a00 42%,#ff8a1f 72%,#ffb347 100%) !important;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.15) !important;
}
.hero::before,.hero-bg-overlay,.ch-hero-wrap::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.18),transparent 30%),radial-gradient(circle at 85% 20%,rgba(255,255,255,.14),transparent 25%),linear-gradient(120deg,rgba(255,255,255,.10),transparent 35%,transparent 65%,rgba(255,255,255,.10));
  pointer-events:none;
}
.hero-h1,.hero-title,.ch-hero-title,.hero-sub,.ch-hero-sub,.hero-pill,.hero-badge,.ch-hero-eyebrow,.hero-micro-trust span,.vp-title,.vp-sub,.ch-htag,.ch-hero-cta2{color:#fff !important}
.hero-h1 span,.ch-hero-title span{background:none !important;-webkit-text-fill-color:#fff !important;color:#fff !important;filter:none !important}
.vp,.hero-micro-trust span,.hero-pill,.hero-badge,.ch-htag,.ch-hero-cta2{background:rgba(255,255,255,.16)!important;border:1px solid rgba(255,255,255,.26)!important}
.cta-main,.ch-hero-cta{background:#fff !important;color:#ff6a00 !important;box-shadow:0 16px 40px rgba(93,38,0,.18)!important}
.cta-main:hover,.ch-hero-cta:hover{background:#fff7f1 !important;color:#e85b00 !important}
.cta-sec,.ch-hero-cta2{background:rgba(255,255,255,.18)!important;color:#fff !important;border:1px solid rgba(255,255,255,.26)!important}

.ann-bar{background:linear-gradient(90deg,#1f2329,#2c313a)!important;border-bottom:none!important}
.ann-right{background:linear-gradient(90deg,transparent,#1f2329 22%)!important}
#ae-streak-bar{background:linear-gradient(90deg,#fff5ed,#fff0e5)!important;box-shadow:none!important;border-top:1px solid #ffe2cf!important;border-bottom:1px solid #ffe2cf!important}
.streak-txt,.streak-txt em,.streak-btn{color:#CC2200 !important}
.streak-btn{background:#fff !important;border:1px solid #ffd3b2 !important}
.streak-btn:hover{background:#fff3e8 !important}
.sd{background:#fff !important;border:1px solid #ffe2cf !important;color:#a16207 !important}
.sd.done{background:linear-gradient(135deg,#ff6a00,#ff8a1f)!important;border-color:#ff9b52!important;color:#fff!important}
.sd.today{background:#fff7f1!important;border-color:#ffb37a!important;color:#ff6a00!important}

.ticker-wrap,#ae-ship-bar{background:#fff7f1 !important;border-bottom:1px solid #ffe2cf !important}
#ae-ship-bar{border-top:1px solid #ffe2cf !important}
.tick-prod,.sb-txt em,.sb-pct,.flash-now,.ch-flash-price-now,.pc-price-now,.cp-now,.ch-card-price-current,.ch-flash-price-now{color:#ff6a00 !important}
.sb-bar,.pc-sbar,.ch-flash-bar{background:#ffe2cf !important}
.sb-fill,.pc-sbar-fill,.ch-flash-fill,.ch-flash-bar-fill{background:linear-gradient(90deg,#ff9b52,#ff6a00)!important}

/* Product cards */
.pc,.ch-card,.flash-card,.ch-flash-card{
  border:1px solid #ececf1 !important;
  border-radius:18px !important;
  box-shadow:0 4px 14px rgba(17,24,39,.06)!important;
}
.pc:hover,.ch-card:hover,.flash-card:hover,.ch-flash-card:hover{transform:translateY(-4px)!important;box-shadow:0 14px 30px rgba(17,24,39,.10)!important;border-color:#ffd3b2!important}
.pc-img-wrap,.ch-card-img,.flash-img,.ch-flash-img{background:#f7f7f9 !important}
.pc-body,.ch-card-body,.flash-info,.ch-flash-info{padding:12px !important}
.pc-name,.ch-card-name,.ch-card-title,.flash-name,.ch-flash-name{color:#1f2329 !important;font-weight:600!important}
.pc-name:hover,.ch-card-name:hover,.ch-card-title:hover{color:#ff6a00 !important}
.pc-price-was,.cp-old,.ch-flash-price-old,del.ch-flash-price-old{color:#a3a8b3!important}
.pc-disc-pct,.cp-pct,.pcb-fire,.ch-badge-sale,.flash-disc,.ch-flash-disc,.ch-flash-discount,.discount-badge{
  background:linear-gradient(135deg,#ff6a00,#ff8a1f)!important;color:#fff!important;border:none!important;box-shadow:0 8px 18px rgba(255,106,0,.22)!important
}
.pcb-hot,.pcb-best,.pcb-new,.ch-badge-best,.ch-badge-new,.ch-badge-trend,.flash-badge-hot,.ch-flash-hot-badge{background:#fff3e8!important;color:#ff6a00!important;border:1px solid #ffd3b2!important}
.pc-save-lbl{background:#fff3e8!important;color:#ff6a00!important;border:1px solid #ffd3b2!important}
.pcb-urg-red,.pcb-urg-ora,.pcb-urg-hot{background:#fff7f1!important;color:#b45309!important;border:1px solid #ffd9c2!important;animation:none!important}
.pc-gtrust,.ch-rv,.ch-rc,.ch-rev-count,.flash-sub,.ch-flash-ends,.ch-flash-sold,.tick-item,.sb-txt,.cat-name,.ch-quick-cat-name,.ti-sub{color:#6b7280!important}
.sf,.sh,i.st-f,i.st-h{color:#ffb800!important}
.se,i.st-e{color:#e5e7eb!important}

.grid6,.ch-grid,.ch-grid-5,.ch-grid-6,.flash-grid,.ch-flash-grid{gap:14px !important}
.cats-scroll,.ch-quick-cats-scroll,.brand-track{gap:12px!important}
.cat-item,.ch-quick-cat{padding-bottom:4px!important}
.cat-icon,.ch-quick-cat-icon{border:1px solid #ececf1!important;box-shadow:0 4px 14px rgba(17,24,39,.05)!important}
.cat-item:hover .cat-icon,.ch-quick-cat:hover .ch-quick-cat-icon{border-color:#ffb37a!important;box-shadow:0 10px 20px rgba(255,106,0,.12)!important}
.cat-all .cat-icon,.ch-qcat-all{background:linear-gradient(135deg,#ff6a00,#ff8a1f)!important;color:#fff!important;border:none!important}

.flash-wrap,.ch-flash{background:linear-gradient(135deg,#fff7f1 0%,#fff2e8 100%)!important;border:1px solid #ffd9c2!important;box-shadow:0 12px 30px rgba(255,106,0,.10)!important}
.flash-hd,.ch-flash-head{border-bottom:1px solid #ffe2cf!important}
.flash-ttl,.flash-hd h2,.ch-flash-title{color:#1f2329!important}
.flash-sub,.ch-flash-ends{color:#9ca3af!important}
.flash-card,.ch-flash-card{background:#fff!important;border:1px solid #ececf1!important}
.flash-cd span:not(.flash-cd-sep),.ch-cdn{background:#1f2329!important;color:#fff!important}
.flash-cd-sep{color:#9ca3af!important}

.brand-strip,.ch-trust-ticker,.trust-bar,.ticker-wrap,.cats-section,.page-bg{background:#f7f7f9!important}
.brand-item,.ti,.ch-trust-strip,.ch-mini-banner,.ch-sec,.prd-tabs,.rev-card,.why-card,.stat-card,.cta-box{border:1px solid #ececf1!important;box-shadow:0 4px 14px rgba(17,24,39,.05)!important;border-radius:18px!important}
.sec-title,.ch-sec-title,.ch-section-title,.prd-tab-btn.active,.tick-name,.ti-title,.rev-name,.why-title,.stat-num,.cta-box h2{color:#1f2329!important}
.ch-sec-title::before,.ch-section-title::before{background:#ff6a00!important}
.sec-va,.prd-view-all,.ch-sec-link{background:#fff3e8!important;color:#ff6a00!important;border:1px solid #ffd3b2!important}

/* Reduce over-dark areas */
body,.page-bg,.ch-page{background:#f7f7f9!important}
[class*="dark"],.bg-dark{background-color:inherit!important}

@media(max-width:768px){
  .hero,.ch-hero,.ch-hero-wrap{border-radius:0!important}
  .grid6,.ch-grid,.flash-grid,.ch-flash-grid{gap:10px!important}
  .pc,.ch-card,.flash-card,.ch-flash-card{border-radius:14px!important}
}


/* ════════════════════════════════════════════════════════════════
   ADDITIONS v2.7 — Performance + UX
════════════════════════════════════════════════════════════════ */

/* Lazy-load image fade-in — scoped to product cards only */
.pcd-img img[loading="lazy"],
.pcd-mini-img img[loading="lazy"],
.pl-compact-img img[loading="lazy"] { opacity:0; transition:opacity .35s ease }
.pcd-img img[loading="lazy"].loaded,
.pcd-mini-img img[loading="lazy"].loaded,
.pl-compact-img img[loading="lazy"].loaded { opacity:1 }

/* Aspect-ratio placeholder prevents layout shift before image loads */
.img-ar-1x1 { aspect-ratio:1/1; background:var(--bdr2); overflow:hidden }
.img-ar-4x3 { aspect-ratio:4/3; background:var(--bdr2); overflow:hidden }
.img-ar-16x9{ aspect-ratio:16/9;background:var(--bdr2); overflow:hidden }

/* Focus ring — accessibility */
:focus-visible { outline:2.5px solid var(--pr); outline-offset:2px; border-radius:4px }

/* Print: hide nav/footer/widgets */
@media print {
  .ch-header,.ch-mobile-bottom-nav,.ch-topbar,
  #ae-streak-bar,#ae-ship-bar,.ch-footer-bottom,
  .pc-atc,.flash-all-btn { display:none!important }
  body { background:#fff!important; color:#000!important }
  .pc { break-inside:avoid }
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important }
}

/* High contrast mode */
@media(prefers-contrast:high) {
  :root { --pr:#B35500; --t3:#555 }
  .pc { border-color:#000!important }
}

/* Force GPU acceleration on animated elements */
.brand-track,.ann-track,.ticker-track { will-change:transform }
.pc { will-change:transform }
.ch-hero-slider-track { will-change:transform }

/* Scroll snap for flash items on mobile */
@media(max-width:768px) {
  .flash-items { scroll-snap-type:x mandatory }
  .fi { scroll-snap-align:start }
}

/* Text selection color */
::selection { background:rgba(255,106,0,.22); color:var(--t1) }


/* ===== Live Free Shipping Bar Enhancements ===== */
#ch-ship-announce{
  transition:background .28s ease, box-shadow .28s ease, border-color .28s ease, transform .28s ease;
}
#ch-ship-announce.sa-live{
  background:linear-gradient(180deg,#FFFFFF 0%,#F6FFF7 100%);
  box-shadow:0 8px 24px rgba(46,125,50,.08);
}
#ch-ship-announce.sb-done{
  background:linear-gradient(90deg,#1B5E20 0%,#2E7D32 100%);
  border-bottom-color:#1B5E20;
  box-shadow:0 10px 28px rgba(27,94,32,.24);
}
#ch-ship-announce.sa-bump{animation:saBump .35s ease}
@keyframes saBump{0%{transform:translateY(0)}35%{transform:translateY(1px) scale(1.008)}100%{transform:translateY(0) scale(1)}}
#ch-ship-announce .sa-copy{min-width:0;flex:1}
#ch-ship-announce .sa-left{min-width:0;flex:1}
#ch-ship-announce .sa-meta{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:5px;
  min-width:0;
}
#ch-ship-announce .sa-status{
  font-size:11px;
  font-weight:800;
  color:#4D7C57;
  white-space:nowrap;
  flex-shrink:0;
}
#ch-ship-announce .sa-progress{
  height:7px;
  flex:1;
  min-width:110px;
  max-width:260px;
  background:#DDEFE0;
  border-radius:999px;
  overflow:hidden;
  position:relative;
}
#ch-ship-announce .sa-progress-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#FF8A00 0%,#43A047 85%,#2E7D32 100%);
  border-radius:999px;
  transition:width .45s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 16px rgba(67,160,71,.22);
}
#ch-ship-announce .sa-percent{
  font-size:11px;
  font-weight:900;
  color:#2E7D32;
  min-width:34px;
  text-align:end;
  flex-shrink:0;
}
#ch-ship-announce.sb-done .sa-msg,
#ch-ship-announce.sb-done .sa-msg em,
#ch-ship-announce.sb-done .sa-status,
#ch-ship-announce.sb-done .sa-percent{
  color:#fff;
}
#ch-ship-announce.sb-done .sa-progress{background:rgba(255,255,255,.24)}
#ch-ship-announce.sb-done .sa-progress-fill{background:linear-gradient(90deg,#C8FACC 0%,#FFFFFF 100%)}
@media(max-width:640px){
  #ch-ship-announce .sa-meta{
    gap:7px;
    flex-wrap:wrap;
  }
  #ch-ship-announce .sa-status{
    font-size:10px;
    white-space:normal;
  }
  #ch-ship-announce .sa-progress{
    min-width:90px;
    max-width:none;
  }
}


/* === FINAL HOMEPAGE FIXES v9 === */
#ae-cart-prog,
#ae-savings-hud,
#ae-confetti,
#ae-mystery-btn,
#ae-coins-hud,
#ae-coins-popup,
#ae-mystery-ov{
  display:none !important;
}

.sec-notice-line{
  margin-top:6px;
  font-size:12px;
  font-weight:800;
  color:#FF6A00;
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:rgba(255,106,0,.10);
  border:1px solid rgba(255,106,0,.18);
  padding:5px 10px;
  border-radius:999px;
}
.sec-notice-line::before{
  content:'';
  width:7px;height:7px;border-radius:50%;
  background:#FF6A00;
  box-shadow:0 0 0 0 rgba(255,106,0,.45);
  animation:secPulse 1.6s infinite;
}
@keyframes secPulse{
  0%{box-shadow:0 0 0 0 rgba(255,106,0,.45)}
  70%{box-shadow:0 0 0 8px rgba(255,106,0,0)}
  100%{box-shadow:0 0 0 0 rgba(255,106,0,0)}
}

/* keep 10 cards only in homepage sections */
.sec-body .pc:nth-child(n+11){
  display:none !important;
}

/* premium non-purchase notification */
#lnotif{
  display:none;
  position:fixed;
  left:18px;
  bottom:22px;
  z-index:1400;
  max-width:420px;
  width:min(92vw,420px);
  opacity:1;
  transform:translateY(0);
  transition:opacity .32s ease,transform .32s ease;
}
#lnotif.hide{opacity:0;transform:translateY(14px)}
.lnc{
  --lnc1:#FF6A00;
  --lnc2:#FF9A3C;
  --lncSoft:rgba(255,106,0,.12);
  --lncEdge:rgba(255,106,0,.24);
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#fff 0%,#fffaf6 100%);
  border:1px solid var(--lncEdge);
  border-radius:24px;
  box-shadow:0 18px 60px rgba(15,23,42,.18),0 10px 28px rgba(255,106,0,.12);
  padding:14px;
  backdrop-filter:blur(8px);
}
.lnc:before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.76),transparent 34%,transparent 70%,rgba(255,255,255,.35));
  pointer-events:none;
}
.lnc-glow{
  position:absolute;
  width:180px;
  height:180px;
  border-radius:50%;
  right:-58px;
  top:-72px;
  background:radial-gradient(circle,var(--lncSoft) 0%,rgba(255,255,255,0) 70%);
  pointer-events:none;
}
.lnc-head{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.lnc-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:30px;
  padding:0 12px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--lnc1),var(--lnc2));
  color:#fff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.9px;
  box-shadow:0 8px 18px rgba(255,106,0,.22);
}
.lnc-pulse{
  width:8px;height:8px;border-radius:50%;background:#fff;display:inline-block;
  box-shadow:0 0 0 0 rgba(255,255,255,.45);
  animation:lncPulse 1.7s infinite;
}
@keyframes lncPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}70%{box-shadow:0 0 0 8px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.lnc-meta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:800;
  color:#8a6548;
  background:#fff;
  border:1px solid rgba(15,23,42,.06);
  border-radius:999px;
  height:30px;
  padding:0 11px;
  box-shadow:0 4px 12px rgba(15,23,42,.04);
}
.lnc-main{
  position:relative;
  display:grid;
  grid-template-columns:62px 1fr;
  gap:12px;
  align-items:center;
}
.lnc-ico-wrap{
  width:62px;
  height:62px;
  border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.72));
  border:1px solid rgba(255,255,255,.88);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 10px 20px rgba(15,23,42,.07);
  display:flex;
  align-items:center;
  justify-content:center;
}
.lnc-ico{
  width:48px;
  height:48px;
  border-radius:16px;
  background:linear-gradient(135deg,var(--lnc1),var(--lnc2));
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  box-shadow:0 12px 22px rgba(255,106,0,.24);
}
.lnc-copy{min-width:0}
.lnc-title-row{display:flex;align-items:center;gap:8px}
.lnc-title{
  font-size:18px;
  font-weight:950;
  color:#18212f;
  line-height:1.05;
  letter-spacing:-.35px;
}
.lnc-sub{
  font-size:12.5px;
  color:#667085;
  line-height:1.55;
  margin-top:6px;
}
.lnc-chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.lnc-chips span{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:0 10px;
  border-radius:999px;
  background:var(--lncSoft);
  color:#9a5a20;
  font-size:10.5px;
  font-weight:800;
  border:1px solid rgba(255,106,0,.08);
}
.lnc-progress{
  position:relative;
  margin-top:13px;
  height:5px;
  background:#f4e7dc;
  border-radius:999px;
  overflow:hidden;
}
.lnc-progress span{
  display:block;
  height:100%;
  width:100%;
  background:linear-gradient(90deg,var(--lnc1),var(--lnc2));
  transform-origin:left center;
  animation:lncBar 4.3s linear forwards;
}
@keyframes lncBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.lnc.is-live{--lnc1:#FF6A00;--lnc2:#FF9A3C;--lncSoft:rgba(255,106,0,.12);--lncEdge:rgba(255,106,0,.22)}
.lnc.is-hot{--lnc1:#7C3AED;--lnc2:#A855F7;--lncSoft:rgba(124,58,237,.11);--lncEdge:rgba(124,58,237,.20)}
.lnc.is-save{--lnc1:#059669;--lnc2:#10B981;--lncSoft:rgba(5,150,105,.10);--lncEdge:rgba(5,150,105,.18)}
.lnc.is-limit{--lnc1:#F97316;--lnc2:#FB923C;--lncSoft:rgba(249,115,22,.11);--lncEdge:rgba(249,115,22,.22)}
@media (max-width:768px){
  #lnotif{
    left:12px;
    bottom:84px;
    width:min(92vw,360px);
  }
  .lnc{padding:12px;border-radius:21px}
  .lnc-main{grid-template-columns:56px 1fr;gap:10px}
  .lnc-ico-wrap{width:56px;height:56px;border-radius:18px}
  .lnc-ico{width:42px;height:42px;border-radius:14px;font-size:21px}
  .lnc-title{font-size:16px}
  .lnc-sub{font-size:11.5px;margin-top:5px}
  .lnc-chips span{font-size:10px;min-height:24px;padding:0 9px}
}
/* single orange scroll-top */
#sctop{
  left:auto !important;
  right:16px !important;
  bottom:20px !important;
  background:linear-gradient(135deg,#FF6A00,#FF9A3C) !important;
  box-shadow:0 10px 28px rgba(255,106,0,.34) !important;
  color:#fff !important;
  border:none !important;
  display:flex;
}
#sctop:hover{
  box-shadow:0 14px 30px rgba(255,106,0,.42) !important;
}
@media (max-width:768px){
  #lnotif{
    left:12px;
    bottom:84px;
    width:min(90vw,340px);
  }
  .lnc{border-radius:18px;padding:11px 12px}
  .lnc-title{font-size:14px}
  .lnc-sub{font-size:11.5px}
  #sctop{
    right:12px !important;
    bottom:84px !important;
  }
}


/* ===== FINAL PRODUCT COLLECTIONS + TEMU NOTICE FIX ===== */
.sec-hd{
  align-items:flex-start !important;
}
.sec-hd-left{
  min-width:0;
}
.sec-title{
  font-size:22px !important;
  font-weight:950 !important;
  color:#161616 !important;
  letter-spacing:-.35px !important;
  line-height:1.08 !important;
}
.sec-notice-line{
  margin-top:10px !important;
  font-size:13px !important;
  font-weight:900 !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  min-height:38px !important;
  padding:0 14px !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,#fff3e8,#ffe0c2) !important;
  border:1px solid #ffc78f !important;
  color:#e36a00 !important;
  box-shadow:0 8px 22px rgba(255,106,0,.10) !important;
}
.sec-notice-line::before{
  content:'';
  width:8px !important;
  height:8px !important;
  border-radius:50% !important;
  background:#ff7a00 !important;
  box-shadow:0 0 0 0 rgba(255,122,0,.35) !important;
  animation:secPulseStrong 1.8s infinite !important;
}
.sec-notice-line.is-hot{
  background:linear-gradient(135deg,#f5ebff,#ead9ff) !important;
  border-color:#cfadff !important;
  color:#7c3aed !important;
  box-shadow:0 8px 22px rgba(124,58,237,.10) !important;
}
.sec-notice-line.is-hot::before{
  background:#8b5cf6 !important;
  box-shadow:0 0 0 0 rgba(139,92,246,.35) !important;
}
.sec-notice-line.is-super{
  background:linear-gradient(135deg,#eafbf3,#d8f7e7) !important;
  border-color:#9fe0bd !important;
  color:#0f9d62 !important;
  box-shadow:0 8px 22px rgba(15,157,98,.10) !important;
}
.sec-notice-line.is-super::before{
  background:#10b981 !important;
  box-shadow:0 0 0 0 rgba(16,185,129,.35) !important;
}
@keyframes secPulseStrong{
  0%{box-shadow:0 0 0 0 currentColor}
  70%{box-shadow:0 0 0 9px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}

#lnotif{
  display:block !important;
  position:fixed !important;
  left:20px !important;
  bottom:20px !important;
  z-index:2000 !important;
  width:min(92vw,430px) !important;
  max-width:430px !important;
}
#lnotif .lnc{
  position:relative !important;
  overflow:hidden !important;
  border-radius:26px !important;
  padding:16px !important;
  background:linear-gradient(180deg,#ffffff 0%,#fff8f2 100%) !important;
  border:1px solid rgba(255,145,58,.26) !important;
  box-shadow:0 18px 60px rgba(15,23,42,.16),0 12px 28px rgba(255,106,0,.12) !important;
}
#lnotif .lnc::after{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(135deg,rgba(255,255,255,.80),transparent 35%,transparent 68%,rgba(255,255,255,.36)) !important;
  pointer-events:none !important;
}
#lnotif .lnc-glow{
  position:absolute !important;
  right:-48px !important;
  top:-58px !important;
  width:180px !important;
  height:180px !important;
  border-radius:50% !important;
  background:radial-gradient(circle,rgba(255,106,0,.12) 0%,rgba(255,255,255,0) 72%) !important;
}
#lnotif .lnc-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  margin-bottom:12px !important;
}
#lnotif .lnc-pill{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  min-height:31px !important;
  padding:0 12px !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,#ff6a00,#ff9a3c) !important;
  color:#fff !important;
  font-size:10px !important;
  font-weight:950 !important;
  letter-spacing:.9px !important;
  box-shadow:0 8px 18px rgba(255,106,0,.22) !important;
}
#lnotif .lnc-meta{
  display:inline-flex !important;
  align-items:center !important;
  min-height:31px !important;
  padding:0 12px !important;
  border-radius:999px !important;
  background:#fff !important;
  border:1px solid rgba(15,23,42,.06) !important;
  color:#7b6856 !important;
  font-size:11px !important;
  font-weight:900 !important;
  box-shadow:0 4px 12px rgba(15,23,42,.04) !important;
}
#lnotif .lnc-main{
  display:grid !important;
  grid-template-columns:64px 1fr !important;
  gap:12px !important;
  align-items:center !important;
}
#lnotif .lnc-ico-wrap{
  width:64px !important;
  height:64px !important;
  border-radius:20px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.74)) !important;
  border:1px solid rgba(255,255,255,.90) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 10px 20px rgba(15,23,42,.08) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#lnotif .lnc-ico{
  width:48px !important;
  height:48px !important;
  border-radius:16px !important;
  background:linear-gradient(135deg,#ff6a00,#ff9a3c) !important;
  color:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:24px !important;
  box-shadow:0 12px 22px rgba(255,106,0,.24) !important;
}
#lnotif .lnc-title{
  font-size:18px !important;
  font-weight:950 !important;
  color:#1a2230 !important;
  line-height:1.06 !important;
  letter-spacing:-.35px !important;
}
#lnotif .lnc-sub{
  margin-top:6px !important;
  font-size:12.5px !important;
  color:#697586 !important;
  line-height:1.55 !important;
}
#lnotif .lnc-chips{
  display:flex !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  margin-top:10px !important;
}
#lnotif .lnc-chips span{
  display:inline-flex !important;
  align-items:center !important;
  min-height:26px !important;
  padding:0 10px !important;
  border-radius:999px !important;
  background:rgba(255,106,0,.10) !important;
  color:#9a5a20 !important;
  border:1px solid rgba(255,106,0,.10) !important;
  font-size:10.5px !important;
  font-weight:900 !important;
}
#lnotif .lnc-progress{
  margin-top:13px !important;
  height:5px !important;
  border-radius:999px !important;
  overflow:hidden !important;
  background:#f4e7dc !important;
}
#lnotif .lnc-progress span{
  display:block !important;
  width:100% !important;
  height:100% !important;
  background:linear-gradient(90deg,#ff6a00,#ff9a3c) !important;
}

#lnotif .lnc.is-hot{
  background:linear-gradient(180deg,#ffffff 0%,#fbf7ff 100%) !important;
  border-color:rgba(124,58,237,.22) !important;
  box-shadow:0 18px 60px rgba(15,23,42,.16),0 12px 28px rgba(124,58,237,.10) !important;
}
#lnotif .lnc.is-hot .lnc-pill,
#lnotif .lnc.is-hot .lnc-ico,
#lnotif .lnc.is-hot .lnc-progress span{
  background:linear-gradient(135deg,#7c3aed,#a855f7) !important;
}
#lnotif .lnc.is-hot .lnc-chips span{
  background:rgba(124,58,237,.10) !important;
  color:#6d28d9 !important;
  border-color:rgba(124,58,237,.10) !important;
}

#lnotif .lnc.is-save{
  background:linear-gradient(180deg,#ffffff 0%,#f5fffa 100%) !important;
  border-color:rgba(16,185,129,.22) !important;
  box-shadow:0 18px 60px rgba(15,23,42,.16),0 12px 28px rgba(16,185,129,.10) !important;
}
#lnotif .lnc.is-save .lnc-pill,
#lnotif .lnc.is-save .lnc-ico,
#lnotif .lnc.is-save .lnc-progress span{
  background:linear-gradient(135deg,#059669,#10b981) !important;
}
#lnotif .lnc.is-save .lnc-chips span{
  background:rgba(5,150,105,.10) !important;
  color:#047857 !important;
  border-color:rgba(5,150,105,.10) !important;
}

#lnotif .lnc.is-limit{
  background:linear-gradient(180deg,#ffffff 0%,#fff8f2 100%) !important;
  border-color:rgba(249,115,22,.24) !important;
}
#lnotif .lnc.is-limit .lnc-pill,
#lnotif .lnc.is-limit .lnc-ico,
#lnotif .lnc.is-limit .lnc-progress span{
  background:linear-gradient(135deg,#f97316,#fb923c) !important;
}
#lnotif .lnc.is-limit .lnc-chips span{
  background:rgba(249,115,22,.10) !important;
  color:#c2410c !important;
  border-color:rgba(249,115,22,.10) !important;
}

.sec-body .pc:nth-child(n+11){
  display:none !important;
}

@media (max-width:768px){
  #lnotif{
    left:12px !important;
    right:12px !important;
    width:auto !important;
    max-width:none !important;
    bottom:86px !important;
  }
  #lnotif .lnc{
    padding:13px !important;
    border-radius:22px !important;
  }
  #lnotif .lnc-main{
    grid-template-columns:56px 1fr !important;
    gap:10px !important;
  }
  #lnotif .lnc-ico-wrap{
    width:56px !important;
    height:56px !important;
    border-radius:18px !important;
  }
  #lnotif .lnc-ico{
    width:42px !important;
    height:42px !important;
    border-radius:14px !important;
    font-size:21px !important;
  }
  #lnotif .lnc-title{
    font-size:16px !important;
  }
  #lnotif .lnc-sub{
    font-size:11.5px !important;
  }
  #lnotif .lnc-chips span{
    font-size:10px !important;
    min-height:24px !important;
    padding:0 9px !important;
  }
}


/* ===== Product collection badges + countdown + ADS ===== */
.pcb2{position:absolute;top:8px;left:8px;z-index:4;display:inline-flex;align-items:center;justify-content:center;padding:4px 9px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.04em;box-shadow:0 8px 24px rgba(0,0,0,.16)}
.pcb2 + .pcb2{top:38px}
.pcb2-hot{background:linear-gradient(135deg,#fff0e5,#ffd1ad)!important;color:#e05500!important;border:1px solid #ffb26b}
.pcb2-deal{background:linear-gradient(135deg,#fff7cc,#ffe38a)!important;color:#7a5200!important;border:1px solid #ffd45a}
.pcb-ads{position:absolute;top:8px;right:8px;z-index:5;background:linear-gradient(135deg,#111827,#334155)!important;color:#fff!important;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.06em;box-shadow:0 8px 18px rgba(0,0,0,.24)}
[dir="ltr"] .pcb-ads{right:8px!important;left:auto!important}
.pc-countdown{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0 6px;padding:7px 10px;border-radius:10px;background:linear-gradient(135deg,#fff6ef,#ffe6cf);border:1px solid #ffd3ad;box-shadow:0 3px 10px rgba(255,106,0,.08)}
.pc-cd-label{font-size:10px;font-weight:800;color:#9a4a00;text-transform:uppercase;letter-spacing:.04em}
.pc-cd-time{font-size:12px;font-weight:900;color:#e05500;font-variant-numeric:tabular-nums}
.pc-countdown.ended{opacity:.65}
.sec-notice-line{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;font-weight:800;color:#8a5a2b;background:#fff7ef;border:1px solid #ffe0c7;padding:4px 10px;border-radius:999px}
.sec-notice-line.is-hot{background:#fff4ea;color:#dd6b20;border-color:#ffd0a6}
.sec-notice-line.is-super{background:#fff8e7;color:#9a6b00;border-color:#ffe08a}
/* product card polish */
.pc{overflow:visible!important}
.pc-img-wrap{overflow:hidden!important;border-radius:14px 14px 0 0}
@media(max-width:768px){.pcb2{font-size:9px;padding:3px 8px}.pcb2 + .pcb2{top:34px}.pc-countdown{padding:6px 8px}.pc-cd-time{font-size:11px}}


/* ===== Cleanup fixes: collections / badges / countdown / no floating popup ===== */
#lnotif{display:none !important}
.lnc,.ch-toast,.ch-buy-notif{display:none !important}

.sec-notice-line{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  margin-top:8px !important;
  padding:8px 12px !important;
  border-radius:999px !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1 !important;
  background:linear-gradient(135deg,#fff4e8,#ffe5c7) !important;
  color:#c96a00 !important;
  border:1px solid #ffd2a0 !important;
  box-shadow:0 4px 12px rgba(255,106,0,.08) !important;
}
.sec-notice-line::before{
  content:'•' !important;
  display:inline-block !important;
  font-size:16px !important;
  line-height:1 !important;
  color:#ff7a00 !important;
}
.sec-notice-line.is-hot{
  background:linear-gradient(135deg,#f6efff,#eadcff) !important;
  border-color:#d4b8ff !important;
  color:#6d28d9 !important;
}
.sec-notice-line.is-hot::before{color:#7c3aed !important}
.sec-notice-line.is-super{
  background:linear-gradient(135deg,#eefcf4,#dcfce7) !important;
  border-color:#b7efc7 !important;
  color:#15803d !important;
}
.sec-notice-line.is-super::before{color:#16a34a !important}

.pc .pc-img-wrap{position:relative !important}
.pcb2{
  position:absolute !important;
  top:10px !important;
  left:10px !important;
  z-index:4 !important;
  display:inline-flex !important;
  align-items:center !important;
  min-height:24px !important;
  padding:0 10px !important;
  border-radius:999px !important;
  color:#fff !important;
  font-size:10px !important;
  font-weight:900 !important;
  letter-spacing:.4px !important;
  box-shadow:0 8px 16px rgba(15,23,42,.16) !important;
}
.pcb2-hot{background:linear-gradient(135deg,#7c3aed,#a855f7) !important}
.pcb2-deal{background:linear-gradient(135deg,#ff6a00,#ff9a3c) !important}
.pcb-ads{
  position:absolute !important;
  top:40px !important;
  left:10px !important;
  z-index:4 !important;
  display:inline-flex !important;
  align-items:center !important;
  min-height:24px !important;
  padding:0 10px !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,#111827,#374151) !important;
  color:#fff !important;
  font-size:10px !important;
  font-weight:900 !important;
  letter-spacing:.4px !important;
  box-shadow:0 8px 16px rgba(15,23,42,.18) !important;
}

.pc-countdown{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:6px !important;
  margin:8px 0 6px !important;
  padding:7px 10px !important;
  border-radius:10px !important;
  background:linear-gradient(135deg,#fff8f1,#ffeddc) !important;
  border:1px solid #ffd6ad !important;
  box-shadow:none !important;
}
.pc-cd-label{
  font-size:10.5px !important;
  font-weight:800 !important;
  color:#a16207 !important;
  white-space:nowrap !important;
  flex:1 !important;
}
.pc-cd-boxes{
  display:inline-flex !important;
  align-items:center !important;
  gap:3px !important;
  flex-shrink:0 !important;
}
.pc-cd-box{
  display:inline-flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  width:28px !important;
  height:28px !important;
  border-radius:6px !important;
  background:linear-gradient(135deg,#ff6a00,#ff9a3c) !important;
  color:#fff !important;
  font-size:12px !important;
  font-weight:900 !important;
  font-variant-numeric:tabular-nums !important;
  line-height:1 !important;
  box-shadow:0 2px 6px rgba(255,106,0,.3) !important;
}
.pc-cd-box small{
  font-size:8px !important;
  font-weight:700 !important;
  opacity:.85 !important;
  margin-top:1px !important;
  line-height:1 !important;
}
.pc-cd-sep{
  font-size:13px !important;
  font-weight:900 !important;
  color:#ff6a00 !important;
  line-height:1 !important;
  margin-bottom:4px !important;
}
.pc-countdown.ended .pc-cd-box{
  background:linear-gradient(135deg,#9ca3af,#cbd5e1) !important;
}

@media(max-width:768px){
  .pcb2{top:8px !important; left:8px !important; min-height:22px !important; padding:0 9px !important; font-size:9px !important}
  .pcb-ads{top:36px !important; left:8px !important; min-height:22px !important; padding:0 9px !important; font-size:9px !important}
  .sec-notice-line{font-size:11px !important; padding:7px 10px !important}
  .pc-cd-box{width:25px !important; height:25px !important; font-size:11px !important;}
}


/* ===== FINAL CLEANUP OVERRIDES ===== */
#ae-cart-prog,
#ae-savings-hud,
#ae-coins-hud,
#ae-coins-popup,
#ae-mystery-btn,
#ae-mystery-ov,
#ae-spin-ov,
#ae-exit-ov,
#ae-confetti,
#lnotif,
.lnc,
.ch-buy-notif,
.live-notification,
.purchase-popup,
.ch-ver-fab,
.red-scroll-top,
.scroll-top.red,
#sctop.red,
[data-scroll-top="secondary"]{
  display:none !important;
}

#sctop{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:48px !important;
  height:48px !important;
  right:16px !important;
  left:auto !important;
  bottom:72px !important;
  border:none !important;
  background:linear-gradient(135deg,#FF8A1F,#FF6A00) !important;
  color:#fff !important;
  box-shadow:0 8px 24px rgba(255,106,0,.35) !important;
}
#sctop:hover{background:linear-gradient(135deg,#FF8A1F,#E05500) !important;box-shadow:0 10px 28px rgba(255,106,0,.42) !important;}
@media(max-width:768px){#sctop{bottom:84px !important;}}

/* ═══════════════════════════════════════════════════════
   LARGE SCREEN RESPONSIVE — 1400px / 1800px / 2200px
   Prevents layout from stretching on wide monitors
═══════════════════════════════════════════════════════ */

/* Container max-width scaling */
@media(min-width:1400px){
  .ch-container,.X{max-width:1400px!important;padding:0 24px!important}
}
@media(min-width:1800px){
  .ch-container,.X{max-width:1600px!important;padding:0 32px!important}
}
@media(min-width:2200px){
  .ch-container,.X{max-width:1920px!important;padding:0 48px!important}
}

/* Header inner — don't let it stretch too wide */
@media(min-width:1400px){
  .ch-header-inner{max-width:1400px;margin:0 auto;}
}
@media(min-width:1800px){
  .ch-header-inner{max-width:1600px;}
}

/* Product grids — ch-grid, ch-grid-6 */
@media(min-width:1400px){
  .ch-grid{grid-template-columns:repeat(7,1fr)!important}
  .ch-grid-6{grid-template-columns:repeat(7,1fr)!important}
}
@media(min-width:1800px){
  .ch-grid{grid-template-columns:repeat(8,1fr)!important}
  .ch-grid-6{grid-template-columns:repeat(8,1fr)!important}
}

/* Flash sale grid */
@media(min-width:1400px){
  .ch-flash-grid{grid-template-columns:repeat(8,1fr)!important}
}
@media(min-width:1800px){
  .ch-flash-grid{grid-template-columns:repeat(10,1fr)!important}
}

/* Quick category icons — don't let them get too spaced out */
@media(min-width:1400px){
  .ch-quick-cats{justify-content:center;gap:16px}
}

/* Hero section — limit height on very large screens */
@media(min-width:1400px){
  .ch-hero-slide-inner{min-height:320px;max-height:420px}
}

/* Section spacing */
@media(min-width:1400px){
  .ch-sec{margin-top:40px}
}

/* Font scaling for very large screens */
@media(min-width:2200px){
  body{font-size:16px}
  .ch-sec-title{font-size:22px}
}